*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:#5F6675;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-family:Manrope,system-ui,sans-serif;color:#161B39;font-weight:700;line-height:1.12;letter-spacing:-0.022em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}
a{color:#0795FE;text-decoration:none}
a:hover{color:#0672c4}
:focus-visible{outline:2px solid #0795FE;outline-offset:3px;border-radius:4px}
:root{
--gut:clamp(22px,5vw,80px);--sec:clamp(70px,8.4vw,128px);
--hero:1.04fr .96fr;--herobgpos:center right;
--two:1fr 1fr;--three:repeat(3,1fr);--four:repeat(4,1fr);--split:.44fr .56fr;--bank:.55fr .45fr;
--optcols:1fr 1fr;--stag:34px;--vrule:1px solid #E7EEF5;--vpad:clamp(28px,4vw,60px);
--jur:.35fr .65fr;--jurhead:1fr;--jurrule:0;--jurpad:0px;--jrule1:block;--optlay:1fr;--itemcols:1fr 1fr;--it2:0;--jpad:clamp(26px,3vw,44px);--footcols:1.15fr .85fr;--stripdir:row;--stripalign:center;--stripicon:flex;--stripbtn:auto;
--mbar:none;--hdrnav:flex;--ctawrap:nowrap;--logoh:40px;--hdrmob:none;--bodypad:0;--faqcols:.38fr .62fr}
@media (max-width:1080px){:root{--bank:1fr;--split:1fr;--faqcols:1fr;--jur:1fr;--jurhead:.52fr .48fr;--jurrule:1px solid rgba(255,255,255,.18);--jurpad:clamp(22px,2.6vw,40px);--jrule1:none;--optlay:.42fr .58fr;--stripicon:none}}
@media (max-width:900px){:root{--hero:1fr;--herobgpos:60% center}}
@media (max-width:1020px){:root{--four:repeat(2,1fr)}}
@media (max-width:900px){:root{--footcols:1fr;--two:1fr;--three:1fr;--four:repeat(2,1fr);--stag:0px;--vrule:0;--vpad:0px}}
@media (max-width:820px){:root{--mbar:flex;--hdrnav:none;--hdrmob:flex;--bodypad:76px}}
@media (max-width:620px){:root{--four:1fr;--optcols:1fr;--ctawrap:wrap;--jurhead:1fr;--jurrule:0;--jurpad:0px;--optlay:1fr;--itemcols:1fr;--it2:1px solid #E7EEF5;--stripdir:column;--stripalign:stretch;--stripbtn:100%}}
@media (max-width:480px){:root{--logoh:26px}}
@keyframes dcFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* interaction states extracted from style-hover / style-focus */
.pdlh1:hover{background:#0680dd !important}
.pdlh2:hover{background:#0680dd !important}
.pdlh3:hover{border-color:#25D366 !important;color:#161B39 !important}
.pdlh4:focus{border-color:#0795FE !important;box-shadow:0 0 0 3px rgba(7,149,254,.14) !important}
.pdlh5:focus{border-color:#0795FE !important;box-shadow:0 0 0 3px rgba(7,149,254,.14) !important}
.pdlh6:focus{border-color:#0795FE !important;box-shadow:0 0 0 3px rgba(7,149,254,.14) !important}
.pdlh7:focus{border-color:#0795FE !important;box-shadow:0 0 0 3px rgba(7,149,254,.14) !important}
.pdlh8:focus{border-color:#0795FE !important;box-shadow:0 0 0 3px rgba(7,149,254,.14) !important}
.pdlh9:hover{border-color:#B9C6D4 !important}
.pdlh10:hover{background:#0680dd !important}
.pdlh11:hover{background:#F5FAFF !important}
.pdlh12:hover{background:#0680dd !important}
.pdlh13:hover{gap:15px !important}
.pdlh14:hover{gap:15px !important}
.pdlh15:hover{background:#0680dd !important}
.pdlh16:hover{background:#0680dd !important}
.pdlh17:hover{background:#0680dd !important}
.pdlh18:hover{border-color:#25D366 !important}
.pdlh19:hover{background:#F5FAFF !important}
.pdlh20:hover{background:#0680dd !important}
.pdlh21:hover{border-color:#25D366 !important}

/* ============================================================
   Conditional blocks — replaces the artifact runtime's <sc-if>.
   display:contents keeps grid/flex parents laying out unchanged.
   ============================================================ */
pdl-if{display:contents}
pdl-if[hidden]{display:none !important}

/* ============================================================
   Multi-step choice buttons (was optStyle())
   ============================================================ */
.pdl-opt{
  display:flex;align-items:center;width:100%;min-height:50px;
  padding:12px 16px;border-radius:8px;cursor:pointer;text-align:left;
  font:inherit;font-size:15px;line-height:1.35;font-weight:400;
  color:#161B39;background:#fff;border:1px solid #DDE5EC;box-shadow:none;
  transition:border-color .2s ease, background .2s ease;
}
.pdl-opt:hover{border-color:#B9C6D4}
.pdl-opt.is-selected{
  font-weight:600;background:#F5FAFF;border-color:#0795FE;
  box-shadow:inset 0 0 0 1px #0795FE;
}

/* ============================================================
   Continue / Submit buttons (was btn())
   ============================================================ */
.pdl-btn{
  height:50px;padding:0 24px;border:0;border-radius:9px;
  background:#0795FE;color:#fff;font-size:15.5px;font-weight:600;
  font-family:inherit;cursor:pointer;transition:background .2s ease;
}
.pdl-btn:hover{background:#0680dd}
.pdl-btn.is-disabled{background:#C7D6E4;cursor:not-allowed}
.pdl-btn.is-disabled:hover{background:#C7D6E4}
.pdl-btn-next{flex:0 0 auto}
.pdl-btn-submit{flex:1 1 auto}
.pdl-btn.is-busy{opacity:.75;cursor:progress}

/* ============================================================
   FAQ toggle glyph (was glyphN)
   ============================================================ */
.pdl-faq-glyph{
  flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid #E7EEF5;color:#8A93A5;font-size:16px;line-height:1;
  transform:none;transition:transform .3s ease, border-color .2s ease, color .2s ease;
}
[aria-expanded="true"] .pdl-faq-glyph{
  border-color:#0795FE;color:#0795FE;transform:rotate(45deg);
}

/* ============================================================
   Contact Form 7 host — kept in the DOM (CF7 needs a real, focusable
   form for its nonce + validation) but removed from view. Not
   display:none, which would break CF7's own field handling.
   ============================================================ */
.pdl-cf7-host{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.pdl-cf7-host .wpcf7-response-output,
.pdl-cf7-host .wpcf7-not-valid-tip,
.pdl-cf7-host .wpcf7-spinner{display:none !important}

/* Inline error/notice inside our own card */
.pdl-alert{margin-top:12px;font-size:13.5px;line-height:1.55;color:#C0392B}
.pdl-alert[hidden]{display:none !important}
.pdl-admin-notice{
  margin-top:14px;padding:12px 14px;border-radius:8px;
  background:#FFF4E5;border:1px solid #F0C48A;color:#7A4B00;
  font-size:13px;line-height:1.55;
}

/* Honeypot — off-screen rather than display:none so bots still fill it */
.pdl-hp{position:absolute !important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Reduced motion: the reveal animation is JS-driven, this is the backstop */
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1 !important;transform:none !important}
}

/* ================================================================
   THEME-ISOLATION ARMOUR                                  v1.1.0

   Second line of defence. The plugin already drops the theme's
   stylesheets on this template, but page builders and plugins
   (Slider Revolution, Elementor, WPBakery) inject their own CSS
   too, and some of it uses !important.

   The design sets most of its styling inline, and inline styling
   beats any selector here — so these rules only reclaim the
   properties the design does NOT set inline, which is exactly
   where a theme's CSS leaks in. Values below are the design's own
   values, so nothing changes visually when no theme is present.
   ================================================================ */

/* ---- Page shell ---- */
body.pdl-landing-body,
body:has(> #pdl-root){
  margin:0 !important;
  padding:0 !important;
  background:#fff !important;
  color:#5F6675;
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.6;
}
body.pdl-landing-body::before,
body.pdl-landing-body::after,
body:has(> #pdl-root)::before,
body:has(> #pdl-root)::after{content:none !important;display:none !important}

/* ---- Headings: themes love adding decorative bars and uppercase ---- */
#pdl-root h1,#pdl-root h2,#pdl-root h3,#pdl-root h4{
  font-family:Manrope,system-ui,sans-serif !important;
  background:none !important;
  border:0 !important;
  padding:0 !important;
  color:#161B39;
  font-weight:700;
  line-height:1.12;
  margin:0;
}
/* text-transform and letter-spacing are forced back to the design's values,
   but ONLY where the heading does not declare them inline. Two headings
   ("UAE FREE ZONE", "UAE MAINLAND") are deliberately uppercase and tracked
   out; the :not() guards leave those alone. */
#pdl-root h1:not([style*="text-transform"]),
#pdl-root h2:not([style*="text-transform"]),
#pdl-root h3:not([style*="text-transform"]),
#pdl-root h4:not([style*="text-transform"]){text-transform:none !important}
#pdl-root h1:not([style*="letter-spacing"]),
#pdl-root h2:not([style*="letter-spacing"]),
#pdl-root h3:not([style*="letter-spacing"]),
#pdl-root h4:not([style*="letter-spacing"]){letter-spacing:-0.022em !important}
#pdl-root h1::before,#pdl-root h1::after,
#pdl-root h2::before,#pdl-root h2::after,
#pdl-root h3::before,#pdl-root h3::after,
#pdl-root h4::before,#pdl-root h4::after{content:none !important;display:none !important}

/* ---- Lists ---- */
#pdl-root ul{list-style:none !important;margin:0 !important;padding:0 !important}
#pdl-root li{list-style:none !important;margin:0;background:none !important}
#pdl-root li::before,#pdl-root li::after{content:none !important;display:none !important}
#pdl-root li::marker{content:none !important}

/* ---- Links ---- */
#pdl-root a{text-decoration:none !important;box-shadow:none !important}
#pdl-root a::before,#pdl-root a::after{content:none !important}

/* ---- Fieldset / legend / figure ---- */
#pdl-root fieldset,#pdl-root legend,#pdl-root figure{
  border:0 !important;background:none !important;box-shadow:none !important;
  width:auto;max-width:none;
}

/* ================================================================
   FIX 1 — "Explore Free Zone / Mainland Options"
   Borderless blue text link with a sliding arrow, per the design.
   Themes turn any <button> into a padded, filled box; these rules
   pin every property that would create one.
   ================================================================ */
#pdl-root #cta-explore-freezone,
#pdl-root #cta-explore-mainland{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:none !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:none;
  color:#0795FE !important;
  font-family:inherit !important;
  font-size:16px !important;
  font-weight:600 !important;
  line-height:1.4 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  text-decoration:none !important;
  text-shadow:none !important;
  cursor:pointer;
  transition:gap .2s ease !important;
}
#pdl-root #cta-explore-freezone:hover,
#pdl-root #cta-explore-mainland:hover,
#pdl-root #cta-explore-freezone:focus,
#pdl-root #cta-explore-mainland:focus,
#pdl-root #cta-explore-freezone:active,
#pdl-root #cta-explore-mainland:active{
  gap:15px !important;
  background:none !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  color:#0795FE !important;
  transform:none !important;
}
#pdl-root #cta-explore-freezone::before,#pdl-root #cta-explore-freezone::after,
#pdl-root #cta-explore-mainland::before,#pdl-root #cta-explore-mainland::after{
  content:none !important;display:none !important;
}
#pdl-root #cta-explore-freezone span,
#pdl-root #cta-explore-mainland span{
  color:#0795FE !important;font-size:17px !important;line-height:1 !important;
}

/* ================================================================
   FIX 2 — Form choice buttons keep dark text when selected

   Theme rules such as `button:hover{color:#fff}` or
   `.active{color:#fff}` were repainting the label white the moment
   an option was chosen. Text is #161B39 in every state, always.
   ================================================================ */
#pdl-root .pdl-opt,
#pdl-root .pdl-opt:link,
#pdl-root .pdl-opt:visited,
#pdl-root .pdl-opt:hover,
#pdl-root .pdl-opt:focus,
#pdl-root .pdl-opt:focus-visible,
#pdl-root .pdl-opt:active,
#pdl-root .pdl-opt.is-selected,
#pdl-root .pdl-opt.is-selected:hover,
#pdl-root .pdl-opt.is-selected:focus,
#pdl-root .pdl-opt.is-selected:active,
#pdl-root .pdl-opt[aria-pressed="true"],
#pdl-root .pdl-opt[aria-pressed="true"]:hover{
  color:#161B39 !important;
  text-shadow:none !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  text-decoration:none !important;
  font-family:inherit !important;
  background-image:none !important;
  transform:none !important;
  outline:none;
}
#pdl-root .pdl-opt{
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  min-height:50px !important;
  height:auto !important;
  margin:0 !important;
  padding:12px 16px !important;
  border:1px solid #DDE5EC !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:none !important;
  font-size:15px !important;
  font-weight:400 !important;
  line-height:1.35 !important;
  text-align:left !important;
  cursor:pointer;
}
#pdl-root .pdl-opt:hover{
  background:#fff !important;
  border-color:#B9C6D4 !important;
}
#pdl-root .pdl-opt.is-selected,
#pdl-root .pdl-opt.is-selected:hover,
#pdl-root .pdl-opt[aria-pressed="true"]{
  background:#F5FAFF !important;
  border-color:#0795FE !important;
  box-shadow:inset 0 0 0 1px #0795FE !important;
  font-weight:600 !important;
}
#pdl-root .pdl-opt::before,#pdl-root .pdl-opt::after{content:none !important;display:none !important}

/* Continue / Submit keep their white label on blue */
#pdl-root .pdl-btn,
#pdl-root .pdl-btn:hover,
#pdl-root .pdl-btn:focus,
#pdl-root .pdl-btn:active{
  background:#0795FE !important;
  height:50px !important;
  min-width:0 !important;
  padding:0 24px !important;
  font-family:inherit !important;
  font-size:15.5px !important;
  font-weight:600 !important;
  color:#fff !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  text-shadow:none !important;
  background-image:none !important;
  border:0 !important;
  border-radius:9px !important;
  box-shadow:none !important;
  transform:none !important;
}
#pdl-root .pdl-btn:hover{background:#0680dd !important}
#pdl-root .pdl-btn.is-disabled,
#pdl-root .pdl-btn.is-disabled:hover,
#pdl-root .pdl-btn.is-disabled:focus{background:#C7D6E4 !important;cursor:not-allowed !important}
#pdl-root .pdl-btn::before,#pdl-root .pdl-btn::after{content:none !important;display:none !important}

/* ================================================================
   FIX 3 — Testimonial quotes: no left rule, no quote glyphs

   Consultio styles <blockquote> with a left border, extra padding
   and italics. The design's cards want none of that.
   ================================================================ */
#pdl-root blockquote{
  margin:18px 0 0 !important;
  border:0 !important;
  border-left:0 !important;
  padding:0 !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  font-style:normal !important;
  quotes:none !important;
  text-align:left !important;
}
#pdl-root blockquote::before,
#pdl-root blockquote::after,
#pdl-root blockquote p::before,
#pdl-root blockquote p::after{content:none !important;display:none !important}

/* ================================================================
   FIX 4 — FAQ rows

   The rows are a hairline divider plus a bare full-width button.
   Themes add borders, padding, backgrounds and marker glyphs.
   ================================================================ */
#pdl-root [data-act="faq"]{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:24px !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:22px 0 !important;
  background:none !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  text-align:left !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  font-family:inherit !important;
  cursor:pointer;
}
#pdl-root [data-act="faq"]:hover,
#pdl-root [data-act="faq"]:focus,
#pdl-root [data-act="faq"]:active{
  background:none !important;
  box-shadow:none !important;
  transform:none !important;
}
#pdl-root [data-act="faq"]::before,
#pdl-root [data-act="faq"]::after{content:none !important;display:none !important}
#pdl-root [data-act="faq"] span:first-child{
  font-family:Manrope,sans-serif !important;
  font-size:17.5px !important;
  font-weight:600 !important;
  color:#161B39 !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  line-height:1.35 !important;
}

/* The + / × glyph is class-styled, so it is the most exposed element
   on the page. Pinned here in full. */
#pdl-root .pdl-faq-glyph{
  flex:none !important;
  width:26px !important;
  height:26px !important;
  min-width:26px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:50% !important;
  border:1px solid #E7EEF5 !important;
  background:none !important;
  color:#8A93A5 !important;
  font-family:Inter,system-ui,sans-serif !important;
  font-size:16px !important;
  font-weight:400 !important;
  line-height:1 !important;
  transform:none;
  transition:transform .3s ease, border-color .2s ease, color .2s ease !important;
}
#pdl-root [aria-expanded="true"] .pdl-faq-glyph{
  border-color:#0795FE !important;
  color:#0795FE !important;
  transform:rotate(45deg);
}

/* ---- Text inputs ---- */
#pdl-root input[type="text"],
#pdl-root input[type="email"],
#pdl-root input[type="tel"]{
  width:100% !important;
  max-width:none !important;
  height:50px !important;
  margin:0 !important;
  padding:0 14px !important;
  border:1px solid #DDE5EC !important;
  border-radius:8px !important;
  background:#fff !important;
  background-image:none !important;
  box-shadow:none !important;
  color:#161B39 !important;
  font-family:inherit !important;
  font-size:15px !important;
  line-height:normal !important;
  text-transform:none !important;
  letter-spacing:normal !important;
}
#pdl-root input:focus{
  border-color:#0795FE !important;
  box-shadow:0 0 0 3px rgba(7,149,254,.14) !important;
  outline:none !important;
}
#pdl-root label{
  display:block;margin:0 !important;padding:0 !important;
  font-family:inherit !important;text-transform:none !important;
  letter-spacing:normal !important;font-weight:600;
}

/* The honeypot must stay invisible no matter what the theme does. */
#pdl-root .pdl-hp{display:block !important}
#pdl-root .pdl-hp label{position:absolute !important;left:-9999px !important}


/* ---- Inline typography guards -------------------------------------------
   An !important rule in a theme stylesheet outranks even an inline style,
   so elements whose tracking / casing is set inline still need defending.
   Each rule below matches the exact inline declaration used in the markup
   and re-asserts it, which keeps the deliberately uppercase, tracked-out
   labels ("UAE FREE ZONE", section eyebrows) looking as designed.
   -------------------------------------------------------------------- */
#pdl-root [style*="letter-spacing:-0.01em"]{letter-spacing:-0.01em !important}
#pdl-root [style*="letter-spacing:-0.02em"]{letter-spacing:-0.02em !important}
#pdl-root [style*="letter-spacing:-0.04em"]{letter-spacing:-0.04em !important}
#pdl-root [style*="letter-spacing:.02em"]{letter-spacing:.02em !important}
#pdl-root [style*="letter-spacing:.05em"]{letter-spacing:.05em !important}
#pdl-root [style*="letter-spacing:.06em"]{letter-spacing:.06em !important}
#pdl-root [style*="letter-spacing:.13em"]{letter-spacing:.13em !important}
#pdl-root [style*="letter-spacing:.14em"]{letter-spacing:.14em !important}
#pdl-root [style*="letter-spacing:.15em"]{letter-spacing:.15em !important}
#pdl-root [style*="letter-spacing:.16em"]{letter-spacing:.16em !important}
#pdl-root [style*="letter-spacing:4px"]{letter-spacing:4px !important}
#pdl-root [style*="text-transform:uppercase"]{text-transform:uppercase !important}


/* ---- Call-to-action guards ----------------------------------------------
   Same technique as the typography guards: re-assert the exact inline value
   so an !important theme or page-builder rule cannot repaint the buttons.
   Only plain colour values are pinned; the hero's composite background
   shorthand is left untouched.
   ---------------------------------------------------------------------- */
#pdl-root button[style*="background:#0795FE"],
#pdl-root a[style*="background:#0795FE"]{background:#0795FE !important}
#pdl-root button[style*="background:#fff"],
#pdl-root a[style*="background:#fff"]{background:#fff !important}
#pdl-root button[style*="background:none"],
#pdl-root a[style*="background:none"]{background:none !important}
#pdl-root button[style*="color:#0795FE"],
#pdl-root a[style*="color:#0795FE"]{color:#0795FE !important}
#pdl-root button[style*="color:#161B39"],
#pdl-root a[style*="color:#161B39"]{color:#161B39 !important}
#pdl-root button[style*="color:#5F6675"],
#pdl-root a[style*="color:#5F6675"]{color:#5F6675 !important}
#pdl-root button[style*="color:#fff"],
#pdl-root a[style*="color:#fff"]{color:#fff !important}
#pdl-root button[style*="height:"],
#pdl-root a[style*="height:"]{min-width:0 !important;max-width:none !important}
#pdl-root button[style*="padding:0 "],
#pdl-root a[style*="padding:0 "]{min-width:0 !important;text-transform:none !important}

/* ---- Floating WhatsApp call to action -----------------------------------
   A round WhatsApp button pinned to the bottom-right corner, with two pulse
   rings expanding at once.

   The reference snippet animated `padding` on a pseudo-element and the
   `box-shadow` spread on the button. Both force the browser to recalculate
   layout or repaint on every frame, for the whole life of the page, on a
   landing page whose entire job is to load fast on a phone. The rings here
   animate `transform` and `opacity` only, which the compositor handles
   without touching layout, and they are real elements so the two rings can
   run the same keyframe half a cycle apart and be on screen together.

   Sizes are deliberately below the reference's 50px: 46px on desktop, 44px
   on small screens.
   ---------------------------------------------------------------------- */
#pdl-root .pdl-wa-fab{
  position:fixed !important;
  right:20px;
  bottom:20px;
  z-index:71;
  width:46px !important;
  height:46px !important;
  min-width:0 !important;
  max-width:none !important;
  padding:0 !important;
  margin:0 !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  border:0 !important;
  border-radius:50% !important;
  background:#25D366 !important;
  color:#fff !important;
  text-decoration:none !important;
  box-shadow:0 4px 14px rgba(16,32,48,.22) !important;
  transition:transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
}

#pdl-root .pdl-wa-fab:hover,
#pdl-root .pdl-wa-fab:focus-visible{
  transform:scale(1.06);
  box-shadow:0 6px 18px rgba(16,32,48,.28) !important;
  color:#fff !important;
}

#pdl-root .pdl-wa-fab:focus-visible{
  outline:3px solid #fff;
  outline-offset:2px;
}

#pdl-root .pdl-wa-fab-icon{
  position:relative;
  z-index:1;
  width:24px !important;
  height:24px !important;
  display:block;
  fill:currentColor;
  pointer-events:none;
}

/* The rings sit behind the button face and expand past it. */
#pdl-root .pdl-wa-fab-ring{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  border-radius:50%;
  background:rgba(37,211,102,.55);
  pointer-events:none;
  z-index:0;
  transform:scale(1);
  opacity:0;
  animation:pdl-wa-pulse 2.4s linear infinite;
}

/* Half a cycle behind the first, so two rings are always visible together. */
#pdl-root .pdl-wa-fab-ring2{
  animation-delay:-1.2s;
}

/*
   Linear on purpose. An ease-out curve throws the ring outward and drops its
   opacity almost to nothing within the first third of the cycle, which leaves
   each wave visible only briefly — so the two rings are rarely on screen
   together and the effect reads as one flicker rather than two waves. Fading
   evenly keeps both rings alive for most of the cycle, which is what "two
   pulses at the same time" actually looks like.
*/
@keyframes pdl-wa-pulse{
  0%{transform:scale(.9);opacity:0}
  10%{opacity:.5}
  95%{opacity:0}
  100%{transform:scale(1.95);opacity:0}
}

/* Small screens: the fixed Call / WhatsApp bar is 62px tall, so the button
   is lifted clear of it. Without that bar it stays in the corner. */
@media (max-width:820px){
  #pdl-root .pdl-wa-fab{
    right:16px;
    width:44px !important;
    height:44px !important;
  }

  #pdl-root .pdl-wa-fab-icon{
    width:23px !important;
    height:23px !important;
  }

  #pdl-root .pdl-wa-fab-stacked{
    bottom:78px;
  }
}

/* A visitor who has asked for less motion gets the button, not the pulse.
   The rings are hidden outright rather than frozen mid-expansion. */
@media (prefers-reduced-motion:reduce){
  #pdl-root .pdl-wa-fab-ring{display:none !important}
  #pdl-root .pdl-wa-fab{transition:none !important}
}

@media print{
  #pdl-root .pdl-wa-fab{display:none !important}
}

/* ---- Footer bottom row: legal links and copyright -----------------------
   Two requirements at once.

   Desktop: the legal links must begin at the same x as the contact block
   above them. That is done by giving this row the SAME column template the
   upper footer row uses (--footcols), so the two right-hand groups share one
   variable and stay aligned at 1920, 1600, 1440, 1366 and 1280 without a
   single margin tuned to one screen size.

   Tablet and mobile: the three legal links come first and the copyright is
   the last line on the page. The links are therefore FIRST in the document —
   which is the stacked order — and `order` puts the copyright back on the
   left for desktop. Nothing is repositioned absolutely and nothing is
   duplicated in the markup, so there is only ever one copy of each link for
   a screen reader to read.
   ---------------------------------------------------------------------- */
#pdl-root .pdl-foot-bottom{
  display:grid;
  grid-template-columns:var(--footcols,1.15fr .85fr);
  gap:12px clamp(24px,3vw,48px);
  align-items:center;
}

#pdl-root .pdl-foot-bottom .pdl-foot-copy{order:1}
#pdl-root .pdl-foot-bottom .pdl-foot-legal{order:2}

/* Below 1024px the row stacks, and document order takes over: links, then
   copyright last. The upper footer row keeps its own existing breakpoint —
   this rule deliberately touches nothing but the bottom row. */
@media (max-width:1024px){
  #pdl-root .pdl-foot-bottom{
    grid-template-columns:1fr;
    gap:14px;
  }

  #pdl-root .pdl-foot-bottom .pdl-foot-legal{order:1}
  #pdl-root .pdl-foot-bottom .pdl-foot-copy{order:2}
}

/* Breathing room under the copyright so it is never the line that ends up
   half-hidden behind the fixed Call / WhatsApp bar. The bar itself is 62px
   and #pdl-root already carries --bodypad for it; this is the gap between
   the last words and that bar. */
@media (max-width:820px){
  #pdl-root .pdl-foot-bottom{padding-bottom:6px}
}

/* ---- Reviews -------------------------------------------------------------
   Three across on desktop, two on tablet, one on a phone. The card design is
   unchanged; only the number of columns responds.
   ---------------------------------------------------------------------- */
/* Driven by a custom property, not by a class rule: the grid carries its
   column count inline (as every block on this page does), and an inline
   declaration outranks any selector here. Setting the variable is the only
   way to change it from the stylesheet, and it is also how the rest of the
   page's responsive behaviour is already expressed. */
:root{--reviewcols:repeat(3,1fr)}
@media (max-width:1024px){:root{--reviewcols:repeat(2,1fr)}}
@media (max-width:720px){:root{--reviewcols:1fr}}

#pdl-root .pdl-reviews-grid{min-width:0}
#pdl-root .pdl-review{min-width:0}

/* A review may run to more than one paragraph. The page sets p{margin:0},
   so without this they would run together into a wall of text. */
#pdl-root .pdl-review blockquote p{margin:0}
#pdl-root .pdl-review blockquote p + p{margin-top:12px}

/* The avatar is a fixed disc whatever the source image's aspect ratio, and
   it reserves its space before the image loads so the card does not jump. */
#pdl-root img.pdl-review-avatar{
  object-fit:cover;
  aspect-ratio:1/1;
}