/*
 * HESPERA DIGITAL / HR PREMIUM — production appearance adapter
 * Approved visual reference: light-motion-lab / site-preview, 20 October 2026 settings; 19 October layout.
 * Load AFTER existing theme/component CSS. Activate with html.hespera-premium.
 * Original section order, widths, grids, card dimensions, responsive composition,
 * content and reveal logic remain owned by the existing site. Only the requested
 * floating navigation intentionally adopts HR's capsule geometry.
 * Full-site sections not covered by observed selectors require the explicit .hd-*
 * hooks below; do not apply them indiscriminately to media, functional overlays,
 * or nested content. See CSS-NOTES.txt.
 */

@font-face {
  font-family: HesperaInter;
  src: url('./assets/fonts/Inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: HesperaManrope;
  src: url('./assets/fonts/Manrope-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

html.hespera-premium {
  color-scheme: light;
  background: var(--bg);
  --bg: #f7f7f2;
  --text: #205a91;
  --deep: #183e65;
  --muted: #4d647d;
  --accent: #2851e6;
  --accent2: #2851e6;
  --font-body: HesperaInter, Inter, Arial, sans-serif;
  --font-display: HesperaManrope, Manrope, Arial, sans-serif;
  --card-alpha: .21;
  --nav-alpha: .58;
  --inner-alpha: .33;
  --card-filter: blur(26px) saturate(140%);
  --nav-filter: blur(18px) saturate(140%);
  --inner-filter: blur(39px) saturate(115%);
  --surface-edge: rgba(44,88,153,.19);
  --icon-tint: #2851e617;
  /* Legacy theme-token bridges: recolor existing consumers without changing layout. */
  --surface-card: rgba(255,255,255,var(--card-alpha));
  --surface-card-strong: rgba(248,251,255,.96);
  --surface-card-hover: rgba(255,255,255,.70);
  --surface-border: rgba(44,88,153,.19);
  --surface-border-active: rgba(40,81,230,.36);
  --surface-shadow: 0 16px 32px -22px rgba(26,66,126,.42),0 3px 9px rgba(26,66,126,.055),inset 0 1px 0 #fff;
  --card: var(--surface-card);
  --border: var(--surface-border);
  scroll-padding-top: 128px;
}
html.hespera-premium body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  -webkit-text-size-adjust: 100%;
  font-synthesis: none;
  isolation: isolate;
}
html.hespera-premium ::selection { background: var(--accent); color: #fff; }
html.hespera-premium :is(button,a,input,textarea,select,[tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

/* Fixed canvas behind normal content. The renderer owns bitmap resolution.
   No scroll container, input capture, opacity mask or fixed-screen scrim is added. */
html.hespera-premium #hesperaMotionLayer {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg);
}
html.hespera-premium #hesperaMotionLayer canvas {
  display: block;
  width: 100%;
  height: 100%;
}
html.hespera-premium :is(.hero,.scene,.hd-section) { background: transparent !important; }

/* Identified obsolete hero backgrounds only. In the original Digital source,
   .hero-mobile-inner::before paints rgba(5,7,14,.68): the mobile darkening bug.
   Section illustrations, process-line, media overlays and other pseudos stay intact. */
html.hespera-premium .hero-bg { background: none !important; }
html.hespera-premium .hero-content::before,
html.hespera-premium .hero-mobile-inner::before,
html.hespera-premium .hero-mobile-inner::after {
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
  box-shadow: none !important;
}
html.hespera-premium :is(.hero-mobile,.hero-mobile-inner,.hero-mobile-copy,.hero-mobile-actions) {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Type appearance only: original sizes, text wrapping and spacing are retained. */
html.hespera-premium :is(.hero-title,.hero-mobile-title,.section-title,.hsg-service-card .hsg-card-title,.hd-heading) {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -.055em !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  background: none !important;
  text-shadow: none !important;
}
html.hespera-premium .hero-title .w { color: var(--text) !important; background: none !important; text-shadow: none !important; }
html.hespera-premium :is(.hero-sub,.hero-meta,.hero-mobile-meta,.hero-location,.hero-micro,.hero-mobile-benefits,.hero-mobile-benefits li,.hero-benefits li,.services-intro,.hsg-card-description,.hsg-card-features li,#process .step p,.hd-text) {
  color: var(--muted) !important;
  text-shadow: none !important;
  font-family: var(--font-body) !important;
}
html.hespera-premium :is(.hero-sub,.hsg-card-description,#process .step p) { font-weight: 400 !important; }
/* R8 targeted readability: keep the palette and layout, strengthen only supporting copy. */
html.hespera-premium body #hero .hero-sub,
html.hespera-premium body #hero .hero-mobile-benefits,
html.hespera-premium body #hero .hero-mobile-benefits li,
html.hespera-premium body #services .services-intro,
html.hespera-premium body #services .hsg-card-description {
  color: var(--deep) !important;
  font-weight: 500 !important;
}
html.hespera-premium .hsg-service-card :is(.hsg-card-feature,.hsg-feature-copy) {
  color: var(--deep) !important;
  font-weight: 600 !important;
}
html.hespera-premium :is(.section-label,.hsg-order,.hsg-feature-icon) { color: var(--accent) !important; text-shadow: none !important; }
html.hespera-premium .hero-kicker {
  color: #244B18 !important;
  background: linear-gradient(115deg, rgba(232,255,167,.82), rgba(196,237,102,.58)) !important;
  border-color: rgba(163,205,88,.55) !important;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 10px 24px -16px rgba(47,87,26,.42) !important;
  font-family: var(--font-body) !important;
  font-weight: 650 !important;
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
}
html.hespera-premium .hero-kicker::before { background: #3f7b24 !important; box-shadow: 0 0 0 3px rgba(196,237,102,.3) !important; }
html.hespera-premium .hero-benefits li i {
  background: rgba(40,81,230,.07) !important;
  border-color: rgba(40,81,230,.14) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}
html.hespera-premium .hero-mobile-benefits li::before { color: var(--accent) !important; background: rgba(40,81,230,.07) !important; border-color: rgba(40,81,230,.14) !important; box-shadow: none !important; }
/* Lee/the integrator adds the icon-specific marker only when installing an actual SVG.
   This avoids blank bullets if icon decoration is not active. */
html.hespera-premium .hero-mobile-benefits li.hd-has-benefit-icon { position: relative; padding-left: 29px !important; }
html.hespera-premium .hero-mobile-benefits li.hd-has-benefit-icon::before { content: none !important; display: none !important; }

/* HR's exact 114deg outer-glass recipe. The same alpha, stops, border tones,
   reflection and shadow are shared by navigation, known cards and mapped cards. */
html.hespera-premium .nav { --surface-alpha: var(--nav-alpha); --surface-filter: var(--nav-filter); }
html.hespera-premium :is(.service-v2-card,.hsg-service-card,#process .step,.hd-glass-card) {
  --surface-alpha: var(--card-alpha);
  --surface-filter: var(--card-filter);
  position: relative;
}
html.hespera-premium :is(.nav,.service-v2-card,.hsg-service-card,#process .step,.hd-glass-card),
html.hespera-premium .service-v2-card.hsg-service-card.hsg-glass-surface {
  background: linear-gradient(114deg,rgba(255,255,255,var(--surface-alpha)),rgba(255,255,255,calc(var(--surface-alpha)*32/58)) 43%,rgba(245,250,255,calc(var(--surface-alpha)*45/58)) 76%,rgba(255,255,255,calc(var(--surface-alpha)*62/58))) !important;
  border: 1px solid rgba(255,255,255,.93) !important;
  border-right-color: rgba(255,255,255,.78) !important;
  border-bottom-color: rgba(54,95,156,.24) !important;
  box-shadow: 0 16px 32px -22px rgba(26,66,126,.42),0 3px 9px rgba(26,66,126,.055),inset 0 1px 0 #fff,inset 1px 0 0 rgba(255,255,255,.54),inset 0 -1px 0 rgba(255,255,255,.68) !important;
  backdrop-filter: var(--surface-filter) !important;
  -webkit-backdrop-filter: var(--surface-filter) !important;
  color: var(--text) !important;
}
html.hespera-premium :is(.nav,.service-v2-card,.hsg-service-card,#process .step,.hd-glass-card)::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 2px !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;
  border: 1px solid rgba(255,255,255,.86) !important;
  border-right-color: rgba(255,255,255,.23) !important;
  border-bottom-color: rgba(255,255,255,.45) !important;
  border-left-color: rgba(255,255,255,.31) !important;
  background: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
  filter: none !important;
  z-index: 0 !important;
}
html.hespera-premium :is(.nav,.service-v2-card,.hsg-service-card,#process .step,.hd-glass-card)::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 7% !important;
  right: 9% !important;
  top: 0 !important;
  bottom: auto !important;
  width: auto !important;
  height: 1px !important;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.98) 24%,rgba(255,255,255,.5) 67%,transparent) !important;
  border: 0 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
  z-index: 1 !important;
}
/* No card width, padding, radius, grid or transforms are reset here. */
html.hespera-premium :is(.service-v2-card,.hsg-service-card,.hd-glass-card):is(:hover,:focus-within) {
  background: linear-gradient(114deg,rgba(255,255,255,var(--surface-alpha)),rgba(255,255,255,calc(var(--surface-alpha)*32/58)) 43%,rgba(245,250,255,calc(var(--surface-alpha)*45/58)) 76%,rgba(255,255,255,calc(var(--surface-alpha)*62/58))) !important;
  border-bottom-color: rgba(54,95,156,.24) !important;
}

/* Explicitly authorized HR floating capsule geometry; existing links are kept. */
html.hespera-premium .nav {
  position: fixed !important;
  top: 18px !important;
  left: 24px !important;
  right: 24px !important;
  bottom: auto !important;
  width: calc(100% - 48px) !important;
  max-width: 1440px;
  margin: 0 auto !important;
  min-height: 78px;
  box-sizing: border-box;
  padding: 10px 14px 10px 23px;
  border-radius: 999px !important;
  transform: none !important;
  color: var(--deep) !important;
  overflow: visible !important;
}
html.hespera-premium .nav-inner { position: relative; width: 100% !important; height: auto !important; min-height: 56px; margin: 0 !important; gap: 22px; }
html.hespera-premium .nav .logo { flex-shrink: 0; gap: 9px; }
html.hespera-premium .nav .logo-mark-svg { width: 32px; height: 32px; filter: none !important; }
html.hespera-premium .nav .logo-mark-svg g { stroke: var(--accent) !important; }
html.hespera-premium .nav .logo-text { font-size: 18px; }
html.hespera-premium .nav .logo-text em { font-size: 8px; letter-spacing: .3em; }
html.hespera-premium .nav .nav-tools { gap: 10px; }
html.hespera-premium .nav .nav-links { margin-left: auto; gap: 4px; }
html.hespera-premium .nav .nav-links > a { padding: 12px 15px; border-radius: 999px; font-size: 13px; line-height: 20px; font-weight: 700 !important; white-space: nowrap; }
html.hespera-premium :is(.logo-text,.logo-text em,.nav-links a) { font-family: var(--font-body) !important; color: var(--deep) !important; text-shadow: none !important; }
html.hespera-premium .nav-links a:hover { color: var(--accent) !important; background: rgba(255,255,255,.45); }
html.hespera-premium :is(.lang-switch,.social-switch) { background: rgba(255,255,255,.18) !important; border-color: rgba(55,91,139,.14) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.hespera-premium .lang-switch button { color: var(--deep) !important; font-family: var(--font-body) !important; }
html.hespera-premium .lang-switch button.active { background: rgba(255,255,255,.88) !important; color: var(--deep) !important; box-shadow: 0 1px 4px rgba(31,66,116,.07) !important; }
html.hespera-premium .social-switch a { box-shadow: none !important; background: none !important; }
html.hespera-premium .social-switch a[aria-label*="TikTok"] svg { filter: none !important; }
html.hespera-premium .nav-menu-toggle { background: rgba(255,255,255,.38) !important; border-color: rgba(74,111,162,.16) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important; }
html.hespera-premium .nav-menu-toggle span { background: var(--deep) !important; }

/* Preserve the existing menu controller. display:grid makes its compact-mode
   .menu-open state work between 861 and 1279px, where legacy CSS hid the menu.
   Hidden/aria-expanded/keyboard behavior remains the original controller's job. */
html.hespera-premium .nav .mobile-menu {
  position: absolute !important;
  top: calc(100% + 9px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  transform: none !important;
  border-radius: 25px !important;
  background: linear-gradient(120deg,rgba(255,255,255,.96),rgba(243,248,255,.94)) !important;
  border: 1px solid rgba(255,255,255,.97) !important;
  border-bottom-color: var(--surface-edge) !important;
  box-shadow: 0 17px 34px -18px rgba(25,63,123,.28),inset 0 1px 0 #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  max-height: calc(100dvh - 128px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
html.hespera-premium .mobile-menu a { color: var(--deep) !important; font-family: var(--font-body) !important; }
html.hespera-premium .mobile-menu .mobile-cta { background: var(--accent) !important; color: #fff !important; }
html.hespera-premium .nav.menu-open .mobile-menu { opacity: 1; pointer-events: auto; }
/* Keep the Digital section-indicator feature, but remove its dark/neon surface. */
html.hespera-premium .mobile-section-bar { color: var(--deep) !important; background: linear-gradient(114deg,rgba(255,255,255,.88),rgba(245,250,255,.78)) !important; border-color: rgba(255,255,255,.93) !important; border-bottom-color: var(--surface-edge) !important; box-shadow: 0 7px 18px -12px rgba(31,66,116,.12),inset 0 1px 0 #fff !important; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); text-shadow: none !important; }

/* Actions preserve their labels, URLs, handlers and original placement. */
html.hespera-premium :is(.nav-cta,.btn-primary,.hsg-service-card .hsg-card-action,.hd-primary) {
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  box-shadow: 0 5px 13px rgba(40,81,230,.086) !important;
  font-family: var(--font-body) !important;
  font-weight: 650 !important;
  text-shadow: none !important;
  transition: background .22s,box-shadow .22s,transform .22s !important;
}
html.hespera-premium :is(.nav-cta,.btn-primary,.hsg-card-action,.hd-primary):hover {
  background: #2449cf !important;
  background: color-mix(in srgb,var(--accent) 90%,#102a43) !important;
  box-shadow: 0 10px 25px rgba(40,81,230,.15) !important;
}
html.hespera-premium :is(.btn-ghost,.hsg-service-card .hsg-card-details,.services-v2-arrows button,.hd-secondary) {
  color: var(--deep) !important;
  background: linear-gradient(138deg,rgba(255,255,255,.86),rgba(255,255,255,.53) 46%,rgba(240,246,255,.64)) !important;
  border: 1px solid rgba(255,255,255,.97) !important;
  border-bottom-color: var(--surface-edge) !important;
  border-right-color: rgba(87,123,172,.15) !important;
  border-radius: 999px;
  box-shadow: 0 7px 18px -12px rgba(31,66,116,.12),0 1px 3px rgba(31,66,116,.035),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.7) !important;
  backdrop-filter: blur(12px) saturate(128%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(128%) !important;
  font-family: var(--font-body) !important;
  font-weight: 650 !important;
  text-shadow: none !important;
}
html.hespera-premium :is(.btn-ghost,.hsg-card-details,.hd-secondary):hover { background: rgba(255,255,255,.94) !important; border-bottom-color: rgba(40,81,230,.36) !important; }
html.hespera-premium .nav .nav-cta { min-height: 50px; padding-left: 21px !important; padding-right: 9px !important; font-size: 12px; gap: 12px; }
/* Remove legacy decorative button glow only on controls mapped to the new style. */
html.hespera-premium :is(.btn-primary,.btn-ghost,.hd-primary,.hd-secondary)::before,
html.hespera-premium :is(.btn-primary,.btn-ghost,.hd-primary,.hd-secondary)::after { content: none !important; display: none !important; }

/* Line icons match HR; retain semantic/brand-specific artwork, no universal replacement. */
html.hespera-premium :is(.ui-icon,.hd-icon) { display: block; width: 22px; height: 22px; flex: 0 0 auto; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
html.hespera-premium .hr-action-icon { display: grid; place-items: center; width: 33px; height: 33px; flex: 0 0 33px; border-radius: 50%; background: rgba(255,255,255,.12); transition: transform .22s,background .22s; }
html.hespera-premium .hr-action-icon .ui-icon { width: 20px; height: 20px; stroke: currentColor !important; }
html.hespera-premium .hr-action-label { min-width: 0; }
html.hespera-premium .hd-has-action-icon { display: inline-flex !important; align-items: center; justify-content: center; gap: 14px; }
html.hespera-premium :is(.btn-primary,.btn-ghost,.hd-primary,.hd-secondary).hd-has-action-icon { padding-right: 12px !important; }
html.hespera-premium .nav-cta .hr-action-icon { width: 29px; height: 29px; flex-basis: 29px; }
html.hespera-premium :is(.btn-ghost,.hsg-card-details,.hd-secondary) .hr-action-icon { background: rgba(40,81,230,.047); color: var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
html.hespera-premium :is(a,button):hover > .hr-action-icon { transform: translateX(2px); }
html.hespera-premium .hr-benefit-icon { position: absolute; left: 0; top: .12em; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: rgba(40,81,230,.07); color: var(--accent); box-shadow: inset 0 1px 0 #fff; }
html.hespera-premium .hr-benefit-icon .ui-icon { width: 16px; height: 16px; }
html.hespera-premium .hsg-service-card .hsg-card-icon-tile {
  background: linear-gradient(140deg,rgba(255,255,255,.93),#e9effa) !important;
  border: 1px solid rgba(40,81,230,.133) !important;
  border-top-color: #fff !important;
  box-shadow: 0 5px 12px -10px rgba(36,71,120,.4) !important;
  color: var(--accent) !important;
  border-radius: 16px !important;
  --icon-tint: #2851e617;
}
html.hespera-premium .hsg-card-icon-tile .ui-icon { width: 30px !important; height: 30px !important; stroke: currentColor !important; stroke-width: 1.65 !important; fill: none !important; filter: none !important; }
html.hespera-premium .hsg-service-card[data-hsg-service="onboarding"] .hsg-card-icon-tile { color: #6960b6 !important; --icon-tint: #6960b617; }
html.hespera-premium .hsg-service-card[data-hsg-service="booking"] .hsg-card-icon-tile { color: #347caf !important; --icon-tint: #347caf17; }
html.hespera-premium .hsg-card-subtitle { color: var(--deep) !important; font-family: var(--font-body) !important; font-weight: 650 !important; }
html.hespera-premium .hsg-card-visual { border-color: rgba(255,255,255,.93) !important; box-shadow: 0 18px 35px -22px rgba(40,82,123,.21) !important; }
/* The production image's existing ↗ affordance remains functional and visible;
   only its former dark surface is recolored, rather than erasing the affordance. */
html.hespera-premium .hsg-card-visual::after { color: var(--accent) !important; background: rgba(255,255,255,.86) !important; border-color: rgba(255,255,255,.97) !important; box-shadow: 0 5px 13px rgba(40,81,230,.086) !important; }

/* Inner glass has independent parameters and does not inherit outer-card blur. */
html.hespera-premium :is(.hsg-service-card .hsg-card-features,.hd-glass-inner) {
  background: linear-gradient(135deg,rgba(255,255,255,var(--inner-alpha)),rgba(240,246,255,calc(var(--inner-alpha)*.7))) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  border-bottom-color: rgba(40,81,230,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4) !important;
  backdrop-filter: var(--inner-filter) !important;
  -webkit-backdrop-filter: var(--inner-filter) !important;
}
html.hespera-premium .hsg-card-features li { border-color: rgba(40,81,230,.10) !important; }
html.hespera-premium .hsg-feature-icon { color: var(--accent) !important; background: rgba(40,81,230,.06) !important; border-color: rgba(40,81,230,.12) !important; box-shadow: none !important; display: grid; place-items: center; }
html.hespera-premium .hsg-feature-icon .ui-icon { width: 16px; height: 16px; }
html.hespera-premium .services-v2-counter { color: var(--muted) !important; font-family: var(--font-body) !important; }
html.hespera-premium .services-v2-arrows button:disabled { opacity: .4; }
html.hespera-premium #process .step-num { background: linear-gradient(140deg,rgba(255,255,255,.93),#e9effa) !important; color: var(--accent) !important; border-color: rgba(40,81,230,.133) !important; border-top-color: #fff !important; box-shadow: 0 5px 12px -10px rgba(36,71,120,.4) !important; font-family: var(--font-display) !important; }
html.hespera-premium #process .step h3 { color: var(--deep) !important; font-family: var(--font-body) !important; font-weight: 650 !important; text-shadow: none !important; }

@media (max-width:1279px) {
  html.hespera-premium .nav .nav-links { display: none; }
  html.hespera-premium .nav .nav-cta { display: none !important; }
  html.hespera-premium .nav .nav-menu-toggle { display: flex; flex-shrink: 0; }
  html.hespera-premium .nav .nav-tools { margin-left: auto; }
  html.hespera-premium .nav-inner { gap: 12px; }
  html.hespera-premium .nav .mobile-menu { display: grid; }
  html.hespera-premium .nav:not(.menu-open) .mobile-menu { opacity: 0; pointer-events: none; visibility: hidden; }
  html.hespera-premium .nav.menu-open .mobile-menu { visibility: visible; }
}
@media (min-width:1280px) {
  html.hespera-premium .nav .mobile-menu { display: none !important; }
}
@media (max-width:1000px) {
  html.hespera-premium .nav { top: 12px !important; left: 16px !important; right: 16px !important; width: calc(100% - 32px) !important; min-height: 70px; padding: 9px 11px 9px 18px; }
  html.hespera-premium .nav-inner { min-height: 50px; }
}
@media (max-width:780px) {
  html.hespera-premium .nav { top: 10px !important; left: 10px !important; right: 10px !important; width: calc(100% - 20px) !important; min-height: 64px; padding: 9px 11px 9px 18px; }
  html.hespera-premium .nav-inner { min-height: 44px; gap: 10px; }
  html.hespera-premium .nav .nav-menu-toggle { width: 40px; height: 40px; }
  html.hespera-premium .nav .logo-text { font-size: 18px; }
  html.hespera-premium .nav .logo-mark-svg { width: 28px; height: 28px; }
  html.hespera-premium .nav .lang-switch { padding: 3px; gap: 0; }
  html.hespera-premium .nav .lang-switch button { padding: 4px; min-width: 31px; min-height: 32px; font-size: 11px; }
  html.hespera-premium .nav .lang-flip { width: 23px; height: 17px; }
  html.hespera-premium .nav .mobile-menu { max-height: calc(100dvh - 110px); }
  html.hespera-premium .hero-mobile { --header-h: 80px; }
  html.hespera-premium .hero-mobile-ctas .hr-action-icon { width: 29px; height: 29px; flex-basis: 29px; }
  html.hespera-premium .hsg-card-action .hr-action-icon { width: 27px; height: 27px; flex-basis: 27px; }
}
@media (max-width:600px) {
  html.hespera-premium .nav .nav-tools { gap: 0; }
  html.hespera-premium .nav .mobile-menu .social-switch { display: flex; justify-self: start; margin: 8px 10px 4px; padding: 4px; gap: 4px; }
  html.hespera-premium .nav .mobile-menu .social-switch a { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; }
  html.hespera-premium .nav .mobile-menu .social-switch svg { width: 19px; height: 19px; }
}
@media (max-width:390px) {
  html.hespera-premium .nav { padding-left: 13px; }
  html.hespera-premium .nav-inner { gap: 7px; }
  html.hespera-premium .nav .logo { gap: 6px; }
  html.hespera-premium .nav .logo-mark-svg { width: 25px; height: 25px; }
  html.hespera-premium .nav .logo-text { font-size: 16px; }
  html.hespera-premium .nav .logo-text em { display: block; font-size: 7px; }
  html.hespera-premium .nav .nav-menu-toggle { width: 36px; height: 40px; }
  html.hespera-premium .nav .lang-switch button { min-width: 29px; }
  html.hespera-premium .nav .lang-flip { width: 21px; }
}

/* Preference fallbacks affect only new theme surfaces, not content animation. */
@media (prefers-reduced-motion:reduce) {
  html.hespera-premium .hr-action-icon,
  html.hespera-premium :is(.nav-cta,.btn-primary,.btn-ghost,.hd-primary,.hd-secondary) { transition: none !important; }
  html.hespera-premium :is(a,button):hover > .hr-action-icon { transform: none !important; }
}
@media (prefers-reduced-transparency:reduce) {
  html.hespera-premium :is(.nav,.service-v2-card,.hsg-service-card,#process .step,.hd-glass-card,.hd-glass-inner,.hsg-service-card .hsg-card-features) { background: #f8fbff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}
@media (prefers-contrast:more) {
  html.hespera-premium :is(.nav,.service-v2-card,.hsg-service-card,#process .step,.hd-glass-card,.hd-glass-inner,.hsg-service-card .hsg-card-features) { background: #fff !important; border-color: #42698e !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}
@media (forced-colors:active) {
  html.hespera-premium :is(.nav,.service-v2-card,.hsg-service-card,#process .step,.hd-glass-card,.hd-glass-inner,.hsg-service-card .hsg-card-features) { color: CanvasText !important; background: Canvas !important; border-color: CanvasText !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  html.hespera-premium :is(.nav,.service-v2-card,.hsg-service-card,#process .step,.hd-glass-card)::before,
  html.hespera-premium :is(.nav,.service-v2-card,.hsg-service-card,#process .step,.hd-glass-card)::after { display: none !important; }
  html.hespera-premium :is(.hero-title,.hero-mobile-title,.section-title,.hd-heading) { color: CanvasText !important; -webkit-text-fill-color: CanvasText !important; }
}

/* Existing mobile section indicator: keep behavior; match HR tones. */
html.hespera-premium .mobile-section-bar__label { color: var(--deep) !important; text-shadow: none !important; }
html.hespera-premium .mobile-section-bar__line { background: rgba(40,81,230,.08) !important; }
html.hespera-premium .mobile-section-bar__line::after { background: linear-gradient(90deg,var(--accent),#5484c9) !important; box-shadow: none !important; }

/* 20 October: source-confirmed finishing corrections. These selectors exist in
   Digital's captured original HTML/reference.css; no layout or content rewrite.
   Work ordinals are text: Lee must change 01 -> 1 in their source template. */
html.hespera-premium #work .work-index {
  color: #8d8b82 !important;
  -webkit-text-fill-color: #8d8b82 !important;
  -webkit-text-stroke: 0 !important;
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}
/* Override the captured #pricing .pc-price {color:#10182a!important} rule.
   Keep amounts, billing periods, locale formatting and all original dimensions. */
html.hespera-premium #pricing .pc-price,
html.hespera-premium #pricing .pc-price > span:not(.pc-price-suffix),
html.hespera-premium #pricing .pc-setup-price {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  text-shadow: none !important;
}
html.hespera-premium #pricing .pc-price-suffix {
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
}
/* "Direct contact" is the verified English footer.contactLabel translation.
   Its mail/social links retain their original hrefs, icon artwork and events. */
html.hespera-premium .footer .footer-contact-card {
  background: linear-gradient(114deg,rgba(255,255,255,var(--card-alpha)),rgba(255,255,255,calc(var(--card-alpha)*32/58)) 43%,rgba(245,250,255,calc(var(--card-alpha)*45/58)) 76%,rgba(255,255,255,calc(var(--card-alpha)*62/58))) !important;
  border-color: rgba(255,255,255,.93) !important;
  border-right-color: rgba(255,255,255,.78) !important;
  border-bottom-color: rgba(54,95,156,.24) !important;
  box-shadow: 0 16px 32px -22px rgba(26,66,126,.42),0 3px 9px rgba(26,66,126,.055),inset 0 1px 0 #fff,inset 1px 0 0 rgba(255,255,255,.54),inset 0 -1px 0 rgba(255,255,255,.68) !important;
  backdrop-filter: var(--card-filter) !important;
  -webkit-backdrop-filter: var(--card-filter) !important;
}
html.hespera-premium .footer .footer-contact-card .footer-card-label { color: var(--muted) !important; text-shadow: none !important; }
html.hespera-premium .footer .footer-contact-card .footer-contact-link,
html.hespera-premium .footer .footer-contact-card .footer-socials a {
  color: var(--deep) !important;
  background: linear-gradient(138deg,rgba(255,255,255,.86),rgba(255,255,255,.53) 46%,rgba(240,246,255,.64)) !important;
  border-color: rgba(255,255,255,.97) !important;
  border-right-color: rgba(87,123,172,.15) !important;
  border-bottom-color: var(--surface-edge) !important;
  box-shadow: 0 7px 18px -12px rgba(31,66,116,.12),0 1px 3px rgba(31,66,116,.035),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.7) !important;
  text-shadow: none !important;
}
html.hespera-premium .footer .footer-contact-card .footer-contact-link:is(:hover,:focus-visible,:active),
html.hespera-premium .footer .footer-contact-card .footer-socials a:is(:hover,:focus-visible,:active) {
  color: var(--deep) !important;
  background: rgba(255,255,255,.94) !important;
  border-bottom-color: rgba(40,81,230,.36) !important;
}
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  html.hespera-premium .footer .footer-contact-card {
    background: #f8fbff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
@media (forced-colors:active) {
  html.hespera-premium #work .work-index,
  html.hespera-premium #pricing .pc-price,
  html.hespera-premium #pricing .pc-price > span,
  html.hespera-premium #pricing .pc-setup-price {
    color: CanvasText !important;
    -webkit-text-fill-color: CanvasText !important;
  }
  html.hespera-premium .footer .footer-contact-card,
  html.hespera-premium .footer .footer-contact-card .footer-contact-link,
  html.hespera-premium .footer .footer-contact-card .footer-socials a {
    color: CanvasText !important;
    background: Canvas !important;
    border-color: CanvasText !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

html.hespera-premium #pricing :is(.pc-price,.pc-setup-price) { font-family: var(--font-display) !important; font-weight: 600 !important; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.03em; }