/* Al Dow Contracting — coming soon page (aldow.com.sa) */
@font-face{font-family:"Jost";font-weight:400;font-display:swap;src:url(../fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:500;font-display:swap;src:url(../fonts/jost-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Plex Arabic";font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Plex Arabic";font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Kufi";font-weight:700;font-display:swap;src:url(../fonts/noto-kufi-arabic-arabic-700-normal.woff2) format("woff2")}

:root{--navy:#1a2a57;--navy-3:#0a1226;--gold:#c9a66c;--gold-2:#dcc093;--ease:cubic-bezier(.2,.7,.2,1);--gut:clamp(16px,4vw,40px)}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--navy-3);color:#fff;font:400 16px/1.8 "Plex Arabic","Jost",system-ui,"Segoe UI",Tahoma,sans-serif;overflow-x:hidden}
[lang=en]{font-family:"Jost",system-ui,"Segoe UI",sans-serif}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p,h1,ul{margin:0;padding:0}
ul{list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* background */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.bg__poster,.bg__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bg__poster{animation:kb 20s ease-out both}
.bg__video{opacity:0;transition:opacity 1.4s}
.is-playing .bg__video{opacity:1}
.bg__shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(10,18,38,.55),rgba(10,18,38,.9) 75%),linear-gradient(180deg,rgba(10,18,38,.7),rgba(10,18,38,.35) 45%,rgba(10,18,38,.92))}
.bg__grid{position:absolute;inset:0;display:flex;justify-content:space-between;padding-inline:var(--gut)}
.bg__grid i{width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.1) 30%,rgba(255,255,255,.1) 70%,transparent);transform-origin:top;animation:drop 1.8s var(--ease) both}
.bg__grid i:nth-child(2){animation-delay:.12s}.bg__grid i:nth-child(3){animation-delay:.24s}.bg__grid i:nth-child(4){animation-delay:.36s}.bg__grid i:nth-child(5){animation-delay:.48s}

/* layout */
.cs{min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(22px,4vh,44px) var(--gut) 20px;text-align:center}
.cs__top{display:flex;justify-content:center;animation:rise 1s var(--ease) both}
.cs__logo{height:clamp(64px,9vw,92px);width:auto}
.cs__mid{display:grid;justify-items:center;align-content:center;padding-block:clamp(16px,3vh,36px);max-width:900px;margin-inline:auto;width:100%}
.cs__mid>*{animation:rise 1s var(--ease) both}
.cs__mid>:nth-child(2){animation-delay:.1s}.cs__mid>:nth-child(3){animation-delay:.2s}.cs__mid>:nth-child(4){animation-delay:.3s}
.cs__mid>:nth-child(5),.cs__mid>:nth-child(6){animation-delay:.4s}.cs__mid>:nth-child(7){animation-delay:.5s}.cs__mid>:nth-child(8){animation-delay:.6s}

.cs__badge{display:inline-flex;align-items:center;gap:14px;padding:8px 20px;border:1px solid rgba(201,166,108,.55);color:var(--gold-2);font-size:15px;font-weight:600;margin-bottom:22px;background:rgba(10,18,38,.35);backdrop-filter:blur(4px)}
.cs__badge [lang=en]{font-size:12.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase}
.cs__badge i{width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}
.cs__title{font:700 clamp(34px,5.4vw,66px)/1.3 "Kufi","Plex Arabic",sans-serif;text-shadow:0 6px 40px rgba(0,0,0,.4)}
.cs__title-en{margin-top:12px;font:500 clamp(14px,1.7vw,20px)/1.5 "Jost",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-2)}

/* construction tape progress */
.build{width:min(420px,80%);margin:26px auto 24px}
.build__bar{display:block;height:8px;background:rgba(255,255,255,.12);overflow:hidden;position:relative}
.build__bar i{position:absolute;inset-block:0;inset-inline-start:0;width:68%;background:repeating-linear-gradient(-45deg,var(--gold) 0 10px,var(--navy-3) 10px 20px);background-size:28.28px 100%;animation:grow 2.4s var(--ease) both,tape 1.2s linear infinite}

.cs__text{max-width:56ch;font-size:clamp(16px,1.6vw,18px);color:rgba(255,255,255,.86)}
.cs__text--en{margin-top:8px;font-size:clamp(14px,1.4vw,16px);color:rgba(255,255,255,.66)}

.cs__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 24px;border:1px solid transparent;font-weight:600;font-size:15px;transition:background .3s,color .3s,transform .3s var(--ease)}
.btn svg{width:19px;height:19px;fill:currentColor;flex:none}
.btn small{font:500 12px "Jost",sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin-inline-start:6px}
.btn [dir=ltr]{font-family:"Jost",sans-serif;font-weight:500;letter-spacing:.04em}
.btn--gold{background:var(--gold);color:var(--navy-3)}
.btn--gold:hover{background:var(--gold-2);transform:translateY(-2px)}
.btn--glass{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.4);backdrop-filter:blur(6px)}
.btn--glass:hover{background:#fff;color:var(--navy-3)}

.cs__profile{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px;padding:6px 2px;border-bottom:1px solid rgba(201,166,108,.5);color:var(--gold-2);font-size:15px;transition:color .3s,border-color .3s}
.cs__profile:hover{color:#fff;border-color:#fff}
.cs__profile svg{width:18px;height:18px;fill:currentColor}
.cs__profile i{width:4px;height:4px;background:currentColor;transform:rotate(45deg)}
.cs__profile small{font:400 12px "Jost",sans-serif;opacity:.7}

.cs__foot{display:grid;gap:16px;justify-items:center;animation:rise 1s .7s var(--ease) both}
.cs__svc{display:flex;flex-wrap:wrap;justify-content:center;border-top:1px solid rgba(255,255,255,.14);padding-top:18px;gap:6px 0}
.cs__svc li{display:grid;padding-inline:clamp(14px,2.4vw,30px);font-size:14px;line-height:1.5;color:rgba(255,255,255,.88)}
.cs__svc li+li{border-inline-start:1px solid rgba(201,166,108,.35)}
.cs__svc span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.cs__copy{font-size:12.5px;color:rgba(255,255,255,.5)}

@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes kb{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes drop{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes grow{from{width:0}to{width:68%}}
@keyframes tape{to{background-position:28.28px 0}}

@media (max-width:640px){
  .cs__btns{flex-direction:column;align-items:stretch;width:min(100%,360px)}
  .cs__svc{display:grid;grid-template-columns:1fr 1fr;gap:14px 0;width:100%}
  .cs__svc li:nth-child(3){border-inline-start:0}
  .bg__grid i:nth-child(2),.bg__grid i:nth-child(4){display:none}
  .cs__badge [lang=en]{letter-spacing:.2em}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}