/* GP V3 — MOBILE, 1:1 from Figma frame "V3 MOBILE" (375×3177).
   The stage becomes a 375px canvas zoom-fitted to the viewport
   (main.js), so every value below is an exact design pixel. */
@media (max-width: 760px) {

  /* ---------- 01 HERO (design y 3..502, card 369×499) ---------- */
  .s-hero { height: 505px; }
  .s-hero .hero-card {
    left: 3px; top: 3px;
    width: 369px; height: 499px;
    border-radius: 24px;
  }
  .s-hero .hero-sun-wrap { width: 560px; left: -87px; top: 30px; }
  .s-hero .hero-ripple { left: 184px; top: 250px; width: 340px; height: 300px; margin: -150px 0 0 -170px; }
  .s-hero .hero-flower { display: none; }  /* no flower outline on mobile (design call) */
  .s-hero .hero-brand { display: none; }
  .s-hero .hero-brand-stacked {
    position: absolute;
    left: 0; top: 195px;
    width: 375px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    line-height: 1;
    text-decoration: none;
    font-family: "GeneralSans";
    font-weight: 500;
    font-size: 36.2px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    text-indent: 0.12em; /* balance tracking */
  }
  .s-hero .hero-brand-stacked img { width: 30px; height: 33px; }

  /* ---------- 02 STATEMENT ---------- */
  /* partner card y505..589 + pills card y592..892 + plates y895..1087
     + identity y1082..1446; section spans 505..1438 => h 933 */
  .s-statement { height: 933px; }
  .s-statement .partner-card {
    left: 3px; top: 0;
    width: 369px; height: 84px;
    border-radius: 24px;
  }
  .s-statement .partner-copy {
    left: 18px; top: 22px;
    font-size: 20px;
    letter-spacing: -0.4px;
  }
  .s-statement .pink-card {
    left: 3px; top: 87px;   /* y592 */
    width: 369px; height: 300px;
    border-radius: 24px;
  }
  .s-statement .lead-line {
    left: 20px; top: 39px;   /* y631 rel 592 */
    width: 343px;
    font-size: 16px;
    line-height: 1.2;
    white-space: normal;
  }
  /* pills: stacked column (design x15, y690.3; pills ~33.5 tall) */
  .s-statement .pills-row { left: 15px; top: 98px; width: 166px; height: 175px; }
  .s-statement .pills-art { display: none; }
  .s-statement .pill-word {
    position: absolute;
    left: 0 !important;
    width: auto !important;
    height: 33.5px;
    padding: 0 22px;
    border: 1.2px solid #3f4618;
    border-radius: 999px;
    font-size: 20px;
  }
  .s-statement .pw-care { top: 0; }
  .s-statement .pw-intention { top: 40.7px; }
  .s-statement .pw-feeling { top: 81.5px; }
  .s-statement .pill-filled {
    left: 15px; top: 240px;   /* y832 rel 592 */
    width: 166px; height: 33.5px;
    border-radius: 999px;
  }
  .s-statement .pill-filled span { font-size: 20px; }
  /* plates row y895..1087 (369×192) */
  .s-statement .cat-block { left: 3px; top: 390px; width: 369px; height: 192px; }
  .s-statement .cat-plates { display: none; }
  .s-statement .cat-plate {
    background: var(--c-lav);
    border-radius: 16px;
    width: 119px; height: 192px;
  }
  .s-statement .plate-health { left: 0 !important; }
  .s-statement .plate-sex { left: 125px !important; }
  .s-statement .plate-beauty { left: 250px !important; }
  .s-statement .flower-pos {
    left: 50% !important; top: 28px;
    transform: translateX(-50%);
    height: 56px;
  }
  .s-statement .plate-health .flower-pos { width: 54.3px; height: 56px; top: 28px; }
  .s-statement .plate-sex .flower-pos { width: 58.3px; height: 56px; top: 28px; }
  .s-statement .plate-beauty .flower-pos { width: 60.8px; height: 56px; top: 28px; }
  .s-statement .cat-title {
    left: 50% !important;
    bottom: 18px;
    font-size: 15px;
  }
  /* identity card y1082..1446 (369×364) — overlaps plates by design 5px */
  .s-statement .identity-card {
    left: 3px; top: 585px;   /* measured: 1090 abs, 3px gap below plates */
    width: 369px; height: 345px;
    border-radius: 24px;
  }
  .s-statement .identity-copy { left: 38px; top: 50%; width: 292px; }
  .s-statement .identity-copy p { font-size: 16px; margin-bottom: 18px; }

  /* ---------- 03 FACE (y1438..1891, card 369×453) ---------- */
  .s-face { height: 456px; }  /* card 453 + 3px olive gap */
  .s-face__media { left: 3px; width: 369px; height: 453px; border-radius: 24px; }
  .s-face__quote { left: 24px; top: 27px; width: 286px; font-size: 16px; }
  .s-face__diagram { width: 375px; height: 453px; }
  .s-face__ring--outer   { left: 18px; top: 100px; width: 327px; height: 325px; }
  .s-face__ring--mid     { left: 44px; top: 172px; width: 200px; height: 161px; }
  .s-face__ring--bubbles { left: 60px; top: 206px; width: 181px; height: 91px; }
  .s-face__label { font-size: 10.5px; }
  .s-face__label--looking   { left: 70px;  top: 240px; }
  .s-face__label--satisfied { left: 155px; top: 240px; }
  .s-face__label--healthy   { left: 268px; top: 241px; }

  /* ---------- 04 PROJECTS (y1894..2386, 369×492) ---------- */
  .s-projects { height: 495px; }
  .s-projects .proj-bg { left: 3px; width: 369px; height: 492px; border-radius: 24px; }
  .s-projects .proj-strip {
    left: 3px; top: 62px;
    width: 369px; height: 380px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* the strip swipes — no scrollbar */
    -ms-overflow-style: none;
  }
  .s-projects .proj-strip::-webkit-scrollbar { display: none; }
  .s-projects .proj-track { gap: 12px; padding: 0 14px; }
  .s-projects .proj-card { width: 289px; height: 380px; border-radius: 14px; }
  .s-projects .proj-tag {
    position: absolute;
    left: 12px; top: 12px;
    padding: 7px 14px;
    background: #fff;
    border-radius: 999px;
    font-family: "Marund3222";
    font-size: 13px;
    text-transform: uppercase;
    color: #3f4618;
    white-space: nowrap;
  }
  /* glass overlays scale down with the card */
  .s-projects .glass-tag--1 { left: 14px; top: 190px; }
  .s-projects .glass-tag--2 { left: 120px; top: 136px; }
  .s-projects .glass-tag--3 { left: 130px; top: 238px; }
  .s-projects .glass-stat--a { left: 30px; top: 130px; transform: scale(0.85); transform-origin: top left; }
  .s-projects .glass-stat--b { left: 120px; top: 60px; transform: scale(0.85); transform-origin: top left; }

  /* ---------- 05 BAND + CTA (band y2389..2460, cta y2463..2898) ---------- */
  .s-cta { height: 512px; }  /* band+card + 3px gap before footer */
  .s-cta__band {
    left: 3px; top: 0;
    width: 369px; height: 71px;
    border-radius: 999px;
  }
  .s-cta__bandtext { max-width: 286px; font-size: 16px; }
  .s-cta__card {
    left: 3px; top: 74px;   /* y2463 */
    width: 369px; height: 435px;
    border-radius: 24px;
  }
  .s-cta__flower {
    left: 50%; top: 50%;
    width: 600px; height: 619px;  /* natural aspect 1297.98:1338.69 */
    margin: -310px 0 0 -300px;
  }
  .s-cta__headline {
    left: 50%; top: 161px;   /* measured from mobile frame */
    width: 280px;
    font-size: 39px;
  }
  .s-cta__buttons {
    left: 50%; top: 240px;
    width: 253px; height: 83px;
    transform: translateX(-50%);
  }
  .s-cta__btn-art { left: -5px; width: 264px; height: 83px; }
  .s-cta__btn { font-size: 18px; }
  .s-cta__btn--contact { left: 42px; top: 4px; width: 168px; height: 29px; }
  .s-cta__btn--pdf { left: -5px; top: 54px; width: 264px; height: 29px; }

  /* ---------- 06 FOOTER (y2901..3177, 369×273) ---------- */
  .s-footer { height: 276px; }
  .s-footer .footer-block { left: 3px; width: 369px; height: 273px; border-radius: 24px; }
  .s-footer .footer-mark { left: 18px; top: 17px; width: 341px; height: 30px; }
  .s-footer .footer-wordmark { left: 0; top: 3px; width: 341px; height: 23.5px; }
  .s-footer .footer-flower { left: 121px; top: 0; width: 29px; height: 31px; }
  .s-footer .footer-links { left: 16px; top: 176px; gap: 6px; }
  .s-footer .footer-link { font-size: 16.6px; }
  .s-footer .footer-hairline { left: 17px; top: 236px; width: 327px; }
  .s-footer .footer-copyright { left: 17px; top: 243px; font-size: 11.6px; }
}

/* ---------- mobile overlap + motion fixes ---------- */
@media (max-width: 760px) {
  /* plates keep their rounded corners above the identity card
     (design has a 5px underlap — card goes UNDER the plates) */
  .s-statement .cat-block { z-index: 2; }
  .s-statement .identity-card { z-index: 1; }

  /* the desktop section-video crops badly in a portrait box —
     mobile always uses the live-built section */
  .s-face.has-video .s-face__video { display: none; }
  .s-face.has-video .s-face__poster,
  .s-face.has-video .s-face__quote,
  .s-face.has-video .s-face__diagram { display: block; }
  .s-face.has-video .s-face__quote { display: block; }

  /* ...but the background still moves: a slow drifting breath */
  .s-face__poster {
    animation: gp-poster-drift 16s ease-in-out infinite alternate;
    will-change: transform;
  }
}

@keyframes gp-poster-drift {
  0%   { transform: scale(1.04) translate(0, 0); }
  50%  { transform: scale(1.09) translate(-8px, 5px); }
  100% { transform: scale(1.05) translate(7px, -6px); }
}