/* Brid's v2 - "spa" design. Original code. Teal brand kept as the accent on porcelain & sand. */
:root{--teal:#076282;--deep:#06384a;--ink:#1d2b30;--porcelain:#f8f5f0;--sand:#ece4d9;--hair:#ddd3c6;--muted:#6b7a7f;--glow:#a9d8e4;
  --serif:Fahkwang,"Cormorant Garamond",Georgia,serif;--sans:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;--gut:22px;--ease:cubic-bezier(.2,.7,.1,1)}
@media (min-width:900px){:root{--gut:48px}}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.85;letter-spacing:.3px;color:var(--ink);background:var(--porcelain);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
main{flex:1 0 auto}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
strong,b{font-weight:500}
p{margin:0 0 1.1em}
h1,h2,h3,h4,.h0,.h1,.h2,.h3{font-family:var(--serif);font-weight:200;line-height:1.08;letter-spacing:-.4px;margin:0;color:inherit}
h1 em,h2 em,h3 em,.h0 em,.h1 em,.h2 em{font-style:italic;color:var(--teal)}
.cs-3 h1 em,.cs-3 h2 em,.cs-4 h1 em,.cs-4 h2 em,.cs-4 h3 em,.cs-3 h3 em{color:var(--glow)}
.h0{font-size:46px}.h1,h1{font-size:40px}.h2,h2{font-size:32px}.h3,h3{font-size:24px}
@media (min-width:900px){.h0{font-size:84px}.h1,h1{font-size:62px}.h2,h2{font-size:44px}.h3,h3{font-size:30px}}
.wrap,.pw{max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.center{text-align:center}.mt-l{margin-top:64px}
.cs{background:rgb(var(--bg));color:rgb(var(--fg))}
.cs-3 .eyebrow,.cs-4 .eyebrow{color:var(--glow)}
.cs-3 .lead,.cs-4 .lead,.cs-3 .rte,.cs-4 .rte{color:#c9e0e6}
.eyebrow,.caption{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:4.5px;text-transform:uppercase;color:var(--teal);margin:0 0 22px;line-height:1.6}
.rule{display:flex;align-items:center;justify-content:center;gap:16px}
.rule::before,.rule::after{content:"";width:46px;height:1px;background:currentColor;opacity:.45}
.lead{color:var(--muted);max-width:560px;margin:22px auto 0;font-size:15.5px}
.lead p:last-child{margin:0}
.rte{color:var(--muted)}
.rte h2,.rte h3,.rte h4,.rte h5{font-family:var(--serif);font-weight:300;color:var(--ink);margin:1.2em 0 .5em;line-height:1.3}
.rte h5{font-family:var(--sans);font-size:15px;font-weight:300;color:var(--muted);line-height:1.85;margin:0 0 1em}
.rte a{color:var(--teal);text-decoration:underline;text-underline-offset:4px}
.rte img{display:inline-block;height:auto}
.rte>*:last-child{margin-bottom:0}
.rte ul,.rte ol{padding-left:1.3em}

/* buttons & links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 36px;font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:3.5px;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--teal);color:var(--teal);background:transparent;cursor:pointer;position:relative;overflow:hidden;transition:color .5s var(--ease),border-color .5s;z-index:0}
.btn::before{content:"";position:absolute;inset:0;background:var(--teal);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);z-index:-1}
.btn:hover{color:#fff}.btn:hover::before{transform:scaleY(1)}
.btn--solid{background:var(--teal);color:#fff}
.btn--solid::before{background:var(--deep)}
.btn--light,.cs-3 .btn,.cs-4 .btn{border-color:rgba(255,255,255,.7);color:#fff}
.btn--light::before,.cs-3 .btn::before,.cs-4 .btn::before{background:#fff}
.btn--light:hover,.cs-3 .btn:hover,.cs-4 .btn:hover{color:var(--deep)}
.btn--onimg{background:#fff;border-color:#fff;color:var(--deep)}
.btn--onimg::before{background:var(--teal)}.btn--onimg:hover{color:#fff;border-color:var(--teal)}
.btn--full,.btn--secondary.btn--full{width:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.btn[disabled]::before{display:none}
.btns{display:flex;flex-wrap:wrap;gap:14px}
.tlink{display:inline-block;font-size:11px;font-weight:500;letter-spacing:3.5px;text-transform:uppercase;text-decoration:none;color:var(--teal);padding-bottom:7px;background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;transition:background-size .5s var(--ease)}
.tlink:hover{background-size:40% 1px}
.cs-3 .tlink,.cs-4 .tlink{color:#fff}
.tag{display:inline-block;font-size:9.5px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;padding:6px 12px;background:var(--porcelain);color:var(--teal)}

/* reveal on scroll */
.js .rv{opacity:0;transform:translateY(36px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv--img{opacity:1;transform:none;clip-path:inset(12% 0 0 0);transition:clip-path 1.6s var(--ease)}
.js .rv--img img{transform:scale(1.12);transition:transform 2.2s var(--ease)}
.js .rv--img.in{clip-path:inset(0 0 0 0)}.js .rv--img.in img{transform:none}
@media (prefers-reduced-motion:reduce){.js .rv,.js .rv--img,.js .rv--img img{opacity:1;transform:none;clip-path:none;transition:none}.ticker__run,.hero__media img{animation:none!important}}

/* shapes */
.arch{border-radius:999px 999px 0 0;overflow:hidden;position:relative;background:var(--sand)}
.frame{overflow:hidden;position:relative;background:var(--sand)}
.arch img,.frame img{width:100%;height:100%;object-fit:cover}

/* ---------------------------------------------------------------- announcement & header */
.ann{background:var(--deep);color:#cfe6ec;text-align:center;font-size:10.5px;letter-spacing:4px;text-transform:uppercase;padding:10px 16px;line-height:1.5}
.ann a{text-decoration:none}
.site-header{position:sticky;top:0;z-index:40;background:var(--porcelain);color:var(--ink);border-bottom:1px solid var(--hair);transition:background .5s,color .5s,border-color .5s,transform .45s var(--ease)}
.site-header.hide{transform:translateY(-100%)}
.site-header--overlay{position:absolute;left:0;right:0;top:0;background:transparent;color:#fff;border-color:transparent}
.hdr-solid .site-header--overlay .ann{display:none}
.hdr-solid .site-header--overlay{position:fixed;top:0;background:rgba(248,245,240,.96);backdrop-filter:blur(10px);color:var(--ink);border-color:var(--hair)}
.hdr__in{max-width:1280px;margin:0 auto;padding:16px var(--gut);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;min-height:84px}
@media (min-width:1100px){.hdr__in{padding-top:22px;padding-bottom:22px}}
.hdr__logo{display:block;justify-self:center}
.hdr__logo img{width:calc(var(--logo-w,170px)*.82);height:auto}
@media (min-width:900px){.hdr__logo img{width:var(--logo-w,170px)}}
.logo--dark{display:none}
.site-header:not(.site-header--overlay) .logo--light,.hdr-solid .site-header--overlay .logo--light{display:none}
.site-header:not(.site-header--overlay) .logo--dark,.hdr-solid .site-header--overlay .logo--dark{display:block}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:30px;align-items:center}
.nav--r{margin-left:auto}
.nav__a{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:500;letter-spacing:3px;text-transform:uppercase;text-decoration:none;cursor:pointer;list-style:none;padding:8px 0;position:relative;white-space:nowrap}
.nav__a::-webkit-details-marker{display:none}
.nav__a span{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;padding-bottom:4px;transition:background-size .5s var(--ease)}
.nav__a:hover span,.nav__a.on span{background-size:100% 1px}
.nav__a svg{width:8px;height:5px}
.dd{position:relative}
.dd__menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);min-width:230px;list-style:none;margin:0;padding:18px 0;background:var(--porcelain);color:var(--ink);border:1px solid var(--hair);display:block!important}
.dd__menu a{display:block;padding:8px 26px;font-size:13px;letter-spacing:.5px;text-decoration:none;color:var(--ink)}
.dd__menu a:hover{color:var(--teal)}
.hdr__r{display:flex;align-items:center;justify-content:flex-end;gap:22px}
@media (min-width:1100px){.hdr__r{gap:12px}.nav ul{gap:24px}.hdr__in{gap:28px}}  /* the taller Tanning & Beauty logo needs breathing room beside SHOP */
.hdr__book{font-size:10.5px;font-weight:500;letter-spacing:3px;text-transform:uppercase;text-decoration:none;border:1px solid currentColor;padding:11px 20px;transition:background .4s,color .4s}
.hdr__book:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.hdr__icon{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;color:inherit;background:none;border:0;padding:0;cursor:pointer;position:relative;text-decoration:none}
.hdr__icon svg{width:19px;height:19px}
.cart-count{position:absolute;top:2px;right:0;min-width:16px;height:16px;border-radius:50%;background:var(--teal);color:#fff;font-size:9px;line-height:16px;text-align:center;letter-spacing:0;font-weight:500}
.hdr__burger{display:none;justify-self:start}
@media (max-width:1099px){
  .nav{display:none}.hdr__burger{display:inline-flex}.hdr__in{grid-template-columns:auto 1fr auto}
  .hdr__logo{justify-self:center}.hdr__book{display:none}.hdr__r{gap:4px}
}
/* drawer */
.drawer{position:fixed;inset:0;z-index:60;visibility:hidden}
.drawer.open{visibility:visible}
.drawer__bg{position:absolute;inset:0;background:rgba(6,56,74,.45);opacity:0;transition:opacity .4s}
.drawer.open .drawer__bg{opacity:1}
.drawer__panel{position:absolute;top:0;left:0;bottom:0;width:min(420px,100%);background:var(--porcelain);transform:translateX(-100%);transition:transform .55s var(--ease);display:flex;flex-direction:column;overflow:auto}
.drawer.open .drawer__panel{transform:none}
.drawer__top{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--hair)}
.drawer__logo{width:120px}
.drawer__menu{list-style:none;margin:0;padding:18px 0}
.drawer__menu a,.drawer__menu summary{display:flex;justify-content:space-between;align-items:center;padding:12px 30px;font-family:var(--serif);font-weight:200;font-size:28px;text-decoration:none;cursor:pointer;list-style:none;color:var(--ink)}
.drawer__menu summary::-webkit-details-marker{display:none}
.drawer__menu summary svg{width:12px;height:8px}
.drawer__menu ul{list-style:none;margin:0 0 10px;padding:0 0 0 18px}
.drawer__menu ul a{font-size:20px;padding:6px 30px}
.drawer__menu a.on{color:var(--teal)}
.drawer__foot{margin-top:auto;padding:24px 30px;border-top:1px solid var(--hair)}
/* search */
.search-ov{position:absolute;left:0;right:0;top:100%;background:var(--porcelain);color:var(--ink);border-bottom:1px solid var(--hair);padding:22px var(--gut);display:none}
.search-ov.open{display:block}
.search-ov form{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--ink)}
.search-ov input{flex:1;border:0;background:transparent;font-family:var(--serif);font-weight:200;font-size:28px;padding:8px 0;outline:0;color:var(--ink)}
/* bag notification */
.cart-note{position:absolute;right:var(--gut);top:calc(100% + 10px);width:min(380px,calc(100% - 2*var(--gut)));z-index:45;padding:26px;background:var(--porcelain);color:var(--ink);border:1px solid var(--hair);box-shadow:0 30px 60px rgba(6,56,74,.14);display:none}
.cart-note.open{display:block;animation:fadeup .5s var(--ease)}
@keyframes fadeup{from{opacity:0;transform:translateY(12px)}}
.cart-note__head{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;letter-spacing:3px;text-transform:uppercase;font-weight:500;color:var(--teal);margin-bottom:18px}
.cart-note__head span{display:flex;gap:10px;align-items:center}
.cart-note__head svg{width:12px;height:12px}
.cart-note__close{background:none;border:0;cursor:pointer;padding:4px;color:var(--ink)}
.cart-note__close svg{width:12px;height:12px}
.cart-note__item{display:flex;gap:16px;align-items:center;margin-bottom:22px}
.cart-note__item img{width:72px;height:90px;object-fit:contain;background:#fff}
.cart-note__item h3{font-size:20px}
.cart-note__item p{margin:4px 0 0;font-size:13px;color:var(--muted)}
.cart-note .btn{width:100%;margin-bottom:16px}
.cart-note .tlink{display:table;margin:0 auto}

/* ---------------------------------------------------------------- sections */
.sec{padding:calc(var(--pt,120px)*.65) 0 calc(var(--pb,120px)*.65)}
@media (min-width:900px){.sec{padding:var(--pt,120px) 0 var(--pb,120px)}}
.shead{margin-bottom:56px}
.shead--c{text-align:center}
.shead--c .lead{margin-left:auto;margin-right:auto}
@media (min-width:900px){.shead{margin-bottom:72px}}

/* hero */
.hero{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;min-height:max(620px,100svh)}
.hero--large{min-height:max(560px,82svh)}.hero--medium{min-height:max(480px,64svh)}
.hero__media{position:absolute;inset:-8% 0;will-change:transform}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover;animation:kb 20s ease-out both}
@keyframes kb{from{transform:scale(1.14)}to{transform:scale(1.02)}}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(6,56,74,calc(var(--ov,.4)*.6)),rgba(6,56,74,calc(var(--ov,.4)*1.5)))}
.hero__in{position:relative;z-index:1;max-width:980px;padding:140px 24px 90px}
.hero .eyebrow{color:var(--glow)}
.hero h1{font-size:50px;line-height:1;letter-spacing:-1px;margin:6px 0 30px}
@media (min-width:900px){.hero h1{font-size:108px;letter-spacing:-2.5px}}
.hero h1 em{color:#fff}
.hero__text{max-width:480px;margin:0 auto 42px;font-size:16px;color:#e4f1f4}
.hero__btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.ln{display:block;animation:rise 1.7s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(38px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.hero__scroll{position:absolute;left:50%;bottom:30px;width:1px;height:64px;background:rgba(255,255,255,.28);overflow:hidden;z-index:1}
.hero__scroll::after{content:"";position:absolute;left:0;top:-64px;width:1px;height:64px;background:#fff;animation:drop 2.8s ease-in-out infinite}
@keyframes drop{to{top:64px}}

/* ticker */
.ticker{overflow:hidden;white-space:nowrap;padding:24px 0;border-bottom:1px solid var(--hair)}
.ticker__run{display:inline-flex;font-family:var(--serif);font-style:italic;font-weight:200;font-size:24px;color:var(--teal);animation:tick 80s linear infinite}
@media (min-width:900px){.ticker__run{font-size:30px}}
.ticker__run span{display:inline-flex;align-items:center;gap:64px;padding-right:64px}
.ticker__run span::after{content:"✦";font-style:normal;font-size:10px;color:var(--hair)}
.cs-3 .ticker__run,.cs-4 .ticker__run{color:#fff}
@keyframes tick{to{transform:translateX(-50%)}}

/* image banner & band */
.bnr,.band{position:relative;overflow:hidden;color:#fff;display:flex;align-items:center}
.bnr--small{min-height:420px}.bnr--medium{min-height:540px}.bnr--large{min-height:680px}
@media (min-width:900px){.bnr--small{min-height:520px}.bnr--medium{min-height:680px}.bnr--large{min-height:820px}}
.bnr--bare{min-height:0;aspect-ratio:16/7}
.bnr__media,.band__media{position:absolute;inset:-10% 0;will-change:transform}
.bnr__media img,.band__media img{width:100%;height:100%;object-fit:cover}
.bnr::after,.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,56,74,calc(var(--ov,.35)*.9)),rgba(6,56,74,calc(var(--ov,.35)*1.6)))}
.bnr--bare::after{display:none}
.bnr__in{position:relative;z-index:1;width:100%;padding-top:120px;padding-bottom:70px}
.bnr__in.al-center{text-align:center}.bnr__in.al-center .btns{justify-content:center}.bnr__in.al-center .rte{margin:0 auto}
.bnr__in .eyebrow{color:var(--glow)}
.bnr__in h2{margin-bottom:24px}
.bnr__in h2 em{color:#fff}
.bnr__in .rte{color:#e4f1f4;max-width:620px}
.bnr__in .btns{margin-top:36px}
.band{min-height:620px;justify-content:center;text-align:center;--ov:.42}
@media (min-width:900px){.band{min-height:820px}}
.band__in{position:relative;z-index:1;padding:0 24px;max-width:900px}
.band .eyebrow{color:var(--glow)}
.band h2{font-size:44px;line-height:1.05;margin:0 0 44px}
@media (min-width:900px){.band h2{font-size:78px}}
.band h2 em{color:#fff}

/* image with text */
.it__grid{display:grid;grid-template-columns:1fr;gap:64px;align-items:center}
@media (min-width:900px){.it__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:110px}.it--right .it__media{order:2}.it--right .it__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.it__media{position:relative}
.it__main{aspect-ratio:4/5}
@media (min-width:900px){.it__main{aspect-ratio:auto;height:700px}}
.it__small{position:absolute;right:-20px;bottom:-40px;width:42%;aspect-ratio:3/4;border:10px solid rgb(var(--bg,248,245,240))}
@media (min-width:900px){.it__small{right:-60px;bottom:-60px;width:220px;height:290px;aspect-ratio:auto}.it--right .it__small{right:auto;left:-60px}}
.it__text h2{margin-bottom:28px}
.it__text .rte{max-width:470px}
.cs-4 .it__text .rte{color:#c9e0e6}
.sig{font-family:var(--serif);font-style:italic;font-weight:200;font-size:26px;color:var(--teal);margin:30px 0 0}
.it__cta{margin-top:40px}
.plist{margin:34px 0 0;max-width:470px}
.plist div{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid rgba(128,128,128,.25);font-size:14px}
.plist div::after{content:"";order:1;flex:1;border-bottom:1px dotted rgba(128,128,128,.45)}
.plist b{order:2;font-family:var(--serif);font-weight:200;font-size:22px;color:var(--teal)}
.cs-4 .plist b,.cs-3 .plist b{color:var(--glow)}
.cs-4 .plist div,.cs-3 .plist div{border-color:rgba(255,255,255,.15)}

/* treatment menu */
.menu__grid{display:grid;grid-template-columns:1fr;column-gap:90px}
@media (min-width:900px){.menu__grid{grid-template-columns:1fr 1fr}}
.menu__row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:18px;align-items:baseline;padding:28px 0;border-top:1px solid var(--hair);text-decoration:none;transition:padding .5s var(--ease)}
.menu__grid>:last-child{border-bottom:1px solid var(--hair)}
@media (min-width:900px){.menu__grid>:nth-last-child(2){border-bottom:1px solid var(--hair)}}
.menu__row small{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--teal)}
.menu__row h3{font-size:26px;margin-bottom:4px}
@media (min-width:900px){.menu__row h3{font-size:30px}}
.menu__row p{margin:0;color:var(--muted);font-size:14px}
.menu__go{font-size:10px;letter-spacing:3px;text-transform:uppercase;font-weight:500;color:var(--teal);white-space:nowrap}
.menu__go em{font-family:var(--serif);font-size:18px;letter-spacing:0;text-transform:none;font-weight:200}
a.menu__row:hover{padding-left:10px}
a.menu__row:hover h3{color:var(--teal)}

/* columns */
.mc__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:44px 34px}
.mc__list--m2{grid-template-columns:1fr 1fr;gap:28px 16px}
@media (min-width:900px){.mc__list,.mc__list--m2{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:50px 34px}}
.mc__card{display:block;text-decoration:none;height:100%}
.mc__img{aspect-ratio:4/5}
.mc__img img{transition:transform 1.6s var(--ease)}
a.mc__card:hover .mc__img img{transform:scale(1.05)}
.mc--arch .mc__card{text-align:center}
.mc--arch .mc__img{aspect-ratio:3/4.2}
.mc__body{padding-top:26px}
.mc__body h3{margin-bottom:10px}
.mc__body .rte{font-size:14.5px}
.mc__body .tlink{margin-top:18px}
.mc--cards .mc__card{background:rgba(255,255,255,.55);border:1px solid var(--hair);padding:36px 34px}
.cs-3.mc--cards .mc__card,.cs-4.mc--cards .mc__card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.15)}
.mc--cards .mc__img{margin:-36px -34px 30px;aspect-ratio:4/3}
.mc--cards .mc__body{padding:0}
.mc--cards .mc__body h3{font-size:28px}
.mc--cards .rte h5{font-size:14px}
.mc--plain .mc__body{padding-top:18px}

/* reviews */
.q{text-align:center;max-width:940px}
.q__slides{display:grid}
.q__slide{grid-area:1/1;margin:0;opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease),transform 1s var(--ease);pointer-events:none}
.q__slide.on{opacity:1;transform:none;pointer-events:auto}
.q blockquote{font-family:var(--serif);font-weight:200;font-style:italic;font-size:28px;line-height:1.32;margin:14px 0 30px;color:var(--ink)}
@media (min-width:900px){.q blockquote{font-size:44px}}
.q figcaption{font-size:10.5px;letter-spacing:4px;text-transform:uppercase;color:var(--muted)}
.q__dots{display:flex;justify-content:center;gap:12px;margin-top:40px}
.q__dots button{width:36px;height:12px;background:none;border:0;padding:0;cursor:pointer;position:relative}
.q__dots button::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--hair)}
.q__dots button.on::after{background:var(--teal)}
.q__img{margin-top:56px}
.q__img img{width:276px;max-width:100%;margin:0 auto}

/* app section */
.app__grid{display:grid;grid-template-columns:1fr;gap:70px;align-items:center}
@media (min-width:900px){.app__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:90px}}
.app h2{margin-bottom:24px}
.app .lead{margin:0 0 36px;max-width:470px}
.app__steps{list-style:none;margin:0 0 44px;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.app__steps li{display:grid;grid-template-columns:40px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.app__steps small{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--glow)}
.app__steps h3{font-size:24px;margin-bottom:4px}
.app__steps p{margin:0;color:#c9e0e6;font-size:14px}
.app:not(.cs-3):not(.cs-4) .app__steps,.app:not(.cs-3):not(.cs-4) .app__steps li{border-color:var(--hair)}
.app:not(.cs-3):not(.cs-4) .app__steps p{color:var(--muted)}
.app__visual{position:relative;height:560px;max-width:520px;margin:0 auto;width:100%}
@media (min-width:900px){.app__visual{height:660px}}
.phone{position:absolute;width:250px;aspect-ratio:9/19.5;border-radius:42px;background:#0b1418;padding:10px;box-shadow:0 40px 80px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.12)}
@media (min-width:900px){.phone{width:290px}}
.phone__screen{width:100%;height:100%;border-radius:33px;overflow:hidden;background:#000}
.phone__screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.phone--front{right:4%;top:0;z-index:2;animation:float 7s ease-in-out infinite}
.phone--back{left:2%;top:70px;transform:rotate(-6deg);opacity:.9;animation:float2 8s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px)}}
@keyframes float2{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(-6deg) translateY(12px)}}
.lcard{position:absolute;left:-2%;bottom:20px;z-index:3;width:280px;aspect-ratio:1.6;border-radius:18px;padding:22px 24px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(135deg,#0a7aa1 0%,var(--teal) 45%,var(--deep) 100%);box-shadow:0 30px 60px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.18);overflow:hidden;animation:float 9s ease-in-out infinite}
.lcard::before{content:"";position:absolute;inset:-60% -30%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);animation:sheen 6s ease-in-out infinite}
@keyframes sheen{0%,60%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
@media (min-width:900px){.lcard{width:320px;left:-6%}}
.lcard__top{display:flex;justify-content:space-between;align-items:center;font-size:9.5px;letter-spacing:3px;text-transform:uppercase}
.lcard__top img{width:84px}
.lcard__pts b{display:block;font-family:var(--serif);font-weight:200;font-size:48px;line-height:1}
.lcard__pts span,.lcard__foot{font-size:9.5px;letter-spacing:3px;text-transform:uppercase;color:#cfe6ec}
.lcard__foot{display:flex;justify-content:space-between}

/* feature box */
.fbox__in{display:grid;grid-template-columns:1fr;gap:30px;align-items:center;border:1px solid var(--hair);padding:44px 28px}
@media (min-width:900px){.fbox__in{grid-template-columns:minmax(0,1fr) auto;gap:50px;padding:64px 70px}}
.fbox__in h2{margin-bottom:12px}
.fbox__in p{margin:0;color:var(--muted);max-width:560px}

/* rich text */
.rt__in{max-width:820px;margin:0 auto}
.rt__in.al-center{text-align:center}
.rt__in.al-center .btns{justify-content:center}
.rt__in h2{margin-bottom:24px}
.rt__in .btns{margin-top:36px}
.rt__in .rte{font-size:15.5px}

/* treatment list (collapsible) */
.cc__grid{display:grid;grid-template-columns:1fr;gap:60px;max-width:820px;margin:0 auto}
.cc__grid--img{max-width:none;align-items:start}
@media (min-width:900px){.cc__grid--img{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:100px}.cc__grid--right .cc__media{order:2}.cc__media{position:sticky;top:120px}}
.cc__media .arch{aspect-ratio:3/4}
.cc__list>.lead{margin:0 0 40px;text-align:left}
.acc{border-top:1px solid var(--hair)}
.acc:last-of-type{border-bottom:1px solid var(--hair)}
.acc summary{display:grid;grid-template-columns:40px minmax(0,1fr) 24px;gap:14px;align-items:baseline;padding:26px 0;cursor:pointer;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary small{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--teal)}
.acc summary h3{font-size:24px;transition:color .4s}
@media (min-width:900px){.acc summary h3{font-size:30px}}
.acc summary:hover h3{color:var(--teal)}
.acc__pm{position:relative;width:16px;height:16px;align-self:center}
.acc__pm::before,.acc__pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--teal);transition:transform .5s var(--ease)}
.acc__pm::after{transform:rotate(90deg)}
.acc[open] .acc__pm::after{transform:rotate(0)}
.acc__body{padding:0 0 30px 54px;font-size:15px;animation:fadeup .6s var(--ease)}
.acc__body a{display:inline-block;margin-top:6px;font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:500;text-decoration:none;color:var(--teal);border-bottom:1px solid currentColor;padding-bottom:4px}
.acc__cta{margin-top:50px;text-align:center}

/* products */
.pgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:40px 16px}
@media (min-width:900px){.pgrid{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:56px 34px}}
.card{text-align:center;position:relative}
.card__media{position:relative;display:block;background:#fff;aspect-ratio:4/5;overflow:hidden}
.card__media img{position:absolute;inset:7%;width:86%;height:86%;object-fit:contain;transition:transform 1.4s var(--ease),opacity .7s}
.card__media img.alt{opacity:0}
@media (hover:hover){.card:hover .card__media img{transform:scale(1.05)}.card:hover .card__media img.alt{opacity:1}.card:hover .card__media img.has-alt{opacity:0}}
.card__media .tag{position:absolute;left:14px;top:14px}
.card__info{padding:22px 4px 0}
.card__title{font-size:19px;line-height:1.3;margin:0 0 6px}
@media (min-width:900px){.card__title{font-size:21px}}
.card__title a{text-decoration:none}
.card__title a:hover{color:var(--teal)}
.price{font-size:13px;letter-spacing:1px;color:var(--muted);display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.price s{opacity:.7}
.price--large{font-family:var(--serif);font-weight:200;font-size:30px;letter-spacing:0;color:var(--ink);justify-content:flex-start}
.card__quick{display:inline-block;margin-top:14px;background:none;border:0;cursor:pointer;font-family:var(--sans);font-size:10px;letter-spacing:3px;text-transform:uppercase;font-weight:500;color:var(--teal);text-decoration:none;padding:0 0 5px;border-bottom:1px solid transparent;transition:border-color .4s}
.card__quick:hover{border-color:currentColor}
.card__quick.added{color:var(--deep)}

/* newsletter */
.nl__in{max-width:640px}
.nl__field{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--ink);padding-bottom:12px}
.cs-3 .nl__field,.cs-4 .nl__field{border-color:#fff}
.nl__field input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:inherit}
.nl__field input::placeholder{color:var(--muted)}
.nl__field button{background:none;border:0;cursor:pointer;font:inherit;font-size:11px;letter-spacing:3.5px;text-transform:uppercase;font-weight:500;color:var(--teal)}
.cs-3 .nl__field button,.cs-4 .nl__field button{color:#fff}
.nl__msg{margin:16px 0 0;font-size:14px;text-align:center;color:var(--teal)}

/* contact form */
.cf__in{max-width:760px}
.cf__row{display:grid;grid-template-columns:1fr;gap:0 30px}
@media (min-width:700px){.cf__row{grid-template-columns:1fr 1fr}}
.lf{position:relative;margin-bottom:26px}
.lf input,.lf textarea{width:100%;border:0;border-bottom:1px solid var(--hair);background:transparent;font:inherit;font-size:16px;color:var(--ink);padding:24px 0 10px;outline:0;border-radius:0;transition:border-color .4s;resize:vertical}
.lf input:focus,.lf textarea:focus{border-color:var(--teal)}
.lf label{position:absolute;left:0;top:24px;font-size:14px;color:var(--muted);pointer-events:none;transition:all .35s var(--ease)}
.lf input:focus+label,.lf input:not(:placeholder-shown)+label,.lf textarea:focus+label,.lf textarea:not(:placeholder-shown)+label{top:0;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--teal)}
.cf .center{margin-top:20px}
.cf__msg{padding:16px 20px;margin:0 0 26px;background:var(--porcelain);color:var(--teal);text-align:center}
.cf__msg--err{color:#9b1c1c;background:#fbeeee}

/* page body */
.pb__in{max-width:820px}
.pb__in .shead{margin-bottom:50px}
.pb__in>.rte{font-size:15.5px}
.pb__in .rte p:has(img){text-align:center}
.pb__in .rte img{margin:10px auto 20px;border-radius:999px 999px 0 0}

/* ---------------------------------------------------------------- footer */
.ftr{background:var(--deep);color:#c9e0e6;padding:100px 0 40px;text-align:center;font-size:14px}
.ftr__logo{width:170px;margin:0 auto}
.ftr__tag{font-family:var(--serif);font-style:italic;font-weight:200;font-size:22px;color:#fff;margin:26px 0 0}
.ftr__nav{display:flex;justify-content:center;flex-wrap:wrap;gap:14px 38px;margin:44px 0 54px;font-size:10.5px;letter-spacing:3.5px;text-transform:uppercase;font-weight:500}
.ftr__nav a{text-decoration:none}
.ftr__nav a:hover{color:#fff}
.ftr__cols{display:grid;grid-template-columns:1fr;gap:36px;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);padding:46px 0}
@media (min-width:800px){.ftr__cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ftr h4{font-family:var(--serif);font-weight:200;font-style:italic;font-size:22px;color:#fff;margin:0 0 12px}
.ftr__cols p{margin:0;line-height:1.9}
.ftr__awards{margin:44px auto 0}
.ftr__awards img{width:264px;max-width:100%;margin:0 auto}
.ftr__bottom{margin-top:40px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:11px;letter-spacing:2px;color:#8fb2bc}
.ftr__bottom a{text-decoration:none}
.soc{list-style:none;margin:0;padding:0;display:flex;gap:18px;justify-content:center}
.soc a,.social a{display:flex;color:inherit}
.soc svg,.social svg{width:17px;height:17px}
.social{list-style:none;margin:0;padding:0;display:flex;gap:18px}
@media (max-width:700px){.ftr__bottom{justify-content:center;flex-direction:column}}

/* ---------------------------------------------------------------- shop pages */
.shop-hero{padding:70px 0 10px;text-align:center}
@media (min-width:900px){.shop-hero{padding:110px 0 20px}}
.shop-hero h1{margin-bottom:18px}
.shop-hero .lead{margin-top:0}
.facets{display:flex;align-items:center;flex-wrap:wrap;gap:12px 30px;margin:50px 0 44px;padding:18px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);font-size:10.5px;letter-spacing:3px;text-transform:uppercase;font-weight:500}
.facets__desk{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.facets__label{color:var(--muted)}
.facets details{position:relative}
.facets summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.facets summary::-webkit-details-marker{display:none}
.facets summary svg{width:8px;height:5px}
.facets__drop{position:absolute;top:calc(100% + 18px);left:0;z-index:5;min-width:260px;background:var(--porcelain);border:1px solid var(--hair);padding:20px 22px;text-transform:none;letter-spacing:.3px;font-weight:300;font-size:14px;box-shadow:0 20px 40px rgba(6,56,74,.1)}
.facets__drop label{display:flex;align-items:center;gap:10px;cursor:pointer;padding:5px 0}
.facets__drop input[type=checkbox]{accent-color:var(--teal)}
.facets__drop .pr{display:flex;gap:10px;align-items:center}
.facets__drop .pr input{width:96px;padding:8px 0;border:0;border-bottom:1px solid var(--hair);background:transparent;font:inherit}
.facets__drop .apply{margin-top:16px;display:flex;gap:18px;align-items:center}
.facets__drop .apply .btn{min-height:40px;padding:0 20px}
.facets__drop .apply a{font-size:13px;color:var(--teal)}
.facets__sort{margin-left:auto;display:flex;align-items:center;gap:18px}
.facets__sort select{font:inherit;font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;font-weight:500;color:var(--ink);background:transparent;border:0;cursor:pointer}
.facets__count{color:var(--muted)}
.facets__mob{display:none;align-items:center;gap:10px;background:none;border:0;padding:0;font:inherit;cursor:pointer;color:var(--ink)}
.facets__mob svg{width:18px;height:18px}
.facets__count--mob{display:none}
@media (max-width:899px){.facets{justify-content:space-between}.facets__mob,.facets__count--mob{display:flex}.facets__desk,.facets__sort{display:none}
  .facets.open .facets__desk,.facets.open .facets__sort{display:flex;width:100%}.facets.open .facets__sort .facets__count{display:none}.facets__sort{margin-left:0}.facets__drop{position:static;margin-top:10px}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:-24px 0 30px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--hair);font-size:12px;text-decoration:none}
.coll-empty{text-align:center;padding:60px 0}
.coll-list .card__title{font-size:28px}

/* product page */
.pdp{display:grid;grid-template-columns:1fr;gap:40px;padding:40px 0 20px}
@media (min-width:900px){.pdp{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:90px;padding:70px 0 40px}}
.pdp__media{list-style:none;margin:0;padding:0;display:grid;gap:16px}
@media (min-width:900px){.pdp__media{grid-template-columns:1fr 1fr}.pdp__media li:first-child{grid-column:1/-1}}
.pdp__media li{background:#fff;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pdp__media li:first-child{aspect-ratio:1/1}
.pdp__media img{width:84%;height:84%;object-fit:contain}
@media (max-width:899px){.pdp__media{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(-1*var(--gut));padding:0 var(--gut);scrollbar-width:none}.pdp__media::-webkit-scrollbar{display:none}.pdp__media li{flex:0 0 86%;scroll-snap-align:start}.pdp__media li:first-child{border-radius:0;aspect-ratio:1}}
.pdp__counter{display:flex;justify-content:center;align-items:center;gap:6px;font-size:12px;letter-spacing:2px;margin-top:12px}
.pdp__counter button{background:none;border:0;padding:10px;color:var(--ink);cursor:pointer}
.pdp__counter svg{width:10px;height:6px}
@media (min-width:900px){.pdp__counter{display:none}.pdp__sticky{position:sticky;top:120px}}
.pdp__vendor{margin:0 0 18px}
.pdp__title{margin:0 0 20px}
.pdp__price{margin:0 0 6px}
.pdp__tax{font-size:12px;color:var(--muted);margin:0 0 30px}
.pdp__desc{color:var(--muted);margin:0 0 34px;padding-top:28px;border-top:1px solid var(--hair)}
.opt{border:0;margin:0 0 22px;padding:0}
.opt legend,.form-label{display:block;font-size:10.5px;letter-spacing:3px;text-transform:uppercase;font-weight:500;color:var(--ink);margin:0 0 10px;padding:0}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt label{display:inline-flex;align-items:center;justify-content:center;min-width:56px;margin:0 6px 8px 0;padding:10px 16px;border:1px solid var(--hair);font-size:13px;letter-spacing:1px;cursor:pointer;transition:all .3s}
.opt label:hover{border-color:var(--teal)}
.opt input:checked+label{background:var(--teal);color:#fff;border-color:var(--teal)}
.opt input:focus-visible+label{outline:2px solid var(--glow);outline-offset:2px}
.pdp__qty{margin:8px 0 26px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--hair);height:54px}
.qty button{width:48px;height:100%;background:none;border:0;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center}
.qty button svg{width:10px;height:10px}
.qty input{width:44px;border:0;background:transparent;text-align:center;font:inherit;font-size:15px;color:var(--ink);-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pdp__btns{display:flex;flex-direction:column;gap:12px;max-width:460px}
.pdp__msg{font-size:14px;color:var(--teal);margin:6px 0 0}
.pdp__share{display:inline-flex;align-items:center;gap:10px;margin-top:30px;background:none;border:0;padding:0;font:inherit;font-size:10.5px;letter-spacing:3px;text-transform:uppercase;font-weight:500;color:var(--muted);cursor:pointer}
.pdp__share svg{width:13px;height:12px}
.related{border-top:1px solid var(--hair)}

/* cart */
.cart-page{padding:70px 0 100px}
.cart-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin:0 0 40px}
.cart-empty{text-align:center;padding:60px 0}
.cart-empty h1{margin-bottom:34px}
.cart-table{width:100%;border-collapse:collapse}
.cart-table th{font-size:10px;font-weight:500;letter-spacing:3px;text-transform:uppercase;text-align:left;padding:0 0 18px;border-bottom:1px solid var(--hair);color:var(--muted)}
.cart-table th:last-child,.cart-table td.tot{text-align:right}
.cart-table td{padding:30px 0;border-bottom:1px solid var(--hair);vertical-align:middle}
.cart-item__img{width:110px}
.cart-item__img img{width:100px;height:125px;object-fit:contain;background:#fff}
.cart-item__det{padding-left:30px!important}
.cart-item__det a{font-family:var(--serif);font-weight:200;font-size:24px;text-decoration:none}
.cart-item__opt{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.6}
.cart-item__q{display:flex;align-items:center;gap:10px}
.cart-item__q .qty{height:46px}
.cart-item__rm{background:none;border:0;cursor:pointer;color:var(--muted);padding:8px}
.cart-item__rm svg{width:15px;height:15px}
.cart-table td.tot{font-family:var(--serif);font-weight:200;font-size:22px}
@media (max-width:749px){.cart-table thead{display:none}.cart-table tr{display:grid;grid-template-columns:100px 1fr;column-gap:16px;padding:24px 0;border-bottom:1px solid var(--hair)}.cart-table td{padding:0;border:0}.cart-item__det{padding-left:0!important}.cart-table td.q{grid-column:2;margin-top:12px}.cart-table td.tot{display:none}}
.cart-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;margin-top:50px}
.cart-notes{flex:1 1 320px;max-width:520px;font-size:14px}
.cart-sum{flex:0 1 400px;margin-left:auto;background:#fff;padding:36px;border:1px solid var(--hair)}
.cart-sum .row{display:flex;justify-content:space-between;gap:20px;align-items:baseline;margin-bottom:10px;font-size:14px}
.cart-sum .tot{font-family:var(--serif);font-weight:200;font-size:26px;border-top:1px solid var(--hair);padding-top:16px;margin-top:16px}
.cart-sum .small{font-size:12.5px;color:var(--muted);margin:14px 0 22px}
.cart-sum .btn{width:100%}
.ful{display:flex;flex-direction:column;gap:8px;margin:0 0 22px;font-size:14px}
.ful label{display:flex;gap:10px;align-items:center;cursor:pointer}
.ful input{accent-color:var(--teal)}
.promo{display:flex;gap:10px;margin:0 0 24px;border-bottom:1px solid var(--hair)}
.promo input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:14px;padding:12px 0;outline:0}
.promo button{background:none;border:0;cursor:pointer;font:inherit;font-size:10.5px;letter-spacing:3px;text-transform:uppercase;font-weight:500;color:var(--teal)}
.cart-err{background:#fbeeee;color:#9b1c1c;padding:12px 16px;margin-bottom:18px;font-size:14px}

/* search, order, 404, cookie */
.search-page{padding:80px 0 110px}
.search-page h1{text-align:center;margin-bottom:34px}
.search-page form{max-width:680px;margin:0 auto 50px;display:flex;border-bottom:1px solid var(--ink)}
.search-page input{flex:1;border:0;background:transparent;font-family:var(--serif);font-weight:200;font-size:26px;padding:10px 0;outline:0}
.search-page button{background:none;border:0;cursor:pointer;color:var(--ink)}
.search-page button svg{width:20px;height:20px}
.search-page .meta{text-align:center;margin-bottom:40px;color:var(--muted)}
.search-page .pages{list-style:none;padding:0;margin:50px auto 0;max-width:680px}
.search-page .pages a{display:flex;justify-content:space-between;padding:18px 0;border-top:1px solid var(--hair);text-decoration:none;font-family:var(--serif);font-size:22px;font-weight:200}
.order{max-width:660px;margin:0 auto;padding:80px 0 110px;text-align:center}
.order h1{margin-bottom:16px}
.order table{width:100%;border-collapse:collapse;margin:30px 0;text-align:left}
.order td{padding:14px 0;border-bottom:1px solid var(--hair)}
.order td:last-child{text-align:right}
.nf{text-align:center;padding:120px 0 140px}
.nf h1{margin-bottom:34px}
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:70;max-width:440px;padding:24px;background:var(--porcelain);border:1px solid var(--hair);box-shadow:0 20px 50px rgba(6,56,74,.15)}
.cookie p{font-size:14px;margin:0 0 16px}
.cookie .btns{gap:10px}.cookie .btn{flex:1;min-height:46px;padding:0 16px}

/* fixes */
.hdr__book{white-space:nowrap}
.btn.btn--onimg{background:#fff;border-color:#fff;color:var(--deep)}
.btn.btn--onimg::before{background:var(--glow)}
.btn.btn--onimg:hover{color:var(--deep);border-color:var(--glow)}
.app{overflow:hidden}
.app__visual{overflow:visible}
@media (max-width:899px){.lcard{left:0}.phone--back{left:0}}
/* hero overlay = the share-card gradient (deep teal on the left fading to a light wash on the right) */
.hero::after{background:linear-gradient(90deg,rgba(6,56,74,.94) 0%,rgba(7,98,130,.72) 48%,rgba(7,98,130,.12) 100%)}

/* Book now: Treatwell's booking widget in an overlay (site.js) */
.tw{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px}
.tw__bg{position:absolute;inset:0;background:rgba(6,56,74,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.tw__panel{position:relative;width:min(980px,100%);height:min(820px,100%);background:#fff;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.tw__bar{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 22px;background:var(--porcelain);border-bottom:1px solid var(--hair);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--teal);font-weight:500}
.tw__x{background:none;border:0;color:var(--ink);cursor:pointer;padding:8px;line-height:0}
.tw__frame{flex:1;position:relative;min-height:0}
.tw__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tw__wait{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px}
.tw__fail{display:none;margin:0;padding:18px 22px;text-align:center;font-size:14px}
.tw--fail .tw__fail{display:block}.tw--fail .tw__wait{display:none}
.tw__fail a{color:var(--teal)}
html.tw-open,html.tw-open body{overflow:hidden}
@media (max-width:700px){.tw{padding:0}.tw__panel{width:100%;height:100%}}