/* ==========================================================================
   AMIN APAC — profile-hero.css
   Hero A2, "the plate, name-led". Additive: loads last, on top of
   profile.css, and only touches body.pf-a2. The page, the script and the
   plate geometry are hero A's unchanged - this file only re-argues the
   hierarchy on top of them.

   Hero A said the country six ways: the plate, the ghost word, the eyebrow,
   the rail, the zone, the tile's accent. It said the agency three. But the
   country is the one fact the visitor already holds - they clicked it on the
   map to get here - and the agency name is the thing the page exists to sell.
   So: the ghost word goes, the plate steps back and becomes setting, and the
   scale it was spending goes to the name. The map hands you a place; the
   profile hands you a name.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. The ghost word goes
   The plate IS the country, cut from the map's own geometry. The word was a
   caption on a picture that does not need one, and it was the largest type
   on the page while carrying the least new information.
   -------------------------------------------------------------------------- */
body.pf-a2 .pf-ghost{display:none}

/* --------------------------------------------------------------------------
   02. The name takes the scale
   Up from clamp(48px,8.4vw,132px)/500 to the weight and size hero B gives it.
   The measure is deliberately narrow: at 9ch every name stacks into a two or
   three line lockup in the left half of the frame, which keeps the right half
   for the plate. One long line would have crossed under it and landed on the
   lit side of the scrim.
   -------------------------------------------------------------------------- */
body.pf-a2 .pf-name{
  /* Two caps, whichever is smaller.
     The first is the design's intent: as big as the frame allows.
     The second stops the longest WORD crossing into the right-hand column,
     where the tagline and the two buttons live. A name wraps between words but
     never inside one, so a single long word ("Communications") overflows this
     element's own max-width and lands on top of the buttons. That collision was
     always there; it only became visible when the buttons moved to the bottom
     of the row, where the long last line is.
     .58 is the measured average advance of this face at this weight and
     tracking, in em per character. 62vw-120px approximates the left column:
     the wrap less its padding, less the right column and the gap. Both numbers
     are empirical and were checked against all eleven names at six widths - if
     the grid template changes, re-measure. --word is the longest word's length,
     set by profile.js; the fallback keeps this sane if the script never runs.

     7.9vw is 1.8x the map headline's 4.4vw in css/hero-map.css, and 108px is
     1.8x its 60px cap, so the name holds the same relationship to it at every
     width the two clamps share rather than swinging from 2.4x at 1440 to 1.2x
     on a phone. Below 768 the map headline sits on its 34px floor and the
     ratio drifts by design — neither can go further down. Move one slope and
     move the other. */
  font-size:min(clamp(44px,7.9vw,108px), calc((62vw - 120px) / (var(--word,9) * .58)));
  font-weight:600;letter-spacing:-.035em;line-height:.88;
  max-width:min(9ch,54vw);text-wrap:pretty;
  text-shadow:0 10px 40px rgb(0 0 0 / .3);
}
/* The tile is the agency's mark, not a bullet - it holds its size while the
   name grows past it, and sits on the name's first line, not its last. */
body.pf-a2 .pf-id{align-items:flex-start;gap:var(--s4)}
body.pf-a2 .pf-id .tile{width:64px;height:64px;font-size:22px;margin-top:.1em}

/* The descender fix. .pf-name .w is an overflow:hidden box - it is the mask
   the word rises out of - and profile.css gives it .06em of room below the
   baseline. That is enough at 132px on one line; at this size, with the
   tighter leading, the tail of a g or a y is cut off square. The padding
   makes room inside the mask and the negative margin gives the space back to
   the layout, so nothing below the name moves. */
body.pf-a2 .pf-name .w{padding-bottom:.22em;margin-bottom:-.22em}

/* The tagline is the name's second breath, so it lines up under it rather
   than running the full measure. */
body.pf-a2 .pf-tagline{max-width:40ch}

/* --------------------------------------------------------------------------
   03. The plate steps back
   Further right, higher, and a shade quieter: setting, not subject. It still
   arrives as the map finishing its move - it just stops competing with the
   headline for the centre of the frame.
   -------------------------------------------------------------------------- */
/* left and top move WITH the framing padding in profile.js - see the note
   there. The plate is wider than the viewport and hangs off the right edge, so
   tightening the padding crops the country unless the plate comes back left at
   the same time: 69% -> 58% is what keeps every country whole and every pin on
   screen at the new size. (The top offset this note used to carry has been
   superseded twice - the live value and its reasoning are in the note directly
   above the rule.) */
/* The px term is a wide-screen cap, not the size. 54vw is the design's share
   of the frame and governs everything up to ~1700px; past that the old 920px
   froze the plate while the window kept widening, so the country held 54% of
   the frame on a laptop and 36% on a 2560 - marooned in the top right with the
   middle of the composition empty. 1180px holds the share to ~2200 and still
   lets 140vh govern short windows, where a plate that keeps growing would
   crowd the name rather than sit behind it. */
/* top 29% -> 40%, and this is the whole of the fix. At 29% the plate's centre
   sat in the top third, its south edge died around 55% of the frame, and the
   copy did not start until ~72% - a viewport-diagonal of empty ground between
   the two things the hero is made of. Nothing was too small; they were too far
   apart. 48% was chosen by measuring, not by eye: it puts the country's own
   south edge at 63.7% of the frame against the name's cap line at 66.3%, so
   the two sit in one optical band with the tagline beside the country's tail.
   52% and 56% were measured too - both cross the name and open a larger void
   along the top in exchange.
   left and width are UNTOUCHED on purpose: they are paired with the framing
   padding in profile.js (see the note there) and moving either crops the
   country and takes the southern pins off screen. This move is vertical only. */
/* HEADS UP: above 900px `top` and `width` here are DEAD. css/profile-handoff.css
   loads after this sheet and restates both in its @media (min-width:901px)
   block - that rule is what renders on desktop. The 48% is kept in step with
   it so the two files do not disagree; move one and move the other. `left` is
   this sheet's alone. */
body.pf-a2 .pf-plate{left:58%;top:48%;width:min(54vw,1180px,140vh)}
/* .88 was atmospheric recession stacked on top of positional recession - two
   ways of saying "far", which is how it read. The plate steps back by where it
   sits and by the scrim over it; it does not also need to be hazy. */
body.pf-a2 .pf-hero.is-in .pf-plate{opacity:.95}
/* The pin is the one part of the plate that should not dim - it is the
   agency's own position on it. */
body.pf-a2 .pf-pin{opacity:0}
body.pf-a2 .pf-hero.is-in .pf-pin{opacity:1}
/* Ground graticule follows the plate's new centre so it still reads as
   something the plate stands on. */
/* Both follow the plate down. The graticule is the surface the plate stands
   on, so it moves with it or the plate floats off its own ground; and the
   perspective origin is the camera's aim, which was pointed above the
   composition's centre of mass while the composition sat below it. */
body.pf-a2 .pf-ground{top:66%}
body.pf-a2 .pf-hero-a .pf-stage{perspective-origin:60% 46%}
/* NO padding-top override here, and the reason is worth writing down because
   it is the obvious-looking second half of this move and it does nothing:
   .pf-hero is `display:grid;align-items:end`, so .pf-copy is bottom-anchored
   and its head room only bites once the copy is taller than the frame.
   min(46vh,380px) was tried and measured - the name's cap line did not move a
   pixel. The copy stays at the foot of the hero; the plate is what travels. */

/* --------------------------------------------------------------------------
   04. Quiet ground for the name
   The left wedge runs further across and lands darker, so the name sits on
   flat colour instead of on the plate's shadow.
   -------------------------------------------------------------------------- */
body.pf-a2 .pf-hero-a .pf-scrim{
  background:
    linear-gradient(14deg, rgba(20,22,26,.98) 0%, rgba(20,22,26,.88) 30%, rgba(20,22,26,.42) 56%, transparent 76%),
    linear-gradient(180deg, rgba(20,22,26,.6) 0%, transparent 26%);
}

/* --------------------------------------------------------------------------
   05. The country, demoted to what it is
   Nothing is lost - it moves from headline to context. The eyebrow carries a
   dot in the member's own accent - profile.js already puts c.color on :root
   as --ac, so the dot costs nothing but the rule.
   -------------------------------------------------------------------------- */
/* One eyebrow spec across both pages, matched to the map's in css/hero-map.css.
   profile.css sets 12px/.16em/--lavender and no line-height, so this line was
   inheriting the body's 1.45 ratio at 2.25 of its own size — 27px of box on
   12px of type, which is where the shelf of air under the country came from.
   The 1px and .02em were never a decision, only two files. */
body.pf-a2 .pf-eyebrow{
  font-size:11px;line-height:16px;letter-spacing:.18em;color:#B9A6E8;
}
body.pf-a2 .pf-eyebrow #pfCountry{color:var(--white)}
body.pf-a2 .pf-eyebrow #pfCountry::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:8px;vertical-align:.08em;
  background:var(--ac,var(--lavender));
  box-shadow:0 0 0 3px rgb(255 255 255 / .1);
}

/* --------------------------------------------------------------------------
   06. Responsive
   Same argument, stacked: plate up top as a header image, name below it at
   the largest size the column will hold.
   -------------------------------------------------------------------------- */
@media (max-width:1100px){
  /* 68% was right for the old padding and clips 60-110px off the country at
     the new one, taking some pins off screen with it. Same correction as the
     base rule, scaled to this narrower plate. */
  body.pf-a2 .pf-plate{left:48%;width:min(62vw,820px)}
  /* Carries the same longest-word cap as the base rule. Without it this
     override wins below 1100px and the two "Communications" names land back on
     the buttons - the exact bug the cap exists to stop. The 900px rule below
     needs no cap: the grid is min-width:901px, so under it the name has the
     whole column and there is nothing beside it to collide with. */
  body.pf-a2 .pf-name{
    font-size:min(clamp(44px,7.9vw,108px), calc((62vw - 120px) / (var(--word,9) * .58)));
  }
}
@media (max-width:900px){
  body.pf-a2 .pf-hero-a .pf-plate{left:50%;top:29%;width:min(92vw,720px)}
  body.pf-a2 .pf-hero-a .pf-copy{padding-top:min(62vh,460px)}
  body.pf-a2 .pf-hero-a .pf-scrim{
    background:linear-gradient(180deg, transparent 24%, rgba(20,22,26,.86) 56%, rgba(20,22,26,.99) 100%);
  }
  body.pf-a2 .pf-ground{top:40%}
  /* The tile moves above the name rather than beside it: on one column the
     name needs the whole measure, and the longest of the eleven - Span Media
     Communications - runs off the screen if it has to share the line. */
  body.pf-a2 .pf-id{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  body.pf-a2 .pf-id .tile{width:48px;height:48px;font-size:17px;margin-top:0}
  /* The stack gives the name the whole column, so it steps up off the base
     slope rather than continuing it — but by less than it used to. 10.4vw put
     the name at 40.6px on a 390 phone against the map headline's 34px, which
     is not a hierarchy, it is a rounding error. 8.6vw reads as the same
     relationship the desktop lockup has, at the size the column allows. */
  body.pf-a2 .pf-name{font-size:clamp(40px,8.6vw,64px);max-width:none;letter-spacing:-.03em}
}