/* Nared design languages ("skins"). A template picks one; it changes the composition, the type treatment,
   the ornaments and the signature motion of the page. Colours and fonts still come from the theme. */

/* ---------- shared: decorations a skin adds, and their motion ---------- */
.skx{pointer-events:none}
@keyframes sk-spin{to{transform:rotate(360deg)}}
@keyframes sk-mq{to{transform:translateX(-50%)}}
@keyframes sk-kb{0%{transform:scale(1.14) translate3d(1.5%,1%,0)}100%{transform:scale(1.02) translate3d(-1%,-.5%,0)}}
@keyframes sk-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
body.still .skx,body.still .skx *{animation:none!important}
@media (prefers-reduced-motion:reduce){.skx,.skx *{animation:none!important;transition:none!important}}

/* a band of words that runs across the page (street, kinetic) */
.sk-band{position:relative;overflow:hidden;white-space:nowrap;z-index:2}
.sk-band>div{display:inline-flex;width:max-content;animation:sk-mq var(--mqd,38s) linear infinite}
.sk-band span{display:inline-flex;align-items:center;gap:.6em;padding-right:.6em}

/* a round stamp with text running around it (street, kinetic) */
.sk-seal{position:absolute;width:var(--ss,148px);height:var(--ss,148px);z-index:3}
.sk-seal svg{width:100%;height:100%;animation:sk-spin 22s linear infinite;overflow:visible}
.sk-seal text{font:var(--dfw) 19px var(--display);text-transform:uppercase;fill:currentColor}
.sk-seal b{position:absolute;inset:0;display:grid;place-items:center;font:400 40px/1 var(--display)}

/* ============================== NOIR · cinema ============================== */
/* one thing: the cover opens like a film, letterbox bars slide away while the photo slowly settles */
body[data-skin="noir"] .hero::before{animation:sk-kb 14s cubic-bezier(.2,.6,.2,1) both}
body[data-skin="noir"] .sk-lb{position:absolute;inset:0;z-index:4;border-radius:inherit;overflow:hidden}
body[data-skin="noir"] .sk-lb i{position:absolute;left:0;right:0;height:50%;background:#000;transition:transform 1.5s cubic-bezier(.77,0,.18,1) .25s}
body[data-skin="noir"] .sk-lb i:first-child{top:0;transform-origin:top}body[data-skin="noir"] .sk-lb i:last-child{bottom:0;transform-origin:bottom}
body[data-skin="noir"] .sk-lb.go i{transform:scaleY(.12)}
body[data-skin="noir"] .sk-lb.go.done i{transform:scaleY(0)}
body[data-skin="noir"] .hero .status{background:transparent!important;backdrop-filter:none!important;padding-left:0;border-radius:0;font-weight:500;letter-spacing:.02em;opacity:.85}
body[data-skin="noir"] .hero h1{letter-spacing:-.02em}
body[data-skin="noir"] .hero h1 .acc{font-style:italic}
body[data-skin="noir"] .hero-p{font-size:16px;max-width:420px}
body[data-skin="noir"] .sec-h{align-items:center;flex-wrap:nowrap;gap:28px}
body[data-skin="noir"] .sec-h h2{white-space:nowrap}
body[data-skin="noir"] .sec-h::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--accent),transparent);order:1;transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.7,.2,1) .2s}
body[data-skin="noir"] .sec-h>span{order:2;white-space:nowrap}
body[data-skin="noir"] .sk-in .sec-h::after{transform:none}
body[data-skin="noir"] .row{grid-template-columns:auto minmax(24px,1fr) auto auto 44px;border-top:0;padding-block:14px}
body[data-skin="noir"] .row::before{content:'';grid-column:2;grid-row:1;align-self:end;margin-bottom:.55em;border-bottom:1.5px dotted color-mix(in srgb,var(--ink) 32%,transparent)}
body[data-skin="noir"] .row>span:first-child{grid-column:1;grid-row:1}
body[data-skin="noir"] .row .mn{grid-column:3;grid-row:1}body[data-skin="noir"] .row .pr{grid-column:4;grid-row:1}body[data-skin="noir"] .row .pl{grid-column:5;grid-row:1}
body[data-skin="noir"] .cat h3{color:var(--accent)}
body[data-skin="noir"] :is(.gi,.gft-m .gi,.tc .ph,.xa-ph) img{filter:grayscale(.85) contrast(1.08);transition:filter .9s ease,transform .9s ease}
body[data-skin="noir"] :is(.gi,.tc,.xa-ph):hover img{filter:none}
body[data-skin="noir"] .tc{background:transparent;border:0}
body[data-skin="noir"] .tc .b{padding-inline:0}
body[data-skin="noir"] .xq blockquote{font-style:italic}
@media (max-width:760px){body[data-skin="noir"] .sec-h{flex-wrap:wrap}body[data-skin="noir"] .sec-h::after{display:none}
  body[data-skin="noir"] .row{grid-template-columns:minmax(0,1fr) auto 40px}body[data-skin="noir"] .row::before{display:none}body[data-skin="noir"] .row .mn{display:none}body[data-skin="noir"] .row .pr{grid-column:2}body[data-skin="noir"] .row .pl{grid-column:3}}

/* ============================== STREET · bold ============================== */
/* one thing: a tilted band of services that runs under the opening, and a spinning stamp */
body[data-skin="street"] .hero h1{line-height:.84;letter-spacing:-.01em}
body[data-skin="street"] .hero h1 .acc{font-style:normal;color:transparent;-webkit-text-stroke:max(2px,.022em) var(--ink)}
body[data-skin="street"][data-hero="cover"] .hero h1 .acc{-webkit-text-stroke-color:#fff}
body[data-skin="street"] .hero .status{border-radius:0;background:var(--accent);color:var(--on-accent);font-weight:700;transform:rotate(-2deg)}
body[data-skin="street"] .hero .status i{background:currentColor}
body[data-skin="street"] .hero{position:relative}
body[data-skin="street"] .hero .sk-seal{right:clamp(16px,4vw,64px);top:clamp(16px,5vw,60px);color:var(--accent)}
body[data-skin="street"] .hero .sk-seal b{color:var(--ink)}
body[data-skin="street"][data-hero="cover"] .hero .sk-seal b{color:#fff}
body[data-skin="street"] .sk-band{background:var(--accent);color:var(--on-accent);transform:rotate(-2.2deg) scale(1.04);margin-block:clamp(-8px,-1vw,-4px) clamp(18px,3vw,36px);padding-block:14px;border-block:3px solid var(--ink)}
body[data-skin="street"] .sk-band span{font:var(--dfw) clamp(22px,3vw,40px)/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
body[data-skin="street"] .sk-band i{font-style:normal;font-size:.7em;opacity:.8}
body[data-skin="street"] .sec-h h2{text-transform:uppercase}
body[data-skin="street"] .sec-h h2 em{font-style:normal;color:transparent;-webkit-text-stroke:max(1.5px,.02em) var(--ink)}
body[data-skin="street"] .row{border-top:2px solid var(--ink)}
body[data-skin="street"] .row:hover{background:var(--accent);color:var(--on-accent)}
body[data-skin="street"] .row:hover :is(.ds,.mn){color:inherit;opacity:.8}
body[data-skin="street"] .sum{border-radius:0;box-shadow:8px 8px 0 var(--accent)}
body[data-skin="street"] :is(.tc,.xr-i,.why-i,.xo-i,.xs-i){border-radius:0!important;border:2px solid var(--ink)!important;box-shadow:6px 6px 0 var(--ink)!important;transition:transform .25s,box-shadow .25s}
body[data-skin="street"] :is(.tc,.xr-i,.xo-i):hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--accent)!important}
body[data-skin="street"] .xb{border-radius:0;transform:rotate(-1deg)}
body[data-skin="street"] .fq{border-bottom:2px solid var(--ink)}
body[data-skin="street"] .fq summary{text-transform:uppercase;font-weight:700}
@media (max-width:760px){body[data-skin="street"] .hero .sk-seal{--ss:96px;top:auto;bottom:18px;right:14px}body[data-skin="street"] .sk-seal text{font-size:17px}}

/* ============================== ATLAS · magazine ============================== */
/* one thing: a headline as wide as the page, and the cover photo opening as a wide strip under it */
body[data-skin="atlas"] .hero{padding-bottom:clamp(20px,3vw,40px);text-align:left!important;justify-items:stretch!important;padding-top:clamp(24px,4vw,56px)!important}
body[data-skin="atlas"] .hero>div:first-child{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"s s" "h h" "p c" "p w";column-gap:clamp(24px,5vw,90px);align-items:start;max-width:none!important;width:100%}
body[data-skin="atlas"] .hero>div:first-child>.status{grid-area:s;justify-self:start}
body[data-skin="atlas"] .hero>div:first-child>h1{grid-area:h;font-size:clamp(56px,9.6vw,164px)!important;margin-bottom:clamp(16px,2.4vw,34px)}
body[data-skin="atlas"] .hero>div:first-child>.hero-p{grid-area:p;margin:0!important}
body[data-skin="atlas"] .hero>div:first-child>.ctas{grid-area:c;justify-content:flex-start!important;margin-top:4px!important}
body[data-skin="atlas"] .hero>div:first-child>.who{grid-area:w;justify-content:flex-start!important}
@media (max-width:760px){body[data-skin="atlas"] .hero>div:first-child{grid-template-columns:minmax(0,1fr);grid-template-areas:"s" "h" "p" "w" "c"}}
body[data-skin="atlas"] .hero h1{line-height:.92;letter-spacing:-.035em}
body[data-skin="atlas"] .hero h1>span{display:block}
body[data-skin="atlas"] .hero h1 .acc{color:var(--ink);font-style:italic}
body[data-skin="atlas"] .hero .status{background:transparent;border:1px solid var(--line);color:var(--ink);font-weight:500}
body[data-skin="atlas"] .hero-p{font-family:var(--display);font-size:clamp(19px,1.6vw,23px);line-height:1.45;font-style:italic;max-width:34ch}
body[data-skin="atlas"] .sk-strip{position:relative;margin:0 auto clamp(30px,5vw,64px);height:clamp(220px,34vw,460px);overflow:hidden;clip-path:inset(0 50% 0 50%);transition:clip-path 1.6s cubic-bezier(.77,0,.18,1) .3s;border-radius:var(--r-card,0)}
body[data-skin="atlas"] .sk-strip.go{clip-path:inset(0 0 0 0)}
body[data-skin="atlas"] .sk-strip img{width:100%;height:118%;object-fit:cover;display:block;transform:translateY(var(--sy,0))}
body[data-skin="atlas"] .sk-strip figcaption{position:absolute;left:16px;bottom:12px;color:#fff;font:italic 14px var(--display);text-shadow:0 1px 8px rgba(0,0,0,.5)}
body[data-skin="atlas"] .sec-h{display:grid;grid-template-columns:1fr;gap:10px;border-bottom:1px solid var(--ink);padding-bottom:14px;margin-bottom:30px}
body[data-skin="atlas"] .sec-h h2{font-size:clamp(52px,8vw,124px);line-height:.9;letter-spacing:-.035em}
body[data-skin="atlas"] .sec-h h2 em{color:var(--ink);font-style:italic}
body[data-skin="atlas"] .sec-h>span{font-family:var(--display);font-style:italic;font-size:17px;letter-spacing:0;text-transform:none}
body[data-skin="atlas"] .cat h3{font:italic 400 20px var(--display);letter-spacing:0;text-transform:none;color:var(--accent);margin-bottom:6px}
body[data-skin="atlas"] .row .nm{font-family:var(--display);font-size:clamp(20px,1.9vw,26px)}
body[data-skin="atlas"] .row .pl{border-radius:0}
body[data-skin="atlas"] .sum{border-radius:0;background:var(--surface);color:var(--ink);box-shadow:none;border:1px solid var(--ink)}
body[data-skin="atlas"] .sum :is(.fine,.mono){color:var(--muted)}
body[data-skin="atlas"] .xq blockquote{font-style:italic;font-size:clamp(34px,4.6vw,68px);line-height:1.08}
body[data-skin="atlas"] .tc{border-radius:0;border:0;background:transparent}
body[data-skin="atlas"] .tc .ph{border-radius:0}
body[data-skin="atlas"] .tc b{font-family:var(--display);font-size:24px;font-weight:var(--dfw)}
body[data-skin="atlas"] .fq summary{font-family:var(--display);font-size:22px}
@media (max-width:760px){body[data-skin="atlas"] .sk-strip{height:56vw;margin-inline:calc(-1*var(--gut))}}

/* ============================== SWISS · precise ============================== */
/* one thing: the page sits on a visible grid and the numbers count up when they come into view */
body[data-skin="swiss"] .hero h1{letter-spacing:-.045em;line-height:.9;font-size:clamp(46px,6.2vw,100px)}
body[data-skin="swiss"] .hero h1 .acc{font-style:normal}
body[data-skin="swiss"] .hero .status{border-radius:4px}
body[data-skin="swiss"] .sk-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:30px;border-top:1px solid var(--ink);max-width:560px}
body[data-skin="swiss"] .sk-stats>div{padding:14px 14px 0 0;display:flex;flex-direction:column;gap:2px}
body[data-skin="swiss"] .sk-stats>div+div{padding-left:14px;border-left:1px solid var(--line)}
body[data-skin="swiss"] .sk-stats b{font:var(--dfw) clamp(30px,3.2vw,46px)/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
body[data-skin="swiss"] .sk-stats span{font-size:13px;color:var(--muted)}
body[data-skin="swiss"][data-hero="cover"] .sk-stats{border-color:currentColor}body[data-skin="swiss"][data-hero="cover"] .sk-stats span{color:inherit;opacity:.8}
body[data-skin="swiss"] .sec-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;border-top:2px solid var(--ink);padding-top:16px}
body[data-skin="swiss"] .sec-h h2{letter-spacing:-.04em}
body[data-skin="swiss"] .sec-h>span{justify-self:end;text-align:right}
body[data-skin="swiss"] .row{grid-template-columns:minmax(0,1fr) 90px 110px 44px}
body[data-skin="swiss"] .row .mn{text-align:right}
body[data-skin="swiss"] .row .pl{border-radius:4px}
body[data-skin="swiss"] .row:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
body[data-skin="swiss"] .sum{border-radius:6px}
body[data-skin="swiss"] :is(.tc,.xr-i,.why-i,.xo-i){border-radius:6px!important}
body[data-skin="swiss"] .xb{border-radius:6px}
@media (max-width:760px){body[data-skin="swiss"] .sec-h{grid-template-columns:1fr}body[data-skin="swiss"] .sec-h>span{justify-self:start;text-align:left}body[data-skin="swiss"] .row{grid-template-columns:minmax(0,1fr) auto 40px}body[data-skin="swiss"] .row .mn{display:none}}

/* ============================== KINETIC · split ============================== */
/* one thing: giant outlined words that slide with the scroll, faster when you scroll faster */
body[data-skin="kinetic"] .hero{position:relative}
body[data-skin="kinetic"] .hero h1{font-size:clamp(46px,6.6vw,116px)}
body[data-skin="kinetic"] .hero h1>span{display:block}
body[data-skin="kinetic"] .hero h1>span:nth-child(2){padding-left:.6em}
body[data-skin="kinetic"] .hero h1 .acc{font-style:normal}
body[data-skin="kinetic"] .hero .collage.stgw{position:relative}
body[data-skin="kinetic"] .hero .sk-seal{--ss:124px;right:-14px;top:-18px;color:var(--ink);background:var(--accent);border-radius:50%;padding:10px;box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
body[data-skin="kinetic"] .hero .sk-seal text{fill:var(--on-accent)}
body[data-skin="kinetic"] .hero .sk-seal b{color:var(--on-accent);font-size:30px}
body[data-skin="kinetic"] .sk-vel{overflow:hidden;padding-block:clamp(10px,2vw,24px);white-space:nowrap;position:relative;z-index:2}
body[data-skin="kinetic"] .sk-vel>div{display:inline-flex;width:max-content;will-change:transform}
body[data-skin="kinetic"] .sk-vel span{font:var(--dfw) clamp(64px,11vw,180px)/1 var(--display);letter-spacing:-.03em;text-transform:uppercase;color:transparent;-webkit-text-stroke:max(1px,.012em) color-mix(in srgb,var(--ink) 55%,transparent);padding-right:.35em}
body[data-skin="kinetic"] .sk-vel span:nth-child(3n+2){color:var(--accent);-webkit-text-stroke:0}
body[data-skin="kinetic"] .sec-h h2{text-transform:uppercase;letter-spacing:-.02em}
body[data-skin="kinetic"] .sec-h h2 em{font-style:normal}
body[data-skin="kinetic"] .row{transition:padding .35s cubic-bezier(.2,.7,.2,1),background .3s}
body[data-skin="kinetic"] .row:hover{padding-left:22px;background:color-mix(in srgb,var(--accent) 10%,transparent)}
body[data-skin="kinetic"] :is(.tc,.xr-i,.xo-i){transition:transform .5s cubic-bezier(.2,.7,.2,1)}
body[data-skin="kinetic"] .tc:nth-child(even){transform:translateY(36px)}
@media (max-width:760px){body[data-skin="kinetic"] .hero .sk-seal{--ss:92px;left:auto;right:8px;bottom:8px}body[data-skin="kinetic"] .tc:nth-child(even){transform:none}body[data-skin="kinetic"] .sk-seal text{font-size:18px}}

/* ============================== BENTO · tiles ============================== */
/* one thing: the opening is a grid of tiles (text, photo, next free time, rating, hours) that assemble on load */
body[data-skin="bento"] .hero{display:grid!important;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr)!important;grid-template-areas:"t t v" "t t v" "a b c";gap:12px!important;padding-block:clamp(14px,2vw,24px)!important;align-items:stretch!important;height:auto!important}
body[data-skin="bento"] .hero>div:first-child{grid-area:t;align-self:stretch!important;padding:clamp(24px,3.4vw,52px);border-radius:var(--bt-r,30px);background:var(--surface);display:flex;flex-direction:column;justify-content:center;box-shadow:inset 0 0 0 1px var(--line)}
body[data-skin="bento"] .hero .collage{grid-area:v;display:block!important;min-height:0!important;height:auto!important;border-radius:var(--bt-r,30px);overflow:hidden;background:color-mix(in srgb,var(--accent) 14%,var(--surface));box-shadow:inset 0 0 0 1px var(--line)}
body[data-skin="bento"] .hero .collage .nmo{max-width:none;height:100%;aspect-ratio:auto}
body[data-skin="bento"] .hero h1{font-size:clamp(40px,5.2vw,88px)!important;margin-top:16px!important}
body[data-skin="bento"] .hero>div:first-child :is(.hero-p,.who,.ctas){margin-top:16px!important}
body[data-skin="bento"] .sk-tile{position:relative;border-radius:var(--bt-r,30px);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);padding:22px 24px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:118px;overflow:hidden;animation:sk-tile .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
@keyframes sk-tile{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
body[data-skin="bento"] .sk-tile small{font-size:13px;color:var(--muted)}
body[data-skin="bento"] .sk-tile b{font:var(--dfw) clamp(26px,2.6vw,40px)/1.02 var(--display);letter-spacing:var(--dls)}
body[data-skin="bento"] .sk-tile.acc{background:var(--accent);color:var(--on-accent);box-shadow:none;cursor:pointer;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
body[data-skin="bento"] .sk-tile.acc:hover{transform:translateY(-4px) rotate(-.6deg)}
body[data-skin="bento"] .sk-tile.acc small{color:inherit;opacity:.78}
body[data-skin="bento"] .sk-tile .st{color:#E8B400;letter-spacing:2px}
body[data-skin="bento"] .sk-tile .dot{position:absolute;right:20px;top:20px;width:10px;height:10px;border-radius:50%;background:var(--muted)}
body[data-skin="bento"] .sk-tile .dot.on{background:#2FA35B;box-shadow:0 0 0 0 rgba(47,163,91,.5);animation:sk-ping 2s infinite}
@keyframes sk-ping{70%{box-shadow:0 0 0 12px rgba(47,163,91,0)}100%{box-shadow:0 0 0 0 rgba(47,163,91,0)}}
body[data-skin="bento"] .sk-tile.acc .ar{position:absolute;right:20px;top:18px;font-size:22px;transition:transform .35s}
body[data-skin="bento"] .sk-tile.acc:hover .ar{transform:translate(3px,-3px)}
body[data-skin="bento"] .sec-h{background:var(--surface);border-radius:var(--bt-r,30px);padding:22px 28px;box-shadow:inset 0 0 0 1px var(--line)}
body[data-skin="bento"] .svc>div:first-child{background:var(--surface);border-radius:var(--bt-r,30px);padding:clamp(16px,2.4vw,30px);box-shadow:inset 0 0 0 1px var(--line)}
body[data-skin="bento"] .svc>div:first-child .sec-h{background:transparent;box-shadow:none;padding:0}
body[data-skin="bento"] :is(.tc,.xr-i,.why-i,.xo-i,.xs-i){border-radius:var(--bt-r,30px)!important}
body[data-skin="bento"] .team{gap:12px}
body[data-skin="bento"] .fq{background:var(--surface);border-radius:22px;border:0;margin-bottom:8px;padding-inline:16px;box-shadow:inset 0 0 0 1px var(--line)}
body[data-skin="bento"] .visit{background:var(--surface);border-radius:var(--bt-r,30px);padding:clamp(20px,3vw,44px);box-shadow:inset 0 0 0 1px var(--line)}
body[data-rad="square"][data-skin="bento"]{--bt-r:8px}body[data-rad="soft"][data-skin="bento"]{--bt-r:18px}
@media (max-width:980px){body[data-skin="bento"] .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-areas:"t t" "v v" "a b" "c c"}body[data-skin="bento"] .hero .collage{min-height:360px!important}}

/* ============================== BLOOM · soft ============================== */
/* one thing: the photo sits in a living, slowly changing shape, with small soft shapes floating around it */
body[data-skin="bloom"] .hero.sk-2{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important}
body[data-skin="bloom"] .sk-blobw{position:relative;aspect-ratio:1/1;width:min(100%,560px);justify-self:center;align-self:center}
body[data-skin="bloom"] .sk-blob{position:absolute;inset:6%;overflow:hidden;border-radius:58% 42% 38% 62%/52% 38% 62% 48%;animation:sk-morph 14s ease-in-out infinite alternate;box-shadow:0 40px 80px -40px color-mix(in srgb,var(--accent) 60%,transparent)}
body[data-skin="bloom"] .sk-blob img{width:100%;height:100%;object-fit:cover;animation:sk-kb 18s ease-in-out infinite alternate}
body[data-skin="bloom"] .sk-blobw::before{content:'';position:absolute;inset:0;border-radius:42% 58% 62% 38%/45% 55% 45% 55%;background:color-mix(in srgb,var(--accent) 22%,transparent);animation:sk-morph 18s ease-in-out infinite alternate-reverse}
@keyframes sk-morph{0%{border-radius:58% 42% 38% 62%/52% 38% 62% 48%;transform:rotate(0)}50%{border-radius:40% 60% 56% 44%/60% 44% 56% 40%}100%{border-radius:62% 38% 46% 54%/40% 58% 42% 60%;transform:rotate(8deg)}}
body[data-skin="bloom"] .sk-fl{position:absolute;border-radius:50%;background:var(--c,var(--accent));opacity:.8;animation:sk-float var(--t,7s) ease-in-out infinite alternate;animation-delay:var(--d,0s)}
@keyframes sk-float{to{transform:translate3d(var(--x,10px),var(--y,-18px),0) scale(1.08)}}
body[data-skin="bloom"] .sk-blobw .sk-chip{position:absolute;left:-4%;bottom:12%;padding:12px 16px;border-radius:20px;background:var(--surface);box-shadow:0 20px 40px -20px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:2px;animation:sk-float 6s ease-in-out infinite alternate;--y:-10px;--x:4px}
body[data-skin="bloom"] .sk-chip small{font-size:12px;color:var(--muted)}body[data-skin="bloom"] .sk-chip b{font-size:16px}
body[data-skin="bloom"] .hero h1{font-size:clamp(44px,6vw,100px)}
body[data-skin="bloom"] .hero h1 .acc{font-style:italic}
body[data-skin="bloom"] .hero .status{background:var(--surface);box-shadow:0 8px 20px -12px rgba(0,0,0,.3)}
body[data-skin="bloom"] .sec-h{flex-direction:column;align-items:center;text-align:center}
body[data-skin="bloom"] .sec-h h2{position:relative;padding-bottom:16px}
body[data-skin="bloom"] .sk-sq{position:absolute;left:50%;bottom:-2px;width:130px;height:16px;transform:translateX(-50%);color:var(--accent);overflow:visible}
body[data-skin="bloom"] .sk-sq path{fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:140;stroke-dashoffset:140;transition:stroke-dashoffset 1.2s ease .3s}
body[data-skin="bloom"] .sk-in .sk-sq path{stroke-dashoffset:0}
body[data-skin="bloom"] .row{border-radius:20px;border-top:0;margin-bottom:6px;background:color-mix(in srgb,var(--surface) 70%,transparent);padding-inline:18px}
body[data-skin="bloom"] .row:hover{background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
body[data-skin="bloom"] .cat h3{text-align:left}
body[data-skin="bloom"] :is(.tc,.xr-i,.why-i,.xo-i){border-radius:32px!important}
body[data-skin="bloom"] .tc .ph{border-radius:999px 999px 24px 24px;margin:12px 12px 0}
body[data-skin="bloom"] .fq{border:0;background:color-mix(in srgb,var(--surface) 70%,transparent);border-radius:24px;margin-bottom:8px;padding-inline:18px}
@media (max-width:980px){body[data-skin="bloom"] .hero.sk-2{grid-template-columns:minmax(0,1fr)!important}body[data-skin="bloom"] .sk-blobw{width:min(86vw,420px)}}

/* ============================== AURORA · glow ============================== */
/* one thing: slow northern lights behind glass; cards light up under the pointer */
body[data-skin="aurora"] .sk-aur{position:fixed;inset:-20vmax;z-index:0;overflow:hidden;filter:blur(70px) saturate(140%);opacity:.55}
body[data-skin="aurora"] .sk-aur i{position:absolute;width:55vmax;height:55vmax;border-radius:50%;mix-blend-mode:screen;animation:sk-aur 26s ease-in-out infinite alternate}
body[data-skin="aurora"] .sk-aur i:nth-child(1){left:10%;top:0;background:radial-gradient(closest-side,var(--accent),transparent)}
body[data-skin="aurora"] .sk-aur i:nth-child(2){right:0;top:20%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 40%,#5B6CFF),transparent);animation-duration:32s;animation-direction:alternate-reverse}
body[data-skin="aurora"] .sk-aur i:nth-child(3){left:30%;bottom:-10%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 30%,#FF4FD8),transparent);animation-duration:38s}
@keyframes sk-aur{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(12vmax,8vmax,0) scale(1.15)}100%{transform:translate3d(-8vmax,14vmax,0) scale(.9)}}
body[data-skin="aurora"] #main,body[data-skin="aurora"] .top{position:relative;z-index:1}
body[data-skin="aurora"] .hero h1{font-size:clamp(46px,6.2vw,104px);background:linear-gradient(100deg,var(--ink) 30%,var(--accent) 70%,var(--ink));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:sk-sheen 9s ease-in-out infinite alternate}
body[data-skin="aurora"] .hero h1 span,body[data-skin="aurora"] .hero h1 .acc{color:transparent!important;-webkit-text-fill-color:transparent}
body[data-skin="aurora"] .hero h1 *{background:inherit;-webkit-background-clip:text;background-clip:text}
@keyframes sk-sheen{to{background-position:100% 0}}
body[data-skin="aurora"] :is(.tc,.xr-i,.why-i,.xo-i,.xs-i,.sum,.fq,.sec-h+.faq){backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
body[data-skin="aurora"] :is(.tc,.xr-i,.why-i,.xo-i,.xs-i){background:color-mix(in srgb,var(--surface) 55%,transparent)!important;border:1px solid color-mix(in srgb,var(--ink) 14%,transparent)!important;position:relative;overflow:hidden}
body[data-skin="aurora"] :is(.tc,.xr-i,.why-i,.xo-i,.xs-i)::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(260px circle at var(--mx,-300px) var(--my,-300px),color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%);opacity:0;transition:opacity .3s}
body[data-skin="aurora"] :is(.tc,.xr-i,.why-i,.xo-i,.xs-i):hover::after{opacity:1}
body[data-skin="aurora"] .sum{background:color-mix(in srgb,var(--surface) 60%,transparent);color:var(--ink);border:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
body[data-skin="aurora"] .sum :is(.fine,.mono){color:var(--muted)}
body[data-skin="aurora"] .row{border-top-color:color-mix(in srgb,var(--ink) 10%,transparent)}
body[data-skin="aurora"] .row:hover .nm{color:var(--accent)}
body[data-skin="aurora"] .sec-h h2 em{background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 40%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ============================== ZEN · calm ============================== */
/* one thing: an arched photo and a single line drawing itself, like a brush stroke */
body[data-skin="zen"] .hero.sk-2{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)!important;align-items:end!important}
body[data-skin="zen"] .sk-archw{position:relative;justify-self:center;width:min(100%,440px)}
body[data-skin="zen"] .sk-arch{position:relative;width:100%;aspect-ratio:3/4.1;border-radius:999px 999px 18px 18px;overflow:hidden;box-shadow:0 50px 90px -60px rgba(0,0,0,.6)}
body[data-skin="zen"] .sk-arch img{width:100%;height:112%;object-fit:cover;transform:translateY(var(--sy,0));animation:sk-kb 22s ease-in-out infinite alternate}
body[data-skin="zen"] .sk-line{position:absolute;pointer-events:none;color:var(--accent);z-index:3}
body[data-skin="zen"] .sk-line path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:var(--len,1400);stroke-dashoffset:var(--len,1400);transition:stroke-dashoffset 3.2s cubic-bezier(.4,.1,.2,1) .4s}
body[data-skin="zen"] .sk-line.go path{stroke-dashoffset:0}
body[data-skin="zen"] .hero .sk-line{left:-6%;bottom:-4%;width:clamp(160px,22vw,300px)}
body[data-skin="zen"] .hero h1{font-weight:400;font-size:clamp(46px,6.6vw,112px)}
body[data-skin="zen"] .hero h1 .acc{font-style:italic}
body[data-skin="zen"] .hero .status{background:transparent;border:1px solid var(--line);color:var(--ink)}
body[data-skin="zen"] .sec-h{flex-direction:column;align-items:center;text-align:center;gap:8px}
body[data-skin="zen"] .sec-h h2{font-weight:400}
body[data-skin="zen"] .sec-h::before{content:'';width:1px;height:44px;background:var(--accent);margin-bottom:10px;transform:scaleY(0);transform-origin:top;transition:transform 1.2s ease .2s}
body[data-skin="zen"] .sk-in .sec-h::before{transform:none}
body[data-skin="zen"] .svc>div:first-child{max-width:760px}
body[data-skin="zen"] .row{border-top-style:dashed}
body[data-skin="zen"] .row .nm{font-family:var(--display);font-size:clamp(19px,1.8vw,24px)}
body[data-skin="zen"] :is(.tc,.xr-i,.why-i,.xo-i){border-radius:24px!important;background:transparent!important;border:1px solid var(--line)!important;box-shadow:none!important}
body[data-skin="zen"] .tc .ph{border-radius:999px 999px 0 0}
body[data-skin="zen"] .xq blockquote{font-weight:400;font-style:italic}
body[data-skin="zen"] .sum{border-radius:24px;background:var(--surface);color:var(--ink);box-shadow:none;border:1px solid var(--line)}
body[data-skin="zen"] .sum :is(.fine,.mono){color:var(--muted)}
@media (max-width:980px){body[data-skin="zen"] .hero.sk-2{grid-template-columns:minmax(0,1fr)!important}body[data-skin="zen"] .sk-archw{width:min(78vw,360px)}}

/* ============================== POP · playful ============================== */
/* one thing: stickers that bounce in and wobble when you point at them */
body[data-skin="pop"] .hero h1{letter-spacing:-.02em;font-size:clamp(44px,6vw,100px)}
body[data-skin="pop"] .hero h1 .acc{font-style:normal;display:inline-block!important;background:var(--accent);color:var(--on-accent)!important;padding:0 .14em;border-radius:.16em;transform:rotate(-2deg);margin-top:.06em}
body[data-skin="pop"] .hero .status{border:2px solid var(--ink);background:var(--surface);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
body[data-skin="pop"] .sk-stk{position:absolute;z-index:4;padding:10px 16px;border-radius:999px;border:2.5px solid var(--ink);background:var(--c,#FFD84D);color:#1A1A1A;font:700 15px/1.1 var(--body);box-shadow:4px 4px 0 var(--ink);transform:rotate(var(--r,-6deg));animation:sk-pop .9s cubic-bezier(.3,1.6,.5,1) both;animation-delay:var(--d,.5s);pointer-events:auto;cursor:default;white-space:nowrap}
body[data-skin="pop"] .sk-stk:hover{animation:sk-wob .5s ease}
@keyframes sk-pop{from{opacity:0;transform:scale(.3) rotate(calc(var(--r,-6deg) - 25deg))}to{opacity:1;transform:rotate(var(--r,-6deg))}}
@keyframes sk-wob{0%,100%{transform:rotate(var(--r,-6deg))}25%{transform:rotate(calc(var(--r,-6deg) + 8deg)) scale(1.06)}75%{transform:rotate(calc(var(--r,-6deg) - 6deg))}}
body[data-skin="pop"] .hero .collage{position:relative}
body[data-skin="pop"] :is(.tc,.xr-i,.why-i,.xo-i,.xs-i){border:2.5px solid var(--ink)!important;box-shadow:6px 6px 0 var(--accent)!important;border-radius:26px!important;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
body[data-skin="pop"] :is(.tc,.xr-i,.xo-i):hover{transform:rotate(-1.2deg) translateY(-4px)}
body[data-skin="pop"] .tc:nth-child(odd){--rot:1deg}
body[data-skin="pop"] .sec-h h2 em{font-style:normal;background:var(--accent);color:var(--on-accent);padding:0 .12em;border-radius:.14em;display:inline-block;transform:rotate(-2deg)}
body[data-skin="pop"] .row{border-top:2px dashed color-mix(in srgb,var(--ink) 30%,transparent)}
body[data-skin="pop"] .row .pl{border:2px solid var(--ink)}
body[data-skin="pop"] .row:hover .pl{background:var(--accent);color:var(--on-accent);transform:rotate(90deg) scale(1.1)}
body[data-skin="pop"] .sum{border:2.5px solid var(--ink);box-shadow:8px 8px 0 var(--accent)}
body[data-skin="pop"] .fq{border:2.5px solid var(--ink);border-radius:22px;margin-bottom:10px;padding-inline:16px;background:var(--surface)}
body[data-skin="pop"] .xb{border:2.5px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
@media (max-width:760px){body[data-skin="pop"] .sk-stk{font-size:13px;padding:8px 12px}}
/* ---------- navigation styles ---------- */
body.nl0 .links{display:none!important}
body.nb0 .top .btn{display:none!important}
body.ns0 .top{position:relative}
.nav-mb{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);place-items:center;cursor:pointer;flex:none}
.nav-mb span,.nav-mb span::before,.nav-mb span::after{display:block;width:16px;height:1.8px;border-radius:2px;background:currentColor;position:relative;transition:transform .3s,opacity .3s}
.nav-mb span::before,.nav-mb span::after{content:'';position:absolute;left:0}.nav-mb span::before{top:-5px}.nav-mb span::after{top:5px}
.top.open .nav-mb span{background:transparent}.top.open .nav-mb span::before{transform:translateY(5px) rotate(45deg)}.top.open .nav-mb span::after{transform:translateY(-5px) rotate(-45deg)}
body[data-navs="pill"] .top{background:transparent!important;border-bottom-color:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding-top:12px;color:inherit}
body[data-navs="pill"] .top-in{max-width:min(1160px,calc(100% - 24px));height:64px;padding:0 9px 0 26px;border-radius:999px;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 14px 36px -20px rgba(0,0,0,.4),inset 0 0 0 1px var(--line)}
body[data-navs="pill"][data-nav="accent"] .top-in{background:var(--accent);color:var(--on-accent)}
body[data-navs="pill"] .brand b{font-size:24px}
@media (max-width:760px){body[data-navs="pill"] .top-in{height:56px;padding:0 7px 0 18px}body[data-navs="pill"] .brand b{font-size:20px}}
body[data-navs="center"] .top-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
body[data-navs="center"] .links{order:-1;justify-self:start}
body[data-navs="center"] .brand{align-items:center;text-align:center}
body[data-navs="center"] .top-in>:is(.btn,.top-act){justify-self:end}
@media (max-width:860px){body[data-navs="center"] .top-in{display:flex;justify-content:space-between}body[data-navs="center"] .brand{align-items:flex-start;text-align:left}}
body[data-navs="min"] .links{display:none}
body[data-navs="min"] .nav-mb{display:grid}
body[data-navs="min"] .top-in{position:relative}
body[data-navs="min"] .top.open .links{display:flex!important;position:absolute;top:calc(100% + 8px);right:var(--pad,20px);flex-direction:column;gap:4px;min-width:220px;padding:10px;border-radius:20px;background:var(--surface);color:var(--ink);box-shadow:0 24px 60px -24px rgba(0,0,0,.45),inset 0 0 0 1px var(--line);z-index:5}
body[data-navs="min"] .top.open .links a{padding:10px 14px;border-radius:12px;font-size:16px}body[data-navs="min"] .top.open .links a:hover{background:var(--sunken)}body[data-navs="min"] .top.open .links a::after{display:none}
body[data-navs="clear"] .top{background:transparent!important;border-bottom-color:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transition:background .35s,border-color .35s}
body[data-navs="clear"].scd .top{background:color-mix(in srgb,var(--bg) 88%,transparent)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;border-bottom-color:var(--line)!important}
body[data-navs="line"] .top-in{height:auto;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:". b a" "l l l";row-gap:8px;padding-top:14px}
body[data-navs="line"] .brand{grid-area:b;align-items:center;text-align:center}
body[data-navs="line"] .links{grid-area:l;justify-content:center;border-top:1px solid var(--line);padding:11px 0 13px;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
body[data-navs="line"] .top-in>:is(.btn,.top-act){grid-area:a;justify-self:end}
@media (max-width:760px){body[data-navs="line"] .top-in{grid-template-areas:"b a";grid-template-columns:minmax(0,1fr) auto;padding-block:10px}body[data-navs="line"] .brand{align-items:flex-start;text-align:left}}
body[data-navs="min"] .top-in>:is(.btn,.top-act){margin-left:auto}

/* ---------- more buttons ---------- */
body[data-btn="roll"] :is(.btn-a,.mbar .btn):not([data-v]:not([data-v=""])){background:var(--bf);color:var(--bt)}
body[data-btn="roll"] :is(.btn-a,.mbar .btn):not([data-v]:not([data-v=""]))::before{display:none}
body[data-btn="roll"] .btn>span:first-child{display:inline-block;transition:transform .45s cubic-bezier(.7,0,.2,1);text-shadow:0 2.2em currentColor}
body[data-btn="roll"] .btn:is(:hover,.demo)>span:first-child{transform:translateY(-2.2em)}
body[data-btn="roll"] .btn .arr{transition:transform .45s cubic-bezier(.7,0,.2,1)}body[data-btn="roll"] .btn:hover .arr{transform:translateX(4px) rotate(-45deg)}
body[data-btn="fill"] :is(.btn-a,.mbar .btn):not([data-v]:not([data-v=""])){background:transparent;color:var(--bf);box-shadow:inset 0 0 0 2px var(--bf)}
body[data-btn="fill"] :is(.btn-a,.mbar .btn):not([data-v]:not([data-v=""]))::before{background:var(--bf);transform:translateX(-101%);transition:transform .5s cubic-bezier(.7,0,.2,1)}
body[data-btn="fill"] :is(.btn-a,.mbar .btn):not([data-v]:not([data-v=""])):is(:hover,.demo){color:var(--bt)}
body[data-btn="fill"] :is(.btn-a,.mbar .btn):not([data-v]:not([data-v=""])):is(:hover,.demo)::before{transform:none}
body[data-btn="fill"] .hero .btn-a:not([data-v]:not([data-v=""])){background:var(--bf);color:var(--bt)}
body[data-btn="sticker"] :is(.btn-a,.mbar .btn):not([data-v]:not([data-v=""])){background:var(--bf);color:var(--bt);border-radius:16px;transform:rotate(-2deg);box-shadow:inset 0 0 0 2.5px var(--ink),5px 5px 0 var(--ink);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
body[data-btn="sticker"] :is(.btn-a,.mbar .btn):not([data-v]:not([data-v=""]))::before{display:none}
body[data-btn="sticker"] :is(.btn-a,.mbar .btn):not([data-v]:not([data-v=""])):is(:hover,.demo){color:var(--bt);transform:rotate(1.5deg) scale(1.05)}
body[data-btn="sticker"] .btn-l:not([data-v]:not([data-v=""])){border:0;border-radius:16px;box-shadow:inset 0 0 0 2.5px var(--ink);background:var(--surface)}

/* ---------- more cards ---------- */
body[data-card="offset"] :is(.why-i,.xr-i,.xs-i,.xo-i){background:var(--surface)!important;border:2px solid var(--ink)!important;box-shadow:6px 6px 0 var(--accent)!important}
body[data-card="glass"] :is(.why-i,.xr-i,.xs-i,.xo-i){background:color-mix(in srgb,var(--surface) 55%,transparent)!important;border:1px solid color-mix(in srgb,var(--ink) 13%,transparent)!important;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 25%,transparent),0 20px 40px -26px rgba(0,0,0,.5)!important}
body[data-card="grad"] :is(.why-i,.xr-i,.xs-i,.xo-i){border:1.5px solid transparent!important;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,var(--accent),transparent 55%,color-mix(in srgb,var(--accent) 50%,transparent)) border-box!important;box-shadow:none!important}
body[data-card="notch"] :is(.why-i,.xr-i,.xs-i,.xo-i){border-radius:0!important;border:0!important;background:color-mix(in srgb,var(--ink) 6%,var(--surface))!important;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));box-shadow:none!important}
body[data-card="paper"] :is(.why-i,.xr-i,.xs-i,.xo-i){background:var(--surface)!important;border:0!important;border-radius:4px!important;box-shadow:0 1px 1px rgba(0,0,0,.08),0 14px 26px -14px rgba(0,0,0,.35)!important;transform:rotate(-1deg)}
body[data-card="paper"] :is(.why-i,.xr-i,.xs-i,.xo-i):nth-child(even){transform:rotate(1.2deg)}
body[data-card="arch"] :is(.why-i,.xr-i,.xs-i,.xo-i){border-radius:200px 200px 22px 22px!important;padding-top:44px!important;background:color-mix(in srgb,var(--accent) 7%,var(--surface))!important;border:1px solid var(--line)!important;box-shadow:none!important;text-align:center;align-items:center}

/* ---------- more backgrounds ---------- */
body[data-tex="film"]::before{mix-blend-mode:normal!important;opacity:1!important;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.42)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body[data-tex="film"][data-texo="l"]::before{opacity:.6!important}
body[data-tex="cols"]::before{mix-blend-mode:normal!important;background-image:linear-gradient(90deg,color-mix(in srgb,var(--ink) 9%,transparent) 1px,transparent 1px)!important;background-size:calc((min(100vw,1360px) - 2*var(--gut,24px)) / 6) 100%;background-position:max(var(--gut,24px),calc(50vw - 680px + var(--gut,24px))) 0}
body[data-tex="mesh"]::before{mix-blend-mode:normal!important;background:radial-gradient(40vmax 30vmax at 8% 10%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),radial-gradient(36vmax 30vmax at 92% 30%,color-mix(in srgb,var(--accent) 12%,#9FD3FF 10%),transparent 70%),radial-gradient(40vmax 34vmax at 40% 100%,color-mix(in srgb,var(--accent) 14%,#FFC2D9 10%),transparent 70%)!important}
body[data-tex="topo"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23888' stroke-opacity='.4' stroke-width='1'%3E%3Cpath d='M-20 60 C 40 20, 90 90, 150 60 S 260 20, 320 60'/%3E%3Cpath d='M-20 90 C 40 50, 90 120, 150 90 S 260 50, 320 90'/%3E%3Cpath d='M-20 150 C 50 120, 100 190, 160 150 S 250 110, 320 150'/%3E%3Cpath d='M-20 180 C 50 150, 100 220, 160 180 S 250 140, 320 180'/%3E%3Cpath d='M-20 240 C 60 210, 110 280, 170 240 S 250 200, 320 240'/%3E%3Cellipse cx='230' cy='250' rx='26' ry='14'/%3E%3Cellipse cx='60' cy='120' rx='18' ry='9'/%3E%3C/g%3E%3C/svg%3E")}
body[data-tex="halftone"]::before{background-image:radial-gradient(color-mix(in srgb,var(--ink) 30%,transparent) 1.2px,transparent 1.8px)!important;background-size:12px 12px;-webkit-mask:linear-gradient(160deg,#000,transparent 60%);mask:linear-gradient(160deg,#000,transparent 60%)}
body[data-tex="confetti"]::before{background-image:radial-gradient(color-mix(in srgb,var(--ink) 16%,transparent) 1px,transparent 1.4px)!important;background-size:22px 22px!important;opacity:.5}
body[data-tex="aurora"]::before{mix-blend-mode:normal!important;background:radial-gradient(50vmax 36vmax at 15% 0%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 70%),radial-gradient(46vmax 36vmax at 90% 40%,color-mix(in srgb,var(--accent) 22%,#6E5BFF 18%),transparent 70%),radial-gradient(40vmax 30vmax at 40% 100%,color-mix(in srgb,var(--accent) 18%,#FF4FD8 14%),transparent 70%)!important;background-size:140% 140%!important;animation:sk-aurtex 24s ease-in-out infinite alternate}
@keyframes sk-aurtex{to{background-position:100% 60%}}
@media (prefers-reduced-motion:reduce){body[data-tex="aurora"]::before{animation:none}}
/* cards that carry their own colour keep it whatever the card style */
body[data-card] .xo-i.hot{background:var(--ink)!important;color:var(--bg)!important}
body[data-card] [data-sv="wall"] .xr-i:nth-child(3n+2),body[data-skin] [data-sv="wall"] .xr-i:nth-child(3n+2){background:var(--accent)!important;color:var(--on-accent)!important}
body[data-skin="street"] [data-sv="wall"] .xr-i:nth-child(3n+2) :is(.xr-q,.xr-s){color:inherit}

/* =================== signature moments (lib/skins.js SIG) =================== */
#main>.hero,.hero .collage,.sk-blobw,.sk-archw,.sk-strip{position:relative}
.hero>div:first-child{position:relative}
.skx svg{overflow:visible}
@keyframes sg-draw{to{stroke-dashoffset:0}}
.sg-flash path,.sg-stencil path,.sg-brow path,.sg-doodle path,.sg-doodle circle,.sg-lashline path{stroke-dasharray:var(--l,600);stroke-dashoffset:var(--l,600)}
:is(.sg-flash,.sg-stencil,.sg-brow,.sg-doodle,.sg-lashline).go :is(path,circle){animation:sg-draw 2.6s cubic-bezier(.45,.05,.2,1) forwards}

/* crest: a big round emblem turning slowly behind the headline */
.sg-crest{position:absolute;right:clamp(-20px,2vw,40px);top:clamp(10px,4vw,50px);width:clamp(150px,18vw,250px);aspect-ratio:1;color:var(--accent);z-index:0;opacity:.9}
.sg-crest>svg:first-child{width:100%;height:100%;animation:sk-spin 40s linear infinite}
.sg-crest circle{fill:none;stroke:currentColor;stroke-width:1.2}
.sg-crest text{font:var(--dfw) 13px var(--display);letter-spacing:.06em;text-transform:uppercase;fill:currentColor}
.sg-cico{position:absolute;left:28%;top:36%;width:44%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linejoin:round}
body[data-skin="atlas"] .sg-crest{top:auto;bottom:clamp(30px,6vw,90px);right:clamp(10px,4vw,60px)}
@media (max-width:760px){.sg-crest,body[data-skin="atlas"] .sg-crest{width:104px;right:10px;top:10px;bottom:auto;opacity:1;z-index:3;color:#F3E2B0;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}}

/* gold leaf: the headline is gilded and a light runs over it */
#heroH.sg-gold,#heroH.sg-gold *{background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 70%,#5A3E10) 0%,var(--accent) 30%,#FFF1C2 46%,var(--accent) 56%,color-mix(in srgb,var(--accent) 60%,#5A3E10) 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;animation:sg-gold 5.5s cubic-bezier(.4,0,.2,1) .6s infinite}
@keyframes sg-gold{0%{background-position:100% 0}45%,100%{background-position:0 0}}

/* barber pole */
.sg-pole{position:absolute;left:clamp(-40px,-2.4vw,-20px);top:12%;bottom:12%;width:30px;z-index:4}
.sg-pole i{position:absolute;inset:16px 3px;border-radius:14px;background:repeating-linear-gradient(-45deg,#D3202A 0 12px,#fff 12px 22px,#1D3FA0 22px 34px,#fff 34px 44px);background-size:100% 62px;animation:sg-pole 1.6s linear infinite;box-shadow:inset 6px 0 8px rgba(255,255,255,.55),inset -6px 0 10px rgba(0,0,0,.28),0 10px 24px -10px rgba(0,0,0,.5)}
.sg-pole b{position:absolute;left:0;right:0;height:18px;border-radius:9px;background:linear-gradient(90deg,#8B9096,#F2F4F6 40%,#8B9096)}.sg-pole b:first-of-type{top:0}.sg-pole b:last-of-type{bottom:0}
@keyframes sg-pole{to{background-position:0 62px}}
@media (max-width:760px){.sg-pole{left:auto;right:6px;width:20px;top:8%;bottom:8%}}

/* steam rising over the photo */
.sg-steam{position:absolute;left:50%;bottom:22%;width:120px;height:200px;transform:translateX(-50%);z-index:4;pointer-events:none}
.sg-steam svg{position:absolute;bottom:0;width:36px;height:160px;left:calc(var(--i)*36px);opacity:0;animation:sg-steam 6s ease-in-out infinite;animation-delay:calc(var(--i)*1.7s);filter:blur(3px)}
.sg-steam path{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;opacity:.55}
@keyframes sg-steam{0%{opacity:0;transform:translateY(30px) scaleY(.6)}30%{opacity:.8}100%{opacity:0;transform:translateY(-70px) scaleY(1.1) skewX(8deg)}}

/* slice: a red line cuts across and the picture opens along it */
.sg-cut{clip-path:polygon(0 0,0 0,0 0,0 0);transition:clip-path 1.25s cubic-bezier(.77,0,.18,1) .45s}
.sg-cut.go{clip-path:polygon(0 0,140% 0,0 140%,0 0)}
.sg-cut.go{clip-path:polygon(-40% -40%,140% -40%,140% 140%,-40% 140%)}
.sg-slash{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:visible}
.sg-slash i{position:absolute;left:-10%;top:50%;width:120%;height:2px;background:var(--accent);transform:rotate(-24deg) scaleX(0);transform-origin:left;box-shadow:0 0 14px var(--accent)}
.sg-slash.go i{animation:sg-slash 1.3s cubic-bezier(.77,0,.18,1) .2s forwards}
@keyframes sg-slash{0%{transform:rotate(-24deg) scaleX(0)}55%{transform:rotate(-24deg) scaleX(1);opacity:1}100%{transform:rotate(-24deg) scaleX(1);opacity:0}}
body.sg-razorh .sec-h h2{position:relative}
body.sg-razorh .sec-h h2::after{content:'';position:absolute;left:0;bottom:-10px;height:2px;width:0;background:var(--accent);transition:width 1.2s cubic-bezier(.77,0,.18,1) .2s}
body.sg-razorh .sk-in .sec-h h2::after{width:min(140px,40%)}

/* checkerboard band */
.sg-tiles{height:44px;overflow:hidden;position:relative;z-index:2;margin-block:6px 18px}
.sg-tiles i{position:absolute;inset:0 -88px 0 0;background:conic-gradient(var(--ink) 25%,var(--bg) 0 50%,var(--ink) 0 75%,var(--bg) 0) 0 0/44px 44px;animation:sg-tiles 3s linear infinite}
@keyframes sg-tiles{to{transform:translateX(-88px)}}

/* letterboard prices */
body.sg-board .svc>div:first-child{background:#141414 repeating-linear-gradient(180deg,#1d1d1d 0 3px,#121212 3px 7px);color:#F5F2EA;border-radius:16px;padding:clamp(18px,3vw,36px);box-shadow:inset 0 0 0 8px #3a2a1c,inset 0 0 0 10px #000,0 30px 60px -30px rgba(0,0,0,.6)}
body.sg-board .svc>div:first-child :is(.nm,.pr,.mn,h2,h3){font-family:var(--mono)!important;text-transform:uppercase;letter-spacing:.08em;color:#F5F2EA}
body.sg-board .svc>div:first-child .sec-h h2{font-size:clamp(28px,4vw,48px)!important;letter-spacing:.12em}
body.sg-board .svc .row{border-top:1px dashed rgba(255,255,255,.18)!important;background:transparent!important}
body.sg-board .svc .row .ds,body.sg-board .svc .sec-h span{color:rgba(245,242,234,.6)!important}
body.sg-board .svc .row .pl{border-color:rgba(255,255,255,.4)!important;color:#fff}
body.sg-board .svc .cat h3{color:var(--accent)!important}

/* hair strands */
.sg-strands{position:absolute;inset:18% -22% 8%;z-index:3;pointer-events:none;color:var(--accent)}
.sg-strands svg{width:100%;height:100%}
.sg-strands path{fill:none;stroke:currentColor;stroke-width:1.6;opacity:calc(.5 + var(--i)*.06);stroke-dasharray:420 200;animation:sg-flow calc(7s + var(--i)*.7s) linear infinite;vector-effect:non-scaling-stroke}
@keyframes sg-flow{to{stroke-dashoffset:-620}}

/* masthead */
.sg-mast{margin-bottom:clamp(10px,2vw,22px);border-bottom:1px solid var(--ink);padding-bottom:10px;width:100%}
.sg-mast b{display:block;font:var(--dfw) clamp(54px,12vw,200px)/.82 var(--display);letter-spacing:-.045em;text-transform:uppercase;overflow:hidden;white-space:nowrap}
.sg-mast b span{display:inline-block;animation:sg-mast .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*45ms)}
@keyframes sg-mast{from{transform:translateY(105%)}}
.sg-mast small{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font:500 12px var(--body);color:var(--muted)}
body.sg-hasmast .hero h1,body.sg-hasmast[data-skin] .hero>div:first-child>h1{font-size:clamp(40px,5.6vw,92px)!important}
body[data-skin="atlas"].sg-hasmast .hero>div:first-child{grid-template-areas:"m m" "s s" "h h" "p c" "p w"}
body[data-skin="atlas"] .sg-mast{grid-area:m}
@media (max-width:760px){body[data-skin="atlas"].sg-hasmast .hero>div:first-child{grid-template-areas:"m" "s" "h" "p" "w" "c"}}

/* hair colour tones */
.sg-tones{display:flex;align-items:center;gap:8px;margin-top:20px;flex-wrap:wrap}
.sg-tones i{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 60%,#fff),var(--c) 60%);box-shadow:0 0 0 2px var(--surface),0 6px 12px -6px rgba(0,0,0,.4);transition:transform .35s cubic-bezier(.3,1.6,.5,1);animation:sk-tile .6s both;animation-delay:calc(.4s + var(--i)*.08s)}
.sg-tones i:hover{transform:translateY(-4px) scale(1.15)}
.sg-tones small{font-size:13px;color:var(--muted);margin-left:6px}

/* hollywood mirror bulbs */
.sg-bulbs{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit}
.sg-bulbs i{position:absolute;width:13px;height:13px;margin:-6.5px;border-radius:50%;background:#FFF4D6;box-shadow:0 0 6px 2px rgba(255,220,150,.7),0 0 22px 6px rgba(255,200,120,.35);animation:sg-bulb 3.2s ease-in-out infinite;animation-delay:calc(var(--k)*90ms)}
@keyframes sg-bulb{0%,100%{opacity:1}50%{opacity:.45;box-shadow:0 0 3px 1px rgba(255,220,150,.5)}}
@media (max-width:760px){.sg-bulbs i{width:9px;height:9px;margin:-4.5px}}

/* scissors cutting a dashed line */
.sg-snip{position:relative;height:40px;margin-block:-20px;z-index:3;pointer-events:none}
.sg-snip>i{position:absolute;left:var(--gut,24px);right:var(--gut,24px);top:50%;border-top:2px dashed color-mix(in srgb,var(--ink) 35%,transparent);clip-path:inset(0 0 0 0)}
.sg-snip.go>i{animation:sg-cutl 2.6s cubic-bezier(.6,0,.3,1) forwards}
@keyframes sg-cutl{to{clip-path:inset(0 0 0 100%)}}
.sg-sc{position:absolute;left:var(--gut,24px);top:50%;width:46px;transform:translate(-50%,-50%);fill:none;stroke:var(--accent);stroke-width:3.2;stroke-linecap:round}
.sg-snip.go .sg-sc{animation:sg-scm 2.6s cubic-bezier(.6,0,.3,1) forwards}
@keyframes sg-scm{to{left:calc(100% - var(--gut,24px))}}

/* nail polish drip */
.sg-drip{position:absolute;width:30px;z-index:3;color:var(--accent);transform-origin:top center;animation:sg-drip 5.5s cubic-bezier(.5,0,.3,1) 1s infinite;opacity:0}
.sg-drip svg{width:100%;fill:currentColor}.sg-drip .hl{fill:#fff;opacity:.55}
@keyframes sg-drip{0%{opacity:0;transform:scaleY(.1)}10%{opacity:1}45%{transform:scaleY(1)}70%{transform:scaleY(1) translateY(20px);opacity:1}85%,100%{transform:scaleY(1.1) translateY(80px);opacity:0}}

/* liquid chrome headline */
#heroH.sg-chrome,#heroH.sg-chrome *{background:linear-gradient(110deg,#8E8FA3 0%,#F7F8FF 18%,#9EA0B8 32%,color-mix(in srgb,var(--accent) 70%,#fff) 48%,#E9EBF7 62%,#7C7E95 78%,#F4F5FF 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;animation:sg-chrome 9s ease-in-out infinite alternate;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
@keyframes sg-chrome{to{background-position:100% 0}}

/* polish-drop cursor */
.sg-cur{position:fixed;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50% 50% 50% 0;transform-origin:center;background:var(--accent);z-index:2147483000;pointer-events:none;mix-blend-mode:multiply;transition:width .25s,height .25s,margin .25s;box-shadow:inset -3px -3px 0 rgba(0,0,0,.12),inset 3px 3px 0 rgba(255,255,255,.4)}
.sg-cur.big{width:44px;height:44px;margin:-22px 0 0 -22px;opacity:.6}

/* fan of polished nails */
.sg-fan{position:absolute;right:6%;bottom:6%;width:150px;height:120px;z-index:4;pointer-events:none}
.sg-fan i{position:absolute;left:50%;bottom:0;width:30px;height:84px;margin-left:-15px;border-radius:50% 50% 14px 14px/62% 62% 14px 14px;background:linear-gradient(105deg,rgba(255,255,255,.55) 8%,transparent 30%),var(--c);box-shadow:0 10px 20px -10px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.08);transform-origin:50% 120%;transform:rotate(0);transition:transform 1s cubic-bezier(.3,1.4,.5,1);transition-delay:calc(var(--i)*70ms)}
.sg-fan.go i{transform:rotate(calc((var(--i) - 2)*17deg))}

/* french tip under titles */
body.sg-tip .sec-h h2{position:relative;padding-bottom:18px}
body.sg-tip .sec-h h2::after{content:'';position:absolute;left:0;bottom:0;width:64px;height:12px;border-radius:0 0 64px 64px/0 0 14px 14px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.8,.2,1) .2s}
body.sg-tip .sk-in .sec-h h2::after{transform:none}
body.sg-tip .sec-h:is([style*="center"]) h2::after{left:50%}

/* blinking lashes */
.sg-blink{width:clamp(110px,12vw,170px);margin-bottom:6px;color:var(--accent)}
.sg-blink svg{width:100%}
.sg-blink :is(path,line){fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.sg-blink .lid{transform-origin:50% 80%}
.sg-blink.b .lid{animation:sg-blink .5s ease-in-out}
@keyframes sg-blink{50%{transform:scaleY(.15) translateY(18px)}}
.hero>div:first-child>.sg-blink{order:-1}
.sg-lashline{width:min(320px,70%);margin:8px 0 4px;color:var(--accent)}
.sg-lashline svg{width:100%}.sg-lashline path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* sparkles */
.sg-spark{position:absolute;inset:0;z-index:2;pointer-events:none}
.sg-spark i{position:absolute;width:var(--s);height:var(--s);background:var(--accent);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:sg-tw 2.6s ease-in-out infinite;animation-delay:calc(var(--i)*.45s)}
@keyframes sg-tw{0%,100%{transform:scale(.2) rotate(0);opacity:0}50%{transform:scale(1) rotate(45deg);opacity:1}}

/* brow arch */
.sg-brow{position:absolute;left:8%;right:8%;top:10%;z-index:4;color:#fff;pointer-events:none}
.sg-brow svg{width:100%}.sg-brow path{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;opacity:.85}.sg-brow .t{stroke-width:2;opacity:.6}

/* lash sun */
.sg-flutter{position:absolute;inset:-14%;z-index:0;color:var(--accent);opacity:.55;pointer-events:none}
.sg-flutter svg{width:100%;height:100%;animation:sk-spin 60s linear infinite}
.sg-flutter line{stroke:currentColor;stroke-width:1.4;stroke-linecap:round}

/* eyeshadow palette tile */
.sg-pal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sg-pal i{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 55%,#fff),var(--c) 65%);box-shadow:inset 0 2px 4px rgba(0,0,0,.25);animation:sk-tile .6s both;animation-delay:calc(.5s + var(--i)*.1s)}

/* molecules */
.sg-mol{position:absolute;inset:-6%;z-index:0;color:var(--accent);pointer-events:none;opacity:.55}
.sg-mol svg{width:100%;height:100%}
.sg-mol line{stroke:currentColor;stroke-width:.8;opacity:.6;stroke-dasharray:80;stroke-dashoffset:80;animation:sg-draw 1.4s ease forwards;animation-delay:calc(var(--i)*.08s)}
.sg-mol circle{fill:currentColor;animation:sg-node 4s ease-in-out infinite alternate;animation-delay:calc(var(--i)*.3s);transform-box:fill-box;transform-origin:center}
@keyframes sg-node{to{transform:translate(4px,-6px) scale(1.2)}}

/* water ripple */
.sg-ripple{position:absolute;left:12%;bottom:10%;width:140px;height:140px;z-index:4;pointer-events:none}
.sg-ripple b{position:absolute;left:50%;top:0;width:10px;height:14px;margin-left:-5px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#fff;opacity:.9;animation:sg-dropf 4s ease-in infinite}
.sg-ripple i{position:absolute;left:50%;top:70%;width:120px;height:36px;margin:-18px 0 0 -60px;border-radius:50%;border:1.5px solid #fff;opacity:0;animation:sg-rip 4s ease-out infinite}
.sg-ripple i:nth-of-type(2){animation-delay:.25s}.sg-ripple i:nth-of-type(3){animation-delay:.5s}
@keyframes sg-dropf{0%{transform:translateY(-40px);opacity:0}20%{opacity:.9}38%{transform:translateY(90px);opacity:.9}40%,100%{transform:translateY(90px);opacity:0}}
@keyframes sg-rip{0%,38%{transform:scale(.1);opacity:0}42%{opacity:.9}100%{transform:scale(1.4);opacity:0}}

/* bubbles */
.sg-bub{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none;border-radius:inherit}
.sg-bub i{position:absolute;bottom:-60px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0 12%,transparent 14%),radial-gradient(circle at 50% 50%,transparent 58%,color-mix(in srgb,var(--accent) 35%,rgba(255,255,255,.6)) 72%,transparent 74%);border:1px solid color-mix(in srgb,var(--accent) 30%,rgba(255,255,255,.5));animation:sg-bub var(--t) linear infinite;animation-delay:var(--d)}
@keyframes sg-bub{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}50%{transform:translate(16px,-50vh)}100%{transform:translate(-10px,-110vh);opacity:0}}

/* serum drop sliding down a line */
.sg-serum{position:absolute;right:-16px;top:6%;bottom:6%;width:20px;z-index:4;pointer-events:none}
.sg-serum .ln{position:absolute;left:50%;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--ink) 40%,transparent)}
.sg-serum b{position:absolute;left:50%;top:0;width:14px;height:20px;margin-left:-7px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:linear-gradient(160deg,#fff 10%,var(--accent));box-shadow:0 4px 10px -2px rgba(0,0,0,.25);animation:sg-serum 5s cubic-bezier(.5,0,.5,1) infinite}
@keyframes sg-serum{0%{top:0;opacity:0}10%{opacity:1}80%{top:calc(100% - 20px);opacity:1}100%{top:calc(100% - 20px);opacity:0}}
@media (max-width:760px){.sg-serum{right:4px}}

/* laser scan */
.sg-scan{position:absolute;inset:0;overflow:hidden;z-index:4;pointer-events:none;border-radius:inherit}
.sg-scan i{position:absolute;left:-5%;right:-5%;height:2px;top:0;background:var(--accent);box-shadow:0 0 18px 4px color-mix(in srgb,var(--accent) 70%,transparent),0 0 60px 18px color-mix(in srgb,var(--accent) 22%,transparent);animation:sg-scan 4.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes sg-scan{0%{top:-2%;opacity:0}8%{opacity:1}50%{top:100%;opacity:1}58%,100%{top:100%;opacity:0}}

/* balancing stones */
.sg-stones{position:absolute;left:-46px;bottom:-14px;width:120px;z-index:4;pointer-events:none}
.sg-stones svg{width:100%}
.sg-stones ellipse{fill:color-mix(in srgb,var(--ink) 70%,var(--accent));transform-box:fill-box;transform-origin:center;transition:transform .5s ease}
.sg-stones .s2{fill:color-mix(in srgb,var(--ink) 55%,var(--accent))}.sg-stones .s3{fill:color-mix(in srgb,var(--ink) 40%,var(--accent))}.sg-stones .s4{fill:var(--accent)}
@media (max-width:760px){.sg-stones{left:6px;width:78px}}

/* candle light */
.sg-candle{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;mix-blend-mode:soft-light}
.sg-candle i{position:absolute;inset:0;background:radial-gradient(60% 70% at 70% 65%,rgba(255,170,80,.75),transparent 70%);animation:sg-flick 3.2s steps(1) infinite}
@keyframes sg-flick{0%{opacity:.9}12%{opacity:.75}20%{opacity:1}34%{opacity:.82}48%{opacity:.95}60%{opacity:.7}72%{opacity:.92}86%{opacity:.8}}

/* breathing circle */
.sg-breath{position:absolute;right:-30px;bottom:6%;width:132px;height:132px;z-index:4;display:grid;place-items:center;pointer-events:none}
.sg-breath i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--surface) 80%,transparent),color-mix(in srgb,var(--accent) 30%,transparent) 70%);border:1.5px solid color-mix(in srgb,var(--accent) 60%,transparent);backdrop-filter:blur(6px);animation:sg-breath 8s ease-in-out infinite}
.sg-breath b{position:relative;font:italic var(--dfw) 18px var(--display);color:var(--ink)}
@keyframes sg-breath{0%,100%{transform:scale(.78)}50%{transform:scale(1.08)}}
@media (max-width:760px){.sg-breath{right:6px;width:100px;height:100px}.sg-breath b{font-size:15px}}

/* waves under the opening */
.sg-waves{height:70px;overflow:hidden;color:var(--accent);margin-top:-10px;position:relative;z-index:2;pointer-events:none}
.sg-waves svg{width:200%;height:100%}
.sg-waves path{fill:none;stroke:currentColor;stroke-width:1.5;opacity:calc(.8 - var(--i)*.22);animation:sg-wave calc(9s + var(--i)*3s) linear infinite;vector-effect:non-scaling-stroke}
@keyframes sg-wave{to{transform:translateX(-200px)}}

/* range-of-motion arcs */
.sg-arcs{position:absolute;right:-6%;bottom:-6%;width:46%;max-width:240px;z-index:4;color:var(--accent);pointer-events:none}
.sg-arcs svg{width:100%}
.sg-arcs path{fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:2 8;stroke-linecap:round}.sg-arcs .a2{opacity:.5}
.sg-arcs .j{fill:var(--ink)}.sg-arcs .dot{fill:currentColor}

/* treatment progress tile */
.sg-prog{display:flex;flex-direction:column;gap:6px;font-size:13px}
.sg-prog span{display:flex;align-items:center;gap:8px;opacity:0;animation:sk-up .5s both;animation-delay:calc(.6s + var(--i)*.35s)}
.sg-prog span i{width:14px;height:14px;border-radius:50%;border:2px solid var(--accent);background:var(--accent);flex-shrink:0}
.sg-prog span:last-child i{background:transparent}

/* spine */
.sg-spine{position:absolute;left:-54px;top:6%;bottom:6%;width:80px;z-index:4;color:var(--accent);pointer-events:none}
.sg-spine svg{height:100%;width:100%}
.sg-spine rect{fill:color-mix(in srgb,var(--accent) 22%,var(--surface));stroke:currentColor;stroke-width:2;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
@media (max-width:760px){.sg-spine{left:-4px;width:46px}}

/* pulse line */
.sg-pulse{position:absolute;left:0;right:0;bottom:4%;height:70px;z-index:0;color:var(--accent);pointer-events:none;opacity:.8}
.sg-pulse svg{width:100%;height:100%}
.sg-pulse path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round;stroke-dasharray:1400;stroke-dashoffset:1400;animation:sg-pulse 3.4s linear infinite;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px currentColor)}
@keyframes sg-pulse{to{stroke-dashoffset:-1400}}

/* bouncing ball */
.sg-bounce{position:absolute;left:-4%;right:-4%;bottom:-8%;z-index:4;color:var(--ink);pointer-events:none}
.sg-bounce svg{width:100%}
.sg-bounce .tr{fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:3 9;opacity:.5}
.sg-bounce .b{fill:var(--accent);stroke:var(--ink);stroke-width:2.5}

/* mandala */
.sg-mandala{position:absolute;inset:-12%;z-index:0;color:var(--accent);opacity:.5;pointer-events:none}
.sg-mandala svg{width:100%;height:100%;animation:sk-spin 90s linear infinite}
.sg-mandala :is(ellipse,circle){fill:none;stroke:currentColor;stroke-width:.8}

/* rising sun */
.sg-sun{position:absolute;right:4%;top:0;width:min(46vw,560px);aspect-ratio:2/1;z-index:0;pointer-events:none;color:var(--accent);transform:translateY(calc(50% - var(--p,0)*60%));opacity:.9}
.sg-sun i{position:absolute;left:25%;right:25%;bottom:0;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 70%,#FFE2A8),var(--accent));transform:translateY(50%)}
.sg-sun svg{position:absolute;inset:0;width:100%;height:100%;animation:sk-spin 120s linear infinite;transform-origin:50% 96%}
.sg-sun line{stroke:currentColor;stroke-width:.6;opacity:.6}
.sg-sun{clip-path:inset(0 0 0 0)}

/* stars */
.sg-stars{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.sg-stars i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;animation:sg-st 3.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes sg-st{0%,100%{opacity:.15}50%{opacity:1}}
.sg-stars b{position:absolute;right:12%;top:10%;width:54px;height:54px;border-radius:50%;box-shadow:-14px 8px 0 0 var(--accent);transform:rotate(-20deg);filter:drop-shadow(0 0 16px color-mix(in srgb,var(--accent) 60%,transparent))}

/* tattoo flash */
.sg-flash{position:absolute;inset:0;z-index:4;pointer-events:none;color:var(--accent)}
.sg-flash svg{position:absolute;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.sg-flash .f1{left:-11%;top:4%;width:80px}.sg-flash .f2{right:-8%;bottom:6%;width:110px}.sg-flash .f3{left:-6%;bottom:-6%;width:120px}
body.sg-flashgal #gallery .gi,body.sg-flashgal #gallery :is(.gal,.g-grid) .gi{position:relative;counter-increment:fl}
body.sg-flashgal #gallery{counter-reset:fl}
body.sg-flashgal #gallery .gi::after{content:'№ ' counter(fl,decimal-leading-zero);position:absolute;left:10px;bottom:10px;padding:3px 8px;background:var(--bg);color:var(--ink);font:600 12px var(--mono);border:1px solid var(--ink)}
@media (max-width:760px){.sg-flash .f1{left:2%;width:56px}.sg-flash .f2{right:2%;width:76px}.sg-flash .f3{display:none}}

/* ink bleed reveal */
@property --ir{syntax:'<percentage>';inherits:false;initial-value:0%}
.sg-ink{position:absolute;inset:-60px;z-index:5;pointer-events:none}
.sg-ink i{position:absolute;inset:0;background:var(--bg);-webkit-mask:radial-gradient(circle at 30% 60%,transparent var(--ir),#000 calc(var(--ir) + 8%));mask:radial-gradient(circle at 30% 60%,transparent var(--ir),#000 calc(var(--ir) + 8%))}
.sg-ink.go i{animation:sg-ink 2s cubic-bezier(.55,0,.25,1) forwards}
@keyframes sg-ink{to{--ir:160%}}

/* neon sign */
#heroH.sg-neon{color:var(--ink)}
#heroH.sg-neon .acc,#heroH.sg-neon>span:last-child{color:#fff!important;-webkit-text-fill-color:#fff;text-shadow:0 0 4px #fff,0 0 12px var(--accent),0 0 28px var(--accent),0 0 60px var(--accent);animation:sg-neon 9s linear infinite}
@keyframes sg-neon{0%,1%{opacity:.2}2%,3%{opacity:1}4%{opacity:.3}5%,62%{opacity:1}63%{opacity:.4}64%,100%{opacity:1}}

/* stencil transfer */
.sg-stencil{position:absolute;right:-8%;bottom:-4%;width:150px;z-index:4;pointer-events:none;color:var(--accent)}
.sg-stencil svg{width:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sg-stencil.go path{animation:sg-draw 2.6s ease forwards,sg-dash 0s 2.7s forwards}
@keyframes sg-dash{to{stroke-dasharray:4 5}}
@media (max-width:760px){.sg-stencil{right:2%;width:96px}}

/* paw prints */
.sg-paws{position:absolute;inset:0;z-index:1;pointer-events:none}
.sg-paws i{position:absolute;width:34px;color:var(--accent);opacity:0;transform:rotate(var(--r));animation:sg-paw 6.4s ease-in-out infinite;animation-delay:calc(var(--i)*.45s)}
.sg-paws svg{width:100%;fill:currentColor}
@keyframes sg-paw{0%{opacity:0;transform:rotate(var(--r)) scale(.6)}8%,40%{opacity:.75;transform:rotate(var(--r)) scale(1)}60%,100%{opacity:0}}
.sg-pawt{position:relative}.sg-pw{position:absolute;right:16px;bottom:12px;width:60px;fill:var(--accent);opacity:.9;transform:rotate(-14deg)}

/* hand-drawn doodles */
.sg-doodle{position:absolute;inset:0;z-index:4;pointer-events:none;color:var(--accent)}
.sg-doodle svg{position:absolute;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sg-doodle .d1{left:-16%;top:12%;width:90px;transform:rotate(-18deg)}.sg-doodle .d2{right:-12%;top:30%;width:66px}.sg-doodle .d3{left:-8%;bottom:6%;width:62px;transform:rotate(10deg)}
@media (max-width:760px){.sg-doodle .d1{left:0;width:60px}.sg-doodle .d2{right:0;width:46px}.sg-doodle .d3{left:2%;width:44px}}

/* reps and timer rings */
.sg-reps{position:absolute;left:-28px;bottom:10%;width:120px;height:120px;border-radius:50%;background:var(--surface);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:5;box-shadow:0 24px 40px -20px rgba(0,0,0,.6)}
.sg-reps svg{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);transform:rotate(-90deg)}
.sg-reps circle{fill:none;stroke-width:6}.sg-reps .bg{stroke:color-mix(in srgb,var(--ink) 10%,transparent)}.sg-reps .fg{stroke:var(--accent);stroke-dasharray:277;stroke-linecap:round;transition:stroke-dashoffset .5s ease}
.sg-reps b{font:var(--dfw) 34px/1 var(--display);font-variant-numeric:tabular-nums;position:relative}
.sg-reps small{font-size:10.5px;color:var(--muted);position:relative;margin-top:2px}
.sg-timer.rest .fg{stroke:var(--muted)}
.sg-timer b{font-size:26px}
@media (max-width:760px){.sg-reps{left:auto;right:4px;width:96px;height:96px}.sg-reps b{font-size:26px}}

/* progress bars */
.sg-bars{margin-top:22px;max-width:420px}
.sg-bars small{font-size:13px;color:var(--muted)}
.sg-bars>div{display:flex;align-items:flex-end;gap:6px;height:80px;margin-top:8px;border-bottom:1px solid var(--ink)}
.sg-bars i{flex:1;height:0;background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 60%,var(--bg)));transition:height .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*.08s)}
.sg-bars.go i{height:var(--h)}

/* growth chart tile */
.sg-chart{display:flex;align-items:flex-end;gap:5px;height:70px}
.sg-chart i{flex:1;border-radius:4px 4px 0 0;background:var(--accent);height:var(--h);transform-origin:bottom;animation:sg-grow .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.6s + var(--i)*.08s)}
@keyframes sg-grow{from{transform:scaleY(0)}}

/* light running over gloss */
.sg-sweep{position:absolute;inset:0;overflow:hidden;z-index:4;pointer-events:none;border-radius:inherit}
.sg-sweep i{position:absolute;top:-20%;bottom:-20%;width:26%;left:-40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 30%,rgba(255,255,255,.42) 50%,rgba(255,255,255,.08) 70%,transparent);transform:skewX(-18deg);animation:sg-sweep 5.5s cubic-bezier(.5,0,.3,1) 1s infinite;mix-blend-mode:overlay}
@keyframes sg-sweep{0%{left:-40%}45%,100%{left:120%}}

/* water beads */
.sg-beads{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;overflow:hidden}
.sg-beads i{position:absolute;width:var(--s);height:calc(var(--s)*1.1);border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95) 0 14%,rgba(255,255,255,.18) 30%,rgba(255,255,255,.05) 60%,rgba(255,255,255,.35) 100%);box-shadow:0 2px 3px rgba(0,0,0,.35)}
.sg-beads i.run{animation:sg-run 7s cubic-bezier(.6,0,.4,1) infinite;animation-delay:var(--d)}
@keyframes sg-run{0%,40%{transform:translateY(0)}100%{transform:translateY(160px);opacity:0}}

/* racing stripes */
.sg-racing{position:relative;height:56px;margin-block:4px 22px;overflow:hidden;z-index:2;pointer-events:none}
.sg-racing i{position:absolute;left:-10%;right:-10%;height:16px;transform:skewY(-2deg)}
.sg-racing i:first-child{top:10px;background:var(--accent)}.sg-racing i:last-child{top:32px;background:var(--ink)}
.sg-racing i{animation:sg-race 1.2s cubic-bezier(.7,0,.2,1) both}.sg-racing i:last-child{animation-delay:.15s}
@keyframes sg-race{from{transform:skewY(-2deg) translateX(-100%)}}

/* shine across the headline */
#heroH.sg-shine{position:relative}
#heroH.sg-shine .acc,#heroH.sg-shine>span:last-child{background:linear-gradient(100deg,var(--accent) 40%,#fff 50%,var(--accent) 60%) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;animation:sg-shine 4.5s ease-in-out 1s infinite}
@keyframes sg-shine{0%{background-position:100% 0}50%,100%{background-position:0 0}}

/* stickers/steam etc stop for reduced motion via .skx rule; the headline effects too */
@media (prefers-reduced-motion:reduce){#heroH:is(.sg-gold,.sg-chrome,.sg-neon,.sg-shine),#heroH:is(.sg-gold,.sg-chrome,.sg-neon,.sg-shine) *{animation:none!important}}
body.still #heroH *{animation-play-state:paused}

/* editorial with the portrait beside the headline */
body[data-skin="atlas"] .hero.sk-porh{display:grid!important;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)!important;gap:clamp(24px,4vw,64px)!important;align-items:end!important}
body[data-skin="atlas"] .hero.sk-porh>div:first-child{grid-template-columns:minmax(0,1fr);grid-template-areas:"s" "h" "p" "c" "w"}
body[data-skin="atlas"] .hero.sk-porh>div:first-child>h1{font-size:clamp(52px,7.6vw,132px)!important}
body[data-skin="atlas"] .sk-strip.sk-por{margin:0;height:auto;aspect-ratio:3/4;max-height:76vh;align-self:stretch;clip-path:inset(100% 0 0 0)}
body[data-skin="atlas"] .sk-strip.sk-por.go{clip-path:inset(0 0 0 0)}
body[data-skin="atlas"] .sk-strip.sk-por img{height:112%}
@media (max-width:760px){body[data-skin="atlas"] .hero.sk-porh{grid-template-columns:minmax(0,1fr)!important}body[data-skin="atlas"] .sk-strip.sk-por{aspect-ratio:4/5;max-height:none;margin-inline:0}}

/* the salon's name as the last big word of the page */
.sk-mark{overflow:hidden;max-width:1360px;margin-inline:auto;padding-inline:var(--gut);padding-top:clamp(20px,4vw,50px);padding-bottom:clamp(16px,2vw,30px);line-height:.8}
.sk-mark b{padding-bottom:.14em}
.sk-mark b{display:block;font:var(--dfw) clamp(64px,17vw,300px)/.82 var(--display);letter-spacing:-.045em;white-space:nowrap;text-transform:var(--dtt);transform:translateY(40%);opacity:0;transition:transform 1.4s cubic-bezier(.2,.8,.2,1),opacity 1s ease}
.sk-mark.go b{transform:none;opacity:1}
body[data-skin="noir"] .sk-mark b{color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--ink) 40%,transparent)}
body[data-skin="street"] .sk-mark b,body[data-skin="kinetic"] .sk-mark b{text-transform:uppercase;color:var(--accent)}
body[data-skin="atlas"] .sk-mark b{font-style:italic;border-top:1px solid var(--ink);padding-top:.1em}
body[data-skin="swiss"] .sk-mark b{letter-spacing:-.06em;font-weight:800}
body[data-skin="bento"] .sk-mark{display:none}
body[data-skin="bloom"] .sk-mark,body[data-skin="pop"] .sk-mark{text-align:center}
body[data-skin="bloom"] .sk-mark b{color:color-mix(in srgb,var(--accent) 35%,var(--bg));font-size:clamp(54px,12vw,200px)}
body[data-skin="pop"] .sk-mark b{color:var(--accent);-webkit-text-stroke:3px var(--ink);font-size:clamp(54px,13vw,220px)}
body[data-skin="aurora"] .sk-mark b{background:linear-gradient(180deg,var(--ink),transparent 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
body[data-skin="zen"] .sk-mark{text-align:center}body[data-skin="zen"] .sk-mark b{font-size:clamp(48px,9vw,140px);color:color-mix(in srgb,var(--accent) 60%,var(--bg));font-style:italic}
body[data-sig~="gold"] .sk-mark b{background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 70%,#5A3E10),var(--accent) 40%,#FFF1C2 50%,var(--accent) 60%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* tighter tagline under the salon name on phones */
@media (max-width:760px){.top-in .brand small{letter-spacing:.14em}}
/* phones: the drop stays by the headline and fades before it reaches the text below */
@media (max-width:760px){.sg-drip{width:14px;animation-name:sg-drip-m}}
@keyframes sg-drip-m{0%{opacity:0;transform:scaleY(.1)}12%{opacity:1}50%{transform:scaleY(1)}75%{transform:scaleY(1) translateY(6px);opacity:.9}90%,100%{transform:scaleY(1.05) translateY(16px);opacity:0}}

/* phones: crest in the free bottom-right corner of a full-photo hero; a small sun above the headline; sparkles stay off the letters */
@media (max-width:760px){
.sg-crest.sg-crest-cov,body[data-skin] .sg-crest.sg-crest-cov{top:auto;bottom:18px;right:14px;width:86px}
.sg-sun{width:30vw;right:3%;transform:translateY(calc(8% - var(--p,0)*60%))}
.sg-spark i:nth-child(3),.sg-spark i:nth-child(4){display:none}
}

/* a small-caps headline face is for headlines only: the intro paragraph switches to the text face */
body.dsc .hero-p,body.dsc[data-skin] .hero-p{font-family:var(--body)!important;font-style:normal!important;font-size:clamp(16px,1.25vw,19px)}

/* gold headline over a photo: no dark stops (they vanish into the picture) and a soft shadow for contrast */
body[data-hero="cover"] #heroH.sg-gold,body[data-hero="cover"] #heroH.sg-gold *{background-image:linear-gradient(100deg,color-mix(in srgb,var(--accent) 88%,#fff) 0%,var(--accent) 30%,#FFF4D0 46%,var(--accent) 58%,color-mix(in srgb,var(--accent) 85%,#fff) 100%)}
body[data-hero="cover"] #heroH.sg-gold{filter:drop-shadow(0 2px 10px rgba(0,0,0,.55))}

/* phones: the barber pole and the round seal would cross in the same corner, the pole stays */
@media (max-width:760px){body[data-sig~="pole"] .sk-seal{display:none}}
/* hair strands on a full-photo hero: they flow in the free part of the photo, never across the text */
.hero>.sg-strands{inset:auto -10% 0 auto;width:62%;height:62%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
@media (max-width:760px){.hero>.sg-strands{width:120%;height:26%;inset:auto -10% 0 auto;-webkit-mask-image:linear-gradient(180deg,transparent,#000 50%);mask-image:linear-gradient(180deg,transparent,#000 50%)}}
/* scissors start and finish fully on screen */
.sg-sc{left:calc(var(--gut,24px) + 23px)}
@keyframes sg-scm{to{left:calc(100% - var(--gut,24px) - 23px)}}

/* phones: the tagline under the name keeps to one line, the city drops off first */
.top-in .brand small{white-space:nowrap}
@media (max-width:440px){.top-in .brand small .kcity{display:none}}

/* counter and timer: numbers and labels stay inside the ring */
.sg-reps small{max-width:70%;text-align:center;line-height:1.2}
@media (max-width:760px){.sg-timer b{font-size:19px}.sg-reps small{font-size:9.5px}}
/* phones: paw prints walk along the top of the hero, clear of the text and buttons */
@media (max-width:760px){.sg-paws{inset:0 0 auto 0;height:120px;top:-40px}.sg-paws i{width:22px;opacity:0}}
/* moving lights and drops ride on transforms: smooth on phones, no layout work on every frame */
.sg-scan i{top:0;height:100%;background:none;box-shadow:none;animation-name:sg-scan2}
.sg-scan i::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);box-shadow:0 0 18px 4px color-mix(in srgb,var(--accent) 70%,transparent),0 0 60px 18px color-mix(in srgb,var(--accent) 22%,transparent)}
@keyframes sg-scan2{0%{transform:translateY(-2%);opacity:0}8%{opacity:1}50%{transform:translateY(100%);opacity:1}58%,100%{transform:translateY(100%);opacity:0}}
.sg-sweep i{left:0;width:100%;background:none;transform:none;mix-blend-mode:normal;animation-name:sg-sweep2}
.sg-sweep i::before{content:'';position:absolute;top:0;bottom:0;left:-40%;width:26%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 30%,rgba(255,255,255,.42) 50%,rgba(255,255,255,.08) 70%,transparent);transform:skewX(-18deg);mix-blend-mode:overlay}
@keyframes sg-sweep2{0%{transform:translateX(0)}45%,100%{transform:translateX(160%)}}
.sg-serum b{height:calc(100% - 20px);width:14px;background:none;box-shadow:none;border-radius:0;animation-name:sg-serum2}
.sg-serum b::after{content:'';position:absolute;left:0;top:0;width:14px;height:20px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:linear-gradient(160deg,#fff 10%,var(--accent));box-shadow:0 4px 10px -2px rgba(0,0,0,.25)}
@keyframes sg-serum2{0%{transform:translateY(0);opacity:0}10%{opacity:1}80%{transform:translateY(100%);opacity:1}100%{transform:translateY(100%);opacity:0}}
.sk-strip>.sg-serum,.hero>.sg-serum{right:14px}
@media (max-width:760px){.sk-strip>.sg-serum{right:30px}}
/* portrait hero: one clean left edge for the whole text column, the lead in the text face */
body[data-skin="atlas"] .hero.sk-porh>div:first-child,body[data-skin="atlas"] .hero.sk-porh>div:first-child>*{text-align:left!important;justify-self:start!important;margin-inline:0!important}
body[data-skin="atlas"] .hero.sk-porh .hero-p{font-family:var(--body)!important;font-style:normal!important;font-size:clamp(16px,1.25vw,19px)!important;line-height:1.55;max-width:42ch}
body[data-skin="atlas"] .hero.sk-porh>div:first-child>h1{font-size:clamp(48px,6.2vw,112px)!important}
body[data-skin="atlas"] .hero.sk-porh{align-items:center!important}