/*
 * Desktop calibration — Sou Pagu.
 * Every value below is read straight off the 1440 x 6693 Figma frame
 * ("Slide 16:9 - 2"). Sections are fixed-height canvases and each element is
 * pinned to its node's frame coordinates, so the page matches the artboard
 * 1:1 at >= 1440px. Narrower viewports keep the fluid rules above.
 *
 * Section bands (frame Y):
 *   hero 0 · match 1336 · principle 1827 · quality 2050 · band 2839
 *   community 2910 · band 3908 · about 3979 · band 4917 · stats 4988
 *   offer 5665 · band 6259 · footer 6330 · end 6693
 */
@media (min-width: 1440px) {
  .page-pagu {
    width: 1440px;
    min-width: 1440px;
  }

  /*
   * These blocks carry Figma's own line breaks, so they must never re-wrap:
   * the stand-in fonts are wider than Moisette/Agharti.
   */
  .pagu-hero h1,
  .pagu-hero p,
  .pagu-match h2,
  .pagu-match .body-copy,
  .match-grid strong,
  .match-needs,
  .match-result,
  .pagu-principle p,
  .quality-main h2,
  .quality-main p,
  .quality-card h3,
  .quality-card strong,
  .quality-card p,
  .community-copy h2,
  .community-copy p,
  .belonging h3,
  .benefit-grid article,
  .about-copy h2,
  .about-copy h3,
  .about-copy p,
  .pagu-stats h2,
  .pagu-stats > .container > p,
  .pagu-offer h2,
  .offer-card,
  .band p {
    white-space: nowrap;
  }

  /*
   * Figma pads three display lines with runs of literal spaces so the line
   * ends flush with the one above it. Justifying the last line reproduces
   * that at any font width, instead of hard-coding a gap that only holds
   * for one typeface.
   */
  .spaced-1,
  .spaced-2,
  .spaced-3 {
    display: block;
    white-space: normal;
    text-align: justify;
    text-align-last: justify;
  }

  .page-pagu .container {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .page-pagu .cta {
    min-width: 0;
    height: 55px;
    min-height: 0;
    padding: 0;
    border-radius: 84px;
    font-size: 20px;
    font-weight: 500;
    line-height: var(--lh-dm);
  }

  /* Rectangle 23/24 — the purple rules between sections. */
  .pagu-community-band,
  .pagu-data-band,
  .pagu-footer-band {
    height: 71px;
    min-height: 0;
    padding: 0;
  }

  .pagu-community-band p,
  .pagu-data-band p,
  .pagu-footer-band p {
    width: 1132px;
    font-size: 20px;
    line-height: var(--lh-dm);
  }

  /* ---------------------------------------------------------------- hero */

  .pagu-hero {
    position: relative;
    height: 1336px;
    padding: 0;
  }

  .pagu-logo {
    position: absolute;
    top: 61px;
    left: 577px;
    width: 286px;
    height: 140px;
    margin: 0;
  }

  .pagu-hero h1 {
    position: absolute;
    top: 252px;
    left: 386px;
    width: 669px;
    max-width: none;
    margin: 0;
    font-size: 64px;
    line-height: var(--lh-moisette);
  }

  .pagu-hero p {
    position: absolute;
    top: 442px;
    left: 486px;
    width: 469px;
    max-width: none;
    margin: 0;
    font-size: 20px;
    line-height: var(--lh-dm);
  }

  .pagu-hero p b {
    font-weight: 700;
  }

  .pagu-hero p i {
    font-style: italic;
    font-weight: 500;
  }

  .pagu-hero .pagu-cta {
    position: absolute;
    top: 556px;
    left: 495px;
    width: 450px;
  }

  .pagu-hero-image {
    position: absolute;
    top: 728px;
    left: 0;
    width: 1440px;
    height: 565px;
    margin: 0;
  }

  /* --------------------------------------------------------------- match */

  .pagu-match {
    position: relative;
    height: 491px;
    padding: 0;
  }

  .pagu-match h2 {
    position: absolute;
    top: 0;
    left: 401px;
    width: 654px;
    max-width: none;
    margin: 0;
    font-size: 48px;
    line-height: var(--lh-moisette);
  }

  .pagu-match > .container > p.body-copy {
    position: absolute;
    top: 145px;
    left: 541px;
    width: 374px;
    max-width: none;
    margin: 0;
    font-size: 20px;
    line-height: var(--lh-dm);
  }

  .match-grid {
    position: absolute;
    top: 231px;
    left: 546px;
    display: block;
    width: 364px;
    height: 113px;
    max-width: none;
    margin: 0;
  }

  .match-grid strong {
    position: absolute;
    top: 0;
    left: 0;
    width: 121px;
    font-size: 48px;
    line-height: var(--lh-agharti);
  }

  .match-grid .match-needs {
    position: absolute;
    top: 5px;
    left: 152px;
    width: 212px;
    font-size: 20px;
    line-height: var(--lh-dm);
  }

  .pagu-match > .container > p.match-result {
    position: absolute;
    top: 369px;
    left: 551px;
    width: 355px;
    height: 70px;
    max-width: none;
    margin: 0;
    padding: 0;
    font-size: 20px;
    line-height: var(--lh-moisette);
  }

  /* ----------------------------------------------------------- principle */

  .pagu-principle {
    height: 223px;
    min-height: 0;
    padding: 0;
    place-items: start;
    text-align: left;
  }

  .pagu-principle p {
    width: 495px;
    max-width: none;
    margin: 61px 0 0 473px;
    font-size: 48px;
    line-height: var(--lh-agharti);
  }

  /* ------------------------------------------------------------- quality */

  .pagu-quality {
    position: relative;
    height: 789px;
    padding: 0;
  }

  /* Star 3 / Star 4 — 512.8px, 7 points, inner scale 0.4, #B51854 at 60%. */
  .pagu-quality::before,
  .pagu-quality::after {
    width: 513px;
    transform-origin: 0 0;
  }

  .pagu-quality::before {
    top: 88px;
    left: -191px;
    transform: rotate(13.34deg);
  }

  .pagu-quality::after {
    top: 36px;
    right: auto;
    left: 1403px;
    transform: rotate(39.72deg);
  }

  .quality-main {
    position: absolute;
    top: 134px;
    left: 507px;
    width: 426px;
    max-width: none;
    margin: 0;
    grid-template-columns: 154px 244px;
    gap: 28px;
    align-items: start;
  }

  .quality-main h2 {
    font-size: 96px;
    line-height: var(--lh-agharti);
  }

  .quality-main p {
    padding-top: 1px;
    font-size: 20px;
    line-height: var(--lh-dm);
  }

  .pagu-quality .pagu-cta {
    position: absolute;
    top: 287px;
    left: 589px;
    width: 262px;
    margin: 0;
  }

  .quality-card {
    position: absolute;
    top: 392px;
    left: 365px;
    display: block;
    width: 710px;
    height: 247px;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .quality-card h3 {
    position: absolute;
    top: 25px;
    left: 56px;
    width: 591px;
    font-size: 40px;
    line-height: var(--lh-moisette);
  }

  .quality-card strong {
    position: absolute;
    top: 93px;
    left: 65px;
    width: 260px;
    font-size: 40px;
    line-height: var(--lh-agharti-wide);
  }

  .quality-card p {
    position: absolute;
    top: 104px;
    left: 377px;
    width: 270px;
    font-size: 16px;
    line-height: var(--lh-dm);
  }

  /* ----------------------------------------------------------- community */

  .pagu-community {
    position: relative;
    height: 998px;
    padding: 0;
  }

  .community-lead {
    position: absolute;
    inset: 0;
    display: block;
  }

  .community-copy h2 {
    position: absolute;
    top: 119px;
    left: 262px;
    width: 558px;
    margin: 0;
    font-size: 40px;
    line-height: var(--lh-moisette);
    text-align: left;
  }

  .community-copy p {
    position: absolute;
    left: 262px;
    width: 458px;
    max-width: none;
    margin: 0;
    font-size: 20px;
    line-height: var(--lh-dm);
  }

  .community-copy p:nth-of-type(1) {
    top: 252px;
  }

  .community-copy p:nth-of-type(2) {
    top: 358px;
  }

  .community-figure {
    position: absolute;
    top: 64px;
    left: 795px;
    width: 357px;
    height: 446px;
    min-height: 0;
    margin: 0;
    display: block;
  }

  /* Ellipse 9 */
  .community-figure::before {
    top: 1px;
    left: 112px;
    width: 234px;
    height: 234px;
    aspect-ratio: auto;
  }

  .community-figure img {
    position: absolute;
    top: 0;
    left: 0;
    width: 357px;
    height: 446px;
    object-fit: cover;
  }

  .belonging {
    position: absolute;
    top: 555px;
    left: 0;
    width: 1440px;
    height: 443px;
    margin: 0;
    padding: 0;
    border: 0;
  }

  /* Rectangle 24 — a 19px tall outlined bar, not a hairline. */
  .belonging::before {
    content: "";
    position: absolute;
    top: 0;
    left: -9px;
    width: 1454px;
    height: 19px;
    border: 3px solid var(--charcoal);
  }

  .belonging h3 {
    position: absolute;
    top: 103px;
    left: 419px;
    width: 602px;
    margin: 0;
    font-size: 24px;
    line-height: var(--lh-moisette);
  }

  .benefit-grid {
    position: absolute;
    top: 154px;
    left: 229px;
    display: block;
    width: 982px;
    height: 82px;
    font-size: 16px;
  }

  .benefit-grid article,
  .benefit-grid article + article {
    position: absolute;
    top: 14px;
    padding: 0;
    border: 0;
  }

  .benefit-grid article:nth-child(1) {
    top: 0;
    left: 0;
    width: 153px;
  }

  .benefit-grid article:nth-child(2) {
    left: 185px;
    width: 150px;
  }

  .benefit-grid article:nth-child(3) {
    left: 374px;
    width: 184px;
  }

  .benefit-grid article:nth-child(4) {
    left: 605px;
    width: 172px;
  }

  .benefit-grid article:nth-child(5) {
    left: 824px;
    width: 158px;
  }

  /* Line 1 / Line 2 / Line 3 */
  .benefit-grid article:nth-child(3)::before,
  .benefit-grid article:nth-child(4)::before,
  .benefit-grid article:nth-child(5)::before {
    content: "";
    position: absolute;
    top: -7px;
    height: 71px;
    border-left: 1px solid #000;
  }

  .benefit-grid article:nth-child(3)::before {
    left: -22px;
  }

  .benefit-grid article:nth-child(4)::before {
    left: -26px;
  }

  .benefit-grid article:nth-child(5)::before {
    left: -25px;
  }

  .benefit-grid strong {
    font-size: 32px;
  }

  .belonging .pagu-cta {
    position: absolute;
    top: 300px;
    left: 477px;
    width: 487px;
    margin: 0;
  }

  /* --------------------------------------------------------------- about */

  .pagu-about {
    position: relative;
    height: 938px;
    padding: 0;
  }

  .pagu-about .about-grid {
    position: absolute;
    top: 118px;
    left: 251px;
    display: block;
    width: 938px;
    height: 700px;
    max-width: none;
    margin: 0;
  }

  .about-grid > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 394px;
    height: 700px;
    object-fit: cover;
  }

  .about-copy h2 {
    position: absolute;
    top: 15px;
    left: 425px;
    width: 376px;
    margin: 0;
    font-size: 53px;
    line-height: var(--lh-agharti);
  }

  .about-copy h3 {
    position: absolute;
    left: 425px;
    width: 416px;
    margin: 0;
    font-size: 32px;
    line-height: var(--lh-agharti-wide);
  }

  .about-copy h3:nth-of-type(1) {
    top: 90px;
  }

  .about-copy h3:nth-of-type(2) {
    top: 452px;
  }

  .about-copy p {
    position: absolute;
    left: 425px;
    width: 513px;
    margin: 0;
    font-size: 20px;
    line-height: var(--lh-dm);
  }

  .about-copy p:nth-of-type(1) {
    top: 202px;
  }

  .about-copy p:nth-of-type(2) {
    top: 522px;
  }

  /* --------------------------------------------------------------- stats */

  /* Rectangle 25: #A25ED3 at 16% over the cream page. */
  .pagu-stats {
    position: relative;
    height: 677px;
    padding: 0;
    background: #e5d7e0;
  }

  .pagu-stats h2 {
    position: absolute;
    top: 26px;
    left: 275px;
    width: 891px;
    margin: 0;
    font-size: 64px;
    line-height: var(--lh-agharti-wide);
  }

  .stat-grid {
    position: absolute;
    top: 188px;
    left: 214px;
    display: block;
    width: 1012px;
    height: 331px;
    margin: 0;
  }

  .stat-card {
    position: absolute;
    display: block;
    width: 322px;
    height: 152px;
    min-height: 0;
    padding: 0;
    transform: none;
  }

  .stat-card:nth-child(1) { top: 1px; left: 0; transform: none; }
  .stat-card:nth-child(2) { top: 0; left: 345px; transform: none; }
  .stat-card:nth-child(3) { top: 0; left: 690px; transform: none; }
  .stat-card:nth-child(4) { top: 179px; left: 172px; transform: none; }
  .stat-card:nth-child(5) { top: 179px; left: 518px; transform: none; }

  .stat-card img,
  .stat-card div {
    position: absolute;
  }

  .stat-card img {
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .stat-card:nth-child(1) img { top: 25px; left: 21px; width: 115px; height: 115px; }
  .stat-card:nth-child(2) img { top: 13px; left: 20px; width: 129px; height: 129px; }
  .stat-card:nth-child(3) img { top: 46px; left: 33px; width: 72px; height: 72px; }
  .stat-card:nth-child(4) img { top: 37px; left: 21px; width: 77px; height: 77px; }
  .stat-card:nth-child(5) img { top: 24px; left: 6px; width: 103px; height: 103px; }

  .stat-card:nth-child(1) div { top: 25px; left: 146px; width: 154px; }
  .stat-card:nth-child(2) div { top: 10px; left: 146px; width: 154px; }
  .stat-card:nth-child(3) div { top: 39px; left: 123px; width: 180px; }
  .stat-card:nth-child(4) div { top: 39px; left: 109px; width: 213px; }
  .stat-card:nth-child(5) div { top: 39px; left: 109px; width: 213px; }

  .stat-card strong {
    font-size: 64px;
  }

  .stat-card:nth-child(n + 3) strong {
    font-size: 40px;
  }

  .stat-card span {
    margin: 0;
    font-size: 24px;
  }

  .stat-card:nth-child(n + 4) span {
    font-size: 20px;
  }

  .pagu-stats > .container > p {
    position: absolute;
    top: 570px;
    left: 438px;
    width: 565px;
    max-width: none;
    margin: 0;
    font-size: 20px;
    line-height: var(--lh-dm);
  }

  /* --------------------------------------------------------------- offer */

  .pagu-offer {
    position: relative;
    height: 594px;
    padding: 0;
  }

  .pagu-offer h2 {
    position: absolute;
    top: 42px;
    left: 379px;
    width: 683px;
    max-width: none;
    margin: 0;
    font-size: 53px;
    line-height: var(--lh-agharti);
  }

  .offer-card {
    position: absolute;
    top: 198px;
    left: 394px;
    width: 653px;
    height: 315px;
    max-width: none;
    margin: 0;
    padding: 34px 136px 0;
    font-size: 20px;
    line-height: var(--lh-dm);
  }

  .offer-card h3 {
    font-size: 32px;
  }

  .pagu-offer .pagu-cta {
    position: absolute;
    top: 425px;
    left: 527px;
    width: 386px;
    margin: 0;
  }

  /* BOCA 3 / BOCA 4 — the two mouth cut-outs, matrices straight from Figma. */
  .pagu-offer::before,
  .pagu-offer::after {
    top: 0;
    bottom: auto;
    width: 419px;
    height: 415px;
    transform-origin: 0 0;
  }

  .pagu-offer::before {
    left: 350.5px;
    transform: matrix(-0.9619, -0.2733, -0.2733, 0.9619, 0, 33.5);
  }

  .pagu-offer::after {
    right: auto;
    left: 1062px;
    transform: matrix(0.9619, -0.2733, 0.2733, 0.9619, 0, 242.5);
  }

  /* -------------------------------------------------------------- footer */

  .pagu-footer {
    height: 363px;
    padding: 174px 0 0;
  }

  .pagu-footer p {
    width: 565px;
    margin-inline: auto;
    font-size: 20px;
    line-height: var(--lh-dm);
  }
}

/*
 * Wide screens
 * Keep the 1440px Figma canvas centered, while full-bleed photography and
 * section backgrounds continue to the physical edges of larger monitors.
 */
@media (min-width: 1441px) {
  body {
    overflow-x: hidden;
  }

  .site {
    overflow: visible;
  }

  .pagu-hero-image {
    left: 50%;
    width: 100vw;
    max-width: none;
    transform: translateX(-50%);
    object-fit: cover;
    object-position: center 53%;
  }

  .pagu-principle,
  .pagu-community-band,
  .pagu-data-band,
  .pagu-footer-band {
    box-shadow: 0 0 0 100vmax var(--purple);
    clip-path: inset(0 -100vmax);
  }

  .pagu-stats {
    box-shadow: 0 0 0 100vmax #e5d7e0;
    clip-path: inset(0 -100vmax);
  }

  .belonging::before {
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
  }
}