/* PAAK v3 — mobile placement fixes (2026-08-14).
   Loaded last, phone-only. Each rule exists because the desktop-tuned choreography
   left a measured hole at 390x844; nothing here touches >=768px. */

/* ── The mobile placement system, measured off hugeinc.com at 390x844 ─────────
   (2026-08-14, TJ: "they have very good placements — each section holding its
   own ground without bleeding into the next".)

   What they actually do, from the live page, not from screenshots:
     · ONE 24px rail. Every chapter head, every body line, every card starts on
       it. Nothing is centred, nothing is inset differently.
     · ONE type ladder, and the top of it is BIG: chapter head 74px, card title
       56, section lede 32, statement 25, label 18. The chapter head owning the
       screen is what makes a section feel like its own ground.
     · A chapter gets its air ABOVE the head — a flat 176px top pad on most
       sections — and no section is pulled into the one before it. No negative
       margins, no scroll-linked overlaps anywhere on their phone layout.
     · Every section is a whole screen or a clean multiple of one.

   Ours had FIVE different left edges at 390 (8, 16, 20, 23, and two centred
   blocks) and chapter heads at 44-45px, so nothing lined up and no section read
   as a chapter. The three rules below fix exactly that. Sizes are ours, not
   theirs — our copy is longer, so the ladder is 64 / 45 / 25 / 18. */

@media (max-width: 767px) {
  /* 1 — ONE RAIL. .section carries the template's 2% (7.8px at 390), which is
     what put body copy 8px off the glass. 24px, and every other block below is
     brought onto the same line. */
  .section { padding-left: 24px; padding-right: 24px; }
  .navbar { padding-left: 24px; padding-right: 24px; }
  .hero-main { padding-left: 24px; padding-right: 24px; }
  .container.absolute._100 { padding-left: 24px; padding-right: 24px; }
  .pk-wwd { --pk-wwd-gutter: 24px; }
  /* the work card was 88vw centred — 23px in, one pixel off everything else.
     Full width inside the section's own rail instead. */
  .pk-works { --pk-work-w: 100%; }
  /* the footer is .footer, not .section — it kept the 2% on its own */
  .footer { padding-left: 24px; padding-right: 24px; }
  /* the About band sets its own 16px gutter and the copy under it aligns to the
     band edge, so moving the gutter moves both together */
  .pk-ad { --pk-ad-gut: 24px; }
  /* the process head sits in the template's .grid-title flex row, which centres
     its child — that is the last 3px keeping it off the rail */
  .content-effect._07 .grid-title { align-items: flex-start; text-align: left; }
  .pk-ps__head { width: 100%; }

  /* 2 — CHAPTER HEADS OWN THE SCREEN. 44/45px read as sub-heads; theirs is
     74px. 64 is our ceiling: "Website design & development" still breaks into
     readable lines at the card size below it. */
  .pk-wwd__eyebrow { font-size: 64px; line-height: 1; }
  .h2.fade.cnt,
  .pk-ps__heading { font-size: 64px !important; line-height: 1; }

  /* 3 — NOTHING CENTRED. "Our Work" and "Our Process" were centred over
     left-aligned content, which is the main reason those two sections read as
     floating rather than as chapters. */
  .h2.fade.cnt { text-align: left; }
  .pk-ps__head { align-items: flex-start; text-align: left; }
  .pk-ps__heading, .pk-ps__sub { text-align: left; }

  /* HERO — .hero-main held 600px while the wordmark block ends at ~260 and the
     bottom-anchored tagline (.container.absolute, inset bottom 40px) started at
     ~486: a 226px dead field in the middle of the first screen. 510px keeps the
     kiwi-on-wordmark lockup and pulls the tagline up to ~118px under it. */
  .hero-main { height: 510px; }

  /* The BRAND / WEBSITE / SEO/GEO / AI SYSTEMS row hugged the right edge
     (x 96..382 — 8px off the glass) while the tagline above sits on the left
     gutter. Left-align the row on the same rail and let it wrap if a longer
     label ever lands. */
  .container.absolute._100 .h2._01 { text-align: left; white-space: normal; }
  .container.absolute._100 [id^="w-node"] { margin-right: auto; }

  /* WORK LIST — works-v3.js already skips the 3D roll under 768; these make the
     resting state unconditional even if a resize races the init: cards flat,
     captions visible. */
  .pk-work__card { transform: none !important; }
  .pk-work__meta { opacity: 1 !important; transform: none !important; }
  .pk-work__meta .pk-work__tags { transform: none !important; }

  /* ABOUT DESK — the pinned band is only ~200px of a 100vh dark screen, so
     300vh of scrub reads as three screens of black. 220vh keeps the whole
     orbit + copy sequence (they resolve by 62% of travel) with a third less
     dead scrolling. */
  .section.photo.pk-ad { height: 220vh; }

  /* MEET PAAK — the hero->panel seam scrub is off on phones (guard in
     index.html), so the panel must ship in its resting pose: unscaled, in
     place, every word legible. These also cover a resize that races the
     inline script's own early return. */
  .content-effect._02 { transform: none !important; }
  /* The wrapper and panel were sized 100vh for the pinned hand-off; static,
     that tall box is just 300px of white between the hero and "Meet PAAK".
     Let the panel be as tall as its words. */
  .paak-reveal-wrap { height: auto; }
  /* an inline <style> pins this panel to min-height:100svh + centered flex for
     the pinned hand-off; selector matched (0-3-1) so it outguns a bare
     .section — static on phones it is just 300px of white air. */
  .content-effect._02, .content-effect._02 > section.section { height: auto; min-height: 0; }
  /* !important because the same inline <style> zeroes the padding and sits
     after this sheet in document order. */
  .content-effect._02 > section.section { padding-top: 72px !important; padding-bottom: 80px !important; }
  .content-effect._02 .gsap_split_word { opacity: 1 !important; filter: none !important; transform: none !important; }
  .content-effect._02 .h2._03 { opacity: 1 !important; transform: none !important; }

  /* WHAT WE DO — matched to Huge's own phone layout (measured off TJ's
     hugeinc.com screenshot at 390pt: gutter 21, title ~45/2 lines, 48px down to
     the plate, plate 348x197 (16:9), 27px to the statement at ~28px, 21px to the
     Explore button ~53 tall). Our plate already lands 350x197 — what read wrong
     was the TYPE: 30px titles and 17px statements under a full-width image, so
     the picture owned the block and the words looked like a caption. */
  .pk-wwd__cardtitle { font-size: clamp(38px, 11.5vw, 52px); line-height: 1.02; }
  /* the "What we do" chapter head is sized with the other chapter heads above,
     one ladder step ABOVE the four card titles — same as theirs (74 over 56). */
  .pk-wwd__lede { font-size: clamp(19px, 5.4vw, 24px); line-height: 1.2; }

  .pk-wwd__shot { margin-top: 48px; }
  .pk-wwd__copy { margin-top: 27px; }
  .pk-wwd__desc { font-size: clamp(24px, 7.2vw, 30px); line-height: 1.12; margin-bottom: 24px; }

  /* the Explore pill is deliberately NOT resized: buttons.css is the site's one
     button (44px / 15px on phones) and the reference's slightly taller button is
     not worth splitting that system for. */

  /* ONE CAPABILITY PER SCREEN — literally. A 104px gap between ~520px blocks
     still let the next title share the screen with the previous Explore button,
     so two services read at once. Giving every slide the full viewport and
     centring it in there means whatever is top-aligned owns the screen alone:
     the following title cannot start before 100svh, wherever the block sits.
     The gap goes to 0 because the empty half-screens ARE the gap now. */
  .pk-wwd__track { gap: 0; }
  .pk-wwd__slide { min-height: 100svh; align-content: center; }

  /* OUR PROCESS — 28px card headings and 17.6px body read undersized next to
     the 40px+ chapter heads every other section runs on a phone (TJ's Huge /
     Omnera references: the heading owns the screen). */
  .content-effect._07 .pk-ps__heading { font-size: 44px; }
  .pk-ps__title { font-size: 34px; line-height: 1.12; }
  .pk-ps__desc { font-size: 19px; line-height: 1.5; }
  .pk-ps__step { font-size: 13px; }

  /* The CTA row is bottom-anchored with margin-top:auto, which resolves to 0
     once the card stops being a fixed-height panel on phones — so the pill sat
     hard against the last line of the paragraph. Give it a real step. */
  .pk-ps__foot { margin-top: 36px; }

  /* "Book a Discovery Session" wears a nav-link class, so on a phone it lands
     as a squeezed 224px strip. Dress it as the same pill every other CTA on
     the page wears. */
  .content-effect._07 .nav-link.for-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 16px 28px;
    border-radius: 999px;
    font-size: 17px;
    line-height: 1;
  }
}

/* ── WHAT WE DO: every capability title holds two lines ───────────────────────
 *
 * Below 431px the four titles already wrap to two lines on their own. From
 * about 480px up to the 991px desktop switch they do not: the type is capped at
 * 56px while the column keeps widening, so the shorter titles ("Search & AI
 * visibility" is narrow — three of its letters are i/l/t) straighten out to one
 * line while "Website design & development" stays on two. The set then reads as
 * four different sizes of block instead of one rhythm.
 *
 * A measure cap fixes it without touching the type scale or hard-coding a <br>
 * per title. 13ch was measured, not guessed: at 768/860/960/991 every value
 * from 12ch to 14ch yields exactly two lines for all four, 11ch pushes the
 * longest title to three and 15ch lets the shortest snap back to one. 13ch is
 * the middle of that band, so a font-metric shift either way stays safe. */
@media (min-width: 481px) and (max-width: 991px) {
  .pk-wwd__cardtitle { max-width: 13ch; }
}