/* ---------- Tokens ---------- */
:root {
  --bg: #ffffff; --bg-2: #f5f5f7; --bg-dark: #0b0b0c; --bg-dark-2: #161617;
  --ink: #1d1d1f; --ink-2: #424245; --ink-3: #6e6e73; --ink-dark: #f5f5f7; --ink-dark-2: #a1a1a6;
  --hairline: #d2d2d7; --hairline-dark: #333336;
  --accent: #1d3f7a; --accent-hover: #254c92; --accent-ink: #ffffff;
  --link: #0066cc; --link-dark: #2997ff; --label: #b64400; --label-dark: #f5a35c;
  --nav-bg: rgba(255, 255, 255, 0.8); --menu-bg: #ffffff; --select: #c9d9f5;
  --shadow-device: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.18));
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0b0b0c; --bg-2: #161617; --bg-dark: #000000; --bg-dark-2: #161617;
  --ink: #f5f5f7; --ink-2: #c7c7cc; --ink-3: #98989d;
  --hairline: #333336;
  --accent: #7ea6e8; --accent-hover: #a8c2f0; --accent-ink: #0b0b0c;
  --link: #2997ff; --label: #f5a35c;
  --nav-bg: rgba(22, 22, 23, 0.8); --menu-bg: #1d1d1f; --select: #254c92;
  --shadow-device: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6));
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-padding-top: 64px; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  color: var(--ink); font-size: 17px; line-height: 1.47; letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
::selection { background: var(--select); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p { margin: 0; }
.wrap { max-width: 1024px; margin: 0 auto; padding: 0 22px; }
.wrap-wide { max-width: 1280px; margin: 0 auto; padding: 0 22px; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Sections: generous Apple-style rhythm */
.section { padding: clamp(80px, 11vw, 160px) 0; }
.section-tight { padding: clamp(56px, 7vw, 96px) 0; }
.alt { background: var(--bg-2); }
.dark { background: var(--bg-dark); color: var(--ink-dark); --ink: var(--ink-dark); --ink-2: var(--ink-dark-2); --ink-3: #86868b; --hairline: var(--hairline-dark); --link: var(--link-dark); --label: var(--label-dark); }

/* ---------- Type ---------- */
.label { font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; letter-spacing: 0.01em; color: var(--label); margin-bottom: 10px; }
.display { font-size: clamp(48px, 8.4vw, 96px); font-weight: 700; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.headline { font-size: clamp(36px, 5.6vw, 64px); font-weight: 700; line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; }
.title { font-size: clamp(28px, 3.6vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
.subhead { font-size: clamp(21px, 2.4vw, 28px); font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink-2); text-wrap: balance; }
.body-lg { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; letter-spacing: -0.015em; color: var(--ink-2); text-wrap: pretty; }
.small { font-size: 14px; letter-spacing: -0.01em; color: var(--ink-3); }

/* ---------- Links & buttons ---------- */
.more { font-size: clamp(17px, 1.6vw, 21px); letter-spacing: -0.015em; color: var(--link); display: inline-flex; align-items: center; }
.more::after { content: ""; width: 0.42em; height: 0.42em; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg); margin-left: 0.32em; margin-top: 0.05em; }
.more.ext::after { transform: none; border: 0; content: "↗"; width: auto; height: auto; margin: 0 0 0 0.2em; }
.links { display: flex; gap: 14px 34px; flex-wrap: wrap; align-items: center; }
.center .links { justify-content: center; }
.pill { display: inline-block; background: var(--accent); color: var(--accent-ink); border-radius: 980px; padding: 12px 24px; font-size: 17px; letter-spacing: -0.022em; white-space: nowrap; }
.pill:hover { background: var(--accent-hover); color: var(--accent-ink); text-decoration: none; }
.pill-sm { padding: 5px 13px; font-size: 12px; letter-spacing: -0.01em; }
.pill, .icon-btn, .nav-menu summary { transition: background .25s cubic-bezier(.28,.11,.32,1), color .25s, border-color .25s, transform .2s cubic-bezier(.28,.11,.32,1); }
.pill:active, .icon-btn:active, .nav-menu summary:active { transform: scale(0.95); }

/* ---------- Ribbon ---------- */
.ribbon { background: var(--bg-2); text-align: center; padding: 14px 22px; font-size: 14px; line-height: 1.43; letter-spacing: -0.016em; color: var(--ink-2); }
.ribbon a { white-space: nowrap; }
.ribbon .more { font-size: 14px; }

/* ---------- Global nav ---------- */
.gnav { position: sticky; top: 0; z-index: 40; height: 48px; background: var(--nav-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent); }
.gnav.static { position: relative; }
.gnav-inner { max-width: 1024px; height: 100%; margin: 0 auto; padding: 0 22px; display: flex; align-items: center; gap: 24px; }
.gnav .brand { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; margin-right: auto; }
.gnav .brand:hover { text-decoration: none; }
.gnav-links { display: flex; align-items: center; gap: 30px; }
.gnav-links a { font-size: 12px; letter-spacing: -0.01em; color: var(--ink); opacity: 0.85; }
.gnav-links a:hover { opacity: 1; text-decoration: none; color: var(--ink); }
.gnav-actions { display: flex; align-items: center; gap: 12px; }
.icon-btn { background: transparent; border: 0; color: var(--ink); width: 32px; height: 32px; border-radius: 980px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.icon-btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
[data-theme-icon] { display: none; }
:root[data-theme="dark"] [data-theme-icon="dark"], :root:not([data-theme="dark"]) [data-theme-icon="light"] { display: block; }
.nav-menu { position: relative; display: none; }
.nav-menu summary { list-style: none; cursor: pointer; width: 32px; height: 32px; border-radius: 980px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu[open] summary { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.nav-menu-panel { position: absolute; right: 0; top: calc(100% + 10px); min-width: 200px; background: var(--menu-bg); border: 1px solid var(--hairline); border-radius: 16px; padding: 8px; box-shadow: 0 16px 40px rgba(0,0,0,0.16); display: flex; flex-direction: column; }
.nav-menu-panel a { font-size: 17px; color: var(--ink); padding: 10px 12px; border-radius: 10px; }
.nav-menu-panel a:hover { background: var(--bg-2); text-decoration: none; }

/* ---------- Local nav (case studies) ---------- */
.lnav { position: sticky; top: 0; z-index: 30; height: 52px; background: var(--nav-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hairline); }
.lnav-inner { max-width: 1024px; height: 100%; margin: 0 auto; padding: 0 22px; display: flex; align-items: center; gap: 24px; }
.lnav .lnav-title { font-size: 21px; font-weight: 600; letter-spacing: 0.011em; color: var(--ink); margin-right: auto; white-space: nowrap; }
.lnav .lnav-title:hover { text-decoration: none; }
.lnav-links { display: flex; gap: 24px; }
.lnav-links a { font-size: 12px; color: var(--ink); opacity: 0.85; }
.lnav-links a:hover { opacity: 1; color: var(--link); text-decoration: none; }
.lnav-links a.active { opacity: 1; color: var(--ink); font-weight: 600; }

@media (max-width: 860px) {
  .gnav-links { display: none; }
  .nav-menu { display: block; }
}
@media (max-width: 640px) {
  .lnav-links { display: none; }
  .lnav .lnav-title { font-size: 19px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; display: flex; align-items: center; min-height: clamp(560px, 86vh, 860px); padding: clamp(72px, 10vw, 128px) 0; background-color: #f3f3f1; background-image: url('hero-gate.webp'); background-size: cover; background-position: 78% 60%; background-repeat: no-repeat; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.7) 45%, rgba(255,255,255,0.1) 100%); pointer-events: none; }
:root[data-theme="dark"] .hero { background-color: #000; }
:root[data-theme="dark"] .hero::before { background: linear-gradient(100deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 45%, rgba(0,0,0,0.45) 100%); }
.hero .wrap { position: relative; width: 100%; max-width: 1120px; }
.hero .label { margin-bottom: 18px; }
.hero .display { margin: 0 0 24px; max-width: 900px; }
.hero .subhead { margin: 0 0 36px; max-width: 560px; }
.hero .links { justify-content: flex-start; }

/* ---------- Product tiles ---------- */
.tiles { display: grid; gap: 12px; padding: 12px; }
.tile { position: relative; overflow: hidden; text-align: center; padding: clamp(48px, 6vw, 72px) 22px 0; background: var(--bg-2); min-height: 560px; display: flex; flex-direction: column; align-items: center; }
.tile.dark { background: var(--bg-dark); }
.tile .tile-logo { height: 64px; width: auto; margin: 0 auto 18px; }
.tile .headline { max-width: 820px; margin: 0 auto 12px; }
.tile .subhead { max-width: 640px; margin: 0 auto 22px; }
.tile .links { justify-content: center; }
.tile .tile-media { margin-top: auto; padding-top: clamp(32px, 5vw, 56px); width: 100%; display: flex; justify-content: center; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 12px; }
.tile-grid .tile { min-height: 520px; padding-bottom: clamp(40px, 5vw, 56px); }
.tile-grid .tile .headline { font-size: clamp(32px, 4vw, 48px); }

/* ---------- Devices ---------- */
.laptop { width: min(100%, 880px); margin: 0 auto; }
.laptop-screen { background: #0d0d0f; border-radius: 18px 18px 0 0; padding: 2.2% 2.2% 2.6%; border: 1px solid #3a3a3c; border-bottom: 0; box-shadow: inset 0 0 0 1px #1c1c1e; }
.laptop-screen img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border-radius: 4px; }
.laptop-base { position: relative; height: 16px; margin: 0 -7%; background: linear-gradient(#e3e3e6, #b9b9bd 60%, #8e8e93); border-radius: 0 0 14px 14px / 0 0 10px 10px; }
.laptop-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 6px; transform: translateX(-50%); background: #a1a1a6; border-radius: 0 0 8px 8px; }
:root[data-theme="dark"] .laptop-base, .dark .laptop-base { background: linear-gradient(#5a5a5e, #3a3a3c 60%, #2c2c2e); }
:root[data-theme="dark"] .laptop-base::before, .dark .laptop-base::before { background: #2c2c2e; }
.laptop-wrap { filter: var(--shadow-device); }
.phone-shot { width: min(100%, 460px); height: auto; filter: var(--shadow-device); }

/* ---------- Numbers ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(40px, 6vw, 80px); }
.stat-num { font-size: clamp(64px, 10vw, 128px); font-weight: 700; line-height: 1; letter-spacing: -0.045em; background: linear-gradient(120deg, var(--accent), #6c8fd6 55%, #b07cc6); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="dark"] .stat-num, .dark .stat-num { background-image: linear-gradient(120deg, #7ea6e8, #a8c2f0 55%, #d0a6e0); }
.stat-num sup { font-size: 0.22em; letter-spacing: 0; vertical-align: top; position: relative; top: 0.5em; margin-left: 0.1em; color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }
.stat-label { font-size: clamp(19px, 1.9vw, 24px); font-weight: 600; letter-spacing: -0.015em; margin-top: 14px; line-height: 1.25; }
.stat-note { font-size: 17px; color: var(--ink-3); margin-top: 6px; }

/* ---------- Lists ---------- */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.rows > li { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 10px 40px; padding: 30px 0; border-bottom: 1px solid var(--hairline); align-items: baseline; }
.rows .who { display: flex; align-items: center; gap: 14px; }
.rows .who img { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; flex: none; }
.rows .name { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.rows .meta { font-size: 14px; color: var(--ink-3); margin-top: 3px; }
.rows p { color: var(--ink-2); text-wrap: pretty; }
.rows .num { font-size: clamp(32px, 4vw, 48px); font-weight: 700; letter-spacing: -0.03em; color: var(--ink-3); line-height: 1; }
.rows.numbered > li { grid-template-columns: 110px 1fr; }
.rows h3 { font-size: clamp(21px, 2.2vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 10px; }
@media (max-width: 640px) {
  .rows > li, .rows.numbered > li { grid-template-columns: 1fr; }
}

/* ---------- Scholarship ---------- */
.crests { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 3vw, 34px); margin-bottom: 36px; }
.crests img { height: 64px; width: auto; }
.crests .divider { width: 1px; height: 44px; background: rgba(255,255,255,0.22); }
.crests .chev { filter: brightness(0) invert(1); opacity: 0.92; }
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; margin-top: 36px; font-size: 17px; color: var(--ink-2); }
.facts span + span::before { content: "·"; margin: 0 14px; color: var(--ink-3); }
.badge { display: inline-block; font-size: 14px; font-weight: 600; color: var(--ink); border: 1px solid var(--hairline); border-radius: 980px; padding: 6px 14px; margin-top: 24px; }
.badge b { color: var(--link); font-weight: 600; }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(40px, 6vw, 88px); align-items: start; }
.about-grid .headline { margin-bottom: 28px; }
.about-grid .body-lg + .body-lg { margin-top: 18px; }
.creds > div { border-top: 1px solid var(--hairline); padding: 24px 0; }
.creds > div:last-child { border-bottom: 1px solid var(--hairline); }
.creds .k { font-size: 14px; color: var(--ink-3); margin-bottom: 12px; }
.creds .school { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.creds .school img { height: 30px; width: auto; flex: none; }
.creds .school + .v { margin-top: 6px; }
.creds .v { color: var(--ink-2); }
.creds .v + .school { margin-top: 20px; }
:root[data-theme="dark"] img[data-dark-invert] { filter: invert(1) brightness(1.45); }

/* ---------- Case study ---------- */
.cs-hero { text-align: center; padding: clamp(56px, 8vw, 112px) 0 clamp(40px, 5vw, 64px); }
.cs-hero .cs-logo { height: 56px; width: auto; margin: 0 auto 22px; }
.cs-hero .display { font-size: clamp(44px, 7.4vw, 88px); max-width: 960px; margin: 0 auto 20px; }
.cs-hero .subhead { max-width: 720px; margin: 0 auto; }
.cs-media { display: flex; justify-content: center; padding: 0 22px clamp(56px, 7vw, 96px); }
.cs-media img.wide { width: min(100%, 1100px); height: auto; filter: var(--shadow-device); }
.facts-list { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--hairline); }
.facts-list > div { display: grid; grid-template-columns: 160px 1fr; gap: 6px 24px; padding: 20px 0; border-bottom: 1px solid var(--hairline); }
.facts-list .k { font-size: 14px; color: var(--ink-3); padding-top: 3px; }
.facts-list .v { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
@media (max-width: 560px) { .facts-list > div { grid-template-columns: 1fr; } }
.prose { max-width: 720px; margin: 0 auto; }
.prose .label { margin-bottom: 8px; }
.prose .headline { font-size: clamp(32px, 4.6vw, 56px); margin-bottom: 28px; }
.prose p { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; letter-spacing: -0.015em; color: var(--ink-2); text-wrap: pretty; }
.prose p + p { margin-top: 20px; }
.prose strong { color: var(--ink); font-weight: 600; }
.caption { max-width: 640px; margin: 28px auto 0; text-align: center; font-size: 17px; color: var(--ink-3); text-wrap: balance; }

/* Pinned scroll showcase */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.showcase-visual { position: sticky; top: 72px; height: calc(100vh - 96px); display: flex; align-items: center; justify-content: center; }
.showcase-visual .frame { position: relative; width: 100%; aspect-ratio: 1 / 1.05; }
.showcase-visual .frame > * { position: absolute; inset: 0; margin: auto; opacity: 0; transform: scale(0.96); transition: opacity .6s cubic-bezier(.28,.11,.32,1), transform .6s cubic-bezier(.28,.11,.32,1); display: flex; align-items: center; justify-content: center; }
.showcase-visual .frame > .on { opacity: 1; transform: none; }
.showcase-visual .frame .phone-shot { max-height: 100%; width: auto; }
.showcase-steps { padding: 20vh 0 30vh; }
.step { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.3; transition: opacity .5s; }
.step.on { opacity: 1; }
.step .title { margin-bottom: 16px; }
.step .step-media { display: none; }
@media (max-width: 820px) {
  .showcase { grid-template-columns: 1fr; }
  .showcase-visual { display: none; }
  .showcase-steps { padding: 0; }
  .step { min-height: 0; opacity: 1; padding: 40px 0; }
  .step .step-media { display: flex; justify-content: center; margin-top: 28px; }
}

.next-tile { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.next-tile > a { display: block; background: var(--bg-2); border-radius: 28px; padding: 40px; color: var(--ink); transition: transform .35s cubic-bezier(.28,.11,.32,1); }
.next-tile > a:hover { text-decoration: none; transform: scale(1.015); }
.next-tile .k { font-size: 14px; color: var(--ink-3); margin-bottom: 10px; }
.next-tile .title { margin-bottom: 18px; }

/* ---------- Footer ---------- */
.footer { background: var(--bg-2); color: var(--ink-3); font-size: 12px; line-height: 1.34; letter-spacing: -0.01em; padding: 36px 0 22px; }
.footer a { color: var(--ink-2); }
.footnotes { list-style: none; counter-reset: fn; margin: 0 0 20px; padding: 0 0 18px; border-bottom: 1px solid var(--hairline); }
.footnotes li { counter-increment: fn; margin-bottom: 8px; }
.footnotes li::before { content: counter(fn) ". "; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--hairline); }
.footer-cols h4 { margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--ink); }
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin-bottom: 9px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 18px; }

/* ---------- Motion ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.28,.11,.32,1), transform .9s cubic-bezier(.28,.11,.32,1); }
.js .reveal.in { opacity: 1; transform: none; }
[data-stagger] > * { transition: opacity .6s cubic-bezier(.28,.11,.32,1), transform .6s cubic-bezier(.28,.11,.32,1); }
.js [data-stagger]:not(.in) > * { opacity: 0; transform: translateY(14px); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .reveal, .js [data-stagger]:not(.in) > * { opacity: 1 !important; transform: none !important; }
  .pill:active, .icon-btn:active, .nav-menu summary:active { transform: none; }
  .step { opacity: 1; }
}

/* ---------- Abstract layer: glows, globe, light ---------- */
/* Product-coloured glow behind each tile's device */
.tile .tile-media { position: relative; isolation: isolate; }
.tile .tile-media::before { content: ""; position: absolute; left: 50%; top: 55%; width: min(125%, 1200px); height: 95%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--glow-a, transparent), transparent 75%), radial-gradient(closest-side at 28% 62%, var(--glow-b, transparent), transparent 75%), radial-gradient(closest-side at 74% 40%, var(--glow-c, transparent), transparent 75%); filter: blur(50px); z-index: -1; pointer-events: none; }
.tile-aversi { --glow-a: rgba(226, 35, 52, 0.30); --glow-b: rgba(255, 120, 135, 0.35); --glow-c: rgba(255, 170, 120, 0.28); }
.tile-roamingo { --glow-a: rgba(58, 60, 190, 0.75); --glow-b: rgba(72, 200, 140, 0.45); --glow-c: rgba(120, 90, 230, 0.5); }

/* Dotted globe behind the coverage number */
.stat-globe { position: relative; }
.stat-globe > :not(.globe) { position: relative; z-index: 1; }
.globe { position: absolute; z-index: 0; width: clamp(300px, 38vw, 500px); height: auto; right: -10%; top: 50%; transform: translateY(-50%); color: var(--ink-3); opacity: 0.8; pointer-events: none; }
.globe .lit { fill: var(--link); transform-box: fill-box; transform-origin: center; animation: ping 4s ease-in-out infinite; }
@keyframes ping { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.25); } }
@media (max-width: 700px) { .globe { right: -18%; opacity: 0.35; } }

/* Imperial section: rendered arches with a slowly drifting light */
.next-art { position: relative; overflow: hidden; isolation: isolate; padding-bottom: clamp(220px, 28vw, 400px); }
.next-art .next-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center 70%; opacity: 0.9; }
.next-art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.62) 45%, rgba(0,0,0,0.15) 78%, rgba(0,0,0,0.35) 100%); }
.next-art .drift { position: absolute; z-index: -1; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; left: 50%; top: 40%; border-radius: 50%; background: radial-gradient(closest-side, rgba(110, 120, 255, 0.28), rgba(170, 100, 230, 0.12) 55%, transparent 75%); filter: blur(30px); transform: translate(-50%, -50%); animation: drift 22s ease-in-out infinite alternate; pointer-events: none; }
@keyframes drift { 0% { transform: translate(-62%, -48%) scale(1); } 50% { transform: translate(-44%, -56%) scale(1.12); } 100% { transform: translate(-52%, -40%) scale(0.95); } }

/* Contact: soft rendered forms beneath the invitation */
.contact-art { position: relative; overflow: hidden; isolation: isolate; padding-bottom: clamp(200px, 24vw, 360px); }
.contact-art .contact-bg { position: absolute; inset: 0; z-index: -1; background-color: #dedcd8; background-size: cover; background-position: center bottom; }
.contact-art .contact-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 85%, transparent) 30%, transparent 62%); }
:root[data-theme="dark"] .contact-art .contact-bg { filter: brightness(0.17) contrast(1.15); }

@media (prefers-reduced-motion: reduce) {
  .globe .lit, .next-art .drift { animation: none; }
}