/* DPL public site - modern layer, from approved mockup v3 "Layered Depth" (T-1470).
   Loads AFTER the live site's own stylesheets (static/css/public-site.css). Presentation and motion only:
   no wording, layout order, colours, fonts or images are changed. Dark equivalents are in the last block (:root[data-theme="dark"]).
   Parallax and scroll-linked values come from js/public-modern.js as --py (px offset from viewport centre).
   LEGACY-SKIN PAGES (/ce /programs /schedules, signed-in /faq and /faq/<slug>: body.pub-body, main.css + public.css loaded):
   the same layer loads there. A rule that would change their layout or sizing through a selector they share (.btn, .faq-list)
   is wrapped in :where(body:not(.pub-body)) (zero specificity, so nothing else in the cascade moves) or has a .pub-body
   counterpart that keeps the size. Everything about the chrome and the motion applies to them unchanged.
   Every animation below is switched off by prefers-reduced-motion and nothing is hidden without JS. */

:root{
  --v3-ease:cubic-bezier(.22,.8,.26,1);
  --v3-sheet:28px;            /* radius of the stacked "sheets" */
  --v3-r:var(--pub-radius-box); /* radius of cards */
  --v3-glass:rgba(255,255,255,.80);
  --v3-glass-line:rgba(255,255,255,.65);
  --v3-shadow-1:0 1px 2px rgba(23,60,71,.08),0 10px 24px -14px rgba(23,60,71,.28);
  --v3-shadow-2:0 2px 4px rgba(23,60,71,.08),0 28px 44px -18px rgba(23,60,71,.38);
}

/* ---------- page entrance + leave ---------- */
@keyframes v3-page-in{from{opacity:0}to{opacity:1}}
body{animation:v3-page-in .6s ease backwards}
body.v3-leaving{opacity:0;transition:opacity .22s ease}

/* ---------- scroll progress (scroll-linked) ---------- */
.v3-progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:260;pointer-events:none;
  background:linear-gradient(90deg,var(--pub-c-accent),#ffb266);transform-origin:0 50%;transform:scaleX(var(--p,0));
  box-shadow:0 0 10px rgba(232,113,0,.55)}

/* ---------- sticky glass header that condenses ---------- */
.site-header{background:transparent;transition:box-shadow .35s var(--v3-ease)}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(232,227,218,.80);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);transition:background .35s}
.site-header.is-condensed{box-shadow:0 10px 30px -10px rgba(23,60,71,.35)}
.site-logo{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.site-header.is-condensed::before{background:rgba(232,227,218,.90)}
.site-header__bar{transition:height .35s var(--v3-ease)}
.site-logo img{transition:height .35s var(--v3-ease)}
.site-header.is-condensed .site-header__bar{height:56px}
.site-header.is-condensed .site-logo img{height:38px}
@media (min-width:1080px){
  .site-header.is-condensed .site-header__bar{height:62px}
  .site-header.is-condensed .site-logo img{height:46px}
}
.nav-link,.nav-trigger{position:relative;border-radius:var(--pub-radius);transition:background .2s,transform .2s var(--v3-ease)}
.nav-link:hover,.nav-trigger:hover{text-decoration:none;background:rgba(255,255,255,.55)}
.nav-link.active{text-decoration:none}
.nav-link::after,.nav-trigger::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;background:var(--pub-c-accent);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--v3-ease)}
.nav-link:hover::after,.nav-trigger:hover::after,.nav-link.active::after{transform:scaleX(1)}
.nav-link.active::after{height:3px}
.nav-chevron{display:inline-block;transition:transform .3s var(--v3-ease)}
/* animated services menu: the live site toggles [hidden]; here the panel eases in instead of popping */
.nav-dropdown__panel{border-radius:var(--v3-r);background:var(--pub-c-card);
  box-shadow:var(--v3-shadow-2);transform-origin:20% 0;
  transition:opacity .25s var(--v3-ease),transform .3s var(--v3-ease),visibility .25s}
.nav-dropdown__panel[hidden]{display:block!important;visibility:hidden;opacity:0;transform:translateY(-10px) scale(.97);pointer-events:none}
.nav-dropdown__panel a{min-height:44px;display:flex;align-items:center;transition:background .2s,padding-left .25s var(--v3-ease)}
.nav-dropdown__panel a:hover,.nav-dropdown__panel a.active{text-decoration:none;padding-left:22px}

/* mobile drawer: slides down, hamburger turns into a close icon, accordion eases open */
#menuBtn span{transition:transform .35s var(--v3-ease),opacity .2s}
#menuBtn:hover span{background:var(--pub-c-heading)}
#menuBtn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#menuBtn[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)}
#menuBtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{position:absolute;top:calc(100% + 2px);left:0;right:0;bottom:auto;height:calc(100vh - 66px);height:calc(100dvh - 66px);
  background:var(--pub-c-card);transition:opacity .3s var(--v3-ease),transform .35s var(--v3-ease),visibility .3s}
.site-header.is-condensed .mobile-nav{height:calc(100vh - 58px);height:calc(100dvh - 58px)}
.mobile-nav[aria-hidden="true"]{display:block;visibility:hidden;opacity:0;transform:translateY(-14px);pointer-events:none}
.mobile-nav a:not(.btn),.mobile-nav button.acc-btn{min-height:52px;transition:background .2s,padding-left .25s var(--v3-ease)}
.mobile-nav a:not(.btn):active,.mobile-nav button.acc-btn:active{background:rgba(40,89,104,.08)}
.mobile-nav .nav-chevron{transition:transform .3s var(--v3-ease)}
.mobile-nav .acc-btn[aria-expanded="true"] .nav-chevron{transform:rotate(180deg)}
.mobile-nav .acc-panel{max-height:520px;overflow:hidden;transition:max-height .45s var(--v3-ease),opacity .3s,visibility .3s}
.mobile-nav .acc-panel[hidden]{display:block!important;max-height:0;opacity:0;visibility:hidden}
.mobile-nav.v3-stagger a,.mobile-nav.v3-stagger button{opacity:1}

/* ---------- buttons: lift, press, focus (T-1800: the subtler "lift" hover -- 2 px up, a soft shadow, a little brighter; no sheen, no lean) ---------- */
.btn{position:relative;isolation:isolate;
  transition:translate .2s ease-in-out,scale .2s var(--v3-ease),box-shadow .2s ease-in-out,filter .2s ease-in-out,background .2s,border-color .2s,color .2s}
:where(body:not(.pub-body)) .btn{overflow:hidden;min-height:44px}
/* legacy pages: their buttons keep the height public-site.css gives them, and clip the sheen without overflow:hidden (which would move an inline-block button's baseline) */
.pub-body .btn{overflow:clip}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);translate:-130% 0;transition:translate .7s var(--v3-ease)}
.btn:hover,.btn:focus-visible{filter:brightness(1.1)}
@media (prefers-reduced-motion:no-preference){.btn:hover,.btn:focus-visible{translate:0 -2px}}
.btn:hover{box-shadow:0 12px 12px rgba(0,0,0,.2)}
.btn:active{translate:0 0;scale:.96;box-shadow:0 2px 6px rgba(0,0,0,.2);transition-duration:.08s}
.btn:focus-visible,.text-link:focus-visible,.nav-link:focus-visible,.nav-trigger:focus-visible,#menuBtn:focus-visible,.faq-q button:focus-visible{
  outline:3px solid var(--pub-c-focus);outline-offset:3px;box-shadow:0 0 0 7px rgba(232,113,0,.45)}
.btn:focus-visible{box-shadow:0 0 0 7px rgba(232,113,0,.45),0 12px 12px rgba(0,0,0,.2)}
.band .btn:focus-visible,.cta-band .btn:focus-visible{outline-color:#fff;box-shadow:0 0 0 7px rgba(232,113,0,.6),0 12px 12px rgba(0,0,0,.2)}
a:focus-visible{outline:3px solid var(--pub-c-focus);outline-offset:3px;border-radius:3px}
.band a:focus-visible,.site-footer a:focus-visible{outline-color:#fff}
.text-link{position:relative;display:inline-flex;align-items:center;min-height:44px;transition:color .2s,translate .3s var(--v3-ease)}
.text-link:hover{text-decoration-thickness:2px;translate:4px 0}
.card--format .text-link{padding-top:0;min-height:44px;margin-top:auto}

/* ---------- sections keep the live flat layout ---------- */
.hero,.section,.band{position:relative}
.hero,.section{background:var(--pub-c-bg)}
.site-footer__links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 6px;position:relative}
.site-footer a[href^="tel"],.site-footer__legal a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- hero: layered backdrop that drifts at different speeds ---------- */
.hero{overflow:hidden;isolation:isolate}
.hero .container{position:relative;z-index:2}
.hero .container>h1,.hero .container>.lead,.hero .container>.btn{animation:v3-rise .95s var(--v3-ease) both}
.hero .container>.lead{animation-delay:.14s}
.hero .container>.btn{animation-delay:.28s}
@keyframes v3-rise{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
.hero .container{translate:0 calc(clamp(-500px,var(--py,0px),500px) * .05)}

/* bands stay solid black like live; cards keep the live white */
.band .logo-tile{background:transparent}

/* ---------- cards: depth on hover, pointer tilt, soft spotlight ---------- */
.card,.testimonial-card,.card--format{position:relative;border-radius:var(--v3-r);
  transform:perspective(900px) translateY(var(--lift,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .35s var(--v3-ease),box-shadow .35s var(--v3-ease),background .3s}
.card::after,.testimonial-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(232,113,0,.16),transparent 62%)}
.card:hover::after,.testimonial-card:hover::after{opacity:1}
.card:hover,.testimonial-card:hover{--lift:-8px;box-shadow:var(--v3-shadow-2)}
.band .card:hover{box-shadow:0 30px 50px -20px rgba(0,0,0,.85),inset 0 1px 0 #fff}
.card--format{border-radius:var(--v3-r)}
/* T-1801: the six boxes in #formats keep the rise, the shadow and the background change on hover; no tilt, no colour that follows the pointer */
#formats .card--format{transform:translateY(var(--lift,0px))}
#formats .card--format::after{display:none}
.card--format:hover{--lift:-8px;background:var(--pub-c-card);box-shadow:var(--v3-shadow-2)}
.testimonials .testimonial-card{box-shadow:none}
.card--logo img{transition:scale .4s var(--v3-ease)}
.card--logo:hover img{scale:1.06}
.issuer-grid li{transition:background .3s}
.issuer-grid .logo-tile img{transition:scale .4s var(--v3-ease),filter .3s}
.issuer-grid li:hover .logo-tile img{scale:1.08}
.issuer-grid li:hover{background:#fff;position:relative;z-index:1;box-shadow:0 12px 26px -12px rgba(23,60,71,.4)}
.issuer-grid a.logo-tile:hover{outline-offset:-3px}

/* ---------- photos: frame with back plate, glare, parallax inside ---------- */
.depth-wrap{position:relative;isolation:isolate}
.depth-frame{position:relative;overflow:hidden;border-radius:var(--v3-r);aspect-ratio:1600/1067;background:var(--pub-c-tint);
  box-shadow:var(--v3-shadow-2);transition:transform .5s var(--v3-ease),box-shadow .5s var(--v3-ease)}
.depth-frame img.photo{position:absolute;left:0;top:-9%;width:100%;height:118%;max-width:none;object-fit:cover;border-radius:0;
  transform:translate3d(0,clamp(-34px,calc(var(--py,0px) * .055),34px),0) scale(1.04);transition:scale .8s var(--v3-ease)}
.depth-frame::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,.34),rgba(255,255,255,0) 34%,rgba(255,255,255,0) 66%,rgba(255,255,255,.16));
  background-size:100% 240%;background-position:0 calc(50% + var(--py,0px) * .08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.depth-wrap:hover .depth-frame{transform:translateY(-6px)}

/* ---------- service + FAQ pages: faint photo behind, panels as glass ---------- */
.sidebar-box{border-radius:var(--v3-r);overflow:hidden}
.resource-links li{display:flex;align-items:center;min-height:44px}
.resource-links a{display:inline-flex;align-items:center;min-height:44px;transition:translate .3s var(--v3-ease)}
.resource-links a:hover{text-decoration-thickness:2px;translate:4px 0}
.benefits li{transition:translate .3s var(--v3-ease)}
.benefits li:hover{translate:6px 0}
.benefits li::before{transition:color .3s,scale .3s var(--v3-ease)}
.benefits li:hover::before{color:var(--pub-c-accent);scale:1.5}
.service-cta .btn{min-width:0}
.service-top .container>.eyebrow,.service-top .container>h1,.service-top .container>p,
.faq-page .container>h1{animation:v3-rise .9s var(--v3-ease) both}
.service-top .container>h1{animation-delay:.1s}
.service-top .container>p{animation-delay:.2s}

/* region map: lifts out of the glass panel on hover */
.region-map .rm-region{transition:opacity .3s var(--v3-ease),translate .35s var(--v3-ease)}
.region-map .rm-region.is-active{translate:0 -4px}
.region-map__full{width:44px;height:44px}

/* ---------- FAQ accordion (built by JS; without JS every answer is simply shown) ---------- */
:where(body:not(.pub-body)) .faq-list{max-width:none}
.v3-faq .faq-item.is-open .faq-icon{box-shadow:0 0 0 4px rgba(232,113,0,.25)}
.v3-faq h2.faq-q{margin:0}
.v3-faq .faq-q button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:44px;
  padding:6px 0;cursor:pointer;font:inherit;color:inherit;border-radius:8px}
.v3-faq .faq-q button:hover .faq-icon{border-color:var(--pub-c-accent);scale:1.1}
.v3-faq .faq-item .faq-q button:focus-visible{outline:3px solid var(--pub-c-focus);outline-offset:4px;box-shadow:0 0 0 7px rgba(232,113,0,.45)}
.faq-icon{position:relative;flex:none;width:44px;height:44px;border-radius:50%;background:var(--pub-c-band-light);border:1px solid var(--pub-c-border-soft);
  transition:background .3s,transform .45s var(--v3-ease),border-color .3s,scale .3s var(--v3-ease)}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:var(--pub-c-ink);border-radius:2px;transition:transform .45s var(--v3-ease)}
.faq-icon::after{transform:rotate(90deg)}
.is-open .faq-icon{background:var(--pub-c-accent);border-color:var(--pub-c-accent);transform:rotate(180deg)}
.is-open .faq-icon::before,.is-open .faq-icon::after{background:var(--pub-c-on-accent)}
.is-open .faq-icon::after{transform:rotate(0)}
.faq-panel{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s var(--v3-ease),opacity .4s,visibility .4s}
.faq-panel[hidden]{display:grid!important;grid-template-rows:0fr;opacity:0;visibility:hidden}
.faq-panel__inner{overflow:hidden;min-height:0}
.faq-panel__inner>p{padding:0}
.faq-panel__inner>p:last-child{padding-bottom:4px}
.faq-panel__inner>p+p{margin-top:12px}
.v3-faq .faq-item.is-open .faq-panel__inner>p:first-child{animation:v3-rise .6s var(--v3-ease) both}

/* ---------- legacy-skin pages (body.pub-body): the same motion on their own markup; no size, spacing or wording changes ---------- */
.pub-body .page-hero>div{translate:0 calc(clamp(-500px,var(--py,0px),500px) * .05)}
.pub-body .page-hero>div>*{animation:v3-rise .9s var(--v3-ease) backwards}
.pub-body .page-hero>div>:nth-child(2){animation-delay:.1s}
.pub-body .page-hero>div>:nth-child(3){animation-delay:.2s}
.pub-body .page-hero>div>:nth-child(4){animation-delay:.3s}
.pub-body .ce-format-card{position:relative;transition:border-top-color .12s,transform .35s var(--v3-ease),box-shadow .35s var(--v3-ease)}
.pub-body .ce-format-card:hover{transform:translateY(-6px);box-shadow:var(--v3-shadow-2);z-index:1}
/* the signed-in FAQ list keeps its native <details>; it just opens and closes smoothly (browsers without ::details-content open instantly as before) */
.pub-body .faq-item{interpolate-size:allow-keywords;transition:box-shadow .35s var(--v3-ease)}
.pub-body .faq-item:hover{box-shadow:var(--v3-shadow-1)}
.pub-body .faq-item::details-content{block-size:0;overflow:hidden;transition:block-size .5s var(--v3-ease),content-visibility .5s allow-discrete}
.pub-body .faq-item[open]::details-content{block-size:auto}
.pub-body .faq-item[open] .faq-body>*{animation:v3-rise .6s var(--v3-ease) backwards}

/* ---------- scroll reveals (classes added by JS only when motion is allowed) ---------- */
.v3-js .v3-reveal{opacity:0}
.v3-js .v3-reveal.is-in{animation:v3-in .95s var(--v3-ease) both;animation-delay:calc(var(--i,0) * 85ms)}
@keyframes v3-in{from{opacity:0;translate:0 34px;scale:.975}to{opacity:1;translate:0 0;scale:1}}
.v3-js .v3-reveal--side.is-in{animation-name:v3-in-side}
@keyframes v3-in-side{from{opacity:0;translate:-40px 0}to{opacity:1;translate:0 0}}
.v3-count{font-variant-numeric:tabular-nums}
.v3-count[data-n]{font-size:0}
.v3-count[data-n]::after{content:attr(data-n);content:attr(data-n) / "";font-size:var(--v3-fs)}

/* ---------- touch / small screens ---------- */
@media (hover:none){
  .card,.testimonial-card,.card--format{will-change:auto}
  .card:hover,.testimonial-card:hover,.card--format:hover{--lift:0px}
  .pub-body .ce-format-card:hover{transform:none;box-shadow:none}
}

/* ---------- dark theme: the site's own dark tokens (:root[data-theme="dark"] in public-site.css) ---------- */
:root[data-theme="dark"]{
  --v3-glass:rgba(38,35,31,.80);
  --v3-glass-line:rgba(255,255,255,.10);
  --v3-shadow-1:0 1px 2px rgba(0,0,0,.45),0 10px 24px -14px rgba(0,0,0,.7);
  --v3-shadow-2:0 2px 4px rgba(0,0,0,.45),0 28px 44px -18px rgba(0,0,0,.8);
}
:root[data-theme="dark"] .site-header::before{background:rgba(47,43,39,.80)}
:root[data-theme="dark"] .site-header.is-condensed::before{background:rgba(47,43,39,.92)}
:root[data-theme="dark"] .site-header.is-condensed{box-shadow:0 10px 30px -10px rgba(0,0,0,.7)}
:root[data-theme="dark"] .nav-link:hover,:root[data-theme="dark"] .nav-trigger:hover{background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .mobile-nav a:not(.btn):active,:root[data-theme="dark"] .mobile-nav button.acc-btn:active{background:rgba(100,174,196,.14)}
:root[data-theme="dark"] .depth-frame::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
:root[data-theme="dark"] .card::after,:root[data-theme="dark"] .testimonial-card::after{
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(232,113,0,.14),transparent 62%)}
:root[data-theme="dark"] .band .card:hover{box-shadow:0 30px 50px -20px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.18)}
:root[data-theme="dark"] .issuer-grid li:hover{box-shadow:0 12px 26px -12px rgba(0,0,0,.8)}
:root[data-theme="dark"] .faq-icon{background:var(--pub-c-band-light);border-color:var(--pub-c-border)}
:root[data-theme="dark"] .is-open .faq-icon{background:var(--pub-c-accent);border-color:var(--pub-c-accent)}
:root[data-theme="dark"] .btn:hover{box-shadow:0 12px 12px rgba(0,0,0,.5)}

/* ---------- reduced motion: everything is visible and still ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
  .v3-js .v3-reveal{opacity:1!important}
  .card,.testimonial-card,.card--format,.pub-body .ce-format-card{transform:none!important}
  .depth-frame img.photo{transform:scale(1.04)!important}
  .hero .container,.pub-body .page-hero>div{translate:none!important}
  .btn:hover,.btn:focus-visible,.card:hover,.text-link:hover,.resource-links a:hover{translate:none!important}
  .v3-progress{display:none}
}