/* ---------- stage: cream panel + photo + stickers ---------- */
  .stage{position:relative;padding:0 0 clamp(28px,4vw,56px)}
  /* the intro copy used to sit in normal flow under the headline and its
     own height kept the panel clear of "SECURITY"'s baseline - now that it
     rides beside the headline instead (out of flow, see .h-intro), that
     clearance has to come from here directly */
  @media (min-width:1000px){.stage{margin-top:clamp(105px,13.5vh,205px)}}
  .stage-panel{
    position:relative;background:var(--panel);
    border-radius:0 200px 0 0;
    height:clamp(360px,52vw,560px);overflow:hidden;
    background-image:
      linear-gradient(rgba(23,21,18,.07) 1px,transparent 1px),
      linear-gradient(90deg,rgba(23,21,18,.07) 1px,transparent 1px);
    background-size:56px 56px;
  }
  @media (max-width:760px){.stage-panel{border-radius:0 90px 0 0}}

  /* cut-out photo: stands on the panel floor, rises over the headline (v1-style overlap) */
  .stage-photo{
    position:absolute;left:50%;bottom:clamp(28px,4vw,56px);transform:translateX(-50%);
    width:clamp(280px,40vw,470px);
    height:calc(100% - clamp(28px,4vw,56px) + clamp(150px,15vw,280px));
    z-index:1;pointer-events:none;
  }
  .stage-photo img{cursor:pointer;pointer-events:auto;
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:contain;object-position:bottom center;
    filter:drop-shadow(0 18px 30px rgba(23,21,18,.35));
  }
  .stage-photo img:not([hidden]){animation:pop .6s cubic-bezier(.16,1,.3,1)}
  /* the blazer crop is wider than the fleece; widen its box so both reach the same height */
  body.offline .stage-photo{width:clamp(360px,51vw,600px)}

  /* CV buttons sit across the waist of the portrait, in both views */
  .dl{
    position:absolute;left:50%;top:78%;translate:-50% 0;z-index:4;
    display:flex;gap:12px;pointer-events:auto;white-space:nowrap;
  }
  .dl a{
    font-family:var(--mono);font-size:clamp(13px,1.15vw,17px);font-weight:700;letter-spacing:.09em;
    text-transform:uppercase;text-decoration:none;
    border-radius:99px;padding:16px 28px;
    border:2px solid var(--chip-bg);background:var(--chip-bg);color:var(--chip-fg);
    box-shadow:0 8px 20px rgba(23,21,18,.28);
    transition:background .18s ease-out,color .18s ease-out,translate .18s ease-out;
  }
  /* over the blazer photo, --ink swings light-on-dark or dark-on-light
     depending on the theme toggle, and either way sits too close to the
     photo's own tone to read as a button. A fixed, lighter warm brown
     stays legible against it regardless of theme. */
  body.offline .dl a{background:#5C4B37;border-color:#5C4B37;color:#F1E7D6}
  .dl a:hover{background:var(--orange);color:#fff;border-color:var(--orange);translate:0 -3px}
  @media (max-width:640px){
    .dl{flex-direction:column;gap:9px;top:73%}
    .dl a{padding:13px 20px}
  }

  /* a quiet "scroll for more" floating under the CV buttons, in place of
     the old fixed arrow - it rides the photo instead of the whole page.
     No card behind it - just --cream, which flips white/dark with the
     light/dark toggle itself (unlike --cue, which is view-scoped and can
     land dark-on-dark in the off-clock + light combo). The photo under it
     is dark clothing at this height in every crop, so the light-theme text
     (dark ink) needs real contrast help - a blurred glow on filled letters
     just reads as a solid white blob at this size, so a crisp text-stroke
     outlines the glyphs instead; the thin-stroked arrow icon has no such
     problem and can take a plain blur. Dark-theme text is already light on
     dark cloth and only needs a soft shadow for a little depth. */
  .scroll-hint{
    position:absolute;left:50%;top:88%;translate:-50% 0;z-index:4;
    display:flex;flex-direction:column;align-items:center;gap:8px;
    font-family:var(--mono);font-size:16px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    color:var(--cream);text-decoration:none;cursor:pointer;pointer-events:auto;
    transition:translate .18s ease-out;
  }
  /* a real link now (jumps to the "hire the candidate" footer), so it earns
     a little press-forward on hover instead of just sitting there */
  .scroll-hint:hover{translate:-50% 4px}
  .scroll-hint svg{width:26px;height:36px;stroke:var(--cream);animation:scroll-hint-bob 1.6s ease-in-out infinite}
  @keyframes scroll-hint-bob{0%,100%{translate:0 0}50%{translate:0 8px}}
  html[data-theme="light"] .scroll-hint span{-webkit-text-stroke:.9px rgba(255,255,255,.95)}
  html[data-theme="light"] .scroll-hint svg{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff)}
  html[data-theme="dark"] .scroll-hint span{text-shadow:0 1px 4px rgba(0,0,0,.5)}
  html[data-theme="dark"] .scroll-hint svg{filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}
  @media (max-width:640px){.scroll-hint{top:88%;font-size:13px}.scroll-hint svg{width:20px;height:28px}}
  @media (prefers-reduced-motion:reduce){.scroll-hint svg{animation:none}}

  /* liquid glass puck that tracks the cursor across the portrait */
  .ph-reveal{
    position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
    height:0;                       /* JS sets this to the rendered photo box */
    clip-path:circle(0px at 50% 50%);
    -webkit-backdrop-filter:blur(3px) saturate(1.5) brightness(1.12);
            backdrop-filter:blur(3px) saturate(1.5) brightness(1.12);
    /* a soft specular sweep so the puck reads as glass, not a blur patch */
    background:
      radial-gradient(circle at var(--mx,50%) var(--my,50%),
        rgba(255,255,255,.22), rgba(255,255,255,.06) 42%, rgba(255,255,255,0) 70%),
      linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,0) 45%);
  }

  .sticker{
    position:absolute;display:flex;flex-direction:column;align-items:center;gap:8px;
    width:clamp(130px,15vw,200px);text-align:center;
    animation:morph .65s cubic-bezier(.34,1.56,.64,1) backwards,float 5.5s ease-in-out infinite;
  }
  @keyframes float{0%,100%{translate:0 0}50%{translate:0 -9px}}
  @keyframes morph{from{transform:perspective(700px) rotateY(160deg) scale(.2);opacity:0}}
  /* the cert stickers are clickable now (they open the certificate viewer).
     float's own keyframes run continuously on this element and only touch
     the standalone `translate` property, but Chrome couples ALL individual
     transform properties (translate/rotate/scale) together the moment any
     one of them is animated - a plain `scale:` on hover gets silently
     frozen at its non-hover value instead of applying. The `transform`
     shorthand isn't part of that coupling, so scaling through it here
     actually works. */
  .sticker:not(.ss){cursor:pointer;transition:transform .2s ease-out,filter .2s ease-out}
  .sticker:not(.ss):hover{transform:scale(1.08);filter:drop-shadow(0 8px 16px rgba(0,0,0,.22))}
  .sticker:not(.ss):focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:12px}
  .sticker img{width:100%;height:clamp(72px,9vw,124px);object-fit:contain}
  .s2 img,.s4 img,.s7 img{height:clamp(92px,11.5vw,158px)}
  /* CTIA's badge is two logos, not one: AMA out front (the issuing school),
     TESDA tucked behind and to the side (the sponsor) - still visible,
     not competing for attention. .logo-pair takes over the box .sticker
     img/.row .lg used to size directly; the main logo is a plain <img>
     inside it and inherits that sizing normally through the same
     descendant selectors, so only the sub-logo needs its own rule.
     !important on its width/height is deliberate: those same descendant
     selectors also match it and would otherwise blow it back up to full
     size, since a more specific override can't out-rank them from here. */
  /* z-index:0 (not just position:relative) is required here - without an
     explicit z-index this box doesn't establish its own stacking context,
     so the sub-logo's z-index:-1 below escapes it entirely and stacks
     against whatever ancestor context happens to be nearest instead
     (which buried it behind the ledger row entirely; the hero sticker
     only looked fine by accident). */
  .logo-pair{position:relative;z-index:0;display:inline-block}
  .sticker .logo-pair{width:100%;height:clamp(72px,9vw,124px)}
  .logo-pair-sub{
    position:absolute;right:-10%;bottom:-12%;z-index:-1;
    width:52% !important;height:52% !important;object-fit:contain;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.32));
  }
  .sticker b{font-weight:700;font-size:clamp(13.5px,1.3vw,18px);line-height:1.25;color:var(--ink)}
  .sticker small{display:block;font-family:var(--mono);font-weight:400;font-size:clamp(10px,.82vw,12px);letter-spacing:.1em;text-transform:uppercase;color:var(--meta)}
  .s1{left:4%;top:6%;rotate:-7deg;animation-delay:.02s,.2s}
  .s2{left:20%;top:20%;rotate:3deg;animation-delay:.1s,1.4s}
  .s3{left:4%;top:44%;rotate:4deg;animation-delay:.06s,1.1s}
  .s4{left:21%;bottom:2%;rotate:-3deg;animation-delay:.12s,.9s}
  .s5{right:16%;top:7%;rotate:6deg;animation-delay:.04s,.6s}
  .s6{right:3%;top:33%;rotate:-6deg;animation-delay:.08s,1.6s}
  .s7{right:19%;bottom:24%;rotate:3deg;animation-delay:.14s,2s}
  .s8{right:5%;bottom:4%;rotate:-4deg;animation-delay:.16s,.4s}
  @media (max-width:760px){
    .s2,.s7{display:none}
    .s1{left:2%}.s3{left:2%}.s4{left:4%}
    .s5{right:12%}.s6{right:2%}.s8{right:3%}
  }

  /* offline mode: social stickers (inherit cert sticker size + position) */
  .ss{text-decoration:none;cursor:pointer}
  .ss img{transition:scale .18s ease-out}
  .ss:hover img{scale:1.08}
  .ss .num{display:none}
  .ss.revealed .num{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink);font-weight:500}
  .ss.revealed .hint{display:none}