/*!
 * dleaps-glass.css - r94 "Laminated Glass"
 * -----------------------------------------------------------------------------
 * Owner direction (Oct 2026): change the UI to glassmorphism, after a
 * reference of a thick frosted-glass pill made of stacked clear sheets, with a
 * turquoise > pink > peach refraction on its edge, sitting on a pale dotted
 * surface under a long soft shadow.
 *
 * How it lands without touching React:
 *  - Loaded LAST, after dleaps-organic.css. Everything is keyed on html.dlg,
 *    which dleaps-glass.js sets on every route (React routes, Vastu, Veeha,
 *    legal and area pages). Remove the class and the site is r90 again.
 *  - The organic layer already paints every glass surface from four tokens
 *    (--dlo-glass, --dlo-glass-line, --dlo-shadow, --dlo-blur). r94 redefines
 *    those tokens, so every existing glass card turns laminated in one place.
 *  - Brand colours unchanged: turquoise #4DD9E8 and magenta #E8407F are the two
 *    ends of the refraction; peach is only the tail of the magenta.
 *
 * Kept as directed: Recent work (r88 look), magenta footer, /about, the
 * hover-gradient header menu and its mega menus.
 */

/* ============================================================== tokens */
html.dlg{
  --dlg-canvas:#ECEFF5;
  --dlg-dot:rgba(28,40,72,.20);
  --dlg-navy:#13223A;
  --dlg-tq:#4DD9E8;--dlg-mg:#E8407F;--dlg-peach:#FFB894;
  /* refraction: the colour a laminated edge throws */
  --dlg-iri:linear-gradient(100deg,#5FDDEA 0%,#BDF2F7 22%,#FCE7F0 48%,#F7AFCB 74%,#FFC6AA 100%);
  --dlg-iri-v:linear-gradient(180deg,#5FDDEA,#F7AFCB 60%,#FFC6AA);
  /* the face: milky, brightest at the top edge like the reference */
  --dlg-face:linear-gradient(165deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.62) 46%,rgba(255,255,255,.74) 100%);
  /* the rim: shows through a transparent border */
  --dlg-rim:linear-gradient(115deg,rgba(77,217,232,.80) 0%,rgba(255,255,255,.95) 28%,rgba(255,255,255,.80) 55%,rgba(232,64,127,.42) 82%,rgba(255,178,140,.75) 100%);
  /* pointer-following highlight (dleaps-glass.js sets --mx/--my) */
  --dlg-spec:radial-gradient(320px circle at var(--mx,22%) var(--my,-10%),rgba(255,255,255,.65),rgba(255,255,255,0) 62%);
  /* the stack: three sheets under the top one, then the cast shadow with a
     faint turquoise and magenta caustic, as in the reference */
  --dlg-stack:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(255,255,255,.55),
    0 4px 0 -1px rgba(255,255,255,.78),
    0 5px 0 -1px rgba(150,170,200,.30),
    0 9px 0 -3px rgba(255,255,255,.58),
    0 10px 0 -3px rgba(150,170,200,.22),
    0 14px 0 -5px rgba(255,255,255,.40),
    0 15px 0 -5px rgba(232,64,127,.14),
    0 44px 70px -34px rgba(36,48,88,.42),
    0 26px 46px -30px rgba(232,64,127,.30),
    0 18px 40px -28px rgba(77,217,232,.45);
  --dlg-stack-sm:
    inset 0 1px 0 #fff,
    0 3px 0 -1px rgba(255,255,255,.78),
    0 4px 0 -1px rgba(150,170,200,.32),
    0 7px 0 -3px rgba(255,255,255,.55),
    0 8px 0 -3px rgba(150,170,200,.22),
    0 22px 34px -20px rgba(36,48,88,.40),
    0 14px 26px -18px rgba(232,64,127,.32);
  --dlg-blur:blur(24px) saturate(180%);

  /* r89/r90 organic tokens, redefined: every .dlo-glass surface follows */
  --dlo-mist:var(--dlg-canvas);
  --dlo-glass:var(--dlg-spec) padding-box,var(--dlg-face) padding-box,var(--dlg-rim) border-box;
  --dlo-glass-line:transparent;
  --dlo-shadow:var(--dlg-stack);
  --dlo-blur:var(--dlg-blur);
}

/* ============================================================== canvas */
html.dlg body{background:var(--dlg-canvas)}
#dlg-canvas{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--dlg-canvas)}
html.dlo-on #dlg-canvas{display:none}       /* the organic aura is re-skinned instead */
html.dlg #dlo-aura{background:
  radial-gradient(1100px 680px at 82% -12%,rgba(77,217,232,.22),transparent 62%),
  radial-gradient(900px 620px at -8% 46%,rgba(232,64,127,.12),transparent 62%),
  radial-gradient(700px 500px at 70% 110%,rgba(255,184,148,.18),transparent 62%),
  var(--dlg-canvas)}
/* the dotted surface: regular, faint, fading out toward the edges */
html.dlg #dlo-aura:after,#dlg-canvas:after{content:"";position:absolute;inset:-2px;
  background-image:radial-gradient(var(--dlg-dot) 1.1px,transparent 1.5px);background-size:26px 26px;
  -webkit-mask:radial-gradient(130% 95% at 50% 30%,#000 30%,rgba(0,0,0,.35) 75%,transparent 100%);
          mask:radial-gradient(130% 95% at 50% 30%,#000 30%,rgba(0,0,0,.35) 75%,transparent 100%)}
#dlg-canvas:before{content:"";position:absolute;inset:0;background:
  radial-gradient(1000px 600px at 85% -10%,rgba(77,217,232,.20),transparent 62%),
  radial-gradient(800px 560px at -10% 40%,rgba(232,64,127,.10),transparent 62%),
  radial-gradient(700px 500px at 60% 110%,rgba(255,184,148,.16),transparent 62%)}
/* the logo-shaped orbs become refraction glows */
html.dlg #dlo-aura i{filter:blur(46px);opacity:.55}
html.dlg #dlo-aura .a1{background:linear-gradient(160deg,rgba(77,217,232,.55),rgba(189,242,247,.15))}
html.dlg #dlo-aura .a2{background:linear-gradient(200deg,rgba(232,64,127,.30),rgba(255,184,148,.10))}
html.dlg #dlo-aura .a3{background:linear-gradient(140deg,rgba(255,184,148,.30),rgba(77,217,232,.10))}

/* ======================================================== the primitive */
.dlg-glass,html.dlg .dlo-glass{
  background:var(--dlo-glass);border:1.5px solid transparent;box-shadow:var(--dlg-stack);
  -webkit-backdrop-filter:var(--dlg-blur);backdrop-filter:var(--dlg-blur)}
html.dlg .dlo-proof .dlo-glass,html.dlg .dlo-tag,html.dlg .dlo-rooms{box-shadow:var(--dlg-stack-sm)}

/* ============================================================ buttons */
/* primary: a laminated pill with the refraction as its face, navy text
   (contrast on the darkest stop, #F7AFCB, is 9.6:1) */
html.dlg .btn-primary-d,html.dlg .dlo-btn-pri,html.dlg .dlpu-cta,html.dlg .dlpcf-cta.p,
html.dlg .cp-login,html.dlg #dlc-footer .dlc-wa,.dlg-btn{
  background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,0) 52%),var(--dlg-iri)!important;
  background-size:100% 100%,180% 100%!important;background-position:0 0,0 0!important;
  color:var(--dlg-navy)!important;border:0!important;border-radius:999px!important;font-weight:700;
  box-shadow:inset 0 1px 0 #fff,inset 0 -3px 8px rgba(255,255,255,.45),
    0 3px 0 -1px rgba(255,255,255,.85),0 4px 0 -1px rgba(160,140,190,.38),
    0 7px 0 -3px rgba(255,255,255,.6),0 8px 0 -3px rgba(160,140,190,.25),
    0 18px 28px -14px rgba(232,64,127,.50),0 12px 24px -14px rgba(77,217,232,.70)!important;
  transition:transform .25s cubic-bezier(.3,1.4,.5,1),background-position .6s ease,box-shadow .25s ease!important;
  text-shadow:0 1px 0 rgba(255,255,255,.5)}
html.dlg .btn-primary-d:hover,html.dlg .dlo-btn-pri:hover,html.dlg .dlpu-cta:hover,html.dlg .dlpcf-cta.p:hover,
html.dlg .cp-login:hover,html.dlg #dlc-footer .dlc-wa:hover,.dlg-btn:hover{
  transform:translateY(-2px);background-position:0 0,100% 0!important}
html.dlg .btn-primary-d:active,html.dlg .dlo-btn-pri:active,html.dlg .dlpu-cta:active,.dlg-btn:active{transform:translateY(1px)}
html.dlg .btn-primary-d svg,html.dlg .dlo-btn-pri svg,html.dlg .dlpu-cta svg{color:var(--dlg-navy)}
/* the Vastu tool keeps its magenta, laminated */
html.dlg .dlpu-card[data-k=vastu] .dlpu-cta{
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 55%),linear-gradient(100deg,#C72E68,#E8407F 55%,#F07A5A)!important;
  color:#fff!important;text-shadow:0 1px 1px rgba(110,10,50,.35)}
/* secondary: clear frosted glass */
html.dlg .dlo-btn-ghost,html.dlg .dlpu-talk,html.dlg .dlp-ig-dm,html.dlg .btn-outline-d,.dlg-btn-ghost{
  background:var(--dlg-spec) padding-box,linear-gradient(170deg,rgba(255,255,255,.85),rgba(255,255,255,.5)) padding-box,var(--dlg-rim) border-box!important;
  border:1.5px solid transparent!important;color:var(--dlg-navy)!important;border-radius:999px!important;
  -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);
  box-shadow:inset 0 1px 0 #fff,0 3px 0 -1px rgba(255,255,255,.8),0 4px 0 -1px rgba(150,170,200,.3),0 14px 24px -16px rgba(36,48,88,.40)!important}
html.dlg .dlpu-talk:hover{background:var(--dlg-navy)!important;color:#fff!important}
html.dlg [data-dlp-ctaband] a:not(.btn-primary-d){border-radius:999px!important}

/* ============================================================== header */
/* the menu pill: a laminated glass dock (hover-gradient menu kept as is) */
html.dlg nav[data-dlp-nf]::before{
  background:var(--dlg-spec) padding-box,linear-gradient(170deg,rgba(255,255,255,.86),rgba(255,255,255,.56)) padding-box,var(--dlg-rim) border-box!important;
  border:1.5px solid transparent!important;
  -webkit-backdrop-filter:blur(22px) saturate(180%)!important;backdrop-filter:blur(22px) saturate(180%)!important;
  box-shadow:inset 0 1px 0 #fff,0 3px 0 -1px rgba(255,255,255,.75),0 4px 0 -1px rgba(150,170,200,.28),
    0 7px 0 -3px rgba(255,255,255,.5),0 18px 34px -18px rgba(36,48,88,.38),0 12px 26px -18px rgba(232,64,127,.25)!important}
html.dlg nav[data-dlp-nf] .dlp-nf-face{color:#2c3646!important;text-shadow:none!important}
html.dlg header [data-dlp-nf-row]>div>a[data-testid="navbar-whatsapp-link"],
html.dlg header [data-dlp-nf-row]>div>button{
  background:linear-gradient(170deg,rgba(255,255,255,.88),rgba(255,255,255,.58)) padding-box,var(--dlg-rim) border-box!important;
  border:1.5px solid transparent!important;color:var(--dlg-navy)!important;box-shadow:var(--dlg-stack-sm)!important}
/* once over content: a frosted sheet rather than a grey band */
html.dlg.dlo-on header.fixed:before{background:linear-gradient(180deg,rgba(236,239,245,.92),rgba(236,239,245,.74))!important;
  border-bottom:0!important;box-shadow:0 1px 0 rgba(255,255,255,.8),0 14px 30px -26px rgba(36,48,88,.5)!important}

/* ================================================================ hero */
html.dlg #dlo-hero .dlo-copy{border-radius:36px}
html.dlg #dlo-hero .dlo-badge{border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 50%),linear-gradient(145deg,#E8407F,#F07A5A 70%,#FFB894);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 0 -1px rgba(255,210,220,.85),0 5px 0 -1px rgba(199,46,104,.35),
    0 9px 0 -3px rgba(255,220,226,.6),0 22px 34px -16px rgba(199,46,104,.6)}
html.dlg #dlo-hero .dlo-proof .ic{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 12px -6px rgba(19,34,58,.45)}
html.dlg #dlo-hero .dlo-scroll{display:none}

/* ---- r94 new: the Ask Veeha bar (the reference, made usable) ---- */
.dlg-ask-wrap{width:min(860px,100% - 2.5rem);margin:clamp(1.8rem,4vw,3rem) auto 0;perspective:1400px;position:relative;z-index:3}
.dlg-ask{position:relative;display:flex;align-items:center;gap:14px;min-height:76px;padding:10px 10px 10px 12px;border-radius:999px;
  background:var(--dlg-spec) padding-box,
    linear-gradient(180deg,rgba(255,255,255,.70) 0%,rgba(255,255,255,.18) 55%,rgba(255,255,255,.45) 100%) padding-box,
    linear-gradient(100deg,rgba(95,221,234,.62) 0%,rgba(205,245,249,.55) 24%,rgba(252,231,240,.55) 50%,rgba(247,175,203,.62) 76%,rgba(255,198,170,.70) 100%) padding-box,
    linear-gradient(100deg,#5FDDEA,#fff 30%,#fff 60%,#FFB894) border-box;
  border:1.5px solid transparent;
  -webkit-backdrop-filter:blur(26px) saturate(190%);backdrop-filter:blur(26px) saturate(190%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.95),inset 0 -2px 6px rgba(255,255,255,.55),
    0 5px 0 -1px rgba(255,255,255,.80),0 6px 0 -1px rgba(120,200,215,.45),
    0 11px 0 -3px rgba(255,255,255,.62),0 12px 0 -3px rgba(240,160,190,.40),
    0 17px 0 -5px rgba(255,255,255,.45),0 18px 0 -5px rgba(255,190,160,.38),
    0 60px 80px -40px rgba(36,48,88,.50),0 34px 60px -34px rgba(232,64,127,.40),0 30px 60px -34px rgba(77,217,232,.55);
  transform:rotateX(14deg) rotateZ(-1.2deg);transform-origin:50% 100%;
  transition:transform .7s cubic-bezier(.2,.9,.2,1),box-shadow .5s ease}
.dlg-ask:hover,.dlg-ask:focus-within,.dlg-ask.busy{transform:rotateX(0) rotateZ(0)}
.dlg-ask .orb{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#fff,rgba(255,255,255,.75) 55%,rgba(230,236,245,.9));
  box-shadow:inset 0 -3px 6px rgba(150,170,200,.35),inset 0 2px 0 #fff,0 6px 14px -6px rgba(36,48,88,.45)}
.dlg-ask .orb img{width:30px;height:30px;display:block}
.dlg-ask.busy .orb img{animation:dlgSpin 1.4s cubic-bezier(.6,.1,.4,.9) infinite}
.dlg-ask label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dlg-ask input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--dlg-navy,#13223A);
  font:500 clamp(16px,1.6vw,19px)/1.2 Lato,system-ui,sans-serif;padding:12px 0}
.dlg-ask input::placeholder{color:rgba(19,34,58,.62)}
.dlg-ask .go{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:54px;padding:0 22px;border:0;border-radius:999px;cursor:pointer;
  font:700 15px/1 Lato,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#1C3150,#13223A);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 0 -1px rgba(255,255,255,.7),0 12px 20px -10px rgba(19,34,58,.6);transition:transform .2s ease}
.dlg-ask .go:hover{transform:translateY(-1px)}
.dlg-ask .go svg{width:16px;height:16px}
.dlg-ask .go:focus-visible,.dlg-ask input:focus-visible{outline:none}
.dlg-ask:focus-within{outline:3px solid rgba(11,116,128,.55);outline-offset:4px}
/* shimmering status text, as on the reference */
.dlg-ask .say{position:absolute;left:80px;right:150px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:0;
  font:600 clamp(16px,1.6vw,19px)/1.2 Lato,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(90deg,#13223A 0%,#13223A 35%,#E8407F 50%,#13223A 65%,#13223A 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:dlgShine 1.8s linear infinite}
.dlg-ask.busy input{opacity:0}
.dlg-ask.busy .say{opacity:1}
.dlg-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.dlg-chips button{min-height:40px;padding:0 15px;border-radius:999px;cursor:pointer;font:700 13px/1 Lato,system-ui,sans-serif;color:var(--dlg-navy,#13223A);
  background:linear-gradient(170deg,rgba(255,255,255,.88),rgba(255,255,255,.55)) padding-box,var(--dlg-rim) border-box;border:1.5px solid transparent;
  box-shadow:inset 0 1px 0 #fff,0 3px 0 -1px rgba(255,255,255,.8),0 4px 0 -1px rgba(150,170,200,.3),0 10px 18px -12px rgba(36,48,88,.4);transition:transform .2s ease}
.dlg-chips button:hover{transform:translateY(-2px)}
.dlg-chips button:focus-visible{outline:3px solid rgba(11,116,128,.55);outline-offset:2px}
.dlg-ask-note{margin:12px 0 0;text-align:center;font:400 13px/1.4 Lato,system-ui,sans-serif;color:#4A5B6C}
.dlg-ask-note b{color:#13223A}
@keyframes dlgShine{from{background-position:100% 0}to{background-position:-150% 0}}
@keyframes dlgSpin{to{transform:rotate(360deg)}}
@media (max-width:640px){
  .dlg-ask-wrap{width:calc(100% - 1.5rem);margin-top:.4rem}
  .dlg-ask{min-height:64px;gap:10px;padding:7px 7px 7px 8px;transform:none}
  .dlg-ask .orb{width:46px;height:46px}.dlg-ask .orb img{width:26px;height:26px}
  .dlg-ask .go{min-height:48px;width:48px;padding:0;justify-content:center}.dlg-ask .go span{display:none}
  .dlg-ask .say{left:64px;right:66px}
  .dlg-chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:4px 2px 10px;margin:14px -.75rem 0;padding-left:.75rem;scrollbar-width:none}
  .dlg-chips::-webkit-scrollbar{display:none}
  .dlg-chips button{flex:none}
}
@media (prefers-reduced-motion:reduce){.dlg-ask{transform:none;transition:none}.dlg-ask .say{animation:none;color:#13223A;background:none}.dlg-ask.busy .orb img{animation:none}}

/* ========================================================= homepage */
html.dlg .dlpu-card{border-radius:34px!important}
html.dlg .dlpu-free{background:linear-gradient(135deg,#1C3150,#13223A)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
html.dlg .dlpu-ask{background:linear-gradient(170deg,rgba(255,255,255,.9),rgba(255,255,255,.6)) padding-box,var(--dlg-rim) border-box!important;
  border:1.5px solid transparent!important;box-shadow:var(--dlg-stack-sm)}
html.dlg .dlpu-ask button{background:var(--dlg-iri)!important;color:var(--dlg-navy)!important;box-shadow:inset 0 1px 0 #fff,0 6px 12px -6px rgba(232,64,127,.55)}
html.dlg .dlo-est button{background:linear-gradient(170deg,rgba(255,255,255,.9),rgba(255,255,255,.55));border-color:rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff,0 2px 0 -1px rgba(150,170,200,.45),0 6px 12px -8px rgba(36,48,88,.35)}
html.dlg .dlo-est button[aria-pressed=true]{background:linear-gradient(135deg,#1C3150,#13223A);border-color:#13223A;color:#fff}
/* the dark services island: same stage, laminated edges */
html.dlg.dlo-home #pick-service{box-shadow:0 4px 0 -1px rgba(255,255,255,.7),0 5px 0 -1px rgba(150,170,200,.4),0 10px 0 -3px rgba(255,255,255,.45),0 50px 80px -40px rgba(19,34,58,.55)}
/* process cards, client-portal list, brands, instagram */
html.dlg.dlo-home #process .sketch-card{
  background:var(--dlo-glass)!important;border:1.5px solid transparent!important;box-shadow:var(--dlg-stack-sm)!important;
  -webkit-backdrop-filter:var(--dlg-blur);backdrop-filter:var(--dlg-blur);border-radius:24px!important}
html.dlg .dlpp-feat{border-radius:22px!important}
html.dlg .dlpp-feat.is-on{background:var(--dlo-glass)!important;border:1.5px solid transparent!important;box-shadow:var(--dlg-stack-sm)!important}
/* the tools band: one dotted surface (the canvas), soft fade at the foot */
html.dlg.dlo-home .dlpu-band:after{display:none!important}
html.dlg.dlo-home .dlpu-band:before{-webkit-mask:linear-gradient(180deg,#000 70%,transparent);mask:linear-gradient(180deg,#000 70%,transparent)}
html.dlg .cp-root li,html.dlg .cp-root [class*=cp-feat]{background-clip:padding-box}
html.dlg .cp-root li[aria-selected=true],html.dlg .cp-root li.on,html.dlg .cp-root li.is-on{
  background:var(--dlo-glass)!important;border:1.5px solid transparent!important;box-shadow:var(--dlg-stack-sm)!important}
html.dlg.dlo-home .dlpb-replaced>div>div:has(img),html.dlg.dlo-home .dlpb-replaced [class*=marquee]{border-radius:999px}
html.dlg .dlp-ig a{border-radius:26px 26px 26px 80px;box-shadow:var(--dlg-stack-sm)}
html.dlg .dlo-gbp a{border-radius:999px}
html.dlg [data-dlp-ctaband]{border:1.5px solid transparent!important;box-shadow:var(--dlg-stack)!important}
/* the welcome modal */
html.dlg .dlp-wl-card,html.dlg [class*="wl-card"]{box-shadow:var(--dlg-stack)!important;border:1.5px solid rgba(255,255,255,.95)!important}

/* ======================================================= mobile dock */
@media (max-width:1023px){
  html.dlg #dlp-tabs{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));padding-bottom:0;border-radius:28px;
    background:var(--dlg-spec) padding-box,linear-gradient(170deg,rgba(255,255,255,.88),rgba(255,255,255,.60)) padding-box,var(--dlg-rim) border-box!important;
    border:1.5px solid transparent;-webkit-backdrop-filter:blur(24px) saturate(190%);backdrop-filter:blur(24px) saturate(190%);
    box-shadow:inset 0 1px 0 #fff,0 4px 0 -1px rgba(255,255,255,.8),0 5px 0 -1px rgba(150,170,200,.32),
      0 9px 0 -3px rgba(255,255,255,.55),0 24px 40px -18px rgba(36,48,88,.45),0 16px 30px -20px rgba(232,64,127,.35)!important}
  html.dlg #dlp-tabs.down{transform:translate3d(0,calc(100% + 40px),0)}
  html.dlg #dlp-tabs .tb[aria-current="page"]::before{top:3px}
  html.dlg #dlp-tabs .tb-cta .tb-orb{border-radius:50%;
    background:radial-gradient(circle at 35% 28%,#fff,rgba(255,255,255,.8) 55%,rgba(230,236,245,.95));
    box-shadow:inset 0 -3px 6px rgba(150,170,200,.35),inset 0 2px 0 #fff,0 0 0 4px rgba(255,255,255,.7),0 0 0 5.5px rgba(77,217,232,.45),0 12px 22px -10px rgba(232,64,127,.55)}
  html.dlg #dlp-tabs .tb-cta .tb-orb::after{border-radius:50%}
}

/* ================================================= standalone PHP pages */
/* Vastu, Veeha, legal and area pages: let the canvas through and laminate
   their own cards. Those templates paint white; these rules turn the large
   surfaces to glass but leave form fields and the floor-plan tool opaque. */
html.dlg:not(.dlo-on) body{background:transparent}
html.dlg .vh-scope::before{opacity:.6}
html.dlg .vh-dock{background:var(--dlg-spec) padding-box,linear-gradient(170deg,rgba(255,255,255,.92),rgba(255,255,255,.70)) padding-box,var(--dlg-rim) border-box!important;
  border:1.5px solid transparent!important;box-shadow:var(--dlg-stack)!important;
  -webkit-backdrop-filter:var(--dlg-blur);backdrop-filter:var(--dlg-blur)}
html.dlg .vh.is-chat .vh-dockwrap{background:linear-gradient(180deg,rgba(236,239,245,0) 0%,rgba(236,239,245,.92) 34%,rgba(236,239,245,.96) 100%)!important}
/* Veeha thinking: the reference pill, small */
html.dlg .vh-think{height:auto;padding:9px 18px 9px 10px;gap:4px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.2) 60%) padding-box,var(--dlg-iri) padding-box,linear-gradient(100deg,#5FDDEA,#fff 40%,#FFB894) border-box;
  border:1.5px solid transparent;box-shadow:inset 0 1px 0 #fff,0 3px 0 -1px rgba(255,255,255,.8),0 4px 0 -1px rgba(160,140,190,.35),0 14px 22px -14px rgba(232,64,127,.5)}
html.dlg .vh-think i{width:5px;height:5px;background:#13223A}
html.dlg .vh-think::after{content:"Veeha is thinking";margin-left:8px;font:700 13.5px/1 Lato,system-ui,sans-serif;
  background:linear-gradient(90deg,#13223A 0%,#13223A 35%,#C72E68 50%,#13223A 65%,#13223A 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:dlgShine 1.8s linear infinite}
html.dlg .dlp44-card,html.dlg .dlp46-step,html.dlg .dlp46-pcard,html.dlg .dlp46-quote,html.dlg .dlp46-ptable,html.dlg .dlp44-stats>div,html.dlg .dlg-auto{
  background:var(--dlo-glass)!important;border:1.5px solid transparent!important;box-shadow:var(--dlg-stack-sm)!important;
  -webkit-backdrop-filter:var(--dlg-blur);backdrop-filter:var(--dlg-blur)}

@media (prefers-reduced-transparency:reduce){
  html.dlg{--dlg-face:linear-gradient(#fff,#fff)}
  .dlg-ask{background:#fff!important}
}
@media print{#dlg-canvas{display:none}}

/* final CTA card: it ran edge to edge with its logo shape cut by the viewport */
html.dlg.dlo-home [data-dlp-ctaband]{margin-inline:clamp(.75rem,3vw,3rem)!important;overflow:hidden!important}
html.dlg.dlo-on.dlg-solid header.fixed:before{opacity:1}
html.dlg.dlg-solid header[data-dlp-glass] [data-dlp-nf-row]>a:first-child img{filter:none!important;content:url(/brand/dleaps-logo.png)}
html.dlg.dlg-solid nav[data-dlp-nf-tone="light"] .dlp-nf-face{color:#2c3646!important;text-shadow:none!important}
html.dlg .dlp44-stats>div{border-radius:22px!important}
html.dlg .dlp46-quote input,html.dlg .dlp46-quote select{background:#fff}

/* Vastu (/vastu/) and Veeha (/dleaps-ai/): their own stylesheet, same glass */
html.dlg:not(.dlo-on) .card,html.dlg:not(.dlo-on) .leadcard,html.dlg:not(.dlo-on) .composer{
  background:var(--dlo-glass)!important;border:1.5px solid transparent!important;box-shadow:var(--dlg-stack-sm)!important;
  -webkit-backdrop-filter:var(--dlg-blur);backdrop-filter:var(--dlg-blur)}
html.dlg:not(.dlo-on) .pill{background:linear-gradient(170deg,rgba(255,255,255,.9),rgba(255,255,255,.6)) padding-box,var(--dlg-rim) border-box!important;
  border:1.5px solid transparent!important;box-shadow:var(--dlg-stack-sm)}
html.dlg:not(.dlo-on) .hero-fin{background:transparent!important}
html.dlg:not(.dlo-on) .tool-light{background:rgba(255,255,255,.42)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html.dlg:not(.dlo-on) .composer-wrap{background:linear-gradient(180deg,rgba(236,239,245,0),rgba(236,239,245,.94) 30%)!important;box-shadow:none!important}
html.dlg .vh-chip,html.dlg [id=vhChips] button{background:linear-gradient(170deg,rgba(255,255,255,.9),rgba(255,255,255,.6)) padding-box,var(--dlg-rim) border-box!important;
  border:1.5px solid transparent!important;box-shadow:inset 0 1px 0 #fff,0 3px 0 -1px rgba(255,255,255,.8),0 4px 0 -1px rgba(150,170,200,.3),0 10px 18px -12px rgba(36,48,88,.4)!important}

/* ======================================================================
 * r95 (owner direction, 19 Oct 2026)
 * ==================================================================== */

/* ---- Why D'leaps: the outer organic shape and the illustration only.
   The inner blob behind each illustration and the coloured dot are gone. */
html.dlg.dlo-home #why .grid>.group>div:first-child{background:transparent!important;border-radius:0!important;margin:0 4%;overflow:visible!important}
html.dlg.dlo-home #why .grid>.group>div:first-child>div{background:transparent!important}
html.dlg.dlo-home #why .grid>.group>div:first-child rect[width="100%"],
html.dlg.dlo-home #why .grid>.group>div:first-child svg>rect:first-child{fill:transparent!important}
html.dlg.dlo-home #why .grid>.group:before{display:none!important;content:none!important}

/* ---- Pick your service: light organic stage instead of the dark slab ---- */
html.dlg.dlo-home #pick-service[data-dlp-cf="on"],html.dlg.dlo-home #pick-service{
  background:
    radial-gradient(60% 70% at 8% 10%,rgba(77,217,232,.30),transparent 70%),
    radial-gradient(55% 65% at 96% 92%,rgba(232,64,127,.18),transparent 70%),
    radial-gradient(40% 50% at 70% 0%,rgba(255,184,148,.20),transparent 70%),
    linear-gradient(165deg,#F6F8FB 0%,#EAF6F8 48%,#F8EEF3 100%)!important;
  color:var(--dlg-navy)!important;
  border-radius:clamp(36px,5vw,72px) clamp(36px,5vw,72px) clamp(36px,5vw,72px) clamp(90px,12vw,180px)!important;
  box-shadow:inset 0 1.5px 0 #fff,0 4px 0 -1px rgba(255,255,255,.8),0 5px 0 -1px rgba(150,170,200,.32),
    0 10px 0 -3px rgba(255,255,255,.55),0 11px 0 -3px rgba(150,170,200,.22),0 50px 80px -44px rgba(36,48,88,.40)!important}
html.dlg.dlo-home #pick-service:after{background:linear-gradient(120deg,rgba(77,217,232,.32),rgba(77,217,232,0))!important;opacity:.9}
html.dlg.dlo-home #pick-service h2,html.dlg.dlo-home #pick-service [data-testid="home-motto"]{color:var(--dlg-navy)!important}
html.dlg.dlo-home #pick-service .container-d p,html.dlg.dlo-home #pick-service .container-d p *{color:#4A5B6C!important}
html.dlg.dlo-home #pick-service .container-d [class*="uppercase"],html.dlg.dlo-home #pick-service .eyebrow{color:#0B7480!important}
/* the photo glow behind the fan, brightened instead of crushed to black */
html.dlg.dlo-home #pick-service .dlpcf-amb img{filter:brightness(1.12) saturate(.9) blur(44px)!important;opacity:0}
html.dlg.dlo-home #pick-service .dlpcf-amb img.on{opacity:.32!important}
html.dlg.dlo-home #pick-service .dlpcf-amb:after{background:radial-gradient(ellipse at 50% 45%,rgba(246,248,251,0) 0%,rgba(246,248,251,.75) 75%)!important}
/* cards keep their photographs; they now float as laminated slabs */
html.dlg.dlo-home #pick-service .dlpcf-card{border-radius:26px 26px 26px 64px!important;border:1.5px solid rgba(255,255,255,.9)!important;
  box-shadow:0 4px 0 -1px rgba(255,255,255,.85),0 5px 0 -1px rgba(150,170,200,.35),0 9px 0 -3px rgba(255,255,255,.6),0 34px 60px -30px rgba(36,48,88,.55)!important}
html.dlg.dlo-home #pick-service .dlpcf-btn{background:linear-gradient(170deg,rgba(255,255,255,.92),rgba(255,255,255,.62)) padding-box,var(--dlg-rim) border-box!important;
  border:1.5px solid transparent!important;color:var(--dlg-navy)!important;box-shadow:var(--dlg-stack-sm)!important}
html.dlg.dlo-home #pick-service .dlpcf-btn svg{stroke:currentColor;color:var(--dlg-navy)}
html.dlg.dlo-home #pick-service .dlpcf-dot i{background:rgba(19,34,58,.22)!important}
html.dlg.dlo-home #pick-service .dlpcf-dot[aria-current="true"] i{background:linear-gradient(90deg,#0B7480,#C72E68)!important;box-shadow:none!important}

/* ---- mega menus: a glass sheet in the logo's organic shape ---- */
html.dlg header .dl-sheet{position:relative;isolation:isolate;
  background:var(--dlg-spec) padding-box,linear-gradient(165deg,rgba(255,255,255,.95) 0%,rgba(248,250,252,.86) 55%,rgba(255,255,255,.92) 100%) padding-box,var(--dlg-rim) border-box!important;
  border:1.5px solid transparent!important;
  border-radius:28px 88px 40px 40px!important;
  -webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
  box-shadow:inset 0 1px 0 #fff,0 4px 0 -1px rgba(255,255,255,.85),0 5px 0 -1px rgba(150,170,200,.30),
    0 10px 0 -3px rgba(255,255,255,.6),0 11px 0 -3px rgba(150,170,200,.2),0 46px 80px -36px rgba(36,48,88,.45),0 26px 50px -34px rgba(232,64,127,.30)!important}
/* two marks of the D drift behind the content: turquoise top right, magenta bottom left */
html.dlg header .dl-sheet:before,html.dlg header .dl-sheet:after{content:"";position:absolute;z-index:-1;pointer-events:none;aspect-ratio:613/829;
  -webkit-mask:var(--dlo-d) center/100% 100% no-repeat;mask:var(--dlo-d) center/100% 100% no-repeat}
html.dlg header .dl-sheet:before{width:clamp(160px,22%,260px);right:-3%;top:-18%;transform:rotate(-24deg);
  background:linear-gradient(170deg,rgba(77,217,232,.42),rgba(189,242,247,.04))}
html.dlg header .dl-sheet:after{width:clamp(110px,15%,180px);left:-2%;bottom:-26%;transform:rotate(156deg);
  background:linear-gradient(170deg,rgba(232,64,127,.26),rgba(255,184,148,.04))}
html.dlg header .dl-sheet [class*="bg-[hsl(var(--paper))]"],html.dlg header .dl-sheet [class*="bg-[hsl(var(--paper-2))]"]{background-color:transparent!important}
html.dlg header .dl-sheet .rounded-lg.overflow-hidden,html.dlg header .dl-sheet [class*="h-[78px]"]{border-radius:18px 18px 18px 44px!important;
  box-shadow:0 3px 0 -1px rgba(255,255,255,.85),0 4px 0 -1px rgba(150,170,200,.3),0 14px 22px -14px rgba(36,48,88,.45);background:#eef3f6!important}
html.dlg header .dl-sheet .mt-5.rounded-xl{background:linear-gradient(170deg,rgba(255,255,255,.85),rgba(255,255,255,.5)) padding-box,var(--dlg-rim) border-box!important;
  border:1.5px solid transparent!important;border-radius:999px!important;box-shadow:var(--dlg-stack-sm)}
html.dlg header .dl-sheet>div:last-child.border-t{border-top-color:rgba(19,34,58,.06)!important;padding-left:34px!important;padding-right:34px!important}
html.dlg header .dl-sheet [class*="w-[168px]"]{border-radius:16px 16px 16px 36px!important;border-color:rgba(255,255,255,.95)!important;box-shadow:var(--dlg-stack-sm)!important}
@media (prefers-reduced-transparency:reduce){html.dlg header .dl-sheet{background:#fff!important}}

/* ---- Veeha: the profile card that greets visitors (built in the chat's
   shadow root by dleaps-glass.js) - styles live in CHAT_CSS there. ---- */
/* on a light stage the dark-room dimming read as a grey wash */
html.dlg.dlo-home #pick-service .dlpcf-card[data-pos="1"],html.dlg.dlo-home #pick-service .dlpcf-card[data-pos="-1"]{opacity:1!important;filter:saturate(.9) brightness(.97)!important}
html.dlg.dlo-home #pick-service .dlpcf-card[data-pos="2"],html.dlg.dlo-home #pick-service .dlpcf-card[data-pos="-2"]{opacity:.85!important;filter:saturate(.8) brightness(.95) blur(1px)!important}


/* ======================================================================
 * r96 "Clean Glass" (owner direction, 19 Oct 2026)
 * After the liquid-glass component he supplied: clear glass, a white
 * overlay, two inset highlights, a short soft shadow, springy motion and a
 * light refraction filter. No coloured rims, no stacked sheets, no tints.
 * Every surface reads its look from these tokens, so the whole site turns
 * clean in one place. (The Veeha card keeps its own reference look.)
 * ==================================================================== */
html.dlg{
  --dlg-canvas:#EEF1F5;
  --dlg-dot:rgba(28,40,72,.11);
  --dlg-face:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.50));
  --dlg-rim:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.55));
  --dlg-spec:radial-gradient(360px circle at var(--mx,30%) var(--my,-20%),rgba(255,255,255,.45),rgba(255,255,255,0) 60%);
  --dlg-hi:inset 2px 2px 1px 0 rgba(255,255,255,.55),inset -1px -1px 1px 1px rgba(255,255,255,.5);
  --dlg-stack:inset 2px 2px 1px 0 rgba(255,255,255,.55),inset -1px -1px 1px 1px rgba(255,255,255,.5),
    0 6px 6px rgba(19,34,58,.06),0 0 20px rgba(19,34,58,.05),0 24px 48px -28px rgba(19,34,58,.28);
  --dlg-stack-sm:inset 2px 2px 1px 0 rgba(255,255,255,.55),inset -1px -1px 1px 1px rgba(255,255,255,.5),
    0 4px 6px rgba(19,34,58,.06),0 0 14px rgba(19,34,58,.04);
  --dlg-blur:blur(18px) saturate(160%);
  --dlg-spring:cubic-bezier(.175,.885,.32,2.2);
  --dlg-pri:linear-gradient(180deg,#7DE6F0 0%,#4DD9E8 100%);
  --dlo-shadow:var(--dlg-stack);
}
html.dlg #dlo-aura{background:radial-gradient(1100px 680px at 85% -15%,rgba(77,217,232,.14),transparent 62%),radial-gradient(900px 620px at -10% 50%,rgba(232,64,127,.06),transparent 62%),var(--dlg-canvas)}
html.dlg #dlo-aura i{opacity:.32}
#dlg-canvas:before{opacity:.6}

/* primary buttons: clean turquoise glass, springy */
html.dlg .btn-primary-d,html.dlg .dlo-btn-pri,html.dlg .dlpu-cta,html.dlg .dlpcf-cta.p,html.dlg .cp-login,html.dlg #dlc-footer .dlc-wa,.dlg-btn{
  background:var(--dlg-pri)!important;background-size:auto!important;color:#13223A!important;text-shadow:none;
  box-shadow:inset 2px 2px 1px 0 rgba(255,255,255,.55),inset -1px -1px 1px 1px rgba(255,255,255,.35),0 6px 6px rgba(11,116,128,.14),0 0 20px rgba(11,116,128,.10)!important;
  transition:transform .6s var(--dlg-spring),box-shadow .3s ease!important}
html.dlg .btn-primary-d:hover,html.dlg .dlo-btn-pri:hover,html.dlg .dlpu-cta:hover,html.dlg .dlpcf-cta.p:hover,html.dlg .cp-login:hover,html.dlg #dlc-footer .dlc-wa:hover,.dlg-btn:hover{transform:scale(1.04)}
html.dlg .btn-primary-d:active,html.dlg .dlo-btn-pri:active,html.dlg .dlpu-cta:active{transform:scale(.97)}
html.dlg .dlpu-card[data-k=vastu] .dlpu-cta{background:linear-gradient(180deg,#E8407F,#C72E68)!important;color:#fff!important}
html.dlg .dlo-btn-ghost,html.dlg .dlpu-talk,html.dlg .dlp-ig-dm,html.dlg .btn-outline-d,.dlg-btn-ghost{
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.5)) padding-box,var(--dlg-rim) border-box!important;
  box-shadow:var(--dlg-stack-sm)!important;transition:transform .6s var(--dlg-spring),background .3s!important}
html.dlg .dlo-btn-ghost:hover,html.dlg .btn-outline-d:hover{transform:scale(1.04)}
html.dlg #dlo-hero .dlo-badge{box-shadow:inset 2px 2px 1px 0 rgba(255,255,255,.45),0 6px 6px rgba(199,46,104,.18),0 0 20px rgba(199,46,104,.12)}

/* ---------------------------------------------------------------- header */
/* one clean pill: white glass over light pages, clear glass over a photo */
html.dlg nav[data-dlp-nf]::before{
  background:linear-gradient(180deg,rgba(255,255,255,.70),rgba(255,255,255,.52)) padding-box,var(--dlg-rim) border-box!important;
  box-shadow:inset 2px 2px 1px 0 rgba(255,255,255,.6),inset -1px -1px 1px 1px rgba(255,255,255,.5),0 6px 6px rgba(19,34,58,.07),0 0 20px rgba(19,34,58,.06)!important;
  -webkit-backdrop-filter:blur(16px) saturate(170%)!important;backdrop-filter:blur(16px) saturate(170%)!important}
html.dlg:not(.dlg-solid) header[data-dlp-glass="dark"] nav[data-dlp-nf]::before,
html.dlg:not(.dlg-solid) nav[data-dlp-nf][data-dlp-nf-tone="dark"]::before{
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.10)) padding-box,linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.18)) border-box!important;
  box-shadow:inset 2px 2px 1px 0 rgba(255,255,255,.35),inset -1px -1px 1px 1px rgba(255,255,255,.22),0 6px 6px rgba(0,0,0,.18),0 0 20px rgba(0,0,0,.10)!important}
html.dlg:not(.dlg-solid) nav[data-dlp-nf][data-dlp-nf-tone="dark"] .dlp-nf-face{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.35)!important}
html.dlg nav[data-dlp-nf][data-dlp-nf-tone="light"] .dlp-nf-face,html.dlg.dlg-solid nav[data-dlp-nf] .dlp-nf-face{color:#2c3646!important;text-shadow:none!important}
/* the round chat button beside the CTA */
html.dlg header [data-dlp-nf-row]>div>a.rounded-full,html.dlg header [data-dlp-nf-row]>div>a[data-testid="navbar-whatsapp-link"]{
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.5)) padding-box,var(--dlg-rim) border-box!important;
  border:1.5px solid transparent!important;color:#13223A!important;box-shadow:var(--dlg-stack-sm)!important;width:44px!important;height:44px!important}
html.dlg:not(.dlg-solid) header[data-dlp-glass="dark"] [data-dlp-nf-row]>div>a.rounded-full{
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.10)) padding-box,linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.18)) border-box!important;color:#fff!important}
html.dlg header [data-dlp-nf-row]>div>a.rounded-full svg{color:currentColor;stroke:currentColor}
/* the CTA is the same clean turquoise on every page (it went magenta over photos) */
html.dlg header .btn-primary-d{background:var(--dlg-pri)!important;color:#13223A!important;border:0!important}
/* once scrolled: a clean frosted sheet, colour logo, ink labels */
html.dlg.dlo-on header.fixed:before{background:linear-gradient(180deg,rgba(238,241,245,.86),rgba(238,241,245,.64))!important;box-shadow:0 1px 0 rgba(255,255,255,.8),0 8px 24px -18px rgba(19,34,58,.35)!important}
html.dlg.dlg-solid header a[data-testid="navbar-logo-link"] img{filter:none!important;content:url(/brand/dleaps-logo.png)}
html.dlg.dlg-solid header [data-dlp-nf-row]>div>a.rounded-full{color:#13223A!important}

/* ------------------------------------------------------- blog / article */
/* the article body is its own clean glass sheet with real padding (r95's
   mega-menu rule reached it because the bundle reuses .dl-sheet there) */
html.dlg main article.dl-sheet{background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.66))!important;background-size:auto!important;
  border:1px solid rgba(255,255,255,.9)!important;border-radius:28px!important;box-shadow:var(--dlg-stack)!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:clamp(20px,4vw,52px)!important;overflow:visible!important}
html.dlg main article.dl-sheet .prose-d{max-width:68ch}
html.dlg main article.dl-sheet .prose-d img,html.dlg main article.dl-sheet figure img{border-radius:20px}
html.dlg main article.dl-sheet table{border-radius:18px;overflow:hidden}
@media (max-width:640px){html.dlg main article.dl-sheet{border-radius:22px!important;padding:18px 16px!important}}

/* ------------------------------------------------------- Ask Veeha bar */
html.dlg .dlg-ask{transform:none!important;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.52)) padding-box,var(--dlg-rim) border-box!important;
  box-shadow:inset 2px 2px 1px 0 rgba(255,255,255,.6),inset -1px -1px 1px 1px rgba(255,255,255,.5),0 6px 6px rgba(19,34,58,.07),0 0 20px rgba(19,34,58,.06),0 30px 60px -36px rgba(19,34,58,.35)!important;
  transition:transform .7s var(--dlg-spring),box-shadow .3s!important}
html.dlg .dlg-ask:hover{transform:scale(1.012)!important}
html.dlg .dlg-ask .orb{background:rgba(255,255,255,.85);box-shadow:var(--dlg-hi),0 4px 8px rgba(19,34,58,.08)}
html.dlg .dlg-ask .go{background:var(--dlg-pri);color:#13223A;box-shadow:inset 2px 2px 1px 0 rgba(255,255,255,.55),0 6px 6px rgba(11,116,128,.14)}
html.dlg .dlg-chips button,html.dlg .dlo-est button{background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.5)) padding-box,var(--dlg-rim) border-box!important;
  box-shadow:var(--dlg-stack-sm)!important;transition:transform .6s var(--dlg-spring)!important}
html.dlg .dlo-est button[aria-pressed=true]{background:#13223A!important;color:#fff!important}
html.dlg .dlg-chips button:hover{transform:scale(1.06)}
html.dlg .vh-think{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.6))!important;border:1px solid #fff!important;box-shadow:var(--dlg-stack-sm)!important}

/* the refraction filter (desktop, motion allowed) - the same SVG filter as
   the supplied component, on the header pill and the Ask bar only */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html.dlg.dlg-liquid .dlg-ask:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);filter:url(#dlg-glass-distortion)}
  html.dlg.dlg-liquid .dlg-ask{isolation:isolate}
}
/* pick-service and mega menu: drop the r94 coloured rims */
html.dlg.dlo-home #pick-service{box-shadow:var(--dlg-stack)!important}
html.dlg.dlo-home #pick-service .dlpcf-card{box-shadow:0 6px 6px rgba(19,34,58,.10),0 0 20px rgba(19,34,58,.08),0 30px 60px -30px rgba(19,34,58,.45)!important}
html.dlg header .dl-sheet{box-shadow:var(--dlg-stack)!important}
@media (max-width:1023px){html.dlg #dlp-tabs{box-shadow:var(--dlg-stack)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.62)) padding-box,var(--dlg-rim) border-box!important}}
/* the magazine article paints its own dark-hero header (.dla-navdark) with
   a magenta CTA; keep the one clean turquoise CTA site-wide */
html.dlg header[data-testid="main-navbar"].dla-navdark [data-testid="navbar-book-consultation-button"]{
  background:var(--dlg-pri)!important;border-color:transparent!important;color:#13223A!important;text-shadow:none!important}
html.dlg header[data-testid="main-navbar"].dla-navdark [data-testid="navbar-book-consultation-button"] *{color:#13223A!important}
html.dlg header[data-testid="main-navbar"].dla-navdark [data-dlp-nf-row]>div>a.rounded-full{
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.10)) padding-box,linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.18)) border-box!important;color:#fff!important}
html.dlg header[data-testid="main-navbar"].dla-navdark nav[data-dlp-nf]::before{
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.10)) padding-box,linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.18)) border-box!important}
html.dlg header[data-testid="main-navbar"].dla-navdark nav[data-dlp-nf] .dlp-nf-face{color:#fff!important}
html.dlg header[data-testid="main-navbar"].dla-navdark nav a,html.dlg header[data-testid="main-navbar"].dla-navdark nav span{text-shadow:none!important}