/* Look CC "Mosaic": a nail-art studio. Kumbh Sans (light headlines, one lighter word) + Reddit Sans.
   The work is the idea: the first screen is a mosaic of nail-art close-ups set edge to edge with thin grout lines, the
   headline on one plate in the middle; the header is two tiles of that mosaic; the tiles come back as the wall (the
   gallery), beside the art levels and the artists, and as the closing strip. Small caption plates sit on the photos.
   Every class starts with cc-. Mobile first: 760 and 1080 px steps. */
@font-face{font-family:"Kumbh CC";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/kumbh-sans-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Kumbh CC";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/kumbh-sans-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Reddit CC";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/reddit-sans-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Reddit CC";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/reddit-sans-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* tokens (palette porcelain; design.ts lists every palette and checks each text pair). --fh/--fhw = headline face
   and weight, --fiw = weight of the one lighter word, --ft2 = text face. --grout = the line between tiles. */
:root{--bg:#e8dedb;--bg2:#ddd0cc;--ink:#21171a;--mute:#5a494c;--line:#c3b1ac;--acc:#842c3b;--btn:#7a2535;--onbtn:#ffffff;
  --plate:#f5efed;--onplate:#21171a;--onplate2:#5a494c;--deep:#291a1e;--ondeep:#f3e9e7;--ondeep2:#ccb7b8;--glow:#e9a7b2;
  --fh:"Kumbh CC",system-ui,sans-serif;--fhw:300;--fiw:200;--ft2:"Reddit CC",system-ui,sans-serif;
  --pad:clamp(16px,3.4vw,48px);--max:1440px;--r:calc(3px*var(--tune-radius,1));--grout:4px;--hh:max(620px,100svh);
  --m-accent:var(--btn);
  --g-max:1360px;--g-pad:var(--pad);--g-bg:var(--bg);--g-paper:var(--bg);--g-surface:var(--bg2);--g-ink:var(--ink);--g-muted:var(--mute);
  --g-line:var(--line);--g-accent:var(--acc);--g-radius:0px;--g-fd:var(--fh);--g-ft:var(--ft2)}
.f-firm{--fhw:500;--fiw:300}
@media (min-width:1080px){:root{--grout:5px;--hh:clamp(640px,100svh,1120px)}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.cc-x{margin:0;background:var(--bg);color:var(--ink);font:400 calc(17px*var(--tune-size,1))/1.6 var(--ft2);overflow-x:clip}
.cc-x img{display:block;max-width:100%}
:where(.cc-x) a{color:inherit}
.cc-x :is(h1,h2,h3,h4,summary,p,li,dd,dt,figcaption){overflow-wrap:break-word;hyphens:auto}
.cc-x :is(h1,h2,h3,h4,summary,b){overflow-wrap:anywhere}
.cc-x h1,.cc-x h2,.cc-x h3,.cc-x h4{font-family:var(--fh);font-weight:var(--fhw);margin:0;text-wrap:balance}
.cc-x h2{font-size:calc(clamp(36px,4.4vw,64px)*var(--tune-size,1));line-height:1.02;letter-spacing:-.02em}
.cc-x em{font-style:normal;font-weight:var(--fiw)}
.cc-x p{margin:0}
.cc-x figure{margin:0}
.cc-w{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.cc-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cc-nw{white-space:nowrap}
.cc-k{font:600 calc(15px*var(--tune-size,1))/1.4 var(--ft2);letter-spacing:.01em;color:var(--mute);margin:0}
.cc-x h2.cc-k,.cc-x h3.cc-k{font:600 calc(15px*var(--tune-size,1))/1.4 var(--ft2);letter-spacing:.01em}
.cc-skip{position:absolute;left:12px;top:-60px;z-index:80;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:var(--r)}
.cc-skip:focus{top:12px}
.cc-x :focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* buttons: one filled pill */
.cc-btn,.cc-book{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border-radius:var(--r);
  font:600 16px/1 var(--ft2);text-decoration:none;white-space:nowrap;background:var(--btn);color:var(--onbtn);border:0;cursor:pointer}
.cc-x .cc-btn,.cc-x .cc-book{color:var(--onbtn)}
.cc-book{min-height:44px;padding:0 22px;font-size:calc(15px*var(--tune-size,1))}
.cc-call{font:500 clamp(18px,1.5vw,21px)/1.2 var(--ft2);font-variant-numeric:tabular-nums;text-decoration:none;white-space:nowrap}
.cc-call:hover{text-decoration:underline;text-underline-offset:.2em}
@media (hover:hover){.cc-btn:hover,.cc-book:hover{filter:brightness(1.1)}}

/* ── the hero grid: one template per hero and width, shared by the hero and the home page's header tiles ─────── */
/* phones and tablets: the plate's row takes the height of its words (auto), the tile rows share the rest. From 1080px
   every row is a fraction. The header laid over the hero is only the first row (--r1, --ga1: same columns, same
   height as the hero's first row), so it reads as a header, not a screen-high box. */
.cc-hk-mosaic,.cc-hk-grid{--gc:repeat(3,1fr);--gr:64px minmax(0,1fr) auto minmax(0,1fr);--r1:64px;--ga1:"n n x"}
.cc-hk-mosaic{--ga:"n n x" "t1 t1 t2" "p p p" "t3 t4 t4"}
.cc-hk-grid{--ga:"n n x" "t1 t2 t3" "p p p" "t4 t5 t6"}
@media (min-width:760px){
  .cc-hk-mosaic,.cc-hk-grid{--r1:112px}
  .cc-hk-mosaic{--ga1:"n t1 t1 x";--gc:repeat(4,1fr);--gr:112px minmax(0,1fr) auto minmax(0,1fr) minmax(0,1fr);--ga:"n t1 t1 x" "t2 t2 t3 t3" "p p p p" "t4 t5 t5 t6" "t7 t7 t8 t8"}
  .cc-hk-grid{--ga1:"n t1 t2 x";--gc:repeat(4,1fr);--gr:112px minmax(0,1fr) auto minmax(0,1fr);--ga:"n t1 t2 x" "t3 t4 t5 t6" "p p p p" "t7 t8 t9 t10"}
}
@media (min-width:1080px){
  .cc-hk-mosaic{--r1:calc((var(--hh) - 3*var(--grout))/4.9);--ga1:"n n t1 t2 t2 t3 x x";--gc:repeat(8,1fr);--gr:minmax(0,1fr) minmax(0,1.45fr) minmax(0,1.45fr) minmax(0,1fr);--ga:"n n t1 t2 t2 t3 x x" "t4 t4 p p p p t5 t5" "t4 t4 p p p p t5 t5" "t6 t7 t7 t8 t8 t9 t9 t10"}
  .cc-hk-grid{--r1:calc((var(--hh) - 2*var(--grout))/3.8);--ga1:"n t1 t2 t3 t4 x";--gc:repeat(6,1fr);--gr:minmax(0,1fr) minmax(0,1.8fr) minmax(0,1fr);--ga:"n t1 t2 t3 t4 x" "t5 p p p p t6" "t7 t7 t8 t9 t10 t10"}
}
.cc-hero{position:relative;background:var(--deep)}   /* the grout between the tiles: the deep colour, like dark grout in a real mosaic */
.cc-grid,.cc-top-over{display:grid;grid-template-columns:var(--gc);grid-template-rows:var(--gr);grid-template-areas:var(--ga);gap:var(--grout);height:var(--hh)}
.cc-t{display:none;position:relative;overflow:hidden;background:var(--bg2)}
.cc-t img{width:100%;height:100%;object-fit:cover}
.cc-t1{grid-area:t1}.cc-t2{grid-area:t2}.cc-t3{grid-area:t3}.cc-t4{grid-area:t4}.cc-t5{grid-area:t5}
.cc-t6{grid-area:t6}.cc-t7{grid-area:t7}.cc-t8{grid-area:t8}.cc-t9{grid-area:t9}.cc-t10{grid-area:t10}
.cc-hk-mosaic :is(.cc-t1,.cc-t2,.cc-t3,.cc-t4),.cc-hk-grid :is(.cc-t1,.cc-t2,.cc-t3,.cc-t4,.cc-t5,.cc-t6){display:block}
@media (min-width:760px){.cc-hk-mosaic :is(.cc-t5,.cc-t6,.cc-t7,.cc-t8),.cc-hk-grid :is(.cc-t7,.cc-t8,.cc-t9,.cc-t10){display:block}}
@media (min-width:1080px){.cc-x :is(.cc-t9,.cc-t10){display:block}}

/* the plate: the one solid tile in the middle, words dead centre */
.cc-plate{grid-area:p;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;
  background:var(--plate);color:var(--onplate);padding:36px 20px;min-width:0}
.cc-kicker{font:500 calc(15px*var(--tune-size,1))/1.4 var(--ft2);letter-spacing:.02em;color:var(--onplate2)}
.cc-h1{font-size:calc(clamp(44px,6.9vw,104px)*var(--tune-size,1));line-height:.98;letter-spacing:-.025em;max-width:11ch}
.cc-hk-grid .cc-h1{max-width:14ch}
.cc-l{white-space:normal}
.cc-lede{font-size:calc(clamp(17px,1.35vw,20px)*var(--tune-size,1));line-height:1.5;color:var(--onplate2);max-width:34ch}
.cc-acts{margin-top:6px}
@media (min-width:760px){.cc-plate{gap:18px;padding:calc(44px*var(--tune-space,1)) 32px}}

/* opening hours as a week: each open stretch is one solid tile on a grout line */
.wk{display:grid;grid-template-columns:2.6em minmax(0,1fr) auto;column-gap:16px;margin-top:6px}
.wk ol{grid-column:1/-1;display:grid;grid-template-columns:subgrid;list-style:none;margin:0;padding:0}
.wk li{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;padding:9px 0;border-top:1px solid var(--line);font:500 calc(14px*var(--tune-size,1))/1.3 var(--ft2)}
.wk-bar{position:relative;height:12px;background:var(--bg2)}
.wk-bar i{position:absolute;top:0;bottom:0;background:var(--acc)}
.wk-t{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.wk li.off{color:var(--mute)}
.wk-scale{grid-column:2;display:flex;justify-content:space-between;margin:6px 0 0;font:500 calc(12px*var(--tune-size,1))/1 var(--ft2);color:var(--mute);font-variant-numeric:tabular-nums}

/* ── header: two tiles ────────────────────────────────────────────────────────────────────────────────────────── */
.cc-top{position:relative;z-index:30;display:flex;justify-content:space-between;gap:var(--grout);height:64px;background:var(--bg)}
.cc-top.cc-top-over{position:absolute;inset:0 0 auto;display:grid;grid-template-rows:var(--r1);grid-template-areas:var(--ga1);height:var(--r1);pointer-events:none;background:none;justify-content:initial}
.cc-tile{background:var(--plate);color:var(--onplate);pointer-events:auto;min-width:0}
.cc-name{grid-area:n;display:flex;align-items:center;padding:0 18px;text-decoration:none;flex:0 1 auto}
.cc-name-t{font:500 calc(clamp(20px,1.7vw,26px)*var(--tune-size,1))/1.05 var(--fh);letter-spacing:-.01em}
.cc-name img{max-height:40px;width:auto}
.cc-idx{grid-area:x;position:relative;display:flex;align-items:stretch;justify-content:center;flex:0 0 auto}
.cc-idx-n,.cc-idx-f{display:none}
.cc-menu{display:flex;align-items:stretch}
.cc-menu summary{display:flex;align-items:center;justify-content:center;min-width:96px;padding:0 18px;font:600 calc(16px*var(--tune-size,1))/1 var(--ft2);cursor:pointer;list-style:none}
.cc-menu summary::-webkit-details-marker{display:none}
.cc-menu-c,.cc-menu[open] .cc-menu-o{display:none}
.cc-menu[open] .cc-menu-c{display:inline}
.cc-menu[open] summary{position:fixed;top:0;right:0;z-index:62;height:64px;background:var(--plate);color:var(--onplate)}
.cc-sheet{position:fixed;inset:0;z-index:60;background:var(--deep);color:var(--ondeep);overflow-y:auto}
.cc-sheet-in{min-height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:calc(96px*var(--tune-space,1)) var(--pad) calc(40px*var(--tune-space,1))}
.cc-sheet-l{list-style:none;margin:0;padding:0}
.cc-sheet-l a{display:block;padding:10px 0;font:300 calc(clamp(34px,7vw,56px)*var(--tune-size,1))/1.1 var(--fh);letter-spacing:-.02em;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--ondeep) 18%,transparent)}
.cc-sheet-l a[aria-current]{color:var(--glow)}
.cc-sheet-s{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.cc-sheet-p{font:500 calc(20px*var(--tune-size,1))/1 var(--ft2);text-decoration:none}
.cc-sheet .langs{font-size:calc(16px*var(--tune-size,1))}
@media (min-width:760px){
  .cc-top:not(.cc-top-over){height:88px}
  .cc-name{padding:0 24px}
}
@media (min-width:1080px){
  .cc-top-over .cc-name{align-items:flex-start;padding:22px 22px}
  .cc-menu{display:none}
  .cc-idx{flex-direction:column;justify-content:space-between;align-items:stretch;padding:20px 22px}
  .cc-idx-n,.cc-idx-f{display:flex}
  .cc-idx-n ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
  .cc-idx-n a{font:500 calc(16px*var(--tune-size,1))/1.7 var(--ft2);text-decoration:none}
  .cc-idx-n a:hover,.cc-idx-n a[aria-current]{text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
  .cc-idx-f{flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:12px 22px}
  .cc-idx-l .langs{font-size:calc(15px*var(--tune-size,1))}
  /* inner pages: the index tile lies flat, links in a row */
  .cc-top:not(.cc-top-over) .cc-idx{flex-direction:row;align-items:center;gap:36px;padding:0 24px}
  .cc-top:not(.cc-top-over) .cc-idx-n ul{flex-direction:row;gap:28px}
}

/* ── inner page head: a strip of tiles, the title on its plate ───────────────────────────────────────────────── */
.cc-page{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:150px auto;grid-template-areas:"p1 p2" "pl pl";gap:var(--grout);margin-top:var(--grout)}
.cc-page-t{position:relative;overflow:hidden;background:var(--bg2)}
.cc-page-t img{width:100%;height:100%;object-fit:cover}
.cc-p1{grid-area:p1}.cc-p2{grid-area:p2}.cc-p3{grid-area:p3;display:none}.cc-p4{grid-area:p4;display:none}
.cc-page-pl{grid-area:pl;background:var(--plate);color:var(--onplate);padding:36px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;container-type:inline-size}
/* capped by the plate so a long word like "Behandelingen" (about 6.7em) never breaks */
.cc-page .cc-h1{font-size:clamp(32px,min(5vw,14.5cqi),76px);max-width:16ch}
@media (min-width:760px){
  .cc-page{grid-template-columns:repeat(7,1fr);grid-template-rows:clamp(300px,30vw,400px);grid-template-areas:"p1 p2 pl pl pl p3 p4"}
  .cc-p3,.cc-p4{display:block}
  .cc-page-pl{padding:32px}
}

/* ── sections ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.cc-head{display:grid;gap:14px;margin-bottom:calc(clamp(32px,4vw,56px)*var(--tune-space,1))}
.cc-head p{color:var(--mute);font-size:calc(18px*var(--tune-size,1));max-width:54ch}
.cc-more{margin-top:32px}
.cc-more a,.cc-x .cc-ppl-b{font-weight:600;color:var(--acc);text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}

/* art levels: each level a tile, what it is, the time it adds and its price on top of the set */
.cc-lv{padding-block:calc(clamp(72px,9vw,136px)*var(--tune-space,1))}
.cc-lv-l{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.cc-lv-l li{display:grid;grid-template-columns:88px 1fr;grid-template-areas:"ph t" "ph f";gap:6px 18px;align-items:start;padding:20px 0;border-top:1px solid var(--line)}
.cc-lv-ph{grid-area:ph;aspect-ratio:1;overflow:hidden;background:var(--bg2)}
.cc-lv-ph img{width:100%;height:100%;object-fit:cover}
.cc-lv-t{grid-area:t}
.cc-lv-t h3{font-size:calc(clamp(24px,2.2vw,32px)*var(--tune-size,1));line-height:1.1;letter-spacing:-.01em}
.cc-lv-t p{color:var(--mute);margin-top:6px;max-width:48ch}
.cc-lv-f{grid-area:f;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;font-variant-numeric:tabular-nums}
.cc-lv-p{font:500 calc(20px*var(--tune-size,1))/1.2 var(--ft2)}
.cc-lv-a,.cc-lv-d{font-size:calc(15px*var(--tune-size,1));color:var(--mute);font-weight:500}
@media (min-width:760px){
  .cc-lv-l li{grid-template-columns:132px 1fr auto;grid-template-areas:"ph t f";gap:28px;align-items:center;padding:24px 0}
  .cc-lv-f{flex-direction:column;align-items:flex-end;text-align:right}
  .cc-lv-p{font-size:calc(24px*var(--tune-size,1))}
}
@media (min-width:1080px){
  .cc-lv{display:grid;grid-template-columns:4fr 8fr;gap:64px;align-items:start}
  .cc-lv .cc-head{position:sticky;top:32px}
  .cc-lv-l li{grid-template-columns:160px 1fr auto}
}

/* the menu: services by kind, ruled rows, prices right in tabular figures */
.cc-menu-s{padding-block:0 calc(clamp(72px,9vw,136px)*var(--tune-space,1))}
/* right under the hero (the highlights band that normally sits between them is not on a landing page): the look's band spacing */
.cc-hero + .cc-menu-s{padding-top:calc(clamp(72px,9vw,136px)*var(--tune-space,1))}
.cc-grp+.cc-grp{margin-top:calc(40px*var(--tune-space,1))}
.cc-grp-n{font-size:calc(clamp(22px,1.9vw,28px)*var(--tune-size,1));line-height:1.15;padding-bottom:12px}
.cc-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.cc-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"t p" "d d";gap:2px 18px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none}
.cc-row-t{grid-area:t;display:flex;flex-direction:column}
.cc-row-n{font-weight:600}
.cc-row-s{color:var(--mute);font-size:calc(16px*var(--tune-size,1))}
.cc-row-d{grid-area:d;color:var(--mute);font-size:calc(15px*var(--tune-size,1));font-variant-numeric:tabular-nums}
.cc-row-p{grid-area:p;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
@media (hover:hover){.cc-row:hover .cc-row-n{text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}}
@media (min-width:760px){
  .cc-row{grid-template-columns:1fr 110px 120px;grid-template-areas:"t d p";align-items:baseline}
  .cc-row-d{text-align:right}
}
@media (min-width:1080px){
  .cc-mn-menu .cc-grp{display:grid;grid-template-columns:4fr 8fr;gap:48px}
  .cc-mn-menu .cc-grp+.cc-grp{margin-top:calc(48px*var(--tune-space,1))}
  .cc-mn-columns .cc-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:48px}
  .cc-mn-columns .cc-grp+.cc-grp{margin-top:0}
  .cc-mn-columns .cc-grp{display:flex;flex-direction:column}   /* groups of 3 and 2 rows end on the same line: the rows share the height */
  .cc-mn-columns .cc-rows{flex:1;display:flex;flex-direction:column}
  .cc-mn-columns .cc-rows li{flex:1;display:flex;flex-direction:column}
  .cc-mn-columns .cc-row{flex:1;align-content:center}
  .cc-mn-columns .cc-row{grid-template-columns:1fr auto;grid-template-areas:"t p" "d d"}
  .cc-mn-columns .cc-row-d{text-align:left}
}

/* a caption plate on a photo */
.cc-cap{position:absolute;left:0;bottom:0;display:flex;flex-direction:column;gap:1px;max-width:calc(100% - 24px);
  background:var(--plate);color:var(--onplate);padding:8px 12px;font:400 calc(14px*var(--tune-size,1))/1.35 var(--ft2)}
.cc-cap-t{font-weight:600;font-size:calc(15px*var(--tune-size,1))}
.cc-cap-m{color:var(--onplate2)}

/* the detail band */
.cc-band-ph{position:relative;height:clamp(360px,58vw,760px);overflow:hidden;background:var(--bg2)}
.cc-band-ph img{width:100%;height:100%;object-fit:cover}
.cc-band-ph img{filter:saturate(.82)}
.cc-band .cc-cap{font-size:calc(15px*var(--tune-size,1));padding:12px 16px;left:max(var(--pad),calc((100% - var(--max))/2 + var(--pad)));bottom:var(--pad)}
.cc-band + .cc-rv{margin-top:0}   /* no beige strip between the photo and the reviews band */

/* the wall: the mosaic again, filtered by technique (radio buttons and :has, no script) */
.cc-wall{padding-block:calc(clamp(72px,9vw,136px)*var(--tune-space,1)) var(--grout);background:var(--deep);color:var(--ondeep)}   /* the gallery wall: the deep colour shows as grout between the tiles */
.cc-wall .cc-head p{color:var(--ondeep2)}
.cc-wall-h{margin-bottom:24px}
.cc-flt{border:0;margin:0 0 calc(clamp(28px,3vw,40px)*var(--tune-space,1));padding:0;display:flex;flex-wrap:wrap;gap:10px}
.cc-flt input{position:absolute;opacity:0;width:1px;height:1px}
.cc-flt label{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid color-mix(in srgb,var(--ondeep) 34%,transparent);border-radius:var(--r);font:500 calc(16px*var(--tune-size,1))/1 var(--ft2);cursor:pointer}
.cc-flt input:checked+label{background:var(--ondeep);border-color:var(--ondeep);color:var(--deep)}
.cc-flt input:focus-visible+label{outline:2px solid var(--ondeep);outline-offset:3px}
.cc-wall-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(150px,46vw,260px);grid-auto-flow:dense;gap:var(--grout)}
.cc-wt{position:relative;overflow:hidden;background:var(--bg2)}
.cc-wt figure{height:100%}
.cc-wt img{width:100%;height:100%;object-fit:cover}
.cc-wt:nth-child(5n+1){grid-column:span 2}
.cc-wt .cc-cap{max-width:calc(100% - 16px)}
.cc-wall:has(.cc-f1:checked) .cc-wt:not(.cc-k1),.cc-wall:has(.cc-f2:checked) .cc-wt:not(.cc-k2),.cc-wall:has(.cc-f3:checked) .cc-wt:not(.cc-k3),
.cc-wall:has(.cc-f4:checked) .cc-wt:not(.cc-k4),.cc-wall:has(.cc-f5:checked) .cc-wt:not(.cc-k5){display:none}
@media (min-width:760px){
  .cc-wall-g{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(220px,22vw,330px)}
  .cc-wt:nth-child(5n+1){grid-row:span 2}
}

/* reviews: the score set large, one review in the display face, the rest ruled; nothing moves on its own */
.cc-rv{background:var(--bg2);padding-block:calc(clamp(72px,9vw,136px)*var(--tune-space,1));margin-top:calc(clamp(72px,9vw,136px)*var(--tune-space,1))}
.cc-rv-h{display:grid;gap:16px;margin-bottom:36px}
.cc-score{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.cc-score-v{font:200 calc(clamp(64px,8vw,128px)*var(--tune-size,1))/.9 var(--fh);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cc-score-s{color:var(--acc);font-size:calc(20px*var(--tune-size,1));letter-spacing:.1em}
.cc-score-l{flex-basis:100%;color:var(--mute);font-size:calc(16px*var(--tune-size,1))}
.cc-rv-q{margin:0}
.cc-rv-q p,.cc-rv-l p{hyphens:none;overflow-wrap:break-word}
.cc-rv-q p{font:300 calc(clamp(24px,2.6vw,38px)*var(--tune-size,1))/1.25 var(--fh);letter-spacing:-.01em;max-width:30ch}
.cc-cite{margin-top:12px;font-weight:600;font-size:calc(15px*var(--tune-size,1));color:var(--mute)}
.cc-rv-l{list-style:none;margin:calc(40px*var(--tune-space,1)) 0 0;padding:0;display:grid;gap:0 40px;border-top:1px solid var(--line)}
.cc-rv-l li{padding:22px 0;border-bottom:1px solid var(--line)}
.cc-rv-l blockquote{margin:0}
.cc-rv-l p{max-width:46ch}
@media (min-width:760px){.cc-rv-l{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){
  .cc-rv-score .cc-rv-in{display:grid;grid-template-columns:4fr 8fr;gap:64px;align-items:start}
  .cc-rv-score .cc-rv-h{position:sticky;top:32px}
  .cc-rv-lead .cc-rv-in{display:block}
  .cc-rv-lead .cc-rv-h{grid-template-columns:1fr auto;align-items:end}
  .cc-rv-lead .cc-score-v{font-size:calc(96px*var(--tune-size,1))}
  .cc-rv-lead .cc-rv-l{grid-template-columns:repeat(3,1fr)}
  .cc-rv-lead .cc-rv-q p{max-width:36ch}
}

/* artists: each beside a tile of her own work */
.cc-tm{padding-block:calc(clamp(72px,9vw,136px)*var(--tune-space,1))}
.cc-ppl{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.cc-ppl li{display:grid;grid-template-columns:1fr;gap:10px 22px;padding:22px 0;border-top:1px solid var(--line);align-items:center}
.cc-tm-tiles .cc-ppl li:has(.cc-ppl-ph){grid-template-columns:96px 1fr}
.cc-ppl-ph{aspect-ratio:1;overflow:hidden;background:var(--bg2);grid-row:span 2}
.cc-ppl-ph img{width:100%;height:100%;object-fit:cover}
.cc-ppl-n{font-size:calc(clamp(26px,2.4vw,36px)*var(--tune-size,1));line-height:1.1;letter-spacing:-.01em}
.cc-ppl-r{font-weight:600;margin-top:4px}
.cc-ppl-f,.cc-ppl-x{color:var(--mute);margin-top:4px;max-width:54ch}
.cc-ppl-b{justify-self:start}
@media (min-width:760px){
  /* the booking link stands one column after the widest text (24 px), not at the far right edge */
  .cc-ppl{display:grid;grid-template-columns:minmax(0,max-content) minmax(min-content,1fr);column-gap:24px}
  .cc-tm-tiles .cc-ppl:has(.cc-ppl-ph){grid-template-columns:160px minmax(0,max-content) minmax(min-content,1fr)}
  .cc-ppl li,.cc-tm-tiles .cc-ppl li:has(.cc-ppl-ph){grid-column:1/-1;grid-template-columns:subgrid;column-gap:24px}
  .cc-tm-tiles .cc-ppl:has(.cc-ppl-ph) li:not(:has(.cc-ppl-ph)) .cc-ppl-t{grid-column:2}
  .cc-ppl-ph{grid-row:auto}
  .cc-ppl-b{justify-self:start}
}

/* visit: the studio photo bleeds to the left edge, the facts beside it */
.cc-visit{display:grid;background:var(--bg)}
.cc-visit-ph{position:relative;min-height:320px;overflow:hidden;background:var(--bg2)}
.cc-visit-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cc-visit-in{padding:calc(48px*var(--tune-space,1)) var(--pad) calc(clamp(72px,9vw,120px)*var(--tune-space,1));display:grid;gap:22px;align-content:start}
.cc-addr{font:300 calc(clamp(24px,2.2vw,32px)*var(--tune-size,1))/1.25 var(--fh)}
.cc-trans{color:var(--mute);max-width:46ch}
.cc-visit-c{display:flex;flex-wrap:wrap;gap:8px 28px;font-weight:600}
.cc-visit-c a{text-decoration:none}
.cc-visit-c a:hover{text-decoration:underline;text-underline-offset:.25em}
.cc-hrs{margin:8px 0 0;max-width:420px}
.cc-hrs div{display:flex;justify-content:space-between;gap:24px;padding:7px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.cc-hrs dt{margin:0}.cc-hrs dd{margin:0;text-align:right}
.cc-shut{color:var(--mute)}
@media (min-width:1080px){
  .cc-visit{grid-template-columns:1fr 1fr;min-height:720px}
  .cc-visit-in{padding:calc(clamp(72px,8vw,120px)*var(--tune-space,1)) var(--pad) calc(clamp(72px,8vw,120px)*var(--tune-space,1)) clamp(48px,5vw,88px);max-width:720px}
}
/* the map: a still panel until the visitor asks */
.cc-map{position:relative;margin-top:8px;min-height:240px;background:var(--bg2);display:flex;align-items:center;justify-content:center;overflow:hidden;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px}
.cc-map-in{position:relative;z-index:1;display:grid;gap:12px;justify-items:center;text-align:center;padding:24px}
.cc-map-a{display:flex;flex-direction:column;background:var(--plate);color:var(--onplate);padding:10px 16px;font:600 calc(15px*var(--tune-size,1))/1.35 var(--ft2)}
.cc-map-a span+span{font-weight:400;color:var(--onplate2)}
.cc-map-acts{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:center}
.cc-map-b{min-height:44px;padding:0 20px;border:1px solid var(--ink);border-radius:var(--r);background:var(--bg);color:var(--ink);font:600 calc(15px*var(--tune-size,1))/1 var(--ft2);cursor:pointer}
.cc-map-d{font-weight:600;color:var(--acc);text-underline-offset:.25em}
.cc-map-n{font-size:calc(15px*var(--tune-size,1));color:var(--mute);max-width:40ch;background:var(--bg2);padding:2px 6px}
.cc-map-f{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;filter:grayscale(1) contrast(.92)}
.cc-map-on{min-height:320px}

/* closing: a strip of tiles with the plate in the middle */
.cc-end{padding:0;margin-top:var(--grout)}
.cc-end-plate{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:150px auto;grid-template-areas:"e1 e2" "p p";gap:var(--grout)}
.cc-end-t{position:relative;overflow:hidden;background:var(--bg2)}
.cc-end-t img{width:100%;height:100%;object-fit:cover}
.cc-e1{grid-area:e1}.cc-e2{grid-area:e2}.cc-e3{grid-area:e3;display:none}.cc-e4{grid-area:e4;display:none}
.cc-end-in{grid-area:p;background:var(--plate);color:var(--onplate);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:calc(48px*var(--tune-space,1)) 20px}
.cc-end h2{font-size:calc(clamp(36px,4.4vw,64px)*var(--tune-size,1));max-width:16ch}
.cc-end-x{color:var(--onplate2);max-width:44ch}
.cc-end-a{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 28px}
.cc-end-line .cc-end-in{background:var(--bg);padding-block:calc(clamp(72px,9vw,136px)*var(--tune-space,1))}
@media (min-width:760px){
  .cc-end-plate{grid-template-columns:repeat(6,1fr);grid-template-rows:clamp(340px,32vw,440px);grid-template-areas:"e1 e2 p p e3 e4"}
  .cc-e3,.cc-e4{display:block}
  .cc-end-plate .cc-end-in{padding:32px}
  .cc-end-plate h2{font-size:calc(clamp(34px,3.4vw,52px)*var(--tune-size,1))}
}

/* services page */
.cc-items{padding-block:0 calc(clamp(56px,7vw,104px)*var(--tune-space,1))}
.cc-items>h2{margin-bottom:calc(clamp(28px,3vw,44px)*var(--tune-space,1))}
.cc-items-g+.cc-items-g{margin-top:calc(48px*var(--tune-space,1))}
.cc-items-g .cc-grp-n{border-bottom:1px solid var(--ink)}
.cc-item{display:grid;gap:8px 32px;padding:22px 0;border-bottom:1px solid var(--line);scroll-margin-top:24px}
.cc-item-h{display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.cc-item h4{font-size:calc(clamp(22px,1.9vw,27px)*var(--tune-size,1));line-height:1.15}
.cc-item-p{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cc-item-b{color:var(--mute);display:grid;gap:6px;max-width:62ch}
.cc-item-w .cc-k{display:inline;margin-right:4px}
.cc-item-d{font-size:calc(15px*var(--tune-size,1));color:var(--mute);font-variant-numeric:tabular-nums}
@media (min-width:1080px){
  .cc-item{grid-template-columns:5fr 6fr 1fr;align-items:baseline}
  .cc-item-h{display:contents}
  .cc-item h4{grid-column:1}.cc-item-b{grid-column:2;grid-row:1}.cc-item-p{grid-column:3;grid-row:1;text-align:right}
  .cc-item-d{grid-column:1;grid-row:2;margin-top:-4px}
}
.cc-rates{margin-top:calc(40px*var(--tune-space,1));max-width:560px}
.cc-pol{padding-block:0 calc(clamp(56px,7vw,96px)*var(--tune-space,1))}
.cc-pol ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;max-width:70ch}
.cc-pol li{padding-left:18px;position:relative}
.cc-pol li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;background:var(--acc)}
.cc-faq{padding-block:0 calc(clamp(56px,7vw,96px)*var(--tune-space,1))}
.cc-faq h2{margin-bottom:28px}
.cc-faq details{border-top:1px solid var(--line)}
.cc-faq details:last-child{border-bottom:1px solid var(--line)}
.cc-faq summary{cursor:pointer;padding:18px 0;font:500 calc(19px*var(--tune-size,1))/1.35 var(--ft2)}
.cc-faq details p{padding:0 0 20px;color:var(--mute);max-width:62ch}
.cc-faq dl{margin:0;display:grid;gap:28px 48px}
.cc-faq dt{font-weight:600}.cc-faq dd{margin:6px 0 0;color:var(--mute)}
@media (min-width:760px){.cc-faq-open dl{grid-template-columns:1fr 1fr}}
.cc-next{padding-block:0 calc(clamp(72px,9vw,120px)*var(--tune-space,1))}

/* team page contact */
.cc-tm-full{padding-top:calc(clamp(56px,7vw,104px)*var(--tune-space,1))}
.cc-ct{padding-block:calc(clamp(56px,7vw,104px)*var(--tune-space,1))}
.cc-ct-g{display:grid;gap:40px}
.cc-ct-d{margin:0;display:grid;gap:18px}
.cc-ct-d dt{font-weight:600;font-size:calc(15px*var(--tune-size,1));color:var(--mute)}
.cc-ct-d dd{margin:2px 0 0;font-size:calc(19px*var(--tune-size,1))}
.cc-ct-d a{text-decoration:none}
.cc-hrs-p{margin-top:28px}
.cc-form{display:grid;gap:16px;background:var(--plate);color:var(--onplate);padding:clamp(20px,3vw,36px)}
.cc-form label{display:grid;gap:6px;font-weight:600;font-size:calc(15px*var(--tune-size,1))}
.cc-form input,.cc-form textarea{font:400 calc(17px*var(--tune-size,1))/1.4 var(--ft2);padding:12px 14px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:0}
.cc-form .cc-btn{justify-self:start}
.cc-form-n{font-size:calc(15px*var(--tune-size,1));color:var(--onplate2)}
.cc-ct-m{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.cc-ct-m li{padding:22px 0;border-bottom:1px solid var(--line)}
.cc-ct-v{display:block;margin-top:6px;font:300 calc(clamp(26px,3vw,44px)*var(--tune-size,1))/1.2 var(--fh);text-decoration:none}
@media (min-width:1080px){.cc-ct-g{grid-template-columns:5fr 7fr;gap:72px}.cc-ct-nf{grid-template-columns:1fr}}
.cc-reg{padding-bottom:calc(48px*var(--tune-space,1));font-size:calc(15px*var(--tune-size,1));color:var(--mute)}
.cc-legal{padding-block:calc(56px*var(--tune-space,1)) calc(96px*var(--tune-space,1));max-width:860px}

/* footer: a quiet deep band */
.cc-foot{background:var(--deep);color:var(--ondeep);padding-block:calc(56px*var(--tune-space,1)) calc(40px*var(--tune-space,1));margin-top:var(--grout)}
.cc-foot-in{display:grid;gap:36px}
.cc-foot .cc-k{color:var(--ondeep2)}
.cc-foot-n{font:400 calc(26px*var(--tune-size,1))/1.1 var(--fh);margin-bottom:10px}
.cc-foot a{text-decoration:none}
.cc-foot a:hover{text-decoration:underline;text-underline-offset:.25em}
.cc-foot .cc-hrs div{border-color:color-mix(in srgb,var(--ondeep) 18%,transparent)}
.cc-foot .cc-shut{color:var(--ondeep2)}
.cc-legal-l{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:6px}
.cc-foot-f{margin-top:16px;font-size:calc(15px*var(--tune-size,1));color:var(--ondeep2)}
@media (min-width:1080px){.cc-foot-in{grid-template-columns:4fr 4fr 3fr;gap:64px}}

/* tone */
[data-colours=bold] .cc-plate,[data-colours=bold] .cc-end-plate .cc-end-in{background:var(--btn);color:var(--onbtn)}
[data-colours=bold] .cc-plate :is(.cc-kicker,.cc-lede),[data-colours=bold] .cc-end-plate .cc-end-x{color:var(--onbtn)}
[data-colours=bold] .cc-plate .cc-btn,[data-colours=bold] .cc-end-plate .cc-btn{background:var(--onbtn);color:var(--btn)}
[data-tone=playful] .cc-h1 em{color:var(--acc)}

/* ── Advanced hero moment: "the setting". The plate is there from the first frame; the tiles are set around it one
   by one, from the plate outwards, each pressed in from a little larger, like tiles laid into fresh grout. ─────── */
@media (prefers-reduced-motion:no-preference){
  .m-js .cc-hero .cc-t{animation:cc-set .9s calc(.12s + var(--i) * 70ms) cubic-bezier(.2,.75,.25,1) backwards}
  .m-js .cc-hero .cc-t img{animation:cc-press 1.6s calc(.12s + var(--i) * 70ms) cubic-bezier(.2,.7,.2,1) backwards}
  .m-js .cc-hero .cc-kicker{animation:cc-lift .7s .1s cubic-bezier(.2,.8,.2,1) backwards}
  .m-js .cc-hero .cc-h1{animation:cc-lift .9s .18s cubic-bezier(.2,.8,.2,1) backwards}
  .m-js .cc-hero .cc-lede{animation:cc-lift .8s .34s cubic-bezier(.2,.8,.2,1) backwards}
  .m-js .cc-hero .cc-acts{animation:cc-lift .8s .46s cubic-bezier(.2,.8,.2,1) backwards}
  .m-js .cc-top-over .cc-tile{animation:cc-fade .6s .2s ease-out backwards}
}
@keyframes cc-set{from{opacity:0;transform:scale(.94)}}
@keyframes cc-press{from{transform:scale(1.12)}}
@keyframes cc-lift{from{opacity:0;transform:translateY(22px)}}
@keyframes cc-fade{from{opacity:0}}