/* ==========================================================================
   CLEANROOM SOLUTIONS — page-specific styles
   Loads AFTER style.css, so all design tokens (--navy, --green, --shell,
   --line, buttons, .btn, .reveal, header/footer, etc.) are inherited.

   CONTENTS
   1. Shared page bits (headings)
   2. Page hero
   3. What is a cleanroom
   4. Industries we serve
   5. Our cleanroom solutions (cards)
   6. Turnkey process (timeline)
   7. ISO classification
   8. CTA band
   9. Responsive
   ========================================================================== */


/* ===== 0. TIGHTER SECTION RHYTHM =======================================
   The shared .section padding (up to 5.5rem top+bottom) leaves big gaps
   between sections. On this page the sections sit closer together. */
.cr-what,
.cr-industries,
.cr-solutions,
.cr-process,
.cr-iso { padding-block: clamp(2rem, 3.2vw, 3rem); }


/* ===== 1. SHARED ======================================================== */
.cr-h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--navy-ink);
  line-height: 1.25;
  margin-bottom: 1.1rem;
}
.cr-h2--center {
  text-align: center;
  color: var(--navy);
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}


/* ===== 2. PAGE HERO ===================================================== */
.cr-hero {
  position: relative;
  min-height: min(70vh, clamp(440px, 42vw, 600px));
  display: flex;
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
}

/* Full-bleed crossfade slider (same behaviour as the home hero) */
.cr-hero__slides { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.cr-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .9s var(--ease), transform 7s linear;
}
.cr-hero__img.is-active { opacity: 1; transform: scale(1); }

/* White wash on the left so the navy heading stays readable over any photo */
.cr-hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(96deg,
    rgba(255,255,255,.96) 0%,
    rgba(255,255,255,.93) 32%,
    rgba(255,255,255,.72) 48%,
    rgba(255,255,255,.30) 66%,
    rgba(255,255,255,.04) 84%,
    rgba(255,255,255,0) 100%);
}

.cr-hero__inner { position: relative; }
.cr-hero__copy { max-width: 40rem; }

.cr-hero__title {
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
  margin-bottom: 1.4rem;
}
.cr-hero__title span { display: block; }
.cr-hero__title-dark { color: var(--navy-ink); }
.cr-hero__title-blue { color: var(--navy); }
.cr-hero__rule {
  display: block; width: 70px; height: 4px;
  background: var(--navy); margin-bottom: 1.5rem;
}
.cr-hero__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--ink-60);
  margin-bottom: 2rem;
}
.cr-hero__btns { display: flex; flex-wrap: wrap; gap: .9rem; }


/* ===== 3. WHAT IS A CLEANROOM ========================================== */
.cr-what__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.cr-what__copy p { color: var(--ink-60); margin-bottom: 1rem; }

.cr-facts {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}
.cr-facts li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .6rem;
}
.cr-facts__ico { color: var(--navy); }
.cr-facts__label {
  font-size: .74rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-70);
}

.cr-what__media img {
  width: 100%; height: auto;
  border-radius: var(--r-lg);
}


/* ===== 4. INDUSTRIES WE SERVE ========================================== */
.cr-industries { background: var(--bg-soft); border-block: 1px solid var(--line); }

.cr-ind-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
}
.cr-ind {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .85rem;
  padding: .5rem clamp(.4rem, 1vw, 1rem);
  border-right: 1px solid var(--line);
  transition: transform var(--t);
}
.cr-ind:last-child { border-right: 0; }
.cr-ind:hover { transform: translateY(-4px); }
.cr-ind img {
  width: auto; height: 46px;
  object-fit: contain;
}
.cr-ind span {
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--navy-ink);
}


/* ===== 5. OUR CLEANROOM SOLUTIONS (cards) ============================== */
.cr-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(.8rem, 1.4vw, 1.15rem);
}
.cr-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.2rem, 1.8vw, 1.6rem) clamp(1rem, 1.4vw, 1.3rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
  text-align: center;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.cr-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(20, 60, 114, .13);
  border-color: transparent;
}
.cr-card__ico {
  display: grid; place-items: center;
  height: 56px; margin-bottom: 1rem;
}
.cr-card__ico img { width: auto; height: 52px; object-fit: contain; }
/* sol-industry.webp is drawn at roughly a third the stroke weight of the other
   five files (10px on its own 812px canvas, against 25–41px), and it packs in
   far more detail, so at 52px its lines thin out to hairlines.
   Four zero-blur drop shadows dilate the alpha silhouette ~.4px on each side,
   taking the apparent stroke from ~.6px to ~1.4px — level with the lightest of
   its neighbours. The source file is untouched; this is presentation only.
   --ink must match the artwork's green, or the added edge will fringe. */
.cr-card__ico--thicken img {
  --ink: #38b550;
  filter:
    drop-shadow( .4px 0    0 var(--ink))
    drop-shadow(-.4px 0    0 var(--ink))
    drop-shadow(0     .4px 0 var(--ink))
    drop-shadow(0    -.4px 0 var(--ink));
}
.cr-card__title {
  font-size: .98rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: .6rem;
  line-height: 1.3;
}
.cr-card__text {
  font-size: .8rem;
  line-height: 1.6;
  color: var(--ink-50);
  margin: 0;
}


/* ===== 6. TURNKEY PROCESS (timeline) =================================== */
.cr-process { background: var(--bg-soft); border-block: 1px solid var(--line); }

.cr-steps {
  --cr-steps-gap: .5rem;       /* shared with the flow arrows below */
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--cr-steps-gap);
  position: relative;
}
/* connecting line behind the icon circles */
.cr-steps::before {
  content: '';
  position: absolute;
  top: 50px; left: 6%; right: 6%;   /* centre of the 100px icon circles */
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px);
  z-index: 0;
}
.cr-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .9rem;
  position: relative;
  z-index: 1;
}
/* Arrowhead riding the dotted line, showing the direction of the flow.
   Sits on the boundary between this step's cell and the next, which is the
   midpoint between the two icon circles. Every step but the last gets one. */
.cr-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50px;                       /* centre of the 100px icon circle */
  right: calc(var(--cr-steps-gap) / -2);
  transform: translate(50%, -50%);
  border: 6px solid transparent;
  border-right-width: 0;
  border-left-color: var(--navy);
  z-index: 2;
}
.cr-step__ico {
  position: relative;
  display: grid; place-items: center;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--navy);
  box-shadow: inset 0 0 0 6px var(--bg-soft);   /* ring accent for definition */
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.cr-step:hover .cr-step__ico {
  transform: translateY(-4px);
  border-color: var(--green);
  box-shadow: inset 0 0 0 6px var(--bg-soft), 0 12px 24px rgba(20, 60, 114, .2);
}
/* Crop window sized to the white inner circle:
   100px outer − 2×2px border − 2×6px inset ring = 84px of white.
   The image is scaled so its green circle is exactly --fit across and then
   offset so that circle is centred in the window, which pushes the number
   pill baked into the bottom of the artwork outside the crop. Geometry per
   icon arrives as inline custom properties on .cr-step__art in the HTML. */
.cr-step__art {
  --fit: 84px;
  position: relative;
  width: var(--fit);
  height: var(--fit);
  border-radius: 50%;
  overflow: hidden;
}
.cr-step__art img {
  position: absolute;
  max-width: none;          /* overrides the global img { max-width: 100% } */
  width: calc(var(--cw) * var(--fit) / var(--d));
  height: auto;
  left: calc(var(--x) * var(--fit) / var(--d) * -1);
  top:  calc(var(--fit) / 2 - var(--cyc) * var(--fit) / var(--d));
}
.cr-step__ico em {
  position: absolute;
  bottom: -8px; left: 50%; transform: translateX(-50%);
  display: grid; place-items: center;
  min-width: 22px; height: 18px; padding: 0 5px;
  font-style: normal; font-size: .64rem; font-weight: 600;
  color: #fff; background: var(--navy);
  border-radius: var(--r-pill);
}
.cr-step__label {
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--navy-ink);
}


/* ===== 7. ISO CLASSIFICATION =========================================== */
/* Centred heading + one intro line, then the full-width chart.
   Wider than the shared .sec-head (42rem) so the intro sentence holds a single
   line on desktop instead of wrapping mid-phrase. */
.cr-iso__head {
  text-align: center;
  max-width: 52rem;
  margin: 0 auto clamp(1.7rem, 2.8vw, 2.4rem);
}
/* .cr-h2--center carries a large bottom margin for sections where the heading
   stands alone; here the intro line sits directly under it and owns the gap. */
.cr-iso__head .cr-h2--center { margin-bottom: .55rem; }
.cr-iso__intro {
  margin: 0;
  font-size: .88rem;
  color: var(--ink-60);
}

/* The chart spans the full section width and sits on a soft panel.
   overflow-x lets the wide graphic scroll on small screens (paired with the
   img min-width below) rather than shrinking its text to nothing. */
.cr-iso__chart {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.2rem, 2.5vw, 2.2rem) clamp(1rem, 2vw, 2rem);
  overflow-x: auto;
}
.cr-iso__chart img {
  display: block;
  width: 100%;
  min-width: 720px;          /* keeps labels legible; container scrolls if narrower */
  height: auto;
  margin-inline: auto;
}

/* ISO badge scale ----------------------------------------------------- */
.iso-scale {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: .4rem;
  min-width: 760px;          /* pairs with the container's overflow-x on mobile */
  position: relative;
  margin: 0; padding: 0; list-style: none;
}
/* connecting line running through the centre of the badges */
.iso-scale::before {
  content: '';
  position: absolute;
  top: 33px; left: 7%; right: 7%;
  height: 2px;
  background: linear-gradient(90deg, #0A2C51, #3E9AD0 45%, #93C5E2 65%, #BDC4C8);
  z-index: 0;
}
.iso-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .1rem;
  position: relative;
  z-index: 1;
}
/* small connector dot sitting on the line between adjacent badges */
.iso-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 33px; right: 0;
  transform: translate(50%, -50%);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--iso, var(--navy));
  z-index: 2;
}
.iso-badge {
  display: grid; place-items: center;
  width: 66px; height: 66px;
  border-radius: 50%;
  margin-bottom: .7rem;
  background: var(--iso, var(--navy));
  color: #fff;                       /* white label on every badge, as in the reference */
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 4px 12px rgba(20, 60, 114, .18);
}

.iso-name {
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--navy-ink);
  margin-bottom: .25rem;
  min-height: 2.3em;
}
.iso-count { font-size: .7rem; color: var(--ink-60); }
.iso-unit  { font-size: .64rem; color: var(--ink-40); }

.iso-ends {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.4rem;
  min-width: 760px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy);
}
.iso-ends__label { flex: none; white-space: nowrap; }
.iso-ends__label--start { color: var(--navy); }         /* clean end — navy */
.iso-ends__label--end   { color: #98A0A6; }             /* general end — grey */

/* Directional arrow: gradient line (navy → grey) with a matching arrowhead
   at each end — navy on the left, grey on the right, as in the reference. */
.iso-ends__arrow {
  flex: 1;
  height: 2px;
  position: relative;
  background: linear-gradient(90deg, #0A2C51, #6E96AE 55%, #BDC4C8);
}
.iso-ends__arrow::before,
.iso-ends__arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
}
.iso-ends__arrow::before { left: 0;  border-right-color: #0A2C51; }  /* left head, navy */
.iso-ends__arrow::after  { right: 0; border-left-color: #BDC4C8; }   /* right head, grey */


/* ===== 8. CTA BAND ===================================================== */
.cr-cta {
  background: var(--navy-dark);
  color: var(--on-dark);
  position: relative;
}
.cr-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2.4rem, 4vw, 3.4rem);
  flex-wrap: wrap;
}
.cr-cta__title { color: #fff; font-size: clamp(1.3rem, 2.2vw, 1.75rem); margin-bottom: .4rem; }
.cr-cta__copy p { color: var(--on-dark); margin: 0; max-width: 32rem; }
.cr-cta__btns { display: flex; gap: .8rem; flex-wrap: wrap; }


/* ===== 9. RESPONSIVE =================================================== */
@media (max-width: 1100px) {
  .cr-ind-grid { grid-template-columns: repeat(4, 1fr); row-gap: 2rem; }
  .cr-ind:nth-child(4n) { border-right: 0; }
  .cr-ind:nth-child(-n+4) { border-bottom: 1px solid var(--line); padding-bottom: 2rem; }

  .cr-cards { grid-template-columns: repeat(3, 1fr); }

  .cr-steps { grid-template-columns: repeat(4, 1fr); row-gap: 2.4rem; }
  /* The steps wrap onto multiple rows here, so the single connecting line and
     its arrows would point across row breaks — drop both together. */
  .cr-steps::before,
  .cr-step:not(:last-child)::after { display: none; }
}

@media (max-width: 820px) {
  .cr-what__grid { grid-template-columns: 1fr; }
  .cr-what__media { order: -1; }          /* diagram above copy on small screens */

  /* Copy sits over the photo here, so wash top-down for legibility */
  .cr-hero { min-height: 0; }
  .cr-hero__veil {
    background: linear-gradient(180deg,
      rgba(255,255,255,.95) 0%, rgba(255,255,255,.9) 45%, rgba(255,255,255,.8) 100%);
  }

  .cr-facts { grid-template-columns: repeat(3, 1fr); gap: 1.4rem 1rem; }
  .cr-cards { grid-template-columns: repeat(2, 1fr); }

  .cr-cta__inner { flex-direction: column; align-items: flex-start; }
  .cr-cta__btns { width: 100%; }
}

@media (max-width: 560px) {
  .cr-ind-grid { grid-template-columns: repeat(2, 1fr); }
  .cr-ind:nth-child(4n) { border-right: 1px solid var(--line); }
  .cr-ind:nth-child(2n) { border-right: 0; }
  .cr-ind:nth-child(-n+6) { border-bottom: 1px solid var(--line); padding-bottom: 1.6rem; }

  .cr-facts { grid-template-columns: repeat(2, 1fr); }
  .cr-cards { grid-template-columns: 1fr; }
  .cr-steps { grid-template-columns: repeat(2, 1fr); }
  .cr-hero__btns .btn,
  .cr-cta__btns .btn { flex: 1 1 100%; }
}