/* Clinical Edge flagship v7, pass 3: the chapter question slides ("The Blade Cut", Barry's pick A).
   The opener of #launch (paper), #app and #agents (navy). Markup: header.kq[data-kq] > .kq__stage > .kq__plate
   (p.kq__kicker with b.kw[data-k] key phrases and br.kq__b beat breaks, .kq__answer: p.kq__tag with the numeral,
   h2.kq__h2, one line) + svg.kq__mark. The numeral in the tag carries the field's anchor (data-dot).

   Static first. Reduced motion, Pause motion, the static fallback and no JS show one composed screen: the question
   (key phrases in gold), the gold tag, the spine H2, one line, and the mark in its landed state. The disc always
   keeps its own room: desktop reserves it on the right of the copy, phones under it.

   html.motion: js/kq.js pins the stage and draws every frame from scroll (no timers, scrolling back reverses it):
   the question builds word by word at giant scale, the key phrases ignite gold, a rack-focus hold, then the
   58 degree blade cuts: each word it crosses steps back into the kicker line, the lit phrases shed gold into the
   tag, the answer opens behind the cut and the blade lands in the mark. One landing per chapter: 01 the halves
   close with a gold flash, 02 the marine disc fills, 03 an orbit with five seats draws around the mark. */

#launch,#app,#agents{padding-top:0}
.kq{position:relative;
  --kq-l:max(var(--gut),calc((100% - var(--wrap)) / 2 + var(--gut)));
  --D:min(76vh,34vw);
  --ink:#FFFFFF; --hot:#FFF2CF; --kwbig:var(--champ); --kick:var(--pain-navy); --kwsmall:var(--champ);
  --h2:#FFFFFF; --em:var(--champ); --sub:var(--body-navy);
  --half-a:url(#kqNavyA); --half-b:url(#kqNavyB); --flash:216,190,126; --glowc:255,226,160}
.kq--paper{
  --ink:var(--navy); --hot:#E2C27A; --kwbig:var(--gold-disp); --kick:var(--pain-paper); --kwsmall:var(--gold-ink);
  --h2:var(--navy); --em:var(--gold-disp); --sub:var(--slate);
  --half-a:#0A1E3A; --half-b:#0F2850; --flash:238,214,158; --glowc:212,175,94}

/* ---------- The plate: the resolved composition, and the whole static scene ---------- */
.kq__stage{position:relative;min-height:100vh;min-height:100svh;overflow:clip}
.kq__plate{position:relative;z-index:2;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 4vh) calc(var(--D) * .86 + 48px) 6vh var(--kq-l)}
.kq__kicker{margin:0 0 clamp(18px,3.2vh,32px);font-family:var(--f-disp);font-style:italic;font-weight:400;font-size:clamp(24px,2.2vw,33px);line-height:1.36;letter-spacing:-.015em;max-width:30em;color:var(--kick);text-wrap:balance}
.kq__kicker .kw{font-weight:inherit;color:var(--kwsmall);position:relative;white-space:nowrap}
.kq__kicker .kw::after{content:"";position:absolute;left:.02em;right:0;bottom:-.04em;height:max(1.5px,.055em);background:var(--gold);transform:skewX(-32deg);transform-origin:0 50%}
.kq__kicker .kw--join::after{right:-.26em}
.kq__kicker .kq__b{display:none} /* beat breaks belong to the giant build; the static question wraps on its own */
.kq__answer{position:relative}
/* the gold tag: numeral plus the answer in one line, solid gold, 58 degree cut end */
.kq__tag{display:inline-flex;align-items:center;gap:16px;height:64px;margin:0 0 clamp(16px,2.6vh,28px);padding:0 58px 0 20px;background:var(--gold);color:var(--navy);
  -webkit-clip-path:polygon(0 0,100% 0,calc(100% - 40px) 100%,0 100%);clip-path:polygon(0 0,100% 0,calc(100% - 40px) 100%,0 100%);transform-origin:0 50%;white-space:nowrap}
.kq__num{display:inline-flex;align-items:center;gap:16px;font:500 24px/1 var(--f-mono);letter-spacing:.04em}
.kq__num::after{content:"";width:2px;height:28px;background:currentColor;opacity:.5;transform:skewX(-32deg)}
.kq__tl{font:600 19px/1.15 var(--f-ui);letter-spacing:.005em}
.kq .kq__h2{margin:0;font-family:var(--f-disp);font-weight:500;font-size:min(6.6vw,11.4vh);line-height:.98;letter-spacing:-.03em;color:var(--h2);text-wrap:balance;transform-origin:0 50%}
.kq .kq__h2 em{display:block;font-style:italic;font-weight:400;color:var(--em)}
.kq__sub{margin:clamp(14px,2.6vh,26px) 0 0;font-size:clamp(18px,1.45vw,22px);line-height:1.45;max-width:44ch;color:var(--sub);text-wrap:balance}
.kq .cred{margin-top:clamp(16px,2.8vh,28px)}

/* ---------- The mark: tone on tone disc, gold blade, cropped by the right edge ---------- */
.kq__mark{position:absolute;z-index:1;max-width:none;width:calc(var(--D) * 1.35);height:calc(var(--D) * 1.35);right:calc(var(--D) * -.315);top:calc(56% - var(--D) * .675);pointer-events:none;overflow:visible;shape-rendering:geometricPrecision}
.kq__half--a{fill:var(--half-a)} .kq__half--b{fill:var(--half-b)}
.kq__mblade{fill:#C9A85C}
.kq__mglow{fill:#F3DFA6;opacity:0}
.kq__fh--a{fill:url(#kqMarA)} .kq__fh--b{fill:url(#kqMarB)}
.kq__orbit{fill:none;stroke:var(--champ);stroke-width:1.15;stroke-dasharray:1 1;opacity:.75}
.kq__seat{fill:var(--champ)}

/* ---------- Phones: copy on top, the disc in the room under it ---------- */
@media (max-width:760px){
  .kq{--D:min(94vw,42vh);--D:min(94vw,42svh)}
  .kq__plate{justify-content:flex-start;padding:calc(var(--nav-h) + 3vh) var(--gut) calc(var(--D) * .86 + 18px) var(--gut)}
  .kq__kicker{font-size:21px;line-height:1.38;margin-bottom:18px;max-width:none}
  .kq__tag{height:52px;gap:10px;margin-bottom:16px;padding:0 38px 0 14px;-webkit-clip-path:polygon(0 0,100% 0,calc(100% - 32px) 100%,0 100%);clip-path:polygon(0 0,100% 0,calc(100% - 32px) 100%,0 100%)}
  .kq__num{font-size:19px;gap:10px} .kq__num::after{height:22px}
  .kq__tl{font-size:15px}
  .kq .kq__h2{font-size:min(13.6vw,6.6vh);line-height:1}
  .kq__sub{font-size:16.5px;max-width:30ch;margin-top:14px}
  .kq .cred{margin-top:16px}
  .kq__mark{right:calc(var(--D) * -.495);top:auto;bottom:calc(var(--D) * -.315)}
}
/* narrow phones: the longest tag may take two lines rather than run off the edge */
@media (max-width:380px){
  .kq__tag{height:auto;min-height:52px;padding:8px 36px 8px 13px;white-space:normal}
  .kq__tl{font-size:14.5px;text-wrap:balance}
}

/* ---------- Motion (js/kq.js adds .is-live and sets --kq-travel, the pin in viewport heights) ---------- */
.kq__big,.kq__blade,.kq__flash,.kq__rail,.kq__fx,.kq__edge{display:none}
html.motion .kq.is-live{height:calc(100vh + var(--kq-travel,1.6) * 100vh)}
html.motion .kq.is-live .kq__stage{position:sticky;top:0;height:100vh;height:100svh;min-height:0}
html.motion .kq.is-live .kq__plate{position:absolute;inset:0;min-height:0}
html.motion .kq.is-live .kq__kicker{opacity:0;white-space:nowrap;max-width:none;font-size:clamp(20px,1.8vw,27px);line-height:1.42;text-wrap:nowrap}
/* design-05 (pass 3 fixer): in motion the resolved kicker is the lit key phrases only, on one line, split by a dot */
html.motion .kq.is-live .kq__keys{display:inline}
.kq__sep{display:inline-block;margin:0 .12em;color:var(--kick);font-style:normal;opacity:.8}
html.motion .kq.is-live .kq__kicker .w{display:inline-block;line-height:1.04}
html.motion .kq.is-live .kq__answer{-webkit-clip-path:polygon(0 0,0 0,0 0,0 0);clip-path:polygon(0 0,0 0,0 0,0 0)}
html.motion .kq.is-live .kq__line{opacity:0}
html.motion .kq.is-live .kq__half,html.motion .kq.is-live .kq__mblade,html.motion .kq.is-live .kq__orbit,html.motion .kq.is-live .kq__seat{opacity:0}
@media (max-width:760px){html.motion .kq.is-live .kq__kicker{font-size:17.5px}}
@media (min-width:761px){.kq__qb--m{display:none}}
@media (max-width:760px){.kq__qb--d{display:none}
  .kq.has-mt .kq__mark{top:calc(var(--mt) - var(--D) * .175);bottom:auto}}

html.motion .kq.is-live .kq__big{display:block;position:absolute;inset:0;z-index:3;pointer-events:none}
.kq__cam{position:absolute;left:0;top:0;transform-origin:0 0}
.kq__q{margin:0;font-family:var(--f-disp);font-style:italic;font-weight:400;line-height:1.04;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.kq__q .w{display:inline-block;transform-origin:0 0;opacity:0}
.kq__q .l{display:inline-block;transform-origin:50% 85%}
.kq__q .kw{position:relative;display:inline-block}
.kq__q .ul{position:absolute;left:.02em;right:0;bottom:.02em;height:.05em;background:var(--gold);transform-origin:0 50%;transform:skewX(-32deg) scaleX(0)}
.kq__q .kw--join .ul{right:-.28em}

/* the cut: blade, the opening edge, the landing flash and the gold burst (2D canvas; the page's one WebGL context
   stays in field.js) */
html.motion .kq.is-live .kq__fx{display:block;position:absolute;left:0;top:0;width:100%;height:100%;z-index:4;pointer-events:none}
html.motion .kq.is-live .kq__flash{display:block;position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:radial-gradient(42% 52% at var(--fx,70%) var(--fy,50%),rgba(var(--flash),.95),rgba(var(--flash),.32) 40%,rgba(var(--flash),0) 72%)}
html.motion .kq.is-live .kq__blade{display:block;position:absolute;left:0;top:0;z-index:5;pointer-events:none;opacity:0;border-radius:99px;transform-origin:50% 50%;
  background:linear-gradient(90deg,rgba(201,168,92,0) 0,#C9A85C 26%,#FFF4D8 50%,#C9A85C 74%,rgba(201,168,92,0) 100%);
  box-shadow:0 0 16px 2px rgba(var(--glowc),.6),0 0 70px 12px rgba(var(--flash),.3)}
html.motion .kq--paper.is-live .kq__blade{background:linear-gradient(90deg,#8A6D2F 0,#C9A85C 30%,#F1D99C 50%,#C9A85C 70%,#8A6D2F 100%);box-shadow:0 0 8px 1px rgba(185,151,75,.55),0 0 34px 4px rgba(201,168,92,.28)}
html.motion .kq.is-live .kq__edge{display:block;position:absolute;left:0;top:0;z-index:3;width:2px;pointer-events:none;opacity:0;transform-origin:50% 50%;
  background:linear-gradient(180deg,rgba(var(--flash),0),rgba(var(--flash),.9) 30%,rgba(var(--flash),.9) 70%,rgba(var(--flash),0))}

/* the scroll rail: the bare numeral, one dot per key phrase (lit as it ignites) and the blade notch */
html.motion .kq.is-live .kq__rail{display:flex;align-items:center;gap:12px;position:absolute;z-index:3;left:var(--kq-l);bottom:max(18px,2.6vh);opacity:0;pointer-events:none;color:var(--kwsmall)}
.kq__rail b{font:600 var(--fs-num)/1 var(--f-mono);letter-spacing:var(--ls-num)}
.kq__rail i{display:block;width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;opacity:.5;transition:none}
.kq__rail i.is-on{background:currentColor;opacity:1}
.kq__rail s{display:block;width:3px;height:16px;margin-left:4px;background:currentColor;transform:skewX(-32deg);opacity:.35;text-decoration:none}
.kq__rail s.is-on{opacity:1}

/* interaction-09 (pass 3 fixer): chapter 03 lands an orbit with five seats; all five stay on screen. Its disc is 12%
   smaller and pulled in until the right seat clears the edge by 24px (right = 24px - 0.072 D), and the copy column
   keeps clear of the orbit's left side (1.24 D + 48px). */
#agents .kq{--D:calc(min(76vh,34vw) * .88)}
#agents .kq .kq__plate{padding-right:calc(var(--D) * 1.24 + 48px)}
#agents .kq .kq__mark{right:calc(24px - var(--D) * .072)}
#agents .kq .kq__h2{font-size:min(5.9vw,10.2vh)} /* "Grow your practice" stays on one line beside the orbit */
@media (max-width:760px){
  #agents .kq .kq__plate{padding-right:var(--gut)}
  #agents .kq .kq__h2{font-size:min(13.6vw,6.6vh)}
  #agents .kq .kq__mark{right:calc(16px - var(--D) * .072)}
}