/* ==========================================================================
   VIA Design - shell stylesheet
   The utility bar, header, drawer, hero and footer are rendered from the
   approved v3 mockup markup, so these rules are that mockup rules verbatim -
   only the custom-property names are namespaced (--via-*) and the selectors
   are scoped to .via-shell so nothing leaks into Elementor.
   Colours and font stacks are injected separately from the Customizer.
   ========================================================================== */
:root{
  --via-pad-x:clamp(20px,5vw,72px);
  --via-max:1320px;
  --via-ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- scoped reset ---------- */
.via-shell{
  font-family:var(--via-font-body);font-weight:300;
  font-size:clamp(15px,1.02vw,16.5px);line-height:1.75;letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;
}
.via-shell,.via-shell *,.via-shell *::before,.via-shell *::after{box-sizing:border-box}
:where(.via-shell p,.via-shell h1,.via-shell h2,.via-shell h3,.via-shell h4,
       .via-shell dl,.via-shell dt,.via-shell dd,.via-shell figure,.via-shell ul,.via-shell li){margin:0;padding:0}
.via-shell h1,.via-shell h2,.via-shell h3,.via-shell h4,.via-shell h5,.via-shell h6{
  font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;
  text-transform:none;font-variation-settings:normal}
:where(.via-shell ul){list-style:none}
.via-shell img{max-width:100%;height:auto;display:block}
.via-shell h1,.via-shell h2,.via-shell h3,.via-shell h4,.via-shell p,.via-shell dt,.via-shell dd,.via-shell li{color:inherit}
.via-shell a{color:inherit;text-decoration:none;box-shadow:none}
.via-shell a:hover,.via-shell a:focus{text-decoration:none}
.via-shell button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-appearance:none;appearance:none;padding:0}
.via-shell ::selection{background:var(--via-gold);color:var(--via-espresso)}
.via-shell :focus-visible{outline:1.5px solid var(--via-gold);outline-offset:4px}

.via-shell .wrap{max-width:var(--via-max);margin:0 auto;padding-inline:var(--via-pad-x)}

/* ---------- type helpers used by the hero ---------- */
.via-shell .u-eyebrow{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--via-golddp);margin:0 0 18px}
.via-shell .u-eyebrow i{font-style:normal;color:var(--via-gold);margin:0 .25em}
.via-shell .u-eyebrow--dk{font-size:11.5px;font-weight:400;letter-spacing:.22em;color:rgba(255,255,255,.9);margin:0 0 26px}
.via-shell .u-eyebrow--dk i{color:var(--via-goldlt)}

/* ---------- buttons ---------- */
.via-shell .btn{
  text-indent:.22em;display:inline-flex;align-items:center;justify-content:center;
  padding:17px 34px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid var(--via-ink);background:var(--via-ink);color:var(--via-cream);
  position:relative;overflow:hidden;transition:color .45s var(--via-ease),border-color .45s var(--via-ease)
}
.via-shell .btn::after{content:"";position:absolute;inset:0;background:var(--via-gold);
  transform:translateY(101%);transition:transform .5s var(--via-ease)}
.via-shell .btn:hover::after{transform:translateY(0)}
.via-shell .btn:hover{color:var(--via-espresso);border-color:var(--via-gold)}
.via-shell .btn > *{position:relative;z-index:1}
.via-shell .btn--gold{background:var(--via-gold);border-color:var(--via-gold);color:var(--via-espresso)}
.via-shell .btn--gold::after{background:var(--via-cream)}
.via-shell .btn--gold:hover{color:var(--via-espresso);border-color:var(--via-cream)}
.via-shell .btn--cream{background:var(--via-cream);border-color:var(--via-cream);color:var(--via-espresso)}
.via-shell .btn--cream::after{background:var(--via-gold)}
.via-shell .btn--cream:hover{color:var(--via-espresso);border-color:var(--via-gold)}

.via-shell .link-arrow{display:inline-flex;align-items:center;gap:11px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;padding-bottom:7px;border-bottom:1px solid var(--via-line);color:var(--via-golddp);
  transition:border-color .4s var(--via-ease)}
.via-shell .link-arrow i{display:block;width:18px;height:1px;background:currentColor;position:relative;transition:width .4s var(--via-ease)}
.via-shell .link-arrow i::after{content:"";position:absolute;right:0;top:-2.5px;width:6px;height:6px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.via-shell .link-arrow:hover{border-color:var(--via-gold)}
.via-shell .link-arrow:hover i{width:28px}

/* ---------- utility bar + black header ---------- */
.util.via-shell{background:#000;color:rgba(250,249,247,.7);font-size:10.5px;letter-spacing:.19em;
  text-transform:uppercase;position:relative;z-index:60}
.util .util__in{display:flex;justify-content:space-between;align-items:center;gap:18px;height:42px}
.util a{transition:color .3s var(--via-ease)}
.util a:hover{color:var(--via-goldlt)}
.util .util__grp{display:flex;align-items:center;gap:26px}
.util .util__dot{width:3px;height:3px;background:var(--via-gold);border-radius:50%;display:inline-block;margin-right:9px;vertical-align:middle}

.hdr.via-shell{position:sticky;top:0;z-index:50;background:var(--via-espresso);color:var(--via-cream);
  border-bottom:1px solid var(--via-linedk);transition:box-shadow .4s var(--via-ease)}
.hdr.is-stuck{box-shadow:0 22px 50px -40px rgba(0,0,0,.9)}
.hdr .hdr__in{display:flex;align-items:center;justify-content:space-between;gap:26px;
  height:clamp(72px,7vw,94px);transition:height .4s var(--via-ease)}
.hdr.is-stuck .hdr__in{height:clamp(64px,5.4vw,76px)}
.hdr .hdr__logo img{width:var(--via-logo-w);height:auto;transition:width .4s var(--via-ease)}
.hdr .nav{display:flex;align-items:center;gap:clamp(16px,2.3vw,34px)}
.hdr .nav__link{font-size:10.5px;letter-spacing:.235em;text-transform:uppercase;position:relative;padding-block:6px;white-space:nowrap;
  color:rgba(250,249,247,.9);transition:color .35s var(--via-ease)}
.hdr .nav__link::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--via-gold);
  transition:width .45s var(--via-ease)}
.hdr .nav__link:hover{color:#fff}
.hdr .nav__link:hover::after,.hdr .nav__link[aria-current="page"]::after{width:100%}
.hdr .nav__link[aria-current="page"]{color:#fff}
.hdr .hdr__cta{display:flex;align-items:center;gap:14px}
.hdr .hdr__cta .btn{padding:14px 26px;white-space:nowrap}

.hdr .burger{display:none;width:42px;height:42px;position:relative;margin-right:-8px}
.hdr .burger span{position:absolute;left:9px;width:24px;height:1px;background:var(--via-cream);transition:transform .4s var(--via-ease)}
.hdr .burger span:nth-child(1){top:17px}
.hdr .burger span:nth-child(2){top:24px}
.is-open .hdr .burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.is-open .hdr .burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.drawer.via-shell{position:fixed;inset:0;background:var(--via-espresso);color:var(--via-cream);z-index:45;
  padding:112px var(--via-pad-x) 44px;display:flex;flex-direction:column;justify-content:space-between;
  transform:translateY(-100%);transition:transform .6s var(--via-ease);visibility:hidden}
.drawer.is-open{transform:translateY(0);visibility:visible}
.drawer .drawer__nav{display:flex;flex-direction:column}
.drawer .drawer__nav a{font-family:var(--via-font-head);font-variation-settings:normal;
  font-size:clamp(28.8px,8vw,41.6px);line-height:1.5;border-bottom:1px solid var(--via-linedk);padding-bottom:4px}
.drawer .drawer__foot{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(250,249,247,.66);
  display:flex;flex-direction:column;gap:8px;padding-top:28px}

/* the WordPress admin bar must not cover the sticky header for logged-in editors */
.admin-bar .hdr.via-shell{top:32px}
@media screen and (max-width:782px){.admin-bar .hdr.via-shell{top:46px}}

/* ---------- hero ---------- */
.hero.via-shell{color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(to right,#2A2927 0%,#37352F 20%,#524E48 42%,#837E76 56%,
    #B9B3A9 66%,#C9C3BA 82%,#D2CCC3 100%)}
.hero::before{content:"";position:absolute;left:8%;top:-40%;width:62vw;height:150%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.09),transparent 64%);pointer-events:none}
.hero .hero__in{position:relative;z-index:2;display:flex;align-items:center;
  min-height:min(88vh,820px);padding-block:clamp(52px,6vw,84px);padding-right:min(46vw,600px)}
.hero .hero__copy{max-width:640px}
.hero .hero__title{font-family:var(--via-font-head);font-weight:400;text-transform:uppercase;
  font-variation-settings:normal;
  font-size:clamp(32.8px,4.7vw,64.8px);line-height:1.14;letter-spacing:.055em;margin:0 0 24px}
.hero .hero__sub{font-size:clamp(16px,1.2vw,17.92px);line-height:1.75;color:rgba(255,255,255,.86);
  max-width:47ch;margin:0 0 38px}
.hero .hero__acts{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px}
.hero .hero__figure{position:absolute;right:0;top:0;bottom:0;z-index:2;width:min(46vw,600px);margin:0;
  display:flex;align-items:flex-end;justify-content:flex-end}
.hero .hero__figure img{height:100%;width:auto;max-width:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 6%,#000 13%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 6%,#000 13%)}
.hero .card-cred{position:absolute;left:-19%;bottom:6%;z-index:3;background:#FBFAF8;color:var(--via-ink);
  padding:24px 30px 26px;max-width:258px;box-shadow:0 40px 80px -46px rgba(0,0,0,.55);
  border-top:2px solid var(--via-gold)}
.hero .card-cred__name{font-family:var(--via-font-head);font-variation-settings:normal;
  font-size:18.56px;letter-spacing:.05em;margin:0 0 7px}
.hero .card-cred__role{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--via-ink45);
  line-height:1.9;margin:0 0 16px}
.hero .card-cred__sig{font-family:var(--via-font-head);font-style:italic;font-size:20.8px;color:var(--via-golddp);margin:0}

/* ---------- footer ---------- */
.ftr.via-shell{background:var(--via-espresso);color:rgba(250,249,247,.7);padding-top:clamp(58px,6.5vw,94px)}
.ftr .ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:clamp(28px,4vw,56px);
  padding-bottom:clamp(42px,4.6vw,64px)}
.ftr .ftr__logo{width:var(--via-flogo-w);margin-bottom:22px}
.ftr .ftr__tag{max-width:34ch;font-size:15.04px;line-height:1.8;margin:0 0 22px}
.ftr h4,.ftr .ftr__h{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--via-goldlt);margin:0 0 20px;font-weight:400}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14.72px}
.ftr a:hover{color:var(--via-goldlt)}
.ftr .ftr__soc{display:flex;gap:12px;margin-top:20px}
.ftr .ftr__soc a{width:38px;height:38px;border:1px solid var(--via-linedk);display:grid;place-items:center;
  transition:background .35s var(--via-ease),color .35s var(--via-ease),border-color .35s var(--via-ease)}
.ftr .ftr__soc a:hover{background:var(--via-gold);color:var(--via-espresso);border-color:var(--via-gold)}
.ftr .ftr__soc svg{width:15px;height:15px;fill:currentColor}
.ftr .ftr__hrs{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14.4px;margin:0}
.ftr .ftr__hrs dt{color:rgba(250,249,247,.6)}
.ftr .ftr__hrs dd{margin:0}
.ftr .ftr__bar{border-top:1px solid var(--via-linedk);padding-block:22px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:14px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.ftr .ftr__disc{border-top:1px solid var(--via-linedk);padding-block:20px 34px;font-size:11px;line-height:1.85;
  margin:1em 0 0;
  color:rgba(250,249,247,.55);max-width:98ch}

/* ---------- motion ---------- */
.via-shell .mask{overflow:hidden;display:block}
.via-shell .mask > span{display:block;transform:translateY(105%);animation:via-up .95s var(--via-ease) forwards}
.via-shell .mask--2 > span{animation-delay:.09s}
.via-shell .mask--3 > span{animation-delay:.18s}
@keyframes via-up{to{transform:none}}
.via-shell .fade{opacity:0;animation:via-fade .9s var(--via-ease) forwards}
.via-shell .fade--1{animation-delay:.12s}.via-shell .fade--2{animation-delay:.46s}
.via-shell .fade--3{animation-delay:.6s}.via-shell .fade--4{animation-delay:.3s}
.via-shell .fade--5{animation-delay:.76s}
@keyframes via-fade{to{opacity:1}}

/* ---------- responsive (mockup breakpoints: 1100 / 860 / 560) ---------- */
@media (max-width:1100px){
  .hero.via-shell{background:linear-gradient(to bottom,#2A2927 0%,#35332F 60%,#403D38 100%)}
  .hero::before{left:-20%;top:-10%;width:120vw}
  .hero .hero__in{display:block;padding-right:0;min-height:0;padding-block:clamp(40px,6vw,64px) 0}
  .hero .hero__figure{position:relative;inset:auto;display:block;width:min(100%,430px);margin:36px auto 0}
  .hero .hero__figure img{height:auto;width:100%;-webkit-mask-image:none;mask-image:none}
  .hero .card-cred{left:0;bottom:0;max-width:66%;padding:20px 22px}
  .ftr .ftr__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1199px){
  /* seven nav items no longer fit beside the logo and the button below ~1100px,
     so the drawer takes over there rather than letting the labels wrap */
  .hdr .nav,.hdr .hdr__cta .btn{display:none}
  .hdr .burger{display:block}
}
@media (max-width:860px){
  .util .util__grp--l{display:none}
}
@media (max-width:560px){
  .hero .hero__title{font-size:clamp(27.52px,7.6vw,36.8px);letter-spacing:.045em}
  .via-shell .u-eyebrow--dk{font-size:10px;letter-spacing:.14em}
  .ftr .ftr__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .via-shell *,.via-shell *::before,.via-shell *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .via-shell .mask > span{transform:none}.via-shell .fade{opacity:1}
}

/* ---------- About: two overlapping photos ---------- */
.via-about{position:relative;margin:0;padding-bottom:13%}
.via-about__main{position:relative;width:92%;z-index:1}
.via-about__main img{width:100%;height:auto;display:block}
.via-about__inset{position:absolute;right:0;bottom:0;width:60%;z-index:2;
  border:9px solid var(--via-paper);box-shadow:0 34px 64px -42px rgba(0,0,0,.5)}
.via-about__inset img{width:100%;height:auto;display:block}
@media (max-width:560px){
  /* keeps the overlapping photo off the edge of the screen */
  .via-about{padding-bottom:16%}
  .via-about__inset{right:14px;width:64%;border-width:6px}
}

/* ---------- responsive corrections ---------- */
/* These four treatment cards are flex column + wrap, so once the copy is tall
   enough (at 320px) the Learn more button spills into a second column and is
   clipped by the card. Selector strength matches Elementor's own generated rule. */
body .elementor-element.elementor-element-09f24826.e-con,
body .elementor-element.elementor-element-53e21e58.e-con,
body .elementor-element.elementor-element-ba415b3a.e-con,
body .elementor-element.elementor-element-cfde345e.e-con{flex-wrap:nowrap}

/* The cards hold their 4:3.4 shape, but the copy is taller than that at ~320px,
   and the content is bottom-aligned so the title escaped out of the top.
   fit-content lets the card grow only when it actually has to. */
@media (max-width:359px){
  body .elementor-element.elementor-element-09f24826.e-con,
  body .elementor-element.elementor-element-53e21e58.e-con,
  body .elementor-element.elementor-element-ba415b3a.e-con,
  body .elementor-element.elementor-element-cfde345e.e-con{aspect-ratio:auto;min-height:230px}
}

/* The About photo column kept an offset margin from the old gold frame, which
   pushed it past the content edge on phones. */
body .elementor-element.elementor-element-6fa2f4ca.e-con{--margin-left:0px;--margin-right:0px;margin-left:0;margin-right:0}

/* Before & after: the supplied photos are already composed pairs (treatment name,
   BEFORE/AFTER labels, branding), so each cell holds one whole case rather than
   being split in half. Elementor has no aspect-ratio control, hence this. */
[id^="via-ba-"].e-con,
/* a cell duplicated in the editor loses its CSS ID, and with no shape of its own it
   collapses to nothing on phones (one cell per row) - so on the gallery page the
   cells are also matched by where they sit: row > cell */
.elementor-2004 .e-con.e-child > .e-con.e-child{aspect-ratio:1.07;min-height:0}

/* ---------- header dropdown ---------- */
.hdr .nav__group{position:relative;display:flex;align-items:center}
.hdr .nav__sub{position:absolute;top:100%;left:-24px;min-width:280px;background:var(--via-espresso);
  border:1px solid var(--via-linedk);padding:12px 0;display:grid;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .26s var(--via-ease),transform .26s var(--via-ease),visibility .26s;
  z-index:60;box-shadow:0 30px 60px -38px rgba(0,0,0,.9)}
.hdr .nav__group:hover .nav__sub,
.hdr .nav__group:focus-within .nav__sub{opacity:1;visibility:visible;transform:translateY(0)}
.hdr .nav__sub a{display:block;padding:9px 24px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(250,249,247,.82);white-space:nowrap;
  transition:color .3s var(--via-ease),background .3s var(--via-ease)}
.hdr .nav__sub a:hover{color:#fff;background:rgba(255,255,255,.06)}

/* the drawer lists the same children, indented */
.drawer .drawer__nav{overflow-y:auto}
.drawer .drawer__sub{display:grid;padding:4px 0 12px 16px}
.drawer .drawer__sub a{font-family:var(--via-font-body);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;line-height:2.15;border-bottom:0;padding-bottom:0;
  color:rgba(250,249,247,.72)}
.drawer.via-shell{overflow-y:auto}

/* her title block, asked to read bolder */
.hero .card-cred__name{font-weight:600}
.hero .card-cred__role{font-weight:600;color:var(--via-ink70)}

/* Section labels on a solid grey pill so they read more easily */
.via-label .elementor-heading-title{display:inline-block;background:#D6D2CB;color:#22221F;
  padding:9px 20px;line-height:1.5}
@media (max-width:560px){
  .via-label .elementor-heading-title{padding:8px 15px;font-size:12.5px!important}
}

/* Phone menu: the Services sub-list is collapsed by default, otherwise ten extra
   items push Financing and Contact off the screen */
.drawer .drawer__row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--via-linedk)}
.drawer .drawer__row > a{flex:1;border-bottom:0}
.drawer .drawer__toggle{flex:none;width:44px;height:44px;position:relative}
.drawer .drawer__toggle span{position:absolute;left:14px;top:21px;width:17px;height:1px;
  background:var(--via-cream);transition:transform .3s var(--via-ease)}
.drawer .drawer__toggle span:nth-child(2){transform:rotate(90deg)}
.drawer .drawer__toggle[aria-expanded="true"] span:nth-child(2){transform:rotate(0deg)}
.drawer .drawer__sub{display:none}
.drawer .drawer__sub.is-open{display:grid}

/* Services drop-down links (/services/#chemical-peels ...) land each treatment just
   below the sticky header instead of underneath it - and so does anything reached
   with the Tab key (WCAG 2.4.11, focus not hidden) */
html{scroll-padding-top:100px}
@media (max-width:1199px){
  html{scroll-padding-top:84px}
}

/* Contact page opening hours - same rows and layout as the footer's */
.via-hours{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;margin:0}
.via-hours dt{font-weight:500}
.via-hours dd{margin:0}

/* Hero brand lockup above the headline (Customizer > VIA Design > Hero): the large
   word and the line under it are sized together so the line spans the word, like the logo */
.hero .hero__brand{margin:0 0 30px;line-height:1;font-size:clamp(88px,8.4vw,120px)}
.hero .hero__brand-mark{display:block;font-family:var(--via-font-head);font-weight:400;
  font-variation-settings:"opsz" 28;line-height:.86;letter-spacing:.26em;width:max-content;max-width:100%;color:#fff}
.hero .hero__brand-sub{display:block;font-family:var(--via-font-body);font-weight:500;font-size:.125em;
  line-height:1.2;letter-spacing:.34em;text-transform:uppercase;margin-top:1.1em;color:rgba(255,255,255,.92)}
/* with the lockup present the headline becomes the tagline under it */
.hero .hero__brand + .hero__title{text-transform:none;letter-spacing:0;
  font-size:clamp(28px,2.35vw,34px);line-height:1.2;margin:0 0 18px}
.hero .hero__brand + .hero__title .mask > span{text-wrap:balance}

/* ---------- accessibility (19 Oct) ---------- */
/* the page's one <main> landmark wraps Elementor's content; keep it a plain full-width block */
.via-main{display:block;width:100%;min-width:0;flex:1 1 100%}
/* Google-reviews widget: its "Read more" is black at 50% opacity (#808080, 3.9:1) - 70% passes AA */
body .ti-widget.ti-goog .ti-read-more span{opacity:.7}

/* ---------- accessibility toolbar (20 Oct) ---------- */
.via-a11y.via-shell{position:fixed;left:16px;bottom:16px;z-index:44;font-family:var(--via-font-body)}
.via-a11y .via-a11y__btn{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:var(--via-espresso);color:var(--via-cream);border:1px solid rgba(255,255,255,.28);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.65)}
.via-a11y .via-a11y__btn svg{width:28px;height:28px;fill:currentColor}
.via-a11y .via-a11y__btn:hover,.via-a11y.is-active .via-a11y__btn{background:#000}
.via-a11y .via-a11y__btn:focus-visible{outline:2px solid var(--via-gold);outline-offset:3px}
.via-a11y .via-a11y__panel{position:absolute;left:0;bottom:62px;width:252px;max-width:calc(100vw - 32px);
  max-height:calc(100vh - 100px);overflow-y:auto;background:#fff;color:var(--via-ink);
  border:1px solid var(--via-line);box-shadow:0 24px 60px -24px rgba(0,0,0,.5);padding:16px 0 10px}
.via-a11y .via-a11y__panel[hidden]{display:none}
.via-a11y .via-a11y__title{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--via-ink);margin:0 18px 12px}
.via-a11y .via-a11y__size{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 12px 8px}
.via-a11y .via-a11y__size button{width:44px;height:44px;border:1px solid var(--via-line);font-size:16px;font-weight:600;color:var(--via-ink)}
.via-a11y .via-a11y__level{font-size:13px;color:var(--via-ink70)}
.via-a11y .via-a11y__list{list-style:none;margin:0;padding:0}
.via-a11y .via-a11y__list button,.via-a11y .via-a11y__reset{display:flex;align-items:center;justify-content:space-between;
  width:100%;min-height:44px;padding:10px 18px;font-size:15px;line-height:1.3;text-align:left;color:var(--via-ink)}
.via-a11y .via-a11y__list button:hover,.via-a11y .via-a11y__size button:hover,.via-a11y .via-a11y__reset:hover{background:var(--via-paper)}
.via-a11y .via-a11y__list button[aria-pressed="true"]{background:var(--via-paper);font-weight:600}
/* a drawn tick, so screen readers hear "pressed" once rather than extra text */
.via-a11y .via-a11y__list button[aria-pressed="true"]::after{content:"";width:11px;height:6px;margin-right:2px;
  border-left:2px solid var(--via-golddp);border-bottom:2px solid var(--via-golddp);transform:rotate(-45deg)}
.via-a11y .via-a11y__reset{border-top:1px solid var(--via-line);margin-top:6px;color:var(--via-golddp);font-weight:600}
.via-a11y .via-a11y__panel button:focus-visible{outline:2px solid var(--via-golddp);outline-offset:-3px}
body.is-open .via-a11y{display:none}
@media print{.via-a11y{display:none}}

/* what the choices do */
/* bigger text scales the page content and footer like browser zoom; the header keeps its size so its menu never overflows */
html.via-a11y-zoom-1 #via-main,html.via-a11y-zoom-1 .ftr{zoom:1.15}
html.via-a11y-zoom-2 #via-main,html.via-a11y-zoom-2 .ftr{zoom:1.3}
html.via-a11y-zoom-3 #via-main,html.via-a11y-zoom-3 .ftr{zoom:1.5}
@media (max-width:560px){html.via-a11y-zoom-3 #via-main,html.via-a11y-zoom-3 .ftr{zoom:1.3}}
html.via-a11y-grayscale{filter:grayscale(1)}
html.via-a11y-contrast{filter:contrast(1.4)}
html.via-a11y-grayscale.via-a11y-contrast{filter:grayscale(1) contrast(1.4)}
html.via-a11y-links a{text-decoration:underline!important;text-underline-offset:3px}
html.via-a11y-readable body,html.via-a11y-readable body *:not(svg):not(path):not(circle){
  font-family:Arial,Helvetica,sans-serif!important;font-variation-settings:normal!important;letter-spacing:normal!important}
html.via-a11y-still *,html.via-a11y-still *::before,html.via-a11y-still *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.via-a11y-still .via-shell .fade{opacity:1!important}
html.via-a11y-still .via-shell .mask > span{transform:none!important}
html.via-a11y-still .elementor-invisible{visibility:visible!important}