:root { --ink:#1c1917; --muted:#57534e; --line:#e7e5e4; --bg:#fafaf9; --accent:#9a3412; --accent2:#c2410c; --tint:#fff7ed; }
/* service landings (body.svc) */
.svc * { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body.svc { margin:0; font:16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--ink); background:var(--bg); }
.svc a { color:inherit; }
.svc header { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:18px 7vw; border-bottom:1px solid var(--line); background:#fff; }
.svc .brand { font:600 13px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; }
.svc nav a { font:14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; margin-left:18px; text-decoration:none; }
.svc .hero { display:grid; grid-template-columns:1.4fr .8fr; gap:40px; padding:64px 7vw 48px; }
.svc .kicker { font:600 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 14px; }
.svc h1 { font-weight:500; font-size:clamp(36px, 5vw, 64px); line-height:1.02; letter-spacing:-.03em; margin:0 0 18px; }
.svc .lead { font-size:20px; max-width:40rem; margin:0 0 22px; }
.svc .meta { font:14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--muted); }
.svc .panel { background:var(--ink); color:#fafaf9; padding:28px; border-radius:18px; }
.svc .panel b { display:block; font:600 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#fdba74; margin-bottom:8px; }
.svc .panel p { margin:0 0 18px; }
.svc button, .svc .btn { display:inline-block; background:var(--accent2); color:#fff; border:0; border-radius:999px; padding:12px 18px; font:600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-decoration:none; cursor:pointer; }
.svc section { padding:28px 7vw 10px; }
.svc h2 { font-size:28px; font-weight:500; letter-spacing:-.02em; margin:0 0 8px; }
.svc .note { color:var(--muted); margin:0 0 18px; }
.svc .grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; list-style:none; padding:0; margin:0; }
.svc .grid li, .svc .whom li { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 16px 16px 18px; }
.svc .grid li { border-top:3px solid var(--accent2); }
.svc ol.steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.svc ol.steps li { background:var(--tint); border-radius:14px; padding:16px; }
.svc ol.steps span { font:600 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--accent); }
.svc .whom { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.svc details { background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin:0 0 8px; }
.svc summary { cursor:pointer; font:600 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.svc details p { margin:8px 0 0; color:var(--muted); }
.svc .cta { margin:36px 7vw 48px; background:#fff; border:1px solid var(--line); border-radius:20px; padding:28px; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.svc form { display:grid; gap:10px; }
.svc input, .svc textarea { width:100%; border:1px solid var(--line); border-radius:10px; padding:12px; font:15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.svc footer { padding:22px 7vw 36px; color:var(--muted); font:13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; display:flex; justify-content:space-between; gap:12px; }
@media (max-width:800px)  {
.svc header, .svc .hero, .svc section, .svc .cta, .svc footer { padding-left:20px; padding-right:20px; }
.svc .hero, .svc .grid, .svc .whom, .svc .cta, .svc ol.steps, .svc footer { display:block; }
.svc nav { display:none; }
.svc ol.steps li, .svc .grid li, .svc .whom li { margin-bottom:10px; }
}
/* group hubs (body.hub) */
body.hub { margin:0; font:16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--ink); background:#fafaf9; }
.hub header, .hub main { padding:28px 7vw; }
.hub h1 { font-weight:500; font-size:clamp(36px,5vw,56px); letter-spacing:-.03em; margin:8px 0; }
.hub .kicker { font:600 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.hub .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.hub .card { display:block; background:#fff; border:1px solid var(--line); border-top:3px solid var(--accent2); border-radius:14px; padding:16px; text-decoration:none; color:inherit; }
.hub .card b { display:block; font-weight:500; }
.hub .card span { display:block; margin-top:6px; color:#57534e; font:14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* catalog (body.cat) */
body.cat { margin:0; font:16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--ink); background:var(--bg); }
.cat header, .cat main { padding:28px 7vw; }
.cat h1 { font-weight:600; font-size:clamp(32px,5vw,52px); letter-spacing:-.03em; margin:8px 0; }
.cat h2 { margin:28px 0 10px; font-size:22px; } .cat h2 a { color:var(--accent); }
.cat ul { columns:240px; padding:0; list-style:none; margin:0; } .cat li { margin:0 0 6px; break-inside:avoid; }
.cat li a { text-decoration:none; } .cat li a:hover { text-decoration:underline; } .cat small { color:var(--muted); }
/* shared */
.icon { width:24px; height:24px; color:var(--accent); vertical-align:middle; }
.svc .brand .icon { width:18px; height:18px; margin-right:6px; }
.mail { text-decoration:none; } .mail .icon { width:16px; height:16px; margin-right:4px; }
.e404 { margin:0; min-height:100vh; display:grid; place-items:center; font:16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align:center; color:var(--ink); background:var(--bg); }

/* language switch */
.lang { display:inline-block; font:600 12px/1 system-ui, sans-serif; letter-spacing:.04em; padding:5px 8px; border:1px solid var(--line); border-radius:999px; color:var(--accent); text-decoration:none; background:#fff; }
.lang:hover { border-color:var(--accent); }
.langbar { margin:0 0 8px; text-align:right; }

/* shared animated background (assets/bg.js) */
html { background:#fafaf9; }
body.svc, body.hub, body.cat, body.e404 { background:transparent; }
body > header, body > main, body > footer, .e404 > div { background:rgba(255,255,255,.42); }
.e404 > div { padding:32px 40px; border-radius:18px; }

/* small semi-transparent panel */
.svc .panel { background:rgba(28,25,23,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:21px; border-radius:14px; font-size:13px; line-height:1.45; align-self:start; }
.svc .panel b { font-size:10px; margin-bottom:6px; }
.svc .panel p { margin:0 0 14px; }
.svc .panel .btn, .svc .panel button { padding:9px 14px; font-size:11px; }
@media (max-width:640px) { .svc .panel { max-width:270px; padding:16px; font-size:12px; border-radius:12px; } .svc .panel b { font-size:9px; } .svc .panel p { margin:0 0 12px; } .svc .panel .btn, .svc .panel button { font-size:10px; padding:9px 12px; min-height:28px; box-sizing:border-box; } }
.svc .htf-cb { display:flex; align-items:center; gap:8px; font-size:15px; color:var(--muted); cursor:pointer; } .svc .htf-cb input { width:auto; margin:0; padding:0; }

/* ===== unified style 2026-10 (Onest + Inter, #f8f9fa / #0f172a / #2563eb) ===== */
@font-face{font-family:"HT Onest";font-weight:700;font-display:swap;src:url(/assets/fonts/Onest-700.woff2) format("woff2")}
@font-face{font-family:"HT Onest";font-weight:800 900;font-display:swap;src:url(/assets/fonts/Onest-800.woff2) format("woff2")}
@font-face{font-family:"HT Inter";font-weight:400;font-display:swap;src:url(/assets/fonts/Inter-400.woff2) format("woff2")}
@font-face{font-family:"HT Inter";font-weight:500 600;font-display:swap;src:url(/assets/fonts/Inter-600.woff2) format("woff2")}
@font-face{font-family:"HT Inter";font-weight:700;font-display:swap;src:url(/assets/fonts/Inter-700.woff2) format("woff2")}
:root,[style*="--accent"]{--ink:#0f172a!important;--muted:#64748b!important;--line:#e2e8f0!important;--bg:#f8f9fa!important;--accent:#2563eb!important;--accent2:#2563eb!important;--tint:#eff6ff!important;--sh:0 1px 3px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.06)}
html{background:#eef2f8}
body.svc,body.hub,body.cat,body.e404{color:#0f172a}
body,body.svc,body.hub,body.cat,body.e404,.svc *,.hub *,.cat *,.lang,.e404{font-family:"HT Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.svc h1,.svc h2,.svc h3,.hub h1,.hub h2,.cat h1,.cat h2,.e404 h1,.svc summary,.hub .card b,.svc .brand{font-family:"HT Onest","HT Inter",system-ui,sans-serif!important}
.svc h1,.hub h1,.cat h1{font-weight:800;letter-spacing:-.025em}
.svc h2,.cat h2{font-weight:700}
.hub .card b{font-weight:700}
.svc .brand{font-weight:800}
body > header,body > main,body > footer,.e404 > div{background:rgba(248,249,250,.72)}
.svc .grid li,.svc .whom li,.svc details,.svc .cta,.hub .card,.svc ol.steps li{border-radius:12px!important;border:1px solid #e2e8f0;box-shadow:var(--sh)}
.svc .grid li,.hub .card{border-top:1px solid #e2e8f0!important}
.hub .card{transition:transform .2s,box-shadow .2s}.hub .card:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(15,23,42,.06),0 14px 32px rgba(15,23,42,.09)}
.svc button,.svc .btn{background:#2563eb;border-radius:12px}
.svc button:hover,.svc .btn:hover{background:#1d4ed8}
.svc input,.svc textarea{border-radius:12px;font-family:"HT Inter",system-ui,sans-serif}
.svc input:focus,.svc textarea:focus{outline:2px solid #93c5fd;border-color:#2563eb}
.svc .panel{background:rgba(15,23,42,.55)}
.svc .panel b{color:#93c5fd}
.cat h2 a,.mail,.svc .kicker,.hub .kicker{color:#2563eb}
.lang{border-radius:12px;color:#2563eb}

/* ===== double-exposure background (bg.js .htdx) ===== */
.htdx{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:#eef2f8;opacity:0;transition:opacity .9s ease}
.htdx.on{opacity:1}
.htdx i{position:absolute;inset:0;display:block;pointer-events:none}
.htdx .dx-city{inset:-5%;background:url(/assets/bg/city-photo.jpg) center/cover no-repeat;filter:grayscale(.6) brightness(1.08) contrast(.9);opacity:.35;animation:dxDrift 18s ease-in-out infinite}
.htdx .dx-mask{background:url(/assets/bg/city-photo.jpg) center/cover no-repeat;-webkit-mask:url(/assets/bg/silhouette.png) right 8% center/auto 82% no-repeat;mask:url(/assets/bg/silhouette.png) right 8% center/auto 82% no-repeat;filter:saturate(.7) contrast(1.05) hue-rotate(-10deg);animation:dxDissolve 16s ease-in-out infinite alternate}
.htdx .dx-portrait{background:url(/assets/bg/head.jpg) right 10% center/auto 70% no-repeat;mix-blend-mode:multiply;opacity:0;animation:dxPortrait 16s ease-in-out infinite alternate}
.htdx .dx-fog1{background:radial-gradient(ellipse at 30% 60%,rgba(147,197,253,.35) 0%,transparent 70%);animation:dxFog1 22s ease-in-out infinite}
.htdx .dx-fog2{background:radial-gradient(ellipse at 70% 40%,rgba(191,219,254,.4) 0%,transparent 65%);animation:dxFog2 28s ease-in-out infinite reverse}
.htdx .dx-fog3{background:linear-gradient(180deg,rgba(219,234,254,.25),rgba(191,219,254,.35) 50%,rgba(219,234,254,.25));animation:dxPulse 14s ease-in-out infinite}
.htdx .dx-haze{background:linear-gradient(90deg,rgba(248,249,250,.82) 0%,rgba(248,249,250,.6) 45%,rgba(248,249,250,.25) 100%)}
.htdx-plain .dx-fog1,.htdx-plain .dx-fog2,.htdx-plain .dx-fog3{display:none}
@keyframes dxDrift{0%,100%{transform:scale(1.08) translateY(0)}50%{transform:scale(1.14) translateY(-12px)}}
@keyframes dxDissolve{0%,35%{opacity:.85}55%{opacity:.6}75%{opacity:.3}100%{opacity:.18}}
@keyframes dxPortrait{0%,45%{opacity:0}65%{opacity:.3}100%{opacity:.5}}
@keyframes dxFog1{0%,100%{transform:translateX(0) scale(1);opacity:.7}50%{transform:translateX(-30px) scale(1.1);opacity:.9}}
@keyframes dxFog2{0%,100%{transform:translateX(0) scale(1.05);opacity:.6}50%{transform:translateX(40px) scale(1.15);opacity:.85}}
@keyframes dxPulse{0%,100%{opacity:.5}50%{opacity:.75}}
@media (max-width:700px){.htdx .dx-fog2,.htdx .dx-fog3{display:none}.htdx .dx-city{animation:none}.htdx .dx-mask{-webkit-mask-position:center 70%;mask-position:center 70%;-webkit-mask-size:auto 55%;mask-size:auto 55%}.htdx .dx-portrait{background-position:center 75%;background-size:auto 45%}.htdx .dx-haze{background:linear-gradient(180deg,rgba(248,249,250,.85),rgba(248,249,250,.55))}}
@media (prefers-reduced-motion:reduce){.htdx i{animation:none!important}.htdx .dx-mask{opacity:.6}.htdx .dx-portrait{opacity:.25}}

/* ===== double-exposure: more visible (v2) ===== */
.htdx{background:#e6edf7}
.htdx .dx-city{opacity:.75;filter:grayscale(.3) contrast(1.15) brightness(.98)}
.htdx .dx-mask{filter:saturate(1) contrast(1.25) brightness(.9)}
@keyframes dxDissolve{0%,35%{opacity:1}55%{opacity:.85}75%{opacity:.6}100%{opacity:.45}}
@keyframes dxPortrait{0%,45%{opacity:.15}65%{opacity:.55}100%{opacity:.8}}
.htdx .dx-portrait{filter:contrast(1.6)}
.htdx .dx-haze{background:linear-gradient(90deg,rgba(248,249,250,.42) 0%,rgba(248,249,250,.2) 45%,rgba(248,249,250,0) 100%)}
body > header,body > main,body > footer,.e404 > div{background:transparent!important}
.svc header{background:rgba(255,255,255,.7)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.svc .grid li,.svc .whom li,.svc details,.svc .cta,.hub .card,.svc ol.steps li{background:rgba(255,255,255,.85)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.svc .hero>div:first-child,.hub header,.cat header,.cat main>section,.cat main>h2+ul{background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:12px}
.svc .hero>div:first-child{padding:16px 20px}.cat main>section{padding:8px 16px;margin-bottom:12px}
@media (max-width:700px){.htdx .dx-haze{background:linear-gradient(180deg,rgba(248,249,250,.5),rgba(248,249,250,.25))}.htdx .dx-mask{-webkit-mask-size:auto 60%;mask-size:auto 60%}}
@media (prefers-reduced-motion:reduce){.htdx .dx-mask{opacity:.85}.htdx .dx-portrait{opacity:.5}}

/* ===== double-exposure v3: user images A (city) / B (glitch, screen) / C (cube hand, alpha) ===== */
.htdx{background:#dfe8f5}
.htdx .dx-city{background:url(/assets/bg/dx-a.webp) center 35%/cover no-repeat;opacity:.8;filter:saturate(1.05) contrast(1.05) brightness(1.08)}
.htdx .dx-mask{-webkit-mask:none;mask:none;background:url(/assets/bg/dx-b.webp) right 6% center/auto 100% no-repeat;mix-blend-mode:screen;filter:none;opacity:0;animation:dxB 20s ease-in-out infinite}
.htdx .dx-portrait{background:url(/assets/bg/dx-c.webp) right 4% center/auto 92% no-repeat;mix-blend-mode:normal;filter:none;opacity:0;animation:dxC 20s ease-in-out infinite}
@keyframes dxB{0%,5%{opacity:0}20%,40%{opacity:.85}55%,100%{opacity:0}}
@keyframes dxC{0%,50%{opacity:0}65%,85%{opacity:.75}100%{opacity:0}}
@media (max-width:700px){
.htdx .dx-city{background-image:url(/assets/bg/dx-a-m.webp);background-position:62% 30%}
.htdx .dx-mask{background-image:url(/assets/bg/dx-b-m.webp);background-position:center 60%;background-size:auto 75%}
.htdx .dx-portrait{background-image:url(/assets/bg/dx-c-m.webp);background-position:center 65%;background-size:auto 60%}}
@media (prefers-reduced-motion:reduce){.htdx .dx-mask{opacity:.5!important}.htdx .dx-portrait{opacity:0!important}}

/* ===== B/C every 7s (14s cycle, 1.5s fades) ===== */
.htdx .dx-mask{animation:dxB7 14s linear infinite}
.htdx .dx-portrait{animation:dxC7 14s linear infinite}
@keyframes dxB7{0%{opacity:0}10.7%,39.3%{opacity:.85}50%,100%{opacity:0}}
@keyframes dxC7{0%,50%{opacity:0}60.7%,89.3%{opacity:.75}100%{opacity:0}}

/* new service pages: hero photo */
.svc .svc-photo{display:block;width:100%;max-width:560px;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px;margin:18px 0 0;box-shadow:0 1px 3px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.08)}

/* country rules block (new services) + /featured/rules/ table */
.svc .rules{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin:0 0 10px;padding:0}
.svc .rules>div{background:rgba(255,255,255,.85);border:1px solid #e2e8f0;border-left:4px solid #94a3b8;border-radius:12px;padding:10px 12px;box-shadow:var(--sh)}
.svc .rules dt{font:700 13px/1.3 "HT Onest","HT Inter",sans-serif;color:#0f172a;margin:0 0 3px}
.svc .rules dd{margin:0;font-size:14px;color:#334155}
.r-strict{border-left-color:#dc2626!important}.r-med{border-left-color:#d97706!important}.r-no{border-left-color:#16a34a!important}
.svc .rules-sub{font-size:16px;margin:14px 0 8px}
.svc .rules-disc{font-size:13px}
.rules-wrap{overflow-x:auto;background:rgba(255,255,255,.85);border-radius:12px;box-shadow:var(--sh)}
.rules-table{border-collapse:collapse;width:100%;font-size:14px}
.rules-table th,.rules-table td{padding:10px 12px;border-bottom:1px solid #e2e8f0;text-align:left;vertical-align:top}
.rules-table thead th{font-family:"HT Onest",sans-serif;background:#eff6ff}
.rules-table td{border-left:4px solid transparent}
.rules-table td.r-strict{background:#fef2f2}.rules-table td.r-med{background:#fffbeb}.rules-table td.r-no{background:#f0fdf4}
.rules-legend span{display:inline-block;margin:10px 10px 0 0;padding:4px 10px;border-radius:8px;border-left:4px solid;background:#fff;font-size:13px}
@media (max-width:700px){.rules-table thead{display:none}.rules-table tr{display:block;margin:0 0 12px;border-bottom:2px solid #cbd5e1}.rules-table th[scope=row]{display:block;background:#eff6ff}.rules-table td{display:flex;gap:8px;justify-content:space-between}.rules-table td::before{content:attr(data-c);font-weight:600;color:#0f172a}}