/* Huy Nguyen Migration — editorial design system
   Paper, serif headlines, gold thread. */

:root{
  --paper:#f3f2ed;
  --paper-2:#ebeae4;
  --paper-3:#e4e3dc;
  --paper-4:#dddcd5;
  --sheet:#f8f7f3;
  --ink:#17171a;
  --text:#2b323a;
  --muted:#697380;
  --rule:rgba(23,23,26,.14);
  --rule-strong:rgba(23,23,26,.4);
  --gold:#b08a27;
  --gold-deep:#8f6f1c;
  --gold-soft:#d9bd63;
  --gold-tint:#f5eed8;
  --gold-tint-2:#efe4bf;
  --green:#b7d48a;
  --green-deep:#7fa24f;
  --pink:#ebb4c9;
  --orange:#edb78c;
  --black:#121212;
  --black-2:#1c1c1c;
  --serif:"Lora",Georgia,"Times New Roman",serif;
  --sans:"Be Vietnam Pro",Helvetica,Arial,system-ui,sans-serif;
  --maxw:1180px;
  --measure:46rem;
  --tab-w:40px;
  --header-h:78px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html:has(#nav-toggle:checked){overflow:hidden}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--sans);font-size:16.5px;line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body::before{
  content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.16;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p a,li a,td a{text-decoration:underline;text-decoration-color:var(--gold-soft);text-underline-offset:3px;text-decoration-thickness:1.5px}
p a:hover,li a:hover{text-decoration-color:var(--gold)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:700;line-height:1.1;letter-spacing:-.012em;margin:0 0 .5em}
h1{letter-spacing:-.018em;line-height:1.06}
h1{font-size:clamp(2.4rem,5vw,4.2rem)}
h2{font-size:clamp(1.9rem,3.2vw,2.75rem)}
h3{font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.2}
h4{font-size:1.1rem;line-height:1.3}
p{margin:0 0 1.1em}
strong{color:var(--ink);font-weight:600}
small{font-size:.85em}
hr{border:0;border-top:1px solid var(--rule);margin:2.5rem 0}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.5rem 1rem;z-index:5000}
.skip:focus{left:1rem;top:1rem}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Layout ------------------------------------------------------------ */
.wrap{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
.wrap--narrow{width:min(100% - 2.5rem,var(--measure))}
.page{position:relative}
@media (min-width:1200px){
  body.has-rail .page,body.has-rail .site-header,body.has-rail .site-footer{padding-right:calc(var(--tab-w) * var(--tabs,0))}
}

/* Header ------------------------------------------------------------ */
.site-header{
  position:sticky;top:0;z-index:900;height:var(--header-h);
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--rule);
}
.site-header .wrap{display:flex;align-items:center;gap:1.25rem;height:100%}
.brand{display:flex;align-items:center;gap:.7rem;margin-right:auto;color:var(--ink);flex:none}
.brand img{width:38px;height:auto}
.brand__name{font-family:var(--serif);font-weight:700;font-size:1.05rem;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.brand__name small{display:block;font-family:var(--sans);font-weight:500;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:.28rem;white-space:nowrap}
.nav{display:flex;gap:1.15rem;align-items:center}
.nav a{font-size:.9rem;font-weight:500;color:var(--text);position:relative;padding:.35rem 0;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.lang{display:inline-flex;flex:none;border:1px solid var(--rule-strong);border-radius:999px;overflow:hidden;font-size:.78rem;font-weight:600;letter-spacing:.06em}
.lang a{padding:.35rem .7rem;color:var(--muted)}
.lang a.is-on{background:var(--ink);color:#fff}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;border-radius:999px;padding:.72rem 1.25rem .72rem 1.35rem;
  font-weight:600;font-size:.93rem;line-height:1;white-space:nowrap;border:1px solid transparent;
  transition:transform .25s var(--ease),background .25s,box-shadow .25s;cursor:pointer;font-family:var(--sans)
}
.btn .dot{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;flex:none}
.btn .dot svg{width:13px;height:13px}
.btn--primary{background:var(--ink);color:#fff}
.btn--primary .dot{background:var(--gold-soft);color:var(--ink)}
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.btn--ghost{border-color:var(--rule-strong);color:var(--ink);background:transparent}
.btn--ghost .dot{background:var(--ink);color:#fff}
.btn--ghost:hover{background:#fff}
.btn--gold{background:var(--gold-soft);color:var(--ink)}
.btn--gold .dot{background:var(--ink);color:var(--gold-soft)}
.btn--light{background:#fff;color:var(--ink)}
.btn--light .dot{background:var(--gold-soft);color:var(--ink)}
.btn--sm{padding:.55rem .9rem .55rem 1rem;font-size:.85rem}
.header-cta{display:inline-flex}
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;align-items:center;justify-content:center;margin-right:-.5rem}
.burger span{display:block;width:24px;height:2px;background:var(--ink);position:relative;transition:.3s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:24px;height:2px;background:var(--ink);transition:.3s}
.burger span::before{top:-7px}.burger span::after{top:7px}
#nav-toggle{position:absolute;opacity:0;pointer-events:none}
.mobile-menu{display:none}
@media (max-width:520px){.brand__name small{display:none}.brand__name{font-size:1rem}}
@media (max-width:1180px){
  .nav,.header-cta{display:none}
  .burger{display:flex}
  .lang{margin-left:auto}
  .mobile-menu{
    display:block;position:fixed;inset:var(--header-h) 0 0 0;background:var(--paper);z-index:890;
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:.3s var(--ease);overflow:auto;padding:1.5rem 1.5rem 3rem
  }
  #nav-toggle:checked ~ .mobile-menu{transform:none;opacity:1;pointer-events:auto}
  #nav-toggle:checked ~ .site-header .burger span{background:transparent}
  #nav-toggle:checked ~ .site-header .burger span::before{transform:rotate(45deg);top:0}
  #nav-toggle:checked ~ .site-header .burger span::after{transform:rotate(-45deg);top:0}
  .mobile-menu a.big{display:block;font-family:var(--serif);font-size:2rem;font-weight:700;color:var(--ink);padding:.55rem 0;border-bottom:1px solid var(--rule)}
  .mobile-menu .sub{display:grid;grid-template-columns:1fr 1fr;gap:.4rem 1rem;margin:1.2rem 0 1.6rem}
  .mobile-menu .sub a{font-size:.95rem;padding:.3rem 0;color:var(--text)}
  .mobile-menu .sub .lbl{grid-column:1/-1;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.6rem}
}

/* Tab rail (chapter tabs) ------------------------------------------- */
.tabrail{display:none}
@media (min-width:1200px){
  .tabrail{
    display:flex;position:fixed;top:0;right:0;bottom:0;z-index:850;
  }
  .tabrail a{
    width:var(--tab-w);height:100%;position:relative;display:block;
    background:var(--paper-2);border-left:1px solid rgba(0,0,0,.05);
    box-shadow:-6px 0 14px -10px rgba(0,0,0,.35);
    transition:background .25s
  }
  .tabrail a:nth-child(2){background:var(--paper-3)}
  .tabrail a:nth-child(3){background:#e0dfd8}
  .tabrail a:nth-child(4){background:#dcdbd4}
  .tabrail a:nth-child(5){background:#d8d7d0}
  .tabrail a:nth-child(6){background:#d4d3cc}
  .tabrail a:nth-child(7){background:#d0cfc8}
  .tabrail a:nth-child(8){background:#cccbc4}
  .tabrail a:nth-child(9){background:#c8c7c0}
  .tabrail a::before{content:"";position:absolute;left:10px;right:10px;top:calc(var(--header-h) + 8px);height:1px;background:var(--rule-strong)}
  .tabrail a span{
    position:absolute;left:50%;top:calc(var(--header-h) + 24px);transform:translateX(-50%);
    writing-mode:vertical-rl;font-size:.78rem;letter-spacing:.04em;color:var(--muted);white-space:nowrap;font-weight:500
  }
  .tabrail a span::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-top:.6rem;opacity:0;transition:opacity .25s}
  .tabrail a.is-active{background:var(--sheet)}
  .tabrail a.is-active span{color:var(--ink);font-weight:600}
  .tabrail a.is-active span::after{opacity:1}
  .tabrail a:hover{background:var(--sheet)}
}

/* Sections & page footer lines ------------------------------------- */
.section{padding:clamp(3.5rem,7vw,6.5rem) 0;position:relative;scroll-margin-top:var(--header-h)}
.section--tight{padding:clamp(2.5rem,5vw,4rem) 0}
.section--tint{background:var(--gold-tint)}
.section--paper2{background:var(--paper-2)}
.section--dark{background:var(--black);color:#d9d6cc}
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff}
.section--dark .kicker{color:var(--gold-soft)}
.pagefoot{
  display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--rule-strong);
  padding-top:.8rem;margin-top:clamp(2.5rem,5vw,4.5rem);font-size:.85rem;font-weight:600;color:var(--ink)
}
.pagefoot span:last-child{font-weight:400;color:var(--muted)}
.pagefoot span:last-child b{color:var(--ink);font-weight:700}
.section--dark .pagefoot{border-color:rgba(255,255,255,.3);color:#fff}
.section--dark .pagefoot span:last-child{color:#bbb}.section--dark .pagefoot span:last-child b,.section--dark .pagefoot b{color:#fff}
.kicker{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--gold-deep);margin:0 0 1rem;display:flex;align-items:center;gap:.7rem}
.kicker::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--green);border:1.5px solid var(--green-deep);flex:none}
.lede{font-size:clamp(1.12rem,1.6vw,1.32rem);line-height:1.5;color:var(--text);max-width:36em}
.section-head{display:grid;gap:1rem;align-items:end;margin-bottom:clamp(2rem,4vw,3.2rem)}
@media (min-width:860px){.section-head{grid-template-columns:1.2fr .8fr}.section-head .lede{margin:0 0 .3rem}}

/* Hero (cover) ------------------------------------------------------ */
.cover{padding:clamp(1.5rem,3vw,2.5rem) 0 0;overflow:hidden;position:relative}
.cover .wrap{display:grid;gap:2rem;align-items:end}
@media (min-width:900px){.cover .wrap{grid-template-columns:1.1fr .9fr;align-items:center;min-height:min(72vh,760px)}}
.cover__text{padding:clamp(1rem,3vw,2.5rem) 0 clamp(2rem,5vw,4rem);position:relative;z-index:2}
.cover h1{color:#3d3d3f;max-width:11em}
.cover .lede{margin:1.4rem 0 2rem}
.cover__actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.cover__meta{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.82rem;color:var(--muted)}
.cover__meta b{display:block;color:var(--ink);font-weight:600;font-size:.9rem}
.cover__art{position:relative;align-self:end;justify-self:center;width:min(100%,520px);margin-top:1rem;container-type:inline-size}
.cover__art img{width:100%;position:relative;z-index:1;filter:drop-shadow(0 30px 40px rgba(0,0,0,.18))}
.cover__thread{position:absolute;left:-30%;right:-30%;top:18%;width:160%;height:auto;z-index:0;pointer-events:none}
.cover__thread path{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;opacity:.9}
.cover__thread circle{fill:var(--ink)}

/* Summary panel ----------------------------------------------------- */
.summary{display:grid;gap:2.5rem}
@media (min-width:960px){.summary{grid-template-columns:1.15fr .85fr;gap:4rem}}
.summary__side{border-left:1px solid var(--rule-strong);padding-left:2rem}
@media (max-width:959px){.summary__side{border-left:0;padding-left:0;border-top:1px solid var(--rule-strong);padding-top:1.5rem}}
.summary__side h3{font-size:1.15rem;margin-bottom:1rem}
.list-plain{list-style:none;padding:0;margin:0}
.list-plain li{padding:.6rem 0;border-bottom:1px solid var(--rule)}
.list-plain li b{display:block;color:var(--ink);font-weight:600}
.list-plain li span{font-size:.9rem;color:var(--muted)}
.numbered{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:1.2rem}
.numbered li{display:grid;grid-template-columns:3rem 1fr;gap:1rem;align-items:start}
.numbered .n{font-family:var(--serif);font-weight:700;font-size:1.8rem;color:var(--gold);line-height:1;padding-top:.15rem}
.numbered b{display:block;color:var(--ink);font-weight:600;margin-bottom:.15rem}

/* Big stat ---------------------------------------------------------- */
/* Success stories --------------------------------------------------- */
.stories__head{display:grid;gap:2rem;align-items:center;margin-bottom:clamp(2rem,4vw,3rem)}
@media (min-width:900px){.stories__head{grid-template-columns:1.2fr .8fr;gap:3rem}}
.stories__head .lede{color:#cfcbbf;max-width:34em}
.stories__art img{width:min(100%,440px);margin-inline:auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.5))}
.stories{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.story{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-top:2px solid var(--gold-soft);padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.6rem;transition:background .25s}
.story:hover{background:rgba(255,255,255,.07)}
.story__top{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.story__tag{color:var(--gold-soft)}
.story__when{color:#8f8b7f;font-weight:500;letter-spacing:.04em;text-transform:none;font-size:.78rem;white-space:nowrap}
.story h3{color:#fff;font-size:1.22rem;line-height:1.25;margin:0}
.story p{margin:0;font-size:.93rem;line-height:1.6;color:#cfcbbf}

/* Green marker highlight on headlines (as on huynguyenaus.com) */
mark.hl{background:none;color:inherit;background-image:linear-gradient(180deg,transparent 56%,var(--green) 56%);padding:0 .06em;margin:0 -.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.section--dark mark.hl{background-image:linear-gradient(180deg,transparent 56%,rgba(183,212,138,.55) 56%)}
.cover mark.hl{background-size:0% 100%;background-repeat:no-repeat;animation:hnm-mark 1s 1.1s var(--ease) forwards}
@keyframes hnm-mark{to{background-size:100% 100%}}
@media (prefers-reduced-motion:reduce){.cover mark.hl{background-size:100% 100%;animation:none}}

/* Service cards ----------------------------------------------------- */
.cards{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{
  background:var(--sheet);border:1px solid var(--rule);padding:1.5rem 1.4rem 1.3rem;display:flex;flex-direction:column;gap:.7rem;
  position:relative;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;min-height:230px
}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 30px -22px rgba(0,0,0,.45);border-color:var(--rule-strong)}
.card .idx{font-family:var(--serif);font-size:.95rem;color:var(--gold);font-weight:700}
.card h3{font-size:1.25rem;margin:0}
.card .tags{display:flex;flex-wrap:wrap;gap:.35rem}
.card .tags span{font-size:.7rem;font-weight:600;letter-spacing:.05em;border:1px solid var(--rule-strong);border-radius:999px;padding:.2rem .55rem;color:var(--muted)}
.card p{font-size:.93rem;color:var(--text);margin:0;flex:1}
.card .more{font-size:.85rem;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:.4rem;margin-top:.4rem}
.card .more svg{width:14px;height:14px;transition:transform .3s}
.card:hover .more svg{transform:translateX(3px)}
.card--feature{grid-column:span 2;flex-direction:row;align-items:center;gap:2rem;background:var(--gold-tint)}
.card--feature img{width:150px;flex:none}
@media (max-width:640px){.card--feature{grid-column:span 1;flex-direction:column;align-items:flex-start}}

/* Process ----------------------------------------------------------- */
.steps{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));position:relative;counter-reset:step}
.step{position:relative;padding-top:1.4rem}
.step::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule-strong)}
.step::after{content:"";position:absolute;left:0;top:-5px;width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--paper)}
.section--tint .step::after{box-shadow:0 0 0 4px var(--gold-tint)}
.step .num{font-family:var(--serif);font-weight:700;font-size:2.2rem;color:var(--ink);line-height:1;margin-bottom:.6rem}
.step h3{font-size:1.2rem;margin-bottom:.4rem}
.step p{font-size:.93rem;margin:0}

/* Split (about) ----------------------------------------------------- */
.split{display:grid;gap:2.5rem;align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:4rem}.split--art-left>.split__art{order:-1}}
.split__art{position:relative}
.split__art img{width:min(100%,460px);margin-inline:auto}
.split__art--frame{background:var(--sheet);border:1px solid var(--rule);padding:2rem 2rem 0;overflow:hidden}
.split__art--frame img{margin-bottom:-2px}
.quote{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.25;color:var(--ink);font-weight:600;margin:0;letter-spacing:-.01em}
.quote::before{content:"“";color:var(--gold);margin-right:.05em}
.quote::after{content:"”";color:var(--gold)}
.quote-by{margin:1.2rem 0 0;font-size:.9rem;color:var(--muted);display:flex;align-items:center;gap:.8rem}
.quote-by img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.quote-by b{display:block;color:var(--ink);font-weight:600}

/* Blog cards -------------------------------------------------------- */
.posts{display:grid;gap:1.5rem 2rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.post{border-top:1px solid var(--rule-strong);padding-top:1.1rem;display:flex;flex-direction:column;gap:.5rem}
.post .cat{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold-deep)}
.post h3{font-size:1.3rem;margin:0}
.post h3 a:hover{text-decoration:underline;text-decoration-color:var(--gold-soft);text-underline-offset:4px}
.post p{font-size:.93rem;margin:0;color:var(--text)}
.post .meta{font-size:.8rem;color:var(--muted);margin-top:auto;padding-top:.5rem}
.post--lead{grid-column:1/-1;display:grid;gap:1.2rem 2.5rem;align-items:center}
@media (min-width:860px){.post--lead{grid-template-columns:1fr 1.1fr}.post--lead h3{font-size:2rem;margin-bottom:.5rem}}
.post--lead img{width:100%;background:var(--sheet);border:1px solid var(--rule)}

/* CTA band ---------------------------------------------------------- */
.cta{background:var(--black);color:#e8e5db;position:relative;overflow:hidden}
.cta .wrap{display:grid;gap:2rem;align-items:center;padding:clamp(3rem,6vw,5rem) 0}
@media (min-width:900px){.cta .wrap{grid-template-columns:1fr auto}}
.cta h2{color:#fff;max-width:14em;margin-bottom:.6rem}
.cta p{color:#b9b5a8;max-width:34em;margin:0}
.cta__mark{position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:420px;opacity:.16;pointer-events:none}
.cta__actions{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start;position:relative}
.cta__contact{font-size:.9rem;color:#b9b5a8;line-height:1.7}
.cta__contact a{color:#fff;border-bottom:1px solid var(--gold);padding-bottom:1px}

/* Footer ------------------------------------------------------------ */
.site-footer{background:var(--black-2);color:#a9a597;font-size:.9rem;border-top:1px solid #2a2a2a}
.site-footer .wrap{display:grid;gap:2.5rem;padding:3.5rem 0 2rem}
@media (min-width:860px){.site-footer .wrap{grid-template-columns:1.3fr 1fr 1fr 1.2fr}}
.site-footer img.logo{width:120px}
.site-footer h4{color:#fff;font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 1rem;font-weight:600}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{padding:.22rem 0}
.site-footer a:hover{color:#fff}
.site-footer .legal{grid-column:1/-1;border-top:1px solid #2e2e2e;padding-top:1.3rem;display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;font-size:.8rem;color:#7d7a70}
.site-footer .tag{color:#d9bd63;font-weight:600}
.site-footer .disc{font-size:.8rem;line-height:1.6;color:#8a8779;margin-top:1rem}

/* Article / content pages ------------------------------------------ */
.titleblock{padding:clamp(2.5rem,6vw,5rem) 0 clamp(1.5rem,3vw,2.5rem)}
.titleblock.has-tone{background:linear-gradient(180deg,var(--tone) 0,rgba(255,255,255,0) 100%)}
.titleblock.has-tone .kicker{color:var(--tone-ink)}
.titleblock.has-tone .kicker::before{background:var(--tone-deep);border-color:var(--tone-ink)}
.titleblock h1{max-width:13em;color:#3d3d3f}
.titleblock .lede{margin-top:1.2rem}
.titleblock .meta{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:1.8rem;font-size:.85rem;color:var(--muted);align-items:center}
.titleblock .meta img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.titleblock .meta b{color:var(--ink);font-weight:600}
.titleblock--art .wrap{display:grid;gap:2rem;align-items:center}
@media (min-width:900px){.titleblock--art .wrap{grid-template-columns:1.2fr .8fr}}
.titleblock--art img{width:min(100%,380px);margin-inline:auto}
.titleblock--art img.portrait{width:auto;max-width:min(100%,380px);max-height:520px;filter:drop-shadow(0 22px 28px rgba(0,0,0,.16))}
.crumbs{font-size:.8rem;color:var(--muted);margin-bottom:1.6rem;display:flex;gap:.5rem;flex-wrap:wrap}
.crumbs a:hover{color:var(--ink)}
.crumbs span{opacity:.5}
.article{padding-bottom:clamp(3rem,6vw,5rem)}
.article .body{width:min(100% - 2.5rem,var(--measure));margin-inline:auto}
.article .body>*+*{margin-top:1.1em}
.article .body h2{margin-top:2.6em;font-size:clamp(1.6rem,2.6vw,2.15rem);scroll-margin-top:calc(var(--header-h) + 1rem)}
.article .body h3{margin-top:1.8em;font-size:1.3rem}
.article .body ul,.article .body ol{padding-left:1.3rem}
.article .body li{margin:.4rem 0}
.article .body li::marker{color:var(--gold)}
.article .body p{margin:0}
.article .body p+p{margin-top:1.1em}
.article .body figure{margin:2rem 0}
.article .body figure img{width:min(100%,360px);margin-inline:auto}
.article .body figcaption{font-size:.82rem;color:var(--muted);text-align:center;margin-top:.6rem}
.article .body table{width:100%;border-collapse:collapse;font-size:.92rem;margin:1.5rem 0}
.article .body th,.article .body td{text-align:left;padding:.7rem .6rem;border-bottom:1px solid var(--rule);vertical-align:top}
.article .body th{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;border-bottom:1px solid var(--rule-strong)}
.article .body td:first-child{font-weight:600;color:var(--ink)}
.tablewrap{overflow-x:auto;margin:1.5rem 0}
.tablewrap table{min-width:560px;margin:0!important}
.box{background:var(--gold-tint);border-top:2px solid var(--gold);padding:1.5rem 1.6rem;margin:2rem 0}
.box h3,.box h4{margin-top:0!important;font-size:1.05rem}
.box ul{margin:0}
.box p:last-child{margin-bottom:0}
.box--plain{background:var(--sheet);border:1px solid var(--rule);border-top:2px solid var(--ink)}
.callout{border-left:2px solid var(--gold);padding:.2rem 0 .2rem 1.3rem;font-size:1.02rem;color:var(--ink)}
.pull{font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.3;font-weight:600;color:var(--ink);margin:2.5rem 0;padding:1.5rem 0;border-top:1px dotted var(--rule-strong);border-bottom:1px dotted var(--rule-strong)}
.pull::before{content:"“";color:var(--gold)}.pull::after{content:"”";color:var(--gold)}
.bigfact{margin:2.5rem 0;padding:1.5rem 0;border-top:1px dotted var(--rule-strong);border-bottom:1px dotted var(--rule-strong)}
.bigfact .big{font-family:var(--serif);font-weight:700;font-size:clamp(2.8rem,6vw,4.4rem);line-height:1;color:var(--ink);letter-spacing:-.02em}
.bigfact .big small{font-size:.45em;margin-left:.15em}
.bigfact p{margin:.6rem 0 0!important;font-size:.9rem;color:var(--muted)}
details.faq{border-top:1px solid var(--rule);padding:.2rem 0}
details.faq:last-of-type{border-bottom:1px solid var(--rule)}
details.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.9rem 0;font-weight:600;color:var(--ink)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-family:var(--serif);font-size:1.5rem;color:var(--gold);flex:none;transition:transform .3s}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq .a{padding:0 0 1.1rem;color:var(--text);font-size:.97rem}
details.faq .a p{margin:0 0 .8em}
.steplist{list-style:none;padding:0;margin:1.5rem 0;counter-reset:s}
.steplist li{counter-increment:s;position:relative;padding:1rem 0 1rem 3.4rem;border-top:1px solid var(--rule)}
.steplist li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1rem;font-family:var(--serif);font-weight:700;font-size:1.4rem;color:var(--gold);line-height:1.2}
.steplist li b{display:block;color:var(--ink);font-weight:600;margin-bottom:.15rem}
.steplist li p{font-size:.95rem;margin:.15rem 0 0}
.article .body .steplist li{margin:0}
.related{margin-top:3rem}
.related .posts{margin-top:1.2rem}
.article-cta{margin-top:3rem;background:var(--sheet);border:1px solid var(--rule);padding:1.8rem;display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between}
.article-cta h3{margin:0 0 .3rem;font-size:1.3rem}
.article-cta p{margin:0;font-size:.93rem;color:var(--muted)}
.share{display:flex;gap:.5rem;align-items:center;font-size:.8rem;color:var(--muted)}
.share a{width:34px;height:34px;border:1px solid var(--rule-strong);border-radius:50%;display:inline-grid;place-items:center;color:var(--ink)}
.share a:hover{background:var(--ink);color:#fff}
.share svg{width:15px;height:15px}
.article-grid{display:grid;gap:3rem}
.article-grid>*{min-width:0}
@media (min-width:1000px){.article-grid{grid-template-columns:minmax(0,1fr) 260px}.article-grid .body{width:100%;margin:0}}
.toc{position:sticky;top:calc(var(--header-h) + 1.5rem);align-self:start;font-size:.88rem;border-left:1px solid var(--rule-strong);padding-left:1.2rem}
.toc .lbl{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:.8rem}
.toc a{display:block;padding:.3rem 0;color:var(--muted)}
.toc a.is-active,.toc a:hover{color:var(--ink);font-weight:600}
@media (max-width:999px){.toc{position:static;border-left:0;padding:1rem 1.2rem;background:var(--sheet);border:1px solid var(--rule);margin-bottom:1rem}}

/* Timeline (qualifications) ---------------------------------------- */
.timeline{list-style:none;padding:0;margin:2rem 0 0;border-left:1px solid var(--rule-strong)}
.timeline li{position:relative;padding:0 0 1.4rem 1.6rem}
.timeline li::before{content:"";position:absolute;left:-5px;top:.5rem;width:9px;height:9px;border-radius:50%;background:var(--gold)}
.timeline .yr{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.timeline b{display:block;color:var(--ink);font-weight:600}
.timeline span{font-size:.9rem;color:var(--muted)}

/* Contact ---------------------------------------------------------- */
.contact{display:grid;gap:3rem}
@media (min-width:960px){.contact{grid-template-columns:1fr 1fr;gap:4rem}}
.form{display:grid;gap:1rem}
.form label{display:grid;gap:.35rem;font-size:.85rem;font-weight:600;color:var(--ink)}
.form input,.form select,.form textarea{
  font:inherit;font-size:1rem;padding:.75rem .9rem;border:1px solid var(--rule-strong);background:#fff;border-radius:4px;width:100%;color:var(--ink)
}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.form textarea{min-height:140px;resize:vertical}
.form .row{display:grid;gap:1rem}
@media (min-width:560px){.form .row{grid-template-columns:1fr 1fr}}
.form .note{font-size:.8rem;color:var(--muted)}
.form button{justify-self:start}
.contact-list{list-style:none;padding:0;margin:0}
.contact-list li{padding:1rem 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:110px 1fr;gap:1rem;font-size:.97rem}
.contact-list li:last-child{border-bottom:1px solid var(--rule)}
.contact-list .k{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;padding-top:.25rem}
.contact-list a{color:var(--ink);border-bottom:1px solid var(--gold-soft)}
.map{margin-top:2rem;border:1px solid var(--rule);background:var(--sheet);aspect-ratio:16/10;max-width:100%}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05)}

/* Language toast --------------------------------------------------- */
.toast{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:950;background:var(--ink);color:#fff;padding:.9rem 1rem;border-radius:8px;
  display:none;align-items:center;gap:1rem;justify-content:space-between;font-size:.9rem;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)
}
.toast.is-on{display:flex}
@media (min-width:640px){.toast{left:auto;max-width:440px}}
.toast a.go{color:var(--gold-soft);font-weight:600;white-space:nowrap}
.toast button{background:none;border:0;color:#aaa;font-size:1.2rem;cursor:pointer;padding:0 .2rem}

/* Utilities --------------------------------------------------------- */
.grid-2{display:grid;gap:2rem}
@media (min-width:860px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-3{display:grid;gap:1.5rem}
@media (min-width:860px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}
.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.notfound{padding:6rem 0;text-align:center}
.notfound h1{font-size:clamp(4rem,12vw,9rem);color:var(--gold)}
/* ==================================================================
   Pastel visa tones (one colour family per visa type)
   ================================================================== */
.tone-sky{--tone:#e0edfa;--tone-2:#cae0f7;--tone-ink:#1f446b;--tone-deep:#b5d4f4}
.tone-mint{--tone:#dbede6;--tone-2:#c1e1d5;--tone-ink:#305a4a;--tone-deep:#a9d5c4}
.tone-rose{--tone:#f7e0e8;--tone-2:#f1c9d8;--tone-ink:#69213c;--tone-deep:#ebb4c9}
.tone-peach{--tone:#f7e1cf;--tone-2:#f2cbac;--tone-ink:#6b411f;--tone-deep:#edb78c}
.tone-sage{--tone:#e1edce;--tone-2:#cbe0ab;--tone-ink:#4b6228;--tone-deep:#b7d48a}
.tone-sand{--tone:#f3e6c8;--tone-2:#ebd5a1;--tone-ink:#6b541f;--tone-deep:#e3c47c}
.tone-lilac{--tone:#ede2f5;--tone-2:#e0ceee;--tone-ink:#482663;--tone-deep:#d4bbe8}
.tone-lavender{--tone:#e7e8fa;--tone-2:#d7d8f6;--tone-ink:#1f236b;--tone-deep:#c7c9f2}

/* service cards */
.card[class*="tone-"]{border-top:3px solid var(--tone-deep);background:linear-gradient(180deg,var(--tone) 0,var(--sheet) 42%)}
.card[class*="tone-"] .idx{color:var(--tone-ink)}
.card[class*="tone-"] .tags span{border-color:var(--tone-deep);color:var(--tone-ink);background:rgba(255,255,255,.55)}
.card[class*="tone-"] .more{color:var(--tone-ink)}
/* story cards (dark section) */
.story[class*="tone-"]{border-top-color:var(--tone-deep)}
.story[class*="tone-"] .story__tag{color:var(--tone-2)}

/* Directory link card ------------------------------------------------ */
.dircard{
  margin-top:1.1rem;display:grid;grid-template-columns:auto 1fr;gap:1.2rem 1.6rem;align-items:center;
  background:var(--sheet);border:1px solid var(--rule);padding:1.4rem 1.6rem;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s
}
.dircard:hover{transform:translateY(-3px);box-shadow:0 18px 30px -22px rgba(0,0,0,.45);border-color:var(--rule-strong)}
.dircard .motif--compass{width:64px;height:64px;color:var(--ink);flex:none}
.dircard__text b{display:block;font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--ink);line-height:1.15;margin-bottom:.25rem}
.dircard__text span{font-size:.93rem;color:var(--muted)}
.dircard__tones{display:flex;gap:.35rem;grid-column:2}
.dircard__tones i{width:22px;height:8px;border-radius:999px;background:var(--tone-2);display:block}
.dircard .more{grid-column:2;font-size:.85rem;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:.4rem}
.dircard .more svg{width:14px;height:14px;transition:transform .3s}
.dircard:hover .more svg{transform:translateX(3px)}
@media (min-width:760px){
  .dircard{grid-template-columns:auto 1fr auto auto}
  .dircard__tones,.dircard .more{grid-column:auto}
}

/* Visa directory page ------------------------------------------------ */
.titleblock--dir .wrap{display:grid;gap:2rem;align-items:center}
@media (min-width:900px){.titleblock--dir .wrap{grid-template-columns:1.3fr .7fr}}
.dir-art{display:flex;justify-content:center}
.dir-art .motif--compass{width:min(60%,230px);height:auto;color:var(--ink);opacity:.9}
@media (max-width:899px){.dir-art .motif--compass{width:120px}.titleblock--dir .dir-art{justify-content:flex-start}}
.dir-tools{background:var(--sheet);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:2.2rem 0 1.6rem}
.dir-how h2{font-size:1.2rem;margin-bottom:1rem}
.dir-how__grid{display:grid;gap:1rem 2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:1.8rem}
.dir-how__grid b{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.3rem}
.dir-how__grid p{margin:0;font-size:.9rem;color:var(--text);line-height:1.55}
.dir-bar{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center;margin-bottom:1rem}
.dir-search{flex:1 1 320px;display:flex;align-items:center;gap:.6rem;background:var(--paper);border:1px solid var(--rule-strong);padding:.6rem .9rem;border-radius:999px}
.dir-search svg{width:18px;height:18px;color:var(--muted);flex:none}
.dir-search input{flex:1;border:0;background:transparent;font:inherit;font-size:.98rem;color:var(--ink);outline:none;min-width:0}
.dir-search:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px var(--gold-tint-2)}
.dir-count{font-size:.85rem;color:var(--muted);font-weight:600;white-space:nowrap}
.dir-jump{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.dir-jump .lbl{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-right:.3rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;font-weight:600;color:var(--tone-ink);background:var(--tone);border:1px solid var(--tone-2);border-radius:999px;padding:.32rem .8rem .32rem .55rem;transition:transform .25s var(--ease),background .25s}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--tone-deep);display:block}
.chip b{font-weight:600;color:var(--tone-ink);opacity:.7;font-size:.78rem}
.chip:hover{transform:translateY(-2px);background:var(--tone-2)}
.dir-cat{padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--rule);scroll-margin-top:calc(var(--header-h) + 1rem)}
.dir-cat:first-child{border-top:0;padding-top:.5rem}
.dir-cat__head{display:grid;grid-template-columns:auto 1fr;gap:1rem 1.4rem;align-items:start;margin-bottom:1.6rem}
.dir-cat__idx{font-family:var(--serif);font-weight:700;font-size:2rem;line-height:1;color:var(--tone-ink);background:var(--tone);width:3.2rem;height:3.2rem;display:grid;place-items:center;border-radius:50%}
.dir-cat__head h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:.4rem}
.dir-cat__head .lede{font-size:1.02rem;max-width:44em;color:var(--text)}
.dir-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.visa{
  background:var(--sheet);border:1px solid var(--rule);border-left:4px solid var(--tone-deep);padding:1.25rem 1.3rem 1.2rem;
  display:flex;flex-direction:column;gap:.65rem;transition:transform .3s var(--ease),box-shadow .3s
}
.visa:hover{transform:translateY(-3px);box-shadow:0 18px 30px -22px rgba(0,0,0,.4)}
.visa__top{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.visa__sub{font-family:var(--serif);font-weight:700;font-size:1.05rem;color:var(--tone-ink);background:var(--tone);padding:.2rem .6rem;border-radius:6px;letter-spacing:.02em}
.visa__sub::before{content:"Subclass ";font-family:var(--sans);font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;opacity:.75;vertical-align:.1em}
html[lang="vi"] .visa__sub::before{content:"Subclass "}
.visa__sub--none::before{content:""}
.visa__kind{font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule-strong);border-radius:999px;padding:.18rem .55rem;white-space:nowrap}
.visa h3{font-size:1.18rem;line-height:1.25;margin:0}
.visa__who{margin:0;font-size:.92rem;line-height:1.6;color:var(--text);flex:1}
.visa__facts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.6rem;border-top:1px dotted var(--rule-strong);padding-top:.7rem}
.visa__facts dt{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:.15rem}
.visa__facts dd{margin:0;font-size:.86rem;font-weight:600;color:var(--ink);line-height:1.4}
.visa__links{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.82rem;font-weight:600;margin-top:.2rem}
.visa__links a{display:inline-flex;align-items:center;gap:.35rem}
.visa__links svg{width:13px;height:13px;transition:transform .3s}
.visa__svc{color:var(--tone-ink);background:var(--tone);padding:.3rem .7rem;border-radius:999px}
.visa__svc:hover svg{transform:translateX(3px)}
.visa__immi{color:var(--muted);padding:.3rem 0}
.visa__immi:hover{color:var(--ink)}
.visa__immi:hover svg{transform:translate(2px,-2px)}
.visa.is-hidden,.dir-cat.is-hidden{display:none}
.dir-empty{text-align:center;color:var(--muted);padding:3rem 0;font-size:1.05rem}
.dir-src{font-size:.82rem;color:var(--muted);margin:2.5rem 0 0;max-width:60em}

/* ==================================================================
   Motifs: compass, needle, thread, floating shapes (subtle motion)
   ================================================================== */
.motif{display:block;pointer-events:none}
.motif__ring{transform-origin:100px 100px;animation:hnm-spin 40s linear infinite}
.motif__needle{transform-origin:center;animation:hnm-wobble 5s ease-in-out infinite}
.motif--needle{position:absolute;right:0;top:-1.2rem;width:74px;height:74px;color:var(--ink);opacity:.55}
.summary__side{position:relative}
.steps-wrap{position:relative}
.motif--thread{position:absolute;left:0;right:0;top:-68px;width:100%;height:120px;color:var(--gold);opacity:.4;z-index:0}
.motif__path{stroke-dasharray:1400;stroke-dashoffset:1400}
.is-inview .motif__path{animation:hnm-draw 2.4s var(--ease) forwards}
.motif__knot{opacity:0}
.is-inview .motif__knot{animation:hnm-pop .5s 2.1s var(--ease) forwards}
#process .steps{position:relative;z-index:1}
.cover__thread path{stroke-dasharray:1600;stroke-dashoffset:1600;animation:hnm-draw 2.6s .3s var(--ease) forwards}
.cover__thread circle{transform-origin:940px 560px;animation:hnm-pulse 4s 2.6s ease-in-out infinite}
.shapes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.shapes + .wrap{position:relative;z-index:1}
.shape{position:absolute;display:block;opacity:.3;animation:hnm-float 12s ease-in-out infinite}
.shape--sq{width:34px;height:34px;border:2px solid var(--gold-deep);transform:rotate(12deg)}
.shape--ci{width:26px;height:26px;border-radius:50%;border:2px solid var(--gold-deep)}
.shape--ri{width:60px;height:60px;border-radius:50%;border:1px dashed var(--gold-deep)}
.section--dark .shape{border-color:var(--gold-soft);opacity:.22}
.shape.s1{left:4%;top:12%;animation-duration:16s}
.shape.s2{left:14%;bottom:14%;animation-duration:13s;animation-delay:-4s}
.shape.s3{right:8%;top:18%;animation-duration:18s;animation-delay:-7s;width:22px;height:22px}
.shape.s4{right:22%;bottom:10%;animation-duration:15s;animation-delay:-2s;width:14px;height:14px}
.shape.s5{left:48%;top:6%;animation-duration:22s;animation-delay:-9s}
.shape.s6{right:3%;bottom:34%;animation-duration:17s;animation-delay:-11s;width:48px;height:48px}
.cta::after{
  content:"";position:absolute;left:-90px;bottom:-110px;width:320px;height:320px;border-radius:50%;pointer-events:none;
  border:1px dashed rgba(217,189,99,.45);animation:hnm-spin 120s linear infinite;
  background:radial-gradient(circle at center,transparent 58%,rgba(217,189,99,.06) 59%,transparent 60%)
}
@keyframes hnm-spin{to{transform:rotate(360deg)}}
@keyframes hnm-wobble{0%,100%{transform:rotate(-14deg)}45%{transform:rotate(16deg)}70%{transform:rotate(8deg)}}
@keyframes hnm-draw{to{stroke-dashoffset:0}}
@keyframes hnm-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes hnm-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.6)}}
@keyframes hnm-float{0%,100%{transform:translate3d(0,0,0) rotate(12deg)}50%{transform:translate3d(14px,-32px,0) rotate(48deg)}}
@media (prefers-reduced-motion:reduce){
  .motif__ring,.motif__needle,.shape,.cta::after,.cover__thread circle{animation:none!important}
  .motif__path,.cover__thread path{stroke-dashoffset:0!important;animation:none!important}
  .motif__knot{opacity:1!important}
}
/* ==================================================================
   Motion: entrance, scroll reveal, visa tape, card icons
   ================================================================== */
/* Hero entrance (CSS only, runs on load) */
.cover__text > *{animation:hnm-rise .9s var(--ease) both}
.cover__text > .kicker{animation-delay:.05s}
.cover__text > h1{animation-delay:.18s}
.cover__text > .lede{animation-delay:.34s}
.cover__text > .cover__actions{animation-delay:.48s}
.cover__text > .cover__meta{animation-delay:.62s}
.cover__art img{animation:hnm-rise-img 1.3s .25s var(--ease) both}
.cover__thread path{animation-delay:.9s}
.cover__thread circle{animation-delay:3.2s}
.titleblock .wrap > *{animation:hnm-rise .8s var(--ease) both}
.titleblock .wrap > * + *{animation-delay:.2s}
.titleblock--art img,.dir-art{animation:hnm-rise-img 1.1s .15s var(--ease) both}
.btn .dot svg{transition:transform .35s var(--ease)}
.btn:hover .dot svg{transform:translate(2px,-2px)}
.btn--primary:hover .dot,.btn--gold:hover .dot{animation:hnm-pulse-soft 1.2s ease-in-out infinite}

/* Scroll reveal: hidden only when JS is present, then staggered by --i */
html.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
html.js [data-reveal].is-in{opacity:1;transform:none}
html.js .card[data-reveal].is-in:hover{transform:translateY(-3px)}
html.js .story[data-reveal]{transform:translateY(28px) scale(.98)}
html.js .story[data-reveal].is-in{transform:none}
.card__icon{position:absolute;right:1rem;top:.9rem;width:40px;height:40px;color:var(--tone-ink);opacity:.9}
.card__icon svg{width:100%;height:100%;display:block;overflow:visible}
.ic-spin{transform-origin:20px 20px;animation:hnm-spin 14s linear infinite}
.ic-spin-rev{transform-origin:20px 20px;animation:hnm-spin 10s linear infinite reverse}
.ic-needle{transform-origin:20px 20px;animation:hnm-wobble 4s ease-in-out infinite}
.ic-dot{transform-origin:20px 20px;animation:hnm-spin 6s linear infinite}
.ic-ring{transform-origin:20px 20px;animation:hnm-ring 2.8s ease-out infinite}
.ic-ring--2{animation-delay:1.4s}
.ic-arc{stroke-dasharray:60;stroke-dashoffset:60;animation:hnm-arc 3.2s ease-in-out infinite}
.ic-arc--2{animation-delay:.5s}
.ic-draw{animation:hnm-draw 1.4s var(--ease) forwards;animation-play-state:paused}
.ic-draw--2{animation-delay:.9s}
.is-in .ic-draw,.card:hover .ic-draw{animation-play-state:running}
.ic-knot{animation:hnm-knot 4s ease-in-out infinite}
.ic-blink{animation:hnm-blink 3s ease-in-out infinite}
.ic-blink--2{animation-delay:1.5s}
.card:hover .card__icon{animation:hnm-pulse-soft 1.4s ease-in-out infinite}

/* Step dots pulse one after another once the process row is in view */
.steps-wrap.is-inview .step::after{animation:hnm-dot 4.8s ease-in-out infinite}
.steps-wrap.is-inview .step:nth-child(2)::after{animation-delay:1.2s}
.steps-wrap.is-inview .step:nth-child(3)::after{animation-delay:2.4s}
.steps-wrap.is-inview .step:nth-child(4)::after{animation-delay:3.6s}
.steps-wrap.is-inview .step .num{animation:hnm-count .6s var(--ease) both}
.steps-wrap.is-inview .step:nth-child(2) .num{animation-delay:.15s}
.steps-wrap.is-inview .step:nth-child(3) .num{animation-delay:.3s}
.steps-wrap.is-inview .step:nth-child(4) .num{animation-delay:.45s}

/* Visa tape under the hero */
.tape{display:flex;align-items:center;gap:1rem;border-top:1px solid var(--rule);background:var(--sheet);position:relative;z-index:2;margin-top:-1px;animation:hnm-rise .9s .8s var(--ease) both}
.tape__lbl{flex:none;display:inline-flex;align-items:center;gap:.4rem;padding:.9rem 1.25rem .9rem clamp(1.25rem,calc((100vw - var(--maxw)) / 2),100vw);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold-deep);border-right:1px solid var(--rule);white-space:nowrap}
.tape__lbl svg{width:13px;height:13px;transition:transform .3s}
.tape:hover .tape__lbl svg{transform:translateX(3px)}
.tape__viewport{flex:1;overflow:hidden;min-width:0;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tape__track{display:inline-flex;gap:.6rem;padding:.7rem 0;white-space:nowrap;animation:hnm-tape 70s linear infinite;will-change:transform}
.tape:hover .tape__track{animation-play-state:paused}
.tape .chip{font-size:.8rem;padding:.3rem .75rem .3rem .5rem}
.tape .chip b{font-family:var(--serif);font-size:.95rem;opacity:1}
@media (max-width:899px){.tape__lbl{padding-left:1.25rem}.tape__track{animation-duration:50s}}
@media (max-width:600px){.tape__lbl{font-size:.64rem;padding:.8rem .7rem .8rem 1rem;letter-spacing:.08em}.tape__lbl svg{width:11px;height:11px}}
@keyframes hnm-tape{to{transform:translateX(-50%)}}

@keyframes hnm-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes hnm-rise-img{from{opacity:0;transform:translateY(40px) scale(.97)}to{opacity:1;transform:none}}
@keyframes hnm-pulse-soft{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes hnm-ring{from{transform:scale(.45);opacity:.9}to{transform:scale(1.15);opacity:0}}
@keyframes hnm-arc{0%{stroke-dashoffset:60}45%,60%{stroke-dashoffset:0}100%{stroke-dashoffset:-60}}
@keyframes hnm-knot{0%{stroke-dashoffset:70}40%,60%{stroke-dashoffset:0}100%{stroke-dashoffset:-70}}
@keyframes hnm-blink{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:.6;transform:translateY(-2px)}}
@keyframes hnm-dot{0%,20%,100%{box-shadow:0 0 0 4px var(--paper-2),0 0 0 4px rgba(176,138,39,0)}10%{box-shadow:0 0 0 4px var(--paper-2),0 0 0 14px rgba(176,138,39,.22)}}
@keyframes hnm-count{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .cover__text > *,.cover__art img,.titleblock .wrap > *,.titleblock--art img,.dir-art,.tape,.tape__track,.card__icon,.card__icon *,.steps-wrap.is-inview .step::after,.steps-wrap.is-inview .step .num{animation:none!important}
  html.js [data-reveal]{opacity:1;transform:none;transition:none}
  .ic-draw,.ic-arc,.ic-knot{stroke-dashoffset:0!important}
}
/* Nav dropdown (Services) ------------------------------------------- */
.nav .nav__item{position:relative;display:inline-flex}
.nav .has-sub > a{display:inline-flex;align-items:center;gap:.3rem}
.nav .has-sub > a svg{width:11px;height:11px;transition:transform .25s}
.nav .has-sub:hover > a svg,.nav .has-sub:focus-within > a svg{transform:rotate(180deg)}
.nav .sub{position:absolute;top:calc(100% + .6rem);left:-.9rem;min-width:250px;background:var(--sheet);border:1px solid var(--rule);box-shadow:0 22px 40px -24px rgba(0,0,0,.45);padding:.5rem;display:none;flex-direction:column;z-index:60;border-radius:8px}
.nav .sub::before{content:"";position:absolute;left:0;right:0;top:-.7rem;height:.7rem}
.nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{display:flex;animation:hnm-rise .25s var(--ease)}
.nav .sub a{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;border-radius:6px;font-size:.88rem;font-weight:500;white-space:nowrap}
.nav .sub a:hover{background:var(--paper-2)}
.nav .sub a i{width:10px;height:10px;border-radius:50%;background:var(--tone-deep);flex:none}
.nav .sub .sub__all{font-weight:600;border-bottom:1px solid var(--rule);border-radius:0;margin-bottom:.3rem;padding-bottom:.6rem;justify-content:space-between}
.nav .sub .sub__all svg{width:13px;height:13px}

/* Orbit of icons behind the hero portrait ---------------------------- */
.orbit{--d:clamp(280px,48vw,500px);--d:94cqw;position:absolute;left:50%;top:40%;width:var(--d);height:var(--d);transform:translate(-50%,-50%);z-index:0;pointer-events:none;animation:hnm-spin 80s linear infinite}
.orbit__ring{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(23,23,26,.28)}
.orbit__ring--2{inset:11%;border:1px solid rgba(23,23,26,.09)}
.orbit__item{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--tone);border:1.5px solid var(--tone-deep);color:var(--tone-ink);display:grid;place-items:center;box-shadow:0 8px 18px -10px rgba(0,0,0,.35);transform:rotate(var(--a)) translateY(calc(var(--d) / -2)) rotate(calc(-1 * var(--a)))}
.orbit__item svg{width:22px;height:22px;animation:hnm-spin 80s linear infinite reverse}
.orbit__item:nth-child(odd){animation:hnm-bob 6s ease-in-out infinite}
.orbit__item:nth-child(even){animation:hnm-bob 7s -3s ease-in-out infinite}
@keyframes hnm-bob{0%,100%{transform:rotate(var(--a)) translateY(calc(var(--d) / -2)) rotate(calc(-1 * var(--a))) scale(1)}50%{transform:rotate(var(--a)) translateY(calc(var(--d) / -2 - 6px)) rotate(calc(-1 * var(--a))) scale(1.06)}}
@media (max-width:899px){.orbit{--d:clamp(230px,78vw,340px);--d:90cqw;top:42%}.orbit__item{width:38px;height:38px;margin:-19px 0 0 -19px}.orbit__item svg{width:18px;height:18px}}
@media (prefers-reduced-motion:reduce){.orbit,.orbit__item,.orbit__item svg{animation:none!important}}
/* Forms directory ---------------------------------------------------- */
.dir-grid--forms{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.form{background:var(--sheet);border:1px solid var(--rule);border-left:4px solid var(--tone-deep);padding:1.15rem 1.25rem 1.1rem;display:flex;flex-direction:column;gap:.5rem;transition:transform .3s var(--ease),box-shadow .3s}
.form:hover{transform:translateY(-3px);box-shadow:0 18px 30px -22px rgba(0,0,0,.4)}
.form__top{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.form__num{font-family:var(--serif);font-weight:700;font-size:1.05rem;color:var(--tone-ink);background:var(--tone);padding:.2rem .6rem;border-radius:6px}
.form__num::before{content:"Form ";font-family:var(--sans);font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.form__num--text::before{content:""}
.form__flags{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:flex-end}
.form__star,.form__kind{font-size:.64rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:.18rem .55rem;white-space:nowrap}
.form__star{background:var(--green);color:#2f4a1f}
.form__kind{border:1px solid var(--rule-strong);color:var(--muted)}
.form h3{font-size:1.08rem;line-height:1.3;margin:0}
.form__sub{margin:-.2rem 0 0;font-size:.8rem;color:var(--muted);line-height:1.4}
.form__note{margin:0;font-size:.9rem;line-height:1.55;color:var(--text);flex:1}
.form__links{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.4rem .8rem;border-top:1px dotted var(--rule-strong);padding-top:.7rem;margin-top:.2rem}
.form__dl{display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem;font-weight:600;color:var(--tone-ink);background:var(--tone);padding:.35rem .8rem;border-radius:999px}
.form__dl svg{width:15px;height:15px;transition:transform .3s}
.form__dl:hover svg{transform:translateY(2px)}
.form__upd{font-size:.76rem;color:var(--muted)}
.form__langs{font-size:.8rem}
.form__langs summary{cursor:pointer;color:var(--muted);font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:.3rem}
.form__langs summary::before{content:"+";font-family:var(--serif);font-size:1rem;color:var(--tone-ink)}
.form__langs[open] summary::before{content:"−"}
.form__langs summary::-webkit-details-marker{display:none}
.form__langs div{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.5rem}
.form__langs div a{border:1px solid var(--rule);border-radius:999px;padding:.15rem .55rem;font-size:.74rem;color:var(--text)}
.form__langs div a:hover{border-color:var(--tone-deep);background:var(--tone)}
.form__langs div a.is-vi{background:var(--tone);border-color:var(--tone-deep);color:var(--tone-ink);font-weight:600}
.form.is-hidden{display:none}
.dir-art--forms{position:relative;color:var(--ink)}
.dir-art--forms .shapes{position:absolute;inset:-10% -20%}
.motif--stack{width:min(60%,230px);height:auto;position:relative;z-index:1}
.motif--stack .stack rect:nth-child(1){animation:hnm-stack 6s ease-in-out infinite}
.motif--stack .stack rect:nth-child(2){animation:hnm-stack 6s -2s ease-in-out infinite}
.motif--stack .stack rect:nth-child(3){animation:hnm-stack 6s -4s ease-in-out infinite}
@keyframes hnm-stack{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* Page flip between pages (cross-document view transitions; header and rail stay put) */
@view-transition{navigation:auto}
.site-header{view-transition-name:hnm-header}
.tabrail{view-transition-name:hnm-rail}
::view-transition-group(hnm-header),::view-transition-group(hnm-rail){animation-duration:0s}
::view-transition-old(root){animation:hnm-page-out .42s cubic-bezier(.5,0,.6,.4) both;transform-origin:left center}
::view-transition-new(root){animation:hnm-page-in .5s .08s var(--ease) both;transform-origin:left center}
@keyframes hnm-page-out{to{transform:perspective(1400px) rotateY(-16deg) translateX(-4%);opacity:0;filter:brightness(.92)}}
@keyframes hnm-page-in{from{transform:perspective(1400px) rotateY(10deg) translateX(5%);opacity:0}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.site-header,.tabrail,.toast,.cta,.site-footer,.share{display:none!important}body::before{display:none}}

/* ---------- Visa detail pages (/visas/<subclass>/) ---------- */
.visa__page{color:var(--ink);background:var(--gold-tint);padding:.3rem .7rem;border-radius:999px}
.visa__page:hover svg{transform:translateX(3px)}
.visa h3 a{background-image:linear-gradient(var(--tone-deep),var(--tone-deep));background-repeat:no-repeat;background-size:0 2px;background-position:0 100%;transition:background-size .3s var(--ease)}
.visa:hover h3 a{background-size:100% 2px}
.wrap--visa{width:min(100% - 2.5rem,var(--maxw))}
.vdetail .vnotice,.vdetail .vhelp,.vdetail .vofficial,.vdetail .vswitch,.vdetail .vactor,.vdetail .vintro,.vdetail .vsource,.vdetail .vparent,.vdetail .vsibs,.vdetail .vgroup:not(#streams){max-width:56rem}
.titleblock--visa .wrap{display:grid;gap:2rem;align-items:start}
@media(min-width:900px){.titleblock--visa .wrap{grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr)}}
.titleblock--visa h1{font-size:clamp(2rem,4vw,3.3rem);max-width:none}
.vdesc{margin-top:1rem;color:var(--muted);font-size:.98rem}
.vdesc p{margin:0}
.vfacts{margin:0;display:grid;gap:.9rem;background:var(--sheet);border:1px solid var(--rule);border-top:2px solid var(--tone-deep);padding:1.2rem 1.3rem}
.vtitle__facts{padding-top:2.6rem}
.vfacts dt{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tone-ink);font-weight:600;margin-bottom:.2rem}
.vfacts dd{margin:0;font-size:.92rem;color:var(--ink);line-height:1.5}
.vfacts dd p{margin:0}
.vfacts dd p+p,.vfacts dd ul{margin-top:.35rem}
.vfacts dd ul{padding-left:1.1rem}
.vfacts dd h5,.vfacts dd h4{font-size:.8rem;margin:.6rem 0 .2rem}
.vfacts--sm{padding:.9rem 1rem;gap:.6rem;border-top-width:1px}
.vfacts--sm dd{font-size:.86rem;font-weight:600}
.vfacts--sm dd p{font-weight:600}
.vdetail{padding-top:1rem}
.vnotice{background:var(--gold-tint);border-left:3px solid var(--gold);padding:1.2rem 1.4rem;margin:0 0 1.8rem;font-size:.95rem}
.vnotice .kicker{margin-bottom:.5rem}
.vnotice p{margin:0}.vnotice p+p{margin-top:.6rem}
.vhelp{display:grid;gap:1.2rem;align-items:center;background:var(--black);color:#d9d6cc;padding:1.6rem 1.8rem;margin:0 0 2rem;border-radius:4px;position:relative;overflow:hidden}
.vhelp::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:var(--tone-deep);opacity:.18;pointer-events:none}
@media(min-width:760px){.vhelp{grid-template-columns:1.4fr auto}}
.vhelp .kicker{color:var(--gold-soft);margin-bottom:.5rem}
.vhelp p{margin:0;font-size:.95rem;line-height:1.6}
.vhelp__actions{display:flex;flex-direction:column;gap:.6rem;position:relative;z-index:1}
.vhelp__actions .btn{justify-content:space-between}
.vhelp__actions .btn--primary{background:var(--gold-soft);color:var(--ink)}
.vhelp__actions .btn--primary .dot{background:var(--ink);color:var(--gold-soft)}
.vhelp__actions .btn--ghost{border-color:rgba(255,255,255,.35);color:#fff}
.vhelp__actions .btn--ghost .dot{background:#fff;color:var(--ink)}
.vofficial{border-top:2px solid var(--ink);padding-top:1.2rem;margin:2.4rem 0 1.4rem}
.vofficial .kicker{margin-bottom:.5rem}
.vofficial__p{margin:0;font-size:.92rem;color:var(--muted)}
.vlang{margin:.6rem 0 0;font-size:.82rem;font-weight:600;color:var(--tone-ink);background:var(--tone);display:inline-block;padding:.25rem .7rem;border-radius:999px}
.vswitch{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1rem 0 1.6rem}
.vswitch__lbl{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-right:.3rem}
.vswitch__btn{font:inherit;font-size:.9rem;font-weight:600;color:var(--ink);background:var(--sheet);border:1px solid var(--rule-strong);border-radius:999px;padding:.45rem 1rem;cursor:pointer;transition:background .25s,color .25s}
.vswitch__btn.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
html.js .vactor[data-actor][hidden]{display:none}
.vactor__title{font-size:clamp(1.5rem,2.4vw,2rem);margin:2rem 0 .6rem}
.vactor__title .kicker{display:flex;margin-bottom:.3rem}
.vtabs{position:sticky;top:var(--header-h);z-index:20;background:var(--paper);margin:0 0 1.4rem;border-bottom:1px solid var(--rule-strong)}
.vtabs__in{display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none;align-items:center}
.vtabs__in::-webkit-scrollbar{display:none}
.vtabs a{flex:none;font-size:.86rem;font-weight:600;color:var(--muted);padding:.85rem .9rem;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color .2s,border-color .2s}
.vtabs a:hover,.vtabs a.is-active{color:var(--ink);border-color:var(--tone-deep)}
.vtabs__all{margin-left:auto;flex:none;font:inherit;font-size:.78rem;font-weight:600;color:var(--tone-ink);background:var(--tone);border:0;border-radius:999px;padding:.35rem .8rem;cursor:pointer}
html:not(.js) .vtabs__all{display:none}
.vbody{width:auto;margin:0}
.vgroup{scroll-margin-top:calc(var(--header-h) + 3.4rem);margin:0 0 3rem}
.vgroup>h2{font-size:clamp(1.5rem,2.4vw,1.95rem);margin:0 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--rule)}
.vgroup>.lede{font-size:1.02rem;margin:0 0 1.2rem}
.vov{display:grid;gap:1px;background:var(--sheet);border:1px solid var(--rule);margin:0 0 1rem}
@media(min-width:700px){.vov{grid-template-columns:1fr 1fr}}
.vov__cell{background:var(--sheet);padding:1.1rem 1.2rem;font-size:.95rem;box-shadow:0 0 0 1px var(--rule)}
.vov__cell h3{font-family:var(--sans);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tone-ink);margin:0 0 .5rem;line-height:1.3}
.vov__cell p{margin:0}.vov__cell p+p{margin-top:.6rem}
.vov__cell ul,.vov__cell ol{margin:0;padding-left:1.15rem}
.vov__cell li{margin:.25rem 0}
.vov__cell h4,.vov__cell h5{font-size:.9rem;margin:.8rem 0 .3rem}
.vov__cell--list{background:var(--tone);color:var(--ink)}
.vov__cell--list h3{color:var(--tone-ink)}
.vov__cond{font-size:.9rem;font-weight:600}
details.vsec{border-top:1px solid var(--rule);margin:0}
details.vsec:last-of-type{border-bottom:1px solid var(--rule)}
details.vsec summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.8rem;padding:.95rem 0;font-family:var(--serif);font-weight:700;font-size:1.1rem;line-height:1.3;color:var(--ink)}
details.vsec summary::-webkit-details-marker{display:none}
details.vsec summary::after{content:"+";font-family:var(--serif);font-size:1.5rem;color:var(--gold);margin-left:auto;flex:none;transition:transform .3s;line-height:1}
details.vsec[open] summary::after{transform:rotate(45deg)}
details.vsec summary:hover{color:var(--tone-ink)}
.vsec__body{padding:0 0 1.4rem;font-size:.97rem}
.vsec__body>*+*{margin-top:1em}
.vsec__body p{margin:0}.vsec__body p+p{margin-top:1em}
.vsec__body ul,.vsec__body ol{padding-left:1.3rem;margin:0}
.vsec__body li{margin:.35rem 0}.vsec__body li::marker{color:var(--gold)}
.vsec__body h4{font-size:1.05rem;margin:1.4em 0 .4em}
.vsec__body h5{font-size:.95rem;margin:1.2em 0 .3em}
.vsec__body h6{font-size:.92rem;margin:1.1em 0 .3em;color:var(--tone-ink);font-family:var(--sans);font-weight:600;line-height:1.4}
.vsec__body>h4:first-child,.vsec__body>.vsub:first-child>h4:first-child{margin-top:.2em}
.vsub{margin-top:1.2em}
.vsub--4{padding-left:0}
.vsub--5{border-left:2px solid var(--tone-2);padding-left:1rem;margin-top:1em}
.vsub--6{border-left:2px dotted var(--rule-strong);padding-left:.9rem}
.vnum{display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--tone-deep);color:var(--tone-ink);font-family:var(--sans);font-weight:700;font-size:.85rem;flex:none;margin-right:.25rem}
.vsec__body h4 .vnum{width:1.6rem;height:1.6rem;font-size:.75rem;margin-right:.4rem;vertical-align:middle}
.tbl{overflow-x:auto;margin:1rem 0}
.tbl table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:420px}
.tbl th,.tbl td{text-align:left;padding:.6rem .6rem;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl th{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;border-bottom:1px solid var(--rule-strong)}
.tbl td:first-child{font-weight:600;color:var(--ink)}
.tbl caption{text-align:left;font-size:.8rem;color:var(--muted);padding:.3rem 0}
.btn-out{display:inline-flex;align-items:center;gap:.5rem;background:var(--ink);color:#fff!important;text-decoration:none!important;padding:.6rem 1.1rem;border-radius:999px;font-weight:600;font-size:.9rem}
.vintro{margin:0 0 2rem;font-size:.98rem}
.vintro p{margin:0}.vintro p+p{margin-top:.8em}
.vstreams{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.vstream{background:var(--sheet);border:1px solid var(--rule);border-top:3px solid var(--tone-deep);padding:1.3rem 1.3rem 1.2rem;display:flex;flex-direction:column;gap:.7rem;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.vstream:hover{transform:translateY(-3px);box-shadow:0 18px 30px -22px rgba(0,0,0,.4)}
.vstream__lbl{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--tone-ink)}
.vstream h3{font-size:1.18rem;line-height:1.25;margin:0}
.vstream h3 a:hover{color:var(--tone-ink)}
.vstream p{margin:0;font-size:.92rem;line-height:1.55;flex:1}
.vstream__points{font-size:.86rem;border-top:1px dotted var(--rule-strong);padding-top:.6rem}
.vstream__points b{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.vstream__points ul{margin:0;padding-left:1.1rem}
.vstream__points li{margin:.2rem 0}
.vstream__more{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.85rem;color:var(--tone-ink);background:var(--tone);padding:.35rem .8rem;border-radius:999px;align-self:flex-start;margin-top:.2rem}
.vstream__more svg{width:13px;height:13px;transition:transform .3s}
.vstream__more:hover svg{transform:translateX(3px)}
.vparent{margin:1.6rem 0 0;font-weight:600;font-size:.92rem}
.vparent a{display:inline-flex;align-items:center;gap:.5rem}
.vparent svg{width:14px;height:14px;transform:rotate(180deg)}
.vsibs{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1rem 0 0}
.vsibs .lbl{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-right:.3rem}
.vsource{margin:2.4rem 0 0;padding:1.1rem 1.3rem;border:1px solid var(--rule);background:var(--sheet);font-size:.84rem;color:var(--muted);display:grid;gap:.6rem}
.vsource p{margin:0}
.vsource a{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--ink)}
.vsource a svg{width:13px;height:13px}
@media(max-width:600px){.vtitle__facts{padding-top:0}.vhelp{padding:1.3rem 1.2rem}.vtabs a{padding:.75rem .65rem;font-size:.82rem}}
@media print{.vtabs,.vhelp,.tabrail,.site-header,.site-footer,.cta{display:none!important}details.vsec{display:block}details.vsec>*{display:block}}

/* decorative motifs must never create a horizontal scrollbar (clip, not hidden, so sticky still works) */
.titleblock,.cta,.section,.dir-tools{overflow-x:clip}

/* ===================================================================
   Tools: hub, points calculator
   =================================================================== */
.tone-gold{--tone:#f6ecd4;--tone-2:#eedcb0;--tone-ink:#6b541f;--tone-deep:#e6cf94}

/* Tools hub */
.tool-grid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.toolcard{display:flex;flex-direction:column;gap:.5rem;padding:1.8rem 1.7rem 1.6rem;background:var(--tone);border:1px solid var(--tone-deep);border-radius:2px;color:var(--ink);position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s}
.toolcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px -28px rgba(23,23,26,.5)}
.toolcard__idx{position:absolute;top:1.1rem;right:1.3rem;font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--tone-ink);opacity:.28}
.toolcard h3{margin:0;font-size:1.35rem}
.toolcard__sub{margin:0;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tone-ink);font-weight:600}
.toolcard p{margin:.4rem 0 0;font-size:.95rem}
.toolcard__go{display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem;font-weight:600;font-size:.9rem;color:var(--tone-ink)}
.toolcard__go svg{width:15px;height:15px;transition:transform .3s}
.toolcard:hover .toolcard__go svg{transform:translateX(4px)}
.dir-art--tools .motif--gauge,.dir-art--pts .motif--gauge{color:var(--ink)}
.gauge__needle{transform-origin:100px 100px;animation:hnm-sweep 7s cubic-bezier(.4,0,.2,1) infinite}
@keyframes hnm-sweep{0%,100%{transform:rotate(-46deg)}50%{transform:rotate(24deg)}}
@media(prefers-reduced-motion:reduce){.gauge__needle{animation:none}}

/* Points calculator layout */
.pts__pick{margin-bottom:2.4rem}
.pts__pick h2{font-size:1.35rem;margin:0 0 .3rem}
.pts__pick .lede{font-size:.95rem;margin:0 0 1.2rem}
.pick-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pick{position:relative;cursor:pointer}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick__body{display:flex;flex-direction:column;gap:.35rem;height:100%;padding:1.2rem 1.3rem;background:var(--sheet);border:1px solid var(--rule);border-radius:2px;transition:background .25s,border-color .25s,transform .25s}
.pick:hover .pick__body{transform:translateY(-2px)}
.pick input:checked+.pick__body{background:var(--tone);border-color:var(--tone-ink)}
.pick input:focus-visible+.pick__body{outline:2px solid var(--ink);outline-offset:3px}
.pick__num{font-family:var(--serif);font-size:1.9rem;line-height:1;color:var(--tone-ink)}
.pick__body b{font-size:1rem}
.pick__tag{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.pick__note{font-size:.86rem;color:var(--ink);opacity:.85;margin-top:.2rem}
.pick__pts{position:absolute;top:1rem;right:1.2rem;font-weight:700;font-size:.9rem;color:var(--tone-ink);background:#fff;border:1px solid var(--tone-deep);border-radius:999px;padding:.12rem .55rem}
.pts__closed{font-size:.84rem;color:var(--muted);margin:1rem 0 0;max-width:70ch}

.pts__grid{display:grid;gap:2.4rem;grid-template-columns:minmax(0,1fr) 320px;align-items:start}
.pts__side{position:sticky;top:88px;display:grid;gap:1rem}

/* Question cards */
.q{background:var(--sheet);border:1px solid var(--rule);border-left:3px solid var(--tone-deep);padding:1.5rem 1.6rem;margin:0 0 1.2rem;scroll-margin-top:90px}
.q__head{display:grid;grid-template-columns:auto 1fr auto;gap:.4rem 1rem;align-items:start}
.q__n{font-family:var(--serif);font-size:1.1rem;color:var(--tone-ink);background:var(--tone);border-radius:999px;width:2rem;height:2rem;display:grid;place-items:center;font-weight:600}
.q__ask h3{margin:0 0 .25rem;font-size:1.15rem}
.q__q{margin:0;font-weight:600;font-size:.98rem}
.q__hint{margin:.3rem 0 0;font-size:.85rem;color:var(--muted)}
.q__pts{font-family:var(--serif);font-size:1.5rem;font-weight:700;color:var(--muted);min-width:2.6rem;text-align:right;transition:color .2s}
.q.is-done .q__pts{color:var(--tone-ink)}
.q__opts{display:grid;gap:.45rem;margin:1.1rem 0 0}
.opt{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;padding:.62rem .9rem;background:#fff;border:1px solid var(--rule);border-radius:2px;cursor:pointer;transition:border-color .2s,background .2s}
.opt:hover{border-color:var(--tone-ink)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt__box{width:16px;height:16px;border:1.5px solid var(--rule-strong,rgba(23,23,26,.4));border-radius:50%;display:block;position:relative;flex:none}
.opt input:checked+.opt__box{border-color:var(--tone-ink)}
.opt input:checked+.opt__box::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--tone-ink)}
.opt input:focus-visible+.opt__box{outline:2px solid var(--ink);outline-offset:3px}
.opt__t{font-size:.93rem;line-height:1.4}
.opt__p{font-size:.88rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.opt:has(input:checked){background:var(--tone);border-color:var(--tone-ink)}
.opt:has(input:checked) .opt__p{color:var(--tone-ink)}
.opt:has(input[data-block]:checked){background:#fdeceb;border-color:#c0392b}
.q__cap{margin:.8rem 0 0;font-size:.82rem;color:var(--muted)}
.q__more{margin:1.1rem 0 0;border-top:1px solid var(--rule);padding-top:.7rem}
.q__more>summary{cursor:pointer;font-weight:600;font-size:.88rem;color:var(--tone-ink);list-style:none;display:flex;align-items:center;gap:.45rem}
.q__more>summary::-webkit-details-marker{display:none}
.q__more>summary::before{content:"+";font-size:1rem;line-height:1;width:1.1rem;height:1.1rem;display:grid;place-items:center;border:1px solid var(--tone-deep);border-radius:50%}
.q__more[open]>summary::before{content:"–"}
.q__detail{padding:.7rem 0 .2rem;font-size:.92rem;max-width:70ch}
.q__detail p{margin:0 0 .7rem}
.q__detail h4{margin:1.2rem 0 .3rem;font-size:.95rem}
.q__detail .tbl table{min-width:520px;font-size:.84rem}
.q__note{font-size:.82rem;color:var(--muted)}
.q--auto .q__head{align-items:center}
.q--auto .q__q{font-weight:400;font-size:.93rem}
.q--auto .q__pts{color:var(--tone-ink)}

/* Score panel */
.panel{background:#fff;border:1px solid var(--rule);border-top:3px solid var(--gold);padding:1.3rem 1.3rem 1.1rem}
.panel__h{margin:0;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.panel__score{margin:.25rem 0 .6rem;display:flex;align-items:baseline;gap:.5rem}
.panel__score b{font-family:var(--serif);font-size:3rem;line-height:1;font-variant-numeric:tabular-nums}
.panel__score span{font-size:.9rem;color:var(--muted)}
.panel__bar{position:relative;height:9px;background:var(--sheet);border:1px solid var(--rule);overflow:hidden}
.panel__bar i{display:block;height:100%;background:var(--green);transition:width .45s cubic-bezier(.2,.7,.3,1)}
.panel__bar u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.55}
.panel.is-pass .panel__bar i{background:var(--green)}
.panel__msg{margin:.6rem 0 0;font-size:.86rem;font-weight:600}
.panel.is-pass .panel__msg{color:#3c6b1f}
.panel__list{margin:1rem 0 0;border-top:1px solid var(--rule);padding-top:.8rem}
.panel__lh{margin:0 0 .4rem;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.panel__list ul{list-style:none;margin:0;padding:0;font-size:.87rem}
.panel__list li{display:flex;justify-content:space-between;gap:.8rem;padding:.22rem 0;border-bottom:1px dotted var(--rule)}
.panel__list li:last-child{border-bottom:0}
.panel__list li b{font-variant-numeric:tabular-nums}
.panel__list li.none{color:var(--muted);justify-content:flex-start}
.panel__list li.is-cap{color:var(--muted);font-size:.8rem}
.panel__left{margin:.6rem 0 0;font-size:.8rem;color:var(--muted)}
.panel__acts{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0 0}
.panel__acts .btn{flex:1 1 auto;justify-content:center}
.verdict{background:var(--sheet);border:1px solid var(--rule);border-left:3px solid var(--gold);padding:1.2rem 1.3rem}
.verdict h3{margin:0 0 .4rem;font-size:1.05rem}
.verdict p{margin:0 0 .9rem;font-size:.9rem}
.verdict.is-block{background:#fdeceb;border-left-color:#c0392b}

.nxt-grid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:1.2rem}
.nxt{border-top:2px solid var(--ink);padding-top:.8rem}
.nxt b{display:block;font-size:1rem;margin-bottom:.35rem}
.nxt p{margin:0;font-size:.92rem}

@media(max-width:1000px){
  .pts__grid{grid-template-columns:1fr}
  .pts__side{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:40;display:block;padding:0}
  .panel{border:0;border-top:2px solid var(--gold);box-shadow:0 -10px 30px -18px rgba(23,23,26,.6);padding:.7rem 1rem;display:grid;grid-template-columns:auto 1fr;gap:.2rem .9rem;align-items:center}
  .panel__h{grid-column:1;font-size:.62rem}
  .panel__score{grid-column:1;grid-row:2;margin:0}
  .panel__score b{font-size:1.9rem}
  .panel__bar{grid-column:2;grid-row:2}
  .panel__msg{grid-column:2;grid-row:3;margin:.2rem 0 0;font-size:.78rem}
  .panel__list,.panel__acts{display:none}
  .verdict{display:none}
  .is-pts .site-footer{padding-bottom:5.5rem}
}
@media(max-width:600px){
  .q{padding:1.2rem 1.1rem}
  .q__head{grid-template-columns:auto 1fr}
  .q__pts{grid-column:1;grid-row:1;font-size:1.1rem;min-width:0}
  .q__n{display:none}
  .opt{grid-template-columns:auto 1fr auto;padding:.6rem .7rem}
}
@media print{
  .pts__side{position:static}
  .panel__acts,.pts__pick .lede,.q__more,.dir-tools,.pts__closed{display:none!important}
  .q{break-inside:avoid;border-left-width:2px}
}

/* ===================================================================
   Occupation search + occupation detail
   =================================================================== */
.lbadge{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.08em;padding:.18rem .5rem;border-radius:999px;border:1px solid;margin:0 .3rem .3rem 0;white-space:nowrap}
.lbadge--mltssl{background:#e1edce;border-color:#a9c97f;color:#3f5520}
.lbadge--stsol{background:#e0edfa;border-color:#9dc6ef;color:#1f446b}
.lbadge--rol{background:#f3e6c8;border-color:#ddbd6e;color:#6b541f}
.lbadge--csol{background:#ede2f5;border-color:#c9a9e4;color:#482663}
.lbadge--rsms{background:#f7e1cf;border-color:#e8a86f;color:#6b411f}

/* search */
.ofilters{display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;align-items:center;margin:1.2rem 0 0;padding:1rem 1.1rem;background:var(--sheet);border:1px solid var(--rule)}
.ofilter{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.ofilter .lbl{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-right:.3rem}
.chipf{cursor:pointer}
.chipf input{position:absolute;opacity:0;width:0;height:0}
.chipf span{display:inline-block;font-size:.8rem;font-weight:600;padding:.24rem .62rem;border:1px solid var(--rule);border-radius:999px;background:#fff;transition:background .2s,border-color .2s,color .2s}
.chipf:hover span{border-color:var(--ink)}
.chipf input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.chipf input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.omajors{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 1.6rem}
.omajor{display:inline-flex;align-items:center;gap:.45rem;background:var(--tone);border:1px solid var(--tone-deep);color:var(--tone-ink);font:inherit;font-size:.82rem;font-weight:600;padding:.35rem .8rem;border-radius:999px;cursor:pointer;transition:transform .2s,box-shadow .2s}
.omajor span{font-family:var(--serif);font-size:1rem}
.omajor:hover{transform:translateY(-1px)}
.omajor.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.oresults{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.oloading{grid-column:1/-1;color:var(--muted);font-size:.92rem}
.ocard{display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 1.2rem;background:#fff;border:1px solid var(--rule);border-left:3px solid var(--gold);color:var(--ink);transition:transform .25s,box-shadow .25s,border-color .25s}
.ocard:hover{transform:translateY(-2px);box-shadow:0 16px 34px -26px rgba(23,23,26,.55)}
.ocard__code{font-size:.74rem;letter-spacing:.12em;color:var(--muted);font-weight:700}
.ocard h3{margin:0;font-size:1.02rem;line-height:1.3}
.ocard__lists{margin-top:.25rem}
.ocard__visas{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.1rem}
.ocard__visas i{font-style:normal;font-size:.7rem;font-weight:700;color:var(--muted);background:var(--sheet);border:1px solid var(--rule);border-radius:3px;padding:.05rem .32rem}
.ocard__skill{font-size:.75rem;color:var(--muted);margin-top:.2rem}
.omore{grid-column:1/-1;justify-self:center;margin-top:.6rem}

/* detail */
.obadges{margin:.6rem 0 .2rem}
.ofacts{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));background:var(--rule);border:1px solid var(--rule);margin-bottom:2rem}
.ofacts>div{background:var(--paper,#f3f2ed);padding:.9rem 1rem;display:flex;flex-direction:column;gap:.2rem}
.ofacts span{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.ofacts b{font-size:.98rem;font-weight:600}
.ooc h2{font-size:1.25rem;margin:2.2rem 0 .5rem}
.ooc h3{font-size:1rem;margin:1.4rem 0 .35rem}
.ooc .lede{font-size:.92rem;margin:0 0 .9rem;max-width:72ch}
.olists .lexp{border-left:2px solid var(--rule);padding:.1rem 0 .1rem .9rem;margin:0 0 .7rem}
.olists .lexp b{font-size:.9rem}
.olists .lexp p{margin:.15rem 0 0;font-size:.9rem;color:var(--muted)}
.ovisas__grid{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.ovisa{display:flex;align-items:center;gap:.6rem;padding:.6rem .85rem;background:var(--sheet);border:1px solid var(--rule);font-size:.88rem;color:var(--ink);transition:border-color .2s,background .2s}
.ovisa:hover{border-color:var(--ink);background:#fff}
.ovisa svg{width:14px;height:14px;margin-left:auto;flex:none;transition:transform .25s}
.ovisa:hover svg{transform:translateX(3px)}
.ovisa--plain{color:var(--muted)}
.ovisa__n{font-family:var(--serif);font-weight:700;font-size:1rem;flex:none}
.ocav{background:#fdeceb;border:1px solid #f0c6c1;border-left:3px solid #c0392b;padding:1.2rem 1.3rem;margin:2rem 0}
.ocav h2{margin-top:0}
.ocav ul{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.ocav li b{display:block;font-size:.85rem;color:#8b2a1f}
.ocav li p{margin:.2rem 0 0;font-size:.92rem}
.oauth ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.oauth li{display:flex;flex-wrap:wrap;gap:.2rem .8rem;align-items:baseline;padding:.7rem .9rem;background:var(--sheet);border:1px solid var(--rule)}
.oauth li b{font-size:.95rem}
.oauth li span{font-size:.88rem;color:var(--muted)}
.oauth li a{font-size:.82rem;display:inline-flex;align-items:center;gap:.3rem;font-weight:600}
.oauth li a svg{width:12px;height:12px}
.oanz .ozdesc{font-size:1.02rem;max-width:70ch}
.otags{display:flex;flex-wrap:wrap;gap:.35rem;margin:.3rem 0 0}
.otags span{font-size:.82rem;background:var(--sheet);border:1px solid var(--rule);border-radius:999px;padding:.18rem .6rem}
.otasks{margin:.4rem 0 0;padding-left:1.1rem;max-width:78ch}
.otasks li{margin:.3rem 0;font-size:.94rem}
.onote{font-size:.86rem;color:var(--muted);background:var(--sheet);border-left:2px solid var(--rule);padding:.6rem .9rem;margin:.9rem 0;max-width:78ch}
.ohier ol{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.3rem;max-width:60ch}
.ohier li{display:flex;gap:.7rem;align-items:baseline;font-size:.92rem;padding:.3rem .6rem;border-left:2px solid var(--rule)}
.ohier li span{font-family:var(--serif);font-weight:700;color:var(--muted);min-width:3.6rem}
.ohier li.is-on{border-left-color:var(--gold);font-weight:600}
.ohier li:nth-child(2){margin-left:.6rem}
.ohier li:nth-child(3){margin-left:1.2rem}
.ohier li:nth-child(4){margin-left:1.8rem}
.ohier li:nth-child(5){margin-left:2.4rem}
.orel__list{display:grid;gap:.4rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-top:.5rem}
.orel__list a{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;padding:.5rem .8rem;background:var(--sheet);border:1px solid var(--rule);font-size:.9rem;color:var(--ink)}
.orel__list a:hover{border-color:var(--ink);background:#fff}
.orel__list a span{font-size:.76rem;color:var(--muted);font-weight:700}
@media(max-width:600px){
  .ofilters{gap:.7rem 1rem;padding:.8rem .9rem}
  .oresults{grid-template-columns:1fr}
  .ofacts{grid-template-columns:1fr 1fr}
}
.ofacts--hero{grid-template-columns:1fr;margin:0;background:var(--rule);border:1px solid var(--rule)}
.ofacts--hero>div{background:rgba(255,255,255,.55)}
.dircards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:1rem}
.dircard--tool{background:var(--tone);border-color:var(--tone-deep)}
.dircard--tool .motif{width:70px;height:70px;flex:none;color:var(--tone-ink)}
.is-occ .titleblock--visa{padding-bottom:1.6rem}
.dircard--tool{grid-template-columns:auto 1fr;align-items:center;gap:.35rem 1.1rem}
.dircard--tool .dircard__text{grid-column:2;grid-row:1}
.dircard--tool .dircard__text b{font-size:1.15rem}
.dircard--tool .more{grid-column:2;grid-row:2;color:var(--tone-ink)}
.dircard--tool .motif{grid-column:1;grid-row:1/3}

/* inline arrow glyphs inside body text must never blow up to full width */
.dir-src a{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;color:var(--ink)}
.dir-src svg{width:12px;height:12px;flex:none}
p svg:not([class]),li svg:not([class]),span svg:not([class]){width:1em;height:1em;flex:none;vertical-align:-.12em}

/* invitation round: occupation page card, search chip, calculator comparison */
.oround{background:var(--sheet);border:1px solid var(--rule);border-left:3px solid var(--green-deep,#8fb35e);padding:1.3rem 1.4rem;margin:2rem 0}
.oround--none{border-left-color:var(--rule-strong,rgba(23,23,26,.4))}
.oround h2{margin:0 0 .2rem!important}
.oround__meta{margin:0 0 .9rem;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.oround__line{display:flex;gap:1rem;align-items:center;margin:0 0 .8rem;font-size:1.02rem;font-weight:600}
.oround__n{font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--ink);min-width:3.2rem;text-align:center;flex:none}
.oround__line--none{font-weight:500}
.oround__line--none .oround__n{color:var(--muted)}
.oround .onote{margin:.6rem 0 0}
.oround__links{margin:.9rem 0 0;font-size:.86rem;font-weight:600}
.oround__links a{display:inline-flex;align-items:center;gap:.35rem}
.oround__links svg{width:12px;height:12px}
.ocard__foot{display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:center;margin-top:.3rem}
.ocard__round{font-size:.75rem;color:var(--ink);background:var(--tone-sage,#e1edce);background:#e1edce;border:1px solid #b7d48a;border-radius:999px;padding:.1rem .55rem;font-weight:500}
.ocard__round b{font-family:var(--serif);font-size:.95rem}
.ocard__round--none{background:transparent;border-color:var(--rule);color:var(--muted)}
.pcmp .lede{max-width:72ch;font-size:.95rem}
.pcmp__box{position:relative;max-width:640px;margin:1.2rem 0 0}
.pcmp__list{position:absolute;left:0;right:0;top:100%;z-index:30;list-style:none;margin:.25rem 0 0;padding:.3rem;background:#fff;border:1px solid var(--rule);box-shadow:0 18px 40px -24px rgba(23,23,26,.5)}
.pcmp__list button{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;width:100%;text-align:left;font:inherit;font-size:.9rem;padding:.5rem .7rem;background:none;border:0;cursor:pointer;color:var(--ink)}
.pcmp__list button:hover{background:var(--sheet)}
.pcmp__list button span{font-size:.74rem;color:var(--muted);font-weight:700;letter-spacing:.06em}
.pcmp__list button b{font-family:var(--serif);color:#3f5520}
.pcmp__list button i{color:var(--muted);font-style:normal}
.pcmp__out{margin:1rem 0 0;padding:1.2rem 1.4rem;background:var(--sheet);border:1px solid var(--rule);border-left:3px solid var(--gold)}
.pcmp__out.is-under{border-left-color:#c0392b}
.pcmp__out.is-over{border-left-color:#8fb35e}
.pcmp__out p{margin:0 0 .6rem;font-size:.95rem;max-width:70ch}
.pcmp__occ span{font-size:.74rem;color:var(--muted);font-weight:700;letter-spacing:.08em;margin-right:.6rem}
.pcmp__occ b{font-family:var(--serif);font-size:1.15rem}
.pcmp__nums{display:flex;align-items:baseline;gap:.7rem;margin:.2rem 0 .5rem!important}
.pcmp__nums b{font-family:var(--serif);font-size:2.4rem;line-height:1}
.pcmp__nums i{font-style:normal;color:var(--muted);font-size:.85rem}
.pcmp__nums span{font-size:.8rem;color:var(--muted)}
.pcmp__link{font-weight:600;font-size:.9rem}

/* ===================================================================
   Course finder
   =================================================================== */
.cf__layout{display:grid;gap:1.6rem;grid-template-columns:270px minmax(0,1fr);align-items:start;margin-top:1.2rem}
.cf__filters{position:sticky;top:88px;max-height:calc(100vh - 100px);overflow:auto}
.cf__mobile>summary{display:none}
.cf__panel{background:var(--sheet);border:1px solid var(--rule);padding:1rem 1rem 1.1rem;display:grid;gap:1rem}
.cf__group .lbl{display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:.4rem}
.cf__chips{display:flex;flex-wrap:wrap;gap:.3rem}
.cf__chips .chipf span{font-size:.78rem;padding:.2rem .55rem}
.cf__chips .chipf span i{font-style:normal;font-size:.68rem;color:var(--muted);margin-left:.3rem}
.cf__chips .chipf input:checked+span i{color:rgba(255,255,255,.7)}
.cf__toggle{display:flex;gap:.5rem;align-items:center;font-size:.85rem;cursor:pointer}
.cf__sort{display:flex;align-items:center;gap:.6rem;margin:0 0 .9rem;font-size:.85rem}
.cf__sort .lbl{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.cf__sort select{font:inherit;font-size:.85rem;padding:.3rem .6rem;border:1px solid var(--rule);background:#fff;color:var(--ink)}
.cf__results{display:grid;gap:.7rem}
.ccard{display:flex;flex-direction:column;gap:.3rem;padding:1rem 1.2rem;background:#fff;border:1px solid var(--rule);border-left:3px solid var(--tone-deep,#b5d4f4);color:var(--ink);transition:transform .2s,box-shadow .2s}
.ccard:hover{transform:translateY(-2px);box-shadow:0 16px 34px -26px rgba(23,23,26,.55)}
.ccard__inst{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.ccard h3{margin:0;font-size:1.02rem;line-height:1.3}
.ccard__meta{display:flex;flex-wrap:wrap;gap:.2rem .9rem;font-size:.84rem;color:var(--muted)}
.ccard__meta i{font-style:normal}
.ccard__tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.2rem}
.ccard__tags b{font-weight:500;font-size:.72rem;background:var(--sheet);border:1px solid var(--rule);border-radius:999px;padding:.1rem .5rem}
.ccard__tags b.is-atar{background:#e1edce;border-color:#b7d48a}
.ccard__tags b.is-off{color:var(--muted);border-style:dashed}
.cdetail{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:1rem}
.cdetail__scrim{position:absolute;inset:0;background:rgba(23,23,26,.55)}
.cdetail__panel{position:relative;width:min(860px,100%);max-height:calc(100vh - 2rem);background:var(--paper,#f3f2ed);border:1px solid var(--rule);box-shadow:0 30px 80px -30px rgba(0,0,0,.6);display:flex;flex-direction:column}
.cdetail__close{position:absolute;top:.6rem;right:.7rem;width:2.2rem;height:2.2rem;border:1px solid var(--rule);background:#fff;font-size:1.3rem;line-height:1;cursor:pointer;border-radius:50%;z-index:2}
.cdetail__body{overflow:auto;padding:1.8rem 2rem 2rem}
.cdetail__inst{margin:0;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.cdetail__body h2{margin:.3rem 0 .6rem;font-size:1.6rem;padding-right:2.5rem}
.cdetail__body h3{margin:1.5rem 0 .4rem;font-size:1rem}
.cdetail__tags{display:flex;flex-wrap:wrap;gap:.3rem;margin:0 0 1rem}
.cdetail__tags b{font-weight:500;font-size:.75rem;background:#fff;border:1px solid var(--rule);border-radius:999px;padding:.12rem .55rem}
.cdetail__facts{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));background:var(--rule);border:1px solid var(--rule);margin:0 0 .6rem}
.cdetail__facts>div{background:#fff;padding:.7rem .9rem;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.cdetail__facts span{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.cdetail__facts b{font-size:.98rem;font-weight:600;overflow-wrap:anywhere}
.cdetail__facts b small{display:block;font-weight:400;font-size:.78rem;color:var(--muted)}
.cdetail__text{font-size:.93rem;max-width:74ch}
.cdetail__text p{margin:0 0 .6rem}
.cdetail__text ul,.cdetail__text ol{margin:.3rem 0 .6rem;padding-left:1.2rem}
.cdetail__list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;font-size:.9rem}
.cdetail__list li{background:#fff;border:1px solid var(--rule);padding:.5rem .8rem;display:flex;flex-wrap:wrap;gap:.2rem .8rem;align-items:baseline}
.cdetail__list li span{color:var(--muted);font-size:.84rem}
.cdetail__links{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1.6rem 0 0}
.cdetail__code{font-size:.78rem;color:var(--muted);margin-left:auto}
body.has-cdetail{overflow:hidden}
@media(max-width:900px){
  .cf__layout{grid-template-columns:1fr}
  .cf__filters{position:static;max-height:none;overflow:visible}
  .cf__mobile>summary{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-weight:600;font-size:.9rem;padding:.7rem .9rem;background:var(--sheet);border:1px solid var(--rule);list-style:none}
  .cf__mobile>summary::-webkit-details-marker{display:none}
  .cf__mobile>summary::before{content:"+";width:1.1rem;height:1.1rem;display:grid;place-items:center;border:1px solid var(--rule);border-radius:50%;font-size:.9rem}
  .cf__mobile[open]>summary::before{content:"–"}
  .cf__mobile:not([open]) .cf__panel{display:none}
  .cf__panel{border-top:0}
  .cdetail{padding:0}
  .cdetail__panel{max-height:100vh;height:100vh;width:100%}
  .cdetail__body{padding:1.4rem 1.1rem 2rem}
}
.cdetail[hidden]{display:none}

/* header: ten menu items now — tighten between the burger breakpoint and wide screens */
.header-cta .cta-s{display:none}
@media (min-width:1181px) and (max-width:1500px){
  .nav{gap:.8rem}
  .nav a{font-size:.84rem}
  .brand__name small{display:none}
  .brand img{width:32px;height:auto}
  .header-cta .cta-l{display:none}
  .header-cta .cta-s{display:inline}
  .site-header .wrap{gap:.9rem}
}

/* ===================================================================
   Client reviews (Trustmary wall)
   =================================================================== */
.reviews-band{background:var(--sheet);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.tmwall{min-height:120px;margin:1.4rem 0 0;position:relative}
.tmwall--page{margin-top:0}
.tmwall__fallback{font-size:.88rem;color:var(--muted);max-width:62ch;margin:0;padding:1.1rem 1.2rem;background:#fff;border:1px dashed var(--rule)}
.tmwall__fallback a{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;color:var(--ink)}
.tmwall__fallback svg{width:12px;height:12px}
.tmwall.is-loaded{min-height:0}
/* the widget brings its own type; keep it from fighting the page */
.tmwall [class*="tm-"]{font-family:var(--sans)!important}
.dir-art--reviews .motif--quote{color:var(--ink)}
@media print{.tmwall,.reviews-band{display:none}}

/* the calculator's occupation comparison, now above the questions */
.pcmp{margin:0 0 2.4rem;padding:1.4rem 1.5rem;background:var(--sheet);border:1px solid var(--rule);border-left:3px solid var(--gold)}
.pcmp h2{margin:0 0 .3rem;font-size:1.25rem}
.pcmp .dir-src{margin:1rem 0 0}
.panel__occ{margin:.7rem 0 0;padding:.6rem .7rem;background:var(--sheet);border:1px solid var(--rule);border-left:3px solid var(--gold);display:grid;gap:.1rem}
.panel__occ b{font-size:.88rem;line-height:1.25}
.panel__occ span{font-size:.78rem;color:var(--muted)}
.panel__occ.is-under{border-left-color:#c0392b}
.panel__occ.is-over{border-left-color:#8fb35e}
.panel__occ.is-none{border-left-color:var(--rule-strong,rgba(23,23,26,.4))}
@media(max-width:1000px){.panel__occ{display:none}}

/* Vietnamese occupation pages: the official ANZSCO title kept beside the translation */
.oen{margin:.2rem 0 0;font-size:.85rem;color:var(--muted);display:flex;gap:.5rem;flex-wrap:wrap;align-items:baseline}
.oen span{text-transform:uppercase;letter-spacing:.06em;font-size:.7rem}
.ocard__en{display:block;font-size:.8rem;color:var(--muted);margin:-.15rem 0 .35rem}
.pcmp__list i,.plist i{font-style:normal;color:var(--muted);font-size:.85em}