/* Mirror Factory homepage · the page layer (11 Nov 2026)
   Sits over the chosen v4 sections (sections.css): full-width grounds on the 1440 column, the nav over the hero,
   the theme switch, the mid widths the board never showed (761 to 1180 px), and focus states. Values follow the v4 tokens. */
html{scroll-padding-top:88px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html,body{margin:0;background:var(--v4-ground,#F7F5EF)}
html[data-theme=dark]{--v4-ground:#0E100D;color-scheme:dark}
body{overflow-x:clip}
::selection{background:#CEF25A;color:#0B0D0A}
.skip{position:fixed;left:16px;top:16px;z-index:200;padding:11px 15px;border-radius:8px;background:#121510;color:#F7F5EF;font:500 14px/1 "MF Manrope",sans-serif;text-decoration:none;transform:translateY(-220%);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.skip:focus{transform:none;outline:2px solid #CEF25A;outline-offset:2px}
.v4 :is(a,button,input,[tabindex]):focus-visible,.pn :is(a,button):focus-visible{outline:2px solid #CEF25A;outline-offset:3px}

/* full-width grounds; the content keeps the 1440 column the sections were designed on */
.v4{max-width:none;--pad:max(64px,calc((100vw - var(--sbw,0px) - 1312px) / 2))}
@media (max-width:1180px){.v4{--pad:44px}}
@media (max-width:760px){.v4{--pad:22px}}

/* hero: a full first screen on laptops, capped on tall screens */
@media (min-width:761px){.v4.hpc{height:clamp(720px,100svh,1000px)}}
.hpc .meta>.scroll-cue{justify-self:end;display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;transition:color .3s}
.hpc .meta>.scroll-cue:hover{color:var(--ink)}
.hpc .meta>.scroll-cue::after{content:"";width:1px;height:16px;background:currentColor;transform-origin:50% 0;animation:mfcue 2.6s cubic-bezier(.45,0,.25,1) infinite}
@keyframes mfcue{0%{transform:scaleY(0);transform-origin:50% 0}45%{transform:scaleY(1);transform-origin:50% 0}55%{transform:scaleY(1);transform-origin:50% 100%}100%{transform:scaleY(0);transform-origin:50% 100%}}
@media (max-width:760px){.hpc .meta>.scroll-cue{display:none}}
@media (prefers-reduced-motion:reduce){.hpc .meta>.scroll-cue::after{animation:none}}

/* the nav: fixed, clear over the hero, translucent once the page moves, dark over the dark bands */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:90;--npad:max(64px,calc((100vw - var(--sbw,0px) - 1312px) / 2))}
@media (max-width:1180px){.site-nav{--npad:44px}}
.site-nav .pn{max-width:none}
.site-nav .pn-bar{padding:0 var(--npad);transition:background .5s,border-color .5s,-webkit-backdrop-filter .5s,backdrop-filter .5s}
.site-nav .pb .pn-pane{padding:34px var(--npad) 44px}
.site-nav.at-top .pn:not(.open):not(.sheet) .pn-bar{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.site-nav:not(.at-top) .pn{--bar:rgba(247,245,239,.7)}
html[data-theme=dark] .site-nav:not(.at-top) .pn,.site-nav.ondark:not(.at-top) .pn{--bar:rgba(14,16,13,.6)}
.site-nav .pb-film video{opacity:0;transition:opacity .6s}.site-nav .pb-film video.on{opacity:1}
.pn-theme{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:7px;background:none;color:var(--fg2);cursor:pointer;transition:color .2s,background .2s}
.pn-theme:hover{color:var(--fg);background:var(--card)}
.pn-theme svg{grid-area:1/1;width:17px;height:17px;transition:opacity .4s,transform .7s cubic-bezier(.16,1,.3,1)}
.pn-theme .moon{opacity:0;transform:rotate(-50deg) scale(.6)}
html[data-theme=dark] .pn-theme .sun{opacity:0;transform:rotate(50deg) scale(.6)}
html[data-theme=dark] .pn-theme .moon{opacity:1;transform:none}
.pn-mode{display:none}
@media (max-width:1000px){
  .site-nav .pb .pn-bar{display:flex;justify-content:space-between;height:64px;gap:12px}
  .site-nav .pn-menu,.site-nav .pn-ghost,.site-nav .pn-hide,.site-nav .pn-theme{display:none!important}
  .site-nav .pn-right{margin-left:0;gap:8px}
  .site-nav .pn-cta{height:34px;font-size:13px}
  .site-nav .pn-drop{display:none}
  .site-nav .pn-burger{display:inline-block}
  .site-nav .pn-sheet{display:block;position:absolute;left:0;right:0;top:0;z-index:2;padding:76px var(--npad) 24px;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 40px 80px -46px rgba(18,21,16,.35);clip-path:inset(0 0 100% 0);opacity:0;transition:clip-path .55s cubic-bezier(.16,1,.3,1),opacity .3s ease;pointer-events:none}
  .site-nav .pn.sheet .pn-sheet{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto}
  .site-nav .pn-sheet a{display:flex;justify-content:space-between;align-items:center;padding:16px 4px;border-top:1px solid var(--line);color:var(--fg);text-decoration:none;font:400 26px/1 "MF Display Thin",sans-serif;letter-spacing:-.02em}
  .site-nav .pn-sheet a em{font:500 14px "MF Manrope",sans-serif;font-style:normal;color:var(--fg3)}
  .site-nav .pn-sheet p{margin:14px 4px 0;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--fg3)}
  .pn-mode{display:flex;justify-content:space-between;align-items:center;width:100%;padding:14px 4px;border:0;border-top:1px solid var(--line);background:none;color:var(--fg);font:500 14px/1 "MF Manrope",sans-serif;cursor:pointer}
  .pn-mode b{display:inline-flex;padding:3px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
  .pn-mode i{padding:8px 13px;border-radius:999px;font:500 13px/1 "MF Manrope",sans-serif;font-style:normal;color:var(--fg3);transition:background .3s,color .3s}
  html:not([data-theme=dark]) .pn-mode .l{background:#121510;color:#F7F5EF}
  html[data-theme=dark] .pn-mode .d{background:#F2EEE5;color:#0E100D}
}

@media (max-width:760px){.site-nav{--npad:18px}}

/* mid widths: the two-column sections share the room instead of holding their 1440 column widths */
@media (min-width:761px) and (max-width:1180px){
  .prj .g{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px}.prj .fr{height:540px}
  .wj .g{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px}.wj .lens{width:100%}
  .aba .g{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
  .sg .head,.wwc .head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
  .sg .split{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px}.sg .split.r{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .nb .g{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:44px}
  .wwc .cols{gap:28px}.wwc .tiles{height:360px}
  .fe .news{grid-template-columns:1fr;gap:24px}.fe .main{grid-template-columns:1fr;gap:44px}
  .site-nav .pb .pn-pane{grid-template-columns:minmax(0,1fr) 300px;gap:40px}.site-nav .pb-rows a{grid-template-columns:36px minmax(0,.9fr) minmax(0,1.1fr) 16px}.site-nav .pb-rows b{font-size:28px}
}
/* the orbit dot on the mirror lens rides the ring at any size */
.wj .ring{container-type:inline-size}
@keyframes wjo{from{transform:rotate(0deg) translateX(50cqw)}to{transform:rotate(360deg) translateX(50cqw)}}

/* notes sign-up: opens an email to us until a mailing tool is connected */
.fe .note{margin:10px 0 0 18px;font:500 12.5px/1.4 "MF Manrope",sans-serif;color:var(--fg3);min-height:18px}
.fe form.bad{box-shadow:inset 0 0 0 1px var(--pcD)}
.fe form.sent{box-shadow:inset 0 0 0 1px var(--lmD)}


/* the consultation card: a deeper shade under its top line, so the label reads over bright sky dots */
.bk.tw .shade{background:linear-gradient(180deg,rgba(var(--g),.94) 0%,rgba(var(--g),.6) 16%,rgba(var(--g),.16) 34%,rgba(var(--g),.55) 58%,rgba(var(--g),.96) 100%)}


/* the phone menu is solid (no blur behind it, so any transparency lets the hero's headline read through) */
.site-nav .pn{--panel-solid:#F7F5EF}
html[data-theme=dark] .site-nav .pn,.site-nav.ondark .pn{--panel-solid:#0E100D}
@media (max-width:1000px){.site-nav .pn-sheet{background:var(--panel-solid)}
  html:not([data-theme=dark]) .site-nav.ondark .pn-mode .l{background:#F2EEE5;color:#0E100D}}


/* contact form status line */
.v4 .form .form-note{grid-column:1/-1;margin:2px 0 0;min-height:18px;color:var(--fg3)}


/* the News page heading set in its twin band */
.so-bra .say .so-h1{margin:0;font:400 clamp(44px,5.4vw,80px)/1.1 "MF Display Thin","MF Display",sans-serif;letter-spacing:-.032em;color:var(--ink);max-width:14em;text-shadow:0 0 26px rgba(var(--g),.95)}


/* Brand pass: shared section templates (10 Nov 2026)
   Paper and Paper 2 now alternate on every template page like the homepage. These rules keep each block
   readable on its new ground and on a phone. */

/* the document preview frame stays visible when its section sits on Paper 2 */
.v4.so-dc.alt .pv{background:var(--paper)}

/* phone: the problem's two notes stack; the engagement note sits above its button; the handover card
   stacks its header and signature instead of squeezing them into narrow columns; related cards lose the
   tall empty top they need only beside each other */
@media (max-width:760px){
  .so-pb .two{grid-template-columns:1fr;gap:22px}
  .so-wc .note{flex-direction:column;align-items:flex-start;gap:16px;margin-top:44px}
  .so-kc .rc{padding:28px 22px 26px}
  .so-kc .rch{flex-direction:column;align-items:flex-start;gap:8px}
  .so-kc .rl{gap:12px}
  .so-kc .rcf{flex-direction:column;align-items:flex-start;gap:16px}
  .so-kc .rcf .sg{min-width:0;width:100%}
  .so-ra .rcard{min-height:0}
  .so-ra .rcard .h3{margin-top:18px}
}

/* four recent posts share one row (two at mid widths) instead of three and an orphan */
@media (min-width:761px){.p2-na .grid3:has(>.post:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:761px) and (max-width:1180px){.p2-na .grid3:has(>.post:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* phone: standalone text links (arrows, breadcrumbs, LinkedIn, email, the footer's legal row) reach a tap height of
   at least 24 px; the words and their spacing stay as they are */
@media (max-width:760px){
  .v4 a.lk,.v4 .so-crumb a,.v4 .li-link,.ft .legal .lk a{min-height:28px;display:inline-flex;align-items:center}
  .nb .alt-ct a,.ft .adr a,.p2-wy .h3 a{display:inline-block;padding-block:3px}
}

/* mid widths (761 to 1180 px) for the template and inner pages: the two-column blocks share the room instead of
   holding their 1440 column widths, so text columns never shrink to a few words a line */
@media (min-width:761px) and (max-width:1180px){
  .v4 .so-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
  .so-pb .grid,.so-eb .grid,.p2-h .grid,.p2-ah.s .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
  .so-pb .two{grid-template-columns:1fr;gap:22px}
  .so-qa .grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px}
  .p2-ka .grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px}
  .p2-fb .row{grid-template-columns:90px minmax(0,1fr) minmax(0,1.4fr) 110px;gap:24px}
}

/* phone: the article byline card stacks (mark and name, then the line about us, then the share chips) instead of
   squeezing the text into a one-word column and pushing Copy Link off the card */
@media (max-width:760px){
  .p2-by .card{grid-template-columns:56px minmax(0,1fr);gap:16px;padding:20px}
  .p2-by .mk{width:56px;height:56px}.p2-by .mk img{width:32px}
  .p2-by .share{grid-column:1/-1;flex-wrap:wrap}
}

/* phone: the capability photos go landscape and the four logo tiles pair up, so neither list runs four screens long */
@media (max-width:760px){
  .p2-ca .so-photo{aspect-ratio:4/3}
  .p2-xa .logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .p2-xa .lg small{font-size:12px}
}

/* legal pages: the contents list sits beside the text on wide screens and above it on a phone (it was held at two
   columns by an inline style, which pushed the text off the right edge at 390 px); author heroes likewise */
.v4 .s-doc{grid-template-columns:240px minmax(0,1fr);gap:64px}
.p2-h .au-grid{grid-template-columns:minmax(0,1fr) 440px}
@media (min-width:761px) and (max-width:1180px){.v4 .s-doc{grid-template-columns:200px minmax(0,1fr);gap:40px}.p2-h .au-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}}
@media (max-width:760px){
  .v4 .s-doc,.p2-h .au-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .s-doc .s-toc{position:static;flex-direction:row;flex-wrap:wrap;gap:2px 4px;padding-bottom:18px;border-bottom:1px solid var(--line)}
  .s-doc .s-toc a{padding:8px 10px}
  .s-legal table{font-size:13.5px}
}


/* ==== Integrations (owned by the SEO and integrations work; the rest of this file is the page layer) ====================
   The analytics consent panel and its footer button (src/components/analytics/WebsiteAnalytics.tsx, shown only where
   analytics is configured), and the contact intake's states (src/components/mf27/Mf27ContactForm.tsx). The panel sits
   outside the .v4 sections, so it carries its own paper and Night values. Both choices look the same: no nudge. */
#analytics-settings-slot{display:contents}
button[aria-controls="analytics-preferences-panel"]{width:28px;height:28px;margin:-6px 0;border-radius:50%;color:inherit}
button[aria-controls="analytics-preferences-panel"]:hover{color:var(--ink,#121510);background:transparent}
#analytics-preferences-panel{--card:#FBFAF6;--ink:#121510;--fg2:rgba(18,21,16,.66);--line2:rgba(18,21,16,.2);position:fixed;z-index:120;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:min(25rem,calc(100vw - 36px));max-width:none;padding:22px 22px 20px;border:0;border-radius:16px;background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2),0 28px 60px -30px rgba(0,0,0,.5);font:500 14px/1.5 "MF Manrope",sans-serif}
html[data-theme=dark] #analytics-preferences-panel{--card:#181B16;--ink:#F2EEE5;--fg2:rgba(242,238,229,.7);--line2:rgba(242,238,229,.22)}
#analytics-preferences-panel p{margin:0 0 10px;color:var(--fg2)}
#analytics-preferences-panel>p:first-of-type{padding-right:36px;margin-bottom:8px;color:var(--ink);font:400 21px/1.22 "MF Display Light","MF Display",sans-serif;letter-spacing:-.01em}
#analytics-preferences-panel div{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
#analytics-preferences-panel div button{display:inline-flex;align-items:center;height:40px;padding:0 16px;border:0;border-radius:7px;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2);font:500 14px/1 "MF Manrope",sans-serif;cursor:pointer}
#analytics-preferences-panel div button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
#analytics-preferences-panel button[aria-label="Close analytics preferences"]{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--fg2);cursor:pointer}
#analytics-preferences-panel button[aria-label="Close analytics preferences"]:hover{color:var(--ink)}
#analytics-preferences-panel button:focus-visible,button[aria-controls="analytics-preferences-panel"]:focus-visible{outline:2px solid var(--ink,currentColor);outline-offset:3px}
@media (max-width:760px){#analytics-preferences-panel{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:auto}}

.v4 .form label.check{grid-column:1/-1;flex-direction:row;align-items:flex-start;gap:10px;font:500 13px/1.45 "MF Manrope";color:var(--fg2);cursor:pointer}
.v4 .form[hidden],.p2-ka .slots[hidden],.v4 .form .form-note[hidden]{display:none}
.v4 .form label.check input{flex:none;width:16px;height:16px;margin:1px 0 0;padding:0;border-radius:4px;background:none;box-shadow:none;accent-color:var(--ink)}
.v4 .form input:disabled,.v4 .form textarea:disabled,.p2-ka [data-slot]:disabled{opacity:.6;cursor:default}
.v4 .form button[type=submit]:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.v4 .form .form-note[role=alert]{color:var(--ink)}
.v4 .form .form-note a,.v4 .form-closed a,.v4 .form-receipt a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.v4 .form-receipt,.v4 .form-closed{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:0;padding:28px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);outline:0}
.v4 .form-receipt p{margin:0;color:var(--fg2)}
.v4 .form-receipt .form-preview{color:var(--fg3)}
.v4 .form-receipt .btn{margin-top:6px}
.v4 .form-closed{display:block;font:500 15px/1.5 "MF Manrope";color:var(--fg2)}
/* ==== end Integrations ==== */



/* Home examples (11 Nov 2026): the two tabs that swap Barrel House and the marketing agency */
.ex-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0}
.ex-tab{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 16px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px var(--line2);font:500 13px/1 "MF Manrope",sans-serif;color:var(--fg2);cursor:pointer;transition:background .3s,color .3s,box-shadow .3s}
.ex-tab i{width:7px;height:7px;border-radius:50%;flex:none}
.ex-tab:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.ex-tab[aria-selected=true]{background:var(--ink);color:var(--paper);box-shadow:none}
.ex-tab:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sg-st iframe{transition:opacity .26s}
/* About: each founder card links to the founder's page and LinkedIn */
.pp-links{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center}
.pp-links em{font-style:normal}


/* Buttons carry no dot (11 Nov 2026): the small Green Pulse dot inside primary buttons and the nav button read as an
   unexplained green thing, so the buttons are plain labels. Green Pulse stays for live states. */
.btn.p > i:first-child,.pn-cta > i:first-child{display:none}
.pn-cta{padding:0 14px}
/* Home hero foot (11 Nov 2026): the four practices replace the clip names, each a link */
.hpc .chs a{color:var(--fg3);text-decoration:none;font-weight:500;transition:color .3s}
.hpc .chs a:hover,.hpc .chs a:focus-visible{color:var(--fg)}
.hpc .chs a small{margin-right:8px;font:inherit;opacity:.6}
@media (max-width:760px){.hpc .chs{flex-wrap:wrap;row-gap:10px;column-gap:16px}.hpc .chs a small{display:none}}


/* Activity hero (11 Nov 2026): copy on the left and an activity on the right, below the copy on phones, like the Tennis Social
   case study. Used by the service, capability, engagement and industry pages and the case studies.
   .act-stage.full  the activity fills the hero behind a fade on the copy side (the tennis court)
   .act-stage.side  the activity fills the right of the hero (twin scenes, footage as its dot twin)
   .act-stage.card  a StageShow scene, framed, on the right over a field of held dots */
.act{position:relative;overflow:hidden;background:#0E100D;color:#F2EEE5;min-height:clamp(760px,100svh,960px);display:flex;flex-direction:column}
.act .act-stage{position:absolute;z-index:0}
.act .act-stage.full{inset:0}
.act .act-stage.side{top:0;bottom:0;right:0;width:62%}
.act .act-stage.card{top:0;bottom:0;right:0;width:56%;display:grid;place-items:center;padding:132px max(40px,calc((100vw - 1320px) / 2)) 120px 24px;box-sizing:border-box}
.act .act-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.act .act-stage .flw{position:absolute;inset:0;border-radius:0;background:#0E100D}
.act .act-stage.full::after,.act .act-stage.side::after{content:"";position:absolute;inset:0;pointer-events:none}
.act .act-stage.full::after{background:linear-gradient(90deg,#0E100D 0%,rgba(14,16,13,.88) 24%,rgba(14,16,13,.4) 44%,rgba(14,16,13,0) 60%),linear-gradient(0deg,#0E100D 0%,rgba(14,16,13,0) 20%),linear-gradient(180deg,rgba(14,16,13,.7) 0%,rgba(14,16,13,0) 16%)}
.act .act-stage.side::after{background:linear-gradient(90deg,#0E100D 0%,rgba(14,16,13,0) 28%),linear-gradient(0deg,#0E100D 0%,rgba(14,16,13,0) 18%),linear-gradient(180deg,#0E100D 0%,rgba(14,16,13,0) 16%)}
.act .act-stage.card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(166,181,221,.28) 1.1px,transparent 1.7px) 0 0/13px 13px;-webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent);pointer-events:none}
.act .act-stage.card .sg-st{position:relative;width:100%;max-width:760px;aspect-ratio:var(--ar);border-radius:16px;overflow:hidden;background:#F7F5EF;box-shadow:0 50px 110px -50px rgba(0,0,0,.95),0 0 0 1px rgba(242,238,229,.12)}
.act .act-stage.card .sg-st iframe{position:absolute;inset:0;border:0}
.act .act-stage .tag{position:absolute;right:16px;bottom:14px;z-index:2}
.act .act-ui{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:150px;padding-bottom:36px;pointer-events:none}
.act .act-ui a,.act .act-ui button{pointer-events:auto}
.act .act-copy{max-width:580px}
.act .act-copy .h1{font-size:clamp(46px,5.6vw,92px);line-height:.98;max-width:9.5em}
.act .act-copy .lede{max-width:34em;margin-top:22px}
.act .act-copy .btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.act .kick{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.act .kick img{height:34px;width:auto;display:block}
.act .kick .sep{width:1px;height:28px;background:rgba(242,238,229,.22)}
.act .facts{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:start;gap:40px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(242,238,229,.14)}
.act .facts b{display:block;font:500 32px/1 "MF Mono",monospace;letter-spacing:-.02em;color:#F2EEE5}
.act .facts span{display:block;margin-top:10px;max-width:15em;font:500 10.5px/1.4 "MF Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(242,238,229,.6)}
.act .act-foot{position:relative;z-index:2}
.act .act-meta{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:18px 0 26px;border-top:1px solid rgba(242,238,229,.12);font:500 12px/1 "MF Manrope",sans-serif;color:rgba(242,238,229,.55)}
.act .act-meta .chs{display:flex;gap:28px}
.act .act-meta .chs b{font-weight:500;color:rgba(242,238,229,.45);transition:color .8s}
.act .act-meta .chs b.on{color:#F2EEE5}
.act .act-meta .chs b small{margin-right:8px;font:inherit;opacity:.6}
.act .act-meta .chs b s{display:none}
@media (max-width:1024px){
  .act{min-height:0}
  .act .act-ui{order:1;flex:none;padding-top:124px;padding-bottom:20px;pointer-events:auto}
  .act .act-stage,.act .act-stage.side,.act .act-stage.full,.act .act-stage.card{position:relative;inset:auto;width:auto;order:2;height:min(64svh,560px);min-height:360px}
  .act .act-stage.card{height:auto;min-height:0;padding:8px 20px 24px}
  .act .act-stage.card .sg-st{aspect-ratio:var(--arc,3/4);max-width:440px}
  .act .act-stage.full::after,.act .act-stage.side::after{background:linear-gradient(180deg,#0E100D 0%,rgba(14,16,13,0) 24%),linear-gradient(0deg,#0E100D 0%,rgba(14,16,13,0) 20%)}
  .act .act-foot{order:3}
}
@media (max-width:760px){
  .act .act-ui{padding-top:108px}
  .act .facts{gap:20px}
  .act .facts b{font-size:24px}
  .act .act-meta .chs{gap:16px}
  .act .act-meta>span:first-child{display:none}
  .act .act-meta .chs b small{display:none}
}
@media (min-width:761px) and (max-width:1024px){.act .act-stage.card .sg-st{aspect-ratio:var(--ar);max-width:720px}}


/* Activity hero fixes: the bottom bar sits at the foot (no section padding); footage shows only as its dot twin, never as video */
.act .wrap.act-foot{padding-top:0;padding-bottom:0}
.act .wrap.act-ui{padding-top:150px;padding-bottom:36px}
.act .act-stage .flw video,.act .act-stage .flw canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.act .act-stage .flw video{opacity:0;pointer-events:none}
.act .act-stage .flw canvas{opacity:0;transition:opacity 1.2s}
.act .act-stage .flw.live canvas{opacity:1}
@media (max-width:1024px){.act .wrap.act-ui{padding-top:124px;padding-bottom:20px}}
@media (max-width:760px){.act .wrap.act-ui{padding-top:108px}}

.act .act-stage.full .tag,.act .act-stage.side .tag{bottom:78px;right:max(22px,calc((100vw - 1320px) / 2))}
@media (max-width:1024px){.act .act-stage.full .tag,.act .act-stage.side .tag{bottom:14px;right:16px}}
/* In Practice: the link to a real case study under a made-up example (11 Nov 2026) */
.so-eb .cs-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;align-self:flex-start;font:500 14px/1 "MF Manrope",sans-serif;color:var(--ink);text-decoration:none}
.so-eb .cs-link:hover em{transform:translateX(3px)}.so-eb .cs-link em{font-style:normal;transition:transform .3s}
/* Phones: the court renders at full phone height (the hero camera puts the player about three quarters down) and the stage
   shows its lower part, like the Tennis Social page on a phone */
@media (max-width:760px){.act .act-stage.full{overflow:hidden}.act .act-stage.full iframe{top:auto;bottom:0;height:max(100%,216vw)}}