.page-hero,.category-hero,.detail-hero{display:grid;grid-template-columns:1fr 1fr;min-height:610px;background:var(--color-primary);color:#fff}.page-hero>div:first-child,.category-hero>div:first-child,.detail-hero>div:first-child{align-self:center;max-width:700px;padding:100px var(--page-padding)}.page-hero h1,.category-hero h1{margin-bottom:28px}.page-hero p:not(.eyebrow),.category-hero p:not(.eyebrow),.detail-hero p:not(.eyebrow){max-width:510px;color:#c8d9d7;font-size:16px}.page-hero .button,.category-hero .button{margin-top:35px}.page-hero .eyebrow,.category-hero .eyebrow,.detail-hero .eyebrow{color:#9ed5d3}.product-hero-art,.category-hero-art{position:relative;overflow:hidden;background:var(--color-teal-dark)}.product-hero-art>span{position:absolute;bottom:44px;left:42px;color:var(--color-primary);font:500 12px var(--font-mono);letter-spacing:2px}.product-hero-art i{position:absolute;display:block;border:1px solid rgba(15,47,47,.48);border-radius:50%}.product-hero-art i:nth-of-type(1){top:12%;right:-4%;width:440px;height:440px}.product-hero-art i:nth-of-type(2){top:29%;right:17%;width:270px;height:270px;background:#b9dddd}.product-hero-art i:nth-of-type(3){top:42%;right:30%;width:105px;height:105px;background:var(--color-primary)}.catalogue{background:#fff}.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.category-card{position:relative;display:flex;min-height:250px;padding:25px;overflow:hidden;background:var(--color-mist);border:1px solid transparent;border-radius:var(--radius-lg);transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease}.category-card h3{font-size:26px}.category-card p{max-width:290px;margin-top:10px;font-size:13px}.category-card .number{position:absolute;top:20px;right:22px}.category-card>div{align-self:end}
/* Hover/keyboard-focus parity: reference effect supplied 2026-09-12 (external site,
   inspected manually, not part of this repo). Reuses --color-teal/--color-primary/
   --color-teal-dark tokens; translateY(-3px) and .22s are the reference's own literal
   values with no equivalent design token. .category-card is currently dormant (unlinked,
   §51) but kept ready for reactivation. */
.category-card:hover,.category-card:focus-visible{border-color:var(--color-teal);transform:translateY(-3px);box-shadow:0 20px 40px -30px color-mix(in srgb,var(--color-primary) 45%,transparent)}
.category-card a,.category-card .card-action{transition:color .22s ease}
.category-card:hover a,.category-card:hover .card-action,.category-card:focus-visible a,.category-card:focus-visible .card-action{color:var(--color-teal-dark)}.category-featured{grid-row:span 2;min-height:510px;background:var(--color-mint-tint)}.category-featured h3{font-size:36px}.category-featured .eyebrow{margin-bottom:10px}.category-teal{background:var(--color-teal)}.category-light{background:#f0f2f0}.category-dark{background:var(--color-primary);color:#fff}.category-line{grid-column:span 2;background:#fff;border:1px solid var(--color-line)}.card-action{display:block;margin-top:32px;font-size:11px;font-weight:700}.card-action b{margin-left:12px}.category-disc{position:absolute;top:55px;right:36px;width:150px;height:150px;border:19px solid #90b6b2;border-radius:50%;box-shadow:inset 0 0 0 13px #b9d8d3}.featured-solution{display:grid;grid-template-columns:1fr 1fr;min-height:600px;background:var(--color-mint-tint)}.featured-art{position:relative;overflow:hidden}.featured-art::before,.featured-art::after{position:absolute;content:'';border:1px solid rgba(15,47,47,.27);border-radius:50%}.featured-art::before{top:15%;left:-15%;width:540px;height:310px;transform:rotate(-25deg)}.featured-art::after{top:9%;left:3%;width:390px;height:470px;transform:rotate(39deg)}.featured-machine{position:absolute;z-index:1;top:110px;left:29%;display:flex;align-items:center;justify-content:center;flex-direction:column;width:235px;height:340px;border-radius:5px 5px 17px 17px;background:linear-gradient(130deg,#e9eeed,#98a9a8);box-shadow:var(--shadow-soft)}.featured-machine::before{position:absolute;content:'';width:190px;height:220px;border:10px solid #c4d0cd;border-radius:4px;background:radial-gradient(circle at 52% 42%,#233e42,#102e31 50%,#89a5a3 51%,#dce2e0 55%,#193c3d 61%)}.featured-machine b,.featured-machine span{position:relative;z-index:1;color:#a9e6dc;line-height:.8;text-transform:uppercase}.featured-machine b{font-size:22px;letter-spacing:3px}.featured-machine span{font-size:24px;font-weight:700;letter-spacing:2px}.featured-art>p{position:absolute;bottom:35px;left:30px;font:10px var(--font-mono);letter-spacing:1.4px}.featured-copy{align-self:center;max-width:540px;padding:90px var(--page-padding)}.featured-copy p:not(.eyebrow){margin:22px 0 30px;color:var(--color-muted)}.decision{background:#fff}.decision-grid{display:grid;grid-template-columns:1fr 1fr;gap:10vw}.decision-points{border-top:1px solid var(--color-line)}.decision-points p{display:grid;grid-template-columns:1fr 1.2fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--color-line);font-size:12px}.decision-points span{color:var(--color-muted)}.product-support{background:#fff}.product-support h2{margin-bottom:22px}.product-support>p:not(.eyebrow){max-width:440px;margin-bottom:30px;color:var(--color-muted)}.product-contact{padding:110px 20px}.breadcrumbs{padding:18px var(--page-padding);background:#fff;font:10px var(--font-mono);letter-spacing:.4px}.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:0;list-style:none}.breadcrumbs li+li::before{content:'/' ;margin-right:9px;color:#75918e}.breadcrumbs a{text-decoration:underline;text-underline-offset:3px}.category-hero-art{background:var(--color-mint-tint)}.category-hero-art>span{position:absolute;bottom:38px;left:34px;color:#527070;font:10px var(--font-mono);letter-spacing:1.6px}.category-hero-art>div{position:absolute;top:21%;left:24%;width:290px;height:290px;border:34px solid #94bbb7;border-radius:50%;box-shadow:inset 0 0 0 23px #c4dfdb}.category-intro{display:grid;grid-template-columns:.7fr 1.3fr;gap:8vw;background:#fff}.category-intro>div>p:not(.eyebrow){max-width:500px;margin-top:25px;color:var(--color-muted)}.listing{background:#fff}.product-listing{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px}.listing-card{display:flex;min-height:280px;padding:25px;flex-direction:column;background:#fff;border:1px solid transparent;transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease}.listing-card h3{margin-top:auto;font-size:25px}.listing-card p{margin:8px 0 22px;color:var(--color-muted);font-size:13px}.listing-card>span:last-child{font-size:11px;font-weight:700;transition:color .22s ease}
/* Hover/keyboard-focus parity: reference effect supplied 2026-09-12 (external site,
   inspected manually, not part of this repo). Same token reuse and literal values as
   .product-card/.category-card above. */
.listing-card:hover,.listing-card:focus-visible{border-color:var(--color-teal);transform:translateY(-3px);box-shadow:0 20px 40px -30px color-mix(in srgb,var(--color-primary) 45%,transparent)}
.listing-card a{transition:color .22s ease}
.listing-card:hover a,.listing-card:hover>span:last-child,.listing-card:focus-visible a,.listing-card:focus-visible>span:last-child{color:var(--color-teal-dark)}.listing-primary{background:var(--color-primary);color:#fff}.listing-primary p{color:#b5c7c5}.pending-card{background:#f7f8f7}.category-resources{display:grid;grid-template-columns:1fr 1fr;gap:8vw;background:#fff}.resource-links{border-top:1px solid var(--color-line)}.resource-links a{display:grid;grid-template-columns:35px 1fr 20px;gap:15px;padding:17px 0;border-bottom:1px solid var(--color-line);font-size:13px;font-weight:700}.resource-links span{font:10px var(--font-mono);color:#568d8d}.detail-hero{grid-template-columns:3fr 2fr;grid-template-rows:minmax(0,1fr);height:calc(100vh - 133px);min-height:480px;background:var(--color-mist);color:var(--color-primary)}.detail-hero>div:first-child{max-width:960px}.detail-hero .eyebrow{color:#568d8d}.detail-hero p:not(.eyebrow){color:var(--color-muted)}.detail-hero h1{font-size:var(--text-heading);letter-spacing:-3.4px}.detail-hero h1 span{font-family:var(--font-display);font-weight:400}.detail-machine{position:relative;align-self:center;justify-self:center;width:310px;height:445px;border-radius:7px 7px 20px 20px;background:linear-gradient(125deg,#eff3f2,#98aaa8);box-shadow:30px 35px 0 rgba(15,47,47,.1)}.detail-door{display:flex;position:absolute;top:72px;left:31px;align-items:center;justify-content:center;flex-direction:column;width:248px;height:270px;border:13px solid #c5d0ce;border-radius:5px;background:radial-gradient(circle at 52% 42%,#233e42,#102e31 49%,#85a5a2 51%,#d9e0df 54%,#6e8987 56%,#193c3d 59%);color:#a9e6dc;text-transform:uppercase}.detail-door b{font-size:27px;letter-spacing:4px}.detail-door span{font-size:28px;font-weight:700;letter-spacing:2px}.detail-machine i{position:absolute;top:18px;right:19px;width:7px;height:7px;border-radius:50%;background:#578c89}.detail-machine i:last-child{right:31px;background:#d2e3dc}.product-overview{display:grid;grid-template-columns:.7fr 1.3fr;gap:8vw;background:#fff}.product-overview-grid>.product-overview-copy p{max-width:610px;margin-top:22px;color:var(--color-muted)}.key-features{background:#fff}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--color-line);border-left:1px solid var(--color-line)}.feature-grid article{min-height:235px;padding:22px;border-right:1px solid var(--color-line);border-bottom:1px solid var(--color-line)}.feature-grid span{font:10px var(--font-mono);color:#568d8d}.feature-grid h3{margin:52px 0 10px;font-size:18px}.feature-grid p{font-size:12px;color:var(--color-muted)}.applications{display:grid;grid-template-columns:1fr 1fr;gap:8vw;background:#fff}.applications>p{max-width:440px;align-self:end;color:var(--color-muted)}.technical{display:grid;grid-template-columns:1fr 1fr;gap:8vw;background:var(--color-primary);color:#fff}.technical .eyebrow{color:#9ed5d3}.specification-state{align-self:end;padding:35px;background:#174344}.specification-state .number{color:#9ed5d3}.specification-state h3{margin:35px 0 12px}.specification-state p{margin-bottom:25px;color:#c8d9d7;font-size:13px}.specification-state .button{background:var(--color-teal);color:var(--color-primary)}.documentation{background:#fff}.document-list{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--color-line)}.document-list article{padding:23px;border-right:1px solid var(--color-line);border-bottom:1px solid var(--color-line)}.document-list article:first-child{border-left:1px solid var(--color-line)}.document-list span{font:10px var(--font-mono);color:#568d8d}.document-list h3{margin:35px 0 8px;font-size:18px}.document-list p{font-size:12px;color:var(--color-muted)}.document-list button{margin-top:20px;border:0;background:transparent;color:#69807f;font-size:11px;font-weight:700}.related{background:#fff}.related>p:not(.eyebrow){max-width:410px;margin-top:20px;color:var(--color-muted)}
@media (max-width:780px), (orientation:landscape) and (max-height:500px) and (max-width:1024px){.page-hero,.category-hero,.detail-hero,.featured-solution,.decision-grid,.category-intro,.category-resources,.product-overview,.applications,.technical{grid-template-columns:1fr}.page-hero>div:first-child,.category-hero>div:first-child,.detail-hero>div:first-child{padding:75px var(--page-padding)}.product-hero-art,.category-hero-art{height:280px}.category-grid,.product-listing,.feature-grid,.document-list{grid-template-columns:1fr}.category-card,.category-featured,.category-line,.ppe{grid-column:span 1;grid-row:auto;min-height:230px}.category-featured{min-height:310px}.category-disc{top:35px}.featured-art{min-height:390px}.featured-machine{top:58px;left:22%;transform:scale(.82);transform-origin:top left}.decision-points{margin-top:15px}.product-support{padding:80px var(--page-padding)}.category-intro>div>p:not(.eyebrow),.product-overview-grid>.product-overview-copy p{margin-top:20px}.product-listing{gap:12px}.listing-card{min-height:220px}.category-resources{gap:35px}.detail-hero{height:auto;min-height:0}.detail-machine{width:250px;height:360px;margin:20px 0 65px;transform:scale(.86);transform-origin:top center}.detail-door{top:58px;left:25px;width:200px;height:220px}.feature-grid article{min-height:185px}.feature-grid h3{margin-top:28px}.applications>p{align-self:start}.technical{gap:38px}.document-list article{border-left:1px solid var(--color-line)}.document-list h3{margin-top:22px}}
@media (max-width:780px), (orientation:landscape) and (max-height:500px) and (max-width:1024px){.nav,.header-contact{display:none}.menu-toggle{display:block;z-index:2;width:35px;padding:7px;border:0;background:transparent;color:var(--color-primary)}.menu-toggle span{display:block;width:100%;height:1px;margin:6px 0;background:currentColor}.nav.open{display:flex;position:absolute;top:0;right:0;left:0;flex-direction:column;gap:16px;padding:90px 6vw 30px;background:var(--color-paper);font-size:15px}.footer-top,.footer-bottom{flex-direction:column}.footer-columns{grid-template-columns:1fr 1fr;gap:28px}.footer-bottom{gap:15px;margin-top:35px}.footer-bottom div{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.page-hero,.category-hero,.detail-hero{scroll-behavior:auto}}
/* Height-based fallback, independent of the max-width:780px mobile breakpoint above: a short
   *viewport* (common on 14" laptops at 125-150% OS display scaling — physically 1920x1080 but
   an effective CSS innerHeight around 610-780px) needs the same "just flow normally" treatment
   .detail-hero already gets on mobile, even though it's nowhere near mobile-width. Measured
   against the two longest product names/descriptions live at the time of writing, the fixed
   calc(100vh - 133px) height leaves the CTA buttons below the fold (or overlapping the section
   below) anywhere from ~900px down to the ~610px laptop case — so the cutoff is set well above
   the laptop scaling range, at 900px, rather than only covering the narrowest reported cases. */
@media(max-height:900px){.detail-hero{height:auto;min-height:0}}

/* Phase 3: real product photography replaces the active Sterilization and
   EcoPlasma CSS illustrations. The general portfolio hero and product-not-found
   state intentionally retain their existing artwork until suitable photography exists. */
.category-hero-art.category-hero-photo{display:flex;align-items:center;justify-content:center;padding:40px;background:#fff}
.category-hero-photo img{width:100%;height:100%;object-fit:contain}
.category-featured>.number{z-index:1}
.category-featured>div{position:relative;z-index:1}
.category-card-photo{position:absolute;right:24px;bottom:28px;width:46%;height:70%;object-fit:contain}
.featured-art.featured-art-photo{display:flex;align-items:center;justify-content:center;background:#fff}
.featured-art.featured-art-photo::before,.featured-art.featured-art-photo::after{content:none}
.featured-art-photo img{width:100%;height:100%;padding:48px;object-fit:contain}
.card-action .icon{margin-left:12px;vertical-align:middle}
.resource-links .icon{align-self:center;justify-self:end}

/* Products overview: transparent portfolio composite on the existing hero surface. */
.product-hero-art.product-hero-photo{display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,64px);background:var(--color-teal-dark)}
.product-hero-photo img{display:block;width:100%;max-width:650px;height:100%;max-height:500px;object-fit:contain;object-position:center}
@media (max-width:780px), (orientation:landscape) and (max-height:500px) and (max-width:1024px){.product-hero-art.product-hero-photo{padding:20px 32px}.product-hero-photo img{max-height:240px}}

/* Products hero: the new clinical room photograph fills the full image column,
   including the entire hero height, rather than sitting inside a padded frame. */
.products-hero .product-hero-art.product-hero-photo{
  display:block;
  min-height:100%;
  padding:0;
  background:var(--color-teal-dark);
}
.products-hero .product-hero-photo img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
  object-position:center center;
}
@media (max-width:780px), (orientation:landscape) and (max-height:500px) and (max-width:1024px){
  .products-hero .product-hero-art.product-hero-photo{
    min-height:280px;
    height:clamp(280px,55vw,420px);
    padding:0;
  }
}

/* Keep overview typography scoped to its dedicated heading and copy wrappers. */
.product-overview-grid > .product-overview-heading .eyebrow{
color:var(--color-eyebrow)
}

.product-overview-grid > .product-overview-copy p{
color:var(--color-muted)
}

/* Products landing hero: one full-bleed clinical photo with a compact
   readable copy panel; retain independent split heroes on other pages. */
.products-hero.page-hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:clamp(520px,56vw,720px);
  overflow:hidden;
  background:#eaf1f1;
}
.products-hero .product-hero-art.product-hero-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  padding:0;
}
.products-hero .product-hero-photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
  object-position:center center;
}
.products-hero.page-hero>div:first-child{
  position:relative;
  z-index:1;
  width:min(510px,calc(100% - 2 * var(--page-padding)));
  max-width:none;
  margin:clamp(24px,5vw,64px) 0 clamp(24px,5vw,64px) var(--page-padding);
  padding:clamp(22px,3vw,38px);
  border-radius:16px;
  background:rgba(255,255,255,.76);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:0 16px 42px rgba(15,47,47,.12);
  color:var(--color-primary);
}
.products-hero.page-hero h1{
  margin:0 0 16px;
  font-size:clamp(1.75rem,2.75vw,2.65rem);
  line-height:1.13;
  letter-spacing:0;
}
.products-hero.page-hero p:not(.eyebrow){
  max-width:440px;
  margin:0;
  color:#294b4a;
  font-size:clamp(.93rem,1.1vw,1.05rem);
  line-height:1.55;
}
.products-hero.page-hero .button{margin-top:22px}
@media (max-width:780px), (orientation:landscape) and (max-height:500px) and (max-width:1024px){
  .products-hero.page-hero{
    display:flex;
    flex-direction:column;
    min-height:0;
    overflow:visible;
    background:#f1f6f5;
  }
  .products-hero .product-hero-art.product-hero-photo{
    position:relative;
    inset:auto;
    order:0;
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:1672 / 941;
  }
  .products-hero .product-hero-photo img{
    object-fit:contain;
    object-position:center;
  }
  .products-hero.page-hero>div:first-child{
    order:1;
    width:100%;
    max-width:none;
    margin:0;
    padding:clamp(24px,5vw,36px) var(--page-padding) clamp(30px,6vw,44px);
    border-radius:0;
    background:#f1f6f5;
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    text-align:center;
  }
  .products-hero.page-hero h1{
    max-width:32rem;
    margin:0 auto 14px;
    font-size:clamp(1.65rem,5.5vw,2.3rem);
    line-height:1.18;
    letter-spacing:.005em;
    font-weight:750;
  }
  .products-hero.page-hero p:not(.eyebrow){
    max-width:33rem;
    margin-inline:auto;
  }
  .products-hero.page-hero .button{
    justify-content:center;
    text-align:center;
    margin-top:20px;
  }
}

/* Desktop products hero: complete 1672:941 photo within the viewport, with
   a compact top-left text overlay. Mobile photo-first layout is unchanged.
   Sizing by both content width and available height prevents vertical cropping. */
@media (min-width:781px) and (min-height:501px), (min-width:1025px){
  .products-hero.page-hero{
    position:relative;
    display:block;
    width:min(calc(100% - 2 * var(--page-padding)),1280px,calc((100svh - 112px) * 1.7768));
    aspect-ratio:1672 / 941;
    height:auto;
    min-height:0;
    max-height:none;
    margin:clamp(12px,2vh,20px) auto;
    padding:0;
    overflow:hidden;
    background:#f1f6f5;
  }
  .products-hero .product-hero-art.product-hero-photo{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    min-height:0;
    margin:0;
    padding:0;
    overflow:hidden;
    background:transparent;
  }
  .products-hero .product-hero-photo img{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    object-fit:contain;
    object-position:center;
  }
  .products-hero.page-hero>div:first-child{
    position:absolute;
    inset:auto;
    top:clamp(16px,2.5vw,34px);
    left:clamp(16px,2.5vw,34px);
    z-index:2;
    width:min(440px,calc(100% - 2 * clamp(16px,2.5vw,34px)));
    max-width:none;
    margin:0;
    padding:clamp(12px,1.4vw,17px);
    border-radius:14px;
    background:rgba(255,255,255,.76);
    box-shadow:0 12px 38px rgba(13,48,48,.10);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    color:var(--color-primary);
    text-align:left;
  }
  .products-hero.page-hero h1{
    margin:0 0 8px;
    font-size:clamp(2rem,3vw,3rem);
    line-height:1.1;
    letter-spacing:-.035em;
    font-weight:750;
    color:#103d37;
  }
  .products-hero.page-hero p:not(.eyebrow){
    max-width:none;
    margin:0;
    font-size:clamp(.82rem,1vw,.95rem);
    font-weight:400;
    line-height:1.5;
  }
  .products-hero.page-hero .button{
    justify-content:center;
    margin-top:15px;
    text-align:center;
    gap:12px;
  }
}
