/* ============================================================================
   rrflows global styles
   Loads after variables.css. Reset, typography, layout utilities, components.
   ============================================================================ */

/* Reset */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; background: var(--color-bg); }

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  background: var(--color-ink);
  color: var(--color-bg);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-body-sm);
  z-index: 1000;
  transition: top var(--duration-base) var(--ease-standard);
}
.skip-link:focus { top: var(--space-4); }

/* Visually hidden helper */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   Containers + sections
   ============================================================================ */

.container {
  width: 100%;
  max-width: var(--max-w-page);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
@media (min-width: 768px) { .container { padding-inline: var(--container-pad-md); } }
@media (min-width: 1280px) { .container { padding-inline: var(--container-pad-lg); } }

.container--content { max-width: var(--max-w-content); }
.container--hero { max-width: var(--max-w-hero); }
.container--prose { max-width: var(--max-w-prose); }

.section {
  padding-block: var(--space-24);
}
.section--hero {
  padding-block: var(--space-40);
}
.section--strip {
  padding-block: var(--space-12);
}
/* Section-level surface modifiers were creating visible seams between
   adjacent cream sections. Unified to --color-bg so the page reads as one
   continuous canvas. The surface tokens themselves are still in use for
   inset elements (tablet frame, marquee strip, etc.) where the slight
   tonal step is intentional. */
.section--surface,
.section--surface-strong { background: var(--color-bg); }

@media (max-width: 767px) {
  .section { padding-block: var(--space-12); }
  .section--hero { padding-block: var(--space-20); }
  .section--strip { padding-block: var(--space-6); }
}

/* ============================================================================
   Typography helpers
   ============================================================================ */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--color-accent);
}
.kicker--plain { color: var(--color-ink-56); }
.kicker--plain::before { background: var(--color-ink-40); }

/* Stratic-inspired `//` mark prefix — replaces the hairline rule on .kicker
   with a small monospaced `//` glyph. Used as the section eyebrow on the
   homepage redesign. The `//` sits inline with the label text. */
.kicker--mark {
  color: var(--color-accent);
  font-family: var(--font-body);
}
.kicker--mark::before {
  content: "//";
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  background: none;
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: 0.9375rem;
  letter-spacing: -0.05em;
  color: var(--color-accent);
  line-height: 1;
  margin-right: 0.45em;   /* breathing room between the // mark and the label */
}

.accent-words { color: var(--color-accent); }

.lead {
  font-size: var(--fs-body-lead);
  line-height: var(--lh-body);
  color: var(--color-ink-72);
  max-width: 56ch;
}

.prose {
  max-width: var(--max-w-prose);
  color: var(--color-ink-72);
  line-height: var(--lh-body);
}
.prose p + p { margin-top: var(--space-4); }

/* ============================================================================
   Buttons
   ============================================================================ */

/* Buttons match the shadcn UI pattern: pill (rounded-full), tight sizing
   (h-9 default = 36px, h-10 lg = 40px, h-8 sm = 32px), small shadow on
   filled, alpha-blend hover. Two variants: primary (filled accent) and
   ghost (outlined). */
/* Buttons match the shadcn UI pattern: pill (rounded-full), tight sizing
   (h-9 default = 36px, h-10 lg = 40px, h-8 sm = 32px), small shadow on
   filled, alpha-blend hover. Two variants: primary (filled accent) and
   ghost (outlined).

   Hover behavior is intentionally tactile: 2px lift + shadow depth on
   hover, snap back to 0 on active (press). Easing curves are tuned so
   the lift feels organic — slightly slower hover-in than active-out. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transform: translateY(0);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Hover-OUT path: this transition runs when leaving hover/focus/active
     and returning to base. Fast 150ms ease-out so the button snaps back
     without lingering. */
  transition: background-color 150ms ease,
              color 150ms ease,
              border-color 150ms ease,
              transform 150ms ease-out,
              box-shadow 150ms ease-out;
  text-decoration: none;
  border: 1px solid transparent;
  will-change: transform;
}

/* Diagonal shine sweep. Sits behind text via z-index: -1 inside the button's
   isolated stacking context. Parked off-screen right at rest; sweeps to
   off-screen left over 1s on hover/focus. Reduced-motion disables the
   transition (gradient stays parked). */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(45deg,
    transparent 25%,
    rgba(255, 255, 255, 0.7) 50%,
    transparent 75%,
    transparent 100%);
  background-size: 250% 250%;
  background-position: 200% 0;
  background-repeat: no-repeat;
  transition: background-position 1000ms ease;
  pointer-events: none;
  z-index: -1;
}

.btn:hover::before,
.btn:focus-visible::before {
  background-position: -100% 0;
}

/* Hover-IN path: longer duration with a slight overshoot curve so the
   lift feels organic. Asymmetric with the hover-out above — decisive
   going up, fast coming back. */
.btn:hover,
.btn:focus-visible {
  transition: background-color 200ms ease,
              color 200ms ease,
              border-color 200ms ease,
              transform 220ms cubic-bezier(0.34, 1.2, 0.64, 1),
              box-shadow 240ms ease;
}

.btn:active {
  transform: translateY(0) scale(0.98);
  transition: transform 90ms ease-out,
              background-color 90ms ease,
              box-shadow 90ms ease;
}

.btn-primary {
  background: var(--color-accent);
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: color-mix(in srgb, var(--color-accent) 90%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(30, 58, 95, 0.22),
              0 1px 2px rgba(0, 0, 0, 0.06);
}
.btn-primary:active {
  background: var(--color-accent-hover);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-border-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.10),
              0 1px 2px rgba(0, 0, 0, 0.04);
}
.btn-ghost:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Size variants — shadcn h-8 / h-10 */
.btn-sm { height: 32px; padding: 0 12px; font-size: 0.75rem; }
.btn-lg { height: 40px; padding: 0 32px; font-size: var(--fs-body-sm); }

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn:hover,
  .btn:focus-visible,
  .btn:active {
    transform: none;
    transition-duration: 0ms;
  }
  .btn::before,
  .btn:hover::before,
  .btn:focus-visible::before {
    transition: none;
    background: none;
  }
}

/* ============================================================================
   Text links (inline)
   ============================================================================ */

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-border-strong);
  padding-bottom: 2px;
  transition: var(--transition-color);
}
.text-link:hover,
.text-link:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* ============================================================================
   Hairline utilities
   ============================================================================ */

.hairline-top { border-top: 1px solid var(--color-border); }
.hairline-bottom { border-bottom: 1px solid var(--color-border); }
.hairline-y { border-block: 1px solid var(--color-border); }

/* ============================================================================
   Site Nav
   ============================================================================ */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
.site-nav.scrolled {
  background: var(--color-bg);
  border-bottom-color: var(--color-border);
}

/* Reserve space below the fixed nav for content. Index page overrides this so
   the hero extends behind the transparent nav. */
main {
  padding-top: var(--nav-height);
}
[data-barba-namespace="index"] main {
  padding-top: 0;
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-w-page);
  margin-inline: auto;
  /* Uniform 12px gutters on both sides at every breakpoint — wordmark
     and the right-side CTA both hug their respective edges tightly. */
  padding: 18px 12px;
}

.site-nav__wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--color-ink);
  text-decoration: none;
}

.site-nav__wordmark img {
  display: block;
  height: 48px;
  width: auto;
  transition: transform var(--duration-base) var(--ease-out),
              filter var(--duration-base) var(--ease-out);
}

.site-nav__wordmark img:hover {
  transform: translateY(-2px);
  filter: brightness(0.7);
}

.site-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Top-level link OR Services trigger button — share the same baseline. */
.site-nav__links > li > a,
.site-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-ink-72);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  padding: 8px 14px;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}
.site-nav__links > li > a:hover,
.site-nav__links > li > a:focus-visible,
.site-nav__trigger:hover,
.site-nav__trigger:focus-visible,
.site-nav__item.is-open > .site-nav__trigger {
  color: var(--color-ink);
  background: var(--color-accent-soft);
  outline: none;
}
.site-nav__caret {
  transition: transform var(--duration-base) var(--ease-standard);
}
.site-nav__item.is-open .site-nav__caret {
  transform: rotate(180deg);
}

/* Services dropdown panel */
.site-nav__item--has-menu {
  position: relative;
}
.site-nav__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 640px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms var(--ease-standard),
              transform 180ms var(--ease-standard),
              visibility 0s linear 180ms;
  z-index: 50;
}
.site-nav__item.is-open > .site-nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 180ms var(--ease-standard),
              transform 180ms var(--ease-standard),
              visibility 0s linear 0s;
}
.site-nav__dropdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--duration-base) var(--ease-standard);
}
.dropdown-item:hover,
.dropdown-item:focus-visible {
  background: var(--color-accent-soft);
  outline: none;
}
.dropdown-item__icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-accent);
}
.dropdown-item__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dropdown-item__title {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  line-height: 1.3;
}
.dropdown-item__desc {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--color-ink-56);
  line-height: var(--lh-body);
}

/* Mobile hamburger */
.site-nav__toggle {
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  position: relative;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.site-nav__toggle-bar {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--color-ink);
  transition: transform var(--duration-base) var(--ease-standard),
              opacity var(--duration-base) var(--ease-standard);
}

/* ----------------------------------------------------------------------------
   Mobile slide-in sheet
   ---------------------------------------------------------------------------- */
.site-nav__sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  visibility: hidden;
}
.site-nav__sheet[aria-hidden="false"] {
  visibility: visible;
  pointer-events: auto;
}
.site-nav__sheet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  transition: opacity 240ms var(--ease-standard);
}
.site-nav__sheet[aria-hidden="false"] .site-nav__sheet-overlay {
  opacity: 1;
}
.site-nav__sheet-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 88vw);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 280ms var(--ease-standard);
  box-shadow: -8px 0 28px rgba(15, 23, 42, 0.14);
}
.site-nav__sheet[aria-hidden="false"] .site-nav__sheet-panel {
  transform: translateX(0);
}
.site-nav__sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.site-nav__sheet-close {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-ink);
  transition: background-color var(--duration-base) var(--ease-standard);
}
.site-nav__sheet-close:hover,
.site-nav__sheet-close:focus-visible {
  background: var(--color-accent-soft);
  outline: none;
}
.site-nav__sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.site-nav__sheet-link {
  display: block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  text-decoration: none;
  padding: var(--space-3) 0;
}
.site-nav__sheet-footer {
  padding: var(--space-5) var(--space-6) var(--space-6);
  border-top: 1px solid var(--color-border);
}
.site-nav__sheet-cta {
  width: 100%;
  display: inline-flex;
  justify-content: center;
}

/* Accordion (mobile only) */
.accordion-item {
  border-bottom: 1px solid var(--color-border);
}
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  text-align: left;
}
.accordion-caret {
  transition: transform var(--duration-base) var(--ease-standard);
}
.accordion-trigger[aria-expanded="true"] .accordion-caret {
  transform: rotate(180deg);
}
.accordion-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) 0 var(--space-4);
}
.accordion-content a {
  display: block;
  padding: var(--space-2) 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--color-ink-72);
  text-decoration: none;
}
.accordion-content a:hover,
.accordion-content a:focus-visible {
  color: var(--color-ink);
  outline: none;
}

@media (max-width: 1023px) {
  .site-nav__menu { display: none; }
  .site-nav__toggle { display: inline-flex; }
}

/* ============================================================================
   Site Footer
   ============================================================================ */

.site-footer {
  position: relative;
  margin-top: var(--space-24);
  padding-top: var(--space-16);
  padding-bottom: var(--space-12);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  overflow: hidden;
  /* Subtle radial glow at the top center, mirroring the shadcnblocks
     component's "bg-[radial-gradient(35%_128px_at_50%_0%,...)]" treatment. */
  background-image: radial-gradient(35% 128px at 50% 0%, rgba(30, 58, 95, 0.07), transparent);
}

/* Big background brand wordmark. Anchored to the bottom of the footer and
   bleeds the bulk of its height below the bottom edge — only the top slice
   of the letterforms is visible. Wide SVG (~545x200, 2.7:1) sized to span
   most of the footer width. Opacity tuned so the lettering reads as a
   watermark, not a focal element. Non-interactive. */
.site-footer__bigmark {
  position: absolute;
  left: 50%;
  bottom: -55%;
  transform: translateX(-50%);
  width: clamp(600px, 92vw, 1600px);
  height: auto;
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.site-footer__inner {
  position: relative;
  z-index: 1;
}

/* Top hairline divider with a soft blur glow at the center — matches the
   component's "absolute top-0 ... h-px w-1/3 ... blur" element. */
.site-footer__divider {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 33%;
  height: 1px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.18);
  filter: blur(0.5px);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-12);
  max-width: var(--max-w-page);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
@media (min-width: 768px) { .site-footer__inner { padding-inline: var(--container-pad-md); } }
@media (min-width: 1280px) { .site-footer__inner { padding-inline: var(--container-pad-lg); } }

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

@media (max-width: 1023px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}
@media (max-width: 767px) {
  .site-footer__cols {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8) var(--space-6);
  }
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.site-footer__wordmark {
  display: inline-flex;
  align-items: center;
}

.site-footer__wordmark img {
  display: block;
  height: 40px;
  width: auto;
}
.site-footer__tagline {
  color: var(--color-ink-72);
  font-size: var(--fs-body-sm);
  max-width: 30ch;
  margin: 0;
}
.site-footer__copyright {
  color: var(--color-ink-56);
  font-size: var(--fs-body-sm);
  margin: var(--space-6) 0 0;
}

.site-footer__heading {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
}
.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.site-footer__col a {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-body-sm);
  color: var(--color-ink-72);
  text-decoration: none;
  transition: color 300ms var(--ease-standard);
}
.site-footer__col a:hover,
.site-footer__col a:focus-visible {
  color: var(--color-ink);
}
.site-footer__more {
  margin-top: var(--space-2);
  color: var(--color-accent) !important;
  font-weight: var(--fw-medium);
}

.site-footer__social-link svg {
  margin-right: var(--space-2);
  flex-shrink: 0;
}

/* Entrance animation — each .site-footer__animated element fades from
   blur(4px) translateY(-8px) opacity 0 to clear when scrolled into view.
   JS adds .is-revealed when the element enters the viewport. Stagger is
   driven by the data-stagger attribute (or default 0 for the brand). */
.site-footer__animated {
  filter: blur(4px);
  transform: translateY(-8px);
  opacity: 0;
  transition: filter 800ms ease, transform 800ms ease, opacity 800ms ease;
}
.site-footer__animated.is-revealed {
  filter: blur(0);
  transform: translateY(0);
  opacity: 1;
}
.site-footer__animated[data-stagger="1"] { transition-delay: 200ms; }
.site-footer__animated[data-stagger="2"] { transition-delay: 300ms; }
.site-footer__animated[data-stagger="3"] { transition-delay: 400ms; }
.site-footer__animated[data-stagger="4"] { transition-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  .site-footer__animated,
  .site-footer__animated.is-revealed {
    filter: none;
    transform: none;
    opacity: 1;
    transition: none;
  }
}

/* ============================================================================
   Scroll reveal (used by main.js)
   ============================================================================ */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

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

/* ============================================================================
   Stats counter (tabular numerals so digit width stays uniform during tick)
   ============================================================================ */

.stat-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ============================================================================
   Barba page transition container (wrapper stays static, container animates)
   ============================================================================ */

[data-barba="container"] {
  will-change: opacity, transform;
}

/* ============================================================================
   Forms (shared)
   ============================================================================ */

.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-field label {
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  color: var(--color-ink-72);
}
.form-field .helper {
  font-size: var(--fs-body-sm);
  color: var(--color-ink-56);
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-ink);
  transition: border-color var(--duration-base) var(--ease-standard);
}
.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-accent);
}
.form-field--error input,
.form-field--error textarea {
  border-color: var(--color-error);
}
.form-field--error .helper { color: var(--color-error); }

/* ============================================================================
   Booking banner
   Fixed bottom-right toast. Shown once per browser session, ~4.5s after load.
   Lives outside the Barba wrapper so SPA transitions don't re-mount it.
   ============================================================================ */
.booking-banner {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 90;
  width: min(280px, calc(100vw - var(--space-8)));
  pointer-events: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.booking-banner[hidden] { display: none; }
.booking-banner[data-state="open"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.booking-banner__inner {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: 16px 18px 18px;
  box-shadow: var(--shadow-lg);
}

.booking-banner__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-ink-56);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.booking-banner__close:hover {
  background: var(--color-accent-soft);
  color: var(--color-ink);
}
.booking-banner__close:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.booking-banner__pulse {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-bottom: 10px;
  background: var(--color-error);
  border-radius: var(--radius-pill);
}
.booking-banner__pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  background: var(--color-error);
  opacity: 0.55;
  animation: booking-pulse 1.8s ease-out infinite;
}
@keyframes booking-pulse {
  0%   { transform: scale(1);   opacity: 0.45; }
  100% { transform: scale(2.6); opacity: 0;    }
}

.booking-banner__eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-accent);
}
.booking-banner__body {
  margin: 0 0 14px;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--color-ink-72);
}
.booking-banner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-pill);
  text-decoration: none;
  box-shadow: var(--shadow-cta);
  transition: background-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.booking-banner__cta:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
}
.booking-banner__cta:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .booking-banner {
    bottom: var(--space-4);
    right: var(--space-4);
    left: var(--space-4);
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .booking-banner__pulse::after { animation: none; }
}