/* ==========================================================================
   Golden Vision Fleet — astolroya.com
   One stylesheet for both languages: every horizontal value is a logical
   property (inline-start / inline-end), so dir="rtl" and dir="ltr" both work.
   ========================================================================== */

:root{
  --navy:#0B1D33; --navy-900:#061322; --navy-800:#0A1A2E; --navy-700:#0F2540; --navy-600:#16324F;
  --navy-line:#1C3350; --navy-line-2:#24405E;
  --gold:#C9A24B; --gold-lt:#E4C67E; --gold-dk:#9A7A2E; --gold-ink:#82631F;
  --sand:#F5F1E8; --sand-2:#EDE6D6; --paper:#FFFFFF;
  --ink:#0E1621; --ink-2:#2A3644; --steel:#566779; --steel-lt:#8FA4B8; --mist:#B9C8D6;
  --line:#E3DDD0; --line-soft:#EEE9DE;
  --teal:#0F7A6A; --danger:#B42318;

  --ff-ar:"IBM Plex Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
  --ff-la:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --ff-mo:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  --maxw:1200px;
  --gutter:clamp(18px,4.2vw,44px);
  --radius:12px;
  --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(11,29,51,.06);
  --shadow:0 1px 2px rgba(11,29,51,.05),0 14px 34px -18px rgba(11,29,51,.28);
  --ease:cubic-bezier(.2,.7,.2,1);
  --header-h:72px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ff-ar); font-size:1rem; line-height:1.8; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
html[lang="en"] body{font-family:var(--ff-la); line-height:1.7}
img,svg{display:block; max-width:100%}
a{color:inherit; text-underline-offset:.2em}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; line-height:1.2; letter-spacing:-.02em; font-weight:600; text-wrap:balance}
html[lang="en"] h1,html[lang="en"] h2{letter-spacing:-.028em}
p{margin:0}
ul,ol{margin:0; padding:0}
:focus-visible{outline:2px solid var(--focus,var(--navy)); outline-offset:3px; border-radius:4px}
.site-header,.hero,.page-head,.bg-navy,.bg-navy-deep,.facts,.cta-band,.site-footer,.track-card,.facts-card,.map-wrap,.aside-dark{--focus:var(--gold)}
::selection{background:var(--gold-lt); color:var(--navy)}
svg text{direction:ltr; unicode-bidi:isolate}

.skip{position:absolute; inset-inline-start:12px; top:-60px; z-index:200; background:var(--gold); color:var(--navy);
  padding:.6rem 1rem; border-radius:var(--radius-sm); font-weight:600; text-decoration:none; transition:top .2s}
.skip:focus{top:12px}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

.container{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.lat{font-family:var(--ff-la); direction:ltr; unicode-bidi:isolate}
.mono{font-family:var(--ff-mo); font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate}
.ar{font-family:var(--ff-ar); direction:rtl; unicode-bidi:isolate}
.nowrap{white-space:nowrap}

.eyebrow{display:inline-flex; align-items:center; gap:.65em; font-family:var(--ff-mo); font-size:.72rem;
  font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink)}
.eyebrow::before{content:""; width:22px; height:1.5px; background:currentColor; opacity:.8}
.on-dark .eyebrow,.eyebrow.on-dark{color:var(--gold)}
/* Arabic labels: Arabic letters must join, so no mono face, tracking or caps */
html[lang="ar"] .eyebrow{font-family:var(--ff-ar); font-size:.86rem; font-weight:600; letter-spacing:0; text-transform:none}
html[lang="ar"] .station-num,html[lang="ar"] .legend,html[lang="ar"] .facts-card dt,html[lang="ar"] .contact-card .k,
html[lang="ar"] .site-footer h2,html[lang="ar"] .table thead th,html[lang="ar"] .footer-brand .tag{font-family:var(--ff-ar); letter-spacing:0; text-transform:none; font-weight:600}
html[lang="ar"] .station-num{font-size:.84rem}
html[lang="ar"] .legend{font-size:.9rem}
html[lang="ar"] .facts-card dt,html[lang="ar"] .contact-card .k{font-size:.8rem}
html[lang="ar"] .site-footer h2{font-size:.9rem}
html[lang="ar"] .table thead th{font-size:.84rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55em; min-height:48px;
  padding:.72em 1.35em; border-radius:var(--radius-sm); border:1.5px solid transparent;
  font-weight:600; font-size:.97rem; line-height:1.2; text-decoration:none; cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.btn svg{width:18px; height:18px; flex:none}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--gold); color:var(--navy)}
.btn-gold:hover{background:var(--gold-lt)}
.btn-navy{background:var(--navy); color:#fff}
.btn-navy:hover{background:var(--navy-600)}
.btn-line{border-color:var(--line); color:var(--navy); background:transparent}
.btn-line:hover{border-color:var(--navy); background:var(--sand)}
.btn-line-light{border-color:var(--navy-line-2); color:#fff; background:transparent}
.btn-line-light:hover{border-color:var(--gold); color:var(--gold)}
.btn-block{width:100%}
.btn[disabled]{opacity:.6; cursor:progress}
.arrow{transition:transform .2s var(--ease)}
html[dir="rtl"] .arrow{transform:scaleX(-1)}
a:hover > .arrow,.btn:hover > .arrow{transform:translateX(3px)}
html[dir="rtl"] a:hover > .arrow,html[dir="rtl"] .btn:hover > .arrow{transform:scaleX(-1) translateX(3px)}

.textlink{display:inline-flex; align-items:center; gap:.4em; color:var(--navy); font-weight:600;
  text-decoration:none; border-bottom:1.5px solid var(--gold); padding-bottom:2px}
.textlink svg{width:16px; height:16px}
.textlink:hover{color:var(--gold-ink)}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:100; background:rgba(11,29,51,.97);
  border-bottom:1px solid var(--navy-line); backdrop-filter:saturate(140%) blur(10px)}
.header-in{display:flex; align-items:center; gap:clamp(14px,2.2vw,32px); height:var(--header-h)}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; flex:none}
.brand-mark{width:36px; height:36px; color:var(--gold); flex:none}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-name{font-family:var(--ff-ar); font-weight:600; font-size:1.02rem; letter-spacing:-.01em; white-space:nowrap}
.brand-sub{font-family:var(--ff-la); font-size:.56rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); margin-top:3px; direction:ltr; unicode-bidi:isolate; white-space:nowrap}
html[lang="en"] .brand-name{font-family:var(--ff-la); font-size:.98rem; letter-spacing:.02em}
html[lang="en"] .brand-sub{font-family:var(--ff-ar); letter-spacing:0; font-size:.72rem; text-transform:none; direction:rtl; margin-top:1px}

.nav{display:flex; align-items:center; gap:clamp(4px,1.2vw,14px); margin-inline-start:auto}
.nav a{color:var(--mist); text-decoration:none; font-size:.94rem; padding:.45em .55em; border-radius:6px; white-space:nowrap}
.nav a:hover{color:#fff}
.nav a[aria-current="page"]{color:#fff; box-shadow:inset 0 -2px 0 var(--gold); border-radius:0}
.header-actions{display:flex; align-items:center; gap:10px}
.lang{display:inline-flex; align-items:center; gap:.4em; color:var(--mist); text-decoration:none; font-size:.86rem;
  padding:.5em .7em; border:1px solid var(--navy-line-2); border-radius:7px; white-space:nowrap}
.lang:hover{color:#fff; border-color:var(--steel)}
.lang svg{width:16px; height:16px}
.header-cta{min-height:42px; padding:.55em 1.05em; font-size:.9rem}

.menu-btn{display:none; width:44px; height:44px; border-radius:8px; border:1px solid var(--navy-line-2);
  background:transparent; color:#fff; cursor:pointer; align-items:center; justify-content:center}
.menu-btn svg{width:22px; height:22px}
.menu-btn .i-close{display:none}
.menu-btn[aria-expanded="true"] .i-open{display:none}
.menu-btn[aria-expanded="true"] .i-close{display:block}

.mobile-panel{display:none}
@media (max-width:1020px){
  .nav,.header-actions .lang,.header-cta{display:none}
  .menu-btn{display:inline-flex; margin-inline-start:auto}
  .mobile-panel{display:block; position:fixed; inset:var(--header-h) 0 0 0; background:var(--navy);
    padding:20px var(--gutter) 40px; overflow-y:auto; transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s linear .22s}
  .mobile-panel.open{opacity:1; transform:none; visibility:visible; transition:opacity .22s var(--ease),transform .22s var(--ease)}
  .mobile-panel nav{display:flex; flex-direction:column}
  .mobile-panel nav a{color:#fff; text-decoration:none; font-size:1.2rem; font-weight:500; padding:1rem 0;
    border-bottom:1px solid var(--navy-line)}
  .mobile-panel nav a[aria-current="page"]{color:var(--gold)}
  .mobile-panel .mp-actions{display:flex; flex-direction:column; gap:12px; margin-top:26px}
  .mobile-panel .lang{justify-content:center; padding:.8em; font-size:.95rem}
  body.menu-open{overflow:hidden}
}
@media (max-width:420px){.brand-sub{display:none}}

/* ---------- sections ---------- */
.section{padding-block:clamp(64px,9vw,120px)}
.section-sm{padding-block:clamp(48px,6vw,80px)}
.bg-sand{background:var(--sand)}
.bg-navy{background:var(--navy); color:#fff}
.bg-navy-deep{background:var(--navy-900); color:#fff}
.sec-head{display:grid; gap:1rem; max-width:62ch; margin-bottom:clamp(34px,4.6vw,58px)}
.sec-head h2{font-size:clamp(1.8rem,3.8vw,2.7rem)}
.sec-head p{color:var(--steel); font-size:clamp(1rem,1.5vw,1.1rem); line-height:1.85}
.bg-navy .sec-head p,.bg-navy-deep .sec-head p{color:var(--steel-lt)}
.sec-head-row{display:flex; align-items:end; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-bottom:clamp(34px,4.6vw,58px)}
.sec-head-row .sec-head{margin-bottom:0}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; background:var(--navy); color:#fff; isolation:isolate}
.hero-mark{position:absolute; z-index:-1; width:min(880px,92vw); inset-inline-end:-14%; top:-18%;
  color:var(--gold); opacity:.1; pointer-events:none}
.hero::after{content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:1;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold) 40%,var(--gold-lt) 70%,var(--gold-dk))}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(32px,5vw,72px);
  align-items:center; padding-block:clamp(64px,10vw,128px) clamp(64px,9vw,112px)}
.hero h1{font-size:clamp(2.05rem,4.3vw,3.25rem); font-weight:600; letter-spacing:-.025em; line-height:1.3; margin-top:1.1rem}
html[lang="en"] .hero h1{letter-spacing:-.035em; line-height:1.12}
.hero-lead{color:var(--mist); font-size:clamp(1.02rem,1.7vw,1.2rem); line-height:1.85; max-width:50ch; margin-top:1.4rem}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:2.2rem}
.hero-meta{display:flex; gap:clamp(18px,3vw,36px); flex-wrap:wrap; margin-top:clamp(36px,5vw,56px);
  padding-top:24px; border-top:1px solid var(--navy-line)}
.hero-meta div{display:flex; flex-direction:column; gap:2px}
.hero-meta b{font-family:var(--ff-mo); font-size:1.5rem; font-weight:500; color:var(--gold); letter-spacing:-.02em; line-height:1.2}
.hero-meta span{color:var(--steel-lt); font-size:.86rem}

.track-card{background:var(--navy-700); border:1px solid var(--navy-line-2); border-radius:16px;
  padding:clamp(22px,2.6vw,30px); box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.track-card h2{font-size:1.25rem; letter-spacing:-.01em}
.track-card > p{color:var(--steel-lt); font-size:.9rem; margin-top:.5rem; line-height:1.7}
.track-card form{margin-top:1.2rem}
.track-foot{display:flex; align-items:center; gap:.5em; margin-top:1rem; color:var(--steel-lt); font-size:.8rem}
.track-foot svg{width:15px; height:15px; color:var(--gold); flex:none}

/* ---------- facts strip ---------- */
.facts{background:var(--navy-900); color:#fff; border-top:1px solid var(--navy-line)}
.facts-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.fact{padding:clamp(22px,3vw,34px) clamp(14px,2vw,26px); border-inline-start:1px solid var(--navy-line)}
.fact:first-child{border-inline-start:0; padding-inline-start:0}
.fact b{display:block; font-family:var(--ff-mo); font-weight:500; font-size:clamp(1.7rem,3.4vw,2.4rem);
  color:var(--gold); letter-spacing:-.03em; line-height:1.1}
.fact span{display:block; color:var(--steel-lt); font-size:.9rem; margin-top:.45rem; line-height:1.55}

/* ---------- chain (quay → door) ---------- */
.chain{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,24px); list-style:none}
.chain-line{position:absolute; top:31px; inset-inline:31px; height:2px; background:var(--line); z-index:0}
.chain-line i{position:absolute; inset-block:0; inset-inline-start:0; width:100%; display:block;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold),var(--gold-lt)); transform-origin:left center}
html[dir="rtl"] .chain-line i{transform-origin:right center; background:linear-gradient(270deg,var(--gold-dk),var(--gold),var(--gold-lt))}
.js .chain-line i{transform:scaleX(0); transition:transform 1.6s var(--ease)}
.js .chain.in .chain-line i{transform:scaleX(1)}
.station{position:relative; z-index:1}
.station-dot{width:64px; height:64px; border-radius:50%; background:var(--paper); border:2px solid var(--gold);
  display:grid; place-items:center; color:var(--gold-ink); box-shadow:0 0 0 8px var(--sand)}
.station-dot svg{width:28px; height:28px}
.station-num{font-family:var(--ff-mo); font-size:.72rem; letter-spacing:.14em; color:var(--gold-ink); margin-top:1.3rem; display:block}
.station h3{font-size:1.25rem; margin-top:.35rem}
.station p{color:var(--steel); font-size:.93rem; line-height:1.75; margin-top:.5rem}
.station .codes{font-family:var(--ff-mo); font-size:.68rem; color:var(--steel); margin-top:.8rem; direction:ltr; unicode-bidi:isolate; display:block}
.js .chain .station{opacity:0; transform:translateY(10px); transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .chain.in .station{opacity:1; transform:none}
.js .chain.in .station:nth-child(3){transition-delay:.25s}
.js .chain.in .station:nth-child(4){transition-delay:.55s}
.js .chain.in .station:nth-child(5){transition-delay:.85s}

/* ---------- service cards ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.6vw,18px)}
.svc-card{position:relative; display:flex; flex-direction:column; gap:.7rem; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius); padding:clamp(20px,2.2vw,26px);
  text-decoration:none; color:inherit; transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.svc-card:hover{border-color:var(--gold); box-shadow:var(--shadow); transform:translateY(-2px)}
.svc-ic{width:46px; height:46px; border-radius:10px; background:var(--sand); color:var(--gold-ink); display:grid; place-items:center}
.svc-ic svg{width:25px; height:25px}
.svc-card h3{font-size:1.1rem; margin-top:.4rem}
.svc-card p{color:var(--steel); font-size:.9rem; line-height:1.72}
.svc-card .more{margin-top:auto; padding-top:.9rem; display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--line-soft); font-size:.84rem; font-weight:600; color:var(--navy)}
.svc-card .more .mono{font-weight:400; font-size:.66rem; color:var(--steel)}
.svc-card .more svg{width:16px; height:16px}

/* ---------- coverage ---------- */
.coverage{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(30px,5vw,70px); align-items:center}
.map-wrap{background:var(--navy-800); border:1px solid var(--navy-line); border-radius:16px; padding:clamp(10px,2vw,22px)}
.map-wrap svg{width:100%; height:auto}
.map-route{fill:none; stroke:var(--gold); stroke-width:1.3; opacity:.55}
.js .map-route{stroke-dasharray:var(--len); stroke-dashoffset:var(--len); transition:stroke-dashoffset 1.4s var(--ease)}
.js .map-wrap.in .map-route{stroke-dashoffset:0}
.city-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; margin-top:28px; list-style:none}
.city-list li{display:flex; align-items:center; gap:.7em; padding:.62rem 0; border-bottom:1px solid var(--navy-line); color:#DCE6EF; font-size:.95rem}
.city-list li::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); flex:none}
.city-list li.hub{color:var(--gold); font-weight:600}
.city-list li.hub::before{box-shadow:0 0 0 4px rgba(201,162,75,.25)}

/* ---------- why ---------- */
.why-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.6vw,34px)}
.why-item{padding-top:1.3rem; border-top:2px solid var(--navy)}
.why-item h3{font-size:1.12rem}
.why-item p{color:var(--steel); font-size:.93rem; line-height:1.78; margin-top:.55rem}
.why-item .n{font-family:var(--ff-mo); font-size:.7rem; letter-spacing:.14em; color:var(--gold-ink); display:block; margin-bottom:.6rem}

/* ---------- CTA band ---------- */
.cta-band{position:relative; overflow:hidden; background:var(--navy); color:#fff; border-radius:20px;
  padding:clamp(34px,5vw,64px); display:grid; grid-template-columns:minmax(0,1.3fr) auto; gap:30px; align-items:center; isolation:isolate}
.cta-band h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
.cta-band p{color:var(--mist); margin-top:.9rem; max-width:48ch; line-height:1.8}
.cta-band .actions{display:flex; flex-direction:column; gap:12px; min-width:230px}
.cta-band .mail{display:inline-flex; align-items:center; justify-content:center; gap:.5em; color:var(--mist); font-size:.9rem; text-decoration:none}
.cta-band .mail:hover{color:var(--gold)}
.cta-band .mail svg{width:17px; height:17px}
.cta-mark{position:absolute; z-index:-1; width:420px; inset-inline-end:-80px; bottom:-150px; color:var(--gold); opacity:.08}

/* ---------- inner page header ---------- */
.page-head{position:relative; overflow:hidden; background:var(--navy); color:#fff; isolation:isolate}
.page-head .container{padding-block:clamp(48px,7vw,92px) clamp(44px,6vw,76px)}
.page-head h1{font-size:clamp(2.1rem,5.4vw,3.6rem); letter-spacing:-.035em; margin-top:1rem; max-width:20ch}
.page-head p{color:var(--mist); font-size:clamp(1rem,1.6vw,1.15rem); max-width:58ch; margin-top:1.1rem; line-height:1.85}
.page-head .hero-mark{width:min(620px,80vw); top:-30%; opacity:.08}
.page-head::after{content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold) 40%,var(--gold-lt) 70%,var(--gold-dk))}
.crumbs{display:flex; align-items:center; gap:.6em; font-size:.84rem; color:var(--steel-lt); list-style:none; flex-wrap:wrap}
.crumbs a{color:var(--mist); text-decoration:none}
.crumbs a:hover{color:var(--gold)}
.crumbs li + li::before{content:"/"; margin-inline-end:.6em; opacity:.5}

/* ---------- about ---------- */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,72px); align-items:start}
.lead-xl{font-size:clamp(1.35rem,2.6vw,1.9rem); font-weight:500; line-height:1.55; letter-spacing:-.02em; color:var(--navy)}
.prose{color:var(--ink-2); font-size:1.02rem; line-height:1.95}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(1.3rem,2.4vw,1.6rem); color:var(--navy); margin-top:2em}
.prose h3{font-size:1.1rem; color:var(--navy); margin-top:1.6em}
.prose ul{padding-inline-start:1.3em}
.prose li + li{margin-top:.45em}
.prose a{color:var(--gold-ink); font-weight:600}

.vm-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,2vw,20px)}
.vm{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,3vw,36px)}
.vm .eyebrow{margin-bottom:1rem}
.vm p{font-size:clamp(1.1rem,1.9vw,1.35rem); line-height:1.65; color:var(--navy); font-weight:500; letter-spacing:-.01em}

.values{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,20px)}
.value{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(20px,2.4vw,28px)}
.value .n{font-family:var(--ff-mo); font-size:.7rem; color:var(--gold-ink); letter-spacing:.14em}
.value h3{font-size:1.1rem; margin-top:.7rem}
.value p{color:var(--steel); font-size:.92rem; margin-top:.5rem; line-height:1.75}

.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper)}
.table{width:100%; border-collapse:collapse; font-size:.95rem}
.table th,.table td{padding:.9rem 1.1rem; text-align:start; border-bottom:1px solid var(--line-soft); vertical-align:top}
.table thead th{font-family:var(--ff-mo); font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel); background:var(--sand); border-bottom:1px solid var(--line)}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:#FBF9F4}
.table td.code{font-family:var(--ff-mo); color:var(--gold-ink); white-space:nowrap; direction:ltr; unicode-bidi:isolate; width:6rem}
.table td.line{color:var(--steel); font-size:.88rem; min-width:6.5rem}

.facts-card{background:var(--navy); color:#fff; border-radius:var(--radius); padding:clamp(24px,3vw,34px)}
.facts-card dl{display:grid; gap:1.1rem; margin:1.3rem 0 0}
.facts-card dt{font-family:var(--ff-mo); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.facts-card dd{margin:.2rem 0 0; color:#E6EDF4; font-size:1rem}
.facts-card dd a{color:#fff}

/* ---------- services detail ---------- */
.svc-nav{position:sticky; top:var(--header-h); z-index:40; background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.svc-nav ul{display:flex; gap:4px; overflow-x:auto; list-style:none; scrollbar-width:none; padding-block:10px}
.svc-nav ul::-webkit-scrollbar{display:none}
.svc-nav a{display:block; white-space:nowrap; padding:.5em .9em; border-radius:99px; font-size:.88rem; color:var(--ink-2); text-decoration:none; border:1px solid transparent}
.svc-nav a:hover{border-color:var(--line); background:var(--sand)}
.svc-block{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,72px);
  padding-block:clamp(48px,6.5vw,84px); border-bottom:1px solid var(--line); scroll-margin-top:calc(var(--header-h) + 64px)}
.svc-block:last-child{border-bottom:0}
.svc-block .svc-ic{width:58px; height:58px; border-radius:14px}
.svc-block .svc-ic svg{width:31px; height:31px}
.svc-block h2{font-size:clamp(1.5rem,3vw,2.1rem); margin-top:1.2rem}
.svc-block .codes{display:flex; flex-wrap:wrap; gap:6px; margin-top:1.1rem}
.code-chip{font-family:var(--ff-mo); font-size:.72rem; color:var(--gold-ink); background:#FBF6EA; border:1px solid #EFE2C2;
  padding:.28em .65em; border-radius:6px; direction:ltr; unicode-bidi:isolate}
.svc-block .body p{color:var(--ink-2); font-size:1.04rem; line-height:1.9}
.checks{list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem 1.6rem; margin-top:1.6rem}
.checks li{position:relative; padding-inline-start:1.8rem; color:var(--ink-2); font-size:.95rem; line-height:1.65}
.checks li svg{position:absolute; inset-inline-start:0; top:.2em; width:18px; height:18px; color:var(--teal)}
.svc-block .body .btn,.svc-block .body .textlink{margin-top:1.8rem}

/* ---------- forms ---------- */
.form-layout{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(28px,4vw,56px); align-items:start}
.form-card{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:clamp(22px,3.4vw,42px); box-shadow:var(--shadow-sm)}
.form-card h2{font-size:clamp(1.3rem,2.4vw,1.6rem)}
.form-card > p{color:var(--steel); margin-top:.5rem; font-size:.95rem}
.fieldset{border:0; margin:0; padding:0; display:grid; gap:18px}
.fieldset + .fieldset{margin-top:30px; padding-top:28px; border-top:1px solid var(--line-soft)}
.legend{font-family:var(--ff-mo); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink); padding:0; margin-bottom:4px}
.row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.row-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.field{display:grid; gap:7px; min-width:0}
.field label,.field .label{font-size:.9rem; font-weight:500; color:var(--ink-2)}
.field .opt{color:var(--steel); font-weight:400; font-size:.8rem}
.field .hint{color:var(--steel); font-size:.8rem; line-height:1.55}
.input,.select,.textarea{width:100%; min-height:50px; padding:.7rem .9rem; background:#FCFBF8; border:1.5px solid #8C8579;
  border-radius:var(--radius-sm); font-size:1rem; line-height:1.5; transition:border-color .15s,box-shadow .15s,background-color .15s}
.input:hover,.select:hover,.textarea:hover{border-color:#6F695F}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--navy); background:#fff; box-shadow:0 0 0 4px rgba(201,162,75,.22)}
.textarea{min-height:130px; resize:vertical}
.select{appearance:none; -webkit-appearance:none; padding-inline-end:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7185' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:18px; background-position:left .8rem center}
html[dir="ltr"] .select{background-position:right .8rem center}
.input.ltr{direction:ltr; text-align:left}
html[dir="rtl"] .input.ltr::placeholder{text-align:right}
.is-invalid{border-color:var(--danger)!important; background:#FFF8F7!important}
.field-error{color:var(--danger); font-size:.8rem; display:none}
.field.has-error .field-error{display:block}
.track-card .input{background:var(--navy-900); border-color:#5A7C9E; color:#fff}
.track-card .input::placeholder{color:#7E8FA3}
.track-card .input.is-invalid{background:var(--navy-900)!important; border-color:#F97066!important; color:#fff}
.track-card .field-error{color:#FDA29B}
.track-card .input:focus{border-color:var(--gold); background:var(--navy-900); box-shadow:0 0 0 4px rgba(201,162,75,.2)}
.track-card .field label{color:var(--mist)}
.track-card .field{margin-bottom:12px}

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative}
.chip input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.chip span{display:inline-flex; align-items:center; gap:.45em; padding:.55em .95em; border:1.5px solid #8C8579; border-radius:99px;
  font-size:.9rem; color:var(--ink-2); background:#FCFBF8; transition:all .15s; cursor:pointer; user-select:none}
.chip span svg{width:17px; height:17px; color:var(--steel)}
.chip input:hover + span{border-color:#6F695F}
.chip input:checked + span{border-color:var(--navy); background:var(--navy); color:#fff}
.chip input:checked + span svg{color:var(--gold)}
.chip input:focus-visible + span{outline:2px solid var(--focus,var(--navy)); outline-offset:2px}
.checkline{display:flex; align-items:flex-start; gap:.7em; font-size:.9rem; color:var(--ink-2); line-height:1.6; cursor:pointer}
.checkline input{width:19px; height:19px; margin-top:.2em; accent-color:var(--navy); flex:none}
.hp{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0}
.form-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:28px}
.form-note{color:var(--steel); font-size:.82rem; line-height:1.6}
.form-note a{color:var(--gold-ink)}

.alert{display:none; gap:.8rem; align-items:flex-start; padding:1rem 1.1rem; border-radius:var(--radius-sm); margin-top:20px; font-size:.95rem; line-height:1.7}
.alert svg{width:22px; height:22px; flex:none; margin-top:.1em}
.alert.show{display:flex}
.alert-ok{background:#EEF7F4; border:1px solid #BFE0D6; color:#0B4F45}
.alert-ok svg{color:var(--teal)}
.alert-err{background:#FEF3F2; border:1px solid #F7C9C4; color:#8A1C12}
.alert-err svg{color:var(--danger)}
.alert .ref{font-family:var(--ff-mo); font-weight:600; direction:ltr; unicode-bidi:isolate}
.track-card .alert-ok{background:rgba(15,122,106,.14); border-color:rgba(47,175,153,.35); color:#CFEDE6}
.track-card .alert-err{background:rgba(180,35,24,.14); border-color:rgba(240,130,110,.35); color:#FAD4CE}

.aside-card{background:var(--sand); border:1px solid var(--line); border-radius:16px; padding:clamp(22px,2.8vw,32px)}
.aside-card h2,.aside-card h3{font-size:1.1rem}
.aside-dark{background:var(--navy); border-color:var(--navy); color:#fff}
.steps{list-style:none; display:grid; gap:1.2rem; margin-top:1.3rem; counter-reset:s}
.steps li{display:grid; grid-template-columns:34px 1fr; gap:.9rem; align-items:start; counter-increment:s}
.steps li::before{content:counter(s); width:34px; height:34px; border-radius:50%; background:var(--navy); color:var(--gold);
  display:grid; place-items:center; font-family:var(--ff-mo); font-size:.85rem; font-weight:500}
.steps b{display:block; font-size:.97rem; color:var(--navy)}
.steps span{display:block; color:var(--steel); font-size:.88rem; line-height:1.65; margin-top:.15rem}
.aside-contact{margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--line); display:grid; gap:.7rem}
.aside-contact a,.aside-contact span{display:flex; align-items:center; gap:.6em; color:var(--navy); text-decoration:none; font-size:.93rem}
.aside-contact svg{width:18px; height:18px; color:var(--gold-ink); flex:none}
.aside-contact a:hover{color:var(--gold-ink)}

/* ---------- contact ---------- */
.contact-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,18px); margin-bottom:clamp(40px,5vw,64px)}
.contact-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(20px,2.4vw,28px);
  display:flex; flex-direction:column; gap:.4rem; text-decoration:none; color:inherit; transition:border-color .2s,box-shadow .2s}
a.contact-card:hover{border-color:var(--gold); box-shadow:var(--shadow)}
.contact-card .svc-ic{margin-bottom:.6rem}
.contact-card .k{font-family:var(--ff-mo); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--steel)}
.contact-card .v{font-size:1.08rem; font-weight:600; color:var(--navy); word-break:break-word}
.contact-card .d{font-size:.86rem; color:var(--steel); line-height:1.6}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-900); color:var(--steel-lt); padding-block:clamp(52px,7vw,84px) 0}
.footer-grid{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,56px)}
.footer-brand .brand{margin-bottom:1.2rem}
.footer-brand p{font-size:.92rem; line-height:1.8; max-width:36ch}
.footer-brand .tag{font-family:var(--ff-mo); color:var(--gold); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; margin-top:1.2rem; display:block}
.site-footer h2{font-family:var(--ff-mo); font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:1.1rem}
.site-footer ul{list-style:none; display:grid; gap:.62rem}
.site-footer a{color:var(--mist); text-decoration:none; font-size:.93rem}
.site-footer a:hover{color:#fff}
.site-footer li{font-size:.93rem; display:flex; align-items:center; gap:.55em}
.site-footer li svg{width:16px; height:16px; color:var(--gold); flex:none}
.footer-legal{margin-top:clamp(40px,5vw,64px); border-top:1px solid var(--navy-line); padding-block:22px;
  display:flex; justify-content:space-between; gap:12px 28px; flex-wrap:wrap; font-size:.82rem}
.footer-legal .ids{font-family:var(--ff-mo); font-size:.74rem; direction:ltr; unicode-bidi:isolate}
.footer-legal a{font-size:.82rem}

/* ---------- 404 ---------- */
.nf{min-height:62vh; display:grid; place-items:center; text-align:center; padding-block:80px}
.nf .code{font-family:var(--ff-mo); font-size:clamp(4rem,14vw,8rem); color:var(--gold); line-height:1; letter-spacing:-.05em}
.nf h1{font-size:clamp(1.6rem,3.6vw,2.4rem); margin-top:1rem}
.nf p{color:var(--steel); margin:1rem auto 0; max-width:44ch}
.nf .hero-actions{justify-content:center}

/* ---------- reveal ---------- */
.js .reveal{opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1; transform:none}
.hero-anim > *{animation:rise .8s var(--ease) both}
.hero-anim > *:nth-child(2){animation-delay:.08s}
.hero-anim > *:nth-child(3){animation-delay:.16s}
.hero-anim > *:nth-child(4){animation-delay:.24s}
.hero-anim > *:nth-child(5){animation-delay:.32s}
@keyframes rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
  .js .reveal,.js .chain .station{opacity:1; transform:none}
  .js .chain-line i{transform:none}
  .js .map-route{stroke-dashoffset:0}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why-grid,.values{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:900px){
  .hero-grid,.coverage,.split,.form-layout,.svc-block{grid-template-columns:1fr}
  .cta-band{grid-template-columns:1fr}
  .cta-band .actions{min-width:0; flex-direction:row; flex-wrap:wrap; align-items:center}
  .facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact:nth-child(3){border-inline-start:0; padding-inline-start:0}
  .fact:nth-child(n+3){border-top:1px solid var(--navy-line)}
  .chain{grid-template-columns:1fr; gap:0}
  .chain-line{top:31px; bottom:31px; inset-inline-start:31px; inset-inline-end:auto; width:2px; height:auto}
  .chain-line i{transform-origin:center top!important; background:linear-gradient(180deg,var(--gold-dk),var(--gold),var(--gold-lt))!important}
  .js .chain-line i{transform:scaleY(0)}
  .js .chain.in .chain-line i{transform:scaleY(1)}
  .station{display:grid; grid-template-columns:64px 1fr; gap:0 20px; padding-bottom:30px}
  .station-dot{grid-row:1 / span 4}
  .station-num{margin-top:.4rem}
  .contact-cards{grid-template-columns:1fr}
  .vm-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .svc-grid,.why-grid,.values{grid-template-columns:1fr}
  .row,.row-3,.checks{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .city-list{grid-template-columns:1fr 1fr}
  .hero-actions .btn{flex:1 1 auto}
  .form-actions .btn{width:100%}
}
@media (max-width:400px){
  .footer-grid{grid-template-columns:1fr}
  .facts-grid{grid-template-columns:1fr}
  .fact{border-inline-start:0!important; padding-inline-start:0!important; border-top:1px solid var(--navy-line)}
  .fact:first-child{border-top:0}
}

@media print{
  .site-header,.site-footer,.mobile-panel,.hero-mark,.cta-mark,.svc-nav{display:none!important}
  .hero,.page-head,.bg-navy{background:#fff!important; color:#000!important}
}