/* v232 - compact typography + edge-to-edge right-hand hero media.
   The font families, weights, and all 36 responsive role sizes are provided by
   the CMS preset; these rules only control hero layout, geometry and text fit. */
:root {
  --section: clamp(52px, 5.5vw, 76px);
  --hero-desktop-height: clamp(450px, calc(100svh - 100px), 680px);
}

@media (min-width: 901px) {
  /* Shared split heroes are two full-height columns, with no white media gutter. */
  body[data-design-system="2026"] main#main .on[data-p="home"] > .hero.hero-atelier,
  body[data-design-system="2026"] main#main .on[data-p="about"] > .about-hero,
  body[data-design-system="2026"] main#main .on[data-p="standards"] > .standards-hero,
  body[data-design-system="2026"] main#main .on[data-p="careers"] > .careers-hero-v188,
  body[data-design-system="2026"] main#main .on[data-p="partner"] > .partner-hero-v196 {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: visible;
    background: var(--paper);
  }

  body[data-design-system="2026"] main#main .on[data-p="home"] > .hero.hero-atelier > .w.hero-artboard,
  body[data-design-system="2026"] main#main .on[data-p="about"] > .about-hero > .w.about-hero-shell,
  body[data-design-system="2026"] main#main .on[data-p="standards"] > .standards-hero > .w.standards-hero-shell,
  body[data-design-system="2026"] main#main .on[data-p="careers"] > .careers-hero-v188 > .w.careers-hero-shell,
  body[data-design-system="2026"] main#main .on[data-p="partner"] > .partner-hero-v196 > .partner-hero-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 48%) minmax(0, 52%) !important;
    align-items: stretch !important;
    gap: 0 !important;
    height: auto !important;
    min-height: var(--hero-desktop-height) !important;
    max-height: none !important;
  }

  body[data-design-system="2026"] main#main .on[data-p="home"] > .hero .hero-copy,
  body[data-design-system="2026"] main#main .on[data-p="about"] > .about-hero .about-hero-copy,
  body[data-design-system="2026"] main#main .on[data-p="standards"] > .standards-hero .standards-hero-copy,
  body[data-design-system="2026"] main#main .on[data-p="careers"] > .careers-hero-v188 .careers-hero-copy,
  body[data-design-system="2026"] main#main .on[data-p="partner"] > .partner-hero-v196 .partner-hero-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(24px, 3vw, 48px) clamp(24px, 3.1vw, 55px) !important;
    padding-left: max(var(--gutter, 24px), calc((100vw - var(--helprite-content-width, 1600px)) / 2 + var(--gutter, 24px))) !important;
    background: transparent;
  }

  body[data-design-system="2026"] main#main .on[data-p="home"] > .hero .hero-copy > h1,
  body[data-design-system="2026"] main#main .on[data-p="about"] > .about-hero .about-hero-copy > h1,
  body[data-design-system="2026"] main#main .on[data-p="standards"] > .standards-hero .standards-hero-copy > h1,
  body[data-design-system="2026"] main#main .on[data-p="careers"] > .careers-hero-v188 .careers-hero-copy > h1,
  body[data-design-system="2026"] main#main .on[data-p="partner"] > .partner-hero-v196 .partner-hero-copy > h1 {
    margin-bottom: clamp(13px, 1.6vw, 22px) !important;
    max-width: 18ch !important;
    overflow-wrap: normal;
  }

  body[data-design-system="2026"] main#main .on[data-p="home"] > .hero .hero-copy > p,
  body[data-design-system="2026"] main#main .on[data-p="about"] > .about-hero .about-hero-copy > p,
  body[data-design-system="2026"] main#main .on[data-p="standards"] > .standards-hero .standards-hero-copy > p,
  body[data-design-system="2026"] main#main .on[data-p="careers"] > .careers-hero-v188 .careers-hero-copy > p,
  body[data-design-system="2026"] main#main .on[data-p="partner"] > .partner-hero-v196 .partner-hero-copy > p:not(.partner-hero-kicker) {
    max-width: 57ch;
    margin-bottom: 14px;
  }

  body[data-design-system="2026"] main#main .on[data-p="home"] > .hero .hero-actions,
  body[data-design-system="2026"] main#main .on[data-p="partner"] > .partner-hero-v196 .partner-hero-actions {
    margin-top: clamp(15px, 2.5vw, 24px) !important;
    gap: 12px 21px !important;
  }

  /* Image or video must fill every pixel of the right column, not a centered square. */
  body[data-design-system="2026"] main#main .on[data-p="home"] > .hero .hero-stage,
  body[data-design-system="2026"] main#main .on[data-p="about"] > .about-hero .about-hero-media,
  body[data-design-system="2026"] main#main .on[data-p="standards"] > .standards-hero .standards-hero-media,
  body[data-design-system="2026"] main#main .on[data-p="careers"] > .careers-hero-v188 .careers-hero-media,
  body[data-design-system="2026"] main#main .on[data-p="partner"] > .partner-hero-v196 .partner-hero-media {
    position: relative !important;
    display: block !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: var(--hero-desktop-height) !important;
    max-height: none !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  body[data-design-system="2026"] main#main .on[data-p="home"] > .hero .hero-video-stage .hero-video-frame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  body[data-design-system="2026"] main#main .on[data-p="home"] > .hero .hero-video-frame :is(video,img,iframe),
  body[data-design-system="2026"] main#main .on[data-p="about"] > .about-hero .about-hero-image,
  body[data-design-system="2026"] main#main .on[data-p="standards"] > .standards-hero .standards-hero-image,
  body[data-design-system="2026"] main#main .on[data-p="careers"] > .careers-hero-v188 .careers-hero-image,
  body[data-design-system="2026"] main#main .on[data-p="partner"] > .partner-hero-v196 .partner-hero-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center center;
    background-position: center center;
    background-size: cover !important;
  }
  /* Keep the existing corrective crop for only the older fallback poster. */
  body[data-design-system="2026"] main#main .on[data-p="home"] > .hero .hero-video-frame img[src*="assets/img/about-hero-building.jpg"] {
    width: 106.5% !important;
    height: 106.5% !important;
  }

  /* Never hide large hero content: the grid grows naturally if text needs it. */
  body[data-design-system="2026"] main#main :is(.hero-copy,.about-hero-copy,.standards-hero-copy,.careers-hero-copy,.partner-hero-copy) > :last-child { margin-bottom: 0; }
}

/* Short desktop screens: keep heading, summary, and CTA above the fold. */
@media (min-width: 901px) and (max-height: 720px) {
  :root { --hero-desktop-height: max(410px, calc(100svh - 92px)); }
  body[data-design-system="2026"] main#main .on > :is(.hero,.about-hero,.standards-hero,.careers-hero-v188,.partner-hero-v196) :is(.hero-copy,.about-hero-copy,.standards-hero-copy,.careers-hero-copy,.partner-hero-copy) {
    padding-block: 18px !important;
  }
  body[data-public-design][data-design-system="2026"] main#main .on[data-p] > :is(.hero,.about-hero,.standards-hero,.careers-hero-v188,.partner-hero-v196) :is(.hero-copy,.about-hero-copy,.standards-hero-copy,.careers-hero-copy,.partner-hero-copy) > h1 {
    font-size: clamp(38px, min(4.5vw, 8.5vh), 51px) !important;
    line-height: 1.03 !important;
  }
  body[data-design-system="2026"] main#main .on[data-p="careers"] .careers-hero-copy > h2 {
    margin-bottom: 10px !important;
  }
}

@media (max-width: 900px) {
  /* Mobile keeps a naturally stacked, readable hero. Media may be shorter. */
  body[data-design-system="2026"] main#main .on[data-p="home"] > .hero.hero-atelier {
    padding-block: 32px 36px !important;
  }
  body[data-design-system="2026"] main#main .on[data-p="home"] > .hero .hero-video-frame {
    aspect-ratio: 5 / 4 !important;
    max-height: 400px !important;
  }
}

@media (min-width: 901px) {
  /* Inner-page introductions contain longer text than Home; give that copy
     breathing room without reducing the right-hand image below 46%. */
  body[data-design-system="2026"] main#main .on[data-p="about"] > .about-hero > .w.about-hero-shell,
  body[data-design-system="2026"] main#main .on[data-p="careers"] > .careers-hero-v188 > .w.careers-hero-shell,
  body[data-design-system="2026"] main#main .on[data-p="partner"] > .partner-hero-v196 > .partner-hero-shell {
    grid-template-columns: minmax(0, 54%) minmax(0, 46%) !important;
  }
}

@media (min-width: 901px) and (max-height: 720px) {
  body[data-public-design][data-design-system="2026"] main#main .on[data-p] > :is(.hero,.about-hero,.standards-hero,.careers-hero-v188,.partner-hero-v196) :is(.hero-copy,.about-hero-copy,.standards-hero-copy,.careers-hero-copy,.partner-hero-copy) > h1 {
    font-size: clamp(36px, min(4vw, 7vh), 45px) !important;
    line-height: 1.04 !important;
    margin-bottom: 10px !important;
  }
  body[data-public-design][data-design-system="2026"] main#main .on[data-p] > :is(.hero,.about-hero,.standards-hero,.careers-hero-v188,.partner-hero-v196) :is(.hero-copy,.about-hero-copy,.standards-hero-copy,.careers-hero-copy,.partner-hero-copy) > p:not(.eyebrow):not(.partner-hero-kicker) {
    font-size: 15px !important;
    line-height: 1.45 !important;
    margin-bottom: 9px !important;
  }
  body[data-design-system="2026"] main#main .on[data-p] > :is(.hero,.about-hero,.standards-hero,.careers-hero-v188,.partner-hero-v196) :is(.eyebrow,.partner-hero-kicker) {
    margin-bottom: 8px !important;
  }
  body[data-public-design][data-design-system="2026"] main#main .on[data-p="careers"] .careers-hero-copy > h2 {
    font-size: 23px !important;
    line-height: 1.15 !important;
    margin-bottom: 8px !important;
  }
  body[data-design-system="2026"] main#main .on[data-p="partner"] .partner-hero-actions {
    gap: 8px 12px !important;
    margin-top: 10px !important;
  }
  body[data-public-design][data-design-system="2026"] main#main .on[data-p="partner"] .partner-hero-actions .btn,
  body[data-public-design][data-design-system="2026"] main#main .on[data-p="partner"] .partner-hero-actions .lnk {
    font-size: 14px !important;
  }
}

/* The bundled fallback JPEG was re-exported without the white bitmap strip.
   Do not retain the old over-zoom workaround for that corrected file. */
@media (min-width: 901px) {
  body[data-design-system="2026"] main#main .on[data-p="home"] > .hero .hero-video-frame img[src*="assets/img/about-hero-building.jpg"] {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}
/* Reduced navigation sizes should not let long names collide with the CTA. */
@media (min-width: 1200px) and (max-width: 1400px) {
  body[data-design-system="2026"] header#site-header .bar {
    column-gap: clamp(9px, 1vw, 15px);
  }
  body[data-design-system="2026"] header#site-header #nav > ul a {
    padding-inline: 6px;
  }
  body[data-design-system="2026"] header#site-header .portal.v223-desktop-portal {
    padding-inline: 9px;
  }
}
@media (min-width: 1200px) and (max-width: 1299px) {
  body[data-design-system="2026"] header#site-header #nav > ul a {
    padding-inline: 3px;
  }
}
@media (min-width: 1200px) and (max-width: 1259px) {
  body[data-public-design][data-design-system="2026"] header#site-header #nav > ul a {
    font-size: 15px !important;
  }
}