/* Prototype overrides: landing slideshow 2026.09.22-1 */

:root {
  --prototype-blue: #0E3056;
  --prototype-hero-gradient: linear-gradient(110deg, #0d1b31 0%, #0e3a68 52%, #1181b2 100%);
  --prototype-line: rgba(207, 224, 245, .22);
  --prototype-white: #fff;
  --prototype-star: #f2b544;
  /* Easy visual overrides live in settings.2026.09.21-1.js. */
  --arrow-size-desktop: 48px;
  --arrow-size-mobile: 58px;
  --arrow-icon-desktop: 24px;
  --arrow-icon-mobile: 30px;
  --arrow-gap: 12px;
  --review-max-width: 574px;
  --review-mobile-width: 94%;
  --review-font-size: clamp(1.125rem, 1.04rem + .4vw, 1.375rem);
  --review-line-height: 1.55;
  --review-padding: clamp(24px, 4vw, 36px);
  --review-star-size: 14px;
  --review-star-gap: 3px;
  --review-star-mobile-size: 18px;
  --review-star-mobile-gap: 4px;
  --about-image-width: clamp(96px, 12vw, 156px);
  --about-text-min-width: 12rem;
  --about-image-gap: clamp(16px, 2vw, 24px);
}

html,
body {
  min-height: 100%;
  background: var(--prototype-blue);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -4rem;
  left: 1rem;
  z-index: 3000;
  padding: .65rem 1rem;
  border-radius: 8px;
  background: #fff;
  color: var(--prototype-blue);
  font-weight: 700;
  transition: top .18s ease;
}

.skip-link:focus {
  top: 1rem;
}

/* Full initial viewport: the stage grows naturally when short landscape or text zoom needs it. */
.prototype-hero {
  color: var(--prototype-white);
  background: var(--prototype-blue);
}

.prototype-hero .hero-box {
  overflow: hidden;
  background: var(--prototype-hero-gradient);
}

.prototype-hero .hero-stage {
  position: relative;
  display: grid;
  min-height: max(480px, calc(100svh - var(--nav-h)));
  min-height: max(480px, calc(100dvh - var(--nav-h)));
}

.prototype-hero .hero-slide {
  --slide-background: none;
  position: relative;
  display: grid;
  grid-area: 1 / 1;
  grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr);
  align-items: center;
  align-content: center;
  gap: clamp(20px, 2.2vw, 38px);
  min-width: 0;
  min-height: 100%;
  padding: clamp(42px, 6vw, 72px)
           0
           clamp(86px, 9vw, 118px)
           max(var(--padX), calc((100% - var(--maxW)) / 2 + var(--padX)));
}

.prototype-hero .hero-slide::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background: var(--slide-background);
  pointer-events: none;
}

.prototype-hero .hero-slide > * {
  position: relative;
  z-index: 1;
}

.prototype-hero .hero-slide[hidden] {
  display: none;
}

.prototype-hero .hero-content {
  max-width: 60ch;
  min-width: 0;
}

.prototype-hero .hero-heading {
  max-width: 16ch;
}

.prototype-hero .hero-sub {
  max-width: 47ch;
}

.prototype-hero .hero-media-wrap {
  width: 100%;
  min-width: 0;
  align-self: center;
  justify-self: end;
}

.prototype-hero .hero-media {
  width: 100%;
  max-width: 900px;
  height: auto;
  margin-inline: auto 0;
  aspect-ratio: 3850 / 2336;
  object-fit: contain;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .35));
  pointer-events: none;
}

.prototype-hero .btn-row {
  margin-top: 18px;
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--arrow-gap);
  color: var(--prototype-white);
}

.hero-controls {
  position: absolute;
  bottom: clamp(16px, 3vw, 36px);
  left: var(--padX);
  right: var(--padX);
  z-index: 5;
}

.carousel-arrow {
  display: grid;
  width: var(--arrow-size-desktop);
  height: var(--arrow-size-desktop);
  flex: 0 0 var(--arrow-size-desktop);
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.carousel-arrow:hover {
  background: rgba(255, 255, 255, .08);
}

.carousel-arrow img {
  width: var(--arrow-icon-desktop);
  height: var(--arrow-icon-desktop);
  filter: brightness(0) invert(1);
}


.intro-section,
.reviews-section {
  background: var(--prototype-blue);
  color: var(--prototype-white);
}

.intro-section {
  padding-block: clamp(58px, 8vw, 108px);
}

.intro-heading-wrap {
  max-width: 54rem;
}

.intro-heading-wrap h2,
.reviews-container > h2 {
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: 0;
}

.intro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(30px, 5vw, 56px);
}

.intro-item {
  display: flex;
  align-items: flex-start;
  gap: var(--about-image-gap);
  min-width: 0;
  padding: clamp(24px, 3vw, 38px) clamp(20px, 3.5vw, 48px) clamp(26px, 3.5vw, 42px) 0;
  border-top: 1px solid var(--prototype-line);
}

.intro-item:nth-child(even) {
  padding-right: 0;
  padding-left: clamp(20px, 3.5vw, 48px);
  border-left: 1px solid var(--prototype-line);
}

.intro-item-content {
  flex: 1 1 var(--about-text-min-width);
  min-width: 0;
}

.intro-image {
  flex: 0 0 var(--about-image-width);
  max-width: 100%;
  margin: 0;
}

.intro-image[hidden] { display: none; }

.intro-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

.intro-item h3 {
  margin-bottom: 12px;
  color: #fff;
  font-size: var(--fs-h2);
  line-height: 1.15;
}

.intro-item p {
  max-width: 48ch;
  color: #dbe4ff;
  font-size: var(--fs-body);
  line-height: 1.55;
}

.reviews-section {
  padding-block: clamp(8px, 2vw, 20px) clamp(70px, 9vw, 120px);
}

.reviews-container > h2 {
  text-align: center;
  max-width: var(--review-max-width);
  margin-inline: auto;
}

.review-stage {
  display: grid;
  max-width: var(--review-max-width);
  min-height: 270px;
  margin: clamp(24px, 4vw, 42px) auto 0;
}

.review-slides {
  display: grid;
  min-height: inherit;
}

.review-slide {
  grid-area: 1 / 1;
  min-width: 0;
}

.review-slide[hidden] {
  display: none;
}

.review-card {
  display: flex;
  min-height: 270px;
  height: 100%;
  flex-direction: column;
  padding: var(--review-padding);
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .15);
}

.review-stars {
  display: flex;
  gap: var(--review-star-gap);
  align-items: center;
  min-height: 24px;
}

.review-stars img {
  width: var(--review-star-size);
  height: var(--review-star-size);
}

.review-text {
  margin: clamp(24px, 4vw, 36px) 0;
  color: var(--text);
  font-size: var(--review-font-size);
  line-height: var(--review-line-height);
}

.review-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: baseline;
  margin-top: auto;
  padding-top: 0;
  border-top: 0;
  color: #0e3056;
  font-size: .94rem;
}

.review-meta a {
  text-decoration: none;
}

.review-name {
  font-weight: 700;
}

.review-date {
  color: #4b5c70;
}

.review-controls {
  justify-content: center;
  max-width: var(--review-max-width);
  margin: 18px auto 0;
}

@media (max-width: 833px) {
  .carousel-arrow {
    width: var(--arrow-size-mobile);
    height: var(--arrow-size-mobile);
    flex-basis: var(--arrow-size-mobile);
  }

  .carousel-arrow img {
    width: var(--arrow-icon-mobile);
    height: var(--arrow-icon-mobile);
  }

  .intro-item { flex-wrap: wrap; }

  .review-stage { width: var(--review-mobile-width); }

  .review-stars { gap: var(--review-star-mobile-gap); }
  .review-stars img {
    width: var(--review-star-mobile-size);
    height: var(--review-star-mobile-size);
  }

  .prototype-hero .hero-stage {
    min-height: max(480px, calc(100svh - var(--nav-h)));
    min-height: max(480px, calc(100dvh - var(--nav-h)));
  }

  .prototype-hero .hero-slide {
    grid-template-columns: 1fr;
    gap: clamp(16px, 4vw, 28px);
    align-content: center;
    grid-auto-rows: max-content;
    padding: clamp(24px, 6vw, 52px) 0 152px var(--padX);
    text-align: center;
  }

  .prototype-hero .hero-content {
    max-width: 50ch;
    margin-inline: auto;
  }

  .prototype-hero .hero-heading {
    max-width: none;
  }

  .prototype-hero .nowrap {
    white-space: normal;
  }

  .prototype-hero .hero-sub {
    margin-inline: auto;
  }

  .prototype-hero .btn-row {
    justify-content: center;
  }

  .prototype-hero .hero-media-wrap {
    order: 2;
  }

  .prototype-hero .hero-media {
    max-width: none;
    max-height: clamp(120px, calc(100dvh - 568px), 480px);
    object-position: right center;
    margin-inline: auto 0;
    filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .3));
  }

  .hero-controls {
    right: var(--padX);
    left: var(--padX);
    bottom: 92px;
    justify-content: center;
  }

  .intro-grid {
    grid-template-columns: 1fr;
  }

  .intro-item,
  .intro-item:nth-child(even) {
    padding: clamp(22px, 6vw, 34px) 0;
    border-left: 0;
  }

  .intro-item:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .reviews-section {
    padding-top: 0;
  }
}

@media (max-width: 520px) {
  .prototype-hero .btn-row .btn {
    width: 100%;
  }


  .review-card {
    min-height: 300px;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .prototype-hero .hero-stage {
    min-height: 520px;
  }

  .prototype-hero .hero-slide {
    padding-top: 28px;
    padding-bottom: 82px;
  }
}

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

/* Keep the final footer links scrollable above the persistent contact control. */
.site-footer { padding-bottom: max(96px, env(safe-area-inset-bottom)); }

/* Quiet hero entrance. Active-state selectors replay on every slide change.
   Only opacity and transform animate; layout and the car position stay fixed. */
:root {
  --hero-reveal-duration: 420ms;
  --hero-reveal-delay: 80ms;
  --hero-reveal-stagger: 40ms;
  --hero-reveal-distance: 4px;
  --hero-reveal-ease: cubic-bezier(.22, 1, .36, 1);
}

.prototype-hero .hero-slide.is-active:not([hidden]) .hero-content > * {
  animation: hero-copy-reveal var(--hero-reveal-duration) var(--hero-reveal-ease) both;
  animation-delay: var(--hero-reveal-delay);
}

.prototype-hero .hero-slide.is-active:not([hidden]) .hero-content > :nth-child(2) {
  animation-delay: calc(var(--hero-reveal-delay) + var(--hero-reveal-stagger));
}

.prototype-hero .hero-slide.is-active:not([hidden]) .hero-content > :nth-child(3) {
  animation-delay: calc(var(--hero-reveal-delay) + var(--hero-reveal-stagger) * 2);
}

.prototype-hero .hero-slide.is-active:not([hidden]) .hero-media-wrap {
  animation: hero-media-reveal var(--hero-reveal-duration) ease-out both;
  animation-delay: var(--hero-reveal-delay);
}

@keyframes hero-copy-reveal {
  from { opacity: 0; transform: translateY(var(--hero-reveal-distance)); }
  to { opacity: 1; transform: none; }
}

@keyframes hero-media-reveal {
  from { opacity: .82; }
  to { opacity: 1; }
}

/* Focus is immediately legible even during the short entrance delay. */
.prototype-hero .hero-slide.is-active .hero-content > :focus-within {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .prototype-hero .hero-slide.is-active .hero-content > *,
  .prototype-hero .hero-slide.is-active .hero-media-wrap {
    animation: none !important;
  }
}