@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(fonts/bc-600.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(fonts/bc-700.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:400;font-display:swap;src:url(fonts/b-400.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:500;font-display:swap;src:url(fonts/b-500.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:600;font-display:swap;src:url(fonts/b-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400;font-display:swap;src:url(fonts/plexar-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:600;font-display:swap;src:url(fonts/plexar-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:700;font-display:swap;src:url(fonts/plexar-700.woff2) format("woff2")}
/* Palette: spruce (brand), mist (ground), steel (lines/secondary), oil amber (the product, used only where oil is meant) */
:root{--spruce:#12352E;--spruce-2:#0C2621;--mist:#EDF1EE;--paper:#FFFFFF;--steel:#5E6F69;--line:#CBD5CF;--oil:#E3A21A;--oil-deep:#8F6106;--ink:#17201D;
--body:Barlow,system-ui,sans-serif;--head:"Barlow Condensed",Barlow,system-ui,sans-serif}
html[lang=ar]{--body:"IBM Plex Sans Arabic",system-ui,sans-serif;--head:"IBM Plex Sans Arabic",system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--mist);color:var(--ink);font-family:var(--body);font-size:1.125rem;line-height:1.6}
html[lang=ar] body{line-height:1.85}
img,svg{max-width:100%}
a{color:var(--spruce);text-underline-offset:3px}a:hover{color:var(--oil-deep)}
:focus-visible{outline:3px solid var(--oil);outline-offset:2px}
.skip{position:absolute;inset-inline-start:-9999px}.skip:focus{inset-inline-start:16px;top:16px;background:#fff;padding:8px 12px;z-index:10}
.wrap{max-width:1200px;margin:0 auto;padding-inline:24px}
h1,h2,h3{font-family:var(--head);color:var(--spruce);margin:0;font-weight:700}
h1{font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1.02;letter-spacing:-.005em;max-width:16ch}
h2{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.08}
h3{font-size:1.45rem;line-height:1.15;font-weight:600}
html[lang=ar] h1{line-height:1.3;font-size:clamp(2rem,4.4vw,3.5rem);max-width:18ch}
html[lang=ar] h2,html[lang=ar] h3{line-height:1.35}
p{margin:0}
.stack{display:flex;flex-direction:column;gap:18px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:48px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}
section{padding-block:72px}
.band{background:var(--paper);border-block:1px solid var(--line)}
.dark{background:var(--spruce);color:#E7EEEA}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark a{color:#fff}
.card{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:28px}
.card p{font-size:1rem;color:var(--steel)}
.card .ill{margin-bottom:14px}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:12px 22px;border-radius:3px;text-decoration:none;border:2px solid transparent;font:inherit;font-weight:600;cursor:pointer;letter-spacing:.01em}
.btn-amber{background:var(--oil);color:var(--ink)!important}.btn-amber:hover{background:#F0B53A}
.btn-line{border-color:currentColor}
.btn-green{background:var(--spruce);color:#fff!important}.btn-green:hover{background:var(--spruce-2)}
.row{display:flex;flex-wrap:wrap;gap:14px}
/* illustrations */
.ill{display:block;flex:0 0 auto}
.ill .ink,.scene .ink,.drawing .ink{fill:none;stroke:var(--spruce);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ink .oil{stroke:var(--oil);stroke-width:2.6}
.ink .oil-fill{fill:var(--oil);stroke:var(--oil-deep)}
.ink .oil-soft{fill:rgba(227,162,26,.35);stroke:none}
/* header */
.hdr{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:5}
.hdr .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:14px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--spruce)}
.logo b{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:.02em;display:flex;gap:6px}.logo span{font-weight:600;color:var(--steel)}
.nav{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:1rem;font-weight:500}
.nav a{text-decoration:none;padding-block:8px}.nav a[aria-current=page]{color:var(--oil-deep);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.lang{font-size:1rem;font-weight:600;text-decoration:none;border:1px solid var(--spruce);border-radius:3px;padding:8px 14px;min-height:44px;display:inline-flex;align-items:center}
.menu-btn{display:none}
@media (max-width:900px){.menu-btn{display:inline-flex;background:none;border:1px solid var(--spruce);border-radius:3px;min-height:44px;padding:8px 14px;font:inherit;font-weight:600;color:var(--spruce)}
.nav{display:none;flex-basis:100%;flex-direction:column}.nav.open{display:flex}}
/* hero: copy + certificate plate, then the process drawing as the one memorable element */
.hero{padding-block:72px 0;background:var(--paper)}
.hero-top{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:48px;align-items:end}
@media (max-width:900px){.hero-top{grid-template-columns:minmax(0,1fr)}}
.hero-copy{display:flex;flex-direction:column;gap:22px}
.lead{font-size:1.2rem;color:var(--steel);max-width:58ch}
.cert{border:2px solid var(--spruce);border-radius:4px;padding:20px 22px;display:flex;gap:18px;align-items:center;background:var(--mist)}
.cert .seal{flex:0 0 auto;width:72px;height:72px;border-radius:50%;border:2px solid var(--spruce);display:flex;align-items:center;justify-content:center;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.2rem;color:var(--spruce)}
.cert small{display:block;font-size:.9rem;color:var(--steel)}
.cert strong{font-family:"Barlow Condensed",sans-serif;font-size:1.35rem;display:block;letter-spacing:.01em}
.cert span{font-size:.98rem}
.scene-wrap{margin-top:56px;background:var(--spruce);padding-block:28px 18px;overflow-x:auto}
.scene{display:block;min-width:880px;width:100%;height:auto}
.scene .ink{stroke:#DCE6E1}
.scene .ink .oil{stroke:var(--oil)}
.scene text{fill:#DCE6E1;font-family:var(--body);font-size:15px;font-weight:500}
.scene .flow-base{fill:none;stroke:rgba(227,162,26,.25);stroke-width:4}
.scene .flow-draw{fill:none;stroke:var(--oil);stroke-width:4;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s cubic-bezier(.6,.1,.3,1) .3s forwards}
.scene .flow-run{fill:none;stroke:#FFD677;stroke-width:4;stroke-linecap:round;stroke-dasharray:2 22;opacity:0;animation:run 1.4s linear infinite,show .1s 2.9s forwards}
.scene .node{fill:var(--spruce);stroke:var(--oil);stroke-width:3}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes run{to{stroke-dashoffset:-24}}
@keyframes show{to{opacity:.9}}
.scene-note{padding-block:16px 0;font-size:1rem}
.scene-note a{font-weight:600}
/* key facts as equipment nameplates */
.plates{padding-block:56px}
.plate-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:0;border:1px solid var(--line);background:var(--paper);border-radius:4px}
.plate{display:flex;gap:18px;align-items:flex-start;padding:28px}
.plate+.plate{border-inline-start:1px solid var(--line)}
@media (max-width:700px){.plate+.plate{border-inline-start:0;border-top:1px solid var(--line)}}
.plate-big{font-family:var(--head);font-weight:700;font-size:2rem;line-height:1.1;color:var(--spruce);margin-bottom:6px}
.plate p:not(.plate-big){font-size:1rem;color:var(--steel)}
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:64px}
.duo-item{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:0;border-top:2px solid var(--spruce)}
.steps li{padding:24px 20px 28px;border-bottom:1px solid var(--line);position:relative}
.steps li .n{position:absolute;top:24px;inset-inline-end:20px;font-family:var(--head);font-weight:700;font-size:1.6rem;color:var(--steel)}
.steps li b{display:block;font-family:var(--head);font-size:1.35rem;font-weight:600;color:var(--spruce);margin:12px 0 6px}
.steps li p{font-size:1rem;color:var(--steel)}
.why,.docs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.why li,.docs li{display:flex;gap:14px;align-items:flex-start}
.docs li{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:14px 16px}
.drawing{display:block;width:100%;max-width:880px;height:auto;margin-inline:auto}
.caption{text-align:center;font-size:.98rem;color:var(--steel);margin-top:12px}
/* defs & table */
dl.facts{margin:0;display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:12px 20px;font-size:1rem}
dl.facts dt{font-weight:600;color:var(--steel)}dl.facts dd{margin:0}
.dark dl.facts dt{color:#B9C7BE}
@media (max-width:520px){dl.facts{grid-template-columns:1fr;gap:2px}dl.facts dd{margin-bottom:10px}}
.tbl{overflow-x:auto;background:var(--paper);border:1px solid var(--line);border-radius:4px}
table{width:100%;border-collapse:collapse;font-size:1rem}
caption{text-align:start;padding:16px 24px 8px;font-family:var(--head);font-weight:700;font-size:1.35rem;color:var(--spruce)}
th,td{text-align:start;padding:12px 24px;border-bottom:1px solid var(--line)}
thead th{border-bottom:2px solid var(--spruce)}
.tbc{color:var(--oil-deep);font-weight:600}
.tbc,td:last-child{white-space:nowrap}
.card.dark{background:var(--spruce);color:#E7EEEA;border:0}
.card.dark p{color:#D3DED8}
.card.dark .btn-amber{color:var(--ink)!important}
/* forms */
form.card{display:flex;flex-direction:column;gap:16px;font-size:1rem}
form label{display:flex;flex-direction:column;gap:6px;font-weight:500}
form input[type=text],form input[type=email],form input[type=tel],form textarea,form select{font:inherit;font-weight:400;padding:12px;border:1px solid #8C978F;border-radius:3px;background:#fff;color:var(--ink)}
form .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
form label.check{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;font-size:.95rem}
form label.check input{width:20px;height:20px;margin-top:4px;flex:0 0 auto}
.hp{position:absolute!important;inset-inline-start:-10000px;width:1px;height:1px;overflow:hidden}
.notice{padding:14px 18px;border-radius:4px;background:#E4EFE7;border:1px solid #9DBBA7}
.notice.err{background:#F8E6E0;border-color:#D7A493}
/* map */
.map{min-height:320px;border-radius:4px;overflow:hidden;background:var(--spruce);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:20px}
.map iframe{width:100%;height:360px;border:0}
.map p{font-size:.95rem;color:#C9D3CC;max-width:420px}
.map a{color:#fff;font-weight:600}.map a:hover{color:#FFD677}
/* legal */
.legal{max-width:820px}.legal h2{font-size:1.6rem;margin-top:36px}.legal p,.legal li{margin-block:10px}
/* footer */
.ftr{background:var(--spruce-2);color:#C9D3CC;font-size:.95rem;padding-block:32px}
.ftr .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.ftr a{color:#E2E8E4}
.ftr nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block;white-space:nowrap}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scene .flow-draw{animation:none;stroke-dashoffset:0}.scene .flow-run{display:none}}
.cert>div{min-width:0}.cert strong{overflow-wrap:anywhere}
.grid2>.card{align-self:start}
@media (max-width:520px){.cert{flex-direction:column;align-items:flex-start}}
.badge{display:inline-flex;align-items:center;gap:12px;font-weight:600;color:var(--spruce);border:2px solid var(--spruce);border-radius:4px;padding:14px 18px;background:var(--mist);align-self:end;justify-self:start}
.cert-line{display:flex;gap:20px;align-items:center;padding:32px}
.cert-line .ill .ink{stroke:#fff}
.cert-line p{font-size:1.15rem;color:#E7EEEA;max-width:62ch}
/* motion pieces */
.scene .drop{fill:#FFD677;opacity:0;filter:drop-shadow(0 0 6px rgba(255,214,119,.9))}
.motion .scene .flow-run{display:none}
.voyage{background:var(--paper);border-block:1px solid var(--line)}
.voyage-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;align-items:center}
@media (max-width:900px){.voyage-grid{grid-template-columns:minmax(0,1fr)}}
.voyage-copy{display:flex;flex-direction:column;gap:16px}
.voyage-copy p{color:var(--steel)}
.routemap{margin:0}
.routemap-box{position:relative;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#F4F7F5;aspect-ratio:1000/640}
.routemap-box img,.routemap-box svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.route-base{fill:none;stroke:rgba(18,53,46,.18);stroke-width:3;stroke-dasharray:2 7;stroke-linecap:round}
.route-line{fill:none;stroke:var(--oil);stroke-width:3.5;stroke-linecap:round}
.city circle{fill:var(--paper);stroke:var(--spruce);stroke-width:3}
.city text{font-family:var(--body);font-size:20px;font-weight:600;fill:var(--spruce);paint-order:stroke;stroke:#F4F7F5;stroke-width:5px}
.city-eu circle{stroke:var(--steel)}.city-eu text{fill:var(--steel);font-size:17px}
.vessel path,.vessel rect{fill:var(--spruce);stroke:none}.vessel .v-oil{fill:var(--oil)}
.pour{display:block;width:100%;max-width:420px;height:auto}
.pour .ink{fill:none;stroke:var(--spruce);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.pour .ink .oil{stroke:var(--oil);stroke-width:3}
.pour .level{fill:var(--oil);stroke:none;opacity:.85}
.pour .pdrop{fill:var(--oil);stroke:none;opacity:0}
.pour .fryer,.pour .jcan{transform-box:fill-box}
@media (max-width:600px){.city text{font-size:40px;stroke-width:8px}.city-eu text{font-size:34px}.city circle{r:11}}