/* Shared layout constraints and touch-friendly controls. */
.hero > *, .company-content, .company-description > *, .principles > *,
.product-row-link > *, .footer-top > * { min-width: 0; }
img { max-width: 100%; }
button, a, input, textarea { touch-action: manipulation; }
.header nav > a, .products-toggle { min-height: 44px; display: flex; align-items: center; }
.menu-toggle, .contact-dialog-close { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
.product-menu-link { min-height: 64px; }
.product-row p, .company-description p, .principles p { overflow-wrap: break-word; }

/* Anchor the desktop dropdown to the page gutter, not the trigger width. */
@media (min-width: 761px) {
  .product-nav { position: static; }
  .header .products-menu {
    top: calc(100% - 4px);
    right: 4.5%;
    width: min(820px, 91vw);
    max-width: none;
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Give tablets the full text width instead of squeezing two hero columns. */
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 42px 6% 64px; }
  .hero-copy { width: 100%; max-width: none; padding-top: 0; }
  .hero h1 { font-size: clamp(42px, 7vw, 62px); letter-spacing: -2.5px; margin: 20px 0 24px; }
  .hero-description { width: auto; min-width: 0; max-width: 60ch; text-wrap: balance; }
  .hero-art { width: min(65%, 280px); margin: 40px auto 0; min-height: 0; transform: none; }
  .hero-art img { width: 100%; max-width: none; transform: none; }
  .company-description { gap: 28px; }
  .principles { gap: 28px; }
  .closing.contact { padding-block: 40px; }
}
@media (max-width: 760px) {
  .header { height: 78px; }
  .header nav { max-height: calc(100vh - 78px); max-height: calc(100dvh - 78px); overscroll-behavior: contain; }
  .header nav > a, .products-toggle { width: 100%; }
  .header nav { gap: 8px; padding-block: 16px; }
  .header .products-menu { max-height: none; overflow: visible; }
  .product-menu-link small { max-width: none; padding-right: 22px; }
  .company-description, .principles { grid-template-columns: minmax(0, 1fr); }
  .hero-art { width: min(60%, 230px); }
  .closing.contact h2 { font-size: clamp(36px, 7vw, 43px); }
  .contact-dialog { padding: 28px 24px; }
  .contact-dialog h2 { margin-right: 34px; }
}

.contact-dialog {
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overscroll-behavior: contain;
  scroll-padding-block: 24px;
}
@media (max-height: 600px) {
  .contact-dialog { padding: 24px; }
  .contact-dialog h2 { font-size: 30px; margin-bottom: 20px; }
  .contact-fields { gap: 14px; }
  .contact-fields textarea { height: 100px; min-height: 100px; }
  .contact-send { margin-top: 18px; }
}
@media (max-width: 359px) {
  .hero-actions { gap: 10px; }
  .hero-actions .button { padding-inline: 18px; }
  .contact-dialog { padding-inline: 20px; }
}

/* Avoid automatic input zoom on touch browsers, including wide tablets. */
.contact-fields input, .contact-fields textarea { font-size: 16px; }

/* Tablets: a compact two-column hero with a smaller supporting mark. */
@media (min-width: 761px) and (max-width: 1100px) {
  .hero {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr);
    align-items: center;
    gap: 32px;
    min-height: 460px;
    padding: 32px 4.5% 48px;
  }
  .hero-copy { width: 100%; max-width: 100%; padding-top: 0; }
  .hero h1 { font-size: clamp(40px, 4.6vw, 52px); letter-spacing: -2.4px; margin: 20px 0 24px; }
  .hero-description { width: auto; min-width: 0; max-width: 55ch; font-size: 15px; }
  .hero-art { width: 100%; max-width: 220px; margin: 0 auto; transform: none; min-height: 0; }
  .hero-art img { width: 100%; transform: none; }
  .hero-actions { gap: 12px; margin-top: 26px; }
}

/* Small phones and narrow split-screen panes: comfortable full-width actions. */
@media (max-width: 359px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .button { justify-content: center; }
  .hero h1 { font-size: clamp(34px, 12vw, 42px); letter-spacing: -2px; }
  h2, .company h2 { font-size: clamp(28px, 10vw, 36px); }
}

/* Short landscape windows prioritize the message and actions over decoration. */
@media (max-height: 500px) and (max-width: 1100px) {
  .header { height: 64px; }
  html { scroll-padding-top: 80px; }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 24px 6% 40px; }
  .hero-copy { width: 100%; max-width: 100%; }
  .hero-art { display: none; }
  .hero h1 { font-size: clamp(34px, 6vw, 48px); margin: 12px 0 20px; }
  .hero-description { width: auto; min-width: 0; max-width: 70ch; }
  .hero-actions { margin-top: 20px; }
  .header .products-menu { max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); }
}
@media (max-height: 500px) and (max-width: 760px) {
  .header nav { top: 63px; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); }
  .header .products-menu { max-height: none; }
}

/* Large monitors: retain full-width navigation with a readable content canvas. */
@media (min-width: 1800px) {
  .hero, .section, footer { width: 100%; max-width: 1800px; margin-inline: auto; padding-inline: 81px; }
  .header { padding-inline: max(4.5%, calc((100% - 1638px) / 2)); }
  .header .products-menu { right: max(4.5%, calc((100% - 1638px) / 2)); }
  .closing.contact { width: 91%; max-width: 1638px; margin-inline: auto; padding-inline: 108px; }
}

/* Hover decoration belongs to precise pointing devices, not touch taps. */
@media (hover: none) {
  .button:hover { transform: none; }
  .product-row-link:hover { background: transparent; }
}