/* hero.small.css — 01 / Signal below 1024px
 *
 * Pairs with hero.css. Two bands, and the tablet one is deliberately tiny:
 *
 *   768-1024px   the desktop hero unchanged, on a shorter runway
 *   below 768px  the designed mobile hero, from
 *                the Hero section design plans (2) mobile handoff (MOBILE_SPEC §§1-6a)
 *
 * The banner and the two menus are chrome.small.css; Clients is
 * clients.small.css.
 *
 * The mobile block is not a set of tweaks on the desktop hero — it is the second
 * branch of the same markup.
 *
 * THE SCALING CONTRACT, MOBILE EDITION (MOBILE_SPEC §2)
 * The hero stays a size container and every length stays cqw/cqh — a vw includes
 * the scrollbar, so it is wider than the hero box. Only the basis changes:
 * desktop is a 1120 x 630 reference, mobile is 390 x 844, so a reference pixel is
 *
 *     min(px / 3.90 cqw, px / 8.44 cqh)
 *
 * The cqh term only exists to stop a landscape phone blowing the type up; on any
 * portrait phone the cqw term wins. Add new lengths by running that division,
 * never by eyeballing a value.
 *
 * WHAT IS CUT HERE (MOBILE_SPEC §5): the three stat figures, the motto plate and
 * its whole mirrored-knockout system, the desktop right-hand proof column, the
 * banner's centre sentence, both fog plates, cursor parallax, the banner dismiss
 * and the scramble-decode hovers. There is no hover on touch.
 */

/* --- tablet, 768 to 1024px -----------------------------------------------
   MOBILE_SPEC §1: the cq-based scaling contract holds all the way down to
   768px, so there is no tablet layout — only a shorter pin runway, because a
   2.1-viewport pin is tiring on a short screen. RUN in main.js reads the same
   band and must stay in step with this height. */

@media (min-width: 768px) and (max-width: 1024px) {
  /* 100vh pinned hero + 160vh scroll = RUN 1.6 */
  .runway { height: 260vh; }
}


/* --- mobile, below 768px -------------------------------------------------- */

@media (max-width: 767.98px) {

  /* --- the runway ---------------------------------------------------------
     RUN = 1.0 (desktop 2.1): the hero pins for exactly one screen of scroll,
     then releases. 100vh pinned + 100vh of scroll. RUN in main.js reads the same
     breakpoint and must stay in step with this height. */
  .runway { height: 200vh; }

  .hero {
    cursor: auto;

    /* --- contain-scale tokens: min(px/3.90 cqw, px/8.44 cqh) --------------- */
    --inset:      min(5.13cqw,  2.37cqh);   /*  20px — edge padding            */
    --pad-y:      min(4.60cqw,  2.13cqh);   /*  18px — top bar vertical pad    */
    --gap:        min(3.30cqw,  1.53cqh);   /*  12.9px — bottom stack gap      */
    --sq:         min(1.15cqw,  0.53cqh);   /*   4.5px — menu square           */
    --sq-gap:     min(0.70cqw,  0.33cqh);   /*   2.7px                         */
    --lang-gap:   min(1.50cqw,  0.71cqh);   /*   5.9px                         */
    --top-marker: min(17.90cqw, 8.30cqh);   /*  70px — the 01 / Signal line    */
    --marker-2:   min(22.01cqw, 10.20cqh);  /*  86px — the discipline line, one
                                                line-height + gap below it     */
    --top-col:    min(30.00cqw, 13.90cqh);  /* 117px — headline top            */
    --col-w:      min(72.00cqw, 33.30cqh);  /* 281px — bottom stack measure    */
    /* 86px off the bottom edge. HERO_SPEC.md §5 gives the bottom block
       `min(22cqw,10.2cqh)` of bottom padding — "clears the Clients section
       edge" — and this was 138px, so the stack floated about 52px high and left
       a gap between the proof line and the banner. Same figure as --marker-2
       above, which is not a coincidence: the spec reserves one clearance at the
       foot and both the discipline line and this stack sit on it. */
    --col-bottom: min(22.00cqw, 10.20cqh);  /*  86px — its distance off the
                                                bottom edge                    */
    --rule-w:     min(11.30cqw, 5.21cqh);   /*  44px — the red rule            */
    --wm-top:     min(30.00cqw, 13.90cqh);  /* 117px                           */
    --band-h:     min(46.00cqw, 21.30cqh);  /* 180px — vignette bottom band    */

    /* --- type -------------------------------------------------------------
       No caps here, unlike desktop: a phone never gets wide enough for the
       supporting type to outgrow the frame, so the plain contain scale holds. */
    --fs-brand:  min(2.56cqw, 1.18cqh);   /*   10px */
    --fs-hud:    min(2.56cqw, 1.18cqh);   /*   10px */
    --fs-marker: min(2.31cqw, 1.07cqh);   /*    9px */
    --fs-h1:     min(9.74cqw, 4.50cqh);   /*   38px */
    --fs-body:   min(3.46cqw, 1.60cqh);   /* 13.5px */
    --fs-wm:     min(19.00cqw, 8.80cqh);  /*   74px — shrunk from desktop so
                                              the word fits a 390px frame     */
  }


  /* =======================================================================
     Background — the fog plates are cut, the key light keeps a small lift
     ======================================================================= */

  /* Two canvas plates running a rAF each, for an effect that is invisible at
     this size. grain-fog.js skips any plate that is display:none. */
  .hero__plate--far,
  .hero__plate--near { display: none; }

  .hero__watermark {
    font-size: var(--fs-wm);
    filter: blur(2px);
    color: rgba(96, 112, 130, .16);
    animation: omIn 2000ms ease 480ms both;
  }


  /* =======================================================================
     Portrait — MOBILE_SPEC §6, DECIDED: head crop
     -----------------------------------------------------------------------
     The cutout is 1264 x 841 — a bust, not a full body — and his body centre
     sits at 72.75% of the file width. Head and shoulders own the upper two
     thirds and his body runs off the bottom edge, so there is NO ground shadow:
     the contact point is out of frame. That is why .figfx goes entirely.

     The entrance animation is on the img and the scroll fade is on .fig, so the
     two never fight over the same property.
     ======================================================================= */

  .figfx { display: none; }

  .fig {
    /* Below the vignette and the bar on mobile (desktop has it above both).
       MOBILE_SPEC §4: the bar must read as one flat #E6002A, so nothing sits
       between it and the eye except the black banner. */
    z-index: 4;
    overflow: hidden;
  }
  /* HERO_SPEC.md §5, verbatim: `bottom:-20cqh; height:110cqh; width:165.3cqh;
     left:calc(55cqw - 115.0cqh)`.

     These were 118cqh / 177.3cqh / 62cqw and pinned from the TOP, which made
     the crop tighter and pushed his head left into the headline — `SYSTEMS`,
     `THAT` and `SCALE.` all ran across his face. Pinning from the BOTTOM is
     what holds the head clear of the H1 on a short phone instead of sliding the
     whole figure down with the frame.

     115.0 = .6957 x 165.3, the spec's own horizontal centring on 55% width. */
  .fig img {
    top: auto;
    bottom: -20cqh;
    height: 110cqh;
    width: 165.3cqh;                 /* 110cqh x 1264/841 */
    left: calc(55cqw - 115.0cqh);
    animation: omFig 1500ms var(--ease-out) 80ms both;
  }


  /* =======================================================================
     Vignette — z-5, under the bar
     ======================================================================= */

  .vignette__top,
  .vignette__sheen { display: none; }
  .vignette__radial {
    background: radial-gradient(84% 74% at 44% 30%,
                rgba(18, 28, 40, 0) 42%, rgba(18, 28, 40, .13) 74%, rgba(18, 28, 40, .3) 100%);
  }
  .vignette__band {
    background: linear-gradient(180deg, rgba(24, 34, 46, 0) 0%, rgba(24, 34, 46, .16) 100%);
  }


  /* =======================================================================
     The red bar — MOBILE_SPEC §4
     -----------------------------------------------------------------------
     No cursor and no MENU dock on touch, so the bar loses two of its three
     states. What is left is a 2px hairline on the RIGHT edge that grows leftward
     until it owns the frame — hence transform-origin flips from 0 to 100%.
     main.js writes this transform and the knockout clip-path in the same frame.
     ======================================================================= */

  .bar {
    z-index: 6;                      /* above the vignette and the figure */
    transform-origin: 100% 50%;
    transform: scaleX(.005);
  }

  /* No hover, so nothing ever lights them. */
  .rail { display: none; }
  /* Empty on desktop too; on mobile the handoff has no reveal layer at all. */
  .revclip { display: none; }

  /* The motto plate is cut, and with it the whole mirrored-plate system. */
  .mottolayer,
  .motto--spacer { display: none; }


  /* =======================================================================
     Type layer — one column, MOBILE_SPEC §5
     -----------------------------------------------------------------------
     Top bar, then the two marker lines stacked (they do not fit side by side at
     390px), then the headline, then a bottom-anchored stack of rule / subhead /
     proof line.

     The bottom stack is the only part that leaves absolute positioning: .lift
     becomes a bottom-justified flex column so the subhead and the proof line —
     which live in different columns on desktop — stack in reading order without
     either of them needing a hard-coded height. Everything else stays absolute,
     exactly as the handoff positions it, which also keeps the knockout clone
     pixel-aligned with its source.
     ======================================================================= */

  .lift {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--gap);
    padding: 0 var(--inset) var(--col-bottom);
  }

  .topbar { padding: var(--pad-y) var(--inset); }
  .topbar__brand { letter-spacing: .2em; }
  .topbar__right { gap: min(4.4cqw, 2.03cqh); }

  /* Touch targets: the glyphs are 9-10px, the hit areas are not. */
  .lang { padding: min(2.1cqw, .95cqh) min(1.3cqw, .59cqh); }
  .menubtn { gap: min(2.1cqw, .95cqh); padding: min(2.1cqw, .95cqh) 0; }

  /* Both markers stack at the left edge; --marker-2 is one line-height plus the
     line gap below the first. */
  .marker--left,
  .marker--right {
    left: var(--inset);
    right: auto;
    letter-spacing: .17em;
  }
  /* THE DISCIPLINE LINE BELONGS TO THE BOTTOM BLOCK — discipline, then the red
     rule, then the subhead — per HERO_SPEC.md §5 and the composition Zsolt
     approved on 2026-08-17. It sat at --marker-2, one line under `01 / Signal`,
     because the sheet this was ported from stacked both markers at the top.

     It joins the flow rather than being re-anchored with a bottom offset: .lift
     is already a bottom-justified flex column, so dropping the absolute
     positioning puts it in that column, and order:-1 places it above
     .col--right, which carries the rule and the subhead. Nothing here depends
     on the height of the paragraph below it, so it holds when the subhead wraps
     to four lines in Hungarian. */
  .marker--right {
    position: static;
    order: -1;
    top: auto;
  }

  /* The left column stops being a column: it is the positioning context the
     headline is placed against, and the flex item the bottom stack sits in. */
  .col--left {
    position: static;
    width: var(--col-w);
    max-width: 100%;
  }
  .col--right {
    position: static;
    width: var(--col-w);
    max-width: 100%;
    align-items: flex-start;
    text-align: left;
    animation: omRise 1250ms var(--ease-out) 980ms both;
  }
  /* The stats are cut on mobile (Zsolt's call), and with them the rule that
     divides them from the proof line. */
  .col--right .rule,
  .stats { display: none; }

  .h1 {
    position: absolute;
    left: var(--inset);
    right: var(--inset);
    top: var(--top-col);
    width: auto;
    line-height: .94;                /* desktop .92 reads too tight at 38px */
    letter-spacing: -.032em;
    animation: omRise 1250ms var(--ease-out) 760ms both;
  }

  .col__group {
    gap: var(--gap);
    animation: omRise 1250ms var(--ease-out) 980ms both;
  }

  /* THE HEADLINE IS INK AT EVERY WIDTH, AND CARRIES NO SHADOW.
     There is no .h1 rule here on purpose: it inherits hero.css, which is
     already --near-black with "solid" on --grey-accent and no text-shadow. One
     declaration in one place, both breakpoints.

     The subhead is a different case and keeps its white-on-dark treatment: it
     sits over his shirt rather than over the gradient, so the headline's change
     does not reach it. */
  .sub {
    max-width: none;
    color: rgba(255, 255, 255, .95);
    text-shadow: 0 1px 16px rgba(10, 16, 24, .6), 0 0 2px rgba(10, 16, 24, .4);
  }
  /* THE PROOF LINE IS CUT BELOW 768px. `Enterprise measurement and CRM work ·
     six continents` was the last thing in the bottom stack; the hero Zsolt
     approved on 2026-08-17 ends at the subhead, and HERO_SPEC.md §5 lists only
     discipline / rule / sub in the bottom block. Desktop keeps it — it has the
     right-hand column the line was written for. */
  .proof { display: none; }

  /* The knockout copy is already white on red and needs no shadow. */
  .lift--knockout .h1,
  .lift--knockout .sub { text-shadow: none; }
  .lift--knockout .proof { text-shadow: none; color: rgba(255, 255, 255, .86); }
  .lift--knockout { clip-path: inset(0 0 0 100%); }
}