/* ==========================================================================
   About Us page
   ========================================================================== */

/* ---------- Story: two columns of text and photos ---------- */
.story { padding: 5em 0 1em; }
.story-grid { display: flex; }
.story-main {
  width: 56.403%; padding: 3em 5em 3em 1em;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.story-main > * { flex: none; max-width: none; margin: 0; }
/* Text blocks keep their last paragraph's 14.4px margin, as in the original (widgets there have no extra gap). */
.story p, .story p:last-child, .csr-text p:last-child, .about-values p:last-child { margin-bottom: 14.4px; }
.story-main > p, .story-main > .story-text { width: 110.356%; }
.story-mall { width: 108.186%; margin-bottom: 7px !important; border-radius: var(--radius); }
.story-plumber { width: 108.662%; height: 253px; object-fit: cover; object-position: center; border-radius: var(--radius); }

.story-side {
  position: relative; width: 43.559%; padding: 10px;
  display: flex; flex-direction: column; align-items: flex-end;
  background: url(../../img/2023/10/memphis_img2.png) left center / 150px auto no-repeat;
}
.story-gloves { width: 459px; max-width: 100%; padding: 2em 2em 5em 0; }
.story-gloves img {
  width: 100%; height: 500px; object-fit: cover; object-position: center;
  border: 10px solid var(--c-white); border-radius: var(--radius-lg);
  transition: transform .4s ease;
}
.story-gloves:hover img { transform: scale(1.015); }
.story-side-text { width: 95.913%; }
.story-badge {
  position: absolute; top: 0; right: 0;
  width: 200px; height: 200px; padding: 21px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  border-radius: 50%;
  background: radial-gradient(at top left, var(--c-blue) 0%, var(--c-blue) 100%);
  color: var(--c-white);
}
.story-badge-number { font-family: var(--f-head); font-size: var(--fs-display); font-weight: 700; line-height: 1; letter-spacing: -1.3px; margin-bottom: 7px; }
.story-badge-label { font-family: var(--f-body); font-size: var(--fs-button); font-weight: 500; line-height: 1; letter-spacing: 1px; text-transform: uppercase; }

@media (max-width: 1024px) {
  .story { padding: 1em 0 3em; }
  .story-grid { flex-wrap: wrap; }
  .story-main { width: 100%; padding: 2em; }
  /* The original keeps its 108-110% widths here and spills past the screen; keep everything inside. */
  .story-main > p, .story-main > .story-text, .story-mall, .story-plumber { width: 100%; }
  .story-side { width: calc(100% - 2em); margin: 1em; background-size: 250px auto; }
  .story-badge { width: 175px; height: 175px; }
}
@media (max-width: 767px) {
  .story { padding: 1em 0; }
  .story-main { padding: 21px; }
  .story-side { width: 100%; margin: 10px 0 0; }
  .story-gloves { width: 265px; padding: 2em 1em 3em 0; }
  .story-gloves img { height: 275px; border-width: 7px; }
  .story-badge { width: 150px; height: 150px; padding: 10px; }
}

/* ---------- Corporate social responsibility ---------- */
.csr .container { padding: 10px; }
.csr h2 { text-align: center; }

/* ---------- Values card (shared .value-card) ---------- */
@media (min-width: 1025px) {
  .about-values { padding: 0 0 7em; }
  .about-values .value-intro { width: 39.206%; }
  .about-values .value-col { width: 29.127%; }
  .about-values .value-col + .value-col { width: 31.331%; }
}

/* ---------- Section titles (red, centred) ---------- */
.about-head { padding: 10px; }
.about-title {
  font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; letter-spacing: -1.2px;
  color: var(--c-red); text-align: center;
}

/* ---------- Group of companies + brands ---------- */
.group-band { background: var(--c-light-2); padding: 1em 0; }
.group-band .container { padding: 10px; }
.group-band .logo-carousel { margin: 0; }
.about-brands { margin: 0; padding: 10px; }
@media (max-width: 767px) { .group-band { padding: 0; } }

/* ---------- Certifications & awards ---------- */
.certs-head { margin-top: 60px; }
.certs-head .about-title { padding-top: 10px; }
.certs-band { background: var(--c-light-2); padding: 1em 0; }
.certs-band .container { padding: 10px; }
.cert-list { --per-view: 3; display: flex; justify-content: center; list-style: none; }
.cert-list > li { flex: 0 0 calc(100% / var(--per-view)); min-width: 0; padding: 0 5px; }
.cert-list img {
  width: auto; height: 150px; max-width: 100%; margin: 0 auto; object-fit: contain;
  transition: transform .3s;
}
.cert-list li:hover img { transform: scale(1.04); }
@media (max-width: 1024px) { .cert-list { --per-view: 5; } }
@media (max-width: 767px) {
  .certs-band { padding: 0; }
  .cert-list { --per-view: 3; }
  .cert-list img { height: auto; max-height: 150px; }
}

/* ---------- Our team ---------- */
.team { background: var(--c-light-2); padding: 2em 0 5em; }
.team-head { max-width: 720px; margin: 0 auto; padding: 1em; }
.team-head .about-title { padding-top: 10px; }
.team-grid { display: flex; flex-wrap: wrap; list-style: none; }
.team-card {
  width: calc(25% - 20px); margin: 10px;
  display: flex; flex-direction: column;
  background: var(--c-white); border-radius: var(--radius-lg);
}
.team-photo { position: relative; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.team-photo img { width: 100%; }
.team-photo::before {
  content: ""; position: absolute; left: 0; top: 100%; width: 100%; height: 100%;
  background: #0d1e4680; opacity: 0; transition: top .4s ease, opacity .4s ease;
}
.team-card:hover .team-photo::before { top: 0; opacity: 1; }
.team-info {
  flex: 1; padding: 21px; text-align: center;
  background: var(--c-white); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow);
}
.team-name { margin: 0 0 7px; font-size: var(--fs-h5); font-weight: 600; line-height: 1.4; letter-spacing: -0.5px; color: #000; }
.team-role { margin: 0; font-family: var(--f-body); font-size: var(--fs-button); font-weight: 500; line-height: 1.5; letter-spacing: 1px; text-transform: uppercase; color: var(--c-text); }
@media (max-width: 1024px) {
  .team { padding: 1em 1em 3em; }
  .team-card { width: calc(50% - 20px); }
  /* the original's team photos are about two-thirds of the card width on tablets and phones */
  .team-photo { display: flex; justify-content: center; background: var(--c-white); }
  .team-photo img { width: 72%; }
}
@media (max-width: 767px) {
  .team { padding: 1em 0 2em; }
  .team-head { padding: 21px; }
  .team-card { width: calc(100% - 20px); }
  .team-photo img { width: 69%; }
}

/* ---------- Find us (map) ---------- */
.find-us .container { padding: 10px; }
.find-us h2 { color: var(--c-red); text-align: center; margin-bottom: var(--gap); }
.find-us-intro { max-width: 720px; margin: 0 auto 24px; text-align: center; }
.find-us-intro a { color: var(--c-blue); }
.find-us-intro a:hover { color: var(--c-red); }
.find-us .office-map { padding: 0 14px 14px; }