/* Sections fill the viewport; a shared inset keeps reading and action areas coherent. */
@media (min-width: 761px) {
  .concept-review { padding-inline: max(24px, calc((100vw - 1760px) / 2)); }
  .website .site-header,
  .website .services,
  .website .contact,
  .website .expanded-section,
  .website .site-footer { padding-inline: var(--layout-inset); }
  .website .expanded-section { padding-block: clamp(48px, 4.5vw, 80px); }
  .website .services { padding-block: clamp(38px, 3.5vw, 64px); }
  .website .contact { padding-block: clamp(36px, 3.5vw, 64px); }
  .website .site-footer { padding-top: 30px; }
  .website .site-header { gap: clamp(20px, 3vw, 48px); }
  .website .site-nav { gap: clamp(24px, 2.4vw, 42px); }
  .website .area-copy p,
  .website .faq-answer p,
  .website .cooperation-steps p { max-width: 60ch; }
  .website .service-card .service-detail-copy p { max-width: 65ch; }
  .website .expanded-heading > p { max-width: 60ch; }
  .website .cooperation-steps { gap: clamp(28px, 3vw, 56px); }
  .website .contact-inner { padding-inline: 0; }

  .variant-natural .site-header,
  .variant-technical .site-header { margin-inline: 0; }
  .variant-natural .hero {
    grid-template-columns: minmax(0, calc(var(--layout-inset) + min(36vw, 620px))) minmax(0, 1fr);
  }
  .variant-natural .hero-copy { padding: 24px 24px 24px var(--layout-inset); }
  .variant-natural h1 { font-size: clamp(39px, 5.9vw, 84px); }
  .variant-natural .hero-description { max-width: 31ch; }
  .variant-natural .hero-photo { height: clamp(380px, 42vw, 720px); aspect-ratio: auto; }
  .variant-natural .services-heading { margin-inline: 0; gap: clamp(24px, 3vw, 48px); }
  .variant-natural .services h2 { font-size: clamp(29px, 4.16vw, 56px); }
  .variant-natural .service-grid { gap: clamp(28px, 4vw, 60px); }
  .variant-natural .service-card + .service-card::before { left: calc(clamp(28px, 4vw, 60px) / -2); }
  .variant-natural .service-top { margin-left: 0; gap: clamp(12px, 1.5vw, 24px); }
  .variant-natural .service-card p { margin-left: calc(51px + clamp(12px, 1.5vw, 24px)); }
  .variant-natural .contact h2 { font-size: clamp(36px, 3.5vw, 50px); }

  .variant-technical .hero-top { padding: 36px var(--layout-inset) 28px; }
  .variant-technical .hero-copy { max-width: 1120px; }
  .variant-technical h1 { font-size: clamp(70px, 10.48vw, 128px); }
  .variant-technical .hero-aside { right: var(--layout-inset); }
  .variant-technical .hero-photo { height: clamp(300px, 31vw, 820px); aspect-ratio: auto; }
  .variant-technical .services-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 280px);
    gap: 12px 32px;
  }
  .variant-technical .section-label { grid-column: 1 / -1; margin-bottom: 0; }
  .variant-technical .services h2 { font-size: clamp(29px, 4.11vw, 52px); }
  .variant-technical .service-intro { position: static; max-width: none; font-size: 14px; align-self: end; }
  .variant-technical .service-card h3 { font-size: clamp(30px, 2.5vw, 40px); }
  .variant-technical .contact h2 { font-size: clamp(33px, 3.4vw, 56px); }
  .variant-technical .contact-details { padding-left: clamp(28px, 5vw, 98px); }

  .dark-hero { height: auto; min-height: clamp(620px, calc(100svh - 72px), 900px); }
  .variant-dark .hero { padding: clamp(100px, 13svh, 200px) var(--layout-inset) 64px; }
  .variant-dark .hero-copy { max-width: 1120px; }
  .variant-dark h1 { font-size: clamp(53px, 6.5vw, 92px); }
  .variant-dark .services h2 { font-size: clamp(35px, 3.2vw, 52px); }
  .variant-dark .service-intro { max-width: 32ch; }
  .variant-dark .service-card p { max-width: 32ch; }
  .variant-dark .contact h2 { font-size: clamp(39px, 3.7vw, 64px); }

  .variant-friendly h1 { font-size: clamp(45px, 6.17vw, 80px); }
  .variant-friendly .hero-photo {
    width: calc(100% - 2 * var(--photo-inset));
    height: clamp(330px, 30vw, 820px);
    aspect-ratio: auto;
    margin-inline: var(--photo-inset);
  }
  .variant-friendly .services h2 { font-size: clamp(29px, 2.8vw, 44px); }
  .variant-friendly .service-card h3 { font-size: clamp(24px, 2vw, 30px); }
  .variant-friendly .cooperation { margin-inline: var(--layout-inset); padding-inline: 0; }
  .variant-friendly .service-area {
    margin-inline: var(--photo-inset);
    padding-inline: max(24px, calc(var(--layout-inset) - var(--photo-inset)));
  }
  .variant-friendly .site-footer { margin-inline: var(--layout-inset); padding-inline: 0; }

  .variant-natural { --expanded-heading-size: clamp(35px, 3.7vw, 56px); }
  .variant-technical { --expanded-heading-size: clamp(35px, 3.4vw, 52px); }
  .variant-dark { --expanded-heading-size: clamp(35px, 3.2vw, 52px); }
  .variant-friendly { --expanded-heading-size: clamp(32px, 2.9vw, 44px); }
}

@media (min-width: 761px) and (max-width: 1024px) {
  .variant-technical .hero-aside { display: none; }
  .variant-dark .contact-details { padding-left: 24px; }
  .variant-friendly .site-header { gap: 16px; }
  .variant-friendly .site-nav { gap: 22px; }
}

@media (min-width: 761px) and (max-height: 650px) {
  .dark-hero { min-height: 580px; }
  .variant-dark .site-header { min-height: 100px; padding-top: 22px; }
  .variant-dark .hero { padding-top: 70px; padding-bottom: 48px; }
}