/* IBC Consulting — shared design system
   Palette: deep navy / professional navy / slate / light blue-grey / off-white,
   with the IBC seal red retained as the distinctive brand accent and muted gold detail.
   Identity preserved: paperwork motifs, file folders, seals/stamps, 3D certificate. */

:root{
  --font-head:'Manrope','Inter','Segoe UI',system-ui,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,sans-serif;
  --navy-900:#0B1F33;
  --navy-700:#163A5F;
  --slate:#475569;
  --mist:#F1F5F9;
  --off:#F8FAFC;
  /* ---- ambient background system ----
     Page/section surfaces only. --off and --mist stay exactly as they were,
     because they also colour icon chips, hover states, pills and input fills —
     repointing them would change components, not backgrounds. */
  --bg-white:#FFFFFF;
  --bg-soft:#F3F7FC;
  --bg-light:#EAF2FA;
  --bg-tint:#E1ECF7;
  --bg-deeper:#D8E6F3;
  --white:#FFFFFF;
  --gold:#B79A5B;
  --seal:#C8372D;
  --seal-deep:#A32A22;
  --line:#DCE4EE;
  --field-line:#7E90A6;   /* 3.27:1 on white — non-text UI needs 3:1 (was --line at 1.28:1) */
  --ink:#0B1F33;
  --wrap:1160px;
  /* type scale (added in redesign; base elements wired below, per-component
     overrides deliberately left in place so nothing is rewritten wholesale) */
  --t-body:17px;
  --t-body-sm:14.5px;
  --t-h1:clamp(38px,4.6vw,64px);
  --t-h2:clamp(27px,3.1vw,40px);
  --t-h3:19px;
  --t-h4:16px;
  --t-micro:11.5px;
  --lh-tight:1.1;
  --lh-body:1.7;
  --r:16px;
  --sh-sm:0 8px 22px -12px rgba(11,31,51,.16);
  --sh-md:0 20px 46px -20px rgba(11,31,51,.24);
  --sh-lg:0 34px 76px -28px rgba(11,31,51,.32);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px;scrollbar-gutter:stable}
body{
  background:var(--off);color:var(--ink);
  font-family:var(--font-body);font-size:var(--t-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--navy-900)}
h1{font-weight:800;line-height:var(--lh-tight);letter-spacing:-0.02em}
h2{font-weight:700;line-height:1.15;letter-spacing:-0.015em}
h3{font-weight:700;line-height:1.25}
h4{font-weight:600}
strong,b{font-weight:600}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;position:relative}
a{color:inherit} ul{list-style:none} svg{display:block} img{display:block;max-width:100%}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy-900);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;z-index:200;font-weight:700}
.skip-link:focus{left:0}

.eyebrow{font-family:'Space Mono',monospace;font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--navy-700);display:inline-flex;align-items:center;gap:10px;font-weight:700}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--seal)}
.eyebrow.on-dark{color:#9FB8D4}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:15px;padding:15px 28px;border-radius:12px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out);font-family:var(--font-body);position:relative}
.btn:active{transform:translateY(1px);transition-duration:.07s}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.btn-seal{background:var(--seal);color:#fff;box-shadow:0 5px 0 var(--seal-deep),var(--sh-sm)}
.btn-seal:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--seal-deep),var(--sh-md)}
.btn-navy{background:var(--navy-700);color:#fff;box-shadow:0 5px 0 var(--navy-900),var(--sh-sm)}
.btn-navy:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--navy-900),var(--sh-md)}
.btn-line{background:transparent;border-color:var(--navy-700);color:var(--navy-700)}
.btn-line:hover{background:var(--navy-700);color:#fff}
.btn-paper{background:#fff;color:var(--navy-900);box-shadow:var(--sh-sm)}
.btn-paper:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn-sm{padding:11px 20px;font-size:13.5px;border-radius:10px}
.btn-block{width:100%}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:100;background:rgba(248,250,252,.94);backdrop-filter:blur(10px);border-bottom:1.5px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--font-head);font-size:19px;color:var(--navy-900)}
/* .seal-mark retired: text mark replaced by official logo asset (images/ibc-official-logo.png) */
.nav-links{display:flex;gap:2px;font-size:14.5px;font-weight:500;align-items:center}
.nav-links > a,.dd-toggle{text-decoration:none;color:var(--slate);padding:9px 13px;border-radius:9px;transition:color var(--dur-1) ease,background-color var(--dur-1) ease;background:none;border:none;font:inherit;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav-links > a:hover,.dd-toggle:hover,.nav-links > a:focus-visible,.dd-toggle:focus-visible{color:var(--navy-900);background:var(--mist)}
.nav-links > a[aria-current="page"]{color:var(--navy-900)}
.dd{position:relative}
.dd-toggle svg{transition:transform .18s}
.dd.open .dd-toggle svg{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:320px;background:#fff;border:1.5px solid var(--line);border-radius:14px;box-shadow:var(--sh-md);padding:10px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),visibility var(--dur-2);z-index:120}
.dd.open .dd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dd-menu a{display:flex;gap:12px;align-items:flex-start;text-decoration:none;padding:11px 12px;border-radius:10px;transition:background .13s}
.dd-menu a:hover,.dd-menu a:focus-visible{background:var(--mist)}
.dd-menu .ico{width:34px;height:34px;border-radius:9px;background:var(--mist);border:1.5px solid var(--line);color:var(--navy-700);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dd-menu b{display:flex;font-size:13.8px;gap:8px;align-items:center;color:var(--navy-900)}
.dd-menu span.d{font-size:11.8px;color:var(--slate);line-height:1.4;display:block}
.pop-chip{display:inline-flex;align-items:center;font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.08em;background:var(--gold);color:var(--navy-900);padding:2px 7px;border-radius:100px;font-weight:700;text-transform:uppercase;white-space:nowrap}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-phone{font-family:'Space Mono',monospace;font-size:13px;text-decoration:none;display:none;color:var(--navy-900)}

/* mobile nav */
.burger{display:none;background:none;border:1.5px solid var(--line);border-radius:10px;padding:9px 11px;cursor:pointer;color:var(--navy-900)}
.burger:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* Animated open/close. visibility (not display) so the panel can transition. */
.mobile-menu{visibility:hidden;opacity:0;position:fixed;inset:0;z-index:150;background:rgba(11,31,51,.45);transition:opacity .22s var(--ease-out),visibility .22s}
.mobile-menu.open{visibility:visible;opacity:1}
.mobile-panel{position:absolute;top:0;right:0;width:min(360px,92vw);height:100%;background:#fff;box-shadow:var(--sh-lg);padding:22px 22px 34px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;transform:translateX(100%);transition:transform .28s var(--ease-out)}
.mobile-menu.open .mobile-panel{transform:none}
.mobile-panel .mp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.mp-close{background:none;border:1.5px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer;color:var(--navy-900)}
.mp-label{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin:14px 0 6px}
.mobile-panel a{display:flex;justify-content:space-between;align-items:center;gap:10px;text-decoration:none;padding:12px 12px;border-radius:10px;font-weight:600;font-size:15px;color:var(--navy-900)}
.mobile-panel a:hover,.mobile-panel a:focus-visible{background:var(--mist)}
.mobile-panel .btn{margin-top:18px}
body.menu-open{overflow:hidden}
/* scrollbar-gutter:stable on html (see top of file) keeps the page from shifting sideways here */

/* ---------- sections ---------- */
section{padding:100px 0;position:relative}
.sec-head{max-width:660px;margin-bottom:56px}
.sec-head h2{font-size:clamp(28px,3.2vw,40px);margin-top:16px}
.sec-head p{color:var(--slate);margin-top:16px;font-size:17.5px;line-height:1.65}
.band-mist{background:var(--mist)}
.band-navy{background:linear-gradient(160deg,var(--navy-900),var(--navy-700));color:#E7EEF7}
.band-navy h2,.band-navy h3{color:#fff}

/* ---------- hero ---------- */
.hero{padding:74px 0 92px;position:relative;overflow:hidden;background:
  radial-gradient(900px 420px at 88% -10%, rgba(22,58,95,.08), transparent 60%),
  radial-gradient(700px 380px at -10% 110%, rgba(183,154,91,.10), transparent 60%), var(--off)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center}
.hero h1{font-size:clamp(36px,4.6vw,60px);margin:22px 0 24px}
.hero h1 .underline{position:relative;white-space:nowrap}
.hero h1 .underline::after{content:"";position:absolute;left:-2px;right:-2px;bottom:6px;height:12px;background:linear-gradient(90deg,rgba(183,154,91,.5),rgba(200,55,45,.35));z-index:-1;border-radius:3px}
.hero .lede{font-size:19px;color:var(--slate);max-width:48ch;margin-bottom:34px;line-height:1.65}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:40px}
.fact-row{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;column-gap:48px;row-gap:6px;border-top:1.5px solid var(--line)}
.fact{padding:18px 0 0}
@media (max-width:560px){ .fact-row{grid-template-columns:1fr 1fr} }
.fact .n{font-family:var(--font-head);font-size:27px;color:var(--navy-900)}
.fact .l{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-top:4px}

/* 3D certificate (preserved + refined) */
.cert-scene{perspective:1500px}
.certificate{
  background:linear-gradient(172deg,#FFFEFB 0%,#F7F3E9 100%);
  border:1.5px solid #E5DECB;border-radius:14px;padding:38px 36px 104px;position:relative;
  box-shadow:var(--sh-lg), inset 0 1px 0 #fff;
  transform:rotateY(-9deg) rotateX(3deg);transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s;
}
.cert-scene:hover .certificate{transform:rotateY(-3deg) rotateX(1deg);box-shadow:0 44px 90px -30px rgba(11,31,51,.4), inset 0 1px 0 #fff}
.certificate::before{content:"";position:absolute;inset:12px -14px -14px 12px;background:var(--mist);border:1.5px solid var(--line);border-radius:14px;z-index:-1;transform:translateZ(-40px)}
.certificate::after{content:"";position:absolute;inset:10px;border:1px solid rgba(183,154,91,.45);border-radius:9px;pointer-events:none}
.cert-head{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);text-align:center}
.cert-title{font-family:var(--font-head);font-size:23px;text-align:center;margin:10px 0 4px;color:var(--navy-900)}
.cert-sub{text-align:center;font-size:12.5px;color:var(--slate);margin-bottom:26px}
.cert-rule{height:1.5px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:0 auto 26px;width:70%}
.cert-line{display:flex;justify-content:space-between;gap:14px;padding:11px 2px;border-bottom:1px dashed #E5DECB;font-size:14px}
.cert-line span:first-child{color:var(--slate)}
.cert-line span:last-child{font-weight:700;color:var(--navy-900)}
.cert-line .ok{color:#1E7A5A}
.seal-stamp{position:absolute;right:30px;bottom:26px;width:118px;height:118px;border-radius:50%;color:var(--seal);display:flex;align-items:center;justify-content:center;text-align:center;font-family:'Space Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.08em;line-height:1.35;border:3px double var(--seal);transform:rotate(-12deg) translateZ(34px);box-shadow:0 6px 16px rgba(200,55,45,.28);background:radial-gradient(circle,rgba(200,55,45,.07),rgba(200,55,45,.02) 70%);animation:stamp .7s cubic-bezier(.34,1.56,.64,1) .95s backwards}
@keyframes stamp{from{transform:rotate(-12deg) translateZ(34px) scale(2.2);opacity:0}to{transform:rotate(-12deg) translateZ(34px) scale(1);opacity:1}}
.cert-ribbon{position:absolute;left:30px;bottom:34px;font-family:'Space Mono',monospace;font-size:10.5px;color:var(--slate)}

/* ---------- trust strip ---------- */
.trust-strip{background:var(--navy-900);color:var(--off);padding:20px 0;overflow:hidden}
.trust-strip .row{display:flex;gap:56px;align-items:center;white-space:nowrap;animation:slide 28s linear infinite;width:max-content}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 28px))}}
.trust-item{display:flex;align-items:center;gap:12px;font-family:'Space Mono',monospace;font-size:12.5px;opacity:.92}
.trust-item .dot{width:7px;height:7px;border-radius:50%;background:var(--gold)}

/* ---------- folders (fully clickable, tactile pull-out) ---------- */
.folder-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
a.folder{
  background:#fff;border:1.5px solid var(--line);border-radius:4px 14px 14px 14px;padding:28px;position:relative;
  box-shadow:var(--sh-sm);text-decoration:none;display:flex;flex-direction:column;
  transition:transform .22s cubic-bezier(.2,.8,.3,1.1),box-shadow .22s,border-color .22s;
}
a.folder::before{content:"";position:absolute;top:-15px;left:-1.5px;width:104px;height:16px;background:#fff;border:1.5px solid var(--line);border-bottom:none;border-radius:6px 10px 0 0;transition:transform .22s,border-color .22s,background .22s}
a.folder:hover,a.folder:focus-visible{transform:translateY(-8px) scale(1.015);box-shadow:var(--sh-lg);border-color:var(--navy-700)}
a.folder:hover::before,a.folder:focus-visible::before{transform:translateY(-3px);border-color:var(--navy-700)}
a.folder:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.folder .tag{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--seal);position:absolute;top:-12px;left:10px;z-index:2;background:#fff;padding:0 6px;line-height:13px;border-radius:4px}
.folder .pop{position:absolute;top:16px;right:16px}
.folder .icn{width:44px;height:44px;border-radius:11px;background:var(--mist);border:1.5px solid var(--line);color:var(--navy-700);display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:background .22s,color .22s}
a.folder:hover .icn{background:var(--navy-700);color:#fff}
.folder h3{font-family:var(--font-body);font-weight:700;font-size:17.5px;margin-bottom:9px;color:var(--navy-900);transition:color .2s}
a.folder:hover h3{color:var(--navy-700)}
.folder p{font-size:14.5px;color:var(--slate)}
.folder .go{margin-top:auto;padding-top:14px;font-size:13px;font-weight:700;color:var(--seal);display:inline-flex;gap:6px;align-items:center}
a.folder:hover .go{text-decoration:underline}

/* ---------- ledger ---------- */
.ledger{display:grid;grid-template-columns:repeat(2,1fr);border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.ledger-cell{padding:34px;border-bottom:1.5px solid var(--line)}
.ledger-cell:nth-child(odd){border-right:1.5px solid var(--line)}
.ledger-cell:nth-last-child(-n+2){border-bottom:none}
.ledger-cell .num{font-family:'Space Mono',monospace;color:var(--seal);font-size:12px;font-weight:700;letter-spacing:.1em}
.ledger-cell h3{font-family:var(--font-body);font-weight:700;font-size:17px;margin:10px 0 8px}
.ledger-cell p{font-size:14.5px;color:var(--slate)}

/* ---------- law-firm alternative ---------- */
.alt-panel{background:#fff;border:1.5px solid var(--line);border-left:5px solid var(--gold);border-radius:var(--r);padding:46px 50px;box-shadow:var(--sh-md);display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:44px;align-items:center}
.alt-panel h2{font-size:clamp(24px,2.8vw,33px)}
.alt-panel p{color:var(--slate);margin-top:14px}
.alt-panel .honest{margin-top:20px;padding:16px 20px;background:var(--mist);border-radius:12px;font-size:14.5px;border-left:3px solid var(--navy-700)}
.alt-ctas{display:flex;flex-direction:column;gap:14px}

/* ---------- process trail ---------- */
.trail{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 26px;counter-reset:st}
.trail.cols4{grid-template-columns:repeat(4,1fr)}
.trail-step{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:36px 24px 26px;box-shadow:var(--sh-sm);display:flex;flex-direction:column}
.trail-step::before{counter-increment:st;content:counter(st,decimal-leading-zero);font-family:'Space Mono',monospace;font-weight:700;font-size:13px;color:#fff;width:44px;height:44px;border-radius:50%;background:var(--navy-700);display:flex;align-items:center;justify-content:center;position:absolute;top:-22px;left:20px;box-shadow:0 0 0 5px var(--off),var(--sh-sm)}
.band-mist .trail-step::before{box-shadow:0 0 0 5px var(--mist),var(--sh-sm)}
.trail-step h3{font-family:var(--font-body);font-weight:700;font-size:16px;margin-bottom:9px}
.trail-step p{font-size:13.8px;color:var(--slate)}
.trail-step .dur{margin-top:auto;padding-top:14px;align-self:flex-start;display:inline-block;font-family:'Space Mono',monospace;font-size:10.5px;color:var(--navy-700);background:var(--mist);padding:5px 10px;border-radius:100px}

/* ---------- CBD location ---------- */
.cbd{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.cbd-card{background:#fff;border:1.5px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-md);overflow:hidden}
.cbd-map{background:linear-gradient(150deg,var(--navy-700),var(--navy-900));min-height:250px;position:relative;display:flex;align-items:center;justify-content:center}
.cbd-map .pin{width:54px;height:54px;border-radius:50% 50% 50% 0;background:var(--seal);transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.cbd-map .pin::after{content:"";width:18px;height:18px;border-radius:50%;background:#fff}
.cbd-map .ring{position:absolute;border:1.5px dashed rgba(255,255,255,.25);border-radius:50%}
.cbd-addr{padding:24px 28px;font-family:'Space Mono',monospace;font-size:13px;line-height:1.7}

/* ---------- reviews ---------- */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.index-card{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:30px;box-shadow:var(--sh-sm);background-image:repeating-linear-gradient(transparent,transparent 30px,rgba(22,58,95,.05) 31px);display:flex;flex-direction:column;gap:18px;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.index-card:hover{box-shadow:var(--sh-md)}
.index-card:hover{transform:translateY(-5px) rotate(-.4deg)}
.index-card .q{font-family:var(--font-head);font-size:16.5px;line-height:1.55;flex:1;color:var(--navy-900)}
.index-card .who{display:flex;align-items:center;gap:12px}
.init{width:44px;height:44px;border-radius:50%;background:var(--navy-700);color:#fff;font-family:'Space Mono',monospace;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3.5px var(--navy-700)}
.index-card .who b{font-size:13.5px;display:block;color:var(--navy-900)}
.index-card .who span{font-size:12px;color:var(--slate)}
.spotlight{margin-top:26px;background:var(--navy-900);color:var(--off);border-radius:var(--r);padding:46px 50px;display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;box-shadow:var(--sh-lg);position:relative;overflow:hidden}
.spotlight::before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;border:2px double rgba(200,55,45,.5);right:-90px;top:-90px;transform:rotate(-12deg)}
.spotlight .init{width:64px;height:64px;background:var(--seal);box-shadow:inset 0 0 0 2.5px #fff,inset 0 0 0 4.5px var(--seal);font-size:17px}
.spotlight .q{font-family:var(--font-head);font-size:clamp(17px,2vw,21px);line-height:1.5;color:#fff}
.spotlight .who{margin-top:14px;font-family:'Space Mono',monospace;font-size:12px;color:#9FB8D4}

/* ---------- pricing approach ---------- */
.quote-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.quote-card{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:30px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:14px}
.quote-card h3{font-family:var(--font-body);font-weight:700;font-size:18px}
.quote-card p{font-size:14px;color:var(--slate);flex:1}
.quote-card .qc-tag{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-700)}

/* ---------- FAQ ---------- */
.faq{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
details{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:22px 26px;box-shadow:var(--sh-sm)}
summary{cursor:pointer;font-weight:700;font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--navy-900)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--font-head);font-size:22px;color:var(--seal);flex-shrink:0;transition:transform var(--dur-2) var(--ease-out)}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:13px;color:var(--slate);font-size:15px;max-width:70ch}

/* ---------- contact / form ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.contact-info h2{font-size:clamp(27px,3.1vw,38px);margin-top:16px}
.contact-info p{color:var(--slate);margin-top:14px;max-width:46ch}
.contact-lines{margin-top:26px;display:flex;flex-direction:column;gap:12px;font-family:'Space Mono',monospace;font-size:13.5px}
.contact-lines a{text-decoration:none}
.contact-lines .row{display:flex;gap:12px;align-items:flex-start}
.contact-lines .row svg{flex-shrink:0;margin-top:3px;color:var(--seal)}
.stamp-note{margin-top:30px;display:inline-flex;align-items:center;gap:14px;background:#fff;border:1.5px dashed var(--seal);border-radius:12px;padding:16px 20px;font-size:13.5px;max-width:400px}
.mini-seal{width:44px;height:44px;border-radius:50%;border:2.5px double var(--seal);color:var(--seal);display:flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-size:8px;font-weight:700;transform:rotate(-10deg);flex-shrink:0;text-align:center;line-height:1.2}
.form-card{background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:34px;box-shadow:var(--sh-md)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.form-row.single{grid-template-columns:1fr}
label{display:block;font-size:13px;font-weight:500;margin-bottom:7px;color:var(--navy-900)}
input,select,textarea{width:100%;padding:13px 14px;border:1.5px solid var(--field-line);border-radius:10px;font-family:var(--font-body);font-size:14.5px;background:var(--off);transition:border-color .15s;color:var(--ink)}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(22,58,95,.28)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--seal)}
/* Error slot is always reserved: the message fades in, the layout never moves. */
.field-err{min-height:17px;line-height:17px;opacity:0;visibility:hidden;font-size:12px;color:var(--seal);margin-top:4px;font-weight:600;transition:opacity .14s var(--ease-out),visibility .14s}
.field.invalid .field-err{opacity:1;visibility:visible}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-status{margin-top:14px;font-size:14px;font-weight:600;display:none;padding:12px 16px;border-radius:10px}
.form-status.err{display:block;background:#FBEAE8;color:var(--seal-deep)}
.form-status.ok{display:block;background:#E7F3EE;color:#1E7A5A}
.form-note{font-size:11.5px;color:var(--slate);margin-top:14px}
.btn[disabled]{opacity:.6;cursor:wait;transform:none !important}

/* ---------- service pages ---------- */
.crumb{font-family:'Space Mono',monospace;font-size:12px;color:var(--slate);padding-top:26px}
.crumb a{text-decoration:none;color:var(--navy-700)}
.crumb a:hover{text-decoration:underline}
.svc-hero{padding:34px 0 64px}
.svc-hero h1{font-size:clamp(32px,4.2vw,52px);margin:18px 0 20px;max-width:20ch}
.svc-hero .lede{font-size:18.5px;color:var(--slate);max-width:54ch;margin-bottom:30px;line-height:1.65}
.svc-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.doc-panel{background:linear-gradient(172deg,#FFFEFB,#F7F3E9);border:1.5px solid #E5DECB;border-radius:14px;min-height:300px;position:relative;box-shadow:var(--sh-md);display:flex;align-items:center;justify-content:center;overflow:hidden}
.doc-panel::after{content:"";position:absolute;inset:10px;border:1px solid rgba(183,154,91,.4);border-radius:9px}
.doc-panel .wm{opacity:.14;color:var(--navy-700)}
.doc-panel .wm svg{width:120px;height:120px}
.doc-panel .cap{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(11,31,51,.78);color:#fff;padding:10px 14px;border-radius:10px;font-size:12px;font-family:'Space Mono',monospace;z-index:2}
.svc-cols{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:start}
.svc-prose h2{font-size:clamp(25px,2.8vw,34px);margin-bottom:18px}
.svc-prose h3{font-size:23px;margin:36px 0 14px}
.svc-prose p{color:var(--slate);margin-bottom:18px;max-width:62ch;line-height:1.75}
.svc-prose p.lead{font-size:18.5px;color:var(--ink);line-height:1.65}
.svc-prose ul.plain{margin:0 0 16px 0;display:flex;flex-direction:column;gap:8px}
.svc-prose ul.plain li{padding-left:24px;position:relative;color:var(--slate);font-size:15px}
.svc-prose ul.plain li::before{content:"";position:absolute;left:0;top:.72em;width:14px;height:2px;border-radius:1px;background:var(--gold)}
.callout{border-left:4px solid var(--seal);background:#fff;border-radius:0 12px 12px 0;padding:18px 22px;margin:24px 0;font-size:15px;box-shadow:var(--sh-sm)}
.svc-includes{background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--sh-sm);position:sticky;top:96px}
.svc-includes h3{font-family:var(--font-body);font-weight:700;font-size:16px;margin-bottom:16px}
.svc-includes ul{display:flex;flex-direction:column;gap:12px}
.svc-includes li{font-size:14.5px;padding-left:26px;position:relative}
.svc-includes li::before{content:"✓";position:absolute;left:0;color:var(--navy-700);font-weight:700}
.svc-includes .also{margin-top:20px;padding-top:18px;border-top:1.5px dashed var(--line);font-size:13px}
.svc-includes .also a{color:var(--navy-700);font-weight:700}
.cta-band{background:var(--navy-900);border-radius:var(--r);padding:42px 46px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;box-shadow:var(--sh-lg);margin-top:56px}
.cta-band h3{color:#fff;font-size:clamp(20px,2.2vw,26px);max-width:26ch}
.cta-band p{color:#9FB8D4;font-size:14px;margin-top:8px}

/* structure cards */
.structure-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.structure-card{background:#fff;border:1.5px solid var(--line);border-radius:4px 14px 14px 14px;padding:30px;box-shadow:var(--sh-sm);position:relative}
.structure-card::before{content:"";position:absolute;top:-13px;left:-1.5px;width:92px;height:14px;background:#fff;border:1.5px solid var(--line);border-bottom:none;border-radius:6px 10px 0 0}
.structure-card .st-tag{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--seal);position:absolute;top:-10px;left:12px}
.structure-card h3{font-family:var(--font-body);font-weight:700;font-size:18.5px;margin-bottom:14px}
.structure-card dl{display:flex;flex-direction:column;gap:12px}
.structure-card dt{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-700)}
.structure-card dd{font-size:14px;color:var(--slate);margin:2px 0 0}

/* package columns */
.pkg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pkg-col{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:26px;box-shadow:var(--sh-sm)}
.pkg-col h3{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-700);margin-bottom:16px;font-weight:700}
.pkg-col ul{display:flex;flex-direction:column;gap:10px}
.pkg-col li{font-size:13.8px;padding-left:22px;position:relative;color:var(--slate)}
.pkg-col li::before{content:"✓";position:absolute;left:0;color:var(--navy-700);font-weight:700}
.pkg-col.optional{background:var(--mist)}
.pkg-col.optional li::before{content:"+";color:var(--gold)}
.pkg-legend{margin-top:20px;font-size:12.5px;color:var(--slate);font-family:'Space Mono',monospace}

/* ---------- footer ---------- */
footer.site{background:var(--navy-900);color:#AEC0D4;padding:62px 0 30px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.12)}
footer.site h4{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7E97B2;margin-bottom:16px}
footer.site .logo{color:#fff}
footer.site p.desc{margin-top:16px;max-width:36ch;color:#8FA5BE;font-size:13.5px}
footer.site ul li{margin-bottom:11px}
footer.site a{text-decoration:none}
footer.site a:hover,footer.site a:focus-visible{color:#fff}
.foot-bottom{padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:#6883A3}

/* ---------- responsive ---------- */
@media (min-width:900px){.nav-phone{display:block}}
@media (max-width:980px){
  .nav-links{display:none}
  .burger{display:inline-flex}
  .hero-grid,.svc-grid{grid-template-columns:1fr;gap:64px}
  .certificate{transform:none;max-width:480px}
  .cert-scene:hover .certificate{transform:none}
  .folder-grid,.structure-grid{grid-template-columns:1fr 1fr}
  .ledger{grid-template-columns:1fr}
  .ledger-cell:nth-child(odd){border-right:none}
  .alt-panel{grid-template-columns:1fr;padding:34px}
  .trail,.trail.cols4{grid-template-columns:1fr 1fr}
  .cbd{grid-template-columns:1fr}
  .cards3,.quote-cards{grid-template-columns:1fr}
  .spotlight{grid-template-columns:1fr;padding:36px}
  .contact-grid,.svc-cols{grid-template-columns:1fr}
  .svc-includes{position:static}
  .pkg-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .wrap{padding:0 20px}
  section{padding:64px 0}
  .hero{padding:52px 0 68px}
  .folder-grid,.structure-grid,.pkg-grid{grid-template-columns:1fr}
  .trail,.trail.cols4{grid-template-columns:1fr;gap:44px}
  .form-row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .spotlight,.cta-band{padding:28px}
  .hero-ctas .btn{width:100%}
  .cta-band{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}

@media (max-width:479px){
  .nav-right .btn{display:none}   /* CTA lives in the mobile menu at this width */
  .logo{font-size:17px}
}

.svc-prose.legal h2{font-family:var(--font-body);font-weight:700;font-size:19px;margin:30px 0 10px;color:var(--navy-900)}


/* ---------- v3 refinements ---------- */

/* 2. Services mega-menu (desktop) */
.dd-menu.mega{min-width:0;width:900px;max-width:calc(100vw - 40px);display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:12px;position:fixed;left:50%;top:74px;transform:translate(-50%,-6px)}
.dd.open .dd-menu.mega{transform:translate(-50%,0)}
.dd-menu.mega .mega-col{padding:8px;border-radius:12px;border:1px solid var(--line);display:grid;grid-template-rows:40px repeat(3, 76px);align-content:start;align-items:start}
.dd-menu.mega a{overflow:hidden}
@media (max-width:1180px){ .dd-menu.mega{width:min(860px, calc(100vw - 40px))} }
.dd-menu.mega .mega-col.c1{background:#F3F6FA}
.dd-menu.mega .mega-col.c2{background:#FBFAF7}
.dd-menu.mega .mega-col.c3{background:#F2F5F8}
.dd-menu.mega .mega-col a:hover,.dd-menu.mega .mega-col a:focus-visible{background:rgba(255,255,255,.9);box-shadow:var(--sh-sm)}
.mega-head{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);padding:4px 12px 10px;border-bottom:1.5px dashed var(--line);margin-bottom:8px}
.dd-menu.mega a{padding:10px 12px}
.dd-menu.mega b{font-size:13.4px}

/* 1. photo layers inside doc-panels + CBD card */
.doc-panel img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;border-radius:12px}
.doc-panel .wm{position:relative;z-index:0}
.doc-panel .cap{z-index:2}
.doc-panel.has-photo::after{z-index:2}
.cbd-map{overflow:hidden}
.cbd-map img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.cbd-map .pin{position:relative;z-index:2}
.cbd-map .ring{z-index:2}
.cbd-map::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(11,31,51,.28),rgba(11,31,51,.05));z-index:1}

/* 4+5+6. structure cards: tints, icons, elevation, wide tabs, strong labels */
.structure-card{transition:transform .22s cubic-bezier(.2,.8,.3,1.05),box-shadow .22s,border-color .22s;box-shadow:var(--sh-sm)}
.structure-card:hover{transform:translateY(-6px) scale(1.012);box-shadow:var(--sh-lg)}
.structure-card::before{width:126px;height:16px;top:-15px}
.structure-card .st-tag{font-size:9.5px;letter-spacing:.09em;top:-12px;left:10px;background:#fff;padding:0 6px;line-height:13px;border-radius:4px;white-space:nowrap}
.structure-card .st-icn{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;border:1.5px solid var(--line);color:var(--navy-700);background:#fff}
.structure-card.st-ro{background:#F4F7FA;border-color:#D7E1EC}
.structure-card.st-ro::before,.structure-card.st-ro .st-tag{background:#F4F7FA;border-color:#D7E1EC}
.structure-card.st-ro:hover{border-color:var(--navy-700)}
.structure-card.st-llc{background:#FAF6EC;border-color:#E8DDC2}
.structure-card.st-llc::before,.structure-card.st-llc .st-tag{background:#FAF6EC;border-color:#E8DDC2}
.structure-card.st-llc:hover{border-color:var(--gold)}
.structure-card.st-jsc{background:#F2F7F5;border-color:#D3E3DC}
.structure-card.st-jsc::before,.structure-card.st-jsc .st-tag{background:#F2F7F5;border-color:#D3E3DC}
.structure-card.st-jsc:hover{border-color:#4E7E6E}
.structure-card dt{font-size:11px;letter-spacing:.1em;font-weight:700;color:var(--navy-900);padding-bottom:3px;border-bottom:2px solid var(--gold);display:inline-block;margin-bottom:2px}
.structure-card dd{font-size:14px}
@media (hover:none){ .structure-card:hover, a.folder:hover{transform:none} }


/* ---------- official IBC logo ---------- */
.logo-img{height:44px;width:auto;display:block}
.logo{gap:0;padding:2px 0}
.logo-mobile .logo-img{height:36px}
.logo-card{background:#fff;border-radius:12px;padding:10px 14px;display:inline-flex;box-shadow:var(--sh-sm)}
.logo-foot{height:48px}
@media (max-width:620px){ .logo-img{height:38px} .logo-foot{height:44px} }
@media (max-width:359px){ .logo-img{height:32px} }


/* ---------- v6 typography pass ---------- */
.svc-prose ul.checks{margin:6px 0 22px;display:flex;flex-direction:column;gap:12px}
.svc-prose ul.checks li{position:relative;padding-left:34px;color:var(--slate);font-size:16px;line-height:1.6;max-width:62ch}
.svc-prose ul.checks li::before{content:"\2713";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:7px;background:var(--mist);border:1.5px solid var(--line);color:var(--navy-700);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center}
.svc-prose ul.checks li b{color:var(--navy-900);font-weight:600}
.ledger-cell p,.folder p,.trail-step p,.index-card .who span,.quote-card p{line-height:1.62}
.index-card .q{font-family:var(--font-head);font-weight:600;font-size:16.5px;line-height:1.55}
.spotlight .q{font-family:var(--font-head);font-weight:600}
.cert-title{font-weight:700}
@media (max-width:620px){
  body{font-size:16px}
  .hero h1{font-size:clamp(31px,8.4vw,38px)}
  .svc-hero h1{font-size:clamp(28px,7.6vw,34px)}
}

/* ---------- v7 informational SVG visuals (brand-consistent) ---------- */
.viz{margin:30px 0 6px;max-width:100%}
.viz svg{width:100%;height:auto;display:block;overflow:visible}
.viz-cap{font-family:var(--font-body);font-size:13px;color:var(--slate);margin-top:12px;text-align:center}
.viz .v-band{fill:var(--mist)}
.viz .v-card{fill:#fff;stroke:var(--line);stroke-width:1.5}
.viz .v-navy{fill:var(--navy-700)}
.viz .v-navy-d{fill:var(--navy-900)}
.viz .v-gold{fill:var(--gold)}
.viz .v-seal{fill:var(--seal)}
.viz .v-title{font-family:var(--font-head);font-weight:700;fill:var(--navy-900)}
.viz .v-num{font-family:'Space Mono',monospace;font-weight:700;fill:#fff}
.viz .v-label{font-family:var(--font-body);font-weight:600;fill:var(--navy-900)}
.viz .v-sub{font-family:var(--font-body);fill:var(--slate)}
.viz .v-mono{font-family:'Space Mono',monospace;fill:var(--navy-700)}
.viz .v-conn{stroke:var(--gold);stroke-width:2;fill:none}
.viz .v-tier{fill:var(--navy-700)}


/* ---------- Regional Expansion (additive only) ---------- */
.regional-hero{padding:90px 0;background:linear-gradient(90deg,rgba(248,250,252,.98) 0%,rgba(248,250,252,.9) 43%,rgba(248,250,252,.18) 72%),url('images/singapore-marina-bay.jpg') center/cover no-repeat;min-height:560px;display:flex;align-items:center}
.regional-hero-inner{max-width:720px;margin-left:max(calc((100vw - var(--wrap))/2),0px);margin-right:auto}
.regional-hero h1{font-size:clamp(38px,5vw,64px);margin:20px 0 24px}.regional-hero h1 span{color:var(--navy-700)}.regional-hero p{font-size:18px;color:var(--slate);max-width:62ch}
.regional-intro{padding-bottom:74px}.regional-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.regional-benefits article{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:26px;box-shadow:var(--sh-sm)}.regional-benefits article>b{font-family:'Space Mono',monospace;color:var(--seal);font-size:12px}.regional-benefits h3{font-size:17px;margin:12px 0 8px}.regional-benefits p{font-size:14px;color:var(--slate)}
.country-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;perspective:1400px}.country-card{min-height:430px;position:relative;border-radius:18px;overflow:hidden;text-decoration:none;background-size:cover;background-position:center;box-shadow:var(--sh-md);border:1.5px solid rgba(255,255,255,.5);transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}.country-card.singapore{background-image:url('images/singapore-marina-bay.jpg')}.country-card.malaysia{background-image:url('images/malaysia-kuala-lumpur.jpg')}.country-card::after{content:"";position:absolute;inset:0;background:inherit;background-size:cover;background-position:center;transition:transform .5s;z-index:0}.country-card:hover,.country-card:focus-visible{transform:translateY(-10px) rotateX(2deg) rotateY(-2deg) scale(1.015);box-shadow:0 35px 70px -28px rgba(11,31,51,.55);border-color:var(--gold)}.country-card:nth-child(2):hover{transform:translateY(-10px) rotateX(2deg) rotateY(2deg) scale(1.015)}.country-card:hover::after{transform:scale(1.06)}.country-card:active{transform:translateY(-2px) scale(.99)}.country-card:focus-visible{outline:3px solid var(--gold);outline-offset:4px}.country-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,31,51,.94),rgba(11,31,51,.52) 60%,rgba(11,31,51,.14));z-index:1}.country-content{position:absolute;z-index:2;left:0;bottom:0;padding:38px;color:#fff;max-width:75%;transform:translateZ(25px)}.country-content>span{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#d9c38d}.country-content h2{font-size:38px;color:#fff;margin:8px 0 2px}.country-content h3{font-size:17px;color:#d9c38d;margin-bottom:14px}.country-content p{font-size:14px;color:#edf3f9}.country-content strong{display:inline-flex;margin-top:20px;gap:9px;align-items:center;font-size:14px}.country-content i{font-style:normal;transition:transform .2s}.country-card:hover i{transform:translateX(5px)}
.regional-cta{padding:70px 0}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:44px}.cta-inner h2{font-size:clamp(28px,3.5vw,42px);margin:14px 0 12px;max-width:760px}.cta-inner p{color:#bfd0e1}.cta-inner .btn{flex-shrink:0}
.partner-hero{padding:76px 0;min-height:440px;display:flex;align-items:center;background-size:cover;background-position:center}.partner-hero.malaysia-bg{background-image:linear-gradient(90deg,rgba(248,250,252,.99),rgba(248,250,252,.9) 48%,rgba(248,250,252,.2)),url('images/malaysia-kuala-lumpur.jpg')}.partner-hero.singapore-bg{background-image:linear-gradient(90deg,rgba(248,250,252,.99),rgba(248,250,252,.9) 48%,rgba(248,250,252,.2)),url('images/singapore-marina-bay.jpg')}.partner-hero-copy{width:100%}.partner-hero-copy>p{max-width:650px;color:var(--slate);font-size:18px}.partner-hero h1{font-size:clamp(36px,4.5vw,56px);max-width:800px;margin:18px 0 20px}
.profile-grid{display:grid;grid-template-columns:280px 1fr;gap:54px;align-items:start}.profile-photo{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--sh-sm);text-align:center}.profile-photo img{border-radius:10px;width:100%}.profile-photo span{font-family:'Space Mono',monospace;font-size:9.5px;color:var(--slate);display:block;padding:12px 4px 2px}.partner-profile h2,.profile-grid h2{font-size:clamp(28px,3vw,39px);margin:14px 0 14px}.profile-lede{color:var(--slate);font-size:17.5px}.credential-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:26px}.check-list{display:flex;flex-direction:column;gap:11px}.check-list li{position:relative;padding-left:24px;color:var(--slate);font-size:15px}.check-list li::before{content:'✓';position:absolute;left:0;color:var(--seal);font-weight:800}.expertise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.expertise-grid article{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:25px;box-shadow:var(--sh-sm)}.expertise-grid h3{font-size:17px;margin-bottom:9px}.expertise-grid p{font-size:14px;color:var(--slate)}.details-grid{display:grid;grid-template-columns:1fr .85fr;gap:54px;align-items:start}.details-grid h2{font-size:clamp(28px,3vw,38px);margin:14px 0}.details-grid p{color:var(--slate);margin-bottom:22px}.experience-card{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:30px;box-shadow:var(--sh-md)}.experience-card h3{margin-bottom:18px}.experience-card ul{list-style:disc;padding-left:20px}.experience-card li{color:var(--slate);font-size:14.5px;margin:10px 0}
@media(max-width:980px){.regional-benefits{grid-template-columns:1fr 1fr}.country-grid{grid-template-columns:1fr}.profile-grid{grid-template-columns:220px 1fr}.expertise-grid{grid-template-columns:1fr 1fr}.details-grid{grid-template-columns:1fr}.regional-hero-inner{margin:0 auto}}
@media(max-width:700px){.regional-hero{min-height:auto;padding:70px 0;background-image:linear-gradient(rgba(248,250,252,.93),rgba(248,250,252,.93)),url('images/singapore-marina-bay.jpg')}.regional-benefits{grid-template-columns:1fr}.country-card{min-height:390px}.country-content{max-width:100%;padding:28px}.country-content h2{font-size:32px}.cta-inner{flex-direction:column;align-items:flex-start}.profile-grid{grid-template-columns:1fr}.profile-photo{max-width:260px}.credential-grid{grid-template-columns:1fr}.expertise-grid{grid-template-columns:1fr}.partner-hero{background-image:none!important;background:linear-gradient(160deg,#fff,var(--mist))!important}.partner-hero .btn{width:100%}}

/* Navigation integrity fix: keep every original service visible in the desktop mega-menu. */
.dd-menu.mega .mega-col{grid-template-rows:40px;grid-auto-rows:minmax(76px,auto)}
.dd-menu.mega a{overflow:visible;min-width:0}

/* ---------- v9 premium service hero photography ---------- */
/* Applied only to advisory service pages. Virtual Office and Private Office remain unchanged. */
.svc-hero-photo{
  position:relative;
  overflow:hidden;
  min-height:500px;
  padding:72px 0 78px;
  display:flex;
  align-items:center;
  background:var(--navy-900);
  isolation:isolate;
}
.svc-hero-photo .svc-hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--svc-hero-pos,center center);
  z-index:-3;
  transform:scale(1.012);
}
.svc-hero-photo::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg,rgba(7,25,44,.97) 0%,rgba(9,31,54,.93) 39%,rgba(10,36,62,.72) 64%,rgba(10,36,62,.42) 100%);
}
.svc-hero-photo::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(5,18,33,.18)),
    radial-gradient(circle at 82% 46%,rgba(213,164,49,.11),transparent 34%);
  pointer-events:none;
}
.svc-hero-photo .svc-grid{
  position:relative;
  z-index:1;
  display:block;
}
.svc-hero-photo .svc-hero-copy{max-width:780px}
.svc-hero-photo .eyebrow{color:#e2b94f}
.svc-hero-photo h1{
  color:#fff;
  max-width:22ch;
  text-shadow:0 2px 18px rgba(0,0,0,.22);
}
.svc-hero-photo .lede{
  color:#d7e2ed;
  max-width:62ch;
  text-shadow:0 1px 8px rgba(0,0,0,.16);
}
.svc-hero-photo .btn-line{
  color:#fff;
  border-color:rgba(255,255,255,.58);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(3px);
}
.svc-hero-photo .btn-line:hover,
.svc-hero-photo .btn-line:focus-visible{
  color:#fff;
  border-color:#fff;
  background:rgba(255,255,255,.13);
}
@media(max-width:980px){
  .svc-hero-photo{min-height:470px;padding:66px 0 72px}
  .svc-hero-photo .svc-hero-copy{max-width:700px}
  .svc-hero-photo::before{
    background:linear-gradient(90deg,rgba(7,25,44,.96) 0%,rgba(9,31,54,.90) 58%,rgba(10,36,62,.62) 100%);
  }
}
@media(max-width:620px){
  .svc-hero-photo{min-height:auto;padding:54px 0 58px}
  .svc-hero-photo .svc-hero-bg{object-position:var(--svc-hero-pos,center center);transform:scale(1.025)}
  .svc-hero-photo::before{
    background:linear-gradient(90deg,rgba(7,25,44,.96),rgba(9,31,54,.90));
  }
  .svc-hero-photo h1{max-width:19ch}
  .svc-hero-photo .lede{font-size:16.5px;line-height:1.62}
  .svc-hero-photo .hero-ctas{align-items:stretch}
  .svc-hero-photo .hero-ctas .btn{width:100%;text-align:center}
}


/* ---------- Confirmed IBC service information update ---------- */
.service-pricing,.meeting-pricing{padding-top:64px}
.service-pricing .sec-head.compact,.meeting-pricing .sec-head.compact{max-width:820px;margin-bottom:30px}
.service-pricing .sec-head.compact h2,.meeting-pricing .sec-head.compact h2{font-size:clamp(27px,3.2vw,40px)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.pricing-grid-two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px}
.pricing-grid-single{grid-template-columns:minmax(0,760px)}
.service-price-card{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:18px;min-width:0}
.service-price-card.featured{border-color:rgba(163,112,20,.48);box-shadow:0 18px 44px -30px rgba(11,31,51,.55)}
.service-price-card.compact-card{padding:26px}
.service-price-card h3{font-family:var(--font-head);font-size:22px;margin:8px 0 12px}
.service-price-card>p{color:var(--slate);font-size:14.5px;line-height:1.65;flex:1}
.price-card-head{border-bottom:1px solid var(--line);padding-bottom:18px}
.price-kicker,.route-tag{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--seal);font-weight:700}
.service-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;margin-top:8px;color:var(--navy-900)}
.service-price strong{font-family:var(--font-head);font-size:clamp(25px,2.4vw,34px);line-height:1.12}
.service-price.pending strong{font-size:22px;color:var(--navy-700)}
.price-prefix,.price-unit{font-size:13px;color:var(--slate);font-weight:600}
.price-tax{font-size:12.5px!important;color:var(--slate);margin-top:8px}
.mini-checks{display:flex;flex-direction:column;gap:9px;margin:0}
.mini-checks li{position:relative;padding-left:22px;color:var(--slate);font-size:13.5px}
.mini-checks li::before{content:'✓';position:absolute;left:0;color:var(--seal);font-weight:800}
.service-price-card .btn{margin-top:auto;text-align:center}
.pricing-disclaimer{font-size:12.5px;color:var(--slate);margin-top:18px;max-width:90ch}
.route-cards article{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:28px;box-shadow:var(--sh-sm)}
.route-cards article h3{font-size:19px;margin:10px 0}
.route-cards article p{font-size:14px;color:var(--slate)}
.footer-contact{font-size:12px}
.foot-label{display:block;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#91a9bf;margin-bottom:2px}
.foot-address,.foot-hours{line-height:1.55}
.contact-lines .row{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px}
.contact-label{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--seal);font-weight:700;padding-top:2px}
@media(max-width:980px){.pricing-grid{grid-template-columns:1fr 1fr}.pricing-grid-single{grid-template-columns:1fr}}
@media(max-width:700px){.pricing-grid,.pricing-grid-two{grid-template-columns:1fr}.service-pricing,.meeting-pricing{padding-top:46px}.contact-lines .row{grid-template-columns:1fr;gap:3px}}

/* Footer contact-column fit for confirmed departmental details. */
@media(min-width:981px){
  footer.site .foot-grid{grid-template-columns:1.2fr .85fr .8fr 1.35fr}
}
footer.site .foot-grid>div:last-child a{overflow-wrap:anywhere;word-break:break-word}

/* ---------- v10 motion & polish pass ----------
   Restrained, trust-first motion layer. All content untouched.
   Tokens below are consumed by earlier rules (CSS vars resolve at computed time). */
:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-1:.16s;
  --dur-2:.24s;
}

/* Hero entrance choreography (pure CSS: works without JS, killed by reduced-motion) */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero .eyebrow,.svc-hero .eyebrow,.regional-hero .eyebrow,.partner-hero .eyebrow{animation:rise .55s var(--ease-out) both}
.hero h1,.svc-hero h1,.regional-hero h1,.partner-hero h1{animation:rise .65s var(--ease-out) .08s both}
.hero .lede,.svc-hero .lede,.regional-hero-inner>p,.partner-hero-copy>p{animation:rise .65s var(--ease-out) .16s both}
.hero-ctas{animation:rise .65s var(--ease-out) .24s both}
.fact-row{animation:rise .65s var(--ease-out) .34s both}
.cert-scene{animation:rise .9s var(--ease-out) .2s both}

/* Homepage hero entrance — .home-hero was matched by none of the rules above,
   so the most important page was the only one that did not animate in. */
.home-hero-eyebrow{animation:rise .40s var(--ease-out) both}
.home-hero h1{animation:rise .46s var(--ease-out) .06s both}
.home-hero-copy-inner > p{animation:rise .46s var(--ease-out) .12s both}
.home-hero-actions{animation:rise .46s var(--ease-out) .18s both}
.home-hero-stats{animation:rise .46s var(--ease-out) .25s both}

/* Header elevation once the page is scrolled (class toggled via IntersectionObserver sentinel) */
header.site{transition:box-shadow .35s var(--ease-out),background .35s ease}
header.site.scrolled{box-shadow:0 12px 32px -20px rgba(11,31,51,.28);background:rgba(248,250,252,.985)}

/* Scroll-reveal: applies ONLY when JS adds html.anim (motion-safe + IO support confirmed).
   No-JS and reduced-motion users always see full content. */
html.anim .rv{opacity:0;transform:translateY(22px);transition:opacity .65s var(--ease-out),transform .65s var(--ease-out);transition-delay:calc(var(--rvi,0)*70ms)}
html.anim .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.anim .rv{opacity:1 !important;transform:none !important}
}

/* FAQ: answer eases in; open state gets a quiet cue */
@keyframes faq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
details{transition:border-color var(--dur-2) ease}
details[open]{border-color:#C3D2E4}
details[open] p{animation:faq-in .35s var(--ease-out) both}

/* Marquee courtesy: pause the client strip on hover */
.trust-strip:hover .row{animation-play-state:paused}

/* Dropdown items: slight settle on the mega menu columns */
.dd-menu.mega .mega-col a{transition:background var(--dur-1) ease,box-shadow var(--dur-1) ease}

/* ---------- v11 photography: in-flow photo figures ----------
   Reuses the existing .doc-panel frame (border, radius, shadow, inner gold
   rule, .cap overlay) so office photos sit inside prose and pricing sections
   with the same treatment as the hero panels. */
.doc-panel.photo-figure{margin:30px 0 8px;min-height:360px}
@media(max-width:980px){.doc-panel.photo-figure{min-height:300px}}
@media(max-width:620px){.doc-panel.photo-figure{min-height:220px}}


/* ---------- landing page why-ibc dark color refresh ---------- */
#why-ibc{
  background:#06274A;
}
#why-ibc .sec-head h2{
  color:#F5F2EA;
}
#why-ibc .sec-head p{
  color:#D7E2EE;
}
#why-ibc .eyebrow{
  color:#D7A73E;
}
#why-ibc .eyebrow::before{
  background:#D7A73E;
}
#why-ibc .ledger{
  background:transparent;
  border-color:rgba(255,255,255,.12);
}
#why-ibc .ledger-cell{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
}
#why-ibc .ledger-cell .num{
  color:#D7A73E;
}
#why-ibc .ledger-cell h3{
  color:#FFFFFF;
}
#why-ibc .ledger-cell p{
  color:#D7E2EE;
}


/* ---------- language selector ---------- */
.lang-switcher{position:relative;display:flex;align-items:center;flex:0 0 auto}
.lang-select{appearance:none;-webkit-appearance:none;min-width:142px;padding:10px 34px 10px 12px;border:1.5px solid var(--field-line);border-radius:10px;background:#fff;color:#0B1F33;font:600 13px/1.2 'Inter','Segoe UI',Arial,sans-serif;cursor:pointer;box-shadow:0 6px 18px -14px rgba(11,31,51,.35);background-image:linear-gradient(45deg,transparent 50%,#475569 50%),linear-gradient(135deg,#475569 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.lang-select:hover,.lang-select:focus{border-color:#163A5F;outline:none}
.lang-select:focus-visible{outline:3px solid rgba(183,154,91,.45);outline-offset:2px}
.mobile-lang-row{padding:4px 0 14px;border-bottom:1px solid #DCE4EE;margin-bottom:4px}
.mobile-lang-row .lang-select{width:100%;min-width:0;padding-top:12px;padding-bottom:12px}
html[lang="vi"] body{font-family:'Be Vietnam Pro','Inter','Segoe UI',Arial,sans-serif}
html[lang="vi"] .btn,html[lang="vi"] .nav-links,html[lang="vi"] .mobile-panel,html[lang="vi"] input,html[lang="vi"] select,html[lang="vi"] textarea,html[lang="vi"] button{font-family:'Be Vietnam Pro','Inter','Segoe UI',Arial,sans-serif}

/* ---------- Vietnamese diacritics: headings & small-caps labels ----------
   Body text already uses Be Vietnam Pro (rule above). Headings still fell back
   to Manrope and the small-caps labels to Space Mono; neither carries the
   Vietnamese character set, so marks such as the dot below in "rộng" and the
   stacked marks in "LẬP KẾ HOẠCH" rendered incorrectly.
   Everything below is scoped to html[lang="vi"], so English (lang="en") and
   Simplified Chinese (lang="zh-CN") pages are unaffected. */
html[lang="vi"] h1,html[lang="vi"] h2,html[lang="vi"] h3,html[lang="vi"] h4,
html[lang="vi"] .index-card .q,html[lang="vi"] .spotlight .q,
html[lang="vi"] .cert-title,html[lang="vi"] .fact .n,
html[lang="vi"] #home-hero-title,html[lang="vi"] .home-hero-title{
  font-family:'Be Vietnam Pro','Inter','Segoe UI',Arial,sans-serif}

/* labels that were set in Space Mono (Latin-only) */
html[lang="vi"] .eyebrow,html[lang="vi"] .fact .l,html[lang="vi"] .trust-item,
html[lang="vi"] .cert-head,html[lang="vi"] .cert-ribbon,html[lang="vi"] .cbd-addr,
html[lang="vi"] .contact-lines,html[lang="vi"] .contact-label,html[lang="vi"] .crumb,
html[lang="vi"] .doc-panel .cap,html[lang="vi"] .folder .tag,html[lang="vi"] .foot-label,
html[lang="vi"] .init,html[lang="vi"] .ledger-cell .num,html[lang="vi"] .mega-head,
html[lang="vi"] .mini-seal,html[lang="vi"] .mp-label,html[lang="vi"] .nav-phone,
html[lang="vi"] .pkg-col h3,html[lang="vi"] .pkg-legend,html[lang="vi"] .pop-chip,
html[lang="vi"] .price-kicker,html[lang="vi"] .quote-card .qc-tag,html[lang="vi"] .route-tag,
html[lang="vi"] .seal-stamp,html[lang="vi"] .spotlight .who,
html[lang="vi"] .structure-card .st-tag,html[lang="vi"] .structure-card dt,
html[lang="vi"] .trail-step .dur,html[lang="vi"] .trail-step::before,
html[lang="vi"] footer.site h4{
  font-family:'Be Vietnam Pro','Inter','Segoe UI',Arial,sans-serif;
  letter-spacing:.08em}   /* Space Mono tracking is too wide for stacked marks */

/* Review row 69 — the Vietnamese footer descriptor is the longest of the three
   languages and broke into a very ragged column. text-wrap:pretty lets the
   browser even out the line lengths and avoid a one-word last line. Vietnamese
   only; nothing else about the footer changes. */
html[lang="vi"] footer.site .desc{text-wrap:pretty}

/* The homepage hero shipped after the block above and was never added to it,
   so Vietnamese diacritics in the eyebrow and the three stat labels were still
   rendering through Space Mono / Manrope, neither of which carries the
   Vietnamese character set. Same treatment as every other label on the site. */
html[lang="vi"] .home-hero-eyebrow,html[lang="vi"] .home-stat span{
  font-family:'Be Vietnam Pro','Inter','Segoe UI',Arial,sans-serif;
  letter-spacing:.08em}
html[lang="vi"] .home-stat strong{
  font-family:'Be Vietnam Pro','Inter','Segoe UI',Arial,sans-serif}

@media(max-width:1100px){.home-nav-right .lang-switcher,.nav-right>.lang-switcher{display:none}}



/* ---------- Pricing detail refresh ---------- */
.term-pricing{display:grid;gap:10px;margin-top:-4px}
.term-row{display:flex;justify-content:space-between;gap:14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--mist);font-size:13.5px;color:var(--slate)}
.term-row b{color:var(--navy-900);font-size:14.5px}
.term-row em{font-style:normal;color:var(--seal);font-size:12px}
.compact-price strong{font-size:clamp(23px,2.2vw,30px)}
.benefit-side-card .mini-checks.compact li{font-size:13px}
.benefit-side-card .mini-checks.compact{gap:8px}
#reviews .cards3{align-items:stretch}
#reviews .index-card{display:flex;flex-direction:column;gap:18px}
#reviews .q{flex:1}

/* ---------- Vietnamese contact page: advisor cards + free-consultation banner
   Ported from the client review sheet, rebuilt with IBC's existing tokens
   (--navy-700, --seal, --line, --mist, --sh-sm) instead of the mockup's own
   palette and fonts. Scoped to html[lang="vi"], so the English and Chinese
   contact pages are untouched. */
html[lang="vi"] .vi-advisors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;margin:26px 0 22px}
html[lang="vi"] .vi-advisor{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0;
  padding:16px 15px;background:#fff;border:1.5px solid var(--line);border-radius:12px;
  box-shadow:var(--sh-sm);text-decoration:none;
  transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s,border-color .18s}
html[lang="vi"] .vi-advisor:hover,html[lang="vi"] .vi-advisor:focus-visible{
  transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--navy-700)}
html[lang="vi"] .vi-advisor:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
html[lang="vi"] .vi-advisor-ic{width:40px;height:40px;flex-shrink:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--seal);
  background:linear-gradient(135deg,#FFF7F7,#FFE7E8)}
html[lang="vi"] .vi-advisor-tx{min-width:0;display:flex;flex-direction:column;gap:3px}
html[lang="vi"] .vi-advisor-tx b{font-size:14.5px;font-weight:700;color:var(--navy-900);
  line-height:1.35}
html[lang="vi"] .vi-advisor-tx span{font-size:12px;color:var(--slate);line-height:1.45;
  overflow-wrap:anywhere}
html[lang="vi"] .vi-advisor-tx{width:100%}

html[lang="vi"] .vi-free{position:relative;overflow:hidden;display:flex;align-items:center;
  gap:17px;margin-top:24px;padding:18px 26px;border-radius:14px;color:#fff;text-decoration:none;
  background:linear-gradient(110deg,var(--seal-deep),var(--seal) 52%,var(--seal-deep));
  box-shadow:0 14px 32px -14px rgba(163,42,34,.5);
  transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s}
html[lang="vi"] .vi-free:hover{transform:translateY(-2px);box-shadow:0 18px 38px -14px rgba(163,42,34,.6)}
html[lang="vi"] .vi-free:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
html[lang="vi"] .vi-free::before{content:"";position:absolute;right:-40px;bottom:-90px;
  width:180px;height:180px;border-radius:50%;border:1px solid rgba(255,255,255,.16)}
html[lang="vi"] .vi-free-ic{position:relative;z-index:2;width:56px;height:56px;flex-shrink:0;
  border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--seal);
  background:#fff;box-shadow:0 5px 18px rgba(90,0,0,.18)}
html[lang="vi"] .vi-free-tx{position:relative;z-index:2;display:flex;flex-direction:column;gap:3px;
  padding-right:46px}
html[lang="vi"] .vi-free-tx b{font-size:20px;font-weight:800;line-height:1.3}
html[lang="vi"] .vi-free-tx span{font-size:13.5px;color:rgba(255,255,255,.92);line-height:1.55}
html[lang="vi"] .vi-free-sp{position:absolute;top:50%;right:24px;transform:translateY(-50%);
  font-size:26px;color:rgba(255,255,255,.9)}
@media(max-width:980px){
  html[lang="vi"] .vi-advisors{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  html[lang="vi"] .vi-advisors{grid-template-columns:1fr;gap:10px}
  html[lang="vi"] .vi-free{padding:16px 18px;gap:13px}
  html[lang="vi"] .vi-free-tx b{font-size:17px}
  html[lang="vi"] .vi-free-sp{display:none}
}
@media (prefers-reduced-motion:reduce){
  html[lang="vi"] .vi-advisor,html[lang="vi"] .vi-free{transition:none}
}


/* ============================================================
   REDESIGN PASS — additive fixes.
   Everything below is appended rather than merged into the rules
   above, so the original declarations remain readable and diffable.
   Applies to all three language trees (EN / VI / ZH share this file).
   ============================================================ */

/* --- 1. ONE HEADER PER LANGUAGE ------------------------------------------
   Every page in every language now renders the master header:
   .home-site-header > .home-nav-shell > (.home-logo | .home-nav-links | .home-nav-right).
   The earlier `header.site .wrap / .nav / .nav-links` overrides are gone —
   they were fighting .home-nav-links for the nav's own typography. The master
   header's rules in homepage-hero.css are now the single source of truth for
   nav font, size, weight, colour, padding and the gold underline, and the
   language-specific font overrides (html[lang="vi"], zh.css) still layer on top.
   Per-language typography is preserved; per-page variation is not possible. --- */
.home-nav-right .btn{white-space:nowrap}
.home-site-header .home-nav-shell{gap:26px}

/* The scrolled state must stay the same white as the resting state. The generic
   header.site.scrolled rule is more specific than .home-site-header.scrolled,
   so it was tinting the master header off-white the moment you scrolled. */
header.site.home-site-header.scrolled{background:rgba(248,250,252,.985)}  /* same hue as the resting header — only the opacity firms up */

/* Active section on the Services dropdown: the existing underline rule only
   matched `.home-nav-links > a`, so a service page could not show its section. */
.home-nav-links .dd-toggle.home-nav-active{color:#102a49}
.home-nav-links .dd-toggle.home-nav-active::after{transform:scaleX(1)}

/* Tap-to-call row in the mobile menu. The phone number left the header (it
   cannot coexist with the full nav on one row in English below 1366px); the
   mobile menu had no phone link at all before, so phones gain one. */
.mp-phone{font-family:'Space Mono',monospace;font-size:14px;letter-spacing:.01em;
  color:var(--navy-900);margin-top:10px;border:1.5px dashed var(--line);justify-content:space-between}
.mp-phone svg{color:var(--seal);flex-shrink:0}
.mp-phone:hover,.mp-phone:focus-visible{background:var(--mist);border-color:var(--seal)}
html[lang="vi"] .mp-phone{font-family:'Be Vietnam Pro','Inter','Segoe UI',Arial,sans-serif}

/* --- 1b. ONE desktop/mobile breakpoint, site-wide -------------------------
   Before: the desktop nav collapsed at 980px but the inline language selector
   was hidden from 1100px down — so between 981px and 1100px there was NO way
   to change language on any page, in any language. The burger and the inline
   selector now hand over at exactly the same width, and that width (1240px) is
   the widest point at which the longest nav (English) still holds one row. --- */
@media (max-width:1240px){
  .nav-links{display:none}
  .burger{display:inline-flex}
  .home-nav-right .lang-switcher,.nav-right>.lang-switcher{display:none}
}
@media (min-width:1241px){
  .burger{display:none}
  .home-nav-right .lang-switcher,.nav-right>.lang-switcher{display:flex}
}

/* --- 2. Hover states latched on touch: only .folder and .structure-card were
   gated. Neutralise every hover transform where hover is not real. --- */
@media (hover:none),(pointer:coarse){
  .btn-seal:hover,
  .btn-navy:hover,
  .btn-paper:hover,
  .index-card:hover,
  .structure-card:hover,
  a.folder:hover,
  .country-card:hover,
  .country-card:nth-child(2):hover,
  html[lang="vi"] .vi-free:hover{transform:none}
  a.folder:hover::before{transform:none}
  .country-card:hover::after{transform:none}
  .country-card:hover i{transform:none}
  a.folder:hover .icn{background:var(--mist);color:var(--navy-700)}
  .btn-line:hover{background:transparent;color:var(--navy-700)}
  .home-secondary-cta:hover{background:rgba(5,31,60,.18);color:#fff}
}

/* --- 3. Press states. The site had two :active rules in 59KB; a tap or click
   that produces no acknowledgement reads as a dropped input. --- */
@media (hover:hover) and (pointer:fine){
  .nav-links > a:active,.dd-toggle:active{transform:translateY(1px)}
}
a.folder:active{transform:translateY(-3px) scale(1.004);transition-duration:.08s}
.structure-card:active{transform:translateY(-2px) scale(1.004);transition-duration:.08s}
.index-card:active{transform:translateY(-2px);transition-duration:.08s}
.burger:active,.mp-close:active{transform:scale(.95);transition:transform .08s}
.mobile-panel a:active{background:var(--mist)}
summary:active{opacity:.72}
.lang-select:active{border-color:var(--navy-700)}

/* --- 4. .structure-card re-implements the folder motif but shipped with no
   focus state at all. Give it the same affordance as a.folder. --- */
.structure-card:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
a.structure-card:focus-visible{transform:translateY(-6px) scale(1.012);box-shadow:var(--sh-lg)}

/* --- 5. Reduced motion: the global kill at the top of the motion block covers
   transitions and animations, but scroll-behavior:smooth is separate. --- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* --- 6. Header height: one value, set once on the master shell. --- */
@media (max-width:980px){
  html{scroll-padding-top:76px}
}


/* --- About hero: the team photograph --------------------------------------
   .doc-panel is a fixed 300px tall, so its aspect swings from 1.66 at desktop
   to 3.03 at tablet to 1.12 on a phone. With object-fit:cover that would crop
   a wide seven-person lineup down to a band of torsos on tablet and to three
   faces on a phone. This one panel takes the photograph's own 5:3 proportion
   instead, capped so the tablet hero does not become a wall of photo. --- */
.doc-panel.team-hero-photo{
  min-height:0;
  aspect-ratio:5/3;
  max-height:430px;
}
.doc-panel.team-hero-photo img.ph{
  object-position:center 42%;   /* any residual crop takes floor, never faces */
}

/* Seat the photograph inside the frame instead of letting it sit on top of one.
   A navy scrim rising off the bottom edge ties the bright glass office to the
   site palette and gives the caption something to sit on; a soft inner shadow
   stops the blown-out background butting straight into the cream border. */
.doc-panel.team-hero-photo::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:12px;
  background:
    /* a whisper along the top edge: without it the gold inner rule below
       disappears against the blown-out glass and the frame stops reading */
    linear-gradient(to bottom, rgba(11,31,51,.16) 0%, rgba(11,31,51,0) 20%),
    linear-gradient(to top,
      rgba(11,31,51,.50) 0%,
      rgba(11,31,51,.15) 26%,
      rgba(11,31,51,0)   54%);
  box-shadow:inset 0 0 38px rgba(11,31,51,.15);
}
/* keep the existing gold inner rule and the caption above the new scrim, and
   give the rule a little more presence — this photograph is much brighter than
   the one it replaced, and at .4 the rule vanished across the top half */
.doc-panel.team-hero-photo::after{z-index:3;border-color:rgba(183,154,91,.62)}
.doc-panel.team-hero-photo .cap{z-index:4;background:rgba(11,31,51,.62)}



/* ============================================================
   AMBIENT BACKGROUND SYSTEM  —  soft blue, whole site
   Backgrounds only. No copy, type, layout, spacing, card, button, form or
   navigation change; no HTML was edited, so all three language versions get
   this identically from this one file.

   Alternating white and blue sections would read as mechanical stripes, so
   instead <main> carries a single continuous wash the height of the document
   and the existing bands sit inside it with faded edges.
   ============================================================ */

/* ---------- 1. the page base ---------- */
body{background:var(--bg-white)}

/* ---------- 2. one continuous wash across the whole document ----------
   background-size:100% 100% stretches the linear gradient over the full height
   of <main>, so the tone evolves once from top to bottom of the page instead of
   repeating or stepping. The three radials are very large and very faint: they
   read as ambient light and depth, not as shapes. No image files, so it costs
   nothing to download and scales to any viewport. */
main{
  background:
    radial-gradient(1150px 760px at 88%  6%, rgba(216,230,243,.40), transparent 68%),
    radial-gradient(1000px 860px at  2% 46%, rgba(225,236,247,.36), transparent 70%),
    radial-gradient( 950px 700px at 96% 84%, rgba(234,242,250,.50), transparent 72%),
    linear-gradient(180deg,
      #FFFFFF  0%,
      #FAFCFE  8%,
      #F5F9FD 20%,
      #EFF5FB 36%,
      #EAF2FA 52%,
      #EDF3FB 66%,
      #F4F8FD 82%,
      #FAFCFE 94%,
      #FFFFFF 100%);
  background-repeat:no-repeat;
  background-size:100% 100%;
}

/* ---------- 3. the existing bands, with their edges dissolved ----------
   .band-mist was a flat #F1F5F9 with hard top and bottom edges. It keeps its
   job — marking a denser zone — but now fades in and out of the wash behind it,
   so no visible line is introduced anywhere on the page. */
.band-mist{
  background:linear-gradient(180deg,
    rgba(225,236,247,0)   0%,
    rgba(225,236,247,.85) 7%,
    rgba(225,236,247,.85) 93%,
    rgba(225,236,247,0)   100%);
}
/* The numbered process markers punch a ring through the band to separate the
   circle from the surface behind it. That ring has to match the surface, which
   is now the blend above rather than flat --mist. */
.band-mist .trail-step::before{box-shadow:0 0 0 5px #E3EDF8,var(--sh-sm)}

/* ---------- 4. light heroes join the wash ----------
   .hero sat on flat --off. Its own two brand radials are kept exactly as they
   were; only the flat base underneath them changes. */
.hero{background:
  radial-gradient(900px 420px at 88% -10%, rgba(22,58,95,.08), transparent 60%),
  radial-gradient(700px 380px at -10% 110%, rgba(183,154,91,.10), transparent 60%),
  linear-gradient(180deg,#FFFFFF 0%,#F7FAFD 100%)}

/* The two photographic heroes use a near-white scrim to hold their headline off
   the image. Same geometry, same opacities — the tint just shifts from cool grey
   to the same soft blue as the rest of the page so the hero and the section
   under it read as one surface. */
.regional-hero{background:linear-gradient(90deg,
  rgba(247,250,253,.98) 0%,rgba(247,250,253,.9) 43%,rgba(247,250,253,.18) 72%),
  url('images/singapore-marina-bay.jpg') center/cover no-repeat}
.partner-hero.malaysia-bg{background-image:linear-gradient(90deg,
  rgba(247,250,253,.99),rgba(247,250,253,.9) 48%,rgba(247,250,253,.2)),
  url('images/malaysia-kuala-lumpur.jpg')}
.partner-hero.singapore-bg{background-image:linear-gradient(90deg,
  rgba(247,250,253,.99),rgba(247,250,253,.9) 48%,rgba(247,250,253,.2)),
  url('images/singapore-marina-bay.jpg')}

/* ---------- 5. easing into and out of the dark brand sections ----------
   The navy sections are untouched. These two rules only soften the surface
   immediately above and below them so the change of tone is not abrupt. */
.band-navy,#why-ibc{position:relative}
.band-navy::after,#why-ibc::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:100%;
  height:70px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(216,230,243,0),rgba(216,230,243,.5));
}

/* ---------- 6. optional utilities ----------
   Not used by any page today. They exist so a future section can join the
   system without anyone having to reverse-engineer these values. */
.bg-white-soft{background:linear-gradient(180deg,var(--bg-white),var(--bg-soft))}
.bg-blue-soft{background:var(--bg-soft)}
.bg-gradient-down{background:linear-gradient(180deg,var(--bg-white),var(--bg-light))}
.bg-gradient-up{background:linear-gradient(180deg,var(--bg-light),var(--bg-white))}


/* ============================================================
   LANDING PAGE — LOCATION / OFFICES SPLIT BAND
   One section, two halves, separated by a diagonal that speaks the same
   language as the hero: the hero leans 164px over a 770px panel (~12 degrees)
   and carries a thin gold hairline on the seam. Both are reused here.

   The split is drawn as a masked background on ::before rather than with
   clip-path, so nothing can clip the copy, the seam stays crisp at every
   width, and the top and bottom edges fade into the ambient wash instead of
   butting against it.
   ============================================================ */
.split-band{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:68px 0 72px;
  --split-a:#F7FAFD;                 /* left  — near-white soft blue */
  --split-b:#E6EEF8;                 /* right — the same family, one step deeper */
  --split-seam:rgba(216,169,42,.32); /* the hero's gold hairline */
}
.split-band::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(96deg,
    var(--split-a)   0 calc(50% - 1px),
    var(--split-seam)  calc(50% - 1px) calc(50% + 1px),
    var(--split-b)   calc(50% + 1px) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 54px,#000 calc(100% - 54px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 54px,#000 calc(100% - 54px),transparent 100%);
}

.split-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(5,auto);
  gap:0;
  align-items:stretch;
}
/* subgrid ties each column's eyebrow/heading/paragraph/card/button to the
   SAME five row tracks, so whichever side has more text just grows that
   row for both columns — the images and buttons never drift out of line. */
.split-col{
  display:grid;
  grid-row:1 / -1;
  grid-template-rows:subgrid;
  align-content:start;
}
.split-col > .eyebrow,
.split-col > .split-cta{justify-self:start}
/* equal gutters on both sides of the seam, so the two cards compute to the
   same content width — and therefore, at a matched aspect-ratio, the same
   pixel height. */
.split-col--location{padding-right:84px}
.split-col--offices{padding-left:84px}

/* Compressed from the full-width original so two halves still fit the old
   height. Only this band is affected. */
.split-band h2{
  font-size:clamp(22px,2.1vw,27px);
  line-height:1.18;
  margin:12px 0 0;
  max-width:20ch;
}
.split-band > .wrap > .split-col p,
.split-col > p{
  color:var(--slate);
  margin:13px 0 0;
  max-width:49ch;
  font-size:15px;
  line-height:1.58;
}
.split-col > p a{color:var(--navy-700);font-weight:700}
.split-col .cbd-card{margin-top:18px;width:100%}
.split-col .cbd-map{min-height:0;aspect-ratio:16/9}
.split-col .cbd-map img.ph{object-position:center 18%;opacity:.78}
/* the pin and rings are an overlay, not part of the photo — at this smaller
   aspect they need a slightly firmer scrim to stay legible */
.split-col .cbd-map::after{background:linear-gradient(155deg,rgba(11,31,51,.46),rgba(11,31,51,.20))}
.split-col .cbd-addr{padding:13px 18px;font-size:11.5px;line-height:1.6}
.split-cta{margin-top:16px}
.split-col{min-height:100%}

/* The offices photo sits in the same card shell as the location map, minus the
   pin and rings, which mean "this is where we are" and would be wrong here. */
.office-photo{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--navy-900)}
.office-photo img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.office-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(11,31,51,.16),rgba(11,31,51,.02));
}

/* ---- tablet: the seam stands up too steeply to read, so ease it ---- */
@media(max-width:1180px){
  .split-col--location{padding-right:48px}
  .split-col--offices{padding-left:48px}
  .split-band::before{background:linear-gradient(94deg,
    var(--split-a) 0 calc(50% - 1px),
    var(--split-seam) calc(50% - 1px) calc(50% + 1px),
    var(--split-b) calc(50% + 1px) 100%)}
}

/* ---- stacked: the diagonal becomes a shallow horizontal divider ---- */
@media(max-width:980px){
  .split-band{padding:64px 0 68px}
  .split-grid{grid-template-columns:1fr;grid-template-rows:none;gap:46px}
  .split-col{display:block;grid-row:auto}
  .split-col--location{padding-right:0}
  .split-col--offices{padding-left:0}
  .split-band h2{max-width:24ch}
  .split-col > p{max-width:60ch}
  .split-band::before{
    background:linear-gradient(186deg,
      var(--split-a) 0 calc(50% - 1px),
      var(--split-seam) calc(50% - 1px) calc(50% + 1px),
      var(--split-b) calc(50% + 1px) 100%);
  }
}
@media(max-width:620px){
  .split-band{padding:54px 0 58px}
  .split-band h2{font-size:24px;max-width:none}
  .split-col > p{font-size:15px}
}