/* Created: 10:31 11-Aug-2026 */
/* Updated: 06:41 03-Sep-2026 — nav burger up to 1055px: the desktop nav needs 1056 */
/* Updated: 14:52 14-Aug-2026 — dropdown single column, anchored left to the Services link */
/* Updated: 14:15 14-Aug-2026 — BL-010 cyan hero overlay; BL-016 stat boxes; BL-019 circle colours; BL-020 mobile ribbon */
/* Updated: 14:10 14-Aug-2026 — #nav-hero white base; removed marquee + stat-chip hairlines */
/* Updated: 11:20 11-Aug-2026 — inspector: nav-logo contain (flex squash), stronger hero top scrim (nav white-on-white), mobile hero tint, mobile-menu column layout + scoped link rule */
/* Updated: 07:21 25-Aug-2026 — marquee logos 2.5x (28->70px, 22->55px); .marquee padding unchanged */
/* Updated: 07:50 25-Aug-2026 — marquee logos to 75% of the 2.5x size (70->52.5px, 55->41.25px) */
/* Updated: 12:31 04-Sep-2026 — Sumit 04-Sep: header Book button reads Book Now on phones and the row breathes; it used to run off the right edge at 390 */
/* Updated: 11:43 21-Sep-2026 — hero slides: four stacked messages cross-fade in one grid cell; dots */
/* Updated: 15:09 22-Sep-2026 — hero dots: margin-top -8px -> 16px; a two-line subline ran under the dots (Sumit) */
/* Updated: 16:22 22-Sep-2026 — marquee slides one copy in px (var set by main.js), no blank on wide screens */
/* Updated: 22:17 22-Sep-2026 — mobile menu rebuilt: scrollable panel, service sub-list, actions pinned (Sumit 22:16) */
/* Updated: 22:25 22-Sep-2026 — language switch: visible two-way control in the menu; hidden from the header where the burger is (Sumit 22:22) */
/* Updated: 00:03 23-Sep-2026 — one header, one footer, one radius scale on EVERY page (Sumit 23-Sep) */
/* Updated: 16:05 05-Oct-2026 — C-14 certification band (.cert-band/.cert-logos) + C-17 floating Instagram/Facebook (.social-float), appended at the end */
/* Updated: 16:31 05-Oct-2026 — C-14 fix: band heading bar centred with physical left:50% (was 56px off-centre on every AR page) */
/* Updated: 17:59 05-Oct-2026 — C-17 lead fix: floating pair is a 30px edge tab inside the 32px gutter (covered the DoC hero button at 1440) */
/* BT2 sections A — header/nav, video hero, trust bar */

/* ---------- 1. Header ---------- */
.nav{position:absolute;top:0;left:0;right:0;z-index:999;padding:16px var(--pad-page)}
.nav-inner{max-width:var(--container-large);margin:0 auto;position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  border-radius:8px;padding:12px 16px}
.nav-base{position:absolute;inset:0;border-radius:8px;background:transparent;z-index:-1;
  transition:background-color .3s ease,box-shadow .3s ease}
.nav.is-inverted .nav-base{background:#16262e3d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nav-logo img{height:40px;width:auto;object-fit:contain;object-position:left center}
.nav.is-inverted .nav-logo img{filter:brightness(0) invert(1)}
.nav-links{display:flex;align-items:center;gap:32px;font-size:14px;line-height:16px}
.nav-links a{transition:opacity .3s ease}
.nav-links a:hover{opacity:.6}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-left{display:flex;align-items:center;gap:12px}
.nav-phone{font-size:14px;line-height:16px;display:inline-flex;align-items:center;gap:6px}
/* Sticky clone — fixed, drops in via .is-on */
.nav-sticky{position:fixed;transform:translateY(-110%);opacity:0;
  transition:transform .4s ease,opacity .4s ease}
.nav-sticky .nav-base,#nav-hero .nav-base{background:var(--paper-100);box-shadow:0 0 20px #534fa026}
.nav-sticky.is-on{transform:translateY(0);opacity:1}
/* Hamburger — left of logo, frosted secondary */
.nav-burger{display:none;width:40px;height:40px;border-radius:8px;background:var(--glass);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-burger span{display:block;width:16px;height:1.5px;background:currentColor;
  transition:transform .3s ease,opacity .3s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* Mobile menu panel */
/* 22-Sep (Sumit: "this is so absurd") — the panel centred its items, sized every link at 28px
   and never styled .mob-sub, so the ten service links ran together inline and overlapped the
   header. Rebuilt: a scrollable brand panel, one row per link, the services indented under a
   teal rule, and the two actions pinned to the bottom where a thumb reaches them. */
.mobile-menu{position:fixed;inset:0;z-index:998;display:none;flex-direction:column;
  padding:0;color:var(--paper-100);overscroll-behavior:contain;
  background:linear-gradient(165deg,#0f2a31 0%,#16262e 55%,#132b33 100%);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mobile-menu.is-open{display:flex}
.mobile-menu nav{display:flex;flex-direction:column;flex:1 1 auto;overflow-y:auto;
  padding:84px var(--pad-page) 16px;-webkit-overflow-scrolling:touch}
.mobile-menu nav>a{font-size:19px;line-height:26px;font-weight:600;padding:15px 0;
  border-bottom:1px solid #ffffff1f;display:flex;align-items:center;justify-content:space-between;gap:12px}
.mobile-menu nav>a::after{content:"";width:7px;height:7px;border-radius:50%;
  background:#24bbbb;opacity:0;transition:opacity .25s ease}
.mobile-menu nav>a:active::after,.mobile-menu nav>a:focus-visible::after{opacity:1}
/* the service list: its own column, indented behind a brand rule */
.mobile-menu .mob-sub{display:flex;flex-direction:column;gap:2px;
  margin:10px 0 14px;padding-inline-start:16px;border-inline-start:2px solid #24bbbb59}
.mobile-menu .mob-sub a{font-size:15px;line-height:21px;color:#ffffffc7;padding:9px 0;
  border-bottom:0;font-weight:400}
.mobile-menu .mob-sub a:active{color:#fff}
/* the actions stay in reach, on their own bar */
/* Language: a real two-way switch, and it lives in the menu on phones.
   Sumit 22:22 — only "EN" showed because the inactive option inherited dark ink on this dark
   panel (measured: rgba(22,38,46,.64) on #16262e). Full width, both sides legible, the active
   one filled. The header switch is hidden wherever the burger is, which also de-clutters it. */
.mobile-menu .lang-switch{order:2;margin:0 var(--pad-page) 12px;display:flex;width:auto;
  border:1px solid #ffffff2e;border-radius:999px;padding:4px;background:#ffffff0f}
.mobile-menu .lang-opt{flex:1;height:40px;min-width:0;font-size:15px;font-weight:600;
  color:#ffffffb8;border-radius:999px}
.mobile-menu .lang-opt[lang="ar"]{font-size:17px}
.mobile-menu .lang-opt.is-on{background:linear-gradient(135deg,#24bbbb,#1a9a9a);color:#fff}
.mobile-menu .lang-opt.is-off{opacity:.42}
@media (max-width:1055px){
  .nav .lang-switch{display:none}   /* it is in the menu instead */
}
.mobile-menu>.btn{order:3;margin:0 var(--pad-page);align-self:stretch;justify-content:center}
.mobile-menu>.btn:last-child{order:4;margin-bottom:calc(20px + env(safe-area-inset-bottom))}
.mobile-menu>.btn .btn-inner{justify-content:center;width:100%}
.mobile-menu::after{content:"";order:1;height:1px;margin:0 var(--pad-page) 16px;
  background:linear-gradient(90deg,transparent,#24bbbb66,transparent)}
/* Sumit 03-Sep. The desktop nav needs 1056px to fit: measured every 8px, /,/about/ and
   every other ENGLISH page overflowed horizontally from 992 to 1048 and was clean from
   1056. The burger turned on only below 992, so 992-1055 showed a desktop nav that did
   not fit and pushed the "Book A Consultation Now" button past the viewport.
   No ARABIC page overflowed at any width - its nav labels are shorter - so this band
   was English-only, which is why it read as a blog bug rather than a header one.
   1055 rather than 991 here ONLY; 991 stays the site-wide breakpoint everywhere else.
   qa_sweep runs at 1440 and 390, so it never sampled this band - 1024 is now in its
   width list. */
@media (max-width:1055px){
  .nav-links,.nav-phone{display:none}
  .nav-burger{display:flex}
}
/* Sumit 04-Sep: at 390 the header row held burger + logo + EN/ع + "Book A
   Consultation Now" and the button ran past the right edge (screenshot). The
   button keeps both labels in its roll mask; phones show the short one. The
   long label stays the default so desktop copy is unchanged. */
.l-short{display:none}
@media (max-width:767px){
  .nav-inner{gap:12px;padding:10px 12px}
  .nav-right{gap:10px}
  .nav-right .l-long{display:none}
  .nav-right .l-short{display:inline}
  .nav-logo img{height:34px}
}

/* ---------- 2. Video hero ---------- */
.hero{position:relative;height:100dvh;max-height:1000px;min-height:560px;
  overflow:clip;display:flex;align-items:flex-end;color:var(--paper-100)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video{width:100%;height:100%;object-fit:cover}
.overlay-hero{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,#534fa047 0%,#24bbbb2e 42%,#24bbbb85 100%),
    linear-gradient(180deg,#16262e70 0%,#16262e14 32%,#16262e85 100%)}
/* Progressive blur stack — bottom third, 9 stacked masked panels */
.pblur{position:absolute;left:0;right:0;bottom:0;height:45%;z-index:2;pointer-events:none}
.pblur i{position:absolute;inset:0}
.pblur i:nth-child(1){backdrop-filter:blur(.3px);-webkit-backdrop-filter:blur(.3px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 25%,#000 45%,transparent 65%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 25%,#000 45%,transparent 65%)}
.pblur i:nth-child(2){backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px);
  -webkit-mask-image:linear-gradient(180deg,transparent 10%,#000 32%,#000 52%,transparent 72%);
  mask-image:linear-gradient(180deg,transparent 10%,#000 32%,#000 52%,transparent 72%)}
.pblur i:nth-child(3){backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);
  -webkit-mask-image:linear-gradient(180deg,transparent 18%,#000 38%,#000 58%,transparent 78%);
  mask-image:linear-gradient(180deg,transparent 18%,#000 38%,#000 58%,transparent 78%)}
.pblur i:nth-child(4){backdrop-filter:blur(1.9px);-webkit-backdrop-filter:blur(1.9px);
  -webkit-mask-image:linear-gradient(180deg,transparent 26%,#000 45%,#000 64%,transparent 84%);
  mask-image:linear-gradient(180deg,transparent 26%,#000 45%,#000 64%,transparent 84%)}
.pblur i:nth-child(5){backdrop-filter:blur(3.7px);-webkit-backdrop-filter:blur(3.7px);
  -webkit-mask-image:linear-gradient(180deg,transparent 34%,#000 52%,#000 70%,transparent 90%);
  mask-image:linear-gradient(180deg,transparent 34%,#000 52%,#000 70%,transparent 90%)}
.pblur i:nth-child(6){backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  -webkit-mask-image:linear-gradient(180deg,transparent 42%,#000 60%,#000 76%,transparent 96%);
  mask-image:linear-gradient(180deg,transparent 42%,#000 60%,#000 76%,transparent 96%)}
.pblur i:nth-child(7){backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);
  -webkit-mask-image:linear-gradient(180deg,transparent 50%,#000 68%,#000 84%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 50%,#000 68%,#000 84%,transparent 100%)}
.pblur i:nth-child(8){backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);
  -webkit-mask-image:linear-gradient(180deg,transparent 62%,#000 80%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 62%,#000 80%,#000 100%)}
.pblur i:nth-child(9){backdrop-filter:blur(48px);-webkit-backdrop-filter:blur(48px);
  -webkit-mask-image:linear-gradient(180deg,transparent 76%,#000 94%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 76%,#000 94%,#000 100%)}
.hero-content{position:relative;z-index:3;width:100%;max-width:var(--content);
  margin:0 auto;padding:0 var(--pad-page) 80px}
.hero-content .h0{max-width:900px;margin:16px 0 24px}
.hero-content .b1{color:var(--paper-88)}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:40px}
.hero-toggle{position:absolute;right:var(--pad-page);bottom:32px;z-index:4;width:40px;height:40px;
  border-radius:100vw;background:var(--paper-16);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);color:#fff;display:flex;align-items:center;
  justify-content:center;transition:background-color .3s ease}
.hero-toggle:hover{background:var(--paper-32)}
.hero-toggle .ic-play{display:none}
.hero-toggle.is-paused .ic-play{display:block}
.hero-toggle.is-paused .ic-pause{display:none}
@media (max-width:767px){
  .hero-content{padding-bottom:64px}
  .hero-ctas{margin-top:24px}
  .overlay-hero{background:linear-gradient(115deg,#534fa047 0%,#24bbbb2e 42%,#24bbbb85 100%),
    linear-gradient(180deg,#16262e70 0%,#16262e47 35%,#16262e99 72%,#16262ea3 100%)}
}

/* ---------- 3. Trust bar / stats ---------- */
.trust{background:var(--bg-two);padding:var(--sec-xs) 0 var(--sec-s)}
.marquee{overflow:clip;padding:24px 0}
.marquee-track{display:flex;width:max-content;animation:marquee 25s linear infinite}
.marquee-group{display:flex;align-items:center;gap:64px;padding-right:64px}
.marquee-group img{height:52.5px;width:auto;opacity:.64;filter:grayscale(1);
  transition:opacity .3s ease,filter .3s ease,transform .3s ease}
@media (hover:hover){
  .marquee:hover .marquee-track{animation-play-state:paused}
  .marquee-group img:hover{opacity:1;filter:grayscale(0);transform:translateY(-2px)}
}
/* --marquee-shift = one copy of the logos in px, set by main.js; -33.3333% is the no-JS fallback. */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(var(--marquee-shift,-33.3333%))}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:48px}
/* BL-016 — containment. BL-019 — each box takes one circle colour. */
.stat{position:relative;background:var(--paper-100);border:1px solid var(--border-faint);
  border-radius:14px;padding:24px 20px 20px;overflow:hidden;
  transition:transform .45s var(--ease-circ),box-shadow .45s var(--ease-circ)}
.stat::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--c1)}
.stat:nth-child(2)::before{background:var(--c2)}
.stat:nth-child(3)::before{background:var(--c3)}
.stat:nth-child(4)::before{background:var(--c4)}
@media (hover:hover){.stat:hover{transform:translateY(-4px);box-shadow:0 14px 32px var(--ink-8)}}
.stat .h3{font-variant-numeric:tabular-nums}
.stat .label-2{color:var(--text-medium);margin-top:8px;display:block}
.stat-chip{grid-column:1/-1;display:inline-flex;gap:8px;align-items:center;
  color:var(--text-medium);padding-top:24px}
@media (max-width:767px){
  .stats{grid-template-columns:repeat(2,1fr);gap:24px;padding-top:32px}
  .marquee-group{gap:40px;padding-right:40px}
  .marquee-group img{height:41.25px}
}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---------- BL-020 · Sticky ribbon CTA (mobile only) ---------- */
/* The client praised this pattern on the 11-Aug call. Desktop keeps the header
   CTA, so the ribbon is hidden above 767px to avoid two competing primaries. */
.ribbon-cta{position:fixed;left:0;right:0;bottom:0;z-index:998;display:none;
  gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--paper-88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--border-faint);
  transform:translateY(110%);transition:transform .4s var(--ease-circ)}
.ribbon-cta.is-on{transform:translateY(0)}
.ribbon-cta .btn{flex:1;min-height:46px}
@media (max-width:767px){.ribbon-cta{display:flex}}
@media (prefers-reduced-motion:reduce){.ribbon-cta{transition:none}}

/* ---------- Services dropdown ---------- */
.has-drop{position:relative}
.has-drop>a{display:inline-flex;align-items:center;gap:6px}
.drop-caret{width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);
  transition:transform .3s ease}
.has-drop:hover .drop-caret,.has-drop:focus-within .drop-caret{transform:rotate(225deg) translateY(-3px)}
.drop-panel{position:absolute;top:100%;left:0;transform:translateY(8px);
  margin-top:14px;min-width:268px;padding:14px 0;border-radius:14px;
  background:var(--paper-100);box-shadow:0 24px 60px #16262e29;
  border:1px solid var(--border-faint);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease,visibility .25s}
.has-drop:hover .drop-panel,.has-drop:focus-within .drop-panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
/* hover bridge so the pointer can cross the gap without closing the panel */
.drop-panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.drop-col{display:flex;flex-direction:column}
.drop-panel a{display:block;padding:9px 22px;font-size:15px;line-height:22px;
  color:var(--text-strong);white-space:nowrap;transition:background-color .2s ease,color .2s ease}
@media (hover:hover){.drop-panel a:hover{color:var(--teal);background:var(--ink-4)}}
.drop-all{color:var(--teal)!important;font-weight:500;
  margin-top:8px;padding-top:14px!important;border-top:1px solid var(--border-faint)}
@media (max-width:991px){.drop-panel{display:none}}

/* Updated: 15:39 26-Aug-2026 — EN/AR language switch (header nav-right, mobile menu, footer legal bar) */
/* Sumit, 26-Aug: a switch in the header AND the footer. English is the default and keeps
   the bare path; Arabic lives under /ar/. The Arabic option renders .is-off where that
   page has no Arabic yet — visible but inert, so the reader can see the site HAS Arabic
   without being sent to a 404. Which pages qualify is decided by js/langmap.js, which is
   generated from the built output. */
.lang-switch{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto;
  border:1px solid var(--border-faint);border-radius:999px;padding:2px;background:transparent}
.lang-opt{display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:24px;padding:0 8px;border-radius:999px;
  font-size:12px;font-weight:600;line-height:1;letter-spacing:.02em;
  color:var(--text-medium);text-decoration:none;white-space:nowrap;
  transition:background .18s ease,color .18s ease}
.lang-opt:hover{color:var(--text-strong)}
.lang-opt.is-on{background:var(--teal,#1aa5a0);color:#fff}
.lang-opt.is-off{opacity:.38;cursor:default;pointer-events:none}
/* Arabic glyph is shorter than Latin caps — nudge it back onto the same optical baseline */
.lang-opt[lang="ar"]{font-size:14px;padding-bottom:2px}

/* mobile menu: full-width row above the buttons, not a tiny pill in a corner */
.menu-panel .lang-switch{display:flex;justify-content:center;margin:8px 0 16px;
  align-self:stretch;border-color:rgba(255,255,255,.22)}
.menu-panel .lang-opt{height:34px;min-width:56px;font-size:13px;color:rgba(255,255,255,.72)}
.menu-panel .lang-opt:hover{color:#fff}

/* footer legal bar: sits with the copyright line */
.footer-legal .lang-switch{border-color:rgba(255,255,255,.18)}
.footer-legal .lang-opt{color:rgba(255,255,255,.62)}
.footer-legal .lang-opt:hover{color:#fff}

/* Hero slides (xlsx row 2, 21-Sep). All four sit in ONE grid cell so the hero keeps the
   height of the tallest message and nothing jumps as they cross-fade. */
.hero-slides{display:grid}
.hero-slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s linear .7s}
.hero-slide.is-active{opacity:1;visibility:visible;transition:opacity .7s ease}
.hero-dots{display:flex;gap:8px;margin:16px 0 24px}
.hero-dot{width:28px;height:4px;border-radius:2px;border:0;padding:0;cursor:pointer;
  background:var(--paper-32);transition:background .3s ease,width .3s ease}
.hero-dot.is-active{width:44px;background:var(--paper-100)}
.hero-dot:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.hero-media.is-image{background-size:cover;background-position:center}
.hero-media.is-image video{opacity:0}
@media (prefers-reduced-motion:reduce){.hero-slide,.hero-slide.is-active{transition:none}}

/* ---------------------------------------------------------------- header: a floating pill
   Sumit 21:33 ("maybe the header ... better animation or colour or movement"). The sticky bar
   is no longer a white slab across the screen: it is a frosted, teal-rimmed pill that floats,
   carries a reading-progress line, and gives each link a teal underline that grows on hover. */
.nav-sticky .nav-inner{max-width:min(1360px,calc(100vw - 40px));border-radius:var(--d-r-panel);
  padding:12px 14px 12px 26px}   /* Sumit 22:08: give the bar room to breathe */
.nav-sticky .nav-right,.nav-sticky .nav-right .btn{flex:none}  /* the Book button never squeezes */
.nav-sticky .nav-links{gap:30px}
.nav-sticky .nav-left{gap:16px}
/* Phones: the bar was congested and the burger sat in a pocket of dead space on its left
   (the pill's 26px lead-in). Even padding, a brand-tinted burger, and one gap everywhere. */
@media (max-width:767px){
  .nav-sticky .nav-inner,#nav-hero .nav-inner{padding:10px 14px;gap:10px}
  .nav-inner .nav-left{gap:10px}
  .nav-right{gap:8px}
}
.nav-burger{width:42px;height:42px;border-radius:var(--d-r-chip);
  background:rgb(36 187 187 / .14);border:1px solid rgb(36 187 187 / .22);color:var(--d-teal-deep);
  transition:background-color .3s var(--ease-circ),transform .25s var(--ease-circ)}
.nav.is-inverted .nav-burger{background:rgb(255 255 255 / .18);border-color:rgb(255 255 255 / .28);color:#fff}
@media (hover:hover){.nav-burger:hover{background:rgb(36 187 187 / .24);transform:scale(1.05)}}
.nav-burger span{width:18px}

/* ---------------------------------------------------------------- the locations chip
   Sumit 22:08: on a phone "4 Locations - Abu Dhabi ..." wrapped so the emirates read like
   one more column. Label on its own line, the four under it, same words. */
.stat-chip{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;padding-top:28px}
.chip-label{font-weight:700;color:var(--d-teal-deep);letter-spacing:.04em}
.chip-label::after{content:"";display:inline-block;width:18px;height:1px;margin-inline-start:10px;
  vertical-align:middle;background:rgb(36 187 187 / .6)}
.chip-list{color:var(--text-medium)}
@media (max-width:767px){.stat-chip{display:grid;gap:6px}
  .chip-label::after{display:none}}
.nav-sticky .nav-base{border-radius:var(--d-r-panel);background:rgb(255 255 255 / .72);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid rgb(36 187 187 / .22);box-shadow:0 20px 44px -30px rgb(9 30 38 / .6)}
.nav-links a{position:relative;padding-block:6px}
.nav-links a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;border-radius:2px;
  background:var(--d-grad);scale:0 1;transform-origin:center;transition:scale .3s var(--ease-circ)}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after,.nav-links a:focus-visible::after{scale:1 1}
/* how far down the page you are, drawn along the bottom of the pill */
.d-progress{position:absolute;left:24px;right:24px;bottom:-1px;height:2px;border-radius:2px;
  background:var(--d-grad);scale:var(--sp,0) 1;transform-origin:left center;z-index:2;pointer-events:none}
[dir="rtl"] .d-progress{transform-origin:right center}
/* the Book button gets a slow sheen, so the one thing we want tapped keeps catching the light */
.nav .btn-primary .btn-bg,.hero .btn-primary .btn-bg{background:var(--d-grad);background-size:180% 100%}
.nav .btn-primary::after,.hero .btn-primary::after{content:"";position:absolute;inset:0;z-index:2;
  border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgb(255 255 255 / .45) 50%,transparent 60%);
  translate:-130% 0;animation:d-sheen 6.5s ease-in-out infinite}
@keyframes d-sheen{0%,70%{translate:-130% 0}100%{translate:130% 0}}

/* ---------------------------------------------------------------- buttons
   Sumit 21:41: the label rolling up on hover is out. A button now leans in and deepens. */
.btn .btn-text{text-shadow:none}
.btn:hover .btn-text,.btn-sm:hover .btn-text{transform:none}
.btn{transition:scale .25s var(--ease-circ),box-shadow .25s var(--ease-circ)}
@media (hover:hover){
  .btn:hover{scale:1.045;box-shadow:0 16px 30px -18px rgb(26 154 154 / .85)}
  .btn:active{scale:.99}
  .btn-primary:hover .btn-bg{background:var(--d-teal-deep)}
}

/* ================================================================ C-14 certification band (05-Oct)
   Lane C-footer, 05-Oct client round (plan step 1.6). ONE band before the footer on every
   footer page, EN + AR (assemble.inject_cert_band, partial from _build/render_cert_band.py).
   One copy of its CSS, here, under NEW class names: every footer page already loads this
   file, so no page loads a new stylesheet (D-77). Deliberately NOT .hub-accred / .hub-logos:
   service pages restyle those (design-service*.css), so the band would differ per page.
   Same look as the hub's tile row (design-service-pages.css 274-297). */
.cert-band{padding-block:var(--sec-m)}
.cert-band-inner{text-align:center}
.cert-band-title{position:relative;padding-top:18px;margin-bottom:36px;text-align:inherit}
.cert-band-title::before{content:"";position:absolute;top:0;left:50%;translate:-50% 0; /* physical left: centring must not flip under dir=rtl (05-Oct review) */
  width:56px;height:4px;border-radius:4px;background:var(--d-grad)}
.cert-logos{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  padding:0;margin:0}
.cert-logos li{display:flex;align-items:center;justify-content:center;min-height:112px;
  padding:18px 22px;background:#fff;border:1px solid var(--border-faint);
  border-radius:var(--d-r-card);
  transition:transform .35s var(--ease-circ),box-shadow .35s var(--ease-circ),
             border-color .35s var(--ease-circ)}
.cert-logos img{max-width:100%;max-height:64px;width:auto;height:auto}
@media (hover:hover){
  .cert-logos li:hover{transform:translateY(-3px);border-color:rgb(36 187 187 / .38);
    box-shadow:0 18px 36px -26px rgb(26 154 154 / .65)}
}
@media (max-width:1023px){.cert-logos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:639px){.cert-logos{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.cert-logos li{transition:none}}
/* ================================================================ end C-14 */

/* ================================================================ C-17 floating social (05-Oct)
   Lane C-footer (plan step 1.8, D-148): Instagram + Facebook float bottom-LEFT from 1024px,
   on EN AND AR (physical left, not inset-inline-start). The links are cloned at runtime from
   the footer (js/main.js, the C-17 block), so the CMS footer stays the one source. Booking
   pages load neither this file nor main.js. z-index under .mobile-menu (998). */
.social-float{display:none}
@media (min-width:1024px){
  /* 05-Oct lead, measured: at left:24px / 44px the pair covered the Doctor on Call hero button and card
     text at 1440. Now a 30px tab flush with the left edge, inside the 32px page gutter (--pad-page),
     so it never overlaps content. Physical left on AR too (D-148 Q15). */
  .social-float{position:fixed;left:0;bottom:24px;z-index:900;display:flex;flex-direction:column;gap:6px}
  .social-float .chip-circle{width:30px;height:30px;border-radius:0 10px 10px 0;
    background:#fff;color:var(--d-teal-deep);
    border:1px solid var(--border-faint);border-left-width:0;box-shadow:0 10px 24px -14px rgb(16 24 40 / .45);
    transition:background-color .3s,color .3s,transform .3s var(--ease-circ)}
  .social-float .chip-circle svg{display:block;width:15px;height:15px}
}
@media (min-width:1024px) and (hover:hover){
  .social-float .chip-circle:hover{background:var(--d-teal-deep);color:#fff;transform:translateX(2px)}
}
/* hidden while the footer (which shows the same links) is on screen: main.js toggles .is-off */
.social-float{transition:opacity .3s ease,visibility .3s}
.social-float.is-off{opacity:0;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:reduce){.social-float,.social-float .chip-circle{transition:none}}
@media print{.social-float{display:none!important}}
/* ================================================================ end C-17 */