/* Final shared rhythm; structural layouts and the site's light/dark palette remain local. */
:root { --studio-content: 1280px; --studio-radius: 8px; }
/* Text is available on the first paint, even before a scroll-reveal observer fires. */
html.reveal-enabled [data-reveal],
html.reveal-enabled [data-reveal].is-revealed {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}
.container { max-width: var(--studio-content); }
.btn { min-height: 48px; border-radius: var(--studio-radius); }
.nav-mobile, .nav-mobile .nav-menu li, .nav-mobile-cta {
  transition-duration: 160ms !important;
  transition-delay: 0ms !important;
}
.btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid #82c8eb;
  outline-offset: 4px;
}
.home-page .home-hero-grid { max-width: var(--studio-content); }
.home-page .home-title { font-size: clamp(44px, 5.1vw, 72px); line-height: 1.02; }
.home-page .home-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 48px; }
.home-page .home-hero .hero-description { max-width: 600px; }
.home-page .home-hero .hero-actions { gap: 12px; }
.home-page .home-hero .btn { min-height: 50px; }
.services-page .services-intro h1,
.contact-page .contact-copy h1,
.about-page .about-hero-copy h1,
.portfolio-page .portfolio-hero h1 {
  font-size: clamp(44px, 5vw, 70px);
  line-height: 1.04;
}
.services-page .services-intro .intro-copy,
.contact-page .contact-copy .intro-copy { line-height: 1.75; }

/* The footage supplies the atmosphere; keep only the section-edge fades. */
.home-page .home-hero::before { content: none; }
.home-page .home-hero::after {
  background: linear-gradient(180deg, transparent 76%, rgba(7, 16, 26, .82));
}
.home-page .home-hero-copy { background: none; }
.home-page .home-hero-visual { transform-style: flat; isolation: isolate; }
.home-page .home-browser { z-index: 2; animation: none; box-shadow: 0 24px 60px rgba(3, 10, 18, .3); }
.home-page .home-hero-visual::before,
.home-page .home-hero-visual::after,
.home-page .home-card-layout::before,
.home-page .home-card-layout::after,
.home-page .home-card-performance::before,
.home-page .home-card-performance::after,
.home-page .home-micro-build::before,
.home-page .home-micro-build::after { content: none; }
.home-page .home-card-layout,
.home-page .home-card-performance,
.home-page .home-micro-build { z-index: 5; border-radius: 6px; animation: none; backdrop-filter: blur(8px); }
.home-page .home-benefits { box-shadow: none; border-radius: 8px; }
.home-page .home-benefits > div > span { opacity: 1; transform: none; }
.home-page .home-benefits::after { content: none; }
.home-page .why-statement { top: auto; border: 0; border-radius: 12px; background: rgba(248, 251, 252, .26); box-shadow: none; }
.home-page .why-statement::before,
.home-page .why-statement::after { content: none; }
.home-page .why-list { border: 0; border-radius: 12px; box-shadow: none; }
.home-page .why-list article:nth-child(n) { margin-left: 0; margin-right: 0; }
.home-page .principles-background::after { background: rgba(241, 246, 248, .78); }
.about-page .approach-background::after { background: rgba(239, 246, 248, .74); }
.about-page .approach-steps .approach-step::before,
.about-page .approach-steps .approach-step::after {
  opacity: 1 !important;
  clip-path: none !important;
  animation: none !important;
}
.home-page .hero-showcase-video { pointer-events: none; }

/* Real controls, independent of painted icons in the retired room image. */
.contact-page .contact-hero-inner { position: relative; z-index: 1; }
.contact-page .contact-copy { max-width: min(700px, 58vw); }
.contact-page .contact-hotspots {
  position: absolute;
  top: 50%; right: max(6vw, calc((100vw - 1240px) / 2));
  bottom: auto; left: auto;
  display: grid; gap: 12px;
  width: auto;
  transform: translateY(-50%);
  pointer-events: none;
}
.contact-page .contact-hotspot {
  position: static;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border: 1px solid rgba(177, 217, 238, .35);
  border-radius: 12px;
  color: #dff4ff;
  background: rgba(8, 25, 40, .72);
  box-shadow: none;
  transform: none;
  pointer-events: auto;
  touch-action: manipulation;
}
.contact-page .contact-hotspot svg { width: 25px; height: 25px; display: block; }
.contact-page .contact-hotspot:hover { background: #173e57; border-color: #8bcbe9; transform: translateY(-2px); }
.contact-page .contact-hotspot:focus-visible { outline: 2px solid #91d4f4; outline-offset: 4px; }
.contact-page .contact-hotspot:active { transform: translateY(0); background: #235471; }
.contact-page .contact-action { box-shadow: none; }
.contact-page .contact-row:hover { transform: translateX(3px); }

@media (max-width: 1023px) {
  .home-page .home-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .home-page .home-title { max-width: 780px; font-size: clamp(44px, 7.6vw, 64px); }
  .contact-page .contact-copy { max-width: calc(100% - 88px); }
  .contact-page .contact-hotspots { right: 24px; }
}
@media (max-width: 767px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .home-page .home-title,
  .services-page .services-intro h1,
  .contact-page .contact-copy h1,
  .about-page .about-hero-copy h1,
  .portfolio-page .portfolio-hero h1 { font-size: clamp(38px, 10.7vw, 50px); line-height: 1.04; }
  .contact-page .contact-hero { display: block; padding-top: 88px; padding-bottom: 64px; }
  .contact-page .contact-copy { max-width: 100%; }
  .contact-page .contact-hotspots {
    position: relative; inset: auto; z-index: 2;
    grid-template-columns: repeat(5, 48px);
    gap: 12px; justify-content: start;
    margin: 28px 20px 0; transform: none;
  }
  .contact-page .contact-hotspot { width: 48px; height: 48px; border-radius: 10px; }
  .home-page .why-statement { padding: 20px; }
  .home-page .home-card-layout { right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-page .contact-hotspot:hover,
  .contact-page .contact-row:hover { transform: none; }
}