:root {
  --ink: #111214;
  --paper: #f4f4f1;
  --paper-2: #e2e4e4;
  --white: #ffffff;
  --blue: #496f8e;
  --blue-dark: #102238;
  --red: #dfe3e4;
  --muted: #656a6d;
  --line: rgba(23, 23, 23, .18);
  --max: 1380px;
  --pad: clamp(22px, 4vw, 64px);
  --display: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.shell { width: min(100%, var(--max)); margin: 0 auto; padding-inline: var(--pad); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; color: var(--blue); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.serif { font-family: var(--display); font-style: italic; font-weight: 400; }
.muted { color: var(--muted); }
.site-header { position: sticky; top: 0; z-index: 50; height: 78px; background: rgba(244,244,241,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.header-inner { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; font-size: 1.3rem; font-weight: 700; letter-spacing: -.03em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; background: var(--blue); color: white; font-size: .9rem; font-weight: 800; transform: rotate(-4deg); }
.desktop-nav { display: flex; align-items: center; gap: 30px; font-size: .86rem; font-weight: 600; }
.desktop-nav a { position: relative; padding: 28px 0; }
.desktop-nav a::after { content: ""; position: absolute; right: 0; bottom: 22px; left: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
.desktop-nav a:hover::after, .desktop-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.header-phone { font-size: .78rem; font-weight: 700; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 48px; padding: 12px 20px; border: 1px solid var(--ink); background: var(--ink); color: white; font-size: .84rem; font-weight: 700; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button.blue { background: var(--blue); border-color: var(--blue); }
.button.light { background: transparent; color: var(--ink); }
.button.white { background: var(--white); border-color: var(--white); color: var(--ink); }
.menu-button { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); background: transparent; }
.menu-button span { display: block; width: 18px; height: 1px; margin: 5px auto; background: var(--ink); transition: transform .2s ease; }
.menu-button.active span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-button.active span:last-child { transform: translateY(-3px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 78px 0 0; z-index: 45; display: grid; align-content: space-between; padding: 36px 24px; background: var(--paper); transform: translateY(-110%); visibility: hidden; transition: transform .35s ease, visibility .35s; }
.mobile-menu.open { transform: translateY(0); visibility: visible; }
.mobile-menu nav { display: grid; }
.mobile-menu nav a { padding: 12px 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: clamp(1.8rem, 8vw, 3rem); line-height: 1; }
.mobile-menu-footer { display: grid; gap: 10px; font-size: .9rem; }
.home-hero { min-height: calc(100vh - 78px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); border-bottom: 1px solid var(--line); }
.home-hero-copy { display: flex; flex-direction: column; justify-content: space-between; min-height: 720px; padding: 56px var(--pad) 54px max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad))); }
.hero-kicker { display: flex; justify-content: space-between; gap: 20px; max-width: 720px; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.home-hero h1, .page-hero h1 { margin: auto 0 38px; max-width: 840px; font-size: clamp(4.4rem, 8vw, 9rem); font-weight: 700; letter-spacing: -.075em; line-height: .82; }
.home-hero h1 .serif { color: var(--blue); }
.hero-intro { display: grid; grid-template-columns: minmax(240px, 510px) auto; align-items: end; gap: 40px; }
.hero-intro p { margin: 0; font-size: clamp(1.05rem, 1.45vw, 1.35rem); line-height: 1.45; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.home-hero-visual { position: relative; min-height: 720px; overflow: hidden; background: var(--blue); }
.home-hero-visual img { height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.03); }
.visual-label { position: absolute; right: 18px; bottom: 18px; left: 18px; display: flex; justify-content: space-between; gap: 14px; padding: 15px 17px; background: var(--paper); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

/* Editorial motion hero */
.editorial-hero { --title-shift: 0px; --orbit-x: 0px; --orbit-y: 0px; --core-x: 0px; --core-y: 0px; --hero-scroll-y: 0px; --hero-scroll-rotate: 0deg; position: relative; isolation: isolate; display: block; min-height: min(900px,calc(100svh - 78px)); overflow: hidden; background: var(--paper); }
.editorial-hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: radial-gradient(circle at 76% 38%,rgba(73,111,142,.09),transparent 31%), linear-gradient(120deg,rgba(255,255,255,.8),transparent 48%); }
.editorial-hero-copy { position: relative; z-index: 2; display: grid; grid-template-rows: auto 1fr auto; min-height: min(900px,calc(100svh - 78px)); padding-top: clamp(34px,5vh,62px); padding-bottom: clamp(34px,5vh,58px); }
.editorial-kicker { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: clamp(18px,3vw,42px); max-width: none; }
.editorial-kicker strong { color: var(--ink); font-size: 1.35rem; letter-spacing: -.04em; }
.editorial-kicker span:nth-child(2) { color: var(--blue); white-space: nowrap; }
.editorial-hero h1 { position: relative; z-index: 2; align-self: center; max-width: 1100px; margin: clamp(58px,8vh,92px) 0 clamp(44px,6vh,70px); font-size: clamp(4.2rem,7.35vw,8.2rem); line-height: .82; letter-spacing: -.078em; text-wrap: balance; }
.editorial-hero h1 .serif { display: inline-block; color: var(--blue); transform: translateX(var(--title-shift)); transition: transform .45s cubic-bezier(.22,1,.36,1); }
.hero-proof { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(220px,.72fr) minmax(420px,1.15fr); gap: clamp(36px,7vw,100px); align-items: end; max-width: 960px; }
.hero-motion-stage { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.hero-signature { position: absolute; right: -2vw; top: 7%; color: transparent; opacity: .17; font-family: "Snell Roundhand", "Segoe Script", cursive; font-size: clamp(17rem,37vw,38rem); font-weight: 400; letter-spacing: -.23em; line-height: 1; -webkit-text-stroke: 2px var(--blue); transform: translate3d(var(--orbit-x),calc(var(--orbit-y) + var(--hero-scroll-y)),0) rotate(-8deg); clip-path: inset(0 100% 0 0); animation: signature-write 2.2s cubic-bezier(.2,.8,.2,1) .35s forwards, signature-float 9s ease-in-out 2.6s infinite alternate; }
@keyframes signature-write { to { clip-path: inset(0 0 0 0); } }
@keyframes signature-float { from { translate: 0 -8px; rotate: -1deg; } to { translate: 18px 14px; rotate: 1.5deg; } }
.tech-line { position: absolute; height: 1px; background: linear-gradient(90deg,transparent,rgba(73,111,142,.5),transparent); transform-origin: left; animation: tech-scan 7s ease-in-out infinite alternate; }
.tech-line-one { width: 46vw; right: -4vw; top: 34%; transform: rotate(-13deg); }
.tech-line-two { width: 35vw; right: 3vw; bottom: 24%; transform: rotate(11deg); animation-delay: -3s; }
.tech-dot { position: absolute; width: 7px; height: 7px; border: 1px solid var(--blue); border-radius: 50%; box-shadow: 0 0 0 8px rgba(73,111,142,.08); animation: tech-pulse 3s ease-in-out infinite; }
.tech-dot-one { right: 22%; top: 28%; }
.tech-dot-two { right: 9%; bottom: 22%; animation-delay: -1.5s; }
@keyframes tech-scan { from { opacity: .2; scale: .82 1; } to { opacity: .7; scale: 1 1; } }
@keyframes tech-pulse { 50% { transform: scale(1.45); opacity: .45; } }
.hero-proof p { margin: 0; }
.hero-proof-lead { padding-left: 17px; border-left: 3px solid var(--blue); font-family: var(--display); font-size: clamp(1.25rem,2vw,1.8rem); font-style: italic; line-height: 1.12; }
.hero-proof-copy > p { max-width: 670px; font-size: clamp(1rem,1.4vw,1.25rem); line-height: 1.48; }
.hero-proof-copy .hero-actions { margin-top: 24px; }
.hero-orbit-stage { position: absolute; z-index: 0; top: 0; right: -8vw; width: min(60vw,920px); height: 100%; opacity: .9; transform: translate3d(var(--orbit-x),calc(var(--orbit-y) + var(--hero-scroll-y)),0) rotate(var(--hero-scroll-rotate)); transition: transform .5s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.hero-orbit { position: absolute; border: clamp(20px,2.8vw,42px) solid transparent; border-top-color: rgba(45,99,229,.82); border-right-color: rgba(45,99,229,.38); border-radius: 50%; filter: drop-shadow(0 30px 45px rgba(18,57,149,.14)); }
.hero-orbit-one { width: 118%; height: 48%; top: -9%; right: -20%; transform: rotate(18deg); animation: orbit-breathe 8s ease-in-out infinite alternate; }
.hero-orbit-two { width: 108%; height: 38%; top: 37%; right: -36%; border-width: clamp(14px,2vw,28px); border-top-color: rgba(130,166,255,.95); border-right-color: rgba(45,99,229,.52); transform: rotate(-21deg); animation: orbit-breathe 10s ease-in-out -3s infinite alternate-reverse; }
.hero-orbit-three { width: 94%; height: 28%; right: 5%; bottom: -8%; border-width: clamp(9px,1.3vw,19px); border-top-color: rgba(18,57,149,.76); border-right-color: rgba(130,166,255,.7); transform: rotate(13deg); }
@keyframes orbit-breathe { from { translate: 0 -8px; rotate: -2deg; } to { translate: 10px 12px; rotate: 4deg; } }
.orbit-word { position: absolute; padding: 8px 12px; border: 1px solid rgba(23,23,23,.2); background: rgba(241,242,239,.82); color: var(--blue-dark); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(10px); }
.orbit-word-shopify { top: 18%; left: 8%; }
.orbit-word-content { top: 55%; right: 9%; }
.orbit-word-signage { right: 31%; bottom: 13%; }
.orbit-core { position: absolute; top: 43%; right: 35%; display: grid; place-items: center; width: 84px; aspect-ratio: 1; border-radius: 50%; background: var(--blue); color: white; box-shadow: 0 20px 55px rgba(18,57,149,.28); font-size: 1.25rem; font-weight: 800; transform: translate3d(var(--core-x),var(--core-y),0); }
.trust-strip { background: var(--ink); color: var(--white); }
.trust-strip .shell { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item { padding: 22px 24px; border-left: 1px solid rgba(255,255,255,.18); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.trust-item:last-child { border-right: 1px solid rgba(255,255,255,.18); }
.section { padding-block: clamp(80px, 10vw, 150px); }
.section-head { display: grid; grid-template-columns: .85fr 2fr; gap: 60px; margin-bottom: 70px; }
.section-head h2 { margin: 0; max-width: 980px; font-size: clamp(3rem, 6.5vw, 7rem); line-height: .88; letter-spacing: -.065em; }
.section-head p { align-self: end; max-width: 450px; margin: 24px 0 0; color: var(--muted); font-size: 1.08rem; }
.service-index { border-top: 1px solid var(--line); }
.service-link { display: grid; grid-template-columns: 70px minmax(220px, .9fr) 1.15fr auto; gap: 34px; align-items: start; padding: 42px 0 46px; border-bottom: 1px solid var(--line); transition: color .2s ease, padding-left .25s ease; }
.service-link:hover { color: var(--blue); padding-left: 12px; }
.service-link small { padding-top: 9px; color: var(--muted); font-size: .75rem; }
.service-link h3 { margin: 0; font-size: clamp(2rem, 3.6vw, 4.2rem); line-height: .95; letter-spacing: -.055em; }
.service-link p { max-width: 520px; margin: 3px 0 0; color: var(--muted); font-size: 1rem; }
.service-link .arrow { font-size: 1.7rem; }
.service-link:hover p, .service-link:hover small { color: inherit; }
.split-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 680px; }
.split-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(60px, 8vw, 120px); background: var(--blue); color: white; }
.split-copy h2 { margin: 0 0 28px; max-width: 650px; font-size: clamp(3.4rem, 6vw, 6.8rem); line-height: .88; letter-spacing: -.07em; }
.split-copy p { max-width: 560px; margin: 0 0 34px; font-size: 1.08rem; }
.split-visual { position: relative; min-height: 560px; overflow: hidden; }
.split-visual img { height: 100%; object-fit: cover; }
.outcome-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.outcome { min-height: 260px; padding: 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.outcome span { display: block; margin-bottom: 66px; color: var(--red); font-size: .76rem; font-weight: 800; }
.outcome h3 { margin: 0 0 14px; font-size: 1.35rem; letter-spacing: -.03em; }
.outcome p { margin: 0; color: var(--muted); font-size: .95rem; }
.portfolio-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.portfolio-project { display: grid; grid-template-columns: .88fr 1.12fr; min-height: 460px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.project-copy { display: flex; flex-direction: column; padding: clamp(28px, 3.5vw, 48px); }
.project-meta { display: flex; justify-content: space-between; gap: 18px; margin-bottom: auto; font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.project-meta span { color: var(--red); }
.project-meta strong { color: var(--muted); text-align: right; }
.project-client { margin: 42px 0 8px; color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.portfolio-project h3 { margin: 0 0 18px; font-size: clamp(1.9rem, 2.7vw, 3.2rem); line-height: .95; letter-spacing: -.055em; }
.portfolio-project .project-copy > p:not(.project-client) { margin: 0 0 28px; color: var(--muted); }
.portfolio-project a { width: max-content; margin-top: auto; color: var(--blue); font-size: .84rem; font-weight: 800; }
.portfolio-project a:hover { color: var(--blue-dark); }
.project-preview { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; padding: clamp(28px, 3.5vw, 48px); border-left: 1px solid var(--line); overflow: hidden; }
.project-preview span { margin-bottom: auto; font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.project-preview strong { display: block; margin-bottom: 12px; font-size: clamp(1.45rem, 2vw, 2.35rem); line-height: 1; letter-spacing: -.045em; overflow-wrap: anywhere; }
.project-preview small { font-size: .75rem; font-weight: 700; }
.scoops-preview { background: var(--blue); color: white; }
.sterling-preview { background: var(--ink); color: var(--white); }
.portfolio-experience-grid { display: grid; grid-template-columns: 1fr 1fr; border-left: 1px solid var(--line); }
.portfolio-experience { min-height: 270px; padding: clamp(28px, 3.5vw, 48px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.portfolio-experience .project-meta { margin-bottom: 54px; }
.portfolio-experience h3 { margin: 0 0 16px; font-size: clamp(1.8rem, 2.8vw, 3rem); line-height: .98; letter-spacing: -.05em; }
.portfolio-experience p { max-width: 620px; margin: 0 0 26px; color: var(--muted); }
.portfolio-experience > small { color: var(--muted); font-size: .76rem; }
.retainer-callout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: end; padding: clamp(70px, 9vw, 130px) var(--pad); background: var(--paper-2); color: var(--ink); }
.retainer-callout h2 { margin: 0; max-width: 860px; font-size: clamp(3.4rem, 6.4vw, 7rem); line-height: .84; letter-spacing: -.07em; }
.retainer-callout p { max-width: 520px; margin: 0 0 28px; font-size: 1.15rem; }
.office-teaser { display: grid; grid-template-columns: 1.1fr .9fr; border-bottom: 1px solid var(--line); }
.office-teaser figure { --office-rx: 0deg; --office-ry: 0deg; position: relative; margin: 0; min-height: 560px; overflow: hidden; background: var(--blue-dark); transform: perspective(1200px) rotateX(var(--office-rx)) rotateY(var(--office-ry)); transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s ease; }
.office-teaser figure:hover { box-shadow: 0 38px 90px rgba(16,34,56,.2); }
.office-teaser img { height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.12) brightness(.9); transition: filter .65s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.office-teaser figure:hover img { filter: saturate(.92) contrast(1.08) brightness(.98); }
.office-teaser figure::before { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg,transparent 55%,rgba(9,20,32,.78)); pointer-events: none; }
.office-teaser figcaption { position: absolute; z-index: 3; right: 26px; bottom: 24px; left: 26px; display: flex; justify-content: space-between; gap: 20px; align-items: end; color: white; }
.office-teaser figcaption span { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.office-teaser figcaption strong { font-family: var(--display); font-size: 1.35rem; font-style: italic; font-weight: 400; }
.office-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(50px, 7vw, 100px); }
.office-copy h2 { margin: 0 0 26px; font-size: clamp(3rem, 5vw, 5.8rem); line-height: .9; letter-spacing: -.06em; }
.office-copy p { max-width: 510px; margin: 0 0 28px; color: var(--muted); }
.page-hero { min-height: 690px; padding-block: 72px 80px; border-bottom: 1px solid var(--line); }
.page-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: end; }
.page-hero h1 { margin: 70px 0 34px; font-size: clamp(4rem, 8.2vw, 8.8rem); }
.page-hero-copy > p { max-width: 650px; margin: 0 0 34px; font-size: 1.18rem; }
.page-hero figure { position: relative; margin: 0; min-height: 540px; overflow: hidden; }
.page-hero figure img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.page-hero figcaption { position: absolute; right: 16px; bottom: 16px; padding: 10px 12px; background: var(--paper); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.page-hero.no-image { min-height: 560px; }
.page-hero.no-image .page-hero-grid { grid-template-columns: 1fr .7fr; }
.page-hero.no-image .display-stat { align-self: center; display: flex; flex-direction: column; align-items: flex-end; color: var(--blue); text-align: right; }
.page-hero.no-image .display-stat span { margin: 0 1.2rem 28px 0; padding-bottom: 9px; border-bottom: 2px solid currentColor; font-size: .78rem; font-weight: 800; letter-spacing: .16em; line-height: 1; text-transform: uppercase; }
.page-hero.no-image .display-stat strong { font-family: var(--display); font-size: clamp(8rem, 18vw, 18rem); font-style: italic; font-weight: 400; letter-spacing: -.05em; line-height: .7; }
.intro-block { display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; }
.intro-block h2 { margin: 0; font-size: clamp(2.8rem, 5.8vw, 6rem); line-height: .92; letter-spacing: -.06em; }
.intro-block-copy { max-width: 720px; }
.intro-block-copy p { margin: 0 0 22px; font-size: 1.1rem; }
.check-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 34px; margin: 34px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.check-list li { padding: 16px 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.check-list li::before { content: "✓"; margin-right: 10px; color: var(--blue); }
.dark-section { background: var(--ink); color: var(--white); }
.dark-section .eyebrow { color: #a6bac9; }
.dark-section .muted, .dark-section .section-head p { color: #b5b2aa; }
.process-list { counter-reset: steps; border-top: 1px solid rgba(255,255,255,.25); }
.process-step { counter-increment: steps; display: grid; grid-template-columns: 90px .8fr 1.2fr; gap: 40px; padding: 34px 0; border-bottom: 1px solid rgba(255,255,255,.25); }
.process-step::before { content: "0" counter(steps); color: #a6bac9; font-size: .78rem; font-weight: 700; }
.process-step h3 { margin: 0; font-size: 1.65rem; letter-spacing: -.03em; }
.process-step p { max-width: 620px; margin: 0; color: #c4c1ba; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.info-card { min-height: 310px; padding: 32px; border: 1px solid var(--line); background: var(--white); }
.info-card .number { display: block; margin-bottom: 70px; color: var(--red); font-size: .75rem; font-weight: 800; }
.info-card h3 { margin: 0 0 16px; font-size: 1.65rem; line-height: 1.05; letter-spacing: -.04em; }
.info-card p { margin: 0; color: var(--muted); }
.audience-band { background: var(--blue); color: white; }
.audience-band .shell { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; padding-block: clamp(70px, 10vw, 130px); }
.audience-band h2 { margin: 0; font-size: clamp(3rem, 5.7vw, 6.2rem); line-height: .9; letter-spacing: -.06em; }
.audience-list { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.35); }
.audience-list div { padding: 20px 10px 20px 0; border-bottom: 1px solid rgba(255,255,255,.35); font-weight: 700; }
.experience-note { display: grid; grid-template-columns: .6fr 1.4fr; gap: 70px; padding-block: clamp(70px, 9vw, 120px); }
.experience-note blockquote { margin: 0; font-family: var(--display); font-size: clamp(2.2rem, 4vw, 4.3rem); line-height: 1.02; letter-spacing: -.04em; }
.experience-note p { max-width: 610px; margin: 0; color: var(--muted); font-size: 1.08rem; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.price-card { display: flex; flex-direction: column; min-height: 600px; padding: 34px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.price-card.featured { background: var(--blue); color: white; }
.price-label { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 70px; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.price-card h2 { margin: 0; font-size: 2rem; }
.price { margin: 18px 0 3px; font-size: clamp(3.2rem, 5vw, 5.6rem); line-height: 1; letter-spacing: -.06em; }
.price small { font-size: .9rem; letter-spacing: 0; }
.hours { margin: 0 0 30px; color: var(--muted); font-weight: 700; }
.featured .hours { color: #cad7ff; }
.price-card ul { display: grid; gap: 13px; margin: 0 0 34px; padding: 26px 0 0; border-top: 1px solid currentColor; list-style: none; }
.price-card li::before { content: "—"; margin-right: 9px; }
.price-card .button { margin-top: auto; }
.starting-retainer { display: grid; grid-template-columns: 1.15fr .85fr; border: 1px solid var(--ink); }
.starting-retainer-copy { padding: clamp(38px, 5vw, 72px); }
.starting-retainer-copy h2 { margin: 0 0 24px; max-width: 760px; font-size: clamp(2.8rem, 5.5vw, 6rem); line-height: .9; letter-spacing: -.06em; }
.starting-retainer-copy p { max-width: 650px; margin: 0 0 30px; color: var(--muted); font-size: 1.08rem; }
.starting-retainer-copy ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.starting-retainer-copy li { padding: 15px 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.starting-retainer-copy li::before { content: "—"; margin-right: 9px; color: var(--blue); }
.starting-price { display: flex; flex-direction: column; justify-content: space-between; min-height: 500px; padding: clamp(38px, 5vw, 72px); background: var(--blue); color: white; }
.starting-price .price-label { margin: 0; }
.starting-price strong { display: block; font-size: clamp(5rem, 10vw, 10rem); line-height: .78; letter-spacing: -.08em; }
.starting-price strong small { display: block; margin-top: 24px; font-size: 1rem; letter-spacing: 0; }
.starting-price p { max-width: 390px; margin: 0; color: #d7e0ff; }
.faq-list { max-width: 1000px; margin-left: auto; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; gap: 30px; padding: 24px 0; cursor: pointer; font-size: 1.15rem; font-weight: 700; list-style: none; }
.faq-list summary::after { content: "+"; color: var(--blue); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 760px; margin: 0 0 26px; color: var(--muted); }
.contact-section { background: var(--blue-dark); color: var(--white); }
.contact-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; }
.contact-copy h2 { margin: 0 0 26px; font-size: clamp(3.6rem, 6.6vw, 7.2rem); line-height: .85; letter-spacing: -.07em; }
.contact-copy p { max-width: 470px; color: #bbb8b1; }
.direct-links { display: grid; margin-top: 40px; border-top: 1px solid rgba(255,255,255,.22); }
.direct-links a { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.inquiry-form { display: grid; gap: 24px; align-self: end; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.inquiry-form label { display: grid; gap: 8px; }
.inquiry-form label > span { color: #aaa7a0; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.inquiry-form input, .inquiry-form textarea { width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.35); border-radius: 0; outline: 0; background: transparent; color: white; }
.inquiry-form textarea { min-height: 115px; resize: vertical; }
.inquiry-form input:focus, .inquiry-form textarea:focus { border-color: #a6bac9; }
.custom-select { position: relative; }
.custom-select-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.35); background: transparent; color: white; font: inherit; text-align: left; cursor: pointer; }
.custom-select-trigger i { width: 9px; height: 9px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .28s ease; }
.custom-select.open .custom-select-trigger { border-color: #a6bac9; }
.custom-select.open .custom-select-trigger i { transform: rotate(225deg) translate(-2px,-2px); }
.custom-select-menu { position: absolute; z-index: 30; right: 0; left: 0; top: calc(100% + 9px); max-height: 320px; padding: 8px; overflow-y: auto; border: 1px solid rgba(255,255,255,.16); background: rgba(16,34,56,.98); box-shadow: 0 26px 70px rgba(0,0,0,.38); backdrop-filter: blur(18px); }
.custom-select-menu[hidden] { display: none; }
.custom-select-menu button { width: 100%; padding: 13px 14px; border: 0; background: transparent; color: rgba(255,255,255,.72); font: inherit; font-size: .88rem; text-align: left; cursor: pointer; transition: color .2s ease, background .2s ease, transform .2s ease; }
.custom-select-menu button:hover, .custom-select-menu button:focus-visible, .custom-select-menu button[aria-selected="true"] { outline: 0; background: rgba(255,255,255,.09); color: white; transform: translateX(4px); }
.form-note { margin: 0; color: #8e8b85; font-size: .78rem; }
.site-footer { padding-block: 34px; background: var(--ink); color: var(--white); border-top: 1px solid rgba(255,255,255,.18); }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; align-items: end; }
.footer-grid p { margin: 0; color: #9e9b95; font-size: .82rem; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; font-size: .8rem; }
.footer-meta { text-align: right; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }

/* Motion system */
.scroll-progress { position: fixed; z-index: 100; top: 0; right: 0; left: 0; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.site-header { transition: transform .45s cubic-bezier(.22,1,.36,1), background .3s ease, box-shadow .3s ease; }
.site-header.header-hidden { transform: translateY(-105%); }
.site-header.header-compact { box-shadow: 0 10px 35px rgba(23,23,23,.07); }
.motion-ready .hero-enter { opacity: 0; transform: translateY(34px); clip-path: inset(0 0 14% 0); }
.motion-ready .page-ready .hero-enter, .page-ready .hero-enter { opacity: 1; transform: translateY(0); clip-path: inset(0); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .95s cubic-bezier(.22,1,.36,1), clip-path .95s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--hero-order, 0) * 90ms + 80ms); }
.motion-ready .motion-item { opacity: 0; transform: translateY(42px); clip-path: inset(0 0 10% 0); }
.motion-ready .motion-item.visible { opacity: 1; transform: translateY(0); clip-path: inset(0); transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1), clip-path .9s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--motion-order, 0) * 55ms); }
.home-hero-visual img, .split-visual img, .office-teaser figure img, .page-hero figure img { transform: translate3d(0,var(--parallax-y,0),0) scale(1.09); will-change: transform; }
.home-hero-visual::after, .split-visual::after, .office-teaser figure::after, .page-hero figure::after { content: ""; position: absolute; inset: 0; border: 0 solid var(--blue); pointer-events: none; transition: border-width .45s cubic-bezier(.22,1,.36,1); }
.home-hero-visual:hover::after, .split-visual:hover::after, .office-teaser figure:hover::after, .page-hero figure:hover::after { border-width: 10px; }
.magnetic { transform: translate(var(--magnetic-x,0),var(--magnetic-y,0)); transition: transform .3s cubic-bezier(.22,1,.36,1), background .2s ease, color .2s ease; }
.magnetic:hover { transform: translate(var(--magnetic-x,0),calc(var(--magnetic-y,0) - 2px)); }
.kinetic-band { overflow: hidden; border-bottom: 1px solid var(--ink); background: var(--blue); color: white; }
.kinetic-track { display: flex; align-items: center; width: max-content; padding: 17px 0; animation: kinetic-scroll 28s linear infinite; }
.kinetic-track span { padding: 0 26px; font-family: var(--display); font-size: clamp(1.4rem,2vw,2.1rem); font-style: italic; white-space: nowrap; }
.kinetic-track i { color: #aebbc5; font-style: normal; font-size: .85rem; }
@keyframes kinetic-scroll { to { transform: translateX(-50%); } }
.service-link { position: relative; isolation: isolate; overflow: hidden; }
.service-link::before { content: ""; position: absolute; z-index: -1; width: 520px; aspect-ratio: 1; left: var(--pointer-x,50%); top: var(--pointer-y,50%); background: radial-gradient(circle,rgba(30,85,214,.13),transparent 65%); transform: translate(-50%,-50%) scale(0); opacity: 0; transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .3s ease; pointer-events: none; }
.service-link:hover::before { transform: translate(-50%,-50%) scale(1); opacity: 1; }
.service-link .arrow { transition: transform .35s cubic-bezier(.22,1,.36,1); }
.service-link:hover .arrow { transform: rotate(45deg) scale(1.08); }
.outcome { position: relative; overflow: hidden; transition: background .35s ease, color .35s ease, transform .35s cubic-bezier(.22,1,.36,1); }
.outcome::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.22,1,.36,1); }
.outcome:hover { background: var(--white); transform: translateY(-7px); }
.outcome:hover::after { transform: scaleX(1); }

/* Client partnership showcase */
.client-projects { display: grid; grid-template-columns: .82fr 1.18fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.client-project-card { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 590px; padding: clamp(30px,3.5vw,50px); overflow: hidden; color: white; border-right: 1px solid rgba(255,255,255,.22); transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s ease; }
.client-project-card::before { content: ""; position: absolute; z-index: -1; width: 650px; aspect-ratio: 1; left: var(--pointer-x,50%); top: var(--pointer-y,50%); background: radial-gradient(circle,rgba(255,255,255,.14),transparent 62%); transform: translate(-50%,-50%) scale(.55); opacity: 0; transition: transform .7s cubic-bezier(.22,1,.36,1),opacity .4s ease; }
.client-project-card:hover { z-index: 2; transform: translateY(-10px); box-shadow: 0 32px 75px rgba(23,23,23,.22); }
.client-project-card:hover::before { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.project-blue { background: var(--blue); }
.project-dark { background: var(--ink); }
.project-monogram { position: absolute; z-index: -2; right: -24px; top: 65px; color: rgba(255,255,255,.055); font-family: var(--display); font-size: clamp(10rem,16vw,16rem); font-style: italic; line-height: 1; letter-spacing: -.1em; transition: opacity .7s ease,transform .8s cubic-bezier(.22,1,.36,1); }
.client-project-card:hover .project-monogram { color: rgba(255,255,255,.11); transform: translateX(-16px) rotate(-5deg) scale(1.06); }
.project-topline { display: flex; justify-content: space-between; gap: 22px; font-size: .72rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.project-topline strong { display: inline-flex; align-items: center; gap: 9px; text-align: right; }
.project-topline i { width: 7px; height: 7px; border-radius: 50%; background: #a6bac9; box-shadow: 0 0 0 0 rgba(166,186,201,.55); animation: status-pulse 2.4s infinite; }
@keyframes status-pulse { 70% { box-shadow: 0 0 0 9px rgba(166,186,201,0); } 100% { box-shadow: 0 0 0 0 rgba(166,186,201,0); } }
.project-main { margin: auto 0; max-width: 690px; }
.project-main > small { display: block; margin-bottom: 18px; color: rgba(255,255,255,.68); font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.project-main h3 { margin: 0; font-size: clamp(3rem,5vw,6rem); line-height: .82; letter-spacing: -.065em; }
.project-main h3 em { display: block; font-family: var(--display); font-weight: 400; transition: transform .55s cubic-bezier(.22,1,.36,1); }
.client-project-card:hover h3 em { transform: translateX(14px); }
.project-main > p { max-width: 660px; margin: 30px 0 0; color: rgba(255,255,255,.82); font-size: 1.12rem; line-height: 1.5; }
.project-next { display: flex; align-items: baseline; gap: 18px; max-width: 660px; margin-top: 24px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.24); }
.project-next b { flex: none; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.project-next span { font-family: var(--display); font-size: 1.05rem; font-style: italic; }
.project-footer { display: flex; justify-content: space-between; align-items: end; gap: 22px; }
.project-footer > div { display: flex; flex-wrap: wrap; gap: 8px; }
.project-footer span { padding: 9px 11px; border: 1px solid rgba(255,255,255,.38); font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.project-footer > b { opacity: 0; transform: translateY(10px); font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; transition: opacity .35s ease,transform .35s ease; }
.client-project-card:hover .project-footer > b { opacity: 1; transform: translateY(0); }
.portfolio-privacy { display: grid; grid-template-columns: .82fr 1.18fr; border-left: 1px solid var(--line); }
.portfolio-privacy > div { padding: 34px clamp(28px,3.5vw,50px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.portfolio-privacy > div:last-child { background: #e2e7ea; }
.portfolio-privacy h3 { margin: 0 0 10px; font-size: clamp(1.35rem,2vw,2rem); letter-spacing: -.04em; }
.portfolio-privacy p { max-width: 680px; margin: 0; color: var(--muted); }
@media (max-width: 980px) {
  .desktop-nav, .header-phone, .header-actions .button { display: none; }
  .header-inner { grid-template-columns: 1fr auto; }
  .menu-button { display: block; }
  .home-hero { grid-template-columns: 1fr; }
  .home-hero-copy { min-height: 620px; padding-left: var(--pad); }
  .home-hero-visual { min-height: 520px; }
  .editorial-hero, .editorial-hero-copy { min-height: 760px; }
  .editorial-hero h1 { max-width: 820px; font-size: clamp(4.25rem,11vw,7rem); }
  .hero-signature { right: -15vw; top: 11%; font-size: clamp(20rem,54vw,34rem); opacity: .14; }
  .hero-orbit-stage { right: -28vw; width: 82vw; opacity: .76; }
  .trust-strip .shell { grid-template-columns: 1fr 1fr; }
  .trust-item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.18); }
  .section-head, .intro-block, .experience-note, .contact-layout { grid-template-columns: 1fr; gap: 34px; }
  .service-link { grid-template-columns: 50px 1fr auto; }
  .service-link p { grid-column: 2 / 3; }
  .split-section, .office-teaser, .retainer-callout, .page-hero-grid, .page-hero.no-image .page-hero-grid { grid-template-columns: 1fr; }
  .split-visual { order: -1; min-height: 480px; }
  .outcome-grid { grid-template-columns: 1fr 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .client-projects, .portfolio-privacy { grid-template-columns: 1fr; }
  .portfolio-project { grid-template-columns: 1fr 1fr; }
  .retainer-callout { gap: 40px; }
  .office-teaser figure { min-height: 460px; }
  .page-hero h1 { margin-top: 40px; }
  .page-hero figure { min-height: 480px; }
  .page-hero.no-image .display-stat { display: none; }
  .card-grid, .pricing-grid { grid-template-columns: 1fr; }
  .starting-retainer { grid-template-columns: 1fr; }
  .price-card { min-height: 520px; }
  .audience-band .shell { grid-template-columns: 1fr; gap: 45px; }
  .process-step { grid-template-columns: 60px 1fr; }
  .process-step p { grid-column: 2; }
}
@media (max-width: 640px) {
  :root { --pad: 20px; }
  .site-header { height: 68px; }
  .mobile-menu { inset: 68px 0 0; }
  .home-hero-copy { min-height: 600px; padding-top: 34px; }
  .hero-kicker span:last-child { display: none; }
  .home-hero h1, .page-hero h1 { font-size: clamp(3.5rem, 16vw, 5rem); overflow-wrap: anywhere; }
  .hero-intro { grid-template-columns: 1fr; gap: 28px; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .home-hero-visual { min-height: 430px; }
  .editorial-hero, .editorial-hero-copy { min-height: calc(100svh - 68px); }
  .editorial-hero-copy { padding-top: 28px; padding-bottom: 34px; }
  .editorial-kicker { display: grid; grid-template-columns: 1fr; gap: 8px; max-width: none; line-height: 1.25; }
  .editorial-kicker strong { font-size: 1.15rem; }
  .editorial-kicker span:nth-child(2) { font-size: .7rem; white-space: normal; }
  .editorial-hero h1 { align-self: end; max-width: none; margin: 88px 0 44px; font-size: clamp(3.45rem,15.5vw,5.2rem); line-height: .84; overflow-wrap: normal; text-wrap: balance; }
  .hero-proof { grid-template-columns: 1fr; gap: 20px; }
  .hero-proof-lead { max-width: 260px; font-size: 1.22rem; }
  .hero-proof-copy > p { font-size: .98rem; }
  .hero-proof-copy .hero-actions { grid-template-columns: 1fr; }
  .hero-signature { right: -36vw; top: 12%; font-size: 92vw; opacity: .12; -webkit-text-stroke-width: 1.5px; }
  .tech-line-one { width: 90vw; right: -25vw; top: 30%; }
  .tech-line-two { width: 76vw; right: -18vw; bottom: 31%; }
  .tech-dot-one { right: 18%; top: 27%; }
  .tech-dot-two { right: 8%; bottom: 29%; }
  .hero-orbit-stage { top: -5%; right: -47vw; width: 116vw; height: 72%; opacity: .56; }
  .orbit-word { display: none; }
  .orbit-core { top: 40%; right: 38%; width: 62px; font-size: .95rem; }
  .visual-label { font-size: .65rem; }
  .trust-strip .shell { padding: 0; }
  .trust-item { padding: 18px 20px; font-size: .7rem; }
  .section { padding-block: 74px; }
  .section-head { margin-bottom: 45px; }
  .section-head h2 { font-size: clamp(3rem, 15vw, 5rem); }
  .service-link { grid-template-columns: 36px 1fr auto; gap: 14px; padding: 28px 0 32px; }
  .service-link h3 { font-size: 2.35rem; }
  .service-link p { font-size: .92rem; }
  .split-section { min-height: auto; }
  .split-copy { padding: 70px 20px; }
  .split-visual { min-height: 350px; }
  .outcome-grid { grid-template-columns: 1fr; }
  .outcome { min-height: 230px; }
  .portfolio-project { grid-template-columns: 1fr; min-height: auto; }
  .client-project-card { min-height: 540px; padding: 30px 24px; }
  .project-main h3 { font-size: clamp(3.2rem,15vw,5rem); }
  .project-main > p { font-size: 1rem; }
  .project-next { display: grid; gap: 7px; }
  .project-footer { align-items: flex-start; }
  .project-footer > b { display: none; }
  .project-monogram { font-size: 10rem; right: -10px; }
  .kinetic-track { padding: 13px 0; animation-duration: 34s; }
  .kinetic-track span { padding-inline: 18px; }
  .project-copy { min-height: 420px; }
  .project-preview { min-height: 230px; border-top: 1px solid var(--line); border-left: 0; }
  .portfolio-experience-grid { grid-template-columns: 1fr; }
  .portfolio-experience { min-height: 250px; }
  .retainer-callout { padding: 70px 20px; }
  .office-teaser figure { min-height: 350px; }
  .office-teaser figcaption { right: 18px; bottom: 18px; left: 18px; display: grid; gap: 5px; }
  .office-copy { padding: 65px 20px; }
  .page-hero { min-height: auto; padding-block: 50px 65px; }
  .page-hero figure { min-height: 370px; }
  .check-list, .audience-list { grid-template-columns: 1fr; }
  .info-card { min-height: 270px; }
  .process-step { grid-template-columns: 42px 1fr; gap: 16px; }
  .pricing-grid { border-left: 0; }
  .price-card { min-height: 500px; border-left: 1px solid var(--ink); }
  .starting-retainer-copy ul { grid-template-columns: 1fr; }
  .starting-price { min-height: 400px; }
  .contact-layout { gap: 60px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; align-items: start; }
  .footer-links { justify-content: flex-start; }
  .footer-meta { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .motion-ready .hero-enter, .motion-ready .motion-item { opacity: 1; transform: none; clip-path: none; }
  .kinetic-track { animation: none; }
  .home-hero-visual img, .split-visual img, .office-teaser figure img, .page-hero figure img { transform: none; }
  .client-project-card:hover, .outcome:hover { transform: none; }
  .hero-orbit-stage, .editorial-hero h1 .serif, .orbit-core { transform: none; }
}

/* Creative department + live signage demonstration */
.creative-teaser { display: grid; grid-template-columns: .72fr 1.28fr; min-height: 720px; background: var(--ink); color: var(--white); }
.creative-teaser-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(55px,7vw,110px); }
.creative-teaser-copy .eyebrow { color: #a6bac9; }
.creative-teaser-copy h2 { margin: 0 0 28px; font-size: clamp(3.3rem,6vw,7rem); line-height: .86; letter-spacing: -.07em; }
.creative-teaser-copy p { max-width: 510px; margin: 0 0 34px; color: rgba(255,255,255,.72); font-size: 1.06rem; }
.creative-teaser-copy .button { width: max-content; }
.creative-workflow-visual { position: relative; min-width: 0; margin: 0; overflow: hidden; background: #ddd; }
.creative-workflow-visual img { height: 100%; min-height: 720px; object-fit: cover; transition: transform 1.1s cubic-bezier(.22,1,.36,1), filter .6s ease; }
.creative-workflow-visual:hover img { transform: scale(1.025); filter: contrast(1.03); }
.workflow-labels { position: absolute; right: 18px; bottom: 18px; left: 18px; display: grid; grid-template-columns: repeat(3,1fr); background: rgba(23,23,23,.88); color: white; backdrop-filter: blur(12px); }
.workflow-labels span { padding: 15px 18px; border-right: 1px solid rgba(255,255,255,.2); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.workflow-labels span:last-child { border: 0; }
.creative-workflow-visual figcaption { position: absolute; top: 18px; right: 18px; padding: 9px 12px; background: var(--paper); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.creative-page-hero figure img { object-position: center; }
.creative-demo { border: 1px solid var(--line); background: var(--white); }
.creative-transform-card { position: relative; display: block; width: 100%; aspect-ratio: 16 / 8.4; padding: 0; overflow: hidden; border: 0; background: #11151e; color: white; cursor: pointer; perspective: 1500px; }
.transform-face { position: absolute; inset: 0; display: block; overflow: hidden; backface-visibility: hidden; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2,.8,.2,1), filter .6s ease; }
.transform-face img { width: 100%; height: 100%; object-fit: cover; }
.transform-raw { transform: rotateY(0); }
.transform-raw img { object-position: left center; filter: saturate(.68) contrast(1.08) brightness(.78); }
.transform-finished { transform: rotateY(180deg); }
.transform-finished img { object-position: center 35%; }
.creative-transform-card:focus-visible .transform-raw, .creative-transform-card.is-flipped .transform-raw { transform: rotateY(-180deg); }
.creative-transform-card:focus-visible .transform-finished, .creative-transform-card.is-flipped .transform-finished { transform: rotateY(0); }
.transform-label, .transform-hint { position: absolute; z-index: 2; padding: 10px 13px; border: 1px solid rgba(255,255,255,.22); background: rgba(6,9,14,.72); font-size: .69rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; backdrop-filter: blur(12px); }
.transform-label { top: 18px; left: 18px; }
.transform-label b { margin-right: 10px; color: #9bb7ff; }
.transform-hint { right: 18px; bottom: 18px; color: rgba(255,255,255,.78); }
.creative-transform-card:focus-visible { outline: 2px solid #9bb7ff; outline-offset: 5px; }
.creative-demo figure { position: relative; margin: 0; overflow: hidden; }
.creative-demo figure > img { aspect-ratio: 12 / 5; object-fit: cover; transition: transform .9s cubic-bezier(.22,1,.36,1); }
.creative-demo:hover figure > img { transform: scale(1.015); }
.creative-demo-labels { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
.creative-demo-labels span { padding: 18px 22px; border-right: 1px solid var(--line); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.creative-demo-labels span:last-child { border: 0; }
.creative-demo-labels b { margin-right: 12px; color: var(--blue); }
.creative-demo-copy { display: grid; grid-template-columns: .55fr 1fr 1.2fr; gap: 40px; align-items: start; padding: clamp(28px,4vw,58px); border-top: 1px solid var(--line); }
.creative-demo-copy > span { color: var(--blue); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.creative-demo-copy h3 { margin: 0; font-size: clamp(1.7rem,3vw,3rem); line-height: .98; letter-spacing: -.05em; }
.creative-demo-copy p { margin: 0; color: var(--muted); }
.creative-capabilities { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.2); border-left: 1px solid rgba(255,255,255,.2); }
.creative-capabilities article { min-height: 280px; padding: 30px; border-right: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); transition: background .35s ease, transform .45s cubic-bezier(.22,1,.36,1); }
.creative-capabilities article:hover { z-index: 2; background: var(--blue); color: white; transform: translateY(-7px); }
.creative-capabilities span { display: block; margin-bottom: 64px; color: #a6bac9; font-size: .75rem; font-weight: 800; }
.creative-capabilities article:hover span, .creative-capabilities article:hover p { color: white; }
.creative-capabilities h3 { margin: 0 0 14px; font-size: 1.5rem; letter-spacing: -.035em; }
.creative-capabilities p { margin: 0; color: rgba(255,255,255,.62); }
.channel-ribbon { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.channel-ribbon span { flex: 1 1 190px; padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 1.05rem; font-weight: 700; text-align: center; transition: background .3s ease,color .3s ease; }
.channel-ribbon span:hover { background: var(--blue); color: white; }

.signage-live-demo { padding: clamp(75px,9vw,135px) 0; background: #111722; color: white; overflow: hidden; }
.signage-demo-grid { display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(45px,7vw,110px); align-items: center; }
.signage-demo-copy .eyebrow { color: #a6bac9; }
.signage-demo-copy h2 { margin: 0 0 26px; font-size: clamp(3rem,5.2vw,6rem); line-height: .88; letter-spacing: -.065em; }
.signage-demo-copy > p { color: rgba(255,255,255,.68); font-size: 1.05rem; }
.signage-demo-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 34px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.signage-demo-meta span { display: flex; align-items: center; gap: 8px; }
.signage-demo-meta i { width: 8px; height: 8px; border-radius: 50%; background: #71e596; box-shadow: 0 0 0 5px rgba(113,229,150,.12); animation: screenPulse 1.8s ease-in-out infinite; }
.demo-tv-wrap { perspective: 1400px; }
.demo-tv { padding: 13px; border-radius: 12px; background: #07090d; box-shadow: 0 35px 90px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.15); transform: rotateY(-3deg); transition: transform .65s cubic-bezier(.22,1,.36,1); }
.demo-tv:hover { transform: rotateY(0) translateY(-5px); }
.demo-tv-screen { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #000; }
.demo-slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity .85s ease, transform 1.2s cubic-bezier(.22,1,.36,1); }
.demo-slide.active { opacity: 1; transform: scale(1); }
.demo-slide img { width: 100%; height: 100%; object-fit: cover; }
.demo-tv-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 11px 5px 0; color: rgba(255,255,255,.58); font-size: .62rem; font-weight: 800; letter-spacing: .1em; }
.demo-tv-bar time { justify-self: end; color: #71e596; }
.demo-dots { display: flex; gap: 7px; }
.demo-dots button { width: 22px; height: 3px; padding: 0; border: 0; background: rgba(255,255,255,.28); cursor: pointer; }
.demo-dots button.active { background: #a6bac9; }
.tv-stand { width: 26%; height: 25px; margin: 0 auto; background: linear-gradient(#292d34,#0b0d11); clip-path: polygon(35% 0,65% 0,100% 100%,0 100%); }
.signage-demo-foot { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; margin-top: 34px; }
.signage-demo-foot > p { color: rgba(255,255,255,.46); font-size: .72rem; }
.qr-demo { display: flex; align-items: center; gap: 18px; max-width: 490px; padding: 16px 20px 16px 16px; background: white; color: var(--ink); }
.qr-demo img { flex: 0 0 84px; width: 84px; height: 84px; }
.qr-demo div { display: grid; gap: 4px; }
.qr-demo span { color: var(--blue); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.qr-demo strong { font-size: 1rem; line-height: 1.15; }
.qr-demo small { color: var(--muted); line-height: 1.3; }
@keyframes screenPulse { 50% { opacity: .45; transform: scale(.82); } }

@media (max-width: 980px) {
  .creative-teaser, .signage-demo-grid { grid-template-columns: 1fr; }
  .creative-teaser-copy { min-height: 540px; }
  .creative-workflow-visual img { min-height: 520px; }
  .creative-capabilities { grid-template-columns: repeat(2,1fr); }
  .signage-demo-copy { max-width: 700px; }
}
@media (max-width: 640px) {
  .creative-teaser-copy { min-height: auto; padding: 70px 24px; }
  .creative-workflow-visual img { min-height: 360px; }
  .workflow-labels { right: 8px; bottom: 8px; left: 8px; }
  .workflow-labels span { padding: 10px 6px; font-size: .58rem; text-align: center; }
  .creative-demo-labels { grid-template-columns: 1fr; }
  .creative-demo-labels span { border-right: 0; border-bottom: 1px solid var(--line); }
  .creative-demo-copy { grid-template-columns: 1fr; gap: 18px; }
  .creative-capabilities { grid-template-columns: 1fr; }
  .signage-live-demo { padding: 70px 0; }
  .demo-tv { padding: 7px; transform: none; }
  .demo-tv-bar { grid-template-columns: 1fr auto; }
  .demo-dots { grid-row: 2; grid-column: 1 / -1; justify-content: center; }
  .signage-demo-foot { grid-template-columns: 1fr; }
  .qr-demo { align-items: flex-start; }
  .qr-demo img { flex-basis: 72px; width: 72px; height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .signage-demo-meta i { animation: none; }
  .demo-slide, .demo-tv, .creative-workflow-visual img { transition: none; }
}

/* Luxury interaction pass */
.services-showcase {
  position: relative;
  padding-block: clamp(90px, 11vw, 165px);
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 18%, rgba(73, 111, 142, .2), transparent 30%),
    linear-gradient(145deg, #0b0d12 0%, #141720 54%, #090a0d 100%);
  color: #f7f3eb;
}
.services-showcase { scroll-margin-top: 78px; }
.services-showcase::before { content: "ZE AQUIRE"; position: absolute; right: -1vw; bottom: -7vw; color: rgba(255,255,255,.018); font-size: clamp(9rem,23vw,28rem); font-weight: 800; letter-spacing: -.11em; line-height: .75; pointer-events: none; }
.services-showcase .section-head { position: relative; z-index: 1; }
.services-showcase .section-head p { color: rgba(255,255,255,.58); }
.services-showcase .eyebrow { color: #a6bac9; }
.service-deck { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; perspective: 1600px; }
.service-flip { position: relative; grid-column: span 3; min-height: 420px; perspective: 1200px; outline: none; }
.service-flip:nth-child(n+3) { grid-column: span 2; min-height: 390px; }
.service-number { position: absolute; z-index: 4; top: 24px; right: 25px; color: rgba(255,255,255,.5); font-size: .72rem; font-weight: 800; letter-spacing: .14em; transition: color .4s ease; }
.service-front, .service-back { position: absolute; inset: 0; display: flex; flex-direction: column; padding: clamp(26px,3vw,42px); overflow: hidden; border: 1px solid rgba(255,255,255,.15); backface-visibility: hidden; transform-style: preserve-3d; transition: transform .72s cubic-bezier(.2,.8,.2,1), border-color .4s ease, box-shadow .4s ease; }
.service-front { justify-content: flex-end; background: linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,.018)); }
.service-front::before { content: ""; position: absolute; top: -25%; right: -20%; width: 72%; aspect-ratio: 1; border: 1px solid rgba(119,158,255,.22); border-radius: 50%; box-shadow: 0 0 80px rgba(35,84,214,.08); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.service-front::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg, transparent, #4778ef, transparent); transform: scaleX(.15); transition: transform .55s ease; }
.service-front small, .service-back > span { position: absolute; top: clamp(26px,3vw,42px); left: clamp(26px,3vw,42px); color: #a6bac9; font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.service-front h3 { position: relative; margin: 0 0 34px; font-size: clamp(2.4rem,4.2vw,5.2rem); letter-spacing: -.065em; line-height: .83; }
.service-flip:nth-child(n+3) .service-front h3 { font-size: clamp(2.2rem,3.1vw,3.8rem); }
.service-front h3 em { color: #b7c7d2; font-family: var(--display); font-weight: 400; }
.service-hint { position: relative; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.48); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.service-hint::after { content: "↗"; color: #a6bac9; font-size: 1rem; }
.service-back { justify-content: flex-end; background: linear-gradient(145deg, #496f8e, #102238); transform: rotateY(180deg); box-shadow: 0 30px 80px rgba(0,0,0,.28); }
.service-back h4 { max-width: 520px; margin: 0 0 18px; font-family: var(--display); font-size: clamp(2rem,3.2vw,3.8rem); font-style: italic; font-weight: 400; line-height: .95; letter-spacing: -.035em; }
.service-back p { max-width: 540px; margin: 0 0 30px; color: rgba(255,255,255,.75); font-size: .98rem; }
.service-back strong { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.service-flip:hover .service-front, .service-flip:focus-visible .service-front { transform: rotateY(-180deg); border-color: rgba(126,165,255,.7); }
.service-flip:hover .service-back, .service-flip:focus-visible .service-back { transform: rotateY(0); }
.service-flip:hover .service-number, .service-flip:focus-visible .service-number { color: white; }
.service-flip:hover .service-front::before { transform: translate(-12%,14%) scale(1.18); }
.service-flip:hover .service-front::after { transform: scaleX(1); }

.creative-teaser { background: #090b10; }
.creative-teaser-copy { position: relative; z-index: 2; background: radial-gradient(circle at 0 10%, rgba(73,111,142,.22), transparent 42%); }
.creative-workflow-visual { background: #090b10; }
.creative-workflow-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,11,16,.33), transparent 20%, transparent 80%, rgba(9,11,16,.12)); pointer-events: none; }
.creative-workflow-visual img { filter: saturate(.88) contrast(1.04); }
.workflow-labels { z-index: 2; right: clamp(14px,2vw,28px); bottom: clamp(14px,2vw,28px); left: clamp(14px,2vw,28px); background: rgba(8,10,14,.7); border: 1px solid rgba(255,255,255,.15); }
.workflow-labels span { display: flex; gap: 12px; align-items: center; }
.workflow-labels b { color: #a6bac9; }
.creative-workflow-visual figcaption { z-index: 2; background: rgba(8,10,14,.72); border: 1px solid rgba(255,255,255,.14); color: white; backdrop-filter: blur(14px); }

body:has(.creative-page-hero) { background: #090b10; color: #f7f3eb; }
body:has(.creative-page-hero) .site-header { background: rgba(9,11,16,.92); border-color: rgba(255,255,255,.12); }
body:has(.creative-page-hero) .brand-mark { box-shadow: 0 0 34px rgba(48,93,220,.34); }
body:has(.creative-page-hero) .desktop-nav a::after { background: white; }
body:has(.creative-page-hero) .menu-button { border-color: rgba(255,255,255,.24); }
body:has(.creative-page-hero) .menu-button span { background: white; }
body:has(.creative-page-hero) .mobile-menu { background: #090b10; }
.creative-page-hero { position: relative; min-height: calc(100vh - 78px); border-color: rgba(255,255,255,.12); background: radial-gradient(circle at 72% 20%, rgba(73,111,142,.24), transparent 33%), #090b10; overflow: hidden; }
.creative-page-hero::before { content: "CREATE"; position: absolute; left: -2vw; bottom: -5vw; color: rgba(255,255,255,.025); font-size: clamp(10rem,27vw,30rem); font-weight: 800; letter-spacing: -.09em; line-height: .7; }
.creative-page-hero .page-hero-grid { position: relative; z-index: 1; align-items: center; }
.creative-page-hero .page-hero-copy { position: relative; z-index: 2; }
.creative-page-hero h1 { max-width: 820px; font-size: clamp(4rem,7vw,8rem); }
.creative-page-hero .page-hero-copy > p { color: rgba(255,255,255,.68); }
.creative-page-hero .button.light { border-color: rgba(255,255,255,.35); color: white; }
.creative-page-hero figure { min-height: 610px; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 35px 90px rgba(0,0,0,.42); }
.creative-page-hero figure::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 80px rgba(0,0,0,.35); pointer-events: none; }
.creative-page-hero figcaption { background: rgba(8,10,14,.74); border: 1px solid rgba(255,255,255,.14); color: white; backdrop-filter: blur(14px); }
.creative-workflow-section { background: linear-gradient(180deg,#10131a,#090b10); }
.creative-workflow-section .section-head p { color: rgba(255,255,255,.58); }
.creative-demo { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.035); box-shadow: 0 40px 120px rgba(0,0,0,.28); }
.creative-demo-labels { border-color: rgba(255,255,255,.15); background: rgba(8,10,14,.68); backdrop-filter: blur(12px); }
.creative-demo-labels span { border-color: rgba(255,255,255,.15); }
.creative-demo-copy { border-color: rgba(255,255,255,.15); }
.creative-demo-copy > span, .creative-demo-labels b { color: #a6bac9; }
.creative-demo-copy p { color: rgba(255,255,255,.6); }
body:has(.creative-page-hero) .section:not(.creative-workflow-section):not(.dark-section) { background: #f4f4f1; color: #15171c; }
body:has(.creative-page-hero) .channel-ribbon { border-color: rgba(255,255,255,.16); }
body:has(.creative-page-hero) .site-footer { background: #07080b; border-color: rgba(255,255,255,.12); }

.outcome, .info-card, .check-list li, .trust-item, .channel-ribbon span { position: relative; overflow: hidden; transition: transform .45s cubic-bezier(.2,.8,.2,1), background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease; }
.outcome::after, .info-card::after, .check-list li::after, .trust-item::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.outcome:hover, .info-card:hover { z-index: 2; transform: translateY(-8px); border-color: rgba(30,85,214,.55); box-shadow: 0 20px 50px rgba(16,25,50,.12); }
.check-list li:hover, .trust-item:hover { transform: translateX(8px); }
.outcome:hover::after, .info-card:hover::after, .check-list li:hover::after, .trust-item:hover::after { transform: scaleX(1); }

@media (max-width: 980px) {
  .service-flip, .service-flip:nth-child(n+3) { grid-column: span 3; }
  .creative-page-hero figure { min-height: 480px; }
}
@media (max-width: 640px) {
  .service-deck { grid-template-columns: 1fr; }
  .service-flip, .service-flip:nth-child(n+3) { grid-column: auto; min-height: 340px; }
  .service-front h3, .service-flip:nth-child(n+3) .service-front h3 { font-size: clamp(2.7rem,14vw,4.2rem); }
  .creative-page-hero figure { min-height: 390px; }
  .creative-workflow-visual img { min-height: 410px; object-position: center; }
  .creative-transform-card { aspect-ratio: 4 / 5; }
  .transform-raw img { width: 285%; max-width: none; object-fit: cover; object-position: left center; }
  .transform-finished img { object-position: center; }
  .transform-label, .transform-hint { right: 12px; left: 12px; width: max-content; max-width: calc(100% - 24px); }
  .transform-label { top: 12px; }
  .transform-hint { bottom: 12px; left: auto; }
}
@media (hover: none) {
  .service-hint { color: rgba(255,255,255,.7); }
  .service-hint::before { content: "Tap to open · "; }
}

/* Moving signage card + suspended 3D hero screen */
.signage-card-back { justify-content: flex-start; padding: 24px; background: linear-gradient(145deg,#111722,#0a0d12); }
.signage-card-back > span { top: 22px; left: 24px; }
.mini-signage-screen { position: relative; aspect-ratio: 16/9; margin-top: 40px; overflow: hidden; border: 7px solid #05070a; border-radius: 3px; background: #05070a; box-shadow: 0 18px 38px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.13); }
.mini-signage-screen::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(115deg,rgba(255,255,255,.16),transparent 21%,transparent 72%,rgba(255,255,255,.06)); pointer-events: none; }
.mini-signage-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); animation: miniScreenLoop 9s infinite; }
.mini-signage-screen img:nth-child(2) { animation-delay: 3s; }
.mini-signage-screen img:nth-child(3) { animation-delay: 6s; }
.mini-signage-screen b { position: absolute; z-index: 4; right: 12px; bottom: 12px; left: 12px; padding: 10px 12px; background: rgba(5,7,10,.78); border: 1px solid rgba(255,255,255,.25); color: white; font-size: .62rem; letter-spacing: .08em; text-align: center; text-transform: uppercase; backdrop-filter: blur(9px); }
.signage-card-back > p { margin: 18px 2px 0; color: rgba(255,255,255,.62); font-size: .84rem; line-height: 1.35; }
@keyframes miniScreenLoop { 0%,30% { opacity: 1; transform: scale(1); } 33%,96% { opacity: 0; transform: scale(1.035); } 100% { opacity: 1; transform: scale(1); } }

.signage-page-hero { position: relative; min-height: calc(100vh - 78px); background: radial-gradient(circle at 80% 35%,rgba(39,83,193,.2),transparent 32%),linear-gradient(135deg,#0a0c10,#151923 58%,#08090c); color: #f8f4ec; border-color: rgba(255,255,255,.12); overflow: hidden; }
.signage-page-hero::before { content: "ON AIR"; position: absolute; right: -1vw; bottom: -2vw; color: rgba(255,255,255,.022); font-size: clamp(10rem,22vw,24rem); font-weight: 800; letter-spacing: -.1em; line-height: .7; pointer-events: none; }
.signage-page-hero .page-hero-grid { position: relative; z-index: 1; grid-template-columns: .86fr 1.14fr; align-items: center; }
.signage-page-hero h1 { font-size: clamp(4rem,7vw,8rem); }
.signage-page-hero .page-hero-copy > p { color: rgba(255,255,255,.65); }
.signage-page-hero .button.light { border-color: rgba(255,255,255,.34); color: white; }
.signage-hero-stage { position: relative; min-height: 660px !important; overflow: visible !important; display: grid; place-items: center; isolation: isolate; perspective: 1500px; }
.signage-hero-stage::before { content: ""; position: absolute; z-index: -2; inset: 5% -6% 0; background: linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012)),repeating-linear-gradient(90deg,transparent 0 82px,rgba(255,255,255,.025) 83px); border: 1px solid rgba(255,255,255,.09); transform: perspective(900px) rotateY(-5deg); box-shadow: inset 0 0 90px rgba(0,0,0,.5),0 45px 120px rgba(0,0,0,.38); }
.signage-hero-stage::after { content: "" !important; position: absolute; z-index: -1; inset: 0; border: 0 !important; background: radial-gradient(ellipse at 50% 35%,rgba(98,139,240,.16),transparent 52%); pointer-events: none; }
.ceiling-mount { position: absolute; z-index: 0; top: 0; right: 17%; left: 17%; height: 150px; border-top: 11px solid #05070a; transform: perspective(800px) rotateX(3deg); }
.ceiling-mount::before, .ceiling-mount::after { content: ""; position: absolute; top: -16px; width: 56px; height: 20px; background: linear-gradient(#373d48,#0a0d12); border: 1px solid rgba(255,255,255,.16); }
.ceiling-mount::before { left: -12px; }
.ceiling-mount::after { right: -12px; }
.ceiling-mount i { position: absolute; top: 0; width: 5px; height: 144px; background: linear-gradient(90deg,#050608,#49505b,#090b0e); box-shadow: 0 0 1px rgba(255,255,255,.7); }
.ceiling-mount i:first-child { left: 7%; }
.ceiling-mount i:last-child { right: 7%; }
.hanging-tv { position: relative; z-index: 2; width: min(100%,760px); margin-top: 84px; padding: 14px 14px 11px; border-radius: 9px; background: linear-gradient(145deg,#333944 0%,#090b0f 18%,#020304 72%,#282e37 100%); box-shadow: 0 55px 100px rgba(0,0,0,.62),0 13px 23px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.2); transform: rotateY(-7deg) rotateX(1.5deg); transform-style: preserve-3d; animation: hangingScreenFloat 5s ease-in-out infinite; transition: transform .75s cubic-bezier(.2,.8,.2,1),box-shadow .75s ease; }
.hanging-tv::before { content: ""; position: absolute; inset: 8px; z-index: 4; border: 1px solid rgba(255,255,255,.11); border-radius: 3px; pointer-events: none; }
.hanging-tv:hover { transform: rotateY(0) rotateX(0) translateY(-7px) scale(1.018); box-shadow: 0 65px 125px rgba(0,0,0,.68),0 0 55px rgba(49,94,214,.2),inset 0 0 0 1px rgba(255,255,255,.28); animation-play-state: paused; }
.hanging-tv-screen { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #000; box-shadow: inset 0 0 28px rgba(0,0,0,.9); }
.hanging-tv-screen::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(115deg,rgba(255,255,255,.15),transparent 18%,transparent 67%,rgba(255,255,255,.06)); pointer-events: none; }
.hanging-tv-screen .demo-slide img { transform: none !important; }
.hanging-tv-edge { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 10px 3px 0; color: rgba(255,255,255,.5); font-size: .56rem; font-weight: 800; letter-spacing: .1em; }
.hanging-tv-edge > span { display: flex; align-items: center; gap: 8px; }
.hanging-tv-edge > span i { width: 7px; height: 7px; border-radius: 50%; background: #69e790; box-shadow: 0 0 10px #69e790; }
.hanging-tv-edge > b { justify-self: end; color: rgba(255,255,255,.32); font-size: inherit; }
.signage-hero-stage figcaption { right: 3%; bottom: 2%; z-index: 4; background: rgba(5,7,10,.72); border: 1px solid rgba(255,255,255,.14); color: white; backdrop-filter: blur(12px); }
@keyframes hangingScreenFloat { 0%,100% { transform: rotateY(-7deg) rotateX(1.5deg) translateY(0); } 50% { transform: rotateY(-6deg) rotateX(1deg) translateY(-7px); } }

@media (max-width: 980px) {
  .signage-page-hero .page-hero-grid { grid-template-columns: 1fr; }
  .signage-hero-stage { min-height: 620px !important; }
}
@media (max-width: 640px) {
  .signage-hero-stage { min-height: 470px !important; }
  .ceiling-mount { right: 10%; left: 10%; height: 100px; }
  .ceiling-mount i { height: 100px; }
  .hanging-tv { margin-top: 60px; padding: 8px 8px 7px; transform: none; animation: none; }
  .hanging-tv-edge { grid-template-columns: 1fr auto; }
  .hanging-tv-edge .demo-dots { display: none; }
  .hanging-tv-edge > b { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mini-signage-screen img, .hanging-tv { animation: none; }
  .mini-signage-screen img:first-child { opacity: 1; }
}

/* Services explorer dropdown */
.services-mega { position: fixed; z-index: 44; top: 78px; right: 0; left: 0; padding: 18px 0 22px; background: rgba(9,12,18,.98); border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.14); color: white; opacity: 0; visibility: hidden; transform: translateY(-16px); transition: opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility .3s; box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.services-mega.open { opacity: 1; visibility: visible; transform: translateY(0); }
.services-mega-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 14px; }
.services-mega-head span { color: #a6bac9; font-size: .67rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.services-mega-head a { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.services-mega-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }
.services-mega-card { position: relative; min-height: 150px; padding: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018)); transition: transform .35s cubic-bezier(.2,.8,.2,1),background .35s ease,border-color .35s ease; }
.services-mega-card::after { content: "↗"; position: absolute; right: 16px; bottom: 14px; color: #a6bac9; transform: translate(-6px,6px); opacity: 0; transition: transform .35s ease,opacity .35s; }
.services-mega-card small { display: block; margin-bottom: 42px; color: rgba(255,255,255,.4); font-size: .62rem; letter-spacing: .1em; }
.services-mega-card strong { display: block; max-width: 180px; font-size: 1rem; line-height: 1.05; }
.services-mega-card p { margin: 8px 20px 0 0; color: rgba(255,255,255,.5); font-size: .7rem; line-height: 1.25; opacity: 0; transform: translateY(8px); transition: opacity .3s ease,transform .3s ease; }
.services-mega-card:hover,.services-mega-card:focus-visible { z-index: 2; background: #496f8e; border-color: #8ea8ba; transform: translateY(-7px); }
.services-mega-card:hover p,.services-mega-card:focus-visible p,.services-mega-card:hover::after,.services-mega-card:focus-visible::after { opacity: 1; transform: translate(0,0); }

/* Full services page */
.services-page { background: #0a0d13; color: #f7f3eb; }
.services-page .site-header { background: rgba(244,244,241,.96); color: #171717; }
.services-hero { position: relative; min-height: calc(100vh - 78px); display: flex; align-items: stretch; overflow: hidden; background: radial-gradient(circle at 82% 24%,rgba(73,111,142,.26),transparent 28%),linear-gradient(135deg,#080a0f,#141925 64%,#090b10); }
.services-hero::after { content: "SERVICES"; position: absolute; right: -2vw; bottom: -3vw; color: rgba(255,255,255,.025); font-size: clamp(10rem,24vw,27rem); font-weight: 800; letter-spacing: -.1em; line-height: .7; }
.services-hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding-block: clamp(70px,8vw,120px); }
.services-hero h1 { max-width: 1180px; margin: auto 0; font-size: clamp(4.6rem,9vw,10.5rem); line-height: .79; letter-spacing: -.075em; }
.services-hero h1 .serif { color: #a6bac9; }
.services-hero-bottom { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.services-hero-bottom p { max-width: 630px; margin: 0; color: rgba(255,255,255,.64); font-size: clamp(1rem,1.5vw,1.3rem); }
.services-hero .button.light { border-color: rgba(255,255,255,.3); color: white; }
.services-glance { padding: 14px 0; background: #10141e; border-block: 1px solid rgba(255,255,255,.12); }
.glance-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }
.glance-grid a { position: relative; min-height: 185px; display: flex; flex-direction: column; padding: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.025); transition: transform .4s cubic-bezier(.2,.8,.2,1),background .35s ease; }
.glance-grid a::before { content: ""; position: absolute; width: 150px; height: 150px; top: -85px; right: -50px; border: 1px solid rgba(166,186,201,.26); border-radius: 50%; transition: transform .45s ease; }
.glance-grid a:hover { z-index: 2; background: #496f8e; transform: translateY(-7px); }
.glance-grid a:hover::before { transform: translate(-25px,30px) scale(1.2); }
.glance-grid small { color: #a6bac9; font-size: .65rem; font-weight: 800; }
.glance-grid a:hover small { color: white; }
.glance-grid strong { margin: auto 0 16px; font-size: 1.08rem; line-height: 1.05; }
.glance-grid span { color: rgba(255,255,255,.5); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.service-chapter { padding-block: clamp(100px,12vw,180px); background: #f4f4f1; color: #15171c; scroll-margin-top: 78px; }
.service-chapter.chapter-blue { background: #101622; color: #f7f3eb; }
.service-chapter-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(55px,9vw,140px); align-items: start; }
.chapter-title { position: sticky; top: 120px; }
.chapter-title > span { color: var(--blue); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.chapter-blue .chapter-title > span { color: #a6bac9; }
.chapter-title h2 { margin: 38px 0 42px; font-size: clamp(3.6rem,6vw,7rem); line-height: .8; letter-spacing: -.07em; }
.chapter-title h2 em { color: var(--blue); font-family: var(--display); font-weight: 400; }
.chapter-blue .chapter-title h2 em { color: #a6bac9; }
.chapter-title > a { display: inline-block; padding-bottom: 6px; border-bottom: 1px solid currentColor; font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.chapter-lead { max-width: 790px; margin: 0 0 60px; font-size: clamp(1.35rem,2.3vw,2.2rem); line-height: 1.23; letter-spacing: -.025em; }
.chapter-list { border-top: 1px solid rgba(23,23,23,.22); }
.chapter-blue .chapter-list { border-color: rgba(255,255,255,.2); }
.chapter-list article { display: grid; grid-template-columns: 52px .75fr 1.25fr; gap: 28px; align-items: start; padding: 30px 0; border-bottom: 1px solid rgba(23,23,23,.22); transition: transform .35s ease,padding-left .35s ease,color .35s ease; }
.chapter-blue .chapter-list article { border-color: rgba(255,255,255,.2); }
.chapter-list article:hover { padding-left: 14px; color: var(--blue); transform: translateX(4px); }
.chapter-blue .chapter-list article:hover { color: #a6bac9; }
.chapter-list b { color: var(--blue); font-size: .68rem; }
.chapter-blue .chapter-list b { color: #a6bac9; }
.chapter-list h3 { margin: 0; font-size: 1.35rem; letter-spacing: -.03em; }
.chapter-list p { margin: 0; color: #69665f; }
.chapter-blue .chapter-list p { color: rgba(255,255,255,.58); }
.engagement-section { padding-block: clamp(100px,11vw,160px); background: #0a0d13; }
.engagement-section .section-head p { color: rgba(255,255,255,.6); }
.engagement-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.18); border-left: 1px solid rgba(255,255,255,.18); }
.engagement-grid article { min-height: 390px; display: flex; flex-direction: column; padding: clamp(30px,4vw,55px); border-right: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); transition: background .35s ease,transform .4s ease; }
.engagement-grid article:hover { z-index: 2; background: #496f8e; transform: translateY(-7px); }
.engagement-grid span { color: #a6bac9; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .11em; }
.engagement-grid article:hover span { color: white; }
.engagement-grid h3 { margin: auto 0 18px; font-family: var(--display); font-size: clamp(2.5rem,4vw,4.8rem); font-style: italic; font-weight: 400; line-height: .9; }
.engagement-grid p { max-width: 560px; color: rgba(255,255,255,.62); }
.engagement-grid a { margin-top: 25px; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.services-page .retainer-callout { background: #dfe3e4; }
.services-page .site-footer { background: #07090d; border-color: rgba(255,255,255,.13); }

@media (max-width: 980px) {
  .services-mega { display: none; }
  .glance-grid { grid-template-columns: repeat(2,1fr); }
  .glance-grid a:last-child { grid-column: 1 / -1; }
  .service-chapter-grid { grid-template-columns: 1fr; }
  .chapter-title { position: static; }
}
@media (max-width: 640px) {
  .services-hero { min-height: 760px; }
  .services-hero h1 { font-size: clamp(4rem,18vw,6.1rem); overflow-wrap: normal; }
  .services-hero-bottom { align-items: start; flex-direction: column; }
  .glance-grid { grid-template-columns: 1fr; }
  .glance-grid a:last-child { grid-column: auto; }
  .glance-grid a { min-height: 145px; }
  .chapter-title h2 { font-size: clamp(3.8rem,18vw,6rem); }
  .chapter-list article { grid-template-columns: 38px 1fr; gap: 14px; }
  .chapter-list article p { grid-column: 2; }
  .engagement-grid { grid-template-columns: 1fr; }
  .engagement-grid article { min-height: 330px; }
}

/* Premium motion and interaction layer */
:root { --ease-luxury: cubic-bezier(.22,1,.36,1); }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: luxury-page-out .28s var(--ease-luxury) both; }
::view-transition-new(root) { animation: luxury-page-in .48s var(--ease-luxury) both; }
@keyframes luxury-page-out { to { opacity: 0; transform: translateY(-8px); filter: blur(2px); } }
@keyframes luxury-page-in { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } }
body { animation: luxury-page-in .52s var(--ease-luxury) both; }
body main { transition: opacity .28s ease, transform .38s var(--ease-luxury), filter .28s ease; }
body.is-leaving main { opacity: .18; transform: translateY(-10px); filter: blur(2px); }
.lux-scroll { translate: 0 var(--lux-scroll-y,0); transition: translate .18s linear; will-change: translate; }

.page-hero-grid { position: relative; z-index: 2; }
.page-hero figure { --tilt-x: 0deg; --tilt-y: 0deg; transform: perspective(1400px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transform-style: preserve-3d; border: 1px solid rgba(17,18,20,.13); box-shadow: 0 34px 90px rgba(16,34,56,.13); transition: transform .7s var(--ease-luxury), box-shadow .7s var(--ease-luxury); }
.page-hero figure:hover { box-shadow: 0 46px 110px rgba(16,34,56,.2); }
.shopify-page-hero figure img { object-position: 54% center; filter: saturate(.84) contrast(1.025); }
.shopify-page-hero figure::before { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(120deg,rgba(255,255,255,.12),transparent 38%,rgba(73,111,142,.06)); opacity: .7; pointer-events: none; transition: opacity .5s ease; }
.shopify-page-hero figure:hover::before { opacity: .25; }

.management-page-hero { position: relative; isolation: isolate; min-height: calc(100svh - 78px); display: flex; align-items: center; padding-block: clamp(72px,9vw,132px); overflow: hidden; background: #0b1420; color: white; border-color: rgba(255,255,255,.12); }
.management-page-hero::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg,rgba(7,14,23,.97) 0%,rgba(7,14,23,.91) 35%,rgba(7,14,23,.58) 58%,rgba(7,14,23,.12) 100%); pointer-events: none; }
.management-page-hero::after { content: "OPERATIONS"; position: absolute; z-index: 1; left: -1vw; bottom: -3vw; color: rgba(255,255,255,.028); font-size: clamp(8rem,20vw,23rem); font-weight: 800; letter-spacing: -.09em; line-height: .72; pointer-events: none; }
.management-hero-media { position: absolute; z-index: 0; inset: 0; overflow: hidden; }
.management-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: translate3d(0,var(--management-scroll-y,0),0) scale(1.07); filter: saturate(.8) contrast(1.05); animation: management-breathe 14s ease-in-out infinite alternate; will-change: transform; }
@keyframes management-breathe { from { scale: 1; } to { scale: 1.025; } }
.management-page-hero .page-hero-grid { grid-template-columns: minmax(0,1fr); width: 100%; align-items: center; }
.management-page-hero .page-hero-copy { max-width: 850px; }
.management-page-hero h1 { max-width: 850px; margin: clamp(32px,5vw,64px) 0 30px; font-size: clamp(3.7rem,7vw,7.6rem); line-height: .82; }
.management-page-hero .page-hero-copy > p { max-width: 610px; color: rgba(255,255,255,.72); }
.management-page-hero .eyebrow { color: #b7c7d2; }
.management-page-hero .button.light { border-color: rgba(255,255,255,.45); color: white; }
.management-page-hero .button.light:hover { background: rgba(255,255,255,.1); }

.button { position: relative; isolation: isolate; overflow: hidden; transition: color .28s ease, background .28s ease, border-color .28s ease, transform .45s var(--ease-luxury), box-shadow .45s ease; }
.button::before { content: ""; position: absolute; z-index: -1; top: -60%; left: -35%; width: 28%; height: 220%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); transform: rotate(18deg) translateX(-260%); transition: transform .72s var(--ease-luxury); }
.button:hover::before { transform: rotate(18deg) translateX(650%); }
.button:hover { box-shadow: 0 16px 34px rgba(16,34,56,.14); }
.button:active { transform: translate(var(--magnetic-x,0),var(--magnetic-y,0)) scale(.975); transition-duration: .12s; }
.desktop-nav a, .footer-links a, .direct-links a { transition: color .25s ease, opacity .25s ease, transform .35s var(--ease-luxury); }
.footer-links a:hover, .direct-links a:hover { transform: translateY(-2px); }
.info-card, .price-card, .process-step, .chapter-list article, .check-list li, .audience-list > *, .faq-list details { transition-timing-function: var(--ease-luxury); }
.info-card:hover, .price-card:hover { box-shadow: 0 24px 66px rgba(16,34,56,.12); }
.faq-list summary { transition: color .28s ease, padding-left .38s var(--ease-luxury); }
.faq-list summary:hover { color: var(--blue); padding-left: 10px; }
.faq-list details[open] p { animation: faq-reveal .42s var(--ease-luxury) both; }
@keyframes faq-reveal { from { opacity: 0; transform: translateY(-8px); } }
.custom-select-menu { transform-origin: top; animation: select-reveal .28s var(--ease-luxury) both; }
@keyframes select-reveal { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.menu-button:hover { border-color: var(--blue); }
.mobile-menu nav a { transition: color .25s ease, padding-left .4s var(--ease-luxury); }
.mobile-menu nav a:hover { color: var(--blue); padding-left: 10px; }

@media (max-width: 980px) {
  .management-page-hero { min-height: 760px; }
  .management-page-hero::before { background: linear-gradient(90deg,rgba(7,14,23,.95),rgba(7,14,23,.73) 68%,rgba(7,14,23,.38)); }
  .management-page-hero h1 { max-width: 760px; font-size: clamp(4.4rem,11vw,7rem); }
}
@media (max-width: 640px) {
  .management-page-hero { min-height: calc(100svh - 68px); padding-block: 68px 54px; }
  .management-page-hero::before { background: linear-gradient(180deg,rgba(7,14,23,.88),rgba(7,14,23,.96) 78%); }
  .management-hero-media img { object-position: 68% center; opacity: .5; }
  .management-page-hero h1 { margin: 36px 0 26px; font-size: clamp(3.35rem,15.2vw,5.1rem); line-height: .84; }
  .management-page-hero .hero-actions { grid-template-columns: 1fr; }
  .shopify-page-hero figure { min-height: 330px; }
  .shopify-page-hero figure img { object-position: 50% center; }
  .lux-scroll { translate: 0 calc(var(--lux-scroll-y,0) * .45); }
}
@media (prefers-reduced-motion: reduce) {
  body, .management-hero-media img, .custom-select-menu, .faq-list details[open] p { animation: none !important; }
  body main, .lux-scroll, .page-hero figure { transition: none !important; translate: 0 !important; transform: none !important; }
}

/* Seamless service heroes */
.immersive-service-hero { position: relative; isolation: isolate; min-height: calc(100svh - 78px); display: flex; align-items: center; padding-block: clamp(72px,9vw,132px); overflow: hidden; background: #0b1420; color: white; border-color: rgba(255,255,255,.12); }
.immersive-service-hero::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg,rgba(7,14,23,.97) 0%,rgba(7,14,23,.9) 35%,rgba(7,14,23,.56) 59%,rgba(7,14,23,.14) 100%); pointer-events: none; }
.immersive-service-hero::after { position: absolute; z-index: 1; left: -1vw; bottom: -3vw; color: rgba(255,255,255,.028); font-size: clamp(8rem,20vw,23rem); font-weight: 800; letter-spacing: -.09em; line-height: .72; pointer-events: none; }
.shopify-page-hero::after { content: "SHOPIFY"; }
.social-page-hero::after { content: "CONTENT"; }
.creative-page-hero::after { content: "CREATE"; }
.service-hero-media { position: absolute; z-index: 0; inset: 0; overflow: hidden; }
.service-hero-media img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0,var(--management-scroll-y,0),0) scale(1.07); filter: saturate(.78) contrast(1.05); animation: management-breathe 14s ease-in-out infinite alternate; will-change: transform; }
.shopify-page-hero .service-hero-media img { object-position: 64% center; }
.social-page-hero .service-hero-media img { object-position: 60% center; }
.creative-page-hero .service-hero-media img { object-position: 76% 34%; }
.immersive-service-hero .page-hero-grid { grid-template-columns: minmax(0,1fr); width: 100%; align-items: center; }
.immersive-service-hero .page-hero-copy { position: relative; z-index: 2; max-width: 870px; }
.immersive-service-hero h1, .creative-page-hero.immersive-service-hero h1 { max-width: 870px; margin: clamp(32px,5vw,64px) 0 30px; font-size: clamp(3.7rem,7vw,7.6rem); line-height: .82; }
.immersive-service-hero .page-hero-copy > p { max-width: 620px; color: rgba(255,255,255,.72); }
.immersive-service-hero .eyebrow { color: #b7c7d2; }
.immersive-service-hero .button.light { border-color: rgba(255,255,255,.45); color: white; }
.immersive-service-hero .button.light:hover { background: rgba(255,255,255,.1); }

/* True two-sided raw-to-editorial comparison */
.creative-transform-card { aspect-ratio: 16 / 9.5; }
.transform-face { -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; transition: transform .9s var(--ease-luxury), opacity .38s ease, filter .6s ease; }
.transform-raw { opacity: 1; background: #050608; }
.transform-raw img { width: 100%; max-width: 100%; object-fit: cover; object-position: center; filter: saturate(.7) contrast(1.1) brightness(.76); }
.transform-finished { opacity: 0; background: #080a0f; }
.transform-finished img { width: 100%; max-width: 100%; object-fit: contain; object-position: center; }
.creative-transform-card:focus-visible .transform-raw, .creative-transform-card.is-flipped .transform-raw { opacity: 0; transform: rotateY(-180deg); pointer-events: none; }
.creative-transform-card:focus-visible .transform-finished, .creative-transform-card.is-flipped .transform-finished { opacity: 1; transform: rotateY(0); pointer-events: auto; }

@media (hover: hover) and (pointer: fine) {
  .creative-transform-card:hover .transform-raw { opacity: 0; transform: rotateY(-180deg); }
  .creative-transform-card:hover .transform-finished { opacity: 1; transform: rotateY(0); }
}

@media (max-width: 980px) {
  .immersive-service-hero { min-height: 760px; }
  .immersive-service-hero::before { background: linear-gradient(90deg,rgba(7,14,23,.95),rgba(7,14,23,.72) 68%,rgba(7,14,23,.38)); }
  .immersive-service-hero h1, .creative-page-hero.immersive-service-hero h1 { max-width: 760px; font-size: clamp(4.4rem,11vw,7rem); }
}
@media (max-width: 640px) {
  .immersive-service-hero { min-height: calc(100svh - 68px); padding-block: 68px 54px; }
  .immersive-service-hero::before { background: linear-gradient(180deg,rgba(7,14,23,.82),rgba(7,14,23,.97) 78%); }
  .service-hero-media img { opacity: .52; }
  .shopify-page-hero .service-hero-media img { object-position: 66% center; }
  .social-page-hero .service-hero-media img { object-position: 58% center; }
  .creative-page-hero .service-hero-media img { object-position: 58% center; }
  .immersive-service-hero h1, .creative-page-hero.immersive-service-hero h1 { margin: 36px 0 26px; font-size: clamp(3.35rem,15.2vw,5.1rem); line-height: .84; }
  .immersive-service-hero .hero-actions { grid-template-columns: 1fr; }
  .creative-transform-card { aspect-ratio: 4 / 5; }
  .transform-raw img { width: 100%; max-width: 100%; object-fit: cover; object-position: center; }
  .transform-finished img { object-fit: contain; object-position: center; }
}
@media (prefers-reduced-motion: reduce) {
  .service-hero-media img { animation: none !important; transform: none !important; }
}