/* =========================================================
Hypnotic Art — theme.css
1 tokens · 2 base · 3 chrome (nav/mobile menu/cursor/loader)
4 front page sections · 5 inner pages · 6 WP content · 7 Woo/forms
========================================================= */
/* 1. TOKENS ------------------------------------------------ */
:root{
--paper:#f4f1ec;--paper2:#ebe6de;--paper3:#ddd6cb;
--ink:#111111;--ink2:rgba(17,17,17,.6);--ink3:rgba(17,17,17,.22);--ink4:rgba(17,17,17,.1);
--dark:#0b0b0b;--light:#f4f1ec;--light2:rgba(244,241,236,.6);
--red:#e8331f;
--disp:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;
--body:"Inter Tight",system-ui,-apple-system,sans-serif;
--e:cubic-bezier(.16,1,.3,1);
--gx:clamp(20px,4vw,64px);
--sec:clamp(80px,12vh,150px);
--nav-h:96px;
}
/* 2. BASE -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--nav-h)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-weight:300;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body:not(.no-cursor){cursor:none}
body:not(.no-cursor) a,body:not(.no-cursor) button{cursor:none}
@media(hover:none),(pointer:coarse){body,body a,body button{cursor:auto!important}.cur{display:none!important}}
img,svg,video,iframe{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
h1,h2,h3,h4{margin:0;font-weight:inherit;line-height:1}
p{margin:0}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.screen-reader-text,.skip{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.skip:focus{clip:auto;width:auto;height:auto;left:16px;top:16px;z-index:2000;background:var(--ink);color:var(--paper);padding:12px 16px}
.disp{font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.85;letter-spacing:-.01em}
.label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--ink2)}
.wrap{width:min(1240px,100% - 2*var(--gx));margin-inline:auto}
.u{text-decoration:underline;text-underline-offset:3px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase;transition:transform .5s var(--e),box-shadow .5s;border:1px solid var(--ink)}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px -18px rgba(0,0,0,.5)}
.btn--light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.ha-fb{display:block;width:100%;height:100%;min-height:100%;background:linear-gradient(135deg,var(--paper2),var(--paper3))}
.rv{will-change:transform,opacity}
/* 3. CHROME ------------------------------------------------ */
/* cursor */
.cur{position:fixed;top:0;left:0;z-index:1000;pointer-events:none;mix-blend-mode:difference}
.cur__dot{width:8px;height:8px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.cur__ring{position:absolute;top:0;left:0;width:44px;height:44px;border:1px solid #fff;border-radius:50%;transform:translate(-50%,-50%);transition:width .35s var(--e),height .35s var(--e),background .3s}
.cur__txt{position:absolute;top:0;left:0;transform:translate(-50%,-50%);font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.15em;text-transform:uppercase;color:#000;opacity:0;transition:opacity .3s;white-space:nowrap}
body.c-hov .cur__ring{width:72px;height:72px}
body.c-view .cur__ring{width:110px;height:110px;background:#fff}
body.c-view .cur__txt{opacity:1}body.c-view .cur__dot{opacity:0}
body.no-cursor .cur{display:none}
/* loader */
.loader{position:fixed;inset:0;z-index:900;background:var(--paper);display:grid;place-items:center}
.loader__big{font-size:clamp(80px,22vw,320px);line-height:1;overflow:hidden}
.loader__big span{display:block;transform:translateY(100%)}
.loader__bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--ink)}
.loader__lbl{position:absolute;bottom:28px;left:var(--gx)}
/* header */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gx);gap:20px;color:var(--ink);transition:background .4s,box-shadow .4s}
.nav--front{color:#fff;mix-blend-mode:difference}
.nav.is-scrolled{background:rgba(244,241,236,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ink);mix-blend-mode:normal;box-shadow:0 1px 0 var(--ink4)}
.nav__brand .custom-logo,.nav__brand img{height:76px;width:auto;object-fit:contain;transition:height .4s var(--e)}
.nav--front:not(.is-scrolled) .nav__brand img{filter:brightness(0) invert(1)}
.nav__word{font-family:var(--disp);font-weight:900;font-size:22px;letter-spacing:.06em;text-transform:uppercase}
.nav__list{display:flex;gap:34px;list-style:none;margin:0;padding:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.nav__list li{position:relative}
.nav__list>li>a{position:relative;padding:6px 0;display:inline-block}
.nav__list>li>a::after{content:"";position:absolute;left:0;bottom:2px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e)}
.nav__list>li:hover>a::after,.nav__list>li.current-menu-item>a::after{transform:scaleX(1);transform-origin:left}
.nav__list .sub-menu{position:absolute;top:100%;left:-16px;min-width:200px;list-style:none;margin:0;padding:10px 0;background:var(--paper);color:var(--ink);box-shadow:0 20px 50px -20px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(8px);transition:all .35s var(--e);mix-blend-mode:normal}
.nav__list li:hover>.sub-menu,.nav__list li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.nav__list .sub-menu a{display:block;padding:9px 16px;text-transform:none;letter-spacing:0;font-size:14px}
.nav__list .sub-menu a:hover{background:var(--paper2)}
.nav__right{display:flex;align-items:center;gap:14px}
.nav__book{border:1px solid currentColor;padding:10px 18px;border-radius:999px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;transition:background .3s,color .3s}
/* Explicit colours, never currentColor: as background it resolves to the
colour set in the same block, so the pill and its label became the same
value and the text disappeared (black on black over the hero). Red also
matches the BOOK button the client asked for. */
.nav__book:hover,.nav__book:focus-visible{background:var(--red);color:#fff;border-color:var(--red)}
.nav__burger{display:none;width:44px;height:44px;position:relative;margin-right:-8px}
.nav__burger span{position:absolute;left:12px;right:12px;height:2px;background:currentColor;transition:transform .4s var(--e),top .4s var(--e)}
.nav__burger span:first-child{top:17px}.nav__burger span:last-child{top:25px}
body.menu-open .nav__burger span:first-child{top:21px;transform:rotate(45deg)}
body.menu-open .nav__burger span:last-child{top:21px;transform:rotate(-45deg)}
body.menu-open .nav{color:var(--paper);mix-blend-mode:normal;background:none;box-shadow:none;backdrop-filter:none}
body.menu-open .nav__brand img{filter:brightness(0) invert(1)}
@media(max-width:1024px){.nav__list{gap:22px}}
@media(max-width:900px){
.nav__menu{display:none}.nav__burger{display:block}.nav__book{display:none}
.nav__brand .custom-logo,.nav__brand img{height:58px}
:root{--nav-h:76px}
}
/* mobile menu */
.mmenu{position:fixed;inset:0;z-index:90;background:var(--dark);color:var(--paper);clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--e);overflow:auto}
body.menu-open .mmenu{clip-path:inset(0 0 0 0)}
body.menu-open{overflow:hidden}
.mmenu__in{min-height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--nav-h) + 24px) var(--gx) 32px}
.mmenu__list{list-style:none;margin:0;padding:0;font-size:clamp(44px,12vw,84px);font-weight:900}
.mmenu__list>li{overflow:hidden}
.mmenu__list>li>a{display:block;padding:6px 0;transform:translateY(110%);transition:transform .8s var(--e)}
body.menu-open .mmenu__list>li>a{transform:none}
.mmenu__list .sub-menu{list-style:none;margin:0 0 14px 0;padding:0;font-family:var(--body);font-weight:400;font-size:16px;text-transform:none;letter-spacing:0;display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--light2)}
.mmenu__foot{margin-top:40px;display:flex;flex-direction:column;gap:20px}
.mmenu__meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--light2)}
/* 4. FRONT PAGE -------------------------------------------- */
/* hero */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--dark);color:var(--light);display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--nav-h) + 26px) var(--gx) clamp(52px,9vh,110px)}
.hero__top{position:relative;z-index:2}
.hero__media{position:absolute;inset:0}
.hero__media img,.hero__media .ha-fb{width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.05) 40%,rgba(0,0,0,.78) 100%)}
.hero__title{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px}
.hero h1{font-size:clamp(72px,min(17vw,22vh),280px);line-height:.78;letter-spacing:-.02em}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero h1 .ln span{display:block;transform:translateY(105%)}
html:not(.js) .hero h1 .ln span,body.reduced .hero h1 .ln span{transform:none}
.hero__aside{text-align:right;max-width:300px;font-size:14px;color:var(--light2);line-height:1.6}
.hero__aside strong{display:block;color:var(--light);font-weight:500;margin-bottom:10px}
.hero__meta{display:flex;gap:40px}
.hero__meta div{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--light2)}
.hero__meta div b{display:block;color:var(--light);font-weight:500;margin-bottom:4px}
.hero__scroll{position:absolute;right:var(--gx);top:calc(var(--nav-h) + 30px);z-index:2;writing-mode:vertical-rl;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--light2);display:flex;gap:14px;align-items:center}
.hero__scroll i{width:1px;height:50px;background:var(--light2);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:var(--light);animation:sl 2s var(--e) infinite}
@keyframes sl{from{transform:translateY(-100%)}to{transform:translateY(100%)}}
@media(max-width:900px){
.hero__title{grid-template-columns:1fr;gap:18px}.hero__aside{text-align:left;max-width:none}
.hero__meta{gap:18px;flex-wrap:wrap}.hero__meta div{font-size:10px}.hero__scroll{display:none}
.hero h1{font-size:clamp(52px,min(19vw,20vh),140px)}
}
/* ticker */
.ticker{border-bottom:1px solid var(--ink4);overflow:hidden;background:var(--paper)}
.ticker__row{display:flex;width:max-content;animation:tk 45s linear infinite}
.ticker__row span{font-family:var(--disp);font-weight:700;font-size:clamp(28px,4vw,52px);text-transform:uppercase;padding:16px 32px 16px 0;white-space:nowrap;display:inline-flex;align-items:center;gap:32px}
.ticker__row span::after{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--ink)}
.ticker__row span:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--ink)}
@keyframes tk{to{transform:translateX(-50%)}}
/* styles */
.styles__head{padding:var(--sec) var(--gx) 40px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.styles__head h2{font-size:clamp(56px,10vw,170px)}
.styles__head p{max-width:40ch;font-size:clamp(16px,1.3vw,20px);color:var(--ink2);line-height:1.5}
.styles__body{display:grid;grid-template-columns:1fr 1fr;padding:0 var(--gx) var(--sec)}
.styles__list{border-top:1px solid var(--ink3);margin-inline:-20px}
.styles__item{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:20px;padding:22px 20px;border-bottom:1px solid var(--ink3);position:relative;overflow:hidden;transition:color .4s}
.styles__n{font-size:12px;letter-spacing:.2em;color:var(--ink2);font-variant-numeric:tabular-nums}
.styles__nm{font-family:var(--disp);font-weight:700;font-size:clamp(28px,3.6vw,58px);text-transform:uppercase;line-height:.9;text-wrap:balance;transition:transform .6s var(--e)}
/* The row tagline is deliberately not rendered: it is longer than the artist
name it replaced, and its auto grid column starved the name column enough to
wrap "GRAFFITI & AVANTGARDE" onto three uneven lines. The same text already
appears in the sticky caption on the right, which is where it belongs. */
.styles__who{display:none}
.styles__item::before{content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:var(--ink);transition:height .5s var(--e);z-index:0}
.styles__item>*{position:relative;z-index:1}
.styles__item.on{color:var(--paper)}
.styles__item.on::before{height:100%}
.styles__item.on .styles__n{color:rgba(244,241,236,.92)}
.styles__item.on .styles__nm{transform:translateX(14px)}
.styles__stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;padding:60px 0 60px 60px}
.styles__frame{width:min(100%,520px);aspect-ratio:4/5;position:relative;overflow:hidden;background:var(--paper2);box-shadow:0 40px 80px -40px rgba(0,0,0,.35)}
.styles__img{position:absolute;inset:0;opacity:0;transform:scale(1.12);transition:opacity .7s var(--e),transform 1.2s var(--e)}
.styles__img img,.styles__img .ha-fb{width:100%;height:100%;object-fit:cover}
.styles__img.on{opacity:1;transform:scale(1)}
.styles__cap{position:absolute;left:18px;bottom:18px;right:18px;display:flex;justify-content:space-between;gap:12px;color:#fff;font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.6)}
@media(max-width:900px){
.styles__head,.styles__body{grid-template-columns:1fr}.styles__head{gap:18px}
.styles__stage{position:sticky;top:var(--nav-h);height:auto;padding:0;z-index:2;background:var(--paper)}
.styles__frame{width:100%;aspect-ratio:16/10;box-shadow:none}
.styles__body{display:flex;flex-direction:column}
.styles__stage{order:-1;margin-bottom:8px}
.styles__item{grid-template-columns:36px 1fr;padding:16px 14px}
.styles__item.on .styles__nm{transform:translateX(8px)}
/* Name and tagline side by side broke "BLACK & / GREY" across two lines
in a 390px frame. Stack them and keep the name intact. */
.styles__cap{flex-direction:column;gap:3px;left:14px;right:14px;bottom:12px}
.styles__cap #capL{white-space:nowrap;font-weight:700}
.styles__cap #capR{font-size:10px;opacity:.85}
}
/* work */
.gal{position:relative;background:var(--paper2)}
.gal__pin{height:100svh;overflow:hidden;display:flex;align-items:center}
.gal__track{display:flex;gap:clamp(14px,2vw,28px);padding-left:var(--gx);will-change:transform}
.gal__cell{flex:0 0 auto;height:min(72svh,720px);position:relative;overflow:hidden;background:var(--paper3);display:block}
.gal__cell--p{aspect-ratio:3/4}.gal__cell--l{aspect-ratio:4/3}.gal__cell--s{aspect-ratio:1}
.gal__cell img,.gal__cell .ha-fb{width:100%;height:100%;object-fit:cover;transform:scale(1.15);transition:transform 1.2s var(--e)}
.gal__cell:hover img{transform:scale(1)}
.gal__t{position:absolute;left:16px;bottom:16px;right:16px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6);opacity:0;transform:translateY(8px);transition:all .5s var(--e)}
.gal__cell:hover .gal__t{opacity:1;transform:none}
.gal__cell--txt{width:min(60vw,560px);aspect-ratio:auto;background:none;display:flex;flex-direction:column;justify-content:center;padding-right:40px}
.gal__cell--txt h2{font-size:clamp(56px,9vw,150px);margin-bottom:24px}
.gal__cell--txt p{color:var(--ink2);max-width:36ch;font-size:16px}
.gal__cell--end{width:40vw;aspect-ratio:auto;background:none;display:grid;place-items:center;padding-right:var(--gx)}
.gal__cell--end a{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(32px,4vw,60px);border-bottom:2px solid var(--ink);padding-bottom:6px}
@media(max-width:900px){
.gal__pin{height:auto;overflow-x:auto;overflow-y:hidden;padding:60px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.gal__pin::-webkit-scrollbar{display:none}
.gal__track{padding-right:var(--gx)}
.gal__cell{height:56svh;min-height:320px;scroll-snap-align:start}.gal__cell--txt{width:80vw;padding-right:20px}
.gal__cell--end{width:60vw}.gal__t{opacity:1;transform:none}
}
/* manifesto */
.mani{padding:var(--sec) var(--gx)}
.mani__text{font-family:var(--disp);font-weight:500;text-transform:uppercase;font-size:clamp(32px,5.6vw,92px);line-height:.98;max-width:22ch;letter-spacing:.005em}
.mani__text .w{display:inline-block;color:var(--ink3);transition:color .1s}
.mani__text .w.lit{color:var(--ink)}
html:not(.js) .mani__text .w{color:var(--ink)}
html:not(.js) .rv{opacity:1}
.mani__sm{display:flex;gap:60px;margin-top:64px;max-width:900px;color:var(--ink2);font-size:15px;line-height:1.7}
.mani__sm div{flex:1}
.mani__sm b{display:block;color:var(--ink);font-weight:500;margin-bottom:8px}
@media(max-width:700px){.mani__sm{flex-direction:column;gap:28px;margin-top:40px}}
/* artists */
.art{padding:0 var(--gx) var(--sec)}
.art__top{display:flex;justify-content:space-between;align-items:end;gap:20px;padding-bottom:28px;border-bottom:1px solid var(--ink3)}
.art__top h2{font-size:clamp(48px,7vw,110px)}
.art__top p{max-width:34ch;color:var(--ink2);font-size:14px;text-align:right}
.art__row{display:grid;grid-template-columns:70px 1fr 1fr auto;align-items:center;gap:24px;padding:18px 0;border-bottom:1px solid var(--ink3);position:relative}
.art__ph{width:70px;height:70px;border-radius:50%;overflow:hidden;filter:grayscale(1);transition:filter .5s,transform .6s var(--e);display:block;flex:none}
.art__ph img,.art__ph .ha-fb{width:100%;height:100%;object-fit:cover}
.art__row:hover .art__ph{filter:none;transform:scale(1.12)}
.art__nm{font-family:var(--disp);font-weight:700;font-size:clamp(28px,3.4vw,46px);text-transform:uppercase;line-height:.9}
.art__nm small{display:block;font-family:var(--body);font-weight:400;font-size:12px;text-transform:none;letter-spacing:.02em;color:var(--ink2);margin-top:4px}
.art__st{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.art__ig{font-size:12px;letter-spacing:.1em;color:var(--ink2);transition:color .3s}
.art__row:hover .art__ig{color:var(--ink)}
.art__peek{position:absolute;right:120px;top:50%;width:200px;aspect-ratio:3/4;transform:translateY(-50%) rotate(-4deg) scale(.8);opacity:0;pointer-events:none;transition:all .6s var(--e);z-index:5;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.45)}
.art__peek img{width:100%;height:100%;object-fit:cover}
.art__row:hover .art__peek{opacity:1;transform:translateY(-50%) rotate(-3deg) scale(1)}
@media(max-width:900px){
.art__row{grid-template-columns:52px 1fr;gap:14px}.art__ph{width:52px;height:52px}
.art__st{grid-column:2;margin-top:-6px}.art__peek,.art__ig{display:none}
.art__top{flex-direction:column;align-items:start;gap:12px}.art__top p{text-align:left}
}
/* proof */
.proof{background:var(--paper2);padding:var(--sec) var(--gx);display:grid;grid-template-columns:1fr 1fr;gap:60px}
.proof__nums{display:grid;grid-template-columns:1fr 1fr}
.proof__num{padding:28px 24px 28px 0;border-bottom:1px solid var(--ink3)}
.proof__num:nth-child(-n+2){border-top:1px solid var(--ink3)}
.proof__num b{font-family:var(--disp);font-weight:900;font-size:clamp(52px,7vw,110px);line-height:.9;display:block}
.proof__num span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
/* The quotes used to be absolutely positioned inside a fixed min-height, so a
short review left a large void above the dots — very visible on a phone.
Stacking them in one grid cell makes the container exactly as tall as the
tallest quote, with no reserved dead space. */
.proof__quotes{position:relative;display:grid;padding-bottom:30px}
.proof__q{grid-area:1/1;opacity:0;transform:translateY(16px);transition:opacity .7s var(--e),transform .7s var(--e)}
.proof__q.on{opacity:1;transform:none}
.proof__q p{font-family:var(--disp);font-weight:500;font-size:clamp(26px,3.2vw,48px);line-height:1.05;text-transform:uppercase}
.proof__by{margin-top:24px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.proof__dots{position:absolute;bottom:0;left:0;display:flex;gap:8px}
.proof__dots i{width:32px;height:2px;background:var(--ink3);position:relative;overflow:hidden;display:block}
.proof__dots i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
.proof__dots i.on::after{animation:fill 6s linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
@media(max-width:900px){.proof{grid-template-columns:1fr;gap:34px}}
@media(max-width:480px){.proof__nums{grid-template-columns:1fr}.proof__num:nth-child(2){border-top:0}}
/* services */
.serv{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--paper)}
.serv__tile{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper3);display:block}
.serv__tile img,.serv__tile .ha-fb{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transform:scale(1.08);transition:all 1s var(--e)}
.serv__tile:hover img{filter:none;transform:scale(1)}
.serv__tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.78))}
.serv__t{position:absolute;left:24px;right:24px;bottom:24px;color:#fff;z-index:1;display:block}
.serv__t .label{color:rgba(255,255,255,.7);display:block;margin-bottom:10px}
.serv__h{display:block;font-size:clamp(36px,4.5vw,72px)}
.serv__p{display:block;font-size:13px;color:rgba(255,255,255,.7);margin-top:8px;max-width:28ch}
.serv__arrow{position:absolute;top:24px;right:24px;width:44px;height:44px;border:1px solid rgba(255,255,255,.6);border-radius:50%;display:grid;place-items:center;font-size:18px;color:#fff;z-index:1;transition:all .5s var(--e)}
.serv__tile:hover .serv__arrow{background:#fff;color:var(--ink);transform:rotate(45deg)}
@media(max-width:800px){.serv{grid-template-columns:1fr}.serv__tile{aspect-ratio:16/9}}
/* contact + footer */
.contact{padding:var(--sec) var(--gx) 80px}
.contact__huge{font-size:clamp(64px,15vw,260px);line-height:.8}
.contact__huge a{display:block;position:relative;width:max-content;max-width:100%}
.contact__huge a::after{content:"";position:absolute;left:0;bottom:.02em;height:.06em;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .7s var(--e)}
.contact__huge a:hover::after{transform:scaleX(1);transform-origin:left}
.contact__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:80px;padding-top:32px;border-top:1px solid var(--ink3);font-size:14px;color:var(--ink2);line-height:1.7}
.contact__grid b{display:block;color:var(--ink);font-weight:500;margin-bottom:8px;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.contact__grid a:hover{color:var(--ink)}
.contact__warn{color:var(--ink)}.contact__warn b{color:var(--red)}
@media(max-width:900px){.contact__grid{grid-template-columns:1fr 1fr;margin-top:48px}}
@media(max-width:560px){.contact__grid{grid-template-columns:1fr;gap:24px}}
.foot{background:var(--dark);color:rgba(244,241,236,.55);padding:40px var(--gx) 24px}
.foot__row{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap}
.foot__brand img{height:84px;width:auto;object-fit:contain;opacity:1}
.foot__brand .disp{color:var(--paper);font-size:22px}
.foot__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 24px;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.foot__list--small{margin-top:12px;font-size:11px;opacity:.7;text-transform:none;letter-spacing:.02em}
.foot__list a:hover{color:var(--paper)}
.foot__legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:36px;padding-top:18px;border-top:1px solid rgba(244,241,236,.12);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
/* 5. INNER PAGES ------------------------------------------- */
.phero{position:relative;padding:calc(var(--nav-h) + clamp(50px,10vh,120px)) var(--gx) clamp(36px,6vh,72px);overflow:hidden}
.phero.has-img{min-height:60svh;display:flex;align-items:flex-end;color:var(--light);background:var(--dark)}
.phero__media{position:absolute;inset:0}
.phero__media img{width:100%;height:100%;object-fit:cover;opacity:.7}
.phero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.75))}
.phero__in{position:relative;width:min(1240px,100%);margin-inline:auto}
.phero.has-img .label{color:var(--light2)}
.phero h1{font-size:clamp(52px,10vw,160px);margin-top:10px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);padding-bottom:var(--sec)}
.split--wide{grid-template-columns:1.4fr .8fr}
@media(max-width:900px){.split,.split--wide{grid-template-columns:1fr}}
.side{position:sticky;top:calc(var(--nav-h) + 20px);align-self:start;display:grid;gap:28px}
.side__block{border-top:1px solid var(--ink3);padding-top:18px}
.side__artists{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.side__artists a{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center}
.side__artists .art__ph{width:52px;height:52px;grid-row:1/3}
.side__artists .disp{font-size:26px;font-weight:700}
.side__artists small{font-size:12px;color:var(--ink2)}
.map{aspect-ratio:1;background:var(--paper2);overflow:hidden}
.map iframe{width:100%;height:100%;border:0}
.map__ph{height:100%;display:grid;place-items:center;text-align:center;padding:30px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-bottom:var(--sec)}
.card{display:block}
.card__img{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--paper2)}
.card__img img,.card__img .ha-fb{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e)}
.card:hover .card__img img{transform:scale(1.05)}
.card__h{display:block;font-size:clamp(28px,3vw,42px);font-weight:700;margin-top:14px}
.card__s{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-top:4px}
@media(max-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.cards{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:400px){.cards{grid-template-columns:1fr}}
.masonry{columns:3;column-gap:16px;padding-bottom:var(--sec)}
.masonry__item{display:block;break-inside:avoid;margin-bottom:16px;overflow:hidden;background:var(--paper2)}
.masonry__item img{width:100%;height:auto;transition:transform 1s var(--e)}
.masonry__item:hover img{transform:scale(1.03)}
@media(max-width:900px){.masonry{columns:2}}
@media(max-width:500px){.masonry{columns:1}}
.style-single__hero{position:relative;height:min(85svh,900px);min-height:480px;background:var(--dark);color:var(--light);overflow:hidden}
.style-single__media{position:absolute;inset:0}
.style-single__media img,.style-single__media .ha-fb{width:100%;height:100%;object-fit:cover}
.style-single__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.05) 40%,rgba(0,0,0,.8))}
.style-single__title{position:absolute;left:var(--gx);right:var(--gx);bottom:clamp(28px,6vh,60px)}
.style-single__title .label{color:var(--light2)}
.style-single__title h1{font-size:clamp(60px,13vw,220px);margin-top:10px}
.style-single__tag{margin-top:14px;font-size:clamp(15px,1.4vw,20px);color:var(--light2);max-width:50ch}
.style-single .split{padding-top:clamp(40px,8vh,90px)}
.pn{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink3);margin-bottom:0}
.pn__a{padding:36px var(--gx);display:grid;gap:8px;transition:background .4s}
.pn__a:hover{background:var(--paper2)}
.pn__a--r{text-align:right;border-left:1px solid var(--ink3)}
.pn__a .disp{font-size:clamp(28px,4vw,56px);font-weight:700}
@media(max-width:600px){.pn{grid-template-columns:1fr}.pn__a--r{border-left:0;border-top:1px solid var(--ink3);text-align:left}}
.artist-single__top{padding-top:calc(var(--nav-h) + clamp(40px,8vh,90px));grid-template-columns:.8fr 1.2fr;align-items:start}
.artist-single__photo{aspect-ratio:4/5;overflow:hidden;background:var(--paper2);position:sticky;top:calc(var(--nav-h) + 20px)}
.artist-single__photo img,.artist-single__photo .ha-fb{width:100%;height:100%;object-fit:cover}
.artist-single__name{font-size:clamp(56px,9vw,140px);margin:10px 0 24px}
.artist-single__styles{margin-top:28px}
.artist-single__links{display:flex;gap:18px;flex-wrap:wrap;margin:24px 0;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.note{font-size:14px;color:var(--ink2);border-left:2px solid var(--red);padding-left:14px}
@media(max-width:900px){.artist-single__top{grid-template-columns:1fr}.artist-single__photo{position:static;max-width:420px}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{padding:8px 14px;border:1px solid var(--ink3);border-radius:999px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;transition:all .3s}
.chip:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding-bottom:40px}
.post{display:grid;gap:8px}
.post__img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--paper2)}
.post__img img,.post__img .ha-fb{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e)}
.post:hover .post__img img{transform:scale(1.04)}
.post__h{font-size:clamp(26px,2.6vw,36px);font-weight:700}
.post__x{color:var(--ink2);font-size:14px}
@media(max-width:900px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.posts{grid-template-columns:1fr}}
.pagination{padding-bottom:var(--sec)}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.pagination .page-numbers{padding:10px 16px;border:1px solid var(--ink3);border-radius:999px;font-size:13px}
.pagination .page-numbers.current{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.results{list-style:none;margin:30px 0;padding:0}
.results li{border-top:1px solid var(--ink3)}
.results a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:18px 0}
.results .disp{font-size:clamp(24px,3vw,40px);font-weight:700}
.e404{min-height:80svh;display:grid;place-content:center;text-align:center;gap:16px;padding:var(--nav-h) var(--gx)}
.e404 h1{font-size:clamp(120px,30vw,400px)}
.e404 .btn{justify-self:center}
.sform{display:flex;gap:10px;margin:20px 0;max-width:520px}
.sform input{flex:1;padding:14px 18px;border:1px solid var(--ink3);background:transparent;font:inherit;border-radius:999px}
/* 6. WP CONTENT (.prose) ----------------------------------- */
.prose{font-size:clamp(16px,1.15vw,18px);line-height:1.7;color:var(--ink)}
.prose>*+*{margin-top:1.2em}
.prose h1,.prose h2,.prose h3,.prose h4{font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:.95;margin-top:1.8em}
.prose h1{font-size:clamp(44px,6vw,90px)}.prose h2{font-size:clamp(36px,4.5vw,64px)}.prose h3{font-size:clamp(28px,3vw,42px)}.prose h4{font-size:clamp(22px,2.2vw,30px)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p{margin-top:1em}.prose p:first-child{margin-top:0}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink3);transition:text-decoration-color .3s}
.prose a:hover{text-decoration-color:var(--ink)}
.prose ul,.prose ol{padding-left:1.3em}.prose li+li{margin-top:.4em}
.prose blockquote{border-left:2px solid var(--ink);padding-left:22px;font-family:var(--disp);font-weight:500;font-size:clamp(22px,2.5vw,34px);line-height:1.1;text-transform:uppercase;margin-left:0}
.prose img{height:auto}
.prose figure{margin:2em 0}.prose figcaption{font-size:12px;color:var(--ink2);margin-top:8px;letter-spacing:.06em;text-transform:uppercase}
.prose table{width:100%;border-collapse:collapse;font-size:15px}
.prose th,.prose td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--ink3);vertical-align:top}
.prose th{font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2)}
.prose hr{border:0;border-top:1px solid var(--ink3);margin:3em 0}
.prose strong{font-weight:500}
.prose .wp-block-button__link{border-radius:999px;background:var(--ink);color:var(--paper);text-decoration:none;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:14px 24px}
.prose .wp-block-columns{gap:32px}
.prose .wp-block-gallery{gap:12px}
.prose .alignwide{width:min(1240px,100vw - 2*var(--gx));margin-left:calc(50% - min(620px,50vw - var(--gx)))}
.prose .alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
.prose .wp-block-embed iframe{width:100%;aspect-ratio:16/9;height:auto}
.prose details{border-top:1px solid var(--ink3);padding:16px 0}
.prose summary{font-family:var(--disp);font-weight:700;font-size:22px;text-transform:uppercase;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.prose summary::after{content:"+"}.prose details[open] summary::after{content:"–"}
.wp-caption{max-width:100%}.wp-caption-text{font-size:12px;color:var(--ink2)}
.alignleft{float:left;margin:0 24px 16px 0}.alignright{float:right;margin:0 0 16px 24px}.aligncenter{margin-inline:auto}
@media(max-width:600px){.alignleft,.alignright{float:none;margin:16px 0}}
.comments{margin-top:60px;border-top:1px solid var(--ink3);padding-top:30px}
.comment-list{list-style:none;padding:0}
/* 7. WOOCOMMERCE + FORMS ----------------------------------- */
.woo-wrap{padding-bottom:var(--sec)}
.woocommerce ul.products{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0;padding:0;list-style:none}
.woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important}
.woocommerce ul.products li.product a img{aspect-ratio:4/5;object-fit:cover;width:100%;margin:0 0 12px;transition:transform 1s var(--e)}
.woocommerce ul.products li.product:hover a img{transform:scale(1.03)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--disp);font-weight:700;font-size:26px;text-transform:uppercase;padding:0;margin:0 0 6px}
.woocommerce ul.products li.product .price{color:var(--ink);font-weight:500;font-size:15px}
.woocommerce ul.products li.product .button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce button.button.alt,.woocommerce a.button.alt{background:var(--ink)!important;color:var(--paper)!important;border-radius:999px!important;font-weight:500!important;font-size:12px!important;letter-spacing:.12em;text-transform:uppercase;padding:14px 22px!important;margin-top:12px}
.woocommerce .woocommerce-ordering select,.woocommerce .woocommerce-result-count{font-size:13px;color:var(--ink2)}
.woocommerce div.product .product_title{font-family:var(--disp);font-weight:900;font-size:clamp(40px,6vw,90px);text-transform:uppercase;line-height:.9}
.woocommerce div.product p.price{font-size:22px;color:var(--ink);font-weight:500}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,.woocommerce div.product .woocommerce-tabs ul.tabs li{border:0;background:none;border-radius:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-top-color:var(--ink);background:var(--paper2)}
.woocommerce table.shop_table{border:0;border-collapse:collapse}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{border:0;border-bottom:1px solid var(--ink3)}
@media(max-width:800px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:400px){.woocommerce ul.products{grid-template-columns:1fr}}
/* forms (Contact Form 7, WPForms, Woo, comments) */
.prose input[type="text"],.prose input[type="email"],.prose input[type="tel"],.prose input[type="date"],.prose input[type="number"],.prose input[type="url"],.prose textarea,.prose select,
.woocommerce .input-text,.woocommerce select,.comment-form input:not([type=submit]),.comment-form textarea{
width:100%;padding:16px 18px;border:1px solid var(--ink3);background:transparent;font:inherit;font-size:16px;border-radius:0;color:var(--ink);transition:border-color .3s}
.prose textarea,.comment-form textarea{min-height:160px;resize:vertical}
.prose input:focus,.prose textarea:focus,.prose select:focus{border-color:var(--ink);outline:0}
.prose input[type="submit"],.prose button[type="submit"],.wpcf7-submit,.wpforms-submit,.comment-form input[type=submit]{display:inline-flex;padding:16px 28px;border-radius:999px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);font:inherit;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;cursor:pointer}
.prose label{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);margin-bottom:6px}
.wpcf7 form .wpcf7-response-output{border:1px solid var(--ink3);padding:14px;margin:20px 0 0;font-size:14px}
.prose input[type="checkbox"],.prose input[type="radio"]{width:auto;display:inline-block;margin-right:8px}
/* reduced motion */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.hero h1 .ln span{transform:none}.mani__text .w{color:var(--ink)}
}
/* print */
@media print{.nav,.cur,.loader,.mmenu,.ticker,.foot,.contact__huge{display:none!important}body{background:#fff;color:#000}}
/* ==========================================================================
Content-page components (WE-DEV additions)
========================================================================== */
/* linked cards — replaces the old modal tiles on About Us */
.ha-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px;
margin:40px 0 56px}
.ha-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:34px 28px 28px;
background:var(--paper);color:var(--ink);overflow:hidden;border:1px solid var(--ink3);
transition:background .45s var(--e),color .45s var(--e),border-color .45s var(--e)}
.ha-card,.ha-card *,.prose .ha-card,.prose .ha-card *{text-decoration:none!important}
.ha-card:hover{border-color:var(--ink)}
.ha-card::before{content:"";position:absolute;inset:0;background:var(--ink);
transform:translateY(101%);transition:transform .5s var(--e);z-index:0}
.ha-card>*{position:relative;z-index:1}
.ha-card:hover,.ha-card:focus-visible{color:var(--paper)}
.ha-card:hover::before,.ha-card:focus-visible::before{transform:translateY(0)}
.ha-card__icon{width:56px;height:56px;object-fit:contain;margin-bottom:4px;
transition:filter .45s var(--e),transform .45s var(--e)}
.ha-card:hover .ha-card__icon{filter:brightness(0) invert(1);transform:translateY(-4px)}
.ha-card__t{font-family:var(--disp);font-weight:700;text-transform:uppercase;
font-size:clamp(24px,2.4vw,34px);line-height:1}
.ha-card__x{font-size:15px;line-height:1.55;color:var(--ink2);transition:color .45s var(--e)}
.ha-card:hover .ha-card__x{color:rgba(244,241,236,.75)}
.ha-card__go{margin-top:auto;padding-top:14px;font-size:12px;letter-spacing:.16em;
text-transform:uppercase;opacity:.55;transition:opacity .45s var(--e)}
.ha-card:hover .ha-card__go{opacity:1}
/* image gallery grid (Work page) */
.ha-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;margin:40px 0 8px}
.ha-gal figure{margin:0;overflow:hidden;background:var(--paper2);aspect-ratio:4/5;position:relative}
.ha-gal img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .9s var(--e),filter .6s var(--e)}
.ha-gal figure:hover img{transform:scale(1.06)}
.ha-gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 14px 12px;color:#fff;
font-size:11px;letter-spacing:.16em;text-transform:uppercase;
background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));
opacity:0;transform:translateY(8px);transition:all .45s var(--e)}
.ha-gal figure:hover figcaption{opacity:1;transform:none}
@media(max-width:600px){.ha-gal{grid-template-columns:repeat(2,1fr);gap:5px}}
/* price / data tables inside page content */
.prose table{width:100%;border-collapse:collapse;margin:22px 0 34px;font-size:15px}
.prose table th{text-align:left;font-family:var(--disp);font-weight:700;text-transform:uppercase;
letter-spacing:.04em;font-size:15px;padding:14px 4px;border-bottom:1px solid var(--ink3);width:auto}
.prose table td{padding:14px 4px;border-bottom:1px solid var(--ink4);
font-variant-numeric:tabular-nums;white-space:nowrap}
.prose table tr:hover th,.prose table tr:hover td{background:rgba(0,0,0,.035)}
/* keep long price rows readable instead of stretching edge to edge */
.prose>table{max-width:760px}
/* ==========================================================================
Shop toolbar, forms and touch targets (WE-DEV additions)
========================================================================== */
/* result count + sorting: a proper toolbar instead of two stray elements */
.woo-wrap .woocommerce-notices-wrapper:empty{display:none}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{margin:0}
.woo-wrap{display:flow-root}
.woocommerce .woocommerce-result-count{float:none;display:inline-block;
font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.woocommerce .woocommerce-ordering{float:none;display:inline-block}
.woo-wrap>.woocommerce-result-count,
.woo-wrap>form.woocommerce-ordering{vertical-align:middle}
.woocommerce .woocommerce-ordering select{
-webkit-appearance:none;appearance:none;border:1px solid var(--ink3);background:transparent;
padding:12px 40px 12px 16px;font:inherit;font-size:13px;letter-spacing:.06em;border-radius:0;
cursor:pointer;
background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
background-position:calc(100% - 20px) 52%,calc(100% - 14px) 52%;
background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.woocommerce .woocommerce-ordering select:focus{outline:2px solid var(--ink);outline-offset:2px}
/* toolbar row */
.woo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
padding-bottom:22px;margin-bottom:30px;border-bottom:1px solid var(--ink3)}
@media(max-width:600px){.woo-toolbar{gap:12px}
.woocommerce .woocommerce-ordering select{width:100%}}
/* forms: consistent, legible, obviously interactive */
.prose .wpcf7 label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink2);margin-bottom:26px}
.prose .wpcf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.prose .wpcf7 textarea,.prose .wpcf7 select{
width:100%;margin-top:8px;padding:15px 16px;border:1px solid var(--ink3);background:var(--paper);
font:inherit;font-size:16px;border-radius:0;transition:border-color .3s var(--e),background .3s var(--e)}
.prose .wpcf7 input:focus,.prose .wpcf7 textarea:focus,.prose .wpcf7 select:focus{
outline:none;border-color:var(--ink);background:#fff}
.prose .wpcf7 textarea{min-height:150px;resize:vertical}
.prose .wpcf7 input[type=submit]{
background:var(--ink);color:var(--paper);border:0;padding:17px 40px;font-family:var(--disp);
font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:14px;cursor:pointer;
transition:opacity .3s var(--e),transform .3s var(--e)}
.prose .wpcf7 input[type=submit]:hover{opacity:.85;transform:translateY(-2px)}
.prose .wpcf7 .wpcf7-list-item{margin:0 18px 0 0}
.wpcf7 .codedropz-upload-wrapper{border:1px dashed var(--ink3);padding:8px}
.wpcf7-not-valid-tip{font-size:12px;letter-spacing:.06em;text-transform:none}
/* two-up form rows on wide screens */
@media(min-width:760px){
.prose .wpcf7 .ha-row{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
}
/* touch targets: footer + inline links were 17-20px tall on mobile */
@media(max-width:900px){
.foot__list a,.foot a,.contact__grid a{display:inline-block;min-height:44px;line-height:44px}
.foot__list{display:flex;flex-wrap:wrap;gap:0 22px}
.foot__list--small a{line-height:40px;min-height:40px}
}
/* touch targets — enforced late so nothing out-specifies them (WCAG 2.5.8) */
@media(max-width:900px){
.foot__list a,.foot__list--small a,.foot a,
.contact__grid a,.contact__list a,.mmenu a,.mmenu__list a{
display:inline-flex;align-items:center;min-height:44px}
.mmenu__sub a{min-height:40px}
}
/* ==========================================================================
SHOP — product cards, single product, cart & checkout (WE-DEV)
========================================================================== */
.woo-wrap{padding-bottom:var(--sec)}
/* toolbar ---------------------------------------------------------------- */
.woocommerce .woo-wrap>.woocommerce-result-count,
.woocommerce .woo-wrap>form.woocommerce-ordering{
display:inline-block;vertical-align:middle;margin:0 0 34px}
.woocommerce .woo-wrap>form.woocommerce-ordering{float:right}
@media(max-width:600px){
.woocommerce .woo-wrap>.woocommerce-result-count,
.woocommerce .woo-wrap>form.woocommerce-ordering{display:block;float:none;margin-bottom:14px;width:100%}
}
/* product grid ----------------------------------------------------------- */
.woocommerce ul.products,ul.products{
display:grid!important;grid-template-columns:repeat(2,1fr);gap:clamp(18px,3vw,44px);
margin:0!important;padding:0;list-style:none;clear:both}
@media(max-width:760px){.woocommerce ul.products,ul.products{grid-template-columns:1fr;gap:26px}}
.woocommerce ul.products li.product,ul.products li.product{
width:auto!important;margin:0!important;float:none!important;padding:0;text-align:left;
display:flex;flex-direction:column;position:relative;isolation:isolate}
/* the whole card is the link */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
display:flex;flex-direction:column;text-decoration:none;color:inherit}
/* media frame: packshots get room to breathe on a tinted ground ----------- */
.ha-p__media{position:relative;overflow:hidden;background:#fff;
aspect-ratio:1/1;display:grid;place-items:center;
border:1px solid var(--ink3);transition:border-color .5s var(--e),box-shadow .5s var(--e)}
.woocommerce ul.products li.product .ha-p__media img,
ul.products li.product .ha-p__media img{
width:100%!important;height:100%!important;object-fit:contain!important;
padding:7%;margin:0!important;aspect-ratio:auto!important;
transition:transform 1.1s var(--e)}
li.product:hover .ha-p__media{border-color:var(--ink);box-shadow:0 24px 50px -30px rgba(0,0,0,.45)}
li.product:hover .ha-p__media img{transform:scale(1.06)}
/* stock / offer badge */
.ha-p__badge{position:absolute;top:14px;left:14px;z-index:2;
font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:.16em;
text-transform:uppercase;padding:7px 12px;border-radius:0}
.ha-p__badge--out{background:var(--ink);color:var(--paper)}
.ha-p__badge--sale{background:#b4271f;color:#fff}
/* card text -------------------------------------------------------------- */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title{
font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:.95;
font-size:clamp(24px,2.4vw,34px);padding:22px 0 0!important;margin:0 0 8px}
.ha-p__x{font-size:14px;line-height:1.55;color:var(--ink2);margin:0 0 12px;max-width:46ch}
.woocommerce ul.products li.product .price,ul.products li.product .price{
display:block;font-family:var(--disp);font-weight:700;font-size:19px;color:var(--ink);margin:0 0 18px}
.woocommerce ul.products li.product .price del{opacity:.45;font-weight:500;margin-right:8px}
.woocommerce ul.products li.product .price ins{text-decoration:none}
/* card CTA: an underlined action, not a floating grey button ------------- */
.woocommerce ul.products li.product .button,
ul.products li.product .button{
align-self:flex-start;margin:auto 0 0!important;padding:0 0 6px!important;
background:none!important;color:var(--ink)!important;border:0!important;border-radius:0!important;
border-bottom:1px solid var(--ink)!important;
font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
transition:gap .3s var(--e),opacity .3s var(--e);display:inline-flex;gap:8px;align-items:center}
.woocommerce ul.products li.product .button::after{content:"→";transition:transform .35s var(--e)}
.woocommerce ul.products li.product .button:hover::after{transform:translateX(5px)}
.woocommerce ul.products li.product .added_to_cart{display:none}
/* single product --------------------------------------------------------- */
.woocommerce div.product{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start}
@media(max-width:820px){.woocommerce div.product{grid-template-columns:1fr;gap:26px}}
.woocommerce div.product div.images{margin:0;background:var(--paper2);border:1px solid var(--ink3)}
.woocommerce div.product div.images{background:#fff}
.woocommerce div.product div.images img{padding:6%;object-fit:contain}
.woocommerce div.product div.summary{margin:0}
.woocommerce div.product .product_title{margin:0 0 14px}
.woocommerce div.product p.price{margin:0 0 22px}
.woocommerce div.product form.cart{margin:26px 0}
.woocommerce div.product form.cart div.quantity{margin-right:12px}
.woocommerce .quantity input.qty{width:84px;padding:15px 10px;border:1px solid var(--ink3);
background:transparent;font:inherit;text-align:center}
.woocommerce div.product .woocommerce-tabs{grid-column:1/-1;margin-top:20px}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--ink2);line-height:1.65}
.woocommerce .stock.out-of-stock{color:#b4271f;font-family:var(--disp);font-weight:700;
text-transform:uppercase;letter-spacing:.1em;font-size:13px}
/* primary buttons (single product, cart, checkout) ----------------------- */
.woocommerce div.product .single_add_to_cart_button,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.woocommerce .cart .button,.woocommerce .checkout-button{
background:var(--ink)!important;color:var(--paper)!important;border:0!important;border-radius:0!important;
padding:17px 34px!important;font-family:var(--disp);font-weight:700;font-size:13px;
letter-spacing:.12em;text-transform:uppercase;transition:opacity .3s var(--e),transform .3s var(--e)}
.woocommerce div.product .single_add_to_cart_button:hover,
.woocommerce a.button.alt:hover,.woocommerce .checkout-button:hover{opacity:.86;transform:translateY(-2px)}
/* cart & checkout -------------------------------------------------------- */
.woocommerce table.shop_table{border:0;border-collapse:collapse;width:100%}
.woocommerce table.shop_table th{font-family:var(--disp);font-weight:700;text-transform:uppercase;
letter-spacing:.08em;font-size:12px;color:var(--ink2);padding:14px 10px;border-bottom:1px solid var(--ink)}
.woocommerce table.shop_table td{padding:18px 10px;border-bottom:1px solid var(--ink3);vertical-align:middle}
.woocommerce table.shop_table img{width:74px;height:auto;border:1px solid var(--ink3);background:var(--paper2)}
.woocommerce-cart .cart-collaterals .cart_totals{width:100%;max-width:420px;margin-left:auto}
.woocommerce .cart_totals h2,.woocommerce-checkout h3{font-family:var(--disp);font-weight:700;
text-transform:uppercase;font-size:22px;margin:0 0 14px}
.woocommerce form.checkout_coupon,.woocommerce form.login,.woocommerce-checkout #payment{
border:1px solid var(--ink3);border-radius:0;background:transparent}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--ink3)}
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info,.woocommerce .woocommerce-error{
border-top:2px solid var(--ink);background:var(--paper2);border-radius:0}
.woocommerce .woocommerce-message::before,.woocommerce .woocommerce-info::before{color:var(--ink)}
/* empty cart */
.woocommerce .cart-empty{font-family:var(--disp);font-weight:700;text-transform:uppercase;
font-size:clamp(28px,4vw,54px);margin:20px 0}
.woocommerce .return-to-shop{margin-bottom:40px}
/* WooCommerce adds clearfix ::before/::after to ul.products. In a grid
container those become grid items and consume the first cell, pushing
product 1 into column 2 and leaving a blank hole. Kill them. */
.woocommerce ul.products::before,.woocommerce ul.products::after,
ul.products::before,ul.products::after{content:none!important;display:none!important}
/* --------------------------------------------------------------------------
Single product: there is no page hero on product pages, so the wrap must
clear the fixed nav itself. Without this the product title rendered on top
of the menu. The hero-adjacent rule keeps shop archives unchanged.
-------------------------------------------------------------------------- */
.woo-wrap{padding-top:calc(var(--nav-h) + clamp(38px,7vh,86px))}
.phero + .woo-wrap{padding-top:0}
.woocommerce div.product .product_title{
font-size:clamp(34px,4.2vw,64px);line-height:.92;margin:0 0 16px}
.woocommerce div.product div.images{position:sticky;top:calc(var(--nav-h) + 24px)}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger{
top:14px;right:14px;background:var(--paper);border:1px solid var(--ink3);
width:40px;height:40px;display:grid;place-items:center;border-radius:0;text-indent:0}
.woocommerce div.product p.price,.woocommerce div.product span.price{
font-family:var(--disp);font-weight:700;font-size:26px;color:var(--ink)!important}
.woocommerce div.product .woocommerce-variation-price span.price{font-size:30px}
/* variation selector */
.woocommerce div.product form.cart .variations{margin-bottom:18px;border:0}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th{padding:0 0 10px;border:0;display:block;text-align:left}
.woocommerce div.product form.cart .variations label{
font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink2);margin:0 0 6px;display:block}
.woocommerce div.product form.cart .variations select{max-width:320px}
.woocommerce div.product form.cart .reset_variations{font-size:12px;letter-spacing:.1em;text-transform:uppercase}
/* quantity + add to cart on one baseline */
.woocommerce div.product form.cart{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px}
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .woocommerce-variation{flex:0 0 100%}
.woocommerce .quantity input.qty{height:100%;min-height:54px}
.woocommerce div.product .single_add_to_cart_button{min-height:54px}
/* meta */
.woocommerce div.product .product_meta{margin-top:26px;padding-top:18px;
border-top:1px solid var(--ink3);font-size:13px;color:var(--ink2);line-height:2}
.woocommerce div.product .product_meta a{color:var(--ink)}
.woocommerce div.product .product_meta .sku_wrapper,
.woocommerce div.product .product_meta .posted_in,
.woocommerce div.product .product_meta .tagged_as{display:block}
/* tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 26px;
display:flex;gap:26px;border-bottom:1px solid var(--ink3)}
.woocommerce div.product .woocommerce-tabs ul.tabs li{margin:0;padding:0;background:none;border:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
display:block;padding:0 0 12px;font-family:var(--disp);font-weight:700;font-size:12px;
letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);border-bottom:2px solid transparent}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink);border-bottom-color:var(--ink)}
.woocommerce div.product .woocommerce-tabs .panel>h2:first-child{display:none}
.woocommerce table.woocommerce-product-attributes th{width:200px}
/* related products */
.woocommerce .related>h2,.woocommerce .up-sells>h2,.woocommerce .cross-sells>h2{
font-family:var(--disp);font-weight:700;text-transform:uppercase;
font-size:clamp(28px,3.4vw,46px);margin:0 0 26px}
.woocommerce .related,.woocommerce .up-sells{grid-column:1/-1;margin-top:clamp(40px,7vh,90px);
padding-top:clamp(30px,5vh,60px);border-top:1px solid var(--ink3)}
.woocommerce .related ul.products,.woocommerce .up-sells ul.products{
grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.woocommerce .related ul.products,.woocommerce .up-sells ul.products{
grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.woocommerce .related ul.products,.woocommerce .up-sells ul.products{
grid-template-columns:1fr}}
/* smaller type for the related cards */
.woocommerce .related ul.products li.product .woocommerce-loop-product__title{font-size:clamp(19px,1.7vw,24px)}
.woocommerce .related ul.products li.product .ha-p__x{display:none}
/* WooCommerce floats the gallery/summary at 48% each. Inside our grid cells
that halved them again, leaving both columns stranded at ~280px. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce div.product .woocommerce-product-gallery{
width:100%!important;float:none!important;margin:0!important;max-width:none}
.woocommerce div.product .woocommerce-product-gallery__image img{width:100%;height:auto}
/* --------------------------------------------------------------------------
Closing CTA ("Book a consultation") — appears above the footer on every
page. It was clamp(64px,15vw,260px), i.e. ~216px a line on a laptop, which
swamped every page. Re-cut as an editorial CTA: calmer type, an eyebrow, a
sliding arrow and a rule that draws in on hover.
-------------------------------------------------------------------------- */
.contact{padding:clamp(56px,9vh,110px) var(--gx) clamp(48px,7vh,80px)}
.contact__huge{font-size:clamp(34px,5.6vw,86px);line-height:.98;letter-spacing:-.022em;
position:relative;padding-top:34px}
.contact__huge::before{content:"Ready when you are";position:absolute;top:0;left:0;
font-family:var(--body);font-size:11px;font-weight:400;letter-spacing:.24em;
text-transform:uppercase;color:var(--ink2)}
.contact__huge a{display:inline-block;position:relative;width:max-content;max-width:100%;
transition:opacity .4s var(--e)}
.contact__huge a::after{height:2px;bottom:-.04em}
/* arrow on the second line */
.contact__huge a:last-child::before{content:"↗";display:inline-block;font-size:.44em;
vertical-align:.42em;margin-right:.16em;opacity:.4;
transition:transform .5s var(--e),opacity .5s var(--e)}
.contact__huge a:last-child:hover::before{opacity:1;transform:translate(5px,-5px)}
.contact__huge:hover a{opacity:.45}
.contact__huge a:hover{opacity:1}
.contact__grid{margin-top:clamp(44px,6vh,68px)}
@media(max-width:600px){
.contact__huge{font-size:clamp(30px,8.4vw,44px);padding-top:28px}
.contact__huge::before{font-size:10px;letter-spacing:.18em}
}
/* arrow trails the whole CTA, not wedged between the two lines */
.contact__huge a:last-child::before{content:none}
.contact__huge::after{content:"↗";display:inline-block;font-size:.42em;vertical-align:.5em;
margin-left:.16em;opacity:.4;transition:transform .5s var(--e),opacity .5s var(--e)}
.contact__huge:hover::after{opacity:1;transform:translate(6px,-6px)}
/* Hero legibility: the nav uses mix-blend-mode:difference, which disappears on
a mid-grey photo. Strengthen the top of the scrim so the menu and the meta
line always have contrast, whatever image is set. */
.hero__media::after{background:linear-gradient(180deg,
rgba(0,0,0,.62) 0%,rgba(0,0,0,.30) 22%,rgba(0,0,0,.12) 45%,rgba(0,0,0,.82) 100%)!important}
.hero__meta div{color:rgba(244,241,236,.78)}
.hero__meta div b{color:#fff}
/* keep the subject visible: bias the crop away from the headline side */
.hero__media img{object-position:center 30%}
/* The hero is dark, so the real crest reads properly — no need to flatten it
to a white silhouette that loses the "Hypnotic Art" lettering. */
.nav--front:not(.is-scrolled) .nav__brand img{filter:none}
/* Headline: a touch more air between the lines and more room off the bottom
edge, so the three lines read as a stack rather than a solid block. */
.hero h1{line-height:.84}
.hero{padding-bottom:clamp(52px,9vh,110px)}
.hero__aside{padding-bottom:6px}
@media(max-width:900px){.hero h1{line-height:.88}}
/* BOOK button: background:currentColor + a later color:var(--paper) rule made
the label white on a white pill. Set the contrasting colour per context. */
.nav__book:hover,.nav__book:focus-visible{background:var(--red);color:#fff;border-color:var(--red)}
.nav--front:not(.is-scrolled) .nav__book:hover,
.nav--front:not(.is-scrolled) .nav__book:focus-visible{color:#fff}
/* Hero crop: portrait phones need a tighter focal point than a wide desktop,
otherwise the subject drifts out of frame. */
.hero__media img{object-position:center 42%}
@media(max-width:900px){.hero__media img{object-position:58% 45%}}
@media(max-width:600px){.hero__media img{object-position:60% 46%}}
/* Loader now shows style names rather than a 0-100 counter, so it needs word
sizing instead of digit sizing. */
.loader__big{font-size:clamp(26px,6vw,92px);line-height:1.06;text-align:center;
padding-inline:var(--gx);max-width:100vw}
.loader__big span{white-space:nowrap}
@media(max-width:600px){.loader__big{font-size:clamp(22px,7vw,44px)}}
/* ==========================================================================
Booking chooser — one form at a time (WE-DEV)
========================================================================== */
.ha-bk{margin:8px 0 10px}
.ha-bk__tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
border:1px solid var(--ink3);margin-bottom:36px}
.ha-bk__tab{position:relative;display:flex;flex-direction:column;gap:6px;align-items:flex-start;
padding:20px 22px;background:transparent;border:0;border-right:1px solid var(--ink3);
cursor:pointer;text-align:left;color:var(--ink2);font:inherit;
transition:background .4s var(--e),color .4s var(--e)}
.ha-bk__tab:last-child{border-right:0}
.ha-bk__tab:hover{background:rgba(0,0,0,.035);color:var(--ink)}
.ha-bk__tab.is-on{background:var(--ink);color:var(--paper)}
.ha-bk__n{font-family:var(--mono,var(--body));font-size:11px;letter-spacing:.2em;opacity:.6}
.ha-bk__l{font-family:var(--disp);font-weight:700;text-transform:uppercase;
font-size:clamp(17px,1.7vw,24px);line-height:1}
.ha-bk__tab:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.ha-bk__tab.is-on:focus-visible{outline-color:var(--paper)}
.ha-bk__h{font-family:var(--disp);font-weight:700;text-transform:uppercase;
font-size:clamp(24px,2.6vw,36px);margin:0 0 8px}
.ha-bk__blurb{color:var(--ink2);max-width:60ch;margin:0 0 26px;line-height:1.6}
/* without JS every panel stays readable; with JS only the chosen one shows */
.ha-bk.has-js .ha-bk__panel{display:none}
.ha-bk.has-js .ha-bk__panel.is-on{display:block;animation:habk .45s var(--e) both}
@keyframes habk{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ha-bk:not(.has-js) .ha-bk__panel{margin-bottom:48px}
.ha-bk:not(.has-js) .ha-bk__tabs{display:none}
@media(max-width:700px){
.ha-bk__tabs{grid-template-columns:1fr}
.ha-bk__tab{border-right:0;border-bottom:1px solid var(--ink3);
flex-direction:row;align-items:center;gap:12px;padding:16px 18px;min-height:56px}
.ha-bk__tab:last-child{border-bottom:0}
}
/* Contact page: the map column had no height of its own, so the iframe
collapsed to nothing. */
.map{position:sticky;top:calc(var(--nav-h) + 24px);min-height:520px;height:70vh;max-height:720px;
background:var(--paper2);border:1px solid var(--ink3);overflow:hidden}
@media(max-width:900px){.map{position:static;height:360px;min-height:0}}
.split .prose h3{font-family:var(--disp);font-weight:700;text-transform:uppercase;
font-size:13px;letter-spacing:.18em;color:var(--ink2);margin:34px 0 8px}
.split .prose h3:first-child{margin-top:0}
.split .prose .lede{font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:var(--ink);margin-bottom:8px}
.contact-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:0 0 8px}
@media(max-width:560px){.contact-cols{grid-template-columns:1fr;gap:14px}}
/* ==========================================================================
FAQ accordions + readable measure (WE-DEV)
========================================================================== */
.ha-faq{border-top:1px solid var(--ink3);margin:34px 0 10px;max-width:900px}
.ha-faq__i{border-bottom:1px solid var(--ink3)}
.ha-faq__q{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:18px;
padding:22px 46px 22px 0;position:relative;
font-family:var(--disp);font-weight:700;text-transform:uppercase;
font-size:clamp(17px,1.7vw,23px);line-height:1.15;color:var(--ink);
transition:color .3s var(--e)}
.ha-faq__q::-webkit-details-marker{display:none}
.ha-faq__q:hover{color:var(--ink2)}
.ha-faq__q::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:2px;
background:var(--ink);transform:translateY(-50%);transition:transform .35s var(--e)}
.ha-faq__q::before{content:"";position:absolute;right:6px;top:50%;width:14px;height:2px;
background:var(--ink);transform:translateY(-50%) rotate(90deg);transition:transform .35s var(--e)}
.ha-faq__i[open] .ha-faq__q::before{transform:translateY(-50%) rotate(0)}
.ha-faq__a{padding:0 46px 26px 0;max-width:68ch;color:var(--ink2);line-height:1.7;
animation:hafaq .35s var(--e) both}
.ha-faq__a p:first-child{margin-top:0}
@keyframes hafaq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ha-faq__i[open] .ha-faq__q{color:var(--ink)}
@media(max-width:600px){.ha-faq__q{padding:18px 38px 18px 0;font-size:16px}
.ha-faq__a{padding-right:0}}
/* long-form pages: keep a readable line length */
.prose>p,.prose>ul,.prose>ol{max-width:74ch}
/* feature list (e.g. "What we offer" on the laser page) */
.ha-points{list-style:none;margin:20px 0 34px;padding:0;display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
background:var(--ink3);border:1px solid var(--ink3);max-width:none}
.ha-points li{background:var(--paper);padding:20px 22px;position:relative;
padding-left:52px;font-size:15px;line-height:1.55;color:var(--ink)}
.ha-points li::before{content:"";position:absolute;left:22px;top:26px;width:14px;height:2px;
background:var(--ink)}
/* The front/hero nav uses mix-blend-mode:difference for the menu text, which
also inverted the logo's colours against the photo. Keep the crest out of
the blend so it always renders as the real mark. */
.nav__brand{mix-blend-mode:normal;isolation:isolate}
/* mix-blend-mode on .nav blends the entire header against the photo, which
inverted the logo's reds. A child cannot opt out of a parent's blend, so
drop the blend and set explicit light colours — the hero scrim already
guarantees contrast. */
.nav--front{mix-blend-mode:normal;color:#fff}
.nav--front .nav__list a,.nav--front .nav__book{color:#fff}
.nav--front .nav__list a::after{background:#fff}
.nav--front .nav__burger span{background:#fff}
.nav.is-scrolled,.nav.is-scrolled .nav__list a,.nav.is-scrolled .nav__book{color:var(--ink)}
.nav.is-scrolled .nav__list a::after{background:var(--ink)}
.nav.is-scrolled .nav__burger span{background:var(--ink)}
/* remaining touch targets: inline links in page copy, tags, CF7 upload button */
@media(max-width:900px){
.prose p a,.prose li a,.split .prose a,
.post-tags a,.entry-meta a,
.wpcf7 .codedropz-btn-wrap a,.wpcf7 .cd-upload-btn{
display:inline-flex;align-items:center;min-height:44px}
.prose p a{min-height:0;padding-block:10px}
}
/* ==========================================================================
Page rhythm fixes (WE-DEV)
.wrap had no vertical padding at all, so body copy started ~20px under the
hero. Long-form pages also ran a narrow column hard against the left edge
of a 1240px wrap, leaving half the page empty.
========================================================================== */
/* 1. breathing room between the hero and the content */
.phero + .wrap,.phero + article.wrap,.phero + .split,.phero + .woo-wrap{
padding-top:clamp(50px,7vh,96px)}
article.wrap.prose,.wrap.prose{padding-bottom:clamp(60px,9vh,120px)}
/* 2. long-form pages: a centred, comfortable measure instead of a narrow
column stranded on the left */
article.wrap.prose{width:min(920px,100% - 2*var(--gx))}
article.wrap.prose>p,article.wrap.prose>ul,article.wrap.prose>ol{max-width:none}
article.wrap.prose>h2{font-size:clamp(28px,3.4vw,46px);margin:52px 0 14px;line-height:1}
article.wrap.prose>h3{font-size:clamp(21px,2.2vw,30px);margin:40px 0 12px;line-height:1.05}
article.wrap.prose>h2:first-child,article.wrap.prose>h3:first-child{margin-top:0}
article.wrap.prose>p{margin:0 0 1.15em}
article.wrap.prose .ha-faq,article.wrap.prose>table{max-width:none}
/* 3. hero: it was cropping to a shallow band and cutting heads off */
.phero.has-img{min-height:min(74svh,700px)}
.phero__media img{object-position:center 30%}
@media(max-width:900px){.phero.has-img{min-height:min(52svh,440px)}}
.phero h1{font-size:clamp(40px,8vw,120px)}
/* 4. contact page: give the two columns room and align their tops */
.split{align-items:start;gap:clamp(34px,5vw,84px)}
.split .prose{padding-bottom:0}
.split .prose .wpcf7{margin-top:6px}
.split .prose .lede{margin-bottom:26px}
.contact-cols{margin:0 0 30px;padding-bottom:26px;border-bottom:1px solid var(--ink3)}
/* ==========================================================================
"What we offer" list — rebuilt.
The previous version used a grid with a coloured container showing through
1px gaps as faux borders. Any incomplete last row left a grey block, and the
grid escaped the text measure. This is a plain numbered list: it can never
leave a hole, and it stacks cleanly at every width.
========================================================================== */
.ha-points{list-style:none;margin:26px 0 42px;padding:0;background:none;border:0;
display:block;counter-reset:hapt;border-top:1px solid var(--ink3);max-width:none}
.ha-points li{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
background:none;border:0;border-bottom:1px solid var(--ink3);
padding:20px 0;margin:0;font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:var(--ink)}
.ha-points li::before{counter-increment:hapt;
content:counter(hapt,decimal-leading-zero);position:static;width:auto;height:auto;
background:none;font-family:var(--disp);font-weight:700;font-size:13px;
letter-spacing:.14em;color:var(--ink2);padding-top:3px}
@media(max-width:560px){
.ha-points li{gap:14px;padding:16px 0;font-size:15px}
.ha-points li::before{font-size:11px}
}
/* post tags at the foot of an article */
.prose .post-tags,.entry-footer{margin-top:30px;padding-top:18px;border-top:1px solid var(--ink3)}
/* ==========================================================================
Contact map — designed panel rather than a raw Google embed (WE-DEV)
========================================================================== */
.map{position:sticky;top:calc(var(--nav-h) + 24px);height:auto;min-height:0;max-height:none;
background:none;border:0;overflow:visible}
.map__frame{position:relative;overflow:hidden;background:var(--paper2);
border:1px solid var(--ink3);height:clamp(380px,58vh,600px);
box-shadow:0 30px 60px -46px rgba(0,0,0,.55)}
.map__frame iframe{width:100%;height:100%;border:0;display:block;
filter:grayscale(1) contrast(1.06) brightness(1.02);
transition:filter .6s var(--e)}
.map:hover .map__frame iframe,.map__frame:focus-within iframe{filter:grayscale(0) contrast(1)}
/* a faint ink wash so the map sits in the palette until you engage with it */
.map__frame::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(20,25,26,.10),rgba(20,25,26,.02) 40%,rgba(20,25,26,.14));
mix-blend-mode:multiply;opacity:1;transition:opacity .6s var(--e)}
.map:hover .map__frame::after{opacity:0}
/* floating studio card */
.map__card{position:relative;margin:-64px 0 0 22px;width:min(330px,calc(100% - 44px));
background:var(--paper);border:1px solid var(--ink);padding:20px 22px 18px;
display:flex;flex-direction:column;gap:6px;
box-shadow:0 24px 46px -30px rgba(0,0,0,.5)}
.map__card .label{color:var(--ink2)}
.map__addr{font-family:var(--disp);font-weight:700;text-transform:uppercase;
font-size:clamp(16px,1.5vw,20px);line-height:1.25;color:var(--ink)}
.map__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.map__btn{display:inline-flex;align-items:center;gap:7px;padding:11px 16px;
background:var(--ink);color:var(--paper);text-decoration:none;
font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.14em;
text-transform:uppercase;transition:opacity .3s var(--e),transform .3s var(--e)}
.map__btn i{font-style:normal;transition:transform .3s var(--e)}
.map__btn:hover{opacity:.88;transform:translateY(-2px)}
.map__btn:hover i{transform:translate(2px,-2px)}
.map__btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink3)}
.map__btn--ghost:hover{border-color:var(--ink)}
.map__note{margin:16px 0 0;font-size:13px;line-height:1.6;color:var(--ink2);max-width:44ch}
@media(max-width:900px){
.map{position:static}
.map__frame{height:clamp(300px,44vh,420px)}
.map__card{margin:-52px 0 0 16px;width:min(330px,calc(100% - 32px))}
}
@media(max-width:560px){
.map__card{margin:-44px auto 0;width:calc(100% - 24px)}
.map__acts{gap:6px}
.map__btn{flex:1 1 auto;justify-content:center}
}
/* The light-nav rule was hitting submenu links too, and the Piercing dropdown
has a paper background — so its items were white on white. Restrict the
light colour to top-level items and keep dropdown text as ink. */
.nav--front .nav__list>li>a{color:#fff}
.nav--front .nav__list .sub-menu a,
.nav.is-scrolled .nav__list .sub-menu a,
.nav__list .sub-menu a{color:var(--ink)}
.nav__list .sub-menu a:hover,.nav__list .sub-menu a:focus-visible{color:var(--ink);background:var(--paper2)}
/* the underline sweep belongs to top-level items only */
.nav--front .nav__list .sub-menu a::after,
.nav__list .sub-menu a::after{display:none}
/* ==========================================================================
THE STUDIO — Marek + Gabi (replaces the eight-artist roster)
========================================================================== */
.studio{padding:var(--sec) var(--gx)}
.studio__top{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:clamp(28px,4vh,54px)}
.studio__top h2{font-size:clamp(48px,8vw,130px);line-height:.92}
.studio__top p{max-width:46ch;font-size:clamp(16px,1.3vw,20px);color:var(--ink2);line-height:1.55}
@media(max-width:900px){.studio__top{grid-template-columns:1fr;gap:16px}}
.studio__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,44px)}
@media(max-width:760px){.studio__grid{grid-template-columns:1fr;gap:34px}}
.studio__p{display:flex;flex-direction:column}
.studio__ph{position:relative;overflow:hidden;background:var(--paper2);aspect-ratio:4/5;
border:1px solid var(--ink3)}
.studio__ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e),opacity .6s var(--e)}
.studio__peek{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--e)}
.studio__peek img{width:100%;height:100%;object-fit:cover}
.studio__p:hover .studio__ph>img{transform:scale(1.04);opacity:0}
.studio__p:hover .studio__peek{opacity:1}
.studio__txt{padding-top:20px}
.studio__txt h3{font-size:clamp(30px,3.6vw,52px);line-height:.95;margin:6px 0 10px}
.studio__txt p{color:var(--ink2);line-height:1.65;max-width:52ch}
/* ==========================================================================
PIERCING rows — reuses the hover-row interaction the roster used to have
========================================================================== */
.prc{padding:0 var(--gx) var(--sec)}
.prc__top{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:clamp(24px,3.5vh,44px)}
.prc__top h2{font-size:clamp(48px,8vw,130px);line-height:.92}
.prc__top p{max-width:44ch;font-size:clamp(16px,1.3vw,20px);color:var(--ink2);line-height:1.55}
@media(max-width:900px){.prc__top{grid-template-columns:1fr;gap:16px}}
.prc__rows{border-top:1px solid var(--ink3);margin-inline:-20px}
.prc__row{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:20px;
padding:22px 20px;border-bottom:1px solid var(--ink3);position:relative;overflow:hidden;
text-decoration:none;color:inherit;transition:color .4s var(--e)}
.prc__row::before{content:"";position:absolute;left:0;right:0;bottom:0;height:0;
background:var(--ink);transition:height .5s var(--e);z-index:0}
.prc__row>*{position:relative;z-index:1}
.prc__row:hover{color:var(--paper)}
.prc__row:hover::before{height:100%}
.prc__n{font-size:12px;letter-spacing:.2em;color:var(--ink2);font-variant-numeric:tabular-nums}
.prc__row:hover .prc__n{color:rgba(244,241,236,.85)}
.prc__nm{font-family:var(--disp);font-weight:700;font-size:clamp(28px,4vw,62px);
text-transform:uppercase;line-height:.92;transition:transform .6s var(--e)}
.prc__row:hover .prc__nm{transform:translateX(14px)}
.prc__x{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);
text-align:right;max-width:34ch}
.prc__row:hover .prc__x{color:rgba(244,241,236,.75)}
.prc__peek{position:absolute;right:clamp(20px,12vw,220px);top:50%;transform:translateY(-50%) scale(.94);
width:clamp(150px,15vw,220px);aspect-ratio:4/5;opacity:0;pointer-events:none;z-index:2;
transition:opacity .5s var(--e),transform .7s var(--e);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.prc__peek img{width:100%;height:100%;object-fit:cover}
.prc__row:hover .prc__peek{opacity:1;transform:translateY(-50%) scale(1)}
@media(max-width:900px){
.prc__rows{margin-inline:-14px}
.prc__row{grid-template-columns:36px 1fr;padding:16px 14px}
.prc__x{display:none}
.prc__peek{display:none}
.prc__row:hover .prc__nm{transform:translateX(8px)}
}
/* Piercing peek: match the artist-row effect exactly. The row must NOT clip —
overflow:hidden was truncating the photo. The fill bar is already inset to
the row box, so it stays contained without it. */
.prc__rows{overflow:visible}
.prc__row{overflow:visible}
.prc__peek{position:absolute;right:120px;top:50%;width:200px;aspect-ratio:3/4;
transform:translateY(-50%) rotate(-4deg) scale(.8);opacity:0;pointer-events:none;
transition:all .6s var(--e);z-index:5;overflow:hidden;
box-shadow:0 30px 60px -20px rgba(0,0,0,.45)}
.prc__peek img{width:100%;height:100%;object-fit:cover}
.prc__row:hover .prc__peek{opacity:1;transform:translateY(-50%) rotate(-3deg) scale(1)}
/* keep the sliding name from spilling past the row edge now nothing clips */
.prc__nm{will-change:transform}
@media(max-width:900px){.prc__peek{display:none}}
/* ==========================================================================
THE STUDIO — dark full-bleed feature (WE-DEV)
Overrides the earlier light version above.
========================================================================== */
.studio{background:var(--dark);color:var(--light);padding:clamp(70px,11vh,150px) var(--gx) clamp(80px,12vh,170px);
position:relative;overflow:hidden}
.studio::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(120% 80% at 78% 0%,rgba(255,255,255,.07),transparent 60%)}
.studio>*{position:relative;z-index:1}
.studio__top{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;
margin-bottom:clamp(40px,6vh,80px)}
.studio__top h2{font-size:clamp(48px,8.5vw,140px);line-height:.88;color:var(--light);
letter-spacing:-.02em}
.studio__top p{max-width:44ch;font-size:clamp(16px,1.3vw,20px);color:var(--light2);line-height:1.6}
@media(max-width:900px){.studio__top{grid-template-columns:1fr;gap:16px}}
.studio__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,70px);align-items:start}
@media(max-width:760px){.studio__grid{grid-template-columns:1fr;gap:56px}}
/* editorial offset — the second portrait drops, so it never reads as a table */
.studio__p--1{margin-top:clamp(0px,9vw,120px)}
@media(max-width:760px){.studio__p--1{margin-top:0}}
.studio__ph{position:relative;overflow:hidden;aspect-ratio:4/5;background:#0c1011;
border:1px solid rgba(244,241,236,.14)}
.studio__ph img{width:100%;height:100%;object-fit:cover;
transition:transform 1.3s var(--e),opacity .7s var(--e);will-change:transform}
.studio__peek{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--e)}
.studio__peek img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.studio__p:hover .studio__ph>img:first-of-type{opacity:0;transform:scale(1.07)}
.studio__p:hover .studio__peek{opacity:1}
/* oversized name riding the bottom edge of the photo */
.studio__nm{position:absolute;left:-.02em;bottom:-.13em;z-index:2;pointer-events:none;
font-size:clamp(56px,9vw,140px);line-height:.8;color:var(--light);
mix-blend-mode:difference;letter-spacing:-.03em;
transform:translateY(12px);opacity:0;transition:transform .9s var(--e),opacity .9s var(--e)}
.studio__p.is-in .studio__nm{transform:none;opacity:1}
.studio__ph::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55));
opacity:.9;transition:opacity .7s var(--e)}
.studio__p:hover .studio__ph::after{opacity:.4}
.studio__txt{padding-top:26px;max-width:52ch}
.studio__txt .label{color:var(--light2)}
.studio__txt h3{font-size:clamp(28px,3vw,44px);line-height:.95;margin:8px 0 12px;color:var(--light)}
.studio__txt p{color:var(--light2);line-height:1.7}
.studio__cta{display:inline-flex;align-items:center;gap:10px;margin-top:20px;
padding:14px 26px;border:1px solid rgba(244,241,236,.35);color:var(--light);
text-decoration:none;font-family:var(--disp);font-weight:700;font-size:12px;
letter-spacing:.16em;text-transform:uppercase;
transition:background .4s var(--e),color .4s var(--e),border-color .4s var(--e)}
.studio__cta i{font-style:normal;transition:transform .35s var(--e)}
.studio__cta:hover{background:var(--light);color:var(--dark);border-color:var(--light)}
.studio__cta:hover i{transform:translateX(5px)}
/* the section sits between two light bands — soften the seams */
.studio+.prc{padding-top:var(--sec)}
@media(prefers-reduced-motion:reduce){
.studio__nm{transform:none;opacity:1}
.studio__ph img{transition:none}
}
/* Parallax moves the portrait ±6%, which exposed the frame edge. Oversize the
image so there is always material to travel into. */
.studio__ph img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover}
.studio__peek{overflow:hidden}
.studio__peek img{position:absolute;left:0;top:0;width:100%;height:100%}
/* The difference blend went muddy over mid-tone photography. Solid light type
on a deeper scrim reads cleanly and still carries the editorial weight. */
.studio__nm{mix-blend-mode:normal;color:var(--light);
text-shadow:0 2px 30px rgba(0,0,0,.55);bottom:-.06em}
.studio__ph::after{background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.30) 68%,rgba(0,0,0,.80));
opacity:1}
.studio__p:hover .studio__ph::after{opacity:.72}
/* ==========================================================================
THE STUDIO — richer treatment (WE-DEV)
Adds: a clip-path reveal on scroll, a ken-burns drift on the portrait,
a duotone wash that clears on hover, an animated rule under each name,
and a soft grain. All motion is disabled under prefers-reduced-motion and
the heavier effects are dropped on touch.
========================================================================== */
/* subtle film grain over the whole band */
.studio::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
mix-blend-mode:overlay}
/* the frame wipes open as it enters */
.studio__ph{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.16,.84,.3,1)}
.studio__p.is-in .studio__ph{clip-path:inset(0 0 0 0)}
/* slow drift, so a still photo never feels static */
@keyframes hakb{from{transform:scale(1)}to{transform:scale(1.06)}}
.studio__p.is-in .studio__ph>img:first-of-type{animation:hakb 14s ease-in-out infinite alternate}
/* cool duotone wash that clears when you engage with the card */
.studio__ph>img:first-of-type{filter:grayscale(1) contrast(1.08) brightness(.92)}
.studio__p:hover .studio__ph>img:first-of-type{filter:grayscale(1) contrast(1.15) brightness(1)}
.studio__peek img{filter:grayscale(.15) contrast(1.05)}
/* name: staggered rise, with a rule that draws under it */
.studio__nm{transition:transform 1s cubic-bezier(.16,.84,.3,1) .25s,opacity .9s ease .25s}
.studio__p--1 .studio__nm{transition-delay:.4s}
.studio__txt h3{position:relative;display:inline-block}
.studio__txt h3::after{content:"";position:absolute;left:0;bottom:-8px;height:2px;width:100%;
background:var(--light);transform:scaleX(0);transform-origin:left;
transition:transform .8s cubic-bezier(.16,.84,.3,1)}
.studio__p.is-in .studio__txt h3::after{transform:scaleX(1)}
/* text rises in behind the image */
.studio__txt{opacity:0;transform:translateY(22px);
transition:opacity .9s ease .35s,transform .9s cubic-bezier(.16,.84,.3,1) .35s}
.studio__p.is-in .studio__txt{opacity:1;transform:none}
/* hover lifts the whole card a touch */
.studio__p{transition:transform .6s cubic-bezier(.16,.84,.3,1)}
@media(hover:hover){.studio__p:hover{transform:translateY(-6px)}}
/* ---- responsive: keep the drama, drop the cost ---- */
@media(max-width:900px){
.studio{padding:clamp(56px,8vh,90px) var(--gx)}
.studio__nm{font-size:clamp(44px,13vw,86px)}
.studio__ph{aspect-ratio:3/4}
}
@media(max-width:560px){
.studio__nm{font-size:clamp(38px,14vw,62px);bottom:-.04em}
.studio__txt{padding-top:20px}
.studio__cta{width:100%;justify-content:center}
}
/* touch devices never hover, so show the finished state and skip the drift */
@media(hover:none){
.studio__p.is-in .studio__ph>img:first-of-type{animation:none}
.studio__ph>img:first-of-type{filter:grayscale(1) contrast(1.12)}
}
@media(prefers-reduced-motion:reduce){
.studio__ph{clip-path:none;transition:none}
.studio__p.is-in .studio__ph>img:first-of-type{animation:none}
.studio__txt,.studio__nm{opacity:1;transform:none;transition:none}
.studio__p.is-in .studio__txt h3::after{transition:none}
}
/* h3 was made inline-block for the underline, which pulled the name up onto
the role label's line. Keep the label on its own row. */
.studio__txt .label{display:block;margin-bottom:6px}
.studio__txt h3{margin-top:0}
/* ==========================================================================
STUDIO — aligned, equal-height cards.
The staggered offset read as broken alignment rather than as editorial
intent, so both cards now share a top edge, a portrait ratio and a baseline.
========================================================================== */
.studio__p--1{margin-top:0}
.studio__grid{align-items:stretch}
.studio__p{display:flex;flex-direction:column;height:100%}
.studio__ph{aspect-ratio:4/5;flex:0 0 auto}
.studio__txt{display:flex;flex-direction:column;flex:1 1 auto;padding-top:24px}
/* push both CTAs onto the same line no matter how long the bio runs */
.studio__cta{margin-top:auto;align-self:flex-start}
.studio__txt p{min-height:0}
/* a hairline between the pair, so the pairing reads as deliberate */
@media(min-width:761px){
.studio__grid{position:relative}
.studio__grid::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;
background:linear-gradient(180deg,transparent,rgba(244,241,236,.18) 18%,rgba(244,241,236,.18) 82%,transparent);
transform:translateX(-50%);pointer-events:none}
}
/* ==========================================================================
THE STUDIO v2 — full-bleed alternating rows (WE-DEV)
Supersedes the .studio card grid above. Each person takes the full width;
the portrait bleeds off the outer edge and the name is set large against it.
========================================================================== */
.stu{background:var(--dark);color:var(--light);position:relative;overflow:hidden;
padding:clamp(64px,10vh,130px) 0 clamp(70px,11vh,150px)}
.stu::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.045;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
mix-blend-mode:overlay}
.stu__intro{width:min(1240px,100% - 2*var(--gx));margin:0 auto clamp(46px,7vh,90px)}
.stu__intro .label{color:var(--light2);display:block;margin-bottom:14px}
.stu__intro h2{font-size:clamp(52px,9vw,150px);line-height:.86;letter-spacing:-.025em;margin:0 0 18px}
.stu__intro p{max-width:52ch;font-size:clamp(16px,1.35vw,21px);line-height:1.6;color:var(--light2)}
.stu__row{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
gap:clamp(24px,4vw,70px);margin-bottom:clamp(56px,9vh,130px);position:relative}
.stu__row:last-child{margin-bottom:0}
.stu__row--r{grid-template-columns:.95fr 1.05fr}
.stu__row--r .stu__media{order:2}
.stu__row--r .stu__body{order:1;padding-left:var(--gx);padding-right:0}
/* the portrait runs off the outer edge of the screen */
.stu__media{position:relative}
.stu__row--l .stu__media{margin-left:calc(-1 * var(--gx))}
.stu__row--r .stu__media{margin-right:calc(-1 * var(--gx))}
.stu__img{position:relative;overflow:hidden;aspect-ratio:16/13;background:#0c1011;
clip-path:inset(0 0 100% 0);transition:clip-path 1.15s cubic-bezier(.16,.84,.3,1)}
.stu__row.is-in .stu__img{clip-path:inset(0 0 0 0)}
.stu__img img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;
filter:grayscale(1) contrast(1.1) brightness(.95);will-change:transform;
transition:filter .8s var(--e),opacity .8s var(--e)}
.stu__peek{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--e)}
.stu__peek img{position:absolute;inset:0;width:100%;height:100%;top:0;filter:grayscale(.2) contrast(1.05)}
.stu__row:hover .stu__img>img:first-of-type{opacity:0}
.stu__row:hover .stu__peek{opacity:1}
.stu__img::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,rgba(0,0,0,.5),transparent 45%)}
.stu__row--r .stu__img::after{background:linear-gradient(270deg,rgba(0,0,0,.5),transparent 45%)}
/* the big name, riding the inner edge of the photo */
.stu__big{position:absolute;bottom:-.1em;z-index:2;pointer-events:none;white-space:nowrap;
font-size:clamp(64px,11vw,190px);line-height:.8;letter-spacing:-.035em;color:var(--light);
text-shadow:0 4px 40px rgba(0,0,0,.6);
opacity:0;transform:translateY(24px);
transition:opacity 1s var(--e) .2s,transform 1.1s cubic-bezier(.16,.84,.3,1) .2s}
.stu__row--l .stu__big{right:-.06em}
.stu__row--r .stu__big{left:-.06em}
.stu__row.is-in .stu__big{opacity:1;transform:none}
.stu__body{padding-right:var(--gx);max-width:56ch;
opacity:0;transform:translateY(26px);
transition:opacity .9s ease .3s,transform .9s cubic-bezier(.16,.84,.3,1) .3s}
.stu__row.is-in .stu__body{opacity:1;transform:none}
.stu__idx{display:block;font-family:var(--mono,var(--body));font-size:12px;letter-spacing:.28em;
color:rgba(244,241,236,.4);margin-bottom:18px}
.stu__role{display:block;color:var(--light2);margin-bottom:10px}
.stu__body h3{font-size:clamp(34px,4.4vw,68px);line-height:.94;margin:0 0 16px;color:var(--light)}
.stu__body p{color:var(--light2);line-height:1.75;font-size:clamp(15px,1.15vw,18px);margin:0 0 26px}
.stu__acts{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.stu__cta{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;
background:var(--light);color:var(--dark);text-decoration:none;
font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
transition:opacity .35s var(--e),transform .35s var(--e)}
.stu__cta i{font-style:normal;transition:transform .35s var(--e)}
.stu__cta:hover{opacity:.88;transform:translateY(-2px)}
.stu__cta:hover i{transform:translateX(5px)}
.stu__alt{color:var(--light2);text-decoration:none;font-size:12px;letter-spacing:.16em;
text-transform:uppercase;border-bottom:1px solid rgba(244,241,236,.3);padding-bottom:3px;
transition:color .3s var(--e),border-color .3s var(--e)}
.stu__alt:hover{color:var(--light);border-color:var(--light)}
/* ---- responsive ---- */
@media(max-width:900px){
.stu__row,.stu__row--r{grid-template-columns:1fr;gap:0;margin-bottom:clamp(48px,7vh,80px)}
.stu__row--r .stu__media{order:1}
.stu__row--r .stu__body{order:2;padding-left:var(--gx)}
.stu__row--l .stu__media,.stu__row--r .stu__media{margin:0}
.stu__img{aspect-ratio:4/3}
.stu__img::after,.stu__row--r .stu__img::after{background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.6))}
.stu__big{font-size:clamp(48px,14vw,96px)}
.stu__row--l .stu__big,.stu__row--r .stu__big{left:var(--gx);right:auto}
.stu__body{padding:26px var(--gx) 0;max-width:none}
}
@media(max-width:560px){
.stu__big{font-size:clamp(40px,15vw,68px)}
.stu__cta{width:100%;justify-content:center}
.stu__acts{gap:12px}
}
@media(hover:none){.stu__row:hover .stu__img>img:first-of-type{opacity:1}.stu__row:hover .stu__peek{opacity:0}}
@media(prefers-reduced-motion:reduce){
.stu__img{clip-path:none;transition:none}
.stu__big,.stu__body{opacity:1;transform:none;transition:none}
}
/* ==========================================================================
PIERCING v2 — placement grid (WE-DEV)
Supersedes the .prc row list above. People choosing a piercing want to see
the placement, so every tile is a photo of that actual piercing.
========================================================================== */
.prc{padding:var(--sec) var(--gx);background:var(--paper)}
.prc__top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,70px);
align-items:end;margin-bottom:clamp(30px,4.5vh,56px)}
.prc__top .label{display:block;color:var(--ink2);margin-bottom:12px}
.prc__top h2{font-size:clamp(48px,8vw,132px);line-height:.88;letter-spacing:-.02em;margin:0}
.prc__lead p{max-width:46ch;font-size:clamp(16px,1.3vw,20px);line-height:1.6;color:var(--ink2);margin:0 0 22px}
.prc__acts{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.prc__cta{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;background:var(--ink);
color:var(--paper);text-decoration:none;font-family:var(--disp);font-weight:700;font-size:12px;
letter-spacing:.16em;text-transform:uppercase;transition:opacity .35s var(--e),transform .35s var(--e)}
.prc__cta i{font-style:normal;transition:transform .35s var(--e)}
.prc__cta:hover{opacity:.88;transform:translateY(-2px)}
.prc__cta:hover i{transform:translateX(5px)}
.prc__alt{color:var(--ink2);text-decoration:none;font-size:12px;letter-spacing:.16em;
text-transform:uppercase;border-bottom:1px solid var(--ink3);padding-bottom:3px;
transition:color .3s var(--e),border-color .3s var(--e)}
.prc__alt:hover{color:var(--ink);border-color:var(--ink)}
@media(max-width:900px){.prc__top{grid-template-columns:1fr;gap:18px}}
.prc__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media(max-width:1100px){.prc__grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:700px){.prc__grid{grid-template-columns:repeat(3,1fr);gap:7px}}
@media(max-width:420px){.prc__grid{grid-template-columns:repeat(2,1fr)}}
.prc__tile{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
background:var(--paper2);text-decoration:none;border:1px solid var(--ink3);
transition:border-color .4s var(--e),transform .5s var(--e)}
.prc__im{position:absolute;inset:0;display:block}
.prc__tile img{width:100%;height:100%;object-fit:cover;display:block;
filter:grayscale(1) contrast(1.06);
transition:transform 1.1s var(--e),filter .6s var(--e)}
.prc__tile::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72));
opacity:.85;transition:opacity .45s var(--e)}
.prc__lab{position:absolute;left:12px;right:12px;bottom:11px;z-index:2;color:#fff;
font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.02em;
font-size:clamp(12px,1.05vw,16px);line-height:1.1;
transition:transform .45s var(--e)}
.prc__tile:hover{border-color:var(--ink);transform:translateY(-3px)}
.prc__tile:hover img{transform:scale(1.08);filter:grayscale(0) contrast(1.02)}
.prc__tile:hover::after{opacity:1}
.prc__tile:hover .prc__lab{transform:translateY(-3px)}
.prc__tile:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media(hover:none){.prc__tile img{filter:grayscale(0)}}
@media(prefers-reduced-motion:reduce){.prc__tile,.prc__tile img,.prc__lab{transition:none}}
/* ==========================================================================
LONG-FORM CONTENT (WE-DEV)
Lead paragraph, contents rail, linked headings, clause and step components.
========================================================================== */
/* lead paragraph */
.prose .lede{font-size:clamp(19px,1.7vw,25px);line-height:1.5;color:var(--ink);
margin:0 0 1.4em;max-width:60ch;font-weight:400}
/* two-column layout when a contents rail is present */
.ha-long{display:grid;grid-template-columns:210px 1fr;gap:clamp(28px,4vw,64px);align-items:start}
.ha-long__body{min-width:0}
@media(max-width:900px){.ha-long{grid-template-columns:1fr;gap:22px}}
.ha-toc{position:sticky;top:calc(var(--nav-h) + 26px);font-size:13px;line-height:1.45}
.ha-toc .label{display:block;color:var(--ink2);margin-bottom:12px}
.ha-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--ink3)}
.ha-toc li{margin:0}
.ha-toc a{display:block;padding:7px 0 7px 14px;margin-left:-1px;color:var(--ink2);
text-decoration:none;border-left:1px solid transparent;transition:color .3s var(--e),border-color .3s var(--e)}
.ha-toc a:hover{color:var(--ink);border-left-color:var(--ink)}
.ha-toc li.lvl3 a{padding-left:24px;font-size:12px}
@media(max-width:900px){
/* Was a horizontal flex wrap: items broke across lines at uneven
baselines and read as a jumble. A short vertical list mirrors the
desktop rail and is far easier to scan on a phone. */
.ha-toc{position:static;border:1px solid var(--ink3);background:var(--paper2);
padding:18px 18px 10px;margin-bottom:26px}
.ha-toc ol{display:block;border-left:1px solid var(--ink3)}
.ha-toc a{padding:9px 0 9px 14px;margin-left:-1px}
.ha-toc li.lvl3 a{padding-left:26px}
}
/* headings that link through to their own page */
.ha-h-link{color:inherit;text-decoration:none;display:inline-flex;align-items:baseline;gap:.3em}
.ha-h-link i{font-style:normal;font-size:.42em;opacity:0;transform:translate(-4px,4px);
transition:opacity .35s var(--e),transform .35s var(--e)}
.ha-h-link:hover{color:var(--ink)}
.ha-h-link:hover i{opacity:.55;transform:none}
/* offset anchors so a jump does not hide the heading behind the fixed nav */
.prose :is(h2,h3,h4)[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}
/* numbered clauses — the Agreement */
.ha-clauses{list-style:none;counter-reset:cl;margin:30px 0 40px;padding:0;
border-top:1px solid var(--ink3)}
.ha-clauses li{counter-increment:cl;display:grid;grid-template-columns:auto 1fr;gap:20px;
padding:22px 0;border-bottom:1px solid var(--ink3);line-height:1.7;color:var(--ink)}
.ha-clauses li::before{content:counter(cl,decimal-leading-zero);font-family:var(--disp);
font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--ink2);padding-top:4px}
@media(max-width:560px){.ha-clauses li{gap:14px;padding:18px 0}}
/* staged timeline — Aftercare */
.ha-stage{list-style:none;margin:30px 0 44px;padding:0;position:relative}
.ha-stage::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:1px;background:var(--ink3)}
.ha-stage li{position:relative;padding:0 0 30px 46px}
.ha-stage li:last-child{padding-bottom:0}
.ha-stage li::before{content:"";position:absolute;left:5px;top:7px;width:13px;height:13px;
border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
.ha-stage b{display:block;font-family:var(--disp);font-weight:700;text-transform:uppercase;
letter-spacing:.02em;font-size:clamp(16px,1.5vw,20px);margin-bottom:6px;color:var(--ink)}
.ha-stage span{display:block;color:var(--ink2);line-height:1.7}
/* pull quote */
.ha-pull{margin:36px 0;padding:0 0 0 26px;border-left:3px solid var(--ink);
font-family:var(--disp);font-weight:700;text-transform:uppercase;
font-size:clamp(22px,2.6vw,38px);line-height:1.08;letter-spacing:-.01em;color:var(--ink)}
/* the converted old content uses for section titles — give them the
weight of a real section heading rather than the smallest step in the scale */
article.wrap.prose h4,.ha-long__body h4{font-family:var(--disp);font-weight:700;
text-transform:uppercase;font-size:clamp(22px,2.4vw,34px);line-height:1.02;
margin:44px 0 12px;letter-spacing:-.01em}
article.wrap.prose h4:first-child,.ha-long__body h4:first-child{margin-top:0}
/* long-form body rhythm: the converted content is paragraph-dense, so give it
real separation rather than the default tight stack */
.ha-long__body p,article.wrap.prose p{margin:0 0 1.25em}
.ha-long__body p:last-child{margin-bottom:0}
.ha-long__body{font-size:clamp(16px,1.15vw,18px);line-height:1.75}
.ha-long__body h4 + p,article.wrap.prose h4 + p{margin-top:0}
/* ==========================================================================
PARKING / GETTING HERE (WE-DEV)
========================================================================== */
.park{margin:clamp(44px,7vh,90px) 0 0;padding-top:clamp(34px,5vh,60px);border-top:1px solid var(--ink3)}
.park__head{margin-bottom:clamp(22px,3vh,38px)}
.park__head .label{display:block;color:var(--ink2);margin-bottom:10px}
.park__head h2{font-size:clamp(30px,4vw,56px);line-height:.98;margin:0}
.park__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:900px){.park__grid{grid-template-columns:1fr;gap:26px}}
.park__note p{color:var(--ink2);line-height:1.7;margin:0 0 14px;max-width:46ch}
.park__warn{color:var(--ink);font-weight:500;border-left:3px solid #b4271f;padding-left:16px}
.park__btn{display:inline-flex;align-items:center;gap:9px;margin-top:8px;padding:14px 24px;
background:var(--ink);color:var(--paper);text-decoration:none;font-family:var(--disp);
font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
transition:opacity .3s var(--e),transform .3s var(--e)}
.park__btn i{font-style:normal;transition:transform .3s var(--e)}
.park__btn:hover{opacity:.88;transform:translateY(-2px)}
.park__btn:hover i{transform:translate(3px,-3px)}
.park__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:620px){.park__steps{grid-template-columns:1fr;gap:16px}}
.park__steps li{margin:0}
.park__im{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;
background:var(--paper2);border:1px solid var(--ink3)}
.park__im img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform 1s var(--e)}
.park__steps li:hover .park__im img{transform:scale(1.05)}
.park__cap{display:block;margin-top:10px;font-size:13px;line-height:1.5;color:var(--ink2)}
.park__cap b{display:block;font-family:var(--disp);font-weight:700;font-size:11px;
letter-spacing:.2em;color:var(--ink);margin-bottom:4px}
.park__todo{border:1px dashed var(--ink3);padding:20px;color:var(--ink2);font-size:14px;margin:0}
/* The booking tabs were a fixed 3-column grid; adding Piercing pushed "Laser
removal" onto a second row. Flex so it adapts to however many tabs exist. */
.ha-bk__tabs{display:flex;flex-wrap:nowrap}
.ha-bk__tab{flex:1 1 0;min-width:0}
.ha-bk__l{overflow-wrap:anywhere}
@media(max-width:900px){
.ha-bk__tabs{flex-wrap:wrap}
.ha-bk__tab{flex:1 1 45%;border-right:1px solid var(--ink3);border-bottom:1px solid var(--ink3)}
.ha-bk__tab:nth-child(2n){border-right:0}
}
@media(max-width:700px){
.ha-bk__tabs{flex-direction:column}
.ha-bk__tab{flex:1 1 auto;border-right:0}
}
/* remaining touch targets on the new sections */
@media(max-width:900px){
.stu__alt,.prc__alt,.ha-toc a,.park__cap a{min-height:44px;display:inline-flex;align-items:center}
.ha-h-link{min-height:44px;align-items:center}
.ha-faq__q{min-height:48px}
}
/* About Us — closing CTA row */
.ha-abt-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:22px}
.ha-abt-cta .btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;
background:var(--ink);color:var(--paper);text-decoration:none;font-family:var(--disp);
font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
transition:opacity .3s var(--e),transform .3s var(--e)}
.ha-abt-cta .btn:hover{opacity:.88;transform:translateY(-2px)}
.ha-abt-tel{font-family:var(--disp);font-weight:700;font-size:clamp(18px,1.8vw,24px);
color:var(--ink);text-decoration:none;border-bottom:2px solid var(--ink3);padding-bottom:2px;
transition:border-color .3s var(--e)}
.ha-abt-tel:hover{border-color:var(--ink)}
@media(max-width:560px){.ha-abt-cta .btn{width:100%;justify-content:center}}
/* an anchored accordion must clear the fixed header when jumped to */
.ha-faq__i[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}
.ha-faq__i:target{background:rgba(0,0,0,.028)}
/* Parking note now sits inside the studio card, directly under the Directions
button. Outside the card it collided with the closing CTA on mobile. */
.map__note{display:block;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--ink3);
font-size:13px;line-height:1.55;color:var(--ink2);max-width:none}
.map__card{padding-bottom:20px}
@media(max-width:560px){
.map__card{margin:-36px auto 0;width:calc(100% - 20px);padding:18px 18px 18px}
.map__note{font-size:12.5px}
}
/* the closing CTA needs clearance from the card that now overlaps the map */
.split + .contact,.map + .contact{margin-top:clamp(20px,4vh,48px)}
/* Parking runs full width below the split, so the route photos are legible */
.park-wrap{padding-bottom:clamp(50px,8vh,100px)}
.park-wrap .park{margin-top:0}
.park-wrap .park__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.park-wrap .park__steps{grid-template-columns:repeat(3,1fr);gap:16px}
.park-wrap .park__im{aspect-ratio:3/4}
.park-wrap .park__cap{font-size:14px}
@media(max-width:900px){
.park-wrap .park__grid{grid-template-columns:1fr}
.park-wrap .park__steps{grid-template-columns:repeat(3,1fr);gap:10px}
.park-wrap .park__cap{font-size:12.5px}
}
@media(max-width:560px){
.park-wrap .park__steps{grid-template-columns:1fr;gap:18px}
.park-wrap .park__im{aspect-ratio:4/3}
}
/* four route photos now — let the grid adapt rather than assume three */
.park-wrap .park__steps{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.park-wrap .park__steps{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(max-width:560px){.park-wrap .park__steps{grid-template-columns:1fr}}
/* ==========================================================================
GALLERY LIGHTBOX (WE-DEV) — replaces the inline-styled masonry-only one
========================================================================== */
.lb{position:fixed;inset:0;z-index:1500;background:rgba(11,11,11,.965);
display:grid;place-items:center;padding:clamp(16px,4vw,48px)}
.lb[hidden]{display:none}
body.lb-open{overflow:hidden}
.lb__fig{margin:0;max-width:min(1100px,100%);max-height:100%;display:flex;
flex-direction:column;gap:16px;align-items:center}
.lb__fig img{max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain;display:block}
.lb__fig figcaption{color:rgba(244,241,236,.9);font-size:clamp(14px,1.3vw,17px);
line-height:1.5;text-align:center;max-width:56ch}
.lb__fig figcaption[hidden]{display:none}
.lb__x{position:absolute;top:12px;right:16px;width:48px;height:48px;background:none;border:0;
color:#fff;font-size:34px;line-height:1;cursor:pointer;opacity:.75;transition:opacity .25s}
.lb__x:hover{opacity:1}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);color:#fff;
font-size:20px;cursor:pointer;transition:background .25s,border-color .25s}
.lb__nav:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5)}
.lb__nav[hidden]{display:none}
.lb__nav--p{left:clamp(8px,2vw,28px)}
.lb__nav--n{right:clamp(8px,2vw,28px)}
.lb__x:focus-visible,.lb__nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:560px){
.lb__nav{width:44px;height:44px;top:auto;bottom:16px;transform:none}
.lb__nav--p{left:16px}.lb__nav--n{right:16px}
.lb__fig img{max-height:62vh}
}
/* the route photos are now clickable */
.park__im{position:relative;display:block;cursor:zoom-in}
.park__zoom{position:absolute;right:8px;bottom:8px;width:28px;height:28px;display:grid;
place-items:center;background:rgba(20,25,26,.62);color:#fff;font-size:15px;
opacity:0;transform:translateY(4px);transition:opacity .3s var(--e),transform .3s var(--e)}
.park__steps li:hover .park__zoom,.park__im:focus-visible .park__zoom{opacity:1;transform:none}
/* Contact: the columns block was sitting straight under the intro copy */
.split .prose .contact-cols{margin-top:clamp(26px,4vh,42px)}
.split .prose .lede + p{margin-bottom:clamp(24px,3.5vh,36px)}
@media(max-width:900px){
.split .prose .contact-cols{margin-top:30px;padding-top:24px;border-top:1px solid var(--ink3)}
.split .prose h3{margin-top:26px}
}
/* The custom cursor sits at z-index 1000 and the lightbox at 1500, so the
cursor vanished behind the overlay. Lift it above, and fall back to the
native pointer inside the lightbox so there is always something visible. */
.cur{z-index:1600}
body.lb-open .lb,body.lb-open .lb *{cursor:auto}
body.lb-open .lb__x,body.lb-open .lb__nav{cursor:pointer}
body.lb-open [data-lb]{cursor:zoom-in}
/* ==========================================================================
BLOG CARDS — equal heights (WE-DEV)
Excerpts vary in length, so cards ended at different depths and the grid
looked ragged. Fixed image ratio + flex + a clamped excerpt evens them up.
========================================================================== */
.posts{align-items:stretch}
.post{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;
transition:transform .5s var(--e)}
.post__img{display:block;position:relative;overflow:hidden;aspect-ratio:4/3;
background:var(--paper2);border:1px solid var(--ink3);margin-bottom:16px}
.post__img img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform 1s var(--e),filter .5s var(--e)}
.post:hover .post__img img{transform:scale(1.05)}
.post .label{display:block;color:var(--ink2);margin-bottom:8px}
.post__h{display:block;font-family:var(--disp);font-weight:700;text-transform:uppercase;
font-size:clamp(21px,2vw,30px);line-height:.98;margin-bottom:10px;
transition:opacity .3s var(--e)}
.post:hover .post__h{opacity:.62}
.post__x{display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;
overflow:hidden;color:var(--ink2);font-size:15px;line-height:1.6;margin-bottom:14px}
/* a read-more marker pinned to the foot of every card, so they end level */
.post::after{content:"Read →";margin-top:auto;font-family:var(--disp);font-weight:700;
font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);
padding-top:4px;transition:color .3s var(--e)}
.post:hover::after{color:var(--ink)}
@media(hover:hover){.post:hover{transform:translateY(-4px)}}
@media(max-width:700px){
.post__x{-webkit-line-clamp:3;line-clamp:3}
.posts{gap:30px}
}
/* ==========================================================================
Piercing age limits (WE-DEV)
========================================================================== */
.ha-ages{border:1px solid var(--ink3);padding:20px 22px;margin:26px 0 34px;
background:rgba(0,0,0,.018)}
.ha-ages .label{display:block;color:var(--ink2);margin-bottom:12px}
.ha-ages ul{list-style:none;margin:0 0 12px;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px 20px}
.ha-ages li{display:flex;align-items:baseline;gap:10px;font-size:15px;color:var(--ink)}
.ha-ages li b{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.06em;
background:var(--ink);color:var(--paper);padding:3px 8px;min-width:38px;text-align:center}
.ha-ages p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink2)}
/* inline badge on a price row */
.ha-age{display:inline-block;margin-left:8px;font-family:var(--disp);font-weight:700;
font-size:10px;letter-spacing:.08em;padding:2px 7px;border:1px solid var(--ink3);
color:var(--ink2);vertical-align:middle;white-space:nowrap}
.prose table tr:hover .ha-age{border-color:var(--ink);color:var(--ink)}
/* note above the age field on the booking form */
.ha-form-note{font-size:13px;line-height:1.55;color:var(--ink2);
border-left:2px solid var(--ink3);padding-left:14px;margin:18px 0}
@media(max-width:560px){.ha-ages ul{grid-template-columns:1fr}}
/* ===== Piercing gallery (Gabi's work) ================================== */
/* Nine 16:9 photos, so the grid is deliberately uniform: 3x3 on desktop,
exactly filled, no orphan row. An earlier version made the first tile a
2x2 feature — the row track was then sized by the spanning item and the
single-span tiles did not stretch to it, leaving large empty gaps beside
them. Equal tiles cannot do that. On narrow screens the first tile spans
both columns so the remaining eight still fill four clean rows. */
.pgal{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:40px 0 8px}
.pgal__i{position:relative;display:block;overflow:hidden;background:var(--paper2);
aspect-ratio:4/5;text-decoration:none;color:#fff}
.pgal__i img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .8s var(--e)}
.pgal__i:hover img,.pgal__i:focus-visible img{transform:scale(1.06)}
.pgal__i::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(to top,rgba(0,0,0,.68) 0%,rgba(0,0,0,.15) 42%,transparent 66%)}
.pgal__c{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px 14px;
font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;line-height:1.35;
text-shadow:0 1px 6px rgba(0,0,0,.55)}
.pgal__z{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;
display:grid;place-items:center;border-radius:50%;font-size:15px;line-height:1;
background:rgba(0,0,0,.45);color:#fff;
opacity:0;transform:scale(.82);transition:opacity .35s var(--e),transform .35s var(--e)}
.pgal__i:hover .pgal__z,.pgal__i:focus-visible .pgal__z{opacity:1;transform:none}
.pgal__i:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(max-width:820px){
.pgal{grid-template-columns:repeat(2,1fr);gap:7px}
.pgal__i:first-child{grid-column:span 2;aspect-ratio:1/1}
/* no hover on touch — show the affordance permanently */
.pgal__z{opacity:1;transform:none;width:32px;height:32px}
}
@media(max-width:430px){
.pgal__c{font-size:10px;letter-spacing:.08em;padding:9px 10px}
.pgal__z{width:30px;height:30px;font-size:13px;top:7px;right:7px}
}
/* ===== "Please read carefully" — studio standards panel ================ */
/* Was three bold all-caps
s. Dark panel against the paper page so it
reads as the guarantee it is. Headings are , not : the content
filter anchors every h2–h4 and would have put three junk entries in the
contents rail. */
.std{display:grid;grid-template-columns:repeat(3,1fr);background:var(--dark);
color:var(--light);margin:36px 0 44px;border-top:3px solid var(--red);
overflow:hidden}
.std__i{padding:clamp(22px,3vw,34px);border-right:1px solid rgba(244,241,236,.14)}
.std__i:last-child{border-right:0}
.std__n{display:block;font-size:11px;letter-spacing:.22em;color:var(--red);
margin-bottom:18px;font-variant-numeric:tabular-nums}
.std__ic{display:block;width:34px;height:34px;margin-bottom:16px;color:var(--light)}
.std__ic svg{width:100%;height:100%;display:block}
.std__h{display:block;font-family:var(--disp);font-weight:700;
font-size:clamp(21px,1.9vw,27px);text-transform:uppercase;line-height:1;
margin-bottom:10px}
.std__p{font-size:14px;line-height:1.6;color:var(--light2)}
@media(max-width:820px){
.std{grid-template-columns:1fr}
.std__i{border-right:0;border-bottom:1px solid rgba(244,241,236,.14);
display:grid;grid-template-columns:34px 1fr;column-gap:16px;align-items:start}
.std__i:last-child{border-bottom:0}
.std__n{grid-column:1/-1;margin-bottom:12px}
.std__ic{margin-bottom:0}
.std__h,.std__p{grid-column:2}
.std__h{margin-bottom:6px}
}
/* ===== Age limits — tiered, dark ====================================== */
/* Deliberately the same visual language as the "please read carefully"
panel: these are the two blocks on the page that carry rules rather than
prices, so they read as a pair. Red is reserved for 18+, so the strictest
tier is what the eye lands on first. Ages are exactly the ones Gabi
supplied — nothing is inferred for placements she has not ruled on. */
.ages{background:var(--dark);color:var(--light);border-top:3px solid var(--red);
padding:clamp(22px,3vw,34px);margin:32px 0 40px}
.ages__lbl{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
color:var(--light2);margin-bottom:clamp(18px,2.4vw,26px)}
.ages__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px)}
.ages__t + .ages__t{border-left:1px solid rgba(244,241,236,.16);
padding-left:clamp(18px,2.4vw,34px)}
.ages__n{display:block;font-family:var(--disp);font-weight:700;line-height:.8;
font-size:clamp(52px,6.4vw,88px);margin-bottom:16px;font-variant-numeric:tabular-nums}
.ages__t--18 .ages__n{color:var(--red)}
.ages__t ul{list-style:none;margin:0;padding:0}
.ages__t li{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
color:var(--light2);padding:5px 0;line-height:1.3;
border-top:1px solid rgba(244,241,236,.1)}
.ages__t li:first-child{border-top:0}
.ages__note{margin:clamp(20px,2.6vw,28px) 0 0;padding-top:18px;
border-top:1px solid rgba(244,241,236,.16);
font-size:13.5px;color:var(--light2);line-height:1.6}
@media(max-width:700px){
.ages__grid{grid-template-columns:1fr;gap:0}
.ages__t{display:grid;grid-template-columns:minmax(72px,auto) 1fr;column-gap:22px;
align-items:center;padding:16px 0}
.ages__t + .ages__t{border-left:0;border-top:1px solid rgba(244,241,236,.16);
padding-left:0}
.ages__n{font-size:clamp(44px,14vw,60px);margin-bottom:0}
.ages__t li{padding:3px 0;border-top:0}
}
/* ===== PMU — permanent makeup ========================================== */
/* Third service, deliberately quieter than tattoo and piercing: warmer
ground, more air, lighter type. It should read as a different discipline
under the same roof, not as a fourth tattoo section. */
.pmu{padding:var(--sec) var(--gx);background:var(--paper2)}
.pmu__top{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;
margin-bottom:clamp(34px,5vh,64px)}
.pmu__top h2{font-size:clamp(48px,8vw,130px);line-height:.92}
.pmu__lead p{max-width:46ch;font-size:clamp(16px,1.3vw,20px);color:var(--ink2);line-height:1.55}
.pmu__acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:24px}
.pmu__cta{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);
font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
font-size:15px;padding:15px 22px;min-height:48px;transition:background .35s var(--e),transform .35s var(--e)}
.pmu__cta i{font-style:normal;transition:transform .35s var(--e)}
.pmu__cta:hover{background:var(--red)}
.pmu__cta:hover i{transform:translateX(5px)}
.pmu__alt{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);
border-bottom:1px solid var(--ink3);padding-bottom:3px;min-height:44px;display:inline-flex;align-items:center}
.pmu__alt:hover{color:var(--ink);border-bottom-color:var(--ink)}
.pmu__body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:stretch}
.pmu__quote{display:flex;flex-direction:column}
.pmu__quote blockquote{margin:0}
.pmu__quote .disp{font-size:clamp(38px,5.2vw,78px);line-height:.95;text-transform:uppercase;
font-weight:700;margin:0 0 22px}
.pmu__note{max-width:44ch;color:var(--ink2);line-height:1.7;font-size:clamp(15px,1.15vw,17px);margin:0}
.pmu__cmp figcaption{margin-top:12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink2)}
.pmu__cmp{margin:0}
/* --- before/after wipe -------------------------------------------------- */
/* --p is the reveal position. Set on :root of the widget so both the clipped
image and the handle read the same value; JS only ever writes this one
custom property. clip-path (not a width-clipping wrapper) so the overlay
image is never squashed. */
.cmp{position:relative;--p:50%;aspect-ratio:4/5;overflow:hidden;background:var(--paper3);
touch-action:pan-y}
.cmp__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cmp__img--b{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.cmp__line{position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:var(--paper);
transform:translateX(-1px);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.cmp__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:46px;height:46px;border-radius:50%;background:var(--paper);color:var(--ink);
display:grid;place-items:center;font-size:17px;line-height:1;
box-shadow:0 6px 20px -6px rgba(0,0,0,.45)}
.cmp__tag{position:absolute;bottom:14px;z-index:3;pointer-events:none;
font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fff;
background:rgba(0,0,0,.5);padding:6px 10px}
.cmp__tag--b{left:14px}
.cmp__tag--a{right:14px}
/* The range is the control surface: invisible, full-bleed, so a drag anywhere
works and arrow keys work. Never display:none — that removes keyboard access. */
.cmp__range{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;
opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent;z-index:4}
.cmp__range::-webkit-slider-thumb{-webkit-appearance:none;width:52px;height:100%;cursor:ew-resize}
.cmp__range::-moz-range-thumb{width:52px;height:100%;border:0;background:transparent;cursor:ew-resize}
.cmp__range:focus-visible{outline:none}
.cmp__range:focus-visible ~ .cmp__line .cmp__grip{outline:3px solid var(--red);outline-offset:3px}
@media(max-width:900px){
.pmu__top{grid-template-columns:1fr;gap:16px}
.pmu__body{grid-template-columns:1fr;gap:30px}
/* quote reads better under the image on a phone */
.pmu__cmp{order:-1}
.cmp{aspect-ratio:1/1}
.cmp__grip{width:42px;height:42px}
}
@media(max-width:430px){
.cmp{aspect-ratio:4/5}
.cmp__tag{font-size:10px;padding:5px 8px;bottom:10px}
.cmp__tag--b{left:10px} .cmp__tag--a{right:10px}
}
@media(prefers-reduced-motion:reduce){
.pmu__cta,.pmu__cta i{transition:none}
}
/* --- PMU page: pull line + accreditation block -------------------------- */
/* Set apart deliberately: rules above and below plus real breathing room, so
it reads as Kamila signing off rather than as a heading for the gallery
that follows. */
.pmu__tag{margin:clamp(34px,5vw,58px) 0;padding:clamp(26px,3.4vw,40px) 0;
border-top:1px solid var(--ink3);border-bottom:1px solid var(--ink3);text-align:center}
.pmu__tag strong{display:block;font-family:var(--disp);font-weight:700;text-transform:uppercase;
font-size:clamp(30px,4.6vw,66px);line-height:.95;letter-spacing:.01em;color:var(--ink)}
.pmu__tag strong::after{content:"";display:block;width:52px;height:3px;background:var(--red);
margin:18px auto 0}
/* The image keeps its own aspect ratio — object-fit:cover with a fixed height
was cropping both faces out of a photo whose whole point is the two people
and the certificate. */
.pmu__cert{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:clamp(20px,3vw,40px);
align-items:center;background:var(--paper2);padding:clamp(18px,2.4vw,30px);margin:26px 0 34px}
.pmu__cert__im{display:block;margin:0}
.pmu__cert__im img{width:100%;height:auto;display:block}
.pmu__cert__t p{margin:0 0 1em}
.pmu__cert__t p:last-child{margin-bottom:0}
@media(max-width:760px){
.pmu__cert{grid-template-columns:1fr;gap:18px}
.pmu__cert__im img{max-width:420px;margin:0 auto}
}
/* --- PMU home: thumbnail strip that fills the text column --------------- */
/* flex:1 — the strip absorbs whatever height is left in the column instead of
being pinned to the bottom, which only moved the empty space into the
middle. The tiles have no fixed ratio: they take the leftover height and
object-fit crops to it, so the column is full whatever the slider's height. */
.pmu__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
margin:clamp(24px,3vw,34px) 0 16px;flex:1 1 auto;min-height:170px}
.pmu__thumb{display:block;overflow:hidden;background:var(--paper3);height:100%;min-height:0}
.pmu__thumb img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .7s var(--e)}
.pmu__thumb:hover img{transform:scale(1.06)}
.pmu__more{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;min-height:44px;
font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);
border-bottom:1px solid var(--ink3);padding-bottom:2px}
.pmu__more i{font-style:normal;transition:transform .35s var(--e)}
.pmu__more:hover{color:var(--ink);border-bottom-color:var(--ink)}
.pmu__more:hover i{transform:translateX(4px)}
@media(max-width:900px){
/* the strip duplicates the gallery on the PMU page and costs height on a
phone, where the section already sits a long way from the next one */
.pmu__thumbs,.pmu__more{display:none}
/* The next section brings its own generous top padding; without trimming
this one the two sections read as unrelated. */
.pmu{padding-bottom:clamp(14px,2vh,24px)}
.pmu__quote{display:block}
}
/* --- PMU closing strip: hard edge between .pmu and .proof --------------- */
/* Both sections sit on --paper2, so without this they merge into one block.
Reuses the header ticker's marquee language so it reads as part of the
site rather than a bolted-on divider. */
.pmu__strip{overflow:hidden;background:var(--dark);border-top:3px solid var(--red)}
.pmu__strip__row{display:flex;width:max-content;animation:tk 38s linear infinite}
.pmu__strip__row span{font-family:var(--disp);font-weight:700;
font-size:clamp(20px,2.6vw,38px);text-transform:uppercase;color:var(--light);
padding:14px 28px 14px 0;white-space:nowrap;display:inline-flex;align-items:center;gap:28px}
.pmu__strip__row span::after{content:"";width:8px;height:8px;border-radius:50%;
background:var(--red);flex:none}
.pmu__strip__row span:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--light)}
@media(prefers-reduced-motion:reduce){.pmu__strip__row{animation:none}}
/* ===== Blog article: two-column layout with a sidebar ================== */
/* The article keeps its own .wrap.prose rules — eleven selectors and page.php
depend on that combination, so nothing there is touched. This wrapper only
overrides the width and the auto margins for articles that sit inside it. */
.postl{width:min(1120px,100% - 2*var(--gx));margin-inline:auto;
display:grid;grid-template-columns:minmax(0,1fr) 320px;
gap:clamp(30px,4vw,64px);align-items:start;
/* the article used to inherit spacing below the hero through margin
collapsing; a grid container stops that, so set it explicitly */
padding-top:clamp(64px,10vh,132px)}
.postl > article.wrap.prose{width:100%;margin-inline:0;min-width:0}
/* A long article already carries the contents rail on its left. Inside a
narrower main column a 210px rail plus prose is too tight, so here it falls
back to the compact boxed form it uses on phones. */
.postl .ha-long{grid-template-columns:1fr;gap:20px}
.postl .ha-toc{position:static;border:1px solid var(--ink3);background:var(--paper2);
padding:16px 18px 8px;margin-bottom:22px}
/* two columns: a 13-item list down one side of a 742px box wasted the width
and made the block needlessly tall */
.postl .ha-toc ol{border-left:0;display:grid;grid-template-columns:1fr 1fr;column-gap:30px}
@media(max-width:620px){.postl .ha-toc ol{grid-template-columns:1fr}}
.paside{position:sticky;top:calc(var(--nav-h) + 22px);display:flex;flex-direction:column;gap:34px;
padding-bottom:clamp(60px,9vh,120px)}
.paside__t{font-family:var(--disp);font-weight:700;text-transform:uppercase;
font-size:20px;line-height:1;margin:0 0 16px;letter-spacing:.01em}
/* book card */
.paside__cta{display:block;position:relative;background:var(--dark);color:var(--light);
border-top:3px solid var(--red);padding:24px 22px 26px;overflow:hidden;
transition:background .4s var(--e)}
.paside__cta:hover{background:#161616}
.paside__cta__k{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
color:var(--light2);margin-bottom:12px}
.paside__cta__h{display:block;font-weight:700;text-transform:uppercase;
font-size:clamp(26px,2.3vw,32px);line-height:.95}
.paside__cta__a{position:absolute;right:20px;bottom:20px;font-size:20px;line-height:1;
transition:transform .4s var(--e)}
.paside__cta:hover .paside__cta__a{transform:translateX(5px)}
/* style tiles */
.paside__styles{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.paside__style{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
background:var(--paper3)}
.paside__style img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .7s var(--e)}
.paside__style:hover img{transform:scale(1.07)}
.paside__style::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.1) 55%,transparent 75%)}
.paside__style span{position:absolute;left:9px;right:9px;bottom:8px;z-index:2;color:#fff;
font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:13px;
line-height:1.05;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.paside__more{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin-top:12px;
font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);
border-bottom:1px solid var(--ink3);padding-bottom:2px}
.paside__more i{font-style:normal;transition:transform .35s var(--e)}
.paside__more:hover{color:var(--ink);border-bottom-color:var(--ink)}
.paside__more:hover i{transform:translateX(4px)}
/* more reading */
.paside__posts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.paside__posts a{display:grid;grid-template-columns:62px 1fr;gap:14px;align-items:center;
padding:8px 0;min-height:44px}
.paside__pim{display:block;width:62px;height:62px;overflow:hidden;background:var(--paper3)}
.paside__pim img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .7s var(--e)}
.paside__posts a:hover .paside__pim img{transform:scale(1.08)}
.paside__pt{font-family:var(--disp);font-weight:700;text-transform:uppercase;
font-size:16px;line-height:1.08;color:var(--ink);transition:color .3s}
.paside__posts a:hover .paside__pt{color:var(--red)}
@media(max-width:1040px){
/* below this the two columns squeeze the prose, so the sidebar drops under
the article and stops being sticky */
.postl{grid-template-columns:1fr;gap:0}
.paside{position:static;top:auto;gap:30px;padding-top:8px;
border-top:1px solid var(--ink3);margin-top:10px;padding-top:34px}
.paside__styles{grid-template-columns:repeat(3,1fr)}
.paside__posts{gap:2px}
}
@media(max-width:560px){
.paside__styles{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
.paside__style img,.paside__pim img,.paside__cta__a{transition:none}
}
/* ===== Hero: studio mark + BOOK button (client request, Sept 2026) ===== */
/* .hero__title is a two-column grid (headline | aside). The mark is a third
child, so it must span the full row or it would land in column one and push
the headline across. */
.hero__mark{display:block;margin-bottom:clamp(10px,1.6vh,18px);
font-family:"Orbitron",var(--body);font-weight:500;
font-size:clamp(11px,.95vw,14px);letter-spacing:.2em;
color:var(--red);text-shadow:0 1px 12px rgba(0,0,0,.65)}
/* "a visible button in red" on the main page */
/* The aside is a flex column so the button sits on its own line: as plain
inline content it ran on after the last words of the paragraph. */
.hero__aside{display:flex;flex-direction:column;align-items:flex-end}
.hero__book{display:inline-flex;align-items:center;gap:10px;margin-top:20px;
background:var(--red);color:#fff;
font-family:var(--disp);font-weight:700;text-transform:uppercase;
font-size:16px;letter-spacing:.08em;line-height:1;
padding:15px 26px;min-height:48px;
transition:background .35s var(--e),transform .35s var(--e)}
.hero__book i{font-style:normal;transition:transform .35s var(--e)}
.hero__book:hover{background:#ff4a35}
.hero__book:hover i{transform:translateX(4px)}
.hero__book:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:900px){
.hero__mark{letter-spacing:.16em}
.hero__aside{align-items:flex-start}
.hero__book{margin-top:16px;font-size:15px;padding:14px 22px}
}
@media(prefers-reduced-motion:reduce){.hero__book,.hero__book i{transition:none}}
/* ===== Resident & guest artists (client request, Sept 2026) ===== */
/* One ha_artist page for several people (single-ha_artist.php, _ha_group).
Five portraits: one row of five on desktop; below 900px the cover portrait
spans both columns and the other four sit 2x2, so no row is ever left with
a lone tile. Every tile is the same aspect, so rows cannot mis-size. */
.crew{padding:clamp(28px,5vh,64px) 0 var(--sec)}
.crew__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
gap:10px 30px;margin-bottom:clamp(22px,3.5vh,40px);padding-top:22px;border-top:1px solid var(--ink4)}
.crew__head h2{font-size:clamp(36px,5vw,76px);line-height:.92;margin:0}
.crew__names{margin:0;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink2)}
.crew__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1vw,14px)}
.crew__i{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;background:var(--paper2)}
.crew__i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;
filter:grayscale(1) contrast(1.04);transition:transform 1.1s var(--e),filter .6s var(--e)}
.crew__i:hover img,.crew__i:focus-visible img{transform:scale(1.05);filter:grayscale(1) contrast(1.12)}
.crew__i::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.62))}
.crew__n{position:absolute;left:14px;bottom:10px;z-index:2;color:#fff;
font-size:clamp(22px,2.2vw,34px);line-height:1;text-transform:uppercase}
.crew__i:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(max-width:900px){
.crew__grid{grid-template-columns:repeat(2,1fr)}
.crew__i:first-child{grid-column:1/-1;aspect-ratio:1/1}
}
@media(prefers-reduced-motion:reduce){.crew__i img{transition:none}}
/* Home studio row for the group: "Guest Artists" is too long for one line
at the person-name size and would be clipped by .stu's overflow. */
.stu__row--group .stu__big{white-space:normal;font-size:clamp(48px,8vw,140px);line-height:.84}
@media(max-width:900px){.stu__row--group .stu__big{font-size:clamp(40px,11vw,80px)}}
/* ===== Cookie consent + click-to-load embeds (UK GDPR / PECR, Sept 2026) ===== */
/* inc/consent.php. Accept and Reject are the same size, weight and colour on
purpose — the ICO treats a louder "Accept" as nudging, not consent. */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ckb{position:fixed;left:20px;bottom:20px;z-index:1550;width:min(360px,calc(100vw - 40px));
background:rgba(11,11,11,.94);color:var(--light);border:1px solid rgba(244,241,236,.12);
box-shadow:0 10px 36px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* z-index 1550: above the nav and page, below the custom cursor (1600). */
.ckb[hidden]{display:none}
.ckb__in{padding:16px 18px 14px}
.ckb__h{font-family:var(--disp);font-size:15px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 4px;color:var(--light)}
.ckb__txt p{margin:0;font-size:12.5px;line-height:1.55;color:var(--light2)}
.ckb__txt a{color:var(--light);text-decoration:underline;text-underline-offset:2px}
.ckb__prefs{margin:12px 0 0}
.ckb__prefs fieldset{border:0;margin:0;padding:0;display:grid;gap:8px}
.ckb__opt{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--light2);cursor:pointer}
.ckb__opt strong{color:var(--light)}
.ckb__opt input{width:18px;height:18px;margin:0;accent-color:var(--red);flex:none}
.ckb__btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.ckb__b{flex:1 1 0;min-height:38px;padding:0 12px;border:1px solid var(--light);background:var(--light);color:var(--dark);
font:600 11.5px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:opacity .25s}
.ckb__b:hover{opacity:.86}
/* "Choose" is secondary: a text link, so Accept and Reject are the equal pair. */
.ckb__b--ghost{flex:0 0 100%;min-height:28px;border:0;background:none;color:var(--light2);
font-weight:500;letter-spacing:.06em;text-decoration:underline;text-underline-offset:3px;text-align:left;padding:0}
.ckb__b--ghost:hover{color:var(--light);opacity:1}
.ckb__b:focus-visible,.ckb__opt input:focus-visible{outline:2px solid var(--red);outline-offset:3px}
@media(max-width:560px){
.ckb{left:10px;right:10px;bottom:10px;width:auto}
.ckb__b{min-height:44px}
.ckb__b--ghost{min-height:36px}
}
.foot__ck{background:none;border:0;padding:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.foot__ck:hover{color:var(--paper)}
.ha-embed{position:relative;aspect-ratio:16/9;background:#0c1011;color:var(--light);display:grid;place-items:center;margin:28px 0;overflow:hidden}
.ha-embed--map{aspect-ratio:auto;height:100%;min-height:320px;margin:0}
.ha-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ha-embed__msg{text-align:center;padding:24px;max-width:44ch}
.ha-embed__msg p{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--light2)}
.ha-embed__go{min-height:48px;padding:0 26px;border:0;background:var(--red);color:#fff;font:600 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.ha-embed__go:focus-visible{outline:2px solid #fff;outline-offset:3px}
.form-privacy p{margin:14px 0 0;font-size:12.5px;line-height:1.5;opacity:.75}
.form-privacy a{text-decoration:underline;text-underline-offset:2px}
/* Legal pages: the cookie-settings button sits inside prose. */
.prose .btn[data-cookie-settings]{cursor:pointer}
/* Map poster: a local OpenStreetMap picture shows at once (no cookies); the
button loads the live Google map on top. */
.ha-embed.has-poster{background-size:cover;background-position:center;align-items:end}
.ha-embed.has-poster .ha-embed__msg{margin:0 0 22px;padding:14px 16px;max-width:none;
background:rgba(11,11,11,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ha-embed.has-poster .ha-embed__msg p{margin-top:8px;font-size:12px}
.map__frame .ha-embed.has-poster{align-items:start}
.map__frame .ha-embed.has-poster .ha-embed__msg{margin:18px 0 0}
/* Contact + About heroes use the portrait shopfront photo: centre the wide
desktop band on the sign and doors; phones show almost the whole front. */
.page-id-1006 .phero__media img,.page-id-368 .phero__media img{object-position:50% 38%}
@media(max-width:900px){.page-id-1006 .phero__media img,.page-id-368 .phero__media img{object-position:50% 40%}}
/* ===== Accessibility fixes from the axe-core WCAG 2.2 AA audit (23 Sep 2026) ===== */
/* Closed mobile menu was only clipped, so its links stayed in the tab order
and screen readers could reach them. visibility:hidden takes it out of
both; the delay keeps the closing animation. */
.mmenu{visibility:hidden;transition:clip-path .7s var(--e),visibility 0s linear .7s}
body.menu-open .mmenu{visibility:visible;transition:clip-path .7s var(--e),visibility 0s}
/* Manifesto words before the scroll lights them: 3.6:1, still clearly "unlit". */
.mani__text .w{color:rgba(17,17,17,.5)}
/* Footer small links and booking tab numbers carried an extra opacity on top
of an already-muted colour (3.3:1 and 2.3:1). */
.foot__list--small{opacity:1}
.foot__list--small a{color:rgba(244,241,236,.78)}
.ha-bk__n{opacity:1}
/* White text on the brand red was 4.26:1. Text buttons use a deeper red (5.25:1);
the brand red stays for everything without text on it. */
.hero__book,.ha-embed__go{background:#cf2a17}
.hero__book:hover,.ha-embed__go:hover{background:#b3230f}
/* Shop card buttons: at least 44px to tap. */
ul.products a.button,ul.products .add_to_cart_button{min-height:44px;display:inline-flex;align-items:center}
.nav__book:hover,.nav__book:focus-visible{background:#cf2a17;border-color:#cf2a17}
/* OpenStreetMap credit (required by its licence) as real text, so a cropped
poster can never cut it off; it sits over the one baked into the image. */
.ha-embed.has-poster::after{content:"© OpenStreetMap contributors";position:absolute;right:0;bottom:0;padding:3px 8px;
background:#fff;color:#3c3c3c;font:500 11px/1.4 var(--body);letter-spacing:0}
.ha-embed.is-loaded::after{display:none}
/* Gallery captions are always visible on touch screens: give them a dark
backing so white text reads on any photo (was text-shadow only). */
@media(hover:none),(max-width:900px){
.gal__t{left:0;right:0;bottom:0;padding:34px 16px 14px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.78))}
}
.proof__by{color:rgba(17,17,17,.72)}