/* Desktop composition: fill the opening viewport, but let enlarged text grow.
 * Phone/tablet layouts retain their approved styles in site.css. */
@media (min-width: 901px) {
  :root {
    --eo-header-height: clamp(77px, 10svh, 99px);
    --eo-admin-height: 0px;
    --eo-opening-height: calc(100svh - var(--eo-header-height) - var(--eo-admin-height));
    --eo-section-space: clamp(48px, 8svh, 96px);
  }
  body.admin-bar { --eo-admin-height: 32px; }
  .header-inner { min-height: calc(var(--eo-header-height) - 1px); }
  .hero-clean {
    min-height: var(--eo-opening-height);
    grid-template-columns: 1fr 1fr;
  }
  .hero-clean .hero-copy { padding-block: clamp(28px, 5svh, 64px); }
  .hero-clean h1 {
    font-size: clamp(42px, min(5.1vw, 8.3svh), 72px);
    margin-bottom: clamp(18px, 3svh, 30px);
  }
  .hero-clean .hero-description { margin-bottom: 0; }
  .hero-clean .hero-actions { margin-top: clamp(16px, 3svh, 30px); }
  .hero-clean .hero-portrait {
    top: 12px;
    right: 0;
    width: 52%;
    height: calc(100% - 24px);
    background-size: 100% 100%, 100% 100%, contain;
    background-position: center, center, center;
  }
  .eo-about-hero, .advisory-intro-clean {
    min-height: var(--eo-opening-height);
    padding-block: clamp(28px, 5svh, 64px);
  }
  .eo-about-hero .about-portrait {
    min-height: 0;
    height: 100%;
    align-self: stretch;
    background-size: 100% 100%, 100% 100%, contain;
    background-position: center;
  }
  .advisory-intro-clean .advisory-portrait {
    min-height: 0;
    height: 100%;
    align-self: stretch;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .eo-about-hero h1, .advisory-intro-clean h1 {
    font-size: clamp(35px, min(4vw, 6.5svh), 54px);
  }
  .home .section, .home .journey-section,
  .home .philosophy, .home .closing,
  .home .eo-consultation { padding-block: var(--eo-section-space); }
  .home .eo-consultation-section { margin-top: 0; }
  .eo-consultation-image img { aspect-ratio: auto; object-fit: contain; }
  .home .journey-heading { margin-bottom: clamp(28px, 5svh, 56px); }
  .home .journey-cta { margin-top: clamp(25px, 4svh, 45px); }
  .home .section-heading { margin-bottom: clamp(30px, 5svh, 55px); }
  .home .package-preview > div { padding-block: clamp(24px, 4svh, 40px); }
}