/* Faster Passport & Visa Services — palette taken from the printed business card. */
:root{
  --navy:#1b2a5e; --navy-2:#2c3f8f; --sky:#79bfd3; --teal:#2b7fa0;
  --ink:#131c33; --body:#41506e; --muted:#6b7a99;
  --bg:#f4f8fb; --surface:#fff; --line:#e0e8f2;
  --fill:#1b2a5e; --on-fill:#fff;
  --grad-a:#2c3f8f; --grad-b:#2b7fa0; --on-grad:#fff;
  --shadow:0 1px 2px rgba(19,28,51,.05), 0 8px 24px -12px rgba(19,28,51,.18);
  --shadow-lg:0 2px 4px rgba(19,28,51,.05), 0 24px 48px -20px rgba(19,28,51,.28);
  --radius:14px; --maxw:1080px;
}
@media (prefers-color-scheme: dark){
  :root{
    --navy:#c8d6ff; --navy-2:#93aaf0; --teal:#63b4d1;
    --ink:#eef3fb; --body:#b3c0d6; --muted:#8394b0;
    --bg:#0d1424; --surface:#141d31; --line:#26324b;
    --fill:#93aaf0; --on-fill:#0b1220;
    --grad-a:#5b7fe0; --grad-b:#3d9ec4; --on-grad:#0b1220;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lg:0 2px 4px rgba(0,0,0,.3), 0 24px 48px -20px rgba(0,0,0,.7);
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.68; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{color:var(--ink); line-height:1.25; margin:0 0 .5em; font-weight:700; letter-spacing:-.01em}
p{margin:0 0 1em}
a{color:var(--navy-2)}
img{max-width:100%; display:block}
ul{margin:0 0 1em; padding-left:1.25em}
li{margin-bottom:.4em}
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:22px}

/* header */
.site-header{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line)}
.header-in{display:flex; align-items:center; gap:14px; min-height:62px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; min-width:0}
.mark{width:34px; height:34px; border-radius:9px; flex:none; background:linear-gradient(140deg,var(--grad-a),var(--grad-b));
  display:grid; place-items:center; color:var(--on-grad); font-weight:700; font-size:13.5px}
.brand-text{min-width:0}
.brand-name{display:block; color:var(--ink); font-weight:700; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand-sub{display:block; color:var(--muted); font-size:12.5px}
.lang-switch{flex:none; font-size:13.5px; font-weight:600; text-decoration:none; color:var(--ink);
  border:1px solid var(--line); background:var(--surface); padding:6px 14px; border-radius:999px}
.lang-switch:hover{border-color:var(--teal)}
.nav-toggle{display:none; flex:none; width:40px; height:36px; border:1px solid var(--line); background:var(--surface);
  border-radius:9px; cursor:pointer; padding:9px 9px; flex-direction:column; justify-content:space-between}
.nav-toggle span{display:block; height:2px; background:var(--ink); border-radius:2px}
.site-nav{border-top:1px solid var(--line); background:var(--surface)}
.nav-in{display:flex; flex-wrap:wrap; gap:2px; padding-block:4px}
.site-nav a{padding:9px 12px; font-size:14.5px; font-weight:600; text-decoration:none; color:var(--body); border-radius:8px; white-space:nowrap}
.site-nav a:hover{background:var(--bg); color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--navy-2); background:color-mix(in srgb,var(--sky) 16%,transparent)}
@media (max-width:820px){
  .nav-toggle{display:flex}
  .site-nav{display:none}
  body.nav-open .site-nav{display:block}
  .nav-in{flex-direction:column; padding-block:8px}
  .brand-sub{display:none}
}

/* hero */
.hero{padding:52px 0 34px}
.eyebrow{display:inline-block; margin:0 0 14px; font-size:13.5px; font-weight:600; color:var(--teal);
  background:color-mix(in srgb,var(--sky) 18%,transparent); border:1px solid color-mix(in srgb,var(--sky) 40%,transparent);
  padding:5px 13px; border-radius:999px}
h1{font-size:clamp(1.9rem,5vw,2.9rem)}
.lede{font-size:clamp(1rem,2.2vw,1.16rem); max-width:44ch; color:var(--body)}
.lede, .area{max-width:56ch}
.area{font-size:14.5px; color:var(--muted)}
.cta-row{display:flex; flex-wrap:wrap; gap:11px; margin-top:22px}
.btn{display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-size:15.5px; font-weight:600;
  padding:12px 22px; border-radius:11px; border:1px solid var(--line); background:var(--surface); color:var(--ink); transition:.18s}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn-primary{background:linear-gradient(135deg,var(--grad-a),var(--grad-b)); color:var(--on-grad); border-color:transparent}

/* sections */
section{padding:26px 0}
section h2{font-size:clamp(1.35rem,3.2vw,1.8rem); margin-top:0}
.note{color:var(--muted); font-size:15px}

/* service cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:16px}
.card{display:block; text-decoration:none; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px; position:relative; overflow:hidden; box-shadow:var(--shadow); transition:.2s}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb,var(--sky) 55%,var(--line))}
.card::before{content:""; position:absolute; inset:0 auto 0 0; width:4px; background:linear-gradient(180deg,var(--grad-a),var(--grad-b))}
.card h3{font-size:17.5px; margin-bottom:6px}
.card p{font-size:14.8px; margin:0; color:var(--body)}

/* contact */
.contact-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:start}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr; gap:28px}}
.enquiry{display:grid; gap:14px; max-width:520px}
.enquiry label{display:grid; gap:6px; font-size:14px; font-weight:600; color:var(--ink)}
.enquiry input,.enquiry select,.enquiry textarea{
  font:inherit; font-size:16px; font-weight:400; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:10px; padding:11px 13px; width:100%}
.enquiry input:focus,.enquiry select:focus,.enquiry textarea:focus{outline:2px solid var(--teal); outline-offset:1px; border-color:transparent}
.enquiry button{justify-self:start; cursor:pointer}
.hp{position:absolute; left:-9999px}
.channels{display:grid; gap:12px}
.channel{display:grid; gap:2px; text-decoration:none; padding:14px 16px; border:1px solid var(--line);
  border-radius:12px; background:var(--surface); transition:.18s}
.channel:hover{transform:translateY(-1px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--sky) 55%,var(--line))}
.channel .k{font-size:12.5px; color:var(--muted)}
.channel .v{font-size:16px; font-weight:650; color:var(--ink); word-break:break-all}
.qr{margin:6px 0 0; text-align:center; padding:16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
.qr img{width:180px; height:180px; margin-inline:auto; background:#fff; border-radius:8px; padding:6px}
.qr figcaption{font-size:13.5px; color:var(--muted); margin-top:10px}

/* about portrait */
.portrait{margin:0; max-width:260px; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--surface); box-shadow:var(--shadow-lg)}
.portrait figcaption{padding:12px 16px 14px; border-top:1px solid var(--line); display:grid; gap:2px}
.portrait b{color:var(--ink); font-size:15.5px}
.portrait span{color:var(--muted); font-size:13px}

.closing{border-top:1px solid var(--line); margin-top:20px; padding-top:26px}
.thanks{padding-block:80px}

footer{border-top:1px solid var(--line); background:var(--surface); margin-top:30px; padding:30px 0 96px}
.foot-name{color:var(--ink); font-weight:650; margin-bottom:2px}
.foot-contact{font-size:14px; color:var(--muted)}
.foot-contact a{color:var(--muted); text-decoration:none}
.foot-contact a:hover{color:var(--navy-2); text-decoration:underline}
.disclaimer{font-size:12.8px; color:var(--muted); max-width:78ch; line-height:1.6; margin:14px 0 0}

.mobile-bar{position:fixed; inset:auto 0 0 0; z-index:60; display:none; gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--surface) 94%,transparent); backdrop-filter:blur(12px); border-top:1px solid var(--line)}
.mobile-bar .btn{flex:1; justify-content:center; padding:12px 10px}
@media (max-width:640px){.mobile-bar{display:flex}}

a:focus-visible,button:focus-visible{outline:2.5px solid var(--teal); outline-offset:3px; border-radius:8px}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}