/* ROVENTRA corporate shell. No dependency on the retained Office landing styles. */
:root {
  color-scheme: light;
  --navy: #0c2032;
  --ink: #122b42;
  --muted: #5c7084;
  --blue: #226dba;
  --mist: #f0f4f7;
  --line: #cdd9e3;
  --shell-width: 1280px;
  --gutter: clamp(24px, 5vw, 80px);
  --header-height: 76px;
  font-family: "Pretendard", "Noto Sans KR", "Noto Sans CJK KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-synthesis: none;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 20px); }
body.rv-home { margin: 0; color: var(--ink); background: var(--navy); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .6; }
img { display: block; max-width: 100%; }
figure, p, h1, h2, h3 { margin: 0; }
h1, h2, h3 { word-break: keep-all; overflow-wrap: anywhere; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #58a7f5; outline-offset: 5px; }
[hidden] { display: none !important; }
.shell { width: min(var(--shell-width), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; left: 24px; top: -100px; padding: 12px 20px; color: var(--ink); background: white; border-radius: 6px; }
.skip-link:focus { top: 12px; }
.wordmark { font-family: Arial, "Helvetica Neue", sans-serif; font-size: 27px; font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.eyebrow { font-family: Arial, "Noto Sans KR", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .15em; line-height: 1.6; color: #5f7a94; }
.accent { color: var(--blue); }

/* Navigation overlays the hero only; scrolling gives it an opaque, quiet surface. */
.site-header { position: absolute; top: 0; inset-inline: 0; z-index: 30; color: #fff; border-bottom: 1px solid rgb(255 255 255 / .11); }
.site-header[data-menu-ready] { position: fixed; transition: background .2s ease, border-color .2s ease; }
.site-header[data-scrolled="true"], .site-header[data-menu-open="true"] { background: #0c2032; border-color: #2d4052; }
.header-inner { min-height: var(--header-height); display: flex; align-items: center; gap: 25px; }
.brand-line { font: 9px/1.5 Arial, sans-serif; letter-spacing: .075em; color: #cbd5df; white-space: nowrap; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 29px; font-size: 13px; font-weight: 500; }
.site-nav > a:not(.pill-link) { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.site-nav > a:hover { color: #a7cefa; }
.pill-link { display: inline-flex; align-items: center; justify-content: center; gap: 25px; min-height: 44px; padding: 8px 23px; border: 1px solid rgb(255 255 255 / .55); border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; transition: background .18s ease, border-color .18s ease; }
.pill-link:hover { background: rgb(255 255 255 / .09); border-color: #fff; }
.pill-link span { font-size: 18px; line-height: 1; }
.menu-toggle { display: none; border: 0; background: transparent; color: inherit; padding: 12px; width: 44px; height: 44px; }
.menu-toggle span { display: block; width: 22px; height: 1px; margin: 6px 0; background: currentColor; transition: transform .18s ease; }
.header-sentinel { position: absolute; top: 30px; width: 1px; height: 1px; pointer-events: none; }

/* Image slots: stable geometry before, during, and after image loading. */
.media-slot { --media-ratio: 16 / 9; --media-mobile-ratio: var(--media-ratio); --media-position: 50% 50%; --media-mobile-position: var(--media-position); --media-fit: cover; position: relative; min-width: 0; aspect-ratio: var(--media-ratio); overflow: hidden; isolation: isolate; background: linear-gradient(125deg, #dce5ec, #c6d4df); border-radius: 6px; }
.media-slot picture { position: absolute; inset: 0; z-index: 1; }
.media-slot img { width: 100%; height: 100%; object-fit: var(--media-fit); object-position: var(--media-position); }
.media-slot[data-media-state="loading"] picture { opacity: 0; }
.media-slot[data-media-state="ready"] .media-placeholder { display: none; }
.media-placeholder { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; padding: 18px; color: #526b80; }
.media-frame { position: absolute; inset: 18px; border: 1px solid rgb(52 86 111 / .13); border-radius: 1px; }
.media-frame::before, .media-frame::after { content: ""; position: absolute; width: 13px; height: 13px; border-color: rgb(52 86 111 / .28); border-style: solid; }
.media-frame::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.media-frame::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.media-label { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 3px; padding: 7px 9px; font-size: 11px; line-height: 1.5; background: rgb(237 243 247 / .8); max-width: 100%; }
.media-label small { font: 9px/1.4 Arial, sans-serif; letter-spacing: .025em; color: #667d91; overflow-wrap: anywhere; }
.media-dark { background: radial-gradient(ellipse at 78% 37%, #927e73 0, #516576 28%, #263d50 49%, #0c2032 82%); color: #fff; }
.media-mid { background: linear-gradient(100deg, #243e53 0, #5b7385 48%, #d2cbc3 100%); }
.media-steel { background: linear-gradient(100deg, #263e51, #657b8b 58%, #31495d); }
.section-art { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; aspect-ratio: auto; }
.section-art .media-placeholder { justify-content: flex-end; padding: 24px var(--gutter); }
.section-art .media-frame { display: none; }
.section-art .media-label { background: rgb(12 32 50 / .28); color: #e5edf5; font-size: 10px; }
.section-art .media-label small { color: #c4d2df; }

/* Default source framing; the registry can override position/fit without HTML edits. */
[data-media-slot="hero"] { --media-ratio: 24 / 10; --media-mobile-ratio: 4 / 5; --media-position: 64% 50%; --media-mobile-position: 68% 50%; }
[data-media-slot^="product-"] { --media-ratio: 6 / 5; --media-mobile-ratio: 6 / 5; --media-fit: contain; }
[data-media-slot="opportunity-banner"] { --media-ratio: 3 / 1; --media-mobile-ratio: 4 / 3; --media-position: 64% 44%; }
[data-media-slot="journey-discover"] { --media-ratio: 45 / 31; }
[data-media-slot="journey-work"] { --media-ratio: 55 / 31; }
[data-media-slot="journey-career"] { --media-ratio: 70 / 31; --media-fit: contain; --media-position: 50% 40%; }
[data-media-slot="footer-scene"] { --media-ratio: 2804 / 561; --media-position: 50% 50%; }

/* 01 */
.hero { position: relative; min-height: 570px; min-height: clamp(530px, 42vw, 640px); display: flex; align-items: center; color: #fff; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(6 23 37 / .63), rgb(6 23 37 / .14) 65%, transparent); }
.hero-content { position: relative; z-index: 2; padding-block: 135px 55px; }
.hero .eyebrow { color: #ccdae6; margin-bottom: 25px; font-size: 10px; }
.hero h1 { font-size: clamp(42px, 4.3vw, 66px); line-height: 1.22; letter-spacing: -.055em; font-weight: 750; }
.hero h1 span { display: block; }
.hero-lead { margin-top: 23px; font-size: 18px; color: #e6edf3; letter-spacing: -.025em; }
.scroll-link { display: inline-flex; align-items: center; gap: 13px; margin-top: 53px; min-height: 44px; color: #c2d0db; }
.scroll-link > span { width: 38px; height: 38px; border: 1px solid #728596; border-radius: 50%; display: grid; place-items: center; }
.scroll-link small { font: 9px/1.5 Arial, sans-serif; letter-spacing: .12em; }

/* Shared horizontal information hierarchy of the approved reference. */
.section-light { padding-block: 58px; background: var(--mist); }
.section-layout { display: grid; grid-template-columns: minmax(245px, 29%) minmax(0, 1fr); gap: 48px; align-items: center; }
.section-heading { position: relative; z-index: 2; min-width: 0; }
.section-heading .eyebrow { margin-bottom: 18px; }
.section-heading h2 { font-size: clamp(27px, 2.55vw, 38px); font-weight: 750; line-height: 1.35; letter-spacing: -.055em; }
.section-heading > p:not(.eyebrow) { margin-top: 19px; font-size: 15px; line-height: 1.8; color: var(--muted); letter-spacing: -.015em; word-break: keep-all; }
.section-heading.inverse h2 { color: #fff; }
.section-heading.inverse .eyebrow { color: #aacce7; }
.section-heading.inverse > p:not(.eyebrow) { color: #d0dce6; }

/* A short, image-led introduction bridges the company and the product architecture. */
.platform-bridge { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(340px, 42svh, 420px); padding-block: 40px; background: #f0f6fa; }
.platform-bridge > .shell { position: relative; z-index: 1; }
.platform-bridge-copy { width: 36%; max-width: 440px; }
.platform-bridge-copy h2 { font-size: clamp(28px, 2.25vw, 36px); line-height: 1.4; }
.platform-bridge-copy > p:not(.eyebrow) { font-size: 14px; }
.platform-bridge-art { z-index: 0; background: #f0f6fa; }
.platform-bridge-art img { filter: saturate(.82) contrast(1.08); }
.platform-bridge-art::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgb(244 249 252 / .58), transparent 42%), linear-gradient(to top, #f0f6fa, transparent 18%); }
.platform-core { position: absolute; z-index: 1; left: 62%; top: 50%; transform: translate(-50%, -50%); width: clamp(164px, 11.6vw, 202px); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgb(255 255 255 / .95); background: rgb(240 248 253 / .9); outline: 8px solid rgb(185 208 228 / .25); box-shadow: 0 0 0 18px rgb(196 216 233 / .14); text-align: center; }
.platform-core strong { font-size: clamp(25px, 1.7vw, 29px); letter-spacing: -.055em; line-height: 1.3; }
.platform-core span { margin-top: 10px; color: #5c7890; font-size: 12px; line-height: 1.6; }

/* App leads the document; desktop placement expresses its relationship to Works and Office. */
.products-section { position: relative; padding-block: 64px 60px; background: #edf3f7; }
.products-section .section-layout { grid-template-columns: minmax(0, 28%) minmax(0, 1fr); gap: 40px; }
.products-section .section-heading h2 { font-size: clamp(25px, 2.15vw, 33px); line-height: 1.45; letter-spacing: -.055em; }
.products-section .section-heading > p:not(.eyebrow) { font-size: 14px; line-height: 1.85; }
.product-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "works app office"; align-items: start; gap: 20px; }
.product-card { display: block; min-width: 0; margin-top: 12px; border-radius: 4px; }
.product-card-app { grid-area: app; margin-top: 0; }
.product-card-works { grid-area: works; }
.product-card-office { grid-area: office; }
.product-card .media-slot { border-radius: 4px; background: #e4edf3; }
.product-card img { filter: saturate(.8) contrast(.96); transition: transform .25s ease; }
.product-card-app img { filter: contrast(1.02); }
.product-card:hover img { transform: scale(1.015); }
.product-card .circle-arrow { transition: transform .2s ease; }
.product-card:hover .circle-arrow { transform: translate(2px, -2px); }
.product-card .product-role { margin-top: 17px; color: #647b8d; font-size: 10px; line-height: 1.5; letter-spacing: .07em; }
.product-card-app .product-role { color: var(--blue); font-weight: 600; }
.product-title { display: flex; gap: 8px; justify-content: space-between; align-items: center; margin-top: 5px; }
.product-title h3 { color: #395369; font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.055em; }
.product-card-app .product-title h3 { color: var(--ink); font-size: 22px; font-weight: 750; }
.product-card-app .product-title h3 > span { color: var(--blue); }
.circle-arrow { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border: 1px solid #81a9c8; border-radius: 50%; color: #357daf; font-size: 18px; }
.product-card .circle-arrow { width: 28px; height: 28px; flex-basis: 28px; font-size: 16px; border-color: #abc2d3; }
.product-card .product-description { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.75; letter-spacing: -.02em; word-break: keep-all; }

/* 04 */
.opportunity-banner { position: relative; color: white; min-height: 315px; display: flex; align-items: center; }
.opportunity-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(11 30 45 / .87), rgb(11 30 45 / .35) 45%, rgb(13 31 45 / .1)); pointer-events: none; }
.opportunity-content { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 32px; align-items: center; padding-block: 52px; }
.opportunity-note { color: #f1f5f8; font-size: 23px; line-height: 1.65; font-weight: 500; letter-spacing: -.035em; margin-right: 32px; }
.journey-band { padding-block: 24px 42px; background: #f1f5f8; }
.journey-grid { padding: 0; list-style: none; display: grid; grid-template-columns: 45fr 55fr 70fr; gap: 18px; }
.journey-step { min-width: 0; position: relative; }
.journey-visual { position: relative; }
.journey-products { display: flex; align-items: center; gap: 4px; margin-top: 11px; }
.journey-product-badge { display: inline-block; padding: 1px 5px; border: 1px solid #dce4ea; border-radius: 2px; color: #60768b; background: rgb(255 255 255 / .16); font: 400 9px/1.4 Arial, sans-serif; letter-spacing: .025em; }
.journey-product-office { border-color: #dce3e8; color: #657583; background: rgb(231 237 242 / .2); }
.journey-product-works { border-color: #d9e4e1; color: #5e7875; background: rgb(227 238 234 / .2); }
.journey-product-app { border-color: #dae4ee; color: #577693; background: rgb(223 234 246 / .2); }
.journey-step h3 { margin-top: 7px; font-size: 17px; font-weight: 700; letter-spacing: -.035em; }
.journey-step > p { margin-top: 4px; font-size: 12px; color: #6c8091; line-height: 1.75; word-break: keep-all; }
.journey-overlay { position: absolute; z-index: 2; top: 22px; right: 24px; color: #274961; padding: 8px 10px; background: rgb(237 244 249 / .92); font-size: 13px; line-height: 1.75; font-weight: 500; border-radius: 3px; pointer-events: none; }

/* Works / Office introduction: two 6:5 source images share a diagonal edge. */
.solutions-section { position: relative; isolation: isolate; min-height: clamp(740px, 56.25vw, 960px); overflow: hidden; background: #f8fbfd; }
.solutions-heading { position: relative; z-index: 3; padding: 48px 24px 0; text-align: center; pointer-events: none; }
.solutions-heading .eyebrow { margin-bottom: 14px; font-size: 10px; letter-spacing: .22em; }
.solutions-heading h2 { font-size: clamp(32px, 2.8vw, 46px); font-weight: 750; line-height: 1.32; letter-spacing: -.055em; }
.solutions-heading > p:last-child { margin-top: 16px; font-size: 15px; line-height: 1.8; letter-spacing: -.02em; color: #61788f; }
.solution-panel { position: absolute; inset-block: 0; width: 60%; isolation: isolate; overflow: hidden; }
.solution-works { left: 0; clip-path: polygon(0 0, 100% 0, 66.6667% 100%, 0 100%); }
.solution-office { right: 0; clip-path: polygon(33.3333% 0, 100% 0, 100% 100%, 0 100%); }
.solution-scene { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; background: linear-gradient(135deg, #d6e4ee, #edf4f8); transform: scale(1); transition: transform .55s cubic-bezier(.2,.65,.3,1), filter .4s ease; }
.solution-office .solution-scene { background: linear-gradient(140deg, #eef4f8, #dfe9f0); }
.solution-panel::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(248 251 253 / .97), rgb(248 251 253 / .6) 23%, transparent 38%, transparent 51%, rgb(248 251 253 / .96) 75%, #f8fbfd 92%); }
.solution-panel::before { content: ""; position: absolute; z-index: 3; bottom: 0; inset-inline: 0; height: 2px; background: #70a3d1; opacity: 0; transition: opacity .3s ease; }
.solution-copy { position: absolute; z-index: 2; bottom: 36px; left: var(--gutter); width: calc(66.6667% - var(--gutter) - 28px); }
.solution-office .solution-copy { left: 20%; width: calc(80% - var(--gutter)); }
.solution-role { color: #687e92; font-size: 12px; line-height: 1.6; }
.solution-copy h3 { margin-top: 2px; font-size: clamp(30px, 2.7vw, 42px); line-height: 1.35; letter-spacing: -.055em; font-weight: 750; }
.solution-description { margin-top: 8px; color: #4c6680; font-size: 14px; line-height: 1.8; letter-spacing: -.025em; word-break: keep-all; }
.solution-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 23px 0 0; padding: 0; }
.solution-features li { min-width: 0; display: flex; align-items: flex-start; gap: 9px; }
.solution-features svg { flex: 0 0 32px; width: 32px; height: 32px; padding: 7px; border-radius: 50%; color: #397fbf; background: #e6f0fa; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.solution-features strong { display: block; font-size: 11px; font-weight: 650; line-height: 1.6; letter-spacing: -.035em; }
.solution-features small { display: block; margin-top: 2px; color: #698098; font-size: 10px; line-height: 1.65; letter-spacing: -.02em; word-break: keep-all; }
.solution-cta { display: inline-flex; align-items: center; gap: 14px; margin-top: 22px; padding-bottom: 5px; border-bottom: 1px solid #91b4d3; font-size: 13px; font-weight: 600; line-height: 1.6; transition: color .2s ease, border-color .2s ease; }
.solution-cta > span { transition: transform .25s ease; }
@media (hover: hover) and (pointer: fine) {
  .solution-panel:hover .solution-scene { transform: scale(1.035); filter: brightness(1.03); }
  .solution-panel:hover::before { opacity: 1; }
  .solution-panel:hover .solution-cta { color: var(--blue); border-color: var(--blue); }
  .solution-panel:hover .solution-cta > span { transform: translateX(4px); }
}
.solution-panel:focus-visible { outline: none; }
.solution-panel:focus-visible::before { opacity: 1; }
.solution-panel:focus-visible .solution-copy { outline: 2px solid #58a7f5; outline-offset: 12px; }
.solution-panel:focus-visible .solution-scene { transform: scale(1.035); }
@media (max-width: 1150px) {
  .solutions-section { min-height: 760px; }
  .solution-copy { left: 32px; width: calc(66.6667% - 52px); }
  .solution-office .solution-copy { width: calc(80% - 32px); }
  .solution-features { gap: 10px; }
  .solution-features li { display: block; }
  .solution-features svg { margin-bottom: 5px; }
  .solution-description { font-size: 13px; }
}
@media (min-width: 701px) {
  .solutions-section { --solution-image-height: clamp(444px, 33.75vw, 576px); --solution-copy-offset: 64px; min-height: calc(var(--solution-image-height) + var(--solution-copy-offset)); }
  .solutions-heading { padding-top: 22px; }
  .solutions-heading .eyebrow { margin-bottom: 8px; }
  .solutions-heading h2 { font-size: clamp(26px, 2.1vw, 36px); line-height: 1.25; }
  .solutions-heading > p:last-child { margin-top: 8px; font-size: 13px; line-height: 1.6; color: #496278; }
  .solution-copy { bottom: 22px; }
  .solution-scene { height: var(--solution-image-height); mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent); }
  .solution-scene picture { width: 82%; mask-image: linear-gradient(90deg, #000 80%, transparent); }
  .solution-office .solution-scene picture { left: auto; right: 0; mask-image: linear-gradient(270deg, #000 80%, transparent); }
  .solution-panel::after { background: linear-gradient(180deg, transparent calc(48% + 64px), rgb(248 251 253 / .65) calc(75% + 40px), rgb(248 251 253 / .95) calc(92% + 8px), #f8fbfd); }
  .solution-copy::before { content: ""; position: absolute; z-index: -1; top: -54px; bottom: -50px; left: calc(-1 * var(--gutter)); right: -60px; pointer-events: none; background: radial-gradient(ellipse at 38% 65%, rgb(248 251 253 / .98) 32%, rgb(248 251 253 / .9) 48%, rgb(248 251 253 / .5) 65%, transparent 82%); mask-image: linear-gradient(180deg, transparent, #000 54px, #000); }
  .solution-role { font-size: 11px; color: #4b647a; }
  .solution-features small { color: #526b80; }
  .solution-copy h3 { font-size: clamp(25px, 2.1vw, 34px); line-height: 1.25; }
  .solution-description { margin-top: 6px; font-size: 13px; line-height: 1.65; }
  .solution-features { margin-top: 12px; }
  .solution-cta { margin-top: 12px; padding-bottom: 3px; font-size: 12px; }
}
@media (min-width: 701px) and (max-width: 1150px) {
  .solutions-section { --solution-image-height: 456px; }
}
@media (max-width: 700px) {
  .solutions-section { min-height: 0; }
  .solutions-heading { padding: 38px 24px 20px; }
  .solutions-heading h2 { font-size: 29px; }
  .solutions-heading > p:last-child { font-size: 13px; }
  .solution-panel { display: block; position: relative; width: 100%; min-height: 570px; clip-path: none; }
  .solution-copy, .solution-office .solution-copy { left: 24px; width: calc(100% - 48px); bottom: 32px; }
  .solution-copy h3 { font-size: 31px; }
  .solution-features { margin-top: 18px; }
  .solution-panel::after { background: linear-gradient(180deg, #f8fbfd, transparent 15%, transparent 35%, rgb(248 251 253 / .98) 61%, #f8fbfd); }
}

/* 08 */
.closing-section { position: relative; min-height: 218px; color: white; display: flex; align-items: center; }
.closing-section::after { content: ""; position: absolute; inset: 0; background: rgb(6 25 40 / .56); pointer-events: none; }
.closing-content { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.25fr auto; align-items: center; gap: 36px; padding-block: 55px; }
.closing-content .eyebrow { color: #a9c0d3; font-size: 9px; letter-spacing: .09em; margin-bottom: 15px; }
.closing-content .wordmark { font-size: 34px; }
.closing-content > p { padding-left: 30px; border-left: 1px solid #4c6578; font-size: 15px; line-height: 1.8; color: #d5e0e8; }
.closing-cta { min-height: 46px; font-size: 13px; }
.site-footer { background: #0c2032; color: #b0bfcb; border-top: 1px solid #253e51; padding-block: 29px 25px; }
.footer-top { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 19px; }
.footer-top .wordmark { font-size: 19px; color: #d9e4ed; }
.footer-top > a:last-child { font-size: 12px; padding-block: 8px; }
.merchant-disclosure { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px 18px; font-size: 11px; line-height: 1.85; color: #a3b5c3; }
.footer-bottom { border-top: 1px solid #263c4e; padding-top: 18px; margin-top: 21px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px 28px; font-size: 11px; }
.footer-bottom nav { display: flex; gap: 21px; flex-wrap: wrap; }
.footer-bottom a:hover, .footer-top > a:last-child:hover { color: white; text-decoration: underline; text-underline-offset: 4px; }

/* Enquiries reuse the existing server payload, but gain native modal accessibility. */
.contact-dialog { color: var(--ink); background: #f7fafc; width: min(540px, calc(100% - 32px)); max-height: calc(100dvh - 40px); border: 1px solid #d3e0ea; border-radius: 14px; padding: 30px; box-shadow: 0 24px 100px rgb(3 21 37 / .3); }
.contact-dialog::backdrop { background: rgb(6 22 35 / .7); }
.dialog-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.dialog-heading h2 { font-size: 28px; letter-spacing: -.04em; margin-top: 10px; line-height: 1.3; }
.dialog-close { width: 44px; height: 44px; border: 1px solid #d4dee7; color: #325269; background: #edf3f7; border-radius: 50%; font-size: 27px; flex-shrink: 0; line-height: 1; }
.contact-dialog > p { color: var(--muted); font-size: 14px; margin-top: 13px; }
.contact-dialog form { display: flex; flex-direction: column; margin-top: 24px; }
.contact-dialog label { margin: 14px 0 8px; font-size: 13px; font-weight: 600; }
.contact-dialog input, .contact-dialog textarea { width: 100%; border: 1px solid #b6c7d5; background: #fff; color: var(--ink); border-radius: 6px; padding: 12px 14px; font-size: 16px; line-height: 1.6; }
.contact-dialog textarea { resize: vertical; min-height: 132px; }
.privacy-note { font-size: 11px; color: #667c90; margin-top: 12px; }
.privacy-note a { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.contact-status { min-height: 24px; font-size: 13px; margin-block: 13px; }
.contact-status[data-state="error"] { color: #a23e31; }
.contact-status[data-state="success"] { color: #226d54; }
.submit-inquiry { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #fff; background: #185987; border: 0; border-radius: 6px; padding: 12px 18px; font-size: 14px; }
.email-fallback { align-self: center; font-size: 11px; padding: 12px 2px 0; color: #536f85; }

@media (min-width: 1151px) {
  .site-header::before { content: ""; position: absolute; inset: 0 0 auto; height: 110px; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgb(6 23 37 / .82), rgb(6 23 37 / .62) 55%, transparent); }
  .site-header[data-scrolled="true"]::before, .site-header[data-menu-open="true"]::before { opacity: 0; }
  .hero { aspect-ratio: auto; min-height: clamp(620px, 78svh, 760px); }
  .hero-content { padding-block: 46px 40px; }
  .hero .scroll-link { margin-top: 48px; }
  .products-section { padding-bottom: 90px; }
  .journey-band { padding-block: 56px 88px; }
  .closing-section { aspect-ratio: 2804 / 561; min-height: 0; }
  .closing-section::after { background: linear-gradient(90deg, rgb(6 25 40 / .66), rgb(6 25 40 / .2) 48%, transparent 72%); }
  .closing-content { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding-block: 24px; }
  .closing-content .eyebrow { margin-bottom: 10px; }
  .closing-content .wordmark { font-size: clamp(30px, 2.6vw, 40px); }
  .closing-content > p { max-width: 43%; margin-top: 12px; padding-left: 0; border-left: 0; color: #e3ebf1; font-size: 13px; }
  .closing-cta { margin-top: 16px; min-height: 40px; font-size: 12px; }
  .opportunity-banner { aspect-ratio: 46 / 7; min-height: 0; }
  .opportunity-banner .media-slot img { object-position: 64% 0%; }
  .opportunity-content { padding-block: clamp(16px, 1.4vw, 27px); }
  .opportunity-content .eyebrow { font-size: 9px; margin-bottom: 12px; }
  .opportunity-content h2 { font-size: clamp(22px, 1.8vw, 28px); }
  .opportunity-content .section-heading > p:not(.eyebrow) { font-size: 12px; margin-top: 12px; }
}
@media (min-width: 1700px) { :root { --shell-width: 1400px; } }
@media (max-width: 1150px) {
  .brand-line { display: none; }
  .section-layout { grid-template-columns: minmax(215px, 29%) minmax(0,1fr); gap: 30px; }
  .product-grid { gap: 14px; }
  .products-section .section-layout { gap: 26px; grid-template-columns: minmax(0, 28%) minmax(0, 1fr); }
  .products-section .section-heading h2 { font-size: 23px; }
  .products-section .section-heading > p:not(.eyebrow) { font-size: 13px; }
  .product-title h3 { font-size: 17px; }
  .product-card-app .product-title h3 { font-size: 19px; }
  .circle-arrow { width: 29px; height: 29px; flex-basis: 29px; font-size: 16px; }
  .closing-content { gap: 25px; grid-template-columns: 1fr 1.2fr auto; }
  .closing-content > p { font-size: 13px; padding-left: 23px; }
}
@media (max-width: 900px) {
  .platform-bridge-copy { width: 47%; }
  .platform-bridge-copy h2 { font-size: 28px; }
  .platform-core { left: 74%; width: 150px; }
  :root { --header-height: 68px; --gutter: 32px; }
  .header-inner { flex-wrap: wrap; gap: 0; justify-content: space-between; }
  .header-inner > .wordmark { font-size: 24px; }
  .site-header:not([data-menu-ready]) { position: relative; background: #0c2032; }
  .site-nav { width: 100%; margin: 0; padding-block: 12px 18px; gap: 20px; flex-wrap: wrap; }
  .site-header[data-menu-ready] .menu-toggle { display: block; }
  .site-header[data-menu-ready] .site-nav { display: none; }
  .site-header[data-menu-open="true"] .site-nav { display: flex; }
  .site-header[data-menu-open="true"] .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .site-header[data-menu-open="true"] .menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .hero { min-height: 540px; }
  .hero-content { padding-top: 170px; }
  .section-layout { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .section-light { padding-block: 43px; }
  .section-heading h2 { font-size: 32px; }
  .section-heading > p:not(.eyebrow) { font-size: 15px; margin-top: 15px; }
  .section-heading .eyebrow { margin-bottom: 14px; }
  .products-section .section-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .products-section .section-heading { max-width: 520px; }
  .products-section .section-heading h2 { font-size: 30px; }
  .product-grid { gap: 20px; }
  .product-title h3 { font-size: 21px; }
  .product-card-app .product-title h3 { font-size: 23px; }
  .journey-grid { gap: 13px; }
  .journey-step h3 { font-size: 15px; }
  .journey-step > p { font-size: 12px; }
  .journey-overlay { right: 14px; top: 10px; font-size: 11px; }
  .opportunity-note { margin-right: 0; font-size: 19px; }
  .closing-content { grid-template-columns: 1fr auto; }
  .closing-content > p { grid-row: 2; border: 0; padding: 0; font-size: 14px; }
  .closing-cta { grid-column: 2; grid-row: 1 / 3; }
}
@media (max-width: 700px) {
  .platform-bridge { min-height: 450px; align-items: flex-start; }
  .platform-bridge-copy { width: 100%; max-width: 380px; }
  .platform-bridge-copy h2 { font-size: 27px; }
  .platform-core { top: auto; bottom: 34px; left: 68%; transform: translateX(-50%); width: 126px; }
  .platform-core strong { font-size: 23px; }
  .platform-core span { font-size: 10px; }
  :root { --gutter: 24px; }
  .site-nav { gap: 0; flex-direction: column; align-items: stretch; }
  .site-nav > a { min-height: 48px; justify-content: flex-start; }
  .site-nav .pill-link { margin-top: 8px; justify-content: space-between; }
  .hero { min-height: 545px; }
  .hero-content { padding-block: 160px 60px; }
  .hero h1 { font-size: clamp(35px, 8.5vw, 48px); letter-spacing: -.06em; }
  .hero .eyebrow { margin-bottom: 26px; }
  .hero-lead { font-size: 15px; margin-top: 22px; }
  .scroll-link { margin-top: 46px; }
  .section-art .media-placeholder { padding: 15px 18px; }
  .section-art .media-label { font-size: 9px; }
  .section-light { padding-block: 42px; }
  .section-heading h2 { font-size: clamp(27px, 6.5vw, 34px); }
  .section-heading > p:not(.eyebrow) { font-size: 14px; }
  .media-slot:not(.section-art) { aspect-ratio: var(--media-mobile-ratio); }
  .media-slot img { object-position: var(--media-mobile-position); }
  .media-placeholder { padding: 12px; }
  .media-frame { inset: 12px; }
  .products-section .section-heading h2 { font-size: clamp(24px, 6.5vw, 30px); }
  .product-grid { grid-template-columns: minmax(0,1fr); grid-template-areas: "app" "works" "office"; gap: 32px; }
  .product-card { margin-top: 0; }
  .product-title h3 { font-size: 20px; }
  .product-card-app .product-title h3 { font-size: 22px; }
  .circle-arrow { width: 27px; height: 27px; flex-basis: 27px; font-size: 16px; }
  .opportunity-banner { min-height: 305px; }
  .opportunity-content { padding-block: 45px 65px; }
  .opportunity-note { display: none; }
  .journey-band { padding-block: 23px 38px; }
  .journey-grid { grid-template-columns: minmax(0,1fr); gap: 29px; }
  .journey-step h3 { font-size: 17px; margin-top: 7px; }
  .journey-step > p { font-size: 12px; }
  [data-media-slot^="journey-"] { --media-mobile-ratio: 16 / 9; }
  .journey-overlay { right: 15px; top: 15px; font-size: 13px; }
  .closing-content { grid-template-columns: 1fr; gap: 23px; padding-block: 42px 64px; }
  .closing-content > p { grid-row: auto; font-size: 14px; }
  .closing-cta { grid-column: 1; grid-row: auto; justify-self: start; }
  .site-footer { padding-block: 25px; }
  .footer-top .wordmark { font-size: 19px; }
  .footer-top > a:last-child { font-size: 11px; }
  .merchant-disclosure { gap: 4px 12px; font-size: 10px; }
  .footer-bottom { flex-direction: column; gap: 14px; font-size: 10px; }
  .footer-bottom nav { gap: 8px 16px; }
  .footer-bottom nav a { padding-block: 6px; }
  .contact-dialog { padding: 23px; }
  .dialog-heading h2 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .site-header { position: static !important; color: #122b42; }
  .menu-toggle, .scroll-link, .contact-dialog { display: none !important; }
  .media-slot { break-inside: avoid; }
  .section-heading { break-after: avoid; }
}