/* Kaligraf Design — Global Components
   Navigation, language switcher, buttons, card hover states.
   Depends on: design-system.css, typography.css
   Source: spec/phase-2/a-cross-page-patterns.md §1–2
           spec/phase-2/00-design-foundation.md §5 */

/* ══════════════════════════════════════════════════════════
   NAVIGATION BAR
   ══════════════════════════════════════════════════════════ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height-desktop);
  display: flex;
  align-items: center;
  background-color: var(--nav-bg-transparent);
  transition: var(--nav-transition);

  /* nav-fade token: opacity 0→1, 300ms, 200ms delay, on page load */
  opacity: 0;
  animation: fade-in-enter var(--motion-nav-fade-duration) var(--ease-out)
             var(--motion-nav-fade-delay) forwards;
}

/* Solid state — added by nav.js when hero scrolls out of view */
.nav.is-solid {
  background-color: var(--nav-bg-solid);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.nav__inner {
  width: 100%;
  margin: 0 auto;
  padding: 0 max(var(--grid-outer-margin-desktop), calc((100vw - var(--grid-max-width)) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--component-gap-sm);
}

/* ── Logo ─────────────────────────────────────────────── */

.nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--color-text-on-dark);
}

.nav__logo:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: 1px;
}

.nav__logo-img {
  height: 44px;
  width: auto;
  display: block;
}

/* ── Primary Links ────────────────────────────────────── */

.nav__links {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--component-gap-md);
  flex: 1;
  justify-content: center;
}

.nav__link {
  font-family: var(--font-family-body);
  font-size: var(--size-ui-label);
  font-weight: 500;
  letter-spacing: var(--ls-ui-label);
  line-height: var(--lh-ui-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-on-dark);
  white-space: nowrap;
  position: relative;
}

/* hover-underline token */
.nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-accent);
  transition: width var(--motion-hover-underline) var(--ease-out);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  width: 100%;
}

.nav__link[aria-current="page"] {
  color: var(--color-accent);
  font-weight: 600;
}

.nav__link:hover {
  color: var(--color-accent);
}

.nav__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: 1px;
}

/* ── Right Section (phone + language switcher) ────────── */

.nav__right {
  display: flex;
  align-items: center;
  gap: var(--component-gap-sm);
  flex-shrink: 0;
}

/* PL variant: phone number */
.nav__phone {
  font-family: var(--font-family-body);
  font-size: var(--size-caption);
  font-weight: 400;
  letter-spacing: var(--ls-caption);
  line-height: var(--lh-caption);
  color: var(--color-text-on-dark);
  text-decoration: none;
  white-space: nowrap;
}

.nav__phone:hover {
  color: var(--color-accent);
}

.nav__phone:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: 1px;
}

/* On narrow desktops (1025–1200px): condense to icon only */
@media (min-width: 1025px) and (max-width: 1200px) {
  .nav__phone-text {
    display: none;
  }

  .nav__phone-icon {
    display: inline-flex;
  }
}

/* Mobile nav */
@media (max-width: 1024px) {
  .nav {
    height: var(--nav-height-mobile);
  }

  .nav__inner {
    padding: 0 var(--grid-outer-margin-mobile);
  }

  .nav__links {
    display: none;  /* shown by hamburger JS — not yet implemented */
  }
}

/* ── Hamburger ────────────────────────────────────────── */

.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--color-text-on-dark);
}

.nav__hamburger-line {
  width: 22px;
  height: 1.5px;
  background-color: currentColor;
  display: block;
  transition: transform 200ms var(--ease-standard), opacity 200ms var(--ease-standard);
}

@media (max-width: 1024px) {
  .nav__hamburger {
    display: flex;
  }

  /* Mobile menu panel — opened by nav.js toggling .is-menu-open */
  .nav.is-menu-open {
    background-color: var(--color-bg-primary);
  }
  .nav.is-menu-open .nav__links {
    display: flex;
    flex-direction: column;
    gap: var(--component-gap-sm-mobile);
    position: fixed;
    top: var(--nav-height-mobile);
    left: 0;
    right: 0;
    padding: var(--component-gap-md-mobile) var(--grid-outer-margin-mobile) var(--component-gap-lg-mobile);
    background-color: var(--color-bg-primary);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    z-index: 90;
    max-height: calc(100svh - var(--nav-height-mobile));
    overflow-y: auto;
    animation: nav-menu-in 240ms var(--ease-out) both;
  }
  .nav.is-menu-open .nav__link {
    display: block;
    padding: 12px 0;
    font-size: 1.375rem;
  }
}

/* Hamburger lines → X when menu open */
.nav.is-menu-open .nav__hamburger-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.is-menu-open .nav__hamburger-line:nth-child(2) { opacity: 0; }
.nav.is-menu-open .nav__hamburger-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu open animation (slide + fade) */
@keyframes nav-menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav.is-menu-open .nav__links { animation: none; }
}

/* ══════════════════════════════════════════════════════════
   LANGUAGE SWITCHER
   Source: spec/phase-2/00-design-foundation.md §6
   ══════════════════════════════════════════════════════════ */

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lang-switcher__item {
  display: flex;
  align-items: center;
}

/* 1px vertical separator line, 12px tall, between lang labels */
.lang-switcher__item + .lang-switcher__item::before {
  content: '';
  display: block;
  width: 1px;
  height: 12px;
  background-color: var(--color-border-on-dark);
  margin: 0 8px;
}

.lang-switcher__btn {
  font-family: var(--font-family-body);
  font-size: var(--size-ui-label);
  font-weight: 400;
  letter-spacing: var(--ls-ui-label);
  line-height: var(--lh-ui-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-on-dark-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  position: relative;
  white-space: nowrap;
}

/* hover-underline on inactive labels */
.lang-switcher__btn::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-accent);
  transition: width var(--motion-hover-underline) var(--ease-out);
}

.lang-switcher__btn:hover::after {
  width: 100%;
}

/* Active language label */
.lang-switcher__btn[aria-current="true"],
.lang-switcher__btn.is-active {
  color: var(--color-accent);
  font-weight: 600;
  pointer-events: none;
}

.lang-switcher__btn[aria-current="true"]::after,
.lang-switcher__btn.is-active::after {
  display: none;
}

.lang-switcher__btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: 1px;
}

/* Mobile: condensed labels (EN · 中 · PL), caption size */
@media (max-width: 767px) {
  .lang-switcher__btn {
    font-size: var(--size-caption);
    letter-spacing: var(--ls-caption);
    text-transform: none;
  }

  /* Hide long ZH label on mobile — JS swaps to 中 */
  .lang-switcher__zh-full { display: none; }
  .lang-switcher__zh-short { display: inline; }
}

@media (min-width: 768px) {
  .lang-switcher__zh-full { display: inline; }
  .lang-switcher__zh-short { display: none; }
}

/* ── "No equivalent" notice ───────────────────────────── */
/* Appears inline below hero, not a modal or banner */

.lang-notice {
  font-family: var(--font-family-body);
  font-size: var(--size-body-sm);
  font-weight: 400;
  color: var(--color-text-on-dark-muted);
  padding: var(--component-gap-sm) 0;
  display: none;
}

.lang-notice.is-visible {
  display: block;
}

/* ══════════════════════════════════════════════════════════
   BUTTONS
   Source: spec/phase-2/00-design-foundation.md §5
   ══════════════════════════════════════════════════════════ */

/* Shared button base */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--cta-min-width);
  padding: 14px 28px;
  font-family: var(--font-family-body);
  font-size: var(--size-ui-label);
  font-weight: 500;
  letter-spacing: var(--ls-ui-label);
  line-height: var(--lh-ui-label);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--border-radius-button);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--motion-hover-lift-in) var(--ease-standard),
    color var(--motion-hover-lift-in) var(--ease-standard),
    transform var(--motion-hover-lift-in) var(--ease-standard),
    box-shadow var(--motion-hover-lift-in) var(--ease-standard),
    border-color var(--motion-hover-lift-in) var(--ease-standard),
    opacity var(--motion-hover-lift-in) var(--ease-standard);
}

/* button-press on active state (all buttons) */
.btn:active {
  animation: none;
  transform: scale(0.97);
  transition-duration: var(--motion-button-press);
  transition-timing-function: var(--ease-in);
}

.btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* ── Primary Button ──────────────────────────────────── */

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-text-on-dark);
  border: 1px solid transparent;
}

.btn--primary:hover {
  background-color: var(--color-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35);
}

.btn--primary:active {
  background-color: var(--color-accent-active);
}

.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
  background-color: rgba(124, 58, 237, 0.28);
  color: rgba(255, 255, 255, 0.38);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}

/* ── Secondary Button ────────────────────────────────── */

.btn--secondary {
  background-color: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  padding: 13px 27px;  /* 1px less to account for border */
}

.btn--secondary:hover {
  background-color: var(--color-accent-subtle);
}

.btn--secondary:active {
  background-color: rgba(124, 58, 237, 0.16);
  color: var(--color-accent-active);
  border-color: var(--color-accent-active);
}

.btn--secondary:disabled,
.btn--secondary[aria-disabled="true"] {
  background-color: transparent;
  color: rgba(124, 58, 237, 0.28);
  border-color: rgba(124, 58, 237, 0.28);
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Ghost Button ────────────────────────────────────── */
/* No padding by default; line-height matches surrounding text */

.btn--ghost {
  min-width: 0;
  padding: 0;
  background-color: transparent;
  color: currentColor;
  border: none;
  text-decoration: underline;
  text-decoration-color: rgba(currentColor, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

.btn--ghost:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/* Directional ghost: translateX(4px) on arrow */
.btn--ghost.has-arrow:hover .btn__arrow {
  transform: translateX(4px);
}

.btn__arrow {
  display: inline-block;
  margin-left: 2px;
  transition: transform var(--motion-hover-underline) var(--ease-out);
}

.btn--ghost:active {
  color: var(--color-accent-active);
}

.btn--ghost:disabled,
.btn--ghost[aria-disabled="true"] {
  color: rgba(currentColor, 0.28);
  text-decoration: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   CARD HOVER STATES
   Source: spec/phase-2/00-design-foundation.md §5
   ══════════════════════════════════════════════════════════ */

/* ── Case-Study Tile ─────────────────────────────────── */
/* hover-lift + video-scrub tokens */

.tile-case-study {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--motion-hover-lift-in) var(--ease-standard),
    box-shadow var(--motion-hover-lift-in) var(--ease-standard);
}

.tile-case-study:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(45, 27, 78, 0.18);
}

.tile-case-study:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Hover clip video overlay (video-scrub token) */
.tile-case-study__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--motion-video-scrub) var(--ease-out);
  pointer-events: none;
}

/* Only play hover clip on pointer devices */
@media (hover: hover) and (pointer: fine) {
  .tile-case-study:hover .tile-case-study__video {
    opacity: 1;
  }
}

/* Bottom scrim + label */
.tile-case-study__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--component-gap-md) var(--component-gap-sm);
  background: var(--scrim-gradient);
}

.tile-case-study__title {
  display: block;
  font-family: var(--font-family-body);
  font-size: var(--size-h4);
  font-weight: 600;
  line-height: var(--lh-h4);
  color: var(--color-text-on-dark);
}

.tile-case-study__medium {
  display: block;
  font-family: var(--font-family-body);
  font-size: var(--size-ui-label);
  font-weight: 500;
  letter-spacing: var(--ls-ui-label);
  text-transform: uppercase;
  color: var(--color-text-on-dark-muted);
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════
   WORK TILE
   Media tile: poster image + hover-clip video + scrim + caption.
   Used on: HOME (section-work__grid) and WORK page (tile-grid).
   Grid column placement is defined per-page in page-specific CSS.
   ══════════════════════════════════════════════════════════ */

.work-tile {
  position: relative;
}

.work-tile__link {
  display: block;
  text-decoration: none;
  overflow: hidden;
  position: relative;
  transition:
    transform var(--motion-hover-lift-in) var(--ease-standard),
    box-shadow var(--motion-hover-lift-in) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .work-tile__link:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(45, 27, 78, 0.20);
  }
}

.work-tile__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.work-tile__figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.work-tile--sm .work-tile__figure,
.work-tile--secondary .work-tile__figure {
  aspect-ratio: 4 / 3;
}

.work-tile__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--motion-hover-lift-in) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .work-tile__link:hover .work-tile__poster {
    transform: scale(1.05);
  }
}

.work-tile__hover-clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--motion-video-scrub) var(--ease-out);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .work-tile__link:hover .work-tile__hover-clip {
    opacity: 1;
  }
}

.work-tile__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim-gradient);
  pointer-events: none;
}

.work-tile__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--component-gap-md) var(--component-gap-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.work-tile__title {
  display: block;
  color: var(--color-text-on-dark);
}

.work-tile__medium {
  display: block;
  color: var(--color-text-on-dark-muted);
}

.work-tile__markets {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.work-tile__market-tag {
  color: var(--color-text-on-dark-muted);
}

/* Hover copy — shown on pointer-hover (home page secondary tiles) */
.work-tile__hover-copy {
  display: none;
  color: var(--color-text-on-dark-muted);
  margin-top: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .work-tile__link:hover .work-tile__hover-copy {
    display: block;
  }
}

/* Confidential tile treatment */
.work-tile--confidential .work-tile__poster {
  filter: grayscale(1);
  opacity: 0.85;
}

.work-tile__medium--confidential {
  opacity: 0.52;
}

/* ══════════════════════════════════════════════════════════
   DISCIPLINE CARD
   Image card with gradient overlay + text at bottom-left.
   Used on: HOME page (section-disciplines__grid).
   Grid column placement defined in home page <style> block.
   ══════════════════════════════════════════════════════════ */

.discipline-card {
  position: relative;
}

.discipline-card__link {
  display: block;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  transition:
    transform var(--motion-hover-lift-in) var(--ease-standard),
    box-shadow var(--motion-hover-lift-in) var(--ease-standard);
}

.discipline-card--small .discipline-card__link {
  aspect-ratio: 4 / 3;
}

@media (hover: hover) and (pointer: fine) {
  .discipline-card__link:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(45, 27, 78, 0.28);
  }
}

.discipline-card__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.discipline-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--motion-hover-lift-in) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .discipline-card__link:hover .discipline-card__bg {
    transform: scale(1.03);
  }
}

.discipline-card__overlay {
  position: absolute;
  inset: 0;
  background: var(--scrim-gradient);
  pointer-events: none;
  transition: background 200ms var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .discipline-card__link:hover .discipline-card__overlay {
    background: linear-gradient(to top, rgba(45, 27, 78, 0.82) 0%, rgba(45, 27, 78, 0.45) 50%, transparent 100%);
  }
}

.discipline-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--component-gap-md) var(--component-gap-sm);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.discipline-card__name {
  color: var(--color-text-on-dark);
  margin: 0;
}

.discipline-card__definition {
  color: var(--color-text-on-dark-muted);
  margin: 0;
  max-width: 480px;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 200ms var(--ease-standard),
    transform 200ms var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .discipline-card__link:hover .discipline-card__definition {
    opacity: 1;
    transform: translateY(0);
  }
}

.discipline-card__arrow {
  color: var(--color-accent);
  display: inline-block;
  transition: transform var(--motion-hover-underline) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .discipline-card__link:hover .discipline-card__arrow {
    transform: translateX(4px);
  }
}

/* ══════════════════════════════════════════════════════════
   FILTER ROW + CHIPS
   Used on: WORK page (section-work-header).
   ══════════════════════════════════════════════════════════ */

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--component-gap-md);
  margin-top: var(--component-gap-md);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--component-gap-sm);
}

.filter-group__label {
  color: var(--color-text-on-dark-muted);
  display: block;
}

.filter-group__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.filter-chip {
  font-family: var(--font-family-body);
  font-size: var(--size-body-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-text-on-dark-muted);
  background: transparent;
  border: 1px solid var(--color-border-on-dark);
  border-radius: 2px;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 150ms var(--ease-standard),
    border-color 150ms var(--ease-standard),
    color 150ms var(--ease-standard);
}

.filter-chip:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.filter-chip[aria-pressed="true"],
.filter-chip.is-active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-on-dark);
}

.filter-chip:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* ══════════════════════════════════════════════════════════
   TRUST BAND
   Static client wordmarks + market signal line.
   Used on: HOME page (section-trust).
   ══════════════════════════════════════════════════════════ */

.trust-band__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--component-gap-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.trust-band__wordmark {
  height: 32px;
  width: auto;
  display: block;
  opacity: 0.48;
  filter: grayscale(1);
  transition: opacity 150ms var(--ease-standard);
}

.trust-band__wordmark:hover {
  opacity: 0.85;
}

.trust-band__market-signal {
  text-align: center;
  color: var(--color-text-on-light-muted);
  margin-top: var(--component-gap-md);
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .trust-band__logos {
    gap: var(--component-gap-md);
  }
}

/* ── Service / Capability Tile ───────────────────────── */
/* hover-lift only; border transitions on hover */

.tile-service {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--color-border-on-dark);
  border-radius: 0;
  transition:
    transform var(--motion-hover-lift-in) var(--ease-standard),
    box-shadow var(--motion-hover-lift-in) var(--ease-standard),
    border-color var(--motion-hover-lift-in) var(--ease-standard);
}

.tile-service:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(45, 27, 78, 0.18);
  border-color: rgba(124, 58, 237, 0.45);
}

.tile-service:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* ── Footer ──────────────────────────────────────────── */
/* No entrance animation — appears without motion */

.footer {
  background-color: var(--color-bg-primary);
  color: var(--color-text-on-dark);
  padding: var(--section-pad-sm) 0;
}

.footer__inner {
  width: 100%;
  margin: 0 auto;
  padding: 0 max(var(--grid-outer-margin-desktop), calc((100vw - var(--grid-max-width)) / 2));
}

.footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer__credit {
  font-family: var(--font-family-body);
  font-size: var(--size-caption);
  font-weight: 400;
  color: var(--color-text-on-dark-muted);
}

.footer__legal {
  display: flex;
  gap: var(--component-gap-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__legal-link {
  font-family: var(--font-family-body);
  font-size: var(--size-caption);
  font-weight: 400;
  letter-spacing: var(--ls-caption);
  color: var(--color-text-on-dark-muted);
  text-decoration: none;
}

.footer__legal-link:hover {
  color: var(--color-text-on-dark);
  text-decoration: underline;
}