/* Local visual storytelling for Runway orientation. */
.rv-root { --rv-red: #b72b40; --rv-ink: #343137; --rv-muted: #858079; --rv-line: #e5ddd4; --rv-cream: #fbf8f2; color: var(--rv-ink); min-width: 0; }
.rv-root *, .rv-root *::before, .rv-root *::after { box-sizing: border-box; }
.rv-root :is(h2,h3,h4,p,figure) { margin-top: 0; }
.rv-root :is(button,input) { font: inherit; }
.rv-root button { cursor: pointer; }
.rv-root button:disabled { cursor: default; opacity: .4; }
.rv-root button:focus-visible, .rv-root a:focus-visible, .rv-geographic-map:focus-visible, .rv-map-pin:focus-visible { outline: 3px solid #433d37; outline-offset: 4px; }
.rv-root [hidden] { display: none !important; }
.rv-root a { color: var(--rv-red); text-underline-offset: 3px; }
.rv-icon { width: 18px; height: 18px; flex: 0 0 18px; vertical-align: middle; }
.rv-kicker { display: block; color: #a3816a; font-size: 9px; line-height: 1.6; font-weight: 650; letter-spacing: 1.3px !important; }
.rv-prose { font-size: 13px; color: #6f6b66; line-height: 1.9; white-space: pre-line; overflow-wrap: anywhere; }
.rv-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 15px; border: 1px solid #d9cec2; border-radius: 6px; background: #fffdf9; color: #786c60; font-size: 12px !important; font-weight: 600 !important; line-height: 1.4; }
.rv-button:hover:not(:disabled) { border-color: #b79b83; background: #f7f0e7; }
.rv-button.rv-primary { border-color: var(--rv-red); background: var(--rv-red); color: #fff; }
.rv-button.rv-primary:hover:not(:disabled) { background: #9e2437; border-color: #9e2437; }
.rv-button.rv-quiet { border-color: transparent; background: transparent; }
.rv-button.rv-icon-button { width: 44px; padding: 10px; min-width: 44px; }
.rv-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; border: 0 !important; white-space: nowrap !important; }
.rv-empty { padding: 38px 24px; border: 1px dashed #d9d0c7; border-radius: 9px; background: #fbf9f5; color: #8b8176; font-size: 13px; text-align: center; }
.rv-company-introduction { border: 1px solid #e5ddd3; border-radius: 11px; overflow: hidden; background: #fffdf9; }
.rv-company-hero { margin: 0; position: relative; }
.rv-company-hero img { display: block; width: 100%; height: auto; aspect-ratio: 1.75; object-fit: cover; background: #f2e8db; }
.rv-company-hero figcaption { position: absolute; right: 15px; bottom: 12px; padding: 5px 8px; color: #826f5e; font-size: 8px; border-radius: 4px; background: #fff9eddb; }
.rv-company-copy { padding: 30px; }
.rv-company-copy h2 { font-size: 30px; line-height: 1.3; font-weight: 550; margin: 11px 0 18px; letter-spacing: -.7px !important; }
.rv-company-copy > .rv-prose { font-size: 14px; }
.rv-how-we-work { margin-top: 24px; padding-top: 22px; border-top: 1px solid #ebe2d8; }
.rv-how-we-work h3 { font-size: 16px; margin: 0 0 10px; font-weight: 600; }
.rv-source-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin-top: 7px; }
.rv-source-link .rv-icon { width: 14px; height: 14px; }
.rv-work-story { margin: 28px 0 0; padding: 29px 0 0; border: 1px solid #e5d9cb; border-radius: 11px; background: #f8f1e6; overflow: hidden; }
.rv-story-heading { padding: 0 27px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.rv-story-heading h2 { font-size: 27px; font-weight: 550; line-height: 1.3; margin: 10px 0; letter-spacing: -.6px !important; }
.rv-story-heading p { color: #988675; font-size: 12px; line-height: 1.8; margin: 0; max-width: 530px; }
.rv-story-number { color: #b96e5f; font-size: 24px; font-weight: 450; flex-shrink: 0; margin-top: 7px; }
.rv-story-number i { color: #c1ad98; font-size: 11px; font-style: normal; }
.rv-story-scene { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 24px; padding: 27px 27px 32px; min-height: 330px; }
.rv-story-scene-art { min-width: 0; }
.rv-story-scene-art .rv-art { border: 1px solid #e1d3c1; border-radius: 9px; overflow: hidden; background: #f3e8da; }
.rv-story-scene-art .rv-art img { aspect-ratio: 1.5; width: 100%; height: auto; object-fit: contain; display: block; }
.rv-story-scene-art .rv-art-caption { background: #fff9edde; }
.rv-story-copy { min-width: 0; }
.rv-story-copy .rv-kicker { color: #b36d61; font-size: 8px; }
.rv-story-copy h3 { margin: 9px 0 13px; font-size: 25px; font-weight: 550; line-height: 1.35; letter-spacing: -.45px !important; outline: none; }
.rv-story-copy .rv-prose { color: #8a7765; font-size: 12px; line-height: 1.9; margin-bottom: 0; }
.rv-story-handoff { margin-top: 20px; padding-top: 15px; border-top: 1px solid #e2d4c3; display: grid; gap: 6px; }
.rv-story-handoff strong { font-size: 13px; line-height: 1.5; font-weight: 600; color: #654f42; }
.rv-handoff-route { font-size: 11px; line-height: 1.7; color: #886f5f; }
.rv-flow-strip { list-style: none; display: flex; gap: 0; margin: 0 27px; padding: 5px 5px 15px; overflow-x: auto; scrollbar-width: thin; }
.rv-flow-strip li { position: relative; flex: 1 0 85px; min-width: 0; padding-right: 9px; color: #b4a28f; }
.rv-flow-strip li::before { position: absolute; content: ""; top: 17px; left: 31px; right: 0; height: 1px; background: #d9c9b8; pointer-events: none; }
.rv-flow-strip li:last-child::before { display: none; }
.rv-story-step { position: relative; display: block; width: 100%; min-height: 64px; padding: 4px; border: 0; border-radius: 5px; color: #89735f; background: transparent; text-align: left; }
.rv-story-step:hover { background: #eadcc95c; color: #7d3c43; }
.rv-story-step > span { display: grid; place-items: center; position: relative; width: 27px; height: 27px; border-radius: 50%; border: 1px solid #d9c8b4; background: #f8f1e6; font-size: 9px; margin-bottom: 8px; }
.rv-story-step > span .rv-icon { width: 12px; height: 12px; }
.rv-story-step > strong { display: block; font-size: 10px; line-height: 1.5; font-weight: 500; overflow-wrap: normal; }
.rv-flow-strip li.is-current { color: #a4474e; }
.rv-flow-strip li.is-current .rv-story-step { color: #9d3543; }
.rv-flow-strip li.is-current .rv-story-step > span { background: #b12d40; color: #fff; border-color: #b12d40; box-shadow: 0 0 0 4px #ebd7ca; }
.rv-flow-strip li.is-past .rv-story-step > span { color: #a27158; border-color: #c1a289; background: #efe1d0; }
.rv-feedback-loop { display: flex; align-items: flex-start; gap: 8px; margin: 0 27px 18px; color: #ad8a70; }
.rv-feedback-loop .rv-icon { width: 15px; height: 15px; margin-top: 3px; }
.rv-feedback-loop p { font-size: 10px; line-height: 1.8; margin: 0; }
.rv-story-status { display: block; margin: 0; padding: 13px 27px; background: #fffaf2; border-top: 1px solid #e6d8c8; color: #8c735e; font-size: 10px; line-height: 1.7; }
.rv-work-story[data-playing="true"] .rv-story-scene-art, .rv-work-story[data-playing="true"] .rv-story-copy { animation: rv-scene-enter .45s ease-out; }
.rv-chapter-heading { margin-bottom: 24px; }
.rv-chapter-heading h2 { font-size: 28px; font-weight: 550; line-height: 1.35; margin: 10px 0; letter-spacing: -.5px !important; }
.rv-chapter-heading p { margin: 0; font-size: 13px; color: #8e8276; line-height: 1.8; }
.rv-team-picks, .rv-office-choices { display: flex; gap: 7px; overflow-x: auto; min-width: 0; max-width: 100%; padding: 3px 3px 12px; margin: -3px -3px 14px; scrollbar-width: thin; overscroll-behavior-inline: contain; }
.rv-team-choice { min-height: 46px; padding: 10px 14px; background: #fff; border: 1px solid #e1d8cf; border-radius: 6px; color: #87786b; flex-shrink: 0; text-align: left; }
.rv-team-choice > span { display: block; font-size: 11px; font-weight: 550; }
.rv-team-choice small { display: block; font-size: 8px; color: #b68b72; margin-top: 3px; }
.rv-team-choice.is-selected { border-color: #c98e94; background: #fcf1f1; color: #a13646; }
.rv-team-gallery { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); border: 1px solid #e1d7ca; border-radius: 10px; overflow: hidden; background: #fffdf9; align-items: stretch; }
.rv-team-illustration { display: flex; flex-direction: column; justify-content: center; min-width: 0; background: #f4e9dc; }
.rv-team-illustration .rv-art > img { aspect-ratio: 1.5; object-fit: contain; }
.rv-team-illustration .rv-art-caption { position: static; display: block; padding: 9px 14px; background: #fff9ed; color: #88725f; font-size: 10px; line-height: 1.6; }
.rv-art { position: relative; min-width: 0; overflow: hidden; background: #f4e9dc; }
.rv-art > img { width: 100%; height: auto; aspect-ratio: 1.18; object-fit: cover; display: block; }
.rv-art-caption { position: absolute; right: 10px; bottom: 9px; padding: 3px 5px; color: #9d8e7f; font-size: 7px; background: #fffaf2d4; border-radius: 3px; }
.rv-neutral-art { width: 100%; height: auto; display: block; }
.rv-art-fallback-label { display: block; padding: 0 20px 16px; color: #a28e7a; font-size: 10px; text-align: center; }
.rv-team-art-title { padding: 22px 24px 25px; border-top: 1px solid #e4d7c8; }
.rv-team-art-title > span { display: block; font-size: 8px; color: #b0967d; letter-spacing: 1px !important; }
.rv-team-art-title > strong { display: block; color: #9c745a; font-size: 21px; line-height: 1.4; font-weight: 500; margin-top: 7px; }
.rv-team-detail { padding: 27px; min-width: 0; }
.rv-detail-topline { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.rv-badge { display: inline-block; font-size: 8px; font-weight: 600; background: #f6e5e1; color: #a15e5c; border-radius: 4px; padding: 4px 7px; white-space: nowrap; }
.rv-team-detail > h3 { font-size: 27px; font-weight: 550; margin: 10px 0 24px; line-height: 1.3; overflow-wrap: anywhere; }
.rv-team-role h4, .rv-team-connect h4 { font-size: 11px; font-weight: 650; color: #8c7c6c; margin: 0 0 9px; }
.rv-team-role .rv-prose { margin-bottom: 0; font-size: 12px; }
.rv-team-connect { display: flex; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #ece4da; }
.rv-team-connect > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f6ebe2; color: #af8c73; flex-shrink: 0; }
.rv-team-connect .rv-icon { width: 14px; height: 14px; }
.rv-team-connect .rv-prose { color: #8d8073; font-size: 12px; margin-bottom: 0; }
.rv-office-choice { display: flex; align-items: center; gap: 7px; min-height: 45px; padding: 10px 12px; border: 1px solid #ddd9d1; border-radius: 6px; background: #fff; color: #7d8077; flex-shrink: 0; text-align: left; }
.rv-office-choice .rv-icon { width: 14px; height: 14px; }
.rv-office-choice > span { font-size: 11px; font-weight: 550; }
.rv-office-choice > small { font-size: 8px; padding: 2px 4px; background: #f4e9e0; color: #ad8668; border-radius: 3px; }
.rv-office-choice.is-selected { background: #fcf0ef; border-color: #cf9ca0; color: #a83f4d; }
.rv-offices-layout { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.rv-office-map { min-width: 0; border: 1px solid #d9ddd5; border-radius: 9px; overflow: hidden; margin: 0; background: #f6f7f2; }
.rv-map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 7px; flex-wrap: wrap; padding: 11px 13px; border-bottom: 1px solid #dde0d7; background: #fafaf5; }
.rv-map-toolbar > span { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #8f9386; }
.rv-map-toolbar > span .rv-icon { width: 14px; height: 14px; }
.rv-map-toolbar > div { display: flex; align-items: center; gap: 4px; }
.rv-map-toolbar .rv-button { background: #fffef9; border-color: #dfe0d6; color: #8a8e81; width: 44px; min-width: 44px; min-height: 44px; padding: 8px; }
.rv-map-toolbar .rv-button .rv-icon { width: 15px; height: 15px; }
.rv-map-toolbar output { min-width: 31px; color: #9b9d91; text-align: right; font-size: 9px; }
.rv-geographic-map { display: block; width: 100%; height: auto; aspect-ratio: 720 / 610; touch-action: pan-y; user-select: none; }
.rv-geographic-map[data-zoomed="true"] { touch-action: none; cursor: grab; }
.rv-geographic-map.is-dragging { cursor: grabbing; }
.rv-map-country { fill: #e8e8dc; stroke: #c9cebf; stroke-width: .7; }
.rv-map-country.is-india { fill: #f7f0e2; stroke: #c5c5b1; stroke-width: 1; }
.rv-map-pin { cursor: pointer; }
.rv-pin-hit { fill: transparent; pointer-events: all; }
.rv-pin-touch { fill: transparent; }
.rv-pin-halo { fill: #b43b4c18; stroke: #b43b4c22; stroke-width: 1; }
.rv-pin-dot { fill: #b84955; stroke: #fffdf7; stroke-width: 2; }
.rv-map-pin.is-selected .rv-pin-halo { fill: #b52b4150; stroke: #ad2e44; stroke-width: 1.5; }
.rv-map-pin.is-selected .rv-pin-dot { fill: #9d1730; r: 6px; }
.rv-map-pin.is-yours .rv-pin-dot { stroke-width: 2.5; }
.rv-pin-label { fill: #8b6862; font-size: 18px; font-weight: 550; paint-order: stroke; stroke: #faf5eb; stroke-width: 3px; stroke-linejoin: round; }
.rv-map-pin.is-selected .rv-pin-label { fill: #9b2439; font-weight: 700; }
.rv-map-water-label { fill: #aeb9b1; font-size: 9px; letter-spacing: 2.2px; pointer-events: none; }
.rv-map-note { fill: #9ba799; font-size: 10px; }
.rv-office-map figcaption { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-top: 1px solid #dee1d7; color: #9a9d8e; font-size: 8px; line-height: 1.7; }
.rv-office-map figcaption a { color: #969c8b; width: fit-content; }
.rv-city-card { min-width: 0; border: 1px solid #e3d9cb; border-radius: 9px; overflow: hidden; background: #fffdf8; }
.rv-city-card .rv-art > img { aspect-ratio: 1.48; }
.rv-city-copy { padding: 21px; }
.rv-city-copy h3 { font-size: 25px; font-weight: 550; margin: 10px 0; line-height: 1.3; overflow-wrap: anywhere; }
.rv-city-locality { color: #a98b70; font-size: 11px; line-height: 1.7; white-space: pre-line; }
.rv-city-copy > .rv-prose { font-size: 12px; }
.rv-city-address { display: flex; gap: 8px; margin: 18px 0; padding-top: 16px; border-top: 1px solid #ebe2d7; color: #b29c83; }
.rv-city-address > .rv-icon { width: 14px; height: 14px; margin-top: 3px; flex-basis: 14px; }
.rv-city-address strong { display: block; font-size: 9px; color: #9b8a77; margin-bottom: 5px; }
.rv-city-address address { font-size: 11px; font-style: normal; color: #8f8070; line-height: 1.9; white-space: pre-line; overflow-wrap: anywhere; }
.rv-city-copy > .rv-button { width: 100%; font-size: 11px !important; margin-top: 4px; }
.rv-location-note { font-size: 10px; color: #aa8c74; line-height: 1.7; background: #fbf0e4; padding: 10px; border-radius: 5px; }
@keyframes rv-scene-enter { from { opacity: .35; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rv-accent { 50% { opacity: .65; } }
@media (max-width: 1150px) { .rv-story-scene { grid-template-columns: 1fr; gap: 16px; } .rv-story-scene-art { width: 100%; max-width: 640px; margin: auto; } .rv-story-copy h3 { font-size: 24px; } .rv-team-gallery { grid-template-columns: 1fr; } .rv-team-illustration { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); align-items: center; } .rv-team-illustration .rv-art > img { aspect-ratio: 1.5; } .rv-team-art-title { border: 0; padding: 20px; } .rv-team-art-title > strong { font-size: 25px; } .rv-offices-layout { grid-template-columns: 1fr; } .rv-geographic-map { max-height: 430px; } .rv-city-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } .rv-city-card .rv-art { height: 100%; } .rv-city-card .rv-art > img { height: 100%; aspect-ratio: auto; min-height: 280px; } }
@media (max-width: 780px) { .rv-story-scene { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .rv-team-gallery { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .rv-team-illustration { display: flex; } .rv-team-art-title { border-top: 1px solid #e4d7c8; } .rv-team-illustration .rv-art > img { aspect-ratio: 1.5; } .rv-team-art-title > strong { font-size: 21px; } }
@media (max-width: 560px) { .rv-company-hero img { aspect-ratio: 1.3; } .rv-company-hero figcaption { font-size: 7px; right: 9px; bottom: 8px; } .rv-company-copy { padding: 23px 21px; } .rv-company-copy h2 { font-size: 26px; } .rv-company-copy > .rv-prose { font-size: 13px; } .rv-how-we-work .rv-prose { font-size: 12px; } .rv-work-story { margin-top: 22px; padding-top: 23px; } .rv-story-heading { padding-inline: 21px; gap: 11px; } .rv-story-heading h2 { font-size: 24px; } .rv-story-heading p { font-size: 11px; } .rv-story-number { font-size: 21px; } .rv-story-number i { display: block; font-size: 10px; text-align: right; } .rv-story-scene { grid-template-columns: 1fr; padding: 18px 21px 24px; gap: 19px; } .rv-story-scene-art { max-width: 330px; } .rv-story-copy h3 { font-size: 24px; margin-block: 8px 10px; } .rv-flow-strip { margin-inline: 21px; padding-bottom: 18px; } .rv-flow-strip li { flex-basis: 77px; } .rv-feedback-loop { margin-inline: 21px; } .rv-feedback-loop p { font-size: 9px; } .rv-story-status { padding-inline: 21px; font-size: 10px; } .rv-chapter-heading h2 { font-size: 25px; } .rv-chapter-heading p { font-size: 12px; } .rv-team-picks,.rv-office-choices { margin-bottom: 10px; } .rv-team-choice { padding: 10px 12px; min-height: 44px; } .rv-team-choice > span { font-size: 10px; } .rv-team-gallery { grid-template-columns: 1fr; } .rv-team-illustration { display: block; } .rv-team-illustration .rv-art > img { aspect-ratio: 1.5; } .rv-team-art-title { display: none; } .rv-team-detail { padding: 23px 21px; } .rv-team-detail > h3 { font-size: 26px; margin-bottom: 21px; } .rv-team-connect { gap: 8px; } .rv-office-choice { padding: 10px; gap: 5px; } .rv-office-choice > span { font-size: 10px; } .rv-office-choice > small { font-size: 7px; } .rv-map-toolbar { padding: 9px 10px; } .rv-map-toolbar > span { flex-basis: 100%; font-size: 9px; margin-bottom: 2px; } .rv-map-toolbar > div { margin-left: auto; } .rv-map-toolbar .rv-button { min-height: 44px; width: 44px; min-width: 44px; } .rv-geographic-map { min-height: 305px; max-height: 370px; aspect-ratio: auto; } .rv-pin-label { font-size: 24px; stroke-width: 4px; } .rv-pin-touch { r: 22px; } .rv-map-water-label { font-size: 10px; } .rv-city-card { grid-template-columns: 1fr; } .rv-city-card .rv-art { height: auto; } .rv-city-card .rv-art > img { height: auto; min-height: 0; aspect-ratio: 1.7; } .rv-city-copy { padding: 22px 21px; } .rv-city-copy h3 { font-size: 25px; } .rv-city-address address { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .rv-root *, .rv-root *::before, .rv-root *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }