/* ===== Readability pass: bigger small-print, stronger contrast, calmer tracking ===== */
:root{--gold-on-light:#6b4f12}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--gold-on-light:#dcc27d}}
:root[data-theme="dark"]{--gold-on-light:#dcc27d}

/* Home hero: "Talk to our team" must stay readable on hover (cream fill kept, text goes dark) */
#top .hc .ctas .btn:not(.play):hover{background:#1F2A24;color:#FBF7F2;border-color:#1F2A24}

/* Hero intro paragraph */
#top .hc .lead{font-size:clamp(16px,1.25vw,18px)!important;line-height:1.65!important}

/* Body copy inside cards / columns / steps / FAQ */
.card p,.cols .col p,.steps li p,.faq .a p,.empty,.pcard p,.intro,.note{font-size:17px!important;line-height:1.7!important}
p.note{font-size:15px!important;line-height:1.65!important}
.card li,.steps li li,.pcard li{font-size:16px!important;line-height:1.6!important}
.dp li{font-size:14px!important}

/* Eyebrow labels (tags): larger, less spread out */
.tag{font-size:13px;letter-spacing:.2em}
html[lang=zh] .tag,html[lang=zh] .btn{letter-spacing:.06em}

/* Small meta text */
dt,.pst2,.fn,.who,.card summary,.pcard summary{font-size:12.5px!important;letter-spacing:.1em!important}
#pnet small{font-size:12px!important}
.sc{font-size:12px}
a.xl{font-size:13.5px!important;letter-spacing:.14em!important}
label{font-size:14px!important}

/* Buttons */
.btn{font-size:14px!important;letter-spacing:.12em!important}
#top .btn{font-size:13.5px!important}
nav .btn{font-size:13px!important}
.lang button{font-size:13.5px}

/* Gold on light backgrounds was too pale for small text (3.7:1) -> darker gold (6:1) */
#finder .tag,.fn,.pst2,.who,.card .who,.card summary,.pcard summary,.pcard .pst2{color:var(--gold-on-light)!important}

/* Light text on dark: slightly stronger */
.dk p.t,.dk .note,.dk li p{opacity:1}

/* Small meta text on light cards had reduced opacity as well as pale colour -> make solid and darker */
.who,.fn,.card summary,.pcard summary,.pst2{opacity:1!important}
dt{opacity:1!important;color:var(--fg-l)!important}
.card li,.pcard li{opacity:1!important;color:var(--fg-l)!important}
#finder .note{opacity:1!important;color:var(--fg-l)!important}
#pnet small{opacity:1!important;color:#e6cf93!important}
.card ul,.pcard ul{opacity:1!important}
.card a.xl,.pcard a.xl{color:var(--gold-on-light)!important}

/* skip link + keyboard focus */
.skip{position:fixed;left:12px;top:-64px;z-index:300;padding:11px 18px;border-radius:10px;background:#FBF7F2;color:#0B3D2E;font:500 14px/1.2 'Poppins',system-ui,sans-serif;text-decoration:none;box-shadow:0 8px 30px rgba(0,0,0,.3);transition:top .2s}
.skip:focus{top:12px;outline:2px solid #C7A068;outline-offset:2px}
main:focus{outline:none}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #C7A068;outline-offset:3px;border-radius:4px}
.lt a:focus-visible,.lt button:focus-visible,.lt summary:focus-visible{outline-color:#6b4f12}
.card h2{font-size:28px;margin:18px 0 4px}

/* min sizes 2 */
footer a,footer span,footer small{font-size:13px}
small{font-size:13px!important}
.sc{font-size:13px}
.chip{font-size:13px}
#pg-proposal b{font-size:13px}
.lt .tag,.lt p.tag{color:var(--gold-on-light,#6b4f12)}

/* ===== Division tiles as buttons (+ optional photo via --img) ===== */
.card a.art{display:block;cursor:pointer;color:inherit;text-decoration:none;background:var(--img,none) center/cover no-repeat,linear-gradient(160deg,var(--c1),var(--c2))}
.card a.art::before{background:radial-gradient(circle at 70% 18%,rgba(255,246,214,.4),transparent 45%),linear-gradient(0deg,rgba(4,28,21,.55),transparent 45%)}
.card .art .go{position:absolute;right:14px;bottom:14px;z-index:2;padding:9px 16px;border:1px solid rgba(251,247,242,.85);border-radius:99px;font:500 12px/1 'Poppins',system-ui,sans-serif;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:#FBF7F2;background:rgba(11,61,46,.38);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .3s,color .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.card a.art:hover .go,.card a.art:focus-visible .go{background:#FBF7F2;color:#0B3D2E;transform:translateX(-4px)}
.card a.art:focus-visible{outline:2px solid #d9bd7a;outline-offset:4px}
.card a.art span{z-index:1}

/* ===== Division tiles: photos ===== */
.card a.art[href="pulse.html"]{--img:url(assets/tile-harmonia.webp)}
.card a.art[href="spark.html"]{--img:url(assets/tile-unveil.webp)}
.card a.art[href="bloom.html"]{--img:url(assets/tile-rise.webp)}
.card a.art[href="verve.html"]{--img:url(assets/tile-orbit.webp)}
.card a.art[href="pulse.html"]::before,.card a.art[href="spark.html"]::before,.card a.art[href="bloom.html"]::before,.card a.art[href="verve.html"]::before{background:linear-gradient(0deg,rgba(4,28,21,.78) 0,rgba(4,28,21,.25) 38%,rgba(4,28,21,0) 62%)}
.card a.art span{-webkit-text-stroke:1px rgba(251,247,242,.9);text-shadow:0 2px 18px rgba(4,28,21,.35)}

/* ===== Ecosystem circle: make labels easier to read over the watercolour ===== */
#eco .et small{font-size:clamp(13px,1.2vw,17px)!important;font-weight:800!important;letter-spacing:.1em!important;color:#0B3D2E!important}
#eco .et b{font-size:clamp(28px,3.4vw,50px)!important;font-weight:800!important}
#eco .et em{font-size:clamp(16px,1.6vw,23px)!important;font-weight:600!important;line-height:1.25!important;color:#0B3D2E!important;max-width:13em!important}
#eco .et small,#eco .et b,#eco .et em{text-shadow:0 0 5px rgba(250,251,245,.95),0 0 12px rgba(250,251,245,.9),0 0 22px rgba(250,251,245,.7)}
#eco .eco-core{font-size:clamp(34px,4.6vw,70px)!important;color:#0B3D2E!important;-webkit-text-stroke:.8px #0B3D2E;text-shadow:0 0 10px rgba(250,251,245,.95),0 0 22px rgba(250,251,245,.8)}
@media(min-width:801px){#eco .eb{width:max-content;max-width:29%;background:rgba(250,251,245,.46);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}#eco .eb:hover,#eco .eb:focus-visible{background:rgba(255,255,255,.78)}#eco .e2{top:61.5%!important;left:7.5%!important}#eco .e4{top:64.5%!important}}
@media(max-width:800px){#eco .et em{font-size:15px!important;font-weight:600!important}#eco .et b{font-size:27px!important}#eco .et small{font-size:13px!important}#eco .eco-core{font-size:clamp(34px,9.4vw,60px)!important}}

/* ===== Our divisions v2: new watercolour + clearer labels ===== */
#eco .eco-fig{container-type:inline-size}
#eco .eco-core{font-size:clamp(26px,3.5vw,54px)!important;width:19%!important;line-height:1!important;transform:rotate(-6deg)!important;-webkit-text-stroke:0!important;text-shadow:none!important;color:#0B3D2E!important}
@supports (font-size:1cqw){#eco .eco-core{font-size:clamp(24px,3.3cqw,50px)!important}}
#eco .eb{background:rgba(250,251,245,.93)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid rgba(11,61,46,.12);box-shadow:0 10px 28px rgba(11,61,46,.12);max-width:27%!important}
#eco .eb:hover,#eco .eb:focus-visible{background:#fff!important;box-shadow:0 14px 34px rgba(11,61,46,.18)}
#eco .et small,#eco .et b,#eco .et em{text-shadow:none!important}
#eco .et em{color:#0B3D2E!important;font-weight:600!important}
#eco .et i{opacity:1!important;transform:none!important}
@media(min-width:801px){
#eco .e1{left:4%!important;top:9%!important}
#eco .e2{left:2.5%!important;top:61%!important}
#eco .e3{left:71%!important;top:25%!important}
#eco .e4{left:70%!important;top:63%!important}
}
@media(max-width:800px){
#eco .eb{border-radius:16px;box-shadow:0 6px 18px rgba(11,61,46,.10);max-width:none!important;width:auto!important}
#eco .eco-core{font-size:18px!important;width:36%!important}
}

/* ===== What guides us: big-letter list + photo (HUR-ON brand-profile style) ===== */
#about-s3 .glwrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:stretch}
#about-s3 .glcol{display:flex;flex-direction:column;justify-content:center}
#about-s3 .gl{list-style:none;margin:clamp(18px,2.2vw,30px) 0 0;padding:0;display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px)}
#about-s3 .gl li{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:clamp(10px,1.4vw,20px);padding-bottom:clamp(14px,1.8vw,22px);border-bottom:1px solid rgba(11,61,46,.12)}
#about-s3 .gl li:last-child{border-bottom:none;padding-bottom:0}
#about-s3 .gltr{font:700 clamp(40px,5.2vw,74px)/.78 'Playfair Display','Times New Roman',serif;color:#b9872f;letter-spacing:0}
#about-s3 .glb{display:flex;flex-direction:column;gap:3px;padding-top:.3em}
#about-s3 .glb b{font:700 clamp(19px,1.8vw,24px)/1.2 'Playfair Display','Times New Roman',serif;color:#0B3D2E}
#about-s3 .glb span{font-size:16px;line-height:1.55;color:#0B3D2E;opacity:.86}
#about-s3 .glph{border-radius:20px;overflow:hidden;min-height:340px;background:#0B3D2E url(assets/bg-about-s2.webp) center 42%/cover no-repeat;box-shadow:0 24px 60px -22px rgba(11,61,46,.45)}
@media(max-width:860px){
 #about-s3 .glwrap{grid-template-columns:1fr}
 #about-s3 .glph{order:-1;aspect-ratio:16/10;min-height:0}
 #about-s3 .gltr{font-size:40px}
}