/* SFH static site — shared design tokens + components.
   Ported from the Header/Footer/motion Design Components. Mobile-first,
   RTL-aware via [dir="rtl"] overrides and logical properties. */

:root{
  --burgundy:#A21E36; --burgundy-dark:#8A182D; --burgundy-deep:#7E1729;
  --charcoal:#22262B; --ink:#1A1A1A; --gray:#5B6169; --border:#E4E6E8; --bg-soft:#F7F7F8;
  --footer-bg:#1D2024; --footer-line:rgba(255,255,255,.10); --footer-text:#9AA0A8;
  --font-ar:"Tajawal",Arial,sans-serif; --font-en:"Manrope","Segoe UI",Arial,sans-serif;
  --font-brand-en:"Manrope","Segoe UI",Arial,sans-serif;
  --font-weight-regular:400; --font-weight-medium:500; --font-weight-semibold:600; --font-weight-bold:700;
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-md:1.0625rem; --text-lg:1.125rem;
  --heading-1:clamp(2.25rem,4.5vw,4rem); --heading-2:clamp(1.75rem,3vw,2.75rem);
  --heading-3:clamp(1.375rem,2vw,2rem); --heading-4:clamp(1.125rem,1.5vw,1.5rem);
  --ease-std:cubic-bezier(.2,0,0,1); --ease-emph:cubic-bezier(.22,1,.36,1);
  /* interaction timing: every UI transition sits inside the approved 220–300ms band */
  --dur-fast:220ms; --dur-base:240ms; --dur-slow:300ms;
  /* accessible accents on the dark footer (burgundy itself is 2.2:1 on #1D2024) */
  --footer-accent:#E07A8C; --footer-sub:#8A9097;
  --wa-green:#1A7A43;
  /* body line-heights: Arabic 1.8, English 1.625 */
  --lh-ar:1.8; --lh-en:1.625; --lh-body:var(--lh-en);
  /* sticky header metrics, maintained by js/site.js:
     --sfh-header-h   full header height (anchor offsets)
     --sfh-sticky-top header height while shown, 0 while hidden (sticky sub-navs) */
  --sfh-header-h:100px; --sfh-sticky-top:0px;
  --arrow:5px;
}
[dir="rtl"]{ --arrow:-5px; }
html[lang="ar"]{ --lh-body:var(--lh-ar); }

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{font-family:var(--font-en);font-weight:var(--font-weight-regular);line-height:var(--lh-en);color:var(--ink);background:#fff;text-wrap:pretty}
html[lang="ar"],html[lang="ar"] body{font-family:var(--font-ar)}
html[lang="ar"] body{line-height:var(--lh-ar)}
/* running text inherits the language leading through --lh-body */
html[lang="en"],html[lang="en"] body{font-family:var(--font-en)}
button,input,select,textarea{font-family:inherit}
/* bidi: phone numbers, e-mail, URLs, measurements and currency never reorder */
bdi,[dir="ltr"]{unicode-bidi:isolate}
.num,.ltr-iso{unicode-bidi:isolate;direction:ltr;display:inline-block}
a[href^="tel:"],a[href^="mailto:"],a[href^="https://wa.me"] bdi{white-space:nowrap}

/* ---------- typography hierarchy ---------- */
h1,h2,h3,h4,h5,h6{text-align:start;text-wrap:balance}
h1{font-weight:var(--font-weight-bold);line-height:1.15}
h2{font-weight:var(--font-weight-bold);line-height:1.25}
h3{font-weight:var(--font-weight-bold);line-height:1.3}
h4,h5,h6{font-weight:var(--font-weight-semibold);line-height:1.4}
html[lang="ar"] h1{line-height:1.3}
html[lang="ar"] h2{line-height:1.35}
html[lang="ar"] h3,html[lang="ar"] h4,html[lang="ar"] h5,html[lang="ar"] h6{line-height:1.4}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4,html[lang="ar"] h5,html[lang="ar"] h6{letter-spacing:normal}

/* ---------- long-form prose: justification (editorial copy only) ----------
   Opt-in only: .prose / .rich-text / [data-typography="prose"] containers and
   article paragraphs (.ins-body-para). Headings, navigation, breadcrumbs,
   buttons, forms, metadata, short card text, CTA banners, contact details and
   footer links are never justified. Below 640px justification is switched off:
   Arabic falls back to right alignment and English to left alignment. */
.prose p,.rich-text p,[data-typography="prose"] p,[data-typography="prose"] li,p[data-typography="prose"],.ins-body-para{
  text-align:justify;text-align-last:start;text-justify:inter-word;
  word-break:normal;overflow-wrap:break-word;hyphens:none;-webkit-hyphens:none}
html[lang="ar"] .prose p,html[lang="ar"] .rich-text p,html[lang="ar"] [data-typography="prose"] p,html[lang="ar"] [data-typography="prose"] li,
html[lang="ar"] p[data-typography="prose"],html[lang="ar"] .ins-body-para{line-height:var(--lh-ar)}
@media (max-width:639.98px){
  .prose p,.rich-text p,[data-typography="prose"] p,[data-typography="prose"] li,p[data-typography="prose"],.ins-body-para{text-align:left;text-align-last:auto}
  html[lang="ar"] .prose p,html[lang="ar"] .rich-text p,html[lang="ar"] [data-typography="prose"] p,html[lang="ar"] [data-typography="prose"] li,
  html[lang="ar"] p[data-typography="prose"],html[lang="ar"] .ins-body-para{text-align:right;text-align-last:auto}
}
img{max-width:100%;height:auto;display:block}
a{color:var(--burgundy);text-decoration:none}
a:hover{color:var(--burgundy-deep)}
::selection{background:var(--burgundy);color:#fff}
:focus-visible{outline:2px solid var(--burgundy);outline-offset:2px;border-radius:2px}
/* focus stays visible on dark and burgundy surfaces */
.sfh-footer :focus-visible,.cta-banner :focus-visible,.project-cta-card :focus-visible,.pd-lightbox :focus-visible,
.home-hero-slider :focus-visible,.pd-frame :focus-visible{outline-color:#fff}
.home-hero-slider:focus-visible,.pd-frame:focus-visible{outline:2px solid var(--burgundy);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
[id]{scroll-margin-top:calc(var(--sfh-header-h) + 16px)}
.container{max-width:1360px;margin:0 auto;padding-inline:20px}
@media (min-width:1024px){.container{padding-inline:40px}}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* keyboard "skip to main content" link: off-screen until focused */
.skip-link{position:fixed;top:8px;inset-inline-start:8px;z-index:100000;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:4px;background:var(--burgundy);color:#fff;font-size:14.5px;font-weight:600;line-height:normal;text-decoration:none;transform:translateY(-160%)}
.skip-link:focus,.skip-link:focus-visible{transform:none;color:#fff;outline:2px solid #fff;outline-offset:-4px}
main:focus{outline:none}

/* ---------- header ---------- */
.sfh-topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:7px 20px;background:var(--bg-soft);border-bottom:1px solid var(--border);font-size:13px;overflow:hidden}
@media (min-width:1024px){.sfh-topbar{padding:8px 40px}}
.sfh-topbar-left,.sfh-topbar-right{display:flex;gap:12px;align-items:center;min-width:0}
@media (min-width:1024px){.sfh-topbar-right{gap:16px}}
.sfh-topbar-item{color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sfh-topbar-item.trust{display:none}
/* phones: slightly tighter top bar so the hours stay visible from 390px; below that they could only
   appear truncated, so they are left to the menu, footer and contact page */
@media (max-width:479.98px){.sfh-topbar{padding-inline:16px;gap:8px}.sfh-topbar-right{gap:8px}.sfh-topbar-link,.sfh-topbar-wa{padding-inline-start:8px}}
@media (max-width:389.98px){.sfh-topbar-left .sfh-topbar-item{display:none}.sfh-topbar{justify-content:flex-end}}
@media (min-width:1024px){.sfh-topbar-item.trust{display:inline}}
.sfh-topbar-link{color:var(--gray);text-decoration:none;white-space:nowrap;padding-inline-start:12px;border-inline-start:1px solid var(--border)}
@media (min-width:1024px){.sfh-topbar-link{padding-inline-start:16px}}
.sfh-topbar-wa{display:inline-flex;align-items:center;gap:6px;color:var(--wa-green);font-weight:600;white-space:nowrap;padding-inline-start:12px;border-inline-start:1px solid var(--border);text-decoration:none}
@media (min-width:1024px){.sfh-topbar-wa{padding-inline-start:16px}}
.sfh-topbar-wa span{display:none}
@media (min-width:900px){.sfh-topbar-wa span{display:inline}}
.sfh-topbar-client{display:none;align-items:center;font-size:13px;font-weight:600;color:var(--burgundy);text-decoration:none;padding-inline-start:20px;border-inline-start:1px solid var(--border)}
@media (min-width:1024px){.sfh-topbar-client{display:inline}}
@media (min-width:1024px) and (any-pointer:coarse){.sfh-topbar-client{display:inline-flex;min-height:44px}}

/* Sticky header: compacts after 60px, slides away while scrolling down and
   returns as soon as the visitor scrolls up (js/site.js toggles .is-hidden).
   It never hides while the mobile menu, a dropdown or a header control has focus. */
.sfh-header{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid var(--border);line-height:normal;transition:transform var(--dur-slow) var(--ease-std),background-color var(--dur-fast) var(--ease-std),box-shadow var(--dur-fast) var(--ease-std)}
.sfh-header.is-compact{background:rgba(255,255,255,.93);backdrop-filter:saturate(180%) blur(12px);box-shadow:0 1px 8px rgba(20,22,25,.07)}
.sfh-header.is-hidden{transform:translateY(-100%);box-shadow:none}
@media (prefers-reduced-motion:reduce){.sfh-header{transition:none}}
.sfh-navrow{display:flex;align-items:center;justify-content:space-between;max-width:1440px;margin:0 auto;padding:12px 16px;gap:12px;transition:padding var(--dur-fast) var(--ease-std)}
@media (min-width:1024px){.sfh-navrow{padding:20px 40px;gap:20px}}
.sfh-header.is-compact .sfh-navrow{padding:9px 16px}
@media (min-width:1024px){.sfh-header.is-compact .sfh-navrow{padding:12px 40px}}
.sfh-logo-link{display:flex;align-items:center;gap:12px;flex-shrink:0;text-decoration:none;min-width:auto;min-height:44px}
@media (min-width:1024px){.sfh-logo-link{gap:16px;min-width:280px}}
.sfh-logo-mark{width:56px;height:auto;display:block;flex-shrink:0;transition:width .22s var(--ease-std)}
@media (min-width:1024px){.sfh-logo-mark{width:88px}}
.sfh-header.is-compact .sfh-logo-mark{width:50px}
@media (min-width:1024px){.sfh-header.is-compact .sfh-logo-mark{width:72px}}
.sfh-brand-text{display:none;flex-direction:column;gap:3px;border-inline-start:1px solid var(--border);padding-inline-start:12px}
@media (min-width:420px){.sfh-brand-text{display:flex}}
@media (min-width:1024px){.sfh-brand-text{padding-inline-start:16px}}
.sfh-brand-line1{font-family:var(--font-brand-en);font-size:13px;font-weight:700;letter-spacing:.02em;line-height:1.15;white-space:nowrap;color:#3F4247}
html[lang="ar"] .sfh-brand-line1{font-family:var(--font-ar);font-size:15px;font-weight:600;letter-spacing:normal}
@media (min-width:1024px){.sfh-brand-line1{font-size:15px}html[lang="ar"] .sfh-brand-line1{font-size:17px}}
.sfh-brand-line2{font-family:var(--font-brand-en);font-size:10px;font-weight:500;letter-spacing:.16em;line-height:1.2;white-space:nowrap;color:#6B7076}
html[lang="ar"] .sfh-brand-line2{font-family:var(--font-ar);font-size:11.5px;font-weight:600;letter-spacing:normal}
.sfh-brand-ar{display:none}
html[lang="ar"] .sfh-brand-line1,html[lang="ar"] .sfh-brand-line2{display:none}
html[lang="ar"] .sfh-brand-ar{display:block;height:28px;width:auto;max-width:100%;object-fit:contain;transition:height .22s var(--ease-std)}
@media (min-width:1024px){html[lang="ar"] .sfh-brand-ar{height:34px}}
html[lang="ar"] .sfh-header.is-compact .sfh-brand-ar{height:25px}
@media (min-width:1024px){html[lang="ar"] .sfh-header.is-compact .sfh-brand-ar{height:29px}}
.sfh-footer-brand-ar{display:none}
html[lang="ar"] .sfh-footer-brandtext .l1,html[lang="ar"] .sfh-footer-brandtext .l2{display:none}
html[lang="ar"] .sfh-footer-brand-ar{display:block;height:30px;width:auto;max-width:100%;object-fit:contain}
.sfh-brand-en{display:none}
html[lang="en"] .sfh-brand-line1,html[lang="en"] .sfh-brand-line2{display:none}
html[lang="en"] .sfh-brand-en{display:block;height:24px;width:auto;max-width:100%;object-fit:contain;transition:height .22s var(--ease-std)}
@media (min-width:1024px){html[lang="en"] .sfh-brand-en{height:28px}}
html[lang="en"] .sfh-header.is-compact .sfh-brand-en{height:22px}
@media (min-width:1024px){html[lang="en"] .sfh-header.is-compact .sfh-brand-en{height:25px}}
.sfh-footer-brand-en{display:none}
html[lang="en"] .sfh-footer-brandtext .l1,html[lang="en"] .sfh-footer-brandtext .l2{display:none}
html[lang="en"] .sfh-footer-brand-en{display:block;height:25px;width:auto;max-width:100%;object-fit:contain}
@media (min-width:1024px){.sfh-brand-line2{font-size:11px}html[lang="ar"] .sfh-brand-line2{font-size:12.5px}}

.sfh-nav{display:none;align-items:center;gap:16px;flex:1;justify-content:center}
@media (min-width:1330px){.sfh-nav{display:flex}}
@media (min-width:1440px){.sfh-nav{gap:24px}}
/* 44px-tall hit area; the negative margin keeps the approved row height and underline position */
.sfh-navlink{position:relative;font-size:15px;font-weight:500;color:#2B2F33;text-decoration:none;padding-block:12px;margin-block:-8px;white-space:nowrap;transition:color var(--dur-fast) var(--ease-std)}
.sfh-navlink::after{content:"";position:absolute;inset-inline-start:0;bottom:2px;inline-size:100%;height:2px;background:var(--burgundy);transform:scaleX(0);transform-origin:inline-start;transition:transform var(--dur-fast) var(--ease-emph)}
.sfh-navlink[aria-current="page"]{color:var(--burgundy);font-weight:600}
.sfh-navlink[aria-current="page"]::after{transform:scaleX(1)}
@media (hover:hover){.sfh-navlink:hover{color:var(--burgundy)}.sfh-navlink:hover::after{transform:scaleX(1)}}
.sfh-navgroup{position:relative;display:flex;align-items:center;gap:4px}
.sfh-navsub-btn{position:relative;width:24px;height:24px;padding:0;border:none;background:transparent;color:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:2px}
.sfh-navsub-btn::before{content:"";position:absolute;inset:-10px -4px}
@media (any-pointer:coarse){.sfh-navsub-btn{width:44px;height:44px;margin-inline:-10px}.sfh-navsub-btn::before{inset:0}}
.sfh-navsub-btn svg{transition:transform var(--dur-fast) var(--ease-std)}
.sfh-navgroup[data-open="true"] .sfh-navsub-btn svg{transform:rotate(180deg)}
.sfh-submenu{position:absolute;top:calc(100% + 10px);inset-inline-start:-12px;min-width:200px;background:#fff;border:1px solid var(--border);border-radius:4px;box-shadow:0 12px 28px -18px rgba(20,22,26,.34);padding:6px 0;z-index:1030;display:none;flex-direction:column}
.sfh-navgroup[data-open="true"] .sfh-submenu{display:flex}
.sfh-submenu a{display:flex;align-items:center;min-height:44px;padding:0 16px;font-size:14.5px;font-weight:500;color:#2B2F33;text-decoration:none;white-space:nowrap}
.sfh-submenu a[aria-current="page"]{color:var(--burgundy);font-weight:600;background:#FBF1F3}
@media (hover:hover){.sfh-submenu a:hover{color:var(--burgundy);background:#FBF1F3}}

.sfh-utilrow{display:none;align-items:center;gap:14px;position:relative}
@media (min-width:1330px){.sfh-utilrow{display:flex}}
.sfh-lang-btn{font-size:13.5px;font-weight:600;color:#2B2F33;background:#fff;border:1px solid var(--border);border-radius:4px;min-height:44px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap}
@media (hover:hover){.sfh-lang-btn:hover{border-color:#C6A2AB;background:#FBF7F8;color:var(--burgundy)}}
.sfh-cta-btn{font-size:14px;font-weight:600;color:#fff;background:var(--burgundy);text-decoration:none;border-radius:4px;min-height:44px;padding:0 20px;display:inline-flex;align-items:center;gap:9px;white-space:nowrap}

.sfh-mobile-util{display:flex;align-items:center;gap:10px}
@media (min-width:1330px){.sfh-mobile-util{display:none}}
.sfh-lang-btn-m{font-size:13px;font-weight:600;color:#2B2F33;background:#fff;border:1px solid var(--border);border-radius:4px;min-width:44px;min-height:44px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.sfh-hamburger{width:44px;height:44px;border-radius:4px;border:1px solid var(--border);background:#fff;color:var(--charcoal);display:flex;align-items:center;justify-content:center;cursor:pointer}

/* site search — the toggle is rendered on the homepage header only */
.sfh-search-btn{width:44px;height:44px;border-radius:4px;border:1px solid var(--border);background:#fff;color:#2B2F33;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:border-color var(--dur-fast) var(--ease-std),color var(--dur-fast) var(--ease-std),background-color var(--dur-fast) var(--ease-std)}
@media (hover:hover){.sfh-search-btn:hover{border-color:#C6A2AB;background:#FBF7F8;color:var(--burgundy)}}
.sfh-search-btn[aria-expanded="true"]{border-color:var(--burgundy);color:var(--burgundy);background:#FBF7F8}
.sfh-search-panel{position:absolute;top:100%;left:0;right:0;z-index:1025;background:#fff;border-top:1px solid var(--border);box-shadow:0 12px 24px rgba(20,22,25,.12);padding:18px 16px 20px;max-height:min(70vh,640px);overflow-y:auto;overscroll-behavior:contain}
.sfh-search-panel[hidden]{display:none}
@media (min-width:1024px){.sfh-search-panel{padding:22px 40px 26px}}
.sfh-search-inner{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.sfh-search-form{display:flex;gap:10px;align-items:stretch}
.sfh-search-field{position:relative;flex:1;min-width:0}
.sfh-search-field svg{position:absolute;top:50%;inset-inline-start:14px;transform:translateY(-50%);color:#8A9099;pointer-events:none}
.sfh-search-input{width:100%;min-height:48px;font:inherit;font-size:16px;color:var(--ink);border:1px solid var(--border);border-radius:4px;padding:10px 14px;padding-inline-start:42px;background:#fff}
.sfh-search-input:focus{border-color:var(--burgundy);box-shadow:0 0 0 3px rgba(162,30,54,.14);outline:none}
.sfh-search-input::-webkit-search-cancel-button{cursor:pointer}
.sfh-search-close{width:48px;min-height:48px;border-radius:4px;border:1px solid var(--border);background:#fff;color:var(--charcoal);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.sfh-search-status{margin:0;font-size:13px;color:var(--gray)}
.sfh-search-results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sfh-search-results a{display:flex;flex-direction:column;gap:2px;min-height:44px;justify-content:center;padding:10px 12px;margin-inline:-12px;border-radius:4px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--border);transition:background-color var(--dur-fast) var(--ease-std)}
.sfh-search-results a:focus-visible,.sfh-search-results a:hover{background:#FBF1F3}
.sfh-search-type{font-size:12px;font-weight:600;color:var(--burgundy)}
.sfh-search-title{font-size:15px;font-weight:600;line-height:1.45}
.sfh-search-snippet{font-size:13px;color:var(--gray);line-height:var(--lh-body)}
.sfh-search-results mark{background:#FBE3E8;color:inherit;border-radius:2px;padding:0 1px}

/* the backdrop is moved to <body> by js/site.js: it dims the page beneath the
   header (z-index 1000) while the header and its drawer stay on top */
.sfh-backdrop{position:fixed;inset:0;background:rgba(20,22,25,.45);z-index:999;border:none;padding:0;cursor:pointer;display:none}
.sfh-backdrop.is-open{display:block}
.sfh-drawer{position:absolute;top:100%;left:0;right:0;background:#fff;z-index:1020;display:none;flex-direction:column;gap:16px;padding:24px;max-height:80vh;max-height:calc(100dvh - var(--sfh-header-h));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border-top:1px solid var(--border);box-shadow:0 12px 24px rgba(20,22,25,.12)}
.sfh-drawer.is-open{display:flex}
.sfh-drawer-close-row{display:flex;justify-content:flex-end}
.sfh-drawer-close{width:44px;height:44px;border-radius:4px;border:1px solid var(--border);background:#fff;color:var(--charcoal);display:flex;align-items:center;justify-content:center;cursor:pointer}
.sfh-drawer-nav{display:flex;flex-direction:column}
.sfh-drawer-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sfh-drawer-link{position:relative;display:flex;align-items:center;min-height:48px;font-size:18px;font-weight:500;color:#1A1A1A;text-decoration:none;padding-inline:14px;margin-inline:-14px;border-bottom:1px solid var(--border);flex:1}
.sfh-drawer-link[aria-current="page"]{color:var(--burgundy);font-weight:600}
.sfh-drawer-chevron-btn{width:44px;height:44px;min-width:44px;padding:0;border:1px solid var(--border);border-radius:4px;background:#fff;color:var(--charcoal);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sfh-drawer-chevron-btn svg{transition:transform var(--dur-fast) var(--ease-std)}
.sfh-drawer-row[data-open="true"] .sfh-drawer-chevron-btn svg{transform:rotate(180deg)}
.sfh-drawer-sub{display:none;flex-direction:column;gap:2px;padding-inline-start:4px;padding-block:4px}
.sfh-drawer-row[data-open="true"] + .sfh-drawer-sub{display:flex}
.sfh-drawer-sub a{display:flex;align-items:center;min-height:44px;font-size:16px;font-weight:500;color:#3F4247;text-decoration:none;padding-inline-start:16px;padding-block:6px;border-inline-start:2px solid var(--border)}
.sfh-drawer-sub a[aria-current="page"]{color:var(--burgundy);font-weight:600;border-inline-start-color:var(--burgundy)}
.sfh-drawer-client{font-size:16px;font-weight:600;color:var(--burgundy);text-decoration:none;padding:16px 0}
.sfh-drawer-contact{display:flex;flex-direction:column;gap:4px;padding:14px 0 4px;border-top:1px solid var(--border)}
.sfh-drawer-contact-head{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#6B7076;margin-bottom:4px}
.sfh-drawer-contact-link{font-size:16px;font-weight:500;color:#1A1A1A;text-decoration:none;min-height:44px;display:flex;align-items:center}
.sfh-drawer-wa{font-size:16px;font-weight:600;color:var(--wa-green);text-decoration:none;min-height:44px;display:flex;align-items:center;gap:8px}
.sfh-drawer-hours{font-size:13px;color:#6B7076;padding-block:4px}
.sfh-drawer-cta{font-size:16px;font-weight:600;color:#fff;background:var(--burgundy);text-decoration:none;border-radius:4px;min-height:52px;padding:16px;display:flex;align-items:center;justify-content:center;gap:10px}

/* ---------- footer ---------- */
.sfh-footer{background:var(--footer-bg);color:var(--footer-text)}
.sfh-footer-grid{max-width:1280px;margin:0 auto;padding:36px 18px 32px;display:grid;grid-template-columns:1fr;gap:32px}
@media (min-width:620px){.sfh-footer-grid{grid-template-columns:1fr 1fr;padding:36px 28px 32px}}
@media (min-width:1060px){.sfh-footer-grid{grid-template-columns:1.35fr 1fr .85fr 1.15fr 1fr;column-gap:32px;row-gap:0;padding:48px 40px 44px}}
.sfh-footer-col{display:flex;flex-direction:column;gap:8px}
@media (min-width:1060px){.sfh-footer-col{border-inline-start:1px solid var(--footer-line);padding-inline-start:28px}}
.sfh-footer-brand{display:flex;flex-direction:column;gap:14px}
.sfh-footer-lockup{display:flex;align-items:center;gap:12px}
.sfh-footer-logo{width:68px;height:auto;flex-shrink:0}
.sfh-footer-brandtext{display:flex;flex-direction:column;gap:2px;border-inline-start:1px solid rgba(255,255,255,.16);padding-inline-start:12px}
.sfh-footer-brandtext .l1{font-family:var(--font-brand-en);font-size:12.5px;font-weight:700;letter-spacing:.02em;color:#fff;white-space:nowrap}
html[lang="ar"] .sfh-footer-brandtext .l1{font-family:var(--font-ar);font-size:14.5px;font-weight:600;letter-spacing:normal}
.sfh-footer-brandtext .l2{font-family:var(--font-brand-en);font-size:9px;font-weight:500;letter-spacing:.16em;color:#9AA0A8;white-space:nowrap}
html[lang="ar"] .sfh-footer-brandtext .l2{font-family:var(--font-ar);font-size:11px;font-weight:600;letter-spacing:normal}
.sfh-footer-blurb{font-size:13px;line-height:var(--lh-body);color:#9AA0A8;max-width:260px;margin:0}
.sfh-social-block{margin-top:2px}
.sfh-footer .sfh-social-heading{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#C7CBD1;margin:0 0 10px;line-height:1.4}
html[lang="ar"] .sfh-footer .sfh-social-heading{letter-spacing:normal}
/* approved grouped social layout: a row of four above a centred row of three
   (never one long row); reused by the Contact page's "Follow Us" card */
.sfh-social-rows{display:flex;flex-direction:column;gap:11px;max-width:212px}
.sfh-social-row{display:flex;gap:12px}
.sfh-social-row-2{justify-content:center}
.sfh-social-icon{position:relative;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.16);color:#C7CBD1;display:flex;align-items:center;justify-content:center;text-decoration:none;flex-shrink:0;transition:color var(--dur-fast),border-color var(--dur-fast),background-color var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast)}
@media (hover:hover){.sfh-social-icon:hover{color:#fff;border-color:var(--burgundy);background:var(--burgundy);transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.25)}}
.sfh-social-icon:active{transform:translateY(0) scale(.97)}
/* tooltip only where a label is supplied (an empty data-tip used to draw a black chip) */
.sfh-social-icon[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#000;color:#fff;font-size:11px;line-height:1.3;white-space:nowrap;padding:5px 9px;border-radius:4px;opacity:0;pointer-events:none;transition:opacity var(--dur-fast),transform var(--dur-fast);z-index:5}
@media (hover:hover){.sfh-social-icon[data-tip]:hover::after{opacity:1;transform:translateX(-50%) translateY(-2px)}}
.sfh-social-icon[data-tip]:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(-2px)}
.sfh-social-rows--light .sfh-social-icon{background:var(--bg-soft);color:#2B2F33;border-color:var(--border)}
@media (max-width:619px){.sfh-social-block{display:flex;flex-direction:column;align-items:center}.sfh-social-rows{margin-inline:auto}}
.sfh-footer .sfh-footer-head{color:#fff;font-size:14.5px;font-weight:600;margin:0 0 6px;line-height:1.3}
.sfh-footer-iconrow{display:flex;gap:9px;align-items:flex-start}
.sfh-footer-item{font-size:13px;line-height:1.55;color:#9AA0A8}
.sfh-footer-sub{font-size:12px;color:var(--footer-sub)}
.sfh-footer-link{font-size:13px;color:#9AA0A8;text-decoration:none;line-height:1.9;display:flex;align-items:center;gap:7px}
@media (hover:hover){.sfh-footer-link:hover{color:#fff}}
.sfh-footer-maplink{font-size:12.5px;color:var(--footer-accent);text-decoration:none;display:inline-block;margin-top:2px}
@media (hover:hover){.sfh-footer-maplink:hover{color:#fff}}
.sfh-footer-map{position:relative;width:100%;max-width:215px;margin-top:8px}
.sfh-footer-map img{width:100%;height:auto;opacity:.22}
.sfh-footer-pin{position:absolute;left:60.8%;top:43.8%;width:6px;height:6px;border-radius:50%;background:var(--burgundy);box-shadow:0 0 0 4px rgba(194,43,65,.22)}
.sfh-footer-bottom{border-top:1px solid var(--footer-line)}
.sfh-footer-bottombar{max-width:1280px;margin:0 auto;padding:18px 18px;display:flex;flex-direction:column;gap:10px;justify-content:space-between;font-size:12.5px;color:#83898F}
@media (min-width:620px){.sfh-footer-bottombar{flex-direction:row;align-items:center;padding:18px 28px}}
@media (min-width:1060px){.sfh-footer-bottombar{padding:18px 40px}}
.sfh-footer-bottomlinks{display:flex;gap:12px;align-items:center}
.sfh-footer-bottomlinks a{color:#9AA0A8;text-decoration:none}
@media (hover:hover){.sfh-footer-bottomlinks a:hover{color:#fff}}
.sfh-footer-sep{color:#6B7178}

/* ---------- common building blocks ---------- */
.breadcrumb{max-width:1360px;margin:0 auto;padding:12px 20px 0;font-size:13px;line-height:1.4;color:var(--gray);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media (min-width:1024px){.breadcrumb{padding:16px 40px 0}}
.breadcrumb a{color:var(--gray);text-decoration:none;transition:color var(--dur-fast) var(--ease-std)}
@media (hover:hover){.breadcrumb a:hover{color:var(--burgundy)}}
.breadcrumb .sep{color:#8A9099}
.breadcrumb .current{color:var(--burgundy);font-weight:600}

.btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--burgundy);color:#fff;font-size:15px;font-weight:600;line-height:normal;text-decoration:none;border-radius:4px;padding:15px 26px;min-height:44px;border:none;cursor:pointer;font-family:inherit}
.btn-outline{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--burgundy);border:1.5px solid var(--burgundy);font-size:15px;font-weight:600;line-height:normal;text-decoration:none;border-radius:4px;padding:15px 26px;min-height:44px;cursor:pointer;font-family:inherit;transition:color var(--dur-fast),border-color var(--dur-fast),background-color var(--dur-fast)}
@media (hover:hover){.btn-outline:hover{color:#fff;background:var(--burgundy)}}

/* Unified burgundy primary-button interaction — reproduces the CTA Banner reference
   (the approved CTA banner button): 240ms property transitions, a 300ms inline-size
   wipe overlay revealing --burgundy-deep, a 2px hover lift, arrow shift via --arrow,
   focus-visible parity with hover, active press, and reduced-motion fallback.
   The arrow nudge uses the independent `translate` property so it composes with the
   RTL mirror (`scale:-1 1`) instead of replacing it. */
[data-btn-fx="burgundy"]{position:relative;overflow:hidden;isolation:isolate;transition:transform var(--dur-base) cubic-bezier(.22,1,.36,1),box-shadow var(--dur-base) cubic-bezier(.22,1,.36,1)}
[data-btn-fx="burgundy"]::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:0;background:var(--burgundy-deep);z-index:0;transition:inline-size var(--dur-slow) cubic-bezier(.22,1,.36,1)}
[data-btn-fx="burgundy"] > *{position:relative;z-index:1}
[data-btn-fx="burgundy"] svg{transition:translate var(--dur-base) cubic-bezier(.22,1,.36,1)}
@media (hover:hover){
  [data-btn-fx="burgundy"]:hover{color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px -12px rgba(0,0,0,.5)}
  [data-btn-fx="burgundy"]:hover::before{inline-size:100%}
  [data-btn-fx="burgundy"]:hover svg{translate:var(--arrow) 0}
}
[data-btn-fx="burgundy"]:focus-visible{color:#fff;outline:2px solid var(--burgundy-deep);outline-offset:3px}
.cta-banner [data-btn-fx="burgundy"]:focus-visible,.project-cta-card [data-btn-fx="burgundy"]:focus-visible{outline-color:#fff}
[data-btn-fx="burgundy"]:focus-visible::before{inline-size:100%}
[data-btn-fx="burgundy"]:active{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){
  [data-btn-fx="burgundy"],[data-btn-fx="burgundy"]::before,[data-btn-fx="burgundy"] svg{transition:none!important}
  [data-btn-fx="burgundy"]:hover{transform:none!important}
  [data-btn-fx="burgundy"]:hover svg{translate:none}
}

.eyebrow-line{width:48px;height:4px;background:var(--burgundy);display:block}
.h2-line{font-size:21px;font-weight:700;margin:0 0 20px;padding-inline-start:14px;border-inline-start:4px solid var(--burgundy);line-height:1.3}
@media (min-width:1024px){.h2-line{font-size:26px;margin-bottom:28px}}
.section{max-width:1360px;margin:0 auto;padding:36px 20px;border-top:1px solid var(--border)}
@media (min-width:1024px){.section{padding:56px 40px}}
.section-soft{background:var(--bg-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

/* cards: hover lift never exceeds 3px */
.card{border:1px solid var(--border);border-radius:4px;transition:transform var(--dur-base) var(--ease-emph),box-shadow var(--dur-base) var(--ease-std),border-color var(--dur-base) var(--ease-std)}
@media (hover:hover){a.card:hover,.card.hoverable:hover{transform:translateY(-3px);box-shadow:0 8px 22px -12px rgba(20,22,26,.28);border-color:rgba(162,30,54,.35)}}
@media (prefers-reduced-motion:reduce){a.card:hover,.card.hoverable:hover{transform:none}}

/* Bilingual forward/back arrow-direction system.
   Forward/details icons are drawn pointing right (English →) and mirrored under
   [dir="rtl"] to point left (Arabic ←). Back icons are drawn pointing left
   (English ←) and mirrored to point right (Arabic →). Slider, gallery and lightbox
   previous/next controls are positioned with logical properties, so their icons
   are mirrored the same way. Mirroring uses the independent `scale` property so
   hover nudges written with `translate` compose with it. */
[dir="rtl"] .btn-primary svg,
[dir="rtl"] .btn-outline svg,
[dir="rtl"] .cta-btn svg,
[dir="rtl"] .sfh-cta-btn svg,
[dir="rtl"] .view-all svg,
[dir="rtl"] .text-link svg,
[dir="rtl"] .pcard-cta svg,
[dir="rtl"] .sec-cta svg,
[dir="rtl"] .svc-card .explore svg,
[dir="rtl"] .ins-card-action svg,
[dir="rtl"] .ins-btn-primary svg,
[dir="rtl"] .sd-related-link svg,
[dir="rtl"] .prog-svc-link svg,
[dir="rtl"] .gov-sector-link svg,
[dir="rtl"] .nf-link svg,
[dir="rtl"] .home-service-card > svg:last-child,
[dir="rtl"] .ins-back-link svg,
[dir="rtl"] .fnd-back-link svg,
[dir="rtl"] .hs-prev svg,[dir="rtl"] .hs-next svg,
[dir="rtl"] .pd-frame-prev svg,[dir="rtl"] .pd-frame-next svg,
[dir="rtl"] .pd-lb-prev svg,[dir="rtl"] .pd-lb-next svg{scale:-1 1}

/* viewport reveals (content is never left hidden under reduced motion) */
.sfh-motion [data-reveal]{transition:opacity var(--dur-slow) var(--ease-std),transform var(--dur-slow) var(--ease-emph)}
.sfh-motion [data-reveal]:not(.is-in){opacity:0;transform:translateY(14px)}
.sfh-motion [data-reveal].is-in{opacity:1;transform:none}
[data-m="accent"]{transform:scaleX(0);transform-origin:inline-start;transition:transform var(--dur-slow) var(--ease-emph)}
[data-m="accent"].is-in{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .sfh-motion [data-reveal]:not(.is-in){opacity:1;transform:none}
  [data-m="accent"]{transform:none}
}
@media print{.sfh-motion [data-reveal]:not(.is-in){opacity:1;transform:none}[data-m="accent"]{transform:none}}

/* form controls — field outlines meet the 3:1 non-text contrast minimum */
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field label{font-size:13.5px;font-weight:600;color:#2B2F33;line-height:1.4}
.field input,.field select,.field textarea{font-family:inherit;font-size:15px;line-height:1.5;border-radius:4px;border:1px solid #8A9099;padding:13px 14px;width:100%;box-sizing:border-box;color:#1A1A1A;min-height:50px;background:#fff;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.field input::placeholder,.field textarea::placeholder{color:#6B7076;opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--burgundy);box-shadow:0 0 0 3px rgba(162,30,54,.14);outline:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--burgundy);outline-offset:1px}
.field [aria-invalid="true"]{border-color:#C1362B}
.field input:disabled,.field select:disabled,.field textarea:disabled{background:var(--bg-soft);color:var(--gray);cursor:not-allowed}
.field .err{display:flex;gap:6px;font-size:12.5px;color:#C1362B;line-height:1.5}
.field .req{color:#C1362B;margin-inline-start:2px}
.field .opt{color:var(--gray);font-weight:400;font-size:12.5px;margin-inline-start:4px}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
@media (min-width:1024px){.field-row{gap:20px}}

/* compact line box for UI chrome: labels, chips and buttons keep the approved
   height while running text uses the Arabic 1.8 / English 1.625 body leading */
.chip,.view-btn,.filter-btn,.sd-pill,.fnd-jump-btn,.pd-meta-tag,.pcard-badge,.exp-badge,.cta-btn,.ct-submit,
.stat-num,.journey-circle,.pd-counter,.pd-lb-counter,.pd-lb-zoom,.hs-dot{line-height:normal}

/* 404 / empty-state quick links */
.nf-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.nf-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--border);border-radius:4px;font-size:14.5px;font-weight:600;line-height:normal;color:var(--burgundy);text-decoration:none;transition:border-color var(--dur-fast) var(--ease-std),background-color var(--dur-fast) var(--ease-std)}
@media (hover:hover){.nf-link:hover{border-color:var(--burgundy);background:#FBF1F3}}

/* ---------- desktop (mouse) layouts: every target at least 24×24px (WCAG 2.2 AA) ---------- */
@media (min-width:1024px){
  .sfh-topbar{padding-block:5px}
  .sfh-topbar-link,.sfh-topbar-wa{display:inline-flex;align-items:center;min-height:24px}
  .sfh-topbar-client{display:inline-flex;align-items:center;min-height:24px}
  .sfh-footer-iconrow .sfh-footer-link,.sfh-footer-bottomlinks a{display:inline-flex;align-items:center;min-height:24px}
  .sfh-footer-maplink{display:inline-flex;align-items:center;min-height:24px}
  .breadcrumb a{display:inline-flex;align-items:center;min-height:24px}
  .ct-info-row a[target="_blank"]:not(.ct-info-value-link){display:inline-flex;align-items:center;min-height:24px}
}

/* ---------- touch layouts: every tappable control is at least 44×44px ----------
   Applied to phones/tablets and to any device with a touch pointer, so the
   approved desktop (mouse) layout keeps its exact spacing. */
@media (max-width:1023.98px),(any-pointer:coarse){
  .sfh-topbar{padding-block:0}
  .sfh-topbar-link,.sfh-topbar-wa{display:inline-flex;align-items:center;min-height:44px}
  .sfh-topbar-wa{min-width:44px;justify-content:center}
  .sfh-footer-link,.sfh-footer-maplink,.sfh-footer-bottomlinks a{display:inline-flex;align-items:center;min-height:44px;line-height:1.4}
  .sfh-footer-col{gap:0}
  .sfh-footer .sfh-footer-col .sfh-footer-head{margin-bottom:4px}
  .sfh-footer-iconrow{align-items:center}
  .sfh-footer-iconrow > svg{margin-top:0!important}
  .sfh-footer-item .sfh-footer-maplink{margin-top:0}
  .breadcrumb{padding-top:4px;row-gap:0}
  .breadcrumb a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  .breadcrumb .current{padding-block:12px}
  .filter-btn,.ins-filter-chip,.gov-tag[href],a.gov-tag{min-height:44px;display:inline-flex;align-items:center}
}