/* loops/hero-exploded/style.css (15 Oct 2026, identity build: the red front door and its film, re-skinned from identity-comp/index.html, section.hero).
   The folder keeps its old name because home.src.html links it. The words and the film are built from the identity kit (site-src/css/kit.css: .k-door, .k-words, .k-d1, .k-sticker, .k-hero-lead, .k-lane, .k-act, .k-btn,
   .k-fine, .k-film, .k-frame, .k-pic, .k-chip, .k-ovl, .k-tag, .k-br, .k-beats, .k-beat, .k-check, .k-beatline); this file only holds what the kit has no class for: the second call to
   action, the stage resets, the marks the round draws (brackets, light pass, voice line, button), the one control, and the START state. The motion is unchanged (builder.js: the approved 15 s round).
   The BASE rules are the finished screen (no script, reduced motion, and the rest frame after the three rounds): the Hook frame, its line found, the Hook beat a white sticker with its tick, every row ticked below 1180 (the Hook alone
   from 1180), the beat line full (below 1180 the scrubber stands on the Hook). When script and motion are both on, the last block paints the START state from first paint; builder.js anchors the same values at time 0.
   Kit sizes: phone under 1180 (the picture 172 x 306, one beat at a time as a white sticker across the picture's edge), desktop from 1180: the quiet rows, designer A's build at 90 percent (owner, 15 Oct 2026: "Actually A but 10 % smaller"):
   the picture 212.4 x 378 (A's 236 x 420), four rows on a 90 px pitch beside it. One knob, --hs (.9), scales every desktop length of the film (see the desktop block); text never goes under 15 px. No box behind the film. Every rule is
   scoped under .pg-hero; no k- class is restyled (the few overrides name the film's own wrapper). */

/* ════ the words: the second call to action (path B) and the CTA group, as the comp's last rules draw them ════ */
.pg-hero .k-words>.k-hero-lead.cl-then{margin-top:6px}
.pg-hero .cl-act .k-fine{margin:0}
.pg-hero .cl-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:16px;line-height:20px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fg);text-decoration:none;align-self:flex-start}
.pg-hero .cl-lt{border-bottom:2px solid currentColor;padding-bottom:3px}
.pg-hero .cl-arr{flex:none;width:18px;height:18px}
@media (max-width:767px){
  .pg-hero .cl-act{align-items:center;gap:14px}
  .pg-hero .cl-act .cl-cta{align-self:stretch}
  .pg-hero .cl-act .k-fine{order:2;text-align:center}
  .pg-hero .cl-act .cl-link{order:3;align-self:center;width:auto;justify-content:center}
}
@media (min-width:768px){
  .pg-hero .cl-link{font-size:17px}
  .pg-hero .cl-act{display:grid;grid-template-columns:auto auto;column-gap:28px;row-gap:22px;align-items:center;justify-content:start}
  .pg-hero .cl-act .cl-cta{grid-column:1;grid-row:1}
  .pg-hero .cl-act .cl-link{grid-column:2;grid-row:1;align-self:center}
  .pg-hero .cl-act .k-fine{grid-column:1 / span 2;grid-row:2;text-align:left}
}
@media (min-width:1180px){.pg-hero .cl-link{font-size:16px;letter-spacing:.03em;white-space:nowrap}}

/* ════ the stage: the figure is the kit's .k-film grid and has no box. The motion kit gives a stage paint containment, a clip and a 1.5 line height; the film needs none of them (the chip, the plates and the
   check badges hang outside the frame) ════ */
.pg-hero .cl-scr{contain:none;overflow:visible;container-type:normal;line-height:normal;
  --kl-toggle-bg:var(--ink);--kl-toggle-ink:var(--light);--kl-toggle-hover:var(--ink-hover);--kl-ring:var(--white)}
.pg-hero .cl-scr img{display:block;max-width:none}
.pg-hero .cl-art{display:contents}
.pg-hero .cl-read{pointer-events:none}

/* ════ the picture: four frames stacked, Ask at the bottom and Hook on top, each full size and opaque. A dissolve fades the top frame out over the opaque one beneath it, so the picture never dips;
   the frame that arrives settles from 1.04 to 1.00 (a transform on its own layer) ════ */
.pg-hero .cl-pic{position:absolute;inset:0;display:block;overflow:hidden}
.pg-hero .cl-pic>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-hero .cl-ovs{display:inline-block;padding:4px 8px}
/* the ad's own marks: static boxes that centre the mark, so only opacity and a 6 px rise ever move. The wrapper is the box the brackets lock on (6 px clear all round) */
.pg-hero .cl-ob{position:absolute;z-index:2;left:0;right:0;top:56%;height:30px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.pg-hero .cl-hold{position:relative;display:block}
.pg-hero .cl-chip{position:relative;display:flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 9px;border-radius:15px;background:var(--ink);color:#fff;font-weight:700;font-size:14px;line-height:1;white-space:nowrap;opacity:0}
.pg-hero .cl-wv{flex:none;width:14px;height:12px;fill:var(--teal)}
.pg-hero .cl-btn{position:relative;display:flex;align-items:center;height:30px;padding:0 14px;border-radius:15px;background:var(--white);color:var(--ink);font-weight:700;font-size:14px;line-height:1;white-space:nowrap;box-shadow:0 2px 8px rgba(11,42,43,.3);opacity:0}
.pg-hero .cl-bx{position:absolute;display:block;opacity:0;pointer-events:none}
.pg-hero .cl-bx--d,.pg-hero .cl-bx--a{inset:-6px}
.pg-hero .cl-bx--p{left:7.7%;right:7.7%;top:7%;height:55%}   /* the tower: geometry only, the brackets travel to it */
/* detection marks on the Hook line's box (the brackets stand 6 px clear of the text, the light pass and the faint selection are the text's own box) */
.pg-hero .cl-det{position:absolute;z-index:3;left:12px;top:17px;width:149px;height:56px;pointer-events:none}
.pg-hero .cl-shw{position:absolute;inset:6px;display:block;border-radius:3px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent),linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent),linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);mask-composite:intersect}   /* a static feather on all four sides, so the light pass has no hard edge where it enters or leaves the line */
.pg-hero .cl-sh{position:absolute;inset:0;display:block;opacity:0;background:linear-gradient(90deg,rgba(255,255,255,0) 12%,rgba(255,255,255,.20) 50%,rgba(255,255,255,0) 88%)}
.pg-hero .cl-sel{position:absolute;inset:6px;display:block;border-radius:3px;background:rgba(167,244,255,.09)}   /* the approved film's fill */
/* one tag per beat, each under its box; the finished screen shows the Hook's. The wrapper centres the tag so the tag itself only ever moves by transform */
.pg-hero .cl-tagw{position:absolute;z-index:3;left:0;right:0;display:flex;justify-content:center;pointer-events:none}
.pg-hero .cl-tagw--0{top:28%}
.pg-hero .cl-tagw--1,.pg-hero .cl-tagw--2,.pg-hero .cl-tagw--3{top:69%}
.pg-hero .k-pic .cl-tagw .k-tag{position:relative;left:auto;transform:none}
.pg-hero .cl-tagw--1 .cl-tag,.pg-hero .cl-tagw--2 .cl-tag,.pg-hero .cl-tagw--3 .cl-tag{opacity:0}
/* the one control: a small icon inside the picture (the comp's .ctl). The runner keeps data-state (pause | play | replay) and the label in step */
.pg-hero .cl-scr .kl-toggle.cl-pause{position:absolute;right:2px;bottom:2px;z-index:10;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:0;background:none;color:var(--light)}
.pg-hero .cl-scr .kl-toggle.cl-pause::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1.5px rgba(246,246,246,.5);transition:background-color 150ms var(--ease-ui)}
.pg-hero .cl-scr .kl-toggle.cl-pause::after{position:relative;width:12px;height:12px;background:currentColor;-webkit-mask:var(--kl-icon) center / contain no-repeat;mask:var(--kl-icon) center / contain no-repeat;
  --kl-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1.5' y='1' width='3' height='10' rx='1'/%3E%3Crect x='7.5' y='1' width='3' height='10' rx='1'/%3E%3C/svg%3E")}
.pg-hero .cl-scr .kl-toggle.cl-pause[data-state="play"]::after{--kl-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 1.4v9.2L10.6 6z'/%3E%3C/svg%3E")}
.pg-hero .cl-scr .kl-toggle.cl-pause[data-state="replay"]::after{width:14px;height:14px}
.pg-hero .cl-scr .kl-toggle.cl-pause:not([data-state]){visibility:hidden}
@media (hover:hover) and (pointer:fine){html:not([data-wheel]) .pg-hero .cl-scr .kl-toggle.cl-pause:hover::before{background:var(--ink-hover)}}
@media (forced-colors:active){.pg-hero .cl-scr .kl-toggle.cl-pause::before{box-shadow:none;border:1.5px solid ButtonText}.pg-hero .cl-scr .kl-toggle.cl-pause::after{background:ButtonText}}

/* ════ the read: rows, ticks, the beat line ════ */
.pg-hero .cl-scr .k-beat-tx{display:block;z-index:0}   /* span[data-k] is inline-block in the motion kit and would outrank the kit's .k-beat-tx */
.pg-hero .cl-lit{position:absolute;z-index:-1;display:none;opacity:0;pointer-events:none}   /* the beat being read: a white sticker with the plate (from 1180; under it the row's own text block is the sticker) */
.pg-hero .cl-row--h .cl-lit{opacity:1}
.pg-hero .cl-chk path{stroke-dasharray:1000 1000;stroke-dashoffset:0}   /* pathLength 1000: a draw in whole px steps would pop */
/* the beat line: track outlines, and one fill layer of the four coloured segments (flex like the track, so they line up at every width) */
.pg-hero .cl-scr .k-beatline>i{--fill:0}
.pg-hero .cl-bl>i:nth-child(1),.pg-hero .cl-f1{--s:2}   /* the ad's own clock: 2 : 3 : 5 : 2 seconds of 12 (no inline style: the markup carries none) */
.pg-hero .cl-bl>i:nth-child(2),.pg-hero .cl-f2{--s:3}
.pg-hero .cl-bl>i:nth-child(3),.pg-hero .cl-f3{--s:5}
.pg-hero .cl-bl>i:nth-child(4),.pg-hero .cl-f4{--s:2}
.pg-hero .cl-bfw,.pg-hero .cl-bfc{position:absolute;inset:0;display:block}
.pg-hero .cl-bfw{overflow:hidden}
.pg-hero .cl-bfc{display:flex;gap:3px}
.pg-hero .cl-f{display:block;flex:var(--s,1) 1 0;min-width:0;height:100%;border-radius:3px;background:var(--tone);box-shadow:inset 0 0 0 1.5px var(--ink)}

/* below 1180 the film is one beat at a time: the four rows share one place and only the beat being read shows, as the kit's white sticker across the picture's edge. The finished screen shows the Hook's.
   The clock under the film is a scrubber: at rest it stands on the Hook, so only the Hook's segment is filled */
@media (max-width:1179px){
  .pg-hero .cl-scr .k-beats{display:grid}
  .pg-hero .cl-scr .k-beat{display:block;grid-area:1 / 1;align-self:center}
  .pg-hero .cl-scr .cl-row:not(.cl-row--h){opacity:0}
  .pg-hero .cl-scr .cl-f:not(.cl-f1){opacity:0}
}

/* ════ desktop (1180 up): the framed ad and four quiet rows beside it. Designer A's "Quiet rows" at 90 percent (owner, 15 Oct 2026). Every length below is A's own px value times --hs, so the film is real sizes at 90 percent
   (not a transform that leaves a hole); the strokes and the plates (the 4 px hard shadows, the brackets' lines, the radii) are the identity's and do not scale. Text floors win over the 90 percent: no text under 15 px
   (the time code, the tags, the chips and the ad's own button and voice chip would be 13.5 and 14.4, so they stay at 15; the beat names and the lines they read are 18.9 and 17.1). Gone from 1180: the thumbnails, the coloured dots,
   the dashed rings, the beat line (it is the phone and tablet scrubber), "3 in 10". The four rows sit on a fixed pitch of 90 px (A's 100), so they fill the frame's height (16.2 px clear top and bottom) and the Hook row is level with the
   line it found in the picture; the read stands 23.4 px from the frame (A's 26), and the block hugs the right edge of its column (9 px inset: the Hook sticker ends exactly on the wrap line, under the nav button's right edge) ════ */
@media (min-width:1180px){
  .pg-hero .cl-scr{--hs:.9;--pw-d:calc(236px*var(--hs));--ph-d:calc(420px*var(--hs))}   /* --pw-d and --ph-d are the kit's own picture size hooks */
  .pg-hero .k-film.cl-scr{grid-template-columns:calc(252px*var(--hs)) auto;column-gap:calc(26px*var(--hs));justify-content:end;padding-right:calc(10px*var(--hs))}
  .pg-hero .cl-scr .k-beatline,.pg-hero .cl-scr .k-beat-hd .k-dot{display:none}
  /* the frame and what hangs on it */
  .pg-hero .cl-scr .k-frame{padding:calc(8px*var(--hs))}
  .pg-hero .cl-scr .k-frame>.k-chip{left:calc(16px*var(--hs));top:calc(-16px*var(--hs));height:calc(32px*var(--hs));padding:0 calc(13px*var(--hs)) 0 calc(11px*var(--hs));gap:calc(8px*var(--hs))}   /* its 15 px text is the floor already */
  .pg-hero .cl-scr .k-frame>.k-chip>i{width:calc(12px*var(--hs));height:calc(12px*var(--hs))}
  .pg-hero .cl-scr .k-br{width:calc(19px*var(--hs));height:calc(19px*var(--hs))}
  .pg-hero .cl-scr .k-tag{height:calc(26px*var(--hs));padding:0 calc(10px*var(--hs));border-radius:calc(13px*var(--hs));line-height:calc(26px*var(--hs))}   /* 15 px text stays: the floor */
  .pg-hero .cl-scr .k-ovl{font-size:calc(17px*var(--hs));line-height:calc(20px*var(--hs))}   /* 15.3 px: the ad's own line, scaled with its picture */
  .pg-hero .cl-ovs{padding:calc(4px*var(--hs)) calc(8px*var(--hs))}
  .pg-hero .cl-ob{height:calc(34px*var(--hs))}
  .pg-hero .cl-chip{height:calc(34px*var(--hs));padding:0 calc(14px*var(--hs)) 0 calc(11px*var(--hs));border-radius:calc(17px*var(--hs));font-size:max(15px,calc(16px*var(--hs)));gap:calc(8px*var(--hs))}
  .pg-hero .cl-wv{width:calc(16px*var(--hs));height:calc(14px*var(--hs))}
  .pg-hero .cl-btn{height:calc(34px*var(--hs));padding:0 calc(20px*var(--hs));border-radius:calc(17px*var(--hs));font-size:max(15px,calc(16px*var(--hs)))}
  .pg-hero .cl-det{left:31.3px;top:24.2px;width:149.8px;height:55.2px}   /* the Hook line's box (the brackets stand 6 px clear of the text: this is the text box plus 6 px each side) */
  /* the one control: a 40 px hit area (A's 44 x 90 percent is 39.6; the gate wants 40 or more), the disc and the icon at 90 percent of A's */
  .pg-hero .cl-scr .kl-toggle.cl-pause{width:40px;height:40px;right:1.6px;bottom:1.6px}
  .pg-hero .cl-scr .kl-toggle.cl-pause::before{inset:4.7px}
  .pg-hero .cl-scr .kl-toggle.cl-pause::after{width:calc(12px*var(--hs));height:calc(12px*var(--hs))}
  .pg-hero .cl-scr .kl-toggle.cl-pause[data-state="replay"]::after{width:calc(14px*var(--hs));height:calc(14px*var(--hs))}
  /* a row: one column of words centred in a 90 px row; the row is as wide as its own words, so the sticker that lights it is sized to them */
  .pg-hero .cl-scr .k-beat{display:grid;grid-template-columns:minmax(0,auto);align-content:center;justify-content:start;width:fit-content;max-width:100%;min-height:calc(100px*var(--hs));padding:0}
  .pg-hero .cl-scr .k-beat-tx{padding:0 calc(34px*var(--hs)) 0 0}
  .pg-hero .cl-scr .k-beat-hd{gap:calc(8px*var(--hs))}
  .pg-hero .cl-scr .k-tc{padding:calc(3px*var(--hs)) calc(6px*var(--hs)) calc(2px*var(--hs));line-height:calc(17px*var(--hs))}   /* 15 px text stays: the floor */
  .pg-hero .cl-scr .k-beat-nm{font-size:15px;line-height:17px}   /* owner, 15 Oct 2026: "the text next to the ad can be way smaller": the floor, 15 px (was 18.9) */
  .pg-hero .cl-scr .k-beat-rd{margin-top:4px;padding-right:calc(4px*var(--hs));font-size:15px;line-height:19px;text-wrap:balance}   /* 15 px (was 17.1), same owner note */
  .pg-hero .cl-lit{display:block;inset:calc(-12px*var(--hs)) calc(-10px*var(--hs)) calc(-13px*var(--hs)) calc(-14px*var(--hs));background:var(--white);border-radius:var(--r-3);box-shadow:var(--sh)}   /* the beat being read: a white sticker with the plate */
  .pg-hero .cl-scr .k-check{width:calc(24px*var(--hs));height:calc(24px*var(--hs))}
  .pg-hero .cl-scr .k-beat .k-check{right:calc(2px*var(--hs));margin-top:calc(-12px*var(--hs))}
  /* the tick stands only on the row being read: the finished screen, no script and reduced motion show it on the Hook; builder.js draws it at the end of each beat and takes it away with its sticker */
  .pg-hero .cl-scr .cl-row:not(.cl-row--h) .cl-chk{opacity:0}
}
/* (15 Oct 2026: the 1180 to 1219 rule that broke the Hook line in two is gone: at 15 px the line fits the column at every desktop width) */

/* ════ the START state ════
   The base rules above are the finished screen: no script, reduced motion, Save-Data (hero.js adds .cl-rest), and the rest frame after the three rounds. With script (html.kl-js, set in the head) and no reduced-motion
   preference these rules paint the START state from the first frame, so the round begins on the pixels the first paint showed: the words and the Hook frame are there; no beat is lit,
   the beat line and the ticks are empty, the brackets, the selection and the tags are away; the three frames under the Hook frame sit at 1.04, ready to settle. Below 1180
   no beat sticker shows yet and the scrubber's four segments are all there to be wiped in. builder.js anchors the same values at time 0 of every round (it adds .cl-rest for the length of its build,
   so GSAP reads the base CSS, never these). */
@media (prefers-reduced-motion:no-preference){
  html.kl-js .cl-scr:not(.cl-rest) [data-k="brtl"]{opacity:0;transform:translate(-9px,-9px)}
  html.kl-js .cl-scr:not(.cl-rest) [data-k="brtr"]{opacity:0;transform:translate(9px,-9px)}
  html.kl-js .cl-scr:not(.cl-rest) [data-k="brbl"]{opacity:0;transform:translate(-9px,9px)}
  html.kl-js .cl-scr:not(.cl-rest) [data-k="brbr"]{opacity:0;transform:translate(9px,9px)}
  html.kl-js .cl-scr:not(.cl-rest) [data-k="sel0"]{opacity:0}
  html.kl-js .cl-scr:not(.cl-rest) [data-k="sh"]{opacity:1;transform:translate(-100%,0)}
  html.kl-js .cl-scr:not(.cl-rest) [data-k="tag0"],html.kl-js .cl-scr:not(.cl-rest) [data-k="tag1"],html.kl-js .cl-scr:not(.cl-rest) [data-k="tag2"],html.kl-js .cl-scr:not(.cl-rest) [data-k="tag3"],
  html.kl-js .cl-scr:not(.cl-rest) [data-k="chip"],html.kl-js .cl-scr:not(.cl-rest) [data-k="btn"]{opacity:0;transform:translate(0,6px)}
  html.kl-js .cl-scr:not(.cl-rest) [data-k="pic2"],html.kl-js .cl-scr:not(.cl-rest) [data-k="pic3"],html.kl-js .cl-scr:not(.cl-rest) [data-k="pic4"]{transform:scale(1.04)}
  html.kl-js .cl-scr:not(.cl-rest) [data-k="lit0"]{opacity:0}
  html.kl-js .cl-scr:not(.cl-rest) [data-k="bfw"]{transform:translate(-100%,0)}
  html.kl-js .cl-scr:not(.cl-rest) [data-k="bfc"]{transform:translate(100%,0)}
  html.kl-js .cl-scr:not(.cl-rest) [data-k="chk0"],html.kl-js .cl-scr:not(.cl-rest) [data-k="chk1"],html.kl-js .cl-scr:not(.cl-rest) [data-k="chk2"],html.kl-js .cl-scr:not(.cl-rest) [data-k="chk3"]{opacity:0;transform:scale(.8)}
  html.kl-js .cl-scr:not(.cl-rest) [data-k="chkp0"],html.kl-js .cl-scr:not(.cl-rest) [data-k="chkp1"],html.kl-js .cl-scr:not(.cl-rest) [data-k="chkp2"],html.kl-js .cl-scr:not(.cl-rest) [data-k="chkp3"]{stroke-dashoffset:1010}
  @media (max-width:1179px){
    html.kl-js .cl-scr:not(.cl-rest) [data-k="rw0"]{opacity:0}
    html.kl-js .cl-scr:not(.cl-rest) [data-k="sf1"],html.kl-js .cl-scr:not(.cl-rest) [data-k="sf2"],html.kl-js .cl-scr:not(.cl-rest) [data-k="sf3"]{opacity:1}
  }
  @media (min-width:1180px){
    html.kl-js .cl-scr:not(.cl-rest) [data-k="brtl"]{transform:translate(-18px,-18px)}
    html.kl-js .cl-scr:not(.cl-rest) [data-k="brtr"]{transform:translate(18px,-18px)}
    html.kl-js .cl-scr:not(.cl-rest) [data-k="brbl"]{transform:translate(-18px,18px)}
    html.kl-js .cl-scr:not(.cl-rest) [data-k="brbr"]{transform:translate(18px,18px)}
  }
}