/* Montserrat (SIL Open Font License), self-hosted */
@font-face{
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/montserrat-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/montserrat-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/montserrat-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/montserrat-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── RESET & BASE ─────────────────────── */
*, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; }
body{
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: #1f222c;
  background:
    radial-gradient(ellipse 1100px 950px at 16% 100%, rgba(182,220,255,.35), transparent 60%),
    radial-gradient(ellipse 1100px 950px at 86% 100%, rgba(209,251,238,.45), transparent 62%),
    #f8fbff;
  letter-spacing: 0;
}
img, video{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; }
h1, h2, h3, h4, h5, p{ margin-top: 0; }

/* ── VARIABLES ────────────────────────── */
:root{
  --blue:     #001689;
  --ink:      #1f222c;
  --muted:    #4d5260;
  --green:    #58b986;
  --orange:   #EA6718;
  --teal:     #005446;
  --cyan:     #0073BF;
  --gray-line:#e2e4ee;
  --bg:       #f8fbff;
}

/* ── LAYOUT ───────────────────────────── */
.wrap{ max-width: 1240px; margin: 0 auto; padding: 0 48px; }

/* ── TOP BAR ──────────────────────────── */
.topbar{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  padding: 14px 58px 0;
  display: flex;
  justify-content: flex-end;
  gap: 46px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  transition: opacity .25s ease, transform .25s ease;
}
.topbar a{ color: inherit; opacity: 1; transition: opacity .2s; }
.topbar a:hover{ opacity: .75; }
.topbar-sep{ display: none; }

/* ── PAGE TRANSITION ──────────────────── */
/* body::before avoids a flash of unstyled content before script.js runs. */
body::before{
  content: '';
  position: fixed;
  inset: 0;
  z-index: 15;
  background: #fff;
  opacity: 1;
  pointer-events: none;
  transition: opacity .15s ease;
}
body.page-visible::before{ opacity: 0; }

/* ── HERO BRAND MARK (replaces plain eyebrow text with the real logo) ── */
.hero-brand-mark{ display: inline-block; height: 40px; width: auto; margin-bottom: 16px; }
.hero-brand-mark-row{ display: inline-flex; align-items: center; gap: 20px; margin-bottom: 16px; }
.hero-brand-mark-row img{ display: block; height: 40px; width: auto; }
.hero-brand-mark-row .sep{ color: rgba(255,255,255,.4); font-size: .8rem; }

/* ── COOKIE CONSENT BANNER ────────────── */
.cookie-banner{
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 12px);
  width: min(920px, calc(100% - 32px));
  z-index: 500;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 16px 44px rgba(0,22,137,.18), 0 2px 10px rgba(0,0,0,.08);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.cookie-banner.is-visible{ opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.cookie-banner-text{ flex: 1; min-width: 240px; font-size: .8rem; line-height: 1.6; color: #343945; }
.cookie-banner-text a{ color: var(--blue); text-decoration: underline; }
.cookie-banner-actions{ display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-banner-actions .btn-ghost,
.cookie-banner-actions .btn-solid{
  height: 40px;
  padding: 0 18px;
  font-size: .74rem;
  white-space: nowrap;
}

@media (max-width: 640px){
  .cookie-banner{ padding: 18px 20px; }
  .cookie-banner-actions{ width: 100%; }
  .cookie-banner-actions button{ flex: 1; }
}

/* Shared ghost / solid buttons, used by the cookie banner and cookies.html */
.btn-ghost{
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 26px;
  border-radius: 24px;
  border: 1.5px solid rgba(0,22,137,.25);
  background: transparent;
  color: var(--blue);
  font-family: inherit;
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  cursor: pointer;
  transition: background .2s;
}
.btn-ghost:hover{ background: rgba(0,22,137,.06); }
.btn-solid{
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 30px;
  border-radius: 24px;
  border: 0;
  background: var(--blue);
  color: #fff;
  font-family: inherit;
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,22,137,.25);
  transition: transform .15s, box-shadow .2s;
}
.btn-solid:hover{ box-shadow: 0 12px 28px rgba(0,22,137,.32); }

/* ── NAVBAR ───────────────────────────── */
.site-header{
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  width: calc(min(1570px, calc(100% - 144px)) * 0.8);
  margin: 14px auto 0;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  transform: translateY(0);
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
/* Must stay a direct <body> child, not inside .site-header (its transform
   would make position:fixed relative to the header, not the viewport). */
.top-shade{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 170px;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 15;
  opacity: 1;
  transition: opacity .25s ease;
}
.top-shade.is-hidden{ opacity: 0; }

/* stage 1: topbar fades out, header slides up. Use transform, not
   margin-top, to avoid layout-thrashing stutter. */
.site-header.nav-compact{
  transform: translateY(-30px);
}
.site-header.nav-compact .topbar{
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.header-nav{
  min-height: 66px;
  border: 1px solid rgba(255,255,255,.54);
  border-radius: 44px;
  background: rgba(18, 70, 82, .26);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  display: grid;
  grid-template-columns: 204px 1fr;
  align-items: center;
  padding: 0 43px 0 62px;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease,
    min-height .3s ease, padding .3s ease;
}

/* stage 2: nav flips to the white/blue variant and shrinks ~25%. */
.site-header.nav-light .header-nav{
  min-height: 50px;
  padding: 0 32px 0 46px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(0,22,137,.12);
  box-shadow: 0 10px 34px rgba(0,22,137,.1);
}
.site-header.nav-light .nav-logo img{ width: 96px; }
.site-header.nav-light .main-menu{ font-size: 9px; gap: 16px; }
.site-header.nav-light .nav-contact{ min-width: 80px; padding: 7px 16px; font-size: 9px; }
.site-header.nav-light .main-menu a{
  color: var(--blue);
}
.site-header.nav-light .nav-contact{
  color: var(--blue);
  border-color: rgba(0,22,137,.35);
}
.site-header.nav-light .nav-contact:hover{ background: rgba(0,22,137,.08); }
.site-header.nav-light .menu-toggle span{ background: var(--blue); }
/* Topbar row: white text is fine over a dark hero, invisible on light nav. */
.site-header.nav-light .topbar{ color: var(--blue); text-shadow: none; }
.site-header.nav-light .main-menu a.active,
.site-header.nav-light .nav-item > a.active{
  opacity: 1;
}

.nav-logo img{ width: 128px; transition: width .3s ease; }

.main-menu{
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr)) auto auto;
  align-items: center;
  justify-items: center;
  gap: 22px;
  font-size: 10px;
  transition: font-size .3s ease, gap .3s ease;
}

.nav-item-search{ position: relative; display: flex; align-items: center; }
.nav-search-toggle{
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: color .3s ease, opacity .2s ease;
}
.nav-search-toggle:hover{ opacity: .7; }
.nav-search-toggle svg{ width: 16px; height: 16px; }
.site-header.nav-light .nav-search-toggle{ color: var(--blue); }

.nav-search-form{
  position: absolute; top: calc(100% + 14px); right: 0; z-index: 40;
  display: flex; align-items: center;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0,22,137,.18);
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-width .3s ease, opacity .2s ease;
}
.nav-search-form.is-open{ max-width: 280px; opacity: 1; pointer-events: auto; }
.nav-search-input{
  border: 0; outline: none; width: 280px;
  padding: 12px 18px; font-size: .85rem; color: var(--ink);
  font-family: inherit;
}
mark.search-hit{ background: rgba(0,22,137,.18); color: var(--ink); border-radius: 2px; }

.main-menu a{ opacity: .7; transition: opacity .2s, color .3s ease; }
.main-menu a:hover{ opacity: 1; }
.main-menu a.nav-contact{ opacity: 1; }

.nav-contact{
  min-width: 106px;
  padding: 10px 21px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 22px;
  text-align: center;
  white-space: nowrap;
  font-size: 10px;
  font-weight:700;
  opacity: 1;
  transition: color .3s ease, border-color .3s ease, background .2s ease,
    min-width .3s ease, padding .3s ease, font-size .3s ease;
}
.nav-contact:hover{ background: rgba(255,255,255,.12); }

.menu-toggle{ display: none; background: transparent; border: 0; cursor: pointer; }

/* Active nav link */
.main-menu a.active{ opacity: 1; }
.nav-item > a.active{ opacity: 1; }

/* ── NAV DROPDOWN ─────────────────────── */
.nav-item{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-item > a{
  transition: opacity .2s;
}
.nav-item > a:hover{ opacity: 1; }

.nav-dropdown{
  position: absolute;
  top: calc(100% + 22px);
  left: 50%;
  transform: translateX(-50%);
  width: 560px;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,22,137,.14), 0 2px 8px rgba(0,22,137,.06);
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
  transform: translateX(-50%) translateY(-6px);
  z-index: 200;
  pointer-events: none;
}
/* invisible bridge to keep hover active across the nav/dropdown gap */
.nav-dropdown::before{
  content: '';
  position: absolute;
  top: -22px;
  left: 0;
  right: 0;
  height: 22px;
}
.nav-item:hover .nav-dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.nav-drop-item{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  color: var(--ink);
  transition: background .15s, box-shadow .15s;
}
.nav-drop-item:hover{
  background: #fff;
  box-shadow: 0 4px 18px rgba(0,22,137,.09);
}
.nav-icon{
  width: 26px;
  flex-shrink: 0;
  margin-top: 1px;
  opacity: .55;
  transition: opacity .15s;
}
.nav-drop-item:hover .nav-icon{ opacity: 1; }
.nav-drop-item h4{
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--blue);
  letter-spacing: .07em;
  line-height: 1.2;
}
.nav-drop-item p{
  margin: 0;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.45;
  font-weight: 500;
  text-transform: none;
}

/* ── HERO ─────────────────────────────── */
.hero{
  position: relative;
  min-height: 680px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #fff;
  text-align: center;
  isolation: isolate;
}
.hero video,
.hero-bg video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero-bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  z-index: -2;
}
.hero-shade{
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,42,42,.38) 0%, rgba(0,48,55,.07) 52%, rgba(0,69,87,.04) 100%),
    radial-gradient(circle at 50% 46%, rgba(0,0,0,.18), transparent 34%);
}
.hero-bg::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,16,106,.45) 0%,
    rgba(0,10,60,.55) 50%,
    rgba(0,6,40,.75) 100%);
}
.hero-inner{
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 32px 19px;
  max-width: 820px;
  margin-top: 136px;
  transform: translateY(32px);
}
.hero-inner h1{
  font-size: clamp(1.6rem, 3.32vw, 3.92rem);
  font-weight: 700;
  line-height: 1.04;
  margin-bottom: 10px;
}
.hero-inner p{
  font-size: clamp(0.9rem, 1.24vw, 1.5rem);
  opacity: .9;
  margin: 0 auto 192px;
  line-height: 1.17;
}
.hero-arrow{
  display: block;
  width: 32px;
  margin: 18px auto 0;
}
.hero-arrow img{ width: 100%; }
.hero-arrow-char{
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: rgba(255,255,255,.65);
  font-size: 2rem;
  animation: bounce 2s infinite;
}
@keyframes bounce{
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(9px); }
}

/* curved bottom on hero */
.bottom-curve{
  position: absolute;
  left: -8%; right: -8%;
  bottom: -92px;
  height: 210px;
  background: #fff;
  border-radius: 50% 50% 0 0 / 48% 48% 0 0;
  pointer-events: none;
}

/* secondary-page heroes: fixed height, not vh-driven (was inflating to 860px+). */
.page-hero{ min-height: 500px; padding-top: 170px; padding-bottom: 80px; align-items: start; justify-content: center; text-align: center; }
.page-hero .hero-inner{ max-width: 860px; padding: 0; margin-top: 0; transform: none; }
.page-hero .hero-inner p{ margin: 0 auto; font-size: clamp(0.9rem, 1.24vw, 1.5rem); }
.page-hero .hero-shade{ background: linear-gradient(180deg, rgba(0,16,106,.45) 0%, rgba(0,10,60,.55) 50%, rgba(0,6,40,.75) 100%); }

/* ── PILL BUTTONS ─────────────────────── */
.small-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: 142px;
  height: 36px;
  padding: 0 22px;
  border: 1px solid rgba(0,22,137,.12);
  border-radius: 22px;
  background: #fff;
  color: var(--blue);
  box-shadow: 0 5px 18px rgba(0,22,137,.07);
  text-transform: uppercase;
  font-size: 10px;
  line-height: 1;
  font-weight:700;
  cursor: pointer;
  transition: box-shadow .2s, transform .15s;
}
.small-pill:hover{ box-shadow: 0 8px 24px rgba(0,22,137,.14); }
.small-pill img{ flex: 0 0 auto; width: 9px; height: auto; display: block; }
.small-pill.white{ color: var(--blue); }

/* ── SECTIONS ─────────────────────────── */
.section{
  position: relative;
  padding: 35px 19px 69px;
  text-align: center;
}
.section-head{
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  margin: 0 auto;
}
.eyebrow{
  margin-bottom: 14px;
  color: #888888;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 15px;
  font-weight: 600;
  letter-spacing: .12em;
}
h2{
  margin-bottom: 18px;
  color: var(--blue);
  font-size: clamp(1.68rem, 2.76vw, 3.1rem);
  line-height: 1.07;
  font-weight: 700;
}
.section-head p:not(.eyebrow){
  color: #343945;
  font-size: 12px;
  line-height: 1.38;
  max-width: 1144px;
  margin: 0 auto;
}

/* about.html section labels */
.label-about{
  display: block;
  margin-bottom: 12px;
  color: #888888;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 15px;
  font-weight: 600;
  letter-spacing: .12em;
}

/* products.html section labels */
.label-products{
  display: block;
  margin-bottom: 12px;
  color: #888888;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 15px;
  font-weight: 600;
  letter-spacing: .12em;
}

.soft-disc{
  position: absolute;
  top: -210px;
  left: 50%;
  width: 1760px;
  height: 400px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(189,238,255,.5) 0%, rgba(239,250,255,.78) 52%, rgba(248,251,255,0) 73%);
  border-radius: 50%;
}
.products-sec .soft-disc{ display: none; }
.products-sec .product-list{ position: relative; z-index: 1; }

/* ── ABOUT STRIP (legacy) ─────────────── */
.about-strip{
  padding: 38px 0;
  background: #fff;
  text-align: center;
}
.about-strip h2{
  font-size: clamp(1.44rem, 2.4vw, 2.4rem);
  margin-bottom: 16px;
}
.about-strip p{
  max-width: 1144px;
  margin: 0 auto;
  color: #343945;
  font-size: 14px;
  line-height: 1.7;
}

/* ── PRODUCTS SECTION ─────────────────── */
.products-sec{
  padding-top: 46px;
  padding-bottom: 64px;
  background: #fff;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.blue-band{
  position: absolute;
  left: -8%; right: -8%;
  top: 0;
  height: 272px;
  background: url('../assets/img/bg-blue-band.jpg') center / cover no-repeat;
  pointer-events: none;
}
.products-head{ width: min(1550px, 100%); margin-bottom: 70px; }

.product-list{
  width: min(1320px, 100%);
  margin: 0 auto;
  text-align: left;
}
.product-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 74px;
  margin-bottom: 70px;
}
.product-row.flip .product-text{ order: 2; }
.product-row.flip .product-img{ order: 1; }

.product-text{ max-width: 560px; }
.product-text .brand-logo{
  max-height: 45px;
  width: auto;
  margin-bottom: 20px;
}
.product-text h2,
.product-text h3{
  margin-bottom: 12px;
  font-size: clamp(1.4rem, 1.88vw, 2.2rem);
  line-height: 1.05;
  font-weight: 700;
  color: var(--ink);
}
.product-text h2.green, .product-text h3.green{ color: var(--green); }
.product-text h2.orange, .product-text h3.orange{ color: var(--orange); }
.product-text h2.blue, .product-text h3.blue{ color: var(--cyan); }
.product-text h2.teal, .product-text h3.teal{ color: var(--teal); }

.product-text p{
  margin-bottom: 20px;
  color: #3e4350;
  font-size: 12px;
  line-height: 1.45;
}
.product-img img,
.product-image{
  width: 100%;
  height: 261px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,22,137,.08);
}

/* prod-brand (legacy index) */
.prod-brand{ margin-bottom: 8px; }
.prod-brand-name{
  font-size: .72rem;
  font-weight:700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* ── SUSTAINABILITY ────────────────────── */
.sustain-sec{
  padding-top: 30px;
  padding-bottom: 58px;
  background:
    radial-gradient(circle at 14% 46%, rgba(170,216,255,.42), transparent 26%),
    radial-gradient(circle at 86% 20%, rgba(211,251,237,.58), transparent 30%),
    #f7fbff;
  text-align: center;
}
.strong-line{
  margin-top: 29px;
  font-size: 17px !important;
  font-weight: 700;
  color: #343945;
}
.sustain-grid{
  max-width: 1320px;
  width: 100%;
  margin: 50px auto 35px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  text-align: left;
}
.sustain-card{
  overflow: hidden;
  min-height: 252px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,22,137,.08);
}
.sustain-text{
  position: relative;
  min-height: 90px;
  padding: 19px 42px 14px 19px;
}
.sustain-text span{
  position: absolute;
  top: 25px;
  right: 24px;
  color: var(--blue);
  font-size: 28px;
  line-height: .6;
  font-weight: 400;
}
.sustain-card h3{
  margin-bottom: 8px;
  color: #1f222c;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1.14;
  font-weight: 600;
}
.sustain-card p{ color: #5b6070; font-size: 11px; }
.sustain-card img{
  width: 100%;
  height: 162px;
  object-fit: cover;
}
.wide-card{ grid-column: 1 / -1; min-height: 280px; }
.wide-card .sustain-text{ min-height: 73px; text-align: center; }
.wide-card img{ height: 207px; }

.closing-copy{
  width: min(780px, 100%);
  margin: 0 auto 31px;
  color: #343945;
  font-size: 12px;
  line-height: 1.38;
}

/* ── ABOUT PAGE SPECIFIC ──────────────── */
.sec{ padding: 35px 0 70px; }
/* Blocks that separate sections use the soft blue/mint gradient (same as the Home), never a flat blue */
.sec-bluebg, .sec-light{
  background:
    radial-gradient(ellipse 70% 120% at 14% 100%, rgba(182,220,255,.5), transparent 62%),
    radial-gradient(ellipse 70% 120% at 88% 100%, rgba(209,251,238,.6), transparent 64%),
    #f8fbff;
}
.sec-white{ background: #fff; }

.sec-head{ text-align: center; margin-bottom: 42px; }
.sec-head h2{ color: var(--blue); }
.sec-head p{ max-width: 1144px; margin: 0 auto; color: #343945; font-size: 14px; line-height: 1.7; }

.stat-boxes{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.stat-box{ background: #fff; border: 1px solid var(--gray-line); border-radius: 12px; padding: 26px 19px; text-align: center; }
.stat-box-icon{ width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; margin: 0 auto 13px; }
.stat-box-icon svg{ width: 56px; height: 56px; fill: none; stroke: var(--blue); stroke-width: 1.5; }
.stat-box-icon img{ width: 70px; height: 70px; object-fit: contain; }
.stat-box h3{ font-size: 1rem; font-weight: 600; color: var(--blue); margin-bottom: 6px; }
.stat-box p{ font-size: .82rem; color: var(--muted); line-height: 1.6; }

.vision-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; max-width: 1140px; margin-left: auto; margin-right: auto; }
.vision-grid-center{ grid-column: auto; max-width: none; margin: 0; justify-self: stretch; }
.vision-item{ background: #fff; border: 1px solid var(--gray-line); border-radius: 12px; padding: 19px 16px; display: flex; align-items: center; gap: 13px; }
.vision-icon{ width: 64px; height: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.vision-icon svg{ width: 52px; height: 52px; fill: none; stroke: var(--blue); stroke-width: 1.5; }
.vision-icon img{ width: 62px; height: 62px; object-fit: contain; }
.vision-item h4{ font-size: .9rem; font-weight: 600; color: var(--blue); margin-bottom: 5px; }
.vision-item p{ font-size: .8rem; color: var(--muted); line-height: 1.55; margin: 0; }

.footprint-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 19px; margin-top: 32px; }
.footprint-card img{ width: 100%; height: 160px; object-fit: cover; border-radius: 12px; display: block; margin-bottom: 13px; }
.footprint-card h3{ font-size: 1rem; font-weight: 600; color: var(--blue); margin-bottom: 6px; }
.footprint-card p{ font-size: .82rem; color: var(--muted); line-height: 1.6; }

.values-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.value-card{ background: #fff; border: 1px solid var(--gray-line); border-radius: 12px; padding: 26px 19px; text-align: center; }
.value-card h3{ font-size: 1rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
.value-card p{ font-size: .82rem; color: var(--muted); line-height: 1.6; }

.innovation-banner{ position: relative; border-radius: 12px; overflow: hidden; margin-top: 26px; }
.innovation-banner img{ width: 100%; height: 500px; object-fit: cover; }
.innovation-overlay{ position: absolute; inset: 0; background: linear-gradient(90deg,rgba(0,16,106,.85) 0%,rgba(0,16,106,.4) 60%,transparent 100%); display: flex; align-items: center; padding: 38px 45px; }
.innovation-overlay h2{ color: #fff; font-size: 1.6rem; margin-bottom: 10px; }
.innovation-overlay p{ color: rgba(255,255,255,.85); font-size: .9rem; max-width: 400px; line-height: 1.6; margin-bottom: 19px; }

/* ── MAP SECTION (legacy) ─────────────── */

.dot{ display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot-mfg{ background: #44667f; }
.dot-adc{ background: #03b9e9; }
.dot-rnd{ background: #fe2c51; }
.dot-sts{ background: #00cb9c; }
.dot-rep{ background: #ffe26c; }

/* ── MAP SECTION (interactive) ──────────── */

@media (max-width: 640px){
  
  
  
  
  
  
}

/* ── CAREERS / CTA BAND ───────────────── */
.careers-ban{
  background: linear-gradient(135deg, #001689 0%, #0023c4 100%);
  color: #fff;
  text-align: center;
  padding: 64px 24px;
}
.careers-ban h2{ color: #fff; margin-bottom: 16px; }
.careers-ban p{ max-width: 1144px; margin: 0 auto 32px; opacity: .85; font-size: 14px; line-height: 1.7; }

/* ── NEWSLETTER ───────────────────────── */
.newsletter{
  /* used as footer grid cell, no background or borders */
}
.newsletter label{
  display: block;
  margin-bottom: 30px;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink);
}
.email-row{
  width: min(365px, 100%);
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(31,34,44,.45);
  margin: 0;
}
.email-row input{
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 0 14px;
  font-family: inherit;
  font-size: 14px;
}
.email-row button{
  border: 0;
  background: transparent;
  padding: 0 0 14px 18px;
  cursor: pointer;
}
.email-row img{ width: 9px; }

/* ── NEWSLETTER BAND (About/Products pages) ── */
.newsletter .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 32px;
  padding-bottom: 32px;
}
.nl-text h3{
  font-size: 15px;
  font-weight: 700;
  max-width: 420px;
  line-height: 1.4;
  color: var(--ink);
}
.nl-form{
  display: flex;
  align-items: center;
  width: min(365px, 100%);
  border-bottom: 1px solid rgba(31,34,44,.45);
}
.nl-form input{
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 0 14px;
  font-family: inherit;
  font-size: 14px;
}
.nl-form button{
  border: 0;
  background: transparent;
  padding: 0 0 14px 18px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--blue);
}

/* ── FOOTER ───────────────────────────── */
/* Tint blobs paint once on body; footer stays transparent to avoid a seam. */
.site-footer, .footer{
  background: none;
  padding: 40px 24px 30px;
}
.sec:has(+ .site-footer),
.sustain-sec:has(+ .site-footer),
.co2-band:has(+ .site-footer),
.contact-band:has(+ .site-footer),
.apply-form-sec:has(+ .site-footer),
.positions-sec:has(+ .site-footer),
.mid-search:has(+ .site-footer){
  background: transparent;
}
.footer-grid{
  width: min(1650px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 430px 1fr;
  gap: 52px 130px;
}
.footer-brand{ grid-column: 1; grid-row: 1; }
.footer-links{
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 42px;
}
.footer-links h4{
  margin: 0 0 13px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
}
.footer-links a{
  display: block;
  margin-bottom: 7px;
  color: #4d5260;
  font-size: 11px;
}
.footer-brand img{ width: 160px; margin-bottom: 27px; }
.footer-brand p{
  color: #404552;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
}
.footer-actions{
  grid-column: 2;
  align-self: end;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 17px 25px;
}
.footer-actions a{
  color: #404552;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
}
.small-pill.tiny{
  min-width: 94px;
  height: 28px;
  padding: 0 16px;
  font-size: 8px;
}
.footer-actions button{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 28px;
  padding: 0 18px;
  border: 1px solid rgba(0,22,137,.1);
  border-radius: 17px;
  background: #fff;
  color: var(--blue);
  text-transform: uppercase;
  font-size: 8px;
  font-weight:700;
  cursor: pointer;
}
.footer-actions button img{ width: 15px; }
.footer-actions > a > img{ height: 20px; width: auto; }

/* legacy footer classes */
.ft-brand img{ width: 160px; margin-bottom: 16px; }
.ft-brand p{ color: #444446; font-size: 12px; line-height: 1.6; }
.ft-col h5{ margin-bottom: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--ink); }
.ft-col a{ display: block; margin-bottom: 8px; color: #444446; font-size: 11px; }
.footer-bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-line);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: #444446;
}
.ft-legal{ display: flex; gap: 20px; }
.ft-legal a{ color: #444446; }
.ft-social{ display: flex; gap: 16px; }
.ft-social img{ height: 20px; width: auto; }
.ft-copy{ color: #444446; }

/* ── GHOST LINKS (legacy) ─────────────── */
.ghost-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 28px;
  border: 1.5px solid var(--blue);
  border-radius: 22px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  transition: background .2s, color .2s;
}
.ghost-link:hover{ background: var(--blue); color: #fff; }
.ghost-link-white{ border-color: rgba(255,255,255,.72); color: #fff; }
.ghost-link-white:hover{ background: rgba(255,255,255,.15); }

.text-arrow{
  color: var(--blue);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.text-arrow::after{ content: ' →'; }

.tc{ text-align: center; }

/* ── CARDS GRID ───────────────────────── */
.cards-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.card{
  background: #fff;
  border: 1px solid var(--gray-line);
  border-radius: 12px;
  padding: 22px 19px;
}
.card h3{ font-size: 1rem; font-weight: 600; color: var(--blue); margin-bottom: 10px; }
.card p{ font-size: .82rem; color: var(--muted); line-height: 1.6; }

.card-brand-row{ display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.card-brand-row img{ display: block; height: 24px; width: auto; }
.card-brand-row .sep{ color: var(--muted); font-size: .78rem; }
.card-brand-suffix{ font-size: .78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }

/* ── RESPONSIVE ───────────────────────── */
@media (max-width: 1100px){
  .site-header{ width: calc(min(940px, calc(100% - 40px)) * 0.8); }
  .header-nav{ grid-template-columns: 210px 1fr; padding: 0 28px; }
  .main-menu{ gap: 14px; font-size: 11px; }
  .topbar{ padding: 18px 28px 0; gap: 28px; }
  .hero{ min-height: 608px; }
  .hero-inner p{ margin-bottom: 144px; }
  .product-row{ gap: 34px; }
  .footer-grid{ grid-template-columns: 1fr; gap: 42px; }
  .footer-brand, .footer-links{ grid-column: auto; grid-row: auto; }
  .footer-actions{ justify-self: start; grid-column: auto; }
  .footer-links{ grid-template-columns: repeat(2, 1fr); }
  .values-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px){
  .sustain-grid{ grid-template-columns: 1fr; }
  .wide-card{ grid-column: auto; }
  .site-header{ width: calc(100% - 28px); margin-top: 14px; }
  .topbar{ display: none; }
  .header-nav{
    min-height: 64px;
    grid-template-columns: auto 1fr;
    border-radius: 34px;
    padding: 0 22px;
  }
  .nav-logo img{ width: 130px; }
  .menu-toggle{
    display: grid;
    justify-self: end;
    gap: 5px;
    width: 38px;
    padding: 0;
  }
  .menu-toggle span{ height: 2px; border-radius: 2px; background: #fff; display: block; }
  .main-menu{
    position: absolute;
    top: 76px; left: 0; right: 0;
    display: none;
    grid-template-columns: 1fr;
    justify-items: stretch;
    padding: 18px 24px 22px;
    border-radius: 26px;
    background: rgba(17,71,97,.95);
    text-align: center;
    gap: 16px;
  }
  .main-menu.is-open{ display: grid; }
  .nav-item-search{ justify-content: center; }
  .nav-search-form{
    position: static; margin-top: 10px;
    max-width: none; width: 100%;
    max-height: 0; opacity: 0;
    transition: max-height .3s ease, opacity .2s ease;
  }
  .nav-search-form.is-open{ max-height: 60px; opacity: 1; }
  .nav-search-input{ width: 100%; }
  .hero{ min-height: 520px; }
  .hero-inner{ margin-top: 76px; transform: translateY(14px); }
  .hero-inner p{ margin-bottom: 120px; }
  .product-row,
  .product-row.flip{
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 50px;
  }
  /* mobile: image always above its text, in every row */
  .product-row .product-text,
  .product-row.flip .product-text{ order: 2; }
  .product-row .product-img,
  .product-row.flip .product-img{ order: 1; }
  .product-img img, .product-image{ height: 192px; }
  .ghost-link{ padding: 10px 14px; letter-spacing: .03em; justify-content: center; text-align: center; }
  .stat-boxes{ grid-template-columns: 1fr; }
  .footprint-grid{ grid-template-columns: 1fr; }
  .cards-grid{ grid-template-columns: 1fr; }
  .vision-grid{ grid-template-columns: 1fr; }
  .values-grid{ grid-template-columns: 1fr; }
  .footer-links{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px){
  h1{ font-size: 28px; }
  h2{ font-size: 24px; }
  .hero{ min-height: 472px; }
  .hero-inner p{ font-size: 14px; margin-bottom: 90px; }
  .bottom-curve{ bottom: -80px; height: 138px; }
  .sustain-card img{ height: 136px; }
  .footer-links{ grid-template-columns: 1fr; }
}

/* Home: Innovation / Sustainability / Vision blocks */
.sustain-card.block-card{ display: flex; flex-direction: column; min-height: 0; }
.sustain-card.block-card .sustain-text{ min-height: 0; padding: 22px 22px 16px; }
.sustain-card.block-card .sustain-text p{ margin-bottom: 8px; line-height: 1.5; }
.block-media{ position: relative; flex: 1 1 auto; min-height: 240px; overflow: hidden; clip-path: ellipse(150% 100% at 50% 100%); }
.block-media > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.block-media .small-pill{ position: absolute; right: 16px; bottom: 16px; }
.sustain-card.block-card .small-pill img{ width: 9px; height: auto; object-fit: initial; }

/* aligned image tops across the three blocks (text row = tallest card) */
.sustain-grid.block-grid{ grid-template-rows: auto 1fr; }
.sustain-grid.block-grid .block-card{ grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 0; }

/* ── HEADINGS: break as little as possible (desktop) ───────────
   Section titles may extend beyond the text column, up to the viewport,
   so they stay on one line whenever they fit. Font size is unchanged. */
@media (min-width: 900px){
  .sec-head h2,
  .section-head h2{
    width: max-content;
    max-width: min(1320px, calc(100vw - 48px));
    margin-left: 50%;
    transform: translateX(-50%);
    text-wrap: balance;
  }
  .page-hero .hero-inner{ max-width: min(1320px, 100%); }
  .hero:not(.page-hero) .hero-inner{ max-width: min(1100px, 100%); }
  .page-hero .hero-inner p{ max-width: 1144px; }
  .hero:not(.page-hero) .hero-inner h1{
    width: max-content;
    max-width: min(1320px, calc(100vw - 48px));
    margin-left: 50%;
    transform: translateX(-50%);
    text-wrap: balance;
  }
  .page-hero .hero-inner h1{
    width: max-content;
    max-width: min(1700px, calc(100vw - 96px));
    margin-left: 50%;
    transform: translateX(-50%);
    text-wrap: balance;
  }
}

/* ── CURVED IMAGE EDGE: cards with the image above the text ─────
   Mirror of .block-media (image below text): the bottom edge of the
   image bellies downward. Applies site-wide to image-on-top cards. */
.rd-card > img,
.mission-card > img,
.kit-card > img,
.range-card-media,
.resource-card > img,
.pillar-card > img,
.commit-card > img,
.news-slide-img{
  clip-path: ellipse(150% 100% at 50% 0%);
}

/* ── MAP: Montserrat on the legend buttons, pins and controls ──
   <button> elements do not inherit the page font by default. */

/* ── BUTTONS: semibold text everywhere ─────────────────────── */
.small-pill, .ghost-link, .pill-cta, .pill-btn, .pill-btn-solid, .doc-btn,
.job-btn, .cert-download, .lang-toggle, .contact-submit, .js-submit,
.filter-search, .filter-cat, .btn-ghost, .btn-solid, .btn-showmore,
.back-role-btn, .af-submit, .af-browse-btn, .cable-float-btn, .kit-dialog-close,
.crit-pill-trigger{
  font-weight: 600 !important;
}

/* ── MOBILE MENU: full-page white panel, whole menu with hierarchy ───── */
.mnav{ display: none; }
@media (max-width: 760px){
  .main-menu, .main-menu.is-open{ display: none !important; }
  .mnav{
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: #fff;
    color: var(--blue);
    text-transform: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s;
  }
  .mnav.is-open{ opacity: 1; visibility: visible; }
  /* logo and close button are placed over the header logo and the hamburger */
  .mnav-pill{ position: absolute; z-index: 1; display: block; border: 1.5px solid var(--blue); pointer-events: none; }
  .mnav-logo{ position: absolute; z-index: 2; display: block; line-height: 0; }
  .mnav-logo img{ display: block; height: auto; }
  .mnav-close{ position: absolute; z-index: 2; width: 38px; height: 38px; border: 0; background: transparent; cursor: pointer; }
  .mnav-close::before, .mnav-close::after{ content: ""; position: absolute; left: 7px; top: 18px; width: 24px; height: 2px; background: var(--blue); }
  .mnav-close::before{ transform: rotate(45deg); }
  .mnav-close::after{ transform: rotate(-45deg); }
  .mnav-viewport{ position: absolute; inset: 104px 0 0 0; }
  .mnav-panel{ position: absolute; inset: 0; overflow-y: auto; padding: 0 56px 16px; }
  .mnav-panel ul{ list-style: none; margin: 0; padding: 0; }
  .mnav-group + .mnav-group{ margin-top: 14px; }
  .mnav-link{
    display: block; padding: 6px 0; font-size: 1.35rem; font-weight: 600; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; color: var(--blue);
  }
  .mnav-panel .mnav-subs{ margin: 6px 0 0; padding-left: 0; }
  .mnav-sublink{ display: block; padding: 5px 0; font-size: .8rem; font-weight: 500; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); }
  .mnav-panel .mnav-extra{ display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px 18px; margin-top: 22px; }
  .mnav-extra a{ display: block; padding: 6px 0; white-space: nowrap; }
  .mnav-extra a{ font-size: .68rem; font-weight: 600; color: var(--blue); letter-spacing: .03em; text-transform: uppercase; }
  .mnav-search{ margin-top: 24px; }
  .mnav-search input{
    width: 100%; height: 46px; padding: 0 18px; border: 1.5px solid var(--blue); border-radius: 23px;
    font-family: inherit; font-size: .9rem; color: var(--blue); background: #fff; outline: none;
  }
  .mnav-search input::placeholder{ color: var(--blue); opacity: .6; }
}

/* ── Mobile: one banner title size on every page ─────────────── */
@media (max-width: 760px){
  .hero .hero-inner h1:not(.ef-hero-mark){ font-size: 1.9rem; line-height: 1.1; }
  .hero .hero-inner h1.long-title{ font-size: 1.5rem; line-height: 1.15; }
  .page-hero .hero-inner{ padding-left: 18px; padding-right: 18px; }
  .page-hero{ min-height: 300px; padding-top: 100px; padding-bottom: 56px; }
}

/* ── ONE CONTENT WIDTH ACROSS THE SITE ─────────────────────────
   Same frame as .wrap (1240px with 48px gutters): 1144px of content. */
:root{ --frame: 100%; }
@media (min-width: 761px){
  :root{ --frame: min(1144px, calc(100vw - 96px)); }
  .product-list,
.sustain-grid,
.vision-grid{ width: var(--frame); max-width: var(--frame); margin-left: auto; margin-right: auto; }
}

/* ── TYPOGRAPHY: Montserrat only (400, 500, 600, 700 + italic) ── */
button, input, select, textarea, optgroup{ font-family: inherit; }

/* ── ONE MOBILE SIDE GUTTER (24px) ── */
@media (max-width: 760px){
  .wrap{ padding-left: 24px; padding-right: 24px; }
  .wrap .wrap{ padding-left: 0; padding-right: 0; }
  .section{ padding-left: 24px; padding-right: 24px; }
  .cta-recommend .cta-email{ font-size: 1rem; overflow-wrap: anywhere; }
}

/* ── Buttons and button-like links: semibold everywhere ── */
.nav-contact,
.text-arrow,
.text-arrow.catalog,
.news-slide-link,
.news-card-link,
.small-pill,
.pill-btn,
.pill-cta,
.cable-float-btn,
.btn-outline,
.btn-solid,
.crit-pill-option.is-selected,
.filter-cat,
.filter-search{ font-weight: 600 !important; }

/* Brand marks always sit below the banner, in their original colors */
.brand-mark-below{ display: block; height: 44px; width: auto; margin: 0 auto 26px; }

/* ── Desktop/tablet banners: height follows the content ── */
@media (min-width: 761px){
  .page-hero{ min-height: 0; padding-top: 158px; padding-bottom: 92px; }
}

/* ── Banner text: identical on every page (same as the Home banner) ── */
.hero .hero-inner h1{ letter-spacing: .015em; }
@media (max-width: 480px){
  .page-hero .hero-inner p{ font-size: 14px; }
}

/* ── Banner sub-text: one smaller size on every page, Home included ── */
.hero .hero-inner p, .page-hero .hero-inner p{ font-size: clamp(0.8rem, 0.94vw, 1rem); line-height: 1.4; }

/* ── Banner curve: one arc, same depth on every page ─────────────
   A very large circle (radius 626 x viewport width) gives a sag of
   about 2% of the width, no matter how tall the banner is, and no
   sharper bend at the corners. */
.hero{
  -webkit-mask-image: radial-gradient(circle 626vw at 50% calc(100% - 626vw), #000 calc(626vw - 1px), transparent 626vw);
  mask-image: radial-gradient(circle 626vw at 50% calc(100% - 626vw), #000 calc(626vw - 1px), transparent 626vw);
}

/* ── Under the banner curve: pure white on every inner page ──
   The page-hero keeps a white box and only its picture layers are curved,
   so the wedge under the arc is #fff; the section right below is white too. */
.page-hero{ -webkit-mask-image: none; mask-image: none; background: #fff; }
.page-hero > .hero-bg, .page-hero > .hero-shade, .page-hero > video{
  -webkit-mask-image: radial-gradient(circle 626vw at 50% calc(100% - 626vw), #000 calc(626vw - 1px), transparent 626vw);
  mask-image: radial-gradient(circle 626vw at 50% calc(100% - 626vw), #000 calc(626vw - 1px), transparent 626vw);
}
.page-hero + section{ background: #fff; }

/* Home products block opens with the soft blue/mint gradient, fading to white downwards (no visible oval) */
.products-sec{
  background:
    radial-gradient(ellipse 70% 100% at 14% 0%, rgba(182,220,255,.5), transparent 62%) top / 100% 620px no-repeat,
    radial-gradient(ellipse 70% 100% at 88% 0%, rgba(209,251,238,.6), transparent 64%) top / 100% 620px no-repeat,
    #fff;
}

/* Home: the products gradient runs up behind the banner curve, so the wedge under the arc is that gradient (no white strip) */
.hero:not(.page-hero){ z-index: 1; }
.hero:not(.page-hero) + .products-sec{ margin-top: -2.2vw; padding-top: calc(46px + 2.2vw); }

/* Home "Worldwide Presence" band: translucent soft gradient, curved at the top and at the bottom */
.blue-band{
  background: linear-gradient(100deg, rgba(150,190,250,.42) 0%, rgba(205,232,250,.34) 50%, rgba(190,244,248,.4) 100%);
  -webkit-mask-image:
    radial-gradient(circle 418vw at 50% calc(100% - 418vw), #000 calc(418vw - 1px), transparent 418vw),
    radial-gradient(circle 418vw at 50% calc(3vw - 418vw), transparent calc(418vw - 1px), #000 418vw);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle 418vw at 50% calc(100% - 418vw), #000 calc(418vw - 1px), transparent 418vw),
    radial-gradient(circle 418vw at 50% calc(3vw - 418vw), transparent calc(418vw - 1px), #000 418vw);
  mask-composite: intersect;
}

/* room inside the curved band for the "About Us" label and the title */

/* When the section right under the banner is transparent (short pages, or the intro that joins the list below),
   the wedge under the curve is transparent too, so the arc meets the page background with no step. */
.page-hero:has(+ section + .site-footer),
.page-hero:has(+ .positions-intro){ background: transparent; }

/* "Need Help Choosing?" eyebrow: the site's neutral grey on every product page, not the brand color */
.accent-eyebrow.eyebrow-grey{ color: #888888; font-weight: 600; letter-spacing: .12em; }

a.cta-email{ text-decoration: none; }
a.cta-email:hover{ color: var(--blue); text-decoration: none; }

/* ── SITE SEARCH: header dropdown + results page ───────────────── */
.search-panel{
  position: absolute; top: calc(100% + 68px); right: 0; z-index: 60;
  width: min(580px, calc(100vw - 32px)); max-height: min(72vh, 640px); overflow-y: auto;
  background: #fff; color: var(--ink); border-radius: 18px; border: 1px solid rgba(0,22,137,.08);
  box-shadow: 0 18px 50px rgba(0,22,137,.22);
  padding: 6px 0 0; text-align: left; text-transform: none; letter-spacing: 0;
  font-size: 13px; font-weight: 500; line-height: 1.4;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.search-panel.is-open{ opacity: 1; visibility: visible; transform: none; }
.sr-label{ margin: 0; padding: 12px 18px 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #888; }
.sr-chips{ display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 18px 14px; }
.sr-chip{ padding: 7px 14px; border-radius: 16px; background: #eef2fb; color: var(--blue); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; opacity: 1; }
.sr-chip:hover{ background: var(--blue); color: #fff; opacity: 1; }
.search-panel a.sr-item, .sr-page-wrap a.sr-item{
  display: flex; align-items: center; gap: 14px; padding: 10px 18px; color: var(--ink);
  text-transform: none; letter-spacing: 0; opacity: 1; text-decoration: none;
}
.search-panel a.sr-item:hover, .search-panel a.sr-item.is-active, .sr-page-wrap a.sr-item:hover{ background: #eef2fb; opacity: 1; }
.sr-thumb{ flex: none; width: 40px; height: 40px; border-radius: 50%; background: #f3f6fb; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sr-thumb img{ width: 100%; height: 100%; object-fit: contain; }
.sr-icon{ flex: none; width: 40px; height: 40px; border-radius: 10px; background: #f3f6fb; color: var(--blue); display: flex; align-items: center; justify-content: center; }
.sr-body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sr-title{ font-size: 14px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.sr-sub{ font-size: 12px; font-weight: 600; color: var(--blue); }
.sr-snip{ font-size: 12.5px; font-weight: 500; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-go{ flex: none; color: #9aa3bd; display: flex; }
a.sr-item:hover .sr-go, a.sr-item.is-active .sr-go{ color: var(--blue); }
mark.sr-mark{ background: rgba(0,22,137,.14); color: inherit; font-weight: 700; border-radius: 2px; padding: 0 1px; }
.search-panel a.sr-all{
  position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 6px; padding: 14px 18px; background: #fff; border-top: 1px solid var(--gray-line);
  font-size: 13px; font-weight: 700; color: var(--blue); text-transform: none; letter-spacing: 0; opacity: 1;
}
.search-panel a.sr-all span{ font-size: 12px; font-weight: 500; color: #888; }
.search-panel a.sr-all:hover{ background: #eef2fb; }
.sr-empty{ display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 22px 20px; font-size: 13px; font-weight: 500; color: var(--muted); }
.sr-empty strong{ font-size: 14px; color: var(--ink); }
.sr-empty a{ color: var(--blue); font-weight: 700; }

.sr-page-wrap{ max-width: var(--frame, 1144px); margin: 0 auto; }
.sr-bigform{ display: flex; gap: 12px; max-width: 760px; margin: 0 auto 26px; }
.sr-bigform input{ flex: 1; height: 54px; padding: 0 24px; border: 1px solid var(--gray-line); border-radius: 27px; background: #fff; font-family: inherit; font-size: 1rem; font-weight: 500; color: var(--ink); outline: none; box-shadow: 0 4px 16px rgba(0,22,137,.06); }
.sr-bigform input:focus{ border-color: var(--blue); }
.sr-bigform button{ height: 54px; padding: 0 34px; border: 0; border-radius: 27px; background: var(--blue); color: #fff; font-family: inherit; font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.sr-tabs{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
.sr-tab{ padding: 9px 18px; border: 1px solid var(--gray-line); border-radius: 20px; background: #fff; color: var(--ink); font-family: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.sr-tab span{ margin-left: 4px; color: #888; font-weight: 500; }
.sr-tab.is-active{ background: var(--blue); border-color: var(--blue); color: #fff; }
.sr-tab.is-active span{ color: rgba(255,255,255,.75); }
#sr-meta{ text-align: center; font-size: .85rem; color: var(--muted); min-height: 1.4em; margin-bottom: 18px; }
.sr-group{ margin-bottom: 30px; }
.sr-group-title{ font-size: 1.15rem; color: var(--blue); margin: 0 0 8px; text-align: left; }
.sr-group-title span{ font-size: .8rem; font-weight: 600; color: #888; margin-left: 6px; }
.sr-group [role=listbox]{ background: #fff; border: 1px solid var(--gray-line); border-radius: 14px; overflow: hidden; }
.sr-group a.sr-item + a.sr-item{ border-top: 1px solid var(--gray-line); }
.sr-group .sr-snip{ -webkit-line-clamp: 3; font-size: 13px; }
.sr-more{ margin-top: 12px; padding: 10px 24px; border: 1px solid var(--blue); border-radius: 20px; background: #fff; color: var(--blue); font-family: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; }
.sr-more:hover{ background: var(--blue); color: #fff; }
.sr-empty-page{ align-items: center; text-align: center; padding: 40px 20px; }
@media (max-width: 640px){ .sr-bigform{ flex-direction: column; } .sr-bigform button{ width: 100%; } }

/* ── EXHIBITIONS CAROUSEL (home + Media Center) ───────────────── */
.expo-carousel{ position: relative; width: var(--frame); max-width: 100%; margin: 40px auto 0; --expo-gap: 12px; }
.expo-track{ display: flex; gap: var(--expo-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -20px; padding: 14px 20px 34px; scroll-padding: 0 20px; outline: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); }
.expo-track::-webkit-scrollbar{ display: none; }
.expo-track > *{ flex: 0 0 calc((100% - 2 * var(--expo-gap)) / 3); scroll-snap-align: start; display: flex; flex-direction: column; justify-content: flex-start; transition: opacity .25s ease; }
.expo-track > .is-past{ opacity: .25; }
.expo-track > .is-past:hover{ opacity: .7; }
.expo-controls{ display: flex; align-items: center; justify-content: center; gap: 18px; }
.expo-btn{ position: relative; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 5px 1.5px rgba(0,0,0,.15); cursor: pointer; }
.expo-btn::before{ content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-top: 1.8px solid var(--blue); border-right: 1.8px solid var(--blue); }
.expo-prev::before{ transform: translate(-30%, -50%) rotate(-135deg); }
.expo-next::before{ transform: translate(-70%, -50%) rotate(45deg); }
.expo-btn:disabled{ opacity: .35; cursor: default; }
.expo-btn:focus-visible{ outline: 2px solid rgba(0,22,137,.4); outline-offset: 2px; }
.expo-dots{ display: flex; gap: 8px; }
.expo-dots span{ width: 8px; height: 8px; border-radius: 50%; background: rgba(0,22,137,.2); transition: background .2s; }
.expo-dots span.is-active{ background: var(--blue); }
@media (max-width: 900px){
  .expo-track > *{ flex-basis: calc((100% - var(--expo-gap)) / 2); }
}
@media (max-width: 600px){
  .expo-track{ margin: 0 -12px; padding: 14px 12px 30px; scroll-padding: 0 12px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); }
  .expo-track > *{ flex-basis: 100%; }
}

@media (max-width: 760px){
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}

/* tablet portrait: keep the whole desktop nav inside the header pill */
@media (min-width: 761px) and (max-width: 969px){
  .site-header{ width: calc(100% - 28px); }
  .header-nav{ grid-template-columns: 130px 1fr; padding: 0 16px; }
  .nav-logo img{ width: 120px; }
  .main-menu{ gap: 9px; font-size: 10px; }
  .main-menu .nav-contact{ padding-left: 12px; padding-right: 12px; }
  .topbar{ padding: 16px 20px 0; gap: 20px; }
}

/* just above the 1100px breakpoint the menu is a touch wider than the pill */
@media (min-width: 1101px) and (max-width: 1139px){
  .header-nav{ grid-template-columns: 190px 1fr; }
  .main-menu{ gap: 12px; font-size: 11px; }
}

/* Home "Innovating Sustainably": the curved translucent band sits behind the title */
.sustain-sec { position: relative; overflow-x: clip; overflow-y: visible; background: #fff; }
.sustain-sec .blue-band { top: -70px; height: 320px; }
.sustain-sec > .section-head, .sustain-sec > .sustain-grid { position: relative; }