/* Engine Profit — Components: nav, buttons, cards, forms, accordion, chips */

/* ============ Navbar ============ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky-nav);
  height: 76px;
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    height var(--duration-base) var(--ease-out);
}

.navbar.is-scrolled {
  height: 68px;
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
}

/* backdrop-filter on a position:fixed, full-width element recomputes every
   scroll frame — cheap on desktop GPUs, but a leading cause of janky/
   stuttering scroll on mobile. Desktop keeps the frosted-glass look; mobile
   gets the same solid fallback used when backdrop-filter isn't supported
   at all. */
@media (min-width: 769px) {
  .navbar.is-scrolled {
    background: rgba(11, 10, 8, 0.78);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
  }
}

.navbar__inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.navbar__brand-icon {
  height: 28px;
  width: auto;
}

.navbar__brand span {
  color: var(--color-gold);
}

.navbar__links {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.navbar__links::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-border);
}

.navbar__links a {
  position: relative;
  z-index: 1;
  color: var(--color-text-secondary);
  padding-block: 0.6em;
  transition: color var(--duration-base) var(--ease-out), letter-spacing var(--duration-base) var(--ease-out);
}

.navbar__links a:hover,
.navbar__links a:focus-visible {
  color: var(--color-text-primary);
  letter-spacing: 0.12em;
}

.navbar__links a.is-active,
.mobile-nav__links a.is-active {
  color: var(--color-gold);
}

.navbar__indicator {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100px;
  transform-origin: left center;
  transform: translateX(0) scaleX(0);
  background: var(--color-gold);
  opacity: 0;
  pointer-events: none;
  transition: transform 420ms cubic-bezier(0.65, 0, 0.35, 1), opacity var(--duration-base) var(--ease-out);
}

.navbar__indicator.is-ready {
  opacity: 1;
}

.navbar__indicator.is-jumping {
  transition: opacity var(--duration-base) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .navbar__links a:hover,
  .navbar__links a:focus-visible {
    letter-spacing: 0.09em;
  }

  .navbar__indicator {
    transition: opacity var(--duration-base) var(--ease-out);
  }
}

/* Product's dropdown (Results) and Contact's dropdown (FAQ). The trigger
   link and the caret button are two separate controls — necessary so a
   tap can open the submenu without also navigating — but they read as
   one compound label ("Product ⌄"), so every state (hover, focus, open,
   current page) is driven from this shared wrapper instead of the two
   children tracking color independently. That used to let the arrow turn
   gold on its own while the label stayed grey, and vice versa on the
   active page; keying both off one parent state keeps them in lockstep. */
.navbar__item-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.2em;
}

.navbar__dropdown-trigger {
  display: inline-flex;
  align-items: center;
}

.navbar__dropdown-caret-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--color-text-secondary);
  border-radius: 0;
  transition: color var(--duration-fast) var(--ease-out);
}

.navbar__item-dropdown:hover .navbar__dropdown-trigger,
.navbar__item-dropdown:hover .navbar__dropdown-caret-btn,
.navbar__item-dropdown:focus-within .navbar__dropdown-trigger,
.navbar__item-dropdown:focus-within .navbar__dropdown-caret-btn,
.navbar__item-dropdown.is-open .navbar__dropdown-trigger,
.navbar__item-dropdown.is-open .navbar__dropdown-caret-btn {
  color: var(--color-text-primary);
}

.navbar__item-dropdown.is-active .navbar__dropdown-trigger,
.navbar__item-dropdown.is-active .navbar__dropdown-caret-btn {
  color: var(--color-gold);
}

.navbar__dropdown-caret {
  width: 10px;
  height: 10px;
  transition: transform var(--duration-fast) var(--ease-out);
}

/* Anchored close to its trigger (a short gap, not a floating gap) and
   sized to hug a single short word instead of padding it out to an
   oversized box — a tighter, more deliberate shape than a generic
   dropdown menu. */
.navbar__dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: var(--space-2);
  padding: 3px;
  border-radius: 0;
  background: var(--color-surface-glass);
  border: 1px solid var(--color-border-glass);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(243, 239, 230, 0.07), var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform-origin: top center;
  transform: translateX(-50%) translateY(2px) scale(0.96);
  transition: opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out), visibility var(--duration-fast);
  z-index: 10;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navbar__dropdown-menu {
    background: var(--color-surface-2);
  }
}

.navbar__dropdown-menu a {
  display: block;
  text-align: center;
  padding: 0.6em 1.1em;
  border-radius: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.navbar__dropdown-menu a:hover,
.navbar__dropdown-menu a:focus-visible,
.navbar__dropdown-menu a.is-active {
  color: var(--color-gold);
  background: var(--color-gold-soft);
}

.navbar__item-dropdown:hover .navbar__dropdown-menu,
.navbar__item-dropdown:focus-within .navbar__dropdown-menu,
.navbar__item-dropdown.is-open .navbar__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

.navbar__item-dropdown:hover .navbar__dropdown-caret,
.navbar__item-dropdown:focus-within .navbar__dropdown-caret,
.navbar__item-dropdown.is-open .navbar__dropdown-caret {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .navbar__dropdown-menu {
    transition: opacity var(--duration-base) var(--ease-out), visibility var(--duration-base);
  }
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* As neat/compact as the circular globe button beside it, not the full
   marketing-CTA size used elsewhere on the page. */
.navbar__actions .btn {
  height: 40px;
  padding: 0 1.1em;
  font-size: var(--text-xs);
  gap: 0.5em;
}

.navbar__menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  border-radius: 0;
}

.navbar__menu-toggle .icon-close {
  display: none;
}

.navbar__menu-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}

.navbar__menu-toggle[aria-expanded="true"] .icon-close {
  display: inline-flex;
}

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sticky-nav) - 1);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  padding: 6.5rem var(--section-padding-x) var(--space-10);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out), visibility var(--duration-base);
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-nav__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mobile-nav__links a {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text-primary);
}

.mobile-nav__footer {
  margin-top: auto;
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.95em 1.7em;
  border-radius: 0;
  border: 1px solid transparent;
  transition: transform var(--duration-fast) var(--ease-out),
    background var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.btn:active {
  transform: scale(0.98);
}

.btn .icon {
  font-size: 1.1em;
}

.btn--primary {
  background: transparent;
  color: var(--color-gold);
  border-color: var(--color-gold-border);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-gold);
  color: var(--color-text-on-gold);
  border-color: var(--color-gold);
  box-shadow: var(--shadow-gold);
}

.btn--secondary {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.btn--ghost {
  background: transparent;
  color: var(--color-gold);
  padding-inline: 0.2em;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  color: var(--color-gold-hover);
}

.btn--block {
  width: 100%;
}

.btn--lg {
  padding: 1.1em 2.1em;
  font-size: var(--text-base);
}

.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============ Chips / tags ============ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  padding: 0.55em 1em;
  background: rgba(243, 239, 230, 0.03);
}

.chip .icon {
  color: var(--color-gold);
}

/* ============ Cards ============ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
}

.card--glass {
  background: var(--color-surface-glass);
  border: 1px solid var(--color-border-glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(243, 239, 230, 0.06), var(--shadow-md);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card--glass {
    background: var(--color-surface-2);
  }
}

.card--interactive {
  transition: border-color var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.card--interactive:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-4px);
}

/* ============ Option cards (configurator) ============ */
.option-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-out),
    background var(--duration-base) var(--ease-out);
  width: 100%;
}

.option-card:hover {
  border-color: var(--color-border-strong);
}

.option-card__radio {
  position: absolute;
  top: var(--space-5);
  right: var(--space-6);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-card__radio::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-gold);
  transform: scale(0);
  transition: transform var(--duration-fast) var(--ease-out);
}

.option-card.is-selected {
  border-color: var(--color-gold);
  background: var(--color-gold-soft);
}

.option-card.is-selected .option-card__radio {
  border-color: var(--color-gold);
}

.option-card.is-selected .option-card__radio::after {
  transform: scale(1);
}

.option-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  padding-right: var(--space-8);
}

.option-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.option-card__meta {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-gold);
}

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

.option-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
  .option-grid,
  .option-grid--2 {
    grid-template-columns: 1fr;
  }
}

/* ============ Form fields ============ */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-primary);
}

.field label .optional {
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: none;
}

.field input,
.field textarea,
.field select {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.85em 1em;
  color: var(--color-text-primary);
  font-size: var(--text-base);
  transition: border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.field textarea {
  resize: vertical;
  min-height: 110px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-text-muted);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-gold-soft);
}

.field-help {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.field-error {
  display: none;
  align-items: center;
  gap: 0.4em;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-error);
}

.field.has-error input,
.field.has-error textarea,
.field.has-error select {
  border-color: var(--color-error);
}

.field.has-error .field-error {
  display: flex;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.checkbox-field input {
  margin-top: 0.2em;
  accent-color: var(--color-gold);
  width: 16px;
  height: 16px;
}

/* ============ Accordion (FAQ) ============ */
.accordion-item {
  border-bottom: 1px solid var(--color-border);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text-primary);
}

.accordion-trigger .icon {
  color: var(--color-gold);
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-out);
}

.accordion-item.is-open .accordion-trigger .icon {
  transform: rotate(180deg);
}

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-base) var(--ease-out);
}

.accordion-item.is-open .accordion-panel {
  grid-template-rows: 1fr;
}

.accordion-panel-inner {
  overflow: hidden;
}

.accordion-panel p {
  padding-bottom: var(--space-6);
  max-width: 65ch;
}

/* ============ Empty state (results / testimonials placeholders) ============ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-8);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: rgba(243, 239, 230, 0.02);
}

.empty-state__icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-gold-soft);
  color: var(--color-gold);
  font-size: 1.5rem;
}

.empty-state h3 {
  color: var(--color-text-primary);
}

.empty-state p {
  max-width: 44ch;
}

/* ============ Star rating ============ */
.star-row {
  display: flex;
  gap: 0.25em;
  color: var(--color-gold);
}

.star-row .icon {
  width: 1rem;
  height: 1rem;
}

.star-row .icon.is-muted {
  color: var(--color-border-strong);
}

/* ---- Accessible star-rating picker (radio inputs, reversed for the ~ trick) ---- */
.star-input {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 0.35em;
}

.star-input input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.star-input label {
  width: 1.6rem;
  height: 1.6rem;
  cursor: pointer;
  color: var(--color-border-strong);
  transition: color var(--duration-fast) var(--ease-out);
}

.star-input label .icon {
  width: 100%;
  height: 100%;
}

.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label {
  color: var(--color-gold);
}

.star-input input:focus-visible + label {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ============ Language switcher ============ */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 0;
  color: var(--color-text-secondary);
  border: none;
  transition: color var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.lang-toggle:hover,
.lang-toggle:focus-visible {
  color: var(--color-gold);
}

.lang-toggle:active {
  transform: scale(0.94);
}

.lang-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: rgba(11, 10, 8, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out), visibility var(--duration-base);
}

.lang-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.lang-modal__panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: var(--space-10) var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-surface-glass);
  border: 1px solid var(--color-border-glass);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(243, 239, 230, 0.08), var(--shadow-lg);
  transform: scale(0.94) translateY(10px);
  opacity: 0;
  transition: transform 420ms var(--ease-out), opacity 320ms var(--ease-out);
}

.lang-modal.is-open .lang-modal__panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lang-modal__panel {
    background: var(--color-surface-2);
  }
}

.lang-modal__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.lang-modal__close:hover,
.lang-modal__close:focus-visible {
  color: var(--color-text-primary);
  border-color: var(--color-gold-border);
}

.lang-modal__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: var(--color-gold-soft);
  color: var(--color-gold);
  font-size: 1.3rem;
  margin-bottom: var(--space-5);
}

.lang-modal__title {
  font-size: var(--text-2xl);
}

.lang-modal__subtitle {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  max-width: 34ch;
}

.lang-modal__list {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: rgba(243, 239, 230, 0.02);
  transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.lang-option:hover,
.lang-option:focus-visible {
  border-color: var(--color-gold-border);
  background: var(--color-gold-soft);
  transform: translateX(2px);
}

.lang-option.is-current {
  border-color: var(--color-gold);
}

.lang-option__names {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}

.lang-option__native {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text-primary);
}

.lang-option__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.lang-option__check {
  width: 20px;
  height: 20px;
  color: var(--color-gold);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.lang-option.is-current .lang-option__check {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .lang-modal__panel {
    transition: opacity var(--duration-base) var(--ease-out);
    transform: none;
  }
}

/* ============ Lightbox ============ */
/* flex-direction was never set, so the frame and caption defaulted to
   flex's row axis — stacking side by side instead of the image sitting
   above its own caption. On narrow viewports that squeezed the caption
   into a sliver next to the image, wrapping one or two words per line. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-5);
  background: rgba(11, 10, 8, 0.92);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out), visibility var(--duration-base);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__frame {
  position: relative;
  max-width: min(920px, 90vw);
  max-height: 68vh;
  transform: scale(0.96);
  transition: transform var(--duration-base) var(--ease-out);
}

.lightbox.is-open .lightbox__frame {
  transform: scale(1);
}

.lightbox__frame img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 68vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

/* A direct child of .lightbox (not nested in .lightbox__frame) and pinned
   with absolute positioning to the modal's own corner — independent of
   the frame's size, so it can never end up clipped above the viewport the
   way an offset relative to a near-full-height image frame would. */
.lightbox__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 1;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
  color: var(--color-gold);
  border-color: var(--color-gold);
}

.lightbox__caption {
  max-width: min(680px, 90vw);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.lightbox__caption:empty {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .lightbox__frame {
    transition: none;
  }
}

/* The desktop nav (6 items + a WhatsApp button) needs real room — measured
   against the longest translation (Tamil) it doesn't reliably fit until
   somewhere past 1240px, the site's own max container width. The previous
   640px cutoff left every tablet, and plenty of small-laptop windows,
   showing a desktop nav that didn't fit (links clipped off the edge). */
@media (max-width: 1259px) {
  .navbar__links,
  .navbar__actions .btn {
    display: none;
  }

  .navbar__menu-toggle {
    display: inline-flex;
  }
}

@media (min-width: 1260px) {
  .mobile-nav {
    display: none;
  }
}