/* =========================================================
   AL DAWLIYAH INSURANCE SERVICES — CORE STYLESHEET
   Design language: "The Ledger" — certificate / policy-document
   aesthetic drawn from a licensed insurance brokerage's own
   artifacts: seals, registration numbers, coverage networks.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* Almarai (Arabic RTL font, see assets/css/rtl.css) — self-hosted from
   assets/fonts/ rather than the Google Fonts CDN used above. */
@font-face{
  font-family:'Almarai'; src:url('../fonts/Almarai-Light.ttf') format('truetype');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Almarai'; src:url('../fonts/Almarai-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Almarai'; src:url('../fonts/Almarai-Bold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Almarai'; src:url('../fonts/Almarai-ExtraBold.ttf') format('truetype');
  font-weight:800; font-style:normal; font-display:swap;
}

:root{
  /* ---- color tokens ---- */
  --c-navy-deep:#0A1B33;
  --c-navy:#0F2A4A;
  --c-navy-mid:#16406B;
  --c-gold:#caa44d;
  --c-gold-light:#E4C878;
  --c-ivory:#F6F7FA;
  --c-white:#FFFFFF;
  --c-ink:#0F1520;
  --c-slate:#5B6472;
  --c-slate-light:#8A93A3;
  --c-line:#E3E7EE;
  --c-line-dark:rgba(255,255,255,.14);
  --c-success:#2E7D5B;
  /* ---- theme-adaptive tokens (redeclared below for dark) ----
     --c-surface: card/panel backgrounds that are plain white in light mode.
     --c-heading: headings/labels that use the navy brand color as TEXT on a
     surface that flips dark — kept separate from --c-navy-deep, which stays
     fixed since it's also used as a deliberate dark accent (icon circles,
     tooltips, the gold/navy gradients) that must NOT invert. */
  --c-surface:#FFFFFF;
  --c-heading:var(--c-navy-deep);
  --theme-transition:.45s cubic-bezier(.4,0,.2,1);

  /* ---- metallic gradient tokens ("The Ledger" glossy variant) ---- */
  --g-steel-blue:linear-gradient(120deg,#040C18 0%,#0E2544 16%,#2E6098 34%,#5B93C8 44%,#2E6098 54%,#0E2544 70%,#050D1B 88%,#0A1B33 100%);
  --g-steel-blue-soft:linear-gradient(135deg,#0A1B33 0%,#123056 22%,#2C5C8F 42%,#123056 62%,#0A1B33 100%);
  --g-gold-foil:linear-gradient(120deg,#6E4E10 0%,#B8873A 14%,#F1D385 30%,#FFF3C4 42%,#E9C46A 52%,#B8873A 66%,#7A5B14 80%,#E9C46A 92%,#B8873A 100%);
  --g-gold-soft:linear-gradient(135deg,#E4C878 0%,#F5DC94 24%,#C9A24B 52%,#F1D385 76%,#B8873A 100%);
  --g-gold-line:linear-gradient(90deg,transparent, var(--c-gold-light), transparent);
  --shadow-metal:0 1px 0 rgba(255,255,255,.5) inset, 0 -1px 0 rgba(0,0,0,.25) inset, 0 14px 28px -10px rgba(122,91,20,.5);
  --shadow-metal-navy:0 1px 0 rgba(140,180,230,.35) inset, 0 -1px 0 rgba(0,0,0,.4) inset, 0 16px 34px -12px rgba(5,15,30,.6);

  /* ---- glass tokens ("Restrained Liquid Glass" surface treatment) ----
     Accent-only: applied to interactive/overlay surfaces (header, coverage
     panel, chat widget, dropdowns, the .card--glass variant), never to the
     hero, full section backgrounds, footer, or other large text-bearing
     blocks, which stay on the metallic navy/gold tokens above. */
  --glass-bg:rgba(255,255,255,.10);
  --glass-bg-dark:rgba(21,32,54,.55);
  --glass-border:rgba(255,255,255,.22);
  --glass-blur:blur(18px) saturate(150%);
  --glass-shine:linear-gradient(180deg, rgba(255,255,255,.35) 0%, transparent 45%);

  /* ---- type tokens ---- */
  --f-display:'Fraunces', 'Georgia', serif;
  --f-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono:'IBM Plex Mono', monospace;

  /* ---- layout tokens ---- */
  --container-max:1240px;
  --radius-sm:6px;
  --radius-md:14px;
  --radius-lg:26px;
  --shadow-sm:0 1px 3px rgba(10,27,51,.06), 0 1px 2px rgba(10,27,51,.04);
  --shadow-md:0 12px 32px -12px rgba(10,27,51,.18);
  --shadow-lg:0 24px 64px -20px rgba(10,27,51,.28);
  --header-h:84px;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ---- Dark theme ----
   Toggled by setting data-theme="dark" on <html> (see theme.js). The brand
   colors (navy/gold gradients, --c-navy-deep, --c-gold*) stay fixed — they're
   used as deliberate dark/gold accents throughout, on surfaces that are
   already dark regardless of theme (hero, footer, page-hero, coverage panel,
   icon badges). Only the neutral surface/text tokens shift. */
:root[data-theme="dark"]{
  --c-white:#0B1220;
  --c-surface:#152036;
  --c-ivory:#111B30;
  --c-heading:#E7ECF5;
  --c-ink:#E7ECF5;
  --c-slate:#93A0B8;
  --c-slate-light:#7C8CA6;
  --c-line:rgba(255,255,255,.1);
  --glass-border:rgba(255,255,255,.12);
  --shadow-sm:0 2px 10px rgba(0,0,0,.35);
  --shadow-md:0 12px 34px rgba(0,0,0,.45);
  --shadow-lg:0 24px 64px rgba(0,0,0,.55);
}

/* Smooth, page-wide crossfade whenever the theme flips. Elements that
   already declare their own transition (mostly transition:all, or lists
   that already include background-color/color) pick this up for free;
   see the merged transitions further down for the couple that don't. */
body, body *{
  transition: background-color var(--theme-transition), color var(--theme-transition), border-color var(--theme-transition), box-shadow var(--theme-transition);
}
@media (prefers-reduced-motion:reduce){
  body, body *{transition-duration:.01ms !important;}
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:var(--header-h); overflow-x:hidden; overscroll-behavior-x:none;}
body{
  font-family:var(--f-body);
  color:var(--c-ink);
  background:var(--c-white);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overscroll-behavior-x:none;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
button{font-family:inherit;}

.container{width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:24px;}

/* ---------------------------------------------------------
   Typography
   --------------------------------------------------------- */
h1,h2,h3,h4,.font-display{font-family:var(--f-display); color:var(--c-heading); font-weight:600; letter-spacing:-.01em; line-height:1.12;}
h1{font-size:clamp(2.4rem,4.4vw,4.1rem); font-weight:500;}
h2{font-size:clamp(1.9rem,3vw,2.75rem); font-weight:500;}
h3{font-size:clamp(1.3rem,1.8vw,1.6rem); font-weight:600;}
p{color:var(--c-slate); margin:0 0 1rem;}
.lead{font-size:1.15rem; color:var(--c-slate); line-height:1.7;}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--c-gold);
  font-weight:600; margin-bottom:16px;
}
.eyebrow::before{
  content:''; width:22px; height:1px; background:var(--c-gold);
}
.section-head{max-width:680px; margin-bottom:52px;}
.section-head.center{margin-inline:auto; text-align:center;}
.section-head p{margin-top:14px;}

/* ---------------------------------------------------------
   Section rhythm
   --------------------------------------------------------- */
section{padding:96px 0;}
.section-ivory{background:var(--c-ivory);}
.section-navy{background:var(--g-steel-blue-soft); background-size:220% 220%; background-position:15% 20%; color:#fff;}
.section-navy h2,.section-navy h3{color:#fff;}
.section-navy p{color:rgba(255,255,255,.68);}
.section-tight{padding:64px 0;}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 28px; border-radius:999px; font-weight:600; font-size:.95rem;
  border:1px solid transparent; cursor:pointer; transition:all .3s var(--ease);
  white-space:nowrap; position:relative; overflow:hidden; isolation:isolate;
}
.btn::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.15) 50%, transparent 65%);
  transform:translateX(-140%); transition:transform .7s var(--ease);
}
.btn:hover::after{transform:translateX(140%);}
.btn-gold{
  background:var(--g-gold-soft); background-size:220% 220%; background-position:30% 30%;
  color:var(--c-navy-deep);
  box-shadow:var(--shadow-metal);
  border:1px solid rgba(122,91,20,.35);
  transition:all .35s var(--ease), background-position .6s var(--ease);
}
.btn-gold:hover{transform:translateY(-2px); background-position:70% 70%; box-shadow:0 18px 34px -10px rgba(122,91,20,.6), var(--shadow-metal);}
.btn-outline-light{border-color:rgba(255,255,255,.35); color:#fff;}
.btn-outline-light:hover{background:rgba(255,255,255,.1); border-color:#fff;}
.btn-outline-navy{border-color:var(--c-navy-mid); color:var(--c-heading);}
.btn-outline-navy:hover{background:var(--g-steel-blue-soft); border-color:transparent; color:#fff; box-shadow:var(--shadow-metal-navy);}
.btn-navy{background:var(--g-steel-blue-soft); background-size:200% 200%; background-position:20% 20%; color:#fff; box-shadow:var(--shadow-metal-navy); border:1px solid rgba(5,15,30,.4);}
.btn-navy:hover{transform:translateY(-2px); background-position:80% 80%; box-shadow:0 18px 34px -10px rgba(5,15,30,.65), var(--shadow-metal-navy);}
.btn-sm{padding:10px 20px; font-size:.85rem;}
.btn-block{width:100%;}

/* ---------------------------------------------------------
   Header / Navigation
   --------------------------------------------------------- */
#site-header{
  position:fixed; inset-inline:0; top:0; z-index:1000;
  height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:all .35s var(--ease);
}
#site-header.scrolled{
  height:70px; background:rgba(255,255,255,.96);
  border-bottom-color:var(--c-line); box-shadow:var(--shadow-sm);
}
html[data-theme="dark"] #site-header{background:rgba(11,18,32,.85);}
html[data-theme="dark"] #site-header.scrolled{background:rgba(11,18,32,.95); border-bottom-color:var(--c-line); box-shadow:var(--shadow-sm);}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  #site-header{background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);}
  #site-header.scrolled{background:var(--glass-bg); border-bottom-color:var(--glass-border);}
  html[data-theme="dark"] #site-header,
  html[data-theme="dark"] #site-header.scrolled{background:var(--glass-bg-dark); border-bottom-color:var(--glass-border);}
}
/* Static top-edge shine wash, giving the glass surface its highlighted
   top edge (the "signature" liquid-glass look, reused on .coverage-panel). */
#site-header::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--glass-shine); opacity:.6;
}
/* One-shot diagonal light sweep, replayed each time the header condenses
   into .scrolled (assets/js/router.js toggles it on scroll) — reuses the
   .btn::after sweep recipe above, just re-triggered by a class instead of
   :hover. The single new keyframe the glass brief explicitly allows. */
#site-header::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.5) 45%, rgba(255,255,255,.15) 50%, transparent 65%);
  transform:translateX(-140%);
}
@media (prefers-reduced-motion:no-preference){
  #site-header.scrolled::after{animation:header-shine-sweep .28s var(--ease);}
  @keyframes header-shine-sweep{ from{transform:translateX(-140%);} to{transform:translateX(140%);} }
}
.nav-wrap{position:relative; display:flex; align-items:center; justify-content:space-between; width:100%;}
.brand{display:flex; align-items:center; gap:12px; position:relative;}
.brand img{height:42px; width:auto;}

/* Floating brand chip — hangs off the bottom-start corner of the logo,
   echoing the hero's .floating-chip cards (assets/css/home.css) but
   built with the shared navy/gold tokens so it reads correctly on every
   page, not just the homepage. Purely decorative/absolute so it never
   affects the header's own layout height. */
.brand-chip{
  position:absolute; top:100%; inset-inline-start:0; margin-top:13px;
  display:flex; align-items:center; gap:8px;
  background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:999px; padding-block:6px; padding-inline:6px 16px;
  box-shadow:var(--shadow-md);
  white-space:nowrap; pointer-events:none;
  animation:float-y 5s ease-in-out infinite;
}
.brand-chip-icon{
  width:26px; height:26px; border-radius:50%; flex-shrink:0; overflow:hidden;
  display:grid; place-items:center;
  background:var(--c-ivory); border:1px solid var(--c-line);
}
.brand-chip-icon img{width:100%; height:100%; object-fit:contain;}
.brand-chip-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-chip-name{font-family:var(--f-display); font-weight:600; font-size:.78rem; color:var(--c-heading);}
.brand-chip-tagline{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; color:var(--c-gold); text-transform:uppercase; margin-top:2px;}

.main-nav{display:flex; align-items:center; gap:2px;}
.main-nav a{
  padding:10px 16px; font-size:.92rem; font-weight:500; color:var(--c-ink);
  border-radius:999px; transition:all .25s var(--ease); position:relative;
}
.main-nav a:hover,.main-nav a.active{color:var(--c-heading); background:var(--c-ivory);}

.header-actions{display:flex; align-items:center; gap:14px;}
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:space-between; position:relative;
  width:56px; height:30px; padding:0 7px; border-radius:999px; flex-shrink:0;
  background:linear-gradient(135deg,#BFE0FF,#7FB3FF); border:1px solid rgba(10,79,175,.25);
  transition:background var(--theme-transition), border-color var(--theme-transition);
}
.theme-toggle .theme-icon{width:15px; height:15px; position:relative; z-index:2; transition:color var(--theme-transition);}
.theme-toggle .theme-icon-sun{color:#B8860B;}
.theme-toggle .theme-icon-moon{color:rgba(255,255,255,.6);}
.theme-toggle .theme-toggle-thumb{
  position:absolute; top:3px; inset-inline-start:3px; width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.25);
  transition:transform var(--theme-transition), background var(--theme-transition);
}
html[dir="ltr"][data-theme="dark"] .theme-toggle .theme-toggle-thumb{transform:translateX(26px);}
html[dir="rtl"][data-theme="dark"] .theme-toggle .theme-toggle-thumb{transform:translateX(-26px);}
html[data-theme="dark"] .theme-toggle{background:linear-gradient(135deg,#0B1220,#1B2A4A); border-color:rgba(255,255,255,.16);}
html[data-theme="dark"] .theme-toggle .theme-toggle-thumb{background:#152036;}
html[data-theme="dark"] .theme-toggle .theme-icon-sun{color:rgba(255,255,255,.35);}
html[data-theme="dark"] .theme-toggle .theme-icon-moon{color:#E4C878;}
.lang-switch{
  display:flex; align-items:center; gap:6px; font-family:var(--f-mono);
  font-size:.78rem; font-weight:600; letter-spacing:.04em; color:var(--c-heading);
  border:1px solid var(--c-line); padding:8px 14px; border-radius:999px; cursor:pointer;
  background:var(--c-surface); transition:all .25s var(--ease);
}
.lang-switch:hover{border-color:var(--c-gold); color:var(--c-gold);}

.nav-toggle{display:none; flex-direction:column; gap:5px; width:26px; cursor:pointer; background:none; border:none; padding:0;}
.nav-toggle span{height:2px; width:100%; background:var(--c-heading); border-radius:2px; transition:all .3s var(--ease);}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero{
  position:relative; padding-top:calc(var(--header-h) + 72px); padding-bottom:88px;
  background:
    radial-gradient(1100px 600px at 82% -10%, rgba(233,196,106,.18), transparent 60%),
    radial-gradient(800px 500px at -5% 110%, rgba(91,147,200,.16), transparent 55%),
    var(--g-steel-blue-soft);
  background-size:auto, auto, 260% 260%;
  background-position:0 0, 0 0, 18% 12%;
  color:#fff; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 75% 20%, black, transparent 70%);
  pointer-events:none;
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; position:relative; z-index:2;}
.hero-seal{
  display:inline-flex; align-items:center; gap:12px;
  border:1px solid rgba(228,200,120,.4); border-radius:999px;
  padding:8px 18px 8px 8px; margin-bottom:26px; background:rgba(255,255,255,.04);
}
.hero-seal .seal-mark{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--g-gold-foil); background-size:220% 220%; color:var(--c-navy-deep); flex-shrink:0;
  box-shadow:var(--shadow-metal); border:1px solid rgba(122,91,20,.4);
}
.hero-seal span{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; color:var(--c-gold-light); text-transform:uppercase;}
.hero h1{color:#fff; margin-bottom:22px;}
.hero h1 em{font-style:italic; color:var(--c-gold-light);}
.hero .lead{color:rgba(255,255,255,.72); max-width:520px; margin-bottom:34px;}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:46px;}
.hero-stats{display:flex; gap:0; border-top:1px solid var(--c-line-dark); padding-top:26px; flex-wrap:wrap;}
.hero-stats .stat{flex:1; min-width:120px; padding-inline-end:20px;}
.hero-stats .stat b{
  display:block; font-family:var(--f-mono); font-size:1.7rem; font-weight:600;
  background:var(--g-gold-foil); background-size:220% 220%; -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.3));
}
.hero-stats .stat span{font-size:.78rem; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.05em;}

/* Coverage network visual (signature element) */
.coverage-panel{
  position:relative; isolation:isolate; background:rgba(255,255,255,.045);
  border:1px solid var(--glass-border); border-radius:var(--radius-lg);
  padding:28px; backdrop-filter:blur(6px);
  transition:box-shadow .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .coverage-panel{backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);}
}
/* Top-edge shine wash — same recipe as #site-header's, making this the
   flagship "signature glass surface" the brief calls out. Sits above the
   map/labels (they're non-positioned, so a positioned pseudo naturally
   paints on top) but stays subtle and pointer-events:none so it never
   blocks the map-node tooltips. */
.coverage-panel::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--glass-shine); opacity:.5; border-radius:inherit;
}
.coverage-panel:hover,
.coverage-panel:focus-within{
  border-color:rgba(228,200,120,.55);
  box-shadow:0 0 0 1px rgba(228,200,120,.25), 0 30px 70px -20px rgba(228,200,120,.28), 0 0 46px -10px rgba(91,147,200,.35);
  transform:translateY(-3px);
}
#coverageMap{width:100%; height:auto; display:block; transition:filter .45s var(--ease);}
.coverage-panel:hover #coverageMap{filter:drop-shadow(0 0 10px rgba(228,200,120,.45)) drop-shadow(0 0 22px rgba(91,147,200,.3));}
.coverage-panel .map-shape{transition:stroke .4s var(--ease);}
.coverage-panel:hover .map-shape{stroke:var(--c-gold-light);}
.map-node{cursor:pointer; outline:none;}
.map-node circle:nth-of-type(2){transition:r .25s var(--ease), fill .25s var(--ease);}
.map-node:hover circle:nth-of-type(2),
.map-node:focus circle:nth-of-type(2){r:7; fill:var(--c-gold-light);}
.map-tooltip{
  position:absolute; z-index:6; transform:translate(-50%,-135%);
  background:var(--c-navy-deep); color:#fff; font-family:var(--f-mono);
  font-size:.68rem; letter-spacing:.03em; padding:6px 12px; border-radius:6px;
  border:1px solid rgba(228,200,120,.45); white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .2s var(--ease), transform .2s var(--ease);
  box-shadow:0 10px 22px -8px rgba(0,0,0,.4);
}
.map-tooltip::after{
  content:''; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--c-navy-deep);
}
.map-tooltip.show{opacity:1; transform:translate(-50%,-148%);}
.coverage-panel .panel-label{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:18px; padding-bottom:14px; border-bottom:1px dashed rgba(255,255,255,.15);
}
.coverage-panel .panel-label .dot{width:7px; height:7px; border-radius:50%; background:var(--c-gold-light); display:inline-block; margin-inline-end:6px; animation:pulse-dot 1.8s infinite;}
.coverage-panel .panel-foot{display:flex; justify-content:space-between; margin-top:16px; padding-top:14px; border-top:1px dashed rgba(255,255,255,.15); font-family:var(--f-mono); font-size:.72rem; color:rgba(255,255,255,.55);}

@keyframes pulse-dot{0%,100%{opacity:1;} 50%{opacity:.25;}}

/* ---------------------------------------------------------
   Stat / trust strip
   --------------------------------------------------------- */
.trust-strip{background:var(--g-steel-blue-soft); background-size:220% 220%; background-position:10% 50%; padding:20px 0;}
.trust-strip .container{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px;}
.trust-strip .t-item{display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.72); font-size:.85rem;}
.trust-strip .t-item svg{width:18px; height:18px; color:var(--c-gold-light); flex-shrink:0;}

/* ---------------------------------------------------------
   Cards
   --------------------------------------------------------- */
.grid{display:grid; gap:26px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-5{grid-template-columns:repeat(5,1fr);}

.card{
  background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius-md);
  padding:32px 28px; transition:all .35s var(--ease); position:relative;
}
.card:hover{transform:translateY(-6px); box-shadow:0 18px 40px -14px rgba(122,91,20,.22), var(--shadow-md); border-color:transparent;}

/* Opt-in glass variant — NOT applied to .card by default (default cards
   stay solid var(--c-surface) for readability per the glass brief). Add
   this class in markup for a specific card that should read as glass. */
.card--glass{
  background:var(--c-surface); border-color:var(--glass-border);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .card--glass{background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);}
  html[data-theme="dark"] .card--glass{background:var(--glass-bg-dark);}
}
.card--glass::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--glass-shine); opacity:.5; border-radius:inherit;
}
.card .icon-wrap{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:var(--g-steel-blue-soft); background-size:180% 180%; color:var(--c-gold-light);
  margin-bottom:20px; box-shadow:var(--shadow-metal-navy); border:1px solid rgba(5,15,30,.35);
  transition:background-position .5s var(--ease);
}
.card:hover .icon-wrap{background-position:100% 100%;}
.card .icon-wrap svg{width:24px; height:24px;}
.card .icon-wrap img{width:24px; height:24px; object-fit:contain; filter:brightness(0) invert(1);}
.icon-photo{
  width:110px; height:110px; border-radius:50%; overflow:hidden; flex-shrink:0;
  border:3px solid var(--c-gold-light); box-shadow:var(--shadow-metal);
}
.icon-photo img{width:100%; height:100%; object-fit:cover;}
.card h3{margin-bottom:10px;}
.card p{margin-bottom:14px; font-size:.94rem;}
.contact-info-row{display:flex; align-items:flex-start; gap:10px;}
.contact-info-icon{width:17px; height:17px; margin-top:3px; color:var(--c-gold); flex-shrink:0;}
.card .card-link{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color:var(--c-heading); display:inline-flex; align-items:center; gap:6px; font-weight:600;}
.card .card-link svg{width:14px; height:14px; transition:transform .25s var(--ease);}
.card:hover .card-link svg{transform:translateX(4px);}
[dir="rtl"] .card:hover .card-link svg{transform:translateX(-4px);}

/* Shown only on products.html when a single product section is isolated
   via a #hash deep link (see the inline script after <main>) — gives the
   user a way back out to the full product listing. */
.back-to-products{
  display:none; align-items:center; gap:8px; margin-bottom:32px;
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--c-heading); font-weight:600; transition:gap .25s var(--ease);
}
.back-to-products svg{width:16px; height:16px; transition:transform .25s var(--ease);}
.back-to-products:hover svg{transform:translateX(-4px);}
[dir="rtl"] .back-to-products:hover svg{transform:translateX(4px);}
body.is-isolated .back-to-products{display:inline-flex;}

.card-stat{
  border:1px solid var(--c-line); border-radius:var(--radius-md); padding:30px 24px;
  background:var(--c-surface); position:relative; overflow:hidden;
}
.card-stat::after{content:''; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px; background:var(--g-gold-foil); background-size:100% 300%;}
.card-stat b{
  display:block; font-family:var(--f-mono); font-size:2.4rem; font-weight:600; line-height:1;
  background:linear-gradient(135deg,#123056,#2C5C8F 45%,#0A1B33 100%); background-size:180% 180%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
html[data-theme="dark"] .card-stat b{background:linear-gradient(135deg,#7FB3FF,#5B93C8 45%,#BFE0FF 100%); background-size:180% 180%; -webkit-background-clip:text; background-clip:text;}
.card-stat span{font-size:.82rem; color:var(--c-slate); text-transform:uppercase; letter-spacing:.04em; margin-top:8px; display:block;}

/* ---------------------------------------------------------
   Certificate / seal badges (why choose us, licensing)
   --------------------------------------------------------- */
.seal-badge{
  display:inline-flex; align-items:center; gap:14px; padding:14px 20px;
  border:1px solid var(--c-line); border-radius:999px; background:var(--c-surface);
}
.seal-badge .seal-mark{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:var(--g-gold-foil); background-size:220% 220%; display:grid; place-items:center; color:var(--c-navy-deep);
  box-shadow:var(--shadow-metal); border:1px solid rgba(122,91,20,.4);
}
.seal-badge .txt{line-height:1.3;}
.seal-badge .txt b{display:block; font-size:.86rem; color:var(--c-heading);}
.seal-badge .txt small{font-family:var(--f-mono); font-size:.68rem; color:var(--c-slate); letter-spacing:.03em;}

/* ---------------------------------------------------------
   Testimonials
   --------------------------------------------------------- */
.testimonial-card{
  background:var(--c-ivory); border-radius:var(--radius-md); padding:34px;
  border:1px solid var(--c-line); height:100%;
}
.testimonial-card .stars{color:var(--c-gold); font-size:1rem; margin-bottom:16px; letter-spacing:2px;}
.testimonial-card p{color:var(--c-ink); font-style:italic; font-size:1.02rem;}
.testimonial-card .author{display:flex; align-items:center; gap:12px; margin-top:20px;}
.testimonial-card .avatar{width:42px; height:42px; border-radius:50%; background:var(--g-steel-blue-soft); background-size:180% 180%; color:var(--c-gold-light); display:grid; place-items:center; font-family:var(--f-display); font-weight:600; box-shadow:var(--shadow-metal-navy);}
.testimonial-card .author b{display:block; font-size:.88rem; color:var(--c-ink);}
.testimonial-card .author span{font-size:.76rem; color:var(--c-slate);}

/* ---------------------------------------------------------
   Partner logo grid
   --------------------------------------------------------- */
.partner-tile{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  border:1px solid rgba(17,24,39,.08); border-radius:var(--radius-sm); padding:24px 16px; height:100%;
  background:#fff; transition:all .3s var(--ease); overflow:hidden;
}
.partner-tile:hover{border-color:var(--c-gold); box-shadow:0 12px 26px -10px rgba(122,91,20,.35), var(--shadow-sm); transform:translateY(-3px);}
.partner-tile .partner-logo{
  width:100%; height:56px; flex:none; display:flex; align-items:center; justify-content:center;
}
.partner-tile img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
.partner-tile span{
  font-family:var(--f-display); font-weight:600; color:var(--c-navy-deep);
  font-size:.82rem; line-height:1.3;
}

/* ---------------------------------------------------------
   FAQ accordion
   --------------------------------------------------------- */
.faq-item{border-bottom:1px solid var(--c-line); padding:22px 0;}
.faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; gap:20px;}
.faq-q h3{font-size:1.05rem; margin:0;}
.faq-q .plus{width:26px; height:26px; border-radius:50%; border:1px solid var(--c-line); display:grid; place-items:center; flex-shrink:0; transition:all .3s var(--ease); color:var(--c-heading); font-size:1.1rem;}
.faq-item.open .plus{background:var(--c-navy-deep); color:#fff; transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s var(--ease);}
.faq-item.open .faq-a{max-height:300px;}
.faq-a p{margin-top:14px; padding-inline-end:40px;}

/* ---------------------------------------------------------
   Forms
   --------------------------------------------------------- */
.form-control-group{margin-bottom:20px;}
.form-control-group label{display:block; font-size:.82rem; font-weight:600; color:var(--c-heading); margin-bottom:8px;}
.form-control{
  width:100%; padding:13px 16px; border:1px solid var(--c-line); border-radius:var(--radius-sm);
  font-family:var(--f-body); font-size:.94rem; background:var(--c-surface); transition:all .25s var(--ease); color:var(--c-ink);
}
.form-control:focus{outline:none; border-color:var(--c-gold); box-shadow:0 0 0 4px rgba(201,162,75,.14);}
textarea.form-control{resize:vertical; min-height:120px;}
.form-error{color:#B33A3A; font-size:.78rem; margin-top:6px; display:none;}
.form-control-group.has-error .form-control{border-color:#B33A3A;}
.form-control-group.has-error .form-error{display:block;}
.form-success-box{
  display:none; background:#EBF6F1; border:1px solid #BFE2CF; color:var(--c-success);
  padding:16px 20px; border-radius:var(--radius-sm); margin-bottom:20px; font-size:.9rem;
}

/* ---------------------------------------------------------
   Toast / snackbar — fired by DIS_Forms.handleSubmit() (api.js)
   alongside the inline .form-success-box/.form-error-box, so a visitor
   who submitted a long form (contact/complaint) and hasn't scrolled
   back up still sees confirmation immediately.
   --------------------------------------------------------- */
.dis-toast-container{
  position:fixed; inset-inline:0; bottom:24px; z-index:2000;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  pointer-events:none; padding:0 20px;
}
.dis-toast{
  pointer-events:auto;
  display:flex; align-items:flex-start; gap:12px;
  max-width:420px; width:100%; padding:14px 16px;
  background:var(--c-navy-deep); color:#fff;
  border-inline-start:4px solid var(--c-success);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-metal);
  font-size:.88rem; line-height:1.45;
  transform:translateY(16px); opacity:0;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.dis-toast.dis-toast-error{border-inline-start-color:#E4736B;}
.dis-toast.show{opacity:1; transform:translateY(0);}
.dis-toast-msg{flex:1; min-width:0;}
.dis-toast-close{
  flex-shrink:0; width:20px; height:20px; border-radius:50%; padding:0;
  display:grid; place-items:center; background:rgba(255,255,255,.12); border:none;
  color:#fff; cursor:pointer;
}
.dis-toast-close svg{width:11px; height:11px;}
@media (prefers-reduced-motion:reduce){
  .dis-toast{transition:opacity .2s;}
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
footer{background:var(--g-steel-blue-soft); background-size:220% 220%; background-position:10% 0%; color:rgba(255,255,255,.68); padding-top:80px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:56px; border-bottom:1px solid var(--c-line-dark);}
.footer-brand .brand-text{color:#fff;}
.footer-brand p{margin-top:16px; font-size:.88rem; max-width:280px;}
.footer-col h4{color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:20px; font-family:var(--f-body); font-weight:700;}
.footer-col ul li{margin-bottom:12px;}
.footer-col a{font-size:.9rem; color:rgba(255,255,255,.62); transition:color .2s var(--ease);}
.footer-col a:hover{color:var(--c-gold-light);}
.footer-contact li{display:flex; align-items:center; gap:10px;}
.footer-contact-icon{flex:none; color:var(--c-gold-light); opacity:.85;}
.footer-social{display:flex; gap:10px; margin-top:20px;}
.footer-social a{width:36px; height:36px; border-radius:50%; border:1px solid var(--c-line-dark); display:grid; place-items:center; transition:all .25s var(--ease);}
.footer-social a:hover{background:var(--c-gold); border-color:var(--c-gold); color:var(--c-navy-deep);}
.newsletter-form{display:flex; gap:8px; margin-top:8px;}
.newsletter-form input{flex:1; padding:11px 14px; border-radius:var(--radius-sm); border:1px solid var(--c-line-dark); background:rgba(255,255,255,.06); color:#fff; font-size:.85rem;}
.newsletter-form input::placeholder{color:rgba(255,255,255,.4);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding:26px 0; font-size:.8rem; flex-wrap:wrap; gap:12px;}
.footer-bottom a{color:rgba(255,255,255,.55);}
.footer-bottom a:hover{color:var(--c-gold-light);}

/* ---------------------------------------------------------
   Floating elements
   --------------------------------------------------------- */
/* Physical `right` (not inset-inline-end) is deliberate here: the launcher
   and chat popup are a persistent utility, not mirrored content, and should
   stay anchored to the same physical corner in both languages.
   `direction:ltr` is needed for the same reason: `align-items:flex-end`'s
   cross-axis meaning follows `direction` for a column flex container, so
   under `dir="rtl"` it silently became "align to the left" instead of
   "align to the right". That went unnoticed while every child was the
   same 56px width (fab-top/fab-chat), but once `.fab-mascot` (a wider,
   variable-width item) joined the column, fab-top/fab-chat visibly
   drifted left/right as the mascot's own width changed. Forcing `ltr`
   here keeps flex-end pinned to the physical right in both languages. */
.floating-actions{position:fixed; right:24px; bottom:24px; z-index:900; display:flex; flex-direction:column; gap:12px; align-items:flex-end; direction:ltr;}
.fab{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  box-shadow:var(--shadow-md); cursor:pointer; transition:all .3s var(--ease); border:none;
}
.fab-chat{background:var(--g-steel-blue-soft); color:#fff; transition:all .3s var(--ease);}
.fab-chat:hover{transform:scale(1.08);}
.fab-chat.is-hidden{opacity:0; pointer-events:none; transform:scale(.8);}
.fab-top{background:var(--c-surface); color:var(--c-heading); border:1px solid var(--c-line); opacity:0; pointer-events:none; transform:translateY(10px);}
.fab-top.show{opacity:1; pointer-events:auto; transform:translateY(0);}
.fab svg{width:24px; height:24px;}

/* Owl mascot + its speech-bubble teaser — a normal flex item in
   .floating-actions' own column stack (not absolutely positioned), so
   it just takes its natural slot directly above .fab-chat with the
   same column `gap` as every other launcher. Both fade/pop in together
   once per session (assets/js/chat.js's initTeaser) and fade back out
   together as one unit, since they share this single transitioned box
   instead of animating independently.
   `direction:ltr` keeps the owl on the physical right / bubble on its
   physical left in both languages — same reasoning as `.floating-actions`'
   physical `right` above: a persistent utility, not mirrored content, so
   it shouldn't flip in Arabic (`dir="rtl"` would otherwise reverse this
   row's child order). `.fab-teaser` below re-applies `direction:rtl` on
   Arabic pages so the bubble's own Arabic text still reads naturally. */
.fab-mascot{
  display:flex; align-items:center; gap:8px; transform-origin:right center;
  direction:ltr;
  opacity:0; pointer-events:none; transform:translateY(8px) scale(.92);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.fab-mascot.show{opacity:1; pointer-events:auto; transform:translateY(0) scale(1);}
.fab-mascot-owl{width:56px; height:56px; flex-shrink:0;}
.fab-mascot-owl svg{width:100%; height:100%;}

/* Speech bubble itself — visibility now lives on the shared .fab-mascot
   wrapper above, so this only holds its own look, not show/hide state. */
.fab-teaser{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:8px;
  max-width:230px; padding:11px 16px;
  background:var(--c-navy-deep);
  color:#fff;
  border:1px solid rgba(255,255,255,.12); border-radius:14px; box-shadow:var(--shadow-metal);
  font-size:.85rem; font-weight:700; line-height:1.3; white-space:normal; word-break:break-word;
}
[dir="rtl"] .fab-teaser{direction:rtl;}
.fab-teaser::after{
  content:''; position:absolute; top:50%; right:-8px; margin-top:-8px;
  width:0; height:0; border:8px solid transparent; border-left-color:var(--c-navy-deep);
}
.fab-teaser-link{
  color:inherit; text-decoration:none; min-width:0;
  background:none; border:none; padding:0; font:inherit; text-align:inherit; cursor:pointer;
}
.fab-teaser-link:hover{text-decoration:underline;}
.fab-mascot-owl, .fab-teaser{cursor:pointer;}
.fab-teaser-close{
  position:absolute; top:-7px; right:-7px; width:18px; height:18px; border-radius:50%;
  border:1px solid rgba(122,91,20,.35); background:#fff; color:var(--c-navy-deep);
  display:grid; place-items:center; padding:0; cursor:pointer; box-shadow:var(--shadow-sm);
}
.fab-teaser-close svg{width:10px; height:10px;}

@media (prefers-reduced-motion:no-preference){
  @keyframes mascot-bob{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-4px);}
  }
  .fab-mascot.show{animation:mascot-bob 2.4s ease-in-out .6s infinite;}
}
@media (prefers-reduced-motion:reduce){
  .fab-mascot{transition:opacity .3s;}
}

/* Chat widget popup (launched from .fab-chat) */
.chat-widget{
  position:fixed; right:24px; bottom:24px; z-index:1000;
  width:380px; max-width:calc(100vw - 32px); height:560px; max-height:calc(100vh - 48px);
  background:var(--c-surface); border:1px solid var(--glass-border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(16px) scale(.98);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s, width .25s var(--ease), height .25s var(--ease);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .chat-widget{background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);}
  html[data-theme="dark"] .chat-widget{background:var(--glass-bg-dark);}
}
.chat-widget.is-open{opacity:1; visibility:visible; transform:translateY(0) scale(1);}
.chat-widget.is-maximized{width:min(760px, calc(100vw - 48px)); height:calc(100vh - 48px);}
.chat-widget.is-minimized{height:auto;}
.chat-widget.is-minimized .chat-widget-body{display:none;}
.chat-widget.is-minimized .chat-widget-header{cursor:pointer;}
.chat-widget.is-minimized [data-chat-maximize]{display:none;}
.chat-widget-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px; background:var(--g-steel-blue-soft); color:#fff; flex-shrink:0;
}
.chat-widget-title{display:flex; align-items:center; gap:10px; min-width:0;}
.chat-widget-avatar{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.16); display:grid; place-items:center; flex-shrink:0;}
.chat-widget-avatar svg{width:18px; height:18px;}
.chat-widget-title-text{display:flex; flex-direction:column; min-width:0; line-height:1.3;}
.chat-widget-title-text b{font-size:.9rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* Hours line wraps (rather than truncating) so the full schedule is always
   readable; the header has no fixed height, so it grows to fit as many
   lines as this needs at the current widget width. */
.chat-widget-title-text small{font-size:.7rem; color:rgba(255,255,255,.72); white-space:normal; line-height:1.35; margin-top:2px;}
.chat-widget-controls{display:flex; align-items:center; gap:2px; flex-shrink:0;}
.chat-widget-btn{width:28px; height:28px; border-radius:6px; border:none; background:transparent; color:#fff; display:grid; place-items:center; cursor:pointer; transition:background .2s var(--ease);}
.chat-widget-btn:hover{background:rgba(255,255,255,.18);}
.chat-widget-btn svg{width:16px; height:16px;}
/* Minimize/restore icon swap: the dash shows while open, a square
   ("restore") shows once minimized — driven by .is-minimized on the
   widget, same toggle that hides the body/maximize button. */
[data-chat-minimize] .icon-restore{display:none;}
.chat-widget.is-minimized [data-chat-minimize] .icon-minimize{display:none;}
.chat-widget.is-minimized [data-chat-minimize] .icon-restore{display:block;}
/* Maximize/shrink icon swap: expand-corners shows while normal-sized, a
   shrink-corners icon shows once maximized — driven by .is-maximized. */
[data-chat-maximize] .icon-shrink{display:none;}
.chat-widget.is-maximized [data-chat-maximize] .icon-maximize{display:none;}
.chat-widget.is-maximized [data-chat-maximize] .icon-shrink{display:block;}
.chat-widget-body{flex:1; min-height:0;}
.chat-widget-body iframe{width:100%; height:100%; border:none; display:block; background:var(--c-white);}

/* Dropdown menus (Bootstrap's .dropdown-menu) — same "floating over
   content" glass treatment as .chat-widget above, for consistency with
   any dropdown added later. No page currently renders one; this rule is
   inert until one exists. RTL alignment already handled in rtl.css. */
.dropdown-menu{
  background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .dropdown-menu{background:var(--glass-bg); border-color:var(--glass-border); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);}
  html[data-theme="dark"] .dropdown-menu{background:var(--glass-bg-dark);}
}

/* ---------------------------------------------------------
   Page hero (inner pages)
   --------------------------------------------------------- */
/* Light theme: a soft daytime-sky blue (same palette as the homepage
   hero's light theme, home.css --hero-bg) with dark navy text. Dark theme
   below restores the original navy-gradient/white-text banner unchanged. */
.page-hero{
  padding-top:calc(var(--header-h) + 64px); padding-bottom:64px;
  background:
    radial-gradient(900px 500px at 88% -20%, rgba(233,196,106,.16), transparent 60%),
    linear-gradient(180deg, #A9D4F7 0%, #C9E4FB 30%, #E4F1FC 58%, #F6FAFE 82%, #FFFFFF 100%);
  color:var(--c-navy-deep); position:relative; overflow:hidden;
}
.page-hero::before{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(10,27,51,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(10,27,51,.05) 1px, transparent 1px);
  background-size:56px 56px; mask-image:radial-gradient(circle at 85% 0%, black, transparent 65%);
}
.page-hero .breadcrumb{font-family:var(--f-mono); font-size:.78rem; color:rgba(10,27,51,.55); margin-bottom:18px; letter-spacing:.04em; position:relative; z-index:2;}
.page-hero .breadcrumb a{color:rgba(10,27,51,.78);}
.page-hero .breadcrumb a:hover{color:var(--c-gold);}
.page-hero h1{color:var(--c-navy-deep); margin-bottom:14px; position:relative; z-index:2;}
.page-hero p.lead{color:rgba(10,27,51,.68); max-width:640px; position:relative; z-index:2;}

html[data-theme="dark"] .page-hero{
  background:
    radial-gradient(900px 500px at 88% -20%, rgba(233,196,106,.14), transparent 60%),
    var(--g-steel-blue-soft);
  background-size:auto, 220% 220%; background-position:0 0, 20% 10%;
  color:#fff;
}
html[data-theme="dark"] .page-hero::before{
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
}
html[data-theme="dark"] .page-hero .breadcrumb{color:rgba(255,255,255,.5);}
html[data-theme="dark"] .page-hero .breadcrumb a{color:rgba(255,255,255,.7);}
html[data-theme="dark"] .page-hero .breadcrumb a:hover{color:var(--c-gold-light);}
html[data-theme="dark"] .page-hero h1{color:#fff;}
html[data-theme="dark"] .page-hero p.lead{color:rgba(255,255,255,.68);}

/* Divider strip with dashes (certificate feel) */
.dash-divider{border:none; border-top:1px dashed var(--c-line); margin:0;}

/* Value / process list numbering */
.value-list{counter-reset:vnum;}
.value-item{display:flex; gap:20px; padding:26px 0; border-bottom:1px solid var(--c-line);}
.value-item:last-child{border-bottom:none;}
.value-item .num{
  counter-increment:vnum; font-family:var(--f-mono); color:var(--c-gold); font-weight:600; font-size:.9rem;
  flex-shrink:0; width:36px;
}
.value-item .num::before{content: counter(vnum, decimal-leading-zero);}

/* Table (branches) */
.branch-table{width:100%; border-collapse:collapse; font-size:.92rem;}
.branch-table th{text-align:start; font-family:var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--c-slate); padding:12px 16px; background:var(--c-ivory); border-bottom:1px solid var(--c-line);}
.branch-table td{padding:14px 16px; border-bottom:1px solid var(--c-line); color:var(--c-ink);}
.branch-table tr:hover td{background:var(--c-ivory);}

/* Tabs (branches by emirate) */
.tab-bar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px;}
.tab-btn{
  padding:9px 18px; border-radius:999px; border:1px solid var(--c-line); background:var(--c-surface);
  font-size:.85rem; font-weight:600; color:var(--c-slate); cursor:pointer; transition:all .25s var(--ease);
}
.tab-btn.active,.tab-btn:hover{background:var(--c-navy-deep); border-color:var(--c-navy-deep); color:#fff;}

/* Steps (claims process) */
.steps{position:relative;}
.step-row{display:grid; grid-template-columns:64px 1fr; gap:24px; position:relative; padding-bottom:44px;}
.step-row:last-child{padding-bottom:0;}
.step-row::before{
  content:''; position:absolute; inset-inline-start:31px; top:64px; bottom:0; width:1px;
  background:repeating-linear-gradient(to bottom, var(--c-line) 0 6px, transparent 6px 12px);
}
.step-row:last-child::before{display:none;}
.step-num{
  width:64px; height:64px; border-radius:50%; background:var(--g-steel-blue-soft); background-size:180% 180%; color:var(--c-gold-light);
  display:grid; place-items:center; font-family:var(--f-mono); font-weight:600; font-size:1.2rem; flex-shrink:0;
  border:4px solid var(--c-ivory); box-shadow:var(--shadow-metal-navy);
}
/* Complaint process flow chart (complaintProcess.html) — a pictorial
   rectangle/parallelogram/diamond flow instead of a plain step list,
   built from the site's own card/shadow/gradient tokens. Lines and
   shape borders are a barely-visible light gold at rest, with a
   brighter gold "current" continuously chasing through them — reads as
   the complaint actively flowing from step to step rather than a
   static diagram. */
.flowchart{display:flex; flex-direction:column; align-items:center;}
.flow-step{display:flex; flex-direction:column; align-items:center; gap:16px; position:relative; width:100%; padding-bottom:56px;}
.flow-step:last-child{padding-bottom:0;}
.flow-connector{
  position:absolute; bottom:0; inset-inline-start:50%; transform:translateX(-50%);
  width:2px; height:56px;
  background-image:
    repeating-linear-gradient(to bottom, rgba(201,164,77,.32) 0 6px, transparent 6px 12px),
    linear-gradient(to bottom, transparent 0, var(--c-gold-light) 50%, transparent 100%);
  background-size:100% 100%, 100% 44px;
  background-repeat:no-repeat, repeat-y;
  animation:flowLineChase 1.6s linear infinite;
}
[dir="rtl"] .flow-connector{transform:translateX(50%);}
@keyframes flowLineChase{ from{background-position:0 0, 0 0;} to{background-position:0 0, 0 44px;} }
.flow-connector::after{
  content:''; position:absolute; bottom:-1px; inset-inline-start:50%;
  width:10px; height:10px; border-inline-end:2px solid var(--c-gold); border-block-end:2px solid var(--c-gold);
  transform:translate(-50%,50%) rotate(45deg);
}
[dir="rtl"] .flow-connector::after{transform:translate(50%,50%) rotate(45deg);}
.flow-step:last-child .flow-connector{display:none;}

.flow-num{
  width:52px; height:52px; border-radius:50%; background:var(--g-steel-blue-soft); background-size:180% 180%; color:var(--c-gold-light);
  display:grid; place-items:center; font-family:var(--f-mono); font-weight:600; font-size:1.05rem; flex-shrink:0;
  border:4px solid var(--c-ivory); box-shadow:var(--shadow-metal-navy); position:relative; z-index:2;
}
html[data-theme="dark"] .flow-num{border-color:var(--c-surface);}

.flow-box{
  position:relative; isolation:isolate;
  width:100%; max-width:600px; background:var(--c-surface); border:1px solid rgba(201,164,77,.32);
  border-radius:var(--radius-md); padding:26px 28px; box-shadow:var(--shadow-sm); text-align:center;
}
.flow-box h3{margin-bottom:8px;}
.flow-box p{margin-bottom:0; font-size:.94rem;}
.flow-box .contact-info-row,.flow-box .card{text-align:start;}
.flow-box .contact-info-row{margin-bottom:10px;}
.flow-box .contact-info-row:last-child{margin-bottom:0;}

/* Parallelogram (Investigation, Escalation) — skew the box, counter-skew
   the content so text stays upright inside the slanted shape. */
.flow-parallelogram{transform:skew(-10deg);}
.flow-parallelogram .flow-box-inner{transform:skew(10deg);}

/* Diamond (Findings & Complaint Closed) — a rotated square behind an
   unrotated, absolutely-centered content layer. */
.flow-diamond-wrap{width:320px; max-width:100%; height:320px; position:relative;}
.flow-diamond{
  position:absolute; isolation:isolate; inset:44px; background:var(--c-surface);
  border:1px solid rgba(201,164,77,.32); box-shadow:var(--shadow-sm); transform:rotate(45deg);
}
.flow-diamond-content{
  position:absolute; inset:74px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center;
}

/* Golden chase ring on the shape borders — same rotating conic-gradient
   + mask-composite technique as the homepage's product-card hover shine
   (assets/css/home.css), but running continuously rather than on hover,
   and clipped to just the border's width so it traces the shape's own
   outline (including the parallelogram's skew and the diamond's rotation). */
@property --flow-shine-angle{
  syntax:'<angle>'; inherits:false; initial-value:0deg;
}
.flow-box::before,
.flow-diamond::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--flow-shine-angle),
    transparent 0deg, transparent 260deg,
    var(--c-gold) 300deg, var(--c-gold-light) 320deg, var(--c-gold) 340deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  animation:flowShineChase 2.6s linear infinite;
}
@keyframes flowShineChase{ to{ --flow-shine-angle:360deg; } }
@media (prefers-reduced-motion:reduce){
  .flow-connector{animation:none;}
  .flow-box::before,.flow-diamond::before{display:none;}
}
.flow-diamond-content h3{margin-bottom:8px; font-size:1.05rem;}
.flow-diamond-content p{font-size:.86rem; margin-bottom:0;}

/* Job listing */
.job-card{
  display:flex; justify-content:space-between; align-items:center; padding:26px 28px;
  border:1px solid var(--c-line); border-radius:var(--radius-md); margin-bottom:16px; flex-wrap:wrap; gap:16px;
  transition:all .3s var(--ease);
}
.job-card:hover{border-color:var(--c-gold); box-shadow:var(--shadow-sm);}
.job-card .meta{display:flex; gap:14px; margin-top:8px; flex-wrap:wrap;}
.job-tag{font-family:var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--c-slate); background:var(--c-ivory); padding:5px 12px; border-radius:999px;}

/* Map embed frame */
.map-frame{border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--c-line); height:420px;}
.map-frame iframe{width:100%; height:100%; border:0;}

/* Branch cards (per-location map + address) */
.branch-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.branch-card{
  background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius-md);
  overflow:hidden; display:flex; flex-direction:column; transition:all .3s var(--ease);
}
.branch-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent;}
.branch-card-map{height:150px; background:var(--c-ivory);}
.branch-card-map iframe{width:100%; height:100%; border:0; display:block;}
.branch-card-body{padding:20px 22px 22px; flex:1; display:flex; flex-direction:column;}
.branch-card-body h3{font-size:1rem; font-weight:700; margin-bottom:10px; color:var(--c-heading);}
.branch-card-address{display:flex; gap:8px; font-size:.85rem; color:var(--c-slate); margin-bottom:10px; line-height:1.45;}
.branch-card-address svg{width:16px; height:16px; flex-shrink:0; margin-top:2px; color:var(--c-gold);}
.branch-card-phone{display:inline-flex; align-items:center; gap:8px; font-size:.85rem; font-weight:600; color:var(--c-heading); margin-bottom:16px;}
.branch-card-phone svg{width:14px; height:14px; color:var(--c-gold); flex-shrink:0;}
.branch-card-directions{
  margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:.72rem;
  letter-spacing:.04em; text-transform:uppercase; color:var(--c-heading); font-weight:600;
}
.branch-card-directions svg{width:13px; height:13px; transition:transform .25s var(--ease);}
.branch-card:hover .branch-card-directions svg{transform:translateX(4px);}
[dir="rtl"] .branch-card:hover .branch-card-directions svg{transform:translateX(-4px);}

/* Gallery (multimedia) */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.gallery-item{
  position:relative; border-radius:var(--radius-md); overflow:hidden; cursor:pointer;
  aspect-ratio:4/3; background:var(--c-ivory); border:1px solid var(--c-line);
}
.gallery-item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease);}
.gallery-item:hover img{transform:scale(1.06);}
.gallery-item-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(to top, rgba(10,27,51,.55), rgba(10,27,51,0) 55%);
  opacity:0; transition:opacity .3s var(--ease);
}
.gallery-item:hover .gallery-item-overlay,.gallery-item:focus-visible .gallery-item-overlay{opacity:1;}
.gallery-item-overlay svg{width:32px; height:32px; color:#fff;}
.gallery-item-video{
  grid-column:1 / -1; aspect-ratio:5/4; cursor:default; background:#000;
  max-width:720px; margin-inline:auto;
}
.gallery-item-video video{width:100%; height:100%; object-fit:contain; display:block;}
.gallery-item-tag{
  position:absolute; top:12px; inset-inline-start:12px; z-index:2;
  font-family:var(--f-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em;
  background:rgba(10,27,51,.72); color:#fff; padding:4px 10px; border-radius:999px; pointer-events:none;
}

/* Lightbox (gallery photo viewer) */
.lightbox{
  position:fixed; inset:0; z-index:3000; background:rgba(10,27,51,.92);
  display:flex; align-items:center; justify-content:center; padding:48px;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease);
}
.lightbox.open{opacity:1; visibility:visible;}
.lightbox img{max-width:100%; max-height:100%; border-radius:var(--radius-md); box-shadow:var(--shadow-md);}
.lightbox-close{
  position:absolute; top:24px; inset-inline-end:24px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff;
  display:grid; place-items:center; cursor:pointer; transition:background .25s var(--ease);
}
.lightbox-close:hover{background:rgba(255,255,255,.24);}
.lightbox-close svg{width:20px; height:20px;}

/* Utility */
.text-gold{color:var(--c-gold);}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.badge-soft{background:var(--c-ivory); color:var(--c-heading); font-family:var(--f-mono); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; padding:5px 12px; border-radius:999px; display:inline-block;}

.skip-link{position:absolute; inset-inline-start:-9999px; top:0; background:var(--c-surface); padding:12px 20px; z-index:2000;}
.skip-link:focus{inset-inline-start:16px; top:16px;}

/* Loading skeleton for component slots */
[data-component]:empty{min-height:1px;}