:root {
  --navy: #13283c;
  --navy-deep: #0d1d2d;
  --navy-soft: #29435a;
  --gold: #af8750;
  --gold-pale: #d9c29b;
  --ivory: #f7f2e8;
  --alabaster: #fffdf8;
  --linen: #eee5d6;
  --ink: #1f2b35;
  --muted: #6e716d;
  --white: #fffdfa;
  --line: rgba(32, 43, 53, 0.1);
  --shadow-soft: 0 18px 48px rgba(20, 35, 47, 0.1);
  --shadow-deep: 0 34px 90px rgba(13, 29, 45, 0.2);
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Apple Canonical Motion Easing Curves (emilkowalski/skills) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--ivory);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { border: 0; }
a { color: inherit; }
::selection { color: var(--white); background: var(--navy); }

nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding: 1.1rem 2rem;
  color: var(--white);
  background: rgba(13, 29, 45, 0.88);
  backdrop-filter: blur(16px);
  transition: padding 240ms ease, background 240ms ease;
}
nav.scrolled { padding-block: .7rem; background: rgba(13, 29, 45, .96); }
.nav-container, .container, .footer-container { width: min(1180px, calc(100% - 3rem)); margin-inline: auto; }
.nav-container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.logo, .footer-logo { display: flex; align-items: center; color: var(--white); font: 600 1.35rem/1 var(--serif); letter-spacing: .01em; }
.logo img, .footer-logo img { height: 46px !important; width: auto; filter: drop-shadow(0 4px 12px rgba(0,0,0,.17)); }
.gold-accent, .gold { color: var(--gold-pale); font-style: italic; }
.nav-cta, .btn-primary, .recommendation-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 42px;
  padding: .72rem 1.15rem;
  color: var(--navy-deep);
  background: var(--gold-pale);
  border-radius: 999px;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform 120ms var(--ease-out), background 200ms ease, box-shadow 200ms ease;
}
.nav-cta { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.nav-cta:hover, .btn-primary:hover, .recommendation-link:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(20,35,47,.17); }
.nav-cta:active, .btn-primary:active, .recommendation-link:active { transform: scale(0.97); }
.btn-primary:hover, .recommendation-link:hover { background: #c9a972; }
.nav-cta:hover { background: rgba(255,255,255,.11); }

section { position: relative; padding: 7.5rem 0; }
.hero { min-height: 720px; padding-top: 10rem; overflow: hidden; color: var(--white); background: var(--navy-deep); }
.hero::after {
  position: absolute;
  inset: 0;
  content: '';
  pointer-events: none;
  background: radial-gradient(circle at 87% 16%, rgba(202,170,111,.17), transparent 27%), radial-gradient(circle at 10% 100%, rgba(104,139,162,.2), transparent 32%);
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .78fr); align-items: center; gap: clamp(2rem, 6vw, 6.5rem); }
.hero-tag, .section-label, .recommendation-eyebrow {
  display: inline-flex;
  gap: .45rem;
  align-items: center;
  margin-bottom: 1.15rem;
  color: var(--gold);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.hero-tag { color: var(--gold-pale); }
.hero h1, .section-title { margin: 0; font-family: var(--serif); letter-spacing: -.035em; line-height: 1.05; }
.hero h1 { max-width: 720px; font-size: clamp(2.8rem, 5.2vw, 5.15rem); }
.hero h1 .white { color: var(--white); }
.hero-sub { max-width: 610px; margin: 1.6rem 0 2rem; color: rgba(255,255,255,.75); font-size: 1.05rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.btn-outline { display: inline-flex; align-items: center; gap: .6rem; padding: .72rem 1.1rem; color: var(--white); text-decoration: none; font-size: .82rem; transition: color 200ms ease, transform 120ms var(--ease-out); }
.btn-outline:hover { color: var(--gold-pale); transform: translateY(-1px); }
.btn-outline:active { transform: scale(0.97); }
.hero-trust { display: flex; align-items: center; gap: .8rem; margin-top: 2rem; color: rgba(255,255,255,.6); font-size: .78rem; }
.stars { color: var(--gold-pale); letter-spacing: .12em; }

.phone-frame { padding: 12px; border-radius: 34px; background: #e8dfd0; box-shadow: var(--shadow-deep); transform: rotate(1.4deg); transition: transform 360ms var(--ease-out); }
.phone-frame:hover { transform: rotate(0) translateY(-4px); }
.phone-screen { min-height: 530px; overflow: hidden; border-radius: 25px; background: var(--alabaster); }
.phone-header, .chat-header { display: flex; align-items: center; gap: .75rem; padding: 1.05rem 1.2rem; color: var(--white); background: var(--navy); }
.phone-avatar, .chat-avatar { display: grid; flex: 0 0 37px; width: 37px; height: 37px; place-items: center; border-radius: 50%; color: var(--navy); background: var(--gold-pale); font: 700 .79rem var(--serif); }
.phone-header h4, .chat-header h4 { margin: 0; font: 600 1rem/1.2 var(--serif); }
.phone-header span, .chat-header-info span { display: block; margin-top: .2rem; color: rgba(255,255,255,.67); font-size: .68rem; }
.phone-messages { display: grid; gap: .72rem; padding: 1.25rem; }
.msg-bubble { width: fit-content; max-width: 88%; padding: .75rem .9rem; border-radius: 16px 16px 16px 4px; color: var(--ink); background: #f1ebdf; font-size: .76rem; line-height: 1.5; }
.msg-bubble.msg-user { justify-self: end; border-radius: 16px 16px 4px; color: var(--white); background: var(--navy-soft); }
.msg-time { margin-top: .25rem; opacity: .55; font-size: .58rem; }
.floating-badge { position: absolute; z-index: 2; display: flex; gap: .6rem; align-items: center; padding: .7rem .9rem; color: var(--navy); background: rgba(255,253,248,.95); border-radius: 14px; box-shadow: var(--shadow-soft); transition: transform 220ms var(--ease-out); }
.floating-badge:hover { transform: scale(1.03); }
.floating-badge.top { top: 13%; right: -11%; }
.floating-badge.bottom { bottom: 11%; left: -13%; }
.floating-badge .icon { color: var(--gold); }.floating-badge .label { color: var(--muted); font-size: .57rem; text-transform: uppercase; letter-spacing: .1em; }.floating-badge .value { font: 600 .75rem var(--serif); }

.problem { background: var(--alabaster); }
.solution, .demo { background: var(--ivory); }
.section-title { color: var(--navy); font-size: clamp(2.3rem, 4vw, 4rem); }
.section-subtitle { max-width: 660px; margin: 1rem auto 0; color: var(--muted); font-size: 1rem; }
.center { text-align: center; }.solution-intro { text-align: center; }
.solution-intro .section-subtitle { margin-inline: auto; }
.problem-grid, .steps-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin-top: 3.3rem; }
.problem-card, .step { padding: 2rem 1.8rem; background: var(--white); border-radius: 4px; box-shadow: var(--shadow-soft); transition: transform 220ms var(--ease-out), box-shadow 220ms ease; }
.problem-card:hover, .step:hover { transform: translateY(-3px); box-shadow: 0 24px 56px rgba(20, 35, 47, 0.14); }
.problem-icon, .step-icon { display: grid; width: 42px; height: 42px; place-items: center; color: var(--gold); background: #f6eee0; border-radius: 50%; }
.problem-card h3, .step h3 { margin: 1.3rem 0 .55rem; color: var(--navy); font: 600 1.45rem var(--serif); }.problem-card p, .step p { margin: 0; color: var(--muted); font-size: .9rem; }
.step-number { color: var(--gold); font: 600 2.5rem/1 var(--serif); }.step-icon { margin-top: .65rem; }

.demo { overflow: hidden; }.demo .section-subtitle { max-width: 680px; }
.chat-wrapper { width: min(850px, 100%); margin: 3rem auto 0; }
.chat-widget { overflow: hidden; color: var(--ink); background: var(--alabaster); border-radius: 16px; box-shadow: 0 28px 76px rgba(20,35,47,.16); }
.chat-header { min-height: 76px; padding: 1.1rem 1.35rem; }.chat-header-info { flex: 1; }.chat-header-info span i { color: #b9d7b6; font-size: .45rem; vertical-align: middle; }
.chat-header-assurance { display: flex; gap: .35rem; align-items: center; color: rgba(255,255,255,.68); font-size: .68rem; }.chat-header-action { display: grid; width: 35px; height: 35px; padding: 0; place-items: center; color: var(--gold-pale); background: transparent; border-radius: 50%; cursor: pointer; transition: background 180ms ease, color 180ms ease, transform 100ms var(--ease-out); }.chat-header-action:hover { color: var(--navy); background: var(--gold-pale); }
.chat-header-action:active { transform: scale(0.92); }
.chat-messages { display: flex; flex-direction: column; gap: .9rem; height: min(545px, 62vh); padding: 1.6rem clamp(1rem, 3vw, 2rem); overflow-y: auto; scroll-behavior: smooth; background: #f4eee3; }
.chat-messages::-webkit-scrollbar, .recommendation-rail::-webkit-scrollbar { width: 5px; height: 5px; }.chat-messages::-webkit-scrollbar-thumb, .recommendation-rail::-webkit-scrollbar-thumb { background: rgba(19,40,60,.2); border-radius: 100px; }
.chat-msg { align-self: flex-start; width: fit-content; max-width: min(600px, 88%); padding: 1rem 1.1rem .65rem; background: var(--white); border-radius: 4px 17px 17px 17px; box-shadow: 0 10px 24px rgba(28,37,43,.08); }
.chat-msg.user { align-self: flex-end; color: var(--white); background: var(--navy); border-radius: 17px 4px 17px 17px; box-shadow: 0 12px 30px rgba(13,29,45,.16); }
.chat-msg-label { margin-bottom: .34rem; color: var(--gold); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.chat-msg-copy { margin: 0; font-size: .91rem; line-height: 1.62; white-space: pre-wrap; word-break: break-word; }.chat-msg-copy + .chat-msg-copy { margin-top: .65rem; }.chat-msg-time { display: block; margin-top: .45rem; color: var(--muted); font-size: .62rem; }.chat-msg.user .chat-msg-time { color: rgba(255,255,255,.56); text-align: right; }
.message-arrival { animation: composed-arrival 340ms var(--ease-out) both; }.message-arrival .chat-msg-copy { animation: composed-copy 380ms var(--ease-out) both; animation-delay: var(--reveal-delay, 0ms); }
@keyframes composed-arrival { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes composed-copy { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.concierge-status { align-self: flex-start; max-width: 88%; margin: .1rem 0; color: #86785e; font: italic .84rem/1.5 var(--serif); opacity: 0; transform: translateY(4px); transition: opacity 230ms var(--ease-out), transform 230ms var(--ease-out); }.concierge-status.status-visible { opacity: 1; transform: translateY(0); }.concierge-status::before { content: '\2726 '; margin-right: .42rem; color: var(--gold); font-style: normal; }

.recommendation-panel { width: 100%; margin: .15rem 0 .55rem; padding: 0; }.recommendation-eyebrow { margin: .15rem 0 .55rem; padding-left: .1rem; color: var(--gold); font-size: .6rem; }
.recommendation-rail { display: grid; grid-auto-columns: minmax(225px, 72%); grid-auto-flow: column; gap: .85rem; padding: .1rem .1rem .8rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; }
.recommendation-card { overflow: hidden; scroll-snap-align: start; background: var(--white); border-radius: 12px; box-shadow: 0 12px 28px rgba(28,37,43,.1); transition: transform 220ms var(--ease-out); }.recommendation-card:hover { transform: translateY(-2px); }.recommendation-image-wrap { height: 130px; overflow: hidden; background: #ddd3c2; }.recommendation-image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }.recommendation-card:hover .recommendation-image { transform: scale(1.04); }
.recommendation-content { display: grid; gap: .45rem; padding: 1rem; }.recommendation-content h3 { margin: 0; color: var(--navy); font: 600 1.24rem/1.15 var(--serif); }.recommendation-content p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted); font-size: .77rem; line-height: 1.5; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }.recommendation-link { justify-self: start; min-height: 34px; margin-top: .18rem; padding: .5rem .75rem; font-size: .58rem; }
.recommendation-book { justify-self: start; padding: 0; color: var(--navy); background: transparent; cursor: pointer; font: 700 .59rem var(--sans); letter-spacing: .08em; text-transform: uppercase; transition: color 140ms ease, transform 100ms var(--ease-out); }.recommendation-book::after { content: ' \2192'; color: var(--gold); }.recommendation-book:hover { color: var(--gold); transform: translateX(2px); }.recommendation-book:active { transform: scale(0.96); }

.partner-offer-panel { width: 100%; margin: .05rem 0 .7rem; padding: 0; }.partner-offer-eyebrow { margin: .15rem 0 .55rem; padding-left: .1rem; color: var(--gold); font-size: .6rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.partner-offer-rail { display: grid; grid-auto-columns: minmax(268px, 53%); grid-auto-flow: column; gap: .72rem; padding: .08rem .08rem .8rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; }.partner-offer-rail::-webkit-scrollbar { width: 5px; height: 5px; }.partner-offer-rail::-webkit-scrollbar-thumb { background: rgba(19,40,60,.2); border-radius: 100px; }
.partner-offer-card { display: grid; grid-template-columns: 79px minmax(0, 1fr); gap: .75rem; align-items: center; min-height: 124px; padding: .72rem; overflow: hidden; scroll-snap-align: start; background: var(--white); border-radius: 12px; box-shadow: 0 12px 27px rgba(28,37,43,.1); transition: transform 220ms var(--ease-out); }.partner-offer-card:hover { transform: translateY(-2px); }.partner-offer-image { width: 79px; height: 79px; object-fit: cover; border-radius: 50%; box-shadow: 0 7px 18px rgba(13,29,45,.15); }.partner-offer-content { min-width: 0; }.partner-offer-category { margin: 0 0 .13rem; color: var(--gold); font-size: .54rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }.partner-offer-content h3 { overflow: hidden; margin: 0; color: var(--navy); font: 600 1rem/1.1 var(--serif); text-overflow: ellipsis; white-space: nowrap; }.partner-offer-details { margin: .3rem 0 .5rem; color: var(--muted); font-size: .65rem; }.partner-offer-book { padding: 0; color: var(--navy); background: transparent; cursor: pointer; font: 700 .6rem var(--sans); letter-spacing: .1em; text-transform: uppercase; transition: color 140ms ease, transform 100ms var(--ease-out); }.partner-offer-book::after { content: ' \2192'; color: var(--gold); }.partner-offer-book:hover { color: var(--gold); transform: translateX(2px); }.partner-offer-book:active { transform: scale(0.96); }

.hotel-collection-panel { width: 100%; margin: .15rem 0 .8rem; padding: 1rem; background: #eee5d6; border-radius: 12px; box-shadow: 0 13px 30px rgba(28,37,43,.08); }.hotel-collection-eyebrow { margin: 0; color: var(--gold); font-size: .61rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }.hotel-collection-intro { margin: .38rem 0 .75rem; color: var(--muted); font-size: .73rem; line-height: 1.5; }.hotel-collection-list { display: grid; gap: .65rem; max-height: 385px; padding-right: .25rem; overflow-y: auto; overscroll-behavior: contain; }.hotel-collection-list::-webkit-scrollbar { width: 5px; }.hotel-collection-list::-webkit-scrollbar-thumb { background: rgba(19,40,60,.2); border-radius: 100px; }.hotel-collection-card { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: .7rem; align-items: center; padding: .65rem; background: var(--white); border-radius: 10px; box-shadow: 0 8px 19px rgba(28,37,43,.08); transition: transform 200ms var(--ease-out); }.hotel-collection-card:hover { transform: translateY(-1px); }.hotel-collection-image { width: 66px; height: 66px; object-fit: cover; border-radius: 50%; box-shadow: 0 5px 13px rgba(13,29,45,.12); }.hotel-collection-content { min-width: 0; }.hotel-collection-category { margin: 0 0 .12rem; color: var(--gold); font-size: .53rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.hotel-collection-content h3 { margin: 0; overflow: hidden; color: var(--navy); font: 600 .97rem/1.15 var(--serif); text-overflow: ellipsis; white-space: nowrap; }.hotel-collection-content > p:not(.hotel-collection-category):not(.hotel-collection-meta) { display: -webkit-box; margin: .27rem 0; overflow: hidden; color: var(--muted); font-size: .66rem; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }.hotel-collection-meta { margin: 0 0 .34rem; color: var(--muted); font-size: .6rem; }.hotel-collection-book { padding: 0; color: var(--navy); background: transparent; cursor: pointer; font: 700 .58rem var(--sans); letter-spacing: .09em; text-transform: uppercase; transition: color 140ms ease, transform 100ms var(--ease-out); }.hotel-collection-book::after { content: ' \2192'; color: var(--gold); }.hotel-collection-book:hover { color: var(--gold); transform: translateX(2px); }.hotel-collection-book:active { transform: scale(0.96); }

.room-booking-action { width: min(100%, 430px); margin: .1rem 0 .7rem; padding: 1rem 1.05rem 1.05rem; color: var(--ink); background: linear-gradient(135deg, #fffdf9, #f0e4cf); border-radius: 12px; box-shadow: 0 13px 30px rgba(28,37,43,.1); }.room-booking-eyebrow { margin: 0 0 .35rem; color: var(--gold); font-size: .58rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }.room-booking-action h3 { margin: 0; color: var(--navy); font: 600 1.18rem/1.15 var(--serif); }.room-booking-action > p:not(.room-booking-eyebrow) { margin: .45rem 0 .8rem; color: var(--muted); font-size: .74rem; line-height: 1.5; }.room-booking-action-button { width: 100%; min-height: 38px; padding: .62rem .8rem; color: var(--white); background: var(--navy); border-radius: 999px; cursor: pointer; font: 700 .62rem var(--sans); letter-spacing: .08em; text-transform: uppercase; transition: background 180ms ease, transform 120ms var(--ease-out); }.room-booking-action-button:hover { background: var(--navy-soft); transform: translateY(-1px); }.room-booking-action-button:active { transform: scale(0.97); }

.quick-replies { display: flex; gap: .55rem; padding: .85rem 1.15rem; overflow-x: auto; background: var(--alabaster); }.quick-reply { flex: 0 0 auto; padding: .47rem .72rem; color: var(--navy); background: #f0e8da; border-radius: 999px; cursor: pointer; font: 600 .68rem var(--sans); transition: background 180ms ease, transform 120ms var(--ease-out); }.quick-reply:hover { background: var(--gold-pale); transform: translateY(-1px); }.quick-reply:active { transform: scale(0.95); }.quick-reply:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.chat-input-area { display: flex; gap: .7rem; padding: 1rem 1.15rem 1.15rem; background: var(--alabaster); }.chat-input { flex: 1; min-width: 0; padding: .82rem 1rem; color: var(--ink); background: #f7f1e7; outline: none; border: 0; border-radius: 999px; font-size: .82rem; transition: box-shadow 180ms var(--ease-out), background 180ms ease; }.chat-input::placeholder { color: #969184; }.chat-input:focus { background: var(--white); box-shadow: 0 0 0 3px rgba(175,135,80,.25); }.chat-input:disabled { opacity: .7; }.chat-send { display: grid; flex: 0 0 43px; width: 43px; height: 43px; place-items: center; color: var(--white); background: var(--navy); border-radius: 50%; cursor: pointer; transition: transform 120ms var(--ease-out), background 180ms ease; }.chat-send:hover { background: var(--navy-soft); transform: translateY(-2px); }.chat-send:active { transform: scale(0.92); }.chat-send:disabled { cursor: not-allowed; opacity: .5; transform: none; }.chat-footer-note { padding: 0 1.25rem 1rem; color: var(--muted); background: var(--alabaster); font-size: .65rem; text-align: center; }.chat-footer-note i { color: var(--gold); }
.demo-note { display: flex; gap: .55rem; align-items: center; margin: 1.2rem auto 0; color: var(--muted); font-size: .75rem; justify-content: center; }.demo-note i { color: var(--gold); }
.chat-widget.fullscreen { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; width: 100vw; max-width: none; height: 100dvh; border-radius: 0; box-shadow: none; }.chat-widget.fullscreen .chat-header { padding-inline: clamp(1.1rem, 4vw, 4.5rem); }.chat-widget.fullscreen .chat-messages { flex: 1; height: auto; min-height: 0; padding-inline: clamp(1rem, 5vw, 7rem); }.chat-widget.fullscreen .chat-input-area { flex: 0 0 auto; padding-inline: clamp(1rem, 5vw, 7rem); box-shadow: 0 -8px 24px rgba(13,29,45,.06); }.chat-widget.fullscreen .chat-footer-note { flex: 0 0 auto; }


footer { padding: 2.7rem 0; color: rgba(255,255,255,.68); background: var(--navy-deep); }.footer-container { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; }.footer-links { display: flex; flex-wrap: wrap; gap: 1.1rem; font-size: .75rem; }.footer-links a { text-decoration: none; }.footer-links a:hover { color: var(--gold-pale); }.footer-copy { font-size: .67rem; }
.toast { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 1200; display: flex; gap: .6rem; align-items: center; max-width: min(380px, calc(100% - 2.4rem)); padding: .85rem 1rem; color: var(--white); background: var(--navy); border-radius: 10px; box-shadow: var(--shadow-deep); font-size: .78rem; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity 220ms ease, transform 220ms ease; }.toast.show { opacity: 1; transform: translateY(0); }.toast i { color: var(--gold-pale); }
.booking-modal[hidden] { display: none; }.booking-modal { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 1rem; background: rgba(13,29,45,.58); backdrop-filter: blur(9px); }.booking-dialog { position: relative; width: min(600px, 100%); max-height: min(760px, calc(100vh - 2rem)); padding: clamp(1.45rem, 4vw, 2.2rem); overflow-y: auto; color: var(--ink); background: var(--alabaster); border-radius: 8px; box-shadow: 0 36px 100px rgba(4,13,23,.4); animation: composed-arrival 360ms ease both; }.booking-close { position: absolute; top: 1rem; right: 1rem; display: grid; width: 34px; height: 34px; place-items: center; color: var(--navy); background: #eee5d6; border-radius: 50%; cursor: pointer; }.booking-close:hover { background: var(--gold-pale); }.booking-kicker { margin: 0 0 .45rem; color: var(--gold); font-size: .63rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }.booking-dialog h2 { max-width: 450px; margin: 0; color: var(--navy); font: 600 clamp(1.85rem, 4vw, 2.45rem)/1.08 var(--serif); }.booking-service-summary { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; padding: .85rem 1rem; background: #f3ebdf; border-radius: 4px; }.booking-service-summary span { display: block; margin-bottom: .15rem; color: var(--muted); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }.booking-service-summary strong { display: block; color: var(--navy); font: 600 1.03rem var(--serif); }.booking-service-summary small { flex: 0 0 auto; color: var(--gold); font-weight: 700; font-size: .72rem; }.booking-intro { margin: 1rem 0 1.25rem; color: var(--muted); font-size: .78rem; line-height: 1.55; }.booking-fields { display: grid; gap: .75rem; margin-top: .8rem; }.booking-fields-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }.booking-fields-three { grid-template-columns: 1.2fr 1.1fr .65fr; }.booking-fields label { display: grid; gap: .33rem; color: var(--navy); font-size: .68rem; font-weight: 700; }.booking-fields label span { color: var(--muted); font-weight: 400; }.booking-fields input { width: 100%; min-width: 0; padding: .68rem .75rem; color: var(--ink); background: #f7f1e7; outline: none; border: 0; border-radius: 3px; font-size: .78rem; }.booking-fields input:focus { background: var(--white); box-shadow: 0 0 0 3px rgba(175,135,80,.18); }.booking-consent { display: flex; gap: .55rem; align-items: flex-start; margin-top: 1rem; color: var(--muted); font-size: .67rem; line-height: 1.45; }.booking-consent input { width: 15px; height: 15px; margin: .1rem 0 0; accent-color: var(--navy); }.booking-error { min-height: 1.15em; margin: .75rem 0 0; color: #9c3a3a; font-size: .7rem; }.booking-submit { width: 100%; margin-top: .45rem; }.booking-submit:disabled { cursor: not-allowed; opacity: .65; }.modal-open { overflow: hidden; }
.discovery-modal[hidden] { display: none; }.discovery-modal { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 1rem; background: rgba(13,29,45,.58); backdrop-filter: blur(9px); }.discovery-dialog { position: relative; width: min(700px, 100%); max-height: min(780px, calc(100vh - 2rem)); padding: clamp(1.45rem, 4vw, 2.2rem); overflow-y: auto; color: var(--ink); background: var(--alabaster); border-radius: 8px; box-shadow: 0 36px 100px rgba(4,13,23,.4); animation: composed-arrival 360ms ease both; }.discovery-dialog h2 { max-width: 500px; margin: 0; color: var(--navy); font: 600 clamp(1.85rem, 4vw, 2.45rem)/1.08 var(--serif); }.discovery-dialog .booking-fields-three { grid-template-columns: .9fr .85fr 1.35fr; }.discovery-message { display: grid; gap: .33rem; margin-top: .8rem; color: var(--navy); font-size: .68rem; font-weight: 700; }.discovery-message span { color: var(--muted); font-weight: 400; }.discovery-message textarea { width: 100%; min-height: 92px; padding: .68rem .75rem; resize: vertical; color: var(--ink); background: #f7f1e7; outline: none; border: 0; border-radius: 3px; font: .78rem/1.5 var(--sans); }.discovery-message textarea:focus { background: var(--white); box-shadow: 0 0 0 3px rgba(175,135,80,.18); }
.reveal { opacity: 0; transform: translateY(24px) scale(0.98); transition: opacity 600ms var(--ease-out), transform 650ms var(--ease-drawer); will-change: transform, opacity; }
.reveal.revealed { opacity: 1; transform: translateY(0) scale(1); }

@media (max-width: 900px) { .hero { min-height: auto; }.hero-grid { grid-template-columns: 1fr; }.hero-content { max-width: 680px; }.hero-mockup { width: min(440px, 86%); margin: 1rem auto 0; }.problem-grid, .steps-container { grid-template-columns: 1fr; }.floating-badge.top { right: -8%; }.floating-badge.bottom { left: -9%; }.footer-container { align-items: flex-start; flex-direction: column; } }
@media (max-width: 620px) { nav { padding-inline: 1rem; }.nav-container, .container, .footer-container { width: min(100% - 2rem, 1180px); }.logo { font-size: 1.05rem; }.logo img { height: 36px !important; }.nav-cta { display: none; } section { padding: 5rem 0; }.hero { padding-top: 7.8rem; }.hero h1 { font-size: clamp(2.55rem, 12vw, 3.6rem); }.hero-sub { font-size: .95rem; }.hero-ctas { align-items: stretch; flex-direction: column; }.btn-primary { width: 100%; }.btn-outline { justify-content: center; }.hero-trust { align-items: flex-start; }.phone-frame { transform: none; }.phone-screen { min-height: 460px; }.floating-badge { display: none; }.chat-wrapper { margin-top: 2.2rem; }.chat-header { padding: .9rem; }.chat-header-assurance { display: none; }.chat-messages { height: 520px; padding: 1rem; }.chat-msg { max-width: 93%; }.chat-msg-copy { font-size: .86rem; }.recommendation-rail { grid-auto-columns: minmax(230px, 88%); }.partner-offer-rail { grid-auto-columns: minmax(264px, 88%); }.chat-input-area { padding-inline: .9rem; }.chat-input { min-height: 48px; font-size: 16px; }.chat-send { flex-basis: 48px; width: 48px; height: 48px; }.chat-widget.fullscreen { inset: 0; height: 100dvh; border-radius: 0; }.chat-widget.fullscreen .chat-header { flex: 0 0 auto; }.chat-widget.fullscreen .chat-messages { height: auto; padding-bottom: 1rem; }.chat-widget.fullscreen .chat-input-area { padding: .8rem .9rem calc(.8rem + env(safe-area-inset-bottom)); }.chat-widget.fullscreen .chat-footer-note { padding-bottom: calc(.8rem + env(safe-area-inset-bottom)); }.room-booking-action { max-width: 100%; }.footer-links { gap: .8rem; }.booking-fields-two, .booking-fields-three, .discovery-dialog .booking-fields-three { grid-template-columns: 1fr; }.booking-dialog, .discovery-dialog { padding: 1.4rem 1.1rem; }.booking-service-summary { align-items: flex-start; flex-direction: column; gap: .35rem; } }
/* Keep the long hotel collection inside the chat scroller rather than expanding the page. */
/* `contain` here swallowed the page scroll whenever the pointer was over the
   thread, so the reader got stuck in the demo and could not carry on down the
   page. The thread still scrolls; it just hands the scroll back at its end. */
.chat-messages { min-height: 0; overscroll-behavior-y: auto; }.hotel-collection-panel { min-width: 0; }.hotel-collection-list { max-height: 320px; scrollbar-gutter: stable; }

/* The complete service catalogue is intentionally a focused concierge view, not a second long chat message. */
.collection-open { overflow: hidden; }.hotel-collection-launcher { display: grid; gap: .45rem; width: 100%; margin: .15rem 0 .8rem; padding: 1rem; color: var(--ink); background: #eee5d6; border-radius: 10px; box-shadow: 0 13px 30px rgba(28,37,43,.08); }.hotel-collection-launcher h3 { margin: 0; color: var(--navy); font: 600 1.25rem/1.15 var(--serif); }.hotel-collection-launcher > p:not(.hotel-collection-eyebrow) { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.5; }.hotel-collection-open { justify-self: start; min-height: 36px; margin-top: .22rem; padding: .58rem .82rem; color: var(--white); background: var(--navy); border-radius: 999px; cursor: pointer; font: 700 .6rem var(--sans); letter-spacing: .1em; text-transform: uppercase; transition: transform 180ms ease, background 180ms ease; }.hotel-collection-open:hover { background: var(--navy-soft); transform: translateY(-1px); }
.hotel-collection-modal[hidden] { display: none; }.hotel-collection-modal { position: fixed; inset: 0; z-index: 1450; background: rgba(8,23,37,.72); backdrop-filter: blur(11px); }.hotel-collection-dialog { display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; background: var(--ivory); box-shadow: 0 36px 100px rgba(4,13,23,.45); animation: composed-arrival 320ms ease both; }.hotel-collection-dialog-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1rem, 3vw, 1.75rem) clamp(1.2rem, 6vw, 5.5rem); color: var(--white); background: var(--navy); }.hotel-collection-brand { display: flex; min-width: 0; align-items: center; gap: clamp(.8rem, 2vw, 1.2rem); }.hotel-collection-logo { flex: 0 0 auto; width: clamp(42px, 5vw, 62px); height: clamp(42px, 5vw, 62px); object-fit: contain; }.hotel-collection-dialog-header p { margin: 0 0 .22rem; color: var(--gold-pale); font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }.hotel-collection-dialog-header h2 { margin: 0; color: var(--white); font: 600 clamp(1.8rem, 4vw, 3rem)/1 var(--serif); }.hotel-collection-close { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; color: var(--navy); background: var(--gold-pale); border-radius: 50%; cursor: pointer; font-size: 1rem; transition: transform 180ms ease, background 180ms ease; }.hotel-collection-close:hover { background: var(--white); transform: rotate(90deg); }.hotel-collection-dialog-body { width: min(1120px, 100%); margin: 0 auto; padding: clamp(1.35rem, 4vw, 3rem) clamp(1rem, 5vw, 4rem) 4rem; overflow-y: auto; overscroll-behavior: contain; }.hotel-collection-dialog-intro { max-width: 650px; margin: 0 0 1.4rem; color: var(--muted); font-size: .9rem; line-height: 1.6; }.hotel-collection-dialog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }.hotel-collection-dialog-grid .hotel-collection-card { grid-template-columns: 82px minmax(0, 1fr); align-items: start; min-height: 142px; padding: .9rem; border-radius: 10px; }.hotel-collection-dialog-grid .hotel-collection-image { width: 82px; height: 82px; }.hotel-collection-dialog-grid .hotel-collection-content h3 { white-space: normal; }.hotel-collection-dialog-grid .hotel-collection-content > p:not(.hotel-collection-category):not(.hotel-collection-meta) { -webkit-line-clamp: 3; }
.hotel-collection-section-heading { grid-column: 1 / -1; margin: .75rem 0 -.25rem; padding-bottom: .45rem; color: var(--navy); border-bottom: 1px solid rgba(19,40,60,.16); font: 700 .68rem var(--sans); letter-spacing: .14em; text-transform: uppercase; }

@media (max-width: 900px) { .hotel-collection-dialog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .hotel-collection-dialog-header { padding: 1rem 1.1rem; }.hotel-collection-dialog-body { padding: 1.2rem 1rem 2.5rem; }.hotel-collection-dialog-grid { grid-template-columns: 1fr; gap: .8rem; }.hotel-collection-dialog-grid .hotel-collection-card { min-height: 0; }.hotel-collection-open { width: 100%; }.hotel-collection-close { width: 38px; height: 38px; } }

/* The source mark is intentionally wide; it needs room to remain legible in the chat header. */
.chat-avatar.chat-avatar-logo { display: block; flex: 0 0 64px; width: 64px; height: 36px; padding: 0; border-radius: 0; background: transparent; object-fit: contain; }

/* Presentation dialogs must sit above the full-screen chat rather than behind
   it. This keeps every follow-up inside the concierge experience. */
.hotel-collection-modal { z-index: 2200; }
.booking-modal, .discovery-modal { z-index: 2300; }
.hotel-collection-dialog { padding: 0; }

/* Use the available screen for the collection: nine concise cards are visible
   on a normal desktop presentation without scrolling through a large masthead. */
.hotel-collection-dialog-header { min-height: 76px; padding: .75rem clamp(1.1rem, 3.5vw, 3.5rem); }
.hotel-collection-logo { width: clamp(38px, 4vw, 48px); height: clamp(38px, 4vw, 48px); }
.hotel-collection-dialog-header p { margin-bottom: .08rem; font-size: .54rem; }
.hotel-collection-dialog-header h2 { font-size: clamp(1.35rem, 2.3vw, 2.15rem); }
.hotel-collection-dialog-body { width: min(1440px, 100%); padding: .9rem clamp(.9rem, 3vw, 2.6rem) 1.35rem; }
.hotel-collection-dialog-intro { max-width: 780px; margin-bottom: .8rem; font-size: .78rem; line-height: 1.45; }
.hotel-collection-dialog-grid { gap: .72rem; }
.hotel-collection-dialog-grid .hotel-collection-card { grid-template-columns: 60px minmax(0, 1fr); min-height: 112px; padding: .68rem; }
.hotel-collection-dialog-grid .hotel-collection-image { width: 60px; height: 60px; }
.hotel-collection-dialog-grid .hotel-collection-content > p:not(.hotel-collection-category):not(.hotel-collection-meta) { margin-block: .18rem; font-size: .61rem; line-height: 1.35; -webkit-line-clamp: 2; }
.hotel-collection-dialog-grid .hotel-collection-content h3 { font-size: .9rem; line-height: 1.08; }
.hotel-collection-dialog-grid .hotel-collection-meta { margin-bottom: .2rem; font-size: .57rem; }
.hotel-collection-dialog-grid .hotel-collection-book { font-size: .55rem; }
@media (min-width: 1050px) { .hotel-collection-dialog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .hotel-collection-dialog-header { min-height: 64px; padding: .7rem 1rem; }.hotel-collection-dialog-header p { display: none; }.hotel-collection-dialog-body { padding: .9rem .9rem 1.5rem; }.hotel-collection-dialog-grid .hotel-collection-card { min-height: 104px; } }

/* The catalogue is deliberately a three-by-three gallery. Further offers are
   revealed by the gallery's own scroll, never by shrinking the experience. */
.hotel-collection-dialog-grid { --collection-card-height: clamp(154px, 17vh, 180px); grid-auto-rows: var(--collection-card-height); max-height: calc(var(--collection-card-height) + var(--collection-card-height) + var(--collection-card-height) + 1.44rem); padding-right: .35rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; align-content: start; }
.hotel-collection-dialog-grid::-webkit-scrollbar { width: 6px; }.hotel-collection-dialog-grid::-webkit-scrollbar-thumb { background: rgba(19,40,60,.22); border-radius: 99px; }
.hotel-collection-dialog-grid .hotel-collection-card { grid-template-columns: 72px minmax(0, 1fr); min-height: 0; height: var(--collection-card-height); padding: .82rem; }
.hotel-collection-dialog-grid .hotel-collection-image { width: 72px; height: 72px; }
.hotel-collection-dialog-grid .hotel-collection-content h3 { font-size: 1.02rem; line-height: 1.12; }
.hotel-collection-dialog-grid .hotel-collection-content > p:not(.hotel-collection-category):not(.hotel-collection-meta) { margin-block: .32rem; font-size: .75rem; line-height: 1.38; -webkit-line-clamp: 2; }
.hotel-collection-dialog-grid .hotel-collection-meta { margin-bottom: .3rem; font-size: .64rem; }
.hotel-collection-dialog-grid .hotel-collection-book { font-size: .6rem; }
@media (max-width: 620px) { .hotel-collection-dialog-grid { --collection-card-height: 122px; max-height: none; padding-right: 0; overflow: visible; }.hotel-collection-dialog-grid .hotel-collection-card { grid-template-columns: 64px minmax(0, 1fr); height: 122px; padding: .7rem; }.hotel-collection-dialog-grid .hotel-collection-image { width: 64px; height: 64px; }.hotel-collection-dialog-grid .hotel-collection-content > p:not(.hotel-collection-category):not(.hotel-collection-meta) { -webkit-line-clamp: 2; } }

/* The action is the visual anchor of every offer: clear, finger-sized, and
   never clipped below the card. */
.hotel-collection-dialog-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .65rem; }
.hotel-collection-back { display: inline-flex; min-height: 38px; align-items: center; gap: .4rem; padding: .52rem .75rem; color: var(--white); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24); border-radius: 999px; cursor: pointer; font: 700 .6rem var(--sans); letter-spacing: .08em; text-transform: uppercase; transition: background 180ms ease, transform 180ms ease; }.hotel-collection-back:hover { background: rgba(255,255,255,.2); transform: translateX(-1px); }
.hotel-collection-back[hidden] { display: none; }
.hotel-collection-dialog-grid .hotel-collection-content { display: flex; min-width: 0; height: 100%; flex-direction: column; align-items: flex-start; }
.hotel-collection-dialog-grid .hotel-collection-book { align-self: stretch; display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: .45rem; margin-top: auto; padding: .52rem .72rem; color: var(--white); background: linear-gradient(135deg, var(--navy), #254763); border-radius: 999px; box-shadow: 0 8px 18px rgba(13,29,45,.18); cursor: pointer; font: 700 .64rem var(--sans); letter-spacing: .09em; text-transform: uppercase; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; }.hotel-collection-dialog-grid .hotel-collection-book::after { content: '\2192'; color: var(--gold-pale); font-size: .82rem; }.hotel-collection-dialog-grid .hotel-collection-book:hover { background: linear-gradient(135deg, #254763, var(--navy)); box-shadow: 0 11px 22px rgba(13,29,45,.24); transform: translateY(-1px); }.hotel-collection-dialog-grid .hotel-collection-book:focus-visible, .hotel-collection-back:focus-visible { outline: 3px solid var(--gold-pale); outline-offset: 3px; }
@media (max-width: 620px) { .hotel-collection-dialog-actions { gap: .4rem; }.hotel-collection-back { min-height: 34px; padding: .45rem .6rem; font-size: .53rem; }.hotel-collection-dialog-grid .hotel-collection-book { min-height: 31px; padding: .42rem .62rem; font-size: .52rem; } }
.partner-offer-launcher { margin-top: .35rem; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* --------------------------------------------------------------------------
   ConciergeFlow V2 foundation
   The marketing surface is warm and spacious; the application preview is
   deliberately neutral, compact and operational.  These tokens are scoped
   additions so the still-live lower page keeps its current behaviour. */
:root {
  --v2-paper: #f7f5f0;
  --v2-surface: #ffffff;
  --v2-ink: #181917;
  --v2-muted: #6e6e68;
  --v2-faint: #eeece5;
  --v2-line: #deddd6;
  --v2-brass: #9d7a49;
  --v2-brass-pale: #eae0cc;
  --v2-system: #406f6b;
  --v2-system-pale: #e7f0ee;
  --v2-shadow: 0 22px 56px rgba(31, 32, 27, .09), 0 3px 9px rgba(31, 32, 27, .04);
}

/* Navigation: quiet hierarchy, no landing-page chrome. */
.site-nav {
  padding: 1rem clamp(1rem, 3vw, 2.5rem);
  color: var(--v2-ink);
  background: rgba(247, 245, 240, .88);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}
.site-nav.scrolled { padding-block: .72rem; background: rgba(247, 245, 240, .96); border-color: rgba(24, 25, 23, .08); }
.site-nav .nav-container { width: min(1360px, calc(100% - 1rem)); min-height: 38px; gap: 1.5rem; }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .58rem; color: var(--v2-ink); text-decoration: none; font: 650 1.22rem/1 var(--sans); letter-spacing: -.025em; }
.brand img { width: 36px; height: 36px; object-fit: contain; filter: none; }
.brand em { color: var(--v2-brass); font-style: normal; font-weight: 600; }
.nav-links { display: flex; align-items: center; justify-content: center; gap: clamp(1.15rem, 2.3vw, 2.2rem); margin-left: auto; }
.nav-links a, .nav-demo { color: #5b5b55; text-decoration: none; font-size: .75rem; font-weight: 550; letter-spacing: .005em; transition: color 180ms ease; }
.nav-links a:hover, .nav-demo:hover { color: var(--v2-ink); }
.nav-actions { display: flex; align-items: center; gap: 1.2rem; }
.locale-switcher { display: inline-flex; align-items: center; gap: 1px; padding: 2px; border: 1px solid var(--v2-line); border-radius: 4px; background: rgba(255,255,255,.44); }
.locale-switcher button { min-width: 27px; min-height: 27px; padding: 0 .32rem; color: var(--v2-muted); background: transparent; border: 0; border-radius: 2px; font-size: .56rem; font-weight: 750; letter-spacing: .06em; line-height: 1; }
.locale-switcher button:hover { color: var(--v2-ink); background: var(--v2-faint); }
.locale-switcher button.is-active { color: var(--v2-paper); background: var(--v2-ink); }
.locale-switcher--mobile { display: none; margin: .5rem .7rem .2rem; width: fit-content; }
.nav-discovery { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; padding: .5rem .78rem; color: var(--v2-paper); background: var(--v2-ink); border: 1px solid var(--v2-ink); border-radius: 4px; text-decoration: none; font-size: .7rem; font-weight: 650; letter-spacing: .005em; transition: background 180ms ease, transform 120ms ease; }
.nav-discovery:hover { background: #393a35; transform: translateY(-1px); }
.nav-discovery:active { transform: scale(.98); }
.nav-mobile-menu { position: relative; display: none; margin-left: auto; }
.nav-mobile-menu summary { display: flex; align-items: center; gap: .45rem; cursor: pointer; list-style: none; color: var(--v2-ink); font-size: .75rem; font-weight: 650; }
.nav-mobile-menu summary::-webkit-details-marker { display: none; }
.nav-mobile-menu[open] summary span { transform: rotate(45deg); }
.nav-mobile-menu summary span { display: inline-block; color: var(--v2-brass); font-size: 1.1rem; line-height: 1; transition: transform 160ms ease; }
.nav-mobile-panel { position: absolute; top: calc(100% + .8rem); right: 0; display: grid; width: min(260px, calc(100vw - 2rem)); padding: .45rem; background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: 6px; box-shadow: var(--v2-shadow); }
.nav-mobile-panel a { padding: .68rem .7rem; color: var(--v2-ink); border-radius: 3px; text-decoration: none; font-size: .78rem; }
.nav-mobile-panel a:hover { background: var(--v2-paper); }
.nav-mobile-panel > a[href="hotel-discovery.html"] { margin-top: .25rem; color: var(--v2-paper); background: var(--v2-ink); }

/* Hero: the editorial message makes room for an evidence-led product view. */
.hero-v2 { min-height: 0; padding: clamp(8.5rem, 13vw, 11.5rem) 0 clamp(4rem, 7vw, 7rem); color: var(--v2-ink); background: var(--v2-paper); overflow: clip; }
.hero-v2::after { display: none; }
.hero-v2-container { width: min(1360px, calc(100% - 3rem)); }
.hero-v2-content { max-width: 840px; margin: 0 auto; text-align: center; }
.hero-eyebrow, .journey-intro-eyebrow { margin: 0 0 1.25rem; color: var(--v2-brass); font-size: .66rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.hero-v2 h1 { max-width: none; color: var(--v2-ink); font-family: var(--serif); font-size: clamp(3.4rem, 7vw, 6.8rem); font-weight: 500; letter-spacing: -.062em; line-height: .94; }
.hero-v2 h1 span { display: block; }
.hero-v2 h1 span:last-child { color: #5f5b51; }
.hero-v2 .hero-sub { max-width: 650px; margin: 1.55rem auto 2.1rem; color: var(--v2-muted); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.62; }
.hero-v2-ctas { justify-content: center; gap: .55rem; }
.hero-v2 .btn-primary, .hero-v2 .btn-outline { min-height: 44px; padding: .72rem 1rem; border-radius: 4px; font-family: var(--sans); font-size: .78rem; font-weight: 650; letter-spacing: 0; text-transform: none; }
.hero-v2 .btn-primary { color: var(--v2-paper); background: var(--v2-ink); }
.hero-v2 .btn-primary:hover { color: var(--v2-paper); background: #3c3d38; box-shadow: none; transform: translateY(-1px); }
.hero-v2 .btn-primary span { margin-left: .45rem; color: var(--v2-brass-pale); font-size: 1rem; line-height: .6; }
.hero-v2 .btn-outline { color: var(--v2-ink); border: 1px solid var(--v2-line); }
.hero-v2 .btn-outline:hover { color: var(--v2-ink); background: var(--v2-surface); }
.hero-v2 .btn-outline span { margin-left: .3rem; color: var(--v2-brass); }

/* Product visual: a purpose-built hospitality operations workspace. */
.hero-product { position: relative; width: 100%; margin-top: clamp(3.6rem, 7vw, 6.3rem); }
.product-app { overflow: hidden; background: var(--v2-surface); border: 1px solid #d9d8d1; border-radius: 12px; box-shadow: var(--v2-shadow); text-align: left; }
.product-app-header { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 52px; align-items: center; padding: 0 1.15rem; color: #60605a; border-bottom: 1px solid #e8e7e1; font-size: .67rem; }
.product-app-brand { display: inline-flex; align-items: center; gap: .42rem; color: #31312e; font-size: .73rem; font-weight: 720; }
.product-mark { color: var(--v2-brass); font-size: .95rem; }
.product-app-status { display: inline-flex; align-items: center; gap: .42rem; color: #5f605a; }
.product-app-status span, .live-dot { width: 6px; height: 6px; background: #5c9588; border-radius: 50%; }
.product-app-time { justify-self: end; color: #94938d; }
.product-app-body { display: grid; grid-template-columns: 232px minmax(0, 1fr) 260px; min-height: 480px; }
.product-guests, .product-intelligence { background: #fcfcfb; }
.product-guests { display: flex; flex-direction: column; border-right: 1px solid #e8e7e1; }
.product-panel-heading, .intelligence-heading { display: flex; align-items: center; justify-content: space-between; padding: 1.05rem .95rem .75rem; color: #2c2d29; font-size: .68rem; font-weight: 720; }
.product-panel-heading small { color: #878780; font-size: .58rem; font-weight: 550; text-transform: uppercase; letter-spacing: .09em; }
.guest-list { display: grid; gap: .15rem; margin: 0; padding: 0 .45rem; list-style: none; }
.guest-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 7px; gap: .58rem; align-items: center; min-height: 51px; padding: .45rem .45rem; border: 1px solid transparent; border-radius: 5px; }
.guest-row.is-selected { background: #f1f4f2; border-color: #dce8e4; }
.guest-avatar { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #575449; font-size: .57rem; font-weight: 750; }
.avatar-alex { background: #e5dbc9; }.avatar-sofia { color: #52626b; background: #dce9eb; }.avatar-yuki { color: #5e6257; background: #e6e6d9; }.avatar-james { color: #765c4b; background: #efdfd6; }
.guest-row-copy { min-width: 0; }.guest-row-copy strong, .guest-row-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guest-row-copy strong { color: #353530; font-size: .67rem; font-weight: 680; }.guest-row-copy small { margin-top: .13rem; color: #898982; font-size: .58rem; }
.guest-status { width: 6px; height: 6px; background: #97b7af; border-radius: 50%; }.guest-status.is-warm { background: #b88650; }
.guest-list-footer { display: flex; gap: .42rem; align-items: center; margin-top: auto; padding: .95rem; color: #7d7d77; border-top: 1px solid #e8e7e1; font-size: .59rem; }
.product-conversation { display: flex; min-width: 0; flex-direction: column; background: #fdfdfc; }
.conversation-header { display: flex; align-items: center; justify-content: space-between; min-height: 77px; padding: .95rem 1.25rem; border-bottom: 1px solid #ecebe6; }
.conversation-header p, .conversation-header h2, .journey-status p, .ai-activity > p { margin: 0; }
.conversation-header p { margin-bottom: .22rem; color: #878780; font-size: .57rem; font-weight: 680; letter-spacing: .08em; text-transform: uppercase; }
.conversation-header h2 { color: #2c2d29; font: 650 .95rem/1.15 var(--sans); letter-spacing: -.01em; }.conversation-header h2 span { color: #888780; font-weight: 500; }
.journey-badge { padding: .28rem .48rem; color: #766040; background: #f4efe5; border: 1px solid #e8ddca; border-radius: 3px; font-size: .57rem; font-weight: 700; }
.conversation-thread { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 1rem; padding: clamp(1.2rem, 3vw, 2.1rem); }
.conversation-day { color: #96958f; font-size: .57rem; text-align: center; }
.product-message { max-width: 82%; padding: .74rem .85rem; border-radius: 5px; font-size: .73rem; line-height: 1.5; }
.product-message p { margin: 0; }.product-message-guest { align-self: flex-end; color: #f7f7f4; background: #3b3d39; border-bottom-right-radius: 1px; }.product-message-ai { color: #3d3e39; background: #f0f1ee; border: 1px solid #e4e4df; border-bottom-left-radius: 1px; }
.message-sender { display: block; margin-bottom: .34rem; color: #7c6646; font-size: .55rem; font-weight: 750; letter-spacing: .04em; }.message-sender i { margin-right: .2rem; color: var(--v2-brass); font-style: normal; }
.request-prepared { display: flex; align-self: flex-start; gap: .55rem; align-items: flex-start; padding: .58rem .65rem; color: #355e58; background: var(--v2-system-pale); border: 1px solid #d1e1dc; border-radius: 4px; }
.request-prepared > span { display: grid; width: 16px; height: 16px; place-items: center; color: #fff; background: var(--v2-system); border-radius: 50%; font-size: .53rem; }.request-prepared small, .request-prepared strong { display: block; }.request-prepared small { margin-bottom: .12rem; color: #67837e; font-size: .51rem; letter-spacing: .04em; text-transform: uppercase; }.request-prepared strong { color: #315b55; font-size: .61rem; font-weight: 690; }
.conversation-composer { display: flex; align-items: center; justify-content: space-between; margin: 0 1.15rem 1.05rem; padding: .32rem .35rem .32rem .7rem; color: #989791; border: 1px solid #e4e3de; border-radius: 4px; font-size: .65rem; }.conversation-send { display: grid; width: 25px; height: 25px; place-items: center; padding: 0; color: #fbfbf8; background: #4a4b47; border-radius: 3px; font-size: .9rem; }
.product-intelligence { padding: 0 .9rem 1rem; border-left: 1px solid #e8e7e1; }.intelligence-heading { padding-inline: 0; }.intelligence-heading i { color: #95948f; font-size: .75rem; font-style: normal; letter-spacing: .1em; }
.guest-summary { padding: .82rem; background: #f7f7f5; border: 1px solid #e8e7e1; border-radius: 5px; }.guest-summary-name { display: flex; gap: .55rem; align-items: center; }.guest-summary-name strong, .guest-summary-name small { display: block; }.guest-summary-name strong { color: #343530; font-size: .7rem; }.guest-summary-name small { margin-top: .1rem; color: #898982; font-size: .57rem; }.guest-summary dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin: .75rem 0 0; }.guest-summary dl div { min-width: 0; }.guest-summary dt { margin-bottom: .12rem; color: #999790; font-size: .5rem; letter-spacing: .04em; text-transform: uppercase; }.guest-summary dd { margin: 0; overflow: hidden; color: #555650; font-size: .59rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.journey-status, .ai-activity { margin-top: 1.05rem; }.journey-status > p, .ai-activity > p { margin-bottom: .58rem; color: #7b7b75; font-size: .56rem; font-weight: 740; letter-spacing: .08em; text-transform: uppercase; }.journey-status ol { display: grid; gap: .42rem; margin: 0; padding: 0; list-style: none; }.journey-status li { display: flex; gap: .55rem; align-items: center; color: #96958f; font-size: .61rem; }.journey-status li span { width: 9px; height: 9px; border: 1px solid #c7c6c0; border-radius: 50%; color: #fff; font-size: .4rem; line-height: 7px; text-align: center; }.journey-status li.is-complete { color: #5b6c63; }.journey-status li.is-complete span { background: #8faa9d; border-color: #8faa9d; }.journey-status li.is-current { color: #5b5245; font-weight: 690; }.journey-status li.is-current span { background: var(--v2-brass); border-color: var(--v2-brass); box-shadow: 0 0 0 3px rgba(157, 122, 73, .12); }
.ai-activity { padding-top: .9rem; border-top: 1px solid #e9e8e3; }.activity-row { display: grid; gap: .13rem; padding: .53rem .58rem; border-left: 2px solid #d5d3ca; background: #fafaf8; }.activity-row + .activity-row { margin-top: .38rem; }.activity-row span { color: #8d8c86; font-size: .52rem; }.activity-row strong { overflow: hidden; color: #42433e; font-size: .62rem; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }.activity-intent { border-color: #b68b57; }.activity-context { border-color: #84a7a0; }.activity-action { border-color: #638f82; }

/* Intent is shown before action.  The sequence is informative, never ambient. */
@media (prefers-reduced-motion: no-preference) {
  .hero-v2-content { animation: v2-settle .72s var(--ease-out) both; }
  .hero-product { animation: v2-product-arrival .8s .1s var(--ease-out) both; }
  .product-message-ai { animation: v2-message-in .42s .72s var(--ease-out) both; }
  .request-prepared { animation: v2-message-in .42s 1.1s var(--ease-out) both; }
  .activity-row { animation: v2-activity-in .36s var(--ease-out) both; }
  .activity-intent { animation-delay: .94s; }.activity-context { animation-delay: 1.13s; }.activity-action { animation-delay: 1.32s; }
}
@keyframes v2-settle { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes v2-product-arrival { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes v2-message-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes v2-activity-in { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: translateX(0); } }

/* Hero-to-platform hand-off: the journey continues before the legacy sections. */
.journey-intro { padding: clamp(4.5rem, 8vw, 7.5rem) 0; color: var(--v2-ink); background: var(--v2-surface); border-top: 1px solid var(--v2-line); }
.journey-intro-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(300px, .8fr); gap: clamp(2rem, 9vw, 10rem); align-items: end; }
.journey-intro h2 { margin: 0; font: 500 clamp(2.4rem, 4.3vw, 4.5rem)/.98 var(--serif); letter-spacing: -.05em; }.journey-intro-copy > p { max-width: 500px; margin: 0; color: var(--v2-muted); font-size: 1rem; line-height: 1.65; }
.journey-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 2rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--v2-line); list-style: none; counter-reset: journey; }.journey-strip li { position: relative; padding-top: .75rem; color: #5e5e58; font-size: .67rem; }.journey-strip li::before { position: absolute; top: -4px; left: 0; width: 7px; height: 7px; content: ''; background: #b9b7ae; border-radius: 50%; }.journey-strip li:first-child::before { background: var(--v2-brass); }

@media (max-width: 1040px) {
  .site-nav .nav-container { width: min(100%, 1360px); }.nav-links { gap: 1.1rem; }.product-app-body { grid-template-columns: 205px minmax(0, 1fr) 230px; }.product-intelligence { padding-inline: .72rem; }.product-app-body { min-height: 450px; }
}
@media (max-width: 860px) {
  .nav-links, .nav-actions, .locale-switcher--site { display: none; }.nav-mobile-menu { display: block; }.locale-switcher--mobile { display: inline-flex; }.hero-v2-container { width: min(100% - 2rem, 800px); }.product-app-body { grid-template-columns: minmax(0, 1fr) 240px; }.product-guests { display: none; }.journey-intro-inner { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 620px) {
  .site-nav { padding-inline: .35rem; }.site-nav .nav-container { width: calc(100% - .5rem); }.brand { font-size: 1.07rem; }.brand img { width: 30px; height: 30px; }.hero-v2 { padding-top: 7.5rem; }.hero-v2-container { width: min(100% - 2rem, 560px); }.hero-v2 h1 { font-size: clamp(3.25rem, 15vw, 4.8rem); letter-spacing: -.07em; }.hero-v2 .hero-sub { margin-top: 1.25rem; font-size: .98rem; }.hero-v2-ctas { align-items: stretch; }.hero-v2 .btn-primary, .hero-v2 .btn-outline { width: 100%; }.hero-product { margin-top: 3.3rem; }.product-app { border-radius: 8px; }.product-app-header { grid-template-columns: 1fr auto; min-height: 48px; padding-inline: .75rem; }.product-app-status { display: none; }.product-app-time { color: #92918a; font-size: .57rem; }.product-app-body { display: block; min-height: 0; }.product-intelligence { display: none; }.conversation-header { min-height: 68px; padding: .8rem .85rem; }.conversation-header h2 { font-size: .84rem; }.conversation-thread { min-height: 315px; padding: 1rem .85rem; justify-content: center; }.product-message { max-width: 92%; font-size: .68rem; }.conversation-composer { margin: 0 .75rem .75rem; }.journey-intro { padding-block: 4.5rem; }.journey-intro h2 { font-size: clamp(2.45rem, 12vw, 3.5rem); }.journey-intro-copy > p { font-size: .94rem; }.journey-strip { grid-template-columns: repeat(2, 1fr); gap: 1.25rem .5rem; }.journey-strip li { padding-top: .62rem; }
}
@media (prefers-reduced-transparency: reduce) { .site-nav { background: var(--v2-paper); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-contrast: more) { .product-app, .site-nav, .journey-intro { border-color: #92918a; }.hero-v2 h1, .journey-intro h2 { color: #000; } }

/* V2 refinement: lead with the product sooner and let the hero demonstrate a
   single, complete operational cause-and-effect sequence. */
.hero-v2 { padding: clamp(5.55rem, 6.4vw, 6.5rem) 0 clamp(2.75rem, 4.2vw, 4.4rem); }
.hero-v2-content { max-width: 720px; }
.hero-v2 h1 { font-family: var(--serif); font-size: clamp(3.1rem, 4.5vw, 4.6rem); letter-spacing: -.055em; line-height: .97; }
.hero-v2 .hero-sub { max-width: 610px; margin: 1.2rem auto 1.5rem; }
.hero-product { margin-top: clamp(1.8rem, 2.8vw, 2.8rem); }
.product-app-body { min-height: 450px; }
.product-conversation, .prearrival-conversation { padding: 0; }
.request-processing { display: none; align-self: flex-start; gap: .42rem; align-items: center; padding: .34rem .1rem; color: #7c7b74; font-size: .59rem; }
.request-processing span { width: 5px; height: 5px; background: #8ca99e; border-radius: 50%; }
.request-prepared em, .prearrival-request em { display: block; margin-top: .18rem; color: #63837c; font-size: .56rem; font-style: normal; font-weight: 600; }
.guest-arrival { display: flex; justify-content: space-between; gap: .5rem; margin: .62rem 0 0; padding-top: .58rem; color: #77766f; border-top: 1px solid #e3e2dd; font-size: .56rem; }.guest-arrival strong { color: #555650; font-size: .58rem; }

/* This is explanatory, first-view motion. It uses opacity and transform only;
   every endpoint remains fully rendered when motion is reduced or unavailable. */
@media (prefers-reduced-motion: no-preference) {
  .hero-v2-content { animation-duration: .48s; }
  .hero-product { animation-duration: .56s; animation-delay: .06s; }
  .product-message-guest { animation: v2-message-in .24s .38s var(--ease-out) both; }
  .request-processing { display: inline-flex; animation: v2-processing .74s .78s var(--ease-out) both; }
  .activity-intent { animation: v2-activity-in .24s 1.04s var(--ease-out) both; }
  .activity-context { animation: v2-activity-in .24s 1.26s var(--ease-out) both; }
  .product-message-ai { animation: v2-message-in .28s 1.55s var(--ease-out) both; }
  .request-prepared { animation: v2-message-in .28s 1.86s var(--ease-out) both; }
  .activity-action { animation: v2-activity-in .24s 2.16s var(--ease-out) both; }
}
@keyframes v2-processing { 0% { opacity: 0; transform: translateY(4px); } 16%, 70% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-3px); } }

/* Chapter 01: a composed continuation of the product, not another feature grid. */
.journey-intro { padding-bottom: clamp(2.5rem, 4.2vw, 4.3rem); border-top-color: #e8e7e1; }
.story-chapter { padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(5.5rem, 9vw, 8.5rem); color: var(--v2-ink); background: var(--v2-surface); }
.prearrival-composition { display: grid; grid-template-columns: minmax(250px, .63fr) minmax(0, 1.37fr); gap: clamp(2rem, 6vw, 6.5rem); align-items: center; }
.chapter-narrative { max-width: 380px; padding-bottom: .4rem; }.chapter-eyebrow { margin: 0 0 1.2rem; color: var(--v2-brass); font-size: .66rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }.chapter-narrative h2 { margin: 0; color: var(--v2-ink); font: 500 clamp(2.65rem, 4.2vw, 4.6rem)/.98 var(--serif); letter-spacing: -.055em; }.chapter-narrative > p:not(.chapter-eyebrow) { margin: 1.4rem 0 0; color: var(--v2-muted); font-size: .95rem; line-height: 1.65; }
.chapter-guest-context { display: grid; gap: .54rem; margin: 1.8rem 0 0; padding-top: 1rem; border-top: 1px solid var(--v2-line); }.chapter-guest-context div { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: .65rem; }.chapter-guest-context dt { color: #98968e; font-size: .58rem; letter-spacing: .07em; text-transform: uppercase; }.chapter-guest-context dd { margin: 0; color: #4f504a; font-size: .68rem; font-weight: 630; }
.prearrival-app { overflow: hidden; background: var(--v2-surface); border: 1px solid #d9d8d1; border-radius: 10px; box-shadow: var(--v2-shadow); }.prearrival-app-header { display: flex; align-items: center; justify-content: space-between; min-height: 51px; padding: 0 1rem; color: #898881; border-bottom: 1px solid #e8e7e1; font-size: .61rem; }.prearrival-app-body { display: grid; grid-template-columns: minmax(0, 1fr) 252px; min-height: 398px; }.prearrival-conversation { display: flex; min-width: 0; flex-direction: column; background: #fdfdfc; }.prearrival-conversation .conversation-header { min-height: 75px; }.prearrival-conversation h3 { margin: 0; color: #2c2d29; font: 650 .91rem/1.15 var(--sans); letter-spacing: -.01em; }.prearrival-conversation h3 span { color: #888780; font-weight: 500; }.prearrival-thread { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: .9rem; padding: clamp(1.15rem, 3vw, 1.85rem); }.prearrival-thread .product-message { max-width: 85%; }
.prearrival-request { display: flex; align-self: flex-start; gap: .55rem; align-items: flex-start; padding: .58rem .65rem; color: #355e58; background: var(--v2-system-pale); border: 1px solid #d1e1dc; border-radius: 4px; }.prearrival-request > span { display: grid; width: 16px; height: 16px; place-items: center; color: #fff; background: var(--v2-system); border-radius: 50%; font-size: .53rem; }.prearrival-request small, .prearrival-request strong { display: block; }.prearrival-request small { margin-bottom: .12rem; color: #67837e; font-size: .51rem; letter-spacing: .04em; text-transform: uppercase; }.prearrival-request strong { color: #315b55; font-size: .61rem; font-weight: 690; }
.prearrival-intelligence { padding: 0 .86rem 1rem; background: #fcfcfb; border-left: 1px solid #e8e7e1; }.prearrival-intelligence .intelligence-heading { padding-inline: 0; }.sofia-summary { padding: .76rem; background: #f7f7f5; border: 1px solid #e8e7e1; border-radius: 5px; }.sofia-summary > p { margin: .64rem 0 0; padding-top: .58rem; color: #797970; border-top: 1px solid #e3e2dd; font-size: .57rem; }.prearrival-signals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem .5rem; margin: 1rem 0 0; }.prearrival-signals div { min-width: 0; }.prearrival-signals dt { margin-bottom: .16rem; color: #92918a; font-size: .5rem; letter-spacing: .06em; text-transform: uppercase; }.prearrival-signals dd { margin: 0; overflow: hidden; color: #484943; font-size: .63rem; font-weight: 670; text-overflow: ellipsis; white-space: nowrap; }.staff-context { display: grid; gap: .2rem; margin-top: 1rem; padding: .65rem; background: #f3efe6; border-left: 2px solid var(--v2-brass); }.staff-context span { color: #8a7a62; font-size: .5rem; letter-spacing: .06em; text-transform: uppercase; }.staff-context strong { color: #5e5547; font-size: .59rem; line-height: 1.42; }

@media (max-width: 1040px) { .prearrival-composition { grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr); gap: 2.5rem; }.prearrival-app-body { grid-template-columns: minmax(0, 1fr) 225px; }.prearrival-intelligence { padding-inline: .68rem; } }
@media (max-width: 860px) { .prearrival-composition { grid-template-columns: 1fr; gap: 2rem; }.chapter-narrative { max-width: 610px; }.chapter-narrative > p:not(.chapter-eyebrow) { max-width: 600px; }.chapter-guest-context { max-width: 470px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }.chapter-guest-context div { display: block; }.chapter-guest-context dt { display: block; margin-bottom: .22rem; }.prearrival-app { width: min(100%, 760px); } }
@media (max-width: 620px) { .hero-v2 { padding-top: 6.65rem; padding-bottom: 2.7rem; }.hero-v2 h1 { font-size: clamp(3rem, 14vw, 4.25rem); }.hero-v2 .hero-sub { margin-bottom: 1.25rem; }.hero-product { margin-top: 2.45rem; }.request-processing { font-size: .55rem; }.request-prepared em { font-size: .52rem; }.journey-intro { padding-bottom: 2.8rem; }.story-chapter { padding-top: 1.5rem; }.chapter-narrative h2 { font-size: clamp(2.55rem, 12.5vw, 3.45rem); }.chapter-narrative > p:not(.chapter-eyebrow) { font-size: .92rem; }.chapter-guest-context { grid-template-columns: 1fr; max-width: none; }.chapter-guest-context div { display: grid; grid-template-columns: 70px minmax(0, 1fr); }.prearrival-app { border-radius: 8px; }.prearrival-app-header { min-height: 48px; padding-inline: .75rem; }.prearrival-app-header > span { font-size: .54rem; }.prearrival-app-body { display: block; min-height: 0; }.prearrival-conversation .conversation-header { min-height: 68px; padding: .8rem .85rem; }.prearrival-conversation h3 { font-size: .82rem; }.prearrival-thread { min-height: 322px; padding: 1rem .85rem; }.prearrival-thread .product-message { max-width: 92%; font-size: .67rem; }.prearrival-intelligence { padding: .05rem .75rem .85rem; border-top: 1px solid #e8e7e1; border-left: 0; }.prearrival-signals { grid-template-columns: repeat(2, minmax(0, 1fr)); }.staff-context { margin-top: .85rem; }
}

/* Chapter 02: the night surface stays deliberate and operational, never sci-fi. */
.night-operations { position: relative; padding: clamp(5.5rem, 9vw, 8.5rem) 0 clamp(3.25rem, 4.5vw, 4.5rem); color: #ebe9e1; background: #111412; border-top: 1px solid #292d29; }
.night-intro { display: grid; grid-template-columns: minmax(150px, .45fr) minmax(320px, 1.05fr) minmax(220px, .65fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: end; margin-bottom: clamp(2.4rem, 5vw, 4.4rem); }
.night-time-display { display: grid; gap: .25rem; align-self: stretch; align-content: end; padding-bottom: .2rem; color: #f1ede3; border-bottom: 1px solid #4b4d46; }.night-time-display span { font-size: clamp(3.4rem, 6.4vw, 6.8rem); font-weight: 560; letter-spacing: -.08em; line-height: .8; }.night-time-display small { color: #bda578; font-size: .66rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.night-intro .chapter-eyebrow { margin-bottom: .9rem; color: #c4a773; }.night-intro h2 { max-width: 650px; margin: 0; color: #f1eee6; font: 500 clamp(2.85rem, 4.8vw, 5.4rem)/.95 var(--serif); letter-spacing: -.06em; }.night-intro > p:last-child { max-width: 330px; margin: 0 0 .2rem; color: #a9aaa2; font-size: .88rem; line-height: 1.65; }
.night-demo { overflow: hidden; background: #181c19; border: 1px solid #353a35; border-radius: 10px; box-shadow: 0 22px 56px rgba(0, 0, 0, .2); }.night-console-header { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 52px; align-items: center; padding: 0 1rem; color: #9b9d94; border-bottom: 1px solid #303530; font-size: .61rem; }.night-console-header .product-app-brand { color: #eeece4; }.night-console-header > span:last-child { justify-self: end; color: #8e9087; font-size: .57rem; letter-spacing: .08em; text-transform: uppercase; }.night-console-state { display: inline-flex; gap: .42rem; align-items: center; color: #b7b8ae; }.night-console-state i { width: 5px; height: 5px; background: #8cac96; border-radius: 50%; }
.night-workspace { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(185px, .66fr) minmax(205px, .76fr); min-height: 404px; }.night-conversation, .handoff-guest-view, .reception-desk { padding: 0; }.night-conversation { display: flex; min-width: 0; flex-direction: column; background: #181c19; }.night-guest-header { display: flex; align-items: center; justify-content: space-between; min-height: 75px; padding: .9rem 1rem; border-bottom: 1px solid #303530; }.night-guest-header p, .night-guest-header h3 { margin: 0; }.night-guest-header p { margin-bottom: .22rem; color: #8f9189; font-size: .55rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.night-guest-header h3 { color: #f0eee6; font: 650 .9rem/1.15 var(--sans); letter-spacing: -.01em; }.night-guest-header h3 span { color: #999c94; font-weight: 500; }.night-guest-header > span { padding: .27rem .42rem; color: #d4c397; border: 1px solid #4c4e47; border-radius: 3px; font-size: .54rem; }.night-thread { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: .9rem; padding: 1.4rem clamp(1rem, 2.7vw, 1.7rem); }.night-thread-time { color: #888b83; font-size: .56rem; text-align: center; }.night-message { max-width: 86%; padding: .72rem .82rem; border-radius: 5px; font-size: .7rem; line-height: 1.5; }.night-message p { margin: 0; }.night-guest-message { align-self: flex-end; color: #e9e8e2; background: #444841; border-bottom-right-radius: 1px; }.night-ai-message { color: #d7d8d0; background: #242925; border: 1px solid #383e39; border-bottom-left-radius: 1px; }.night-ai-message .message-sender { color: #c5a979; }.night-action { display: flex; align-self: flex-start; gap: .55rem; align-items: flex-start; padding: .58rem .65rem; color: #b5d0c5; background: #1e2d28; border: 1px solid #385348; border-radius: 4px; }.night-action > span { display: grid; width: 16px; height: 16px; place-items: center; color: #111412; background: #89af9f; border-radius: 50%; font-size: .53rem; }.night-action small, .night-action strong, .night-action em { display: block; }.night-action small { margin-bottom: .12rem; color: #8fac9f; font-size: .5rem; letter-spacing: .05em; text-transform: uppercase; }.night-action strong { color: #cce0d7; font-size: .61rem; font-weight: 690; }.night-action em { margin-top: .18rem; color: #93b7aa; font-size: .55rem; font-style: normal; font-weight: 590; }
.night-intelligence, .night-log { padding: 0 .82rem 1rem; background: #151916; border-left: 1px solid #303530; }.night-panel-heading { padding: 1rem 0 .73rem; color: #babbb3; font-size: .56rem; font-weight: 730; letter-spacing: .08em; text-transform: uppercase; }.night-intelligence dl { display: grid; gap: .55rem; margin: 0; }.night-intelligence dl div { padding: .58rem .62rem; background: #1e221f; border-left: 2px solid #555a52; }.night-intelligence dt { margin-bottom: .13rem; color: #8d8f86; font-size: .5rem; letter-spacing: .06em; text-transform: uppercase; }.night-intelligence dd { margin: 0; color: #e3e2db; font-size: .63rem; font-weight: 660; }.night-intent { border-color: #b4915e !important; }.night-guests { border-color: #799b90 !important; }.night-period { border-color: #899a9b !important; }.night-confirmation { display: grid; gap: .2rem; margin-top: 1rem; padding: .66rem; background: #24231e; border-left: 2px solid #b59867; }.night-confirmation span { color: #bda578; font-size: .5rem; letter-spacing: .06em; text-transform: uppercase; }.night-confirmation strong { color: #d8cfbb; font-size: .59rem; line-height: 1.42; }
.night-log ol { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }.night-log li { display: grid; grid-template-columns: 39px minmax(0, 1fr); gap: .5rem; align-items: baseline; padding-bottom: .68rem; color: #c5c6bf; border-bottom: 1px solid #2c302c; font-size: .61rem; line-height: 1.4; }.night-log time { color: #a6936d; font-size: .57rem; font-variant-numeric: tabular-nums; }.night-log li:last-child { color: #cfe0d9; }.night-log li:last-child time { color: #90ad9f; }
.night-demo-summary { display: flex; gap: 1.35rem; align-items: center; margin-top: 1.25rem; padding: 0 .1rem; color: #a5a79e; }.night-demo-summary > span { flex: 0 0 auto; color: #c3a976; font-size: .58rem; font-weight: 720; letter-spacing: .12em; text-transform: uppercase; }.night-demo-summary dl { display: flex; flex: 1; justify-content: space-between; gap: 1rem; margin: 0; }.night-demo-summary dl div { min-width: 0; }.night-demo-summary dt, .night-demo-summary dd { margin: 0; }.night-demo-summary dt { color: #f1efe7; font-size: .86rem; font-weight: 690; }.night-demo-summary dd { margin-top: .1rem; color: #92958c; font-size: .57rem; }.night-demo-summary dl div:last-child { max-width: 150px; }.night-demo-summary dl div:last-child dt { color: #b7d1c5; }

/* Explanation: a once-per-view state sequence. Static content remains visible
   until JavaScript safely primes the in-view demonstration. */
@media (prefers-reduced-motion: no-preference) {
  .night-operations.is-demo-primed .night-time-display, .night-operations.is-demo-primed .night-guest-message, .night-operations.is-demo-primed .night-intelligence dl div, .night-operations.is-demo-primed .night-ai-message, .night-operations.is-demo-primed .night-action, .night-operations.is-demo-primed .night-confirmation, .night-operations.is-demo-primed .night-log li { opacity: 0; }
  .night-operations.is-demo-playing .night-time-display { animation: v2-night-enter .26s var(--ease-out) both; }
  .night-operations.is-demo-playing .night-guest-message { animation: v2-night-enter .24s .26s var(--ease-out) both; }
  .night-operations.is-demo-playing .night-intent { animation: v2-night-enter .22s .55s var(--ease-out) both; }.night-operations.is-demo-playing .night-guests { animation: v2-night-enter .22s .7s var(--ease-out) both; }.night-operations.is-demo-playing .night-period { animation: v2-night-enter .22s .85s var(--ease-out) both; }
  .night-operations.is-demo-playing .night-ai-message { animation: v2-night-enter .26s 1.12s var(--ease-out) both; }.night-operations.is-demo-playing .night-action { animation: v2-night-enter .26s 1.4s var(--ease-out) both; }.night-operations.is-demo-playing .night-confirmation { animation: v2-night-enter .22s 1.66s var(--ease-out) both; }
  .night-operations.is-demo-playing .night-log-received { animation: v2-night-enter .2s .28s var(--ease-out) both; }.night-operations.is-demo-playing .night-log-understood { animation: v2-night-enter .2s .72s var(--ease-out) both; }.night-operations.is-demo-playing .night-log-prepared { animation: v2-night-enter .2s 1.45s var(--ease-out) both; }.night-operations.is-demo-playing .night-log-followup { animation: v2-night-enter .2s 1.9s var(--ease-out) both; }
}
@keyframes v2-night-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Chapter 03: a neutral reception surface makes human judgement visibly first-class. */
/* Chapter 03 opener: a pinned stage the cathedral turns inside. The pin needs a
   scroll range, so the stage is tall and the pin is one viewport of it. Note the
   body rule above keeps `overflow-x: hidden` -- that propagates to the viewport
   and leaves position:sticky working; `hidden` on `html` instead would make the
   root a scroll container and the pin would never stick. */
.monument-stage { position: relative; height: 640vh; padding: 0; background: var(--v2-paper); }
.monument-pin { position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: linear-gradient(#a9c6dd 0%, #cfdce2 46%, #ece6d9 78%, var(--v2-paper) 100%); }
.monument-pin canvas { display: block; width: 100%; height: 100%; }
/* A soft veil over the side the text sits on. The camera already keeps the
   cathedral out of the text column, but stone and type are close in value, so
   this guarantees the words stay readable whatever angle the turn is at. */
.monument-pin::after { content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(96deg, rgba(245,242,234,.9) 0%, rgba(245,242,234,.66) 24%, rgba(245,242,234,0) 50%); }

.monument-marker { position: absolute; z-index: 2; top: clamp(5.5rem, 13vh, 8.5rem);
  left: max(1.35rem, calc(50vw - 620px)); width: min(30vw, 340px);
  pointer-events: none; opacity: 0; transition: opacity 700ms ease 260ms; }
.monument-stage.is-assembled .monument-marker { opacity: 1; }
.monument-marker .chapter-eyebrow { margin-bottom: .7rem; color: #93713f; }
.monument-marker-line { margin: 0; max-width: 30ch; color: #46503f;
  font: 400 clamp(.88rem, 1vw, 1rem)/1.55 var(--sans); }
.monument-ticks { display: flex; gap: .38rem; margin: 1.15rem 0 0; padding: 0; list-style: none; }
.monument-ticks li { width: 20px; height: 2px; background: rgba(62,76,66,.2);
  transition: background 420ms ease; }
.monument-ticks li.is-done { background: #93713f; }
.monument-caption { position: absolute; top: 50%; left: max(1.35rem, calc(50vw - 620px));
  z-index: 2; width: min(42vw, 560px); transform: translateY(-50%);
  pointer-events: none; opacity: 0; transition: opacity 700ms ease 120ms; }
.monument-stage.is-assembled .monument-caption { opacity: 1; }
.monument-caption .chapter-eyebrow { margin-bottom: 1.15rem; color: #93713f; }

/* The cards share one slot, so the box is sized for the tallest of them and
   nothing below shifts as they swap. */
.monument-cards { position: relative; min-height: clamp(12rem, 25vh, 19rem); }
.monument-card { position: absolute; inset: 0 0 auto 0; }

/* Each line is masked by its own overflow and wipes up into place. Direction
   follows the scroll: outgoing cards leave the way you are travelling, so
   reading back up the page reverses cleanly instead of always sliding one way. */
.monument-figure { overflow: hidden; margin: 0 0 1.1rem; color: #232d26;
  font: 500 clamp(2.3rem, 4.7vw, 5.1rem)/1 var(--serif); letter-spacing: -.055em; }
.monument-figure span { display: block; transform: translateY(108%);
  transition: transform 760ms cubic-bezier(.22,1,.36,1); }
.monument-note { max-width: 36ch; margin: 0; color: #4d574e;
  font-size: clamp(.92rem, 1.05vw, 1.06rem); line-height: 1.6;
  opacity: 0; transform: translateY(14px);
  transition: opacity 460ms ease, transform 620ms cubic-bezier(.22,1,.36,1); }

.monument-card.is-on .monument-figure span { transform: none; }
.monument-card.is-on .monument-note { opacity: 1; transform: none;
  transition-delay: 190ms, 190ms; }
.monument-card.was-above .monument-figure span { transform: translateY(-108%); }
.monument-card.was-below .monument-figure span { transform: translateY(108%); }
.monument-card.was-above .monument-note { opacity: 0; transform: translateY(-14px); }
.monument-card.was-below .monument-note { opacity: 0; transform: translateY(14px); }

@media (prefers-reduced-motion: reduce) {
  .monument-figure span, .monument-note { transition-duration: 1ms; }
  .monument-card:not(.is-on) .monument-figure span { transform: translateY(108%); }
}
.monument-stage.is-failed { height: 0; overflow: hidden; }
@media (max-width: 900px) { .monument-stage { height: 480vh; }
  /* text moves under the cathedral here, so the veil follows it */
  .monument-pin::after { background: linear-gradient(2deg, rgba(245,242,234,.94) 0%, rgba(245,242,234,.72) 26%, rgba(245,242,234,0) 52%); }
  .monument-marker { top: 5.5rem; left: 1.2rem; width: calc(100% - 2.4rem); }
  .monument-marker-line { max-width: 34ch; }
  .monument-caption { top: auto; bottom: 7vh; left: 1.2rem; width: calc(100% - 2.4rem); transform: none; }
  .monument-cards { min-height: clamp(10rem, 30vh, 14rem); }
  .monument-figure { margin-bottom: .85rem; font-size: clamp(2.1rem, 9.5vw, 3.4rem); }
  .monument-note { max-width: none; font-size: .95rem; } }
@media (prefers-reduced-motion: reduce) { .monument-stage { height: 100vh; } }
.human-handoff { padding: clamp(5rem, 8vw, 8rem) 0 clamp(5.5rem, 9vw, 8.5rem); color: var(--v2-ink); background: var(--v2-paper); }/* The 1050px cap left a quarter of the row empty on a wide screen while the
   composition below ran the full width, so the section looked lopsided. The
   intro now spans the same measure as the panels under it, and the
   description sits at the right where the reception panel begins. */
.handoff-intro { display: grid; grid-template-columns: minmax(360px, 1.15fr) minmax(280px, .85fr); gap: clamp(2rem, 7vw, 8rem); align-items: end; max-width: none; margin-bottom: clamp(2.4rem, 5vw, 4.5rem); }.handoff-heading .chapter-eyebrow { margin-bottom: 1.2rem; }.handoff-intro h2 { margin: 0; font: 500 clamp(2.8rem, 4.6vw, 5.2rem)/.96 var(--serif); letter-spacing: -.06em; }.handoff-intro > p { max-width: 370px; margin: 0 0 .25rem; color: var(--v2-muted); font-size: .95rem; line-height: 1.65; }
.handoff-composition { display: grid; grid-template-columns: minmax(235px, .72fr) 36px minmax(0, 1.28fr); gap: clamp(1rem, 2.5vw, 2.6rem); align-items: stretch; }.handoff-guest-view { display: flex; flex-direction: column; padding: 1.3rem; background: #fbfaf6; border: 1px solid #dedcd4; border-radius: 8px; }.handoff-panel-label { margin-bottom: 1.35rem; color: #88877f; font-size: .57rem; font-weight: 730; letter-spacing: .09em; text-transform: uppercase; }.handoff-guest-name { display: flex; gap: .6rem; align-items: center; }.handoff-guest-name strong, .handoff-guest-name small { display: block; }.handoff-guest-name strong { color: #353630; font-size: .73rem; }.handoff-guest-name small { margin-top: .13rem; color: #85847c; font-size: .58rem; }.handoff-guest-view blockquote { margin: 1.3rem 0; color: #3e403b; font: 500 clamp(1.25rem, 1.8vw, 1.7rem)/1.3 var(--serif); letter-spacing: -.025em; }.handoff-signals { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem .55rem; margin: auto 0 0; padding-top: 1rem; border-top: 1px solid #e2e0d9; }.handoff-signals dt { margin-bottom: .16rem; color: #95938b; font-size: .5rem; letter-spacing: .06em; text-transform: uppercase; }.handoff-signals dd { margin: 0; color: #54554f; font-size: .62rem; font-weight: 660; }
.handoff-bridge { position: relative; display: grid; min-height: 100%; place-items: center; }.handoff-bridge::before { width: 1px; height: 100%; content: ''; background: #d7d4ca; }.handoff-bridge span { position: absolute; width: 120px; padding: .42rem; color: #8f7a57; background: var(--v2-paper); font-size: .5rem; font-weight: 700; letter-spacing: .07em; line-height: 1.35; text-align: center; text-transform: uppercase; transform: rotate(-90deg); }
.reception-desk { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #d9d8d1; border-radius: 8px; box-shadow: var(--v2-shadow); }.reception-desk > header { display: flex; align-items: center; justify-content: space-between; min-height: 70px; padding: .9rem 1.1rem; border-bottom: 1px solid #e9e8e2; }.reception-desk header p, .reception-desk header h3 { margin: 0; }.reception-desk header p { margin-bottom: .16rem; color: #898881; font-size: .53rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.reception-desk header h3 { color: #31322e; font: 650 .88rem/1.1 var(--sans); }.handoff-status { padding: .32rem .48rem; color: #765d37; background: #f4efe4; border: 1px solid #e7d8bd; border-radius: 3px; font-size: .55rem; font-weight: 680; }.reception-brief { display: grid; gap: .9rem; padding: 1.1rem; }.reception-brief-guest { display: flex; gap: .6rem; align-items: center; }.reception-brief-guest strong, .reception-brief-guest small { display: block; }.reception-brief-guest strong { color: #363732; font-size: .7rem; }.reception-brief-guest small { margin-top: .12rem; color: #87867f; font-size: .58rem; }.reception-brief > dl { display: grid; gap: .62rem; margin: 0; }.reception-brief > dl div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: .65rem; }.reception-brief dt { color: #929188; font-size: .53rem; letter-spacing: .07em; text-transform: uppercase; }.reception-brief dd { margin: 0; color: #50514b; font-size: .64rem; font-weight: 620; }.ai-summary { padding: .76rem; background: #f4f5f1; border-left: 2px solid #79998f; }.ai-summary span { color: #66857b; font-size: .51rem; font-weight: 730; letter-spacing: .07em; text-transform: uppercase; }.ai-summary p { margin: .35rem 0 0; color: #4a514d; font-size: .67rem; line-height: 1.52; }.reception-actions { display: flex; gap: .55rem; margin-top: auto; padding: .85rem 1.1rem; border-top: 1px solid #e9e8e2; }.reception-action-primary, .reception-action-secondary { display: inline-flex; min-height: 35px; align-items: center; padding: .48rem .75rem; border-radius: 3px; font-size: .64rem; font-weight: 680; }.reception-action-primary { color: #f8f7f1; background: #252724; }.reception-action-secondary { color: #55564f; background: #fff; border: 1px solid #dcdad2; }

@media (max-width: 1040px) { .night-intro { grid-template-columns: minmax(130px, .38fr) minmax(310px, 1.05fr); }.night-intro > p:last-child { grid-column: 2; }.night-workspace { grid-template-columns: minmax(0, 1.2fr) minmax(180px, .72fr); }.night-log { grid-column: 1 / -1; border-top: 1px solid #303530; border-left: 0; }.night-log ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }.night-log li { grid-template-columns: 1fr; gap: .15rem; padding-bottom: 0; border-bottom: 0; }.handoff-composition { grid-template-columns: minmax(215px, .7fr) 28px minmax(0, 1.3fr); } }
@media (max-width: 860px) { .night-intro { grid-template-columns: 135px 1fr; }.night-intro > p:last-child { grid-column: 1 / -1; max-width: 550px; margin-left: 135px; }.night-workspace { display: block; }.night-intelligence, .night-log { border-top: 1px solid #303530; border-left: 0; }.night-intelligence dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }.night-confirmation { max-width: 300px; }.night-log ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }.handoff-intro { grid-template-columns: 1fr; gap: 1.4rem; }.handoff-intro > p { max-width: 560px; }.handoff-composition { grid-template-columns: minmax(220px, .72fr) 24px minmax(0, 1.28fr); } }
@media (max-width: 620px) { .night-operations { padding-block: 4.8rem; }.night-intro { grid-template-columns: 1fr; gap: 1.2rem; margin-bottom: 2.35rem; }.night-time-display { width: min(220px, 100%); padding-bottom: .65rem; }.night-time-display span { font-size: 4.4rem; }.night-intro > p:last-child { grid-column: auto; margin-left: 0; font-size: .9rem; }.night-intro h2 { font-size: clamp(2.65rem, 12.5vw, 3.5rem); }.night-demo { border-radius: 7px; }.night-console-header { grid-template-columns: 1fr auto; min-height: 48px; padding-inline: .75rem; }.night-console-state { display: none; }.night-workspace { display: block; }.night-guest-header { min-height: 68px; padding: .78rem; }.night-guest-header h3 { font-size: .82rem; }.night-guest-header > span { font-size: .5rem; }.night-thread { min-height: 330px; padding: 1rem .82rem; }.night-message { max-width: 92%; font-size: .67rem; }.night-intelligence, .night-log { padding-inline: .75rem; }.night-intelligence dl { grid-template-columns: 1fr; }.night-confirmation { max-width: none; }.night-log ol { grid-template-columns: 1fr 1fr; gap: .75rem .55rem; }.night-log li { grid-template-columns: 37px minmax(0, 1fr); gap: .42rem; padding-bottom: .55rem; border-bottom: 1px solid #2c302c; }.night-demo-summary { display: block; margin-top: 1.1rem; }.night-demo-summary > span { display: block; margin-bottom: .75rem; }.night-demo-summary dl { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem .7rem; }.night-demo-summary dl div:last-child { max-width: 130px; }.human-handoff { padding-block: 4.8rem; }.handoff-intro h2 { font-size: clamp(2.6rem, 12.5vw, 3.5rem); }.handoff-intro > p:last-child { font-size: .91rem; }.handoff-composition { display: block; }.handoff-guest-view { padding: 1.05rem; }.handoff-guest-view blockquote { font-size: 1.3rem; }.handoff-bridge { min-height: 50px; }.handoff-bridge::before { width: 100%; height: 1px; }.handoff-bridge span { width: auto; transform: none; }.reception-desk { border-radius: 7px; }.reception-desk > header { align-items: flex-start; flex-direction: column; gap: .55rem; }.reception-brief { padding: .9rem; }.reception-brief > dl div { grid-template-columns: 68px minmax(0, 1fr); }.reception-actions { padding: .75rem .9rem; }
}

/* Sections 04–07: the story resolves into working product proof and a clear
   hotel conversation. These surfaces intentionally become denser and use the
   sans-serif product language established in the interface. */
.product-section-eyebrow { margin: 0; color: var(--v2-brass); font-size: .62rem; font-weight: 760; letter-spacing: .15em; text-transform: uppercase; }
.demo-v2, .operating-layer, .implementation, .control-section, .final-cta { padding: clamp(4.5rem, 8vw, 7.7rem) 0; }
.demo-v2 { overflow: hidden; color: var(--v2-ink); background: #f1f0eb; border-top: 1px solid #e0dfd8; }
.demo-v2-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .36fr); gap: clamp(1.5rem, 8vw, 8rem); align-items: end; max-width: 1030px; }
.demo-v2-intro h2, .product-section-header h2, .control-intro h2, .final-cta h2 { margin: .7rem 0 0; color: var(--v2-ink); font: 620 clamp(2rem, 3.25vw, 3.35rem)/1.04 var(--sans); letter-spacing: -.055em; }
.demo-v2-copy { display: grid; gap: .75rem; padding-bottom: .15rem; }.demo-v2-copy > p { margin: 0; color: #4f504a; font-size: 1.05rem; font-weight: 580; }.demo-live-status { display: inline-flex; width: fit-content; gap: .42rem; align-items: center; color: #686861; font-size: .6rem; font-weight: 720; letter-spacing: .1em; text-transform: uppercase; }.demo-live-status i, .operating-state i, .live-artifact i { width: 6px; height: 6px; background: #87a89d; border-radius: 50%; }
.demo-v2-shell { width: min(800px, 100%); margin-top: clamp(2rem, 4vw, 3.3rem); }.demo-v2 .chat-widget { color: #373832; background: #fbfbf9; border: 1px solid #d9d8d1; border-radius: 8px; box-shadow: 0 24px 55px rgba(35, 37, 31, .12); }.demo-v2 .chat-header { min-height: 72px; padding: .92rem 1.05rem; background: #262825; border-bottom: 1px solid #3a3c37; }.demo-v2 .chat-avatar { border: 1px solid rgba(255,255,255,.15); box-shadow: none; }.demo-v2 .chat-header-info h4 { color: #f2f0e9; font: 650 .83rem/1.15 var(--sans); }.demo-v2 .chat-header-info span { margin-top: .22rem; color: #b7b7ae; font-size: .59rem; }.demo-v2 .chat-header-assurance { color: #b7b7ae; font-size: .59rem; }.demo-v2 .chat-header-assurance i { color: #c7aa79; }.demo-v2 .chat-header-action { color: #d0b98f; }
.demo-v2 .chat-messages { height: 390px; padding: 1.5rem clamp(1rem, 3vw, 1.65rem); background: #fbfbf9; }.demo-v2 .chat-msg { max-width: min(84%, 575px); padding: .8rem .9rem; color: #50514b; background: #f0efe9; border: 1px solid #e1e0da; border-radius: 5px; font-size: .78rem; line-height: 1.6; }.demo-v2 .chat-msg.ai { border-bottom-left-radius: 1px; }.demo-v2 .chat-msg.user { color: #f2f1eb; background: #353733; border-color: #353733; border-bottom-right-radius: 1px; }.demo-v2 .chat-msg-label { color: #90754a; font-size: .55rem; }.demo-v2 .chat-msg-time { color: #999990; }
.demo-prompt-starters { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; padding: .82rem 1.05rem; background: #f7f6f1; border-top: 1px solid #e5e4dd; }.demo-prompt-starters > span { margin-right: .12rem; color: #8d8c84; font-size: .55rem; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }.demo-prompt-starters button { min-height: 27px; padding: .38rem .57rem; color: #50514b; background: transparent; border: 1px solid #d9d7cf; border-radius: 3px; cursor: pointer; font: 600 .61rem/1.2 var(--sans); transition: color 160ms ease, border-color 160ms ease, background 160ms ease; }.demo-prompt-starters button:hover { color: #353630; background: #ecebe4; border-color: #bcbab0; }.demo-prompt-starters button:focus-visible { outline: 2px solid #a98a59; outline-offset: 2px; }
.demo-v2 .chat-input-area { padding: .85rem 1.05rem .9rem; background: #fbfbf9; }.demo-v2 .chat-input { min-height: 43px; color: #373832; background: #f3f2ed; border: 1px solid #e1e0d9; border-radius: 4px; }.demo-v2 .chat-input:focus { background: #fff; box-shadow: 0 0 0 3px rgba(169,138,89,.15); }.demo-v2 .chat-send { width: 43px; height: 43px; background: #343632; border-radius: 4px; }.demo-v2 .chat-send:hover { background: #4a4c46; }.demo-v2 .chat-footer-note { padding: 0 1.1rem 1rem; color: #7f7f77; background: #fbfbf9; font-size: .61rem; text-align: left; }

.operating-layer { color: var(--v2-ink); background: var(--v2-paper); border-top: 1px solid #e6e4de; }.product-section-header { display: grid; grid-template-columns: minmax(0, .82fr) minmax(260px, .5fr); gap: .7rem clamp(2rem, 7vw, 7rem); max-width: 1000px; }.product-section-header .product-section-eyebrow { grid-column: 1 / -1; }.product-section-header h2 { max-width: 530px; margin-top: 0; font-size: clamp(1.85rem, 3vw, 3rem); }.product-section-header > p:last-child { max-width: 360px; margin: .2rem 0 0; align-self: end; color: var(--v2-muted); font-size: .86rem; line-height: 1.65; }
.operating-layer .reveal, .implementation .reveal, .control-section .reveal, .final-cta .reveal { opacity: 1; transform: none; }
.operating-surface { display: grid; grid-template-columns: minmax(180px, .62fr) minmax(330px, 1.15fr) minmax(215px, .75fr); gap: 0; margin-top: clamp(2.2rem, 5vw, 4.4rem); overflow: hidden; background: #fcfcfa; border: 1px solid #dbdad3; border-radius: 7px; box-shadow: 0 17px 40px rgba(38,39,34,.075); }.operating-column { padding: .92rem; background: #f7f7f3; }.operating-channels { border-right: 1px solid #e3e2dc; }.operating-operations { border-left: 1px solid #e3e2dc; }.operating-column-heading { display: flex; justify-content: space-between; gap: .5rem; padding: .1rem .05rem .75rem; color: #86857e; border-bottom: 1px solid #e1e0da; font-size: .52rem; font-weight: 730; letter-spacing: .08em; text-transform: uppercase; }.operating-column-heading small { color: #aaa9a1; font-size: .49rem; font-weight: 630; }.operating-row { display: grid; grid-template-columns: 19px minmax(0, 1fr) auto; gap: .43rem; align-items: center; min-height: 62px; border-bottom: 1px solid #e5e4de; }.operating-row:last-child { border-bottom: 0; }.operating-mark { color: #ad8d5b; font-size: .51rem; font-variant-numeric: tabular-nums; }.operating-row strong, .operating-row small { display: block; }.operating-row strong { overflow: hidden; color: #4a4b45; font-size: .63rem; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }.operating-row small { margin-top: .12rem; overflow: hidden; color: #98978f; font-size: .53rem; text-overflow: ellipsis; white-space: nowrap; }.operating-row time { color: #86867f; font-size: .51rem; font-variant-numeric: tabular-nums; }
.operating-core { padding: .92rem; background: #fcfcfa; }.operating-core > header { display: flex; align-items: center; justify-content: space-between; gap: .7rem; min-height: 30px; padding: .1rem .05rem .75rem; border-bottom: 1px solid #e1e0da; }.operating-core-brand { color: #343630; font-size: .69rem; font-weight: 720; letter-spacing: -.01em; }.operating-state { display: inline-flex; gap: .38rem; align-items: center; color: #6f8079; font-size: .52rem; font-weight: 680; }.operating-core-request { display: grid; gap: .27rem; margin: .85rem 0 .78rem; padding: .73rem .78rem; background: #f4f2ec; border-left: 2px solid #b08d59; }.operating-core-request span { color: #8c7b60; font-size: .5rem; font-weight: 720; letter-spacing: .07em; text-transform: uppercase; }.operating-core-request strong { color: #44453f; font-size: .69rem; font-weight: 680; }.operating-core-request small { color: #7d7c75; font-size: .56rem; }.operating-capabilities { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid #e2e1da; border-left: 1px solid #e2e1da; }.operating-capabilities div { min-height: 84px; padding: .65rem; border-right: 1px solid #e2e1da; border-bottom: 1px solid #e2e1da; }.operating-capabilities dt { margin-bottom: .35rem; color: #aa8957; font-size: .5rem; font-variant-numeric: tabular-nums; }.operating-capabilities dd { margin: 0; color: #454640; font-size: .62rem; font-weight: 690; }.operating-capabilities span { display: block; margin-top: .17rem; color: #93928a; font-size: .53rem; line-height: 1.4; }

.implementation { color: var(--v2-ink); background: #f5f4ee; border-top: 1px solid #e2e1da; }.implementation-header { max-width: 960px; }.implementation-track { display: grid; margin: clamp(2.3rem, 5vw, 4.4rem) 0 0; padding: 0; list-style: none; border-top: 1px solid #d9d8d0; }.implementation-stage { display: grid; grid-template-columns: minmax(230px, .62fr) minmax(330px, 1fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; min-height: 164px; padding: clamp(1.35rem, 2.4vw, 2.05rem) 0; border-bottom: 1px solid #d9d8d0; }.implementation-stage-copy { position: relative; padding-left: 3.6rem; }.implementation-stage-copy > span { position: absolute; top: .08rem; left: 0; color: #ad8e5c; font-size: .61rem; font-weight: 730; letter-spacing: .08em; }.implementation-stage-copy h3 { margin: 0; color: #454640; font: 680 1rem/1.2 var(--sans); letter-spacing: -.02em; }.implementation-stage-copy p { max-width: 300px; margin: .45rem 0 0; color: #85847d; font-size: .72rem; line-height: 1.55; }.implementation-artifact { width: min(100%, 455px); justify-self: end; color: #53544d; background: #fbfbf8; border: 1px solid #dcdbd4; border-radius: 5px; box-shadow: 0 7px 16px rgba(49,50,44,.045); }.implementation-artifact > span { display: block; padding: .55rem .7rem; color: #898880; border-bottom: 1px solid #e4e3dd; font-size: .51rem; font-weight: 720; letter-spacing: .075em; text-transform: uppercase; }.knowledge-artifact ul { display: grid; gap: 0; margin: 0; padding: 0 .7rem; list-style: none; }.knowledge-artifact li { display: flex; justify-content: space-between; gap: .75rem; padding: .45rem 0; border-bottom: 1px solid #ecebe6; color: #5a5b54; font-size: .59rem; }.knowledge-artifact li:last-child { border-bottom: 0; }.knowledge-artifact b { color: #718a81; font-size: .52rem; font-weight: 690; }.config-artifact dl { margin: 0; padding: .15rem .7rem; }.config-artifact dl div { display: flex; justify-content: space-between; gap: .75rem; padding: .44rem 0; border-bottom: 1px solid #ecebe6; }.config-artifact dl div:last-child { border-bottom: 0; }.config-artifact dt { color: #5b5c55; font-size: .59rem; }.config-artifact dd { margin: 0; color: #8c7550; font-size: .56rem; font-weight: 680; }.review-artifact { padding-bottom: .7rem; }.review-artifact strong, .review-artifact p, .review-artifact b { display: block; margin-inline: .7rem; }.review-artifact strong { margin-top: .72rem; color: #4b4c46; font-size: .7rem; }.review-artifact p { margin-top: .26rem; color: #85847d; font-size: .58rem; }.review-artifact b { width: fit-content; margin-top: .58rem; padding: .32rem .45rem; color: #59746b; background: #ecf3ef; border: 1px solid #d7e5de; border-radius: 3px; font-size: .5rem; font-weight: 700; }.live-artifact { padding-bottom: .75rem; }.live-artifact > div { display: flex; gap: .42rem; align-items: center; margin: .7rem .7rem 0; }.live-artifact > div span { color: #5a756b; font-size: .59rem; font-weight: 690; }.live-artifact p { margin: .65rem .7rem .2rem; color: #85847d; font-size: .56rem; }.live-artifact strong { display: block; margin: 0 .7rem; color: #4b4c46; font-size: .65rem; }.live-artifact small { display: block; margin: .48rem .7rem 0; padding-top: .5rem; color: #908f87; border-top: 1px solid #e9e8e2; font-size: .52rem; }

.control-section { color: #eae9e1; background: #20231f; }.control-layout { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(370px, 1fr); gap: clamp(2rem, 9vw, 9rem); align-items: center; }.control-intro h2 { max-width: 500px; color: #f0eee7; font-size: clamp(2rem, 3.25vw, 3.3rem); }.control-intro .product-section-eyebrow { color: #c2a778; }.control-intro > p:last-child { max-width: 420px; margin: 1rem 0 0; color: #aeb0a7; font-size: .85rem; line-height: 1.65; }.control-panel { overflow: hidden; background: #272a26; border: 1px solid #3b3f39; border-radius: 6px; }.control-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 54px; padding: 0 .9rem; border-bottom: 1px solid #3b3f39; }.control-panel > header span { color: #edebe4; font-size: .66rem; font-weight: 700; }.control-panel > header small { color: #989b91; font-size: .52rem; letter-spacing: .06em; text-transform: uppercase; }.control-panel dl { margin: 0; }.control-panel dl div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; min-height: 58px; padding: .7rem .9rem; border-bottom: 1px solid #373b36; }.control-panel dt { color: #bfc0b7; font-size: .64rem; }.control-panel dd { margin: 0; padding: .26rem .4rem; color: #c9dfd5; background: #27342f; border: 1px solid #3e534b; border-radius: 3px; font-size: .54rem; font-weight: 670; text-align: right; }.control-panel dl div:nth-child(3) dd { color: #dbcaa8; background: #39342b; border-color: #574b38; }.control-panel > p { display: flex; gap: .45rem; align-items: center; margin: 0; padding: .8rem .9rem; color: #969990; font-size: .57rem; }.control-panel > p i { color: #c5a675; }

.final-cta { color: var(--v2-paper); background: #d8d1c2; }.final-cta-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(270px, .55fr); gap: clamp(2rem, 9vw, 9rem); align-items: end; }.final-cta .product-section-eyebrow { color: #786342; }.final-cta h2 { max-width: 610px; color: #30312d; font-size: clamp(2.2rem, 3.8vw, 4rem); }.final-cta-copy > p { max-width: 375px; margin: 0; color: #595a53; font-size: .89rem; line-height: 1.65; }.final-cta-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.35rem; }.final-cta-primary, .final-cta-secondary { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; gap: .6rem; padding: .65rem .82rem; border-radius: 4px; font-size: .68rem; font-weight: 700; text-decoration: none; transition: transform 130ms ease, background 160ms ease, color 160ms ease; }.final-cta-primary { color: #f8f7f1; background: #30322e; border: 1px solid #30322e; }.final-cta-primary:hover { background: #4a4c46; transform: translateY(-1px); }.final-cta-secondary { color: #484943; border: 1px solid #918a7d; }.final-cta-secondary:hover { background: rgba(255,255,255,.28); transform: translateY(-1px); }.final-cta-primary:focus-visible, .final-cta-secondary:focus-visible { outline: 3px solid #6c593a; outline-offset: 3px; }

footer { padding: 2.1rem 0; background: #20221f; border-top: 1px solid #3a3d37; }.footer-container { min-height: 38px; }.footer-logo { color: #e7e5dd; font: 620 1.06rem/1 var(--sans); }.footer-logo img { height: 34px !important; filter: none; }.footer-logo .gold-accent { color: #c4a878; }.footer-links { gap: .85rem 1.05rem; }.footer-links a { color: #aeb0a7; font-size: .65rem; }.footer-copy { color: #858880; font-size: .6rem; }

@media (max-width: 900px) { .demo-v2-intro, .product-section-header, .control-layout, .final-cta-layout { grid-template-columns: 1fr; gap: 1.05rem; }.demo-v2-copy { padding-bottom: 0; }.product-section-header > p:last-child { max-width: 560px; }.operating-surface { grid-template-columns: minmax(165px, .6fr) minmax(0, 1.1fr); }.operating-operations { grid-column: 1 / -1; border-top: 1px solid #e3e2dc; border-left: 0; }.operating-operations .operating-column-heading, .operating-operations .operating-row { grid-column: auto; }.operating-operations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .85rem; }.operating-operations .operating-column-heading { grid-column: 1 / -1; }.implementation-stage { grid-template-columns: minmax(205px, .58fr) minmax(290px, 1fr); gap: 2rem; }.control-panel { max-width: 680px; }.final-cta-copy > p { max-width: 490px; }.footer-container { align-items: center; flex-wrap: wrap; }.footer-copy { width: 100%; } }
@media (max-width: 620px) { .demo-v2, .operating-layer, .implementation, .control-section, .final-cta { padding-block: 4.6rem; }.demo-v2-intro h2, .product-section-header h2, .control-intro h2 { font-size: clamp(1.9rem, 9vw, 2.5rem); }.demo-v2-copy > p { font-size: .97rem; }.demo-v2-shell { margin-top: 2rem; }.demo-v2 .chat-widget { border-radius: 6px; }.demo-v2 .chat-header { min-height: 66px; padding: .82rem; }.demo-v2 .chat-header-assurance { display: none; }.demo-v2 .chat-messages { height: 360px; padding: 1rem .82rem; }.demo-v2 .chat-msg { max-width: 92%; font-size: .73rem; }.demo-prompt-starters { padding: .72rem .82rem; }.demo-prompt-starters > span { width: 100%; }.demo-v2 .chat-input-area { padding: .76rem .82rem .84rem; }.demo-v2 .chat-footer-note { padding: 0 .82rem .85rem; line-height: 1.45; }.operating-surface { display: block; margin-top: 2.1rem; border-radius: 6px; }.operating-column { padding: .78rem; }.operating-channels { border-right: 0; border-bottom: 1px solid #e3e2dc; }.operating-core { padding: .78rem; }.operating-operations { display: block; }.operating-operations { border-top: 1px solid #e3e2dc; }.operating-row { min-height: 56px; }.operating-capabilities div { min-height: 76px; padding: .55rem; }.implementation-track { margin-top: 2.15rem; }.implementation-stage { display: block; min-height: 0; padding: 1.25rem 0 1.35rem; }.implementation-stage-copy { padding-left: 3.25rem; }.implementation-stage-copy h3 { font-size: .96rem; }.implementation-stage-copy p { font-size: .7rem; }.implementation-artifact { width: 100%; margin-top: 1.15rem; }.control-layout { gap: 2rem; }.control-panel > header, .control-panel dl div, .control-panel > p { padding-inline: .75rem; }.control-panel dl div { grid-template-columns: minmax(0, 1fr); gap: .42rem; align-items: start; }.control-panel dd { justify-self: start; text-align: left; }.final-cta h2 { font-size: clamp(2.25rem, 11vw, 3.15rem); }.final-cta-actions { align-items: stretch; flex-direction: column; }.final-cta-primary, .final-cta-secondary { width: 100%; }.footer-container { align-items: flex-start; flex-direction: column; }.footer-logo { font-size: 1rem; }.footer-copy { width: auto; } }

.discovery-brief-link { margin: -.35rem 0 1rem; color: var(--muted); font-size: .68rem; line-height: 1.45; }.discovery-brief-link a { color: var(--navy); font-weight: 700; text-underline-offset: .2em; }.discovery-brief-link a:hover { color: var(--gold); }

/* ==========================================================================
   Hero — "an architect's notebook, for a Paris hotel"
   Asymmetric: the type block holds the left, a hand-drawn Eiffel Tower rises
   out of the right and bleeds past the top and side edges. Palette continues
   the Hotel Lumiere website inside the demo (cream / forest / gold) rather
   than inventing a second one, plus one deep ink for contrast.
   ========================================================================== */
:root {
  --lum-cream: #f4f0e7;
  --lum-cream-deep: #ece6d9;
  --lum-forest: #3e4c42;
  --lum-gold: #e4c48c;
  --lum-ink: #17201c;          /* the added deep tone */
  --lum-muted: #6b6f64;
}

.hero-v2 { padding: clamp(7.5rem, 11vw, 10.5rem) 0 clamp(3rem, 6vw, 5.5rem); color: var(--lum-ink); background: var(--lum-cream); }

/* The stage is deliberately uneven: 1.15fr against .85fr, and the figure
   column is allowed to overflow its track so the drawing breaks the grid. */
.hero-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(1rem, 3vw, 3rem); }

.hero-v2-content { max-width: none; margin: 0; text-align: left; }
.hero-v2 .hero-eyebrow { color: var(--lum-forest); font-size: .62rem; letter-spacing: .22em; }
.hero-v2 h1 { color: var(--lum-ink); font-size: clamp(2.8rem, 5.5vw, 5.5rem); font-weight: 500; letter-spacing: -.05em; line-height: .9; }
.hero-v2 h1 span:last-child { color: var(--lum-forest); }

/* The one deliberate oddity: a drawn gold rule under the second line, running
   slightly past the words. Delivered as a background image because i18n
   replaces the text of this span and would remove any child element. The
   sweep is hand-authored, the same wobble as the ink drawing. */
.hero-h1-under {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 20" preserveAspectRatio="none"><path d="M5 12 C 84 4, 168 17, 248 8 S 412 3, 515 11" fill="none" stroke="%23e4c48c" stroke-width="6" stroke-linecap="round"/></svg>');
  background-repeat: no-repeat;
  /* Anchored to the bottom of a padded box rather than a percentage: at narrow
     widths the tighter line-height put an 88% position through the middle of
     the glyphs, so the rule read as a strikethrough. */
  padding-bottom: .14em;
  background-position: left bottom;
  background-size: 0% .26em;
  transition: background-size 1100ms cubic-bezier(.37,.01,.2,1) 620ms;
}
.hero-h1-under.is-drawn { background-size: 104% .26em; }

.hero-v2 .hero-sub { max-width: 34rem; margin: 1.7rem 0 2.2rem; color: var(--lum-muted); }
.hero-v2-ctas { justify-content: flex-start; gap: .7rem; }
.hero-v2 .btn-primary { color: var(--lum-cream); background: var(--lum-ink); border-radius: 2px; }
.hero-v2 .btn-primary:hover { background: var(--lum-forest); }
.hero-v2 .btn-primary span { color: var(--lum-gold); }
.hero-v2 .btn-outline { color: var(--lum-ink); background: transparent; border: 1px solid rgba(62, 76, 66, .28); border-radius: 2px; }
.hero-v2 .btn-outline:hover { background: rgba(62, 76, 66, .06); }
.hero-v2 .btn-outline span { color: var(--lum-forest); }

/* --- the drawing ------------------------------------------------------- */
.hero-figure { position: relative; align-self: stretch; min-height: clamp(420px, 47vw, 620px); color: var(--lum-forest); }
.hero-tower {
  position: absolute; right: clamp(-1rem, 1vw, 3rem); bottom: 2%;
  width: auto; height: clamp(420px, 62vw, 860px);
  /* The viewBox is cropped to the drawing, so height drives the size now.
     It overshoots the top of the section on purpose and is cropped by the
     section's overflow: clip rather than sitting politely inside a box. */
  max-width: 46%;
}
/* The river sits behind and below the tower, the boat on the river -- three
   depths, which is what the parallax then separates. */
.hero-seine { position: absolute; right: 8%; bottom: -2%; width: clamp(380px, 52vw, 700px); height: auto; color: var(--lum-forest); opacity: .42; }
.hero-boat { position: absolute; right: 52%; bottom: 4%; width: clamp(78px, 8.5vw, 118px); height: auto; color: var(--lum-forest); opacity: .75; }
.hero-figure .ink { fill: none; stroke: currentColor; }

/* --- sparkle accents ---------------------------------------------------- */
.spark { position: absolute; display: block; width: 15px; height: 15px; opacity: .85; }
.spark svg { display: block; width: 100%; height: 100%; }
.spark svg path { fill: currentColor; stroke: currentColor; }
.spark--2 svg path, .spark--3 svg path, .spark--5 svg path { fill: none; }
.spark--1 { top: 7%;  right: 9%;  color: #d1543f; }
.spark--2 { top: 20%; right: 34%; width: 11px; height: 11px; color: #7b62c4; }
.spark--3 { top: 47%; right: 4%;  width: 12px; height: 12px; color: #b4813c; }
.spark--4 { top: 62%; right: 41%; width: 10px; height: 10px; color: #3f7d63; }
.spark--5 { top: 33%; right: 52%; width: 12px; height: 12px; color: #3f6d9e; }

/* Product mockup: nudged off-centre so the hero does not resolve into a
   tidy symmetrical stack. */
.hero-product { margin-top: clamp(2.5rem, 5vw, 4.5rem); margin-right: clamp(0rem, 4vw, 3.5rem); }

@media (max-width: 900px) {
  .hero-stage { grid-template-columns: 1fr; }
  .hero-v2-content { max-width: none; }
  .hero-figure { min-height: 300px; margin-top: 2rem; }
  .hero-tower { right: -1rem; bottom: 0; width: auto; height: min(52vh, 380px); max-width: 62%; }
  .hero-seine { right: -14%; bottom: 2%; width: 130%; opacity: .45; }
  .hero-boat { right: auto; left: 4%; bottom: 8%; width: 92px; }
  .hero-product { margin-right: 0; }
}

/* Sparkles twinkle on long, deliberately offset loops so they never pulse in
   unison -- synchronised blinking is the thing that reads as generated. */
@media (prefers-reduced-motion: no-preference) {
  .spark { animation: sparkTwinkle 7s ease-in-out infinite; }
  .spark--2 { animation-duration: 9.5s;  animation-delay: -2.2s; }
  .spark--3 { animation-duration: 11s;   animation-delay: -5.6s; }
  .spark--4 { animation-duration: 8.2s;  animation-delay: -3.9s; }
  .spark--5 { animation-duration: 12.4s; animation-delay: -7.1s; }
}
@keyframes sparkTwinkle {
  0%, 62%, 100% { opacity: .28; transform: scale(.82) rotate(0deg); }
  74%           { opacity: .95; transform: scale(1.12) rotate(6deg); }
  86%           { opacity: .5;  transform: scale(.94) rotate(-3deg); }
}


/* --- hand-authored icons (Font Awesome removed) --------------------------- */
.ico { display: inline-block; width: 1em; height: 1em; vertical-align: -.13em; flex: 0 0 auto; }
button .ico, a .ico { pointer-events: none; }
/* The fullscreen control carries both glyphs; the button's state picks one, so
   no script has to reach inside the SVG. */
.ico--compress { display: none; }
.is-expanded .ico--expand { display: none; }
.is-expanded .ico--compress { display: inline-block; }

/* Fraunces is a variable serif: push the optical size to the display cut so the
   contrast is high and the letterforms keep their quirk at large sizes. */
.hero-v2 h1, .section-title { font-variation-settings: 'opsz' 132, 'SOFT' 0; }
.hero-v2 h1 { font-weight: 380; }

/* Hero conversation playback. The authored markup is the finished state, so
   these rules only apply once the script has taken over (.hp-step is added by
   JS); with no JS, or under reduced motion, the thread renders complete. */
.hp-step { opacity: 0; transform: translateY(7px); transition: opacity 420ms var(--ease-out, ease), transform 420ms var(--ease-out, ease); }
.hp-step.is-shown { opacity: 1; transform: none; }
#hero .conversation-thread { transition: min-height 260ms ease; }
#hero .product-message p { min-height: 1.4em; }

/* Thinking indicator: three dots on offset delays, so it reads as considering
   rather than as a progress bar. */
#hero .request-processing span[aria-hidden]::after {
  content: '';
  display: inline-block; width: 3px; height: 3px; margin-left: 5px;
  border-radius: 50%; background: currentColor;
  box-shadow: 6px 0 0 currentColor, 12px 0 0 currentColor;
  animation: hpThink 1.15s ease-in-out infinite;
}
@keyframes hpThink { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  .hp-step { opacity: 1; transform: none; }
  #hero .request-processing span[aria-hidden]::after { animation: none; opacity: .6; }
}

.footer-credit { display: block; margin-top: .7rem; max-width: 62ch; opacity: .62;
  font-size: .68rem; line-height: 1.55; }
.footer-credit a { color: inherit; text-underline-offset: 2px; }

/* ── Hero carrying the WebGL Champ de Mars ───────────────────────────────
   The dusk run is a pinned child of #hero rather than the section itself, so
   the section drops its own top padding and the pin's container carries the
   nav clearance instead. That clearance still applies when WebGL is missing
   and the pin collapses to normal flow, so the fallback hero is never tucked
   under the navigation. Do not put overflow-x:hidden on #hero or any wrapper
   around it -- that makes the ancestor a scroll container and the pin silently
   stops sticking. (`overflow: clip`, which .hero-v2 already uses, is safe.) */
.hero-v2.has-scene { padding-top: 0; }
.hero-scene-pin > .hero-v2-container {
  display: flex; height: 100%; align-items: center;
  padding-top: clamp(5.5rem, 11vh, 8rem); }
.hero-scene-pin > .hero-v2-container > .hero-stage { width: 100%; }
/* The preview rises over the last of the dusk run instead of starting below
   it: with a gap, the moment the pin released was a band of empty paper. */
.hero-v2.has-scene { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
#hero > .hero-v2-container, #hero > .hero-slow { position: relative; z-index: 3; }
.hero-v2.has-scene .hero-product { margin-top: calc(-1 * clamp(7rem, 16vh, 11rem)); }

@media (prefers-reduced-motion: reduce) {
  /* the pin collapses, so the container spaces itself like an ordinary hero */
  .hero-scene-pin > .hero-v2-container { height: auto;
    padding-block: clamp(6rem, 12vh, 9rem) clamp(2.5rem, 5vw, 4.5rem); }
}

/* The second headline line carries the paper hero's forest green and its own
   drawn gold rule as a background image. On the dusk scene the green is all but
   invisible, so invert the text; the gold rule underneath still reads. */
/* mirrors the shape of the rule it overrides (.hero-v2 h1 span:last-child,
   which is more specific than a plain .hero--scene class selector) */
.hero-v2 .hero--scene h1 span:last-child { color: #FBF8F1; }

/* ── Hero copy, written by the build ─────────────────────────────────────
   .is-sync is added by script only, so the resting state (visible, set in
   eiffel-hero.css) still stands with no JS. Each line then waits for the
   tower to reach its stage. Specificity here has to clear eiffel-hero.css's
   `.hero--scene .hero-eyebrow { opacity: 1 }` (0,2,0), which loads after this
   file -- hence the doubled class on the scene. */
.hero--scene.is-sync .hero-eyebrow,
.hero--scene.is-sync h1 span,
.hero--scene.is-sync .hero-sub,
.hero--scene.is-sync .hero-ctas {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 620ms ease, transform 880ms cubic-bezier(.22, 1, .36, 1);
}
.hero--scene.is-sync .is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero--scene.is-sync .hero-eyebrow,
  .hero--scene.is-sync h1 span,
  .hero--scene.is-sync .hero-sub,
  .hero--scene.is-sync .hero-ctas { opacity: 1; transform: none; transition: none; }
}

/* ── Sections stack, the way ellipsus.com moves ──────────────────────────
   Each section sticks to the top of the viewport and the next one slides up
   and covers it, instead of everything scrolling past together. The covered
   section does not move, so the page reads as a deck of screens being dealt
   rather than one long strip -- which is the "a page pops up on top of the
   other one" idea.

   Requirements this relies on:
   - every stacked section is opaque, or you would see through to the one
     underneath (checked: all nine have solid backgrounds);
   - later siblings paint over earlier ones, which sticky gives for free since
     it makes them positioned, so no z-index ladder is needed;
   - #hero and #handoff-monument are NOT in the stack. Both already contain a
     position:sticky pin of their own, and nesting sticky inside sticky does
     not behave. They stay in normal flow and the stack resumes after them.

   min-height fills the screen so each section is a full "page" before the
   next covers it -- several are only half a viewport tall on their own -- and
   align-content centres the contents in the space that creates. */
.deck { position: relative; z-index: 1; }

#platform, #chapter-prearrival {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  align-content: center;
  box-shadow: 0 -22px 55px rgba(18, 22, 18, .13);
  transform-origin: 50% 0;
  will-change: transform;

  /* The hold. A section stuck at the top is covered the moment the next one
     reaches the bottom of the screen, and with both exactly one viewport tall
     that is immediately -- so you never got to read one before the next took
     it. This margin is flow space after the section during which it stays
     stuck and nothing else has arrived yet: time to actually read it. */
  margin-bottom: 92vh;
}

/* One modest leading edge for all of them. The wide elliptical arc produced a
   black scythe-shaped sliver wherever a dark section was the one being covered:
   the curve exposed the section beneath through its corners, and against a pale
   ground that read as a stray black shape floating over the page. Variety comes
   from how the contents arrive instead, which is where it belongs. */
/* The last card in the deck has nothing coming to cover it, and a sticky
   element can never enter its own margin: the hold margin just scrolled away
   and left most of a screen of empty paper before Notre-Dame. Its hold is a
   spacer it stays pinned over instead. */
#chapter-prearrival { margin-bottom: 0; }
.deck::after { content: ""; display: block; height: 55vh; }

#platform, #chapter-prearrival {
  border-top-left-radius: clamp(16px, 2.2vw, 34px);
  border-top-right-radius: clamp(16px, 2.2vw, 34px);
}

/* The closing call and the footer are one body. Left in the deck, #discovery
   locked to the top while the footer scrolled up underneath it, which is what
   made the end of the page feel broken. Out of the deck they travel together
   and the page simply ends. */
#discovery {
  /* Was `position: static` to take it out of the deck. The deck no longer
     claims it, and static is now actively wrong: it drops the closing call
     into the block layer underneath the fixed backdrop, so its own paper
     background is hidden and the Arc shows through its type. */
  position: relative;
  z-index: 1;
  min-height: 0;
  margin-bottom: 0;
  box-shadow: none;
  border-radius: 0;
  transform: none;
  filter: none;
}

/* The footer is the last thing dealt. Without a position it would sit in the
   block layer, underneath every positioned section, and be covered by them. */
body > footer { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  /* no deck, just a page */
  #platform, #chapter-prearrival, #night-operations, #human-handoff,
  #demo, #operating-layer, #implementation, #control, #discovery {
    position: static;
    min-height: 0;
    margin-bottom: 0;
    display: block;
    box-shadow: none;
    border-radius: 0;
    transform: none !important;
    filter: none !important;
  }
}

/* ── Language ────────────────────────────────────────────────────────────
   Three boxed buttons in a bordered pill is the default segmented control
   every generated page ships with, and it read as exactly that. This is the
   same three choices set as type: small caps, hairline separators, the active
   one in brass over a drawn rule. Nothing but the letters and a mark. */
.locale-switcher {
  display: inline-flex; align-items: baseline; gap: 0;
  padding: 0; border: 0; border-radius: 0; background: none;
}
.locale-switcher button {
  position: relative;
  min-width: 0; min-height: 0;
  padding: .1rem .52rem;
  color: var(--v2-muted); background: none; border: 0; border-radius: 0;
  font: 700 .58rem/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  transition: color 200ms ease;
}
.locale-switcher button + button { box-shadow: inset 1px 0 0 var(--v2-line); }
.locale-switcher button:hover { color: var(--v2-ink); background: none; }
.locale-switcher button.is-active { color: var(--v2-brass); background: none; }
/* the drawn rule under the live language, in the brass of the eyebrows */
.locale-switcher button.is-active::after {
  content: ""; position: absolute; left: .52rem; right: .52rem; bottom: -.34rem;
  height: 1.5px; background: var(--v2-brass);
}
.locale-switcher button:focus-visible { outline: 2px solid var(--v2-brass); outline-offset: 3px; }

/* on the dusk hero the same control has to sit on a dark ground */
.hero--scene .locale-switcher button { color: rgba(237,233,222,.62); }
.hero--scene .locale-switcher button + button { box-shadow: inset 1px 0 0 rgba(237,233,222,.24); }
.hero--scene .locale-switcher button.is-active { color: var(--lum-gold, #E4C48C); }
.hero--scene .locale-switcher button.is-active::after { background: var(--lum-gold, #E4C48C); }


/* ═══ The monument run ══════════════════════════════════════════════════════
   Everything after the deck scrolls normally again, over a monument standing
   behind the page. Two mechanics, one page: cards for the opening chapters,
   depth for the middle. Repeating the card trick eight times is what made the
   middle of the page feel like the same slide over and over.

   backdrop.js inserts the canvas. Until it does -- and for good if WebGL is
   missing, the model 404s or reduced motion is on -- .backdrop stays empty and
   the run keeps the opaque fallback backgrounds below, so the page is never
   waiting on a decorative layer to become readable. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  /* Daylight. The canvas over this is transparent, so this IS the sky the
     Arc stands in -- the same arrangement the cathedral's pin uses, and the
     reason that one reads as part of the page rather than a dark window cut
     into it. */
  background: linear-gradient(#A9C6DD 0%, #C6D8E3 34%, #E4E0D4 68%, var(--v2-paper) 100%);
  transition: opacity 900ms ease;
}
.backdrop.is-ready.is-live { opacity: 1; }
.backdrop-canvas { display: block; width: 100%; height: 100%; }

/* A veil in the page's own dusk, over the whole layer. It does two jobs: it
   pulls the monument's photographed stone into the same palette as everything
   else, so it reads as part of the page rather than a photograph pasted behind
   it; and it buys back the contrast the glass gives away, which is what lets
   the panes stay transparent enough to actually see through. */
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  /* A pale veil, not a shroud. It exists only to keep the panes' contrast
     honest where the sky behind them is brightest -- the monument is meant
     to be plainly visible turning behind them, and the old dark scrim left
     it a smudge nobody would notice moving. */
  background:
    linear-gradient(180deg, rgba(245, 242, 234, .32) 0%, rgba(245, 242, 234, 0) 34%,
                            rgba(245, 242, 234, 0) 74%, rgba(245, 242, 234, .40) 100%);
}

/* Every section has to be positioned now, not just the ones over the monument.
   The backdrop is a fixed layer at z-index 0, and an unpositioned element sits
   in the block layer BENEATH that -- which is what put the closing call behind
   the Arc with its own background hidden and its type unreadable. The ID rules
   above still win for `position` on the two deck sections, so this only picks
   up the ones that had no position of their own. */
body > section,
.arc-run-track > section {
  position: relative;
  z-index: 1;
}

/* With the backdrop live the section itself steps out of the way entirely --
   the monument is seen full-bleed in the margins -- and the content sits on a
   pane of glass instead. Scoped to html.has-backdrop so that if the layer
   never arrives, every one of these keeps the solid background it had. */
html.has-backdrop #night-operations,
html.has-backdrop #demo,
html.has-backdrop #operating-layer,
html.has-backdrop #implementation,
html.has-backdrop #control {
  background: transparent;
  border-top: 0;
}

/* The pane. Two variants, because the run carries light type in two of the
   five sections and dark type in the other three: the glass has to be
   darker than the type it holds or lighter than it, never in between. */
html.has-backdrop #night-operations > .container,
html.has-backdrop #demo > .container,
html.has-backdrop #operating-layer > .container,
html.has-backdrop #implementation > .container,
html.has-backdrop #control > .container {
  position: relative;
  /* Narrower than the page's own measure. The point of the run is the
     monument, and a pane that reaches the edges leaves it visible only as two
     slivers down the sides -- which is not depth, it is a border. */
  width: min(1040px, 100% - 7rem);
  padding: clamp(2rem, 4vw, 3.6rem) clamp(1.35rem, 3.4vw, 3.2rem);
  border-radius: clamp(14px, 1.6vw, 22px);
  -webkit-backdrop-filter: blur(9px) saturate(118%);
          backdrop-filter: blur(9px) saturate(118%);
  box-shadow: 0 34px 80px rgba(40, 44, 52, .22), 0 1px 0 rgba(255, 255, 255, .5) inset;
}

/* dark panes: the two sections that carry light type */
html.has-backdrop #night-operations > .container,
html.has-backdrop #control > .container {
  background: rgba(16, 19, 18, .82);
  border: 1px solid rgba(255, 255, 255, .085);
}

/* light panes */
html.has-backdrop #demo > .container,
html.has-backdrop #operating-layer > .container,
html.has-backdrop #implementation > .container {
  background: rgba(250, 249, 245, .8);
  border: 1px solid rgba(255, 255, 255, .5);
}

/* The panes want air around them, and the run wants to read as one passage
   rather than five stacked boxes, so the padding moves off the section and
   on to the glass and the gap between them stays even. */
html.has-backdrop #night-operations,
html.has-backdrop #demo,
html.has-backdrop #operating-layer,
html.has-backdrop #implementation,
html.has-backdrop #control {
  /* Air between the panes, so the monument is seen whole in the gaps -- and
     so a section is finished before the next is on screen. At the old
     spacing the operating layer was still being read while implementation
     was already climbing over the bottom of the window, which is the
     complaint about a slide "not even done". */
  padding: clamp(5.5rem, 13vw, 15rem) 0;
}

/* .demo-v2 clips its own overflow, which would cut the glass corners off. */
html.has-backdrop #demo { overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  .backdrop { display: none; }
}

/* Notre-Dame into chapter 02. The paper section used to arrive as a hard-edged
   slab across the cathedral. Its top now dissolves: a tall veil in the paper
   colour runs up over the end of the monument run, so the stone fades into the
   page instead of being cut by it. */
#human-handoff { position: relative; z-index: 2; }
#human-handoff::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: 42vh;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(247, 245, 240, 0) 0%,
    rgba(247, 245, 240, .18) 30%,
    rgba(247, 245, 240, .62) 65%,
    var(--v2-paper, #f7f5f0) 100%);
}
@media (prefers-reduced-motion: reduce) { #human-handoff::before { display: none; } }

/* ── The story beside the hero preview ─────────────────────────────────────
   An editorial index rather than a progress widget: numbered rows on hairline
   rules. The row the reader has scrolled to opens and takes the ink; rows
   already passed stay legible; rows ahead wait in grey. Driven by scroll
   position (script.js), so it moves exactly as fast as the reader does. */
.hero-story {
  align-self: center;
  padding: clamp(1rem, 3vw, 2.5rem) 0 clamp(1rem, 3vw, 2.5rem) clamp(0rem, 1.5vw, 1.25rem);
  color: var(--lum-ink, #1f2a24);
}
/* Clear of the dusk run the preview overlaps, so dark type never sits on it. */
.hero-v2.has-scene .hero-story { margin-top: clamp(4rem, 12vh, 9rem); }
.hero-story-eyebrow { margin: 0 0 1rem; color: #93713f; font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.hero-story-title { margin: 0 0 clamp(1.8rem, 3.2vw, 2.6rem); max-width: 16ch;
  font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3vw, 3rem); line-height: 1; letter-spacing: -.04em; }

.hero-story-steps { margin: 0; padding: 0; list-style: none; counter-reset: story;
  border-top: 1px solid rgba(31, 42, 36, .12); }
.hero-story-steps li { position: relative; display: grid; grid-template-columns: 3.4rem 1fr; align-items: baseline;
  padding: 1.05rem 0; border-bottom: 1px solid rgba(31, 42, 36, .12); }
.hero-story-steps li::before { counter-increment: story; content: counter(story, decimal-leading-zero);
  font-family: var(--serif); font-size: 1.35rem; font-weight: 400; line-height: 1; letter-spacing: -.02em;
  color: rgba(31, 42, 36, .22); transition: color 500ms ease; }
/* the rule under the open row draws itself in brass */
.hero-story-steps li::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: #93713f; transition: width 900ms cubic-bezier(.22, 1, .36, 1); }
.hero-story-steps strong { display: block; font-size: 1rem; font-weight: 560; line-height: 1.3; letter-spacing: -.005em;
  color: rgba(31, 42, 36, .38); transition: color 500ms ease; }
.hero-story-steps p { margin: 0; max-width: 36ch; color: var(--lum-muted, #5f6660); font-size: .9rem; line-height: 1.55;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 600ms cubic-bezier(.22, 1, .36, 1), opacity 450ms ease, margin 600ms cubic-bezier(.22, 1, .36, 1); }

.hero-story-steps li.is-past::before { color: rgba(31, 42, 36, .5); }
.hero-story-steps li.is-past strong { color: rgba(31, 42, 36, .72); }
.hero-story-steps li.is-active::before { color: #93713f; }
.hero-story-steps li.is-active strong { color: var(--lum-ink, #1f2a24); }
.hero-story-steps li.is-active p { max-height: 6rem; opacity: 1; margin-top: .4rem; }
.hero-story-steps li.is-active::after { width: 100%; }

.hero-story-foot { margin: 1.3rem 0 0; color: rgba(31, 42, 36, .55); font-size: .78rem; letter-spacing: .01em; }

@media (max-width: 900px) {
  .hero-v2.has-scene .hero-story { margin-top: 2.5rem; }
}
/* Without motion, or without the script, every row is simply open. */
@media (prefers-reduced-motion: reduce) {
  .hero-story-steps strong { color: var(--lum-ink, #1f2a24); }
  .hero-story-steps p { max-height: none; opacity: 1; margin-top: .4rem; transition: none; }
}
.hero-story:not(.is-driven) .hero-story-steps strong { color: var(--lum-ink, #1f2a24); }
.hero-story:not(.is-driven) .hero-story-steps p { max-height: none; opacity: 1; margin-top: .4rem; }

/* ── Phones: hero and cathedral ──────────────────────────────────────────── */
@media (max-width: 760px) {
  /* copy at the top of the screen, the tower under it */
  .hero-scene-pin > .hero-v2-container { align-items: flex-start; padding-top: 5.6rem; }
  .hero-v2 h1 { font-size: clamp(2.5rem, 11vw, 3.2rem); }
  .hero-v2 .hero-sub { font-size: .98rem; margin: 1.1rem 0 1.5rem; }
  .hero-v2-ctas { flex-wrap: wrap; }
  /* On a phone the hero copy ends at the bottom of the run, so a preview
     pulled up over the run lands on the buttons. It starts below instead. */
  .hero-v2.has-scene .hero-product { margin-top: 2.25rem; }
  .hero-v2.has-scene .hero-story { margin-top: 2.25rem; }
  /* 480vh of turning cathedral is most of a minute of thumb on a phone */
  .monument-stage { height: 320vh; }
}

/* ── Phones: the Arc run ──────────────────────────────────────────────────
   The desktop pane leaves the monument visible in wide margins. A phone has
   no margins to give, so the pane takes nearly the full width and the Arc is
   seen in the open space between slides instead. */
@media (max-width: 760px) {
  html.has-backdrop #night-operations,
  html.has-backdrop #demo,
  html.has-backdrop #operating-layer,
  html.has-backdrop #implementation,
  html.has-backdrop #control { padding: 24vh 0; }

  html.has-backdrop #night-operations > .container,
  html.has-backdrop #demo > .container,
  html.has-backdrop #operating-layer > .container,
  html.has-backdrop #implementation > .container,
  html.has-backdrop #control > .container {
    width: calc(100% - 1.5rem);
    padding: 1.7rem 1.15rem;
    border-radius: 16px;
    -webkit-backdrop-filter: blur(6px) saturate(115%);
            backdrop-filter: blur(6px) saturate(115%);
    box-shadow: 0 18px 44px rgba(40, 44, 52, .2), 0 1px 0 rgba(255, 255, 255, .5) inset;
  }
}

/* ── The Arc run, slowed ───────────────────────────────────────────────────
   arc-run.js adds .is-slow, sets the run's height and moves the track. The
   pin clips rather than scrolls (overflow: clip), so focusing the demo input
   can never scroll the window's contents out from under the transform. */
.arc-run { position: relative; z-index: 1; overflow-anchor: none; }
.arc-run.is-slow > .arc-run-pin { position: sticky; top: 0; height: 100vh; overflow: clip; }
.arc-run.is-slow .arc-run-track { will-change: transform; }

/* The hero preview's slowed run. The card still rises over the end of the
   dusk run; the overlap now belongs to the wrapper, because the pinned window
   clips anything pulled above its own top. Phones keep their plain gap. */
#hero > .hero-slow.is-slow { margin-top: calc(-1 * clamp(7rem, 16vh, 11rem)); }
#hero > .hero-slow.is-slow .hero-product { margin-top: 0; }
@media (max-width: 760px) {
  #hero > .hero-slow.is-slow { margin-top: 0; }
  #hero > .hero-slow.is-slow .hero-product { margin-top: 2.25rem; }
}

/* ---------------------------------------------------------------------------
   Pilot offer, About and FAQ (index.html, BUILD:home-sections). Solid paper
   sections after the Arc run, in the same type scale as the product sections.
   --------------------------------------------------------------------------- */
.pilot-section, .about-section, .faq-section { position: relative; padding: clamp(4.5rem, 8vw, 7.7rem) 0; color: var(--v2-ink); }
.pilot-section { background: var(--v2-paper); border-top: 1px solid #e6e4de; }
.about-section { background: #efece4; border-top: 1px solid #e2dfd6; }
.faq-section { background: var(--v2-paper); border-top: 1px solid #e6e4de; }
.pilot-section h2, .about-section h2, .faq-section h2 { margin: .7rem 0 0; color: var(--v2-ink); font: 620 clamp(1.85rem, 3vw, 3rem)/1.06 var(--sans); letter-spacing: -.055em; }

.pilot-intro { max-width: 640px; }
.pilot-lead { max-width: 560px; margin: 1rem 0 0; color: var(--v2-muted); font-size: .9rem; line-height: 1.65; }
.pilot-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 390px); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; margin-top: clamp(2.3rem, 5vw, 4rem); }
.pilot-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid #d9d8d0; }
.pilot-steps li { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); padding: clamp(1.25rem, 2.2vw, 1.8rem) 0; border-bottom: 1px solid #d9d8d0; }
.pilot-steps li > span { padding-top: .12rem; color: #ad8e5c; font-size: .61rem; font-weight: 730; letter-spacing: .08em; }
.pilot-steps h3 { margin: 0; color: #3f403b; font: 680 1.02rem/1.25 var(--sans); letter-spacing: -.02em; }
.pilot-steps p { max-width: 460px; margin: .45rem 0 0; color: #7b7a73; font-size: .8rem; line-height: 1.6; }
.pilot-card { padding: clamp(1.3rem, 2.4vw, 1.8rem); background: var(--v2-surface); border: 1px solid #dcdbd4; border-radius: 8px; box-shadow: var(--v2-shadow); }
.pilot-card h3 { margin: 0; color: #8c7550; font-size: .62rem; font-weight: 740; letter-spacing: .12em; text-transform: uppercase; }
.pilot-card ul { display: grid; gap: .7rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.pilot-card li { display: grid; grid-template-columns: 1.15rem minmax(0, 1fr); gap: .55rem; color: #45463f; font-size: .8rem; line-height: 1.5; }
.pilot-card li .ico { width: 1.05rem; height: 1.05rem; margin-top: .1rem; color: var(--v2-system); }
.pilot-card dl { margin: 1.3rem 0 0; padding-top: 1.1rem; border-top: 1px solid #e9e8e2; }
.pilot-card dt { color: #898880; font-size: .58rem; font-weight: 720; letter-spacing: .1em; text-transform: uppercase; }
.pilot-card dd { margin: .35rem 0 0; color: #3f403b; font-size: .82rem; line-height: 1.55; }
.pilot-cta, .about-links a { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; gap: .6rem; padding: .65rem .9rem; border-radius: 4px; font-size: .7rem; font-weight: 700; text-decoration: none; transition: transform 130ms ease, background 160ms ease, color 160ms ease; }
.pilot-cta { width: 100%; margin-top: 1.3rem; color: #f8f7f1; background: #30322e; border: 1px solid #30322e; }
.pilot-cta:hover { background: #4a4c46; transform: translateY(-1px); }

.about-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(2rem, 7vw, 6.5rem); align-items: start; }
.about-intro { max-width: 460px; }
.about-person { display: grid; gap: .15rem; margin: 1.6rem 0 0; padding-top: 1.1rem; border-top: 1px solid #d9d6cc; }
.about-person strong { color: var(--v2-ink); font-size: .98rem; font-weight: 700; letter-spacing: -.01em; }
.about-person span { color: #7b7a73; font-size: .76rem; }
.about-languages { margin: .9rem 0 0; color: #8c7550; font-size: .74rem; font-weight: 650; }
.about-copy { max-width: 600px; padding-top: .35rem; }
.about-copy > p { margin: 0 0 1.1rem; color: #55564f; font-size: .95rem; line-height: 1.75; }
.about-copy > p:first-child { color: #3f403b; font-size: 1.08rem; line-height: 1.65; }
.about-links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.about-links a { color: #484943; border: 1px solid #a39c8f; }
.about-links a:first-child { color: #f8f7f1; background: #30322e; border-color: #30322e; }
.about-links a:hover { transform: translateY(-1px); }

.faq-layout { display: grid; grid-template-columns: minmax(220px, .6fr) minmax(0, 1fr); gap: clamp(2rem, 7vw, 6.5rem); align-items: start; }
.faq-intro { position: sticky; top: 6rem; }
.faq-list { border-top: 1px solid #d9d8d0; }
.faq-item { border-bottom: 1px solid #d9d8d0; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.15rem 0; color: #33342f; font-size: .95rem; font-weight: 650; letter-spacing: -.01em; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { position: relative; flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; border: 1px solid #cfccc2; border-radius: 50%; transition: transform 200ms var(--ease-out), background 160ms ease; }
.faq-item summary i::before, .faq-item summary i::after { content: ''; position: absolute; top: 50%; left: 50%; width: .56rem; height: 1.5px; background: #8c7550; transform: translate(-50%, -50%); }
.faq-item summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: opacity 160ms ease; }
.faq-item[open] summary i { background: #efe8da; transform: rotate(180deg); }
.faq-item[open] summary i::after { opacity: 0; }
.faq-item summary:hover { color: #000; }
.faq-item summary:focus-visible, .pilot-cta:focus-visible, .about-links a:focus-visible { outline: 3px solid #6c593a; outline-offset: 3px; }
.faq-item p { max-width: 620px; margin: -.2rem 0 1.25rem; padding-right: 2.7rem; color: #6a6a63; font-size: .84rem; line-height: 1.7; }
.faq-item p a { color: #8c7550; }

@media (max-width: 900px) {
  .pilot-layout, .about-layout, .faq-layout { grid-template-columns: 1fr; }
  .pilot-card { max-width: 560px; }
  .faq-intro { position: static; }
}
@media (max-width: 620px) {
  .pilot-section, .about-section, .faq-section { padding-block: 4.6rem; }
  .pilot-section h2, .about-section h2, .faq-section h2 { font-size: clamp(1.9rem, 9vw, 2.5rem); }
  .pilot-steps li { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .pilot-steps p, .pilot-card li { font-size: .86rem; }
  .about-layout { gap: 1.8rem; }
  .about-copy > p:first-child { font-size: 1rem; }
  .about-links { flex-direction: column; align-items: stretch; }
  .faq-item summary { font-size: .95rem; }
  .faq-item p { padding-right: 0; font-size: .9rem; }
}

/* Phones: elements that slide in from the side (motion.js) used to count as
   page width, so the phone laid the page out wider than the screen and cut
   off its right edge -- the Menu button included. `clip` hides the sideways
   excess without making each section a scroll container, so the pinned
   scenes keep working. Desktop is unchanged. */
@media (max-width: 760px) {
  body > * { overflow-x: clip; }
}
/* Small phones: logo, language switch and Menu need 364px with the desktop
   spacing; tighten it so Menu is never cut off. */
@media (max-width: 400px) {
  .site-nav .nav-container { gap: .55rem; }
}
@media (max-width: 340px) {
  .site-nav .brand { gap: .35rem; font-size: .92rem; }
  .site-nav .brand img { width: 24px; height: 24px; }
}