/* ===== 01 · v618-image-tokens ===== */
/* Each embedded plate was written into the file once per rule that used it,
so five images were carried twice over. They are declared once here and
referenced by token; the rendered result is byte-identical. */
:root{
--img-hero-home:url("../img/plate-hero-home.webp");
--img-why-plate:url("../img/plate-why-plate.webp");
--img-hero-contact:url("../img/plate-hero-contact.webp");
--img-hero-team:url("../img/plate-hero-team.webp");
--img-hero-about:url("../img/plate-hero-about.webp");
}
/* ===== 02 ===== */
:root{
--forest:#102420; --mid:#16302A; --deep:#0A1714; --rule-dk:#21372F;
--gold:#CBAB65; --gold-dim:#8E7A48;
--paper:#F4F6F4; --paper-2:#E9EDEA; --lift:#FFFFFF; --rule:#DBE1DD;
--ink:#0F211D; --body-ink:#3A4A45; --muted:#5A6964; --label:#6F6029;
--display:'Century Gothic','Questrial','URW Gothic','Futura','Trebuchet MS',sans-serif;
--body:'Century Gothic','Apple Gothic','Futura','Trebuchet MS',Arial,sans-serif;
--gut:clamp(20px,4.5vw,108px); --maxw:none;
--ease:cubic-bezier(.22,.7,.3,1);
--chrome:0px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--body-ink);background:var(--paper);
font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.dsp{font-family:var(--display);font-weight:700;color:var(--ink);
letter-spacing:-.035em;margin:0;line-height:1.02}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
img{max-width:100%;display:block}
/* ── prototype chrome ── */
.proto{position:sticky;top:0;z-index:300;background:var(--deep);border-bottom:1px solid var(--rule-dk)}
.proto-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);display:flex;
align-items:center;gap:6px;flex-wrap:wrap;min-height:44px}
.proto em{font-family:var(--display);font-style:normal;font-size:9px;font-weight:700;
letter-spacing:.22em;color:var(--gold);margin-right:12px}
.proto button{background:none;border:0;color:#8CA098;font-family:var(--body);font-size:11.5px;
font-weight:700;letter-spacing:.08em;text-transform:uppercase;
padding:6px 10px;cursor:pointer;border-radius:2px}
.proto button:hover{color:#fff;background:var(--mid)}
.proto button[aria-current="true"]{color:var(--forest);background:var(--gold);font-weight:600}
/* ── site header ── */
.hd{position:fixed;top:var(--chrome);left:0;right:0;z-index:200;
transition:background .35s var(--ease),padding .35s var(--ease)}
.hd-in{max-width:var(--maxw);margin:0 auto;padding:24px var(--gut);display:flex;
align-items:center;justify-content:space-between;gap:24px;transition:padding .35s var(--ease)}
.hd.solid{background:rgba(10,23,20,.92);backdrop-filter:blur(14px)}
.hd.solid .hd-in{padding-top:12px;padding-bottom:12px}
.logo{height:56px;width:auto;color:#fff;transition:height .35s var(--ease);display:block;object-fit:contain}
.hd.solid .logo{height:46px}
.lg-k{fill:var(--gold)} .lg-w{fill:currentColor} .lg-cn{fill:currentColor;opacity:.7}
.nav{display:flex;gap:34px;align-items:center}
.nav a{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:rgba(255,255,255,.86);padding-bottom:4px;
border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav a:hover,.nav a.here{color:#fff;border-bottom-color:var(--gold)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;width:42px;height:42px}
.burger i{display:block;height:1.5px;background:#fff;margin:6px 0;transition:transform .3s var(--ease),opacity .3s}
.burger.on i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:190;background:var(--deep);display:flex;
flex-direction:column;justify-content:center;padding:0 var(--gut);
opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.sheet.on{opacity:1;pointer-events:auto}
.sheet a{font-family:var(--display);font-weight:700;color:#fff;font-size:clamp(30px,7vw,52px);
padding:14px 0;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--rule-dk)}
.sheet a:last-child{border-bottom:0}
/* ── image slot ── */
.shot{position:relative;overflow:hidden;background:var(--forest)}
.shot .fill{position:absolute;inset:-8% 0;background-size:cover;will-change:transform}
.shot .g1{background:radial-gradient(120% 90% at 72% 18%,#2E5348 0%,#16302A 42%,#0B1A17 100%)}
.shot .g2{background:radial-gradient(110% 100% at 20% 80%,#3A5A4C 0%,#18332C 46%,#0A1714 100%)}
.shot .g3{background:radial-gradient(130% 100% at 85% 70%,#4A5F44 0%,#1B342A 50%,#0B1A17 100%)}
.shot .g4{background:radial-gradient(100% 110% at 40% 20%,#2A4A55 0%,#153029 52%,#0A1714 100%)}
.shot .g5{background:radial-gradient(120% 100% at 60% 50%,#5A4E33 0%,#22352C 48%,#0B1A17 100%)}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;
background-image:url(../img/texture-noise-1.svg)}
.shot .slug{position:absolute;top:16px;left:16px;z-index:5;font-family:var(--display);
font-size:8px;font-weight:700;letter-spacing:.2em;color:rgba(255,255,255,.5);
border:1px solid rgba(255,255,255,.25);padding:5px 8px}
.veil{position:absolute;inset:0;z-index:2;
background:linear-gradient(180deg,rgba(10,23,20,.55) 0%,rgba(10,23,20,.12) 38%,rgba(10,23,20,.88) 100%)}
/* ── orbiting key ── */
.orbit-stage{position:absolute;right:-12vw;top:46%;transform:translateY(-50%);
width:min(68vw,980px);aspect-ratio:1;z-index:3;pointer-events:none}
.orbit.o0{inset:-13%;border:1px solid rgba(203,171,101,.10);border-radius:50%;
animation:spin 68s linear infinite}
.orbit.o0::before{content:"";position:absolute;width:12px;height:12px;border-radius:50%;
border:1px solid rgba(203,171,101,.65);background:var(--deep);top:62%;left:4%}
.orbit{position:absolute;inset:0;border:1px solid rgba(203,171,101,.17);border-radius:50%;
animation:spin 52s linear infinite}
.orbit::before{content:"";position:absolute;width:11px;height:11px;border-radius:50%;
border:1px solid var(--gold);background:var(--deep);top:13%;left:14%}
.orbit.o2{inset:12%;border-color:rgba(244,246,244,.09);animation-duration:38s;
animation-direction:reverse}
.orbit.o2::before{top:76%;left:7%;width:7px;height:7px}
.orbit.o3{inset:26%;border-color:rgba(203,171,101,.25);animation-duration:29s}
.orbit.o3::before{top:4%;left:57%;width:5px;height:5px;background:var(--gold)}
@keyframes spin{to{transform:rotate(360deg)}}
.keymark{position:absolute;left:46%;top:47%;height:49%;width:auto;
transform:translate(-50%,-50%) rotate(-14deg);color:var(--gold);
filter:drop-shadow(0 18px 44px rgba(0,0,0,.34))}
@media (max-width:900px){
.orbit-stage{right:-30vw;top:34%;width:136vw;opacity:.52}
.keymark{height:40%}
}
/* ── hero ── */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero .shot{position:absolute;inset:0}
.hero-in{position:relative;z-index:4;max-width:var(--maxw);margin:0 auto;width:100%;
padding:0 var(--gut) clamp(124px,17vh,200px)}
.eyebrow{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.24em;
color:var(--gold);margin-bottom:26px}
.hero h1{color:#fff;font-size:clamp(36px,6.65vw,94px);letter-spacing:-.045em;max-width:16ch}
.cycle{display:block;height:1.06em;overflow:hidden;position:relative;margin-top:.06em}
.cycle span{position:absolute;left:0;top:0;width:100%;display:block;white-space:nowrap;color:var(--gold);
font-size:1em;line-height:1.06;letter-spacing:-.045em;
transform:translateY(126%);opacity:0;will-change:transform,opacity;transition:transform .7s var(--ease),opacity .5s}
.cycle span.in{transform:none;opacity:1}
.cycle span.out{transform:translateY(-126%);opacity:0}
.hero .sub{margin-top:28px;max-width:none;white-space:nowrap;font-size:clamp(14px,1.12vw,16px);color:rgba(255,255,255,.70)}
.hero-cta{margin-top:30px;display:flex;gap:34px;align-items:center;flex-wrap:wrap}
.hero-cta .arrowlink{
font-weight:700;
color:rgba(255,255,255,.90);
border-bottom-color:transparent;
padding-bottom:5px;
}
.hero-cta .arrowlink:hover{
color:var(--gold);
border-bottom-color:var(--gold);
}
.hero-cta .arrowlink svg{
width:15px;
height:10px;
flex:0 0 auto;
}
.arrowlink{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:-.01em;
color:#fff;display:inline-flex;align-items:center;gap:10px;padding-bottom:6px;
border-bottom:1px solid rgba(255,255,255,.32);transition:border-color .25s,color .25s}
.arrowlink svg{transition:transform .3s var(--ease)}
.arrowlink:hover{border-bottom-color:var(--gold);color:var(--gold)}
.arrowlink:hover svg{transform:translateX(5px)}
.arrowlink.dark{color:var(--ink);border-bottom-color:var(--rule)}
.arrowlink.dark:hover{color:var(--label);border-bottom-color:var(--label)}
.scrollcue{position:absolute;bottom:26px;right:var(--gut);z-index:5;font-family:var(--display);
font-size:8.5px;font-weight:700;letter-spacing:.22em;color:rgba(255,255,255,.45);
writing-mode:vertical-rl}
/* ── statement ── */
.sec{padding:clamp(72px,12vw,170px) 0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:1020px}
.lbl{font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.26em;
color:var(--label);margin-bottom:34px}
.statement{font-family:var(--display);font-weight:700;color:var(--ink);
font-size:clamp(26px,4.2vw,56px);letter-spacing:-.04em;line-height:1.06;max-width:19ch}
.statement em{font-style:normal;color:var(--gold-dim)}
.stmt-note{margin-top:34px;max-width:46ch;color:var(--muted);font-size:16.5px}
/* ── numbers ── */
.figs{background:var(--forest);color:#fff;position:relative;overflow:hidden}
.figs .wrap{padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(56px,8vw,96px)}
.figrow{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule-dk);
border-top:1px solid var(--rule-dk);border-bottom:1px solid var(--rule-dk)}
.fig{background:var(--forest);padding:36px 30px 40px}
.fig .n{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.6vw,58px);
letter-spacing:-.05em;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.fig .n i{font-style:normal;color:var(--gold);font-size:.5em;vertical-align:.42em;margin-right:.04em}
.fig .n u{text-decoration:none;color:var(--gold);font-size:.44em;margin-left:.06em}
.fig .k{font-size:13px;color:#93A8A0;margin-top:16px;max-width:22ch}
/* ── alternating full-bleed bands ── */
.band{position:relative;min-height:min(86svh,760px);display:flex;align-items:flex-end;overflow:hidden}
.band .shot{position:absolute;inset:0}
.band-in{position:relative;z-index:4;max-width:var(--maxw);margin:0 auto;width:100%;
padding:0 var(--gut) clamp(48px,7vw,88px)}
.band .kicker{font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.28em;
color:var(--gold);margin-bottom:24px}
.band h2{color:#fff;font-size:clamp(25px,3.7vw,50px);letter-spacing:-.04em;max-width:17ch}
.band p{margin-top:22px;max-width:42ch;color:rgba(255,255,255,.74);font-size:16.5px}
.band .arrowlink{margin-top:28px}
/* ── proof strip ── */
.proof{background:var(--paper-2)}
.proof .wrap{padding:clamp(56px,8vw,100px) var(--gut)}
.prooflist{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
border:1px solid var(--rule);margin-top:44px}
.prooflist div{background:var(--paper-2);padding:30px 26px 34px}
.prooflist .k{font-family:var(--display);font-size:8.5px;font-weight:700;letter-spacing:.2em;
color:var(--label);margin-bottom:14px}
.prooflist .v{font-family:var(--display);font-weight:700;font-size:clamp(17px,1.9vw,23px);
color:var(--ink);letter-spacing:-.03em;line-height:1.14}
/* ── people ── */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px);margin-top:56px}
.who .shot{aspect-ratio:4/5;overflow:hidden}
.who .shot .fill{transition:transform .8s var(--ease)}
.who:hover .shot .fill{transform:scale(1.03)}
.who h3{margin-top:22px;font-size:clamp(18px,1.9vw,23px);letter-spacing:-.03em}
.who .role{font-size:14px;color:var(--label);margin-top:5px}
.who .ul{width:0;height:1.6px;background:var(--label);margin-top:14px;transition:width .5s var(--ease)}
.who:hover .ul{width:46px}
/* ── closing ── */
.close{position:relative;min-height:min(72svh,620px);display:flex;align-items:center;overflow:hidden}
.close .shot{position:absolute;inset:0}
.close-in{position:relative;z-index:4;max-width:var(--maxw);margin:0 auto;width:100%;padding:0 var(--gut)}
.close h2{color:#fff;font-size:clamp(30px,5.4vw,72px);letter-spacing:-.045em;max-width:15ch}
/* ── perspectives ── */
.persp{background:var(--paper-2)}
.persp .wrap{padding:clamp(72px,10vw,140px) var(--gut)}
.persp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;
flex-wrap:wrap;margin-bottom:52px}
.persp-head .statement{max-width:14ch}
.editorial{display:grid;grid-template-columns:1.45fr .85fr .85fr;gap:1px;background:var(--rule);
border:1px solid var(--rule)}
.story{background:var(--paper);padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;
min-height:360px;transition:background .45s var(--ease)}
.story.big{min-height:460px}
.story:hover{background:#E2E7E3}
.story .cat{font-family:var(--display);font-size:9px;font-weight:700;letter-spacing:.2em;
color:var(--label)}
.story h3{margin:auto 0 20px;font-size:clamp(21px,2.4vw,34px);letter-spacing:-.035em;
line-height:1.06}
.story:not(.big) h3{font-size:clamp(19px,1.9vw,23px)}
.story p{font-size:14px;color:var(--muted);margin:0}
.story .arrow{margin-top:22px;font-size:19px;color:var(--label);transition:transform .35s var(--ease)}
.story:hover .arrow{transform:translateX(6px)}
/* ── gold closing ── */
.gold-cta{background:var(--gold);color:var(--ink);position:relative;overflow:hidden}
.gold-cta .wrap{min-height:min(70svh,600px);display:flex;flex-direction:column;
justify-content:center;padding-top:80px;padding-bottom:80px;position:relative;z-index:2}
.gold-cta h2{color:var(--ink);font-size:clamp(34px,6.6vw,96px);max-width:13ch}
.gold-cta p{margin-top:30px;max-width:44ch;font-size:17.5px;color:#3E3520}
.gold-ring{position:absolute;right:-140px;top:-60px;width:620px;height:620px;border-radius:50%;
border:1px solid rgba(15,33,29,.20);z-index:1}
.gold-ring::before{content:"";position:absolute;inset:17%;border-radius:50%;
border:1px solid rgba(15,33,29,.18)}
.gold-ring::after{content:"";position:absolute;inset:36%;border-radius:50%;
border:1px solid rgba(15,33,29,.15)}
.arrowlink.ink{color:var(--ink);border-bottom-color:rgba(15,33,29,.34);margin-top:36px}
.arrowlink.ink:hover{color:#4A3E1C;border-bottom-color:var(--ink)}
/* ── footer ── */
.ft{background:var(--deep);color:#8CA098;font-size:14px}
.ft-in{max-width:var(--maxw);margin:0 auto;padding:76px var(--gut) 34px;display:grid;
grid-template-columns:1.7fr 1fr 1fr;gap:48px}
.ft h4{font-family:var(--display);font-size:9px;font-weight:700;letter-spacing:.22em;
color:var(--gold);margin-bottom:18px}
.ft a{display:block;padding:5px 0;color:#8CA098;transition:color .2s}
.ft a:hover{color:#fff}
.ft .ftlogo{height:42px;width:auto;margin-bottom:20px;color:#fff;display:block;object-fit:contain}
.disc{border-top:1px solid var(--rule-dk)}
.disc-in{max-width:var(--maxw);margin:0 auto;padding:26px var(--gut) 50px;font-size:11.5px;
line-height:1.7;color:#63776F}
/* ── reveal ── */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}
.samp{background:#FFF8E6;border:1px solid #E5D5A8;color:#6B5A28;font-size:13px;
padding:14px 18px;margin-top:36px}
.samp b{font-family:var(--display)}
.page{display:none}
.page.on{display:block}
@media (max-width:900px){
.nav{display:none}
.burger{display:block}
.figrow,.prooflist{grid-template-columns:repeat(2,1fr)}
.editorial{grid-template-columns:1fr}
.gold-ring{display:none}
.people{grid-template-columns:1fr}
.ft-in{grid-template-columns:1fr}
.hero{min-height:88svh}
}
@media (max-width:560px){
.figrow,.prooflist{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
.rv{opacity:1;transform:none}
.orbit{animation:none!important}
.cycle span{position:static;transform:none;opacity:1}
.cycle span:not(:first-child){display:none}
.cycle{height:auto}
}
/* ═══════════════════════════════════════════════════════════════
V3 — integrated long-form homepage
Keeps the Design Study typography/theme while adding the
richer platform / architecture / client-experience story.
═══════════════════════════════════════════════════════════════ */
:root{
--index:'Helvetica Neue',Helvetica,Arial,sans-serif;
}
.section-index{
font-family:var(--index);
font-size:10px;
line-height:1;
font-weight:500;
letter-spacing:.19em;
text-transform:uppercase;
color:var(--label);
display:flex;
align-items:center;
gap:14px;
margin-bottom:28px;
}
.section-index .num{
color:var(--gold-dim);
min-width:28px;
}
.section-index.light{color:#9FB1AA}
.section-index.light .num{color:var(--gold)}
.v3-title{
font-family:var(--display);
font-weight:700;
color:var(--ink);
letter-spacing:-.042em;
line-height:.98;
font-size:clamp(34px,5.2vw,74px);
margin:0;
max-width:15ch;
}
.v3-title.light{color:#fff}
.v3-title em{font-style:normal;color:var(--gold-dim)}
.v3-title.light em{color:var(--gold)}
.v3-intro{
font-size:clamp(16px,1.45vw,19px);
line-height:1.65;
color:var(--muted);
max-width:49ch;
margin:0;
}
.v3-intro.light{color:#AFC0BA}
.v3-head{
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(280px,.75fr);
gap:clamp(42px,8vw,130px);
align-items:end;
margin-bottom:clamp(46px,7vw,86px);
}
/* proof facts — factual only, no placeholder AUM */
.fact-strip{background:var(--forest);color:#fff;border-top:1px solid var(--rule-dk);border-bottom:1px solid var(--rule-dk)}
.fact-strip .wrap{padding-top:0;padding-bottom:0}
.fact-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.fact-cell{padding:38px 34px 42px;border-right:1px solid var(--rule-dk);min-height:170px}
.fact-cell:first-child{border-left:1px solid var(--rule-dk)}
.fact-cell .fact-key{
font-family:var(--index);font-size:9px;font-weight:500;letter-spacing:.18em;
text-transform:uppercase;color:var(--gold);margin-bottom:18px
}
.fact-cell .fact-value{
font-family:var(--display);font-weight:700;font-size:clamp(20px,2.2vw,30px);
letter-spacing:-.035em;line-height:1.12;color:#fff
}
.fact-cell .fact-note{font-size:13px;color:#8FA49C;margin-top:10px;line-height:1.45}
/* 01 platform */
.v3-platform{background:var(--paper)}
.service-rows{border-top:1px solid var(--rule)}
.service-row{
position:relative;overflow:hidden;
display:grid;grid-template-columns:72px minmax(240px,.8fr) minmax(320px,1fr) 34px;
gap:clamp(20px,3.3vw,55px);align-items:center;
padding:32px 0;border-bottom:1px solid var(--rule);
transition:padding .42s var(--ease),color .38s var(--ease)
}
.service-row::before{
content:"";position:absolute;inset:0;background:var(--forest);
transform:translateX(-101%);transition:transform .52s var(--ease);z-index:0
}
.service-row>*{position:relative;z-index:1}
.service-row:hover::before{transform:none}
.service-row:hover{padding-left:24px;padding-right:24px;color:#fff}
.service-row .sr-num{
font-family:var(--index);font-size:11px;letter-spacing:.14em;color:var(--gold-dim)
}
.service-row h3{
font-family:var(--display);font-size:clamp(23px,2.6vw,39px);font-weight:700;
color:var(--ink);letter-spacing:-.035em;line-height:1.05;margin:0
}
.service-row p{font-size:14.5px;line-height:1.62;color:var(--muted);margin:0;max-width:58ch}
.service-row .sr-arrow{font-size:24px;color:var(--gold-dim);transition:transform .3s var(--ease)}
.service-row:hover h3,.service-row:hover p{color:#fff}
.service-row:hover p{color:#B7C5C0}
.service-row:hover .sr-arrow{transform:translateX(7px);color:var(--gold)}
/* 02 architecture */
.v3-architecture{background:var(--deep);color:#fff;overflow:hidden}
.v3-architecture::after{
content:"";position:absolute;width:740px;height:740px;border-radius:50%;
border:1px solid rgba(203,171,101,.12);right:-390px;top:120px;pointer-events:none
}
.arch-network{
position:relative;display:grid;grid-template-columns:1fr .9fr 1.2fr;
gap:clamp(24px,4vw,64px);align-items:center;
border-top:1px solid var(--rule-dk);border-bottom:1px solid var(--rule-dk);
padding:56px 2vw;margin-top:10px
}
.arch-network::before{
content:"";position:absolute;left:13%;right:15%;top:50%;height:1px;
background:linear-gradient(90deg,transparent,rgba(203,171,101,.62),rgba(203,171,101,.62),transparent)
}
.arch-card{
position:relative;z-index:2;border:1px solid var(--rule-dk);background:rgba(255,255,255,.02);
min-height:250px;padding:32px;display:flex;flex-direction:column;justify-content:space-between;
transition:transform .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease)
}
.arch-card:hover{transform:translateY(-5px);border-color:rgba(203,171,101,.65);background:rgba(203,171,101,.035)}
.arch-card .ac-label{
font-family:var(--index);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)
}
.arch-card h3{
color:#fff;font-family:var(--display);font-size:clamp(24px,2.5vw,36px);
letter-spacing:-.035em;line-height:1.05;margin:16px 0 18px
}
.arch-card p{font-size:13.5px;color:#A9BAB4;line-height:1.62;margin:0}
.arch-card.essentia{background:var(--gold);border-color:var(--gold);color:var(--ink);min-height:304px}
.arch-card.essentia h3{color:var(--ink)}
.arch-card.essentia p{color:#493D24}
.arch-card.essentia .ac-label{color:#5C4C25}
.bank-stack{position:relative;z-index:2;display:grid;gap:12px}
.bank-pill{
border:1px solid var(--rule-dk);background:var(--deep);padding:22px 24px;
display:flex;justify-content:space-between;align-items:center;
font-family:var(--display);font-size:18px;font-weight:700;color:#fff;
transition:border-color .28s,padding .28s
}
.bank-pill:hover{border-color:var(--gold);padding-left:30px}
.bank-pill small{
font-family:var(--index);font-size:8px;font-weight:500;letter-spacing:.16em;
text-transform:uppercase;color:#7F948C
}
.permission-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule-dk);margin-top:42px}
.permission-box{padding:28px 30px;display:grid;grid-template-columns:140px 1fr;gap:24px}
.permission-box+.permission-box{border-left:1px solid var(--rule-dk)}
.permission-box h4{
color:#fff;font-family:var(--display);font-size:20px;letter-spacing:-.025em;margin:0
}
.permission-box ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:13px;color:#9FB2AB}
.permission-box li::before{content:"—";color:var(--gold);margin-right:10px}
/* 03 fund management */
.v3-funds{background:var(--paper-2)}
.strategy-grid-v3{
display:grid;grid-template-columns:repeat(2,1fr);
border-left:1px solid var(--rule);border-top:1px solid var(--rule)
}
.strategy-v3{
position:relative;overflow:hidden;min-height:350px;padding:34px;
border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
display:flex;flex-direction:column;transition:background .4s var(--ease)
}
.strategy-v3::after{
content:"";position:absolute;width:300px;height:300px;border:1px solid rgba(203,171,101,.3);
border-radius:50%;right:-185px;bottom:-185px;transition:transform .7s var(--ease)
}
.strategy-v3:hover{background:#E3E8E4}
.strategy-v3:hover::after{transform:scale(1.4)}
.strategy-v3 .sv-num{
font-family:var(--index);font-size:10px;letter-spacing:.16em;color:var(--gold-dim);margin-bottom:auto
}
.strategy-v3 h3{
font-family:var(--display);font-weight:700;font-size:clamp(24px,2.8vw,40px);
line-height:1.02;letter-spacing:-.035em;color:var(--ink);margin:38px 0 18px;max-width:17ch
}
.strategy-v3 p{font-size:14px;line-height:1.65;color:var(--muted);margin:0;max-width:54ch;position:relative;z-index:2}
.vcc-note{
margin-top:28px;border:1px solid var(--rule);padding:22px 24px;
display:flex;gap:24px;align-items:flex-start;background:rgba(255,255,255,.35)
}
.vcc-note b{
font-family:var(--index);font-size:9px;letter-spacing:.17em;text-transform:uppercase;
color:var(--label);white-space:nowrap
}
.vcc-note p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.6}
/* 04 client experience */
.v3-reporting{background:var(--forest);color:#fff}
.portal-v3{
border:1px solid var(--rule-dk);background:#0C1C18;padding:18px;
box-shadow:0 36px 88px rgba(0,0,0,.28)
}
.portal-top-v3{
min-height:56px;border-bottom:1px solid var(--rule-dk);display:flex;align-items:center;
justify-content:space-between;gap:20px;padding:0 14px;
font-family:var(--index);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#7F948C
}
.portal-top-v3 strong{color:var(--gold);font-weight:500}
.portal-tabs-v3{display:flex;gap:7px;flex-wrap:wrap}
.portal-tab-v3{border:1px solid var(--rule-dk);padding:7px 10px}
.portal-tab-v3.active{background:#EEF2EF;color:var(--ink)}
.portal-body-v3{display:grid;grid-template-columns:1.2fr .8fr;min-height:500px}
.portfolio-v3{padding:42px 34px;border-right:1px solid var(--rule-dk)}
.portfolio-v3 h3,.portal-side-v3 h3{
font-family:var(--display);font-size:25px;color:#fff;letter-spacing:-.03em;margin:0
}
.portal-sub-v3{
font-family:var(--index);font-size:8px;letter-spacing:.15em;text-transform:uppercase;
color:#778C84;margin-top:8px
}
.alloc-v3{height:350px;position:relative;margin-top:28px}
.alloc-ring{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
border:1px solid rgba(255,255,255,.12);border-radius:50%
}
.alloc-ring.r1{width:318px;height:318px}
.alloc-ring.r2{width:222px;height:222px;border-color:rgba(203,171,101,.25)}
.alloc-ring.r3{width:126px;height:126px;background:rgba(203,171,101,.06)}
.asset-label{
position:absolute;transform:translate(-50%,-50%);
font-family:var(--index);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;
color:#CBD6D2;white-space:nowrap;text-align:center
}
.asset-label::before{
content:"";display:block;width:6px;height:6px;border-radius:50%;background:var(--gold);
margin:0 auto 6px;box-shadow:0 0 0 5px rgba(203,171,101,.07)
}
.asset-label.a1{left:49%;top:5%}.asset-label.a2{left:82%;top:28%}.asset-label.a3{left:80%;top:75%}
.asset-label.a4{left:48%;top:94%}.asset-label.a5{left:17%;top:73%}.asset-label.a6{left:17%;top:28%}
.portal-side-v3{padding:42px 30px}
.cx-feature{padding:21px 0;border-top:1px solid var(--rule-dk)}
.cx-feature:last-child{border-bottom:1px solid var(--rule-dk)}
.cx-feature small{
font-family:var(--index);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)
}
.cx-feature p{font-family:var(--display);font-size:18px;line-height:1.3;color:#DCE4E0;margin:9px 0 0}
.cx-note{font-size:11px;color:#72867E;margin-top:15px}
/* 05 family office */
.v3-family{background:var(--paper);overflow:hidden}
.family-grid-v3{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(45px,8vw,120px);align-items:center}
.family-art{
min-height:600px;position:relative;border-left:1px solid var(--rule);border-right:1px solid var(--rule);
background:linear-gradient(120deg,rgba(203,171,101,.16),transparent 45%),#E7EBE8;overflow:hidden
}
.family-art::before,.family-art::after{
content:"";position:absolute;border:1px solid rgba(15,33,29,.15);border-radius:50%
}
.family-art::before{width:520px;height:520px;left:-180px;top:60px}
.family-art::after{width:310px;height:310px;right:-80px;top:150px}
.family-key{
position:absolute;left:50%;top:47%;transform:translate(-50%,-50%) rotate(-10deg);
height:70%;width:auto;color:rgba(142,122,72,.58)
}
.family-art .generation{
position:absolute;left:30px;bottom:28px;
font-family:var(--display);font-size:clamp(38px,5vw,72px);font-weight:700;
letter-spacing:-.045em;color:rgba(15,33,29,.83)
}
.family-copy-v3 .v3-intro{margin-top:30px}
.family-tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:34px}
.family-tag{
border:1px solid var(--rule);padding:10px 12px;
font-family:var(--index);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--label)
}
/* 06 safeguards */
.v3-safeguards{background:var(--paper-2)}
.guard-list-v3{border-top:1px solid var(--rule)}
.guard-v3{
display:grid;grid-template-columns:58px minmax(210px,.75fr) 1.25fr;
gap:clamp(24px,4vw,70px);padding:28px 0;border-bottom:1px solid var(--rule);align-items:start
}
.guard-v3 .gnum{font-family:var(--index);font-size:10px;letter-spacing:.14em;color:var(--gold-dim);padding-top:6px}
.guard-v3 h3{
font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.03em;color:var(--ink);margin:0
}
.guard-v3 p{font-size:14px;line-height:1.65;color:var(--muted);margin:3px 0 0;max-width:66ch}
/* 07 perspectives */
.v3-perspectives{background:var(--paper)}
.v3-perspectives .persp-head{margin-bottom:46px}
/* 08 CTA */
.v3-cta{background:var(--gold);color:var(--ink);position:relative;overflow:hidden}
.v3-cta .wrap{min-height:min(72svh,650px);display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}
.v3-cta h2{
font-family:var(--display);font-size:clamp(42px,7vw,98px);font-weight:700;
line-height:.94;letter-spacing:-.05em;color:var(--ink);max-width:12ch;margin:0
}
.v3-cta p{font-size:17px;color:#44391F;max-width:45ch;margin-top:30px}
.v3-cta .section-index{color:#5B4D26}
.v3-key-bg{
position:absolute;right:4vw;top:50%;transform:translateY(-50%) rotate(12deg);
height:82%;width:auto;color:rgba(15,33,29,.10);z-index:1
}
@media (max-width:1000px){
.v3-head{grid-template-columns:1fr;gap:28px}
.service-row{grid-template-columns:50px 1fr 32px}
.service-row p{grid-column:2/4;margin-top:-10px}
.arch-network{grid-template-columns:1fr;gap:18px}
.arch-network::before{display:none}
.arch-card,.arch-card.essentia{min-height:220px}
.permission-grid{grid-template-columns:1fr}
.permission-box+.permission-box{border-left:0;border-top:1px solid var(--rule-dk)}
.strategy-grid-v3{grid-template-columns:1fr}
.portal-body-v3{grid-template-columns:1fr}
.portfolio-v3{border-right:0;border-bottom:1px solid var(--rule-dk)}
.family-grid-v3{grid-template-columns:1fr}
.family-art{min-height:460px}
.guard-v3{grid-template-columns:44px 1fr}
.guard-v3 p{grid-column:2/3}
.fact-grid{grid-template-columns:repeat(2,1fr)}
.fact-cell:nth-child(3){border-left:1px solid var(--rule-dk)}
.fact-cell:nth-child(-n+2){border-bottom:1px solid var(--rule-dk)}
}
@media (max-width:600px){
.service-row{grid-template-columns:42px 1fr 26px;gap:15px}
.service-row p{font-size:13.5px}
.permission-box{grid-template-columns:1fr}
.fact-grid{grid-template-columns:1fr}
.fact-cell,.fact-cell:nth-child(3){border-left:1px solid var(--rule-dk);border-bottom:1px solid var(--rule-dk)}
.fact-cell:last-child{border-bottom:0}
.vcc-note{flex-direction:column;gap:8px}
.portal-v3{padding:10px}
.portal-top-v3{align-items:flex-start;flex-direction:column;padding:14px}
.alloc-v3{transform:scale(.84);transform-origin:center top;margin-bottom:-48px}
.family-art{min-height:390px}
.guard-v3{grid-template-columns:34px 1fr}
}
/* ═══ V5.1 CONTENT INTEGRATION OVERRIDES ═══
V5 remains the visual master. These rules only support:
- 3×2 expertise grid
- Team layout with original 3 + 4 arrangement, plus centered final card
- About content using existing V5 components
*/
@media (min-width:1001px){
.v51-expertise.strategy-grid-v3{grid-template-columns:repeat(3,1fr)}
.people.v51-team{grid-template-columns:repeat(12,1fr)}
.people.v51-team .who:nth-child(-n+3){grid-column:span 4}
.people.v51-team .who:nth-child(n+4):nth-child(-n+7){grid-column:span 3}
.people.v51-team .who:nth-child(8){grid-column:5 / span 4}
}
@media (min-width:901px) and (max-width:1000px){
.people.v51-team{grid-template-columns:repeat(2,1fr)}
}
.v51-copy{max-width:64ch}
.v51-copy p{font-size:clamp(16px,1.45vw,19px);line-height:1.72;color:var(--muted)}
.v51-copy p+p{margin-top:18px}
.v51-principles{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--rule);border-top:1px solid var(--rule)}
.v51-principle{padding:32px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);min-height:250px}
.v51-principle .n{font-family:var(--index);font-size:10px;letter-spacing:.16em;color:var(--gold-dim);margin-bottom:42px}
.v51-principle h3{font-size:clamp(20px,2vw,28px);margin-bottom:14px}
.v51-principle p{font-size:14px;color:var(--muted);margin:0}
.v51-two{display:grid;grid-template-columns:1fr 1fr;border-left:1px solid var(--rule);border-top:1px solid var(--rule)}
.v51-two article{padding:38px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.v51-two h3{font-size:clamp(24px,2.8vw,40px);max-width:16ch;margin-bottom:20px}
.v51-two p{font-size:14.5px;color:var(--muted);max-width:58ch}
@media(max-width:900px){
.v51-principles,.v51-two{grid-template-columns:1fr}
}
/* v5.14 — Expertise 2 + 3 composition */
.expertise-23{
margin-top:clamp(42px,6vw,78px);
border-top:1px solid var(--rule);
border-left:1px solid var(--rule);
}
.expertise-top,
.expertise-bottom{
display:grid;
}
.expertise-top{grid-template-columns:repeat(2,1fr)}
.expertise-bottom{grid-template-columns:repeat(3,1fr)}
.expertise-card{
background:var(--paper);
padding:clamp(28px,3.2vw,44px);
min-height:250px;
border-right:1px solid var(--rule);
border-bottom:1px solid var(--rule);
display:flex;
flex-direction:column;
transition:background .28s var(--ease),transform .28s var(--ease);
}
.expertise-card-lg{min-height:285px}
.expertise-card:hover{
background:var(--paper-2);
}
.expertise-card .sv-num{
color:var(--gold-dim);
margin-bottom:auto;
}
.expertise-card h3{
font-size:clamp(22px,2.45vw,34px);
line-height:1.05;
max-width:17ch;
margin:46px 0 16px;
}
.expertise-card-lg h3{
font-size:clamp(24px,2.7vw,38px);
max-width:18ch;
}
.expertise-card p{
margin:0;
max-width:38ch;
color:var(--muted);
font-size:14px;
line-height:1.65;
}
@media(max-width:900px){
.expertise-top,
.expertise-bottom{grid-template-columns:1fr}
.expertise-card,
.expertise-card-lg{min-height:240px}
}
.global-line{
margin-top:28px;
font-family:var(--display);
font-size:11px;
font-weight:700;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--gold-dim);
}
/* ===== 03 · team-redesign ===== */
/* ===== TEAM PAGE REDESIGN V5.24 ===== */
#team .hero .shot .fill{background:
radial-gradient(1200px 480px at 80% 20%, rgba(219,185,108,.12), transparent 55%),
linear-gradient(135deg,#032523 0%, #093836 42%, #062825 100%);
}
#team .hero .veil{background:linear-gradient(180deg,rgba(2,14,13,.24),rgba(2,14,13,.48))}
#team .team-intro{display:block}
#team .team-intro .copy p{max-width:740px}
#team .team-featured-list{
display:grid;
gap:34px;
}
#team .leader-card{
position:relative;
display:grid;
grid-template-columns:50% 50%;
min-height:500px;
background:#F7F3EA;
border:1px solid rgba(15,33,29,.13);
border-radius:28px;
overflow:hidden;
box-shadow:0 20px 52px rgba(10,28,25,.07);
}
/* large gold circular form crossing the centre, matching the approved reference */
#team .leader-card::before{
content:"";
position:absolute;
z-index:0;
width:610px;
height:610px;
border-radius:50%;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:
radial-gradient(circle at 50% 50%,
rgba(215,179,101,.50) 0 53%,
rgba(215,179,101,.30) 53% 72%,
rgba(215,179,101,.10) 72% 78%,
rgba(215,179,101,0) 78% 100%);
pointer-events:none;
}
#team .leader-card::after{
content:"";
position:absolute;
z-index:0;
width:540px;
height:540px;
border-radius:50%;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border:1.5px solid rgba(181,141,61,.88);
pointer-events:none;
}
#team .leader-copy{
position:relative;
z-index:2;
padding:64px 50px 58px 54px;
display:flex;
flex-direction:column;
justify-content:center;
color:#102523;
background:linear-gradient(90deg,rgba(247,243,234,.99) 0%,rgba(247,243,234,.98) 78%,rgba(247,243,234,.80) 100%);
}
#team .leader-name{
font-family:Georgia,'Times New Roman',serif;
font-weight:400;
font-size:clamp(50px,5.4vw,84px);
line-height:.95;
letter-spacing:-.045em;
color:#0B2925;
margin:0 0 20px;
max-width:none;
}
#team .leader-role{
font-family:var(--display);
font-weight:700;
font-size:15px;
line-height:1.3;
letter-spacing:.24em;
text-transform:uppercase;
color:#BE9650;
margin:0 0 30px;
}
#team .leader-bio{
font-family:var(--body);
font-weight:400;
font-size:clamp(17px,1.35vw,20px);
line-height:1.62;
color:#223D38;
max-width:34ch;
margin:0;
}
/* right-side photo field: pale sage area with one large rounded photo frame */
#team .leader-photo{
position:relative;
z-index:1;
min-height:500px;
background:linear-gradient(135deg,#EEF2F0 0%,#E4EAE7 100%);
display:flex;
align-items:center;
justify-content:center;
padding:20px 22px 20px 10px;
}
#team .leader-photo::before,
#team .leader-photo::after{
display:none;
}
#team .leader-placeholder{
position:relative;
z-index:2;
width:94%;
height:92%;
aspect-ratio:auto;
border-radius:24px;
border:1px solid rgba(26,52,47,.15);
background:
linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.06)),
linear-gradient(135deg,#E5EAE7,#D5DDDA);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.30);
}
@media (max-width:900px){
#team .leader-card{
grid-template-columns:1fr;
min-height:0;
}
#team .leader-card::before,
#team .leader-card::after{
left:50%;
top:54%;
}
#team .leader-copy{
padding:42px 28px 34px;
background:#F7F3EA;
}
#team .leader-name{
font-size:clamp(44px,11vw,66px);
}
#team .leader-photo{
min-height:390px;
padding:22px;
}
#team .leader-placeholder{
width:100%;
height:100%;
min-height:340px;
}
}
@media (max-width:640px){
#team .leader-role{
font-size:13px;
letter-spacing:.18em;
}
#team .leader-bio{
font-size:17px;
}
}
#team .subteam-head{
display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:end;margin-bottom:26px
}
#team .subteam-head .statement{max-width:11.5ch;margin:0}
#team .subteam-head .support{
max-width:58ch;color:var(--muted);margin:0
}
#team .team-circle-grid{
display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px
}
#team .team-pill{
background:rgba(245,241,233,.04);border:1px solid rgba(219,185,108,.12);
border-radius:24px;padding:28px 18px 22px;text-align:center;
transition:transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease)
}
#team .team-pill:hover{
transform:translateY(-4px);border-color:rgba(219,185,108,.3);background:rgba(245,241,233,.06)
}
#team .avatar{
width:min(150px,72%);aspect-ratio:1/1;border-radius:50%;margin:0 auto 18px;
background:radial-gradient(circle at 50% 38%, rgba(219,185,108,.12), rgba(219,185,108,.03) 58%, rgba(219,185,108,.02) 100%),
linear-gradient(145deg,#f3eee3,#e8e1d0);
border:1px solid rgba(219,185,108,.22);display:grid;place-items:center;
color:#183330;position:relative
}
#team .pill-name{
font:600 22px/1.12 var(--sans);letter-spacing:-.02em;color:var(--ink);margin:0 0 8px
}
#team .pill-role{
font:400 15px/1.55 var(--serif);color:var(--muted);margin:0 auto;max-width:18ch
}
@media (max-width:1100px){
#team .team-circle-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
#team .team-intro,#team .subteam-head{grid-template-columns:1fr}
#team .leader-card,#team .leader-card.reverse{grid-template-columns:1fr}
#team .leader-photo{min-height:340px}
#team .leader-card .leader-copy{order:2}
#team .leader-card .leader-photo{order:1}
#team .team-circle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
#team .leader-copy{padding:34px 24px 28px}
#team .leader-photo{padding:22px}
#team .leader-photo::before{inset:20px}
#team .team-circle-grid{grid-template-columns:1fr}
#team .pill-name{font-size:20px}
}
/* ===== 04 · team-v530-reference-fix ===== */
/* V5.30 — restore the option-3 circular form and line so they sit visibly ABOVE the base panels */
#team .leader-card{
grid-template-columns:50% 50%;
min-height:500px;
background:
linear-gradient(90deg,#F7F3EA 0 50%, #E9EDEB 50% 100%);
border:1px solid rgba(15,33,29,.13);
border-radius:28px;
overflow:hidden;
box-shadow:0 20px 52px rgba(10,28,25,.07);
}
/* Filled gold form */
#team .leader-card::before{
content:"";
position:absolute;
z-index:1;
width:620px;
height:620px;
border-radius:50%;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:
radial-gradient(circle at 50% 50%,
rgba(215,179,101,.28) 0 54%,
rgba(215,179,101,.16) 54% 71%,
rgba(215,179,101,.05) 71% 77%,
rgba(215,179,101,0) 77% 100%);
pointer-events:none;
}
/* Thin outline */
#team .leader-card::after{
content:"";
position:absolute;
z-index:1;
width:540px;
height:540px;
border-radius:50%;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border:1.6px solid rgba(186,146,67,.95);
pointer-events:none;
}
#team .leader-copy{
position:relative;
z-index:3;
padding:66px 54px 58px;
display:flex;
flex-direction:column;
justify-content:center;
color:#102523;
background:transparent;
}
#team .leader-name{
font-family:Georgia, "Times New Roman", serif;
font-weight:400;
font-size:clamp(52px,5.5vw,86px);
line-height:.95;
letter-spacing:-.05em;
color:#082A25;
margin:0 0 18px;
}
#team .leader-role{
font-family:var(--display);
font-weight:700;
font-size:15px;
line-height:1.3;
letter-spacing:.26em;
text-transform:uppercase;
color:#C59B52;
margin:0 0 28px;
}
#team .leader-bio{
font-family:var(--body);
font-size:clamp(17px,1.4vw,20px);
line-height:1.62;
color:#223D38;
max-width:34ch;
margin:0;
}
#team .leader-photo{
position:relative;
z-index:3;
min-height:500px;
background:transparent;
display:flex;
align-items:center;
justify-content:center;
padding:28px 28px 28px 0;
}
/* Keep only one large rounded photo frame */
#team .leader-placeholder{
position:relative;
width:92%;
height:88%;
border-radius:24px;
border:1px solid rgba(27,53,47,.16);
background:
linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.10)),
linear-gradient(135deg,#E3E8E5 0%, #D5DDDA 100%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
/* subtle right-top gold dot from reference concept */
#team .leader-photo .leader-placeholder::after{
content:"";
position:absolute;
right:-14px;
top:-14px;
width:18px;
height:18px;
border-radius:50%;
background:#DBB96C;
box-shadow:0 0 0 10px rgba(219,185,108,.12);
}
@media (max-width:900px){
#team .leader-card{
grid-template-columns:1fr;
min-height:0;
background:
linear-gradient(180deg,#F7F3EA 0 44%, #E9EDEB 44% 100%);
}
#team .leader-card::before{
left:50%;
top:55%;
width:520px;
height:520px;
}
#team .leader-card::after{
left:50%;
top:55%;
width:440px;
height:440px;
}
#team .leader-copy{
padding:42px 28px 34px;
}
#team .leader-name{
font-size:clamp(44px,11vw,66px);
}
#team .leader-photo{
min-height:390px;
padding:20px;
}
#team .leader-placeholder{
width:100%;
height:100%;
min-height:340px;
}
}
@media (max-width:640px){
#team .leader-role{
font-size:13px;
letter-spacing:.18em;
}
#team .leader-bio{
font-size:17px;
}
}
/* ===== 05 · team-v531-accurate-reference ===== */
/* V5.31 — leadership cards rebuilt to match the approved reference more accurately */
#team .team-featured-list{
display:grid;
gap:38px;
}
/* Overall card is one warm cream surface — not a split panel */
#team .leader-card{
position:relative;
display:grid;
grid-template-columns:48.5% 51.5%;
min-height:530px;
background:#F5F2E9 !important;
border:1px solid #D7D1C3;
border-radius:28px;
overflow:hidden;
box-shadow:0 18px 44px rgba(19,31,29,.06);
}
/* Soft gold filled circular form */
#team .leader-card::before{
content:"";
position:absolute;
z-index:1;
width:600px;
height:600px;
border-radius:50%;
left:56%;
top:50%;
transform:translate(-50%,-50%);
background:rgba(221,207,174,.72);
pointer-events:none;
}
/* Thin gold circular line */
#team .leader-card::after{
content:"";
position:absolute;
z-index:2;
width:610px;
height:610px;
border-radius:50%;
left:52.8%;
top:50%;
transform:translate(-50%,-50%);
border:1.6px solid rgba(194,154,79,.95);
pointer-events:none;
}
#team .leader-copy{
position:relative;
z-index:4;
padding:74px 40px 64px 56px;
display:flex;
flex-direction:column;
justify-content:center;
background:transparent !important;
color:#102523;
}
#team .leader-name{
font-family:Georgia, "Times New Roman", serif;
font-weight:400;
font-size:clamp(56px,5.6vw,90px);
line-height:.92;
letter-spacing:-.055em;
color:#082722;
margin:0 0 24px;
}
#team .leader-role{
font-family:var(--display);
font-weight:700;
font-size:16px;
line-height:1.25;
letter-spacing:.28em;
text-transform:uppercase;
color:#C9A45B;
margin:0 0 34px;
}
#team .leader-bio{
font-family:var(--body);
font-weight:400;
font-size:clamp(18px,1.45vw,21px);
line-height:1.58;
color:#223B37;
max-width:31ch;
margin:0;
}
#team .leader-photo{
position:relative;
z-index:4;
background:transparent !important;
min-height:530px;
display:flex;
align-items:center;
justify-content:flex-end;
padding:24px 24px 24px 0;
}
/* Large rounded photo field aligned right, as shown in reference */
#team .leader-placeholder{
position:relative;
width:92%;
height:86%;
border-radius:24px;
border:1px solid #BCC4C1;
background:linear-gradient(135deg,#E6EBE8 0%, #DDE3E0 100%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);
}
/* simple placeholder icon + caption like the approved comp */
#team .leader-placeholder::before{
content:"";
position:absolute;
left:50%;
top:45%;
width:88px;
height:72px;
transform:translate(-50%,-50%);
background-repeat:no-repeat;
background-size:contain;
background-position:center;
opacity:.58;
background-image:url("data:image/svg+xml;utf8,");
}
#team .leader-placeholder::after{
content:"PHOTO HERE";
position:absolute;
left:50%;
top:60%;
transform:translateX(-50%);
font:500 12px/1.1 var(--display);
letter-spacing:.28em;
color:#8C9995;
white-space:nowrap;
}
/* remove prior gold dot */
#team .leader-photo .leader-placeholder > *{display:none}
@media (max-width:1100px){
#team .leader-card{
grid-template-columns:50% 50%;
min-height:500px;
}
#team .leader-card::before{
width:540px;height:540px;left:57%;
}
#team .leader-card::after{
width:550px;height:550px;left:53.5%;
}
#team .leader-copy{
padding:58px 34px 52px 42px;
}
#team .leader-name{
font-size:clamp(48px,5vw,76px);
}
}
@media (max-width:900px){
#team .leader-card{
grid-template-columns:1fr;
min-height:0;
}
#team .leader-card::before{
width:470px;
height:470px;
left:62%;
top:62%;
}
#team .leader-card::after{
width:480px;
height:480px;
left:54%;
top:61%;
}
#team .leader-copy{
padding:42px 28px 22px;
}
#team .leader-name{
font-size:clamp(44px,10vw,64px);
}
#team .leader-role{
font-size:14px;
letter-spacing:.22em;
margin-bottom:22px;
}
#team .leader-bio{
font-size:18px;
max-width:none;
}
#team .leader-photo{
min-height:360px;
justify-content:center;
padding:0 22px 22px;
}
#team .leader-placeholder{
width:100%;
height:320px;
}
}
@media (max-width:640px){
#team .leader-card{
border-radius:22px;
}
#team .leader-name{
font-size:40px;
}
#team .leader-role{
font-size:13px;
letter-spacing:.18em;
}
#team .leader-bio{
font-size:17px;
}
}
/* ===== 06 · team-v532-locked-master ===== */
/* V5.32 — treat approved mockup as exact visual master */
#team .team-featured-list{
display:grid !important;
gap:42px !important;
}
#team .leader-card{
position:relative !important;
display:grid !important;
grid-template-columns:48.2% 51.8% !important;
min-height:500px !important;
background:#F7F4EC !important;
border:1px solid #D8D2C5 !important;
border-radius:28px !important;
overflow:hidden !important;
box-shadow:0 16px 42px rgba(19,31,29,.05) !important;
}
/* Filled circle segment */
#team .leader-card::before{
content:"" !important;
position:absolute !important;
z-index:1 !important;
width:520px !important;
height:520px !important;
border-radius:50% !important;
left:63.2% !important;
top:57.4% !important;
transform:translate(-50%,-50%) !important;
background:#E8DDC2 !important;
pointer-events:none !important;
}
/* Gold outline arc */
#team .leader-card::after{
content:"" !important;
position:absolute !important;
z-index:2 !important;
width:650px !important;
height:650px !important;
border-radius:50% !important;
left:69.2% !important;
top:50% !important;
transform:translate(-50%,-50%) !important;
border:1.6px solid #C49A4D !important;
pointer-events:none !important;
}
#team .leader-copy{
position:relative !important;
z-index:4 !important;
background:transparent !important;
padding:84px 40px 64px 56px !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
align-items:flex-start !important;
color:#0D2C28 !important;
}
#team .leader-name{
font-family:Georgia, "Times New Roman", serif !important;
font-weight:400 !important;
font-size:clamp(64px,5.4vw,90px) !important;
line-height:.88 !important;
letter-spacing:-.06em !important;
color:#082A25 !important;
margin:0 0 24px !important;
}
#team .leader-role{
font-family:var(--display) !important;
font-weight:600 !important;
font-size:16px !important;
line-height:1.2 !important;
letter-spacing:.30em !important;
text-transform:uppercase !important;
color:#C6A15A !important;
margin:0 0 30px !important;
}
#team .leader-bio{
font-family:var(--body) !important;
font-weight:400 !important;
font-size:clamp(18px,1.35vw,20px) !important;
line-height:1.54 !important;
color:#223B37 !important;
max-width:24ch !important;
margin:0 !important;
}
#team .leader-photo{
position:relative !important;
z-index:4 !important;
background:transparent !important;
min-height:500px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 22px 0 18px !important;
}
#team .leader-photo::before,
#team .leader-photo::after{
display:none !important;
}
#team .leader-placeholder{
position:relative !important;
width:93% !important;
height:94% !important;
border-radius:24px !important;
border:1px solid #BFC7C4 !important;
background:linear-gradient(135deg,#E8ECEA 0%, #DDE3E0 100%) !important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.25) !important;
}
/* Remove prior decorative dot */
#team .leader-photo .leader-placeholder::after{
content:"PHOTO HERE" !important;
position:absolute !important;
left:50% !important;
top:61.5% !important;
transform:translateX(-50%) !important;
font-family:var(--display) !important;
font-weight:500 !important;
font-size:12px !important;
line-height:1 !important;
letter-spacing:.30em !important;
color:#8B9894 !important;
white-space:nowrap !important;
box-shadow:none !important;
width:auto !important;
height:auto !important;
border-radius:0 !important;
background:none !important;
}
#team .leader-placeholder::before{
content:"" !important;
position:absolute !important;
left:50% !important;
top:46.5% !important;
width:86px !important;
height:68px !important;
transform:translate(-50%,-50%) !important;
background-repeat:no-repeat !important;
background-size:contain !important;
background-position:center !important;
opacity:.60 !important;
background-image:url("data:image/svg+xml;utf8,") !important;
}
@media (max-width:1100px){
#team .leader-card{
grid-template-columns:48% 52% !important;
min-height:470px !important;
}
#team .leader-card::before{
width:470px !important;
height:470px !important;
left:63% !important;
top:58% !important;
}
#team .leader-card::after{
width:590px !important;
height:590px !important;
left:68.5% !important;
top:50% !important;
}
#team .leader-copy{
padding:64px 28px 52px 38px !important;
}
#team .leader-name{
font-size:clamp(52px,5vw,76px) !important;
}
#team .leader-role{
font-size:14px !important;
}
#team .leader-bio{
max-width:23ch !important;
}
}
@media (max-width:900px){
#team .leader-card{
grid-template-columns:1fr !important;
min-height:0 !important;
}
#team .leader-copy{
padding:40px 28px 24px !important;
}
#team .leader-name{
font-size:clamp(44px,11vw,64px) !important;
}
#team .leader-role{
font-size:14px !important;
letter-spacing:.22em !important;
margin-bottom:22px !important;
}
#team .leader-bio{
font-size:18px !important;
max-width:none !important;
}
#team .leader-photo{
min-height:360px !important;
padding:0 20px 20px !important;
}
#team .leader-placeholder{
width:100% !important;
height:320px !important;
}
#team .leader-card::before{
width:420px !important;
height:420px !important;
left:63% !important;
top:64% !important;
}
#team .leader-card::after{
width:520px !important;
height:520px !important;
left:60% !important;
top:61% !important;
}
}
/* ===== 07 · team-v533-circle-correction ===== */
/* V5.33 — align circles to the approved master more accurately */
/* Light beige base circle sits lower and slightly more left */
#team .leader-card::before{
content:"" !important;
position:absolute !important;
z-index:1 !important;
width:590px !important;
height:590px !important;
border-radius:50% !important;
left:58.4% !important;
top:61.2% !important;
transform:translate(-50%,-50%) !important;
background:#EFE6D2 !important;
pointer-events:none !important;
}
/* Thin gold outline arc sits more to the left */
#team .leader-card::after{
content:"" !important;
position:absolute !important;
z-index:2 !important;
width:650px !important;
height:650px !important;
border-radius:50% !important;
left:54.6% !important;
top:49.6% !important;
transform:translate(-50%,-50%) !important;
border:1.6px solid #C49A4D !important;
pointer-events:none !important;
}
/* Main gold circle */
#team .leader-photo::before{
content:"" !important;
position:absolute !important;
z-index:3 !important;
width:535px !important;
height:535px !important;
border-radius:50% !important;
left:-9.2% !important;
top:57.2% !important;
transform:translateY(-50%) !important;
background:#E4D7B5 !important;
display:block !important;
pointer-events:none !important;
}
/* Keep photo panel geometry clean above the circles */
#team .leader-photo{
position:relative !important;
z-index:4 !important;
background:transparent !important;
}
/* Preserve the photo box and keep it above decorative circles */
#team .leader-placeholder{
position:relative !important;
z-index:5 !important;
}
/* Mobile fallback */
@media (max-width:900px){
#team .leader-card::before{
width:430px !important;
height:430px !important;
left:58% !important;
top:69% !important;
}
#team .leader-card::after{
width:500px !important;
height:500px !important;
left:56% !important;
top:62% !important;
}
#team .leader-photo::before{
width:390px !important;
height:390px !important;
left:2% !important;
top:64% !important;
}
}
/* ===== 08 · team-v534-three-circle-system ===== */
/* V5.34 — refine to exactly 3 decorative circles:
1) one light beige circle
2) one gold circle
3) one single outline circle
and vary the overlap slightly across the 3 leadership cards */
#team .leader-card{
overflow:hidden !important;
}
/* Remove any ambiguity and define the three-circle system clearly */
#team .leader-card::before{
content:"" !important;
position:absolute !important;
z-index:1 !important;
width:590px !important;
height:590px !important;
border-radius:50% !important;
background:#EFE5CF !important; /* light beige circle */
pointer-events:none !important;
}
#team .leader-card::after{
content:"" !important;
position:absolute !important;
z-index:2 !important;
width:650px !important;
height:650px !important;
border-radius:50% !important;
border:1.6px solid #C49A4D !important; /* outline circle */
background:none !important;
pointer-events:none !important;
}
#team .leader-photo::before{
content:"" !important;
position:absolute !important;
z-index:3 !important;
width:520px !important;
height:520px !important;
border-radius:50% !important;
background:#E2D4AF !important; /* gold circle */
display:block !important;
pointer-events:none !important;
}
#team .leader-photo{
position:relative !important;
z-index:4 !important;
background:transparent !important;
}
#team .leader-placeholder{
position:relative !important;
z-index:5 !important;
}
/* Card 1 — most similar to the approved mockup */
#team .team-featured-list .leader-card:nth-child(1)::before{
left:58.2% !important;
top:61.5% !important;
transform:translate(-50%,-50%) !important;
}
#team .team-featured-list .leader-card:nth-child(1)::after{
left:54.6% !important;
top:49.8% !important;
transform:translate(-50%,-50%) !important;
}
#team .team-featured-list .leader-card:nth-child(1) .leader-photo::before{
left:-8.8% !important;
top:57.0% !important;
transform:translateY(-50%) !important;
}
/* Card 2 — shift composition slightly upward and inward */
#team .team-featured-list .leader-card:nth-child(2)::before{
left:60.2% !important;
top:58.8% !important;
transform:translate(-50%,-50%) !important;
}
#team .team-featured-list .leader-card:nth-child(2)::after{
left:56.4% !important;
top:47.2% !important;
transform:translate(-50%,-50%) !important;
}
#team .team-featured-list .leader-card:nth-child(2) .leader-photo::before{
left:-5.2% !important;
top:53.8% !important;
transform:translateY(-50%) !important;
}
/* Card 3 — shift composition slightly lower with a wider spread */
#team .team-featured-list .leader-card:nth-child(3)::before{
left:56.7% !important;
top:63.4% !important;
transform:translate(-50%,-50%) !important;
}
#team .team-featured-list .leader-card:nth-child(3)::after{
left:52.8% !important;
top:51.8% !important;
transform:translate(-50%,-50%) !important;
}
#team .team-featured-list .leader-card:nth-child(3) .leader-photo::before{
left:-11.0% !important;
top:59.8% !important;
transform:translateY(-50%) !important;
}
/* keep mobile behaviour tidy */
@media (max-width:900px){
#team .leader-card::before{
width:430px !important;
height:430px !important;
}
#team .leader-card::after{
width:500px !important;
height:500px !important;
}
#team .leader-photo::before{
width:390px !important;
height:390px !important;
}
#team .team-featured-list .leader-card:nth-child(1)::before,
#team .team-featured-list .leader-card:nth-child(2)::before,
#team .team-featured-list .leader-card:nth-child(3)::before{
left:58% !important;
top:68% !important;
}
#team .team-featured-list .leader-card:nth-child(1)::after,
#team .team-featured-list .leader-card:nth-child(2)::after,
#team .team-featured-list .leader-card:nth-child(3)::after{
left:55% !important;
top:61% !important;
}
#team .team-featured-list .leader-card:nth-child(1) .leader-photo::before,
#team .team-featured-list .leader-card:nth-child(2) .leader-photo::before,
#team .team-featured-list .leader-card:nth-child(3) .leader-photo::before{
left:2% !important;
top:64% !important;
}
}
/* ===== 09 · team-v535-elegant-overlap ===== */
/* V5.35 — refined 3-circle compositions:
exactly 3 circles per leadership card, but with elegant overlap and
each leader gets a slightly different composition. */
#team .leader-card{
overflow:hidden !important;
}
/* Reset base decorative system */
#team .leader-card::before{
content:"" !important;
position:absolute !important;
z-index:1 !important;
border-radius:50% !important;
background:#EFE5CF !important; /* light beige */
pointer-events:none !important;
}
#team .leader-card::after{
content:"" !important;
position:absolute !important;
z-index:2 !important;
border-radius:50% !important;
border:1.6px solid #C49A4D !important; /* outline */
background:none !important;
pointer-events:none !important;
}
#team .leader-photo{
position:relative !important;
z-index:4 !important;
background:transparent !important;
}
#team .leader-photo::before{
content:"" !important;
position:absolute !important;
z-index:3 !important;
border-radius:50% !important;
background:#E2D4AF !important; /* gold */
display:block !important;
pointer-events:none !important;
}
#team .leader-placeholder{
position:relative !important;
z-index:5 !important;
}
/* -------------------------------------------------
CARD 1 — strongest resemblance to chosen mockup
Outline sweeps in from top-left, beige sits lower,
gold circle is cropped by the photo block.
------------------------------------------------- */
#team .team-featured-list .leader-card:nth-child(1)::before{
width:620px !important;
height:620px !important;
left:60.5% !important;
top:64.5% !important;
transform:translate(-50%,-50%) !important;
}
#team .team-featured-list .leader-card:nth-child(1)::after{
width:770px !important;
height:770px !important;
left:43.5% !important;
top:43% !important;
transform:translate(-50%,-50%) !important;
}
#team .team-featured-list .leader-card:nth-child(1) .leader-photo::before{
width:555px !important;
height:555px !important;
left:-9% !important;
top:59% !important;
transform:translateY(-50%) !important;
}
/* -------------------------------------------------
CARD 2 — slightly more lifted and tighter
Beige higher/right, gold slightly smaller and
raised, outline sits wider for a softer sweep.
------------------------------------------------- */
#team .team-featured-list .leader-card:nth-child(2)::before{
width:560px !important;
height:560px !important;
left:62.2% !important;
top:56.5% !important;
transform:translate(-50%,-50%) !important;
}
#team .team-featured-list .leader-card:nth-child(2)::after{
width:735px !important;
height:735px !important;
left:47.5% !important;
top:38.5% !important;
transform:translate(-50%,-50%) !important;
}
#team .team-featured-list .leader-card:nth-child(2) .leader-photo::before{
width:500px !important;
height:500px !important;
left:-2.5% !important;
top:52.5% !important;
transform:translateY(-50%) !important;
}
/* -------------------------------------------------
CARD 3 — lower and more expansive
Beige dips lower, gold moves further left/down,
outline becomes more open and architectural.
------------------------------------------------- */
#team .team-featured-list .leader-card:nth-child(3)::before{
width:650px !important;
height:650px !important;
left:58.3% !important;
top:67.2% !important;
transform:translate(-50%,-50%) !important;
}
#team .team-featured-list .leader-card:nth-child(3)::after{
width:810px !important;
height:810px !important;
left:40.8% !important;
top:47.8% !important;
transform:translate(-50%,-50%) !important;
}
#team .team-featured-list .leader-card:nth-child(3) .leader-photo::before{
width:575px !important;
height:575px !important;
left:-12.5% !important;
top:63% !important;
transform:translateY(-50%) !important;
}
/* Mobile/tablet: collapse to a tidier common arrangement */
@media (max-width:900px){
#team .leader-card::before{
width:430px !important;
height:430px !important;
left:60% !important;
top:69% !important;
transform:translate(-50%,-50%) !important;
}
#team .leader-card::after{
width:560px !important;
height:560px !important;
left:44% !important;
top:58% !important;
transform:translate(-50%,-50%) !important;
}
#team .leader-photo::before{
width:395px !important;
height:395px !important;
left:2% !important;
top:64% !important;
transform:translateY(-50%) !important;
}
}
/* ===== 10 · team-v536-exact-master-geometry ===== */
/* V5.36 — use the attached mockup as the exact visual master.
Apply one consistent 3-circle composition to the featured leaders. */
#team .leader-card{
position:relative !important;
display:grid !important;
grid-template-columns:48.5% 51.5% !important;
min-height:500px !important;
background:#F7F4EC !important;
border:1px solid #D8D2C5 !important;
border-radius:28px !important;
overflow:hidden !important;
box-shadow:0 16px 42px rgba(19,31,29,.05) !important;
}
/* Circle 1: light beige, larger, lower-left */
#team .leader-card::before{
content:"" !important;
position:absolute !important;
z-index:1 !important;
width:640px !important;
height:640px !important;
border-radius:50% !important;
left:31.5% !important;
top:67% !important;
transform:translate(-50%,-50%) !important;
background:#EFE6D3 !important;
pointer-events:none !important;
}
/* Circle 3: single gold outline arc, wider and more left */
#team .leader-card::after{
content:"" !important;
position:absolute !important;
z-index:3 !important;
width:930px !important;
height:930px !important;
border-radius:50% !important;
left:19% !important;
top:49.5% !important;
transform:translate(-50%,-50%) !important;
border:1.6px solid #C49A4D !important;
background:none !important;
pointer-events:none !important;
}
#team .leader-photo{
position:relative !important;
z-index:4 !important;
min-height:500px !important;
background:transparent !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:18px 22px 18px 0 !important;
}
/* Circle 2: gold, slightly smaller, overlapping the beige and cut by photo block */
#team .leader-photo::before{
content:"" !important;
position:absolute !important;
z-index:2 !important;
width:560px !important;
height:560px !important;
border-radius:50% !important;
left:-7.8% !important;
top:60.5% !important;
transform:translateY(-50%) !important;
background:#E3D5B2 !important;
display:block !important;
pointer-events:none !important;
}
/* Remove any extra dot or other decoration */
#team .leader-photo::after{
display:none !important;
}
#team .leader-copy{
position:relative !important;
z-index:5 !important;
padding:84px 40px 64px 56px !important;
background:transparent !important;
}
#team .leader-placeholder{
position:relative !important;
z-index:6 !important;
width:93.6% !important;
height:93% !important;
border-radius:24px !important;
border:1px solid #BCC4C1 !important;
background:linear-gradient(135deg,#E7EBE9 0%, #DDE2E0 100%) !important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.25) !important;
}
/* keep placeholder icon/text centered */
#team .leader-placeholder::before{
content:"" !important;
position:absolute !important;
left:50% !important;
top:46.5% !important;
width:86px !important;
height:68px !important;
transform:translate(-50%,-50%) !important;
background-repeat:no-repeat !important;
background-size:contain !important;
background-position:center !important;
opacity:.60 !important;
background-image:url("data:image/svg+xml;utf8,") !important;
}
#team .leader-placeholder::after{
content:"PHOTO HERE" !important;
position:absolute !important;
left:50% !important;
top:61.5% !important;
transform:translateX(-50%) !important;
font-family:var(--display) !important;
font-weight:500 !important;
font-size:12px !important;
line-height:1 !important;
letter-spacing:.30em !important;
color:#8B9894 !important;
white-space:nowrap !important;
background:none !important;
box-shadow:none !important;
}
/* Apply the same exact master geometry to all 3 featured leaders */
#team .team-featured-list .leader-card:nth-child(1)::before,
#team .team-featured-list .leader-card:nth-child(2)::before,
#team .team-featured-list .leader-card:nth-child(3)::before{
width:640px !important; height:640px !important; left:31.5% !important; top:67% !important;
}
#team .team-featured-list .leader-card:nth-child(1)::after,
#team .team-featured-list .leader-card:nth-child(2)::after,
#team .team-featured-list .leader-card:nth-child(3)::after{
width:930px !important; height:930px !important; left:19% !important; top:49.5% !important;
}
#team .team-featured-list .leader-card:nth-child(1) .leader-photo::before,
#team .team-featured-list .leader-card:nth-child(2) .leader-photo::before,
#team .team-featured-list .leader-card:nth-child(3) .leader-photo::before{
width:560px !important; height:560px !important; left:-7.8% !important; top:60.5% !important;
}
@media (max-width:1100px){
#team .leader-card{
min-height:470px !important;
}
#team .leader-card::before{
width:560px !important; height:560px !important; left:31% !important; top:68% !important;
}
#team .leader-card::after{
width:820px !important; height:820px !important; left:18% !important; top:50% !important;
}
#team .leader-photo::before{
width:490px !important; height:490px !important; left:-8% !important; top:61% !important;
}
}
@media (max-width:900px){
#team .leader-card{
grid-template-columns:1fr !important;
min-height:0 !important;
}
#team .leader-copy{
padding:40px 28px 24px !important;
}
#team .leader-photo{
min-height:360px !important;
padding:0 20px 20px !important;
}
#team .leader-placeholder{
width:100% !important;
height:320px !important;
}
#team .leader-card::before{
width:430px !important; height:430px !important; left:36% !important; top:77% !important;
}
#team .leader-card::after{
width:620px !important; height:620px !important; left:18% !important; top:61% !important;
}
#team .leader-photo::before{
width:400px !important; height:400px !important; left:-2% !important; top:66% !important;
}
}
/* ===== 11 · team-v537-featured-four-varied-circles ===== */
/* V5.37 — Lisha joins the featured leadership sequence.
Each featured profile gets its own elegant three-circle placement. */
/* Keep the exact 3-circle system but vary the geometry per person */
#team .team-featured-list .leader-card:nth-child(1)::before{
width:640px !important;
height:640px !important;
left:31.5% !important;
top:67% !important;
}
#team .team-featured-list .leader-card:nth-child(1)::after{
width:930px !important;
height:930px !important;
left:19% !important;
top:49.5% !important;
}
#team .team-featured-list .leader-card:nth-child(1) .leader-photo::before{
width:560px !important;
height:560px !important;
left:-7.8% !important;
top:60.5% !important;
}
/* Essie — slightly higher, cleaner and more tucked in */
#team .team-featured-list .leader-card:nth-child(2)::before{
width:600px !important;
height:600px !important;
left:34.8% !important;
top:61.8% !important;
}
#team .team-featured-list .leader-card:nth-child(2)::after{
width:900px !important;
height:900px !important;
left:23% !important;
top:45% !important;
}
#team .team-featured-list .leader-card:nth-child(2) .leader-photo::before{
width:525px !important;
height:525px !important;
left:-2.2% !important;
top:55.8% !important;
}
/* Kevin — wider and a little lower for a more architectural feel */
#team .team-featured-list .leader-card:nth-child(3)::before{
width:660px !important;
height:660px !important;
left:29.6% !important;
top:69.2% !important;
}
#team .team-featured-list .leader-card:nth-child(3)::after{
width:960px !important;
height:960px !important;
left:16.4% !important;
top:52.2% !important;
}
#team .team-featured-list .leader-card:nth-child(3) .leader-photo::before{
width:575px !important;
height:575px !important;
left:-10.2% !important;
top:63% !important;
}
/* Lisha — refined middle ground, slightly more centered */
#team .team-featured-list .leader-card:nth-child(4)::before{
width:615px !important;
height:615px !important;
left:33% !important;
top:65% !important;
}
#team .team-featured-list .leader-card:nth-child(4)::after{
width:920px !important;
height:920px !important;
left:21% !important;
top:48.2% !important;
}
#team .team-featured-list .leader-card:nth-child(4) .leader-photo::before{
width:545px !important;
height:545px !important;
left:-5.8% !important;
top:59.6% !important;
}
/* Mobile/tablet: keep a unified but still slightly varied feel */
@media (max-width:900px){
#team .team-featured-list .leader-card:nth-child(1)::before{
width:430px !important; height:430px !important; left:36% !important; top:77% !important;
}
#team .team-featured-list .leader-card:nth-child(1)::after{
width:620px !important; height:620px !important; left:18% !important; top:61% !important;
}
#team .team-featured-list .leader-card:nth-child(1) .leader-photo::before{
width:400px !important; height:400px !important; left:-2% !important; top:66% !important;
}
#team .team-featured-list .leader-card:nth-child(2)::before{
width:420px !important; height:420px !important; left:40% !important; top:73% !important;
}
#team .team-featured-list .leader-card:nth-child(2)::after{
width:600px !important; height:600px !important; left:25% !important; top:57% !important;
}
#team .team-featured-list .leader-card:nth-child(2) .leader-photo::before{
width:385px !important; height:385px !important; left:4% !important; top:62% !important;
}
#team .team-featured-list .leader-card:nth-child(3)::before{
width:445px !important; height:445px !important; left:34% !important; top:79% !important;
}
#team .team-featured-list .leader-card:nth-child(3)::after{
width:635px !important; height:635px !important; left:16% !important; top:63% !important;
}
#team .team-featured-list .leader-card:nth-child(3) .leader-photo::before{
width:410px !important; height:410px !important; left:-4% !important; top:68% !important;
}
#team .team-featured-list .leader-card:nth-child(4)::before{
width:432px !important; height:432px !important; left:38% !important; top:75% !important;
}
#team .team-featured-list .leader-card:nth-child(4)::after{
width:612px !important; height:612px !important; left:22% !important; top:59% !important;
}
#team .team-featured-list .leader-card:nth-child(4) .leader-photo::before{
width:392px !important; height:392px !important; left:1% !important; top:64% !important;
}
}
/* ===== 12 · team-v538-centralise-subteam ===== */
/* V5.38 — centralise remaining team members after moving Lisha up */
#team .team-circle-grid{
grid-template-columns:repeat(4, minmax(220px, 240px)) !important;
justify-content:center !important;
gap:24px !important;
max-width:none !important;
}
#team .team-pill{
width:100% !important;
}
@media (max-width:1100px){
#team .team-circle-grid{
grid-template-columns:repeat(2, minmax(220px, 240px)) !important;
justify-content:center !important;
}
}
@media (max-width:640px){
#team .team-circle-grid{
grid-template-columns:minmax(0, 1fr) !important;
justify-content:stretch !important;
}
}
/* ===== 13 · team-v539-leader-name-font-theme-match ===== */
/* V5.39 — make featured leader names match the site theme more closely */
#team .leader-name{
font-family:var(--display) !important;
font-weight:700 !important;
letter-spacing:-0.035em !important;
line-height:.92 !important;
color:#0A2B26 !important;
font-size:clamp(44px,4.8vw,72px) !important;
}
@media (max-width:900px){
#team .leader-name{
font-size:clamp(34px,8.8vw,52px) !important;
line-height:.95 !important;
}
}
/* ===== 14 · team-v540-leader-name-elegant-refine ===== */
/* V5.40 — refine featured leader names to a more elegant type/colour treatment */
#team .leader-name{
font-family:"Iowan Old Style","Palatino Linotype","Book Antiqua","Baskerville","Times New Roman",serif !important;
font-weight:500 !important;
font-style:normal !important;
letter-spacing:-0.028em !important;
line-height:0.93 !important;
color:#143730 !important;
font-size:clamp(50px,5vw,78px) !important;
text-rendering:optimizeLegibility !important;
-webkit-font-smoothing:antialiased !important;
margin:0 0 26px !important;
}
#team .leader-role{
color:#BE9A58 !important;
}
@media (max-width:900px){
#team .leader-name{
font-size:clamp(36px,8.6vw,56px) !important;
line-height:0.95 !important;
}
}
/* ===== 15 · v542-home-about-team-refinements ===== */
/* HOME PAGE — fill the small orbiting dots with gold instead of dark fill */
.orbit.o0::before{
background:var(--gold) !important;
border:1px solid rgba(203,171,101,.75) !important;
}
.orbit::before{
background:var(--gold) !important;
border:1px solid var(--gold) !important;
}
.orbit.o2::before{
background:var(--gold) !important;
border:1px solid var(--gold) !important;
}
.orbit.o3::before{
background:var(--gold) !important;
border:1px solid var(--gold) !important;
}
/* ABOUT PAGE — ensure the boxed slug above section 02 is removed cleanly */
.shot .slug{
display:none !important;
}
/* TEAM PAGE — apply Option B / Modern Luxury for featured names */
#team .leader-name{
font-family:"Avenir Next","Segoe UI","Helvetica Neue",Arial,sans-serif !important;
font-weight:600 !important;
font-style:normal !important;
letter-spacing:-0.045em !important;
line-height:.92 !important;
color:#12352f !important;
font-size:clamp(46px,4.6vw,72px) !important;
text-rendering:optimizeLegibility !important;
-webkit-font-smoothing:antialiased !important;
}
#team .leader-role{
color:#B8924D !important;
letter-spacing:.24em !important;
}
@media (max-width:900px){
#team .leader-name{
font-size:clamp(34px,8.2vw,52px) !important;
line-height:.95 !important;
}
}
/* ===== 16 · about-v543-content-update ===== */
.pillars-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
border-top:1px solid var(--rule);
border-left:1px solid var(--rule);
margin-top:48px;
}
.pillars-grid .v51-principle{
padding:34px 30px 38px;
border-right:1px solid var(--rule);
border-bottom:1px solid var(--rule);
min-height:270px;
}
.pillars-grid .v51-principle .n{
margin-bottom:54px;
}
.pillars-grid .v51-principle h3{
font-size:clamp(21px,2vw,29px);
line-height:1.08;
margin-bottom:14px;
}
.pillars-grid .v51-principle p{
color:var(--muted);
font-size:14px;
line-height:1.65;
max-width:34ch;
}
.why-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:0;
border-top:1px solid var(--rule);
border-left:1px solid var(--rule);
margin-top:46px;
}
.why-card{
padding:34px 34px 38px;
min-height:210px;
border-right:1px solid var(--rule);
border-bottom:1px solid var(--rule);
}
.why-card h3{
font-size:clamp(21px,2vw,30px);
line-height:1.08;
margin:0 0 14px;
}
.why-card p{
margin:0;
color:var(--muted);
font-size:14px;
line-height:1.65;
max-width:46ch;
}
.how-we-work{
background:var(--deep);
color:#fff;
}
.how-we-work .section-index,
.how-we-work .v3-title{color:#fff}
.how-we-work .v3-title em{color:var(--gold)}
.how-we-work .v3-intro{color:#9fb0aa}
.process-chart{
position:relative;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
margin-top:64px;
}
.process-chart::before{
content:"";
position:absolute;
top:58px;
left:9%;
right:9%;
height:1px;
background:rgba(219,185,108,.42);
}
.process-step{
position:relative;
padding-top:0;
}
.process-num{
font-family:var(--index);
font-size:10px;
letter-spacing:.18em;
color:var(--gold);
margin-bottom:28px;
}
.process-node{
width:15px;
height:15px;
border-radius:50%;
background:var(--gold);
box-shadow:0 0 0 8px rgba(219,185,108,.10);
margin-bottom:36px;
position:relative;
z-index:2;
}
.process-step h3{
color:#fff;
font-size:clamp(24px,2.3vw,34px);
margin:0 0 14px;
}
.process-step p{
color:#a9b7b3;
font-size:14px;
line-height:1.65;
max-width:28ch;
margin:0;
}
@media(max-width:900px){
.pillars-grid{grid-template-columns:1fr 1fr}
.why-grid{grid-template-columns:1fr}
.process-chart{grid-template-columns:1fr 1fr}
.process-chart::before{display:none}
}
@media(max-width:640px){
.pillars-grid,.process-chart{grid-template-columns:1fr}
}
/* ===== 17 · v544-common-preview-updates ===== */
/* Section 03 — center and balance the pillars block */
#about .pillars-grid{
max-width:1180px !important;
margin:48px auto 0 !important;
}
#about .sec .wrap{
position:relative;
}
#about .v3-head{
align-items:end;
}
#about .v3-head + .pillars-grid{
margin-left:auto !important;
margin-right:auto !important;
}
@media (min-width:1100px){
#about .pillars-grid{
width:min(100%,1180px) !important;
}
}
/* ===== 18 · v544-option1-style ===== */
.why-orbit .wrap{overflow:hidden}
.why-orbit-board{
position:relative;
min-height:980px;
margin-top:42px;
}
.why-orbit-board::before,
.why-orbit-board::after{
content:"";
position:absolute;
border-radius:50%;
pointer-events:none;
}
.why-orbit-board::before{
width:680px;height:680px;
left:50%;top:50%;
transform:translate(-50%,-50%);
border:1px solid rgba(190,154,88,.26);
}
.why-orbit-board::after{
width:920px;height:920px;
left:50%;top:50%;
transform:translate(-50%,-50%);
border:1px solid rgba(190,154,88,.18);
}
.why-hub{
position:absolute;
left:50%;top:50%;
width:350px;height:350px;
transform:translate(-50%,-50%);
border-radius:50%;
background:radial-gradient(circle at 30% 30%, #f5f1e8 0%, #eee7d7 42%, #e7dcc3 100%);
box-shadow:0 32px 60px rgba(9,31,28,.08), inset 0 0 0 1px rgba(190,154,88,.24);
display:grid;place-items:center;
text-align:center;
z-index:2;
}
.why-hub-inner{padding:34px}
.hub-kicker{
font:600 12px/1 var(--index);
letter-spacing:.22em;
color:var(--gold-deep);
margin-bottom:16px;
}
.why-hub h3{
margin:0;
font-size:clamp(28px,2.7vw,42px);
line-height:1.04;
}
.orbit-card{
position:absolute;
width:280px;
background:rgba(255,252,247,.86);
backdrop-filter:blur(6px);
border:1px solid rgba(190,154,88,.18);
border-radius:28px;
padding:26px 24px 22px;
box-shadow:0 18px 36px rgba(9,31,28,.06);
}
.orbit-card::before{
content:"";
position:absolute;
width:10px;height:10px;border-radius:50%;
background:var(--gold);
box-shadow:0 0 0 8px rgba(219,185,108,.12);
}
.orbit-card h4{margin:0 0 10px;font-size:22px;line-height:1.08}
.orbit-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.orbit-card.c1{left:50%;top:0;transform:translateX(-50%)} .orbit-card.c1::before{left:50%;bottom:-28px;transform:translateX(-50%)}
.orbit-card.c2{right:8%;top:14%;} .orbit-card.c2::before{left:-26px;top:50%;transform:translateY(-50%)}
.orbit-card.c3{right:0;top:42%;} .orbit-card.c3::before{left:-26px;top:50%;transform:translateY(-50%)}
.orbit-card.c4{right:10%;bottom:10%;} .orbit-card.c4::before{left:-20px;top:20px}
.orbit-card.c5{left:50%;bottom:0;transform:translateX(-50%)} .orbit-card.c5::before{left:50%;top:-28px;transform:translateX(-50%)}
.orbit-card.c6{left:8%;bottom:12%;} .orbit-card.c6::before{right:-22px;top:20px}
.orbit-card.c7{left:0;top:34%;} .orbit-card.c7::before{right:-26px;top:50%;transform:translateY(-50%)}
@media (max-width:1100px){
.why-orbit-board{
min-height:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}
.why-orbit-board::before,.why-orbit-board::after{display:none}
.why-hub, .orbit-card{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:auto}
.why-hub{grid-column:1/-1;height:auto;padding:28px 0;border-radius:34px}
.orbit-card::before{display:none}
}
@media (max-width:700px){
.why-orbit-board{grid-template-columns:1fr}
}
/* ===== 19 · v545-theme-adjustments ===== */
/* 04 — WHY ESSENTIA? use dark green theme */
.why-orbit{
background: radial-gradient(circle at 50% 35%, rgba(20,70,62,.55) 0%, rgba(9,31,28,1) 62%, rgba(7,24,21,1) 100%) !important;
color:#fff !important;
}
.why-orbit .section-index,
.why-orbit .v3-title{
color:#fff !important;
}
.why-orbit .v3-title em{
color:var(--gold) !important;
}
.why-orbit .v3-intro{
color:#a5b6b0 !important;
}
.why-orbit .why-orbit-board::before{
border-color:rgba(219,185,108,.24) !important;
}
.why-orbit .why-orbit-board::after{
border-color:rgba(219,185,108,.16) !important;
}
.why-orbit .why-hub{
background: radial-gradient(circle at 30% 30%, rgba(228,203,145,.24) 0%, rgba(219,185,108,.18) 26%, rgba(219,185,108,.09) 58%, rgba(219,185,108,.04) 100%) !important;
box-shadow: 0 36px 70px rgba(0,0,0,.22), inset 0 0 0 1px rgba(219,185,108,.28) !important;
}
.why-orbit .hub-kicker{
color:#dcc58b !important;
}
.why-orbit .why-hub h3{
color:#fff !important;
}
.why-orbit .orbit-card{
background:rgba(255,255,255,.055) !important;
backdrop-filter:blur(10px) !important;
border:1px solid rgba(219,185,108,.18) !important;
box-shadow:0 18px 36px rgba(0,0,0,.16) !important;
}
.why-orbit .orbit-card h4{
color:#fff !important;
}
.why-orbit .orbit-card p{
color:#b1c0bc !important;
}
/* 05 — HOW WE WORK use lighter theme */
.how-we-work{
background:linear-gradient(180deg, #f6f2ea 0%, #efe7d8 100%) !important;
color:var(--ink) !important;
}
.how-we-work .section-index,
.how-we-work .v3-title{
color:var(--ink) !important;
}
.how-we-work .v3-title em{
color:var(--gold-deep) !important;
}
.how-we-work .v3-intro{
color:var(--muted) !important;
}
.how-we-work .process-chart::before{
background:rgba(190,154,88,.38) !important;
}
.how-we-work .process-num{
color:var(--gold-deep) !important;
}
.how-we-work .process-node{
background:var(--gold) !important;
box-shadow:0 0 0 8px rgba(219,185,108,.15) !important;
}
.how-we-work .process-step h3{
color:var(--ink) !important;
}
.how-we-work .process-step p{
color:var(--muted) !important;
}
/* ===== 20 · v546-official-about ===== */
/* OFFICIAL ABOUT PAGE — Section 03 centered and balanced */
#about .about-pillars-section .wrap{
max-width:1280px;
margin:0 auto;
}
#about .about-pillars-head{
max-width:1180px;
margin:0 auto;
}
#about .about-pillars-head > div:first-child{
width:100%;
}
#about .about-pillars-section .pillars-grid{
width:min(100%,1180px) !important;
max-width:1180px !important;
margin:48px auto 0 !important;
}
/* 04 and 05 are final sections, not preview states */
#about .why-orbit .v3-intro{
max-width:42ch;
}
/* ===== 21 · v547-about-refinements ===== */
/* 03 — FOUNDATIONAL PILLARS: more breathing room, better centering */
#about .about-pillars-section .wrap{
max-width:1320px !important;
}
#about .about-pillars-head{
max-width:1220px !important;
margin:0 auto !important;
}
#about .about-pillars-section .pillars-grid{
width:min(100%,1220px) !important;
max-width:1220px !important;
margin:56px auto 0 !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:26px !important;
border:0 !important;
}
#about .about-pillars-section .pillars-grid .v51-principle{
min-height:300px !important;
padding:38px 34px 36px !important;
border:1px solid rgba(190,154,88,.16) !important;
border-radius:24px !important;
background:rgba(255,255,255,.42) !important;
box-shadow:0 16px 34px rgba(9,31,28,.035) !important;
}
#about .about-pillars-section .pillars-grid .v51-principle .n{
margin-bottom:46px !important;
}
#about .about-pillars-section .pillars-grid .v51-principle h3{
max-width:15ch !important;
margin-bottom:16px !important;
}
#about .about-pillars-section .pillars-grid .v51-principle p{
max-width:32ch !important;
}
@media(max-width:980px){
#about .about-pillars-section .pillars-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:640px){
#about .about-pillars-section .pillars-grid{
grid-template-columns:1fr !important;
}
}
/* 04 — WHY ESSENTIA: remove light/cream centre; use contemporary dark emerald hub */
#about .why-orbit .why-hub{
background:
radial-gradient(circle at 34% 28%, rgba(31,85,74,.92) 0%, rgba(18,57,50,.96) 42%, rgba(10,38,33,1) 100%) !important;
border:1px solid rgba(219,185,108,.30) !important;
box-shadow:
0 30px 70px rgba(0,0,0,.22),
inset 0 0 0 10px rgba(255,255,255,.012) !important;
}
#about .why-orbit .why-hub::before{
content:"";
position:absolute;
inset:18px;
border-radius:50%;
border:1px solid rgba(219,185,108,.20);
pointer-events:none;
}
#about .why-orbit .why-hub-inner{
position:relative;
z-index:2;
}
#about .why-orbit .hub-kicker{
color:#d7bd7a !important;
}
#about .why-orbit .why-hub h3{
color:#f6f1e8 !important;
}
#about .why-orbit .orbit-card{
background:rgba(255,255,255,.045) !important;
border-color:rgba(219,185,108,.16) !important;
}
#about .why-orbit .orbit-card:hover{
background:rgba(255,255,255,.075) !important;
border-color:rgba(219,185,108,.28) !important;
}
/* 05 — HOW WE WORK: richer light-theme process design */
#about .how-we-work{
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 15% 20%, rgba(219,185,108,.10) 0%, rgba(219,185,108,0) 30%),
radial-gradient(circle at 88% 78%, rgba(19,56,49,.06) 0%, rgba(19,56,49,0) 34%),
linear-gradient(180deg,#f8f4ec 0%,#f0e8db 100%) !important;
}
#about .how-we-work::before{
content:"";
position:absolute;
width:520px;height:520px;
border-radius:50%;
border:1px solid rgba(190,154,88,.12);
right:-210px;top:-180px;
}
#about .how-we-work::after{
content:"";
position:absolute;
width:360px;height:360px;
border-radius:50%;
border:1px solid rgba(190,154,88,.10);
right:-90px;top:-70px;
}
#about .how-we-work .wrap{
position:relative;
z-index:2;
}
#about .how-we-work .process-chart{
gap:22px !important;
margin-top:58px !important;
}
#about .how-we-work .process-chart::before{
top:54px !important;
left:7% !important;
right:7% !important;
height:1px !important;
background:linear-gradient(90deg,rgba(190,154,88,.18),rgba(190,154,88,.56),rgba(190,154,88,.18)) !important;
}
#about .how-we-work .process-step{
background:rgba(255,255,255,.52);
border:1px solid rgba(190,154,88,.16);
border-radius:26px;
padding:28px 26px 30px;
box-shadow:0 18px 34px rgba(9,31,28,.045);
min-height:260px;
transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
#about .how-we-work .process-step:hover{
transform:translateY(-5px);
border-color:rgba(190,154,88,.30);
box-shadow:0 24px 44px rgba(9,31,28,.065);
}
#about .how-we-work .process-num{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;height:44px;
border-radius:50%;
margin-bottom:22px !important;
background:#12352f;
color:#f1d79b !important;
letter-spacing:.10em !important;
font-size:10px !important;
box-shadow:0 8px 18px rgba(18,53,47,.16);
}
#about .how-we-work .process-node{
display:none !important;
}
#about .how-we-work .process-step h3{
margin-bottom:12px !important;
font-size:clamp(25px,2.1vw,32px) !important;
}
#about .how-we-work .process-step p{
max-width:30ch !important;
}
@media(max-width:900px){
#about .how-we-work .process-chart{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
#about .how-we-work .process-chart::before{
display:none !important;
}
}
@media(max-width:640px){
#about .how-we-work .process-chart{
grid-template-columns:1fr !important;
}
}
/* ===== 22 · v548-about-fixes ===== */
/* 03 — structurally corrected and centered */
#about .about-pillars-section .wrap{
width:min(100% - 80px, 1280px) !important;
max-width:1280px !important;
margin:0 auto !important;
}
#about .about-pillars-intro{
width:100%;
max-width:1180px;
margin:0 auto;
}
#about .about-pillars-section .pillars-grid{
width:100% !important;
max-width:1180px !important;
margin:64px auto 0 !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:28px !important;
border:0 !important;
}
#about .about-pillars-section .pillars-grid .v51-principle{
width:auto !important;
min-width:0 !important;
min-height:320px !important;
padding:40px 34px 36px !important;
border:1px solid rgba(190,154,88,.16) !important;
border-radius:26px !important;
background:#fbfaf6 !important;
box-shadow:0 16px 36px rgba(9,31,28,.035) !important;
}
#about .about-pillars-section .pillars-grid .v51-principle h3{
max-width:18ch !important;
font-size:clamp(22px,1.8vw,29px) !important;
line-height:1.08 !important;
}
#about .about-pillars-section .pillars-grid .v51-principle p{
max-width:none !important;
font-size:14px !important;
line-height:1.67 !important;
}
@media(max-width:980px){
#about .about-pillars-section .wrap{width:min(100% - 48px,1280px) !important;}
#about .about-pillars-section .pillars-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:640px){
#about .about-pillars-section .wrap{width:min(100% - 32px,1280px) !important;}
#about .about-pillars-section .pillars-grid{grid-template-columns:1fr !important;}
}
/* 04 — flat dark-green section. Remove all light bloom / spotlight effects. */
#about .why-orbit{
background:#0b2b25 !important;
background-image:none !important;
}
#about .why-orbit::before,
#about .why-orbit::after{
display:none !important;
content:none !important;
}
#about .why-orbit .wrap{
background:transparent !important;
}
#about .why-orbit .why-orbit-board{
background:transparent !important;
}
#about .why-orbit .why-hub{
background:#10352e !important;
background-image:none !important;
border:1px solid rgba(219,185,108,.30) !important;
box-shadow:0 24px 54px rgba(0,0,0,.20) !important;
}
#about .why-orbit .why-hub::before{
border-color:rgba(219,185,108,.18) !important;
}
#about .why-orbit .orbit-card{
background:#11362f !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
border:1px solid rgba(219,185,108,.18) !important;
box-shadow:0 16px 34px rgba(0,0,0,.14) !important;
}
#about .why-orbit .orbit-card:hover{
background:#153e36 !important;
}
/* ===== 23 · v549-why-essentia-richer ===== */
/* 04 — richer modern-luxury treatment without the old centre phrase */
#about .why-orbit{
background:
linear-gradient(135deg,#082821 0%,#0d342c 48%,#09261f 100%) !important;
position:relative;
overflow:hidden;
}
#about .why-orbit::before{
content:"" !important;
display:block !important;
position:absolute;
width:620px;height:620px;
border-radius:50%;
border:1px solid rgba(214,175,91,.10);
left:-250px;bottom:-280px;
pointer-events:none;
}
#about .why-orbit::after{
content:"" !important;
display:block !important;
position:absolute;
width:420px;height:420px;
border-radius:50%;
border:1px solid rgba(214,175,91,.08);
right:-160px;top:110px;
pointer-events:none;
}
#about .why-orbit .wrap{
position:relative;
z-index:2;
}
#about .why-orbit .v3-title{
max-width:12ch;
}
#about .why-orbit .v3-intro{
color:#a8bab4 !important;
}
#about .why-orbit .why-orbit-board::before{
border-color:rgba(214,175,91,.28) !important;
}
#about .why-orbit .why-orbit-board::after{
border-color:rgba(214,175,91,.12) !important;
}
/* Stronger, contemporary center */
#about .why-orbit .why-hub{
background:
linear-gradient(145deg,#143f36 0%,#0b2d27 62%,#09251f 100%) !important;
border:1px solid rgba(214,175,91,.34) !important;
box-shadow:
0 28px 58px rgba(0,0,0,.22),
inset 0 0 0 1px rgba(255,255,255,.018) !important;
}
#about .why-orbit .why-hub::before{
inset:20px !important;
border-color:rgba(214,175,91,.16) !important;
}
#about .why-orbit .hub-kicker{
color:#d8ba73 !important;
margin-bottom:22px !important;
}
#about .why-orbit .hub-mark{
font-family:var(--display);
font-size:clamp(34px,3.2vw,48px);
font-weight:700;
letter-spacing:.035em;
color:#f5efe3;
line-height:1;
}
#about .why-orbit .hub-sub{
margin:18px auto 0;
max-width:17ch;
font-family:var(--body);
font-size:14px;
line-height:1.55;
color:#a8bab4;
}
/* Cards: richer variation, still restrained */
#about .why-orbit .orbit-card{
background:linear-gradient(145deg,rgba(22,65,56,.96),rgba(13,47,40,.98)) !important;
border:1px solid rgba(214,175,91,.18) !important;
box-shadow:0 18px 34px rgba(0,0,0,.17) !important;
position:absolute;
overflow:hidden;
}
#about .why-orbit .orbit-card::after{
content:"";
position:absolute;
left:0;top:0;bottom:0;
width:3px;
background:linear-gradient(180deg,#d7b565,#9d7b36);
opacity:.82;
}
#about .why-orbit .orbit-card:nth-of-type(even){
background:linear-gradient(145deg,rgba(18,57,50,.98),rgba(10,39,34,.99)) !important;
}
#about .why-orbit .orbit-card h4{
color:#f7f2e9 !important;
font-weight:650 !important;
}
#about .why-orbit .orbit-card p{
color:#aabbb6 !important;
}
#about .why-orbit .orbit-card:hover{
background:linear-gradient(145deg,#1c5145,#113b33) !important;
border-color:rgba(214,175,91,.36) !important;
transform:translateY(-4px);
}
/* Gold orbit dots with more presence */
#about .why-orbit .orbit-card::before{
background:#d7b565 !important;
box-shadow:0 0 0 7px rgba(215,181,101,.10) !important;
}
/* ===== 24 · v551-dark-editorial-orbit ===== */
/* 04 — Dark editorial luxury orbit, based on the approved visual vibe */
#about .why-editorial-orbit{
position:relative;
overflow:hidden;
background:#061d18 !important;
color:#fff;
padding-top:110px;
padding-bottom:120px;
}
#about .why-editorial-orbit::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(90deg, rgba(255,255,255,.012), transparent 28%, transparent 72%, rgba(255,255,255,.008));
pointer-events:none;
}
#about .why-editorial-orbit .wrap{
position:relative;
z-index:2;
}
#about .why-editorial-head{
display:grid;
grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);
gap:72px;
align-items:end;
}
#about .why-editorial-orbit .section-index{
color:#f4efe4;
}
#about .why-editorial-orbit .section-index .num{
color:#b8954d;
}
#about .why-editorial-title{
margin:0;
max-width:11ch;
font-family:var(--display);
font-weight:700;
font-size:clamp(58px,6.2vw,96px);
line-height:.94;
letter-spacing:-.055em;
color:#f7f4ee;
}
#about .why-editorial-title em{
font-style:normal;
color:#d0aa57;
}
#about .why-editorial-intro{
margin:0 0 10px;
max-width:42ch;
color:#9eada8;
font-size:18px;
line-height:1.55;
}
#about .why-editorial-stage{
position:relative;
min-height:940px;
margin-top:80px;
}
#about .why-ring{
position:absolute;
left:50%;
top:51%;
transform:translate(-50%,-50%);
border-radius:50%;
border:1px solid rgba(208,170,87,.20);
pointer-events:none;
}
#about .why-ring.ring-1{width:430px;height:430px}
#about .why-ring.ring-2{width:700px;height:700px;border-color:rgba(208,170,87,.14)}
#about .why-ring.ring-3{width:960px;height:960px;border-color:rgba(208,170,87,.075)}
#about .why-core{
position:absolute;
left:50%;
top:51%;
transform:translate(-50%,-50%);
width:275px;
height:275px;
border-radius:50%;
background:#0b2a23;
border:1px solid rgba(208,170,87,.35);
display:grid;
place-items:center;
text-align:center;
box-shadow:0 25px 55px rgba(0,0,0,.20);
}
#about .why-core::before{
content:"";
position:absolute;
inset:20px;
border-radius:50%;
border:1px solid rgba(208,170,87,.14);
}
#about .why-core-kicker{
position:absolute;
top:72px;
font:600 10px/1 var(--index);
letter-spacing:.32em;
color:#d0aa57;
}
#about .why-core-mark{
font-family:var(--display);
font-weight:700;
font-size:92px;
line-height:1;
color:#d0aa57;
letter-spacing:-.06em;
transform:translateY(14px);
}
#about .why-reason{
position:absolute;
width:300px;
padding:0;
background:transparent;
border:0;
}
#about .why-reason::before{
content:"";
position:absolute;
width:9px;
height:9px;
border-radius:50%;
background:#d0aa57;
box-shadow:0 0 0 7px rgba(208,170,87,.08);
}
#about .reason-no{
margin-bottom:15px;
font:600 10px/1 var(--index);
letter-spacing:.16em;
color:#b8954d;
}
#about .why-reason h4{
margin:0 0 10px;
color:#f7f4ee;
font-size:25px;
line-height:1.07;
letter-spacing:-.025em;
}
#about .why-reason p{
margin:0;
color:#96a8a2;
font-size:14px;
line-height:1.62;
max-width:31ch;
}
/* deliberate asymmetry: editorial rather than infographic-like */
#about .why-reason.r1{left:50%;top:0;transform:translateX(-50%);text-align:center}
#about .why-reason.r1 p{margin-left:auto;margin-right:auto}
#about .why-reason.r1::before{left:50%;bottom:-31px;transform:translateX(-50%)}
#about .why-reason.r2{right:4%;top:14%}
#about .why-reason.r2::before{left:-30px;top:52%}
#about .why-reason.r3{right:-1%;top:43%}
#about .why-reason.r3::before{left:-30px;top:45%}
#about .why-reason.r4{right:9%;bottom:7%}
#about .why-reason.r4::before{left:-24px;top:22px}
#about .why-reason.r5{left:50%;bottom:-1%;transform:translateX(-50%);text-align:center}
#about .why-reason.r5 p{margin-left:auto;margin-right:auto}
#about .why-reason.r5::before{left:50%;top:-31px;transform:translateX(-50%)}
#about .why-reason.r6{left:6%;bottom:10%}
#about .why-reason.r6::before{right:-26px;top:22px}
#about .why-reason.r7{left:-1%;top:36%}
#about .why-reason.r7::before{right:-30px;top:46%}
@media(max-width:1100px){
#about .why-editorial-head{grid-template-columns:1fr;gap:30px}
#about .why-editorial-intro{max-width:58ch}
#about .why-editorial-stage{
min-height:auto;
margin-top:58px;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:28px;
}
#about .why-ring{display:none}
#about .why-core{
position:relative;
left:auto;top:auto;transform:none;
grid-column:1/-1;
width:100%;height:auto;
min-height:210px;
border-radius:32px;
}
#about .why-core::before{border-radius:22px}
#about .why-core-kicker{position:relative;top:auto;margin-bottom:8px}
#about .why-core-mark{font-size:72px;transform:none}
#about .why-reason{
position:relative !important;
left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;
transform:none !important;
width:auto;
text-align:left !important;
padding:26px 0;
border-top:1px solid rgba(208,170,87,.16);
}
#about .why-reason p{margin:0 !important}
#about .why-reason::before{display:none}
}
@media(max-width:700px){
#about .why-editorial-orbit{padding-top:80px;padding-bottom:90px}
#about .why-editorial-title{font-size:clamp(46px,13vw,70px)}
#about .why-editorial-stage{grid-template-columns:1fr}
}
/* ===== 25 · v552-official-section03-04-refinement ===== */
/* =========================================================
SECTION 03 — FOUNDATIONAL PILLARS
Centered, spacious, balanced 3 × 2 composition
========================================================= */
#about .about-pillars-section{
padding-top:112px !important;
padding-bottom:120px !important;
}
#about .about-pillars-section .wrap{
width:min(100% - 96px, 1320px) !important;
max-width:1320px !important;
margin:0 auto !important;
}
#about .about-pillars-intro{
width:min(100%,1180px) !important;
max-width:1180px !important;
margin:0 auto !important;
}
#about .about-pillars-intro .v3-title{
max-width:11ch !important;
}
#about .about-pillars-section .pillars-grid{
width:min(100%,1180px) !important;
max-width:1180px !important;
margin:72px auto 0 !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
column-gap:32px !important;
row-gap:32px !important;
border:0 !important;
}
#about .about-pillars-section .pillars-grid .v51-principle{
min-width:0 !important;
min-height:330px !important;
padding:42px 36px 38px !important;
border:1px solid rgba(190,154,88,.15) !important;
border-radius:26px !important;
background:#fbfaf6 !important;
box-shadow:0 16px 38px rgba(9,31,28,.035) !important;
}
#about .about-pillars-section .pillars-grid .v51-principle .n{
margin-bottom:48px !important;
}
#about .about-pillars-section .pillars-grid .v51-principle h3{
max-width:17ch !important;
margin-bottom:16px !important;
font-size:clamp(22px,1.85vw,29px) !important;
line-height:1.08 !important;
}
#about .about-pillars-section .pillars-grid .v51-principle p{
max-width:none !important;
font-size:14px !important;
line-height:1.68 !important;
}
@media(max-width:980px){
#about .about-pillars-section .wrap{
width:min(100% - 52px,1320px) !important;
}
#about .about-pillars-section .pillars-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:640px){
#about .about-pillars-section .wrap{
width:min(100% - 32px,1320px) !important;
}
#about .about-pillars-section .pillars-grid{
grid-template-columns:1fr !important;
row-gap:22px !important;
}
}
/* =========================================================
SECTION 04 — WHY ESSENTIA?
Dark editorial orbit, balanced but intentionally irregular
========================================================= */
#about .why-editorial-orbit{
background:#061d18 !important;
background-image:none !important;
}
#about .why-editorial-orbit::before,
#about .why-editorial-orbit::after{
display:none !important;
content:none !important;
}
#about .why-editorial-stage{
position:relative;
min-height:980px !important;
margin-top:82px !important;
}
/* Orbit geometry — thin, quiet, elegant */
#about .why-ring{
left:50% !important;
top:51% !important;
border-color:rgba(208,170,87,.16) !important;
}
#about .why-ring.ring-1{
width:410px !important;
height:410px !important;
border-color:rgba(208,170,87,.19) !important;
}
#about .why-ring.ring-2{
width:690px !important;
height:690px !important;
border-color:rgba(208,170,87,.12) !important;
}
#about .why-ring.ring-3{
width:960px !important;
height:960px !important;
border-color:rgba(208,170,87,.065) !important;
}
/* Centre anchor */
#about .why-core{
width:270px !important;
height:270px !important;
background:#0b2a23 !important;
border:1px solid rgba(208,170,87,.34) !important;
box-shadow:0 24px 50px rgba(0,0,0,.18) !important;
}
#about .why-core::before{
inset:21px !important;
border-color:rgba(208,170,87,.13) !important;
}
#about .why-core-kicker{
position:static !important;
margin:0 0 6px !important;
font:600 11px/1 var(--index) !important;
letter-spacing:.30em !important;
color:#d0aa57 !important;
}
#about .why-core-title{
font-family:var(--display) !important;
font-weight:700 !important;
font-size:clamp(38px,3.7vw,54px) !important;
line-height:.96 !important;
letter-spacing:-.045em !important;
color:#f7f4ee !important;
}
#about .why-core{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
}
/* Reasons — no glass cards, just editorial statements */
#about .why-reason{
width:285px !important;
background:transparent !important;
box-shadow:none !important;
}
#about .why-reason h4{
font-size:24px !important;
}
#about .why-reason p{
max-width:30ch !important;
}
#about .why-reason::before{
width:8px !important;
height:8px !important;
box-shadow:0 0 0 6px rgba(208,170,87,.07) !important;
}
/* Rebalanced orbit:
fuller upper-left, even distribution, 2 reasons intentionally pulled inward */
#about .why-reason.r1{
left:18% !important;
top:5% !important;
transform:none !important;
text-align:left !important;
}
#about .why-reason.r1 p{
margin:0 !important;
}
#about .why-reason.r1::before{
right:-24px !important;
left:auto !important;
top:58% !important;
bottom:auto !important;
transform:none !important;
}
#about .why-reason.r2{
right:7% !important;
top:11% !important;
}
#about .why-reason.r2::before{
left:-27px !important;
top:55% !important;
}
/* pulled closer to center */
#about .why-reason.r3{
right:17% !important;
top:39% !important;
}
#about .why-reason.r3::before{
left:-25px !important;
top:44% !important;
}
#about .why-reason.r4{
right:8% !important;
bottom:8% !important;
}
#about .why-reason.r4::before{
left:-22px !important;
top:24px !important;
}
#about .why-reason.r5{
left:46% !important;
bottom:1% !important;
transform:translateX(-50%) !important;
text-align:center !important;
}
#about .why-reason.r5 p{
margin-left:auto !important;
margin-right:auto !important;
}
#about .why-reason.r5::before{
left:50% !important;
top:-29px !important;
transform:translateX(-50%) !important;
}
/* pulled closer to center */
#about .why-reason.r6{
left:15% !important;
bottom:19% !important;
}
#about .why-reason.r6::before{
right:-24px !important;
top:22px !important;
}
#about .why-reason.r7{
left:3% !important;
top:36% !important;
}
#about .why-reason.r7::before{
right:-27px !important;
top:46% !important;
}
/* Mobile/tablet fallback remains clean and readable */
@media(max-width:1100px){
#about .why-editorial-stage{
min-height:auto !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:28px !important;
}
#about .why-ring{
display:none !important;
}
#about .why-core{
position:relative !important;
left:auto !important;
top:auto !important;
transform:none !important;
grid-column:1/-1 !important;
width:100% !important;
height:auto !important;
min-height:210px !important;
border-radius:32px !important;
}
#about .why-core::before{
border-radius:22px !important;
}
#about .why-reason{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
width:auto !important;
text-align:left !important;
padding:26px 0 !important;
border-top:1px solid rgba(208,170,87,.16) !important;
}
#about .why-reason p{
margin:0 !important;
}
#about .why-reason::before{
display:none !important;
}
}
@media(max-width:700px){
#about .why-editorial-stage{
grid-template-columns:1fr !important;
}
}
/* ===== 26 · v553-section04-orbit-spacing-fix ===== */
/* Section 04 — rebalance seven reasons around the orbit so the negative space is proportionate */
/* 01 — top anchor */
#about .why-reason.r1{
left:42% !important;
top:0% !important;
transform:translateX(-50%) !important;
text-align:center !important;
}
#about .why-reason.r1 p{
margin-left:auto !important;
margin-right:auto !important;
}
#about .why-reason.r1::before{
left:50% !important;
right:auto !important;
top:auto !important;
bottom:-30px !important;
transform:translateX(-50%) !important;
}
/* 02 — upper right */
#about .why-reason.r2{
right:6% !important;
top:11% !important;
}
#about .why-reason.r2::before{
left:-27px !important;
top:54% !important;
}
/* 03 — right middle, intentionally brought slightly inward */
#about .why-reason.r3{
right:10% !important;
top:38% !important;
}
#about .why-reason.r3::before{
left:-25px !important;
top:45% !important;
}
/* 04 — lower right */
#about .why-reason.r4{
right:8% !important;
bottom:10% !important;
}
#about .why-reason.r4::before{
left:-23px !important;
top:23px !important;
}
/* 05 — bottom anchor */
#about .why-reason.r5{
left:45% !important;
bottom:0% !important;
transform:translateX(-50%) !important;
text-align:center !important;
}
#about .why-reason.r5 p{
margin-left:auto !important;
margin-right:auto !important;
}
#about .why-reason.r5::before{
left:50% !important;
top:-29px !important;
transform:translateX(-50%) !important;
}
/* 06 — lower left, slightly inward for controlled asymmetry */
#about .why-reason.r6{
left:10% !important;
bottom:13% !important;
}
#about .why-reason.r6::before{
right:-24px !important;
top:23px !important;
}
/* 07 — upper left, fills the previously empty quadrant */
#about .why-reason.r7{
left:3% !important;
top:19% !important;
}
#about .why-reason.r7::before{
right:-27px !important;
top:47% !important;
}
/* ===== 27 ===== */
.why-opt4{background:#061d18;color:#fff}.opt4-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:78px;align-items:center}.why-opt4 .section-index,.why-opt4 .why-opt-title{color:#fff}.opt4-copy .why-opt-intro{margin-top:28px}.opt4-orbit{position:relative;min-height:700px}.opt4-ring{position:absolute;width:560px;height:560px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(208,170,87,.15)}
.opt4-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:700 32px/1.03 var(--display);text-align:center;color:#d0aa57;letter-spacing:-.03em}
.tag{position:absolute;display:inline-block;padding:10px 0;border-bottom:1px solid rgba(208,170,87,.18);color:#f4f0e7;font:600 17px/1.2 var(--display)}.t1{left:4%;top:13%}.t2{right:2%;top:18%}.t3{right:-2%;top:46%}.t4{right:5%;bottom:12%}.t5{left:41%;bottom:3%}.t6{left:0;bottom:16%;max-width:230px}.t7{left:-2%;top:43%;max-width:230px}
/* ===== 28 · v555-option4-luxury-enhanced ===== */
/* 04 — Luxury editorial split with full reason details */
#about .why-opt4-lux{
position:relative;
overflow:hidden;
background:#071f19;
color:#fff;
padding-top:118px;
padding-bottom:128px;
}
#about .why-opt4-lux::before{
content:"";
position:absolute;
top:0;bottom:0;left:44%;
width:1px;
background:linear-gradient(180deg,transparent,rgba(208,170,87,.16) 18%,rgba(208,170,87,.16) 82%,transparent);
}
#about .why-opt4-lux::after{
content:"";
position:absolute;
width:520px;height:520px;
border-radius:50%;
border:1px solid rgba(208,170,87,.07);
right:-210px;
bottom:-230px;
pointer-events:none;
}
#about .opt4-lux-wrap{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(300px,.78fr) minmax(650px,1.22fr);
gap:72px;
align-items:center;
}
#about .why-opt4-lux .section-index{
color:#f1ede5;
}
#about .why-opt4-lux .section-index .num{
color:#b8964f;
}
#about .why-opt4-lux .why-opt-title{
color:#f7f4ee;
font-size:clamp(55px,5.8vw,86px);
line-height:.94;
letter-spacing:-.055em;
margin:0;
max-width:10ch;
}
#about .why-opt4-lux .why-opt-title em{
font-style:normal;
color:#cfab5f;
}
#about .why-opt4-lux .why-opt-intro{
margin:28px 0 0;
color:#9eafa9;
max-width:38ch;
font-size:17px;
line-height:1.65;
}
#about .opt4-lux-signature{
margin-top:46px;
display:flex;
align-items:center;
gap:14px;
font:600 10px/1 var(--index);
letter-spacing:.18em;
text-transform:uppercase;
color:#c4ab72;
}
#about .opt4-lux-signature .sig-line{
width:54px;
height:1px;
background:#b8964f;
}
/* Orbit field */
#about .opt4-lux-orbit{
position:relative;
min-height:860px;
}
#about .opt4-lux-ring,
#about .opt4-lux-arc{
position:absolute;
border-radius:50%;
pointer-events:none;
}
#about .opt4-lux-ring.ring-main{
width:590px;height:590px;
left:50%;top:50%;
transform:translate(-50%,-50%);
border:1px solid rgba(208,170,87,.18);
}
#about .opt4-lux-ring.ring-inner{
width:350px;height:350px;
left:50%;top:50%;
transform:translate(-50%,-50%);
border:1px solid rgba(208,170,87,.10);
}
#about .opt4-lux-arc.arc-a{
width:760px;height:760px;
left:47%;top:49%;
transform:translate(-50%,-50%);
border:1px solid rgba(208,170,87,.065);
clip-path:inset(0 0 42% 0);
}
#about .opt4-lux-arc.arc-b{
width:470px;height:470px;
left:52%;top:53%;
transform:translate(-50%,-50%);
border:1px solid rgba(208,170,87,.12);
clip-path:inset(48% 0 0 0);
}
#about .opt4-lux-center{
position:absolute;
left:50%;top:50%;
transform:translate(-50%,-50%);
width:190px;height:190px;
border-radius:50%;
border:1px solid rgba(208,170,87,.30);
background:#0b2a23;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
box-shadow:0 24px 46px rgba(0,0,0,.16);
}
#about .opt4-lux-center::before{
content:"";
position:absolute;
inset:16px;
border-radius:50%;
border:1px solid rgba(208,170,87,.10);
}
#about .opt4-lux-center .center-kicker{
position:relative;
z-index:2;
font:600 9px/1 var(--index);
letter-spacing:.30em;
color:#b8964f;
margin-bottom:7px;
}
#about .opt4-lux-center strong{
position:relative;
z-index:2;
color:#f7f4ee;
font:700 27px/.96 var(--display);
letter-spacing:-.04em;
}
/* Full-detail reason panels */
#about .lux-reason{
position:absolute;
width:285px;
padding:18px 20px 18px 21px;
background:#0c2d25;
border:1px solid rgba(208,170,87,.13);
border-radius:18px;
box-shadow:0 16px 34px rgba(0,0,0,.14);
}
#about .lux-reason::after{
content:"";
position:absolute;
left:0;top:18px;bottom:18px;
width:2px;
background:#b8964f;
opacity:.72;
}
#about .lux-no{
display:block;
margin-bottom:10px;
font:600 9px/1 var(--index);
letter-spacing:.16em;
color:#b8964f;
}
#about .lux-reason h4{
margin:0 0 8px;
color:#f7f4ee;
font-size:20px;
line-height:1.08;
letter-spacing:-.025em;
}
#about .lux-reason p{
margin:0;
color:#93a59f;
font-size:12.5px;
line-height:1.58;
}
/* Positioning: deliberately elegant, layered and not too symmetrical */
#about .lr1{left:3%;top:5%}
#about .lr2{right:2%;top:7%}
#about .lr3{right:-1%;top:36%}
#about .lr4{right:4%;bottom:6%}
#about .lr5{left:39%;bottom:0;transform:translateX(-50%)}
#about .lr6{left:1%;bottom:8%}
#about .lr7{left:-4%;top:38%}
/* Pull two reasons slightly inward for visual layering */
#about .lr3{right:8%}
#about .lr6{left:8%}
/* Gold connection dots */
#about .lux-reason::before{
content:"";
position:absolute;
width:7px;height:7px;
border-radius:50%;
background:#c49f54;
box-shadow:0 0 0 5px rgba(196,159,84,.07);
}
#about .lr1::before{right:-22px;bottom:24px}
#about .lr2::before{left:-22px;bottom:26px}
#about .lr3::before{left:-22px;top:52%}
#about .lr4::before{left:-22px;top:20px}
#about .lr5::before{left:50%;top:-22px;transform:translateX(-50%)}
#about .lr6::before{right:-22px;top:20px}
#about .lr7::before{right:-22px;top:50%}
/* Subtle hover */
#about .lux-reason{
transition:transform .32s ease,border-color .32s ease,background .32s ease;
}
#about .lux-reason:hover{
transform:translateY(-4px);
border-color:rgba(208,170,87,.28);
background:#10352c;
}
#about .lr5:hover{
transform:translateX(-50%) translateY(-4px);
}
@media(max-width:1180px){
#about .opt4-lux-wrap{
grid-template-columns:1fr;
gap:48px;
}
#about .why-opt4-lux::before{display:none}
#about .why-opt4-lux .why-opt-intro{max-width:56ch}
#about .opt4-lux-orbit{
min-height:auto;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:22px;
}
#about .opt4-lux-ring,
#about .opt4-lux-arc{display:none}
#about .opt4-lux-center{
position:relative;
left:auto;top:auto;transform:none;
width:100%;height:180px;
border-radius:24px;
grid-column:1/-1;
}
#about .opt4-lux-center::before{border-radius:16px}
#about .lux-reason{
position:relative !important;
left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;
transform:none !important;
width:auto;
min-height:180px;
}
#about .lux-reason::before{display:none}
#about .lr5:hover{transform:translateY(-4px)}
}
@media(max-width:720px){
#about .why-opt4-lux{padding-top:88px;padding-bottom:94px}
#about .opt4-lux-orbit{grid-template-columns:1fr}
#about .why-opt4-lux .why-opt-title{font-size:clamp(46px,12vw,68px)}
}
/* ===== 29 · v556-option4-positioning-cleanup ===== */
/* 04 — requested positioning refinements */
/* Remove the vertical divider line between the editorial copy and orbit */
#about .why-opt4-lux::before{
display:none !important;
content:none !important;
}
/* 01 — move slightly right */
#about .lr1{
left:9% !important;
top:5% !important;
}
/* 03 — move slightly right */
#about .lr3{
right:3% !important;
top:36% !important;
}
/* 06 — move upward so it clears 05 */
#about .lr6{
left:8% !important;
bottom:17% !important;
}
/* 07 — move upward */
#about .lr7{
left:-4% !important;
top:29% !important;
}
/* ===== 30 · v562-targeted-brand-colour-refinement ===== */
/* ==========================================================
V5.62 — TARGETED COLOUR REFINEMENT ONLY
Base: V5.59
Keep all previously approved section colours/designs.
Amend only:
1) Home / About / Team / Contact hero backgrounds
2) Home 04 Family Office key artwork colour treatment
========================================================== */
/* Shared hero foundation:
deep Essentia emerald, cleaner and less muddy/yellow than the prior hero greens. */
#home > .hero:first-of-type .shot,
#about > .hero:first-of-type .shot,
#team > .hero:first-of-type .shot,
#contact > .hero:first-of-type .shot{
background:#071b18 !important;
}
/* HOME — strongest / most cinematic */
#home > .hero:first-of-type .shot .fill{
background:
radial-gradient(58% 76% at 74% 42%,
rgba(203,171,101,.16) 0%,
rgba(203,171,101,.075) 24%,
rgba(203,171,101,0) 58%),
radial-gradient(42% 54% at 24% 72%,
rgba(39,88,76,.33) 0%,
rgba(39,88,76,.13) 34%,
rgba(39,88,76,0) 66%),
linear-gradient(112deg,
#041512 0%,
#08231f 30%,
#0d312a 52%,
#09231f 75%,
#041512 100%) !important;
}
/* ABOUT — calmer, more polished; same family, less dramatic than Home */
#about > .hero:first-of-type .shot .fill{
background:
radial-gradient(48% 70% at 64% 43%,
rgba(203,171,101,.11) 0%,
rgba(203,171,101,.045) 28%,
rgba(203,171,101,0) 60%),
radial-gradient(36% 48% at 28% 70%,
rgba(37,82,71,.28) 0%,
rgba(37,82,71,.11) 34%,
rgba(37,82,71,0) 64%),
linear-gradient(108deg,
#051714 0%,
#09241f 34%,
#0d302a 55%,
#08221e 78%,
#041512 100%) !important;
}
/* TEAM — a touch more green/sage, still firmly within the same brand family */
#team > .hero:first-of-type .shot .fill{
background:
radial-gradient(50% 70% at 76% 34%,
rgba(203,171,101,.105) 0%,
rgba(203,171,101,.04) 27%,
rgba(203,171,101,0) 57%),
radial-gradient(38% 52% at 30% 72%,
rgba(45,94,81,.29) 0%,
rgba(45,94,81,.11) 34%,
rgba(45,94,81,0) 65%),
linear-gradient(112deg,
#051714 0%,
#0a2823 34%,
#10362f 53%,
#09251f 78%,
#041512 100%) !important;
}
/* CONTACT — simplest, darkest, most restrained */
#contact > .hero:first-of-type .shot .fill{
background:
radial-gradient(44% 64% at 68% 44%,
rgba(203,171,101,.085) 0%,
rgba(203,171,101,.03) 28%,
rgba(203,171,101,0) 60%),
linear-gradient(108deg,
#041512 0%,
#08211d 38%,
#0c2c26 56%,
#071e1a 78%,
#041512 100%) !important;
}
/* Shared hero finishing:
keep subtle texture, but no obvious glow / yellow wash. */
#home > .hero:first-of-type .veil,
#about > .hero:first-of-type .veil,
#team > .hero:first-of-type .veil,
#contact > .hero:first-of-type .veil{
background:
linear-gradient(180deg,
rgba(3,12,10,.20) 0%,
rgba(3,12,10,.07) 32%,
rgba(3,12,10,.22) 65%,
rgba(3,12,10,.62) 100%) !important;
}
#home > .hero:first-of-type .shot::after,
#about > .hero:first-of-type .shot::after,
#team > .hero:first-of-type .shot::after,
#contact > .hero:first-of-type .shot::after{
opacity:.11 !important;
}
/* ----------------------------------------------------------
HOME 04 — FAMILY OFFICE / KEY ART
Replace the cool grey/sage block with a warmer Essentia
ivory + emerald + muted-gold composition.
---------------------------------------------------------- */
#home .v3-family{
background:var(--paper) !important;
}
#home .family-art{
background:
radial-gradient(64% 76% at 70% 34%,
rgba(203,171,101,.16) 0%,
rgba(203,171,101,.07) 32%,
rgba(203,171,101,0) 66%),
linear-gradient(135deg,
#f3efe5 0%,
#ece8de 56%,
#e7e2d6 100%) !important;
border-left-color:rgba(15,33,29,.10) !important;
border-right-color:rgba(15,33,29,.10) !important;
}
#home .family-art::before{
border-color:rgba(15,49,42,.14) !important;
}
#home .family-art::after{
border-color:rgba(203,171,101,.30) !important;
}
#home .family-key{
color:#0f302a !important;
opacity:.92;
filter:drop-shadow(0 16px 28px rgba(7,24,20,.10));
}
#home .family-art .generation{
color:#102d27 !important;
}
/* Preserve all other existing dark section styling, especially:
Home 02 Architecture of Independence
About 04 Why Essentia
and all previously approved section-level colour treatments. */
/* ===== 31 · v563-about-section03-alignment ===== */
/* ABOUT 03 — align with the same page gutter used by Sections 01 / 04 / 05 */
#about .about-pillars-section .wrap{
width:100% !important;
max-width:var(--maxw) !important;
margin:0 auto !important;
padding-left:var(--gut) !important;
padding-right:var(--gut) !important;
}
#about .about-pillars-intro{
width:100% !important;
max-width:none !important;
margin:0 !important;
}
#about .about-pillars-section .pillars-grid{
width:100% !important;
max-width:none !important;
margin:72px 0 0 !important;
}
/* Keep the existing responsive 3×2 / 2×3 / 1×6 layout */
@media(max-width:980px){
#about .about-pillars-section .wrap{
width:100% !important;
padding-left:var(--gut) !important;
padding-right:var(--gut) !important;
}
}
@media(max-width:640px){
#about .about-pillars-section .wrap{
width:100% !important;
padding-left:var(--gut) !important;
padding-right:var(--gut) !important;
}
}
/* ===== 32 · v564-about-pillars-right-layout ===== */
/* ABOUT 03 — headline on left, six foundational pillars on right */
#about .about-pillars-section .wrap{
width:100% !important;
max-width:var(--maxw) !important;
margin:0 auto !important;
padding-left:var(--gut) !important;
padding-right:var(--gut) !important;
}
#about .about-pillars-split{
display:grid;
grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);
gap:clamp(56px,7vw,120px);
align-items:start;
}
#about .about-pillars-intro{
position:sticky;
top:120px;
width:100% !important;
max-width:none !important;
margin:0 !important;
}
#about .about-pillars-intro .v3-title{
max-width:10ch !important;
}
#about .about-pillars-section .pillars-grid{
width:100% !important;
max-width:none !important;
margin:0 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:24px !important;
border:0 !important;
}
#about .about-pillars-section .pillars-grid .v51-principle{
min-height:270px !important;
padding:34px 30px 32px !important;
border:1px solid rgba(190,154,88,.14) !important;
border-radius:24px !important;
background:#fbfaf6 !important;
box-shadow:0 14px 30px rgba(9,31,28,.035) !important;
}
#about .about-pillars-section .pillars-grid .v51-principle .n{
margin-bottom:38px !important;
}
#about .about-pillars-section .pillars-grid .v51-principle h3{
max-width:16ch !important;
margin-bottom:14px !important;
font-size:clamp(21px,1.65vw,27px) !important;
line-height:1.08 !important;
}
#about .about-pillars-section .pillars-grid .v51-principle p{
max-width:none !important;
font-size:13.5px !important;
line-height:1.65 !important;
}
@media(max-width:1050px){
#about .about-pillars-split{
grid-template-columns:1fr;
gap:44px;
}
#about .about-pillars-intro{
position:relative;
top:auto;
}
#about .about-pillars-intro .v3-title{
max-width:12ch !important;
}
}
@media(max-width:700px){
#about .about-pillars-section .pillars-grid{
grid-template-columns:1fr !important;
}
}
/* ===== 33 · v566-about-why-dipper-exact-master ===== */
/* ABOUT 04 — approved Big Dipper image reproduced as HTML/CSS/SVG */
#about .about-why-dipper-exact{
position:relative;
width:100%;
overflow:hidden;
background:#041b17;
color:#fff;
}
#about .about-why-dipper-canvas{
position:relative;
width:100%;
height:clamp(820px,56.28vw,941px);
min-height:820px;
max-height:941px;
background:
radial-gradient(54% 74% at 67% 43%,rgba(15,55,47,.28),rgba(15,55,47,0) 66%),
radial-gradient(34% 52% at 12% 82%,rgba(34,72,61,.25),rgba(34,72,61,0) 72%),
linear-gradient(110deg,#041814 0%,#061f1a 45%,#031813 100%);
}
#about .about-why-dipper-canvas::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.10;
background-image:url(../img/texture-noise-2.svg);
}
/* Left editorial block — matched to approved image */
#about .about-why-left{
position:absolute;
z-index:5;
left:4.85%;
top:11.9%;
width:27.3%;
}
#about .about-why-kicker{
display:flex;
align-items:center;
gap:17px;
margin-bottom:45px;
color:#e6e8e3;
font:600 11px/1 var(--index);
letter-spacing:.19em;
text-transform:uppercase;
white-space:nowrap;
}
#about .about-why-kicker span{color:#d4ac5c}
#about .about-why-kicker i{display:block;width:36px;height:1px;background:#c99e4b}
#about .about-why-kicker b{font:inherit;color:#f1f1ec}
#about .about-why-left h2{
margin:0;
max-width:none;
color:#f6f5ef;
font-family:Georgia,'Times New Roman',serif;
font-size:clamp(62px,5.15vw,86px);
font-weight:400;
line-height:.88;
letter-spacing:-.055em;
}
#about .about-why-left h2 em{
display:block;
margin-top:8px;
color:#d5ae64;
font-style:normal;
font-weight:400;
}
#about .about-why-left p{
margin:29px 0 0;
max-width:31ch;
color:#adb7b3;
font-size:clamp(14px,1.05vw,17px);
line-height:1.68;
}
#about .about-why-accent{
display:block;
width:45px;
height:1px;
margin-top:27px;
background:#caa04f;
}
/* SVG celestial layer */
#about .about-why-sky{position:absolute;inset:0;z-index:1;width:100%;height:100%}
#about .why-dipper-line{fill:none;stroke:#ca9f4e;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;opacity:.95}
#about .why-arc{fill:none;stroke:rgba(202,159,78,.16);stroke-width:1.1}
#about .why-arc-b{stroke-dasharray:3 6;opacity:.62}
#about .why-arc-c{opacity:.36}.about-why-dipper-exact .why-arc-d{stroke-dasharray:2.5 6;opacity:.42}
#about .why-starfield circle{fill:#e2b861;opacity:.78}
#about .why-halo{fill:rgba(202,159,78,.11);stroke:rgba(202,159,78,.18);stroke-width:1}
#about .why-halo.h2{fill:rgba(202,159,78,.035);stroke:none}
#about .why-core{fill:#f1c66a;stroke:#ffefbd;stroke-width:1.1}
/* Reason labels: exact desktop placements from approved mockup */
#about .why-reason{
position:absolute;
z-index:4;
padding-left:16px;
border-left:1px solid rgba(202,159,78,.68);
width:13.8%;
}
#about .why-reason span{
display:block;
margin-bottom:8px;
color:#d7ae5e;
font:500 12px/1 var(--index);
letter-spacing:.07em;
}
#about .why-reason h3{
margin:0 0 8px;
color:#f2f1ea;
font-family:Georgia,'Times New Roman',serif;
font-size:clamp(20px,1.45vw,24px);
font-weight:400;
line-height:1.03;
letter-spacing:-.025em;
}
#about .why-reason p{
margin:0;
color:#aeb8b4;
font-size:clamp(11.2px,.82vw,13.5px);
line-height:1.46;
}
#about .wr1{left:34.1%;top:10.5%;width:12.8%}
#about .wr2{left:51.5%;top:22.3%;width:13.6%}
#about .wr3{left:68.1%;top:31.0%;width:15.2%}
#about .wr4{left:85.0%;top:42.4%;width:13.2%}
#about .wr5{left:51.8%;top:58.6%;width:14.4%}
#about .wr6{left:66.2%;top:63.2%;width:16.2%}
#about .wr7{left:85.0%;top:69.4%;width:14.1%}
/* Keep long approved copy readable without changing the mockup hierarchy */
#about .wr6 p,#about .wr7 p{font-size:clamp(10.8px,.76vw,12.7px);line-height:1.42}
/* Large desktop fine tuning */
@media(min-width:1500px){
#about .about-why-left h2{font-size:86px}
}
/* Tablet: preserve constellation, then shift to readable stacked labels */
@media(max-width:1100px){
#about .about-why-dipper-canvas{
height:auto;
min-height:0;
padding:82px var(--gut) 90px;
display:grid;
grid-template-columns:1fr;
gap:54px;
}
#about .about-why-left{position:relative;left:auto;top:auto;width:100%;max-width:720px}
#about .about-why-left h2{font-size:clamp(58px,9vw,80px);line-height:.92}
#about .about-why-left p{max-width:46ch}
#about .about-why-sky{
position:relative;
grid-row:2;
height:520px;
min-height:520px;
}
#about .why-reason,
#about .wr1,#about .wr2,#about .wr3,#about .wr4,#about .wr5,#about .wr6,#about .wr7{
position:relative;
left:auto;right:auto;top:auto;bottom:auto;
width:100%;
max-width:680px;
grid-column:1;
}
#about .why-reason h3{font-size:25px}
#about .why-reason p,#about .wr6 p,#about .wr7 p{font-size:14px;line-height:1.58;max-width:52ch}
#about .about-why-dipper-canvas{grid-auto-rows:auto}
}
@media(max-width:700px){
#about .about-why-dipper-canvas{padding:72px var(--gut) 82px;gap:30px}
#about .about-why-left h2{font-size:clamp(50px,14vw,66px)}
#about .about-why-kicker{gap:11px;margin-bottom:34px;font-size:9.5px}
#about .about-why-kicker i{width:28px}
#about .about-why-sky{height:330px;min-height:330px}
#about .why-reason{padding-left:14px}
#about .why-reason h3{font-size:23px}
}
/* ===== 34 · celestial-shared ===== */
:root{
--celestial-deep:#031713;
--celestial-deep-2:#07231e;
--celestial-emerald:#0c3028;
--celestial-gold:#cba85f;
--celestial-gold-soft:#d8bd7a;
--celestial-ivory:#f5f0e6;
--celestial-ivory-2:#ede7dc;
}
body{background:var(--celestial-ivory);}
.hd.solid{background:rgba(3,23,19,.94)!important;box-shadow:0 1px 0 rgba(203,168,95,.12)}
.nav a{letter-spacing:.12em!important}
.section-index{letter-spacing:.22em!important}
.ft{background:#02120f!important}
/* ===== 35 · concept-observatory-minimal ===== */
/* CONCEPT 2 — OBSERVATORY MINIMAL
Same celestial language but quieter, more institutional and less scenic. */
body{background:#f3efe7!important}
#home .hero .shot .fill,
#about .hero .shot .fill,
#team .hero .shot .fill,
#contact .hero .shot .fill{
background:
radial-gradient(60% 80% at 72% 30%,rgba(203,168,95,.10),transparent 58%),
radial-gradient(42% 56% at 20% 76%,rgba(41,91,77,.28),transparent 64%),
linear-gradient(115deg,#02130f,#082820 52%,#031510)!important;
}
#home .hero .shot::before,
#about .hero .shot::before,
#team .hero .shot::before,
#contact .hero .shot::before{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.52;
background:
radial-gradient(circle at 18% 22%,#cba85f 0 1px,transparent 1.5px),
radial-gradient(circle at 73% 17%,#cba85f 0 1px,transparent 1.5px),
radial-gradient(circle at 87% 66%,#cba85f 0 1px,transparent 1.5px),
radial-gradient(circle at 43% 72%,#cba85f 0 1px,transparent 1.5px);
background-size:210px 190px,250px 220px,300px 270px,240px 210px;
}
#home .hero .veil,
#about .hero .veil,
#team .hero .veil,
#contact .hero .veil{background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(2,13,11,.74))!important}
#home .hero h1,#about .hero h1,#team .hero h1,#contact .hero h1{font-size:clamp(48px,6.6vw,96px)!important;max-width:12ch!important}
.sec{padding-top:clamp(92px,11vw,154px)!important;padding-bottom:clamp(92px,11vw,154px)!important}
.v3-title,.statement{max-width:12ch!important}
#home .service-rows,#home .expertise-23,#about .pillars-grid{border-color:rgba(13,44,37,.12)!important}
#home .service-row{grid-template-columns:58px 1fr 1.1fr!important;padding:42px 0!important}
#home .service-row h3{font-size:clamp(26px,2.8vw,42px)!important}
#home .service-row::before{background:#082820!important}
#home .v3-architecture,#home .v3-reporting,#about .about-why-dipper-exact{
background:#021813!important;
}
#home .v3-architecture::after{
width:880px!important;height:880px!important;right:-530px!important;top:-90px!important;border-color:rgba(203,168,95,.16)!important;
}
#about .about-pillars-section .pillars-grid .v51-principle{
background:transparent!important;border-radius:0!important;border-width:0 0 1px 0!important;border-color:rgba(15,45,38,.16)!important;box-shadow:none!important;padding-left:0!important;padding-right:0!important;
}
#about .about-pillars-section .pillars-grid{gap:0 38px!important}
#team .leader-card{
border-radius:0!important;box-shadow:none!important;border:1px solid rgba(15,45,38,.14)!important;
}
#team .leader-card::before,#team .leader-card::after{opacity:.34}
#team .leader-photo{background:#e7e1d6!important}
#team .team-pill{border-radius:0!important;background:transparent!important;border-color:rgba(15,45,38,.14)!important}
#contact .prooflist{border:0!important;background:transparent!important}
#contact .prooflist div{background:transparent!important;border-top:1px solid rgba(15,45,38,.16)!important;padding-left:0!important}
.v3-cta{background:#092820!important;color:#fff!important}
.v3-cta h2,.v3-cta p{color:#fff!important}
.v3-cta .section-index{color:#d4ad62!important}
.v3-cta .arrowlink.ink{color:#fff!important;border-bottom-color:rgba(255,255,255,.35)!important}
/* ===== 36 · v559-why-orbit-circle ===== */
/* ── 04 WHY ESSENTIA — one true circle, evenly spaced ──
Layout stays two-column (copy left, orbit right) — the columns are only
rebalanced from .78/1.22 to .60/1.40 so the orbit has room to breathe.
Seven reasons at 360/7 = 51.43 degrees apart on a single circle; the
outermost ring is exactly 2R so the cards ride it. */
@media (min-width:1280px){
#about .opt4-lux-wrap{
grid-template-columns:minmax(280px,.60fr) minmax(660px,1.40fr) !important;
gap:56px !important;
align-items:center !important;
}
#about .why-opt4-lux .why-opt-intro{max-width:34ch}
#about .opt4-lux-orbit{display:block !important;min-height:790px !important}
/* concentric rings, even steps, outermost carries the cards */
#about .opt4-lux-ring,
#about .opt4-lux-arc{
display:block !important;
left:50% !important;top:50% !important;
transform:translate(-50%,-50%) !important;
clip-path:none !important;border-radius:50% !important;
}
#about .opt4-lux-ring.ring-inner{width:210px !important;height:210px !important;
border:1px solid rgba(208,170,87,.07) !important}
#about .opt4-lux-arc.arc-b{width:335px !important;height:335px !important;
border:1px solid rgba(208,170,87,.10) !important}
#about .opt4-lux-ring.ring-main{width:460px !important;height:460px !important;
border:1px solid rgba(208,170,87,.13) !important}
#about .opt4-lux-arc.arc-a{width:590px !important;height:590px !important;
border:1px solid rgba(208,170,87,.20) !important}
#about .opt4-lux-center{
position:absolute !important;left:50% !important;top:50% !important;
transform:translate(-50%,-50%) !important;
width:180px !important;height:180px !important;border-radius:50% !important;
}
/* compact cards so seven fit the circle without crowding */
#about .lux-reason{
width:170px;padding:15px 15px 14px 16px;border-radius:15px;
left:50% !important;top:50% !important;right:auto !important;bottom:auto !important;
transform:translate(-50%,-50%) translate(var(--x),var(--y)) !important;
}
#about .lux-reason h4{font-size:15px;line-height:1.12;margin:0 0 6px}
#about .lux-reason p{font-size:11.5px;line-height:1.5}
#about .lux-no{font-size:8px;margin-bottom:7px}
#about .lux-reason::after{top:14px;bottom:14px}
/* R = 295 */
#about .lr1{--x:0px; --y:-295px}
#about .lr2{--x:231px; --y:-184px}
#about .lr3{--x:288px; --y:66px}
#about .lr4{--x:128px; --y:266px}
#about .lr5{--x:-128px; --y:266px}
#about .lr6{--x:-288px; --y:66px}
#about .lr7{--x:-231px; --y:-184px}
#about .lux-reason:hover,#about .lr5:hover{
transform:translate(-50%,-50%) translate(var(--x),var(--y)) translateY(-5px) !important;
}
#about .lux-reason::before{top:auto;bottom:auto;left:auto;right:auto;transform:none}
#about .lr1::before{left:50%;bottom:-20px;transform:translateX(-50%)}
#about .lr2::before{left:-20px;bottom:22px}
#about .lr3::before{left:-20px;top:50%;transform:translateY(-50%)}
#about .lr4::before{left:20px;top:-20px}
#about .lr5::before{right:20px;top:-20px}
#about .lr6::before{right:-20px;top:50%;transform:translateY(-50%)}
#about .lr7::before{right:-20px;bottom:22px}
}
/* wider screens: same circle, larger */
@media (min-width:1440px){
#about .opt4-lux-orbit{min-height:900px !important}
#about .opt4-lux-ring.ring-inner{width:240px !important;height:240px !important}
#about .opt4-lux-arc.arc-b{width:380px !important;height:380px !important}
#about .opt4-lux-ring.ring-main{width:520px !important;height:520px !important}
#about .opt4-lux-arc.arc-a{width:680px !important;height:680px !important}
#about .opt4-lux-center{width:190px !important;height:190px !important}
#about .lux-reason{width:195px;padding:17px 17px 16px 18px;border-radius:16px}
#about .lux-reason h4{font-size:16.5px}
#about .lux-reason p{font-size:12px}
/* R = 340 */
#about .lr1{--x:0px; --y:-340px}
#about .lr2{--x:266px; --y:-212px}
#about .lr3{--x:331px; --y:76px}
#about .lr4{--x:148px; --y:306px}
#about .lr5{--x:-148px; --y:306px}
#about .lr6{--x:-331px; --y:76px}
#about .lr7{--x:-266px; --y:-212px}
}
@media (max-width:1279px){
#about .opt4-lux-wrap{grid-template-columns:1fr;gap:48px}
#about .why-opt4-lux::before{display:none}
#about .why-opt4-lux .why-opt-intro{max-width:56ch}
#about .opt4-lux-orbit{min-height:auto;display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
#about .opt4-lux-ring,#about .opt4-lux-arc{display:none}
#about .opt4-lux-center{position:relative;left:auto;top:auto;transform:none;
width:100%;height:180px;border-radius:24px;grid-column:1/-1}
#about .opt4-lux-center::before{border-radius:16px}
#about .lux-reason{position:relative !important;left:auto !important;right:auto !important;
top:auto !important;bottom:auto !important;transform:none !important;
width:auto;min-height:180px}
#about .lux-reason::before{display:none}
#about .lux-reason:hover,#about .lr5:hover{transform:translateY(-4px) !important}
}
@media (max-width:720px){
#about .opt4-lux-orbit{grid-template-columns:1fr}
}
/* ===== 37 · v567-why-dipper-master ===== */
/* Section 04 — coordinates read off the supplied master (1672 x 941).
Stars, constellation line, label boxes and the ridge all measured,
not estimated. */
.about-why-ridge{
position:absolute;inset:0;width:100%;height:100%;
z-index:1;pointer-events:none;
}
.about-why-dipper-exact .about-why-left,
.about-why-dipper-exact .about-why-sky,
.about-why-dipper-exact .why-reason{position:relative;z-index:3}
.about-why-dipper-exact .about-why-sky{position:absolute;inset:0;z-index:2}
@media (min-width:1080px){
/* left top width — each taken from the master's label block */
.about-why-dipper-exact .why-reason.wr1{left:34.15%;top:11.16%;width:12.92%}
.about-why-dipper-exact .why-reason.wr2{left:51.02%;top:22.63%;width:13.28%}
.about-why-dipper-exact .why-reason.wr3{left:67.52%;top:30.61%;width:12.62%}
.about-why-dipper-exact .why-reason.wr4{left:84.87%;top:42.29%;width:12.98%}
.about-why-dipper-exact .why-reason.wr5{left:51.44%;top:58.66%;width:11.84%}
.about-why-dipper-exact .why-reason.wr6{left:65.91%;top:62.91%;width:14.35%}
.about-why-dipper-exact .why-reason.wr7{left:84.93%;top:70.14%;width:13.04%}
}
/* ===== 38 · v569-why-node-and-dots ===== */
/* the master has no bullet beside the numerals — the constellation line is
the connector, and each label already carries a gold rule on its left */
.about-why-dipper-exact .why-reason::before{display:none !important;content:none !important}
/* node glow matched to the master's measured radial falloff:
solid core to r≈6, then smooth decay to background by r≈36 */
.about-why-dipper-exact .why-glow{fill:url(#whyGlowExact);stroke:none}
.about-why-dipper-exact .why-core{fill:#fdeec4;stroke:#fffaf0;stroke-width:.9}
/* ===== 39 · v570-hero-cycle-fix ===== */
/* The cycling gold line is nowrap, so it was being clipped by the h1's 12ch
cap and by the .cycle box being only 1.06em tall — descenders were cut and
the longest phrase ran past the right edge. A hidden sizer set to the
longest phrase now gives the box its true width and height. */
.hero h1 .cycle{
display:block;
position:relative;
height:auto !important;
width:max-content;
max-width:min(94vw, 1180px);
overflow:hidden;
margin-top:.04em;
padding-bottom:.10em; /* room for descenders in "private capital." */
}
.hero h1 .cycle .cycle-sizer{
display:block;
visibility:hidden;
white-space:nowrap;
font-style:normal;
font-size:1em;
line-height:1.06;
letter-spacing:-.045em;
}
.hero h1 .cycle span{
position:absolute;
left:0; top:0;
width:100%;
white-space:nowrap;
}
@media (max-width:900px){
.hero h1 .cycle{max-width:100%}
.hero h1 .cycle .cycle-sizer,
.hero h1 .cycle span{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
.hero h1 .cycle .cycle-sizer{display:none}
.hero h1 .cycle span{position:static}
.hero h1 .cycle span:not(:first-of-type){display:none}
}
/* ===== 40 · v572-fixes ===== */
/* ── interior heroes: clear the fixed header ──
The header is position:fixed, the hero is align-items:flex-end and the h1
at 96px/12ch wraps to four lines, so the block overflowed upward and slid
under the logo. Reserving the header's height stops that happening again. */
#about .hero, #team .hero, #contact .hero{
min-height:auto !important;
height:auto !important;
}
#about .hero .hero-in, #team .hero .hero-in, #contact .hero .hero-in{
padding-top:calc(var(--chrome, 44px) + var(--hdr, 96px) + clamp(28px,5vh,64px)) !important;
padding-bottom:clamp(64px,10vh,120px) !important;
}
/* ── the cycling gold line is scaled to fit, measured at runtime ── */
.hero h1 .cycle{
display:block; position:relative;
height:auto !important; width:100%;
overflow:visible;
margin-top:.04em; padding-bottom:.12em;
}
.hero h1 .cycle .cycle-sizer,
.hero h1 .cycle span{
font-size:calc(1em * var(--cyc-fit, 1));
line-height:1.06; letter-spacing:-.045em;
white-space:nowrap;
}
.hero h1 .cycle .cycle-sizer{display:block;visibility:hidden;font-style:normal}
.hero h1 .cycle span{position:absolute;left:0;top:0;width:100%}
@media (prefers-reduced-motion:reduce){
.hero h1 .cycle .cycle-sizer{display:none}
.hero h1 .cycle span{position:static}
.hero h1 .cycle span:not(:first-of-type){display:none}
}
/* ===== 41 · v572-legal ===== */
/* ── legal pages: plain, readable, printable ── */
.legal-page .legal-head{
padding:calc(var(--chrome,44px) + var(--hdr,96px) + clamp(40px,7vh,80px)) 0 clamp(28px,5vh,52px);
border-bottom:1px solid rgba(219,185,108,.18);
}
.legal-page .legal-kicker{
font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.26em;
color:var(--gold, #cba85f);margin-bottom:20px;
}
.legal-page h1{
font-family:var(--display);font-weight:700;letter-spacing:-.035em;
font-size:clamp(34px,4.6vw,58px);line-height:1.04;margin:0;color:#f4f4ef;
}
.legal-page .legal-meta{
margin-top:20px;font-size:13.5px;color:#9fb0a9;
}
.legal-body{padding:clamp(40px,7vh,76px) 0 clamp(72px,12vh,140px)}
.legal-body .legal-col{max-width:70ch}
.legal-body h2{
font-family:var(--display);font-weight:700;letter-spacing:-.025em;
font-size:clamp(19px,1.9vw,24px);line-height:1.2;color:#f2f1ea;
margin:44px 0 14px;
}
.legal-body h2:first-of-type{margin-top:0}
.legal-body h2 span{color:var(--gold,#cba85f);font-size:.62em;margin-right:12px;
letter-spacing:.12em;vertical-align:.14em}
.legal-body p{color:#b6c3bd;font-size:16px;line-height:1.72;margin:0 0 14px}
.legal-body ul{margin:0 0 16px;padding-left:20px;color:#b6c3bd;font-size:16px;line-height:1.72}
.legal-body li{margin-bottom:8px}
.legal-draft{
border:1px solid rgba(219,185,108,.34);
background:rgba(219,185,108,.07);
padding:18px 22px;margin:0 0 40px;border-radius:4px;
}
.legal-draft b{font-family:var(--display);color:#e6d3a4;display:block;margin-bottom:6px;
font-size:13px;letter-spacing:.08em}
.legal-draft p{margin:0;font-size:14.5px;color:#cbbd9a;line-height:1.6}
.legal-todo{color:#e0c882;font-style:italic}
.legal-back{
display:inline-flex;align-items:center;gap:10px;margin-top:52px;
font-family:var(--display);font-weight:700;font-size:14px;color:#f2f1ea;
padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.28);
}
.legal-back:hover{color:var(--gold,#cba85f);border-bottom-color:var(--gold,#cba85f)}
@media print{
.proto,.hd,.sheet,.legal-back,.legal-draft{display:none !important}
.legal-page{background:#fff !important}
.legal-page h1,.legal-body h2{color:#000 !important}
.legal-body p,.legal-body li{color:#222 !important}
}
/* ===== 42 · v573-legal-theme ===== */
/* Legal pages sit on the site's cream ground (#f3efe7), so they use the
light-theme tokens: --ink for headings, --body-ink for prose,
--label for the olive eyebrow. */
.legal-page{background:var(--paper,#f3efe7)}
.legal-page .legal-head{
padding:calc(var(--chrome,44px) + var(--hdr,96px) + clamp(40px,7vh,80px)) 0 clamp(28px,5vh,52px);
border-bottom:1px solid var(--rule,#DBE1DD) !important;
}
.legal-page .legal-kicker{
font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.26em;
color:var(--label,#6F6029) !important;margin-bottom:22px;
}
.legal-page h1{
font-family:var(--display);font-weight:700;letter-spacing:-.04em;
font-size:clamp(32px,4.4vw,56px);line-height:1.04;margin:0;
color:var(--ink,#0F211D) !important;
}
.legal-page .legal-meta{
margin-top:20px;font-size:14px;color:var(--muted,#5A6964) !important;
}
.legal-body{padding:clamp(44px,7vh,80px) 0 clamp(72px,12vh,140px)}
.legal-body .legal-col{max-width:72ch}
.legal-body h2{
font-family:var(--display);font-weight:700;letter-spacing:-.025em;
font-size:clamp(19px,1.9vw,25px);line-height:1.2;
color:var(--ink,#0F211D) !important;
margin:48px 0 16px;
}
.legal-body h2:first-of-type{margin-top:0}
.legal-body h2 span{
color:var(--label,#6F6029) !important;font-size:.58em;margin-right:14px;
letter-spacing:.12em;vertical-align:.16em;
}
.legal-body p{color:var(--body-ink,#3A4A45) !important;font-size:16px;line-height:1.75;margin:0 0 15px}
.legal-body ul{margin:0 0 18px;padding-left:22px}
.legal-body li{color:var(--body-ink,#3A4A45) !important;font-size:16px;line-height:1.75;margin-bottom:9px}
.legal-body li::marker{color:var(--label,#6F6029)}
.legal-body p strong,.legal-body li strong{color:var(--ink,#0F211D);font-weight:700}
/* a field the firm still has to supply */
.legal-field{
background:rgba(203,171,101,.20);
border-bottom:1px solid var(--label,#6F6029);
color:#5c4f22 !important;padding:1px 7px;border-radius:2px;
font-style:normal;white-space:nowrap;
}
.legal-draft{
border:1px solid rgba(111,96,41,.38) !important;
background:rgba(203,171,101,.13) !important;
padding:20px 24px;margin:0 0 44px;border-radius:3px;
}
.legal-draft b{
font-family:var(--display);color:#5c4f22 !important;display:block;margin-bottom:7px;
font-size:11px;letter-spacing:.2em;font-weight:700;
}
.legal-draft p{margin:0;font-size:14.5px;color:#6a5c33 !important;line-height:1.65}
.legal-back{
display:inline-flex;align-items:center;gap:10px;margin-top:56px;
font-family:var(--display);font-weight:700;font-size:14px;
color:var(--ink,#0F211D) !important;
padding-bottom:6px;border-bottom:1px solid var(--rule,#DBE1DD);
}
.legal-back:hover{color:var(--label,#6F6029) !important;border-bottom-color:var(--label,#6F6029)}
@media print{
.proto,.hd,.sheet,.legal-back,.legal-draft,[data-footer]{display:none !important}
.legal-page,.legal-page .legal-head{background:#fff !important}
.legal-page h1,.legal-body h2{color:#000 !important}
.legal-body p,.legal-body li{color:#222 !important}
.legal-field{background:none !important;color:#000 !important}
}
/* ===== 43 · v574-legal-header ===== */
/* The header is transparent above 60px of scroll and carries white nav links
and a white wordmark. That reads correctly over the dark heroes on home,
about, team and contact. The legal pages open on the cream ground, so the
header is pinned to its solid state there from the top. */
body.legal-mode .hd{
background:rgba(10,23,20,.92) !important;
backdrop-filter:blur(14px);
box-shadow:0 1px 0 rgba(203,168,95,.12);
}
body.legal-mode .hd .hd-in{padding-top:12px !important;padding-bottom:12px !important}
body.legal-mode .hd .logo{height:46px}
/* ===== 44 · v575-gate ===== */
/* ── entry gate ─────────────────────────────────────────────────────
One gate, not two. The investor attestation is the only thing a
visitor can meaningfully agree to, so it is the only thing that
blocks entry. The office / impersonation warning is information we
give them, so it lives on Contact and on Legal & regulatory where
someone checking a suspicious approach will actually look. */
.gate{
position:fixed;inset:0;z-index:2000;
/* flex-start + margin:auto on the card keeps it centred when it fits and
lets it scroll from the top when it does not — align-items:center pinned
the card to the bottom and made its top unreachable on short screens */
display:flex;align-items:flex-start;justify-content:center;
padding:clamp(16px,4vw,48px);
background:rgba(4,16,13,.86);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
overflow-y:auto;
}
.gate[hidden]{display:none}
.gate-card{
position:relative;width:100%;max-width:640px;
background:var(--forest,#102420);
border:1px solid rgba(203,171,101,.30);
border-radius:4px;
padding:clamp(30px,4.4vw,54px) clamp(24px,4vw,56px) clamp(26px,3.4vw,42px);
box-shadow:0 40px 120px rgba(0,0,0,.55);
margin:auto;
}
.gate-card-sm{max-width:520px}
.gate-mark{margin-bottom:26px}
.gate-kicker{
font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.28em;
color:var(--gold,#CBAB65);margin:0 0 16px;
}
.gate-title{
font-family:var(--display);font-weight:700;letter-spacing:-.035em;
font-size:clamp(25px,3.2vw,38px);line-height:1.08;
color:#F6F5EF;margin:0 0 26px;
}
.gate-body{border-top:1px solid rgba(203,171,101,.20);padding-top:24px}
.gate-body p{
color:#AFBCB6;font-size:14.5px;line-height:1.7;margin:0 0 14px;
}
.gate-body strong{color:#EFEDE4;font-weight:700}
.gate-body a{color:var(--gold,#CBAB65);border-bottom:1px solid rgba(203,171,101,.45)}
.gate-body a:hover{color:#E4CF97;border-bottom-color:#E4CF97}
.gate-lead{margin-top:22px !important;color:#EFEDE4 !important;font-weight:700}
.gate-reps{margin:0;padding-left:20px}
.gate-reps li{
color:#AFBCB6;font-size:14.5px;line-height:1.7;margin-bottom:9px;
}
.gate-reps li::marker{color:var(--gold,#CBAB65)}
.gate-actions{
display:flex;flex-wrap:wrap;gap:14px;align-items:center;
margin-top:32px;padding-top:26px;
border-top:1px solid rgba(203,171,101,.20);
}
.gate-btn{
font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.06em;
border-radius:3px;cursor:pointer;transition:background .2s,color .2s,border-color .2s;
padding:14px 30px;border:1px solid transparent;
}
.gate-agree{background:var(--gold,#CBAB65);color:var(--forest,#102420)}
.gate-agree:hover{background:#DEBE7A}
.gate-exit{
background:none;color:#9FB0A9;border-color:rgba(255,255,255,.22);
padding:14px 22px;font-size:13px;
}
.gate-exit:hover{color:#EFEDE4;border-color:rgba(255,255,255,.45)}
.gate-btn:focus-visible{outline:2px solid var(--gold,#CBAB65);outline-offset:3px}
@media (max-width:560px){
.gate-actions{flex-direction:column;align-items:stretch}
.gate-btn{width:100%;text-align:center}
}
/* the site is inert behind the gate */
body.gate-open{overflow:hidden}
/* ── impersonation notice on the Contact page ── */
.fraud-note{
margin-top:56px;padding:26px 28px;
border:1px solid rgba(111,96,41,.34);
border-left:3px solid var(--label,#6F6029);
background:rgba(203,171,101,.09);
border-radius:3px;max-width:62ch;
}
.fraud-head{
display:flex;align-items:center;gap:11px;margin-bottom:14px;
font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.16em;
text-transform:uppercase;color:#6a5c33;
}
.fraud-note p{font-size:14.5px;line-height:1.72;color:var(--body-ink,#3A4A45);margin:0 0 11px}
.fraud-note p:last-child{margin-bottom:0}
.fraud-note strong{color:var(--ink,#0F211D)}
.fraud-note a{color:#6a5c33;border-bottom:1px solid rgba(111,96,41,.45)}
.fraud-note a:hover{color:var(--ink,#0F211D)}
@media print{.gate{display:none !important}}
/* ===== 45 · v576-why-type ===== */
/* ── 04 WHY ESSENTIA — typography brought onto the house faces ──
The section was set in Georgia 400 (headline, labels) and Helvetica
via --index (kicker, numerals). Everything now uses --display
(Century Gothic 700) and --body, matching .statement and .lbl
elsewhere on the site. Century Gothic 700 runs about 16% wider than
Georgia 400, so sizes are reduced to hold the same line lengths. */
/* kicker — matched to .lbl */
#about .about-why-kicker{
font:700 9.5px/1 var(--display) !important;
letter-spacing:.26em !important;
color:#e6e8e3;
}
#about .about-why-kicker b{font:inherit;color:#f1f1ec}
/* headline — matched to .statement */
#about .about-why-left h2{
font-family:var(--display) !important;
font-weight:700 !important;
font-size:clamp(50px,4.45vw,74px) !important;
letter-spacing:-.04em !important;
line-height:.94 !important;
}
#about .about-why-left h2 em{font-weight:700 !important;margin-top:10px}
#about .about-why-left p{font-family:var(--body) !important}
/* reason numerals — matched to .lbl */
#about .why-reason span{
font:700 9.5px/1 var(--display) !important;
letter-spacing:.26em !important;
margin-bottom:10px !important;
}
/* reason titles */
#about .why-reason h3{
font-family:var(--display) !important;
font-weight:700 !important;
font-size:clamp(16px,1.16vw,19px) !important;
letter-spacing:-.03em !important;
line-height:1.1 !important;
}
#about .why-reason p{font-family:var(--body) !important}
@media (min-width:1600px){
#about .about-why-left h2{font-size:74px !important}
#about .why-reason h3{font-size:19px !important}
}
@media (max-width:1280px){
#about .about-why-left h2{font-size:clamp(46px,7.4vw,66px) !important;line-height:.98 !important}
#about .why-reason h3{font-size:20px !important}
}
@media (max-width:1079px){
#about .about-why-left h2{font-size:clamp(40px,11vw,56px) !important}
#about .about-why-kicker{font-size:9px !important}
#about .why-reason h3{font-size:19px !important}
}
/* ===== 46 · v576-why-widths ===== */
/* Century Gothic 700 needs a little more room than Georgia for three of
the seven titles. Boxes 02, 06 and 07 are widened to the right only,
so the gold rule on the left stays exactly where it was measured. */
@media (min-width:1080px){
#about .why-reason.wr2{width:14.30%}
#about .why-reason.wr6{width:15.70%}
#about .why-reason.wr7{width:14.30%}
}
/* ===== 47 · v577-team-hero-flat ===== */
/* ── team hero: remove the centre glow ──
Three layers were creating it:
1. radial-gradient(38% 52% at 30% 72%, rgba(45,94,81,.29) ...) sage bloom
2. radial-gradient(50% 70% at 76% 34%, rgba(203,171,101,.105)…) gold bloom
3. linear-gradient(112deg …) brightening to #10362f at its 53% stop
Replaced with a single monotonic gradient — it darkens steadily corner
to corner, so there is no bright patch anywhere in the field.
The gold starfield (.shot::before) and the veil are untouched. */
#team > .hero:first-of-type .shot .fill,
#team .hero .shot .fill{
background:linear-gradient(112deg,
#0a2721 0%,
#08221c 38%,
#061a15 68%,
#03120e 100%) !important;
}
/* ===== 48 · v578-hero-flat-all ===== */
/* ── all four heroes: remove the centre glow ──
home, about and contact shared one rule carrying the same three
glow layers the team hero had:
radial(60% 80% at 72% 30%, rgba(203,168,95,.10)) gold bloom
radial(42% 56% at 20% 76%, rgba(41,91,77,.28)) sage bloom
linear(115deg, #02130f, #082820 52%, #031510) peaks at 52%
All four now use one monotonic gradient: it darkens steadily corner
to corner with no bright band. The gold starfield (.shot::before)
and the veil are unchanged on every page. */
#home > .hero:first-of-type .shot .fill,
#about > .hero:first-of-type .shot .fill,
#team > .hero:first-of-type .shot .fill,
#contact > .hero:first-of-type .shot .fill,
#home .hero .shot .fill,
#about .hero .shot .fill,
#team .hero .shot .fill,
#contact .hero .shot .fill{
background:linear-gradient(112deg,
#0a2721 0%,
#08221c 38%,
#061a15 68%,
#03120e 100%) !important;
}
/* ===== 49 · v581-starfield-shine ===== */
/* ── hero backdrop: original dot field, with a few made to shine ──
The four plain dot layers are unchanged. Three sparse layers are added
on top whose dots have a near-white core and a soft gold bloom, so a
handful of points read as bright stars among the rest. Tiles are large,
so the shining ones stay rare: roughly ten across a 1920px hero. */
#home .hero .shot::before,
#about .hero .shot::before,
#team .hero .shot::before,
#contact .hero .shot::before{
opacity:.62 !important;
background:
/* ── the shining few ── */
radial-gradient(circle at 34% 28%,
rgba(255,249,232,.95) 0 1.5px,
rgba(238,214,156,.62) 2.6px,
rgba(203,168,95,.20) 5px,
rgba(203,168,95,.07) 8px,
transparent 13px),
radial-gradient(circle at 71% 63%,
rgba(255,250,236,.88) 0 1.25px,
rgba(238,214,156,.50) 2.2px,
rgba(203,168,95,.16) 4.4px,
transparent 11px),
radial-gradient(circle at 17% 78%,
rgba(252,244,224,.72) 0 1.1px,
rgba(203,168,95,.30) 2px,
rgba(203,168,95,.10) 4px,
transparent 9px),
/* ── the original field, unchanged ── */
radial-gradient(circle at 18% 22%,#cba85f 0 1px,transparent 1.5px),
radial-gradient(circle at 73% 17%,#cba85f 0 1px,transparent 1.5px),
radial-gradient(circle at 87% 66%,#cba85f 0 1px,transparent 1.5px),
radial-gradient(circle at 43% 72%,#cba85f 0 1px,transparent 1.5px)
!important;
background-size:
640px 560px,
820px 700px,
960px 840px,
210px 190px, 250px 220px, 300px 270px, 240px 210px !important;
background-position: 0 0, 180px 120px, 90px 320px, 0 0, 0 0, 0 0, 0 0 !important;
background-repeat:repeat !important;
}
/* ===== 50 · v582-no-starfield ===== */
/* ── hero backdrop: dot field removed ──
The .shot::before layer carried the tiled dots on all four heroes.
It is switched off entirely. The hero gradient, the veil and the
decorative orbit rings are untouched. */
#home .hero .shot::before,
#about .hero .shot::before,
#team .hero .shot::before,
#contact .hero .shot::before{
content:none !important;
background:none !important;
}
/* ===== 51 · v585-hero-orbit ===== */
/* ── home hero: four complete rings, none clipped ──
The stage was width:min(68vw,980px) at right:-12vw, so its centre sat
outside the viewport. o0 (1235px) and o1 (980px) were cut off and read
as stray curves crossing the frame — the two marked up in red. The
stage is now sized against the viewport height and pulled inside, so
all four rings close around the key as circles. */
#home .hero .orbit-stage{
right:3vw !important;
top:50% !important;
width:min(50vw, 62svh, 690px) !important;
}
#home .hero .orbit.o0,
#home .hero .orbit.o1{display:block !important} /* undo the earlier removal */
#home .hero .keymark{height:56% !important}
/* ── hero links: underline appears on hover, as before ── */
#home .hero .hero-cta .arrowlink{
display:inline-flex;align-items:center;gap:10px;
padding-bottom:5px;
color:rgba(255,255,255,.90);
border-bottom:1px solid transparent !important;
transition:color .25s ease, border-color .25s ease;
position:relative;z-index:6;
}
#home .hero .hero-cta .arrowlink:hover,
#home .hero .hero-cta .arrowlink:focus-visible{
color:var(--gold,#CBAB65) !important;
border-bottom-color:var(--gold,#CBAB65) !important;
}
#home .hero .hero-cta .arrowlink:hover svg{transform:translateX(5px)}
#home .hero .hero-cta .arrowlink svg{transition:transform .3s ease}
/* the CTA row must sit above the stage and the veil */
#home .hero .hero-in{z-index:6 !important}
#home .hero .hero-cta{position:relative;z-index:6}
/* JS-free fallback so anchor targets clear the fixed header */
#platform-home{scroll-margin-top:calc(var(--chrome,44px) + var(--hdr,96px) + 20px)}
/* ===== 52 · v587-dots-no-rings ===== */
/* ── home hero: orbital dots kept, ring strokes removed ──
The dots are ::before children of the .orbit elements, so hiding
.orbit removed them too. The rings stay in the layout — they are
what positions each dot — but their borders are transparent, so
only the four gold dots remain. */
#home .hero .orbit,
#home .hero .orbit.o0,
#home .hero .orbit.o1,
#home .hero .orbit.o2,
#home .hero .orbit.o3{
display:block !important;
border-color:transparent !important;
background:none !important;
}
#home .hero .orbit::before,
#home .hero .orbit.o0::before,
#home .hero .orbit.o2::before,
#home .hero .orbit.o3::before{display:block !important}
#home .hero .keymark{height:60% !important}
/* ===== 53 · v588-no-circles-home ===== */
/* ── home page: every decorative circular stroke off ──
The remaining arc measured as a true circle (fit residual 0.13px)
crossing the hero's lower edge, so it was not one of the four orbit
rings. Rather than keep guessing at it, every decorative circle on
the home page is neutralised here. The four orbital dots survive
because they are filled, not stroked, and UI borders are untouched. */
/* the orbit rings: element kept (it positions each dot), stroke gone */
#home .orbit,
#home .orbit.o0,
#home .orbit.o1,
#home .orbit.o2,
#home .orbit.o3{
border-color:transparent !important;
background:none !important;
box-shadow:none !important;
}
/* the dots stay */
#home .orbit::before,
#home .orbit.o0::before,
#home .orbit.o2::before,
#home .orbit.o3::before{display:block !important}
/* other decorative rings anywhere on the home page */
#home .gold-ring,
#home .gold-ring::before,
#home .gold-ring::after,
#home .v3-architecture::after,
#home .alloc-ring,
#home .opt4-ring,
#home [class*="ring"]:not(.gold-ring):not(.orbit){
border-color:transparent !important;
box-shadow:none !important;
}
#home .v3-architecture::after{display:none !important}
/* avoid any svh-unit fallback: keep the stage sized in plain units */
#home .hero .orbit-stage{
right:3vw !important;
top:50% !important;
width:min(50vw, 690px) !important;
}
#home .hero .keymark{height:60% !important}
/* ===== 54 · v589-hero-image ===== */
/* ── home hero: supplied celestial plate ──
1448x1086 (4:3). Anchored right so the galaxy and constellation stay
in frame as the hero gets wider; the left third of the plate is empty
sky (mean luminance 16/255) which is where the headline sits.
The orbit stage is hidden — the plate carries its own arcs and stars,
and the key would have landed on top of the constellation. */
#home > .hero:first-of-type .shot .fill,
#home .hero .shot .fill.g1,
#home .hero .shot .fill{
background:
var(--img-hero-home) right top / cover no-repeat,
#041a16 !important;
}
#home .hero .orbit-stage{display:none !important}
@media (max-width:820px){
#home > .hero:first-of-type .shot .fill,
#home .hero .shot .fill.g1,
#home .hero .shot .fill{
background:
var(--img-hero-home) 72% center / cover no-repeat,
#041a16 !important;
}
}
/* ===== 55 · v594-why-botanical ===== */
/* ── ABOUT 04 — WHY ESSENTIA, rebuilt to the supplied botanical master ──
Canvas 1672 x 941, identical to the plate. The golden branch and its
seven glowing nodes are carried by the photograph itself, so there is no
SVG overlay: every measurement below (rule x, block top, box width) was
read off the master, not estimated.
Measured node centres, plate px → % of canvas:
01 614.0,265.1 02 944.1,378.1 03 1319.1,511.3 04 723.6,466.8
05 976.9,551.0 06 1213.0,621.5 07 1508.4,642.9
Measured label rules (x, y-top → y-bottom):
01 615.5,106-237 02 947.5,241-347 03 1320,330-480 04 557.5,463-599
05 856.5,566-727 06 1112.5,620-798 07 1407.5,664-849
Text sits a uniform 18px right of each rule.
Contrast over the plate measured at 12.9:1 – 15.5:1 for headings and
6.9:1 – 8.3:1 for body, so the section carries no darkening scrim. */
/* v566 caps the canvas at 941px even in the stacked layout, which clipped
the labels; the cap is released here and the desktop canvas is instead
locked to the plate's own 1672:941 ratio so nodes and rules stay aligned
at every width. */
#about .about-why-dipper-exact .about-why-dipper-canvas{
height:auto !important;
min-height:0 !important;
max-height:none !important;
}
@media (min-width:1101px){
#about .about-why-dipper-exact .about-why-dipper-canvas{
aspect-ratio:1672/941;
min-height:0 !important;
background:
var(--img-why-plate) 50% 50% / 100% 100% no-repeat,
#06201b !important;
}
}
/* the plate already carries its own grain */
#about .about-why-dipper-exact .about-why-dipper-canvas::after{display:none}
/* ── left editorial column ── */
#about .about-why-dipper-exact .about-why-left{
left:4.07% !important;
top:9.43% !important;
width:26% !important;
}
#about .about-why-dipper-exact .about-why-kicker{
margin-bottom:clamp(44px,5.2vw,87px) !important;
color:#f1f3ef;
}
#about .about-why-dipper-exact .about-why-kicker span{color:#e2b75f}
#about .about-why-dipper-exact .about-why-kicker i{width:clamp(26px,2.3vw,38px);background:#dbae57}
#about .about-why-dipper-exact .about-why-kicker b{color:#fbfbf7}
#about .about-why-dipper-exact .about-why-left h2{color:#fbfbf7}
#about .about-why-dipper-exact .about-why-left h2 em{color:#e3b660}
#about .about-why-dipper-exact .about-why-left p{
margin:clamp(24px,2.3vw,38px) 0 0 !important;
max-width:34ch;
color:#c8d0cc;
}
#about .about-why-dipper-exact .about-why-accent{
width:clamp(38px,3.3vw,55px);
height:2px;
margin-top:clamp(16px,1.5vw,25px);
background:#cfac59;
}
/* ── reason blocks: gold rule on the left, content 18px inside ── */
#about .about-why-dipper-exact .why-reason{
padding-left:clamp(13px,1.08vw,18px) !important;
border-left:1px solid rgba(218,174,81,.82) !important;
}
#about .about-why-dipper-exact .why-reason span{color:#e2b75f}
#about .about-why-dipper-exact .why-reason h3{color:#f7f7f3}
#about .about-why-dipper-exact .why-reason p{color:#ced6d2}
@media (min-width:1101px){
/* left = the rule's x, top = the rule's y — both read off the master */
#about .about-why-dipper-exact .why-reason.wr1{left:36.81% !important;top:11.27% !important;width:17.43% !important}
#about .about-why-dipper-exact .why-reason.wr2{left:56.67% !important;top:25.61% !important;width:16.66% !important}
#about .about-why-dipper-exact .why-reason.wr3{left:78.95% !important;top:35.07% !important;width:14.53% !important}
#about .about-why-dipper-exact .why-reason.wr4{left:33.34% !important;top:49.20% !important;width:20.36% !important}
#about .about-why-dipper-exact .why-reason.wr5{left:51.23% !important;top:60.15% !important;width:20.36% !important}
#about .about-why-dipper-exact .why-reason.wr6{left:66.54% !important;top:65.89% !important;width:20.36% !important}
#about .about-why-dipper-exact .why-reason.wr7{left:84.18% !important;top:70.56% !important;width:15.10% !important}
}
/* ── tablet / mobile: stacked, plate kept as an atmospheric ground ── */
@media (max-width:1100px){
#about .about-why-dipper-exact .about-why-dipper-canvas{
aspect-ratio:auto;
background:
linear-gradient(180deg,rgba(4,22,18,.88) 0%,rgba(4,22,18,.84) 45%,rgba(4,22,18,.90) 100%),
var(--img-why-plate) 50% 42% / cover no-repeat,
#06201b !important;
}
#about .about-why-dipper-exact .about-why-left{
left:auto !important;top:auto !important;width:100% !important;
}
#about .about-why-dipper-exact .about-why-kicker{margin-bottom:30px !important}
#about .about-why-dipper-exact .about-why-left p{margin-top:24px !important;max-width:46ch}
/* the stacked labels keep the same single gold rule on the left as the
desktop layout — v551 added a top rule and zeroed the left padding */
#about .about-why-dipper-exact .why-reason{
border-top:0 !important;
padding:22px 0 22px 18px !important;
}
}
/* ===== 56 · v597-contact-hero ===== */
/* ── contact hero: supplied botanical plate ──
Source 1448x1086 (4:3). The row-luminance profile puts the wall at
y0-745, the lit slab surface at 745-900 and the dark stone face below
900. The hero is a wide band (2.6:1 at 1440, 3.3:1 at 1920), so the
plate is cropped from the bottom to 1448x600 (2.41:1): the wall, the
light rays and the full foliage cluster are kept, the slab is trimmed
away. Anchored top so the foliage holds the top-right corner and the
dark left third stays clear for the headline.
Encoded 2316x960 WebP q82 (Lanczos + light unsharp, acutance 104% of
source, edge overshoot +-24). */
#contact > .hero:first-of-type .shot .fill,
#contact .hero .shot .fill.g4,
#contact .hero .shot .fill{
background:
var(--img-hero-contact) 50% 0% / cover no-repeat,
#0a2721 !important;
}
/* narrow viewports scale to height, so the crop happens horizontally —
anchored at 58% — the headline sits clear of the leaves (11.3:1) while a
slice of foliage stays in frame; at 78% a lit leaf fell behind the text
and dropped local contrast to 1.97:1 */
@media (max-width:820px){
#contact > .hero:first-of-type .shot .fill,
#contact .hero .shot .fill.g4,
#contact .hero .shot .fill{
background:
var(--img-hero-contact) 58% 0% / cover no-repeat,
#0a2721 !important;
}
}
/* ===== 57 · v598-team-about-heroes ===== */
/* ── team + about heroes: supplied botanical plates ──
Both sources are 1672x941 (1.78:1). These heroes run 1.82:1 at 1280 and
1.87:1 at 1440 measured at the .fill box, so the plates sit almost 1:1 and
nothing is cropped away at those widths; at 1920 the box opens to 2.39:1
and `cover` trims from the bottom, anchored top, which keeps the foliage
and the dappled light and drops only empty wall.
Encoded 2508x1411 WebP q82 (Lanczos + light unsharp, acutance 100% of
source, edge overshoot within +-28). */
#team > .hero:first-of-type .shot .fill,
#team .hero .shot .fill.g3,
#team .hero .shot .fill{
background:
var(--img-hero-team) 50% 0% / cover no-repeat,
#0a2721 !important;
}
#about > .hero:first-of-type .shot .fill,
#about .hero .shot .fill.g2,
#about .hero .shot .fill{
background:
var(--img-hero-about) 50% 0% / cover no-repeat,
#0a2721 !important;
}
/* narrow viewports are portrait at the .fill box, so `cover` crops sideways
instead. Anchors picked by sweeping positions and measuring headline
contrast against how much lit foliage stays in frame: team 42% (5.2:1,
3.4% lit), about 62% (9.6:1, 4.7% lit). Past ~72% a lit leaf falls behind
the text on both and contrast drops under 3:1. */
@media (max-width:820px){
#team > .hero:first-of-type .shot .fill,
#team .hero .shot .fill.g3,
#team .hero .shot .fill{
background:
var(--img-hero-team) 42% 0% / cover no-repeat,
#0a2721 !important;
}
#about > .hero:first-of-type .shot .fill,
#about .hero .shot .fill.g2,
#about .hero .shot .fill{
background:
var(--img-hero-about) 62% 0% / cover no-repeat,
#0a2721 !important;
}
}
/* ===== 58 · v599-contact-details ===== */
/* ── contact details ──
The office value is now a real three-line address, which did not fit the
four-up grid: at 1280 each column is ~150px and "Marina One East Tower"
sets to ~230px at the list's 23px bold, so lines broke mid-phrase.
Two columns give each value ~450px, which holds every line intact while
keeping the list's type scale unchanged. */
@media (min-width:821px){
#contact .prooflist{grid-template-columns:repeat(2,1fr) !important}
}
/* an address is multi-line data rather than a single headline value, so it
takes a slightly tighter measure and normal leading */
#contact .prooflist .v.addr{
font-size:clamp(16px,1.45vw,19px);
line-height:1.5;
}
/* ===== 59 · v600-audit-layout-fixes ===== */
/* ── Team page spacing, measured at 1440px ──
The section headline was capped at 374px inside a 1310px column, so it
wrapped to four lines against an empty right half; the standfirst had
margin-top 0 and sat flush against it; there were 325px of empty cream
between the intro and the first card; and each bio was capped at 259px
inside a 635px copy column, wrapping at about four words a line. */
#team .team-intro .statement{
max-width:22ch !important;
}
#team .team-intro .copy > p{
margin-top:clamp(18px,1.6vw,26px) !important;
max-width:52ch;
}
#team .team-intro{
padding-bottom:clamp(8px,1.2vw,18px) !important;
}
@media (min-width:1080px){
#team .team-featured-list{margin-top:clamp(-220px,-14vw,-120px)}
}
#team .leader-bio{
max-width:34ch !important;
}
/* the wider-team roles were title case while the leadership roles above them
were caps — one convention for both */
#team .pill-role{
text-transform:uppercase;
letter-spacing:.14em;
font-size:clamp(9.5px,.78vw,11px);
}
/* ── About section 02 ──
Its heading now carries an like every other section heading on the
site, and its kicker uses .section-index rather than the one-off .kicker,
so both need to read correctly on the dark band. */
#about .band .section-index{
color:#e6e8e3;
}
#about .band .section-index .num{color:#d4ac5c}
#about .band h2 em{
display:block;
color:#d5ae64;
font-style:normal;
font-weight:inherit;
}
/* ===== 60 · v602-legal-field-wrap ===== */
/* The placeholder spans were white-space:nowrap, so a long one ([ list regulated
activities exactly as stated on the licence ]) pushed the Legal page 67px wider
than a 390px viewport and gave the whole page a horizontal scrollbar. They wrap
now, and keep their bracketed text together only where it fits. */
.legal-field{
white-space:normal !important;
display:inline;
overflow-wrap:anywhere;
}
/* ===== 61 · v605-team-leader-cards ===== */
/* ── Team leadership, rebuilt to the supplied reference ──
Card layout only: cream card on a hairline of gold, name over a gold rule,
and the portrait carried on a soft disc with a single gold arc running off
the card's edge. The reference's serif display face was dropped — the
house faces are set in v607-team-house-type below, so the --serif token
and its webfont are gone and every var(--serif) here resolves to nothing
and is superseded there. */
/* section header */
#team .team-intro .lbl{
display:flex; align-items:center; gap:18px;
color:var(--label,#6F6029);
}
#team .team-intro .lbl::after{
content:""; display:block; width:clamp(40px,5vw,86px); height:1px;
background:rgba(203,171,101,.75);
}
#team .team-intro .statement{
font-family:var(--serif) !important;
font-weight:400 !important;
font-size:clamp(46px,5.6vw,84px) !important;
letter-spacing:-.012em !important;
line-height:1.02 !important;
max-width:none !important;
color:var(--ink,#0F211D);
}
#team .team-intro .copy > p{
font-family:var(--serif) !important;
font-size:clamp(17px,1.5vw,21px) !important;
line-height:1.5 !important;
max-width:44ch !important;
color:#3D4A45;
}
/* card */
#team .leader-card{
background:#FBF8F1 !important;
border:1px solid rgba(203,171,101,.42) !important;
border-radius:26px !important;
overflow:hidden !important;
box-shadow:none !important;
align-items:stretch !important;
}
/* earlier team blocks painted their own discs and rings on these elements */
#team .leader-card::before,
#team .leader-card::after,
#team .leader-photo::before,
#team .leader-photo::after,
#team .leader-copy::before,
#team .leader-copy::after{
content:none !important; display:none !important; background:none !important;
}
#team .leader-copy{
padding:clamp(40px,4.2vw,76px) clamp(28px,2.6vw,48px) clamp(40px,4.2vw,72px) clamp(34px,3.8vw,74px) !important;
display:flex !important; flex-direction:column !important; justify-content:center !important;
background:transparent !important;
}
#team .leader-name{
font-family:var(--serif) !important;
font-weight:400 !important;
font-size:clamp(36px,4.1vw,64px) !important;
letter-spacing:-.012em !important;
line-height:1.02 !important;
margin:0 0 18px !important;
color:var(--ink,#0F211D) !important;
}
#team .leader-role{
font-family:var(--display) !important;
font-size:clamp(10px,.85vw,12px) !important;
font-weight:700 !important;
letter-spacing:.22em !important;
text-transform:uppercase !important;
color:var(--label,#6F6029) !important;
margin:0 !important;
}
#team .leader-role::after{
content:""; display:block;
width:clamp(44px,4vw,64px); height:1px; margin:22px 0 0;
background:rgba(203,171,101,.85);
}
#team .leader-bio{
font-family:var(--serif) !important;
font-size:clamp(16px,1.3vw,19px) !important;
line-height:1.62 !important;
letter-spacing:.001em !important;
max-width:32ch !important;
margin:26px 0 0 !important;
color:#3D4A45 !important;
}
/* portrait panel */
#team .leader-photo{
position:relative !important;
overflow:hidden !important;
background:transparent !important;
min-height:clamp(360px,33vw,520px);
display:block !important;
padding:0 !important;
}
#team .leader-disc{
position:absolute; z-index:0;
left:9%; bottom:-20%;
width:80%; aspect-ratio:1;
border-radius:50%;
background:#EFE7DB;
}
#team .leader-arc{
position:absolute; z-index:1;
left:1%; bottom:-27%;
width:96%; height:auto; aspect-ratio:1;
border:1px solid rgba(203,171,101,.58);
border-radius:50%;
pointer-events:none;
}
#team .leader-arc circle{display:none}
#team .leader-portrait{
position:absolute; z-index:2;
left:50%; bottom:0; transform:translateX(-50%);
height:94%; width:auto; max-width:none;
object-fit:contain; object-position:bottom center;
border-radius:0;
display:block;
}
#team .leader-placeholder{display:none !important}
@media (max-width:1079px){
#team .leader-card{border-radius:20px !important}
#team .leader-photo{min-height:330px}
#team .leader-copy{padding:40px 30px 34px !important}
}
@media (max-width:700px){
#team .leader-photo{min-height:290px}
#team .leader-disc{left:10%; width:80%}
}
/* ===== 62 · v606-wider-team-photos ===== */
/* the wider team now carries the same portraits, cropped to a circular
avatar; name and role only, as agreed — no bios */
#team .avatar{
background:#EFE7DB !important;
border:1px solid rgba(203,171,101,.38) !important;
overflow:hidden !important;
display:block !important;
}
#team .avatar img{
width:100%; height:100%; display:block;
object-fit:cover; object-position:center center;
border-radius:50%;
}
#team .pill-name{
font-family:var(--serif) !important;
font-weight:400 !important;
font-size:clamp(19px,1.5vw,23px) !important;
letter-spacing:-.01em !important;
}
/* the role was capped at 18ch, which broke three-word titles onto three
lines under a caps-and-tracking setting */
#team .pill-role{
font-family:var(--display) !important;
font-size:clamp(9.5px,.8vw,11px) !important;
font-weight:700 !important;
letter-spacing:.18em !important;
text-transform:uppercase !important;
line-height:1.6 !important;
color:var(--label,#6F6029) !important;
max-width:none !important;
padding:0 8px;
}
/* the section heading was capped narrow, so it ran to six lines against an
empty right half — same fault as the leadership intro above */
#team .subteam-head .statement{
max-width:20ch !important;
font-family:var(--serif) !important;
font-weight:400 !important;
font-size:clamp(34px,3.4vw,50px) !important;
line-height:1.08 !important;
letter-spacing:-.012em !important;
}
#team .subteam-head .support{
font-family:var(--serif) !important;
font-size:clamp(16px,1.3vw,19px) !important;
line-height:1.55 !important;
max-width:40ch !important;
align-self:end;
}
/* ===== 63 · v607-team-house-type ===== */
/* ── Team page back onto the house faces ──
The leadership section was set in a display serif to follow the supplied
reference. Every other page is Century Gothic (--display for headings,
--body for text), so the team page now matches: same weights, same
negative tracking on headlines, same body size. Layout, cards, the disc
and arc and the portraits are unchanged.
House reference measured at 1440px: headline 700, letter-spacing -.04em,
line-height .98; body 400, 13.5-19px, line-height 1.62. */
#team .team-intro .statement,
#team .subteam-head .statement{
font-family:var(--display) !important;
font-weight:700 !important;
letter-spacing:-.04em !important;
line-height:.99 !important;
}
#team .team-intro .statement{font-size:clamp(42px,4.9vw,74px) !important; max-width:16ch !important}
#team .subteam-head .statement{font-size:clamp(32px,3.1vw,48px) !important; max-width:19ch !important}
#team .team-intro .copy > p,
#team .subteam-head .support{
font-family:var(--body) !important;
font-weight:400 !important;
font-size:clamp(15px,1.25vw,18px) !important;
line-height:1.62 !important;
letter-spacing:normal !important;
}
#team .leader-name{
font-family:var(--display) !important;
font-weight:700 !important;
font-size:clamp(32px,3.5vw,54px) !important;
letter-spacing:-.035em !important;
line-height:1.02 !important;
}
#team .leader-bio{
font-family:var(--body) !important;
font-weight:400 !important;
font-size:clamp(14px,1.1vw,16.5px) !important;
line-height:1.62 !important;
letter-spacing:normal !important;
max-width:34ch !important;
}
#team .pill-name{
font-family:var(--display) !important;
font-weight:700 !important;
font-size:clamp(17px,1.35vw,21px) !important;
letter-spacing:-.025em !important;
}
/* ===== 64 · v616-wider-team-head ===== */
/* ── The wider team — heading block rebuilt ──
The section ran as a two-column grid: heading on the left, supporting
sentence pinned to the bottom of a column starting 600px to its right,
which read as two unrelated pieces of text. The kicker is gone, the
grid is now a single left-hand column, and the supporting sentence sits
directly beneath the headline as one editorial block. Type, colour,
cards and palette are untouched. */
#team .subteam-head{
display:block !important;
margin-bottom:40px !important;
}
#team .subteam-head .statement{
margin:0 !important;
}
#team .subteam-head .support{
margin:24px 0 0 !important;
max-width:44ch !important;
align-self:auto !important;
color:var(--muted) !important;
}
/* the cards come up to close the gap the removed column left behind, and
the section's own top padding is eased so the block does not float in
the middle of an otherwise empty band */
#team .team-circle-grid{margin-top:0 !important}
#team > section.sec:last-of-type,
#team .sec:has(.subteam-head){
padding-top:clamp(52px,8vw,110px) !important;
}
@media (min-width:901px){
#team .subteam-head{grid-template-columns:1fr !important}
}
/* ===== 65 · v617-wider-team-plate ===== */
/* ── The wider team — botanical plate ──
The supplied leaf-shadow plate carries its interest in two corners: a
cluster top-right and one bottom-left, with a near-flat cream field
between. The section is 1440x850 at desktop while the plate is 2.65:1,
so cover-cropping it would throw away both corners. Instead the plate is
laid full-width and anchored to the bottom of the section, which puts the
top-right cluster in the empty band beside the headline and the
bottom-left one below the cards. The headline and supporting line sit
above it on clean cream, and the plate's top edge is masked into the page
so the join between its cream (#F4ECE0) and the page's (#F3EFE7) never
shows. */
#team > section.sec:last-of-type{
position:relative;
isolation:isolate;
}
#team > section.sec:last-of-type > *{
position:relative;
z-index:1;
}
#team > section.sec:last-of-type::before{
content:"";
position:absolute;
left:0; right:0; bottom:0;
aspect-ratio:2043 / 770;
z-index:0;
pointer-events:none;
background-image:url(../img/plate-wider-team-leaves.webp);
background-repeat:no-repeat;
background-position:center bottom;
background-size:100% 100%;
-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 14%, #000 30%, #000 100%);
mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 14%, #000 30%, #000 100%);
}
/* narrow screens: the plate would be a thin strip at its own ratio, so it
is given a fixed band at the foot of the section and cropped to the
bottom-left cluster, which is the half that reads at this size */
@media (max-width:900px){
#team > section.sec:last-of-type::before{
aspect-ratio:auto;
height:clamp(260px,46vw,380px);
background-size:cover;
background-position:left bottom;
}
}
@media (prefers-reduced-motion:no-preference){
/* nothing animates here; declared so the plate is never parallaxed by the
page's scroll effects, which target [data-par] only */
}
/* ===== 66 · v613-arch-headline-wrap ===== */
/* ── Home 03 headline, widened for the compliance copy ──
"Your custodian holds the assets. / We manage to your objectives." is
roughly twice the length of the line it replaced, and .v3-title is capped
at 12ch, so it broke to six lines and swamped the section. The type size
is unchanged — matching every other section headline — only the wrap width
is released, which puts each sentence on two lines at every breakpoint. */
.v3-architecture .v3-title{max-width:18ch !important}
/* ===== 67 · v612-label-house-type ===== */
/* ── Small-caps labels on Team and Contact, matched to Home and About ──
Home and About set their section kickers, numerals and key labels in
--index ('Helvetica Neue') at 10px/500/.19em via .section-index. Team and
Contact were using .lbl and the role labels, both of which ran on
--display (Century Gothic) at a heavier weight and wider tracking, so the
two halves of the site did not read as one system.
.lbl appears three times in the whole document — OUR PEOPLE, THE WIDER
TEAM, SINGAPORE — all of them on Team and Contact, so restyling it here
reaches exactly the pages named and nothing on Home or About. */
.lbl{
font-family:var(--index) !important;
font-size:10px !important;
font-weight:500 !important;
letter-spacing:.22em !important;
text-transform:uppercase !important;
}
/* About 04 was set in Century Gothic back when the brief was to make it
consistent with the sections around it; the sections around it actually
run on --index, so this finishes that job and leaves the About page
internally consistent. */
#about .about-why-kicker,
#about .about-why-kicker b,
#about .why-reason span{
font-family:var(--index) !important;
font-size:10px !important;
font-weight:500 !important;
letter-spacing:.22em !important;
}
/* role labels under the names — the house equivalent is .ac-label /
.fact-key, which sit a touch smaller and lighter than the kicker.
Helvetica Neue sets narrower than Century Gothic at the same size, so the
two-line roles in the wider-team pills gain rather than lose room. */
#team .leader-role{
font-family:var(--index) !important;
font-size:10.5px !important;
font-weight:500 !important;
letter-spacing:.2em !important;
}
#team .pill-role{
font-family:var(--index) !important;
font-size:9.5px !important;
font-weight:500 !important;
letter-spacing:.18em !important;
}
/* contact detail keys — ENQUIRIES, ADDRESS and the rest. .prooflist is used
once in the document and only on Contact. */
#contact .prooflist .k{
font-family:var(--index) !important;
font-size:9px !important;
font-weight:500 !important;
letter-spacing:.18em !important;
}