.home-page main { padding: 0; }
.identity-hero { position: relative; isolation: isolate; height: min(1160px, calc(100svh - 96px)); min-height: min(820px, calc(100svh - 96px)); overflow: hidden; }
.hero-heading { position: relative; z-index: 3; padding: 48px var(--gutter) 0; text-align: center; pointer-events: none; transition: opacity 350ms; }
.hero-heading h1 { margin: 22px auto 0; font: 900 clamp(54px, 8.2vw, 184px)/.95 var(--display); letter-spacing: -.06em; }
.hero-positioning { margin: 0; font-size: 10px; color: var(--muted); letter-spacing: .06em; }
.reel-entry { position: absolute; z-index: 4; top: clamp(196px, 28%, 320px); left: 50%; transform: translateX(-50%); transition: opacity 400ms; }
.reel-trigger { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 196px; padding: 18px; color: var(--text); border: 0; background: transparent; animation: reel-hover 7s ease-in-out infinite alternate; }
.reel-symbol { position: relative; isolation: isolate; width: 88px; height: 88px; display: grid; place-items: center; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 1px #80a3ff66, 0 0 32px #1355ff40; transition: transform 350ms var(--ease), box-shadow 350ms; }
.reel-symbol::before { content: ''; position: absolute; z-index: -1; inset: -38px; border-radius: 50%; background: radial-gradient(circle, #1355ff55 0%, #1355ff22 38%, transparent 70%); pointer-events: none; animation: reel-glow 5s ease-in-out infinite alternate; }
@keyframes reel-hover { to { transform: translateY(-6px); } }
@keyframes reel-glow { from { opacity: .55; transform: scale(.94); } to { opacity: 1; transform: scale(1.08); } }
.reel-symbol svg { width: 29px; height: 29px; fill: #fff; margin-left: 4px; }
.reel-orbit { position: absolute; width: 112px; height: 112px; top: 6px; border: 1px solid var(--line); border-radius: 50%; transition: transform 350ms var(--ease), border-color 350ms; pointer-events: none; }
.reel-label { font-size: 12px; letter-spacing: .065em; }
.reel-trigger:hover .reel-symbol, .reel-trigger:focus-visible .reel-symbol { transform: scale(1.04); box-shadow: 0 0 42px #1355ff33; }
.reel-trigger:hover .reel-orbit, .reel-trigger:focus-visible .reel-orbit { transform: scale(1.05); border-color: var(--accent); }

.earth-scene { position: absolute; inset: 0; z-index: 1; transform-origin: 50% 100%; transition: transform var(--motion-cinematic) var(--ease-enter), opacity var(--motion-cinematic); }
.earth-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.earth-canvas:active { cursor: grabbing; }
.earth-marker { position: absolute; left: 0; top: 0; transform: translate3d(var(--marker-x, -200px), var(--marker-y, -200px), 0) translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; padding: 8px; color: var(--text); min-width: 80px; }
.marker-select { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 44px; padding: 4px; border: 0; color: inherit; background: transparent; }
.marker-logo img { width: 84px; height: 48px; object-fit: contain; filter: brightness(0) invert(1); mix-blend-mode: normal; opacity: .95; transition: opacity var(--micro), transform var(--micro); }
.marker-logo img[src$="amiri.png"] { filter: brightness(0) invert(1); }
.marker-logo img:is([src$="celsius.png"], [src$="a24.png"], [src$="euphoria.png"], [src$="hbo.svg"], [src$="toyota.png"]) { filter: brightness(0) invert(1); mix-blend-mode: normal; }
.marker-logo img:is([src$="qc.png"], [src$="reebok.png"], [src$="warner-records-white.svg"], [src$="osamason-freestyle-logo.png"], [src$="columbia.png"], [src$="meek-mill-dream-chasers-hq.png"]) { filter: brightness(0) invert(1); mix-blend-mode: normal; }
.marker-logo img:is([src$="bloodsweat-g59-upscaled.png"], [src$="burna-spaceship-upscaled.png"], [src$="jim-legxacy-upscaled.png"]) { filter: brightness(0) invert(1); mix-blend-mode: normal; }
.marker-logo img[src$="arcteryx.png"] { object-fit: cover; filter: url(#white-paper-ink); mix-blend-mode: normal; }
.marker-logo img:is([src$="ram.jpg"], [src$="lyrical-lemonade-globe.png"]) { filter: url(#white-paper-ink); mix-blend-mode: normal; }
.marker-logo img[src$="roc-nation.svg"] { filter: url(#white-paper-ink); mix-blend-mode: normal; }
.marker-logo img:is([src$="rolex.svg"], [src$="watches-of-switzerland.svg"], [src$="musicow.png"], [src$="hellstar.png"], [src$="nba.png"]) { filter: brightness(0) invert(1); mix-blend-mode: normal; }
[data-theme="light"] .marker-logo img { filter: url(#cobalt-ink); mix-blend-mode: normal; opacity: 1; }
[data-theme="light"] .marker-logo img[src$="amiri.png"] { filter: url(#cobalt-ink); }
[data-theme="light"] .marker-logo img[src$="arcteryx.png"] { filter: url(#cobalt-paper-ink); }
[data-theme="light"] .marker-logo img:is([src$="ram.jpg"], [src$="lyrical-lemonade-globe.png"]) { filter: url(#cobalt-paper-ink); }
[data-theme="light"] .marker-logo img[src$="roc-nation.svg"] { filter: url(#cobalt-paper-ink); }
[data-theme="light"] .marker-logo img:is([src$="bloodsweat-g59-upscaled.png"], [src$="burna-spaceship-upscaled.png"], [src$="jim-legxacy-upscaled.png"]) { filter: url(#cobalt-ink); }
/* Ford’s script and outline use the same theme ink as the other logos. */
.marker-logo img[src$="ford-outline.svg"] { filter: brightness(0) invert(1); mix-blend-mode: normal; }
[data-theme="light"] .marker-logo img[src$="ford-outline.svg"] { filter: url(#cobalt-ink); opacity: 1; }
.marker-select:hover .marker-logo img, .marker-select:focus-visible .marker-logo img { opacity: 1; transform: scale(1.04); }
.is-chosen .marker-logo img { opacity: 1; }
.marker-logo img[src$="lyrical-lemonade-carton.png"] { width: 34px; height: 62px; object-fit: contain; filter: brightness(0) invert(1); mix-blend-mode: normal; opacity: 1; }
[data-theme="light"] .marker-logo img[src$="lyrical-lemonade-carton.png"] { filter: url(#cobalt-ink); }
.marker-logo img[src$="atlantic.png"] { filter: brightness(0) invert(1); mix-blend-mode: normal; }
.marker-logo img[src$="freeminded.png"] { filter: brightness(0) invert(1); mix-blend-mode: normal; }
[data-theme="light"] .marker-logo img[src$="atlantic.png"] { filter: url(#cobalt-ink); }
.marker-info { position: absolute; top: 100%; display: block; white-space: nowrap; font-size: 10px; line-height: 1.4; opacity: 0; transform: translateY(3px); transition: opacity var(--micro), transform var(--micro); }
.marker-info > span { display: block; color: var(--muted); font-size: 9px; }
.is-chosen .marker-info { position: static; }
.marker-select:hover .marker-info, .marker-select:focus-visible .marker-info, .is-chosen .marker-info { opacity: 1; transform: none; }
.marker-stem { height: calc(20px + var(--marker-lift, 0px)); width: 1px; background: var(--muted); margin-bottom: calc(-1 * var(--marker-lift, 0px)); }
.marker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); position: absolute; bottom: calc(-3px - var(--marker-lift, 0px)); }
.client-marker, .city-marker { visibility: hidden; pointer-events: none; }
[data-client-markers] { position: absolute; inset: 0; pointer-events: none; }
:is(.client-marker, .city-marker) > .marker-select, .client-marker > .marker-prompt {
  opacity: var(--marker-label-opacity, 0);
  transform: translate(var(--marker-label-x, 0px), var(--marker-label-shift, -20px)) scale(var(--marker-label-scale, .94));
  transform-origin: 50% 100%;
  pointer-events: auto;
}
:is(.client-marker, .city-marker) > .marker-stem {
  position: absolute; bottom: 0; height: var(--marker-line-length, 0px); margin: 0;
  background: #b9c3d4;
  transform: rotate(var(--marker-line-angle, 0deg)); transform-origin: 50% 100%;
  opacity: 0; transition: opacity var(--motion-micro);
}
:is(.client-marker, .city-marker):is(:hover, :focus-within, .is-chosen) > .marker-stem { opacity: .65; }
.city-marker:has([aria-expanded="true"]) > .marker-stem { opacity: .65; }
:is(.client-marker, .city-marker) > .marker-dot { bottom: -3.5px; border-radius: 1px; transform: rotate(45deg); opacity: var(--marker-dot-opacity, 0); }
.client-marker.is-chosen { z-index: 6; width: 270px; padding: 16px 12px 8px; }
.is-chosen .marker-logo img { width: 100px; height: 54px; }
.marker-prompt { width: 100%; text-align: center; padding: 16px; border-radius: 20px; }
.marker-prompt .marker-film-label { color: var(--muted); font-size: 9px; letter-spacing: .08em; margin-top: 0; }
.marker-prompt p { margin: 12px 0 8px; font-size: 14px; line-height: 1.35; }
.marker-prompt > span { color: var(--muted); font-size: 11px; }
.marker-play { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 0 10px; min-height: 44px; width: 100%; border: 0; background: var(--cobalt); color: #fff; font-size: 10px; letter-spacing: .04em; transition: filter var(--micro); }
.marker-play svg { width: 16px; height: 16px; }
.marker-play:hover { filter: brightness(1.15); }
.marker-dismiss, .team-dismiss { position: absolute; right: 0; top: 0; width: 44px; height: 44px; border: 0; color: var(--muted); background: transparent; font-size: 22px; }
.team-marker { width: 44px; height: 44px; min-width: 0; padding: 0; transform: translate3d(var(--marker-x, -200px), var(--marker-y, -200px), 0) translate(-50%, -50%); }
.team-beacon { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; }
.team-beacon > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 4px #1355ff1c, 0 0 18px #1355ff88; transition: transform var(--motion-ui) var(--ease-settle), box-shadow var(--motion-ui); }
[data-theme="light"] .team-beacon > span { background: var(--cobalt); }
.team-beacon:hover > span, .team-beacon:focus-visible > span, .team-beacon[aria-expanded="true"] > span { transform: scale(1.3); box-shadow: 0 0 0 6px #1355ff22, 0 0 24px #1355ffcc; }
.team-marker.is-chosen { z-index: 7; }
.team-profiles { position: absolute; bottom: 34px; left: var(--profile-left, -122px); width: min(288px, calc(100vw - 40px)); padding: 20px; border-radius: 20px; }
.team-profiles.is-below { bottom: auto; top: 34px; }
.team-place-label { margin: 0 30px 14px 0; color: var(--accent); font-size: 11px; line-height: 1.5; text-transform: uppercase; letter-spacing: .04em; }
.team-profiles a { display: flex; gap: 12px; align-items: center; min-height: 64px; padding-block: 12px; font-size: 12px; text-decoration: none; border-top: 1px solid var(--line); }
.team-profiles a > .portrait-frame { width: 48px; height: 48px; }
.team-person { display: grid; gap: 5px; min-width: 0; }
.team-person strong { font-weight: 500; }
.team-person > span { color: var(--muted); font-size: 10px; line-height: 1.45; }
.team-person small { color: var(--accent); font-size: 9px; margin-top: 3px; }
.team-profiles a:hover strong { color: var(--accent); }
.team-approximate { color: var(--muted); font-size: 9px; line-height: 1.4; margin-bottom: 0; }

.world-toolbar { position: absolute; z-index: 5; left: var(--gutter); right: var(--gutter); bottom: 90px; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 16px 24px; }
.globe-interface { display: contents; }
.earth-explorer-trigger { display: none; }
.earth-explorer-trigger:disabled { opacity: .55; cursor: wait; }
.earth-preview-hint { display: none; }
.earth-explorer { display: none; }
.earth-explorer[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; position: fixed; inset: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); border: 0; color: var(--text); background: var(--background); overflow: hidden; }
.earth-explorer::backdrop { background: var(--background); }
.earth-explorer > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.earth-explorer h2 { margin: 8px 0 0; font: 500 clamp(20px, 5vw, 28px)/1.15 var(--display); letter-spacing: -.03em; }
.earth-explorer [data-close-earth-explorer] { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; color: inherit; background: transparent; font-size: 9px; }
.earth-explorer [data-close-earth-explorer] > span { font-size: 22px; }
.earth-explorer-help { margin: 16px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.earth-explorer-stage { position: relative; min-height: 0; overflow: hidden; }
.earth-explorer-film { position: absolute; z-index: 5; top: 120px; bottom: 144px; left: 16px; right: 16px; display: flex; justify-content: center; align-items: center; pointer-events: none; }
.earth-explorer-film .marker-prompt { position: relative; width: min(320px, 100%); max-height: 100%; overflow: auto; touch-action: pan-y; pointer-events: auto; }
.earth-explorer:has(.earth-explorer-film:not([hidden])) .earth-explorer-stage { opacity: .3; }
.earth-explorer .earth-scene { position: relative; inset: auto; width: 100%; height: 100%; transform: none; transition: none; }
/* Compact touch targets retain a stable local lane around the geographic pin. */
[data-earth][data-earth-mode="preview"] :is(.client-marker, .city-marker),
[data-earth][data-earth-mode="explore"] :is(.client-marker, .city-marker) { width: 72px; min-width: 0; padding: 8px; }
[data-earth]:is([data-earth-mode="preview"], [data-earth-mode="explore"]) .marker-select { width: 56px; min-height: 44px; padding: 0; gap: 2px; }
[data-earth]:is([data-earth-mode="preview"], [data-earth-mode="explore"]) .marker-logo img { width: clamp(36px, 10.5vw, 44px); height: 24px; transform: none; transition: opacity var(--micro); }
[data-earth]:is([data-earth-mode="preview"], [data-earth-mode="explore"]) .marker-select:active { background: #1355ff20; border-radius: 8px; }
[data-earth]:is([data-earth-mode="preview"], [data-earth-mode="explore"]) .marker-info { position: static; max-width: 56px; margin: 0; color: var(--muted); font-size: 8px; line-height: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .75; transform: none; }
[data-earth]:is([data-earth-mode="preview"], [data-earth-mode="explore"]) .city-logo-grid { flex-wrap: nowrap; width: 56px; height: 28px; gap: 4px; padding: 0; border: 0; border-radius: 0; background: transparent; }
[data-earth]:is([data-earth-mode="preview"], [data-earth-mode="explore"]) .city-logo-grid .marker-logo { flex: 1 1 0; min-width: 0; }
[data-earth]:is([data-earth-mode="preview"], [data-earth-mode="explore"]) .city-logo-grid .marker-logo img { width: 26px; height: 18px; }
[data-earth]:is([data-earth-mode="preview"], [data-earth-mode="explore"]) .city-caption { max-width: 56px; padding-top: 0; font-size: 8px; line-height: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-earth]:is([data-earth-mode="preview"], [data-earth-mode="explore"]) .city-caption > span { display: none; }
[data-earth]:is([data-earth-mode="preview"], [data-earth-mode="explore"]) .city-caption::after { content: ' +'; color: var(--accent); }
[data-earth]:is([data-earth-mode="preview"], [data-earth-mode="explore"]) :is(.client-marker, .city-marker) > .marker-stem { opacity: calc(var(--marker-label-opacity, 0) * .3); }
[data-earth]:is([data-earth-mode="preview"], [data-earth-mode="explore"]) :is(.client-marker, .city-marker) > .marker-dot { display: none; }
.earth-explorer :is(.earth-canvas, .marker-select) { touch-action: none; }
.earth-explorer > footer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.earth-explorer .client-directory > summary { display: flex; justify-content: space-between; min-height: 48px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; font-size: 10px; }
.earth-explorer .client-directory-panel { touch-action: pan-y; }
.earth-explorer .client-directory-panel button { min-height: 44px; color: var(--text); }
.earth-explorer-directions { display: flex; justify-content: center; gap: 8px; }
.earth-explorer-directions button { flex: 0 0 48px; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 8px; color: inherit; background: transparent; font-size: 23px; }
.is-globe-exploring { overscroll-behavior: none; }
@media (min-width: 600px) and (max-height: 500px) { .earth-explorer[open] { grid-template-columns: minmax(0, 1fr) 272px; grid-template-rows: auto auto minmax(0, 1fr); gap: 0 20px; } .earth-explorer > header { grid-column: 1 / -1; } .earth-explorer-help { grid-column: 1; } .earth-explorer-stage { grid-column: 1; grid-row: 3; } .earth-explorer > footer { grid-column: 2; grid-row: 2 / span 2; align-self: center; border-top: 0; } .earth-explorer-film { top: 80px; bottom: 16px; right: 308px; } }
.selected-work-jump { position: absolute; z-index: 5; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 52px; padding: 6px 12px; color: var(--text); font-size: 10px; letter-spacing: .08em; text-decoration: none; }
.selected-work-jump svg { width: 22px; height: 22px; transition: transform var(--motion-micro) var(--ease-settle); }
.selected-work-jump:hover svg { transform: translateY(3px); }
.selected-work-jump:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.world-heading h2 { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .055em; }
.world-heading > span { display: block; font-size: 9px; line-height: 1.4; color: var(--muted); margin-top: 7px; letter-spacing: .035em; }
.collective-link { display: flex; align-items: center; justify-content: end; gap: 12px; min-height: 44px; font-size: 10px; text-decoration: none; color: var(--accent); }
.collective-link span { transition: transform var(--motion-micro) var(--ease-settle); }
.collective-link:hover span { transform: translateX(2px); }
.client-index { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.client-index button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0; color: var(--text); border: 0; border-bottom: 1px solid var(--line); background: var(--background); font-size: 11px; }
.client-city { color: var(--muted); font-size: 10px; }
.client-index button:hover, .client-index button:focus-visible, .client-index button[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.world-hint { display: flex; align-items: center; justify-self: end; gap: 16px; font-size: 9px; letter-spacing: .04em; color: var(--muted); }
.world-hint button { width: 44px; height: 44px; background: var(--background); color: var(--text); border: 1px solid var(--line); border-radius: 50%; font-size: 24px; }
.earth-controls { display: flex; gap: 16px; align-items: center; }
.map-credit { display: inline-flex; align-items: center; min-height: 44px; font-size: 9px; text-decoration: none; }
.map-credit:hover { color: var(--accent); }
.home-selected { padding-inline: var(--gutter); margin-top: 48px; scroll-margin-top: 112px; }
.client-directory-city { margin-left: auto; color: var(--muted); font-size: 9px; text-align: right; }
.home-capabilities {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr);
  gap: 32px;
  margin: 32px var(--gutter) 0;
  padding-block: 24px;
  border-block: 1px solid var(--line);
}
.home-capabilities .eyebrow { color: var(--accent); }
.home-capabilities a { text-decoration: none; }
.home-partners { padding-right: 24px; border-right: 1px solid var(--line); }
.home-partners > a { display: flex; justify-content: space-between; align-items: center; min-height: 44px; margin-top: 8px; font-size: 20px; }
.home-partners > a span { color: var(--accent); font-size: 14px; }
.home-capabilities p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.home-service-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; }
.home-service-list > a { position: relative; padding: 4px 24px 4px 16px; border-left: 1px solid var(--line); min-height: 58px; }
.home-service-list > a:first-child { padding-left: 0; border-left: 0; }
.home-service-list h3 { margin: 0 0 8px; font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--accent); text-transform: uppercase; }
.home-service-list > a > span { position: absolute; right: 8px; top: 3px; color: var(--accent); opacity: 0; transform: translate(-2px, 2px); transition: opacity var(--micro), transform var(--micro) var(--ease); }
.home-service-list > a:hover > span, .home-service-list > a:focus-visible > span { opacity: 1; transform: none; }
.home-partners > a:hover { color: var(--accent); }
.marker-play { text-decoration: none; }
.client-directory { position: relative; align-self: start; }
.client-directory summary { display: flex; align-items: center; gap: 16px; min-height: 44px; padding: 8px 0; color: var(--accent); cursor: pointer; list-style: none; font-size: 10px; }
.client-directory summary::-webkit-details-marker { display: none; }
.client-directory summary span { transition: transform var(--micro) var(--ease); }
.client-directory[open] summary span { transform: rotate(45deg); }
.client-directory-panel { position: fixed; z-index: 8; left: var(--directory-left, 20px); top: var(--directory-top, 80px); width: min(460px, calc(100vw - 40px)); max-height: min(340px, calc(100svh - 40px)); overflow: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; padding: 24px; border-radius: 20px; animation: client-list-enter var(--motion-ui) var(--ease-enter) both; }
.client-directory-panel button { justify-content: space-between; text-align: left; background: transparent; font-size: 11px; }
.client-directory-panel .profile-stars { opacity: .6; }
@keyframes client-list-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px), (horizontal-viewport-segments: 2) {
  .home-capabilities { grid-template-columns: 1fr; gap: 24px; }
  .home-partners { padding: 0 0 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .home-partners > a { justify-content: start; gap: 24px; }
}
@media (max-width: 640px), (horizontal-viewport-segments: 2) {
  .home-service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .home-service-list > a:nth-child(odd) { padding-left: 0; border-left: 0; }
}
.star-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; transition: opacity 600ms; }
.star-layer { position: absolute; inset: 0; animation: star-drift var(--motion-ambient) ease-in-out infinite alternate; }
.star-layer:nth-child(2) { animation-duration: 120s; animation-delay: -45s; }
.star-layer:nth-child(3) { animation-duration: 150s; animation-direction: alternate-reverse; }
@media (max-width: 720px) {
  .star-layer { animation: none; }
  .city-logo-grid .marker-logo:nth-child(n + 3) { display: none; }
  .city-dialog::backdrop { backdrop-filter: blur(4px); }
}
.space-star { position: absolute; width: var(--size); height: var(--size); background: var(--muted); opacity: var(--opacity); }
.space-star.point { border-radius: 50%; }
.space-star.cross { background: var(--accent); clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%); }
@keyframes star-drift { to { transform: translate3d(8px, -6px, 0); } }
.is-screening .earth-scene { transform: translateY(var(--screening-drop, 220px)); }
.is-screening .hero-heading { opacity: 0; }
.is-screening .reel-entry, .is-screening .world-toolbar { opacity: 0; }
.reel-in-flight .reel-entry { opacity: 0; pointer-events: none; }
.film-origin-hidden { visibility: hidden; }
.reel-in-flight:not(.is-screening) .hero-heading { transition-delay: 180ms; }
.reel-in-flight:not(.is-screening) .earth-scene { transition-duration: var(--motion-collapse); transition-timing-function: var(--ease-exit); }
.is-screening .reel-trigger, .is-screening .reel-symbol::before { animation-play-state: paused; }
[data-active-client] .reel-entry { opacity: 0; pointer-events: none; }

.home-arrival { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; justify-content: space-between; padding: max(28px, env(safe-area-inset-top)) var(--gutter) max(28px, env(safe-area-inset-bottom)); background: #0b0c0e; color: #f5f4f0; pointer-events: none; }
[data-arrival-pending] .home-arrival[hidden] { display: flex !important; }
.arrival-meta, .arrival-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 10px; letter-spacing: .07em; }
.arrival-meta { color: var(--muted); }
.arrival-star svg { width: 24px; height: 24px; color: var(--accent); }
.arrival-footer { color: var(--accent); }
@media (max-width: 640px), (horizontal-viewport-segments: 2) { .arrival-meta, .arrival-footer { font-size: 8px; gap: 12px; } }
@media (min-width: 1800px) { .hero-heading { padding-top: 64px; } }
@media (min-width: 721px) and (max-height: 650px) {
  .identity-hero { min-height: 700px; }
  .hero-heading { padding-top: 24px; }
  .hero-heading h1 { margin-top: 16px; font-size: clamp(44px, 6.4vw, 80px); }
  .reel-entry { top: 132px; }
  .reel-trigger { gap: 12px; }
  .reel-symbol { width: 64px; height: 64px; }
  .reel-orbit { width: 88px; height: 88px; }
}
@media (max-width: 1000px), (horizontal-viewport-segments: 2) { .client-index { gap: 16px; } .client-city { display: none; } }
@media (max-width: 720px), (horizontal-viewport-segments: 2), (pointer: coarse) and (max-height: 600px), (pointer: coarse) and (max-width: 1024px) {
  .identity-hero { height: max(720px, calc(100svh - 96px)); min-height: 0; }
  .hero-heading { padding-top: 42px; }
  .hero-heading h1 { font-size: clamp(34px, 10.5vw, 75px); margin-top: 20px; }
  .hero-positioning { max-width: 240px; margin-inline: auto; font-size: 9px; line-height: 1.5; }
  .reel-entry { top: 200px; }
  .reel-symbol { width: 72px; height: 72px; }
  .reel-orbit { width: 96px; height: 96px; }
  .world-toolbar { bottom: 90px; gap: 14px 12px; }
  .world-heading h2 { font-size: 11px; }
  .world-heading > span { max-width: 160px; font-size: 10px; }
  .collective-link { max-width: 160px; font-size: 9px; line-height: 1.5; }
  .client-index { grid-column: 1 / -1; gap: 12px; }
  .client-index button { font-size: 10px; gap: 8px; }
  .world-hint { grid-column: 1 / -1; justify-self: start; gap: 12px; }
  .marker-logo img { width: 64px; height: 38px; }
  .client-marker { min-width: 68px; }
  .marker-info { font-size: 9px; }
  .marker-info > span { display: none; }
  .home-selected { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .star-layer, .reel-trigger, .reel-symbol::before, .viewer-orbit { animation: none; }
  .reel-symbol, .reel-orbit, .reel-entry, .screening-room { transition: none; }
  .reel-trigger:hover .reel-symbol, .reel-trigger:hover .reel-orbit { transform: none; }
}

.arrival-identity { display: grid; place-items: center; }
.arrival-identity img { width: min(56vw, 50svh, 480px); height: auto; filter: brightness(0) invert(1); }
.arrival-meta, .arrival-footer { color: #b8caff; }
@media (max-width: 640px) { .arrival-identity img { width: min(80vw, 50svh); } }

/* Company panels preserve each brand at shared public locations. */
.marker-logo img[src$="toyota.png"], .is-chosen .marker-logo img[src$="toyota.png"] { width: 60px; height: 32px; }
.team-beacon img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.city-marker { width: 176px; }
.city-logo-grid { display: flex; flex-wrap: wrap; gap: 12px 8px; padding: 8px; width: 100%; background: color-mix(in srgb, var(--background) 86%, transparent); border: 1px solid var(--line); border-radius: 12px; }
.city-logo-grid .marker-logo { display: grid; place-items: center; flex: 1 1 calc(33.333% - 8px); }
.city-marker[data-brand-count="2"] { width: 136px; }
.city-marker[data-brand-count="2"] .marker-logo { flex-basis: calc(50% - 8px); }
.city-logo-grid .marker-logo img { width: 42px; height: 24px; object-fit: contain; }
.city-caption { font-size: 10px; line-height: 1.5; padding-top: 4px; text-align: center; }
.city-caption > span { display: block; color: var(--accent); font-size: 8px; letter-spacing: .06em; }
.is-city-open { overflow: hidden; }
.city-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 24px; margin: auto; color: var(--text); background: var(--background); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 20px 90px #0006; overflow-y: auto; overscroll-behavior: contain; }
.city-dialog::backdrop { background: #0009; backdrop-filter: blur(8px); }
.city-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; }
.city-dialog h2 { margin: 8px 0 0; font: 500 clamp(22px, 4vw, 32px)/1.1 var(--display); letter-spacing: -.025em; }
.city-dialog header button { width: 44px; height: 44px; flex: 0 0 44px; background: transparent; border: 1px solid var(--line); border-radius: 50%; color: inherit; font-size: 24px; }
.city-brand-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.city-brand-grid button { display: flex; flex: 1 1 calc(33.333% - 8px); flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 16px 8px; border: 1px solid var(--line); background: transparent; color: inherit; border-radius: 10px; text-align: center; }
.city-brand-grid button:hover, .city-brand-grid button:focus-visible { border-color: var(--accent); background: #1355ff12; }
.city-brand-grid strong { font-size: 11px; font-weight: 500; }
.city-brand-grid button > span:not(.marker-logo) { font-size: 9px; color: var(--muted); }
.city-brand-grid small { font-size: 8px; line-height: 1.4; color: var(--muted); }
.city-panel-note { margin: 20px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.map-legend { position: absolute; z-index: 3; right: var(--gutter); bottom: 70px; display: flex; gap: 14px; color: var(--muted); font-size: 8px; letter-spacing: .05em; }
.map-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.brand-key { width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg); }
.map-legend img { width: 14px; height: 14px; filter: brightness(0) saturate(100%) invert(36%) sepia(99%) saturate(5547%) hue-rotate(222deg); }
@media (max-width: 720px) {
  .city-marker { width: 140px; }
  .city-logo-grid { gap: 10px 6px; padding: 7px; }
  .city-logo-grid .marker-logo img { width: 32px; height: 20px; }
  .city-dialog { padding: 20px 16px; }
  .city-brand-grid button { flex-basis: calc(50% - 8px); }
  .city-marker[data-brand-count="2"] { width: 110px; }
  .city-brand-grid .marker-logo img { width: 72px; height: 36px; }
  .client-directory-panel { grid-template-columns: 1fr; max-height: min(420px, calc(100dvh - 48px)); }
}
@media (max-width: 360px) { .city-marker { width: 118px; } .city-logo-grid .marker-logo img { width: 27px; height: 18px; } }

/* Section 02: browse existing brands with clear artwork and no empty cells. */
.world-toolbar:has(.client-directory[open]) { z-index: 10; }
.client-directory-panel { display: block; width: min(560px, calc(100vw - 40px)); max-height: min(520px, calc(100dvh - 40px)); padding: 20px; overscroll-behavior: contain; }
.directory-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.directory-heading h3 { font-size: 11px; letter-spacing: .05em; margin: 0 0 8px; font-weight: 500; }
.directory-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.directory-heading [data-dismiss-directory] { display: grid; place-items: center; place-content: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; flex: 0 0 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; line-height: 1; }
.directory-heading [data-dismiss-directory] svg { display: block; width: 20px; height: 20px; flex: none; }
.earth-explorer .directory-heading { gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.earth-explorer .directory-heading h3 { margin: 2px 0 6px; font-size: 12px; line-height: 1.4; }
.earth-explorer .directory-heading p { font-size: 11px; line-height: 1.4; }
.earth-explorer .directory-note { display: none; }
.directory-logo-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.directory-logo-grid [data-client-select] { flex: 1 1 calc(33.333% - 8px); min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 16px 8px; border: 1px solid var(--line); border-radius: 10px; text-align: center; }
.directory-logo-grid .marker-logo img { width: 84px; height: 40px; }
.directory-logo-grid strong { font-size: 10px; font-weight: 500; line-height: 1.4; }
.directory-logo-grid .client-directory-city { margin: 0; font-size: 9px; line-height: 1.4; text-align: center; }
@media (max-width: 720px) { .client-directory-panel { padding: 16px; max-height: min(520px, calc(100dvh - 40px)); } .directory-logo-grid [data-client-select] { flex-basis: calc(50% - 8px); } .directory-logo-grid .marker-logo img { width: 72px; height: 36px; } }
@media (max-width: 720px), (horizontal-viewport-segments: 2), (pointer: coarse) and (max-height: 600px), (pointer: coarse) and (max-width: 1024px) {
  /* Give touch gestures a clear viewport. The browse controls belong below it. */
  .identity-hero { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .hero-heading { order: 0; padding-top: 32px; }
  .reel-entry { order: 1; position: relative; top: auto; left: auto; transform: none; align-self: center; margin: 20px 0 8px; }
  .reel-trigger { gap: 12px; padding: 16px; }
  .earth-scene { order: 2; position: relative; inset: auto; flex: none; width: 100%; height: clamp(350px, 108vw, 460px); }
  [data-active-place] .earth-scene { z-index: 6; }
  .identity-hero:not([data-earth-exploring])[data-active-client] .earth-scene { height: max(500px, calc(100svh - 160px)); }
  .earth-canvas, .marker-select, .team-beacon { touch-action: pan-x pan-y pinch-zoom; }
  .identity-hero:not([data-earth-exploring]) .earth-scene .marker-select { pointer-events: none; }
  [data-team-markers] { display: none; }
  .team-beacon, .team-profiles { pointer-events: auto; }
  [data-earth-dragging] :is(.marker-select, .team-beacon) { pointer-events: none; opacity: .2; transition: opacity 120ms; }
  .globe-interface { order: 3; display: block; position: relative; z-index: 5; padding: 16px var(--gutter) 12px; border-top: 1px solid var(--line); background: var(--background); }
  .world-toolbar { position: static; grid-template-columns: minmax(0, 1fr) minmax(100px, .7fr); gap: 12px; }
  .earth-explorer-trigger { display: flex; justify-content: space-between; align-items: center; grid-column: 1 / -1; grid-row: 1; min-height: 48px; padding: 12px 16px; border: 1px solid var(--accent); border-radius: 8px; background: var(--cobalt); color: #fff; font-size: 11px; letter-spacing: .04em; }
  .earth-preview-hint { display: block; margin: 0 0 12px; color: var(--muted); font-size: 10px; text-align: center; }
  .world-heading, .client-index > button { display: none; }
  .client-index { display: block; grid-column: 1; grid-row: 2; }
  .client-directory { width: 100%; }
  .client-directory > summary { justify-content: space-between; min-height: 48px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--background); font-size: 9px; letter-spacing: .04em; }
  .client-directory > summary > span { font-size: 18px; }
  .collective-link { grid-column: 2; grid-row: 2; justify-content: space-between; min-height: 48px; max-width: none; padding-inline: 4px; font-size: 9px; }
  .world-hint { display: none; }
  .world-hint > span { align-self: end; white-space: nowrap; }
  .world-hint > .map-credit { grid-column: 1; min-height: 24px; align-self: start; font-size: 8px; }
  .earth-controls { grid-column: 2; grid-row: 1 / span 2; gap: 0; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--background); }
  .earth-controls button { width: 44px; min-height: 44px; border: 0; border-radius: 0; background: transparent; font-size: 20px; }
  .earth-controls button + button { border-left: 1px solid var(--line); }
  .earth-controls button:first-child { border-radius: 999px 0 0 999px; }
  .earth-controls button:last-child { border-radius: 0 999px 999px 0; }
  .map-legend { position: static; justify-content: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
  .map-legend > span:has(img) { display: none; }
  .selected-work-jump { position: static; transform: none; width: max-content; margin: 12px auto 0; }
}

/* Desktop globe artwork is quieter without changing the catalogue or phone view. */
[data-earth][data-earth-mode="desktop"] .client-marker > .marker-select .marker-logo img { width: 68px; height: 38px; }
[data-earth][data-earth-mode="desktop"] .client-marker > .marker-select .marker-logo img[src$="toyota.png"] { width: 48px; height: 26px; }
[data-earth][data-earth-mode="desktop"] .client-marker > .marker-select .marker-logo img[src$="lyrical-lemonade-carton.png"] { width: 28px; height: 50px; }
[data-earth][data-earth-mode="desktop"] .marker-select:hover .marker-logo img,
[data-earth][data-earth-mode="desktop"] .marker-select:focus-visible .marker-logo img { transform: none; }
[data-earth][data-earth-mode="desktop"] .city-marker { width: 152px; }
[data-earth][data-earth-mode="desktop"] .city-marker[data-brand-count="2"] { width: 118px; }
[data-earth][data-earth-mode="desktop"] .city-logo-grid { gap: 8px 6px; padding: 6px; }
[data-earth][data-earth-mode="desktop"] .city-logo-grid .marker-logo img { width: 34px; height: 20px; }
[data-earth-exploring][data-earth-dragging] .marker-select { opacity: 1; }