/* ===========================================================================
   Section 03 — "Focus on People, Not Paper" (node 1:248)
   Section: 1710 x 757.9. Inner text column 672px wide, offset within the
   1056px global container. All coords from Figma.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap');

.s03 {
  height: 757.9px;
  background: #ffffff;
}

/* Figma: inner Container at x=495 (global 327 + 168), heading/body align at +24,
   so text column begins at global-container left + 192px; section top pad 80px.
   Column width = 672px. */
.s03-inner {
  position: absolute;
  left: 192px;
  top: 80px;
  width: 672px;
}

/* Heading 2 (1:251) — Inter Medium 32/48, tracking -0.4 */
.s03-heading {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 48px;
  letter-spacing: -0.4px;
  color: #000000;
  white-space: nowrap;
}

/* Body (1:253) — Inter Italic 22/35.2, #222 @ 40% opacity.
   Body container sits 88px below heading top (48px heading frame + 40px gap). */
.s03-body {
  margin-top: 40px;
}

.s03-para {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 35.2px;
  color: rgba(34, 34, 34, 0.4);
}

.s03-para + .s03-para {
  margin-top: 35.2px;
}

/* Signature block (1:1825) — container margin at y=475.148 (rel. inner) */
.s03-sign {
  position: absolute;
  top: 475.148px;
  left: 0;
  width: 672px;
}

/* Image (1:1826) — 200 x 44.766, negative left -10, image top 48px */
.s03-sign-img {
  position: absolute;
  top: 48px;
  left: -10px;
  width: 200px;
  height: 44.766px;
}
.s03-sign-img img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Heading 3 caption (1:1831) — Caveat Regular 20/30, black; top 92.766px */
.s03-sign-name {
  position: absolute;
  top: 92.766px;
  left: 0;
  margin: 0;
  font-family: 'Caveat', cursive;
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: #000000;
  white-space: nowrap;
}

/* ===========================================================================
   Responsive — tablet/mobile. Desktop rules above stay untouched.
   Remove the fixed height, drop the absolute offset, center the text column,
   and let paragraphs wrap to the fluid container. Signature flows in-document.
   =========================================================================== */
@media (max-width: 1024px) {
  .s03 {
    height: auto;
    padding: 64px 0;
  }

  .s03-inner {
    position: static;
    left: auto;
    top: auto;
    margin: 0 auto;
    width: 100%;
    max-width: 720px;
  }

  .s03-body,
  .s03-para {
    width: 100%;
    max-width: 100%;
  }

  /* Signature: in normal flow, left-aligned, sitting below the body */
  .s03-sign {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: 40px;
  }

  .s03-sign-img {
    position: static;
    top: auto;
    left: 0;
    width: 200px;
    max-width: 100%;
    height: auto;
  }
  .s03-sign-img img {
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  .s03-sign-name {
    position: static;
    top: auto;
    left: auto;
    margin-top: 12px;
  }
}

@media (max-width: 600px) {
  .s03 {
    height: auto;
    padding: 48px 0;
  }

  .s03-inner {
    position: static;
    left: auto;
    top: auto;
    margin: 0 auto;
    width: 100%;
    max-width: 720px;
  }

  .s03-heading {
    font-size: 24px;
    line-height: 32px;
    white-space: normal;
  }

  .s03-body {
    margin-top: 28px;
    width: 100%;
    max-width: 100%;
  }

  .s03-para {
    width: 100%;
    max-width: 100%;
    font-size: 17px;
    line-height: 27px;
  }

  .s03-para + .s03-para {
    margin-top: 24px;
  }

  .s03-sign {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: 32px;
  }

  .s03-sign-img {
    position: static;
    top: auto;
    left: 0;
    width: 180px;
    max-width: 100%;
    height: auto;
  }
  .s03-sign-img img {
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  .s03-sign-name {
    position: static;
    top: auto;
    left: auto;
    margin-top: 10px;
  }
}