/* SEFCO site header (task D8, "Floor Indicator"). Same logic as the law-firm header: the root container is Elementor Sticky
   (Top, Effects Offset 80). At the top it sits over the dark hero; after 80px Elementor adds .elementor-sticky--effects and
   the rules below turn it into a slim fixed graphite bar with a floor display and a gold travel line. */
:root{--ys-hdr-h:132px;--ys-amber:#FFB23E}
@media (max-width:1024px){:root{--ys-hdr-h:104px}}
@media (max-width:767px){:root{--ys-hdr-h:96px}}

/* the header floats over the first (dark) section of every page */
.ys-hdr{background:transparent;margin-bottom:calc(-1 * var(--ys-hdr-h))!important;transition:background-color .35s ease,box-shadow .35s ease}
/* the home page (owner design, pages 5/6) already leaves 150px above its hero text for a header */
body:not(.page-id-5):not(.page-id-6) [data-elementor-type="wp-page"]>.e-con:first-child{padding-top:calc(var(--padding-top, 0px) + var(--ys-hdr-h))!important}
.ys-hdr .elementor-heading-title a{color:inherit;text-decoration:none}
.ys-hdr .ys-ltr .elementor-heading-title{direction:ltr;unicode-bidi:isolate}
.ys-hdr .ys-fix{flex-shrink:0!important}
.ys-hdr .ys-flex1{flex:1 1 0%!important;min-width:0;--width:auto}

/* children of the header rows take their own width (Elementor gives inner containers 100% by default) */
.ys-util .e-con,.ys-bar>.e-con{--width:auto;width:auto!important;flex:0 0 auto}
.ys-util>.e-con-inner>.e-con,.ys-util>.e-con{flex-wrap:nowrap}

/* utility strip */
.ys-util{border-bottom:1px solid rgba(255,255,255,.1);transition:opacity .25s}
.ys-util .elementor-heading-title{font-size:.84rem!important;line-height:1.4!important}
.ys-u-num .elementor-heading-title{font-family:"Archivo",sans-serif!important;font-weight:700!important}
.ys-pulse{display:block;width:7px;height:7px;border-radius:50%;background:#ff5a3c;box-shadow:0 0 8px #ff5a3c;animation:ys-pulse 1.6s infinite}
@keyframes ys-pulse{50%{opacity:.35}}
.ys-lang{display:inline-block;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:2px 12px;font-weight:600;font-size:.84rem;line-height:1.5;color:var(--e-global-color-ystint)!important;text-decoration:none}
.ys-lang:hover{border-color:var(--e-global-color-primary)}
.ys-lang[lang="ar"]{font-family:"Alexandria",sans-serif}
.ys-lang[lang="en"]{font-family:"Archivo",sans-serif}

/* main bar */
.ys-bar{transition:padding .35s ease}
.ys-logo,.ys-logo a{display:block;line-height:0}
.ys-logo img{height:64px!important;width:auto!important;max-width:none!important;display:block;transition:height .35s ease}
.ys-floor-w{display:none}
.ys-floor{display:inline-flex;align-items:center;gap:6px;background:#0a1018;border-radius:6px;padding:4px 10px;box-shadow:inset 0 1px 4px rgba(0,0,0,.7)}
.ys-fl-n{font-family:"Archivo",sans-serif;font-weight:800;color:var(--ys-amber);letter-spacing:.08em;font-size:1.05rem;min-width:2.2ch;text-align:center;line-height:1.2;
  text-shadow:0 0 10px rgba(255,178,62,.65);font-variant-numeric:tabular-nums;-webkit-mask:radial-gradient(circle,#000 52%,transparent 58%) 0 0/3px 3px;mask:radial-gradient(circle,#000 52%,transparent 58%) 0 0/3px 3px}
.ys-fl-d{font-size:.72rem;color:var(--ys-amber);text-shadow:0 0 8px rgba(255,178,62,.7);width:10px;text-align:center;transition:opacity .2s}
.ys-nav .elementor-nav-menu--main .elementor-item{font-family:var(--e-global-typography-accent-font-family),sans-serif;font-weight:600;font-size:.98rem;
  color:var(--e-global-color-ystint)!important;padding:10px 14px!important;position:relative;transition:color .2s,padding .35s,font-size .35s}
.ys-nav .elementor-nav-menu--main .elementor-item::after{content:"";position:absolute;inset-inline:14px;bottom:4px;height:2px;background:var(--e-global-color-primary);
  opacity:1!important;transform:scaleX(0);transform-origin:left;transition:transform .25s}
html[dir="rtl"] .ys-nav .elementor-nav-menu--main .elementor-item::after{transform-origin:right}
.ys-nav .elementor-nav-menu--main .elementor-item:hover::after,.ys-nav .elementor-nav-menu--main .elementor-item-active::after{transform:scaleX(1)}
.ys-nav .elementor-nav-menu--main .elementor-item-active{color:#fff!important}
.ys-cta .elementor-button{padding:.75em 1.4em!important;font-size:.95rem!important;transition:padding .35s,font-size .35s}
.ys-callwrap{display:none!important}
.ys-travel-w{position:absolute!important;inset-inline-start:0;bottom:-1px;width:100%!important;height:2px;pointer-events:none;margin:0!important}
.ys-travel{display:none;height:2px;width:0;background:linear-gradient(90deg,var(--e-global-color-primary),var(--ys-amber));box-shadow:0 0 8px rgba(255,178,62,.6)}
html[dir="rtl"] .ys-travel{background:linear-gradient(-90deg,var(--e-global-color-primary),var(--ys-amber));margin-inline-start:0}

/* after 80px of scroll (Elementor adds .elementor-sticky--effects): slim fixed graphite bar */
.ys-hdr.elementor-sticky--effects{background-color:rgba(17,26,36,.9)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 24px -10px rgba(0,0,0,.6)}
.ys-hdr.elementor-sticky--effects .ys-util{display:none}
/* boxed containers put their padding on .e-con-inner through these variables */
.ys-hdr.elementor-sticky--effects .ys-bar{--padding-top:9px!important;--padding-bottom:9px!important}
.ys-hdr.elementor-sticky--effects .ys-logo img{height:40px!important}
.ys-hdr.elementor-sticky--effects .ys-floor-w{display:block}
.ys-hdr.elementor-sticky--effects .ys-nav .elementor-item{padding-top:8px!important;padding-bottom:8px!important;font-size:.92rem}
.ys-hdr.elementor-sticky--effects .ys-cta .elementor-button{padding:.6em 1.2em!important;font-size:.9rem!important}
.ys-hdr.elementor-sticky--effects .ys-travel{display:block}

/* tablet and phone: the call button replaces the menu and the quote button */
@media (max-width:1024px){
  .ys-nav,.ys-cta,.ys-u-x{display:none!important}
  .ys-callwrap{display:block!important;margin-inline-start:auto!important}
  .ys-logo img{height:50px!important}
  .ys-hdr.elementor-sticky--effects .ys-logo img{height:38px!important}
}

/* ---------- the call button: a lift hall call button, lights up amber when pressed ---------- */
.ys-callbtn{display:inline-flex;align-items:center;gap:10px;background:none!important;border:0!important;padding:0!important;box-shadow:none!important;cursor:pointer;
  color:var(--e-global-color-ystint)!important;font-family:"Archivo","Alexandria",sans-serif!important;font-weight:600!important;font-size:.82rem!important;letter-spacing:.12em!important;text-transform:uppercase}
html[lang^="ar"] .ys-callbtn{letter-spacing:0!important;font-size:.9rem!important}
.ys-callbtn .cap{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 40% 35%,#f4f6f7,#b9c0c6 70%);
  box-shadow:0 0 0 3px #7d868e,0 0 0 4px rgba(0,0,0,.35),0 4px 8px rgba(0,0,0,.35);transition:box-shadow .25s,transform .1s}
.ys-callbtn svg{width:24px;height:24px;overflow:visible}
.ys-callbtn .up,.ys-callbtn .dn{fill:#3a434c;transition:transform .3s ease,fill .25s}
.ys-callbtn .x{fill:none;stroke:#8C6100;stroke-width:2.4;stroke-linecap:round}
.ys-callbtn:hover .cap{box-shadow:0 0 0 3px var(--e-global-color-primary),0 0 0 4px rgba(0,0,0,.35),0 4px 8px rgba(0,0,0,.35)}
.ys-callbtn:hover .up{transform:translateY(-1.5px)}.ys-callbtn:hover .dn{transform:translateY(1.5px)}
.ys-callbtn:hover .up,.ys-callbtn:hover .dn,.ys-callbtn[aria-expanded="true"] .up,.ys-callbtn[aria-expanded="true"] .dn{fill:#8C6100}
.ys-callbtn:active .cap{transform:translateY(1px)}
.ys-callbtn:focus-visible{outline:none}.ys-callbtn:focus-visible .cap{outline:2px solid var(--ys-amber);outline-offset:4px}
.ys-callbtn.lit .cap,.ys-callbtn[aria-expanded="true"] .cap{box-shadow:0 0 0 3px var(--ys-amber),0 0 0 4px rgba(0,0,0,.35),0 0 18px 4px rgba(255,178,62,.7)}
.ys-callbtn[aria-expanded="true"] .up{transform:translateY(-3px)}.ys-callbtn[aria-expanded="true"] .dn{transform:translateY(3px)}
.ys-hdr.elementor-sticky--effects .ys-callbtn .cap{width:38px;height:38px}
.ys-hdr.elementor-sticky--effects .ys-callbtn .lbl{display:none}

/* ---------- the panel (moved to <body> by header.js), opened behind sliding lift doors ---------- */
.ys-panel{position:fixed;inset:0;z-index:9999;background:rgba(10,16,24,.97);overflow:auto;color:#B9C2CC}
.ys-panel[hidden]{display:none}
.ys-panel .in{max-width:420px;margin:0 auto;padding:22px 20px 40px}
.ys-panel .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.ys-panel .lg{height:46px;width:auto}
.ys-panel .cop{background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),linear-gradient(160deg,#eef0f2 0%,#c7cdd3 38%,#e3e6e9 55%,#b3bac1 100%);
  border-radius:16px;padding:26px 22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.7)}
.ys-panel .scr{background:#0b1118;border-radius:8px;padding:10px 14px;text-align:center;margin-bottom:22px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 6px 14px rgba(0,0,0,.6)}
.ys-panel .scr span{font-family:"Archivo","Alexandria",sans-serif;font-weight:800;color:var(--ys-amber);letter-spacing:.1em;text-transform:uppercase;text-shadow:0 0 10px rgba(255,178,62,.65)}
html[lang^="ar"] .ys-panel .scr span{letter-spacing:0;font-weight:700}
.ys-panel ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:18px 12px}
.ys-panel li a{display:grid;justify-items:center;gap:8px;text-decoration:none;color:#2b333b}
.ys-panel .cap{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 40% 35%,#fafbfb,#c3c9cf 70%);
  box-shadow:0 0 0 5px #9aa2a9,0 0 0 6px rgba(0,0,0,.25),0 6px 10px rgba(0,0,0,.25);font-family:"Archivo",sans-serif;font-weight:800;font-size:1.05rem;color:#3a434c}
.ys-panel .ys-callbtn .cap{width:44px;height:44px;box-shadow:0 0 0 3px var(--ys-amber),0 0 0 4px rgba(0,0,0,.35),0 0 18px 4px rgba(255,178,62,.7)}
.ys-panel li a[aria-current] .cap{box-shadow:0 0 0 5px var(--ys-amber),0 0 0 6px rgba(0,0,0,.25),0 0 22px 4px rgba(255,178,62,.75)}
.ys-panel li b{font-family:"Archivo","Alexandria",sans-serif;font-weight:700;font-size:.9rem;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.ys-panel .quote{display:block;margin-top:24px;text-align:center;background:var(--e-global-color-primary);color:#111A24;border-radius:8px;padding:.9em 1em;font-weight:700;text-decoration:none;font-family:"Archivo","Alexandria",sans-serif}
.ys-panel .sosline{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;background:#1A2633;border:1px solid rgba(255,90,60,.4);border-radius:12px;padding:14px 16px;color:#B9C2CC;text-decoration:none}
.ys-panel .sosline b{font-family:"Archivo",sans-serif;color:var(--ys-amber);font-size:1.15rem}
.ys-panel .langm{display:block;text-align:center;margin-top:18px;color:#FBF4E4}
.ys-panel::before,.ys-panel::after{content:"";position:fixed;top:0;bottom:0;width:50.5%;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px),linear-gradient(160deg,#cfd5da,#9aa3ab 55%,#c3c9ce);transition:transform .5s cubic-bezier(.6,0,.3,1)}
.ys-panel::before{left:0;box-shadow:inset -2px 0 0 rgba(0,0,0,.25);transform:translateX(-101%)}
.ys-panel::after{right:0;box-shadow:inset 2px 0 0 rgba(255,255,255,.4);transform:translateX(101%)}
.ys-panel.opening::before,.ys-panel.closing::before,.ys-panel.opening::after,.ys-panel.closing::after{transform:translateX(0)}
@media (prefers-reduced-motion:reduce){.ys-panel::before,.ys-panel::after{display:none}.ys-hdr *{transition:none!important}}
body.ys-panel-open{overflow:hidden}

/* page bars that were fixed at the very top (services: .ys-callbar) now sit right under the stuck header */
:root{--ys-hdr-stuck:58px}
.ys-callbar{top:var(--ys-hdr-stuck)!important;z-index:89!important}
.ys-callbar:not(.is-on){transform:translateY(calc(-100% - var(--ys-hdr-stuck) - 4px))!important}
.ys-main:focus{outline:none}