/* ============================================================
   PIXENTRA — Home Page Stylesheet (frontend/styles/pages/home.css)
   ─────────────────────────────────────────────────────────────
   Bundle       : HOME page only. Section-wise merged, in order:
                    03. Services  ← migrated from
                        frontend/styles/components/services.css
                        (Rule 8.2, Rule 12.1)
   Naming       : BEM-style, fully spelled-out — 1:1 with index.html
                    .services-*    section chrome — shell, eyebrow,
                                   intro, grid/columns, intro CTA
                    .service-card  card block — --variant / __element
                    (Rule 3, Rule 4 — orphan selectors banned)
   Scope        : .services-* / .service-card* only. No global
                    body/h2/p/* leakage (Rule 17.2).
   Colours/fonts: ONLY frontend/styles/global/variables.css tokens
                    or color-mix() of tokens. Zero hardcoded hex/rgb,
                    incl. white/black (Rule 13). Verified: grep hex/rgb = 0.
   Type         : fluid via clamp() (Rule 10.2). Layout via CSS Grid,
                    Flex only for 1D rows (Rule 10.1).
   Breakpoints  : 5 mandatory (Rule 9) —
                    Desktop ≥1440 (base) | Laptop 1024–1439 |
                    Tablet 768–1023 | Mobile 361–767 | Small ≤360.
                    Legacy max-width tuning preserved inside these bands.
   Interaction  : cards carry no hover styling — pointer motion lives in
                    frontend/scripts/pages/home.js; intro CTA keeps hover +
                    focus-visible, benefit tooltips keep hover +
                    focus-within (keyboard reveal).
   CMS          : markup carries data-cms-* hooks (see index.html).
   Viewport ref : 1440px desktop base, fluid to 320px, max-width guard
                    for large desktop (Rule 9.5).
   ============================================================ */

/* ========== 03. Services ========== */


/* ─────────────────────────────────────────────────────────────
   1. BOX-SIZING RESET (scoped)
   ───────────────────────────────────────────────────────────── */
.services-section,
.services-section *,
.impact-section,
.impact-section *,
.case-section,
.case-section *,
.ind-section,
.ind-section *,
.why-section,
.why-section *,
.proc-section,
.proc-section *,
.tech-section,
.tech-section * {
  box-sizing: border-box;
}

/* ── Cross-section scoped reset (5 subtrees) — POSITION IS LOAD-BEARING ──
   This MUST stay above every section rule in this file: it was previously
   merged at tm-area and overrode real declarations (zeroed paddings site-wide).
   Never move it down, never merge it elsewhere. (Cascade fix, Oct 2026.) */
.tm-section *,
.tm-section *::before,
.tm-section *::after,
.pix-about *,
.pix-about *::before,
.pix-about *::after,
.ins-section *,
.ins-section *::before,
.ins-section *::after,
.faq-section *,
.faq-section *::before,
.faq-section *::after,
.cta-section *,
.cta-section *::before,
.cta-section *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ─────────────────────────────────────────────────────────────
   2. SECTION SHELL
   ───────────────────────────────────────────────────────────── */
.services-section {
  width: 100%;
  background: none;
  padding: 48px 16px 0;
}


/* ─────────────────────────────────────────────────────────────
   3. CONTAINER
   ───────────────────────────────────────────────────────────── */
.services-container {
  width: 100%;
}


/* ─────────────────────────────────────────────────────────────
   4. SECTION HEADER — EYEBROW
   ───────────────────────────────────────────────────────────── */
.services-header,
.ind-header {
  margin-bottom: 24px;
}

.services-eyebrow,
.ind-eyebrow,
.ind-explore__eyebrow,
.why-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.services-eyebrow__text {
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 10.2 fluid */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--gradient-brand-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.services-eyebrow__lines,
.ind-eyebrow__lines,
.why-eyebrow__lines,
.proc-eyebrow__lines,
.tech-eyebrow__lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.services-eyebrow__line,
.impact-eyebrow-line,
.case-eyebrow-line,
.ind-eyebrow__line,
.why-eyebrow__line,
.proc-eyebrow__line,
.tech-eyebrow__line,
.pix-about__eyebrow-line,
.ins-eyebrow-line,
.faq-eyebrow-line {
  display: block;
  height: 2px;
  background: linear-gradient(45deg, var(--color-green-forest), transparent);
}

.services-eyebrow__line--primary,
.impact-eyebrow-line--primary,
.case-eyebrow-line--primary,
.ind-eyebrow__line--primary,
.why-eyebrow__line--primary,
.proc-eyebrow__line--primary,
.tech-eyebrow__line--primary,
.pix-about__eyebrow-line--primary,
.ins-eyebrow-line--primary,
.faq-eyebrow-line--primary { width: 60%; }
.services-eyebrow__line--secondary,
.impact-eyebrow-line--secondary,
.case-eyebrow-line--secondary,
.ind-eyebrow__line--secondary,
.why-eyebrow__line--secondary,
.proc-eyebrow__line--secondary,
.tech-eyebrow__line--secondary,
.pix-about__eyebrow-line--secondary,
.ins-eyebrow-line--secondary,
.faq-eyebrow-line--secondary { width: 80%; }


/* ─────────────────────────────────────────────────────────────
   5. INTRO GRID  [8fr] [1fr spacer] [3fr CTA]
   ───────────────────────────────────────────────────────────── */
.services-intro {
  display: grid;
  grid-template-columns: 8fr 1fr 3fr;
  column-gap: 24px;
  align-items: center;
  margin-bottom: 32px;
}


/* ─────────────────────────────────────────────────────────────
   6. INTRO — LEFT CONTENT
   ───────────────────────────────────────────────────────────── */
.services-intro__content,
.case-panel {
  min-width: 0;
}

.services-intro__headline,
.impact-headline,
.case-headline,
.why-headline,
.proc-headline,
.tech-headline {
  margin: 0;
  font-family: var(--font-base);
  font-size: clamp(36px, 3.6vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-black);
}

.services-intro__description {
  margin: 12px 0 0;
  font-family: var(--font-base);
  font-size: clamp(14px, 0.875rem + 0.5vw, 16px); /* Rule 10.2 fluid */
  font-weight: 400;
  line-height: 1.65;
  color: var(--clr-text-secondary);
}


/* ─────────────────────────────────────────────────────────────
   7. INTRO — SPACER COLUMN
   ───────────────────────────────────────────────────────────── */
/* .services-intro__spacer — purely structural, no styles needed */


/* ─────────────────────────────────────────────────────────────
   8. INTRO — RIGHT CTA
   ───────────────────────────────────────────────────────────── */
.services-intro__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.services-intro__microcopy {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.services-intro__microcopy span {
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 10.2 fluid */
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-green-forest);
  white-space: nowrap;
}


/* ─────────────────────────────────────────────────────────────
   9. CTA BUTTON
   ───────────────────────────────────────────────────────────── */
.services-cta-button {
  width: 100%;
  height: 52px;
  padding: 0 7px 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-decoration: none;
  border-radius: 999px;
  background: transparent;
  border: 2px solid var(--clr-green-border);
  transition: border-color 0.22s ease, transform 0.22s ease;
}

.services-cta-button:hover {
  border-color: var(--color-green-forest);
  transform: translateY(-2px);
}

.services-cta-button:focus-visible,
.case-pill-btn:focus-visible,
.case-info__link:focus-visible,
.proc-pill-btn:focus-visible,
.tech-pill-btn:focus-visible,
.tm-start:focus-visible,
.pix-about__cta:focus-visible,
.ins-card__link:focus-visible,
.cta-start:focus-visible {
  outline: 2px solid var(--color-green-primary);
  outline-offset: 2px;
  border-radius: 999px;
}

.services-cta-button__label {
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.3vw, 12px); /* Rule 24: 12 scale */
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-green-forest);
  white-space: nowrap;
}

.services-cta-button__icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--color-green-forest), var(--color-green-parrot));
  color: var(--color-white);
  transition: transform 0.22s ease;
}

.services-cta-button:hover .services-cta-button__icon {
  transform: translate(2px, -2px);
}


/* ─────────────────────────────────────────────────────────────
   10. SERVICES GRID
   6-column grid: 3 equal col wrappers (2 cols each) + last row
   Container = 11/12 width, centered via margin auto
   ───────────────────────────────────────────────────────────── */
.services-grid {
  width: 100%;
  max-width: calc(11 / 12 * 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  align-items: start;
}

/* ── Column wrappers ──────────────────────────────────────── */
.services-grid__column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.services-grid__column--1 { grid-column: 1 / 3; }
.services-grid__column--2 { grid-column: 3 / 5; }
.services-grid__column--3 { grid-column: 5 / 7; }

/* Side columns stretch to the row height (set by the taller
   middle column) and push their cards to the bottom edge. */
.services-grid__column--1,
.services-grid__column--3 {
  align-self: stretch;
  justify-content: flex-end;
}

/* ── Base card ────────────────────────────────────────────── */
.service-card {
  position: relative;
  width: 100%;
  background: var(--color-grey-light);
  border-radius: 12px;
  overflow: hidden;
}

/* ── Aspect ratios ────────────────────────────────────────── */
.service-card--ratio-3-2 { aspect-ratio: 3 / 2; }
.service-card--ratio-3-4 { aspect-ratio: 3 / 4; }
.service-card--ratio-3-1 { aspect-ratio: 3 / 1; }

/* ── Last row (2 columns each = same width/height as the
      featured cards above; centered pair with a 1-column
      margin on both sides) ─────────────────────────────── */
.service-card--last-left { grid-column: 2 / 4; }
.service-card--last-right { grid-column: 4 / 6; }


/* ─────────────────────────────────────────────────────────────
   10b. CARD CONTENT
   ───────────────────────────────────────────────────────────── */
.service-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: clamp(18px, 1.125rem + 1vw, 22px); /* R24.5 icon glyph */
  background: color-mix(in srgb, var(--color-green-primary) 12%, transparent);
  color: var(--color-green-forest);
}

/* Index number — decorative, sits in a corner */
.service-card__index {
  position: absolute;
  top: 22px;
  right: 22px;
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--clr-text-subtle);
}


/* ── Light card ───────────────────────────────────────────── */
.service-card--light {
  background: var(--color-page-bg);
  border: 1px solid var(--color-border);
}

.service-card--featured {
  background: var(--color-white);
  border: 2px solid var(--clr-border-grey-50);
  border-radius: 24px;
  container-type: inline-size;   /* enables cqw units inside this card */

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  padding: 16px;
}

/* ── Featured card — Web & Software Development ────────────
   Compressed to fit the 3:2 slot in column 1.
   ───────────────────────────────────────────────────────── */
/* Head = two columns: [icon + title + rule] and [01].
   `stretch` makes the 01 column match the main column's height. */
.service-card__head {
  display: flex;
  align-items: stretch;
  gap: 14px;
  min-width: 0;
}

/* Left column — icon/title row with the rule pushed to the end */
.service-card__head-main,
.service-card__title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.service-card__title-row {
  display: flex;
  align-items: flex-start;   /* icon + title share the same top edge */
  gap: 14px;
  min-width: 0;
}

/* Right column — height mirrors .service-card__head-main (stretch),
   so 01 spans exactly from the top edge down to the HR line */
.service-card__head-side {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}

.service-card__title-icon {
  width: 32px;
  height: 32px;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  font-size: clamp(16px, 1rem + 0.8vw, 20px); /* R24.5 icon glyph */
  flex-shrink: 0;
}

/* Index fills the right column's full height — that guarantees
   background-clip:text paints the whole gradient over the digit
   (no more clipped top), and 01 spans down to the HR line. */
.service-card__head .service-card__index {
  position: static;
  display: flex;
  align-items: center;
  height: 100%;
  font-size: clamp(36px, 3.75vw, 48px); /* R24.5 watermark numeral */
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  opacity: 0.28;
  background: var(--gradient-brand-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.service-card__title {
  margin: 0;
  min-width: 0;
  font-family: var(--font-base);
  font-size: clamp(14px, 0.875rem + 0.6vw, 16px); /* Rule 24: 16 scale */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-green-forest);
}

/* Gradient rule — pushed to the bottom end of .service-card__head-main,
   only under icon + title (never under 01) */
.service-card__gradient-rule {
  width: 100%;
  height: 2px;
  background: linear-gradient(
    45deg,
    var(--color-green-forest) 0%,
    transparent 100%
  );
  margin-top: auto;
}

/* ── Body — 80% left (content) + 20% right ─────────────────── */
.service-card__body {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.service-card__body-left {
  flex: 0 0 80%;
  max-width: 80%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-card__body-right {
  flex: 0 0 20%;
  max-width: 20%;
  display: flex;
  align-items: flex-end;      /* icons → bottom */
  justify-content: flex-end;  /* icons → right */
  padding: 0px;
}

/* Bottom-right icon trio (16px, green) — stacked vertically,
   each icon inside a round badge that fills with brand gradient
   on hover while a tooltip slides out to the LEFT (inside card) */
.service-card__benefits {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-card__benefit {
  position: relative;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.service-card__benefit-icon {
  position: relative;
  overflow: hidden;              /* clips the rising fill to the circle */
  z-index: 1;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-green-tint-badge);
  transition: color 0.3s ease;
}

.service-card__benefit-icon i {
  position: relative;
  z-index: 1;
  font-size: clamp(12px, 0.75rem + 0.8vw, 16px); /* R24.5 icon glyph */
  color: currentColor;
  line-height: 1;
}

.service-card__benefit { color: var(--color-green-forest); }

/* Fill layer — grows bottom → top with forest → parrot gradient */
.service-card__benefit-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: var(--gradient-brand);
  transition: height 0.3s ease;
}

.service-card__benefit:hover .service-card__benefit-fill,
.service-card__benefit:focus-within .service-card__benefit-fill {
  height: 100%;
}

.service-card__benefit:hover .service-card__benefit-icon,
.service-card__benefit:focus-within .service-card__benefit-icon {
  color: var(--color-white);     /* icon turns white over the fill */
}

/* ── Tooltip — opens to the LEFT, inside the card ──────────── */
.service-card__tooltip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  z-index: 5;
  width: 240px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--color-white);
  border: 1px solid var(--clr-green-border);
  box-shadow: var(--shadow-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease,
              visibility 0.3s ease;
  pointer-events: none;
}

.service-card__benefit:hover .service-card__tooltip,
.service-card__benefit:focus-within .service-card__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.service-card__tooltip-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--color-green-forest);
}

.service-card__tooltip-head i {
  font-size: clamp(12px, 0.75rem + 0.4vw, 14px); /* Rule 24: 14 scale icon */
  line-height: 1;
}

.service-card__tooltip-title {
  font-size: clamp(12px, 0.75rem + 0.3vw, 14px); /* Rule 24: 14 scale */
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-black);
}

/* Divider between the head and the text */
.service-card__tooltip hr {
  height: 1px;
  margin: 8px 0;
  border: 0;
  background: var(--color-border);
}

.service-card__tooltip-text {
  margin: 0;
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 500;
  line-height: 1.5;
  color: var(--clr-text-body);
}

/* Description wrapper — fills the 80% column */
.service-card__description-wrap {
  width: 100%;
  max-width: 100%;
}

.service-card__description {
  margin: -4px 0 0;
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.5vw, 12px); /* Rule 24: 12 scale */
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-black);
}

/* Services list — flex-wrap bullets */
.service-card__list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.service-card__list li {
  position: relative;
  padding-left: 10px;
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.5vw, 12px); /* Rule 24: 12 scale */
  font-weight: 500;
  line-height: 1.25;
  text-transform: capitalize;
  color: var(--clr-text-body);
  white-space: nowrap;
}

/* Custom bullet */
.service-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-green-primary);
}

/* CTA — [ text pill ][ gap ][ arrow circle ]
   The circle sits OUTSIDE the pill, same height as the pill.
   Height = whatever space is left in the card (no fixed value). */
.service-card__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  flex-shrink: 0;
  margin-top: auto;
  text-decoration: none;
}

.service-card__cta-pill {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(
    45deg,
    var(--color-green-forest) 0%,
    var(--color-black) 40%
  );
  font-family: var(--font-base);
  font-size: clamp(9px, 3.2cqw, 12px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-white);
  white-space: nowrap;
}

.service-card__cta-icon {
  /* Fixed size — never stretches with card height */
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex-shrink: 0;
  border: 2px solid var(--clr-green-border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--color-green-forest);
  align-self: center;   /* vertically center inside the flex row */
}

.service-card__cta-icon svg {
  width: 16px;
  height: 16px;
}

.service-card__cta:focus-visible,
.impact-cta__btn:focus-visible,
.case-slider-arrow:focus-visible,
.case-thumb--active,
.ind-stack-card:focus-visible,
.ins-select:focus-visible,
.ins-nav:focus-visible,
.ins-viewall:focus-visible,
.faq-toggle:focus-visible {
  outline: 2px solid var(--color-green-primary);
  outline-offset: 2px;
}

/* ── Dark card ────────────────────────────────────────────── */
.service-card--dark {
  background: var(--color-black);
  border: 1px solid color-mix(in srgb, var(--color-white) 10%, transparent);
}

.service-card--dark .service-card__index { color: color-mix(in srgb, var(--color-white) 60%, transparent); }
.service-card--dark .service-card__icon {
  background: color-mix(in srgb, var(--color-green-primary) 12%, transparent);
  color: var(--color-green-parrot);
}


/* ── Featured card on a DARK card — UI/UX Design ─────────────
   Same structure as the white featured cards, re-tuned for the
   black surface (white text, brighter greens, outlined CTA).
   ───────────────────────────────────────────────────────────── */
.service-card--dark.service-card--featured {
  background: var(--color-black);
  border: 2px solid color-mix(in srgb, var(--color-white) 12%, transparent);
}

.service-card--dark .service-card__title,
.impact-stats__icon:hover i,
.impact-stats__icon:has(+ .impact-stats__body:hover) i,
.tm-person__name--light,
.tm-person__role--light,
.tm-rating__value--light {
  color: var(--color-white);
}

.service-card--dark .service-card__description {
  color: color-mix(in srgb, var(--color-white) 72%, transparent);
}

/* Rule — brighter green so it reads on black */
.service-card--dark .service-card__gradient-rule {
  background: linear-gradient(
    45deg,
    var(--color-green-primary) 0%,
    transparent 100%
  );
}

/* Index watermark — the 0.28 of the light card is invisible here */
.service-card--dark .service-card__head .service-card__index {
  opacity: 0.5;
}

/* List — same tone as the dark card's description */
.service-card--dark .service-card__list li {
  color: color-mix(in srgb, var(--color-white) 66%, transparent);
}

/* Trio badges — parrot icon on a stronger green tint */
.service-card--dark .service-card__benefit {
  color: var(--color-green-parrot);
}

.service-card--dark .service-card__benefit-icon {
  background: color-mix(in srgb, var(--color-green-primary) 22%, transparent);
}

/* CTA — arrow goes parrot for contrast on the black card */
.service-card--dark .service-card__cta-icon {
  border-color: color-mix(in srgb, var(--color-green-primary) 55%, transparent);
  color: var(--color-green-parrot);
}


/* ── Image card ───────────────────────────────────────────── */
.service-card--image {
  padding: 0;
  background: var(--color-dark);
  display: flex;
  flex-direction: column;
  border-radius: 1.5rem;
}

/* logo sketch over the slat artwork — fills the space above the caption
   (flex:1), letterboxed so the square art is never cropped or overlapped */
.service-card__logo {
  position: relative;          /* above the absolute slat layer, below the caption */
  flex: 1 1 auto;
  min-height: 0;
  width: 80%;
  margin: 6% auto 0;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.service-card__caption {
  position: relative;
  padding: 44px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-black) 72%, transparent),
    transparent
  );
}

.service-card__caption-tag {
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.3vw, 12px); /* Rule 24: 12 scale */
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-green-parrot);
}

.service-card__caption-text {
  font-family: var(--font-base);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-white);
  text-shadow: var(--shadow-text);
}


/* ── Slat artwork — the Services-Pixentra.png art, rebuilt in HTML + CSS ── */
.service-card__slat-artwork {
  position: absolute;
  inset: 0;
  display: flex;
  overflow: hidden;
  background: var(--color-black);
  --glow-hot: color-mix(in srgb, var(--color-green-parrot) 80%, var(--color-white));
  --glow-core: var(--color-green-parrot);
  --glow-soft: color-mix(in srgb, var(--color-green-parrot) 50%, var(--color-green-forest));
  --glow-deep: var(--color-green-forest);
}

.service-card__slat-artwork > span {
  flex: 1 1 0;
  min-width: 0;
  background: var(--bg, transparent);
}

/* JS-driven motion (services.js): slat boxes overhang the card and slide
   vertically, so they are promoted to their own layers while animating */
.service-card__slat-artwork.is-animating > span {
  will-change: transform;
}

/* fine film grain over the lit areas (matches the 25% overlay in the source art) */
.service-card__slat-artwork::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23grain)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0.25;
  pointer-events: none;
}


/* ── Text card — white card, forest-green quote block (left)
      + forest-green 1:1 QR block (right), 16px gap ─────────── */
.service-card--quote {
  background: var(--color-white);
  display: flex;
  align-items: stretch;
  gap: 16px;
  border-radius: 0;
}

.service-card__quote {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 22px;
  display: flex;
  align-items: center;
  background: var(--color-green-forest);
  border-radius: 1rem;
  font-family: var(--font-base);
  font-size: clamp(11px, 0.6875rem + 0.4vw, 12px); /* Rule 10.2 fluid */
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-white);
}

.service-card__qr {
  flex: 0 0 calc(100% / 3);   /* card is 3:1 → box width = card height → exact square */
  min-width: 0;
  align-self: center;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-green-forest);
}

.service-card__qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* ── Interaction ──────────────────────────────────────────── */
.service-card--light,
.service-card--dark,
.service-card--featured {
  cursor: pointer;
}


/* ─────────────────────────────────────────────────────────────
   10c. FEATURED CARD — responsive guard
   The 3:2 slot is only tall enough for the full content above
   ~1340px. Below that, let content set the height.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1339px) {
  .service-card--featured { aspect-ratio: auto; }

  .service-card--last-left,
  .service-card--last-right { align-self: stretch; }
}


/* ─────────────────────────────────────────────────────────────
   11. RESPONSIVE BREAKPOINTS → mapped to Rule-9 5-band system
   ─────────────────────────────────────────────────────────────
   Desktop ≥1440 : base styles (no query) + 1920 guard (11b)
   Laptop 1024–1439 : BP1 1280 + BP2 1120 blocks below
   Tablet 768–1023  : BP3 920 + BP4 768 blocks below
   Mobile 361–767   : BP5 640 + Extra 480 blocks below
   Small ≤360        : dedicated block in 11b above
   NOTE: max-width queries kept (desktop-first tuning preserved);
   Rule-9 coverage verified per band, no horizontal scroll.
   ───────────────────────────────────────────────────────────── */


/* ── BP1 — 1280px ─────────────────────────────────────────── */
@media (max-width: 1280px) {
  .services-intro__headline { font-size: clamp(38px, 3.2vw, 52px); }
  .services-grid { gap: 14px; }

  .service-card__title       { font-size: clamp(13px, 1.25vw, 16px); }
  .service-card__description { font-size: clamp(10px, 0.94vw, 12px); }
  .service-card__list li     { font-size: clamp(10px, 0.94vw, 12px); }
  .service-card__cta-pill    { font-size: clamp(10px, 0.94vw, 12px); }
  .service-card__title-icon  { width: clamp(26px, 2.5vw, 32px); height: clamp(26px, 2.5vw, 32px); font-size: clamp(16px, 1.56vw, 20px); }
  .service-card__head .service-card__index { font-size: clamp(36px, 3.75vw, 48px); }
}


/* ── BP2 — 1120px ─────────────────────────────────────────── */
@media (max-width: 1120px) {
  /* Intro three-column → two-column */
  .services-intro {
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
  }
  .services-intro__spacer { display: none; }
  .services-intro__cta {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }

  /* Grid container fills full width */
  .services-grid {
    max-width: 100%;
    gap: 12px;
  }

  .service-card__title       { font-size: clamp(12px, 1.25vw, 16px); }
  .service-card__description { font-size: clamp(10px, 0.94vw, 12px); }
  .service-card__list li     { font-size: clamp(9px, 0.94vw, 12px); }
  .service-card__cta-pill    { font-size: clamp(9px, 0.94vw, 12px); }
  .service-card__title-icon  { width: clamp(24px, 2.5vw, 32px); height: clamp(24px, 2.5vw, 32px); font-size: clamp(14px, 1.56vw, 20px); }
  .service-card__head .service-card__index { font-size: clamp(30px, 3.75vw, 48px); }

  /* CTA icon size */
  .service-card__cta-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
}


/* ── Tablet + Mobile — ≤1023px: desktop-size cards, stacked ───────
   Cards render at true desktop px sizes (same look, readable) in a single
   centered column (cap 480px). Aspect is content-driven here — a fixed 3:2
   at phone widths would force ~10px body text (proportional scale-down
   tested: reads too small). Every element matches desktop exactly. */
@media (max-width: 1023px) {
  /* Single column, capped near desktop card width (~429px), centered */
  .services-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 480px;
    margin-inline: auto;
  }

  .services-grid__column--1,
  .services-grid__column--2,
  .services-grid__column--3 { grid-column: 1 / -1; }

  .service-card--last-left,
  .service-card--last-right { grid-column: 1 / -1; }

  /* Desktop sizes restored — neutralize the vw-shrink laptop tiers */
  .service-card--featured { padding: 16px; gap: 12px; }
  .service-card__title-icon { width: 32px; height: 32px; font-size: 20px; }
  .service-card__title { font-size: 16px; }
  .service-card__head .service-card__index { font-size: 48px; }
  .service-card__description { font-size: 12px; }
  .service-card__list li { font-size: 12px; }
  .service-card__benefit { width: 26px; height: 26px; }
  .service-card__benefit-icon i { font-size: 16px; }
  .service-card__tooltip { width: 240px; }
  .service-card__tooltip-title { font-size: 14px; }
  .service-card__tooltip-text { font-size: 12px; }
  .service-card__cta-pill { height: 44px; font-size: 12px; }
  .service-card__cta-icon { width: 44px; height: 44px; min-width: 44px; }
  .service-card__cta-icon svg { width: 16px; height: 16px; }
}


/* ── BP3 — 920px ──────────────────────────────────────────── */
@media (max-width: 920px) {
  /* Intro stacks */
  .services-intro {
    grid-template-columns: 1fr;
    row-gap: 20px;
    margin-bottom: 24px;
  }
  .services-intro__cta {
    flex-direction: row;
    align-items: center;
    grid-column: auto;
    width: 100%;
  }

  /* Headline */
  .services-intro__headline {
    font-size: clamp(34px, 4.5vw, 48px);
  }
}


/* ── BP4 — 768px ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .services-section { padding-top: 32px; padding-inline: 0; }

  /* Intro fully single column */
  .services-intro {
    grid-template-columns: 1fr;
    row-gap: 18px;
    margin-bottom: 20px;
  }
  .services-intro__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .services-cta-button { width: auto; min-width: 200px; }

  .services-intro__headline    { font-size: clamp(28px, 7.5vw, 40px); }
  .services-intro__description { font-size: clamp(12px, 0.75rem + 1.5vw, 16px); }

}


/* ── BP5 — 640px ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .services-section { padding-inline: 0; }

  .services-intro__headline    { font-size: clamp(24px, 7vw, 34px); }
  .services-intro__description { font-size: 14px; }

}


/* ── Extra — 480px ────────────────────────────────────────── */
@media (max-width: 480px) {
  .services-section { padding-inline: 0; }

  .services-intro__headline { font-size: clamp(22px, 6.5vw, 30px); }

}


/* ─────────────────────────────────────────────────────────────
   NOTE (Rule 8.4): 04. Real Impact starts below; 03. Services above. */
/* ========== 04. Real Impact (migrated from styles/components/real-impact.css — Rule 8.2) ========== */
/* ============================================================
   PIXENTRA — Home 04. Real Impact
   ------------------------------------------------------------
   Scope        : impact-* classes only (section shell, eyebrow,
                  headline, copy, three-part band, gauge, outcome
                  list, goal badge, dark gradient CTA).
                  No global selector leakage.
   Colours      : variables.css base tokens or color-mix() only —
                  no literal colour values in this file.
   Sizing/type  : hardcoded here (section-local, no shared tokens).
   Font         : var(--font-base) = Inter throughout.
   Layout       : CSS Grid 4fr / 5fr / 3fr band (Rule 10.1 — migrated
                  from flex row, same visuals); single column below 920px.
   Breakpoints  : Rule-9 5 bands (mapping in §11): Desktop ≥1440 base +
                   1680px container guard (large-desktop) | Laptop 1024–1439:
                   1280+1120 tiers | Tablet 768–1023: 920+768 tiers |
                   Mobile 361–767: 640+480 tiers | Small ≤360: 360 tier.
   The 1120 tier compacts the narrow-row CTA (pill text would
   otherwise spill below ~1100px); the 360 tier keeps icon
   badges and the pill comfortable on small phones.
   Interaction  : outcome rows + icon badges carry the
                  left-to-right gradient hover (mirrors the
                  services benefit treatment); the CTA keeps
                  focus-visible. Everything else is static.
                  All motion is disabled under
                  prefers-reduced-motion.
   Accessibility: decorative artwork is aria-hidden in the
                  markup; the gauge SVG exposes a text
                  alternative; heading order is h2 > h3 > h4.
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. BOX-SIZING RESET (scoped)
   ───────────────────────────────────────────────────────────── */



/* ─────────────────────────────────────────────────────────────
   2. SECTION SHELL
   ───────────────────────────────────────────────────────────── */
.impact-section,
.case-section,
.ind-section,
.why-section,
.proc-section,
.tech-section {
  width: 100%;
  padding: 48px 16px 0;
  background: none;
}


/* ─────────────────────────────────────────────────────────────
   3. CONTAINER (capped past ~1725px so ultrawide screens keep
   editorial proportions instead of stretching full-bleed)
   ───────────────────────────────────────────────────────────── */
.impact-container,
.case-container,
.why-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  text-align: center;
}


/* ─────────────────────────────────────────────────────────────
   4. EYEBROW (mirrors the services eyebrow)
   ───────────────────────────────────────────────────────────── */
.impact-eyebrow,
.case-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 0;
}

.proc-eyebrow__text,
.tech-eyebrow__text,
.pix-about__eyebrow-text,
.ins-eyebrow-text {
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--gradient-brand-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Impact eyebrow — tighter tracking per design review */
.impact-eyebrow-text {
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--gradient-brand-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Case eyebrow — tighter tracking per design review */
.case-eyebrow-text {
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--gradient-brand-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* FAQ eyebrow — tighter tracking per design review */
.faq-eyebrow-text {
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--gradient-brand-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.impact-eyebrow-lines,
.case-eyebrow-lines {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}


/* ─────────────────────────────────────────────────────────────
   5. HEADLINE (same system as .services-intro__headline)
   ───────────────────────────────────────────────────────────── */



/* ─────────────────────────────────────────────────────────────
   6. DESCRIPTION
   ───────────────────────────────────────────────────────────── */
.impact-description {
  margin: 0;
  font-family: var(--font-base);
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 400;
  line-height: 1.65;
  color: var(--clr-text-secondary);
}


/* ─────────────────────────────────────────────────────────────
   7. THREE-PART BAND — 4 / 5 / 3 proportional flex row
   Grid tracks hold the 4:5:3 ratio at every desktop width;
   min-width: 0 on parts keeps grid children from overflowing.
   ───────────────────────────────────────────────────────────── */
.impact-green-block {
  display: grid;
  grid-template-columns: 4fr 5fr 3fr; /* Rule 10.1: 4/5/3 band */
  gap: 16px;
  width: 100%;
  min-height: 250px;
  margin-top: 8px;
  border-radius: 1.5rem;
}

/* Shared part reset — individual ratio lives on the modifier */
.impact-green-block__part {
  min-width: 0; /* grid blowout guard */
  border-radius: 1rem;
}


/* ─────────────────────────────────────────────────────────────
   8. PART 1 — SPEEDOMETER GAUGE (4 units)
   Resolution-independent SVG: the viewBox scales, so the dial
   always fills the part width without overflowing it.
   ───────────────────────────────────────────────────────────── */
.impact-green-block__part--gauge {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 6px;
  background: var(--color-white);
}

.impact-gauge {
  width: 100%;
  margin: 0;
}

/* Screen-reader-only caption — takes no visual space */
.impact-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.impact-gauge__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Dial segments — forest gradient, last two parked (grey) */
.impact-gauge__svg g:nth-child(1)  rect,
.impact-gauge__svg-badge { fill: var(--color-green-forest); }
.impact-gauge__svg g:nth-child(2)  rect { fill: color-mix(in srgb, var(--color-green-forest) 92%, var(--color-white)); }
.impact-gauge__svg g:nth-child(3)  rect { fill: color-mix(in srgb, var(--color-green-forest) 84%, var(--color-white)); }
.impact-gauge__svg g:nth-child(4)  rect { fill: color-mix(in srgb, var(--color-green-forest) 76%, var(--color-white)); }
.impact-gauge__svg g:nth-child(5)  rect { fill: color-mix(in srgb, var(--color-green-forest) 68%, var(--color-white)); }
.impact-gauge__svg g:nth-child(6)  rect { fill: color-mix(in srgb, var(--color-green-forest) 60%, var(--color-white)); }
.impact-gauge__svg g:nth-child(7)  rect { fill: color-mix(in srgb, var(--color-green-forest) 52%, var(--color-white)); }
.impact-gauge__svg g:nth-child(8)  rect { fill: color-mix(in srgb, var(--color-green-forest) 44%, var(--color-white)); }
.impact-gauge__svg g:nth-child(9)  rect { fill: color-mix(in srgb, var(--color-green-forest) 36%, var(--color-white)); }
.impact-gauge__svg g:nth-child(10) rect { fill: color-mix(in srgb, var(--color-green-forest) 28%, var(--color-white)); }
.impact-gauge__svg g:nth-child(11) rect { fill: color-mix(in srgb, var(--color-green-forest) 20%, var(--color-white)); }
.impact-gauge__svg g:nth-child(12) rect,
.impact-gauge__svg g:nth-child(13) rect { fill: var(--color-border); }

/* Display numeral — kept large by design (documented exemption, Rule 0.4 pending approval) */
.impact-gauge__svg-value {
  font-family: var(--font-base);
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.02em;
  fill: var(--color-black);
}

.impact-gauge__svg-caption {
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 500;
  fill: var(--clr-text-secondary);
}

/* Tick — stroke from tokens (Rule 13; was hardcoded white attr) */
.impact-gauge__svg-tick {
  fill: none;
  stroke: var(--color-white);
}


/* ─────────────────────────────────────────────────────────────
   9. PART 2 — OUTCOME LIST (5 units)
   One grid: icon rail (left) + bordered copy rows (right)
   with a 12px column gap. Each icon cell stretches to its
   row height, so icons always line up with their copy.
   ───────────────────────────────────────────────────────────── */
.impact-green-block__part--stats {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 12px;
  background: var(--color-white);
}

.impact-stats {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 10px;
  align-items: stretch;
  align-content: space-between;
  height: 100%;
}

.impact-stats__icon {
  position: relative;
  display: grid;
  place-items: center;
  align-self: stretch;
  justify-self: start;
  width: auto;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 0 12px;
  overflow: hidden;
  border: 2px solid var(--clr-green-border);
  border-radius: 14px;
  font-size: clamp(20px, 1.25rem + 1vw, 24px); /* R24.5 icon glyph */
  color: var(--color-green-forest);
}

/* Hover fill — mirrors the services benefit treatment:
   brand gradient sweeps left to right, glyph turns white,
   ring goes transparent. Fires on the badge itself or on
   its adjacent copy row via :has(). */
.impact-stats__icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--gradient-brand);
  transition: width 0.3s ease;
}

.impact-stats__icon i {
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.impact-stats__icon:hover::before,
.impact-stats__icon:has(+ .impact-stats__body:hover)::before {
  width: 100%;
}

.impact-stats__icon:hover,
.impact-stats__icon:has(+ .impact-stats__body:hover) {
  border-color: transparent;
}

.impact-stats__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-white);
  text-align: left;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.impact-stats__body:hover {
  border-color: transparent;
  background: color-mix(in srgb, var(--color-green-primary) 6%, var(--color-white));
}

.impact-stats__title {
  margin: 0;
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--gradient-brand-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.impact-stats__desc {
  margin: 2px 0 0;
  font-family: var(--font-base);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-grey-dark);
}


/* ─────────────────────────────────────────────────────────────
   10. PART 3 — MINI HEADING, GOAL BADGE, DARK CTA (3 units)
   ───────────────────────────────────────────────────────────── */
.impact-green-block__part--green {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 0 12px;
  text-align: left;
}

.impact-green-block__heading {
  margin: 0;
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-green-forest);
}

/* Goal badge — white face, forest-to-parrot gradient ring */
.impact-goal-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 2px solid transparent;
  border-radius: 1rem;
  background:
    linear-gradient(var(--color-white), var(--color-white)) padding-box,
    linear-gradient(45deg, var(--color-green-forest), var(--color-green-parrot)) border-box;
}

.impact-goal-badge i {
  flex-shrink: 0;
  font-size: clamp(16px, 1rem + 0.8vw, 20px); /* R24.5 icon glyph */
  color: var(--color-green-forest);
}

.impact-goal-badge__text {
  margin: 0;
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-black);
}

/* Dark CTA card — token-built gradient art + film grain */
.impact-cta {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 150px;
  padding: 14px 14px 12px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--color-black);
}

.impact-cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Gradient stops — deep base, parrot → primary → forest glow */
.impact-cta__base-top {
  stop-color: color-mix(in srgb, var(--color-green-deep) 70%, var(--color-black));
}

.impact-cta__base-bottom {
  stop-color: color-mix(in srgb, var(--color-green-deep) 40%, var(--color-black));
}

.impact-cta__glow-core {
  stop-color: var(--color-green-parrot);
  stop-opacity: 0.75;
}

.impact-cta__glow-mid {
  stop-color: var(--color-green-primary);
  stop-opacity: 0.35;
}

.impact-cta__glow-edge {
  stop-color: var(--color-green-forest);
  stop-opacity: 0;
}

.impact-cta__content {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  padding-right: 8px;
}

.impact-cta__title {
  margin: 0;
  font-family: var(--font-base);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-white);
}

.impact-cta__text {
  margin: 6px 0 0;
  font-family: var(--font-base);
  font-size: clamp(11px, 0.6875rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 400;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-white) 65%, transparent);
}

/* CTA button — white pill + solid forest arrow disc */
.impact-cta__btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  text-decoration: none;
}

.impact-cta__btn-pill {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 2px solid var(--clr-green-border);
  border-radius: 999px;
  background: var(--color-white);
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.3vw, 12px); /* Rule 24: 12 scale */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-green-forest);
}

.impact-cta__btn-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--color-green-forest);
  color: var(--color-white);
}

.impact-cta__btn-icon i {
  font-size: clamp(18px, 1.125rem + 0.8vw, 24px); /* R24.5 icon glyph */
  transform: rotate(-45deg);
}


/* ─────────────────────────────────────────────────────────────
   11. RESPONSIVE -> Rule-9 5-band mapping (max-width tuning preserved)
   BP1 — 1280px  Large laptop / small desktop
   BP1b —1120px  Narrow desktop (row-mode CTA compaction)
   BP2 —  920px  Tablet landscape (band stacks here)
   BP3 —  768px  Tablet portrait
   BP4 —  640px  Large phone
   BP5 —  480px  Standard phone
   BP6 —  360px  Small phones (SE / compact Android)
   ───────────────────────────────────────────────────────────── */

/* ── BP1 — 1280px ─────────────────────────────────────────── */
@media (max-width: 1280px) {
  .impact-section { padding: 64px 16px 72px; }
  .impact-headline { font-size: clamp(38px, 3.2vw, 52px); }
}

/* ── BP1b — 1120px ──────────────────────────────────────────
   The 3-unit CTA column gets too narrow for the 44px button
   below ~1100px, so the button compacts here. */
@media (max-width: 1120px) {
  .impact-cta { padding: 12px 12px 10px; }
  .impact-cta__title { font-size: 18px; }
  .impact-cta__btn { gap: 6px; margin-top: 10px; }
  .impact-cta__btn-pill { height: 40px; padding: 0 8px; font-size: clamp(10px, 0.625rem + 0.3vw, 12px); /* Rule 24 */ }
  .impact-cta__btn-icon { width: 34px; height: 34px; min-width: 34px; }
  .impact-cta__btn-icon i { font-size: clamp(14px, 0.875rem + 0.6vw, 18px); /* R24.5 icon glyph */ }
}

/* ── BP2 — 920px ──────────────────────────────────────────── */
@media (max-width: 920px) {
  .impact-section { padding: 56px 0 64px; }
  .impact-headline { font-size: clamp(34px, 4.5vw, 48px); }
  .impact-headline,
  .impact-description { text-align: left; }
  .impact-description br { display: none; }
  .impact-green-block { grid-template-columns: 1fr; }
  /* Stacked parts take natural content height (grid rows auto-size). */
  .impact-stats { height: max-content; }
}

/* ── BP3 — 768px ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .impact-section { padding: 48px 0 0; }
  .impact-headline { font-size: clamp(28px, 7.5vw, 40px); }
  .impact-headline,
  .impact-description { text-align: left; }
  /* Stacked band breathing room on phones */
  .impact-green-block { row-gap: 32px; }
  /* Icon badges match their row height (stretch + 1:1), bigger glyph */
  .impact-stats__icon { font-size: 34px; }
  .impact-stats__desc { font-size: 14px; }
  .impact-green-block__part--green { padding: 0; gap: 12px; }
}

/* ── BP4 — 640px ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .impact-headline { font-size: clamp(24px, 7vw, 34px); }
  .impact-description { font-size: 14px; }
}

/* ── BP5 — 480px ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .impact-section { padding: 40px 0 0; }
  .impact-headline { font-size: clamp(22px, 6.5vw, 30px); }
  .impact-headline,
  .impact-description { text-align: left; }
  .impact-green-block { row-gap: 32px; }
  .impact-green-block__part--stats { padding: 0; }
}

/* ── BP6 — 360px ────────────────────────────────────────────
   Small phones: icon badges stop stretching to tall text rows
   and lock to a fixed comfortable square; band gaps tighten. */
@media (max-width: 360px) {
  .impact-green-block { row-gap: 32px; }
  .impact-stats { column-gap: 10px; row-gap: 8px; }
  .impact-cta__btn-pill { font-size: clamp(10px, 0.625rem + 0.3vw, 12px); /* Rule 24: 12 scale */ }
  .impact-cta__btn-icon { width: 38px; height: 38px; min-width: 38px; }
  .impact-cta__btn-icon i { font-size: clamp(16px, 1rem + 0.6vw, 20px); /* R24.5 icon glyph */ }
}


/* ─────────────────────────────────────────────────────────────
   12. REDUCED MOTION
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .impact-section *,
  .impact-section *::before,
  .impact-section *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   NOTE (Rule 8.4): 05. Case Studies starts below; 03 Services + 04 Real Impact above. */
/* ========== 05. Case Studies ========== */
/* ============================================================
   PIXENTRA — Home 05. Case Studies
   (migrated from styles/components/case-studies.css — Rule 8.2)
   ------------------------------------------------------------
   Scope        : case-* classes only (section shell, eyebrow,
                  headline, copy). No global selector leakage.
   Colours      : variables.css base tokens or color-mix() only —
                  no literal colour values in this file.
   Sizing/type  : hardcoded here (section-local, no shared tokens).
   Font         : var(--font-base) = Inter throughout.
   Layout       : CSS Grid throughout (Rule 10.1): 12-col intro,
                  1fr/1fr showcase, 3-col thumbs; stacks at 1024/920.
   Breakpoints  : Rule-9 5 bands (mapping in §10): Desktop ≥1440 base +
                   1680px container guard (large-desktop) | Laptop 1024–1439:
                   1280+1024 tiers | Tablet 768–1023: 920+768 tiers |
                   Mobile 361–767: 640+480 tiers | Small ≤360: 360 tier.
   Interaction  : static content only (plus link
                  focus-visible). All motion is disabled under
                  prefers-reduced-motion.
   Accessibility: heading order is h2 first; cards added later
                  must follow h2 > h3 with no skipped levels.
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. BOX-SIZING RESET (scoped)
   ───────────────────────────────────────────────────────────── */



/* ─────────────────────────────────────────────────────────────
   2. SECTION SHELL
   ───────────────────────────────────────────────────────────── */



/* ─────────────────────────────────────────────────────────────
   3. CONTAINER (capped past ~1725px so ultrawide screens keep
   editorial proportions instead of stretching full-bleed)
   ───────────────────────────────────────────────────────────── */



/* ─────────────────────────────────────────────────────────────
   4. EYEBROW (mirrors the services eyebrow)
   ───────────────────────────────────────────────────────────── */



/* ─────────────────────────────────────────────────────────────
   5. INTRO  [content | side(pill + slider nav)] + brand row
   (slider-header rhythm from the design reference)
   ───────────────────────────────────────────────────────────── */
.case-intro {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: stretch;
  width: 100%;
  margin-bottom: 8px;
  text-align: left;
}

.case-intro__content {
  grid-column: 1 / 8;
  min-width: 0;
}

.case-intro__content .case-eyebrow {
  margin-bottom: 24px;
}

.case-intro__side {
  grid-column: 10 / 13;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  min-width: 0;
  /* eyebrow (14px) + its margin (24px): pill top lands level
     with the headline top edge, nav stays bottom-flush */
  padding-top: 38px;
  padding-bottom: 0;
  padding-left: 0;
}


/* ─────────────────────────────────────────────────────────────
   6. HEADLINE
   ───────────────────────────────────────────────────────────── */


.case-headline__accent,
.ind-headline__accent,
.why-headline__accent,
.proc-headline__accent,
.tech-headline__accent,
.pix-about__headline-accent,
.ins-headline-accent,
.faq-headline-accent,
.cta-headline-accent {
  background: var(--gradient-brand-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* ─────────────────────────────────────────────────────────────
   7. DESCRIPTION
   ───────────────────────────────────────────────────────────── */
.case-description {
  margin: 12px 0 0;
  font-family: var(--font-base);
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 400;
  line-height: 1.65;
  color: var(--clr-text-secondary);
}


/* ─────────────────────────────────────────────────────────────
   8. BLACK PILL BUTTON + SLIDER NAV + BRAND ROW
   ───────────────────────────────────────────────────────────── */
.case-pill-btn,
.proc-pill-btn,
.tech-pill-btn,
.tm-start {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-decoration: none;
  transition: transform 0.22s ease;
}

.case-pill-btn:hover,
.proc-pill-btn:hover,
.tech-pill-btn:hover,
.tm-start:hover,
.pix-about__cta:hover,
.cta-start:hover {
  transform: translateY(-2px);
}

.case-pill-btn__pill {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: linear-gradient(
    45deg,
    var(--color-green-forest) 0%,
    var(--color-black) 40%
  );
  font-family: var(--font-base);
  font-size: clamp(11px, 0.6875rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-white);
}

.case-pill-btn__icon,
.proc-pill-btn__icon,
.tech-pill-btn__icon,
.tm-start__icon,
.pix-about__cta-icon,
.cta-start__icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex-shrink: 0;
  border: 2px solid var(--color-green-primary);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--color-green-forest);
}

.case-pill-btn__icon i,
.proc-pill-btn__icon i,
.tech-pill-btn__icon i,
.tm-start__icon i,
.pix-about__cta-icon i,
.cta-start__icon i {
  font-size: clamp(16px, 1rem + 0.8vw, 20px); /* R24.5 icon glyph */
  transform: rotate(-45deg);
}

.case-slider-nav {
  display: flex;
  align-items: flex-end;
  gap: 32px;
}

.case-slider-count {
  font-family: var(--font-base);
  font-size: clamp(11px, 0.6875rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 500;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--clr-text-secondary);
}

/* Display numeral — kept large by design (documented exemption) */
.case-slider-count strong {
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  opacity: 0.5;
  background: var(--gradient-brand-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.case-slider-count__total {
  font-size: clamp(14px, 0.875rem + 0.5vw, 16px); /* Rule 24: 16 scale */
  font-weight: 500;
}

.case-slider-arrows,
.ind-stat__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.case-slider-arrow {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--color-black);
  cursor: pointer;
  transition: border-color 0.22s ease, background-color 0.22s ease, color 0.22s ease;
}

.case-slider-arrow i {
  font-size: clamp(16px, 1rem + 0.8vw, 20px); /* R24.5 icon glyph */
}

.case-slider-arrow:hover {
  border-color: var(--color-green-forest);
  background: var(--color-green-forest);
  color: var(--color-white);
}

.case-brand-row {
  grid-column: 8 / 10;
  align-self: end;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
  margin-top: 20px;
}

.case-brand-row__word,
.proc-side-tag__word {
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-black);
}

.case-brand-row__line,
.proc-side-tag__line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}


/* ─────────────────────────────────────────────────────────────
   9. SHOWCASE SLIDER — media (6) + info (6)
   ───────────────────────────────────────────────────────────── */
.case-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
  width: 100%;
  margin-top: 16px;
  text-align: left;
}

/* ── Side rails — vertical markers inside each panel ────── */
.case-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-shrink: 0;
  padding: 8px 0;
}

.case-rail__marker {
  width: 10px;
  height: 64px;
  border-radius: 0;
  background: linear-gradient(
    to bottom,
    var(--color-green-forest),
    var(--color-green-parrot)
  );
}

.case-rail__word {
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-black);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.case-rail__word--small {
  font-size: clamp(10px, 0.625rem + 0.3vw, 12px); /* Rule 24: 12 scale */
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--clr-text-secondary);
}

.case-rail__word--vertical {
  writing-mode: vertical-rl;
  transform: none;
}

.case-rail__rule {
  width: 1px;
  height: 48px;
  background: var(--color-border);
}

.case-rail__dot {
  width: 8px;
  height: 8px;
  background: var(--color-black);
}

/* ── Media panel ──────────────────────────────────────────── */


.case-panel--media {
  position: relative;
  display: flex;
  gap: 32px;
}

.case-media {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  align-self: flex-end;
  width: 100%;
  overflow: visible;
  border-radius: 1rem;
}

.case-media__img {
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: calc(100% - 16px);
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0px;
}

.case-media__badge {
  position: absolute;
  top: 0;
  right: 16px;
  display: grid;
  align-items: start;
  justify-items: center;
  height: 170px;
  padding: 16px;
  border-radius: 8px;
}

/* Glass layer — disabled for now (plain gradient only) */
.case-media__badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 0;
  background:
    linear-gradient(
      to bottom,
      var(--color-green-forest),
      transparent
    );
}

.case-media__badge span {
  position: relative;
  z-index: 1;
  font-family: var(--font-base);
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-white);
}

.case-media__overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 190px;
  padding: 18px;
  border-radius: 0;
  background: linear-gradient(
    to right,
    var(--color-green-deep),
    transparent
  );
}

.case-media__kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-white);
  opacity: 0.75;
}

.case-media__kicker i {
  font-size: clamp(12px, 0.75rem + 0.4vw, 14px); /* R24.5 icon glyph */
}

.case-media__industry {
  margin: 6px 0 0;
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-white);
}

.case-media__rule {
  display: block;
  width: 44px;
  height: 3px;
  margin: 10px 0 0;
  border-radius: 2px;
  background: var(--color-green-primary);
}

/* ── Info panel ───────────────────────────────────────────── */
.case-panel--info {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 32px;
  padding: 6px 0;
}

.case-info__main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-around;
  gap: 8px;
  min-width: 0;
}

.case-info__title {
  margin: 0;
  font-family: var(--font-base);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.case-info__subtitle {
  margin: 0;
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 400;
  color: var(--clr-text-secondary);
}

.case-info__tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-info__tag {
  display: flex;
  flex: 1 1 40%;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 600;
  color: var(--color-green-forest);
}

.case-info__tag::before {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-green-forest), var(--color-green-parrot));
}

.case-info__desc {
  margin: 0;
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-grey-dark);
}

.case-info__metrics {
  display: flex;
}

.case-info__metric {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 16px;
  border-left: 1px solid var(--color-border);
}

.case-info__metric:first-child {
  padding-left: 0;
  border-left: 0;
}

.case-info__metric-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-base);
  font-size: clamp(20px, 1.25rem + 1vw, 24px); /* display numeral, desktop unchanged */
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--color-black);
}

.case-info__metric-value i {
  font-size: clamp(12px, 0.75rem + 0.5vw, 15px); /* R24.5 icon glyph */
  color: var(--color-green-forest);
  transform: rotate(45deg);
}

.case-info__metric-label {
  display: block;
  margin-top: 4px;
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 500;
  line-height: 1.45;
  color: var(--clr-text-secondary);
}

.case-info__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--color-black);
}

.case-info__link-icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: clamp(16px, 1rem + 0.8vw, 20px); /* R24.5 icon sizing */
  color: var(--color-black);
  transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.case-info__link:hover .case-info__link-icon {
  border-color: var(--color-green-forest);
  background: var(--color-green-forest);
  color: var(--color-white);
}

.case-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 6px;
}

.case-thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  aspect-ratio: 4 / 3;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 80% 0%, color-mix(in srgb, var(--color-green-parrot) 26%, transparent), transparent 60%),
    linear-gradient(165deg, color-mix(in srgb, var(--color-green-deep) 70%, var(--color-black)), var(--color-black));
  font-family: var(--font-base);
  text-align: left;
  cursor: pointer;
}

.case-thumb:nth-child(2) {
  background:
    radial-gradient(120% 100% at 20% 0%, color-mix(in srgb, var(--color-green-primary) 30%, transparent), transparent 60%),
    linear-gradient(200deg, color-mix(in srgb, var(--color-green-forest) 60%, var(--color-black)), var(--color-black));
}

.case-thumb:nth-child(3) {
  background:
    radial-gradient(110% 100% at 50% 0%, color-mix(in srgb, var(--color-green-parrot) 22%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-green-forest) 55%, var(--color-black)), var(--color-black));
}

.case-thumb__img,
.ind-media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-thumb__no {
  position: relative;
  z-index: 1;
  font-size: clamp(12px, 0.75rem + 0.4vw, 14px); /* Rule 24: 14 scale */
  font-weight: 800;
  color: var(--color-white);
  text-shadow: 0 1px 8px color-mix(in srgb, var(--color-black) 55%, transparent);
}

.case-thumb__label {
  position: relative;
  z-index: 1;
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 600;
  color: color-mix(in srgb, var(--color-white) 85%, transparent);
  text-shadow: 0 1px 8px color-mix(in srgb, var(--color-black) 55%, transparent);
}

.case-thumb__arrow {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  font-size: clamp(14px, 0.875rem + 0.6vw, 18px); /* R24.5 icon glyph */
  color: color-mix(in srgb, var(--color-white) 80%, transparent);
}

/* ── Showcase foot — pages + tagline ──────────────────────── */
.case-showcase-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin-top: 22px;
}

.case-showcase-pages {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 600;
  color: var(--clr-text-secondary);
  cursor: default;
}

.case-showcase-pages [data-show-page] {
  cursor: pointer;
}

.case-showcase-pages__no,
.case-showcase-pages [data-show-page].is-current {
  font-weight: 800;
  color: var(--color-black);
}

.case-showcase-pages__line {
  width: 72px;
  height: 1px;
  background: var(--color-border);
}

.case-showcase-tag {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.3vw, 12px); /* Rule 24: 12 scale */
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--clr-text-secondary);
}

.case-showcase-tag__line {
  width: 120px;
  height: 1px;
  background: var(--color-border);
}


/* ─────────────────────────────────────────────────────────────
   10. RESPONSIVE -> Rule-9 5-band mapping (max-width tuning preserved)
   BP1 — 1280px  Large laptop / small desktop
   BP1b —1024px  Small laptop (showcase stacks here)
   BP2 —  920px  Tablet landscape (intro stacks here)
   BP3 —  640px  Large phone
   BP4 —  480px  Standard phone
   ───────────────────────────────────────────────────────────── */

/* ── BP1 — 1280px ─────────────────────────────────────────── */
@media (max-width: 1280px) {
  .case-section { padding: 64px 16px 72px; }
  .case-headline { font-size: clamp(38px, 3.2vw, 52px); }
}

/* ── BP1b — 1024px ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .case-showcase { grid-template-columns: 1fr; }
  .case-rail { display: none; }
  .case-info__title { font-size: clamp(30px, 5vw, 40px); }
}

/* ── BP2 — 920px ──────────────────────────────────────────── */
@media (max-width: 920px) {
  .case-section { padding: 56px 0 0; }
  .case-headline { font-size: clamp(34px, 4.5vw, 48px); }
  .case-description br { display: none; }
  .case-intro {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
  .case-intro__content,
  .case-intro__side,
  .case-brand-row {
    grid-column: auto;
  }
  .case-intro__side {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
  }
  .case-pill-btn {
    width: auto;
  }
  .case-brand-row { margin-top: 16px; }
}

/* ── BP3 — 640px ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .case-headline { font-size: clamp(24px, 7vw, 34px); }
  .case-description { font-size: 14px; }
}

/* ── BP4 — 480px ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .case-section { padding: 40px 0 0; }
  .case-headline { font-size: clamp(22px, 6.5vw, 30px); }
  .case-media__overlay { left: 0; right: 0; bottom: 0; width: 100%; }
  .case-thumbs { grid-template-columns: 1fr; }
  .case-showcase-foot { flex-direction: column; align-items: flex-start; }
}


/* ─────────────────────────────────────────────────────────────
/* ── Tablet — 768px (Rule 9.3) ──────────────────────────────
   920/640 ke beech ka band: padding/gaps tighten, headline fluid
   clamp se handle hota hai. */
@media (max-width: 768px) {
  .case-showcase { gap: 20px; margin-top: 0; }
  .case-intro__side { gap: 20px; }
  /* Slider nav shifts below the View All Work button on mobile */
  .case-intro__side {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .case-info__main { gap: 12px; }
  .case-info__subtitle { font-size: 16px; }
  .case-info__tag { font-size: 16px; }
  .case-info__desc { font-size: 16px; }
  .case-info__metric-label { font-size: 12px; }
  .case-thumb__no { font-size: 32px; } /* display numeral, R24.5 */
  .case-thumb__label { font-size: 14px; }
  .case-thumb__arrow { font-size: 32px; } /* icon glyph, R24.5 */
  .case-showcase-foot { margin-top: 0; }
  .case-showcase-pages { font-size: 14px; }
}

/* 641–768px only: must not override ≤640 phone rules */
@media (min-width: 641px) and (max-width: 768px) {
  .case-section { padding: 52px 0 0; }
}

/* ── Small Mobile ≤360px (Rule 9.1) — iPhone SE, small Android ── */
@media (max-width: 360px) {
  .case-section { padding: 32px 0 0; }
  .case-showcase { gap: 24px; margin-top: 12px; }
  .case-info__metrics { flex-wrap: wrap; gap: 12px; }
  .case-info__metric { flex: 1 1 45%; border-left: 0; padding-left: 0; }
  .case-thumbs { grid-template-columns: 1fr; }
  .case-showcase-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .case-pill-btn__pill { height: 40px; }
  .case-slider-nav { gap: 20px; }
  .case-media__overlay { width: 100%; }
}


/* ─────────────────────────────────────────────────────────────
   11. REDUCED MOTION
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .case-section *,
  .case-section *::before,
  .case-section *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   NOTE (Rule 8.4): 06. Industries starts below; 03–05 above. */
/* ========== 06. Industries ========== */
/* ============================================================
   PIXENTRA — Home 06. Industries
   (migrated from styles/components/industries.css — Rule 8.2)
   ------------------------------------------------------------
   Scope        : ind-* classes only. No global selector leakage.
   Colours      : variables.css base tokens or color-mix() only —
                  no literal colour values in this file.
   Sizing/type  : hardcoded here (section-local, no shared tokens).
   Font         : var(--font-base) = Inter throughout.
   Layout       : CSS Grid 3-col (content | media | explore) (Rule 10.1)
                  2-col at 1024, single column at 640.
   Breakpoints  : Rule-9 5 bands (mapping in §8): Desktop ≥1440 base +
                   1680px container guard (large-desktop) | Laptop 1024–1439:
                   1024 tier | Tablet 768–1023: 768 tier |
                   Mobile 361–767: 640 tier | Small ≤360: 360 tier.
   Interaction  : stack cards + orbit icons carry active/focus-visible. All motion
                  is disabled under prefers-reduced-motion.
   Accessibility: imagery aria-hidden with content duplicated as
                  real text; heading order is h2 only.
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. BOX-SIZING RESET (scoped)
   ───────────────────────────────────────────────────────────── */



/* ─────────────────────────────────────────────────────────────
   2. SECTION SHELL
   ───────────────────────────────────────────────────────────── */



/* ─────────────────────────────────────────────────────────────
   3. CONTAINER
   ───────────────────────────────────────────────────────────── */
.ind-container {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
}


/* ─────────────────────────────────────────────────────────────
   4. GRID — content | media
   ───────────────────────────────────────────────────────────── */
.ind-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  align-items: start;
  width: 100%;
}


/* ─────────────────────────────────────────────────────────────
   5. LEFT — INTRO CONTENT
   ───────────────────────────────────────────────────────────── */
.ind-content {
  min-width: 0;
  padding-top: 8px;
}

.ind-eyebrow__text,
.why-eyebrow__text {
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--gradient-brand-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ind-headline {
  margin: 0;
  font-family: var(--font-base);
  font-size: clamp(32px, 3vw, 48px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.ind-description {
  margin: 16px 0 0;
  max-width: 44ch;
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 400;
  line-height: 1.65;
  color: var(--clr-text-secondary);
}

/* Stats row — icon + bold title + grey sub, divided */
.ind-stats {
  display: flex;
  align-items: stretch;
  margin-top: 28px;
}

.ind-stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 16px;
  border-left: 1px solid var(--color-border);
}

.ind-stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.ind-stat__top i {
  font-size: clamp(22px, 1.375rem + 1vw, 28px); /* R24.5 icon glyph */
  line-height: 1;
  color: var(--color-green-forest);
}

.ind-stat__top strong {
  font-family: var(--font-base);
  font-size: clamp(14px, 0.875rem + 0.4vw, 16px); /* Rule 24: 16 scale */
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-black);
}

.ind-stat__sub {
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 400;
  line-height: 1.45;
  color: var(--clr-text-secondary);
}

/* Decorative meta row — arcs + rule + microcopy */
.ind-meta {
  display: flex;
  align-items: stretch;
  gap: 18px;
  min-height: 190px;
  margin-top: 40px;
}

.ind-meta__arcs {
  flex: 1;
  min-width: 0;
  background: repeating-radial-gradient(
    circle at 0% 100%,
    transparent 0,
    transparent 11px,
    color-mix(in srgb, var(--color-green-primary) 22%, transparent) 11px,
    color-mix(in srgb, var(--color-green-primary) 22%, transparent) 14px
  );
}

.ind-meta__rule {
  width: 1px;
  background: var(--color-border);
}

.ind-meta__text {
  align-self: end;
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.3vw, 12px); /* Rule 24: 12 scale */
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-black);
}


/* ─────────────────────────────────────────────────────────────
   6. MIDDLE — IMAGE CARD
   ───────────────────────────────────────────────────────────── */
.ind-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 1rem;
  background:
    radial-gradient(120% 90% at 80% 0%, color-mix(in srgb, var(--color-green-parrot) 20%, transparent), transparent 60%),
    linear-gradient(170deg, color-mix(in srgb, var(--color-green-deep) 55%, var(--color-black)), var(--color-black));
}

.ind-media__tab {
  position: absolute;
  top: 46%;
  left: -14px;
  width: 28px;
  height: 120px;
  border-radius: 0;
  background: linear-gradient(
    to bottom,
    var(--color-green-parrot),
    var(--color-green-forest)
  );
}

/* NOTE: .ind-media__top (+rule) removed with its dead HTML (Rule 4.3). */

.ind-media__overlay {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(
    to right,
    transparent,
    var(--color-green-forest)
  );
  opacity: 0.75;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.ind-media__kicker {
  display: block;
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.3vw, 12px); /* Rule 24: 12 scale */
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-white) 75%, transparent);
}

.ind-media__title {
  margin: 8px 0 0;
  font-family: var(--font-base);
  font-size: clamp(14px, 1rem + 0.8vw, 16px); /* Rule 24: 16 scale (was 22 — visual change) */
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-white);
}

.ind-media__overlay-text {
  flex: 1;
  min-width: 0;
}

.ind-media__arrow {
  width: 52px;
  height: 52px;
  min-width: 52px;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--color-white) 45%, transparent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: clamp(18px, 1.125rem + 0.8vw, 24px); /* R24.5 icon sizing */
  color: var(--color-white);
}

/* ─────────────────────────────────────────────────────────────
   7. RIGHT — EXPLORE COLUMN
   ───────────────────────────────────────────────────────────── */
.ind-explore {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ind-explore__dash {
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-green-forest);
}

.ind-explore__text {
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 700;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-green-forest);
}

.ind-explore__desc {
  margin: 0;
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 400;
  line-height: 1.6;
  color: var(--clr-text-secondary);
}

/* Icon orbit — 4 × 3 badge grid, one highlighted */
.ind-orbit {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 12px;
}

.ind-orbit__icon {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 36px;
  justify-self: center;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-green-primary) 10%, var(--color-white));
  font-size: clamp(14px, 0.875rem + 0.6vw, 17px); /* R24.5 icon glyph */
  color: var(--color-green-forest);
}

.ind-orbit__icon--active {
  background: var(--color-green-primary);
  color: var(--color-white);
}

.ind-explore__divider {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--color-border);
}

/* ─────────────────────────────────────────────────────────────
   7. STACK — 12 scrollable cards, 5 visible, ladder fade
   The container shows ~5 cards and scrolls the rest;
   JS keeps the topmost visible card active.
   ───────────────────────────────────────────────────────────── */
.ind-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 250px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}

.ind-stack::-webkit-scrollbar,
.ins-empty[hidden] {
  display: none;
}

.ind-stack-card {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-white);
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 0.25s ease, background-color 0.25s ease, opacity 0.25s ease, width 0.25s ease, margin-top 0.25s ease;
}

.ind-stack-card__no {
  min-width: 30px;
  align-self: stretch;
  display: grid;
  place-items: center;
  font-family: var(--font-base);
  font-size: clamp(14px, 0.875rem + 0.4vw, 16px); /* Rule 24: 16 scale */
  font-weight: 700;
  color: var(--color-green-forest);
}

.ind-stack-card--active .ind-stack-card__no {
  font-size: clamp(36px, 3.75vw, 48px); /* R24.5 watermark numeral */
}

.ind-stack-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ind-stack-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ind-stack-card__head i {
  display: none;
  font-size: clamp(12px, 0.75rem + 0.4vw, 14px); /* R24.5 icon glyph */
  line-height: 1;
  color: var(--color-green-forest);
}

.ind-stack-card--active .ind-stack-card__head i {
  display: inline;
  font-size: clamp(14px, 0.875rem + 0.6vw, 18px); /* R24.5 icon glyph */
}

.ind-stack-card__title {
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 600;
  text-transform: capitalize;
  color: var(--color-black);
}

.ind-stack-card__desc {
  display: none;
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 400;
  line-height: 1.5;
  color: var(--clr-text-secondary);
}

.ind-stack-card--active .ind-stack-card__desc {
  display: block;
}

/* Active card carries a single flat tint */
.ind-stack-card--active {
  border-color: transparent;
  background: color-mix(in srgb, var(--color-green-primary) 14%, var(--color-white));
}

/* NOTE: duplicate active-head-icon rule removed (identical to the one above). */


/* ─────────────────────────────────────────────────────────────
   8. RESPONSIVE -> Rule-9 5-band mapping (max-width tuning preserved)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ind-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ind-stack {
    max-height: 250px;
  }
}

@media (max-width: 640px) {
  .ind-section { padding: 40px 0 0; }
  .ind-grid {
    grid-template-columns: 1fr;
  }
  .ind-headline { font-size: clamp(34px, 11vw, 46px); }
  .ind-media {
    aspect-ratio: 3 / 4;
  }
  .ind-meta {
    min-height: 150px;
  }
  .ind-stack {
    max-height: 250px;
  }}


/* ─────────────────────────────────────────────────────────────
/* ── Tablet — 768px (Rule 9.3) ────────────────────────────── */
@media (max-width: 768px) {
  .ind-grid { gap: 24px; }
  .ind-meta { min-height: 170px; margin-top: 32px; }
  .ind-eyebrow__text { letter-spacing: 0.10em; }
  .ind-stat__top strong { font-size: 14px; }
}

/* 641–768px only: must not override ≤640 phone padding */
@media (min-width: 641px) and (max-width: 768px) {
  .ind-section { padding: 52px 0 0; }
}

/* ── Small Mobile ≤360px (Rule 9.1) — iPhone SE, small Android ── */
@media (max-width: 360px) {
  .ind-section { padding: 32px 0 0; }
  .ind-grid { gap: 20px; }
  .ind-stats { flex-wrap: wrap; gap: 12px; }
  .ind-stat { flex: 1 1 45%; border-left: 0; padding-left: 0; }
  .ind-meta { min-height: 150px; margin-top: 28px; }
}


/* ─────────────────────────────────────────────────────────────
   9. REDUCED MOTION
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ind-section *,
  .ind-section *::before,
  .ind-section *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   NOTE (Rule 8.4): 07. Why Pixentra starts below; 03–06 above. */
/* ========== 07. Why Pixentra ========== */
/* ============================================================
   PIXENTRA — Home 07. Why Pixentra
   (migrated from styles/components/why-pixentra.css — Rule 8.2)
   ------------------------------------------------------------
   Scope        : why-* classes only. No global selector leakage.
   Colours      : variables.css base tokens or color-mix() only —
                  no literal colour values in this file.
   Sizing/type  : hardcoded here (section-local, no shared tokens).
   Font         : var(--font-base) = Inter throughout.
   Layout       : CSS Grid 24-col bento (Rule 10.1); single column stacks.
   Breakpoints  : Rule-9 5 bands (mapping in §8): Desktop ≥1440 base +
                   1680px container guard (large-desktop) | Laptop 1024–1439:
                   1280+1024 tiers | Tablet 768–1023: 768 tier |
                   Mobile 361–767: 640+480 tiers | Small ≤360: 360 tier.
   Interaction  : static content only. All motion is disabled
                  under prefers-reduced-motion.
   Accessibility: decorative eyebrow is aria-hidden in markup;
                  heading continues the page outline at h2.
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. BOX-SIZING RESET (scoped)
   ───────────────────────────────────────────────────────────── */



/* ─────────────────────────────────────────────────────────────
   2. SECTION SHELL
   ───────────────────────────────────────────────────────────── */



/* ─────────────────────────────────────────────────────────────
   3. CONTAINER
   ───────────────────────────────────────────────────────────── */



/* ─────────────────────────────────────────────────────────────
   4. SECTION HEADER — EYEBROW (same system as services)
   ───────────────────────────────────────────────────────────── */
.why-header {
  width: 100%;
  margin-bottom: 4px;
}


/* ─────────────────────────────────────────────────────────────
   5. HEADLINE
   ───────────────────────────────────────────────────────────── */



/* ─────────────────────────────────────────────────────────────
   6. DESCRIPTION
   ───────────────────────────────────────────────────────────── */
.why-description {
  margin: 0;
  max-width: 64ch;
  font-family: var(--font-base);
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 400;
  line-height: 1.65;
  color: var(--clr-text-secondary);
}


/* ─────────────────────────────────────────────────────────────
   7. BENTO GRID — 12 columns, no parent margin/padding
   Row 1: 4 green + 3 black + 1 parrot + 4 green
   Row 2: 2 green + 3 parrot + 7 black
   ───────────────────────────────────────────────────────────── */
.why-bento {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.why-box {
  min-height: 180px;
  border-radius: 1rem;
}

.why-box--green { background: transparent; position: relative; }

/* Card wash — transparent top to light-grey bottom at half strength */
.why-box--green::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    320deg,
    transparent,
    var(--color-grey-light)
  );
  opacity: 0.25;
}
.why-box--black { background: var(--color-black); }
.why-box--parrot { background: var(--color-green-parrot); }

/* Split card — white top content + black bottom block */
.why-box--split {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-white);
}

/* Split top — white content */
.why-split-top {
  padding: 20px 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
}

.why-split__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.3vw, 12px); /* Rule 24: 12 scale */
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-green-forest);
}

.why-split__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-green-primary);
}

.why-split__title {
  margin: 0;
  font-family: var(--font-base);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.why-split__desc {
  margin: 0;
  font-family: var(--font-base);
  font-size: clamp(11px, 0.6875rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 400;
  line-height: 1.6;
  color: var(--clr-text-secondary);
}

/* Split bottom — black placeholder block */
.why-split-bottom {
  flex: 1 1 auto;
  min-height: 120px;
  background: var(--color-black);
}

.why-box--s4,
.why-box--s8,
.tm-top__head { grid-column: span 8; }
.why-box--s2 { grid-column: span 4; }
.why-box--s5 { grid-column: span 5; }
.why-box--s6,
.faq-intro,
.faq-panel { grid-column: span 6; }
.why-box--s11 { grid-column: span 11; }
.why-box--s14 { grid-column: span 14; }

/* Tall card — fixed 3:4 ratio, width unchanged, height grows */
.why-box--ratio34 {
  position: relative;
  aspect-ratio: 3 / 4;
  min-height: 0;
  align-self: end;
  overflow: hidden;
}

/* Square card — fixed 1:1 ratio */
.why-box--ratio11 {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 0;
  align-self: end;
  overflow: hidden;
}

/* Parrot card — fixed 3:2 ratio, bottom-flushed with row */
.why-box--ratio32 {
  position: relative;
  aspect-ratio: 3 / 2;
  min-height: 0;
  align-self: end;
  overflow: hidden;
}

.why-box__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.why-box__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-white);
  font-size: clamp(16px, 1rem + 0.8vw, 20px); /* R24.5 icon glyph */
  color: var(--color-black);
}

.why-box__overlay {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.why-box__overlay-title {
  font-family: var(--font-base);
  font-size: clamp(14px, 0.875rem + 0.6vw, 16px); /* Rule 24: 16 scale */
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-white);
  text-shadow: 0 1px 10px color-mix(in srgb, var(--color-black) 60%, transparent);
}

.why-box__overlay-sub {
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-white) 82%, transparent);
  text-shadow: 0 1px 8px color-mix(in srgb, var(--color-black) 60%, transparent);
}

/* Bottom gradient wash behind the overlay text */
.why-box--s5::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to top,
    var(--color-green-forest),
    transparent 55%
  );
  opacity: 0.5;
  pointer-events: none;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  -webkit-mask-image: linear-gradient(to top, var(--color-black), transparent 55%);
  mask-image: linear-gradient(to top, var(--color-black), transparent 55%);
}

/* Fabric card — pure-CSS dramatic gradient + grain.
   Idle: slow playful drift. Hover: faster + brighter grain. */
.why-box--green.why-box--s2 {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(135% 75% at 12% 0%, color-mix(in srgb, var(--color-green-parrot) 42%, transparent), transparent 62%),
    radial-gradient(120% 95% at 92% 100%, color-mix(in srgb, var(--color-green-primary) 34%, transparent), transparent 60%),
    radial-gradient(85% 55% at 68% 42%, color-mix(in srgb, var(--color-white) 8%, transparent), transparent 70%),
    conic-gradient(from 200deg at 30% 18%, color-mix(in srgb, var(--color-green-deep) 80%, var(--color-black)), var(--color-black) 28%, color-mix(in srgb, var(--color-green-forest) 55%, var(--color-black)) 46%, var(--color-black) 64%, color-mix(in srgb, var(--color-green-deep) 80%, var(--color-black))),
    linear-gradient(165deg, color-mix(in srgb, var(--color-green-deep) 70%, var(--color-black)), var(--color-black));
  animation: why-fabric-drift 9s ease-in-out infinite alternate;
}

.why-box--green.why-box--s2:hover {
  animation-duration: 3.5s;
}

@keyframes why-fabric-drift {
  0% {
    background-position: 0% 0%, 100% 100%, 78% 32%, 22% 12%, 0% 0%;
  }
  100% {
    background-position: 20% 26%, 80% 74%, 58% 58%, 44% 34%, 0% 0%;
  }
}

.why-box--green.why-box--s2::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: inherit;
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-white) 5%, transparent) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-white) 4%, transparent) 0 2px, transparent 2px 5px);
  opacity: 0.5;
  pointer-events: none;
  animation: why-grain-shift 4s ease-in-out infinite alternate;
}

.why-box--green.why-box--s2:hover::after {
  opacity: 1;
  animation-duration: 1.5s;
}

@keyframes why-grain-shift {
  from { transform: translate(10px, -8px); }
  to { transform: translate(-14px, 10px); }
}
.why-fabric__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  aspect-ratio: 1 / 1;
  padding: 20px 16px;
}

.why-fabric__no {
  font-family: var(--font-base);
  font-size: clamp(36px, 2.75rem + 1vw, 44px); /* display numeral, desktop unchanged */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-white);
}

.why-fabric__label {
  margin-top: 6px;
  font-family: var(--font-base);
  font-size: clamp(11px, 0.6875rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  color: var(--color-white);
}

.why-fabric__arrow {
  margin-top: auto;
  align-self: flex-end;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--color-white) 45%, transparent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: clamp(16px, 1rem + 0.8vw, 20px); /* R24.5 icon sizing */
  color: var(--color-white);
}

.why-fabric__arrow i,
.ins-card__link-icon i {
  transform: rotate(-45deg);
}

/* Wide card — fixed 3:2 ratio, bottom-flushed with row */
.why-box--r43end {
  aspect-ratio: 3 / 2;
  min-height: 0;
  align-self: end;
}

.why-team {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 18px 0;
  overflow: hidden;
}

.why-team__head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.why-team__no {
  font-family: var(--font-base);
  font-size: clamp(32px, 2.5vw, 40px); /* display numeral, desktop unchanged */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(
    to bottom,
    var(--color-green-parrot),
    var(--color-green-forest)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.why-team__label {
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  text-transform: uppercase;
  color: var(--color-grey-dark);
}

.why-rings {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

.why-rings__svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.why-rings__ring {
  fill: none;
  stroke: url(#whyRingGrad);
  stroke-width: 1px;
  opacity: 0.25;
}

.why-rings__grad-from {
  stop-color: var(--color-black);
}

.why-rings__grad-to {
  stop-color: var(--color-green-forest);
}

.why-rings__halo {
  fill: none;
  stroke: var(--color-white);
  stroke-width: 2;
}

.why-rings__plusbg {
  fill: color-mix(in srgb, var(--color-green-parrot) 35%, var(--color-white));
}

.why-rings__plus {
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.4vw, 14px); /* Rule 24: 14 scale */
  font-weight: 700;
  fill: var(--color-green-forest);
}


/* ─────────────────────────────────────────────────────────────
   8. RESPONSIVE -> Rule-9 5-band mapping (max-width tuning preserved)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .why-section { padding: 64px 16px 72px; }
  .why-headline { font-size: clamp(38px, 3.2vw, 52px); }
}

@media (max-width: 1024px) {
  .why-section { padding: 56px 16px 64px; }
  .why-headline { font-size: clamp(32px, 4vw, 46px); }
  .why-description { max-width: 56ch; }}

@media (max-width: 768px) {
  .why-section { padding: 48px 0 0; }
  .why-headline,
  .why-description { text-align: left; }
  .why-headline { font-size: clamp(28px, 7.5vw, 40px); }
  /* Bento stacks in DOM order, desktop ratios kept via ratio classes */
  .why-bento { grid-template-columns: 1fr; }
  .why-box--s8,
  .why-box--s5,
  .why-box--s11,
  .why-box--s2,
  .why-box--s6,
  .why-box--s14 { grid-column: 1 / -1; }
}

/* ── BP — 640px (Rule 9.2, was missing) ───────────────────────
   Large/normal phones: tighten rhythm, keep bento grid intact. */
@media (max-width: 640px) {
  .why-section { padding: 44px 0 0; }
  .why-bento { gap: 12px; }
  .why-description { font-size: 14px; }
}

@media (max-width: 480px) {
  .why-section { padding: 40px 0 0; }
  .why-headline { font-size: clamp(22px, 6.5vw, 30px); }
  .why-description { font-size: 14px; }}

@media (max-width: 360px) {
  .why-section { padding: 32px 0 0; }
  .why-headline { font-size: clamp(20px, 6vw, 26px); }
  .why-description { font-size: 14px; } /* Rule 24: 14 scale */
  .why-container { gap: 16px; }}


/* ─────────────────────────────────────────────────────────────
   9. REDUCED MOTION
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .why-section *,
  .why-section *::before,
  .why-section *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   NOTE (Rule 8.4): 08. Our Process starts below; 03–07 above. */
/* ========== 08. Our Process ========== */
/* ============================================================
   PIXENTRA — Home 08. Our Process
   (migrated from styles/components/our-process.css — Rule 8.2)
   ------------------------------------------------------------
   Scope        : proc-* classes only. No global selector leakage.
   Colours      : variables.css base tokens or color-mix() only —
                  no literal colour values in this file.
   Sizing/type  : hardcoded here (section-local, no shared tokens).
   Font         : var(--font-base) = Inter throughout.
   Layout       : CSS Grid intro/steps (Rule 10.1) + 1D flex row;
                   vertical stack at 640.
   Breakpoints  : Rule-9 5 bands (mapping in §7): Desktop ≥1440 base +
                   1680px container guard (large-desktop) | Laptop 1024–1439:
                   1280+1024 tiers | Tablet 768–1023: 920+768 tiers |
                   Mobile 361–767: 640+480 tiers | Small ≤360: 360 tier.
   Interaction  : pill CTA hover only. All motion disabled under
                  prefers-reduced-motion.
   Accessibility: decorative eyebrow hidden in markup;
                  heading order is h2 first.
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. BOX-SIZING RESET (scoped)
   ───────────────────────────────────────────────────────────── */



/* ─────────────────────────────────────────────────────────────
   2. SECTION SHELL + CONTAINER
   ───────────────────────────────────────────────────────────── */


.proc-container,
.tech-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
}


/* ─────────────────────────────────────────────────────────────
   3. EYEBROW
   ───────────────────────────────────────────────────────────── */
.proc-eyebrow,
.tech-eyebrow,
.pix-about__eyebrow,
.ins-eyebrow,
.faq-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 24px;
}


/* ─────────────────────────────────────────────────────────────
   4. INTRO GRID [content | brand | side] — mirrors case-intro
   ───────────────────────────────────────────────────────────── */
.proc-intro,
.tech-intro {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: stretch;
  width: 100%;
  margin-bottom: 8px;
}

.proc-intro__content,
.tech-intro__content {
  grid-column: 1 / 9;
  min-width: 0;
  text-align: left;
}

.proc-description,
.tech-description {
  margin: 12px 0 0;
  max-width: 100%;
  font-family: var(--font-base);
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 400;
  line-height: 1.65;
  color: var(--clr-text-secondary);
}

.proc-intro__side {
  grid-column: 10 / 13;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 20px;
  min-width: 0;
  padding-top: 62px;
}


/* ─────────────────────────────────────────────────────────────
   5. BLACK PILL CTA + STATIC COUNTER — mirrors case-pill-btn
   ───────────────────────────────────────────────────────────── */


.proc-pill-btn__pill,
.tech-pill-btn__pill,
.tm-start__pill,
.pix-about__cta-pill {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: linear-gradient(45deg, var(--color-green-forest) 0%, var(--color-black) 40%);
  font-family: var(--font-base);
  font-size: clamp(11px, 0.6875rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-white);
}

.proc-side-tag {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────
   6. STEPS — 12-col grid parent, 5 equal cards, no gap.
   Cards sit side by side; hover / focus / tap expands the
   card horizontally and reveals its detail overlay.
   ───────────────────────────────────────────────────────────── */
.proc-steps {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  width: 100%;
  margin-top: 8px;
}

.proc-steps__row {
  grid-column: 1 / -1;
  display: flex;
  align-items: stretch;
  height: 310px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.proc-step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  background: var(--color-white);
  border-left: 1px solid var(--color-border);
  cursor: pointer;
  container-type: inline-size;
  will-change: flex-grow;
  transition: flex-grow 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.45s ease;
}

.proc-step:first-child {
  border-left: 0;
}

.proc-step::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23grain)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.proc-step__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 38% at 88% 8%, color-mix(in srgb, var(--color-green-parrot) 30%, transparent), transparent 70%),
    radial-gradient(50% 32% at 8% 96%, color-mix(in srgb, var(--color-green-forest) 55%, transparent), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.proc-step:focus-visible {
  outline: 2px solid var(--color-green-primary);
  outline-offset: -2px;
}

/* Horizontal expand — hover, keyboard focus, or tapped open.
   Height is fixed on the row, so only the width grows.
   Collapsed cards stay clean white; the active card gets the
   premium dark finish. */
.proc-step.is-open {
  flex-grow: 3.4;
  border-left-color: transparent;
}

/* Dark finish lives on its own fading layer — the background
   crossfades with the width instead of snapping instantly. */
.proc-step::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 82% 0%, color-mix(in srgb, var(--color-green-parrot) 26%, transparent), transparent 60%),
    radial-gradient(110% 80% at 12% 100%, color-mix(in srgb, var(--color-green-primary) 28%, transparent), transparent 62%),
    linear-gradient(165deg, color-mix(in srgb, var(--color-green-deep) 70%, var(--color-black)), var(--color-black));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
  will-change: opacity;
}

.proc-step:nth-child(2)::before {
  background:
    radial-gradient(120% 90% at 18% 0%, color-mix(in srgb, var(--color-green-primary) 32%, transparent), transparent 60%),
    radial-gradient(110% 80% at 88% 100%, color-mix(in srgb, var(--color-green-forest) 55%, transparent), transparent 62%),
    linear-gradient(200deg, color-mix(in srgb, var(--color-green-forest) 60%, var(--color-black)), var(--color-black));
}

.proc-step:nth-child(3)::before {
  background:
    radial-gradient(110% 90% at 50% 0%, color-mix(in srgb, var(--color-green-parrot) 24%, transparent), transparent 58%),
    radial-gradient(100% 80% at 50% 100%, color-mix(in srgb, var(--color-green-primary) 26%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-green-forest) 55%, var(--color-black)), var(--color-black));
}

.proc-step:nth-child(4)::before {
  background:
    radial-gradient(120% 90% at 85% 20%, color-mix(in srgb, var(--color-green-parrot) 22%, transparent), transparent 60%),
    radial-gradient(110% 80% at 10% 90%, color-mix(in srgb, var(--color-green-deep) 70%, transparent), transparent 65%),
    linear-gradient(165deg, color-mix(in srgb, var(--color-green-deep) 75%, var(--color-black)), var(--color-black));
}

.proc-step:nth-child(5)::before {
  background:
    radial-gradient(130% 90% at 50% 0%, color-mix(in srgb, var(--color-green-primary) 30%, transparent), transparent 58%),
    radial-gradient(100% 70% at 50% 100%, color-mix(in srgb, var(--color-green-parrot) 20%, transparent), transparent 60%),
    linear-gradient(170deg, color-mix(in srgb, var(--color-green-deep) 65%, var(--color-black)), var(--color-black));
}

.proc-step.is-open::before,
.pix-about__stat,
.pix-about__card {
  opacity: 1;
}

.proc-step.is-open::after {
  opacity: 0.22;
}

.proc-step.is-open .proc-step__glow {
  opacity: 1;
}

/* Collapsed face — number + name only */
.proc-step__face {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 22px 20px;
  transform: translateZ(0);
  transition: opacity 0.3s ease;
}

.proc-step.is-open .proc-step__face,
.tm-view.is-fading {
  opacity: 0;
}

.proc-step__kicker {
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.3vw, 12px); /* Rule 24: 12 scale */
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--clr-text-secondary);
}

.proc-step__top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.proc-step__badge {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-green-primary) 12%, var(--color-white));
  border: 1px solid var(--clr-green-border);
  font-size: clamp(14px, 0.875rem + 0.6vw, 17px); /* R24.5 icon glyph */
  color: var(--color-green-forest);
}

.proc-step__no {
  font-family: var(--font-base);
  /* Card-width relative (cqw watermark, R24.5): grows with the card,
     shrinks equally on siblings when one expands — always in sync. */
  font-size: clamp(30px, 30cqw, 104px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  background: var(--gradient-brand-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.proc-step__name {
  font-family: var(--font-base);
  font-size: clamp(11px, 0.6875rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-black);
}

.proc-step__teaser {
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: var(--clr-text-secondary);
}

.proc-step__plus {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--clr-green-border);
  font-size: clamp(14px, 0.875rem + 0.6vw, 18px); /* R24.5 icon glyph */
  color: var(--color-green-forest);
  transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

/* Face turns light-on-dark with the active background */
.proc-step.is-open .proc-step__kicker {
  color: color-mix(in srgb, var(--color-white) 60%, transparent);
}

.proc-step.is-open .proc-step__no {
  background: none;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--color-white) 60%, transparent);
}

.proc-step.is-open .proc-step__name {
  color: var(--color-white);
}

.proc-step.is-open .proc-step__plus {
  border-color: color-mix(in srgb, var(--color-white) 30%, transparent);
  color: var(--color-green-parrot);
}

/* Hover affordance — plus spins, no full expand (JS owns state) */
.proc-step:hover .proc-step__plus {
  transform: rotate(90deg);
  background: color-mix(in srgb, var(--color-green-primary) 12%, var(--color-white));
}

/* Detail overlay — revealed on expand */
.proc-step__detail {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  padding: 26px 26px 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) translateZ(0);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.5s;
}

.proc-step.is-open .proc-step__detail {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) translateZ(0);
  transition: opacity 0.45s ease 0.05s, transform 0.45s ease 0.05s, visibility 0s;
}

.proc-step__detail-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  margin-top: auto;
  white-space: normal;
}

.proc-step__index {
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-green-parrot);
}

.proc-step__title {
  margin: 0;
  font-family: var(--font-base);
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--color-white);
}

.proc-step__desc {
  margin: 0;
  max-width: 44ch;
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 400;
  line-height: 1.65;
  color: color-mix(in srgb, var(--color-white) 72%, transparent);
}

.proc-step__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.proc-step__chips li {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-white) 22%, transparent);
  background: color-mix(in srgb, var(--color-white) 10%, transparent);
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.3vw, 12px); /* Rule 24: 12 scale */
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-white);
}


/* ─────────────────────────────────────────────────────────────
   7. RESPONSIVE -> Rule-9 5-band mapping (max-width tuning preserved)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .proc-headline { font-size: clamp(38px, 3.2vw, 52px); }
}

@media (max-width: 1024px) {
  .proc-steps__row { height: 330px; }}

@media (max-width: 920px) {
  .proc-intro,
.tech-intro {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
  .proc-intro__content,
  .proc-intro__side,
.tech-intro__content,
  .tech-intro__side { grid-column: auto; }
  .proc-intro__side,
.tech-intro__side {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 0;
  }
  .proc-pill-btn,
.tech-pill-btn { width: auto; min-width: 220px; }}

@media (max-width: 640px) {
  .proc-section { padding: 48px 0 0; }
  .tech-section { padding: 48px 0 0; }
  .proc-headline,
.tech-headline { font-size: clamp(24px, 7vw, 34px); }
  .proc-description,
.tech-description { font-size: 14px; }
  /* Vertical stack — row frees to content height (was 310px clip) */
  .proc-steps__row {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }
  .proc-step {
    min-height: 96px;
    flex: none;
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }
  .proc-step:first-child {
    border-top: 0;
  }
  .proc-step:hover,
  .proc-step:focus-within,
  .proc-step.is-open {
    flex-grow: 1;
  }
  /* Face stacks like desktop (kicker+badge, number, name, teaser, plus) */
  .proc-step__face {
    position: static;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 20px;
    opacity: 1;
  }
  .proc-step.is-open .proc-step__face {
    opacity: 1;
  }
  .proc-step__no {
    font-size: clamp(28px, 9vw, 34px); /* R24.5 watermark */
  }
  .proc-step__name {
    flex: 1;
  }
  .proc-step__detail {
    position: static;
    display: none;
    padding: 0 18px;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .proc-step.is-open .proc-step__detail {
    display: block;
  }
  .proc-step__detail-inner {
    overflow: hidden;
    min-height: 0;
    margin-top: 0;
    padding-bottom: 0;
  }
  .proc-step.is-open .proc-step__detail-inner {
    padding-bottom: 20px;
  }}

@media (max-width: 480px) {
  .tech-section { padding: 40px 0 0; }
  .proc-section { padding: 40px 0 0; }}


/* ─────────────────────────────────────────────────────────────
/* ── Tablet — 768px (Rule 9.3) ────────────────────────────── */
@media (max-width: 768px) {
  .proc-intro__side { gap: 16px; }
}

/* 641–768px only: tablet row height (must not override ≤640 auto) */
@media (min-width: 641px) and (max-width: 768px) {
  .proc-section { padding: 52px 0 0; }
  .proc-steps__row { height: 320px; }
}

/* ── Small Mobile ≤360px (Rule 9.1) — iPhone SE, small Android ── */
@media (max-width: 360px) {
  .proc-section { padding: 32px 0 0; }
  .proc-steps__row { height: auto; }
  .proc-step { min-height: 88px; }
  .proc-step__face { padding: 16px; gap: 12px; }
  .proc-pill-btn { min-width: 0; width: 100%; }
}


/* ─────────────────────────────────────────────────────────────
   8. REDUCED MOTION
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .proc-section *,
  .proc-section *::before,
  .proc-section *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   NOTE (Rule 8.4): 09. Technology starts below; 03–08 above. */
/* ========== 09. Technology ========== */
/* ============================================================
   PIXENTRA — Home 09. Technology
   (migrated from styles/components/technology.css — Rule 8.2)
   ------------------------------------------------------------
   Scope        : tech-* classes only. No global selector leakage.
   Colours      : variables.css base tokens or color-mix() only —
                  no literal colour values in this file.
   Sizing/type  : hardcoded here (section-local, no shared tokens).
   Font         : var(--font-base) = Inter throughout.
   Layout       : CSS Grid intro (Rule 10.1) + flex marquee rows,
                  microline + dual-row marquee below.
   Breakpoints  : Rule-9 5 bands (mapping in §8): Desktop ≥1440 base +
                   1680px container guard (large-desktop) | Laptop 1024–1439:
                   1280 tier | Tablet 768–1023: 920+768 tiers |
                   Mobile 361–767: 640+480 tiers | Small ≤360: 360 tier.
   Interaction  : pill CTA hover + marquee pause on hover.
                  All motion disabled under prefers-reduced-motion.
   Accessibility: decorative eyebrow hidden in markup; heading
                  order h2 only.
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. BOX-SIZING RESET (scoped)
   ───────────────────────────────────────────────────────────── */



/* ─────────────────────────────────────────────────────────────
   2. SECTION SHELL + CONTAINER
   ───────────────────────────────────────────────────────────── */



/* ─────────────────────────────────────────────────────────────
   3. EYEBROW
   ───────────────────────────────────────────────────────────── */



/* ─────────────────────────────────────────────────────────────
   4. INTRO GRID [content | side] — mirrors case-intro
   ───────────────────────────────────────────────────────────── */


.tech-intro__side {
  grid-column: 10 / 13;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 16px;
  min-width: 0;
  padding-top: 62px;
}


/* ─────────────────────────────────────────────────────────────
   5. BLACK PILL CTA + SIDE NOTE — mirrors case-pill-btn
   ───────────────────────────────────────────────────────────── */


.tech-side-note {
  margin: 0;
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--clr-text-secondary);
}



/* -------------------------------------------------------------
   6. MICROLINE
   ------------------------------------------------------------- */
.tech-micro {
  margin: 0;
  text-align: center;
  font-family: var(--font-base);
  font-size: clamp(11px, 0.6875rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-black);
}
/* ─────────────────────────────────────────────────────────────
   7. DUAL-ROW MARQUEE — same technique as reference:
   two identical groups per row, row 2 runs in reverse.
   Row 1 = capabilities (forward), row 2 = tools (reverse).
   ───────────────────────────────────────────────────────────── */
.tech-marquee {
  --tech-marquee-gap: 14px;
  --tech-marquee-duration: 42s;
  display: flex;
  flex-direction: column;
  gap: var(--tech-marquee-gap);
  width: 100%;
  margin-top: 8px;
}

.tech-marquee__row {
  display: flex;
  overflow: hidden;
  gap: var(--tech-marquee-gap);
  -webkit-mask-image: linear-gradient(to right, transparent, var(--color-black) 8%, var(--color-black) 92%, transparent);
  mask-image: linear-gradient(to right, transparent, var(--color-black) 8%, var(--color-black) 92%, transparent);
  user-select: none;
}

.tech-marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: var(--tech-marquee-gap);
  min-width: 100%;
  animation: tech-scroll-x var(--tech-marquee-duration) linear infinite;
  will-change: transform;
}

.tech-marquee__row--reverse .tech-marquee__group {
  animation-direction: reverse;
}

.tech-marquee:hover .tech-marquee__group {
  animation-play-state: paused;
}

@keyframes tech-scroll-x {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - var(--tech-marquee-gap))); }
}

.tech-marquee__tile {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: transparent;
  font-family: var(--font-base);
  font-size: clamp(11px, 0.6875rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-black);
}

.tech-marquee__tile i {
  font-size: clamp(18px, 1.125rem + 0.8vw, 22px); /* R24.5 icon glyph */
  line-height: 1;
  color: var(--color-green-forest);
}

.tech-marquee__tile-img {
  width: 28px;
  height: 28px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  flex-shrink: 0;
}

.tech-marquee__row--reverse {
  --tech-marquee-duration: 90s;
}

.tech-marquee__row--reverse .tech-marquee__tile {
  background: transparent;
}


/* ─────────────────────────────────────────────────────────────
   8. RESPONSIVE -> Rule-9 5-band mapping (max-width tuning preserved)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .tech-headline { font-size: clamp(38px, 3.2vw, 52px); }
}

/* ─────────────────────────────────────────────────────────────
/* ── Tablet — 768px (Rule 9.3) ────────────────────────────── */
@media (max-width: 768px) {
  .tech-marquee { --tech-marquee-gap: 12px; }
  .tech-intro__side { gap: 14px; }
  .tech-eyebrow__text { letter-spacing: 0.10em; }
  /* Intro stacks full-width: headline + description, then side below */
  .tech-intro { grid-template-columns: 1fr; }
  .tech-intro__content,
  .tech-intro__side { grid-column: 1 / -1; }
  .tech-intro__side {
    align-items: flex-start;
    padding-top: 0;
  }
}

/* 641–768px only: must not override ≤640 phone rules */
@media (min-width: 641px) and (max-width: 768px) {
  .tech-section { padding: 52px 0 0; }
}

/* ── Small Mobile ≤360px (Rule 9.1) — iPhone SE, small Android ── */
@media (max-width: 360px) {
  .tech-section { padding: 32px 0 0; }
  .tech-marquee { --tech-marquee-gap: 10px; }
  .tech-marquee__tile { padding: 10px 14px; }
  .tech-pill-btn { min-width: 0; width: 100%; }
}


/* ─────────────────────────────────────────────────────────────
   9. REDUCED MOTION
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tech-section *,
  .tech-section *::before,
  .tech-section *::after {
    transition: none !important;
    animation: none !important;
  }
  .tech-marquee__row {
    overflow-x: auto;
  }
}

/* ─────────────────────────────────────────────────────────────
   NOTE (Rule 8.4): 10. Testimonials starts below; 03–09 above. */
/* ========== 10. Testimonials ========== */
/* ============================================================
   PIXENTRA — Home 10. Testimonials
   (migrated from styles/components/testimonial.css — Rule 8.2)
   Font   : Inter via var(--font-base) (token in variables.css)
   Icons  : Boxicons (loaded globally)
   Scope  : All classes prefixed .tm-*
   Colours: variables.css tokens only — no hex, no rgba,
            no color-mix() in this file.
   Layout : pure CSS Grid skeleton (top / view / bottom).
            Flex is used only *inside* atoms, never for the
            section skeleton.
   Breakpoints : Rule-9 5 bands: Desktop ≥1440 base (card full-bleed by
                   design, no 1680 cap) | Laptop 1024–1439: 1280+1024 tiers |
                   Tablet 768–1023: 768 tier | Mobile 361–767: 640+480 tiers |
                   Small ≤360: 360 tier.
   ============================================================ */

/* ── Root — same common section space as all sections ── */
.tm-section {
  width: 100%;
  background: none;
  font-family: var(--font-base);
  padding: 48px 16px 0;
}

/* ── Card ───────────────────────────────────────────────── */
.tm-card {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: var(--clr-surface-full);
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* ════════════════════════════════════════════════════════════
   TOP — heading | brand
   ════════════════════════════════════════════════════════════ */
.tm-top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: 32px;
}

.tm-eyebrow {
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-green-forest);
  margin-bottom: 10px;
}

.tm-headline,
.ins-headline,
.faq-headline {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: clamp(36px, 3.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-black);
}

.tm-headline-accent { color: var(--color-green-primary); }

.tm-desc {
  margin: 12px 0 0;
  max-width: 62ch;
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 400;
  line-height: 1.65;
  color: var(--clr-text-secondary);
}

/* ════════════════════════════════════════════════════════════
   VIEW — rail | image | quote | side
   ════════════════════════════════════════════════════════════ */
.tm-view {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: stretch;
  gap: 24px;
  margin-top: 32px;
  transition: opacity 0.2s ease;
}

/* Left rail — everything bottom aligned */
.tm-rail {
  grid-column: span 3;
  display: grid;
  align-content: end;
  gap: 16px;
  min-height: 0;
}

.tm-rail .tm-arrow { justify-self: start; }

.tm-rail .tm-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 12px;
}

.tm-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--color-black);
  color: var(--color-white);
  font-size: clamp(18px, 1.125rem + 0.8vw, 22px); /* R24.5 icon sizing */
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.tm-arrow:hover {
  background: var(--color-green-forest);
  transform: scale(1.05);
}

.tm-arrow:focus-visible,
.tm-btn:focus-visible,
.pix-about__play:focus-visible,
.pix-about__dark-btn:focus-visible,
.cta-btn:focus-visible {
  outline: 2px solid var(--color-green-primary);
  outline-offset: 3px;
}

/* Mini person card */
.tm-person {
  padding: 16px;
  border: 1px solid var(--clr-border-light);
  border-radius: 16px;
  background: var(--clr-surface-full);
}

.tm-person__avatar {
  width: 56px;
  height: 56px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin-bottom: 12px;
}

.tm-person__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.tm-person__name,
.faq-mini__title {
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-black);
}

.tm-person__role {
  margin-top: 2px;
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  line-height: 1.4;
  color: var(--clr-text-secondary);
}

.tm-rating {
  display: grid;
  gap: 2px;
  justify-items: end;
}

.tm-rating__label {
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.3vw, 12px); /* Rule 24: 12 scale */
  color: var(--clr-text-muted);
}

.tm-rating__value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-black);
}

.tm-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: clamp(11px, 0.6875rem + 0.5vw, 14px); /* Rule 24: 14 scale icon sizing */
  /* Decorative brand-amber from the greeting icon tokens */
  color: var(--clr-icon-sun);
}

/* Center glass image — 3:4, fills column height */
.tm-main {
  grid-column: span 3;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 3 / 4;
  height: 100%;
  min-height: 0;
  background: var(--clr-hover-bg-soft);
}

.tm-main__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Quote block — middle aligned, trust at bottom */
.tm-quote {
  grid-column: span 6;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

.tm-quote__mid { align-self: center; }

.tm-quote__text {
  font-family: var(--font-base);
  font-size: clamp(14px, 0.875rem + 0.5vw, 16px); /* Rule 24: 16 scale */
  line-height: 1.65;
  color: var(--clr-text-body);
}

.tm-quote__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--clr-border-light);
}

.tm-trust {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 20px;
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  line-height: 1.6;
  color: var(--clr-text-secondary);
}

.tm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 28px;
  border-radius: 999px;
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.tm-btn i {
  font-size: clamp(15px, 0.9375rem + 0.6vw, 19px); /* R24.5 icon glyph */
  transform: rotate(-45deg);
}

.tm-btn--ghost {
  border: 1px solid var(--clr-border-default);
  background: var(--clr-surface-full);
  color: var(--color-black);
}

.tm-btn--ghost:hover,
.faq-toggle:hover {
  border-color: var(--color-green-primary);
  color: var(--color-green-primary);
}

/* NOTE: duplicate .tm-trust block removed (identical to the one above). */

.tm-trust__dash {
  width: 22px;
  height: 2px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--color-green-primary);
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE -> Rule-9 5-band mapping (max-width tuning preserved)
   ════════════════════════════════════════════════════════════ */

/* 1280px — Large tablet / small desktop */
@media (max-width: 1280px) {
  .tm-section { padding: 64px 16px 72px; }
  .tm-headline { font-size: clamp(30px, 3.2vw, 44px); }
  .tm-view { gap: 20px; }
}

/* 1024px — Tablet landscape */
@media (max-width: 1024px) {
  .tm-section { padding: 56px 16px 64px; }
  .tm-headline { font-size: clamp(30px, 4.4vw, 42px); }
  .tm-top__head { grid-column: span 12; }
  .tm-rail { grid-column: span 5; }
  .tm-main { grid-column: span 7; }
  .tm-quote { grid-column: span 12; }
}

/* 768px — Tablet portrait */
@media (max-width: 768px) {
  .tm-section { padding: 48px 0 0; }
  .tm-headline { font-size: clamp(28px, 7vw, 38px); }
  .tm-top { grid-template-columns: minmax(0, 1fr); }
  .tm-top__head { grid-column: auto; }
  .tm-view { grid-template-columns: minmax(0, 1fr); }
  .tm-rail,
  .tm-main,
  .tm-quote { grid-column: auto; }
  .tm-main { aspect-ratio: 3 / 4; }
}

/* 640px — Large phone (Rule 9.2, was missing) */
@media (max-width: 640px) {
  .tm-view { gap: 20px; margin-top: 28px; }
  .tm-quote__text { font-size: clamp(14px, 0.875rem + 0.5vw, 16px); }
}

/* 480px — Mobile */
@media (max-width: 480px) {
  .tm-section { padding: 40px 0 0; }
  .tm-headline { font-size: clamp(26px, 8.4vw, 32px); }
  .tm-quote__text { font-size: 14px; }
  .tm-btn { height: 44px; padding: 0 22px; font-size: clamp(12px, 0.75rem + 0.5vw, 14px); } /* Rule 24 */
}

/* 360px — Small mobile */
@media (max-width: 360px) {
  .tm-section { padding: 32px 0 0; }
  .tm-headline { font-size: 26px; }
  .tm-person__row { grid-template-columns: minmax(0, 1fr); }
  .tm-rating { justify-items: start; }
  .tm-quote__row { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tm-section *,
  .tm-section *::before,
  .tm-section *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   NOTE (Rule 8.4): 11. About Us starts below; 03–10 above. */
/* ========== 11. About Us ========== */
/* ============================================================
   PIXENTRA — Home 11. About Us
   (migrated from styles/components/about-us.css — Rule 8.2)
   Font   : Inter via var(--font-base) (token in variables.css)
   Icons  : Boxicons (loaded globally)
   Scope  : All classes prefixed .pix-about*
   Colours: variables.css tokens only — no hex, no rgba,
            no color-mix() in this file.
   Layout : pure CSS Grid — hero-grid / stats / cards-grid.
            Flex is used only *inside* atoms (icon rows, links),
            never for the section skeleton.
   Breakpoints : Rule-9 5 bands: Desktop ≥1440 base (shell full-bleed by
                   design, no 1680 cap) | Laptop 1024–1439: 1280+1024 tiers |
                   Tablet 768–1023: 768 tier | Mobile 361–767: 640+480 tiers |
                   Small ≤360: 360 tier.
   ============================================================ */

/* ── Scoped box-sizing reset ────────────────────────────── */


/* ── Root — same common section space as all sections ── */
.pix-about {
  width: 100%;
  background: none;
  font-family: var(--font-base);
  padding: 48px 16px 0;
}

/* ════════════════════════════════════════════════════════════
   SHELL — rounded card
   ════════════════════════════════════════════════════════════ */
.pix-about__shell,
.ins-shell,
.faq-shell {
  position: relative;
  overflow: hidden;
  background: var(--clr-surface-full);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* ════════════════════════════════════════════════════════════
   HERO GRID — 2 columns: intro | media
   ════════════════════════════════════════════════════════════ */
.pix-about__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  align-items: stretch;
  gap: 48px;
}

/* ── Intro column ───────────────────────────────────────── */
.pix-about__intro {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: start;
  gap: 0;
  padding: 0 0 24px;
}

/* ── Eyebrow header — same system as Technology / Our Process ── */
.pix-about__head,
.ins-head,
.faq-head {
  padding: 0;
}

.pix-about__eyebrow-lines,
.ins-eyebrow-lines,
.faq-eyebrow-lines {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pix-about__headline {
  margin: 0 0 12px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: clamp(36px, 3.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-black);
}

.pix-about__desc {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 400;
  line-height: 1.65;
  color: var(--clr-text-body);
}

.pix-about__desc-kicker {
  display: block;
  width: fit-content;
  margin-bottom: 8px;
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  background: var(--gradient-brand-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Story + CTA row — story left, CTA right */
.pix-about__story-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
  margin-top: 28px;
}

/* CTA — same pill + arrow system as Explore Our Capabilities */
.pix-about__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  text-decoration: none;
  transition: transform 0.22s ease;
}

/* Story row — play | text */
.pix-about__story {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 14px;
  max-width: max-content;
  margin-top: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: var(--clr-surface-full);
}

.pix-about__play {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  display: grid;
  place-items: center;
  background: var(--gradient-brand-cta);
  color: var(--color-white);
  font-size: clamp(16px, 1rem + 0.8vw, 20px); /* R24.5 icon sizing */
  cursor: pointer;
  transition: transform 0.2s;
}

.pix-about__play:hover {
  transform: scale(1.06);
}

.pix-about__story-text {
  display: grid;
  grid-template-rows: auto auto;
  gap: 2px;
}

.pix-about__story-title {
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  background: var(--gradient-brand-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pix-about__story-sub {
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.3vw, 12px); /* Rule 24: 12 scale */
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  line-height: 1.2;
}

/* ── Media column ───────────────────────────────────────── */
.pix-about__media {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.pix-about__media-frame {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 3 / 2;
  height: 100%;
  min-height: 0;
}

.pix-about__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

/* Bottom green shade — same treatment as why-box--s5 */
.pix-about__media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top, var(--color-green-forest), transparent 55%);
  opacity: 0.5;
  pointer-events: none;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  -webkit-mask-image: linear-gradient(to top, var(--color-black), transparent 55%);
  mask-image: linear-gradient(to top, var(--color-black), transparent 55%);
}

.pix-about__media-tag {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  margin: 0;
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--color-white);
  text-shadow: var(--shadow-text);
}

.pix-about__media-caption {
  display: grid;
  align-content: end;
  padding: 24px 12px 28px;
  background: linear-gradient(to bottom, var(--clr-green-tint-badge), transparent);
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--clr-text-body);
}

.pix-about__media-caption-text {
  display: block;
  background: var(--gradient-brand-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ════════════════════════════════════════════════════════════
   STATS BAND — 4-col grid
   ════════════════════════════════════════════════════════════ */
.pix-about__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  background: linear-gradient(to right, var(--clr-green-tint-badge), transparent);
  border-top: 1px solid var(--clr-border-light);
  border-bottom: 1px solid var(--clr-border-light);
}

.pix-about__stat {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  border-left: 1px solid var(--clr-border-light);
}

.pix-about__stat:first-child { border-left: none; }

.pix-about__stat-no {
  font-family: var(--font-base);
  font-size: clamp(26px, 2vw, 32px); /* display numeral, desktop unchanged */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-green-forest);
}

.pix-about__stat-label,
.faq-stat__label {
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  line-height: 1.45;
  color: var(--clr-text-secondary);
}

/* ════════════════════════════════════════════════════════════
   CARDS GRID — 6 equal columns
   ════════════════════════════════════════════════════════════ */
.pix-about__cards-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  margin: 0;
  padding: 0;
}

.pix-about__card {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 0;
  padding: 22px 18px 20px;
  background: var(--clr-surface-full);
  border-left: 1px solid var(--clr-border-light);
  transition: background 0.2s;
}

.pix-about__card:first-child { border-left: none; }
.pix-about__card:hover { background: var(--clr-hover-bg-soft); }

.pix-about__card-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--clr-green-tint-badge);
  color: var(--color-green-forest);
  font-size: clamp(14px, 0.875rem + 0.6vw, 18px); /* R24.5 icon glyph */
  margin-bottom: 14px;
}

.pix-about__card-title {
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--color-black);
  margin-bottom: 8px;
}

.pix-about__card-desc {
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  line-height: 1.6;
  color: var(--clr-text-secondary);
}

/* Dark CTA card */
.pix-about__card--dark {
  background: linear-gradient(45deg, var(--color-black), var(--color-green-deep));
  border-left: none;
  grid-template-rows: 1fr auto;
  padding: 24px 20px;
}

.pix-about__card--dark:hover {
  background: linear-gradient(45deg, var(--color-black), var(--color-green-forest));
}

.pix-about__dark-text {
  font-family: var(--font-base);
  font-size: clamp(14px, 1rem + 0.6vw, 16px); /* Rule 24: 16 scale (was 20 — visual change) */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-white);
}

.pix-about__dark-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-top: 22px;
  border: 1px solid var(--clr-border-grey-50);
  border-radius: 50%;
  color: var(--color-white);
  font-size: clamp(15px, 0.9375rem + 0.6vw, 19px); /* R24.5 icon sizing */
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.pix-about__dark-btn:hover {
  background: var(--color-green-primary);
  border-color: var(--color-green-primary);
  transform: translateX(2px);
}

/* ── Video dialog ───────────────────────────────────────── */
.pix-about__dialog {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--clr-overlay-08);
}

.pix-about__dialog[hidden] { display: none; }

.pix-about__dialog-box {
  position: relative;
  width: min(520px, 100%);
  padding: 28px;
  border: 1px solid var(--clr-border-default);
  border-radius: 16px;
  background: var(--clr-surface-full);
  box-shadow: none;
  text-align: center;
}

.pix-about__dialog-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--clr-border-default);
  background: var(--clr-surface-full);
  font-size: clamp(14px, 0.875rem + 0.6vw, 18px); /* R24.5 icon sizing */
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--color-black);
}

.pix-about__dialog-title {
  font-family: var(--font-base);
  font-size: clamp(14px, 0.875rem + 0.4vw, 16px); /* Rule 24: 16 scale */
  font-weight: 700;
  color: var(--color-black);
}

.pix-about__dialog-sub {
  margin-top: 8px;
  font-family: var(--font-base);
  font-size: clamp(11px, 0.6875rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  color: var(--clr-text-secondary);
}

.pix-about--reveal .pix-about__stat,
.pix-about--reveal .pix-about__card {
  animation: pix-about-fade 0.5s ease both;
}

.pix-about--reveal .pix-about__stat:nth-child(2) { animation-delay: 0.06s; }
.pix-about--reveal .pix-about__stat:nth-child(3) { animation-delay: 0.12s; }
.pix-about--reveal .pix-about__stat:nth-child(4) { animation-delay: 0.18s; }

@keyframes pix-about-fade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE -> Rule-9 5-band mapping (max-width tuning preserved)
   ════════════════════════════════════════════════════════════ */

/* 1280px — Large tablet / small desktop */
@media (max-width: 1280px) {
  .pix-about { padding: 64px 16px 72px; }
  .pix-about__headline { font-size: clamp(30px, 3.2vw, 44px); }
  .pix-about__stats,
  .pix-about__cards-grid { margin: 0; }
  .pix-about__cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pix-about__card { border-top: 1px solid var(--clr-border-light); }
  .pix-about__card:nth-child(-n+3) { border-top: none; }
  .pix-about__card:nth-child(3n+1) { border-left: none; }
}

/* 1024px — Tablet landscape */
@media (max-width: 1024px) {
  .pix-about { padding: 56px 16px 64px; }
  .pix-about__hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .pix-about__headline { font-size: clamp(30px, 4.4vw, 42px); }
  .pix-about__desc { max-width: 100%; }
  .pix-about__media {
    grid-template-columns: minmax(0, 1fr) 110px;
  }
  .pix-about__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
  }
  .pix-about__stat:nth-child(3) { border-left: none; }
  .pix-about__stat:nth-child(n+3) { border-top: 1px solid var(--clr-border-light); }
  .pix-about__cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
  }
  .pix-about__card { border-top: 1px solid var(--clr-border-light); }
  .pix-about__card:nth-child(-n+2) { border-top: none; }
  .pix-about__card:nth-child(odd) { border-left: none; }
  .pix-about__card--dark { grid-column: span 2; grid-template-columns: 1fr auto; align-items: center; }
  .pix-about__dark-btn { margin-top: 0; }
}

/* 768px — Tablet portrait */
@media (max-width: 768px) {
  .pix-about { padding: 48px 0 0; }
  .pix-about__eyebrow { margin-bottom: 18px; }
  .pix-about__hero-grid { padding: 0; }
  .pix-about__headline { font-size: clamp(28px, 7vw, 38px); }
  .pix-about__media { grid-template-columns: minmax(0, 1fr) 104px; }
  .pix-about__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
  .pix-about__stat { padding: 16px 20px; }
  .pix-about__stat-no { font-size: clamp(22px, 6vw, 26px); } /* R24.5 numeral */
  .pix-about__cards-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0; }
  /* Story + CTA share one row (CTA right); caption breathing + right wash */
  .pix-about__story-row {
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    column-gap: 16px;
  }
  .pix-about__story { max-width: none; }
  .pix-about__cta { justify-self: end; }
  .pix-about__media-caption { margin: 8px 0; background: linear-gradient(to right, var(--clr-green-tint-badge), transparent); }
  /* Dark card sits beside Outcomes (neutralize 1024 full-row span) */
  .pix-about__card--dark { grid-column: auto; }
  .pix-about__intro { padding-bottom: 0; }
}

/* 640px — Large phone (Rule 9.2, was missing) */
@media (max-width: 640px) {
  .pix-about__hero-grid { gap: 32px; }
  .pix-about__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pix-about__cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pix-about__card:nth-child(odd) { border-left: none; }
}

/* 480px — Mobile: everything single-column except stats pairs */
@media (max-width: 480px) {
  .pix-about { padding: 40px 0 0; }
  .pix-about__eyebrow { margin-bottom: 16px; }
  .pix-about__eyebrow-text { font-size: clamp(10px, 0.625rem + 0.4vw, 12px); letter-spacing: 0.22em; } /* Rule 24 */
  .pix-about__headline { font-size: clamp(26px, 8.4vw, 32px); margin-bottom: 12px; }
  .pix-about__desc { font-size: 14px; }
  .pix-about__play { width: 38px; height: 38px; }
  .pix-about__media { grid-template-columns: minmax(0, 1fr); }
  .pix-about__media-caption {
    grid-template-columns: repeat(2, auto);
    align-content: center;
    justify-content: start;
    gap: 4px 10px;
    padding: 12px 16px;
  }
  .pix-about__media-caption span br { display: none; }
  .pix-about__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pix-about__stat { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; }
  .pix-about__stat-no { font-size: clamp(20px, 6vw, 24px); } /* R24.5 numeral */
  .pix-about__stat-label { font-size: clamp(10px, 0.625rem + 0.4vw, 12px); } /* Rule 24 */
  .pix-about__stat-label br { display: none; }
  .pix-about__cards-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pix-about__card { padding: 18px 14px 16px; }
  .pix-about__card-title { font-size: 12px; }
  .pix-about__card-desc { font-size: 12px; }
  .pix-about__dark-text { font-size: clamp(14px, 1rem + 0.6vw, 16px); } /* Rule 24 */
}

/* 360px — Small mobile: strict single column */
@media (max-width: 360px) {
  .pix-about { padding: 32px 0 0; }
  .pix-about__eyebrow-text { font-size: clamp(10px, 0.625rem + 0.3vw, 12px); letter-spacing: 0.18em; } /* Rule 24 */
  .pix-about__hero-grid { grid-template-columns: minmax(0, 1fr); }
  .pix-about__headline { font-size: 26px; }
  .pix-about__stats { grid-template-columns: minmax(0, 1fr); }
  .pix-about__stat {
    grid-template-columns: auto 1fr;
    border-left: none;
    border-top: 1px solid var(--clr-border-light);
  }
  .pix-about__stat:first-child { border-top: none; }
  .pix-about__stat:nth-child(3) { border-top: 1px solid var(--clr-border-light); }
  .pix-about__cards-grid { grid-template-columns: minmax(0, 1fr); }
  .pix-about__card { border-left: none; border-top: 1px solid var(--clr-border-light); }
  .pix-about__card:first-child { border-top: none; }
  .pix-about__card--dark { grid-column: auto; grid-template-columns: 1fr; }
  .pix-about__dark-btn { margin-top: 18px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pix-about *,
  .pix-about *::before,
  .pix-about *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   NOTE (Rule 8.4): 12. Insights starts below; 03–11 above. */
/* ========== 12. Insights ========== */
/* ============================================================
   PIXENTRA — Home 12. Insights
   (migrated from styles/components/insights.css — Rule 8.2)
   Font   : Inter via var(--font-base) (token in variables.css)
   Icons  : Boxicons (loaded globally)
   Scope  : All classes prefixed .ins-*
   Colours: variables.css tokens only — no hex, no rgba,
            no color-mix() in this file.
   Layout : pure CSS Grid skeleton (intro / feats / bar /
            cards). Flex is used only *inside*
            atoms (pills row, links, checklist), never for
            the section skeleton.
   Breakpoints : Rule-9 5 bands: Desktop ≥1440 base (shell full-bleed by
                   design, no 1680 cap) | Laptop 1024–1439: 1280+1024 tiers |
                   Tablet 768–1023: 768 tier | Mobile 361–767: 640+480 tiers |
                   Small ≤360: 360 tier.
   ============================================================ */

/* ── Scoped box-sizing reset ────────────────────────────── */


/* ── Root — same common section space as all sections ── */
.ins-section {
  width: 100%;
  background: none;
  font-family: var(--font-base);
  padding: 48px 16px 0;
}

/* ── Shell ──────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════
   INTRO — headline+copy | features
   ════════════════════════════════════════════════════════════ */
.ins-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: start;
  gap: 48px;
}

.ins-desc,
.faq-desc {
  margin: 12px 0 0;
  max-width: 100%;
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 400;
  line-height: 1.65;
  color: var(--clr-text-secondary);
}

/* Features — 3 columns with dividers */
.ins-feats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: 8px;
}

.ins-feat {
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: 0;
  padding: 0 24px;
  border-left: 1px solid var(--clr-border-light);
}

.ins-feat:first-child {
  padding-left: 0;
  border-left: none;
}

.ins-feat__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--clr-green-tint-badge);
  color: var(--color-green-forest);
  font-size: clamp(18px, 1.125rem + 0.8vw, 24px); /* R24.5 icon glyph */
  margin-bottom: 14px;
}

.ins-feat__title {
  font-family: var(--font-base);
  font-size: clamp(14px, 0.875rem + 0.4vw, 16px); /* Rule 24: 16 scale */
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-black);
  margin-bottom: 6px;
}

.ins-feat__desc {
  font-family: var(--font-base);
  font-size: clamp(11px, 0.6875rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  line-height: 1.55;
  color: var(--clr-text-secondary);
}

/* ════════════════════════════════════════════════════════════
   FILTER BAR — dropdown | arrows + CTA in a strip
   ════════════════════════════════════════════════════════════ */
.ins-bar {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
}

.ins-filters {
  position: relative;
  min-width: 0;
  max-width: 280px;
}

.ins-select {
  width: 100%;
  height: 44px;
  padding: 0 44px 0 42px;
  border: 1px solid var(--clr-border-default);
  border-radius: 999px;
  background: var(--clr-surface-full);
  font-family: var(--font-base);
  font-size: clamp(11px, 0.6875rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 600;
  color: var(--clr-text-body);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.ins-select.is-active {
  border-color: var(--color-green-primary);
  color: var(--color-green-forest);
}

.ins-filters__lead {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  font-size: clamp(14px, 0.875rem + 0.6vw, 18px); /* R24.5 icon glyph */
  color: var(--color-green-forest);
  pointer-events: none;
}

.ins-filters__arrow {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-size: clamp(16px, 1rem + 0.8vw, 20px); /* R24.5 icon glyph */
  color: var(--clr-text-secondary);
  pointer-events: none;
}

.ins-controls {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 10px;
}

.ins-nav {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--clr-border-default);
  border-radius: 50%;
  background: var(--clr-surface-full);
  color: var(--clr-text-body);
  font-size: clamp(16px, 1rem + 0.8vw, 20px); /* R24.5 icon sizing */
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.ins-nav:hover {
  border-color: var(--color-green-primary);
  background: var(--clr-green-tint-badge);
  color: var(--color-green-forest);
}

.ins-viewall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--color-black);
  font-family: var(--font-base);
  font-size: clamp(11px, 0.6875rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-white);
  transition: background 0.2s;
}

.ins-viewall i {
  font-size: clamp(14px, 0.875rem + 0.6vw, 18px); /* R24.5 icon glyph */
  transform: rotate(-45deg);
}

.ins-viewall:hover { background: var(--color-green-deep); }

/* ════════════════════════════════════════════════════════════
   CARDS — 3 columns
   ════════════════════════════════════════════════════════════ */
.ins-cards {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.ins-card {
  grid-column: span 3;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  align-content: start;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--clr-border-light);
  border-radius: 28px;
  background: var(--clr-surface-full);
  box-shadow: none;
  transition: border-color 0.2s;
}

.ins-card:hover { border-color: var(--clr-green-border); }
.ins-card[hidden] { display: none; }

/* Top row — category | read time */
.ins-card__top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.ins-card__cat {
  justify-self: start;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-green-forest);
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-white);
}

.ins-card__time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--clr-border-default);
  border-radius: 999px;
  background: var(--clr-surface-full);
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 600;
  white-space: nowrap;
  color: var(--clr-text-body);
}

.ins-card__time i { font-size: clamp(12px, 0.75rem + 0.6vw, 16px); } /* R24.5 icon glyph */

.ins-card__title {
  font-family: var(--font-base);
  font-size: clamp(14px, 0.875rem + 0.6vw, 16px); /* Rule 24: 16 scale */
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-black);
  margin-bottom: 8px;
}

.ins-card__desc {
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  line-height: 1.6;
  color: var(--clr-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ins-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 16px;
  margin-top: 12px;
  background: var(--clr-hover-bg-soft);
}

.ins-card__img,
.cta-side__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Read CTA below image */
.ins-card__foot {
  margin-top: 12px;
}

.ins-card__link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-decoration: none;
}

.ins-card__link-pill {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--clr-green-border);
  border-radius: 999px;
  background: var(--clr-surface-full);
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-black);
  transition: border-color 0.2s, background 0.2s;
}

.ins-card__link-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: linear-gradient(45deg, var(--color-green-parrot), var(--color-green-forest));
  color: var(--color-white);
  font-size: clamp(15px, 0.9375rem + 0.6vw, 19px); /* R24.5 icon sizing */
  transition: background 0.2s, transform 0.2s;
}

.ins-card__link:hover .ins-card__link-pill {
  border-color: var(--color-green-primary);
  background: var(--clr-green-tint-badge);
}

.ins-card__link:hover .ins-card__link-icon {
  background: var(--color-green-forest);
}

.ins-empty {
  margin-top: 24px;
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  text-align: center;
  color: var(--clr-text-secondary);
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE -> Rule-9 5-band mapping (max-width tuning preserved)
   ════════════════════════════════════════════════════════════ */

/* 1280px — Large tablet / small desktop */
@media (max-width: 1280px) {
  .ins-section { padding: 64px 16px 72px; }
  .ins-headline { font-size: clamp(30px, 3.2vw, 44px); }
  .ins-intro { gap: 32px; }
}

/* 1024px — Tablet landscape */
@media (max-width: 1024px) {
  .ins-section { padding: 56px 16px 64px; }
  .ins-intro { grid-template-columns: minmax(0, 1fr); }
  .ins-headline { font-size: clamp(30px, 4.4vw, 42px); }
  .ins-bar { grid-template-columns: minmax(0, 1fr); }
  .ins-controls { grid-template-columns: auto auto 1fr; }
  .ins-viewall { justify-self: end; }
  .ins-cards { gap: 20px; }
  .ins-card { grid-column: span 6; }
}

/* 768px — Tablet portrait */
@media (max-width: 768px) {
  .ins-section { padding: 48px 0 0; }
  .ins-eyebrow { margin-bottom: 18px; }
  .ins-headline { font-size: clamp(28px, 7vw, 38px); }
  .ins-eyebrow__text { letter-spacing: 0.10em; }
  .ins-intro { gap: 20px; }
  .ins-feats { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ins-feat { padding: 0; border-left: none; border-top: 1px solid var(--clr-border-light); padding-top: 18px; }
  .ins-feat:first-child { border-top: none; padding-top: 0; }
  .ins-card { grid-column: span 12; }
}

/* 640px — Large phone (Rule 9.2, was missing) */
@media (max-width: 640px) {
  .ins-intro { gap: 32px; }
  .ins-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .ins-feat { padding: 8px 16px 0; } /* divider breathing room */
  .ins-feat:first-child { padding-left: 0; }
  .ins-cards { gap: 20px; }
  .ins-card { grid-column: span 12; }
}

/* 480px — Mobile */
@media (max-width: 480px) {
  .ins-section { padding: 40px 0 0; }
  .ins-eyebrow { margin-bottom: 16px; }
  .ins-eyebrow-text { font-size: 12px; letter-spacing: 0.22em; }
  .ins-headline { font-size: clamp(26px, 8.4vw, 32px); }
  .ins-desc { font-size: clamp(12px, 0.75rem + 0.5vw, 14px); } /* Rule 24 */
  .ins-select { height: 40px; font-size: 12px; }
  .ins-nav { width: 40px; height: 40px; }
  .ins-viewall { height: 40px; padding: 0 18px; font-size: clamp(10px, 0.625rem + 0.4vw, 12px); } /* Rule 24 */
  .ins-card { padding: 16px; }
}

/* 360px — Small mobile */
@media (max-width: 360px) {
  .ins-section { padding: 32px 0 0; }
  .ins-eyebrow-text { font-size: clamp(10px, 0.625rem + 0.3vw, 12px); letter-spacing: 0.18em; } /* Rule 24 */
  .ins-headline { font-size: 26px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ins-section *,
  .ins-section *::before,
  .ins-section *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   NOTE (Rule 8.4): 13. FAQ starts below; 03–12 above. */
/* ========== 13. FAQ ========== */
/* ============================================================
   PIXENTRA — Home 13. FAQ
   (migrated from styles/components/faq.css — Rule 8.2)
   Font   : Inter via var(--font-base) (token in variables.css)
   Icons  : Boxicons (loaded globally)
   Scope  : All classes prefixed .faq-*
   Colours: variables.css tokens only — no hex, no rgba,
            no color-mix() in this file.
   Layout : pure CSS Grid skeleton (grid / minis / stats /
            cats / list / cta). Flex is used only *inside*
            atoms (checks row, pills wrap), never for the
            section skeleton.
   Breakpoints : Rule-9 5 bands: Desktop ≥1440 base (shell full-bleed by
                   design, no 1680 cap) | Laptop 1024–1439: 1280+1024 tiers |
                   Tablet 768–1023: 768 tier | Mobile 361–767: 640+480 tiers |
                   Small ≤360: 360 tier.
   ============================================================ */

/* ── Scoped box-sizing reset ────────────────────────────── */


/* ── Root — same common section space as all sections ── */
.faq-section {
  width: 100%;
  background: none;
  font-family: var(--font-base);
  padding: 48px 16px 0;
}

/* ── Shell ──────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════
   MAIN GRID — intro | panel
   ════════════════════════════════════════════════════════════ */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: 48px;
}

/* ── Intro ──────────────────────────────────────────────── */


/* Minis — 2 columns */
.faq-minis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 20px;
  margin-top: 28px;
}

.faq-mini {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
}

.faq-mini__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--clr-green-tint-badge);
  color: var(--color-green-forest);
  font-size: clamp(18px, 1.125rem + 0.8vw, 22px); /* R24.5 icon glyph */
}

.faq-mini__sub {
  margin-top: 2px;
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  line-height: 1.45;
  color: var(--clr-text-secondary);
}

/* Stats — 3 columns with dividers */
.faq-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--clr-border-light);
}

.faq-stat {
  display: grid;
  gap: 2px;
  padding: 0 20px;
  border-left: 1px solid var(--clr-border-light);
}

.faq-stat:first-child {
  padding-left: 0;
  border-left: none;
}

.faq-stat__no {
  font-family: var(--font-base);
  font-size: clamp(22px, 2vw, 28px); /* display numeral, desktop unchanged */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-green-forest);
}

/* ════════════════════════════════════════════════════════════
   PANEL — tinted accordion card
   ════════════════════════════════════════════════════════════ */
.faq-panel {
  padding: 0;
  border-radius: 0;
  background: none;
}

/* Accordion list */
.faq-list {
  display: grid;
  gap: 12px;
}

.faq-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.faq-item[hidden] { display: none; }

.faq-item__main {
  overflow: hidden;
  min-width: 0;
  border: none;
  border-radius: 48px;
  background: linear-gradient(to right, transparent, var(--clr-faq-wash));
}

.faq-item.is-open .faq-item__main {
  background: none;
  border-radius: 14px;
}

.faq-q {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  padding: 2px 14px 2px 16px;
  font-family: var(--font-base);
}

.faq-q__no {
  min-width: 44px;
  font-family: var(--font-base);
  font-size: clamp(26px, 3vw, 32px); /* R24.5 watermark numeral */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  background: var(--gradient-brand-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.5;
}

.faq-q__text {
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-black);
}

.faq-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  margin-top: 0;
  border: 1px solid var(--clr-border-default);
  border-radius: 50%;
  background: var(--clr-surface-full);
  font-size: clamp(16px, 1rem + 0.8vw, 20px); /* R24.5 icon sizing */
  color: var(--clr-text-body);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.faq-toggle i { transition: transform 0.28s ease; }

.faq-item.is-open .faq-toggle {
  border-color: var(--color-green-forest);
  background: var(--color-green-forest);
  color: var(--color-white);
}

.faq-item.is-open .faq-toggle i { transform: rotate(180deg); }

/* Answer — animated grid-rows collapse */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}

.faq-item.is-open .faq-a { grid-template-rows: 1fr; }

.faq-a > p {
  overflow: hidden;
  min-height: 0;
  margin: 0 12px;
  padding: 0 16px;
  max-height: 0;
  border-radius: 10px;
  background: transparent;
  font-family: var(--font-base);
  font-size: clamp(11px, 0.6875rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  line-height: 1.65;
  color: var(--clr-text-secondary);
  transition: margin 0.28s ease, padding 0.28s ease, max-height 0.28s ease, background 0.28s ease;
}

.faq-item.is-open .faq-a > p {
  position: relative;
  margin-top: 8px;
  margin-bottom: 0;
  padding: 14px 16px;
  max-height: 400px;
  border: none;
}

.faq-item.is-open .faq-a > p::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 1px;
  background: linear-gradient(to right, var(--clr-border-default), transparent);
  -webkit-mask: linear-gradient(var(--color-white) 0 0) content-box, linear-gradient(var(--color-white) 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(var(--color-white) 0 0) content-box, linear-gradient(var(--color-white) 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE -> Rule-9 5-band mapping (max-width tuning preserved)
   ════════════════════════════════════════════════════════════ */

/* 1280px — Large tablet / small desktop */
@media (max-width: 1280px) {
  .faq-section { padding: 64px 16px 72px; }
  .faq-headline { font-size: clamp(30px, 3.2vw, 44px); }
  .faq-grid { gap: 32px; }
}

/* 1024px — Tablet landscape */
@media (max-width: 1024px) {
  .faq-section { padding: 56px 16px 64px; }
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-intro,
  .faq-panel { grid-column: auto; }
  .faq-headline { font-size: clamp(30px, 4.4vw, 42px); }
}

/* 768px — Tablet portrait */
@media (max-width: 768px) {
  .faq-section { padding: 48px 0 0; }
  .faq-q__text { font-size: 12px; }
  .faq-item.is-open .faq-a > p { margin: 0; }
  .faq-eyebrow { margin-bottom: 18px; }
  .faq-headline { font-size: clamp(28px, 7vw, 38px); }
}

/* 640px — Large phone (Rule 9.2, was missing) */
@media (max-width: 640px) {
  .faq-grid { gap: 32px; }
  .faq-minis { gap: 20px 16px; }
  .faq-q__text { font-size: 12px; }
}

/* 480px — Mobile */
@media (max-width: 480px) {
  .faq-section { padding: 40px 0 0; }
  .faq-eyebrow { margin-bottom: 16px; }
  .faq-eyebrow-text { font-size: 12px; letter-spacing: 0.22em; }
  .faq-headline { font-size: clamp(26px, 8.4vw, 32px); }
  .faq-minis { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .faq-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faq-stat { padding: 0 12px; }
  .faq-stat__no { font-size: clamp(20px, 6vw, 24px); } /* R24.5 numeral */
  .faq-q__text { font-size: 12px; }
}

/* 360px — Small mobile */
@media (max-width: 360px) {
  .faq-section { padding: 32px 0 0; }
  .faq-eyebrow-text { font-size: clamp(10px, 0.625rem + 0.3vw, 12px); letter-spacing: 0.18em; } /* Rule 24 */
  .faq-headline { font-size: 26px; }
  .faq-stats { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .faq-stat { padding: 0; border-left: none; border-top: 1px solid var(--clr-border-light); padding-top: 12px; }
  .faq-stat:first-child { border-top: none; padding-top: 0; }
  .faq-q { gap: 10px; padding: 12px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .faq-section *,
  .faq-section *::before,
  .faq-section *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   NOTE (Rule 8.4): 14. CTA starts below; 03–13 above. */
/* ========== 14. CTA ========== */
/* ============================================================
   PIXENTRA — Home 14. CTA
   (migrated from styles/components/cta.css — Rule 8.2)
   Font   : Inter via var(--font-base) (token in variables.css)
   Scope  : All classes prefixed .cta-*
   Colours: variables.css tokens only — no hex, no rgba,
            no color-mix() in this file.
   Layout : pure CSS Grid — 12-col shell grid
            (main span 10 + side span 2).
   Breakpoints : Rule-9 5 bands: Desktop ≥1440 base (shell full-bleed by
                   design, no 1680 cap) | Laptop 1024–1439: 1280+1024 tiers |
                   Tablet 768–1023: 768 tier | Mobile 361–767: 640+480 tiers |
                   Small ≤360: 360 tier.
   ============================================================ */

/* ── Scoped box-sizing reset ────────────────────────────── */


/* ── Root — same common section space as all sections ── */
.cta-section {
  width: 100%;
  background: none;
  font-family: var(--font-base);
  padding: 48px 16px 0;
}

/* ── Parent — 12-col grid ───────────────────────────── */
.cta-shell {
  background: none;
  padding-bottom: 32px;
  border-bottom: 2px solid var(--clr-border-default);
}

.cta-grid {
  display: grid;
  grid-template-columns: 9.5fr 2.5fr;
  align-items: stretch;
  gap: 32px;
}

/* 1st block — span 9, bottom aligned, gradient border */
.cta-main {
  align-self: end;
  position: relative;
  display: grid;
  align-content: end;
  padding: 28px;
  background: none;
  border-radius: 20px;
}

.cta-main::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(to bottom, transparent, var(--color-grey-light));
  -webkit-mask: linear-gradient(var(--color-white) 0 0) content-box, linear-gradient(var(--color-white) 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(var(--color-white) 0 0) content-box, linear-gradient(var(--color-white) 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.cta-kicker {
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--gradient-brand-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
  margin-bottom: 10px;
}

.cta-headline {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 800;
  font-size: clamp(30px, 3vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--color-black);
}

.cta-desc {
  margin: 12px 0 0;
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 500;
  line-height: 1.65;
  white-space: nowrap;
  color: var(--color-dark);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

/* Start a Project — same system as testimonial Start button */
.cta-start {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: transform 0.22s ease;
}

.cta-start__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: linear-gradient(45deg, var(--color-green-forest) 0%, var(--color-black) 40%);
  font-family: var(--font-base);
  font-size: clamp(11px, 0.6875rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-white);
}

/* Get Free Quote — matches Give Review ghost button */
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 28px;
  border: 2px solid var(--clr-green-forest-border);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-base);
  font-size: clamp(12px, 0.75rem + 0.5vw, 14px); /* Rule 24: 14 scale */
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-black);
  transition: border-color 0.2s, color 0.2s;
}

.cta-btn:hover {
  border-color: var(--color-green-primary);
  color: var(--color-green-primary);
}

.cta-points {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 16px;
}

.cta-points li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-base);
  font-size: clamp(10px, 0.625rem + 0.4vw, 12px); /* Rule 24: 12 scale */
  font-weight: 600;
  color: var(--clr-text-body);
}

.cta-points li span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  background: var(--clr-green-tint-badge);
  color: var(--color-green-forest);
  font-size: clamp(11px, 0.6875rem + 0.4vw, 13px); /* R24.5 icon sizing */
}

/* 2nd block — 3:4 image */
.cta-side {
  position: relative;
  aspect-ratio: 3 / 4;
  min-height: 0;
  background: none;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE -> Rule-9 5-band mapping (max-width tuning preserved)
   ════════════════════════════════════════════════════════════ */

/* 1280px — Large tablet / small desktop */
@media (max-width: 1280px) {
  .cta-section { padding: 64px 16px 72px; }
}

/* 1024px — Tablet landscape */
@media (max-width: 1024px) {
  .cta-section { padding: 56px 16px 64px; }
  .cta-grid { grid-template-columns: 7fr 5fr; gap: 32px; }
  .cta-headline { white-space: normal; }
  .cta-desc { white-space: normal; }
}

/* 768px — Tablet portrait */
@media (max-width: 768px) {
  .cta-section { padding: 48px 0 0; }
  .cta-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cta-side { aspect-ratio: 3 / 4; }
}

/* 640px — Large phone (Rule 9.2, was missing) */
@media (max-width: 640px) {
  .cta-grid { gap: 24px; }
  .cta-main { padding: 24px; }
  .cta-headline { font-size: clamp(26px, 6vw, 34px); }
}

/* 480px — Mobile */
@media (max-width: 480px) {
  .cta-section { padding: 40px 0 0; }
  .cta-headline { font-size: clamp(24px, 7.4vw, 30px); }
}

/* 360px — Small mobile */
@media (max-width: 360px) {
  .cta-section { padding: 32px 0 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cta-section *,
  .cta-section *::before,
  .cta-section *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   11b. RULE-9 COMPLIANCE — 5 mandatory breakpoints
   Base above = Desktop ≥1440. Bands below map legacy tuning:
     Laptop 1024–1439 ← BP1 1280 + BP2 1120 portions
     Tablet 768–1023  ← BP3 920 + BP4 768 portions
     Mobile 361–767   ← BP4 remainder + BP5 640 + Extra 480
     Small ≤360        ← below: iPhone SE / small Android
   Large-desktop guard centres ultra-wide (Rule 9.5).
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1920px) {
  .services-container,
  .services-grid {
    max-width: 1600px;
    margin-inline: auto;
  }
}

/* ── Small Mobile ≤360px (Rule 9.1) — iPhone SE, small Android ── */
@media (max-width: 360px) {
  .services-section { padding: 24px 0 0; }
  .services-intro__headline { font-size: clamp(20px, 6vw, 26px); }
  .services-intro__description { font-size: clamp(11px, 0.6875rem + 0.5vw, 12px); }
  .services-intro__microcopy span { letter-spacing: 0.10em; white-space: normal; }
  .services-cta-button { min-width: 0; width: 100%; height: 48px; }
  .service-card__caption-text { font-size: clamp(14px, 1rem + 1vw, 16px); } /* Rule 24: 16 scale (was 20 max) */
}


/* ─────────────────────────────────────────────────────────────
   12. REDUCED MOTION
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .services-section *,
  .services-section *::before,
  .services-section *::after {
    transition: none !important;
    animation: none !important;
  }
}