/*
 * LORAtech Corporate Design — Variant A: Warm Luxury Hospitality
 *
 * This final visual layer intentionally keeps the existing information
 * architecture, copy, imagery and motion logic unchanged. It consolidates the
 * active brand palette and typography while preserving the current components.
 */

:root {
  --color-ruby: #900000;
  --color-ivory: #f5f1eb;
  --color-stone: #d6c7b8;
  --color-ochre: #c59a5d;
  --color-plum: #2e232e;

  --color-plum-90: rgba(46, 35, 46, .90);
  --color-plum-72: rgba(46, 35, 46, .72);
  --color-plum-58: rgba(46, 35, 46, .58);
  --color-plum-18: rgba(46, 35, 46, .18);
  --color-plum-12: rgba(46, 35, 46, .12);
  --color-plum-08: rgba(46, 35, 46, .08);
  --color-ivory-94: rgba(245, 241, 235, .94);
  --color-ivory-74: rgba(245, 241, 235, .74);
  --color-ivory-18: rgba(245, 241, 235, .18);
  --color-stone-56: rgba(214, 199, 184, .56);
  --color-stone-30: rgba(214, 199, 184, .30);

  --font-display: 'DM Serif Display', Georgia, serif;
  --font-sans: 'Manrope', Arial, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;

  /* Compatibility aliases for the existing component layer. */
  --cream: var(--color-ivory);
  --wine: var(--color-plum);
  --ink: var(--color-plum);
  --pink: var(--color-stone);
  --rose: var(--color-ruby);
  --line: var(--color-plum-18);

  --i2-canvas: var(--color-ivory);
  --i2-paper: var(--color-ivory);
  --i2-ink: var(--color-plum);
  --i2-muted: var(--color-plum-72);
  --i2-wine: var(--color-plum);
  --i2-wine-deep: var(--color-plum);
  --i2-blush: var(--color-stone);
  --i2-blush-soft: var(--color-stone-30);
  --i2-line: var(--color-plum-18);
  --i2-radius-lg: clamp(16px, 1.6vw, 24px);
  --i2-radius-md: 14px;
  --i2-shadow: 0 16px 42px var(--color-plum-08);
}

/* Foundations --------------------------------------------------------- */

html {
  background: var(--color-ivory);
  scroll-padding-bottom: 140px;
}

body {
  background: var(--color-ivory);
  color: var(--color-plum);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
}

button,
input,
textarea,
select {
  font-family: var(--font-sans);
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: -.022em;
  line-height: .95;
  text-transform: none;
  text-wrap: balance;
}

.hero h1,
.benefit-intro h2,
.gallery-static-head h2,
.intro h2,
.little-things h2,
.process-heading h2,
.service-phrase,
.statement h2,
.use-heading h2,
.review-head h2,
.news-head h2,
.privacy h2,
.faq-heading h2,
.contact-copy h2,
.site-footer > h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: -.022em;
  text-transform: none;
}

h3,
.service-row h3,
.process-step h3,
.gallery-item h3,
.use-card h3,
.news-card h3 {
  font-family: var(--font-sans);
  font-weight: 650;
  letter-spacing: -.04em;
  line-height: 1.06;
  text-transform: none;
}

.eyebrow,
.value-label,
.conversation-type,
.news-index,
.news-meta,
.placeholder-note,
.placeholder-preserved,
.inline-placeholder,
.chat-demo-label,
.chat-preserved-placeholder,
.hero-visual-note span,
.process-step > b,
.stat-row span,
.hero-numbers span {
  font-family: var(--font-mono);
}

em {
  color: var(--color-ruby);
  font-style: normal;
}

p,
li,
.faq-answer p,
.service-row p,
.news-card > p,
.use-card p {
  color: inherit;
}

main:focus {
  outline: 3px solid var(--color-ruby);
  outline-offset: -3px;
}

.skip-link {
  background: var(--color-ivory);
  color: var(--color-ruby);
}

:where(a, button, input):focus-visible,
:is(
  .button,
  .topbar .nav-cta,
  .text-link,
  .chat-quick button,
  .chat-form button
):focus-visible {
  outline: 3px solid var(--color-ruby);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--color-ivory);
}

:is(.intro, .statement, .contact, .site-footer, .pilot-strip) :where(a, button, input):focus-visible {
  outline-color: var(--color-ochre);
  box-shadow: 0 0 0 6px var(--color-plum);
}

/* Loader and navigation ---------------------------------------------- */
/* Brand-reveal styling lives in the §7/§8 block below (real wordmark). */

.topbar {
  border-top: 0;
  border-bottom: 1px solid var(--color-plum-12);
  background: var(--color-ivory-94);
  backdrop-filter: none;
}

.topbar nav a,
.topbar .menu,
.topbar .mobile-nav a {
  color: var(--color-plum);
  font-family: var(--font-sans);
}

.topbar nav a,
.topbar .nav-cta,
.button,
.text-link {
  font-size: 14px;
}

.topbar nav a::after {
  background: var(--color-ruby);
}

.topbar .mobile-nav {
  background: var(--color-ivory);
}

.topbar .mobile-nav a {
  font-weight: 600;
  letter-spacing: -.035em;
}

/* Calm, consistent actions. The existing liquid movement remains. */
.button,
.topbar .nav-cta,
.text-link,
.chat-quick button,
.chat-form button {
  border-radius: 10px;
  font-family: var(--font-sans);
  font-weight: 650;
}

.button,
.topbar .nav-cta,
.chat-form button {
  --liquid-base: var(--color-ruby);
  --liquid-fill: var(--color-plum);
  --liquid-ink: var(--color-ivory);
  --liquid-hover-ink: var(--color-ivory);
}

.topbar .nav-cta {
  color: var(--color-ivory);
  background: var(--color-ruby);
}

.topbar .nav-cta span {
  background: var(--color-ivory);
}

.text-link,
.chat-quick button {
  --liquid-base: transparent;
  --liquid-fill: var(--color-plum);
  --liquid-ink: var(--color-plum);
  --liquid-hover-ink: var(--color-ivory);
  border-color: var(--color-plum);
  color: var(--color-plum);
}

/* Hero --------------------------------------------------------------- */

.hero {
  background: var(--color-ivory);
}

.hero::before {
  display: none;
}

.hero h1 {
  max-width: 920px;
  margin-bottom: clamp(18px, 2.2vw, 30px);
  color: var(--color-plum);
  font-size: clamp(74px, 8.3vw, 124px);
  line-height: .91;
  letter-spacing: -.025em;
}

.hero-subheadline {
  max-width: 690px;
  color: var(--color-ruby);
  font-family: var(--font-display);
  font-size: clamp(31px, 3.4vw, 52px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.018em;
}

.hero-explainer {
  max-width: 530px;
  color: var(--color-plum-72);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.7;
}

.hero-hotel-visual {
  border: 1px solid var(--color-plum-12);
  border-radius: 20px;
  background: var(--color-stone);
  box-shadow: 0 18px 44px var(--color-plum-08);
}

.hero-hotel-visual::after {
  display: none;
}

.hero-visual-note {
  right: auto;
  bottom: 18px;
  left: 18px;
  width: max-content;
  max-width: calc(100% - 36px);
  padding: 12px 14px;
  display: grid;
  gap: 3px;
  border-radius: 10px;
  background: var(--color-plum-90);
  color: var(--color-ivory);
}

.hero-visual-note span {
  color: var(--color-stone);
}

.hero-visual-note strong {
  color: var(--color-ivory);
  font-family: var(--font-sans);
  font-weight: 650;
  letter-spacing: -.03em;
}

.hero-visual-note span {
  font-size: 10px;
}

.hero-visual > img,
.benefit-photo > img,
.little-things-visual img,
.gallery-item img,
.use-card img,
.contact > img,
.partner-track img {
  filter: none;
  mix-blend-mode: normal;
}

.scroll-cue,
.vertical-note {
  color: var(--color-plum-72);
}

.scroll-cue i,
.sound-wave i {
  background: var(--color-ochre);
}

/* Primary brand marquee ---------------------------------------------- */

.brand-ticker,
.word-ticker.brand-ticker {
  border-color: var(--color-stone-56);
  background: var(--color-plum);
  color: var(--color-ivory);
}

.brand-ticker-track,
.word-ticker .brand-ticker-track {
  color: var(--color-ivory);
  font-family: var(--font-sans);
  font-weight: 550;
  letter-spacing: -.025em;
}

.brand-ticker-track i,
.word-ticker .brand-ticker-track i {
  color: var(--color-ochre);
}

.brand-ticker .motion-toggle {
  border-color: var(--color-stone);
  background: var(--color-ivory);
  color: var(--color-plum);
  backdrop-filter: none;
}

/* Product value ------------------------------------------------------- */

.benefit-grid {
  background: var(--color-ivory);
}

.benefit-card {
  border-color: var(--color-plum-12);
  border-radius: 18px;
  box-shadow: none;
}

.benefit-intro,
.benefit-tags {
  background: var(--color-ivory);
}

.benefit-intro h2,
.benefit-tags h3 {
  color: var(--color-plum);
}

.benefit-intro h2 {
  font-size: clamp(58px, 6vw, 86px);
  line-height: .94;
}

.benefit-opening p,
.benefit-tags > p,
.benefit-promise > p {
  color: var(--color-plum-72);
  font-size: clamp(16px, 1.1vw, 18px);
}

.value-list li,
.benefit-card > p {
  font-size: clamp(16px, 1.05vw, 17px);
}

.value-card h3,
.benefit-wine h3,
.benefit-simple h3 {
  font-size: clamp(38px, 4vw, 52px);
}

.benefit-opening p:first-child {
  color: var(--color-plum);
}

.value-card.value-guests {
  background: var(--color-stone);
}

.value-card.value-guests::after {
  display: none;
}

.value-card.value-guests > div {
  top: auto;
  right: clamp(18px, 2.4vw, 34px);
  bottom: clamp(18px, 2.4vw, 34px);
  left: clamp(18px, 2.4vw, 34px);
  height: auto;
  padding: clamp(22px, 2.6vw, 34px);
  display: block;
  border: 1px solid var(--color-plum-12);
  border-radius: 14px;
  background: var(--color-ivory-94);
  color: var(--color-plum);
}

.value-guests .value-label {
  margin: 0 0 22px;
  color: var(--color-ruby);
}

.value-guests h3,
.value-guests .value-description,
.value-guests .value-list {
  color: var(--color-plum);
}

.value-card.value-hotels,
.benefit-wine {
  background: var(--color-plum);
  color: var(--color-ivory);
}

.value-hotels .value-label,
.benefit-wine > span,
.value-hotels .value-list li::before {
  color: var(--color-ochre);
}

.value-label {
  font-size: 11px;
  opacity: 1;
}

.value-card .value-list li {
  border-color: var(--color-plum-18);
}

.value-hotels .value-list li {
  border-color: var(--color-ivory-18);
}

.value-guests .value-list li::before {
  color: var(--color-ruby);
}

.benefit-promise,
.benefit-simple {
  background: var(--color-stone);
  color: var(--color-plum);
}

.benefit-promise .value-label {
  color: var(--color-ruby);
}

.benefit-tags h3 em {
  color: var(--color-ruby);
}

.benefit-tags .outcome-tags span,
.outcome-tags span:nth-child(n) {
  border-color: var(--color-plum-12);
  background: var(--color-stone-56);
  color: var(--color-plum);
}

.benefit-tags .outcome-tags span:nth-child(even) {
  background: var(--color-ivory);
  color: var(--color-ruby);
}

/* Just ask LORA ------------------------------------------------------- */

.intro,
.ask-lora {
  background: var(--color-plum);
  color: var(--color-ivory);
}

.intro::after,
.ask-lora::after {
  color: var(--color-ivory-18);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.02em;
  opacity: .14;
}

.intro h2,
.ask-lora__head h2 {
  color: var(--color-ivory);
  font-size: clamp(60px, 7vw, 84px);
  line-height: .94;
}

.intro h2 em,
.ask-lora__head h2 em {
  color: var(--color-ochre);
}

.intro-copy .intro-subline,
.intro-copy p {
  color: var(--color-stone);
  font-family: var(--font-sans);
}

.conversation-type {
  color: var(--color-ochre);
}

.conversation-grid .conversation-bubble {
  border-radius: 14px;
  box-shadow: none;
}

.conversation-grid .guest-bubble {
  border-color: var(--color-stone);
  background: var(--color-ivory);
  color: var(--color-plum);
}

.conversation-grid .lora-bubble {
  border-color: var(--color-stone);
  background: var(--color-stone);
  color: var(--color-plum);
  backdrop-filter: none;
}

.conversation-grid .conversation-bubble small {
  color: var(--color-ruby);
  font-size: 11px;
  opacity: 1;
}

.conversation-grid .lora-bubble small b {
  background: var(--color-ruby);
  color: var(--color-ivory);
}

.demo-metrics-shell {
  border-color: var(--color-stone-30);
  background: var(--color-ivory-18);
}

.demo-metrics-shell .hero-numbers,
.intro .stat-row {
  border-color: var(--color-stone-30);
}

.demo-metrics-shell .hero-numbers strong,
.intro .stat-row strong {
  color: var(--color-ivory);
  font-family: var(--font-sans);
}

.demo-metrics-shell .hero-numbers span,
.intro .stat-row span {
  color: var(--color-stone);
}

/* Emotional hospitality moment --------------------------------------- */

.little-things {
  background: var(--color-stone);
  color: var(--color-plum);
}

.little-things::before {
  border-color: var(--color-plum-12);
}

.little-things h2 {
  color: var(--color-plum);
  font-size: clamp(64px, 7.2vw, 96px);
  line-height: .93;
}

.little-things h2 em,
.little-things-list {
  color: var(--color-ruby);
}

.little-things-copy {
  border-color: var(--color-plum-18);
}

.little-things-copy > p:last-child {
  color: var(--color-plum-72);
}

.little-things-visual {
  border: 1px solid var(--color-plum-12);
  border-radius: 18px;
  background: var(--color-ivory);
  box-shadow: 0 14px 34px var(--color-plum-08);
}

.little-things-visual::after {
  display: none;
}

.little-things-visual figcaption {
  right: 18px;
  bottom: 18px;
  left: 18px;
  width: max-content;
  max-width: calc(100% - 36px);
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--color-plum-90);
  color: var(--color-ivory);
  font-family: var(--font-sans);
}

/* Gallery and partner ecosystem -------------------------------------- */

.gallery-section {
  background: var(--color-ivory);
}

.gallery-static-head h2,
.gallery-copy > p {
  color: var(--color-plum);
}

.gallery-static-head h2 {
  font-size: clamp(58px, 6vw, 84px);
  line-height: .95;
}

.gallery-copy > p {
  font-size: clamp(15px, 1.1vw, 17px);
}

.gallery-item {
  border: 1px solid var(--color-plum-12);
  border-radius: 18px;
  background: var(--color-stone);
  box-shadow: none;
}

.gallery-item::after {
  display: none;
}

.gallery-item > span {
  border-color: var(--color-stone);
  border-radius: 8px;
  background: var(--color-ivory);
  color: var(--color-ruby);
  box-shadow: none;
  backdrop-filter: none;
}

.gallery-item figcaption {
  padding: clamp(16px, 1.8vw, 24px);
  border-radius: 12px;
  background: var(--color-plum-90);
  color: var(--color-ivory);
}

.gallery-item h3 {
  color: var(--color-ivory);
}

.gallery-item p {
  color: var(--color-stone);
  font-size: 16px;
}

@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover img {
    filter: none;
  }
}

.partner-marquee {
  border-color: var(--color-plum-12);
  background: var(--color-stone);
  color: var(--color-plum);
}

.partner-label > p {
  color: var(--color-plum);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.018em;
}

.partner-window {
  padding: 24px 0;
  border-top: 1px solid var(--color-plum-12);
  border-bottom: 1px solid var(--color-plum-12);
  background: var(--color-ivory);
}

.partner-track img {
  opacity: .88;
}

/* Journey ------------------------------------------------------------- */

.feature-process {
  overflow-x: clip;
  background: var(--color-ivory);
  color: var(--color-plum);
}

.process-heading h2 {
  color: var(--color-plum);
  font-size: clamp(56px, 5.7vw, 82px);
  line-height: .97;
  letter-spacing: -.02em;
}

.process-heading h2 em {
  color: var(--color-ruby);
}

.process-heading > p:last-child,
.process-step p {
  color: var(--color-plum-72);
}

.process-step p {
  font-size: 16px;
}

.process-step {
  border-color: var(--color-plum-12);
  border-radius: 14px;
  background: var(--color-ivory);
  box-shadow: 0 9px 24px var(--color-plum-08);
}

.process-step > b {
  color: var(--color-ruby);
  font-weight: 500;
  letter-spacing: -.04em;
}

.process-step h3 {
  color: var(--color-plum);
  font-size: clamp(30px, 3.2vw, 50px);
}

/* Pilot marquee ------------------------------------------------------- */

.pilot-strip {
  border-color: var(--color-stone-30);
  background: var(--color-plum);
  color: var(--color-ivory);
}

.pilot-marquee-track span {
  color: var(--color-ivory);
  font-family: var(--font-sans);
  font-weight: 550;
  letter-spacing: -.03em;
}

.pilot-marquee-track i,
.pilot-strip:hover .pilot-marquee-track {
  color: var(--color-ochre);
}

.pilot-click-hint,
.pilot-strip:hover .pilot-click-hint {
  border-color: var(--color-ruby);
  border-radius: 9px;
  background: var(--color-ruby);
  color: var(--color-ivory);
  box-shadow: 0 8px 22px var(--color-plum-18);
}

/* Hotel services ------------------------------------------------------ */

.service-section {
  background: var(--color-ivory);
  color: var(--color-plum);
}

.service-phrase {
  color: var(--color-plum);
  font-family: var(--font-display);
  font-size: clamp(58px, 6vw, 84px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.02em;
}

.service-phrase span {
  color: var(--color-plum);
}

.service-subline,
.service-row p {
  color: var(--color-plum-72);
}

.service-subline,
.service-row p {
  font-size: clamp(16px, 1.1vw, 18px);
}

.service-row {
  border: 1px solid var(--color-plum-12);
  border-radius: 14px;
  background: var(--color-ivory);
}

.service-row:nth-child(even) {
  background: var(--color-stone);
}

.service-row h3 {
  color: var(--color-plum);
  font-size: clamp(32px, 3.4vw, 52px);
}

.service-row blockquote,
.service-example blockquote {
  border-color: var(--color-plum-18);
  border-radius: 9px;
  background: var(--color-ivory);
  color: var(--color-ruby);
}

.service-example > span {
  color: var(--color-plum-72);
}

.service-example > span::before,
.service-flow i {
  color: var(--color-ochre);
}

.service-chips span {
  border-color: var(--color-plum-12);
  border-radius: 8px;
  background: var(--color-stone-56);
  color: var(--color-plum);
}

.service-value {
  border: 1px solid var(--color-stone-30);
  border-radius: 16px;
  background: var(--color-plum);
  color: var(--color-ivory);
}

.service-value > p,
.service-flow span {
  color: var(--color-ivory);
}

.service-flow {
  border-color: var(--color-stone-30);
}

/* Core business value ------------------------------------------------- */

.statement {
  background: var(--color-plum);
  color: var(--color-ivory);
}

.statement::after {
  display: none;
}

.statement .eyebrow,
.statement h2 {
  color: var(--color-ivory);
}

.statement h2 {
  max-width: 1180px;
  font-size: clamp(66px, 7.2vw, 92px);
  line-height: .93;
}

.statement h2 em,
.statement-copy strong {
  color: var(--color-ochre);
}

.statement-copy {
  border-color: var(--color-stone-30);
  color: var(--color-stone);
}

.statement .button,
.contact .button {
  --liquid-base: var(--color-ruby);
  --liquid-fill: var(--color-ochre);
  --liquid-ink: var(--color-ivory);
  --liquid-hover-ink: var(--color-plum);
}

/* Use cases ----------------------------------------------------------- */

.use-cases {
  background: var(--color-ivory);
  color: var(--color-plum);
}

.use-heading h2 {
  color: var(--color-plum);
  font-size: clamp(58px, 6vw, 84px);
  line-height: .95;
}

.use-heading h2 em {
  color: var(--color-ruby);
}

.use-intro,
.use-card p {
  color: var(--color-plum-72);
}

.use-intro,
.use-card p,
.review-card > p,
.news-card > p:not(.news-meta),
.faq-answer p,
.privacy-copy > p {
  font-size: clamp(16px, 1.05vw, 17px);
  line-height: 1.7;
}

.use-card,
.use-card.second {
  border-color: var(--color-plum-12);
  border-radius: 14px;
  background: var(--color-ivory);
  color: var(--color-plum);
}

.use-card:nth-of-type(even) {
  background: var(--color-stone);
}

.use-card span {
  color: var(--color-ruby);
}

.use-card h3 {
  color: var(--color-plum);
  font-size: clamp(29px, 2.8vw, 42px);
}

/* Trust, editorial and FAQ ------------------------------------------- */

.review-section {
  background: var(--color-stone);
  color: var(--color-plum);
}

.review-head h2,
.news-head h2,
.privacy h2,
.faq-heading h2 {
  color: var(--color-plum);
  font-family: var(--font-display);
  font-size: clamp(58px, 6vw, 84px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: none;
}

.review-head h2 em,
.news-head h2 em,
.privacy h2 em,
.faq-heading h2 em {
  color: var(--color-ruby);
}

.review-card {
  border-color: var(--color-plum-12);
  border-radius: 12px;
  background: var(--color-ivory);
  color: var(--color-plum);
}

.review-profile b {
  background: var(--color-ruby);
  color: var(--color-ivory);
}

.review-profile span {
  color: var(--color-ruby);
}

.stars,
.review-card footer > span:last-child {
  color: var(--color-ochre);
}

.review-card footer {
  border-color: var(--color-plum-12);
  background: transparent;
  color: var(--color-plum-72);
}

.news-section {
  background: var(--color-ivory);
  color: var(--color-plum);
}

.news-head .eyebrow {
  color: var(--color-plum);
}

.news-card {
  border-color: var(--color-plum-12);
  border-radius: 14px;
  background: var(--color-stone);
  color: var(--color-plum);
}

.news-card:nth-child(even) {
  background: var(--color-ivory);
}

.news-card:hover {
  border-color: var(--color-ruby);
  background: var(--color-stone);
}

.news-index {
  color: var(--color-ruby);
}

.news-meta {
  color: var(--color-plum-72);
}

.news-card h3,
.news-card > p:not(.news-meta) {
  color: var(--color-plum);
}

.privacy {
  background: var(--color-stone);
  color: var(--color-plum);
}

.privacy .placeholder-note {
  width: 100%;
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
}

.privacy-copy > p {
  color: var(--color-plum);
}

.faq-section {
  background: var(--color-ivory);
  color: var(--color-plum);
}

.faq-item {
  border-color: var(--color-plum-12);
  border-radius: 14px;
  background: var(--color-ivory);
}

.faq-item:nth-child(even) {
  background: var(--color-stone-30);
}

.faq-item:hover,
.faq-item.is-open {
  border-color: var(--color-ruby);
  background: var(--color-stone-30);
}

.faq-item > button {
  color: var(--color-plum);
}

.faq-item:focus-within {
  outline: 3px solid var(--color-ruby);
  outline-offset: 3px;
}

.faq-item.is-open > button {
  color: var(--color-ruby);
}

.faq-answer p {
  color: var(--color-plum-72);
}

/* Final pilot conversion --------------------------------------------- */

.contact,
.contact-copy {
  background: var(--color-plum);
  color: var(--color-ivory);
}

.contact > img {
  background: var(--color-stone);
}

.contact-copy h2 {
  color: var(--color-ivory);
  font-family: var(--font-display);
  font-size: clamp(58px, 5.7vw, 82px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.02em;
}

.contact-copy .eyebrow,
.contact-copy > p:not(.eyebrow),
.contact-reassurance,
.contact-email {
  color: var(--color-ivory);
}

.contact-reassurance {
  color: var(--color-ivory) !important;
  font-size: 16px !important;
}

.contact-email {
  text-decoration-color: var(--color-ochre);
}

/* Footer -------------------------------------------------------------- */

.site-footer {
  border-radius: 16px;
  background: var(--color-plum);
  color: var(--color-ivory);
}

.site-footer nav a,
.footer-bottom p,
.footer-bottom small {
  color: var(--color-ivory-74);
}

.site-footer nav a {
  font-size: 13px;
}

.site-footer nav a:hover,
.site-footer > h2,
.footer-bottom a:not(.brand),
.footer-bottom strong {
  color: var(--color-ivory);
}

.site-footer > h2 {
  font-family: var(--font-display);
  font-size: clamp(58px, 6.4vw, 88px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.02em;
}

.footer-bottom {
  border-color: var(--color-stone-30);
}

.footer-bottom > div:last-child a {
  color: var(--color-ochre);
}

/* Placeholder language remains visible but visually subordinate. */
.placeholder-note,
.placeholder-action,
.chat-demo-label {
  border-color: var(--color-plum-18);
  background: var(--color-ivory);
  color: var(--color-plum-72);
  box-shadow: none;
}

.placeholder-preserved,
.chat-preserved-placeholder {
  border-color: var(--color-plum-18);
  color: var(--color-plum-72);
}

.inline-placeholder {
  border-color: var(--color-ruby);
  color: var(--color-ruby);
}

.intro .placeholder-note-light,
.contact .placeholder-note-light,
.use-heading .placeholder-note-light {
  border-color: var(--color-stone-56);
  background: var(--color-ivory-18);
  color: var(--color-stone);
}

.use-heading .placeholder-note-light,
.news-section .placeholder-note-light {
  border-color: var(--color-plum-18);
  background: var(--color-ivory);
  color: var(--color-plum-72);
}

/* Chat with LORA ------------------------------------------------------ */

.chat-orbit {
  width: 132px;
  height: 132px;
  border-color: var(--color-plum-12);
  background: var(--color-ivory);
  color: var(--color-ruby);
  box-shadow: 0 14px 34px var(--color-plum-12);
  backdrop-filter: none;
}

.chat-orbit > img {
  width: 80px;
  height: 80px;
}

.chat-orbit::before {
  border-color: var(--color-stone);
}

.chat-orbit:hover {
  background: var(--color-plum);
  color: var(--color-ivory);
}

.chat-backdrop {
  background: var(--color-plum-90);
}

.chat-window {
  border-color: var(--color-stone);
  border-radius: 16px;
  background: var(--color-ivory);
  box-shadow: 0 24px 64px var(--color-plum-18);
}

.brick-build i {
  background: var(--color-ivory);
}

.chat-window-content header {
  background: var(--color-plum);
  color: var(--color-ivory);
}

.chat-window-content header span {
  color: var(--color-stone);
}

.chat-window-content header span i {
  background: var(--color-ochre);
  box-shadow: none;
}

.chat-close {
  border-color: var(--color-stone-56);
  color: var(--color-ivory);
}

.chat-messages,
.chat-form {
  background: var(--color-ivory);
}

.assistant-message,
.chat-greeting {
  border-color: var(--color-plum-12);
  border-radius: 6px 14px 14px 14px;
  background: var(--color-stone);
  color: var(--color-plum);
  box-shadow: none;
  font-size: 16px;
}

.guest-message {
  border-color: var(--color-plum-12);
  border-radius: 14px 6px 14px 14px;
  background: var(--color-ivory);
  color: var(--color-plum);
  box-shadow: none;
  font-size: 16px;
}

.chat-quick button {
  border-color: var(--color-ruby);
  color: var(--color-ruby);
  --liquid-fill: var(--color-ruby);
  font-size: 14px;
}

.chat-form {
  border-color: var(--color-plum-12);
}

.chat-form input {
  border-radius: 9px;
  background: var(--color-stone-30);
  color: var(--color-plum);
  font-size: 16px;
}

/* Responsive typography is composed per breakpoint. ------------------ */

@media (max-width: 1100px) {
  .hero h1 {
    max-width: 880px;
    font-size: clamp(68px, 10vw, 102px);
  }

  .hero-subheadline {
    font-size: clamp(34px, 5vw, 48px);
  }

  .benefit-intro h2,
  .gallery-static-head h2,
  .intro h2,
  .little-things h2,
  .process-heading h2,
  .service-phrase,
  .statement h2,
  .use-heading h2,
  .review-head h2,
  .news-head h2,
  .privacy h2,
  .faq-heading h2,
  .contact-copy h2 {
    font-size: clamp(54px, 7.4vw, 76px);
  }
}

@media (max-width: 1180px) {
  .chat-orbit {
    width: 104px;
    height: 104px;
  }

  .chat-orbit > img {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 16px;
  }

  .topbar .mobile-nav a {
    font-size: clamp(28px, 9vw, 44px);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .topbar .menu {
    min-width: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(55px, 15vw, 68px);
    line-height: .94;
  }

  .hero-subheadline {
    max-width: 340px;
    font-size: clamp(31px, 8.5vw, 39px);
    line-height: 1.03;
  }

  .hero-explainer {
    font-size: 16px;
  }

  .hero-visual-note {
    right: 14px;
    bottom: 14px;
    left: 14px;
    width: auto;
    max-width: none;
  }

  .benefit-intro h2,
  .gallery-static-head h2,
  .intro h2,
  .little-things h2,
  .process-heading h2,
  .service-phrase,
  .statement h2,
  .use-heading h2,
  .review-head h2,
  .news-head h2,
  .privacy h2,
  .faq-heading h2,
  .contact-copy h2,
  .site-footer > h2 {
    font-size: clamp(48px, 13.2vw, 62px);
    line-height: .97;
  }

  .benefit-intro {
    min-height: 720px;
  }

  .benefit-intro > img {
    opacity: 1;
  }

  .value-card.value-guests > div {
    padding: 22px;
  }

  .value-card h3,
  .benefit-promise h3,
  .benefit-tags h3 {
    font-size: clamp(36px, 10vw, 46px);
  }

  .little-things-list {
    font-size: clamp(26px, 7.4vw, 34px);
  }

  .gallery-item figcaption {
    right: 14px;
    bottom: 14px;
    left: 14px;
    padding: 17px;
  }

  .gallery-item h3 {
    font-size: 30px;
  }

  .partner-window {
    padding: 18px 0;
  }

  .process-step h3,
  .service-row h3 {
    font-size: clamp(28px, 8vw, 36px);
  }

  .process-step p,
  .service-row p,
  .gallery-item p,
  .use-card p,
  .review-card > p,
  .news-card > p:not(.news-meta),
  .faq-answer p,
  .privacy-copy > p {
    font-size: 16px;
  }

  .news-card h3,
  .use-card h3 {
    font-size: clamp(28px, 8.2vw, 36px);
  }

  .statement-copy {
    color: var(--color-stone);
  }

  .contact-copy > p:not(.eyebrow),
  .contact-reassurance {
    font-size: 16px;
  }

  .button,
  .topbar .nav-cta,
  .text-link {
    min-height: 50px;
  }

  .site-footer {
    padding-bottom: 132px;
  }
}

@media (max-width: 430px) {
  .hero h1 {
    font-size: clamp(52px, 14.4vw, 62px);
  }

  .hero-subheadline {
    font-size: 32px;
  }

  .benefit-intro h2,
  .gallery-static-head h2,
  .intro h2,
  .little-things h2,
  .process-heading h2,
  .use-heading h2,
  .review-head h2,
  .news-head h2,
  .privacy h2,
  .faq-heading h2 {
    font-size: 49px;
  }

  .service-phrase,
  .statement h2,
  .contact-copy h2,
  .site-footer > h2 {
    font-size: 43px;
    line-height: 1;
  }

  .chat-orbit {
    width: 96px;
    height: 96px;
  }

  .chat-orbit > img {
    width: 61px;
    height: 61px;
  }

  .site-footer {
    padding-bottom: 124px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item img,
  .chat-orbit,
  .button,
  .text-link {
    transition: none;
  }
}

@media (forced-colors: active) {
  :is(
    .button,
    .topbar .nav-cta,
    .text-link,
    .chat-quick button,
    .chat-form button
  ) {
    border: 2px solid ButtonText;
    color: ButtonText;
    forced-color-adjust: auto;
  }

  :is(
    .button,
    .topbar .nav-cta,
    .text-link,
    .chat-quick button,
    .chat-form button
  )::before,
  :is(
    .button,
    .topbar .nav-cta,
    .text-link,
    .chat-quick button,
    .chat-form button
  )::after {
    display: none;
  }
}

/* Phase F — section imagery: services (§12) & team value (§13) -------- */

.service-visual,
.statement-visual {
  margin: clamp(40px, 4.5vw, 64px) 0;
  overflow: hidden;
  border-radius: var(--i2-radius-lg);
  background: var(--color-stone);
  box-shadow: var(--i2-shadow);
}

.statement-visual {
  margin: clamp(40px, 4.5vw, 64px) var(--i2-gutter);
}

.service-visual img,
.statement-visual img {
  display: block;
  width: 100%;
  object-fit: cover;
  filter: none;
}

.service-visual img {
  height: clamp(260px, 32vw, 440px);
}

/* §9 — statement image: 16:9 so the full hospitality scene reads and the
   Cube on the side table stays in frame (it is present in the source). */
.statement-visual img {
  height: auto;
  aspect-ratio: 16 / 9;
}

/* §21 — per-image crops: keep the guest, the host and the Cube in frame,
   and away from the caption blocks in the gallery tiles. */
.service-visual img[src$="guest-request.webp"] { object-position: 50% 46%; }
.statement-visual img[src$="team-hospitality.webp"] { object-position: 50% 50%; }
.gallery-item img[src$="premium-suite.webp"] { object-position: 50% 56%; }
.gallery-item img[src$="reception.webp"] { object-position: 54% 42%; }
.gallery-item img[src$="lounge.webp"] { object-position: 40% 46%; }
.gallery-item img[src$="image_4.webp"] { object-position: 34% 44%; }
.little-things-visual img[src$="quiet-companion.webp"] { object-position: 24% 46%; }

@media (max-width: 760px) {
  .service-visual img {
    height: clamp(220px, 60vw, 300px);
  }
  .statement-visual img {
    aspect-ratio: 4 / 3;
  }
  .service-visual img[src$="guest-request.webp"] { object-position: 46% 42%; }
  .statement-visual img[src$="team-hospitality.webp"] { object-position: 50% 52%; }
  .gallery-item img[src$="reception.webp"] { object-position: 56% 30%; }
  .gallery-item img[src$="lounge.webp"] { object-position: 42% 34%; }
  .little-things-visual img[src$="quiet-companion.webp"] { object-position: 30% 40%; }
}


/* ------------------------------------------------------------------ *
 * Copy pass v2 — §1 eyebrow spacing, §8 service journey              *
 * ------------------------------------------------------------------ */

/* §1 — "FOR HOTELS" pill reads as its own section intro: give it real
   air before the headline, without touching the rest of the card. */
.value-card.value-hotels .value-label {
  margin-bottom: clamp(30px, 4.5vw, 60px);
}

/* §8 — the service journey is a deliberate premium flow, not micro-labels. */
.service-value > p {
  max-width: 780px;
  font: 600 clamp(21px, 2.3vw, 33px)/1.2 var(--font-sans, 'Manrope'), sans-serif;
  letter-spacing: -.025em;
  color: var(--color-ivory);
}

.service-flow {
  --sf-gap: clamp(24px, 2.6vw, 44px);
  --sf-border: 1px;
  margin-top: clamp(40px, 4.6vw, 62px);
  padding-top: clamp(32px, 3.6vw, 48px);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--sf-gap);
  border-top: 1px solid var(--color-stone-30);
}

.service-step {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.1vw, 16px);
  padding: clamp(20px, 2vw, 30px) clamp(18px, 1.7vw, 26px);
  border: 1px solid var(--color-stone-30);
  border-radius: 16px;
  background: rgba(245, 241, 235, .05);
}

.service-step b {
  font: 600 13px var(--font-mono, 'DM Mono'), monospace;
  letter-spacing: .14em;
  color: var(--color-ochre);
}

.service-step span {
  font: 600 clamp(17px, 1.55vw, 23px)/1.2 var(--font-sans, 'Manrope'), sans-serif;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--color-ivory);
}

/* §5 — the connector sits exactly on the horizontal centre of the gap
   between two cards and the vertical centre of the (equal-height) cards.
   1em box + text-align:center keeps the glyph's own centre on that point;
   the -1px accounts for the card border (offsets are from the padding box). */
.service-step:not(:last-child)::after {
  content: '→';
  position: absolute;
  top: 50%;
  right: calc(-1 * (var(--sf-gap) / 2 + var(--sf-border)));
  transform: translate(50%, -50%);
  display: block;
  width: 1em;
  text-align: center;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1;
  color: var(--color-ochre);
}

@media (max-width: 860px) {
  .service-flow {
    --sf-gap: clamp(34px, 7vw, 48px);
    flex-direction: column;
  }
  /* Stacked: centred horizontally on the card and on the vertical mid-gap. */
  .service-step:not(:last-child)::after {
    content: '↓';
    top: auto;
    right: auto;
    left: 50%;
    bottom: calc(-1 * (var(--sf-gap) / 2 + var(--sf-border)));
    transform: translate(-50%, 50%);
  }
}


/* ------------------------------------------------------------------ *
 * Refinement pass v3 — §3 caption, §4 wide-tile caption, §5 privacy, *
 * §6–§8 hero proof points                                           *
 * ------------------------------------------------------------------ */

/* §3 — "There for the little things": the figure was pinned to 650px
   while the image renders much shorter, leaving the caption stranded in
   empty space. Let the figure track the image so the caption reads as an
   immediate caption. Image size and section height are unchanged. */
.little-things > .little-things-visual {
  min-height: 0;
  align-self: center;
}

/* §4 — the wide "Present without interrupting." tile: keep the caption
   panel and its style, but move it into the right half so the LORA Cube
   (lower-left of the image) stays clear. */
.gallery-wide figcaption {
  left: 52%;
}

@media (max-width: 600px) {
  /* Single-column mobile tile: caption to the top, Cube stays clear at
     the bottom-left via a left-biased crop. */
  .gallery-wide figcaption {
    left: 20px;
    top: 62px;
    bottom: auto;
  }
  .gallery-item img[src$="premium-suite.webp"] {
    object-position: 10% 70%;
  }
}

/* §5 — trust section: emotional line leads, the compliance line is a
   quiet factual note beneath it. */
.privacy-copy > p.privacy-compliance {
  margin: 10px 0 0;
  font: 500 12px var(--font-mono, 'DM Mono'), monospace;
  letter-spacing: .03em;
  color: var(--color-plum-72);
}

/* §6–§8 — hero proof points: Privacy · Language · Simplicity.
   Editorial and calm; sits in the lower hero, clear of the image. */
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 48px);
  max-width: 470px;
  margin-top: clamp(40px, 8vh, 88px);
  padding-top: clamp(19px, 2.6vh, 27px);
  border-top: 1px solid var(--color-plum-12);
}

.hero-proof-item {
  min-width: clamp(86px, 8.4vw, 102px);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hero-proof-item strong {
  font: 400 clamp(30px, 3vw, 44px)/1 var(--font-display, 'DM Serif Display'), Georgia, serif;
  color: var(--color-plum);
  letter-spacing: -.005em;
  white-space: nowrap;
}

.hero-proof-item span {
  font: 500 10px var(--font-mono, 'DM Mono'), monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--color-plum-72);
}

@media (max-width: 600px) {
  .hero-proof {
    gap: 12px;
    max-width: none;
    flex-wrap: nowrap;
    margin-top: clamp(30px, 6vh, 48px);
  }
  .hero-proof-item {
    min-width: 0;
    flex: 1 1 0;
  }
  .hero-proof-item strong { font-size: 28px; }
  .hero-proof-item span { font-size: 9px; letter-spacing: .05em; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-proof-item strong { transition: none; }
}


/* ------------------------------------------------------------------ *
 * §7/§8 — Brand reveal                                               *
 * The real LORAtech wordmark (loratech_logo.png — the dark colourway *
 * for the warm ivory ground), letter-by-letter reveal,                       *
 * held ~2.4s, then a plain fade-out. No reconstruction, no tagline.  *
 * ------------------------------------------------------------------ */

.intro-loader {
  background: var(--color-ivory);
  color: var(--color-plum);
}

.intro-loader-logo {
  width: clamp(188px, 32vw, 320px);
  height: auto;
  opacity: 1;
  transform: none;
  clip-path: polygon(0 0,0 0,0 45%,0 45%,0 100%,0 100%);
  animation: lt-splash-type 1400ms steps(1, end) 120ms forwards;
}

/* Reveal the original artwork, preserving its lettering and the icon in O.
   The stepped outline finishes the lower A before revealing the raised tech. */
@keyframes lt-splash-type {
  0% { clip-path: polygon(0 0,0 0,0 45%,0 45%,0 100%,0 100%); }
  12% { clip-path: polygon(0 0,15.93% 0,15.93% 45%,15.93% 45%,15.93% 100%,0 100%); }
  24% { clip-path: polygon(0 0,38.10% 0,38.10% 45%,38.10% 45%,38.10% 100%,0 100%); }
  36% { clip-path: polygon(0 0,59.22% 0,59.22% 45%,59.22% 45%,59.22% 100%,0 100%); }
  48% { clip-path: polygon(0 0,76.81% 0,76.81% 45%,81.99% 45%,81.99% 100%,0 100%); }
  60% { clip-path: polygon(0 0,80.54% 0,80.54% 45%,81.99% 45%,81.99% 100%,0 100%); }
  72% { clip-path: polygon(0 0,86.55% 0,86.55% 45%,86.55% 45%,86.55% 100%,0 100%); }
  84% { clip-path: polygon(0 0,93.38% 0,93.38% 45%,93.38% 45%,93.38% 100%,0 100%); }
  100% { clip-path: polygon(0 0,100% 0,100% 45%,100% 45%,100% 100%,0 100%); }
}

/* Calm exit — a plain fade, no zoom. */
.page-ready .intro-loader {
  transform: none;
}

/* Returning within the session, or reduced-motion: no splash at all. */
.lt-no-splash .intro-loader { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .intro-loader-logo { animation: none; opacity: 1; transform: none; clip-path: none; }
}

/* ------------------------------------------------------------------ *
 * §4 — Testimonials (real hotelier voices)                           *
 * Section ships hidden (see index.html + social-proof.js) and renders *
 * only with real, consented quotes. Styles are prepared so it can be  *
 * switched on without further design work.                            *
 * Design intent: warm-luxury hospitality — a few large quotes, plenty *
 * of whitespace, restrained ruby/ochre accents. Not a SaaS wall.      *
 * ------------------------------------------------------------------ */

.testimonials {
  background: var(--color-ivory);
  color: var(--color-plum);
  padding: clamp(90px, 12vw, 168px) var(--i2-gutter, 7vw);
}

.testimonials-head {
  max-width: 820px;
  margin: 0 auto clamp(48px, 6vw, 84px);
  text-align: center;
}

.testimonials-head .eyebrow {
  justify-content: center;
  color: var(--color-plum-58);
}

.testimonials-head h2 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--color-plum);
}

.testimonials-track {
  display: grid;
  gap: clamp(40px, 5vw, 72px);
  max-width: 1120px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .testimonials-track[data-count="2"],
  .testimonials-track[data-count="4"] {
    grid-template-columns: 1fr 1fr;
  }
}

.testimonial-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
  padding: clamp(32px, 4vw, 56px);
  border: 1px solid var(--color-plum-12);
  border-radius: var(--i2-radius-lg, 20px);
  background: #fff;
  box-shadow: var(--i2-shadow, 0 16px 42px rgba(46, 35, 46, .10));
}

.testimonial-quote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--color-plum);
}

.testimonial-quote::before { content: '\201C'; color: var(--color-ruby); margin-right: .05em; }
.testimonial-quote::after { content: '\201D'; color: var(--color-ruby); }

.testimonial-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 18px;
  font-family: var(--font-sans);
}

.testimonial-photo {
  grid-row: span 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-name {
  grid-column: 2;
  font-size: 15px;
  font-weight: 650;
  color: var(--color-plum);
}

.testimonial-role,
.testimonial-hotel,
.testimonial-location {
  grid-column: 2;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-plum-58);
}

.testimonial-hotel { color: var(--color-ochre); font-weight: 600; }

.testimonial-logo {
  grid-column: 1 / -1;
  height: 26px;
  width: auto;
  margin-top: 12px;
  opacity: .82;
}

.testimonial-link {
  grid-column: 1 / -1;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--color-ruby);
  text-decoration: none;
}
.testimonial-link:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .testimonial-quote { font-size: clamp(20px, 5.4vw, 25px); }
  .testimonial-card { padding: 28px 22px; }
}

/* ------------------------------------------------------------------ *
 * §5 — LinkedIn highlight cards (rendered into "Notes from LORA")     *
 * Only styling hooks; markup is built by social-proof.js when three   *
 * real posts are supplied. No live feed / iframe / widget.            *
 * ------------------------------------------------------------------ */

.news-card-linkedin .news-thumb {
  width: 100%;
  height: 168px;
  object-fit: cover;
  border-radius: 10px;
  margin: 4px 0 16px;
}

.news-card-linkedin .news-link {
  margin-top: 18px;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--color-ruby);
  text-decoration: none;
}
.news-card-linkedin .news-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* §11/§12 — "Cookie settings" is an action (opens the consent dialog),
   not a navigation link → a real <button> that visually matches the
   surrounding footer links on both the landing page and the Impressum. */
.site-footer nav .footer-cookie-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: inherit;
  color: var(--color-ivory-74);
  cursor: pointer;
  transition: color .2s ease;
}
.site-footer nav .footer-cookie-btn:hover { color: var(--color-ivory); }
.site-footer nav .footer-cookie-btn:focus-visible {
  outline: 3px solid var(--color-ochre);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--color-plum);
  border-radius: 4px;
}

/* ------------------------------------------------------------------ *
 * §14/§15 — Section header scroll reveal                             *
 * Eyebrow (--rh:0), headline (--rh:1), subheadline (--rh:2) fade and *
 * rise together when the section enters view — 80ms stagger, once.   *
 * Trigger: the section gets .is-visible from the existing observer.  *
 * ------------------------------------------------------------------ */
.lt-rh {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .62s cubic-bezier(.16, 1, .3, 1),
    transform .62s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--rh, 0) * 80ms);
  will-change: opacity, transform;
}

.is-visible .lt-rh,
.is-visible.lt-rh {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .lt-rh {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------------ *
 * §20 — Reduced motion: stop the ambient marquees and hardware loops *
 * (content stays fully visible; the tracks simply hold still).       *
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ticker-track,
  .partner-track,
  .pilot-marquee-track,
  .pilot-click-hint,
  .pilot-device,
  .pilot-device i,
  .pilot-signal i,
  .outcome-tags span {
    animation: none !important;
  }
}

/* ------------------------------------------------------------------ *
 * §5–§8 — Sticky header                                              *
 * .topbar was position:absolute (inset:0 0 auto) so it scrolled away *
 * with the document. `position: sticky` is unreliable here because   *
 * body carries `overflow:auto` (splash / mobile-nav scroll lock) —   *
 * so the header is pinned with `position: fixed`. The hero already   *
 * reserves matching top space (header.css .hero{padding-top:102px}   *
 * etc.), and the sub-pages do the same, so no layout shifts. Height, *
 * colours and layout are unchanged; only a whisper-soft bottom edge  *
 * is added so it reads as elevated over darker sections. Anchor      *
 * targets get scroll-margin-top so in-page jumps clear the header.   *
 * ------------------------------------------------------------------ */
.topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  /* Above hero content and the floating Experience LORA button (z 30);
     below the brand-reveal splash (z 100), the mobile menu and the
     cookie dialog, which must both be able to sit over the header. */
  z-index: 90;
  /* Fully opaque — the old 94%-ivory let dark sections (intro, use-cases)
     show through once the header overlaps them on scroll. */
  background: var(--color-ivory);
  box-shadow: 0 1px 0 var(--color-plum-12), 0 12px 26px -20px rgba(46, 35, 46, .3);
}

/* Keep the hero's top clearance exactly in step with the header height at the
   smallest breakpoint (header 72px; iteration2's @1100 rule leaves it at 78px). */
@media (max-width: 760px) {
  .hero {
    padding-top: 72px;
  }
}

/* In-page anchor targets clear the fixed header when jumped to. */
main [id],
main[id] {
  scroll-margin-top: 122px;
}

@media (max-width: 1180px) {
  main [id],
  main[id] {
    scroll-margin-top: 96px;
  }
}

@media (max-width: 760px) {
  main [id],
  main[id] {
    scroll-margin-top: 90px;
  }
}

/* ------------------------------------------------------------------ *
 * §13–§16 — Mobile "For guests" card                                 *
 * On desktop the copy sits in a floating panel over the photo. Below *
 * 820px (where the benefit grid is already a single column) that     *
 * panel is taller than the card, so it overflowed / clipped and the  *
 * text sat unreadably over the image. Mobile only: stack it —        *
 * image as its own block on top, then label / headline / description *
 * / benefits below, on a solid ground. The card grows with content.  *
 * Desktop layout is untouched.                                       *
 * ------------------------------------------------------------------ */
@media (max-width: 820px) {
  .value-card.value-guests {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
  }

  .value-card.value-guests > img {
    position: static;
    width: 100%;
    height: clamp(196px, 54vw, 280px);
    object-fit: cover;
    filter: none;
    display: block;
    margin: 0;
  }

  /* Remove the dark gradient that only existed to make overlaid text legible. */
  .value-card.value-guests::after {
    display: none;
  }

  .value-card.value-guests > div {
    position: static;
    inset: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: var(--color-ivory);
    color: var(--color-plum);
    padding: clamp(26px, 7vw, 38px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .value-card.value-guests .value-label {
    margin: 0 0 18px;
  }

  .value-card.value-guests .value-list {
    margin-top: 20px;
  }
}