/* ==========================================================================
   AL ZAMAN GROUP OF COMPANIES — components.css
   Preloader · Header · Navigation · Hero slider · Drawer · Footer
   Floating UI · Overlays · Animations · Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. PRELOADER & SCROLL PROGRESS
   -------------------------------------------------------------------------- */
#preloader{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  background:var(--ink); transition:opacity .6s var(--ease),visibility .6s;
}
#preloader.done{ opacity:0; visibility:hidden; }
.pl-inner{ text-align:center; }
.pl-ring{ width:74px; height:74px; margin:0 auto 26px; }
.pl-ring svg{ width:100%; height:100%; animation:spin 1.15s linear infinite; }
.pl-ring circle{ fill:none; stroke-width:3; stroke-linecap:round; }
.pl-ring .trk{ stroke:rgba(255,255,255,.1); }
.pl-ring .bar{ stroke:url(#plg); stroke-dasharray:226; stroke-dashoffset:226; animation:pldash 1.5s var(--ease) infinite; }
.pl-word{ font-family:var(--f-display); font-size:1.32rem; color:#fff; letter-spacing:.04em; }
.pl-word span{ color:var(--gold); }
.pl-sub{
  margin-top:9px; font-size:.7rem; letter-spacing:.34em;
  text-transform:uppercase; color:rgba(255,255,255,.42);
}

#scrollbar{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:1200;
  background:linear-gradient(90deg,var(--gold-600),var(--gold),#F7D488);
  box-shadow:0 0 12px var(--gold-glow);
}

/* --------------------------------------------------------------------------
   02. TOP BAR
   -------------------------------------------------------------------------- */
.topbar{
  background:var(--ink); color:rgba(255,255,255,.66);
  font-size:.82rem; position:relative; z-index:60;
}
.topbar-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; min-height:42px;
}
.topbar-l,.topbar-r{ display:flex; align-items:center; gap:22px; }
.tb-item{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; transition:color .3s; }
.tb-item svg{ width:15px; height:15px; color:var(--gold); flex:none; }
.tb-item:hover{ color:#fff; }
.tb-sep{ width:1px; height:15px; background:rgba(255,255,255,.14); }
.tb-social{ display:flex; gap:7px; }
.tb-social a{
  width:29px; height:29px; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.07); color:rgba(255,255,255,.72);
  transition:background .3s,color .3s,transform .3s;
}
.tb-social a svg{ width:14px; height:14px; }
.tb-social a:hover{ background:var(--gold); color:#fff; transform:translateY(-2px); }

.lang-sw{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--f-head); font-weight:600; font-size:.78rem; letter-spacing:.08em;
}
.lang-sw button{ color:rgba(255,255,255,.5); padding:2px 5px; transition:color .3s; }
.lang-sw button.on,.lang-sw button:hover{ color:var(--gold); }

/* --------------------------------------------------------------------------
   03. HEADER
   -------------------------------------------------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease);
}
.site-header .topbar{ transition:opacity .35s,height .4s,visibility .4s; overflow:hidden; }
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:26px; min-height:var(--hdr);
}
.brand{ display:flex; align-items:center; flex:none; }
.brand img{ height:46px; width:auto; }
.brand .logo-light{ display:block; }
.brand .logo-dark{ display:none; }
.site-header.solid{
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 6px 30px rgba(10,17,32,.08);
}
.site-header.solid .brand .logo-light{ display:none; }
.site-header.solid .brand .logo-dark{ display:block; height:40px; }
.site-header.solid .topbar{ opacity:0; height:0; min-height:0; visibility:hidden; }
.site-header.hide{ transform:translateY(-100%); }

/* Nav */
.nav{ display:flex; align-items:center; gap:2px; }
.nav > li{ position:relative; }
.nav > li > a{
  position:relative; display:flex; align-items:center; gap:6px;
  padding:12px 15px; border-radius:var(--r-sm);
  font-family:var(--f-head); font-size:.92rem; font-weight:500; color:#fff;
  transition:color .3s,background .3s;
}
.site-header.solid .nav > li > a{ color:var(--ink); }
.nav > li > a::after{
  content:""; position:absolute; left:15px; right:15px; bottom:5px; height:2px;
  background:var(--gold); border-radius:2px;
  transform:scaleX(0); transform-origin:right;
  transition:transform .38s var(--ease);
}
.nav > li > a:hover::after,
.nav > li.current > a::after{ transform:scaleX(1); transform-origin:left; }
.nav .caret{ width:11px; height:11px; transition:transform .3s; opacity:.65; }
.nav li.has-sub:hover > a .caret{ transform:rotate(180deg); }

/* Dropdown */
.sub{
  position:absolute; top:calc(100% + 12px); left:50%;
  min-width:258px; padding:9px;
  background:rgba(255,255,255,.99);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-radius:var(--r); box-shadow:var(--sh-lg);
  opacity:0; visibility:hidden; transform:translate(-50%,14px);
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s;
}
.nav > li:hover .sub{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.sub::before{
  content:""; position:absolute; top:-6px; left:50%; margin-left:-6px;
  width:12px; height:12px; background:#fff; transform:rotate(45deg); border-radius:2px;
}
.sub a{
  display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:var(--r-sm);
  font-size:.9rem; font-weight:500; color:var(--ink-600);
  transition:background .25s,color .25s,transform .25s;
}
.sub a .ico{
  width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:9px;
  background:var(--cream); color:var(--gold-600); transition:background .25s,color .25s;
}
.sub a .ico svg{ width:17px; height:17px; }
.sub a:hover{ background:var(--cream); color:var(--ink); transform:translateX(4px); }
.sub a:hover .ico{ background:var(--gold); color:#fff; }
.sub a b{ display:block; font-weight:600; line-height:1.35; }
.sub a i{ display:block; font-style:normal; font-size:.76rem; color:var(--slate); line-height:1.4; }

/* Mega menu */
.mega{
  position:absolute; top:calc(100% + 12px); left:50%;
  width:min(950px,92vw); padding:26px;
  background:rgba(255,255,255,.99);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  opacity:0; visibility:hidden; transform:translate(-50%,14px);
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s;
}
.nav > li:hover .mega{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.mega::before{
  content:""; position:absolute; top:-6px; left:50%; margin-left:-6px;
  width:12px; height:12px; background:#fff; transform:rotate(45deg); border-radius:2px;
}
.mega-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.mega-card{
  display:block; padding:19px; border-radius:var(--r);
  background:var(--cream); border:1.5px solid transparent;
  transition:transform .35s var(--ease),box-shadow .35s,border-color .3s,background .3s;
}
.mega-card:hover{
  transform:translateY(-5px); background:#fff;
  border-color:var(--mc,var(--gold)); box-shadow:var(--sh-md);
}
.mega-ico{
  width:46px; height:46px; display:grid; place-items:center;
  border-radius:13px; margin-bottom:14px; color:#fff;
  background:linear-gradient(135deg,var(--mc,var(--gold)),rgba(0,0,0,.35));
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.mega-ico svg{ width:22px; height:22px; }
.mega-card b{
  display:block; font-family:var(--f-head); font-size:1rem;
  font-weight:600; color:var(--ink); margin-bottom:6px;
}
.mega-card p{ font-size:.85rem; line-height:1.6; color:var(--slate); }
.mega-foot{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.mega-foot p{ font-size:.87rem; color:var(--slate); }
.mega-foot p b{ color:var(--ink); font-family:var(--f-body); }

/* Header actions */
.hdr-actions{ display:flex; align-items:center; gap:10px; flex:none; }
.icon-btn{
  width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.09); color:#fff; border:1.5px solid rgba(255,255,255,.14);
  transition:background .3s,color .3s,border-color .3s,transform .3s;
}
.icon-btn svg{ width:19px; height:19px; }
.icon-btn:hover{ background:var(--gold); color:#fff; border-color:var(--gold); transform:translateY(-2px); }
.site-header.solid .icon-btn{ background:var(--cream); color:var(--ink); border-color:var(--line-2); }
.site-header.solid .icon-btn:hover{ background:var(--gold); color:#fff; border-color:var(--gold); }
.hdr-enquiry{ display:none; }
.site-header.solid .hdr-enquiry{ display:inline-flex; }

/* Burger */
.burger{
  width:44px; height:44px; display:none; place-items:center;
  border-radius:var(--r-sm); background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.16);
}
.burger span{
  display:block; width:21px; height:2px; background:#fff; border-radius:2px;
  transition:transform .35s var(--ease),opacity .25s,width .35s;
}
.burger span+span{ margin-top:5px; }
.burger span:nth-child(2){ width:14px; }
.burger.on span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.on span:nth-child(2){ opacity:0; }
.burger.on span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); width:21px; }
.site-header.solid .burger{ background:var(--cream); border-color:var(--line-2); }
.site-header.solid .burger span{ background:var(--ink); }

/* Mobile drawer */
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(400px,88vw); z-index:1100;
  background:var(--ink); padding:26px; overflow-y:auto;
  transform:translateX(100%); transition:transform .45s var(--ease);
  box-shadow:-20px 0 60px rgba(0,0,0,.4);
}
.drawer.on{ transform:translateX(0); }
.drawer-top{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.1);
}
.drawer-top img{ height:38px; }
.drawer-close{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:50%; background:rgba(255,255,255,.08); color:#fff;
}
.drawer-close svg{ width:18px; height:18px; }
.drawer-nav{ padding:18px 0; }
.drawer-nav > li{ border-bottom:1px solid rgba(255,255,255,.07); }
.drawer-nav > li > a,.drawer-nav .acc-btn{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; padding:15px 2px; text-align:left;
  font-family:var(--f-head); font-weight:500; color:#fff; font-size:1rem;
}
.drawer-nav .acc-btn svg{ width:15px; height:15px; color:var(--gold); transition:transform .35s; flex:none; }
.drawer-nav .acc.on .acc-btn svg{ transform:rotate(180deg); }
.acc-body{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.acc-body-in{ padding:0 0 14px 14px; display:grid; gap:2px; }
.acc-body-in a{
  display:flex; align-items:center; gap:11px; padding:9px 0;
  color:rgba(255,255,255,.66); font-size:.92rem; transition:color .25s,transform .25s;
}
.acc-body-in a svg{ width:16px; height:16px; color:var(--gold); flex:none; }
.acc-body-in a:hover{ color:var(--gold); transform:translateX(4px); }
.drawer-foot{ margin-top:22px; display:grid; gap:16px; }
.drawer-contact{ display:grid; gap:11px; }
.drawer-contact a{ display:flex; align-items:center; gap:11px; color:rgba(255,255,255,.68); font-size:.9rem; }
.drawer-contact svg{ width:17px; height:17px; color:var(--gold); flex:none; }
.drawer-social{ display:flex; gap:9px; }
.drawer-social a{
  width:36px; height:36px; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.8); transition:background .3s,color .3s;
}
.drawer-social a svg{ width:16px; height:16px; }
.drawer-social a:hover{ background:var(--gold); color:#fff; }

.drawer-scrim{
  position:fixed; inset:0; z-index:1050; background:rgba(10,17,32,.62);
  backdrop-filter:blur(3px); opacity:0; visibility:hidden;
  transition:opacity .4s,visibility .4s;
}
.drawer-scrim.on{ opacity:1; visibility:visible; }

/* --------------------------------------------------------------------------
   04. HERO SLIDER
   -------------------------------------------------------------------------- */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:center; overflow:hidden; background:var(--ink);
}
.hero-slides{ position:absolute; inset:0; }
.hslide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  display:flex; align-items:flex-start;
  transition:opacity 1.1s var(--ease),visibility 1.1s;
}
.hslide.on{ opacity:1; visibility:visible; }
.hslide-bg{
  position:absolute; inset:-4%;
  background-size:cover; background-position:center;
  transform:scale(1.08);
}
.hslide.on .hslide-bg{ animation:kb 13s linear forwards; }
.hslide::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(8,13,24,.93) 0%,rgba(8,13,24,.78) 42%,rgba(8,13,24,.44) 76%,rgba(8,13,24,.62) 100%);
}
.hslide::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg,rgba(8,13,24,.82) 0%,transparent 44%);
}
/* Caption is centred on both axes. Auto block margins centre it safely: on a
   short viewport the free space is negative, the margins collapse to 0 and the
   copy stays fully visible instead of being clipped. Padding-top clears the
   fixed header (utility bar + nav), padding-bottom clears the hero UI strip. */
.hslide > .wrap{ margin-block:auto; }
.hslide-in{
  position:relative; z-index:3;
  width:100%; max-width:820px; margin-inline:auto; text-align:center;
  padding-top:calc(var(--hdr) + 28px); padding-bottom:104px;
}
.hslide-in > *{ opacity:0; transform:translateY(28px); }
.hslide.on .hslide-in > *{ animation:riseIn .95s var(--ease-out) forwards; }
.hslide.on .hslide-in > *:nth-child(1){ animation-delay:.22s; }
.hslide.on .hslide-in > *:nth-child(2){ animation-delay:.36s; }
.hslide.on .hslide-in > *:nth-child(3){ animation-delay:.5s; }
.hslide.on .hslide-in > *:nth-child(4){ animation-delay:.64s; }
.hslide.on .hslide-in > *:nth-child(5){ animation-delay:.78s; }
.hslide h1{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.3rem,5.6vw,4.35rem); line-height:1.06;
  color:#fff; letter-spacing:-.015em; margin-bottom:22px;
}
.hslide h1 em{ font-style:normal; color:var(--gold); }
.hslide h1 .grad{
  background:linear-gradient(100deg,var(--gold) 0%,#F7D488 50%,var(--gold-300) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hslide p{
  font-size:clamp(1rem,1.45vw,1.19rem); line-height:1.8; color:rgba(255,255,255,.78);
  max-width:620px; margin:0 auto 34px;
}
.hslide .btn-row{ justify-content:center; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.7em; margin-bottom:24px;
  padding:8px 17px; border-radius:99px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px);
  font-family:var(--f-head); font-size:.75rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.hero-eyebrow .dot{
  width:7px; height:7px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 4px var(--gold-glow); animation:pulse 2s ease-in-out infinite;
}

/* Hero controls */
.hero-ui{ position:absolute; inset:auto 0 0; z-index:5; padding-bottom:34px; }
.hero-ui-in{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.hero-dots{ display:flex; align-items:center; gap:12px; }
.hdot{
  position:relative; width:44px; height:4px; border-radius:99px;
  background:rgba(255,255,255,.26); overflow:hidden; cursor:pointer;
  transition:width .4s var(--ease),background .3s;
}
.hdot::after{
  content:""; position:absolute; inset:0; width:0;
  background:linear-gradient(90deg,var(--gold),#F7D488); border-radius:99px;
}
.hdot.on{ width:78px; }
.hdot.on::after{ animation:dotFill var(--dur,7s) linear forwards; }
.hdot:hover{ background:rgba(255,255,255,.45); }
.hero-arrows{ display:flex; gap:10px; }
.harrow{
  width:52px; height:52px; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.08); color:#fff;
  border:1.5px solid rgba(255,255,255,.2); backdrop-filter:blur(8px);
  transition:background .3s,color .3s,border-color .3s,transform .3s;
}
.harrow svg{ width:20px; height:20px; }
.harrow:hover{ background:var(--gold); color:#fff; border-color:var(--gold); transform:scale(1.06); }

.hero-scroll{
  position:absolute; left:50%; bottom:112px; z-index:5;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-family:var(--f-head); font-size:.66rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.5);
  transition:color .3s,opacity .3s;
}
.hero-scroll:hover{ color:#fff; }
.hero-scroll .ln{
  width:1px; height:46px; background:linear-gradient(var(--gold),transparent);
  position:relative; overflow:hidden;
}
.hero-scroll .ln::after{
  content:""; position:absolute; top:0; left:0; width:1px; height:16px; background:#fff;
  animation:scrollLn 2s var(--ease) infinite;
}

/* Page hero (inner pages) */
.page-hero{
  position:relative; overflow:hidden;
  padding:calc(var(--hdr) + 96px) 0 92px;
  background:var(--ink); color:rgba(255,255,255,.74);
  text-align:center;
}
.page-hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:.24;
}
.page-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,rgba(10,17,32,.94),rgba(10,17,32,.72));
}
.page-hero-in{ position:relative; z-index:2; max-width:830px; margin:0 auto; }
.page-hero h1{
  font-family:var(--f-display); font-weight:400; color:#fff;
  font-size:clamp(2.1rem,4.6vw,3.5rem); line-height:1.1; margin-bottom:18px;
}
.page-hero h1 em{ font-style:normal; color:var(--gold); }
.page-hero p{ font-size:1.06rem; line-height:1.8; color:rgba(255,255,255,.72); }
.crumbs{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:9px; margin-top:26px;
  font-size:.82rem; color:rgba(255,255,255,.55);
}
.crumbs a{ transition:color .3s; }
.crumbs a:hover{ color:var(--gold); }
.crumbs .sep{ color:var(--gold); }
.crumbs .cur{ color:#fff; font-weight:600; }

/* --------------------------------------------------------------------------
   05. FOOTER
   -------------------------------------------------------------------------- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.62); position:relative; overflow:hidden; }
.site-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--gold-600),var(--gold),#F7D488,var(--gold-300),var(--gold-600));
}
.ft-top{ padding:clamp(56px,6vw,84px) 0 48px; position:relative; z-index:1; }
.ft-grid{
  display:grid; grid-template-columns:1.55fr 1fr 1fr 1.35fr; gap:44px;
}
.ft-brand img{ height:52px; margin-bottom:22px; }
.ft-about{ font-size:.93rem; line-height:1.8; margin-bottom:24px; max-width:390px; }
.ft-social{ display:flex; gap:10px; }
.ft-social a{
  width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.07); color:rgba(255,255,255,.78);
  transition:background .3s,color .3s,transform .3s;
}
.ft-social a svg{ width:17px; height:17px; }
.ft-social a:hover{ background:var(--gold); color:#fff; transform:translateY(-3px); }

.ft-col h4{
  font-family:var(--f-head); font-size:.79rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  margin-bottom:24px; position:relative; padding-bottom:12px;
}
.ft-col h4::after{
  content:""; position:absolute; left:0; bottom:0; width:34px; height:2px;
  background:var(--gold); border-radius:2px;
}
.ft-links{ display:grid; gap:12px; }
.ft-links a{
  display:inline-flex; align-items:center; gap:9px; font-size:.93rem;
  color:rgba(255,255,255,.62); transition:color .3s,transform .3s,gap .3s;
}
.ft-links a::before{
  content:""; width:0; height:1.5px; background:var(--gold);
  transition:width .3s var(--ease);
}
.ft-links a:hover{ color:#fff; transform:translateX(3px); }
.ft-links a:hover::before{ width:12px; }

.ft-contact{ display:grid; gap:18px; margin-bottom:26px; }
.ft-crow{ display:flex; gap:14px; align-items:flex-start; }
.ft-crow .ic{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  border-radius:11px; background:rgba(226,157,34,.13); color:var(--gold);
}
.ft-crow .ic svg{ width:19px; height:19px; }
.ft-crow b{
  display:block; font-family:var(--f-head); font-size:.72rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.42);
  margin-bottom:3px;
}
.ft-crow p,.ft-crow a{ font-size:.93rem; line-height:1.65; color:rgba(255,255,255,.78); transition:color .3s; }
.ft-crow a:hover{ color:var(--gold); }

.ft-news p{ font-size:.87rem; line-height:1.65; margin-bottom:16px; }
.nl-form{ display:flex; gap:10px; }
.nl-form .inp{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14);
  color:#fff; padding:13px 16px;
}
.nl-form .inp::placeholder{ color:rgba(255,255,255,.4); }
.nl-form .inp:focus{ border-color:var(--gold); background:rgba(255,255,255,.1); }
.nl-btn{
  width:52px; height:auto; flex:none; display:grid; place-items:center;
  border-radius:var(--r-sm); background:var(--gold); color:#fff;
  transition:background .3s,transform .3s;
}
.nl-btn svg{ width:19px; height:19px; }
.nl-btn:hover{ background:var(--gold-600); transform:translateY(-2px); }
.nl-note{ margin-top:11px; font-size:.78rem; color:rgba(255,255,255,.4); }

.ft-badges{ display:flex; gap:14px; flex-wrap:wrap; margin-top:22px; }
.ft-badge{
  display:flex; align-items:center; gap:10px; padding:11px 15px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-sm);
}
.ft-badge svg{ width:20px; height:20px; color:var(--gold); flex:none; }
.ft-badge b{ display:block; font-family:var(--f-head); font-size:.84rem; color:#fff; font-weight:600; }
.ft-badge span{ display:block; font-size:.73rem; color:rgba(255,255,255,.45); }

.ft-bottom{
  border-top:1px solid rgba(255,255,255,.09);
  padding:24px 0; position:relative; z-index:1;
}
.ft-bottom-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; font-size:.87rem; color:rgba(255,255,255,.45);
}
.ft-bottom a:hover{ color:var(--gold); }
.ft-legal{ display:flex; gap:20px; flex-wrap:wrap; }
.ft-credits{ display:flex; align-items:center; gap:9px; }

/* Back to top */
.to-top{
  position:fixed; right:24px; bottom:104px; z-index:900;
  width:48px; height:48px; display:grid; place-items:center; border-radius:50%;
  background:var(--ink); color:#fff; box-shadow:var(--sh-md);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .35s,visibility .35s,transform .35s,background .3s;
}
.to-top.on{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ background:var(--gold); }
.to-top svg{ width:19px; height:19px; }

/* --------------------------------------------------------------------------
   06. FLOATING UI
   -------------------------------------------------------------------------- */
.float-dock{
  position:fixed; right:20px; bottom:26px; z-index:950;
  display:flex; flex-direction:column-reverse; align-items:flex-end; gap:12px;
}
.fbtn{
  position:relative; width:56px; height:56px; display:grid; place-items:center;
  border-radius:50%; color:#fff; box-shadow:0 12px 30px rgba(0,0,0,.22);
  transition:transform .35s var(--ease),box-shadow .35s,width .35s,height .35s,border-radius .35s;
}
.fbtn svg{ width:26px; height:26px; }
.fbtn:hover{ transform:translateY(-4px) scale(1.05); }
.fbtn-wa{ background:#25D366; }
.fbtn-wa::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366; animation:ring 2.1s var(--ease) infinite;
}
.fbtn-enq{ background:linear-gradient(135deg,var(--gold-600),var(--gold)); }
.fbtn-mail{ background:var(--ink-700); }
.fbtn.collapsed{
  width:52px; height:52px; opacity:0; visibility:hidden;
  transform:translateY(16px) scale(.85); pointer-events:none;
}
.fbtn-tip{
  position:absolute; right:calc(100% + 13px); top:50%; transform:translateY(-50%) translateX(8px);
  padding:8px 14px; border-radius:99px; white-space:nowrap; pointer-events:none;
  background:var(--ink); color:#fff; font-family:var(--f-head);
  font-size:.78rem; font-weight:600; letter-spacing:.04em;
  opacity:0; visibility:hidden; transition:opacity .3s,transform .3s var(--ease),visibility .3s;
}
.fbtn:hover .fbtn-tip{ opacity:1; visibility:visible; transform:translateY(-50%) translateX(0); }
.fbtn-main{ width:62px; height:62px; background:var(--gold); }
.fbtn-main svg{ transition:transform .4s var(--ease); }
.fbtn-main.on svg{ transform:rotate(135deg); }

/* Quick enquiry modal */
.modal{
  position:fixed; inset:0; z-index:1300; display:grid; place-items:center;
  padding:22px; opacity:0; visibility:hidden;
  transition:opacity .4s,visibility .4s;
}
.modal.on{ opacity:1; visibility:visible; }
.modal-scrim{ position:absolute; inset:0; background:rgba(8,13,24,.78); backdrop-filter:blur(7px); }
.modal-box{
  position:relative; z-index:2; width:100%; max-width:940px;
  max-height:92vh; overflow-y:auto; background:var(--paper);
  border-radius:var(--r-xl); box-shadow:var(--sh-xl);
  transform:translateY(30px) scale(.97);
  transition:transform .45s var(--ease-out);
}
.modal.on .modal-box{ transform:translateY(0) scale(1); }
.modal-close{
  position:absolute; top:20px; right:20px; z-index:5;
  width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff;
  transition:background .3s,transform .3s;
}
.modal-close:hover{ background:#E23D3D; transform:rotate(90deg); }
.modal-close svg{ width:19px; height:19px; }
.modal-grid{ display:grid; grid-template-columns:.85fr 1.15fr; }
.modal-aside{
  position:relative; overflow:hidden; padding:44px 38px;
  background:linear-gradient(160deg,var(--ink) 0%,var(--ink-700) 100%);
  color:rgba(255,255,255,.7);
}
.modal-aside::after{
  content:""; position:absolute; right:-60px; bottom:-60px; width:230px; height:230px;
  border-radius:50%; background:radial-gradient(circle,rgba(226,157,34,.34),transparent 68%);
}
.modal-aside h3{
  font-family:var(--f-display); font-weight:400; color:#fff;
  font-size:1.85rem; line-height:1.16; margin-bottom:16px;
}
.modal-aside h3 em{ font-style:normal; color:var(--gold); }
.modal-aside > p{ font-size:.93rem; line-height:1.75; margin-bottom:28px; }
.modal-aside ul{ display:grid; gap:15px; position:relative; z-index:1; }
.modal-aside li{ display:flex; gap:12px; align-items:flex-start; font-size:.9rem; line-height:1.6; }
.modal-aside li svg{ width:18px; height:18px; color:var(--gold); flex:none; margin-top:3px; }
.modal-aside li b{ color:#fff; display:block; font-family:var(--f-head); font-size:.9rem; }
.modal-form{ padding:44px 42px; }
.modal-form h4{ font-family:var(--f-head); font-size:1.3rem; margin-bottom:6px; }
.modal-form > p{ font-size:.89rem; color:var(--slate); margin-bottom:24px; }

/* Search overlay */
.search-ov{
  position:fixed; inset:0; z-index:1350; padding:22px;
  background:rgba(8,13,24,.94); backdrop-filter:blur(9px);
  opacity:0; visibility:hidden; transition:opacity .4s,visibility .4s;
}
.search-ov.on{ opacity:1; visibility:visible; }
.search-box{ max-width:820px; margin:12vh auto 0; }
.search-box h3{
  font-family:var(--f-display); font-weight:400; color:#fff;
  font-size:clamp(1.7rem,3.4vw,2.5rem); margin-bottom:26px;
}
.search-field{ position:relative; display:flex; align-items:center; gap:14px; border-bottom:2px solid rgba(255,255,255,.24); }
.search-field > svg{ width:24px; height:24px; color:var(--gold); flex:none; }
.search-field input{
  flex:1; background:none; border:0; outline:0; padding:14px 0;
  font-family:var(--f-head); font-size:clamp(1.1rem,2.6vw,1.7rem); color:#fff;
}
.search-field input::placeholder{ color:rgba(255,255,255,.34); }
.search-close{
  position:absolute; top:22px; right:22px; width:46px; height:46px;
  display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff; transition:background .3s,transform .3s;
}
.search-close:hover{ background:#E23D3D; transform:rotate(90deg); }
.search-close svg{ width:20px; height:20px; }
.search-hint{ margin-top:20px; font-size:.85rem; color:rgba(255,255,255,.44); }
.search-hint b{ color:var(--gold); }
.search-tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.search-tags button{
  padding:8px 16px; border-radius:99px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.8);
  font-family:var(--f-head); font-size:.8rem; font-weight:500;
  transition:background .3s,color .3s,border-color .3s;
}
.search-tags button:hover{ background:var(--gold); color:#fff; border-color:var(--gold); }
.search-results{ margin-top:30px; display:grid; gap:11px; max-height:44vh; overflow-y:auto; }
.sres{
  display:flex; align-items:center; gap:15px; padding:15px 18px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r); transition:background .3s,border-color .3s,transform .3s;
}
.sres:hover{ background:rgba(226,157,34,.16); border-color:var(--gold); transform:translateX(5px); }
.sres .ic{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  border-radius:10px; background:rgba(226,157,34,.18); color:var(--gold);
}
.sres .ic svg{ width:19px; height:19px; }
.sres b{ display:block; font-family:var(--f-head); color:#fff; font-size:1rem; font-weight:600; }
.sres span{ display:block; font-size:.83rem; color:rgba(255,255,255,.5); }
.sres mark{ background:rgba(226,157,34,.35); color:#fff; border-radius:3px; padding:0 2px; }
.sres-none{ padding:22px; text-align:center; color:rgba(255,255,255,.5); font-size:.94rem; }

/* Cookie notice */
.cookie{
  position:fixed; left:20px; bottom:20px; z-index:960; max-width:430px;
  padding:22px 24px; border-radius:var(--r-lg);
  background:rgba(10,17,32,.97); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1); box-shadow:var(--sh-xl);
  transform:translateY(140%); transition:transform .55s var(--ease-out);
}
.cookie.on{ transform:translateY(0); }
.cookie h5{ color:#fff; font-family:var(--f-head); font-size:1.02rem; margin-bottom:9px; }
.cookie p{ font-size:.87rem; line-height:1.7; color:rgba(255,255,255,.62); margin-bottom:17px; }
.cookie p a{ color:var(--gold); text-decoration:underline; }
.cookie-btns{ display:flex; gap:10px; flex-wrap:wrap; }

/* WhatsApp chat bubble */
.wa-widget{
  position:fixed; right:20px; bottom:100px; z-index:955; width:330px; max-width:calc(100vw - 40px);
  border-radius:var(--r-lg); overflow:hidden; background:var(--paper);
  box-shadow:var(--sh-xl);
  transform:translateY(24px) scale(.94); opacity:0; visibility:hidden;
  transform-origin:bottom right;
  transition:transform .4s var(--ease-out),opacity .35s,visibility .35s;
}
.wa-widget.on{ transform:translateY(0) scale(1); opacity:1; visibility:visible; }
.wa-head{ background:#075E54; color:#fff; padding:16px 18px; display:flex; align-items:center; gap:12px; }
.wa-head .av{
  width:44px; height:44px; flex:none; border-radius:50%;
  background:rgba(255,255,255,.16); display:grid; place-items:center;
  font-family:var(--f-head); font-weight:700; font-size:.95rem;
}
.wa-head b{ display:block; font-family:var(--f-head); font-size:.98rem; font-weight:600; }
.wa-head span{ display:flex; align-items:center; gap:6px; font-size:.78rem; color:rgba(255,255,255,.72); }
.wa-head span .d{ width:7px; height:7px; border-radius:50%; background:#4ADE80; }
.wa-body{ padding:16px 18px; background:#ECE5DD; }
.wa-bubble{
  position:relative; background:#fff; padding:13px 15px 13px 17px;
  border-radius:10px 10px 10px 3px; font-size:.88rem; line-height:1.6;
  color:#222B33; box-shadow:0 1px 3px rgba(0,0,0,.14);
}
.wa-bubble::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(var(--gold-600),var(--gold)); border-radius:10px 0 0 10px;
}
.wa-body p{ margin-top:11px; font-size:.76rem; color:#667781; text-align:center; }
.wa-foot{ padding:14px 18px; display:grid; gap:10px; }

/* --------------------------------------------------------------------------
   07. ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes pldash{
  0%{ stroke-dashoffset:226; }
  55%{ stroke-dashoffset:44; }
  100%{ stroke-dashoffset:44; }
}
@keyframes kb{ from{ transform:scale(1.08); } to{ transform:scale(1.2); } }
@keyframes riseIn{ to{ opacity:1; transform:translateY(0); } }
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 var(--gold-glow); }
  50%{ box-shadow:0 0 0 9px rgba(226,157,34,0); }
}
@keyframes dotFill{ from{ width:0; } to{ width:100%; } }
@keyframes scrollLn{ 0%{ top:-16px; } 100%{ top:46px; } }
@keyframes ring{
  0%{ transform:scale(1); opacity:.7; }
  70%{ transform:scale(1.55); opacity:0; }
  100%{ transform:scale(1.55); opacity:0; }
}
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-13px); } }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes spinSlow{ to{ transform:rotate(360deg); } }

/* Scroll reveal */
[data-rv]{
  opacity:0; transform:translateY(34px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
[data-rv="left"]{ transform:translateX(-42px); }
[data-rv="right"]{ transform:translateX(42px); }
[data-rv="zoom"]{ transform:scale(.93); }
[data-rv="flip"]{ transform:translateY(38px) scale(.96); }
[data-rv].in{ opacity:1; transform:none; }
.no-rv [data-rv]{ opacity:1!important; transform:none!important; }

/* --------------------------------------------------------------------------
   08. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:1180px){
  .ft-grid{ grid-template-columns:1.4fr 1fr 1.2fr; }
  .ft-col:nth-child(2){ display:none; }
}
@media (max-width:1024px){
  :root{ --hdr:74px; }
  .nav{ display:none; }
  .burger{ display:grid; }
  .hdr-enquiry{ display:none!important; }
  .mega-grid{ grid-template-columns:1fr 1fr; }
  .modal-grid{ grid-template-columns:1fr; }
  .modal-aside{ display:none; }
  .modal-form{ padding:38px 30px; }
  .tb-l-hide{ display:none; }
  .ft-grid{ grid-template-columns:1fr 1fr; gap:36px; }
  .ft-col:nth-child(2){ display:block; }
}
@media (max-width:820px){
  body{ font-size:16px; }
  .topbar-l{ display:none; }
  .topbar-in{ justify-content:flex-end; }
  .grid-3{ grid-template-columns:1fr; }
  .hero-ui-in{ flex-direction:column-reverse; align-items:flex-start; gap:20px; }
  .hslide-in{ padding-bottom:150px; }
  .hero-scroll{ display:none; }
  .float-dock{ right:14px; bottom:16px; }
  .fbtn{ width:52px; height:52px; }
  .fbtn svg{ width:23px; height:23px; }
  .fbtn-main{ width:58px; height:58px; }
  .to-top{ right:16px; bottom:86px; width:44px; height:44px; }
  .cookie{ left:14px; right:14px; max-width:none; bottom:14px; }
  .wa-widget{ right:14px; bottom:88px; }
  .ft-grid{ grid-template-columns:1fr; }
  .ft-bottom-in{ flex-direction:column; text-align:center; }
  .ft-legal{ justify-content:center; }
}
@media (max-width:640px){
  .wrap,.wrap-narrow{ padding-inline:18px; }
  .grid-2{ grid-template-columns:1fr; }
  .sec-head{ margin-bottom:40px; }
  .sec-head.left{ text-align:center; }
  .sec-head.left .eyebrow{ justify-content:center; }
  .mega-grid{ grid-template-columns:1fr; }
  .hslide h1{ font-size:clamp(1.95rem,8vw,2.5rem); }
  .hero-ui{ padding-bottom:24px; }
  .harrow{ width:44px; height:44px; }
  .modal-form{ padding:32px 20px; }
  .modal-close{ top:12px; right:12px; }
  .hslide-in{ max-width:100%; }
  .fbtn-tip{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  [data-rv]{ opacity:1!important; transform:none!important; }
}

/* --------------------------------------------------------------------------
   09. RTL
   -------------------------------------------------------------------------- */
[dir="rtl"] .drawer{ right:auto; left:0; transform:translateX(-100%); }
[dir="rtl"] .drawer.on{ transform:translateX(0); }
[dir="rtl"] .box-shadow,.box-shadow{ box-shadow:none; }
[dir="rtl"] .ft-links a::before{ display:none; }
[dir="rtl"] .float-dock{ right:auto; left:20px; align-items:flex-start; }
[dir="rtl"] .fbtn-tip{ right:auto; left:calc(100% + 13px); transform:translateY(-50%) translateX(-8px); }
[dir="rtl"] .fbtn:hover .fbtn-tip{ transform:translateY(-50%) translateX(0); }
[dir="rtl"] .to-top{ right:auto; left:24px; }
[dir="rtl"] .cookie{ right:20px; left:20px; }
[dir="rtl"] .wa-widget{ right:auto; left:20px; transform-origin:bottom left; }
[dir="rtl"] .search-ov{ text-align:right; }
[dir="rtl"] .acc-body-in{ padding:0 14px 14px 0; }
[dir="rtl"] .acc-body-in a:hover{ transform:translateX(-4px); }
[dir="rtl"] .sub a:hover{ transform:translateX(-4px); }
[dir="rtl"] .ft-links a:hover{ transform:translateX(-3px); }
[dir="rtl"] .sres:hover{ transform:translateX(-5px); }
[dir="rtl"] .modal-grid{ direction:rtl; }
[dir="rtl"] .sel{ background-position:left 15px center; padding-left:44px; padding-right:17px; }
[dir="rtl"] .btn:hover svg,.link-arrow:hover svg{ transform:translateX(-4px); }
[dir="rtl"] .modal-aside{ padding:40px 34px; }
[dir="rtl"] .search-suggest{ text-align:right; }
[dir="rtl"] .crumbs{ justify-content:center; }