/* Komstadt V3.7.5: responsive desktop/ultrawide hero layout.
   The existing tablet/mobile refinements from V3.6.8 are deliberately retained.
   No navigation links, tracking, form logic or images are changed. */

/* The P01 title included inline fixed width and height declarations.
   Let its box grow naturally to prevent clipping across desktop resolutions. */
@media screen and (min-width:801px) {
  body[data-page-id="P01"] .v27-hero-inner h1 {
    position:static!important;
    left:auto!important;
    top:auto!important;
    width:auto!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    font-size:clamp(58px,3.3vw,86px)!important;
    line-height:1.08!important;
    overflow-wrap:normal;
  }
}

/* Existing site-wide content limit was 1420px, whereas header CSS enforced
   a separate 1280px width. On 27-inch/4K monitors this left large gutters.
   Use one shared fluid rail for the header, home hero, inner heroes, cards.
   Smaller desktop/tablet/mobile widths retain the previous grid and rails. */
@media screen and (min-width:1600px) {
  :root { --container:90vw; }
  #site-header { --container:90vw!important; }

  /* Homepage P01: text follows the shared left rail; photography fills
     the right-hand side instead of leaving the text floating mid-screen. */
  body[data-page-id="P01"] .v27-hero {
    min-height:clamp(600px,28vw,760px);
  }
  body[data-page-id="P01"] .v27-hero-inner {
    min-height:clamp(600px,28vw,760px);
    max-width:clamp(690px,38vw,970px);
    padding:clamp(46px,3vw,76px) 0!important;
  }
  body[data-page-id="P01"] .v27-hero>img {
    inset:0 0 0 auto;
    left:auto;
    right:0;
    width:76%;
    height:100%;
    object-fit:cover;
    object-position:center 53%;
  }
  body[data-page-id="P01"] .v27-hero:after {
    background:linear-gradient(90deg,
      #001a2b 0%,#001a2bf5 24%,#001a2bdc 38%,
      #001a2b88 55%,#001a2b24 75%,#001a2b03 94%);
  }
  body[data-page-id="P01"] .v27-hero-inner>p:not(.v27-meta) {
    max-width:780px;
    font-size:clamp(20px,.95vw,24px)!important;
    line-height:1.52!important;
  }
  body[data-page-id="P01"] .v27-hero-inner .v27-meta {
    max-width:100%;
  }

  /* Consistent wide-screen rules for section.hero across inner pages. */
  section.hero:not(.hero-noimage) {
    min-height:clamp(465px,24vw,650px);
  }
  section.hero.hero-compact:not(.hero-noimage) {
    min-height:clamp(415px,20vw,555px);
  }
  section.hero>.hero-image {
    width:66%;
    object-position:center;
  }
  section.hero:not(.hero-noimage)>.hero-shade {
    background:linear-gradient(90deg,
      #001d2d 0%,#001d2df6 22%,#001d2dd9 38%,
      #001d2d91 57%,#001d2d23 79%,#001d2d05 100%);
  }
  section.hero:not(.hero-noimage)>.hero-inner {
    padding-top:clamp(30px,2vw,62px);
    padding-bottom:clamp(36px,2.8vw,68px);
  }
  section.hero:not(.hero-noimage) h1 {
    font-size:clamp(54px,2.9vw,82px);
    max-width:min(950px,52vw);
    line-height:1.12;
  }
  section.hero.hero-compact:not(.hero-noimage) h1 {
    font-size:clamp(52px,2.75vw,76px);
  }
  section.hero:not(.hero-noimage) .hero-copy {
    max-width:min(800px,50vw);
    font-size:clamp(17px,.95vw,23px);
  }

  /* Adjust card text / images together with the wider content rail. */
  body[data-page-id="P01"] .v27-solution-strip a {
    padding:clamp(25px,1.3vw,36px) clamp(19px,1.25vw,35px);
  }
  body[data-page-id="P01"] .v27-solution-strip strong {
    font-size:clamp(13px,.8vw,20px);
  }
  body[data-page-id="P01"] .v27-solution-strip span {
    font-size:clamp(11px,.65vw,16px);
  }
  body[data-page-id="P01"] .v27-challenge-card img {
    height:clamp(185px,10vw,280px);
  }
  body[data-page-id="P01"] .v27-challenge-card h3 {
    font-size:clamp(17px,.85vw,24px);
  }
  body[data-page-id="P01"] .v27-challenge-card p {
    font-size:clamp(14px,.72vw,19px);
  }
}

/* For compact laptops, prevent arbitrary pixel measurements on P01 from
   reducing readability. Other responsive layouts remain as in V3.7.4. */
@media screen and (min-width:801px) and (max-width:1100px) {
  body[data-page-id="P01"] .v27-hero-inner h1 {
    font-size:clamp(48px,5.5vw,60px)!important;
  }
}

/* Preserve existing V3.6.8 phone and tablet behavior, including nav toggle,
   single-column cards, and the eight customer logos. */
@media screen and (max-width:800px) {
  body[data-page-id="P01"] .v27-hero-inner h1 {
    width:100%!important;
    height:auto!important;
    max-width:100%!important;
  }
}