/* Sleem Legal Translation - Option 02 design */
:root{
  --teal:#3f6074; --teal-deep:#2c4a5b; --grey:#8f8b83; --grey-soft:#d9d5cb; --linen:#f4f1e9;
  --bg:var(--linen); --surface:#fbfaf6; --text:#26343d; --muted:#6a6f70; --line:#e0dcd0; --ghost:#e4e0d6;
  --serif:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --tint:#eef3f6;
  --sans:"Montserrat",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body.sl{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.7;font-weight:400;font-size:16px}
body.sl *{box-sizing:border-box}
body.sl a{color:inherit;text-decoration:none}
body.sl h1,body.sl h2,body.sl h3,body.sl h4{font-family:var(--serif);font-weight:400;color:var(--teal)}
.sl .wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* header */
.sl-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.sl-nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.sl-logo img{height:62px;width:auto;display:block}
.sl-menu{display:flex;align-items:center;gap:28px}
.sl-menu a{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.sl-menu a:hover{color:var(--teal)}
.sl-menu a.sl-btn{color:#fff;padding:10px 20px}
.sl-burger{display:none;background:none;border:1px solid var(--line);width:44px;height:44px;cursor:pointer;color:var(--teal);font-size:18px}
@media(max-width:860px){
  .sl-burger{display:block}
  .sl-menu{display:none;position:absolute;top:78px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 20px}
  .sl-menu.open{display:flex}
  .sl-menu a{padding:12px 0;width:100%}
  .sl-menu a.sl-btn{width:auto;margin-top:8px}
}

/* buttons */
.sl-btn{display:inline-block;padding:14px 30px;background:var(--teal);color:#fff;font:500 12px/1.4 var(--sans);letter-spacing:2px;text-transform:uppercase;border:1px solid var(--teal);cursor:pointer;border-radius:0}
.sl-btn:hover{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff}
.sl-btn.ghost{background:transparent;color:var(--teal)}
.sl-btn.ghost:hover{background:var(--teal);color:#fff}
.sl-btn.light{background:var(--linen);color:var(--teal-deep);border-color:var(--linen)}
.sl-btn.light:hover{background:#fff;color:var(--teal-deep)}

/* hero */
.sl-hero{position:relative;padding:90px 0 80px;overflow:hidden}
.sl-hero .wrap{position:relative;min-height:380px}
.sl-hero .copy{max-width:560px;position:relative;z-index:1}
.sl-mono{position:absolute;right:40px;top:50%;transform:translateY(-50%);width:300px;aspect-ratio:560/765;background:var(--ghost);-webkit-mask:url(../img/monogram.png) center/contain no-repeat;mask:url(../img/monogram.png) center/contain no-repeat;pointer-events:none}
.eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--grey)}
.sl-hero h1{font-size:clamp(36px,5.5vw,60px);line-height:1.15;margin:20px 0;max-width:680px}
.sl-hero p{max-width:500px;color:var(--muted)}
.sl-cta{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}

/* sections */
.sl-section{padding:88px 0}
.sl-alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sl h2.sl-h2{font-size:clamp(28px,3.6vw,38px);margin:12px 0}
.sl-lead{color:var(--muted);max-width:560px}
.sl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;margin-top:44px;background:var(--line);border:1px solid var(--line)}
.sl-card{background:var(--surface);padding:34px 28px;display:block}
.sl-card h3{font-size:20px;margin:0 0 10px}
.sl-card p{margin:0;color:var(--muted);font-size:14px}
a.sl-card:hover h3{text-decoration:underline}

/* visa panel */
.visa-panel{background:var(--teal-deep);color:#f4f1e9;padding:56px 48px}
.sl .visa-panel h2{color:#f4f1e9;max-width:700px}
.visa-panel .eyebrow{color:#a9c0cc}
.visa-panel .sl-lead{color:#cfdbe1}
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:36px 0}
.vcard{background:rgba(244,241,233,.07);border:1px solid rgba(244,241,233,.2);padding:30px}
.vcard .tag{font-family:var(--serif);font-size:30px;color:#a9c0cc}
.sl .vcard h3{font-size:22px;margin:8px 0 10px;color:#f4f1e9}
.vcard p{margin:0;color:#cfdbe1;font-size:14px}
.docs-title{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:#a9c0cc;margin-bottom:14px}
.docs{list-style:none;padding:0;margin:0 0 36px;display:flex;flex-wrap:wrap;gap:10px}
.docs li{border:1px solid rgba(244,241,233,.3);padding:7px 16px;font-size:13px}
.vsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:36px;font-size:14px}
.vsteps b{display:inline-flex;width:28px;height:28px;border-radius:50%;background:#f4f1e9;color:var(--teal-deep);align-items:center;justify-content:center;margin-right:10px;font-size:13px}

/* process / trust */
.sl-steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;margin-top:44px}
.sl-step::before{counter-increment:s;content:"0" counter(s);font-family:var(--serif);font-size:38px;color:var(--grey-soft);display:block;line-height:1}
.sl .sl-step h3{margin:12px 0 6px;font:600 14px var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--teal)}
.sl-step p{margin:0;color:var(--muted);font-size:14px}
.sl-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;margin-top:40px}
.sl-trust div{border-top:1px solid var(--grey);padding-top:16px}
.sl-trust strong{display:block;font-family:var(--serif);font-weight:400;font-size:19px;color:var(--teal)}
.sl-trust span{color:var(--muted);font-size:14px}
.sl-about-text{color:var(--muted);max-width:720px}

/* contact / quote */
.sl-contact{background:var(--teal-deep);color:#f4f1e9}
.sl .sl-contact h2{color:#f4f1e9}
.sl-contact .eyebrow{color:#a9c0cc}
.sl-contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start}
.sl-contact p{color:#cfdbe1;max-width:460px}
.sl-info{margin-top:28px;font-size:13px;letter-spacing:.5px;color:#a9c0cc;line-height:2}
.sl-info a:hover{color:#fff}
.sl-social{display:flex;gap:14px;margin-top:18px}
.sl-social a{width:38px;height:38px;border:1px solid rgba(244,241,233,.3);display:inline-flex;align-items:center;justify-content:center;color:#f4f1e9}
.sl-social a:hover{background:#f4f1e9;color:var(--teal-deep)}
.sl-form{background:var(--surface);color:var(--text);padding:36px}
.sl-form h3{font-size:22px;margin:0 0 20px}
.sl-form label{display:block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.sl-form input,.sl-form textarea{width:100%;padding:12px 14px;border:1px solid var(--line);background:#fff;font:400 15px var(--sans);color:var(--text);border-radius:0;margin-bottom:16px}
.sl-form input:focus,.sl-form textarea:focus{outline:2px solid var(--teal);outline-offset:-1px}
.sl-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sl-form .sl-btn{width:100%;padding:16px}
.sl-alert{padding:12px 16px;margin-bottom:18px;font-size:14px;border:1px solid}
.sl-alert.ok{background:#e9f3ec;border-color:#9cc5a8;color:#24543a}
.sl-alert.err{background:#fbeceb;border-color:#e0a7a3;color:#7a2a24}
@media(max-width:860px){.sl-contact-grid{grid-template-columns:1fr;gap:36px}.sl-form .row2{grid-template-columns:1fr;gap:0}}

/* inner page head */
.sl-pagehead{background:var(--surface);border-bottom:1px solid var(--line);padding:56px 0 44px}
.sl-pagehead h1{font-size:clamp(30px,4vw,44px);margin:10px 0 0}
.sl-crumbs{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--grey)}
.sl-crumbs a:hover{color:var(--teal)}
.sl-prose{max-width:760px;color:var(--text)}
.sl-prose img{max-width:100%;height:auto}

/* footer */
.sl-footer{border-top:1px solid var(--line);padding:30px 0;text-align:center;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--grey)}
.sl-footer a:hover{color:var(--teal)}

/* responsive */
@media(max-width:900px){.sl-mono{position:relative;right:auto;top:auto;transform:none;margin:48px 0 0;width:240px}.sl-hero .wrap{min-height:0}}
@media(max-width:640px){.visa-panel{padding:36px 22px}.sl-mono{width:200px}.sl-hero{padding:64px 0}.sl-section{padding:60px 0}.sl-form{padding:26px 20px}}

/* ---- Visa pages: map the old Bootstrap-blue look onto the palette ---- */
.sl .btn-primary,.sl .bg-primary{background-color:var(--teal)!important;border-color:var(--teal)!important;color:#fff}
.sl .btn-primary:hover{background-color:var(--teal-deep)!important;border-color:var(--teal-deep)!important}
.sl .btn-outline-primary{color:var(--teal);border-color:var(--teal)}
.sl .btn-outline-primary:hover{background:var(--teal);color:#fff}
.sl .text-primary{color:var(--teal)!important}
.sl .border-primary{border-color:var(--teal)!important}
.sl .form-control:focus,.sl .form-select:focus{border-color:var(--teal);box-shadow:0 0 0 .2rem rgba(63,96,116,.18)}
.sl .form-check-input:checked{background-color:var(--teal);border-color:var(--teal)}
.sl .card{border-radius:0!important}
.sl .shadow-sm,.sl .shadow{box-shadow:none!important}
.sl .rounded-pill,.sl .btn.rounded-pill{border-radius:0!important}
.sl .services__area{padding-top:56px;padding-bottom:72px}
.sl .btn-group.rounded-pill{border-radius:0!important}
[dir=rtl] .vsteps b{margin-right:0;margin-left:10px}

/* Bootstrap utility colours -> palette (so the visa pages match the concept) */
.sl .text-dark{color:var(--text)!important}
.sl .text-muted,.sl .text-secondary{color:var(--muted)!important}
.sl .bg-light,.sl .bg-white{background-color:var(--surface)!important}
.sl .card,.sl .form-control,.sl .form-select,.sl .list-group-item{background-color:var(--surface);color:var(--text);border-color:var(--line)}
.sl .form-control::placeholder{color:var(--muted)}
.sl .alert-info{background:var(--tint);border-color:var(--line);color:var(--text)}
.sl .btn-light{background:var(--surface);color:var(--teal);border-color:var(--line)}
.sl .nav-tabs .nav-link{color:var(--muted)}
.sl .nav-tabs .nav-link.active{background:var(--surface);color:var(--teal);border-color:var(--line) var(--line) var(--surface)}
.sl .services__area h1,.sl .services__area h2,.sl .services__area h3,.sl .services__area h4,.sl .services__area h5,.sl .services__area h6{color:var(--teal)}
.sl .text-white,.sl .text-white-50,.sl .btn-primary *{color:inherit}.sl .services__area :is(h1,h2,h3,h4,h5,h6):not(.text-white){color:var(--teal)!important;font-family:var(--serif);font-weight:400}
.sl .services__area .text-white{color:#f4f1e9!important}

/* button text colours must beat the generic "body.sl a" rule */
body.sl a.sl-btn,body.sl button.sl-btn{color:#fff}
body.sl a.sl-btn.ghost{color:var(--teal)}
body.sl a.sl-btn.ghost:hover{color:#fff}
body.sl a.sl-btn.light{color:var(--teal-deep)}
body.sl a.sl-btn:hover{color:#fff}
body.sl a.sl-btn.light:hover{color:var(--teal-deep)}

.sl-dev{display:block;margin-top:6px;letter-spacing:1px}
.sl-dev a{text-decoration:underline;text-underline-offset:3px}
.sl-form input,.sl-form textarea{background:var(--input-bg,#fff)}

/* ===== Dark theme: active when the system is set to dark (same palette as the concept) ===== */
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --bg:#1b262d;--surface:#22303a;--text:#eeebe3;--muted:#a7aba9;--line:#33434d;--ghost:#26343d;--teal:#8fb0c2;--tint:#2a3b46;--input-bg:#1b262d;--card-bg:#22303a;
  }
  /* buttons: light teal fill needs dark text */
  body.sl a.sl-btn:not(.ghost):not(.light),body.sl button.sl-btn,.sl .btn-primary,.sl .bg-primary{background-color:#8fb0c2!important;border-color:#8fb0c2!important;color:#fff!important}
  body.sl a.sl-btn:not(.ghost):not(.light):hover,body.sl button.sl-btn:hover,.sl .btn-primary:hover{background-color:#7fa1b5!important;border-color:#7fa1b5!important;color:#fff!important}
  body.sl a.sl-btn.ghost{color:#8fb0c2;border-color:#8fb0c2}
  body.sl a.sl-btn.ghost:hover{background:#8fb0c2;color:#fff}
  /* Bootstrap bits used by the visa pages */
  .sl .border,.sl .border-bottom,.sl .border-top{border-color:var(--line)!important}
  .sl .card-header,.sl .card-footer{background-color:var(--tint)!important;border-color:var(--line)}
  .sl .table{--bs-table-color:var(--text);--bs-table-bg:transparent;--bs-table-border-color:var(--line);--bs-table-striped-bg:var(--tint);--bs-table-striped-color:var(--text)}
  .sl .form-control:disabled,.sl .form-select:disabled,.sl .form-control[readonly]{background-color:var(--tint);color:var(--muted)}
  .sl .form-control,.sl .form-select{background-color:var(--input-bg)}
  .sl .input-group-text{background:var(--tint);color:var(--text);border-color:var(--line)}
  .sl .alert-warning{background:#3a3320;border-color:#5c5030;color:#e8dcae}
  .sl .alert-info{background:var(--tint);border-color:var(--line);color:var(--text)}
  .sl .alert-danger{background:#3b2523;border-color:#6a3a36;color:#f0c9c5}
  .sl .alert-success{background:#1f3328;border-color:#2f5a42;color:#bfe3cd}
  .sl .badge.bg-light{color:var(--text)!important}
  .sl .btn-close{filter:invert(1)}
  .sl .nav-tabs{border-color:var(--line)}
  .sl .text-success{color:#7fd1a0!important}
  .sl .text-danger{color:#f09a93!important}
  .sl-alert.ok{background:#1f3328;border-color:#2f5a42;color:#bfe3cd}
  .sl-alert.err{background:#3b2523;border-color:#6a3a36;color:#f0c9c5}
}
@media (prefers-color-scheme:dark){.sl .section-badge,.sl .badge.bg-primary{color:#fff!important}}

/* about + misc */
.sl-more{color:var(--teal);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;margin-left:4px}
.sl-prose-sm{color:var(--muted);font-size:14px}
.sl-prose-sm p:last-child{margin-bottom:0}
.sl-quote{margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
.sl .sl-prose p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.sl-form input[type=file]{padding:8px 10px;font-size:13px}
.sl-form input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;border:1px solid var(--teal);background:transparent;color:var(--teal);font:500 11px var(--sans);letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;border-radius:0}
.sl-form input[type=file]::file-selector-button:hover{background:var(--teal);color:#fff}
/* Bootstrap table-light rows follow the palette */
.sl .table-light,.sl .table-light>th,.sl .table-light>td,.sl .table>:not(caption)>*>*{--bs-table-bg:var(--tint);background-color:transparent}
.sl .table-light,.sl .table-light>*,.sl .table-light th,.sl .table-light td,.sl tr.table-light>*{--bs-table-bg:var(--tint);--bs-table-color:var(--text);background-color:var(--tint)!important;color:var(--text)!important;border-color:var(--line)}
.sl .table-bordered>:not(caption)>*{border-color:var(--line)}
.sl .table-bordered>:not(caption)>*>*{border-color:var(--line);color:var(--text)}

/* Dark mode: any light-teal button/badge gets dark text, even with Bootstrap's text-white class */
@media (prefers-color-scheme:dark){
  .sl .btn-primary,.sl .btn-primary.text-white,.sl .btn-primary *,
  .sl .bg-primary,.sl .bg-primary.text-white,.sl .bg-primary .text-white,.sl .bg-primary *{color:#fff!important}
  .sl .btn-outline-primary:hover,.sl .btn-outline-primary:focus,.sl .btn-outline-primary:active,
  .sl .btn-outline-primary:hover *{background-color:#8fb0c2!important;border-color:#8fb0c2!important;color:#fff!important}
  .sl .btn-outline-primary{color:#8fb0c2;border-color:#8fb0c2}
  .sl-form input[type=file]::file-selector-button:hover{background:#8fb0c2;color:#fff}
  .sl .btn-check:checked+.btn-outline-primary{background:#8fb0c2;color:#fff}
}
@media (prefers-color-scheme:dark){
  .sl .section-badge.bg-secondary,.sl .badge.bg-secondary{background-color:#4b5a63!important;color:#fff!important}
}

/* Home visa section: content moved here from the old visa landing page */
.visa-panel .docs-paths li{border-color:rgba(244,241,233,.45)}
.vpartner{margin:0 0 18px;font-size:13px;color:#a9c0cc;letter-spacing:.3px}
.vbtns{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
body.sl a.sl-btn.ghost-light{background:transparent;color:#f4f1e9;border:1px solid rgba(244,241,233,.55)}
body.sl a.sl-btn.ghost-light:hover{background:#f4f1e9;color:var(--teal-deep)}
.sl-btn.ghost-light i{margin-right:8px}
.vnote{margin-top:40px;padding-top:24px;border-top:1px solid rgba(244,241,233,.2)}
.vnote strong{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#a9c0cc;margin-bottom:8px}
.vnote p{margin:0;font-size:13px;line-height:1.7;color:#cfdbe1;max-width:860px}
/* bigger referral-partner line in the visa section */
.vpartner{font-size:clamp(16px,2vw,19px);line-height:1.5;color:#e1e9ee;margin:0 0 22px;letter-spacing:.2px;max-width:760px}