/* ============================================================================
   About us (id_cms=4) — editorial layout
   ----------------------------------------------------------------------------
   Loaded only on this page, from `cms/page.tpl`. Everything here is scoped to
   `.about`, the wrapper class the CMS content itself carries.

   Measured on the stock page before this existed:

     <h1> count        2   — page.tpl renders one, the content carried another
     .col-sm-4 width   285px AT BOTH 1440 AND 1024  (identical, not responsive)
     <em class=icon-ok> 0x20, empty — a font-icon class from a theme long gone
     reading measure   261px  ~32 characters per line

   The 285px columns were `cms-premium.css`'s own `max-width: 52rem` on
   `.page-cms.rich-text`: the right cap for a column of prose, the wrong one for
   a three-column grid, which is why ~440px of the page sat empty on the right.
   `.about` opts out of that cap and sets its own measure per block instead.

   NOTE ON MARKUP: this page's HTML lives in the database and is re-purified on
   every back-office save. HTMLPurifier here strips `<section>`, `data-*` AND
   `aria-*` — verified against `Tools::purifyHTML()`, not assumed. So the content
   is div/p/h2/ul/li/span + class only; every icon, rule and quote mark below is
   drawn in CSS, and the counter reads the visible text rather than a data
   attribute. Keep it that way or an editor's first save will silently strip it.
   ========================================================================== */

:root {
  --skt-pink: #d50075;
  --skt-pink-dark: #9e0056;
  --skt-pink-tint: #fef0f7;
  --skt-pink-border: #f0dce8;
  --skt-gold: #ffce54;
  --skt-ink: #1a0010;
  --skt-muted: #5c4453;
}

/* The prose cap is lifted here so the band layouts can use the full column. */
.page-cms.rich-text:has(.about) {
  max-width: none;
}

.about {
  --about-measure: 40rem;
}

/* ---------- Page title ----------
   page.tpl ships the h1 with class `h4`, so it rendered at 24px — smaller than
   the 40px <h1> the old content carried below it. The content's duplicate is
   gone; this is now the page's only h1, sized to act like one. `:has(.about)`
   keeps it off the other CMS pages (Delivery, Legal Notice, Terms…). */
body#cms:has(.about) .page-header {
  text-align: center;
  margin-bottom: 0;
}

body#cms:has(.about) .page-header h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--skt-ink);
  margin: 0;
}

/* ---------- Hero ---------- */
.about__eyebrow {
  text-align: center;
  margin: 0 0 1rem;
}

.about__eyebrow span {
  display: inline-block;
  padding: .4rem 1rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 999px;
  background: var(--skt-pink-tint);
  color: var(--skt-pink-dark);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.about__lede {
  max-width: 34rem;
  margin: 1.25rem auto 0;
  text-align: center;
  font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem);
  line-height: 1.55;
  color: var(--skt-muted);
}

/* ---------- Stat band ----------
   The numbers were buried mid-paragraph, where they read as filler. They are
   the strongest thing this company has to say, so they get their own band. */
.about__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: clamp(2.5rem, 5vw, 4rem) 0;
  background: var(--skt-pink-border);
  border: 1px solid var(--skt-pink-border);
  border-radius: 18px;
  overflow: hidden;
}

.about__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: clamp(1.25rem, 3vw, 2rem) .75rem;
  background: #fff;
  text-align: center;
  transition: background-color .3s ease;
}

@media (hover: hover) {
  .about__stat:hover {
    background: var(--skt-pink-tint);
  }
}

.about__stat-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.85rem, 1.2rem + 2.2vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  color: var(--skt-pink);
  /* Lining figures, and a fixed advance so a counting number cannot make the
     row twitch as it ticks through different digit widths. */
  font-variant-numeric: lining-nums tabular-nums;
}

.about__stat-label {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--skt-muted);
  line-height: 1.35;
}

@media (max-width: 767.98px) {
  .about__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Content blocks ---------- */
.about__block {
  max-width: var(--about-measure);
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

.page-cms.rich-text .about__h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.15rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--skt-ink);
  margin: 0 0 1rem;
  padding: 0 0 .75rem;
  border-bottom: 0;
  position: relative;
}

/* A short brand rule instead of the full-width hairline the generic CMS
   heading style draws — at this size that line cut the page in half. */
.page-cms.rich-text .about__h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3rem;
  height: 3px;
  border-radius: 2px;
  background: var(--skt-pink);
}

.about__standfirst {
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 600;
  color: var(--skt-ink);
  margin-bottom: 1rem;
}

.about__block p {
  margin-bottom: 1rem;
}

/* ---------- Capability list ----------
   The old content used <em class="icon-ok">, a font-icon class whose stylesheet
   left with the previous theme — the elements measured 0x20 and drew nothing.
   The mark is a CSS pseudo-element now, so it cannot be stripped by the
   purifier and survives an editor rewriting the text. */
.page-cms.rich-text .about__points {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}

.about__points li {
  position: relative;
  padding: .85rem 1rem .85rem 3rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 12px;
  background: #fff;
  font-weight: 600;
  color: var(--skt-ink);
  line-height: 1.5;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.about__points li::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--skt-pink) center / 12px 12px no-repeat;
  /* Tick drawn as an inline SVG data URI so there is no icon font to load and
     nothing to go missing the way `icon-ok` did. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.5 3.5L13 5'/%3E%3C/svg%3E");
}

@media (hover: hover) {
  .about__points li:hover {
    border-color: var(--skt-pink);
    box-shadow: 0 8px 20px rgba(213, 0, 117, .1);
    transform: translateY(-2px);
  }
}

/* ---------- Credentials ---------- */
.about__block--creds {
  max-width: none;
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--skt-pink-border);
  border-radius: 20px;
  background:
    radial-gradient(120% 100% at 50% 0%, var(--skt-pink-tint) 0%, #fff 62%);
}

.page-cms.rich-text .about__block--creds .about__h2 {
  text-align: center;
}

/* Needs to out-specify `.page-cms.rich-text .about__h2::after` (0,2,2), which
   pins the rule to the left edge — matching that weight is what actually
   centres it under a centred heading. */
.page-cms.rich-text .about__block--creds .about__h2::after {
  left: 50%;
  transform: translateX(-50%);
}

/* Five credentials into a four-up grid left the fifth alone on its own row,
   with the grid's 1px-gap background showing as a wide pink slab beside it.
   Flex with a centred last line has no holes to fill, so the odd item simply
   centres — and real gaps replace the hairline trick that caused the slab. */
.page-cms.rich-text .about__creds {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}

.about__creds li {
  flex: 1 1 12rem;
  max-width: 16rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .3rem;
  padding: 1.25rem 1.15rem;
  background: #fff;
  border: 1px solid var(--skt-pink-border);
  border-radius: 14px;
  text-align: center;
  transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}

@media (hover: hover) {
  .about__creds li:hover {
    background: var(--skt-pink-tint);
    border-color: var(--skt-pink);
    transform: translateY(-2px);
  }
}

.about__cred-k {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--skt-ink);
  line-height: 1.2;
}

.about__cred-v {
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--skt-muted);
}

/* ---------- Sign-off ---------- */
.about__signoff {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  text-align: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem);
  font-weight: 600;
  font-style: italic;
  letter-spacing: -.01em;
  color: var(--skt-ink);
}

.about__signoff::after {
  content: "";
  display: block;
  width: 4rem;
  height: 3px;
  margin: 1.15rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--skt-pink), var(--skt-gold));
}

/* ---------- Scroll reveal ----------
   `.about` only gets `is-ready` once the script runs, so with JS blocked or
   broken every block stays at its natural opacity instead of an invisible page.
   Failing open matters more here than the animation does. */
.about.is-ready .about__reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
              transform .6s cubic-bezier(.22, .61, .36, 1);
}

.about.is-ready .about__reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .about.is-ready .about__reveal,
  .about.is-ready .about__reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .about__stat,
  .about__points li,
  .about__creds li {
    transition: none;
  }
}