/* About Us: phones and tablets (up to 900px). Phone design, scaled up smoothly on tablets. */
.ab-mob { display: none; }

/* Hero heading: the same three rows on every screen, each row on one line, sized to the text column */
.about-hero__copy { container-type: inline-size; min-width: 0; }
.about-hero__title { white-space: normal !important; }
.about-hero__title .ab-hrow { display: block; white-space: nowrap; }
.about-hero__title .ab-hred { color: var(--red); }
.about-hero__title .ab-h5 { display: none; }
.about-hero__title { font-size: min(3.4rem, calc(100cqw / 16.56)) !important; }

@media (max-width: 900px) {
  .ab-desk { display: none !important; }
  .ab-mob { display: inline; }
  .ab-row { display: block; white-space: nowrap; }
  br.br-m, br.br-d, br.br-all, br.story-mbr, br.mv-mbr, br.diff-sbr, br.cta-sbr { display: none !important; }

  /* Spacing between sections */
  .about-hero, .story, .mv, .diff, .values { padding: calc(36px + (100vw - 320px) * 0.0276) 16px !important; }
  .cta { padding: calc(44px + (100vw - 320px) * 0.0276) 16px !important; }
  /* 32px from the header to the "About SkillParkho" eyebrow on phones and tablets (desktop keeps 48px) */
  .about-hero { min-height: 0 !important; padding-top: 23px !important; }

  /* Eyebrows and headings centred */
  .about-hero__copy, .story__head, .mv__head, .diff__head, .values__head, .cta__inner { text-align: center; }
  .about-hero__eyebrow, .story__eyebrow, .mv__eyebrow, .diff__eyebrow, .values__eyebrow, .cta__eyebrow { justify-content: center; margin-bottom: calc(12px + (100vw - 320px) * 0.0138) !important; }
  .about-hero__title, .story__title, .mv__title, .diff__title, .values__title, .cta__title { max-width: none !important; white-space: normal !important; text-wrap: initial; line-height: 1.12 !important; letter-spacing: -0.02em; }
  .about-hero__title { font-size: min(calc(36px + (100vw - 320px) * 0.04), calc(100cqw / 16.56)) !important; }
  .about-hero__title { line-height: 1.15 !important; }
  .story__title { font-size: min(calc(34px + (100vw - 320px) * 0.04), calc((100vw - 32px) / 9.03)) !important; }
  .mv__title { font-size: min(calc(34px + (100vw - 320px) * 0.04), calc((100vw - 32px) / 9.96)) !important; }
  .diff__title { font-size: min(calc(34px + (100vw - 320px) * 0.04), calc((100vw - 32px) / 11.19)) !important; }
  .diff__title .ab-row + .ab-row { font-size: 1.25em; line-height: 1.05; }
  .values__title { white-space: nowrap !important; font-size: min(calc(34px + (100vw - 320px) * 0.04), calc((100vw - 32px) / 8.74)) !important; }
  .cta__title { font-size: min(calc(36px + (100vw - 320px) * 0.04), calc((100vw - 32px) / 11.38)) !important; }
  .story__head, .mv__head, .diff__head, .values__head { margin-bottom: calc(18px + (100vw - 320px) * 0.0207) !important; }

  /* Sentences under headings */
  .about-hero__sub, .cta__sub { max-width: none !important; margin: calc(12px + (100vw - 320px) * 0.0069) auto 0 !important; white-space: normal !important; text-wrap: balance; letter-spacing: 0 !important; line-height: 1.5 !important; font-size: calc(14px + (100vw - 320px) * 0.0121) !important; }
  .about-hero__sub { text-align: left; text-wrap: pretty; }
  .diff__sub, .values__sub { white-space: nowrap !important; width: calc(100vw - 12px) !important; max-width: none !important; margin: calc(10px + (100vw - 320px) * 0.0069) 0 0 calc(50% - 50vw + 6px) !important; line-height: 1.4 !important; letter-spacing: 0 !important; font-size: min(calc(13px + (100vw - 320px) * 0.0219), calc((100vw - 12px) / 25.69)) !important; }
  .values__sub { font-size: min(calc(13px + (100vw - 320px) * 0.0219), calc((100vw - 12px) / 19.71)) !important; }

  /* Hero: buttons side by side, three paths as compact rows */
  .about-hero__grid { grid-template-columns: minmax(0, 1fr) !important; gap: calc(24px + (100vw - 320px) * 0.0207) !important; }
  .about-hero__cta { justify-content: center; flex-wrap: nowrap !important; gap: 10px !important; margin-top: calc(18px + (100vw - 320px) * 0.0138) !important; }
  .about-hero__cta .btn { flex: 1 1 0; width: auto !important; min-width: 0; white-space: nowrap; text-align: center; padding: calc(13px + (100vw - 320px) * 0.0069) 10px !important; font-size: calc(14px + (100vw - 320px) * 0.0086) !important; }
  .paths { gap: 10px !important; }
  .path { padding: calc(14px + (100vw - 320px) * 0.0138) !important; gap: 14px !important; }
  .path__ico { width: calc(40px + (100vw - 320px) * 0.0207) !important; height: calc(40px + (100vw - 320px) * 0.0207) !important; }
  .path__title { font-size: calc(16px + (100vw - 320px) * 0.0121) !important; }
  .path__desc { margin-top: 2px; white-space: nowrap; line-height: 1.4 !important; font-size: calc(13.5px + (100vw - 320px) * 0.0103) !important; }

  /* Our story: short paragraphs, quote stands out */
  .story__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; max-width: none !important; }
  .story__body p { max-width: none; line-height: 1.6 !important; font-size: calc(15px + (100vw - 320px) * 0.0121) !important; }
  .story__body p + p { margin-top: 14px !important; }
  .story__quote { margin-top: calc(20px + (100vw - 320px) * 0.0138) !important; padding: calc(16px + (100vw - 320px) * 0.0138) calc(16px + (100vw - 320px) * 0.0207) !important; }
  .story__quote p { line-height: 1.4 !important; font-size: calc(17px + (100vw - 320px) * 0.0172) !important; }

  /* Mission and vision: one card each, two side by side on tablets */
  .mv__cards { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; max-width: none !important; }
  .mv-card { padding: calc(18px + (100vw - 320px) * 0.0207) !important; }
  .mv-card__top { margin-bottom: 12px !important; gap: 12px !important; }
  .mv-card__ico { width: calc(40px + (100vw - 320px) * 0.0138) !important; height: calc(40px + (100vw - 320px) * 0.0138) !important; }
  .mv-card__text { line-height: 1.45 !important; font-size: calc(16px + (100vw - 320px) * 0.0138) !important; }

  /* What makes us different: 2 x 3 grid of compact cards, nothing slides or stacks */
  .diff { overflow: hidden !important; }
  .diff__grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; max-width: none !important; }
  .diff-card, .diff-card:nth-child(n) { position: relative !important; top: auto !important; margin: 0 !important; box-shadow: none !important; background: var(--panel) !important; padding: calc(16px + (100vw - 320px) * 0.0172) calc(12px + (100vw - 320px) * 0.0172) !important; border-radius: 14px !important; }
  .diff-card__num { margin-bottom: 8px !important; font-size: calc(12px + (100vw - 320px) * 0.0086) !important; }
  .diff-card__title { margin-bottom: 6px !important; line-height: 1.25 !important; text-wrap: balance; font-size: calc(15px + (100vw - 320px) * 0.0138) !important; }
  .diff-card__desc { line-height: 1.45 !important; font-size: calc(13px + (100vw - 320px) * 0.0103) !important; }

  /* Values */
  .value-row__title { font-size: calc(16px + (100vw - 320px) * 0.0121) !important; }
  .value-row__desc { line-height: 1.5 !important; font-size: calc(13.5px + (100vw - 320px) * 0.0103) !important; }
  .value-row:first-child .value-row__title { white-space: nowrap; font-size: min(calc(21px + (100vw - 320px) * 0.0172), calc((100vw - 130px) / 10.1)) !important; }
  .value-row:first-child .value-row__desc { font-size: calc(14.5px + (100vw - 320px) * 0.0121) !important; }
}

/* Phones: the hero heading in five short rows, as big and bold as the other section headings */
@media (max-width: 767px) {
  .about-hero__title { width: calc(100vw - 16px); max-width: none !important; margin-left: calc(50% - 50vw + 8px); letter-spacing: -0.03em !important; line-height: 1.15 !important; font-size: min(calc((100vw - 16px) / 16.1), 44px) !important; }
}

/* Tablets: two cards side by side where it reads better */
@media (min-width: 600px) and (max-width: 900px) {
  .mv__cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .diff__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .diff-card__title { font-size: calc(15px + (100vw - 600px) * 0.0167) !important; }
  .diff-card__desc { font-size: calc(13px + (100vw - 600px) * 0.0067) !important; }
  .about-hero__cta { max-width: 560px; margin-left: auto !important; margin-right: auto !important; }
  .paths { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .path { flex-direction: column; align-items: center !important; text-align: center; }
  .path__desc { white-space: normal; text-wrap: balance; }
}

/* Small laptops (901-1023px): same 48px header gap as desktop (this band had no rule and showed a ~230px gap) */
@media (min-width: 900.02px) and (max-width: 1023.98px) {
  .about-hero { min-height: 0 !important; padding-top: 40px !important; align-items: flex-start !important; }
  .about-hero__grid { align-items: start !important; }
}