:root{
--ink:#0A0907; --panel:#141210;
--cream:#F0EDE6; --cream-2:#E7E3DA;
--gold:#FFC72C; --gold-deep:#E5A82E;
--gold-grad:linear-gradient(135deg,#FFD35F 0%,#E9A82A 100%);
--dim:rgba(255,255,255,.60); --dim-2:rgba(255,255,255,.40);
--dark-txt:#16150F; --dark-dim:#5C6168;
--hair:rgba(255,255,255,.11); --hair-2:rgba(255,255,255,.06); --hair-d:rgba(0,0,0,.12);
--live:#5BD08A;
--pad:clamp(20px,5vw,72px); --max:1340px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:#fff;font-family:"Inter",-apple-system,Helvetica,Arial,sans-serif;
font-size:16px;font-weight:300;line-height:1.75;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:"Barlow Condensed","Inter",sans-serif;font-weight:300;text-transform:uppercase;
letter-spacing:.015em;line-height:1;margin:0}
h1{font-size:clamp(42px,7.4vw,94px)}
h2{font-size:clamp(32px,4.6vw,62px);line-height:1.02}
h3{font-size:clamp(19px,1.7vw,25px);font-weight:400;letter-spacing:.03em;line-height:1.18}
h4{margin:0;font-family:"Inter",sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase}
p{margin:0 0 18px}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:0 0 24px}
.lede{font-size:clamp(15px,1.1vw,17px);line-height:1.85;color:var(--dim);font-weight:300;max-width:none}
.cream .lede{color:var(--dark-dim)}
.rule{width:56px;height:2px;background:var(--gold-grad);margin:26px 0}
.rule.mid{margin-left:auto;margin-right:auto}
.tab{font-variant-numeric:tabular-nums}
.btn{display:inline-flex;align-items:center;gap:14px;padding:16px 30px;font-family:"Inter",sans-serif;
font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;border:1px solid var(--hair);
color:#fff;transition:all .3s ease;cursor:pointer;background:none}
.btn:hover{border-color:var(--gold);color:var(--gold)}
.btn.gold{background:var(--gold-grad);border:0;color:#1B1608;padding:17px 32px}
.btn.gold:hover{background:#14120E;color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.cream .btn{border-color:var(--hair-d);color:var(--dark-txt)}
.cream .btn:hover{border-color:var(--gold-deep);color:var(--gold-deep)}
.cream .btn.gold:hover{background:#14120E;color:var(--gold);box-shadow:none}
.tlink{display:inline-flex;align-items:center;gap:10px;font-family:"Inter",sans-serif;font-size:10.5px;
font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#fff;padding-bottom:7px;
border-bottom:1px solid var(--gold)}
.tlink:hover{color:var(--gold)}
.tlink.g{color:var(--gold);white-space:nowrap}
.cream .tlink{color:var(--dark-txt);border-bottom-color:var(--gold-deep)}
/* ---------- top bar + centered header ---------- */
.topbar{background:#050403;border-bottom:1px solid var(--hair-2);text-align:center;padding:6px var(--pad)}
.topbar a{font-size:8.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.topbar a:hover{color:#FFDE84}
header{position:sticky;top:0;z-index:90;background:rgba(10,9,7,.93);backdrop-filter:blur(16px);
border-bottom:1px solid var(--hair-2)}
.hwrap{max-width:var(--max);margin:0 auto;padding:clamp(11px,1.3vw,15px) var(--pad) 0;
display:flex;flex-direction:column;align-items:center;gap:clamp(5px,0.65vw,8px)}
.brandlink img{height:clamp(28px,3vw,40px);width:auto;filter:invert(1)}
.hnav{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(20px,2.6vw,38px);
padding-bottom:clamp(11px,1.3vw,16px)}
.hnav a{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
color:rgba(255,255,255,.72);padding:6px 0;position:relative;white-space:nowrap;transition:color .3s}
.hnav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);
transition:right .4s cubic-bezier(.2,.7,.3,1)}
.hnav a:hover{color:#fff}
.hnav a:hover::after,.hnav a.on::after{right:0}
.hnav a.on{color:#fff}
.burger{display:none;background:none;border:0;padding:0;width:30px;height:30px;cursor:pointer;
position:absolute;left:var(--pad);top:18px}
.burger i{display:block;width:24px;height:1px;background:#fff;position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:24px;height:1px;background:#fff}
.burger i::before{top:-7px}.burger i::after{top:7px}
.mnav{display:none;border-top:1px solid var(--hair-2);background:var(--ink)}
.mnav.open{display:block}
.mnav a{display:block;padding:17px var(--pad);font-size:11.5px;font-weight:500;letter-spacing:.24em;
text-transform:uppercase;border-bottom:1px solid var(--hair-2);color:rgba(255,255,255,.82)}
.mnav a.on{color:var(--gold)}
.page{display:none}
.page.on{display:block}
/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;
min-height:calc(100svh - var(--chrome,210px));padding:clamp(24px,4vh,56px) 0;
background:radial-gradient(120% 90% at 82% 18%,#231B0D 0%,#100E0A 42%,#080706 100%)}
/* The grid lines sit ABOVE the slide photograph (.hero-photo is z-index:-1),
and the photo is far less filtered than it used to be, so .06 white was
starting to disappear over the bright parts of it. .085 keeps them reading
as the same faint grid on the dark ground and over the picture alike. */
.hero-mesh{position:absolute;inset:0;pointer-events:none;
background-image:linear-gradient(rgba(255,255,255,.085) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.085) 1px,transparent 1px);
background-size:82px 82px;
mask-image:radial-gradient(ellipse 80% 70% at 78% 30%,#000 0%,transparent 70%);
-webkit-mask-image:radial-gradient(ellipse 80% 70% at 78% 30%,#000 0%,transparent 70%)}
.hero-glow{position:absolute;top:-25%;right:-8%;width:64vw;height:64vw;max-width:880px;max-height:880px;
border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(255,199,44,.16) 0%,rgba(255,199,44,.05) 40%,transparent 68%)}
.hero-in{position:relative;z-index:3;width:100%;max-width:var(--max);margin:0 auto;
padding:clamp(64px,8vw,104px) var(--pad) clamp(96px,10vw,140px)}
/* all slides stacked in one grid cell => identical box, no height jump */
.slides{display:grid}
.slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s ease;pointer-events:none}
.slide.on{opacity:1;visibility:visible;pointer-events:auto}
.slide-inner{min-height:clamp(300px,30vw,360px);display:flex;flex-direction:column;justify-content:flex-start}
.hero h1{max-width:17ch;min-height:2em}
.hero h1 em{font-style:normal;color:var(--gold);display:block}
.hero .lede{margin-top:14px;min-height:5.2em}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;margin-top:34px}
.hero-foot{position:absolute;left:0;right:0;bottom:0;z-index:4;max-width:var(--max);margin:0 auto;
padding:0 var(--pad) clamp(14px,1.8vw,24px);display:flex;justify-content:flex-end;align-items:flex-end}
.counter{display:flex;flex-direction:column;gap:8px;font-size:11px;font-weight:500;letter-spacing:.2em;color:var(--dim-2)}
.counter .cur{color:var(--gold);border-left:1px solid var(--gold);padding-left:12px}
.counter .tot{padding-left:12px;border-left:1px solid var(--hair)}
.arrows{display:flex;gap:10px}
.arrows button{width:46px;height:38px;background:none;border:1px solid var(--hair);color:var(--gold);
cursor:pointer;font-size:15px;line-height:1;transition:all .3s}
.arrows button:hover{border-color:var(--gold);background:rgba(255,199,44,.09)}
/* ---------- live ticker ---------- */
.tickerbar{display:flex;align-items:stretch;background:#0C0A08;border-top:1px solid var(--hair-2);
border-bottom:1px solid var(--hair-2);overflow:hidden}
.tk-label{flex:none;display:flex;align-items:center;gap:9px;padding:0 22px;background:#12100E;
color:var(--live);font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;z-index:2;
border-right:1px solid rgba(91,208,138,.28)}
.tk-dot{width:7px;height:7px;border-radius:50%;background:var(--live);
box-shadow:0 0 9px rgba(91,208,138,.85);animation:blip 1.6s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
.tk-view{flex:1;overflow:hidden;position:relative;min-width:0}
.tk-view::after{content:"";position:absolute;top:0;right:0;bottom:0;width:70px;pointer-events:none;
background:linear-gradient(90deg,transparent,#0C0A08)}
.tk-track{display:flex;width:max-content;animation:marq 90s linear infinite}
@media(hover:hover) and (pointer:fine){.tickerbar:hover .tk-track{animation-play-state:paused}}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tick{display:inline-flex;align-items:center;gap:12px;padding:16px 26px;border-right:1px solid var(--hair-2);
white-space:nowrap;font-size:12.5px;color:var(--dim);transition:background .3s}
.tick:hover{background:#141110;color:#fff}
.tick .dt{font-size:9.5px;font-weight:500;letter-spacing:.2em;color:var(--dim-2);text-transform:uppercase}
.tick .st{font-size:8.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:4px 8px;
border:1px solid currentColor}
.tick .st.live{color:var(--live)}
.tick .st.mand{color:var(--gold)}
.tick .st.news{color:var(--dim-2)}
.tk-clocks{flex:none;display:flex;align-items:center;border-left:1px solid var(--hair-2);background:#0C0A08;z-index:2}
.tk-clocks div{padding:0 18px;border-right:1px solid var(--hair-2);font-size:9px;font-weight:500;
letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2);text-align:center;line-height:1.5}
.tk-clocks div:last-child{border-right:0}
.tk-clocks b{display:block;color:var(--gold);font-weight:500;font-size:11.5px;letter-spacing:.06em;
font-variant-numeric:tabular-nums}
/* ---------- sections ---------- */
.sec{padding:clamp(48px,5.6vw,92px) 0;border-bottom:1px solid var(--hair-2)}
.sec.cream{background:var(--cream);color:var(--dark-txt);border-bottom:0}
.sec.cream h1,.sec.cream h2,.sec.cream h3{color:var(--dark-txt)}
.imgband{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;
grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:center}
.imgband.rev .imgband-media{order:2}
.imgband-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--cream-2);
border:1px solid var(--hair-d)}
.imgband-media img{width:100%;height:100%;object-fit:cover}
.imgband-media .ph-tag{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(22,21,15,.3);
background:repeating-linear-gradient(45deg,rgba(0,0,0,.02) 0 12px,transparent 12px 24px)}
.imgband-media img:not([src=""]) ~ .ph-tag{display:none}
.imgband-body h3{font-size:clamp(24px,2.6vw,34px);font-weight:300;margin-bottom:8px}
.imgband-body p{color:var(--dark-dim);font-size:15px;line-height:1.8;margin:16px 0 0}
@media(max-width:860px){.imgband{grid-template-columns:1fr}.imgband.rev .imgband-media{order:0}}
.sec.flat{border-bottom:0}
.sec + .sec{border-top:1px solid var(--hair-2)}
.sec.edge{position:relative}
.sec.edge::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(255,199,44,.28),transparent)}
.sec.tint{background:#1A1712}
.sec.raise{background:#211D17}
.sec.deep{background:#050403}
.sec.band{background:linear-gradient(180deg,#16130F 0%,#100E0B 100%)}
.sec.panel{background:var(--panel)}
.sec.hair-top{border-top:1px solid var(--hair-2)}
.shead{max-width:var(--max);margin:0 auto;padding:0 var(--pad) clamp(28px,3vw,44px)}
.shead.mid{text-align:center;max-width:1000px}
.shead.mid .lede{margin-left:auto;margin-right:auto;max-width:90ch}
.shead .lede{margin-top:24px}
.gridwrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.phead{position:relative;overflow:hidden;padding:clamp(52px,6vw,96px) 0 clamp(34px,4vw,56px);
background:radial-gradient(110% 120% at 74% 0%,#231B0D 0%,#100E0A 45%,#080706 100%);
border-bottom:1px solid var(--hair-2)}
.phead .hero-mesh{mask-image:radial-gradient(ellipse 70% 90% at 72% 0%,#000 0%,transparent 72%);
-webkit-mask-image:radial-gradient(ellipse 70% 90% at 72% 0%,#000 0%,transparent 72%)}
.phead-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
/* grids — bordered box hugs the tiles exactly (no grey edges) */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair-2);border:1px solid var(--hair-2)}
.tile{background:var(--ink);padding:clamp(28px,3vw,42px);min-height:230px;display:flex;flex-direction:column;
transition:background .35s}
.tile:hover{background:#191613}
.tile .k{font-size:10px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:auto}
.tile h3{margin:34px 0 14px}
.tile p{margin:0;font-size:14.5px;color:var(--dim)}
.cream .tiles{background:var(--hair-d);border-color:var(--hair-d)}
.cream .tile{background:var(--cream)}
.cream .tile:hover{background:var(--cream-2)}
.cream .tile .k{color:var(--gold-deep)}
.cream .tile p{color:var(--dark-dim)}
.statsec{background:linear-gradient(100deg,#221A0C 0%,#17140F 45%,#100E0B 100%);
border-top:1px solid rgba(255,199,44,.22);border-bottom:1px solid rgba(255,199,44,.22)}
.statband{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(3,1fr)}
.statband .cell{padding:clamp(20px,2.2vw,30px) 20px;text-align:center;border-right:1px solid var(--hair-2)}
.statband .cell:last-child{border-right:0}
.statband .n{font-family:"Barlow Condensed",sans-serif;font-weight:300;font-size:clamp(26px,2.6vw,38px);
color:var(--gold);line-height:1}
.statband .l{margin-top:7px;font-size:9px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--dim-2)}
.feature{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;
grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,84px);align-items:center}
.feature-card{border:1px solid var(--hair-d);background:rgba(0,0,0,.03);padding:clamp(28px,3.2vw,44px);position:relative}
.feature-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--gold-grad)}
.spec{list-style:none;margin:0;padding:0}
.spec li{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--hair-d);
font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dark-dim)}
.spec li:last-child{border-bottom:0}
.spec li b{font-weight:600;color:var(--dark-txt);letter-spacing:.1em;text-align:right}
.quiet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair-2);border:1px solid var(--hair-2)}
.quiet{display:flex;flex-direction:column}
.quiet .chips{margin-top:22px}
.quiet-cta{margin-top:auto;padding-top:26px}
.quiet{background:var(--ink);padding:clamp(28px,3vw,44px);transition:background .35s}
.quiet:hover{background:#191613}
.quiet .n{font-size:10px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--dim-2)}
.quiet h3{margin:20px 0 14px;font-size:clamp(26px,2.8vw,38px);font-weight:300}
.quiet p{margin:0;color:var(--dim);font-size:14.5px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.chips li{font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
border:1px solid var(--hair);padding:7px 11px;color:var(--dim-2)}
.ledger{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.entry{display:grid;grid-template-columns:130px 1px 1fr;gap:clamp(20px,3.6vw,56px)}
.entry .yr{padding:38px 0;font-family:"Barlow Condensed",sans-serif;font-weight:300;font-size:clamp(30px,3.2vw,44px);
color:var(--gold);line-height:1;letter-spacing:.03em}
.entry .spine{background:var(--hair);position:relative}
.entry .spine::before{content:"";position:absolute;left:-4px;top:46px;width:9px;height:9px;background:var(--ink);
border:1px solid var(--gold);transform:rotate(45deg);transition:background .35s}
.entry:hover .spine::before{background:var(--gold)}
.entry .body{padding:38px 0}
.entry .body p{margin:14px 0 0;color:var(--dim);max-width:58ch;font-size:15px}
.entry:first-child .spine{margin-top:38px}
/* ---------- news ---------- */
.filters{max-width:var(--max);margin:0 auto;padding:0 var(--pad) clamp(30px,3.4vw,48px);display:flex;flex-wrap:wrap;gap:10px}
.chip{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:11px 18px;
border:1px solid var(--hair);color:var(--dim);background:none;cursor:pointer;transition:all .3s}
.chip:hover{border-color:var(--gold);color:#fff}
.chip.on{background:var(--gold-grad);border-color:transparent;color:#1B1608}
/* minmax(0,1fr), not 1fr: a plain 1fr track has an auto MINIMUM, so the
widest card content (the nowrap .ndate line) pushed one column ~25px
wider than the other two. Since .nimg is a fixed 16:10 box, a wider
column meant a TALLER thumbnail — that is the inconsistent crop. The
0 floor makes all three columns exactly equal, so all three images
are the same shape AND the same size. */
.ngrid{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(20px,2.4vw,34px)}
.ncard{display:flex;flex-direction:column;border:1px solid var(--hair-2);background:var(--panel);
transition:border-color .35s,transform .35s}
.ncard:hover{border-color:rgba(255,199,44,.45);transform:translateY(-5px)}
/* ONE CROP FOR EVERY CARD. .nimg is a column flex item, so its automatic
minimum size is content-based: an ![]()
in normal flow contributes its own
intrinsic ratio and a picture taller than 16:10 pushed the box past the
aspect-ratio height — which is why one card's thumbnail came out taller
than the others. flex:0 0 auto + min-height:0 removes that floor, and the
img is taken out of flow entirely so only aspect-ratio decides the shape. */
.nimg{position:relative;aspect-ratio:16/10;overflow:hidden;background:#1A1714;
flex:0 0 auto;min-height:0}
.nimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.04);
transition:transform .85s cubic-bezier(.2,.7,.3,1),filter .5s}
.ncard:hover .nimg img{transform:scale(1.06);filter:grayscale(0)}
.nimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,9,7,.62) 100%)}
.ntag{position:absolute;z-index:2;left:16px;top:16px;font-size:9px;font-weight:600;letter-spacing:.22em;
text-transform:uppercase;color:#1B1608;background:var(--gold-grad);padding:6px 11px}
.nbody{padding:clamp(24px,2.4vw,32px);display:flex;flex-direction:column;flex:1}
.ndate{font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2);margin-bottom:18px;
/* one line always: the longest of these ("23 SEPTEMBER 2026 · ZURICH
(SWITZERLAND)") overran the card at .26em tracking and wrapped */
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ncard h3{font-size:clamp(18px,1.5vw,22px);line-height:1.16}
.ncard p{margin:14px 0 0;font-size:14px;color:var(--dim)}
.ncard .go{margin-top:auto;padding-top:22px;font-size:9.5px;font-weight:600;letter-spacing:.24em;
text-transform:uppercase;color:var(--gold)}
.more-wrap{text-align:center;margin-top:clamp(38px,4vw,58px)}
.count-note{margin-top:18px;font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2)}
/* ---------- article ---------- */
.art-head{max-width:920px;margin:0 auto;padding:clamp(52px,6vw,92px) var(--pad) 0;text-align:center}
.art-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;font-size:9.5px;font-weight:500;
letter-spacing:.26em;text-transform:uppercase;color:var(--dim-2);margin-bottom:28px}
.art-meta .cat{color:var(--gold)}
.art-head h1{font-size:clamp(32px,4.2vw,58px);line-height:1.04}
.art-hero{max-width:1120px;margin:clamp(40px,4.6vw,66px) auto 0;padding:0 var(--pad)}
/* 16:9, not 21:9 — a taller frame shows more of each release picture. Same
reasoning as .nimg above: the img is absolutely positioned so nothing but
aspect-ratio decides the frame's height. */
.art-hero .fr{position:relative;border:1px solid var(--hair);overflow:hidden;aspect-ratio:16/9;background:#17140F}
.art-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art-hero .cap{margin-top:14px;font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--dim-2)}
.art-wrap{max-width:1120px;margin:0 auto;padding:clamp(46px,5.4vw,80px) var(--pad) clamp(58px,7vw,110px);
display:grid;grid-template-columns:1fr 290px;gap:clamp(34px,5vw,74px);align-items:start}
.art-body{max-width:72ch}
.art-body .dek{font-size:clamp(17px,1.5vw,21px);line-height:1.75;color:#fff;font-weight:300;
padding-bottom:30px;margin-bottom:32px;border-bottom:1px solid var(--hair-2)}
.art-body p{color:var(--dim);font-size:16px;line-height:1.92}
.pull{margin:44px 0;padding:8px 0 8px 30px;border-left:2px solid var(--gold);font-family:"Barlow Condensed",sans-serif;
font-weight:300;text-transform:uppercase;font-size:clamp(22px,2.2vw,30px);line-height:1.15;color:#fff;letter-spacing:.02em}
.art-side{position:sticky;top:150px;border:1px solid var(--hair-2);background:var(--panel);padding:30px}
.art-side h4{color:var(--gold);margin-bottom:24px}
.art-side dt{font-size:9.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--dim-2);margin-top:20px}
.art-side dd{margin:6px 0 0;font-size:14.5px;color:#fff;font-weight:300}
.art-side dl{margin:0}
.art-foot{max-width:1120px;margin:0 auto;padding:34px var(--pad) clamp(58px,7vw,100px);
border-top:1px solid var(--hair-2);display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
/* ---------- ecosystem ---------- */
.aff{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair-2);border:1px solid var(--hair-2)}
.aff-item{background:var(--ink);padding:clamp(30px,3.2vw,46px);min-height:190px;display:flex;flex-direction:column;
justify-content:center;transition:background .35s}
.aff-item:hover{background:#191613}
.aff-item .nm{font-family:"Barlow Condensed",sans-serif;font-weight:400;font-size:clamp(21px,1.9vw,27px);
letter-spacing:.06em;text-transform:uppercase;line-height:1.1}
.aff-item .rl{margin-top:12px;font-size:9.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.aff-item p{margin:16px 0 0;font-size:13.5px;color:var(--dim);max-width:42ch}
.partner-band{max-width:var(--max);margin:clamp(34px,4vw,58px) auto 0;padding:0 var(--pad)}
.gridwrap > .partner-band{max-width:none;padding:0;margin-left:0;margin-right:0}
.partner-in{display:flex;flex-wrap:wrap;gap:26px 40px;align-items:center;justify-content:space-between;
padding:clamp(30px,3.4vw,48px);border:1px solid rgba(255,199,44,.3);
background:linear-gradient(100deg,#231B0D 0%,#131110 60%)}
.partner-in .t{font-family:"Barlow Condensed",sans-serif;font-weight:300;text-transform:uppercase;
font-size:clamp(22px,2.2vw,32px);letter-spacing:.03em;line-height:1.1}
.partner-in .s{margin-top:14px;font-size:14px;color:var(--dim);max-width:74ch;line-height:1.7}
.pb-lead{display:flex;align-items:flex-start;gap:clamp(22px,2.6vw,40px);flex-wrap:nowrap}
.pb-logo{flex:none;width:clamp(120px,12vw,150px);display:flex;align-items:flex-start;justify-content:center}
.pb-txt{padding-top:0}
.scp-big{width:100%;height:auto;max-height:72px;object-fit:contain;object-position:top;margin-top:2px}
.circle-big{width:auto;height:clamp(88px,8.6vw,108px);object-fit:contain;margin-top:-6px}
.cta{position:relative;overflow:hidden;padding:clamp(48px,5.4vw,88px) 0;
background:linear-gradient(100deg,#241C0D 0%,#151210 42%,#0A0907 100%);
border-top:1px solid var(--hair-2);border-bottom:1px solid rgba(255,199,44,.22)}
.cta-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:0 var(--pad);
display:flex;flex-wrap:wrap;gap:34px;align-items:center;justify-content:space-between}
.cta h2{max-width:none;font-size:clamp(24px,3.55vw,52px);line-height:1.1}
@media(max-width:640px){.cta h2{white-space:normal!important}}
footer{background:#050403;border-top:1px solid var(--hair-2)}
.fmid{max-width:var(--max);margin:0 auto;padding:clamp(38px,3.6vw,52px) var(--pad) 0;text-align:center}
.fmid img.flogo{height:28px;width:auto;filter:invert(1);margin:0 auto}
.fmid .tag{margin-top:12px;font-family:"Barlow Condensed",sans-serif;font-weight:300;text-transform:uppercase;
letter-spacing:.16em;font-size:20px;color:var(--gold)}
.fpartner{display:inline-block;margin:20px 0 4px;padding:11px 20px;border:1px solid rgba(255,255,255,.12);
font-size:8.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2)}
.fpartner:hover{border-color:rgba(255,199,44,.5);color:var(--dim)}
.fcols{max-width:var(--max);margin:0 auto;padding:clamp(44px,4.4vw,66px) var(--pad) clamp(30px,3vw,44px);
display:grid;grid-template-columns:repeat(3,1fr);gap:30px;align-items:start}
.fcols>div{display:flex;flex-direction:column}
.fcols h4{color:#fff;margin:0 0 18px;line-height:1}
.fcols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fcols li{font-size:14px;color:var(--dim);line-height:1.5}
.fcols a{font-size:14px;color:var(--dim);line-height:1.5}
.fcols a:hover{color:var(--gold)}
.socials{display:flex;gap:10px;margin-top:22px}
.socials a{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border:1px solid var(--hair);
font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.socials a:hover{border-color:var(--gold);color:var(--gold)}
.fnet li{margin-bottom:4px}
.fnet a{display:flex;flex-direction:column;gap:3px}
.fnet a .ext{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dim-2);transition:color .3s}
.fnet a:hover .ext{color:var(--gold)}
.fbot{max-width:var(--max);margin:0 auto;padding:18px var(--pad);border-top:1px solid var(--hair-2);
display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2)}
/* ---------- history: world map ---------- */
.mapsec{background:#070605}
.eco-sec{background:var(--ink)}
.eco-partners{background:none;padding:0;margin-top:0}
.afx{background:none;padding-top:0;padding-bottom:clamp(4px,0.8vw,10px);margin-top:calc(-1 * clamp(8px,1.2vw,18px))}
.news-sec{background:#1A1712}
.mapwrap{position:relative;border:1px solid var(--hair-2);background:
radial-gradient(120% 140% at 50% 0%,#141210 0%,#0B0A08 70%);padding:clamp(16px,2.4vw,30px)}
.worldmap{position:relative;width:100%}
.worldmap svg{width:100%;height:auto;display:block}
.wm-land{fill:#211E1A;stroke:#2E2A24;stroke-width:.5}
.wm-dot{cursor:pointer}
.wm-dot .halo{transform-box:fill-box;transform-origin:center;animation:pulseHalo 2.6s ease-out infinite}
@keyframes pulseHalo{0%{opacity:.55;transform:scale(.6)}70%{opacity:0;transform:scale(2.6)}100%{opacity:0;transform:scale(2.6)}}
.wm-core{transition:r .2s}
.wm-dot:hover .wm-core{r:6}
.map-tip{position:absolute;pointer-events:none;z-index:5;opacity:0;transform:translate(-50%,-8px);
transition:opacity .18s;background:#000;border:1px solid var(--gold);padding:9px 13px;
font-size:11px;letter-spacing:.04em;color:#fff;white-space:nowrap}
.map-tip .tt-city{color:var(--gold);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
/* the detail must stay on ONE line — the box widens instead of wrapping */
.map-tip .tt-note{color:var(--dim);font-size:11px;margin-top:3px;white-space:nowrap}
.map-tip.on{opacity:1}
/* sized to keep all six categories on ONE row at desktop widths */
.map-legend{display:flex;flex-wrap:wrap;gap:clamp(6px,1.05vw,16px);justify-content:center;margin-top:20px;
font-size:clamp(6.9px,.62vw,9px);font-weight:500;letter-spacing:.11em;text-transform:uppercase;
color:var(--dim-2);white-space:nowrap}
.map-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle}
@media(max-width:900px){.map-legend{white-space:normal;font-size:8.5px;letter-spacing:.1em}}
.lg.live{background:#5BD08A}.lg.mand{background:#FFC72C}.lg.done{background:#7FA8FF}
.lg.deal{background:#B39DDB}.lg.exec{background:#EFE3C8}.lg.appt{background:#E8804F}
.map-hint{margin:14px 0 0;text-align:center;font-size:11px;color:var(--dim-2);letter-spacing:.04em}
.mh-filter{color:var(--gold);opacity:.85}
/* the three headline figures, with the currency stamp on the same line */
/* three equal columns rather than a flex row: the figures sit on the centre of
the map frame regardless of how long each label runs */
/* the row is centred as a group and only as wide as it needs to be, so it sits
under the heading rather than spreading to the full grid width */
.mapstats{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
gap:clamp(20px,2.6vw,44px);max-width:820px;margin:0 auto clamp(22px,2.6vw,34px)}
.ms-cell{display:flex;align-items:baseline;gap:9px}
.ms-n{font-family:"Barlow Condensed",sans-serif;font-weight:600;line-height:.9;
font-size:clamp(30px,3.2vw,48px);color:var(--gold);
font-variant-numeric:tabular-nums;min-width:1.6ch;text-align:right}
.ms-l{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--dim-2)}
@media(max-width:640px){.mapstats{gap:14px}}
/* The map frame was taller than a laptop screen, so the box could not be taken
in at a glance. Capping the drawing and letting it stretch a little wider
brings the whole frame inside one viewport height. */
.worldmap svg{max-height:min(62vh,560px);margin:0 auto}
.mapsec .mapwrap{padding:clamp(12px,1.8vw,22px)}
/* small currency stamp, top-right inside the map frame */
.map-status{position:absolute;top:clamp(12px,1.6vw,20px);right:clamp(12px,1.6vw,20px);z-index:4;
margin:0;font-family:"Inter",sans-serif;font-size:9px;font-weight:500;letter-spacing:.2em;
text-transform:uppercase;color:var(--dim-2);border:1px solid var(--hair-2);
padding:5px 9px;background:rgba(8,7,6,.72);pointer-events:none}
/* --- [FEATURE: regional tabs] map shortcuts, mainly for small screens --- */
.mapregions{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.mapregions button{flex:0 0 auto;background:none;border:1px solid var(--hair-2);color:var(--dim);
font-family:"Inter",sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;padding:8px 12px;cursor:pointer;transition:color .25s,border-color .25s,background .25s}
.mapregions button:hover{color:#fff;border-color:var(--hair)}
.mapregions button.on{color:#12100D;background:var(--gold-grad);border-color:transparent}
.mapstat-chip{display:none}
@media(max-width:900px){
/* on a phone the strip is the primary way in, so it earns full-width taps.
Seven cells: World across the top, then five regions and the stamp, which
fills the sixth slot so the grid comes out square. */
.mapregions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
.mapregions button{padding:11px 4px;font-size:8.5px;letter-spacing:.06em;text-align:center}
.mapregions button:first-child{grid-column:span 3}
.mapregions .mapstat-chip{display:flex;align-items:center;justify-content:center;
border:1px solid var(--hair-2);color:var(--dim-2);font-family:"Inter",sans-serif;
font-size:8.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
padding:11px 4px;text-align:center}
/* the framed stamp would duplicate it */
.mapwrap .map-status{display:none}
}
/* legend doubles as a category filter */
.lg-btn{background:none;border:0;padding:2px 0;cursor:pointer;color:inherit;font:inherit;
letter-spacing:inherit;text-transform:inherit;transition:opacity .25s,color .25s}
.lg-btn:hover{color:#fff}
.lg-btn.is-off{opacity:.32}
.lg-btn.is-off i{filter:grayscale(1)}
.map-reset{margin:10px 0 0;text-align:center;height:0;overflow:hidden;opacity:0;
transition:opacity .3s}
.map-reset.on{height:auto;opacity:1}
.map-reset button{background:none;border:0;cursor:pointer;color:var(--gold);
font-family:"Inter",sans-serif;font-size:9px;font-weight:600;letter-spacing:.2em;
text-transform:uppercase;padding:4px 0;text-decoration:underline;text-underline-offset:4px}
/* camera group: everything inside pans/zooms together */
#wmCam{transition:transform .72s cubic-bezier(.22,.72,.24,1)}
.wm-s{transition:transform .72s cubic-bezier(.22,.72,.24,1)}
.worldmap.is-zoomed .wm-land{opacity:.55}
.wm-land{transition:opacity .5s}
/* multi-entry cities: one larger black circle with a single gold outline */
.wm-dot.is-multi .wm-core{transition:stroke-width .3s}
.wm-dot.is-multi:hover .wm-core,.wm-dot.is-multi.is-active .wm-core{stroke-width:2.1}
/* colour swatch in the tooltip, in place of a written category label */
.tt-dot{display:inline-block;width:7px;height:7px;border-radius:50%;
margin-right:7px;vertical-align:baseline;position:relative;top:0}
.worldmap.has-open .wm-dot:not(.is-active){opacity:.42}
.wm-dot{transition:opacity .4s}
.fan-leader{stroke:rgba(255,199,44,.42)}
.fan-pin{cursor:pointer}
.fan-pin circle{transition:r .2s}
.fan-pin:hover circle,.fan-pin.is-lit circle{r:5.4}
/* city panel */
/* Top offset clears the region strip, which sits 52px down inside the frame;
at the old 30px the panel covered the continent buttons. */
.map-panel{position:absolute;top:clamp(62px,7vw,78px);left:clamp(16px,2.4vw,30px);z-index:6;
width:min(300px,72%);background:rgba(8,7,6,.94);border:1px solid var(--hair-2);
padding:16px 18px;opacity:0;pointer-events:none;transform:translateY(-6px);
transition:opacity .35s,transform .35s}
.map-panel.on{opacity:1;pointer-events:auto;transform:none}
.mp-back{background:none;border:0;color:var(--gold);cursor:pointer;padding:0;
font-family:"Inter",sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.mp-city{margin-top:10px;font-family:"Barlow Condensed",sans-serif;font-weight:600;
font-size:26px;line-height:1.05;letter-spacing:.02em}
/* sits inline beside the city name, not on its own line */
.mp-country{font-size:15px;font-weight:500;letter-spacing:.06em;color:var(--gold)}
.mp-n{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim-2);margin-top:2px}
.mp-list{list-style:none;margin:12px 0 0;padding:0;max-height:min(300px,42vh);overflow:auto}
.mp-list li{display:grid;grid-template-columns:9px minmax(0,1fr);gap:0 9px;padding:7px 0;
border-top:1px solid var(--hair-2);cursor:default}
/* both text spans must be pinned to column 2, or the detail wraps into the
9px dot column and breaks one word per line */
.mp-list li i{width:7px;height:7px;border-radius:50%;margin-top:5px;grid-column:1;grid-row:1}
.mp-cat{grid-column:2;grid-row:1}
.mp-det{grid-column:2;grid-row:2}
.mp-cat{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2);line-height:1.6}
.mp-det{font-size:12.5px;color:var(--dim);line-height:1.45}
.mp-list li:hover .mp-det{color:#fff}
/* A phone held sideways is ~850px WIDE but only ~390 tall, so a width-only
rule missed it and the panel floated over the map. Keying on height as well
catches landscape: below either threshold the panel drops under the map, the
same as it does in portrait. */
@media(max-width:620px),(max-height:560px){
.map-panel{position:relative;top:auto;left:auto;width:100%;margin-top:14px;
transform:none;display:none}
.map-panel.on{display:block}
}
/* ---------- history: chronology collage ---------- */
/* No cards, panels, spine or dots: text on one side, an overlapping photo
collage on the other, alternating down the page. The centre rule was
removed so the collage can sit right up against the copy. */
/* The collage runs past the text column, out to the viewport edge and a little
beyond. --zbleed is the distance from the .zig edge to the viewport edge
(50vw - half the 1180 max, floored at the gridwrap padding on narrower
screens); --zover is the deliberate overshoot that gets clipped away.
.chronosec clips it, so none of this can ever widen the page. */
.chronosec{overflow-x:clip}
.zig{position:relative;max-width:1180px;margin:0 auto;
--zbleed:max(var(--pad),calc(50vw - 590px));--zover:0px}
/* --zover was an overshoot past the viewport edge. Now that photos are shown
whole rather than cropped, any overshoot slices the outermost picture, so
the collage reaches the edge exactly and stops. */
.znode{position:relative;display:grid;grid-template-columns:1fr 1fr;
column-gap:clamp(14px,1.6vw,26px);align-items:start;
margin-bottom:clamp(26px,3vw,46px)}
.znode:last-child{margin-bottom:0}
/* text side */
.ztext{position:relative;padding-top:2px;grid-row:1}
.znode.l .ztext{grid-column:1}
.znode.r .ztext{grid-column:2}
.zyear{font-family:"Barlow Condensed",sans-serif;font-weight:600;
font-size:clamp(30px,3.1vw,48px);color:var(--gold);line-height:.95;letter-spacing:.02em;margin-bottom:6px}
.ztext h3{margin:0 0 10px;font-family:"Barlow Condensed",sans-serif;font-weight:600;
font-size:clamp(15px,1.25vw,18px);letter-spacing:.13em;text-transform:uppercase;line-height:1.25}
.ztext p{margin:0;color:var(--dim);font-size:13.5px;line-height:1.68;max-width:62ch}
/* a year can carry several labelled blocks of copy */
.zsec{margin:16px 0 5px;font-family:"Inter",sans-serif;font-size:9px;font-weight:600;
letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
.zsec:first-of-type{margin-top:14px}
.ztext p + .zsec{margin-top:15px}
/* collage side — a JUSTIFIED MOSAIC. Images keep their own aspect ratios, but
every row is scaled to fill the width exactly, so a mixed set of portrait
and landscape shots packs into one clean rectangle with a small even gap.
flex-grow AND flex-basis are both proportional to the aspect ratio: that is
what justifies the row without distorting the pictures. Set only one of the
two and everything stretches. --ar is written onto each button from the
image's natural size once it loads (see fitMosaic). */
.zcol{position:relative;grid-row:1;
--zgap:clamp(3px,0.38vw,7px);
/* Target row height. Kept deliberately SMALL: these are collage tiles, not
a gallery — a chapter should read as one compact block rather than run
hundreds of pixels down the page. Halving these values took the tallest
chapter from ~1,300px to ~650px. */
--row:clamp(74px,7.4vw,116px);
--tile:clamp(86px,8.4vw,128px);
display:grid;grid-template-columns:repeat(var(--cols),1fr);
/* dense: a doubled tile that will not fit at the end of a row would otherwise
leave a hole. Dense backfills it with a later single. The lightbox reads
its order from the data, not the grid, so the gallery sequence is unchanged.
Drop "dense" to keep strict visual order at the cost of the gaps. */
grid-auto-flow:row dense;
gap:var(--zgap);
/* flex-start, not stretch: a stretched item takes the row height whatever
its own shape and object-fit then trims the difference. Because photos
are ordered by weight (see the renderer), each row holds items of one
weight, so their heights already match and nothing needs trimming. */
align-items:stretch;align-content:start}
.zcol.mid{--row:clamp(66px,6.5vw,102px);--tile:clamp(76px,7.4vw,112px)}
.zcol.dense{--row:clamp(58px,5.6vw,88px);--tile:clamp(64px,6.2vw,96px)}
.znode.l .zcol{grid-column:2;margin-right:calc(-1 * (var(--zbleed) + var(--zover)))}
.znode.r .zcol{grid-column:1;margin-left:calc(-1 * (var(--zbleed) + var(--zover)))}
/* --w is the SIZE WEIGHT of a picture: 1 is normal, ~1.9 a hero, ~0.62 a
small one. It multiplies the flex basis, so a heavy picture leaves less
room on its row and the row grows taller to fit it — which is what makes
the good shots large and the filler small inside the same rectangle.
Both grow and basis must carry it or the aspect ratios distort. */
.zcol .zshot{--ar:1.5;--w:1;
/* Uniform tile: every picture occupies the same rectangle, so the gaps read
as one even gutter across the whole block. The picture is cropped to fit
rather than distorted, and --fp moves the crop window onto the faces. */
width:100%;height:100%;
min-width:0;margin:0;padding:0;border:0;background:none;cursor:default;overflow:hidden}
/* A picked-out photo occupies a 2x2 block of the same grid. The gutter is
unchanged, so spacing stays even; only the picture is larger. Below three
columns there is no room to double anything, so it renders as a normal tile. */
/* spans are assigned by packBlock, not by CSS */
.zcol .zshot img{display:block;width:100%;height:100%;
object-fit:cover;object-position:var(--fp,50% 42%);
border:1px solid var(--hair-2);
filter:saturate(.94) contrast(1.02);
transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .4s,border-color .4s}
.zcol .zshot:hover img{border-color:rgba(255,199,44,.35);
filter:saturate(1) contrast(1.05) brightness(1.06)}
.zcol .zshot:focus-visible img{border-color:var(--gold)}
/* placeholder tiles while photography is pending */
.zcol.ph{align-self:start}
.zshot.is-ph{--ar:1.333;cursor:default;background-color:#14120E;
border:1px solid var(--hair-2);
background-image:repeating-linear-gradient(135deg,rgba(255,199,44,.045) 0 9px,transparent 9px 18px);
display:flex;align-items:center;justify-content:center}
.zshot.is-ph span{font-family:"Barlow Condensed",sans-serif;font-weight:600;
font-size:clamp(15px,1.5vw,22px);letter-spacing:.3em;color:var(--gold);opacity:.3}
@media(max-width:900px){
.znode{grid-template-columns:1fr;row-gap:14px;margin-bottom:clamp(26px,5vw,38px)}
/* single column: release the row-1 pin, or text and collage stack on top
of each other in the same cell */
.znode.l .ztext,.znode.r .ztext,.znode.l .zcol,.znode.r .zcol{grid-column:1;grid-row:auto}
.znode.l .ztext,.znode.r .ztext{order:1}
.znode.l .zcol,.znode.r .zcol{order:2}
.zcol{--row:clamp(64px,15vw,92px);--tile:clamp(76px,18vw,106px)}
.zcol.mid,.zcol.dense{--row:clamp(56px,13vw,80px);--tile:clamp(64px,15.5vw,92px)}
/* reach the right edge exactly — an overshoot here slices the photo */
.znode.l .zcol,.znode.r .zcol{margin-left:0;margin-right:calc(-1 * var(--pad))}
.ztext p{max-width:none}
}
/* lightbox */
.zlb{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:5vw;
background:rgba(6,5,4,.92);opacity:0;visibility:hidden;transition:opacity .3s}
.zlb.on{opacity:1;visibility:visible}
.zlb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%}
.zlb-meta{display:flex;align-items:center;gap:14px;font-family:"Inter",sans-serif;font-size:9.5px;
font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2)}
.zlb-title{color:var(--gold)}
.zlb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;z-index:2;
background:rgba(0,0,0,.55);border:1px solid var(--hair);color:var(--dim);cursor:pointer;
font-size:17px;line-height:1;transition:border-color .3s,color .3s,background .3s}
.zlb-nav:hover{border-color:var(--gold);color:var(--gold);background:rgba(0,0,0,.8)}
.zlb-prev{left:clamp(10px,2.4vw,34px)}
.zlb-next{right:clamp(10px,2.4vw,34px)}
@media(max-width:620px){.zlb-nav{width:40px;height:40px}}
.zlb img{max-width:100%;max-height:82vh;object-fit:contain;border:1px solid var(--hair);box-shadow:0 30px 90px rgba(0,0,0,.6)}
.zlb-cap{max-width:70ch;text-align:center;color:var(--dim);font-size:12.5px;line-height:1.6;letter-spacing:.02em}
.zlb-x{position:absolute;top:clamp(16px,3vw,32px);right:clamp(16px,3vw,32px);width:46px;height:46px;
background:none;border:1px solid var(--hair);color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:all .3s}
.zlb-x:hover{border-color:var(--gold);color:var(--gold)}
/* ---------- history: references (wide) ---------- */
.quotes{background:#16130F}
.qwrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.qwall{position:relative;height:205px}
.quote{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease;
display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.quote.on{opacity:1;visibility:visible;position:relative}
.quote .qq{color:var(--gold);opacity:.62}
.quote .qq:first-child{margin-right:.06em}
.quote .qq:last-child{margin-left:.06em}
.quote blockquote{margin:0;font-family:"Barlow Condensed",sans-serif;font-weight:300;
font-size:clamp(20px,2.1vw,30px);line-height:1.32;letter-spacing:.01em;color:#fff;max-width:86ch}
.quote .qsrc{margin-top:22px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.quote .qrole{margin-top:8px;font-size:13px;color:var(--dim-2);max-width:64ch}
.qdots{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:20px;max-width:560px;margin-left:auto;margin-right:auto}
.qdots button{width:8px;height:8px;padding:0;border:1px solid var(--hair);background:none;cursor:pointer;
transform:rotate(45deg);transition:all .3s}
.qdots button:hover{border-color:var(--gold)}
.qdots button.on{background:var(--gold);border-color:var(--gold)}
@media(max-width:620px){.pb-lead{flex-wrap:wrap}}
@media(max-width:900px){
/* no spine any more, so nothing to indent past */
.znode{padding-left:0}
}
@media(max-width:1060px){
.tiles,.aff{grid-template-columns:repeat(2,1fr)}
.ngrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.feature,.art-wrap{grid-template-columns:1fr}
.art-side{position:static}
.fcols{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
.hnav{display:none}
.burger{display:block}
.hwrap{padding-top:20px}
.tiles,.aff,.quiet-grid,.fcols,.statband{grid-template-columns:1fr}
.ngrid{grid-template-columns:minmax(0,1fr)}
.hero-foot{position:static;padding:0 var(--pad) 30px}
.hero-in{padding-bottom:40px}
.entry{grid-template-columns:74px 1px 1fr}
.entry .yr{font-size:24px}
.tk-clocks div:not(:first-child){display:none}
.slide-inner{min-height:0}
.hero h1,.hero .lede{min-height:0}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
/* ============ INTERACTIVE ADD-ONS (removable) ============ */
/* --- [FEATURE: scroll reveal] --- */
[data-reveal]{opacity:0;transform:translateY(24px);
transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal].d1{transition-delay:.08s}[data-reveal].d2{transition-delay:.16s}
[data-reveal].d3{transition-delay:.24s}[data-reveal].d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important}}
/* --- [FEATURE: heritage prologue] --- */
/* Same timeline shape as the chronology below, restyled for the cream
section and deliberately lighter on copy (one short line per year). */
.heritage{position:relative;overflow-x:clip}
.her-tl{margin-top:clamp(30px,3.6vw,54px)}
.her-tl .zyear{color:var(--gold-deep)}
.her-tl .ztext h3{color:var(--dark-txt)}
.her-tl .ztext p{color:var(--dark-dim);max-width:52ch}
.her-tl .zshot img{border-color:var(--hair-d);box-shadow:0 6px 18px rgba(22,21,15,.16);
filter:none}
.her-tl .zshot:hover img{border-color:var(--hair-d);
box-shadow:0 14px 34px rgba(22,21,15,.26);filter:brightness(1.03)}
.her-tl .znode{margin-bottom:clamp(30px,3.4vw,52px)}
/* the run of places a chapter covers, under its name */
.her-tl .her-places,.zig .her-places{margin:6px 0 0;font-family:"Inter",sans-serif;font-size:10px;
font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);
max-width:none}
/* the timeline sits on dark ground, where the deep gold reads too heavily */
#zig .her-places{color:var(--gold)}
.her-tl .zsec{color:var(--dark-dim);opacity:.75}
.her-tl .zsec:first-of-type{margin-top:18px}
.her-note{max-width:var(--max);margin:clamp(34px,4vw,56px) auto 0;padding:0 var(--pad);text-align:center;position:relative}
.her-note::before,.her-note::after{content:"";position:absolute;top:50%;width:calc(50% - 250px);height:1px;
background:linear-gradient(90deg,transparent,var(--hair-d))}
.her-note::before{left:0}
.her-note::after{right:0;background:linear-gradient(90deg,var(--hair-d),transparent)}
.her-note span{display:inline-block;font-family:"Barlow Condensed",sans-serif;font-weight:300;
text-transform:uppercase;letter-spacing:.16em;font-size:clamp(14px,1.5vw,19px);color:var(--dark-dim);
line-height:1.5;max-width:470px;padding:0 26px}
@media(max-width:1000px){.her-note::before,.her-note::after{width:calc(50% - 220px)}}
@media(max-width:680px){.her-note::before,.her-note::after{display:none}}
/* --- [FEATURE: certificate note showcase] --- */
.cnshow{border:1px solid var(--hair-d);background:#fff;overflow:hidden;margin-top:clamp(46px,5.4vw,86px)}
.cnshow-head{padding:clamp(26px,2.8vw,40px) clamp(24px,2.6vw,38px) 0;
display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(18px,2.6vw,40px);flex-wrap:wrap}
.cnshow-ttl{max-width:900px;min-width:0}
.cnshow-cta{flex:none;margin-left:auto;white-space:nowrap}
/* rail is now the last child — let the box border be the closing line */
.cnrail:last-child{border-bottom:0}
@media(max-width:700px){.cnshow-cta{margin-left:0}}
.cnshow-head h3{font-size:clamp(26px,2.8vw,38px);font-weight:300;color:var(--dark-txt);margin-top:8px}
.cnrail{position:relative;overflow:hidden;margin-top:clamp(16px,1.8vw,26px);
border-top:1px solid var(--hair-d);border-bottom:1px solid var(--hair-d);padding:clamp(20px,2.2vw,30px) 0}
.cnrail::before,.cnrail::after{content:"";position:absolute;top:0;bottom:0;width:72px;z-index:3;pointer-events:none}
.cnrail::before{left:0;background:linear-gradient(90deg,#fff,transparent)}
.cnrail::after{right:0;background:linear-gradient(270deg,#fff,transparent)}
.cnrail-track{display:flex;width:max-content;gap:clamp(14px,1.6vw,22px);align-items:stretch;
padding:0 clamp(14px,1.6vw,22px);animation:afxmarq 58s linear infinite}
@media(hover:hover) and (pointer:fine){.cnrail:hover .cnrail-track{animation-play-state:paused}}
.cntile{flex:none;width:clamp(230px,20vw,290px);display:flex;flex-direction:column;text-align:left;
border:1px solid var(--hair-d);background:#fff;overflow:hidden;transition:border-color .35s,transform .45s,box-shadow .45s}
.cntile:hover{border-color:var(--gold-deep);transform:translateY(-4px);box-shadow:0 16px 40px rgba(22,21,15,.13)}
.cntile-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--cream-2)}
.cntile-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.cntile:hover .cntile-img img{transform:scale(1.06)}
.cntile-b{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.cntile-b .tag{font-size:8.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
.cntile-b .nm{font-family:"Barlow Condensed",sans-serif;font-weight:400;font-size:18px;line-height:1.2;
text-transform:uppercase;letter-spacing:.02em;color:var(--dark-txt);margin-top:8px}
.cntile-b .go{margin-top:auto;padding-top:14px;font-size:9px;font-weight:600;letter-spacing:.2em;
text-transform:uppercase;color:var(--dark-dim);transition:color .3s}
.cntile:hover .go{color:var(--gold-deep)}
.cnshow-foot{padding:clamp(24px,2.6vw,36px) clamp(24px,2.6vw,38px)}
@media(prefers-reduced-motion:reduce){.cnrail-track{animation:none;flex-wrap:wrap;width:auto}}
/* --- [FEATURE: SCP member ticker] --- */
.scpx{max-width:var(--max);margin:clamp(6px,1vw,14px) auto 0;padding:0 var(--pad)}
.scpx-view{position:relative;overflow:hidden;border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2);padding:4px 0}
.scpx-view::before,.scpx-view::after{content:"";position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none}
.scpx-view::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.scpx-view::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}
.scpx-track{display:flex;width:max-content;align-items:stretch;animation:afxmarq 46s linear infinite}
/* One fixed box per member, logos in their own colours. Each mark sits on an
identical canvas, so the boxes and the gaps between them are equal whatever
the artwork's proportions. Left in full colour on request; note that a mark
drawn dark for light backgrounds would read poorly here. */
.scpx-item{flex:none;display:flex;align-items:center;justify-content:center;
width:clamp(160px,13vw,210px);height:78px;padding:0 clamp(14px,1.6vw,26px);
border-right:1px solid var(--hair-2)}
.scpx-item img{max-width:100%;max-height:42px;width:auto;height:auto;object-fit:contain;display:block;
opacity:.85;transition:opacity .35s,transform .35s}
.scpx-item:hover img{opacity:1}
/* affiliated ticker: cleaner edges on cream */
.sec.cream .afx-view::before,.sec.cream .afx-view::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.sec.cream .afx-view::before{left:0;background:linear-gradient(90deg,var(--cream),transparent)}
.sec.cream .afx-view::after{right:0;background:linear-gradient(270deg,var(--cream),transparent)}
/* the Circle section, back on its own dark ground */
.circlesec{background:linear-gradient(160deg,#1C1710 0%,#12100D 55%,#0B0A08 100%)}
.circlesec .gridwrap > .partner-band{margin-top:clamp(-15px,-0.85vw,-6px)}
/* the SCP section now sits on the same ground as the services tool section, so
its ticker fades have to blend into that colour rather than --ink */
.sec.raise .scpx-view::before{background:linear-gradient(90deg,#211D17,transparent)}
.sec.raise .scpx-view::after{background:linear-gradient(270deg,#211D17,transparent)}
/* footer Circle block — deliberately the same type size as the rest of the
footer, just with a small mark above it */
.fcircle{margin:2px 0 14px}
.fcircle img{height:44px;width:auto;display:block;margin-bottom:12px;opacity:.85}
.fcircle p{font-size:14px;line-height:1.7;color:var(--dim);margin:0 0 10px;max-width:34ch}
.fcircle-cta{font-size:13px;color:var(--gold);text-decoration:none;transition:opacity .3s}
.fcircle-cta:hover{opacity:.7}
/* The mandates block sat ~162px above "Further services" but only ~84px below
the button above it: this section's bottom padding and the next section's top
padding were stacking. Dropping this one leaves a single gap, so the rhythm
matches on both sides and stays responsive, since both use the same clamp. */
.sec.flush-bot{padding-bottom:0}
/* --- [FEATURE: article video] play control over a YouTube-sourced hero --- */
.art-hero.has-video .fr{position:relative}
.art-hero .fr iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:84px;height:60px;padding:0;border:0;background:none;cursor:pointer;
transition:transform .25s}
.yt-play svg{width:100%;height:100%;display:block}
.yt-play .yt-bg{fill:rgba(18,16,13,.78);transition:fill .25s}
.art-hero.has-video:hover .yt-play{transform:translate(-50%,-50%) scale(1.06)}
.art-hero.has-video:hover .yt-play .yt-bg{fill:var(--gold-deep)}
/* --- [FEATURE: ask widget] ------------------------------------------------
Fixed launcher, bottom right, on every page. The panel holds a clone of the
Services tool, so it asks exactly the same questions and gives exactly the
same answers; .tool-in is forced to one column inside it because the panel is
far narrower than the section it came from. */
.askbtn.hidden{opacity:0;pointer-events:none;transform:translateY(14px)}
/* THE LAUNCHER IS THE COIN ITSELF. assets/ask-coin-v2.png is a gold disc with
the rising-bar mark already on it, so the button carries NO background and NO
border of its own — those would show as a ring of slightly different gold
around the coin's dark rim. They come back only in the .open state, where
the coin is hidden and the cross needs something to sit on. */
.askbtn{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:70;
width:58px;height:58px;border-radius:50%;border:0;padding:0;
background:none;color:#1B1608;cursor:pointer;display:flex;align-items:center;
justify-content:center;
/* a warm halo rather than a flat black shadow: it reads as lit, not stuck on */
box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 22px rgba(255,199,44,.22);
transition:transform .25s,box-shadow .25s}
.askbtn:hover{transform:translateY(-3px);
box-shadow:0 16px 40px rgba(0,0,0,.55),0 0 34px rgba(255,199,44,.42)}
.askbtn img{width:100%;height:100%;object-fit:contain;display:block;border-radius:50%;
/* The BREATHING LIVES ON THE IMG, never on the button. .askbtn.hidden and
:hover both set transform, and an animation on the same element would win
over both — the launcher would refuse to slide away when gated. */
animation:askbreathe 3.4s ease-in-out infinite}
.askbtn:hover img{animation-play-state:paused}
@keyframes askbreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
/* The expanding ring. Drawn OUTSIDE the coin (inset:-3px) so it never crosses
the artwork, and pointer-events:none so it can't eat the click. */
.askbtn::after{content:"";position:absolute;inset:-3px;border-radius:50%;pointer-events:none;
/* a deeper gold than --gold: the launcher floats over cream sections as
well as dark ones, and #FFC72C at this weight all but vanishes on cream */
border:2px solid rgba(226,168,26,.85);animation:askring 2.6s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes askring{0%{transform:scale(1);opacity:.75}60%{opacity:0}100%{transform:scale(1.55);opacity:0}}
/* Stop everything once the panel is open — a pulsing close button is noise —
and whenever the visitor has asked for less motion. */
.askbtn.open::after{animation:none;display:none}
@media(prefers-reduced-motion:reduce){
.askbtn img{animation:none}
.askbtn::after{animation:none;opacity:.5}
}
.askbtn-x{display:none;font-size:26px;line-height:1;font-weight:300}
.askbtn.open{background:var(--gold-grad);border:1px solid rgba(255,199,44,.45)}
.askbtn.open img{display:none}
.askbtn.open .askbtn-x{display:block}
.askpanel{position:fixed;right:clamp(14px,2vw,26px);bottom:calc(clamp(14px,2vw,26px) + 66px);
z-index:70;width:min(420px,calc(100vw - 28px));
/* the header is 140px and the launcher sits ~92px off the bottom, so this
leaves a clear gap between the panel top and the header bar */
max-height:min(720px,calc(100vh - 260px));overflow:auto;
background:#141210;border:1px solid var(--hair);box-shadow:0 24px 60px rgba(0,0,0,.6);
padding:clamp(18px,2vw,24px);opacity:0;transform:translateY(10px);
transition:opacity .28s,transform .28s}
.askpanel.open{opacity:1;transform:none}
.askpanel-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.askpanel-hd h3{font-family:"Barlow Condensed",sans-serif;font-weight:300;text-transform:uppercase;
font-size:24px;line-height:1.1;margin:6px 0 0}
.askpanel-close{background:none;border:0;color:var(--dim);font-size:24px;line-height:1;cursor:pointer;
padding:0 2px;transition:color .25s}
.askpanel-close:hover{color:#fff}
.askpanel-lede{font-size:13px;line-height:1.65;color:var(--dim);margin:12px 0 16px}
.askpanel .tool{border:0;background:none;max-width:none;margin:0}
.askpanel .tool-in{grid-template-columns:1fr}
.askpanel .tool-q{padding:0;border-right:0;border-bottom:1px solid var(--hair-2);padding-bottom:20px}
.askpanel .tool-r{padding:20px 0 0;background:none}
.askpanel .tool-verdict{font-size:24px}
.askpanel .tool-detail{font-size:13.5px;margin-top:16px;min-height:0}
.askpanel .opt{font-size:11.5px;padding:9px 12px}
.askpanel .tool-spec span{font-size:9.5px;padding:6px 9px}
@media(max-width:520px){
.askpanel{max-height:70vh}
.askpanel-hd h3{font-size:21px}
}
@media print{.askbtn,.askpanel{display:none}}
/* --- [FEATURE: is-it-investable tool] --- */
.tool{border:1px solid var(--hair);background:var(--panel);max-width:var(--max);margin:0 auto}
.tool-in{display:grid;grid-template-columns:1fr 1fr;gap:0}
.tool-q{padding:clamp(30px,3.4vw,52px);border-right:1px solid var(--hair-2)}
.tool-step{margin-bottom:30px}
.tool-step:last-child{margin-bottom:0}
.tool-lab{font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.opts{display:flex;flex-wrap:wrap;gap:9px}
.opt{font-size:12px;font-weight:500;letter-spacing:.04em;padding:12px 16px;border:1px solid var(--hair);
background:none;color:var(--dim);cursor:pointer;transition:all .25s;text-align:left}
.opt:hover{border-color:var(--gold);color:#fff}
.opt.sel{background:var(--gold-grad);border-color:transparent;color:#1B1608;font-weight:600}
.tool-r{padding:clamp(30px,3.4vw,52px);display:flex;flex-direction:column;justify-content:center;
background:radial-gradient(120% 120% at 100% 0%,#1A140A 0%,#131110 60%)}
.tool-r .rk{font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--dim-2);margin-bottom:18px}
.tool-verdict{font-family:"Barlow Condensed",sans-serif;font-weight:300;text-transform:uppercase;
font-size:clamp(26px,3vw,42px);line-height:1.05;letter-spacing:.01em;color:#fff;min-height:1.1em}
.tool-verdict em{font-style:normal;color:var(--gold)}
.tool-detail{margin-top:22px;color:var(--dim);font-size:14.5px;line-height:1.75;min-height:3em}
.tool-spec{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px}
.tool-spec span{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
border:1px solid var(--hair);padding:8px 12px;color:var(--dim)}
.tool-spec span b{color:var(--gold);font-weight:600}
.tool-cta{margin-top:30px}
.tool-cta .btn{opacity:.4;pointer-events:none;transition:opacity .3s}
.tool-cta .btn.ready{opacity:1;pointer-events:auto}
@media(max-width:860px){.tool-in{grid-template-columns:1fr}.tool-q{border-right:0;border-bottom:1px solid var(--hair-2)}}
/* --- [FEATURE: affiliations ticker] --- */
.afx{max-width:var(--max);margin:clamp(40px,4.6vw,68px) auto 0;padding:0 var(--pad)}
.afx-head{text-align:center;margin-bottom:24px}
.afx-head span{font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--dim-2)}
.afx-view{position:relative;overflow:hidden;border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2);
padding:6px 0}
.afx-view::before,.afx-view::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.afx-view::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.afx-view::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}
.afx-track{display:flex;width:max-content;align-items:center;animation:afxmarq 42s linear infinite}
@keyframes afxmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Every logo sits in the same fixed box with the same padding, so the marks are
identically sized and evenly spaced whatever their own proportions. */
.afx-item{flex:none;display:flex;align-items:center;justify-content:center;
width:clamp(180px,15vw,232px);height:74px;padding:0 clamp(18px,2vw,30px);
border-right:1px solid var(--hair-2)}
.afx-item img{max-width:100%;max-height:46px;width:auto;height:auto;object-fit:contain;display:block;
filter:grayscale(1) contrast(.9);opacity:.78;transition:filter .35s,opacity .35s}
.afx-item:hover img{filter:none;opacity:1}
/* --- [FEATURE: team section] --- */
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--hair-2);border:1px solid var(--hair-2)}
.member{background:var(--ink);padding:0;display:flex;flex-direction:column;transition:background .35s}
.member:hover{background:var(--panel)}
.member-ph{position:relative;aspect-ratio:1/1;overflow:hidden;
background:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 12px,transparent 12px 24px)}
.member-ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.member:hover .member-ph img{transform:scale(1.06)}
.member-b{padding:clamp(16px,1.5vw,22px);display:flex;flex-direction:column;flex:1}
.member{overflow:hidden}
.member-b .nm{font-family:"Barlow Condensed",sans-serif;font-weight:400;font-size:clamp(17px,1.4vw,21px);
letter-spacing:.02em;text-transform:uppercase;line-height:1.1}
.member-b .nm{min-height:2.1em;display:flex;align-items:flex-end}
.member-b .role{margin-top:8px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
min-height:2.4em;display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.member-b p{margin:12px 0 0;font-size:12.5px;color:var(--dim);line-height:1.6;min-height:11.2em}
.member-b .mlink{display:inline-block;margin-top:auto;padding-top:18px;font-size:9.5px;font-weight:600;letter-spacing:.2em;
text-transform:uppercase;color:var(--dim-2)}
.member-b .mlink:hover{color:var(--gold)}
.memoriam{display:inline-block;margin:0;font-size:8px;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--dim-2);border:1px solid var(--hair);padding:3px 6px;line-height:1}
.member.in-memory .member-ph img{filter:grayscale(1) contrast(.96)}
.member.in-memory .role{color:var(--dim)}
@media(max-width:1200px){.team-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.team-grid{grid-template-columns:1fr}}
.brandlink{display:flex;flex-direction:column;align-items:center;gap:6px;line-height:0}
.brandtag{font-family:"Inter",sans-serif;font-weight:400;font-size:10px;letter-spacing:.22em;
text-transform:uppercase;color:var(--gold);line-height:1;white-space:nowrap;transition:color .3s}
.brandtag{margin-bottom:clamp(6px,0.75vw,11px)}
.brandtag:hover{color:#fff}
@media(max-width:900px){.brandtag{margin-bottom:0}}
@media(max-width:560px){.brandtag{font-size:8.5px;letter-spacing:.18em}}
/* news cards on cream sections */
.sec.cream .ncard{background:#fff;border-color:var(--hair-d)}
.sec.cream .ncard h3{color:var(--dark-txt)}
.sec.cream .ncard p{color:var(--dark-dim)}
.sec.cream .ncard .nmeta,.sec.cream .ncard .nplace,.sec.cream .ncard time{color:var(--dark-dim)}
.sec.cream .ncard:hover{border-color:var(--gold-deep)}
.sec.cream .tlink{color:var(--gold-deep)}
.sec.cream .nbadge{background:var(--gold-grad);color:#1B1608}
/* team cards on cream */
.sec.cream .team-grid{background:var(--hair-d);border-color:var(--hair-d)}
.sec.cream .member{background:#fff}
.sec.cream .member:hover{background:#FBFAF7}
.sec.cream .member-b .nm{color:var(--dark-txt)}
.sec.cream .member-b .role{color:var(--gold-deep)}
.sec.cream .member-b p{color:var(--dark-dim)}
.sec.cream .member-b .mlink{color:var(--dark-dim)}
.sec.cream .member-b .mlink:hover{color:var(--gold-deep)}
.sec.cream .memoriam{color:var(--dark-dim);border-color:var(--hair-d)}
.sec.cream .member.in-memory .role{color:var(--dark-dim)}
/* further-capability cards on cream */
.sec.cream .quiet{background:#fff;border-color:var(--hair-d)}
.sec.cream .quiet .n{color:var(--gold-deep)}
.sec.cream .quiet h3{color:var(--dark-txt)}
.sec.cream .quiet p{color:var(--dark-dim)}
.sec.cream .quiet .chips li{border-color:var(--hair-d);color:var(--dark-dim)}
.shead.tight{padding-bottom:clamp(18px,1.8vw,26px)}
@media(max-width:900px){.qwall{height:190px}}
@media(max-width:560px){.qwall{height:265px}}
.fbot .fscp{color:var(--dim-2);transition:color .3s}
.fbot .fscp:hover{color:var(--gold)}
/* affiliations ticker on cream */
.sec.cream .afx{margin-top:0}
.sec.cream .afx-item{border-right-color:var(--hair-d)}
.sec.cream .afx-item img{opacity:.72}
.sec.cream .afx-item:hover img{opacity:1}
.sec.cream .afx-view{position:relative;-webkit-mask-image:none;mask-image:none;
border-top:1px solid var(--hair-d);border-bottom:1px solid var(--hair-d)}
/* hero slide typography: force 2 lines max, narrower lede */
.slide-inner h1{max-width:none}
.slide-inner .lede{max-width:52ch}
@media(min-width:900px){
.slide-inner h1{font-size:clamp(30px,4.25vw,66px);line-height:1.05;white-space:nowrap;font-weight:600}
.slide-inner .lede{max-width:48%}
}
@media(max-width:1099px){.slide-inner .lede{max-width:60ch}}
/* ---------- hero slide 1 photo (right side, dissolves into the copy) ---------- */
/* Focus point of the photo — tune this one value to re-centre the speaker. */
:root{--hero-photo-pos:50% 50%}
/* per-slide focus point — the only value to touch when re-framing a hero photo */
/* Slide 1 holds the RIGHT edge of the frame: the photo box is taller than
it is wide on desktop, so a landscape picture is cropped hard left and
right and the X value decides which slice survives. 100% keeps the
guests seated along the right-hand tables, who are the point of the
shot. See the README before changing it. */
.hp-meeting{--hero-photo-pos:100% 50%}
.hp-assets{--hero-photo-pos:38% 50%}
.hp-footprint{--hero-photo-pos:50% 52%}
.hero-photo{display:none}
@media(min-width:1100px){
/* hero-in goes static so the photo anchors to .hero itself and its soft
top/bottom fade is never clipped by the hero's max-height */
.hero-in{position:static}
/* THREE LAYERS, ONE MASK EACH — the order matters and is the reason slide 1
can be zoomed at all:
figure .hero-photo vertical fade + overflow:hidden (the clipping box)
picture HORIZONTAL fade (was on the img until 23 Sep 2026)
img the picture itself, free to be transformed
A mask is measured against its OWN element's box, so while the horizontal
fade lived on the img, scaling the img dragged the fade along with it and
the dissolve into the copy came apart. On the fade is pinned to
the box whatever the image inside it does. Two single-layer masks on
separate elements still multiply naturally, so no mask-composite. */
.hero-photo{display:block;position:absolute;z-index:-1;margin:0;pointer-events:none;overflow:hidden;
top:0;bottom:0;left:44%;right:0;
-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 17%,#000 76%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0%,#000 17%,#000 76%,transparent 100%)}
.hero-photo picture{
-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 12%,rgba(0,0,0,.32) 24%,rgba(0,0,0,.68) 38%,rgba(0,0,0,.9) 50%,#000 62%,#000 93%,rgba(0,0,0,.5) 100%);
mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 12%,rgba(0,0,0,.32) 24%,rgba(0,0,0,.68) 38%,rgba(0,0,0,.9) 50%,#000 62%,#000 93%,rgba(0,0,0,.5) 100%)}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover;
object-position:var(--hero-photo-pos);
/* Much lighter treatment than before (was grayscale .34 / brightness .72 /
saturate .82, which read as grainy old film). Near the photograph's own
colours; the hero-mesh grid lines sit above it and are untouched. */
filter:grayscale(.06) contrast(1.01) brightness(.88) saturate(.98)}
/* SLIDE 1 IS ZOOMED, ANCHORED TO THE RIGHT EDGE — and the amount is set by
fitHeroZoom() in the script, not here. The values below are the fallback
for the moment before it runs and for a browser with JS off.
WHY IT CANNOT BE A CSS BREAKPOINT, learned the hard way over three
rounds: how much of the photo is visible depends on the BOX'S ASPECT
RATIO, and the box is 56vw wide by the hero's height — so it changes with
the window's HEIGHT as much as its width. Two people at "1990 wide" saw
completely different crops because one had a taller window, and a
width-only @media query cannot see that. Worse, browser zoom and OS
scaling mean the CSS width is not the pixel width: a 2000px-wide
screenshot at 125% is a 1592px viewport, which was landing on the
smallest step while being tuned on the largest.
The script measures the box and solves for the scale instead. Do not put
the breakpoints back. */
.hp-meeting img{transform:scale(1.55);transform-origin:100% 39%}
.hp-meeting picture{
-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 9%,rgba(0,0,0,.44) 18%,rgba(0,0,0,.78) 28%,rgba(0,0,0,.94) 34%,#000 40%,#000 93%,rgba(0,0,0,.55) 100%);
mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 9%,rgba(0,0,0,.44) 18%,rgba(0,0,0,.78) 28%,rgba(0,0,0,.94) 34%,#000 40%,#000 93%,rgba(0,0,0,.55) 100%)}
/* warm tint only — never an opaque wash, or the box edge shows as a seam */
.hero-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(105% 90% at 72% 28%,rgba(255,199,44,.13) 0%,rgba(255,199,44,.04) 44%,rgba(255,199,44,0) 70%)}
}
.cta h2.cta-2l{max-width:none}
/* home service tiles as links */
.tiles .tile{position:relative}
.tile h3{margin:30px 0 0;min-height:2.5em;font-size:clamp(17px,1.45vw,22px);line-height:1.22;
display:block;white-space:nowrap}
.tile-go{margin-top:auto;padding-top:22px;font-size:9.5px;font-weight:600;letter-spacing:.2em;
text-transform:uppercase;color:var(--dim-2);transition:color .3s}
/* CTA button sits on a hairline so the card still reads as three bands */
.tile-btn{align-self:flex-start;margin-top:auto;padding:14px 24px;font-size:10px}
.tiles .tile h3{padding-bottom:clamp(20px,2.2vw,30px);border-bottom:1px solid var(--hair-d)}
.tile-btn .ar{display:inline-block;margin-left:-4px;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.tile:hover .tile-btn .ar{transform:translateX(5px)}
/* --- home service tiles: whole card is the link --- */
.sec.cream .tile{background:#fff;border:1px solid var(--hair-d);position:relative;overflow:hidden;
padding:clamp(24px,2.5vw,34px);
transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s,border-color .35s}
.sec.cream .tile::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;
background:var(--gold-grad);transform:scaleX(.18);transform-origin:left;
transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.sec.cream .tile:hover{border-color:var(--gold-deep);transform:translateY(-5px);
box-shadow:0 18px 44px rgba(22,21,15,.13)}
.sec.cream .tile:hover::before{transform:scaleX(1)}
/* oversized ghost numeral, the same device the rest of the site uses for rhythm */
.t-num{position:absolute;top:clamp(4px,.7vw,10px);right:clamp(12px,1.4vw,20px);
font-family:"Barlow Condensed",sans-serif;font-weight:600;line-height:.9;
font-size:clamp(58px,6vw,92px);color:var(--gold-deep);opacity:.11;pointer-events:none;
transition:opacity .45s}
.sec.cream .tile:hover .t-num{opacity:.2}
/* the step name now matches the ghost numeral above it, and the sentence under
it matches a section lede rather than being a heading in its own right */
.sec.cream .tile .k{position:relative;z-index:1;
font-family:"Barlow Condensed",sans-serif;font-weight:600;line-height:.9;
font-size:clamp(26px,2.4vw,38px);letter-spacing:.02em;text-transform:uppercase;
color:var(--gold-deep);margin-bottom:auto}
.sec.cream .tiles .tile h3{font-family:"Inter",sans-serif;
font-size:clamp(15px,1.1vw,17px);line-height:1.85;font-weight:300;
color:var(--dark-dim);letter-spacing:0;text-transform:none}
.sec.cream .tile h3{color:var(--dark-txt)}
.sec.cream .tile .k{color:var(--gold-deep)}
.sec.cream .tile-go{color:var(--dark-dim)}
/* recent news band (dark) */
.sec.newsdark{background:linear-gradient(180deg,#151210 0%,#0C0B09 100%);border-bottom:1px solid var(--hair-2)}
/* ecosystem anchor offset so the heading clears the fixed header */
.tiles .tile h3{margin:26px 0 0;font-size:clamp(15px,1.5vw,20.5px);line-height:1.2;white-space:nowrap;min-height:2.5em}
@media(max-width:1060px){.tiles .tile h3{font-size:clamp(15px,2.05vw,22px)}}
@media(max-width:560px){.tiles .tile h3{font-size:18px}}
@media(max-width:400px){.tiles .tile h3{font-size:15px}}
@media(max-width:370px){.tiles .tile h3{font-size:13.5px}}
.cta-in > div:first-child{flex:1 1 auto;min-width:0}
.cta-in > .btn{flex:0 0 auto}
@media(min-width:900px){.cta h2{white-space:nowrap;font-size:clamp(24px,2.75vw,44px)}}
@media(max-width:899px){.cta-in > div:first-child{flex:1 1 100%}}
:root{--chrome:199px}
@media(max-width:900px){:root{--chrome:123px}}
/* keep hero + live wire within the first screen */
.hero{max-height:calc(100svh - var(--chrome))}
.hero-in{max-height:100%}
@media(max-width:900px){
.hero{min-height:calc(100svh - 128px);max-height:none;padding:clamp(18px,3vh,34px) 0}
.slide-inner h1{font-size:clamp(28px,7.6vw,40px);line-height:1.06}
.hero .lede{font-size:14px;line-height:1.7;margin-top:10px}
.hero-cta{margin-top:18px!important;gap:10px 16px}
.hero-foot{display:none}
}
.hero-in{width:100%}
.hero .lede{margin-top:12px}
.hero-cta{margin-top:26px!important}
/* unified display scale */
.phead h1{font-size:clamp(34px,4.25vw,66px);line-height:1.05;font-weight:600}
.cta h2{font-size:clamp(26px,4.05vw,58px)!important;line-height:1.06}
@media(min-width:900px){.cta h2{white-space:nowrap}}
.tiles .tile{display:flex;flex-direction:column}
.sec.cream .tiles{gap:clamp(9px,1vw,15px);background:none;border:0;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1060px){.sec.cream .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.sec.cream .tiles{grid-template-columns:minmax(0,1fr)}}
.tiles .tile h3{margin-bottom:clamp(22px,2.4vw,32px)}
.tiles .tile{min-height:292px}
.hero h1,.slide-inner h1{font-weight:600}
/* Kept LAST in the stylesheet on purpose: several of these override rules
declared further up (.hero-photo display, .team-grid gap, .askbtn shadow)
and at equal specificity the later declaration is the one that wins. */
/* --- [FEATURE: mobile polish] ------------------------------------------- */
@media(max-width:900px){
/* 1. .hnav is display:none on mobile, so padding on IT did nothing — the bar
is only the logo and the tagline, and the space has to go on .hwrap */
.hwrap{padding-top:16px;padding-bottom:14px}
/* 2. The band of dead space under the header was .hero-in's OWN top padding
(64px) sitting on top of the hero's. The hero keeps a little, .hero-in
gets none, and the breathing room moves to the bottom — between the
buttons and the Live Wire, where it reads as deliberate. */
/* Symmetric: the space above the eyebrow and the space below the buttons are
the same clamp, so the band of photograph at the top is matched by an equal
band at the foot before the Live Wire. The section grows and pushes the
Live Wire down, which is intended. */
.hero{min-height:0;padding:clamp(78px,13vh,132px) 0}
.hero-in{padding-top:0;padding-bottom:0}
/* 3. The button row sits at the same height on all three slides. That needs
the copy above it to occupy the same space, so the headline is reserved
at four lines and the lede at five — the longest each runs to. On a
slide with shorter copy the slack falls below the text inside those
boxes, which is the unavoidable cost of aligning the buttons: the copy
cannot be both evenly spaced AND end at the same point when it runs to
different lengths. */
.slides{align-items:stretch}
.slide{height:100%}
.slide-inner{min-height:0;height:100%;display:flex;flex-direction:column;justify-content:flex-start}
.slide-inner h1{min-height:4.24em}
.hero .lede{min-height:8.5em}
/* The two actions stay side by side: trimmed and never wrapping, so every
slide's action row is exactly one line tall. */
.hero-actions{position:static;margin-top:30px!important;flex-wrap:nowrap;gap:14px}
.hero-actions .btn{padding:13px 18px;font-size:10px;letter-spacing:.16em;white-space:nowrap}
.hero-actions .tlink{font-size:10px;letter-spacing:.14em;white-space:nowrap}
/* On a narrow screen the frame is cropped hard on both sides, and at the
desktop focus point the speaker fell behind the headline. Pulling the
window left brings his face to about 62% across — visible, and clear of
the type. Mobile only; the desktop crop is unchanged. */
.hp-meeting{--hero-photo-pos:18% 38%}
/* The figure is positioned against .hero-in, NOT .hero — and .hero-in starts
110px below the header because of the hero's top padding. A small negative
offset therefore left a band with no picture in it. These values overshoot
the hero in both directions on purpose; .hero has overflow:hidden, so the
excess is clipped and the frame is guaranteed to run edge to edge whatever
the copy length does to the height. Overshooting also scales the image up,
which is the "bigger" part of the ask. */
.hero-photo{display:block;position:absolute;left:0;right:0;top:-45%;z-index:-1;margin:0;
pointer-events:none;overflow:hidden;width:100%;height:190%}
/* Back to the original treatment: the photograph is a suggestion behind the
copy, faded out top and bottom, not a picture the copy sits on top of. */
.hero-photo::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,rgba(10,9,7,.72),rgba(10,9,7,.34) 70%,rgba(10,9,7,.55))}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-photo-pos,50% 45%);
/* held well back so the headline keeps its contrast on a small screen */
opacity:.22;
/* The old mask faded IN at 22%, which is what made the picture appear to
start abruptly partway down. It is now opaque from the top edge and only
fades out at the foot, so the image runs right up under the header. */
/* The fade is placed against the ELEMENT, which now runs well past the
hero, so it has to sit late enough to land near the hero's own foot. */
-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 80%,transparent 96%);
mask-image:linear-gradient(180deg,#000 0%,#000 80%,transparent 96%)}
/* 3. the copyright line reads better centred than split across the width */
.fbot{justify-content:center;text-align:center;gap:8px 18px}
/* 4. the team boxes are separated instead of sharing hairlines, and the
description no longer reserves eleven lines of height */
/* .sec.cream .team-grid sets a grey background further up and outranks a bare
.team-grid rule, so the "gap" showed as a grey band rather than the page */
.team-grid,.sec.cream .team-grid{gap:12px;background:none;border:0}
.member{border:1px solid var(--hair-2)}
.sec.cream .member{border-color:var(--hair-d)}
.member-b p{min-height:0;margin-bottom:0}
.member-b .mlink{padding-top:14px}
/* 5. the drop shadow read as a grey halo on a dark screen */
.askbtn{box-shadow:0 4px 14px rgba(0,0,0,.30)}
.askbtn:hover{box-shadow:0 6px 18px rgba(0,0,0,.36)}
}
/* --- [FEATURE: mobile polish] activity map ------------------------------- */
@media(max-width:900px){
/* the three figures share one row rather than dropping "6 Continents" onto
its own line: a fixed three-column grid with the labels stacked under the
numerals, so the longest label no longer decides the layout */
.mapstats{display:grid;grid-template-columns:repeat(3,1fr);gap:0 6px;align-items:start}
.ms-cell{flex-direction:column;align-items:center;gap:2px;text-align:center}
.ms-n{font-size:clamp(24px,7vw,34px)}
.ms-l{font-size:8px;letter-spacing:.1em;line-height:1.3}
/* clear of the category buttons, and quieter */
.map-hint{margin-top:18px;font-size:9.5px;line-height:1.7}
}
/* --- [FEATURE: map contrast] mobile and desktop -------------------------- */
/* Only the drawing area is lifted — a neutral charcoal, not the frame and not
yellow. The land is raised a step so it still separates from that ground. */
.mapsec .worldmap svg{background:#1C1A17}
.mapsec .wm-land{fill:#4A443A;stroke:#5C5548}
/* coastlines stay hairline at any zoom */
.wm-land{vector-effect:non-scaling-stroke;stroke-width:.8}
/* --- [FEATURE: iOS text inflation] -------------------------------------- */
/* Safari on iPhone "autosizes" text it judges too small inside wide blocks.
The Live Wire track is width:max-content, i.e. very wide, and Safari picked
out individual headlines to enlarge — the CSS size was identical on every
item. Pinning the adjustment to 100% stops it site-wide. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* --- [FEATURE: mobile hero, no lede] ------------------------------------- */
/* Kept LAST, after the mobile-polish block, so it wins at equal specificity. */
.hero-actions .m-only{display:none}
.m-br{display:none}
/* map zoom buttons */
.worldmap{position:relative}
.wm-zoom{position:absolute;right:8px;bottom:8px;z-index:4;display:flex;flex-direction:column;gap:4px}
.wm-zoom button{width:30px;height:30px;background:rgba(10,9,7,.82);border:1px solid var(--hair-2);
color:var(--gold);font:500 18px/1 "Inter",sans-serif;cursor:pointer;padding:0}
.wm-zoom button:hover{border-color:var(--gold)}
.worldmap.is-zoomed svg{cursor:grab}
.worldmap svg.is-dragging{cursor:grabbing}
/* brighter markers: a thinner dark rim lets more of each colour show, and the
multi-city ring is heavier */
.wm-dot .wm-core{stroke-width:.6}
.wm-dot.is-multi .wm-core{stroke-width:1.9;fill:#141210}
/* hero photos are : mobile gets its own file (hero-*-m.jpg) */
.hero-photo picture{display:block;width:100%;height:100%}
@media(max-width:900px){
/* The explanatory paragraph is gone on mobile; eyebrow, headline and buttons
sit as one group. Every headline is two lines on mobile (slide 2 loses
"Catalogues"), reserved at 2.08em so the buttons line up exactly. */
.hero .lede{display:none}
.hero .eyebrow{margin:0 0 14px}
.slide-inner h1{font-size:min(calc((100vw - 2 * var(--pad)) / 9.6),48px);line-height:1.04;
min-height:2.08em;margin:0;white-space:nowrap}
/* Sized from the text column so "SUPERCARS, YACHTS, ART," just fits one line
at every phone width (36.5px at 390); the first line may not wrap, the
gold second line may, so slide 2 is three lines and never four. */
.slide-inner h1 em{white-space:normal}
.hero-actions .m-only{display:inline-flex}
/* With History published (INCLUDE_HISTORY=1) slide 3 would carry three
actions and the row overruns 360px; on a phone "Our history" gives way to
Activity map. It is still in the menu. */
.hero-actions .m-only ~ a[href="/history"]{display:none}
/* FULL-SCREEN HERO. Hero + Live ticker fill the first screen exactly, so the
ticker is the last thing seen before scrolling. --hero-fill is header +
ticker height, measured by fitHero() in the script (132px fallback). svh
= the viewport with the browser bars showing, so nothing is hidden. */
.hero{height:calc(100svh - var(--hero-fill,132px));min-height:420px;
padding:clamp(28px,4.5vh,44px) 0 clamp(30px,5vh,48px);align-items:stretch}
.hero-in{position:static;display:flex;flex-direction:column}
.slides{flex:1 1 auto}
/* titles at the top of the slide, buttons at the foot, photo between */
.slide-inner{justify-content:flex-start}
.hero-actions{margin-top:auto!important}
/* PHOTO IN THE MIDDLE BAND of the slide, between titles and buttons, faded
in at the top and out at the bottom. .hero-in is static, so the figure is
positioned against .hero (position:relative, overflow:hidden). */
/* Fixed shape (width / 1.11) rather than a share of the hero's height: the
hero's height changes with every phone's browser bars, and a height-based
box cropped the same photo differently on each. The band is centred a
little below the middle, between the titles and the buttons. */
.hero-photo{top:calc(50% + 20px - min(45vw,32%));height:min(90vw,64%);bottom:auto;left:0;right:0;width:auto;
-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 80%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 80%,transparent 100%)}
.hero-photo img{opacity:.78;filter:none;-webkit-mask-image:none;mask-image:none}
/* lighter scrim than before: the photo was the thing that could not be seen */
.hero-photo::after{background:linear-gradient(90deg,rgba(10,9,7,.34),rgba(10,9,7,.10) 70%,rgba(10,9,7,.26))}
.hp-meeting,.hp-assets,.hp-footprint{--hero-photo-pos:50% 50%}
/* per-slide framing on mobile: object-position picks the crop, the scale
zooms in about the same point */
/* slide 1: crop from the right, onto the seated guests, less empty room left of the speaker */
.hp-meeting{--hero-photo-pos:100% 50%}
/* zoom anchored top-right: the guests on the right stay whole, the empty
room left of the speaker and the empty chairs at the foot are cut */
.hp-meeting img{transform:scale(1.34);transform-origin:100% 84%}
/* a shorter, wider band for slide 1 so the crop is less tall: the speaker
stays in, the empty chairs at the foot drop out */
/* slide 3: zoomed onto the group, cutting the wall and ceiling */
.hp-footprint{--hero-photo-pos:76% 70%}
.hp-footprint img{transform:scale(1.25);transform-origin:50% 76%}
/* "UNLOCK INSTITUTIONAL INVESTMENTS" measured 323px at 11px/.3em with the
real Inter — over a 360px screen's 320px column. Tighter tracking and a
size that shrinks with the column keep every eyebrow on one line. */
.hero .eyebrow{white-space:nowrap;letter-spacing:.22em;
font-size:min(11px,calc((100vw - 2 * var(--pad)) / 28))}
/* home service tiles: step names match the Services page title (34px),
ghost numerals scaled up with them */
.sec.cream .tile .k{font-size:34px}
.t-num{font-size:84px}
/* slide 2: crop from the right so the silhouette and the Ferrari carry it */
.hp-assets{--hero-photo-pos:86% 50%}
/* tiles: copy, rule and button sit under the step name instead of being
pushed down by the desktop min-height */
.tiles .tile{min-height:0}
.sec.cream .tile .k{margin-bottom:0}
.tiles .tile h3{margin-top:16px;min-height:0}
.m-br{display:inline}
/* map: the city panel below the map carries the detail on a phone, so the
floating tooltip is not shown at all */
.map-tip{display:none!important}
/* "Catalogues" is dropped on mobile so slide 2 fits two lines like the others */
.d-only{display:none}
/* the ticker label reads "Live" on a phone */
.tk-wire{display:none}
}
/* --- [FEATURE: static pages] --------------------------------------------
Rules used ONLY by the pages og-stubs.py generates into publish/ — the
real-URL version of each route and each news release. Nothing in the app
carries .staticpage, so these are inert here; they live in this stylesheet
because the build lifts the whole