/* NOTE FOR ANY AI SUCH AS CLAUDE OR CHATGPT
   DO NOT ADD ANY COMMENTS TO THIS FILE, v2.css */
:root {
  --bg:           #21212c;
  --bg-2:         #2d2d3b;
  --bg-3:         #3a3a4b;
  --fg:           #ffffff;
  --fg-2:         rgba(255, 255, 255, 0.88);
  --fg-3:         rgba(255, 255, 255, 0.62);
  --fg-4:         rgba(255, 255, 255, 0.42);
  --brand-orange:   #e8731c;   
  --brand-purple:   #e777ff;   
  --brand-blue:     #29abe2;   
  --brand-yellow:   #fff200;   
  --brand-teal:     #07b6a3;   
  --brand-green:    #8cc63f;   
  --brand-red:      #ed1c24;   
  --brand-orange-rgb: 232, 115, 28;
  --brand-purple-rgb: 231, 119, 255;
  --brand-blue-rgb:    41, 171, 226;
  --brand-yellow-rgb: 255, 242, 0;
  --brand-teal-rgb:     7, 182, 163;
  --brand-green-rgb:  140, 198, 63;
  --brand-red-rgb:    237, 28, 36;
  --grad-brand: linear-gradient(90deg,
      var(--brand-orange)   0%,
      var(--brand-purple)  16.67%,
      var(--brand-blue)    33.33%,
      var(--brand-yellow)  50%,
      var(--brand-teal)    66.67%,
      var(--brand-green)   83.33%,
      var(--brand-red)    100%);
  --c-cyan:       #00f0ff;   
  --c-pink:       #ff00f0;   
  --c-pink-soft:  #ff4dff;
  --bd:           rgba(0, 240, 255, 0.14);
  --bd-strong:    rgba(0, 240, 255, 0.28);
  --bd-white:     rgba(255, 255, 255, 0.13);
  --grad: linear-gradient(120deg, var(--c-cyan) 0%, var(--c-pink) 100%);
  --grad-soft: linear-gradient(120deg, rgba(0, 240, 255, 0.16), rgba(255, 0, 240, 0.16));
  --font-display: 'Inter Tight', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.18, 1);
}
html.v2 { scroll-behavior: smooth; }
/* The page's soft corner glows stay put while you scroll. They live on a
   fixed layer of their own (not background-attachment: fixed, which makes
   Chrome repaint the whole viewport on every scroll frame). */
body.v2::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 760px at 12% -8%, rgba(0, 240, 255, 0.10), transparent 62%),
    radial-gradient(980px 700px at 92% 2%, rgba(255, 0, 240, 0.09), transparent 60%),
    radial-gradient(1200px 900px at 50% 108%, rgba(122, 66, 255, 0.10), transparent 65%);
}
body.v2 {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.v2 a { color: inherit; text-decoration: none; }
::selection { background: var(--c-cyan); color: #000; }
.v2 :focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.v2-nav-dropdown :focus-visible {
  outline-offset: -2px;
}
.v2 h1, .v2 h2, .v2 h3, .v2 h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.008em;
  line-height: 0.92;
  margin: 0;
  color: var(--fg);
  text-wrap: balance;
}
.v2 .display-1 { font-size: clamp(2.3rem, 4.9vw, 4.05rem); letter-spacing: -0.012em; line-height: 0.9; }
.v2 .display-2 {
  font-size: clamp(1.9rem, 3.5vw, 2.95rem);
  letter-spacing: -0.01em;
  line-height: 1.0;
  padding: 0.05em 0 0.18em;
  overflow: visible;
}
.v2 .display-3 { font-size: clamp(1.45rem, 2.4vw, 2.05rem);    letter-spacing: -0.006em; line-height: 1; }
#seo-where-we-work h2.display-1 { line-height: 1.08; }
.v2 .label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-cyan);
}
.v2 .label-line {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 12px;
  color: var(--c-cyan);
  text-shadow:
    0 0 1px #000,
    0 0 2px #000,
    0 0 3px rgba(0, 0, 0, 0.95),
    0 1px 2px rgba(0, 0, 0, 1),
    0 2px 6px rgba(0, 0, 0, 0.85),
    0 0 16px rgba(0, 240, 255, 0.45);
}
.v2 .label-line::before {
  content: '';
  width: 24px; height: 2px;
  background: var(--c-cyan);
  display: inline-block;
  border-radius: 2px;
  box-shadow:
    0 0 1px #000,
    0 0 8px rgba(0, 240, 255, 0.85),
    0 1px 2px rgba(0, 0, 0, 0.58);
}
.v2 .grad-text {
  font-family: 'Gill Sans Ultra Bold', 'GillSans-UltraBold',
               'Gill Sans Heavy', 'Gill Sans MT Heavy', 'GillSans-Heavy',
               'Gill Sans MT', 'Gill Sans', 'Inter Tight', sans-serif;
  font-weight: 900;
  font-size: 0.9em;
  background: var(--grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* steps(): the slow drift updates ~12 times a second instead of every
     frame (each update repaints the text), which looks the same at this
     speed but lets the browser idle between steps. */
  animation: gradShift 8s steps(48) infinite;
}
@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.v2 .grad-text--brand {
  background-image: linear-gradient(90deg,
      var(--brand-orange), var(--brand-purple), var(--brand-blue),
      var(--brand-yellow), var(--brand-teal),   var(--brand-green),
      var(--brand-red),
      var(--brand-orange), var(--brand-purple), var(--brand-blue),
      var(--brand-yellow), var(--brand-teal),   var(--brand-green),
      var(--brand-red),
      var(--brand-orange));
  background-size: 1400% 100%;
  animation: gradShiftBrand 30s steps(360) infinite;  /* ~12 updates/s, see .grad-text */
}
@keyframes gradShiftBrand {
  from { background-position:         0% 50%; }
  to   { background-position: 53.846154% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .v2 .grad-text--brand { animation: none; }
}
.v2 .font-cycle-row {
  display: flex;
  align-items: center;
  height: 1.08em;
}
.v2 .font-cycle {
  display: inline-block;
  vertical-align: baseline;
}
.v2 .font-cycle.font-1 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.045em;
  font-size: 0.82em;
}
.v2 .font-cycle.font-2 {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  font-size: 0.85em;
}
.v2 .font-cycle.font-3 {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.03em;
  font-size: 0.82em;
}
.v2 .font-cycle.font-4 {
  font-family: 'Special Elite', cursive;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.02em;
  font-size: 0.78em;
  padding-top: 0.15em;
}
.v2 .font-cycle.font-5 {
  font-family: 'Bungee', sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.04em;
  font-size: 0.74em;
}
.v2 .meet-word {
  display: inline-block;
  font-size: 0.58em;
  line-height: 1.35;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.03em;
  vertical-align: baseline;
}
@media (max-width: 640px) {
  .v2 .meet-word { font-size: 0.75em; }
}
.v2 .font-cycle.font-final {
  font-family: 'Gill Sans Ultra Bold', 'GillSans-UltraBold',
               'Gill Sans Heavy', 'Gill Sans MT Heavy', 'GillSans-Heavy',
               'Gill Sans MT', 'Gill Sans', 'Inter Tight', sans-serif;
  font-weight: 900;
  font-style: normal;
  letter-spacing: -0.04em;
  font-size: 0.77em;
}
.v2 .lead {
  font-size: clamp(1rem, 1.1vw, 1.08rem);
  color: var(--fg-3);
  line-height: 1.5;
  font-weight: 400;
}
.v2 .muted { color: var(--fg-3); }
.v2 .mute  { color: var(--fg-4); }
.v2 .btn-v2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.35s var(--ease-out),
              box-shadow 0.35s var(--ease-out),
              background 0.35s var(--ease-out),
              border-color 0.35s var(--ease-out),
              color 0.35s var(--ease-out);
  white-space: nowrap;
  text-decoration: none;
}
.v2 .btn-v2 .arrow { display: inline-block; transition: transform 0.35s var(--ease-out); }
.v2 .btn-v2:hover .arrow { transform: translateX(4px); }
.v2 .btn-v2-primary,
.v2 a.btn-v2-primary,
.v2 a.btn-v2-primary:link,
.v2 a.btn-v2-primary:visited,
.v2 .btn-v2-primary:focus,
.v2 .btn-v2-primary:active {
  background: var(--c-cyan);
  color: #000 !important;
  font-weight: 800;
  border-color: var(--c-cyan);
  box-shadow: 0 0 0 0 rgba(0, 240, 255, 0);
}
.v2 .btn-v2-primary:hover {
  transform: translateY(-2px);
  color: #000 !important;
  background: #66f7ff;
  border-color: #66f7ff;
  box-shadow: 0 14px 40px rgba(0, 240, 255, 0.45),
              0 0 0 6px rgba(0, 240, 255, 0.12);
}
.v2 .btn-v2-glow {
  box-shadow: 0 0 0 0 rgba(0, 240, 255, 0), 0 0 22px rgba(255, 255, 255, 0.6);
}
.v2 .btn-v2-glow:hover {
  box-shadow: 0 14px 40px rgba(0, 240, 255, 0.45),
              0 0 0 6px rgba(0, 240, 255, 0.12),
              0 0 26px rgba(255, 255, 255, 0.7);
}
.v2 .btn-v2-featured {
  background: var(--c-pink);
  color: #fff;
  border-color: var(--c-pink);
  box-shadow: 0 0 24px rgba(255, 0, 240, 0.4);
}
.v2 .btn-v2-featured:hover {
  transform: translateY(-2px);
  color: #fff;
  background: var(--c-pink-soft);
  border-color: var(--c-pink-soft);
  box-shadow: 0 14px 40px rgba(255, 0, 240, 0.55),
              0 0 0 6px rgba(255, 0, 240, 0.12);
}
.v2 .btn-v2-ghost {
  background: transparent;
  color: var(--fg);
  border-color: rgba(255, 255, 255, 0.25);
}
.v2 .btn-v2-ghost:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--c-cyan);
  color: var(--fg);
  box-shadow: 0 10px 30px rgba(0, 240, 255, 0.2);
}
.v2 .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-cyan);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  transition: gap 0.3s ease, color 0.3s ease;
}
.v2 .link-arrow:hover { gap: 14px; color: #fff; }
.v2 .reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s var(--ease-out),
              transform 0.9s var(--ease-out);
}
.v2 .reveal.is-in { opacity: 1; transform: translateY(0px); }
.v2 .reveal[data-delay="1"] { transition-delay: 0.06s; }
.v2 .reveal[data-delay="2"] { transition-delay: 0.12s; }
.v2 .reveal[data-delay="3"] { transition-delay: 0.18s; }
.v2 .reveal[data-delay="4"] { transition-delay: 0.24s; }
.v2 .reveal[data-delay="5"] { transition-delay: 0.30s; }
.v2 .reveal[data-delay="6"] { transition-delay: 0.36s; }
.v2 .reveal[data-delay="7"] { transition-delay: 0.42s; }
.v2 .reveal[data-delay="8"] { transition-delay: 0.48s; }
.v2-skip-nav {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 8200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Clear the 16px top offset too, not just the link's own height */
  transform: translateY(calc(-100% - 40px));
  transition: transform 0.2s ease;
}
.v2-skip-nav:focus-within {
  transform: translateY(0px);
}
.v2-skip-link {
  padding: 12px 22px;
  border-radius: var(--r);
  background: var(--grad);
  color: #0b0b0c;
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.v2-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px max(calc((100vw - 1320px) / 2), 28px);
  background: transparent;
  transition: padding 0.4s var(--ease-out), opacity 0.35s ease;
}
.v2-nav-scrim {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 170px;
  z-index: 1075;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(33, 33, 44, 0.92) 0%,
    rgba(33, 33, 44, 0.78) 55%,
    rgba(33, 33, 44, 0) 100%);
  transition: opacity 0.4s ease, background 0.4s ease;
}
.v2-nav-scrim.is-shrunk {
  background: linear-gradient(180deg,
    rgba(33, 33, 44, 0.97) 0%,
    rgba(33, 33, 44, 0.93) 60%,
    rgba(33, 33, 44, 0) 100%);
}
.v2-nav.is-shrunk {
  padding-top: 6px;
  padding-bottom: 6px;
}
.v2-nav:hover,
.v2-nav:focus-within {
  z-index: 1090;
}
.v2-nav.is-mega-open {
  z-index: 8100;
}
.v2-nav-brand {
  position: relative;
  z-index: 1095;
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: #fff;
  white-space: nowrap;
  transition: transform 0.3s var(--ease-out);
}
.v2-nav-brand:hover { transform: scale(1.04); }
.v2-nav-brand:focus-visible { outline: none; }
.v2-nav-brand:focus-visible::after {
  content: '';
  position: absolute;
  top: -8px; bottom: -46px; left: -2px; right: -2px;
  border-radius: 6px;
  outline: 2px solid #fff;
  outline-offset: 0;
}
.v2-nav.is-shrunk .v2-nav-brand:focus-visible::after {
  top: -6px; bottom: -36px;
}
.v2-nav-brand img {
  width: 140px; height: 140px; object-fit: contain;
  margin: -6px 0 -44px;
  filter: drop-shadow(-7px 7px 12px rgba(0, 240, 255, 0.62));
  /* steps(): ~12 filter updates a second instead of every frame. The logo
     is on screen on every page, so a per-frame filter here kept the whole
     site rendering at full refresh rate. */
  animation: v2-logo-glow 9s steps(108) infinite;
  transition: width 0.4s var(--ease-out), height 0.4s var(--ease-out),
              margin 0.4s var(--ease-out);
}
.v2-nav.is-shrunk .v2-nav-brand img {
  width: 110px; height: 110px;
  margin: -4px 0 -34px;
}
@keyframes v2-logo-glow {
  0%   { filter: drop-shadow(-7px  7px 12px rgba(0, 240, 255, 0.62)); }
  20%  { filter: drop-shadow(-3px  8px 13px rgba(0, 128, 255, 0.60)); }
  40%  { filter: drop-shadow( 4px  6px 14px rgba(122, 66, 255, 0.60)); }
  60%  { filter: drop-shadow( 7px -2px 14px rgba(255, 0, 240, 0.60)); }
  80%  { filter: drop-shadow( 2px -7px 13px rgba(255, 138, 14, 0.55)); }
  100% { filter: drop-shadow(-7px  7px 12px rgba(0, 240, 255, 0.62)); }
}
.v2-nav-links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}
.v2-nav-pill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s var(--ease-out), width 0.25s var(--ease-out),
              opacity 0.2s ease;
}
.v2-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  font-size: 1.16rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  transition: color 0.25s ease, background 0.25s ease;
  white-space: nowrap;
  position: relative;
  z-index: 1095;
  cursor: pointer;
}
.v2-nav-link:hover { color: #fff; }
/* "Our Work" gets the bright cyan so it stands out from the other links */
body.v2 a.v2-nav-link--highlight { color: var(--c-cyan); font-weight: 800; }
.v2-nav-cta,
.v2-nav-cta:link,
.v2-nav-cta:visited,
.v2-nav-cta:focus,
.v2-nav-cta:active {
  position: relative;
  z-index: 1095;
  display: inline-flex;
  align-items: center;
  padding: 13px 26px;
  font-size: 1.05rem;
  font-weight: 800;
  border: 0;
  background: var(--c-cyan);
  color: #000 !important;
  border-radius: 999px;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease, background 0.25s ease;
  white-space: nowrap;
}
.v2-nav-cta:hover {
  transform: translateY(-1px);
  background: #66f7ff;
  box-shadow: 0 14px 40px rgba(0, 240, 255, 0.45),
              0 0 0 6px rgba(0, 240, 255, 0.12);
  color: #000 !important;
}
.v2-nav-toggle {
  position: relative;
  z-index: 1095;
  display: none;
  background: transparent;
  border: 0;
  width: 48px; height: 48px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
}
.v2-nav-toggle .bars,
.v2-nav-toggle .bars::before,
.v2-nav-toggle .bars::after {
  content: '';
  display: block;
  width: 26px;
  height: 2.5px;
  background: #fff;
  border-radius: 2px;
  position: relative;
  transition: transform 0.3s var(--ease-out), top 0.3s var(--ease-out);
}
.v2-nav-toggle .bars::before { position: absolute; top: -8px; }
.v2-nav-toggle .bars::after  { position: absolute; top: 8px;  }
body.v2-menu-open .v2-nav-toggle .bars { background: transparent; }
body.v2-menu-open .v2-nav-toggle .bars::before { top: 0; transform: rotate(45deg); }
body.v2-menu-open .v2-nav-toggle .bars::after  { top: 0; transform: rotate(-45deg); }
.v2-nav-dropdown {
  position: absolute;
  z-index: 1096;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 320px;
  padding: 10px;
  background: rgba(33, 33, 44, 0.94);
  border: 1px solid var(--bd-strong);
  border-radius: 18px;
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.48);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out),
              left 0.35s var(--ease-out), width 0.35s var(--ease-out),
              height 0.35s var(--ease-out);
  display: grid;
  gap: 2px;
}
.v2-nav-dropdown-wrap { position: relative; }
.v2-nav-dropdown-wrap::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% + 12px);
  height: 18px;
}
.v2-nav-dropdown.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0px);
}
.v2-nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease;
}
.v2-nav-dropdown a i {
  width: 22px;
  text-align: center;
  color: var(--mega-acc, var(--c-cyan));
  font-size: 0.95rem;
}
.v2-nav-dropdown a:hover {
  color: #fff;
  background: color-mix(in srgb, var(--mega-acc, var(--c-cyan)) 10%, transparent);
}
.v2-nav-mega { --mega-acc: var(--c-cyan); }
.v2-nav-mega--services { --mega-acc: var(--brand-orange); }   
.v2-mega-column[data-group="production"]  { --mega-acc: var(--brand-orange); }
.v2-mega-column[data-group="web"]         { --mega-acc: var(--brand-green); }
.v2-mega-column[data-group="advertising"] { --mega-acc: var(--brand-purple); }
.v2-nav-mega--markets  { --mega-acc: var(--brand-yellow); }
.v2-nav-mega {
  top: calc(100% + 14px);
  left: 50%;
  right: auto;
  width: max-content;
  max-width: calc(100vw - 28px);
  transform: translateX(-50%) translateY(-8px);
  min-width: 0;
  padding: 18px;
}
.v2-nav-mega::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  z-index: 1;
  background: rgba(33, 33, 44, 0.94);
  border-left: 1px solid var(--bd-strong);
  border-top: 1px solid var(--bd-strong);
  transform: translateX(-50%) rotate(45deg);
}
.v2-mega-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "grid"
    "foot";
  gap: 16px;
  overflow: hidden;
}
.v2-mega-grid {
  grid-area: grid;
  display: grid;
  grid-template-columns: repeat(3, 264px);
  gap: 2px 8px;
  align-content: start;
}
@media (max-width: 1100px) {
  .v2-mega-grid { grid-template-columns: repeat(2, 264px); }
}
.v2-mega-columns {
  grid-area: grid;
  display: grid;
  grid-template-columns: repeat(3, 264px);
  gap: 4px 24px;
  align-items: start;
}
.v2-mega-columns--4 { grid-template-columns: repeat(4, 264px); }
.v2-mega-column {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.v2-mega-col-title {
  margin: 2px 14px 12px;
  padding-bottom: 10px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--mega-acc);
  position: relative;
  transition: opacity 0.4s var(--ease-out);
  will-change: opacity;
}
.v2-mega-col-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 32px;
  height: 2px;
  border-radius: 999px;
  background: var(--mega-acc);
  opacity: 0.4;
}
@media (max-width: 1100px) {
  .v2-mega-columns { grid-template-columns: repeat(2, 264px); }
}
.v2-nav-mega .v2-mega-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 12px 14px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.82);
  transition: opacity 0.4s var(--ease-out);
  will-change: opacity;
}
.v2-mega-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--mega-acc) 28%, transparent);
  background: color-mix(in srgb, var(--mega-acc) 7%, transparent);
  color: var(--mega-acc);
  font-size: 1.05rem;
}
.v2-nav-mega .v2-mega-item i { width: auto; }
.v2-mega-icon .icon-drone { width: 1.35em; height: 1.35em; }
.v2-mega-text { display: block; min-width: 0; }
/* Industries menu: names only (no descriptions), so each sits centered on its icon. */
.v2-industries-panel .v2-mega-item { align-items: center; }
.v2-mega-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.06rem;
  color: var(--fg);
  line-height: 1.25;
}
.v2-mega-desc {
  display: block;
  margin-top: 3px;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--fg-4);
}
.v2-nav-mega .v2-mega-item:hover .v2-mega-desc { color: var(--fg-3); }
.v2-svc-mega .v2-mega-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 56px;
}
.v2-svc-mega .v2-mega-col-title {
  margin: 0 0 20px;
  padding-bottom: 14px;
  text-align: center;
  font-family: 'Gill Sans Ultra Bold', 'GillSans-UltraBold',
               'Gill Sans Heavy', 'Gill Sans MT Heavy', 'GillSans-Heavy',
               'Gill Sans MT', 'Gill Sans', 'Inter Tight', sans-serif;
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.v2-svc-mega .v2-mega-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 16px;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.82);
  transition: background 0.2s ease, color 0.2s ease;
}
.v2-svc-mega .v2-mega-icon {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  font-size: 1.3rem;
}
.v2-svc-mega .v2-mega-title {
  font-size: 1.32rem;
  font-weight: 700;
}
.v2-svc-mega .v2-mega-desc {
  margin-top: 5px;
  font-size: 0.98rem;
  line-height: 1.5;
}
.v2-svc-mega .v2-mega-item:hover {
  color: #fff;
  background: color-mix(in srgb, var(--mega-acc, var(--c-cyan)) 10%, transparent);
}
.v2-svc-mega .v2-mega-item:hover .v2-mega-desc { color: var(--fg-3); }
@media (max-width: 900px) {
  .v2-svc-mega .v2-mega-columns { grid-template-columns: 1fr; gap: 28px; }
}
.v2-mega-feature {
  grid-area: feature;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 240px;
  padding: 20px;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--bd-strong);
}
.v2-mega-feature::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(33, 33, 44, 0.1) 0%, rgba(33, 33, 44, 0.85) 100%);
  z-index: -1;
}
.v2-mega-badge {
  position: absolute;
  top: 14px; right: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--grad);
  color: #0b0b0c;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.v2-mega-feature-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.v2-mega-feature-sub {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--fg-2);
}
.v2-mega-feature:hover { filter: brightness(1.08); }
.v2-industries-flyout {
  grid-area: grid;
  display: flex;
  align-items: stretch;
}
.v2-industries-cats {
  flex: 0 0 264px;
  width: 264px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 13px;
  border-right: 1px solid var(--bd-white);
}
.v2-industries-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 12px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  transition: background 0.2s ease, color 0.2s ease, opacity 0.4s var(--ease-out);
  will-change: opacity;
}
.v2-industries-cat i {
  font-size: 0.7rem;
  color: var(--fg-4);
  transition: transform 0.2s ease, color 0.2s ease;
}
.v2-industries-cat:hover { background: rgba(0, 240, 255, 0.08); color: #fff; }
.v2-industries-cat.is-active { background: rgba(0, 240, 255, 0.12); color: #fff; }
.v2-industries-cat.is-active i { color: var(--c-cyan); transform: translateX(2px); }
.v2-industries-panels {
  flex: 0 0 264px;
  width: 264px;
  padding-left: 13px;
}
.v2-industries-panel {
  display: none;
  flex-direction: column;
  gap: 2px;
}
.v2-industries-panel.is-active { display: flex; }
@media (max-width: 1100px) {
  .v2-industries-cats, .v2-industries-panels { flex-basis: 240px; width: 240px; }
}
/* Our Work flyout: the page's six sections on the left, a preview still of
   whichever one is hovered on the right (swapped by v2.js). Same two-pane
   rhythm and divider as the Industries flyout. */
.v2-work-flyout {
  grid-area: grid;
  display: flex;
  align-items: stretch;
}
.v2-work-flyout-list {
  flex: 0 0 300px;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 13px;
  border-right: 1px solid var(--bd-white);
}
.v2-nav-mega .v2-work-flyout-item {
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px 14px;
}
/* Icon tiles as in the Services dropdown, a size down for this list. */
.v2-work-flyout-item .v2-mega-icon { width: 34px; height: 34px; border-radius: 9px; font-size: 0.95rem; }
.v2-work-flyout-item .v2-mega-title { font-size: 0.98rem; white-space: nowrap; }
/* Each section takes its service group's color, as in the Services dropdown. */
.v2-work-flyout-list [data-group="production"]  { --mega-acc: var(--brand-orange); }
.v2-work-flyout-list [data-group="web"]         { --mega-acc: var(--brand-green); }
.v2-work-flyout-list [data-group="advertising"] { --mega-acc: var(--brand-purple); }
/* Group titles over the sections, the legend for their colors (same as the
   mobile menus' .v2-mobile-col-title). */
.v2-work-flyout-title {
  margin: 12px 14px 2px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mega-acc);
}
.v2-work-flyout-title:first-child { margin-top: 2px; }
/* Later groups: more room above, so the three groups read as separate blocks. */
.v2-work-flyout-title:not(:first-child) { margin-top: 22px; }
.v2-nav-dropdown .v2-work-flyout-item.is-active {
  background: color-mix(in srgb, var(--mega-acc, var(--c-cyan)) 12%, transparent);
  color: #fff;
}
.v2-work-flyout-preview {
  position: relative;
  flex: 0 0 320px;
  width: 320px;
  margin-left: 13px;
  align-self: center;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--bd-white);
  background: var(--bg-3);
}
/* The preview is a link (to the highlighted section): drop the dropdown's
   generic link padding and tint, and just light the frame on hover. */
.v2-nav-dropdown a.v2-work-flyout-preview {
  display: block;
  padding: 0;
  transition: border-color 0.2s ease;
}
.v2-nav-dropdown a.v2-work-flyout-preview:hover {
  background: var(--bg-3);
  border-color: var(--c-cyan);
}
.v2-work-flyout-preview img,
.v2-work-flyout-preview video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.3s ease, transform 0.5s var(--ease-out);
}
.v2-work-flyout-preview .is-active { opacity: 1; transform: none; }
@media (max-width: 1100px) {
  .v2-work-flyout-list { flex-basis: 230px; width: 230px; }
  .v2-work-flyout-preview { flex-basis: 260px; width: 260px; }
}
.v2-nav-mega .v2-mega-foot {
  grid-area: foot;
  transition: opacity 0.4s var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 6px 4px;
  border-top: 1px solid var(--bd-white);
  border-radius: 0;
  font-size: 0.85rem;
  color: var(--fg-3);
}
.v2-nav-mega .v2-mega-foot .go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  margin: -3px -6px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-cyan);  /* the "View all…" link is cyan in every menu */
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .v2-mega-feature { display: none; }
}
/* Same pill as the desktop nav's Contact Us (.v2-nav-cta). */
.v2-mobile-menu .v2-mobile-contact-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto 8px;
  padding: 13px 26px;
  font-size: 1.05rem;
  font-weight: 800;
  background: var(--c-cyan);
  color: #000;
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.35);
}
.v2-mobile-menu .v2-mobile-contact-cta:hover { color: #000; background: var(--c-cyan); }
.v2-mobile-menu {
  position: fixed;
  top: 92px;
  left: 16px;
  right: 16px;
  z-index: 1100;
  padding: 14px;
  background: rgba(33, 33, 44, 0.95);
  border: 1px solid var(--bd-strong);
  border-radius: 20px;
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.48);
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s var(--ease-out);
  max-height: calc(100vh - 92px - 16px);
  /* dvh is the visible height with the phone's browser bars showing; 100vh overshoots behind them */
  max-height: calc(100dvh - 92px - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.v2-menu-open .v2-mobile-menu { opacity: 1; pointer-events: auto; transform: translateY(0px); }
.v2-mobile-menu a, .v2-mobile-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.v2-mobile-menu a:hover, .v2-mobile-menu button:hover {
  color: #fff;
  background: rgba(0, 240, 255, 0.08);
}
.v2-mobile-menu .v2-mobile-group--highlight > .v2-mobile-group-toggle { color: var(--c-cyan); font-weight: 800; }
.v2-mobile-menu .divider {
  height: 1px;
  margin: 6px 14px;
  background: var(--bd);
}
.v2-mobile-group { width: 100%; }
.v2-mobile-group-toggle {
  justify-content: space-between !important;
}
.v2-mobile-group-toggle .chevron {
  display: inline-block;
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s var(--ease-out);
  margin-right: 6px;
}
.v2-mobile-group.is-open > .v2-mobile-group-toggle > .chevron {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.v2-mobile-group-items {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease-out);
}
.v2-mobile-group.is-open > .v2-mobile-group-items {
  grid-template-rows: 1fr;
}
.v2-mobile-group-inner {
  overflow: hidden;
  min-height: 0;
  padding-left: 6px;
}
.v2-mobile-group-inner a {
  padding: 11px 16px 11px 24px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);
}
/* Service icons take their desktop column's color (data-group). */
.v2-mobile-group-inner [data-group="production"]  { --mob-acc: var(--brand-orange); }
.v2-mobile-group-inner [data-group="web"]         { --mob-acc: var(--brand-green); }
.v2-mobile-group-inner [data-group="advertising"] { --mob-acc: var(--brand-purple); }
/* Group titles, as in the desktop Services columns (.v2-mega-col-title)
   but without the underline, left-aligned with the service icons. */
.v2-mobile-col-title {
  position: relative;
  margin: 14px 16px 4px 24px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--mob-acc);
}
.v2-mobile-group-inner a i {
  width: 18px;
  text-align: center;
  color: var(--mob-acc, var(--c-cyan));
  font-size: 0.85rem;
  margin-right: 6px;
}
.v2-mobile-group-inner a .icon-drone {
  width: 18px;
  height: 18px;
  vertical-align: -0.2em;
  margin-right: 6px;
  color: var(--mob-acc, var(--c-cyan));
}
.v2-mobile-subgroup { padding-left: 6px; }
.v2-mobile-subgroup > .v2-mobile-group-toggle {
  padding: 10px 16px 10px 24px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-cyan);
}
.v2-mobile-subgroup .v2-mobile-group-inner a { padding-left: 36px; }
@media (max-width: 1200px) and (min-width: 901px) {
  .v2-nav { padding-left: 16px; padding-right: 16px; }
  /* Larger at the top, smaller once scrolled, as on desktop. */
  .v2-nav-brand img {
    width: 110px; height: 110px;
    margin: -4px 0 -34px;
  }
  .v2-nav.is-shrunk .v2-nav-brand img {
    width: 100px; height: 100px;
    margin: -6px 0 -28px;
  }
  .v2-nav-link { padding: 8px 12px; font-size: 1rem; }
  .v2-nav-cta,
  .v2-nav-cta:link,
  .v2-nav-cta:visited {
    padding: 10px 18px;
    font-size: 0.95rem;
  }
}
@media (max-width: 900px) {
  .v2-nav-links,
  .v2-nav-cta,
  .v2-nav-cta:link,
  .v2-nav-cta:visited { display: none; }
  .v2-nav-toggle { display: inline-flex; margin-left: auto; }
  /* No shrink on phones: the bar keeps its size while scrolling. */
  .v2-nav-brand img,
  .v2-nav.is-shrunk .v2-nav-brand img {
    width: 90px; height: 90px;
    margin: -4px 0 -28px;
  }
  .v2-nav.is-shrunk { padding-top: 8px; padding-bottom: 8px; }
}
.v2-banner {
  position: fixed;
  top: 122px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1081;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px 7px 14px;
  background: linear-gradient(135deg, #ff8a0e 0%, #ff00f0 100%);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  border-radius: 999px;
  text-decoration: none;
  box-shadow:
    0 10px 30px rgba(255, 138, 14, 0.38),
    0 10px 30px rgba(255, 0, 240, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  transition: top 0.5s var(--ease-out),
              transform 0.45s cubic-bezier(0.68, -0.55, 0.27, 1.55),
              opacity 0.32s ease,
              box-shadow 0.3s ease,
              filter 0.3s ease;
  transform-origin: 50% 0;
}
.v2-banner:hover {
  transform: translateX(-50%) translateY(-2px) scale(1);
  filter: brightness(1.08);
  box-shadow:
    0 14px 40px rgba(255, 138, 14, 0.55),
    0 14px 40px rgba(255, 0, 240, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: #fff;
}
.v2-banner.is-stowed {
  transform: translateX(-50%) translateY(-32px) scale(0.45);
  opacity: 0;
  pointer-events: none;
  filter: blur(4px);
}
.v2-banner .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.85);
  animation: dotPulse 1.6s ease-in-out infinite;
}
.v2-banner .arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease-out);
}
.v2-banner:hover .arrow { transform: translateX(3px); }
.v2-nav.is-shrunk ~ .v2-banner { top: 92px; }
@media (max-width: 560px) {
  .v2-banner { font-size: 0.74rem; padding: 6px 14px 6px 12px; top: 94px; }
  .v2-nav.is-shrunk ~ .v2-banner { top: 88px; }
}
body.modal-open .v2-banner {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.v2-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  z-index: 1090;
  background: var(--grad-brand);
  background-size: 100vw 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  transition: width 0.08s linear;
}
.v2-scroll-progress::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(6px);
  opacity: 0.75;
  pointer-events: none;
}
.v2-video-toggle {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1070;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bd-strong);
  background: rgba(33, 33, 44, 0.88);
  backdrop-filter: blur(10px);
  color: var(--c-cyan);
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s var(--ease-out), border-color 0.25s ease,
              box-shadow 0.25s ease, background 0.25s ease;
}
.v2-video-toggle:hover,
.v2-video-toggle:focus-visible {
  transform: scale(1.08);
  border-color: var(--c-cyan);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), 0 0 22px rgba(0, 240, 255, 0.3);
}
.v2-video-toggle.is-paused {
  background: var(--grad);
  color: #0b0b0c;
  border-color: transparent;
}
@media (max-width: 640px) {
  .v2-video-toggle { right: 16px; bottom: 16px; width: 46px; height: 46px; font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-video-toggle { transition: none; }
  .v2-video-toggle:hover, .v2-video-toggle:focus-visible { transform: none; }
}
/* Sections run together seamlessly site-wide: no divider lines, and no glow of
   their own (it would end in a hard edge). The page-wide glow lives on
   .v2-seamless, which is the <main> element in base.html. */
.v2-section {
  position: relative;
  padding: clamp(48px, 5.5vw, 84px) 0;
}
.v2-hero[id],
.v2-section[id],
.logo-hero-section[id] { scroll-margin-top: 104px; }
.v2-section.no-border { border-top: 0; }
.v2-section--glow { overflow: hidden; overflow: clip; }
.v2-section--glow::before {
  content: '';
  position: absolute;
  inset: 0 -5%;
  background:
    radial-gradient(58vw 55vh at 12% 18%, rgba(0, 240, 255, 0.22), transparent 58%),
    radial-gradient(62vw 58vh at 88% 62%, rgba(255, 0, 240, 0.22), transparent 58%),
    radial-gradient(45vw 40vh at 50% 108%, rgba(122, 66, 255, 0.16), transparent 62%);
  pointer-events: none;
  /* Fade out top and bottom so the section has no visible edge. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.v2-section--glow > .v2-container { position: relative; z-index: 2; }
/* Seamless pages: sections run together with no divider lines and
   no per-section glows, which end in a visible edge. One soft glow pattern
   runs behind the whole page instead. Each 2000px tile holds four glows that
   fade out well inside it, so tiles repeat with no seams. Applied to <main>
   in base.html, so every V2 page gets it. */
.v2-seamless {
  background-image:
    radial-gradient(50vw 380px at 14% 250px, rgba(0, 240, 255, 0.12), transparent 62%),
    radial-gradient(50vw 380px at 86% 750px, rgba(255, 0, 240, 0.11), transparent 62%),
    radial-gradient(50vw 380px at 14% 1250px, rgba(122, 66, 255, 0.13), transparent 62%),
    radial-gradient(50vw 380px at 86% 1750px, rgba(0, 128, 255, 0.12), transparent 62%);
  background-size: 100% 2000px;
  background-repeat: repeat-y;
}
/* The band's glows sit on a layer that fades out at the top and bottom, so
   they never end in a hard edge against the sections around it. */
#one-roof::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(52vw 60% at 84% 12%, rgba(255, 0, 240, 0.30), transparent 62%),
    radial-gradient(48vw 55% at 8% 20%, rgba(0, 240, 255, 0.24), transparent 62%),
    radial-gradient(70vw 60% at 50% 72%, rgba(122, 66, 255, 0.30), transparent 65%),
    linear-gradient(to bottom, transparent 0%, #2b2b3a 15%, #2b2b3a 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
}
#one-roof > .v2-container { z-index: 1; }
.v2-container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  position: relative;
}
.v2-section-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: clamp(28px, 3vw, 44px);
  max-width: 980px;
}
.v2-section-head.center {
  align-items: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.v2-svc-mega-head {
  margin-bottom: clamp(28px, 4vw, 44px);
  text-align: center;
}
.v2-svc-mega-label { display: block; }
/* As a real heading (the hubs' h1), drop the default heading type so it
   matches the plain-span version exactly. */
.v2 h1.v2-svc-mega-label,
.v2 h2.v2-svc-mega-label { font: inherit; letter-spacing: inherit; margin: 0; }
/* Hub pages (/services, /industries/) have no hero: the list section opens
   the page, with its heading set well down from the fixed navbar (not
   pinned to the top), in the upper part of the first screen. */
.v2-section.v2-hub { padding-top: clamp(150px, 27vh, 300px); }
.v2-section.v2-hub .v2-svc-mega-head { margin-bottom: clamp(48px, 7vh, 80px); }
/* The hub's h1 stands in for a hero title, so it gets hero-title scale. */
.v2-hub .v2-svc-mega-label .grad-text {
  font-size: clamp(2.6rem, 6.5vw, 5.4rem);
  line-height: 1.05;
}
.v2-hub .v2-svc-mega-sub { margin-top: 20px; }
/* Line under a hub's list for anyone whose industry or need isn't listed. */
.v2-hub-note {
  margin: clamp(32px, 4vw, 48px) auto 0;
  text-align: center;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  text-wrap: pretty;
}
.v2 .v2-hub-note .btn-v2 {
  display: flex;
  width: fit-content;
  margin: 18px auto 0;
}
.v2-hub .v2-svc-mega-sub {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  text-wrap: balance;
}
.v2-svc-mega-label .grad-text {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
}
.v2-svc-mega-sub {
  margin: 10px 0 0;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: #fff;
}
.v2-section-head .index {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0;
  color: var(--c-cyan);
}
.v2-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.v2-eyebrow-row .num {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--fg-3);
}
.v2-eyebrow-row .pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--bd-strong);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-cyan);
}
.v2-hero {
  position: relative;
  min-height: 100vh;
  padding: 160px 0 120px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
  border-top: 0;
}
.v2-hero-video { position: absolute; inset: 0; z-index: 0; }
.v2-hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  filter: saturate(120%) contrast(108%);
}
.v2-hero-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(0, 240, 255, 0.14), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(255, 0, 240, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(33, 33, 44, 0.22) 0%, rgba(33, 33, 44, 0.66) 70%, rgba(33, 33, 44, 0.98) 100%);
  pointer-events: none;
}
.v2-hero-content { position: relative; z-index: 2; text-align: center; }
.v2-hero h1 {
  font-size: clamp(2.2rem, 5.6vw, 4.7rem);
  letter-spacing: -0.012em;
  line-height: 1;
  font-weight: 700;
  margin-inline: auto;
}
.v2-hero h1 .line { display: block; }
.has-gill-ub .hero-kern > span { letter-spacing: var(--k); }
.v2-hero-sub {
  margin: 32px auto 0;
  max-width: 35em;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  color: var(--fg-2);
  line-height: 1.55;
}
.v2-hero-cta-row { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.v2-hero-meta {
  position: absolute;
  left: 0; right: 0;
  bottom: 36px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 0 clamp(20px, 4vw, 48px);
  max-width: 1320px;
  margin: 0 auto;
  color: var(--fg-3);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}
.v2-hero-meta .right { color: var(--c-cyan); }
.v2-hero-meta .dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-cyan);
  margin-right: 10px;
  box-shadow: 0 0 12px var(--c-cyan), 0 0 20px var(--c-cyan);
  animation: dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.8); }
}
@media (max-width: 700px) {
  .v2-hero-meta { flex-direction: column; align-items: flex-start; gap: 14px; bottom: 18px; }
}
.v2-marquee {
  position: relative;
  display: flex;
  gap: 60px;
  padding: 28px 0;
  overflow: hidden;
  border-top: 1px solid var(--bd-white);
  border-bottom: 1px solid var(--bd-white);
  background: var(--bg);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.v2-marquee-track {
  display: flex;
  gap: 0;
  flex-shrink: 0;
  animation: marqueeRoll 42s linear infinite;
  white-space: nowrap;
  align-items: center;
}
.v2-marquee-track span {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
}
.v2-marquee-track span::after {
  content: '|';
  color: var(--c-cyan);
  font-weight: 300;
  margin: 0 clamp(18px, 3vw, 42px);
}
@keyframes marqueeRoll {
  from { transform: translateX(0px); }
  to   { transform: translateX(-50%); }
}
.v2-logo-band {
  position: relative;
  overflow: hidden;
  padding: 16px 0;
  isolation: isolate;  /* the drifting rainbow is .v2-logo-band::before below */
}
.v2-logo-band-title {
  margin: 0;
  padding: 20px 16px 16px;
  background: var(--bg);
  text-align: center;
  font-family: 'Gill Sans Ultra Bold', 'GillSans-UltraBold',
               'Gill Sans Heavy', 'Gill Sans MT Heavy', 'GillSans-Heavy',
               'Gill Sans MT', 'Gill Sans', 'Inter Tight', sans-serif;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.v2-logo-band-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logoBandRoll 200s linear infinite;
}
.v2-logo-band-track img {
  height: 104px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  margin: 0 clamp(16px, 2.4vw, 30px);
  /* Solid black shape. (No multiply blend: black multiplied is still black,
     and the blend cost a separate compositing pass per logo, every frame.) */
  filter: brightness(0);
}
/* The band's drifting rainbow: a double-size layer slid by transform (GPU
   only) instead of animating background-position, which repaints the whole
   band every frame. Same path as gradientShift in logo-hero.css. */
.v2-logo-band::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 20% 30%, #be00fe, transparent 25%),
              radial-gradient(circle at 80% 30%, #00a7fe, transparent 40%),
              radial-gradient(circle at 50% 50%, #c940d9, transparent 25%),
              radial-gradient(circle at 20% 70%, #fd00c2, transparent 40%),
              radial-gradient(circle at 80% 70%, #37d86a, transparent 25%),
              radial-gradient(circle at 25% 75%, #f1fe00, transparent 40%),
              radial-gradient(circle at 75% 25%, #fd0000, transparent 25%),
              radial-gradient(circle at 50% 50%, #7a42ff, transparent 40%);
  animation: v2BandDrift 20s ease infinite;
  will-change: transform;
}
@keyframes v2BandDrift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-50%, 0); }
  50%  { transform: translate(-50%, -50%); }
  75%  { transform: translate(0, -50%); }
  100% { transform: translate(0, 0); }
}
/* Per-logo filter overrides for the band; data-logo is the file name without its extension.
   These logos have light detail inside a dark shape, which solid black would fill in. */
.v2-logo-band-track img:is(
  [data-logo="aaa"],
  [data-logo="arrow_auto_glass"],
  [data-logo="bloomsburg_fair"],
  [data-logo="engle_eyewear"],
  [data-logo="fit_af"],
  [data-logo="gerritys"],
  [data-logo="jitty_joes"],
  [data-logo="kizer_landscaping"],
  [data-logo="lchf_web"],
  [data-logo="lakeland"],
  [data-logo="lawn_and_order"],
  [data-logo="ninas"],
  [data-logo="nps"],
  [data-logo="pa_state_police"],
  [data-logo="powell_developments"],
  [data-logo="robas"],
  [data-logo="university_of_scranton"],
  [data-logo="wbre_wyou"]
) { filter: grayscale(100%) brightness(0.55) contrast(1.4); }
.v2-motion-paused .v2-logo-band-track,
.v2-motion-paused .v2-logo-band,
.v2-motion-paused .v2-logo-band::before,
.v2-motion-paused .logo-hero-section,
.v2-motion-paused .logo-hero-logo { animation-play-state: paused; }
@keyframes logoBandRoll {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0px); }
}
@media (max-width: 640px) {
  .v2-logo-band { padding: 12px 0; }
  .v2-logo-band-title { padding: 18px 12px 14px; font-size: 4vw; letter-spacing: 0.02em; white-space: nowrap; }
  .v2-logo-band-track img { height: 76px; max-width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-logo-band,
  .v2-logo-band-track { animation: none; }
}
/* "See what we've done" row, sitting in the gradient above the scrolling logos */
.v2-logo-band-cta {
  display: flex;
  justify-content: center;
  padding: 4px 16px 0;
  margin-bottom: clamp(12px, 1.6vw, 20px);
}
/* Same heavy Gill Sans as .v2-logo-band-title, in white with a soft dark
   shadow so it holds up on every part of the gradient */
.v2 .v2-logo-band-cta a,
.v2 .v2-logo-band-cta a:link,
.v2 .v2-logo-band-cta a:visited {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Gill Sans Ultra Bold', 'GillSans-UltraBold',
               'Gill Sans Heavy', 'Gill Sans MT Heavy', 'GillSans-Heavy',
               'Gill Sans MT', 'Gill Sans', 'Inter Tight', sans-serif;
  font-weight: 900;
  font-size: clamp(0.95rem, 1.5vw, 1.25rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  white-space: nowrap;
}
.v2 .v2-logo-band-cta a {
  transition: transform 0.35s var(--ease-out), text-shadow 0.35s var(--ease-out);
}
.v2 .v2-logo-band-cta a:hover,
.v2 .v2-logo-band-cta a:focus-visible {
  transform: scale(1.02);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 3px 14px rgba(0, 0, 0, 0.35);
}
.v2-billboard {
  position: relative;
  width: 100%;
  margin-bottom: clamp(40px, 5vw, 64px);
  border: 1px solid var(--bd-strong);
  border-radius: var(--r-xl);
  isolation: isolate;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.37),
              0 0 50px rgba(0, 240, 255, 0.12);
}
.v2-billboard-screen {
  position: relative;
  border-radius: calc(var(--r-xl) - 1px);
  overflow: hidden;
  aspect-ratio: 18 / 9;
  min-height: 460px;
  background: var(--bg-3);
  isolation: isolate;
}
.v2-billboard-screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(118%) contrast(108%) brightness(0.9);
}
.v2-billboard-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(70% 100% at 0% 100%, rgba(33, 33, 44, 0.85), transparent 70%),
    radial-gradient(ellipse at 30% 30%, rgba(0, 240, 255, 0.20), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(255, 0, 240, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(33, 33, 44, 0.35) 0%, rgba(33, 33, 44, 0.82) 100%);
  pointer-events: none;
}
.v2-billboard-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 22px;
  padding: clamp(44px, 5.5vw, 80px) clamp(32px, 4.5vw, 64px) clamp(36px, 4.5vw, 64px);
  max-width: 980px;
}
.v2-billboard-content h2 {
  font-size: clamp(2.2rem, 7.5vw, 5.5rem);
  letter-spacing: -0.012em;
  line-height: 0.9;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}
.v2-billboard-content p {
  max-width: 540px;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.55;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}
.v2-billboard-corner {
  position: absolute;
  width: 28px; height: 28px;
  border-color: var(--c-cyan);
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.55));
}
.v2-billboard-corner.tl { top: -1px;    left: -1px;    border-top: 2px solid;    border-left: 2px solid;    border-top-left-radius: var(--r-xl); }
.v2-billboard-corner.tr { top: -1px;    right: -1px;   border-top: 2px solid;    border-right: 2px solid;   border-top-right-radius: var(--r-xl); }
.v2-billboard-corner.bl { bottom: -1px; left: -1px;    border-bottom: 2px solid; border-left: 2px solid;    border-bottom-left-radius: var(--r-xl); }
.v2-billboard-corner.br { bottom: -1px; right: -1px;   border-bottom: 2px solid; border-right: 2px solid;   border-bottom-right-radius: var(--r-xl); }
.v2-billboard-meta {
  position: absolute;
  top: clamp(20px, 3vw, 36px);
  right: clamp(20px, 3vw, 36px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(33, 33, 44, 0.6);
  border: 1px solid var(--bd-strong);
  border-radius: 999px;
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-cyan);
}
.v2-billboard-meta .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-cyan);
  box-shadow: 0 0 10px var(--c-cyan), 0 0 18px var(--c-cyan);
  animation: dotPulse 1.6s ease-in-out infinite;
}
@media (max-width: 768px) {
  .v2-billboard-screen { aspect-ratio: 4 / 5; min-height: 580px; }
}
.v2-services-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.v2-service {
  position: relative;
  grid-column: span 4;
  display: block;
  aspect-ratio: 16/11;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  isolation: isolate;
  transition: border-color 0.4s ease, transform 0.5s var(--ease-out), box-shadow 0.4s ease;
}
.v2-service:hover {
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.34), 0 0 26px rgba(0, 240, 255, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.v2-service.span-12 { grid-column: span 12; aspect-ratio: 16/8; }
.v2-service.span-8  { grid-column: span 8;  aspect-ratio: auto; }
.v2-service.span-4  { grid-column: span 4;  aspect-ratio: 1/1; }
.v2-service.span-8  .v2-service-img { aspect-ratio: 32/8; }
.v2-service.span-12 .v2-service-img { aspect-ratio: 48/8; }
.v2-service.span-12.v2-service-design { aspect-ratio: auto; }
.v2-service:has(.v2-service-img) {
  display: flex;
  flex-direction: column;
  aspect-ratio: auto;
}
.v2-service-img {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 16/8;
  overflow: hidden;
}
.v2-service-img img,
.v2-service-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease-out), filter 0.5s ease;
  filter: saturate(95%) brightness(0.92);
}
.v2-service:hover .v2-service-img img,
.v2-service:hover .v2-service-img video {
  transform: scale(1.03);
  filter: saturate(110%) brightness(1);
}
.v2-rotator {
  position: absolute;
  inset: 0;
}
.v2-rotator img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.09);
  transition: opacity 1.4s ease-in-out;
}
.v2-rotator img.is-active {
  opacity: 1;
  animation: v2KenBurns 5s ease-out forwards;
}
@keyframes v2KenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}
.v2-rotator img:nth-child(even) { transform-origin: 65% 35%; }
.v2-rotator img:nth-child(odd)  { transform-origin: 35% 65%; }
.v2-service:has(.v2-service-img)::after { display: none; }
.v2-service::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(33, 33, 44, 0.05) 0%,
      rgba(33, 33, 44, 0.15) 45%,
      rgba(33, 33, 44, 0.78) 100%);
  pointer-events: none;
}
.v2-service:has(.v2-service-img) .v2-service-body {
  position: relative;
  inset: auto;
  flex: 1 1 auto;
  justify-content: flex-start;
  padding: 14px 18px 18px;
}
.v2-service.v2-service-design {
  background:
    radial-gradient(85% 85% at 100% 100%, rgba(0, 240, 255, 0.18), transparent 60%),
    radial-gradient(85% 85% at 0% 0%,   rgba(255, 0, 240, 0.12), transparent 60%),
    var(--bg-2);
}
.v2-service-design::after { display: none; }
.v2-service-design .v2-service-body {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding: clamp(22px, 2.4vw, 36px);
}
.v2-service-design-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.v2-service-design-text .label-line { margin-bottom: 4px; }
.v2-service-design-text h3 {
  font-family: 'Gill Sans Ultra Bold', 'GillSans-UltraBold',
               'Gill Sans Heavy', 'Gill Sans MT Heavy', 'GillSans-Heavy',
               'Gill Sans MT', 'Gill Sans', 'Inter Tight', sans-serif;
  font-weight: 900;
  font-size: clamp(1.35rem, 1.9vw, 1.9rem);
  letter-spacing: -0.005em;
  line-height: 1.1;
  text-shadow: none;
}
.v2-service-design-text p { max-width: 38ch; }
.v2-service-design-mockup {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v2-design-browser {
  width: 100%;
  max-width: 400px;
  background: rgba(33, 33, 44, 0.86);
  border: 1px solid var(--bd-strong);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.37),
    0 0 50px rgba(0, 240, 255, 0.18);
  transform: rotate(-2.5deg);
  transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out);
}
.v2-service-design:hover .v2-design-browser {
  transform: rotate(0deg) translateY(-6px);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.41),
    0 0 70px rgba(0, 240, 255, 0.32),
    0 0 80px rgba(255, 0, 240, 0.18);
}
.v2-design-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--bd-white);
}
.v2-design-chrome i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: inline-block;
}
.v2-design-chrome i:nth-child(1) { background: #ff5f57; }
.v2-design-chrome i:nth-child(2) { background: #febc2e; }
.v2-design-chrome i:nth-child(3) { background: #28c840; }
.v2-design-chrome .url {
  margin-left: 12px;
  flex: 1;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  font-size: 0.68rem;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  color: var(--fg-3);
  letter-spacing: 0.02em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.v2-design-screen {
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 220px;
}
.v2-design-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.v2-design-row .nav {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.10);
  flex: 0 0 60px;
}
.v2-design-row .nav.short { flex-basis: 36px; }
.v2-design-row .nav.cta {
  background: var(--c-cyan);
  flex-basis: 70px;
  height: 18px;
  border-radius: 4px;
  margin-left: auto;
}
.v2-design-h1 {
  height: 16px;
  width: 80%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--c-cyan), var(--c-pink));
  margin-top: 4px;
}
.v2-design-h2 {
  height: 10px;
  width: 60%;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.18);
}
.v2-design-p {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.10);
}
.v2-design-p.w-92 { width: 92%; }
.v2-design-p.w-78 { width: 78%; }
.v2-design-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.v2-design-card {
  aspect-ratio: 4/3;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--bd-white);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.v2-design-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), transparent 60%);
}
.v2-design-card:nth-child(2)::after { background: linear-gradient(135deg, rgba(255, 0, 240, 0.15), transparent 60%); }
.v2-design-card:nth-child(3)::after { background: linear-gradient(135deg, rgba(122, 66, 255, 0.18), transparent 60%); }
@media (max-width: 980px) {
  .v2-service-design .v2-service-body {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .v2-service-design-mockup { display: none; }
}
.v2-service-body {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: clamp(20px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
}
.v2-service-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.v2-service-top .label-line {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-cyan);
}
.v2-service-top .icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--bd-strong);
  background: rgba(33, 33, 44, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-cyan);
  font-size: 0.95rem;
  transition: transform 0.4s var(--ease-out), background 0.4s ease, color 0.4s ease;
}
.v2-service:hover .v2-service-top .icon {
  transform: rotate(-8deg) scale(1.08);
  background: var(--c-cyan);
  color: #0b0b0c;
}
.v2-service-bottom h3 {
  font-family: 'Gill Sans Ultra Bold', 'GillSans-UltraBold',
               'Gill Sans Heavy', 'Gill Sans MT Heavy', 'GillSans-Heavy',
               'Gill Sans MT', 'Gill Sans', 'Inter Tight', sans-serif;
  font-weight: 900;
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  letter-spacing: -0.005em;
  line-height: 1.1;
  margin: 0 0 6px;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}
.v2-service.span-12 .v2-service-bottom h3 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
.v2-service-bottom p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0 0 10px;
  max-width: 44ch;
}
.v2-service-bottom .row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.v2-service:hover { border-color: var(--bd-strong); transform: translateY(-3px); }
@media (max-width: 980px) {
  .v2-services-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .v2-service, .v2-service.span-12, .v2-service.span-8, .v2-service.span-4 {
    grid-column: span 2; aspect-ratio: 16/10;
  }
  .v2-service:has(.v2-service-img) { aspect-ratio: auto; }
}
@media (max-width: 560px) {
  .v2-services-grid { grid-template-columns: 1fr; }
  .v2-service, .v2-service.span-12, .v2-service.span-8, .v2-service.span-4 {
    grid-column: span 1; aspect-ratio: 4/3;
  }
  .v2-service:has(.v2-service-img) { aspect-ratio: auto; }
}
.v2-specialty-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 70px);
  align-items: center;
}
.v2-specialty--reverse .v2-specialty-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}
.v2-specialty--feature .v2-specialty-grid {
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
}
.v2-specialty--reverse .v2-specialty-video { order: 2; }
.v2-specialty--reverse .v2-specialty-text  { order: 1; }
.v2-specialty-video {
  position: relative;
  border: 1px solid var(--bd-strong);
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bg-3);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.37),
              0 0 50px rgba(0, 240, 255, 0.14);
  isolation: isolate;
}
.v2-specialty-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(112%) contrast(105%);
}
.v2-specialty-corner {
  position: absolute;
  width: 26px; height: 26px;
  border-color: var(--c-cyan);
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.55));
}
.v2-specialty-corner.tl { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; border-top-left-radius: var(--r-xl); }
.v2-specialty-corner.tr { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; border-top-right-radius: var(--r-xl); }
.v2-specialty-corner.bl { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; border-bottom-left-radius: var(--r-xl); }
.v2-specialty-corner.br { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; border-bottom-right-radius: var(--r-xl); }
.v2-specialty-text {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}
.v2-specialty-text h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  letter-spacing: -0.008em;
  line-height: 0.98;
  color: #fff;
  margin: 0;
}
.v2-specialty-text p {
  color: var(--fg-2);
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.55;
  max-width: 52ch;
  margin: 0;
}
.v2-specialty-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0;
}
.v2-specialty-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(0, 240, 255, 0.30);
  background: rgba(33, 33, 44, 0.55);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-2);
  white-space: nowrap;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-out);
}
.v2-specialty-chip i {
  color: var(--c-cyan);
  font-size: 0.85em;
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.45));
}
.v2-specialty-chip:hover {
  background: rgba(0, 240, 255, 0.10);
  border-color: rgba(0, 240, 255, 0.55);
  color: #fff;
  transform: translateY(-1px);
}
@media (max-width: 980px) {
  .v2-specialty-grid,
  .v2-specialty--reverse .v2-specialty-grid,
  .v2-specialty--feature .v2-specialty-grid {
    grid-template-columns: 1fr;
  }
  .v2-specialty--reverse .v2-specialty-video,
  .v2-specialty--reverse .v2-specialty-text {
    order: initial;
  }
}
.v2-meet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.v2-meet > * { min-width: 0; }
.v2-meet h2 {
  min-width: 0;
  overflow-wrap: break-word;
  min-height: 2.15em;
  margin: 0 0 8px;
}
.v2-meet-photo {
  position: relative;
  border-radius: var(--r-xl);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--bd-strong);
  max-width: 460px;
  margin-inline: auto;
}
.v2-meet-photo img {
  position: relative;
  z-index: 2;
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--ease-out);
}
.v2-meet-photo:hover img { transform: scale(1.04); }
.v2-meet-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, transparent 55%, rgba(33, 33, 44, 0.85) 100%);
  pointer-events: none;
}
.v2-meet-photo .badge {
  position: absolute;
  left: 22px; bottom: 22px;
  z-index: 4;
  padding: 8px 14px;
  background: rgba(33, 33, 44, 0.7);
  border: 1px solid var(--bd-strong);
  border-radius: 999px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-cyan);
}
.v2-meet h2 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  letter-spacing: -0.01em;
  line-height: 0.92;
  color: var(--fg);
}
.v2-meet p {
  margin-top: 22px;
  color: var(--fg-2);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 54ch;
}
.v2-meet .pullquote,
.v2-team-ceo .pullquote {
  margin: 10px 0 22px;
  padding: 18px 22px 18px 24px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--fg);
  border-left: 2px solid var(--c-cyan);
  background: rgba(0, 240, 255, 0.04);
  border-radius: 0 14px 14px 0;
}
@media (max-width: 980px) {
  /* Stacked: the heading goes above the photo, the rest below. The text
     wrapper drops out of layout so its heading can be reordered. */
  .v2-meet { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .v2-meet > div:not(.v2-meet-photo) { display: contents; }
  .v2-meet h2 { order: -2; min-height: 0; }
  .v2-meet-photo { order: -1; max-width: 520px; margin: 22px auto 28px; width: 100%; }
}
.v2-showcase-frame {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--bd-strong);
  border-radius: var(--r-xl);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.41),
    0 0 40px rgba(0, 240, 255, 0.12);
}
.v2-showcase-frame .ratio-16x9 {
  position: relative;
  padding-top: 56.25%;
  border-radius: calc(var(--r-xl) - 10px);
  overflow: hidden;
  background: var(--bg-3);
}
.v2-showcase-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.v2-showcase-corner {
  position: absolute;
  width: 24px; height: 24px;
  border-color: var(--c-cyan);
  pointer-events: none;
}
.v2-showcase-corner.tl { top: -1px; left: -1px;   border-top: 2px solid; border-left: 2px solid;   border-top-left-radius: var(--r-xl); }
.v2-showcase-corner.tr { top: -1px; right: -1px;  border-top: 2px solid; border-right: 2px solid;  border-top-right-radius: var(--r-xl); }
.v2-showcase-corner.bl { bottom: -1px; left: -1px;   border-bottom: 2px solid; border-left: 2px solid;   border-bottom-left-radius: var(--r-xl); }
.v2-showcase-corner.br { bottom: -1px; right: -1px;  border-bottom: 2px solid; border-right: 2px solid;  border-bottom-right-radius: var(--r-xl); }
#showcase { isolation: isolate; }
#showcase > .v2-container { position: relative; z-index: 2; }
/* Breathing room under the client logo band, which sits right above. */
#showcase { padding-top: clamp(80px, 9vw, 136px); }
/* Fireflies move by transform only (cqw/cqh are this field's own size), and
   each glow is a pre-softened gradient instead of blur + giant box-shadows:
   the browser rasterizes each orb once and the GPU just slides it around,
   rather than re-laying-out and re-blurring every frame. */
.v2-firefly-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  container-type: size;
  /* Fade out at the top and bottom, so a glow drifting past the section's
     edge dissolves instead of being cut off in a straight line. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 180px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 180px), transparent 100%);
}
.v2-firefly-field .firefly {
  border-radius: 50%;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform, opacity;
}
.v2-firefly-field .firefly-1 { width: 185px; height: 185px; margin: -92px 0 0 -92px; background: radial-gradient(circle, #00f0ff 0%, #00f0ffcc 14%, #00f0ff55 32%, transparent 70%); animation: firefly1 120s ease-in-out infinite; }
.v2-firefly-field .firefly-2 { width: 360px; height: 360px; margin: -180px 0 0 -180px; background: radial-gradient(circle, #ff6b00 0%, #ff6b00cc 17%, #ff6b0055 35%, transparent 70%); animation: firefly2 150s ease-in-out infinite; }
.v2-firefly-field .firefly-3 { width: 88px; height: 88px; margin: -44px 0 0 -44px; background: radial-gradient(circle, #ff00f0 0%, #ff00f0cc 9%, #ff00f055 27%, transparent 70%); animation: firefly3 180s ease-in-out infinite; }
.v2-firefly-field .firefly-4 { width: 275px; height: 275px; margin: -137px 0 0 -137px; background: radial-gradient(circle, #57ff00 0%, #57ff00cc 13%, #57ff0055 31%, transparent 70%); animation: firefly4 135s ease-in-out infinite; }
.v2-firefly-field .firefly-5 { width: 135px; height: 135px; margin: -67px 0 0 -67px; background: radial-gradient(circle, #ff0080 0%, #ff0080cc 11%, #ff008055 29%, transparent 70%); animation: firefly5 165s ease-in-out infinite; }
.v2-firefly-field .firefly-6 { width: 325px; height: 325px; margin: -162px 0 0 -162px; background: radial-gradient(circle, #8000ff 0%, #8000ffcc 14%, #8000ff55 32%, transparent 70%); animation: firefly6 125s ease-in-out infinite; }
.v2-firefly-field .firefly-7 { width: 480px; height: 480px; margin: -240px 0 0 -240px; background: radial-gradient(circle, #ffff00 0%, #ffff00cc 17%, #ffff0055 35%, transparent 70%); animation: firefly7 200s ease-in-out infinite; }
.v2-firefly-field .firefly-8 { width: 112px; height: 112px; margin: -56px 0 0 -56px; background: radial-gradient(circle, #00ffff 0%, #00ffffcc 11%, #00ffff55 29%, transparent 70%); animation: firefly8 110s ease-in-out infinite; }
.v2-firefly-field .firefly-9 { width: 228px; height: 228px; margin: -114px 0 0 -114px; background: radial-gradient(circle, #ff4000 0%, #ff4000cc 12%, #ff400055 30%, transparent 70%); animation: firefly9 145s ease-in-out infinite; }
.v2-firefly-field .firefly-10 { width: 375px; height: 375px; margin: -187px 0 0 -187px; background: radial-gradient(circle, #0080ff 0%, #0080ffcc 15%, #0080ff55 33%, transparent 70%); animation: firefly10 175s ease-in-out infinite; }
.v2-firefly-field .firefly-11 { width: 158px; height: 158px; margin: -79px 0 0 -79px; background: radial-gradient(circle, #ff8000 0%, #ff8000cc 11%, #ff800055 29%, transparent 70%); animation: firefly11 140s ease-in-out infinite; }
.v2-firefly-field .firefly-12 { width: 430px; height: 430px; margin: -215px 0 0 -215px; background: radial-gradient(circle, #40ff00 0%, #40ff00cc 16%, #40ff0055 34%, transparent 70%); animation: firefly12 190s ease-in-out infinite; }
.v2-firefly-field .firefly-13 { width: 100px; height: 100px; margin: -50px 0 0 -50px; background: radial-gradient(circle, #ff0040 0%, #ff0040cc 10%, #ff004055 28%, transparent 70%); animation: firefly13 115s ease-in-out infinite; }
.v2-firefly-field .firefly-14 { width: 300px; height: 300px; margin: -150px 0 0 -150px; background: radial-gradient(circle, #4000ff 0%, #4000ffcc 13%, #4000ff55 31%, transparent 70%); animation: firefly14 160s ease-in-out infinite; }
.v2-firefly-field .firefly-15 { width: 192px; height: 192px; margin: -96px 0 0 -96px; background: radial-gradient(circle, #ff0020 0%, #ff0020cc 11%, #ff002055 29%, transparent 70%); animation: firefly15 155s ease-in-out infinite; }
@keyframes firefly1 { 0%{opacity:0;transform:translate(calc(3cqw + -20px),calc(95cqh + 10px));} 10%{opacity:0.3;transform:translate(calc(8cqw + -15px),calc(88cqh + 5px));} 25%{opacity:0.7;transform:translate(calc(25cqw + -5px),calc(65cqh + -10px));} 40%{opacity:1;transform:translate(calc(48cqw + 10px),calc(45cqh + -15px));} 55%{opacity:0.9;transform:translate(calc(72cqw + 20px),calc(30cqh + -20px));} 70%{opacity:0.8;transform:translate(calc(88cqw + 25px),calc(20cqh + -25px));} 85%{opacity:0.4;transform:translate(calc(95cqw + 30px),calc(15cqh + -30px));} 100%{opacity:0;transform:translate(calc(97cqw + 35px),calc(12cqh + -35px));} }
@keyframes firefly2 { 0%{opacity:0;transform:translate(calc(95cqw + 15px),calc(5cqh + -5px));} 12%{opacity:0.4;transform:translate(calc(88cqw + 10px),calc(12cqh + 0px));} 28%{opacity:0.8;transform:translate(calc(65cqw + -5px),calc(35cqh + 15px));} 45%{opacity:1;transform:translate(calc(45cqw + -15px),calc(55cqh + 25px));} 62%{opacity:0.9;transform:translate(calc(28cqw + -25px),calc(72cqh + 35px));} 78%{opacity:0.6;transform:translate(calc(15cqw + -35px),calc(85cqh + 40px));} 92%{opacity:0.3;transform:translate(calc(8cqw + -40px),calc(92cqh + 45px));} 100%{opacity:0;transform:translate(calc(3cqw + -45px),calc(95cqh + 50px));} }
@keyframes firefly3 { 0%{opacity:0;transform:translate(calc(15cqw + -10px),calc(85cqh + 5px));} 15%{opacity:0.5;transform:translate(calc(25cqw + -5px),calc(75cqh + 0px));} 30%{opacity:0.9;transform:translate(calc(40cqw + 5px),calc(60cqh + -10px));} 50%{opacity:1;transform:translate(calc(60cqw + 15px),calc(40cqh + -20px));} 65%{opacity:0.8;transform:translate(calc(75cqw + 25px),calc(25cqh + -30px));} 80%{opacity:0.5;transform:translate(calc(85cqw + 30px),calc(15cqh + -35px));} 95%{opacity:0.2;transform:translate(calc(92cqw + 35px),calc(8cqh + -40px));} 100%{opacity:0;transform:translate(calc(95cqw + 40px),calc(5cqh + -45px));} }
@keyframes firefly4 { 0%{opacity:0;transform:translate(calc(99cqw + 70px),calc(45cqh + -30px));} 30%{opacity:0.8;transform:translate(calc(2cqw + -80px),calc(78cqh + 70px));} 50%{opacity:1;transform:translate(calc(96cqw + 90px),calc(12cqh + -90px));} 70%{opacity:0.6;transform:translate(calc(1cqw + -50px),calc(95cqh + 30px));} 90%{opacity:0.3;transform:translate(calc(98cqw + 60px),calc(28cqh + -60px));} 100%{opacity:0;transform:translate(calc(3cqw + -100px),calc(88cqh + 80px));} }
@keyframes firefly5 { 0%{opacity:0;transform:translate(calc(97cqw + 90px),calc(18cqh + -50px));} 20%{opacity:0.9;transform:translate(calc(0cqw + -70px),calc(85cqh + 90px));} 40%{opacity:1;transform:translate(calc(94cqw + 50px),calc(5cqh + -70px));} 60%{opacity:0.7;transform:translate(calc(4cqw + -90px),calc(92cqh + 40px));} 80%{opacity:0.5;transform:translate(calc(99cqw + 80px),calc(32cqh + -40px));} 100%{opacity:0;transform:translate(calc(1cqw + -60px),calc(72cqh + 100px));} }
@keyframes firefly6 { 0%{opacity:0;transform:translate(calc(2cqw + -80px),calc(62cqh + 50px));} 25%{opacity:0.6;transform:translate(calc(96cqw + 70px),calc(25cqh + -80px));} 45%{opacity:1;transform:translate(calc(3cqw + -50px),calc(88cqh + 60px));} 65%{opacity:0.8;transform:translate(calc(98cqw + 90px),calc(15cqh + -90px));} 85%{opacity:0.4;transform:translate(calc(0cqw + -100px),calc(75cqh + 70px));} 100%{opacity:0;transform:translate(calc(95cqw + 60px),calc(42cqh + -50px));} }
@keyframes firefly7 { 0%{opacity:0;transform:translate(calc(93cqw + 80px),calc(8cqh + -100px));} 18%{opacity:0.8;transform:translate(calc(1cqw + -90px),calc(95cqh + 50px));} 38%{opacity:1;transform:translate(calc(99cqw + 70px),calc(35cqh + -60px));} 58%{opacity:0.9;transform:translate(calc(2cqw + -80px),calc(68cqh + 80px));} 78%{opacity:0.6;transform:translate(calc(97cqw + 50px),calc(12cqh + -70px));} 100%{opacity:0;transform:translate(calc(4cqw + -70px),calc(82cqh + 90px));} }
@keyframes firefly8 { 0%{opacity:0;transform:translate(calc(98cqw + 90px),calc(52cqh + -30px));} 22%{opacity:0.7;transform:translate(calc(1cqw + -100px),calc(18cqh + 70px));} 42%{opacity:1;transform:translate(calc(96cqw + 60px),calc(85cqh + -80px));} 62%{opacity:0.8;transform:translate(calc(3cqw + -70px),calc(28cqh + 60px));} 82%{opacity:0.5;transform:translate(calc(99cqw + 80px),calc(92cqh + -40px));} 100%{opacity:0;transform:translate(calc(0cqw + -50px),calc(5cqh + 100px));} }
@keyframes firefly9 { 0%{opacity:0;transform:translate(calc(97cqw + 70px),calc(78cqh + 60px));} 28%{opacity:0.9;transform:translate(calc(2cqw + -90px),calc(38cqh + -50px));} 48%{opacity:1;transform:translate(calc(95cqw + 50px),calc(15cqh + -90px));} 68%{opacity:0.7;transform:translate(calc(1cqw + -80px),calc(88cqh + 80px));} 88%{opacity:0.4;transform:translate(calc(98cqw + 90px),calc(48cqh + -70px));} 100%{opacity:0;transform:translate(calc(4cqw + -60px),calc(25cqh + 70px));} }
@keyframes firefly10 { 0%{opacity:0;transform:translate(calc(1cqw + -70px),calc(32cqh + 40px));} 32%{opacity:0.8;transform:translate(calc(99cqw + 80px),calc(72cqh + -80px));} 52%{opacity:1;transform:translate(calc(3cqw + -90px),calc(22cqh + 90px));} 72%{opacity:0.6;transform:translate(calc(94cqw + 60px),calc(95cqh + -50px));} 92%{opacity:0.3;transform:translate(calc(2cqw + -100px),calc(55cqh + 30px));} 100%{opacity:0;transform:translate(calc(97cqw + 70px),calc(8cqh + -100px));} }
@keyframes firefly11 { 0%{opacity:0;transform:translate(calc(96cqw + 90px),calc(65cqh + 70px));} 24%{opacity:0.7;transform:translate(calc(0cqw + -80px),calc(12cqh + -60px));} 44%{opacity:1;transform:translate(calc(98cqw + 50px),calc(85cqh + 40px));} 64%{opacity:0.8;transform:translate(calc(1cqw + -70px),calc(42cqh + -80px));} 84%{opacity:0.5;transform:translate(calc(95cqw + 80px),calc(5cqh + 90px));} 100%{opacity:0;transform:translate(calc(3cqw + -90px),calc(75cqh + -50px));} }
@keyframes firefly12 { 0%{opacity:0;transform:translate(calc(4cqw + -60px),calc(88cqh + -90px));} 26%{opacity:0.9;transform:translate(calc(97cqw + 100px),calc(28cqh + 80px));} 46%{opacity:1;transform:translate(calc(0cqw + -50px),calc(92cqh + -40px));} 66%{opacity:0.7;transform:translate(calc(99cqw + 70px),calc(58cqh + 60px));} 86%{opacity:0.4;transform:translate(calc(2cqw + -90px),calc(18cqh + -70px));} 100%{opacity:0;transform:translate(calc(96cqw + 80px),calc(82cqh + 100px));} }
@keyframes firefly13 { 0%{opacity:0;transform:translate(calc(99cqw + 60px),calc(48cqh + -100px));} 20%{opacity:0.8;transform:translate(calc(1cqw + -100px),calc(8cqh + 50px));} 40%{opacity:1;transform:translate(calc(97cqw + 90px),calc(78cqh + -30px));} 60%{opacity:0.9;transform:translate(calc(3cqw + -70px),calc(35cqh + 70px));} 80%{opacity:0.6;transform:translate(calc(94cqw + 50px),calc(95cqh + -90px));} 100%{opacity:0;transform:translate(calc(0cqw + -80px),calc(22cqh + 80px));} }
@keyframes firefly14 { 0%{opacity:0;transform:translate(calc(95cqw + 80px),calc(15cqh + 60px));} 30%{opacity:0.7;transform:translate(calc(2cqw + -90px),calc(68cqh + -80px));} 50%{opacity:1;transform:translate(calc(98cqw + 70px),calc(25cqh + 40px));} 70%{opacity:0.8;transform:translate(calc(1cqw + -60px),calc(88cqh + -60px));} 90%{opacity:0.5;transform:translate(calc(96cqw + 100px),calc(52cqh + 70px));} 100%{opacity:0;transform:translate(calc(4cqw + -80px),calc(5cqh + -90px));} }
@keyframes firefly15 { 0%{opacity:0;transform:translate(calc(98cqw + 50px),calc(82cqh + 90px));} 35%{opacity:0.9;transform:translate(calc(0cqw + -100px),calc(38cqh + -70px));} 55%{opacity:1;transform:translate(calc(93cqw + 90px),calc(12cqh + 50px));} 75%{opacity:0.6;transform:translate(calc(3cqw + -70px),calc(92cqh + -40px));} 95%{opacity:0.3;transform:translate(calc(99cqw + 80px),calc(58cqh + 80px));} 100%{opacity:0;transform:translate(calc(1cqw + -90px),calc(28cqh + -100px));} }
.v2 .logo-hero-text {
  font-size: clamp(2.3rem, 8.8vw, 4.5rem);
  line-height: 1.08;
}
.v2 .logo-hero-text .logo-hero-emphasis {
  display: inline-block;
  font-family: 'Gill Sans Ultra Bold', 'GillSans-UltraBold',
               'Gill Sans Heavy', 'Gill Sans MT Heavy', 'GillSans-Heavy',
               'Gill Sans MT', 'Gill Sans', 'Inter Tight', sans-serif;
  font-weight: 900;
  font-size: 1.25em;
  line-height: 1;
}
.v2-trusted {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--bd-white);
  border: 1px solid var(--bd-white);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (max-width: 980px) { .v2-trusted { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .v2-trusted { grid-template-columns: repeat(2, 1fr); } }
.v2-trusted-cell {
  background: var(--bg);
  padding: 32px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  transition: background 0.4s ease;
}
.v2-trusted-cell:hover { background: var(--bg-2); }
.v2-trusted-cell img {
  max-width: 110px;
  max-height: 56px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s var(--ease-out);
}
.v2-trusted-cell:hover img {
  opacity: 1;
  filter: none;
  transform: scale(1.05);
}
.v2-cta {
  position: relative;
  padding: clamp(64px, 8vw, 112px) 0;
  text-align: center;
  overflow: hidden;
}
.v2-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60vw 50vh at 50% 50%, rgba(0, 240, 255, 0.12), transparent 60%),
    radial-gradient(60vw 50vh at 50% 60%, rgba(255, 0, 240, 0.10), transparent 60%);
  pointer-events: none;
}
.v2-cta-inner { position: relative; z-index: 2; }
.v2-cta h2 {
  font-size: clamp(2.8rem, 8vw, 6.58rem);
  letter-spacing: -0.012em;
  line-height: 0.9;
  font-weight: 700;
  color: #fff;
  max-width: 18ch;
  margin: 0 auto;
}
.v2-cta p {
  margin: 30px auto 0;
  max-width: 600px;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--fg-3);
}
.v2-cta .row-cta { margin-top: 44px; display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.v2-footer {
  position: relative;
  padding: 80px 0 32px;
  border-top: 1px solid var(--bd-white);
  background: var(--bg);
}
.v2-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  align-items: flex-start;
}
.v2-footer-col-title {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-cyan);
  margin: 0 0 18px;
}
.v2-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.v2-footer ul a { color: var(--fg-2); transition: color 0.25s ease, font-weight 0.25s ease; font-size: 0.95rem; }
.v2-footer ul a:hover { color: var(--c-cyan); font-weight: 700; }
.v2-footer-brand img { width: 200px; max-width: 100%; }
.v2-footer-brand p { color: var(--fg-3); margin: 16px 0 0; max-width: 32ch; }
.v2-footer-social { display: flex; gap: 10px; margin-top: 22px; }
.v2-footer-social a {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--bd-white);
  color: var(--fg-2);
  transition: all 0.3s ease;
}
.v2-footer-social a:hover {
  color: #0b0b0c;
  background: var(--c-cyan);
  border-color: var(--c-cyan);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 240, 255, 0.5);
}
.v2-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid var(--bd-white);
  font-size: 0.85rem;
  color: var(--fg-3);
}
.v2-footer-bottom a { color: var(--fg-3); }
.v2-footer-bottom a:hover { color: var(--c-cyan); }
@media (max-width: 900px) {
  .v2-footer-grid { grid-template-columns: 1fr 1fr; }
  .v2-footer-brand { grid-column: span 2; }
}
@media (max-width: 560px) {
  .v2-footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .v2-footer-brand { grid-column: span 1; text-align: center; }
  .v2-footer-brand p { margin-left: auto; margin-right: auto; }
  .v2-footer-social { justify-content: center; }
}
.v2-contact-card {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px);
  background: rgba(33, 33, 44, 0.96);
  color: #fff;
  border: 1px solid var(--bd-strong);
  border-radius: var(--r-xl);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.54),
              0 0 50px rgba(0, 240, 255, 0.15);
}
.v2-contact-card h2 {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.6rem;
}
.v2-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .v2-form-row { grid-template-columns: 1fr; } }
.v2-form-field { margin-bottom: 18px; }
.v2-form-field label { display: block; font-size: 0.85rem; color: var(--fg-3); margin-bottom: 6px; }
.v2-form-field .req { color: var(--c-pink-soft); }
.v2-form-field .v2-form-hint { color: var(--fg-4); }
.v2-form-field input[type="text"],
.v2-form-field input[type="email"],
.v2-form-field input[type="tel"],
.v2-form-field select,
.v2-form-field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--bd-white);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
}
.v2-form-field textarea { resize: vertical; min-height: 110px; }
.v2-form-field select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-opacity='.6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  cursor: pointer;
}
.v2-form-field select:invalid { color: var(--fg-4); }
.v2-form-field select option { background: #1b1b1f; color: #fff; }
.v2-form-field input::placeholder,
.v2-form-field textarea::placeholder { color: var(--fg-4); }
.v2-form-field input:focus,
.v2-form-field select:focus,
.v2-form-field textarea:focus {
  outline: none;
  border-color: var(--c-cyan);
  box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.16);
}
.v2-form-field input.is-invalid,
.v2-form-field select.is-invalid,
.v2-form-field textarea.is-invalid { border-color: var(--c-pink-soft); }
.v2-form-error { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--c-pink-soft); }
.v2-form-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
@media (max-width: 560px) { .v2-form-checks { grid-template-columns: 1fr; } }
.v2-form-check { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; color: var(--fg-2); font-weight: 400; }
.v2-form-check input { accent-color: var(--c-cyan); width: 16px; height: 16px; flex: 0 0 auto; }
.v2-form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.v2-form-footer { display: flex; justify-content: center; margin-top: 28px; }
.v2-form-footer .btn-v2 { min-width: 220px; }
@media (max-width: 560px) { .v2-form-footer .btn-v2 { width: 100%; } }
.v2-form-response { margin-top: 16px; padding: 14px 18px; border-radius: var(--r-sm); font-size: 0.92rem; text-align: center; }
.v2-form-response.is-success { background: rgba(0, 240, 160, 0.14); color: #b6ffe6; border: 1px solid rgba(0, 240, 160, 0.3); }
.v2-form-response.is-error { background: rgba(255, 0, 90, 0.12); color: var(--c-pink-soft); border: 1px solid rgba(255, 0, 90, 0.25); }
.v2-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 280px;
  gap: 18px;
}
.v2-bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  border-radius: var(--r);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: transform 0.5s var(--ease-out),
              box-shadow 0.5s var(--ease-out),
              filter 0.5s var(--ease-out);
}
.v2-bento-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.26) 100%);
  pointer-events: none;
  z-index: 1;
}
.v2-bento-card > * { position: relative; z-index: 2; }
.v2-bento-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 255, 255, 0.22), transparent 50%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.v2-bento-card:hover::before { opacity: 1; }
.v2-bento-card:hover { transform: translateY(-6px); filter: brightness(1.06); }
.v2-bento-card.tile-purple-pink   { background: linear-gradient(135deg, #7a42ff 0%, #ff00f0 100%); box-shadow: 0 18px 50px rgba(122, 66, 255, 0.45); }
.v2-bento-card.tile-pink-red      { background: linear-gradient(135deg, #ff0040 0%, #ff8a0e 100%); box-shadow: 0 18px 50px rgba(255, 0, 64, 0.4); }
.v2-bento-card.tile-cyan-blue     { background: linear-gradient(135deg, #00f0ff 0%, #0080ff 100%); box-shadow: 0 18px 50px rgba(0, 128, 255, 0.4); }
.v2-bento-card.tile-orange-yellow { background: linear-gradient(135deg, #ff8a0e 0%, #f1fe00 100%); box-shadow: 0 18px 50px rgba(255, 138, 14, 0.45); }
.v2-bento-card.tile-green-cyan    { background: linear-gradient(135deg, #57ff00 0%, #00f0ff 100%); box-shadow: 0 18px 50px rgba(87, 255, 0, 0.35); }
.v2-bento-card.tile-pink-purple   { background: linear-gradient(135deg, #ff00f0 0%, #7a42ff 100%); box-shadow: 0 18px 50px rgba(255, 0, 240, 0.45); }
.v2-bento-card.tile-cyan-pink     { background: linear-gradient(135deg, #00f0ff 0%, #ff00f0 100%); box-shadow: 0 18px 50px rgba(0, 240, 255, 0.4); }
.v2-bento-card.tile-orange-pink   { background: linear-gradient(135deg, #ff8a0e 0%, #ff00f0 100%); box-shadow: 0 18px 50px rgba(255, 138, 14, 0.4); }
.v2-bento-card:hover.tile-purple-pink   { box-shadow: 0 22px 70px rgba(122, 66, 255, 0.7), 0 22px 70px rgba(255, 0, 240, 0.55); }
.v2-bento-card:hover.tile-pink-red      { box-shadow: 0 22px 70px rgba(255, 0, 64, 0.65), 0 22px 70px rgba(255, 138, 14, 0.45); }
.v2-bento-card:hover.tile-cyan-blue     { box-shadow: 0 22px 70px rgba(0, 240, 255, 0.65), 0 22px 70px rgba(0, 128, 255, 0.55); }
.v2-bento-card:hover.tile-orange-yellow { box-shadow: 0 22px 70px rgba(255, 138, 14, 0.7), 0 22px 70px rgba(241, 254, 0, 0.5); }
.v2-bento-card:hover.tile-green-cyan    { box-shadow: 0 22px 70px rgba(87, 255, 0, 0.6),   0 22px 70px rgba(0, 240, 255, 0.5); }
.v2-bento-card:hover.tile-pink-purple   { box-shadow: 0 22px 70px rgba(255, 0, 240, 0.7),  0 22px 70px rgba(122, 66, 255, 0.55); }
.v2-bento-card:hover.tile-cyan-pink     { box-shadow: 0 22px 70px rgba(0, 240, 255, 0.65), 0 22px 70px rgba(255, 0, 240, 0.55); }
.v2-bento-card:hover.tile-orange-pink   { box-shadow: 0 22px 70px rgba(255, 138, 14, 0.7), 0 22px 70px rgba(255, 0, 240, 0.55); }
.v2-bento-card .icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 18px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.4s var(--ease-out), background 0.4s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.17);
}
.v2-bento-card:hover .icon { transform: translateY(-2px) rotate(-4deg); background: rgba(255, 255, 255, 0.32); }
.v2-bento-card .title {
  font-family: 'Gill Sans Ultra Bold', 'GillSans-UltraBold', 'Gill Sans Heavy',
               'Gill Sans MT Heavy', 'GillSans-Heavy', 'Gill Sans MT', 'Gill Sans',
               'Inter Tight', sans-serif;
  font-weight: 900;
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  letter-spacing: -0.005em;
  line-height: 1.05;
  margin: 0 0 8px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.v2-bento-card .desc {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.94rem;
  line-height: 1.5;
  margin: 0;
  max-width: 38ch;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
.v2-bento-card .arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  opacity: 0.95;
}
.v2-bento-card .arrow-link svg { transition: transform 0.4s var(--ease-out); }
.v2-bento-card:hover .arrow-link svg { transform: translateX(4px); }
.v2-bento-card.has-media { background: var(--bg-3); }
.v2-bento-card.has-media::before { display: none; } 
.v2-bento-card.has-media .media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.v2-bento-card.has-media .media img,
.v2-bento-card.has-media .media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(112%) brightness(0.9);
  transition: transform 1.2s var(--ease-out), filter 0.5s ease;
}
.v2-bento-card.has-media:hover .media img,
.v2-bento-card.has-media:hover .media video {
  transform: scale(1.05);
  filter: saturate(120%) brightness(1.02);
}
.v2-bento-card.has-media::after {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.15) 45%,
    rgba(0, 0, 0, 0.61) 100%);
}
.v2-bento-card.has-media .label-line {
  align-self: flex-start;
  margin-bottom: 6px;
}
.v2-bento-card.t-portrait { grid-row: span 2; }
.v2-bento-card.t-hero  { grid-column: span 2; grid-row: span 2; padding: 38px; }
.v2-bento-card.t-hero .title { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.v2-bento-card.t-hero .desc  { font-size: 1.05rem; max-width: 46ch; }
.v2-bento-card.t-hero .icon  { width: 60px; height: 60px; font-size: 1.4rem; }
.v2-bento-card.t-wide  { grid-column: span 2; }
.v2-bento-card.t-tall  { grid-row: span 2; }
@media (max-width: 1100px) {
  .v2-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 300px; }
  .v2-bento-card.t-hero { grid-column: span 2; grid-row: span 2; }
  .v2-bento-card.t-wide { grid-column: span 2; }
  .v2-bento-card.t-tall { grid-row: span 1; }
}
@media (max-width: 560px) {
  .v2-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .v2-bento-card,
  .v2-bento-card.t-hero,
  .v2-bento-card.t-wide,
  .v2-bento-card.t-tall { grid-column: span 1; grid-row: span 1; min-height: 260px; }
}
.v2-bento--flip .v2-bento-card {
  perspective: 1000px;
  transform-style: preserve-3d;
  cursor: pointer;
  transition: box-shadow 0.5s var(--ease-out);
}
.v2-bento--flip .v2-bento-card:hover { transform: none; }
.v2-bento--flip .bento-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.v2-bento--flip .v2-bento-card:hover .bento-inner,
.v2-bento--flip .v2-bento-card.is-flipped .bento-inner {
  transform: rotateY(180deg);
}
.v2-bento--flip .bento-front,
.v2-bento--flip .bento-back {
  position: absolute;
  inset: 0;
  padding: 28px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-radius: inherit;
}
.v2-bento--flip .bento-back {
  transform: rotateY(180deg);
  background: rgba(0, 0, 0, 0.19);
}
.v2-bento--flip .bento-front .icon {
  font-size: 2rem;
  margin-bottom: 16px;
}
.v2-bento--flip .bento-front .title {
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  margin: 0;
}
.v2-bento--flip .bento-back .icon { font-size: 1.2rem; margin-bottom: 10px; }
.v2-bento--flip .bento-back .title { font-size: clamp(1rem, 1.5vw, 1.3rem); margin-bottom: 10px; }
.v2-bento--flip .bento-back .desc  { font-size: 0.9rem; line-height: 1.55; opacity: 0.92; }
.v2-bento--flip .v2-bento-card.t-hero .bento-front .title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.v2-bento--flip .v2-bento-card.t-hero .bento-front .icon  { font-size: 2.6rem; }
@media (max-width: 768px) {
  .v2-bento--flip .v2-bento-card:hover .bento-inner { transform: none; }
  .v2-bento--flip .v2-bento-card.is-flipped .bento-inner { transform: rotateY(180deg); }
}
.v2-svc-hero {
  position: relative;
  /* Always the whole first screen, however tall the window. */
  min-height: max(620px, 100vh);
  min-height: max(620px, 100svh);
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  padding: 180px 0 100px;
}
/* The hero image fades out at the bottom into the page's own background, so
   the hero has no edge (the page behind it isn't a flat color). */
.v2-svc-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #060214;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}
.v2-svc-hero-bg img,
.v2-svc-hero-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(118%) brightness(1.02);
}
.v2-svc-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60vw 60vh at 18% 30%, rgba(0, 240, 255, 0.20), transparent 55%),
    radial-gradient(60vw 60vh at 82% 70%, rgba(255, 0, 240, 0.22), transparent 55%),
    linear-gradient(180deg, rgba(33, 33, 44, 0.08) 0%, rgba(33, 33, 44, 0.32) 70%, rgba(33, 33, 44, 0.6) 100%);
  pointer-events: none;
}
/* Busier hero photos: an extra dark layer behind the text so the subheading
   reads, heaviest on the left/centre where the copy sits. */
.v2-svc-hero--dim .v2-svc-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 45% 55%, rgba(10, 8, 20, 0.55), rgba(10, 8, 20, 0.30) 70%, rgba(10, 8, 20, 0.22));
}
.v2-svc-hero-content {
  position: relative;
  z-index: 2;
  max-width: 920px;
}
.v2-svc-hero h1 {
  font-size: clamp(2.6rem, 7.5vw, 5.8rem);
  letter-spacing: -0.01em;
  line-height: 0.95;
  font-weight: 800;
  color: #fff;
  margin: 18px 0 0;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
}
.v2-svc-hero h1 .grad-text {
  text-shadow: none;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6));
}
.v2-svc-hero-sub {
  margin-top: 28px;
  max-width: 780px;
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.55;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  text-wrap: balance;
}
.v2-hero-textblur-panel {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  filter: blur(1.5px);
}
.v2-svc-hero-cta-row {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.v2-svc-hero-cta-row .btn-v2-primary,
.v2-svc-hero-cta-row a.btn-v2-primary:link,
.v2-svc-hero-cta-row a.btn-v2-primary:visited,
.v2-svc-hero-cta-row .btn-v2-primary:focus,
.v2-svc-hero-cta-row .btn-v2-primary:active {
  background: rgba(0, 240, 255, 0.72);
  border-color: transparent;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
              0 12px 28px rgba(0, 0, 0, 0.45);
}
.v2-svc-hero-cta-row .btn-v2-primary:hover {
  background: rgba(102, 247, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
              0 12px 28px rgba(0, 0, 0, 0.45);
}
.v2-svc-hero-cta-row .btn-v2-ghost {
  background: rgba(255, 255, 255, 0.12);
  border-color: transparent;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
              0 12px 28px rgba(0, 0, 0, 0.45);
}
.v2-svc-hero-cta-row .btn-v2-ghost:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
              0 12px 28px rgba(0, 0, 0, 0.45);
}
.v2-svc-philosophy {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.v2-svc-philosophy h2 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  letter-spacing: -0.008em;
  line-height: 0.98;
  color: #fff;
  margin: 0;
}
.v2-svc-philosophy p {
  margin-top: 22px;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 54ch;
}
.v2-svc-philosophy-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--bd-strong);
  background: var(--bg-2);
  isolation: isolate;
}
.v2-svc-philosophy-visual img,
.v2-svc-philosophy-visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v2-svc-philosophy-visual.icon-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(60% 70% at 50% 50%, rgba(0, 240, 255, 0.18), transparent 65%),
    var(--bg-2);
}
.v2-svc-philosophy-visual.icon-frame i {
  font-size: clamp(4rem, 9vw, 8rem);
  color: var(--c-cyan);
  filter: drop-shadow(0 0 22px rgba(0, 240, 255, 0.55))
          drop-shadow(0 0 44px rgba(255, 0, 240, 0.35));
}
@media (max-width: 980px) {
  .v2-svc-philosophy { grid-template-columns: 1fr; }
}
.v2-svc-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.v2-svc-pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px;
  background: var(--bg-2);
  border: 1px solid var(--bd-white);
  border-radius: var(--r-lg);
  isolation: isolate;
  transition: transform 0.4s var(--ease-out), border-color 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
}
.v2-svc-pillar:hover {
  transform: translateY(-3px);
  border-color: var(--bd-strong);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.31), 0 0 28px rgba(0, 240, 255, 0.10);
}
.v2-svc-pillar .icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.18), rgba(255, 0, 240, 0.18));
  border: 1px solid var(--bd-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-cyan);
  font-size: 1.05rem;
  filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.45));
}
.v2-svc-pillar h3 {
  font-family: 'Gill Sans Ultra Bold', 'GillSans-UltraBold', 'Gill Sans Heavy',
               'Gill Sans MT Heavy', 'GillSans-Heavy', 'Gill Sans MT', 'Gill Sans',
               'Inter Tight', sans-serif;
  font-weight: 900;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  letter-spacing: -0.005em;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}
.v2-svc-pillar p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--fg-2);
}
@media (max-width: 980px) { .v2-svc-pillars { grid-template-columns: 1fr; } }
.v2-svc-portfolio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.v2-svc-portfolio.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v2-svc-portfolio-item {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--bd-white);
  background: var(--bg-2);
  isolation: isolate;
  transition: border-color 0.4s ease, transform 0.5s var(--ease-out);
}
.v2-svc-portfolio-item:hover {
  border-color: var(--bd-strong);
  transform: translateY(-3px);
}
.v2-svc-portfolio-item img,
.v2-svc-portfolio-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v2-svc-portfolio.cols-1 .v2-svc-portfolio-item { aspect-ratio: 16/9; }
.v2-svc-portfolio.aspect-billboard .v2-svc-portfolio-item { aspect-ratio: 16/7; }
@media (max-width: 980px) {
  .v2-svc-portfolio,
  .v2-svc-portfolio.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .v2-svc-portfolio,
  .v2-svc-portfolio.cols-2 { grid-template-columns: 1fr; }
}
.v2-svc-story {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}
.v2-svc-story-logo {
  display: inline-block;
  width: 110px;
  height: 110px;
}
.v2-svc-story-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(0, 240, 255, 0.35))
          drop-shadow(0 0 30px rgba(255, 0, 240, 0.22));
}
.v2-svc-story h2 {
  margin: 28px 0 18px;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  letter-spacing: -0.008em;
  line-height: 0.98;
  color: #fff;
}
.v2-svc-story p {
  margin: 0 auto;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 64ch;
}
.v2-svc-quote-attr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--fg-3);
}
.v2-svc-quote-logo {
  flex: 0 0 auto;
  height: 34px;
  width: auto;
}
@media (max-width: 480px) {
  .v2-svc-quote-attr { flex-direction: column; gap: 8px; }
}
.v2-svc-story blockquote {
  margin: 28px auto;
  max-width: 56ch;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.6;
  font-style: italic;
  color: var(--fg-2);
}
.v2-svc-story blockquote a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
.v2-svc-story blockquote a:hover,
.v2-svc-story blockquote a:focus-visible {
  color: #fff;
  text-decoration-color: currentColor;
}
.v2-svc-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.v2-svc-feature--media-lg { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
.v2-svc-feature-text {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.v2-svc-feature-text h2 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.8rem);
  letter-spacing: -0.01em;
  line-height: 0.98;
  color: #fff;
}
.v2-svc-feature-text h2 .grad-text { font-size: 1em; }
.v2-svc-feature-text p {
  margin: 0;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 52ch;
}
.v2-svc-feature-mockup {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}
/* Client pills that wrap split into even lines; v2.js then shrinks the pill
   to its widest line (a wrapped box otherwise keeps its full available width). */
.v2-gallery.v2-gallery--overlay-captions figcaption,
.v2-gallery-split figcaption,
.v2-svc-feature-media .v2-media-pill { text-wrap: balance; }
/* Client pill on a feature video (same look as the gallery pills). */
.v2-svc-feature-media .v2-media-pill { z-index: 2; }
.v2-svc-feature-media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--bd-strong);
  background: var(--bg-2);
  isolation: isolate;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.37), 0 0 50px rgba(0, 240, 255, 0.10);
}
.v2-svc-feature-media.is-3-2 { aspect-ratio: 3 / 2; }
.v2-svc-feature-media.is-16-9 { aspect-ratio: 16 / 9; }
.v2-svc-feature-media.is-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  box-shadow: none;
  padding: 40px;
}
.v2-svc-feature-media.is-badge img {
  width: auto;
  height: auto;
  max-width: 60%;
  object-fit: contain;
  border-radius: var(--r);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.v2-svc-feature-media.is-badge:hover img { transform: scale(1.04); }
.v2-svc-feature-media.is-badge i {
  font-size: clamp(11rem, 26vw, 19rem);
  color: var(--c-cyan);
  text-shadow: 0 0 70px rgba(0, 240, 255, 0.4);
  transition: transform 1.2s var(--ease-out);
}
.v2-svc-feature-media.is-badge:hover i { transform: scale(1.04); }
.v2-svc-feature-media img,
.v2-svc-feature-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease-out);
}
.v2-svc-feature-media:hover img,
.v2-svc-feature-media:hover video { transform: scale(1.03); }.v2-svc-feature-mockup .v2-design-browser {
  transform: rotate(-2deg);
  transition: transform 0.6s var(--ease-out);
}
.v2-svc-feature-mockup:hover .v2-design-browser {
  transform: rotate(0deg) translateY(-4px);
}
@media (max-width: 980px) {
  .v2-svc-feature { grid-template-columns: 1fr; }
}
.v2-svc-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  counter-reset: rlm-step;
}
.v2-svc-process-step {
  position: relative;
  padding: 28px;
  background: var(--bg-2);
  border: 1px solid var(--bd-white);
  border-radius: var(--r-lg);
  transition: transform 0.4s var(--ease-out), border-color 0.4s ease, box-shadow 0.4s ease;
}
.v2-svc-process-step:hover {
  transform: translateY(-3px);
  border-color: var(--bd-strong);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.27), 0 0 28px rgba(0, 240, 255, 0.10);
}
.v2-svc-process-step .num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 14px;
}
.v2-svc-process-step h3 {
  font-family: 'Gill Sans Ultra Bold', 'GillSans-UltraBold', 'Gill Sans Heavy',
               'Gill Sans MT Heavy', 'GillSans-Heavy', 'Gill Sans MT', 'Gill Sans',
               'Inter Tight', sans-serif;
  font-weight: 900;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  letter-spacing: -0.005em;
  line-height: 1.1;
  margin: 0 0 10px;
  color: #fff;
}
.v2-svc-process-step p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--fg-2);
}
.v2-svc-process[data-cols="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .v2-svc-process,
  .v2-svc-process[data-cols="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  .v2-svc-process,
  .v2-svc-process[data-cols="5"] { grid-template-columns: 1fr !important; }
}
.v2-prompter {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  padding: 24px 0 140px;
  --acc: #00f0ff;
  --acc2: #ff00f0;
}
.v2-prompter.acc-cyan    { --acc: #00f0ff; --acc2: #0080ff; }
.v2-prompter.acc-magenta { --acc: #ff00f0; --acc2: #7a42ff; }
.v2-prompter.acc-orange  { --acc: #ff8a0e; --acc2: #ffd400; }
.v2-prompter.acc-violet  { --acc: #7a42ff; --acc2: #ff00f0; }
.v2-prompter.acc-green   { --acc: #3dffa0; --acc2: #00f0ff; }
.v2-prompter.acc-red     { --acc: #ff0040; --acc2: #ff8a0e; }
.v2-prompter-rig-svg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  transition: filter 0.4s var(--ease-in-out);
}
.v2-prompter-rig-svg .rig-stop-a { stop-color: var(--acc); }
.v2-prompter-rig-svg .rig-stop-b { stop-color: var(--acc2); }
.v2-prompter-screen {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: #060608;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-xl);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.v2-prompter-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom,
              rgba(255, 255, 255, 0.025) 0px,
              rgba(255, 255, 255, 0.025) 1px,
              transparent 1px,
              transparent 3px);
  pointer-events: none;
  z-index: 2;
}
.v2-prompter-glare {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(115deg,
              transparent 32%,
              rgba(255, 255, 255, 0.04) 45%,
              rgba(255, 255, 255, 0.08) 50%,
              rgba(255, 255, 255, 0.04) 55%,
              transparent 68%);
  pointer-events: none;
}
.v2-prompter-rec {
  position: absolute;
  top: 22px; left: 32px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.v2-prompter-rec .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ff0040;
  box-shadow: 0 0 8px #ff0040;
  animation: v2-prompter-blink 1.8s ease-in-out infinite;
}
@keyframes v2-prompter-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
.v2-prompter-count {
  position: absolute;
  top: 22px; right: 32px;
  z-index: 3;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.4);
}
.v2-prompter-count .current { color: rgba(255, 255, 255, 0.85); }
.v2-prompter-screen:hover .v2-prompter-bar-fill {
  animation-play-state: paused !important;
}
.v2-prompter-bar {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 140px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.v2-prompter-bar-fill {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--acc), var(--acc2));
  box-shadow: 0 0 6px 1px var(--acc);
}
@keyframes v2-prompter-fuse {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.v2-prompter-slide {
  position: absolute;
  inset: 0;
  padding: 88px 56px 48px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease-in-out), transform 0.5s var(--ease-in-out);
  pointer-events: none;
}
.v2-prompter-slide.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0px);
  pointer-events: auto;
}
.v2-prompter-slide h3 {
  font-family: 'Gill Sans Ultra Bold', 'GillSans-UltraBold', 'Gill Sans Heavy',
               'Gill Sans MT Heavy', 'GillSans-Heavy', 'Gill Sans MT', 'Gill Sans',
               'Inter Tight', sans-serif;
  font-weight: 900;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing: -0.005em;
  line-height: 1.15;
  margin: 0 0 18px;
  background: linear-gradient(120deg, var(--acc) 0%, var(--acc2) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.v2-prompter-slide p {
  max-width: 62ch;
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.88);
}
.v2-prompter-slide.acc-cyan    { --acc: #00f0ff; --acc2: #0080ff; }
.v2-prompter-slide.acc-magenta { --acc: #ff00f0; --acc2: #7a42ff; }
.v2-prompter-slide.acc-orange  { --acc: #ff8a0e; --acc2: #ffd400; }
.v2-prompter-slide.acc-violet  { --acc: #7a42ff; --acc2: #ff00f0; }
.v2-prompter-slide.acc-green   { --acc: #3dffa0; --acc2: #00f0ff; }
.v2-prompter-slide.acc-red     { --acc: #ff0040; --acc2: #ff8a0e; }
.v2-prompter-controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
  margin: 0 auto;
  padding: 8px 14px;
  border-radius: 6px;
  background:
    linear-gradient(#0a0a0d, #0a0a0d) padding-box,
    linear-gradient(90deg, var(--acc), var(--acc2)) border-box;
  border: 1.5px solid transparent;
}
.v2-prompter-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background:
    linear-gradient(#060608, #060608) padding-box,
    linear-gradient(135deg, var(--acc), var(--acc2)) border-box;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.v2-prompter-arrow i {
  font-size: 0.72rem;
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.v2-prompter-arrow:hover {
  transform: scale(1.1);
  background:
    linear-gradient(135deg, var(--acc), var(--acc2)) padding-box,
    linear-gradient(135deg, var(--acc), var(--acc2)) border-box;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 12px -2px var(--acc);
}
.v2-prompter-arrow:hover i {
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: #000;
  color: #000;
}
.v2-prompter-arrow:active { transform: scale(0.94); }
.v2-prompter-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}
.v2-prompter-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 1.5px solid var(--acc);
  opacity: 0.5;
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.v2-prompter-dot:hover { opacity: 0.85; }
.v2-prompter-dot.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  box-shadow: 0 0 9px 1px var(--acc);
  opacity: 1;
  transform: scale(1.2);
}
@media (max-width: 640px) {
  .v2-prompter { padding: 18px 0 150px; }
  .v2-prompter-slide { padding: 78px 24px 32px; }
  .v2-prompter-rec { left: 20px; }
  .v2-prompter-count { right: 20px; }
  .v2-prompter-bar { width: 96px; }
  .v2-prompter-controls { gap: 12px; padding: 7px 12px; }
}
.v2-svc-intro {
  position: relative;
  isolation: isolate;
  padding-block: clamp(64px, 9vw, 120px) clamp(48px, 6vw, 84px);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: clamp(36px, 5vw, 60px);
}
.v2-svc-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.85;
  pointer-events: none;
}
.v2-svc-intro::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 0%, rgba(33, 33, 44, 0.35) 100%);
  pointer-events: none;
}
.v2-svc-intro .v2-section-head { margin-bottom: 0; }
.v2-svc-intro--cyan::before {
  background:
    radial-gradient(55% 90% at 20% 50%, rgba(0, 240, 255, 0.32), transparent 65%),
    radial-gradient(55% 90% at 82% 50%, rgba(0, 128, 255, 0.22), transparent 65%);
}
.v2-svc-intro--magenta::before {
  background:
    radial-gradient(55% 90% at 30% 50%, rgba(255, 0, 240, 0.34), transparent 60%),
    radial-gradient(55% 90% at 75% 50%, rgba(122, 66, 255, 0.24), transparent 60%);
}
.v2-svc-intro--red::before {
  background:
    radial-gradient(55% 90% at 25% 50%, rgba(255, 0, 64, 0.30), transparent 60%),
    radial-gradient(55% 90% at 78% 50%, rgba(255, 138, 14, 0.22), transparent 60%);
}
.v2-svc-intro--blue::before {
  background:
    radial-gradient(55% 90% at 28% 50%, rgba(0, 128, 255, 0.30), transparent 60%),
    radial-gradient(55% 90% at 72% 50%, rgba(0, 240, 255, 0.22), transparent 60%);
}
.v2-svc-intro--gold::before {
  background:
    radial-gradient(55% 90% at 22% 50%, rgba(255, 138, 14, 0.26), transparent 60%),
    radial-gradient(55% 90% at 78% 50%, rgba(241, 254, 0, 0.18), transparent 60%);
}
.v2-svc-intro--green::before {
  background:
    radial-gradient(55% 90% at 28% 50%, rgba(87, 255, 0, 0.22), transparent 60%),
    radial-gradient(55% 90% at 72% 50%, rgba(0, 240, 255, 0.24), transparent 60%);
}
.v2-svc-intro--purple::before {
  background:
    radial-gradient(55% 90% at 25% 50%, rgba(122, 66, 255, 0.32), transparent 60%),
    radial-gradient(55% 90% at 75% 50%, rgba(255, 0, 240, 0.22), transparent 60%);
}
.v2-svc-intro--sunset::before {
  background:
    radial-gradient(55% 90% at 25% 50%, rgba(255, 138, 14, 0.32), transparent 60%),
    radial-gradient(55% 90% at 75% 50%, rgba(255, 0, 240, 0.22), transparent 60%);
}
.v2-svc-intro--center .v2-section-head {
  text-align: center;
  align-items: center;
  margin-inline: auto;
}
.v2-svc-intro--right .v2-section-head {
  text-align: right;
  align-items: flex-end;
  margin-inline-start: auto;
  margin-inline-end: 0;
}
.v2-svc-intro--massive .v2-section-head h2 {
  font-size: clamp(3rem, 11vw, 7.5rem);
  letter-spacing: -0.014em;
  line-height: 0.88;
}
.v2-svc-intro--editorial .v2-section-head .label-line { letter-spacing: 0.32em; }
.v2-svc-intro--editorial .v2-section-head h2 {
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  letter-spacing: -0.008em;
}
.v2-svc-intro--editorial .v2-section-head p { font-style: italic; }
.v2-svc-intro-num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 6px;
}
.v2-svc-intro-road {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}
.v2-svc-intro-road .stripe {
  display: inline-block;
  width: clamp(24px, 4vw, 48px);
  height: 6px;
  border-radius: 2px;
  background: var(--c-cyan);
  box-shadow: 0 0 12px var(--c-cyan);
}
.v2-svc-intro-road .stripe.alt { background: var(--c-pink); box-shadow: 0 0 12px var(--c-pink); }
.v2-svc-cinemascope {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.v2-svc-cinemascope-item {
  position: relative;
  aspect-ratio: 21 / 9;
  min-height: 320px;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--bd-strong);
  background: var(--bg-3);
  isolation: isolate;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.37), 0 0 50px rgba(0, 240, 255, 0.12);
  transition: transform 0.5s var(--ease-out), border-color 0.5s ease;
}
.v2-svc-cinemascope-item.is-16-9 {
  aspect-ratio: 16 / 9;
  min-height: 0;
}
.v2-svc-cinemascope-item:hover {
  transform: translateY(-4px);
  border-color: var(--c-cyan);
}
.v2-svc-cinemascope-item video,
.v2-svc-cinemascope-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(112%) brightness(0.92);
  transition: filter 0.5s ease, transform 1.2s var(--ease-out);
}
.v2-svc-cinemascope-item:hover video,
.v2-svc-cinemascope-item:hover img {
  filter: saturate(120%) brightness(1.02);
  transform: scale(1.03);
}
.v2-svc-cinemascope-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.41) 100%);
  pointer-events: none;
}
.v2-svc-cinemascope-item .caption {
  position: absolute;
  left: clamp(20px, 3vw, 36px);
  bottom: clamp(20px, 3vw, 32px);
  z-index: 2;
  color: #fff;
}
.v2-svc-cinemascope-item .caption .label-line { margin-bottom: 10px; }
.v2-svc-cinemascope-item .caption h3 {
  font-family: 'Gill Sans Ultra Bold', 'GillSans-UltraBold', 'Gill Sans Heavy',
               'Gill Sans MT Heavy', 'GillSans-Heavy', 'Gill Sans MT', 'Gill Sans',
               'Inter Tight', sans-serif;
  font-weight: 900;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -0.01em;
  line-height: 1;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.v2-svc-cta h2 {
  font-family: var(--font-display);
}
.v2-careers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.v2-career-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--bd-white);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s var(--ease-out), border-color 0.4s ease, box-shadow 0.4s ease;
}
.v2-career-card:hover {
  transform: translateY(-4px);
  border-color: var(--bd-strong);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34), 0 0 32px rgba(0, 240, 255, 0.15);
  color: inherit;
}
.v2-career-card-thumb {
  overflow: hidden;
  background: var(--bg-2);
  position: relative;
  line-height: 0; 
}
.v2-career-card-thumb img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1.2s var(--ease-out), filter 0.5s ease;
  filter: saturate(110%);
}
.v2-career-card:hover .v2-career-card-thumb img {
  transform: scale(1.05);
  filter: saturate(120%) brightness(1);
}
.v2-career-card-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(33, 33, 44, 0.6) 100%);
  pointer-events: none;
}
.v2-career-card-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v2-career-card-body h2 {
  font-family: 'Gill Sans Ultra Bold', 'GillSans-UltraBold', 'Gill Sans Heavy',
               'Gill Sans MT Heavy', 'GillSans-Heavy', 'Gill Sans MT', 'Gill Sans',
               'Inter Tight', sans-serif;
  font-weight: 900;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  letter-spacing: -0.005em;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 4px;
}
.v2-career-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.9rem;
  color: var(--fg-2);
  margin: 6px 0 14px;
}
.v2-career-card-meta .company { color: #fff; font-weight: 600; }
.v2-career-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 8px;
}
.v2-career-badges.detail { margin-bottom: 18px; }
.v2-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid transparent;
  white-space: nowrap;
}
.v2-badge.part-time {
  background: linear-gradient(135deg, #00f0ff 0%, #0080ff 100%);
  border-color: rgba(0, 240, 255, 0.6);
  box-shadow: 0 4px 14px rgba(0, 240, 255, 0.35);
}
.v2-badge.full-time {
  background: linear-gradient(135deg, #57ff00 0%, #00f0ff 100%);
  border-color: rgba(87, 255, 0, 0.6);
  box-shadow: 0 4px 14px rgba(87, 255, 0, 0.32);
  color: #061a05;
}
.v2-badge.on-site {
  background: linear-gradient(135deg, #ff8a0e 0%, #ff00f0 100%);
  border-color: rgba(255, 138, 14, 0.6);
  box-shadow: 0 4px 14px rgba(255, 138, 14, 0.35);
}
.v2-badge .info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.19);
  font-style: italic;
  font-weight: 800;
  font-family: serif;
  cursor: help;
  position: relative;
}
.v2-badge .info::before { content: 'i'; }
.v2-badge .info .tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #050010;
  border: 1px solid var(--bd-strong);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 100;
}
.v2-badge .info:hover .tip { opacity: 1; }
.v2-careers-empty {
  text-align: center;
  padding: clamp(60px, 10vw, 120px) 20px;
  border: 1px dashed var(--bd-strong);
  border-radius: var(--r-xl);
  background: rgba(0, 240, 255, 0.03);
}
.v2-careers-empty i {
  font-size: clamp(3rem, 6vw, 5rem);
  color: var(--c-cyan);
  filter: drop-shadow(0 0 18px rgba(0, 240, 255, 0.5));
  margin-bottom: 18px;
}
.v2-careers-empty h2 {
  font-family: 'Gill Sans Ultra Bold', 'GillSans-UltraBold', 'Gill Sans Heavy',
               'Gill Sans MT Heavy', 'GillSans-Heavy', 'Gill Sans MT', 'Gill Sans',
               'Inter Tight', sans-serif;
  font-weight: 900;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: #fff;
  margin: 0 0 8px;
}
.v2-careers-empty p {
  color: var(--fg-2);
  margin: 0;
}
.v2-career-detail-header {
  display: grid;
  grid-template-columns: clamp(180px, 22vw, 280px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: flex-start;
}
.v2-career-detail-header .thumb {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--bd-strong);
}
.v2-career-detail-header .thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.v2-career-detail-header h1 {
  font-size: clamp(2.2rem, 5.5vw, 4.6rem);
  letter-spacing: -0.01em;
  line-height: 0.95;
  color: #fff;
  margin: 0 0 14px;
}
.v2-career-detail-header .location {
  margin: 14px 0 4px;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  font-weight: 600;
  color: #fff;
}
.v2-career-detail-header .reports {
  margin: 0;
  font-size: 0.95rem;
  color: var(--fg-2);
}
.v2-career-detail-header .reports i {
  color: var(--c-cyan);
  font-style: normal;
  font-weight: 600;
}
@media (max-width: 720px) {
  .v2-career-detail-header { grid-template-columns: 1fr; }
}
.v2-career-detail-body {
  margin-top: clamp(36px, 5vw, 60px);
  color: var(--fg-2);
  font-size: 1.02rem;
  line-height: 1.65;
}
.v2-career-detail-body h2,
.v2-career-detail-body h3 {
  font-family: 'Gill Sans Ultra Bold', 'GillSans-UltraBold', 'Gill Sans Heavy',
               'Gill Sans MT Heavy', 'GillSans-Heavy', 'Gill Sans MT', 'Gill Sans',
               'Inter Tight', sans-serif;
  font-weight: 900;
  letter-spacing: -0.005em;
  line-height: 1.1;
  color: #fff;
  margin: 36px 0 14px;
}
.v2-career-detail-body h2 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.v2-career-detail-body h3 { font-size: clamp(1.2rem, 1.8vw, 1.55rem); }
.v2-career-detail-body p { margin: 0 0 14px; }
.v2-career-detail-body ul,
.v2-career-detail-body ol {
  padding-left: 22px;
  margin: 0 0 18px;
}
.v2-career-detail-body li {
  margin-bottom: 8px;
}
.v2-career-detail-body li b,
.v2-career-detail-body li strong {
  color: #fff;
  font-weight: 700;
}
.v2-career-detail-body a {
  color: var(--c-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.25s ease;
}
.v2-career-detail-body a:hover { color: #fff; }
.v2-career-detail-body hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bd-strong) 30%, var(--bd-strong) 70%, transparent);
  margin: 40px 0;
}
.v2-team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  container-type: inline-size;
}
.v2-team-grid > .v2-team-card { flex: 0 0 100%; }
@container (min-width: 502px) {
  .v2-team-grid > .v2-team-card { flex-basis: calc((100% - 22px) / 2); }
}
@container (min-width: 764px) {
  .v2-team-grid > .v2-team-card { flex-basis: calc((100% - 44px) / 3); }
}
@container (min-width: 1026px) {
  .v2-team-grid > .v2-team-card { flex-basis: calc((100% - 66px) / 4); }
}
.v2-team-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  background: var(--bg-2);
  border: 1px solid var(--bd-white);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s var(--ease-out), border-color 0.4s ease, box-shadow 0.4s ease;
}
.v2-team-card:hover {
  transform: translateY(-4px);
  border-color: var(--bd-strong);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34), 0 0 32px rgba(0, 240, 255, 0.15);
  color: inherit;
}
.v2-team-card-photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-2);
  position: relative;
}
.v2-team-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;          
  object-position: center 18%; 
  transition: transform 1.2s var(--ease-out), filter 0.5s ease;
  filter: saturate(108%);
}
.v2-team-card:hover .v2-team-card-photo img {
  transform: scale(1.04);
  filter: saturate(118%) brightness(1);
}
.v2-team-card-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(33, 33, 44, 0.6) 100%);
  pointer-events: none;
}
.v2-team-card-body {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.v2-team-card-body h2 {
  font-family: 'Gill Sans Ultra Bold', 'GillSans-UltraBold', 'Gill Sans Heavy',
               'Gill Sans MT Heavy', 'GillSans-Heavy', 'Gill Sans MT', 'Gill Sans',
               'Inter Tight', sans-serif;
  font-weight: 900;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  letter-spacing: -0.005em;
  line-height: 1.1;
  margin: 0 0 4px;
  color: #fff;
  text-align: center;
}
.v2-team-card-body .role {
  text-align: center;
  color: var(--c-cyan);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0;
}
.v2-team-card-body .role br { display: none; }
.v2-team-ceo {
  display: grid;
  grid-template-columns: clamp(220px, 28vw, 360px) minmax(0, 42rem);
  justify-content: center;
  gap: clamp(36px, 5vw, 70px);
  align-items: center;
}
.v2-team-ceo-photo {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--bd-strong);
  aspect-ratio: 4 / 5;
}
.v2-team-ceo-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-team-ceo h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: -0.01em;
  line-height: 0.95;
  color: #fff;
  margin: 0 0 18px;
}
.v2-team-ceo .ceo-role {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--bd-strong);
  background: rgba(0, 240, 255, 0.05);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-cyan);
  margin-bottom: 18px;
}
.v2-team-ceo p {
  margin: 0 0 14px;
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  line-height: 1.65;
  color: var(--fg-2);
}
@media (max-width: 820px) {
  /* Stacked: the heading goes above the photo, the rest below (same as the
     homepage's Meet Ryan). The text wrapper drops out of layout so its
     heading can be reordered; items stay full width and left-aligned. */
  .v2-team-ceo { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .v2-team-ceo > div:not(.v2-team-ceo-photo) { display: contents; }
  .v2-team-ceo h1 { order: -2; }
  .v2-team-ceo-photo { order: -1; max-width: 360px; width: 100%; margin: 22px 0 28px; }
}
.v2-team-detail-wrap {
  max-width: 960px;
  margin: 0 auto;
}
.v2-team-detail-header::after { content: ''; display: table; clear: both; }
.v2-team-detail-header .role br { display: none; }
.v2-team-detail-header .photo {
  float: left;
  width: clamp(220px, 26vw, 340px);
  margin: 0 clamp(24px, 3vw, 40px) 16px 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--bd-strong);
  aspect-ratio: 4 / 5;
}
@media (max-width: 560px) {
  /* Stacked: "Meet First Last" above the photo, everything else below in its
     usual order (the text wrappers are display: contents, so the heading is
     a direct child and can be reordered). Full width, left-aligned. */
  .v2-team-detail-header { display: flex; flex-direction: column; align-items: stretch; }
  .v2-team-detail-header h1 { order: -2; }
  .v2-team-detail-header .photo { order: -1; float: none; width: 100%; max-width: 340px; margin: 8px 0 22px; }
}
.v2-team-detail-header .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%; 
  display: block;
}
.v2-team-detail-header h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: -0.01em;
  line-height: 0.95;
  color: #fff;
  margin: 0 0 14px;
}
.v2-team-detail-header .role {
  margin: 0 0 8px;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--c-cyan);
}
.v2-team-detail-header .content { display: contents; }
.v2-team-detail-body {
  display: contents;
  color: var(--fg-2);
  font-size: 1.02rem;
  line-height: 1.65;
}
.v2-team-detail-body p { margin: 0 0 16px; }
.v2-team-detail-body p:first-child {
  margin-top: clamp(10px, 1.2vw, 18px);
  padding-top: 10px;
  border-top: 1px solid var(--bd-soft);
}
.v2-team-detail-body strong, .v2-team-detail-body b { color: #fff; }
.v2-team-detail-body i, .v2-team-detail-body em { color: var(--fg); }
.centered-quote {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  justify-content: center;
}
.v2-prose {
  color: var(--fg-2);
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 780px;
  margin: 0 auto;
}
.v2-prose h2,
.v2-prose h3 {
  font-family: 'Gill Sans Ultra Bold', 'GillSans-UltraBold', 'Gill Sans Heavy',
               'Gill Sans MT Heavy', 'GillSans-Heavy', 'Gill Sans MT', 'Gill Sans',
               'Inter Tight', sans-serif;
  font-weight: 900;
  letter-spacing: -0.005em;
  line-height: 1.15;
  color: #fff;
  margin: 36px 0 14px;
}
.v2-prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.95rem); }
.v2-prose h3 { font-size: clamp(1.15rem, 1.8vw, 1.5rem); }
.v2-prose p { margin: 0 0 16px; }
.v2-prose ul, .v2-prose ol { padding-left: 22px; margin: 0 0 18px; }
.v2-prose li { margin-bottom: 8px; }
.v2-prose a {
  color: var(--c-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.v2-prose a:hover { color: #fff; }
.v2-prose strong, .v2-prose b { color: #fff; }
.v2-about-timeline {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding-left: clamp(36px, 5vw, 56px);
}
.v2-about-timeline::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 11px;
  width: 2px;
  background: linear-gradient(180deg, var(--c-cyan), var(--c-pink) 60%, transparent);
  opacity: 0.55;
}
.v2-about-moment {
  position: relative;
  padding-bottom: clamp(40px, 6vw, 64px);
}
.v2-about-moment:last-child { padding-bottom: 0; }
.v2-about-moment::before {
  content: '';
  position: absolute;
  left: calc(-1 * clamp(36px, 5vw, 56px) + 5px);
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--c-cyan);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.8), 0 0 24px rgba(0, 240, 255, 0.35);
}
.v2-about-moment.is-now::before {
  border-color: var(--c-pink);
  background: var(--c-pink);
  box-shadow: 0 0 12px rgba(255, 0, 240, 0.9), 0 0 28px rgba(255, 0, 240, 0.4);
}
.v2-about-moment .stamp {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-cyan);
  margin-bottom: 10px;
  padding-left: 0.3em;
}
.v2-about-moment.is-now .stamp { color: var(--c-pink-soft); }
.v2-about-moment h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--fg);
  margin-bottom: 12px;
}
.v2-about-moment p {
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.7;
  color: var(--fg-3);
  max-width: 62ch;
  margin: 0;
}
.v2-about-growth {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.008em;
  line-height: 1;
}
.v2-about-growth .from,
.v2-about-growth .to { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.v2-about-growth .from { color: var(--fg-4); }
.v2-about-growth .to {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.v2-about-growth .arrow {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  color: var(--c-cyan);
}
.v2-about-growth .note {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.v2-about-svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.v2-about-svc-card {
  --acc:  var(--c-cyan);
  --acc2: var(--c-pink);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 24px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--bd-white);
  text-decoration: none;
  transition: transform 0.35s var(--ease-out), border-color 0.35s var(--ease-out),
              box-shadow 0.35s var(--ease-out);
}
.v2-about-svc-card.acc-cyan    { --acc: #00f0ff; --acc2: #0080ff; }
.v2-about-svc-card.acc-magenta { --acc: #ff00f0; --acc2: #7a42ff; }
.v2-about-svc-card.acc-orange  { --acc: #ff8a0e; --acc2: #ffd400; }
.v2-about-svc-card.acc-violet  { --acc: #7a42ff; --acc2: #ff00f0; }
.v2-about-svc-card.acc-green   { --acc: #3dffa0; --acc2: #00f0ff; }
.v2-about-svc-card.acc-red     { --acc: #ff0040; --acc2: #ff8a0e; }
.v2-about-svc-card:hover,
.v2-about-svc-card:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--acc) 55%, transparent);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--acc) 20%, transparent);
}
.v2-about-svc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  color: #0b0b0c;
  font-size: 1.05rem;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--acc) 35%, transparent);
}
.v2-about-svc-icon .icon-drone { width: 1.35em; height: 1.35em; }
.v2-about-svc-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: #fff;
}
.v2-about-svc-desc {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--fg-3);
}
@media (prefers-reduced-motion: reduce) {
  .v2-about-svc-card { transition: none; }
  .v2-about-svc-card:hover { transform: none; }
}
.v2-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}
.v2-blog-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--bd);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out),
              box-shadow 0.3s var(--ease-out);
}
.v2-blog-card:hover {
  transform: translateY(-6px);
  border-color: var(--bd-strong);
  box-shadow: 0 18px 50px rgba(0, 240, 255, 0.12);
}
.v2-blog-card .thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-3);
}
.v2-blog-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.v2-blog-card:hover .thumb img { transform: scale(1.05); }
.v2-blog-card .inner { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.v2-blog-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0;
}
.v2-blog-card p { color: var(--fg-3); font-size: 0.95rem; line-height: 1.6; margin: 0; }
.v2-blog-card .meta {
  margin-top: auto;
  padding-top: 10px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.v2-blog-featured {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  background: var(--bg-2);
  border: 1px solid var(--bd-strong);
  border-radius: var(--r-xl);
  overflow: hidden;
  text-decoration: none;
  margin-bottom: clamp(32px, 4vw, 48px);
  transition: box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.v2-blog-featured:hover { border-color: var(--c-cyan); box-shadow: 0 22px 70px rgba(0, 240, 255, 0.16); }
.v2-blog-featured .thumb { min-height: 320px; background: var(--bg-3); }
.v2-blog-featured .thumb img { width: 100%; height: 100%; object-fit: cover; }
.v2-blog-featured .inner {
  padding: clamp(26px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.v2-blog-featured h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--fg);
  margin: 0;
}
.v2-blog-featured p { color: var(--fg-3); line-height: 1.7; margin: 0; }
@media (max-width: 860px) {
  .v2-blog-featured { grid-template-columns: 1fr; }
  .v2-blog-featured .thumb { min-height: 220px; }
}
.v2-blog-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-blog-tags a,
.v2-blog-tags span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border: 1px solid var(--bd-strong);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-2);
  text-decoration: none;
  transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.v2-blog-tags a i { color: var(--c-cyan); font-size: 0.8em; }
.v2-blog-tags a:hover { border-color: var(--c-cyan); background: rgba(0, 240, 255, 0.10); color: #fff; }
.v2-article-head { max-width: 860px; margin: 0 auto; text-align: center; }
.v2-article-head h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.006em;
  line-height: 1.06;
  margin: 18px 0;
}
.v2-article-byline {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.v2-article-byline i { color: var(--c-cyan); margin-right: 6px; }
.v2-article-hero {
  max-width: 1060px;
  margin: clamp(30px, 4vw, 48px) auto 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--bd);
}
.v2-article-hero img { width: 100%; display: block; }
.v2-article-body { max-width: 760px; margin: 0 auto; }
@media (prefers-reduced-motion: reduce) {
  .v2 *, .v2 *::before, .v2 *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
.v2-mega-grid--2 { grid-template-columns: repeat(2, 264px); }
/* About items are title-only, so center the title on its icon */
.v2-nav-mega .v2-mega-grid--2 .v2-mega-item { align-items: center; }
.v2-flow {
  display: flex;
  gap: 10px;
  min-height: 300px;
}
.v2-flow-stage:nth-child(1) { --fa: var(--brand-orange); --fa-glow: rgba(var(--brand-orange-rgb), 0.5); }
.v2-flow-stage:nth-child(2) { --fa: var(--brand-purple); --fa-glow: rgba(var(--brand-purple-rgb), 0.5); }
.v2-flow-stage:nth-child(3) { --fa: var(--brand-blue);   --fa-glow: rgba(var(--brand-blue-rgb),   0.5); }
.v2-flow-stage:nth-child(4) { --fa: var(--brand-yellow); --fa-glow: rgba(var(--brand-yellow-rgb), 0.5); }
.v2-flow-stage:nth-child(5) { --fa: var(--brand-teal);   --fa-glow: rgba(var(--brand-teal-rgb),   0.5); }
.v2-flow-stage:nth-child(6) { --fa: var(--brand-green);  --fa-glow: rgba(var(--brand-green-rgb),  0.5); }
.v2-flow-4 .v2-flow-stage:nth-child(2) { --fa: var(--brand-blue);  --fa-glow: rgba(var(--brand-blue-rgb),  0.5); }
.v2-flow-4 .v2-flow-stage:nth-child(3) { --fa: var(--brand-teal);  --fa-glow: rgba(var(--brand-teal-rgb),  0.5); }
.v2-flow-4 .v2-flow-stage:nth-child(4) { --fa: var(--brand-green); --fa-glow: rgba(var(--brand-green-rgb), 0.5); }
.v2-flow-stage {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--bd-white);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: flex 0.65s var(--ease-in-out),
              border-color 0.4s ease,
              box-shadow 0.4s ease;
}
.v2-flow-stage:hover { border-color: var(--bd-strong); }
.v2-flow-stage.is-open {
  flex: 3.4 1 0;
  cursor: default;
  border-color: color-mix(in srgb, var(--fa) 55%, transparent);
  box-shadow:
    0 0 24px color-mix(in srgb, var(--fa) 18%, transparent),
    inset 0 0 60px color-mix(in srgb, var(--fa) 6%, transparent);
}
.v2-flow-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 95% at 88% 108%,
              color-mix(in srgb, var(--fa) 42%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.v2-flow-stage.is-open::before { opacity: 1; }
.v2-flow-bar {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: var(--fa);
  box-shadow: 0 0 10px var(--fa-glow), 0 0 18px var(--fa-glow);
  transform: scaleX(0);
  transform-origin: left;
}
.v2-flow-stage.is-open .v2-flow-bar { transform: scaleX(1); opacity: 0.55; }
.v2-flow.is-cycling .v2-flow-stage.is-open .v2-flow-bar {
  opacity: 1;
  animation: v2-flow-fuse 4s linear forwards;
}
.v2-flow.is-cycling:hover .v2-flow-stage.is-open .v2-flow-bar {
  animation-play-state: paused;
}
.v2-flow.is-cycling.is-holding .v2-flow-stage.is-open .v2-flow-bar {
  animation-duration: 9s;
}
@keyframes v2-flow-fuse {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.v2-flow-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(165deg,
              color-mix(in srgb, var(--fa) 65%, var(--bg-2)) 0%,
              color-mix(in srgb, var(--fa) 30%, var(--bg-2)) 100%);
}
.v2-flow-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v2-flow-photo-icon {
  position: absolute;
  right: -6%;
  top: 50%;
  font-size: clamp(7rem, 14vw, 11rem);
  color: color-mix(in srgb, var(--fa) 45%, transparent);
  opacity: 0.55;
  transform: translateY(-50%) scale(1) rotate(-8deg);
  transition: opacity 0.65s var(--ease-in-out),
              transform 0.65s var(--ease-in-out),
              color 0.65s var(--ease-in-out),
              right 0.65s var(--ease-in-out);
  pointer-events: none;
}
.v2-flow-stage:hover .v2-flow-photo-icon { opacity: 0.7; }
/* Icon sits center-right on every card, open or closed. */
.v2-flow-stage.is-open .v2-flow-photo-icon {
  right: 3%;
  opacity: 0.9;
  color: color-mix(in srgb, var(--fa) 70%, transparent);
  transform: translateY(-50%) scale(1.12) rotate(-4deg);
}
.v2-flow-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
              rgba(0, 0, 0, 0) 0%,
              rgba(0, 0, 0, 0) 60%,
              rgba(0, 0, 0, 0.35) 100%);
  transition: opacity 0.65s var(--ease-in-out);
}
.v2-flow-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;   
  background: linear-gradient(to bottom,
              rgba(6, 6, 9, 0) 0%,
              rgba(6, 6, 9, 0) 38%,
              rgba(6, 6, 9, 0.78) 62%,
              rgba(6, 6, 9, 0.92) 100%);
  opacity: 0;
  transition: opacity 0.65s var(--ease-in-out);
}
.v2-flow-stage.is-open .v2-flow-photo::after { opacity: 0; }
.v2-flow-stage.is-open .v2-flow-photo::before { opacity: 1; }
.v2-flow-tab {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  color: var(--fg-3);
  white-space: nowrap;
  transition: opacity 0.25s ease, color 0.25s ease;
}
.v2-flow-stage:hover .v2-flow-tab { color: var(--fg); }
.v2-flow-stage.is-open .v2-flow-tab { opacity: 0; }
.v2-flow-body {
  position: absolute;
  left: 22px; right: 22px; bottom: 22px;
  z-index: 2;
  display: block;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s var(--ease-out);
}
.v2-flow-stage.is-open .v2-flow-body {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 0.4s ease 0.22s, transform 0.45s var(--ease-out) 0.22s;
}
.v2-flow-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.8vw, 2.5rem);
  letter-spacing: -0.005em;
  line-height: 1;
  color: var(--fg);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.v2-flow-copy {
  display: block;
  margin-top: 10px;
  max-width: 42ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fg-2);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
@media (max-width: 880px) {
  .v2-flow { flex-direction: column; gap: 14px; min-height: 0; }
  .v2-flow-stage,
  .v2-flow-stage.is-open { flex: none; cursor: default; }
  .v2-flow-stage { min-height: 220px; padding: 16px 18px 16px 58px; border-radius: var(--r); }
  .v2-flow-stage.is-open {
    border-color: var(--bd-white);
    box-shadow: none;
  }
  .v2-flow-bar,
  .v2-flow-stage.is-open .v2-flow-bar {
    top: 0; left: 0; bottom: 0;
    width: 3px; height: auto;
    transform: none;
    opacity: 1;
    animation: none;
  }
  .v2-flow-tab { display: none; }
  /* Icon on the left, starting near the card's edge, well left of the text
     (which starts at the card's 58px padding). */
  .v2-flow-photo-icon,
  .v2-flow-stage.is-open .v2-flow-photo-icon {
    left: 16px;
    right: auto;
    opacity: 0.55;
    transform: translateY(-50%);
  }
  .v2-flow-photo::before { display: none; }
  .v2-flow-stage.is-open .v2-flow-photo::after { opacity: 1; }
  .v2-flow-photo::after {
    background: linear-gradient(to left,
                color-mix(in srgb, var(--bg-2) 78%, transparent) 10%,
                rgba(0, 0, 0, 0.3) 100%);
  }
  .v2-flow-stage::before { display: none; }
  .v2-flow-body,
  .v2-flow-stage.is-open .v2-flow-body {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .v2-flow-title { font-size: 1.15rem; }
  .v2-flow-copy { margin-top: 6px; font-size: 0.9rem; max-width: none; }
}
.v2-inv {
  --k: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(24px, 3vw, 40px);
}
.v2-inv-stack {
  position: relative;
  height: calc(470px * var(--k));
}
.v2-paper {
  position: absolute;
  left: calc(var(--x) * var(--k));
  top: calc(var(--y) * var(--k));
  width: calc(230px * var(--k));
  padding: 16px 18px;
  border-radius: 6px;
  background: #f4f4f7;
  color: #2a2a35;
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.35;
  letter-spacing: 0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  transform: rotate(var(--r));
}
.v2-paper-from {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: #1a1a24;
}
.v2-paper-meta { color: #6a6a78; margin-top: 2px; }
.v2-paper hr { border: 0; border-top: 1px solid #d8d8e0; margin: 10px 0; opacity: 1; }
.v2-paper-li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.v2-paper-tot {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 2px solid #1a1a24;
}
.v2-paper-amt { filter: blur(4px); user-select: none; }
.v2-paper-due { margin-top: 8px; color: #b3261e; font-weight: 600; }
.v2-paper--one {
  position: relative;
  left: auto;
  top: auto;
  width: min(100%, 420px);
  justify-self: start;
  padding: 26px 28px;
  border-radius: 10px;
  font-size: 0.86rem;
  transform: none;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(0, 240, 255, 0.25),
    0 0 100px rgba(255, 0, 240, 0.18);
}
.v2-paper--one .v2-paper-from { font-size: 1.25rem; }
.v2-paper--one .v2-paper-from .grad-text { font-size: 1em; }
.v2-paper--one .v2-paper-li { padding: 5px 0; border-bottom: 1px solid #e6e6ec; }
.v2-paper--one .v2-paper-tot { border-top-width: 3px; font-size: 1rem; }
.v2-paper--one .v2-paper-due { color: #0b7c85; }
.v2-inv-line {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  max-width: 30ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #fff;
}
.v2-paper.reveal { transition-property: opacity, transform, box-shadow; }
.v2-paper--one.reveal { transform: translateY(36px); }
.v2-paper--one.reveal.is-in { transform: none; }
@media (max-width: 900px) {
  .v2-inv { grid-template-columns: 1fr; gap: 28px; }
  .v2-inv-stack { max-width: 480px; }
}
@media (max-width: 480px) {
  .v2-inv { --k: 0.72; }
  .v2-inv-stack { height: 400px; margin-left: 4px; }
  .v2-paper { font-size: 0.64rem; padding: 12px 13px; }
  .v2-paper-from { font-size: 0.8rem; }
  .v2-paper--one { width: 100%; padding: 20px 20px; font-size: 0.82rem; }
}
.v2-packages {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.v2-package {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: clamp(18px, 1.6vw, 22px);
  background: var(--bg-2);
  border: 1px solid var(--bd-white);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.4s var(--ease-out), border-color 0.4s ease, box-shadow 0.4s ease;
}
.v2-package::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad);
}
.v2-package.pk-orange::before { background: linear-gradient(90deg, #ff8a0e, #f1fe00); }
.v2-package.pk-pink::before   { background: linear-gradient(90deg, #ff00f0, #7a42ff); }
.v2-package.pk-green::before  { background: linear-gradient(90deg, #57ff00, #00f0ff); }
.v2-package:hover {
  transform: translateY(-4px);
  border-color: var(--bd-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34), 0 0 30px rgba(0, 240, 255, 0.12);
}
.v2-package .pk-industry {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.v2-package h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 1.25vw, 1.24rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0;
  color: #fff;
}
.v2-package .pk-promise { margin: 0; font-size: 0.88rem; line-height: 1.35; color: var(--fg-2); }
.v2-package ul {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.v2-package li {
  display: flex;
  gap: 7px;
  align-items: baseline;
  padding: 5px 0;
  font-size: 0.83rem;
  line-height: 1.3;
  color: var(--fg-3);
}
.v2-package li + li { border-top: 1px solid var(--bd-white); }
.v2-package li::before {
  content: '+';
  flex: 0 0 auto;
  font-weight: 800;
  color: var(--c-cyan);
}
.v2-package .link-arrow { margin-top: auto; padding-top: 10px; font-size: 0.85rem; }
.v2-packages-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 12px 6px 0;
  border-top: 1px solid var(--bd-white);
  font-size: 0.92rem;
  color: var(--fg-3);
}
.v2-packages-foot .go {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-cyan);
  white-space: nowrap;
}
@media (max-width: 1240px) {
  .v2-packages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .v2-packages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .v2-packages { grid-template-columns: 1fr; }
}
.v2-hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--fg-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: color 0.25s ease;
}
.v2-hero-scroll:hover { color: #fff; }
.v2-hero-scroll .line {
  position: relative;
  width: 2px;
  height: 46px;
  border-radius: 2px;
  background: rgba(0, 240, 255, 0.25);
  overflow: hidden;
}
.v2-hero-scroll .line::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 45%;
  border-radius: 2px;
  background: var(--c-cyan);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.8);
  transform: translateY(-100%);
  animation: v2ScrollDrip 1.8s var(--ease-in-out) infinite;
}
/* Moves by transform (GPU) rather than top (layout every frame). Same path:
   from one bar-height above the track to 110% of the track below it. */
@keyframes v2ScrollDrip {
  from { transform: translateY(-100%); }
  to   { transform: translateY(244%); }
}
.v2-hero-scroll.reveal { transform: translateX(-50%) translateY(36px); }
.v2-hero-scroll.reveal.is-in { transform: translateX(-50%) translateY(0px); }
.v2-faq { max-width: 880px; margin-inline: auto; }
.v2-faq-item {
  padding: clamp(22px, 3vw, 32px) 0;
  border-top: 1px solid var(--bd-white);
}
.v2-faq-item:last-child { border-bottom: 1px solid var(--bd-white); }
.v2-faq-item h2,
.v2-faq-item h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 12px;
  color: #fff;
}
.v2-faq-item p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--fg-2);
  max-width: 72ch;
}
.v2-faq-item h3 .link-arrow {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}
.v2-faq-item:has(details) { padding: 0; }
.v2-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(22px, 3vw, 32px) 0;
  cursor: pointer;
  list-style: none;
}
.v2-faq-item .v2-faq-answer > *:last-child { padding-bottom: clamp(22px, 3vw, 32px); }
.v2-faq-item summary::-webkit-details-marker { display: none; }
.v2-faq-item summary h3 { margin: 0; }
.v2-faq-item summary::after {
  content: '';
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  opacity: 0.7;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.v2-faq-item details.is-open summary::after {
  transform: rotate(225deg) translateY(-3px);
}
.v2-faq-item details > p,
.v2-faq-item .v2-faq-answer p { margin-top: 14px; }
.v2-faq-item .v2-faq-answer { overflow: hidden; }
/* Compact two-up list: title over a one-line description, so a six-item
   "what's included" list takes about a third of the scroll it used to. */
/* One column on every screen, centered at a readable width. */
.v2-ledger {
  max-width: 820px;
  margin-inline: auto;
  border-top: 1px solid var(--bd-white);
}
.v2-ledger-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(16px, 1.8vw, 22px) 0;
  border-bottom: 1px solid var(--bd-white);
  transition: background 0.3s ease;
}
.v2-ledger-row:hover { background: rgba(255, 255, 255, 0.02); }
.v2-ledger-row h3 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
  color: #fff;
}
.v2-ledger-row h3 i {
  flex: 0 0 auto;
  font-size: 0.75em;
  color: var(--c-cyan);
}
.v2-ledger-row h3 .icon-drone {
  flex: 0 0 auto;
  width: 0.75em;
  height: 0.75em;
  vertical-align: -0.08em;
  color: var(--c-cyan);
}
.v2-ledger-row .meta {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.v2-ledger-row p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--fg-2);
}
.v2-ledger-row p + p { margin-top: 4px; }

.v2-svc-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.v2-svc-feature-list li {
  position: relative;
  padding-left: 20px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg-2);
}
.v2-svc-feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-cyan);
}
.v2-svc-feature-list b { color: #fff; }
.v2-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-top: 28px;
}
.v2-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2.2vw, 30px);
  background: var(--bg-2);
  border: 1px solid var(--bd-white);
  border-radius: var(--r-lg);
  transition: transform 0.4s var(--ease-out), border-color 0.4s ease, box-shadow 0.4s ease;
}
.v2-tier:hover { transform: translateY(-4px); border-color: var(--bd-strong); }
.v2-tier.is-featured {
  border-color: var(--bd-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34), 0 0 40px rgba(0, 240, 255, 0.1);
}
.tier-badge {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--grad);
  background-size: 200% 100%;
  animation: gradShift 8s steps(48) infinite;
  color: #16161f;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tier-pricer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  text-align: center;
}
.tier-pricer-label {
  font-size: 0.9rem;
  color: var(--fg-3);
}
.tier-pricer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 560px;
}
.tier-pricer input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 13px 18px;
  border: 1px solid var(--bd-white);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
}
.tier-pricer input::placeholder { color: var(--fg-4); }
.tier-pricer input:focus {
  outline: none;
  border-color: var(--c-cyan);
  box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.16);
}
.tier-pricer .btn-v2 { flex: 0 0 auto; }
.tier-pricer-result {
  margin: 0;
  min-height: 1.4em;
  font-size: 0.9rem;
  color: var(--fg-2);
}
.tier-pricer-result b { color: #fff; }
.tier-pricer-result.is-error { color: var(--c-pink-soft); }
.tier-pricer-scale { margin: 6px 0 0; font-size: 0.8rem; color: var(--fg-4); }
.v2-tier h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #fff;
}
.v2-tier h3 i { flex: 0 0 auto; font-size: 0.8em; color: var(--c-cyan); }
.tier-promise { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--fg-3); }
.tier-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bd-white);
}
.tier-price b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: #fff;
}
.tier-price span { font-size: 0.85rem; color: var(--fg-3); }
.tier-price .unit {
  font-size: 0.4em;
  letter-spacing: -0.01em;
  color: #fff;
}
.v2-tier ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.v2-tier li {
  display: flex;
  gap: 10px;
  font-size: 0.93rem;
  line-height: 1.45;
  color: var(--fg-2);
}
.v2-tier li i { flex: 0 0 auto; margin-top: 0.3em; font-size: 0.78em; color: var(--c-cyan); }
.tier-note { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--fg-4); }
.tier-note b { color: var(--fg-3); }
.v2-tier ul.tier-scale { gap: 4px; }
.v2-tier ul.tier-scale li {
  display: block;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--fg-4);
}
.v2-tier ul.tier-scale b { color: var(--fg-3); }
.v2-tier .btn-v2 { margin-top: auto; justify-content: center; }
@media (max-width: 900px) {
  .v2-tiers { grid-template-columns: 1fr; gap: 28px; }
}
.v2-gallery {
  columns: 3;
  column-gap: 18px;
}
.v2-gallery figure {
  margin: 0 0 18px;
  break-inside: avoid;
}
.v2-gallery--overlay-captions figure { position: relative; }
.v2-gallery.v2-gallery--overlay-captions figcaption,
.v2-svc-feature-media .v2-media-pill {
  position: absolute;
  left: 12px;
  bottom: 10px;
  margin: 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--c-cyan) -70%, var(--c-pink) 100%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.v2-gallery--overlay-captions figure:hover figcaption,
.v2-svc-feature-media:hover .v2-media-pill {
  opacity: 1;
  transform: translateY(0px);
}
.v2-gallery--overlay-captions a {
  display: block;
  text-decoration: none;
  margin: 0 0 18px;
  break-inside: avoid;
}
.v2-gallery--overlay-captions a figure { margin: 0; }
.v2-gallery img,
.v2-gallery video {
  display: block;
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--bd-white);
  filter: saturate(106%);
  transition: transform 0.5s var(--ease-out), box-shadow 0.4s ease, border-color 0.4s ease;
}
.v2-gallery figure:hover img,
.v2-gallery figure:hover video {
  transform: scale(1.015);
  border-color: var(--bd-strong);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34), 0 0 24px rgba(0, 240, 255, 0.10);
}
.v2-gallery figcaption {
  margin-top: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-4);
}
@media (max-width: 980px) { .v2-gallery { columns: 2; } }
@media (max-width: 560px) { .v2-gallery { columns: 1; } }
.v2-gallery--wide { columns: 2; column-gap: 22px; }
.v2-gallery--wide figure { margin-bottom: 22px; }
@media (max-width: 768px) { .v2-gallery--wide { columns: 1; } }
/* Row order instead of columns, so an odd last item sits centered */
.v2-gallery--rows { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 22px; }
.v2-gallery--rows > * { flex: 0 0 calc(50% - 11px); min-width: 0; }
.v2-gallery.v2-gallery--rows > a,
.v2-gallery.v2-gallery--rows figure { margin: 0; }
@media (max-width: 768px) { .v2-gallery--rows > * { flex-basis: 100%; } }
/* Social feed: mostly vertical reels and 4:5 posts, so four narrow columns
   on desktop keep each piece at a phone-like size and the wall short. */
.v2-gallery--feed { columns: 4; column-gap: 14px; }
.v2-gallery--feed figure { margin-bottom: 14px; }
@media (max-width: 1100px) { .v2-gallery--feed { columns: 3; } }
@media (max-width: 760px)  { .v2-gallery--feed { columns: 2; column-gap: 10px; } .v2-gallery--feed figure { margin-bottom: 10px; } }
@media (max-width: 560px)  { .v2-gallery--feed { columns: 1; } }
.v2-gallery-split {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.v2-gallery-split figure {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--bd-white);
  transition: transform 0.5s var(--ease-out), box-shadow 0.4s ease, border-color 0.4s ease;
}
.v2-gallery-split figure:hover {
  transform: scale(1.015);
  border-color: var(--bd-strong);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34), 0 0 24px rgba(0, 240, 255, 0.10);
}
.v2-gallery-split img,
.v2-gallery-split video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(106%);
}
/* Same client-name pill as every other gallery (.v2-gallery--overlay-captions). */
.v2-gallery-split figcaption {
  position: absolute;
  left: 12px;
  bottom: 10px;
  margin: 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--c-cyan) -70%, var(--c-pink) 100%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.v2-gallery-split figure:hover figcaption {
  opacity: 1;
  transform: translateY(0px);
}
.v2-gallery-split figure.is-vertical {
  grid-column: 1;
  grid-row: 1 / span 2;
  aspect-ratio: 9 / 16;
}
.v2-gallery-split figure.is-featured {
  grid-column: 2 / span 2;
  grid-row: 1;
  aspect-ratio: 16 / 9;
}
.v2-gallery-split figure.is-corner {
  grid-column: 1;
  grid-row: 3;
  aspect-ratio: 16 / 9;
}
.v2-gallery-split figure:not(.is-vertical):not(.is-featured) {
  aspect-ratio: 16 / 9;
}
/* Pieces past the full grid: a two-up row under it, so extra work never
   leaves one tile alone on a new row. */
.v2-gallery-split--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}
@media (max-width: 860px) {
  .v2-gallery-split { grid-template-columns: 1fr; }
  .v2-gallery-split figure.is-vertical,
  .v2-gallery-split figure.is-featured,
  .v2-gallery-split figure.is-corner,
  .v2-gallery-split figure:not(.is-vertical):not(.is-featured) {
    grid-column: 1;
    grid-row: auto;
  }
}
.v2-county-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.v2-county-grid a {
  padding: 10px 18px;
  border: 1px solid var(--bd-strong);
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--fg-2);
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.v2-county-grid a:hover {
  color: #000;
  background: var(--c-cyan);
  border-color: var(--c-cyan);
}
.v2-svc-process-note {
  max-width: 68ch;
  margin: clamp(28px, 4vw, 48px) auto 0;
  padding-top: clamp(22px, 3vw, 32px);
  border-top: 1px solid var(--bd-white);
}
.v2-svc-process-note p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--fg-2);
}
.v2-svc-process-note p + p { margin-top: 14px; }
.v2-svc-process-note ul {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.v2-svc-process-note li {
  position: relative;
  padding-left: 20px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fg-2);
}
.v2-svc-process-note li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-cyan);
}
.v2-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: clamp(22px, 3vw, 32px) clamp(24px, 3.4vw, 40px);
  background:
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    var(--grad) border-box;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease;
}
.v2-next:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.31), 0 0 30px rgba(0, 240, 255, 0.16);
}
.v2-next-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v2-next-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.2;
}
.v2-next .link-arrow { flex: 0 0 auto; }
/* The whole card is the link: hovering it underlines the name, and the
   arrow stays put (no widening gap, unlike the site's other link-arrows). */
.v2 .v2-next .link-arrow:hover { gap: 8px; }
.v2-next .v2-next-cta { text-underline-offset: 5px; }
.v2-next:hover .v2-next-cta,
.v2-next:focus-visible .v2-next-cta { text-decoration: underline; }
.v2-hero-problem {
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.85rem, 1.3vw, 1.05rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-cyan);
  text-shadow: 0 0 18px rgba(0, 240, 255, 0.35);
}
.v2-hero-note {
  margin: 22px auto 0;
  font-size: 0.92rem;
  color: var(--fg-3);
}
.v2-hero-note a {
  color: var(--c-cyan);
  text-decoration: none;
  font-weight: 600;
}
.v2-hero-note a:hover { text-decoration: underline; }

/* Mid-page nudge to the contact form: one button, centred under a section.
   Used between the homepage's bigger sections. */
.v2-inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 22px;
  margin-top: clamp(36px, 5vw, 56px);
  text-align: center;
}

/* Per-service "Get a quote" beside the Explore link in the homepage story */
.v2-story-copy .v2-story-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 22px;
}
.v2-story-copy .v2-story-links .link-arrow { margin-top: 0; }
.v2-story-quote {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fg-2);
  text-decoration: none;
  border-bottom: 1px solid var(--bd-strong);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.v2-story-quote:hover { color: var(--c-cyan); border-color: var(--c-cyan); }
.v2-specialty-video--stills { background: var(--bg-2); }
.v2-specialty-stills {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.v2-specialty-stills img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(112%) contrast(105%);
}
.v2-package.pk-cyan::before   { background: linear-gradient(90deg, #00f0ff, #7a42ff); }
.v2-package.pk-violet::before { background: linear-gradient(90deg, #7a42ff, #ff00f0); }
.logo-hero-names {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.v2-cta-phone {
  margin: 22px 0 0;
  font-size: 0.95rem;
  color: var(--fg-3);
}
.v2-cta-phone a {
  color: var(--c-cyan);
  text-decoration: none;
  font-weight: 600;
}
.v2-cta-phone a:hover { text-decoration: underline; }
.v2-footer-phone { margin-top: 10px !important; }
.v2-footer-phone a {
  color: var(--c-cyan);
  text-decoration: none;
  font-weight: 600;
}
.v2-footer-phone a:hover { text-decoration: underline; }
.v2-contact-phone {
  margin: 20px 0 0;
  font-size: 0.92rem;
  color: var(--fg-3);
  text-align: center;
}
.v2-contact-phone a {
  color: var(--c-cyan);
  text-decoration: none;
  font-weight: 600;
}
.v2-contact-phone a:hover { text-decoration: underline; }
.v2-price-strip {
  margin-top: clamp(26px, 3.4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px clamp(22px, 3.4vw, 44px);
  padding: clamp(16px, 2.2vw, 22px) clamp(20px, 3vw, 34px);
  border: 1px solid var(--bd-white);
  border-radius: var(--r-lg);
  background: var(--bg-2);
}
.v2-price-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.v2-price-item .amt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  letter-spacing: -0.02em;
  color: #fff;
}
.v2-price-item .amt small {
  font-size: 0.68em;
  font-weight: 600;
  color: var(--fg-2);
}
.v2-price-item .lbl {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.v2-price-cta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--c-cyan);
  text-decoration: none;
  white-space: nowrap;
}
.v2-price-cta:hover { text-decoration: underline; color: var(--c-cyan); }
.v2-story {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
/* The stage is pinned as a full-height column below the nav and centres
   the frame in it, so a short clip sits mid-screen instead of at the top. */
.v2-story-stage {
  position: sticky;
  top: 88px;
  height: calc(100vh - 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: start;
  /* The stage's empty top half overlaps the heading (see the negative
     margin v2.js sets on .v2-story); only the frame should take clicks. */
  pointer-events: none;
}
.v2-story-frame { pointer-events: auto; }
/* The frame is a link to the service on show: a clear hover so it reads as one. */
a.v2-story-frame { display: block; color: inherit; text-decoration: none; cursor: pointer; }
a.v2-story-frame:hover,
a.v2-story-frame:focus-visible { border-color: var(--c-cyan); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 60px rgba(0, 240, 255, 0.28); }
.v2-story-inline-link { display: none; }
/* The frame takes the true shape of whichever clip is on (data-ar on each
   .v2-story-media, copied to --story-ar by v2.js), so nothing is cropped.
   Wide media fills the column; tall media is capped by height and narrows. */
.v2-story-frame {
  --story-ar: 1.7778;
  --story-hmax: min(calc(100vh - 220px), 620px);
  position: relative;
  width: min(100%, calc(var(--story-hmax) * var(--story-ar)));
  aspect-ratio: var(--story-ar);
  margin-inline: auto;
  transition: width 0.6s var(--ease-out), aspect-ratio 0.6s var(--ease-out);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--bd-strong);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4),
              0 0 50px rgba(0, 240, 255, 0.12);
  isolation: isolate;
}
.v2-story-media {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s var(--ease-out);
  will-change: opacity;
}
.v2-story-media.is-on { opacity: 1; z-index: 1; }
.v2-story-media > video,
.v2-story-media > img,
.v2-story-media .v2-rotator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* The frame already matches each clip's shape, so contain shows the whole
     thing; it only differs from cover for a poster of another shape. */
  object-fit: contain;
  filter: saturate(112%) contrast(104%);
}
.v2-story-media .v2-rotator img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.v2-story-media .v2-rotator img.is-active { opacity: 1; }
.v2-story-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(33, 33, 44, 0.35) 0%, transparent 28%),
    linear-gradient(0deg, rgba(20, 20, 30, 0.88) 0%, rgba(20, 20, 30, 0.45) 26%, transparent 46%);
}
.v2-story-caption {
  /* Display only (the frame link around it takes clicks), so the pointer
     passes through to the media, e.g. the web panel's hover scroll. */
  pointer-events: none;
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v2-story-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.3vw, 2.35rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
  max-width: 14ch;
}
.v2-story-name.is-swapping {
  animation: storyNameIn 0.55s var(--ease-out);
}
@keyframes storyNameIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0px); }
}
.v2-story-progress {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.v2-story-progress b {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--grad);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.7);
  transition: width 0.6s var(--ease-out);
}
@property --story-a { syntax: '<color>'; inherits: true; initial-value: #00f0ff; }
@property --story-b { syntax: '<color>'; inherits: true; initial-value: #ff00f0; }
@property --story-c { syntax: '<color>'; inherits: true; initial-value: #7a42ff; }
@property --story-x { syntax: '<percentage>'; inherits: true; initial-value: 10%; }
@property --story-y { syntax: '<percentage>'; inherits: true; initial-value: 20%; }
.v2-section--story {
  --story-a: #00f0ff;   
  --story-b: #ff00f0;
  --story-c: #7a42ff;
  --story-x: 10%;
  --story-y: 20%;
  --story-ink: var(--story-a);
}
.v2-section--story::before { display: none; }
.v2-story-backdrop {
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: -100vh;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
  background:
    radial-gradient(64vw 60vh at var(--story-x) var(--story-y), var(--story-a) 0%, transparent 62%),
    radial-gradient(70vw 64vh at calc(100% - var(--story-x)) calc(100% - var(--story-y)), var(--story-b) 0%, transparent 62%),
    radial-gradient(52vw 50vh at 50% 100%, var(--story-c) 0%, transparent 60%);
  filter: saturate(1.15);
  /* Two masks, intersected: the usual soft top and bottom, and a fade that
     always reaches transparent at --story-end (set in v2.js: where the
     section's bottom edge sits in the window), so the glow is gone before the
     section clips it, however close to the top that edge is. */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 28%, #000 78%, transparent 100%),
    linear-gradient(180deg, #000 calc(var(--story-end, 100vh) - 30vh), transparent var(--story-end, 100vh));
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 28%, #000 78%, transparent 100%),
    linear-gradient(180deg, #000 calc(var(--story-end, 100vh) - 30vh), transparent var(--story-end, 100vh));
  mask-composite: intersect;
  transition: --story-a 1.4s ease, --story-b 1.4s ease, --story-c 1.4s ease,
              --story-x 1.4s ease, --story-y 1.4s ease;
}
.v2-section--story[data-story-theme="video"]      { --story-a: #7a42ff; --story-b: #00f0ff; --story-c: #ff00f0; --story-x: 24%; --story-y: 12%;
                                                    --story-ink: #00f0ff; }
.v2-section--story[data-story-theme="drone"]      { --story-a: #00f0ff; --story-b: #2b6bff; --story-c: #39ff88; --story-x: 6%;  --story-y: 30%; }
.v2-section--story[data-story-theme="photo"]      { --story-a: #7a42ff; --story-b: #9aa0a6; --story-c: #ff7a1a; --story-x: 30%; --story-y: 18%; }
.v2-section--story[data-story-theme="social"]     { --story-a: #ff2d6f; --story-b: #7a42ff; --story-c: #00f0ff; --story-x: 14%; --story-y: 26%;
                                                    --story-ink: #ff4d84; }
.v2-section--story[data-story-theme="billboards"] { --story-a: #ffe600; --story-b: #ff7a1a; --story-c: #ff00f0; --story-x: 34%; --story-y: 10%; }
.v2-section--story[data-story-theme="media"]      { --story-a: #0f8a4a; --story-b: #00f0ff; --story-c: #2b6bff; --story-x: 8%;  --story-y: 34%; }
.v2-section--story[data-story-theme="web"]        { --story-a: #ff00f0; --story-b: #00f0ff; --story-c: #ff2d6f; --story-x: 20%; --story-y: 16%; }
.v2-story-steps { display: flex; flex-direction: column; }
/* Each block is as tall as its own media on the stage (v2.js sets the
   min-height from the clip's data-ar), with the copy centred in it, so one
   block of scrolling equals one frame and the text sits beside the media. */
.v2-story-step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 46vh;
  padding: 28px 0;
  border-bottom: 1px solid var(--bd-white);
  opacity: 0.38;
  transition: opacity 0.5s ease;
}
.v2-story-step:last-child { border-bottom: 0; }
.v2-story-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.v2-story-step.is-on { opacity: 1; }
.v2-story-step h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 16px;
  color: #fff;
}
.v2-story-step.is-on h3 {
  background: linear-gradient(120deg, var(--story-a) 0%, var(--story-b) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.v2-story-copy > p {
  margin: 0;
  max-width: 50ch;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.6;
  color: var(--fg-2);
}
.v2-story-copy > p a {
  color: var(--story-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--story-ink) 40%, transparent);
  text-underline-offset: 3px;
}
.v2-story-copy > p a:hover { text-decoration-color: var(--story-ink); }
.v2-story-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  max-width: 50ch;
}
.v2-story-list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.98rem;
  color: var(--fg-2);
  line-height: 1.45;
}
.v2-story-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: var(--story-ink);
  box-shadow: 0 0 8px color-mix(in srgb, var(--story-ink) 70%, transparent);
}
.v2-story-step .link-arrow {
  position: relative;
  z-index: 0;
  margin-top: 22px;
  align-self: flex-start;
  /* Long labels can wrap on narrow screens: keep both lines centered. */
  justify-content: center;
  text-align: center;
  padding: 10px 20px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  border: 2px solid #fff;
  border-radius: 999px;
  transition: gap 0.3s ease, border-color 0.3s ease;
}
.v2-story-step .link-arrow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--story-a) 0%, var(--story-b) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.v2-story-step .link-arrow:hover,
.v2-story-step .link-arrow:focus-visible {
  gap: 8px;
  color: #fff;
  border-color: transparent;
}
.v2-story-step .link-arrow:hover::before,
.v2-story-step .link-arrow:focus-visible::before {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .v2-story-media,
  .v2-story-step,
  .v2-story-progress b { transition: none; }
  .v2-story-name.is-swapping { animation: none; }
  .v2-story-backdrop { transition: none; }
}
@media (max-width: 899.98px), (max-height: 600px) {
  .v2-story { display: block; }
  .v2-story-stage { display: none; }
  .v2-story-step {
    min-height: 0;
    opacity: 1;
    padding: 32px 0;
  }
  .v2-story-step:first-child { min-height: 0; padding-top: 0; }
  .v2-story-copy { position: static; display: block; }
  .v2-story-step[data-story-step="commercial"] { --story-a: #00f0ff; --story-b: #ff00f0; }
  .v2-story-step[data-story-step="video"]      { --story-a: #7a42ff; --story-b: #00f0ff; --story-ink: #00f0ff; }
  .v2-story-step[data-story-step="drone"]      { --story-a: #00f0ff; --story-b: #2b6bff; }
  .v2-story-step[data-story-step="photo"]      { --story-a: #7a42ff; --story-b: #9aa0a6; }
  .v2-story-step[data-story-step="social"]     { --story-a: #ff2d6f; --story-b: #7a42ff; --story-ink: #ff4d84; }
  .v2-story-step[data-story-step="billboards"] { --story-a: #ffe600; --story-b: #ff7a1a; }
  .v2-story-step[data-story-step="media"]      { --story-a: #0f8a4a; --story-b: #00f0ff; }
  .v2-story-step[data-story-step="web"]        { --story-a: #ff00f0; --story-b: #00f0ff; }
  .v2-story-step h3 {
    background: linear-gradient(120deg, var(--story-a) 0%, var(--story-b) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  /* Each step shows its own media (v2.js sets its shape from data-ar). */
  .v2-story-inline-link { display: block; margin-bottom: 18px; }
  .v2-story-inline-link .v2-story-media {
    position: relative;
    inset: auto;
    opacity: 1;
    margin-inline: auto;
    overflow: hidden;
    border-radius: var(--r-lg);
    border: 1px solid var(--bd-strong);
    background: var(--bg-3);
  }
  /* Stacked layout: each panel's title sits centered above its image.
     The copy wrapper drops out of layout so the h3 can be reordered. */
  .v2-story-step .v2-story-copy { display: contents; }
  .v2-story-step h3 { order: -1; text-align: center; }
}

/* "See all our X work" under each service page's work heading. */
.v2 .v2-see-all-work {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: transform 0.25s var(--ease-out), color 0.2s ease;
}
.v2 .v2-see-all-work:hover,
.v2 .v2-see-all-work:focus-visible { color: var(--c-cyan); transform: scale(1.02); text-decoration: underline; }

/* ---------- Our Work: compact discipline heads + jump links ----------
   The page is meant to be mostly media, so section heads stay one line:
   a modest title on the left, the matching service page on the right. */
.v2-work-section { padding: clamp(36px, 4vw, 60px) 0; }
/* Page title at the same scale as the service-page hero headings. */
.v2 .v2-work-title { font-size: clamp(2.6rem, 7.5vw, 5.8rem); line-height: 0.95; }
.v2-work-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin-bottom: 22px;
}
.v2-work-head h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.v2-work-head a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-cyan);
  text-decoration: none;
}
.v2-work-head a:hover { text-decoration: underline; }
/* Our Work: each category opens like a chapter, centred with a larger title.
   (Industry pages keep the compact row.) */
.v2-work-head--center {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.v2-work-head--center h2 {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  letter-spacing: -0.015em;
  line-height: 1.05;
}
/* ---------- Our Work: case studies ----------
   One section per client (rlmhome/case_studies.py): a cover on one side and
   the story on the other (challenge, what we did, results), alternating.
   The work itself stays in the galleries further down. */
.v2-case { padding: clamp(48px, 6vw, 96px) 0; }
/* The chapter strip runs straight into the first case study. */
.v2-work-intro:has(+ .v2-case-studies) { padding-bottom: clamp(24px, 3vw, 40px); }
.v2-case-studies > .v2-case:first-child { padding-top: 0; }
.v2-case-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.v2-case--flip .v2-case-cover { order: 2; }
/* Covers keep their own shape: cropping cuts off on-screen text in the spots. */
.v2-case-cover {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--bd-white);
  border-radius: var(--r);
  background: #000;
}
.v2-case-cover img,
.v2-case-cover video { display: block; width: 100%; height: auto; }
/* Vertical pieces: capped height, centred in their column. */
.v2-case-cover.is-tall { justify-self: center; width: auto; }
.v2-case-cover.is-tall img,
.v2-case-cover.is-tall video { width: auto; max-width: 100%; max-height: min(78vh, 720px); }
/* Client logo heads the whole section, centred, flattened to white for the dark page. */
.v2 .v2-case-logo {
  display: flex;
  justify-content: center;
  margin: 0 0 clamp(36px, 5vw, 64px);
  line-height: 0;
}
.v2-case-logo img {
  display: block;
  width: auto;
  height: 96px;
  max-width: min(520px, 100%);
  object-fit: contain;
  filter: brightness(0) invert(1);
}
/* Optical sizing: the logos have very different shapes. */
.v2-case-logo img[data-logo="hkq"] { height: 168px; }
.v2-case-logo img[data-logo="morongo"] { height: 88px; }
.v2-case-logo img[data-logo="shingleme"] { height: 80px; }
.v2-case-logo img[data-logo="fidelity"] { height: 104px; }
@media (max-width: 560px) {
  .v2-case-logo img { height: 64px; }
  .v2-case-logo img[data-logo="hkq"] { height: 120px; }
  .v2-case-logo img[data-logo="morongo"],
  .v2-case-logo img[data-logo="shingleme"] { height: 52px; }
  .v2-case-logo img[data-logo="fidelity"] { height: 68px; }
}
.v2-case-headline {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.v2-case-text { margin: 0 0 16px; font-size: 1rem; line-height: 1.65; color: var(--fg-2); max-width: 52ch; }
.v2-case-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  margin: 28px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--bd-white);
}
.v2-case-metrics div { display: flex; flex-direction: column-reverse; gap: 6px; }
.v2-case-metrics dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.v2-case-metrics dt { font-size: 0.85rem; color: var(--fg-3); }
/* Local-only empty slots for content that hasn't been supplied yet. */
.v2-case-pending {
  min-height: 76px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  color: var(--fg-4);
}
.v2-case-pending--headline { min-height: 96px; margin-bottom: 24px; }
.v2-case-pending--metrics { min-height: 64px; margin: 28px 0 0; }
@media (max-width: 900px) {
  .v2-case-grid { grid-template-columns: 1fr; }
  .v2-case--flip .v2-case-cover { order: 0; }
}
/* Under each Our Work gallery: a quiet link to the contact form with that
   service pre-ticked (?interest=). */
.v2-work-reach { margin: clamp(22px, 2.6vw, 32px) 0 0; text-align: center; }
.v2-work-reach a {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg-3);
  text-decoration: none;
  transition: color 0.2s ease;
}
.v2-work-reach a:hover,
.v2-work-reach a:focus-visible { color: var(--c-cyan); text-decoration: underline; text-underline-offset: 5px; }
/* Chapter strip: thumbnail and title per section, linking down the page. */
/* ---------- Our Work section bar ----------
   Sticks just under the fixed nav for the whole page (it's a direct child of
   <main>, so nothing ends its sticky run early). Grouped and color-coded like
   the Our Work dropdown; v2.js marks the section on screen with .is-active.
   --nav-h is the nav's height once scrolled (it shrinks after 40px). */
.v2-work-bar {
  --nav-h: 84px;
  position: sticky;
  top: var(--nav-h);
  z-index: 1077;           /* over the nav's fade (1075), under the nav (1080) */
  margin: 0 0 clamp(8px, 2vw, 24px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--bd-white);
  border-bottom: 1px solid var(--bd-white);
}
@media (max-width: 1200px) and (min-width: 901px) { .v2-work-bar { --nav-h: 78px; } }
@media (max-width: 900px) { .v2-work-bar { --nav-h: 74px; } }
.v2-work-bar-inner { max-width: 1480px; margin: 0 auto; padding: 0 20px; }
.v2-work-bar-track {
  position: relative;      /* links' offsetLeft is measured from here (v2.js) */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  justify-content: safe center;   /* centered when it fits, else scrolls from the start */
  gap: 2px;
  padding: 9px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.v2-work-bar-track::-webkit-scrollbar { display: none; }
.v2-work-bar [data-group="production"]  { --bar-acc: var(--brand-orange); }
.v2-work-bar [data-group="web"]         { --bar-acc: var(--brand-green); }
.v2-work-bar [data-group="advertising"] { --bar-acc: var(--brand-purple); }
.v2-work-bar-label {
  flex: 0 0 auto;
  margin: 0 4px 0 18px;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bar-acc);
}
.v2-work-bar-track > :first-child { margin-left: 0; }
.v2 .v2-work-bar-link {
  flex: 0 0 auto;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.78);
  transition: background 0.2s ease, color 0.2s ease;
}
.v2 .v2-work-bar-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.v2-work-bar-icon {
  flex: 0 0 auto;
  display: inline-flex;
  justify-content: center;
  width: 18px;
  color: var(--bar-acc, var(--c-cyan));
  font-size: 0.85rem;
}
.v2-work-bar-icon .icon-drone { width: 17px; height: 17px; }
.v2 .v2-work-bar-link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.v2 .v2-work-bar-link.is-active {
  color: #fff;
  background: color-mix(in srgb, var(--bar-acc, var(--c-cyan)) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bar-acc, var(--c-cyan)) 45%, transparent);
}
/* Sections land just under the nav and the bar. */
.v2-section.v2-work-section[id],
.v2-case-studies { scroll-margin-top: calc(var(--work-bar-offset, 84px) + 46px); }
@media (max-width: 1200px) and (min-width: 901px) { .v2-section.v2-work-section[id], .v2-case-studies { --work-bar-offset: 78px; } }
@media (max-width: 900px) { .v2-section.v2-work-section[id], .v2-case-studies { --work-bar-offset: 74px; } }
/* Up to 1100px: a bar under the nav naming the current section; tapping it
   drops the grouped list down below it (.is-open, toggled by v2.js). */
.v2-work-bar-toggle { display: none; }
/* The phone/tablet bar sticks just below the logo, which hangs ~20px below
   the nav bar (logo bottom: 94px up to 900px wide, 100px above). */
@media (max-width: 1100px) {
  .v2-work-bar { top: 108px; }
  .v2-section.v2-work-section[id], .v2-case-studies { scroll-margin-top: 162px; }
}
@media (max-width: 900px) {
  .v2-work-bar { top: 102px; }
  .v2-section.v2-work-section[id], .v2-case-studies { scroll-margin-top: 156px; }
}
@media (max-width: 1100px) {
  .v2-work-bar-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 13px 20px;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .v2-work-bar-current { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
  .v2-work-bar-toggle .chevron {
    flex: 0 0 auto;
    width: 9px; height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.25s var(--ease-out);
  }
  .v2-work-bar.is-open .v2-work-bar-toggle .chevron { transform: translateY(2px) rotate(-135deg); }
  .v2-work-bar-inner {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    max-width: none;
    max-height: calc(100vh - 170px);
    overflow-y: auto;
    padding: 6px 12px 16px;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--bd-white);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  }
  .v2-work-bar.is-open .v2-work-bar-inner { display: block; }
  .v2-work-bar-track {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    overflow: visible;
  }
  .v2-work-bar-label { margin: 14px 12px 6px; }
  .v2-work-bar-track > :first-child { margin: 6px 12px 6px; }
  .v2 .v2-work-bar-link { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; white-space: normal; }
}
/* Wider screens: a sidebar beside the work, sticky below the nav. The work
   sections keep their own containers inside the right-hand column. */
@media (min-width: 1101px) {
  .v2-work-layout {
    display: grid;
    grid-template-columns: 228px minmax(0, 1fr);
    gap: clamp(12px, 2vw, 32px);
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 clamp(16px, 2vw, 32px);
  }
  /* The title spans both columns; the sidebar starts level with it (the
     intro's top padding) in the empty space to its left, and the work runs
     in the right-hand column below. */
  .v2-work-intro { grid-column: 1 / -1; grid-row: 1; }
  .v2-work-main { grid-column: 2; grid-row: 2; }
  .v2-work-bar {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: sticky;
    z-index: 2;
    align-self: start;
    /* Sticks centered in the window below the nav (--side-h is its own
       height, set by v2.js), but never closer than 28px under the nav. */
    top: max(calc(var(--nav-h) + 28px),
             calc((100vh + var(--nav-h)) / 2 - var(--side-h, 380px) / 2));
    margin: clamp(140px, 18vw, 220px) 0 0;
    background: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border: 0;
  }
  .v2-work-bar-inner { padding: 0; max-width: none; }
  .v2-work-bar-track {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    padding: 0;
    overflow: visible;
  }
  .v2-work-bar-label { margin: 18px 12px 6px; }
  /* (The strip zeroes the first item's left margin; the sidebar keeps it,
     so the first group title lines up with the others.) */
  .v2-work-bar-track > :first-child { margin: 0 12px 6px; }
  .v2 .v2-work-bar-link { display: flex; gap: 10px; padding: 8px 12px; border-radius: 10px; white-space: normal; }
  .v2-section.v2-work-section[id],
  .v2-case-studies { scroll-margin-top: calc(var(--work-bar-offset, 84px) - 8px); }
}
/* Phones: every gallery is one item wide, so each piece is big enough to see. */
@media (max-width: 560px) {
  .v2-work-section .v2-gallery:not(.v2-gallery--wide) { columns: 1; }
  .v2-work-section .v2-gallery:not(.v2-gallery--wide) figure { margin-bottom: 12px; }
}

/* ---------- Homepage: industry / service link block ----------
   Brand heading and chips as before, but the two chip rails sit side by
   side with smaller pills, so the block is about a quarter shorter. */
.v2-seo-index { padding: clamp(44px, 5vw, 72px) 0; }
.v2-seo-index .v2-section-head { margin-bottom: 28px; }
.v2-seo-index-cols {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 28px 48px;
  align-items: start;
}
.v2.v2 .v2-seo-index .seo-county + .seo-county { margin-top: 0; }
.v2 .v2-seo-index .seo-chips { gap: 8px; margin-top: 14px; }
.v2 .v2-seo-index .seo-chip { padding: 6px 13px; font-size: 0.8rem; }
@media (max-width: 860px) {
  .v2-seo-index-cols { grid-template-columns: 1fr; }
}

/* ---------- Justified galleries ----------
   SITE RULE: every media gallery uses this layout, so no gallery ever ends
   on a ragged or left-hanging last row. New galleries: add the
   v2-gallery--justified class with data-row-height and --row-h, and give each
   item its --ar (the |aspect filter in asset_tags reads it from the file).

   Rows of mixed-shape media, every item at its own aspect ratio (--ar, set
   on each figure), each row scaled to fill the width exactly so the bottoms
   line up; the last row keeps its natural height and sits centered. v2.js
   sizes the items from data-row-height; before it runs, the --row-h width
   below is already close. */
.v2 .v2-gallery.v2-gallery--justified {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  columns: auto;
}
.v2 .v2-work-section .v2-gallery.v2-gallery--justified > *,
.v2 .v2-gallery.v2-gallery--justified > * {
  flex: 0 0 auto;
  width: calc(var(--ar, 1) * var(--row-h, 260px));
  max-width: 100%;
  margin: 0;
}
.v2 .v2-gallery.v2-gallery--justified > a > figure { margin: 0; }
.v2 .v2-gallery.v2-gallery--justified img,
.v2 .v2-gallery.v2-gallery--justified video {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar, auto);
  object-fit: cover;
}
/* Phones: one item per row at full width (v2.js leaves widths alone here). */
@media (max-width: 560px) {
  .v2 .v2-gallery.v2-gallery--justified { gap: 12px; }
  .v2 .v2-work-section .v2-gallery.v2-gallery--justified > *,
  .v2 .v2-gallery.v2-gallery--justified > * { width: 100%; }
}

/* Decorative loops pause while scrolled out of view (v2.js toggles this),
   so nothing animates where nobody can see it. */
.v2-anim-off,
.v2-anim-off *,
.v2-anim-off::before,
.v2-anim-off::after { animation-play-state: paused !important; }

/* Ryan's title, between his name and the pull quote on the homepage. */
.v2 :is(h1, h2):has(+ .v2-meet-role) { margin-bottom: 0; }
.v2 .v2-meet-role {
  margin: 16px 0 0;
  line-height: 1.2;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--c-cyan);
}

/* Meet Ryan: on phones the two buttons stack, so center them in the card. */
@media (max-width: 640px) {
  .v2-meet-buttons { justify-content: center; }
}
/* Homepage service panels on phones: the pill and "Get a quote" stack
   centered under the list, and the pill text steps down so long service
   names fit on one line. */
@media (max-width: 640px) {
  .v2-story-copy .v2-story-links {
    flex-direction: column;
    justify-content: center;
    gap: 14px;
  }
  .v2-story-step .v2-story-links .link-arrow {
    align-self: center;
    font-size: 0.82rem;
    padding: 12px 20px;
  }
}
/* Heroes on phones: headline, paragraph and the stacked buttons all centered. */
@media (max-width: 640px) {
  .v2-svc-hero .v2-svc-hero-content { text-align: center; }
  .v2-svc-hero .v2-svc-hero-sub { margin-left: auto; margin-right: auto; }
  .v2-svc-hero .v2-svc-hero-cta-row { justify-content: center; }
}
/* Service and industry pages on phones: section headings centered, with the
   copy and links under them, so each stacked section reads down the middle. */
@media (max-width: 640px) {
  .v2-svc-feature-text,
  .v2-specialty-text { align-items: center; text-align: center; }
  .v2-svc-feature-text p,
  .v2-specialty-text p { margin-left: auto; margin-right: auto; }
  .v2-specialty-chips { justify-content: center; }
  .v2-work-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .v2-section-head:not(.center) {
    align-items: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}
/* "What comes next" card on phones: sentence and link stacked and centered. */
@media (max-width: 640px) {
  .v2-next {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}
/* Logo band link on phones (after its base rule, which would otherwise win):
   a step below the band title so the two read as heading and link. */
@media (max-width: 640px) {
  .v2 .v2-logo-band-cta a,
  .v2 .v2-logo-band-cta a:link,
  .v2 .v2-logo-band-cta a:visited { font-size: 3.5vw; letter-spacing: 0.03em; }
}

/* ---------- Website tiles: hover scrolls down the full page ----------
   The tile image is the capture's first screen. v2.js lays a window over it
   (same corners, same hover zoom) holding the whole capture, identical at
   the top, and slides it up. Mouse only; touch keeps the still. */
.v2-site-scroll {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--bd-strong);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.5s var(--ease-out);
}
.v2-gallery figure:hover .v2-site-scroll { transform: scale(1.015); }
/* On instantly (it matches the tile at the top); off with a fade. */
.v2-site-scroll.is-on { opacity: 1; transition: transform 0.5s var(--ease-out); }
/* In the homepage story panel the frame already rounds and clips; match the
   panel image's color treatment so nothing shifts when it takes over. */
.v2-story-media .v2-site-scroll { border: 0; border-radius: 0; filter: saturate(112%) contrast(104%); }
.v2-site-scroll-page {
  width: 100%;
  background-size: 100% auto;
  background-repeat: no-repeat;
  will-change: transform;
}

/* ReviewsUp badge (third-party iframe, injected at z-index 8000): keep it
   above the page but under the nav (1080) and mobile menu (1100). */
.ru-namespace iframe.floating-widget[id^="ru-widget-iframe"] { z-index: 1060 !important; }

/* ---------- Hero: mosaic of client website heroes (partials/site_wall.html) ----------
   Seven tilted columns of the sites' first screens, still like every other
   hero background, dimmed so the headline reads on top. Alternate columns
   sit offset so the tiles don't line up in rows. */
.v2-site-wall {
  position: absolute;
  inset: -30% -12%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 26px;
  transform: rotate(-9deg);
  filter: brightness(0.5) saturate(0.95);
}
.v2-site-wall-col {
  flex: 0 0 clamp(190px, 18vw, 420px);
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.v2-site-wall-col:nth-child(even) { margin-top: -90px; }
/* (.v2-svc-hero-bg img makes hero images absolute and full-bleed; the wall's
   images are ordinary blocks stacked in their columns.) */
.v2-svc-hero-bg .v2-site-wall img,
.v2-site-wall img {
  position: static;
  inset: auto;
  object-fit: fill;
  filter: none;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
@media (max-width: 640px) {
  .v2-site-wall { gap: 14px; inset: -20% -40%; }
  .v2-site-wall-col { flex-basis: 150px; gap: 14px; }
  .v2-site-wall-col:nth-child(even) { margin-top: -45px; }
}

/* Touch screens can't hover, so the client pills on work galleries (which
   fade in on hover with a mouse) are always shown there. */
@media (hover: none) {
  .v2-gallery.v2-gallery--overlay-captions figcaption,
  .v2-gallery-split figcaption,
  .v2-svc-feature-media .v2-media-pill {
    opacity: 1;
    transform: none;
  }
}

/* Touch screens: the logo band's "See what we've done for them" link shows
   its underline all the time (with a mouse it appears on hover), so it reads
   as tappable rather than as a second heading. */
@media (hover: none) {
  .v2 .v2-logo-band-cta a,
  .v2 .v2-logo-band-cta a:link,
  .v2 .v2-logo-band-cta a:visited {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
  }
}