/* Shared responsive refinement of the approved STIX layout.
   Component styles still own their content; this layer owns screen adaptation. */
.page-home .frame {
  padding-left: max(clamp(16px, 4.5vw, 64px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(16px, 4.5vw, 64px), env(safe-area-inset-right, 0px));
}
.page-home .section { padding-block: clamp(48px, 6vw, 88px); }
.page-home .home-hero-layout { gap: clamp(28px, 5vw, 80px); }
.page-home .home-hero h1 { font-size: clamp(40px, 5.35vw + 19px, 84px); letter-spacing: -.045em; }
.page-home .home-section-head h2 { font-size: clamp(29px, 2.5vw + 10px, 43px); }
.page-home .home-hero-aside > p { max-width: 46ch; }
.page-home .home-button { min-width: 0; }
.page-home .home-navigation a { white-space: nowrap; }
.page-home .footer-contact-column, .page-home .footer-about, .page-home .footer-navigation { min-width: 0; }
.page-home .footer-address address, .page-home .contact-links a { overflow-wrap: anywhere; }
.page-home .home-footer { padding-bottom: max(25px, env(safe-area-inset-bottom, 0px)); }
.page-home .equipment-dialog {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overscroll-behavior: contain;
}
.page-home .inquiry-dialog, .page-home .equipment-dialog { scroll-padding-block: 80px 24px; }

/* Header and contact information need their own rows before they get cramped. */
@media (min-width: 761px) and (max-width: 1023px) {
  .page-home .home-header {
    height: auto;
    min-height: 132px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 24px;
    padding-top: 20px;
    padding-bottom: 8px;
  }
  .page-home .home-header .home-navigation {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin: 8px 0 0;
    justify-content: flex-start;
    gap: clamp(24px, 4vw, 40px);
    font-size: 14px;
  }
  .page-home .home-header .header-estimate { grid-column: 2; grid-row: 1; }
  .page-home .home-header-cloud .header-account { margin-left: auto; }
}
@media (max-width: 1023px) {
  .page-home .home-footer-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 40px; }
  .page-home .footer-contact-column { grid-column: 1 / -1; }
  .page-home .footer-location { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .page-home .footer-mini-map { height: 200px; }
  .page-home .case-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
/* Readable case previews on small tablets, rather than three 180px columns. */
@media (min-width: 601px) and (max-width: 1023px) {
  .page-home .case-card-filled { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
  .page-home .case-card-filled .card-caption { margin-top: 0; }
  .page-home .case-card-filled h3 { font-size: clamp(22px, 2.5vw, 26px); }
  .page-home .case-card-kind { font-size: 15px; }
  .page-home .case-card-description { font-size: 14px; }
  .page-home .case-cover-feliksov, .page-home .case-cover-system { align-self: start; }
}
@media (max-width: 760px) {
  .page-home .home-header { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  .page-home .home-navigation { font-size: 13px; gap: 8px; }
  .page-home .home-hero { padding-top: clamp(32px, 6vw, 44px); }
  .page-home .home-hero h1 { font-size: clamp(40px, 7vw + 15px, 64px); }
  .page-home .home-hero-aside > p { font-size: 16px; line-height: 1.75; }
  .page-home .development-card { padding: clamp(15px, 3.3vw, 22px); }
  .page-home .development-card h3 { font-size: clamp(15px, 2vw + 8px, 18px); line-height: 1.4; }
  .page-home .development-card p { font-size: 14px; line-height: 1.7; }
  .page-home .development-icon { margin-bottom: 22px; }
  .page-home .home-faq .faq-list { margin-top: 0; }
  .page-home .founder-description { max-width: 60ch; }
  .page-home .cloud-hero h1 { font-size: clamp(35px, 5.5vw + 13px, 50px); letter-spacing: -.035em; }
  .page-home .system-case-hero h1 { font-size: clamp(35px, 4.8vw + 19px, 52px); letter-spacing: -.035em; }
  .page-home .feliksov-hero h1 { font-size: clamp(35px, 4.8vw + 17px, 50px); letter-spacing: -.035em; }
  .page-home #hardware-title { font-size: clamp(35px, 4.8vw + 17px, 50px); letter-spacing: -.035em; }
}
@media (max-width: 600px) {
  .page-home .footer-location { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .page-home .home-footer-columns { gap: 28px 20px; }
  .page-home .case-grid { gap: 40px; }
  .page-home .hero-ribbon { height: clamp(96px, 28vw, 136px); }
  .page-home .home-button { width: 100%; }
  .page-home .header-estimate { width: auto; }
  .page-home .founder-photo { max-width: 400px; }
  .page-home .inquiry-dialog-body { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 374px) {
  .page-home .development-card { padding: 16px 10px 18px; }
}

/* One short entrance, no script, no loading screen, no hidden content.
   Opacity starts above zero so the headline remains readable while appearing. */
@keyframes stix-enter {
  from { opacity: .65; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes stix-header-enter {
  from { opacity: .8; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes stix-dialog-enter {
  from { opacity: .65; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .page-home .home-header { animation: stix-header-enter 240ms ease-out both; }
  .page-home :is(.home-hero h1, .cloud-hero-copy, .feliksov-hero-copy, .system-case-hero-copy, .inner-hero .section-head) { animation: stix-enter 320ms cubic-bezier(.2, 0, .2, 1) both; }
  .page-home .home-hero-aside { animation: stix-enter 360ms 40ms cubic-bezier(.2, 0, .2, 1) both; }
  .page-home :is(.hero-ribbon, .cloud-brand-stage, .feliksov-hero-visual, .system-case-hero-visual) { animation: stix-enter 400ms 60ms cubic-bezier(.2, 0, .2, 1) both; }
  .page-home :is(.inquiry-dialog, .equipment-dialog)[open] { animation: stix-dialog-enter 200ms ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .page-home *, .page-home *::before, .page-home *::after { animation: none !important; }
}