/* Shadin Al-Janoob — site styles v3 "Corporate energy"
   White space, deep navy, one Shadin red accent. Sora for headings, Manrope for text.
   Technical drawings in thin white line on navy stand in for photography until field photos arrive. */
:root{
  --navy:#0A1F33; --navy-2:#11304D; --navy-3:#1A3D5E;
  --ink:#0F1E2C; --ink-2:#56657A; --ink-3:#8A97A6;
  --line:#E3E8EE; --soft:#F4F6F9; --paper:#FFFFFF;
  --red:#C3141E; --red-2:#A30F18; --orange:#F26B21;
  --on-dark:#FFFFFF; --on-dark-2:#AFC0D2; --line-dark:rgba(255,255,255,.14);
  --f-display:"Sora","Segoe UI",Helvetica,Arial,sans-serif;
  --f-body:"Manrope","Segoe UI",Helvetica,Arial,sans-serif;
  --s-1:.8125rem; --s0:1.0625rem; --s1:1.2rem; --s2:1.6rem; --s3:clamp(1.9rem,3.4vw,2.75rem); --s4:clamp(2.5rem,5.4vw,4.25rem);
  --wrap:1240px; --r:6px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--s0);line-height:1.65;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:#fff}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);line-height:1.12;text-wrap:balance;margin:0;letter-spacing:-.02em}
p{margin:0 0 16px}
.label{display:flex;align-items:center;gap:12px;font-family:var(--f-body);font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:0 0 18px}
.label::before{content:"";width:28px;height:2px;background:currentColor;flex:none}
.label b{font-weight:700}
.muted{color:var(--ink-2)}
.skip{position:absolute;left:-999px;top:8px;background:var(--red);color:#fff;padding:8px 12px;z-index:20}
.skip:focus{left:16px}

/* Header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.mark{width:46px;height:46px;flex:none}
.brand-name{display:flex;align-items:flex-start;gap:2px;font-family:var(--f-display);font-weight:800;font-size:1.12rem;letter-spacing:.04em;line-height:1;color:var(--ink)}
.brand-name svg{width:11px;height:18px;margin-top:-6px}
.brand-sub{display:block;font-family:var(--f-display);font-weight:800;font-size:1.12rem;letter-spacing:.04em;line-height:1;color:var(--red);margin-top:3px}
nav.main{display:flex;gap:30px;align-items:center}
nav.main a{text-decoration:none;font-size:.95rem;font-weight:600;color:var(--ink-2);padding-block:8px;position:relative}
nav.main a:hover{color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--ink)}
nav.main a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red)}
.menu-btn{display:none;background:#fff;border:1px solid var(--line);color:var(--ink);font:700 .85rem/1 var(--f-body);padding:11px 14px;cursor:pointer;border-radius:var(--r)}
.btn{display:inline-flex;align-items:center;gap:10px;font:700 .95rem/1 var(--f-body);text-decoration:none;padding:16px 26px;border:1.5px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;border-radius:var(--r);transition:background .2s,color .2s,border-color .2s}
.btn::after{content:"→";font-weight:400;transition:transform .2s}
.btn:hover::after{transform:translateX(4px)}
.btn.solid{background:var(--red);border-color:var(--red);color:#fff}
.btn.solid:hover{background:var(--red-2);border-color:var(--red-2)}
.btn.light{border-color:rgba(255,255,255,.45);color:#fff}
.btn.light:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.hdr-cta{white-space:nowrap;padding:13px 20px}
.hdr-cta::after{display:none}
@media (max-width:1020px){
  .menu-btn{display:inline-block}
  .hdr-cta{display:none}
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:6px max(20px,env(safe-area-inset-right,0px)) 18px max(20px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);box-shadow:0 20px 30px rgba(10,31,51,.08)}
  nav.main.open{display:flex}
  nav.main a{padding:15px 0;border-bottom:1px solid var(--line)}
  nav.main a[aria-current="page"]::after{display:none}
  nav.main a[aria-current="page"]{color:var(--red)}
}

/* Dark hero and page heads share one look: navy, faint grid, soft light from the right */
.hero,.page-head{--ink:rgba(255,255,255,.88);--ink-2:rgba(175,192,210,.8);background:var(--navy);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.hero::before,.page-head::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(900px 520px at 85% 30%,rgba(54,104,152,.45),transparent 70%),
  radial-gradient(500px 300px at 95% 100%,rgba(195,20,30,.22),transparent 70%)}
.hero::after,.page-head::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(90deg,transparent,#000 50%)}
.hero .hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center;padding-block:110px 90px}
.hero h1,.page-head h1{font-size:var(--s4);font-weight:700;color:#fff}
.hero h1 em,.page-head h1 em{font-style:normal;color:#FF5A5F}
.hero .label,.page-head .label{color:#FF6B6F}
.lead{font-size:var(--s1);color:var(--ink-2);max-width:58ch;margin:26px 0 36px;line-height:1.65}
.hero .lead,.page-head .lead{color:var(--on-dark-2)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-dark)}
.facts div{padding:30px 24px 40px 0}
.facts div+div{padding-left:24px;border-left:1px solid var(--line-dark)}
.facts strong{display:block;font-family:var(--f-display);font-size:clamp(1.7rem,3vw,2.5rem);font-weight:600;letter-spacing:-.02em;color:#fff;line-height:1.1;font-variant-numeric:tabular-nums}
.facts span{display:block;margin-top:8px;font-size:.92rem;color:var(--on-dark-2);line-height:1.45}
@media (max-width:960px){.hero .hero-grid{grid-template-columns:1fr;padding-block:72px 56px;gap:44px}}
@media (max-width:820px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.facts div:nth-child(3){padding-left:0;border-left:0}.facts div:nth-child(n+3){border-top:1px solid var(--line-dark)}}
@media (max-width:440px){.facts{grid-template-columns:1fr}.facts div{padding:22px 0!important;border-left:0!important;border-top:1px solid var(--line-dark)}.facts div:first-child{border-top:0}}

.page-head .wrap{padding-block:88px 80px}
.page-head h1{max-width:18ch}
.page-head .lead{margin-bottom:0}
.crumbs{font-size:.85rem;font-weight:600;color:var(--on-dark-2);margin-bottom:22px}
.crumbs a{text-decoration:none;color:#fff}
.page-head.split .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center}
@media (max-width:960px){.page-head.split .wrap{grid-template-columns:1fr;gap:44px}}

/* Technical drawings: thin line on navy */
.sld{margin:0;padding:0;background:transparent}
.sld svg{display:block;width:100%;height:auto}
.sld .ln{stroke:var(--ink);stroke-width:1.2;fill:none}
.sld .bus{stroke:var(--ink);stroke-width:3}
.sld .fill{fill:var(--navy);stroke:var(--ink);stroke-width:1.2}
.sld circle:not(.fill){stroke:var(--ink)!important;stroke-width:1.2!important}
.sld .t{fill:var(--ink);font-family:var(--f-body);font-weight:600;font-size:9.5px;letter-spacing:.04em}
.sld .t2{fill:var(--ink-2);font-family:var(--f-body);font-size:8.5px}
.sld .acc{fill:#FF6B6F;font-family:var(--f-body);font-weight:700;font-size:9px;letter-spacing:.04em}
.sld .flow{stroke:#FF4B52;stroke-width:2;fill:none;stroke-dasharray:3 15;animation:flow 1.8s linear infinite;filter:drop-shadow(0 0 3px rgba(255,75,82,.8))}
.sld .pipe{stroke:var(--ink-2);stroke-width:5;stroke-linecap:round}
.sld .tb{fill:none;stroke:var(--ink-2);stroke-width:.8}
.sld .anode{fill:none;stroke:#FF6B6F;stroke-width:1.2;stroke-dasharray:3 2}
.sld line[stroke="var(--ink-2)"]{stroke:var(--ink-2)}
@keyframes flow{to{stroke-dashoffset:-36}}
@media (prefers-reduced-motion:reduce){.sld .flow{animation:none}html{scroll-behavior:auto}.btn:hover::after{transform:none}}

/* Sections */
section.block{padding-block:112px}
section.block.alt{background:var(--soft)}
section.block.dark{background:var(--navy);color:#fff;--ink-2:var(--on-dark-2)}
section.block.dark h2{color:#fff}
section.block.dark .label{color:#FF6B6F}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:60px}
.sec-head h2{font-size:var(--s3);font-weight:700}
.sec-head p{margin:0;color:var(--ink-2);max-width:56ch;font-size:1.1rem}
.sec-foot{margin-top:44px}
@media (max-width:800px){.sec-head{grid-template-columns:1fr;gap:18px;margin-bottom:40px}section.block{padding-block:72px}}

/* Service cards */
.disc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.disc article{background:#fff;padding:40px 36px 38px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0;display:flex;flex-direction:column;gap:14px;position:relative;transition:background .25s}
.disc article::after{content:"";position:absolute;left:0;top:-1px;height:3px;width:0;background:var(--red);transition:width .35s}
.disc article:hover::after{width:100%}
.alt .disc article{background:#fff}
.disc .ico{color:var(--red);width:40px;height:40px;margin-bottom:6px}
.disc .ico svg{width:40px;height:40px;stroke-width:1.4}
.disc .code{display:none}
.disc h3{font-size:1.3rem;font-weight:600}
.disc p{margin:0;color:var(--ink-2);font-size:1rem}
.disc a.more{margin-top:auto;padding-top:10px;font-weight:700;font-size:.95rem;text-decoration:none;color:var(--ink)}
.disc a.more:hover{color:var(--red)}
ul.dash{margin:0;padding:0;list-style:none;display:grid;gap:9px;font-size:1rem}
ul.dash li{padding-left:22px;position:relative;color:var(--ink)}
ul.dash li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:2px;background:var(--red)}
.tag{align-self:flex-start;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red);border:1px solid currentColor;padding:4px 10px;border-radius:30px}
.cp-grid .code,.hse-grid .code{display:block;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
@media (max-width:980px){.disc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.disc{grid-template-columns:1fr}.disc article{padding:32px 26px}}

/* Service detail rows */
.svc{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;padding-block:56px;border-top:1px solid var(--line);scroll-margin-top:100px}
.svc:first-child{border-top:0;padding-top:0}
.svc .code{display:block;font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.svc h2{font-size:1.9rem;font-weight:700;margin-bottom:14px}
.svc .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
.svc h3{font-family:var(--f-body);font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
@media (max-width:860px){.svc{grid-template-columns:1fr;gap:22px;padding-block:44px}.svc .cols{grid-template-columns:1fr;gap:26px}}

/* Project register */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.chip{font:700 .88rem/1 var(--f-body);padding:11px 18px;border:1px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer;border-radius:40px;transition:all .2s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.reg-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
table.reg{width:100%;border-collapse:collapse;min-width:780px;font-size:.96rem}
.reg th{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:18px 20px;border-bottom:1px solid var(--line);white-space:nowrap}
.reg td{padding:18px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.reg tbody tr{transition:background .15s}
.reg tbody tr:hover{background:var(--soft)}
.reg td.ref{font-size:.85rem;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.reg td.val,.reg th.val{text-align:right}
.reg td.val{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700}
.reg td.yr{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.reg .d{display:inline-grid;place-items:center;width:22px;height:22px;font-size:.7rem;font-weight:800;margin-right:12px;border-radius:50%;color:var(--red);border:1px solid rgba(195,20,30,.35);vertical-align:1px}
.reg tfoot td{font-weight:800;border-bottom:0;background:var(--soft)}
.reg-note{font-size:.9rem;color:var(--ink-2);margin-top:14px}

/* Case cards */
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.case{background:#fff;padding:40px 38px;min-width:0;display:flex;flex-direction:column;gap:14px}
.case .meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.84rem;font-weight:600;color:var(--ink-3)}
.case h3{font-size:1.4rem;font-weight:600}
.case p{margin:0;color:var(--ink-2)}
.case .val{margin-top:auto;padding-top:14px;font-family:var(--f-display);font-weight:600;font-size:1.7rem;letter-spacing:-.02em;color:var(--red);font-variant-numeric:tabular-nums}
@media (max-width:760px){.cases{grid-template-columns:1fr}.case{padding:30px 26px}}

/* Clients (dark band) */
.clients{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}
.clients h2{font-size:var(--s3)!important;font-weight:700!important}
.cl-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line-dark)}
.cl-list div{padding:22px 16px 22px 0;border-bottom:1px solid var(--line-dark);min-width:0}
.cl-list strong{display:block;font-family:var(--f-display);font-weight:600;font-size:1.15rem;color:#fff}
.cl-list span{font-size:.9rem;color:var(--on-dark-2)}
.sub-h{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2);margin:38px 0 14px}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pills span{border:1px solid var(--line-dark);padding:8px 16px;font-size:.92rem;font-weight:600;border-radius:40px;color:#fff}
blockquote{margin:0;padding:8px 0 0 40px;border-left:2px solid var(--red);color:#fff}
blockquote p{font-family:var(--f-display);font-size:clamp(1.25rem,2.1vw,1.6rem);line-height:1.5;font-weight:400;letter-spacing:-.01em;margin:0 0 28px;color:#fff}
blockquote footer{font-size:.92rem;color:var(--on-dark-2);line-height:1.5}
@media (max-width:900px){.clients{grid-template-columns:1fr;gap:56px}}
@media (max-width:440px){.cl-list{grid-template-columns:1fr}blockquote{padding-left:24px}}

/* Stages */
ol.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;counter-reset:s;padding:0;margin:0;border-top:1px solid var(--line)}
ol.steps li{list-style:none;min-width:0;padding:30px 26px 0 0;position:relative}
ol.steps li::before{counter-increment:s;content:"0" counter(s);display:block;font-family:var(--f-display);font-weight:300;font-size:2.4rem;letter-spacing:-.03em;color:var(--red);margin-bottom:14px;line-height:1}
ol.steps li::after{content:"";position:absolute;top:-1px;left:0;width:36px;height:2px;background:var(--red)}
ol.steps h3{font-size:1.12rem;font-weight:600;margin-bottom:10px}
ol.steps p{margin:0;font-size:.97rem;color:var(--ink-2)}
@media (max-width:980px){ol.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 30px;border-top:0}ol.steps li{border-top:1px solid var(--line)}}
@media (max-width:540px){ol.steps{grid-template-columns:1fr}}

/* Two-column text + spec */
.two{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:72px}
.two p{color:var(--ink-2);max-width:62ch}
.two h2{font-size:var(--s3);font-weight:700;margin-bottom:26px}
dl.spec{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);border-top:1px solid var(--ink);align-self:start}
dl.spec dt,dl.spec dd{padding:18px 0;border-bottom:1px solid var(--line);margin:0}
dl.spec dt{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-right:28px}
dl.spec dd{font-size:1rem;min-width:0;font-weight:500}
@media (max-width:900px){.two{grid-template-columns:1fr;gap:44px}}

/* Fleet */
.fleet{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.fleet div{padding:26px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column-reverse;gap:4px;min-width:0;background:#fff}
.fleet span{color:var(--ink-2);font-size:.95rem}
.fleet b{font-family:var(--f-display);font-weight:600;font-size:2rem;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
@media (max-width:860px){.fleet{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* CTA band */
.band{background:var(--red);color:#fff;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 400px at 100% 0%,rgba(255,255,255,.14),transparent 70%)}
.band .wrap{padding-block:84px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;position:relative}
.band h2{font-size:var(--s3);font-weight:700;color:#fff;max-width:22ch}
.band p{color:rgba(255,255,255,.85);margin:14px 0 0;max-width:54ch;font-size:1.1rem}
.band .btn.solid{background:#fff;border-color:#fff;color:var(--red)}
.band .btn.solid:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.band .btn.light{border-color:rgba(255,255,255,.6)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:start}
.lines{border-top:1px solid var(--ink)}
.line{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.line .label{margin:0 0 4px;font-size:.72rem;color:var(--ink-3)}
.line .label::before{display:none}
.line .v{font-size:1.1rem;font-weight:600;overflow-wrap:anywhere}
.line .v a{text-decoration:none}
.line .v a:hover{color:var(--red)}
.copy{font:700 .8rem/1 var(--f-body);background:#fff;border:1px solid var(--line);color:var(--ink);padding:10px 14px;cursor:pointer;border-radius:var(--r)}
.copy:hover{border-color:var(--ink)}
.copy.done{border-color:var(--red);color:var(--red)}
form.rfq{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:44px;display:grid;gap:20px;box-shadow:0 30px 60px -30px rgba(10,31,51,.25)}
form.rfq .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
form.rfq label{display:grid;gap:8px;font-size:.88rem;font-weight:700}
form.rfq input,form.rfq select,form.rfq textarea{font:inherit;font-size:1rem;font-weight:500;color:var(--ink);background:#fff;border:1px solid #CFD7E0;padding:14px 15px;width:100%;border-radius:var(--r);transition:border-color .2s,box-shadow .2s}
form.rfq textarea{min-height:150px;resize:vertical}
form.rfq input:focus,form.rfq select:focus,form.rfq textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px rgba(10,31,51,.08)}
.form-msg{font-size:.95rem;padding:14px 16px;border-radius:var(--r);border-left:3px solid var(--red);background:var(--soft)}
.hp{position:absolute;left:-5000px}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:48px}}
@media (max-width:540px){form.rfq .row{grid-template-columns:1fr}form.rfq{padding:26px}}

/* Footer */
footer.site{background:#071828;color:var(--on-dark-2);padding-block:80px 40px}
.foot-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:40px;margin-bottom:56px}
.foot-cols h4{font-family:var(--f-body);font-weight:800;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 18px}
.foot-cols ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:.96rem}
.foot-cols a{text-decoration:none;color:var(--on-dark-2)}
.foot-cols a:hover{color:#fff}
.foot-cols p{font-size:.96rem;max-width:36ch}
.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.foot-brand .brand-name{color:#fff}
.tblock{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid var(--line-dark);padding-top:26px;font-size:.88rem}
.tblock div{display:flex;gap:8px}
.tblock small{color:rgba(175,192,210,.6);font-size:.88rem}
.tblock span{color:var(--on-dark-2)}
@media (max-width:860px){.foot-cols{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.foot-cols{grid-template-columns:1fr}}

/* ===== v3.1 premium details ===== */
.brand{color:var(--ink)}
/* Home: header floats over the hero, turns white on scroll */
body.home header.top{position:fixed;left:0;right:0;background:transparent;border-bottom-color:transparent;backdrop-filter:none;transition:background .35s,border-color .35s,box-shadow .35s}
body.home header.top .brand,body.home header.top .brand-name{color:#fff}
body.home header.top nav.main a{color:rgba(255,255,255,.75)}
body.home header.top nav.main a:hover,body.home header.top nav.main a[aria-current="page"]{color:#fff}
body.home header.top .menu-btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
body.home header.top.scrolled{background:rgba(255,255,255,.97);border-bottom-color:var(--line);box-shadow:0 10px 30px -18px rgba(10,31,51,.35);backdrop-filter:saturate(1.4) blur(10px)}
body.home header.top.scrolled .brand,body.home header.top.scrolled .brand-name{color:var(--ink)}
body.home header.top.scrolled nav.main a{color:var(--ink-2)}
body.home header.top.scrolled nav.main a[aria-current="page"],body.home header.top.scrolled nav.main a:hover{color:var(--ink)}
body.home header.top.scrolled .menu-btn{color:var(--ink);border-color:var(--line)}
@media (max-width:1020px){body.home header.top nav.main a{color:var(--ink-2)!important}body.home header.top nav.main a[aria-current="page"]{color:var(--red)!important}}
body.home .hero .hero-grid{padding-top:170px}
body.home .hero{min-height:min(860px,100vh)}

/* Animated grid canvas */
.hero canvas.fx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.9}
.hero h1{background:linear-gradient(180deg,#fff 30%,#C9D7E6);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sld{filter:drop-shadow(0 0 18px rgba(80,140,200,.25))}

/* Facts as glass cards */
.hero .facts{border-top:0;gap:16px;padding-bottom:64px}
.hero .facts div{border:1px solid rgba(255,255,255,.12)!important;border-radius:10px;padding:26px 24px!important;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));backdrop-filter:blur(6px);position:relative;overflow:hidden}
.hero .facts div::before{content:"";position:absolute;left:0;top:0;width:40px;height:2px;background:#FF4B52}
@media (max-width:820px){.hero .facts div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}}

/* Client marquee */
.marquee{background:#fff;border-bottom:1px solid var(--line);padding-block:30px 34px;overflow:hidden}
.mq-head p{margin:0 0 18px;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.mq{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;gap:64px;width:max-content;animation:mq 40s linear infinite}
.mq-track span{font-family:var(--f-display);font-weight:600;font-size:1.35rem;letter-spacing:-.01em;color:#9AA6B4;white-space:nowrap;transition:color .2s}
.mq-track span:hover{color:var(--ink)}
@keyframes mq{to{transform:translateX(-50%)}}

/* Service cards: navy on hover */
.disc .ico{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:rgba(195,20,30,.07);transition:background .3s,color .3s}
.disc .ico svg{width:30px;height:30px}
.disc article{transition:background .35s,color .35s,transform .35s}
.disc article:hover{background:var(--navy)!important;color:#fff}
.disc article:hover h3,.disc article:hover a.more{color:#fff}
.disc article:hover p,.disc article:hover ul.dash li{color:var(--on-dark-2)}
.disc article:hover .ico{background:var(--red);color:#fff}
.disc article:hover .code{color:#FF6B6F}

/* Case cards lift */
.case{transition:transform .35s,box-shadow .35s;position:relative;z-index:0}
.case:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(10,31,51,.35);z-index:1}

/* Map */
.two-map{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center}
.two-map h2{font-size:var(--s3);font-weight:700}
.mapsec .lead{color:var(--on-dark-2)}
.legend{list-style:none;padding:0;margin:0;display:grid;gap:12px;font-size:.95rem;color:var(--on-dark-2)}
.legend li{display:flex;align-items:center;gap:12px}
.lg{width:12px;height:12px;border-radius:50%;background:#5B7088;flex:none}
.lg.ours{background:#FF4B52;box-shadow:0 0 0 5px rgba(255,75,82,.2)}
.map{margin:0;border:1px solid var(--line-dark);border-radius:12px;background:radial-gradient(600px 400px at 60% 50%,rgba(54,104,152,.3),transparent 70%);overflow:hidden}
.map svg{display:block;width:100%;height:auto}
.map .river{fill:none;stroke:rgba(96,165,230,.55);stroke-width:5;stroke-linecap:round}
.map .rv-t{fill:rgba(130,180,230,.6);font:600 10px var(--f-body);letter-spacing:.25em}
.map .dot{fill:#FF4B52}
.map .pulse{fill:none;stroke:#FF4B52;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-out infinite}
.map .site:nth-child(odd) .pulse{animation-delay:1.2s}
.map .dot2{fill:#5B7088}
.map .nm{fill:#fff;font:700 15px var(--f-display)}
.map .nt{fill:#AFC0D2;font:500 11.5px var(--f-body)}
.map .nm2{fill:#8496AA;font:600 12.5px var(--f-body)}
.map .scale{fill:rgba(175,192,210,.5);font:500 10px var(--f-body);letter-spacing:.1em}
@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.4);opacity:0}}
@media (max-width:960px){.two-map{grid-template-columns:1fr;gap:40px}}

/* Scroll reveal (only when JS runs; content is visible without it) */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}.mq-track,.map .pulse{animation:none}.disc article:hover,.case:hover{transform:none}}

/* ===== v4 photography ===== */
.hero-photo{min-height:min(880px,100vh)}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;animation:kb 24s ease-out both}
@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-photo::before{z-index:-1;background:linear-gradient(90deg,rgba(7,22,38,.94) 0%,rgba(7,22,38,.82) 38%,rgba(7,22,38,.35) 70%,rgba(7,22,38,.15) 100%),linear-gradient(0deg,rgba(7,22,38,.9) 0%,rgba(7,22,38,0) 40%)!important}
.hero-photo::after{display:none}
.hero-photo .hero-grid{grid-template-columns:minmax(0,1fr)!important;max-width:var(--wrap)}
.hero-photo .hero-grid>div{max-width:720px}
.hero-photo h1{background:none;color:#fff}
@media (max-width:700px){.hero-photo::before{background:linear-gradient(180deg,rgba(7,22,38,.88) 0%,rgba(7,22,38,.72) 60%,rgba(7,22,38,.92) 100%)!important}.hero-bg img{object-position:70% 50%}}

/* Service cards with photos */
.disc article.has-img{padding-top:0}
.card-img{margin:0 -36px 8px;aspect-ratio:16/10;overflow:hidden;background:var(--soft)}
.card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.disc article:hover .card-img img{transform:scale(1.06)}
.has-img .ico{margin-top:-38px;position:relative;z-index:1;background:#fff!important;box-shadow:0 8px 20px rgba(10,31,51,.15)}
.disc article.has-img:hover .ico{background:var(--red)!important}
@media (max-width:620px){.card-img{margin:0 -26px 8px}}

/* Our people */
.people-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:72px;align-items:center}
.people-main{margin:0;position:relative;border-radius:10px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(10,31,51,.5)}
.people-main img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.people-main figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 24px 18px;background:linear-gradient(0deg,rgba(7,22,38,.85),transparent);color:#fff;font-size:.9rem;font-weight:600}
.people-copy h2{font-size:var(--s3);font-weight:700}
.people-copy .lead{margin:20px 0 24px}
.people-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px}
.people-thumbs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block}
@media (max-width:960px){.people-grid{grid-template-columns:1fr;gap:44px}}

/* Mosaic strip */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:260px 260px;gap:6px;background:var(--navy);padding:6px}
.mosaic a{position:relative;overflow:hidden;display:block}
.mosaic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .4s;filter:saturate(.9)}
.mosaic a:hover img{transform:scale(1.07);filter:saturate(1.1)}
.mosaic .m1{grid-column:1/3;grid-row:1/3}.mosaic .m2{grid-column:3/5}.mosaic .m3{grid-column:5/6;grid-row:1/3}.mosaic .m4{grid-column:3/4}.mosaic .m5{grid-column:4/5}
.mosaic-cta{grid-column:6/7;grid-row:1/3;background:var(--red);display:grid!important;place-items:center;text-decoration:none;color:#fff;font-family:var(--f-display);font-weight:600;font-size:1.3rem;text-align:center;padding:20px;transition:background .3s}
.mosaic-cta span::after{content:" →"}
.mosaic-cta:hover{background:var(--red-2)}
@media (max-width:900px){.mosaic{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,200px)}.mosaic .m1{grid-column:1/3;grid-row:auto}.mosaic .m2,.mosaic .m4,.mosaic .m5{grid-column:auto}.mosaic .m3{grid-column:auto;grid-row:span 2}.mosaic-cta{grid-column:auto;grid-row:auto}}

/* Service rows photo */
.svc-photo{margin:26px 0 0;border-radius:8px;overflow:hidden}
.svc-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s}
.svc:hover .svc-photo img{transform:scale(1.04)}

/* Gallery + lightbox */
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;grid-auto-flow:dense}
.g-item{position:relative;display:block;overflow:hidden;border-radius:8px;aspect-ratio:4/3;background:var(--soft)}
.g-item:nth-child(1),.g-item:nth-child(8){grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.g-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.g-item span{position:absolute;left:0;right:0;bottom:0;padding:36px 16px 14px;color:#fff;font-size:.88rem;font-weight:600;background:linear-gradient(0deg,rgba(7,22,38,.85),transparent);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.g-item:hover img{transform:scale(1.06)}
.g-item:hover span,.g-item:focus-visible span{opacity:1;transform:none}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.g-item span{opacity:1;transform:none}}
.lb{position:fixed;inset:0;z-index:50;background:rgba(5,15,26,.94);display:flex;align-items:center;justify-content:center;padding:max(20px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}
.lb figure{margin:0;max-width:min(1200px,100%);text-align:center}
.lb img{max-width:100%;max-height:80vh;border-radius:6px;display:block;margin:0 auto}
.lb figcaption{color:#DCE6F0;margin-top:14px;font-weight:600}
.lb button{position:absolute;background:rgba(255,255,255,.1);border:0;color:#fff;font-size:2rem;width:52px;height:52px;border-radius:50%;cursor:pointer;line-height:1}
.lb button:hover{background:var(--red)}
.lb-x{top:max(20px,env(safe-area-inset-top,0px));right:max(20px,env(safe-area-inset-right,0px))}.lb-p{left:max(16px,env(safe-area-inset-left,0px));top:50%}.lb-n{right:max(16px,env(safe-area-inset-right,0px));top:50%}

/* Company team band */
.team-band figure{margin:0;position:relative}
.team-band img{display:block;width:100%;height:clamp(320px,52vw,640px);object-fit:cover;object-position:50% 60%}
.team-band figcaption{position:absolute;left:0;right:0;bottom:0;padding:60px max(20px,calc((100vw - var(--wrap))/2 + 20px)) 28px;background:linear-gradient(0deg,rgba(7,22,38,.85),transparent);color:#fff;font-family:var(--f-display);font-size:1.25rem;font-weight:600}

/* Contact photo */
.contact-photo{margin:28px 0 0;border-radius:8px;overflow:hidden}
.contact-photo img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
@media (prefers-reduced-motion:reduce){.hero-bg img{animation:none}}

/* ===== v5 international + dynamic ===== */
/* utility bar */
.util{background:#06131F;color:#AFC0D2;font-size:.8rem;font-weight:600;position:relative;z-index:10}
.util-in{display:flex;justify-content:space-between;gap:16px;padding-block:8px;flex-wrap:wrap}
.util-loc{display:flex;align-items:center;gap:14px}
.util b{color:#fff;font-weight:700;margin-right:6px}
.util time{font-variant-numeric:tabular-nums;color:#FF8A8F}
.util .sep{width:1px;height:12px;background:rgba(255,255,255,.2)}
.util-links{display:flex;gap:22px}
@media (max-width:640px){.util-links{display:none}}
body.home header.top{top:calc(env(safe-area-inset-top,0px) + 34px)}
body.home header.top.scrolled{top:env(safe-area-inset-top,0px)}
body.home .hero .hero-grid{padding-top:200px}
@media (max-width:1180px){
  .menu-btn{display:inline-block}.hdr-cta{display:none}
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:6px max(20px,env(safe-area-inset-right,0px)) 18px max(20px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);box-shadow:0 20px 30px rgba(10,31,51,.08)}
  nav.main.open{display:flex}
  nav.main a{padding:15px 0;border-bottom:1px solid var(--line);color:var(--ink-2)!important}
  nav.main a[aria-current="page"]::after{display:none}
  nav.main a[aria-current="page"]{color:var(--red)!important}
}
nav.main{gap:24px}
nav.main a{font-size:.92rem}

/* hero slideshow */
.slides img{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease;animation:none}
.slides img.on{opacity:1;animation:kb 9s ease-out both}
.slide-dots{display:flex;gap:8px;margin-top:44px}
.slide-dots i{width:34px;height:3px;background:rgba(255,255,255,.25);border-radius:2px;overflow:hidden;position:relative}
.slide-dots i.on::after{content:"";position:absolute;inset:0;background:#FF4B52;animation:bar 6s linear both}
@keyframes bar{from{transform:translateX(-100%)}to{transform:none}}
/* rotating word */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rot{display:block;position:relative;height:1.12em;overflow:hidden;color:#FF5A5F}
.rot span{display:block;position:absolute;left:0;top:0;white-space:nowrap;transform:translateY(110%);opacity:0;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .7s}
.rot span.on{transform:none;opacity:1}
.rot span.out{transform:translateY(-110%);opacity:0}
.no-js .rot span:first-child{transform:none;opacity:1}

/* page-head photo */
.ph-photo{min-height:440px;display:flex;align-items:flex-end}
.ph-photo .wrap{width:100%}
.ph-bg{position:absolute;inset:0;z-index:-2}
.ph-bg img{width:100%;height:100%;object-fit:cover;animation:kb 18s ease-out both}
.ph-photo::before{background:linear-gradient(90deg,rgba(7,22,38,.95),rgba(7,22,38,.72) 55%,rgba(7,22,38,.4))!important}
.ph-photo::after{display:none}

/* bridge section */
.bridge-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.route{margin:0;border:1px solid var(--line-dark);border-radius:14px;background:radial-gradient(500px 300px at 30% 30%,rgba(93,169,240,.18),transparent 70%),radial-gradient(400px 260px at 85% 80%,rgba(255,75,82,.18),transparent 70%);overflow:hidden}
.route svg{display:block;width:100%;height:auto}
.route .rt-line{animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-28}}
.route .n1{fill:#fff;font:700 15px var(--f-display);letter-spacing:.08em}
.route .n2{fill:#AFC0D2;font:500 12px var(--f-body)}
.route .ring{fill:none;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-out infinite}
.route .ring.b{stroke:#5DA9F0}.route .ring.r{stroke:#FF4B52;animation-delay:1.2s}
ol.flow{list-style:none;padding:0;margin:0;display:grid;gap:4px;counter-reset:f}
ol.flow li{display:flex;gap:18px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line-dark)}
ol.flow li:last-child{border-bottom:0}
.fi{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(255,75,82,.12);color:#FF6B6F;transition:background .3s,color .3s}
.fi svg{width:22px;height:22px;stroke-width:1.6}
ol.flow li:hover .fi{background:#FF4B52;color:#fff}
ol.flow h3{font-size:1.05rem;font-weight:600;color:#fff;margin-bottom:4px}
ol.flow p{margin:0;font-size:.94rem;color:var(--on-dark-2)}
@media (max-width:960px){.bridge-grid{grid-template-columns:1fr;gap:36px}}

/* showroom */
.st-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.st-grid h2{font-size:var(--s3);font-weight:700}
.st-grid .lead{margin:20px 0 32px}
.st-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.st-cats div{display:flex;align-items:center;gap:14px;padding:20px;border:1px solid var(--line);border-radius:10px;background:#fff;transition:border-color .3s,transform .3s,box-shadow .3s}
.st-cats div:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:0 18px 36px -24px rgba(10,31,51,.4)}
.st-cats .ico{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(195,20,30,.07);color:var(--red)}
.st-cats .ico svg{width:22px;height:22px;stroke-width:1.6}
.st-cats b{font-size:.98rem;font-weight:700}
@media (max-width:960px){.st-grid{grid-template-columns:1fr;gap:40px}}
@media (max-width:440px){.st-cats{grid-template-columns:1fr}}
.show-grid .ico{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:rgba(195,20,30,.07)}
.show-grid .ico svg,.disc .ico svg{stroke-width:1.5}
ul.why li{margin-bottom:6px}
ul.why b{color:var(--ink)}
.tall-photo{margin:0;border-radius:10px;overflow:hidden;align-self:stretch}
.tall-photo img{width:100%;height:100%;min-height:420px;object-fit:cover;display:block}

/* services detail */
.recv{grid-column:1/-1;background:var(--soft);border-radius:10px;padding:24px 26px;border-left:3px solid var(--red)}
.svc p.muted{max-width:60ch}
.foot-cols b.fo{display:block;color:#fff;font-weight:700;font-size:.85rem;margin-bottom:2px}
.foot-cols ul li{line-height:1.5}
@media (prefers-reduced-motion:reduce){.slides img.on,.ph-bg img{animation:none}.route .rt-line,.route .ring{animation:none}.rot span{transition:none}}

.svc .cols{align-items:start}.recv{align-self:start}
@media (max-width:420px){.hero h1{font-size:2.2rem}}