/* ============================================================
   pg-mc.css - media.html + contact.html only.
   Round 9 rebuild (REQUIREMENTS P1 to P7). Loaded after fable.css,
   motion-kit.css and kit4.css on these two pages. Every rule is scoped to
   body.pg-media or body.pg-contact (or a class only these pages use).

   What lives here, and what does not:
   - The hero box, the full viewport height, the photo ground, the ink on it,
     the drift and the box ring all come from the shared files (the photo
     system in fable.css, the box rule in motion-kit.css). This file only
     places copy, sizes type and lays out each section.
   - Nothing here paints over a photograph: no scrim, fade, mask, vignette,
     tint or grain. Text sits directly on the picture and the runtime picks
     the ink (dark navy on light ground, white on dark ground).
   - Boxes answer hover and keyboard focus with the shared 1.5px ring only
     (class "box"). There is no hover rule for a box in this file.

   Parts: 1 shared, 2 media hero and contact hero, 3 media articles,
   4 media reach, 5 media collab, 6 contact doors and form (6b the five scenes), 7 contact close,
   8 reading light (8b staggered arrival), 9 reduced motion.
   Round 10: the round 8 drawings (reach dots and bars, the five door scenes), their hover answers and the staggered
   rise come back inside the round 9 layout. Boxes still answer with the shared ring only.

   Zero em or en dashes anywhere, including these comments.
   ============================================================ */

/* ================================================================
   1. SHARED
   ================================================================ */
body.pg-media,body.pg-contact{
  --mc-navy:#0C1833;
  --mc-ink:#F4F7FB;
  --mc-red:#E23A46;
  --mc-coral:#FF6B75;
  --mc-deep:#9C1B27;
  --mc-ease:var(--ease-snap,cubic-bezier(.16,1,.3,1));
  --mc-box-r:var(--box-r,14px);
  --mc-stage-r:var(--stage-r,20px);
  --mc-line-l:var(--line-light,rgb(11 27 51 / .14));
  --mc-pad:var(--sec-pad,clamp(4.5rem,8vw,7.5rem));
  /* the heading scale (S3): hero h1, section h2, card and item titles. Fluid, so 1024 to 1920 grows smoothly and a phone stays sane.
     1200px: 86 / 72 / 31. 390px: 46 / 38 / 22. */
  --mc-t-h1:clamp(2.9rem,7.2vw,8.75rem);
  --mc-t-h2:clamp(2.4rem,6vw,5.75rem);
  --mc-t-h3:clamp(1.35rem,2.6vw,2.25rem);
}
.mc-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* type. No colour is set on anything that sits over a photo: the ink runtime owns it. */
body.pg-media .mc-kick{
  margin:0 0 1.1rem;font:700 1rem/1.2 var(--body);letter-spacing:.01em;text-transform:none;
}
body.pg-media .mc-h1,body.pg-contact .mc-h1{
  margin:0 0 1.3rem;max-width:none;font:800 var(--mc-t-h1)/1 var(--display);letter-spacing:-.036em;text-wrap:balance;
}
body.pg-media .mc-h2,body.pg-contact .mc-h2{
  margin:0;font:800 var(--mc-t-h2)/1.04 var(--display);letter-spacing:-.03em;text-wrap:balance;
}
body.pg-media .mc-h1 em,body.pg-contact .mc-h1 em,body.pg-media .mc-h2 em,body.pg-contact .mc-h2 em{font-style:normal;}
body.pg-media .mc-deck,body.pg-contact .mc-deck{
  margin:0 0 2rem;max-width:34ch;font:500 clamp(1.1rem,1.4vw,1.28rem)/1.5 var(--body);text-wrap:pretty;
}
body.pg-media .mc-cta,body.pg-contact .mc-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem;margin:0;}

/* the on-crimson primary button (white pill, same M2 behaviour: lift, glow, glint) */
body.pg-media .k4-btn.k4-btn--onred{
  background:#fff;color:#8E1620;
  box-shadow:0 1px 0 rgb(255 255 255 / .9) inset,0 18px 34px -16px rgb(60 4 10 / .8);
}
body.pg-media .k4-btn--onred .k4-btn__glow{background:radial-gradient(60% 100% at 50% 100%,rgb(255 255 255 / .7),transparent 72%);}
body.pg-media .k4-btn--onred .k4-btn__glint::after{
  background:linear-gradient(115deg,transparent 32%,rgb(226 58 70 / .38) 48%,transparent 64%);background-size:260% 100%;background-position:160% 0;mix-blend-mode:normal;
}
@media (hover:hover) and (pointer:fine){
  body.pg-media .k4-btn.k4-btn--onred:hover{
    background:#fff;transform:translateY(-2px);
    box-shadow:0 1px 0 #fff inset,0 0 0 4px rgb(255 255 255 / .26),0 24px 44px -16px rgb(60 4 10 / .85);
  }
}
body.pg-media .k4-btn.k4-btn--onred:focus-visible{background:#fff;box-shadow:0 0 0 4px rgb(255 255 255 / .3);outline:2px solid #fff;outline-offset:4px;}

/* motion-kit.js also decorates every M2 button with its own halo and glint; the button
   already carries both, so the duplicate is hidden and the M2 glow stays */
body.pg-contact .k4-btn .mkx-glint-clip{display:none;}
body.pg-contact .k4-btn.mkx-btn::after{display:none;}
body.pg-contact .k4-btn--primary.mkx-btn:hover:not(:disabled){box-shadow:0 1px 0 rgb(255 255 255 / .22) inset,var(--k4-glow);}

/* ================================================================
   2. THE TWO HEROES (.phero--photo, full viewport, copy on a calm area)
   fable.css gives the box (100svh, no cap), the ground, the drift and
   the column (data-copy and --photo-copy-w). The copy block is locked to
   white ink (data-ink-lock): both pictures keep a dark panel behind it at
   every width, so the runtime has nothing to decide and nothing flips.
   ================================================================ */
body.pg-media .mc-hero .sec-inner,body.pg-contact .mc-hero .sec-inner{padding-block:clamp(2rem,5vw,4rem);}
body.pg-media .mc-hero .phero__copy,body.pg-contact .mc-hero .phero__copy{padding-block:0;}
/* the copy column is a share of the width, because both pictures scale with the width: it is wide enough for the display headline
   and its left edge stays on the calm dark side to the right of him (clear of his face, ear and shoulder) at every desktop width.
   Below 901px (or in a portrait window) the block below makes it full width again. */
body.pg-media .mc-hero[data-copy] .phero__copy{max-width:min(39vw,100%);}
body.pg-contact .mc-hero[data-copy] .phero__copy{max-width:min(41.5vw,100%);}
/* media: the shoulder of his jacket reaches out to about 54 percent of the width low in the frame, so this headline is a touch
   smaller than the contact one and the whole block sits a little higher, which keeps the buttons clear of the shoulder */
@media (min-width:901px) and (min-aspect-ratio:101/100){
  body.pg-media .mc-hero .mc-h1{font-size:clamp(2.9rem,6.9vw,8.4rem);}
  /* top aligned, a fixed share of the window height below the bar (not centred), so the block rides high enough to keep the
     buttons clear of the shoulder and still fits inside one screen on short laptops (the hero must stay exactly one screen tall) */
  body.pg-media .mc-hero{align-items:flex-start;}
  body.pg-media .mc-hero .sec-inner{padding-top:max(1rem,19svh - 96px);padding-bottom:.75rem;}
  /* contact: on squarer windows (4:3 tablets, 5:4) the picture is cropped less at the sides and his shoulder reaches further
     out low in the frame, so the block rides higher there; at 3:2 and wider it stays centred */
  body.pg-contact .mc-hero .sec-inner{padding-bottom:calc(clamp(2rem,5vw,4rem) + max(0px,105vh - 70vw));}
}

/* a masked headline line (.rl-clip, overflow hidden) would cut its own text shadow into a rectangle, so over a
   photograph the soft shadow goes on the whole headline as one filter instead, and the accent word borrows it */
body.pg-media .mc-hero .mc-h1,body.pg-contact .mc-hero .mc-h1,body.pg-contact .mc-close .mc-h2,body.pg-media .mc-reach__h{
  text-shadow:none!important;filter:var(--ink-fd,none);
}
body.pg-media .mc-hero .mc-h1 em,body.pg-contact .mc-hero .mc-h1 em,body.pg-contact .mc-close .mc-h2 em,body.pg-media .mc-reach__h em{filter:none!important;}

/* contact headline: three lines, each one its own masked rise (fable.css .rl-clip) */
body.pg-contact .mc-h1--contact{margin:0 0 1.5rem;text-wrap:initial;}
body.pg-contact .mc-h1--contact .mc-pre{
  font:800 clamp(1.55rem,3.1vw,3.4rem)/1.08 var(--display);letter-spacing:-.025em;margin:0 0 .35em;text-wrap:balance;
}
body.pg-contact .mc-h1--contact .mc-main{
  font:800 var(--mc-t-h1)/.98 var(--display);letter-spacing:-.04em;
}
body.pg-contact .mc-h1--contact .rl-clip + .rl-clip{margin-top:0;}
/* the line masks only rise under JS; with no script each line simply sits in place */
html:not(.js) body.pg-contact .mc-h1--contact .rl-clip > span{transform:none;}
body.pg-contact .mc-h1 em.mc-nw{white-space:nowrap;}
body.pg-contact .mc-hero .mc-deck{max-width:30ch;font:500 clamp(1.15rem,1.5vw,1.35rem)/1.5 var(--body);}

/* tablet, phone and any portrait window: the portrait source fills the screen and the copy is
   anchored low, over the dark jacket. The shared rules move the phone crop at 700px; this
   keeps the same art direction up to 900px and for portrait windows */
@media (max-width:900px),(max-aspect-ratio:1/1){
  body.pg-media .mc-hero,body.pg-contact .mc-hero{align-items:flex-end;}
  body.pg-media .mc-hero .phero__bg img,body.pg-contact .mc-hero .phero__bg img{
    object-position:var(--photo-pos-m,var(--photo-pos,50% 50%))!important;
  }
  body.pg-media .mc-hero[data-copy] .phero__copy,body.pg-contact .mc-hero[data-copy] .phero__copy{
    max-width:none;margin-left:0;padding-bottom:max(2rem,env(safe-area-inset-bottom));
    --ink-sh:var(--pi-sh-light-busy);--ink-fd:var(--pi-fd-light-busy);
  }
  body.pg-media .mc-hero .sec-inner,body.pg-contact .mc-hero .sec-inner{padding-bottom:0;padding-top:0;}
  body.pg-media .mc-hero .mc-deck{max-width:34ch;font-size:1.05rem;margin-bottom:1.5rem;}
  body.pg-contact .mc-hero .mc-deck{max-width:26ch;}
  body.pg-media .mc-h1,body.pg-contact .mc-hero .mc-h1:not(.mc-h1--contact){font-size:clamp(2.9rem,9vw,5.4rem);}
  body.pg-contact .mc-h1--contact .mc-main{font-size:clamp(2.9rem,9vw,5.4rem);}
  body.pg-contact .mc-h1--contact .mc-pre{font-size:clamp(1.55rem,4vw,2.8rem);}
}
@media (max-width:480px){
  body.pg-media .mc-hero .mc-cta,body.pg-contact .mc-hero .mc-cta{align-items:stretch;flex-direction:column;gap:.9rem;}
  body.pg-media .mc-hero .mc-cta .k4-btn--primary,body.pg-contact .mc-hero .mc-cta .k4-btn--primary{width:100%;min-height:52px;justify-content:center;}
  body.pg-media .mc-hero .mc-cta .k4-btn--text,body.pg-contact .mc-hero .mc-cta .k4-btn--text{align-self:flex-start;}
}

/* ================================================================
   3. MEDIA: THE COVERAGE (#articles, flat paper, press as large type rows)
   ================================================================ */
body.pg-media .mc-press{position:relative;background:#F4F7FB;color:#0B1B33;}
body.pg-media .mc-press__in{
  padding-block:var(--mc-pad);
  display:grid;grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr);column-gap:clamp(2rem,5vw,5rem);align-items:start;
}
body.pg-media .mc-press__head{position:sticky;top:7.2rem;}
body.pg-media .mc-press .mc-h2{max-width:12ch;color:#0B1B33;}
body.pg-media .mc-marks{
  list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 1.6rem;
  font:700 1rem/1.3 var(--body);color:rgb(11 27 51 / .72);cursor:default;
}
body.pg-media .mc-marks li{white-space:nowrap;transition:opacity .3s ease;}
/* the outlet names answer the pointer: the word fills with the crimson ramp, the rest step back, and the
   rows from that outlet get the shared box ring (round 8 behaviour, ring instead of lift) */
body.pg-media .mc-marks li span{
  display:inline-block;
  background:linear-gradient(100deg,rgb(11 27 51 / .72) 0%,rgb(11 27 51 / .72) 46%,#9C1B27 54%,#E23A46 100%);background-size:240% 100%;background-position:0 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  transition:background-position .7s var(--mc-ease);
}
@media (hover:hover) and (pointer:fine){
  body.pg-media .mc-marks li:hover span{background-position:100% 0;}
  body.pg-media .mc-press:has(.mc-marks li:hover) .mc-marks li:not(:hover){opacity:.5;}
  body.pg-media .mc-press:has(.mc-marks li[data-o="bi"]:hover) .mc-row[data-o="bi"],
  body.pg-media .mc-press:has(.mc-marks li[data-o="nw"]:hover) .mc-row[data-o="nw"],
  body.pg-media .mc-press:has(.mc-marks li[data-o="dm"]:hover) .mc-row[data-o="dm"]{outline-color:var(--mkx-ring);transition:outline-color 220ms ease;}
}

body.pg-media .mc-rows{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;}
body.pg-media .mc-rows > li{margin:0;min-width:0;}
body.pg-media .mc-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"o go" "t go";align-items:center;
  column-gap:1.5rem;row-gap:.35rem;
  padding:clamp(1.2rem,2vw,1.7rem) clamp(1.2rem,2vw,1.6rem);
  border:1px solid var(--mc-line-l);border-radius:var(--mc-box-r);background:#fff;box-shadow:none;
  color:#0B1B33;text-decoration:none;
}
body.pg-media .mc-row__o{grid-area:o;font:700 .95rem/1.2 var(--body);color:rgb(11 27 51 / .72);}
body.pg-media .mc-row__t{grid-area:t;font:800 var(--mc-t-h3)/1.1 var(--display);letter-spacing:-.025em;text-wrap:balance;}
body.pg-media .mc-row__go{grid-area:go;font-size:1.25rem;line-height:1;color:#9C1B27;}
body.pg-media .mc-row--lead{padding-block:clamp(1.8rem,3vw,2.6rem);}
body.pg-media .mc-row--lead .mc-row__t{font-size:clamp(2.3rem,4.1vw,3.6rem);}
body.pg-media .mc-row__go{display:inline-block;transition:translate .35s var(--mc-ease);}
body.pg-media .mc-row__t span{
  background:linear-gradient(#9C1B27,#9C1B27) left 100% / 0 2px no-repeat;padding-bottom:.08em;
  transition:background-size .4s var(--mc-ease);
}
/* inside the row only: the arrow nudges 5px (the same `translate` property the shared kit uses for any __go arrow, so the two never stack)
   and the title draws its underline (the row itself answers with the shared ring) */
@media (hover:hover) and (pointer:fine){
  body.pg-media .mc-row:hover .mc-row__go{translate:5px 0;}
  body.pg-media .mc-row:hover .mc-row__t span{background-size:100% 2px;}
}
body.pg-media .mc-row:focus-visible .mc-row__go{translate:5px 0;}
body.pg-media .mc-row:focus-visible .mc-row__t span{background-size:100% 2px;}

@media(max-width:960px){
  body.pg-media .mc-press__in{display:block;}
  body.pg-media .mc-press__head{position:static;margin-bottom:clamp(2rem,3.4vw,3rem);}
  body.pg-media .mc-marks{margin-bottom:0;}
}
@media(max-width:640px){
  body.pg-media .mc-row{min-height:64px;}
  body.pg-media .mc-row__t{font-size:clamp(1.35rem,5.8vw,1.8rem);}
  body.pg-media .mc-row--lead .mc-row__t{font-size:clamp(1.95rem,8.4vw,2.6rem);}
}

/* ================================================================
   4. MEDIA: PUBLIC REACH (#reach: the whole panel photo as a stage, two numbers on its floor)
   The photo is 16:9 and the stage keeps that ratio, so nothing is cropped at any width. Its own black
   floor (the bottom sixth) carries the two numbers; the heading sits on the calm wall.
   ================================================================ */
body.pg-media .mc-reach{position:relative;overflow:hidden;background:var(--mc-navy);color:var(--mc-ink);}
body.pg-media .mc-reach__stage{position:relative;}
body.pg-media .mc-reach__ph{position:relative;aspect-ratio:2400/1350;overflow:hidden;}
body.pg-media .mc-reach__h{
  position:absolute;z-index:3;left:37%;top:3.6%;width:auto;margin:0;white-space:nowrap;
  font:800 clamp(2.4rem,4.9vw,8rem)/1 var(--display);letter-spacing:-.03em;
}
body.pg-media .mc-stats{
  position:absolute;z-index:3;left:0;right:0;bottom:0;height:16.667%;
  display:grid;grid-template-columns:calc(57vw - var(--gutter)) minmax(0,1fr);align-content:center;align-items:end;
  padding:0 var(--gutter);
}
body.pg-media .mc-stat{min-width:0;}
body.pg-media .mc-stat__k{display:block;margin:0 0 .35rem;font:700 clamp(.95rem,1.15vw,1.15rem)/1.2 var(--display);letter-spacing:0;text-transform:none;}
body.pg-media .mc-stat__n{
  display:block;margin:0;font:800 clamp(2.6rem,5.6vw,6.4rem)/.9 var(--display);letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* the plus is its own box (it pops), so it cannot borrow the numeral's clipped gradient: solid coral, the gradient's light end */
body.pg-media .mc-stat__n sup{display:inline-block;font-size:.4em;vertical-align:top;position:relative;top:.14em;margin-left:.05em;letter-spacing:0;-webkit-text-fill-color:var(--mc-coral);color:var(--mc-coral);}
/* the plus pops when the count lands, then the gradient runs across the numeral once (no endless drift) */
@keyframes mcPlus{0%{transform:scale(.4);opacity:0;}60%{transform:scale(1.25);opacity:1;}100%{transform:scale(1);opacity:1;}}
@keyframes mcShine{from{background-position:100% 50%;}to{background-position:18% 50%;}}
body.pg-media .mc-stat__n.k4-grad{animation:mcShine 1.6s ease-out 1.7s 1 both;animation-play-state:paused;}
html.js body.pg-media .mc-stats:not(.is-in) .mc-stat__n sup{opacity:0;}
html.js body.pg-media .mc-stats.is-in .mc-stat__n sup{animation:mcPlus .6s var(--mc-ease) 1.6s both;}
body.pg-media .mc-stats.is-in .mc-stat__n.k4-grad{animation-play-state:running;}

/* the two drawings from round 8 (a crowd of dots filling, bars rising) sit on the stage floor beside each number.
   The stat becomes a two column grid: label across the top, number left, drawing right. */
body.pg-media .mc-stat{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(1rem,2.4vw,2.8rem);align-items:end;}
body.pg-media .mc-stat__k{grid-column:1 / -1;}
body.pg-media .mc-stat__n{grid-column:1;}
body.pg-media .mc-stat__art{grid-column:2;grid-row:2;align-self:end;justify-self:start;width:100%;max-width:360px;height:clamp(44px,5.4vw,104px);}
body.pg-media .mc-stat__art svg{display:block;width:100%;height:100%;overflow:visible;}
body.pg-media .mc-dim{fill:rgb(244 247 251 / .14);}
body.pg-media .mc-on{
  transform-box:fill-box;transform-origin:center;
  transition:opacity .5s ease,transform .7s var(--mc-ease);transition-delay:var(--d,0ms);
}
html.js:not(.no-js) body.pg-media .mc-stats:not(.is-in) .mc-on{opacity:0;transform:scale(.25);}
body.pg-media .mc-base{stroke:rgb(244 247 251 / .22);stroke-width:1.4;stroke-linecap:round;}
body.pg-media .mc-bar-o{
  fill:none;stroke:rgb(244 247 251 / .26);stroke-width:1.4;stroke-dasharray:1 1.2;stroke-dashoffset:0;
  transition:stroke-dashoffset 1.1s var(--k4-ease,cubic-bezier(.16,1,.3,1)) calc(var(--i,0) * 80ms);
}
html.js:not(.no-js) body.pg-media .mc-stats:not(.is-in) .mc-bar-o{stroke-dashoffset:1.1;}
body.pg-media .mc-bar{
  fill:url(#mcBarG);opacity:var(--o,1);transform-box:fill-box;transform-origin:50% 100%;
  transition:opacity .5s ease,transform .8s var(--mc-ease);transition-delay:var(--d,0ms);
}
html.js:not(.no-js) body.pg-media .mc-stats:not(.is-in) .mc-bar{opacity:0;transform:scaleY(.04);}
/* the drawing reacts inside its own area (no box, no ring): the bars deepen, the crowd brightens */
@media (hover:hover) and (pointer:fine){
  body.pg-media .mc-stat--bars:hover .mc-bar{filter:saturate(1.25) brightness(1.08);}
  body.pg-media .mc-stat--dots:hover .mc-on{filter:brightness(1.18);}
}

body.pg-media .mc-reach__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.6rem 3rem;
  padding-block:clamp(3rem,6vw,5rem);
}
body.pg-media .mc-reach__p{
  margin:0;max-width:26ch;font:700 clamp(1.65rem,3.45vw,3.2rem)/1.18 var(--display);letter-spacing:-.02em;color:var(--mc-ink);
}
body.pg-media .mc-reach__p em{font-style:normal;font-weight:800;}

@media(max-width:760px){
  body.pg-media .mc-reach__ph{aspect-ratio:3/4;}
  body.pg-media .mc-reach__h{left:44%;right:4%;width:auto;top:3%;white-space:normal;font-size:clamp(2.4rem,9.8vw,3.6rem);}
  body.pg-media .mc-stats{
    position:static;height:auto;display:grid;grid-template-columns:1fr;gap:1.6rem;align-content:start;align-items:start;
    padding:2.2rem var(--gutter) 0;
  }
  body.pg-media .mc-stat__n{font-size:clamp(3.6rem,19vw,5.6rem);}
  body.pg-media .mc-stat{grid-template-columns:1fr;row-gap:.5rem;}
  body.pg-media .mc-stat__n{grid-column:1;}
  body.pg-media .mc-stat__art{grid-column:1;grid-row:3;justify-self:start;width:min(100%,380px);height:auto;margin-top:.4rem;}
  body.pg-media .mc-dots{aspect-ratio:508 / 109;}
  body.pg-media .mc-bars{aspect-ratio:497 / 130;}
  body.pg-media .mc-reach__foot{flex-direction:column;align-items:flex-start;}
}

/* ================================================================
   5. MEDIA: COLLAB (#collab, a typographic crimson rest, no photo)
   ================================================================ */
body.pg-media .mc-collab{position:relative;color:#fff;}
body.pg-media .mc-collab__grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(2rem,5vw,5rem);align-items:center;
  min-height:clamp(480px,60svh,640px);padding-block:var(--mc-pad);
}
body.pg-media .mc-collab__h{
  grid-column:1 / 8;max-width:10ch;color:#fff;
  font-size:clamp(3rem,6.8vw,6.2rem);line-height:1;letter-spacing:-.025em;
}
body.pg-media .mc-collab__side{grid-column:8 / 13;}
body.pg-media .mc-collab__sub{margin:0 0 2rem;max-width:36ch;font:500 clamp(1.15rem,1.5vw,1.4rem)/1.5 var(--body);color:#fff;}
body.pg-media .mc-inl{
  color:inherit;text-decoration:none;padding-bottom:.12em;
  background:linear-gradient(rgb(244 247 251 / .6),rgb(244 247 251 / .6)) left 100% / 100% 1px no-repeat,linear-gradient(#fff,#fff) left 100% / 0 2px no-repeat;
  transition:background-size .4s var(--mc-ease);
}
@media (hover:hover) and (pointer:fine){
  body.pg-media .mc-inl:hover{background-size:100% 1px,100% 2px;}
}
body.pg-media .mc-inl:focus-visible{background-size:100% 1px,100% 2px;}
@media(max-width:860px){
  body.pg-media .mc-collab__grid{display:block;min-height:0;}
  body.pg-media .mc-collab__h{max-width:11ch;margin-bottom:1.6rem;}
}

/* ================================================================
   6. CONTACT: FIVE DOORS, ONE DRAWING, ONE FORM (#contact)
   A row of five boxes picks the topic; the picked door's own drawing (it flies in from its card) and one
   sentence change with it; the form sits beside them. No boxes around the groups, only the boxes that can be pressed.
   ================================================================ */
body.pg-contact .mc-contact{position:relative;background:var(--mc-navy);}
body.pg-contact .mc-contact__in{padding-block:var(--mc-pad);}
body.pg-contact .mc-contact__head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.4rem 3rem;margin-bottom:clamp(2rem,3.6vw,3rem);
}
body.pg-contact .mc-contact__head .mc-h2{max-width:8em;}
body.pg-contact .mc-contact__lede{
  margin:0;max-width:26ch;font:500 var(--t-lede,clamp(1.1rem,1rem + .5vw,1.4rem))/1.5 var(--body);color:rgb(244 247 251 / .84);padding-bottom:.4rem;
}

/* the selector: five door cards, each with its own drawn scene (round 8 composition, round 9 box).
   The card is a plain box: the shared ring answers hover and focus, the picked door keeps a solid crimson boundary.
   No top bar, no lift, no wash, no glow on the box; the scene inside it is what moves. */
body.pg-contact .contact__ways.mc-doors{
  list-style:none;margin:0 0 clamp(1.6rem,3vw,2.4rem);padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);
  background:none;border:0;box-shadow:none;
}
body.pg-contact .contact__ways.mc-doors > li{display:flex;min-width:0;margin:0;padding:0;border:0;grid-column:span 2;}
body.pg-contact .contact__ways.mc-doors > li:nth-child(n+4){grid-column:span 3;}
body.pg-contact .contact__ways .way__btn.mc-door{
  width:100%;height:100%;min-height:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;text-align:left;cursor:pointer;
  padding:clamp(1.1rem,1.8vw,1.5rem);font:inherit;color:var(--mc-ink);
  background:transparent;border:1.5px solid rgb(255 255 255 / .22);border-radius:var(--mc-box-r);box-shadow:none;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;
}
body.pg-contact .mc-door__art{position:relative;display:block;height:clamp(120px,13vw,164px);margin:0 0 1rem;}
body.pg-contact .mc-door__art svg{display:block;width:100%;height:100%;overflow:visible;}
body.pg-contact .mc-door__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .8rem;margin-bottom:.6rem;}
body.pg-contact .mc-door__n{font:800 clamp(1.9rem,3vw,3rem)/1 var(--display);letter-spacing:-.03em;color:var(--mc-coral);}
body.pg-contact .mc-door__t{font:800 var(--mc-t-h3)/1.08 var(--display);letter-spacing:-.025em;color:var(--mc-ink);}
body.pg-contact .mc-door__d{display:block;font:500 1rem/1.5 var(--body);color:rgb(244 247 251 / .82);max-width:44ch;}
body.pg-contact .mc-door__cta{display:inline-flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:1.1rem;font:700 .95rem/1 var(--body);color:var(--mc-coral);}
body.pg-contact .mc-door__cta .arr{display:inline-block;transition:transform .35s var(--mc-ease);}
body.pg-contact .mc-door__on{display:none;}
body.pg-contact .mc-door[aria-pressed="true"] .mc-door__off{display:none;}
body.pg-contact .mc-door[aria-pressed="true"] .mc-door__on{display:inline;}
/* the picked door: a solid crimson boundary, 2.5px in all, and its drawing held a little brighter */
body.pg-contact .contact__ways .way__btn.mc-door[aria-pressed="true"]{border-color:var(--mc-red);box-shadow:inset 0 0 0 1px var(--mc-red);}
body.pg-contact .mc-door[aria-pressed="true"] .k4-draw{stroke:rgb(244 247 251 / .66);}
body.pg-contact .mc-door[aria-pressed="true"] .k4-draw--accent{stroke:var(--mc-coral);}
/* row two: two wider doors, drawing left, words right (a second composition under the three) */
@media(min-width:901px){
  body.pg-contact .contact__ways.mc-doors > li:nth-child(n+4) .mc-door{
    display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:1fr auto 1fr auto;column-gap:clamp(.6rem,1.6vw,1.4rem);align-items:center;
  }
  body.pg-contact .contact__ways.mc-doors > li:nth-child(n+4) .mc-door__art{grid-row:1 / 5;grid-column:1;height:100%;min-height:150px;margin:0;}
  body.pg-contact .contact__ways.mc-doors > li:nth-child(n+4) .mc-door__row{grid-column:2;grid-row:2;align-self:end;}
  body.pg-contact .contact__ways.mc-doors > li:nth-child(n+4) .mc-door__d{grid-column:2;grid-row:3;align-self:start;}
  body.pg-contact .contact__ways.mc-doors > li:nth-child(n+4) .mc-door__cta{grid-column:2;grid-row:4;align-self:end;padding-top:.8rem;margin-top:0;}
}

/* the panel: the stage drawing and words on the left, the form on the right, same height */
body.pg-contact .mc-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);align-items:stretch;}
body.pg-contact .mc-side{display:flex;flex-direction:column;min-width:0;}
body.pg-contact .mc-stage{
  position:relative;margin:0;aspect-ratio:4/3;border-radius:var(--mc-stage-r);overflow:hidden;scroll-margin-top:90px;
  background:linear-gradient(160deg,#0C1833 0%,#0F1D3F 52%,#13244A 100%);border:1.5px solid rgb(255 255 255 / .22);
}
body.pg-contact .mc-stage__in{position:absolute;inset:0;}
/* the stage shows the picked door's own drawing (the card's SVG, cloned by pg-mc.js). A scene fills a centred box, about
   78 percent of the stage width; the drawing fits inside it and stays centred. Scenes are stacked and only .is-on is seen.
   No JS: the Speaking scene sits in the markup with .is-on. */
body.pg-contact .mc-scene{position:absolute;inset:9% 11%;display:block;opacity:0;pointer-events:none;transform-origin:50% 50%;}
body.pg-contact .mc-scene.is-on{opacity:1;}
/* the consulting drawing has its weight in the lower part of its box: nudge the box down so the drawing sits centred */
body.pg-contact .mc-scene[data-for="Consulting"]{inset:13% 11% 5%;}
/* the envelope rests low in its drawing (the letter used the room above): lift the box a little so the closed envelope sits near the middle */
body.pg-contact .mc-scene[data-for="Something else"]{inset:5% 11% 13%;}
body.pg-contact .mc-scene > svg{display:block;width:100%;height:100%;max-width:none;overflow:visible;}
/* the drawing is held in the same ink as the picked card: bright strokes, coral accent */
body.pg-contact .mc-scene .k4-draw{stroke:rgb(244 247 251 / .66);}
body.pg-contact .mc-scene .k4-draw--accent{stroke:var(--mc-coral);}
/* ambient loop: the whole drawing drifts a few pixels while the stage is on screen (pg-mc.js adds .is-live) */
@keyframes mcFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-1.8%);}}
body.pg-contact .mc-scene.is-live > svg{animation:mcFloat 7s ease-in-out infinite;}
/* a scene (or a door card, when its drawing re-draws after a flight) is set to a finished or an armed state with
   transitions and animations off for one frame */
body.pg-contact .mc-nofx,body.pg-contact .mc-nofx *{transition:none !important;animation:none !important;}
/* the flying copy of a card's drawing: sized to the stage drawing, laid at its place in the document, moved by transform
   (translate and scale) from the card to the stage, then swapped for the real stage scene in one frame */
body.pg-contact .mc-scene.mc-fly{inset:auto;z-index:60;margin:0;opacity:1;transform-origin:0 0;will-change:transform;}
body.pg-contact .mc-door__art{transition:opacity .5s ease;}
body.pg-contact .mc-door__art.is-flying{opacity:0;transition-duration:.14s;}

body.pg-contact .mc-cap{
  margin:1.4rem 0 0;max-width:36ch;min-height:3em;font:500 1.15rem/1.5 var(--body);color:rgb(244 247 251 / .92);
  transition:opacity .25s ease;
}
body.pg-contact .mc-panel.is-swap .mc-cap{opacity:0;}
/* the picked door, named under the stage (the swap fades like the sentence) */
body.pg-contact .mc-pick__row{display:flex;align-items:baseline;gap:1rem;margin:1.3rem 0 .5rem;transition:opacity .25s ease,transform .25s ease;}
body.pg-contact .mc-pick__n{font:800 clamp(2.6rem,4.6vw,4.4rem)/.9 var(--display);letter-spacing:-.04em;color:var(--mc-coral);}
body.pg-contact .mc-pick__n:empty{display:none;}
body.pg-contact .mc-pick__t{margin:0;font:800 clamp(1.9rem,3.3vw,3.1rem)/1.04 var(--display);letter-spacing:-.03em;color:var(--mc-ink);}
body.pg-contact .mc-panel.is-swap .mc-pick__row{opacity:0;transform:translateY(5px);}
body.pg-contact .mc-cap{margin-top:0;}
body.pg-contact .mc-direct{margin:auto 0 0;padding-top:1.6rem;display:grid;gap:.3rem;justify-items:start;}
body.pg-contact .mc-direct__k{font:500 .95rem/1.4 var(--body);color:rgb(244 247 251 / .78);}
body.pg-contact .mc-direct__mail,body.pg-contact .mc-direct__ig{
  color:var(--mc-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;
  text-decoration-color:rgb(244 247 251 / .55);word-break:break-word;transition:text-decoration-color .2s ease;
}
body.pg-contact .mc-direct__mail{font:700 1.2rem/1.3 var(--body);}
body.pg-contact .mc-direct__ig{font:500 1rem/1.3 var(--body);color:rgb(244 247 251 / .86);}
@media (hover:hover) and (pointer:fine){
  body.pg-contact .mc-direct a:hover{text-decoration-color:var(--mc-coral);}
}
body.pg-contact .mc-direct a:focus-visible{text-decoration-color:var(--mc-coral);}

/* the form: fields answer with their own border, nothing else */
body.pg-contact #contact .cform{
  display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:1.15rem;min-width:0;padding:0;border:0;border-radius:0;
  background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
}
body.pg-contact #contact .cform__row{display:grid;gap:.5rem;margin:0;}
body.pg-contact #contact .cform__row--msg{grid-template-rows:auto minmax(0,1fr);}
body.pg-contact #contact .cform__row--msg .cform__ta{height:100%;}
body.pg-contact #contact .cform__two{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem;}
body.pg-contact #contact .cform__lab{font:700 .95rem/1.2 var(--body);letter-spacing:0;text-transform:none;color:rgb(244 247 251 / .92);}
body.pg-contact #contact .cform__in{
  width:100%;min-height:56px;padding:.95rem 1.05rem;border-radius:var(--mc-box-r);font:400 1.05rem/1.4 var(--body);color:var(--mc-ink);
  background:transparent;border:1.5px solid rgb(255 255 255 / .28);box-shadow:none;transition:border-color .2s ease;
}
body.pg-contact #contact .cform__in::placeholder{color:rgb(244 247 251 / .5);}
body.pg-contact #contact .cform__ta{min-height:160px;resize:vertical;}
body.pg-contact #contact .cform__sel option{color:#0B1B33;background:#fff;}
body.pg-contact #contact .cform__caret{border-color:rgb(244 247 251 / .8);}
@media (hover:hover) and (pointer:fine){
  body.pg-contact #contact .cform__in:hover{border-color:var(--mc-coral);}
}
body.pg-contact #contact .cform__in:focus{outline:none;border-color:var(--mc-red);box-shadow:inset 0 0 0 1px var(--mc-red);background:transparent;}
body.pg-contact #contact .cform__submit.k4-btn{justify-self:start;margin-top:.3rem;}
body.pg-contact #contact .cform__ok{margin:0;min-height:1.3em;font:500 .95rem/1.5 var(--body);color:rgb(244 247 251 / .82);}
body.pg-contact #contact .cform__ok.is-ok{color:#7FE0A8;}
body.pg-contact #contact .cform__ok.is-err{color:#FF9AA2;}
body.pg-contact #contact .cform__ok a{color:inherit;text-decoration:underline;}

@media(max-width:900px){
  body.pg-contact .contact__ways.mc-doors{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.pg-contact .contact__ways.mc-doors > li,body.pg-contact .contact__ways.mc-doors > li:nth-child(n+4){grid-column:auto;}
  body.pg-contact .contact__ways.mc-doors > li:last-child{grid-column:1 / -1;}
  /* phone order: doors, stage, picked door, sentence, form, then the direct address */
  body.pg-contact .mc-panel{display:flex;flex-direction:column;gap:0;}
  body.pg-contact .mc-side{display:contents;}
  body.pg-contact .mc-stage{order:1;aspect-ratio:16/11;}
  body.pg-contact .mc-scene{inset:8% 9%;}
  body.pg-contact .mc-scene[data-for="Consulting"]{inset:12% 9% 4%;}
  body.pg-contact .mc-scene[data-for="Something else"]{inset:4% 9% 12%;}
  body.pg-contact .mc-pick__row{order:2;}
  body.pg-contact .mc-cap{order:3;margin-bottom:2rem;}
  body.pg-contact #contact .cform{order:4;}
  body.pg-contact .mc-direct{order:5;margin-top:1.6rem;padding-top:0;}
}
@media(max-width:560px){
  body.pg-contact .contact__ways.mc-doors{grid-template-columns:1fr;}
  body.pg-contact .mc-door__art{height:128px;}
  body.pg-contact .mc-door__t{font-size:1.4rem;}
  body.pg-contact #contact .cform__two{grid-template-columns:1fr;}
}

/* ================================================================
   6b. THE FIVE SCENES (ported from round 8 pg-mc.css part 7)
   Draw in on arrival, one living loop while on screen, a hover answer. A scene is armed only when scripts run
   (html.js, no .no-js); with no JS every stroke simply sits fully drawn. The host is the door button
   ([data-mc-io]); pg-mc.js adds .is-in on arrival and .is-live while it is on screen and the tab is visible.
   ================================================================ */
body.pg-contact .k4-draw{
  stroke-dasharray:1 1.2;stroke-dashoffset:0;
  transition:stroke-dashoffset 1.1s var(--k4-ease,cubic-bezier(.16,1,.3,1)) calc(var(--i,0) * 90ms),stroke .35s ease,stroke-width .35s ease;
}
html.js:not(.no-js) body.pg-contact [data-mc-io]:not(.is-in) .k4-draw{stroke-dashoffset:1.1;}
body.pg-contact .mc-soft{stroke:rgb(244 247 251 / .26);}
body.pg-contact .mc-bold{stroke-width:2.6;stroke:rgb(244 247 251 / .62);}
body.pg-contact .mc-grid{stroke:rgb(244 247 251 / .14);stroke-width:1;fill:none;}
body.pg-contact .mc-pop{
  transform-box:fill-box;transform-origin:center;
  transition:opacity .55s ease,transform .7s var(--mc-ease);transition-delay:var(--d,0ms);
}
html.js:not(.no-js) body.pg-contact [data-mc-io]:not(.is-in) .mc-pop{opacity:0;transform:scale(.45);}
body.pg-contact .mc-glow .mc-pop{filter:drop-shadow(0 0 5px rgb(255 107 117 / .85));}

/* speaking: the dot field twinkles */
@keyframes mcTwinkle{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.3;transform:scale(.55);}}
body.pg-contact .is-live .mc-dot--lit{animation:mcTwinkle 3.6s ease-in-out infinite;animation-delay:var(--t,0ms);}

/* consulting: the program being built */
body.pg-contact .mc-face{stroke:none;fill:none;}
body.pg-contact .mc-face.mc-solid{fill:#0F1D3F;transition:opacity .6s ease .35s;}
html.js:not(.no-js) body.pg-contact [data-mc-io]:not(.is-in) .mc-face.mc-solid{opacity:0;}
body.pg-contact .mc-accfill{fill:rgb(226 58 70 / .42);}
body.pg-contact .mc-accfill--l{fill:rgb(156 27 39 / .5);}
body.pg-contact .mc-gline{fill:none;stroke:rgb(244 247 251 / .38);stroke-width:1.3;stroke-dasharray:3 3;stroke-linejoin:round;}
body.pg-contact .mc-cube{transform-box:fill-box;}
@keyframes mcBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-2.6px);}}
@keyframes mcGhost{0%,100%{opacity:.35;}50%{opacity:1;}}
body.pg-contact .is-live .mc-cube--acc{animation:mcBob 3.8s ease-in-out infinite;}
body.pg-contact .is-live .mc-ghost{animation:mcGhost 3.8s ease-in-out infinite .6s;}

/* media: the focus box locks on, the REC light blinks */
body.pg-contact .mc-focus{transform-box:fill-box;transform-origin:center;transition:transform .9s var(--mc-ease) .5s;}
html.js:not(.no-js) body.pg-contact [data-mc-io]:not(.is-in) .mc-focus{transform:scale(1.7);}
@keyframes mcRec{0%,100%{opacity:1;}50%{opacity:.18;}}
body.pg-contact .mc-rec{transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 4px rgb(255 107 117 / .9));}
body.pg-contact .is-live .mc-rec{animation:mcRec 1.7s ease-in-out infinite;}

/* partnership: two documents slide together and the overlap lights up */
body.pg-contact .mc-docA,body.pg-contact .mc-docB{transition:transform 1s var(--mc-ease) .15s;}
html.js:not(.no-js) body.pg-contact [data-mc-io]:not(.is-in) .mc-docA{transform:translateX(-32px);}
html.js:not(.no-js) body.pg-contact [data-mc-io]:not(.is-in) .mc-docB{transform:translateX(32px);}
body.pg-contact .mc-meet{
  fill:rgb(226 58 70 / .5);stroke:var(--mc-coral);stroke-width:1.2;transform-box:fill-box;transform-origin:center;
  transition:opacity .5s ease .9s,transform .7s var(--mc-ease) .9s;
}
html.js:not(.no-js) body.pg-contact [data-mc-io]:not(.is-in) .mc-meet{opacity:0;transform:scaleX(.1);}
@keyframes mcMeet{0%,100%{opacity:.62;}50%{opacity:1;}}
body.pg-contact .is-live .mc-meet{animation:mcMeet 3.2s ease-in-out infinite 1.8s;}

/* education: the line rises from the book, its end point pulses */
body.pg-contact .mc-halo{fill:none;stroke:var(--mc-coral);stroke-width:1.3;transform-box:fill-box;transform-origin:center;opacity:0;}
@keyframes mcHalo{0%{transform:scale(.5);opacity:.9;}100%{transform:scale(2.1);opacity:0;}}
body.pg-contact .is-live .mc-halo{animation:mcHalo 2.6s ease-out infinite 1.6s;}
body.pg-contact .mc-rise{filter:drop-shadow(0 0 4px rgb(255 107 117 / .55));}

/* something else (select only, no card): the dispatch envelope. A letter with a heartbeat line slides in from above and goes
   inside, the flap closes over it, the heart wax seal stamps; then the seal beats while the stage is on screen.
   Drawing copied from the newsletter band (fable.js). The back flap is the open flap (behind the letter), the front flap
   is the closed flap (in front of the envelope); one hinge swing hands over from the first to the second.
   Resting state (no animation) is the closed, sealed envelope. */
body.pg-contact .mc-env-paper{fill:#14264D;stroke:rgb(244 247 251 / .66);stroke-width:1.8;stroke-linejoin:round;}
body.pg-contact .mc-env-letter,body.pg-contact .mc-env-flapb,body.pg-contact .mc-env-flapf,body.pg-contact .mc-env-seal{transform-box:view-box;}
body.pg-contact .mc-env-letter{transform-origin:110px 50px;opacity:0;transform:translateY(56px);}
body.pg-contact .mc-env-flapb{transform-origin:110px 74px;opacity:0;}
body.pg-contact .mc-env-flapf{transform-origin:110px 74px;}
body.pg-contact .mc-env-seal{transform-origin:110px 112px;}
body.pg-contact .mc-env-beat{transform-box:fill-box;transform-origin:center;}
body.pg-contact .mc-env-wax{fill:var(--mc-red);}
body.pg-contact .mc-env-rim{fill:none;stroke:rgb(244 247 251 / .85);stroke-width:1.4;}
body.pg-contact .mc-env-heart{fill:#F4F7FB;}
html.js:not(.no-js) body.pg-contact [data-mc-io]:not(.is-in) .mc-env-letter{transform:translateY(-34px);}
html.js:not(.no-js) body.pg-contact [data-mc-io]:not(.is-in) .mc-env-flapb{opacity:1;transform:scaleY(-1);}
html.js:not(.no-js) body.pg-contact [data-mc-io]:not(.is-in) .mc-env-flapf{transform:scaleY(0);}
html.js:not(.no-js) body.pg-contact [data-mc-io]:not(.is-in) .mc-env-seal{opacity:0;transform:scale(0);}
body.pg-contact .mc-scene.is-in .mc-env-letter{animation:mcEnvLetter 2.4s cubic-bezier(.45,0,.25,1) .55s both;}
body.pg-contact .mc-scene.is-in .mc-env-flapb{animation:mcEnvFlapB 2.4s ease-in-out .55s both;}
body.pg-contact .mc-scene.is-in .mc-env-flapf{animation:mcEnvFlapF 2.4s ease-in-out .55s both;}
body.pg-contact .mc-scene.is-in .mc-env-seal{animation:mcEnvSeal 2.4s var(--mc-ease) .55s both;}
@keyframes mcEnvLetter{0%{transform:translateY(-34px);opacity:0;}16%{opacity:1;}42%{transform:translateY(0);opacity:1;}72%{transform:translateY(56px);opacity:1;}72.1%,100%{transform:translateY(56px);opacity:0;}}
@keyframes mcEnvFlapB{0%,44%{transform:scaleY(-1);opacity:1;}60%{transform:scaleY(0);opacity:1;}60.1%,100%{transform:scaleY(0);opacity:0;}}
@keyframes mcEnvFlapF{0%,60%{transform:scaleY(0);}76%,100%{transform:scaleY(1);}}
@keyframes mcEnvSeal{0%,76%{transform:scale(0);opacity:0;}88%{transform:scale(1.25);opacity:1;}100%{transform:scale(1);opacity:1;}}
@keyframes mcEnvBeat{0%,52%,100%{transform:scale(1);}10%{transform:scale(1.09);}22%{transform:scale(1);}34%{transform:scale(1.05);}}
body.pg-contact .mc-scene.is-live .mc-env-beat{animation:mcEnvBeat 2.6s ease-in-out 3.2s infinite;}

/* hover and keyboard focus: INSIDE the box only (the box itself answers with the shared ring and nothing else).
   Round 8 got the stroke brightening from kit4.css .k4-card:hover; kit4 no longer carries it, so it lives here. */
@media (hover:hover) and (pointer:fine){
  body.pg-contact .mc-door:hover .k4-draw{stroke:rgb(244 247 251 / .68);}
  body.pg-contact .mc-door:hover .k4-draw--accent{stroke:#F4F7FB;filter:drop-shadow(0 0 5px rgb(255 107 117 / .7));}
  body.pg-contact .mc-door:hover .k4-fill--accent{filter:drop-shadow(0 0 5px rgb(255 107 117 / .6));}
  body.pg-contact .mc-door:hover .mc-door__cta .arr{transform:translateX(5px);}
  body.pg-contact .mc-door:hover .mc-focus{transform:scale(.86);transition-delay:0s;transition-duration:.5s;}
  body.pg-contact .mc-door:hover .mc-docA{transform:translateX(4px);transition-delay:0s;transition-duration:.5s;}
  body.pg-contact .mc-door:hover .mc-docB{transform:translateX(-4px);transition-delay:0s;transition-duration:.5s;}
}
body.pg-contact .mc-door:focus-visible .k4-draw{stroke:rgb(244 247 251 / .68);}
body.pg-contact .mc-door:focus-visible .k4-draw--accent{stroke:#F4F7FB;filter:drop-shadow(0 0 5px rgb(255 107 117 / .7));}
body.pg-contact .mc-door:focus-visible .k4-fill--accent{filter:drop-shadow(0 0 5px rgb(255 107 117 / .6));}
body.pg-contact .mc-door:focus-visible .mc-door__cta .arr{transform:translateX(5px);}
body.pg-contact .mc-door:focus-visible .mc-focus{transform:scale(.86);transition-delay:0s;transition-duration:.5s;}
body.pg-contact .mc-door:focus-visible .mc-docA{transform:translateX(4px);transition-delay:0s;transition-duration:.5s;}
body.pg-contact .mc-door:focus-visible .mc-docB{transform:translateX(-4px);transition-delay:0s;transition-duration:.5s;}

/* ================================================================
   7. CONTACT: THE CLOSE (#close, an open door on a calm beige wall)
   Navy ink sits directly on the wall. The crop is set here, per width, so the Control Room sign
   stays whole and the copy stays clear of the metal hinge.
   ================================================================ */
body.pg-contact .mc-close{
  --photo-pos:15% 41%;--photo-pos-m:58% 29%;
  /* where the metal hinge sits, as a pixel x, for any window: the picture is 16:9 and covers the section (about 100svh, at most
     940px), so its drawn width S is the larger of the window width and 16:9 of the section height; the crop keeps 15 percent of
     the overflow on the left (30 percent up to 1100px). --mc-room is the width the copy may use between the gutter and a
     36px gap short of the hinge. The headline and the column below are sized to it. */
  --mc-S:max(100vw,min(100svh,940px) * 1.7778);
  --mc-hx:calc(var(--mc-S) * .185 + 15vw);
  --mc-room:calc(var(--mc-hx) - var(--gutter) - 36px);
  position:relative;display:flex;align-items:center;min-height:clamp(620px,100svh,940px);background:#E9D7B4;
}
body.pg-contact .mc-close .sec-inner{max-width:none;width:100%;padding-block:clamp(2.4rem,5vw,4.2rem);}
/* the copy column stops short of the metal hinge: the hinge sits at about 37 percent of the width at 1200 and 33 percent at 1440,
   so the headline wraps to two lines (The door is / open.) inside 29vw */
body.pg-contact .mc-close__copy{max-width:min(100%,29vw,var(--mc-room));}
body.pg-contact .mc-close .mc-h2{font-size:clamp(3.2rem,min(7.2vw,calc(var(--mc-room) / 3.8)),8rem);line-height:1;margin-bottom:1.5rem;}
body.pg-contact .mc-close .mc-deck{max-width:30ch;margin-bottom:2rem;}
@media(max-width:1100px){
  body.pg-contact .mc-close{--photo-pos:30% 41%;--mc-hx:calc(var(--mc-S) * .035 + 30vw);}
}
@media(max-width:900px),(max-aspect-ratio:1/1){
  body.pg-contact .mc-close{min-height:clamp(600px,200vw,820px);align-items:stretch;}
  body.pg-contact .mc-close .bgphoto img{object-position:var(--photo-pos-m,58% 29%)!important;}
  body.pg-contact .mc-close .sec-inner{margin:0;padding:1.1rem var(--gutter) 2rem;display:flex;flex:1;}
  body.pg-contact .mc-close__copy{display:flex;flex-direction:column;width:100%;max-width:none;}
  body.pg-contact .mc-close .mc-h2{font-size:clamp(2.4rem,11.4vw,4.6rem);white-space:nowrap;margin-bottom:.7rem;}
  body.pg-contact .mc-close .mc-deck{margin-bottom:0;}
  body.pg-contact .mc-close .mc-cta{margin-top:auto;}
}
/* the dispatch band (the shared crimson newsletter band, scoped to this page): the same size as on the learn and newsletter pages */
body.pg-contact #newsletter .nl__title{font-size:clamp(3rem,7.15vw,6.1rem);}
@media(max-width:900px){
  /* 11.6vw keeps "The Heart / Success dispatch." on two lines at every phone width (12.6vw broke it to three) */
  body.pg-contact #newsletter .nl__title{font-size:clamp(2.6rem,11.6vw,4.6rem);}
}
/* the resting shadow of the pill sits warm on the beige wall; hover and focus stay the shared M2 */
body.pg-contact .mc-close .k4-btn--primary{box-shadow:0 1px 0 rgb(255 255 255 / .16) inset,0 16px 30px -18px rgb(156 27 39 / .55);}
/* "open." swings on its left edge, once, like the door behind him */
@keyframes mcDoor{
  from{transform:perspective(900px) rotateY(-78deg);opacity:0;}
  to{transform:perspective(900px) rotateY(0deg);opacity:1;}
}
body.pg-contact .mc-close .mc-h2 em{display:inline-block;transform-origin:0 60%;}
html.js body.pg-contact .mc-close:not(.is-in) .mc-h2 em{opacity:0;}
html.js body.pg-contact .mc-close.is-in .mc-h2 em{animation:mcDoor .9s cubic-bezier(.16,1,.3,1) .35s both;}


/* ================================================================
   8b. STAGGERED ARRIVAL (round 8): list items rise one after another; --i orders the siblings
   ================================================================ */
html.js body.pg-media .reveal-sec.is-in .mc-marks > li[data-rise],
html.js body.pg-media .reveal-sec.is-in .mc-rows > li[data-rise],
html.js body.pg-contact .reveal-sec.is-in .mc-doors > li[data-rise]{transition-delay:calc(.14s + var(--i,0) * 85ms);}

/* ================================================================
   8. READING LIGHT (scroll-linked statements): words start dim and light as the line crosses the
   reading line; pg-mc.js arms it (html.mc-js) only when motion is allowed, so the default is
   fully lit. The unlit floor is higher over a photograph.
   ================================================================ */
html.mc-js .mc-scrub.mc-armed .mc-w{opacity:.42;transition:opacity .4s ease;}
html.mc-js .mc-close .mc-scrub.mc-armed .mc-w{opacity:.55;}
html.mc-js .mc-scrub.mc-armed .mc-w.is-on{opacity:1;}
body.pg-contact .mc-close .mc-deck.mc-scrub{
  max-width:25ch;font:700 clamp(1.3rem,2.1vw,1.8rem)/1.32 var(--display);letter-spacing:-.016em;
}
body.pg-media .mc-scrub em,body.pg-contact .mc-scrub em{font-style:normal;}

/* ================================================================
   9. REDUCED MOTION: every section resolves to its finished state
   ================================================================ */
@media(prefers-reduced-motion:reduce){
  body.pg-media .mc-stat__n.k4-grad{animation:none!important;background-position:30% 50%;}
  html.js body.pg-contact .k4-draw,html.js body.pg-media .mc-bar-o{stroke-dashoffset:0 !important;transition:none;}
  html.js body.pg-contact .mc-pop,html.js body.pg-contact .mc-meet,html.js body.pg-contact .mc-docA,html.js body.pg-contact .mc-docB,html.js body.pg-contact .mc-focus,html.js body.pg-contact .mc-face.mc-solid,
  html.js body.pg-media .mc-on,html.js body.pg-media .mc-bar{opacity:1 !important;transform:none !important;transition:none !important;}
  html.js body.pg-media .mc-bar{opacity:var(--o,1) !important;}
  body.pg-contact .is-live *{animation:none !important;}
  body.pg-contact .mc-rec{opacity:1;}
  body.pg-contact .mc-halo{opacity:0;animation:none;}
  body.pg-media .mc-marks li,body.pg-media .mc-marks li span,body.pg-media .mc-row__go,body.pg-media .mc-row__t span,body.pg-media .mc-inl,body.pg-contact .mc-door__cta .arr,body.pg-contact .mc-pick__row{transition:none;}
  html.js body.pg-media .mc-stats .mc-stat__n sup{animation:none!important;opacity:1!important;}
  body.pg-contact .mc-door__art{transition:none;}
  body.pg-contact .mc-scene > svg{animation:none !important;}
  html.js body.pg-contact .mc-env-letter,html.js body.pg-contact .mc-env-flapb,html.js body.pg-contact .mc-env-flapf,html.js body.pg-contact .mc-env-seal,html.js body.pg-contact .mc-env-beat{animation:none !important;}
  html.js body.pg-contact .mc-close .mc-h2 em{animation:none!important;opacity:1!important;transform:none!important;}
  body.pg-contact .mc-cap{transition:none;}
}

/* T8-REACH-HEADING:BEGIN
   media #reach heading, second pass. Dev: "move this text to like the middle of the section so its clearly seen".
   The first pass left it up on the wall under the fixed bar. Now it sits centred across the section on the calm black front of
   the stage, where the photo ends (the bottom 14 percent of the picture is flat black, rgb 1 2 10, under the glossy floor), so light
   ink reads on real black with no scrim, band or glow. The wall, the posters and every panelist are untouched, and the photo stays
   a full 16:9, never cropped.
   The black front is only 14 percent tall, too thin for a headline plus the two numbers, so the stage gets 22 percent of the picture
   height of the same black (#01020A, the picture's own bottom colour) below the photo. That strip is the stat strip's own ground
   (the numbers sit on it, under the headline) and it is not an ancestor of the headline, so the photo system still measures the
   headline against the real picture pixels. Everything is a share of the stage width, so the geometry is the same at every desktop
   width; the headline is a share of the width too (6.1vw, 73px at 1200). It is placed with top in percent, never with transform
   (the arrival rise owns transform). The 1px overlap hides any rounding seam between the picture and the strip. */
@media (min-width:761px){
  body.pg-media .mc-reach__stage{padding-bottom:12.375%;}
  body.pg-media .mc-reach__ph{overflow:visible;}
  body.pg-media .mc-reach__h{
    left:0;right:0;width:auto;top:86.8%;padding-right:.05em;
    white-space:nowrap;text-align:center;text-wrap:nowrap;
    font:800 clamp(2.2rem,6.1vw,9rem)/1 var(--display);letter-spacing:-.03em;
  }
  body.pg-media .mc-stats{height:calc(18.033% + 1px);background:#01020A;}
}
/* phones: the picture crops to 3:4 and its floor is lit, so the headline goes under the picture on the same black, two balanced
   lines, centred. The black is the numbers' own ground again: it starts at the picture's bottom edge, leaves room for the headline,
   then the numbers follow in the flow. */
@media (max-width:760px){
  body.pg-media .mc-reach__ph{overflow:visible;}
  body.pg-media .mc-reach__h{
    left:0;right:0;width:auto;top:calc(100% + .45em);box-sizing:border-box;padding-inline:var(--gutter);
    white-space:normal;text-align:center;text-wrap:balance;
    font:800 clamp(2rem,11vw,3.8rem)/1.02 var(--display);letter-spacing:-.03em;
  }
  body.pg-media .mc-stats{background:#01020A;margin-top:-1px;padding-top:calc(29% + 2.2rem);padding-bottom:2.4rem;}
}
/* a squarish narrow window (a folded tablet, a foldable, a resized desktop window) is shorter than the 3:4 picture plus its headline,
   so the picture gives up some of its top (wall only, anchored to the bottom so the floor, every face and the black front stay) and
   the headline still lands on the first screen */
@media (max-width:760px) and (min-height:600px){
  body.pg-media .mc-reach__ph{width:100%;max-height:calc(100svh - 12rem);}
  body.pg-media .mc-reach .bgphoto{--photo-pos-m:50% 100% !important;}
}
/* T8-REACH-HEADING:END */

/* PAPER-MC:BEGIN (2026-10-07, Dev: "make alternating sections light and dark so that the paper cut design is smooth", then torn paper
   on "LITERALLY EVERYWHERE there are the boxes or borders"). The torn paper itself is drawn by the PAPERCUT engine in fable.js; this
   block only sets the grounds, the inks and the spacing it needs on these two pages.
   MEDIA grounds: photo hero / light coverage / the studio photo on its black floor / LIGHT plain language note (#follow, split out of
   #reach so the black floor never tears against navy) / crimson inquiries / navy footer.
   CONTACT grounds: photo hero / navy doors and form / the door photo / crimson dispatch / navy footer. Inside the navy, the form is a
   sheet of off white letter paper and each field is a torn slip of the kit's paper on it. */

/* media #articles: every coverage row is its own torn slip, with room between slips so each tear reads whole */
body.pg-media .mc-rows{gap:clamp(1rem,1.5vw,1.4rem);}
/* the outlet names still light the rows from that outlet: their torn rim turns crimson (the paper replaced the old ring) */
@media (hover:hover) and (pointer:fine){
  body.pg-media .mc-press:has(.mc-marks li[data-o="bi"]:hover) .mc-row.ppr-box[data-o="bi"],
  body.pg-media .mc-press:has(.mc-marks li[data-o="nw"]:hover) .mc-row.ppr-box[data-o="nw"],
  body.pg-media .mc-press:has(.mc-marks li[data-o="dm"]:hover) .mc-row.ppr-box[data-o="dm"]{border-image-source:var(--ppr-ih)!important;}
}

/* media #reach: the studio photo stands on its own black floor (#01020A, the picture's bottom colour), so the section ground IS that
   black and the stat strip carries no fill of its own: the paper engine then sees one ground under the photo and draws no tear
   between the photo's black front and the strip (that tear was a thin grey crack under the headline). position:sticky with no
   offset lays out exactly like relative; it is the engine's own sign for "a stage, not a band", so the photo is not cut as a band
   inside the section. Shared owner: an explicit band opt out (or a bridge for a dark photo over near black) would retire this. */
body.pg-media .mc-reach{background:#01020A;}
body.pg-media .mc-reach__ph{position:sticky;}
body.pg-media .mc-stats{background:none!important;}

/* media #follow: the plain language line on light paper; navy ink, the key phrase on the deep crimson ramp */
body.pg-media .mc-note{position:relative;}
body.pg-media .mc-note .mc-reach__foot{padding-block:clamp(4.2rem,7.5vw,6.6rem);}
body.pg-media .mc-note .mc-reach__p{color:#0B1B33;}
html.mc-js body.pg-media .mc-note .mc-scrub.mc-armed .mc-w{opacity:.3;}
html.mc-js body.pg-media .mc-note .mc-scrub.mc-armed .mc-w.is-on{opacity:1;}

/* contact form: the letter. Off white kit paper (#FBFBF8) torn by the engine (no hover rim on the sheet itself, data-box="off"); each
   field is a torn slip of the kit's paper (#EEF2F8) with navy ink, and the slip's rim turns crimson on hover and while typing */
body.pg-contact #contact .cform{background:#FBFBF8;padding:clamp(1.5rem,2.6vw,2.4rem);color:#0B1B33;--k4-focus:#9C1B27;gap:1.5rem;}
body.pg-contact #contact .cform__two{gap:1.5rem;}
body.pg-contact #contact .cform__lab{color:#0B1B33;}
body.pg-contact #contact .cform__in{background:#EEF2F8;border:0;color:#0B1B33;border-radius:4px;}
body.pg-contact #contact .cform__in::placeholder{color:rgb(11 27 51 / .5);}
body.pg-contact #contact .cform__caret{border-color:#0B1B33;}
body.pg-contact #contact .cform__in:focus{border-color:transparent;box-shadow:none;background:#EEF2F8;}
body.pg-contact #contact .cform__ok{color:rgb(11 27 51 / .78);}
body.pg-contact #contact .cform__ok.is-ok{color:#1E7B4F;}
body.pg-contact #contact .cform__ok.is-err{color:#A5202A;}
/* PAPER-MC:END */

/* PASS1-MC:BEGIN (100x pass 1, 2026-10-07). Three paper gestures from Dev's kit, each with one job:
   1. TAPE: the lead press clipping and the contact letter are each held by one strip of the kit's masking tape (zigzag cut ends),
      in the crimson tint the site uses for the kit's blue. It presses on once when its section arrives.
   2. PAPER HIGHLIGHT: "plain language" on media #follow sits on a strip of torn crimson tint paper (the same strip as the home
      lead), laid in left to right when the reading light reaches the phrase; a pointer on it lays it down again.
   3. INSIDE THE SLIPS: a coverage row names its outlet in deep crimson on hover and focus (the slip itself answers with its rim). */
body.pg-media .mc-row--lead,body.pg-contact #contact .cform{position:relative;}
body.pg-media .mc-row--lead::after,body.pg-contact #contact .cform::after{
  content:'';position:absolute;z-index:3;width:104px;height:28px;pointer-events:none;
  background:linear-gradient(90deg,rgb(255 255 255 / .22),rgb(255 255 255 / 0) 42%,rgb(255 255 255 / .14)),rgb(226 58 70 / .36);
  clip-path:polygon(0 0,100% 0,97% 25%,100% 50%,97% 75%,100% 100%,0 100%,3% 75%,0 50%,3% 25%);
  transition:opacity .45s ease .55s,transform .6s cubic-bezier(.2,.8,.2,1.2) .55s;
}
body.pg-media .mc-row--lead::after{top:-11px;left:-26px;transform:rotate(-36deg);}
/* phones: the slip runs to the gutter, so the tape holds its top edge instead of hanging off the corner */
@media (max-width:640px){body.pg-media .mc-row--lead::after{top:-13px;left:18px;width:88px;transform:rotate(-5deg);}html.js body.pg-media .reveal-sec:not(.is-in) .mc-row--lead::after{transform:rotate(-5deg) scale(1.3);}}
body.pg-contact #contact .cform::after{top:-13px;left:50%;margin-left:-52px;transform:rotate(-2deg);background-color:rgb(226 58 70 / .5);}
html.js body.pg-media .reveal-sec:not(.is-in) .mc-row--lead::after{opacity:0;transform:rotate(-36deg) scale(1.3);}
html.js body.pg-contact .reveal-sec:not(.is-in) #contactForm::after{opacity:0;transform:rotate(-2deg) scale(1.3);}

body.pg-media .mc-note .mc-tape{position:relative;z-index:0;font-style:normal;font-weight:800;color:#0B1B33;white-space:nowrap;padding:0 .06em;}
body.pg-media .mc-note .mc-tape::before{
  content:'';position:absolute;z-index:-1;left:-.16em;right:-.2em;top:.12em;bottom:-.02em;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 48' preserveAspectRatio='none'%3E%3Cpath d='M5.6 7.5L12.7 7.4L16.4 7.6L20.1 6.9L23.8 7.3L27.5 6.8L31.2 7.3L34.9 6.0L38.6 7.2L42.3 6.4L46.0 5.5L49.7 5.9L53.4 6.0L57.1 6.3L60.8 6.3L64.5 5.9L68.2 5.9L71.9 5.6L75.6 6.6L79.3 6.0L83.0 5.5L86.7 5.7L90.4 6.3L94.1 6.1L97.8 6.7L101.5 5.7L105.2 6.2L108.9 6.7L112.6 6.8L116.3 6.3L120.0 6.7L123.7 7.3L127.4 6.8L131.1 6.6L134.8 7.2L138.5 7.5L142.2 7.7L145.9 7.8L149.6 8.0L153.3 7.7L157.0 8.3L160.7 8.8L164.4 8.3L168.1 8.7L171.8 9.2L175.5 8.4L179.2 8.2L182.9 8.2L186.6 8.4L190.3 8.6L194.0 8.6L197.7 8.7L201.4 9.0L205.1 8.3L208.8 9.0L212.5 7.9L216.2 8.6L219.9 8.7L223.6 8.0L227.3 7.7L233.8 8.7L238.5 11.3L236.3 15.3L237.1 19.1L235.0 27.5L236.3 31.7L235.8 36.0L236.7 38.8L233.6 43.9L227.3 43.9L223.6 44.4L219.9 46.5L216.2 44.8L212.5 46.3L208.8 43.8L205.1 45.6L201.4 43.5L197.7 45.1L194.0 44.8L190.3 43.9L186.6 43.2L182.9 42.0L179.2 43.1L175.5 43.6L171.8 42.0L168.1 40.5L164.4 43.1L160.7 41.2L157.0 40.7L153.3 42.7L149.6 40.0L145.9 40.2L142.2 40.8L138.5 41.5L134.8 41.4L131.1 43.5L127.4 41.7L123.7 41.7L120.0 44.7L116.3 41.6L112.6 43.5L108.9 42.1L105.2 45.4L101.5 46.1L97.8 43.2L94.1 45.3L90.4 46.5L86.7 46.0L83.0 44.5L79.3 45.0L75.6 46.9L71.9 46.3L68.2 44.4L64.5 44.6L60.8 44.6L57.1 44.7L53.4 43.8L49.7 43.1L46.0 44.2L42.3 42.0L38.6 44.1L34.9 45.3L31.2 42.7L27.5 41.2L23.8 41.3L20.1 42.4L16.4 40.7L12.7 41.6L6.5 42.2L9.2 39.5L2.6 35.7L6.1 32.1L-0.8 27.6L4.4 19.4L3.1 15.0L4.3 11.5Z' fill='%23FDFDFB'/%3E%3Cpath d='M9.0 8.8L12.7 8.6L16.4 8.6L20.1 8.4L23.8 8.5L27.5 7.9L31.2 8.3L34.9 7.4L38.6 8.3L42.3 7.8L46.0 7.0L49.7 7.0L53.4 7.1L57.1 7.3L60.8 7.7L64.5 7.4L68.2 7.4L71.9 7.0L75.6 7.7L79.3 7.4L83.0 6.9L86.7 6.8L90.4 7.2L94.1 7.3L97.8 7.8L101.5 7.2L105.2 7.6L108.9 7.6L112.6 8.0L116.3 7.7L120.0 7.9L123.7 8.5L127.4 8.1L131.1 8.0L134.8 8.2L138.5 8.7L142.2 9.1L145.9 9.1L149.6 9.0L153.3 9.0L157.0 9.6L160.7 9.8L164.4 9.4L168.1 9.7L171.8 10.2L175.5 9.4L179.2 9.6L182.9 9.3L186.6 9.9L190.3 9.9L194.0 9.7L197.7 9.8L201.4 10.1L205.1 9.3L208.8 10.0L212.5 9.2L216.2 10.0L219.9 9.9L223.6 9.4L227.3 8.8L231.0 9.6L236.3 12.4L233.1 16.4L233.7 20.3L232.4 24.2L233.3 28.2L233.3 32.1L233.6 36.1L231.0 40.8L227.3 40.3L223.6 41.5L219.9 42.9L216.2 40.9L212.5 42.4L208.8 40.9L205.1 42.7L201.4 40.3L197.7 41.3L194.0 42.2L190.3 40.2L186.6 39.5L182.9 38.8L179.2 39.1L175.5 40.2L171.8 38.3L168.1 37.7L164.4 39.8L160.7 37.7L157.0 37.8L153.3 39.7L149.6 37.4L145.9 37.1L142.2 37.1L138.5 37.4L134.8 38.6L131.1 39.5L127.4 37.6L123.7 37.9L120.0 40.7L116.3 38.3L112.6 40.7L108.9 38.9L105.2 41.9L101.5 41.9L97.8 39.5L94.1 42.6L90.4 42.4L86.7 42.4L83.0 41.0L79.3 41.2L75.6 42.8L71.9 43.3L68.2 41.6L64.5 41.6L60.8 41.5L57.1 41.1L53.4 39.7L49.7 39.9L46.0 40.7L42.3 39.3L38.6 40.5L34.9 41.2L31.2 40.0L27.5 38.0L23.8 37.7L20.1 39.1L16.4 37.6L12.7 38.4L9.0 39.5L11.7 36.1L5.7 32.1L9.4 28.2L2.2 24.2L6.9 20.3L5.6 16.4L7.4 12.4Z' fill='%23F7CDD2'/%3E%3Ccircle cx='182.9' cy='34.7' r='.7' fill='%23fff' fill-opacity='0.17'/%3E%3Ccircle cx='222.3' cy='14.4' r='.7' fill='%239C1B27' fill-opacity='0.15'/%3E%3Ccircle cx='204.8' cy='35.5' r='.7' fill='%23fff' fill-opacity='0.21'/%3E%3Ccircle cx='181.6' cy='19.7' r='.7' fill='%239C1B27' fill-opacity='0.18'/%3E%3Ccircle cx='31.5' cy='22.6' r='.7' fill='%23fff' fill-opacity='0.24'/%3E%3Ccircle cx='117.3' cy='12.7' r='.7' fill='%239C1B27' fill-opacity='0.19'/%3E%3Ccircle cx='21.4' cy='24.8' r='.7' fill='%239C1B27' fill-opacity='0.20'/%3E%3Ccircle cx='226.0' cy='33.6' r='.7' fill='%23fff' fill-opacity='0.27'/%3E%3Ccircle cx='118.4' cy='34.8' r='.7' fill='%239C1B27' fill-opacity='0.24'/%3E%3Ccircle cx='107.2' cy='25.4' r='.7' fill='%239C1B27' fill-opacity='0.20'/%3E%3Ccircle cx='192.8' cy='25.4' r='.7' fill='%23fff' fill-opacity='0.23'/%3E%3Ccircle cx='216.4' cy='32.9' r='.7' fill='%239C1B27' fill-opacity='0.17'/%3E%3Ccircle cx='43.9' cy='25.1' r='.7' fill='%23fff' fill-opacity='0.21'/%3E%3Ccircle cx='56.6' cy='24.9' r='.7' fill='%239C1B27' fill-opacity='0.22'/%3E%3C/svg%3E") center/100% 100% no-repeat;filter:drop-shadow(0 1.5px 2px rgb(22 38 76 / .26));
  clip-path:inset(-30% -8% -40% -8%);transform:rotate(-.9deg);
}
@keyframes mcTapeLay{from{clip-path:inset(-30% 108% -40% -8%);}to{clip-path:inset(-30% -8% -40% -8%);}}
@media (prefers-reduced-motion:no-preference){
  html.mc-js body.pg-media .mc-scrub.mc-armed .mc-tape::before{clip-path:inset(-30% 108% -40% -8%);transition:clip-path .75s cubic-bezier(.2,.7,.2,1) .12s;}
  html.mc-js body.pg-media .mc-scrub.mc-armed .mc-tape.is-on::before{clip-path:inset(-30% -8% -40% -8%);}
  @media (hover:hover) and (pointer:fine){body.pg-media .mc-note .mc-tape:hover::before{animation:mcTapeLay .6s cubic-bezier(.2,.7,.2,1);}}
}

body.pg-media .mc-row__o{transition:color .3s ease;}
@media (hover:hover) and (pointer:fine){body.pg-media .mc-row:hover .mc-row__o{color:#A5202A;}}
body.pg-media .mc-row:focus-visible .mc-row__o{color:#A5202A;}

/* contact: picking a door sets the topic in the letter, and the topic slip answers with its crimson rim for a moment (pg-mc.js) */
body.pg-contact #contact .cform__sel.ppr-box.mc-synced{border-image-source:var(--ppr-ih)!important;}
@media (prefers-reduced-motion:reduce){
  body.pg-media .mc-row--lead::after,body.pg-contact #contact .cform::after{transition:none;}
  html.js body.pg-media .reveal-sec:not(.is-in) .mc-row--lead::after{opacity:1;transform:rotate(-36deg);}
  @media (max-width:640px){html.js body.pg-media .reveal-sec:not(.is-in) .mc-row--lead::after{transform:rotate(-5deg);}}
  html.js body.pg-contact .reveal-sec:not(.is-in) #contactForm::after{opacity:1;transform:rotate(-2deg);}
}
/* PASS1-MC:END */

/* PASS2-MC:BEGIN (100x pass 2, 2026-10-07): fresh eyes. The five door sheets sat 12 to 18px apart, so their torn rims nearly touched
   and read as one busy crack; each sheet now has room round its tear, like the coverage slips on media. */
body.pg-contact .contact__ways.mc-doors{gap:clamp(18px,1.8vw,28px);margin-bottom:clamp(2rem,3.4vw,3rem);}
/* PASS2-MC:END */