/* all.css = site.css + wp.css, generated by build/css.mjs. Edit the sources, not this file. */
/* ============================================================
MAFAR GROUP ยท Homepage v3.0 (layout from mafar-draft1)
Palette from mafar.com.my, TASA Explorer, GSAP motion. Creative Streaks.
============================================================ */
:root{
--cream:#F8F5EF; --cream-2:#EFE9DC; --cream-3:#E4DCC9; --cream-4:#F3F0E8;
--teal:#0F4D4A; --teal-2:#0B3B39; --teal-3:#135E5A;
--gold:#C8A46A; --gold-2:#DCC49A; --gold-ink:#7F5F2E;
--navy:#1A2632; --ink:#26313D; --ink-2:#5B6672;
--line:rgba(38,49,61,.10); --line-l:rgba(248,245,239,.14);
--hc:#00A14B; --ac:#FF0077; --tc:#1C75BC; --mc:#E50914;
--font:'TASA Explorer',system-ui,-apple-system,'Segoe UI',sans-serif;
--font-num:'Geist','TASA Explorer',system-ui,sans-serif; /* numbers only: stats, cascade, counters, ghost digits */
--ease:cubic-bezier(.18,.86,.28,1); --ease-2:cubic-bezier(.65,0,.35,1);
--r:28px; --rx:40px; --rm:22px; --rs:15px; --rp:10px; --rpi:5px; /* corner radii: large card, hero, medium card, small chip; overridden by Theme settings > Corner style */
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%} /* smooth scrolling is done in app.js; the CSS version fights ScrollTrigger pinning */
body{font-family:var(--font);background:var(--cream);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
svg{display:block}
::selection{background:var(--gold);color:var(--navy)}
.wrap{width:min(1240px,calc(100% - 48px));margin-inline:auto}
.sec{position:relative;padding:clamp(80px,9vw,130px) 0}
.dark{background:var(--teal);color:var(--cream)}
.center{text-align:center}
.center .h-l,.center .lead{margin-inline:auto}
/* type */
h1,h2,h3,h4{font-weight:700;letter-spacing:-.03em;line-height:1.04;text-wrap:balance}
.h-xl{font-size:clamp(40px,5.6vw,80px)}
.h-l{font-size:clamp(32px,4.2vw,58px)}
.lead{font-size:clamp(16px,1.25vw,19px);color:var(--ink-2);line-height:1.55;max-width:60ch;text-wrap:pretty}
.dark .lead{color:rgba(248,245,239,.75)}
.gold{color:var(--gold)}
.lbl{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:rgba(200,164,106,.14);color:var(--gold-ink);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px}
.lbl svg{width:15px;height:15px;fill:var(--gold)}
.dark .lbl,.lbl.on-dark{background:transparent;border:1px solid rgba(200,164,106,.55);color:var(--gold-2)}
/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 26px;border-radius:999px;font-weight:600;font-size:15px;background:var(--teal);color:var(--cream);white-space:nowrap;transition:background .3s,color .3s;will-change:transform}
.btn svg{box-sizing:border-box;width:30px;height:30px;padding:7px;border-radius:50%;background:var(--cream);color:var(--teal);flex:0 0 auto;transition:transform .5s var(--ease)}
.btn:has(svg){padding-right:12px}
.btn:hover svg{transform:translateX(4px)}
.btn.gold{background:var(--gold);color:#fff;overflow:hidden}
.btn.gold svg{background:#fff;color:var(--gold)}
.btn.gold::after{content:"";position:absolute;top:-20%;left:-70%;width:45%;height:140%;background:linear-gradient(110deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);transform:skewX(-18deg);animation:btn-shine 4s ease-in-out infinite;pointer-events:none}
@keyframes btn-shine{0%,55%{left:-70%}100%{left:140%}}
.btn.gold:hover{background:#b8935a}
.btn.line{background:transparent;color:var(--teal);box-shadow:inset 0 0 0 1.5px var(--teal)}
.btn.line svg{background:var(--teal);color:#fff}
.btn.line:hover{background:rgba(15,77,74,.06)}
.btn.sm{height:44px;padding:0 20px;font-size:14px}
/* preloader: the four arms fly in and lock into the mark, a gold bar fills, then the curtain lifts */
.pre{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--teal-2);color:var(--cream);transition:transform .6s cubic-bezier(.76,0,.24,1),visibility .6s}
.pre.out{transform:translateY(-101%);visibility:hidden}
/* safety net: if the JS bundle is slow (2G/3G), the curtain lifts by itself at 2.4s so the hero is never held hostage */
.pre{animation:pre-auto .6s cubic-bezier(.76,0,.24,1) 1.2s forwards}
@keyframes pre-auto{to{transform:translateY(-101%);visibility:hidden}}
.pre-mark{display:flex;flex-direction:column;align-items:center;gap:18px}
.pre-mark svg{width:92px;height:92px;fill:var(--gold);overflow:visible}
.pre-arm{transform-box:view-box;transform-origin:50px 50px;opacity:0;transform:rotate(var(--rot)) translate(26px,34px) scale(.6);animation:pre-in .9s var(--ease) forwards}
.pre-arm:nth-child(2){animation-delay:.08s}.pre-arm:nth-child(3){animation-delay:.16s}.pre-arm:nth-child(4){animation-delay:.24s}
@keyframes pre-in{to{opacity:1;transform:rotate(var(--rot)) translate(0,0) scale(1)}}
.pre-word{font-size:13px;font-weight:700;letter-spacing:.42em;text-transform:uppercase;opacity:0;animation:pre-fade .6s ease .55s forwards}
@keyframes pre-fade{to{opacity:.9}}
.pre-bar{position:absolute;left:50%;bottom:14vh;width:120px;height:2px;margin-left:-60px;background:rgba(248,245,239,.15);overflow:hidden;border-radius:2px}
.pre-bar i{position:absolute;inset:0;background:var(--gold);transform-origin:0 50%;transform:scaleX(0);transition:transform .35s var(--ease)}
html.pre-on{overflow:hidden}
html.pre-on .hero-in,html.pre-on .hero-stage{visibility:hidden}
@media (prefers-reduced-motion:reduce){.pre{display:none}}
/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;color:var(--ink);transition:padding .45s var(--ease)}
.nav.scrolled{padding:10px 0}
.nav .wrap{width:min(1400px,calc(100% - 40px))}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 12px 10px 28px;border-radius:999px;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 10px 40px rgba(6,40,38,.16),0 1px 0 rgba(255,255,255,.6) inset;transition:padding .45s var(--ease),box-shadow .45s}
.nav.scrolled .nav-in{padding:6px 8px 6px 24px;box-shadow:0 8px 30px rgba(6,40,38,.2)}
.nav-cta .navcta{height:46px}
.brand{display:inline-flex;align-items:center;color:var(--teal)}
.brand .lock{width:128px;height:40px;fill:currentColor}
.nav-links{display:flex;gap:2px}
.nav-links a{padding:9px 13px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);transition:background .3s}
.nav-links a:hover{background:rgba(15,77,74,.07)}
.nav-dd{position:relative}
.nav-dd-btn{display:inline-flex;align-items:center;gap:6px}
.nav-dd-btn svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.nav-dd.open .nav-dd-btn svg{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;top:calc(100% + 18px);left:0;min-width:270px;padding:10px 0;background:#fff;border-radius:var(--rs);box-shadow:0 18px 50px rgba(15,77,74,.16),0 2px 8px rgba(15,77,74,.06);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.nav-dd-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-dd.open .nav-dd-menu{opacity:1;visibility:visible;transform:none}
.nav-links .nav-dd-menu a{display:block;padding:12px 24px;border-radius:0;font-size:17px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink)}
.nav-links .nav-dd-menu a:hover{background:rgba(15,77,74,.06);color:var(--teal)}
.nav-cta{display:flex;align-items:center;gap:10px}
.burger{display:none;width:46px;height:46px;border-radius:50%;place-items:center;border:1px solid currentColor;color:var(--teal)}
.burger svg{width:20px;height:20px}
.bl-arm{transform-box:view-box;transform-origin:50px 50px;opacity:0;transform:rotate(var(--rot)) translate(9px,14px);animation:bl-in .8s var(--ease) var(--bd,0s) forwards}
.bl-word{opacity:0;animation:bl-fade .7s ease .62s forwards}
@keyframes bl-in{to{opacity:1;transform:rotate(var(--rot)) translate(0,0)}}
@keyframes bl-fade{to{opacity:1}}
.menu{position:fixed;inset:0;z-index:99;background:var(--teal);color:var(--cream);display:flex;flex-direction:column;justify-content:center;padding:0 28px;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.menu-list{margin-top:72px;max-height:calc(100svh - 210px);overflow:auto;display:flex;flex-direction:column;gap:2px}
.menu-subs{display:flex;flex-direction:column;padding:2px 0 10px}
.menu a.big.sub{font-size:clamp(15px,4vw,18px);font-weight:500;letter-spacing:0;padding:5px 0 5px 14px;border-bottom:0;opacity:.85}
.menu a.big{font-size:clamp(20px,5.6vw,28px);font-weight:700;letter-spacing:-.02em;padding:9px 0 7px;border-bottom:1px solid var(--line-l);transform:translateY(16px);opacity:0;transition:.6s var(--ease)}
.menu .btn{margin-top:20px;align-self:flex-start}
body.menu-open{overflow:hidden}
body.menu-open .menu{opacity:1;visibility:visible}
body.menu-open .menu a.big{transform:none;opacity:1}
body.menu-open .menu a.big.sub{opacity:.85}
body.menu-open .nav-in{background:transparent;box-shadow:none}
body.menu-open .nav .brand,body.menu-open .burger{color:var(--cream)!important}
body.menu-open .burger .i-menu{display:none}
.burger .i-x{display:none}
body.menu-open .burger .i-x{display:block}
/* 01 hero */
.hero{padding:clamp(150px,18vh,200px) 0 0;position:relative;overflow:hidden;background:var(--teal-2);color:var(--cream)}
.hero-bg{position:absolute;inset:0;pointer-events:none;background:#01433F center top / 1440px auto repeat-x;overflow:hidden}
/* the tile is a real ![]()
so the browser treats it as the LCP candidate and fetches it first; CSS repeats it sideways */
.hero-bg-img{position:absolute;left:50%;top:0;width:1440px;height:auto;transform:translateX(-50%);max-width:none}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(248,245,239,0) 58%,rgba(248,245,239,.7) 86%,var(--cream) 100%)}
.hero-in{text-align:center;position:relative}
.hero-h{color:var(--cream);max-width:18ch;margin:0 auto}
.hero-h .mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .04em .08em;margin:0 -.04em -.08em}
.hmark{display:inline-block;width:.78em;height:.78em;vertical-align:-.06em;margin:0 .06em}
.hmark svg{width:100%;height:100%;fill:var(--gold)}
.hero-sub{margin:22px auto 0;max-width:52ch;font-size:clamp(16px,1.3vw,20px);color:rgba(248,245,239,.88)}
.hero-sub b,.hero-sub strong{color:#fff}
.hero-cta{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.hero .btn.line{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(248,245,239,.7)}
.hero .btn.line svg{background:#fff;color:var(--teal)}
.hero .btn.line:hover{background:rgba(248,245,239,.1)}
.hero-stage{position:relative;width:min(1560px,calc(100% - 48px));margin:clamp(16px,3vw,40px) auto 0}
.strip.hero-strip{--k:1;position:absolute;left:50%;top:-14%;width:140vw;transform:translateX(-50%);--r:1250px;--w:calc(540px * var(--k));--ar:4/3;--fade:68;height:calc(600px * var(--k));margin:0;perspective:calc(1100px * var(--k));perspective-origin:50% 58%;-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 50%,transparent 100%)}
.strip.hero-strip .sph{top:4%}
.strip-flat .sph{top:0;transform-origin:50% 50%;backface-visibility:visible}
@media(min-width:1900px){.strip.hero-strip{--k:1.2;--r:1490px}}
@media(max-width:1300px){.strip.hero-strip{--k:.8;--r:1005px}}
@media(max-width:1000px){.strip.hero-strip{--k:.62;--r:910px;--w:390px}}
.strip.hero-strip .sph{top:8%}
.strip-dim .sph{opacity:.9;border-radius:var(--rm)}
.strip-dim .sph::after{content:"";position:absolute;inset:0;background:rgba(15,77,74,.5)}
.strip-dim .sph img{filter:saturate(.75)}
.hero-scroll{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:2px;margin:6px auto 0;padding-bottom:16px;color:var(--teal);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.hero+.sec{padding-top:clamp(36px,4vw,64px)}
.hero-scroll svg{width:14px;height:14px;animation:hs-bob 1.8s ease-in-out infinite}
@keyframes hs-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.hero-people{position:relative;display:block;width:100%;height:auto;aspect-ratio:1529/603;z-index:1;--pm:linear-gradient(180deg,#000 82%,transparent 100%),linear-gradient(90deg,transparent 0,#000 1.5%,#000 98.5%,transparent 100%);-webkit-mask-image:var(--pm);mask-image:var(--pm);-webkit-mask-composite:source-in;mask-composite:intersect}
/* 02 story */
.story{padding-bottom:0;overflow:hidden}
.story-title{text-align:center;margin-bottom:clamp(60px,7vw,100px)}
.story-title .were{display:block;font-size:clamp(22px,2.2vw,30px);font-weight:600;color:var(--teal);letter-spacing:-.01em;margin-bottom:10px}
.wordmark{width:min(70vw,420px);margin:0 auto;fill:var(--teal)}
.sp{font-size:clamp(26px,2.9vw,50px);font-weight:600;letter-spacing:-.015em;line-height:1.32;color:var(--teal);max-width:26ch;margin-bottom:clamp(60px,7vw,100px);text-wrap:pretty}
.sp em{font-style:normal;color:var(--gold-ink)}
.sp .w{display:inline-block}
.sp .ipic{position:relative;display:inline-block;width:0;height:.92em;border-radius:999px;overflow:hidden;vertical-align:-.14em;margin:0 .06em;background:var(--cream-2);will-change:width}
.sp .ipic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp .schip{display:inline-flex;align-items:center;gap:.3em;height:1.34em;padding:0 .55em 0 .42em;border-radius:999px;border:1.5px solid rgba(200,164,106,.65);background:rgba(200,164,106,.09);color:var(--gold-ink);font-size:.82em;font-weight:600;letter-spacing:-.01em;vertical-align:.02em;margin:0 .04em;white-space:nowrap;line-height:1}
.sp .schip svg{width:.92em;height:.92em;stroke:var(--gold-ink);flex:none}
.sp .schip.mk svg{fill:var(--gold);stroke:none}
.sp.p2{margin-left:auto;text-align:right}
.srow{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:40px;margin-bottom:clamp(64px,8vw,130px)}
.srow .sp{margin-bottom:0}
.srow.r2{grid-template-columns:.9fr 1.1fr}
.spf{position:relative;height:clamp(240px,26vw,360px);margin:0}
.spf-card{position:absolute;width:clamp(232px,20vw,290px);padding:8px;background:#fff;border-radius:var(--rp);box-shadow:0 24px 50px rgba(15,77,74,.16);will-change:transform}
.spf-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--rpi)}
.spf-card .ph{position:relative;display:block;border-radius:var(--rpi);overflow:hidden}
.spf-card .ph img{border-radius:0}
.spf-card.gen .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,77,74,0) 40%,rgba(15,77,74,.62) 100%),radial-gradient(70% 55% at 100% 0%,rgba(200,164,106,.35),rgba(200,164,106,0) 70%);mix-blend-mode:multiply;pointer-events:none}
.spf-card.gen .ph::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(220,196,154,.16),rgba(220,196,154,0) 55%);pointer-events:none;z-index:1}
.spf-card.pat .ph::before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 160%22 width=%22160%22 height=%22160%22%3E%3Cg fill=%22none%22 stroke=%22%23F8F5EF%22 stroke-width=%221.4%22 stroke-linejoin=%22round%22 transform=%22translate%2830 30%29%22%3E%3Cpolygon points=%2229.24,0.06 55.96,26.53 55.75,27.00 50.06,32.79 37.91,21.00 37.67,37.85 8.26,37.85 0.00,29.42 29.12,29.30%22 transform=%22rotate%280 50 50%29%22/%3E%3Cpolygon points=%2229.24,0.06 55.96,26.53 55.75,27.00 50.06,32.79 37.91,21.00 37.67,37.85 8.26,37.85 0.00,29.42 29.12,29.30%22 transform=%22rotate%2890 50 50%29%22/%3E%3Cpolygon points=%2229.24,0.06 55.96,26.53 55.75,27.00 50.06,32.79 37.91,21.00 37.67,37.85 8.26,37.85 0.00,29.42 29.12,29.30%22 transform=%22rotate%28180 50 50%29%22/%3E%3Cpolygon points=%2229.24,0.06 55.96,26.53 55.75,27.00 50.06,32.79 37.91,21.00 37.67,37.85 8.26,37.85 0.00,29.42 29.12,29.30%22 transform=%22rotate%28270 50 50%29%22/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg,rgba(220,196,154,.16),rgba(220,196,154,0) 55%);background-size:120px 120px,auto;background-position:-18px -22px,0 0;opacity:.55;-webkit-mask-image:linear-gradient(200deg,#000 0%,rgba(0,0,0,.35) 45%,transparent 75%);mask-image:linear-gradient(200deg,#000 0%,rgba(0,0,0,.35) 45%,transparent 75%)}
.spf-card figcaption{position:absolute;left:18px;bottom:18px;z-index:3;display:inline-flex;align-items:center;gap:7px;width:max-content;max-width:calc(100% - 36px);padding:7px 12px 7px 9px;border-radius:var(--rs);background:rgba(248,245,239,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--teal);font-size:11.5px;font-weight:600;line-height:1.2;letter-spacing:0;box-shadow:0 6px 18px rgba(15,77,74,.14)}
.spf-card figcaption::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--gold)}
@media (max-width:1200px){.spf-card figcaption{left:14px;bottom:14px;max-width:calc(100% - 28px);font-size:10.5px;padding:6px 10px 6px 8px}}
.spf-card.b{width:clamp(120px,13vw,190px);padding:6px}
.spf.f1 .spf-card{left:14%;top:20%;transform:rotate(3deg)}
.spf.f1 .spf-card.b{left:auto;right:4%;top:0;transform:rotate(-6deg)}
.spf.f2 .spf-card{right:12%;top:20%;transform:rotate(-3deg)}
.spf.f2 .spf-card.b{right:auto;left:6%;top:0;transform:rotate(5deg)}
.spf.f3 .spf-card{left:16%;top:20%;transform:rotate(-2.5deg)}
.spf.f3 .spf-card.b{left:auto;right:2%;top:0;transform:rotate(7deg)}
.story-close{text-align:center;font-size:clamp(40px,7.2vw,112px);font-weight:800;color:var(--teal);letter-spacing:-.035em;line-height:1.12;position:relative;z-index:3;padding-bottom:.08em}
.story-close em{font-style:normal;color:inherit}
.story-close .ch{display:inline-block}
.sc-top{margin:clamp(90px,12vw,180px) 0 -10vw}
.sc-bot{margin:0 0 0}
.hands-cta{position:absolute;left:50%;top:64%;translate:-50% -50%;z-index:5}
.hands-cta .btn{text-transform:uppercase;letter-spacing:.08em;font-size:16px;height:64px;padding:0 14px 0 30px;gap:14px}
.hands-cta .btn svg{width:36px;height:36px;padding:9px}
.btn.gold.teal{background:var(--teal);color:var(--cream)}
.btn.gold.teal svg{background:#fff;color:var(--teal)}
/* running stroke around the clasp button */
.hands-cta .btn-ring{position:absolute;inset:-7px;width:calc(100% + 14px);height:calc(100% + 14px);overflow:visible;pointer-events:none}
.hands-cta .btn-ring rect{width:calc(100% - 3px);height:calc(100% - 3px);fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-dasharray:26 74;stroke-dashoffset:0;animation:btn-ring 3.2s linear infinite}
@keyframes btn-ring{to{stroke-dashoffset:-100}}
.btn.gold.teal::after{background:linear-gradient(110deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 100%)}
.hands{position:relative;height:calc(100vw * 849 / 1800);margin-top:0;margin-bottom:0}
.hands-mark{position:absolute;left:50%;top:63%;width:min(56vw,620px);height:min(56vw,620px);transform:translate(-50%,-50%);fill:var(--gold);opacity:.95}
.hands-stage{position:absolute;left:50%;top:50%;width:100vw;aspect-ratio:1800/849;transform:translate(-50%,-50%)}
.hands-stage img{position:absolute;top:0;max-width:none;display:block}
.hands-img{left:0;width:100%}
.hand-open{opacity:0}
.hand-open.hl{left:-11.1%;width:61.78%;z-index:2}
.hand-open.hr{right:-11.1%;width:60.44%}
/* 03 maneuver */
.maneuver{position:relative}
.maneuver::before,.maneuver::after{content:"";position:absolute;left:0;right:0;height:1px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px)}
.maneuver::before{top:clamp(60px,7vw,100px)}
.maneuver::after{bottom:clamp(60px,7vw,100px)}
.mv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center;margin-top:clamp(48px,5vw,72px);min-height:70vh}
.mv-steps{position:relative;padding-left:0}
.mv-line{position:absolute;left:29px;top:64px;bottom:64px;width:2px;background:var(--line)}
.mv-line i{position:absolute;inset:0;background:var(--gold);transform-origin:top;transform:scaleY(0)}
.mv-step{display:grid;grid-template-columns:60px 1fr;gap:28px;align-items:start;text-align:left;padding:22px 0;width:100%}
.mv-step>div{opacity:.35;transition:opacity .5s}
.mv-step.on>div{opacity:1}
.mv-step.done>div{opacity:.8}
/* the number stays solid so the rail never shows through; the active one sends out gold waves in turn */
.mv-no{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:#E9E4DA;color:var(--ink-2);font-family:var(--font-num);font-weight:600;font-size:16px;position:relative;z-index:1;transition:background .4s,color .4s}
.mv-step.on .mv-no,.mv-step.done .mv-no{background:var(--gold);color:#fff}
.mv-no::before,.mv-no::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold);opacity:0;pointer-events:none;z-index:-1}
.mv-step.on .mv-no::before{animation:mv-wave 2.4s ease-out infinite}
.mv-step.on .mv-no::after{animation:mv-wave 2.4s ease-out 1.2s infinite}
@keyframes mv-wave{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.1);opacity:0}}
.mv-step h3{font-size:clamp(26px,2.6vw,40px);letter-spacing:-.025em;color:var(--teal);margin-top:12px}
.mv-step p{margin-top:10px;font-size:clamp(15px,1.15vw,18px);line-height:1.5;color:var(--ink-2);max-width:36ch}
.mv-photo{position:relative;aspect-ratio:4/4.6;border-radius:var(--r);overflow:hidden;background:var(--cream-2);box-shadow:0 30px 70px rgba(15,77,74,.16)}
.mv-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .8s var(--ease),transform 1.2s var(--ease)}
.mv-photo img.on{opacity:1;transform:none}
.mv-cap{position:absolute;left:20px;bottom:20px;padding:9px 16px;border-radius:999px;background:rgba(248,245,239,.9);color:var(--teal);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
/* 04 who benefits: pinned index (text swaps, photo deck peels, rail below) */
.bnx{margin-top:clamp(36px,4vw,56px)}
.bnx-stage{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,90px);align-items:center}
.bnx-txt{position:relative;padding-top:clamp(70px,8vw,120px)}
.bnx-ghost{position:absolute;left:-.04em;top:-.42em;display:grid;font-family:var(--font-num);font-size:clamp(150px,19vw,280px);font-weight:600;line-height:1;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px rgba(248,245,239,.16);pointer-events:none;user-select:none}
.bnx-ghost span{grid-area:1/1;opacity:0}
.bnx-swaps{position:relative;display:grid}
.bnx-swap{grid-area:1/1;opacity:0}
.bnx-tag{font-family:var(--font-num);font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}
.bnx-tag svg{width:18px;height:18px}
.bnx-swap h3{margin:16px 0 16px;font-size:clamp(40px,5vw,76px);letter-spacing:-.035em;line-height:1;font-weight:700}
.bnx-swap p{font-size:clamp(15px,1.2vw,19px);color:rgba(248,245,239,.74);line-height:1.55;max-width:42ch}
.bnx-deck{position:relative;aspect-ratio:4/3;max-width:560px;width:100%;justify-self:end}
.bnx-card{position:absolute;inset:0;margin:0;border-radius:var(--rm);overflow:hidden;background:var(--teal-3);box-shadow:0 30px 70px rgba(0,0,0,.35);transform-origin:50% 100%}
.bnx-card img{width:100%;height:100%;object-fit:cover;display:block}
.bnx-card figcaption{position:absolute;left:18px;bottom:18px;padding:9px 16px;border-radius:999px;background:rgba(248,245,239,.92);color:var(--teal);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.bnx-rail{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:18px;margin-top:clamp(36px,4vw,56px);padding-top:0}
.bnx-step{position:relative;text-align:left;padding:18px 0 0;display:flex;gap:12px;align-items:baseline;color:rgba(248,245,239,.45);font-size:15px;font-weight:600;letter-spacing:-.01em;cursor:pointer;transition:color .4s}
.bnx-step i{font-family:var(--font-num);font-style:normal;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--gold-2);opacity:.6}
.bnx-step b{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(248,245,239,.16);overflow:hidden}
.bnx-step b::after{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
.bnx-step.on{color:var(--cream)}
.bnx-step.on i{opacity:1}
.bnx-step.on b::after,.bnx-step.done b::after{transform:scaleX(1)}
.bnx-card figcaption{transition:opacity .3s}
.bnx-card:not(.top) figcaption{opacity:0}
/* video: poster in a rounded card over the ring backdrop, gold play button that hands over to the YouTube iframe */
.video{position:relative;padding-top:clamp(10px,2vw,30px);isolation:isolate}
/* rings ripple out from the video centre in a loop; they may run past the section edges on purpose */
.vid-rings{position:absolute;left:0;right:0;top:-45%;bottom:-45%;z-index:-1;overflow:hidden;pointer-events:none}
.vid-rings i{position:absolute;left:50%;top:50%;width:min(1100px,100%);aspect-ratio:1;border:2px solid rgba(200,164,106,.55);border-radius:50%;transform:translate(-50%,-50%) scale(.4);opacity:0;animation:vid-ripple 12s linear infinite}
.vid-rings i:nth-child(2){animation-delay:-3s}.vid-rings i:nth-child(3){animation-delay:-6s}.vid-rings i:nth-child(4){animation-delay:-9s}
@keyframes vid-ripple{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}12%{opacity:.9}80%{opacity:.35}100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
.vid{position:relative;width:min(1100px,100%);margin:0 auto;aspect-ratio:16/9;border-radius:var(--rm);overflow:hidden;background:var(--teal-2);box-shadow:0 40px 90px rgba(15,77,74,.22);isolation:isolate}
.vid-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s}
.vid:hover .vid-poster{transform:scale(1.03)}
.vid::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,59,57,.05),rgba(11,59,57,.35));pointer-events:none;transition:opacity .5s}
.vid-play{position:absolute;left:50%;top:50%;width:112px;height:112px;margin:-56px 0 0 -56px;z-index:2;display:grid;place-items:center;cursor:pointer;background:none;border:0}
.vid-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(248,245,239,.7);animation:vid-wave 2.4s ease-out infinite}
.vid-btn{position:relative;width:84px;height:84px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;box-shadow:0 18px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .45s var(--ease),background .3s}
.vid-btn svg{width:30px;height:30px;fill:currentColor;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;transform:translateX(2px)}
.vid-play:hover .vid-btn{transform:scale(1.08);background:var(--gold-2)}
@keyframes vid-wave{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.vid-frame{position:absolute;inset:0;z-index:3;display:none}
.vid-frame iframe{width:100%;height:100%;border:0;display:block}
.vid.playing .vid-frame{display:block}
.vid.playing .vid-play,.vid.playing .vid-poster{display:none}
.vid.playing::after{opacity:0}
.vid-cap{margin:18px auto 0;text-align:center;font-size:14px;color:var(--ink-2)}
@media (max-width:600px){.popup{padding:12px 13px 11px;border-radius:var(--rs)}.pp-name{font-size:13px}.pp-addr{font-size:11.5px;margin-top:4px}.pp-rate{font-size:11.5px;margin-top:6px}.pp-links{margin-top:10px;gap:4px}.pp-links a{height:30px;font-size:11px;border-radius:8px}.vid{border-radius:var(--rs)}.vid-play{width:84px;height:84px;margin:-42px 0 0 -42px}.vid-btn{width:64px;height:64px}.vid-btn svg{width:24px;height:24px}}
/* 05 IIBSS */
.iibss-h .ln{display:block}
.iibss-h em{font-style:normal;color:var(--gold)}
.iibss{background:var(--cream);clip-path:inset(0)} /* clip-path clips overflow without creating a scroll container */
.fw-outer{width:min(1600px,calc(100% - 48px));margin:clamp(36px,4vw,56px) auto 0}
.fw{color:var(--ink);position:relative}
.fw-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,90px);align-items:center;min-height:520px}
.fw-vis{position:relative;aspect-ratio:1;max-width:540px;margin:auto;width:100%}
.fw-mark{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fw-mark .fa{fill:rgba(15,77,74,.11)}
.fw-mark .fa.hid{opacity:0}
.fw-core{position:absolute;left:50%;top:50%;width:22%;height:22%;transform:translate(-50%,-50%);fill:var(--gold-2);pointer-events:none}
.fw-core{transition:opacity .5s var(--ease)}
.fw-core-lbl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);width:26%;text-align:center;color:var(--teal);opacity:0;pointer-events:none;line-height:1}
.fw-core-lbl b{display:block;font-size:clamp(22px,3.4vw,40px);font-weight:800;letter-spacing:-.02em}
.fw-core-lbl span{display:block;margin-top:.35em;font-size:clamp(9px,.95vw,12px);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.fw-swaps{display:grid;margin-top:22px}
.fw-swap{grid-area:1/1;opacity:0;visibility:hidden}
.fw-swap .fw-tag{margin-top:0}
.fw-swap.all .fw-tag{font-size:clamp(34px,3.8vw,58px)}
.fw-swap.all .fw-desc{font-size:clamp(18px,1.55vw,24px);max-width:34ch}
.fw-spin{position:absolute;inset:0;transform-origin:50% 50%}
.fw-slot{opacity:0;pointer-events:none}
.fw-lit-arm{fill:rgba(15,77,74,.11)}
.fw-store{display:none}
.fw-ph image{opacity:0}
.fw-people-all{position:absolute;inset:0;pointer-events:none}
.fw-people-all img{position:absolute;left:50%;bottom:2%;height:92%;width:auto;max-width:none;transform:translate(-50%,0);opacity:0;visibility:hidden;filter:drop-shadow(0 26px 34px rgba(15,77,74,.28))}
.fw-water{position:absolute;z-index:0;right:0;bottom:-.12em;max-width:100%;overflow:hidden;display:grid;justify-items:end;font-size:clamp(64px,9.5vw,160px);font-weight:800;line-height:1;letter-spacing:-.04em;text-transform:uppercase;color:var(--teal);opacity:.07;pointer-events:none;white-space:nowrap;user-select:none}
.fw-water span{grid-area:1/1;opacity:0}
.fw-shots{display:flex;align-items:flex-end;margin-top:26px}
.fw-shot{flex:0 0 36%;margin:0;background:#fff;padding:6px 6px 16px;border-radius:var(--rpi);box-shadow:0 14px 34px rgba(15,77,74,.16);transform:rotate(-4deg);position:relative}
.fw-shot+.fw-shot{margin-left:-6%}
.fw-shot:nth-child(2){transform:rotate(2.5deg) translateY(-6px);z-index:1}
.fw-shot:nth-child(3){transform:rotate(-2deg)}
.fw-shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.chip{display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:999px;background:var(--c,var(--teal));color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:background .5s}
.fw-dots{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fdot{display:inline-flex;align-items:center;justify-content:center;gap:0;height:38px;min-width:38px;padding:0;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--c,var(--teal));cursor:pointer;overflow:hidden;transition:background .45s var(--ease),border-color .45s var(--ease),padding .45s var(--ease),color .45s var(--ease)}
.fdot i,.fdot svg{width:17px;height:17px;flex:0 0 auto;transition:width .35s var(--ease),opacity .3s var(--ease)}
.fdot-name{max-width:0;opacity:0;white-space:nowrap;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:max-width .5s var(--ease),opacity .35s var(--ease)}
.fdot:hover{border-color:var(--c,var(--teal))}
.fdot.on{background:var(--c,var(--teal));border-color:var(--c,var(--teal));color:#fff;padding:0 18px;cursor:default}
.fdot.on i,.fdot.on svg{width:0;opacity:0}
.fdot.on .fdot-name{max-width:260px;opacity:1}
.fw-tag{margin-top:22px;font-size:clamp(26px,2.8vw,40px);letter-spacing:-.025em;line-height:1.15;color:var(--teal)}
.fw-desc{margin-top:14px;font-size:clamp(16px,1.25vw,19px);color:var(--ink-2);max-width:40ch}
.fw-count{margin-top:26px;font-family:var(--font-num);font-size:14px;color:var(--ink-2)}
.fw-hint{display:none;font-family:var(--font-num);font-size:13px;color:var(--ink-2)}
.fw-cta{margin-top:26px}
.fw-hint b{color:var(--teal)}
.fw-count b{color:var(--teal)}
.fw-pills{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:clamp(28px,3vw,44px);padding-top:clamp(20px,2.4vw,32px);border-top:1px solid var(--line)}
.fpill{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 22px;border-radius:999px;border:1.5px solid var(--line);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);transition:.35s var(--ease)}
.fpill svg{width:18px;height:18px;fill:var(--gold)}
.fpill:hover{border-color:var(--gold)}
.fpill.on{background:var(--c);border-color:var(--c);color:#fff}
.fpill.on svg{fill:#fff}
.fw-pills.all .fpill:not(.on){border-color:rgba(200,164,106,.7);background:rgba(200,164,106,.12)}
/* 06 nationwide */
.nw-h{max-width:20ch}
.stat-cards{display:flex;justify-content:center;gap:28px;margin-top:clamp(36px,4vw,56px);flex-wrap:wrap}
.stat-card{display:flex;align-items:center;gap:18px;padding:22px 30px;background:#fff;border-radius:var(--rm);box-shadow:0 24px 50px rgba(15,77,74,.12);min-width:300px}
.stat-card.tilt-l{transform:rotate(-2deg)}
.stat-card.tilt-r{transform:rotate(2deg)}
.stat-card b{display:block;font-size:clamp(28px,2.6vw,36px);font-weight:600;color:var(--gold-ink);letter-spacing:-.02em;line-height:1.1}
.stat-card b .stars{font-size:.7em;color:var(--gold);letter-spacing:.06em}
.stat-card>div>span{display:block;margin-top:4px;font-size:15px;color:var(--ink-2)}
.pin-ic{width:44px;height:44px;color:#D93B2B}
.g-logo{width:52px;height:52px}
.atlas{margin-top:clamp(36px,4vw,56px);color:var(--ink);padding:0 clamp(24px,5vw,80px)}
.atlas-in{width:min(1500px,100%);margin:auto;display:grid;grid-template-columns:1.35fr .8fr;gap:clamp(24px,4vw,72px);align-items:start}
.map-wrap{position:relative}
.map-svg{width:100%;height:auto;max-height:72vh}
.map-svg .land path{fill:#DCE7E1}
.map-svg .dots path{fill:rgba(15,110,98,.22)}
.map-svg .rb-line{stroke:var(--gold);stroke-width:2;stroke-dasharray:6 8;opacity:.75}
.map-svg .rl-text{font-family:var(--font);font-size:20px;font-weight:700;letter-spacing:.14em;fill:var(--teal)}
.map-svg .rl-sub{font-family:var(--font);font-size:18px;fill:var(--ink-2)}
.pin{cursor:pointer}
.pin .pin-in{transform-box:fill-box;transform-origin:center;transition:transform .45s var(--ease)}
.pin .halo{fill:var(--teal);opacity:0;transition:opacity .35s}
.pin .ring{fill:#fff;stroke:var(--teal);stroke-width:2.5;transition:stroke .3s}
.pin .disc{fill:var(--teal)}
.pin .pin-mark{fill:#fff}
.pin .hit{fill:transparent}
.pin-lbl{font-family:var(--font);font-size:17px;font-weight:700;fill:var(--teal);paint-order:stroke;stroke:#F8F5EF;stroke-width:5px;stroke-linejoin:round;pointer-events:none;transition:opacity .3s}
.pin-rate{font-family:var(--font-num);font-size:15px;font-weight:600;fill:var(--gold-ink);paint-order:stroke;stroke:#F8F5EF;stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.pin.on .pin-in{transform:scale(1.32)}
.pin.on .halo{opacity:.18}
.pin.on .ring{stroke:var(--gold)}
.pin.on .pin-lbl{opacity:0}
.pin:hover:not(.on) .pin-in{transform:scale(1.1)}
.map-cap{margin-top:8px;font-size:12.5px;color:var(--ink-2)}
.popup{position:absolute;left:0;top:0;width:296px;max-width:calc(100% - 16px);background:rgba(255,255,255,.55);color:var(--ink);border:1px solid rgba(255,255,255,.75);border-radius:var(--rs);padding:18px 18px 16px;box-shadow:0 24px 60px rgba(15,77,74,.22),inset 0 1px 0 rgba(255,255,255,.8);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);opacity:0;pointer-events:none;transform:translate(-50%,calc(-100% - 26px)) scale(.96);transition:opacity .4s var(--ease),transform .4s var(--ease),left .45s var(--ease),top .45s var(--ease);z-index:5}
.popup.on{opacity:1;pointer-events:auto;transform:translate(-50%,calc(-100% - 14px)) scale(1)}
.popup.side{transform:translate(26px,-50%) scale(.96)}
.popup.side.on{transform:translate(18px,-50%) scale(1)}
.popup::after{content:"";position:absolute;left:calc(50% + var(--tail,0px));bottom:-7px;width:14px;height:14px;margin-left:-7px;background:rgba(255,255,255,.7);border-right:1px solid rgba(255,255,255,.75);border-bottom:1px solid rgba(255,255,255,.75);transform:rotate(45deg);border-radius:3px}
.popup.side::after{bottom:auto;left:-7px;top:50%;margin:-7px 0 0 0}
.pp-name{font-weight:700;font-size:15px;line-height:1.25}
.pp-addr{margin-top:6px;font-size:13px;color:var(--ink-2)}
.pp-rate{margin-top:8px;font-size:13px;font-weight:600;color:var(--gold-ink);display:flex;align-items:center;gap:6px}
.pp-rate svg{width:14px;height:14px;fill:var(--gold);stroke:var(--gold)}
.pp-links{display:flex;gap:6px;margin-top:14px}
.pp-links a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;border-radius:10px;background:rgba(255,255,255,.6);font-size:12px;font-weight:600;transition:.25s}
.pp-links a svg{width:14px;height:14px}
.pp-links a:hover{background:var(--teal);color:var(--cream)}
.clinic-card{background:#fff;color:var(--ink);border-radius:var(--rm);padding:10px;display:grid;gap:8px;box-shadow:0 24px 50px rgba(15,77,74,.10)}
.cl-group{padding:14px 12px 8px;border-radius:var(--rs);background:var(--cream-4)}
.cl-group h5{display:flex;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:6px;padding:0 6px}
.cl-group h5 span{color:var(--ink-2);font-weight:500;letter-spacing:.02em;text-transform:none}
.cl-item{display:grid;grid-template-columns:26px 1fr 18px;gap:10px;align-items:center;width:100%;text-align:left;padding:9px 8px;border-radius:var(--rs);transition:background .3s,opacity .35s;color:inherit}
.cl-item .no{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.cl-item .nm{font-weight:700;font-size:14.5px;letter-spacing:-.01em;color:var(--teal)}
.cl-item .ad{font-size:12.5px;color:var(--ink-2);margin-top:2px}
.cl-item .rt{font-size:12px;font-weight:600;color:var(--gold-ink);white-space:nowrap}
.cl-item .go{width:16px;height:16px;color:var(--gold);opacity:0;transform:translate(-4px,4px);transition:.3s}
.cl-item.on .go,.cl-item:hover .go{opacity:1;transform:none}
.cl-item .rt{display:none}
.cl-item:hover{background:rgba(15,110,98,.08)}
.cl-item.on{background:var(--teal)}
.cl-item.on .nm,.cl-item.on .ad,.cl-item.on .no,.cl-item.on .rt{color:#fff}
.cl-item.on .rt svg{fill:var(--gold-2);stroke:var(--gold-2)}
/* 07 partners */
.partners-band{background:var(--cream-2);padding:clamp(44px,5vw,64px) 0}
.partners-band h4{text-align:center;font-size:clamp(18px,1.6vw,22px);font-weight:700;color:var(--teal);letter-spacing:-.01em;margin-bottom:34px}
.logos{display:flex;justify-content:center;align-items:center;gap:clamp(24px,4vw,56px);flex-wrap:wrap}
.logo-card{height:80px;display:flex;align-items:center;justify-content:center;padding:0 12px;border-radius:var(--rs)}
.logo-card img{height:52px;width:auto;max-width:190px;object-fit:contain;mix-blend-mode:multiply}
.logo-card.text{flex-direction:column;line-height:1;color:#1D3F8F;font-weight:800;letter-spacing:-.02em}
.logo-card.text b{font-size:32px}.logo-card.text span{font-size:12px;letter-spacing:.3em;margin-top:2px}
/* 08 purpose */
.purpose{overflow:hidden}
.manifesto{text-align:center;font-size:clamp(36px,5.4vw,78px);font-weight:700;letter-spacing:-.035em;line-height:1.08;color:var(--teal);max-width:16ch;margin:0 auto;text-wrap:balance}
.manifesto .pic{position:relative;display:inline-block;width:0;height:.82em;border-radius:999px;overflow:hidden;vertical-align:-.1em;margin:0 .08em;background:var(--gold-2);will-change:width;isolation:isolate}
.manifesto .pic::after{content:"";position:absolute;inset:0;background:var(--teal);mix-blend-mode:lighten;z-index:2;pointer-events:none}
.manifesto .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:grayscale(1) contrast(1.08);mix-blend-mode:multiply;opacity:0;transform:translateX(18%) scale(1.08);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.manifesto .pic img.on{opacity:1;transform:none;z-index:1}
.manifesto .pic img.out{opacity:0;transform:translateX(-18%) scale(1.08)}
.pp-stage{position:relative;height:clamp(300px,36vw,520px);margin-top:clamp(20px,3vw,40px)}
.rings{position:absolute;inset:0;pointer-events:none}
.rings i{position:absolute;left:50%;top:60%;border:1px solid rgba(200,164,106,.28);border-radius:50%;transform:translate(-50%,-50%)}
.rings i:nth-child(1){width:44%;aspect-ratio:1}.rings i:nth-child(2){width:64%;aspect-ratio:1}.rings i:nth-child(3){width:86%;aspect-ratio:1}
.pp-group-wrap{position:absolute;left:0;right:0;bottom:0;height:100%;display:flex;justify-content:center;align-items:flex-end;z-index:1;pointer-events:none}
.pp-group{display:block;height:100%;width:auto;max-width:none;filter:drop-shadow(0 30px 40px rgba(15,77,74,.18))}
.pola{position:absolute;width:clamp(64px,8vw,120px);aspect-ratio:1;padding:6px 6px 14px;background:#fff;border-radius:var(--rp);box-shadow:0 16px 36px rgba(15,77,74,.18)}
.pola img{width:100%;height:100%;object-fit:cover;border-radius:var(--rpi)}
.pola.p1{left:8%;top:4%;transform:rotate(-8deg);z-index:0}
.pola.p2{left:15%;top:52%;transform:rotate(6deg);z-index:2}
.pola.p3{right:10%;top:10%;transform:rotate(7deg);z-index:0}
.pola.p4{right:6%;top:58%;transform:rotate(-5deg);z-index:2}
.pp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;margin-top:clamp(20px,2.5vw,36px)}
.pp-card{background:#fff;border-radius:var(--rm);padding:28px 30px;box-shadow:0 24px 50px rgba(15,77,74,.10)}
.pp-card .k{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:700;color:var(--teal);margin-bottom:12px}
.pp-card .k svg{width:20px;height:20px;fill:var(--gold)}
.pp-card p{font-size:16px;line-height:1.55;color:var(--ink-2)}
/* 09 philosophy */
.philo{padding:clamp(60px,7vw,100px) 0}
.philo-panel{width:min(1360px,calc(100% - 48px));margin:auto;background:#01433F;color:var(--cream);border-radius:var(--rx);padding:clamp(48px,5vw,72px) 0 0;overflow:hidden;position:relative;isolation:isolate}
.philo-bg{position:absolute;inset:0;pointer-events:none;background:#01433F center top / 1440px auto repeat-x;z-index:-1}
.philo-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#01433F 0%,rgba(1,67,63,.9) 28%,rgba(1,67,63,0) 72%)}
.btl-cta{position:relative;margin-top:clamp(22px,2.5vw,32px);text-align:center}
.philo-stage{position:relative;height:clamp(250px,26vw,400px);margin-top:clamp(8px,1.5vw,20px)}
.philo-stage .strip.hero-strip{top:-24%}
.btl-wrap{position:relative;text-align:center;padding:0 12px}
.btl{font-size:clamp(64px,13vw,196px);letter-spacing:-.05em;line-height:.92;font-weight:800;pointer-events:none;color:rgba(248,245,239,.4)}
.btl .bw{display:inline-block;white-space:nowrap}
.btl .char{display:inline-block;color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(105deg,rgba(220,196,154,0) 42%,rgba(220,196,154,.95) 50%,rgba(220,196,154,0) 58%),linear-gradient(180deg,rgba(248,245,239,.6),rgba(248,245,239,.04) 92%);background-size:320% 100%,100% 100%;background-position:120% 0,0 0;background-repeat:no-repeat}
.btl-sub{position:relative;max-width:44ch;margin:-.5em auto 0;font-size:clamp(17px,1.5vw,24px);line-height:1.45;color:var(--cream);text-wrap:pretty;padding-top:.6em}
.strip{--r:820px;--w:clamp(210px,23vw,320px);position:relative;width:100%;height:clamp(230px,27vw,380px);margin-top:clamp(36px,4vw,56px);perspective:1300px;perspective-origin:50% 50%;transform-style:preserve-3d}
.sph{position:absolute;left:50%;top:0;width:var(--w);aspect-ratio:var(--ar,3/4);margin-left:calc(var(--w) / -2);border-radius:var(--rp);overflow:hidden;transform-origin:50% 50%;backface-visibility:hidden;will-change:transform,opacity;opacity:0;transform:rotateY(0) translateZ(calc(var(--r) * -1))}
.sph img{width:100%;height:100%;object-fit:cover}
/* 10 explore */
.ex-head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end}
.ex-h{color:var(--teal);display:flex;align-items:center;gap:.1em}
.inmark{width:.9em;height:.9em;fill:var(--gold)}
.ex-head .lead{max-width:40ch;justify-self:end}
.explore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:clamp(36px,4vw,56px)}
.xcard{position:relative;display:block;border-radius:var(--rm);overflow:hidden;aspect-ratio:3/3.4;background:var(--teal-2);isolation:isolate;color:var(--cream)}
.xcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.xcard:hover img{transform:scale(1.06)}
.xb{position:absolute;left:14px;right:14px;bottom:14px;padding:20px;border-radius:var(--rs);background:rgba(26,38,50,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:1}
.xb-head{display:flex;align-items:center;gap:12px}
.xb-ic{display:inline-grid;place-items:center;flex:0 0 auto;width:38px;height:38px;border-radius:var(--rs);background:rgba(200,164,106,.2);color:var(--gold-2)}
.xb-ic svg{width:20px;height:20px}
.xb h3{font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em}
.xb-row{display:flex;align-items:flex-end;gap:12px;margin-top:10px}
.xb-row p{flex:1 1 auto;margin:0;font-size:14px;line-height:1.5;color:rgba(248,245,239,.85)}
.xb-row .btn{flex:0 0 auto}
.xb .btn{height:42px;padding:0 8px 0 16px;font-size:13px;gap:8px;white-space:nowrap}
.xb .btn svg{width:28px;height:28px;padding:7px}
/* 11 grow */
.grow-h{max-width:24ch}
.quote-row{display:flex;justify-content:center;align-items:center;gap:clamp(24px,4vw,56px);margin-top:clamp(40px,5vw,64px);flex-wrap:wrap}
.quote-box{position:relative;max-width:440px;padding:20px 30px}
.qm{position:absolute;font-size:120px;line-height:1;font-weight:700;color:var(--cream-2);z-index:0}
.qm1{left:-20px;top:-30px}.qm2{right:-10px;bottom:-60px}
.quote{position:relative;font-size:clamp(20px,1.9vw,28px);font-weight:500;line-height:1.35;color:var(--teal);letter-spacing:-.015em}
.quote .w{display:inline-block}
.quote-by{position:relative;display:block;margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
/* the speaker artwork already includes its gold card; just place the image */
.quote-pic{width:clamp(200px,22vw,260px);position:relative}
.quote-pic img{display:block;width:100%;height:auto}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:clamp(48px,6vw,80px)}
.duo-card{position:relative;overflow:hidden;border-radius:var(--r);padding:clamp(28px,4vw,52px);background:var(--cream-2);min-height:300px;display:flex;flex-direction:column;justify-content:flex-end}
.duo-card.dark{background:var(--teal);color:var(--cream)}
.duo-card .dm{position:absolute;right:-50px;bottom:-60px;width:240px;height:240px;opacity:.16;fill:var(--gold);transition:transform 1.2s var(--ease)}
.duo-card.dark .dm{fill:var(--teal-3);opacity:.9}
.duo-card:hover .dm{transform:rotate(90deg)}
.duo-card h4{font-size:clamp(24px,2.3vw,34px);letter-spacing:-.025em;line-height:1.12;position:relative;color:inherit}
.duo-card:not(.dark) h4{color:var(--teal)}
.duo-card p{margin:14px 0 28px;font-size:16px;opacity:.85;max-width:40ch;position:relative}
.duo-card .btn{align-self:flex-start;position:relative}
/* 12 footer */
.foot{position:relative;background:var(--teal-2);color:var(--cream);padding:clamp(60px,7vw,90px) 0 0;overflow:hidden;border-radius:var(--rx) var(--rx) 0 0}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.foot .lock{width:150px;height:46px;fill:var(--cream)}
.foot-addr{margin-top:24px;font-size:15px;line-height:1.6;color:rgba(248,245,239,.75);max-width:34ch}
.foot-addr b{display:block;color:var(--cream);font-weight:600;margin-top:12px}
.foot-addr span{display:block;color:rgba(248,245,239,.6);margin-top:4px;font-size:14px}
.foot h5,.foot .foot-h{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);margin-bottom:18px}
.foot li{margin:11px 0;font-size:15px;color:rgba(248,245,239,.8)}
.foot li a:hover{color:var(--gold)}
.foot-bottom{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line-l);padding:22px 0;font-size:13px;color:rgba(248,245,239,.5);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.foot-big{width:100%;fill:rgba(248,245,239,.07);margin-top:10px;margin-bottom:-2%}
/* perf: no content-visibility here on purpose, it shifts scroll positions under ScrollTrigger */
.fw-spin,.sph,.bnx-card,.hero-people{will-change:transform}
/* back to top: appears after the hero, gold disc bottom right */
.totop{position:fixed;right:22px;bottom:22px;z-index:90;width:48px;height:48px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;box-shadow:0 12px 30px rgba(15,77,74,.25);opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s,background .3s;cursor:pointer;border:0}
.totop svg{width:20px;height:20px}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--teal)}
body.menu-open .totop{opacity:0;visibility:hidden}
@media (max-width:600px){.totop{right:14px;bottom:14px;width:44px;height:44px}}
/* helpers */
/* will-change was declared here for every revealed element on the page and never taken back, so a
long page carried fifty-odd compositor layers for animations that had finished seconds earlier.
GSAP raises the hint for the length of each tween and clearProps drops it afterwards, which is
what the property is actually for. The few elements that animate continuously keep theirs above. */
/* responsive */
@media (max-width:1100px){
.nav-links{display:none}
.burger{display:grid}
.nav-cta .navcta{display:none}
.nav{padding:30px 0 8px}
.nav.scrolled{padding:8px 0}
.nav .wrap{width:calc(100% - 24px)}
.nav-in{padding:8px 8px 8px 20px}
.nav.scrolled .nav-in{padding:6px 6px 6px 18px}
.burger{width:42px;height:42px}
}
@media (max-width:900px){
.hero{padding-top:104px;min-height:85svh;display:flex;flex-direction:column}
.hero-in{margin-block:auto;padding-bottom:12px}
.hero+.sec{padding-top:28px}
.hero-stage{margin-top:auto}
.hero-bg{background-image:none!important}
.hero-bg-img{height:100%;width:auto;min-width:100%;object-fit:cover}
.philo-bg{background-size:auto 100%}
.philo-stage{height:300px}
.hero-stage{width:calc(100% - 24px)}
.strip.hero-strip{--k:.7;--w:330px;--r:775px;--fade:66;top:-30%;height:420px;perspective:900px;perspective-origin:50% 60%;-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 90%);mask-image:linear-gradient(180deg,#000 45%,transparent 90%)}
.strip.hero-strip .sph{top:8%}
.hero-people{width:132%;max-width:none;margin-left:-16%}
.srow,.srow.r2{grid-template-columns:1fr;gap:22px;margin-bottom:56px}
.srow .sp{order:1}
.srow .spf{order:2;display:flex;align-items:flex-end;gap:14px;height:auto;padding:10px 0 6px}
.srow .spf .spf-card{position:static;width:62%;transform:rotate(-2deg)}
.srow .spf .spf-card.b{width:34%;margin-bottom:22px;transform:rotate(4deg)}
.sp{max-width:none;margin-bottom:48px}
.sp .ipic{height:1em}
.sp .schip{font-size:.86em}
.sp.p2{text-align:left}
.hands{height:calc(130vw * 849 / 1800)}
.hands-stage{width:130vw}
.mv{grid-template-columns:1fr;min-height:0;gap:18px}
.mv-photo{order:-1;aspect-ratio:16/10;border-radius:var(--rm)}
.hands-cta .btn{font-size:13px;height:50px;padding:0 10px 0 20px;gap:10px}
.hands-cta .btn svg{width:30px;height:30px;padding:7px}
.mv-step{grid-template-columns:48px 1fr;gap:16px;padding:16px 0}
.mv-no{width:48px;height:48px;font-size:14px}
.mv-line{left:23px}
.bnx-stage{grid-template-columns:1fr;gap:22px;min-height:0;align-items:start}
.bnx-deck{order:-1;max-width:none;width:84%;margin:0 auto 36px;aspect-ratio:16/11}
.bnx-card{border-radius:var(--rs)}
.bnx-txt{padding-top:0}
.bnx-ghost{display:none}
.bnx-swap h3{font-size:clamp(34px,9vw,44px)}
.bnx-rail{gap:10px;margin-top:26px}
.bnx-step{font-size:12px;gap:8px;padding-top:12px}
.bnx-step span{display:none}
.bnx-step.on span{display:inline}
/* mobile: the whole block sticks with CSS (roda + ikon + teks), a spacer below gives the scroll distance */
.fw-outer{clip-path:inset(0 -1px)}
.fw-sticky{position:sticky;top:76px;z-index:2;background:var(--cream);padding:34px 0 8px;clip-path:inset(0 0 0 0)}
.fw-sticky .fw-grid{grid-template-columns:1fr;gap:12px;min-height:0}
.fw-sticky .fw-txt{overflow:hidden;min-width:0;padding-left:4px;margin-left:-4px}
.fw-sticky .fw-vis{overflow:visible}
.fw-sticky .fw-vis{max-width:min(280px,60vw);margin:0 auto}
.fw-spacer{width:100%;pointer-events:none}
@media (max-height:700px){.fw-sticky .fw-vis{max-width:min(220px,48vw)}.fw-sticky .fw-tag{font-size:20px}.fw-sticky .fw-desc{font-size:13.5px;margin-top:6px}.fw-sticky .fw-shots{margin-top:10px}.fw-sticky .fw-shot{flex-basis:30%}.fw-sticky .fw-count{margin-top:10px}}
.fw-hint{display:none}
.fw-water{display:none}
.fw-dots{gap:5px;flex-wrap:nowrap}
.fdot{height:34px;min-width:34px}
.fdot.on{padding:0 11px}
.fdot-name{font-size:10.5px;letter-spacing:.08em}
@media (max-width:380px){.fw-dots{gap:4px}.fdot{height:32px;min-width:32px}.fdot.on{padding:0 9px}.fdot-name{font-size:10px;letter-spacing:.05em}}
.fw-shot{padding:4px 4px 10px}
.fw-shots-wrap{margin-top:18px}
.fw-pills{gap:8px}
.fpill{height:40px;padding:0 14px;font-size:11px}
.atlas-in{grid-template-columns:1fr}
.stat-card{min-width:0;width:100%}
.stat-card.tilt-l,.stat-card.tilt-r{transform:none}
.pp-stage{height:280px}
.pola{width:70px}
.pp-cards{grid-template-columns:1fr;margin-top:16px}
.philo-stage{height:210px}
.strip{--r:500px;--w:170px;perspective:1000px;height:200px}
.ex-head{grid-template-columns:1fr}
.ex-head .lead{justify-self:start}
.explore-grid{grid-template-columns:1fr}
.xcard{aspect-ratio:4/3}
.quote-box{padding:10px 16px}
.duo{grid-template-columns:1fr}
.foot-top{grid-template-columns:1fr 1fr;gap:32px}
.foot-top>div:first-child{grid-column:1/-1}
.foot{border-radius:var(--rm) var(--rm) 0 0}
}
@media (max-width:600px){
.strip.hero-strip{--k:.6;--w:230px;--r:550px;--fade:62;top:-50%;height:300px;perspective:460px;perspective-origin:50% 62%;-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 88%);mask-image:linear-gradient(180deg,#000 45%,transparent 88%)}
.strip.hero-strip .sph{top:8%}
.wrap{width:calc(100% - 36px)}
.foot-top{grid-template-columns:1fr 1fr;gap:28px 20px}
.foot-top>div:first-child{grid-column:1/-1}
.foot li{font-size:14px;margin:9px 0}
.btn{height:50px;padding:0 22px}
}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.bl-arm,.bl-word{opacity:1;transform:rotate(var(--rot))}
}
html.static *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.static .bl-arm,html.static .bl-word{opacity:1;transform:rotate(var(--rot))}
html.static .hero-vid{display:none}
/* Mafar Group theme: WordPress-only additions (contact form). The design stylesheet is site.css. */
.contact{padding-top:clamp(150px,18vh,190px)}
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:start;margin-top:clamp(40px,5vw,64px)}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;padding:clamp(24px,3vw,40px);background:#fff;border-radius:var(--r);box-shadow:0 24px 60px rgba(15,77,74,.08)}
.contact-form .hp{position:absolute;left:-9999px}
.contact-form label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:600;color:var(--teal)}
.contact-form .full{grid-column:1/-1}
.contact-form .fld{width:100%;height:50px;padding:0 16px;border-radius:var(--rs);border:1.5px solid var(--line);background:var(--cream-4);font:inherit;font-size:15px;color:var(--ink);transition:border-color .25s,box-shadow .25s}
.contact-form textarea.fld{height:150px;padding:14px 16px;resize:vertical}
.contact-form .fld:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 4px rgba(200,164,106,.18)}
.contact-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.mafar-enq-msg{font-size:14px;line-height:1.5;color:var(--ink-2)}
.mafar-enq-msg[data-state=ok]{color:var(--teal);font-weight:600}
.mafar-enq-msg[data-state=err]{color:#B42318}
.contact-side{min-height:100%}
.contact-details{margin-top:26px;display:flex;flex-direction:column;gap:14px;font-size:15px;color:rgba(248,245,239,.85)}
.contact-details li{display:flex;gap:12px;align-items:flex-start}
.contact-details svg{width:18px;height:18px;flex:none;color:var(--gold);margin-top:2px}
.contact-details a{color:var(--cream);font-weight:600}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}.contact-form{grid-template-columns:1fr}}
/* logged-in admin bar: push the fixed nav down */
body.admin-bar .nav{top:32px}
body.admin-bar .menu{top:32px}
@media (max-width:782px){body.admin-bar .nav,body.admin-bar .menu{top:46px}}
/* ---------------------------------------------------------------- inner pages (Our Leaders, What We Do, Contact, Write to Us) */
.contact-form .fld-row{grid-column:1/-1;display:grid;grid-template-columns:120px 1fr;gap:18px 20px}
.contact-form label span b{color:#B42318;font-weight:700;margin-left:2px}
.contact-form select.fld{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230F4D4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.contact-form .fld-hint{font-size:12px;font-weight:500;color:var(--ink-2)}
.contact-form .fld-file{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.contact-form .fld-file input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.contact-form .btn.sm{height:42px;padding:0 18px;font-size:13px;cursor:pointer}
.contact-form .fld-consent{flex-direction:row;align-items:flex-start;gap:10px;font-weight:500;color:var(--ink-2);font-size:13.5px;line-height:1.5}
.contact-form .fld-consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--teal);flex:none}
.contact-form .fld-consent a{color:var(--teal);font-weight:600;text-decoration:underline}
@media (max-width:600px){.contact-form .fld-row{grid-template-columns:1fr}}
/* page hero */
.phero{position:relative;overflow:hidden;background:var(--cream-2);color:var(--teal);padding:clamp(150px,20vh,210px) 0 clamp(60px,7vw,100px);text-align:center}
.phero.is-short{padding-bottom:clamp(40px,5vw,72px)}
.phero.has-img{color:var(--cream);background:var(--teal-2);min-height:min(70vh,640px);display:flex;align-items:center}
.phero.is-short.has-img{min-height:min(48vh,440px)}
.phero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.phero.has-img::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,59,57,.55),rgba(11,59,57,.85))}
.phero-in{position:relative;width:min(1240px,calc(100% - 48px));margin-inline:auto}
.phero-h{max-width:18ch;margin-inline:auto}
.phero .lead{margin:18px auto 0;color:inherit;opacity:.85}
.phero.has-img .lead{color:rgba(248,245,239,.85)}
/* brand tile style: teal stripes like the homepage hero, title left, photo cards fanned on the right */
.phero.is-tile{background:#01433F;color:var(--cream);text-align:left;padding:clamp(130px,17vh,180px) 0 clamp(48px,6vw,80px);min-height:0;display:block}
.phero.is-tile.is-short{padding-bottom:clamp(40px,5vw,64px)}
.phero-tile{position:absolute;inset:0;pointer-events:none;background:#01433F center top / 1440px auto repeat-x}
.phero-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,67,63,.2),rgba(1,67,63,.75) 100%)}
.phero.is-tile .phero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:center}
.phero.is-tile .phero-h{margin-inline:0;max-width:14ch}
.phero.is-tile .lead{margin-inline:0;color:rgba(248,245,239,.85);max-width:44ch}
.phero-cards{position:relative;height:clamp(220px,24vw,340px)}
.phero-card{position:absolute;margin:0;width:clamp(180px,20vw,290px);aspect-ratio:4/3;padding:8px 8px 8px;background:#fff;border-radius:var(--rp);box-shadow:0 24px 60px rgba(0,0,0,.28);overflow:hidden}
.phero-card img{width:100%;height:100%;object-fit:cover;border-radius:var(--rpi);display:block}
.phero-card.c1{right:0;top:0;transform:rotate(4deg);z-index:2}
.phero-card.c2{left:0;bottom:0;transform:rotate(-6deg);z-index:1}
.phero-card.c3{right:8%;bottom:-6%;transform:rotate(2deg);z-index:3;width:clamp(150px,16vw,230px)}
.phero-cards:has(.c1:only-child) .c1{right:8%;top:10%}
/* frosted glass badge in the middle of the photo cluster, icon says what the page is about */
@media (max-width:760px){
.phero.is-tile{padding-top:110px}
.phero.is-tile .phero-in{grid-template-columns:1fr;gap:28px}
.phero-cards{height:200px;margin:0 8px}
.phero-card{width:min(52%,230px)}
.phero-card.c3{width:38%;bottom:0}
}
/* intro */
.intro-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(28px,5vw,80px);align-items:start}
.intro-text{font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:var(--ink-2)}
.dark .intro-text{color:rgba(248,245,239,.85)}
.intro-text p+p{margin-top:1em}
.intro-text .btn{margin-top:26px}
.intro .h-l{color:var(--teal)}.intro.dark .h-l{color:var(--cream)}
.intro.dark{background:var(--teal)}
@media (max-width:760px){.intro-grid{grid-template-columns:1fr;gap:20px}}
/* leaders */
.ld-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(36px,4vw,56px)}
.ld-card.is-big{grid-column:span 2}
.ld-card{display:block;padding:0;background:transparent;border:0;color:inherit;font:inherit;cursor:pointer;text-align:left}
/* leader card: tall editorial portrait, a huge outlined Mafar mark behind the head (rotated per card), soft teal duotone that lifts on hover, name inside the card */
.ld-ph{position:relative;display:block;width:100%;aspect-ratio:4/5;border-radius:var(--rm);overflow:hidden;background:linear-gradient(180deg,#0F4D4A,#072F2D);isolation:isolate}
.ld-bigmark{position:absolute;left:50%;top:34%;width:135%;height:135%;transform:translate(-50%,-50%) rotate(var(--rot,0deg));fill:none;stroke:var(--gold);stroke-width:.6;opacity:.42;z-index:0;transition:transform 1.2s var(--ease),opacity .6s}
.ld-card:hover .ld-bigmark{transform:translate(-50%,-50%) rotate(calc(var(--rot,0deg) + 12deg)) scale(1.06);opacity:.6}
.ld-ph img{position:absolute;left:50%;bottom:0;z-index:1;width:112%;height:auto;max-width:none;transform:translateX(-50%);display:block;filter:saturate(.55) contrast(1.05);transition:transform .9s var(--ease),filter .6s}
.ld-card:hover .ld-ph img{transform:translateX(-50%) scale(1.03);filter:none}
.ld-ph::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(7,47,45,0) 50%,rgba(7,47,45,.85) 100%);pointer-events:none}
.ld-cap{position:absolute;left:18px;right:18px;bottom:18px;z-index:3;display:flex;flex-direction:column;gap:3px;text-align:left}
.ld-card.no-photo .ld-bigmark{display:none}
.ld-card.no-photo .ld-ph{background:linear-gradient(180deg,#135E5A,#0B3B39)}
.ld-mark{position:absolute;left:27%;top:24%;width:46%;height:46%;z-index:1;fill:var(--gold);stroke:none;opacity:.5}
.ld-card.is-big .ld-ph{border-radius:var(--r)}
.ld-card.is-big .ld-name{font-size:24px}
.ld-card.is-big .ld-title{font-size:15px}
.ld-name{font-weight:700;font-size:17px;color:var(--cream);letter-spacing:-.01em;line-height:1.2}
.ld-title{font-size:13px;color:var(--gold-2);font-weight:600;line-height:1.35;max-width:28ch}
.ld-hint{text-align:center;margin-top:22px;font-size:13px;color:var(--ink-2)}
.ld-card.is-open{cursor:default}
.ld-card.is-open{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.ld-card.is-open .ld-ph{aspect-ratio:1;background:var(--cream-4);border:1.5px dashed rgba(200,164,106,.6);display:grid;place-items:center;margin-bottom:10px}
.ld-card.is-open .ld-ph::after{display:none}
.ld-card.is-open .ld-name{color:var(--ink-2);font-weight:600}
.ld-card.is-open .ld-title{color:var(--gold-ink)}
.ld-card.is-open .ld-ph b{font-size:56px;font-weight:800;color:rgba(200,164,106,.7)}
.ld-card.is-open .ld-name{color:var(--ink-2);font-weight:600}
.ld-open{margin-top:clamp(40px,5vw,72px);padding-top:clamp(32px,4vw,56px);border-top:1px solid var(--line)}
.ld-open .ld-grid{margin-top:0}
.ld-open-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:32px}
.ld-open-foot p{max-width:56ch;color:var(--ink-2);font-size:15px;line-height:1.55}
.ld-feat{position:relative;overflow:hidden;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:end;margin-top:clamp(48px,6vw,90px);padding:clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0;border-radius:var(--r);background:var(--teal);color:var(--cream);min-height:380px}
.ld-feat .dm{position:absolute;right:30%;top:-80px;width:360px;height:360px;fill:var(--teal-3);opacity:.9}
.ld-feat-txt{position:relative;padding-bottom:clamp(28px,4vw,56px)}
.ld-feat-txt h3{font-size:clamp(22px,2.2vw,34px);letter-spacing:-.02em;line-height:1.2;margin-top:18px;max-width:22ch}
.ld-feat-name{margin-top:18px;font-weight:600;color:var(--gold-2)}
.ld-feat-btn{margin-top:22px}
.ld-feat-img{position:relative;width:100%;max-width:360px;justify-self:end;display:block;aspect-ratio:4/5;object-fit:cover;object-position:top;border-radius:var(--rm)}
.ld-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px}
@media (max-width:760px){ .ld-modal{padding:30px 28px} }
.ld-modal[hidden]{display:none}
.ld-modal-bg{position:absolute;inset:0;background:rgba(11,59,57,.6);backdrop-filter:blur(6px)}
.ld-modal-box{position:relative;width:min(760px,100%);max-height:90vh;overflow:auto;background:var(--cream);border-radius:var(--r);display:grid;grid-template-columns:280px 1fr;box-shadow:0 40px 90px rgba(0,0,0,.3)}
.ld-modal-ph{background:linear-gradient(180deg,#0F4D4A,#072F2D);min-height:280px}
.ld-modal-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 100%;display:block}
.ld-modal-txt{padding:clamp(24px,3vw,40px)}
.ld-modal-title{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.ld-modal-name{font-size:clamp(24px,2.4vw,34px);letter-spacing:-.025em;color:var(--teal);margin-top:8px}
.ld-modal-bio{margin-top:16px;color:var(--ink-2);line-height:1.6;font-size:15.5px}
.ld-modal-bio p+p{margin-top:.8em}
.ld-close{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:var(--teal);display:grid;place-items:center;cursor:pointer;z-index:1}
.ld-close svg{width:18px;height:18px}
@media (max-width:760px){.ld-grid{grid-template-columns:repeat(2,1fr)}.ld-card.is-big{grid-column:span 2}.ld-feat{grid-template-columns:1fr;align-items:start}.ld-feat-img{max-width:300px;justify-self:center}.ld-modal-box{grid-template-columns:1fr}
/* The photographs are portraits, about three to four. Dropped into a square frame and anchored to
the bottom, as the desktop frame is, the crop ate the head: on a phone the reader met a suit
with no face above it. The frame is portrait here and the crop sits near the top of the plate,
which is where a head is in a studio portrait. */
/* the frame takes the full width of the card and crops downwards. Given an aspect ratio and a
height cap instead, it solved for a 240px width and left a band of cream beside the portrait. */
.ld-modal-ph{min-height:0;aspect-ratio:auto;width:100%;height:min(38vh,300px)}
.ld-modal-ph img{object-position:50% 14%}
/* the close button leaves the scrolling card and holds the corner of the screen, so a long
biography can never scroll it out of reach */
.ld-modal .ld-close{position:fixed;top:calc(env(safe-area-inset-top,0px) + 18px);right:18px;z-index:3}}
@media (max-width:600px){.ld-grid{grid-template-columns:repeat(2,1fr);gap:12px}.ld-ph{border-radius:var(--rs)}.ld-name{font-size:14px}.ld-title{font-size:11.5px}.ld-card.is-big{grid-column:span 1}.ld-card.is-big .ld-name{font-size:15px}.ld-card.is-big .ld-title{font-size:12px}.ld-cap{left:12px;right:12px;bottom:12px}.ld-ph{aspect-ratio:3/4}.ld-ph img{width:100%;bottom:22%}.ld-ph::after{background:linear-gradient(180deg,rgba(7,47,45,0) 40%,rgba(7,47,45,.92) 78%)}}
/* services */
.sv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2vw,28px);margin-top:clamp(36px,4vw,56px)}
.sv-item{position:relative;padding:28px 22px 26px;border-radius:var(--rm);background:rgba(248,245,239,.06);border:1px solid rgba(248,245,239,.12);text-align:center;transition:background .35s,transform .5s var(--ease)}
.sv-item:hover{background:rgba(248,245,239,.1);transform:translateY(-4px)}
.sv-ic{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:rgba(200,164,106,.16);color:var(--gold-2)}
.sv-ic svg{width:26px;height:26px}
.sv-no{position:absolute;left:18px;top:16px;font-size:11px;font-weight:700;letter-spacing:.1em;color:rgba(248,245,239,.45)}
.sv-item h3{font-size:16px;letter-spacing:-.01em;line-height:1.3}
.sv-item p{margin-top:10px;font-size:13.5px;line-height:1.5;color:rgba(248,245,239,.72)}
.sv-grid[data-n="6"],.sv-grid[data-n="3"]{grid-template-columns:repeat(3,1fr)}
.sv-grid[data-n="4"],.sv-grid[data-n="8"]{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.sv-grid,.sv-grid[data-n]{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.sv-grid{grid-template-columns:1fr 1fr;gap:12px}.sv-item{padding:24px 16px 20px}}
@media (max-width:420px){.sv-grid{grid-template-columns:1fr}}
/* split + hq */
.split-grid,.hq-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.split-grid.img-left .split-card{order:2}
.split-card,.hq-card{justify-content:center;min-height:460px}
.split-card .h-l,.hq-card .h-l{position:relative;margin-top:18px;color:inherit}
.split-text{position:relative;margin:18px 0 28px;font-size:16px;line-height:1.6;opacity:.85;max-width:44ch}
.split-text p+p{margin-top:1em}
.split-img{position:relative;border-radius:var(--r);overflow:hidden;min-height:320px}
.split-img.is-tall img{object-position:center top}
@media (max-width:760px){.split-img{aspect-ratio:4/3;min-height:0}.split-img.is-tall{aspect-ratio:4/5}}
.split-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hq-details{margin:22px 0 30px}
.hq-note{display:flex;gap:16px;align-items:flex-start;margin-top:20px;padding:22px 26px;border-radius:var(--rs);background:var(--cream-2);color:var(--ink-2);font-size:15px;line-height:1.55}
.hq-note svg{width:20px;height:20px;flex:none;color:var(--gold-ink);margin-top:2px}
.hq-note b{display:block;color:var(--teal);margin-bottom:4px}
@media (max-width:760px){.split-grid,.hq-grid{grid-template-columns:1fr}.split-grid.img-left .split-card{order:0}.split-card,.hq-card{min-height:0}.split-img{aspect-ratio:4/3;min-height:0}}
/* cta duo */
.cd-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cd-card{position:relative;overflow:hidden;border-radius:var(--r);min-height:360px;display:flex;align-items:flex-end;background:var(--teal-2);color:var(--cream)}
.cd-ph{position:absolute;inset:0}
.cd-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform 1.2s var(--ease)}
.cd-card:hover img{transform:scale(1.05)}
.cd-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,59,57,.15),rgba(11,59,57,.85) 70%)}
.cd-in{position:relative;padding:clamp(24px,3vw,44px)}
.cd-in h3{font-size:clamp(24px,2.4vw,36px);letter-spacing:-.025em;line-height:1.1}
.cd-in p{margin:12px 0 22px;font-size:15.5px;line-height:1.55;color:rgba(248,245,239,.85);max-width:40ch}
@media (max-width:800px){.cd-grid{grid-template-columns:1fr}.cd-card{min-height:280px}}
/* offices accordion */
.of-list{margin-top:clamp(32px,4vw,52px);display:grid;gap:12px;max-width:900px;margin-inline:auto}
.of-group{border-radius:var(--rm);background:#fff;box-shadow:0 18px 44px rgba(15,77,74,.08);overflow:hidden}
.of-group summary{list-style:none;display:flex;align-items:center;gap:14px;padding:20px 24px;background:var(--teal);color:var(--cream);font-weight:700;font-size:16px;cursor:pointer}
.of-group summary::-webkit-details-marker{display:none}
.of-group summary span{flex:1}
.of-group summary em{font-style:normal;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--gold-2)}
.of-group summary svg{width:20px;height:20px;transition:transform .35s var(--ease)}
.of-group[open] summary svg{transform:rotate(180deg)}
.of-body{padding:6px 24px 10px;display:grid}
.of-item{padding:18px 0;border-bottom:1px solid var(--line)}
.of-item:last-child{border-bottom:0}
.of-item h4{font-size:16px;color:var(--teal);letter-spacing:-.01em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.of-rate,.of-kind{font-size:12px;font-weight:600;color:var(--gold-ink);display:inline-flex;align-items:center;gap:4px}
.of-rate svg{width:13px;height:13px;fill:var(--gold);stroke:var(--gold)}
.of-kind{padding:3px 10px;border-radius:999px;background:rgba(200,164,106,.14)}
.of-item p{margin-top:8px;font-size:14px;color:var(--ink-2);display:flex;gap:8px;align-items:flex-start;line-height:1.5}
.of-item p svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--gold)}
.of-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.of-links a{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;background:var(--cream-2);color:var(--teal);font-size:13px;font-weight:600;transition:.25s}
.of-links a:hover{background:var(--teal);color:var(--cream)}
.of-links a svg{width:14px;height:14px}
/* ===== growth stats ===== */
.st-head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end}
.st-head .lead{max-width:40ch;justify-self:end;margin:0}
.st-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:clamp(36px,4vw,56px)}
.st-item{padding:28px 26px 26px;border-radius:var(--rm);background:#fff;border:1px solid var(--line)}
.st-num{display:flex;align-items:baseline;gap:2px;color:var(--teal);font-family:var(--font-num);font-size:clamp(48px,5vw,76px);font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.st-suf{color:var(--gold);font-size:.55em;font-weight:700}
.st-item h3{margin-top:14px;font-size:17px;letter-spacing:-.01em}
.st-item p{margin-top:6px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.st-note{margin-top:22px;font-size:13.5px;color:var(--ink-2)}
@media (max-width:760px){.st-grid{grid-template-columns:1fr 1fr}.st-head{grid-template-columns:1fr}.st-head .lead{justify-self:start}}
@media (max-width:480px){.st-grid{grid-template-columns:1fr;gap:12px}.st-item{padding:22px 20px}}
/* ===== timeline ===== */
/* ledger of years: no rail or dots. Each phase = a row with the year as a big Geist numeral on the left, the content on the right,
rows separated by a rule; the rule under the row in view fills gold (app.js scrubs #tl .tl-line i, kept as a thin bar on the left edge) */
.tl{position:relative;margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.tl-line{position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent}
.tl-line i{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--gold);transform-origin:50% 0;transform:scaleY(0)}
.tl-row{display:grid;grid-template-columns:clamp(120px,16vw,220px) 1fr;gap:clamp(20px,4vw,64px);align-items:start;padding:clamp(28px,3.5vw,48px) 0 clamp(28px,3.5vw,48px) clamp(20px,2.5vw,36px);border-bottom:1px solid var(--line)}
.tl-when{position:relative;padding-top:2px}
.tl-when b{display:block;font-family:var(--font-num);font-size:clamp(40px,4.6vw,68px);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--teal)}
.tl-dot{display:none}
.tl-row.ahead .tl-when b{color:var(--ink-2);opacity:.6}
.tl-card{position:relative;padding:0 0 0 0;background:transparent;border:0}
.tl-row.ahead .tl-card{opacity:.75}
.tl-no{font-family:var(--font-num);display:inline-block;margin-bottom:10px;padding:5px 10px;border-radius:var(--rs);background:rgba(200,164,106,.16);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--gold-ink)}
.tl-card h3{font-size:clamp(22px,2.1vw,30px);letter-spacing:-.02em;line-height:1.15;color:var(--teal)}
.tl-tag{margin-top:6px;font-size:15.5px;color:var(--ink-2)}
.tl-card ul{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;padding:0;list-style:none;max-width:70ch}
.tl-card li{position:relative;padding-left:20px;font-size:15px;line-height:1.5}
.tl-card li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.tl-row.ahead .tl-card li::before{background:transparent;border:2px solid rgba(15,77,74,.35);width:6px;height:6px}
.tl-note{margin-top:14px;font-size:13.5px;line-height:1.5;color:var(--ink-2);font-style:italic}
.tl-close{margin-top:clamp(28px,4vw,48px);text-align:center;font-size:clamp(18px,1.6vw,24px);font-weight:600;color:var(--teal);letter-spacing:-.01em}
@media (max-width:760px){
.tl-row{grid-template-columns:1fr;gap:10px;padding-left:16px}
.tl-when b{font-size:36px}
.tl-card ul{grid-template-columns:1fr}
}
/* ===== project 5.5.5 cascade ===== */
.cascade{background:var(--teal-2)}
.cs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:clamp(36px,4vw,56px)}
.cs-item{position:relative;padding:28px 24px 26px;border-radius:var(--rm);background:rgba(248,245,239,.06);border:1px solid rgba(248,245,239,.12)}
.cs-no{font-family:var(--font-num);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--gold-2)}
.cs-num{margin-top:14px;font-family:var(--font-num);font-size:clamp(44px,4.2vw,64px);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--cream);font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-item h3{margin-top:14px;font-size:17px;letter-spacing:-.01em;line-height:1.3}
.cs-item h3 em{font-style:normal;color:var(--gold-2);font-weight:600}
.cs-item p{margin-top:10px;font-size:14px;line-height:1.55;color:rgba(248,245,239,.75)}
.cs-arrow{position:absolute;right:-19px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--gold);z-index:1;display:grid;place-items:center}
.cs-arrow svg{width:20px;height:20px}
.cs-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:clamp(28px,4vw,44px);padding-top:24px;border-top:1px solid rgba(248,245,239,.14)}
.cs-foot p{max-width:60ch;font-size:15px;line-height:1.55;color:rgba(248,245,239,.8)}
@media (max-width:760px){.cs-grid{grid-template-columns:1fr 1fr}.cs-item:nth-child(2) .cs-arrow{display:none}}
@media (max-width:700px){.cs-foot{flex-direction:column;align-items:flex-start}}
@media (max-width:480px){.cs-grid{grid-template-columns:1fr;gap:12px}.cs-arrow{display:none}}
/* ===== text page (legal) ===== */
.text-page{padding-top:clamp(24px,3vw,40px)}
.tp-wrap{max-width:760px}
.tp-updated{font-size:13px;color:var(--ink-2);margin-bottom:28px}
.tp-body{font-size:16.5px;line-height:1.7;color:var(--ink)}
.tp-body h2{font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;color:var(--teal);margin:40px 0 12px}
.tp-body h2:first-child{margin-top:0}
.tp-body h3{font-size:18px;color:var(--teal);margin:24px 0 8px}
.tp-body p{margin:0 0 14px}
.tp-body ul,.tp-body ol{margin:0 0 16px 22px}
.tp-body li{margin:4px 0}
/* ===== company pages: solutions ledger ===== */
/* sticky heading on the left, a numbered ledger on the right; the company colour lives only in the numbers and icon chips */
.sol{background:var(--cream)}
.sol-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:start}
.sol-sticky{position:sticky;top:110px}
.sol .h-l{color:var(--teal)}
.sol .lead{margin-top:18px;max-width:38ch}
/* count chip: number and label the same size inside one filled pill, so the row titles read as the big type */
.sol-count{display:inline-flex;align-items:stretch;margin-top:26px;border-radius:999px;overflow:hidden;border:1px solid color-mix(in srgb,var(--ac) 25%,transparent);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.sol-count b{display:grid;place-items:center;padding:10px 16px;font-family:var(--font-num);font-size:15px;font-weight:600;letter-spacing:.02em;background:var(--ac);color:#fff}
.sol-count span{display:grid;place-items:center;padding:10px 18px;color:var(--ac);background:color-mix(in srgb,var(--ac) 8%,#fff)}
.sol-pic{margin-top:32px;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;max-width:420px}
.sol-pic img{width:100%;height:100%;object-fit:cover;display:block}
.sol-list{list-style:none;border-top:1px solid var(--line)}
/* one row = a header line (index, icon chip, title, all on one baseline) and a body block underneath that runs the full width */
.sol-row{position:relative;padding:26px 0 30px;border-bottom:1px solid var(--line)}
/* header line: index, icon, title on one baseline, closed by a solid rule in the company colour; the body sits under it, indented to the icon */
.sol-head{position:relative;display:flex;align-items:center;gap:16px;padding-bottom:16px}
.sol-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ac);opacity:.85;transform:scaleX(.35);transform-origin:left;transition:transform .7s var(--ease)}
.sol-row:hover .sol-head::after,.sol-row.is-on .sol-head::after{transform:scaleX(1)}
.sol-no{flex:none;min-width:52px;font-family:var(--font-num);font-size:clamp(30px,2.6vw,38px);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--ac);opacity:.32;transition:opacity .4s}
.sol-row:hover .sol-no,.sol-row.is-on .sol-no{opacity:1}
.sol-ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:var(--rs);background:color-mix(in srgb,var(--ac) 12%,#fff);color:var(--ac);border:1px solid color-mix(in srgb,var(--ac) 20%,transparent);transition:background .4s,color .4s,transform .5s var(--ease)}
.sol-ic svg{width:22px;height:22px}
.sol-row:hover .sol-ic,.sol-row.is-on .sol-ic{background:var(--ac);color:#fff;transform:rotate(-6deg) scale(1.06)}
.sol-head h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.015em;line-height:1.25;color:var(--teal)}
.sol-body{margin-top:18px;padding-left:68px}
.sol-body p{font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:62ch}
.sol-items{margin-top:16px;padding-top:14px;border-top:1px dashed color-mix(in srgb,var(--ac) 30%,transparent)}
.sol-items-l{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ac);margin-bottom:10px}
.sol-items ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.sol-items li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.45;color:var(--ink)}
.sol-items li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--ac);opacity:.7}
@media (max-width:760px){.sol-grid{grid-template-columns:1fr;gap:36px}.sol-sticky{position:static}.sol-pic{max-width:none;aspect-ratio:16/10}}
@media (max-width:600px){.sol-row{padding:22px 0 24px}.sol-body{padding-left:0}.sol-head{gap:12px;padding-bottom:14px}.sol-no{min-width:40px;font-size:26px}.sol-ic{width:42px;height:42px;border-radius:var(--rs)}.sol-ic svg{width:19px;height:19px}.sol-head h3{font-size:20px}.sol-items ul{grid-template-columns:1fr}}
/* ===== company pages: photo mosaic ===== */
.gal{background:var(--cream-2)}
.gal.dark{background:var(--teal)}
.gal-head{margin-bottom:clamp(28px,4vw,48px)}
.gal .h-l{color:var(--teal);max-width:20ch}.gal.dark .h-l{color:var(--cream)}
.gal-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(150px,18vw,250px);gap:14px}
.gal-item{position:relative;margin:0;border-radius:var(--rm);overflow:hidden;grid-column:span 2;background:var(--cream-3)}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.gal-item:hover img{transform:scale(1.05)}
.gal-item:first-child{grid-column:span 4;grid-row:span 2}
.gal-grid[data-n="2"] .gal-item:first-child,.gal-grid[data-n="2"] .gal-item{grid-column:span 3;grid-row:span 2}
.gal-grid[data-n="3"] .gal-item:not(:first-child){grid-column:span 2;grid-row:span 1}
.gal-grid[data-n="4"]{grid-template-columns:repeat(4,1fr)}.gal-grid[data-n="4"] .gal-item:first-child{grid-column:span 2;grid-row:span 2}.gal-grid[data-n="4"] .gal-item:nth-child(2){grid-column:span 2}.gal-grid[data-n="4"] .gal-item:nth-child(n+3){grid-column:span 1}
.gal-grid[data-n="5"] .gal-item:nth-child(n+4){grid-column:span 3}
.gal-item figcaption{position:absolute;left:14px;bottom:14px;padding:8px 14px;border-radius:999px;background:rgba(248,245,239,.86);color:var(--teal);font-size:12.5px;font-weight:600;letter-spacing:.02em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@media (max-width:760px){.gal-grid,.gal-grid[data-n]{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(130px,30vw,200px);gap:10px}.gal-item,.gal-grid[data-n] .gal-item{grid-column:span 1!important;grid-row:span 1!important}.gal-grid[data-n="3"] .gal-item:first-child,.gal-grid[data-n="5"] .gal-item:first-child{grid-column:span 2!important}.gal-item{border-radius:var(--rs)}.gal-item figcaption{left:10px;bottom:10px;padding:6px 10px;font-size:11px}}
/* ===== company pages: sister companies ===== */
.sis-head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:clamp(32px,4vw,52px)}
.sis-head .lead{max-width:40ch;justify-self:end;margin:0;color:rgba(248,245,239,.8)}
.sis-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sis-grid[data-n="5"]{grid-template-columns:repeat(5,1fr)}
.sis-grid[data-n="3"]{grid-template-columns:repeat(3,1fr)}
.sis-card{position:relative;display:flex;flex-direction:column;gap:12px;min-height:220px;padding:26px 24px 24px;border-radius:var(--rm);background:rgba(248,245,239,.06);border:1px solid rgba(248,245,239,.12);color:var(--cream);overflow:hidden;transition:transform .5s var(--ease),background .4s,border-color .4s}
.sis-card::before{content:"";position:absolute;inset:auto -30% -40% auto;width:200px;height:200px;border-radius:50%;background:var(--cc);opacity:0;filter:blur(40px);transition:opacity .6s}
.sis-card:hover{transform:translateY(-6px);background:rgba(248,245,239,.09);border-color:color-mix(in srgb,var(--cc) 50%,transparent)}
.sis-card:hover::before{opacity:.35}
.sis-ic{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:var(--rs);background:var(--cc);color:#fff}
.sis-ic svg{width:24px;height:24px}
.sis-name{position:relative;margin-top:auto;font-size:20px;font-weight:600;letter-spacing:-.015em}
.sis-tag{position:relative;font-size:14px;line-height:1.5;color:rgba(248,245,239,.72)}
.sis-go{position:absolute;right:20px;top:22px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(248,245,239,.1);color:var(--cream);transition:background .4s,transform .5s var(--ease)}
.sis-go svg{width:16px;height:16px}
.sis-card:hover .sis-go{background:var(--cc);transform:rotate(45deg)}
@media (max-width:760px){.sis-grid,.sis-grid[data-n="5"]{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.sis-head{grid-template-columns:1fr}.sis-head .lead{justify-self:start}}
@media (max-width:480px){.sis-grid,.sis-grid[data-n="5"],.sis-grid[data-n="3"]{grid-template-columns:1fr}.sis-card{min-height:0;padding:22px 20px}}
/* ===== partner page: two sides (who does what) ===== */
.sides{background:var(--cream)}
.sides .h-l{color:var(--teal)}
.sd-grid{position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;margin-top:clamp(36px,4vw,56px)}
.sd-grid[data-n="3"]{grid-template-columns:1fr auto 1fr auto 1fr}
.sd-card{position:relative;padding:clamp(28px,3.5vw,44px);border-radius:var(--r);background:#fff;border:1px solid var(--line);color:var(--ink)}
.sd-card.is-teal{background:var(--teal);color:var(--cream);border-color:transparent}
.sd-card.is-gold{background:var(--gold);color:#fff;border-color:transparent}
.sd-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--rs);background:rgba(200,164,106,.16);color:var(--gold-ink)}
.sd-card.is-teal .sd-ic{background:rgba(248,245,239,.12);color:var(--gold-2)}
.sd-card.is-gold .sd-ic{background:rgba(255,255,255,.22);color:#fff}
.sd-ic svg{width:26px;height:26px}
.sd-k{display:block;margin-top:22px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.sd-card h3{margin-top:6px;font-size:clamp(24px,2.2vw,32px);letter-spacing:-.02em;line-height:1.15;color:var(--teal)}
.sd-card.is-teal h3,.sd-card.is-gold h3{color:inherit}
.sd-card ul{list-style:none;margin-top:22px;display:grid;gap:10px}
.sd-card li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5}
.sd-card li svg{flex:none;width:20px;height:20px;padding:3px;border-radius:50%;background:var(--teal);color:#fff;margin-top:2px}
.sd-card.is-teal li svg{background:var(--gold);color:#fff}
.sd-card.is-gold li svg{background:#fff;color:var(--gold)}
.sd-joint{align-self:center;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--gold);color:#fff;font-family:var(--font-num);font-size:26px;font-weight:600;box-shadow:0 10px 30px rgba(200,164,106,.35)}
.sd-note{margin:28px auto 0;max-width:60ch;text-align:center;font-size:15px;line-height:1.55;color:var(--ink-2)}
@media (max-width:860px){.sd-grid,.sd-grid[data-n="3"]{grid-template-columns:1fr}.sd-joint{justify-self:center;width:40px;height:40px;font-size:20px}}
/* ===== solutions: cards layout (pages outside the five companies) ===== */
/* heading on top, then numbered cards: the index is a big ghost numeral in the corner, the icon chip and title sit on it */
.sol.is-cards .sol-grid{grid-template-columns:1fr;gap:clamp(28px,4vw,48px)}
.sol.is-cards .sol-sticky{position:static;display:grid;grid-template-columns:1.1fr .9fr;gap:24px 48px;align-items:end}
.sol.is-cards .sol-sticky .lbl{grid-column:1;justify-self:start}
.sol.is-cards .sol-sticky .h-l{grid-column:1;max-width:16ch}
.sol.is-cards .sol-sticky .lead{grid-column:2;grid-row:1/3;align-self:end;margin:0}
.sol.is-cards .sol-count{grid-column:1;margin-top:8px;justify-self:start}
.sol.is-cards .sol-pic{display:none}
.sol.is-cards .sol-list{border:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sol.is-cards .sol-list[data-n="3"]{grid-template-columns:repeat(3,1fr)}
.sol.is-cards .sol-row{padding:clamp(24px,2.6vw,34px);border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s}
.sol.is-cards .sol-row:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(15,77,74,.10)}
.sol.is-cards .sol-head{display:block;padding-bottom:0}
.sol.is-cards .sol-head::after{display:none}
.sol.is-cards .sol-no{position:absolute;right:18px;top:6px;min-width:0;font-size:clamp(72px,7vw,110px);opacity:.10;line-height:1}
.sol.is-cards .sol-row:hover .sol-no,.sol.is-cards .sol-row.is-on .sol-no{opacity:.22}
.sol.is-cards .sol-ic{margin-bottom:18px}
.sol.is-cards .sol-head h3{position:relative;font-size:clamp(22px,2vw,26px);padding-right:60px}
.sol.is-cards .sol-body{margin-top:12px;padding-left:0}
.sol.is-cards .sol-items ul{grid-template-columns:1fr}
@media (max-width:760px){.sol.is-cards .sol-sticky{grid-template-columns:1fr}.sol.is-cards .sol-sticky .lead{grid-column:1;grid-row:auto;margin-top:16px}.sol.is-cards .sol-list,.sol.is-cards .sol-list[data-n="3"]{grid-template-columns:1fr}}
/* ===== #LifeAtMAFAR wall ===== */
/* a dense photo wall: tiles of four sizes on a 4-column grid, colour note tiles breaking the rhythm, a filter bar on top,
caption rises on hover (always visible on touch), tile opens a lightbox with the full description */
.life{background:var(--cream)}
.life-head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end}
.life-head .lead{max-width:40ch;justify-self:end;margin:0}
.life .h-l{color:var(--teal)}
.life-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(28px,3vw,40px)}
.life-f{height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--teal);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.life-f:hover{border-color:var(--teal)}
.life-f.is-on{background:var(--teal);color:var(--cream);border-color:var(--teal)}
.life-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,16vw,230px);grid-auto-flow:dense;gap:12px;margin-top:22px}
.life-tile{position:relative;margin:0;border-radius:var(--rm);overflow:hidden;background:var(--cream-3);cursor:pointer;outline:none}
.life-tile.sz-wide{grid-column:span 2}
.life-tile.sz-tall{grid-row:span 2}
.life-tile.sz-big{grid-column:span 2;grid-row:span 2}
.life-tile.is-hidden{display:none}
.life-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.life-tile:hover img,.life-tile:focus-visible img{transform:scale(1.06)}
.life-tile figcaption{position:absolute;inset:auto 0 0 0;padding:44px 16px 16px;color:#fff;background:linear-gradient(180deg,rgba(11,59,57,0) 0%,rgba(11,59,57,.82) 100%);transform:translateY(calc(100% - 52px));transition:transform .6s var(--ease)}
.life-tile:hover figcaption,.life-tile:focus-visible figcaption{transform:none}
.life-tile figcaption em{display:inline-block;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);margin-bottom:4px}
.life-tile figcaption b{display:block;font-size:15px;line-height:1.3;letter-spacing:-.01em}
.life-tile figcaption p{margin-top:6px;font-size:13px;line-height:1.45;opacity:.9;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.life-tile.is-note{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:22px;cursor:default}
.life-tile.is-note p{font-size:clamp(18px,1.6vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.life-tile.is-note span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.life-tile.tone-teal{background:var(--teal);color:var(--cream)}
.life-tile.tone-gold{background:var(--gold);color:#fff}
.life-tile.tone-cream{background:#fff;color:var(--teal);border:1px solid var(--line)}
.life-tile.tone-teal::before{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(200,164,106,.25)}
/* lightbox */
.life-box{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px}
.life-box[hidden]{display:none}
.life-box-bg{position:absolute;inset:0;background:rgba(11,59,57,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.life-box-in{position:relative;width:min(1000px,100%);max-height:calc(100vh - 40px);display:grid;grid-template-columns:1.4fr .8fr;border-radius:var(--r);overflow:hidden;background:var(--cream);color:var(--ink)}
.life-box-ph{background:#000;min-height:300px}
.life-box-ph img{width:100%;height:100%;max-height:calc(100vh - 40px);object-fit:contain;display:block}
.life-box-txt{padding:clamp(24px,3vw,40px);align-self:center}
.life-box-txt b{display:block;font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;line-height:1.2;color:var(--teal)}
.life-box-txt p{margin-top:12px;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.life-close{position:absolute;right:14px;top:14px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:rgba(248,245,239,.9);color:var(--teal);display:grid;place-items:center;cursor:pointer}
.life-close svg{width:18px;height:18px}
@media (max-width:760px){.life-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.life-head{grid-template-columns:1fr}.life-head .lead{justify-self:start}.life-grid{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(140px,38vw,200px);gap:8px}.life-tile{border-radius:var(--rs)}.life-tile figcaption{transform:none;padding:30px 12px 12px}.life-tile figcaption p{display:none}.life-tile figcaption b{font-size:13.5px}.life-tile.is-note{padding:16px}.life-tile.is-note p{font-size:17px}.life-filters{gap:6px}.life-f{height:36px;padding:0 14px;font-size:13px}.life-box-in{grid-template-columns:1fr;max-height:calc(100vh - 40px);overflow:auto}.life-box-ph{min-height:0}.life-box-ph img{max-height:60vh}}
/* ===== values: P ACBD ===== */
/* the acronym spelled out in huge Geist letters across the band, then one panel per letter: the letter as a ghost numeral,
an icon chip, the word and one line. The lead value (Purpose) is gold and sits a step above the rest */
.values{overflow:hidden}
.vl-word{display:flex;justify-content:center;gap:clamp(6px,2vw,28px);margin:clamp(28px,4vw,48px) 0 clamp(-30px,-3vw,-56px);font-family:var(--font-num);font-weight:600;font-size:clamp(72px,14vw,200px);line-height:1;letter-spacing:-.04em;color:rgba(248,245,239,.06);user-select:none}
.vl-word .is-lead{color:rgba(200,164,106,.22);margin-right:clamp(10px,3vw,48px)}
.vl-grid{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:clamp(40px,5vw,70px)}
.vl-grid[data-n="4"]{grid-template-columns:repeat(4,1fr)}
.vl-item{position:relative;min-height:300px;padding:26px 22px 26px;border-radius:var(--rm);background:rgba(248,245,239,.06);border:1px solid rgba(248,245,239,.12);display:flex;flex-direction:column;justify-content:flex-end;gap:10px;overflow:hidden;transition:transform .5s var(--ease),background .4s,border-color .4s}
.vl-item:hover{transform:translateY(-6px);background:rgba(248,245,239,.1);border-color:rgba(200,164,106,.5)}
.vl-item.is-lead{background:var(--gold);border-color:transparent;color:#fff;transform:translateY(-14px)}
.vl-item.is-lead:hover{transform:translateY(-20px);background:#b8935a}
.vl-big{position:absolute;right:10px;top:-14px;font-family:var(--font-num);font-weight:600;font-size:150px;line-height:1;letter-spacing:-.05em;color:rgba(248,245,239,.08);transition:color .5s}
.vl-item:hover .vl-big{color:rgba(200,164,106,.28)}
.vl-item.is-lead .vl-big{color:rgba(255,255,255,.18)}
.vl-ic{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:var(--rs);background:rgba(200,164,106,.16);color:var(--gold-2)}
.vl-item.is-lead .vl-ic{background:rgba(255,255,255,.22);color:#fff}
.vl-ic svg{width:22px;height:22px}
.vl-item h3{position:relative;margin-top:10px;font-size:clamp(22px,1.9vw,28px);letter-spacing:-.02em;line-height:1.1}
.vl-item p{position:relative;font-size:14px;line-height:1.5;color:rgba(248,245,239,.75)}
.vl-item.is-lead p{color:rgba(255,255,255,.9)}
.vl-note{margin:clamp(28px,4vw,44px) auto 0;max-width:62ch;text-align:center;font-size:15.5px;line-height:1.6;color:rgba(248,245,239,.8)}
@media (max-width:760px){.vl-grid,.vl-grid[data-n]{grid-template-columns:1fr 1fr}.vl-item{min-height:220px}.vl-item.is-lead{grid-column:span 2;transform:none;min-height:180px}.vl-item.is-lead:hover{transform:translateY(-6px)}.vl-word{margin-bottom:-10px}}
@media (max-width:520px){.vl-grid,.vl-grid[data-n]{grid-template-columns:1fr;gap:10px}.vl-item,.vl-item.is-lead{grid-column:auto;min-height:0;padding:22px 20px 22px 20px}.vl-big{font-size:110px;top:-10px}.vl-word{font-size:64px}}
.sol-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;font-weight:700;color:var(--ac);text-decoration:none}
.sol-link svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.sol-link:hover svg{transform:translateX(4px)}
.cs-grid[data-n="5"]{grid-template-columns:repeat(5,1fr)}
.cs-grid[data-n="5"] .cs-num{font-size:clamp(36px,3.4vw,52px)}
@media (max-width:760px){.cs-grid[data-n="5"]{grid-template-columns:1fr 1fr}.cs-grid[data-n="5"] .cs-item:nth-child(2) .cs-arrow,.cs-grid[data-n="5"] .cs-item:nth-child(4) .cs-arrow{display:none}}
@media (max-width:480px){.cs-grid[data-n="5"]{grid-template-columns:1fr}}
.sol.is-cards .sol-list[data-n="5"] .sol-row:last-child{grid-column:span 2}
@media (max-width:760px){.sol.is-cards .sol-list[data-n="5"] .sol-row:last-child{grid-column:auto}}
/* ===== ecosystem: five full-width rows, colour bar per company ===== */
.eco{background:var(--cream-2)}
.eco-head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.eco-head .lead{max-width:44ch;justify-self:end;margin:0}
.eco .h-l{color:var(--teal);max-width:18ch}
.eco-rows{display:grid;gap:10px}
.eco-row{position:relative;display:grid;grid-template-columns:64px 60px 1fr 44px;gap:clamp(14px,2vw,28px);align-items:center;padding:clamp(20px,2.4vw,30px) clamp(18px,2vw,28px);background:#fff;border:1px solid var(--line);color:var(--teal);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s,border-color .4s}
.eco-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--cc);transform:skewX(var(--skew));transform-origin:0 100%}
.eco-row:hover{transform:translateX(6px);border-color:color-mix(in srgb,var(--cc) 45%,transparent);box-shadow:0 16px 40px rgba(15,77,74,.10)}
.eco-n{font-family:var(--font-num);font-size:clamp(30px,3vw,44px);font-weight:600;letter-spacing:-.04em;color:var(--cc);opacity:.4;line-height:1;padding-left:10px}
.eco-row:hover .eco-n{opacity:1}
.eco-ic{display:grid;place-items:center;width:56px;height:56px;background:color-mix(in srgb,var(--cc) 12%,#fff);color:var(--cc);border:1px solid color-mix(in srgb,var(--cc) 22%,transparent);transition:background .4s,color .4s}
.eco-ic svg{width:24px;height:24px}
.eco-row:hover .eco-ic{background:var(--cc);color:#fff}
/* the lockup in the row: the wordmark set small over the company's own word, which is the same
construction the dial uses on the home page. It stands where the icon chip used to. */
.eco-lock{display:grid;justify-items:start;align-content:center;gap:2px;min-width:0}
.eco-lock-top{width:clamp(76px,7vw,108px);height:auto;fill:var(--teal);opacity:.55}
.eco-lock b{font-size:clamp(24px,2.4vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1;
text-transform:uppercase;color:var(--cc)}
.eco-row:hover .eco-lock-top{opacity:.8}
.eco-main b{display:inline;font-size:clamp(19px,1.8vw,24px);letter-spacing:-.015em}
.eco-main em{font-style:normal;margin-left:10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cc)}
.eco-txt{display:block;margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--ink-2);max-width:74ch}
.eco-go{display:grid;place-items:center;width:26px;height:26px;color:color-mix(in srgb,var(--teal) 55%,transparent);transition:color .4s,transform .5s var(--ease)}
.eco-go svg{width:22px;height:22px;stroke-width:1.6}
.eco-row:hover .eco-go{color:var(--cc);transform:translateX(4px)}
.eco-hint{margin-top:20px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:760px){.eco-head{grid-template-columns:1fr}.eco-head .lead{justify-self:start}.eco-row{grid-template-columns:1fr;gap:12px;padding:18px 16px}.eco-go{display:none}.eco-n{font-size:26px;padding-left:8px}.eco-main b{font-size:18px}.eco-main em{display:block;margin:4px 0 0}}
/* ===== #LifeAtMAFAR wall ===== */
/* a dense photo wall: tiles of four sizes on a 4-column grid, colour note tiles breaking the rhythm, a filter bar on top,
caption rises on hover (always visible on touch), tile opens a lightbox with the full description */
.life{background:var(--cream)}
.life-head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end}
.life-head .lead{max-width:40ch;justify-self:end;margin:0}
.life .h-l{color:var(--teal)}
.life-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(28px,3vw,40px)}
.life-f{height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--teal);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.life-f:hover{border-color:var(--teal)}
.life-f.is-on{background:var(--teal);color:var(--cream);border-color:var(--teal)}
.life-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,16vw,230px);grid-auto-flow:dense;gap:12px;margin-top:22px}
.life-tile{position:relative;margin:0;border-radius:var(--rm);overflow:hidden;background:var(--cream-3);cursor:pointer;outline:none}
.life-tile.sz-wide{grid-column:span 2}
.life-tile.sz-tall{grid-row:span 2}
.life-tile.sz-big{grid-column:span 2;grid-row:span 2}
.life-tile.is-hidden{display:none}
.life-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.life-tile:hover img,.life-tile:focus-visible img{transform:scale(1.06)}
.life-tile figcaption{position:absolute;inset:auto 0 0 0;padding:44px 16px 16px;color:#fff;background:linear-gradient(180deg,rgba(11,59,57,0) 0%,rgba(11,59,57,.82) 100%);transform:translateY(calc(100% - 52px));transition:transform .6s var(--ease)}
.life-tile:hover figcaption,.life-tile:focus-visible figcaption{transform:none}
.life-tile figcaption em{display:inline-block;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);margin-bottom:4px}
.life-tile figcaption b{display:block;font-size:15px;line-height:1.3;letter-spacing:-.01em}
.life-tile figcaption p{margin-top:6px;font-size:13px;line-height:1.45;opacity:.9;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.life-tile.is-note{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:22px;cursor:default}
.life-tile.is-note p{font-size:clamp(18px,1.6vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.life-tile.is-note span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.life-tile.tone-teal{background:var(--teal);color:var(--cream)}
.life-tile.tone-gold{background:var(--gold);color:#fff}
.life-tile.tone-cream{background:#fff;color:var(--teal);border:1px solid var(--line)}
.life-tile.tone-teal::before{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(200,164,106,.25)}
/* lightbox */
.life-box{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px}
.life-box[hidden]{display:none}
.life-box-bg{position:absolute;inset:0;background:rgba(11,59,57,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.life-box-in{position:relative;width:min(1000px,100%);max-height:calc(100vh - 40px);display:grid;grid-template-columns:1.4fr .8fr;border-radius:var(--r);overflow:hidden;background:var(--cream);color:var(--ink)}
.life-box-ph{background:#000;min-height:300px}
.life-box-ph img{width:100%;height:100%;max-height:calc(100vh - 40px);object-fit:contain;display:block}
.life-box-txt{padding:clamp(24px,3vw,40px);align-self:center}
.life-box-txt b{display:block;font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;line-height:1.2;color:var(--teal)}
.life-box-txt p{margin-top:12px;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.life-close{position:absolute;right:14px;top:14px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:rgba(248,245,239,.9);color:var(--teal);display:grid;place-items:center;cursor:pointer}
.life-close svg{width:18px;height:18px}
@media (max-width:760px){.life-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.life-head{grid-template-columns:1fr}.life-head .lead{justify-self:start}.life-grid{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(140px,38vw,200px);gap:8px}.life-tile{border-radius:var(--rs)}.life-tile figcaption{transform:none;padding:30px 12px 12px}.life-tile figcaption p{display:none}.life-tile figcaption b{font-size:13.5px}.life-tile.is-note{padding:16px}.life-tile.is-note p{font-size:17px}.life-filters{gap:6px}.life-f{height:36px;padding:0 14px;font-size:13px}.life-box-in{grid-template-columns:1fr;max-height:calc(100vh - 40px);overflow:auto}.life-box-ph{min-height:0}.life-box-ph img{max-height:60vh}}
/* ===== values: P ACBD ===== */
/* the acronym spelled out in huge Geist letters across the band, then one panel per letter: the letter as a ghost numeral,
an icon chip, the word and one line. The lead value (Purpose) is gold and sits a step above the rest */
.values{overflow:hidden}
.vl-word{display:flex;justify-content:center;gap:clamp(6px,2vw,28px);margin:clamp(28px,4vw,48px) 0 clamp(-30px,-3vw,-56px);font-family:var(--font-num);font-weight:600;font-size:clamp(72px,14vw,200px);line-height:1;letter-spacing:-.04em;color:rgba(248,245,239,.06);user-select:none}
.vl-word .is-lead{color:rgba(200,164,106,.22);margin-right:clamp(10px,3vw,48px)}
.vl-grid{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:clamp(40px,5vw,70px)}
.vl-grid[data-n="4"]{grid-template-columns:repeat(4,1fr)}
.vl-item{position:relative;min-height:300px;padding:26px 22px 26px;border-radius:var(--rm);background:rgba(248,245,239,.06);border:1px solid rgba(248,245,239,.12);display:flex;flex-direction:column;justify-content:flex-end;gap:10px;overflow:hidden;transition:transform .5s var(--ease),background .4s,border-color .4s}
.vl-item:hover{transform:translateY(-6px);background:rgba(248,245,239,.1);border-color:rgba(200,164,106,.5)}
.vl-item.is-lead{background:var(--gold);border-color:transparent;color:#fff;transform:translateY(-14px)}
.vl-item.is-lead:hover{transform:translateY(-20px);background:#b8935a}
.vl-big{position:absolute;right:10px;top:-14px;font-family:var(--font-num);font-weight:600;font-size:150px;line-height:1;letter-spacing:-.05em;color:rgba(248,245,239,.08);transition:color .5s}
.vl-item:hover .vl-big{color:rgba(200,164,106,.28)}
.vl-item.is-lead .vl-big{color:rgba(255,255,255,.18)}
.vl-ic{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:var(--rs);background:rgba(200,164,106,.16);color:var(--gold-2)}
.vl-item.is-lead .vl-ic{background:rgba(255,255,255,.22);color:#fff}
.vl-ic svg{width:22px;height:22px}
.vl-item h3{position:relative;margin-top:10px;font-size:clamp(22px,1.9vw,28px);letter-spacing:-.02em;line-height:1.1}
.vl-item p{position:relative;font-size:14px;line-height:1.5;color:rgba(248,245,239,.75)}
.vl-item.is-lead p{color:rgba(255,255,255,.9)}
.vl-note{margin:clamp(28px,4vw,44px) auto 0;max-width:62ch;text-align:center;font-size:15.5px;line-height:1.6;color:rgba(248,245,239,.8)}
@media (max-width:760px){.vl-grid,.vl-grid[data-n]{grid-template-columns:1fr 1fr}.vl-item{min-height:220px}.vl-item.is-lead{grid-column:span 2;transform:none;min-height:180px}.vl-item.is-lead:hover{transform:translateY(-6px)}.vl-word{margin-bottom:-10px}}
@media (max-width:520px){.vl-grid,.vl-grid[data-n]{grid-template-columns:1fr;gap:10px}.vl-item,.vl-item.is-lead{grid-column:auto;min-height:0;padding:22px 20px 22px 20px}.vl-big{font-size:110px;top:-10px}.vl-word{font-size:64px}}
.sol-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;font-weight:700;color:var(--ac);text-decoration:none}
.sol-link svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.sol-link:hover svg{transform:translateX(4px)}
.cs-grid[data-n="5"]{grid-template-columns:repeat(5,1fr)}
.cs-grid[data-n="5"] .cs-num{font-size:clamp(36px,3.4vw,52px)}
@media (max-width:760px){.cs-grid[data-n="5"]{grid-template-columns:1fr 1fr}.cs-grid[data-n="5"] .cs-item:nth-child(2) .cs-arrow,.cs-grid[data-n="5"] .cs-item:nth-child(4) .cs-arrow{display:none}}
@media (max-width:480px){.cs-grid[data-n="5"]{grid-template-columns:1fr}}
.sol.is-cards .sol-list[data-n="5"] .sol-row:last-child{grid-column:span 2}
@media (max-width:760px){.sol.is-cards .sol-list[data-n="5"] .sol-row:last-child{grid-column:auto}}
/* ===== ecosystem hub (What We Do) ===== */
/* a hub diagram instead of the homepage wheel: Group in the centre, four companies on a ring joined by lines in their colour.
The list on the left and the nodes on the right light each other up on hover (JS sets .is-on on both) */
.eco{background:var(--cream-2);overflow:hidden}
.eco-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.eco .h-l{color:var(--teal)}
.eco .lead{margin-top:16px}
.eco-list{list-style:none;margin-top:clamp(24px,3vw,36px);display:grid;gap:6px}
.eco-item{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:14px 16px;border-radius:var(--rm);border:1px solid transparent;transition:background .35s,border-color .35s;cursor:default}
.eco-item.is-on,.eco-item:hover{background:#fff;border-color:var(--line)}
.eco-dot{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--rs);background:var(--cc);color:#fff;flex:none}
.eco-dot svg{width:20px;height:20px}
.eco-item h3{font-size:18px;letter-spacing:-.01em;line-height:1.3;color:var(--teal)}
.eco-item h3 em{font-style:normal;font-weight:500;font-size:13px;color:var(--ink-2);margin-left:6px}
.eco-item p{margin-top:4px;font-size:14px;line-height:1.5;color:var(--ink-2);max-width:48ch}
.eco-item a{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;font-weight:700;color:var(--cc)}
.eco-item a svg{width:14px;height:14px}
.eco-hub-wrap{display:grid;justify-items:center;gap:14px}
.eco-hub{position:relative;width:min(100%,580px);aspect-ratio:1}
.eco-ring{position:absolute;inset:8%;border-radius:50%;border:1.5px dashed rgba(15,77,74,.28);animation:eco-spin 60s linear infinite}
.eco-ring.r2{inset:26%;border-style:solid;border-color:rgba(15,77,74,.10);animation:none}
@keyframes eco-spin{to{transform:rotate(360deg)}}
.eco-line{position:absolute;left:50%;top:50%;width:42%;height:2px;margin-top:-1px;transform-origin:0 50%;background:linear-gradient(90deg,rgba(15,77,74,.15),var(--cc));opacity:.55;transition:opacity .35s}
.eco-hub .l1{transform:rotate(-135deg)}.eco-hub .l2{transform:rotate(-45deg)}.eco-hub .l3{transform:rotate(45deg)}.eco-hub .l4{transform:rotate(135deg)}
.eco-hub[data-n="3"] .l1{transform:rotate(-90deg)}.eco-hub[data-n="3"] .l2{transform:rotate(30deg)}.eco-hub[data-n="3"] .l3{transform:rotate(150deg)}
.eco-core{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--teal);color:var(--cream);display:grid;place-content:center;justify-items:center;text-align:center;gap:2px;box-shadow:0 20px 50px rgba(15,77,74,.25);border:6px solid var(--cream-2);z-index:2;transition:transform .5s var(--ease),box-shadow .5s}
.eco-core.is-on,.eco-core:hover{transform:translate(-50%,-50%) scale(1.05);box-shadow:0 26px 60px rgba(15,77,74,.35)}
.eco-mark{width:34px;height:34px;fill:var(--gold);margin-bottom:6px}
.eco-core b{font-size:clamp(14px,1.3vw,17px);letter-spacing:-.01em}
.eco-core span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.eco-node{position:absolute;width:30%;transform:translate(-50%,-50%);display:grid;justify-items:center;text-align:center;gap:4px;padding:14px 10px 12px;border-radius:var(--rm);background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px rgba(15,77,74,.10);color:var(--teal);z-index:2;transition:transform .5s var(--ease),box-shadow .5s,border-color .35s}
.eco-node:hover,.eco-node.is-on{transform:translate(-50%,-50%) scale(1.06);border-color:var(--cc);box-shadow:0 18px 40px rgba(15,77,74,.18)}
.eco-hub .n1{left:19%;top:19%}.eco-hub .n2{left:81%;top:19%}.eco-hub .n3{left:81%;top:81%}.eco-hub .n4{left:19%;top:81%}
.eco-hub[data-n="3"] .n1{left:50%;top:10%}.eco-hub[data-n="3"] .n2{left:86%;top:72%}.eco-hub[data-n="3"] .n3{left:14%;top:72%}
.eco-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--rs);background:var(--cc);color:#fff}
.eco-ic svg{width:20px;height:20px}
.eco-node b{font-size:13.5px;letter-spacing:-.01em;line-height:1.2}
.eco-node span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.eco-hint{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:760px){.eco-grid{grid-template-columns:1fr}.eco-hub-wrap{order:-1}.eco-hub{width:min(100%,420px)}.eco-node{width:32%;padding:10px 6px 9px}.eco-node b{font-size:12px}.eco-node span{display:none}.eco-ic{width:36px;height:36px}.eco-core{width:36%}.eco-mark{width:26px;height:26px}}
@media (max-width:480px){.eco-hub{width:100%}.eco-node{width:34%}.eco-item{grid-template-columns:38px 1fr;gap:12px;padding:12px}.eco-dot{width:38px;height:38px}}
/* page hero, ticker style: same teal tile, title centred, no photo cards; a strip of outline words runs slowly across the bottom */
.phero.is-ticker{background:#01433F;color:var(--cream);text-align:center;padding:clamp(140px,18vh,200px) 0 0;min-height:0;display:block;overflow:hidden}
.phero.is-ticker .phero-in{display:block}
.phero.is-ticker .phero-h{margin-inline:auto;max-width:14ch;font-size:clamp(44px,7vw,104px)}
.phero.is-ticker .lead{margin:20px auto 0;color:rgba(248,245,239,.85);max-width:52ch}
.phero-ticker{position:relative;margin-top:clamp(40px,6vw,80px);padding:18px 0 22px;border-top:1px solid rgba(248,245,239,.14);white-space:nowrap;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.phero-ticker-in{display:inline-flex;align-items:center;gap:28px;animation:phero-run 40s linear infinite}
.phero-ticker span{font-family:var(--font-num);font-weight:600;font-size:clamp(28px,4vw,56px);letter-spacing:-.03em;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(248,245,239,.55)}
.phero-ticker span:nth-child(4n+1){color:var(--gold);-webkit-text-stroke:0}
.phero-ticker i{width:8px;height:8px;border-radius:50%;background:var(--gold);opacity:.7}
@keyframes phero-run{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.phero-ticker-in{animation:none}}
@media (max-width:600px){.phero.is-ticker{padding-top:120px}.phero-ticker-in{gap:18px;animation-duration:28s}}
/* ===== message: full-width portrait + statement (chairman / CEO note) ===== */
/* the band runs edge to edge: portrait on one side over a diagonal cream-to-gold slab, the statement on the teal side at reading size, key phrases in gold */
.msg{position:relative;background:var(--teal-2);color:var(--cream);overflow:hidden}
/* the teal band is full-bleed, the content is capped like the rest of the site so nothing sits at the screen edge on wide monitors */
.msg-in{width:min(1360px,100%);margin-inline:auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:min(88vh,720px)}
.msg.is-right .msg-ph{order:2}
.msg-ph{position:relative;min-height:420px;background:var(--teal-2);overflow:hidden}
.msg-slab{position:absolute;inset:0;background:linear-gradient(100deg,var(--teal-2) 0%,var(--teal-2) 22%,var(--gold-2) 22%,var(--gold) 62%,var(--teal-2) 62%)}
.msg-ph img{position:absolute;left:0;right:0;bottom:0;width:100%;height:94%;object-fit:contain;object-position:center bottom;filter:drop-shadow(-12px 20px 40px rgba(0,0,0,.25))}
.msg-ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(180deg,rgba(11,59,57,0),rgba(11,59,57,.85));pointer-events:none}
.msg-who{position:absolute;z-index:2;left:clamp(20px,4vw,56px);bottom:clamp(20px,4vw,48px);display:flex;align-items:center;gap:14px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.msg-who i{width:10px;height:44px;background:#fff;transform:skewX(var(--skew))}
.msg-who span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.msg-who b{display:block;font-size:clamp(18px,1.6vw,24px);letter-spacing:.02em;text-transform:uppercase;line-height:1.15}
.msg-txt{position:relative;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:clamp(48px,7vw,96px) clamp(24px,6vw,96px) clamp(48px,7vw,96px) clamp(24px,5vw,72px)}
.msg-txt .lbl{align-self:flex-start;margin-bottom:0}
.msg-quote{font-size:clamp(20px,1.9vw,28px);font-weight:600;letter-spacing:-.015em;line-height:1.35;max-width:26ch}
.msg-quote em{font-style:normal;color:var(--gold-2)}
.msg-body{font-size:15.5px;line-height:1.65;color:rgba(248,245,239,.85);max-width:58ch}
.msg-body p+p{margin-top:1em}
.msg-txt .btn{align-self:flex-start;margin-top:6px}
@media (max-width:760px){.msg-in{grid-template-columns:1fr;min-height:0}.msg.is-right .msg-ph{order:0}.msg-ph{min-height:0;aspect-ratio:4/5}.msg-slab{background:linear-gradient(100deg,var(--teal-2) 0%,var(--teal-2) 14%,var(--gold-2) 14%,var(--gold) 70%,var(--teal-2) 70%)}.msg-txt{padding:36px 24px 44px}.msg-quote{max-width:none}.msg-txt .btn{align-self:flex-start}}
.msg+.msg .msg-in{border-top:1px solid rgba(248,245,239,.14)}
.msg.is-right .msg-slab{transform:scaleX(-1)}
/* CTA duo, split: photo on top at full strength, text panel below. Nothing sits on the photo */
.cta-duo.is-split .cd-card{display:grid;grid-template-rows:clamp(200px,20vw,280px) auto;align-items:stretch;min-height:0}
.cta-duo.is-split .cd-card::before{display:none}
.cta-duo.is-split .cd-ph{position:relative;overflow:hidden}
.cta-duo.is-split .cd-card img{position:absolute;opacity:1}
.cta-duo.is-split .cd-in{padding:clamp(22px,2.6vw,36px) clamp(24px,3vw,44px) clamp(26px,3vw,40px)}
.cta-duo.is-split .cd-card:nth-child(2){background:var(--cream-2);color:var(--teal)}
.cta-duo.is-split .cd-card:nth-child(2) .cd-in p{color:var(--ink-2)}
/* CTA duo, slant: text on the teal side, photo on the right behind a gold diagonal edge (same language as the message band) */
.cta-duo.is-slant .cd-card{display:grid;grid-template-columns:1.05fr .95fr;min-height:340px;align-items:center}
.cta-duo.is-slant .cd-card::before{display:none}
.cta-duo.is-slant .cd-ph{position:relative;order:2;height:100%;min-height:340px;clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}
.cta-duo.is-slant .cd-ph::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,var(--gold) 0,var(--gold) 4.5%,transparent 4.5%);pointer-events:none}
.cta-duo.is-slant .cd-card img{position:absolute;opacity:1}
.cta-duo.is-slant .cd-in{order:1;padding:clamp(24px,3vw,44px) clamp(8px,1vw,16px) clamp(24px,3vw,44px) clamp(24px,3vw,44px)}
.cta-duo.is-slant .cd-in h3{font-size:clamp(22px,2vw,30px)}
.cta-duo.is-slant .cd-in p{max-width:30ch}
@media (max-width:760px){.cta-duo.is-slant .cd-card{grid-template-columns:1fr;min-height:0}.cta-duo.is-slant .cd-ph{min-height:200px;clip-path:polygon(0 18%,100% 0,100% 100%,0 100%)}.cta-duo.is-slant .cd-ph::before{background:linear-gradient(170deg,var(--gold) 0,var(--gold) 7%,transparent 7%)}.cta-duo.is-slant .cd-in{padding:24px}}
/* ===== slant motif (v3.09): the gold diagonal from the message band, echoed as small marks across the site =====
Remove this block to revert; layout and content are untouched. */
/* 1. section labels: the tag itself is a skewed box (same 18deg as the stroke), text stays upright; border survives because there is no clip-path */
.lbl{position:relative;border-radius:0;padding:8px 18px 8px 16px;background:transparent;border:0;clip-path:none;isolation:isolate}
.lbl::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(200,164,106,.14);transform:skewX(var(--skew))}
.lbl svg{width:5px;height:15px;fill:none;background:var(--gold);transform:skewX(var(--skew));margin-right:3px}
.lbl svg use{display:none}
.dark .lbl,.lbl.on-dark{background:transparent;border:0}
.dark .lbl::before,.lbl.on-dark::before{background:rgba(248,245,239,.08);border:1px solid rgba(200,164,106,.55)}
/* 2. numbers: a small slanted gold stroke before the index / year */
.sol-no::before,.tl-when b::before,.vl-item h3::before,.cs-no::before,.st-num::before{content:"";display:inline-block;width:4px;height:.62em;margin-right:.32em;background:var(--gold);transform:skewX(var(--skew));vertical-align:-.04em}
.sol.is-cards .sol-no::before{display:none}
.sol-no::before{height:.6em;width:5px}
.tl-when b::before{width:6px;height:.55em;margin-right:.2em}
/* 3. page hero tile: one thin gold diagonal behind the photo cards */
.phero.is-tile .phero-tile::before,.phero.is-ticker .phero-tile::before{content:"";position:absolute;top:-10%;bottom:-10%;right:18%;width:min(11vw,150px);background:linear-gradient(180deg,var(--gold-2),var(--gold));opacity:.8;transform:skewX(-14deg);pointer-events:none}
.phero.is-ticker .phero-tile::before{right:auto;left:12%;opacity:.35}
/* 5. footer: a slanted gold notch on the top edge */
.foot::before{content:"";position:absolute;left:clamp(24px,6vw,96px);top:0;width:120px;height:8px;background:var(--gold);transform:skewX(-30deg);z-index:2}
@media (max-width:600px){.phero.is-tile .phero-tile::before{right:8%;width:14vw}.foot::before{width:70px;height:6px}}
/* 6. small chips share the slant: count chip, caption chips, filter chips, kind tags, wheel chips. Buttons and the nav pill stay round. */
.sol-count{border-radius:0;border:0;overflow:visible;position:relative;isolation:isolate;margin-left:6px}
.sol-count::before{content:"";position:absolute;inset:0;z-index:-1;border:1px solid color-mix(in srgb,var(--ac) 25%,transparent);transform:skewX(var(--skew))}
.sol-count b{position:relative;background:transparent}
.sol-count b::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--ac);transform:skewX(var(--skew))}
.sol-count span{position:relative;background:transparent}
.sol-count span::after{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--ac) 8%,#fff);transform:skewX(var(--skew))}
.gal-item figcaption,.bnx-card figcaption,.mv-cap,.life-tile figcaption em,.of-kind,.chip,.fpill,.tl-no,.cs-no,.eco-item h3 em,.sd-k,.sis-tag{border-radius:0}
.gal-item figcaption,.bnx-card figcaption,.mv-cap,.of-kind,.chip,.fpill,.life-f,.tl-no{position:relative;isolation:isolate;background:transparent!important;border-color:transparent!important}
.gal-item figcaption::before,.bnx-card figcaption::before,.mv-cap::before,.of-kind::before,.chip::before,.fpill::before,.life-f::before,.tl-no::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--skew))}
.gal-item figcaption::before,.bnx-card figcaption::before,.mv-cap::before{background:rgba(248,245,239,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.of-kind::before,.tl-no::before{background:rgba(200,164,106,.16)}
.chip::before{background:var(--c,var(--teal))}
.fpill::before,.life-f::before{background:#fff;border:1px solid var(--line)}
.life-f{border-radius:0}
.life-f.is-on::before{background:var(--teal);border-color:var(--teal)}
.gal-item figcaption,.bnx-card figcaption,.mv-cap,.life-f,.tl-no,.of-kind{margin-left:6px}
.gal-item figcaption,.bnx-card figcaption,.mv-cap{right:auto;width:max-content;max-width:calc(100% - 28px)}
/* ===== v3.13: slanted buttons + full-width nav bar (backup: backup/mafar-group-v3.11-2026-09-22) =====
One angle for the whole system: 12deg (Tailwind -skew-x-12, the common slant for this button style). The button is a plain box;
the fill is a skewed ::before that carries the colour AND the shine (animated background-position), so nothing needs overflow:hidden. */
:root{--skew:-12deg}
.btn{border-radius:0;height:50px;padding:0 30px;background:transparent!important;isolation:isolate;box-shadow:none!important;overflow:visible!important;margin-inline:7px;letter-spacing:.01em}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--skew));background:var(--teal);transition:filter .3s,transform .5s var(--ease)}
.btn::after{display:none!important}
.btn:hover::before{transform:skewX(var(--skew)) translateX(3px)}
.btn svg{width:20px;height:20px;padding:0;border-radius:0;background:transparent!important;color:currentColor!important}
.btn:has(svg){padding-right:28px}
.btn.gold{color:#fff;overflow:visible!important}
.btn.gold::before{background:linear-gradient(110deg,var(--gold) 0 40%,#dcc49a 50%,var(--gold) 60% 100%) 0 0 / 300% 100% var(--gold);animation:btn-sheen 4s ease-in-out infinite}
@keyframes btn-sheen{0%,55%{background-position:100% 0}100%{background-position:0 0}}
.btn.gold:hover::before{filter:brightness(.94)}
.btn.line{color:var(--teal)}
.btn.line::before{background:transparent;border:1.5px solid var(--teal)}
.btn.line:hover::before{background:rgba(15,77,74,.06)}
.btn.gold.teal{color:var(--cream)}
.btn.gold.teal::before{background:var(--teal);animation:none}
.hero .btn.line,.sec.dark .btn.line,.msg .btn.line,.dark .btn.line{color:var(--cream)}
.hero .btn.line::before,.sec.dark .btn.line::before,.msg .btn.line::before,.dark .btn.line::before{border-color:rgba(248,245,239,.8)}
.btn.sm{height:44px;padding:0 24px;font-size:14px}
.btn.sm:has(svg){padding-right:22px}
.hands-cta .btn svg,.xb .btn svg{width:22px;height:22px;padding:0}
.hero-cta{gap:18px}
/* nav: full-width bar with a flat bottom edge instead of the floating pill */
.nav{padding:0}
.nav.scrolled{padding:0}
.nav .wrap{width:min(1400px,calc(100% - 48px))}
.nav-in{border-radius:0;padding:14px 0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.nav.scrolled .nav-in{padding:10px 0;box-shadow:none}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(15,77,74,.08),0 10px 30px rgba(6,40,38,.08)}
.nav-links a{border-radius:0}
.nav-cta .navcta{height:44px;margin-inline:8px 12px}
.burger{border-radius:0}
body.menu-open .nav::before{opacity:0}
@media (max-width:600px){.btn{padding:0 22px;margin-inline:6px}.btn:has(svg){padding-right:20px}}
/* v3.14: primary (gold) button gets an offset outline echo behind the fill (the "double parallelogram" used on sports/esports CTAs) so it reads as a solid object; tighter hero gap; mobile sizes */
.btn.gold{position:relative}
.btn.gold::after{display:block!important;content:"";position:absolute;inset:0;z-index:-2;transform:skewX(var(--skew)) translate(5px,5px);border:1.5px solid var(--gold);background:transparent;animation:none;left:0;top:0;width:auto;height:auto;clip-path:none;opacity:.9;transition:transform .5s var(--ease)}
.btn.gold:hover::after{transform:skewX(var(--skew)) translate(7px,7px)}
.btn.gold.teal::after{border-color:var(--teal)}
.hero .btn.gold::after,.sec.dark .btn.gold::after,.msg .btn.gold::after,.dark .btn.gold::after{border-color:var(--gold-2)}
.hero-cta{gap:12px}
@media (max-width:600px){.btn{height:46px;font-size:14px}.hero-cta{gap:10px}.btn.gold::after{transform:skewX(var(--skew)) translate(4px,4px)}}
/* v3.15: burger = three slanted bars (same 12deg), no box; bars stagger short-long-mid, and fold into an X when the menu is open */
.burger{width:44px;height:44px;border:0;background:transparent;display:none;place-items:center;color:var(--teal)}
.bg-bars{position:relative;display:block;width:30px;height:20px}
.bg-bars i{position:absolute;left:0;height:3px;background:currentColor;transform:skewX(var(--skew));transform-origin:50% 50%;transition:transform .4s var(--ease),width .4s var(--ease),opacity .3s,top .4s var(--ease)}
.bg-bars i:nth-child(1){top:0;width:22px}
.bg-bars i:nth-child(2){top:8.5px;width:30px}
.bg-bars i:nth-child(3){top:17px;width:26px}
body.menu-open .bg-bars i:nth-child(1){top:8.5px;width:30px;transform:rotate(45deg)}
body.menu-open .bg-bars i:nth-child(2){opacity:0;transform:skewX(var(--skew)) scaleX(0)}
body.menu-open .bg-bars i:nth-child(3){top:8.5px;width:30px;transform:rotate(-45deg)}
body.menu-open .burger{color:var(--cream)!important}
@media (max-width:1100px){.burger{display:grid}}
/* v3.16: nav bar = clean glass (translucent white, blur + saturate, hairline edge, soft shadow); shrinks on scroll (bar 18px -> 8px padding, logo 40 -> 32, CTA 44 -> 38) */
.nav::before{background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);box-shadow:inset 0 -1px 0 rgba(15,77,74,.10),0 6px 24px rgba(6,40,38,.06);transition:background .4s,box-shadow .4s}
.nav.scrolled::before{background:rgba(255,255,255,.82);box-shadow:inset 0 -1px 0 rgba(15,77,74,.12),0 12px 36px rgba(6,40,38,.12)}
.nav-in{padding:18px 0;transition:padding .45s var(--ease)}
.nav.scrolled .nav-in{padding:8px 0}
.brand .lock{transition:width .45s var(--ease),height .45s var(--ease)}
.nav.scrolled .brand .lock{width:104px;height:32px}
.nav-cta .navcta{transition:height .45s var(--ease),padding .45s var(--ease)}
.nav.scrolled .nav-cta .navcta{height:38px;padding:0 20px;font-size:13.5px}
.nav.scrolled .nav-links a{padding:7px 12px}
@media (max-width:600px){.nav-in{padding:14px 0}.nav.scrolled .nav-in{padding:8px 0}.nav.scrolled .brand .lock{width:96px;height:30px}}
/* v3.17: the outline echo uses the button's own colour at 34% opacity */
.btn.gold::after{border-color:var(--gold);opacity:.34}
.btn.gold.teal::after{border-color:var(--teal)}
.hero .btn.gold::after,.sec.dark .btn.gold::after,.msg .btn.gold::after,.dark .btn.gold::after{border-color:var(--gold)}
/* v3.18: at the top of the page the bar is solid white; the glass only kicks in once scrolled */
.nav::before{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:inset 0 -1px 0 rgba(15,77,74,.08)}
.nav.scrolled::before{background:rgba(255,255,255,.8);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);box-shadow:inset 0 -1px 0 rgba(15,77,74,.12),0 12px 36px rgba(6,40,38,.12)}
/* v3.19: hero gold slab on phone: a short slab tucked behind the photo cards (bottom right), not a full-height stripe at the edge */
@media (max-width:760px){
.phero.is-tile .phero-tile::before{top:auto;bottom:0;right:-8%;height:46%;width:38vw;opacity:.7;transform:skewX(var(--skew))}
.phero.is-ticker .phero-tile::before{display:none}
}
/* v3.20: phone hero: the gold fills everything right of a single diagonal (top-right corner down to the bottom) */
@media (max-width:760px){
.phero.is-tile .phero-tile::before{top:0;bottom:0;right:0;height:auto;width:100%;opacity:.85;transform:none;background:linear-gradient(180deg,var(--gold-2),var(--gold));clip-path:polygon(78% 0,100% 0,100% 100%,52% 100%)}
}
@media (max-width:760px){.phero.is-tile .phero-tile::before{z-index:1;opacity:1}}
.phero.is-tile .phero-in{position:relative;z-index:2}
@media (max-width:760px){.phero.is-tile .phero-tile::before{clip-path:polygon(100% 0,100% 100%,44% 100%,100% 38%)}}
/* v3.21: glass icon badge = skewed parallelogram (icon upright), with a soft light-to-dark glass gradient from the top instead of a flat fill */
/* v3.22: kill the old rectangular blur on the badge itself; only the skewed layer is glass */
/* v3.23: hero slab = flat gold, no gradient, no transparency (desktop and phone) */
.phero.is-tile .phero-tile::before,.phero.is-ticker .phero-tile::before{background:var(--gold);opacity:1;z-index:1}
.phero.is-ticker .phero-tile::before{opacity:.9}
/* v3.24: badge reveal = fade + short rise (clip-path and scale both break or stutter backdrop-filter in Chrome); inline props cleared after */
/* v3.26: nav CTA smaller when scrolled and its outline echo tighter so it clears the bar's bottom edge */
.nav .navcta::after{transform:skewX(var(--skew)) translate(4px,4px)}
.nav.scrolled .nav-in{padding:10px 0}
.nav.scrolled .nav-cta .navcta{height:34px;padding:0 16px;font-size:13px}
.nav.scrolled .navcta::after{transform:skewX(var(--skew)) translate(3px,3px)}
.nav.scrolled .navcta:hover::after{transform:skewX(var(--skew)) translate(4px,4px)}
/* v3.27: purpose: the doctors stand on the cards (no gap), cards sit above the photo's feet */
.pp-cards{margin-top:0;z-index:2}
.pp-stage{margin-bottom:-6px}
.pp-group-wrap{bottom:0}
/* v3.28: paired buttons sit close: the slanted echo already adds visual air, so the real gap is 4px (2px on phone). Applies to every button row. */
.hero-cta,.cd-in .btn+.btn,.ld-open-foot,.cs-foot{gap:4px}
.btn+.btn{margin-left:0}
.hero-cta .btn{margin-inline:2px}
@media (max-width:600px){.hero-cta{gap:2px}}
/* v3.30: primary gold button: no outline echo; a soft top-lit gold gradient with a hairline highlight and a warm drop shadow, so it reads as the main action */
.btn.gold::after{display:none!important}
.btn.gold::before{background:linear-gradient(180deg,#d6b57c 0%,var(--gold) 48%,#b8935a 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.12),0 10px 24px rgba(200,164,106,.30);animation:none}
.btn.gold:hover::before{filter:brightness(1.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.12),0 14px 30px rgba(200,164,106,.40)}
.btn.gold{text-shadow:0 1px 0 rgba(0,0,0,.12)}
.btn.gold.teal::before{background:linear-gradient(180deg,#15605c 0%,var(--teal) 50%,#0b3b39 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 24px rgba(15,77,74,.28)}
/* v3.33: quiet premium primary: flat gold with a subtle top-to-bottom shade, one hairline highlight, no glow, no shadow, no movement.
Hover = a single light sweep across the slanted fill (::after, clipped by the same skew). */
.btn::before{transition:none}
.btn:hover::before{transform:skewX(var(--skew))}
.btn.gold::before{background:linear-gradient(180deg,#cfae74 0%,var(--gold) 55%,#bd9a61 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.btn.gold:hover::before{filter:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.btn.gold{text-shadow:none;overflow:visible}
.btn.gold::after{display:block!important;content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--skew));background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);background-size:250% 100%;background-position:120% 0;opacity:1;border:0;animation:none;transition:background-position .7s var(--ease)}
.btn.gold:hover::after{background-position:-40% 0}
.btn.gold.teal::before{background:linear-gradient(180deg,#14605c 0%,var(--teal) 55%,#0c403d 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.btn.line:hover::before{background:rgba(15,77,74,.06)}
.hero .btn.line:hover::before,.sec.dark .btn.line:hover::before,.msg .btn.line:hover::before{background:rgba(248,245,239,.08)}
.btn svg{transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
/* v3.35: hover = fill shifts one tone + a thin gold rule draws along the bottom edge (inside the slant). No sweep, no glow, no movement. */
.btn.gold::after,.btn.gold.teal::after{display:block!important;background:none;background-size:auto;background-position:0 0;transition:none;inset:auto 0 0 0;height:2px;transform:skewX(var(--skew)) scaleX(0);transform-origin:0 50%;z-index:0;opacity:1;border:0}
.btn.gold::after{background:#fff}
.btn.gold.teal::after{background:var(--gold)}
.btn.gold:hover::after,.btn.gold.teal:hover::after{transform:skewX(var(--skew)) scaleX(1);transition:transform .45s var(--ease)}
.btn.gold::before{transition:background .3s}
.btn.gold:hover::before{background:linear-gradient(180deg,#c6a46b 0%,#bd9a61 55%,#b08e56 100%)}
.btn.gold.teal:hover::before{background:linear-gradient(180deg,#11554f 0%,#0d4744 55%,#0a3836 100%)}
.btn.line::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:currentColor;transform:skewX(var(--skew)) scaleX(0);transform-origin:0 50%;display:block!important;opacity:.9}
.btn.line:hover::after{transform:skewX(var(--skew)) scaleX(1);transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
/* v3.36: hover = gradient only (lighter top, deeper bottom), nothing else */
.btn.gold::after,.btn.gold.teal::after,.btn.line::after{display:none!important}
.btn.gold::before{background:linear-gradient(180deg,#cfae74 0%,var(--gold) 55%,#bd9a61 100%);transition:background .35s}
.btn.gold:hover::before{background:linear-gradient(180deg,#dcc08a 0%,#c8a46a 45%,#a8874f 100%)}
.btn.gold.teal::before{background:linear-gradient(180deg,#14605c 0%,var(--teal) 55%,#0c403d 100%)}
.btn.gold.teal:hover::before{background:linear-gradient(180deg,#1b7570 0%,#115653 45%,#082e2c 100%)}
.btn.line:hover::before{background:rgba(15,77,74,.08)}
.hero .btn.line:hover::before,.sec.dark .btn.line:hover::before,.msg .btn.line:hover::before{background:rgba(248,245,239,.10)}
.btn:hover svg{transform:none}
/* ===== v3.37: timeline as a phase ledger: small slanted gold tag for the period, the title carries the weight ===== */
.tl-row{grid-template-columns:clamp(150px,18vw,220px) 1fr;align-items:start}
.tl-when{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:6px}
.tl-when b{font-family:var(--font-num);font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1;color:#fff;position:relative;isolation:isolate;padding:10px 16px}
.tl-when b::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--skew));background:var(--teal)}
.tl-when b::after{display:none}
.tl-when .tl-no{margin:0;padding:0;background:none;font-size:12px;letter-spacing:.14em;color:var(--gold-ink)}
.tl-when .tl-no::before{display:none}
.tl-row.ahead .tl-when b{color:var(--teal);opacity:1}
.tl-row.ahead .tl-when b::before{background:transparent;border:1.5px solid var(--teal);opacity:.5}
.tl-card h3{font-size:clamp(26px,2.6vw,38px)}
@media (max-width:760px){.tl-row{grid-template-columns:1fr}.tl-when{flex-direction:row;align-items:center;gap:12px}}
/* ===== v3.37: cascade: numbers grow left to right, the last one is gold, a ghost 555 sits behind, slanted gold connectors ===== */
.cascade .wrap{position:relative}
.cs-ghost{position:absolute;right:-2%;top:-8%;font-family:var(--font-num);font-weight:700;font-size:clamp(200px,32vw,460px);line-height:1;letter-spacing:-.06em;color:rgba(248,245,239,.035);pointer-events:none;user-select:none}
.cs-grid{position:relative;align-items:end;gap:0}
.cs-item{background:transparent;border:0;border-left:0;padding:0 clamp(18px,2.4vw,40px) 0 0;position:relative}
.cs-item+.cs-item{padding-left:clamp(18px,2.4vw,40px)}
.cs-item+.cs-item::before{content:"";position:absolute;left:0;top:14%;bottom:0;width:1px;background:rgba(248,245,239,.14)}
.cs-no{display:inline-block;padding:5px 10px;position:relative;isolation:isolate;color:var(--cream);font-size:11px}
.cs-no::after{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--skew));background:rgba(200,164,106,.22)}
.cs-no::before{display:none}
.cs-num{margin-top:18px;font-weight:700;letter-spacing:-.05em;color:var(--cream)}
.cs-item:nth-child(1) .cs-num{font-size:clamp(40px,4vw,64px)}
.cs-item:nth-child(2) .cs-num{font-size:clamp(46px,4.8vw,76px)}
.cs-item:nth-child(3) .cs-num{font-size:clamp(52px,5.6vw,88px)}
.cs-item:nth-child(4) .cs-num,.cs-item:last-child .cs-num{font-size:clamp(56px,6.4vw,104px);color:var(--gold)}
.cs-item h3{margin-top:12px;font-size:16px}
.cs-item h3 em{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);margin-top:4px}
.cs-item p{margin-top:12px;font-size:14px;max-width:32ch}
.cs-arrow{display:none}
.cs-foot{border-top:1px solid rgba(248,245,239,.14)}
@media (max-width:760px){.cs-grid,.cs-grid[data-n="4"],.cs-grid[data-n="5"]{grid-template-columns:1fr 1fr;gap:28px 0}.cs-item:nth-child(odd){padding-left:0}.cs-item:nth-child(odd)::before{display:none}.cs-ghost{font-size:180px;top:0}}
@media (max-width:520px){.cs-grid,.cs-grid[data-n]{grid-template-columns:1fr}.cs-item,.cs-item+.cs-item{padding:20px 0 0}.cs-item+.cs-item::before{left:0;right:0;top:0;bottom:auto;height:1px;width:auto}.cs-item .cs-num{font-size:52px}.cs-item:last-child .cs-num{font-size:64px}}
.tl-when b{display:inline-block;color:#fff!important;opacity:1!important;letter-spacing:.06em!important;font-size:15px!important}
.tl-when b::before{content:""!important;display:block!important;position:absolute;inset:0;width:auto!important;height:auto!important;margin:0!important;vertical-align:baseline;transform:skewX(var(--skew))!important;background:var(--teal)!important;z-index:-1}
.tl-row.ahead .tl-when b{color:var(--teal)!important}
.tl-row.ahead .tl-when b::before{background:transparent!important;border:1.5px solid var(--teal);opacity:.5}
.cs-grid{align-items:start}
.cs-item{display:flex;flex-direction:column;height:100%}
.cs-num{margin-top:auto;padding-top:18px}
.cs-item{display:block;height:auto}
.cs-no{align-self:flex-start;width:max-content}
.cs-grid{align-items:end}
.cs-item .cs-num{margin-top:18px;padding-top:0}
.cs-item h3{min-height:0}
/* v3.38: hero buttons must be clickable: text block above the 3D photo strip, strip ignores the pointer */
.hero-in{z-index:3}
.strip.hero-strip{pointer-events:none;z-index:0}
.hero-people{pointer-events:none}
/* v3.39: photo caption chips: teal slanted fill, cream text (the cream fill vanished on cream pages) */
.gal-item figcaption,.bnx-card figcaption,.mv-cap{color:var(--cream)!important;padding:7px 14px;font-size:12px;font-weight:600}
.gal-item figcaption::before,.bnx-card figcaption::before,.mv-cap::before{background:rgba(11,59,57,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
/* v3.40: caption chips were pushed out of the tile (a later rule set top:-14px); pin them bottom-left explicitly */
.gal-item figcaption,.bnx-card figcaption{top:auto!important;bottom:14px!important;left:14px!important;right:auto!important;transform:none!important}
.mv-cap{top:auto!important;bottom:14px!important}
/* v3.40 (fix): the chip rule made photo captions position:relative, so they flowed under the image and got clipped. Absolute again. */
.gal-item figcaption,.bnx-card figcaption,.mv-cap{position:absolute!important;isolation:isolate;margin:0!important}
/* v3.41: caption chips back to the original cream (teal was a wrong guess) */
.gal-item figcaption,.bnx-card figcaption,.mv-cap{color:var(--teal)!important}
.gal-item figcaption::before,.bnx-card figcaption::before,.mv-cap::before{background:rgba(248,245,239,.92)}
/* v3.41: partner logos on uniform white cards (same size, real padding) so mixed logo sizes and white rectangles read as one row */
.logos{gap:14px}
.logo-card{width:clamp(150px,14vw,190px);height:84px;padding:14px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--rs)}
.logo-card img{height:100%;width:100%;max-width:none;object-fit:contain;mix-blend-mode:multiply}
@media (max-width:600px){.logos{gap:10px}.logo-card{width:calc(50% - 5px);height:72px}}
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));max-width:1240px;margin-inline:auto}
.logo-card{width:auto}
@media (max-width:600px){.logos{grid-template-columns:1fr 1fr}.logo-card{width:auto}}
/* ===== careers: openings ===== */
.ops{background:var(--cream)}
.ops-head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.ops-head .lead{max-width:40ch;justify-self:end;margin:0}
.ops .h-l{color:var(--teal)}
.ops-list{border-top:1px solid var(--line)}
.ops-row{border-bottom:1px solid var(--line)}
.ops-row summary{list-style:none;display:grid;grid-template-columns:56px 1fr 28px;gap:18px;align-items:center;padding:22px 0;cursor:pointer}
.ops-row summary::-webkit-details-marker{display:none}
.ops-no{font-family:var(--font-num);font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--gold-ink)}
.ops-main b{display:block;font-size:clamp(19px,1.7vw,24px);letter-spacing:-.015em;color:var(--teal)}
.ops-meta{display:block;margin-top:4px;font-size:14px;color:var(--ink-2)}
.ops-row summary svg{width:22px;height:22px;color:var(--teal);transition:transform .35s var(--ease)}
.ops-row[open] summary svg{transform:rotate(180deg)}
.ops-body{padding:0 0 28px 74px}
.ops-desc{font-size:15.5px;line-height:1.65;color:var(--ink);max-width:64ch}
.ops-desc p+p{margin-top:1em}.ops-desc ul{margin:10px 0 0 20px}
.ops-body .btn{margin-top:20px}
.ops-empty{padding:clamp(32px,5vw,56px);background:#fff;border:1px solid var(--line);border-radius:var(--rm);text-align:center}
.ops-empty h3{font-size:clamp(24px,2.4vw,34px);letter-spacing:-.02em;color:var(--teal)}
.ops-empty p{margin:12px auto 22px;max-width:48ch;font-size:16px;line-height:1.6;color:var(--ink-2)}
@media (max-width:760px){.ops-head{grid-template-columns:1fr}.ops-head .lead{justify-self:start}.ops-row summary{grid-template-columns:40px 1fr 24px;gap:12px}.ops-body{padding-left:0}}
/* v3.43: file picker = plain dashed drop-style field, not a slanted button */
.contact-form .fld-file label.btn{height:auto;padding:14px 18px;margin:0;font-size:14px;font-weight:600;color:var(--teal);isolation:auto}
.contact-form .fld-file label.btn::before{transform:none!important;border:1.5px dashed rgba(15,77,74,.45);background:#fff;border-radius:var(--rs)}
.contact-form .fld-file label.btn:hover::before{background:rgba(15,77,74,.04)}
.contact-form .fld-file label.btn::after{display:none!important}
/* careers: plain openings list, no hero tile */
.ops.is-plain{padding-top:clamp(140px,18vh,200px)}
.ops.is-plain .ops-head{grid-template-columns:1fr}
.ops.is-plain .ops-head .lead{justify-self:start;max-width:56ch}
/* ===== v3.44: page openers. A page may start with its own signature section instead of the shared hero tile; the opener gets room for the fixed nav ===== */
.is-opener{padding-top:clamp(130px,17vh,180px)!important}
.is-opener.ops{padding-top:clamp(140px,18vh,200px)!important}
.msg.is-opener{padding-top:0!important}
.msg.is-opener .msg-in{padding-top:clamp(90px,12vh,120px)}
.msg.is-opener .msg-ph{padding-top:clamp(90px,12vh,120px)}
.msg.is-opener .msg-ph img{height:calc(94% - clamp(90px,12vh,120px))}
.eco.is-opener,.values.is-opener,.sides.is-opener,.stats.is-opener,.intro.is-opener{padding-top:clamp(140px,18vh,200px)!important}
/* v3.46: explore cards on phone: taller (3:4) with the photo anchored to the top so the glass panel sits below the faces */
@media (max-width:760px){.xcard{aspect-ratio:3/4}.xcard img{object-position:center 20%}}
/* v3.47: explore cards on phone: same 3:3.4 ratio as desktop, photo still anchored high */
@media (max-width:760px){.xcard{aspect-ratio:3/3.4}}
/* v3.48: mobile drawer fits one screen: smaller type, tighter rows, no scroll box */
.menu{padding:0 24px}
.menu-list{margin-top:64px;max-height:calc(100svh - 150px);gap:0}
.menu a.big{font-size:clamp(17px,4.6vw,20px);padding:7px 0 5px}
.menu a.big.sub{font-size:14px;padding:3px 0 3px 12px;opacity:.8}
.menu-subs{padding:0 0 6px}
.menu .btn{margin-top:12px;height:44px}
/* v3.49: drawer without rules. Group name = small gold uppercase label; items = the main text; groups separated by space only */
.menu a.big{border-bottom:0;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);padding:14px 0 4px;opacity:1}
.menu a.big:first-child{padding-top:0}
.menu a.big.sub{font-size:clamp(18px,4.8vw,21px);font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--cream);padding:4px 0;opacity:1}
.menu-subs{padding:0}
/* top-level links with no children (Investor Relations, Contact) read like items, with a small gold slash before them */
.menu a.big:not(:has(+ .menu-subs)){font-size:clamp(18px,4.8vw,21px);font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--cream);padding:8px 0 4px;position:relative}
.menu a.big:not(:has(+ .menu-subs))::before{content:"";display:inline-block;width:4px;height:.9em;margin-right:10px;background:var(--gold);transform:skewX(var(--skew));vertical-align:-.08em}
.menu .btn{margin-top:22px}
.menu a.big.sub::before{display:none!important}
.menu a.big:has(+ .menu-subs)::before{display:none!important}
/* v3.50: drawer: nav stays visible on top (logo + X), list starts under it; group titles big, items small; slash inside the padding */
.menu{justify-content:flex-start;padding:96px 24px 24px;overflow:auto}
.menu-list{margin-top:0;max-height:none;overflow:visible}
.menu a.big{font-size:clamp(20px,5.4vw,24px);font-weight:700;letter-spacing:-.02em;text-transform:none;color:var(--cream);padding:10px 0 2px}
.menu a.big:first-child{padding-top:0}
.menu a.big.sub{font-size:14.5px;font-weight:500;letter-spacing:0;color:rgba(248,245,239,.82);padding:3px 0 3px 14px}
.menu a.big:not(:has(+ .menu-subs)){font-size:clamp(20px,5.4vw,24px);font-weight:700;letter-spacing:-.02em;padding:10px 0 2px}
.menu a.big:not(:has(+ .menu-subs))::before{display:none!important}
.menu-subs{padding:0 0 4px}
.menu .btn{margin-top:18px;align-self:flex-start;margin-left:0}
body .menu{padding-top:112px}
body .menu .menu-list a.big.sub{font-size:14.5px!important;font-weight:500!important;letter-spacing:0!important;color:rgba(248,245,239,.82)!important;padding:3px 0 3px 14px!important}
body .menu .menu-list a.big{font-size:clamp(20px,5.4vw,24px);font-weight:700;padding:12px 0 4px}
/* v3.51: Who Benefits: ghost numeral and "02 / 03" tag removed (the rail below already numbers the steps) */
.bnx-ghost,.bnx-tag{display:none!important}
.bnx-txt{padding-top:0}
/* drawer: gold slash before each group title, drawn inside the padding so it cannot clip */
body .menu .menu-list a.big{padding-left:22px;position:relative}
body .menu .menu-list a.big::before{content:"";position:absolute;left:2px;top:.9em;width:5px;height:.85em;background:var(--gold);transform:skewX(var(--skew));display:block!important}
body .menu .menu-list a.big.sub{padding-left:22px!important}
body .menu .menu-list a.big.sub::before{display:none!important}
/* v3.54: message band: portrait never touches the nav (top gap), name lifted off the bottom edge */
.msg-ph img{height:84%;top:auto;bottom:0}
.msg.is-opener .msg-ph img{height:calc(84% - clamp(90px,12vh,120px))}
.msg-who{bottom:clamp(28px,4vw,56px)}
.msg-ph::after{height:44%}
/* v3.57: leader bio in the modal = a real list: gold slanted markers, one line each */
.ld-modal-bio ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ld-modal-bio li{position:relative;padding-left:20px;line-height:1.5;color:var(--ink)}
.ld-modal-bio li::before{content:"";position:absolute;left:0;top:.42em;width:4px;height:.8em;background:var(--gold);transform:skewX(var(--skew))}
.ld-modal-title{font-size:12px;letter-spacing:.14em}
/* v3.59: leaders foot: headline + sub line on the left, button on the right */
.ld-open-foot{margin-top:40px;padding-top:32px;border-top:1px solid var(--line);align-items:center}
.ld-open-foot p{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:52ch}
.ld-open-foot p strong{display:block;font-size:clamp(22px,2vw,28px);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--teal);margin-bottom:8px}
.ld-open{border-top:0;padding-top:0;margin-top:0}
.ld-open-foot{margin-top:48px}
.ld-open-foot p strong{margin-bottom:4px}
.ld-open-foot p strong{margin-bottom:2px}
.ld-open-foot p{line-height:1.4}
/* v3.62: opener message: the gold slab runs right up to the nav; only the portrait keeps the top gap */
.msg.is-opener .msg-ph{padding-top:0}
.msg.is-opener .msg-slab{top:0}
.msg.is-opener .msg-ph img{height:calc(84% - clamp(60px,8vh,80px))}
/* v3.63: right-side message keeps the same diagonal lean as the left-side one (no mirroring of the slab) */
.msg.is-right .msg-slab{transform:none}
/* v3.64: every message band: slab starts at the very top of the band, portrait keeps its own top gap */
.msg .msg-ph{padding-top:0}
.msg .msg-slab{top:0}
.msg .msg-ph img{height:84%}
.msg.is-opener .msg-ph img{height:calc(84% - clamp(60px,8vh,80px))}
/* v3.65: leader cards: no outline mark behind the head; portraits sized by height so every face reads the same scale */
.ld-bigmark{display:none!important}
.ld-ph img{width:auto;height:96%;max-width:none;bottom:0;object-fit:contain}
/* ===== v3.66: leader cards in the slant language: gold diagonal band behind the portrait, slanted index tag, name on a dark skewed plate ===== */
.ld-ph{background:var(--teal-2)}
.ld-ph::before{content:"";position:absolute;inset:-10% auto -10% 30%;width:42%;background:linear-gradient(180deg,var(--gold-2),var(--gold));transform:skewX(var(--skew));z-index:0;transition:transform .8s var(--ease)}
.ld-card:hover .ld-ph::before{transform:skewX(var(--skew)) translateX(6%)}
.ld-ph img{filter:saturate(.9) contrast(1.04)}
.ld-card:hover .ld-ph img{filter:none}
.ld-cap{left:0;right:0;bottom:0;padding:34px 18px 16px;background:linear-gradient(180deg,rgba(7,47,45,0),rgba(7,47,45,.94) 42%)}
.ld-name{position:relative;padding-left:12px}
.ld-name::before{content:"";position:absolute;left:0;top:.2em;width:4px;height:.85em;background:var(--gold);transform:skewX(var(--skew))}
.ld-title{padding-left:12px}
.ld-card.no-photo .ld-ph::before{display:none}
.ld-card.no-photo .ld-ph{background:linear-gradient(160deg,#135e5a,#072f2d)}
/* v3.67: leader cards back to the plain teal card: no gold band, name block as before */
.ld-ph::before{display:none!important}
.ld-cap{padding:0;background:none;left:18px;right:18px;bottom:18px}
.ld-name{padding-left:0}
.ld-name::before{display:none}
.ld-title{padding-left:0}
/* v3.68: keep the gold slanted stroke before the name (only that) */
.ld-name{padding-left:12px;position:relative}
.ld-name::before{display:block;content:"";position:absolute;left:0;top:.2em;width:4px;height:.85em;background:var(--gold);transform:skewX(var(--skew))}
.ld-title{padding-left:12px}
/* ===== v3.70: CTA card tones, so the primary and the secondary card read differently ===== */
.cd-card.tone-gold{background:var(--gold);color:#fff}
.cd-card.tone-gold .cd-in p{color:rgba(255,255,255,.9)}
.cd-card.tone-gold .btn.gold::before{background:linear-gradient(180deg,#14605c,var(--teal) 55%,#0c403d)}
.cd-card.tone-gold .btn.gold{color:var(--cream)}
.cd-card.tone-cream{background:var(--cream-2);color:var(--teal)}
.cd-card.tone-cream .cd-in p{color:var(--ink-2)}
.cd-card.tone-healthcare{background:#0b6b3a;color:#fff}
.cd-card.tone-academy{background:#b8005a;color:#fff}
.cd-card.tone-tech{background:#14558a;color:#fff}
.cd-card.tone-media{background:#9c0a12;color:#fff}
.cd-card[class*="tone-"]:not(.tone-teal):not(.tone-cream) .cd-in p{color:rgba(255,255,255,.88)}
.cta-duo.is-slant .cd-card.tone-cream .cd-ph::before{background:linear-gradient(100deg,var(--teal) 0,var(--teal) 4.5%,transparent 4.5%)}
.cta-duo.is-slant .cd-card.tone-gold .cd-ph::before{background:linear-gradient(100deg,var(--teal) 0,var(--teal) 4.5%,transparent 4.5%)}
/* ===== faq ===== */
.faq{background:var(--cream)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,80px);align-items:start}
.faq .h-l{color:var(--teal)}
.faq-list{border-top:1px solid var(--line)}
.faq-row{border-bottom:1px solid var(--line)}
.faq-row summary{list-style:none;display:grid;grid-template-columns:44px 1fr 24px;gap:14px;align-items:center;padding:18px 0;cursor:pointer;font-size:17px;font-weight:600;color:var(--teal)}
.faq-row summary::-webkit-details-marker{display:none}
.faq-no{font-family:var(--font-num);font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--gold-ink)}
.faq-row summary svg{width:20px;height:20px;transition:transform .35s var(--ease)}
.faq-row[open] summary svg{transform:rotate(180deg)}
.faq-a{padding:0 0 20px 58px;font-size:15.5px;line-height:1.65;color:var(--ink-2);max-width:60ch}
.faq-a p+p{margin-top:.8em}
@media (max-width:800px){.faq-grid{grid-template-columns:1fr}.faq-a{padding-left:0}}
/* v3.74: footer has square top corners */
.foot{border-radius:0}
/* v3.75: dropdown parent that is only a label: same look as a link, no underline/cursor change */
button.nav-dd-btn{border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;padding:9px 13px;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;transition:background .3s}
button.nav-dd-btn:hover{background:rgba(15,77,74,.07)}
.eco-caps{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:12px}
.eco-caps i{font-style:normal;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--teal);padding:5px 10px;background:color-mix(in srgb,var(--cc) 9%,#fff);border:1px solid color-mix(in srgb,var(--cc) 18%,transparent)}
@media (max-width:760px){.eco-caps i{font-size:11px;padding:4px 8px}}
/* v3.78: ecosystem rows: drop the skewed edge bar; colour lives in the number, icon chip and a hairline top rule that fills on hover */
.eco-row::before{display:none}
.eco-row{border-top:2px solid transparent}
.eco-row::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--cc);transition:width .6s var(--ease)}
.eco-row:hover::after{width:100%}
.eco-n{padding-left:0}
.eco-row{grid-template-columns:minmax(190px,250px) 1fr 26px}
@media (max-width:760px){.eco-row{grid-template-columns:1fr}.eco-lock-top{width:72px}.eco-lock b{font-size:24px}}
/* v3.79: company pages carry their own colour in the hero: label stroke and border, the gold slab, and the glass icon tint */
.phero.has-ac .lbl svg{background:var(--ac)}
.phero.has-ac .lbl::before{border-color:color-mix(in srgb,var(--ac) 60%,transparent);background:color-mix(in srgb,var(--ac) 14%,transparent)}
.phero.has-ac .lbl{color:#fff}
.phero.has-ac .phero-tile::before{background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 88%,#fff),var(--ac))}
/* ===== v3.84: explore layouts. D bands, E signpost, F titles. Pick one in Theme Editor > Explore > Layout ===== */
.explore .xcard{counter-increment:xc}
/* D: full-width photo bands, text over a soft teal wash, no glass box */
.explore.is-bands .explore-grid{grid-template-columns:1fr;gap:14px}
.explore.is-bands .xcard{aspect-ratio:auto;min-height:clamp(260px,30vw,380px);display:grid;align-items:center}
.explore.is-bands .xcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.explore.is-bands .xcard::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,47,45,.92) 0%,rgba(7,47,45,.72) 42%,rgba(7,47,45,.05) 78%)}
.explore.is-bands .xb{position:relative;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;inset:auto;padding:clamp(24px,3vw,44px);max-width:52ch;z-index:1}
.explore.is-bands .xb-head h3{font-size:clamp(26px,3vw,42px)}
.explore.is-bands .xb-row{display:block}
.explore.is-bands .xb-row p{margin-bottom:18px;max-width:44ch}
/* E: signpost, colour blocks, no photos */
.explore.is-signpost .explore-grid{grid-template-columns:repeat(3,1fr);gap:14px}
.explore.is-signpost .xcard{aspect-ratio:auto;min-height:clamp(320px,34vw,420px);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(24px,2.6vw,36px);background:var(--teal)}
.explore.is-signpost .xcard img{display:none}
.explore.is-signpost .xcard:nth-child(2){background:var(--gold);color:#fff}
.explore.is-signpost .xcard:nth-child(3){background:var(--cream-2);color:var(--teal)}
.explore.is-signpost .xcard::before{content:"0" counter(xc);position:absolute;left:clamp(24px,2.6vw,36px);top:clamp(20px,2.4vw,32px);font-family:var(--font-num);font-size:clamp(44px,4.4vw,64px);font-weight:600;letter-spacing:-.04em;opacity:.28;line-height:1}
.explore.is-signpost .xb{position:relative;inset:auto;padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.explore.is-signpost .xb-ic{display:none}
.explore.is-signpost .xb-head h3{font-size:clamp(24px,2.4vw,32px)}
.explore.is-signpost .xb-items{list-style:none;margin:14px 0 0;display:grid;gap:7px}
.explore.is-signpost .xb-items li{position:relative;padding-left:16px;font-size:14px;line-height:1.45;opacity:.85}
.explore.is-signpost .xb-items li::before{content:"";position:absolute;left:0;top:.45em;width:6px;height:6px;background:currentColor;transform:skewX(var(--skew));opacity:.7}
.explore.is-signpost .xb-row{display:block;margin-top:18px}
.explore.is-signpost .xb-row p{display:none}
/* F: giant titles, small round photo */
.explore.is-titles .explore-grid{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.explore.is-titles .xcard{aspect-ratio:auto;display:grid;grid-template-columns:1fr 120px;align-items:center;gap:24px;padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--line);background:transparent;border-radius:0;overflow:visible}
.explore.is-titles .xcard img{position:relative;width:110px;height:110px;border-radius:50%;object-fit:cover;filter:saturate(.7);transition:filter .5s,transform .6s var(--ease)}
.explore.is-titles .xcard:hover img{filter:none;transform:scale(1.06)}
.explore.is-titles .xb{position:relative;inset:auto;padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--teal)}
.explore.is-titles .xb-ic{display:none}
.explore.is-titles .xb-head h3{font-size:clamp(30px,4.6vw,64px);letter-spacing:-.03em;color:var(--teal)}
.explore.is-titles .xb-row{display:flex;align-items:center;gap:20px;margin-top:8px}
.explore.is-titles .xb-row p{color:var(--ink-2);max-width:52ch}
@media (max-width:820px){.explore.is-signpost .explore-grid{grid-template-columns:1fr}.explore.is-titles .xcard{grid-template-columns:1fr 80px}.explore.is-titles .xcard img{width:72px;height:72px}.explore.is-bands .xcard::after{background:linear-gradient(180deg,rgba(7,47,45,.55),rgba(7,47,45,.92))}}
/* ===== v3.85: explore G (cursor reveal) and H (word strip) ===== */
/* G: the list is the design; one photo follows the cursor and swaps per link */
.explore.is-reveal{position:relative}
.explore.is-reveal .explore-grid{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line);position:relative;z-index:2}
.explore.is-reveal .xcard{aspect-ratio:auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:clamp(22px,3vw,40px) 4px;background:transparent;border-bottom:1px solid var(--line);border-radius:0;overflow:visible}
.explore.is-reveal .xcard>img{display:none}
.explore.is-reveal .xb{position:relative;inset:auto;padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;display:contents}
.explore.is-reveal .xb-head{display:flex;align-items:center;gap:16px}
.explore.is-reveal .xb-ic{width:44px;height:44px;background:rgba(200,164,106,.16);color:var(--gold-ink)}
.explore.is-reveal .xb-head h3{font-size:clamp(28px,4vw,56px);letter-spacing:-.03em;color:var(--teal);transition:transform .5s var(--ease),color .4s}
.explore.is-reveal .xcard:hover .xb-head h3{transform:translateX(14px);color:var(--gold-ink)}
.explore.is-reveal .xb-row{display:flex;align-items:center;gap:22px}
.explore.is-reveal .xb-row p{font-size:14.5px;color:var(--ink-2);max-width:34ch}
.explore.is-reveal .xb-items{display:none}
.xr-ph{position:absolute;left:0;top:0;z-index:1;width:300px;height:220px;opacity:0;transform:translate3d(0,0,0);transition:opacity .35s;pointer-events:none;overflow:hidden}
.xr-ph.on{opacity:1}
.xr-ph img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){.explore.is-reveal .xcard{grid-template-columns:1fr;gap:10px}.explore.is-reveal .xb-head h3{font-size:26px}.xr-ph{display:none}}
/* H: each destination is a running strip of its own words, photo as a thin band behind */
.explore.is-marquee .explore-grid{grid-template-columns:1fr;gap:12px}
.explore.is-marquee .xcard{aspect-ratio:auto;min-height:160px;display:grid;align-items:center;background:var(--teal-2);overflow:hidden}
.explore.is-marquee .xcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.25}
.explore.is-marquee .xb{position:relative;inset:auto;padding:clamp(18px,2.4vw,30px);background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.explore.is-marquee .xb-head h3{font-size:clamp(24px,3vw,40px)}
.explore.is-marquee .xb-items{list-style:none;display:flex;gap:26px;margin:10px 0 0;padding:0;white-space:nowrap;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
.explore.is-marquee .xb-items li{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-2)}
.explore.is-marquee .xb-row{margin-top:14px}
.explore.is-marquee .xb-row p{display:none}
/* ===== v3.86: explore nav block, three layouts ===== */
.nvb{background:var(--cream)}
.nvb.dark{background:var(--teal)}
.nvb-head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.nvb-head .lead{max-width:42ch;justify-self:end;margin:0}
.nvb .h-l{color:var(--teal);max-width:16ch}.nvb.dark .h-l{color:var(--cream)}
.nvb-links{list-style:none;margin:0;padding:0}
.nvb-links a{display:flex;align-items:center;gap:10px;padding:10px 0;color:var(--teal);border-bottom:1px solid var(--line);transition:padding-left .4s var(--ease),color .3s}
.nvb.dark .nvb-links a{color:var(--cream);border-color:rgba(248,245,239,.16)}
.nvb-links a:hover{padding-left:8px;color:var(--gold-ink)}
.nvb.dark .nvb-links a:hover{color:var(--gold-2)}
.nvb-links b{font-weight:600;font-size:16px}
.nvb-links em{font-style:normal;font-size:13px;color:var(--ink-2);margin-left:auto}
.nvb.dark .nvb-links em{color:rgba(248,245,239,.7)}
.nvb-links a i,.nvb-links a svg{width:16px;height:16px;margin-left:auto;opacity:.45;transition:transform .35s var(--ease),opacity .3s}
.nvb-links em+i,.nvb-links em+svg{margin-left:10px}
.nvb-links a:hover svg{transform:translateX(3px);opacity:1}
.nvb-top h3{font-size:clamp(17px,1.5vw,20px);letter-spacing:-.01em;color:var(--teal)}
.nvb.dark .nvb-top h3{color:var(--cream)}
.nvb-top p{margin-top:4px;font-size:13.5px;color:var(--ink-2)}
.nvb.dark .nvb-top p{color:rgba(248,245,239,.72)}
.nvb-ic{display:grid;place-items:center;width:46px;height:46px;background:rgba(200,164,106,.16);color:var(--gold-ink);margin-bottom:14px}
.nvb.dark .nvb-ic{background:rgba(248,245,239,.1);color:var(--gold-2)}
.nvb-ic svg{width:22px;height:22px}
/* 1: four columns */
.nvb.is-directory .nvb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px)}
.nvb.is-directory .nvb-top h3{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:8px}
.nvb.is-directory .nvb-links b{font-size:15px}
/* 2: audience router */
.nvb.is-router .nvb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.nvb.is-router .nvb-col{padding:clamp(24px,2.6vw,36px);background:#fff;border:1px solid var(--line);transition:transform .5s var(--ease),box-shadow .5s}
.nvb.dark.is-router .nvb-col{background:rgba(248,245,239,.06);border-color:rgba(248,245,239,.14)}
.nvb.is-router .nvb-col:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(15,77,74,.12)}
.nvb.is-router .nvb-top{margin-bottom:14px}
.nvb.is-router .nvb-top h3{font-size:clamp(20px,1.9vw,26px)}
/* 3: numbered index */
.nvb.is-index .nvb-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,5vw,72px)}
.nvb.is-index .nvb-top{display:none}
.nvb.is-index .nvb-links a{padding:14px 0}
.nvb-no{font-family:var(--font-num);font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--gold-ink);min-width:26px}
.nvb.is-index .nvb-links b{font-size:clamp(17px,1.5vw,20px)}
@media (max-width:760px){.nvb-head{grid-template-columns:1fr}.nvb-head .lead{justify-self:start}.nvb.is-directory .nvb-grid{grid-template-columns:1fr 1fr}.nvb.is-router .nvb-grid,.nvb.is-index .nvb-grid{grid-template-columns:1fr}}
.nvb .ex-h{color:var(--teal);display:flex;align-items:center;gap:.1em;max-width:none}
.nvb.dark .ex-h{color:var(--cream)}
.nvb-sub{margin-top:12px;font-size:clamp(17px,1.5vw,20px);color:var(--ink-2)}
/* v3.88: router used as a compact follow-on under Explore: tighter padding, sub-heading acts as the title */
.nvb.is-router .nvb-sub{margin-top:0;font-size:clamp(22px,2.2vw,32px);font-weight:700;letter-spacing:-.02em;color:var(--teal)}
.nvb.dark .nvb-sub{color:var(--cream)}
.nvb.is-router:not(:has(.ex-h)){padding-top:clamp(44px,5vw,70px);padding-bottom:clamp(52px,6vw,84px)}
.nvb.is-router:not(:has(.ex-h)) .nvb-head{margin-bottom:clamp(20px,2.4vw,30px)}
.explore.is-cards .xb-items{display:none}
/* v4.08 message: dua potret, teks di tengah (Chairman dan Group CEO satu seksyen) */
.msg.is-duo .msg-in{grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr) minmax(0,.8fr)}
.msg.is-duo .msg-ph:last-child .msg-slab{background:linear-gradient(-100deg,var(--teal-2) 0%,var(--teal-2) 22%,var(--gold-2) 22%,var(--gold) 62%,var(--teal-2) 62%)}
.msg.is-duo .msg-txt{padding-inline:clamp(20px,3vw,48px);text-align:center;align-items:center}
.msg.is-duo .msg-txt .lbl,.msg.is-duo .msg-txt .btn{align-self:center}
.msg.is-duo .msg-quote{max-width:30ch}
.msg.is-duo .msg-body{max-width:52ch}
@media (max-width:760px){.msg.is-duo .msg-in{grid-template-columns:1fr}.msg.is-duo .msg-txt{text-align:left;align-items:flex-start}}
/* v4.10 solutions: gambar kecil ganti ikon pada kad */
.sol-ph{flex:none;width:64px;height:64px;border-radius:var(--rs,6px);overflow:hidden;background:#EDE9E0}
.sol-ph img{width:100%;height:100%;object-fit:cover;display:block}
.sol.is-cards .sol-ph{width:100%;height:150px;border-radius:var(--r,10px);margin-bottom:14px}
@media(max-width:700px){.sol.is-cards .sol-ph{height:120px}}
/* v4.14 purpose: kumpulan doktor tidak lagi tergantung. Gambar duduk atas garisan bawah seksyen,
hujung seluar dilarutkan supaya potongan tidak nampak mendadak. */
.purpose{padding-bottom:0}
.purpose .pp-stage{margin-bottom:0;height:clamp(320px,38vw,560px)}
.pp-group{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 86%,rgba(0,0,0,.35) 96%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0%,#000 86%,rgba(0,0,0,.35) 96%,transparent 100%);
filter:drop-shadow(0 24px 28px rgba(15,77,74,.14))}
.pp-group-wrap::after{content:"";position:absolute;left:50%;bottom:0;width:min(820px,76%);height:34px;
transform:translateX(-50%);background:radial-gradient(ellipse at 50% 100%,rgba(15,77,74,.16),rgba(15,77,74,0) 70%);
pointer-events:none}
@media(max-width:700px){.purpose .pp-stage{height:300px}}
/* v4.48: CTA kad Explore guna butang emas sedia ada (sama seperti Be Our Partner) */
.explore.is-bands .xb-row p{font-size:clamp(14.5px,1.2vw,16px);line-height:1.6;color:rgba(248,245,239,.86)}
@media (max-width:760px){
.explore.is-bands .xcard{min-height:0;aspect-ratio:auto}
.explore.is-bands .xcard::after{background:linear-gradient(180deg,rgba(7,47,45,.55) 0%,rgba(7,47,45,.88) 46%,rgba(7,47,45,.95) 100%)}
.explore.is-bands .xb{padding:150px 20px 26px;max-width:none}
.explore.is-bands .xb-head h3{font-size:24px}
.explore.is-bands .xb-row p{max-width:none}
}
/* v4.16 Grow With Us tanpa kad: rapatkan petikan dengan tajuk, tiada ruang tergantung di bawah */
.grow .quote-row{margin-top:clamp(28px,3.4vw,44px);align-items:flex-end}
.grow .quote-box{max-width:460px}
.grow .quote-pic{width:clamp(180px,18vw,230px)}
/* tanpa kad, seksyen tidak perlu ruang bawah sebesar itu */
.grow.no-cards{padding-bottom:clamp(30px,3.6vw,52px)}
.grow.no-cards .quote-row{margin-bottom:0}
/* v4.18 Explore: dua kad di atas, satu kad penuh lebar di bawah; senarai jadi satu baris berpemisah */
.explore.is-bands .explore-grid{grid-template-columns:1fr 1fr;gap:14px}
.explore.is-bands .xcard:last-child{grid-column:1/-1}
.explore.is-bands .xcard:not(:last-child){min-height:clamp(320px,26vw,400px)}
.explore.is-bands .xcard:not(:last-child)::after{background:linear-gradient(180deg,rgba(7,47,45,.28) 0%,rgba(7,47,45,.82) 52%,rgba(7,47,45,.94) 100%)}
.explore.is-bands .xcard:not(:last-child) .xb{max-width:none;align-self:end}
.explore.is-bands .xb-items{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.explore.is-bands .xb-items li{position:relative;font-size:13.5px;letter-spacing:.01em;color:rgba(248,245,239,.78)}
.explore.is-bands .xb-items li+li::before{content:"";position:absolute;left:-9px;top:50%;width:5px;height:5px;
background:var(--gold);transform:translateY(-50%) skewX(var(--skew));opacity:.75}
@media (max-width:760px){
.explore.is-bands .explore-grid{grid-template-columns:1fr}
.explore.is-bands .xcard:not(:last-child){min-height:0}
.explore.is-bands .xcard:not(:last-child) .xb{padding:150px 20px 26px}
}
/* v4.19 Explore: senarai jadi pil kecil, tiada skew, jarak rapat */
.explore.is-bands .xb-items{gap:6px}
.explore.is-bands .xb-items li{padding:4px 11px;border:1px solid rgba(248,245,239,.3);border-radius:999px;
background:rgba(248,245,239,.08);font-size:12.5px;line-height:1.5;color:rgba(248,245,239,.92);white-space:nowrap}
.explore.is-bands .xb-items li+li::before{display:none}
@media (max-width:520px){.explore.is-bands .xb-items li{white-space:normal}}
/* v4.20 Grow di telefon: petikan dan potret bersebelahan, teks dapat ruang lebih besar */
@media (max-width:760px){
.grow .quote-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);gap:12px;align-items:end;margin-top:26px}
.grow .quote-box{max-width:none;padding:14px 0 0}
.grow .quote-box .quote{font-size:17px;line-height:1.5}
.grow .quote-box .qm1{left:-4px;top:-10px;font-size:52px}
.grow .quote-box .qm2{display:none}
.grow .quote-pic{width:100%;align-self:end}
}
/* v4.23 Vision, mission, values: tiga baris bertanda kunci, tiada CTA, tiada kotak */
.vmv .lbl{margin-bottom:clamp(34px,4vw,56px)}
.vmv-row{display:grid;grid-template-columns:clamp(110px,13vw,180px) minmax(0,1fr);gap:clamp(20px,4vw,56px);
padding:clamp(26px,3vw,40px) 0;align-items:start}
.vmv-row+.vmv-row{border-top:1px solid var(--line)}
.vmv-row:first-of-type{padding-top:0}
.vmv-k{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);
padding-top:.55em;white-space:nowrap}
.vmv-s{font-size:clamp(20px,2vw,28px);line-height:1.4;color:var(--ink);max-width:44ch;text-wrap:pretty;
letter-spacing:-.01em}
.vmv-row.is-lead .vmv-s{color:var(--teal)}
.vmv-s p+.vmv-abcd{margin-top:clamp(22px,2.4vw,34px)}
.vmv-abcd{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,30px);max-width:44ch}
.vmv-abcd li{display:flex;flex-direction:column;gap:6px}
.vmv-l{font-family:var(--font);font-size:clamp(30px,2.8vw,38px);font-weight:700;line-height:1;
letter-spacing:-.04em;color:var(--gold)}
.vmv-w{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--teal)}
@media (max-width:860px){
.vmv-row{grid-template-columns:1fr;gap:14px;padding:clamp(24px,5vw,32px) 0}
.vmv-k{padding-top:0}
.vmv-s,.vmv-row.is-lead .vmv-s{max-width:none}
}
@media (max-width:560px){
.vmv-abcd{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}
}
/* v4.26 Page hero jubin tanpa kad gambar (Our Leaders): teks di tengah,
slab emas tunggal diganti motif jalur skew di tepi kanan */
.phero.is-tile:not(:has(.phero-cards)){text-align:center}
.phero.is-tile:not(:has(.phero-cards)) .phero-in{display:block}
.phero.is-tile:not(:has(.phero-cards)) .phero-h{margin-inline:auto;max-width:16ch}
.phero.is-tile:not(:has(.phero-cards)) .lead{margin-inline:auto;max-width:54ch}
.phero.is-tile:not(:has(.phero-cards)) .phero-tile::before{
top:-12%;bottom:-12%;right:-3vw;left:auto;width:min(34vw,440px);
background:repeating-linear-gradient(90deg,var(--gold) 0 13px,transparent 13px 42px);
opacity:.72;z-index:1;transform:skewX(var(--skew));
-webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);
mask-image:linear-gradient(90deg,transparent,#000 70%)}
@media (max-width:760px){
.phero.is-tile:not(:has(.phero-cards)) .phero-tile::before{width:34vw;right:-14vw;opacity:.5}
}
/* v4.29 Kad Leaders: potret separuh badan nisbah 3:4, muat penuh dari atas */
.ld-ph{aspect-ratio:3/4}
.ld-ph img{left:50%;bottom:auto;top:0;width:118%;height:118%;object-fit:cover;object-position:center top;transform:translateX(-50%)}
.ld-card:hover .ld-ph img{transform:translateX(-50%) scale(1.04)}
.ld-ph::after{background:linear-gradient(180deg,rgba(7,47,45,0) 46%,rgba(7,47,45,.88) 100%)}
/* v4.31 Page hero foto: overlay teal sinematik, teks tengah, tiada jalur emas */
.phero.is-photo{background:var(--teal-2);min-height:min(62vh,560px)}
.phero.is-photo.is-short{min-height:min(56vh,500px)}
.phero.is-photo .phero-img{opacity:1;filter:grayscale(.18) contrast(1.06) saturate(.85)}
.phero.is-photo::before{z-index:1;background:
linear-gradient(180deg,rgba(7,47,45,.72) 0%,rgba(7,47,45,.66) 45%,rgba(7,47,45,.94) 100%),
radial-gradient(115% 85% at 50% 42%,rgba(7,47,45,.18) 0%,rgba(7,47,45,.72) 100%)}
.phero.is-photo .phero-in{z-index:2}
.phero.is-photo .phero-h{max-width:18ch;text-shadow:0 2px 30px rgba(3,26,25,.45)}
.phero.is-photo .lead{max-width:56ch;color:rgba(248,245,239,.88)}
.phero.is-photo .phero-in::after{content:"";display:block;width:64px;height:3px;margin:clamp(26px,3vw,40px) auto 0;
background:var(--gold);transform:skewX(var(--skew))}
/* v4.33 Mesej duo di telefon: teks dulu, dua potret bersebelahan di bawah, lebih kecil */
@media (max-width:760px){
.msg.is-duo .msg-in{grid-template-columns:1fr 1fr}
.msg.is-duo .msg-txt{grid-column:1/-1;order:1;text-align:center;align-items:center;padding:36px 22px 30px}
.msg.is-duo .msg-txt .lbl,.msg.is-duo .msg-txt .btn{align-self:center}
.msg.is-duo .msg-ph{order:2;aspect-ratio:3/4;min-height:0}
.msg.is-duo .msg-ph img{height:96%}
.msg.is-duo .msg-slab{background:linear-gradient(100deg,var(--teal-2) 0%,var(--teal-2) 10%,var(--gold-2) 10%,var(--gold) 74%,var(--teal-2) 74%)}
.msg.is-duo .msg-ph:last-child .msg-slab{background:linear-gradient(-100deg,var(--teal-2) 0%,var(--teal-2) 10%,var(--gold-2) 10%,var(--gold) 74%,var(--teal-2) 74%)}
.msg.is-duo .msg-who{left:12px;right:10px;bottom:12px;gap:8px}
.msg.is-duo .msg-who i{width:6px;height:30px}
.msg.is-duo .msg-who span{font-size:9.5px;letter-spacing:.1em}
.msg.is-duo .msg-who b{font-size:13px;line-height:1.15}
}
@media (max-width:420px){
.msg.is-duo .msg-who b{font-size:11.5px}
.msg.is-duo .msg-who span{font-size:8.5px}
}
/* v4.36 Hero foto: jajar dari atas supaya kepala tak terpotong pada skrin lebar */
.phero.is-photo .phero-img{object-position:center 26%}
.phero.is-photo{min-height:clamp(460px,30vw,700px)}
.phero.is-photo.is-short{min-height:clamp(440px,27vw,640px)}
/* v4.39 Rentak muka dalam: jarak antara seksyen dirapatkan (homepage kekal lapang) */
body:not(.home) .sec{padding-block:clamp(64px,6vw,96px)}
body:not(.home) .philo{padding-block:clamp(48px,5vw,80px)}
body:not(.home) .partners-band{padding-block:clamp(40px,4vw,56px)}
/* v4.41 Kad solutions berfoto: foto penuh ke tepi kad, nombor jadi lencana condong atas foto,
kandungan dapat padding sendiri supaya tajuk tak melekat pada gambar */
.sol.is-cards .sol-row:has(.sol-ph){padding:0;overflow:hidden;display:flex;flex-direction:column}
.sol.is-cards .sol-row:has(.sol-ph) .sol-ph{position:relative;display:block;width:100%;height:auto;
aspect-ratio:16/10;border-radius:0;margin:0;overflow:hidden}
.sol.is-cards .sol-row:has(.sol-ph) .sol-ph img{transition:transform 1.1s var(--ease)}
.sol.is-cards .sol-row:has(.sol-ph):hover .sol-ph img{transform:scale(1.045)}
.sol.is-cards .sol-row:has(.sol-ph) .sol-ph::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;
background:linear-gradient(180deg,rgba(7,47,45,0),rgba(7,47,45,.42));pointer-events:none}
.sol.is-cards .sol-row:has(.sol-ph) .sol-head{position:static;padding:0}
.sol.is-cards .sol-row:has(.sol-ph) .sol-no{position:absolute;left:clamp(16px,1.8vw,22px);top:clamp(16px,1.8vw,22px);
right:auto;z-index:2;min-width:0;display:grid;place-items:center;width:38px;height:38px;
width:44px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--navy);opacity:1;line-height:1;
background:var(--gold);clip-path:polygon(13% 0,100% 0,87% 100%,0 100%);
box-shadow:0 6px 18px rgba(3,26,25,.28)}
.sol.is-cards .sol-row:has(.sol-ph) .sol-head h3{padding:clamp(22px,2.4vw,28px) clamp(22px,2.4vw,30px) 0;
padding-right:clamp(22px,2.4vw,30px)}
.sol.is-cards .sol-row:has(.sol-ph) .sol-body{margin-top:12px;padding:0 clamp(22px,2.4vw,30px) clamp(26px,2.8vw,34px)}
/* item ke-5 tiada pasangan: dibentang penuh dengan foto lebih rendah */
.sol.is-cards .sol-list[data-n="5"] .sol-row:last-child{grid-column:1/-1}
.sol.is-cards .sol-list[data-n="5"] .sol-row:last-child .sol-ph{aspect-ratio:24/7}
.sol.is-cards .sol-list[data-n="5"] .sol-row:last-child .sol-body .sol-items ul{grid-template-columns:1fr 1fr;gap:8px 28px}
@media (max-width:700px){
.sol.is-cards .sol-row:has(.sol-ph) .sol-ph{aspect-ratio:16/9}
.sol.is-cards .sol-list[data-n="5"] .sol-row:last-child .sol-ph{aspect-ratio:16/9}
.sol.is-cards .sol-list[data-n="5"] .sol-row:last-child .sol-body .sol-items ul{grid-template-columns:1fr}
}
/* v4.42 Services di telefon: sentiasa dua lajur, tiada kad tergantung sendirian */
@media (max-width:760px){
.sv-grid,.sv-grid[data-n]{grid-template-columns:1fr 1fr;gap:12px}
.sv-item{padding:24px 16px 20px}
.sv-ic{width:54px;height:54px;margin-bottom:14px}
.sv-ic svg{width:22px;height:22px}
}
@media (max-width:420px){
.sv-grid,.sv-grid[data-n]{grid-template-columns:1fr 1fr;gap:10px}
.sv-item{padding:20px 12px 18px}
.sv-item h3{font-size:15px}
.sv-item p{font-size:12.5px}
}
/* v4.46 Explore: kembali tiga lajur sama saiz, CTA kembali jadi butang skew emas */
.explore.is-bands .explore-grid{grid-template-columns:repeat(3,1fr);gap:14px}
.explore.is-bands .xcard,
.explore.is-bands .xcard:last-child,
.explore.is-bands .xcard:not(:last-child){grid-column:auto;min-height:clamp(420px,34vw,520px)}
.explore.is-bands .xcard::after,
.explore.is-bands .xcard:not(:last-child)::after{background:linear-gradient(180deg,rgba(7,47,45,.24) 0%,rgba(7,47,45,.80) 50%,rgba(7,47,45,.95) 100%)}
.explore.is-bands .xb,
.explore.is-bands .xcard:not(:last-child) .xb{align-self:end;max-width:none;padding:clamp(20px,2vw,28px)}
.explore.is-bands .xb-head h3{font-size:clamp(24px,2vw,30px)}
.explore.is-bands .xb-row{display:block}
.explore.is-bands .xb-row p{max-width:none;margin-bottom:16px}
@media (max-width:760px){
.explore.is-bands .explore-grid{grid-template-columns:1fr 1fr}
.explore.is-bands .xcard,.explore.is-bands .xcard:last-child{min-height:clamp(340px,44vw,420px)}
.explore.is-bands .xcard:last-child{grid-column:1/-1}
}
@media (max-width:620px){
.explore.is-bands .explore-grid{grid-template-columns:1fr}
.explore.is-bands .xcard,.explore.is-bands .xcard:last-child{min-height:0;aspect-ratio:3/3.4}
.explore.is-bands .xb,.explore.is-bands .xcard:not(:last-child) .xb{padding:150px 20px 26px}
}
/* v4.47 Explore: buang senarai pil dalam kad, biar tajuk dan ayat sahaja */
.explore.is-bands .xb-items{display:none}
/* v4.48 Explore CTA: samakan dengan butang emas header, tiada gaya khas */
.explore .xb .btn{height:44px;padding:0 24px;font-size:14px;gap:10px;white-space:nowrap}
.explore .xb .btn:has(svg),.explore .xb .btn:has(i){padding-right:22px}
.explore .xb .btn svg,.explore .xb .btn i{width:18px;height:18px;padding:0}
/* v4.49 Kad solutions ke-5: saiz sama dengan kad di atasnya, diletak di tengah baris */
.sol.is-cards .sol-list[data-n="5"] .sol-row:last-child{grid-column:1/-1;justify-self:center;
width:calc(50% - 8px)}
.sol.is-cards .sol-list[data-n="5"] .sol-row:last-child .sol-ph{aspect-ratio:16/10}
.sol.is-cards .sol-list[data-n="5"] .sol-row:last-child .sol-body .sol-items ul{grid-template-columns:1fr;gap:8px}
@media (max-width:760px){
.sol.is-cards .sol-list[data-n="5"] .sol-row:last-child{width:100%}
}
/* v4.50 Intro berfoto: rawatan overlay sama dengan hero foto (Leaders, Careers) */
.intro.has-bg{position:relative;overflow:hidden;background:var(--teal-2);color:var(--cream);isolation:isolate}
.intro-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 26%;
filter:grayscale(.18) contrast(1.06) saturate(.85);z-index:0}
.intro.has-bg::before{content:"";position:absolute;inset:0;z-index:1;background:
linear-gradient(180deg,rgba(7,47,45,.76) 0%,rgba(7,47,45,.70) 45%,rgba(7,47,45,.94) 100%),
radial-gradient(115% 85% at 50% 42%,rgba(7,47,45,.20) 0%,rgba(7,47,45,.74) 100%)}
.intro.has-bg .wrap{position:relative;z-index:2}
/* v4.52 Mesej duo di telefon: jalur emas lebih nipis dan kedua-duanya condong ke arah sama */
@media (max-width:760px){
.msg.is-duo .msg-slab,
.msg.is-duo .msg-ph:last-child .msg-slab{
background:linear-gradient(100deg,var(--teal-2) 0%,var(--teal-2) 26%,var(--gold-2) 26%,var(--gold) 60%,var(--teal-2) 60%);
transform:none}
}
/* v4.56 Seksyen dua belah dengan satu kad sahaja: kad di tengah, tiada lajur kosong */
.sd-grid[data-n="1"]{grid-template-columns:minmax(0,min(720px,100%));justify-content:center}
/* v4.58 Kad split jenama Klinik Rumi: palet Rumi sendiri (maroon, krim, sage) dari brand guidelines */
.split.is-rumi{--rumi:#6A1842;--rumi-deep:#4E1131;--rumi-cream:#F1EBE0;--rumi-sage:#5E7C4D}
.split.is-rumi .split-card{background:linear-gradient(150deg,var(--rumi) 0%,var(--rumi-deep) 100%);color:var(--rumi-cream);
position:relative;overflow:hidden}
/* motif jubin geometri halus, menggantikan tanda bintang MAFAR */
.split.is-rumi .split-card::after{content:"";position:absolute;right:-6%;bottom:-14%;width:58%;aspect-ratio:1;pointer-events:none;
opacity:.16;background:
repeating-linear-gradient(45deg,var(--rumi-cream) 0 2px,transparent 2px 26px),
repeating-linear-gradient(-45deg,var(--rumi-cream) 0 2px,transparent 2px 26px);
-webkit-mask-image:radial-gradient(70% 70% at 80% 80%,#000,transparent 72%);
mask-image:radial-gradient(70% 70% at 80% 80%,#000,transparent 72%)}
.split.is-rumi .split-card>*{position:relative;z-index:1}
.split.is-rumi .h-l{color:var(--rumi-cream)}
.split.is-rumi .split-text{color:rgba(241,235,224,.82)}
.split.is-rumi .lbl{color:var(--rumi-cream)}
.split.is-rumi .lbl::before{background:rgba(241,235,224,.10);border:1px solid rgba(241,235,224,.42)}
.split.is-rumi .lbl svg{background:var(--rumi-sage)}
.split.is-rumi .btn.gold{color:var(--rumi-deep)}
.split.is-rumi .btn.gold::before{background:var(--rumi-cream)}
.split.is-rumi .btn.gold::after{border-color:rgba(241,235,224,.7)}
/* ===== v4.83 Garis masa: paksi tahun boleh ditarik =====
Semua tahun kelihatan serentak pada satu paksi. Tombol digerakkan ke tahun yang dipilih,
Swiper menukar panel kandungan. Perjalanan nampak sekali pandang. */
.timeline.is-flow .tlx{margin-top:clamp(32px,3.6vw,52px)}
.timeline.is-flow .tlx-head{display:flex;align-items:center;justify-content:center;gap:clamp(20px,3vw,44px)}
.timeline.is-flow .tlx-year{font-family:var(--font-num);font-size:clamp(56px,9vw,132px);font-weight:600;
letter-spacing:-.05em;line-height:.9;color:var(--teal);min-width:4ch;text-align:center}
.timeline.is-flow .tlx-arrow{width:clamp(42px,3.6vw,54px);height:clamp(42px,3.6vw,54px);display:grid;place-items:center;
border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--teal);cursor:pointer;
transition:background .3s,color .3s,border-color .3s,opacity .3s}
.timeline.is-flow .tlx-arrow:hover{background:var(--teal);color:var(--cream);border-color:var(--teal)}
.timeline.is-flow .tlx-arrow.is-off{opacity:.3;pointer-events:none}
.timeline.is-flow .tlx-arrow svg,.timeline.is-flow .tlx-arrow i{width:20px;height:20px}
/* paksi */
.timeline.is-flow .tlx-axis{position:relative;height:96px;margin-top:clamp(18px,2vw,28px);
width:min(1240px,calc(100% - 48px));margin-inline:auto}
.timeline.is-flow .tlx-line{position:absolute;left:0;right:0;top:58px;height:1.5px;background:var(--line)}
.timeline.is-flow .tlx-line i{position:absolute;inset:0;background:var(--gold);transform-origin:0 50%;
transform:scaleX(0);transition:transform .55s var(--ease)}
.timeline.is-flow .tlx-tick{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;
align-items:center;gap:6px;background:none;border:0;padding:0 8px;cursor:pointer;color:var(--ink-2);
font:inherit;transition:color .35s}
.timeline.is-flow .tlx-tick b{font-family:var(--font-num);font-size:clamp(15px,1.3vw,19px);font-weight:600;
letter-spacing:-.02em;line-height:1;opacity:.55;transition:opacity .35s,color .35s}
.timeline.is-flow .tlx-tick span{font-size:9px;letter-spacing:.2em;opacity:.4;transition:opacity .35s}
.timeline.is-flow .tlx-tick i{position:absolute;left:50%;top:58px;width:9px;height:9px;border-radius:50%;
background:var(--cream-3);border:1.5px solid var(--cream-3);
transform:translate(-50%,-50%);transition:background .35s,border-color .35s,transform .35s}
.timeline.is-flow .tlx-tick:hover b{opacity:.9}
.timeline.is-flow .tlx-tick.is-on{color:var(--teal)}
.timeline.is-flow .tlx-tick.is-on b{opacity:1;color:var(--teal)}
.timeline.is-flow .tlx-tick.is-on span{opacity:.75}
.timeline.is-flow .tlx-tick.is-on i{background:var(--gold);border-color:var(--gold);transform:translate(-50%,-50%) scale(1.25)}
.timeline.is-flow .tlx-tick.is-past i{background:var(--gold);border-color:var(--gold)}
.timeline.is-flow .tlx-knob{position:absolute;top:58px;left:0;width:34px;height:34px;margin:-17px 0 0 -17px;
border-radius:50%;background:#fff;border:1.5px solid var(--gold);box-shadow:0 8px 22px rgba(15,77,74,.16);
display:grid;place-items:center;cursor:grab;touch-action:none;transition:left .55s var(--ease)}
.timeline.is-flow .tlx-knob::before,.timeline.is-flow .tlx-knob::after{content:"";position:absolute;width:5px;height:5px;
border-right:1.5px solid var(--gold-ink);border-bottom:1.5px solid var(--gold-ink)}
.timeline.is-flow .tlx-knob::before{transform:rotate(135deg);margin-left:-8px}
.timeline.is-flow .tlx-knob::after{transform:rotate(-45deg);margin-left:8px}
.timeline.is-flow .tlx-knob.is-drag{cursor:grabbing;transition:none}
/* panel kandungan tahun */
.timeline.is-flow .tlx-sw{overflow:hidden;width:min(1240px,calc(100% - 48px));margin:clamp(22px,2.6vw,36px) auto 0}
.timeline.is-flow .tlx-panel{height:auto;display:grid;grid-template-columns:minmax(0,.52fr) minmax(0,1fr);
gap:clamp(24px,3vw,48px);align-items:start}
/* foto: dua keping bertindih dan sedikit condong, berbingkai putih seperti di muka utama */
.timeline.is-flow .tlx-ph{position:relative;margin:0;height:clamp(180px,19vw,250px)}
.timeline.is-flow .tlx-pic{position:absolute;margin:0;padding:7px;background:#fff;border-radius:var(--rp);
box-shadow:0 18px 40px rgba(15,77,74,.16);overflow:hidden;transition:transform .6s var(--ease)}
.timeline.is-flow .tlx-pic img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--rpi);
filter:saturate(.9) contrast(1.03)}
.timeline.is-flow .tlx-pic-a{left:0;top:2%;width:68%;height:84%;transform:rotate(-3.5deg);z-index:2}
.timeline.is-flow .tlx-pic-b{right:0;bottom:0;width:46%;height:58%;transform:rotate(3deg);z-index:1;
box-shadow:0 12px 28px rgba(15,77,74,.14)}
.timeline.is-flow .tlx-ph:not(.is-duo) .tlx-pic-a{left:0;right:0;top:0;width:auto;height:100%;transform:rotate(-2deg)}
.timeline.is-flow .tlx-panel:hover .tlx-pic-a{transform:rotate(-2deg) translateY(-4px)}
.timeline.is-flow .tlx-panel:hover .tlx-pic-b{transform:rotate(5deg) translateY(5px)}
.timeline.is-flow .tlx-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:clamp(18px,2vw,30px)}
.timeline.is-flow .tlx-col{position:relative}
.timeline.is-flow .tlx-col.is-lead{grid-column:1/-1}
.timeline.is-flow .tlx-col.is-lead h3{font-size:clamp(20px,1.8vw,27px);letter-spacing:-.02em;line-height:1.2;color:var(--teal)}
.timeline.is-flow .tlx-col.is-lead p{margin-top:10px;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:60ch}
.timeline.is-flow .tlx-no{display:block;font-family:var(--font-num);font-size:22px;font-weight:600;
letter-spacing:-.02em;color:var(--gold);line-height:1;margin-bottom:10px}
.timeline.is-flow .tlx-col p{font-size:14.5px;line-height:1.6;color:var(--ink)}
.timeline.is-flow .tlx-col.is-note{grid-column:1/-1}
.timeline.is-flow .tlx-col.is-note p{font-size:13px;font-style:italic;color:var(--ink-2)}
/* telefon: reka bentuk sama seperti desktop, cuma kandungan bertindan sebab lebar */
@media (max-width:820px){
.timeline.is-flow .tlx-panel{grid-template-columns:1fr;gap:20px}
.timeline.is-flow .tlx-ph{height:clamp(170px,44vw,210px)}
.timeline.is-flow .tlx-cols{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}
@media (max-width:520px){
.timeline.is-flow .tlx-axis{width:calc(100% - 32px)}
.timeline.is-flow .tlx-tick b{font-size:14px}
.timeline.is-flow .tlx-tick span{font-size:8px;letter-spacing:.16em}
.timeline.is-flow .tlx-knob{width:30px;height:30px;margin:-15px 0 0 -15px}
.timeline.is-flow .tlx-cols{grid-template-columns:1fr}
}
/* v4.88 Senarai jawatan: satu baris satu pautan terus ke borang, tiada lagi lipatan */
.ops-list .ops-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:18px;align-items:center;
padding:22px 4px 22px 0;border-bottom:1px solid var(--line);color:inherit;
transition:background .3s,padding .35s var(--ease)}
.ops-list .ops-row:hover{background:rgba(15,77,74,.035);padding-left:10px;padding-right:10px}
.ops-list .ops-row:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.ops-go{display:inline-flex;align-items:center;gap:10px;color:var(--teal);font-size:14px;font-weight:600;
white-space:nowrap}
.ops-go-t{opacity:0;transform:translateX(6px);transition:opacity .3s,transform .35s var(--ease)}
.ops-list .ops-row:hover .ops-go-t{opacity:1;transform:none}
.ops-go svg,.ops-go i{width:22px;height:22px;transition:transform .35s var(--ease)}
.ops-list .ops-row:hover .ops-go svg,.ops-list .ops-row:hover .ops-go i{transform:translateX(5px)}
@media (max-width:760px){
.ops-list .ops-row{grid-template-columns:40px minmax(0,1fr) auto;gap:12px}
.ops-go-t{display:none}
}
/* v5.01 Seksyen Our Branches dipadatkan supaya tajuk, statistik, peta dan senarai muat satu skrin */
.nationwide{padding-block:clamp(52px,5.4vw,84px) clamp(30px,3vw,44px)}
.nationwide .nw-h{font-size:clamp(26px,2.9vw,40px)}
.nationwide .lbl{margin-bottom:12px}
.nationwide .nw-brand{height:clamp(24px,2.3vw,32px);margin-top:14px}
.nationwide .stat-cards{margin-top:clamp(20px,2.2vw,30px);gap:20px}
.nationwide .stat-card{padding:15px 24px;min-width:262px;gap:14px}
.nationwide .stat-card b{font-size:clamp(23px,2.1vw,30px)}
.nationwide .stat-card>div>span{font-size:13.5px;margin-top:2px}
.nationwide .pin-ic{width:36px;height:36px}
.nationwide .atlas{margin-top:clamp(20px,2.2vw,30px)}
.nationwide .map-svg{max-height:45vh}
/* senarai klinik dipadatkan */
.nationwide .clinic-card{padding:7px;gap:5px;max-height:45vh;overflow-y:auto;scrollbar-width:thin;
scrollbar-color:rgba(106,24,66,.28) transparent}
.nationwide .clinic-card::-webkit-scrollbar{width:6px}
.nationwide .clinic-card::-webkit-scrollbar-thumb{background:rgba(106,24,66,.25);border-radius:99px}
.nationwide .cl-group{padding:8px 9px 5px}
.nationwide .cl-group h5{font-size:10.5px;margin-bottom:4px}
.nationwide .cl-item{padding:5px 8px;gap:8px}
.nationwide .cl-item .nm{font-size:13.5px}
.nationwide .cl-item .ad{font-size:12px;margin-top:1px}
.nationwide .map-cap{margin-top:6px;font-size:12px}
@media (max-width:900px){
.nationwide .map-svg{max-height:none}
.nationwide .clinic-card{max-height:none;overflow:visible}
}
/* v5.05 Kad statistik di telefon: satu baris bertindih sedikit, sama rupa dengan desktop */
@media (max-width:700px){
.nationwide .stat-cards{flex-wrap:nowrap;gap:0;justify-content:center;margin-top:22px}
.nationwide .stat-card{min-width:0;flex:1 1 0;padding:12px 12px;gap:9px}
/* kad kanan di atas: tepi kirinya ada logo Google, tepi kanan kad kiri kosong */
.nationwide .stat-card.tilt-l{margin-right:-10px;z-index:1;transform:rotate(-2.5deg)}
.nationwide .stat-card.tilt-r{margin-left:-10px;z-index:2;transform:rotate(2.5deg)}
.nationwide .stat-card b{font-size:19px;line-height:1.05}
.nationwide .stat-card b .stars{font-size:.62em;letter-spacing:.02em}
.nationwide .stat-card>div>span{font-size:11px;line-height:1.3;margin-top:3px}
.nationwide .pin-ic{width:34px;height:34px;flex:none}
.nationwide .g-logo svg{width:34px;height:34px}
.nationwide .stat-card .g-logo{flex:none}
}
@media (max-width:380px){
.nationwide .stat-card{padding:10px 9px;gap:7px}
.nationwide .stat-card b{font-size:17px}
.nationwide .stat-card>div>span{font-size:10px}
.nationwide .pin-ic,.nationwide .g-logo svg{width:28px;height:28px}
}
/* v5.08 Peta dan senarai klinik dirapatkan, ruang mati di tengah dikecilkan */
/* peta dihadkan tinggi, jadi lebarnya ditentukan nisbah. Grid lajur tetap tinggalkan ruang mati,
jadi guna flex: peta ambil lebar sebenar dia, senarai duduk terus di sebelahnya. */
.nationwide .atlas{padding-inline:clamp(20px,3.4vw,52px)}
.nationwide .atlas-in{width:auto;max-width:100%;display:flex;justify-content:center;align-items:flex-start;
gap:clamp(16px,2.4vw,44px)}
.nationwide .map-wrap{flex:0 0 auto;display:block}
.nationwide .map-svg{width:auto;max-width:100%;height:45vh}
.nationwide .clinic-card{flex:0 1 clamp(420px,38vw,560px)}
@media (max-width:900px){
.nationwide .atlas-in{display:block}
.nationwide .map-svg{width:100%;height:auto}
.nationwide .clinic-card{margin-top:22px}
}
/* ===== v5.11 Seksyen Our Branches: tema gelap Klinik Rumi =====
Latar maroon penuh, kandungan krim. Peta dilukis semula untuk latar gelap. */
.nationwide.is-rumi{--rumi:#6A1842;--rumi-deep:#4E1131;--rumi-dark:#3C0D26;--rumi-cream:#F1EBE0;
--rumi-gold:var(--gold);--rumi-line:rgba(241,235,224,.16);
background:linear-gradient(170deg,var(--rumi-deep) 0%,var(--rumi-dark) 100%);color:var(--rumi-cream)}
.nationwide.is-rumi .nw-h{color:var(--rumi-cream)}
.nationwide.is-rumi .lbl{color:var(--rumi-cream)}
.nationwide.is-rumi .lbl::before{background:rgba(241,235,224,.10);border:1px solid rgba(241,235,224,.34)}
.nationwide.is-rumi .lbl svg{background:var(--rumi-gold)}
.nationwide.is-rumi .nw-brand{display:block;height:clamp(24px,2.3vw,32px);width:auto;margin:14px auto 0}
/* kad statistik: krim atas latar gelap */
.nationwide.is-rumi .stat-card{background:var(--rumi-cream);box-shadow:0 22px 48px rgba(24,4,15,.40)}
.nationwide.is-rumi .stat-card b{color:var(--rumi)}
.nationwide.is-rumi .stat-card b .stars{color:var(--rumi-gold)}
.nationwide.is-rumi .stat-card>div>span{color:#5C4450}
.nationwide.is-rumi .pin-ic{color:var(--rumi)}
/* peta untuk latar gelap */
.nationwide.is-rumi .map-svg .land path{fill:rgba(241,235,224,.16)}
/* titik: digemukkan dengan stroke (jejari terkunci dalam path), dan dipudarkan mengikut
kecerunan bulat berpusat pada kelompok klinik supaya ia tidak rata dan halus sangat */
.nationwide.is-rumi .map-svg .dots path{fill:rgba(241,235,224,.92);stroke:rgba(241,235,224,.92);
stroke-width:1.5;paint-order:stroke}
.nationwide.is-rumi .map-svg .dots{
-webkit-mask-image:radial-gradient(62% 58% at 40% 64%,#000 0%,rgba(0,0,0,.62) 48%,rgba(0,0,0,.20) 100%);
mask-image:radial-gradient(62% 58% at 40% 64%,#000 0%,rgba(0,0,0,.62) 48%,rgba(0,0,0,.20) 100%)}
/* sempadan wilayah: garis lurus penuh, bukan putus-putus, dengan bayang halus di bawahnya
supaya pembahagian zon terbaca tanpa menarik perhatian dari pin */
.nationwide.is-rumi .map-svg .rb-line{stroke:rgba(241,235,224,.34);stroke-dasharray:none;stroke-width:1;
filter:drop-shadow(0 2px 3px rgba(24,4,15,.75)) drop-shadow(0 6px 12px rgba(24,4,15,.45))}
.nationwide.is-rumi .map-svg .rl-text{fill:var(--rumi-cream);opacity:.92}
.nationwide.is-rumi .map-svg .rl-sub{fill:var(--rumi-cream);opacity:.62}
.nationwide.is-rumi .pin .halo{fill:var(--rumi-gold)}
.nationwide.is-rumi .pin .ring{stroke:var(--rumi-cream)}
.nationwide.is-rumi .pin .disc{fill:var(--rumi-cream)}
.nationwide.is-rumi .pin .pin-mark{fill:var(--rumi)}
.nationwide.is-rumi .pin.on .ring{stroke:var(--rumi-gold)}
.nationwide.is-rumi .pin.on .halo{opacity:.30}
.nationwide.is-rumi .pin-lbl{fill:var(--rumi-cream);stroke:var(--rumi-dark);stroke-width:5px}
.nationwide.is-rumi .pin-rate{fill:var(--rumi-gold);stroke:var(--rumi-dark);stroke-width:4px}
.nationwide.is-rumi .map-cap{color:var(--rumi-cream);opacity:.6}
/* balon peta */
.nationwide.is-rumi .popup{background:rgba(241,235,224,.94);border-color:rgba(255,255,255,.7);color:#33121F;
box-shadow:0 26px 60px rgba(24,4,15,.46)}
.nationwide.is-rumi .popup::after{background:rgba(241,235,224,.96);border-right-color:rgba(255,255,255,.7);
border-bottom-color:rgba(255,255,255,.7)}
.nationwide.is-rumi .pp-name{color:var(--rumi)}
.nationwide.is-rumi .pp-addr{color:#5C4450}
.nationwide.is-rumi .pp-rate{color:var(--gold-ink)}
.nationwide.is-rumi .pp-rate svg{fill:var(--rumi-gold);stroke:var(--rumi-gold)}
.nationwide.is-rumi .pp-links a{background:rgba(106,24,66,.10);color:var(--rumi)}
.nationwide.is-rumi .pp-links a:hover{background:var(--rumi);color:var(--rumi-cream)}
/* senarai klinik: kad gelap, item aktif jadi krim */
.nationwide.is-rumi .clinic-card{background:rgba(241,235,224,.07);border:1px solid var(--rumi-line);
box-shadow:0 22px 48px rgba(24,4,15,.34);
scrollbar-color:rgba(241,235,224,.28) transparent}
.nationwide.is-rumi .clinic-card::-webkit-scrollbar-thumb{background:rgba(241,235,224,.26)}
.nationwide.is-rumi .cl-group{background:rgba(241,235,224,.05)}
.nationwide.is-rumi .cl-group h5{color:var(--rumi-gold)}
.nationwide.is-rumi .cl-group h5 span{color:var(--rumi-cream);opacity:.55}
.nationwide.is-rumi .cl-item .nm{color:var(--rumi-cream)}
.nationwide.is-rumi .cl-item .ad,.nationwide.is-rumi .cl-item .no{color:var(--rumi-cream);opacity:.62}
.nationwide.is-rumi .cl-item .go{color:var(--rumi-gold)}
.nationwide.is-rumi .cl-item:hover{background:rgba(241,235,224,.10)}
.nationwide.is-rumi .cl-item.on{background:var(--rumi-cream)}
.nationwide.is-rumi .cl-item.on .nm{color:var(--rumi)}
.nationwide.is-rumi .cl-item.on .ad,.nationwide.is-rumi .cl-item.on .no{color:#5C4450;opacity:1}
.nationwide.is-rumi .cl-item.on .go{color:var(--rumi)}
/* ===== v5.15 Tab tepi melekat: seluruh jalur meluncur keluar bila kursor melintas =====
Keadaan rehat: hanya label menegak kelihatan, panel tersembunyi di luar skrin kanan.
Hover: seluruh jalur bergerak ke kiri, panel terbuka di sebelah kanan label. */
.side-rail{--popw:clamp(220px,20vw,280px);position:fixed;right:0;top:calc(var(--hh,80px) + 60px);z-index:60;
display:flex;align-items:stretch;border-radius:12px 0 0 12px;overflow:hidden;
background:var(--tab,#6A1842);box-shadow:-8px 10px 30px rgba(3,26,25,.30);
transform:translateX(var(--popw));transition:transform .55s var(--ease)}
.side-rail:hover,.side-rail:focus-within{transform:none}
.side-tab{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
padding:22px 20px;color:#F6EFE6;font-size:26px;font-weight:700;letter-spacing:.02em;line-height:1}
.side-tab span{writing-mode:vertical-rl;text-orientation:mixed}
.side-tab i,.side-tab svg{width:24px;height:24px;opacity:.9;stroke-width:2.5;flex:none}
.side-rail:hover .side-tab i,.side-rail:focus-within .side-tab i{transform:rotate(180deg);transition:transform .45s var(--ease)}
.side-pop{flex:0 0 var(--popw);width:var(--popw);display:flex;flex-direction:column;gap:12px;
padding:14px 14px 16px 0;color:#F6EFE6}
.side-pop-ph{position:relative;display:block;border-radius:8px;overflow:hidden;aspect-ratio:16/10;
background:rgba(255,255,255,.12)}
/* beberapa gambar bertindan, satu kelihatan pada satu masa */
.side-pop-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
opacity:0;transition:opacity .55s var(--ease)}
.side-pop-ph img.on{opacity:1}
.side-pop-t{font-size:13.5px;line-height:1.5;color:rgba(246,239,230,.92);font-weight:500}
.side-pop-b{align-self:flex-start;margin-top:auto;padding:9px 16px;border-radius:999px;background:#F6EFE6;
color:var(--tab,#6A1842);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
transition:transform .3s var(--ease)}
.side-rail:hover .side-pop-b{transform:translateX(3px)}
@media (max-width:820px){
.side-rail{--popw:0px;top:calc(var(--hh,72px) + 44px);transform:none}
.side-tab{font-size:18px;padding:18px 14px;gap:10px}
.side-tab i,.side-tab svg{width:17px;height:17px}
.side-pop{display:none}
}
@media print{.side-rail{display:none}}
/* v5.19 Kepala seksyen: tajuk besar di kiri, kad statistik di kanan pada baris yang sama */
.nationwide.is-rumi .wrap{display:flex;align-items:center;justify-content:space-between;
gap:clamp(24px,4vw,60px);flex-wrap:wrap}
.nationwide.is-rumi .center{text-align:left;flex:1 1 340px;min-width:0}
.nationwide.is-rumi .nw-h{font-size:clamp(34px,4.8vw,66px);margin-inline:0;max-width:none;line-height:1}
/* flex-basis 100% memaksa lebar penuh, jadi object-fit yang menjaga nisbah dan memusatkan logo */
.nationwide.is-rumi .nw-brand{flex:0 0 100%;width:100%;height:clamp(30px,3vw,42px);
object-fit:contain;object-position:center;margin:0 0 clamp(20px,2.6vw,34px)}
.nationwide.is-rumi .stat-cards{margin-top:0;flex:0 0 auto;justify-content:flex-end}
@media (max-width:860px){
.nationwide.is-rumi .wrap{flex-direction:column;align-items:stretch;gap:20px}
.nationwide.is-rumi .center{flex:0 0 auto}
.nationwide.is-rumi .nw-brand{margin-inline:auto}
.nationwide.is-rumi .stat-cards{justify-content:center}
}
/* v5.24 CTA duo dengan satu kad sahaja: kad dipusatkan, tiada lajur kosong di tepi */
.cta-duo .cd-grid:has(.cd-card:only-child){grid-template-columns:minmax(0,min(720px,100%));justify-content:center}
/* v5.27 Jalur logo rakan: tiada kad putih, logo terus atas latar krim */
.logo-card{background:transparent;box-shadow:none;border:0;height:auto;padding:0 clamp(8px,1.2vw,18px)}
.logo-card img{height:clamp(34px,3.2vw,48px);mix-blend-mode:normal}
.partners-band .logos{gap:clamp(16px,2vw,30px);row-gap:clamp(16px,2vw,28px)}
.logo-card.text{display:flex;flex-direction:column;align-items:center;justify-content:center;
min-height:clamp(34px,3.2vw,48px)}
/* v5.30 Seksyen video dimatikan: poster jadi gambar biasa, tiada butang main, tiada hover */
.vid.is-still{cursor:default}
.vid.is-still::after{display:none}
.vid.is-still .vid-poster{transform:none!important;filter:none}
/* ===== v5.32 Our Branches: kad statistik sebaris dengan kotak senarai, klinik akan dibuka ===== */
/* Peta setinggi 45vh dan nisbahnya tetap (1000 x 1072.9), jadi lebar baris peta + senarai boleh
dikira. Kad statistik dilebarkan sama dengan kotak senarai, kemudian ditolak ke dalam sebanyak
separuh beza antara lebar wrap dan lebar baris itu, maka tepi kanannya jatuh tepat pada tepi
kanan kotak senarai di bawah. Peratus margin dikira atas lebar wrap, bukan viewport. */
.nationwide.is-rumi{--nw-gap:clamp(16px,2.4vw,44px);--nw-list:clamp(420px,38vw,560px);
--nw-map:calc(45vh * 0.932);--nw-row:calc(var(--nw-map) + var(--nw-gap) + var(--nw-list))}
.nationwide.is-rumi .stat-cards{flex:0 0 var(--nw-list);gap:clamp(10px,1.2vw,18px);
margin-right:max(0px,calc((100% - var(--nw-row)) / 2))}
.nationwide.is-rumi .stat-card{flex:1 1 0;min-width:0}
@media (min-width:1001px){.nationwide.is-rumi .stat-card{padding:14px 18px}}
/* hanya desktop sempit: di bawah 1000px kad kembali ke peraturan telefon, jadi julat ini
tidak boleh terbuka sampai ke telefon atau ia akan menewaskan saiz teks di sana */
@media (min-width:1001px) and (max-width:1240px){
.nationwide.is-rumi .stat-card{padding:13px 14px;gap:11px}
.nationwide.is-rumi .stat-card b{font-size:clamp(21px,1.9vw,28px)}
}
@media (max-width:900px){
.nationwide.is-rumi .stat-cards{flex:1 1 auto;margin-right:0}
}
/* Klinik yang belum dibuka: tiada pin di peta, disenaraikan sendiri dengan tanda Coming soon */
.nationwide .cl-item.is-soon{grid-template-columns:26px 1fr auto;cursor:default}
.nationwide .cl-item.is-soon:hover{background:transparent}
.nationwide .soon-tag{align-self:center;justify-self:end;white-space:nowrap;font-size:10px;
font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.nationwide.is-rumi .cl-soon h5{color:var(--rumi-cream);opacity:.72}
.nationwide.is-rumi .cl-item.is-soon .nm{opacity:.72}
.nationwide.is-rumi .cl-item.is-soon .ad,.nationwide.is-rumi .cl-item.is-soon .no{opacity:.42}
.nationwide.is-rumi .soon-tag{background:rgba(198,160,74,.16);color:var(--rumi-gold);
border:1px solid rgba(198,160,74,.42)}
/* ===== v5.34 Our Branches: seksyen penuh satu skrin dengan latar foto yang samar ===== */
/* 90vh supaya jalur krim di atas dan di bawah tidak kelihatan serentak dengan seksyen ini,
kandungan dipusatkan menegak dalam ruang lebih itu. */
.nationwide.is-rumi{min-height:90vh;display:flex;flex-direction:column;justify-content:center;
padding-block:clamp(50px,6vw,84px);isolation:isolate}
/* foto kedai Klinik Rumi waktu senja: cahaya papan tanda memberi kedalaman pada maroon yang rata.
Diredupkan dan dinyahwarna supaya tiada butiran bersaing dengan peta dan senarai. */
.nationwide.is-rumi::before{content:"";position:absolute;inset:0;z-index:-2;
background:url(photos/clinic-rumi.webp) center 62%/cover no-repeat;
/* dikaburkan kuat: yang tinggal hanya cahaya, bukan papan tanda kedai yang boleh dibaca.
Skala sedikit supaya tepi yang kabur tidak menampakkan garis kosong. */
filter:grayscale(.5) contrast(1.05) blur(26px);transform:scale(1.12);
opacity:.3;mix-blend-mode:luminosity}
/* vignette memusatkan perhatian dan melembutkan tepi atas bawah supaya foto tidak berlanggar
dengan seksyen krim di sebelahnya */
.nationwide.is-rumi::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(132% 96% at 50% 46%,rgba(60,13,38,.30) 0%,rgba(60,13,38,.58) 64%,rgba(60,13,38,.78) 100%),
linear-gradient(180deg,rgba(78,17,49,.5) 0%,rgba(78,17,49,0) 14%,rgba(60,13,38,0) 86%,rgba(60,13,38,.5) 100%)}
@media (max-width:900px){
.nationwide.is-rumi{min-height:0;display:block;padding-block:clamp(44px,8vw,70px)}
.nationwide.is-rumi::before{opacity:.2}
}
/* ===== v5.36 Senarai klinik dipapar penuh: tiada skrol dalam kotak, desktop dan telefon ===== */
.nationwide .clinic-card{max-height:none;overflow:visible}
/* baris dan tajuk zon dipadatkan sedikit supaya 10 klinik masih muat dalam satu skrin */
.nationwide .cl-group{padding:7px 8px 4px}
.nationwide .cl-item{padding:4px 8px}
.nationwide .cl-item .ad{margin-top:0}
/* senarai kini lebih tinggi daripada peta, jadi peta ditengahkan menegak di sebelahnya */
.nationwide.is-rumi .atlas-in{align-items:center}
.nationwide.is-rumi{padding-block:clamp(40px,4.4vw,62px)}
/* v5.37 Vignette seksyen dilembutkan: tepi luar tadi terlalu gelap sampai nampak macam bayang tebal */
.nationwide.is-rumi::before{opacity:.26}
/* ===== v5.38 Kad statistik di telefon: kotak logo Google dikecilkan sama dengan svg di dalamnya =====
Kotak .g-logo kekal 52px walaupun svg di dalamnya dikecilkan ke 34px, jadi lajur teks kehilangan
18px. Itu yang memecahkan "4.9 bintang" dan "2k Google Reviews" ke baris baharu, menjadikan kad
kanan tiga baris sedangkan kad kiri dua baris. */
@media (max-width:700px){
.nationwide .g-logo{width:34px;height:34px}
.nationwide .stat-card>div{min-width:0}
.nationwide .stat-card b{white-space:nowrap}
}
@media (max-width:380px){
.nationwide .g-logo{width:28px;height:28px}
}
/* v5.39 Tab sisi #BePartOfRumi melintang tepat di atas kad kanan pada telefon dan memotong
"2k Google Reviews". Baris kad diundurkan selebar tab itu; kad jadi 165px dan teks masih
muat dua baris seperti desktop. */
@media (max-width:700px){
.nationwide .stat-cards{padding-right:40px}
}
/* v5.40 Kad menyempit selepas memberi ruang kepada tab sisi, jadi baris kedua pecah dua.
Teks kecil dikecilkan sedikit dan dikunci satu baris supaya kedua-dua kad kekal dua baris. */
@media (max-width:700px){
.nationwide .stat-card>div>span{font-size:10px;white-space:nowrap}
}
/* v5.41 Tindihan dikurangkan: teks kad kiri tadi berakhir tepat pada garis tindihan.
Kad bertindih lebih sedikit sahaja, cukup untuk kekal rupa bertindan tanpa memakan teks. */
@media (max-width:700px){
.nationwide .stat-card.tilt-l{margin-right:-6px}
.nationwide .stat-card.tilt-r{margin-left:-6px}
}
/* v5.42 Desktop sempit (1001px hingga 1240px): kad statistik hanya ~200px, jadi ikon 52px
menolak teks sampai pecah dua baris. Ikon dikecilkan dan teks dikunci satu baris di sini juga. */
@media (min-width:1001px) and (max-width:1240px){
.nationwide.is-rumi .pin-ic,.nationwide.is-rumi .g-logo{width:36px;height:36px}
.nationwide.is-rumi .g-logo svg{width:36px;height:36px}
.nationwide.is-rumi .stat-card b{white-space:nowrap}
.nationwide.is-rumi .stat-card>div{min-width:0}
.nationwide.is-rumi .stat-card>div>span{font-size:12px;white-space:nowrap}
}
/* v5.43 Jalur kelabu di atas dan di bawah seksyen bukan bayang: lapisan foto latar itu ditapis
blur(26px), dan elemen yang diblur mengecat jauh di luar kotaknya sendiri. Tanpa pengapit,
kaburan itu melimpah masuk ke seksyen krim di sebelah. Seksyen dikapit supaya ia berhenti
tepat pada tepinya. */
.nationwide.is-rumi{overflow:hidden}
/* ============================================================
v5.44 CAPABILITIES CAROUSEL
Satu keupayaan satu masa: panel warna condong membawa perkataan, foto di sebelahnya dipotong
pada sudut yang sama. Sudutnya ialah -12deg design system ini sendiri, bukan sudut laman rujukan.
Potongan dikira dari tinggi slaid (tinggi x tan 12deg) oleh app.js supaya sudut kekal tepat pada
apa jua saiz; nilai di bawah hanyalah sandaran sebelum JS berjalan.
============================================================ */
.caps{--cut:92px;--cutY:24px;--cgap:clamp(14px,1.6vw,26px)}
.caps-head{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,3vw,56px);
flex-wrap:wrap;margin-bottom:clamp(26px,3vw,46px)}
.caps-head-l{flex:1 1 440px;min-width:0}
.caps-head .lead{flex:0 1 430px;margin:0}
.caps-stage{position:relative}
.caps-sw{overflow:hidden}
.caps-sw .swiper-wrapper{align-items:stretch}
/* Swiper 11 sets display:block dan height:100% pada .swiper-slide dengan kekhususan yang sama,
dan CSS-nya dimuatkan selepas tema, jadi pemilih di sini mesti lebih khusus daripadanya. */
.caps .caps-slide{display:grid;grid-template-columns:minmax(0,53fr) minmax(0,47fr);gap:var(--cgap);
height:auto;min-height:clamp(360px,32vw,500px)}
/* panel: tepi kanan condong. Padding kanan menyimpan lebar potongan supaya teks tidak jatuh
ke dalam segi tiga yang dibuang. */
.caps-panel{position:relative;background:var(--ac);color:#fff;border-radius:var(--rm);
clip-path:polygon(0 0,100% 0,calc(100% - var(--cut)) 100%,0 100%)}
.caps-panel-in{padding:clamp(26px,2.8vw,44px);padding-right:calc(var(--cut) + clamp(22px,2.2vw,34px));
display:flex;flex-direction:column;gap:clamp(12px,1.4vw,20px);height:100%}
.caps-meta{display:flex;align-items:center;gap:9px;font-family:var(--font-num)}
.caps-meta b{font-size:clamp(28px,2.8vw,42px);font-weight:600;letter-spacing:-.03em;line-height:1}
.caps-meta i{font-style:normal;font-size:12px;opacity:.55;letter-spacing:.06em}
.caps-meta i::before{content:"/";margin-right:5px;opacity:.6}
.caps-panel h3{font-size:clamp(21px,2.2vw,33px);font-weight:600;letter-spacing:-.02em;line-height:1.12}
.caps-text{font-size:clamp(14px,1.05vw,16px);line-height:1.55;opacity:.84;max-width:46ch}
.caps-items{margin-top:auto;padding-top:clamp(12px,1.4vw,18px);border-top:1px solid rgba(255,255,255,.18)}
.caps-items-l{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
opacity:.62;margin-bottom:8px}
.caps-items ul{display:grid;grid-template-columns:1fr 1fr;gap:5px clamp(14px,1.6vw,26px)}
.caps-items li{position:relative;padding-left:15px;font-size:13.5px;line-height:1.4;opacity:.9}
.caps-items li::before{content:"";position:absolute;left:0;top:.52em;width:5px;height:5px;border-radius:99px;
background:currentColor;opacity:.7}
.caps-link{display:inline-flex;align-items:center;gap:7px;margin-top:4px;font-weight:600;font-size:14px;
border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px;align-self:flex-start;
transition:gap .3s var(--ease)}
.caps-link:hover{gap:12px}
.caps-link i{width:15px;height:15px}
/* foto: kotaknya dijulurkan ke kiri selebar potongan, kemudian segi tiga itu dibuang semula.
Itu yang membuat jurang antara panel dan foto kekal nipis, bukan selebar potongan. */
.caps-photo{position:relative;margin:0 0 0 calc(var(--cut) * -1);border-radius:var(--rm);overflow:hidden;
background:var(--cream-3);clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%)}
/* foto diletak di luar aliran: kalau tidak, gambar potret (tangkapan skrin aplikasi) menarik
tinggi baris sampai seribu piksel dan panel terpaksa mengikutnya. Tinggi baris ditentukan
oleh panel sahaja. */
.caps-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03)}
/* foto tidak statik: ia terus merapat perlahan sepanjang slaid itu dipapar. Tempohnya lebih
panjang daripada selang autoplay supaya pergerakan tidak sempat berhenti sebelum slaid bertukar. */
.caps-sw .swiper-slide-active .caps-photo img{animation:caps-zoom 8.5s var(--ease) forwards}
@keyframes caps-zoom{from{transform:scale(1.03)}to{transform:scale(1.16)}}
@media (prefers-reduced-motion:reduce){
.caps-sw .swiper-slide-active .caps-photo img{animation:none}
}
.caps-photo.is-blank{display:grid;place-items:center}
.caps-photo.is-blank svg{width:64px;height:64px;fill:var(--ac);opacity:.22}
/* kandungan panel naik sedikit apabila slaid menjadi aktif */
.caps-panel-in>*{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.caps-sw .swiper-slide-active .caps-panel-in>*{opacity:1;transform:none}
.caps-panel-in>:nth-child(2){transition-delay:.06s}
.caps-panel-in>:nth-child(3){transition-delay:.12s}
.caps-panel-in>:nth-child(4){transition-delay:.18s}
.caps-panel-in>:nth-child(5){transition-delay:.24s}
.caps-nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
margin-top:clamp(18px,2.2vw,30px)}
.caps-arrow{width:clamp(44px,3.2vw,54px);aspect-ratio:1;border-radius:99px;background:var(--ac);color:#fff;
display:grid;place-items:center;transition:transform .35s var(--ease),filter .3s,opacity .3s}
.caps-arrow i,.caps-arrow svg{width:19px;height:19px}
.caps-arrow:hover{transform:translateY(-2px);filter:brightness(1.14)}
.caps-arrow.is-off{opacity:.28;pointer-events:none}
.caps-dots{display:flex;justify-content:center;align-items:center;gap:9px}
.caps-dot{width:8px;height:8px;border-radius:99px;background:color-mix(in srgb,var(--ac) 28%,transparent);
transition:width .45s var(--ease),background .3s}
.caps-dot.is-on{width:32px;background:var(--ac)}
@media (max-width:860px){
.caps{--cut:0px}
.caps .caps-slide{grid-template-columns:1fr;gap:var(--cgap)}
/* bertindan menegak: tepi bawah foto dan tepi atas panel condong sama, jurang kekal nipis */
.caps-photo{order:-1;margin:0;height:clamp(180px,44vw,260px);
clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cutY)),0 100%)}
.caps-panel{margin-top:calc(var(--cutY) * -1);
clip-path:polygon(0 var(--cutY),100% 0,100% 100%,0 100%)}
.caps-panel-in{padding:calc(var(--cutY) + 20px) 22px 24px}
.caps-items ul{grid-template-columns:1fr}
.caps-head{display:block}
.caps-head .lead{margin-top:14px}
}
/* ============================================================
v5.51 STATISTIK: LEJAR, BUKAN GRID KAD
Kad putih yang seragam ialah layout paling selamat dan paling hambar untuk angka. Diganti
dengan susunan lejar laporan tahunan: angka duduk terus atas kertas, dipisahkan garis rambut,
dengan digit hantu berbayang di belakang setiap satu. Digit hantu itu peranti yang memang
sudah wujud dalam tema ini (lihat nota --font-num), bukan hiasan baharu.
============================================================ */
.st-grid{grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(34px,3.8vw,56px)}
.st-item{position:relative;overflow:hidden;background:none;border:0;border-radius:0;
padding:clamp(26px,2.6vw,38px) clamp(20px,2vw,32px) clamp(24px,2.4vw,34px);isolation:isolate}
/* garis rambut antara lajur sahaja, tiada bingkai mengelilingi apa-apa */
.st-item+.st-item::after{content:"";position:absolute;left:0;top:clamp(26px,2.6vw,38px);
bottom:clamp(24px,2.4vw,34px);width:1px;background:var(--line)}
/* garis atas melukis dirinya sendiri apabila seksyen masuk pandangan */
.st-rule{position:absolute;left:0;right:0;top:0;height:2px;background:var(--teal);
transform-origin:0 50%;transition:background .4s}
/* nombor indeks berbayang di penjuru atas kanan setiap lajur: garis luar sahaja, cukup kecil
untuk kekal sepenuhnya dalam lajurnya. Digit hantu penuh dicuba dahulu tetapi angka panjang
seperti 3,027 melimpah dan bertindih antara lajur sampai jadi calitan. */
.st-ghost{position:absolute;z-index:-1;top:.32em;right:.1em;line-height:.8;pointer-events:none;
font-family:var(--font-num);font-size:clamp(52px,4.6vw,78px);font-weight:600;letter-spacing:-.05em;
color:transparent;-webkit-text-stroke:1px var(--teal);opacity:.13;
transition:opacity .5s var(--ease),transform .7s var(--ease)}
.st-item:hover .st-ghost{opacity:.24;transform:translateY(4px)}
.st-num{font-size:clamp(54px,6vw,96px);letter-spacing:-.05em;white-space:nowrap}
/* angka panjang seperti 500,000 melimpah keluar lajur pada saiz penuh, jadi seluruh baris
mengecil bersama supaya keempat-empatnya kekal sama besar */
.st-grid.is-w6 .st-num{font-size:clamp(42px,4.6vw,72px)}
.st-grid.is-w7 .st-num{font-size:clamp(34px,3.8vw,58px)}
.st-suf{font-size:.42em;align-self:flex-start;margin-top:.34em}
.st-item h3{margin-top:16px;font-size:16px;font-weight:700;letter-spacing:-.01em}
.st-item p{margin-top:5px;font-size:13.5px;max-width:26ch}
.st-item:hover .st-rule{background:var(--gold)}
/* nota kaki seksyen duduk atas garis rambut penuh, seperti nota kaki lejar */
.st-note{margin-top:clamp(20px,2.2vw,30px);padding-top:14px;border-top:1px solid var(--line);
max-width:92ch}
/* seksyen gelap: garis dan hantu bertukar krim */
.dark .st-item+.st-item::after,.stats.dark .st-note{border-color:var(--line-l);background:var(--line-l)}
.dark .st-rule{background:var(--cream)}
.dark .st-ghost{-webkit-text-stroke-color:var(--cream);opacity:.12}
.dark .st-num{color:var(--cream)}
@media (max-width:760px){
.st-grid{grid-template-columns:1fr 1fr}
/* pada dua lajur, garis menegak hanya di tengah dan garis mendatar antara baris */
.st-item+.st-item::after{content:none}
.st-item:nth-child(even)::after{content:"";position:absolute;left:0;top:clamp(26px,2.6vw,38px);
bottom:clamp(24px,2.4vw,34px);width:1px;background:var(--line)}
.st-item:nth-child(n+3){border-top:1px solid var(--line)}
.st-ghost{font-size:clamp(46px,8vw,66px)}
}
@media (max-width:480px){
.st-grid{grid-template-columns:1fr;gap:0}
.st-item{padding:22px 0 20px}
.st-item:nth-child(even)::after{content:none}
.st-item+.st-item{border-top:1px solid var(--line)}
.st-item p{max-width:none}
}
/* ============================================================
v5.54 FIGURES: CARTA, BUKAN BARIS ANGKA
Dua susun atur. "Columns" melukis satu palang bagi setiap nilai, tumbuh dari paksi mengikut
skrol sambil angkanya membilang. "Split bar" mengisi satu palang dari kiri ke kanan untuk
menunjukkan bahagian daripada satu keseluruhan. Panjang setiap palang ialah nisbah sebenar
nilainya, jadi gambar tidak boleh bercakap lain daripada angka.
============================================================ */
.figs-head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end}
.figs-head .lead{max-width:40ch;justify-self:end;margin:0}
.figs-stage{margin-top:clamp(40px,4.4vw,68px)}
.figs-note{margin-top:clamp(20px,2.2vw,30px);padding-top:14px;border-top:1px solid var(--line);
font-size:13.5px;color:var(--ink-2);max-width:92ch}
/* ---- columns ---- */
/* ruang di kiri disimpan untuk label paksi; garis grid bermula selepas ruang itu, bukan pada
tepi kotak, kalau tidak labelnya terkeluar dari skrin */
.figs-chart{--pad:clamp(54px,5vw,80px);position:relative;padding-left:var(--pad)}
.figs-grid{position:absolute;left:var(--pad);right:0;top:0;height:var(--h,clamp(250px,26vw,360px));
display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.figs-grid i{position:relative;display:block;height:1px;background:var(--line)}
.figs-grid i span{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);
font-family:var(--font-num);font-size:12px;color:var(--ink-2);white-space:nowrap;
font-variant-numeric:tabular-nums}
.figs-grid i:last-child{background:var(--ink);height:2px}
.figs-cols{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
gap:clamp(8px,1.4vw,26px);align-items:end;height:var(--h,clamp(250px,26vw,360px));list-style:none}
.figs-col{position:relative;height:100%;display:flex;align-items:flex-end}
.figs-bar{display:block;width:100%;height:calc(var(--p) * 100%);border-radius:8px 8px 0 0;
background:linear-gradient(180deg,var(--ac),color-mix(in srgb,var(--ac) 72%,#000));
transform:scaleY(0);transform-origin:50% 100%;transition:filter .35s}
.figs-col.is-hl .figs-bar{background:linear-gradient(180deg,var(--gold-2),var(--gold))}
.figs-col:hover .figs-bar{filter:brightness(1.12)}
.figs-val{position:absolute;left:0;right:0;bottom:calc(var(--p) * 100%);margin-bottom:9px;
text-align:center;font-family:var(--font-num);font-weight:600;letter-spacing:-.03em;
font-size:clamp(14px,1.5vw,21px);color:var(--ac);font-variant-numeric:tabular-nums;white-space:nowrap}
.figs-col.is-hl .figs-val{color:var(--gold-ink)}
.figs-lbl{position:absolute;top:100%;left:0;right:0;padding-top:14px;text-align:center;
font-size:12.5px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.figs-lbl em{display:block;margin-top:3px;font-style:normal;font-weight:400;font-size:11.5px;
color:var(--ink-2)}
.figs-axis{margin-top:clamp(64px,6vw,86px);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-2)}
/* ---- split bar ---- */
.fs-total{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.fs-total b{font-family:var(--font-num);font-size:clamp(40px,4.6vw,72px);font-weight:600;
letter-spacing:-.045em;line-height:1;color:var(--ac)}
.fs-total span{font-size:14px;color:var(--ink-2)}
.fs-bar{display:flex;gap:4px;height:clamp(54px,5vw,76px);border-radius:var(--rs);overflow:hidden}
.fs-seg{display:block;width:var(--w);background:var(--ac);transform:scaleX(0);transform-origin:0 50%;
border-radius:4px}
.fs-seg.is-hl{background:var(--gold)}
.fs-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:clamp(16px,2vw,34px);margin-top:clamp(22px,2.4vw,34px);list-style:none}
.fs-legend li{position:relative;padding-top:16px;border-top:1px solid var(--line)}
.fs-legend i{position:absolute;top:-1px;left:0;width:34px;height:3px;background:var(--ac)}
.fs-legend li.is-hl i{background:var(--gold)}
.fs-legend b{display:block;font-family:var(--font-num);font-size:clamp(26px,2.6vw,38px);font-weight:600;
letter-spacing:-.04em;line-height:1;color:var(--ac);font-variant-numeric:tabular-nums}
.fs-legend li.is-hl b{color:var(--gold-ink)}
.fs-name{display:block;margin-top:9px;font-size:15px;font-weight:700;letter-spacing:-.01em}
.fs-legend em{display:inline-block;margin-top:4px;font-style:normal;font-size:12px;font-weight:700;
letter-spacing:.08em;color:var(--ink-2)}
.fs-sub{display:block;margin-top:4px;font-size:13px;color:var(--ink-2)}
@media (max-width:820px){
.figs-head{grid-template-columns:1fr}
.figs-head .lead{justify-self:start;max-width:none}
.figs-chart{--pad:0px;padding-left:0;--h:clamp(190px,44vw,260px)}
/* setiap nilai sudah tercetak atas palangnya sendiri, jadi label paksi hanya bertindih
dengan nilai palang pertama pada skrin sempit */
.figs-grid i span{display:none}
.figs-cols{gap:5px}
.figs-val{font-size:12px;margin-bottom:6px}
.figs-lbl{font-size:10.5px;padding-top:10px}
.figs-lbl em{display:none}
.figs-axis{margin-top:56px}
}
/* v5.55 Senarai dalam kad split: tema menetapkan ul{list-style:none} secara global, jadi
senarai yang ditaip dalam medan teks kaya keluar sebagai perenggan biasa tanpa tanda. */
.split-text ul{margin-top:14px;display:grid;gap:8px}
.split-text ul li{position:relative;padding-left:18px}
.split-text ul li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;
border-radius:99px;background:var(--gold)}
.split-text ul+p,.split-text p+ul{margin-top:14px}
/* v5.58 Nota kaki di bawah karusel keupayaan, dan senarai tanda dalam dua lajur seperti slaid lain */
.caps-note{margin-top:clamp(20px,2.2vw,30px);padding-top:14px;border-top:1px solid var(--line);
font-size:13.5px;color:var(--ink-2);max-width:92ch}
/* ============================================================
v5.59 KAD "WAYS IN": FOTO PENUH SATU KAD, TEKS DI ATASNYA
Sebelum ini foto duduk di atas dan teks dalam kotak putih di bawah, jadi setiap kad terbelah
dua. Sekarang foto mengisi seluruh kad dan semua teks duduk di atasnya di bahagian bawah,
sama layout dengan kad "Our People" dan "Investor Relations", tetapi tanpa butang.
============================================================ */
/* padding atas menyimpan zon foto yang tetap. Tanpa ia, kad yang teksnya panjang akan menolak
tajuk sampai ke atas sekali dan berlanggar dengan lencana nombor, terutamanya di telefon. */
.sol.is-cards .sol-row:has(.sol-ph){position:relative;padding:clamp(130px,15vw,200px) 0 0;
overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
min-height:clamp(440px,44vw,560px);background:#04211f;border:0;color:var(--cream)}
.sol.is-cards .sol-row:has(.sol-ph):hover{box-shadow:0 30px 60px rgba(7,40,38,.22)}
.sol.is-cards .sol-row:has(.sol-ph) .sol-ph{position:absolute;inset:0;z-index:0;width:auto;height:auto;
aspect-ratio:auto;margin:0;border-radius:0}
/* foto digelapkan dengan penapis, bukan dengan opacity. Menurunkan opacity mencampurkan foto
dengan warna kad di bawahnya dan hasilnya berkabus keputihan, bukan foto gelap yang bersih. */
.sol.is-cards .sol-row:has(.sol-ph) .sol-ph img{width:100%;height:100%;object-fit:cover;opacity:1;
filter:grayscale(.2) brightness(.48) contrast(1.02)}
/* satu scrim penuh, bukan lagi jalur 42% di bawah foto */
.sol.is-cards .sol-row:has(.sol-ph) .sol-ph::after{inset:0;height:auto;
background:linear-gradient(180deg,rgba(4,33,31,.25) 0%,rgba(4,33,31,.55) 38%,rgba(4,29,27,.9) 74%,rgba(3,25,24,.96) 100%)}
/* .sol-head kekal statik: kalau ia relative, ia jadi blok pembendung dan foto "inset:0" hanya
meregang setinggi tajuk, bukan setinggi kad. Nombor lencana pun terikut sama. */
.sol.is-cards .sol-row:has(.sol-ph) .sol-head{position:static}
.sol.is-cards .sol-row:has(.sol-ph) .sol-body{position:relative;z-index:1}
/* teks statik dicat sebelum elemen berposisi, jadi tajuk perlu diangkat atas foto sendiri */
.sol.is-cards .sol-row:has(.sol-ph) .sol-head h3{position:relative;z-index:1;color:var(--cream);
padding:0 clamp(22px,2.4vw,32px)}
.sol.is-cards .sol-row:has(.sol-ph) .sol-body{margin-top:10px;
padding:0 clamp(22px,2.4vw,32px) clamp(26px,2.8vw,36px)}
.sol.is-cards .sol-row:has(.sol-ph) .sol-body>p{color:rgba(248,245,239,.82)}
.sol.is-cards .sol-row:has(.sol-ph) .sol-body>p em,
.sol.is-cards .sol-row:has(.sol-ph) .sol-body>p i{color:var(--gold-2);font-style:italic}
.sol.is-cards .sol-row:has(.sol-ph) .sol-items{border-top-color:rgba(248,245,239,.22)}
.sol.is-cards .sol-row:has(.sol-ph) .sol-items-l{color:var(--gold-2)}
.sol.is-cards .sol-row:has(.sol-ph) .sol-items li{color:rgba(248,245,239,.9)}
.sol.is-cards .sol-row:has(.sol-ph) .sol-items li::before{background:var(--gold)}
.sol.is-cards .sol-row:has(.sol-ph) .sol-link{color:var(--gold-2)}
.sol.is-cards .sol-row:has(.sol-ph) .sol-link:hover{color:var(--cream)}
@media (max-width:700px){
.sol.is-cards .sol-row:has(.sol-ph){min-height:clamp(360px,86vw,440px)}
}
/* ============================================================
v5.65 GARIS MASA DISKROL, DAN AYAT PENUTUP DIBESARKAN
Paparan dipegang diam sementara skrol menyeret tahun melaluinya, jadi semua panel mesti sama
tinggi. Dengan autoHeight, tinggi berubah setiap kali slaid bertukar dan paparan yang dipegang
itu akan tersentak. Panel kini diregang sama tinggi.
============================================================ */
.timeline.is-flow .tlx-sw .swiper-wrapper{align-items:stretch}
.timeline.is-flow .tlx-panel{height:auto}
/* ayat penutup: sama layanan dengan penutup cerita di homepage, dijauhkan dari kandungan di atas */
.tl-close{margin-top:clamp(70px,9vw,130px);padding-top:clamp(40px,5vw,70px);
border-top:1px solid var(--line);
font-size:clamp(28px,3.8vw,54px);font-weight:700;letter-spacing:-.024em;line-height:1.14;
/* 24ch berhenti di tengah dan meninggalkan jalur kosong di kiri dan kanan; ayat ini dibiarkan
merentas hampir seluruh lebar halaman supaya barisnya penuh */
max-width:min(1120px,100%);margin-inline:auto;text-wrap:balance}
.tl-close .ch{display:inline-block}
@media (max-width:700px){
.tl-close{max-width:none;font-size:clamp(22px,6.2vw,31px)}
}
/* ============================================================
v5.70 SPLIT SELEBAR PENUH
Kad dan foto mencecah tepi skrin, tiada jurang dan tiada bucu bulat di antara keduanya, jadi
ia terbaca sebagai satu jalur penuh. Padding dalam kad mengambil alih tugas margin halaman
supaya teks tetap sebaris dengan kandungan seksyen lain.
============================================================ */
/* `body:not(.home) .sec` menetapkan padding menegak dengan kekhususan lebih tinggi daripada
`.split.is-full`, jadi jalur ini masih menyimpan 86px maroon di atas dan di bawah foto walaupun
padding sudah disifarkan. Pemilih ini menambah `.sec` supaya ia menang. */
.sec.split.is-full{padding:0}
.split-bleed{width:100%}
.split.is-full .split-grid{gap:0;align-items:stretch}
.split.is-full .split-card{border-radius:0;min-height:clamp(460px,46vw,620px);
padding:clamp(48px,6vw,86px) clamp(28px,5vw,96px)}
.split.is-full .split-img{border-radius:0;min-height:100%}
.split.is-full .split-text{max-width:42ch}
@media (max-width:760px){
.split.is-full .split-card{min-height:0;padding:clamp(36px,8vw,52px) clamp(24px,6vw,34px)}
.split.is-full .split-img{aspect-ratio:4/3;min-height:0}
}
/* v5.72 Tepi luar panel dijajarkan dengan margin halaman, supaya tajuknya bermula pada garis
yang sama dengan tajuk setiap seksyen lain. .wrap ialah min(1240px, 100% - 48px), jadi
jidarnya ialah separuh daripada baki lebar skrin, dengan minimum 24px. */
.split.is-full .split-grid:not(.img-left) .split-card{padding-left:max(24px,calc((100vw - 1240px) / 2))}
.split.is-full .split-grid.img-left .split-card{padding-right:max(24px,calc((100vw - 1240px) / 2))}
@media (max-width:1100px){
.split.is-full .split-grid:not(.img-left) .split-card,
.split.is-full .split-grid.img-left .split-card{padding-left:clamp(24px,6vw,34px);padding-right:clamp(24px,6vw,34px)}
}
/* ============================================================
v5.73 SPLIT PENUH: SATU LAJUR, SENARAI JADI LEJAR BERNOMBOR
Dua lajur dalam panel selebar separuh skrin memaksa dua lajur teks sempit bersebelahan dan
tiada satu pun daripadanya bernafas. Sekarang semuanya satu lajur penuh: tajuk besar, ayat
pembuka, kemudian tiga baris bernombor yang masing-masing merentas seluruh panel dengan garis
rambut di antaranya. Kandungan mengisi panel kerana setiap baris memang selebar panel.
============================================================ */
.split.is-full .split-card{display:flex;flex-direction:column;justify-content:center}
.split.is-full .split-card>.lbl{align-self:flex-start;margin-bottom:clamp(18px,2vw,28px)}
.split.is-full .split-card>.h-l{margin-top:0;font-size:clamp(34px,3.9vw,62px);max-width:none}
.split.is-full .split-text{margin:clamp(16px,1.8vw,24px) 0 0;max-width:none}
.split.is-full .split-text>p{max-width:52ch;font-size:clamp(15px,1.1vw,17px)}
/* senarai: baris bernombor merentas panel, bukan titik kecil berenggang */
.split.is-full .split-text ul{counter-reset:spn;display:block;margin-top:clamp(26px,2.8vw,40px);gap:0}
.split.is-full .split-text ul li{counter-increment:spn;display:grid;
grid-template-columns:2.6em minmax(0,1fr);column-gap:0;align-items:baseline;
padding:clamp(13px,1.4vw,19px) 0;border-top:1px solid rgba(248,245,239,.2);
font-size:clamp(14px,1.05vw,16px);line-height:1.45}
.split.is-full .split-text ul li:last-child{border-bottom:1px solid rgba(248,245,239,.2)}
.split.is-full .split-text ul li::before{content:counter(spn,decimal-leading-zero);
position:static;width:auto;height:auto;border-radius:0;background:none;
font-family:var(--font-num);font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--gold-2)}
.split.is-full .split-card>.btn{align-self:flex-start;margin-top:clamp(26px,2.8vw,38px)}
@media (max-width:760px){
.split.is-full .split-text ul li{grid-template-columns:2.3em minmax(0,1fr);font-size:14.5px}
}
/* ============================================================
v5.76 INTRO SEBAGAI SATU KENYATAAN
Tajuk disembunyikan dan teksnya sendiri menjadi kenyataan besar di tengah, huruf demi huruf
terang mengikut skrol, layanan yang sama dengan penutup cerita di homepage.
============================================================ */
.intro.is-say .intro-grid{display:block;text-align:center}
.intro.is-say .lbl{display:inline-flex;margin-bottom:clamp(22px,2.6vw,36px)}
/* sama seperti ayat penutup garis masa: 22ch berhenti di tengah dan meninggalkan jalur kosong
di kiri dan kanan, jadi ayat ini dibiarkan merentas hampir seluruh lebar halaman */
.intro.is-say .intro-text{font-size:clamp(28px,3.8vw,54px);font-weight:700;letter-spacing:-.024em;
line-height:1.14;color:var(--teal);max-width:min(1120px,100%);margin-inline:auto;
text-wrap:balance}
.intro.is-say.dark .intro-text{color:var(--cream)}
.intro.is-say .intro-text p+p{margin-top:.6em}
.intro.is-say .intro-text .ch{display:inline-block}
.intro.is-say .intro-text .btn{margin-top:clamp(28px,3vw,42px);font-size:15px;font-weight:600;
letter-spacing:0}
@media (max-width:700px){
.intro.is-say .intro-text{max-width:none;font-size:clamp(22px,6.2vw,31px)}
}
/* ============================================================
v5.77 SPLIT PENUH: PERTEMUAN PANEL DAN FOTO DIKABURKAN
Dua blok warna bertemu pada satu garis tegak yang tajam, dan garis itu memotong siling bilik
dalam foto. Foto kini dimulakan dengan warna panel yang sama lalu lut sinar, jadi peralihan
berlaku dalam foto itu sendiri dan tiada jahitan kelihatan.
============================================================ */
.split.is-full{--blend:var(--teal)}
.split.is-full .split-img::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(90deg,
var(--blend) 0,
color-mix(in srgb,var(--blend) 94%,transparent) 3%,
color-mix(in srgb,var(--blend) 62%,transparent) 11%,
color-mix(in srgb,var(--blend) 24%,transparent) 22%,
transparent 36%)}
/* foto di sebelah kiri: kaburan berlaku pada tepi kanannya */
.split.is-full .split-grid.img-left .split-img::after{
background:linear-gradient(270deg,
var(--blend) 0,
color-mix(in srgb,var(--blend) 94%,transparent) 3%,
color-mix(in srgb,var(--blend) 62%,transparent) 11%,
color-mix(in srgb,var(--blend) 24%,transparent) 22%,
transparent 36%)}
@media (max-width:760px){
/* bersusun menegak: panel di atas, jadi kaburan turun dari tepi atas foto */
.split.is-full .split-img::after,
.split.is-full .split-grid.img-left .split-img::after{
background:linear-gradient(180deg,
var(--blend) 0,
color-mix(in srgb,var(--blend) 90%,transparent) 4%,
color-mix(in srgb,var(--blend) 45%,transparent) 14%,
transparent 30%)}
}
/* ============================================================
v5.79 SPLIT YANG MENGALIR TERUS KE SEKSYEN DI BAWAHNYA
Dua seksyen maroon berturutan dipisahkan sejalur krim. Jalur itu dibuang dan tepi bawah foto
dilarutkan ke warna yang sama, jadi kedua-duanya terbaca sebagai satu blok maroon berterusan.
Kad diberi warna rata, bukan kecerunan: kaburan mendatar pada tepi foto mesti sepadan dengan
warna kad pada setiap ketinggian, dan itu mustahil kalau warna kad berubah dari atas ke bawah.
============================================================ */
/* warna ini disukat dari piksel sebenar di tepi atas seksyen Our Branches, bukan diteka dari
token: seksyen itu melapis foto kabur dan vignette di atas maroonnya, jadi warna terbitannya
lebih gelap daripada --rumi-deep. Tanpa padanan ini, satu garis mendatar kekal kelihatan. */
.split.is-full.is-rumi{--blend:#45102C;background:#45102C}
.split.is-full.is-rumi .split-card{background:#45102C}
.split.is-full.is-rumi .split-card::after{display:none}
.split.is-bleed .split-img::after{
background:
linear-gradient(0deg,
var(--blend) 0,
color-mix(in srgb,var(--blend) 88%,transparent) 5%,
color-mix(in srgb,var(--blend) 40%,transparent) 15%,
transparent 30%),
linear-gradient(90deg,
var(--blend) 0,
color-mix(in srgb,var(--blend) 94%,transparent) 3%,
color-mix(in srgb,var(--blend) 62%,transparent) 11%,
color-mix(in srgb,var(--blend) 24%,transparent) 22%,
transparent 36%)}
.split.is-bleed .split-grid.img-left .split-img::after{
background:
linear-gradient(0deg,
var(--blend) 0,
color-mix(in srgb,var(--blend) 88%,transparent) 5%,
color-mix(in srgb,var(--blend) 40%,transparent) 15%,
transparent 30%),
linear-gradient(270deg,
var(--blend) 0,
color-mix(in srgb,var(--blend) 94%,transparent) 3%,
color-mix(in srgb,var(--blend) 62%,transparent) 11%,
color-mix(in srgb,var(--blend) 24%,transparent) 22%,
transparent 36%)}
@media (max-width:760px){
.split.is-bleed .split-img::after,
.split.is-bleed .split-grid.img-left .split-img::after{
background:linear-gradient(180deg,
var(--blend) 0,
color-mix(in srgb,var(--blend) 90%,transparent) 4%,
color-mix(in srgb,var(--blend) 45%,transparent) 14%,
transparent 32%,
color-mix(in srgb,var(--blend) 45%,transparent) 86%,
var(--blend) 100%)}
}
/* ============================================================
v5.82 BRAND BAND
Satu jenama, di tengah, atas fotonya sendiri. Foto penuh selebar seksyen di bawah warna tint,
jadi tiada apa-apa dibelah dua dan perkataan duduk di tengah bingkai.
============================================================ */
.sec.bband{position:relative;overflow:hidden;padding:0;isolation:isolate;
display:grid;place-items:center;text-align:center;color:var(--cream);background:var(--bb)}
.bband.is-short{min-height:clamp(380px,42vw,520px)}
.bband.is-tall{min-height:clamp(480px,56vw,700px)}
.bband.is-screen{min-height:min(92vh,860px)}
.bband-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
/* papan tanda klinik dalam foto duduk di tepi, bukan di tengah, supaya ia tidak bertindih
dengan logo yang diletak di atasnya */
filter:grayscale(.12) brightness(.6)}
/* satu tint penuh, dipekatkan di tepi supaya teks di tengah kekal paling cerah */
.bband-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(118% 82% at 50% 48%,
color-mix(in srgb,var(--bb) 46%,transparent) 0,
color-mix(in srgb,var(--bb) 74%,transparent) 58%,
color-mix(in srgb,var(--bb) 92%,transparent) 100%),
linear-gradient(180deg,
color-mix(in srgb,var(--bb) 72%,transparent) 0,
color-mix(in srgb,var(--bb) 30%,transparent) 26%,
color-mix(in srgb,var(--bb) 30%,transparent) 72%,
color-mix(in srgb,var(--bb) 78%,transparent) 100%)}
/* mengalir terus ke seksyen di bawahnya: tepi bawah menjadi warna tint sepenuhnya */
.bband.is-bleed .bband-scrim{background:
radial-gradient(118% 82% at 50% 44%,
color-mix(in srgb,var(--bb) 46%,transparent) 0,
color-mix(in srgb,var(--bb) 74%,transparent) 54%,
color-mix(in srgb,var(--bb) 92%,transparent) 100%),
linear-gradient(180deg,
color-mix(in srgb,var(--bb) 72%,transparent) 0,
color-mix(in srgb,var(--bb) 30%,transparent) 24%,
color-mix(in srgb,var(--bb) 55%,transparent) 66%,
color-mix(in srgb,var(--bb) 92%,transparent) 88%,
var(--bb) 100%)}
.bband-in{display:flex;flex-direction:column;align-items:center;
padding-block:clamp(70px,8vw,120px)}
.bband-kicker{font-size:clamp(30px,4.6vw,72px);font-weight:700;letter-spacing:-.03em;line-height:1;
color:var(--cream)}
.bband-logo{height:clamp(30px,3.4vw,50px);width:auto;margin-top:clamp(24px,3vw,42px)}
.bband-text{margin-top:clamp(24px,3vw,40px);max-width:28ch;
font-size:clamp(19px,1.8vw,28px);font-weight:500;line-height:1.4;letter-spacing:-.012em;
color:rgba(248,245,239,.9)}
.bband-text .ch{display:inline-block}
.bband-cta{margin-top:clamp(28px,3.2vw,44px)}
@media (max-width:700px){
.bband-text{max-width:none;font-size:clamp(17px,4.6vw,21px)}
.bband-logo{height:clamp(26px,7vw,34px)}
}
/* ============================================================
v5.87 VISION, MISSION, CORE VALUES: LEJAR TIGA LAJUR
Kata besar 110px tadi terlalu kuat untuk tiga ayat pendek, dan baris bertangga itu membuat
setiap barisnya separuh kosong. Diganti dengan susunan lejar yang sama seperti seksyen angka
di muka Investor Relations: garis atas setiap lajur melukis dirinya, garis rambut menegak
memisahkan lajur, tiada kotak kad langsung.
============================================================ */
.vmv .vmv-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
margin-top:clamp(26px,3vw,44px)}
.vmv .vmv-row{position:relative;display:block;grid-template-columns:none;border:0;
padding:clamp(24px,2.6vw,36px) clamp(18px,2vw,32px) clamp(26px,2.8vw,38px)}
.vmv .vmv-row:first-child{padding-left:0}
.vmv .vmv-row:last-child{padding-right:0}
/* garis rambut antara lajur sahaja */
.vmv .vmv-row+.vmv-row::after{content:"";position:absolute;left:0;top:clamp(24px,2.6vw,36px);
bottom:clamp(26px,2.8vw,38px);width:1px;background:var(--line)}
.vmv .vmv-rule{position:absolute;left:0;right:0;top:0;height:2px;background:var(--teal);
transform-origin:0 50%}
.vmv .vmv-row:first-child .vmv-rule{left:0}
.vmv .vmv-k{font-family:var(--font);font-size:clamp(20px,1.9vw,28px);font-weight:700;
letter-spacing:-.01em;line-height:1.1;color:var(--teal);text-transform:none;margin:0;opacity:1}
.vmv .vmv-s{margin:clamp(12px,1.4vw,18px) 0 0;max-width:34ch;
font-size:clamp(15px,1.15vw,17px);font-weight:400;line-height:1.55;letter-spacing:0;
color:var(--ink-2);text-wrap:pretty}
.vmv .vmv-s p+p{margin-top:.7em}
.vmv .vmv-abcd{margin-top:clamp(14px,1.6vw,22px)}
@media (max-width:860px){
.vmv .vmv-list{grid-template-columns:1fr}
.vmv .vmv-row{padding:clamp(22px,5vw,30px) 0 clamp(24px,5vw,32px)}
.vmv .vmv-row+.vmv-row::after{content:none}
.vmv .vmv-row+.vmv-row{border-top:1px solid var(--line)}
.vmv .vmv-s{max-width:none}
}
/* v5.85 Philosophy: jurang selepas butang dirapatkan dan ruang mati di bawah jalur foto dibuang */
.philo-stage{margin-top:0;height:clamp(210px,22vw,330px)}
.philo-stage .strip.hero-strip{top:-40%}
.philo-stage .strip{margin-top:clamp(18px,2vw,28px)}
/* v5.88 Jalur selebar penuh: tanda bintang MAFAR dibuang. Pada kad bersaiz biasa ia duduk di
bucu kanan bawah kad sebagai hiasan sudut, tetapi pada jalur penuh bucu itu berada di tengah
seksyen, jadi ia terapung tanpa sebab di sebelah teks. */
.split.is-full .split-card>.dm{display:none}
/* ============================================================
v5.93 KARUSEL KEUPAYAAN: SATU TEMA MAFAR, WARNA SYARIKAT PADA NOMBOR DAN IKON SAHAJA
Panel, anak panah dan titik kini teal MAFAR pada setiap muka. Yang membezakan muka hanyalah
lencana ikon dan nombor slaid. Nombor itu guna warna syarikat yang dicerahkan, bukan warna
mentahnya: hijau Healthcare dan biru Tech pada teal gelap hampir tidak terbaca.
============================================================ */
.caps-panel{background:var(--teal)}
.caps-meta b{color:color-mix(in srgb,var(--ac) 55%,#fff)}
.caps-arrow{background:var(--teal)}
.caps-dot{background:color-mix(in srgb,var(--teal) 26%,transparent)}
.caps-dot.is-on{background:var(--teal)}
.caps-photo.is-blank svg{fill:var(--teal)}
/* ============================================================
v5.96 PANEL BORANG: FOTO LATAR YANG BERTUKAR
Panel teal di sebelah borang kini membawa foto yang bertukar perlahan di belakang teks, dengan
lapisan teal di atasnya supaya alamat dan nombor telefon kekal terbaca.
============================================================ */
.contact-side{position:relative;overflow:hidden;isolation:isolate}
.cs-bg{position:absolute;inset:0;z-index:-2}
.cs-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
filter:grayscale(.22) brightness(.62);transition:opacity 1.5s var(--ease);transform:scale(1.02)}
/* setiap foto terus merapat selagi ia dipapar. Tempohnya lebih panjang daripada selang pusingan
supaya gerakan tidak sempat berhenti sebelum foto bertukar. */
.cs-bg img.on{opacity:1;animation:cs-zoom 7.5s var(--ease) forwards}
@keyframes cs-zoom{from{transform:scale(1.02)}to{transform:scale(1.14)}}
/* lapisan teal penuh: teks di panel ini kecil, jadi kontrasnya mesti dijamin, bukan dianggarkan */
.contact-side.has-pics::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(180deg,rgba(11,59,57,.74) 0%,rgba(11,59,57,.86) 52%,rgba(8,46,44,.94) 100%)}
/* tanda bintang hanya menambah bunyi bila ada foto di belakangnya */
.contact-side.has-pics>.dm{display:none}
@media (prefers-reduced-motion:reduce){
.cs-bg img{transition:none}
.cs-bg img.on{animation:none;transform:none}
}
/* v6.00 Dinding #LifeAtMAFAR: arahan guna dipisahkan dari ayat pengenalan dan diletak di hujung
baris penapis, iaitu tempat pembaca berada sejurus sebelum mereka menyentuh foto pertama. */
.life-bar{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,2.4vw,40px);
flex-wrap:wrap}
.life-hint{margin:0;font-size:13.5px;line-height:1.4;color:var(--ink-2);text-align:right}
@media (max-width:760px){
.life-bar{display:block}
.life-hint{margin-top:12px;text-align:left}
}
/* ============================================================
v6.10 WHY BAND: SATU SEBAB SATU SLAID, PERKATAAN ATAS FOTO
Teks tidak diberi lajurnya sendiri. Susunan bersebelahan memaksa lajur teks setinggi foto, dan
sebab yang hanya belasan patah perkataan akan meninggalkan separuh jalur kosong. Di sini setiap
slaid ialah foto lebar dan perkataan duduk di atasnya, jadi panjang teks tidak lagi menentukan
bentuk apa-apa.
============================================================ */
.sec.wband{background:var(--teal);color:var(--cream);padding-block:clamp(64px,7.4vw,110px)}
.wb-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);align-items:end;
margin-bottom:clamp(30px,3.6vw,52px)}
.wb-head .h-l{color:var(--cream)}
.wb-head .lead{max-width:42ch;justify-self:end;margin:0;color:rgba(248,245,239,.8)}
.wb-sw{overflow:hidden;border-radius:var(--rm)}
/* Swiper menetapkan display:block pada .swiper-slide dengan kekhususan yang sama dan CSS-nya
dimuatkan selepas tema, jadi pemilih ini mesti lebih khusus atau teks akan melekat di atas. */
.wband .wb-slide{position:relative;display:flex;align-items:flex-end;overflow:hidden;
border-radius:var(--rm);background:var(--teal-2);height:auto;
min-height:clamp(360px,40vw,540px)}
.wb-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
filter:grayscale(.15) brightness(.74);transform:scale(1.03)}
.wb-sw .swiper-slide-active .wb-bg{animation:wb-zoom 9s var(--ease) forwards}
@keyframes wb-zoom{from{transform:scale(1.03)}to{transform:scale(1.13)}}
/* scrim: pekat di bawah tempat teks duduk, nipis di atas supaya foto masih terbaca sebagai foto */
.wband .wb-slide::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(6,38,36,.12) 0%,rgba(6,38,36,.42) 44%,rgba(4,30,28,.88) 100%)}
.wb-in{position:relative;z-index:1;padding:clamp(28px,3.2vw,52px);max-width:62ch}
.wb-meta{display:flex;align-items:center;gap:9px;font-family:var(--font-num);
margin-bottom:clamp(12px,1.4vw,18px)}
.wb-meta b{font-size:clamp(26px,2.6vw,40px);font-weight:600;letter-spacing:-.03em;line-height:1}
.wb-meta i{font-style:normal;font-size:12px;opacity:.6;letter-spacing:.06em}
.wb-meta i::before{content:"/";margin-right:5px;opacity:.6}
.wband .wb-slide h3{font-size:clamp(24px,2.8vw,42px);font-weight:700;letter-spacing:-.022em;line-height:1.12}
.wband .wb-slide p{margin-top:clamp(10px,1.2vw,16px);font-size:clamp(15px,1.15vw,18px);line-height:1.5;
color:rgba(248,245,239,.86);max-width:46ch}
/* kawalan atas teal: krim, bukan teal atas teal */
.wband .caps-nav{margin-top:clamp(20px,2.4vw,32px)}
.wband .caps-arrow{background:rgba(248,245,239,.14);color:var(--cream)}
.wband .caps-arrow:hover{background:rgba(248,245,239,.24)}
.wband .caps-dot{background:rgba(248,245,239,.3)}
.wband .caps-dot.is-on{background:var(--cream)}
.wb-note{margin-top:clamp(20px,2.4vw,32px);padding-top:14px;
border-top:1px solid rgba(248,245,239,.18);font-size:13.5px;color:rgba(248,245,239,.66)}
@media (prefers-reduced-motion:reduce){
.wb-sw .swiper-slide-active .wb-bg{animation:none}
}
@media (max-width:860px){
.wb-head{grid-template-columns:1fr}
.wb-head .lead{justify-self:start;max-width:none}
.wband .wb-slide{min-height:clamp(320px,74vw,420px)}
.wb-in{padding:clamp(22px,5vw,30px);max-width:none}
}
/* ============================================================
v6.12 OUR BRANCHES: VERSI TERANG
Palet yang sama, dibalikkan. Latar jadi krim, dan titik peta, pin, garis zon serta teks jadi
maroon. Kelas .is-rumi dikekalkan supaya setiap peraturan susun atur versi gelap masih terpakai;
blok ini hanya mengecat semula.
============================================================ */
.nationwide.is-rumi.is-light{--rumi-line:rgba(106,24,66,.16);
background:linear-gradient(170deg,#F8F3EB 0%,#EFE6DA 100%);color:var(--rumi)}
.nationwide.is-rumi.is-light .nw-h,
.nationwide.is-rumi.is-light .lbl{color:var(--rumi)}
.nationwide.is-rumi.is-light .lbl::before{background:rgba(106,24,66,.06);border:1px solid rgba(106,24,66,.26)}
/* foto latar dibuang pada versi terang: di atas krim ia hanya meninggalkan calitan kelabu dan
melemahkan titik peta. Vignette tinggal kecerunan krim yang halus. */
.nationwide.is-rumi.is-light::before{display:none}
.nationwide.is-rumi.is-light::after{
background:radial-gradient(135% 100% at 50% 46%,rgba(255,252,247,.55) 0%,rgba(248,243,235,0) 62%)}
.nationwide.is-rumi.is-light .stat-card{background:#fff;box-shadow:0 20px 44px rgba(106,24,66,.12)}
.nationwide.is-rumi.is-light .stat-card>div>span{color:#6B5460}
/* peta: warna pejal sepenuhnya, tiada lut sinar. Versi gelap menapis titiknya dengan mask
bulatan supaya ia pudar ke tepi; di atas krim mask itu membuat separuh peta hampir hilang,
jadi ia dimatikan di sini. */
.nationwide.is-rumi.is-light .map-svg .land path{fill:#E9DBE2}
.nationwide.is-rumi.is-light .map-svg .dots{-webkit-mask-image:none;mask-image:none}
.nationwide.is-rumi.is-light .map-svg .dots path{fill:#6A1842;stroke:#6A1842;stroke-width:1.5}
.nationwide.is-rumi.is-light .map-svg .rb-line{stroke:#C9ABB8}
.nationwide.is-rumi.is-light .map-svg .rl-text{fill:#6A1842;opacity:1}
.nationwide.is-rumi.is-light .map-svg .rl-sub{fill:#9B7787;opacity:1}
.nationwide.is-rumi.is-light .map-cap{color:#6A1842;opacity:1}
.nationwide.is-rumi.is-light .pin .ring{stroke:#fff}
.nationwide.is-rumi.is-light .pin .disc{fill:var(--rumi)}
.nationwide.is-rumi.is-light .pin .pin-mark{fill:var(--rumi-cream)}
.nationwide.is-rumi.is-light .pin-lbl{fill:var(--rumi);stroke:#F6F0E7;stroke-width:5px}
.nationwide.is-rumi.is-light .pin-rate{fill:var(--gold-ink);stroke:#F6F0E7;stroke-width:4px}
/* popup dan senarai: kad putih di atas krim */
.nationwide.is-rumi.is-light .popup{background:rgba(255,255,255,.96);border-color:rgba(106,24,66,.12);
box-shadow:0 22px 48px rgba(106,24,66,.16)}
.nationwide.is-rumi.is-light .popup::after{background:rgba(255,255,255,.97);
border-right-color:rgba(106,24,66,.12);border-bottom-color:rgba(106,24,66,.12)}
.nationwide.is-rumi.is-light .clinic-card{background:#fff;border:1px solid rgba(106,24,66,.1);
box-shadow:0 20px 44px rgba(106,24,66,.1)}
.nationwide.is-rumi.is-light .clinic-card::-webkit-scrollbar-thumb{background:rgba(106,24,66,.22)}
.nationwide.is-rumi.is-light .cl-group{background:rgba(106,24,66,.035)}
.nationwide.is-rumi.is-light .cl-group h5{color:var(--gold-ink)}
.nationwide.is-rumi.is-light .cl-group h5 span{color:var(--rumi);opacity:.6}
.nationwide.is-rumi.is-light .cl-item .nm{color:var(--rumi)}
.nationwide.is-rumi.is-light .cl-item .ad,
.nationwide.is-rumi.is-light .cl-item .no{color:#6B5460;opacity:1}
.nationwide.is-rumi.is-light .cl-item .go{color:var(--gold-ink)}
.nationwide.is-rumi.is-light .cl-item:hover{background:rgba(106,24,66,.055)}
.nationwide.is-rumi.is-light .cl-item.on{background:var(--rumi)}
.nationwide.is-rumi.is-light .cl-item.on .nm{color:var(--rumi-cream)}
.nationwide.is-rumi.is-light .cl-item.on .ad,
.nationwide.is-rumi.is-light .cl-item.on .no{color:var(--rumi-cream);opacity:.8}
.nationwide.is-rumi.is-light .cl-item.on .go{color:var(--rumi-cream)}
.nationwide.is-rumi.is-light .cl-soon h5{color:var(--rumi);opacity:.7}
.nationwide.is-rumi.is-light .cl-item.is-soon .nm{opacity:.62}
.nationwide.is-rumi.is-light .cl-item.is-soon .ad,
.nationwide.is-rumi.is-light .cl-item.is-soon .no{opacity:.5}
.nationwide.is-rumi.is-light .soon-tag{background:rgba(106,24,66,.07);color:var(--rumi);
border:1px solid rgba(106,24,66,.26)}
/* v6.18 Peta terang: pin bernyala maroon apabila dilayang atau dipilih. Halo dan cincin putih
bertukar maroon, dan satu cahaya lembut keluar dari bulatan itu sendiri. */
.nationwide.is-rumi.is-light .pin .halo{fill:var(--rumi)}
.nationwide.is-rumi.is-light .pin .pin-in{transition:transform .45s var(--ease),filter .35s var(--ease)}
.nationwide.is-rumi.is-light .pin:hover .ring,
.nationwide.is-rumi.is-light .pin.on .ring{stroke:var(--rumi);stroke-width:3.4}
.nationwide.is-rumi.is-light .pin:hover .halo,
.nationwide.is-rumi.is-light .pin.on .halo{opacity:.26}
.nationwide.is-rumi.is-light .pin:hover .pin-in,
.nationwide.is-rumi.is-light .pin.on .pin-in{filter:drop-shadow(0 0 13px rgba(106,24,66,.6))}
/* baris senarai yang dilayang menyalakan pin yang sama melalui kelas .on, jadi tiada peraturan
berasingan diperlukan di sini */
@media (prefers-reduced-motion:reduce){
.nationwide.is-rumi.is-light .pin .pin-in{transition:none}
}
/* v6.19 Panel tanpa tajuk: senarai ditolak ke bawah oleh margin-top:auto yang sepatutnya
menambatnya di bawah teks. Tanpa tajuk dan perenggan, yang tinggal cuma lompang di tengah,
jadi kandungan dipusatkan dan senarai naik rapat di bawah ikon. */
/* perenggan yang hilang itulah yang meninggalkan lompang, bukan tajuk, jadi syaratnya diuji
pada perenggan */
.caps-panel-in:not(:has(.caps-text)){justify-content:center}
.caps-panel-in:not(:has(.caps-text)) .caps-items{margin-top:clamp(18px,2.2vw,30px)}
/* ============================================================
v6.25 VISION, MISSION, CORE VALUES: PERKATAAN PENTING MENYALA
Perkataan yang ditebalkan dicetak tebal dari awal, jadi lebar barisnya sudah muktamad dan tiada
teks melompat semasa animasi. Yang beranimasi ialah warnanya: dari warna badan ke teal, satu
demi satu mengikut skrol.
============================================================ */
/* perkataan bermula sebagai teks biasa dan menebal mengikut skrol. Ketebalannya ditambah dengan
stroke pada garis luar huruf, bukan dengan menukar font-weight: menukar berat mengubah lebar
setiap perkataan, jadi ayat sekelilingnya akan beralih dan baris boleh melompat ke bawah di
tengah animasi. Stroke menebalkan huruf tanpa mengubah lebar langkahnya, jadi tiada apa bergerak. */
.vmv .vmv-s strong{font-weight:400;color:var(--ink-2);
-webkit-text-stroke:0 currentColor;
transition:color .55s var(--ease),-webkit-text-stroke-width .55s var(--ease)}
.vmv .vmv-s strong.is-lit{color:var(--teal);-webkit-text-stroke-width:.5px}
@media (prefers-reduced-motion:reduce){
.vmv .vmv-s strong{color:var(--teal);-webkit-text-stroke-width:.5px;transition:none}
}
/* ============================================================
v6.27 TAB SISI DI TELEFON: LEBIH NIPIS, DAN SEKALI SEKALA MENGGAMIT
Menu di telefon duduk di kanan atas, jadi tab ini mesti kurus supaya tidak berebut ruang
dengannya. Gamitan dikenakan pada tab, bukan pada rel, kerana rel itu sendiri yang bergerak
semasa dilayang di desktop dan dua transform pada elemen yang sama akan berlawan.
============================================================ */
@media (max-width:820px){
.side-tab{font-size:14px;padding:13px 7px;gap:8px;letter-spacing:.02em}
.side-tab i,.side-tab svg{width:13px;height:13px;stroke-width:2.6}
.side-tab{animation:rail-nudge 11s ease-in-out 4s infinite}
}
@keyframes rail-nudge{
0%,86%,100%{transform:translateX(0)}
88%{transform:translateX(-6px)}
91%{transform:translateX(3px)}
94%{transform:translateX(-2px)}
97%{transform:translateX(1px)}
}
@media (prefers-reduced-motion:reduce){
.side-tab{animation:none}
}
/* ============================================================
v6.28 TANDA RUMI PADA TAB SISI: BERPUSING, BERSINAR, BERCAHAYA
Anak panah diganti tanda Klinik Rumi. Kilauan dibuat dengan melapis kecerunan putih yang
dimaskkan oleh siluet tanda itu sendiri, cara yang sama dengan kesan pada tajuk Built To Last,
supaya cahaya mengalir mengikut bentuk logo dan bukan atas kotak segi empat di belakangnya.
============================================================ */
.side-mark{position:relative;flex:none;width:26px;height:26px;display:grid;place-items:center;
animation:rumi-spin 14s linear infinite,rumi-glow 3.2s ease-in-out infinite}
.side-mark img{width:100%;height:100%;object-fit:contain;display:block}
.side-mark::after{content:"";position:absolute;inset:0;pointer-events:none;
-webkit-mask:url(brand/rumi/rumi-icon-cream.webp) center/contain no-repeat;
mask:url(brand/rumi/rumi-icon-cream.webp) center/contain no-repeat;
background:linear-gradient(115deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 62%);
background-size:320% 100%;background-repeat:no-repeat;
animation:rumi-shine 4.6s ease-in-out infinite}
@keyframes rumi-spin{to{transform:rotate(360deg)}}
@keyframes rumi-glow{
0%,100%{filter:drop-shadow(0 0 3px rgba(248,235,224,.35))}
50%{filter:drop-shadow(0 0 10px rgba(248,235,224,.85))}
}
@keyframes rumi-shine{
0%,100%{background-position:150% 0}
55%,100%{background-position:-70% 0}
}
@media (max-width:820px){
.side-mark{width:19px;height:19px}
}
@media (prefers-reduced-motion:reduce){
.side-mark{animation:none;filter:none}
.side-mark::after{animation:none;opacity:0}
}
/* ============================================================
v6.31 FOTO KARUSEL DI TELEFON: NISBAH DEKAT DENGAN DESKTOP
Tinggi tetap clamp(180px,44vw,260px) menghasilkan bingkai hampir 2:1 pada telefon, iaitu jauh
lebih leper daripada desktop yang lebih kurang 1.15:1. Pangkasan seleper itu memotong kepala
orang dan bahagian atas papan tanda klinik. Nisbah 4:3 mengekalkan lebih banyak bingkai asal.
============================================================ */
@media (max-width:860px){
.caps-photo{height:auto;aspect-ratio:4/3}
}
@media (max-width:480px){
.caps-photo{aspect-ratio:5/4}
}
/* v6.32 Jurang antara panel dan foto dirapatkan supaya kedua-duanya terbaca sebagai satu kepingan,
bukan dua kad bersebelahan. Jurang itu malar dari atas ke bawah kerana kedua-dua tepi condong
pada sudut yang sama, jadi mengecilkannya tidak merosakkan jajaran. */
.caps{--cgap:clamp(6px,0.75vw,11px)}
@media (max-width:860px){
.caps{--cgap:8px;--cutY:18px}
}
/* ============================================================
v6.34 TAB SISI BERKILAU
Satu jalur cahaya menyapu menuruni tab setiap 3.8 saat. Ia dikenakan pada lapisan sendiri di
dalam tab, bukan pada latar tab itu, supaya ia tidak berlawan dengan gamitan yang sudah
menggerakkan tab itu di telefon.
============================================================ */
.side-tab{position:relative;overflow:hidden;isolation:isolate}
.side-tab::before{content:"";position:absolute;left:-60%;right:-60%;top:0;height:60%;z-index:1;
pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);
animation:tab-shine 3.8s ease-in-out infinite}
@keyframes tab-shine{
0%{transform:translateY(-180%)}
60%,100%{transform:translateY(300%)}
}
@media (prefers-reduced-motion:reduce){
.side-tab::before{animation:none;opacity:0}
}
/* v6.35 Di telefon, Swiper menyamakan tinggi semua slaid dengan slaid tertinggi. Baki tinggi itu
diagihkan oleh grid ke baris automatik, dan ia mendarat di bawah foto, jadi jurang antara foto
dan panel membesar mengikut slaid mana yang paling panjang teksnya. Baki itu dihantar ke bawah
slaid, bukan ke celah antara keduanya. */
@media (max-width:860px){
.caps .caps-slide{align-content:start}
}
/* ============================================================
v6.37 RODA IIBSS: ANAK PANAH PADA SETIAP PERANTI
Di telefon roda ini dahulu digerakkan oleh blok melekat dan jarak skrol tambahan. Ia tidak
pernah mendarat tepat pada satu syarikat dan selalunya tersangkut di tengah dua. Sekarang
anak panah dan titik yang menggerakkannya, jadi ia sentiasa berhenti pada langkah penuh.
============================================================ */
.fw-nav{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px)}
.fw-nav .fw-dots{flex:1 1 auto;min-width:0}
.fw-arrow{flex:none;width:clamp(38px,3vw,46px);aspect-ratio:1;border-radius:99px;
display:grid;place-items:center;background:var(--cream-2);color:var(--teal);
transition:background .3s,transform .35s var(--ease)}
.fw-arrow i,.fw-arrow svg{width:17px;height:17px}
.fw-arrow:hover{background:var(--teal);color:var(--cream);transform:translateY(-2px)}
@media (max-width:700px){
.fw-arrow{width:36px}
.fw-nav{gap:8px}
}
/* v6.38 Tab sisi tetap melekat di tepi kanan skrin dan menutup anak panah "seterusnya". Baris
kawalan diundurkan selebar tab itu supaya anak panah boleh ditekan, bukan tab yang tertekan. */
.fw-nav{padding-right:clamp(34px,4vw,56px)}
@media (max-width:820px){
.fw-nav{padding-right:34px}
}
/* v6.39 Di telefon lajur teks melepasi tepi skrin, jadi anak panah "seterusnya" berakhir di bawah
tab sisi dan ketikan pengguna mengenai tab, bukan anak panah. Kedua-dua anak panah dipindah ke
kiri, jauh dari tab, dan titik syarikat dibenarkan melimpah ke baris bawahnya. */
/* v6.43 Satu baris sahaja di telefon, sama susunan dengan desktop: panah kiri, syarikat, panah
kanan. Jidar kanan menjauhkan panah kanan dari tab sisi, dan deretan syarikat boleh dileret
mendatar kalau namanya terlalu panjang untuk muat. */
@media (max-width:820px){
.fw-nav{padding-right:24px;flex-wrap:nowrap;gap:6px}
.fw-nav .fw-prev{order:1}
.fw-nav .fw-dots{order:2;flex:1 1 auto;min-width:0;overflow-x:auto;
scrollbar-width:none;-ms-overflow-style:none}
.fw-nav .fw-dots::-webkit-scrollbar{display:none}
.fw-nav .fw-next{order:3}
}
/* ============================================================
v6.40 SUSUN ATUR RODA DI TELEFON TANPA BLOK MELEKAT
Semua peraturan susun atur telefon dahulu bersandar pada kelas .fw-sticky, yang hanya ditambah
oleh kod skrol yang kini dibuang. Tanpanya roda ini kembali ke grid dua lajur desktop pada skrin
390px dan lajur teksnya terkeluar dari skrin. Peraturan yang sama dikenakan semula, tanpa
bahagian melekatnya.
============================================================ */
@media (max-width:900px){
.fw .fw-grid{grid-template-columns:1fr;gap:14px;min-height:0}
.fw .fw-txt{overflow:hidden;min-width:0}
.fw .fw-vis{max-width:min(280px,60vw);margin:0 auto;overflow:visible}
.fw .fw-count{display:none}
.fw .fw-hint{display:block}
}
@media (max-height:700px) and (max-width:900px){
.fw .fw-vis{max-width:min(220px,48vw)}
.fw .fw-tag{font-size:20px}
.fw .fw-desc{font-size:13.5px;margin-top:6px}
.fw .fw-shots{margin-top:10px}
.fw .fw-shot{flex-basis:30%}
}
/* v6.41 Tab sisi di telefon mengecil semasa pembaca turun dan kembali penuh sebaik mereka naik,
supaya ia tidak menutup teks di tengah tetapi tidak pernah hilang terus. */
@media (max-width:820px){
.side-rail{transition:transform .45s var(--ease),opacity .45s var(--ease)}
.side-rail.is-min{transform:translateX(38%);opacity:.6}
.side-rail.is-min .side-tab{animation:none}
}
/* v6.42 Di telefon kandungan roda ini melekat pada tepi skrin: blok itu tiada jidar mendatar
sendiri kerana di desktop ia bergantung pada .wrap di luarnya. */
@media (max-width:900px){
.fw,.fw.fw-sticky{padding-inline:clamp(20px,5.5vw,28px)}
}
/* v6.45 Pil syarikat mengecut untuk muat dalam baris, jadi namanya terpotong di tengah. Pil kekal
lebar asalnya dan deretan itu yang dileret. */
@media (max-width:820px){
.fw-nav .fdot{flex:0 0 auto}
.fw-nav .fdot-name{white-space:nowrap}
}
/* v6.47 Anak panah kiri terpotong di tepi skrin. Deretan pil boleh dileret, dan apabila pelayar
meleretnya untuk mendedahkan pil yang aktif, ia turut meleret bekas di luarnya. overflow:hidden
masih boleh dileret secara program; overflow:clip tidak boleh, jadi baris kawalan kekal diam. */
@media (max-width:900px){
.fw .fw-txt{overflow:clip}
}
@media (max-width:820px){
.fw-nav{padding-left:2px}
.fw-nav .fw-prev,.fw-nav .fw-next{position:relative;z-index:1}
}
/* ============================================================
v6.48 KAWALAN RODA DIPINDAH KE BAWAH, DENGAN GARIS PANDUAN
Anak panah dahulu berkongsi baris dengan pil syarikat, dan nama panjang seperti MAFAR Healthcare
menolak anak panah keluar skrin. Sekarang anak panah duduk di bawah panel bersama satu garis
mendatar yang terisi mengikut putaran roda, jadi pembaca nampak bahawa skrol yang menggerakkannya
dan sejauh mana mereka sudah sampai.
============================================================ */
.fw-foot{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);
margin-top:clamp(16px,2vw,26px)}
.fw-rail{position:relative;flex:1 1 auto;height:2px;border-radius:99px;
background:rgba(15,77,74,.14);overflow:hidden}
.fw-rail i{position:absolute;inset:0;display:block;background:var(--gold);
transform:scaleX(0);transform-origin:0 50%}
.fw-dots{margin-bottom:clamp(10px,1.4vw,16px)}
@media (max-width:820px){
.fw-foot{gap:10px}
.fw-dots{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
padding-bottom:2px;margin-bottom:12px}
.fw-dots::-webkit-scrollbar{display:none}
.fw-dots .fdot{flex:0 0 auto}
.fw-dots .fdot-name{white-space:nowrap}
}
/* v6.49 Blok roda di telefon kini dipegang oleh pin sebenar, bukan position:sticky, jadi latar
belakangnya mesti pejal supaya kandungan di bawahnya tidak kelihatan menembusinya. */
@media (max-width:900px){
.fw.fw-mob{background:var(--cream);padding-block:22px 10px}
}
/* ============================================================
v6.56 Menu item that is not ready yet
A page being prepared stays in the menu rather than vanishing and coming back later: dimmed so
the eye skips it, with the word beside it so nobody has to click to find out why.
============================================================ */
.nav-links a.is-soon,
.nav-dd-menu a.is-soon,
.menu a.is-soon,
.foot a.is-soon{opacity:.52}
.nav-links a.is-soon:hover,
.nav-dd-menu a.is-soon:hover,
.menu a.is-soon:hover,
.foot a.is-soon:hover{opacity:.78}
.nav-soon{font-style:normal;margin-left:7px;font-size:9px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--gold);vertical-align:middle;position:relative;top:-1px}
.menu a.big .nav-soon{font-size:11px;margin-left:10px;top:-4px}
/* ============================================================
v6.56 Not ready yet
A page with nothing to report still has to look deliberate. One screen of teal, the words held
low and left where the eye lands after the nav, and the brand mark grown far past its usual
size and cropped by the right edge so the empty half reads as composition rather than absence.
============================================================ */
.soon{background:var(--teal);color:var(--cream);overflow:hidden;
min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
padding:clamp(140px,22vh,230px) 0 clamp(40px,6vh,70px)}
.soon-mark{position:absolute;right:-16%;top:50%;translate:0 -50%;width:min(86vh,760px);height:auto;
opacity:.07;fill:var(--cream);pointer-events:none;
animation:soon-turn 70s linear infinite}
@keyframes soon-turn{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){.soon-mark{animation:none}}
.soon-in{position:relative;z-index:1}
.soon-eyebrow{font-size:clamp(13px,1.1vw,15px);font-weight:500;letter-spacing:.16em;
text-transform:uppercase;color:var(--gold);margin:0 0 clamp(16px,2vw,26px)}
/* the rule carries the eye from the page's own name into the sentence, so the two read as one unit */
.soon-eyebrow::after{content:"";display:block;width:clamp(54px,7vw,96px);height:2px;margin-top:14px;
background:var(--gold);transform:skewX(var(--skew));transform-origin:left}
.soon-h{font-size:clamp(38px,6.4vw,92px);font-weight:700;letter-spacing:-.035em;line-height:1.02;
max-width:16ch;margin:0}
.soon-text{margin:clamp(20px,2.4vw,32px) 0 0;max-width:40ch;
font-size:clamp(16px,1.35vw,21px);line-height:1.5;opacity:.78}
.soon-cta{margin-top:clamp(30px,3.6vw,48px)}
.soon-note{position:relative;z-index:1;width:min(1240px,calc(100% - 48px));margin:clamp(60px,9vh,110px) auto 0;
font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.42}
@media (max-width:860px){
.soon{min-height:92svh;padding-top:clamp(120px,18vh,170px)}
.soon-mark{right:-34%;width:min(74vh,520px);opacity:.06}
.soon-h{max-width:12ch}
}
/* ============================================================
v6.56 Company switcher: names, not icons
Every company now says its own name, so nobody has to decode a graduation cap. Width is the only
real problem that creates, and it is solved by weight rather than by scrolling: the company being
read is a full filled pill, the other three shrink to quiet outlines, and under 680px they drop
the "MAFAR" they all share. Four names then sit in one row on a 360px phone with no sideways
scroll and nothing clipped.
============================================================ */
.fw-dots .fdot{height:auto;min-width:0;padding:8px 15px;line-height:1;
font-family:inherit;opacity:.58;
transition:background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease),
opacity .35s var(--ease),padding .45s var(--ease),font-size .35s var(--ease)}
.fw-dots .fdot:hover{opacity:1;border-color:var(--c,var(--teal))}
.fw-dots .fdot .fdot-name{max-width:none;opacity:1;font-size:11px;font-weight:600;letter-spacing:.1em}
.fw-dots .fdot.on{opacity:1;padding:10px 19px}
.fw-dots .fdot.on .fdot-name{font-size:12.5px;font-weight:700;letter-spacing:.14em}
@media (max-width:860px){
.fw-dots{gap:6px;flex-wrap:nowrap}
.fw-dots .fdot{padding:7px 10px}
.fw-dots .fdot .fdot-name{font-size:10px;letter-spacing:.06em}
.fw-dots .fdot.on{padding:8px 13px}
.fw-dots .fdot.on .fdot-name{font-size:11px;letter-spacing:.09em}
}
@media (max-width:680px){
/* the word every company shares is the one worth losing first */
.fw-dots .fdot:not(.on) .fdot-pre{display:none}
}
@media (max-width:420px){
.fw-dots{gap:5px}
.fw-dots .fdot{padding:6px 8px}
.fw-dots .fdot .fdot-name{font-size:9px;letter-spacing:.03em}
.fw-dots .fdot.on{padding:7px 11px}
.fw-dots .fdot.on .fdot-name{font-size:10.5px;letter-spacing:.06em}
}
/* ============================================================
v6.57 Company switcher: fitting four names in
Two measured problems, two fixes. On a wide screen the row ran under the Klinik Rumi side rail,
so the three companies not being read are cut down further and the row is kept clear of it. On a
phone the four names needed 326px inside 272px, so the row wraps onto a second line instead of
scrolling sideways: a control that has to be dragged to be seen is a control most people never
find, and two short lines beat four names shrunk to unreadable type.
============================================================ */
.fw-dots{max-width:calc(100% - 20px)}
.fw-dots .fdot:not(.on){padding:7px 10px}
.fw-dots .fdot:not(.on) .fdot-name{font-size:10px;letter-spacing:.07em}
@media (min-width:1101px){
/* the rail owns the right edge of the viewport; the row stops before it */
.fw-dots{max-width:calc(100% - 64px)}
}
@media (max-width:860px){
.fw-dots,
.fw-nav .fw-dots{flex-wrap:wrap;overflow:visible;row-gap:6px}
.fw-dots .fdot:not(.on){padding:6px 9px}
.fw-dots .fdot:not(.on) .fdot-name{font-size:9.5px}
}
@media (max-width:420px){
.fw-dots .fdot:not(.on){padding:6px 8px}
.fw-dots .fdot:not(.on) .fdot-name{font-size:9px;letter-spacing:.04em}
}
/* ============================================================
v6.61 Tablet tier
An iPad is a wide screen, so from 761px up it now gets the desktop layouts instead of the phone
stack. Two grids do not survive that move at their desktop column count: twelve leaders at four
across and five services at five across leave roughly 150px a card, which breaks names onto three
lines. They step down to three across for the tablet range only.
============================================================ */
@media (min-width:761px) and (max-width:1000px){
.ld-grid{grid-template-columns:repeat(3,1fr)}
.ld-card.is-big{grid-column:span 1}
.sv-grid,.sv-grid[data-n]{grid-template-columns:repeat(3,1fr)}
}
/* ============================================================
v6.62 Tablet tier, second pass
Measured on live at 768px and 820px: these grids keep their desktop column count in the tablet
range, which hands a gallery thumbnail 108px and a cascade step 144px. Each steps down to a
count that still fills the width without shrinking its contents past reading size.
============================================================ */
@media (min-width:761px) and (max-width:1000px){
.gal-grid,.gal-grid[data-n]{grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(150px,20vw,210px)}
.gal-item,.gal-grid[data-n] .gal-item{grid-column:span 1 !important;grid-row:span 1 !important}
.gal-grid[data-n="3"] .gal-item:first-child,
.gal-grid[data-n="5"] .gal-item:first-child,
.gal-grid[data-n="4"] .gal-item:first-child{grid-column:span 2 !important;grid-row:span 2 !important}
.cs-grid,.cs-grid[data-n="4"],.cs-grid[data-n="5"]{grid-template-columns:repeat(3,1fr);row-gap:26px}
.tlx-cols{grid-template-columns:repeat(2,1fr)}
.life-grid{grid-template-columns:repeat(3,1fr)}
}
/* ============================================================
v6.71 Solutions, stacked
The cards are dealt rather than laid out: each one sticks under the nav while the next slides up
and covers it, so the reader meets one way in at a time instead of choosing between four at once.
Every card keeps a sliver of the one beneath it showing, which is what tells the eye a deck is
being built and not that a single card is scrolling past.
============================================================ */
.sol.is-stack .sol-grid{display:block}
.sol.is-stack .sol-side{max-width:none}
.sol.is-stack .sol-sticky{position:static;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:clamp(18px,3vw,56px);align-items:end}
.sol.is-stack .sol-sticky .lead{max-width:46ch;margin:0}
.sol.is-stack .sol-pic{display:none}
.sol.is-stack .sol-list{display:block;border:0;margin-top:clamp(34px,4vw,56px);padding:0;list-style:none}
.sol.is-stack .sol-row{position:sticky;
/* each card parks a little lower than the one before, so the deck stays visible underneath */
top:calc(var(--nav-gap,96px) + var(--i) * clamp(10px,1.2vw,18px));
margin:0 0 clamp(18px,2.2vw,30px);
border-radius:var(--rm);overflow:hidden;background:var(--teal-2);color:var(--cream);
box-shadow:0 30px 60px -28px rgba(3,26,25,.55);
min-height:clamp(380px,46vw,520px);display:flex;flex-direction:column;justify-content:flex-end;
padding:clamp(26px,3vw,40px);transform:none}
.sol.is-stack .sol-row:last-child{margin-bottom:0}
/* the photograph is the card, dimmed just enough to carry type */
.sol.is-stack .sol-ph{position:absolute;inset:0;z-index:0;display:block;width:auto;height:auto;border-radius:0}
.sol.is-stack .sol-ph img{width:100%;height:100%;object-fit:cover;display:block;
transform:scale(1.03);transition:transform 1.6s var(--ease)}
.sol.is-stack .sol-row:hover .sol-ph img{transform:scale(1)}
/* the words sit at the foot of the card, so the scrim is weighted there: light enough at the top
to let the photograph read, dark enough at the bottom to carry a heading and a four item list */
.sol.is-stack .sol-ph::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(3,26,25,.30) 0%,rgba(3,26,25,.52) 38%,rgba(3,26,25,.88) 76%,rgba(3,26,25,.95) 100%)}
/* the photograph lives inside .sol-head in the markup, so the head has to stay static for the
picture to fill the card. That leaves the head's own text painting under a positioned image, so
the heading and the numeral are lifted one at a time instead of lifting their parent. */
.sol.is-stack .sol-body{position:relative;z-index:1}
.sol.is-stack .sol-head h3,.sol.is-stack .sol-no{position:relative;z-index:2}
.sol.is-stack .sol-no{position:absolute}
/* the base rule makes .sol-head a positioned box, which would make the full-bleed photograph
resolve against the heading instead of the card and collapse it to a 46px strip */
.sol.is-stack .sol-head{position:static;display:block;padding:0;border:0}
.sol.is-stack .sol-head::after{display:none}
.sol.is-stack .sol-no{position:absolute;left:clamp(22px,2.6vw,34px);top:clamp(20px,2.4vw,30px);
min-width:0;width:46px;height:34px;display:grid;place-items:center;
background:var(--gold);color:var(--teal);font-family:var(--font-num);font-size:13px;font-weight:700;
letter-spacing:.04em;line-height:1;opacity:1;
clip-path:polygon(13% 0,100% 0,87% 100%,0 100%)}
.sol.is-stack .sol-no::before{display:none}
.sol.is-stack .sol-head h3{font-size:clamp(26px,3vw,44px);font-weight:700;letter-spacing:-.028em;
line-height:1.06;color:var(--cream);max-width:18ch;padding:0}
.sol.is-stack .sol-body{margin-top:clamp(12px,1.4vw,18px);padding:0;max-width:62ch}
.sol.is-stack .sol-body>p{font-size:clamp(15px,1.15vw,17.5px);line-height:1.55;color:var(--cream);opacity:.84}
.sol.is-stack .sol-body>p em{font-style:italic;color:var(--gold);opacity:1}
.sol.is-stack .sol-items{margin-top:clamp(16px,1.8vw,22px);padding-top:clamp(14px,1.6vw,18px);
border-top:1px solid color-mix(in srgb,var(--cream) 18%,transparent)}
.sol.is-stack .sol-items-l{color:var(--gold);opacity:.9}
.sol.is-stack .sol-items ul{grid-template-columns:1fr 1fr;gap:9px 28px}
.sol.is-stack .sol-items li{color:var(--cream);opacity:.84}
.sol.is-stack .sol-items li::before{background:var(--gold)}
@media (max-width:1000px){
.sol.is-stack .sol-items ul{grid-template-columns:1fr}
.sol.is-stack .sol-head h3{max-width:none}
}
@media (max-width:760px){
.sol.is-stack .sol-sticky{grid-template-columns:1fr}
.sol.is-stack .sol-sticky .lead{margin-top:14px}
/* on a phone the deck is shallower, but every card still holds one height whatever its text
runs to: a 154px card is a band, not a card, and a deck of uneven bands reads as a mistake */
.sol.is-stack .sol-row{min-height:clamp(300px,74vw,380px);top:calc(var(--nav-gap,84px) + var(--i) * 8px);
padding:clamp(22px,5vw,28px);margin-bottom:14px}
.sol.is-stack .sol-body{max-width:none}
/* the card is short here and its text grows upward from the foot, so a numeral pinned to the top
corner ends up printed across the heading. It rejoins the flow instead. */
.sol.is-stack .sol-no{position:relative;z-index:2;left:auto;top:auto;margin:0 0 10px}
}
/* ============================================================
v6.71 Carousel: one height for every slide on a phone
Slides carry different amounts of text, so the panel used to grow and shrink as the reader moved
through the deck and the arrows jumped under their thumb. Every slide now takes the height of the
tallest one and the panel absorbs the difference, so only the words change between slides.
============================================================ */
@media (max-width:860px){
.caps .caps-sw .swiper-wrapper,
.wband .wb-sw .swiper-wrapper{align-items:stretch}
.caps .caps-slide{height:auto;align-content:stretch;grid-template-rows:auto 1fr}
.caps .caps-photo{align-self:start}
.caps .caps-panel{display:flex}
.caps .caps-panel-in{width:100%}
}
/* ============================================================
v6.79 Footer column headings
Company, Resources and Connect were set at 11.5px, small enough to read as decoration rather
than as the labels that tell a visitor which list is which. They now carry their own weight.
============================================================ */
.foot h5,.foot .foot-h{font-size:15px;letter-spacing:.1em;font-weight:600;margin-bottom:20px}
@media (max-width:760px){.foot h5,.foot .foot-h{font-size:14px;margin-bottom:16px}}
/* ============================================================
v6.81 Footer: one line that invites a reply
It sits above the legal rule, where the eye already stops on its way out of the page, and the
address itself carries the gold so it reads as the thing to act on.
============================================================ */
.foot-ask{margin:clamp(34px,4vw,54px) 0 0;font-size:clamp(16px,1.3vw,19px);line-height:1.5;
color:var(--cream);opacity:.88}
.foot-ask a{color:var(--gold);font-weight:600;text-decoration:none;
border-bottom:1px solid color-mix(in srgb,var(--gold) 45%,transparent);transition:border-color .3s}
.foot-ask a:hover{border-bottom-color:var(--gold)}
@media (max-width:760px){.foot-ask{margin-top:28px;font-size:16px}}
/* ============================================================
v6.99 Enquiry panel as a poster
The photograph fills the panel edge to edge and one line sits large in the middle of it. The
earlier version put the picture in a small frame with the line as a caption underneath, which
reads as a label and gets skipped. At this size the line is the first thing seen in the column,
and the photograph is doing the work the empty green box used to do badly.
============================================================ */
.contact-side.is-poster{display:flex;flex-direction:column;justify-content:flex-end;
min-height:clamp(460px,46vw,620px)}
/* lighter than the standard wash: the words are large here, so the photograph can stay visible */
.contact-side.is-poster.has-pics::before{
background:linear-gradient(180deg,rgba(11,59,57,.52) 0%,rgba(11,59,57,.62) 46%,rgba(5,35,33,.92) 100%)}
.contact-side.is-poster>.dm{display:none}
.cs-say{flex:1 1 auto;display:grid;place-items:center;text-align:center;
padding:clamp(24px,3vw,44px) clamp(10px,2vw,26px) clamp(28px,3.4vw,46px)}
.cs-say b{grid-area:1/1;max-width:15ch;
font-size:clamp(28px,3.5vw,50px);font-weight:700;letter-spacing:-.03em;line-height:1.08;
color:var(--cream);text-wrap:balance;
opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.cs-say b.on{opacity:1;transform:none}
/* the house rule, centred under the line, so the words read as a statement and not as a heading */
.cs-say b::after{content:"";display:block;width:46px;height:3px;margin:clamp(14px,1.6vw,20px) auto 0;
background:var(--gold);transform:skewX(var(--skew))}
@media (max-width:760px){
.contact-side.is-poster{min-height:clamp(380px,86vw,470px)}
.cs-say b{font-size:clamp(25px,7.4vw,32px);max-width:13ch}
}
@media (prefers-reduced-motion:reduce){ .cs-say b{transition:none} }
/* the column is set to start, so the panel only grew as tall as its own content and stopped short
of the form beside it. As a poster it should run the full height of the row. */
@media (min-width:761px){
.contact-grid:has(.contact-side.is-poster){align-items:stretch}
.contact-side.is-poster{height:100%}
}
/* ============================================================
v7.15 Ecosystem dial
A ring on the left with everything the company says inside it, and its photograph beside it. The
arc is a single stroke revealed by its dash offset, so the colour travels round the ring as the
reader moves rather than four separate segments lighting up. Where the reference design puts an
icon at the top of its circle, this puts the lockup, because the company's name is the thing
worth reading.
============================================================ */
/* body:not(.home) .sec sets padding at a higher specificity than a single class, so these two
rules have to match it or the section keeps the site's default block padding */
body .wx.sec{background:#062927;color:var(--cream);overflow:hidden;position:relative;z-index:1;
/* two mask layers: a long eased ramp at the top, and solid below it. The ramp always starts at
nothing, so the section's own edge never shows as a step, and its stops follow a curve rather
than a straight line, which is what a straight ramp against a photograph gives away as a band.
--fade is the length of the ramp, and it closes to nothing as the section arrives. */
-webkit-mask-image:
linear-gradient(to bottom, rgba(0,0,0,0) 0,
rgba(0,0,0,.02) 10%, rgba(0,0,0,.08) 22%, rgba(0,0,0,.2) 36%,
rgba(0,0,0,.4) 50%, rgba(0,0,0,.63) 64%, rgba(0,0,0,.84) 80%, #000 100%),
linear-gradient(#000,#000);
-webkit-mask-size:100% calc((1 - var(--enter)) * 104vh),100% calc(100% - (1 - var(--enter)) * 104vh + 1px);
-webkit-mask-position:0 0,0 calc((1 - var(--enter)) * 104vh);
-webkit-mask-repeat:no-repeat,no-repeat;
mask-image:
linear-gradient(to bottom, rgba(0,0,0,0) 0,
rgba(0,0,0,.02) 10%, rgba(0,0,0,.08) 22%, rgba(0,0,0,.2) 36%,
rgba(0,0,0,.4) 50%, rgba(0,0,0,.63) 64%, rgba(0,0,0,.84) 80%, #000 100%),
linear-gradient(#000,#000);
mask-size:100% calc((1 - var(--enter)) * 104vh),100% calc(100% - (1 - var(--enter)) * 104vh + 1px);
mask-position:0 0,0 calc((1 - var(--enter)) * 104vh);
mask-repeat:no-repeat,no-repeat;
min-height:100svh;display:flex;align-items:center;padding-block:clamp(26px,5vh,64px)}
.wx-in{position:relative;z-index:1;width:min(1240px,calc(100% - 48px))}
/* The three values that move while the reader scrolls are registered rather than left as plain
custom properties. A plain custom property is inherited, so writing one on the section forced the
whole subtree under it to have its style recalculated on every frame: measured at 12x CPU
throttling that was half of the dropped frames in this section. Registered with inherits:false
and written on the elements that actually read them, the recalculation stays on those elements.
A browser without @property treats them as ordinary properties, which is how they behaved before,
so nothing breaks where it is unsupported. */
@property --intro{syntax:"";inherits:false;initial-value:1}
@property --enter{syntax:"";inherits:false;initial-value:1}
@property --i-in{syntax:"";inherits:false;initial-value:1}
/* --intro runs 0 to 1 across the first stretch of the pinned scroll: at 0 the sentence stands
alone at display size in the middle of the screen, at 1 it has settled into its heading and the
dial has the room. Without the script it stays at 1, which is the ordinary layout. */
/* --enter runs 0 to 1 as the dial climbs the screen. It softens the top edge of the section so the
green washes up over the one being held behind it, and is 1 by the time the dial is home. */
.wx{--enter:1;--intro:1;
--h-set:clamp(20px,2vw,28px); /* the size it settles at, as a heading */
--h-big:clamp(34px,5.6vw,82px)} /* the size it holds the screen at, on its own */
/* the type is grown rather than the box scaled: scaling a fixed box cannot rewrap, and on a phone
the enlarged sentence ran straight off both edges. Growing the size lets it set itself again. */
/* the type is grown rather than the box scaled: scaling a fixed box cannot rewrap, and on a phone
the enlarged sentence ran straight off both edges. Growing the size lets it set itself again.
CSS translate holds the intro's travel; the entrance from below is a transform, so the two
stack instead of overwriting one another. */
.wx-head{font-size:calc(var(--h-set) + (1 - var(--intro)) * (var(--h-big) - var(--h-set)));
font-weight:700;letter-spacing:-.025em;line-height:1.1;
color:var(--cream);max-width:24ch;text-align:center;
margin:0 auto clamp(18px,2.6vh,34px);
/* set lower while it holds the screen on its own, and walked back up to its heading position as
the dial takes over. This has to be a translate rather than a margin: a margin made the section
taller, and the pin froze that inflated height, which left a block of empty room at the top and
pushed the button off the foot of a phone screen. CSS translate and the entrance tween's own
transform stack, so the two do not overwrite one another. */
translate:0 calc((1 - var(--intro)) * 31vh)}
/* the dial waits for the back half of the intro: brought in alongside the sentence it was being
read through the big type, which looked like two things fighting for the same space */
.wx-grid{--i-in:clamp(0,calc((var(--intro) - .55) * 2.3),1);
opacity:var(--i-in);scale:calc(.93 + var(--i-in) * .07)}
/* armed by the inline script until the motion library takes the heading over, so a cold load never
shows the sentence for a frame before its entrance begins */
.wx.wx-arm .wx-head{opacity:0}
@media (max-width:860px){ .wx{--h-big:clamp(27px,7.6vw,40px)} }
@media (prefers-reduced-motion:reduce){
.wx-head{scale:1;translate:none}
.wx-grid{opacity:1;scale:1}
}
/* a heading takes a band off the top of the screen, and the circle was being pushed through the
bottom of it. Where there is one, the circle is measured against what is left. */
.wx--titled .wx-ring,
.wx--titled .wx-dots{width:min(100%,clamp(400px,47vw,700px),63vh)}
.wx--titled .wx-head{margin-bottom:clamp(12px,1.8vh,22px)}
/* Three things share one grid: the ring, the words and the photograph. Which of them sits inside
the circle is a question each screen answers differently, and because none of them is nested in
another, the layout can be rearranged without the markup being written twice.
Wide: the words sit inside the ring, the photograph stands beside it.
Narrow: the photograph sits inside the ring and the words run underneath, which is how the
reference design behaves on a phone and is the right call: a circle of text on a 390px screen
would have to be set too small to read. */
/* the dial is given the larger share of the room: the circle has to stand taller than the
photograph beside it, or the space inside it reads as emptiness rather than as a stage */
.wx-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
gap:clamp(20px,3vw,56px);align-items:center}
/* the last term keeps a wide, short window from pushing the circle past the fold */
.wx-ring{grid-column:1;grid-row:1;justify-self:center;align-self:center;
width:min(100%,clamp(430px,47vw,700px),76vh);height:auto;aspect-ratio:1;overflow:visible}
.wx-ring-base{fill:none;stroke:color-mix(in srgb,var(--cream) 26%,transparent);stroke-width:.45}
.wx-arc{fill:none;stroke:var(--c);stroke-width:.9;stroke-linecap:round;
transform:rotate(-90deg);transform-origin:50% 50%;
transition:stroke-dasharray .75s var(--ease)}
/* glass markers. A flat fill at low opacity just looks washed out; a translucent pane with a lit
edge and a white pupil reads as a bead of glass sitting on the wire. Centred by translation, so
each one sits exactly on the line whatever the ring is scaled to. */
.wx-dots{grid-column:1;grid-row:1;justify-self:center;align-self:center;position:relative;
width:min(100%,clamp(430px,47vw,700px),76vh);aspect-ratio:1;pointer-events:none;z-index:2}
.wx-dot{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;
appearance:none;padding:0;cursor:pointer;pointer-events:auto;
width:clamp(15px,1.5vw,19px);height:clamp(15px,1.5vw,19px);border-radius:50%;
background:color-mix(in srgb,var(--c) 34%,transparent);
border:1px solid color-mix(in srgb,var(--c) 72%,transparent);
backdrop-filter:blur(5px) saturate(150%);-webkit-backdrop-filter:blur(5px) saturate(150%);
box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 42%,transparent);
display:grid;place-items:center;
transition:background .45s var(--ease),width .45s var(--ease),height .45s var(--ease),
box-shadow .45s var(--ease)}
/* the pupil, drawn rather than nested, so nothing can sit a pixel off centre */
.wx-dot::after{content:"";width:34%;height:34%;border-radius:50%;background:#fff;opacity:.75;
transition:opacity .45s var(--ease)}
.wx-dot:hover{background:color-mix(in srgb,var(--c) 52%,transparent)}
.wx-dot.on{background:var(--c);width:clamp(19px,1.9vw,24px);height:clamp(19px,1.9vw,24px);
box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 50%,transparent),
0 0 0 5px color-mix(in srgb,var(--c) 16%,transparent)}
.wx-dot.on::after{opacity:1}
.wx-say{grid-column:1;grid-row:1;justify-self:center;align-self:center;
display:grid;place-items:center;width:min(58%,440px);text-align:center;z-index:1}
.wx-co{grid-area:1/1;display:flex;flex-direction:column;align-items:center;
opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.wx-co.on{opacity:1;visibility:visible}
/* the lockup now sits on a plate, one width for every company the way the plates on the office
wall are cut to one size whatever the name. Glass rather than a solid fill, so the ring behind
it still reads through and the plate belongs to the dial instead of covering it. */
.wx-lock{display:grid;justify-items:start;gap:0;margin-bottom:clamp(12px,1.8vh,20px);
width:clamp(188px,19vw,246px);box-sizing:border-box;
padding:clamp(12px,1.6vh,18px) clamp(14px,1.4vw,20px);
border-radius:var(--rs);
background:linear-gradient(145deg,
color-mix(in srgb,var(--cream) 13%,transparent),
color-mix(in srgb,var(--cream) 5%,transparent));
border:1px solid color-mix(in srgb,var(--cream) 17%,transparent);
backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);
box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 16%,transparent),
0 20px 44px -26px rgba(0,0,0,.65)}
/* a company changing hands catches the light across the plate, the way turning a real piece of
glass does. It runs once, on the card that has just become the active one. */
.wx-lock{position:relative;overflow:hidden;isolation:isolate}
.wx-lock::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
background:linear-gradient(105deg,transparent 38%,
color-mix(in srgb,#fff 34%,transparent) 50%,transparent 62%);
translate:-130% 0;opacity:0}
.wx-co.on .wx-lock::after{animation:wxShine .95s cubic-bezier(.3,0,.2,1) .06s}
@keyframes wxShine{
0%{translate:-130% 0;opacity:0}
18%{opacity:1}
100%{translate:130% 0;opacity:0}}
@media (prefers-reduced-motion:reduce){.wx-co.on .wx-lock::after{animation:none}}
.wx-lock-top{width:clamp(62px,6vw,86px);height:auto;fill:var(--cream);opacity:.94;
margin-left:.08em;margin-bottom:clamp(2px,.4vh,5px)}
.wx-lock b{font-size:clamp(24px,2.5vw,36px);font-weight:700;letter-spacing:-.02em;line-height:1.04;
text-transform:uppercase;color:var(--c)}
/* with the row of names gone from the foot of the dial, the headline takes the room back: it is
the sentence the reader came for, so it is now set at display size. */
.wx-tag{margin:0;font-size:clamp(24px,2.5vw,38px);font-weight:700;letter-spacing:-.025em;
line-height:1.1;color:var(--cream);max-width:16ch;text-wrap:balance}
.wx-desc{margin:clamp(10px,1.4vh,16px) 0 0;font-size:clamp(14.5px,1.12vw,17.5px);line-height:1.5;
color:var(--cream);opacity:.74;max-width:32ch}
.wx-cta{margin-top:clamp(14px,2vh,24px)}
/* the frame no longer clips its photographs: they travel in from beyond the edge of the screen and
leave the same way, and the section's own overflow is what hides them off stage. The rounding
moves onto the picture itself, since the frame is no longer doing the cutting. */
/* shorter than the circle on purpose, so the ring reads as the bigger of the two */
.wx-shot{grid-column:2;grid-row:1;position:relative;overflow:visible;
aspect-ratio:4/5;max-height:min(58vh,520px);justify-self:center;width:100%}
/* the photograph arrives from the side rather than fading in place, so the change of company
reads as something moving in and the old one leaving */
/* the photographs are moved by the motion library rather than by a transition: an arc needs its
horizontal and vertical travel eased differently, and one CSS transition can only ease a
transform as a whole, which is what made the entrance read as a straight shove. */
.wx-shot > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
border-radius:var(--rm);background:#0A3634;opacity:0;visibility:hidden}
.wx-shot > img.on{opacity:1;visibility:visible;z-index:1}
.wx-shot > img.is-out{opacity:1;visibility:visible;z-index:0}
/* the opening photographs settle back from slightly oversize. The independent scale property is
used, not a transform, because the still video frame sets transform:none !important on its own
poster and that quietly cancelled the movement. */
.sec.video .vid .vid-poster,
.explore .xcard > img{scale:var(--rv-s,1);transform-origin:50% 55%}
html.wx-nobg .wx-bg{display:none}
/* ---- the light path for phones ----------------------------------------------------------------
A report from a four core Android showed this section still spending whole seconds on single
frames after the photographs were cut down. What is left are the three effects a weak mobile GPU
charges most for, and all three sit inside the part that moves: a backdrop filter has to re-blur
whatever is behind it every frame, a screen blend has to read the frame buffer back, and a mask
on a pinned full screen element re-composites with it. None of them is load bearing at phone
size, so below the tablet breakpoint they are swapped for flat fills that look near enough.
Add ?lite=0 to the address to keep the heavy version and compare on the same handset. */
@media (max-width:860px){
html:not(.wx-heavy) .wx-lock{backdrop-filter:none;-webkit-backdrop-filter:none;
background:linear-gradient(145deg,rgba(23,74,71,.92),rgba(11,52,50,.92))}
html:not(.wx-heavy) .wx-dot{backdrop-filter:none;-webkit-backdrop-filter:none;
background:color-mix(in srgb,var(--c) 50%,#0B3B39)}
html:not(.wx-heavy) .wx-bg-i::after{mix-blend-mode:normal;opacity:0}
html:not(.wx-heavy) .wx-bg-i.on::after{opacity:.5}
html:not(.wx-heavy) body .wx.sec{-webkit-mask-image:none;mask-image:none}
/* the soft top edge is kept, but drawn once as a plain overlay instead of a live mask */
html:not(.wx-heavy) .wx-bg::before{content:"";position:absolute;left:0;right:0;top:0;height:46vh;
z-index:2;pointer-events:none;opacity:calc(1 - var(--enter));
background:linear-gradient(to bottom,var(--cream) 0,color-mix(in srgb,var(--cream) 55%,transparent) 42%,transparent 100%)}
/* the soft edge on the rail stays: that mask sits on a small, still element, and without it a
company leaving the screen is cut off with a hard edge */
/* The menu bar is the one that reached every section. It is fixed, it spans the window, and once
the reader scrolls it carries an eighteen pixel blur, so the phone re-blurs a strip of whatever
is passing underneath on every single frame. That is why the long frames were spread across
story, the dial, the branches and explore alike. At phone size a near solid bar is not telling
a different story, so the blur is dropped and the white is brought up. */
html:not(.wx-heavy) .nav.scrolled::before{backdrop-filter:none;-webkit-backdrop-filter:none;
background:rgba(255,255,255,.96)}
/* the same goes for the two overlays that sit over moving pictures */
html:not(.wx-heavy) .gal-item figcaption,
html:not(.wx-heavy) .life-box-bg{backdrop-filter:none;-webkit-backdrop-filter:none}
}
/* ---- the companies on a rail --------------------------------------------------------------------
The ring stays where it is and what sits inside it travels sideways: the company being read
leaves to the left while the next one arrives from the right, scrubbed by the scroll rather than
stepped. Both rails are clipped and softened at their edges so nothing is seen crossing the wire.
Only under the section's own motion setting; the fading version is untouched. */
/* the column is widened and padded so that a company at rest sits inside the solid middle of the
mask: at the old width the last word of a heading was still being faded by the edge */
.wx--rail .wx-say{overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%)}
@media (min-width:861px){
.wx--rail .wx-say{width:min(74%,540px);padding-inline:8%}
}
@media (max-width:860px){
/* the stacked layout has the full width under the ring to play with, and a narrow column cannot
spare eleven per cent at each end: the softening is pulled in and the padding dropped */
.wx--rail .wx-say{width:min(100%,430px);padding-inline:4%;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
}
.wx--rail .wx-co{opacity:1;visibility:visible;transition:none}
.wx--rail .wx-shot{overflow:hidden}
.wx--rail .wx-shot > img{opacity:1;visibility:visible;transition:none}
.wx--rail .wx-shot > img.is-out{z-index:1}
/* ---- the photograph carries the company's colour -----------------------------------------------
A hairline and a soft shadow in the colour the ring is already using, so the frame belongs to the
dial beside it instead of sitting there as a plain rectangle. Behind the section's photo
treatment setting, so a page that does not ask for it renders exactly as before. */
.wx--glow .wx-shot > img.on{
box-shadow:0 36px 76px -34px color-mix(in srgb,var(--c,#C8A46A) 66%,transparent),
0 2px 0 color-mix(in srgb,var(--c,#C8A46A) 24%,transparent);
outline:1px solid color-mix(in srgb,var(--c,#C8A46A) 46%,transparent);outline-offset:-1px}
/* held back until the dial is reached. A class rather than an inline transform, because the
page-wide reveal sweep clears inline props and would put the photograph back on stage early. */
.wx-shot > img.wx-wait{opacity:0}
/* the backdrop: one per company, held well back and veiled, so it colours the room rather than
competing with the ring and the words standing in front of it */
.wx-bg{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
/* mirrored: the glow is generated low on the right, which is exactly where the photograph stands,
so flipped it falls behind the dial instead and the colour is actually seen */
.wx-bg-i{position:absolute;inset:0;display:block;background-size:cover;background-position:50% 55%;
opacity:0;transform:scaleX(-1) scale(1.06);
transition:opacity 1.1s var(--ease),transform 1.6s var(--ease)}
.wx-bg-i.on{opacity:.78;transform:scaleX(-1) scale(1)}
/* a wash in the company's own colour over the backdrop. The generated glow reads clearly only
where its hue is close to the teal the page is built on, so green came through and pink and red
went grey. Screened in, the hue is unmistakable while the backdrop stays quiet. */
.wx-bg-i::after{content:"";position:absolute;inset:0;mix-blend-mode:screen;opacity:0;
transition:opacity 1.1s var(--ease);
background:radial-gradient(62% 58% at 26% 66%,
color-mix(in srgb,var(--c) 34%,transparent) 0%,
color-mix(in srgb,var(--c) 12%,transparent) 52%,
transparent 100%)}
.wx-bg-i.on::after{opacity:1}
/* the veil sits over the words rather than over the whole frame, so the copy keeps its contrast
while the glow is left to read at the edges */
.wx-bg::after{content:"";position:absolute;inset:0;
background:
radial-gradient(66% 58% at 30% 52%,
color-mix(in srgb,var(--teal-2) 86%,transparent) 0%,
color-mix(in srgb,var(--teal-2) 46%,transparent) 60%,
transparent 100%),
linear-gradient(to bottom,
color-mix(in srgb,var(--teal-2) 46%,transparent) 0%,
color-mix(in srgb,var(--teal-2) 14%,transparent) 48%,
color-mix(in srgb,var(--teal-2) 40%,transparent) 100%)}
.wx .wx-in{position:relative;z-index:1}
/* the words stay above the flight path */
.wx-say{position:relative;z-index:3}
.wx-nav{display:flex;justify-content:center;gap:0;width:min(940px,100%);
margin:clamp(20px,3vh,40px) auto 0}
.wx-tab{appearance:none;border:0;background:none;padding:0;cursor:pointer;font:inherit;
display:flex;flex-direction:column;gap:8px;align-items:stretch;flex:1 1 0;min-width:0}
.wx-tab-pre{font-style:normal}
.wx-tab span{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:var(--cream);opacity:.4;transition:opacity .4s var(--ease),color .4s var(--ease)}
.wx-tab i{display:block;height:2px;background:color-mix(in srgb,var(--cream) 16%,transparent);
position:relative;overflow:hidden}
.wx-tab i::after{content:"";position:absolute;inset:0 auto 0 0;width:0;background:var(--c);
transition:width .55s var(--ease)}
.wx-tab:hover span{opacity:.8}
.wx-tab.on span{opacity:1;color:var(--c)}
.wx-tab.on i::after{width:100%}
@media (max-width:860px){
/* the back-to-top button floats over the bottom right corner, and the last of the four rules was
landing underneath it. The whole stack lifts clear instead of the rules being shortened.
The top is given the height of the menu as well: the section is held flush with the top of the
window, so without it the heading sits behind the bar. */
body .wx.sec{padding-top:calc(clamp(26px,5vh,64px) + 52px);
padding-bottom:clamp(60px,8.5vh,88px)}
.wx-grid{grid-template-columns:1fr;grid-template-rows:auto auto;gap:clamp(4px,1vh,12px)}
/* the ring was sized against the viewport while the photograph was sized against its column, so
on a tablet the column grew past the ring and the photograph swallowed the circle whole. Both
are measured the same way now, and the wire is drawn in front of the photograph so the circle
always reads as a circle. */
.wx-ring{grid-column:1;grid-row:1;width:min(84vw,420px);position:relative;z-index:2}
.wx-dots{width:min(84vw,420px)}
.wx-dot{width:15px;height:15px}
.wx-dot.on{width:19px;height:19px}
/* the photograph stands inside the ring, a share of the ring rather than of the page */
.wx-shot{grid-column:1;grid-row:1;align-self:center;justify-self:center;z-index:1;
width:min(44vw,220px);aspect-ratio:3/4;max-height:none}
.wx-say{grid-column:1;grid-row:2;width:min(100%,420px);align-self:start}
.wx-lock{width:clamp(176px,52vw,214px);padding:12px 14px}
.wx-lock b{font-size:clamp(21px,5.6vw,27px)}
.wx-tag{font-size:clamp(21px,5.8vw,28px);max-width:16ch}
.wx-desc{font-size:14.5px;max-width:28ch}
.wx-nav{gap:0;width:min(100%,264px)}
.wx-tab span{font-size:9px;letter-spacing:.05em}
/* dropping the shared word keeps the four labels clear of the floating back-to-top button */
.wx-tab-pre{display:none}
}
@media (prefers-reduced-motion:reduce){
.wx-co,.wx-ring-arc,.wx-shot img{transition:none}
}
/* ================= v7.89 THE MARK IN PLACE OF THE RING =========================================
The section carries the dial's own class names, so the rail, the glass plate and its shine all
behave exactly as they do on the home page. What is new is the left: the mark where the ring was,
turning a quarter per company, with the person cut into the lit arm rather than standing in front
of it. That cut is the construction the first design used, and it is the one that reads. */
.mkw .wx-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
grid-template-rows:auto auto;align-items:center;row-gap:clamp(14px,2.4vh,28px);
column-gap:clamp(24px,4vw,72px)}
.mkw .mkw-stage{grid-column:1;grid-row:1 / span 2}
/* the writing and the prints are one block, centred in their own half and held in a little, so the
column has air on both sides instead of running to the edge */
/* the soft edge of the rail is a fade, not a frame: content sitting at rest has to start inside the
solid middle of it, or the first letter of every heading is caught by the fade and the block
stops lining up with itself. The padding matches the softening. */
.mkw .wx-say{grid-column:2;grid-row:1;width:min(100%,540px);justify-self:center;align-self:end;
text-align:left;place-items:start;padding-inline:9%}
.mkw .wx-co{align-items:flex-start}
/* both lines set to the block, not to a measure of their own: capped at sixteen and thirty
characters they were setting far narrower than the column they sit in, which is what made the
writing look cramped against the mark beside it */
.mkw .wx-tag{font-size:clamp(21px,2.1vw,32px);max-width:none;width:100%}
.mkw .wx-desc{font-size:clamp(14px,1.05vw,17px);max-width:none;width:100%}
.mkw .wx-lock{width:clamp(176px,17vw,224px)}
.mkw .wx-lock b{font-size:clamp(22px,2.2vw,31px)}
.mkw-stage{position:relative;justify-self:center;align-self:center;
width:min(100%,clamp(280px,37vw,500px));aspect-ratio:1}
.mkw-mark{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* the turn: one transform on one element, nothing else moves, which is what keeps it cheap */
.mkw-spin{transform:rotate(calc(var(--k,0) * 90deg));transform-origin:50% 50%}
.mkw-arm{fill:color-mix(in srgb,var(--cream) 15%,transparent)}
/* each company's slot, hidden until its turn comes round */
.mkw-slot{opacity:0;visibility:hidden;transition:opacity .55s var(--ease),visibility .55s}
.mkw-slot.on{opacity:1;visibility:visible}
.mkw-lit{fill:var(--c,#C8A46A)}
/* the lit arm keeps the place the plain arm holds. Lifting it, as an earlier pass did, left the
colour sitting off the mark by a couple of degrees and the shape stopped reading as one star. */
.mkw-pull{transform:none}
/* the photographs below the writing, clustered the way prints fall on a desk */
/* the prints share the writing's column and its width, so the two read as one block */
.mkw-prints{grid-column:2;grid-row:2;position:relative;display:grid;justify-self:center;
width:min(100%,540px);height:clamp(150px,21vh,215px);overflow:hidden;padding-inline:9%;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.mkw-set{grid-area:1/1;position:relative;opacity:0;visibility:hidden;
transition:opacity .55s var(--ease),visibility .55s}
.mkw-set.on{opacity:1;visibility:visible}
.wx--rail .mkw-set{opacity:1;visibility:visible;transition:none}
.mkw-print{position:absolute;margin:0;width:clamp(112px,14vw,172px);aspect-ratio:4/3;
border:7px solid var(--cream);background:var(--cream);box-shadow:0 20px 42px rgba(0,0,0,.45)}
.mkw-print img{width:100%;height:100%;object-fit:cover;display:block}
.mkw-print.p1{left:0;top:10%;rotate:-6deg;z-index:1}
.mkw-print.p2{left:26%;top:0;rotate:2deg;z-index:3}
.mkw-print.p3{left:52%;top:12%;rotate:5deg;z-index:2}
@media (max-width:860px){
/* on a phone the mark is read as a badge above the writing, not as the main event, so it comes
down in size and the stack is given room to breathe under it */
/* on a phone the whole company has to sit on one screen: mark, words, button and the prints under
them. The mark reads as a badge above the writing rather than the main event, and every part is
measured against the height rather than the width. */
.mkw .wx-grid{grid-template-columns:1fr;grid-template-rows:auto auto auto;
row-gap:clamp(14px,2.4vh,24px)}
.mkw .mkw-stage{grid-column:1;grid-row:1;width:min(52vw,min(220px,26vh))}
/* the phone's softening is narrower than the desktop one, so the padding that keeps content clear
of it can be narrower too, and the writing gets the width back */
.mkw .wx-say{grid-column:1;grid-row:2;justify-self:center;text-align:center;place-items:center;
width:min(100%,440px);padding-inline:5%}
.mkw-prints{padding-inline:5%}
.mkw .wx-co{align-items:center}
/* the line under the headline is given the same width the headline has, so it sets to the block
rather than to a measure of its own and stops breaking two words early */
.mkw .wx-tag{max-width:none;width:100%}
.mkw .wx-desc{max-width:none;width:100%;font-size:clamp(12.5px,3.5vw,15px);text-wrap:balance}
.mkw-prints{grid-column:1;grid-row:3;justify-self:center;width:min(100%,420px);
height:clamp(96px,13.5vh,128px)}
.mkw-print{width:clamp(86px,25vw,116px);border-width:4px}
}
@media (prefers-reduced-motion:reduce){ .mkw-slot,.mkw-pull,.mkw-set,.mkw-print{transition:none} }