.topic-header { min-height:78px; display:grid; grid-template-columns:140px 1fr auto; align-items:center; gap:28px; padding:10px max(24px,calc((100vw - 1240px)/2)); background:rgba(255,255,255,.88); border-bottom:1px solid rgba(29,52,91,.1); backdrop-filter:blur(18px); }
.topic-header .brand { width:112px; height:56px; }.topic-header .brand img { width:100%; height:100%; object-fit:contain; }.topic-header nav { display:flex; justify-content:center; gap:28px; }.topic-header nav a { color:#1a345d; font-size:.82rem; font-weight:800; text-decoration:none; }.topic-header nav a:hover { color:#5a63ca; }.topic-language { display:flex; align-items:center; gap:8px; color:#a2adbd; font-size:.78rem; }.topic-language button { padding:4px; color:#71809a; background:none; border:0; cursor:pointer; font:inherit; font-weight:750; }.topic-language button[aria-pressed="true"] { color:#153b70; }
.topic-main { min-height:calc(100vh - 134px); background:radial-gradient(circle at 14% 2%,rgba(141,136,255,.25),transparent 28%),radial-gradient(circle at 90% 73%,rgba(112,205,242,.20),transparent 29%),linear-gradient(135deg,#f7f8ff,#f8fbff 51%,#fffbf4); }.topic-hero,.topic-content { width:min(1160px,calc(100% - 44px)); margin:0 auto; }.topic-hero { padding:clamp(80px,12vw,150px) 0 clamp(52px,7vw,86px); }.topic-hero .eyebrow,.topic-reading>.eyebrow { color:#a57332; }.topic-hero h1 { max-width:920px; margin:13px 0 22px; color:#102c56; font-size:clamp(3.1rem,7vw,6.7rem); line-height:.98; letter-spacing:-.075em; }.topic-hero>p:not(.eyebrow) { max-width:720px; color:#526983; font-size:clamp(1rem,1.7vw,1.2rem); line-height:1.9; }.topic-back { display:inline-flex; margin-top:30px; padding-bottom:4px; color:#1b467d; border-bottom:1px solid currentColor; font-size:.84rem; font-weight:850; text-decoration:none; }
.topic-content { display:grid; grid-template-columns:minmax(0,1fr) minmax(270px,.38fr); align-items:start; gap:24px; padding-bottom:100px; }.topic-reading,.topic-next { border:1px solid rgba(115,136,183,.18); border-radius:26px; box-shadow:0 22px 58px rgba(38,57,102,.08); }.topic-reading { padding:clamp(30px,5vw,66px); background:rgba(255,255,255,.8); }.topic-reading>.eyebrow { margin:0 0 22px; }.topic-reading h2 { margin:2.3em 0 .7em; color:#132f58; font-size:clamp(1.4rem,2.5vw,2.25rem); line-height:1.25; letter-spacing:-.035em; }.topic-reading h2:first-of-type { margin-top:.3em; }.topic-reading p { max-width:70ch; margin:0 0 1.2em; color:#526983; font-size:1rem; line-height:2; white-space:pre-line; }.topic-next { position:sticky; top:20px; display:flex; flex-direction:column; min-height:290px; padding:34px; background:linear-gradient(148deg,#163b6d,#355b9c); color:#eaf4ff; }.topic-next .eyebrow { color:#f2d9a4; }.topic-next h2 { margin:8px 0 14px; color:#fff; font-size:2rem; line-height:1.15; }.topic-next p:not(.eyebrow) { margin:0 0 28px; color:#d9e7f6; line-height:1.85; }.topic-next .button { margin-top:auto; align-self:flex-start; color:#13345f; background:#f2d9a4; }.topic-footer { padding:24px; color:#aebed2; background:#0c203e; font-size:.76rem; text-align:center; }
@media (max-width:760px) { .topic-header { grid-template-columns:1fr auto; gap:12px; min-height:68px; padding-inline:20px; }.topic-header .brand { width:88px; height:46px; }.topic-header nav { display:none; }.topic-hero,.topic-content { width:calc(100% - 40px); }.topic-hero { padding-top:76px; }.topic-hero h1 { width:100%; min-width:0; max-width:100%; font-size:clamp(2.25rem,10vw,3.4rem); letter-spacing:-.055em; overflow-wrap:anywhere; word-break:break-all; white-space:normal; }.topic-content { grid-template-columns:1fr; padding-bottom:62px; }.topic-reading { padding:28px 24px; border-radius:19px; }.topic-reading p { line-height:1.9; }.topic-next { position:static; min-height:0; padding:28px 24px; border-radius:19px; } }

/* Client-facing service experience: each page selects a distinct visual system. */
[data-service-theme="residency"] { --service-a:#706ce8; --service-b:#d9e8ff; --service-c:#f5b973; }
[data-service-theme="citizenship"] { --service-a:#b46e45; --service-b:#fae9c6; --service-c:#52699b; }
[data-service-theme="family"] { --service-a:#cb7187; --service-b:#f9d7dc; --service-c:#707eb0; }
[data-service-theme="business"] { --service-a:#1c766e; --service-b:#d9f3ec; --service-c:#ebb168; }
[data-service-theme="finance"] { --service-a:#5b6aa2; --service-b:#e3e7ff; --service-c:#d6a65e; }
[data-service-theme="global"] { --service-a:#284c8f; --service-b:#d4e6ff; --service-c:#d5a752; }
[data-service-theme="ep"] { --service-a:#624aa2; --service-b:#e6ddff; --service-c:#74b6ab; }
[data-service-theme="education"] { --service-a:#2f7da6; --service-b:#d8f0fb; --service-c:#eab46d; }
[data-service-theme="wealth"] { --service-a:#8e6435; --service-b:#f8ebcf; --service-c:#516d99; }
[data-service-theme="protection"] { --service-a:#386f7f; --service-b:#d7eef0; --service-c:#dc9a78; }
[data-service-theme="brand"] { --service-a:#254b84; --service-b:#dbe9ff; --service-c:#d6a75e; }
.topic-reading.client-ready { overflow:hidden; }.topic-reading.client-ready .lead { max-width:60ch; color:#233d64; font-size:1.13rem; font-weight:700; }.service-visual { position:relative; display:grid; place-items:center; min-height:330px; margin:42px 0 58px; overflow:hidden; border-radius:22px; color:#123257; background:radial-gradient(circle at 20% 18%,var(--service-b),transparent 35%),radial-gradient(circle at 80% 85%,color-mix(in srgb,var(--service-c) 40%,white),transparent 38%),linear-gradient(145deg,#fff,rgba(235,242,255,.9)); border:1px solid color-mix(in srgb,var(--service-a) 22%,transparent); }.service-visual::before,.service-visual::after { content:""; position:absolute; border:1px solid color-mix(in srgb,var(--service-a) 28%,transparent); border-radius:50%; }.service-visual::before { width:260px; height:260px; }.service-visual::after { width:410px; height:410px; opacity:.5; }.visual-core { position:relative; z-index:3; display:grid; gap:9px; width:min(290px,72%); padding:26px; border:1px solid rgba(255,255,255,.8); border-radius:18px; background:rgba(255,255,255,.64); box-shadow:0 18px 45px rgba(45,62,105,.12); backdrop-filter:blur(14px); text-align:center; }.visual-core small { color:var(--service-a); font-size:.66rem; font-weight:900; letter-spacing:.16em; }.visual-core strong { color:#16345d; font-size:clamp(1.25rem,2vw,1.7rem); line-height:1.2; }.visual-orbit { position:absolute; inset:0; z-index:2; animation:orbitDrift 14s linear infinite; }.visual-node { --angle:calc(var(--i) * 90deg); position:absolute; top:50%; left:50%; display:grid; place-items:center; width:66px; height:66px; margin:-33px; color:#fff; border-radius:50%; background:var(--service-a); box-shadow:0 10px 25px color-mix(in srgb,var(--service-a) 32%,transparent); font-size:.68rem; transform:rotate(var(--angle)) translateX(156px) rotate(calc(-1 * var(--angle))); }.visual-timeline { position:absolute; bottom:22px; left:22px; right:22px; z-index:4; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:0; list-style:none; }.visual-timeline li { min-height:50px; padding:12px 9px 8px; color:#294366; border-radius:10px; background:rgba(255,255,255,.68); font-size:.72rem; line-height:1.35; }.visual-timeline li::before { display:block; margin-bottom:4px; color:var(--service-a); content:attr(data-step); font-size:.6rem; font-weight:900; letter-spacing:.12em; }.visual-map { position:absolute; inset:30px; z-index:1; }.map-node { position:absolute; display:grid; place-items:center; width:88px; height:46px; color:#17385f; border:1px solid color-mix(in srgb,var(--service-a) 38%,transparent); border-radius:10px; background:rgba(255,255,255,.72); font-size:.73rem; font-weight:800; }.map-node::after { position:absolute; width:90px; height:1px; background:color-mix(in srgb,var(--service-a) 45%,transparent); content:""; transform-origin:left; }.map-node.n0{top:14%;left:9%}.map-node.n0::after{transform:rotate(25deg)}.map-node.n1{top:20%;right:9%}.map-node.n1::after{transform:rotate(150deg)}.map-node.n2{bottom:15%;left:14%}.map-node.n2::after{transform:rotate(-35deg)}.map-node.n3{bottom:12%;right:12%}.map-node.n3::after{display:none}.visual-grid { position:absolute; inset:38px; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }.grid-cell { display:grid; place-items:center; padding:15px; color:#18385e; border-radius:14px; background:rgba(255,255,255,.68); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--service-a) 18%,transparent); font-size:.78rem; line-height:1.35; text-align:center; }.grid-cell.c0{transform:translate(-10px,-8px)}.grid-cell.c1{transform:translate(10px,8px)}.grid-cell.c2{transform:translate(8px,-4px)}.grid-cell.c3{transform:translate(-8px,5px)}.visual-ladder { position:absolute; right:10%; bottom:14%; z-index:4; display:flex; align-items:end; gap:7px; }.ladder-step { display:grid; place-items:center; width:88px; color:#17385f; background:rgba(255,255,255,.78); border-radius:9px 9px 0 0; font-size:.67rem; font-weight:800; text-align:center; }.ladder-step.s0{height:56px}.ladder-step.s1{height:88px}.ladder-step.s2{height:122px}.ladder-step.s3{height:155px;color:#fff;background:var(--service-a)}.visual-rings { position:absolute; inset:0; z-index:1; display:grid; place-items:center; }.ring { position:absolute; border:1px solid color-mix(in srgb,var(--service-a) 35%,transparent); border-radius:50%; }.ring.r1{width:105px;height:105px}.ring.r2{width:215px;height:215px}.ring.r3{width:330px;height:330px;border-style:dashed;animation:spin 16s linear infinite}.service-framework,.service-checklist { margin-top:54px; padding-top:42px; border-top:1px solid rgba(41,68,105,.13); }.service-framework h2,.service-checklist h2 { margin:8px 0 22px; }.framework-steps { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; padding:0; list-style:none; counter-reset:workflow; }.framework-steps li { display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:center; min-height:72px; padding:15px; border-radius:13px; background:linear-gradient(135deg,color-mix(in srgb,var(--service-b) 65%,white),rgba(255,255,255,.88)); color:#294362; font-weight:750; }.framework-steps li::before { display:grid; place-items:center; width:28px; height:28px; color:#fff; border-radius:50%; background:var(--service-a); content:attr(data-step); font-size:.65rem; letter-spacing:.05em; }.service-checklist ul { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; padding:0; list-style:none; }.service-checklist li { display:flex; gap:10px; align-items:flex-start; min-height:48px; padding:12px 0; color:#526983; border-bottom:1px solid rgba(41,68,105,.11); line-height:1.55; }.service-checklist li i { display:block; flex:0 0 auto; width:12px; height:12px; margin-top:.42em; border:2px solid var(--service-a); border-radius:50%; }.service-disclaimer { margin-top:50px; padding:20px 0 0; border-top:1px solid rgba(41,68,105,.13); }.service-disclaimer p:last-child { color:#718198; font-size:.87rem; line-height:1.75; }.visual-compass .visual-grid { clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }.visual-shield .visual-core { border-radius:46% 46% 35% 35%; }.visual-matrix .grid-cell { border-radius:2px; }.visual-umbrella .visual-map::before { position:absolute; top:5%; left:50%; width:220px; height:110px; border:2px solid var(--service-a); border-bottom:0; border-radius:220px 220px 0 0; content:""; transform:translateX(-50%); }
@keyframes orbitDrift { to { transform:rotate(360deg); } } @keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .visual-orbit,.ring.r3 { animation:none; } }
@media (max-width:760px) { .service-visual{min-height:270px;margin:30px 0 42px}.visual-node{width:52px;height:52px;margin:-26px;font-size:.58rem;transform:rotate(var(--angle)) translateX(108px) rotate(calc(-1 * var(--angle)))}.visual-timeline{grid-template-columns:repeat(2,1fr);bottom:12px;left:12px;right:12px}.visual-timeline li{min-height:38px;padding:8px;font-size:.62rem}.visual-ladder{right:3%;transform:scale(.78);transform-origin:right bottom}.framework-steps,.service-checklist ul{grid-template-columns:1fr}.service-reading{padding-inline:0}.visual-map{transform:scale(.8)} }
