:root {
  color-scheme: dark;
  --bg: #07090d;
  --surface: #0d1421;
  --cream: #f1ede7;
  --muted: #afb6c2;
  --gold: #d4b27c;
  --line: #36302a;
  --display: "Cormorant Garamond", Georgia, serif;
  --body: Manrope, system-ui, sans-serif;
  --motion: cubic-bezier(.22, 1, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--cream); font: 400 1rem/1.5 var(--body); }
h1, h2, p, figure { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 600; text-wrap: balance; }
h1 { font-size: 3.75rem; line-height: 1.02; letter-spacing: -.025em; }
h2 { font-size: 3rem; line-height: 1; letter-spacing: -.015em; }
h1 em, h2 em { color: var(--gold); font-style: normal; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 10; padding: 8px 12px; background: var(--gold); color: var(--bg); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.wrap { width: min(calc(100% - 96px), 1248px); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; font: 600 1.5rem/1 var(--display); white-space: nowrap; }
.brand img { flex: none; }
.site-header .brand img { height: auto; }
.header-link { display: inline-flex; align-items: center; gap: 12px; color: var(--muted); font-size: .875rem; }
.header-link span { color: var(--gold); }
.header-link:hover, .site-footer a:hover { color: var(--gold); }
.hero { display: grid; grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr); align-items: center; min-height: 590px; }
.hero-copy { padding-block: 48px; }
.eyebrow, .section-tag { display: flex; align-items: center; gap: 8px; color: var(--gold); font: 700 .75rem/1.33 var(--body); text-transform: uppercase; letter-spacing: .14em; }
.eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-right: 4px; }
.hero h1 { margin-block: 16px 24px; }
.hero h1 em { display: block; }
.lead { max-width: 47ch; color: var(--muted); font-size: 1.125rem; line-height: 1.56; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.availability { margin-top: 12px; color: var(--muted); font-size: .875rem; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 12px; padding: 8px 16px; border-radius: 8px; border: 1px solid transparent; font: 800 .875rem/1.43 var(--body); cursor: pointer; transition: background-color .3s var(--motion), color .3s var(--motion), border-color .3s var(--motion); }
.button:active { transform: translateY(1px); }
.button-primary { background: var(--gold); color: #181008; }
.button-primary:hover { background: #efd2a1; }
.button-secondary { color: var(--cream); background: transparent; border-color: #66563f; }
.button-secondary:hover { color: #fff; background: #24201b; border-color: var(--gold); }
.hero-art { align-self: stretch; position: relative; min-width: 0; isolation: isolate; }
.hero-art img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 69% center; mask-image: linear-gradient(to right, transparent, black 17%), linear-gradient(to bottom, transparent, black 12%, black 82%, transparent), linear-gradient(to left, transparent, black 13%); mask-composite: intersect; }
.insight, .closing { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; padding-block: 64px; }
.insight { border-top: 1px solid var(--line); }
.section-tag { align-self: start; padding-top: 8px; }
.section-tag b { color: var(--cream); font-weight: 600; }
.insight p, .closing p, .showcase-intro { max-width: 55ch; color: var(--muted); margin-top: 16px; }
.showcase { position: relative; overflow: clip; isolation: isolate; background: var(--surface); border-block: 1px solid #292a32; scroll-margin: 16px; }
.showcase-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); align-items: center; gap: 32px; padding-block: 48px; }
.showcase h2 { margin-top: 16px; }
.showcase h2 em { display: block; }
.showcase-intro { max-width: 32ch; }
.showcase-gallery { min-width: 0; }
.slide-controls { display: grid; margin-top: 24px; max-width: 320px; }
.slide-controls button { display: flex; align-items: center; gap: 16px; text-align: left; padding: 12px 8px; border: 0; border-bottom: 1px solid #32333c; min-height: 48px; background: transparent; color: var(--muted); cursor: pointer; font-size: .875rem; font-weight: 700; }
.slide-controls button span { font-weight: 600; color: var(--gold); font-size: .75rem; }
.slide-controls button:hover, .slide-controls button[aria-pressed="true"] { color: var(--cream); border-bottom-color: var(--gold); }
.device-stage { --device-width: 246px; --spread: 74%; width: 100%; height: 550px; position: relative; touch-action: pan-y; isolation: isolate; }
.device-stage::before, .device-stage::after { content: ""; position: absolute; left: 50%; top: 48%; width: 95%; height: 51%; border: 1px solid #73644c50; border-radius: 50%; transform: translate(-50%, -50%) rotate(-17deg); pointer-events: none; }
.device-stage::after { width: 88%; height: 43%; transform: translate(-50%, -50%) rotate(17deg); border-color: #73644c33; }
.device { position: absolute; display: block; left: 50%; top: 50%; width: var(--device-width); aspect-ratio: 480 / 1010; border: 0; padding: 0; background: transparent; transform-origin: center; border-radius: 13% / 6%; transition: transform .5s var(--motion), opacity .5s var(--motion), visibility .5s; }
.device-frame { display: block; width: 100%; height: 100%; filter: drop-shadow(0 13px 18px #0008); }
.device-screen { position: absolute; inset: 1.55% 3.35% 1.55% 3.8%; width: 92.85%; height: 96.9%; border-radius: 11% / 5.1%; object-fit: fill; pointer-events: none; }
.device[data-position="center"] { z-index: 3; transform: translate(-50%, -50%); opacity: 1; }
.device[data-position="left"] { z-index: 2; transform: translate(calc(-50% - var(--spread)), -45%) rotate(-7deg) scale(.79); }
.device[data-position="right"] { z-index: 2; transform: translate(calc(-50% + var(--spread)), -45%) rotate(7deg) scale(.79); }
 .device[data-position="far-left"] { z-index: 1; transform: translate(calc(-50% - var(--spread) * 2), -40%) rotate(-13deg) scale(.62); opacity: 0; pointer-events: none; visibility: hidden; }
.device[data-position="far-right"] { z-index: 1; transform: translate(calc(-50% + var(--spread) * 2), -40%) rotate(13deg) scale(.62); opacity: 0; pointer-events: none; visibility: hidden; }
.device:not(:disabled):not([data-position^="far-"]) { opacity: .77; cursor: pointer; }
.device:not(:disabled):hover { opacity: 1; }
.gallery-nav { position: relative; display: flex; justify-content: center; align-items: center; gap: 16px; padding-top: 8px; }
.gallery-nav button { width: 44px; height: 44px; padding: 0; background: #111827; color: var(--cream); border-radius: 50%; border: 1px solid #5e523e; cursor: pointer; }
.gallery-nav button:hover { background: #272333; border-color: var(--gold); }
.gallery-caption { width: min(100%, 200px); text-align: center; font-size: .75rem; font-weight: 700; color: var(--cream); }
.closing { padding-block: 64px 80px; }
.closing .button { margin-top: 24px; }
.closing .fine-print { font-size: .75rem; margin-top: 12px; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--line); padding-block: 24px 32px; }
.site-footer .brand { font-size: 1.25rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 12px 24px; color: var(--muted); font-size: .75rem; }
.site-footer nav a { text-decoration: underline; text-underline-offset: 4px; }
.legal { padding-block: 64px 80px; max-width: 920px; }
.legal h1 { max-width: 820px; margin-block: 16px 12px; }
.legal-service { color: var(--muted); margin-bottom: 28px; }
.legal-document { border-top: 1px solid var(--line); padding-top: 24px; color: var(--muted); font-size: .9375rem; line-height: 1.78; }
.legal-document p { margin: 0 0 16px; }
.legal-document h2 { color: var(--gold); font: 700 1rem/1.5 var(--body); letter-spacing: .01em; margin: 32px 0 12px; }
.legal-switch { display: flex; flex-wrap: wrap; gap: 12px 24px; border-top: 1px solid var(--line); margin-top: 40px; padding-top: 24px; color: var(--cream); font-size: .8125rem; }
.legal-switch a { text-decoration: underline; text-underline-offset: 4px; }
.legal-switch a[aria-current="page"] { color: var(--gold); }
@media (max-width: 700px) { .legal { padding-block: 36px 56px; } .legal-document { font-size: .875rem; line-height: 1.72; } .legal-document h2 { margin-top: 26px; } .legal-switch { flex-direction: column; gap: 14px; } }
@media (max-width: 1130px) {
  h1 { font-size: 3.75rem; }
  .hero { min-height: 520px; }
  .device-stage { --device-width: 204px; --spread: 68%; height: 465px; }
}
@media (max-width: 900px) {
  .wrap { width: calc(100% - 48px); }
  h1 { font-size: 3rem; }
  .hero { min-height: 470px; }
  .showcase-layout { gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .device-stage { --device-width: 166px; --spread: 67%; height: 380px; }
}
@media (max-width: 700px) {
  .wrap { width: calc(100% - 40px); }
  .site-header { padding-block: 16px; }
  .header-link { font-size: .75rem; gap: 4px; }
  .brand { font-size: 1.25rem; gap: 8px; }
  .brand img { width: 28px; }
  .hero { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .hero-copy { padding: 32px 0 0; }
  .hero h1 { margin-block: 12px 16px; max-width: 590px; text-wrap: pretty; }
  h2 { font-size: 2.25rem; }
  .lead { font-size: 1rem; line-height: 1.5; max-width: 46ch; }
  .actions { margin-top: 24px; }
  .actions .button { flex: 1 0 auto; }
  .hero-art { height: min(65vw, 380px); margin-inline: -20px; margin-top: 12px; }
  .hero-art img { object-position: center 49%; mask-image: linear-gradient(to bottom, transparent, black 12%, black 74%, transparent); }
  .insight, .closing { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 32px 40px; }
  .insight p, .closing p, .showcase-intro { margin-top: 12px; }
  .showcase-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 32px; }
  .showcase h2 { margin-top: 12px; }
  .showcase-intro { max-width: 43ch; }
  .slide-controls { display: none; }
  .device-stage { --device-width: min(48vw, 212px); --spread: 49%; height: clamp(320px, 110vw, 485px); }
  .device[data-position="left"] { transform: translate(calc(-50% - var(--spread)), -45%) rotate(-6deg) scale(.78); }
  .device[data-position="right"] { transform: translate(calc(-50% + var(--spread)), -45%) rotate(6deg) scale(.78); }
  .gallery-nav { padding-top: 0; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 16px; }
  .site-footer nav { flex-direction: column; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 2.25rem; line-height: 1.04; }
}
@media (max-width: 380px) {
  .header-link { display: none; }
  .actions { align-items: flex-start; }
  h1 { font-size: 2.25rem; line-height: 1.04; }
  .device-stage { --spread: 47%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

.legal-inline { border-top: 1px solid var(--line); padding-block: 28px 48px; }
.legal-panel { border-bottom: 1px solid var(--line); }
.legal-panel summary { display: flex; justify-content: space-between; gap: 20px; padding: 18px 4px; color: var(--cream); font: 600 1.25rem/1.2 var(--display); cursor: pointer; list-style: none; }
.legal-panel summary::-webkit-details-marker { display: none; }
.legal-panel summary span { color: var(--gold); font: 400 1.4rem/1 var(--body); }
.legal-panel[open] summary span { transform: rotate(45deg); }
.legal-panel-body { max-width: 920px; padding: 4px 4px 32px; }
.legal-edition { color: var(--gold); font-size: .8rem; margin-bottom: 16px; }
.footer-note { color: var(--muted); font-size: .75rem; }