/* Home-page bands (prices, reviews): shared base. Every value comes from the look's --g-* tokens first,
   so the band wears the look's colours, fonts and corners. Rules sit in :where() so a look can restyle them. */
.bd{--bd-ink:var(--g-ink,#17191b);--bd-muted:var(--g-muted,#5b6066);--bd-line:var(--g-line,color-mix(in srgb,var(--bd-ink) 14%,transparent));
  --bd-paper:var(--g-paper,#fff);--bd-surface:var(--g-surface,color-mix(in srgb,var(--bd-ink) 4%,var(--bd-paper)));--bd-accent:var(--g-accent,#2d5b4f);
  --bd-bg:transparent;--bd-star:var(--bd-ink);
  --bd-r:var(--g-radius,14px);--bd-r2:min(var(--bd-r),10px);--bd-fd:var(--g-fd,inherit);--bd-ft:var(--g-ft,inherit);--bd-fw:var(--g-fw,400);--bd-ls:var(--g-ls,-.02em);
  --bd-fq:var(--g-fq,var(--bd-fd));--bd-fqw:var(--g-fqw,var(--bd-fw));--bd-fqls:var(--g-fqls,var(--bd-ls));
  --bd-max:var(--g-max,1360px);--bd-pad:var(--g-pad,clamp(16px,4vw,56px));--bd-space:var(--g-space,clamp(64px,9vw,128px));--bd-top:var(--g-top,84px);
  --bd-ease:cubic-bezier(.2,.75,.15,1);
  /* the look's heading case (--g-case: none, lowercase, uppercase) and button corners: --g-btn-r, else a sharp look's
     radius (--g-radius up to 4px), else a pill */
  --bd-case:var(--g-case,none);--bd-btn-r:var(--g-btn-r,max(var(--g-radius,14px),min(999px,calc((var(--g-radius,14px) - 4px) * 1000))));
  /* the serious lift: soft layers in the page's own hue (engine/shared/tone.ts lift()) */
  --bd-sh:0 1px 2px color-mix(in srgb,var(--tone-sh,#000) 6%,transparent),0 4px 10px color-mix(in srgb,var(--tone-sh,#000) 5%,transparent),0 14px 30px -10px color-mix(in srgb,var(--tone-sh,#000) 9%,transparent);
  --bd-sh2:0 4px 8px color-mix(in srgb,var(--tone-sh,#000) 7%,transparent),0 16px 32px color-mix(in srgb,var(--tone-sh,#000) 7%,transparent),0 32px 64px -16px color-mix(in srgb,var(--tone-sh,#000) 12%,transparent);
  color:var(--bd-ink);background:var(--bd-bg);font-family:var(--bd-ft);padding-block:var(--bd-space);position:relative;font-size:16px;line-height:1.55}
/* surfaces: the page itself, a soft tint of it, or the look's text colour as the background (dark, for a barbershop) */
.bd-s-tint{--bd-bg:color-mix(in oklab,var(--bd-ink) 5%,var(--g-paper,#fff));--bd-surface:var(--g-paper,#fff)}
.bd-s-ink{--bd-ink:var(--g-paper,#fff);--bd-paper:var(--g-ink,#17191b);--bd-bg:var(--g-ink,#17191b);
  --bd-muted:color-mix(in oklab,var(--g-paper,#fff) 74%,var(--g-ink,#17191b));--bd-line:color-mix(in oklab,var(--g-paper,#fff) 20%,var(--g-ink,#17191b));
  --bd-surface:color-mix(in oklab,var(--g-paper,#fff) 7%,var(--g-ink,#17191b));--bd-accent:color-mix(in oklab,var(--g-accent,#2d5b4f) 45%,var(--g-paper,#fff));
  --bd-sh:0 1px 2px rgb(0 0 0/.2),0 12px 28px -10px rgb(0 0 0/.45);--bd-sh2:0 24px 60px -18px rgb(0 0 0/.6)}
.bd *,.bd *::before,.bd *::after{box-sizing:border-box}
.bd *{min-width:0}
.bd-head,.bd-scard,.bd-ctop,.bd-tname{container-type:inline-size}
.bd [style*="--fw"]{--bd-cap:calc(100cqi / var(--fw) / var(--bd-cw,.8))}
.bd :is(h2,h3,p,li,a,b,span,blockquote,figcaption,label){overflow-wrap:anywhere}
:where(.bd) :where(figure,p,h2,h3,ol,ul,blockquote){margin:0}
:where(.bd) :where(ol,ul){list-style:none;padding:0}
:where(.bd) :where(h2,h3){font-weight:inherit;line-height:1.1}
:where(.bd) :where(blockquote,figcaption){padding:0;border:0;background:none;quotes:none;font-style:normal}
:where(.bd) :where(blockquote)::before,:where(.bd) :where(blockquote)::after{content:none}
.bd.bd img{display:block;width:100%;height:100%;object-fit:cover;max-width:none;max-height:none}
.bd-in{max-width:var(--bd-max);margin-inline:auto;padding-inline:var(--bd-pad)}

.bd-head{display:grid;gap:14px;max-width:40rem}
.bd-kick{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bd-muted)}
.bd :is(.bd-title,h3:not(.bd-gname)){text-transform:var(--bd-case)}
.bd-title{font:var(--bd-fw) min(clamp(34px,4.6vw,64px),var(--bd-cap))/1.04 var(--bd-fd);letter-spacing:var(--bd-ls);text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
.bd-intro{font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.55;color:var(--bd-muted);max-width:46ch;text-wrap:pretty}
.bd h3{overflow-wrap:break-word;hyphens:auto}
/* a head with something beside it (actions, the score): side by side on wide screens, bottoms aligned */
.bd-hrow{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px;margin-bottom:clamp(36px,4.5vw,64px)}
.bd-hrow>.bd-head{flex:1 1 30rem}

.bd-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:var(--bd-btn-r);background:var(--bd-ink);color:var(--bd-paper);
  text-decoration:none;font:500 15px/1.2 var(--bd-ft);text-align:center;transition:transform .25s var(--bd-ease),opacity .25s}
.bd-btn-2{background:transparent;color:var(--bd-ink);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--bd-ink) 70%,transparent)}
/* a look's own link rules (.xx a{color:inherit}) must not reach the band's buttons and links: colour at (0,2,1) */
.bd a.bd-btn,.bd button.bd-btn{color:var(--bd-paper)}
.bd a.bd-btn-2{color:var(--bd-ink)}
.bd a.bd-more{color:var(--bd-ink)}
.bd-btn:hover{transform:translateY(-2px)}
.bd-btn:active{transform:translateY(0)}
.bd-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--bd-ink);font:500 15px/1.2 var(--bd-ft);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--bd-line)}
.bd-more svg{width:18px;height:18px;flex:none;transition:transform .3s var(--bd-ease)}
.bd-more:hover{text-decoration-color:currentColor}
.bd-more:hover svg{transform:translateX(3px)}
.bd-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.bd-foot{display:grid;gap:22px;margin-top:clamp(28px,3vw,40px)}
.bd-note{font-size:14px;color:var(--bd-muted);text-wrap:pretty;max-width:60ch}
.bd>.bd-in>.bd-note{margin-top:28px}
.bd>.bd-in>.bd-acts{margin-top:clamp(32px,4vw,48px)}

/* prices: lining, tabular figures so columns of prices line up */
.bd-price,.bd-rp,.bd-cfrom,.bd-sval{font-variant-numeric:lining-nums tabular-nums}
.bd-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;line-height:1}
.bd-price b{--bd-cw:.82;font:var(--bd-fw) min(clamp(32px,2.8vw,42px),var(--bd-cap))/1 var(--bd-fd);letter-spacing:var(--bd-ls)}
.bd-from,.bd-unit{font-size:14px;color:var(--bd-muted)}
.bd :is(.bd-price,.bd-rp,.bd-cfrom) b .bd-from{font:inherit;white-space:nowrap;font-size:.5em;color:var(--bd-muted);letter-spacing:0;margin-left:.08em}

/* a price row: name … price, the note and duration under the name */
.bd-rows{display:grid}
.bd-row{padding:15px 0;border-bottom:1px solid var(--bd-line)}
.bd-row:first-child{padding-top:0}
.bd-rl{display:flex;align-items:baseline;gap:12px}
.bd-rname{font:500 17px/1.35 var(--bd-ft)}
.bd-lead{flex:1 1 24px;min-width:24px;border-bottom:1.5px dotted color-mix(in srgb,var(--bd-ink) 32%,transparent);transform:translateY(-.32em)}
.bd-rp{flex:none;white-space:nowrap;text-align:right}
.bd-rp b{font:var(--bd-fw) 19px/1.2 var(--bd-fd);letter-spacing:var(--bd-ls)}
.bd-rp .bd-from{margin-right:4px}
.bd-rsub{margin-top:4px;font-size:14.5px;line-height:1.45;color:var(--bd-muted);max-width:44ch}
.bd-tag{display:inline-block;vertical-align:.12em;margin-left:6px;padding:3px 8px;border-radius:999px;font:600 11px/1.2 var(--bd-ft);letter-spacing:.06em;text-transform:uppercase;
  color:var(--bd-ink);box-shadow:inset 0 0 0 1px var(--bd-line)}
.bd-cfrom{display:flex;align-items:baseline;gap:5px;white-space:nowrap;line-height:1.2}
.bd-cfrom b{font:var(--bd-fw) 17px/1.2 var(--bd-ft);letter-spacing:0}

.bd-inc{display:grid;gap:9px}
.bd-inc li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;font-size:15px;line-height:1.45}
.bd-tick{width:18px;height:18px;display:block;color:var(--bd-accent);margin-top:2px}

/* stars: the back row in a faint ink, the front row filled to the score */
.bd-stars{position:relative;display:inline-block;width:var(--bd-sw,92px);aspect-ratio:5;flex:none;color:var(--bd-star)}
.bd-stars svg{display:block;width:var(--bd-sw,92px);height:auto;fill:currentColor}
.bd-sbg{display:block;opacity:.18}
.bd-sfg{position:absolute;inset:0 auto 0 0;overflow:hidden}

/* the score: the number large, the stars and what it is based on beside it */
.bd-score{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.bd-sval{flex:none;max-width:100%}
.bd-sval b{display:block;font:var(--bd-fw) clamp(64px,7vw,104px)/.86 var(--bd-fd);letter-spacing:var(--bd-ls);overflow-wrap:anywhere}
/* the number and the stars never shrink (.bd * sets min-width:0): when they don't fit side by side, the line wraps */
.bd-sinfo{display:grid;gap:8px;--bd-sw:112px;min-width:var(--bd-sw)}
.bd-sbasis{font-size:14.5px;line-height:1.4;color:var(--bd-muted);max-width:22ch;text-wrap:pretty}
.bd-sbasis a{color:inherit;text-underline-offset:3px}
/* a smaller score that sits beside a heading */
.bd-sl{gap:14px}
.bd-sl .bd-sval b{font-size:clamp(48px,4.6vw,64px)}
.bd-sl .bd-sinfo{--bd-sw:96px}

/* one review */
.bd-rv{display:flex;flex-direction:column;gap:16px}
.bd-rvtop{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:20px}
.bd-src{font:600 11.5px/1 var(--bd-ft);letter-spacing:.12em;text-transform:uppercase;color:var(--bd-muted)}
.bd-q p{font-size:17px;line-height:1.6;text-wrap:pretty}
.bd-q em{font-style:italic}
.bd-by{display:flex;align-items:center;gap:12px;margin-top:auto}
.bd-mono{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--bd-ink) 8%,transparent);font:var(--bd-fw) 17px/1 var(--bd-fd);color:var(--bd-ink)}
.bd-who{display:grid;gap:2px;font-size:14.5px;line-height:1.35}
.bd-who b{font-weight:600;font-size:15.5px}
.bd-meta{color:var(--bd-muted)}
.bd-samp{font-size:12.5px;color:var(--bd-muted);font-style:italic}

.bd :focus-visible{outline:2.5px solid currentColor;outline-offset:3px}
.bd-r{position:absolute;opacity:0;pointer-events:none}

/* Advanced: bands ease in as they enter (transform and opacity only) */
@keyframes bd-rise{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes bd-settle{from{transform:scale(1.07)}to{transform:none}}
@keyframes bd-show{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
@keyframes bd-fill{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .m-js [data-bd-motion] .bd-sfg{animation:bd-fill linear both;animation-timeline:view();animation-range:entry 30% cover 40%}
  }
}

/* Review band: wall. Up to six reviews as cards in balanced columns (three on wide screens), each as long as its
   words; the score beside the heading. */
.bd-wall{columns:1;column-gap:18px}
.bd-wall .bd-rv{break-inside:avoid;margin-bottom:18px;padding:clamp(24px,2.4vw,30px);border-radius:var(--bd-r);background:var(--bd-surface);box-shadow:var(--bd-sh)}
.bd-s-page .bd-wall .bd-rv{background:var(--bd-paper);box-shadow:var(--bd-sh),inset 0 0 0 1px var(--bd-line)}
.bd-wall .bd-by{margin-top:6px}
@media (min-width:640px){.bd-wall{columns:2}}
@media (min-width:1040px){.bd-wall{columns:3}.bd-wall[style*="--n:4"]{columns:2}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .m-js [data-bd-motion] .bd-wall .bd-rv{animation:bd-rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}

/* Map band (split, wide). The frame shows a quiet panel with a pin until the visitor asks for the map; then the
   Google Maps frame fills it, toned by the band's map look: grey, sepia, duotone (the look's accent over grey), dark. */
.bd-mapf{position:relative;isolation:isolate;border-radius:var(--bd-r);overflow:hidden;background:var(--bd-surface);box-shadow:var(--bd-sh);min-height:300px;aspect-ratio:4/3.4;max-width:100%}
/* the panel before the map loads already wears the map's look, so the choice shows on every visit */
.bd-mapc{--bd-mbg:var(--bd-surface);--bd-mfg:var(--bd-ink);--bd-mpin:var(--bd-accent);
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;text-align:center;color:var(--bd-mfg);
  background:radial-gradient(circle at 50% 40%,transparent 18%,var(--bd-mbg) 64%),
    repeating-radial-gradient(circle at 50% 40%,transparent 0 54px,color-mix(in srgb,var(--bd-mfg) 8%,transparent) 54px 55px),
    radial-gradient(circle at 50% 40%,color-mix(in oklab,var(--bd-mpin) 14%,transparent),transparent 62%),var(--bd-mbg)}
/* sepia: old paper on light and dark sites alike, a fixed pair */
.bd-m-sepia .bd-mapc{--bd-mbg:#e8dcc6;--bd-mfg:#3a2c1c;--bd-mpin:#8a5a2b}
.bd-m-dark .bd-mapc{--bd-mbg:#1c1d1f;--bd-mfg:#ecebe8;--bd-mpin:color-mix(in oklab,var(--g-accent,#9ab) 55%,#fff)}
.bd-m-duotone .bd-mapc{--bd-mbg:color-mix(in oklab,var(--bd-accent) 16%,var(--bd-surface))}
.bd-mapc .bd-btn{background:var(--bd-mfg)}
.bd-mapc a.bd-btn,.bd-mapc button.bd-btn{color:var(--bd-mbg)}
.bd-mapc .bd-mapn{color:color-mix(in oklab,var(--bd-mfg) 72%,var(--bd-mbg))}
.bd-pin{width:34px;height:auto;display:block;fill:var(--bd-mpin)}
.bd-pin circle{fill:var(--bd-mbg)}
.bd-mapname{text-transform:var(--bd-case);font:var(--bd-fw) clamp(22px,2vw,28px)/1.15 var(--bd-fd);letter-spacing:var(--bd-ls);text-wrap:balance;max-width:20ch}
.bd-mapb{margin-top:6px}
.bd-mapn{font-size:13.5px;line-height:1.45;max-width:34ch;text-wrap:pretty}
.bd-on>.bd-mapc{display:none}
/* panel: the map alone inside a look's own band; it fills the box the look gives it (the look sizes the slot) */
.bd.bd-v-panel{padding-block:0;height:100%;background:none}
.bd-v-panel .bd-mapf{width:100%;height:100%;min-height:0;aspect-ratio:auto}
.bd-mapi{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.bd-m-grey .bd-mapi{filter:grayscale(1) contrast(1.04)}
.bd-m-sepia .bd-mapi{filter:grayscale(1) sepia(.5) contrast(.96) brightness(1.02)}
.bd-m-dark .bd-mapi{filter:grayscale(1) invert(.9) contrast(.92)}
.bd-m-duotone .bd-mapi{filter:grayscale(1) contrast(1.06)}
.bd-m-duotone .bd-on::after{content:"";position:absolute;inset:0;background:var(--bd-accent);mix-blend-mode:color;pointer-events:none}
.bd-addr{display:grid;gap:2px;font-style:normal;font-size:17px;line-height:1.5}
.bd-aname{font-weight:600}
.bd-tel{display:inline-flex;align-items:center;min-height:44px;justify-self:start;color:inherit;text-underline-offset:4px;text-decoration-color:var(--bd-line)}
.bd-mside{display:grid;align-content:center;gap:clamp(22px,2.6vw,32px);min-width:0}
.bd-mapgrid{display:grid;gap:clamp(36px,4.6vw,72px)}
.bd-mrow{display:grid;gap:clamp(24px,3vw,40px);margin-top:clamp(28px,3.4vw,48px)}
@media (min-width:900px){
  .bd-mapgrid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch}
  .bd-v-split .bd-mapf{aspect-ratio:auto;min-height:460px}
  .bd-v-wide .bd-mapf{aspect-ratio:21/8;min-height:380px}
  .bd-mrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .bd-mrow>.bd-mside{align-content:start}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .m-js [data-bd-motion] .bd-mapf{animation:bd-show linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    .m-js [data-bd-motion] .bd-pin{animation:bd-rise linear both;animation-timeline:view();animation-range:entry 20% cover 40%}
  }
}

/* Sales mode: the action band (one sentence, the main button, the phone number) and "how booking works" (3 steps).
   Same tokens as every band, so they wear the look's colours and fonts; serious: no motion beyond a soft rise. */
.bd-v-action{padding-block:clamp(36px,5vw,72px)}
.bd-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px clamp(24px,5vw,64px)}
.bd-act-t{flex:1 1 20rem;max-width:34ch;font:var(--bd-fw) clamp(24px,2.7vw,38px)/1.16 var(--bd-fd);letter-spacing:var(--bd-ls);text-transform:var(--bd-case);text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
.bd-act-do{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px}
.bd-tel{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--bd-muted);font:400 15px/1.2 var(--bd-ft)}
.bd .bd-tel a{display:inline-flex;align-items:center;min-height:44px;color:var(--bd-ink);font:var(--bd-fw) 19px/1.2 var(--bd-fd);letter-spacing:0;font-variant-numeric:lining-nums tabular-nums;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--bd-line)}
.bd .bd-tel a:hover{text-decoration-color:currentColor}

/* a short band: less air above and below than a full section, so it does not leave a hole between its neighbours */
.bd-v-steps{padding-block:clamp(48px,6vw,88px)}
.bd-steps{display:grid;margin-top:clamp(28px,4vw,52px)}
.bd-steps>li{display:grid;grid-template-columns:clamp(40px,12vw,56px) minmax(0,1fr);column-gap:16px;row-gap:4px;align-content:start;padding-block:20px;border-top:1px solid var(--bd-line)}
.bd-n{grid-row:1/3;font:var(--bd-fw) clamp(36px,4vw,52px)/1 var(--bd-fd);letter-spacing:var(--bd-ls);font-variant-numeric:lining-nums tabular-nums;color:var(--bd-ink)}
.bd-steps h3{font:600 clamp(19px,1.7vw,23px)/1.25 var(--bd-ft);letter-spacing:0;text-transform:none;hyphens:manual}
.bd-steps p{font-size:clamp(16px,1.25vw,18px);line-height:1.5;color:color-mix(in srgb,var(--bd-ink) 78%,var(--bd-paper));max-width:32ch;text-wrap:pretty}
@media (min-width:760px){
  .bd-steps{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,4vw,56px)}
  .bd-steps>li{grid-template-columns:minmax(0,1fr);row-gap:10px;padding-block:22px 0}
  .bd-n{grid-row:auto;margin-bottom:6px}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .m-js [data-bd-motion] .bd-steps>li{animation:bd-rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .m-js [data-bd-motion] .bd-steps>li:nth-child(2){animation-range:entry 8% entry 78%}
    .m-js [data-bd-motion] .bd-steps>li:nth-child(3){animation-range:entry 16% entry 86%}
  }
}

.bd{--bd-fw:400}