@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400&family=Archivo+Expanded:wght@600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');
/* ============================================================
   MCX — MediaCast Experience Center · shared design system
   ============================================================ */
:root{--gut:clamp(22px,5.2vw,88px);
  --ink:#0A0A0B; --ink-2:#131316; --ink-3:#1b1b1f;
  --paper:#F0ECE6; --paper-2:#E6E0D6; --paper-line:#d8d1c4;
  --red:#E0301E; --red-deep:#B71C0E;
  --txt:#EAEAEA; --txt-dim:#B0B0B4; --txt-mut:#8A8A8F;
  --ink-txt:#17150F; --ink-dim:#5f5b52;
  --line:rgba(255,255,255,.10);
  --z1:#E0301E; --z2:#5B8DB8; --z3:#4E9A6B; --z4:#8FA6BF;
  --z5:#C9962E; --z6:#C1573A; --z7:#7E5EA8; --z8:#3FA3A0;
  --maxw:1280px;
  /* the display face, named. The footer rebuild moved several pages onto
     var(--display) while this sheet still spelled the stack out in full,
     so those pages fell back to the body font with nothing to show for it. */
  --display:'Cabinet Grotesk','Archivo',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--txt);font-family:'Archivo',system-ui,sans-serif;font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--red);color:#fff}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.label{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--txt-mut);font-weight:600}
.label .d{color:var(--red)}
.on-paper .label{color:var(--ink-dim)}
h1,h2,h3,h4,h5{font-family:'Archivo';letter-spacing:-.02em;line-height:1}

/* ---------- NAV ---------- */
/* No hairline until the bar is scrolled — .nav.scrolled adds it, and the
   homepage bar (.top) has never had one at rest. Carrying it here made the
   bar 1px taller on the fifteen shared-sheet pages than on plan/contact/
   dubai, so the whole menu stepped down a pixel when you clicked between
   them. */
.nav{position:fixed;top:0;inset-inline-start:0;inset-inline-end:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:14px var(--gut);background:rgba(10,10,11,.55);transition:background .3s}
.nav.scrolled{background:rgba(10,10,11,.9)}
/* The component must not depend on a page's global reset. plan and contact
   only declare a{color:inherit}, so when their own .tnav rules went the
   whole menu came back underlined. */
.nav a,.ddm a{text-decoration:none}
.brand{display:flex;align-items:center;gap:11px}
.brand .mk{width:32px;height:32px;border-radius:50%;flex:none;background:radial-gradient(circle at 50% 50%,#fff 0 17%,transparent 18%),conic-gradient(from 20deg,var(--red) 0 78%,transparent 78%);box-shadow:0 0 0 2px var(--ink) inset}
.brand .wm{line-height:.86;font-weight:900;font-size:17px}
.brand .wm b{color:var(--red);display:block}
.brand .wm span{display:block;color:#fff;font-weight:800}
.brand .wm em{font-style:normal;font-size:10px;letter-spacing:.4em;color:var(--txt-mut);display:block;margin-top:3px;font-weight:600}
.navlinks{display:flex;gap:26px;align-items:center}
.navlinks a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#d6d6d8;position:relative;transition:color .2s;white-space:nowrap}
.navlinks a:hover,.navlinks a.here{color:#fff}
.navlinks a:not(.book)::after{content:"";position:absolute;inset-inline-start:0;bottom:-6px;height:1px;width:0;background:var(--red);transition:width .25s}
.navlinks a:hover:not(.book)::after,.navlinks a.here::after{width:100%}
.book{background:var(--red);color:#fff!important;padding:10px 18px;border-radius:2px;font-weight:700;letter-spacing:.14em;transition:.2s}
.book:hover{background:var(--red-deep);transform:translateY(-1px)}
.burger{position:relative;z-index:2;display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px}
.burger span{width:24px;height:2px;background:#fff;display:block}
@media(max-width:1120px){
  .navlinks{position:fixed;inset:0 0 0 auto;width:min(78vw,340px);background:var(--ink-2);flex-direction:column;justify-content:center;align-items:flex-start;gap:22px;padding:40px;transform:translateX(100%);transition:transform .35s;border-inline-start:1px solid var(--line)}
  .navlinks.open{transform:none}
  .navlinks a{font-size:15px}
  .burger{display:flex;z-index:210}
}
@media(max-width:560px){.nav,.wrap{padding-inline-start:22px;padding-inline-end:22px}}

/* ---------- PROGRESS RAIL ---------- */
.rail{position:fixed;inset-inline-end:24px;top:50%;transform:translateY(-50%);z-index:150;display:flex;flex-direction:column;gap:13px}
.rail a{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);transition:.3s}
.rail a.active{background:var(--red);height:22px;border-radius:5px}
@media(max-width:1120px){.rail{display:none}}

/* ---------- HERO (page top) ---------- */
.phero{position:relative;min-height:78vh;display:flex;align-items:flex-end;padding:150px 0 60px;overflow:hidden}
.phero.tall{min-height:100vh;align-items:center;text-align:center}
.phero .bg{position:absolute;inset:0;z-index:0}
.phero .bg img{width:100%;height:100%;object-fit:cover;opacity:.55}
.phero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.4) 0%,rgba(10,10,11,.55) 50%,rgba(10,10,11,.95) 100%)}
.phero .wrap{position:relative;z-index:2;width:100%}
.phero > .ghost{position:absolute;z-index:1;bottom:-3vw;inset-inline-end:2vw;font-family:'Archivo Expanded';font-weight:900;font-size:20vw;color:rgba(255,255,255,.028);pointer-events:none;line-height:.8}
.phero h1{font-weight:900;font-size:clamp(44px,8vw,120px);color:#fff;margin-top:20px}
.phero h1 .thin{display:block;font-weight:200;color:#8f8f93;font-size:clamp(32px,6.4vw,84px)}
.phero .lead{max-width:620px;margin:26px 0 0;color:#c9c9cd;font-weight:300;font-size:clamp(15px,1.5vw,20px)}
.phero.tall .lead{margin-inline-start:auto;margin-inline-end:auto}
.scrollcue{margin-top:44px;display:inline-flex;align-items:center;gap:13px;color:var(--txt-mut);font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:600}
.scrollcue .bar{width:50px;height:1px;background:var(--red);position:relative;overflow:hidden}
.scrollcue .bar::after{content:"";position:absolute;inset:0;background:#fff;animation:sweep 2.4s infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.crumb{display:flex;gap:10px;align-items:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-mut);font-weight:600}
.crumb a:hover{color:#fff}.crumb .sep{color:var(--red)}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- SECTIONS ---------- */
section{position:relative}
.sec{padding:110px 0}
.sec.tight{padding:80px 0}
.paper{background:var(--paper);color:var(--ink-txt)}
.paper h2,.paper h3{color:var(--ink-txt)}
.paper .lead,.paper p{color:#4b473f}
.dark2{background:var(--ink-2)}
.sechead{max-width:820px}
.sechead h2{font-weight:900;font-size:clamp(32px,5vw,60px);margin:16px 0 0}
.sechead h2 .thin{display:block;font-weight:200;color:#87878b}
.paper .sechead h2 .thin{color:#a49f95}
.sechead p{margin-top:20px;font-size:17px;font-weight:300;color:var(--txt-dim);max-width:640px}
.bigstate{font-weight:800;font-size:clamp(24px,3.4vw,44px);line-height:1.16;letter-spacing:-.02em;max-width:960px}
.bigstate em{font-style:normal;color:var(--red)}
.bigstate .g{color:#a49f95;font-weight:300}
.dark .bigstate .g{color:#7c7c81}

/* ---------- STAT BAND ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:48px 30px;border-inline-end:1px solid var(--line)}
.stat:last-child{border-inline-end:none}
.stat .n{font-weight:900;font-size:clamp(32px,4vw,44px);color:#fff;line-height:1}
.stat .n i{color:var(--red);font-style:normal}
.stat .c{margin-top:11px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--txt-mut);font-weight:600}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-inline-end:none}}

/* ---------- IMAGE + TEXT ROW ---------- */
.row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.row.flip .rtext{order:2}
.row .rimg{position:relative;overflow:hidden;border:1px solid var(--line)}
.row .rimg img{width:100%;height:100%;min-height:340px;object-fit:cover;transition:transform 1.2s}
.row .rimg:hover img{transform:scale(1.04)}
.row .rimg .tag{position:absolute;inset-inline-start:0;bottom:0;background:var(--ink);color:#fff;font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;padding:9px 15px;border-top:2px solid var(--tint,var(--red))}
.rtext h3{font-weight:800;font-size:clamp(24px,3.2vw,44px);margin:14px 0 16px}
.rtext p{color:var(--txt-dim);font-weight:300;margin-bottom:14px}
.paper .rtext p{color:#4b473f}
@media(max-width:860px){.row{grid-template-columns:1fr;gap:28px}.row.flip .rtext{order:0}.row .rimg img{min-height:260px}}

/* ---------- PILLS / LISTS ---------- */
.pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.pill{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:#dcdcdc;border:1px solid var(--line);padding:8px 13px;border-radius:100px;background:rgba(255,255,255,.02)}
.paper .pill{color:#514d44;border-color:var(--paper-line);background:rgba(0,0,0,.02)}
.pill.on{background:var(--red);border-color:var(--red);color:#fff}
.ticks{list-style:none;margin-top:8px}
.ticks li{position:relative;padding:9px 0 9px 26px;border-bottom:1px solid var(--line);font-weight:300;color:var(--txt-dim)}
.paper .ticks li{border-color:var(--paper-line);color:#4b473f}
.ticks li::before{content:"→";position:absolute;inset-inline-start:0;color:var(--red);font-weight:700}
.morelink{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:inherit}
.morelink .a{color:var(--red);transition:transform .3s}
.morelink:hover .a{transform:translateX(5px)}

/* ---------- ZONE GRID ---------- */
.zgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.zone{position:relative;display:block;background:var(--ink-2);border:1px solid var(--line);overflow:hidden;transition:transform .35s,border-color .35s;min-height:270px}
.zone .zimg{position:absolute;inset:0;opacity:.34;transition:opacity .4s}
.zone .zimg img{width:100%;height:100%;object-fit:cover}
.zone::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(10,10,11,.9))}
.zone .zc{position:relative;z-index:3;padding:24px 22px;height:100%;display:flex;flex-direction:column;justify-content:space-between}
.zone .znum{font-weight:900;font-size:44px;color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.34);line-height:1;transition:.35s}
.zone h4{font-weight:800;font-size:20px;color:#fff;line-height:1.05}
.zone .zt{margin-top:7px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--zc,var(--red))}
.zone:hover{transform:translateY(-6px);border-color:var(--zc)}
.zone:hover .zimg{opacity:.6}
.zone:hover .znum{color:var(--zc);-webkit-text-stroke:1.4px var(--zc)}
@media(max-width:1000px){.zgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.zgrid{grid-template-columns:1fr}}

/* ---------- CARD GRID (tech / events / news) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--ink-2);border:1px solid var(--line);overflow:hidden;transition:transform .3s,border-color .3s;display:flex;flex-direction:column}
.paper .card{background:#fff;border-color:var(--paper-line)}
.card:hover{transform:translateY(-5px);border-color:var(--red)}
.card .cimg{height:190px;overflow:hidden}
.card .cimg img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.card:hover .cimg img{transform:scale(1.05)}
.card .cbody{padding:26px 24px;flex:1;display:flex;flex-direction:column}
.card .ct{font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--red)}
.card h5{font-weight:800;font-size:20px;margin:12px 0 10px;line-height:1.14;color:#fff}
.paper .card h5{color:var(--ink-txt)}
.card p{font-size:13px;color:var(--txt-mut);font-weight:300;line-height:1.6;flex:1}
.paper .card p{color:#5f5b52}
.card .rd{margin-top:18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:inherit}
.card .rd .a{color:var(--red)}
@media(max-width:900px){.cards,.cards.two{grid-template-columns:1fr}}

/* ---------- PROFILE GRID (team / trainers / community) ---------- */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.person{background:var(--ink-2);border:1px solid var(--line);padding:28px 24px;transition:border-color .3s,transform .3s}
.person:hover{border-color:var(--red);transform:translateY(-4px)}
.person .pav{width:66px;height:66px;border-radius:50%;background:linear-gradient(135deg,var(--ink-3),#26262b);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;color:var(--red);border:1px solid var(--line)}
.person h5{font-weight:800;font-size:20px;margin:18px 0 4px;color:#fff}
.person .role{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);font-weight:600}
.person p{margin-top:12px;font-size:13px;color:var(--txt-mut);font-weight:300;line-height:1.6}
@media(max-width:900px){.people{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.people{grid-template-columns:1fr}}

/* ---------- CTA BAND ---------- */
.band{position:relative;padding:120px 0;text-align:center;overflow:hidden;background:radial-gradient(100% 150% at 50% 0%,#2a0d09 0%,var(--ink) 62%)}
.band > .ghost{position:absolute;bottom:-3vw;inset-inline-start:50%;transform:translateX(-50%);font-family:'Archivo Expanded';font-weight:900;font-size:20vw;color:rgba(224,48,30,.05);white-space:nowrap;pointer-events:none;line-height:.8}
.band h2{position:relative;font-weight:900;font-size:clamp(32px,6vw,84px);color:#fff}
.band h2 .thin{display:block;font-weight:200;color:#9a9a9e}
.band p{position:relative;color:#c2c2c6;font-weight:300;margin:22px auto 0;max-width:520px}
.btn{display:inline-flex;align-items:center;gap:13px;background:var(--red);color:#fff;padding:18px 38px;border-radius:2px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;transition:.25s;border:none;cursor:pointer}
.btn:hover{background:var(--red-deep);transform:translateY(-2px)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:#fff}
.btn.ghost:hover{border-color:var(--red);background:rgba(224,48,30,.08)}
.band .cta-row{position:relative;margin-top:38px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.band .addr{position:relative;margin-top:28px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--txt-mut);font-weight:600}

/* ---------- FORM ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:720px}
.form .full{grid-column:1/-1}
.form label{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-mut);font-weight:600;margin-bottom:8px}
.form input,.form select,.form textarea{width:100%;background:var(--ink-2);border:1px solid var(--line);color:#fff;padding:14px;font-family:inherit;font-size:15px;border-radius:2px}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--red)}
@media(max-width:640px){.form{grid-template-columns:1fr}}

/* ---------- FOOTER ---------- */
/* the bottom row reads as one row: same size, same case, same tracking.
   Colour is what separates them — red for MediaCast, muted for the shop and
   the centre switch. "Choose a centre" was inheriting body type and sat two
   sizes larger than its neighbours. */
/* the outbound pair: the company behind the centre, and the shop. Both leave
   the site, so both are marked and both open in a new tab. */
/* three destinations, three tints, one type treatment: the shop reads brightest
   because it is the one people are sent to, the centre switch sits back, and
   MediaCast keeps the brand red. */

/* ============================================================
   MCX — EXTENDED COMPONENTS
   Added for the detailed build: areas, kit, brands, access, FAQ
   ============================================================ */

/* ---------- AREA BLOCKS (demo areas inside a zone) ---------- */
.areas{display:flex;flex-direction:column;gap:0;margin-top:44px;border-top:1px solid var(--line)}
.paper .areas,.on-paper .areas{border-color:var(--paper-line)}
.area{display:grid;grid-template-columns:64px 1fr 1.05fr;gap:34px;padding:38px 0;border-bottom:1px solid var(--line);align-items:start}
.paper .area,.on-paper .area{border-color:var(--paper-line)}
.area .anum{font-weight:900;font-size:32px;line-height:1;color:transparent;-webkit-text-stroke:1.3px var(--ac,var(--red));padding-top:2px}
.area h4{font-weight:800;font-size:clamp(20px,2.2vw,24px);line-height:1.08;color:#fff;margin-bottom:12px}
.paper .area h4,.on-paper .area h4{color:var(--ink-txt)}
.area p{font-size:15px;font-weight:300;color:var(--txt-dim);line-height:1.7}
.paper .area p,.on-paper .area p{color:#4b473f}
.area .aside-kit{padding-inline-start:30px;border-inline-start:2px solid var(--ac,var(--red))}
.area .aside-kit .label{margin-bottom:12px;display:block}
@media(max-width:900px){
  .area{grid-template-columns:44px 1fr;gap:20px;padding:30px 0}
  .area .aside-kit{grid-column:1/-1;padding-inline-start:20px;margin-top:6px}
  .area .anum{font-size:24px}
}

/* ---------- KIT LIST (named equipment) ---------- */
.kit{list-style:none;display:flex;flex-direction:column;gap:1px}
.kit li{padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;font-weight:300;color:var(--txt-dim);display:flex;gap:12px;align-items:baseline}
.paper .kit li,.on-paper .kit li{border-color:var(--paper-line);color:#4b473f}
.kit li:last-child{border-bottom:none}
.kit li b{font-weight:700;color:#fff;font-size:15px}
.paper .kit li b,.on-paper .kit li b{color:var(--ink-txt)}
.kit li .sub{color:var(--txt-mut);font-size:13px}

/* ---------- PROTOCOL / FORMAT TAGS ---------- */
.tagrow{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.tagrow span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  padding:7px 11px;border:1px solid var(--line);color:var(--txt-dim);background:rgba(255,255,255,.02)}
.paper .tagrow span,.on-paper .tagrow span{border-color:var(--paper-line);color:#5f5b52;background:rgba(0,0,0,.02)}
.tagrow span.hot{border-color:var(--ac,var(--red));color:var(--ac,var(--red))}

/* ---------- BRAND WALL ---------- */
.brandwall{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:38px}
.paper .brandwall,.on-paper .brandwall{background:var(--paper-line);border-color:var(--paper-line)}
.brandwall a,.brandwall span{background:var(--ink);display:flex;align-items:center;justify-content:center;
  padding:26px 14px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--txt-mut);
  text-align:center;line-height:1.25;transition:color .25s,background .25s;min-height:84px}
.paper .brandwall a,.paper .brandwall span,.on-paper .brandwall a,.on-paper .brandwall span{background:var(--paper);color:#6b675e}
.brandwall a:hover{color:#fff;background:var(--ink-2)}
.paper .brandwall a:hover,.on-paper .brandwall a:hover{color:var(--ink-txt);background:#fff}
@media(max-width:640px){.brandwall{grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr))}.brandwall a,.brandwall span{font-size:11px;padding:18px 8px;min-height:68px}}

/* ---------- FACT / INFO GRID ---------- */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:34px}
.paper .facts,.on-paper .facts{background:var(--paper-line);border-color:var(--paper-line)}
.fact{background:var(--ink);padding:30px 26px}
.paper .fact,.on-paper .fact{background:var(--paper)}
.fact .fl{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--txt-mut);font-weight:700;margin-bottom:12px}
.fact .fv{font-size:17px;font-weight:700;color:#fff;line-height:1.35}
.paper .fact .fv,.on-paper .fact .fv{color:var(--ink-txt)}
.fact .fs{margin-top:7px;font-size:13px;font-weight:300;color:var(--txt-mut);line-height:1.6}
.paper .fact .fs,.on-paper .fact .fs{color:#5f5b52}
@media(max-width:860px){.facts{grid-template-columns:1fr}}

/* ---------- ACCESS ROW (metro / parking) ---------- */
.access{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.acc{display:flex;gap:14px;align-items:flex-start}
.acc .ai{width:42px;height:42px;flex:none;border:1px solid var(--line);display:grid;place-items:center}
.paper .acc .ai,.on-paper .acc .ai{border-color:var(--paper-line)}
.acc .ai svg{width:19px;height:19px;stroke:var(--red);fill:none;stroke-width:1.5}
.acc h6{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#fff;margin-bottom:6px}
.paper .acc h6,.on-paper .acc h6{color:var(--ink-txt)}
.acc p{font-size:13px;font-weight:300;color:var(--txt-mut);line-height:1.6;margin:0}
.paper .acc p,.on-paper .acc p{color:#5f5b52}
@media(max-width:800px){.access{grid-template-columns:1fr;gap:16px}}

/* ---------- NUMBERED STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:34px}
.paper .steps,.on-paper .steps{background:var(--paper-line);border-color:var(--paper-line)}
.step{background:var(--ink);padding:34px 28px}
.paper .step,.on-paper .step{background:var(--paper)}
.step .sn{font-weight:900;font-size:13px;letter-spacing:.2em;color:var(--red);margin-bottom:16px}
.step h5{font-weight:800;font-size:20px;color:#fff;margin-bottom:10px;line-height:1.15}
.paper .step h5,.on-paper .step h5{color:var(--ink-txt)}
.step p{font-size:13px;font-weight:300;color:var(--txt-mut);line-height:1.65;margin:0}
.paper .step p,.on-paper .step p{color:#5f5b52}
@media(max-width:860px){.steps{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{margin-top:34px;border-top:1px solid var(--line)}
.paper .faq,.on-paper .faq{border-color:var(--paper-line)}
.faq details{border-bottom:1px solid var(--line)}
.paper .faq details,.on-paper .faq details{border-color:var(--paper-line)}
.faq summary{padding:22px 40px 22px 0;cursor:pointer;list-style:none;position:relative;
  font-weight:700;font-size:17px;color:#fff;transition:color .2s}
.paper .faq summary,.on-paper .faq summary{color:var(--ink-txt)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red)}
.faq summary::after{content:"+";position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);
  font-size:20px;font-weight:300;color:var(--red);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .fa{padding:0 40px 24px 0;font-size:15px;font-weight:300;color:var(--txt-dim);line-height:1.75}
.paper .faq .fa,.on-paper .faq .fa{color:#4b473f}

/* ---------- WHATSAPP BUTTON ---------- */
.btn.wa{background:#1f7a44;border:1px solid #1f7a44}
.btn.wa:hover{background:#186336}
.btn.wa svg{width:17px;height:17px;fill:currentColor;flex:none}
.btn.wa-out{background:transparent;border:1px solid var(--line);color:#fff}
.btn.wa-out:hover{border-color:#2bb463;background:rgba(43,180,99,.10)}
.btn.wa-out svg{width:17px;height:17px;fill:#2bb463;flex:none}

/* ---------- CALLOUT ---------- */
/* Flat, not a card — see the note on the other panels. */
.callout{margin-top:34px;padding:22px 0 0;border:0;
  border-top:2px solid var(--ac,var(--red));background:none}
.paper .callout,.on-paper .callout{border-color:var(--paper-line);border-inline-start-color:var(--ac,var(--red));background:rgba(0,0,0,.02)}
.callout p{margin:0;font-size:15px;font-weight:300;line-height:1.75;color:var(--txt-dim)}
.paper .callout p,.on-paper .callout p{color:#4b473f}
.callout strong{font-weight:700;color:#fff}
.paper .callout strong,.on-paper .callout strong{color:var(--ink-txt)}

/* ---------- FOOTER CONTACT BLOCK ---------- */

/* ---------- SECTION HEAD ON PAPER ---------- */
.paper .sechead p,.on-paper .sechead p{color:#5f5b52}

/* ---------- GEAR TABLE (full equipment list) ---------- */
.gear{margin-top:26px;border-top:1px solid var(--line)}
.paper .gear,.on-paper .gear{border-color:var(--paper-line)}
.gearcat{padding-top:22px;margin-bottom:22px}
.gearcat + .gearcat{border-top:1px solid var(--line)}
.paper .gearcat + .gearcat,.on-paper .gearcat + .gearcat{border-color:var(--paper-line)}
.gearcat .gc{font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  color:var(--ac,var(--red));margin-bottom:14px}
.gearcat ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 26px}
.gearcat li{padding:8px 0;font-size:13px;font-weight:300;color:var(--txt-dim);
  border-bottom:1px solid var(--line);display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.paper .gearcat li,.on-paper .gearcat li{border-color:var(--paper-line);color:#4b473f}
.gearcat li b{font-weight:700;color:#fff;font-size:13px;letter-spacing:.01em}
.paper .gearcat li b,.on-paper .gearcat li b{color:var(--ink-txt)}
.gearcat li em{font-style:normal;color:var(--txt-mut);font-size:13px}
@media(max-width:560px){.gearcat ul{grid-template-columns:1fr}}

/* ---------- HIGHLIGHT LIST (Highlighted Technologies) ---------- */
.hilite{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:9px}
.hilite li{position:relative;padding-inline-start:22px;font-size:15px;font-weight:300;
  color:var(--txt-dim);line-height:1.6}
.paper .hilite li,.on-paper .hilite li{color:#4b473f}
.hilite li::before{content:"";position:absolute;inset-inline-start:0;top:9px;width:8px;height:8px;
  background:var(--ac,var(--red))}

/* ---------- COUNT STRIP ---------- */
.countstrip{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);margin-top:30px}
.paper .countstrip,.on-paper .countstrip{border-color:var(--paper-line)}
.countstrip div{flex:1 1 150px;padding:20px 22px;border-inline-end:1px solid var(--line)}
.paper .countstrip div,.on-paper .countstrip div{border-color:var(--paper-line)}
.countstrip div:last-child{border-inline-end:none}
.countstrip .cn{font-weight:900;font-size:24px;color:#fff;line-height:1}
.paper .countstrip .cn,.on-paper .countstrip .cn{color:var(--ink-txt)}
.countstrip .cl{margin-top:7px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--txt-mut);font-weight:700}

/* ============================================================
   STORY / NARRATIVE COMPONENTS
   ============================================================ */

/* ---------- THE TENSION (big editorial problem statement) ---------- */
.tension{padding:clamp(70px,9vw,130px) 0;background:var(--paper);color:var(--ink-txt);position:relative;overflow:hidden}
.tension .qm{position:absolute;top:-4vw;inset-inline-start:2vw;font-family:'Archivo Expanded';font-weight:900;
  font-size:26vw;line-height:.8;color:rgba(23,21,15,.035);pointer-events:none}
.tension .wrap{position:relative;z-index:2}
.tension .tl{font-size:11px;letter-spacing:.32em;text-transform:uppercase;font-weight:700;color:var(--ac,var(--red))}
.tension .tq{margin-top:26px;font-weight:800;font-size:clamp(24px,3.5vw,44px);line-height:1.16;
  letter-spacing:-.025em;max-width:1000px;color:var(--ink-txt)}
.tension .tq em{font-style:normal;color:var(--ac,var(--red))}
.tension .tq .g{font-weight:300;color:#8b8579}
.tension .tsub{margin-top:28px;max-width:660px;font-size:17px;font-weight:300;line-height:1.8;color:#4b473f}

/* ---------- STORY BEATS ---------- */
.beats{display:grid;gap:0;margin-top:52px;border-top:1px solid var(--line)}
.paper .beats,.on-paper .beats{border-color:var(--paper-line)}
.beat{display:grid;grid-template-columns:190px 1fr;gap:44px;padding:42px 0;
  border-bottom:1px solid var(--line);align-items:start}
.paper .beat,.on-paper .beat{border-color:var(--paper-line)}
.beat .bl{font-size:10px;letter-spacing:.26em;text-transform:uppercase;font-weight:700;
  color:var(--ac,var(--red));padding-top:6px;line-height:1.7}
.beat h4{font-weight:800;font-size:clamp(20px,2.5vw,32px);line-height:1.12;color:#fff;margin-bottom:16px}
.paper .beat h4,.on-paper .beat h4{color:var(--ink-txt)}
.beat p{font-size:15px;font-weight:300;line-height:1.82;color:var(--txt-dim);margin-bottom:14px}
.paper .beat p,.on-paper .beat p{color:#4b473f}
.beat p:last-child{margin-bottom:0}
.beat strong{font-weight:700;color:#fff}
.paper .beat strong,.on-paper .beat strong{color:var(--ink-txt)}
@media(max-width:860px){.beat{grid-template-columns:1fr;gap:14px;padding:32px 0}.beat .bl{padding-top:0}}

/* ---------- BEFORE / AFTER CONTRAST ---------- */
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:40px}
.paper .contrast,.on-paper .contrast{background:var(--paper-line);border-color:var(--paper-line)}
.contrast > div{background:var(--ink);padding:34px 30px}
.paper .contrast > div,.on-paper .contrast > div{background:var(--paper)}
.contrast .ch{font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;margin-bottom:16px}
.contrast .without .ch{color:var(--txt-mut)}
.contrast .with .ch{color:var(--ac,var(--red))}
.contrast ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.contrast li{font-size:15px;font-weight:300;line-height:1.6;color:var(--txt-dim);
  padding-inline-start:20px;position:relative}
.paper .contrast li,.on-paper .contrast li{color:#4b473f}
.contrast .without li::before{content:"\00d7";position:absolute;inset-inline-start:0;color:var(--txt-mut);font-weight:700}
.contrast .with li::before{content:"\2192";position:absolute;inset-inline-start:0;color:var(--ac,var(--red));font-weight:700}
@media(max-width:760px){.contrast{grid-template-columns:1fr}}

/* ---------- CLOSING LINE ---------- */
.closing{margin-top:44px;padding:34px 0 0;border-top:2px solid var(--ac,var(--red));max-width:820px}
.closing p{font-size:clamp(17px,2.1vw,24px);font-weight:300;line-height:1.5;letter-spacing:-.015em;color:#fff}
.paper .closing p,.on-paper .closing p{color:var(--ink-txt)}
.closing strong{font-weight:800}

/* ============================================================
   VISUAL RHYTHM — image breaks, signal chains, gear cards
   ============================================================ */

/* ---------- FULL-BLEED IMAGE BREAK ---------- */
.imgbreak{position:relative;min-height:clamp(340px,52vh,560px);display:flex;align-items:flex-end;overflow:hidden}
.imgbreak img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transform:scale(1.03);transition:transform 8s cubic-bezier(.2,.7,.2,1)}
.imgbreak.in img{transform:scale(1)}
.imgbreak::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,10,11,.25) 0%,rgba(10,10,11,.55) 55%,rgba(10,10,11,.95) 100%)}
.imgbreak .wrap{position:relative;z-index:2;width:100%;padding-top:60px;padding-bottom:52px}
.imgbreak .ib-l{font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:700;
  color:var(--ac,var(--red));margin-bottom:16px}
.imgbreak .ib-q{font-weight:800;font-size:clamp(20px,3vw,44px);line-height:1.14;letter-spacing:-.025em;
  color:#fff;max-width:900px}
.imgbreak .ib-q em{font-style:normal;color:var(--ac,var(--red))}
.imgbreak .ib-s{margin-top:16px;max-width:560px;font-size:15px;font-weight:300;line-height:1.7;color:#c2c2c6}

/* ---------- SIGNAL CHAIN ---------- */
.chainwrap{margin-top:38px;padding:38px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.paper .chainwrap,.on-paper .chainwrap{border-color:var(--paper-line)}
.chain{display:flex;align-items:stretch;flex-wrap:wrap;gap:0}
.chain .lk{flex:1 1 150px;min-width:140px;padding:22px 20px;border:1px solid var(--line);
  margin:-1px 0 0 -1px;position:relative;transition:background .3s,border-color .3s}
.paper .chain .lk,.on-paper .chain .lk{border-color:var(--paper-line)}
.chain .lk:hover{background:rgba(255,255,255,.03);border-color:var(--ac,var(--red))}
.chain .lk .ln{font-weight:900;font-size:11px;letter-spacing:.2em;color:var(--ac,var(--red));margin-bottom:10px}
.chain .lk h6{font-weight:800;font-size:15px;color:#fff;line-height:1.15;margin-bottom:7px}
.paper .chain .lk h6,.on-paper .chain .lk h6{color:var(--ink-txt)}
.chain .lk p{font-size:13px;font-weight:300;line-height:1.55;color:var(--txt-mut);margin:0}
.paper .chain .lk p,.on-paper .chain .lk p{color:#5f5b52}
.chain .lk::after{content:"";position:absolute;inset-inline-end:-6px;top:50%;width:10px;height:10px;
  border-top:1px solid var(--ac,var(--red));border-inline-end:1px solid var(--ac,var(--red));
  transform:translateY(-50%) rotate(45deg);background:var(--ink);z-index:3}
.paper .chain .lk::after,.on-paper .chain .lk::after{background:var(--paper)}
.chain .lk:last-child::after{display:none}
@media(max-width:700px){.chain .lk::after{display:none}}

/* ---------- GEAR AS CARDS ---------- */
.gearcat{padding:0;margin:0 0 1px}
.gearcat + .gearcat{border-top:none}
.gear{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:26px}
.paper .gear,.on-paper .gear{background:var(--paper-line);border-color:var(--paper-line)}
.gearcat{background:var(--ink);padding:24px 24px 20px}
.paper .gearcat,.on-paper .gearcat{background:var(--paper)}
.gearcat .gc{font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  color:var(--ac,var(--red));margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.paper .gearcat .gc,.on-paper .gearcat .gc{border-color:var(--paper-line)}
.gearcat ul{display:flex;flex-direction:column;gap:9px}
.gearcat li{padding:0;border:none;display:block}
.gearcat li b{display:block;font-weight:700;color:#fff;font-size:13px;line-height:1.3}
.paper .gearcat li b,.on-paper .gearcat li b{color:var(--ink-txt)}
.gearcat li em{display:block;font-style:normal;color:var(--txt-mut);font-size:13px;margin-top:2px}
.paper .gearcat li em,.on-paper .gearcat li em{color:#6b675e}

/* ---------- BIG NUMBER MOMENT ---------- */
.bignum{display:flex;align-items:baseline;gap:clamp(20px,3vw,44px);flex-wrap:wrap;margin-top:34px}
.bignum .bn{font-family:'Archivo Expanded','Archivo';font-weight:900;
  font-size:clamp(84px,13vw,168px);line-height:.82;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:2px var(--ac,var(--red))}
.bignum .bt{flex:1 1 260px;max-width:460px}
.bignum .bt p{font-size:15px;font-weight:300;line-height:1.75;color:var(--txt-dim);margin:0}
.paper .bignum .bt p,.on-paper .bignum .bt p{color:#4b473f}

/* ============================================================
   ZONE PLATES — generated graphics, no photography required
   ============================================================ */
.plate{position:relative;overflow:hidden;background:var(--ink-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.plate .pwrap{max-width:var(--maxw);margin:0 auto;padding:clamp(44px,5vw,68px) 40px;
  display:grid;grid-template-columns:minmax(260px,.85fr) 1.15fr;gap:clamp(30px,5vw,70px);align-items:center}
.plate .pl{font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:700;
  color:var(--ac,var(--red));margin-bottom:14px}
.plate h3{font-weight:800;font-size:clamp(20px,2.6vw,32px);line-height:1.1;color:#fff;margin-bottom:14px}
.plate p{font-size:15px;font-weight:300;line-height:1.75;color:var(--txt-dim);margin:0}
.plate .pg{width:100%;height:auto;display:block;overflow:visible}
.plate .pg .st{stroke:var(--ac,var(--red));fill:none;stroke-width:1.8}
.plate .pg .stf{fill:var(--ac,var(--red))}
.plate .pg .dim{stroke:rgba(255,255,255,.24);fill:none;stroke-width:1}
.plate .pg .dimf{fill:rgba(255,255,255,.13)}
.plate .pg text{fill:rgba(255,255,255,.45);font-family:'Archivo',sans-serif;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;font-weight:700}
@media(max-width:820px){.plate .pwrap{grid-template-columns:1fr;padding-inline-start:22px;padding-inline-end:22px}}

/* ============================================================
   TREMOR LANGUAGE — display type, spec strips, callouts, action bar
   ============================================================ */

/* ---------- HEAVY DISPLAY TYPE ---------- */
.phero h1,.band h2{text-transform:uppercase;letter-spacing:-.035em}
.phero h1{font-weight:900}
.phero h1 .thin{text-transform:none;letter-spacing:-.04em}
.band h2 .thin{text-transform:none}
.sechead h2{text-transform:uppercase;letter-spacing:-.03em}
.sechead h2 .thin{text-transform:none;letter-spacing:-.035em}
.tension .tq{text-transform:none}

/* ---------- HERO SPEC STRIP ---------- */
.specstrip{background:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  position:relative;z-index:5}
.specstrip .ss{max-width:var(--maxw);margin:0 auto;padding:0 40px;display:flex;flex-wrap:wrap}
.specstrip .sc{flex:1 1 160px;padding:26px 26px 26px 0;margin-inline-end:26px;
  border-inline-end:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.specstrip .sc:last-child{border-inline-end:none;margin-inline-end:0}
.specstrip .sv{font-weight:900;font-size:clamp(24px,3.1vw,44px);line-height:.95;color:#fff;
  letter-spacing:-.04em;text-transform:uppercase}
.specstrip .sv em{font-style:normal;color:var(--ac,var(--red))}
.specstrip .sl{margin-top:9px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--txt-mut);font-weight:700}
@media(max-width:820px){.specstrip .ss{padding:0 22px}.specstrip .sc{flex:1 1 45%;padding-inline-end:18px;margin-inline-end:18px}}

/* ---------- ANNOTATED CALLOUTS ON PLATES ---------- */
.plate .pg .cal{stroke:rgba(255,255,255,.34);stroke-width:1;fill:none;stroke-dasharray:3 3}
.plate .pg .caldot{fill:var(--ac,var(--red))}
.plate .pg .callbl{fill:#fff;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.plate .pg .calsub{fill:rgba(255,255,255,.45);font-size:10px;letter-spacing:.1em;
  text-transform:none;font-weight:400}

/* ---------- STICKY ACTION BAR ---------- */
.actionbar{position:fixed;inset-inline-start:0;inset-inline-end:0;bottom:0;z-index:180;background:rgba(10,10,11,.94);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.actionbar.up{transform:none}
.actionbar .ab{max-width:var(--maxw);margin:0 auto;padding:13px 40px;display:flex;
  align-items:center;gap:22px;flex-wrap:wrap}
.actionbar .abz{font-weight:900;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  padding-inline-end:28px;border-inline-end:1px solid var(--line);white-space:nowrap}
.actionbar .abz i{font-style:normal;color:var(--ac,var(--red))}
.actionbar .abs{display:flex;gap:22px;flex:1 1 auto;flex-wrap:wrap}
.actionbar .abs span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-mut);font-weight:700}
.actionbar .abs span b{display:block;font-size:15px;color:#fff;letter-spacing:-.02em;margin-top:3px;font-weight:900}
.actionbar .abc{display:flex;gap:10px;flex-wrap:wrap}
.actionbar .abc .btn{padding:12px 22px;font-size:11px}
@media(max-width:860px){
  .actionbar .ab{padding:11px 22px;gap:14px}
  .actionbar .abs{display:none}
  .actionbar .abz{border-inline-end:none;padding-inline-end:0}
  .actionbar .abc{flex:1 1 auto;justify-content:flex-end}
}
@media(max-width:520px){.actionbar .abz{display:none}.actionbar .abc{width:100%}.actionbar .abc .btn{flex:1 1 auto;justify-content:center}}

/* ---------- COMPARISON TABLE (Ford trim-compare pattern) ---------- */
.cmpwrap{margin-top:34px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line)}
.paper .cmpwrap,.on-paper .cmpwrap{border-color:var(--paper-line)}
.cmp{border-collapse:collapse;width:100%;min-width:860px}
.cmp th,.cmp td{padding:16px 18px;text-align:start;vertical-align:top;
  border-bottom:1px solid var(--line);border-inline-end:1px solid var(--line)}
.paper .cmp th,.paper .cmp td,.on-paper .cmp th,.on-paper .cmp td{border-color:var(--paper-line)}
.cmp th:last-child,.cmp td:last-child{border-inline-end:none}
.cmp thead th{position:sticky;top:0;background:var(--ink-2);z-index:2;padding-top:22px;padding-bottom:20px}
.paper .cmp thead th,.on-paper .cmp thead th{background:var(--paper-2)}
.cmp thead .cn{font-weight:900;font-size:17px;color:#fff;line-height:1.15;letter-spacing:-.02em}
.paper .cmp thead .cn,.on-paper .cmp thead .cn{color:var(--ink-txt)}
.cmp thead .cb{font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  color:var(--ac,var(--red));margin-bottom:8px}
.cmp tbody th{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--txt-mut);width:180px;white-space:nowrap}
.paper .cmp tbody th,.on-paper .cmp tbody th{color:#6b675e}
.cmp td{font-size:13px;font-weight:300;color:var(--txt-dim);line-height:1.5}
.paper .cmp td,.on-paper .cmp td{color:#4b473f}
.cmp td b{display:block;font-weight:700;color:#fff;font-size:15px;margin-bottom:3px}
.paper .cmp td b,.on-paper .cmp td b{color:var(--ink-txt)}
.cmp td.hi{background:rgba(224,48,30,.07)}
.cmp td.hi b{color:var(--ac,var(--red))}
.cmp tbody tr:hover td{background:rgba(255,255,255,.03)}
.paper .cmp tbody tr:hover td,.on-paper .cmp tbody tr:hover td{background:rgba(0,0,0,.03)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:none}
.cmphint{margin-top:14px;font-size:11px;font-weight:300;color:var(--txt-mut);letter-spacing:.02em}
.paper .cmphint,.on-paper .cmphint{color:#6b675e}
@media(max-width:900px){.cmp tbody th{width:130px}}

/* ---------- CONDITIONS SELECTOR (Tremor terrain-mode pattern) ---------- */
.cond{position:relative;overflow:hidden;background:var(--ink);
  transition:background .6s cubic-bezier(.2,.7,.2,1)}
.cond::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 12% 0%,var(--ac,var(--red)) 0%,transparent 58%);
  opacity:.17;transition:opacity .6s,background .6s}
.cond .wrap{position:relative;z-index:2}
.condbar{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);margin-top:34px}
.condbar button{flex:1 1 130px;background:none;border:none;border-inline-end:1px solid var(--line);
  padding:16px 14px;cursor:pointer;font-family:inherit;text-align:start;transition:background .25s;
  display:flex;align-items:center;gap:10px}
.condbar button:last-child{border-inline-end:none}
.condbar button:hover{background:rgba(255,255,255,.04)}
.condbar button .sw{width:11px;height:11px;flex:none;background:var(--cc);border-radius:50%;
  box-shadow:0 0 0 0 var(--cc);transition:box-shadow .3s}
.condbar button .cl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--txt-mut);line-height:1.25;transition:color .25s}
.condbar button[aria-pressed="true"]{background:rgba(255,255,255,.06)}
.condbar button[aria-pressed="true"] .cl{color:#fff}
.condbar button[aria-pressed="true"] .sw{box-shadow:0 0 0 4px rgba(255,255,255,.10)}
.condpanel{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,68px);
  margin-top:clamp(34px,4vw,52px);align-items:start}
.condpanel .cq{font-weight:800;font-size:clamp(24px,3.4vw,44px);line-height:1.1;
  letter-spacing:-.03em;color:#fff}
.condpanel .cq em{font-style:normal;color:var(--ac,var(--red))}
.condpanel .cwho{margin-top:16px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:700;color:var(--ac,var(--red))}
.condpanel .cdesc{margin-top:20px;font-size:15px;font-weight:300;line-height:1.8;color:var(--txt-dim);max-width:520px}
.condcols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.condcols h6{font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  color:var(--txt-mut);margin-bottom:14px;padding-bottom:11px;border-bottom:1px solid var(--line)}
.condcols ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.condcols li{font-size:13px;font-weight:300;color:var(--txt-dim);line-height:1.5;
  padding-inline-start:17px;position:relative}
.condcols li::before{content:"";position:absolute;inset-inline-start:0;top:8px;width:6px;height:6px;background:var(--ac,var(--red))}
.condcols li b{font-weight:700;color:#fff}
.condgo{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:900px){.condpanel{grid-template-columns:1fr}}
@media(max-width:560px){.condcols{grid-template-columns:1fr}.condbar button{flex:1 1 50%}}

/* ============================================================
   ANIMATED ZONE PLATES — subject-true motion, no GIFs
   Triggered by .plate.in (scroll reveal). Respects reduced-motion.
   ============================================================ */
.plate .pg *{transform-box:fill-box}

/* 01 ENTRY — data arriving at each node, switch breathing */
.plate.in .pg .node{animation:nodePulse 3.4s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .18s);transform-origin:center}
@keyframes nodePulse{0%,72%,100%{opacity:.34}80%{opacity:1}}
.plate.in .pg .core{animation:corePulse 3.4s ease-in-out infinite;transform-origin:center}
@keyframes corePulse{0%,100%{opacity:.14}50%{opacity:.34}}

/* 02 LIVE — a scan sweeping the test pattern */
.plate.in .pg .scan{animation:scanX 4.6s linear infinite}
@keyframes scanX{0%{transform:translateX(-40px);opacity:0}
  8%{opacity:.75}92%{opacity:.75}100%{transform:translateX(600px);opacity:0}}

/* 03 VIRTUAL — layers drifting into registration */
.plate.in .pg .lay{animation:layDrift 6s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .5s);transform-origin:center}
@keyframes layDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(-9px,-6px)}}

/* 04 CINEMA — the iris breathing */
.plate.in .pg .blades{animation:irisTurn 22s linear infinite;transform-origin:280px 150px}
@keyframes irisTurn{to{transform:rotate(360deg)}}
.plate.in .pg .iris{animation:irisOpen 6.5s ease-in-out infinite;transform-origin:280px 150px}
@keyframes irisOpen{0%,100%{transform:scale(1)}50%{transform:scale(1.34)}}

/* 05 MUSIC — a sequencer playhead running the steps */
.plate.in .pg .step{animation:stepRun 2.6s steps(1,end) infinite;
  animation-delay:calc(var(--i,0) * .1625s)}
@keyframes stepRun{0%,7%{opacity:1}8%,100%{opacity:.34}}
.plate.in .pg .pad{animation:padFlick 2.6s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .1s)}
@keyframes padFlick{0%,88%,100%{opacity:.9}94%{opacity:.45}}

/* 06 STAGE — the waveform playing */
.plate.in .pg .wv{animation:wvBeat 1.9s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .035s);transform-origin:center}
@keyframes wvBeat{0%,100%{transform:scaleY(.42)}50%{transform:scaleY(1)}}

/* 07 RECORDING — the pickup pattern breathing */
.plate.in .pg .cardio{animation:cardioBreathe 5.5s ease-in-out infinite;transform-origin:230px 150px}
@keyframes cardioBreathe{0%,100%{transform:scale(.96)}50%{transform:scale(1.04)}}
.plate.in .pg .ring{animation:ringOut 4s ease-out infinite;
  animation-delay:calc(var(--i,0) * 1s);transform-origin:230px 150px;opacity:0}
@keyframes ringOut{0%{transform:scale(.28);opacity:.5}100%{transform:scale(1.05);opacity:0}}

/* 08 RESOLVE — grading dots being trimmed */
.plate.in .pg .grab{animation:grabMove 7s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .9s);transform-origin:center}
@keyframes grabMove{0%,100%{transform:translate(0,0)}
  33%{transform:translate(7px,-5px)}66%{transform:translate(-5px,6px)}}

@media(prefers-reduced-motion:reduce){
  .plate .pg *{animation:none !important}
}

/* ---------- ART-DIRECTED PHOTO SLOT (stand-in until shot) ---------- */
.shot{position:relative;overflow:hidden;background:var(--ink-2);border:1px solid var(--line);
  min-height:var(--h,420px);display:flex;align-items:flex-end}
.shot::before{content:"";position:absolute;inset:0;z-index:0;
  background:
    repeating-linear-gradient(135deg,transparent 0 22px,rgba(255,255,255,.018) 22px 44px),
    radial-gradient(120% 100% at 20% 0%,var(--ac,var(--red)) 0%,transparent 62%);
  opacity:.5}
.shot .frame{position:absolute;inset:22px;z-index:1;pointer-events:none}
.shot .frame span{position:absolute;width:22px;height:22px;border:2px solid var(--ac,var(--red));opacity:.55}
.shot .frame span:nth-child(1){top:0;inset-inline-start:0;border-inline-end:none;border-bottom:none}
.shot .frame span:nth-child(2){top:0;inset-inline-end:0;border-inline-start:none;border-bottom:none}
.shot .frame span:nth-child(3){bottom:0;inset-inline-start:0;border-inline-end:none;border-top:none}
.shot .frame span:nth-child(4){bottom:0;inset-inline-end:0;border-inline-start:none;border-top:none}
.shot .sbody{position:relative;z-index:2;padding:34px 34px 30px;width:100%}
.shot .stag{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;font-weight:700;color:var(--ac,var(--red));
  border:1px solid var(--ac,var(--red));padding:6px 11px;margin-bottom:16px}
.shot h4{font-weight:800;font-size:clamp(17px,2vw,24px);color:#fff;line-height:1.15;margin-bottom:10px}
.shot p{font-size:13px;font-weight:300;line-height:1.65;color:var(--txt-dim);max-width:440px;margin:0}
.shot .sspec{margin-top:16px;display:flex;flex-wrap:wrap;gap:7px}
.shot .sspec span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--txt-mut);border:1px solid var(--line);padding:6px 10px}
.shotgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;margin-top:38px}
@media(max-width:600px){.shot{--h:320px}.shot .sbody{padding:24px 22px}}

/* ---------- REAL MCX BRAND LOCKUP ---------- */
.brand .blogo{width:auto;height:clamp(62px,5.9vw,87px);flex:none;object-fit:contain}
.brand .bwm{line-height:1.05;display:flex;flex-direction:column}
.brand .bwm b{font-weight:900;font-size:17px;letter-spacing:.06em;color:#fff}
.brand .bwm em{font-style:normal;font-size:clamp(13px,1.15vw,15px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--txt-mut);font-weight:700;margin-top:3px;white-space:nowrap}
/* black mark for any light surface */
.paper .brand .blogo,.on-paper .brand .blogo{content:url("images/mcx-logo-black.png")}
.paper .brand .bwm b,.on-paper .brand .bwm b{color:var(--ink-txt)}
@media(max-width:560px){.brand .bwm em{font-size:11px}}

/* ---------- LIFESTYLE GALLERY ---------- */
.gal{display:grid;gap:14px;margin-top:38px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.gal.two{grid-template-columns:1.35fr 1fr}
.gcell{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--ink-2);
  min-height:var(--gh,300px)}
.gcell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.gcell:hover img{transform:scale(1.045)}
.gcell::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(10,10,11,.88) 100%)}
.gcell .gc{position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:0;z-index:2;padding:22px 22px 20px}
.gcell .gt{font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  color:var(--ac,var(--red));margin-bottom:7px}
.gcell .gl{font-size:15px;font-weight:700;color:#fff;line-height:1.25}
.gcell.tall{--gh:440px}
@media(max-width:760px){.gal.two{grid-template-columns:1fr}.gcell{--gh:260px}}

/* ---------- SPECIALIST / DISCIPLINE CARDS ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:38px}
.pcard{background:var(--ink);display:flex;flex-direction:column;transition:background .3s}
.pcard:hover{background:var(--ink-3)}
.pcard .pimg{position:relative;height:230px;overflow:hidden}
.pcard .pimg img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .pimg img{transform:scale(1.05)}
.pcard .pimg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(10,10,11,.75) 100%)}
.pcard .pbody{padding:24px 24px 28px;border-top:2px solid var(--ac,var(--red))}
.pcard .prole{font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  color:var(--ac,var(--red));margin-bottom:9px}
.pcard h4{font-weight:800;font-size:20px;color:#fff;line-height:1.2;margin-bottom:11px}
.pcard p{font-size:13px;font-weight:300;line-height:1.65;color:var(--txt-dim);margin:0}

/* ============================================================
   EVENTS — filters, rich cards, calendar export
   ============================================================ */
.evnext{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.evnext .en{max-width:var(--maxw);margin:0 auto;padding:clamp(34px,4vw,54px) 40px;
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(24px,4vw,54px);align-items:center}
.evnext .edate{text-align:center;border:1px solid var(--ac,var(--red));padding:16px 22px;min-width:104px}
.evnext .edate .d{font-weight:900;font-size:44px;line-height:.9;color:#fff}
.evnext .edate .m{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ac,var(--red));
  font-weight:700;margin-top:7px}
.evnext .ecopy .el{font-size:10px;letter-spacing:.26em;text-transform:uppercase;font-weight:700;
  color:var(--ac,var(--red));margin-bottom:9px}
.evnext .ecopy h3{font-weight:900;font-size:clamp(20px,2.6vw,32px);color:#fff;line-height:1.1;
  text-transform:uppercase;letter-spacing:-.02em}
.evnext .ecopy p{margin-top:10px;font-size:15px;font-weight:300;color:var(--txt-dim);max-width:560px}
.evnext .eact{display:flex;flex-direction:column;gap:9px}
@media(max-width:900px){.evnext .en{grid-template-columns:1fr;gap:20px}.evnext .edate{width:104px}}

.evbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.evbar button{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  background:none;border:1px solid var(--line);color:var(--txt-mut);padding:10px 16px;cursor:pointer;
  font-family:inherit;transition:.2s}
.evbar button:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.evbar button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}

.evlist{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:26px}
.ev{background:var(--ink);display:grid;grid-template-columns:112px 1fr 210px;gap:26px;
  padding:26px 28px;align-items:start;transition:background .25s}
.ev:hover{background:var(--ink-3)}
.ev.past{opacity:.62}
.ev .evd{text-align:center;border-inline-end:1px solid var(--line);padding-inline-end:22px}
.ev .evd .dd{font-weight:900;font-size:24px;color:#fff;line-height:1}
.ev .evd .dm{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ac,var(--red));
  font-weight:700;margin-top:5px}
.ev .evd .dy{font-size:10px;color:var(--txt-mut);margin-top:3px;font-weight:600}
.ev .evtype{display:inline-block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--ac,var(--red));border:1px solid var(--ac,var(--red));
  padding:4px 9px;margin-bottom:10px}
.ev h4{font-weight:800;font-size:20px;color:#fff;line-height:1.2;margin-bottom:9px}
.ev p{font-size:13px;font-weight:300;line-height:1.6;color:var(--txt-dim);margin:0 0 12px}
.ev .evmeta{display:flex;flex-wrap:wrap;gap:7px}
.ev .evmeta span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--txt-mut);border:1px solid var(--line);padding:5px 9px}
.ev .evgo{display:flex;flex-direction:column;gap:8px}
.ev .evgo .btn{padding:11px 16px;font-size:10px;justify-content:center}
.ev .evcap{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-mut);
  font-weight:700;text-align:center;margin-top:2px}
.ev .evcap b{color:var(--ac,var(--red))}
@media(max-width:900px){.ev{grid-template-columns:84px 1fr}.ev .evgo{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}}
@media(max-width:560px){.ev{grid-template-columns:1fr}.ev .evd{border-inline-end:none;text-align:start;padding-inline-end:0;display:flex;gap:10px;align-items:baseline}}
.evempty{padding:44px;text-align:center;color:var(--txt-mut);font-size:13px;font-weight:300;background:var(--ink)}

/* ============================================================
   SCENE — full-bleed environmental photography, text laid over it.
   This is the primary section type. Text supports the image, not the reverse.
   ============================================================ */
.scene{position:relative;min-height:88vh;display:flex;overflow:hidden;isolation:isolate}
.scene.tall{min-height:100vh}
.scene.mid{min-height:70vh}
.scene > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transform:scale(1.06);transition:transform 2.4s cubic-bezier(.16,.7,.2,1)}
.scene.in > img{transform:scale(1)}
.scene::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,8,9,.62) 0%,rgba(8,8,9,.22) 34%,rgba(8,8,9,.30) 55%,rgba(8,8,9,.92) 100%)}
.scene.warm::before{background:
  linear-gradient(180deg,rgba(8,8,9,.55) 0%,rgba(8,8,9,.12) 38%,rgba(8,8,9,.86) 100%),
  radial-gradient(90% 70% at 78% 22%,color-mix(in srgb,var(--ac,var(--red)) 42%,transparent) 0%,transparent 62%)}
.scene .swrap{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 40px;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(52px,7vw,96px);padding-top:clamp(90px,12vw,150px)}
.scene.centre .swrap{justify-content:center;padding-bottom:clamp(70px,9vw,120px)}

.scene .skick{display:inline-flex;align-items:center;gap:11px;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;font-weight:700;color:#fff;margin-bottom:18px;opacity:.85}
.scene .skick::before{content:"";width:26px;height:2px;background:var(--ac,var(--red))}
.scene h2,.scene h1{font-weight:900;text-transform:uppercase;letter-spacing:-.038em;color:#fff;
  font-size:clamp(32px,7.4vw,120px);line-height:.92;max-width:15ch}
.scene h2 .thin,.scene h1 .thin{display:block;font-weight:200;text-transform:none;
  letter-spacing:-.03em;color:rgba(255,255,255,.72);font-size:clamp(24px,4.4vw,60px)}
.scene .slead{margin-top:22px;max-width:520px;font-size:clamp(15px,1.35vw,17px);font-weight:300;
  line-height:1.72;color:rgba(255,255,255,.82)}
.scene .sacts{margin-top:30px;display:flex;gap:11px;flex-wrap:wrap}

/* stat row laid over the foot of the image */
.scene .srow{margin-top:clamp(30px,4vw,48px);display:flex;flex-wrap:wrap;gap:0;
  border-top:1px solid rgba(255,255,255,.22)}
.scene .srow div{flex:1 1 130px;padding:18px 20px 0 0;margin-inline-end:20px;
  border-inline-end:1px solid rgba(255,255,255,.14)}
.scene .srow div:last-child{border-inline-end:none}
.scene .srow .v{font-weight:900;font-size:clamp(20px,2.5vw,32px);color:#fff;line-height:1;letter-spacing:-.03em}
.scene .srow .v em{font-style:normal;color:var(--ac,var(--red))}
.scene .srow .k{margin-top:8px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.6);font-weight:700}

/* equipment pins laid on the photograph */
.scene .pins{position:absolute;inset:0;z-index:3;pointer-events:none}
.scene .pin{position:absolute;pointer-events:auto;transform:translate(-50%,-50%)}
.scene .pin i{display:block;width:18px;height:18px;border-radius:50%;
  background:#fff;border:4px solid var(--ac,var(--red));
  box-shadow:0 2px 14px rgba(0,0,0,.65),0 0 0 6px rgba(255,255,255,.10);
  animation:pinPulse 2.8s ease-in-out infinite}
@keyframes pinPulse{0%,100%{box-shadow:0 2px 14px rgba(0,0,0,.65),0 0 0 6px rgba(255,255,255,.10)}
  50%{box-shadow:0 2px 14px rgba(0,0,0,.65),0 0 0 14px rgba(255,255,255,.03)}}
.scene .pin span{position:absolute;inset-inline-start:28px;top:50%;transform:translateY(-50%);
  white-space:nowrap;background:rgba(8,8,9,.82);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);
  padding:9px 13px;font-size:11px;letter-spacing:.08em;font-weight:700;color:#fff;
  opacity:1;transition:opacity .3s,transform .3s;transform:translateY(-50%) translateX(-6px)}
.scene .pin:hover span,.scene.in .pin span{opacity:1;transform:translateY(-50%) translateX(0)}
.scene .pin.l span{inset-inline-start:auto;inset-inline-end:28px;transform:translateY(-50%) translateX(6px)}
.scene.in .pin.l span{transform:translateY(-50%) translateX(0)}
@media(max-width:760px){
  .scene{min-height:72vh}.scene.tall{min-height:84vh}
  .scene .swrap{padding-inline-start:22px;padding-inline-end:22px}
  .scene .pin span{display:none}
}
@media(prefers-reduced-motion:reduce){.scene > img{transform:none}.scene .pin i{animation:none}}

/* ---------- ZONE GRID, PHOTOGRAPHIC ---------- */
.zgrid2{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:40px}
.zc{position:relative;display:block;min-height:290px;overflow:hidden;background:var(--ink-2)}
.zc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;
  transition:opacity .45s,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.zc::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,11,.15) 0%,rgba(10,10,11,.9) 100%)}
.zc:hover img{opacity:.82;transform:scale(1.06)}
.zci{position:absolute;inset:0;z-index:2;padding:22px 20px;display:flex;flex-direction:column;
  justify-content:space-between}
.zcn{font-weight:900;font-size:44px;line-height:1;color:transparent;
  -webkit-text-stroke:1.4px rgba(255,255,255,.42);transition:.4s}
.zc:hover .zcn{color:var(--zc);-webkit-text-stroke:1.4px var(--zc)}
.zc h4{font-weight:800;font-size:20px;color:#fff;line-height:1.1}
.zcs{margin-top:7px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--zc)}
.zc::before{content:"";position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:0;height:3px;background:var(--zc);
  z-index:3;transform:scaleX(0);transform-origin:left;transition:transform .45s}
.zc:hover::before{transform:scaleX(1)}
@media(max-width:1000px){.zgrid2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.zgrid2{grid-template-columns:1fr}.zc{min-height:220px}}

/* ---------- NAV DROPDOWN (the zones) ---------- */
.navdd{position:relative;display:flex;align-items:center}
.navdd>.ddt{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.navdd>.ddt svg{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2.4;
  transition:transform .25s}
.navdd.open>.ddt svg{transform:rotate(180deg)}
.ddm{position:absolute;top:calc(100% + 18px);inset-inline-start:50%;transform:translateX(-50%) translateY(-8px);
  min-width:270px;background:rgba(12,12,14,.97);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);border:1px solid var(--line);padding:8px;
  opacity:0;visibility:hidden;transition:opacity .22s,transform .22s,visibility .22s;z-index:220}
.navdd:hover .ddm,.navdd.open .ddm{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.ddm::before{content:"";position:absolute;inset-inline-start:0;inset-inline-end:0;top:-18px;height:18px}
.ddm a{display:flex!important;align-items:center;gap:11px;padding:10px 12px;font-size:11px;
  letter-spacing:.06em;text-transform:none;font-weight:600;color:#d6d6d8;white-space:nowrap}
.ddm a::after{display:none!important}
.ddm a:hover{background:rgba(255,255,255,.06);color:#fff}
.ddm a i{width:7px;height:7px;flex:none;background:var(--zc,var(--red));border-radius:50%}
.ddm a b{font-weight:900;color:var(--txt-mut);font-size:11px;min-width:18px}
.ddm a:hover b{color:var(--zc,var(--red))}
.ddm .ddall{margin-top:6px;border-top:1px solid var(--line);padding-top:12px;
  color:var(--red);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:1120px){
  .navdd{flex-direction:column;align-items:flex-start;width:100%}
  .navdd>.ddt{font-size:15px}
  .ddm{position:static;transform:none;opacity:1;visibility:visible;background:none;border:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;padding:10px 0 0 14px;min-width:0;
    display:none;border-inline-start:1px solid var(--line)}
  .navdd.open .ddm{display:block;transform:none}
  .ddm a{font-size:13px;padding:8px 0}
}

/* ============================================================
   LUX — a quiet, light, spacious treatment. Scoped to .lux so it
   cannot disturb the rest of the site.
   ============================================================ */
.lux{background:var(--paper);color:var(--ink-txt)}
.lux .lwrap{max-width:1180px;margin:0 auto;padding:0 clamp(24px,6vw,80px)}

/* nav goes quiet over cream */
body.lux-page .nav{background:rgba(240,236,230,.72);border-bottom:1px solid rgba(23,21,15,.08)}
body.lux-page .nav.scrolled{background:rgba(240,236,230,.96)}
body.lux-page .navlinks a,body.lux-page .navdd>.ddt{color:#514d44}
body.lux-page .navlinks a:hover,body.lux-page .navlinks a.here,
body.lux-page .navdd>.ddt:hover{color:var(--ink-txt)}
body.lux-page .brand .bwm b{color:var(--ink-txt)}
body.lux-page .brand .bwm em{color:#8b8579}
body.lux-page .brand .blogo{content:url("images/mcx-logo-black.png")}
body.lux-page .burger span{background:var(--ink-txt)}
body.lux-page .ddm{background:rgba(247,245,241,.98);border-color:rgba(23,21,15,.10)}
body.lux-page .ddm a{color:#514d44}
body.lux-page .ddm a:hover{background:rgba(23,21,15,.05);color:var(--ink-txt)}
body.lux-page .rail a{background:rgba(23,21,15,.18)}
body.lux-page .rail a.active{background:var(--red)}

/* generous vertical rhythm */
.lux .lsec{padding:clamp(90px,13vw,190px) 0}
.lux .lsec.first{padding-top:clamp(140px,16vw,230px)}
.lux .lrule{height:1px;background:rgba(23,21,15,.12);margin:0}

/* labels + display type, light and unhurried */
.lux .llabel{font-size:10px;letter-spacing:.34em;text-transform:uppercase;font-weight:600;color:#8b8579}
.lux h1.ldisp{font-weight:200;font-size:clamp(44px,6.4vw,84px);line-height:1.02;
  letter-spacing:-.035em;color:var(--ink-txt);margin-top:clamp(24px,3vw,40px);max-width:16ch}
.lux h1.ldisp b{font-weight:500}
.lux h2.ldisp{font-weight:200;font-size:clamp(32px,4.6vw,60px);line-height:1.06;
  letter-spacing:-.03em;color:var(--ink-txt);max-width:18ch}
.lux h2.ldisp b{font-weight:500}
.lux .llead{margin-top:clamp(22px,2.6vw,34px);font-size:clamp(15px,1.35vw,20px);font-weight:300;
  line-height:1.8;color:#5f5b52;max-width:52ch}
.lux .lnote{font-size:13px;font-weight:300;line-height:1.8;color:#6b675e;max-width:46ch}

/* a single restrained action */
.lux .lbtn{display:inline-flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:var(--ink-txt);
  border-bottom:1px solid rgba(23,21,15,.32);padding-bottom:9px;transition:.3s}
.lux .lbtn:hover{border-color:var(--ink-txt);gap:18px}
.lux .lbtn .a{color:var(--red)}
.lux .lacts{margin-top:clamp(34px,4vw,52px);display:flex;gap:clamp(26px,4vw,48px);flex-wrap:wrap}

/* imagery, inset and allowed to breathe */
.lux .lfig{position:relative;overflow:hidden;background:#e6e0d6}
.lux .lfig img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 2s cubic-bezier(.16,.7,.2,1)}
.lux .lfig:hover img{transform:scale(1.03)}
.lux .lcap{margin-top:14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#8b8579;font-weight:600}
.lux .lsplit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,90px);align-items:center}
.lux .lsplit.wide{grid-template-columns:.85fr 1.15fr}
@media(max-width:860px){.lux .lsplit,.lux .lsplit.wide{grid-template-columns:1fr;gap:34px}}

/* the zones, as a quiet index */
.lux .lindex{border-top:1px solid rgba(23,21,15,.12)}
.lux .lrow{display:grid;grid-template-columns:64px 1fr auto;gap:clamp(18px,3vw,40px);
  align-items:center;padding:clamp(20px,2.4vw,30px) 0;
  border-bottom:1px solid rgba(23,21,15,.12);transition:padding-left .35s,background .35s}
.lux .lrow:hover{padding-inline-start:14px;background:rgba(23,21,15,.022)}
.lux .lrow .ln{font-size:11px;letter-spacing:.16em;color:#a49f95;font-weight:600}
.lux .lrow h3{font-weight:300;font-size:clamp(20px,2.3vw,32px);letter-spacing:-.02em;color:var(--ink-txt)}
.lux .lrow:hover h3{color:var(--zc,var(--red))}
.lux .lrow .lk{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8b8579;font-weight:600}
.lux .lrow .lg{color:var(--zc,var(--red));font-size:15px;opacity:0;transform:translateX(-8px);
  transition:.35s}
.lux .lrow:hover .lg{opacity:1;transform:none}
@media(max-width:700px){.lux .lrow{grid-template-columns:44px 1fr}.lux .lrow .lk{display:none}}

/* facts, hairline only */
.lux .lfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.lux .lfact .k{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:#a49f95;font-weight:600}
.lux .lfact .v{margin-top:12px;font-size:clamp(17px,1.6vw,20px);font-weight:300;color:var(--ink-txt);line-height:1.4}
.lux .lfact .s{margin-top:8px;font-size:13px;font-weight:300;color:#6b675e;line-height:1.65}
@media(max-width:760px){.lux .lfacts{grid-template-columns:1fr;gap:30px}}

/* one dark moment, for contrast rather than default */
.lux .ldark{background:var(--ink);color:#fff}
.lux .ldark h2.ldisp{color:#fff}
.lux .ldark .llead{color:rgba(255,255,255,.72)}
.lux .ldark .llabel{color:rgba(255,255,255,.5)}
.lux .ldark .lbtn{color:#fff;border-color:rgba(255,255,255,.34)}
.lux .ldark .lbtn:hover{border-color:#fff}

/* ---------- LUX HERO — text left, full-height image bleeding right ---------- */
.lux .lhero{min-height:calc(100vh - var(--nav-h,64px));display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);align-items:stretch;gap:0}
.lux .lhero .lh-copy{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(70px,9vw,120px) clamp(34px,5vw,72px) clamp(70px,9vw,120px) clamp(24px,6vw,80px);
  max-width:760px;margin-inline-start:auto;width:100%}
.lux .lhero .lh-fig{position:relative;overflow:hidden;background:#e6e0d6}
.lux .lhero .lh-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);transition:transform 2.6s cubic-bezier(.16,.7,.2,1)}
.lux .lhero.in .lh-fig img{transform:scale(1)}
.lux .lhero .lh-tag{position:absolute;inset-inline-start:0;bottom:0;z-index:2;background:var(--paper);
  color:#514d44;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  padding:14px 20px}
.lux .lhero h1.ldisp{margin-top:clamp(20px,2.4vw,32px);max-width:14ch}
.lux .lhero .llead{max-width:44ch}
@media(max-width:900px){
  .lux .lhero{grid-template-columns:1fr;min-height:0}
  .lux .lhero .lh-copy{padding:clamp(90px,16vw,120px) clamp(24px,6vw,40px) clamp(40px,7vw,60px);
    max-width:none;margin-inline-start:0}
  .lux .lhero .lh-fig{aspect-ratio:4/3}
}

/* ---------- ZONE INDEX with thumbnails, on paper ---------- */
.zindex{border-top:1px solid rgba(23,21,15,.14)}
.zrow{display:grid;grid-template-columns:52px 96px 1fr auto 26px;gap:clamp(16px,2.6vw,34px);
  align-items:center;padding:14px 0;border-bottom:1px solid rgba(23,21,15,.14);
  transition:padding-left .35s,background .35s}
.zrow:hover{padding-inline-start:14px;background:rgba(23,21,15,.025)}
.zrow .zn{font-size:11px;letter-spacing:.16em;color:#a49f95;font-weight:700}
.zrow .zthumb{width:96px;height:60px;overflow:hidden;background:#e6e0d6;display:block}
.zrow .zthumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.02);
  transition:filter .5s,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.zrow:hover .zthumb img{filter:none;transform:scale(1.07)}
.zrow .zt{font-weight:300;font-size:clamp(20px,2.2vw,32px);letter-spacing:-.02em;color:#17150F;
  transition:color .3s}
.zrow:hover .zt{color:var(--zc,var(--red))}
.zrow .zk{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#8b8579;font-weight:700}
.zrow .zg{color:var(--zc,var(--red));font-size:15px;opacity:0;transform:translateX(-8px);transition:.35s}
.zrow:hover .zg{opacity:1;transform:none}
@media(max-width:820px){.zrow{grid-template-columns:40px 74px 1fr 20px}.zrow .zk{display:none}
  .zrow .zthumb{width:74px;height:48px}}
@media(max-width:520px){.zrow{grid-template-columns:34px 1fr 18px}.zrow .zthumb{display:none}}

/* ============================================================
   THE SPINE — the eight zones as the page's structure, not a list
   ============================================================ */
.spine{background:var(--ink);position:relative}
.spine::before{content:"";position:absolute;inset-inline-start:50%;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.10) 8%,rgba(255,255,255,.10) 92%,transparent);
  transform:translateX(-.5px)}
.sp{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(30px,5vw,80px);padding:clamp(46px,6vw,86px) clamp(24px,5vw,60px);
  max-width:1340px;margin:0 auto}
.sp:nth-child(even) .sp-fig{order:-1}
.sp-fig{position:relative;overflow:hidden;aspect-ratio:5/4;background:var(--ink-2)}
.sp-fig img{width:100%;height:100%;object-fit:cover;filter:saturate(.92);
  transition:transform 1.8s cubic-bezier(.16,.7,.2,1),filter .8s}
.sp:hover .sp-fig img{transform:scale(1.05);filter:saturate(1.05)}
.sp-fig::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(8,8,9,.5) 100%)}
.sp-num{position:absolute;z-index:3;top:-.14em;font-family:'Archivo Expanded','Archivo';
  font-weight:900;font-size:clamp(84px,11vw,168px);line-height:.8;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.6px var(--zc,var(--red));pointer-events:none;opacity:.9}
.sp:nth-child(odd) .sp-num{inset-inline-start:-.06em}
.sp:nth-child(even) .sp-num{inset-inline-end:-.06em}
.sp-body{position:relative;padding-top:clamp(30px,4vw,58px)}
.sp-k{font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:700;
  color:var(--zc,var(--red));margin-bottom:16px}
.sp-body h3{font-weight:200;font-size:clamp(24px,3.8vw,44px);line-height:1.02;letter-spacing:-.035em;
  color:#fff;margin-bottom:16px}
.sp-body h3 b{font-weight:600}
.sp-body p{font-size:15px;font-weight:300;line-height:1.75;color:var(--txt-dim);max-width:44ch}
.sp-kit{margin-top:20px;display:flex;flex-wrap:wrap;gap:7px}
.sp-kit span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--txt-mut);border:1px solid var(--line);padding:6px 10px}
.sp-go{margin-top:24px;display:inline-flex;align-items:center;gap:10px;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:8px;transition:.3s}
.sp-go:hover{border-color:var(--zc,var(--red));gap:16px}
.sp-go i{font-style:normal;color:var(--zc,var(--red))}
@media(max-width:880px){
  .spine::before{inset-inline-start:24px}
  .sp{grid-template-columns:1fr;padding-inline-start:52px;gap:22px}
  .sp:nth-child(even) .sp-fig{order:0}
  .sp-num{font-size:clamp(60px,15vw,84px);inset-inline-start:auto!important;inset-inline-end:auto!important;
    top:auto;bottom:calc(100% - .28em)}
  .sp-body{padding-top:14px}
}

/* ---------- DEFINITION BLOCK — establishing what MCX is ---------- */
.defs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(23,21,15,.14);
  border:1px solid rgba(23,21,15,.14);margin-top:clamp(38px,4.5vw,60px)}
.defs .df{background:var(--paper);padding:clamp(28px,3vw,40px) clamp(24px,2.4vw,34px)}
.defs .dterm{font-weight:800;font-size:clamp(20px,2.3vw,32px);letter-spacing:-.02em;color:#17150F;
  line-height:1.1}
.defs .dphon{margin-top:8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);font-weight:700}
.defs .dbody{margin-top:16px;font-size:15px;font-weight:300;line-height:1.75;color:#4b473f}
.defs .dmeta{margin-top:16px;padding-top:14px;border-top:1px solid rgba(23,21,15,.14);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8b8579;font-weight:700}
@media(max-width:860px){.defs{grid-template-columns:1fr}}

/* ---------- BIG ESTABLISHING STATEMENT ---------- */
.estab{font-weight:200;font-size:clamp(24px,3.2vw,44px);line-height:1.28;letter-spacing:-.022em;
  color:#17150F;max-width:26ch}
.estab b{font-weight:600}
.estab .r{color:var(--red);font-weight:400}

/* ---------- AUDIENCE STRIP ---------- */
.auds{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(34px,4vw,50px)}
.aud{background:var(--ink);padding:26px 24px}
.aud .an{font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  color:var(--ac,var(--red));margin-bottom:11px}
.aud h5{font-weight:700;font-size:17px;color:#fff;line-height:1.25;margin-bottom:8px}
.aud p{font-size:13px;font-weight:300;line-height:1.6;color:var(--txt-mut);margin:0}
@media(max-width:820px){.auds{grid-template-columns:1fr}}

/* ============================================================
   MEDIACAST DESIGN LANGUAGE
   Tokens, type and components lifted from the MediaCast corporate site
   so MCX reads as part of the same family. Scoped to .mc.
   ============================================================ */
.mc{
  --bg:#FAFAF8; --bg2:#F3F2EF; --bg3:#E8E6E1;
  --mink:#0F0F0E; --mmuted:#3a3a3a; --mfaint:#6e6e73;
  --macc:#E8281E; --macc2:#FF3D33;
  --mline:rgba(15,15,14,.09);
  --slate:#111827; --forest:#0A1C0C; --indigo:#160F3B; --amber:#F5A32A;
  --MW:1320px;
  background:var(--bg);color:var(--mink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.mc .mw{max-width:var(--MW);margin:0 auto;padding:0 clamp(22px,4.5vw,60px)}
.mc section{padding:clamp(64px,8vw,120px) 0}
.mc section.tight{padding:clamp(44px,5vw,72px) 0}

/* monospace micro-label — the MediaCast signature */
.mc .eyebrow{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mfaint);display:inline-flex;align-items:center;gap:11px}
.mc .eyebrow::before{content:"";width:22px;height:1.5px;background:var(--macc);flex:none}
.mc .eyebrow.on-dark{color:rgba(255,255,255,.6)}
.mc .eyebrow.on-dark::before{background:var(--macc2)}

/* display type at MediaCast scale */
.mc h1,.mc h2,.mc h3{font-family:'Inter',sans-serif;letter-spacing:-.04em;line-height:1.02;
  color:var(--mink);font-weight:800}
.mc h1{font-size:clamp(32px,4.4vw,60px);margin:20px 0 0}
.mc h2{font-size:clamp(24px,3.4vw,44px);margin:18px 0 0}
.mc h3{font-size:clamp(20px,1.9vw,24px);letter-spacing:-.025em}
.mc .thin{font-weight:300;color:var(--mfaint)}
.mc .lead{margin-top:20px;font-size:clamp(15px,1.2vw,17px);font-weight:400;line-height:1.68;
  color:var(--mmuted);max-width:56ch}
.mc p{color:var(--mmuted)}

/* dark section blocks */
.mc .blk{background:var(--slate);color:#fff}
.mc .blk.forest{background:var(--forest)}
.mc .blk.indigo{background:var(--indigo)}
.mc .blk h1,.mc .blk h2,.mc .blk h3{color:#fff}
.mc .blk p,.mc .blk .lead{color:rgba(255,255,255,.72)}

/* buttons */
.mc .b{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
  background:var(--macc);color:#fff;padding:14px 26px;border-radius:100px;transition:.2s}
.mc .b:hover{background:var(--macc2);transform:translateY(-1px)}
.mc .bo{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;
  color:var(--mink);border:1.5px solid rgba(15,15,14,.2);padding:13px 26px;border-radius:100px;transition:.2s}
.mc .bo:hover{background:var(--mink);color:#fff;border-color:var(--mink)}
.mc .blk .bo{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.22)}
.mc .blk .bo:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.45)}
.mc .acts{margin-top:30px;display:flex;gap:11px;flex-wrap:wrap}

/* split + cards */
.mc .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,74px);align-items:center}
.mc .split.lead-l{grid-template-columns:.9fr 1.1fr}
@media(max-width:880px){.mc .split,.mc .split.lead-l{grid-template-columns:1fr;gap:30px}}
.mc .fig{position:relative;overflow:hidden;border-radius:4px;background:var(--bg3)}
.mc .fig img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.6s cubic-bezier(.16,.7,.2,1)}
.mc .fig:hover img{transform:scale(1.035)}

.mc .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);margin-top:clamp(30px,4vw,48px)}
@media(max-width:880px){.mc .cards3{grid-template-columns:1fr}}
.mc .cd{background:#fff;border:1px solid var(--mline);border-radius:4px;padding:clamp(24px,2.4vw,32px)}
.mc .blk .cd{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.mc .cd .n{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.18em;color:var(--macc);margin-bottom:14px}
.mc .blk .cd .n{color:var(--macc2)}
.mc .cd h3{margin-bottom:9px}
.mc .cd p{font-size:15px;line-height:1.66;margin:0;color:var(--mfaint)}
.mc .blk .cd p{color:rgba(255,255,255,.62)}

/* zone list */
.mc .zl{border-top:1px solid var(--mline);margin-top:clamp(28px,3.4vw,42px)}
.mc .blk .zl{border-color:rgba(255,255,255,.14)}
.mc .zi{display:grid;grid-template-columns:58px 88px 1fr auto 22px;gap:clamp(14px,2.4vw,30px);
  align-items:center;padding:15px 0;border-bottom:1px solid var(--mline);transition:.3s}
.mc .blk .zi{border-color:rgba(255,255,255,.14)}
.mc .zi:hover{padding-inline-start:12px;background:rgba(15,15,14,.02)}
.mc .blk .zi:hover{background:rgba(255,255,255,.04)}
.mc .zi .zn{font-family:'Space Mono',monospace;font-size:11px;color:var(--mfaint)}
.mc .zi .zth{width:88px;height:56px;border-radius:3px;overflow:hidden;background:var(--bg3)}
.mc .zi .zth img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:.5s}
.mc .zi:hover .zth img{filter:none;transform:scale(1.06)}
.mc .zi .znm{font-size:clamp(17px,1.7vw,20px);font-weight:600;letter-spacing:-.02em;color:var(--mink)}
.mc .blk .zi .znm{color:#fff}
.mc .zi:hover .znm{color:var(--zc,var(--macc))}
.mc .zi .zkk{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--mfaint)}
.mc .zi .zar{color:var(--zc,var(--macc));opacity:0;transform:translateX(-6px);transition:.3s}
.mc .zi:hover .zar{opacity:1;transform:none}
@media(max-width:820px){.mc .zi{grid-template-columns:40px 70px 1fr 18px}.mc .zi .zkk{display:none}
  .mc .zi .zth{width:70px;height:46px}}
@media(max-width:520px){.mc .zi{grid-template-columns:34px 1fr 16px}.mc .zi .zth{display:none}}

/* stat row */
.mc .stats4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--mline);
  border:1px solid var(--mline);border-radius:4px;overflow:hidden;margin-top:clamp(28px,3.4vw,44px)}
.mc .blk .stats4{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.12)}
.mc .st4{background:var(--bg);padding:26px 22px}
.mc .blk .st4{background:var(--slate)}
.mc .st4 .v{font-size:clamp(20px,2.4vw,32px);font-weight:800;letter-spacing:-.03em;color:var(--mink)}
.mc .blk .st4 .v{color:#fff}
.mc .st4 .v em{font-style:normal;color:var(--macc)}
.mc .blk .st4 .v em{color:var(--macc2)}
.mc .st4 .k{margin-top:8px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mfaint)}
.mc .blk .st4 .k{color:rgba(255,255,255,.55)}
@media(max-width:760px){.mc .stats4{grid-template-columns:repeat(2,1fr)}}

/* nav adapts to the warm-white page */
body.mc-page .nav{background:rgba(250,250,248,.82);border-bottom:1px solid rgba(15,15,14,.09)}
body.mc-page .nav.scrolled{background:rgba(250,250,248,.97)}
body.mc-page .navlinks a,body.mc-page .navdd>.ddt{color:#3a3a3a;font-family:'Inter',sans-serif}
body.mc-page .navlinks a:hover,body.mc-page .navlinks a.here,
body.mc-page .navdd>.ddt:hover{color:#0F0F0E}
body.mc-page .book{background:#E8281E;border-radius:100px}
body.mc-page .brand .bwm b{color:#0F0F0E}
body.mc-page .brand .bwm em{color:#6e6e73}
body.mc-page .brand .blogo{content:url("images/mcx-logo-black.png")}
body.mc-page .burger span{background:#0F0F0E}
body.mc-page .ddm{background:rgba(250,250,248,.99);border-color:rgba(15,15,14,.10)}
body.mc-page .ddm a{color:#3a3a3a}
body.mc-page .ddm a:hover{background:rgba(15,15,14,.05);color:#0F0F0E}
body.mc-page .rail a{background:rgba(15,15,14,.16)}
body.mc-page .rail a.active{background:#E8281E}
body.mc-page footer{background:#0F0F0E}

/* ---------- EDITORIAL PHILOSOPHY BLOCKS ---------- */
.phil{max-width:900px}
.phil .pq{font-weight:200;font-size:clamp(24px,3.6vw,44px);line-height:1.18;letter-spacing:-.03em;
  color:#17150F}
.phil .pq b{font-weight:600}
.phil .pq .r{color:var(--red)}
.phil .pbody{margin-top:clamp(26px,3vw,40px);columns:2;column-gap:clamp(34px,4vw,60px)}
.phil .pbody p{font-size:15px;font-weight:300;line-height:1.85;color:#4b473f;margin-bottom:18px;
  break-inside:avoid}
.phil .pbody p strong{font-weight:600;color:#17150F}
@media(max-width:820px){.phil .pbody{columns:1}}

/* ---------- UNIQUE / DIFFERENTIATOR LIST ---------- */
.uniq{margin-top:clamp(36px,4.4vw,56px);border-top:1px solid rgba(255,255,255,.14)}
.paper .uniq,.on-paper .uniq{border-color:rgba(23,21,15,.14)}
.un{display:grid;grid-template-columns:56px 1fr 1.25fr;gap:clamp(20px,3vw,44px);
  padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid rgba(255,255,255,.14);align-items:start}
.paper .un,.on-paper .un{border-color:rgba(23,21,15,.14)}
.un .unn{font-weight:900;font-size:13px;letter-spacing:.14em;color:var(--ac,var(--red));padding-top:4px}
.un h4{font-weight:700;font-size:clamp(17px,1.9vw,24px);line-height:1.22;color:#fff;letter-spacing:-.02em}
.paper .un h4,.on-paper .un h4{color:#17150F}
.un p{font-size:15px;font-weight:300;line-height:1.75;color:var(--txt-dim);margin:0}
.paper .un p,.on-paper .un p{color:#4b473f}
.un .only{display:inline-block;margin-top:10px;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;color:var(--ac,var(--red));
  border:1px solid var(--ac,var(--red));padding:5px 9px}
@media(max-width:820px){.un{grid-template-columns:40px 1fr;gap:16px}.un p{grid-column:2}}

/* ---------- VISIT ARC ---------- */
.arc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(34px,4vw,50px)}
.paper .arc,.on-paper .arc{background:rgba(23,21,15,.14);border-color:rgba(23,21,15,.14)}
.arcs{background:var(--ink);padding:clamp(28px,3vw,40px) clamp(24px,2.6vw,34px)}
.paper .arcs,.on-paper .arcs{background:var(--paper)}
.arcs .at{font-size:10px;letter-spacing:.26em;text-transform:uppercase;font-weight:700;
  color:var(--ac,var(--red));margin-bottom:14px}
.arcs h4{font-weight:700;font-size:clamp(20px,2vw,24px);color:#fff;line-height:1.2;margin-bottom:12px}
.paper .arcs h4,.on-paper .arcs h4{color:#17150F}
.arcs p{font-size:15px;font-weight:300;line-height:1.72;color:var(--txt-dim);margin:0 0 12px}
.paper .arcs p,.on-paper .arcs p{color:#4b473f}
.arcs ul{list-style:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.paper .arcs ul,.on-paper .arcs ul{border-color:rgba(23,21,15,.14)}
.arcs li{font-size:13px;font-weight:300;color:var(--txt-mut);padding:5px 0 5px 16px;position:relative}
.paper .arcs li,.on-paper .arcs li{color:#6b675e}
.arcs li::before{content:"";position:absolute;inset-inline-start:0;top:12px;width:5px;height:5px;
  background:var(--ac,var(--red))}
@media(max-width:820px){.arc{grid-template-columns:1fr}}

/* ============================================================
   PX — Porsche Experience discipline, measured from the live page:
   white ground, regular-weight display type, sentence case with full
   stops, 16:9 imagery at full width, ~50 words per block.
   ============================================================ */
.px{background:#fff;color:#0B0B0C;font-family:'Inter',-apple-system,sans-serif}
.px .pw{max-width:1280px;margin:0 auto;padding:0 clamp(22px,4vw,48px)}
.px section{padding:clamp(56px,7vw,104px) 0}

.px h1{font-size:clamp(32px,4.2vw,44px);font-weight:400;letter-spacing:-.01em;line-height:1.12;color:#0B0B0C}
.px h2{font-size:clamp(24px,3.3vw,44px);font-weight:600;letter-spacing:-.015em;line-height:1.14;color:#0B0B0C}
.px h3{font-size:clamp(17px,1.6vw,20px);font-weight:600;letter-spacing:-.005em;line-height:1.3;color:#0B0B0C}
.px p{font-size:15px;font-weight:400;line-height:1.62;color:#4A4A4E;max-width:60ch}
.px .sub{margin-top:14px;font-size:17px;color:#4A4A4E}

/* hero — 2.33:1, text low-left, no shouting */
.px .phero2{position:relative;width:100%;aspect-ratio:2.33/1;min-height:420px;overflow:hidden;background:#0B0B0C}
.px .phero2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.px .phero2::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,8,9,.72) 0%,rgba(8,8,9,.28) 46%,transparent 72%)}
.px .phero2 .hw{position:absolute;z-index:2;inset-inline-start:0;inset-inline-end:0;bottom:clamp(34px,5vw,64px)}
.px .phero2 h1{color:#fff;font-weight:400}
.px .phero2 .tag{margin-top:10px;font-size:17px;color:rgba(255,255,255,.9)}

/* sub-nav strip under the hero */
.px .subnav{border-bottom:1px solid #E3E3E5;background:#fff}
.px .subnav .in{max-width:1280px;margin:0 auto;padding:0 clamp(22px,4vw,48px);
  display:flex;gap:clamp(20px,3vw,38px);flex-wrap:wrap}
.px .subnav a{padding:19px 0;font-size:13px;color:#4A4A4E;border-bottom:2px solid transparent;transition:.2s}
.px .subnav a:hover,.px .subnav a.on{color:#0B0B0C;border-bottom-color:#D5001C}

/* statement */
.px .stmt{font-size:clamp(24px,3.3vw,44px);font-weight:600;line-height:1.16;letter-spacing:-.015em;
  max-width:20ch;color:#0B0B0C}

/* a named experience: 16:9 image, name, ~50 words */
.px .exp{margin-top:clamp(44px,5vw,72px)}
.px .exp .fig{width:100%;aspect-ratio:16/9;overflow:hidden;background:#EDEDEF}
.px .exp .fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.16,.7,.2,1)}
.px .exp:hover .fig img{transform:scale(1.025)}
.px .exp .body{margin-top:clamp(22px,2.4vw,30px);display:grid;grid-template-columns:1fr 1.15fr;
  gap:clamp(20px,4vw,60px);align-items:start}
.px .exp .body p{margin:0}
@media(max-width:820px){.px .exp .body{grid-template-columns:1fr;gap:14px}}

/* card row */
.px .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);
  margin-top:clamp(34px,4vw,52px)}
@media(max-width:860px){.px .row3{grid-template-columns:1fr}}
.px .c{display:block}
.px .c .fig{width:100%;aspect-ratio:16/9;overflow:hidden;background:#EDEDEF;margin-bottom:16px}
.px .c .fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.16,.7,.2,1)}
.px .c:hover .fig img{transform:scale(1.03)}
.px .c p{font-size:15px;margin-top:8px}

/* link + button, Porsche-plain */
.px .lnk{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-size:15px;
  color:#0B0B0C;border-bottom:1px solid #0B0B0C;padding-bottom:3px;transition:.2s}
.px .lnk:hover{color:#D5001C;border-color:#D5001C}
.px .pbtn{display:inline-flex;align-items:center;gap:9px;background:#D5001C;color:#fff;
  padding:14px 30px;font-size:15px;font-weight:500;transition:.2s}
.px .pbtn:hover{background:#B4001A}
.px .pbtn.ghost{background:transparent;color:#0B0B0C;border:1px solid #B9B9BD}
.px .phero2 .pbtn.ghost{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(0,0,0,.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.px .phero2 .pbtn.ghost:hover{border-color:#fff;background:rgba(0,0,0,.4)}
.px .pbtn.ghost:hover{border-color:#0B0B0C;background:transparent}
.px .cta{margin-top:clamp(28px,3vw,40px);display:flex;gap:12px;flex-wrap:wrap}

/* light grey band for contrast */
.px .band2{background:#F4F4F6}

/* zone strip */
.px .zs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#E3E3E5;
  border:1px solid #E3E3E5;margin-top:clamp(30px,3.6vw,46px)}
.px .zs a{background:#fff;padding:22px 20px;transition:background .25s}
.px .zs a:hover{background:#F4F4F6}
.px .zs .n{font-size:11px;color:#8A8A8F;margin-bottom:9px}
.px .zs .t{font-size:15px;font-weight:600;color:#0B0B0C;line-height:1.25}
.px .zs .k{margin-top:6px;font-size:13px;color:#6E6E73}
@media(max-width:900px){.px .zs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.px .zs{grid-template-columns:1fr}}

/* nav over a white page */
body.px-page .nav{background:rgba(255,255,255,.9);border-bottom:1px solid #E3E3E5}
body.px-page .nav.scrolled{background:#fff}
body.px-page .navlinks a,body.px-page .navdd>.ddt{color:#4A4A4E}
body.px-page .navlinks a:hover,body.px-page .navlinks a.here,
body.px-page .navdd>.ddt:hover{color:#0B0B0C}
body.px-page .book{background:#D5001C;border-radius:0}
body.px-page .brand .bwm b{color:#0B0B0C}
body.px-page .brand .bwm em{color:#6E6E73}
body.px-page .brand .blogo{content:url("images/mcx-logo-black.png")}
body.px-page .burger span{background:#0B0B0C}
body.px-page .ddm{background:#fff;border-color:#E3E3E5}
body.px-page .ddm a{color:#4A4A4E}
body.px-page .ddm a:hover{background:#F4F4F6;color:#0B0B0C}
body.px-page .rail{display:none}

/* ---------- PX FIXES: fill the frame, earn the attention ---------- */
.px .phero2{aspect-ratio:auto;min-height:min(84vh,760px)}
.px .phero2::after{background:linear-gradient(100deg,rgba(6,6,7,.90) 0%,rgba(6,6,7,.72) 34%,rgba(6,6,7,.28) 62%,rgba(6,6,7,.12) 100%),linear-gradient(180deg,rgba(6,6,7,.45) 0%,transparent 30%,rgba(6,6,7,.55) 100%)}
.px .phero2 .hw{bottom:clamp(44px,6vw,80px)}
.px .phero2 h1{font-size:clamp(32px,6.4vw,84px);font-weight:600;letter-spacing:-.03em;max-width:16ch}
.px .phero2 h1 span{display:block;font-weight:300;color:rgba(255,255,255,.92)}
.px .phero2 .tag{margin-top:18px;font-size:clamp(15px,1.4vw,20px);max-width:46ch;color:rgba(255,255,255,.92)}
.px .phero2 .hcta{margin-top:26px;display:flex;gap:11px;flex-wrap:wrap}
.px .phero2 .hstat{margin-top:clamp(26px,3vw,40px);display:flex;flex-wrap:wrap;gap:0;
  border-top:1px solid rgba(255,255,255,.24);max-width:760px}
.px .phero2 .hstat div{flex:1 1 120px;padding:15px 18px 0 0;margin-inline-end:18px;
  border-inline-end:1px solid rgba(255,255,255,.16)}
.px .phero2 .hstat div:last-child{border-inline-end:none}
.px .phero2 .hstat .v{font-size:clamp(20px,2vw,24px);font-weight:600;color:#fff;letter-spacing:-.02em}
.px .phero2 .hstat .k{margin-top:5px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.6)}

/* two-column section head so copy never floats alone */
.px .head2{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(26px,5vw,72px);align-items:start}
.px .head2 h2{margin:0}
.px .head2 p{margin:0}
@media(max-width:880px){.px .head2{grid-template-columns:1fr;gap:16px}}
.px .stmt{max-width:none}

/* dark band for contrast */
.px .dk{background:#0B0B0C;color:#fff}
.px .dk h1,.px .dk h2,.px .dk h3{color:#fff}
.px .dk p{color:rgba(255,255,255,.68)}
.px .dk .lnk{color:#fff;border-color:rgba(255,255,255,.45)}
.px .dk .lnk:hover{color:#fff;border-color:#fff}
.px .dk .zs{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)}
.px .dk .zs a{background:#0B0B0C}
.px .dk .zs a:hover{background:#17171A}
.px .dk .zs .t{color:#fff}
.px .dk .zs .n,.px .dk .zs .k{color:rgba(255,255,255,.55)}
.px .dk .pbtn.ghost{color:#fff;border-color:rgba(255,255,255,.34)}
.px .dk .pbtn.ghost:hover{border-color:#fff}

/* experience block: image and copy share the frame */
.px .exp{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(26px,4vw,56px);align-items:center;
  margin-top:clamp(40px,4.6vw,68px)}
.px .exp:nth-of-type(even) .fig{order:2}
.px .exp .body{margin-top:0;display:block}
.px .exp .body h1{font-size:clamp(24px,3vw,44px);font-weight:600;margin-bottom:14px}
@media(max-width:880px){.px .exp{grid-template-columns:1fr;gap:18px}
  .px .exp:nth-of-type(even) .fig{order:0}}

/* ============================================================
   RR — Range Rover discipline, measured from the live page:
   small wide-tracked uppercase type (38px/700/+1.9px), full-viewport
   imagery, restrained corner-set text, dark and quiet.
   ============================================================ */
.rr{background:#0B0B0C;color:#fff;font-family:'Inter',-apple-system,sans-serif}
.rr .rw{max-width:1400px;margin:0 auto;padding:0 clamp(22px,4vw,56px)}

.rr h1,.rr h2{font-size:clamp(24px,2.9vw,32px);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;line-height:1.16;color:#fff}
.rr h3{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#fff}
.rr .rsub{margin-top:14px;font-size:15px;font-weight:400;line-height:1.62;
  color:rgba(255,255,255,.72);max-width:46ch}
.rr .rlab{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55)}

/* outlined pill button, small */
.rr .rb{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.7);
  padding:13px 24px;transition:.25s;background:transparent}
.rr .rb:hover{background:#fff;color:#0B0B0C}
.rr .rb.solid{background:#fff;color:#0B0B0C;border-color:#fff}
.rr .rb.solid:hover{background:transparent;color:#fff;border-color:#fff}
.rr .racts{margin-top:26px;display:flex;gap:11px;flex-wrap:wrap}

/* full-viewport stage, text set into a corner */
.rr .stage{position:relative;min-height:100vh;display:flex;align-items:flex-start;overflow:hidden}
.rr .stage.short{min-height:82vh}
.rr .stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.05);transition:transform 3s cubic-bezier(.16,.7,.2,1)}
.rr .stage.in>img{transform:scale(1)}
.rr .stage::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,6,7,.72) 0%,rgba(6,6,7,.18) 34%,rgba(6,6,7,.10) 60%,rgba(6,6,7,.78) 100%)}
.rr .stage .sw{position:relative;z-index:2;width:100%;padding-top:clamp(96px,12vw,150px)}
.rr .stage.low{align-items:flex-end}
.rr .stage.low .sw{padding-top:0;padding-bottom:clamp(56px,7vw,100px)}
.rr .stage .scroll{position:absolute;inset-inline-start:50%;bottom:26px;z-index:3;transform:translateX(-50%);
  width:26px;height:26px;opacity:.65}
.rr .stage .scroll svg{width:100%;height:100%;stroke:#fff;fill:none;stroke-width:1.6}

/* model/zone selector strip */
.rr .strip{border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);
  background:#0B0B0C}
.rr .strip .in{max-width:1400px;margin:0 auto;padding:0 clamp(22px,4vw,56px);
  display:flex;gap:0;overflow-x:auto}
.rr .strip a{flex:1 0 auto;padding:20px 26px 20px 0;margin-inline-end:26px;white-space:nowrap;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.55);border-bottom:2px solid transparent;transition:.25s}
.rr .strip a:hover,.rr .strip a.on{color:#fff;border-bottom-color:#fff}

/* three action cards */
.rr .acts3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.14)}
.rr .acts3 a{position:relative;min-height:clamp(300px,34vw,420px);display:flex;align-items:flex-end;
  overflow:hidden;background:#0B0B0C}
.rr .acts3 a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;
  transition:transform 1.6s cubic-bezier(.16,.7,.2,1),opacity .5s}
.rr .acts3 a:hover img{transform:scale(1.05);opacity:.78}
.rr .acts3 a::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(6,6,7,.86) 100%)}
.rr .acts3 .ac{position:relative;z-index:2;padding:clamp(24px,2.6vw,34px)}
.rr .acts3 .ac p{margin-top:10px;font-size:13px;color:rgba(255,255,255,.7);line-height:1.55}
.rr .acts3 .ac .go{margin-top:14px;display:inline-block;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:4px}
@media(max-width:900px){.rr .acts3{grid-template-columns:1fr}}

/* quiet editorial band */
.rr .edit{padding:clamp(70px,9vw,130px) 0;text-align:center}
.rr .edit h2{margin:0 auto}
.rr .edit .rsub{margin-inline-start:auto;margin-inline-end:auto;text-align:center}
.rr .edit .racts{justify-content:center}

/* spec row under a stage */
.rr .specs{display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(26px,3vw,40px);
  border-top:1px solid rgba(255,255,255,.22);max-width:820px}
.rr .specs div{flex:1 1 130px;padding:16px 20px 0 0;margin-inline-end:20px;
  border-inline-end:1px solid rgba(255,255,255,.14)}
.rr .specs div:last-child{border-inline-end:none}
.rr .specs .v{font-size:clamp(17px,1.9vw,24px);font-weight:700;letter-spacing:.02em}
.rr .specs .k{margin-top:6px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55)}

body.rr-page .nav{background:rgba(11,11,12,.55);border-bottom:1px solid rgba(255,255,255,.12)}
body.rr-page .nav.scrolled{background:rgba(11,11,12,.95)}
body.rr-page .rail{display:none}

/* ================= NAV — matched to the homepage treatment =================
   The markup is unchanged (.nav / .brand / .navlinks / .navdd / .ddm / .book).
   Only the appearance is restated here: mono labels, hairline rules, the
   outlined CTA, and the numbered colour-dot zone panel. */
.nav{padding:18px var(--gut,34px);background:linear-gradient(180deg,rgba(10,10,11,.94) 0%,rgba(10,10,11,.78) 58%,rgba(10,10,11,.34) 82%,transparent 100%);
  transition:background .4s}
.nav.scrolled{background:rgba(10,10,11,.94);border-bottom:1px solid var(--line)}
.brand .blogo{width:auto;height:clamp(62px,5.9vw,87px)}
.brand .bwm b{font-family:'Cabinet Grotesk','Archivo',sans-serif;font-weight:800;font-size:20px;
  letter-spacing:-.02em;color:#fff}
.brand .bwm em{display:block;font-family:'Space Mono',ui-monospace,monospace;font-style:normal;
  font-size:clamp(13px,1.15vw,15px);letter-spacing:.18em;text-transform:uppercase;color:var(--txt-mut);
  margin-top:2px;font-weight:400}
.navlinks{gap:clamp(12px,1.6vw,26px)}
.navlinks a,.navdd>.ddt{font-family:'Space Mono',ui-monospace,monospace;font-size:11px;
  font-weight:400;letter-spacing:.15em;text-transform:uppercase;color:var(--txt-mut);
  /* explicit, not inherited: pages set their own body line-height, and the bar
     was half a pixel taller on the ones that differ */
  line-height:1.65;padding:8px 0;transition:color .3s}
.navlinks a:hover,.navlinks a.here,.navdd>.ddt:hover,.navdd.open>.ddt{color:#fff}
.navlinks a:not(.book)::after{bottom:2px;background:var(--red);transition:width .35s cubic-bezier(.16,.7,.2,1)}

/* the CTA is an outline, not a filled red block */
.navlinks a.book{background:none;color:#fff!important;border:1px solid rgba(255,255,255,.24);
  border-radius:0;padding:9px 15px;font-weight:400;letter-spacing:.15em;transition:border-color .3s}
.navlinks a.book:hover{background:none;border-color:#fff;transform:none}

.navdd>.ddt svg{stroke-width:1.6;transition:transform .3s}
.ddm{min-width:290px;background:rgba(10,10,11,.97);-webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:0;padding:7px;
  transition:opacity .28s,transform .32s cubic-bezier(.16,.7,.2,1),visibility .28s}
.ddm a{font-family:'Space Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.06em;
  padding:9px 11px;color:var(--txt-mut);border-radius:0;transition:background .25s,color .25s}
.ddm a:hover{background:rgba(255,255,255,.05);color:#fff}
.ddm a i{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--zc,var(--txt-mut))}
.ddm a b{font-weight:400;color:#fff;opacity:.5;min-width:19px}
.ddm .ddall{margin-top:5px;padding-top:12px;border-top:1px solid var(--line);color:#fff;
  letter-spacing:.15em;text-transform:uppercase}

.burger span{width:24px;height:1px;background:#fff;transition:transform .3s,opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:1120px){
  .navlinks{background:rgba(10,10,11,.98);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-inline-start:1px solid var(--line)}
  .navlinks a,.navdd>.ddt{font-size:13px}
  .navlinks a.book{margin-top:14px;text-align:center}
}
/* light surfaces: the black mark, and ink-toned labels */
.paper .brand .bwm b,.on-paper .brand .bwm b{color:var(--ink-txt)}
.paper .brand .bwm em,.on-paper .brand .bwm em{color:var(--ink-dim)}

/* --- the zone panel inside the mobile drawer ---
   .navlinks becomes a 340px right-hand drawer at this breakpoint, but .ddm kept
   its desktop rule (position:absolute; inset-inline-start:50%; translateX(-50%)) and shot out
   of it across the page. Both .navdd:hover .ddm and .navdd.open .ddm are (0,3,0),
   so the reset has to match that specificity rather than rely on a bare .ddm. */
@media(max-width:1120px){
  .navlinks{background:var(--ink-2);justify-content:flex-start;padding:96px 30px 40px;
    overflow-y:auto;gap:2px}
  .navdd{display:block;width:100%}
  .ddm,.navdd:hover .ddm,.navdd.open .ddm{position:static;transform:none;inset-inline-start:auto;
    min-width:0;width:100%;opacity:1;visibility:visible;border:0;
    border-inline-start:1px solid var(--line);border-radius:0;background:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
    padding:0 0 0 12px;margin:2px 0 10px}
  .ddm{display:none}
  .navdd.open .ddm{display:block}
  .ddm::before{display:none}
  .ddm a{font-size:11px;padding:9px 0 9px 10px}
  .navlinks>a{padding:11px 0;width:100%}
  .navlinks a.book{margin-top:16px;width:100%;text-align:center;padding:13px 15px}
}

/* ---------- CONFIGURATOR STEP HEADINGS (plan.html) ----------
   .st was already taken by an SVG stroke rule further up this file, so the step
   title and its description inherited nothing — two unstyled inline spans that
   ran together as "Who is visiting?This decides...". .sh and .sd had no rules
   at all. Scoped under .cfg so the SVG rule is untouched. */
.cfg .sh{display:flex;align-items:baseline;gap:clamp(14px,1.8vw,26px);
  margin-bottom:clamp(22px,2.6vw,34px);flex-wrap:wrap}
.cfg .sh > span:last-child{display:flex;flex-direction:column;gap:7px;min-width:0}
.cfg .sh .sn{margin:0;flex:none}
.cfg .sh .sttl{display:block;stroke:none;font-family:'Cabinet Grotesk','Archivo',sans-serif;
  font-weight:800;font-size:clamp(20px,2.5vw,32px);letter-spacing:-.02em;
  line-height:1.1;color:#fff}
.cfg .sh .sd{display:block;font-size:13px;line-height:1.6;color:var(--txt-mut);max-width:52ch}

/* the route panel sat empty as a bare grey box with one line of text */
.cfg .routebox:empty,.cfg .empty{display:grid;place-items:center;text-align:center;
  padding:clamp(40px,6vw,70px) 24px;border:1px dashed var(--line);background:none}
.cfg .empty p{color:var(--txt-mut);font-size:13px;max-width:34ch;margin:0 auto}
.cfg .empty .hint{display:block;margin-top:10px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red)}

/* ================= HEADINGS — matched to the homepage =================
   The zone pages carried a dozen competing h1/h2 rules: uppercase, weight 900,
   extended, with .thin set at weight 200 in mid-grey over an unscrimmed photo.
   Sentence case in Cabinet Grotesk, and a real scrim so the type is legible
   whatever the photograph is doing underneath it. */
.shero h1, .scene h1, .scene h2, .sec h2, .band h2,
.sechead h2, .phero h1, .rr h1, .rr h2, h1, h2{
  font-family:'Cabinet Grotesk','Archivo',sans-serif;
  text-transform:none;
  letter-spacing:-.035em;
}
.shero h1, .scene h1{font-weight:800;line-height:1.0;
  font-size:clamp(24px,3.5vw,44px);max-width:21ch}
.scene h2, .sec h2, .band h2{font-weight:800;line-height:1.02;
  font-size:clamp(24px,3vw,44px);max-width:22ch}
/* the photograph is the hero; the type sits on it rather than covering it */
.shero .swrap, .scene .swrap{padding-bottom:clamp(40px,5vw,70px)}

/* the second line is a continuation, not a whisper */
.shero h1 .thin, .scene h1 .thin, .scene h2 .thin, .sec h2 .thin, .band h2 .thin,
h1 .thin, h2 .thin{
  display:block;margin-top:.14em;font-weight:300;text-transform:none;
  letter-spacing:-.03em;font-size:.82em;color:rgba(255,255,255,.78)}
.paper .thin, .on-paper .thin, .sec.paper h2 .thin{color:#6b675e}

/* legibility scrim — the type sat directly on the photograph */
.scene::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,11,.34) 0%,rgba(10,10,11,.06) 26%,
    rgba(10,10,11,.62) 58%,rgba(10,10,11,.90) 82%,rgba(10,10,11,.95) 100%)}
.scene > .swrap{position:relative;z-index:2}
.shero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,11,.46) 0%,rgba(10,10,11,.12) 30%,
    rgba(10,10,11,.66) 60%,rgba(10,10,11,.92) 88%,rgba(10,10,11,.96) 100%)}
.shero > *{position:relative;z-index:2}

/* the hero lead was competing with the photograph too */
.shero .slead, .scene .slead{color:rgba(255,255,255,.9);max-width:56ch;
  text-shadow:0 1px 24px rgba(0,0,0,.45)}

/* the hero stat strip sits over the photograph — its labels were mid-grey */
.shero .k,.scene .k,.abs span{color:rgba(255,255,255,.82)}
.shero .v,.scene .v,.abs b{color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.5)}

/* the .warm variant carries its own ::before at (0,2,0), so the generic scrim
   above never applied to it. Matched specificity, and the strip that holds the
   hero stats gets its own floor rather than relying on the gradient reaching it. */
/* a vertical scrim alone fails wherever the photograph is bright behind the
   copy. The horizontal layer gives the text column its own ground, so the
   type stays legible whatever image is dropped in behind it. */
.scene::before,.scene.warm::before,.scene.mid::before,.scene.low::before,.scene.tall::before,
.shero::before{
  background:
    linear-gradient(90deg,rgba(8,8,9,.88) 0%,rgba(8,8,9,.72) 26%,rgba(8,8,9,.34) 52%,
      rgba(8,8,9,.12) 72%,rgba(8,8,9,0) 88%),
    linear-gradient(180deg,rgba(8,8,9,.40) 0%,rgba(8,8,9,.10) 26%,
      rgba(8,8,9,.52) 56%,rgba(8,8,9,.88) 84%,rgba(8,8,9,.95) 100%)}
@media(max-width:820px){
  .scene::before,.scene.warm::before,.scene.mid::before,.scene.low::before,
  .scene.tall::before,.shero::before{
    background:linear-gradient(180deg,rgba(8,8,9,.62) 0%,rgba(8,8,9,.44) 30%,
      rgba(8,8,9,.72) 62%,rgba(8,8,9,.94) 100%)}
}
.scene .srow{position:relative}
.scene .srow::before{content:"";position:absolute;inset:-26px -40px -40px;z-index:-1;
  background:linear-gradient(180deg,transparent,rgba(8,8,9,.72) 38%,rgba(8,8,9,.88))}
.scene .srow .k{color:rgba(255,255,255,.84)}
.scene .srow .v{text-shadow:0 1px 18px rgba(0,0,0,.55)}


.ctaband{border-top:1px solid var(--line,rgba(255,255,255,.12))}
.ctaband-in{display:grid;grid-template-columns:1.4fr auto;gap:clamp(20px,4vw,60px);align-items:center}
.ctaband-btns{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:760px){.ctaband-in{grid-template-columns:1fr}}

.langsw:hover{opacity:1;border-color:var(--txt)}
.langsw .gl{width:14px;height:14px;flex:0 0 14px}

/* Arabic is a connected script — tracking breaks the joins */
[lang="ar"],[lang="ar"] *{letter-spacing:normal}
.langsw [lang="ar"]{letter-spacing:normal;font-size:.74rem;font-weight:700;font-family:'Tajawal',system-ui,sans-serif}

/* the language control is a button, not a nav link */
.navlinks a.langsw::after,.tnav a.langsw::after{content:none!important}
.langsw .gl{display:block;width:14px;height:14px;flex:0 0 14px}
/* centre on the glyphs, not on the text box Arabic reserves above and below */
.langsw [lang="ar"]{display:block;line-height:1;letter-spacing:normal;
  font-size:.8rem;font-weight:700;font-family:'Tajawal',system-ui,sans-serif;
  position:relative;top:.5px}


/* over a photograph the whole menu has to hold, not just the plain links */
.navlinks a:not(.book),.navdd>.ddt{color:#f2f2f3;font-weight:500;
  text-shadow:0 1px 12px rgba(0,0,0,.7),0 0 2px rgba(0,0,0,.4)}
.nav:not(.scrolled) .navdd>.ddt svg{opacity:.9}
.nav:not(.scrolled) .bwm em{color:#e6e6e8;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.nav:not(.scrolled) .langsw{border-color:rgba(255,255,255,.5);color:#f2f2f3}

/* tracking leaves a space after the final letter; absorb it so the word sits
   centred in the box instead of pushed against the leading edge */
.langsw [lang="en"]{margin-inline-end:-.14em}
.langsw{gap:8px}


/* the language control sits with the nav links, not shouting over them */
.navlinks a.langsw,.nav > a.langsw,.tnav a.langsw,a.langsw{
  padding:8px 4px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  line-height:1;border:0;color:#b9b9bd;white-space:nowrap;text-decoration:none;
  opacity:.9;transition:color .3s,opacity .3s}
.navlinks a.langsw:hover,.nav > a.langsw:hover,.tnav a.langsw:hover,a.langsw:hover{
  border:0;color:#fff;opacity:1}
.langsw .gl{opacity:.85}
.langsw:hover .gl{opacity:1}

/* the other centre is a destination, not a line of contact detail */
footer .brand .blogo,footer .mark img{display:none}

/* ── touch targets ─────────────────────────────────────────────────────────
   A finger needs about 44px. These controls were 23-30px tall, which is fine
   for a cursor and not for a thumb. Coarse pointers and narrow screens only. */
@media (pointer:coarse),(max-width:820px){
  /* .burger is deliberately excluded from the display override: its bars
     are empty spans sized by its own layout, and changing display
     collapses them to nothing. It gets the tap area only. */
  .burger{min-height:44px;min-width:44px;padding:0 10px;box-sizing:border-box}
  .langsw,.bw,.gw,.cmnote a,.lnks a,.oc-n{
    min-height:44px;display:inline-flex;align-items:center}
  /* footer links are block: forcing inline-flex ran the phone number and
     the email onto one line */
  /* every footer link, not only the ones inside <nav> */
  .bw{padding-block:0}
}

@media (pointer:coarse),(max-width:820px){
  .go,.alt-lang,.morelink,.wa,.bl,.facts a,.cdet a,a[href^="tel:"],a[href^="mailto:"],
  a[href^="https://wa.me"]{min-height:44px;display:inline-flex;align-items:center}
}

@media(max-width:560px){
  /* four columns of route stops do not fit a phone; they wrap to two */
  .rmap{grid-template-columns:repeat(2,1fr)!important}
}
@media (pointer:coarse),(max-width:820px){
  .crumb a{min-height:44px;display:inline-flex;align-items:center}
}

/* Route-map column counts. These lived in inline style attributes, where they
   outranked the media queries below and pinned the phone to the desktop grid.
   Desktop only — under 900px the shared .rmap rules take over. */
@media(min-width:901px){
  .rmap--2{grid-template-columns:repeat(2,1fr)}
  .rmap--3{grid-template-columns:repeat(3,1fr)}
  .rmap--4{grid-template-columns:repeat(4,1fr)}
}

@media (pointer:coarse),(max-width:820px){
  .sp-go{min-height:44px;display:inline-flex;align-items:center}
}

/* long unbroken product categories must wrap rather than spill */
.cat li .ct,.cat li .md,.cat li .bd{overflow-wrap:break-word}

/* The blur lives on a layer, not on .nav itself: backdrop-filter on the bar
   would make it the containing block for the fixed mobile drawer, which then
   renders inside the 44px-tall bar instead of down the side of the screen. */
.nav{position:fixed;isolation:isolate}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@media(max-width:1120px){
  .navlinks{z-index:300}          /* above the bar it used to be trapped behind */
}

@media(max-width:1120px){
  /* the drawer enters from the side its own button is on */
  [dir="rtl"] .navlinks{inset:0 auto 0 0;transform:translateX(-100%);
    border-inline-start:0;border-inline-end:1px solid var(--line)}
  [dir="rtl"] .navlinks.open{transform:none}
}

/* transform does not mirror: the watermark word and the drag hint are both
   placed with inset-inline-start:50% and centred with a translate, which goes
   the wrong way in right-to-left. */
[dir="rtl"] .band > .ghost{transform:translateX(50%)}
[dir="rtl"] .hint{transform:translateX(50%)}

/* the dropdown is centred on its trigger with a physical translate */
[dir="rtl"] .ddm{transform:translateX(50%) translateY(-8px)}
[dir="rtl"] .navdd:hover .ddm,[dir="rtl"] .navdd.open .ddm{transform:translateX(50%) translateY(0)}
@media(max-width:1120px){
  /* inside the drawer the menu is static again — no mirroring wanted */
  [dir="rtl"] .ddm,[dir="rtl"] .navdd:hover .ddm,[dir="rtl"] .navdd.open .ddm{transform:none}
}

/* The ask-now band sat on flat black between two blocks of type. Give it
   the floor underneath, held well back so the copy stays loudest. */
.spaceband{position:relative;isolation:isolate;overflow:hidden}
.spaceband::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url("images/mcx-space-bench.jpg") center/cover no-repeat;
  filter:saturate(.5) brightness(.42)}
.spaceband::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,11,.86),rgba(10,10,11,.72))}

/* figure caption, matching the treatment on the self-contained pages */
.cap{margin-top:12px;font-family:var(--util,inherit);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--txt-mut,#9a9aa2)}


/* ── the specialists ───────────────────────────────────────────────────────
   Crew slates: each card carries the colour of the zone that person owns, the
   same eight colours as the bars and the route. */
.roster{position:relative}
.rpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:clamp(26px,3.4vw,44px)}
/* The roster is a card here, deliberately. It was flattened in a pass that
   removed rounded filled panels across the site; Jaffer asked for the
   original back on 3 Sep 2026. Restored verbatim from the 18 Aug
   snapshot — do not flatten it again. */
.rp{background:var(--ink-2,#131316);padding:22px 22px 24px;position:relative;
  border-inline-start:2px solid var(--zc,var(--red));transition:background .35s}
.rp:hover{background:#17171b}
.rp-face{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block;
  background:#0f0f12;box-shadow:0 0 0 1px var(--line),0 0 0 4px color-mix(in srgb,var(--zc,var(--red)) 26%,transparent)}
.rp-b{padding:16px 0 0}
.rp-b h4{margin:0;font-size:17px;font-weight:600;color:var(--txt,#fff);letter-spacing:-.01em}
.rp-r{margin-top:5px;font-family:var(--util,ui-monospace,monospace);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--zc,var(--red))}
.rp-b p{margin:11px 0 0;font-size:13px;line-height:1.62;color:var(--txt-mut,#a9a9b0)}
@media(max-width:520px){.rpgrid{grid-template-columns:1fr}}

/* ── events boxes ─────────────────────────────────────────────────────────
   These use .card without the .cbody wrapper that carries the padding, so the
   copy sat against the border and was clipped by overflow:hidden. */
.cards.two .card{padding:22px 22px 24px}

/* ── touch and zoom on phones ─────────────────────────────────────────────
   iOS Safari zooms the whole page when a field smaller than 16px takes focus,
   and a finger needs about 44px of target. */
@media (pointer:coarse),(max-width:820px){
  input,textarea,select{font-size:15px}
  /* the fields are sized by a font: shorthand at this specificity */
  form.enq input,form.enq select,form.enq textarea,
  form input,form select,form textarea{font-size:15px}
  .navlinks a{min-height:44px}
  .evbar button,.bwall button,.cmpick button,.rr button{min-height:44px}
  .ddt,.ddm a,.act,.btn,.go,.bl,.morelink,button[type="submit"],input[type="submit"]{
    min-height:44px;display:inline-flex;align-items:center}
  .ddm a{padding-block:6px}
}

/* the drawer is parked off-screen with a transform, which WebKit counts in the
   scrollable canvas — clip it at the root rather than widening the page */
html,body{overflow-x:hidden}

/* ---- zone pages: the philosophy half ----------------------------------
   A zone page was a hero, a chain and a list of boxes: what is in the room,
   never why the room is arranged that way or why it has to be walked into.
   These three components carry that half. Everything inside reads its rule
   colour and its dimmed-text colour from --ln / --dim, so the paper variant
   is one extra line rather than a second copy of every rule. */
.zphil,.zleaves{--ln:var(--line);--dim:var(--txt-dim);border-top:1px solid var(--line)}
.zdecs{--ln:var(--paper-line);--dim:#4b473f}
.zbig{font-size:clamp(20px,2.4vw,32px);line-height:1.44;letter-spacing:-.02em;
  max-width:28ch;margin-top:20px;color:var(--txt)}
.on-paper .zbig{color:var(--ink-txt)}
.zpg{display:grid;gap:clamp(20px,2.6vw,38px);margin-top:clamp(26px,3.2vw,42px)}
@media(min-width:920px){.zpg{grid-template-columns:1fr 1fr}}
.zpg p{color:var(--dim);line-height:1.74;font-size:15px;max-width:50ch}
.zlead{max-width:62ch;color:var(--dim);line-height:1.74;margin-top:16px}

/* the decisions: what was chosen, what it rejected, and why */
.zdec{margin-top:clamp(26px,3.4vw,44px);border-top:1px solid var(--ln)}
.zrow{display:grid;gap:6px 26px;padding-block:clamp(15px,2vw,24px);border-bottom:1px solid var(--ln)}
@media(min-width:920px){.zrow{grid-template-columns:15rem 14rem 1fr;align-items:start}}
.zrow b{font-weight:600;font-size:15px}
.zrow .alt{font-size:13px;color:var(--dim);margin:0;line-height:1.5}
.zrow .alt::before{content:"instead of ";font-family:'Space Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ac,var(--red));
  display:block;margin-bottom:3px}
.zrow span{color:var(--dim);font-size:15px;line-height:1.62}

/* why it has to be in person, and what you take away */
.zleave{display:grid;gap:clamp(22px,3vw,46px);margin-top:clamp(26px,3.2vw,42px)}
@media(min-width:920px){.zleave{grid-template-columns:1.05fr 1fr}}
.zwhy{color:var(--dim);line-height:1.76;font-size:15px;max-width:52ch}
.ztl{font-family:'Space Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ac,var(--red));margin:0 0 6px}
.ztake{list-style:none;margin:0;padding:0;counter-reset:z}
.ztake li{counter-increment:z;display:grid;grid-template-columns:2rem 1fr;gap:14px;
  padding:12px 0;border-top:1px solid var(--ln);font-size:15px;line-height:1.6;color:var(--dim)}
.ztake li::before{content:counter(z,decimal-leading-zero);
  font-family:'Space Mono',ui-monospace,monospace;font-size:11px;color:var(--ac,var(--red));
  padding-top:3px}

/* The footer wordmark sits on one line as Istanbul's does — MCX, then the
   descriptor letterspaced beside it. Dubai's descriptor is much longer than
   "Istanbul", so without an explicit gap the two ran together as
   "MCXMEDIACAST EXPERIENCE CENTRE". */
/* the descriptor is 27 characters against Istanbul's 8, so it is allowed to
   wrap inside its own box rather than drop below MCX entirely */
/* the fourth column is contact detail, so its lines wrap rather than truncate */

/* ---- footer: match Istanbul exactly -----------------------------------
   The column rules (.fcols a / .fcols span) were landing on the cross-centre
   box, which is an <a> full of <span>s sitting inside a column — so the box
   inherited 14px/300 muted link styling and lost its label colour, its type
   scale and its padding. And scoping the nav wordmark rule earlier took the
   uppercase off the FOOTER wordmark with it. Both restated here against
   Istanbul's values, which are the reference. */
/* the bottom row is mono and small, as Istanbul's .fend is */

/* Reserve the scrollbar gutter always. dubai.html locks scrolling for its
   intro (html.tx-on{overflow:hidden}), and that lock ends the moment you
   click anything — pointerdown calls end(). Without a reserved gutter the
   scrollbar reappears at that instant, the viewport narrows by 15px, and
   every right-anchored nav item jumps left. Reserving it on every page also
   keeps short pages the same width as long ones. */
html{scrollbar-gutter:stable}

/* The footer lives in the FOOTER:LOCKED block at the end of this file. */

/* ---- .zfig — a modest inline figure for the zone pages -----------------
   Those pages are a sequence of four full-bleed `scene` beats with no small
   picture slot, so extra photography meant adding a fifth beat and breaking a
   deliberate rhythm. This sits inside a text section instead: contained,
   captioned, and it does not compete with the scenes. */
.zfig{margin:clamp(28px,3.6vw,48px) 0 0;max-width:760px}
.zfig img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  border-radius:2px;filter:saturate(.92) contrast(1.04)}
.zfig figcaption{margin-top:12px;display:flex;gap:12px;align-items:baseline}
.zfig .zk{flex:none;font-family:'Space Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--red)}
/* .zc is two different things in this stylesheet: a zone CARD (dark tile,
   min-height:290px, a gradient ::after and a coloured ::before) and the caption
   span inside .zfig. The bare .zc rule matches both, and this rule only ever
   overrode type and colour — so every figure caption on the zone pages painted
   a 290px near-black block underneath its own words, which read as a broken
   image. Undo what the card rule sets; do not restyle the caption. */
.zfig .zc{font-size:13px;line-height:1.6;color:var(--txt-dim);
  display:inline;min-height:0;overflow:visible;background:none}
.zfig .zc::before,.zfig .zc::after{content:none}
.on-paper .zfig .zc,.paper .zfig .zc{color:var(--ink-dim)}

/* == FOOTER:LOCKED == */
/* CANONICAL FOOTER — the single definition. The build stamps it between the
   FOOTER:LOCKED markers into style.css and into every page that carries its
   own <style> block, and fails if any copy has drifted. Copied from
   istanbul.html, which is the design of record. Do not hand-edit a page's
   copy: change the one definition and rebuild.

   The footer's four colours are literals under --f-* names, not references
   to the page's palette. Two things went wrong when they were references.
   `--signal:var(--red,var(--signal,…))` reads as a self-reference, and WebKit
   treats that as a cycle and throws the whole declaration away — so on Safari
   the MediaCast link lost its red and the hairline above the last row
   vanished, while Chrome resolved it and looked fine. And the two palettes
   disagree (style.css has --red #E0301E / --line .10 / --txt #EAEAEA; the
   self-contained pages have --signal #E8281E / --edge .09 / --text #E9E9E7),
   so a chain that tried both names gave the footer two slightly different
   looks depending on which stylesheet the page happened to use. The footer
   is the same dark band on every page of both centres, so it carries its own
   colours. istanbul.html is the design of record; these are its values. */
footer{--f-edge:rgba(255,255,255,.09);
  --f-mute:#8B8B90;
  --f-text:#E9E9E7;
  --f-signal:#E8281E;
  --util:'Space Mono',ui-monospace,monospace;--t11:11px;--t13:13px;
  padding:clamp(50px,6vh,86px) 0 44px;border-top:1px solid var(--f-edge)}
footer h4{font-family:var(--util);font-size:var(--t11);letter-spacing:.22em;
  text-transform:uppercase;color:var(--f-mute);font-weight:400;margin:0 0 13px}
footer a{display:block;color:var(--f-text);text-decoration:none;font-size:var(--t13);padding:5px 0}
footer a:hover{color:var(--f-signal)}
footer p{font-size:var(--t13);line-height:1.72;color:var(--f-mute)}
footer .brand .blogo,footer .mark img{display:none}
footer .brand .bwm{display:flex;flex-direction:row;align-items:center;line-height:1}
footer .brand .bwm b{display:block;font-family:'Cabinet Grotesk',system-ui,sans-serif;
  font-weight:800;font-size:clamp(21px,1.9vw,27px);letter-spacing:-.02em;color:var(--f-text)}
footer .brand .bwm em{display:block;font-style:normal;font-family:var(--util);
  font-size:clamp(13px,1.15vw,16px);letter-spacing:.22em;text-transform:uppercase;
  color:#e6e6e8;opacity:.82;line-height:1;margin-top:3px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,3.4vw,56px)}
@media(max-width:1040px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.fgrid{grid-template-columns:1fr}}
/* the address is a <span>, not a link, so it missed footer a{}'s size
   and inherited the body's 16px — bigger than everything beside it */
.fgrid > div > span{font-size:var(--t13);line-height:1.62;color:var(--f-text);display:block;padding:5px 0}
.fend{margin-top:clamp(34px,4vw,56px);padding-top:20px;border-top:1px solid var(--f-edge);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--util);font-size:var(--t11);letter-spacing:.14em;color:var(--f-mute)}
.fend .bl,.fend .shop{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;text-decoration:none;transition:color .25s}
.fend .bl{color:var(--f-signal)}
.fend .shop{color:var(--f-mute);margin-inline-start:18px}
.fend .shop:hover{color:var(--f-signal)}
/* .gw needs its colour stated here. It is an <a>, so footer a{} paints it
   --f-text, and the local rule that greyed it read the page's own mute
   token — which resolves only on the pages that define one. That left
   "Choose a centre" white on seven pages and grey on the rest. */
.fend .gw{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  border-bottom:0;color:var(--f-mute)}
.fend .gw:hover{color:var(--f-signal)}
/* the other centre's card — cyan on both sites, so it never reads as this
   site's own accent */
.othercentre{margin-top:18px;display:block;border:1px solid rgba(93,188,210,.42);
  border-inline-start:3px solid #5dbcd2;padding:15px 17px;text-decoration:none;
  background:rgba(93,188,210,.06);max-width:32ch;transition:background .3s,border-color .3s}
.othercentre:hover{background:rgba(93,188,210,.14)}
.oc-l{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:#5dbcd2;margin-bottom:7px}
.oc-n{display:block;font-size:16px;font-weight:600;color:#fff;line-height:1.25}
.oc-n i{font-style:normal;color:#5dbcd2}
.oc-a{display:block;margin-top:6px;font-size:12px;color:rgba(233,233,231,.6)}
.oc-x{display:block;margin-top:6px;font-size:11px;letter-spacing:.06em;color:rgba(93,188,210,.75)}
/* Tap targets. The link columns are 31px tall, and a thumb needs 44. The
   Istanbul pages already carried a rule like this in their own sheet and the
   style.css pages did not, so the same footer behaved differently depending on
   which page you were on — which is the drift this file exists to stop.
   min-height on a block element, not inline-flex: forcing inline-flex is what
   once ran the phone number and the email onto one line. */
@media (pointer:coarse),(max-width:820px){
  footer .fgrid a{min-height:44px;display:block;padding-block:11px}
  footer .othercentre{min-height:0;padding-block:15px}
}
/* == /FOOTER:LOCKED == */

/* ---- .crs — the course curriculum on training.html -----------------------
   The overview above is the ladder: seven courses, a paragraph each. This is
   what is actually taught, chapter by chapter, carried over from the
   MediaCast training page so the two say the same thing. It reuses .steps /
   .step rather than inventing a card: same 1px-rule grid as the rest of the
   page, so a 36-chapter run still reads as one system. */
.crslist{margin-top:clamp(30px,4vw,48px)}
.crs+.crs{margin-top:clamp(46px,6vw,86px)}
.crs-h{display:flex;align-items:baseline;gap:clamp(14px,2vw,26px);flex-wrap:wrap;
  padding-bottom:16px;border-bottom:2px solid var(--ac,var(--red))}
.crs-n{font-family:var(--mono,'Space Mono',ui-monospace,monospace);font-size:32px;
  font-weight:700;line-height:1;color:var(--ac,var(--red))}
.crs-h h3{font-weight:800;font-size:clamp(20px,2.3vw,27px);line-height:1.1;
  color:var(--txt);margin:6px 0 0;letter-spacing:-.01em}
.crs-h .label{color:var(--ac,var(--red))}
.crs-ct{margin-inline-start:auto;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--txt-mut);white-space:nowrap}
.crs .steps{margin-top:0;border-top:0}
/* .step p is (0,1,1) and would beat a bare .chsub on both colour and size,
   so the subtitle is scoped to the step it sits in. */
.step p.chsub{font-size:12px;letter-spacing:.02em;color:var(--ac,var(--red));
  margin:-4px 0 12px;font-weight:600;line-height:1.4}
.step .tagrow.chips{margin-top:16px;gap:6px}
.step .tagrow.chips span{font-size:10.5px;letter-spacing:.1em;padding:5px 9px}
@media(max-width:860px){.crs-ct{margin-inline-start:0}}

/* The CTA that closes each course band. A five-chapter course leaves the last
   cell of the grid empty, which read as a missing card rather than as space —
   so the cell carries the ask instead. The six-chapter course would put it
   alone on a new row, so there it spans the row. */
.step--cta{background:var(--ink-2)}
.paper .step--cta,.on-paper .step--cta{background:#f2efe9}
.step--cta{border-inline-start:2px solid var(--ac,var(--red))}
.step--cta .sn{color:var(--ac,var(--red))}
.step--cta .ctarow{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px}
.step--cta .btn{font-size:11px;padding:11px 16px}
/* No .steps grid may end on an empty cell. Three across with five or seven
   items leaves a hole that reads as a missing card — which is exactly how it
   was reported, twice. Position decides the span, so it holds for any course
   length without a class per band, and it uses `span N` rather than `1/-1`:
   the same result with no dependence on how an engine resolves the -1 line.
     · last item alone on its row  -> takes the whole row
     · two items left on the row   -> 2/3 + 1/3, no gap */
.crs .steps > :last-child:nth-child(3n+1){grid-column:span 3}
.crs .steps > :nth-last-child(2):nth-child(3n+1){grid-column:span 2}
/* the row-wide CTA splits: measure on the left, buttons on the right */
.crs .steps > .step--cta:nth-child(3n+1):last-child{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 44px}
.crs .steps > .step--cta:nth-child(3n+1):last-child > *{grid-column:1}
.crs .steps > .step--cta:nth-child(3n+1):last-child p{max-width:70ch}
.crs .steps > .step--cta:nth-child(3n+1):last-child .ctarow{
  grid-column:2;grid-row:1/-1;margin-top:0}
/* five steps read as a sequence, so that band runs five across rather than
   three-plus-two with a hole on the end */
.steps--5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){
  /* dropping to three across puts five steps at 3+2, so the same no-hole
     spans apply here too */
  .steps--5{grid-template-columns:repeat(3,1fr)}
  .steps--5 > :last-child:nth-child(3n+1){grid-column:span 3}
  .steps--5 > :nth-last-child(2):nth-child(3n+1){grid-column:span 2}
}
@media(max-width:860px){
  .steps--5{grid-template-columns:1fr}
  .crs .steps > :last-child:nth-child(3n+1),
  .crs .steps > :nth-last-child(2):nth-child(3n+1),
  .steps--5 > :last-child:nth-child(3n+1),
  .steps--5 > :nth-last-child(2):nth-child(3n+1){grid-column:auto}
  .crs .steps > .step--cta:nth-child(3n+1):last-child{grid-template-columns:1fr}
  .crs .steps > .step--cta:nth-child(3n+1):last-child .ctarow{
    grid-column:1;grid-row:auto;margin-top:18px}
}

/* An event the admin has not dated yet: the date block carries TBA instead of
   a day, and the card says so rather than showing a blank plate. */
.ev.tba .evd--tba{display:flex;align-items:center;justify-content:center}
.ev.tba .evd--tba .dm{font-size:12px;letter-spacing:.18em}
.evtags{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.evtags span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--txt-mut);border:1px solid var(--line);padding:4px 8px;border-radius:2px}

/* ---- the events calendar ------------------------------------------------
   Modelled on the month grid the MediaCast news-events page uses, in MCX's
   ruled-grid language. Only DATED events can sit on it; anything the admin
   has not scheduled stays in the list below marked to be announced, which is
   why the section says so rather than quietly dropping them.

   Colour does the work here: a day that holds a session is washed in that
   event's own zone accent and underscored in it, the weekend columns carry a
   faint tint so the grid reads as a calendar rather than a field of numbers,
   and today is ringed in the brand red. Without that the panel was a black
   box with two dots in it. */
.calwrap{display:grid;grid-template-columns:minmax(320px,430px) 1fr;
  gap:clamp(24px,3.4vw,52px);margin-top:clamp(28px,3.6vw,44px);align-items:start}
@media(max-width:900px){.calwrap{grid-template-columns:1fr}}
.cal{border:1px solid var(--line);background:var(--ink-2);overflow:hidden}
.paper .cal,.on-paper .cal{background:var(--paper);border-color:var(--paper-line)}
.cal-h{display:flex;align-items:center;justify-content:space-between;
  padding:15px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.045),transparent)}
.paper .cal-h,.on-paper .cal-h{border-color:var(--paper-line);
  background:linear-gradient(180deg,rgba(0,0,0,.04),transparent)}
.cal-m{font-weight:800;font-size:17px;color:var(--txt);letter-spacing:-.01em}
.paper .cal-m,.on-paper .cal-m{color:var(--ink-txt)}
.cal-h button{background:none;border:1px solid var(--line);color:var(--txt-mut);
  width:30px;height:30px;font-size:17px;line-height:1;cursor:pointer;transition:.2s}
.cal-h button:hover{color:#fff;background:var(--red);border-color:var(--red)}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);padding:11px 11px 3px}
.cal-dow span{text-align:center;font-size:10px;letter-spacing:.14em;color:var(--txt-mut)}
.cal-dow span:nth-child(6),.cal-dow span:nth-child(7){color:var(--red);opacity:.75}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:3px 11px 12px}
.cd{position:relative;aspect-ratio:1/.82;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--txt-dim);background:none;border:1px solid transparent;
  font-family:inherit;padding:0;border-radius:2px}
.paper .cd,.on-paper .cd{color:#5f5b52}
/* the weekend columns, faintly, so the week has a shape */
.cd:nth-child(7n+6),.cd:nth-child(7n){background:rgba(255,255,255,.028)}
.paper .cd:nth-child(7n+6),.on-paper .cd:nth-child(7n+6),
.paper .cd:nth-child(7n),.on-paper .cd:nth-child(7n){background:rgba(0,0,0,.03)}
.cd--out{color:var(--txt-mut);opacity:.26}
.cd--today{border-color:var(--red);font-weight:700;color:var(--txt)}
button.cd{cursor:pointer;transition:background .2s,color .2s,border-color .2s}
button.cd:hover{background:rgba(255,255,255,.07)}
.paper button.cd:hover,.on-paper button.cd:hover{background:rgba(0,0,0,.06)}
/* a day that holds a session, in that session's own accent */
.cd--on{background:var(--acw,rgba(255,255,255,.06));color:var(--txt);font-weight:700;
  border-color:var(--ac,var(--red))}
.paper .cd--on,.on-paper .cd--on{color:var(--ink-txt)}
.cd--on i{position:absolute;left:6px;right:6px;bottom:4px;height:3px;border-radius:2px;
  background:var(--ac,var(--red))}
.cd--sel{background:var(--ac,var(--red));color:#fff;border-color:var(--ac,var(--red))}
.cd--sel i{background:#fff}
.cal-key{display:flex;flex-wrap:wrap;gap:8px 14px;padding:0 13px 14px}
.ck{display:inline-flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--txt-mut)}
.ck::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--ac,var(--red))}
.cal-side .label{margin-bottom:14px}
.cs{display:grid;grid-template-columns:auto 1fr auto;gap:6px 16px;align-items:baseline;
  padding:14px 0 14px 16px;border-top:1px solid var(--line);
  border-inline-start:2px solid var(--ac,var(--red));text-decoration:none;
  transition:background .2s}
.cs:hover{background:rgba(255,255,255,.035)}
.paper .cs,.on-paper .cs{border-top-color:var(--paper-line)}
.cs:last-child{border-bottom:1px solid var(--line)}
.cs-d{font-size:11px;letter-spacing:.14em;color:var(--ac,var(--red));font-weight:700;white-space:nowrap}
.cs-t{font-size:14px;color:var(--txt);line-height:1.4}
.paper .cs-t,.on-paper .cs-t{color:var(--ink-txt)}
.cs:hover .cs-t{color:var(--red)}
.cs-k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-mut);white-space:nowrap}
.cs-none{font-size:13px;color:var(--txt-mut);padding:14px 0;border-top:1px solid var(--line)}
@media(max-width:520px){.cs{grid-template-columns:1fr;gap:4px}}
/* the month steps the other way round when the page reads right-to-left */
[dir=rtl] .cal-h button{transform:scaleX(-1)}

/* Touch targets on a phone. The calendar controls were 30x30 and its day cells
   40x33 — both under the 44px a thumb needs — and the newsletter label sat at
   40. Only on coarse pointers, so the desktop calendar keeps its compact grid. */
@media (pointer:coarse),(max-width:820px){
  .cal-h button{width:44px;height:44px;font-size:20px}
  .cd{aspect-ratio:auto;min-height:44px}
  .cal-grid{gap:3px}
  label:has(> input[type="checkbox"]),label:has(> input[type="radio"]){min-height:44px}
  input[type="checkbox"],input[type="radio"]{width:20px;height:20px}
}


/* The breadcrumb "MCX" is 26–31px wide on a phone — a 44px tall target you can
   still miss sideways. Padding gives it a thumb's width without moving it. */
@media (pointer:coarse),(max-width:820px){
  .crumb a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;padding-inline:6px;margin-inline-start:-6px}
}