/*
 * 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), gentle fade + a very subtle scale-in,  *
 * 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: 0;
  transform: scale(.972);
  animation: lt-splash-in 620ms cubic-bezier(.22, 1, .36, 1) 120ms forwards;
}

@keyframes lt-splash-in {
  to { opacity: 1; transform: scale(1); }
}

/* 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; }
}

/* ------------------------------------------------------------------ *
 * §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;
  }
}