:root{
  --forest:#0b3f34;
  --forest2:#123f36;
  --mint:#cfe5db;
  --sage:#dce5df;
  --stone:#f0ede6;
  --cream:#faf8f3;
  --ink:#13211c;
  --muted:#68756f;
  --line:rgba(19,33,28,.12);

  /* Layout keyline. --gutter is the single source of truth for the distance
     between the viewport edge and every piece of page content. Nothing else
     may hardcode a horizontal gutter — override this token instead. */
  --shell:1320px;
  --gutter:22px;
}
@media(max-width:680px){
  :root{--gutter:12px}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable;overflow-y:scroll}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:"Montserrat",Arial,sans-serif;overflow-x:hidden
}
a{color:inherit;text-decoration:none}
img{width:100%;display:block}
button{font:inherit}
/* The one container every page section must use for its horizontal edges. */
.wrap{width:min(var(--shell),calc(100% - var(--gutter) * 2));margin-inline:auto}

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  background:rgba(250,248,243,.9);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line)
}
.site-header nav{height:84px;display:flex;justify-content:space-between;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.18em;font-size:12px}
.logo{
  width:44px;height:44px;border-radius:14px;background:var(--forest);color:white;
  display:grid;place-items:center;font-size:14px;font-weight:700;letter-spacing:-.06em
}
.links{display:flex;gap:30px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#4e5b56}
.cta{
  display:inline-flex;align-items:center;justify-content:center;
  /* Matches the homepage hero's "Discover Newgate" button shape exactly —
     that button has its own scoped override (.hero-reference-copy
     .btn.primary) with this same padding/font-size, different from the
     generic .btn default. Background/border stay solid forest here
     (sitting on the header's plain cream background) rather than copying
     that button's frosted-glass treatment, which is specifically for
     sitting on top of the dark hero video/photo. */
  padding:15px 22px;border-radius:12px;background:var(--forest);color:white;
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  transition:.28s ease
}
.cta:hover{transform:translateY(-3px)}

.hero{padding:145px 0 72px;position:relative;overflow:hidden}
.hero:before{
  content:"";position:absolute;width:540px;height:540px;border-radius:50%;
  background:radial-gradient(circle,var(--mint),transparent 68%);
  right:-120px;top:40px;opacity:.85
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;position:relative;z-index:2}
.kicker{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--forest)}
.hero h1{
  font-size:clamp(68px,8vw,122px);line-height:.87;letter-spacing:-.055em;
  margin:20px 0 28px;font-weight:800;text-transform:uppercase
}
.hero h1 span{color:var(--forest)}
.hero-copy{font-size:17px;line-height:1.75;color:var(--muted);max-width:620px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 18px;border-radius:12px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;transition:.28s ease
}
.btn.primary{background:var(--forest);color:white}
.btn.secondary{border:1px solid var(--forest)}
.btn:hover{transform:translateY(-3px)}

.hero-panel{
  position:relative;min-height:630px;border-radius:34px;overflow:hidden;
  background:linear-gradient(145deg,#dfe8e3,#c4d8ce);
  box-shadow:0 30px 80px rgba(14,63,52,.12)
}
.hero-panel:before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(rgba(255,255,255,.4) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.4) 1px,transparent 1px);
  background-size:58px 58px;opacity:.35
}
.hero-cards{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;padding:22px}
.hero-card{position:relative;overflow:hidden;border-radius:24px;background:#d8e1dc}
.hero-card img{height:100%;object-fit:cover;transition:.5s ease}
.hero-card:hover img{transform:scale(1.05)}
.hero-card:nth-child(1){grid-row:span 2}
.hero-tag{
  position:absolute;left:18px;bottom:16px;background:rgba(250,248,243,.86);
  backdrop-filter:blur(12px);padding:9px 11px;border-radius:10px;
  font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase
}
.hero-badge{
  position:absolute;right:24px;top:24px;z-index:4;
  background:var(--forest);color:white;padding:10px 12px;border-radius:10px;
  font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase
}

.stats{padding:28px 0 70px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:28px 18px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat strong{font-size:38px;font-weight:800;color:var(--forest)}
.stat span{display:block;margin-top:8px;font-size:10px;line-height:1.5;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}

.section{padding:110px 0}
.section-head{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px;margin-bottom:50px}
.label{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6d7772}
.section h2{
  font-size:clamp(48px,6vw,88px);line-height:.94;letter-spacing:-.05em;
  margin:0;font-weight:700
}
.section h2 span{color:var(--forest)}

.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cap{
  min-height:350px;border-radius:24px;padding:26px;position:relative;overflow:hidden;
  border:1px solid var(--line);background:white;transition:.35s ease
}
/* Every other section on the site is plain cream/white or the dark forest
   surface — never a rainbow of pastel tints. The homepage capability cards
   used to alternate white/sage/blue-gray/tan per card (.cap:nth-child(2/3/4)
   background overrides), which read as arbitrary rather than branded and was
   the one place on the site that didn't match the rest of the palette.
   Unified to the same white every other card variant already uses; the .n
   numeral below now carries the per-card rhythm instead of color-coding. */
.cap:hover{transform:translateY(-7px)}
.cap .n{display:block;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--forest);opacity:.55}
.cap h3{font-size:26px;line-height:1.05;margin:130px 0 12px}
.cap p{font-size:13px;line-height:1.7;color:#66726c}
.cap:after{
  content:"";position:absolute;width:140px;height:140px;border-radius:50%;
  border:1px solid rgba(15,67,55,.12);right:-55px;top:-55px;
  box-shadow:0 0 0 24px rgba(15,67,55,.018),0 0 0 48px rgba(15,67,55,.01)
}

.dark{background:var(--forest);color:white}
.dark .label{color:#9eb9af}
.dark h2 span{color:#cfe5db}
/* About page: compact teaser pointing through to the International page,
   replacing the old "idea to international shelf" journey grid (that full
   step-by-step breakdown now lives on international.astro itself). The
   right side of this dark section is deliberately left empty for now. */
.intl-teaser-inner{max-width:640px}
.intl-teaser-kicker{color:#9fc8b4;margin-bottom:18px;display:block}
.intl-teaser-inner h2{margin:0 0 22px;font-size:clamp(40px,5vw,64px);line-height:1.05;letter-spacing:-.03em}
.intl-teaser-inner p{margin:0;max-width:520px;color:rgba(247,245,239,.7);font-size:16px;line-height:1.7}
.intl-teaser-link{
  display:inline-flex;align-items:center;gap:14px;
  margin-top:30px;padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.25);
  color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.intl-teaser-link b{font-size:15px;transition:transform .3s ease}
.intl-teaser-link:hover b{transform:translate(4px,-4px)}

.film{padding:110px 0;background:var(--stone)}
.film-head{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:34px}
.film-head .kicker{display:block;margin-bottom:14px}
.film-head h2{font-size:clamp(50px,6vw,88px);line-height:.93;letter-spacing:-.05em;margin:0}
.film-head h2 span{color:var(--forest)}
.film-head p{max-width:430px;color:var(--muted);font-size:14px;line-height:1.7}
.film-facts{display:flex;flex-wrap:wrap;gap:10px 22px;margin:22px 0 0;padding:0;list-style:none}
.film-facts li{
  position:relative;
  padding-left:16px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--forest);
}
.film-facts li::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:6px;
  height:6px;
  transform:translateY(-50%);
  border-radius:50%;
  background:var(--forest);
}
.video{position:relative;aspect-ratio:16/9.5;border-radius:28px;overflow:hidden;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;background:#000}

/* Film section "watch" trigger — reuses the exact Maya compliance-video-badge
   button (quality.astro) so the two match pixel-for-pixel; only the wrap's
   position is re-declared here since the source rule is scoped to
   `.compliance-main > .compliance-video-badge-wrap`. */
.video > .compliance-video-badge-wrap{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
}

.team{padding:110px 0}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:52px}
.member{border-radius:24px;overflow:hidden;background:#e3e7e4;transition:.35s ease}
.member-img{aspect-ratio:.76;overflow:hidden}
.member img{height:100%;object-fit:cover;transition:.45s}
.member:hover{transform:translateY(-6px)}
.member:hover img{transform:scale(1.04)}
.member-meta{padding:16px 16px 18px;background:white}
.member-meta span{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#707a75}

.final{padding:130px 0;background:#e0e8e3}
.final-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:end}
.final h2{font-size:clamp(56px,7vw,104px);line-height:.9;letter-spacing:-.055em;margin:0}
.final h2 span{color:var(--forest)}
.final p{font-size:16px;line-height:1.75;color:#5d6963}

footer{background:#0b1d17;color:#aebcb6;padding:42px 0}
.foot{display:flex;justify-content:space-between;align-items:center}
.foot small{font-size:9px;text-transform:uppercase;letter-spacing:.1em}

.reveal{opacity:0;transform:translateY(28px);transition:.8s ease}
.reveal.on{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

@media(max-width:1050px){
  .links{display:none}
  .hero-grid,.section-head,.journey,.final-grid{grid-template-columns:1fr}
  .cap-grid,.team-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .site-header nav{height:72px} .cta{display:none}
  .hero{padding-top:115px}
  .hero h1{font-size:56px}
  .hero-panel{min-height:840px}
  .hero-cards{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr)}
  .hero-card:nth-child(1){grid-row:auto}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:0}
  .cap-grid,.journey-side,.team-grid{grid-template-columns:1fr}
  .film-head{display:block} .film-head p{margin-top:18px}
  .foot{display:block} .foot small{display:block;margin-top:15px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important} .reveal{opacity:1;transform:none}
}

/* Compact team section inspired by the reference layout */
.team-compact{padding:92px 0 86px;background:#f6f4ee}
.team-intro{max-width:680px;margin:22px 0 0;color:var(--muted);font-size:14px;line-height:1.7}
.team-tiles{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:22px 18px;
  margin-top:42px;
}
.team-tile{
  border-bottom:1px solid var(--line);
  padding-bottom:14px;
  min-width:0;
}
.team-photo{
  aspect-ratio:1.22;
  overflow:hidden;
  background:#dfe7e2;
  border-radius:2px;
}
.team-photo img{
  height:100%;
  object-fit:cover;
  object-position:center 23%;
  transition:transform .4s ease,filter .4s ease;
}
.team-tile:hover .team-photo img{transform:scale(1.035)}
.team-info{padding-top:11px}
.team-info h3{
  display:block;
  margin:0;
  font-size:13px;
  font-weight:700;
  line-height:1.25;
}
.team-info span{
  display:block;
  margin-top:4px;
  font-size:9px;
  line-height:1.4;
  font-weight:600;
  color:#6f7974;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.team-bottom{
  margin-top:34px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:.55fr .55fr .55fr 1.8fr;
}
.team-metric{
  padding:26px 22px;
  border-right:1px solid var(--line);
}
.team-metric strong{
  display:block;
  font-size:34px;
  color:var(--forest);
  line-height:1;
}
.team-metric span{
  display:block;
  margin-top:8px;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--muted);
}
.team-cta{
  padding:24px 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}
.team-cta h3{
  margin:0;
  max-width:480px;
  font-size:22px;
  line-height:1.25;
}
.team-cta .btn{margin:0;white-space:nowrap}

/* The portraits are intentionally about half the visual size of the earlier presentation. */
@media(max-width:1180px){
  .team-tiles{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:900px){
  .team-tiles{grid-template-columns:repeat(3,1fr)}
  .team-bottom{grid-template-columns:repeat(3,1fr)}
  .team-cta{grid-column:1/-1;border-top:1px solid var(--line)}
}
@media(max-width:640px){
  .team-tiles{grid-template-columns:repeat(2,1fr);gap:18px 12px}
  .team-bottom{grid-template-columns:1fr 1fr}
  .team-metric:nth-child(2){border-right:0}
  .team-metric:nth-child(3){border-top:1px solid var(--line)}
  .team-cta{grid-column:1/-1;display:block}
  .team-cta .btn{margin-top:16px}
}


/* ===== REFERENCE-MATCH HERO ===== */
.site-header{
  background:rgba(250,248,243,.90) !important;
  backdrop-filter:blur(14px) !important;
  border-bottom:0 !important;
}
.site-header nav{
  border-bottom:0 !important;
}

.hero-reference{
  position:relative !important;
  min-height:650px !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  background:#f7f5ef !important;
}
.hero-reference::before,
.hero-reference::after{
  display:none !important;
}

.hero-reference-image{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:72%;
  z-index:0;
  background-image:url("../img/hero-science-health.webp");
  background-size:cover;
  background-position:100% 52%;
  background-repeat:no-repeat;
}

.hero-reference-fade{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:79%;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      #f7f5ef 0%,
      rgba(247,245,239,.97) 10%,
      rgba(247,245,239,.85) 21%,
      rgba(247,245,239,.58) 31%,
      rgba(247,245,239,.28) 41%,
      rgba(247,245,239,.08) 52%,
      rgba(247,245,239,0) 63%);
}

.hero-reference-inner{
  position:relative;
  z-index:3;
  min-height:650px;
  display:flex;
  align-items:center;
  width:min(var(--shell),calc(100% - var(--gutter) * 2));
  margin:0 auto;
  padding-top:76px;
}

.hero-reference-copy{
  width:43%;
  max-width:560px;
  padding:38px 0 34px;
}

.hero-reference-copy .kicker{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--forest);
}
.hero-reference-copy .kicker::before{
  content:"";
  width:36px;
  height:1px;
  background:var(--forest);
  flex:0 0 36px;
}

.hero-reference-copy h1{
  margin:22px 0 25px !important;
  font-family:"Montserrat",Arial,sans-serif !important;
  font-size:clamp(58px,6.4vw,96px) !important;
  line-height:.93 !important;
  letter-spacing:-.055em !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  color:#12372d !important;
}
.hero-reference-copy h1 span{
  color:#91aa7d !important;
}

.hero-reference-copy .hero-copy{
  max-width:470px !important;
  margin:0 !important;
  color:#27342f !important;
  font-size:14px !important;
  line-height:1.7 !important;
}

.hero-reference-copy .hero-actions{
  margin-top:26px !important;
}

.hero-reference-copy .btn{
  border-radius:2px !important;
  padding:14px 20px !important;
}

.reference-stats{
  background:#f3f0e8 !important;
  padding:0 !important;
  border-top:1px solid rgba(19,33,28,.08);
  border-bottom:1px solid rgba(19,33,28,.08);
}
.reference-stats .stats-grid{
  min-height:155px;
  border:0 !important;
}
.reference-stats .stat{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:28px 30px !important;
}
.reference-stats .stat strong{
  font-size:32px !important;
}
.reference-stats .stat span{
  max-width:155px;
}

.team-compact{
  padding-top:62px !important;
}

@media(max-width:1100px){
  .hero-reference-image{
    width:78%;
    background-position:78% 52%;
  }
  .hero-reference-fade{
    width:88%;
  }
  .hero-reference-copy{
    width:48%;
  }
}

@media(max-width:800px){
  .hero-reference{
    min-height:700px !important;
  }
  .hero-reference-inner{
    min-height:700px;
    align-items:flex-end;
    padding-bottom:54px;
  }
  .hero-reference-image{
    width:100%;
    top:0;
    height:58%;
    bottom:auto;
    background-position:66% 46%;
  }
  .hero-reference-fade{
    width:100%;
    height:100%;
    background:
      linear-gradient(180deg,
        rgba(247,245,239,.05) 0%,
        rgba(247,245,239,.18) 42%,
        rgba(247,245,239,.82) 58%,
        #f7f5ef 75%);
  }
  .hero-reference-copy{
    width:100%;
    max-width:100%;
  }
}

@media(max-width:620px){
  .hero-reference-copy h1{
    font-size:49px !important;
  }
  .hero-reference-image{
    background-position:68% 44%;
  }
}


/* Full-width See Newgate in Motion section */
.film{
  width:100% !important;
  padding:110px 0 !important;
}
.film > .wrap{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}
.film-head{
  width:min(var(--shell),calc(100% - var(--gutter) * 2)) !important;
  margin-inline:auto !important;
  margin-bottom:34px !important;
}
.film .video{
  width:100% !important;
  max-width:none !important;
  border-radius:0 !important;
  aspect-ratio:16/7.2 !important;
}
@media(max-width:680px){
  .film .video{
    aspect-ratio:16/10 !important;
    border-radius:16px !important;
  }
  .film-facts{
    flex-direction:column;
    gap:8px;
    margin-top:18px;
  }
}


.nav-anchor{position:absolute;transform:translateY(-100px)}


/* ===== TEAM HOVER ANIMATION ===== */
.team-tile{
  position:relative;
  overflow:visible;
  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    filter .45s ease;
  transform-style:preserve-3d;
}

.team-tile::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:4px;
  padding:1px;
  background:linear-gradient(
    120deg,
    transparent 5%,
    rgba(11,63,52,.08) 25%,
    rgba(15,118,92,.65) 48%,
    rgba(174,231,211,.8) 55%,
    rgba(11,63,52,.1) 75%,
    transparent 95%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transform:scale(.97);
  transition:.5s ease;
  pointer-events:none;
}

.team-tile::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:-14px;
  height:22px;
  border-radius:50%;
  background:rgba(11,63,52,.18);
  filter:blur(16px);
  opacity:0;
  transform:scale(.85);
  transition:.45s ease;
  z-index:-1;
}

.team-photo{
  position:relative;
  overflow:hidden;
  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .45s ease;
}

.team-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      115deg,
      transparent 18%,
      rgba(255,255,255,.06) 34%,
      rgba(255,255,255,.38) 47%,
      rgba(255,255,255,.08) 58%,
      transparent 72%
    );
  transform:translateX(-130%);
  transition:transform .75s cubic-bezier(.2,.75,.2,1);
  pointer-events:none;
}

.team-photo::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(
    to top,
    rgba(7,49,40,.23),
    transparent 34%
  );
  opacity:0;
  transition:.4s ease;
  pointer-events:none;
}

.team-photo img{
  transition:
    transform .65s cubic-bezier(.18,.8,.2,1),
    filter .55s ease !important;
  transform-origin:center 35%;
}

.team-info{
  position:relative;
  transition:transform .4s ease;
}

.team-info h3::after{
  content:" ↗";
  display:inline-block;
  color:var(--forest);
  opacity:0;
  transform:translate(-5px,5px);
  transition:.35s ease;
}

.team-tile:hover{
  transform:translateY(-10px) rotateX(1.2deg) rotateY(-1.2deg);
  filter:drop-shadow(0 18px 18px rgba(10,63,52,.10));
}

.team-tile:hover::before{
  opacity:1;
  transform:scale(1);
}

.team-tile:hover::after{
  opacity:1;
  transform:scale(1);
}

.team-tile:hover .team-photo{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(9,61,49,.15);
}

.team-tile:hover .team-photo::after{
  transform:translateX(130%);
}

.team-tile:hover .team-photo::before{
  opacity:1;
}

.team-tile:hover .team-photo img{
  transform:scale(1.075);
  filter:saturate(1.04) contrast(1.02) !important;
}

.team-tile:hover .team-info{
  transform:translateY(2px);
}

.team-tile:hover .team-info h3::after{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion: reduce){
  .team-tile,
  .team-photo,
  .team-photo img,
  .team-photo::after,
  .team-info,
  .team-info h3::after{
    transition:none !important;
    transform:none !important;
  }
}


/* ===== GLOBAL REACH MAP ===== */
.global-reach{
  position:relative;
  padding:110px 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 28%,rgba(83,165,136,.16),transparent 25%),
    linear-gradient(145deg,#082b23 0%,#0b3f34 57%,#08281f 100%);
  color:white;
}
.global-reach::before{
  content:"";
  position:absolute;inset:0;opacity:.08;
  background-image:
    linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(to bottom,black,transparent 90%);
}
.global-head{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:70px;
  align-items:end;
  margin-bottom:48px;
}
.global-head .label{color:#9fc6b8}
.global-head h2{
  margin:13px 0 0;
  font-size:clamp(50px,6vw,86px);
  line-height:.94;
  letter-spacing:-.05em;
}
.global-head h2 span{color:#bfe5d6}
.global-head p{
  margin:0;
  max-width:520px;
  color:#abc2b9;
  font-size:14px;
  line-height:1.75;
}
.world-panel{
  position:relative;z-index:2;
  overflow:hidden;
  min-height:570px;
  border:1px solid rgba(190,229,214,.16);
  border-radius:28px;
  background:rgba(2,28,22,.43);
  backdrop-filter:blur(12px);
  box-shadow:0 30px 80px rgba(0,0,0,.15);
}
.world-map{
  position:relative;z-index:2;
  width:100%;
  height:auto;
  min-height:540px;
  display:block;
}
.land{
  fill:url(#land);
  stroke:rgba(190,229,214,.17);
  stroke-width:1.2;
}
.europe-region{
  fill:rgba(177,232,209,.13);
  stroke:rgba(190,243,220,.55);
  stroke-width:1.4;
  stroke-dasharray:5 6;
  animation:regionPulse 3.5s ease-in-out infinite;
}
.region-label{
  fill:#bfd7ce;
  text-anchor:middle;
  font-family:Montserrat,Arial,sans-serif;
  font-weight:700;
  font-size:10px;
  letter-spacing:2px;
}
.market-pin .dot{
  fill:#caff7e;
  filter:url(#softGlow);
}
.market-pin .pulse{
  fill:rgba(202,255,126,.05);
  stroke:rgba(202,255,126,.5);
  stroke-width:1;
  transform-box:fill-box;
  transform-origin:center;
  animation:mapPulse 2.4s ease-out infinite;
}
.market-pin:nth-of-type(2n) .pulse{animation-delay:.7s}
.market-pin:nth-of-type(3n) .pulse{animation-delay:1.3s}
.market-pin text{
  fill:#dcebe5;
  font-family:Montserrat,Arial,sans-serif;
  font-size:9px;
  font-weight:600;
  letter-spacing:1px;
}
.route{
  fill:none;
  stroke:rgba(189,235,217,.22);
  stroke-width:1.2;
  stroke-dasharray:4 7;
  animation:routeMove 8s linear infinite;
}
.map-glow{
  position:absolute;border-radius:50%;filter:blur(45px);pointer-events:none
}
.map-glow-a{width:300px;height:300px;background:rgba(79,195,150,.10);right:20%;top:17%}
.map-glow-b{width:220px;height:220px;background:rgba(179,255,211,.06);left:11%;top:24%}
.map-legend{
  position:absolute;left:27px;bottom:22px;z-index:4;
  display:flex;gap:24px;flex-wrap:wrap;
  font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:#a8c1b7
}
.map-legend span{display:flex;align-items:center;gap:8px}
.legend-dot{width:8px;height:8px;border-radius:50%;background:#caff7e;box-shadow:0 0 12px rgba(202,255,126,.55)}
.legend-region{width:19px;height:9px;border:1px dashed #a9d8c7;border-radius:50%}
.market-list{
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:22px;
}
.market-list span{
  border:1px solid rgba(190,229,214,.17);
  background:rgba(255,255,255,.035);
  padding:10px 14px;border-radius:999px;
  color:#bdd0c8;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  transition:.25s ease;
}
.market-list span:hover{
  color:#fff;
  border-color:rgba(202,255,126,.45);
  background:rgba(202,255,126,.06);
  transform:translateY(-2px);
}
@keyframes mapPulse{
  0%{transform:scale(.4);opacity:1}
  100%{transform:scale(1.9);opacity:0}
}
@keyframes regionPulse{
  50%{fill:rgba(177,232,209,.21);stroke:rgba(202,255,222,.8)}
}
@keyframes routeMove{to{stroke-dashoffset:-80}}
@media(max-width:900px){
  .global-head{grid-template-columns:1fr;gap:24px}
  .world-panel{min-height:440px}
  .world-map{min-height:420px}
}
@media(max-width:650px){
  .global-reach{padding:82px 0}
  .world-panel{min-height:355px;border-radius:20px}
  .world-map{min-height:335px;transform:scale(1.22);transform-origin:59% center}
  .market-pin text,.region-label{display:none}
  .map-legend{left:16px;bottom:14px;font-size:8px;gap:12px}
}


/* ===== PREMIUM GLOBAL REACH ===== */
.premium-map-section{
  position:relative;
  overflow:hidden;
  padding:118px 0;
  background:#f2f1eb;
  color:var(--ink);
}
.premium-map-section::before{
  content:"";
  position:absolute;
  width:620px;height:620px;border-radius:50%;
  right:-220px;top:-240px;
  background:radial-gradient(circle,rgba(15,83,68,.10),transparent 68%);
}
.premium-map-head{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:80px;
  align-items:end;
  margin-bottom:48px;
}
.premium-map-head h2{
  margin:14px 0 0;
  font-size:clamp(50px,6vw,86px);
  line-height:.94;
  letter-spacing:-.055em;
}
.premium-map-head h2 span{color:var(--forest)}
.premium-map-copy>p{
  margin:0;
  max-width:560px;
  color:var(--muted);
  font-size:14px;
  line-height:1.75;
}
.reach-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:28px;
  border-top:1px solid var(--line);
}
.reach-summary div{
  padding:17px 14px 0 0;
}
.reach-summary strong{
  display:block;
  color:var(--forest);
  font-size:27px;
  line-height:1;
}
.reach-summary span{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.09em;
}

.premium-map-shell{
  position:relative;z-index:2;
  overflow:hidden;
  border:1px solid rgba(15,63,52,.13);
  border-radius:30px;
  background:#0a3028;
  color:white;
}
.map-toolbar{
  min-height:72px;
  padding:0 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.map-kicker{
  display:flex;align-items:center;gap:10px;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;
  color:#d8e6e1;
}
.live-dot{
  width:7px;height:7px;border-radius:50%;
  background:#bde8a5;
  box-shadow:0 0 0 6px rgba(189,232,165,.08);
  animation:livePulse 2s ease-in-out infinite;
}
.map-key{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  color:#9fb5ad;
  font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
}
.map-key span{display:flex;align-items:center;gap:7px}
.key-solid{width:10px;height:10px;border-radius:3px;background:#c6f3a3}
.key-soft{width:17px;height:10px;border:1px solid #8bb7a7;background:rgba(139,183,167,.20);border-radius:3px}

.real-map-wrap{
  position:relative;
  min-height:600px;
  overflow:hidden;
  background:
    radial-gradient(circle at 63% 42%,rgba(56,144,113,.17),transparent 25%),
    radial-gradient(circle at 19% 37%,rgba(88,160,131,.08),transparent 19%),
    linear-gradient(145deg,#082820,#0b3a30 58%,#082a23);
}
.real-map-wrap::before{
  content:"";
  position:absolute;inset:0;
  opacity:.10;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:48px 48px;
}
.real-world-map{
  position:relative;z-index:2;
  display:block;
  width:100%;
  height:auto;
  min-height:590px;
}
.map-country{
  fill:rgba(191,216,207,.12);
  stroke:rgba(207,232,223,.16);
  stroke-width:.7;
  transition:fill .25s ease,opacity .25s ease;
}
.map-country.active-market{
  fill:#c7efa9;
  stroke:#e2ffd1;
  stroke-width:1;
}
.map-country.europe-market{
  fill:rgba(156,205,187,.38);
  stroke:rgba(197,233,220,.6);
  stroke-width:.8;
}
.map-route{
  fill:none;
  stroke:rgba(203,244,221,.34);
  stroke-width:1.25;
  stroke-dasharray:5 7;
  animation:routeDrift 8s linear infinite;
}
.map-route-dot{
  fill:#d9ffbc;
}
.map-pulse-ring{
  fill:none;
  stroke:#d8ffb7;
  stroke-width:1;
  transform-box:fill-box;
  transform-origin:center;
  animation:mapPing 2.6s ease-out infinite;
}
.map-marker{
  fill:#d8ffb7;
  stroke:#fff;
  stroke-width:.7;
}
.map-label{
  fill:#f0f7f4;
  font-family:Montserrat,Arial,sans-serif;
  font-size:9px;
  font-weight:700;
  letter-spacing:1.1px;
}
.map-status{
  position:absolute;inset:0;z-index:5;
  display:grid;place-items:center;
  color:#b8cac3;font-size:12px;
  pointer-events:none;
}
.map-status.hidden{display:none}

.region-card{
  position:absolute;z-index:5;
  min-width:150px;
  padding:12px 13px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(7,35,29,.70);
  backdrop-filter:blur(12px);
}
.region-card span{
  display:block;
  color:#8eaaa0;
  font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;
}
.region-card strong{
  display:block;margin-top:4px;color:#f1f6f4;font-size:12px;
}
.region-card-us{left:7%;top:24%}
.region-card-europe{left:47%;top:18%}
.region-card-mena{left:58%;top:48%}

.market-strip{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:20px 24px 24px;
  border-top:1px solid rgba(255,255,255,.09);
  background:#092820;
}
.market-chip{
  padding:9px 11px;
  border:1px solid rgba(204,234,222,.13);
  border-radius:999px;
  color:#b6c9c1;
  background:rgba(255,255,255,.025);
  font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  transition:.25s ease;
}
.market-chip:hover{
  color:#fff;
  border-color:rgba(199,239,169,.4);
  background:rgba(199,239,169,.07);
  transform:translateY(-2px);
}
@keyframes livePulse{
  50%{box-shadow:0 0 0 10px rgba(189,232,165,0)}
}
@keyframes mapPing{
  0%{transform:scale(.35);opacity:1}
  100%{transform:scale(2.2);opacity:0}
}
@keyframes routeDrift{to{stroke-dashoffset:-95}}
@media(max-width:950px){
  .premium-map-head{grid-template-columns:1fr;gap:24px}
  .real-map-wrap{min-height:480px}
  .real-world-map{min-height:470px}
  .region-card{display:none}
}
@media(max-width:650px){
  .premium-map-section{padding:82px 0}
  .premium-map-shell{border-radius:22px}
  .map-toolbar{align-items:flex-start;flex-direction:column;padding:18px 18px;gap:10px}
  .map-key{gap:12px}
  .real-map-wrap{min-height:390px}
  .real-world-map{min-height:380px;transform:scale(1.14);transform-origin:60% center}
  .map-label{display:none}
  .reach-summary{grid-template-columns:1fr 1fr 1fr}
  .market-strip{padding:16px}
}


/* ===== GLOBAL NETWORK — NON-MAP CONCEPT ===== */
.global-network{
  position:relative;
  padding:118px 0;
  overflow:hidden;
  /* Last stop matches --forest exactly (rather than the darker #092820 this
     used to end on) so this section's bottom edge meets the flat
     var(--forest) background of the next dark section (e.g. .intl-shelf on
     the International page) with no visible seam between them. */
  background:
    radial-gradient(circle at 50% 45%,rgba(92,177,142,.12),transparent 22%),
    linear-gradient(145deg,#0a2d25 0%,#0e4538 55%,var(--forest) 100%);
  color:white;
}
.global-network::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.08;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,black,transparent 94%);
}
.network-head{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:80px;
  align-items:end;
  margin-bottom:52px;
}
.network-head .label{color:#9bb9ae}
/* h1 on the International page (promoted from h2 — this is the page's only
   true top-level heading; see the critique that flagged the page had none). */
.network-head h1{
  font-size:clamp(52px,6vw,88px);
  line-height:.93;
  letter-spacing:-.055em;
}
.network-head h1 span{color:#b9dfd0}
.network-intro>p{
  margin:0;
  max-width:580px;
  color:#a9bdb5;
  font-size:14px;
  line-height:1.8;
}
.network-mini-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:28px;
  border-top:1px solid rgba(255,255,255,.14);
}
.network-mini-stats div{padding:18px 10px 0 0}
.network-mini-stats strong{
  display:block;
  font-size:29px;
  color:#d4f0e3;
}
.network-mini-stats span{
  display:block;
  margin-top:5px;
  color:#93aaa1;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.09em;
}

.network-stage{
  position:relative;
  z-index:3;
  min-height:690px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:30px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%,rgba(86,177,141,.13),transparent 22%),
    rgba(4,31,24,.36);
}
.network-grid-bg{
  position:absolute;inset:0;
  opacity:.13;
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:38px 38px;
}

.network-core{
  position:absolute;
  left:50%;
  top:50%;
  width:185px;
  height:185px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  z-index:4;
}
.core-content{
  width:128px;
  height:128px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 35% 25%,rgba(255,255,255,.12),transparent 32%),
    linear-gradient(145deg,#1b6b58,#0c3f34);
  border:1px solid rgba(213,241,229,.34);
  box-shadow:0 25px 60px rgba(0,0,0,.20),inset 0 0 25px rgba(255,255,255,.04);
}
.core-content span{
  color:#9fbcb1;
  font-size:8px;
  font-weight:700;
  letter-spacing:.17em;
}
.core-content strong{
  margin-top:5px;
  font-size:18px;
  letter-spacing:.09em;
}
.core-content small{
  margin-top:4px;
  font-size:8px;
  color:#9fbcb1;
  letter-spacing:.13em;
}
.core-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(189,229,213,.18);
  animation:coreSpin 13s linear infinite;
}
.core-ring::after{
  content:"";
  position:absolute;
  width:7px;height:7px;
  border-radius:50%;
  background:#c8efab;
  left:50%;top:-4px;
  box-shadow:0 0 16px rgba(200,239,171,.7);
}
.core-ring-2{
  inset:-24px;
  animation-direction:reverse;
  animation-duration:20s;
  border-style:dashed;
}
.core-pulse{
  position:absolute;
  inset:18px;
  border-radius:50%;
  border:1px solid rgba(199,235,219,.20);
  animation:corePulse 2.8s ease-out infinite;
}

.connection-line{
  position:absolute;
  z-index:2;
  height:1px;
  width:29%;
  transform-origin:center;
  background:linear-gradient(90deg,rgba(191,232,215,.05),rgba(191,232,215,.40),rgba(191,232,215,.05));
}
.connection-line::after{
  content:"";
  position:absolute;
  width:8px;height:8px;
  border-radius:50%;
  background:#c8efab;
  top:50%;left:0;
  transform:translate(-50%,-50%);
  box-shadow:0 0 14px rgba(200,239,171,.6);
  animation:lineNode 3.5s ease-in-out infinite;
}
.line-1{left:21%;top:33%;transform:rotate(18deg)}
.line-2{right:21%;top:33%;transform:rotate(-18deg)}
.line-3{left:21%;bottom:31%;transform:rotate(-18deg)}
.line-4{right:21%;bottom:31%;transform:rotate(18deg)}

.region-panel{
  position:absolute;
  z-index:4;
  width:27%;
  min-height:225px;
  padding:22px;
  border:1px solid rgba(211,239,228,.13);
  border-radius:20px;
  background:rgba(8,45,36,.70);
  backdrop-filter:blur(14px);
  transition:transform .35s ease,border-color .35s ease,background .35s ease;
}
.region-panel:hover{
  transform:translateY(-7px);
  border-color:rgba(198,239,171,.34);
  background:rgba(13,62,50,.80);
}
.region-mena{left:5%;top:7%}
.region-eu{right:5%;top:7%}
.region-na{left:5%;bottom:7%}
.region-us{right:5%;bottom:7%}
.region-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.region-index{
  color:#91aca2;
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
}
.region-status{
  display:flex;align-items:center;gap:6px;
  color:#a9c1b8;
  font-size:8px;font-weight:700;letter-spacing:.09em;
}
.region-status i{
  width:6px;height:6px;border-radius:50%;
  background:#c8efab;
  box-shadow:0 0 0 5px rgba(200,239,171,.06);
}
.region-panel h3{
  margin:33px 0 9px;
  font-size:25px;
  line-height:1.05;
}
.region-panel p{
  margin:0;
  color:#9db3aa;
  font-size:11px;
  line-height:1.65;
}
.country-chips{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:18px;
}
.country-chips span{
  padding:7px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  color:#c3d4ce;
  font-size:8px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.network-signal{
  position:absolute;
  display:flex;
  gap:4px;
  z-index:2;
}
.network-signal b{
  display:block;
  width:3px;
  border-radius:3px;
  background:#a9d5c4;
  animation:signalMove 1.25s ease-in-out infinite;
}
.network-signal b:nth-child(1){height:8px}
.network-signal b:nth-child(2){height:16px;animation-delay:.1s}
.network-signal b:nth-child(3){height:11px;animation-delay:.2s}
.network-signal b:nth-child(4){height:20px;animation-delay:.3s}
.signal-a{left:43%;top:18%}
.signal-b{right:43%;bottom:17%}

.network-footer{
  position:relative;
  z-index:3;
  margin-top:24px;
}
.network-quote{
  display:flex;
  align-items:flex-start;
  gap:14px;
  max-width:580px;
}
.quote-mark{
  color:#b9dfd0;
  font-size:42px;
  line-height:.9;
}
.network-quote p{
  margin:0;
  color:#d5e3de;
  font-size:18px;
  line-height:1.5;
}
.market-ticker{
  margin-top:28px;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.11);
  border-bottom:1px solid rgba(255,255,255,.11);
}
.market-ticker-track{
  display:flex;
  align-items:center;
  width:max-content;
  animation:networkTicker 28s linear infinite;
}
.market-ticker span{
  padding:15px 18px;
  color:#9fb7ae;
  font-size:9px;
  font-weight:700;
  letter-spacing:.10em;
}
.market-ticker i{
  color:#c8efab;
  font-style:normal;
  font-size:8px;
}

@keyframes coreSpin{to{transform:rotate(360deg)}}
@keyframes corePulse{
  0%{transform:scale(.55);opacity:.8}
  100%{transform:scale(1.45);opacity:0}
}
@keyframes lineNode{
  0%{left:0;opacity:0}
  15%{opacity:1}
  85%{opacity:1}
  100%{left:100%;opacity:0}
}
@keyframes signalMove{50%{height:5px;opacity:.25}}
@keyframes networkTicker{to{transform:translateX(-50%)}}

@media(max-width:1000px){
  .network-head{grid-template-columns:1fr;gap:26px}
  .network-stage{
    min-height:auto;
    padding:28px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  .network-core,.connection-line,.network-signal{display:none}
  .region-panel{
    position:relative;
    inset:auto !important;
    width:auto;
    min-height:215px;
  }
}
@media(max-width:650px){
  .global-network{padding:82px 0}
  .network-stage{
    grid-template-columns:1fr;
    padding:16px;
    border-radius:22px;
  }
  .region-panel{min-height:200px}
  .network-mini-stats{grid-template-columns:repeat(3,1fr)}
}


/* ===== QUALITY / CERTIFICATION SECTION ===== */
.quality-section{
  position:relative;
  min-height:780px;
  overflow:hidden;
  background:#f5f4ef;
  color:var(--ink);
}
.quality-photo{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center 43%;
  background-repeat:no-repeat;
}
.quality-photo::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:26%;
  background:linear-gradient(to bottom,transparent,#f5f4ef);
}
.quality-inner{
  position:relative;
  z-index:2;
  min-height:780px;
  padding-top:94px;
  padding-bottom:84px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.quality-copy{
  width:min(570px,48%);
}
.quality-copy h2{
  margin:14px 0 22px;
  font-size:clamp(48px,5.7vw,82px);
  line-height:.94;
  letter-spacing:-.055em;
}
.quality-copy h2 span{color:var(--forest)}
.quality-copy>p{
  max-width:510px;
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
}
.quality-pillars{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-top:38px;
  border-top:1px solid rgba(10,55,45,.16);
}
.quality-pillars>div{
  padding:19px 17px 0 0;
}
.quality-pillars b{
  display:block;
  margin-bottom:18px;
  color:var(--forest);
  font-size:9px;
  letter-spacing:.1em;
}
.quality-pillars strong{
  display:block;
  font-size:11px;
  line-height:1.3;
}
.quality-pillars span{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:9px;
  line-height:1.55;
}
.testing-card{
  width:100%;
  margin-top:75px;
  display:grid;
  grid-template-columns:.8fr 2.2fr;
  gap:36px;
  align-items:center;
  padding:25px 28px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:22px;
  background:rgba(8,52,42,.93);
  box-shadow:0 24px 65px rgba(7,45,36,.14);
  backdrop-filter:blur(12px);
  color:white;
}
.testing-card-top span{
  display:block;
  color:#9db9af;
  font-size:8px;
  font-weight:700;
  letter-spacing:.13em;
}
.testing-card-top strong{
  display:block;
  margin-top:9px;
  font-size:25px;
  line-height:1.05;
}
.testing-flow{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  gap:12px;
  align-items:center;
}
.testing-flow div{
  min-height:78px;
  padding-left:15px;
  border-left:1px solid rgba(255,255,255,.13);
}
.testing-flow i{
  display:block;
  color:#c7efaa;
  font-style:normal;
  font-size:8px;
  font-weight:700;
}
.testing-flow b{
  display:block;
  margin-top:10px;
  font-size:10px;
}
.testing-flow span{
  display:block;
  margin-top:3px;
  color:#9db4ab;
  font-size:9px;
}
.testing-flow em{
  color:#7ca596;
  font-style:normal;
}
.quality-journey{
  width:100%;
  margin-top:clamp(72px,8vw,118px);
  padding:clamp(28px,3vw,44px);
  border-radius:8px;
  background:linear-gradient(135deg,#043f34,#002c25);
  box-shadow:0 24px 70px rgba(4,20,16,.22);
  color:#fff;
}
.quality-journey-head{
  display:grid;
  grid-template-columns:minmax(220px,.7fr) minmax(280px,1fr);
  column-gap:52px;
  align-items:end;
}
.quality-journey-head span{
  grid-column:1;
  color:#8fd9bd;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.quality-journey-head h3{
  grid-column:1;
  max-width:15ch;
  margin:12px 0 0;
  color:#f3f8f5;
  font-size:clamp(27px,2.35vw,38px);
  line-height:1.02;
  letter-spacing:-.04em;
}
.quality-journey-head p{
  grid-column:2;
  grid-row:1 / span 2;
  max-width:50ch;
  margin:0;
  color:#c3d9d1;
  font-size:16px;
  line-height:1.65;
}
.quality-journey-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(26px,3vw,48px);
  margin:38px 0 0;
  padding:0;
  list-style:none;
}
.quality-journey-steps li{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:0;
}
.quality-journey-steps i{
  position:relative;
  z-index:1;
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.38);
  border-radius:50%;
  background:transparent;
  color:#f3f8f5;
  font-style:normal;
}
.quality-journey-steps i svg{
  width:18px;
  height:18px;
}
.quality-journey-steps li:last-child i{
  border-color:#15cca3;
  background:#15cca3;
  color:#04241d;
}
.quality-journey-stage{
  display:flex;
  align-items:center;
  gap:12px;
}
.quality-journey-stage span{
  display:block;
  margin:0;
  color:#9dc2b7;
  font-size:9px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.quality-journey-steps strong{
  display:block;
  margin-top:22px;
  color:#f3f8f5;
  font-size:18px;
  line-height:1.25;
  letter-spacing:-.02em;
}
.quality-journey-steps p{
  max-width:27ch;
  margin:8px 0 0;
  color:#b9d3ca;
  font-size:13px;
  line-height:1.55;
}
@media(max-width:900px){
  .quality-photo{
    background-position:64% center;
  }
  .quality-copy{
    width:65%;
  }
  .testing-card{
    grid-template-columns:1fr;
  }
  .quality-journey{
    margin-top:64px;
    padding:32px;
  }
  .quality-journey-head{
    grid-template-columns:minmax(210px,.8fr) 1.2fr;
    column-gap:36px;
  }
  .quality-journey-steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 36px;
  }
  .quality-journey-steps li{
    min-height:170px;
    padding:18px 12px 22px 0;
  }
}
@media(max-width:699px){
  .quality-section,.quality-inner{min-height:auto}
  .quality-inner{padding-top:8px;padding-bottom:60px}
  .quality-photo{
    opacity:.35;
    background-position:65% center;
  }
  .quality-copy{width:100%}
  .quality-copy h2{margin-top:0}
  .quality-pillars{grid-template-columns:1fr}
  .quality-pillars>div{padding-bottom:14px}
  .testing-flow{
    grid-template-columns:1fr 1fr;
  }
  .testing-flow em{display:none}
  .quality-journey{
    margin-top:34px;
    padding:26px 22px;
    border-radius:6px;
    box-shadow:0 18px 46px rgba(11,63,52,.08);
  }
  .quality-journey-head{
    grid-template-columns:1fr;
    gap:0;
  }
  .quality-journey-head h3{
    grid-column:1;
    font-size:28px;
  }
  .quality-journey-head p{
    grid-column:1;
    grid-row:auto;
    margin-top:16px;
    font-size:14px;
  }
  .quality-journey-steps{
    grid-template-columns:1fr;
    margin-top:28px;
  }
  .quality-journey-steps li{
    min-height:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:16px 0 18px;
  }
  .quality-journey-steps strong{margin-top:14px}
  .quality-journey-steps p{margin-top:7px}
}


.video-fallback{
  width:min(var(--shell),calc(100% - var(--gutter) * 2));
  margin:14px auto 0;
  display:flex;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:10px;
}
.video-fallback a{
  color:var(--forest);
  font-weight:700;
}
@media(max-width:680px){
  .video-fallback{justify-content:flex-start}
}


/* ===== CINEMATIC HERO IMAGE ANIMATION ===== */
.hero-reference-image{
  overflow:hidden;
  isolation:isolate;
}

.hero-reference-image::before{
  content:"";
  position:absolute;
  inset:-2%;
  background-image:inherit;
  background-size:cover;
  background-position:100% 52%;
  background-repeat:no-repeat;
  transform:scale(1.035) translateX(0);
  animation:heroKenBurns 15s cubic-bezier(.45,.05,.25,1) infinite alternate;
  will-change:transform;
  z-index:0;
}

.hero-reference-image{
  background-image:none !important;
}

.hero-reference-image::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      transparent 36%,
      rgba(255,255,255,.08) 44%,
      rgba(255,255,255,.28) 49%,
      rgba(255,255,255,.08) 54%,
      transparent 62%,
      transparent 100%
    );
  transform:translateX(-130%);
  animation:heroLightSweep 8.5s ease-in-out infinite;
}

.hero-reference-fade{
  z-index:2 !important;
}

.hero-reference-copy{
  z-index:4;
}

@keyframes heroKenBurns{
  0%{
    transform:scale(1.035) translate3d(0,0,0);
  }
  50%{
    transform:scale(1.075) translate3d(-1.2%, -.6%,0);
  }
  100%{
    transform:scale(1.105) translate3d(-2.1%, .4%,0);
  }
}

@keyframes heroLightSweep{
  0%,12%{
    transform:translateX(-130%);
    opacity:0;
  }
  30%{
    opacity:.85;
  }
  48%{
    transform:translateX(130%);
    opacity:.35;
  }
  100%{
    transform:translateX(130%);
    opacity:0;
  }
}

/* Gentle depth reaction on pointer movement */
.hero-reference{
  perspective:1200px;
}
.hero-reference-image{
  transition:transform .45s cubic-bezier(.2,.75,.2,1);
  will-change:transform;
}

@media(max-width:800px){
  .hero-reference-image::before{
    background-position:66% 46%;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-reference-image::before,
  .hero-reference-image::after{
    animation:none !important;
    transform:none !important;
  }
}


/* ===== FIX HERO IMAGE VISIBILITY ===== */
.hero-reference-image{
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:72% !important;
  overflow:hidden !important;
  background:none !important;
  z-index:0 !important;
}

.hero-reference-image::before{
  content:"" !important;
  position:absolute !important;
  inset:-3% !important;
  display:block !important;
  background-image:url("../img/hero-science-health.webp") !important;
  background-size:cover !important;
  background-position:100% 52% !important;
  background-repeat:no-repeat !important;
  opacity:1 !important;
  visibility:visible !important;
  z-index:0 !important;
  transform:scale(1.035);
  animation:heroKenBurnsFixed 15s cubic-bezier(.45,.05,.25,1) infinite alternate !important;
}

.hero-reference-image::after{
  z-index:1 !important;
}

.hero-reference-fade{
  z-index:2 !important;
}

.hero-reference-inner,
.hero-reference-copy{
  position:relative !important;
  z-index:4 !important;
}

@keyframes heroKenBurnsFixed{
  0%{transform:scale(1.035) translate3d(0,0,0)}
  50%{transform:scale(1.07) translate3d(-1%, -.4%,0)}
  100%{transform:scale(1.095) translate3d(-1.7%, .3%,0)}
}

@media(max-width:1100px){
  .hero-reference-image{
    width:78% !important;
  }
  .hero-reference-image::before{
    background-position:78% 52% !important;
  }
}

@media(max-width:800px){
  .hero-reference-image{
    width:100% !important;
    height:58% !important;
    bottom:auto !important;
  }
  .hero-reference-image::before{
    background-position:66% 46% !important;
  }
}


/* ===== TWO NEW IMAGE-LED BRAND SECTIONS ===== */
.ng-product-story,.ng-scale-story{
  position:relative;
  min-height:760px;
  overflow:hidden;
}
.ng-product-story{
  background:#f3f1eb;
  color:var(--ink);
}
.ng-story-image{
  position:absolute;
  inset:0;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  transform:scale(1.02);
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.ng-product-story:hover .ng-story-image{transform:scale(1.055)}
.ng-story-shade{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(245,244,239,.97) 0%,rgba(245,244,239,.93) 27%,rgba(245,244,239,.60) 48%,rgba(245,244,239,.08) 73%,rgba(245,244,239,0) 100%);
}
.ng-story-inner{
  position:relative;z-index:2;
  min-height:760px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.ng-story-copy{width:min(540px,48%)}
.ng-story-copy h2,.ng-scale-bottom h2{
  margin:14px 0 22px;
  font-size:clamp(50px,6vw,88px);
  line-height:.92;
  letter-spacing:-.058em;

  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  transform: none !important;
}
.ng-story-copy h2 span{color:var(--forest)}
.ng-story-copy p{
  max-width:480px;
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
}
.ng-story-link{
  display:inline-flex;align-items:center;gap:18px;
  margin-top:28px;padding-bottom:8px;
  border-bottom:1px solid rgba(9,61,49,.25);
  color:var(--forest);font-size:9px;font-weight:700;letter-spacing:.09em;
}
.ng-story-link b{font-size:15px;transition:transform .3s ease}
.ng-story-link:hover b{transform:translate(4px,-4px)}
.ng-story-tag{
  align-self:flex-end;
  margin-bottom:58px;
  display:flex;align-items:center;gap:10px;
  padding:12px 15px;
  border-radius:999px;
  background:rgba(255,255,255,.76);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  font-size:8px;font-weight:700;letter-spacing:.08em;line-height:1.4;
}
.ng-story-tag i{
  width:7px;height:7px;border-radius:50%;background:#3e8d70;
  box-shadow:0 0 0 5px rgba(62,141,112,.10);
}

.ng-scale-story{
  background:#071f19;
  color:white;
}
.ng-scale-image{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center 58%;
  transform:scale(1.025);
  animation:ngWarehouseDrift 16s ease-in-out infinite alternate;
}
.ng-scale-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(3,22,17,.14) 0%,rgba(3,22,17,.15) 38%,rgba(3,22,17,.92) 100%),
    linear-gradient(90deg,rgba(3,22,17,.40),transparent 48%);
}
.ng-scale-inner{
  position:relative;z-index:3;
  min-height:760px;
  padding-top:74px;padding-bottom:68px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.ng-scale-kicker{
  width:max-content;
  padding:10px 13px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(4,34,26,.30);
  backdrop-filter:blur(9px);
  color:#d8e5df;font-size:9px;font-weight:700;letter-spacing:.10em;
}
.ng-scale-bottom{
  /* .ng-scale-inner is a column flex with justify-content:space-between, but
     this is its only child — space-between degenerates to flex-start with a
     single item, so the block was sitting near the TOP of the section, over
     the brightest part of the photo instead of the dark gradient pinned to
     the bottom. margin-top:auto pushes it down to where the overlay is
     actually dark enough for the text/metrics to read clearly. */
  margin-top:auto;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:80px;
  align-items:end;
}
.ng-scale-bottom h2{margin-bottom:20px}
.ng-scale-bottom h2 span{color:#b8e0d0}
.ng-scale-bottom p{
  max-width:620px;margin:0;
  color:#cddad4;font-size:13px;line-height:1.8;
}
.ng-scale-metrics{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:28px;
  padding:20px 22px;
  border-radius:14px;
  background:rgba(3,22,17,.55);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);
}
.ng-scale-metrics div{padding:0 12px 0 0}
.ng-scale-metrics strong{display:block;font-size:28px;color:#fff}
.ng-scale-metrics span{
  display:block;margin-top:5px;
  color:#b7c9c1;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
}
.ng-scale-scan{
  position:absolute;z-index:2;top:0;bottom:0;width:15%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  transform:skewX(-10deg) translateX(-180%);
  animation:ngScan 8s ease-in-out infinite;
}
@keyframes ngWarehouseDrift{
  from{transform:scale(1.025) translate3d(0,0,0)}
  to{transform:scale(1.075) translate3d(-1.3%,-.5%,0)}
}
@keyframes ngScan{
  0%,20%{left:-25%;opacity:0}
  35%{opacity:1}
  65%{left:115%;opacity:.7}
  100%{left:115%;opacity:0}
}
@media(max-width:800px){
  .ng-story-shade{background:linear-gradient(180deg,rgba(245,244,239,.92),rgba(245,244,239,.72) 60%,rgba(245,244,239,.25))}
  .ng-story-copy{width:100%;align-self:flex-start;margin-top:90px}
  .ng-story-inner{min-height:720px}
  .ng-story-image{background-position:60% center}
  .ng-scale-bottom{grid-template-columns:1fr;gap:32px}
  .ng-scale-image{background-position:center}
}


/* ===== SECTION 06 — TEXT RIGHT / PRODUCT CLEAR ===== */
.ng-product-story .ng-story-shade{
  background:linear-gradient(
    90deg,
    rgba(245,244,239,0) 0%,
    rgba(245,244,239,.04) 38%,
    rgba(245,244,239,.45) 57%,
    rgba(245,244,239,.92) 72%,
    rgba(245,244,239,.98) 100%
  ) !important;
}

.ng-product-story .ng-story-inner{
  justify-content:flex-end !important;
}

.ng-product-story .ng-story-copy{
  width:min(540px,45%) !important;
  margin-left:auto !important;
  text-align:left;
}

.ng-product-story .ng-story-tag{
  position:absolute;
  left:42px;
  bottom:0;
}

.ng-product-story .ng-story-image{
  background-position:left center !important;
}

@media(max-width:800px){
  .ng-product-story .ng-story-shade{
    background:linear-gradient(
      180deg,
      rgba(245,244,239,.10) 0%,
      rgba(245,244,239,.30) 40%,
      rgba(245,244,239,.94) 70%,
      rgba(245,244,239,.99) 100%
    ) !important;
  }
  .ng-product-story .ng-story-inner{
    align-items:flex-end !important;
  }
  .ng-product-story .ng-story-copy{
    width:100% !important;
    margin:0 0 65px !important;
  }
  .ng-product-story .ng-story-tag{
    display:none;
  }
}


/* ===== SECTION 06 — SMALLER IMAGE SCALE ===== */
.ng-product-story .ng-story-image{
  inset:5% 42% 5% 0 !important;
  background-size:contain !important;
  background-position:left center !important;
  background-color:#f3f1eb;
  transform:none !important;
}

.ng-product-story:hover .ng-story-image{
  transform:none !important;
}

.ng-product-story .ng-story-shade{
  background:linear-gradient(
    90deg,
    rgba(245,244,239,0) 0%,
    rgba(245,244,239,.03) 39%,
    rgba(245,244,239,.32) 53%,
    rgba(245,244,239,.92) 69%,
    rgba(245,244,239,.99) 100%
  ) !important;
}

@media(max-width:800px){
  .ng-product-story .ng-story-image{
    inset:0 0 42% 0 !important;
    background-position:center top !important;
    background-size:contain !important;
  }
}


/* ===== SECTION 06 — FULL-BLEED IMAGE, BLENDED BEHIND TEXT ===== */
.ng-product-story{
  min-height:760px !important;
  background:#f3f1eb !important;
}

.ng-product-story .ng-story-image{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background-size:contain !important;
  background-position:left center !important;
  background-repeat:no-repeat !important;
  background-color:transparent !important;
  transform:none !important;
}

.ng-product-story:hover .ng-story-image{
  transform:none !important;
}

/* Keep the product/image clear on the left, then smoothly blend into
   a light readable area behind the copy on the right. */
.ng-product-story .ng-story-shade{
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(
      90deg,
      rgba(243,241,235,.02) 0%,
      rgba(243,241,235,.03) 30%,
      rgba(243,241,235,.16) 46%,
      rgba(243,241,235,.72) 64%,
      rgba(243,241,235,.94) 79%,
      rgba(243,241,235,.98) 100%
    ),
    linear-gradient(
      180deg,
      rgba(243,241,235,.03) 0%,
      rgba(243,241,235,0) 60%,
      rgba(243,241,235,.12) 100%
    ) !important;
}

.ng-product-story .ng-story-inner{
  min-height:760px !important;
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
}

.ng-product-story .ng-story-copy{
  width:min(545px,44%) !important;
  margin-left:auto !important;
  padding:48px 0 !important;
  position:relative !important;
  z-index:3 !important;
}

.ng-product-story .ng-story-tag{
  left:42px !important;
  bottom:28px !important;
}

@media(max-width:800px){
  .ng-product-story .ng-story-image{
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    background-size:cover !important;
    background-position:42% center !important;
  }

  .ng-product-story .ng-story-shade{
    background:linear-gradient(
      180deg,
      rgba(243,241,235,.03) 0%,
      rgba(243,241,235,.10) 35%,
      rgba(243,241,235,.78) 63%,
      rgba(243,241,235,.98) 82%,
      rgba(243,241,235,1) 100%
    ) !important;
  }

  .ng-product-story .ng-story-inner{
    align-items:flex-end !important;
  }

  .ng-product-story .ng-story-copy{
    width:100% !important;
    margin:0 !important;
    padding:360px 0 58px !important;
  }
}


/* ===== SECTION 06 — SOFTER IMAGE/TEXT BLEND ===== */
.ng-product-story .ng-story-shade{
  background:
    linear-gradient(90deg,
      rgba(243,241,235,.00) 0%,
      rgba(243,241,235,.02) 32%,
      rgba(243,241,235,.10) 45%,
      rgba(243,241,235,.34) 57%,
      rgba(243,241,235,.68) 70%,
      rgba(243,241,235,.90) 84%,
      rgba(243,241,235,.97) 100%),
    radial-gradient(circle at 68% 50%, rgba(243,241,235,.72) 0%, rgba(243,241,235,.38) 30%, rgba(243,241,235,0) 58%) !important;
}
.ng-product-story .ng-story-copy{
  text-shadow:0 1px 12px rgba(243,241,235,.65);
}
@media(max-width:800px){
  .ng-product-story .ng-story-shade{
    background:linear-gradient(180deg,
      rgba(243,241,235,.00) 0%,
      rgba(243,241,235,.08) 38%,
      rgba(243,241,235,.52) 62%,
      rgba(243,241,235,.88) 78%,
      rgba(243,241,235,.98) 100%) !important;
  }
}

/* ===== TEAM PROFILE POPUP ===== */
.team-tile{
  cursor:pointer;
}
.team-tile .team-photo{
  position:relative;
}
.team-tile .team-photo::before{
  content:"VIEW PROFILE ↗";
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:5;
  padding:7px 9px;
  border-radius:999px;
  background:rgba(9,50,41,.82);
  backdrop-filter:blur(8px);
  color:white;
  font-size:7px;
  font-weight:700;
  letter-spacing:.09em;
  opacity:0;
  transform:translateY(6px);
  transition:.3s ease;
}
.team-tile:hover .team-photo::before{
  opacity:1;
  transform:none;
}

.team-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:28px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease,visibility .28s ease;
}
.team-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.team-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,26,21,.68);
  backdrop-filter:blur(14px);
}
.team-modal-dialog{
  position:relative;
  z-index:2;
  width:min(940px,94vw);
  max-height:min(720px,90vh);
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:26px;
  background:#f7f5ef;
  box-shadow:0 40px 120px rgba(0,0,0,.30);
  transform:translateY(22px) scale(.985);
  transition:transform .36s cubic-bezier(.2,.8,.2,1);
}
.team-modal.is-open .team-modal-dialog{
  transform:none;
}
.team-modal-close{
  position:absolute;
  top:15px;
  right:15px;
  z-index:8;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:rgba(247,245,239,.88);
  color:var(--forest);
  font-size:23px;
  line-height:1;
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:.25s ease;
}
.team-modal-close:hover{
  transform:rotate(8deg) scale(1.06);
  background:white;
}
.team-modal-image-wrap{
  position:relative;
  min-height:560px;
  overflow:hidden;
  background:#dce5df;
}
.team-modal-image-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 22%;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.team-modal.is-open .team-modal-image-wrap img{
  transform:scale(1.025);
}
.team-modal-image-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 54%,rgba(6,36,29,.34));
}
.team-modal-number{
  position:absolute;
  left:18px;
  bottom:16px;
  color:white;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
}
.team-modal-content{
  padding:62px 54px 42px;
  display:flex;
  flex-direction:column;
}
.team-modal-kicker{
  color:var(--forest);
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
}
.team-modal-content h3{
  margin:20px 0 4px;
  font-size:clamp(34px,4vw,54px);
  line-height:.96;
  letter-spacing:-.045em;
}
.team-modal-role{
  color:#6f8279;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.10em;
}
.team-modal-content p{
  margin:28px 0 0;
  color:#56635d;
  font-size:14px;
  line-height:1.8;
  max-width:470px;
}
.team-modal-footer{
  margin-top:auto;
  padding-top:28px;
  border-top:1px solid rgba(19,33,28,.12);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  color:#718078;
  font-size:8px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.team-modal-footer i{
  width:28px;
  height:1px;
  background:var(--forest);
}
html.modal-open,
body.modal-open{
  overflow:hidden;
  overscroll-behavior:none;
  scrollbar-gutter:auto;
  /* Belt-and-suspenders on top of overflow:hidden + scrollbar-gutter:auto:
     html's base rule (line 22) pins scrollbar-gutter:stable specifically so
     normal page navigation never jumps when a page's content does/doesn't
     need to scroll - exactly what shouldn't apply to this fixed, full-
     viewport overlay. Explicitly zeroing the scrollbar itself (not just the
     reserved gutter) covers browsers/engines where a reserved-gutter change
     doesn't repaint immediately versus overflow:hidden actually removing it. */
  scrollbar-width:none;
}
html.modal-open::-webkit-scrollbar,
body.modal-open::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

@media(max-width:760px){
  .team-modal{
    padding:14px;
  }
  .team-modal-dialog{
    grid-template-columns:1fr;
    max-height:92vh;
    overflow:auto;
  }
  .team-modal-image-wrap{
    min-height:330px;
    max-height:44vh;
  }
  .team-modal-content{
    padding:34px 26px 28px;
  }
  .team-modal-content p{
    margin-top:20px;
  }
  .team-modal-footer{
    margin-top:28px;
  }
}


/* ===== TEAM HOVER CLEANUP — REMOVE GREEN PATCH ===== */
.team-tile::before,
.team-tile::after,
.team-photo::after{
  display:none !important;
  content:none !important;
}

.team-tile:hover,
.team-tile:hover .team-photo{
  background:transparent !important;
}

.team-tile:hover .team-photo img{
  filter:none !important;
  opacity:1 !important;
}

/* Keep only the clean image movement/profile indicator */
.team-tile:hover .team-photo img{
  transform:scale(1.035) !important;
}


/* ===== FINAL TEAM IMAGE FIX ===== */

/* Make the team images larger on desktop */
.team-tiles{
  grid-template-columns:repeat(4,1fr) !important;
  gap:28px 22px !important;
}

/* Taller image area so the full portrait / Newgate branding is visible */
.team-photo{
  aspect-ratio:.82 !important;
  position:relative !important;
  overflow:hidden !important;
  background:#eef1ee !important;
  border-radius:6px !important;
}

/* Show more of the source image vertically */
.team-photo img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:none !important;
  filter:none !important;
  opacity:1 !important;
}

/* Remove EVERY hover overlay / pseudo element that could create a green patch */
.team-tile::before,
.team-tile::after,
.team-photo::before,
.team-photo::after,
.team-tile:hover::before,
.team-tile:hover::after,
.team-tile:hover .team-photo::before,
.team-tile:hover .team-photo::after{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
  opacity:0 !important;
}

/* Remove the old green glow/filter effects */
.team-tile,
.team-tile:hover{
  filter:none !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Clean, minimal hover only */
.team-tile{
  transition:transform .32s ease !important;
}
.team-tile:hover{
  transform:translateY(-6px) !important;
}
.team-tile:hover .team-photo{
  background:#eef1ee !important;
  box-shadow:0 14px 30px rgba(11,63,52,.10) !important;
}
.team-tile:hover .team-photo img{
  transform:scale(1.025) !important;
  filter:none !important;
}

/* Keep profile text clean */
.team-info{
  padding-top:13px !important;
  background:transparent !important;
}

/* Responsive */
@media(max-width:1180px){
  .team-tiles{
    grid-template-columns:repeat(3,1fr) !important;
  }
}
@media(max-width:820px){
  .team-tiles{
    grid-template-columns:repeat(2,1fr) !important;
  }
}
@media(max-width:520px){
  .team-tiles{
    grid-template-columns:1fr !important;
  }
  .team-photo{
    aspect-ratio:.9 !important;
  }
}


/* ===== SECTION 06 — SECOND PRODUCT: FOLIC ACID ===== */
.ng-product-story .ng-story-folic{
  display:none !important;
  position:absolute; z-index:1; left:27%; top:50%; width:31%; height:82%;
  transform:translateY(-50%); background-size:contain; background-repeat:no-repeat;
  background-position:center; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 70%,rgba(0,0,0,.55) 88%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 70%,rgba(0,0,0,.55) 88%,transparent 100%);
}
.ng-product-story .ng-story-image{width:55% !important;}
.ng-product-story .ng-story-shade{z-index:1 !important;}
.ng-product-story .ng-story-inner{z-index:3 !important;}
@media(max-width:800px){
 .ng-product-story .ng-story-image{width:62% !important; background-position:left 8% !important;}
 .ng-product-story .ng-story-folic{left:38%; top:25%; width:55%; height:47%; transform:none;}
}


/* SECTION 06 — shift text 1.5 inches to the right */
@media(min-width:801px){
  .ng-product-story .ng-story-copy{
    transform:translateX(1.5in) !important;
  }
}


/* ===== GLOBAL FOOTPRINT MAP — SECOND GLOBAL SECTION ===== */
.global-footprint{
  position:relative;
  padding:118px 0 124px;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 22%,rgba(91,171,143,.16),transparent 28%),
    radial-gradient(circle at 22% 78%,rgba(10,63,52,.08),transparent 26%),
    #f4f2ec;
  border-top:1px solid rgba(19,33,28,.08);
}
.global-footprint:before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(11,63,52,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,63,52,.035) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent);
  pointer-events:none;
}
.footprint-head{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:72px;
  align-items:end;
  margin-bottom:48px;
}
.footprint-head h2{
  margin:10px 0 0;
  font-size:clamp(50px,6vw,86px);
  line-height:.94;
  letter-spacing:-.05em;
}
.footprint-head h2 span{color:var(--forest)}
.footprint-copy{
  max-width:590px;
  justify-self:end;
}
.footprint-copy p{
  margin:0;
  color:#64716b;
  font-size:14px;
  line-height:1.8;
}
.footprint-key{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-top:20px;
}
.footprint-key span{
  display:flex;align-items:center;gap:8px;
  font-size:9px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:#65736d;
}
.footprint-key i{
  width:8px;height:8px;border-radius:50%;
  background:var(--forest);
  box-shadow:0 0 0 5px rgba(11,63,52,.09);
}

.footprint-card{
  position:relative;z-index:2;
  min-height:660px;
  border-radius:32px;
  overflow:hidden;
  background:linear-gradient(145deg,#0c3028,#10271f 72%,#081d17);
  box-shadow:0 34px 90px rgba(11,63,52,.17);
  border:1px solid rgba(255,255,255,.08);
}
.footprint-card:after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(115deg,rgba(255,255,255,.035),transparent 24%),
    radial-gradient(circle at 74% 48%,rgba(99,207,169,.09),transparent 34%);
  pointer-events:none;
}
.footprint-map{
  position:absolute;
  inset:34px 34px 108px;
}
.footprint-map svg{width:100%;height:100%;display:block}
.map-grid line{
  stroke:rgba(213,235,226,.075);
  stroke-width:1;
}
.continent{
  fill:rgba(206,230,220,.10);
  stroke:rgba(215,239,229,.15);
  stroke-width:1.3;
}
.continent-soft{fill:rgba(206,230,220,.065)}
.route{
  fill:none;
  stroke:rgba(111,218,181,.48);
  stroke-width:1.5;
  stroke-dasharray:7 8;
  animation:routeFlow 8s linear infinite;
}
.route.soft{stroke:rgba(111,218,181,.24)}
.market-dot .halo{
  fill:rgba(109,219,181,.13);
  transform-box:fill-box;
  transform-origin:center;
  animation:marketPulse 2.5s ease-out infinite;
}
.market-dot .core{fill:#a9e8cf;stroke:#eefbf6;stroke-width:1.3}
.market-dot.major .core{fill:#fff;stroke:#7ed5b6;stroke-width:2}
.market-label{
  fill:#f7fbf9;
  font-family:"Montserrat",Arial,sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.09em;
}
.market-sub{
  fill:#84a89a;
  font-family:"Montserrat",Arial,sans-serif;
  font-size:7px;
  font-weight:600;
  letter-spacing:.07em;
}
.london-ring{
  fill:none;
  stroke:#a9e8cf;
  stroke-width:1;
  opacity:.6;
  transform-box:fill-box;
  transform-origin:center;
  animation:londonRing 3s ease-out infinite;
}
.footprint-bottom{
  position:absolute;left:0;right:0;bottom:0;
  z-index:3;
  display:grid;
  grid-template-columns:1.1fr repeat(4,.45fr);
  border-top:1px solid rgba(255,255,255,.11);
  background:rgba(7,27,22,.78);
  backdrop-filter:blur(14px);
}
.footprint-bottom>div{
  min-height:88px;
  padding:19px 21px;
  border-right:1px solid rgba(255,255,255,.09);
  display:flex;flex-direction:column;justify-content:center;
}
.footprint-bottom>div:last-child{border-right:0}
.footprint-bottom .wide strong{
  color:white;font-size:15px;line-height:1.3;
}
.footprint-bottom strong{
  color:#dff5ec;
  font-size:25px;line-height:1;
}
.footprint-bottom span{
  margin-top:7px;
  color:#7fa397;
  font-size:8px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.footprint-market-list{
  position:absolute;left:34px;right:34px;bottom:115px;z-index:3;
  display:flex;gap:8px;flex-wrap:wrap;
}
.footprint-market-list span{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(187,229,213,.16);
  background:rgba(255,255,255,.045);
  color:#bcd7cd;
  font-size:7px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}

@keyframes routeFlow{to{stroke-dashoffset:-120}}
@keyframes marketPulse{
  0%{transform:scale(.55);opacity:.9}
  80%,100%{transform:scale(1.8);opacity:0}
}
@keyframes londonRing{
  0%{transform:scale(.55);opacity:.75}
  85%,100%{transform:scale(2.2);opacity:0}
}
@media(max-width:920px){
  .footprint-head{grid-template-columns:1fr;gap:24px}
  .footprint-copy{justify-self:start}
  .footprint-card{min-height:720px}
  .footprint-map{inset:26px 18px 178px}
  .footprint-bottom{grid-template-columns:1fr 1fr}
  .footprint-bottom .wide{grid-column:1/-1}
  .footprint-market-list{bottom:186px;left:20px;right:20px}
}
@media(max-width:620px){
  .global-footprint{padding:84px 0 90px}
  .footprint-card{min-height:790px;border-radius:24px}
  .footprint-map{inset:16px 8px 250px}
  .footprint-market-list{bottom:256px}
  .footprint-bottom{grid-template-columns:1fr 1fr}
  .footprint-bottom>div{min-height:78px;padding:14px 15px}
}


/* ===== NEW ATLAS MAP DESIGN ===== */
.atlas-footprint{background:#f2f0e9}
.atlas-card{
  position:relative;
  min-height:700px;
  border-radius:34px;
  overflow:hidden;
  background:#082b23;
  box-shadow:0 35px 100px rgba(7,39,31,.18);
  border:1px solid rgba(255,255,255,.08);
}
.atlas-glow{
  position:absolute;width:620px;height:620px;border-radius:50%;
  right:-160px;top:-220px;
  background:radial-gradient(circle,rgba(75,188,148,.20),rgba(75,188,148,0) 67%);
}
.atlas-topline{
  position:absolute;z-index:3;left:34px;right:34px;top:25px;
  display:flex;justify-content:space-between;
  color:#759c8d;font-size:8px;font-weight:700;letter-spacing:.15em;
}
.atlas-map{position:absolute;inset:58px 25px 120px}
.atlas-map svg{width:100%;height:100%;display:block}
.atlas-land path{
  fill:rgba(213,235,226,.075);
  stroke:rgba(210,236,225,.17);
  stroke-width:1.1;
}
.atlas-routes path{
  fill:none;stroke:rgba(108,218,179,.32);stroke-width:1.2;
  stroke-dasharray:4 8;
  animation:atlasDash 12s linear infinite;
}
.atlas-pin .point{fill:#b9efd9;stroke:white;stroke-width:1}
.atlas-pin.key .point,.atlas-pin.hq .point{fill:white;stroke:#7bdbb8;stroke-width:2}
.atlas-pin .pulse{
  fill:rgba(105,218,178,.09);
  transform-box:fill-box;transform-origin:center;
  animation:atlasPulse 2.8s ease-out infinite;
}
.atlas-pin .ring{fill:none;stroke:#a5e8cf;stroke-width:1.2}
.atlas-name{
  fill:#f7fcfa;font-family:"Montserrat",Arial,sans-serif;
  font-size:10px;font-weight:700;letter-spacing:.12em;
}
.atlas-small{
  fill:#789f91;font-family:"Montserrat",Arial,sans-serif;
  font-size:7px;font-weight:700;letter-spacing:.1em;
}
.atlas-rail{
  position:absolute;z-index:4;left:0;right:0;bottom:0;
  min-height:104px;
  display:grid;grid-template-columns:1.4fr repeat(3,.55fr);
  background:rgba(5,27,21,.86);
  backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.1);
}
.atlas-rail>div{
  padding:20px 25px;border-right:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;justify-content:center;
}
.atlas-rail>div:last-child{border-right:0}
.atlas-statement span,.atlas-stat span{
  color:#71998a;font-size:7px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
}
.atlas-statement strong{margin-top:7px;color:#f3faf7;font-size:17px;line-height:1.25}
.atlas-stat strong{color:#d9f3e9;font-size:28px;line-height:1}
.atlas-stat span{margin-top:8px}
.atlas-markets{
  display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:22px;
}
.atlas-markets span{
  padding:8px 12px;border:1px solid rgba(11,63,52,.12);border-radius:999px;
  color:#66736d;background:rgba(255,255,255,.52);
  font-size:7px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
@keyframes atlasDash{to{stroke-dashoffset:-120}}
@keyframes atlasPulse{
  0%{transform:scale(.45);opacity:.9}
  85%,100%{transform:scale(1.8);opacity:0}
}
@media(max-width:800px){
  .atlas-card{min-height:760px}
  .atlas-map{inset:70px 8px 220px}
  .atlas-rail{grid-template-columns:1fr 1fr}
  .atlas-statement{grid-column:1/-1}
}


/* ===== GLOBAL REACH — REFERENCE INSPIRED MAP ===== */
.global-reach-ref{
  position:relative;
  overflow:hidden;
  padding:92px 0 0;
  background:
    radial-gradient(circle at 50% 25%,rgba(33,112,82,.18),transparent 35%),
    radial-gradient(circle at 50% 92%,rgba(14,92,68,.20),transparent 42%),
    linear-gradient(180deg,#031c18 0%,#031612 72%,#02110e 100%);
  color:#fff;
}
.global-reach-ref:before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0%,rgba(69,165,125,.035) 50%,transparent 100%);
}
.gr-shell{width:min(1500px,96%);margin:0 auto;position:relative;z-index:2}
.gr-head{text-align:left;max-width:820px;margin:0 auto 16px}
.gr-kicker{font-size:28px;font-weight:700;letter-spacing:.18em;color:#fff}
.gr-head h2{
  margin:4px 0 8px;
  font-size:clamp(54px,6vw,92px);
  letter-spacing:.02em;
  line-height:.95;
  color:#69bf8b;
  text-shadow:0 0 30px rgba(74,185,133,.12);
}
.gr-head p{
  max-width:650px;margin:0 auto;
  font-size:15px;line-height:1.55;color:#dfe9e5;
}
.gr-line{display:block;width:58px;height:1px;margin:18px auto 0;background:#79c698}
.gr-map-wrap{margin-top:-8px}
.gr-map{display:block;width:100%;height:auto;min-height:560px}
.gr-land path{
  fill:url(#landGrad);
  stroke:#90c8a6;
  stroke-width:.9;
  vector-effect:non-scaling-stroke;
  opacity:.78;
}
.gr-borders path{
  fill:none;stroke:rgba(183,222,198,.42);stroke-width:.65;
  vector-effect:non-scaling-stroke;
}
.gr-routes path{
  fill:none;stroke:#6dd09a;stroke-width:1.05;
  stroke-dasharray:4 8;opacity:.42;
  animation:grRoute 8s linear infinite;
}
.gr-market .leader{
  fill:none;stroke:#84d4a5;stroke-width:1.2;
  vector-effect:non-scaling-stroke;
}
.gr-market .pill{
  fill:rgba(3,28,23,.85);
  stroke:#77c997;stroke-width:1;
}
.gr-market .pilltxt{
  fill:#f6fbf8;
  font-family:"Montserrat",Arial,sans-serif;
  font-size:10px;font-weight:700;letter-spacing:.04em;
}
.gr-market .dot{fill:#9be0b6;stroke:#c9f2d7;stroke-width:1.2;filter:url(#grGlow)}
.gr-market.key .dot,.gr-market.gr-hq .dot{fill:#d8f8e4}
.gr-market .pulse{
  fill:rgba(110,212,154,.16);
  transform-box:fill-box;transform-origin:center;
  animation:grPulse 2.7s ease-out infinite;
}
.gr-values{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid rgba(125,202,157,.20);
  margin-top:-18px;
  padding:27px 0 34px;
}
.gr-value{
  display:grid;grid-template-columns:56px 1fr;gap:17px;
  align-items:center;padding:0 24px;
  border-right:1px solid rgba(125,202,157,.28);
}
.gr-value:last-child{border-right:0}
.gr-icon svg{
  width:46px;height:46px;fill:none;stroke:#71c794;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.gr-value strong{
  display:block;color:#76ca98;font-size:11px;
  letter-spacing:.08em;margin-bottom:7px;
}
.gr-value span{
  display:block;color:#d7e2dd;font-size:10px;line-height:1.5;
}
@keyframes grPulse{
  0%{transform:scale(.45);opacity:.9}
  85%,100%{transform:scale(1.85);opacity:0}
}
@keyframes grRoute{to{stroke-dashoffset:-96}}
@media(max-width:1000px){
  .gr-values{grid-template-columns:1fr 1fr}
  .gr-value{padding:20px 22px;border-bottom:1px solid rgba(125,202,157,.18)}
  .gr-map{min-width:950px;width:120%;transform:translateX(-8%)}
  .gr-map-wrap{overflow:hidden}
}
@media(max-width:650px){
  .global-reach-ref{padding-top:68px}
  .gr-kicker{font-size:19px}
  .gr-head h2{font-size:48px}
  .gr-head p{font-size:12px;padding:0 18px}
  .gr-map{min-width:1050px;width:170%;transform:translateX(-21%)}
  .gr-values{grid-template-columns:1fr}
  .gr-value{border-right:0}
}


/* ===== GLOBAL ORBIT DESIGN — COMPLETELY DIFFERENT ===== */
.global-orbit{
  position:relative;
  padding:118px 0 126px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 48%,rgba(38,117,88,.09),transparent 28%),
    linear-gradient(180deg,#f4f1ea 0%,#ece8df 100%);
}
.orbit-head{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:70px;
  align-items:end;
  margin-bottom:50px;
}
.orbit-head h2{
  margin:10px 0 0;
  font-size:clamp(54px,6vw,86px);
  line-height:.95;
  letter-spacing:-.05em;
}
.orbit-head h2 span{color:var(--forest)}
.orbit-head p{
  margin:0;
  color:#67736d;
  font-size:14px;
  line-height:1.8;
  max-width:580px;
  justify-self:end;
}
.orbit-stage{
  position:relative;
  min-height:760px;
  border-radius:36px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 45%,rgba(83,176,137,.14),transparent 34%),
    linear-gradient(145deg,#0a2d25 0%,#071f1a 58%,#051512 100%);
  box-shadow:0 38px 100px rgba(8,46,36,.19);
  border:1px solid rgba(255,255,255,.08);
}
.orbit-stage:before{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:48px 48px;
  opacity:.5;
}
.orbit-glow{
  position:absolute;
  width:520px;height:520px;border-radius:50%;
  left:50%;top:46%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(95,213,166,.18),transparent 64%);
  filter:blur(18px);
}
.orbit-globe{
  position:absolute;
  width:430px;height:430px;
  left:50%;top:43%;
  transform:translate(-50%,-50%);
}
.globe-core{
  position:absolute;inset:52px;
  border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.18),transparent 18%),
    radial-gradient(circle at 50% 55%,#1e6b52 0%,#124737 54%,#0b3027 100%);
  box-shadow:
    inset -35px -24px 55px rgba(1,14,11,.45),
    inset 18px 14px 28px rgba(255,255,255,.06),
    0 0 0 1px rgba(174,235,209,.17),
    0 0 70px rgba(82,202,152,.15);
}
.globe-grid{
  position:absolute;inset:-8%;
  border-radius:50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,transparent 0 27px,rgba(172,232,207,.13) 28px 29px),
    repeating-linear-gradient(90deg,transparent 0 44px,rgba(172,232,207,.10) 45px 46px);
  opacity:.45;
}
.globe-land{
  position:absolute;
  background:#7ab69b;
  opacity:.48;
  filter:drop-shadow(0 0 5px rgba(137,224,187,.12));
}
.land-a{
  width:96px;height:68px;left:50px;top:74px;
  border-radius:50% 40% 45% 55%;
  transform:rotate(-14deg);
  clip-path:polygon(2% 32%,18% 10%,51% 0,82% 18%,100% 44%,79% 66%,62% 100%,34% 85%,12% 71%);
}
.land-b{
  width:62px;height:112px;left:118px;top:135px;
  border-radius:45% 55% 60% 40%;
  transform:rotate(18deg);
  clip-path:polygon(35% 0,70% 12%,100% 40%,78% 72%,48% 100%,20% 85%,0 52%,15% 22%);
}
.land-c{
  width:135px;height:80px;right:39px;top:75px;
  border-radius:45% 55% 40% 60%;
  transform:rotate(9deg);
  clip-path:polygon(0 30%,18% 8%,46% 0,66% 17%,100% 20%,91% 54%,70% 66%,55% 100%,27% 79%,8% 63%);
}
.land-d{
  width:58px;height:42px;right:58px;bottom:62px;
  border-radius:50%;
  transform:rotate(12deg);
}
.globe-shine{
  position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,.12),transparent 32%,transparent 65%,rgba(0,0,0,.17));
  border-radius:50%;
}
.orbit{
  position:absolute;
  border:1px solid rgba(138,222,187,.22);
  border-radius:50%;
  left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(-14deg);
}
.orbit-1{width:410px;height:178px}
.orbit-2{width:430px;height:255px;transform:translate(-50%,-50%) rotate(21deg)}
.orbit-3{width:366px;height:368px;transform:translate(-50%,-50%) rotate(72deg)}
.hub{
  position:absolute;
  display:flex;align-items:center;gap:7px;
  color:#cde8dd;
  font-size:8px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.hub span{
  width:8px;height:8px;border-radius:50%;
  background:#b6efd7;
  box-shadow:0 0 0 6px rgba(117,217,176,.10),0 0 16px rgba(117,217,176,.45);
}
.hub b{font-weight:700}
.hub-london{left:206px;top:113px;color:#fff}
.hub-us{left:13px;top:190px}
.hub-eu{right:17px;top:154px}
.hub-morocco{left:72px;bottom:98px}
.hub-algeria{left:121px;bottom:55px}
.hub-libya{left:183px;bottom:30px}
.hub-iraq{right:75px;top:226px}
.hub-jordan{right:37px;top:263px}
.hub-lebanon{right:49px;top:194px}
.hub-bahrain{right:22px;bottom:102px}
.hub-yemen{right:90px;bottom:55px}
.orbit-side{
  position:absolute;top:50%;
  transform:translateY(-50%);
  display:flex;flex-direction:column;gap:18px;
  width:255px;
}
.orbit-left{left:38px}
.orbit-right{right:38px}
.orbit-card{
  padding:22px 22px 21px;
  border-radius:18px;
  border:1px solid rgba(185,231,212,.11);
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(12px);
}
.orbit-card small{
  display:block;
  color:#6ea48f;
  font-size:7px;font-weight:700;letter-spacing:.14em;
  margin-bottom:8px;
}
.orbit-card strong{
  display:block;color:#eef8f4;
  font-size:15px;line-height:1.25;
}
.orbit-card span{
  display:block;color:#86a89b;
  font-size:9px;line-height:1.5;margin-top:7px;
}
.orbit-footer{
  position:absolute;left:0;right:0;bottom:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  min-height:104px;
  background:rgba(3,18,14,.78);
  backdrop-filter:blur(18px);
  border-top:1px solid rgba(255,255,255,.08);
}
.orbit-footer div{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  border-right:1px solid rgba(255,255,255,.07);
}
.orbit-footer div:last-child{border-right:0}
.orbit-footer strong{color:#d9f3e8;font-size:28px;line-height:1}
.orbit-footer span{
  margin-top:8px;color:#6f9486;
  font-size:7px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
}
@media(max-width:980px){
  .orbit-head{grid-template-columns:1fr;gap:24px}
  .orbit-head p{justify-self:start}
  .orbit-stage{min-height:920px}
  .orbit-globe{top:38%}
  .orbit-side{top:auto;bottom:130px;width:calc(50% - 52px);transform:none}
  .orbit-left{left:34px}.orbit-right{right:34px}
}
@media(max-width:680px){
  .global-orbit{padding:84px 0 90px}
  .orbit-stage{min-height:1080px;border-radius:26px}
  .orbit-globe{width:340px;height:340px;top:31%}
  .globe-core{inset:46px}
  .orbit-1{width:330px}.orbit-2{width:340px}.orbit-3{width:300px;height:300px}
  .orbit-side{width:auto;left:22px!important;right:22px!important}
  .orbit-left{bottom:310px}.orbit-right{bottom:158px}
  .orbit-footer{grid-template-columns:1fr 1fr}
}

/* Video library */
.video-library{background:#071f1a;color:#f7f5ef;padding:110px 0 120px;scroll-margin-top:90px}
.video-library-head{display:grid;grid-template-columns:minmax(150px,.45fr) 1.55fr;gap:60px;margin-bottom:70px}
.video-library-head h2{margin:0;font-size:clamp(52px,6vw,96px);line-height:.91;letter-spacing:-.055em}.video-library-head h2 span{color:#7fb69b}
.video-library-head p{max-width:680px;color:rgba(247,245,239,.68);font-size:18px;line-height:1.65;margin:28px 0 0}

/* Alternating text/image rows — every thumbnail shares the same aspect
   ratio (16:10) so all four films read as one consistent size, and the
   image swaps side each row (text|image, then image|text, ...) via the
   even-row order flip below. */
.video-story-list{display:flex;flex-direction:column;gap:64px}
.video-story-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.video-story-row:nth-child(even) .video-story-media{order:-1}
.video-story-media{position:relative;display:block;aspect-ratio:16/10;border:1px solid rgba(255,255,255,.1);border-radius:20px;overflow:hidden}
/* Same Maya-style trigger badge as the film sections, centered over the poster. */
.video-story-media > .compliance-video-badge-wrap{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
}
.video-story-kicker{display:block;margin-bottom:18px;color:#9fc8b4;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.video-story-copy h3{margin:0 0 16px;font-size:clamp(26px,2.6vw,38px);line-height:1.08;letter-spacing:-.03em}
.video-story-copy p{margin:0;max-width:440px;color:rgba(247,245,239,.66);font-size:15px;line-height:1.7}
.video-library .video-story-list:only-child{gap:0}

/* Quality film system: paired production-floor films with their transcript context. */
.quality-film-system{
  position:relative;
  overflow:hidden;
  padding:0 0 112px;
  background:linear-gradient(135deg,#043f34,#002c25);
  color:#fff;
  scroll-margin-top:90px;
}
.quality-film-intro{
  position:relative;
  display:block;
  width:100%;
  margin:0;
  padding:clamp(76px,7vw,108px) 0 0;
}
.quality-film-intro-title{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.quality-film-intro h2{
  max-width:11ch;
  margin:0;
  color:#f3f8f5;
  font-weight:600;
  font-size:clamp(48px,5.6vw,78px);
  line-height:.98;
  letter-spacing:-.052em;
}
.quality-film-intro .quality-film-summary{
  max-width:54ch;
  margin:26px 0 0;
  color:rgba(247,245,239,.72);
  font-size:17px;
  line-height:1.7;
}
.quality-film-rows{
  display:flex;
  flex-direction:column;
  gap:clamp(38px,5vw,66px);
  padding-top:clamp(44px,4.5vw,64px);
}
.quality-film-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(340px,1fr);
  gap:clamp(34px,5.5vw,86px);
  align-items:center;
}
.quality-film-card .quality-film-media{
  order:1;
}
.quality-film-card .quality-film-copy{
  order:2;
}
.quality-film-card:nth-child(even){
  grid-template-columns:minmax(340px,1fr) minmax(0,.92fr);
}
.quality-film-card:nth-child(even) .quality-film-media{
  order:2;
}
.quality-film-card:nth-child(even) .quality-film-copy{
  order:1;
}
.quality-film-media{
  position:relative;
  aspect-ratio:16/9;
  min-height:260px;
  background-size:cover;
  background-position:center;
  border:0;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 22px 58px rgba(20,38,31,.09);
}
.quality-film-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 22% 52%,rgba(7,31,26,.18),transparent 38%),
    linear-gradient(90deg,rgba(3,39,32,.70),rgba(3,39,32,.18) 50%,rgba(3,39,32,.04));
  pointer-events:none;
}
.quality-film-media > .compliance-video-badge-wrap{
  position:absolute;
  inset:0;
  z-index:3;
  display:grid;
  place-items:center;
  transform:none;
}
.quality-film-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:0;
}
.quality-film-copy span{
  margin-bottom:16px;
  color:#8fd9bd;
  font-size:10px;
  font-weight:850;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.quality-film-copy h3{
  max-width:560px;
  margin:0 0 16px;
  color:#f3f8f5;
  font-weight:700;
  font-size:clamp(34px,3.2vw,52px);
  line-height:1.05;
  letter-spacing:-.045em;
}
.quality-film-copy p{
  max-width:64ch;
  margin:0;
  color:#c3d9d1;
  font-size:16px;
  line-height:1.72;
}
.quality-film-copy p + p{
  margin-top:14px;
}
@media(max-width:980px){
  .quality-film-system{
    padding:0 0 88px;
  }
  .quality-film-intro{
    padding:62px 0 0;
  }
  .quality-film-intro .quality-film-summary{
    max-width:680px;
  }
  .quality-film-rows{
    gap:44px;
    padding-top:44px;
  }
  .quality-film-card,
  .quality-film-card:nth-child(even){
    grid-template-columns:1fr;
    gap:24px;
  }
  .quality-film-card:nth-child(even) .quality-film-media,
  .quality-film-card:nth-child(even) .quality-film-copy{
    order:initial;
  }
  .quality-film-card .quality-film-copy,
  .quality-film-card:nth-child(even) .quality-film-copy{
    order:1;
  }
  .quality-film-card .quality-film-media,
  .quality-film-card:nth-child(even) .quality-film-media{
    order:2;
  }
  .quality-film-copy{
    max-width:680px;
  }
}
@media(max-width:620px){
  .quality-film-intro{
    padding:48px 0 0;
  }
  .quality-film-intro h2{
    max-width:11ch;
    font-size:clamp(35px,10vw,44px);
  }
  .quality-film-intro .quality-film-summary{
    margin-top:20px;
    font-size:15px;
    line-height:1.68;
  }
  .quality-film-rows{
    padding-top:48px;
  }
  .quality-film-copy h3{
    font-size:clamp(32px,9vw,44px);
  }
  .quality-film-copy p{
    font-size:15px;
    line-height:1.68;
  }
  .quality-film-media{
    min-height:210px;
    border-radius:16px;
  }
}

/* Quality compliance media: keep copy below the video and center the play trigger. */
/* Maya's video and the four compliance cards used to be two independent
   flows (video+copy stacked in a flex column on the left; cards in their
   own 2x2 grid on the right, aligned only at the top via align-items:start)
   — so the cards' total height had no relationship to the video's height
   and typically ran past its bottom edge into the copy text below. Grid
   areas put the video and the cards in the literal same row, so the row's
   height is set by its tallest occupant (the video, via its own
   aspect-ratio) and the cards can be told to fill that row exactly — top
   and bottom now match the video's own borders by construction, not by a
   tuned pixel value that would drift the next time either column's content
   changes. The copy drops to its own full-width row below both (grid-area
   "copy"), rather than being trapped in the narrower video column — this
   is also what makes it read as a page-level transition into the next
   section instead of a caption stapled to the video. */
.compliance-media-card{
  grid-area:media;
  min-height:0 !important;
  aspect-ratio:16/8.15;
  padding:0 !important;
  display:block !important;
  overflow:hidden;
  border-radius:28px;
}
.compliance-media-card::after{
  background:linear-gradient(180deg,rgba(0,40,33,.10),rgba(0,40,33,.28)) !important;
}
.compliance-media-card > .compliance-video-badge-wrap{
  position:absolute !important;
  inset:0 !important;
  z-index:3 !important;
  display:grid;
  place-items:center;
  transform:none !important;
}
/* !important throughout: a later, lower-in-file legacy .compliance-grid
   rule still sets a plain (non-important) `gap:22px` shorthand, which would
   silently win the row-gap tug-of-war on source order alone despite this
   rule's clearer intent.
   justify-items:stretch matters specifically at the ~901-1440px two-column
   width: .compliance-media-card has aspect-ratio:16/8.15, and default
   justify-items:normal skips stretching an aspect-ratio item's inline size
   when its block size is already definite from align-items:stretch (its
   row is tall - matched to the 2x2 cards column's content height). Without
   this, the browser derived width FROM that tall height via the ratio
   instead, ballooning the video to ~2.3x its 514px column and spilling it
   over the cards. Forcing justify-items:stretch too makes both axes
   definite from the grid cell, so the ratio is never consulted -
   background-size:cover on the media element handles the resulting crop.
   Single row now ("media cards" only) - the trailing copy row and its
   .compliance-feature-copy block were folded into one title in the
   quality-film-system section below, so there's nothing left to reserve a
   second row for. */
.compliance-grid{
  grid-template-areas:"media cards" !important;
  align-items:stretch !important;
  justify-items:stretch !important;
}
.compliance-cards{
  grid-area:cards;
  height:100%;
  gap:16px !important;
}
.compliance-card{
  min-height:0 !important;
  height:100%;
  padding:22px 24px 24px !important;
  border-radius:18px !important;
}
.compliance-icon{
  width:40px !important;
  height:40px !important;
  font-size:18px !important;
}
.compliance-card h4{
  margin:18px 0 7px !important;
  font-size:18px !important;
  line-height:1.16 !important;
}
.compliance-card p{
  font-size:13px !important;
  line-height:1.48 !important;
}
@media(max-width:900px){
  .video-library{padding:80px 0}
  .video-library-head{grid-template-columns:1fr;gap:24px}
  .video-story-list{gap:40px}
  .video-story-row{grid-template-columns:1fr;gap:22px}
  .video-story-row:nth-child(even) .video-story-media{order:0}
}

/* ===== LEADERSHIP TEAM SECTION ===== */
.leadership-team-section{
  padding-bottom:76px;
  background:
    radial-gradient(circle at 82% 20%,rgba(11,63,52,.08),transparent 28%),
    #f6f4ee;
}
.leadership-team-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:42px;
}
.leadership-team-grid .team-tile{
  border-bottom:1px solid var(--line);
  padding-bottom:16px;
}
.leadership-team-grid .team-photo{
  aspect-ratio:.82;
  border-radius:8px;
  overflow:hidden;
  background:#e6ebe7;
  box-shadow:0 18px 50px rgba(11,63,52,.08);
}
.leadership-team-grid .team-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.leadership-team-grid .team-info{
  padding-top:14px;
}
.leadership-team-grid .team-info h3{
  font-size:16px;
}
@media(max-width:900px){
  .leadership-team-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .leadership-team-grid{grid-template-columns:1fr}
}


/* Leadership cards now match standard team card/photo sizing */
.leadership-team-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:42px;
}
.leadership-team-grid .team-tile{
  border-bottom:0;
  padding-bottom:0;
}
.leadership-team-grid .team-photo{
  aspect-ratio:4/5;
  border-radius:0;
  overflow:hidden;
  background:var(--mist);
  box-shadow:none;
}
.leadership-team-grid .team-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.leadership-team-grid .team-info{
  padding-top:10px;
}
.leadership-team-grid .team-info h3{
  font-size:12px;
}
@media(max-width:900px){
  .leadership-team-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .leadership-team-grid{grid-template-columns:1fr}
}


/* ===== CAREERS VIDEO SECTION ===== */
.careers-section{
  position:relative;
  padding:116px 0 124px;
  background:
    radial-gradient(circle at 82% 18%,rgba(19,83,67,.08),transparent 29%),
    #f2f0e9;
  overflow:hidden;
  scroll-margin-top:90px;
}
.careers-head{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:72px;
  align-items:end;
  margin-bottom:54px;
}
.careers-head h2 span{color:var(--forest)}
.careers-intro{
  max-width:600px;
  justify-self:end;
}
.careers-intro p{
  margin:0;
  color:#66726c;
  font-size:14px;
  line-height:1.8;
}
.careers-link{
  display:inline-flex;
  align-items:center;
  gap:20px;
  margin-top:24px;
  padding-bottom:9px;
  border-bottom:1px solid rgba(11,63,52,.25);
  color:var(--forest);
  text-decoration:none;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.careers-video-layout{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr);
  background:#082b23;
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 32px 90px rgba(7,48,38,.16);
}
.careers-video-frame{
  position:relative;
  min-height:560px;
  background:#061d18;
}
.careers-video-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.careers-video-copy{
  padding:58px 48px 48px;
  color:#f5f7f4;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.careers-number{
  color:#8fc2a9;
  font-size:9px;
  font-weight:700;
  letter-spacing:.13em;
}
.careers-video-copy h3{
  margin:20px 0 20px;
  font-size:clamp(34px,3.1vw,52px);
  line-height:.98;
  letter-spacing:-.045em;
}
.careers-video-copy>p{
  margin:0;
  color:rgba(244,248,245,.64);
  font-size:13px;
  line-height:1.7;
}
.career-values{
  margin-top:34px;
  border-top:1px solid rgba(255,255,255,.11);
}
.career-values>div{
  display:grid;
  grid-template-columns:128px 1fr;
  gap:18px;
  padding:17px 0;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.career-values strong{
  color:#dff4e9;
  font-size:10px;
}
.career-values span{
  color:#7fa397;
  font-size:9px;
  line-height:1.5;
}
@media(max-width:900px){
  .careers-section{padding:84px 0 92px}
  .careers-head{grid-template-columns:1fr;gap:24px}
  .careers-intro{justify-self:start}
  .careers-video-layout{grid-template-columns:1fr}
  .careers-video-frame{min-height:420px}
}
@media(max-width:600px){
  .careers-video-frame{min-height:260px}
  .careers-video-copy{padding:38px 26px}
  .career-values>div{grid-template-columns:1fr;gap:6px}
}


.careers-video-frame{
  display:flex;
  flex-direction:column;
}
.careers-video-frame iframe{
  position:relative !important;
  inset:auto !important;
  flex:1 1 auto;
  min-height:500px;
}
.careers-video-fallback{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  padding:14px 18px;
  background:#061d18;
  border-top:1px solid rgba(255,255,255,.09);
  color:rgba(255,255,255,.58);
  font-size:10px;
}
.careers-video-fallback a{
  color:#cfeade;
  text-decoration:none;
  font-weight:700;
  white-space:nowrap;
}
@media(max-width:900px){
  .careers-video-frame iframe{min-height:380px}
}
@media(max-width:600px){
  .careers-video-frame iframe{min-height:240px}
  .careers-video-fallback{display:block}
  .careers-video-fallback a{display:block;margin-top:7px;white-space:normal}
}


.careers-youtube-player{
  position:relative;
  width:100%;
  min-height:500px;
  background:#061d18;
}
.careers-youtube-player iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.careers-video-poster{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:18px;
  background:
    radial-gradient(circle at 50% 42%,rgba(104,180,145,.17),transparent 30%),
    linear-gradient(135deg,#10392f,#061d18 72%);
  color:#cfe9dd;
  text-align:left;
  padding:30px;
}
.careers-play-ring{
  width:78px;
  height:78px;
  border-radius:50%;
  display:grid;
  place-items:center;
  padding-left:5px;
  background:#f4f1e8;
  color:#0a4437;
  font-size:22px;
  box-shadow:0 18px 50px rgba(0,0,0,.25);
}
.careers-video-poster span{
  max-width:430px;
  font-size:10px;
  letter-spacing:.13em;
  line-height:1.5;
  font-weight:700;
}
@media(max-width:900px){
  .careers-youtube-player{min-height:380px}
}
@media(max-width:600px){
  .careers-youtube-player{min-height:240px}
}


/* ===== NEWS SECTION ===== */
.news-section{
  position:relative;
  padding:118px 0 124px;
  background:#eef0ea;
  scroll-margin-top:90px;
  overflow:hidden;
}
.news-section:before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  right:-180px;
  top:-220px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(24,86,68,.08),transparent 68%);
}
.news-head{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:70px;
  align-items:end;
  margin-bottom:52px;
}
.news-head h2 span,
.news-head h1 span{color:var(--forest)}
.news-head-copy{
  max-width:590px;
  justify-self:end;
}
.news-head-copy p{
  margin:0;
  color:#67726d;
  font-size:14px;
  line-height:1.8;
}
.news-all-link,
.news-read-link,
.news-card a{
  display:inline-flex;
  align-items:center;
  gap:16px;
  color:var(--forest);
  text-decoration:none;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.news-all-link{
  margin-top:22px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(11,63,52,.24);
  font-size:10px;
}
.news-feature{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  min-height:500px;
  background:#0a3027 no-repeat center/cover;
  border-radius:30px;
  overflow:hidden;
  margin-bottom:28px;
  box-shadow:0 30px 80px rgba(8,50,40,.13);
}
.news-feature-visual{
  position:relative;
  min-height:500px;
  background:
    linear-gradient(120deg,rgba(8,48,39,.2),rgba(8,48,39,.02)),
    radial-gradient(circle at 68% 34%,rgba(144,203,174,.23),transparent 28%),
    linear-gradient(145deg,#1b5b49 0%,#0e3d31 45%,#092920 100%);
}
.news-visual-layer{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to right,rgba(0,0,0,.7),transparent 95%);
}
.news-feature-badge{
  position:absolute;
  left:30px;
  top:28px;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:20px;
  color:#d9eee5;
  font-size:8px;
  font-weight:700;
  letter-spacing:.12em;
}
.news-feature-copy{
  padding:52px 46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:#f5f7f4;
}
.news-meta,
.news-card-meta{
  font-size:9px;
  font-weight:700;
  letter-spacing:.13em;
  color:#8fc2a9;
}
/* .news-card-meta is also used inside light-background .news-card tiles
   (not just the dark .news-feature-copy), where the mint tone above is
   too low-contrast to read — override to the same darker green the
   design system already uses for this exact situation elsewhere
   (.education-card-top span). */
.news-card .news-card-meta{
  color:#527565;
}
.news-feature-copy h2,
.news-feature-copy h3{
  margin:18px 0 20px;
  font-size:clamp(34px,3.1vw,52px);
  line-height:.98;
  letter-spacing:-.045em;
}
.news-feature-copy p{
  margin:0;
  color:rgba(244,248,245,.64);
  font-size:13px;
  line-height:1.7;
}
.news-read-link{
  margin-top:28px;
  color:#d8eee4;
  font-size:9px;
}
.news-year-group{
  margin-bottom:44px;
}
.news-year-group:last-child{
  margin-bottom:0;
}
.news-year-head{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin-bottom:22px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(11,63,52,.12);
}
.news-year-head h2,
.news-year-head h3{
  margin:0;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--forest);
}
.news-year-head span{
  color:#7a8580;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.news-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.news-card{
  position:relative;
  padding:22px;
  background:#f8f8f4;
  border:1px solid rgba(11,63,52,.08);
  display:flex;
  flex-direction:column;
}
.news-card-index{
  position:absolute;
  right:24px;
  top:22px;
  font-size:34px;
  line-height:1;
  font-weight:700;
  color:rgba(11,63,52,.08);
}
.news-card-thumbnail{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  margin:0 0 20px;
  overflow:hidden;
  background:var(--forest);
  border:0;
  padding:0;
  text-decoration:none;
  cursor:default;
}
.news-card-thumbnail img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transition:transform .45s ease, filter .45s ease;
}
.news-card:hover .news-card-thumbnail img{
  transform:scale(1.025);
  filter:brightness(.96);
}
.news-card-thumbnail--video{
  cursor:pointer;
}
.news-card-thumbnail--video::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  width:48px;
  height:48px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(5,29,23,.55);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px);
  transition:transform .3s ease,background .3s ease;
}
.news-card-thumbnail--video::before{
  content:"";
  position:absolute;
  left:calc(50% + 2px);
  top:50%;
  z-index:3;
  transform:translate(-50%,-50%);
  border-style:solid;
  border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent #fff;
}
.news-card-thumbnail--video:hover::after{
  transform:translate(-50%,-50%) scale(1.08);
  background:rgba(5,29,23,.72);
}
.news-card h3{
  margin:0 0 12px;
  max-width:90%;
  font-size:22px;
  line-height:1.1;
  letter-spacing:-.03em;
  color:#173e33;
}
.news-card p{
  margin:0;
  color:#6d7873;
  font-size:12px;
  line-height:1.65;
}
.news-card a{
  margin-top:auto;
  padding-top:28px;
  font-size:9px;
}
@media(max-width:900px){
  .news-section{padding:84px 0 92px}
  .news-head,
  .news-feature,
  .news-grid{grid-template-columns:1fr}
  .news-head{gap:24px}
  .news-head-copy{justify-self:start}
  .news-feature-visual{min-height:360px}
  .news-feature{min-height:440px}
}
@media(max-width:600px){
  .news-feature-visual{min-height:270px}
  .news-feature{min-height:400px}
  .news-feature-copy{padding:38px 26px}
}


/* ===== EDUCATION SECTION ===== */
.education-section{
  position:relative;
  padding:118px 0 126px;
  background:#f6f4ee;
  scroll-margin-top:90px;
  overflow:hidden;
}
.education-section:after{
  content:"EDUCATION";
  position:absolute;
  right:-18px;
  top:85px;
  font-size:132px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.06em;
  color:rgba(10,63,51,.025);
  pointer-events:none;
}
.education-head{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:70px;
  align-items:end;
  margin-bottom:52px;
}
.education-head h2 span{color:var(--forest)}
.education-intro{
  max-width:590px;
  justify-self:end;
}
.education-intro p{
  margin:0;
  color:#66736c;
  font-size:14px;
  line-height:1.8;
}
.education-link{
  display:inline-flex;
  gap:18px;
  align-items:center;
  margin-top:24px;
  padding-bottom:9px;
  border-bottom:1px solid rgba(11,63,52,.25);
  text-decoration:none;
  color:var(--forest);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.education-feature{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);
  min-height:520px;
  overflow:hidden;
  border-radius:30px;
  background:#0a3027;
  box-shadow:0 30px 85px rgba(8,50,40,.14);
  margin-bottom:32px;
}
.education-feature-media{
  padding:24px;
  min-height:520px;
  background:
    radial-gradient(circle at 68% 32%,rgba(131,202,167,.20),transparent 28%),
    linear-gradient(145deg,#164e40,#092a22);
}
.education-video-placeholder{
  position:relative;
  height:100%;
  min-height:472px;
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    radial-gradient(circle at center,rgba(100,189,149,.14),transparent 35%);
  background-size:40px 40px,40px 40px,auto;
}
.education-video-placeholder:before{
  content:"";
  position:absolute;
  width:270px;
  height:270px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(167,225,198,.18);
  border-radius:50%;
  box-shadow:0 0 0 38px rgba(123,194,161,.025),0 0 0 78px rgba(123,194,161,.018);
}
.education-play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:78px;
  height:78px;
  display:grid;
  place-items:center;
  padding-left:5px;
  border-radius:50%;
  background:#f4f1e8;
  color:#0a4236;
  font-size:22px;
  box-shadow:0 18px 55px rgba(0,0,0,.24);
  z-index:2;
}
.education-video-placeholder>span{
  position:absolute;
  left:25px;
  bottom:23px;
  color:#a8cdbc;
  font-size:9px;
  font-weight:700;
  letter-spacing:.13em;
}
.education-feature-copy{
  padding:52px 46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:#f3f6f4;
}
.education-kicker{
  color:#8fc2a9;
  font-size:9px;
  font-weight:700;
  letter-spacing:.13em;
}
.education-feature-copy h3{
  margin:20px 0 20px;
  font-size:clamp(36px,3.3vw,54px);
  line-height:.98;
  letter-spacing:-.045em;
}
.education-feature-copy>p{
  margin:0;
  color:rgba(244,248,245,.64);
  font-size:13px;
  line-height:1.7;
}
.education-points{
  margin-top:32px;
  border-top:1px solid rgba(255,255,255,.1);
}
.education-points>div{
  display:grid;
  grid-template-columns:45px 1fr;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.education-points strong{
  color:#78ad94;
  font-size:10px;
}
.education-points span{
  color:#d9e9e2;
  font-size:10px;
}
.education-library-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  margin:56px 0 26px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(11,63,52,.14);
}
.education-library-head h3{
  margin:0;
  font-size:clamp(24px,2.4vw,32px);
  line-height:1.05;
  letter-spacing:-.035em;
  color:#173f34;
}
.education-library-head .education-channel-link{
  margin-top:0;
  white-space:nowrap;
}
.education-library{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.education-card{
  padding:22px;
  background:#fbfaf6;
  border:1px solid rgba(11,63,52,.08);
  min-height:450px;
  display:flex;
  flex-direction:column;
}
.education-card-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:17px;
}
.education-card-top span{
  color:#527565;
  font-size:8px;
  font-weight:700;
  letter-spacing:.12em;
}
.education-card h3{
  margin:0 0 11px;
  color:#173f34;
  font-size:27px;
  line-height:1.05;
  letter-spacing:-.035em;
}
.education-card p{
  margin:0;
  color:#6e7873;
  font-size:12px;
  line-height:1.65;
}
.education-card a,
.education-card button:not(.education-card-thumbnail){
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  margin-top:auto;
  padding-top:24px;
  border-top:1px solid rgba(11,63,52,.08);
  border-left:0;border-right:0;border-bottom:0;
  background:none;
  color:var(--forest);
  text-decoration:none;
  text-transform:uppercase;
  font-size:9px;
  font-weight:700;
  letter-spacing:.07em;
  font-family:inherit;
  cursor:pointer;
}
@media(max-width:900px){
  .education-section{padding:84px 0 94px}
  .education-head,
  .education-feature,
  .education-library{grid-template-columns:1fr}
  .education-head{gap:24px}
  .education-intro{justify-self:start}
  .education-feature-media,
  .education-video-placeholder{min-height:390px}
}
@media(max-width:600px){
  .education-library-head{flex-direction:column;align-items:flex-start;gap:10px}
  .education-feature-media{padding:14px;min-height:290px}
  .education-video-placeholder{min-height:260px}
  .education-feature-copy{padding:38px 26px}
  .education-card{min-height:405px}
}


/* Liza Raven Education thumbnails — <button> triggers, so reset button chrome */
.education-card-thumbnail{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  min-height:0 !important;
  margin-bottom:22px;
  overflow:hidden;
  background:#0b3329;
  border:0;
  padding:0;
  text-decoration:none;
  cursor:pointer;
}
.education-card-thumbnail img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transition:transform .45s ease, filter .45s ease;
}
.education-card-thumbnail:hover img{
  transform:scale(1.025);
  filter:brightness(.96);
}
.education-card-thumbnail::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  width:48px;
  height:48px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(5,29,23,.55);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px);
  transition:transform .3s ease,background .3s ease;
}
.education-card-thumbnail::before{
  content:"";
  position:absolute;
  left:calc(50% + 2px);
  top:50%;
  z-index:3;
  transform:translate(-50%,-50%);
  border-style:solid;
  border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent #fff;
}
.education-card-thumbnail:hover::after{
  transform:translate(-50%,-50%) scale(1.08);
  background:rgba(5,29,23,.72);
}


/* ===== LEARN WITH LIZA RAVEN FEATURE ===== */
.education-liza-feature{
  grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);
  align-items:stretch;
}
.education-liza-feature .education-feature-media{
  padding:24px;
  min-height:520px;
  display:flex;
  align-items:stretch;
}
.education-liza-hero{
  display:block;
  width:100%;
  height:100%;
  min-height:472px;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:#082e25;
  text-decoration:none;
}
.education-liza-hero img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.education-liza-feature .education-feature-copy h3 span{
  color:#35c99d;
}
.education-liza-feature .education-feature-copy > p + p{
  margin-top:16px;
}
.education-liza-points{
  margin-top:28px;
}
@media(max-width:900px){
  .education-liza-feature{
    grid-template-columns:1fr;
  }
  .education-liza-feature .education-feature-media,
  .education-liza-hero{
    min-height:390px;
  }
}
@media(max-width:600px){
  .education-liza-feature .education-feature-media{
    min-height:280px;
    padding:14px;
  }
  .education-liza-hero{
    min-height:250px;
  }
}


/* ===== NEWS FEATURE IMAGE ===== */
.news-feature-image{
  position:relative;
  display:block;
  min-height:500px;
  overflow:hidden;
  text-decoration:none;
  background:#0a3027;
}
.news-feature-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.94) 30%, rgba(0,0,0,.7) 45%, rgba(0,0,0,.25) 62%, rgba(0,0,0,0) 80%);
  pointer-events:none;
  z-index:1;
}
.news-feature-image img{
  display:block;
  width:100%;
  height:100%;
  min-height:500px;
  object-fit:cover;
  object-position:center center;
  transition:transform .5s ease, filter .5s ease;
}
.news-feature-image:hover img{
  transform:scale(1.018);
  filter:brightness(.97);
}
@media(max-width:900px){
  .news-feature-image,
  .news-feature-image img{
    min-height:360px;
  }
}
@media(max-width:600px){
  .news-feature-image,
  .news-feature-image img{
    min-height:270px;
  }
}


/* ===== CAREERS CLEAN THUMBNAIL ===== */
.careers-thumbnail-frame{
  position:relative;
  min-height:560px;
  background:#061d18;
  overflow:hidden;
}
.careers-thumbnail-link{
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  text-decoration:none;
}
.careers-thumbnail-link img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transition:transform .5s ease, filter .5s ease;
}
.careers-thumbnail-link:hover img{
  transform:scale(1.018);
  filter:brightness(.97);
}
@media(max-width:900px){
  .careers-thumbnail-frame{min-height:420px}
}
@media(max-width:600px){
  .careers-thumbnail-frame{min-height:280px}
}


/* ===== CAREERS THUMBNAIL — SHOW FULL IMAGE ===== */
.careers-thumbnail-frame{
  min-height:0 !important;
  height:auto !important;
  background:#061d18;
  overflow:hidden;
}
.careers-thumbnail-link{
  position:relative !important;
  inset:auto !important;
  display:block;
  width:100%;
  height:auto !important;
}
.careers-thumbnail-link img{
  display:block;
  width:100%;
  height:auto !important;
  min-height:0 !important;
  object-fit:contain !important;
  object-position:center center !important;
}


/* SECTION 06 — TRUE IMAGE/TEXT MERGE */
.ng-product-story{background:#f3f1eb !important;}
.ng-product-story .ng-story-image{
  inset:0 !important; width:82% !important; height:100% !important;
  background-size:contain !important; background-position:8% center !important;
  background-repeat:no-repeat !important; background-color:#f3f1eb !important;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 50%,rgba(0,0,0,.92) 60%,rgba(0,0,0,.58) 72%,rgba(0,0,0,.18) 84%,transparent 96%);
  mask-image:linear-gradient(90deg,#000 0%,#000 50%,rgba(0,0,0,.92) 60%,rgba(0,0,0,.58) 72%,rgba(0,0,0,.18) 84%,transparent 96%);
}
.ng-product-story .ng-story-shade{
  background:linear-gradient(90deg,transparent 0%,transparent 48%,rgba(243,241,235,.10) 58%,rgba(243,241,235,.55) 72%,rgba(243,241,235,.93) 88%,#f3f1eb 100%) !important;
}
.ng-product-story .ng-story-copy{
  width:min(570px,48%) !important; margin-left:auto !important;
  position:relative !important; z-index:4 !important;
}
/* Allow the dissolving edge of the product photograph to sit underneath the copy,
   rather than ending beside it. */
.ng-product-story .ng-story-copy:before{
  content:''; position:absolute; inset:-55px -35px -55px -120px; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(243,241,235,.18) 30%,rgba(243,241,235,.68) 64%,rgba(243,241,235,.94) 100%);
  filter:blur(10px);
}
@media(max-width:800px){
 .ng-product-story .ng-story-image{width:100% !important; background-position:center 8% !important; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 42%,rgba(0,0,0,.55) 60%,transparent 78%); mask-image:linear-gradient(180deg,#000 0%,#000 42%,rgba(0,0,0,.55) 60%,transparent 78%);}
 .ng-product-story .ng-story-shade{background:linear-gradient(180deg,transparent 0%,rgba(243,241,235,.08) 40%,rgba(243,241,235,.85) 68%,#f3f1eb 88%) !important;}
 .ng-product-story .ng-story-copy:before{display:none;}
}

/* ===== GLOBAL FOOTPRINT MAP — SECOND GLOBAL SECTION ===== */
.global-footprint{
  position:relative;
  padding:118px 0 124px;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 22%,rgba(91,171,143,.16),transparent 28%),
    radial-gradient(circle at 22% 78%,rgba(10,63,52,.08),transparent 26%),
    #f4f2ec;
  border-top:1px solid rgba(19,33,28,.08);
}
.global-footprint:before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(11,63,52,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,63,52,.035) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent);
  pointer-events:none;
}
.footprint-head{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:72px;
  align-items:end;
  margin-bottom:48px;
}
.footprint-head h2{
  margin:10px 0 0;
  font-size:clamp(50px,6vw,86px);
  line-height:.94;
  letter-spacing:-.05em;
}
.footprint-head h2 span{color:var(--forest)}
.footprint-copy{
  max-width:590px;
  justify-self:end;
}
.footprint-copy p{
  margin:0;
  color:#64716b;
  font-size:14px;
  line-height:1.8;
}
.footprint-key{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-top:20px;
}
.footprint-key span{
  display:flex;align-items:center;gap:8px;
  font-size:9px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:#65736d;
}
.footprint-key i{
  width:8px;height:8px;border-radius:50%;
  background:var(--forest);
  box-shadow:0 0 0 5px rgba(11,63,52,.09);
}

.footprint-card{
  position:relative;z-index:2;
  min-height:660px;
  border-radius:32px;
  overflow:hidden;
  background:linear-gradient(145deg,#0c3028,#10271f 72%,#081d17);
  box-shadow:0 34px 90px rgba(11,63,52,.17);
  border:1px solid rgba(255,255,255,.08);
}
.footprint-card:after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(115deg,rgba(255,255,255,.035),transparent 24%),
    radial-gradient(circle at 74% 48%,rgba(99,207,169,.09),transparent 34%);
  pointer-events:none;
}
.footprint-map{
  position:absolute;
  inset:34px 34px 108px;
}
.footprint-map svg{width:100%;height:100%;display:block}
.map-grid line{
  stroke:rgba(213,235,226,.075);
  stroke-width:1;
}
.continent{
  fill:rgba(206,230,220,.10);
  stroke:rgba(215,239,229,.15);
  stroke-width:1.3;
}
.continent-soft{fill:rgba(206,230,220,.065)}
.route{
  fill:none;
  stroke:rgba(111,218,181,.48);
  stroke-width:1.5;
  stroke-dasharray:7 8;
  animation:routeFlow 8s linear infinite;
}
.route.soft{stroke:rgba(111,218,181,.24)}
.market-dot .halo{
  fill:rgba(109,219,181,.13);
  transform-box:fill-box;
  transform-origin:center;
  animation:marketPulse 2.5s ease-out infinite;
}
.market-dot .core{fill:#a9e8cf;stroke:#eefbf6;stroke-width:1.3}
.market-dot.major .core{fill:#fff;stroke:#7ed5b6;stroke-width:2}
.market-label{
  fill:#f7fbf9;
  font-family:"Montserrat",Arial,sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.09em;
}
.market-sub{
  fill:#84a89a;
  font-family:"Montserrat",Arial,sans-serif;
  font-size:7px;
  font-weight:600;
  letter-spacing:.07em;
}
.london-ring{
  fill:none;
  stroke:#a9e8cf;
  stroke-width:1;
  opacity:.6;
  transform-box:fill-box;
  transform-origin:center;
  animation:londonRing 3s ease-out infinite;
}
.footprint-bottom{
  position:absolute;left:0;right:0;bottom:0;
  z-index:3;
  display:grid;
  grid-template-columns:1.1fr repeat(4,.45fr);
  border-top:1px solid rgba(255,255,255,.11);
  background:rgba(7,27,22,.78);
  backdrop-filter:blur(14px);
}
.footprint-bottom>div{
  min-height:88px;
  padding:19px 21px;
  border-right:1px solid rgba(255,255,255,.09);
  display:flex;flex-direction:column;justify-content:center;
}
.footprint-bottom>div:last-child{border-right:0}
.footprint-bottom .wide strong{
  color:white;font-size:15px;line-height:1.3;
}
.footprint-bottom strong{
  color:#dff5ec;
  font-size:25px;line-height:1;
}
.footprint-bottom span{
  margin-top:7px;
  color:#7fa397;
  font-size:8px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.footprint-market-list{
  position:absolute;left:34px;right:34px;bottom:115px;z-index:3;
  display:flex;gap:8px;flex-wrap:wrap;
}
.footprint-market-list span{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(187,229,213,.16);
  background:rgba(255,255,255,.045);
  color:#bcd7cd;
  font-size:7px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}

@keyframes routeFlow{to{stroke-dashoffset:-120}}
@keyframes marketPulse{
  0%{transform:scale(.55);opacity:.9}
  80%,100%{transform:scale(1.8);opacity:0}
}
@keyframes londonRing{
  0%{transform:scale(.55);opacity:.75}
  85%,100%{transform:scale(2.2);opacity:0}
}
@media(max-width:920px){
  .footprint-head{grid-template-columns:1fr;gap:24px}
  .footprint-copy{justify-self:start}
  .footprint-card{min-height:720px}
  .footprint-map{inset:26px 18px 178px}
  .footprint-bottom{grid-template-columns:1fr 1fr}
  .footprint-bottom .wide{grid-column:1/-1}
  .footprint-market-list{bottom:186px;left:20px;right:20px}
}
@media(max-width:620px){
  .global-footprint{padding:84px 0 90px}
  .footprint-card{min-height:790px;border-radius:24px}
  .footprint-map{inset:16px 8px 250px}
  .footprint-market-list{bottom:256px}
  .footprint-bottom{grid-template-columns:1fr 1fr}
  .footprint-bottom>div{min-height:78px;padding:14px 15px}
}


/* ===== NEW ATLAS MAP DESIGN ===== */
.atlas-footprint{background:#f2f0e9}
.atlas-card{
  position:relative;
  min-height:700px;
  border-radius:34px;
  overflow:hidden;
  background:#082b23;
  box-shadow:0 35px 100px rgba(7,39,31,.18);
  border:1px solid rgba(255,255,255,.08);
}
.atlas-glow{
  position:absolute;width:620px;height:620px;border-radius:50%;
  right:-160px;top:-220px;
  background:radial-gradient(circle,rgba(75,188,148,.20),rgba(75,188,148,0) 67%);
}
.atlas-topline{
  position:absolute;z-index:3;left:34px;right:34px;top:25px;
  display:flex;justify-content:space-between;
  color:#759c8d;font-size:8px;font-weight:700;letter-spacing:.15em;
}
.atlas-map{position:absolute;inset:58px 25px 120px}
.atlas-map svg{width:100%;height:100%;display:block}
.atlas-land path{
  fill:rgba(213,235,226,.075);
  stroke:rgba(210,236,225,.17);
  stroke-width:1.1;
}
.atlas-routes path{
  fill:none;stroke:rgba(108,218,179,.32);stroke-width:1.2;
  stroke-dasharray:4 8;
  animation:atlasDash 12s linear infinite;
}
.atlas-pin .point{fill:#b9efd9;stroke:white;stroke-width:1}
.atlas-pin.key .point,.atlas-pin.hq .point{fill:white;stroke:#7bdbb8;stroke-width:2}
.atlas-pin .pulse{
  fill:rgba(105,218,178,.09);
  transform-box:fill-box;transform-origin:center;
  animation:atlasPulse 2.8s ease-out infinite;
}
.atlas-pin .ring{fill:none;stroke:#a5e8cf;stroke-width:1.2}
.atlas-name{
  fill:#f7fcfa;font-family:"Montserrat",Arial,sans-serif;
  font-size:10px;font-weight:700;letter-spacing:.12em;
}
.atlas-small{
  fill:#789f91;font-family:"Montserrat",Arial,sans-serif;
  font-size:7px;font-weight:700;letter-spacing:.1em;
}
.atlas-rail{
  position:absolute;z-index:4;left:0;right:0;bottom:0;
  min-height:104px;
  display:grid;grid-template-columns:1.4fr repeat(3,.55fr);
  background:rgba(5,27,21,.86);
  backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.1);
}
.atlas-rail>div{
  padding:20px 25px;border-right:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;justify-content:center;
}
.atlas-rail>div:last-child{border-right:0}
.atlas-statement span,.atlas-stat span{
  color:#71998a;font-size:7px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
}
.atlas-statement strong{margin-top:7px;color:#f3faf7;font-size:17px;line-height:1.25}
.atlas-stat strong{color:#d9f3e9;font-size:28px;line-height:1}
.atlas-stat span{margin-top:8px}
.atlas-markets{
  display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:22px;
}
.atlas-markets span{
  padding:8px 12px;border:1px solid rgba(11,63,52,.12);border-radius:999px;
  color:#66736d;background:rgba(255,255,255,.52);
  font-size:7px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
@keyframes atlasDash{to{stroke-dashoffset:-120}}
@keyframes atlasPulse{
  0%{transform:scale(.45);opacity:.9}
  85%,100%{transform:scale(1.8);opacity:0}
}
@media(max-width:800px){
  .atlas-card{min-height:760px}
  .atlas-map{inset:70px 8px 220px}
  .atlas-rail{grid-template-columns:1fr 1fr}
  .atlas-statement{grid-column:1/-1}
}


/* ===== GLOBAL REACH — REFERENCE INSPIRED MAP ===== */
.global-reach-ref{
  position:relative;
  overflow:hidden;
  padding:92px 0 0;
  background:
    radial-gradient(circle at 50% 25%,rgba(33,112,82,.18),transparent 35%),
    radial-gradient(circle at 50% 92%,rgba(14,92,68,.20),transparent 42%),
    linear-gradient(180deg,#031c18 0%,#031612 72%,#02110e 100%);
  color:#fff;
}
.global-reach-ref:before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0%,rgba(69,165,125,.035) 50%,transparent 100%);
}
.gr-shell{width:min(1500px,96%);margin:0 auto;position:relative;z-index:2}
.gr-head{text-align:left;max-width:820px;margin:0 auto 16px}
.gr-kicker{font-size:28px;font-weight:700;letter-spacing:.18em;color:#fff}
.gr-head h2{
  margin:4px 0 8px;
  font-size:clamp(54px,6vw,92px);
  letter-spacing:.02em;
  line-height:.95;
  color:#69bf8b;
  text-shadow:0 0 30px rgba(74,185,133,.12);
}
.gr-head p{
  max-width:650px;margin:0 auto;
  font-size:15px;line-height:1.55;color:#dfe9e5;
}
.gr-line{display:block;width:58px;height:1px;margin:18px auto 0;background:#79c698}
.gr-map-wrap{margin-top:-8px}
.gr-map{display:block;width:100%;height:auto;min-height:560px}
.gr-land path{
  fill:url(#landGrad);
  stroke:#90c8a6;
  stroke-width:.9;
  vector-effect:non-scaling-stroke;
  opacity:.78;
}
.gr-borders path{
  fill:none;stroke:rgba(183,222,198,.42);stroke-width:.65;
  vector-effect:non-scaling-stroke;
}
.gr-routes path{
  fill:none;stroke:#6dd09a;stroke-width:1.05;
  stroke-dasharray:4 8;opacity:.42;
  animation:grRoute 8s linear infinite;
}
.gr-market .leader{
  fill:none;stroke:#84d4a5;stroke-width:1.2;
  vector-effect:non-scaling-stroke;
}
.gr-market .pill{
  fill:rgba(3,28,23,.85);
  stroke:#77c997;stroke-width:1;
}
.gr-market .pilltxt{
  fill:#f6fbf8;
  font-family:"Montserrat",Arial,sans-serif;
  font-size:10px;font-weight:700;letter-spacing:.04em;
}
.gr-market .dot{fill:#9be0b6;stroke:#c9f2d7;stroke-width:1.2;filter:url(#grGlow)}
.gr-market.key .dot,.gr-market.gr-hq .dot{fill:#d8f8e4}
.gr-market .pulse{
  fill:rgba(110,212,154,.16);
  transform-box:fill-box;transform-origin:center;
  animation:grPulse 2.7s ease-out infinite;
}
.gr-values{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid rgba(125,202,157,.20);
  margin-top:-18px;
  padding:27px 0 34px;
}
.gr-value{
  display:grid;grid-template-columns:56px 1fr;gap:17px;
  align-items:center;padding:0 24px;
  border-right:1px solid rgba(125,202,157,.28);
}
.gr-value:last-child{border-right:0}
.gr-icon svg{
  width:46px;height:46px;fill:none;stroke:#71c794;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.gr-value strong{
  display:block;color:#76ca98;font-size:11px;
  letter-spacing:.08em;margin-bottom:7px;
}
.gr-value span{
  display:block;color:#d7e2dd;font-size:10px;line-height:1.5;
}
@keyframes grPulse{
  0%{transform:scale(.45);opacity:.9}
  85%,100%{transform:scale(1.85);opacity:0}
}
@keyframes grRoute{to{stroke-dashoffset:-96}}
@media(max-width:1000px){
  .gr-values{grid-template-columns:1fr 1fr}
  .gr-value{padding:20px 22px;border-bottom:1px solid rgba(125,202,157,.18)}
  .gr-map{min-width:950px;width:120%;transform:translateX(-8%)}
  .gr-map-wrap{overflow:hidden}
}
@media(max-width:650px){
  .global-reach-ref{padding-top:68px}
  .gr-kicker{font-size:19px}
  .gr-head h2{font-size:48px}
  .gr-head p{font-size:12px;padding:0 18px}
  .gr-map{min-width:1050px;width:170%;transform:translateX(-21%)}
  .gr-values{grid-template-columns:1fr}
  .gr-value{border-right:0}
}


/* ===== GLOBAL ORBIT DESIGN — COMPLETELY DIFFERENT ===== */
.global-orbit{
  position:relative;
  padding:118px 0 126px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 48%,rgba(38,117,88,.09),transparent 28%),
    linear-gradient(180deg,#f4f1ea 0%,#ece8df 100%);
}
.orbit-head{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:70px;
  align-items:end;
  margin-bottom:50px;
}
.orbit-head h2{
  margin:10px 0 0;
  font-size:clamp(54px,6vw,86px);
  line-height:.95;
  letter-spacing:-.05em;
}
.orbit-head h2 span{color:var(--forest)}
.orbit-head p{
  margin:0;
  color:#67736d;
  font-size:14px;
  line-height:1.8;
  max-width:580px;
  justify-self:end;
}
.orbit-stage{
  position:relative;
  min-height:760px;
  border-radius:36px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 45%,rgba(83,176,137,.14),transparent 34%),
    linear-gradient(145deg,#0a2d25 0%,#071f1a 58%,#051512 100%);
  box-shadow:0 38px 100px rgba(8,46,36,.19);
  border:1px solid rgba(255,255,255,.08);
}
.orbit-stage:before{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:48px 48px;
  opacity:.5;
}
.orbit-glow{
  position:absolute;
  width:520px;height:520px;border-radius:50%;
  left:50%;top:46%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(95,213,166,.18),transparent 64%);
  filter:blur(18px);
}
.orbit-globe{
  position:absolute;
  width:430px;height:430px;
  left:50%;top:43%;
  transform:translate(-50%,-50%);
}
.globe-core{
  position:absolute;inset:52px;
  border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.18),transparent 18%),
    radial-gradient(circle at 50% 55%,#1e6b52 0%,#124737 54%,#0b3027 100%);
  box-shadow:
    inset -35px -24px 55px rgba(1,14,11,.45),
    inset 18px 14px 28px rgba(255,255,255,.06),
    0 0 0 1px rgba(174,235,209,.17),
    0 0 70px rgba(82,202,152,.15);
}
.globe-grid{
  position:absolute;inset:-8%;
  border-radius:50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,transparent 0 27px,rgba(172,232,207,.13) 28px 29px),
    repeating-linear-gradient(90deg,transparent 0 44px,rgba(172,232,207,.10) 45px 46px);
  opacity:.45;
}
.globe-land{
  position:absolute;
  background:#7ab69b;
  opacity:.48;
  filter:drop-shadow(0 0 5px rgba(137,224,187,.12));
}
.land-a{
  width:96px;height:68px;left:50px;top:74px;
  border-radius:50% 40% 45% 55%;
  transform:rotate(-14deg);
  clip-path:polygon(2% 32%,18% 10%,51% 0,82% 18%,100% 44%,79% 66%,62% 100%,34% 85%,12% 71%);
}
.land-b{
  width:62px;height:112px;left:118px;top:135px;
  border-radius:45% 55% 60% 40%;
  transform:rotate(18deg);
  clip-path:polygon(35% 0,70% 12%,100% 40%,78% 72%,48% 100%,20% 85%,0 52%,15% 22%);
}
.land-c{
  width:135px;height:80px;right:39px;top:75px;
  border-radius:45% 55% 40% 60%;
  transform:rotate(9deg);
  clip-path:polygon(0 30%,18% 8%,46% 0,66% 17%,100% 20%,91% 54%,70% 66%,55% 100%,27% 79%,8% 63%);
}
.land-d{
  width:58px;height:42px;right:58px;bottom:62px;
  border-radius:50%;
  transform:rotate(12deg);
}
.globe-shine{
  position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,.12),transparent 32%,transparent 65%,rgba(0,0,0,.17));
  border-radius:50%;
}
.orbit{
  position:absolute;
  border:1px solid rgba(138,222,187,.22);
  border-radius:50%;
  left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(-14deg);
}
.orbit-1{width:410px;height:178px}
.orbit-2{width:430px;height:255px;transform:translate(-50%,-50%) rotate(21deg)}
.orbit-3{width:366px;height:368px;transform:translate(-50%,-50%) rotate(72deg)}
.hub{
  position:absolute;
  display:flex;align-items:center;gap:7px;
  color:#cde8dd;
  font-size:8px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.hub span{
  width:8px;height:8px;border-radius:50%;
  background:#b6efd7;
  box-shadow:0 0 0 6px rgba(117,217,176,.10),0 0 16px rgba(117,217,176,.45);
}
.hub b{font-weight:700}
.hub-london{left:206px;top:113px;color:#fff}
.hub-us{left:13px;top:190px}
.hub-eu{right:17px;top:154px}
.hub-morocco{left:72px;bottom:98px}
.hub-algeria{left:121px;bottom:55px}
.hub-libya{left:183px;bottom:30px}
.hub-iraq{right:75px;top:226px}
.hub-jordan{right:37px;top:263px}
.hub-lebanon{right:49px;top:194px}
.hub-bahrain{right:22px;bottom:102px}
.hub-yemen{right:90px;bottom:55px}
.orbit-side{
  position:absolute;top:50%;
  transform:translateY(-50%);
  display:flex;flex-direction:column;gap:18px;
  width:255px;
}
.orbit-left{left:38px}
.orbit-right{right:38px}
.orbit-card{
  padding:22px 22px 21px;
  border-radius:18px;
  border:1px solid rgba(185,231,212,.11);
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(12px);
}
.orbit-card small{
  display:block;
  color:#6ea48f;
  font-size:7px;font-weight:700;letter-spacing:.14em;
  margin-bottom:8px;
}
.orbit-card strong{
  display:block;color:#eef8f4;
  font-size:15px;line-height:1.25;
}
.orbit-card span{
  display:block;color:#86a89b;
  font-size:9px;line-height:1.5;margin-top:7px;
}
.orbit-footer{
  position:absolute;left:0;right:0;bottom:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  min-height:104px;
  background:rgba(3,18,14,.78);
  backdrop-filter:blur(18px);
  border-top:1px solid rgba(255,255,255,.08);
}
.orbit-footer div{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  border-right:1px solid rgba(255,255,255,.07);
}
.orbit-footer div:last-child{border-right:0}
.orbit-footer strong{color:#d9f3e8;font-size:28px;line-height:1}
.orbit-footer span{
  margin-top:8px;color:#6f9486;
  font-size:7px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
}
@media(max-width:980px){
  .orbit-head{grid-template-columns:1fr;gap:24px}
  .orbit-head p{justify-self:start}
  .orbit-stage{min-height:920px}
  .orbit-globe{top:38%}
  .orbit-side{top:auto;bottom:130px;width:calc(50% - 52px);transform:none}
  .orbit-left{left:34px}.orbit-right{right:34px}
}
@media(max-width:680px){
  .global-orbit{padding:84px 0 90px}
  .orbit-stage{min-height:1080px;border-radius:26px}
  .orbit-globe{width:340px;height:340px;top:31%}
  .globe-core{inset:46px}
  .orbit-1{width:330px}.orbit-2{width:340px}.orbit-3{width:300px;height:300px}
  .orbit-side{width:auto;left:22px!important;right:22px!important}
  .orbit-left{bottom:310px}.orbit-right{bottom:158px}
  .orbit-footer{grid-template-columns:1fr 1fr}
}
.global-map-v2{padding:118px 0 126px;background:#f4f2ec}.gm2-head{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:end;margin-bottom:46px}.gm2-head h2{margin:10px 0 0;font-size:clamp(54px,6vw,88px);line-height:.95;letter-spacing:-.05em}.gm2-head h2 span{color:var(--forest)}.gm2-head p{margin:0;max-width:570px;justify-self:end;color:#65716b;font-size:14px;line-height:1.8}.gm2-panel{overflow:hidden;border-radius:34px;background:#0a2a23;box-shadow:0 34px 90px rgba(8,43,34,.18)}.gm2-map svg{display:block;width:100%;height:auto}.gm2-grid path{fill:none;stroke:rgba(181,221,202,.07);stroke-width:1;stroke-dasharray:2 10}.gm2-land path{fill:#2f6d55;stroke:#8bc3a6;stroke-width:1;opacity:.88}.gm2-routes path{fill:none;stroke:#7ccfa8;stroke-width:1.2;stroke-dasharray:5 9;opacity:.35;animation:gmroute 10s linear infinite}.gm2-pin>circle:first-child{fill:rgba(124,207,168,.12);animation:gmpulse 2.7s ease-out infinite;transform-box:fill-box;transform-origin:center}.gm2-pin .core{fill:#bff2d7;stroke:#fff;stroke-width:1.2}.gm2-pin text{fill:#eef9f4;font-family:Montserrat,Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:.05em}.gm2-bottom{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.09);background:#071d18}.gm2-bottom div{padding:22px 24px;border-right:1px solid rgba(255,255,255,.08)}.gm2-bottom div:last-child{border-right:0}.gm2-bottom strong{display:block;color:#dff6ea;font-size:11px;margin-bottom:6px}.gm2-bottom span{color:#789b8d;font-size:8px}@keyframes gmroute{to{stroke-dashoffset:-120}}@keyframes gmpulse{0%{transform:scale(.5);opacity:.9}85%,100%{transform:scale(1.8);opacity:0}}@media(max-width:900px){.gm2-head{grid-template-columns:1fr;gap:22px}.gm2-head p{justify-self:start}.gm2-map{overflow:hidden}.gm2-map svg{min-width:1100px;width:135%;transform:translateX(-12%)}.gm2-bottom{grid-template-columns:1fr 1fr}}@media(max-width:620px){.global-map-v2{padding:84px 0 90px}.gm2-panel{border-radius:24px}.gm2-map svg{min-width:1180px;width:190%;transform:translateX(-23%)}.gm2-bottom{grid-template-columns:1fr}}
/* Team layout correction: preserve the original compact card sizing */
.leadership-team-grid{
  grid-template-columns:repeat(4,1fr) !important;
  gap:18px !important;
}
.leadership-team-grid .team-photo{
  aspect-ratio:1.22 !important;
  border-radius:2px !important;
  box-shadow:none !important;
}
.leadership-team-grid .team-info{padding-top:11px !important}
.leadership-team-grid .team-info h3{font-size:13px !important}
.leadership-team-grid .team-info span{
  font-size:9px !important;
  line-height:1.4 !important;
}
@media(max-width:1180px){.leadership-team-grid{grid-template-columns:repeat(4,1fr) !important}}
@media(max-width:900px){.leadership-team-grid{grid-template-columns:repeat(2,1fr) !important}}
@media(max-width:640px){.leadership-team-grid{grid-template-columns:repeat(2,1fr) !important;gap:18px 12px !important}}
/* 03 / Leadership Team — exact same image/card size as Our Team */
.leadership-team-grid{
  grid-template-columns:repeat(5,1fr) !important;
  gap:18px !important;
}
.leadership-team-grid .team-photo{
  aspect-ratio:1.22 !important;
  border-radius:2px !important;
  box-shadow:none !important;
}
.leadership-team-grid .team-info{
  padding-top:11px !important;
}
.leadership-team-grid .team-info h3{
  font-size:13px !important;
}
.leadership-team-grid .team-info span{
  font-size:9px !important;
  line-height:1.4 !important;
}
@media(max-width:1180px){
  .leadership-team-grid{grid-template-columns:repeat(4,1fr) !important}
}
@media(max-width:900px){
  .leadership-team-grid{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:640px){
  .leadership-team-grid{grid-template-columns:repeat(2,1fr) !important;gap:18px 12px !important}
}
/* Leadership cards use the exact same sizing rules as Our Team */
#leadership-team .leadership-team-grid,
#leadership-team .team-tiles {
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0,1fr)) !important;
  gap:18px !important;
}
#leadership-team .team-tile,
#leadership-team .team-card {
  width:auto !important;
  max-width:none !important;
  transform:none !important;
}
#leadership-team .team-photo {
  width:100% !important;
  aspect-ratio:1.22 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
}
#leadership-team .team-photo img {
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
@media(max-width:1180px){
  #leadership-team .leadership-team-grid,
  #leadership-team .team-tiles {grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
}
@media(max-width:900px){
  #leadership-team .leadership-team-grid,
  #leadership-team .team-tiles {grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
/* 03 / Leadership Team: match 03B / Our Team card + image dimensions exactly */
#leadership-team .leadership-team-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
    width: 100% !important;
}
#leadership-team .team-tile {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
#leadership-team .team-photo {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
}
#leadership-team .team-photo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
@media (max-width: 900px) {
    #leadership-team .leadership-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 520px) {
    #leadership-team .leadership-team-grid {
        grid-template-columns: 1fr !important;
    }
}
nav .nav-custom-logo{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  padding:0 !important;
}
nav .nav-custom-logo img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:contain !important;
}
nav .nav-custom-logo{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  padding:0 !important;
}
nav .nav-custom-logo img{
  width:62% !important;
  height:62% !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:auto !important;
  filter:invert(1) brightness(2) !important;
}
    .compliance-certification-section{
      background:#f4f0e7;
      color:#073c32;
      padding:110px 6vw;
      font-family:inherit;
    }
    .compliance-certification-inner{max-width:1440px;margin:0 auto;}
    .compliance-eyebrow{
      display:flex;align-items:center;gap:18px;
      font-size:12px;letter-spacing:.18em;text-transform:uppercase;
      font-weight:700;margin-bottom:26px;
    }
    .compliance-eyebrow:before{content:"";width:58px;height:2px;background:#11caa1;}
    .compliance-header{
      display:grid;grid-template-columns:1.15fr .85fr;gap:70px;
      align-items:end;margin-bottom:55px;
    }
    .compliance-header h2{
      margin:0;font-size:clamp(48px,6vw,92px);line-height:.94;
      letter-spacing:-.055em;font-weight:600;
    }
    .compliance-header h2 span{color:#0abf98;}
    .compliance-header p{
      margin:0 0 8px;font-size:18px;line-height:1.65;color:#315c53;max-width:620px;
    }
    .compliance-grid{
      display:grid;grid-template-columns:1.15fr .85fr;gap:22px;
    }
    .compliance-main{
      min-height:430px;border-radius:28px;padding:48px;
      background:linear-gradient(135deg,#043f34,#002c25);
      color:#fff;position:relative;overflow:hidden;
      display:flex;flex-direction:column;justify-content:flex-end;
    }
    .compliance-main:after{
      content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(21,204,163,.35);
      border-radius:50%;right:-120px;top:-140px;box-shadow:0 0 0 70px rgba(21,204,163,.035);
    }
    .compliance-main .number{position:absolute;top:34px;right:40px;color:#15cca3;font-size:78px;font-weight:300;}
    .compliance-main h3{font-size:38px;line-height:1.05;margin:0 0 18px;max-width:600px;}
    .compliance-main p{font-size:16px;line-height:1.7;color:#c6ddd7;max-width:660px;margin:0;}
    .compliance-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
    .compliance-card{
      background:#fff;border:1px solid rgba(5,78,65,.12);border-radius:24px;
      padding:30px;min-height:202px;display:flex;flex-direction:column;justify-content:space-between;
    }
    .compliance-icon{
      width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
      border:1px solid #10c49d;color:#08765f;font-size:21px;font-weight:700;
    }
    .compliance-card h4{font-size:20px;margin:24px 0 8px;}
    .compliance-card p{font-size:14px;line-height:1.55;color:#57736d;margin:0;}
    @media(max-width:900px){
      .compliance-header,.compliance-grid{grid-template-columns:1fr;}
      .compliance-cards{grid-template-columns:1fr 1fr;}
      /* The single-column collapse above still leaves grid-template-areas
         requesting two column tracks ("media cards" in one row) against a
         template that now only defines one - the browser had nowhere to put
         the second named area and rendered it as a stray, near-zero-width
         column, squashing the video to invisibility. Restack explicitly:
         video full width, then cards. */
      .compliance-grid{
        grid-template-areas:"media" "cards" !important;
        row-gap:24px !important;
      }
      .compliance-cards,
      .compliance-card{
        height:auto !important;
      }
    }
    @media(max-width:620px){
      .compliance-certification-section{padding:75px 22px;}
      .compliance-cards{grid-template-columns:1fr;}
      .compliance-main{padding:32px;min-height:390px;}
      /* Extra top clearance so the centred video badge (fixed near the
         panel's top edge) never overlaps the heading below it — see the
         .compliance-video-badge-wrap rule for why it can't just flow
         in-line. Smaller heading too: at 38px on a narrow phone it wraps to
         3 lines and eats most of the panel. */
      .compliance-main{padding-top:66px;}
      .compliance-main h3{font-size:26px;line-height:1.18;margin:0 0 12px;}
    }
  
    .knowledge-hub-section{
      background:#f5f1e8;
      color:#0a3e33;
      padding:112px 0 124px;
      font-family:inherit;
      position:relative;
      overflow:hidden;
    }
    .knowledge-hub-section:before{
      content:"KNOWLEDGE";
      position:absolute;
      right:-34px;
      top:72px;
      font-size:clamp(100px,13vw,210px);
      font-weight:800;
      letter-spacing:-.07em;
      color:rgba(7,63,51,.028);
      pointer-events:none;
    }
    /* Width/centring come from .wrap in the markup (same pattern as
       .quality-inner) so this page shares the site keyline. */
    .knowledge-hub-inner{position:relative;z-index:1;}
    .knowledge-top{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:72px;
      align-items:end;
      margin-bottom:54px;
    }
    .knowledge-top h2 span{color:#0abf98;}
    .knowledge-intro{
      max-width:610px;
      justify-self:end;
    }
    .knowledge-intro p{
      margin:0;
      font-size:17px;
      line-height:1.7;
      color:#4d6f67;
    }
    .knowledge-intro a{
      display:inline-flex;
      align-items:center;
      gap:18px;
      margin-top:24px;
      padding-bottom:8px;
      border-bottom:1px solid rgba(7,63,51,.25);
      color:#0a3e33;
      text-decoration:none;
      text-transform:uppercase;
      letter-spacing:.08em;
      font-size:10px;
      font-weight:700;
    }
    .knowledge-feature{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      min-height:490px;
      border-radius:30px;
      overflow:hidden;
      background:#073e33;
      margin-bottom:30px;
      box-shadow:0 26px 70px rgba(4,48,39,.12);
    }
    .knowledge-feature-visual{
      position:relative;
      background:
        radial-gradient(circle at 72% 35%,rgba(35,199,160,.22),transparent 30%),
        linear-gradient(145deg,#155646,#082f27 70%);
      min-height:490px;
      padding:46px;
      display:flex;
      align-items:flex-end;
    }
    .knowledge-feature-visual:before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
      background-size:42px 42px;
      mask-image:linear-gradient(to right,black,transparent 92%);
    }
    .knowledge-feature-visual .issue{
      position:relative;
      z-index:2;
      color:white;
    }
    .knowledge-feature-visual .issue span{
      display:block;
      color:#7bd7bb;
      font-size:10px;
      font-weight:700;
      letter-spacing:.15em;
      margin-bottom:18px;
    }
    .knowledge-feature-visual .issue strong{
      display:block;
      font-size:clamp(46px,5vw,78px);
      line-height:.94;
      letter-spacing:-.05em;
      max-width:540px;
    }
    .knowledge-feature-copy{
      padding:52px 50px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      color:white;
    }
    .knowledge-feature-copy .meta{
      color:#75cdb3;
      font-size:10px;
      font-weight:700;
      letter-spacing:.13em;
      text-transform:uppercase;
    }
    .knowledge-feature-copy h3{
      margin:18px 0 18px;
      font-size:clamp(32px,3.2vw,50px);
      line-height:1.02;
      letter-spacing:-.04em;
    }
    .knowledge-feature-copy p{
      margin:0;
      color:#bfd3cd;
      font-size:14px;
      line-height:1.7;
    }
    .knowledge-feature-btn{
      display:inline-flex;
      justify-content:space-between;
      align-items:center;
      width:fit-content;
      min-width:260px;
      margin-top:34px;
      padding:16px 24px;
      border:1px solid rgba(255,255,255,0.15);
      border-radius:999px;
      background:rgba(255,255,255,0.08);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
      color:#ffffff;
      text-decoration:none;
      text-transform:uppercase;
      letter-spacing:.1em;
      font-size:11px;
      font-weight:700;
      transition:all .3s cubic-bezier(.2,.8,.2,1);
      box-shadow:0 4px 24px rgba(0,0,0,0.1);
    }
    .knowledge-feature-btn:hover{
      background:rgba(255,255,255,0.15);
      border-color:rgba(255,255,255,0.3);
      transform:translateY(-2px);
      box-shadow:0 8px 32px rgba(0,0,0,0.25);
    }
    .knowledge-feature-btn .arrow{
      transition:transform .3s cubic-bezier(.2,.8,.2,1);
    }
    .knowledge-feature-btn:hover .arrow{
      transform:translateX(5px);
    }
    /* Quick facts row — .knowledge-feature-copy centers its (fairly short)
       content inside a tall 490px-min card, which was leaving a big flat gap
       under the copy. This adds real, already-established numbers (edition
       count, start year, cadence) to fill that space usefully instead of
       padding it out artificially. */
    .knowledge-feature-stats{
      display:flex;
      gap:30px;
      margin-top:28px;
      padding-top:22px;
      border-top:1px solid rgba(255,255,255,.16);
    }
    .knowledge-feature-stats div{display:flex;flex-direction:column;gap:5px}
    .knowledge-feature-stats strong{
      font-size:24px;
      line-height:1;
      color:#fff;
      letter-spacing:-.02em;
    }
    .knowledge-feature-stats span{
      font-size:9px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.1em;
      color:#8fc2b2;
    }
    /* Media page: local Newgate Health magazine covers and PDF reader. */
    .magazine-block{
      margin-top:56px;
    }
    .magazine-block-head{
      display:flex;
      justify-content:space-between;
      align-items:baseline;
      gap:24px;
      margin-bottom:26px;
      padding-bottom:16px;
      border-bottom:1px solid rgba(8,65,53,.14);
    }
    .magazine-block-head h3{
      margin:0;
      font-size:clamp(26px,2.6vw,36px);
      line-height:1.05;
      letter-spacing:-.035em;
      color:#143e34;
    }
    .magazine-block-head span{
      color:#667d76;
      font-size:11px;
      font-weight:700;
      letter-spacing:.09em;
      text-transform:uppercase;
      white-space:nowrap;
    }
    .magazine-grid{
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:22px;
    }
    .magazine-grid-other{
      grid-template-columns:repeat(5,1fr);
    }
    .magazine-card{
      display:flex;
      flex-direction:column;
      gap:12px;
      text-decoration:none;
      transition:transform .35s ease;
    }
    .magazine-card-cover{
      display:block;
      aspect-ratio:347/480;
      overflow:hidden;
      border-radius:10px;
      background:#e4e9e5;
      box-shadow:0 10px 26px rgba(9,62,51,.10);
      transition:box-shadow .35s ease;
    }
    .magazine-card-cover img{
      display:block;
      width:100%;
      height:100%;
      object-fit:contain;
      transition:transform .55s cubic-bezier(.2,.75,.2,1);
    }
    .magazine-card-label{
      color:#143e34;
      font-size:12px;
      font-weight:700;
      letter-spacing:.02em;
    }
    .magazine-card:hover{
      transform:translateY(-6px);
    }
    .magazine-card:hover .magazine-card-cover{
      box-shadow:0 20px 44px rgba(9,62,51,.18);
    }
    .magazine-card:hover .magazine-card-cover img{
      transform:scale(1.04);
    }
    .knowledge-footer-line{
      margin-top:35px;
      padding-top:22px;
      border-top:1px solid rgba(8,65,53,.15);
      display:flex;
      justify-content:space-between;
      gap:28px;
      color:#667d76;
      font-size:12px;
    }
    @media(max-width:1180px){
      .magazine-grid,.magazine-grid-other{grid-template-columns:repeat(4,1fr);}
    }
    @media(max-width:920px){
      .knowledge-top,.knowledge-feature{grid-template-columns:1fr;}
      .knowledge-intro{justify-self:start;}
      .magazine-grid,.magazine-grid-other{grid-template-columns:repeat(3,1fr);}
    }
    @media(max-width:620px){
      .knowledge-hub-section{padding:78px 0 90px;}
      .magazine-grid,.magazine-grid-other{grid-template-columns:repeat(2,1fr);gap:16px;}
      .magazine-block-head{flex-direction:column;align-items:flex-start;gap:8px;}
      .magazine-block-head span{white-space:normal;}
      .knowledge-feature-copy{padding:38px 28px;}
      .knowledge-feature-visual{min-height:360px;padding:28px;}
      .knowledge-footer-line{flex-direction:column;}
    }

    /* Media page: self-hosted PDF flipbook reader. */
    .magazine-lightbox{
      position:fixed;
      inset:0;
      z-index:9999;
      display:grid;
      place-items:center;
      padding:28px;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity .28s ease,visibility .28s ease;
    }
    .magazine-lightbox.is-open{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
    }
    .magazine-lightbox-backdrop{
      position:absolute;
      inset:0;
      background:rgba(5,26,21,.8);
      backdrop-filter:blur(14px);
    }
    .magazine-lightbox-dialog{
      position:relative;
      z-index:2;
      width:min(1320px,96vw);
      max-height:calc(100vh - 32px);
      overflow:hidden;
      border:1px solid rgba(255,255,255,.12);
      border-radius:24px;
      background:#0a3327;
      box-shadow:0 40px 120px rgba(0,0,0,.35);
      transform:translateY(22px) scale(.985);
      transition:transform .36s cubic-bezier(.2,.8,.2,1);
      display:flex;
      flex-direction:column;
    }
    .magazine-lightbox.is-focused{
      padding:0;
    }
    .magazine-lightbox.is-focused .magazine-lightbox-dialog,
    .magazine-lightbox-dialog:fullscreen{
      width:100vw;
      height:100dvh;
      max-height:none;
      border-radius:0;
      border:0;
      background:#061d18;
      box-shadow:none;
    }
    .magazine-lightbox.is-open .magazine-lightbox-dialog{
      transform:none;
    }
    .magazine-lightbox-close{
      position:absolute;
      top:18px;
      right:18px;
      z-index:8;
      width:38px;
      height:38px;
      border:0;
      border-radius:50%;
      background:rgba(255,255,255,.14);
      color:#fff;
      font-size:23px;
      line-height:1;
      cursor:pointer;
      backdrop-filter:blur(10px);
      transition:.25s ease;
    }
    .magazine-lightbox-close:hover{
      background:rgba(255,255,255,.26);
      transform:rotate(8deg) scale(1.06);
    }
    .magazine-lightbox-toolbar{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:18px;
      padding:20px 72px 16px 26px;
      color:#fff;
      border-bottom:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.04);
    }
    .magazine-lightbox-meta{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:5px;
      min-width:0;
    }
    .magazine-lightbox-title{
      color:#fff;
      font-size:13px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .magazine-lightbox-page{
      color:#bfd3cd;
      font-size:12px;
      font-weight:600;
    }
    .magazine-lightbox-controls{
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:8px;
      flex-wrap:wrap;
    }
    .magazine-lightbox-controls button{
      width:36px;
      height:36px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:50%;
      background:rgba(255,255,255,.1);
      color:#fff;
      font-size:17px;
      font-weight:800;
      line-height:1;
      cursor:pointer;
      backdrop-filter:blur(12px);
      transition:background .2s ease,transform .2s ease,border-color .2s ease;
    }
    .magazine-lightbox-controls button[data-magazine-focus]{
      font-size:15px;
    }
    .magazine-lightbox-controls button:hover{
      transform:translateY(-1px);
      background:rgba(255,255,255,.2);
      border-color:rgba(255,255,255,.28);
    }
    .magazine-lightbox-frame-wrap{
      position:relative;
      height:min(72vh,830px);
      min-height:420px;
      flex:1 1 auto;
      overflow:hidden;
      background:#08251c;
      display:grid;
      place-items:center;
    }
    .magazine-flipbook-viewport{
      position:relative;
      z-index:1;
      width:100%;
      height:100%;
      overflow:hidden;
      display:grid;
      place-items:center;
      padding:22px 28px;
      background:
        radial-gradient(circle at 20% 18%,rgba(27,201,162,.16),transparent 34%),
        linear-gradient(135deg,#092c23 0%,#061d18 58%,#03100d 100%);
    }
    .magazine-flipbook-shell{
      --magazine-reader-zoom:1;
      transform:scale(var(--magazine-reader-zoom)) translateX(0);
      transform-origin:center;
      transition:transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      display:grid;
      place-items:center;
    }
    .magazine-flipbook-shell.is-cover-view{
      transform:scale(var(--magazine-reader-zoom)) translateX(-25%);
    }
    .magazine-flipbook{
      width: 100%;
      height: 100%;
      margin: 0;
    }
    .magazine-lightbox.is-focused .magazine-lightbox-frame-wrap{
      height:auto;
      min-height:0;
    }
    .magazine-lightbox.is-focused .magazine-flipbook-viewport,
    .magazine-lightbox-dialog:fullscreen .magazine-flipbook-viewport{
      padding:18px 34px;
    }
    .magazine-flipbook .page{
      box-shadow:0 18px 42px rgba(0,0,0,.22);
      background:transparent;
    }
    .magazine-flipbook img{
      width:100%;
      height:100%;
      object-fit:contain;
    }
    .magazine-lightbox-loading{
      position:absolute;
      inset:0;
      z-index:2;
      display:grid;
      place-items:center;
      overflow:hidden;
      opacity:1;
      transition:opacity .5s ease;
      text-align:center;
      color:#fff;
    }
    .magazine-lightbox.is-loaded .magazine-lightbox-loading{
      opacity:0;
      pointer-events:none;
    }
    .magazine-lightbox-loading-cover{
      position:absolute;
      inset:-20px;
      width:calc(100% + 40px);
      height:calc(100% + 40px);
      object-fit:cover;
      filter:blur(22px) brightness(.5) saturate(1.1);
      transform:scale(1.06);
      transition:transform .7s cubic-bezier(.2,.8,.2,1);
    }
    .magazine-lightbox.is-open .magazine-lightbox-loading-cover{
      transform:scale(1.12);
    }
    .magazine-lightbox-spinner{
      position:relative;
      z-index:1;
      width:34px;
      height:34px;
      border-radius:50%;
      border:2px solid rgba(255,255,255,.28);
      border-top-color:#fff;
      animation:magazine-spin .8s linear infinite;
    }
    @keyframes magazine-spin{
      to{transform:rotate(360deg);}
    }
    .magazine-lightbox-progress{
      position:relative;
      z-index:1;
      margin-top:68px;
      color:#d8ebe6;
      font-size:12px;
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .magazine-lightbox.has-error .magazine-lightbox-spinner{
      display:none;
    }
    .magazine-thumbnail-strip{
      display:flex;
      align-items:flex-start;
      gap:10px;
      overflow-x:auto;
      padding:14px 22px;
      background:rgba(0,0,0,.16);
      border-top:1px solid rgba(255,255,255,.08);
      scrollbar-color:rgba(255,255,255,.28) transparent;
    }
    .magazine-thumbnail-strip:empty{
      display:none;
    }
    .magazine-thumbnail-strip button{
      width:54px;
      flex:0 0 auto;
      padding:0;
      border:1px solid rgba(255,255,255,.12);
      border-radius:7px;
      overflow:hidden;
      background:rgba(255,255,255,.07);
      color:#d9f0e8;
      cursor:pointer;
      opacity:.68;
      transition:opacity .2s ease,transform .2s ease,border-color .2s ease;
    }
    .magazine-thumbnail-strip button:hover,
    .magazine-thumbnail-strip button.is-active{
      opacity:1;
      transform:translateY(-2px);
      border-color:#22d2ad;
    }
    .magazine-thumbnail-strip img{
      display:block;
      width:100%;
      aspect-ratio:347/480;
      object-fit:cover;
      background:#fff;
    }
    .magazine-thumbnail-strip span{
      display:block;
      padding:5px 0 6px;
      font-size:9px;
      font-weight:800;
      letter-spacing:.04em;
    }
    .magazine-lightbox-footer{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:20px;
      padding:18px 26px;
      color:#bfd3cd;
      border-top:1px solid rgba(255,255,255,.1);
    }
    .magazine-lightbox-hint{
      max-width:70ch;
      font-size:12px;
      line-height:1.5;
      color:#bfd3cd;
    }
    .magazine-lightbox-openlink{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:#7bd7bb;
      text-decoration:none;
      text-transform:uppercase;
      letter-spacing:.08em;
      font-size:10px;
      font-weight:700;
      white-space:nowrap;
    }
    .magazine-lightbox-openlink:hover{
      color:#dbf7ee;
    }
    .magazine-lightbox[inert]{pointer-events:none;}
    .magazine-lightbox.is-opening,
    .magazine-lightbox.is-opening *{transition-property:opacity !important;}
    @media(max-width:760px){
      .magazine-lightbox{padding:14px;}
      .magazine-lightbox-dialog{max-height:calc(100vh - 28px);}
      .magazine-lightbox-toolbar{
        padding:18px 60px 14px 18px;
        flex-direction:column;
      }
      .magazine-lightbox-frame-wrap{
        height:min(62vh,560px);
        min-height:360px;
      }
      .magazine-flipbook-viewport{padding:18px;}
      .magazine-flipbook{
        width: 100%;
        height: 100%;
        margin: 0;
      }
      .magazine-thumbnail-strip{padding:12px 16px;}
      .magazine-thumbnail-strip button{width:44px;}
      .magazine-lightbox-footer{
        padding:14px 18px;
        align-items:flex-start;
        flex-direction:column;
      }
      .magazine-lightbox-hint{display:none;}
    }
    @media(prefers-reduced-motion:reduce){
      .magazine-lightbox,
      .magazine-lightbox-dialog,
      .magazine-lightbox-loading-cover,
      .magazine-flipbook-shell,
      .magazine-lightbox-loading{transition-duration:.01ms !important;}
      .magazine-lightbox-spinner{animation-duration:1.4s;}
    }


/* ==========================================================================
   MULTI-PAGE ADDITIONS
   Everything above this line is the original stylesheet, unmodified and in
   its original order. Only the rules below were added, and only to make a
   multi-page site work. No original rule is overridden.
   ========================================================================== */

/* Pages that do not open with the hero start underneath the fixed header. */
main.interior{padding-top:84px}
@media(max-width:680px){main.interior{padding-top:72px}}

/* Skip link (the original had none). */
.skip-link{
  position:absolute;left:16px;top:-100px;z-index:200;
  padding:12px 18px;border-radius:12px;background:var(--forest);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  transition:top .2s ease;
}
.skip-link:focus{top:16px}

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:100% 52%;
  z-index:1;
  opacity:0;
  transition:opacity .9s ease;
  pointer-events:none;
}
.hero-video.is-playing{opacity:1}

@media(max-width:800px){
  .hero-video{object-position:66% 46%}
}

/* Reduced motion: keep the video visible (main.js starts it paused, with
   the hero-media-control button available to play it) rather than hiding
   it outright, since display:none left nothing for that control to do. */
@media(prefers-reduced-motion:reduce){
  .hero-video{transition:none}
}

/* Mobile navigation. Below 1050px the original hid .links and .cta with
   nothing in their place, leaving no way to navigate. */
.nav-toggle{
  display:none;width:44px;height:44px;padding:0;position:relative;
  border:1px solid rgba(19,33,28,.14);border-radius:50%;
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(11,30,25,.06);
  flex:0 0 auto;cursor:pointer;transition:background .25s ease,border-color .25s ease;
}
.nav-toggle:hover{background:rgba(255,255,255,.7)}
.nav-toggle span{
  position:absolute;left:13px;right:13px;height:1.5px;border-radius:2px;background:var(--forest);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .28s ease;
}
.nav-toggle span:nth-child(1){top:16px}
.nav-toggle span:nth-child(2){top:22px}
.nav-toggle span:nth-child(3){top:28px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.nav-panel{
  position:fixed;inset:84px 0 0 auto;width:min(420px,100%);z-index:90;
  padding:38px 28px 52px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
  border-left:1px solid rgba(255,255,255,.5);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.5),-20px 0 60px rgba(4,18,15,.10);
  /* Closing transform must clear more than the panel's own width: on mobile
     the panel is later inset from the viewport edge (see the ≤680px block),
     and translateX(100%) only ever shifts it by its own box, not by the
     extra gap to the true edge — leaving that gap's worth of the panel
     visible as a sliver. The +24px overshoot swallows that gap (plus any
     scrollbar-width rounding) at every breakpoint, with no visible cost
     since it only affects the fully-offscreen resting position. */
  transform:translateX(calc(100% + 24px));transition:transform .45s cubic-bezier(.2,.8,.2,1);
  overflow-y:auto;display:flex;flex-direction:column;gap:8px;
}
.nav-panel[inert]{pointer-events:none}
.nav-panel.is-open{transform:none}
.nav-panel a{
  padding:14px 12px;border-radius:12px;
  font-size:19px;font-weight:600;letter-spacing:-.02em;
  transition:color .25s ease,background .25s ease;
}
.nav-panel a:hover{color:var(--forest);background:rgba(255,255,255,.5)}
.nav-panel a[aria-current="page"]{color:var(--forest);font-weight:800;background:rgba(255,255,255,.4)}
.nav-panel .cta{margin-top:22px;align-self:flex-start;display:inline-block}
.nav-scrim{
  position:fixed;inset:84px 0 0;z-index:85;background:rgba(10,30,25,.22);
  backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .28s ease;
}
.nav-scrim.is-open{opacity:1;pointer-events:auto}
@media(max-width:1050px){
  .nav-toggle{display:block}
  .site-header nav > .cta{display:none}
}
@media(max-width:680px){
  .site-header{
    background:rgba(250,248,243,.96) !important;
    border-bottom:1px solid rgba(19,33,28,.10) !important;
  }
  .site-header nav{
    height:64px !important;
  }
  nav .brand{
    gap:9px;
    font-size:9px;
    letter-spacing:.14em;
  }
  nav .nav-custom-logo{
    width:34px !important;
    height:34px !important;
    border-radius:9px !important;
  }
  .nav-toggle{
    width:38px;
    height:38px;
    border-color:rgba(255,255,255,.55);
    background:rgba(255,255,255,.45);
  }
  .nav-toggle span{
    left:10px;
    right:10px;
  }
  .nav-toggle span:nth-child(1){top:13px}
  .nav-toggle span:nth-child(2){top:18px}
  .nav-toggle span:nth-child(3){top:23px}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

  /* ---- Glassmorphism Nav Drawer ---- */
  .nav-scrim{
    display:block !important;
    inset:0 !important;
    z-index:190 !important;
    background:rgba(0,0,0,.4) !important;
  }

  .nav-panel{
    inset:0 0 0 auto;
    width:clamp(260px, 60vw, 360px);
    max-height:100dvh;
    border-radius:24px 0 0 24px;
    border:none;
    border-left:1px solid rgba(255,255,255,.12);
    background:rgba(7,31,25,.65);
    backdrop-filter:blur(24px) saturate(150%);
    -webkit-backdrop-filter:blur(24px) saturate(150%);
    box-shadow:-20px 0 60px rgba(0,0,0,.25);
    padding:0;
    gap:0;
    transform:translateX(100%);
    transition:transform .4s cubic-bezier(.22,1,.36,1);
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:200;
  }
  .nav-panel.is-open{
    transform:translateX(0);
  }
  
  .nav-panel-close {
    position:absolute;
    top:12px;
    right:12px;
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    color:#fff;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    z-index:10;
    transition:background .2s;
  }
  .nav-panel-close:hover, .nav-panel-close:active {
    background:rgba(255,255,255,.2);
  }

  .nav-panel-eyebrow{
    display:flex;
    align-items:center;
    flex:0 0 auto;
    height:64px;
    padding:0 20px;
    margin:0;
  }
  .nav-panel-brand {
    display:flex;
    align-items:center;
    gap:9px;
    font-size:9px;
    font-weight:800;
    letter-spacing:.14em;
    color:#fff;
  }
  .nav-panel-logo-icon {
    width:34px;
    height:34px;
    border-radius:9px;
    background:var(--forest);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .nav-panel-logo-icon img {
    width:62%;
    height:62%;
    object-fit:contain;
    filter:invert(1) brightness(2);
  }

  .nav-panel-links{
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    flex:1;
    padding:0;
    gap:0;
  }

  .nav-panel .nav-panel-link{
    position:relative;
    display:flex;
    align-items:center;
    flex:1;
    padding:0 24px;
    border:0;
    border-radius:0;
    background:transparent;
    color:rgba(255,255,255,.85);
    font-size:18px;
    font-weight:600;
    letter-spacing:0;
    transition:color .18s ease,background .18s ease;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .nav-panel .nav-panel-link:last-child{
    border-bottom:none;
  }
  .nav-panel .nav-panel-link:after{
    display:none;
  }
  .nav-panel .nav-panel-link:hover,
  .nav-panel .nav-panel-link:active{
    color:#fff;
    background:rgba(255,255,255,.05);
  }
  .nav-panel .nav-panel-link[aria-current="page"]{
    color:#7ecfae;
    background:transparent;
    font-weight:700;
  }

  .nav-panel-actions{
    flex:0 0 auto;
    padding:24px;
    margin-top:0;
  }
  .nav-panel .cta{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:50px;
    margin:0;
    padding:0 20px;
    border-radius:25px;
    background:transparent;
    border:1px solid rgba(255,255,255,.4);
    color:#fff;
    font-size:12px;
    font-weight:700;
    letter-spacing:.1em;
    text-align:center;
    text-transform:uppercase;
    white-space:nowrap;
    transition:border-color .2s ease, background .2s ease;
  }
  .nav-panel .cta:hover{
    border-color:#fff;
    background:rgba(255,255,255,.1);
  }
}

/* Current-page indicator in the desktop nav. */
.links a[aria-current="page"]{color:var(--forest);font-weight:700}

/* Home film section: contain the YouTube embed inside a media card instead of
   letting the source full-bleed override stretch it across the viewport. */
.film > .wrap{
  width:min(var(--shell),calc(100% - var(--gutter) * 2)) !important;
  max-width:var(--shell) !important;
  margin-inline:auto !important;
}
.film-head{
  width:auto !important;
}
.film .video{
  width:min(100%,1120px) !important;
  max-width:1120px !important;
  margin:0 auto !important;
  padding:10px !important;
  border:1px solid rgba(19,33,28,.12) !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:0 26px 70px rgba(11,63,52,.12) !important;
  aspect-ratio:16/9 !important;
}
.film .video iframe{
  inset:10px !important;
  width:calc(100% - 20px) !important;
  height:calc(100% - 20px) !important;
  border-radius:4px !important;
}
.video-fallback{
  width:min(100%,1120px);
  margin-left:auto;
  margin-right:auto;
}
@media(max-width:680px){
  .film .video{
    padding:6px !important;
    aspect-ratio:16/10 !important;
  }
  .film .video iframe{
    inset:6px !important;
    width:calc(100% - 12px) !important;
    height:calc(100% - 12px) !important;
  }
}

/* Quality page type scale. The source section used very small technical-label
   text, which became hard to read over the image-led hero. */
.quality-copy{
  width:min(660px,52%) !important;
}
.quality-copy>p{
  max-width:590px !important;
  color:#51615b !important;
  font-size:17px !important;
  line-height:1.75 !important;
}
.quality-pillars{
  margin-top:44px !important;
}
.quality-pillars>div{
  padding:22px 24px 0 0 !important;
}
.quality-pillars b{
  margin-bottom:16px !important;
  font-size:11px !important;
}
.quality-pillars strong{
  font-size:15px !important;
  line-height:1.25 !important;
}
.quality-pillars span{
  margin-top:9px !important;
  font-size:12px !important;
  line-height:1.55 !important;
}
.testing-card{
  grid-template-columns:.72fr 2.28fr !important;
  padding:36px 40px !important;
  border-radius:24px !important;
}
.testing-card-top span{
  font-size:10px !important;
}
.testing-card-top strong{
  margin-top:12px !important;
  font-size:32px !important;
}
.testing-flow{
  gap:20px !important;
}
.testing-flow div{
  min-height:106px !important;
  padding-left:22px !important;
}
.testing-flow i{
  font-size:13px !important;
  letter-spacing:.12em !important;
}
.testing-flow b{
  margin-top:14px !important;
  font-size:17px !important;
  line-height:1.2 !important;
}
.testing-flow span{
  margin-top:7px !important;
  font-size:15px !important;
  line-height:1.35 !important;
}
.testing-flow em{
  font-size:24px !important;
}
@media(max-width:900px){
  .quality-copy{
    width:70% !important;
  }
  .testing-card{
    grid-template-columns:1fr !important;
  }
}
@media(max-width:650px){
  .quality-copy{
    width:100% !important;
  }
  .quality-copy>p{
    font-size:16px !important;
  }
  .testing-card{
    padding:24px 20px !important;
  }
  .testing-flow{
    grid-template-columns:1fr !important;
  }
  .testing-flow div{
    min-height:auto !important;
  }
}

/* Careers video card balance: move the values into the empty space below the
   thumbnail so the media side and copy side carry similar visual weight. */
.careers-thumbnail-frame{
  display:flex !important;
  flex-direction:column !important;
  min-height:100% !important;
}
.careers-thumbnail-frame .careers-thumbnail-link{
  flex:0 0 auto !important;
}
.careers-thumbnail-frame .career-values{
  margin-top:0 !important;
  padding:24px 30px 28px !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  background:
    radial-gradient(circle at 18% 0%,rgba(34,190,147,.10),transparent 32%),
    linear-gradient(180deg,#082b23 0%,#061d18 100%) !important;
}
.careers-thumbnail-frame .career-values>div{
  display:grid !important;
  grid-template-columns:140px 1fr !important;
  gap:18px !important;
  padding:16px 0 !important;
  border-bottom:1px solid rgba(255,255,255,.09) !important;
}
.careers-thumbnail-frame .career-values strong{
  color:#f3fbf7 !important;
  font-size:13px !important;
  line-height:1.35 !important;
}
.careers-thumbnail-frame .career-values span{
  color:rgba(207,234,222,.68) !important;
  font-size:12px !important;
  line-height:1.45 !important;
}
.careers-video-copy .career-values{
  display:none !important;
}
@media(max-width:600px){
  .careers-thumbnail-frame .career-values{
    padding:20px 22px 22px !important;
  }
  .careers-thumbnail-frame .career-values>div{
    grid-template-columns:1fr !important;
    gap:6px !important;
  }
}

.open-positions{
  margin:104px 0 54px;
  padding:34px;
  background:rgba(255,255,255,.48);
  border:1px solid rgba(11,63,52,.10);
  box-shadow:0 24px 70px rgba(11,63,52,.07);
  backdrop-filter:blur(14px);
}
.open-positions-head{
  display:grid;
  grid-template-columns:minmax(260px,.58fr) minmax(0,1fr);
  gap:clamp(28px,5vw,70px);
  align-items:start;
  margin-bottom:34px;
  padding-bottom:28px;
  border-bottom:1px solid rgba(11,63,52,.12);
}
.open-positions-kicker{
  display:block;
  margin-bottom:14px;
  color:#0a7a62;
  font-size:10px;
  font-weight:850;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.open-positions-head h3{
  margin:0;
  color:var(--forest);
  font-size:clamp(34px,3.4vw,56px);
  line-height:1.05;
  letter-spacing:-.045em;
}
.open-positions-head p{
  max-width:68ch;
  margin:4px 0 0;
  color:#4d5f58;
  font-size:16px;
  line-height:1.74;
}
.open-positions-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.position-card{
  display:flex;
  flex-direction:column;
  min-height:390px;
  padding:24px;
  border:1px solid rgba(11,63,52,.10);
  background:#fbfaf6;
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.position-card:hover{
  transform:translateY(-3px);
  border-color:rgba(11,63,52,.22);
  background:#fffdf8;
}
.position-card-top{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:26px;
}
.position-card-top span{
  color:#64756e;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.position-card-top b{
  color:var(--forest);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.position-card h4{
  margin:0 0 14px;
  color:#12342c;
  font-size:clamp(24px,2.2vw,32px);
  line-height:1.05;
  letter-spacing:-.035em;
}
.position-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 20px;
}
.position-meta span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border:1px solid rgba(11,63,52,.12);
  color:#315c53;
  font-size:10px;
  font-weight:750;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.position-card p{
  max-width:62ch;
  margin:0;
  color:#596861;
  font-size:15px;
  line-height:1.7;
}
.position-points{
  display:grid;
  gap:9px;
  margin:22px 0 0;
  padding:0;
  list-style:none;
}
.position-points li{
  position:relative;
  padding-left:18px;
  color:#31443d;
  font-size:14px;
  line-height:1.45;
}
.position-points li::before{
  content:"";
  position:absolute;
  left:0;
  top:.7em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--forest);
}
.position-card .careers-link{
  margin-top:auto;
  padding-top:28px;
  width:max-content;
}
@media(max-width:900px){
  .open-positions-head,
  .open-positions-grid{grid-template-columns:1fr}
  .open-positions{padding:26px}
}
@media(min-width:901px) and (max-width:1180px){
  .open-positions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Visible focus ring (the original relied on the UA default). */
:focus-visible{outline:3px solid var(--forest);outline-offset:3px}

/* The team modal is made untabbable with `inert` while closed. */
.team-modal[inert]{pointer-events:none}

/* Opening frame only. The original rules transition `visibility` on the
   modal (`transition:opacity .28s ease,visibility .28s ease`) and, via the
   `transition:.25s ease` shorthand, on `all` for the close button. A
   transitioned visibility still computes as `hidden` at progress 0, so the
   dialog cannot take focus on the frame it opens. Narrowing transitions to
   opacity for that one frame makes visibility apply instantly while the
   opacity fade-in still runs. main.js removes this class on the next frame,
   restoring the original transitions in time for the fade-out. */
.team-modal.is-opening,
.team-modal.is-opening *{transition-property:opacity !important}

/* The section eyebrows ("01 / About Newgate") have been removed. In these two
   heads the eyebrow occupied its own grid column, so the column is dropped and
   the heading moves back to the left edge. Every other head nested the eyebrow
   beside its heading and needs no change. */
.section-head,
.video-library-head{grid-template-columns:1fr}

/* About intro. The source section was text-only, which made the About page feel
   unfinished beside the richer image-led sections around it. */
.about-intro{
  position:relative;
  overflow:hidden;
  background:#f7f5ef;
  padding:96px 0 106px;
}
.about-intro::before{
  display:none;
}
.about-intro-layout{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.72fr);
  gap:72px;
  align-items:center;
}
.about-intro-copy{
  order:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:0;
}
.about-intro .section-head{
  margin-bottom:30px;
}
.about-intro .section-head h2{
  max-width:660px;
  font-size:clamp(62px,6.8vw,104px) !important;
  line-height:.92 !important;
  letter-spacing:-.06em;
}
.about-intro .section-copy{
  max-width:650px;
}
.about-intro .section-copy .about-intro-lead{
  max-width:600px;
  margin:0 0 24px;
  color:var(--forest);
  font-size:clamp(22px,1.85vw,28px);
  line-height:1.28;
  letter-spacing:-.018em;
  font-weight:650;
}
.about-intro .section-copy p{
  max-width:64ch;
  margin:0;
  color:#3d4a45;
  font-size:18px;
  line-height:1.82;
}
.about-intro .section-copy p + p{
  margin-top:20px;
}
.about-intro-note{
  display:inline-flex;
  align-items:center;
  gap:14px;
  width:max-content;
  max-width:100%;
  margin-top:34px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(11,63,52,.26);
  color:var(--forest);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.about-intro-media{
  position:relative;
  order:2;
  margin:0;
  min-height:470px;
  overflow:hidden;
  border-radius:2px;
  background:#dfe7e2;
  box-shadow:0 28px 70px rgba(11,63,52,.12);
}
.about-intro-media img{
  height:100%;
  min-height:470px;
  object-fit:cover;
  object-position:center;
  transition:transform .7s ease,filter .7s ease;
}
.about-intro-media:hover img{
  transform:scale(1.035);
  filter:saturate(1.04);
}
.about-intro-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(4,28,23,0) 46%,rgba(4,28,23,.72) 100%);
  pointer-events:none;
}
.about-intro-card{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:end;
  padding:18px 20px;
  background:rgba(8,43,35,.93);
  color:#fff;
  backdrop-filter:blur(14px);
}
.about-intro-card span{
  display:block;
  margin-bottom:8px;
  color:#bdd8ce;
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.about-intro-card strong{
  display:block;
  max-width:300px;
  font-size:18px;
  line-height:1.12;
  letter-spacing:-.03em;
}
.about-intro-card small{
  color:#cfe5db;
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
}
@media(max-width:1050px){
  .about-intro-layout{grid-template-columns:1fr;align-items:start}
  .about-intro-copy{min-height:auto}
  .about-intro-copy{order:1;padding:0}
  .about-intro-media{order:2}
  .about-intro .section-copy{max-width:780px}
  .about-intro-media{min-height:430px}
  .about-intro-media img{min-height:430px}
}
@media(max-width:680px){
  .about-intro{padding:32px 0 82px}
  .about-intro .section-head{margin-bottom:24px}
  .about-intro-layout{gap:34px}
  .about-intro-copy{padding:0}
  .about-intro .section-copy .about-intro-lead{font-size:21px;line-height:1.32;margin-bottom:22px}
  .about-intro .section-copy p{font-size:16px;line-height:1.72}
  .about-intro-media{min-height:360px}
  .about-intro-media img{min-height:360px}
  .about-intro-card{display:block;padding:16px}
  .about-intro-card strong{font-size:18px}
  .about-intro-card small{display:block;margin-top:14px}
}

.about-film-feature{
  position:relative;
  overflow:hidden;
  padding:0 0 112px;
  background:#f7f5ef;
}
.about-film-feature::before{
  display:none;
}
.about-film-layout{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(340px,.78fr);
  gap:clamp(34px,5vw,72px);
  align-items:stretch;
  padding-top:8px;
}
.about-film-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:600px;
  padding:clamp(8px,1.4vw,18px) 0;
}
.about-film-copy .section-head{
  margin-bottom:22px;
}
.about-film-copy .section-head h2{
  max-width:500px;
  font-size:clamp(34px,3.5vw,54px);
  line-height:1.04;
  letter-spacing:-.042em;
  font-weight:700;
}
.about-film-copy .section-head h2 span{
  color:var(--forest);
}
.about-film-copy h3{
  margin:0;
  color:var(--forest);
  font-size:clamp(20px,1.7vw,26px);
  line-height:1.32;
  letter-spacing:-.02em;
  font-weight:700;
}
.about-film-copy>p{
  max-width:58ch;
  margin:20px 0 0;
  color:#3d4a45;
  font-size:16px;
  line-height:1.76;
}
.about-film-bottom{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(210px,.26fr) 1fr;
  gap:clamp(24px,4vw,58px);
  align-items:stretch;
  margin-top:52px;
  padding:30px;
  border:1px solid rgba(11,63,52,.12);
  background:rgba(255,255,255,.44);
  box-shadow:0 24px 64px rgba(11,63,52,.08);
  backdrop-filter:blur(14px);
}
.about-film-bottom>p{
  margin:0;
  color:var(--forest);
  max-width:12ch;
  font-size:clamp(20px,1.8vw,28px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.035em;
  text-transform:none;
}
.about-film-points{
  counter-reset:about-film-step;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-left:1px solid rgba(11,63,52,.12);
}
.about-film-points span{
  counter-increment:about-film-step;
  position:relative;
  min-height:178px;
  padding:54px 22px 4px;
  border-right:1px solid rgba(11,63,52,.14);
  background:transparent;
  color:#53635c;
  font-size:14px;
  line-height:1.58;
}
.about-film-points span:last-child{
  border-right:0;
}
.about-film-points span::before{
  content:"0" counter(about-film-step);
  position:absolute;
  top:4px;
  left:22px;
  color:rgba(11,63,52,.42);
  font-size:12px;
  line-height:1;
  font-weight:800;
  letter-spacing:.1em;
}
.about-film-points strong{
  display:block;
  margin-bottom:10px;
  color:var(--forest);
  font-size:13px;
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.01em;
  text-transform:none;
}
.about-film-media{
  position:relative;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  aspect-ratio:16/9 !important;
  overflow:hidden;
  border-radius:2px !important;
  border:0 !important;
  background:#071f19 !important;
  box-shadow:0 32px 80px rgba(11,63,52,.18) !important;
}
.about-film-media video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#071f19;
  transition:transform .7s ease,filter .7s ease;
}
.about-film-media:hover video{
  transform:scale(1.025);
  filter:saturate(1.04);
}
.about-film-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(4,28,23,0) 38%,rgba(4,28,23,.82) 100%),
    linear-gradient(90deg,rgba(4,28,23,.22),rgba(4,28,23,0) 54%);
  pointer-events:none;
}
.about-film-media > .compliance-video-badge-wrap{
  position:absolute;
  top:50%;
  left:50%;
  z-index:3;
  transform:translate(-50%,-50%);
}
.about-film-caption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  display:flex;
  justify-content:space-between;
  gap:22px;
  align-items:end;
  padding:18px 20px;
  color:#fff;
}
.about-film-caption span{
  color:#bdd8ce;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.about-film-caption strong{
  max-width:330px;
  font-size:18px;
  line-height:1.12;
  letter-spacing:-.03em;
  text-align:left;
}
@media(max-width:1050px){
  .about-film-layout{grid-template-columns:1fr}
  .about-film-copy{max-width:780px}
  .about-film-media{order:1}
  .about-film-copy{order:2}
  .about-film-bottom{grid-template-columns:1fr;gap:24px}
  .about-film-bottom>p{max-width:none}
  .about-film-points{grid-template-columns:1fr 1fr;border-left:0;border-top:1px solid rgba(11,63,52,.12)}
  .about-film-points span{min-height:154px;border-top:0}
  .about-film-points span:nth-child(2n){border-right:0}
  .about-film-media{aspect-ratio:16/9.5 !important}
}
@media(max-width:680px){
  .about-film-feature{padding-bottom:82px}
  .about-film-copy .section-head{margin-bottom:24px}
  .about-film-copy .section-head h2{font-size:clamp(38px,10.6vw,50px)}
  .about-film-copy h3{font-size:24px;line-height:1.24}
  .about-film-copy>p{font-size:16px;line-height:1.72}
  .about-film-bottom{margin-top:34px;padding:22px}
  .about-film-bottom>p{font-size:28px}
  .about-film-points{display:grid;grid-template-columns:1fr}
  .about-film-points span,
  .about-film-points span + span{
    min-height:0;
    padding:46px 0 22px;
    border-right:0;
    border-bottom:1px solid rgba(11,63,52,.12);
  }
  .about-film-points span::before{left:0}
  .about-film-points span:last-child{
    padding-bottom:0;
    border-bottom:0;
  }
  .about-film-media{aspect-ratio:16/11 !important}
  .about-film-caption{display:block;padding:16px}
  .about-film-caption strong{display:block;margin-top:8px;text-align:left;font-size:17px}
}

/* Multi-column site footer. */
.site-footer{background:#0b1d17;color:#aebcb6;padding:64px 0 24px}
.footer-grid{display:grid;grid-template-columns:minmax(260px,1.2fr) .55fr .55fr minmax(320px,1.25fr);gap:46px}
.site-footer .brand{display:inline-flex;align-items:center;gap:12px;color:#fff;font-weight:800;letter-spacing:.08em}
/* The header logo image is dark, so the footer gives it a light chip and inverts
   the mark only in this context. */
.site-footer .nav-custom-logo{
  width:38px;height:38px;display:inline-flex;
  background:#f4f8f5 !important;
  border:1px solid rgba(255,255,255,.24);
  border-radius:11px;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.site-footer .nav-custom-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:brightness(0) saturate(100%) invert(18%) sepia(28%) saturate(763%) hue-rotate(117deg) brightness(88%) contrast(94%);
}
.footer-brand p{max-width:330px;margin:18px 0 0;line-height:1.65}
.footer-grid h2{margin:0 0 16px;color:#fff;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.footer-grid a,.footer-grid span:not(.logo){display:block;color:#aebcb6;margin:0 0 10px;line-height:1.45}
.footer-grid a:hover{color:#fff}
.footer-contact h3{
  margin:0 0 7px;
  color:#7fa397;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.footer-contact-block{
  padding:0 0 15px;
}
.footer-contact-block+.footer-contact-block{
  padding-top:15px;
  border-top:1px solid rgba(174,188,182,.14);
}
.footer-contact p,
.footer-contact address{
  margin:0 0 8px;
  color:#aebcb6;
  font-size:12px;
  font-style:normal;
  line-height:1.55;
}
.footer-contact .footer-contact-value{
  width:fit-content;
  margin-bottom:0;
  color:#fff;
  font-size:13px;
  font-weight:700;
}
.footer-contact .footer-map-link{
  width:fit-content;
  margin:10px 0 0;
  padding-bottom:5px;
  border-bottom:1px solid rgba(174,188,182,.35);
  color:#d4e3dd;
  font-size:11px;
  font-weight:700;
}
.footer-base{display:flex;justify-content:space-between;gap:18px;margin-top:44px;padding-top:20px;border-top:1px solid rgba(174,188,182,.25);font-size:11px;letter-spacing:.04em}

/* Related image cards. */
.related .section-head{
  margin-bottom:22px;
}
.related .section-head h2{
  font-size:11px;
  line-height:1.2;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#6d7772;
}
.related .cap-grid{grid-template-columns:repeat(3,1fr)}
.cap{color:inherit;text-decoration:none}
.related-card{
  min-height:520px !important;
  border-radius:8px;
  padding:0;
  overflow:hidden;
  border:0 !important;
  background:#0b1d17;
  color:#fff;
  display:flex;
  align-items:flex-end;
  box-shadow:0 24px 70px rgba(11,63,52,.11);
}
.related-card::before,
.related-card::after{
  content:none !important;
  display:none !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}
.related-card-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .55s ease,filter .55s ease;
}
.related-card-vignette{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(ellipse at bottom left, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 35%, transparent 70%),
    linear-gradient(to top, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.85) 15%, rgba(0,0,0,0.5) 32%, transparent 60%);
  pointer-events:none;
}
.related-card:hover{
  transform:translateY(-6px);
}
.related-card:hover .related-card-image{
  transform:scale(1.045);
  filter:saturate(1.05);
}
.related-card-content{
  position:relative;
  z-index:2;
  width:100%;
  padding:0 26px 40px;
  text-align:left;
}
.related-card h3{
  margin:0 0 2px !important;
  color:#fff;
  font-size:30px;
  line-height:1.05;
  text-align:left;
}
.related-card p{
  max-width:330px;
  margin:0 0 2px;
  color:rgba(255,255,255,.86);
  font-size:14px;
  line-height:1.4 !important;
  text-align:left;
}
.cap-explore{
  display:block;
  margin-top:10px;
  margin-bottom:14px;
  color:#cfe5db;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:left;  
}
.cap:focus-visible{outline:3px solid var(--forest);outline-offset:4px}

/* --------------------------------------------------------------------------
   Cards hug their content
   The source sets .cap{min-height:350px} and .cap h3{margin:130px 0 12px} —
   sized for a taller card, so most of each one was empty. Applies to the
   capability, related and retailer grids alike.
   -------------------------------------------------------------------------- */
.cap:not(.related-card){min-height:0}
.cap h3{margin:20px 0 10px}
.cap .n + h3{margin-top:14px}

/* Capability cards (#capabilities): grid rows already stretch every card to
   equal height, so a flex column + margin-top:auto on the Explore link pins
   it flush to the bottom of every card regardless of paragraph length —
   they line up across the row instead of trailing right after each card's
   own text. The shared .cap-explore color (#cfe5db, a light mint) was tuned
   for .related-card's dark background and is barely legible on these cards'
   light backgrounds — override to the brand forest green here. */
.cap:not(.related-card){
  display:flex;
  flex-direction:column;
}
.cap:not(.related-card) .cap-explore{
  margin-top:auto;
  padding-top:16px;
  color:var(--forest);
}

/* Boxed, rounded film video card — a contained rounded panel (matching the
   reference design) instead of an edge-to-edge banner, with the Maya-style
   compliance-video-badge trigger overlaid (see .video > .compliance-video-badge-wrap above). */
.film > .wrap{width:min(var(--shell),calc(100% - var(--gutter) * 2)) !important;max-width:var(--shell) !important;margin-inline:auto !important}
.film .film-head{width:100% !important;margin:0 0 34px !important}
.film .video{
  width:100% !important;max-width:none !important;margin:0 !important;
  border-radius:24px !important;aspect-ratio:16/7.2 !important;padding:0 !important;
  /* Overrides a stale `background:#fff !important` left over from an earlier
     boxed-YouTube-card treatment (still present a few hundred lines up) so
     the poster photo actually shows through. */
  background-image:url("../img/newgate-labs-intro-poster.jpg") !important;
  background-size:cover !important;
  background-position:center !important;
}

/* "Continue exploring" was 110px top and bottom on top of already-tall cards. */
.related{padding:64px 0}
.related .section-head{margin-bottom:26px}

/* --------------------------------------------------------------------------
   Where to buy — image-led cards reusing the .related-card treatment
   (full-bleed photo, dark vignette, text pinned bottom-left). Falls back to
   .related-card's solid background colour if a card's photo isn't in place
   yet, so a missing asset never shows as a broken image.
   -------------------------------------------------------------------------- */
.where-to-buy{background:var(--cream)}
.buy-grid{grid-template-columns:repeat(2,1fr);gap:20px}
.buy-card{
  min-height:380px !important;
  /* .cap:nth-child(2/3/4) (the light alternating card backgrounds, higher
     specificity than .related-card's plain class) would otherwise win over
     the dark photo-card background for the 2nd card in this 2-up grid.
     background-color only (not the "background" shorthand) so this doesn't
     clobber the per-card background-image set inline on each <a>. */
  background-color:#0b1d17 !important;
}
/* Solid forest-green CTA banner — previously a near-white card on the cream
   section background with a barely-visible border, so it had almost no
   visual weight next to the dark photo cards above it. (international.astro's
   .intl-partner-band scopes its own translucent-white-on-dark look via a
   higher-specificity Astro scoped style, so it's unaffected by this.) */
.partner-band{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  margin-top:34px;padding:30px 34px;border:none;border-radius:20px;
  background:var(--forest);
}
.partner-band strong{display:block;font-size:19px;line-height:1.3;color:#fff}
.partner-band span{display:block;margin-top:6px;color:rgba(255,255,255,.72);font-size:14px}
.partner-band .btn.primary{background:#fff;color:var(--forest)}

/* --------------------------------------------------------------------------
   Global map — dotted landmass with animated supply arcs
   -------------------------------------------------------------------------- */
.global-map-section{
  padding:96px 0;
  background:
    radial-gradient(circle at 50% 40%,rgba(92,177,142,.13),transparent 26%),
    linear-gradient(150deg,#0a2d25,#0e4538 55%,#092820);
  color:#fff;
  overflow:hidden;
}
.global-map-section h2 span{color:#b9dfd0}
.global-map-section .split-head-copy p{color:#a9bdb5}

.ng-map-layout{display:grid;grid-template-columns:1.68fr .32fr;gap:34px;align-items:center}
.ng-map{position:relative;min-width:0}
.ng-map svg{display:block;width:100%;height:auto;overflow:visible}

.ng-land{
  fill:none;
  stroke:rgba(180,222,202,.42);
  stroke-width:3.4;
  stroke-linecap:round;
}

/* The route itself: draws in once, then stays. */
.ng-arc{
  fill:none;
  stroke:rgba(200,239,171,.55);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-dasharray:var(--len);
  stroke-dashoffset:var(--len);
  animation:ngArcDraw 1.8s ease-out var(--delay) forwards;
}
.ng-arc-network{stroke:rgba(174,216,196,.30);stroke-width:1.1}
@keyframes ngArcDraw{to{stroke-dashoffset:0}}

/* A short bright dash travelling along the same curve. */
.ng-arc-pulse{
  fill:none;
  stroke:#eaffd6;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-dasharray:14 var(--len);
  stroke-dashoffset:var(--len);
  opacity:.9;
  animation:ngArcFlow 3.4s linear calc(var(--delay) + 1.8s) infinite;
}
.ng-arc-pulse-network{stroke:#d7f0e4;stroke-width:1.6;opacity:.65}
@keyframes ngArcFlow{
  from{stroke-dashoffset:var(--len)}
  to{stroke-dashoffset:calc(var(--len) * -1)}
}

/* No dark outline — at map scale a 1.2px dark stroke on a 4.5px dot reads as
   a black blob rather than a lit marker. A soft glow separates it instead. */
.ng-node-dot{fill:var(--accent-leaf);filter:drop-shadow(0 0 5px rgba(200,239,171,.9))}
.ng-node-network .ng-node-dot{fill:#cfeadd;r:3.6}
.ng-node-pulse{
  fill:rgba(200,239,171,.28);
  transform-box:fill-box;transform-origin:center;
  animation:ngPulse 3s ease-out infinite;
}
@keyframes ngPulse{
  0%{transform:scale(.35);opacity:.85}
  75%,100%{transform:scale(1.5);opacity:0}
}
.ng-origin-dot{fill:#fff;filter:drop-shadow(0 0 8px rgba(255,255,255,.95))}
.ng-origin-ring{
  fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.5;
  transform-box:fill-box;transform-origin:center;
  animation:ngPulse 2.6s ease-out infinite;
}

/* Raised state, driven by hover on the map or focus in the market list. */
.ng-node.is-active .ng-node-dot{fill:#fff;r:6}
.ng-arc.is-active{stroke:#fff;stroke-width:2.4;opacity:1}
.ng-arc-pulse.is-active{stroke:#fff;stroke-width:3;opacity:1}

.ng-map-side{min-width:0}
.ng-map-origin{padding-bottom:16px;border-bottom:1px solid var(--on-dark-line)}
.ng-map-origin span{
  display:block;color:var(--on-dark-mute);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
}
.ng-map-origin strong{display:block;margin-top:6px;font-size:17px}
.ng-markets{list-style:none;margin:0;padding:0}
.ng-market{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:9px 4px;border-bottom:1px solid rgba(255,255,255,.08);
  cursor:default;transition:background .25s ease,padding-left .25s ease;
}
.ng-market strong{font-size:14px;font-weight:600}
.ng-market span{color:var(--on-dark-mute);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.ng-market:hover,.ng-market:focus-visible,.ng-market.is-active{
  background:rgba(255,255,255,.07);padding-left:10px;outline:none;
}

@media(prefers-reduced-motion:reduce){
  .ng-arc{animation:none;stroke-dashoffset:0}
  .ng-node-pulse,.ng-origin-ring{animation:none;opacity:.35}
}

@media(max-width:900px){
  .ng-map-layout{grid-template-columns:1fr;gap:26px}
  .ng-markets{max-height:none}
  .buy-grid{grid-template-columns:1fr}
  .partner-band{flex-direction:column;align-items:flex-start;gap:18px}
}

/* ==========================================================================
   PHONE LAYER — applies only below 700px.
   Desktop and tablet render exactly as the original does. The original was
   designed desktop-first and drops to 8-9px type in a dozen places, which is
   unreadable on a phone; these rules raise a floor without touching any
   larger breakpoint.
   ========================================================================== */
@media(max-width:699px){
  body{font-size:15px}

  /* Type floor. Every selector below measured under 12px at 375px. */
  .quality-pillars b,.quality-pillars strong,.quality-pillars span,
  .testing-card-top span,.testing-flow i,.testing-flow b,.testing-flow span,
  .team-info span,.network-mini-stats span,.scale-metrics span,
  .career-values strong,.career-values span,
  .country-chips span,.region-panel p,.region-index,.region-status,
  .core-content span,.core-content small,.market-ticker span,
  .journey-card .n,.cap .n,.cap-explore,
  .news-meta,.news-card-meta,
  .education-card-top span,.knowledge-card .category,
  .knowledge-feature-copy .meta,.knowledge-feature-visual .issue span,
  .compliance-card p,.compliance-note,
  .team-modal-number,.team-modal-kicker,.team-modal-role,.team-modal-footer,
  .footer-grid h2,.footer-base,
  .stat span,.video-fallback span,.video-fallback a,
  .ng-scale-metrics div span,.education-points div span,.video-story-kicker,
  .hero-reference-copy .kicker,.btn,.cta{font-size:12px!important;letter-spacing:.06em}

  /* The original sets 9px !important at this specificity, so the phone rule
     has to match it to win. */
  .leadership-team-grid .team-info span,
  #leadership-team .leadership-team-grid .team-info span{font-size:12px!important;line-height:1.4!important}

  /* Body copy that is comfortable to read rather than merely legible. */
  .region-panel p,.compliance-card p,.news-card p,.education-card p,
  .knowledge-card p,.career-values span,.quality-pillars span,
  .footer-grid a,.footer-brand p{font-size:14px!important;line-height:1.6}

  /* Two-up portraits. The original forces one column below 520px via its own
     !important rule, which makes People a ~9,600px scroll. */
  .team-tiles,#leadership-team .team-tiles,
  .leadership-team-grid,#leadership-team .leadership-team-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px 12px!important
  }

  /* 44px minimum tap targets. */
  .arrow-link,.rule-link,.education-card a,.news-card a,.knowledge-card a,
  .site-footer a,.ng-story-link,.education-link,
  .careers-link,.news-all-link,.news-read-link,.btn,.cta,.video-fallback a,
  .knowledge-intro a,.education-intro a,.network-intro a,.news-head-copy a{
    min-height:44px;padding-top:11px;padding-bottom:11px;
    display:inline-flex;align-items:center
  }

  /* The quality section lays its copy over a photo at opacity .35. A light
     scrim keeps the original dark-on-light text readable — an opaque dark
     panel would render the forest-green headline invisible. */
  .quality-photo{opacity:.18!important}
  .quality-copy{
    position:relative;
    background:rgba(245,244,239,.93);
    padding:24px 0;
  }

  /* First sections of interior pages get less top padding because main.interior already provides 72px clearance for the header. */
  .education-section, .news-section, .careers-section, .knowledge-hub-section, .about-intro {
    padding-top:32px!important;
    padding-bottom:64px!important;
  }

  /* Shorter sections so the long pages scroll sensibly. */
  .section,.video-library,.team,.team-compact,
  .quality-section,
  .compliance-certification-section,.global-network,.ng-scale-story,
  .final{padding-top:64px!important;padding-bottom:64px!important}

  /* .quality-section's own spacing comes entirely from .quality-inner
     (which already sets its own mobile padding, see the 699px query
     above) — the generic "shorter sections" padding above was stacking
     on top of it and pushing the heading ~60px further down than every
     other section. */
  .quality-section{padding-top:0!important;padding-bottom:0!important}

  /* .about-intro also carries the generic .section class, so the "shorter
     sections" 64px rule above (later in the cascade, same !important
     specificity) was clobbering the 32px set for it further up — pushing
     its heading ~32px lower than every other interior page's on mobile. */
  .about-intro{padding-top:32px!important}

  /* Profile modal fits the viewport and scrolls internally. */
  .team-modal{padding:14px!important}
  .team-modal-dialog{max-height:calc(100vh - 28px)}
  .team-modal-content{overflow-y:auto}

  /* Footer becomes a compact phone directory. */
  .site-footer{
    padding:34px 0 22px !important;
    background:#071f19 !important;
  }
  .footer-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:0 14px !important;
  }
  .footer-brand{
    grid-column:1 / -1 !important;
    padding:0 0 22px !important;
    border-bottom:1px solid rgba(174,188,182,.18) !important;
  }
  .site-footer .brand{
    gap:10px !important;
    font-size:11px !important;
    letter-spacing:.12em !important;
  }
  .site-footer .nav-custom-logo{
    width:32px !important;
    height:32px !important;
    border-radius:8px !important;
  }
  .footer-brand p{
    max-width:320px !important;
    margin:18px 0 0 !important;
    color:#c6d0cc !important;
    font-size:13px !important;
    line-height:1.55 !important;
  }
  .footer-grid > div:not(.footer-brand){
    padding:20px 0 18px !important;
    border-bottom:0 !important;
    min-width:0 !important;
  }
  .footer-grid h2{
    margin:0 0 10px !important;
    color:#fff !important;
    font-size:9px !important;
    line-height:1.2 !important;
    letter-spacing:.11em !important;
  }
  .footer-grid a,
  .footer-grid span:not(.logo){
    display:block !important;
    width:100% !important;
    min-height:0 !important;
    margin:0 0 9px !important;
    padding:0 !important;
    color:#c3cfca !important;
    font-size:11px !important;
    line-height:1.35 !important;
    letter-spacing:0 !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }
  .footer-grid a:hover{
    color:#fff !important;
  }
  .footer-base{
    display:grid !important;
    gap:8px !important;
    margin-top:0 !important;
    padding-top:18px !important;
    border-top:1px solid rgba(174,188,182,.16) !important;
    color:#9fb0a9 !important;
    font-size:11px !important;
    line-height:1.45 !important;
    letter-spacing:.04em !important;
  }
  .footer-base span{
    display:block !important;
    margin:0 !important;
  }
  @media(max-width:340px){
    .footer-grid{
      gap:0 10px !important;
    }
    .footer-grid a,
    .footer-grid span:not(.logo){
      font-size:10px !important;
    }
  }

  /* Related cards stack rather than squeezing three across. */
  .related .cap-grid{grid-template-columns:1fr}
  .related .cap:not(.related-card){min-height:0}
  .related-card{min-height:380px !important}
  .related-card h3{margin-top:0}

  /* Overlay legibility. Both of these paint text over photography using a
     90deg gradient — correct on desktop where the copy sits to one side, but
     on a phone the block is full width with the text at the bottom, so the
     gradient is weakest exactly where the words are. Swap to a vertical,
     bottom-weighted scrim. This is the magazine feature block on Media and
     the compliance band on Quality. */
  .knowledge-feature-visual,
  .compliance-main{
    background-blend-mode:normal !important;
    background-size:cover !important;
    background-position:center !important;
    position:relative !important;
  }
  .knowledge-feature-visual::after,
  .compliance-main::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    background:linear-gradient(180deg,
      rgba(0,40,33,.15) 0%,
      rgba(0,40,33,.60) 48%,
      rgba(0,32,26,.93) 100%) !important;
    pointer-events:none;
  }
  .knowledge-feature-visual > *,
  .compliance-main > *{position:relative !important;z-index:1 !important}
  .knowledge-feature-visual{min-height:300px !important;display:flex !important;align-items:flex-end !important}

  /* Map stacks and the market list sits under it. */
  .ng-map-layout{grid-template-columns:1fr}
  .global-map-section{padding:64px 0}
  .ng-market{padding:12px 4px}

  /* ---- footer legibility -------------------------------------------------
     The compact three-column phone footer above (from "Polish responsive
     Newgate pages") sets 9px headings and 11px links with !important, which
     lands under the readable floor and zeroes the tap targets. Its layout is
     deliberate and is kept; only the type size and touch height are lifted.
     Four links per column at 44px is only ~176px, so the footer stays compact. */
  .footer-grid h2{font-size:12px !important;margin-bottom:6px !important}
  .footer-grid a,
  .footer-grid span:not(.logo){
    font-size:13px !important;
    line-height:1.4 !important;
    margin:0 !important;
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
  }
  .footer-base,.footer-base span{font-size:12px !important}
  .site-footer .brand{font-size:12px !important}
  .footer-brand p{font-size:13px !important}

  /* Remaining sub-12px labels. "Continue exploring." is styled as an uppercase
     eyebrow rather than a display heading — that treatment is kept, only the
     size is lifted to the floor. */
  .related .section-head h2{font-size:12px !important}
  .about-intro-card span,.about-intro-card small,
  .ng-map-origin span,.ng-market span{font-size:12px !important}
}

/* Desktop reference match: product panel left, copy panel right. */
@media(min-width:801px){
  .ng-product-story{
    /* The dead ground above and below the product shot is closed by growing
       the image to fill the band, not by shrinking the band. The image is
       `contain` and its aspect is 1448x1086 (4:3), so a box 54vw wide by
       40.5vw tall matches that aspect exactly — the image fills the section
       edge to edge with no letterbox in either direction.
       Capped at 820px so it stays sane on ultra-wide screens (it simply
       stays height-limited there). min-height, not height, so the section
       still grows on narrow desktops where the copy is the taller element. */
    min-height:clamp(400px,40.5vw,780px) !important;
    background:#f3f1eb !important;
  }
  .ng-product-story .ng-story-image{
    display:block !important;
    position:absolute !important;
    /* `contain` shows the whole product shot. `cover` cropped it on both
       sides — the Vitamin E bottle lost its left edge — and the box ran to
       55vw while the copy starts as early as 50.4vw, so the image collided
       with the headline. Ending the box at 48vw clears the copy at every
       width, and no mask is needed because nothing has to be hidden. */
    inset:0 auto 0 0 !important;
    width:54vw !important;
    height:100% !important;
    background-size:contain !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-color:transparent !important;
    transform:none !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }
  .ng-product-story:hover .ng-story-image{
    transform:none !important;
  }
  .ng-product-story .ng-story-shade{
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    /* The image now stops at 48vw, so the shade only has to guarantee a clean
       ground to the right of it. It stays fully transparent over the product
       so nothing is dimmed. */
    background:linear-gradient(
      90deg,
      transparent 0%,
      transparent 54%,
      #f3f1eb 56%,
      #f3f1eb 100%
    ) !important;
  }
  .ng-product-story .ng-story-inner{
    width:calc(100% - 88px) !important;
    max-width:none !important;
    min-height:38vw !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    padding:0 !important;
    position:relative !important;
    z-index:3 !important;
  }
  .ng-product-story .ng-story-copy{
    /* Narrowed from min(650px,38vw):
       the product shot now runs to 54vw, so the copy takes the remainder.
       Still 410-560px on a normal desktop. */
    width:min(560px,32vw) !important;
    margin:0 clamp(44px,5vw,108px) 0 auto !important;
    padding:0 !important;
    transform:none !important;
    text-align:left !important;
    text-shadow:none !important;
    position:relative !important;
    z-index:4 !important;
  }
  .ng-product-story .ng-story-copy:before{
    display:none !important;
  }
  .ng-product-story .ng-story-copy h2{
    margin:0 0 24px !important;
    max-width:650px !important;
    font-size:clamp(68px,4.85vw,92px) !important;
    line-height:.97 !important;
    letter-spacing:-.055em !important;
    color:#13211c !important;
  }
  .ng-product-story .ng-story-copy h2 span{
    color:#0b4d40 !important;
  }
  .ng-product-story .ng-story-copy p{
    max-width:560px !important;
    margin:0 !important;
    color:#66756f !important;
    font-size:15px !important;
    line-height:1.72 !important;
  }
  .ng-product-story .ng-story-link{
    margin-top:34px !important;
    padding-bottom:12px !important;
    min-width:174px !important;
    border-bottom:1px solid rgba(9,61,49,.25) !important;
    color:#0b4d40 !important;
  }
  .ng-product-story .ng-story-tag{
    display:grid !important;
    grid-template-columns:1fr minmax(250px,1.45fr) 1fr !important;
    align-items:center !important;
    column-gap:28px !important;
    position:absolute !important;
    left:44px !important;
    bottom:54px !important;
    width:calc(55vw - 88px) !important;
    min-height:112px !important;
    z-index:4 !important;
    margin:0 !important;
    padding:25px 30px !important;
    border:1px solid rgba(223,241,234,.12) !important;
    border-radius:0 !important;
    background:rgba(5,49,40,.84) !important;
    color:rgba(255,255,255,.92) !important;
    box-shadow:none !important;
    backdrop-filter:blur(5px) !important;
  }
  .ng-product-story .ng-story-tag span{
    display:block !important;
    color:rgba(255,255,255,.74) !important;
    font-size:10px !important;
    line-height:1.2 !important;
    letter-spacing:.14em !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
  }
  .ng-product-story .ng-story-tag strong{
    display:block !important;
    color:white !important;
    font-size:24px !important;
    line-height:1.05 !important;
    letter-spacing:-.035em !important;
    font-weight:900 !important;
  }
  .ng-product-story .ng-story-tag-end{
    justify-self:start !important;
    text-align:left !important;
  }
  .ng-product-story .ng-story-tag i{
    display:none !important;
  }
}

/* Final product-story phone override. This sits after the generic phone layer
   so its spacing wins in the cascade. Mobile uses a real image element so the
   product artwork keeps its natural aspect ratio instead of being cropped as a
   background image. */
.ng-story-mobile-panel{
  display:none;
}
@media(max-width:800px){
  .ng-product-story{
    min-height:0 !important;
    padding:24px 0 48px !important;
    background:#f3f1eb !important;
  }
  .ng-product-story .ng-story-image{
    display:none !important;
  }
  .ng-product-story .ng-story-product,
  .ng-product-story .ng-story-shade,
  .ng-product-story .ng-story-tag{
    display:none !important;
  }
  .ng-product-story .ng-story-inner{
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    gap:16px !important;
    width:calc(100% - 28px) !important;
    max-width:430px !important;
    padding-top:0 !important;
    margin-top:0 !important;
  }
  .ng-story-mobile-panel{
    display:block !important;
    order:2 !important;
    position:relative !important;
    width:100% !important;
    margin:0 !important;
    overflow:hidden !important;
    background:#fbfaf6 !important;
    box-shadow:0 18px 44px rgba(16,48,39,.10), inset 0 0 0 1px rgba(14,66,55,.08) !important;
  }
  .ng-story-mobile-image{
    display:block !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
  }
  .ng-story-mobile-chip{
    position:absolute !important;
    left:18px !important;
    bottom:16px !important;
    transform:none !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:10px !important;
    padding:8px 12px 8px 0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#12342c !important;
    box-shadow:none !important;
    font-size:8px !important;
    line-height:1.15 !important;
    letter-spacing:.11em !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
    text-shadow:0 1px 12px rgba(255,255,255,.88) !important;
  }
  .ng-story-mobile-chip:before{
    content:"" !important;
    display:block !important;
    width:28px !important;
    height:1px !important;
    background:rgba(18,52,44,.28) !important;
  }
  .ng-story-mobile-chip i{
    width:7px !important;
    height:7px !important;
    border-radius:50% !important;
    background:#0b4d40 !important;
    box-shadow:0 0 0 5px rgba(255,255,255,.70) !important;
    flex:0 0 auto !important;
  }
  .ng-product-story .ng-story-copy{
    order:1 !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    margin-top:0 !important;
    padding-top:0 !important;
    transform:none !important;
  }
  .ng-product-story .ng-story-copy:before{
    display:none !important;
  }
  .ng-product-story .ng-story-copy h2{
    max-width:100% !important;
    margin:0 0 14px !important;
    font-size:42px !important;
    line-height:.94 !important;
    letter-spacing:-.035em !important;
  }
  .ng-product-story .ng-story-copy p{
    max-width:100% !important;
    margin:0 !important;
    font-size:14px !important;
    line-height:1.55 !important;
  }
}
@media(max-width:430px){
  .ng-product-story{
    padding-top:34px !important;
  }
  .ng-product-story .ng-story-copy h2{
    font-size:36px !important;
  }
}

/* Single-axis alignment system. Content should share a flush-left keyline
   across pages, with only visual mechanisms such as icons and map pins centered. */
:where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,label){
  text-align:left !important;
}
:where(p,li){
  max-width:70ch;
}
:where(form,fieldset){
  display:grid;
  align-items:start;
  justify-items:start;
}
:where(input,textarea,select){
  max-width:100%;
  text-align:left;
}
.hero-grid,
.section-head,
.split-head,
.video-library-head,
.careers-head,
.education-head,
.news-head,
.final-grid,
.gr-head,
.hero-reference-inner{
  align-items:start !important;
  justify-items:start !important;
}
.section-head,
.split-head,
.video-library-head,
.careers-head,
.education-head,
.news-head{
  grid-template-columns:minmax(0,1fr) !important;
}
.film-head{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
}
.split-head-copy,
.news-head-copy,
.knowledge-intro,
.education-intro,
.careers-intro,
.network-intro,
.global-head p,
.gm2-head p,
.gr-head p,
.film-head p,
.final p{
  justify-self:start !important;
  align-self:start !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
.section-copy,
.split-head-copy,
.news-head-copy,
.knowledge-intro,
.education-intro,
.careers-intro,
.network-intro,
.quality-copy,
.feature-copy,
.video-story-copy,
.knowledge-feature-copy,
.ng-story-copy,
.story-copy{
  max-width:70ch !important;
}
/* Same readability cap, but deliberately NOT !important: the feature card
   sets its own width (.news-feature-link .news-feature-copy, and the
   full-width variant under 900px). While this sat in the group above, both
   of those were dead rules and the mobile copy never spanned the image. */
.news-feature-copy{
  max-width:70ch;
}
.section-copy p,
.split-head-copy p,
.news-head-copy p,
.knowledge-intro p,
.education-intro p,
.careers-intro p,
.network-intro p,
.quality-copy p,
.feature-copy p,
.video-story-copy p,
.news-feature-copy p,
.knowledge-feature-copy p,
.ng-story-copy p,
.story-copy p,
.cap p,
.related-card p{
  font-size:max(16px,1em) !important;
  line-height:1.72 !important;
}
.hero-actions,
.hero-reference-copy .hero-actions{
  justify-content:flex-start !important;
  align-items:flex-start !important;
}
.btn,
.cta{
  justify-content:flex-start;
  text-align:left;
}
.gr-head,
.careers-video-poster{
  text-align:left !important;
}
.gr-head{
  margin-left:0 !important;
  margin-right:0 !important;
}
.gr-head p,
.gr-line{
  margin-left:0 !important;
  margin-right:0 !important;
}
.careers-video-poster{
  align-items:flex-start !important;
}

.people-group-heading{
  grid-column:1/-1;
  margin:22px 0 4px;
  padding-top:0;
  border-top:0;
  color:var(--forest);
  font-size:22px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:-.025em;
}
.people-group-heading:first-child{
  margin-top:0;
  padding-top:0;
  border-top:0;
}

/* Prevent large multi-line headings from colliding when Montserrat's bold
   glyphs wrap across two lines. */
.section h2,
.split-head h2,
.video-library-head h2,
.film-head h2,
.final h2,
.compliance-header h2,
.quality-copy h2,
.global-map-section h2,
.ng-scale-bottom h2{
  line-height:1.06 !important;
}

/* Quality page: keep the compliance heading on the same left keyline as the
   top quality copy instead of using its wider source container. */
.compliance-certification-section{
  padding-left:0 !important;
  padding-right:0 !important;
}
.compliance-certification-inner{
  width:min(var(--shell),calc(100% - var(--gutter) * 2)) !important;
  max-width:var(--shell) !important;
  margin-inline:auto !important;
}
.compliance-header{
  grid-template-columns:minmax(0,1fr) !important;
  gap:22px !important;
  align-items:start !important;
  justify-items:start !important;
}
.compliance-header h2,
.compliance-header p{
  margin-left:0 !important;
  margin-right:0 !important;
}
.compliance-header p{
  max-width:70ch !important;
}

/* Homepage cinematic hero inspired by a full-media health-tech hero pattern,
   translated into Newgate's own brand language. */
.hero-reference{
  min-height:100svh !important;
  background:#071f19 !important;
  align-items:stretch !important;
}
.hero-reference .reveal{
  opacity:1 !important;
  transform:none !important;
}
.hero-reference-image{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}
.hero-reference-image::before{
  inset:0 !important;
  background-position:center !important;
  opacity:.42 !important;
  filter:saturate(.9) contrast(1.04) !important;
}
.hero-reference-fade{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background:
    radial-gradient(circle at 76% 24%,rgba(191,232,215,.16) 0%,rgba(191,232,215,0) 34%),
    linear-gradient(90deg,rgba(5,29,23,.92) 0%,rgba(5,29,23,.78) 34%,rgba(5,29,23,.34) 64%,rgba(5,29,23,.14) 100%),
    linear-gradient(180deg,rgba(5,29,23,.18) 0%,rgba(5,29,23,.18) 42%,rgba(5,29,23,.82) 100%) !important;
}
.hero-reference-inner{
  min-height:100svh !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:end !important;
  gap:48px !important;
  padding-top:132px !important;
  padding-bottom:112px !important;
}
.hero-reference-copy{
  width:min(760px,60vw) !important;
  max-width:760px !important;
  padding:0 !important;
  color:#fff !important;
}
.hero-pill{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  min-height:34px;
  margin-bottom:20px;
  padding:9px 14px;
  border:1px solid rgba(207,229,219,.32);
  border-radius:999px;
  background:rgba(250,248,243,.10);
  color:#e9f5ef;
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
  backdrop-filter:blur(12px);
}
.hero-reference-copy .kicker{
  color:#cfe5db !important;
  margin:0 0 18px !important;
}
.hero-reference-copy .kicker::before{
  background:#cfe5db !important;
}
.hero-reference-copy h1{
  max-width:820px !important;
  margin:0 0 22px !important;
  color:#fff !important;
  font-size:clamp(78px,8.8vw,142px) !important;
  line-height:.82 !important;
  letter-spacing:-.06em !important;
}
.hero-reference-copy h1 span{
  color:#b7cfa0 !important;
}
.hero-reference-copy .hero-copy{
  max-width:590px !important;
  color:rgba(244,250,247,.84) !important;
  font-size:18px !important;
  line-height:1.62 !important;
}
.hero-reference-copy .hero-actions{
  margin-top:30px !important;
}
.hero-reference-copy .btn{
  border-radius:999px !important;
  padding:15px 20px !important;
}
.hero-reference-copy .btn.primary{
  background:#f8fbf8 !important;
  color:#08382f !important;
  border-color:#f8fbf8 !important;
  box-shadow: 0px 3px 16px 0px rgba(0,0,0,0.1);
  transition: all .2s ease;



}
.hero-reference-copy .btn.primary:hover{
  background:#f8fbf8 !important;

  border-color:#f8fbf8 !important;
  box-shadow: 0px 3px 16px 0px rgba(0,0,0,0.1);
}
.hero-reference-copy .btn.secondary{
  border-color:rgba(248,251,248,.48) !important;
  color:#fff !important;
  background:rgba(255,255,255,.06) !important;
  box-shadow: 0px 3px 16px 0px rgba(0,0,0,0.1);
  transition: all .2s ease;
}
.hero-reference-copy .btn.secondary:hover{

  box-shadow: 0px 3px 16px 0px rgba(0,0,0,0.1);
  background:#fff !important;
  border-color:#fff !important;
  color: #000 !important;
}
.hero-integrated-stats{
  align-self:end !important;
  display:grid;
  grid-template-columns:repeat(3,minmax(120px,1fr));
  min-width:min(560px,42vw);
  border:1px solid rgba(207,229,219,.24);
  background:rgba(5,35,28,.58);
  backdrop-filter:blur(18px);
}
.hero-integrated-stat{
  padding:20px 22px;
  border-right:1px solid rgba(207,229,219,.18);
}
.hero-integrated-stat:last-child{
  border-right:0;
}
.hero-integrated-stat strong,
.hero-integrated-stat span{
  display:block;
}
.hero-integrated-stat strong{
  color:#fff;
  font-size:20px;
  line-height:1.05;
  font-weight:850;
  letter-spacing:-.03em;
}
.hero-integrated-stat span{
  margin-top:8px;
  color:rgba(223,239,232,.72);
  font-size:9px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.hero-media-control{
  position:absolute;
  right:24px;
  bottom:24px;
  z-index:5;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(207,229,219,.28);
  border-radius:50%;
  background:rgba(5,29,23,.56);
  color:#fff;
  backdrop-filter:blur(14px);
  cursor:pointer;
}
.hero-media-icon-pause{
  width:13px;
  height:16px;
  background:linear-gradient(90deg,currentColor 0 36%,transparent 36% 64%,currentColor 64% 100%);
}
.hero-media-icon-play{
  display:none;
  width:0;
  height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-left:12px solid currentColor;
  transform:translateX(1px);
}
.hero-media-control[aria-pressed="true"] .hero-media-icon-pause{
  display:none;
}
.hero-media-control[aria-pressed="true"] .hero-media-icon-play{
  display:block;
}
.reference-stats{
  display:none !important;
}

@media(max-width:1300px){
  .hero-reference-inner{
    gap:32px !important;
    padding-bottom:88px !important;
  }
  .hero-reference-copy{
    width:min(600px,54vw) !important;
  }
  .hero-reference-copy h1{
    font-size:clamp(64px,9vw,112px) !important;
  }
  .hero-integrated-stats{
    min-width:min(400px,36vw);
  }
  .hero-integrated-stat{
    padding:16px 16px;
  }
}

@media(max-width:900px){
  .hero-reference-inner{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  .hero-reference-copy{
    width:100% !important;
  }
  .hero-integrated-stats{
    min-width:0;
    width:100%;
  }
}

@media(max-width:680px){
  .hero-reference{
    min-height:calc(100svh - 64px) !important;
    padding:64px 0 0 !important;
  }
  .hero-reference-image{
    top:64px !important;
    height:calc(100% - 64px) !important;
  }
  .hero-reference-image::before{
    background-position:61% 48% !important;
    opacity:.36 !important;
  }
  .hero-reference-fade{
    top:64px !important;
    height:calc(100% - 64px) !important;
    background:
      linear-gradient(180deg,rgba(5,29,23,.16) 0%,rgba(5,29,23,.20) 36%,rgba(5,29,23,.86) 100%),
      linear-gradient(90deg,rgba(5,29,23,.84) 0%,rgba(5,29,23,.36) 100%) !important;
  }
  .hero-reference-inner{
    width:min(calc(100% - var(--gutter) * 2),430px) !important;
    min-height:calc(100svh - 64px) !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;
    align-items:flex-start !important;
    padding:42px 0 28px !important;
  }
  .hero-reference-copy{
    max-width:100% !important;
  }
  .hero-pill{
    min-height:30px;
    margin-bottom:16px;
    padding:8px 12px;
    font-size:9px;
  }
  .hero-reference-copy .kicker{
    margin-bottom:14px !important;
    font-size:9px !important;
    letter-spacing:.09em !important;
  }
  .hero-reference-copy h1{
    margin-bottom:16px !important;
    font-size:clamp(50px,15vw,68px) !important;
    line-height:.84 !important;
  }
  .hero-reference-copy .hero-copy{
    max-width:330px !important;
    color:rgba(244,250,247,.88) !important;
    font-size:15px !important;
    line-height:1.52 !important;
  }
  .hero-reference-copy .hero-actions{
    gap:10px !important;
    margin-top:22px !important;
  }
  .hero-reference-copy .btn{
    min-height:44px !important;
    border-radius:999px !important;
  }
  .hero-integrated-stats{
    display:none !important;
  }
  .hero-media-control{
    right:16px;
    bottom:16px;
    width:38px;
    height:38px;
  }
  .reference-stats{
    display:block !important;
    background:#071f19 !important;
    border-top:1px solid rgba(207,229,219,.18) !important;
    border-bottom:0 !important;
  }
  .reference-stats .stats-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    border:0 !important;
    width:100% !important;
  }
  .reference-stats .stat{
    min-height:96px !important;
    padding:18px 14px !important;
    border-right:1px solid rgba(207,229,219,.14) !important;
    color:#fff !important;
  }
  .reference-stats .stat:nth-child(4){
    display:none !important;
  }
  .reference-stats .stat strong{
    color:#fff !important;
    font-size:22px !important;
  }
  .reference-stats .stat span{
    max-width:110px !important;
    color:rgba(223,239,232,.72) !important;
    font-size:8px !important;
    line-height:1.35 !important;
  }
}

/* Homepage mobile: remove the tall blank gap below the CTAs and keep the
   first screen compact, image-led and flush-left. */
@media(max-width:680px){
  .site-header nav{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
  }
  .site-header .links,
  .site-header nav > .cta{
    display:none !important;
  }
  .site-header .nav-toggle{
    display:block !important;
    position:fixed !important;
    top:13px !important;
    right:10px !important;
    z-index:120 !important;
    margin-left:auto !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  .hero-reference{
    min-height:0 !important;
    display:block !important;
    padding:64px 0 0 !important;
    background:#f7f5ef !important;
  }
  .hero-reference-inner{
    width:min(100% - 40px,430px) !important;
    min-height:0 !important;
    display:block !important;
    padding:48px 0 26px !important;
  }
  .hero-reference-image{
    top:64px !important;
    width:100% !important;
    height:318px !important;
    bottom:auto !important;
  }
  .hero-reference-image::before{
    inset:-4% !important;
    background-position:62% 38% !important;
  }
  .hero-reference-image::after{
    display:none !important;
  }
  .hero-reference-fade{
    top:64px !important;
    width:100% !important;
    height:390px !important;
    background:linear-gradient(180deg,
      rgba(247,245,239,.03) 0%,
      rgba(247,245,239,.16) 34%,
      rgba(247,245,239,.72) 66%,
      #f7f5ef 100%) !important;
  }
  .hero-reference-copy{
    width:100% !important;
    max-width:360px !important;
    margin:0 !important;
    padding:0 !important;
  }
  .hero-reference-copy .kicker{
    gap:11px !important;
    font-size:10px !important;
    line-height:1.2 !important;
    letter-spacing:.11em !important;
  }
  .hero-reference-copy .kicker::before{
    width:40px !important;
    flex-basis:40px !important;
  }
  .hero-reference-copy h1{
    margin:16px 0 18px !important;
    font-size:clamp(44px,13.5vw,52px) !important;
    line-height:.9 !important;
    letter-spacing:-.045em !important;
  }
  .hero-reference-copy .hero-copy{
    max-width:340px !important;
    font-size:14px !important;
    line-height:1.55 !important;
  }
  .hero-reference-copy .hero-actions{
    flex-direction:column !important;
    gap:12px !important;
    margin-top:22px !important;
  }
  .hero-reference-copy .btn{
    width:auto !important;
    min-height:44px !important;
    padding:13px 18px !important;
    font-size:10px !important;
    line-height:1.2 !important;
  }
  .reference-stats{
    margin-top:0 !important;
  }
  .reference-stats .stats-grid{
    width:100% !important;
    min-height:0 !important;
    opacity:1 !important;
    transform:none !important;
  }
  .reference-stats .stat{
    min-height:148px !important;
    padding:26px 20px !important;
    justify-content:center !important;
  }
  .reference-stats .stat strong{
    font-size:30px !important;
    line-height:1 !important;
  }
  .reference-stats .stat span{
    max-width:130px !important;
    margin-top:10px !important;
    font-size:10px !important;
    line-height:1.45 !important;
  }
}

/* Final homepage hero phone pass: keep the cinematic treatment readable after
   the earlier compact-mobile overrides in this file. */
@media(max-width:680px){
  .hero-reference{
    min-height:calc(100svh - 64px) !important;
    display:block !important;
    padding:64px 0 0 !important;
    background:#071f19 !important;
  }
  .hero-reference-image{
    top:64px !important;
    width:100% !important;
    height:calc(100% - 64px) !important;
    bottom:auto !important;
  }
  .hero-reference-image::before{
    inset:0 !important;
    background-position:61% 48% !important;
    opacity:.36 !important;
  }
  .hero-reference-fade{
    top:64px !important;
    width:100% !important;
    height:calc(100% - 64px) !important;
    background:
      linear-gradient(180deg,rgba(5,29,23,.18) 0%,rgba(5,29,23,.24) 34%,rgba(5,29,23,.90) 100%),
      linear-gradient(90deg,rgba(5,29,23,.88) 0%,rgba(5,29,23,.32) 100%) !important;
  }
  .hero-reference-inner{
    width:min(calc(100% - var(--gutter) * 2),430px) !important;
    min-height:calc(100svh - 64px) !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;
    align-items:flex-start !important;
    padding:42px 0 28px !important;
  }
  .hero-reference-copy{
    width:100% !important;
    max-width:100% !important;
    color:#fff !important;
  }
  .hero-reference-copy h1{
    color:#fff !important;
    font-size:clamp(44px,13.2vw,58px) !important;
    line-height:.86 !important;
    letter-spacing:-.05em !important;
  }
  .hero-reference-copy .hero-copy{
    color:rgba(244,250,247,.88) !important;
    font-size:15px !important;
    line-height:1.52 !important;
  }
  .hero-reference-copy .btn.primary{
    background:#f8fbf8 !important;
    color:#08382f !important;
  }
  .hero-reference-copy .btn.secondary{
    border-color:rgba(248,251,248,.42) !important;
    color:#fff !important;
    background:rgba(255,255,255,.06) !important;
  }
  .reference-stats .stats-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .reference-stats .stat{
    min-width:0 !important;
    min-height:96px !important;
    padding:18px 10px !important;
  }
  .reference-stats .stat strong{
    font-size:21px !important;
  }
  .reference-stats .stat span{
    max-width:92px !important;
    font-size:7px !important;
    letter-spacing:.08em !important;
  }
}

/* Minimal homepage hero: more visible video, no labels, smaller headline. */
.hero-reference-fade{
  background:
    radial-gradient(circle at 76% 24%,rgba(191,232,215,.08) 0%,rgba(191,232,215,0) 34%),
    linear-gradient(90deg,rgba(5,29,23,.64) 0%,rgba(5,29,23,.42) 34%,rgba(5,29,23,.16) 64%,rgba(5,29,23,.04) 100%),
    linear-gradient(180deg,rgba(5,29,23,.04) 0%,rgba(5,29,23,.08) 42%,rgba(5,29,23,.52) 100%) !important;
}
.hero-pill,
.hero-reference-copy .kicker,
.hero-integrated-stats{
  display:none !important;
}
@media(max-width:680px){
  .hero-reference-fade{
    background:
      linear-gradient(180deg,rgba(5,29,23,.06) 0%,rgba(5,29,23,.12) 34%,rgba(5,29,23,.64) 100%),
      linear-gradient(90deg,rgba(5,29,23,.54) 0%,rgba(5,29,23,.12) 100%) !important;
  }
  .hero-reference-copy{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
  }
}

/* Liquid header and tighter minimal hero headline. */
.site-header{
  background:rgba(250,248,243,.92) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:none !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
  transition:background .28s ease,border-color .28s ease,box-shadow .28s ease,color .28s ease !important;
}
body.hero-header-glass .site-header{
  background:rgba(8,34,28,.18) !important;
  border-bottom:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 18px 44px rgba(5,29,23,.08) !important;
  color:#fff !important;
  backdrop-filter:blur(24px) saturate(1.45) !important;
  -webkit-backdrop-filter:blur(24px) saturate(1.45) !important;
}
body.hero-header-glass .site-header .brand,
body.hero-header-glass .site-header .links,
body.hero-header-glass .site-header .links a,
body.hero-header-glass .site-header .links a[aria-current="page"]{
  color:#fff !important;
}
body.hero-header-glass .site-header .brand{
  text-shadow:0 1px 18px rgba(0,0,0,.22);
}
body.hero-header-glass .site-header .cta{
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.38) !important;
  color:#fff !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
}
body.hero-header-glass .site-header .nav-toggle{
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(255,255,255,.38) !important;
}
body.hero-header-glass .site-header .nav-toggle span{
  background:#fff !important;
}
.hero-reference-inner{
  align-items:center !important;
  padding-top:104px !important;
  padding-bottom:104px !important;
}
.hero-reference-copy{
  width:min(560px,48vw) !important;
  max-width:560px !important;
  margin-left:-42px !important;
  display:flex !important;
  flex-direction:column !important;
}
.hero-reference-copy h1{
  max-width:600px !important;
  font-size:clamp(48px,5.15vw,82px) !important;
  line-height:1.02 !important;
  margin-bottom:26px !important;
  position:static !important;
  top:auto !important;
}
@media(max-width:680px){
  .site-header{
    background:rgba(250,248,243,.92) !important;
  }
  body.hero-header-glass .site-header{
    background:rgba(8,34,28,.22) !important;
  }
  .hero-reference-inner{
    padding-bottom:54px !important;
  }
  .hero-reference-copy{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
  }
  .hero-reference-copy h1{
    font-size:clamp(34px,9.7vw,42px) !important;
    line-height:1.03 !important;
    margin-bottom:22px !important;
  }
}

/* Button/type prototype and liquid-glass hero media control. */
.hero-reference-copy .btn.primary{
  font-family:"Montserrat",Arial,sans-serif !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  padding:15px 22px !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.07)),
    rgba(8,34,28,.18) !important;
  border:1px solid rgba(255,255,255,.42) !important;
  color:#fff !important;
  box-shadow:0 18px 44px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.30) !important;
  backdrop-filter:blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.5) !important;
}
.hero-reference-copy .btn.primary:hover{
  background:
    linear-gradient(145deg,rgba(255,255,255,.30),rgba(255,255,255,.10)),
    rgba(8,34,28,.24) !important;
}
.hero-reference-copy .hero-actions{
  align-items:center !important;
  gap:12px !important;
  margin-top:48px !important;
}
.hero-media-control{
  position:absolute !important;
  z-index:12 !important;
  top:104px !important;
  right:60px !important;
  bottom:auto !important;
  width:auto !important;
  height:auto !important;
  padding:4px !important;
  border:none !important;
  background:transparent !important;
  color:#fff !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.4)) !important;
  transition:transform .25s ease, opacity .25s ease !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.hero-media-control.is-visible{
  opacity:1 !important;
  pointer-events:auto !important;
}
.hero-media-control.is-visible:hover{
  opacity:.8 !important;
}
.overlay-media-toggle_icon{
  width:22px;
  height:22px;
  display:block;
}
.overlay-media-toggle_icon--play{
  display:none;
}
.hero-media-control[aria-pressed="true"] .overlay-media-toggle_icon--pause{
  display:none;
}
.hero-media-control[aria-pressed="true"] .overlay-media-toggle_icon--play{
  display:block;
}
.hero-media-control:hover{
  background:transparent !important;
  transform:scale(1.1) !important;
  opacity:.8 !important;
}
@media(max-width:680px){
  .hero-reference-copy .btn.primary{
    font-size:14px !important;
    padding:14px 18px !important;
  }
  .hero-reference-copy .hero-actions{
    align-items:flex-start !important;
    margin-top:42px !important;
    gap:10px !important;
  }
  .hero-media-control{
    width:40px !important;
    height:40px !important;
    right:18px !important;
    bottom:54px !important;
  }
}

/* ---- Compliance video badge (quality.html) + reusable video lightbox ---
   `.compliance-main > *` elsewhere is forced to position:relative !important
   (see the overlay-legibility fix), so the wrapper needs matching specificity
   to win back position:absolute — that's why it's a two-class selector. */
.compliance-main > .compliance-video-badge-wrap{
  position:absolute !important;
  top:28px;
  left:50%;
  transform:translateX(-50%);
  z-index:2 !important;
}
.compliance-video-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 6px 6px 16px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:999px;
  background:rgba(3,26,21,.55);
  backdrop-filter:blur(10px);
  color:#eef4f1;
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.compliance-video-badge:hover{
  background:rgba(3,26,21,.72);
  border-color:rgba(255,255,255,.38);
  transform:translateY(-1px);
}
.compliance-video-badge-play{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  flex:0 0 auto;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.4);
  background:transparent;
  color:#fff;
}
.compliance-video-badge-play svg{width:10px;height:10px}

.video-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:28px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease,visibility .28s ease;
}
.video-lightbox.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.video-lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,26,21,.8);
  backdrop-filter:blur(14px);
}
.video-lightbox-dialog{
  position:relative;
  z-index:2;
  width:100%;
  max-width:920px;
  border-radius:20px;
  overflow:hidden;
  background:#000;
  box-shadow:0 40px 120px rgba(0,0,0,.35);
}
.video-lightbox-dialog video{
  display:block;
  width:100%;
  max-height:80vh;
  background:#000;
}
/* YouTube-embedded lightboxes (Liza Raven library) — an iframe stands in for
   the native <video>, sized to a fixed 16:9 rather than the source's own
   dimensions. */
.video-lightbox-dialog-embed{
  aspect-ratio:16/9;
  width:100%;
  max-width:920px;
}
.video-lightbox-dialog-embed iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#000;
}
.video-lightbox-close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:3;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:23px;
  line-height:1;
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:.25s ease;
}
.video-lightbox-close:hover{
  background:rgba(255,255,255,.26);
  transform:rotate(8deg) scale(1.06);
}
@media(max-width:620px){
  .compliance-video-badge-label{font-size:10px}
}

/* ==========================================================================
   PEOPLE PAGE — video hero + team photo corner-radius consolidation
   ========================================================================== */

/* This hero now reuses the homepage's .hero-reference / .hero-reference-image /
   .hero-reference-fade / .hero-reference-inner / .hero-reference-copy pattern
   directly — a full-bleed video background with a fade gradient over the left
   side and the heading/copy sitting on top of that gradient — instead of the
   previous boxed-media two-column layout, so it stays visually identical to
   the homepage hero and inherits any future gradient/typography changes to
   that shared pattern for free. .hero-reference--people only carries the
   deltas specific to this page (video framing, caption chip). .hero-reference
   / .hero-reference--no-glass / .hero-video / .hero-media-control are kept
   because main.js's heroHeaderState()/heroVideo() query them directly. Note:
   .hero-reference .reveal is forced to opacity:1/transform:none elsewhere in
   this file, so the reveal class below is inert here by design — hero
   content is visible on load, not scroll-revealed; kept for consistency with
   how every other hero section is written. */
.hero-reference--people .hero-video{
  object-position:50% 32%;
}
.hero-reference--people .hero-reference-image::before{
  background-image:url("../img/people-hero-poster.webp") !important;
}
/* The base .hero-media-control sits bottom-right (right:60px !important;
   bottom:88px !important), which is exactly where .hero-reference-caption
   below also anchors — a real collision only this page has, since it's the
   only .hero-reference variant with a caption chip. Move the control to the
   top-right corner here instead; needs !important to beat that bare
   !important base rule, a plain override loses regardless of specificity. */
/* Standardized media control positioning globally */

/* A caption chip identifying the footage, echoing .about-intro-card's look
   (dark translucent chip, blurred) but anchored to the hero's bottom-right
   corner over the video rather than spanning a boxed media element's full
   width, since the video is now the section's own background. */
.hero-reference-caption{
  position:absolute;
  z-index:3;
  right:44px;
  bottom:40px;
  max-width:300px;
  padding:16px 18px;
  border-radius:2px;
  background:rgba(8,43,35,.78);
  color:#fff;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.hero-reference-caption span{
  display:block;
  margin-bottom:8px;
  color:#bdd8ce;
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hero-reference-caption strong{
  display:block;
  font-size:16px;
  line-height:1.28;
  letter-spacing:-.01em;
  text-transform:none;
}
.hero-reference-caption small{
  display:block;
  margin-top:10px;
  color:#cfe5db;
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}

@media(max-width:800px){
  .hero-reference--people .hero-video{
    object-position:50% 24%;
  }
  /* Below 800px .hero-reference-inner stacks the video above the copy and
     bottom-aligns the copy inside the hero (see the shared .hero-reference-*
     800px rules above), so an absolutely-positioned bottom-right caption
     would sit on top of that stacked text. Simplest fix is to drop the
     caption on small screens rather than fight that stacking for a
     secondary, non-essential piece of copy. */
  .hero-reference-caption{
    display:none;
  }
}

/* Consolidated team-photo corner radius — both the leadership grid and the
   "Our team" grid, resolving the previous 2px vs 6px inconsistency in one
   place. overflow:hidden is already set on .team-photo elsewhere and stays
   in effect, so the <img> is still clipped to these rounder corners.
   Pseudo-element hover glows (.team-tile::before/::after) are already
   display:none !important elsewhere in the file, so they're irrelevant
   to this change. 20px sits deliberately between the site's small-pill
   radius (.nav-panel-link, 16px) and its larger card radius
   (.cap/.compliance-card/.testing-card, 24px). */
.team-photo,
.leadership-team-grid .team-photo,
#leadership-team .team-photo{
  border-radius:20px !important;
}

/* The NEWGATE/ng watermark baked into each team headshot sits at a
   different position and scale per photo (an inconsistency in the source
   photography, not something CSS can fully normalise). The default
   object-position (50% 50%, center-center) crops an equal slice off the
   top and bottom of every photo — on several images that slice was enough
   to cut the "NEWGATE" wordmark off entirely, leaving only the "ng" mark,
   while other photos kept the full lockup. Anchoring vertically to the top
   (object-position: 50% 0%) crops the excess only from the bottom instead,
   so the full watermark in the top-left corner is always in frame, for
   every photo, without touching the source files. */
.team-photo img,
.leadership-team-grid .team-photo img,
.team-tiles .team-photo img,
#leadership-team .team-photo img{
  object-position:50% 0% !important;
}

/* Even fully in-frame, the baked-in watermark still varies in size/position
   per photo (see note above) — no crop can make differently-sized marks
   look "the same size". Fix: cover the corner where it sits with a scrim
   (sized generously past the largest observed mark, ~26%/22% of the card,
   comfortably clear of the centered face) and draw one uniform text
   lockup on top, identical on every card regardless of the source photo. */
/* An earlier "remove the hover green patch" cleanup forces
   .team-photo::before/::after to content:none/display:none !important
   (see "TEAM HOVER CLEANUP" / "FINAL TEAM IMAGE FIX" above) — match its
   !important so this badge actually renders. */
.team-photo::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:2 !important;
  top:0 !important; left:0 !important;
  width:78px !important; height:66px !important;
  background:linear-gradient(160deg,rgba(6,40,32,.62),rgba(6,40,32,.16) 75%) !important;
  box-shadow:none !important;
  pointer-events:none;
}
.team-photo::after{
  content:"NEWGATE\A ng" !important;
  white-space:pre;
  display:block !important;
  position:absolute !important;
  z-index:3 !important;
  top:12px !important; left:12px !important;
  font-family:Montserrat,Arial,sans-serif;
  font-weight:700;
  color:#fff !important;
  font-size:8px;
  line-height:2.2;
  letter-spacing:.16em;
  background:none !important;
  box-shadow:none !important;
  pointer-events:none;
}

/* ── BETTER HEADER STYLES FOR PEOPLE PAGE ── */
.team-compact .section-head h2 {
  font-family: Montserrat, sans-serif !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: var(--forest) !important;
  margin-bottom: 16px !important;
}

.team-compact .section-head h2 span {
  color: rgba(11, 63, 52, 0.5) !important;
}

.team-compact .team-intro {
  font-family: Montserrat, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: rgba(11, 63, 52, 0.8) !important;
  max-width: 600px !important;
  margin: 0 !important;
}

.people-group-heading {
  font-family: Montserrat, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  color: var(--forest) !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 22px !important;
}

/* ==========================================================================
   HOMEPAGE HERO — mobile-only rearrangement: heading top, tagline/CTA/
   play-pause bottom. Scoped entirely inside this breakpoint so desktop is
   untouched (desktop is vertically centered — .hero-reference-inner's
   align-items:center, set above). .hero-reference-copy is pinned
   absolutely to fill the mobile viewport so the heading can sit at its
   natural top position while margin-top:auto on the paragraph pushes it
   (and the CTA button after it, following in normal flow) all the way to
   the bottom in one group. The play/pause control already sits
   bottom-right via its own absolute positioning (line ~7847), unaffected
   by this and left as-is. */
@media(max-width:680px){
  /* Restore the cinematic full-screen video background */
  .hero-reference {
    min-height:100svh !important;
  }
  .hero-reference-image,
  .hero-reference-fade {
    top:0 !important;
    height:100% !important;
  }

  /* Bypass all flexbox parent constraints by simply pinning the text container
     absolutely to the edges of the screen. This guarantees it has 100% height! */
  .hero-reference-copy{
    position:absolute !important;
    top:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:calc(100% - 24px) !important;
    max-width:none !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    padding-top:12px !important; /* Exactly clears the 72px mobile header */
    padding-bottom:12px !important;
    z-index: 10 !important;
  }
  
  .hero-reference-copy h1{
    top:0 !important;
    margin-top:0 !important;
    margin-bottom:16px !important;
  }
  
  .hero-reference-copy .hero-copy{
    margin-top:0 !important;
    padding-top:0 !important;
    margin-bottom:24px !important;
  }
  
  .hero-actions{
    margin-top:0 !important;
    padding-right:0 !important;
  }

  .hero-media-control{
    top:84px !important;
    right:16px !important;
    bottom:auto !important;
  }
}

/* "Continue exploring" cards — tighten title/tagline spacing, lift the text
   block off the bottom edge and give the Explore link more room beneath it.
   Appended at the end of the cascade so it reliably wins over the earlier
   shared ".related-card p" line-height normalizer (which also carries
   !important, further up the file). */
.related-card p{
  line-height:1.4 !important;
}
.related-card .cap-explore{
  margin-bottom:26px;
}

/* Interior page hero headings share one type scale, so the first line of every
   page lands in the same place. Replaces four near-identical clamps that had
   drifted apart (About was 48px/1.06, Media 54px/.92/600, the rest 54px/.94).
   line-height needs !important only to beat `.section h2{line-height:1.06
   !important}` above, which About matches via <section class="section about-intro">. */
.about-intro .section-head h2,
.careers-head h2,
.news-head h2,
.news-head h1,
.education-head h2,
.knowledge-top h2{
  margin:0;
  font-size:clamp(54px,6vw,88px);
  line-height:.94 !important;
  letter-spacing:-.055em;
  font-weight:700;
}

/* ===== NEWS V2 — crawlable editorial archive + article pages ===== */
.news-section-v2{
  background:#eef1eb;
}
.news-section-v2::before{
  display:none;
}
.news-head-v2{
  position:relative;
  z-index:1;
  align-items:start;
  padding-bottom:34px;
  border-bottom:1px solid rgba(11,63,52,.14);
}
.news-kicker{
  display:block;
  margin-bottom:16px;
  color:#527565;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
/* Hidden above 900px, where .news-feature-badge (the absolutely-positioned
   pill) carries this same category/date text instead. Shown only under
   900px - see the media query below - where the badge is hidden in its
   place because it can't track the copy panel's height. */
.news-feature-meta-mobile{
  display:none;
  margin-bottom:14px;
}
.news-feature-link,
.news-card-link,
.news-more-card{
  color:inherit;
  text-decoration:none;
}
.news-feature-link{
  position:relative;
  display:flex;
  /* Copy is a full-height left column rather than a bottom strip, so it can
     centre itself vertically against the image half. */
  align-items:stretch;
  min-height:560px;
  border-radius:8px;
  transition:transform .35s ease,box-shadow .35s ease,filter .35s ease;
}
.news-feature-image,
.news-feature-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.news-feature-image{
  object-fit:cover;
  /* Text occupies the left column, so bias the crop right — keeps the
     photograph's subject in the half that stays visible instead of
     hiding it behind the copy panel. */
  object-position:72% center;
  transition:transform .65s cubic-bezier(.2,.75,.2,1);
}
/* Reads as a text panel beside an image panel, but it is one photograph
   running the full width with a gradient laid over it. The "seam" near the
   middle is a soft stop in the gradient, never a hard edge, so the image
   still resolves as a single background rather than two boxes. */
.news-feature-overlay{
  background:
    linear-gradient(90deg,
      rgba(5,30,24,.97) 0%,
      rgba(5,30,24,.95) 30%,
      rgba(5,30,24,.91) 48%,
      rgba(5,30,24,.74) 60%,
      rgba(5,30,24,.34) 74%,
      rgba(5,30,24,.10) 100%),
    linear-gradient(0deg,rgba(5,24,19,.5),transparent 72%);
}
.news-feature-link:hover .news-feature-image{transform:scale(1.025)}
.news-feature-link .news-feature-badge,
.news-feature-link .news-feature-copy{position:relative;z-index:2}
/* The rule above flips the badge to position:relative purely to get a
   z-index, which turns it into a real flex child: it then steals a column
   from the copy (shrinking it to ~72% on narrow screens) and, under
   align-items:stretch, grows into a full-height outlined box. Absolute
   positioning honours z-index just as well, so put it back in the overlay
   layer where the base rule at .news-feature-badge already places it. */
.news-feature-link .news-feature-badge{
  position:absolute;
}
.news-feature-link:hover{
  transform:translateY(-4px);
  box-shadow:0 34px 90px rgba(8,50,40,.18);
  filter:saturate(1.03);
}
.news-feature-link .news-feature-copy{
  width:52%;
  max-width:640px;
  justify-content:center;
  padding:56px 44px 56px 52px;
}
/* Base .news-feature-copy p sits at .64 alpha, which was fine as a caption
   over a bottom strip but is too faint for a body paragraph read against a
   photograph. Lift it for the feature specifically. */
.news-feature-link .news-feature-copy p{
  color:rgba(246,250,247,.85);
}
.news-feature-link .news-read-link b,
.news-card-cta b{
  display:inline-block;
  transition:transform .25s ease;
}
.news-feature-link:hover .news-read-link b,
.news-card-link:hover .news-card-cta b{
  transform:translateX(4px);
}
.news-ledger{
  margin-top:42px;
}
.news-card-link{
  min-height:100%;
  border-radius:8px;
  cursor:pointer;
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.news-card-link:hover{
  transform:translateY(-4px);
  border-color:rgba(11,63,52,.2);
  box-shadow:0 22px 55px rgba(11,63,52,.09);
}
.news-card-link:focus-visible,
.news-feature-link:focus-visible,
.news-more-card:focus-visible,
.news-breadcrumb a:focus-visible{
  outline:3px solid rgba(11,63,52,.45);
  outline-offset:4px;
}
.news-card-link .news-card-thumbnail{
  cursor:pointer;
  border-radius:6px;
}
.news-card-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:auto;
  padding-top:28px;
  color:var(--forest);
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.news-article-page{
  position:relative;
  min-height:100vh;
  overflow:visible;
  background:#f6f4ee;
  touch-action:pan-y;
}
.news-article-hero{
  padding:92px 0 72px;
  background:#f1f4ef;
  color:#173e33;
}
.news-article-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(360px,1.22fr);
  gap:58px;
  align-items:center;
}
.news-article-heading,
.news-article-image{
  min-width:0;
  width:100%;
  max-width:100%;
}
.news-breadcrumb{
  margin-bottom:34px;
}
.news-breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.news-breadcrumb li{
  color:#2f7058;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.news-breadcrumb li+li::before{
  content:"/";
  margin-right:8px;
  color:#91a29a;
}
.news-breadcrumb li[aria-current="page"]{
  max-width:42ch;
  color:#6d7d76;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.news-breadcrumb a{
  padding-bottom:5px;
  border-bottom:1px solid rgba(11,63,52,.22);
  text-decoration:none;
}
.news-article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  color:#6d9f8d;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.news-article-heading h1{
  margin:18px 0 24px;
  max-width:720px;
  color:#103b30;
  font-size:clamp(44px,4.9vw,78px);
  line-height:1;
  letter-spacing:0;
  overflow-wrap:break-word;
}
.news-article-heading p{
  margin:0;
  max-width:620px;
  color:#52665d;
  font-size:17px;
  line-height:1.7;
}
.news-article-image{
  margin:0;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:8px;
  background:#173e33;
  box-shadow:0 24px 64px rgba(11,63,52,.16);
}
.news-article-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.news-article-body{
  padding:78px 0 88px;
}
.news-article-body-grid{
  display:grid;
  grid-template-columns:minmax(190px,.36fr) minmax(0,.64fr);
  gap:70px;
  align-items:start;
}
.news-article-sidebar{
  position:sticky;
  top:116px;
  padding-top:18px;
  border-top:2px solid rgba(11,63,52,.24);
}
.news-article-sidebar span{
  display:block;
  margin-bottom:16px;
  color:var(--forest);
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.news-article-facts{
  display:grid;
  gap:18px;
  margin:0;
}
.news-article-facts div{
  padding-bottom:16px;
  border-bottom:1px solid rgba(11,63,52,.11);
}
.news-article-facts div:last-child{
  padding-bottom:0;
  border-bottom:0;
}
.news-article-facts dt{
  margin:0 0 6px;
  color:#6f8178;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.news-article-facts dd{
  margin:0;
  color:#173e33;
  font-size:14px;
  font-weight:700;
  line-height:1.45;
}
.news-article-copy{
  max-width:70ch;
}
.news-article-copy>h2{
  margin:0 0 26px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(11,63,52,.13);
  color:#173e33;
  font-size:15px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.news-article-copy p{
  margin:0 0 26px;
  color:#24352f;
  font-size:18px;
  line-height:1.8;
}
.news-article-copy p:first-child{
  font-size:22px;
  line-height:1.65;
  color:#173e33;
}
.news-article-video{
  margin:46px 0;
}
.news-article-video-trigger{
  display:grid;
  width:100%;
  grid-template-columns:56px minmax(0,1fr);
  gap:18px;
  align-items:center;
  padding:22px;
  border:1px solid rgba(11,63,52,.14);
  border-radius:8px;
  background:#fffdf8;
  color:#173e33;
  text-align:left;
  cursor:pointer;
  box-shadow:0 18px 42px rgba(11,63,52,.08);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.news-article-video-trigger:hover{
  transform:translateY(-2px);
  border-color:rgba(11,63,52,.3);
  box-shadow:0 24px 58px rgba(11,63,52,.13);
}
.news-article-video-trigger:focus-visible{
  outline:3px solid rgba(42,119,88,.34);
  outline-offset:3px;
}
.news-article-play{
  display:grid;
  width:56px;
  height:56px;
  place-items:center;
  border-radius:50%;
  background:#173e33;
  color:#fff;
  font-size:18px;
  line-height:1;
}
.news-article-video-trigger strong,
.news-article-video-trigger small{
  display:block;
}
.news-article-video-trigger strong{
  margin-bottom:6px;
  font-size:18px;
  line-height:1.2;
}
.news-article-video-trigger small{
  color:#68756f;
  font-size:12px;
  font-weight:700;
  line-height:1.45;
}
.news-article-nav{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:48px;
  padding-top:30px;
  border-top:1px solid rgba(11,63,52,.13);
}
/* The prev/next pair and the "Where to buy" list are the same bordered-card
   pattern, so they share one rule rather than two copies that have to be
   kept identical by hand. Only the card height and the title size differ. */
.news-article-nav a,
.news-article-link-grid a{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:18px;
  border:1px solid rgba(11,63,52,.11);
  border-radius:8px;
  background:#fdfcf7;
  text-decoration:none;
  transition:transform .28s ease,border-color .28s ease;
}
.news-article-nav a{min-height:132px}
.news-article-link-grid a{min-height:96px}
.news-article-nav a:hover,
.news-article-link-grid a:hover{
  transform:translateY(-2px);
  border-color:rgba(11,63,52,.26);
}
.news-article-nav span,
.news-article-link-grid span{
  color:#6f8178;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.news-article-nav strong,
.news-article-link-grid strong{
  color:#173e33;
  letter-spacing:0;
}
.news-article-nav strong{
  font-size:18px;
  line-height:1.18;
}
.news-article-link-grid strong{
  font-size:16px;
  line-height:1.28;
}
.news-article-nav-next{grid-column:2}
/* "Where to buy" - a labelled list rather than a two-item prev/next pair,
   so the grid isn't pinned to exactly two columns. The card styling itself
   is shared with .news-article-nav above. */
.news-article-links{
  margin-top:36px;
  padding-top:30px;
  border-top:1px solid rgba(11,63,52,.13);
}
.news-article-links h3{
  margin:0 0 14px;
  color:#173e33;
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.news-article-link-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}
.news-more-section{
  padding:78px 0 96px;
  background:#e8ece4;
  border-top:1px solid rgba(11,63,52,.1);
}
.news-more-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:30px;
}
.news-more-head h2{
  margin:0;
  color:#173e33;
  font-size:clamp(34px,4vw,56px);
  line-height:1;
  letter-spacing:-.045em;
}
.news-more-head .news-all-link{
  margin-top:0;
  white-space:nowrap;
}
.news-more-rail{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.news-more-card{
  display:grid;
  min-width:0;
  height:100%;
  grid-template-rows:auto auto auto 1fr;
  align-content:start;
  padding:14px;
  border:1px solid rgba(11,63,52,.1);
  border-radius:8px;
  background:#f8f8f4;
  transition:transform .28s ease,border-color .28s ease;
}
.news-more-card:hover{
  transform:translateY(-3px);
  border-color:rgba(11,63,52,.22);
}
.news-more-card img{
  display:block;
  width:100%;
  height:180px !important;
  max-height:180px;
  aspect-ratio:auto;
  flex:none;
  object-fit:cover;
  border-radius:6px;
  margin-bottom:16px;
}
.news-more-card span{
  color:#527565;
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.news-more-card h3{
  margin:10px 0 10px;
  color:#173e33;
  font-size:21px;
  line-height:1.12;
  letter-spacing:0;
}
.news-more-card p{
  margin:0;
  color:#68756f;
  font-size:12px;
  line-height:1.6;
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}
@media(max-width:900px){
  .news-feature-link{
    min-height:460px;
    align-items:flex-end;
  }
  /* Too narrow for a side-by-side split: copy goes back to sitting over the
     full image, so the gradient has to weight to the bottom instead of the
     left or the text loses its backing. */
  .news-feature-link .news-feature-copy{
    width:100%;
    max-width:none;
    justify-content:flex-end;
    padding:44px 30px;
  }
  /* The badge's position:absolute is fixed to the container's top-left
     corner and can't move with the copy panel, which is now bottom-anchored
     and grows upward with the title - a long enough one reaches the badge
     and overlaps it. Hide the badge and show the in-flow line instead,
     which sits wherever the panel's content actually starts. */
  .news-feature-link .news-feature-badge{
    display:none;
  }
  .news-feature-link .news-feature-meta-mobile{
    display:block;
  }
  .news-feature-image{
    object-position:center;
  }
  .news-feature-overlay{
    background:
      linear-gradient(0deg,rgba(5,30,24,.95) 0%,rgba(5,30,24,.78) 34%,rgba(5,30,24,.30) 68%,rgba(5,30,24,.14) 100%);
  }
  .news-article-hero{
    padding:72px 0 58px;
  }
  .news-article-hero-grid,
  .news-article-body-grid{
    grid-template-columns:1fr;
    gap:34px;
  }
  .news-article-sidebar{
    position:static;
  }
  .news-more-rail{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:620px){
  .news-head-v2{
    padding-bottom:24px;
  }
  .news-feature-link{
    min-height:420px;
    border-radius:6px;
  }
  .news-feature-link .news-feature-copy{
    padding:34px 24px;
  }
  .news-grid{
    gap:16px;
  }
  .news-card{
    padding:16px;
  }
  .news-article-heading h1{
    font-size:clamp(34px,10vw,42px);
    overflow-wrap:anywhere;
  }
  .news-article-heading p,
  .news-article-copy p,
  .news-article-copy p:first-child{
    font-size:16px;
    line-height:1.7;
  }
  .news-article-nav{
    grid-template-columns:1fr;
  }
  .news-article-video-trigger{
    grid-template-columns:48px minmax(0,1fr);
    padding:18px;
  }
  .news-article-play{
    width:48px;
    height:48px;
  }
  .news-more-head{
    align-items:start;
    flex-direction:column;
  }
  .news-article-nav-next{grid-column:1}
  .news-more-rail{
    grid-template-columns:1fr;
  }
  .news-more-card img{
    height:190px !important;
    max-height:190px;
  }
}
@media(prefers-reduced-motion:reduce){
  .news-feature-image,
  .news-feature-link,
  .news-card-link,
  .news-more-card{transition:none}
}

/* Footer contact directory: keep navigation compact and give service details
   a full-width reading area on phones. */
@media(max-width:680px){
  .footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:0 24px !important;
  }
  .footer-brand,
  .footer-contact{
    grid-column:1 / -1 !important;
  }
  .footer-contact{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 22px !important;
    padding-top:24px !important;
    border-top:1px solid rgba(174,188,182,.18) !important;
  }
  .footer-contact>h2,
  .footer-contact-phone{
    grid-column:1 / -1;
  }
  .footer-contact>h2{
    margin-bottom:14px !important;
  }
  .footer-contact-block{
    min-width:0;
    padding:0 !important;
  }
  .footer-contact-phone{
    padding-bottom:18px !important;
    margin-bottom:18px;
    border-bottom:1px solid rgba(174,188,182,.14);
  }
  .footer-contact-block+.footer-contact-block{
    padding-top:0;
    border-top:0;
  }
  .footer-contact h3{
    margin-bottom:6px;
    font-size:11px;
  }
  .footer-contact p,
  .footer-contact address{
    margin-bottom:7px;
    font-size:13px;
    line-height:1.55;
  }
  .footer-contact .footer-contact-value,
  .footer-contact .footer-map-link{
    width:auto !important;
    font-size:13px !important;
  }
}
@media(max-width:380px){
  .footer-contact{
    grid-template-columns:1fr;
  }
  .footer-contact>h2,
  .footer-contact-phone{
    grid-column:auto;
  }
  .footer-contact-block{
    padding:16px 0 !important;
    border-bottom:1px solid rgba(174,188,182,.14) !important;
  }
}

/* Wide-screen layout: expand the shared keyline in measured steps so page
   content uses large displays without allowing cards or text to grow without
   limit. These values also keep every section aligned to the same grid. */
@media(min-width:1600px){
  :root{
    --shell:1480px;
    --gutter:40px;
  }
  .hero-reference-copy{
    margin-left:0 !important;
  }
  .hero-media-control{
    right:max(var(--gutter),calc((100vw - var(--shell)) / 2)) !important;
  }
}
@media(min-width:1920px){
  :root{
    --shell:1680px;
    --gutter:56px;
  }
}
@media(min-width:2400px){
  :root{
    --shell:1920px;
    --gutter:72px;
  }
}

/* Responsive hardening pass: keep the current visual direction intact while
   making the windowed desktop/tablet band behave like a real layout tier. */
.hero-reference-copy{
  margin-left:0 !important;
}
.footer-contact .footer-map-link{
  border-bottom:0 !important;
  padding-bottom:0 !important;
  text-decoration:none !important;
}

@media(max-width:1400px) and (min-width:1241px){
  .site-header nav{
    gap:18px;
  }
  .site-header .links{
    gap:22px;
    font-size:10px;
    letter-spacing:.085em;
  }
  .site-header nav > .cta{
    flex:0 0 auto;
    max-width:218px;
    padding:14px 18px;
    font-size:11px;
    line-height:1.15;
  }
}

@media(max-width:1240px){
  .site-header .links,
  .site-header nav > .cta{
    display:none !important;
  }
  .site-header .nav-toggle{
    display:block !important;
    margin-left:auto;
  }
  .nav-panel{
    inset:0 0 0 auto !important;
    width:min(420px,calc(100vw - 24px)) !important;
    max-height:100dvh !important;
    padding:0 !important;
    gap:0 !important;
    border:0 !important;
    border-left:1px solid rgba(255,255,255,.12) !important;
    border-radius:24px 0 0 24px !important;
    background:rgba(7,31,25,.72) !important;
    box-shadow:-20px 0 60px rgba(0,0,0,.25) !important;
    backdrop-filter:blur(24px) saturate(150%) !important;
    -webkit-backdrop-filter:blur(24px) saturate(150%) !important;
    transform:translateX(calc(100% + 24px)) !important;
    transition:transform .4s cubic-bezier(.22,1,.36,1) !important;
    display:flex !important;
    flex-direction:column !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    z-index:200 !important;
  }
  .nav-panel.is-open{
    transform:translateX(0) !important;
  }
  .nav-scrim{
    display:block !important;
    inset:0 !important;
    z-index:190 !important;
    background:rgba(0,0,0,.4) !important;
  }
  .nav-panel-close{
    position:absolute !important;
    top:16px !important;
    right:16px !important;
    width:44px !important;
    height:44px !important;
    display:grid !important;
    place-items:center !important;
    padding:0 !important;
    border:1px solid rgba(255,255,255,.32) !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.10) !important;
    color:#fff !important;
    font-size:26px !important;
    line-height:1 !important;
    cursor:pointer;
    z-index:10 !important;
  }
  .nav-panel-eyebrow{
    display:flex !important;
    align-items:center !important;
    flex:0 0 auto !important;
    min-height:84px !important;
    padding:0 24px !important;
    margin:0 !important;
  }
  .nav-panel-brand{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    color:#fff !important;
    font-size:11px !important;
    font-weight:800 !important;
    letter-spacing:.16em !important;
  }
  .nav-panel-logo-icon{
    width:44px !important;
    height:44px !important;
    flex:0 0 44px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    border-radius:14px !important;
    background:var(--forest) !important;
  }
  .nav-panel-logo-icon img{
    width:62% !important;
    height:62% !important;
    object-fit:contain !important;
    filter:invert(1) brightness(2) !important;
  }
  .nav-panel-links{
    display:flex !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    flex-direction:column !important;
    justify-content:space-evenly !important;
    gap:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }
  .nav-panel .nav-panel-link{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    flex:1 1 0 !important;
    min-height:48px !important;
    padding:0 28px !important;
    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
    border-radius:0 !important;
    background:transparent !important;
    color:rgba(255,255,255,.86) !important;
    font-size:20px !important;
    font-weight:650 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
  }
  .nav-panel .nav-panel-link:last-child{
    border-bottom:0 !important;
  }
  .nav-panel .nav-panel-link:hover,
  .nav-panel .nav-panel-link:active{
    color:#fff !important;
    background:rgba(255,255,255,.05) !important;
  }
  .nav-panel .nav-panel-link[aria-current="page"]{
    color:#7ecfae !important;
    font-weight:750 !important;
    background:rgba(255,255,255,.04) !important;
  }
  .nav-panel-actions{
    flex:0 0 auto !important;
    padding:24px !important;
    margin:0 !important;
  }
  .nav-panel .cta{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:52px !important;
    margin:0 !important;
    padding:0 18px !important;
    border:1px solid rgba(255,255,255,.4) !important;
    border-radius:999px !important;
    background:transparent !important;
    color:#fff !important;
    font-size:12px !important;
    font-weight:700 !important;
    letter-spacing:.1em !important;
    line-height:1.2 !important;
    text-align:center !important;
    text-transform:uppercase !important;
    white-space:normal !important;
  }

  .hero-reference-inner{
    width:min(var(--shell),calc(100% - var(--gutter) * 2)) !important;
    grid-template-columns:minmax(0,1fr) !important;
    align-items:center !important;
    justify-items:start !important;
    padding-top:112px !important;
    padding-bottom:86px !important;
  }
  .hero-reference-copy{
    width:min(100%,620px) !important;
    max-width:620px !important;
    margin-left:0 !important;
    min-width:0 !important;
  }
  .hero-reference-copy h1{
    max-width:min(100%,660px) !important;
    font-size:clamp(52px,7.2vw,86px) !important;
    line-height:.95 !important;
    letter-spacing:-.045em !important;
  }
  .hero-reference-copy .hero-copy{
    max-width:560px !important;
  }
  .hero-media-control{
    right:max(var(--gutter),24px) !important;
  }
}

@media(max-width:1024px){
  .cap-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .related .cap-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .related{
    padding:42px 0 52px !important;
  }
  .related .section-head{
    margin-bottom:18px !important;
  }
  .related .section-head h2{
    font-size:14px !important;
    line-height:1.2 !important;
    letter-spacing:.16em !important;
    text-transform:uppercase !important;
  }
  .related-card{
    min-height:480px !important;
  }
  .related-card-content{
    padding:0 26px 40px !important;
  }
  .related-card h3{
    margin:0 0 2px !important;
    font-size:30px !important;
    line-height:1.05 !important;
  }
  .related-card p{
    max-width:330px !important;
    margin:0 0 2px !important;
    font-size:14px !important;
    line-height:1.4 !important;
  }
  .related-card .cap-explore{
    margin-top:10px !important;
    margin-bottom:14px !important;
  }
  .network-head{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  .network-head h1,
  .network-head h2,
  .quality-copy h2,
  .section-head h2,
  .split-head h2,
  .film-head h2,
  .about-intro .section-head h2,
  .careers-head h2,
  .news-head h2,
  .news-head h1,
  .education-head h2,
  .knowledge-top h2{
    font-size:clamp(44px,7vw,68px) !important;
    line-height:1.02 !important;
    letter-spacing:-.04em !important;
  }
  .quality-copy{
    width:min(100%,680px) !important;
  }
  .related .section-head h2{
    font-size:14px !important;
    line-height:1.2 !important;
    letter-spacing:.16em !important;
    text-transform:uppercase !important;
  }
  .quality-pillars{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .testing-card{
    grid-template-columns:1fr !important;
    gap:24px !important;
    padding:32px !important;
  }
  .testing-flow{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:18px 22px !important;
  }
  .testing-flow em{
    display:none !important;
  }
  .testing-flow div{
    min-width:0 !important;
    min-height:92px !important;
    padding:0 0 0 16px !important;
  }
}

@media(max-width:900px){
  .hero-reference{
    min-height:100svh !important;
  }
  .hero-reference-inner{
    min-height:100svh !important;
    padding-top:104px !important;
    padding-bottom:72px !important;
  }
  .hero-reference-copy{
    width:min(100%,560px) !important;
    max-width:560px !important;
    margin-left:0 !important;
  }
  .hero-reference-copy h1{
    font-size:clamp(46px,8.4vw,70px) !important;
  }
  .hero-reference-caption{
    right:22px;
    bottom:28px;
    max-width:280px;
  }
  .global-network{
    padding:92px 0 32px !important;
  }
  .network-mini-stats{
    max-width:620px;
  }
  .network-stage{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .region-panel{
    min-width:0 !important;
  }
}

@media(max-width:760px){
  .cap-grid,
  .team-grid,
  .team-tiles,
  .team-bottom,
  .leadership-team-grid{
    grid-template-columns:1fr !important;
  }
  .quality-pillars{
    grid-template-columns:1fr !important;
  }
  .network-stage{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:680px){
  .related{
    padding:34px 0 44px !important;
  }
  .related .section-head h2{
    font-size:12px !important;
  }
  .related-card{
    min-height:380px !important;
  }
  .related-card-content{
    padding:0 26px 40px !important;
  }
  .nav-panel{
    width:min(360px,calc(100vw - 18px)) !important;
  }
  .nav-panel-eyebrow{
    min-height:64px !important;
    padding:0 20px !important;
  }
  .nav-panel-logo-icon{
    width:34px !important;
    height:34px !important;
    flex-basis:34px !important;
    border-radius:9px !important;
  }
  .nav-panel-brand{
    gap:9px !important;
    font-size:9px !important;
    letter-spacing:.14em !important;
  }
  .nav-panel .nav-panel-link{
    padding:0 24px !important;
    font-size:18px !important;
  }
  .nav-panel-actions{
    padding:24px !important;
  }
  .hero-reference-inner{
    width:min(calc(100% - var(--gutter) * 2),430px) !important;
    padding-top:42px !important;
    padding-bottom:54px !important;
  }
  .hero-reference-copy{
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .hero-reference-copy h1{
    font-size:clamp(34px,9.7vw,42px) !important;
    line-height:1.03 !important;
    letter-spacing:-.035em !important;
  }
  .hero-reference-copy .hero-copy{
    max-width:100% !important;
  }
  .testing-card{
    padding:26px 22px !important;
  }
  .testing-flow{
    grid-template-columns:1fr !important;
  }
  .testing-flow div{
    min-height:auto !important;
  }
}

@media(max-width:430px){
  .hero-reference-copy h1{
    font-size:clamp(32px,10.4vw,40px) !important;
  }
  .hero-reference-copy .btn.primary{
    max-width:100% !important;
    white-space:normal !important;
    text-align:center !important;
    justify-content:center !important;
  }
  .network-mini-stats{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px;
    width:100%;
  }
  .network-mini-stats div{
    min-width:0;
    padding:16px 6px 0 0;
  }
  .network-mini-stats strong{
    font-size:25px;
    line-height:1;
  }
  .network-mini-stats span{
    max-width:12ch;
    font-size:8px;
    line-height:1.4;
    overflow-wrap:anywhere;
  }
}

/* About page final alignment refinements. */
.about-film-feature{
  padding-bottom:0 !important;
}
.where-to-buy{
  background:#f7f5ef !important;
  padding-top:72px !important;
}
.where-to-buy .split-head{
  display:grid !important;
  grid-template-columns:minmax(0,1.12fr) minmax(390px,.88fr) !important;
  gap:clamp(24px,4vw,58px) !important;
  align-items:start !important;
  margin-bottom:42px !important;
}
.where-to-buy-intro{
  max-width:760px;
}
.where-to-buy .split-head h2{
  max-width:640px !important;
  font-size:clamp(34px,3.8vw,58px) !important;
  line-height:1.02 !important;
  letter-spacing:-.045em !important;
}
.where-to-buy .split-head-copy p{
  max-width:62ch !important;
  color:#3d4a45 !important;
  font-size:16px !important;
  line-height:1.78 !important;
}
.where-to-buy .split-head-copy{
  margin-top:28px !important;
}
.where-assurance{
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:12px;
  align-self:stretch;
}
.where-assurance-item{
  min-height:92px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px;
  border-radius:6px;
  background:#e5ede7;
  color:var(--forest);
}
.where-assurance-item>span{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f8faf7;
  color:#0a7a62;
}
.where-assurance-item strong{
  max-width:15ch;
  font-size:12px;
  font-weight:750;
  line-height:1.4;
}
@media(max-width:1050px){
  .about-film-media{
    order:2 !important;
  }
  .about-film-copy{
    order:1 !important;
  }
  .where-assurance{
    max-width:720px;
  }
}
@media(max-width:860px){
  .where-to-buy .split-head{
    grid-template-columns:1fr !important;
    gap:34px !important;
  }
}
@media(max-width:680px){
  .where-to-buy{
    padding-top:54px !important;
  }
  .where-to-buy .split-head{
    grid-template-columns:1fr !important;
    gap:30px !important;
    margin-bottom:30px !important;
  }
  .where-to-buy .split-head h2{
    font-size:clamp(36px,10vw,48px) !important;
  }
  .where-to-buy .split-head-copy p{
    font-size:16px !important;
    line-height:1.72 !important;
  }
  .where-to-buy .split-head-copy{
    margin-top:22px !important;
  }
  .where-assurance{
    gap:9px;
  }
  .where-assurance-item{
    min-height:82px;
    gap:10px;
    padding:13px;
  }
  .where-assurance-item>span{
    width:36px;
    height:36px;
    flex-basis:36px;
  }
  .where-assurance-item strong{
    font-size:10px;
    line-height:1.35;
  }
}

/* ==========================================================================
   Media page: flipbook reader — full-bleed liquid-glass shell.
   Layers over the original .magazine-lightbox-* rules (5960–6326) by source
   order; never edits them.

   Shape: the dialog fills the whole viewport. Header and dock float over the
   book as glass pills and auto-hide after 3s idle (see magazine-reader.js's
   chrome controller). The stage's own padding permanently reserves the
   header/dock space regardless of hidden state, so nothing reflows on
   fade — sizeBookToFit() reads exactly those paddings off
   .magazine-flipbook-viewport.

   No .magazine-flipbook{width/height} override: page-flip writes those
   inline from its own stretch/autoSize math - a CSS size would just fight it.
   ========================================================================== */

.magazine-lightbox{
  --rg-glass:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.07)),rgba(8,34,28,.18);
  --rg-line:rgba(255,255,255,.42);
  --rg-shadow:0 18px 44px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.30);
  --rg-blur:blur(20px) saturate(1.5);
  --rg-deep:#061d18;
  --rg-header-inset:12px;
  --rg-dock-inset:14px;
  --rg-side-inset:8px;
  padding:0;
  height:100dvh;
  font-family:"Montserrat",Arial,sans-serif;
}
.magazine-lightbox-backdrop{
  background:rgba(4,18,14,.78);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.magazine-lightbox-dialog{
  width:100%;
  max-width:none;
  height:100dvh;
  max-height:none;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:var(--rg-deep);
  box-shadow:none;
  transform:none;
}
/* The original (pre-redesign) fullscreen-state rule this overrides still
   sets width:100vw here, and :fullscreen/.is-focused give it higher
   specificity than a plain .magazine-lightbox-dialog rule - so it wins over
   the width:100% above precisely while actually in fullscreen, which is
   exactly the state a 100vw-vs-real-viewport mismatch is most visible in
   (scrollbar gutter changing as the OS fullscreen transition runs). Same
   specificity as the rule being overridden + later in source = wins. */
.magazine-lightbox.is-focused .magazine-lightbox-dialog,
.magazine-lightbox-dialog:fullscreen{
  width:100%;
}

/* --- Ambient backdrop: this issue's own cover, blurred and darkened ----- */
.magazine-reader-ambient{
  position:absolute;
  inset:-6%;
  z-index:0;
  width:112%;
  height:112%;
  object-fit:cover;
  filter:blur(58px) saturate(1.3) brightness(.46);
  transform:scale(1.03);
  opacity:0;
  pointer-events:none;
  transition:opacity .85s ease;
}
.magazine-lightbox.is-open .magazine-reader-ambient{opacity:1;}
.magazine-reader-ambient-veil{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 74% 60% at 50% 48%,rgba(6,29,24,.06),rgba(6,29,24,.74) 100%),
    linear-gradient(180deg,rgba(6,29,24,.66) 0%,rgba(6,29,24,.20) 24%,rgba(6,29,24,.26) 68%,rgba(6,29,24,.72) 100%);
}

/* --- Stage ---------------------------------------------------------------- */
.magazine-lightbox-frame-wrap{
  position:absolute;
  inset:0;
  z-index:1;
  height:auto;
  min-height:0;
  background:transparent;
}
.magazine-flipbook-viewport{
  position:relative;
  overflow:hidden;
  background:none;
  padding:
    calc(env(safe-area-inset-top,0px)    + var(--rg-header-inset))
    calc(env(safe-area-inset-right,0px)  + var(--rg-side-inset))
    calc(env(safe-area-inset-bottom,0px) + var(--rg-dock-inset))
    calc(env(safe-area-inset-left,0px)   + var(--rg-side-inset));
}
.magazine-flipbook-viewport::before{content:none;}
.magazine-flipbook-shell{
  position:relative;
  display:grid;
  place-items:center;
  background:transparent;
  transform:translate(var(--magazine-reader-pan-x, 0px), var(--magazine-reader-pan-y, 0px)) scale(var(--magazine-reader-zoom, 1));
  transition:transform 0.05s linear; /* smooth out tiny jitters but stay highly responsive */
}
/* Original 6125-6127's .is-cover-view rule (2 classes) is more specific than
   the plain rule above (1 class), so it still wins there despite the
   "neutralises" comment - this replaces its raw -25% with the exact pixel
   value magazine-reader.js computes alongside shell's own width/height
   (--cover-shift), so the compensation can never disagree with the number
   that actually sized the shell. */
.magazine-flipbook-shell.is-cover-view{
  transform:translate(calc(var(--magazine-reader-pan-x, 0px) - var(--cover-shift, 0px)), var(--magazine-reader-pan-y, 0px)) scale(var(--magazine-reader-zoom, 1));
}
.magazine-flipbook-shell::after{
  content:none;
}
.magazine-flipbook-shell.is-spread::before{
  content:none;
}
.magazine-flipbook,
.magazine-flipbook .stf__parent,
.magazine-flipbook .stf__block,
.magazine-flipbook .stf__item,
.magazine-flipbook canvas{
  background:transparent !important;
}
.magazine-flipbook:empty{width:0;height:0;}
.magazine-flipbook.is-cover-view{
  display:grid;
  place-items:center;
}
.magazine-flipbook .page,
.magazine-flipbook .stf__item .page{
  overflow:hidden;
  border:0 !important;
  background:transparent !important;
  box-shadow:none;
}
/* page-flip's HTMLRender sets object-fit:fill inline on each <img> (its own
   JS, not ours) - !important is the only way a stylesheet rule beats that,
   and contain is what actually keeps each page's own aspect from distorting. */
.magazine-flipbook img{
  display:block;
  width:100%;
  height:100%;
  margin:0;
  background:transparent !important;
  object-fit:contain !important;
}
/* Adjacent page boxes in a spread get fractional-pixel widths/positions from
   page-flip's own inline styles (e.g. two 540.944px-wide boxes at left:
   0.0555556px and left:541px) - depending on the exact viewport width, that
   sub-pixel math can leave a hairline gap right at the spine that the
   glass backdrop behind the book shows through as a thin white seam. A 1px
   overlap on the right-hand page (safe: only the --simple/settled state, not
   the actively-animating flip) fully covers it regardless of rounding. */
.magazine-flipbook .page.--right.--simple{
  margin-left:-1px;
}
.magazine-cover-page{
  display:block;
  width:auto;
  max-width:100%;
  max-height:calc(100dvh - 170px);
  height:auto;
  margin:0 auto;
  background:transparent;
  object-fit:contain;
  box-shadow:none;
  user-select:none;
  -webkit-user-drag:none;
}

/* --- Loading overlay ------------------------------------------------------ */
.magazine-lightbox-loading{
  z-index:3;
  align-content:center;
  justify-items:center;
  gap:20px;
  background:none;
}
.magazine-lightbox-progress{
  margin-top:0;
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.magazine-lightbox-spinner{
  width:26px;
  height:26px;
  border-color:rgba(255,255,255,.24);
  border-top-color:var(--mint);
}

/* --- Header pill ------------------------------------------------------------ */
.magazine-reader-header{
  position:absolute;
  top:calc(env(safe-area-inset-top,0px) + 18px);
  left:50%;
  z-index:7;
  display:flex;
  align-items:center;
  gap:16px;
  max-width:calc(100% - 32px);
  padding:8px 8px 8px 20px;
  border:1px solid var(--rg-line);
  border-radius:999px;
  background:var(--rg-glass);
  box-shadow:var(--rg-shadow);
  backdrop-filter:var(--rg-blur);
  -webkit-backdrop-filter:var(--rg-blur);
  transform:translateX(-50%);
  color:#fff;
}
.magazine-reader-header .magazine-lightbox-meta{
  flex-direction:row;
  align-items:center;
  gap:14px;
  min-width:0;
}
.magazine-reader-header .magazine-lightbox-title,
.magazine-reader-header .magazine-lightbox-page{
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}
.magazine-reader-header .magazine-lightbox-title{
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
}
.magazine-reader-header .magazine-lightbox-page{
  color:rgba(255,255,255,.60);
  flex:0 0 auto;
}
.magazine-reader-header .magazine-lightbox-close{
  position:static;
  flex:0 0 auto;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.26);
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size:19px;
  backdrop-filter:none;
}
.magazine-reader-header .magazine-lightbox-close:hover{
  background:rgba(255,255,255,.22);
  transform:none;
}

/* --- Dock pill -------------------------------------------------------------- */
.magazine-lightbox-dockbar{
  position:absolute;
  left:50%;
  bottom:calc(env(safe-area-inset-bottom,0px) + 24px);
  z-index:7;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:2px;
  max-width:calc(100% - 24px);
  padding:7px;
  border:1px solid var(--rg-line);
  border-radius:999px;
  background:var(--rg-glass);
  box-shadow:var(--rg-shadow);
  backdrop-filter:var(--rg-blur);
  -webkit-backdrop-filter:var(--rg-blur);
  transform:translateX(-50%);
}
.magazine-lightbox-dockbar.magazine-lightbox-controls button{
  width:42px;
  height:42px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#fff;
  font-size:16px;
  backdrop-filter:none;
  transition:background .2s ease;
}
.magazine-lightbox-dockbar.magazine-lightbox-controls button:hover{
  background:rgba(255,255,255,.18);
  border-color:transparent;
  transform:none;
}
.magazine-lightbox-dockbar.magazine-lightbox-controls button:focus-visible{
  outline:2px solid var(--mint);
  outline-offset:2px;
}
.magazine-lightbox-dockbar-sep{
  width:1px;
  height:18px;
  flex:0 0 auto;
  margin:0 6px;
  background:rgba(255,255,255,.26);
}

/* --- Auto-hide --------------------------------------------------------------- */
.magazine-reader-header,
.magazine-lightbox-dockbar{
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.2,1);
}
.magazine-lightbox.is-chrome-hidden .magazine-reader-header{
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) translateY(-14px);
}
.magazine-lightbox.is-chrome-hidden .magazine-lightbox-dockbar{
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) translateY(16px);
}
.magazine-lightbox.is-chrome-hidden .magazine-reader-header:has(:focus-visible),
.magazine-lightbox.is-chrome-hidden .magazine-lightbox-dockbar:has(:focus-visible),
.magazine-lightbox.is-chrome-hidden:has(.magazine-pages-popup.is-open) .magazine-reader-header,
.magazine-lightbox.is-chrome-hidden:has(.magazine-pages-popup.is-open) .magazine-lightbox-dockbar{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%);
}

/* --- "All pages" sheet -------------------------------------------------------- */
.magazine-pages-popup{
  position:absolute;
  inset:0;
  z-index:8;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0 14px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease,visibility .25s ease;
}
.magazine-pages-popup.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.magazine-pages-popup-scrim{
  position:absolute;
  inset:0;
  background:rgba(4,18,14,.52);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.magazine-pages-sheet{
  position:relative;
  z-index:1;
  width:min(920px,100%);
  max-height:72%;
  display:flex;
  flex-direction:column;
  margin:0 auto calc(env(safe-area-inset-bottom,0px) + 18px);
  border:1px solid var(--rg-line);
  border-radius:26px;
  background:var(--rg-glass);
  box-shadow:var(--rg-shadow);
  backdrop-filter:var(--rg-blur);
  -webkit-backdrop-filter:var(--rg-blur);
  transform:translateY(18px);
  transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
.magazine-pages-popup.is-open .magazine-pages-sheet{
  transform:translateY(0);
}
.magazine-pages-sheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex:0 0 auto;
  padding:16px 18px;
  color:#fff;
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.magazine-pages-sheet-head button{
  width:30px;
  height:30px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease;
}
.magazine-pages-sheet-head button:hover{
  background:rgba(255,255,255,.22);
}
.magazine-thumbnail-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(86px,1fr));
  gap:14px;
  padding:18px 18px 24px;
  overflow-y:auto;
  border-top:0;
  background:none;
}
.magazine-thumbnail-grid button{
  width:100%;
  border:1px solid rgba(255,255,255,.20);
  border-radius:10px;
  background:rgba(255,255,255,.06);
  opacity:.7;
}
.magazine-thumbnail-grid button:hover,
.magazine-thumbnail-grid button.is-active{
  opacity:1;
  transform:translateY(-2px);
  border-color:var(--mint);
}
.magazine-thumbnail-grid span{
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
  color:rgba(255,255,255,.68);
}

/* --- Small screens ------------------------------------------------------------ */
@media(max-width:760px){
  .magazine-lightbox{
    --rg-header-inset:0px;
    --rg-dock-inset:0px;
    --rg-side-inset:0px;
  }
  .magazine-reader-ambient{filter:blur(38px) saturate(1.25) brightness(.46);}
  .magazine-reader-header{
    top:calc(env(safe-area-inset-top,10px) + 10px);
    gap:8px;
    padding:4px 4px 4px 12px;
    border-radius:99px;
  }
  .magazine-reader-header .issue strong{
    font-size:10px;
  }
  .magazine-lightbox-dockbar{
    bottom:calc(env(safe-area-inset-bottom,10px) + 12px);
    padding:4px;
    border-radius:99px;
  }
  .magazine-lightbox-dockbar.magazine-lightbox-controls button{
    width:34px;
    height:34px;
    font-size:13px;
  }
  .magazine-lightbox-dockbar-sep{margin:0 2px;}
  .magazine-pages-sheet{max-height:76%;}
}
@media(max-width:620px){
  .magazine-thumbnail-grid{
    grid-template-columns:repeat(auto-fill,minmax(68px,1fr));
    gap:10px;
  }
}

/* --- Reduced motion ------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .magazine-reader-ambient,
  .magazine-pages-sheet{transition-duration:.01ms !important;}
  .magazine-reader-header,
  .magazine-lightbox-dockbar{transition:opacity .01ms !important;}
  .magazine-lightbox.is-chrome-hidden .magazine-reader-header,
  .magazine-lightbox.is-chrome-hidden .magazine-lightbox-dockbar{
    transform:translateX(-50%);
  }
  .magazine-lightbox-dockbar.magazine-lightbox-controls button{
    transition-duration:.01ms !important;
  }
}

/* Contact page: direct routes to the London team. */
.contact-page{
  background:#f6f4ee;
  color:var(--ink);
}
.contact-hero{
  padding:clamp(76px,8vw,126px) 0 clamp(72px,7vw,110px);
  background:#0a352c;
  color:#f5f8f6;
}
.contact-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(340px,.72fr);
  gap:clamp(48px,8vw,128px);
  align-items:end;
}
.contact-hero-title,
.contact-hero-copy,
.contact-section-head,
.contact-office-copy{
  text-align:left;
}
.contact-hero-title>span,
.contact-office-copy>span{
  display:block;
  margin-bottom:20px;
  color:#94cbb8;
  font-size:10px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.contact-hero h1{
  max-width:11ch;
  margin:0;
  color:#fff;
  font-size:clamp(54px,7vw,102px);
  font-weight:700;
  line-height:.94;
  letter-spacing:-.055em;
}
.contact-hero-copy p{
  max-width:52ch;
  margin:0;
  color:#c6d9d2;
  font-size:17px;
  line-height:1.75;
}
.contact-hero-cta{
  width:fit-content;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  gap:11px;
  margin-top:30px;
  padding:0 19px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:6px;
  background:rgba(255,255,255,.09);
  color:#fff;
  font-size:12px;
  font-weight:650;
  transition:background .22s ease,border-color .22s ease,transform .22s ease;
}
.contact-hero-cta:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.15);
}
.contact-actions{
  padding:clamp(72px,7vw,108px) 0 clamp(86px,8vw,126px);
}
.contact-section-head{
  display:grid;
  grid-template-columns:minmax(280px,.85fr) minmax(320px,1fr);
  gap:clamp(38px,7vw,108px);
  align-items:end;
  margin-bottom:48px;
}
.contact-section-head h2{
  max-width:13ch;
  margin:0;
  color:var(--forest);
  font-size:clamp(36px,4.4vw,64px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.045em;
}
.contact-section-head p{
  max-width:56ch;
  margin:0;
  color:#53635d;
  font-size:16px;
  line-height:1.72;
}
.contact-action-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.contact-action{
  min-height:310px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:26px;
  border:1px solid rgba(11,63,52,.12);
  border-radius:7px;
  background:#fff;
  color:var(--ink);
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
}
.contact-action:hover{
  transform:translateY(-4px);
  border-color:rgba(11,63,52,.26);
  box-shadow:0 20px 52px rgba(11,63,52,.09);
}
.contact-action-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e2eee8;
  color:var(--forest);
}
.contact-action-label{
  display:block;
  margin-top:30px;
  color:#6a7c75;
  font-size:9px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.contact-action h3{
  margin:9px 0 0;
  color:var(--forest);
  font-size:25px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.03em;
}
.contact-action p{
  max-width:31ch;
  margin:14px 0 24px;
  color:#5b6b65;
  font-size:13px;
  line-height:1.65;
}
.contact-action strong{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:auto;
  color:var(--forest);
  font-size:11px;
  font-weight:750;
  line-height:1.45;
}
.contact-office{
  padding:clamp(72px,7vw,112px) 0;
  background:#dfe8e1;
}
.contact-office-grid{
  display:grid;
  grid-template-columns:minmax(280px,.7fr) minmax(440px,1.3fr);
  gap:clamp(46px,8vw,126px);
  align-items:center;
}
.contact-office-copy h2{
  max-width:12ch;
  margin:0;
  color:var(--forest);
  font-size:clamp(36px,4.3vw,62px);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.045em;
}
.contact-office-copy address{
  margin:28px 0 0;
  color:#304b43;
  font-size:16px;
  font-style:normal;
  line-height:1.7;
}
.contact-hours{
  display:flex;
  align-items:center;
  gap:10px;
  margin:22px 0 0;
  color:#526b62;
  font-size:13px;
  line-height:1.5;
}
.contact-office-copy>a{
  width:fit-content;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:28px;
  color:var(--forest);
  border-bottom:1px solid rgba(11,63,52,.38);
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.contact-map{
  min-height:470px;
  overflow:hidden;
  border-radius:8px;
  background:#c8d8cf;
}
.contact-map iframe{
  width:100%;
  height:100%;
  min-height:470px;
  display:block;
  border:0;
  filter:saturate(.68) contrast(.94);
}

/* Footer social links use familiar symbols with stable tap targets. */
.footer-grid .footer-social-links{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:24px;
}
.footer-grid .footer-social-link{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  margin:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  color:#d9e5e0;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.footer-grid .footer-social-link svg{
  width:17px;
  height:17px;
  fill:currentColor;
}
.footer-grid .footer-social-link:hover{
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.08);
  color:#fff;
}

@media(max-width:1100px){
  .contact-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-action{min-height:280px}
}
@media(max-width:900px){
  .contact-hero-grid,
  .contact-section-head,
  .contact-office-grid{
    grid-template-columns:1fr;
  }
  .contact-hero-grid{gap:34px}
  .contact-section-head{gap:22px}
  .contact-office-grid{gap:42px}
  .contact-map,.contact-map iframe{min-height:390px}
}
@media(max-width:620px){
  .contact-hero{padding:54px 0 64px}
  .contact-hero h1{font-size:clamp(44px,13.5vw,60px)}
  .contact-hero-copy p{font-size:15px;line-height:1.7}
  .contact-actions{padding:62px 0 76px}
  .contact-section-head{margin-bottom:34px}
  .contact-section-head h2{font-size:clamp(34px,10vw,46px)}
  .contact-section-head p{font-size:15px}
  .contact-action-grid{grid-template-columns:1fr}
  .contact-action{min-height:255px;padding:24px}
  .contact-office{padding:64px 0}
  .contact-office-copy h2{font-size:clamp(36px,10vw,46px)}
  .contact-map,.contact-map iframe{min-height:330px}
  .footer-grid .footer-social-links{
    gap:8px !important;
    margin-top:20px !important;
  }
  .footer-grid .footer-social-link{
    width:40px !important;
    height:40px !important;
    display:grid !important;
    place-items:center !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid rgba(255,255,255,.16) !important;
    border-radius:50% !important;
  }
}

/* Reversed variant: text left, media right */
.about-film-layout--reverse{
  grid-template-columns:minmax(340px,.78fr) minmax(0,1.08fr);
}
.about-film-layout--reverse .about-film-media{
  order:2;
}
.about-film-layout--reverse .about-film-copy{
  order:1;
}
@media (max-width:1050px){
  /* .about-film-layout--reverse's own grid-template-columns (above) is
     unconditional and has the same specificity as .about-film-layout's
     max-width:1050px single-column reset, so being later in the file it
     was winning even on mobile — the video and copy sat side by side in a
     340px/0px grid instead of stacking, collapsing the video to 0 width. */
  .about-film-layout--reverse{
    grid-template-columns:1fr;
  }
  .about-film-layout--reverse .about-film-media,
  .about-film-layout--reverse .about-film-copy{
    order:initial;
  }
  /* A pre-existing, unscoped rule (@media(max-width:1050px) .about-film-media/
     .about-film-copy{order:... !important}) forces every .about-film-feature
     section's media below the copy on mobile, regardless of page. It's
     !important, so the plain `order:initial` above never actually wins here.
     Scoped, !important override to beat it specifically for this section:
     copy first, film below it on mobile. */
  #promo-video .about-film-copy{order:1 !important}
  #promo-video .about-film-media{order:2 !important}
}

/* Match this section's heading treatment to the "Science you can hold in
   your hand" story block elsewhere on the homepage (.ng-story-copy h2:
   clamp(50px,6vw,88px), line-height .92, letter-spacing -.058em), and match
   its background to the page's own cream so there's no colour seam against
   the capabilities section above. Scoped to #promo-video only so
   about.astro/quality.astro/learn.astro keep their existing
   .about-film-copy treatment. */
#promo-video{
  background:var(--cream);
  padding-bottom:168px !important;
}
/* The 168px desktop padding-bottom above is disproportionate on a phone
   screen, reading as a big dead gap under the film. Scale it down for
   mobile. Placed after the unconditional rule above (same #promo-video
   specificity, both !important) so it wins by source order when the media
   query matches. */
@media (max-width:1050px){
  #promo-video{padding-bottom:56px !important}
}
#promo-video .about-film-copy .section-head h2{
  font-size:clamp(50px,6vw,88px);
  line-height:.92;
  letter-spacing:-.058em;
  font-weight:700;
}

/* ---------------------------------------------------------------------
   International page — "Welcoming partners to London" film section.
   This section sits between .global-network (dark gradient that resolves
   to flat var(--forest) at its own bottom edge) and .intl-shelf (flat
   var(--forest) via the generic .dark class). The default .about-film-feature
   treatment is a bright cream card, which read as a jarring, out-of-place
   insert wedged between two solid dark-green sections with no breathing
   room. Re-themed as a dark section (matching the site's existing
   .global-map-section dark-video/dark-story treatment) so it flows with
   its neighbours instead of interrupting them, with generous symmetric
   padding so it reads as its own section rather than a stray card.
   Scoped to #welcome-partners only — about.astro/quality.astro/learn.astro/
   the homepage promo video keep their own existing treatments. */
#welcome-partners{
  /* Band 2 of three - lifts to a lighter green through the middle so the
     film sits on its own slightly raised plane between the darker bands.
     Top stop is var(--forest) so the join with .global-network above stays
     seamless. */
  background:
    radial-gradient(circle at 50% 45%,rgba(92,177,142,.14),transparent 32%),
    linear-gradient(180deg,#0b3f34 0%,#12503f 46%,#10473a 100%);
  padding:clamp(24px, 10vw, 128px) 0 !important;
  color:#fff;
}
/* Matches the size/weight/tracking of this page's other two headers —
   .network-head h1 ("Trusted worldwide.") and .intl-shelf-head's plain
   .section h2 ("Your route to market.") — so all three read as the same
   editorial voice instead of this one looking smaller/lighter. */

#welcome-partners .about-film-copy .section-head h2{
  color:#fff;
  max-width:none;
  font-size:clamp(52px,6vw,88px);
  line-height:.93;
  letter-spacing:-.055em;
  font-weight:700;
}

/* Same collision as #promo-video hit earlier: this scoped rule has higher
   specificity than the plain .about-film-layout{grid-template-columns:1fr}
   mobile reset, so without this it would keep the two-column split (and
   collapse the copy column width) below 1050px instead of stacking. */
@media (max-width:1050px){
  #welcome-partners .about-film-layout{
    grid-template-columns:1fr;
  }
}
#welcome-partners .about-film-copy .section-head h2 span{
  color:#b9dfd0;
}
#welcome-partners .about-film-copy h3{
  color:#b9dfd0;
}
#welcome-partners .about-film-copy>p{
  color:#cddad4;
}
#welcome-partners .about-film-copy>p strong{
  color:#fff;
  font-weight:700;
}
#welcome-partners .about-film-media{
  box-shadow:0 30px 70px rgba(3,20,15,.45) !important;
}

/* ---------------------------------------------------------------------
   International page — separating the three stacked dark bands.

   #global-reach, #welcome-partners and #idea-to-shelf all resolved to the
   same flat var(--forest) (#0b3f34): .global-network's gradient ends on it
   by design (see the note at .global-network), #welcome-partners sets it
   explicitly, and .intl-shelf inherits it from the generic .dark class.
   Three sections' worth of page therefore rendered as one uninterrupted
   green slab with no indication of where one ended and the next began.

   Rather than re-introduce a hard colour break (the thing the
   #welcome-partners dark re-theme was added to remove), each band now gets
   its own gradient so the page descends in tone: mid green, a lighter lift
   through the partner film, then a deepening fall through the route-to-
   market steps into the cream .related section below. Adjacent edges stay
   close in value so the joins read as intentional shading, with a faint
   top hairline giving each band a definite start.

   Scoped to the International page's own sections — .dark elsewhere and
   .about-film-feature on about/quality/learn/home are untouched. */

/* Band 2's background is set once on #welcome-partners further up. */

/* Band 3 — falls away from the lift above into a deeper green, giving the
   process steps a distinctly heavier ground than the film section and a
   stronger contrast against the cream .related section that follows. */
.intl-shelf{
  /* .about-film-feature is already position:relative; .section is not, so the
     hairline below needs a containing block established here. */
  position:relative;
  background:linear-gradient(180deg,#0c3a30 0%,#092e26 58%,#06231d 100%);
}

/* Faint centre-weighted hairline marking the top edge of each band. Fades
   out towards the gutters so it reads as a soft seam rather than a rule
   drawn across the page. .about-film-feature::before is already display:none
   and .intl-shelf has no pseudo-elements of its own, so both are free. */
#welcome-partners::after,
.intl-shelf::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.10) 22%,
    rgba(255,255,255,.16) 50%,
    rgba(255,255,255,.10) 78%,
    transparent 100%);
}