/* Production safeguards and restrained premium motion for the bilingual About / Trust pages. */
.about-page {
  --about-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --about-motion-fast: 260ms;
  --about-motion-medium: 620ms;
}

.about-page .site-header__inner > *,
.about-page .site-header__panel > *,
.about-page .about-hero__grid > *,
.about-page .about-intro-grid > *,
.about-page .about-note > *,
.about-page .about-note__title > *,
.about-page .about-note__body > *,
.about-page .about-language-panel > *,
.about-page .about-cta__card > *,
.about-page .footer-grid > * {
  min-width: 0;
}

.about-page h1,
.about-page h2,
.about-page h3,
.about-page .about-note__body p {
  overflow-wrap: normal;
  word-break: normal;
}

.about-page .footer-links a,
.about-page .footer-note,
.about-page .footer-bottom {
  overflow-wrap: anywhere;
}

.about-page .site-header.is-open {
  transform: none !important;
}

.about-page .about-service-card:focus-visible,
.about-page .btn:focus-visible,
.about-page .lang-switch a:focus-visible,
.about-page .menu-toggle:focus-visible {
  transform: none;
}

/* Progressive reveal: content is visible by default and only animates after JS adds .js-enabled. */
body.js-enabled.about-page .fade-in {
  --about-reveal-delay: 0ms;
  --about-reveal-y: 18px;
  opacity: 0;
  transform: translate3d(0, var(--about-reveal-y), 0);
}

body.js-enabled.about-page .fade-in.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  animation: aboutReveal var(--about-motion-medium) var(--about-motion-ease) var(--about-reveal-delay) 1 backwards;
}

body.js-enabled.about-page .about-portrait.fade-in {
  --about-reveal-delay: 90ms;
  --about-reveal-y: 22px;
}

.about-values-grid > :nth-child(2),
.about-audience-grid > :nth-child(2),
.about-proof-grid > :nth-child(2),
.about-process-grid > :nth-child(2),
.about-services-grid > :nth-child(2) {
  --about-reveal-delay: 70ms;
}

.about-values-grid > :nth-child(3),
.about-audience-grid > :nth-child(3),
.about-proof-grid > :nth-child(3),
.about-process-grid > :nth-child(3),
.about-services-grid > :nth-child(3) {
  --about-reveal-delay: 140ms;
}

.about-process-grid > :nth-child(4),
.about-services-grid > :nth-child(4) {
  --about-reveal-delay: 210ms;
}

.about-services-grid > :nth-child(5) {
  --about-reveal-delay: 280ms;
}

.about-services-grid > :nth-child(6) {
  --about-reveal-delay: 350ms;
}

@keyframes aboutReveal {
  from {
    opacity: 0;
    transform: translate3d(0, var(--about-reveal-y), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Portrait depth remains restrained and never alters the face or crop. */
.about-page .about-portrait__frame {
  isolation: isolate;
}

.about-page .about-portrait__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.78);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.24), transparent 24% 76%, rgba(200, 166, 106, 0.12));
  box-shadow: inset 0 0 0 1px rgba(17, 43, 69, 0.035);
}

.about-page .about-portrait__frame img {
  transition: transform 520ms var(--about-motion-ease), filter 520ms var(--about-motion-ease);
}

.about-page .about-portrait__caption {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Leadership and CEO note receive a quiet metallic accent, not a decorative quotation treatment. */
.about-page .about-owner-card {
  overflow: hidden;
  isolation: isolate;
}

.about-page .about-owner-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 88% 8%, rgba(168, 210, 211, 0.17), transparent 30%),
    linear-gradient(115deg, transparent 0 68%, rgba(200, 166, 106, 0.08) 100%);
}

.about-page .about-owner-card__label,
.about-page .about-note__name strong {
  background: linear-gradient(105deg, #f2dfb6 0%, #ffffff 48%, #9fd0d2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about-page .about-note {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 93% 8%, rgba(75, 157, 160, 0.08), transparent 29%),
    #fff;
}

.about-page .about-note::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(200, 166, 106, 0.72), rgba(75, 157, 160, 0.5), transparent);
  pointer-events: none;
}

.about-page .about-note__name strong {
  background: linear-gradient(105deg, #173d60 0%, #2a6e9e 58%, #8a7043 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Card depth follows the approved homepage interaction language. */
.about-page .about-value-card,
.about-page .about-process-card,
.about-page .about-service-card,
.about-page .about-audience-card,
.about-page .about-proof-card,
.about-page .about-language-panel,
.about-page .about-cta__card {
  transition:
    transform var(--about-motion-fast) var(--about-motion-ease),
    border-color var(--about-motion-fast) ease,
    box-shadow var(--about-motion-fast) ease,
    background-color var(--about-motion-fast) ease;
}

.about-page .about-service-card__arrow {
  transition: transform var(--about-motion-fast) var(--about-motion-ease), color var(--about-motion-fast) ease;
}

.about-page .about-service-card:focus-visible {
  border-color: rgba(42, 110, 158, 0.58);
  box-shadow:
    0 0 0 3px rgba(42, 110, 158, 0.12),
    0 18px 40px rgba(17, 43, 69, 0.09);
}

/* Proof numbers reuse the homepage count-up initializer in site.js. */
.about-page .about-proof-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 88% 10%, rgba(168, 210, 211, 0.12), transparent 28%),
    rgba(255, 255, 255, 0.065);
}

.about-page .about-proof-card > * {
  position: relative;
  z-index: 1;
}

.about-page .about-proof-card::before {
  content: "";
  position: absolute;
  top: -32%;
  bottom: -32%;
  left: -48%;
  width: 32%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-160%, 0, 0) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 246, 220, 0.42), rgba(174, 224, 226, 0.24), transparent);
  mix-blend-mode: screen;
}

.about-page .about-proof-card.is-visible::before {
  animation: aboutProofSweep 980ms var(--about-motion-ease) 240ms 1 both;
}

.about-page .about-proof-card:nth-child(2).is-visible::before {
  animation-delay: 420ms;
}

.about-page .about-proof-card:nth-child(3).is-visible::before {
  animation-delay: 600ms;
}

.about-page .about-proof-value,
.about-page .about-proof-value > span {
  display: inline-block;
  min-inline-size: 4.2ch;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@keyframes aboutProofSweep {
  0% {
    opacity: 0;
    transform: translate3d(-160%, 0, 0) skewX(-18deg);
  }
  18% {
    opacity: 0.58;
  }
  100% {
    opacity: 0;
    transform: translate3d(540%, 0, 0) skewX(-18deg);
  }
}

/* Buttons use a single pointer-triggered light pass. */
.about-page .btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--about-motion-fast) var(--about-motion-ease),
    box-shadow var(--about-motion-fast) ease,
    background-color var(--about-motion-fast) ease,
    border-color var(--about-motion-fast) ease;
}

.about-page .btn::after {
  content: "";
  position: absolute;
  inset: -45% auto -45% -38%;
  z-index: -1;
  width: 26%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-160%, 0, 0) skewX(-16deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transition: transform 620ms var(--about-motion-ease), opacity 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .about-page .about-value-card:hover,
  .about-page .about-audience-card:hover,
  .about-page .about-proof-card:hover {
    transform: translateY(-4px);
    border-color: rgba(42, 110, 158, 0.32);
    box-shadow: 0 20px 44px rgba(17, 43, 69, 0.095);
  }

  .about-page .about-process-card:hover {
    transform: translateY(-4px);
    border-color: rgba(168, 210, 211, 0.34);
    background: rgba(255, 255, 255, 0.085);
    box-shadow: 0 20px 42px rgba(5, 22, 37, 0.18);
  }

  .about-page .about-service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(42, 110, 158, 0.4);
    box-shadow: 0 20px 44px rgba(17, 43, 69, 0.1);
  }

  .about-page .about-service-card:hover .about-service-card__arrow {
    transform: translate3d(3px, -3px, 0);
    color: #1b527b;
  }

  .about-page .about-portrait:hover .about-portrait__frame img {
    transform: scale(1.016);
    filter: saturate(1.015) contrast(1.01);
  }

  .about-page .btn:hover {
    transform: translateY(-2px);
  }

  .about-page .btn-primary:hover {
    box-shadow: 0 16px 34px rgba(31, 91, 129, 0.26);
  }

  .about-page .btn:hover::after {
    opacity: 0.78;
    transform: translate3d(620%, 0, 0) skewX(-16deg);
  }
}

@media (max-width: 900px) {
  /* Keep mobile Safari in final geometry from first paint; desktop reveal remains unchanged. */
  body.js-enabled.about-page .fade-in,
  body.js-enabled.about-page .fade-in.is-visible,
  body.js-enabled.about-page .about-portrait.fade-in {
    --about-reveal-delay: 0ms;
    --about-reveal-y: 0px;
    opacity: 1;
    transform: none;
    animation: none;
  }

  .about-page .about-owner-card {
    position: static;
    top: auto;
  }

  .about-page .site-header__inner > .header-actions {
    display: flex;
  }

  .about-page .site-header__inner > .header-actions .lang-switch {
    display: flex !important;
  }

  .about-page .site-header__panel .lang-switch,
  .about-page .site-header__panel .header-actions > a:not(.btn) {
    display: none !important;
  }
}

@media (max-width: 430px) {
  .about-page .container {
    width: min(100% - 28px, 1180px);
  }

  .about-page .logo-image {
    width: min(154px, 44vw);
  }

  .about-page .about-hero__actions .btn,
  .about-page .about-cta__card .btn {
    width: 100%;
    white-space: normal;
  }

  .about-page .about-service-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .about-page .about-service-card__arrow {
    display: none;
  }

  .about-page .about-proof-value,
  .about-page .about-proof-value > span {
    min-inline-size: 4ch;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .about-page .site-header__inner {
    min-height: 68px;
  }

  .about-page .about-hero {
    padding-top: 40px;
  }

  .about-page .about-portrait__frame {
    max-height: 72vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-page *,
  .about-page *::before,
  .about-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  body.js-enabled.about-page .fade-in,
  body.js-enabled.about-page .about-portrait.fade-in {
    opacity: 1;
    transform: none;
  }

  .about-page .about-proof-card::before,
  .about-page .btn::after {
    display: none;
  }

  .about-page .about-value-card:hover,
  .about-page .about-process-card:hover,
  .about-page .about-service-card:hover,
  .about-page .about-audience-card:hover,
  .about-page .about-proof-card:hover,
  .about-page .about-portrait:hover .about-portrait__frame img,
  .about-page .btn:hover {
    transform: none !important;
  }
}