/* ============================================================
RLM V3 — studiocity.com inspired
Dark backbone + ONE accent system (cyan UI / pink highlight)
Big tight Inter typography. Real imagery does the lifting.
============================================================ */
/* ---------- Tokens ---------- */
:root {
/* Surfaces */
--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);
/* Single-accent system */
--c-cyan: #00f0ff; /* UI accent — borders/icons/focus/primary buttons */
--c-pink: #ff00f0; /* Highlight — gradient/featured/glow */
--c-pink-soft: #ff4dff;
/* Cyan-tinted borders (Studio City uses red-tinted; we use cyan) */
--bd: rgba(0, 240, 255, 0.14);
--bd-strong: rgba(0, 240, 255, 0.28);
--bd-white: rgba(255, 255, 255, 0.13);
/* Gradients (used sparingly — key headlines, primary buttons) */
--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));
/* Typography */
--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);
}
/* ---------- Base ---------- */
html.v2 { scroll-behavior: smooth; }
body.v2 {
margin: 0;
/* Lifted charcoal ground with a fixed cyan/pink ambient wash so the page
reads lit from somewhere rather than pitch black. */
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%),
var(--bg);
background-attachment: fixed;
background-repeat: no-repeat;
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; }
/* ---------- Type ---------- */
.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);
}
/* studiocity-style sizes: h1 6.58rem desktop, h2 6rem */
.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; }
/* Studio City uses ALL CAPS labels everywhere for category */
.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);
/* Heavy stacked text-shadow gives a dark outline + glow so cyan reads on any background */
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);
}
/* Cyan→pink gradient on key words (the one signature trick) */
.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;
animation: gradShift 8s ease-in-out infinite;
}
@keyframes gradShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* "Ryan Leckey" font cycler — JS swaps .font-N classes every ~3s.
Five visually distinct typefaces from different categories, each with its own
static font-size adjustment so they all read at similar visual scale. No
CSS animation interpolation = no jitter. */
.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;
}
/* "Meet" wordmark — smaller than the cycling "Ryan Leckey" line, italic */
.v2 .meet-word {
display: inline-block;
font-size: 0.45em;
font-style: italic;
font-weight: 600;
letter-spacing: -0.03em;
vertical-align: baseline;
}
/* Final resting state — Gill Sans Ultra Bold with system-font fallbacks */
.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); }
/* ---------- Buttons (cyan-first) ---------- */
.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); }
/* Primary — solid cyan; pure black text in every state (incl :visited/:focus) */
.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);
}
/* Featured — pink glow */
.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);
}
/* Ghost — outline */
.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);
}
/* Plain text link with cyan arrow */
.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; }
/* ---------- Reveal on scroll ---------- */
.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(0); }
.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; }
/* ============================================================
FULL-WIDTH NAV BAR
Spans the whole viewport with a taller profile so the logo has
room to breathe. Glassy over the hero video at rest, solidifies
once the page scrolls (.is-shrunk) to keep the links legible.
============================================================ */
.v2-nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1080;
display: flex;
align-items: center;
gap: 6px;
/* Horizontal padding centers the nav content on the same ~1320px column
as .v2-container, so the logo and CTA line up with the page content
instead of hugging the viewport edges. */
padding: 8px max(calc((100vw - 1320px) / 2), 28px);
/* No backdrop-filter here: a blurred ancestor becomes the backdrop root,
which silently breaks the dropdowns' own backdrop blur. */
background: transparent;
transition: padding 0.4s var(--ease-out), opacity 0.35s ease;
}
/* Scrim instead of a bar: the dark ground extends past the nav's bottom
edge and fades out, so the header blends into the page instead of
ending on a hard line. */
.v2-nav::before {
content: '';
position: absolute;
inset: 0 0 -56px;
z-index: -1;
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;
}
.v2-nav.is-shrunk {
padding-top: 6px;
padding-bottom: 6px;
}
/* While the nav is in use, lift it (and its open dropdowns) back above the
banner so menus never render underneath the pill. */
.v2-nav:hover,
.v2-nav:focus-within {
z-index: 1090;
}
.v2-nav.is-shrunk::before {
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-brand {
position: relative;
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 img {
width: 140px; height: 140px; object-fit: contain;
/* Big mark on a slim bar: hangs DOWNWARD over the hero (never upward,
which would clip at the viewport top). */
margin: -6px 0 -44px;
/* The glow cycles through the neon palette on a diagonal instead of
sitting on one blue. */
filter: drop-shadow(-7px 7px 12px rgba(0, 240, 255, 0.62));
animation: v2-logo-glow 9s linear 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 {
/* Stays big by hanging below the slim bar, same trick as the default
state, so the bar itself doesn't grow taller. */
width: 110px; height: 110px;
margin: -4px 0 -34px;
}
/* The glow travels the neon palette and its offset swings across the mark
on the diagonal, so the color arrives from one corner and leaves by the
other. Same hues as the rest of the site, no hard steps between them. */
@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 {
display: flex;
align-items: center;
gap: 2px;
margin: 0 auto;
list-style: none;
padding: 0;
}
.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;
cursor: pointer;
}
.v2-nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.v2-nav-link.has-dropdown::after {
content: '';
display: inline-block;
width: 6px; height: 6px;
margin-left: 8px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px);
opacity: 0.7;
transition: transform 0.25s ease;
}
.v2-nav-link.has-dropdown:hover::after { transform: rotate(225deg) translate(-2px, -2px); }
.v2-nav-cta,
.v2-nav-cta:link,
.v2-nav-cta:visited,
.v2-nav-cta:focus,
.v2-nav-cta:active {
display: inline-flex;
align-items: center;
padding: 13px 26px;
font-size: 1.05rem;
font-weight: 800;
background: var(--c-cyan);
color: #000 !important;
border-radius: 999px;
transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease, filter 0.25s ease;
white-space: nowrap;
box-shadow: 0 0 16px rgba(0, 240, 255, 0.4);
}
.v2-nav-cta:hover {
transform: translateY(-1px);
filter: brightness(1.05);
box-shadow: 0 0 26px rgba(0, 240, 255, 0.7);
color: #000;
}
.v2-nav-toggle {
display: none;
background: transparent;
border: 0;
width: 40px; height: 40px;
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: 18px;
height: 2px;
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: -6px; }
.v2-nav-toggle .bars::after { position: absolute; top: 6px; }
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;
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.25s ease, transform 0.25s var(--ease-out);
display: grid;
gap: 2px;
}
.v2-nav-dropdown-wrap { position: relative; }
/* Invisible hover bridge — covers the 12px gap between link and dropdown
so moving the cursor down to a dropdown item doesn't break :hover. */
.v2-nav-dropdown-wrap::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 360px;
max-width: 90vw;
height: 18px;
}
.v2-nav-dropdown-wrap:hover .v2-nav-dropdown,
.v2-nav-dropdown-wrap:focus-within .v2-nav-dropdown {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.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(--c-cyan);
font-size: 0.95rem;
}
.v2-nav-dropdown a:hover { color: #fff; background: rgba(0, 240, 255, 0.10); }
/* ---------- Services mega menu ---------- */
/* The wrap goes static so the panel anchors to the whole nav island and can
span its full width, instead of centering under the "Services" link. */
.v2-nav-dropdown-wrap.has-mega { position: static; }
/* The wrap is static, so its shared hover bridge would anchor to the nav and
stack with every other mega bridge (last one wins all hovers). Kill it and
bridge the gap from each link instead, so each menu owns its own runway. */
.v2-nav-dropdown-wrap.has-mega::after { content: none; }
.v2-nav-dropdown-wrap.has-mega .v2-nav-link { position: relative; }
/* ::before, because ::after already draws the chevron. */
.v2-nav-dropdown-wrap.has-mega .v2-nav-link::before {
content: '';
position: absolute;
top: 100%;
left: -16px;
right: -16px;
height: 56px;
}
.v2-nav-mega {
/* The nav now spans the full viewport, so cap the panel and center it
rather than stretching edge to edge. Panel adjoins the bar (no gap), so
the pointer can never fall through to elements behind on the way down. */
top: calc(100% - 4px);
left: 50%;
right: auto;
width: min(1140px, calc(100vw - 28px));
transform: translateX(-50%) translateY(-8px);
min-width: 0;
padding: 18px;
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"grid"
"foot";
gap: 16px;
}
.v2-nav-dropdown-wrap.has-mega:hover .v2-nav-mega,
.v2-nav-dropdown-wrap.has-mega:focus-within .v2-nav-mega {
transform: translateX(-50%) translateY(0);
}
.v2-mega-grid {
grid-area: grid;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2px 8px;
align-content: start;
}
@media (max-width: 1100px) {
.v2-mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.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);
}
.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 var(--bd-strong);
background: rgba(0, 240, 255, 0.06);
color: var(--c-cyan);
font-size: 1.05rem;
}
.v2-nav-mega .v2-mega-item i { width: auto; }
.v2-mega-text { display: block; min-width: 0; }
.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-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-nav-mega .v2-mega-foot {
grid-area: foot;
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 {
font-family: var(--font-display);
font-weight: 700;
color: var(--c-cyan);
white-space: nowrap;
}
.v2-nav-mega .v2-mega-foot:hover { background: none; color: var(--fg-2); }
@media (max-width: 1100px) {
.v2-nav-mega {
grid-template-columns: 1fr;
grid-template-areas: "grid" "foot";
}
.v2-mega-feature { display: none; }
}
.v2-mobile-menu {
position: fixed;
top: 92px;
left: 16px;
right: 16px;
z-index: 1070;
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);
}
body.v2-menu-open .v2-mobile-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.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 .divider {
height: 1px;
margin: 6px 14px;
background: var(--bd);
}
/* Collapsible Services group in the mobile menu */
.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);
}
.v2-mobile-group-inner a i {
width: 18px;
text-align: center;
color: var(--c-cyan);
font-size: 0.85rem;
margin-right: 6px;
}
/* Mid-size screens: the nav is a single non-wrapping row of nowrap items,
so without this the Contact Us CTA gets pushed past the viewport edge
before the 900px hamburger breakpoint kicks in. */
@media (max-width: 1200px) and (min-width: 901px) {
.v2-nav { padding-left: 16px; padding-right: 16px; }
.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 { display: none; }
.v2-nav-toggle { display: inline-flex; margin-left: auto; }
.v2-nav-brand img {
width: 72px; height: 72px;
}
}
/* ============================================================
FLOATING ANNOUNCEMENT BANNER (Cruise)
Solid orange→pink gradient pill, sits clearly below the nav.
============================================================ */
.v2-banner {
position: fixed;
top: 122px;
left: 50%;
transform: translateX(-50%);
/* Above the nav so its scrim fade never darkens or cuts off the pill. */
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);
/* Bouncy back-ease for the show/hide pop */
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;
}
/* Stowed state — pops up and shrinks out when the page scrolls */
.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; }
}
/* Hide cruise banner when a modal is open so it doesn't cover the modal header */
body.modal-open .v2-banner {
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
/* Scroll progress hairline */
.v2-scroll-progress {
position: fixed;
top: 0; left: 0;
height: 2px;
width: 0;
z-index: 1090;
background: var(--grad);
box-shadow: 0 0 12px var(--c-cyan), 0 0 20px var(--c-pink);
pointer-events: none;
transition: width 0.08s linear;
}
/* ============================================================
SECTIONS & CONTAINER
============================================================ */
.v2-section {
position: relative;
padding: clamp(48px, 5.5vw, 84px) 0;
border-top: 1px solid var(--bd-white);
}
/* In-page links (#services, #one-roof, ...) land under a fixed nav unless
the target reserves room for it. Nav is ~88px shrunk, ~106px at rest. */
.v2-hero[id],
.v2-section[id],
.logo-hero-section[id] { scroll-margin-top: 104px; }
.v2-section.no-border { border-top: 0; }
/* Ambient wash for a section that would otherwise sit on flat black. Same
cyan/magenta pair as the hero and the final CTA, wide and low-opacity so
it reads as light in the room rather than a colored panel. */
.v2-section--glow { overflow: hidden; overflow: clip; }
.v2-section--glow::before {
content: '';
position: absolute;
inset: -10% -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;
}
.v2-section--glow > .v2-container { position: relative; z-index: 2; }
/* Every other section would otherwise sit on flat black, which reads dead
down a long page. Each one gets its own wide, low-opacity neon wash,
painted straight onto the section background rather than a pseudo-element
so nothing here can collide with a section that draws its own ::before.
The pattern rotates every four sections, so no two in a row look alike.
Opt a section out with .no-glow. */
.v2-section:not(.no-glow):not(.v2-section--glow):nth-of-type(4n + 1) {
background-image:
radial-gradient(58vw 62% at 8% 14%, rgba(0, 240, 255, 0.15), transparent 60%),
radial-gradient(52vw 56% at 92% 80%, rgba(255, 0, 240, 0.14), transparent 60%);
}
.v2-section:not(.no-glow):not(.v2-section--glow):nth-of-type(4n + 2) {
background-image:
radial-gradient(54vw 60% at 88% 16%, rgba(122, 66, 255, 0.17), transparent 60%),
radial-gradient(50vw 54% at 10% 84%, rgba(0, 240, 255, 0.13), transparent 60%);
}
.v2-section:not(.no-glow):not(.v2-section--glow):nth-of-type(4n + 3) {
background-image:
radial-gradient(62vw 64% at 50% 6%, rgba(255, 0, 240, 0.15), transparent 62%),
radial-gradient(48vw 52% at 12% 90%, rgba(122, 66, 255, 0.13), transparent 60%);
}
.v2-section:not(.no-glow):not(.v2-section--glow):nth-of-type(4n + 4) {
background-image:
radial-gradient(56vw 60% at 92% 44%, rgba(0, 128, 255, 0.16), transparent 60%),
radial-gradient(50vw 56% at 6% 22%, rgba(255, 0, 240, 0.12), transparent 60%);
}
/* One Roof runs long and the flow tiles are dark by design, so the default
rotation wash (0.13-0.15 alpha) left the whole band reading as a pit.
Stronger neon on all three stops, with the violet pulled up to 72% so it
sits behind the tiles rather than under them, over a ground lifted toward
the tile surface. The lift is a gradient, not a flat color, so it fades
out top and bottom instead of banding against the neighboring sections,
and it stops just short of --bg-2 (#2d2d3b) so the tiles keep their edge. */
#one-roof {
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%);
}
.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-section-head .index {
font-family: var(--font-display);
font-weight: 500;
font-size: 0.85rem;
letter-spacing: 0;
color: var(--c-cyan);
}
/* Section eyebrow row: [— 01 / SERVICES — Built for brands that…] */
.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);
}
/* ============================================================
HERO — text-driven, sizzle reel as quiet backdrop
============================================================ */
.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; }
.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; }
/* Bottom hero strip — meta info, studiocity-style "what we do" line */
.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; }
}
/* ============================================================
MARQUEE (subtle, just service names rolling)
============================================================ */
.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;
/* No flex gap: the separator's symmetric margins own all spacing,
so every item sits exactly centered between its | dividers. */
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(0); }
to { transform: translateX(-50%); }
}
/* ============================================================
SERVICES BILLBOARD — video-backed section header
============================================================ */
/* Outer frame — flush video with cyan border at the outer rounded corners */
.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);
}
/* Inner screen — fits inside the 1px outer border, clips the video to the rounded edges */
.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);
}
/* Cyan corner brackets — sit on the outer frame edges, matching the showcase */
.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); }
/* Tiny meta line top-right: "FEATURED — DRONE REEL" */
.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; }
}
/* ============================================================
SERVICES — image-backed cards in a clean grid
============================================================ */
.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;
/* A step lighter than the page ground plus a stronger edge, so the card
reads as a card instead of black on black. */
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; }
/* Wide cards stay the SAME HEIGHT as the one-column cards: the media band
letterboxes sideways instead of growing taller, so a two-box card reads as
two boxes wide, not as a bigger card. */
.v2-service.span-8 .v2-service-img { aspect-ratio: 32/8; }
.v2-service.span-12 .v2-service-img { aspect-ratio: 48/8; }
/* The web-design card has no photo band: let its content set the height. */
.v2-service.span-12.v2-service-design { aspect-ratio: auto; }
/* Split layout for cards with media: the video sits on top at a fixed
ratio and the text sits BELOW it on solid ground, never on the footage.
Messaging and media stop competing. */
.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;
/* Calm at rest so the row reads as a set; wakes on hover. */
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);
}
/* ---------- Rotator: slow crossfade + Ken Burns zoom ---------- */
.v2-rotator {
position: absolute;
inset: 0;
}
.v2-rotator img {
position: absolute;
inset: 0;
opacity: 0;
/* Resting state IS the zoomed end state: when a frame stops being active
mid-crossfade, it holds its final scale instead of snapping back. The
reset to 1.0 only happens at animation restart, while it's invisible. */
transform: scale(1.09);
transition: opacity 1.4s ease-in-out;
}
.v2-rotator img.is-active {
opacity: 1;
/* Duration matches the rotation interval so the push-in completes exactly
when the next frame takes over. */
animation: v2KenBurns 5s ease-out forwards;
}
@keyframes v2KenBurns {
from { transform: scale(1); }
to { transform: scale(1.09); }
}
/* Alternate the drift origin so consecutive frames don't zoom identically.
Set on the img itself (not just .is-active) so the origin doesn't change
when the class comes off mid-fade. */
.v2-rotator img:nth-child(even) { transform-origin: 65% 35%; }
.v2-rotator img:nth-child(odd) { transform-origin: 35% 65%; }
/* The gradient scrim only exists for overlay text; split cards don't need it. */
.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;
}
/* ============================================================
WEB DESIGN HERO TILE — custom CSS scene (no stock photo)
============================================================ */
.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; }
}
/* ============================================================
SPECIALTY VERTICALS — Hospitality / Casino
Cinematic editorial spread: glass-framed video on one side,
manifesto headline + service chips on the other. Alternating
sides between sections for visual rhythm.
============================================================ */
.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);
}
/* Feature variant: the reel dominates the spread. */
.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 / 10;
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); }
/* Custom video controls — glass pill in the bottom-right of each specialty video */
.v2-vc {
position: absolute;
bottom: 16px;
right: 16px;
z-index: 4;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px;
background: rgba(33, 33, 44, 0.65);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.27);
opacity: 0.85;
transition: opacity 0.3s ease, transform 0.3s var(--ease-out);
}
.v2-specialty-video:hover .v2-vc {
opacity: 1;
transform: translateY(-1px);
}
.v2-vc-btn {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
border-radius: 50%;
color: #fff;
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-out);
padding: 0;
}
.v2-vc-btn:hover {
background: rgba(0, 240, 255, 0.18);
color: var(--c-cyan);
transform: scale(1.06);
}
.v2-vc-btn:focus-visible {
outline: 2px solid var(--c-cyan);
outline-offset: 2px;
}
.v2-vc-btn i { font-size: 0.85rem; }
@media (max-width: 560px) {
.v2-vc { bottom: 10px; right: 10px; padding: 4px; }
.v2-vc-btn { width: 30px; height: 30px; }
.v2-vc-btn i { font-size: 0.78rem; }
}
.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 {
grid-template-columns: 1fr;
}
.v2-specialty--reverse .v2-specialty-video,
.v2-specialty--reverse .v2-specialty-text {
order: initial;
}
.v2-specialty-video { aspect-ratio: 16 / 9; }
}
/* ============================================================
MEET RYAN — clean two-column, no rainbow halo
Photo with cyan hairline ring, big quote, body copy.
============================================================ */
.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;
/* Locked just above the largest content state so font cycling can't reflow */
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 {
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) {
.v2-meet { grid-template-columns: 1fr; }
.v2-meet-photo { max-width: 520px; margin: 0 auto; width: 100%; }
}
/* ============================================================
SHOWCASE — YouTube in cyan frame
============================================================ */
.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); }
/* ============================================================
FIREFLIES (ported from V1, scoped to the showcase section)
============================================================ */
#showcase { isolation: isolate; }
#showcase > .v2-container { position: relative; z-index: 2; }
.v2-firefly-field {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 1;
}
.v2-firefly-field .firefly {
border-radius: 50%;
filter: blur(1px);
opacity: 0;
position: absolute;
}
.v2-firefly-field .firefly-1 { width: 25px; height: 25px; background: #00f0ff; box-shadow: 0 0 80px #00f0ff, 0 0 160px #00f0ff, 0 0 240px #00f0ff; left: 5%; animation: firefly1 120s ease-in-out infinite; filter: blur(12px); }
.v2-firefly-field .firefly-2 { width: 60px; height: 60px; background: #ff6b00; box-shadow: 0 0 150px #ff6b00, 0 0 300px #ff6b00, 0 0 450px #ff6b00; left: 15%; animation: firefly2 150s ease-in-out infinite; filter: blur(25px); }
.v2-firefly-field .firefly-3 { width: 8px; height: 8px; background: #ff00f0; box-shadow: 0 0 40px #ff00f0, 0 0 80px #ff00f0; left: 25%; animation: firefly3 180s ease-in-out infinite; filter: blur(6px); }
.v2-firefly-field .firefly-4 { width: 35px; height: 35px; background: #57ff00; box-shadow: 0 0 120px #57ff00, 0 0 240px #57ff00, 0 0 360px #57ff00; left: 35%; animation: firefly4 135s ease-in-out infinite; filter: blur(18px); }
.v2-firefly-field .firefly-5 { width: 15px; height: 15px; background: #ff0080; box-shadow: 0 0 60px #ff0080, 0 0 120px #ff0080; left: 45%; animation: firefly5 165s ease-in-out infinite; filter: blur(8px); }
.v2-firefly-field .firefly-6 { width: 45px; height: 45px; background: #8000ff; box-shadow: 0 0 140px #8000ff, 0 0 280px #8000ff, 0 0 420px #8000ff; left: 55%; animation: firefly6 125s ease-in-out infinite; filter: blur(22px); }
.v2-firefly-field .firefly-7 { width: 80px; height: 80px; background: #ffff00; box-shadow: 0 0 200px #ffff00, 0 0 400px #ffff00, 0 0 600px #ffff00; left: 65%; animation: firefly7 200s ease-in-out infinite; filter: blur(35px); }
.v2-firefly-field .firefly-8 { width: 12px; height: 12px; background: #00ffff; box-shadow: 0 0 50px #00ffff, 0 0 100px #00ffff; left: 75%; animation: firefly8 110s ease-in-out infinite; filter: blur(7px); }
.v2-firefly-field .firefly-9 { width: 28px; height: 28px; background: #ff4000; box-shadow: 0 0 100px #ff4000, 0 0 200px #ff4000, 0 0 300px #ff4000; left: 85%; animation: firefly9 145s ease-in-out infinite; filter: blur(15px); }
.v2-firefly-field .firefly-10 { width: 55px; height: 55px; background: #0080ff; box-shadow: 0 0 160px #0080ff, 0 0 320px #0080ff, 0 0 480px #0080ff; left: 95%; animation: firefly10 175s ease-in-out infinite; filter: blur(28px); }
.v2-firefly-field .firefly-11 { width: 18px; height: 18px; background: #ff8000; box-shadow: 0 0 70px #ff8000, 0 0 140px #ff8000; left: 12%; animation: firefly11 140s ease-in-out infinite; filter: blur(10px); }
.v2-firefly-field .firefly-12 { width: 70px; height: 70px; background: #40ff00; box-shadow: 0 0 180px #40ff00, 0 0 360px #40ff00, 0 0 540px #40ff00; left: 32%; animation: firefly12 190s ease-in-out infinite; filter: blur(32px); }
.v2-firefly-field .firefly-13 { width: 10px; height: 10px; background: #ff0040; box-shadow: 0 0 45px #ff0040, 0 0 90px #ff0040; left: 52%; animation: firefly13 115s ease-in-out infinite; filter: blur(6px); }
.v2-firefly-field .firefly-14 { width: 40px; height: 40px; background: #4000ff; box-shadow: 0 0 130px #4000ff, 0 0 260px #4000ff, 0 0 390px #4000ff; left: 72%; animation: firefly14 160s ease-in-out infinite; filter: blur(20px); }
.v2-firefly-field .firefly-15 { width: 22px; height: 22px; background: #ff0020; box-shadow: 0 0 85px #ff0020, 0 0 170px #ff0020, 0 0 255px #ff0020; left: 92%; animation: firefly15 155s ease-in-out infinite; filter: blur(12px); }
@keyframes firefly1 { 0%{opacity:0;top:95%;left:3%;transform:translateX(-20px)translateY(10px);} 10%{opacity:0.3;top:88%;left:8%;transform:translateX(-15px)translateY(5px);} 25%{opacity:0.7;top:65%;left:25%;transform:translateX(-5px)translateY(-10px);} 40%{opacity:1;top:45%;left:48%;transform:translateX(10px)translateY(-15px);} 55%{opacity:0.9;top:30%;left:72%;transform:translateX(20px)translateY(-20px);} 70%{opacity:0.8;top:20%;left:88%;transform:translateX(25px)translateY(-25px);} 85%{opacity:0.4;top:15%;left:95%;transform:translateX(30px)translateY(-30px);} 100%{opacity:0;top:12%;left:97%;transform:translateX(35px)translateY(-35px);} }
@keyframes firefly2 { 0%{opacity:0;top:5%;left:95%;transform:translateX(15px)translateY(-5px);} 12%{opacity:0.4;top:12%;left:88%;transform:translateX(10px)translateY(0);} 28%{opacity:0.8;top:35%;left:65%;transform:translateX(-5px)translateY(15px);} 45%{opacity:1;top:55%;left:45%;transform:translateX(-15px)translateY(25px);} 62%{opacity:0.9;top:72%;left:28%;transform:translateX(-25px)translateY(35px);} 78%{opacity:0.6;top:85%;left:15%;transform:translateX(-35px)translateY(40px);} 92%{opacity:0.3;top:92%;left:8%;transform:translateX(-40px)translateY(45px);} 100%{opacity:0;top:95%;left:3%;transform:translateX(-45px)translateY(50px);} }
@keyframes firefly3 { 0%{opacity:0;top:85%;left:15%;transform:translateX(-10px)translateY(5px);} 15%{opacity:0.5;top:75%;left:25%;transform:translateX(-5px)translateY(0);} 30%{opacity:0.9;top:60%;left:40%;transform:translateX(5px)translateY(-10px);} 50%{opacity:1;top:40%;left:60%;transform:translateX(15px)translateY(-20px);} 65%{opacity:0.8;top:25%;left:75%;transform:translateX(25px)translateY(-30px);} 80%{opacity:0.5;top:15%;left:85%;transform:translateX(30px)translateY(-35px);} 95%{opacity:0.2;top:8%;left:92%;transform:translateX(35px)translateY(-40px);} 100%{opacity:0;top:5%;left:95%;transform:translateX(40px)translateY(-45px);} }
@keyframes firefly4 { 0%{opacity:0;top:45%;left:99%;transform:translateX(70px)translateY(-30px);} 30%{opacity:0.8;top:78%;left:2%;transform:translateX(-80px)translateY(70px);} 50%{opacity:1;top:12%;left:96%;transform:translateX(90px)translateY(-90px);} 70%{opacity:0.6;top:95%;left:1%;transform:translateX(-50px)translateY(30px);} 90%{opacity:0.3;top:28%;left:98%;transform:translateX(60px)translateY(-60px);} 100%{opacity:0;top:88%;left:3%;transform:translateX(-100px)translateY(80px);} }
@keyframes firefly5 { 0%{opacity:0;top:18%;left:97%;transform:translateX(90px)translateY(-50px);} 20%{opacity:0.9;top:85%;left:0;transform:translateX(-70px)translateY(90px);} 40%{opacity:1;top:5%;left:94%;transform:translateX(50px)translateY(-70px);} 60%{opacity:0.7;top:92%;left:4%;transform:translateX(-90px)translateY(40px);} 80%{opacity:0.5;top:32%;left:99%;transform:translateX(80px)translateY(-40px);} 100%{opacity:0;top:72%;left:1%;transform:translateX(-60px)translateY(100px);} }
@keyframes firefly6 { 0%{opacity:0;top:62%;left:2%;transform:translateX(-80px)translateY(50px);} 25%{opacity:0.6;top:25%;left:96%;transform:translateX(70px)translateY(-80px);} 45%{opacity:1;top:88%;left:3%;transform:translateX(-50px)translateY(60px);} 65%{opacity:0.8;top:15%;left:98%;transform:translateX(90px)translateY(-90px);} 85%{opacity:0.4;top:75%;left:0;transform:translateX(-100px)translateY(70px);} 100%{opacity:0;top:42%;left:95%;transform:translateX(60px)translateY(-50px);} }
@keyframes firefly7 { 0%{opacity:0;top:8%;left:93%;transform:translateX(80px)translateY(-100px);} 18%{opacity:0.8;top:95%;left:1%;transform:translateX(-90px)translateY(50px);} 38%{opacity:1;top:35%;left:99%;transform:translateX(70px)translateY(-60px);} 58%{opacity:0.9;top:68%;left:2%;transform:translateX(-80px)translateY(80px);} 78%{opacity:0.6;top:12%;left:97%;transform:translateX(50px)translateY(-70px);} 100%{opacity:0;top:82%;left:4%;transform:translateX(-70px)translateY(90px);} }
@keyframes firefly8 { 0%{opacity:0;top:52%;left:98%;transform:translateX(90px)translateY(-30px);} 22%{opacity:0.7;top:18%;left:1%;transform:translateX(-100px)translateY(70px);} 42%{opacity:1;top:85%;left:96%;transform:translateX(60px)translateY(-80px);} 62%{opacity:0.8;top:28%;left:3%;transform:translateX(-70px)translateY(60px);} 82%{opacity:0.5;top:92%;left:99%;transform:translateX(80px)translateY(-40px);} 100%{opacity:0;top:5%;left:0;transform:translateX(-50px)translateY(100px);} }
@keyframes firefly9 { 0%{opacity:0;top:78%;left:97%;transform:translateX(70px)translateY(60px);} 28%{opacity:0.9;top:38%;left:2%;transform:translateX(-90px)translateY(-50px);} 48%{opacity:1;top:15%;left:95%;transform:translateX(50px)translateY(-90px);} 68%{opacity:0.7;top:88%;left:1%;transform:translateX(-80px)translateY(80px);} 88%{opacity:0.4;top:48%;left:98%;transform:translateX(90px)translateY(-70px);} 100%{opacity:0;top:25%;left:4%;transform:translateX(-60px)translateY(70px);} }
@keyframes firefly10 { 0%{opacity:0;top:32%;left:1%;transform:translateX(-70px)translateY(40px);} 32%{opacity:0.8;top:72%;left:99%;transform:translateX(80px)translateY(-80px);} 52%{opacity:1;top:22%;left:3%;transform:translateX(-90px)translateY(90px);} 72%{opacity:0.6;top:95%;left:94%;transform:translateX(60px)translateY(-50px);} 92%{opacity:0.3;top:55%;left:2%;transform:translateX(-100px)translateY(30px);} 100%{opacity:0;top:8%;left:97%;transform:translateX(70px)translateY(-100px);} }
@keyframes firefly11 { 0%{opacity:0;top:65%;left:96%;transform:translateX(90px)translateY(70px);} 24%{opacity:0.7;top:12%;left:0;transform:translateX(-80px)translateY(-60px);} 44%{opacity:1;top:85%;left:98%;transform:translateX(50px)translateY(40px);} 64%{opacity:0.8;top:42%;left:1%;transform:translateX(-70px)translateY(-80px);} 84%{opacity:0.5;top:5%;left:95%;transform:translateX(80px)translateY(90px);} 100%{opacity:0;top:75%;left:3%;transform:translateX(-90px)translateY(-50px);} }
@keyframes firefly12 { 0%{opacity:0;top:88%;left:4%;transform:translateX(-60px)translateY(-90px);} 26%{opacity:0.9;top:28%;left:97%;transform:translateX(100px)translateY(80px);} 46%{opacity:1;top:92%;left:0;transform:translateX(-50px)translateY(-40px);} 66%{opacity:0.7;top:58%;left:99%;transform:translateX(70px)translateY(60px);} 86%{opacity:0.4;top:18%;left:2%;transform:translateX(-90px)translateY(-70px);} 100%{opacity:0;top:82%;left:96%;transform:translateX(80px)translateY(100px);} }
@keyframes firefly13 { 0%{opacity:0;top:48%;left:99%;transform:translateX(60px)translateY(-100px);} 20%{opacity:0.8;top:8%;left:1%;transform:translateX(-100px)translateY(50px);} 40%{opacity:1;top:78%;left:97%;transform:translateX(90px)translateY(-30px);} 60%{opacity:0.9;top:35%;left:3%;transform:translateX(-70px)translateY(70px);} 80%{opacity:0.6;top:95%;left:94%;transform:translateX(50px)translateY(-90px);} 100%{opacity:0;top:22%;left:0;transform:translateX(-80px)translateY(80px);} }
@keyframes firefly14 { 0%{opacity:0;top:15%;left:95%;transform:translateX(80px)translateY(60px);} 30%{opacity:0.7;top:68%;left:2%;transform:translateX(-90px)translateY(-80px);} 50%{opacity:1;top:25%;left:98%;transform:translateX(70px)translateY(40px);} 70%{opacity:0.8;top:88%;left:1%;transform:translateX(-60px)translateY(-60px);} 90%{opacity:0.5;top:52%;left:96%;transform:translateX(100px)translateY(70px);} 100%{opacity:0;top:5%;left:4%;transform:translateX(-80px)translateY(-90px);} }
@keyframes firefly15 { 0%{opacity:0;top:82%;left:98%;transform:translateX(50px)translateY(90px);} 35%{opacity:0.9;top:38%;left:0;transform:translateX(-100px)translateY(-70px);} 55%{opacity:1;top:12%;left:93%;transform:translateX(90px)translateY(50px);} 75%{opacity:0.6;top:92%;left:3%;transform:translateX(-70px)translateY(-40px);} 95%{opacity:0.3;top:58%;left:99%;transform:translateX(80px)translateY(80px);} 100%{opacity:0;top:28%;left:1%;transform:translateX(-90px)translateY(-100px);} }
/* ============================================================
TRUSTED BY — V2 override: only "Industry Leaders" gets Gill Sans + bump
============================================================ */
.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;
}
/* ============================================================
TRUSTED BY (logo grid)
============================================================ */
.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);
}
/* ============================================================
FINAL CTA — text-driven, big, calm
============================================================ */
.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; }
/* ============================================================
FOOTER
============================================================ */
.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 h4 {
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-size: 0.95rem; }
.v2-footer ul a:hover { color: var(--c-cyan); }
.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; }
}
/* ============================================================
CONTACT MODAL
============================================================ */
.modal.v2-modal .modal-dialog { max-width: 720px; margin-top: 80px; }
.modal.v2-modal .modal-content {
background: rgba(33, 33, 44, 0.96);
color: #fff;
border: 1px solid var(--bd-strong);
border-radius: var(--r-xl);
overflow: hidden;
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);
}
.modal.v2-modal .modal-header {
border-bottom: 1px solid var(--bd-white);
padding: 20px 24px;
}
.modal.v2-modal .modal-title {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.02em;
}
.modal.v2-modal .modal-body { padding: 0; min-height: 520px; }
.modal.v2-modal iframe { width: 100%; min-height: 520px; border: 0; display: block; }
.modal.v2-modal .btn-close { filter: invert(1); opacity: 0.85; }
/* ============================================================
BENTO — solid neon gradient tiles (used on service pages)
============================================================ */
.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); }
/* Per-tile color gradients */
.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); }
/* Media-backed bento tiles (image or video underneath the content) */
.v2-bento-card.has-media { background: var(--bg-3); }
.v2-bento-card.has-media::before { display: none; } /* drop the hover spotlight on media tiles */
.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;
}
/* Vertical (portrait) tile — for phone-shaped social ads */
.v2-bento-card.t-portrait { grid-row: span 2; }
/* Tile sizes */
.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; }
}
/* ============================================================
FLIP BENTO CARDS — "What We Do" pillars (desktop hover / mobile tap)
Add class v2-bento--flip to the grid wrapper to enable.
============================================================ */
/* The card becomes a 3D scene */
.v2-bento--flip .v2-bento-card {
perspective: 1000px;
transform-style: preserve-3d;
cursor: pointer;
/* Remove the default lift-on-hover since we use flip instead */
transition: box-shadow 0.5s var(--ease-out);
}
.v2-bento--flip .v2-bento-card:hover { transform: none; }
/* Inner wrapper that physically rotates */
.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);
}
/* Front and back faces */
.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);
}
/* Front: bigger icon + title only */
.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;
}
/* Back: smaller icon + title + desc */
.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; }
/* t-hero front gets larger text */
.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; }
/* On mobile: no hover — tapping the card flips it via JS .is-flipped class */
@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 SERVICE DETAIL PAGES — shared design system
============================================================ */
/* Full-bleed cinematic hero */
.v2-svc-hero {
position: relative;
min-height: clamp(620px, 90vh, 880px);
display: flex;
align-items: center;
isolation: isolate;
overflow: hidden;
padding: 180px 0 100px;
background: #060214;
}
.v2-svc-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.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(0.8);
}
.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.35) 0%, rgba(33, 33, 44, 0.75) 70%, rgba(33, 33, 44, 0.98) 100%);
pointer-events: none;
}
.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 6px 30px rgba(0, 0, 0, 0.55);
}
.v2-svc-hero-sub {
margin-top: 28px;
max-width: 640px;
font-size: clamp(1.05rem, 1.4vw, 1.22rem);
color: rgba(255, 255, 255, 0.88);
line-height: 1.55;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
/* Evens the line lengths so the last line never strands a single word. */
text-wrap: balance;
}
.v2-svc-hero-cta-row {
margin-top: 36px;
display: flex;
flex-wrap: wrap;
gap: 14px;
}
/* Philosophy / vision two-column */
.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; }
}
/* 3-pillar grid */
.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; } }
/* Portfolio gallery (cards) */
.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; }
}
/* Our story */
.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;
}
/* Pulled quote. The narrower column is what sets it apart from the paragraphs
above and below, so it reads as someone else speaking. */
/* Quote row: portrait beside the quote, holding the same overall width the
quote had on its own, so the text simply sets narrower and taller. */
.v2-svc-quote-row {
display: grid;
grid-template-columns: clamp(140px, 19vw, 210px) minmax(0, 1fr);
gap: clamp(18px, 3vw, 30px);
align-items: center;
max-width: 64ch;
margin: 28px auto 0;
text-align: left;
}
.v2-svc-quote-row blockquote { margin: 0; max-width: none; }
.v2-svc-quote-photo {
aspect-ratio: 4 / 5;
border-radius: var(--r);
overflow: hidden;
background: var(--bg-2);
}
.v2-svc-quote-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.v2-svc-quote-attr {
display: flex;
align-items: center;
gap: 12px;
margin-top: 16px;
font-size: 0.85rem;
color: var(--fg-3);
white-space: nowrap;
}
/* Below this the name is wider than the column, so let it wrap again. */
@media (max-width: 900px) {
.v2-svc-quote-attr { white-space: normal; }
}
.v2-svc-quote-logo {
flex: 0 0 auto;
height: 34px;
width: auto;
}
@media (max-width: 640px) {
.v2-svc-quote-row { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.v2-svc-quote-photo { width: 110px; }
.v2-svc-quote-attr { flex-direction: column; gap: 8px; text-align: center; }
}
.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);
}
/* The underline is always drawn but starts transparent, since a line can't be
faded in or out but its color can. The offset clears the italic descenders. */
.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;
}
/* Editorial split — manifesto-style headline + designed visual (e.g. browser mockup) */
.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-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 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;
}
/* Image/video variant for the editorial split (non-browser-mockup services) */
.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 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 {
/* Idle rotation to match the home tile's resting state */
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; }
}
/* Process — numbered steps */
.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);
}
/* 5-column variant — used when the template sets data-cols="5" or the inline style */
.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; }
}
/* ============================================================
Service "bento intro" — varied per page (tint, alignment, size)
============================================================ */
.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; }
/* — Tints — */
.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%);
}
/* — Layout / alignment variants — */
.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;
}
/* — Size / weight variants — */
.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; }
/* — Magazine-style section number — */
.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;
}
/* — Decorative road-stripes for Billboards intro — */
.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); }
/* Cinemascope reels — wide stacked tiles, used on Drone */
.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: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);
}
/* Service-page CTA finale (re-uses .v2-cta look) */
.v2-svc-cta h2 {
font-family: var(--font-display);
}
/* ============================================================
V2 CAREERS — list grid + detail page
============================================================ */
.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; /* kill the inline-image trailing gap */
}
.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; }
/* Neon badges */
.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);
}
/* Tooltip (info icon for growth potential) */
.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; }
/* Empty state */
.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;
}
/* Detail page */
.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 MEET THE TEAM — list grid + detail page
============================================================ */
.v2-team-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 22px;
}
.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; /* fill the frame — no warping */
object-position: center 18%; /* anchor faces near top so heads don't get cropped */
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;
}
.v2-team-card-body .role {
color: var(--c-cyan);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.3;
margin: 0 0 10px;
}
.v2-team-card-body .role br { display: none; }
.v2-team-card-body .view {
margin-top: 4px;
font-size: 0.86rem;
font-weight: 600;
color: var(--fg-2);
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap 0.3s ease, color 0.3s ease;
}
.v2-team-card:hover .v2-team-card-body .view { color: #fff; gap: 12px; }
/* CEO feature block at the top of the list view */
.v2-team-ceo {
display: grid;
grid-template-columns: clamp(220px, 28vw, 360px) minmax(0, 1fr);
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 h2 {
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);
max-width: 60ch;
}
@media (max-width: 820px) {
.v2-team-ceo { grid-template-columns: 1fr; }
.v2-team-ceo-photo { max-width: 360px; }
}
/* Team-member detail — entire block centered within a tighter wrap so it
doesn't feel pinned to the left of the (wide) v2-container. */
.v2-team-detail-wrap {
max-width: 1080px;
margin: 0 auto;
}
.v2-team-detail-header {
display: grid;
grid-template-columns: clamp(220px, 26vw, 340px) minmax(0, 1fr);
gap: clamp(28px, 4vw, 60px);
align-items: flex-start;
}
/* V1 stores some team titles with hard-coded
s — let them flow naturally. */
.v2-team-detail-header .role br { display: none; }
.v2-team-detail-header .photo {
border-radius: var(--r-xl);
overflow: hidden;
border: 1px solid var(--bd-strong);
aspect-ratio: 4 / 5;
}
.v2-team-detail-header .photo img { width: 100%; height: 100%; object-fit: cover; 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);
}
@media (max-width: 720px) {
.v2-team-detail-header { grid-template-columns: 1fr; }
}
.v2-team-detail-header .content {
min-width: 0;
}
.v2-team-detail-body {
margin-top: clamp(20px, 2.5vw, 36px);
padding-top: 20px;
border-top: 1px solid var(--bd-soft);
color: var(--fg-2);
font-size: 1.02rem;
line-height: 1.65;
max-width: 64ch;
}
.v2-team-detail-body p { margin: 0 0 16px; }
.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;
}
/* Policy pages (privacy / terms / social media) — long-form prose */
.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; }
/* ============================================================
ABOUT US — origin-story page
============================================================ */
/* Origin timeline: a broadcast-rundown rail. The story is genuinely
chronological (on air → launch → first office → today), so the rail
IS the information, not decoration. */
.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; }
/* Glowing node on the rail */
.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);
}
/* Era stamp — the "rundown" timestamp */
.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;
}
/* Big "1 → 20+" growth figure inside the dining-table chapter */
.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);
}
/* Service link chips — internal-link block */
.v2-about-svc-links {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.v2-about-svc-links a {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 10px 18px;
border: 1px solid var(--bd-strong);
border-radius: 999px;
font-size: 0.92rem;
font-weight: 600;
color: var(--fg-2);
text-decoration: none;
transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out),
color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.v2-about-svc-links a i { color: var(--c-cyan); font-size: 0.85em; }
.v2-about-svc-links a:hover {
color: #fff;
background: rgba(0, 240, 255, 0.10);
border-color: var(--c-cyan);
transform: translateY(-2px);
}
/* ============================================================
BLOG — public list + article pages
============================================================ */
.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);
}
/* Featured (newest) post: full-width split card at the top of the list */
.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; }
}
/* Tag chips (shared by cards and the article page) */
.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; }
/* Article page */
.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; }
/* ============================================================
REDUCED MOTION
============================================================ */
@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;
}
}
/* Two-column mega grid for short menus (About). */
.v2-mega-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* ============================================================
ONE ROOF — flow band
Six expanding stages in one compact conveyor. One stage is open
at a time; its top bar fills in that stage's gradient-stop color,
then v2.js hands off to the next. Collapsed stages show only a
glowing number and a vertical title. Hover pauses the handoff.
============================================================ */
.v2-flow {
display: flex;
gap: 10px;
min-height: 300px;
}
/* Each stage carries its own gradient stop as --fa. */
.v2-flow-stage:nth-child(1) { --fa: #00f0ff; --fa-glow: rgba(0, 240, 255, 0.5); }
.v2-flow-stage:nth-child(2) { --fa: #33c4fc; --fa-glow: rgba(51, 196, 252, 0.5); }
.v2-flow-stage:nth-child(3) { --fa: #669df9; --fa-glow: rgba(102, 157, 249, 0.5); }
.v2-flow-stage:nth-child(4) { --fa: #9975f5; --fa-glow: rgba(153, 117, 245, 0.5); }
.v2-flow-stage:nth-child(5) { --fa: #cc3bf2; --fa-glow: rgba(204, 59, 242, 0.5); }
.v2-flow-stage:nth-child(6) { --fa: #ff00f0; --fa-glow: rgba(255, 0, 240, 0.5); }
/* Four-stage band: same cyan to pink run, spread over four stops instead of
six, so the last stage still lands on pink. */
.v2-flow-4 .v2-flow-stage:nth-child(2) { --fa: #669df9; --fa-glow: rgba(102, 157, 249, 0.5); }
.v2-flow-4 .v2-flow-stage:nth-child(3) { --fa: #cc3bf2; --fa-glow: rgba(204, 59, 242, 0.5); }
.v2-flow-4 .v2-flow-stage:nth-child(4) { --fa: #ff00f0; --fa-glow: rgba(255, 0, 240, 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:focus-visible {
outline: 2px solid var(--c-cyan);
outline-offset: 3px;
}
.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);
}
/* Accent wash fills the open panel from its bottom corner. */
.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; }
/* Oversize ghost of the stage number keeps the open panel from feeling empty. */
.v2-flow-stage::after {
content: attr(data-num);
position: absolute;
top: 2px; right: 14px;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(5rem, 9vw, 8rem);
line-height: 1;
letter-spacing: -0.04em;
color: color-mix(in srgb, var(--fa) 34%, transparent);
text-shadow: 0 0 26px var(--fa-glow);
opacity: 0;
transform: translateY(16px);
transition: opacity 0.5s ease, transform 0.6s var(--ease-out);
pointer-events: none;
}
.v2-flow-stage.is-open::after { opacity: 1; transform: translateY(0); }
/* Top bar: static accent line when idle, filling fuse while cycling. */
.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;
}
/* Pausing is pure CSS so the fuse freezes mid-fill under the cursor. */
.v2-flow.is-cycling:hover .v2-flow-stage.is-open .v2-flow-bar {
animation-play-state: paused;
}
/* A click holds the stage open longer. The fuse keeps filling so the band
still reads as running, it just takes its time before the handoff. */
.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); }
}
/* Stage photo, behind the number, tab, and copy. Held back and drained of
color while collapsed so the vertical tab stays readable; the open stage
brings it up to full color and drifts it while the fuse runs. */
.v2-flow-photo {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: inherit;
}
.v2-flow-photo img {
width: 100%; height: 100%;
object-fit: cover;
opacity: 0.3;
filter: grayscale(0.75) contrast(1.05);
transform: scale(1.06);
transition: opacity 0.65s var(--ease-in-out),
filter 0.65s var(--ease-in-out),
transform 9s linear;
}
.v2-flow-stage:hover .v2-flow-photo img { opacity: 0.45; }
.v2-flow-stage.is-open .v2-flow-photo img {
opacity: 1;
filter: grayscale(0) contrast(1.06) saturate(1.35);
transform: scale(1.16);
}
/* Scrim: photo up top, solid ground under the title and copy. The open
stage swaps to a lighter scrim so the photo reads in full colour and the
ground under the copy is only as dark as it needs to be. */
.v2-flow-photo::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom,
rgba(0, 0, 0, 0.11) 0%,
rgba(0, 0, 0, 0.32) 40%,
var(--bg-2) 94%);
transition: opacity 0.65s var(--ease-in-out);
}
.v2-flow-photo::before {
content: '';
position: absolute;
inset: 0;
z-index: 1; /* the scaled img paints as positioned, so this must outrank it */
background: linear-gradient(to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.12) 30%,
rgba(24, 24, 34, 0.84) 64%,
rgba(33, 33, 44, 0.96) 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; }
/* Vertical title on collapsed stages, reading bottom-up. */
.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; }
/* Open-stage content fades up after the panel has made room. */
.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(0);
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-3);
}
@media (max-width: 880px) {
/* Stack as a compact ledger: every stage open, no accordion. */
.v2-flow { flex-direction: column; gap: 8px; min-height: 0; }
.v2-flow-stage,
.v2-flow-stage.is-open { flex: none; cursor: default; }
.v2-flow-stage { 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; }
.v2-flow-photo img,
.v2-flow-stage.is-open .v2-flow-photo img {
opacity: 0.55;
filter: grayscale(0) saturate(1.2);
transform: none;
}
.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 right,
var(--bg-2) 10%,
rgba(0, 0, 0, 0.41) 100%);
}
.v2-flow-stage::before,
.v2-flow-stage::after { display: none; }
.v2-flow-body,
.v2-flow-stage.is-open .v2-flow-body {
position: static;
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; }
}
/* ---------- Why RLM: one invoice ----------
Five small invoices from five different companies, piled up at odd
angles on the left, and one invoice from RLM on the right with the same
work as five line items and one total. Paper on the neon ground is the
strongest contrast on the page, so nothing else here needs a gimmick.
The pile is positioned in px inside a fixed-height box, scaled down by
--k on small screens. Amounts are blurred: the numbers are invented and
the point is the count of bills, not the size of them. */
.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; }
/* The RLM invoice: a real element in the grid, larger, lit by the brand. */
.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;
}
/* The reveal's translateY and the paper's rotate would fight on the same
element, so the reveal sits on the pile's wrapper, not on the papers. */
.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; }
/* The pile needs more room than the scale gives it: the last paper is
taller than it is wide once the line items wrap. */
.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; }
}
/* ---------- Packages by business type ---------- */
.v2-packages {
display: grid;
/* Five packages on one row at desktop width: a 3 + 2 grid left a third
of a row empty, which is the least efficient shape on the page. */
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;
}
/* Neon top edge, one flavor per package. */
.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;
}
/* Five across only holds on a wide column; step down before the cards get
too narrow to read rather than jumping straight to one. */
@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; }
}
/* ---------- Hero scroll cue ---------- */
.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;
}
/* A bright drip runs down the line on repeat: "keep going". */
.v2-hero-scroll .line::after {
content: '';
position: absolute;
left: 0;
top: -45%;
width: 100%;
height: 45%;
border-radius: 2px;
background: var(--c-cyan);
box-shadow: 0 0 8px rgba(0, 240, 255, 0.8);
animation: v2ScrollDrip 1.8s var(--ease-in-out) infinite;
}
@keyframes v2ScrollDrip {
to { top: 110%; }
}
/* The hero scroll cue keeps its reveal transform after animating in. */
.v2-hero-scroll.reveal { transform: translateX(-50%) translateY(36px); }
.v2-hero-scroll.reveal.is-in { transform: translateX(-50%) translateY(0); }
/* ---------- FAQ — static, crawlable Q&A rows ---------- */
.v2-faq { max-width: 880px; }
/* Centers the column under the centered heading. Text stays left-aligned. */
#faq .v2-faq { 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 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;
}
/* Service rows on the full-service-marketing hub reuse the FAQ rows;
the trailing link needs its own breathing room. */
.v2-faq-item .link-arrow {
display: inline-flex;
margin-top: 12px;
}
/* Collapsible FAQ rows. The share one name, which is what makes the
browser close the open row when another is clicked — no script involved. */
.v2-faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
cursor: pointer;
list-style: none;
}
.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.25s ease;
}
.v2-faq-item details[open] summary::after {
transform: rotate(225deg) translateY(-3px);
}
.v2-faq-item summary:focus-visible {
outline: 2px solid var(--c-cyan);
outline-offset: 6px;
}
.v2-faq-item details > p,
.v2-faq-item .v2-faq-answer p { margin-top: 14px; }
/* v2.js animates this wrapper's height, so it has to clip while it slides. */
.v2-faq-item .v2-faq-answer { overflow: hidden; }
/* ---------- Ledger — typography-led capability rows ----------
Clean replacement for gradient bento tiles: title column, description
column, hairline dividers, one accent. Semantic h3 + p pairs. */
.v2-ledger {
border-top: 1px solid var(--bd-white);
}
.v2-ledger-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
column-gap: clamp(18px, 4vw, 64px);
align-items: start;
padding: clamp(26px, 3.4vw, 42px) 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.25rem, 2.2vw, 1.7rem);
letter-spacing: -0.025em;
line-height: 1.15;
margin: 0;
color: #fff;
}
.v2-ledger-row h3 i {
flex: 0 0 auto;
font-size: 0.75em;
color: var(--c-cyan);
}
.v2-ledger-row .meta {
display: block;
margin-top: 10px;
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: 1rem;
line-height: 1.65;
color: var(--fg-2);
max-width: 58ch;
}
/* A second paragraph would otherwise wrap to the empty first column, landing
under the heading. Pinning it to column 2 keeps it stacked under the first. */
.v2-ledger-row p + p {
grid-column: 2;
margin-top: 16px;
}
@media (max-width: 768px) {
.v2-ledger-row { grid-template-columns: 1fr; gap: 12px; }
}
/* Feature-split list. Plain markers, not checks: a check means "included in
what you're buying", which is only true on the tier cards. */
.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; }
/* ---------- Service tiers — three priced cards ----------
Cards stretch to equal height and the button is pushed to the bottom with
margin-top:auto, so the CTAs line up however uneven the feature lists are. */
.v2-tiers {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
/* Padding rather than margin: a margin here collapses against the section
head's own margin-bottom and the larger of the two wins. */
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 ease-in-out infinite;
color: #16161f;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
white-space: nowrap;
}
/* Page-count switch on the audit card. Segmented control sitting in the card's
own flow, above the price it changes. */
/* Price-my-site field. Sits above the cards because the page count it asks
about is a fact about the reader's site, not a property of one product. */
.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); }
.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); }
/* Unit rides inside the so it stays glued to the number the flex gap
would otherwise push it away from. */
.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); }
/* Price scale: one band per line, in the same fine-print voice as .tier-note. */
.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; }
}
/* ---------- Gallery — simple masonry, images do the talking ---------- */
.v2-gallery {
columns: 3;
column-gap: 18px;
}
.v2-gallery figure {
margin: 0 0 18px;
break-inside: avoid;
}
.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; } }
/* Wide variant for landscape work (billboards): two big columns so the
horizontal format keeps its scale. */
.v2-gallery--wide { columns: 2; column-gap: 22px; }
.v2-gallery--wide figure { margin-bottom: 22px; }
@media (max-width: 768px) { .v2-gallery--wide { columns: 1; } }
/* ---------- County grid (full-service-marketing hub) ---------- */
.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);
}
/* Closing note under the process steps — sits narrower than the step grid so
it reads as commentary on the steps rather than another one of them. */
.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);
}
/* ---------- Next in the pipeline (service page cross-link) ---------- */
.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-label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--c-cyan);
}
.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; }
/* ---------- Conversion pass (Priority 3) additions ---------- */
/* Hero: problem-first line above the h1 */
.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);
}
/* Hero: free-discovery-call + phone microcopy under the CTA row */
.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; }
/* Specialty vertical framed with campaign stills instead of video */
.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%);
}
/* Package accent variants for the added verticals */
.v2-package.pk-cyan::before { background: linear-gradient(90deg, #00f0ff, #7a42ff); }
.v2-package.pk-violet::before { background: linear-gradient(90deg, #7a42ff, #ff00f0); }
/* Trusted-by: static, crawlable client names along the bottom of the band.
The band is a flex row (V1 CSS), so this list must be taken out of flow:
as a flex sibling it split the width with the floating-logo container,
which cut the background in half and put the names over the heading. */
.logo-hero-names {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 24px;
list-style: none;
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 48px) 22px;
max-width: 1000px;
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 0, 0, 0.4);
}
.logo-hero-names li { white-space: nowrap; }
@media (max-width: 640px) {
/* Stays visible on phones: mobile-first indexing is where the crawlable
list matters most. */
.logo-hero-names { font-size: 0.62rem; gap: 6px 14px; padding-bottom: 14px; }
}
/* Final CTA: phone/text line under the buttons */
.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; }
/* Footer + contact modal phone lines */
.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-modal-phone {
margin: 14px 0 0;
font-size: 0.92rem;
color: var(--fg-3);
text-align: center;
}
.v2-modal-phone a {
color: var(--c-cyan);
text-decoration: none;
font-weight: 600;
}
.v2-modal-phone a:hover { text-decoration: underline; }
/* Pricing signal strip — real starting points under the stats row */
.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); }
/* ============================================================
SERVICES STORY — sticky media stage + scrolling service blocks
Desktop: stage pins under the nav on the left while the eight
blocks scroll on the right; v2.js swaps the active media layer.
Under 900px the stage is hidden and each block shows its own
poster image inline.
============================================================ */
.v2-story {
display: grid;
grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
gap: clamp(32px, 5vw, 80px);
align-items: start;
}
/* Stage */
.v2-story-stage {
position: sticky;
top: 112px; /* nav height + breathing room */
align-self: start;
}
.v2-story-frame {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
max-height: calc(100vh - 150px);
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%;
object-fit: cover;
filter: saturate(112%) contrast(104%);
}
.v2-story-media .v2-rotator img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1.2s ease;
}
.v2-story-media .v2-rotator img.is-active { opacity: 1; }
/* Soft ground at the bottom so the label reads over any footage */
.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%);
}
/* Caption: big service name, running count, and a progress bar that fills
as the reader moves through the eight services. */
.v2-story-caption {
position: absolute;
left: 24px;
right: 24px;
bottom: 22px;
z-index: 3;
display: flex;
flex-direction: column;
gap: 10px;
}
.v2-story-count {
display: inline-flex;
align-items: baseline;
gap: 2px;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.04em;
color: var(--c-cyan);
font-variant-numeric: tabular-nums;
text-shadow: 0 0 14px rgba(0, 240, 255, 0.6);
}
.v2-story-count i { font-style: normal; color: rgba(255, 255, 255, 0.55); text-shadow: none; }
.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(0); }
}
.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);
}
/* Section blobs: three big neon blobs behind the section, recoloured and
repositioned per service. The colours and positions are registered so
browsers that support @property fade between them; the rest just snap. */
@property --story-a { syntax: ''; inherits: true; initial-value: #00f0ff; }
@property --story-b { syntax: ''; inherits: true; initial-value: #ff00f0; }
@property --story-c { syntax: ''; inherits: true; initial-value: #7a42ff; }
@property --story-x { syntax: ''; inherits: true; initial-value: 10%; }
@property --story-y { syntax: ''; inherits: true; initial-value: 20%; }
.v2-section--story {
--story-a: #00f0ff; /* commercial: cyan / pink / violet */
--story-b: #ff00f0;
--story-c: #7a42ff;
--story-x: 10%;
--story-y: 20%;
}
/* The section is eight screens tall, so blobs painted on the section itself
would sit off screen most of the time. This backdrop is sticky and one
viewport tall, so the blobs ride along and stay behind whatever is on
screen. Negative bottom margin keeps it out of the layout. */
.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);
/* The blobs are bigger than the backdrop, so without this they get sliced
off flat at its top and bottom edges and read as a solid line across
the section. Fade the backdrop out toward both edges instead. */
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 78%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 78%, transparent 100%);
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;
}
/* One neon trio per service, so the room changes colour with the work. */
.v2-section--story[data-story-theme="video"] { --story-a: #7a42ff; --story-b: #00f0ff; --story-c: #ff00f0; --story-x: 24%; --story-y: 12%; }
.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: #ff00f0; --story-b: #ff4dff; --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%; }
.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: #39ff88; --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%; }
/* Steps */
.v2-story-steps { display: flex; flex-direction: column; }
/* Each block is a little taller than the pinned stage. Its copy is sticky
inside the block, so the text rides up, parks level with the stage for a
few hundred pixels of scroll, then hands off to the next block. That is
the dwell; without it the text slides past at scroll speed. */
.v2-story-step {
display: flex;
flex-direction: column;
justify-content: flex-start;
min-height: calc(100vh - 60px);
/* Bottom padding is what keeps the parked copy clear of the rule when the
next block pushes it off; top padding keeps the next heading off it. */
padding: 64px 0 88px;
border-bottom: 1px solid var(--bd-white);
opacity: 0.38;
transition: opacity 0.5s ease;
}
/* The opener gets a longer park so nobody scrolls straight past it. */
.v2-story-step:first-child { min-height: calc(100vh + 60px); padding-top: 0; }
.v2-story-step:last-child { border-bottom: 0; min-height: calc(100vh - 150px); }
.v2-story-steps { padding-bottom: 48px; }
.v2-story-copy {
position: sticky;
top: clamp(200px, 36vh, 340px); /* copy centre lands on the stage centre */
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: 0.98;
margin: 0 0 16px;
color: #fff;
}
.v2-story-step.is-on h3 {
background: var(--grad);
-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(--c-cyan);
text-decoration: underline;
text-decoration-color: rgba(0, 240, 255, 0.4);
text-underline-offset: 3px;
}
.v2-story-copy > p a:hover { text-decoration-color: var(--c-cyan); }
.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-3);
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(--c-cyan);
box-shadow: 0 0 8px rgba(0, 240, 255, 0.7);
}
.v2-story-step .link-arrow { margin-top: 22px; align-self: flex-start; }
.v2-story-inline { display: none; }
@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; }
}
/* Mobile and narrow tablets: no stage, each block carries its own image */
@media (max-width: 899.98px) {
.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 h3 {
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.v2-story-inline {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--r-lg);
border: 1px solid var(--bd-strong);
margin-bottom: 18px;
filter: saturate(112%);
}
}