:root{--navy:#003e59;--ink:#062237;--gold:#e3a535;--cream:#fcfaf4;--mist:#f8f4e9;--line:#dbe6eb;--white:#fff;--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--press:120ms;--quick:180ms;--settle:240ms}*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;color:var(--ink);font:15px/1.65 Manrope,Arial,sans-serif;background:var(--cream)}a{color:inherit;text-decoration:none}.container{width:min(1160px,calc(100% - 40px));margin:auto}.header{height:82px;background:#fffc;backdrop-filter:blur(12px);position:sticky;top:0;z-index:10;border-bottom:1px solid #ffffff80}.nav{height:100%;display:flex;align-items:center;gap:26px}.brand{display:inline-flex;align-items:center;gap:10px;line-height:1.12;color:var(--navy);flex-shrink:0}.brand span{display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:800;width:39px;height:39px;border-radius:12px;font-size:14px}.brand strong{font-size:11px;letter-spacing:.02em}.nav nav{display:flex;gap:22px;margin-left:auto;font-size:13px;font-weight:700}.nav nav a:hover,.text-button:hover{color:var(--gold)}.nav-actions{display:flex;align-items:center;gap:13px}.lang{display:flex;border:1px solid var(--line);border-radius:7px;padding:2px}.lang a,.lang button{border:0;background:transparent;color:#324656;font:700 10px Manrope,Arial,sans-serif;padding:4px 8px;cursor:pointer;border-radius:4px;line-height:1;transition:background-color var(--quick) ease,color var(--quick) ease}.lang a.active,.lang button.active{background:var(--navy);color:#fff}.phone{font-weight:700;font-size:12px;white-space:nowrap}.button{display:inline-flex;align-items:center;justify-content:center;background:var(--navy);color:#fff;border:1px solid var(--navy);padding:13px 20px;border-radius:8px;font:700 13px Manrope,Arial,sans-serif;cursor:pointer;transition:transform var(--press) var(--ease-out),background-color var(--quick) ease,border-color var(--quick) ease,box-shadow var(--quick) var(--ease-out)}@media (hover:hover) and (pointer:fine){.button:hover{background:#0a5267;transform:translateY(-1px)}}.button:active{transform:scale(.97)}.button.small{padding:10px 14px;font-size:11px}.menu{display:none}.hero{padding:85px 0 70px;overflow:hidden;background:linear-gradient(120deg,#fffaf1 0%,#f0f7f5 65%,#e2eee9 100%)}.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;align-items:center;gap:55px}.eyebrow{color:#a1691b;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.17em;margin:0 0 13px}#services .eyebrow{font-size:16px;letter-spacing:.12em}.hero h1,.section-intro h1,h2{font-family:"Playfair Display",Georgia,serif;color:var(--navy);line-height:1.08;margin:0}.hero h1{font-size:clamp(43px,5vw,68px);letter-spacing:-.04em;max-width:650px}.hero h1 em{font-style:normal;color:#b77c22}.lead{font-size:17px;max-width:590px;margin:24px 0 28px}.hero-buttons{display:flex;gap:25px;align-items:center}.text-button{font-weight:800;font-size:13px}.text-button span{font-size:20px;margin-left:5px}.trust-row{display:flex;gap:13px;flex-wrap:wrap;margin-top:45px;font-size:11px}.trust-row span{background:#ffffffb8;border:1px solid #fff;padding:7px 10px;border-radius:20px}html[lang=ru] .trust-row{font-size:15px;gap:12px}html[lang=ru] .trust-row span{padding:10px 14px}.photo,.photo:after,.stats{background:var(--navy);color:#fff}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}.stats-grid>div{display:flex;gap:13px;align-items:center;padding:25px 20px;border-right:1px solid #ffffff29}.stats-grid>div:first-child{border-left:1px solid #ffffff29}.stats b{font:700 25px "Playfair Display";color:#f0be60}.stats b:empty,.stats span:empty{display:none}html[lang=ru] .stats b{font-family:Manrope,Arial,sans-serif;font-size:23px}html[lang=ru] .stats-grid>div:nth-child(2) b{font-size:16px}.stats span{font-size:10px;line-height:1.25;font-weight:700;text-transform:uppercase;letter-spacing:.07em}.stats-grid .stat-text{display:grid;gap:2px;min-width:0}.stats-grid .stat-text span{margin-left:0;padding-top:0;align-self:start}.section{padding:100px 0}.section-intro{max-width:640px;margin-bottom:45px}.section-intro h1,.section-intro h2,.choose h2,.about h2{font-size:clamp(32px,4vw,48px);letter-spacing:-.035em}.section-intro>p:last-child{margin:13px 0 0}.centered{text-align:center;margin-left:auto;margin-right:auto}.group-title{font:700 17px Manrope;color:var(--navy);margin:43px 0 18px}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.service-card{background:#fff;border:1px solid #edf0ed;border-radius:12px;padding:22px;min-height:240px;box-shadow:0 8px 24px #0a363a08;display:flex;flex-direction:column;transition:transform var(--settle) var(--ease-out),box-shadow var(--settle) var(--ease-out)}@media (hover:hover) and (pointer:fine){.service-card:hover{transform:translateY(-4px);box-shadow:0 16px 28px #0a363a18}}.service-icon{font-size:21px;color:#b57619}.service-icon svg{display:block;width:1.15em;height:1.15em}.service-card h4{font-size:14px;line-height:1.3;margin:13px 0 8px;color:var(--navy)}.service-card p{font-size:11px;line-height:1.55;margin:0 0 15px}.ask{font-size:11px;color:#9c6517;font-weight:800;margin-top:auto;cursor:pointer}.tinted{background:var(--mist)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;position:relative}.step{position:relative}.step:not(:last-child):after{content:"";height:1px;background:#9fbcb7;position:absolute;width:75px;right:-63px;top:18px}.step span{display:grid;place-items:center;color:#fff;background:var(--navy);border:5px solid #fff;width:43px;height:43px;border-radius:50%;font-size:11px;font-weight:bold;box-shadow:0 0 0 1px #aec9c4}.step h3{color:var(--navy);font-size:16px;margin:18px 0 6px}.step p{font-size:13px;margin:0;max-width:260px}.choose{display:grid;grid-template-columns:.82fr 1.18fr;gap:80px}.choose-copy p:last-child{font-size:15px}.reasons{display:grid;grid-template-columns:1fr 1fr;gap:32px 45px}.reasons i{font-style:normal;color:#96661f;font-size:22px}.reasons h3{font-size:14px;color:var(--navy);margin:5px 0}.reasons p{font-size:12px;margin:0}.about{background:#f7f4ed}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:105px;align-items:center}.about-photo{height:410px;position:relative}.about-copy>p:not(.eyebrow){font-size:14px}.about-copy .text-button{display:inline-block;margin-top:11px}.testimonials{background:#fff}.testimonial-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.testimonial{background:var(--cream);padding:22px;border-radius:10px}.testimonial .stars{color:#bd8027;letter-spacing:2px;font-size:12px}.testimonial blockquote{margin:10px 0 18px;font:15px/1.5 "Playfair Display";color:var(--navy)}.testimonial cite{font-style:normal;font-size:10px;font-weight:bold}.narrow{max-width:760px}.faq-list{border-top:1px solid #cbdad7}.faq{border-bottom:1px solid #cbdad7}.faq button{padding:17px 0;width:100%;border:0;background:transparent;text-align:left;font:700 14px Manrope;color:var(--navy);cursor:pointer;display:flex;justify-content:space-between}.faq button:after{content:"+";font-size:20px;font-weight:400;line-height:1;transition:transform var(--settle) var(--ease-out)}.faq.open button:after{transform:rotate(135deg)}.faq{display:grid;grid-template-rows:auto 0fr;transition:grid-template-rows var(--settle) var(--ease-out)}.faq.open{grid-template-rows:auto 1fr}.faq p{overflow:hidden;min-height:0;margin:0 30px 0 0;font-size:13px;opacity:0;transition:opacity var(--quick) ease,padding-bottom var(--settle) var(--ease-out)}.faq.open p{opacity:1;padding-bottom:17px}.contact{background:var(--navy);color:#fff}.contact h2{color:#fff}.contact .eyebrow{color:#8c6511}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}.contact-copy>p:not(.eyebrow){max-width:440px}.contact .button{background:#df9e35;border-color:#df9e35}.contact-details{display:grid;gap:4px;margin-top:32px;font-size:12px}.contact-details a{font-weight:bold}.quote-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:#fff;color:var(--ink);padding:25px;border-radius:12px}.quote-form label{font-size:10px;font-weight:bold}.quote-form button,.form-success{grid-column:1/-1}.quote-form input,.quote-form select,.quote-form textarea{width:100%;margin-top:4px;border:1px solid #dbe5e3;padding:9px;border-radius:5px;font:12px Manrope;background:#fff}.quote-form .button{background:var(--navy);border-color:var(--navy)}.form-success{color:#18735f;font-weight:bold;font-size:12px;margin:0}.form-note{grid-column:1/-1;color:#536675;font-size:11px;font-weight:600;margin:-4px 0 0}.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.form-error{grid-column:1/-1;color:#a8341c;font-weight:bold;font-size:12px;margin:0}.quote-form button[disabled]{opacity:.6;cursor:progress}footer{background:#062d39;color:#d9e6e3;padding:48px 0 18px;font-size:11px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:35px}.footer-grid .brand{color:#fff}.footer-grid p{max-width:240px;font-size:10px}.footer-grid div:not(:first-child){display:grid;align-content:start;gap:6px}.footer-grid b{color:#eabe68;margin-bottom:4px}.copyright{border-top:1px solid #ffffff22;padding-top:16px;margin-top:32px;font-size:9px}.simple-page{padding:80px 0;min-height:90vh}.simple-page h1{font:45px "Playfair Display";color:var(--navy);margin-top:55px}.reveal{opacity:0;transform:translateY(14px);transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out)}.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){.nav nav,.phone,.nav-actions .button{display:none}.menu{display:block;border:0;background:none;color:var(--navy);font-size:23px;margin-left:auto}.nav.open nav{display:flex;position:absolute;top:82px;left:0;right:0;background:#fff;flex-direction:column;padding:20px}.nav-actions{margin-left:0}.hero-grid,.about-grid,.contact-grid{grid-template-columns:1fr;gap:40px}.hero{padding-top:55px}.service-grid{grid-template-columns:repeat(2,1fr)}.choose{grid-template-columns:1fr;gap:35px}.about-grid{gap:35px}.contact-grid{gap:35px}}
@media(max-width:560px){.container{width:min(100% - 30px,1160px)}.header{height:70px}.nav.open nav{top:70px}.brand strong{font-size:9px}.hero h1{font-size:42px}.lead{font-size:15px}.photo{height:290px;width:230px;right:25px}.stats-grid{grid-template-columns:1fr 1fr}.stats-grid>div{border-bottom:1px solid #ffffff29;padding:17px 7px}.section{padding:65px 0}.service-grid,.testimonial-grid{grid-template-columns:1fr}.service-card{min-height:190px}.steps,.reasons{grid-template-columns:1fr;gap:22px}.step:not(:last-child):after{height:26px;width:1px;left:20px;top:49px}.about-photo{height:345px}.footer-grid{grid-template-columns:1fr 1fr}.quote-form{grid-template-columns:1fr}.quote-form label{grid-column:1/-1!important}}

/* Lovable-reference implementation */
body{font-family:Manrope,Arial,sans-serif;background:#fff;color:#536675}.header{height:92px;background:#fff;border-bottom:1px solid #dbe5e8;box-shadow:0 5px 17px #052e3a08}.nav{max-width:1260px;gap:30px}.brand span{width:43px;height:43px;border-radius:50%;font-size:22px;color:var(--gold);background:var(--navy)}.brand strong{font-size:15px;color:var(--navy);line-height:1.1}.brand small{display:block;text-transform:uppercase;font-size:9px;letter-spacing:.2em;margin-top:6px;color:#526879}.nav nav{font-size:14px;color:#394b58;gap:25px}.phone{color:var(--navy);font-size:12px}.lang{background:#f6f5ef;border-color:#d8e2e7;border-radius:20px;padding:3px}.lang a,.lang button{font-size:10px;padding:6px 9px;border-radius:17px}.button.small{border-radius:22px;background:var(--gold);border-color:var(--gold);color:#2d210f;padding:10px 17px}.hero{position:relative;padding:0;min-height:620px;display:flex;align-items:center;background:url("images/larnaca-hero.ef145aaac9bb.jpg") center/cover}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#00364fe8 5%,#093e558f 54%,#08354e84 100%)}.hero-grid{display:block;position:relative;z-index:1}.hero-copy{width:min(720px,100%);padding:92px 0 114px}.hero-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border:1px solid #ffffff77;border-radius:24px;background:#57717a9d;color:#fff;font-size:12px;font-weight:700}.hero h1{font-family:Manrope,Arial,sans-serif;font-weight:800;color:#fff;max-width:700px;font-size:clamp(42px,5.2vw,73px);line-height:1.16;letter-spacing:-.055em;margin-top:29px}.hero h1 em{color:#fff;font-style:normal}.lead{color:#fff;max-width:650px;font-size:17px;line-height:1.7;margin:23px 0 27px}.hero-buttons{gap:15px}.hero .button{border-radius:28px;padding:15px 26px;font-size:14px}.hero .hero .text-button{border:1px solid #fff8;border-radius:28px;padding:12px 23px;color:#fff}.trust-row{margin-top:47px;color:#fff;font-size:12px;gap:28px}.trust-row span{padding:0;background:transparent;border:0}.trust-row span:first-letter{color:var(--gold)}.stats{position:relative;z-index:2;background:transparent;margin-top:-57px}.stats-grid{grid-template-columns:repeat(4,1fr);gap:18px}.stats-grid>div,.stats-grid>div:first-child{background:#fff;border:4px solid var(--navy);border-radius:16px;padding:16px 17px;box-shadow:0 10px 20px #002f491f;color:var(--navy);border-left:4px solid var(--navy)}.stats-grid i{font-style:normal;display:grid;place-items:center;width:43px;height:43px;background:#e8f5fb;border-radius:50%;font-size:20px}.stats-grid i svg{display:block;width:1.15em;height:1.15em}.stats-grid b{font-family:Manrope;font-size:25px;color:var(--navy);margin-left:2px}.stats-grid span{font-size:11px;text-transform:none;letter-spacing:0;color:#587080;align-self:end;margin-left:-51px;padding-top:30px}.section{padding:100px 0}.section-intro{margin:0 auto 46px;text-align:center}.section-intro .eyebrow,.eyebrow{color:var(--gold);font-size:11px;letter-spacing:.22em}.section-intro h2,.choose h2,.about h2{font-family:Manrope,Arial,sans-serif;font-weight:800;color:var(--ink);font-size:clamp(30px,3.5vw,48px);letter-spacing:-.055em}.section-intro>p:last-child{font-size:15px;color:#556574}.service-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;align-items:stretch}.service-card{min-height:300px;border:4px solid var(--navy);border-radius:16px;padding:22px;background:#fff;box-shadow:0 10px 20px #002f491f}.service-icon{display:grid;place-items:center;width:49px;height:49px;border-radius:50%;background:var(--navy);color:#fff;font-size:20px}.service-card h4{font-size:18px;line-height:1.25;min-height:2.5em;color:var(--navy);margin:26px 0 9px;text-wrap:balance}.service-card p{font-size:13px;line-height:1.65;color:#5b6c79}.ask{font-size:12px;color:var(--navy);padding-top:6px}.tinted{background:var(--navy);color:#fff}.tinted .section-intro h2{color:#fff}.tinted .eyebrow{color:var(--gold)}.steps{gap:18px}.step{background:#174f68;border:1px solid #537384;border-radius:20px;padding:25px 25px 27px}.step:not(:last-child):after{display:none}.step span{display:inline-flex;background:var(--gold);color:#36260e;border:0;width:auto;height:auto;border-radius:0;box-shadow:none;padding:0;font-size:13px;font-weight:800;letter-spacing:.15em}.step h3{color:#fff;font-size:18px;margin:28px 0 8px}.step p{color:#d9e6eb;font-size:13px;line-height:1.7}.choose{grid-template-columns:1.08fr 1fr;gap:50px}.choose-copy{padding-top:30px}.reasons{gap:16px}.reasons>div{padding:21px;border:1px solid #d8e4e8;border-radius:16px}.reasons i{font-size:20px;color:#8e6314}.reasons h3{font-size:14px;margin:12px 0 6px}.reasons p{font-size:12px;line-height:1.65}.about{background:var(--cream)}.about-grid{grid-template-columns:390px 1fr;gap:72px}.about-photo{height:545px}.about-photo img{width:100%;height:100%;object-fit:cover;border-radius:26px;display:block}.photo-placeholder{width:100%;height:100%;border-radius:26px;background:linear-gradient(160deg,#eef5f3,#dce9e6);border:1px dashed #b8ccc8}.about-copy>p:not(.eyebrow){font-size:14px;line-height:1.8;color:#556976}.about-tags{display:flex;gap:9px;flex-wrap:wrap;margin:22px 0}.about-tags span{border:1px solid #d6e3e8;border-radius:20px;padding:7px 13px;color:var(--navy);font-size:11px;font-weight:800;background:#fff}.talk{border-radius:24px;background:var(--gold);color:#2c220e;border-color:var(--gold);padding:13px 20px}.testimonials{background:#fff}.testimonial-grid{grid-template-columns:1fr 1fr;gap:17px}.testimonial{min-height:205px;border:1px solid #d8e4e8;border-radius:16px;padding:26px;background:#fff}.testimonial .stars{display:none}.testimonial:before{content:'❯❯';display:block;color:var(--gold);font-size:20px;letter-spacing:-8px;margin-bottom:14px}.testimonial blockquote{font-family:Manrope;font-size:14px;line-height:1.7;color:#334553}.testimonial cite{border-top:1px solid #dbe5e8;padding-top:14px;display:block;font-size:12px;color:var(--navy)}#faq.tinted{background:var(--mist);color:var(--ink)}#faq .section-intro h2{color:var(--ink);max-width:500px;margin:auto}.faq-list{border:0;max-width:740px;margin:auto}.faq{margin:12px 0;border:1px solid #d9e3e7;border-radius:18px;background:#fff;padding:0 20px}.faq button{font-size:13px;padding:16px 0}.faq p{font-size:12px;line-height:1.7}.contact{background:#fff;color:#536675}.contact h2{color:var(--ink)}.contact-grid{grid-template-columns:1.25fr .8fr;gap:28px}.contact-copy{grid-column:1/-1;text-align:center;max-width:740px;margin:auto}.contact-copy .button,.contact-copy .contact-details{display:none}.quote-form{background:#fff;border:1px solid #d8e4e8;border-radius:18px;box-shadow:0 8px 20px #00334c0d;padding:25px}.quote-form .button{width:max-content;border-radius:24px;background:var(--gold);border-color:var(--gold);color:#30240f}.footer-grid{max-width:1000px;grid-template-columns:1.4fr .8fr 1fr;gap:70px}.footer-grid>div:nth-child(3){display:none}footer .brand span{background:#285f76;color:var(--gold)}footer .brand strong{color:#fff}.footer-grid p{font-size:11px;line-height:1.8}.copyright{text-align:center}.simple-page{background:var(--cream)}
@media(max-width:900px){.header{height:73px}.nav.open nav{top:73px}.nav-actions{margin-left:auto}.hero-copy{padding:80px 0 95px}.stats{margin-top:-40px}.stats-grid{grid-template-columns:1fr 1fr}.service-grid{grid-template-columns:1fr 1fr}.about-grid{grid-template-columns:1fr;gap:44px}.about-photo{max-width:400px}.contact-grid{grid-template-columns:1fr}.contact:after{grid-column:1}.footer-grid{grid-template-columns:1fr 1fr;gap:35px}}
@media(max-width:560px){.nav-actions .lang{display:flex}.hero{min-height:580px;background-position:55% center}.hero-copy{padding:68px 0 65px}.hero h1{font-size:40px}.hero-pill{font-size:10px}.trust-row{gap:11px;margin-top:30px;font-size:10px}.stats-grid{gap:8px}.stats-grid>div{padding:12px}.stats-grid i{width:32px;height:32px;font-size:15px}.stats-grid b{font-size:18px}.stats-grid span{font-size:9px;margin-left:-37px;padding-top:23px}.service-grid,.testimonial-grid{grid-template-columns:1fr}.section{padding:68px 0}.choose{grid-template-columns:1fr}.about-photo{height:430px}.footer-grid{grid-template-columns:1fr}.contact:after{font-size:13px}.brand strong{font-size:11px}.brand small{font-size:7px}.hero .text-button{padding:11px 13px}.hero .button{padding:13px 16px}}

.biometric-note{max-width:760px;margin:38px auto 0;padding:15px 22px;border:1px dashed #d8e4e8;border-radius:16px;background:#fffdf5;color:#596b77;text-align:center;font-size:12px;line-height:1.7}.quote-form .consent{grid-column:1/-1;display:flex;align-items:flex-start;gap:9px;font-size:10px;line-height:1.55;font-weight:500;color:#536675}.quote-form .consent input{width:15px;height:15px;flex:0 0 auto;margin:2px 0 0}.quote-form .consent a{color:var(--navy);font-weight:800;text-decoration:underline}.policy{min-height:100vh;background:var(--cream);padding:70px 0}.policy-inner{max-width:820px}.policy .brand{margin-bottom:80px}.policy .eyebrow{margin-bottom:12px}.policy h1{font:800 clamp(36px,5vw,56px)/1.06 Manrope;color:var(--ink);letter-spacing:-.055em;margin:0}.policy .updated{font-size:12px;color:#65747f;margin:13px 0 55px}.policy section{padding:25px 0;border-top:1px solid #dce6e7}.policy h2{font:800 19px Manrope;color:var(--navy);margin:0 0 9px}.policy p{font-size:14px;line-height:1.8;margin:8px 0}.policy a{color:var(--navy);font-weight:700;text-decoration:underline}

/* --- Guides ------------------------------------------------------------ */
.nav nav a.current{color:var(--gold)}
.guide-list{display:grid;gap:14px;margin-bottom:34px}
.guide-item{display:block;background:#fff;border:2px solid var(--navy);border-radius:14px;padding:20px 22px;transition:transform var(--settle) var(--ease-out),box-shadow var(--settle) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.guide-item:hover{transform:translateY(-2px);box-shadow:0 10px 20px #002f491f}}.guide-item:active{transform:scale(.995)}
.guide-item h4{margin:0 0 6px;font-size:17px;color:var(--navy);line-height:1.3}
.guide-item p{margin:0 0 10px;font-size:13px;color:#5b6c79}
.guide-meta{font-size:11px;font-weight:700;letter-spacing:.04em;color:#526772;text-transform:uppercase}
.guide-empty{background:#fff;border:1px dashed #b8ccc8;border-radius:14px;padding:26px;color:#5b6c79}
.guide{max-width:74ch}
.crumbs{font-size:12px;color:#526772;margin-bottom:18px}
.crumbs a{color:var(--navy);font-weight:700}
.guide h1{font:700 clamp(30px,4vw,42px)/1.1 "Playfair Display",Georgia,serif;color:var(--navy);letter-spacing:-.02em;margin:0 0 12px}
.guide-standfirst{font-size:17px;color:#4a6572;margin:0 0 10px}
.guide-body{margin-top:28px;font-size:16px;line-height:1.75;color:#3d5361}
.guide-body h2{font:700 22px/1.25 Manrope,Arial,sans-serif;color:var(--navy);margin:34px 0 10px}
.guide-body h3{font-size:17px;color:var(--navy);margin:24px 0 8px}
.guide-body ul,.guide-body ol{padding-left:22px}
.guide-body li{margin-bottom:7px}
.guide-body table{border-collapse:collapse;width:100%;font-size:14px;margin:18px 0}
.guide-body th,.guide-body td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.guide-body blockquote{border-left:4px solid var(--gold);background:#fdf7ec;margin:20px 0;padding:14px 18px;font-size:15px}
.guide-sources{margin-top:38px;border-top:2px solid var(--line);padding-top:20px}
.guide-sources h2{font-size:15px;color:var(--navy);margin:0 0 10px}
.guide-sources ul{margin:0;padding-left:20px;font-size:14px}
.guide-cta{margin-top:34px;background:var(--navy);color:#fff;border-radius:16px;padding:26px 28px}
.guide-cta h2{color:#fff;font:700 20px Manrope,Arial,sans-serif;margin:0 0 8px}
.guide-cta p{font-size:14px;margin:0 0 16px;color:#d7e6ea}
.guide-cta .button{background:var(--gold);border-color:var(--gold);color:#30240f}
/* The arrow sat flush against the last word in every language. */
.guide-cta .button span{margin-left:.4em}
.draft-flag{display:block;background:#fdf0e7;border:1px solid #e6b79a;color:#9a3412;border-radius:8px;padding:9px 13px;font-size:12px;font-weight:800;margin:0 0 14px}
.draft-flag.inline{display:inline-block;padding:2px 7px;font-size:10px;margin-left:6px;vertical-align:2px}
.home-articles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:22px}
.guide-pillar{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}

/* --- Salary calculator -------------------------------------------------- */
.calc{display:grid;grid-template-columns:1fr 1.15fr;gap:22px;align-items:start;margin:8px 0 40px}
.calc-inputs{background:#fff;border:3px solid var(--navy);border-radius:16px;padding:22px;display:grid;gap:14px}
.calc-field{display:grid;gap:6px;font-size:12px;font-weight:800;color:var(--navy)}
.calc-field input{border:1px solid #cbdedb;border-radius:8px;padding:11px 12px;font:600 17px Manrope,Arial,sans-serif;background:#fff;color:var(--ink)}
.calc-field input:focus{outline:2px solid var(--gold);outline-offset:1px}
.calc-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.4;color:#42606d;font-weight:600}
.calc-check input{width:17px;height:17px;flex:0 0 auto;margin-top:1px}
.calc-note{margin:0;font-size:12px;color:#9a3412;background:#fdf0e7;border-radius:8px;padding:9px 11px}
.calc-results{background:var(--navy);color:#fff;border-radius:16px;padding:24px}
.calc-headline{display:grid;gap:2px;padding-bottom:16px;border-bottom:1px solid #ffffff2e;margin-bottom:14px}
.calc-headline span{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#a9c8d2;font-weight:800}
.calc-headline strong{font:700 40px/1 "Playfair Display",Georgia,serif;color:#f0be60;letter-spacing:-.02em}
.calc-headline small{font-size:12px;color:#c4dbe2}
.calc-table{width:100%;border-collapse:collapse;font-size:13.5px}
.calc-table th{text-align:left;font-weight:600;color:#cbdfe6;padding:7px 0}
.calc-table td{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;padding:7px 0}
.calc-table .calc-subtotal th,.calc-table .calc-subtotal td{border-top:1px solid #ffffff2e;padding-top:11px}
.calc-table .calc-total th,.calc-table .calc-total td{border-top:2px solid #f0be60;padding-top:11px;font-size:16px;color:#fff}

.calc-explain{border-top:2px solid var(--line);padding-top:26px}
.calc-explain h2{font:700 20px Manrope,Arial,sans-serif;color:var(--navy);margin:0 0 12px}
.calc-rates{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:16px}
.calc-rates th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#526772;padding:8px 10px;border-bottom:1px solid var(--line)}
.calc-rates td{padding:8px 10px;border-bottom:1px solid var(--line)}
.calc-rates td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--navy)}
.calc-disclaimer{font-size:12.5px;color:#5b6c79;background:var(--mist);border-radius:10px;padding:13px 15px}
@media (max-width:860px){.calc{grid-template-columns:1fr}}

.calc-amount{display:flex;gap:8px}
.calc-amount input{flex:1;min-width:0}

.calc-note-info{color:#1d5b6e;background:#e8f5fb}
.split{display:flex;height:14px;border-radius:8px;overflow:hidden;margin:4px 0 10px;background:#ffffff22}
.split-part{display:block;height:100%}
.split-key{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:#cbdfe6;margin-bottom:16px}
.split-key i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
.calc-table thead th{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:#a9c8d2;text-align:right;padding-bottom:6px}
.calc-table thead th:first-child{text-align:left}
.calc-detail{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:34px 0 10px}
.calc-detail h2{font:700 18px Manrope,Arial,sans-serif;color:var(--navy);margin:0 0 4px}
.calc-sub{font-size:13px;color:#5b6c79;margin:0 0 12px}
.calc-rates td:nth-child(2),.calc-rates td:nth-child(3),.calc-rates td:nth-child(4){text-align:right;font-variant-numeric:tabular-nums}
.calc-rates th:nth-child(2),.calc-rates th:nth-child(3),.calc-rates th:nth-child(4){text-align:right}
.calc-rates tr.band-empty{color:#57707d}
.calc-rates tr.calc-total td{font-weight:800;color:var(--navy);border-top:2px solid var(--navy)}
.calc-facts{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px;font-size:13px}
.calc-facts li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 13px;font-variant-numeric:tabular-nums}
.calc-facts b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#526772;margin-bottom:2px}
.calc-cta{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:16px}
@media (max-width:860px){.calc-detail{grid-template-columns:1fr}}
/* A grid item defaults to min-width:auto, so these sections refused to shrink
   below the widest row of their table and pushed the page sideways instead.
   The Greek page hit it first at 320px — its words are the longest — but the
   cause was never the language. With min-width:0 the section shrinks and
   .table-scroll does the scrolling it was there to do. */
.calc>*,.calc-detail>*,.calc-results>*{min-width:0}
.calc-card{border-color:var(--gold);background:linear-gradient(160deg,#fffdf8,#fdf6e8)}
.calc-card .guide-pillar{color:#986412}

.calc-group{border:1px solid var(--line);border-radius:12px;padding:14px 14px 4px;margin:0;display:grid;gap:12px;background:var(--mist)}
.calc-group legend{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:#526772;padding:0 6px}
.calc-field select{border:1px solid #cbdedb;border-radius:8px;padding:10px 11px;font:600 13px Manrope,Arial,sans-serif;background:#fff;color:var(--ink);width:100%}.calc-amount{display:flex;gap:8px;align-items:stretch}.calc-amount input{flex:1 1 auto;min-width:120px;width:auto}.calc-amount select{width:auto;flex:0 0 auto;padding:0 10px;font-size:13px;color:var(--navy)}
.calc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid #ffffff2e}
.calc-stats div{text-align:center}
.calc-stats b{display:block;font:700 20px Manrope,Arial,sans-serif;color:#f0be60;font-variant-numeric:tabular-nums}
.calc-stats span{font-size:10.5px;line-height:1.3;color:#bcd6de;display:block;margin-top:3px}
.calc-reform{background:#fff;border:3px solid var(--navy);border-radius:16px;padding:22px 24px;margin:30px 0}
.calc-reform h2{font:700 18px Manrope,Arial,sans-serif;color:var(--navy);margin:0 0 14px}
.reform-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:12px}
.reform-grid div{background:var(--mist);border-radius:11px;padding:13px 15px}
.reform-grid span{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#526772;margin-bottom:4px}
.reform-grid b{font:700 22px Manrope,Arial,sans-serif;color:var(--navy);font-variant-numeric:tabular-nums}
.reform-grid .reform-diff{background:#eaf6f0;border:1px solid #b6ddc9}
.reform-grid .reform-diff b{color:#1f7a55}
.reform-grid small{display:block;font-size:11px;color:#5b6c79;margin-top:2px}
@media (max-width:700px){.calc-stats,.reform-grid{grid-template-columns:1fr}}

/* --- Interaction polish ------------------------------------------------ */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
.nav nav a{transition:color var(--quick) ease}
.ask{transition:color var(--quick) ease,transform var(--press) var(--ease-out)}
.ask:active{transform:translateX(2px)}
.text-button{transition:color var(--quick) ease}
.text-button span{display:inline-block;transition:transform var(--settle) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.text-button:hover span{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .button:hover,.service-card:hover,.guide-item:hover{transform:none}
  .button:active,.guide-item:active,.ask:active{transform:none}
  .text-button:hover span{transform:none}
  .faq{transition:none}
  *{scroll-behavior:auto}
}

/* --- Entrance and interaction (design-eng pass 2) ---------------------- */

/* 1. Hero entrance. Rare/first-time tier: seen once per visit, so the delight
      budget applies. Purpose: explanation — it walks the eye down the page. */
.hero-copy > *{opacity:0;transform:translateY(12px);animation:rise 520ms var(--ease-out) forwards}
.hero-copy > :nth-child(1){animation-delay:60ms}
.hero-copy > :nth-child(2){animation-delay:130ms}
.hero-copy > :nth-child(3){animation-delay:200ms}
.hero-copy > :nth-child(4){animation-delay:270ms}
.hero-copy > :nth-child(5){animation-delay:340ms}
@keyframes rise{to{opacity:1;transform:none}}

/* 2. Header gains a shadow once you leave the top, so it stops floating
      ambiguously over the content. State indication. */
.header{transition:box-shadow var(--settle) var(--ease-out),background-color var(--settle) ease}
.header.scrolled{box-shadow:0 6px 22px #0a363a14;background:#fffefbf2}

/* 3. Mobile menu: it appeared instantly, which reads as a glitch. */
.nav nav{transform-origin:top center}
.nav.open nav{animation:menu-in 220ms var(--ease-out)}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* 4. Service icon answers the card hover. Near-imperceptible by design. */
.service-icon{transition:transform var(--settle) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.service-card:hover .service-icon{transform:scale(1.06)}}

/* 5. Calculator: the bar jumped between widths on every keystroke. */
.split-part{transition:width var(--settle) var(--ease-out)}

/* 6. Form success. Rare tier — you see it once, when it matters. */
.form-success{transform:scale(.97);opacity:0;transition:opacity var(--quick) var(--ease-out),transform var(--quick) var(--ease-out)}
.form-success:not([hidden]){transform:none;opacity:1}

/* 7. Article cards lift their title colour, not just the card. */
.guide-item h4{transition:color var(--quick) ease}
@media (hover:hover) and (pointer:fine){.guide-item:hover h4{color:#986412}}

@media (prefers-reduced-motion:reduce){
  .hero-copy > *{animation:none;opacity:1;transform:none}
  .nav.open nav{animation:none}
  .service-card:hover .service-icon{transform:none}
  .split-part{transition:none}
  .form-success{transform:none}
}

/* --- Contact form fields ------------------------------------------------ */
.quote-form textarea{resize:vertical;min-height:96px}
.quote-form .consent input[type=checkbox]{
  width:18px;height:18px;accent-color:var(--navy);border:2px solid var(--navy);border-radius:4px}
.quote-form label{color:var(--navy)}

/* Hero primary button sits on a busy photograph, so it reads lighter than the
   deep navy used elsewhere while keeping 7:1 contrast with its white label. */
.hero-buttons .button{background:#0e5f7a;border-color:#0e5f7a}
@media (hover:hover) and (pointer:fine){
  .hero-buttons .button:hover{background:#146a86;border-color:#146a86}
}

/* "See services" becomes a secondary pill matched to the primary button's
   size, one step lighter so the hierarchy still reads. */
.hero-buttons{gap:14px}
.hero-buttons .text-button{
  display:inline-flex;align-items:center;justify-content:center;
  /* matches .hero .button exactly: 28px pill, 15px 26px, 14px type */
  padding:15px 26px;border-radius:28px;
  background:#ffffffee;border:1px solid #ffffff;color:#0e5f7a;
  font:700 14px Manrope,Arial,sans-serif;
  box-shadow:0 2px 10px #07303f1a;
  transition:transform var(--press) var(--ease-out),background-color var(--quick) ease,
             box-shadow var(--quick) var(--ease-out),color var(--quick) ease}
.hero-buttons .text-button span{font-size:16px;margin-left:6px}
@media (hover:hover) and (pointer:fine){
  .hero-buttons .text-button:hover{background:#fff;color:#146a86;box-shadow:0 6px 16px #07303f24}
}
.hero-buttons .text-button:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.hero-buttons .text-button:active{transform:none}}

/* The services section renders two grids (documents, business) with a hidden
   group heading between them. display:none drops the heading's margins too, so
   the two grids met with no gap while cards inside each had 18px. This gives
   the seam the same 18px, so every card sits an equal distance from its
   neighbours in both directions. */
.service-grid ~ .service-grid{margin-top:18px}
.biometric-note{margin-top:32px}

/* Category headings were in the markup but hidden, so the twelve cards read as
   one undifferentiated block. Shown now, each category gets its own row. */
.group-title{
  display:flex;align-items:center;gap:20px;
  font:800 clamp(20px,2.4vw,28px) Manrope,Arial,sans-serif;text-transform:uppercase;letter-spacing:.04em;
  color:var(--navy);margin:56px 0 24px}
.group-title:first-of-type{margin-top:0}
.group-title:before,.group-title:after{content:"";flex:1;height:2px;background:#9db4bd;border-radius:2px}
.service-grid ~ .service-grid{margin-top:0}
@media (max-width:560px){.group-title{margin:38px 0 18px;font-size:19px;letter-spacing:.03em;gap:12px}}

/* --- Section shading ---------------------------------------------------- */
/* The page was white end to end, so nothing separated one section from the
   next. A soft tint on the page ground, with white reserved for the sections
   that carry cards, gives the scroll a rhythm without adding colour. */
body{background:#f4f8f9}

#services,.testimonials,.contact{background:#fff}
#articles.tinted{background:var(--cream);color:var(--ink)}
#articles.tinted .section-intro h2{color:var(--ink)}
#articles.tinted .eyebrow{color:#8a5a0d}
#how.tinted{background:var(--navy);color:#fff}
.about{background:#f7f4ed}
#faq.tinted{background:#eef4f6;color:var(--ink)}

/* Inner pages sit on the same tint, so their white cards read as raised. */
.simple-page,.guide,.calc-explain{background:transparent}

/* ========================================================================
   Redesign layer — lighter card-based treatment.
   Replaces the heavy navy-bordered look with thin borders, soft shadows and
   alternating cream / pale-blue sections, gold as the action colour.
   ===================================================================== */
:root{
  --nv:#123c5a; --nv-soft:#2c5f83; --gd:#e8a33d; --gd-deep:#955d0c;
  --ink2:#22384a; --muted:#5f7386;
  --page:#f7fafd; --blue:#edf4fc; --cream2:#fdf4e7; --mint:#e9f6f0;
  --edge:#e3ebf2; --shadow:0 4px 16px #10375614; --shadow-lg:0 12px 30px #1037561f;
}
body{background:var(--page);color:var(--muted)}

/* header */
.header{height:76px;background:#fffffff2;border-bottom:1px solid var(--edge);box-shadow:none}
.brand span{background:var(--nv);color:var(--gd);border-radius:11px;width:36px;height:36px;font-size:17px}
.brand strong{color:var(--nv);font-size:14px}
.brand small{color:#607588}
.nav nav a{color:#3d5568;font-weight:600;font-size:13.5px}
.nav nav a.current,.nav nav a:hover{color:var(--gd-deep)}
.lang{background:#f1f5f9;border:1px solid var(--edge);border-radius:18px;padding:2px}
.lang a{color:#5c6f81;font-weight:700}
.lang a.active{background:var(--nv);color:#fff}
.phone{color:var(--muted);font-weight:600}
.button.small{background:var(--gd);border-color:var(--gd);color:#3a2a0c;border-radius:22px}

/* hero */
.hero{min-height:600px}
.hero-shade{background:linear-gradient(100deg,#0d3350f2 0%,#12405fcc 45%,#14486799 100%)}
.hero-pill{background:#ffffff26;border:1px solid #ffffff4d;border-radius:22px;font-size:11.5px;font-weight:700}
.hero h1{font-size:clamp(38px,4.6vw,60px);line-height:1.1;letter-spacing:-.03em}
.hero h1 em{color:var(--gd)}
.lead{font-size:16px;color:#dbe7f0;max-width:600px}
.hero-buttons .button{background:var(--gd);border-color:var(--gd);color:#3a2a0c;border-radius:26px;padding:14px 26px}
.hero-buttons .text-button{background:transparent;border:1px solid #ffffff8c;color:#fff;border-radius:26px;padding:14px 24px;box-shadow:none}
.trust-row{gap:26px;margin-top:38px;font-size:12px;color:#cfe0ec}
.trust-row span{background:none;border:0;padding:0;display:inline-flex;align-items:center;gap:7px;font-size:0}
.trust-row span:before{content:"✓";color:var(--gd);font-size:12px;font-weight:800}
.trust-row span b{font-size:12px;font-weight:600;color:#e7f0f6}

/* stats — one white card, not four bordered boxes */
.stats-grid{background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);gap:0;overflow:hidden;padding:6px 0}
.stats-grid>div,.stats-grid>div:first-child{background:transparent;border:0;border-left:1px solid var(--edge);
  border-radius:0;box-shadow:none;padding:20px 22px}
.stats-grid>div:first-child{border-left:0}
.stats-grid i{background:var(--blue);color:var(--nv);width:38px;height:38px}
.stats-grid b{color:var(--nv);font-size:21px}
.stats-grid span{color:#5f7284;font-size:11px;margin-left:0;padding-top:0}
.stats-grid .stat-text{gap:1px}

/* section rhythm */
#services{background:var(--page)}
#articles.tinted{background:var(--cream2)}
#how.tinted{background:var(--blue);color:var(--ink2)}
#how.tinted .section-intro h2,#how .step h3{color:var(--nv)}
#how .step p{color:var(--muted)}
.about{background:var(--cream2)}
.testimonials{background:#fff}
#faq.tinted{background:var(--blue)}
.contact{background:var(--cream2)}
.section-intro h1,.section-intro h2,.choose h2,.about h2{color:var(--nv);font-size:clamp(27px,3vw,38px)}
.eyebrow,.section-intro .eyebrow{color:var(--gd-deep);font-size:11px;letter-spacing:.2em}

/* category headings — centred label, no rules */
.group-title{display:block;text-align:center;font:800 11.5px Manrope,Arial,sans-serif;
  letter-spacing:.18em;color:var(--nv-soft);margin:40px 0 20px}
.group-title:before,.group-title:after{display:none}

/* cards */
.service-card,.reasons>div,.testimonial,.faq,.guide-item,.step{
  border:1px solid var(--edge);border-radius:14px;background:#fff;box-shadow:var(--shadow)}
.service-card{min-height:0;padding:22px 22px 20px}
.service-icon{width:38px;height:38px;border-radius:10px;background:var(--blue);color:var(--nv);font-size:17px}
.service-card h4{font-size:15px;min-height:0;margin:16px 0 8px;color:var(--nv)}
.service-card p{font-size:12.5px;color:var(--muted);line-height:1.6}
.ask{color:var(--nv);font-size:12px;font-weight:700}
.service-grid{gap:16px}

/* articles */
.guide-item{background:#fffaf2;border-color:#f0e0c6}
.guide-pillar{color:var(--gd-deep);font-size:9.5px}
.guide-item h4{font-size:14.5px;color:var(--nv)}
.guide-item p{font-size:12.5px}
.guide-meta{font-size:9.5px;color:#5d7182}

/* how it works */
.steps{gap:16px}
.step{padding:24px}
.step span{background:var(--blue);color:var(--nv);width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;padding:0;letter-spacing:0}
.step h3{font-size:16px;margin:16px 0 7px}
.step p{font-size:12.5px;line-height:1.65}

/* about */
.about-photo{height:470px;max-width:360px}
.photo-placeholder,.about-photo img{border-radius:20px}

.about-tags span{background:#fff;border-color:var(--edge);font-weight:700;color:var(--nv)}
.talk{background:var(--gd);border-color:var(--gd);color:#3a2a0c;border-radius:24px}

/* testimonials */
.testimonial{background:var(--mint);border-color:#cfe8dc;min-height:0;padding:22px}
.testimonial:before{color:var(--gd)}
.testimonial blockquote{font-size:13px;color:#33505f}
.testimonial cite{border-top-color:#cfe8dc;color:var(--nv-soft)}

/* faq */
.faq{margin:10px 0;padding:0 18px;border-color:var(--edge)}
.faq button{color:var(--nv);font-size:13px}
.faq.open{background:#fff;border-color:#d9e6f2}

/* contact */
.quote-form{border-color:var(--edge);border-radius:16px;box-shadow:var(--shadow)}
.quote-form input,.quote-form select,.quote-form textarea{
  border:1px solid #d6e1ec;border-radius:9px;font-size:13px}
.quote-form label{color:var(--nv)}
.quote-form .button{background:var(--gd);border-color:var(--gd);color:#3a2a0c;border-radius:24px}
.contact h2{color:var(--nv)}

/* footer */
footer{background:var(--nv);color:#c8d8e4}
footer .brand span{background:#1d5578;color:var(--gd)}
.footer-grid b{color:#fff;font-weight:700}
.copyright{color:#8fa8ba}

/* --- Strict alternating bands ------------------------------------------
   Every content section alternates pale blue / white down the page.
   Written per section rather than with nth-child so the rhythm holds even
   if the articles block is empty and does not render. */
body{background:#fff}

#services{background:var(--blue)}
#articles.tinted{background:#fff}
#how.tinted{background:var(--blue)}
main > .section:nth-of-type(6){background:#fff}   /* why choose us */
.about{background:var(--blue)}
.testimonials{background:#fff}
#faq.tinted{background:var(--blue)}
.contact{background:#fff}

/* keep text legible now that the warm cream sections are gone */
#articles.tinted,#how.tinted,#faq.tinted,.about,.contact{color:var(--muted)}
#articles.tinted .section-intro h2,#how.tinted .section-intro h2,
#faq .section-intro h2,.about h2,.contact h2{color:var(--nv)}
.guide-item{background:#fff;border-color:var(--edge)}
.about-tags span{background:#fff}

/* inner pages: articles list, guides and the calculator sit on white with
   pale-blue panels, matching the homepage rhythm */
.guide-cta{background:var(--nv)}
.calc-inputs{background:var(--blue);border:1px solid var(--edge)}
.calc-results{background:var(--nv)}

/* ========================================================================
   Palette matched to the reference design.
   ===================================================================== */
:root{
  --nv:#123c56; --nv-soft:#3a6480; --gd:#e9a13c; --gd-deep:#946010;
  --muted:#5c7183; --ink2:#22384a;
  --blue:#eaf3fb; --cream2:#fdf3e7; --mint:#e8f6ef; --peach:#fdf2e4;
  --edge:#e6edf4; --page:#fff;
}
body{background:#fff;color:var(--muted)}

/* section bands, in the order the reference uses them */
#services{background:var(--blue)}
#articles.tinted{background:#fff}
#how.tinted{background:var(--blue)}
main > .section:nth-of-type(6){background:#fff}
.about{background:var(--cream2)}
.testimonials{background:#fff}
#faq.tinted{background:var(--blue)}
.contact{background:var(--cream2)}

/* article cards are peach on the white band */
.guide-item{background:var(--peach);border-color:#f3e1c8}
.guide-item h4,.guide-item p{color:var(--nv)}
.guide-item p{color:var(--muted)}
.guide-pillar{color:var(--gd-deep);letter-spacing:.14em}

/* accents */
.eyebrow,.section-intro .eyebrow,#services .eyebrow{color:var(--gd-deep);letter-spacing:.22em;font-size:11px}
.hero h1 em{color:var(--gd)}
.button,.hero-buttons .button,.quote-form .button,.talk,.button.small{
  background:var(--gd);border-color:var(--gd);color:#3a2a0c}
.trust-row span:before{color:var(--gd)}
.testimonial:before{color:var(--gd)}
.group-title{color:var(--nv-soft)}
.faq button:after{color:var(--gd)}

/* headings and cards */
.section-intro h1,.section-intro h2,.choose h2,.about h2,.contact h2,
.service-card h4,.step h3,.faq button,.quote-form label{color:var(--nv)}
.service-card,.step,.faq,.quote-form,.testimonial{border-color:var(--edge)}
.testimonial{background:var(--mint);border-color:#d3ebe0}
.stats-grid i,.service-icon{background:#eef4fb;color:var(--nv)}
footer{background:var(--nv)}
footer .brand span{background:#1e5573;color:var(--gd)}

/* ========================================================================
   Section entrances. Each band's contents rise in as it comes into view —
   staggered so a row reads as a sequence, and gone entirely for anyone who
   asked their system for reduced motion.
   ===================================================================== */
.section-intro,.stats-grid > div,.group-title{opacity:0;transform:translateY(16px);
  transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
.section-intro.visible,.stats-grid > div.visible,.group-title.visible{opacity:1;transform:none}

.reveal{transform:translateY(18px)}
.service-card.visible,.guide-item.visible,.step.visible,.testimonial.visible{transform:none}

/* cards scale up very slightly as they arrive, so they feel placed rather
   than pasted */
.service-card,.guide-item,.step,.testimonial,.reasons > div{
  transform:translateY(18px) scale(.985)}
.service-card.visible,.guide-item.visible,.step.visible,.testimonial.visible,.reasons > div.visible{
  transform:none}

/* the FAQ rows come in one after another */
.faq{opacity:0;transform:translateY(12px);
  transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out),
             grid-template-rows var(--settle) var(--ease-out)}
.faq.visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .section-intro,.stats-grid > div,.group-title,.faq,
  .service-card,.guide-item,.step,.testimonial,.reasons > div{
    opacity:1;transform:none;transition:none}
}

/* Ghost step numbers, as in the reference: large, faint, behind the content. */
.step{position:relative;overflow:hidden}
.step:after{content:attr(data-step);position:absolute;top:-6px;right:12px;
  font:800 66px/1 Manrope,Arial,sans-serif;color:#123c560f;pointer-events:none;user-select:none}
.step > *{position:relative;z-index:1}

/* --- Back to top --------------------------------------------------------
   Appears after a screen and a half of scrolling, so it is absent when it
   would be useless. Gold to match the other actions, and it scales in from
   0.9 rather than materialising. */
.to-top{
  position:fixed;right:22px;bottom:22px;z-index:12;
  width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:var(--gd);color:#3a2a0c;
  box-shadow:0 6px 18px #123c5633;
  opacity:0;transform:translateY(8px) scale(.9);
  transition:opacity var(--quick) var(--ease-out),transform var(--quick) var(--ease-out),
             background-color var(--quick) ease,box-shadow var(--quick) var(--ease-out)}
.to-top[hidden]{display:grid}                 /* hidden is handled by opacity */
.to-top.show{opacity:1;transform:none}
.to-top svg{width:20px;height:20px;display:block}
@media (hover:hover) and (pointer:fine){
  .to-top:hover{background:#f0ad4c;box-shadow:0 10px 24px #123c5640;transform:translateY(-2px)}
}
.to-top:active{transform:scale(.94)}
.to-top:focus-visible{outline:2px solid var(--nv);outline-offset:3px}
@media (max-width:560px){.to-top{right:14px;bottom:14px;width:42px;height:42px}}
@media (prefers-reduced-motion:reduce){
  .to-top{transition:opacity var(--quick) ease}
  .to-top.show,.to-top:hover,.to-top:active{transform:none}
}

/* --- Error pages -------------------------------------------------------- */
.errorpage{min-height:72vh;display:grid;place-items:center;text-align:center;padding:80px 0}
.error-code{font:800 clamp(64px,12vw,120px)/1 Manrope,Arial,sans-serif;color:#e9a13c26;margin:0 0 -18px}
.errorpage h1{font:800 clamp(26px,4vw,38px) Manrope,Arial,sans-serif;color:var(--nv);margin:0 0 12px}
.errorpage > .container > p{font-size:16px;max-width:46ch;margin:0 auto 26px}
.error-links{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.error-help{font-size:13px;color:#7f93a3}
.error-help a{color:var(--nv);font-weight:700;text-decoration:underline}

/* Nav items must stay on one line — "How it works" and "Salary calculator"
   were wrapping onto three lines each. */
.nav nav{gap:17px;flex-wrap:nowrap;font-size:12.5px}
.nav nav a{white-space:nowrap;font-size:12.5px}
.nav{gap:18px}
@media (max-width:1450px){.nav nav{gap:13px;font-size:12px}.nav nav a{font-size:12px}.phone{display:none}}
@media (max-width:900px){.nav nav a{font-size:13px;white-space:normal}}

/* About: brand panel in place of a photograph */
.about-logo{width:100%;height:100%;object-fit:cover;border-radius:20px;display:block;
  box-shadow:0 14px 34px #123c561f}

/* --- Verification statement on guides ----------------------------------- */
.verified{display:flex;gap:12px;align-items:flex-start;margin:22px 0 6px;
  background:#eef7f1;border:1px solid #cfe8db;border-radius:12px;padding:14px 16px;
  font-size:13px;line-height:1.6;color:#33544a}
.verified-mark{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:#25805f;color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:800;line-height:1}
.verified b{color:#1f5c47}
.verified a{color:#1f5c47;font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* --- Links inside articles ----------------------------------------------
   The global reset strips underlines so navigation reads cleanly, but inside
   an article a link that looks like body text is a link nobody clicks. These
   are underlined and coloured, and links that leave the site say so. */
.guide-body a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;text-decoration-color:#9fc0cf;font-weight:600;
  transition:color var(--quick) ease,text-decoration-color var(--quick) ease}
@media (hover:hover) and (pointer:fine){
  .guide-body a:hover{color:#8a5a0d;text-decoration-color:#c9a24a}
}
.guide-body a:active{color:#8a5a0d}
/* Anything pointing off the site gets a marker, so "official source" is
   visibly a trip to that authority's own website. */
.guide-body a[href^="http"]:after{content:"\2197";display:inline-block;
  font-size:.82em;margin-left:2px;text-decoration:none;vertical-align:baseline}

/* --- Article cover banner ------------------------------------------------
   Decorative only: it carries no words, so one file serves all three
   languages and it is hidden from screen readers rather than described. */
.guide-cover{display:block;width:100%;height:auto;aspect-ratio:1200/340;
  object-fit:cover;border-radius:14px;margin:0 0 26px;background:var(--navy)}
@media (max-width:640px){.guide-cover{border-radius:10px;margin-bottom:20px;
  aspect-ratio:1200/420;object-position:70% 50%}}

/* --- Header mark ---------------------------------------------------------
   The tile holds "VP", matching the favicon. Two letters need tighter
   tracking and a smaller size than the single glyph that used to be here. */
.brand span{font-size:14px;font-weight:800;letter-spacing:.02em;line-height:1}
@media (max-width:640px){.brand span{font-size:13px}}

/* --- Whole service card is the click target ------------------------------
   The card itself is the link, so every part of it responds: icon, heading,
   description and the read-more line. */
a.service-card{cursor:pointer;color:inherit;text-decoration:none}
a.service-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
a.service-card:active{transform:scale(.995)}

/* --- Back-navigation ------------------------------------------------------
   scroll-behavior:smooth on <html> makes the browser animate to the position
   it restores when you press Back, which on a phone reads as being thrown
   somewhere random. Anchor links are smoothed in JavaScript instead, where
   the behaviour can be limited to a deliberate click. */

/* --- Contact form fields --------------------------------------------------
   One border treatment for every field. A light resting border keeps the form
   quiet next to the navy section around it; the focused field takes the navy,
   so the eye lands on where you are typing rather than on all four at once. */
.quote-form .wide,.quote-form button,.form-success,.form-error,.form-note{grid-column:1/-1}
.quote-form input:not([type=checkbox]),
.quote-form select,
.quote-form textarea{border:1.5px solid #cddae2;border-radius:8px;padding:11px 12px;
  font:13px Manrope,Arial,sans-serif;color:var(--ink);background:#fff;
  transition:border-color var(--quick) ease,box-shadow var(--quick) ease}
.quote-form input:not([type=checkbox]):hover,
.quote-form select:hover,
.quote-form textarea:hover{border-color:#a9c2d1}
.quote-form input:not([type=checkbox]):focus,
.quote-form select:focus,
.quote-form textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px #003e5920;outline:none}
.quote-form textarea{min-height:104px;resize:vertical}

/* --- The Service dropdown -------------------------------------------------
   Safari and Chrome on macOS paint a native control over a <select> and
   ignore the border you give it, so it never matched the text fields however
   the cascade was arranged. Opting out of the native appearance is the only
   way to make it the same shape and colour; the chevron is then ours, drawn
   inline so it needs no extra request. */
.quote-form select{-webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:38px;line-height:1.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23456b80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px}
.quote-form select::-ms-expand{display:none}

/* --- Card edges ----------------------------------------------------------
   Borders removed: cards sit on their tinted band and are separated by the
   band itself plus a soft shadow, rather than by an outline. */
.service-card,.guide-item{border:1px solid var(--edge)}
@media (hover:hover) and (pointer:fine){
  .service-card:hover,.guide-item:hover{border-color:#cfdeea;
    box-shadow:0 16px 30px #002f4918}
}

/* Sections alternate down the page so nothing reads as one long white field.
   Blue, white, blue, white — with the warm About band as the break. Kept to
   two tints on purpose: a dark section here would need its own text colours
   and this is the last word in the cascade, so it stays simple. */
#services.section{background:var(--blue)}
#articles.section{background:#fff}
#how.section{background:var(--blue)}
main > .section:nth-of-type(6){background:#fff}
#about.about{background:var(--cream2)}
.section.testimonials{background:#fff}
#faq.section{background:var(--blue)}
#contact.section{background:var(--cream2)}

/* --- Deeper tint ----------------------------------------------------------
   The band blue was so pale it barely separated from white. Stepped darker,
   and the gold eyebrow stepped down with it: at the new tint the old gold
   fell to 4.3:1, below the 4.5 needed for small text. It now reads 4.8:1. */
:root{--blue:#dbe9f6;--gd-deep:#8a5a0d}

/* --- Service grid ---------------------------------------------------------
   Three across, which divides the groups cleanly: six documents fill two
   rows exactly and three immigration services fill one. auto-fill was
   producing four columns, so every group ended with empty slots.

   Rows start from the left, so the fourth card in Business, tax & investment lines up
   under the first card above it rather than floating in the middle of its
   own row. Cards stretch to equal height within a row, so the read-more
   lines share a baseline. */
.service-grid{display:flex;flex-wrap:wrap;justify-content:flex-start;
  gap:16px;align-items:stretch}
.service-card{flex:1 1 280px;max-width:calc((100% - 32px) / 3);min-height:0}
.service-card p{flex:1 1 auto}          /* pushes read-more to a common baseline */
.group-title{margin:34px 0 14px}
.group-title:first-of-type{margin-top:8px}

@media (max-width:1000px){
  .service-card{max-width:calc((100% - 16px) / 2)}
}
@media (max-width:640px){
  .service-grid{gap:12px}
  .service-card{max-width:100%;flex-basis:100%}
}

/* --- Category headings ----------------------------------------------------
   These had rules for flanking lines already, but a later pass set the
   pseudo-elements to display:none and dropped the text to 11.5px in a pale
   blue-grey, which is why they had almost disappeared. Restored louder:
   larger, darker, wider-tracked, with a rule running out to each side. */
.group-title{display:flex;align-items:center;gap:20px;
  font:800 14px/1.2 Manrope,Arial,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--nv);text-align:center;
  margin:38px 0 18px}
.group-title:first-of-type{margin-top:10px}
.group-title:before,.group-title:after{content:"";display:block;flex:1 1 auto;
  height:2px;border-radius:2px;background:#a9c3d4}
@media (max-width:640px){
  .group-title{gap:12px;font-size:12.5px;letter-spacing:.12em}
}

/* A card with no article yet is an <article>, not a link, so it misses the
   pointer and press feedback. Match them until their articles exist. */
article.service-card{cursor:pointer}
article.service-card:active{transform:scale(.995)}

/* --- Site search ----------------------------------------------------------
   Present in every header, so it stays compact: an input that widens on focus
   rather than one that permanently crowds the navigation. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.site-search{display:flex;align-items:center;gap:4px;background:#fff;
  border:1.5px solid #cddae2;border-radius:22px;padding:3px 4px 3px 12px;
  transition:border-color var(--quick) ease,box-shadow var(--quick) ease}
.site-search:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px #003e5920}
.site-search input{border:0;outline:none;background:transparent;width:132px;
  font:13px Manrope,Arial,sans-serif;color:var(--ink);padding:6px 0;
  transition:width var(--settle) var(--ease-out)}
.site-search input:focus{width:186px}
.site-search input::placeholder{color:#7d94a3}
.site-search button{display:grid;place-items:center;width:30px;height:30px;
  border:0;border-radius:50%;background:var(--navy);color:#fff;cursor:pointer;
  flex:0 0 auto;transition:background-color var(--quick) ease}
.site-search button svg{width:15px;height:15px;display:block}
@media (hover:hover) and (pointer:fine){.site-search button:hover{background:#0a5267}}
@media (max-width:900px){.site-search input{width:104px}.site-search input:focus{width:132px}}
/* On a phone the header cannot hold a text field as well as the brand, the
   menu and the language switcher — it overflowed the row. The input collapses
   to its magnifier, which submits the form with an empty query and lands on
   the search page, where the box is full width and focused. No JavaScript
   involved, so it works even if the script fails. */
@media (max-width:640px){
  .nav-actions .site-search{order:-1;border:0;background:transparent;
    box-shadow:none;padding:0;gap:0}
  .nav-actions .site-search input{position:absolute;width:1px;height:1px;
    padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav-actions .site-search .suggest{display:none}
  .nav-actions .site-search button{width:36px;height:36px}
  .nav-actions{gap:9px}
}
/* Belt and braces: nothing in the header row may force the page wider. */
.nav{flex-wrap:nowrap;min-width:0}
.nav .brand{min-width:0}
.nav-actions{min-width:0}

/* The full-width box on the search page itself */
.search-big{display:flex;gap:10px;margin:22px 0 26px}
.search-big input{flex:1 1 auto;min-width:0;border:1.5px solid #cddae2;
  border-radius:10px;padding:13px 15px;font:15px Manrope,Arial,sans-serif;
  color:var(--ink);background:#fff}
.search-big input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px #003e5920}
.search-count{font-size:14px;color:#54697a;margin:0 0 16px}
.search-count b{color:var(--nv)}
.page-search{margin:18px 0 6px;width:max-content}

/* --- Search suggestions --------------------------------------------------- */
.site-search,.search-big{position:relative}
.suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;
  margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--edge);
  border-radius:12px;box-shadow:0 14px 34px #00304a26;min-width:290px;
  max-height:min(60vh,380px);overflow-y:auto}
.site-search .suggest{left:auto;right:0}
.suggest li{margin:0}
.suggest a{display:block;padding:9px 11px;border-radius:8px;text-decoration:none;color:inherit}
.suggest li.active a,.suggest a:hover{background:var(--blue)}
.suggest-pillar{display:block;font:800 9.5px Manrope,Arial,sans-serif;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gd-deep);margin-bottom:3px}
.suggest-title{display:block;font:600 13px/1.35 Manrope,Arial,sans-serif;color:var(--nv)}
.suggest-title b{color:var(--navy);background:#ffe9b8;border-radius:2px;padding:0 1px}
@media (max-width:640px){.suggest{min-width:0;left:0;right:0}}

/* --- Telegram --------------------------------------------------------------
   The contact block carrying the email, the channel, the location and the
   hours was hidden by an earlier redesign pass, so the only channel link on
   the page was in the footer. Shown again, and a button added to the header
   where it is actually seen. */
.contact-copy .contact-details{display:grid;justify-items:center;gap:6px;
  margin:26px auto 0;font-size:13px}
.contact-copy .contact-details a{color:var(--nv);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:#a9c2d1}
@media (hover:hover) and (pointer:fine){
  .contact-copy .contact-details a:hover{color:#0a5267}
}
.tg-link{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;
  border-radius:50%;color:#fff;
  background:linear-gradient(180deg,#2AABEE 0%,#229ED9 100%);
  transition:transform var(--press) var(--ease-out),background-color var(--quick) ease}
.tg-link svg{width:18px;height:18px;display:block;
  transform:translate(-.4px,.4px)}   /* matched to the theme button; the glyph
                                        is optically off-centre, hence the nudge */
@media (hover:hover) and (pointer:fine){
  .tg-link:hover{background:linear-gradient(180deg,#1e9ad9 0%,#1b87ba 100%);
    transform:translateY(-1px)}
}
.tg-link:active{transform:scale(.94)}
.tg-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:640px){.tg-link{width:32px;height:32px}.tg-link svg{width:16px;height:16px}}

/* --- Telegram in the hero --------------------------------------------------
   A third call to action, deliberately quieter than the other two: the quote
   button is the thing to press, and this is for someone not ready to enquire
   who will still take a channel. Telegram blue rather than the site palette,
   because the recognisable colour is what makes it read as a channel. */
.hero-tg{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;
  border-radius:26px;border:1px solid #ffffff4d;background:#ffffff14;
  color:#fff;font:700 13px Manrope,Arial,sans-serif;white-space:nowrap;
  transition:background-color var(--quick) ease,border-color var(--quick) ease,
             transform var(--press) var(--ease-out)}
.hero-tg svg{width:17px;height:17px;display:block;color:#5fc4ef;flex:0 0 auto}
@media (hover:hover) and (pointer:fine){
  .hero-tg:hover{background:#229ED9;border-color:#229ED9;transform:translateY(-1px)}
  .hero-tg:hover svg{color:#fff}
}
.hero-tg:active{transform:scale(.97)}
.hero-tg:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:640px){
  .hero-buttons{flex-wrap:wrap}
  .hero-tg{padding:12px 16px;font-size:12.5px}
}

/* Cookie note — a line of information, not a gate. Sits out of the way and
   leaves once acknowledged. */
.cookie-note{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  max-width:720px;margin-inline:auto;padding:14px 18px;
  border-radius:14px;background:#0d3049;color:#eaf1f7;
  box-shadow:0 12px 34px rgba(8,28,45,.28);
  opacity:0;transform:translateY(10px);
  transition:opacity .3s ease,transform .3s ease}
.cookie-note.is-in{opacity:1;transform:none}
.cookie-note p{margin:0;flex:1 1 260px;font-size:.86rem;line-height:1.5}
.cookie-note a{color:#f1b56b;text-decoration:underline;text-underline-offset:2px}
.cookie-note a::after{content:none}          /* no external-link arrow here */
.cookie-ok{flex:0 0 auto;padding:9px 18px;border:0;border-radius:999px;
  background:#f1b56b;color:#0d3049;font:inherit;font-size:.86rem;font-weight:700;
  cursor:pointer;transition:background-color .2s ease,transform .12s ease}
.cookie-ok:hover{background:#f6c589}
.cookie-ok:active{transform:scale(.97)}
.cookie-ok:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:520px){
  .cookie-note{left:10px;right:10px;bottom:10px;padding:13px 15px;gap:12px}
  .cookie-note p{font-size:.82rem}
  .cookie-ok{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .cookie-note{transition:none}
}

/* --- Phones: nothing may push the page wider than the screen --------------
   Reported from an iPhone 14: the language switcher was missing and the page
   could be dragged sideways, which reads as "zoomed in". Three causes, all
   below. */

html{-webkit-text-size-adjust:100%}   /* Safari must not inflate our text */

/* A wide table scrolls inside its own box instead of stretching the page. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  max-width:100%;margin:18px 0}
.table-scroll table{margin:0}
.table-scroll th,.table-scroll td{white-space:normal}

@media (max-width:640px){
  /* The Telegram button was the straw that broke the header row: brand, menu,
     search, Telegram and the language switcher came to more than 390px, and
     .nav is nowrap — so RU/GR were pushed off the right edge and the page
     gained horizontal scroll. The channel is offered in the hero and in the
     footer, so the header copy is the one that goes. */
  .nav-actions .tg-link{display:none}

  /* iOS zooms the page in whenever a focused field is under 16px, and it does
     not zoom back out. Every field the visitor can tap has to reach 16px. */
  .quote-form input,.quote-form select,.quote-form textarea,
  .calc-field input,.calc-field select,
  .calc-amount input,.calc-amount select,
  .search-big input,.site-search input{font-size:16px}

  /* Long unbroken strings — a URL in a source list — must not widen the page. */
  .guide-body,.policy{overflow-wrap:anywhere}
}

/* The header row did not fit a 390px phone: brand 160 + menu 32 + actions 148
   plus gaps came to more than the screen, and .nav is nowrap — so the language
   switcher was pushed past the right edge and the whole page could be dragged
   sideways. Everything below buys that room back. */
@media (max-width:600px){
  .nav{gap:10px}
  .brand{gap:7px}
  .brand span{width:34px;height:34px;font-size:17px}
  .brand strong{font-size:12.5px}
  .brand small{font-size:7.5px;letter-spacing:.14em;margin-top:4px}
  .nav-actions{gap:7px}
  .lang{padding:2px}
  .lang a,.lang button{padding:5px 6px;font-size:9px}
  .menu{font-size:20px}
}
@media (max-width:380px){
  .brand small{display:none}      /* the last thing to go, on the smallest phones */
}

/* The calculator refused to go below 401px: grid items default to min-width
   auto, so one wide child — the rate table and the three-across stats — set
   the floor for the whole column. */
@media (max-width:860px){
  .calc{grid-template-columns:minmax(0,1fr)}
  .calc > *{min-width:0}
}
@media (max-width:600px){
  .calc-amount input{min-width:0}
  .calc-stats{grid-template-columns:1fr 1fr}
  .calc-facts{grid-template-columns:1fr}
  .calc-inputs,.calc-results{padding:17px}
  .calc-table,.calc-rates{font-size:12.5px}
}
/* Both calculator tables scroll on their own rather than widening the page. */
.calc-results .table-scroll{margin:0}

/* At 320px — an iPhone SE — the language switcher was still a few pixels over. */
@media (max-width:340px){
  .brand strong{font-size:11.5px}
  .brand span{width:31px;height:31px;font-size:15px}
  .lang a,.lang button{padding:5px 5px;font-size:8.5px}
  .nav{gap:8px}
}

/* A <select> will not shrink below its longest option — and one option here is
   "50% exemption (salary over €55,000)". Grid and flex children default to
   min-width:auto, so that single string set the floor for the whole page.
   Letting them shrink lets the select truncate instead. */
.calc-inputs > *,.calc-field,.calc-group,
.calc-field select,.calc-amount select,.calc-amount input{min-width:0}
.calc-field select{width:100%;text-overflow:ellipsis}
/* Let the unit select give up the last sub-pixel rather than round outwards. */
.calc-amount select{flex:0 1 auto}

/* --- Residence-permit finder ---------------------------------------------
   Two columns on a desk, one on a phone, and the results stay in view while
   the questions are answered. */
.pf{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;
  margin:6px 0 34px}
.pf > *{min-width:0}

.pf-questions{display:grid;gap:14px;background:var(--blue);
  border:1px solid var(--edge);border-radius:16px;padding:20px}
.pf-q{border:0;margin:0;padding:0}
.pf-q legend{font:800 14px Manrope,Arial,sans-serif;color:var(--nv);
  padding:0;margin-bottom:9px;line-height:1.4}
.pf-q legend b{display:inline-grid;place-items:center;width:21px;height:21px;
  margin-right:7px;border-radius:50%;background:var(--nv);color:#fff;
  font-size:11px;vertical-align:-3px}
.pf-options{display:flex;flex-wrap:wrap;gap:7px}
.pf-opt{position:relative}
.pf-opt input{position:absolute;opacity:0;width:1px;height:1px}
.pf-opt span{display:block;padding:8px 13px;border:1px solid #cddae2;
  border-radius:999px;background:#fff;color:var(--ink);
  font:600 12.5px Manrope,Arial,sans-serif;cursor:pointer;
  transition:background-color var(--quick) ease,border-color var(--quick) ease,color var(--quick) ease}
@media (hover:hover) and (pointer:fine){.pf-opt span:hover{border-color:var(--nv)}}
.pf-opt input:checked + span{background:var(--nv);border-color:var(--nv);color:#fff}
.pf-opt input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}

.pf-results{position:sticky;top:96px;display:grid;gap:12px;align-content:start}
.pf-results > h2{font:800 19px Manrope,Arial,sans-serif;color:var(--nv);margin:0}
.pf-hint{margin:0;color:#607080;font-size:13.5px}

.pf-route{border:1px solid var(--edge);border-radius:16px;padding:18px 19px;
  background:#fff;box-shadow:0 8px 20px #00334c0d}
.pf-route h3{margin:0 0 11px;font:800 15.5px Manrope,Arial,sans-serif;color:var(--nv);line-height:1.3}
.pf-route dl{display:grid;gap:5px;margin:0 0 11px}
.pf-route dl > div{display:flex;gap:9px;font-size:12.5px;line-height:1.45}
.pf-route dt{flex:0 0 92px;color:#5f7284;font-weight:700}
.pf-route dd{margin:0;font-weight:600;color:var(--ink)}
.pf-route p{margin:0 0 11px;font-size:13px;line-height:1.65;color:#54697a}
.pf-more{font:800 12.5px Manrope,Arial,sans-serif;color:var(--nv)}
.pf-more::after{content:none}
.pf-none{border:1px dashed #cddae2;border-radius:16px;padding:18px 19px;background:#fffdf5}
.pf-none h3{margin:0 0 7px;font:800 15px Manrope,Arial,sans-serif;color:var(--nv)}
.pf-none p{margin:0;font-size:13px;line-height:1.65;color:#54697a}

.pf-reset{justify-self:start;border:1px solid #cddae2;background:#fff;
  border-radius:999px;padding:8px 15px;font:700 12px Manrope,Arial,sans-serif;
  color:var(--nv);cursor:pointer}
.pf-reset:hover{border-color:var(--nv)}

.pf-disclaimer{max-width:760px;font-size:12.5px;line-height:1.7;color:#607080;margin:0 0 22px}
.pf-checked{display:block;margin-top:5px;font-size:11.5px}
.pf-cta{margin:0 0 10px}

@media (max-width:860px){
  .pf{grid-template-columns:minmax(0,1fr);gap:18px}
  .pf-results{position:static}
}
@media (max-width:600px){
  .pf-questions{padding:15px}
  .pf-opt span{padding:9px 12px;font-size:13px}   /* a comfortable tap target */
  .pf-route{padding:15px 16px}
  .pf-route dt{flex:0 0 84px}
}

/* --- Document checklists (draft) ----------------------------------------- */
.draft-flag{display:inline-block;margin:0 0 18px;padding:7px 13px;border-radius:999px;
  background:#fff3d6;border:1px solid #e8c98a;color:#7a5a13;
  font:700 12px Manrope,Arial,sans-serif}

.cl{display:grid;gap:20px;margin:4px 0 30px}
.cl-pick h2{font:800 16px Manrope,Arial,sans-serif;color:var(--nv);margin:0 0 10px}
.cl-tabs{display:flex;flex-wrap:wrap;gap:8px}
.cl-tab{border:1px solid #cddae2;background:#fff;color:var(--ink);border-radius:999px;
  padding:9px 15px;font:600 13px Manrope,Arial,sans-serif;cursor:pointer;
  transition:background-color var(--quick) ease,border-color var(--quick) ease,color var(--quick) ease}
@media (hover:hover) and (pointer:fine){.cl-tab:hover{border-color:var(--nv)}}
.cl-tab.is-on{background:var(--nv);border-color:var(--nv);color:#fff}

.cl-out{border:1px solid var(--edge);border-radius:18px;background:#fff;padding:22px;
  box-shadow:0 8px 20px #00334c0d}
.cl-name{font:800 20px Manrope,Arial,sans-serif;color:var(--nv);margin:0 0 8px;line-height:1.25}
.cl-blurb{margin:0 0 12px;font-size:14px;line-height:1.7;color:#54697a}
.cl-fee{margin:0 0 18px;font-size:13.5px;color:var(--ink)}
.cl-fee b{color:var(--nv)}

.cl-list{list-style:none;margin:0;padding:0;display:grid;gap:11px;counter-reset:cl}
.cl-item{border:1px solid var(--edge);border-radius:13px;padding:13px 15px;background:#fff;
  transition:opacity var(--quick) ease,background-color var(--quick) ease}
.cl-item.is-done{opacity:.55;background:#f6faf7}
.cl-item.is-done .cl-doc{text-decoration:line-through}
.cl-item label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.cl-item input{width:18px;height:18px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--nv)}
.cl-doc{font:700 14px Manrope,Arial,sans-serif;color:var(--nv);line-height:1.4}
.cl-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:9px 0 0 28px;font-size:12px;color:#5f7284}
.cl-meta b{font-weight:700;color:#54697a;margin-right:4px}
.cl-flag{display:inline-block;padding:2px 8px;border-radius:999px;font-weight:700;font-size:11px}
.cl-yes{background:#fdeccd;color:#8a5a0d}
.cl-maybe{background:#e8f0f7;color:#2b5a7d}
.cl-no{background:#eef4ef;color:#4d6b57}
.cl-note{margin:8px 0 0 28px;font-size:12.5px;line-height:1.6;color:#607080}

.cl-traps{margin-top:20px;border-top:1px solid var(--edge);padding-top:16px}
.cl-traps h3{font:800 14px Manrope,Arial,sans-serif;color:var(--nv);margin:0 0 8px}
.cl-traps ul{margin:0;padding-left:18px;display:grid;gap:6px}
.cl-traps li{font-size:13px;line-height:1.65;color:#54697a}

.cl-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:18px 0 6px}
.cl-print{border:1px solid #cddae2;background:#fff;border-radius:999px;padding:8px 15px;
  font:700 12px Manrope,Arial,sans-serif;color:var(--nv);cursor:pointer}
.cl-print:hover{border-color:var(--nv)}
.cl-ticked{margin:0;font-size:11.5px;color:#5f7183}

@media (max-width:600px){
  .cl-out{padding:16px}
  .cl-meta{margin-left:0;gap:5px 14px}
  .cl-note{margin-left:0}
  .cl-tab{padding:9px 13px;font-size:12.5px}
}
@media print{
  .header,.cl-tabs,.cl-pick,.cl-actions,.draft-flag,.pf-cta,footer,.to-top,.cookie-note{display:none}
  .cl-out{border:0;box-shadow:none;padding:0}
  .cl-item{break-inside:avoid}
}
/* The finder's results: a recommendation, then alternatives, then the honest
   list of what is closed to you and why. */
.pf-head{margin:6px 0 2px;font:800 12px Manrope,Arial,sans-serif;color:#5f7284;
  text-transform:uppercase;letter-spacing:.11em}
.pf-route.is-best{border-color:var(--nv);box-shadow:0 10px 24px #00334c1a}
.pf-next{margin:0 0 11px !important;font-size:12.5px;line-height:1.6;color:#54697a}
.pf-next b{color:var(--nv);display:block;font-size:11px;text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:3px}
.pf-closed{margin:0;padding:14px 16px 14px 32px;list-style:disc;
  border:1px dashed #cddae2;border-radius:14px;background:#fbfcfd;
  display:grid;gap:7px}
.pf-closed li{font-size:12.5px;line-height:1.6;color:#607080}
.pf-closed b{color:var(--nv)}
/* The policy page has no site header, so it carries its own language switcher. */
.policy-lang{display:inline-flex;margin:0 0 30px}

/* ==========================================================================
   Dark theme — follows the visitor's own system setting, with no toggle.

   Written as an additive layer: light mode is untouched, so nothing here can
   break the site for someone whose device is set to light. Tokens first,
   because 360 declarations already go through them; then the places where a
   colour was written by hand.

   The palette keeps the brand rather than inverting it — the navy deepens
   into the page, the gold stays gold, and text lands near-white but never
   pure white, which is harsh on a dark surface.
   ========================================================================== */
:root{color-scheme:light dark}

/* The same dark rules, reachable two ways: the visitor's own system
   setting — unless they have explicitly asked for light here — or their
   explicit choice of dark, whatever the system says.
   Generated from one source; do not edit the second copy by hand. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]){--page:#0d1a24;          /* the page itself */
    --white:#16242f;         /* what used to be a white card */
    --cream:#0d1a24;
    --mist:#12202b;
    --ink:#e7eef4;           /* body text */
    --muted:#9db0be;
    --edge:#25384a;          /* borders */
    --line:#25384a;
    --blue:#16293a;          /* the pale blue panels */
    --mint:#122c26;
    --peach:#2b2114;
    --cream2:#1e1913;      /* The warm cream sections — about, articles, contact.
                              Missed when the dark layer was written, so all three kept
                              a near-white background while their text went near-white
                              with everything else, and the headings vanished. */
    --nv:#dce8f1;            /* was the dark navy used for headings */
    --nv-soft:#8fb0c6;
    --gold:#eeb254;
    --gd:#eeb254;
    --gd-deep:#e3a951;
    --shadow:0 4px 16px #00000059;
    --shadow-lg:0 12px 30px #00000073;}
  :root:not([data-theme="light"]) body{background:var(--page);color:var(--ink)}
  :root:not([data-theme="light"]) /* Surfaces that were written as literal white */ .header,:root:not([data-theme="light"]) .service-card,:root:not([data-theme="light"]) .guide-item,:root:not([data-theme="light"]) .quote-form,:root:not([data-theme="light"]) .calc-card,:root:not([data-theme="light"]) .testimonial,:root:not([data-theme="light"]) .faq,:root:not([data-theme="light"]) .step,:root:not([data-theme="light"]) .reasons > div,:root:not([data-theme="light"]) .lang,:root:not([data-theme="light"]) .about-tags span,:root:not([data-theme="light"]) .trust-row span,:root:not([data-theme="light"]) .nav.open nav,:root:not([data-theme="light"]) .pf-route,:root:not([data-theme="light"]) .cl-out,:root:not([data-theme="light"]) .cl-item,:root:not([data-theme="light"]) .cl-tab,:root:not([data-theme="light"]) .pf-reset,:root:not([data-theme="light"]) .cl-print,:root:not([data-theme="light"]) .search-big input,:root:not([data-theme="light"]) .site-search,:root:not([data-theme="light"]) .suggest,:root:not([data-theme="light"]) .photo-placeholder{background:var(--white);border-color:var(--edge);color:var(--ink)}
  :root:not([data-theme="light"]) /* Keep the Larnaca photograph — just deepen the wash over it,:root:not([data-theme="light"]) so the headline still lands on an image rather than a flat panel. */ .hero-shade{background:linear-gradient(90deg,#02121ceb 5%,#04161fd6 54%,#04151ecc 100%)}
  :root:not([data-theme="light"]) .about,:root:not([data-theme="light"]) .testimonials,:root:not([data-theme="light"]) .contact,:root:not([data-theme="light"]) #faq.tinted,:root:not([data-theme="light"]) .simple-page,:root:not([data-theme="light"]) .policy{background:var(--page)}
  :root:not([data-theme="light"]) #articles.tinted,:root:not([data-theme="light"]) main > .section:nth-of-type(6){background:var(--mist)}
  :root:not([data-theme="light"]) /* Sections that were already dark stay dark,:root:not([data-theme="light"]) just a shade deeper */ .tinted{background:#0a2028}
  :root:not([data-theme="light"]) .stats-grid{background:var(--white)}
  :root:not([data-theme="light"]) .step{background:#12303e;border-color:#2b4a5c}
  :root:not([data-theme="light"]) .step p{color:#c2d4de}
  :root:not([data-theme="light"]) /* Headings and links that leaned on the navy token */ h1,:root:not([data-theme="light"]) h2,:root:not([data-theme="light"]) h3,:root:not([data-theme="light"]) h4,:root:not([data-theme="light"]) .brand strong,:root:not([data-theme="light"]) .section-intro h1,:root:not([data-theme="light"]) .section-intro h2,:root:not([data-theme="light"]) .choose h2,:root:not([data-theme="light"]) .about h2,:root:not([data-theme="light"]) .guide h1,:root:not([data-theme="light"]) .guide-body h2,:root:not([data-theme="light"]) .guide-body h3,:root:not([data-theme="light"]) .guide-body h4,:root:not([data-theme="light"]) .errorpage h1,:root:not([data-theme="light"]) .policy h1,:root:not([data-theme="light"]) .policy h2,:root:not([data-theme="light"]) .calc-headline,:root:not([data-theme="light"]) .search-page h1,:root:not([data-theme="light"]) .pf-route h3,:root:not([data-theme="light"]) .cl-name{color:var(--ink)}
  :root:not([data-theme="light"]) .crumbs a,:root:not([data-theme="light"]) .guide-body a,:root:not([data-theme="light"]) .faq button{color:var(--gd)}
  :root:not([data-theme="light"]) .guide-body{color:#c3d3de}
  :root:not([data-theme="light"]) .guide-body strong,:root:not([data-theme="light"]) .guide-body b{color:var(--ink)}
  :root:not([data-theme="light"]) .guide-body blockquote,:root:not([data-theme="light"]) .guide-sources,:root:not([data-theme="light"]) .guide-meta,:root:not([data-theme="light"]) .crumbs{color:var(--muted)}
  :root:not([data-theme="light"]) .nav nav a{color:#c6d6e2}
  :root:not([data-theme="light"]) .brand small{color:var(--muted)}
  :root:not([data-theme="light"]) .nav nav a:hover,:root:not([data-theme="light"]) .text-button:hover{color:var(--gd)}
  :root:not([data-theme="light"]) .guide-body a,:root:not([data-theme="light"]) .policy a{color:var(--gd)}
  :root:not([data-theme="light"]) /* Form fields */ .quote-form input,:root:not([data-theme="light"]) .quote-form select,:root:not([data-theme="light"]) .quote-form textarea,:root:not([data-theme="light"]) .calc-field input,:root:not([data-theme="light"]) .calc-field select,:root:not([data-theme="light"]) .calc-amount select{background:#101d27;border-color:var(--edge);color:var(--ink)}
  :root:not([data-theme="light"]) .quote-form label,:root:not([data-theme="light"]) .form-note{color:var(--muted)}
  :root:not([data-theme="light"]) ::placeholder{color:#7c8fa0}
  :root:not([data-theme="light"]) /* Buttons keep the gold,:root:not([data-theme="light"]) and the navy button needs to lift off the page */ .button{background:#16405a;border-color:#1d5273;color:#eef5fa}
  :root:not([data-theme="light"]) .button.small,:root:not([data-theme="light"]) .talk,:root:not([data-theme="light"]) .contact .button,:root:not([data-theme="light"]) .quote-form .button,:root:not([data-theme="light"]) .cl-tab.is-on{background:var(--gd);border-color:var(--gd);color:#221803}
  :root:not([data-theme="light"]) .pf-opt span{background:#101d27;border-color:var(--edge);color:var(--ink)}
  :root:not([data-theme="light"]) .pf-opt input:checked + span{background:var(--gd);border-color:var(--gd);color:#221803}
  :root:not([data-theme="light"]) /* Small print,:root:not([data-theme="light"]) notes and the flags in the checklists */ .pf-hint,:root:not([data-theme="light"]) .cl-blurb,:root:not([data-theme="light"]) .cl-note,:root:not([data-theme="light"]) .cl-ticked,:root:not([data-theme="light"]) .pf-disclaimer,:root:not([data-theme="light"]) .updated,:root:not([data-theme="light"]) .service-card p,:root:not([data-theme="light"]) .guide-item p,:root:not([data-theme="light"]) .testimonial blockquote{color:var(--muted)}
  :root:not([data-theme="light"]) .cl-yes{background:#3b2b10;color:#f0c37a}
  :root:not([data-theme="light"]) .cl-maybe{background:#14293a;color:#9cc4e2}
  :root:not([data-theme="light"]) .cl-no{background:#16281d;color:#9dc7ab}
  :root:not([data-theme="light"]) .cl-item.is-done{background:#122019}
  :root:not([data-theme="light"]) .pf-none,:root:not([data-theme="light"]) .cl-traps,:root:not([data-theme="light"]) .biometric-note{background:#1a1508;border-color:#3a2f14}
  :root:not([data-theme="light"]) /* Tables inside guides */ .guide-body table th{background:var(--mist);color:var(--ink)}
  :root:not([data-theme="light"]) .guide-body table td,:root:not([data-theme="light"]) .guide-body table th{border-color:var(--edge)}
  :root:not([data-theme="light"]) /* Icon chips were pale blue on white; on a dark page they read as holes. */ .service-icon,:root:not([data-theme="light"]) .stats-grid i,:root:not([data-theme="light"]) .reasons i{background:#17303f;color:#bfd6e6}
  :root:not([data-theme="light"]) .step span{background:var(--gd);color:#221803}

  /* --nv does double duty: it is the heading colour AND the fill of every navy
     surface. The dark layer flipped it light so headings would read, which
     silently turned eight solid navy panels into pale ones with white text on
     them — the brand badge, the active language pill, the article CTA, the
     calculator results, the finder's chosen answers and the checklist tabs.
     Those want a dark surface, not the heading colour. */

  /* Stragglers the first dark pass missed, each found by measuring contrast
     rather than by reading the cascade. */

  :root:not([data-theme="light"]) .calc-headline small{color:#b9d2dc}   /* 2.5:1 on the darkened results panel */
  :root:not([data-theme="light"]) .reform-grid .reform-diff{background:#12332a;border-color:#2c6a51}   /* mint panel, stayed pale */
  :root:not([data-theme="light"]) .reform-grid .reform-diff b,:root:not([data-theme="light"]) .reform-grid .reform-diff span{color:#7fd6ab}
  :root:not([data-theme="light"]) .reform-grid .reform-diff small{color:#a8cfbc}
  :root:not([data-theme="light"]) .cl-meta{color:#9db0be}
  :root:not([data-theme="light"]) .cl-meta b{color:#c3d3de}                                            /* was 2.77:1 */




  :root:not([data-theme="light"]) .start-form textarea,:root:not([data-theme="light"]) .start-form input[type=text],:root:not([data-theme="light"]) .start-form input[type=email],:root:not([data-theme="light"]) .start-form input:not([type]){background:#0f1c26;border-color:#55738a;color:var(--ink)}
  :root:not([data-theme="light"]) .start-form textarea::placeholder,:root:not([data-theme="light"]) .start-form input::placeholder{color:#7e93a3}
  :root:not([data-theme="light"]) .start-form textarea:hover,:root:not([data-theme="light"]) .start-form input:hover:not([type=checkbox]){border-color:#5d7d92}
  :root:not([data-theme="light"]) .start-form textarea:focus,:root:not([data-theme="light"]) .start-form input:focus:not([type=checkbox]){border-color:#eeb254;background:#132330;box-shadow:0 0 0 3px #eeb25433}
  :root:not([data-theme="light"]) .start-form label>span{color:#a9c0cf}
  :root:not([data-theme="light"]) .start-opt{background:var(--white);border-color:var(--edge)}
  :root:not([data-theme="light"]) .start-opt:has(input:checked){background:#16293a;border-color:#4d7a95}
  :root:not([data-theme="light"]) .start-needs legend,:root:not([data-theme="light"]) .pkg-head{color:var(--ink)}
  :root:not([data-theme="light"]) .start-form label>span,:root:not([data-theme="light"]) .pkg-who{color:#8fa3b2}
  :root:not([data-theme="light"]) .pkg{background:var(--white);border-color:var(--edge)}
  :root:not([data-theme="light"]) .pkg li{color:var(--muted)}
  :root:not([data-theme="light"]) .pkg-note{color:var(--muted)}
  :root:not([data-theme="light"]) .pkgs-home{background:#12202b}
  :root:not([data-theme="light"]) .pkg-note a{color:#eeb254}

  /* These are all colours darkened for light mode. On a dark ground they
     need to go the other way; --muted is the token for exactly this. */
  :root:not([data-theme="light"]) .guide-meta,:root:not([data-theme="light"]) .crumbs,:root:not([data-theme="light"]) .calc-rates th,:root:not([data-theme="light"]) .calc-facts b,:root:not([data-theme="light"]) .calc-group legend,:root:not([data-theme="light"]) .reform-grid span,:root:not([data-theme="light"]) .calc-rates tr.band-empty td,:root:not([data-theme="light"]) .cl-ticked,:root:not([data-theme="light"]) .brand small,:root:not([data-theme="light"]) .case dt,:root:not([data-theme="light"]) .stats-grid span,:root:not([data-theme="light"]) .pf-route dt,:root:not([data-theme="light"]) .cl-meta,:root:not([data-theme="light"]) .pf-head,:root:not([data-theme="light"]) .start-form label>span,:root:not([data-theme="light"]) .pkg-who,:root:not([data-theme="light"]) .biometric-note,:root:not([data-theme="light"]) .cl-note li,:root:not([data-theme="light"]) .lang a{color:var(--muted)}
  :root:not([data-theme="light"]) .case dt.case-result{color:#7fd6ab}
  :root:not([data-theme="light"]) .verified-mark{background:#2f9e7a;color:#08121a}
  :root:not([data-theme="light"]) .guide-pillar,:root:not([data-theme="light"]) .calc-card .guide-pillar{color:#eeb254}
  :root:not([data-theme="light"]) .cl-traps li{color:var(--muted)}
  :root:not([data-theme="light"]) .lang a,:root:not([data-theme="light"]) .lang button{color:#c6d6e2}

  :root:not([data-theme="light"]) .portal-card,:root:not([data-theme="light"]) .portal-list li,:root:not([data-theme="light"]) .portal-msgs li,:root:not([data-theme="light"]) .portal-appts li,:root:not([data-theme="light"]) .portal-pay li,:root:not([data-theme="light"]) .portal-case{background:var(--white);border-color:var(--edge)}
  :root:not([data-theme="light"]) .portal-head h1,:root:not([data-theme="light"]) .portal-block h2,:root:not([data-theme="light"]) .r-body b,:root:not([data-theme="light"]) .portal-appts b,:root:not([data-theme="light"]) .portal-pay b,:root:not([data-theme="light"]) .portal-case h2{color:var(--ink)}
  :root:not([data-theme="light"]) .portal-fine,:root:not([data-theme="light"]) .portal-note,:root:not([data-theme="light"]) .r-body em,:root:not([data-theme="light"]) .m-who,:root:not([data-theme="light"]) .portal-appts em,:root:not([data-theme="light"]) .portal-pay em,:root:not([data-theme="light"]) .portal-appts small,:root:not([data-theme="light"]) .portal-ref{color:var(--muted)}
  :root:not([data-theme="light"]) .r-body small{color:#9db0be}
  :root:not([data-theme="light"]) .portal-form input{background:#0f1c26;border-color:#55738a;color:var(--ink)}
  :root:not([data-theme="light"]) .portal-form label>span{color:#a9c0cf}
  :root:not([data-theme="light"]) .portal-list li.r-outstanding{background:#2b2114;border-color:#7a5c25}
  :root:not([data-theme="light"]) .portal-msgs li.from-you,:root:not([data-theme="light"]) .portal-hint{background:#16293a;color:var(--muted)}
  :root:not([data-theme="light"]) .portal-bar{background:#25384a}
  :root:not([data-theme="light"]) .portal-note a{color:#eeb254}
  :root:not([data-theme="light"]) .portal-appts span,:root:not([data-theme="light"]) .portal-pay span,:root:not([data-theme="light"]) .portal-casenote,:root:not([data-theme="light"]) .m-body{color:var(--muted)}
  :root:not([data-theme="light"]) .sign-in{border-color:#3d5668;color:var(--ink)}
  :root:not([data-theme="light"]) .sign-in:hover{background:#eeb254;border-color:#eeb254;color:#2b2114}
  :root:not([data-theme="light"]) .r-file span{border-color:#55738a;color:var(--ink)}
  :root:not([data-theme="light"]) .r-file:hover span{background:#eeb254;border-color:#eeb254;color:#2b2114}
  :root:not([data-theme="light"]) .r-doc a{color:#eeb254}
  :root:not([data-theme="light"]) .r-doc i,:root:not([data-theme="light"]) .portal-docs span{color:var(--muted)}
  :root:not([data-theme="light"]) .r-remove{color:#e8917a}
  :root:not([data-theme="light"]) .portal-flash.ok{background:#12332a;color:#7fd6ab}
  :root:not([data-theme="light"]) .portal-flash.bad{background:#33201c;color:#e8917a}
  :root:not([data-theme="light"]) .portal-docs li{background:var(--white);border-color:var(--edge)}
  :root:not([data-theme="light"]) .portal-docs a{color:var(--ink)}
  :root:not([data-theme="light"]) .t-dot{background:var(--white);border-color:#3d5668}
  :root:not([data-theme="light"]) .t-done .t-dot{background:#2f9e7a;border-color:#2f9e7a}
  :root:not([data-theme="light"]) .t-now .t-dot{background:var(--white);border-color:#7fd6ab}
  :root:not([data-theme="light"]) .t-now .t-dot::after{background:#7fd6ab}
  :root:not([data-theme="light"]) .track li::before{background:#31465a}
  :root:not([data-theme="light"]) .t-label{color:var(--muted)}
  :root:not([data-theme="light"]) .t-now .t-label{color:var(--ink)}
  :root:not([data-theme="light"]) .t-done .t-label{color:#7fd6ab}
  :root:not([data-theme="light"]) .track-flag{background:#33201c;color:#e8917a}
  :root:not([data-theme="light"]) .s-hold{background:#2b2820;color:#d8cfb5}
  :root:not([data-theme="light"]) .cases{background:#12202b}
  :root:not([data-theme="light"]) .case{background:var(--white);border-color:var(--edge)}
  :root:not([data-theme="light"]) .case-head,:root:not([data-theme="light"]) .case dd.case-result{color:var(--ink)}
  :root:not([data-theme="light"]) .case dd{color:var(--muted)}
  :root:not([data-theme="light"]) .case dt{color:#8fa3b2}
  :root:not([data-theme="light"]) .case dt.case-result{color:#7fd6ab}
  :root:not([data-theme="light"]) .case-link{color:#eeb254}
  :root:not([data-theme="light"]) .hub-finder{background:#12202b;border-color:var(--edge)}
  :root:not([data-theme="light"]) .hub-group h2,:root:not([data-theme="light"]) .hub-route h3,:root:not([data-theme="light"]) .hub-caution h2{color:var(--ink)}
  :root:not([data-theme="light"]) .hub-note,:root:not([data-theme="light"]) .hub-route p:last-child{color:var(--muted)}
  :root:not([data-theme="light"]) .hub-route{background:var(--white);border-color:var(--edge)}
  :root:not([data-theme="light"]) .hub-meta{color:#eeb254}
  :root:not([data-theme="light"]) .hub-caution{background:#2b2114;border-color:#7a5c25}
  :root:not([data-theme="light"]) .hub-cta{background:#16293a}
  :root:not([data-theme="light"]) #articles.tinted .eyebrow{color:#eeb254}                     /* beaten by an ID selector */
  :root:not([data-theme="light"]) .pf-q legend b{background:#172a3a;color:#eef4f8}             /* the numbered step bubbles */
  :root:not([data-theme="light"]) .calc-reform{background:#16242f;border-color:#2f4a5e}        /* was a hard-coded white box */
  :root:not([data-theme="light"]) .calc-reform h2,:root:not([data-theme="light"]) .calc-reform b{color:#e7eef4}
  :root:not([data-theme="light"]) .calc-reform .reform-diff span,:root:not([data-theme="light"]) .calc-sub{color:#9db0be}
  :root:not([data-theme="light"]) .cl-flag{background:#3a2c12;color:#f0c775}                   /* amber pill, 2.8:1 in both themes */
  :root:not([data-theme="light"]) .guide-standfirst{color:#9db0be}
  :root:not([data-theme="light"]) .consent a,:root:not([data-theme="light"]) .quote-form a{color:#eeb254}
  :root:not([data-theme="light"]) .brand span,:root:not([data-theme="light"]) .lang a.active,:root:not([data-theme="light"]) .guide-cta,:root:not([data-theme="light"]) .calc-results,:root:not([data-theme="light"]) .pf-opt input:checked + span,:root:not([data-theme="light"]) .cl-tab.is-on{background:#172a3a;border-color:#172a3a}
  :root:not([data-theme="light"]) .lang a.active,:root:not([data-theme="light"]) .guide-cta,:root:not([data-theme="light"]) .guide-cta h2,:root:not([data-theme="light"]) .guide-cta p,:root:not([data-theme="light"]) .pf-opt input:checked + span,:root:not([data-theme="light"]) .cl-tab.is-on{color:#eef4f8}
  :root:not([data-theme="light"]) .brand span{color:#eeb254}
  :root:not([data-theme="light"]) .eyebrow,:root:not([data-theme="light"]) .section-intro .eyebrow,:root:not([data-theme="light"]) #services .eyebrow{color:#eeb254}
  :root:not([data-theme="light"]) .section-intro > p:last-child,:root:not([data-theme="light"]) .choose-copy p:last-child,:root:not([data-theme="light"]) .about-copy > p:not(.eyebrow){color:var(--muted)}
  :root:not([data-theme="light"]) .trust-row{color:#dbe7ef}
  :root:not([data-theme="light"]) .stats-grid > div,:root:not([data-theme="light"]) .stats-grid > div:first-child{background:var(--white);border-color:#24384a}
  :root:not([data-theme="light"]) .stats-grid b{color:var(--ink)}
  :root:not([data-theme="light"]) .stats-grid span{color:var(--muted)}
  :root:not([data-theme="light"]) /* The calculator leans on --navy for label text,:root:not([data-theme="light"]) which is a background colour everywhere else. Put those back to something readable. */ .calc-field,:root:not([data-theme="light"]) .calc-explain h2,:root:not([data-theme="light"]) .calc-detail h2,:root:not([data-theme="light"]) .calc-reform h2,:root:not([data-theme="light"]) .calc-rates tr.calc-total td,:root:not([data-theme="light"]) .calc-rates td:last-child,:root:not([data-theme="light"]) .calc-amount select,:root:not([data-theme="light"]) .calc-headline{color:var(--ink)}
  :root:not([data-theme="light"]) .calc-check,:root:not([data-theme="light"]) .calc-sub,:root:not([data-theme="light"]) .calc-disclaimer,:root:not([data-theme="light"]) .calc-note-info{color:var(--muted)}
  :root:not([data-theme="light"]) .calc-group{border-color:var(--edge)}
  :root:not([data-theme="light"]) .calc-results{background:#12303e;color:#eaf3f8}
  :root:not([data-theme="light"]) .calc-results .calc-table th{color:#bcd3de;background:transparent}
  :root:not([data-theme="light"]) .calc-results .calc-table td{color:#eaf3f8}
  :root:not([data-theme="light"]) .calc-stats b,:root:not([data-theme="light"]) .calc-stats > div > span:first-child{color:var(--gd)}
  :root:not([data-theme="light"]) .calc-rates th{color:var(--ink)}
  :root:not([data-theme="light"]) .calc-facts li{background:var(--white);border-color:var(--edge);color:var(--ink)}
  :root:not([data-theme="light"]) footer{background:#081620}
  :root:not([data-theme="light"]) .cookie-note{background:#16242f;color:var(--ink);border:1px solid var(--edge)}
  :root:not([data-theme="light"]) .draft-flag{background:#2b2110;border-color:#4a3a17;color:#f0c37a}
}

:root[data-theme="dark"]{--page:#0d1a24;          /* the page itself */
    --white:#16242f;         /* what used to be a white card */
    --cream:#0d1a24;
    --mist:#12202b;
    --ink:#e7eef4;           /* body text */
    --muted:#9db0be;
    --edge:#25384a;          /* borders */
    --line:#25384a;
    --blue:#16293a;          /* the pale blue panels */
    --mint:#122c26;
    --peach:#2b2114;
    --cream2:#1e1913;      /* The warm cream sections — about, articles, contact.
                              Missed when the dark layer was written, so all three kept
                              a near-white background while their text went near-white
                              with everything else, and the headings vanished. */
    --nv:#dce8f1;            /* was the dark navy used for headings */
    --nv-soft:#8fb0c6;
    --gold:#eeb254;
    --gd:#eeb254;
    --gd-deep:#e3a951;
    --shadow:0 4px 16px #00000059;
    --shadow-lg:0 12px 30px #00000073;}
  :root[data-theme="dark"] body{background:var(--page);color:var(--ink)}
  :root[data-theme="dark"] /* Surfaces that were written as literal white */ .header,:root[data-theme="dark"] .service-card,:root[data-theme="dark"] .guide-item,:root[data-theme="dark"] .quote-form,:root[data-theme="dark"] .calc-card,:root[data-theme="dark"] .testimonial,:root[data-theme="dark"] .faq,:root[data-theme="dark"] .step,:root[data-theme="dark"] .reasons > div,:root[data-theme="dark"] .lang,:root[data-theme="dark"] .about-tags span,:root[data-theme="dark"] .trust-row span,:root[data-theme="dark"] .nav.open nav,:root[data-theme="dark"] .pf-route,:root[data-theme="dark"] .cl-out,:root[data-theme="dark"] .cl-item,:root[data-theme="dark"] .cl-tab,:root[data-theme="dark"] .pf-reset,:root[data-theme="dark"] .cl-print,:root[data-theme="dark"] .search-big input,:root[data-theme="dark"] .site-search,:root[data-theme="dark"] .suggest,:root[data-theme="dark"] .photo-placeholder{background:var(--white);border-color:var(--edge);color:var(--ink)}
  :root[data-theme="dark"] /* Keep the Larnaca photograph — just deepen the wash over it,:root[data-theme="dark"] so the headline still lands on an image rather than a flat panel. */ .hero-shade{background:linear-gradient(90deg,#02121ceb 5%,#04161fd6 54%,#04151ecc 100%)}
  :root[data-theme="dark"] .about,:root[data-theme="dark"] .testimonials,:root[data-theme="dark"] .contact,:root[data-theme="dark"] #faq.tinted,:root[data-theme="dark"] .simple-page,:root[data-theme="dark"] .policy{background:var(--page)}
  :root[data-theme="dark"] #articles.tinted,:root[data-theme="dark"] main > .section:nth-of-type(6){background:var(--mist)}
  :root[data-theme="dark"] /* Sections that were already dark stay dark,:root[data-theme="dark"] just a shade deeper */ .tinted{background:#0a2028}
  :root[data-theme="dark"] .stats-grid{background:var(--white)}
  :root[data-theme="dark"] .step{background:#12303e;border-color:#2b4a5c}
  :root[data-theme="dark"] .step p{color:#c2d4de}
  :root[data-theme="dark"] /* Headings and links that leaned on the navy token */ h1,:root[data-theme="dark"] h2,:root[data-theme="dark"] h3,:root[data-theme="dark"] h4,:root[data-theme="dark"] .brand strong,:root[data-theme="dark"] .section-intro h1,:root[data-theme="dark"] .section-intro h2,:root[data-theme="dark"] .choose h2,:root[data-theme="dark"] .about h2,:root[data-theme="dark"] .guide h1,:root[data-theme="dark"] .guide-body h2,:root[data-theme="dark"] .guide-body h3,:root[data-theme="dark"] .guide-body h4,:root[data-theme="dark"] .errorpage h1,:root[data-theme="dark"] .policy h1,:root[data-theme="dark"] .policy h2,:root[data-theme="dark"] .calc-headline,:root[data-theme="dark"] .search-page h1,:root[data-theme="dark"] .pf-route h3,:root[data-theme="dark"] .cl-name{color:var(--ink)}
  :root[data-theme="dark"] .crumbs a,:root[data-theme="dark"] .guide-body a,:root[data-theme="dark"] .faq button{color:var(--gd)}
  :root[data-theme="dark"] .guide-body{color:#c3d3de}
  :root[data-theme="dark"] .guide-body strong,:root[data-theme="dark"] .guide-body b{color:var(--ink)}
  :root[data-theme="dark"] .guide-body blockquote,:root[data-theme="dark"] .guide-sources,:root[data-theme="dark"] .guide-meta,:root[data-theme="dark"] .crumbs{color:var(--muted)}
  :root[data-theme="dark"] .nav nav a{color:#c6d6e2}
  :root[data-theme="dark"] .brand small{color:var(--muted)}
  :root[data-theme="dark"] .nav nav a:hover,:root[data-theme="dark"] .text-button:hover{color:var(--gd)}
  :root[data-theme="dark"] .guide-body a,:root[data-theme="dark"] .policy a{color:var(--gd)}
  :root[data-theme="dark"] /* Form fields */ .quote-form input,:root[data-theme="dark"] .quote-form select,:root[data-theme="dark"] .quote-form textarea,:root[data-theme="dark"] .calc-field input,:root[data-theme="dark"] .calc-field select,:root[data-theme="dark"] .calc-amount select{background:#101d27;border-color:var(--edge);color:var(--ink)}
  :root[data-theme="dark"] .quote-form label,:root[data-theme="dark"] .form-note{color:var(--muted)}
  :root[data-theme="dark"] ::placeholder{color:#7c8fa0}
  :root[data-theme="dark"] /* Buttons keep the gold,:root[data-theme="dark"] and the navy button needs to lift off the page */ .button{background:#16405a;border-color:#1d5273;color:#eef5fa}
  :root[data-theme="dark"] .button.small,:root[data-theme="dark"] .talk,:root[data-theme="dark"] .contact .button,:root[data-theme="dark"] .quote-form .button,:root[data-theme="dark"] .cl-tab.is-on{background:var(--gd);border-color:var(--gd);color:#221803}
  :root[data-theme="dark"] .pf-opt span{background:#101d27;border-color:var(--edge);color:var(--ink)}
  :root[data-theme="dark"] .pf-opt input:checked + span{background:var(--gd);border-color:var(--gd);color:#221803}
  :root[data-theme="dark"] /* Small print,:root[data-theme="dark"] notes and the flags in the checklists */ .pf-hint,:root[data-theme="dark"] .cl-blurb,:root[data-theme="dark"] .cl-note,:root[data-theme="dark"] .cl-ticked,:root[data-theme="dark"] .pf-disclaimer,:root[data-theme="dark"] .updated,:root[data-theme="dark"] .service-card p,:root[data-theme="dark"] .guide-item p,:root[data-theme="dark"] .testimonial blockquote{color:var(--muted)}
  :root[data-theme="dark"] .cl-yes{background:#3b2b10;color:#f0c37a}
  :root[data-theme="dark"] .cl-maybe{background:#14293a;color:#9cc4e2}
  :root[data-theme="dark"] .cl-no{background:#16281d;color:#9dc7ab}
  :root[data-theme="dark"] .cl-item.is-done{background:#122019}
  :root[data-theme="dark"] .pf-none,:root[data-theme="dark"] .cl-traps,:root[data-theme="dark"] .biometric-note{background:#1a1508;border-color:#3a2f14}
  :root[data-theme="dark"] /* Tables inside guides */ .guide-body table th{background:var(--mist);color:var(--ink)}
  :root[data-theme="dark"] .guide-body table td,:root[data-theme="dark"] .guide-body table th{border-color:var(--edge)}
  :root[data-theme="dark"] /* Icon chips were pale blue on white; on a dark page they read as holes. */ .service-icon,:root[data-theme="dark"] .stats-grid i,:root[data-theme="dark"] .reasons i{background:#17303f;color:#bfd6e6}
  :root[data-theme="dark"] .step span{background:var(--gd);color:#221803}

  /* --nv does double duty: it is the heading colour AND the fill of every navy
     surface. The dark layer flipped it light so headings would read, which
     silently turned eight solid navy panels into pale ones with white text on
     them — the brand badge, the active language pill, the article CTA, the
     calculator results, the finder's chosen answers and the checklist tabs.
     Those want a dark surface, not the heading colour. */

  /* Stragglers the first dark pass missed, each found by measuring contrast
     rather than by reading the cascade. */

  :root[data-theme="dark"] .calc-headline small{color:#b9d2dc}   /* 2.5:1 on the darkened results panel */
  :root[data-theme="dark"] .reform-grid .reform-diff{background:#12332a;border-color:#2c6a51}   /* mint panel, stayed pale */
  :root[data-theme="dark"] .reform-grid .reform-diff b,:root[data-theme="dark"] .reform-grid .reform-diff span{color:#7fd6ab}
  :root[data-theme="dark"] .reform-grid .reform-diff small{color:#a8cfbc}
  :root[data-theme="dark"] .cl-meta{color:#9db0be}
  :root[data-theme="dark"] .cl-meta b{color:#c3d3de}                                            /* was 2.77:1 */




  :root[data-theme="dark"] .start-form textarea,:root[data-theme="dark"] .start-form input[type=text],:root[data-theme="dark"] .start-form input[type=email],:root[data-theme="dark"] .start-form input:not([type]){background:#0f1c26;border-color:#55738a;color:var(--ink)}
  :root[data-theme="dark"] .start-form textarea::placeholder,:root[data-theme="dark"] .start-form input::placeholder{color:#7e93a3}
  :root[data-theme="dark"] .start-form textarea:hover,:root[data-theme="dark"] .start-form input:hover:not([type=checkbox]){border-color:#5d7d92}
  :root[data-theme="dark"] .start-form textarea:focus,:root[data-theme="dark"] .start-form input:focus:not([type=checkbox]){border-color:#eeb254;background:#132330;box-shadow:0 0 0 3px #eeb25433}
  :root[data-theme="dark"] .start-form label>span{color:#a9c0cf}
  :root[data-theme="dark"] .start-opt{background:var(--white);border-color:var(--edge)}
  :root[data-theme="dark"] .start-opt:has(input:checked){background:#16293a;border-color:#4d7a95}
  :root[data-theme="dark"] .start-needs legend,:root[data-theme="dark"] .pkg-head{color:var(--ink)}
  :root[data-theme="dark"] .start-form label>span,:root[data-theme="dark"] .pkg-who{color:#8fa3b2}
  :root[data-theme="dark"] .pkg{background:var(--white);border-color:var(--edge)}
  :root[data-theme="dark"] .pkg li{color:var(--muted)}
  :root[data-theme="dark"] .pkg-note{color:var(--muted)}
  :root[data-theme="dark"] .pkgs-home{background:#12202b}
  :root[data-theme="dark"] .pkg-note a{color:#eeb254}

  /* These are all colours darkened for light mode. On a dark ground they
     need to go the other way; --muted is the token for exactly this. */
  :root[data-theme="dark"] .guide-meta,:root[data-theme="dark"] .crumbs,:root[data-theme="dark"] .calc-rates th,:root[data-theme="dark"] .calc-facts b,:root[data-theme="dark"] .calc-group legend,:root[data-theme="dark"] .reform-grid span,:root[data-theme="dark"] .calc-rates tr.band-empty td,:root[data-theme="dark"] .cl-ticked,:root[data-theme="dark"] .brand small,:root[data-theme="dark"] .case dt,:root[data-theme="dark"] .stats-grid span,:root[data-theme="dark"] .pf-route dt,:root[data-theme="dark"] .cl-meta,:root[data-theme="dark"] .pf-head,:root[data-theme="dark"] .start-form label>span,:root[data-theme="dark"] .pkg-who,:root[data-theme="dark"] .biometric-note,:root[data-theme="dark"] .cl-note li,:root[data-theme="dark"] .lang a{color:var(--muted)}
  :root[data-theme="dark"] .case dt.case-result{color:#7fd6ab}
  :root[data-theme="dark"] .verified-mark{background:#2f9e7a;color:#08121a}
  :root[data-theme="dark"] .guide-pillar,:root[data-theme="dark"] .calc-card .guide-pillar{color:#eeb254}
  :root[data-theme="dark"] .cl-traps li{color:var(--muted)}
  :root[data-theme="dark"] .lang a,:root[data-theme="dark"] .lang button{color:#c6d6e2}

  :root[data-theme="dark"] .portal-card,:root[data-theme="dark"] .portal-list li,:root[data-theme="dark"] .portal-msgs li,:root[data-theme="dark"] .portal-appts li,:root[data-theme="dark"] .portal-pay li,:root[data-theme="dark"] .portal-case{background:var(--white);border-color:var(--edge)}
  :root[data-theme="dark"] .portal-head h1,:root[data-theme="dark"] .portal-block h2,:root[data-theme="dark"] .r-body b,:root[data-theme="dark"] .portal-appts b,:root[data-theme="dark"] .portal-pay b,:root[data-theme="dark"] .portal-case h2{color:var(--ink)}
  :root[data-theme="dark"] .portal-fine,:root[data-theme="dark"] .portal-note,:root[data-theme="dark"] .r-body em,:root[data-theme="dark"] .m-who,:root[data-theme="dark"] .portal-appts em,:root[data-theme="dark"] .portal-pay em,:root[data-theme="dark"] .portal-appts small,:root[data-theme="dark"] .portal-ref{color:var(--muted)}
  :root[data-theme="dark"] .r-body small{color:#9db0be}
  :root[data-theme="dark"] .portal-form input{background:#0f1c26;border-color:#55738a;color:var(--ink)}
  :root[data-theme="dark"] .portal-form label>span{color:#a9c0cf}
  :root[data-theme="dark"] .portal-list li.r-outstanding{background:#2b2114;border-color:#7a5c25}
  :root[data-theme="dark"] .portal-msgs li.from-you,:root[data-theme="dark"] .portal-hint{background:#16293a;color:var(--muted)}
  :root[data-theme="dark"] .portal-bar{background:#25384a}
  :root[data-theme="dark"] .portal-note a{color:#eeb254}
  :root[data-theme="dark"] .portal-appts span,:root[data-theme="dark"] .portal-pay span,:root[data-theme="dark"] .portal-casenote,:root[data-theme="dark"] .m-body{color:var(--muted)}
  :root[data-theme="dark"] .sign-in{border-color:#3d5668;color:var(--ink)}
  :root[data-theme="dark"] .sign-in:hover{background:#eeb254;border-color:#eeb254;color:#2b2114}
  :root[data-theme="dark"] .r-file span{border-color:#55738a;color:var(--ink)}
  :root[data-theme="dark"] .r-file:hover span{background:#eeb254;border-color:#eeb254;color:#2b2114}
  :root[data-theme="dark"] .r-doc a{color:#eeb254}
  :root[data-theme="dark"] .r-doc i,:root[data-theme="dark"] .portal-docs span{color:var(--muted)}
  :root[data-theme="dark"] .r-remove{color:#e8917a}
  :root[data-theme="dark"] .portal-flash.ok{background:#12332a;color:#7fd6ab}
  :root[data-theme="dark"] .portal-flash.bad{background:#33201c;color:#e8917a}
  :root[data-theme="dark"] .portal-docs li{background:var(--white);border-color:var(--edge)}
  :root[data-theme="dark"] .portal-docs a{color:var(--ink)}
  :root[data-theme="dark"] .t-dot{background:var(--white);border-color:#3d5668}
  :root[data-theme="dark"] .t-done .t-dot{background:#2f9e7a;border-color:#2f9e7a}
  :root[data-theme="dark"] .t-now .t-dot{background:var(--white);border-color:#7fd6ab}
  :root[data-theme="dark"] .t-now .t-dot::after{background:#7fd6ab}
  :root[data-theme="dark"] .track li::before{background:#31465a}
  :root[data-theme="dark"] .t-label{color:var(--muted)}
  :root[data-theme="dark"] .t-now .t-label{color:var(--ink)}
  :root[data-theme="dark"] .t-done .t-label{color:#7fd6ab}
  :root[data-theme="dark"] .track-flag{background:#33201c;color:#e8917a}
  :root[data-theme="dark"] .s-hold{background:#2b2820;color:#d8cfb5}
  :root[data-theme="dark"] .cases{background:#12202b}
  :root[data-theme="dark"] .case{background:var(--white);border-color:var(--edge)}
  :root[data-theme="dark"] .case-head,:root[data-theme="dark"] .case dd.case-result{color:var(--ink)}
  :root[data-theme="dark"] .case dd{color:var(--muted)}
  :root[data-theme="dark"] .case dt{color:#8fa3b2}
  :root[data-theme="dark"] .case dt.case-result{color:#7fd6ab}
  :root[data-theme="dark"] .case-link{color:#eeb254}
  :root[data-theme="dark"] .hub-finder{background:#12202b;border-color:var(--edge)}
  :root[data-theme="dark"] .hub-group h2,:root[data-theme="dark"] .hub-route h3,:root[data-theme="dark"] .hub-caution h2{color:var(--ink)}
  :root[data-theme="dark"] .hub-note,:root[data-theme="dark"] .hub-route p:last-child{color:var(--muted)}
  :root[data-theme="dark"] .hub-route{background:var(--white);border-color:var(--edge)}
  :root[data-theme="dark"] .hub-meta{color:#eeb254}
  :root[data-theme="dark"] .hub-caution{background:#2b2114;border-color:#7a5c25}
  :root[data-theme="dark"] .hub-cta{background:#16293a}
  :root[data-theme="dark"] #articles.tinted .eyebrow{color:#eeb254}                     /* beaten by an ID selector */
  :root[data-theme="dark"] .pf-q legend b{background:#172a3a;color:#eef4f8}             /* the numbered step bubbles */
  :root[data-theme="dark"] .calc-reform{background:#16242f;border-color:#2f4a5e}        /* was a hard-coded white box */
  :root[data-theme="dark"] .calc-reform h2,:root[data-theme="dark"] .calc-reform b{color:#e7eef4}
  :root[data-theme="dark"] .calc-reform .reform-diff span,:root[data-theme="dark"] .calc-sub{color:#9db0be}
  :root[data-theme="dark"] .cl-flag{background:#3a2c12;color:#f0c775}                   /* amber pill, 2.8:1 in both themes */
  :root[data-theme="dark"] .guide-standfirst{color:#9db0be}
  :root[data-theme="dark"] .consent a,:root[data-theme="dark"] .quote-form a{color:#eeb254}
  :root[data-theme="dark"] .brand span,:root[data-theme="dark"] .lang a.active,:root[data-theme="dark"] .guide-cta,:root[data-theme="dark"] .calc-results,:root[data-theme="dark"] .pf-opt input:checked + span,:root[data-theme="dark"] .cl-tab.is-on{background:#172a3a;border-color:#172a3a}
  :root[data-theme="dark"] .lang a.active,:root[data-theme="dark"] .guide-cta,:root[data-theme="dark"] .guide-cta h2,:root[data-theme="dark"] .guide-cta p,:root[data-theme="dark"] .pf-opt input:checked + span,:root[data-theme="dark"] .cl-tab.is-on{color:#eef4f8}
  :root[data-theme="dark"] .brand span{color:#eeb254}
  :root[data-theme="dark"] .eyebrow,:root[data-theme="dark"] .section-intro .eyebrow,:root[data-theme="dark"] #services .eyebrow{color:#eeb254}
  :root[data-theme="dark"] .section-intro > p:last-child,:root[data-theme="dark"] .choose-copy p:last-child,:root[data-theme="dark"] .about-copy > p:not(.eyebrow){color:var(--muted)}
  :root[data-theme="dark"] .trust-row{color:#dbe7ef}
  :root[data-theme="dark"] .stats-grid > div,:root[data-theme="dark"] .stats-grid > div:first-child{background:var(--white);border-color:#24384a}
  :root[data-theme="dark"] .stats-grid b{color:var(--ink)}
  :root[data-theme="dark"] .stats-grid span{color:var(--muted)}
  :root[data-theme="dark"] /* The calculator leans on --navy for label text,:root[data-theme="dark"] which is a background colour everywhere else. Put those back to something readable. */ .calc-field,:root[data-theme="dark"] .calc-explain h2,:root[data-theme="dark"] .calc-detail h2,:root[data-theme="dark"] .calc-reform h2,:root[data-theme="dark"] .calc-rates tr.calc-total td,:root[data-theme="dark"] .calc-rates td:last-child,:root[data-theme="dark"] .calc-amount select,:root[data-theme="dark"] .calc-headline{color:var(--ink)}
  :root[data-theme="dark"] .calc-check,:root[data-theme="dark"] .calc-sub,:root[data-theme="dark"] .calc-disclaimer,:root[data-theme="dark"] .calc-note-info{color:var(--muted)}
  :root[data-theme="dark"] .calc-group{border-color:var(--edge)}
  :root[data-theme="dark"] .calc-results{background:#12303e;color:#eaf3f8}
  :root[data-theme="dark"] .calc-results .calc-table th{color:#bcd3de;background:transparent}
  :root[data-theme="dark"] .calc-results .calc-table td{color:#eaf3f8}
  :root[data-theme="dark"] .calc-stats b,:root[data-theme="dark"] .calc-stats > div > span:first-child{color:var(--gd)}
  :root[data-theme="dark"] .calc-rates th{color:var(--ink)}
  :root[data-theme="dark"] .calc-facts li{background:var(--white);border-color:var(--edge);color:var(--ink)}
  :root[data-theme="dark"] footer{background:#081620}
  :root[data-theme="dark"] .cookie-note{background:#16242f;color:var(--ink);border:1px solid var(--edge)}
  :root[data-theme="dark"] .draft-flag{background:#2b2110;border-color:#4a3a17;color:#f0c37a}


/* --- Light/dark toggle ---------------------------------------------------- */
.theme-toggle{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;
  border:1px solid var(--edge);border-radius:50%;background:transparent;
  color:var(--nv);cursor:pointer;padding:0;
  transition:border-color var(--quick) ease,color var(--quick) ease,transform var(--press) var(--ease-out)}
.theme-toggle svg{width:18px;height:18px;display:block}
.theme-toggle .t-moon{display:none}
.theme-toggle[aria-pressed="true"] .t-sun{display:none}
.theme-toggle[aria-pressed="true"] .t-moon{display:block}
@media (hover:hover) and (pointer:fine){.theme-toggle:hover{border-color:var(--nv);color:var(--gd-deep)}}
.theme-toggle:active{transform:scale(.94)}
.theme-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.policy-theme{margin:0 8px 30px 0;vertical-align:top}
@media (max-width:600px){.theme-toggle{width:32px;height:32px}.theme-toggle svg{width:16px;height:16px}}
/* On a phone the header row cannot hold another control — it pushed the
   language switcher off the screen. The toggle moves into the menu instead,
   where it can carry a label. */
.theme-toggle.in-menu{display:none}
@media (max-width:900px){
  .nav-actions .theme-toggle{display:none}
  .theme-toggle.in-menu{display:flex;align-items:center;gap:10px;width:auto;height:auto;
    border:0;border-radius:0;padding:6px 0;font:700 13px Manrope,Arial,sans-serif;
    color:inherit;justify-content:flex-start}
  .theme-toggle.in-menu svg{width:17px;height:17px}
}

/* --- Header on tablets and phones ----------------------------------------
   Telegram and the light/dark button belong on every screen, not just the
   desktop. The row only fits them if the wordmark gives way on small screens —
   the VP mark alone still identifies the site — and if the quote button steps
   aside on the widths where the full navigation is still showing. */

/* Tablet and narrow laptop: the navigation, search and three round buttons
   already fill the row, and the quote button pushed past the right edge at
   1024px. The hero carries the same call to action immediately below. */
/* The quote button needs real room once the full navigation, search and three
   round buttons are all present — and the Russian labels are the longest. */
@media (max-width:1400px){
}

/* Telegram and the theme button stay, at every width. */
@media (max-width:900px){
  .nav-actions .theme-toggle{display:grid}
  .theme-toggle.in-menu{display:none}
}
@media (max-width:640px){
  .nav-actions .tg-link{display:grid}
}

/* Below 600px the wordmark is what gives way, so both buttons can stay. */
@media (max-width:600px){
  .brand strong{display:none}
  .brand span{width:36px;height:36px;font-size:18px}
  .nav-actions{gap:6px}
  .nav{gap:8px}
}
@media (max-width:360px){
  .nav-actions{gap:5px}
  .lang a,.lang button{padding:5px 4px;font-size:8px}
}

/* ========================================================================
   Commercial landing pages — one per permit, at their own root URLs.
   Ordered the way a buyer asks: who, requirements, documents, cost,
   procedure, timeline, mistakes, how we help.
   ===================================================================== */
.lp{max-width:760px;margin:0 auto}
.lp-lead{font-size:17px;line-height:1.65}
.lp-block{margin:0 0 30px}
.lp-block h2{font:700 20px Manrope,Arial,sans-serif;color:var(--navy);margin:0 0 10px}
.lp-list{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.lp-list li{position:relative;padding-left:22px;line-height:1.6}
.lp-list li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;
  border-radius:50%;background:var(--gold)}
.lp-docs li::before{border-radius:2px}
.lp-steps{margin:0;padding-left:22px;display:grid;gap:9px;line-height:1.6}
.lp-steps li{padding-left:4px}
.lp-steps li::marker{color:var(--gold);font-weight:800}
.lp-cost{background:var(--mist);border-radius:14px;padding:18px 20px}
.lp-price{font:700 27px/1.2 "Playfair Display",Georgia,serif;color:var(--navy);margin:0 0 6px}
.lp-note{font-size:13.5px;color:#5b6c79;margin:0}
.lp-mistakes{margin:0}
.lp-mistakes dt{font-weight:700;color:var(--navy);margin-top:14px}
.lp-mistakes dt:first-child{margin-top:0}
.lp-mistakes dd{margin:3px 0 0;line-height:1.6;color:#42566a}
.lp-help{background:linear-gradient(160deg,#fffdf8,#fdf6e8);border:1px solid var(--gold);
  border-radius:14px;padding:20px 22px}
.lp-help h2{margin-bottom:8px}
.lp-help p{margin:0 0 14px;line-height:1.65}
@media (max-width:600px){
  .lp-price{font-size:23px}
  .lp-block h2{font-size:18px}
  .lp-cost,.lp-help{padding:15px 16px}
}

  :root:not([data-theme="light"]) .lp-block h2,:root:not([data-theme="light"]) .lp-price,:root:not([data-theme="light"]) .lp-mistakes dt{color:var(--ink)}
  :root:not([data-theme="light"]) .lp-cost{background:#16242e}
  :root:not([data-theme="light"]) .lp-note,:root:not([data-theme="light"]) .lp-mistakes dd{color:#a9bcc8}
  :root:not([data-theme="light"]) .lp-help{background:#1b2a33;border-color:#5d4a25}
  :root[data-theme="dark"] .lp-block h2,:root[data-theme="dark"] .lp-price,:root[data-theme="dark"] .lp-mistakes dt{color:var(--ink)}
  :root[data-theme="dark"] .lp-cost{background:#16242e}
  :root[data-theme="dark"] .lp-note,:root[data-theme="dark"] .lp-mistakes dd{color:#a9bcc8}
  :root[data-theme="dark"] .lp-help{background:#1b2a33;border-color:#5d4a25}

/* The line under the hero buttons. Most people arriving do not know the name of
   the thing they need, so the CTA asks for a situation rather than a service. */
.hero-note{color:#e4eef3;font-size:13.5px;line-height:1.6;max-width:520px;margin:16px 0 0}
@media (max-width:600px){.hero-note{font-size:12.5px;margin-top:14px}}

/* ========================================================================
   The immigration hub. Grouped by the passport the visitor holds, because
   someone arriving does not yet know they are a "third-country national".
   ===================================================================== */
.hub-finder{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  background:var(--mist);border:1px solid var(--line);border-radius:16px;padding:20px 24px;
  margin:0 0 44px}
.hub-finder p{margin:0;max-width:560px;font-size:14.5px;line-height:1.6}
.hub-group{margin:0 0 44px}
.hub-group h2{font:700 22px Manrope,Arial,sans-serif;color:var(--navy);margin:0 0 6px;
  letter-spacing:-.02em}
.hub-note{margin:0 0 18px;max-width:720px;color:#5b6c79;font-size:14px;line-height:1.65}
.hub-routes{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px;
  align-items:stretch}
.hub-route{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:20px;box-shadow:0 8px 20px #00334c0d;
  transition:transform var(--settle) var(--ease-out),box-shadow var(--settle) var(--ease-out),
             border-color var(--quick) ease}
@media (hover:hover) and (pointer:fine){
  .hub-route:hover{transform:translateY(-3px);box-shadow:0 14px 26px #00334c1a;border-color:var(--gold)}
}
.hub-route h3{font:700 16px Manrope,Arial,sans-serif;color:var(--navy);margin:0 0 6px;line-height:1.3}
.hub-meta{margin:0 0 10px;font-size:11.5px;font-weight:800;letter-spacing:.03em;color:#96601a;
  font-variant-numeric:tabular-nums}
.hub-route p:last-child{margin:0;font-size:13px;line-height:1.6;color:#5b6c79}
.hub-caution{background:#fdf6e8;border:1px solid var(--gold);border-radius:16px;padding:22px 24px;
  margin:0 0 44px}
.hub-caution h2{font:700 18px Manrope,Arial,sans-serif;color:var(--navy);margin:0 0 8px}
.hub-caution p{margin:0 0 12px;line-height:1.7;font-size:14px}
.hub-cta{background:var(--navy);color:#fff;border-radius:18px;padding:38px 34px;margin:0 0 44px;
  text-align:center}
.hub-cta h2{font-family:"Playfair Display",Georgia,serif;color:#fff;
  font-size:clamp(25px,3.4vw,36px);margin:0 0 12px;letter-spacing:-.02em}
.hub-cta p{max-width:620px;margin:0 auto 22px;line-height:1.75;color:#d6e6ed;font-size:15px}
.hub-cta .button{background:var(--gold);border-color:var(--gold);color:#3a2a0c;
  border-radius:26px;padding:15px 30px;font-size:14px}
@media (max-width:600px){
  .hub-finder{padding:17px 18px}
  .hub-cta{padding:28px 20px}
  .hub-group h2{font-size:19px}
}

/* A fifth nav item (Immigration) left the header with no slack between the
   point the menu collapses (900px) and the point the row has room again.
   Tighten the gaps through that band rather than hide the nav on a tablet. */
@media (min-width:901px) and (max-width:1150px){
  .nav{gap:14px}
  .nav nav{gap:10px;font-size:11.5px}
  .nav-actions{gap:9px}
  .site-search input{width:92px}
  .site-search input:focus{width:120px}
  .lang a,.lang button{padding:4px 6px;font-size:9px}
}
/* Greek runs longest, and the quote button reappears above 1400px. */
/* The header quote button became a sign-in link. It is narrower, so it can
   stay much further down than the button could — it only gives way when the
   nav collapses into the menu. */
/* Through the band where the nav is still a row but the row is full, the
   link keeps its icon and drops its label. */
@media (max-width:1150px){.nav-actions .sign-in span{display:none}
  .nav-actions .sign-in{padding:8px 9px}}
@media (max-width:600px){.nav-actions .sign-in{display:none}}

/* ========================================================================
   Cases we have handled. Only cases Veronica has supplied — see cases.py.
   ===================================================================== */
.cases{background:var(--mist)}
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:18px;
  max-width:940px;margin:0 auto}
.case{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 28px;
  box-shadow:0 8px 22px #00334c0d;display:flex;flex-direction:column}
.case-head{display:flex;align-items:center;gap:10px;margin:0 0 16px;
  font:700 17px Manrope,Arial,sans-serif;color:var(--navy);line-height:1.3}
.case-flag{font-size:22px;line-height:1}
.case dl{margin:0 0 16px;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;align-items:baseline}
.case dt{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:#5f6b77;white-space:nowrap}
.case dd{margin:0;font-size:13.5px;line-height:1.55;color:#42566a}
.case dt.case-result{color:#1f7a55}
.case dd.case-result{font-weight:700;color:var(--navy)}
.case-link{margin-top:auto;font-weight:800;font-size:12.5px;color:#a1691b}
.case-link span{margin-left:4px;display:inline-block;transition:transform var(--settle) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.case-link:hover span{transform:translateX(3px)}}
@media (max-width:600px){
  .case{padding:20px 18px}
  .case dl{grid-template-columns:1fr;gap:2px}
  .case dt{margin-top:8px}
}

/* ========================================================================
   Start here — a tick-list for people who do not know what the procedure
   is called — and the packages that follow it.
   ===================================================================== */
.start-form{display:block;max-width:720px;margin:0 auto 54px}
.start-form label.wide:not(.consent),.start-form label:not(.start-opt):not(.consent){display:block;margin:0 0 14px}
.start-form label>span{display:block;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;color:#5f7284;margin-bottom:5px}
/* A fieldset carries an implicit min-width:min-content, so it refuses to shrink
   below its longest option and pushes the page sideways on a phone. */
.start-needs{border:0;margin:0 0 22px;padding:0;min-width:0}
.start-grid,.start-opt{min-width:0}
/* The span must take the space left beside the checkbox. Without flex:1 it is
   sized from its content, and overflow-wrap:anywhere — which I had here — makes
   WebKit compute that content's minimum as a single character, so Safari broke
   every label one letter per line. break-word only breaks words that genuinely
   do not fit, and does not touch min-content sizing. */
.start-opt span{flex:1 1 auto;min-width:0;overflow-wrap:break-word}
.start-needs legend{padding:0;font:700 18px Manrope,Arial,sans-serif;color:var(--navy);
  margin-bottom:12px}
.start-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:8px}
.start-opt{display:flex;align-items:flex-start;gap:9px;border:1px solid var(--line);
  border-radius:11px;padding:11px 13px;cursor:pointer;background:#fff;font-size:13.5px;
  line-height:1.4;transition:border-color var(--quick) ease,background-color var(--quick) ease}
/* .quote-form input{width:100%} in the base form styles also catches these
   checkboxes. WebKit honours that on a checkbox and Chrome does not, so in
   Safari the box grew to the full column and squeezed the label text to zero
   width — every option rendered one letter per line. */
.start-opt input,.start-form input[type=checkbox]{width:auto;flex:0 0 auto}
.start-opt input{margin:1px 0 0;accent-color:var(--navy)}
.start-opt:has(input:checked){border-color:var(--navy);background:var(--mist)}
@media (hover:hover) and (pointer:fine){.start-opt:hover{border-color:var(--gold)}}
.start-form .consent{display:flex;gap:9px;align-items:flex-start;font-size:12px;margin:0 0 18px}
/* .form-note is pulled up 4px for the two-column grid on the homepage form.
   In this single-column one that lands it on top of the send button. */
.start-form .form-note{margin:12px 0 0}
/* A 1px #dbe6eb hairline on white is not readable as a field. Give them a
   tinted ground, a stronger edge and a focus ring that is obvious. */
.start-form textarea,.start-form input[type=text],.start-form input[type=email],.start-form input:not([type]){
  width:100%;border:2px solid #7095ac;padding:13px 14px;border-radius:10px;
  font:15px Manrope,Arial,sans-serif;background:#f7fafb;color:var(--ink);
  transition:border-color var(--quick) ease,box-shadow var(--quick) ease,background-color var(--quick) ease}
.start-form textarea::placeholder,.start-form input::placeholder{color:#8ea3b0}
.start-form textarea:hover,.start-form input:hover:not([type=checkbox]){border-color:#456d87}
.start-form textarea:focus,.start-form input:focus:not([type=checkbox]){
  outline:0;border-color:var(--navy);background:#fff;box-shadow:0 0 0 3px #0a526722}
.start-form textarea{min-height:120px;resize:vertical}
/* The field labels were the same pale grey as the borders. */
.start-form label>span{color:#4a5f70}

.pkgs{margin:0 0 40px}
/* Four across, or two, or one — never three with a straggler underneath.
   auto-fit was choosing 3: four 280px columns plus three 16px gaps come to
   1168px against a 1160px container, so the fourth card wrapped. */
.pkg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1080px){.pkg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.pkg-grid{grid-template-columns:minmax(0,1fr)}}
.pkg{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;
  box-shadow:0 8px 22px #00334c0d;display:flex;flex-direction:column}
.pkg-head{display:flex;align-items:center;gap:10px;margin:0 0 6px;
  font:700 17px Manrope,Arial,sans-serif;color:var(--navy);line-height:1.3}
.pkg-flag{font-size:21px;line-height:1}
.pkg-who{margin:0 0 14px;font-size:13px;color:#5f7284;font-style:italic}
.pkg ul{margin:0;padding:0;list-style:none;display:grid;gap:7px;font-size:13.5px;line-height:1.5}
.pkg li{position:relative;padding-left:19px;color:#42566a}
.pkg li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--gold)}
.pkg-note{margin:18px 0 0;font-size:13px;color:#5b6c79;text-align:center}
@media (max-width:600px){.pkg{padding:19px 17px}.start-needs legend{font-size:16px}}

.pkgs-home{background:var(--mist)}
.pkgs-home .pkg-grid{max-width:1160px;margin:0 auto}
.pkg-note a{font-weight:800;color:#a1691b;white-space:nowrap}
.hero-note a{color:inherit;text-decoration:underline;text-decoration-color:#ffffff66;
  text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.hero-note a:hover{text-decoration-color:#fff}}

/* ========================================================================
   The client case portal. No documents are stored here — a checklist line
   records only that one was received.
   ===================================================================== */
.portal{max-width:760px;margin:0 auto}
.portal-card{max-width:520px;margin:0 auto 26px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:28px;box-shadow:0 8px 22px #00334c0d}
.portal-form label{display:block;margin:0 0 16px}
.portal-form label>span{display:block;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;color:#4a5f70;margin-bottom:6px}
.portal-form input{width:100%;border:2px solid #7095ac;padding:13px 14px;border-radius:10px;
  font:15px Manrope,Arial,sans-serif;background:#f7fafb;color:var(--ink)}
.portal-form input:focus{outline:0;border-color:var(--navy);background:#fff;
  box-shadow:0 0 0 3px #0a526722}
.portal-fine{font-size:12.5px;color:#5f7284;margin:12px 0 0;line-height:1.6}
.portal-sent{font:700 16px Manrope,Arial,sans-serif;color:#1f7a55;margin:0}
.portal-warn{font:700 16px Manrope,Arial,sans-serif;color:#a8341c;margin:0 0 8px}
.portal-note{text-align:center;font-size:12.5px;color:#5f7284;margin:22px 0 0}
.portal-note a{font-weight:800;color:#96601a;margin-left:6px}

.portal-head{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:26px}
.portal-ref{font:800 11px/1 Manrope,Arial,sans-serif;letter-spacing:.14em;color:#5f7284;
  text-transform:uppercase;margin:0 0 8px}
.portal-head h1{font:800 30px/1.15 Manrope,Arial,sans-serif;color:var(--navy);margin:0 0 12px;
  letter-spacing:-.03em}
.portal-status{display:inline-block;font:800 12px Manrope,Arial,sans-serif;padding:6px 12px;
  border-radius:20px;margin:0}
.s-collecting,.s-reviewing{background:#fdf0d6;color:#7a5410}
.s-submitted,.s-waiting{background:#dbe9f6;color:#1b4a68}
.s-action{background:#fbe3dd;color:#8c2c16}
.s-done,.s-closed{background:#d9f0e4;color:#14603f}
.portal-casenote{margin:12px 0 0;line-height:1.65;color:#42566a}

.portal-block{margin:0 0 34px}
.portal-block h2{font:700 19px Manrope,Arial,sans-serif;color:var(--navy);margin:0 0 12px}
.portal-bar{height:8px;border-radius:6px;background:#e4edf2;overflow:hidden;margin:0 0 6px}
.portal-bar span{display:block;height:100%;background:#2f9e7a;border-radius:6px}
.portal-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.portal-list li{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;background:#fff}
.portal-list li.r-outstanding{border-color:#e6b98a;background:#fffaf2}
.portal-list li.r-not_needed{opacity:.62}
.r-mark{flex:0 0 auto;font-size:15px;line-height:1.5}
.r-body{display:grid;gap:2px;min-width:0}
.r-body b{font:700 14.5px Manrope,Arial,sans-serif;color:var(--navy)}
.r-body em{font-style:normal;font-size:13px;color:#5f7284;line-height:1.5}
.r-body small{font-size:11.5px;font-weight:700;color:#57707d;text-transform:uppercase;
  letter-spacing:.05em}
.portal-hint{margin:14px 0 0;font-size:13px;line-height:1.65;color:#42566a;
  background:var(--mist);border-radius:10px;padding:13px 15px}

.portal-msgs{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.portal-msgs li{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff}
.portal-msgs li.from-you{background:var(--mist)}
.m-who{margin:0 0 5px;font:800 11.5px Manrope,Arial,sans-serif;color:#5f7284;
  text-transform:uppercase;letter-spacing:.06em}
.m-body{margin:0;line-height:1.65}
.portal-appts,.portal-pay{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.portal-appts li,.portal-pay li{display:grid;gap:3px;border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;background:#fff}
.portal-appts b,.portal-pay b{font:700 14.5px Manrope,Arial,sans-serif;color:var(--navy)}
.portal-appts span,.portal-pay span{font-size:13.5px;color:#42566a}
.portal-appts em,.portal-pay em{font-style:normal;font-size:13px;color:#5f7284}
.portal-appts small{font-size:12.5px;color:#5f7284}
.portal-pay li.p-paid em{color:#14603f;font-weight:700}
.portal-cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:14px}
.portal-case{display:grid;gap:6px;border:1px solid var(--line);border-radius:14px;padding:20px;
  background:#fff;box-shadow:0 8px 20px #00334c0d}
.portal-case h2{font:700 17px Manrope,Arial,sans-serif;color:var(--navy);margin:0}
.portal-out{margin:0;font-size:12.5px;font-weight:700;color:#8c2c16}
@media (max-width:600px){.portal-card{padding:20px 18px}.portal-head h1{font-size:24px}}

.sign-in{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:22px;
  border:1.5px solid var(--line);color:var(--navy);font:800 11.5px Manrope,Arial,sans-serif;
  white-space:nowrap;transition:border-color var(--quick) ease,background-color var(--quick) ease,
  color var(--quick) ease}
.sign-in svg{width:15px;height:15px;display:block;flex:0 0 auto}
@media (hover:hover) and (pointer:fine){
  .sign-in:hover{border-color:var(--navy);background:var(--navy);color:#fff}
}
.sign-in:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:1150px){.sign-in{padding:7px 10px;font-size:10.5px}}

/* Upload controls, folded into the checklist so a client never has to work out
   which line a file belongs to. */
.r-upload{margin-top:8px}
.r-file{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.r-file input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.r-file span{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:20px;
  border:1.5px solid #7095ac;color:var(--navy);font:800 11.5px Manrope,Arial,sans-serif;
  transition:background-color var(--quick) ease,border-color var(--quick) ease,color var(--quick) ease}
.r-file span::before{content:"↑";font-size:13px;line-height:1}
@media (hover:hover) and (pointer:fine){
  .r-file:hover span{background:var(--navy);border-color:var(--navy);color:#fff}
}
.r-file input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}
.r-doc{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:6px;font-size:12.5px}
.r-doc a{font-weight:700;color:#8c6511;text-decoration:underline;text-underline-offset:2px}
.r-doc i{font-style:normal;color:#5f7284}
.r-doc form{display:inline}
.r-remove{border:0;background:none;padding:0;cursor:pointer;font:700 12px Manrope,Arial,sans-serif;
  color:#8c2c16;text-decoration:underline;text-underline-offset:2px}
.portal-flash{margin:0 0 14px;padding:11px 14px;border-radius:10px;font-size:13.5px;font-weight:700}
.portal-flash.ok{background:#d9f0e4;color:#14603f}
.portal-flash.bad{background:#fbe3dd;color:#8c2c16}
.portal-docs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.portal-docs li{display:grid;gap:2px;border:1px solid var(--line);border-radius:12px;
  padding:12px 15px;background:#fff}
.portal-docs a{font-weight:700;color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.portal-docs span{font-size:12.5px;color:#5f7284}

/* The case tracker. A client should be able to tell where their application is
   the way they can tell where a parcel is. */
.track{list-style:none;margin:22px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(5,1fr);gap:0;counter-reset:t}
.track li{position:relative;display:grid;justify-items:center;gap:8px;text-align:center;
  padding:0 4px}
.track li::before{content:"";position:absolute;top:11px;left:-50%;width:100%;height:2px;
  background:#d7e3ea}
.track li:first-child::before{display:none}
.track li.t-done::before,.track li.t-now::before{background:#2f9e7a}
.t-dot{position:relative;z-index:1;display:grid;place-items:center;width:24px;height:24px;
  border-radius:50%;background:#fff;border:2px solid #d7e3ea;font:800 12px Manrope,Arial,sans-serif;
  color:#fff}
.t-done .t-dot{background:#25805f;border-color:#25805f}
.t-now .t-dot{background:#fff;border-color:#25805f;box-shadow:0 0 0 4px #2f9e7a2e}
.t-now .t-dot::after{content:"";width:9px;height:9px;border-radius:50%;background:#25805f}
.t-label{font:700 11px Manrope,Arial,sans-serif;line-height:1.35;color:#5f7284;
  max-width:11ch}
.t-now .t-label{color:var(--navy)}
.t-done .t-label{color:#14603f}
.track-flag{margin:16px 0 0;padding:11px 14px;border-radius:10px;background:#fbe3dd;
  color:#8c2c16;font-size:13px;font-weight:700}
.s-hold{background:#e6e2d8;color:#4d4636}
@media (max-width:620px){
  .track{grid-template-columns:1fr;gap:2px;margin-top:18px}
  .track li{grid-template-columns:24px 1fr;justify-items:start;text-align:left;
    align-items:center;gap:11px;padding:5px 0}
  .track li::before{top:-6px;left:11px;width:2px;height:14px}
  .t-label{max-width:none;font-size:12.5px}
}