/* Salon Bonn page CSS. The look: the shop after dark. Black slats, warm cream, copper light, chunky toon type with a
   copper extrusion (from the client's own cartoon-barber page), the salon's own lines ("Made to stand out") set loud.
   Plus the motion layer's parts (tape, scissors, stage, tour) and the few layouts the kit lacks. */
:root {
  --copper: #e5733c; --copper-hi: #ff9a5c; --copper-deep: #8f3a16; --cream: #f3ebe1; --black: #0f0d0c; --tape-h: 56px;
  --toon: "Lilita One", "Bricolage Grotesque", Impact, sans-serif;
  /* the copper extrusion under toon type */
  --ext: 0 -.004em 0 #ffe3cc, 0 .006em 0 #d9591f, 0 .012em 0 #cd521b, 0 .018em 0 #c14b18, 0 .024em 0 #b54416, 0 .03em 0 #a93d14,
         0 .036em 0 #9d3612, 0 .042em 0 #912f10, 0 .048em 0 #85290e, 0 .054em 0 #79230c, 0 .06em 0 #6d1d0a;
  color-scheme: dark;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
a, button, select, input { touch-action: manipulation; -webkit-tap-highlight-color: rgb(229 115 60 / .25); }
body { background: var(--black); }
/* the slats of the salon's partition, faint, on every dark section */
main > section:not(.band-cream), .footer { background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / .03) 0 22px, transparent 22px 44px); }

/* ---------- type ---------- */
h1, h2, .footer__address { font-variation-settings: "opsz" 96; font-weight: 800; }
h2 { font-size: clamp(34px, 4.6vw, 64px); line-height: 1; letter-spacing: -0.04em; }
h2::after { content: " ✦" / ""; color: var(--copper); font-size: .5em; vertical-align: .55em; }
.section-head p, .visit__lede { font-size: clamp(17px, 1.4vw, 20px); }
.section-head .statement, .statement {
  margin: 0; font: 400 clamp(48px, 5.8vw, 92px)/.9 var(--toon); letter-spacing: .005em;
  color: #ffe8d2; text-shadow: var(--ext); padding-bottom: .1em;
}
.nav__logo { gap: 10px; font: 400 22px/1 var(--toon); letter-spacing: .01em; }
.logo-mark { width: 40px; height: auto; fill: var(--copper); flex: none; }

/* chunky buttons that press down, as on the client's own page */
.btn.btn--primary {
  background: var(--copper); color: #1a0a03; border: 0; border-radius: 999px;
  font: 400 18px/1 var(--toon); letter-spacing: .02em; box-shadow: 0 4px 0 var(--copper-deep);
  transition: transform .15s, box-shadow .15s, background-color .15s;
}
.btn.btn--primary:hover { background: var(--copper-hi); transform: translateY(2px); box-shadow: 0 2px 0 var(--copper-deep); }
.btn.btn--primary:active { transform: translateY(4px); box-shadow: 0 0 0 var(--copper-deep); }
.btn.btn--primary .m-arrow { display: none; }

/* stickers: the salon's short lines, slapped on at an angle */
.stickers { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.sticker {
  display: inline-block; padding: 8px 16px 9px; border-radius: 999px; font: 400 17px/1 var(--toon); letter-spacing: .02em;
  background: var(--copper); color: #1a0a03; box-shadow: 0 3px 0 var(--copper-deep); transform: rotate(-4deg); white-space: nowrap;
}
.sticker--cream { background: var(--cream); color: #171412; box-shadow: 0 3px 0 #b9ad9e; transform: rotate(3deg); }

/* placeholder marking (brief: stand-in photographs marked clearly) */
.ph { position: relative; }
.ph::after {
  content: "Placeholder photo"; position: absolute; right: 8px; bottom: 8px; z-index: 2;
  padding: 4px 10px; font: 500 13px/20px var(--font-text); color: #fff; background: rgb(15 13 12 / .8); border-radius: 2px;
  pointer-events: none;
}
.pl-photo img, .float img { border-radius: 18px; }

/* ---------- the hero, laid out as on the client's cartoon-barber page: the barber on a copper glow in front of a huge BONN ---------- */
main > section.sb-hero {
  --fs: clamp(5rem, 34vw, 36rem); --pad: clamp(8px, 2vw, 28px); --lift: .1;
  --ih: min(calc(100svh - 120px - var(--fs) * var(--lift)), 125vw, 820px); --iw: calc(var(--ih) * .77);
  position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav) + var(--s-5)) 0 var(--pad); overflow: hidden;
}
@media (max-width: 700px) { main > section.sb-hero { --lift: .5; --ih: min(calc(100svh - 370px - var(--fs) * var(--lift)), 125vw); } }
main > section.sb-hero > .wrap.sb-hero__top { position: relative; z-index: 5; display: flex; flex-direction: row; height: auto; flex: none; justify-content: space-between; align-items: flex-start; gap: var(--s-6); }
.sb-hero__top h1 { margin: 0; max-width: 15ch; font-size: clamp(22px, 2.3vw, 34px); line-height: 1.1; letter-spacing: -0.03em; }
.sb-hero__side { display: grid; gap: var(--s-3); justify-items: end; text-align: right; }
.sb-hero__meta { margin: 0; color: var(--p-muted); font-size: 15px; }
.sb-hero__meta b { display: block; color: var(--cream); font-weight: 500; }
.barber__glow { position: absolute; z-index: 0; left: 50%; bottom: calc(var(--pad) + var(--fs) * var(--lift) - var(--ih) * .09); width: calc(var(--ih) * 1.15); aspect-ratio: 1; margin-left: calc(var(--ih) * -.575); background: radial-gradient(closest-side, rgb(229 115 60 / .5), rgb(229 115 60 / .16) 55%, transparent 75%); transition: opacity .9s .1s; }
.barber__floor { position: absolute; z-index: 1; left: 50%; bottom: calc(var(--pad) + var(--fs) * var(--lift) - var(--ih) * .03); width: calc(var(--iw) * .9); height: calc(var(--ih) * .1); margin-left: calc(var(--iw) * -.48); background: radial-gradient(closest-side, rgb(0 0 0 / .72), rgb(0 0 0 / .25) 60%, transparent); filter: blur(4px); transition: opacity .6s .4s; }
.barber { position: absolute; z-index: 1; left: 50%; bottom: calc(var(--pad) + var(--fs) * var(--lift)); height: var(--ih); width: var(--iw); margin-left: calc(var(--iw) * -.5); transition: transform .8s cubic-bezier(.3,1.35,.5,1) .05s, opacity .4s .05s; }
.barber__bob { width: 100%; height: 100%; }
.barber__img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 22px rgb(0 0 0 / .5)); }
@media (prefers-reduced-motion: no-preference) { .barber__bob { animation: bob 6s ease-in-out 1.2s infinite alternate; } }
@keyframes bob { to { transform: translateY(-10px); } }
.sticker--hero { position: absolute; z-index: 5; right: 8%; top: 42%; font-size: clamp(16px, 1.6vw, 22px); transition: opacity .3s .9s; }
.wordmark { position: relative; z-index: 2; margin: 0; display: grid; grid-template-columns: max-content; justify-content: center; font: 400 var(--fs)/.8 var(--toon); letter-spacing: .01em; text-align: center; }
.wordmark__s { display: block; grid-row: 1; grid-column: 1; position: relative; z-index: 2; font: 400 .27em/.8 var(--toon); color: #ffe8d2; text-shadow: var(--ext); text-align: left; margin: 0 0 -.26em .1em; transition: opacity .4s .5s; }
.wordmark__w { grid-row: 2; grid-column: 1; display: flex; justify-content: center; overflow: hidden; padding-top: .04em; padding-bottom: .1em; }
.wordmark__w span { display: inline-block; color: var(--copper-hi); text-shadow: var(--ext); transition: transform .75s cubic-bezier(.2,.8,.3,1.15) calc(var(--i) * .06s + .05s); }
.wordmark__stache { display: block; position: relative; grid-row: 1; grid-column: 1; align-self: end; justify-self: start; z-index: 2; width: .56em; margin: 0 0 -.14em calc(50% + .62em); fill: #ffe8d2; filter: drop-shadow(0 .012em 0 var(--copper-deep)); transform: rotate(-8deg); transition: transform .8s cubic-bezier(.3,1.5,.5,1) .5s, opacity .3s .5s; }
/* held back while the loader plays; it lets go of html.sb-loading as the page opens */
html.sb-loading .barber { transform: translateY(50px) scale(.72); opacity: 0; }
html.sb-loading :is(.barber__glow, .barber__floor, .sticker--hero, .wordmark__s) { opacity: 0; }
html.sb-loading .wordmark__w span { transform: translateY(105%); }
html.sb-loading .wordmark__stache { transform: translateY(-.25em) rotate(-8deg); opacity: 0; }
@media (max-width: 639px) {
  main > section.sb-hero > .wrap.sb-hero__top { flex-direction: column; justify-content: flex-start; gap: var(--s-4); min-height: 0; }
  .sb-hero__side { justify-items: stretch; text-align: left; width: 100%; }
  .sb-hero__side .btn { width: 100%; }
  .sticker--hero { display: none; }
}

/* ---------- grounds ---------- */
.band-cream {
  --bg: var(--p-inv-bg); --surface: var(--p-inv-surface); --ink: var(--p-inv-ink); --muted: var(--p-inv-muted);
  --action: var(--copper); --line: rgb(23 20 18 / .14); --line-strong: rgb(23 20 18 / .3);
  background: var(--cream); color: #171412;
}
.band-cream h2::after { color: #b4521f; }

/* visit */
.visit--card { border: 1px solid var(--line); padding: var(--s-6) !important; }
.visit .stickers { margin-bottom: var(--s-2); }
.visit__lede { margin: 0; line-height: 1.5; max-width: 44ch; }

/* prices: two groups side by side; rows answer the pointer with a copper sweep */
.price-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.price-groups .t-label { margin: 0 0 var(--s-3); }
.price-groups .rows { margin: 0; padding: 0; list-style: none; }
.rows > li { position: relative; }
.rows__name { font: 700 19px/1.3 var(--font-display); letter-spacing: -0.01em; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.rows__value { font-weight: 600; }
.rows > li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--copper); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) and (pointer: fine) { .rows > li:hover::after { transform: scaleX(1); } .rows > li:hover .rows__name { transform: translateX(8px); } }
@media (max-width: 639px) { .price-groups { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }

/* the parallax stage beside the prices: two crops of the room and the razor at three depths */
.stage { position: relative; height: min(560px, 62svh); }
.float { position: absolute; left: var(--fx); top: var(--fy); width: var(--fw); margin: 0; will-change: transform; }
.float img { display: block; width: 100%; aspect-ratio: var(--fr); object-fit: cover; }
.float--cut img { object-fit: contain; border-radius: 0; filter: drop-shadow(0 24px 24px rgb(23 20 18 / .35)); }
.float:nth-of-type(1) { z-index: 1; } .float:nth-of-type(2) { z-index: 2; } .float:nth-of-type(3) { z-index: 3; }
.stage .park { position: absolute; left: 14%; top: 22%; width: 1px; height: 1px; }
@media (max-width: 1023px) { .stage { height: 440px; margin-top: var(--s-6); } }
@media (max-width: 639px) { .stage { height: 380px; } .stage .float:nth-of-type(3) { --fx: 46% !important; --fw: 52% !important; --fy: 62% !important; } }

/* grooms */
#grooms .section-head { max-width: none; gap: var(--s-3); }
#grooms h2 { font-size: clamp(30px, 3vw, 44px); }
.pair { align-items: start; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li > p { margin: 0; color: var(--p-muted); }
.steps li:not(:last-child) .rows__name::before { counter-increment: step; content: counter(step); display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 10px; border-radius: 50%; background: var(--copper); color: #1a0a03; font: 400 16px/1 var(--toon); vertical-align: 2px; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.pair .pl-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.pair .pl-photo:nth-child(2) { margin-top: var(--s-8); }
@media (max-width: 1023px) { .pair { margin-top: var(--s-6); } .pair .pl-photo:nth-child(2) { margin-top: 0; } }

/* the tour: the walk-through film; with the motion layer the scroll plays it */
.tour .section-head--row { align-items: start; }
.tour__view { position: relative; flex: 1 1 0; min-height: 0; border-radius: 28px; overflow: hidden; }
.tour__video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.tour__bar { display: none; }
html.sb-motion .tour__bar { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgb(243 235 225 / .2); }
html.sb-motion .tour__bar > i { display: block; height: 100%; width: 100%; background: var(--copper); transform-origin: left; transform: scaleX(var(--tp, 0)); }
.tour .park { position: absolute; right: 6%; bottom: 14%; width: 1px; height: 1px; }
/* the pin wraps #inside in a spacer, so it loses the kit's main > section rules: restate them */
#inside { box-sizing: border-box; height: 100vh; height: 100svh; padding: var(--padt) 0 calc(var(--padb) + var(--bar)); position: relative; }
#inside > .wrap { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; }
@media (max-width: 639px) { #inside { height: auto; min-height: 100svh; } .tour__view { flex: none; aspect-ratio: 9 / 12; } }

/* booking */
.book { background: var(--p-surface); border: 1px solid var(--line); border-radius: 24px; padding: var(--s-7); align-self: stretch; }
.book__go { position: relative; align-items: center; }
.book > .t-small { max-width: 24ch; }
.park--btn { position: absolute; width: 1px; height: 1px; }
.field :is(input, select) { background: var(--black); color: var(--cream); border-radius: 12px; }
@media (max-width: 639px) { .book { padding: var(--s-5); } .book__go .btn { width: 100%; } }
@media (max-width: 1023px) { #book .pl-photo { margin-top: var(--s-6); } }

/* footer: the name set wide in copper */
.footer { border-top: 0; }
.footer__address, #contact .hours { margin: 0; }
.footer__address a { text-decoration: none; }
.footer__address a:hover { color: var(--copper); }
.footer__name { margin: var(--s-7) 0 0; font: 400 min(17vw, 240px)/.85 var(--toon); letter-spacing: .005em; white-space: nowrap; color: var(--copper-hi); text-shadow: var(--ext); }

/* ---------- the motion layer (html.sb-motion: GSAP loaded, motion allowed) ---------- */
/* the tape: a copper ribbon printed with the salon's lines, sliding with the scroll; the scissors cut it in half */
.tape { display: none; }
html.sb-motion .tape {
  display: block; position: absolute; z-index: 2; pointer-events: none;
  left: var(--gut); right: var(--gut); top: calc(var(--padt) / 2 - var(--tape-h) / 2); height: var(--tape-h);
  transform: rotate(-1.2deg);
}
html.sb-motion .tape > i { position: absolute; left: 0; right: 0; display: block; overflow: hidden; }
html.sb-motion .tape__a, html.sb-motion .tape__b { height: 50%; background: var(--copper); }
html.sb-motion .tape__a { top: 0; border-radius: 6px 6px 0 0; }
html.sb-motion .tape__b { bottom: 0; border-radius: 0 0 6px 6px; box-shadow: 0 4px 0 var(--copper-deep); }
html.sb-motion .tape__line { top: calc(50% - 1px); height: 2px; overflow: visible; background: repeating-linear-gradient(90deg, #1a0a03 0 8px, transparent 8px 14px); opacity: .55; }
.tape__txt {
  position: absolute; left: 0; top: 0; height: var(--tape-h); white-space: nowrap;
  font: 400 calc(var(--tape-h) * .52)/var(--tape-h) var(--toon); color: #1a0a03; letter-spacing: .02em;
  transform: translateX(var(--mx, 0px));
}
.tape__b .tape__txt { top: calc(var(--tape-h) / -2); }
.tape__txt:nth-child(even) { transform: translateX(calc(-1 * var(--mx, 0px) - 900px)); }
html.sb-motion .tape:nth-of-type(n) { transform: rotate(-1.2deg); }
#services .tape, #book .tape { transform: rotate(1.2deg) !important; }

/* the hero ribbon: wraps the shop's name until the scissors cut it open; the seam runs under the letters */
.ribbon-host { position: relative; }
html.sb-motion .ribbon-host { padding-bottom: 46px; }
html.sb-motion .tape--ribbon { left: -18px; right: -18px; top: -6px; bottom: 0; height: auto; transform: rotate(-1.5deg); }
html.sb-motion .tape--ribbon .tape__a {
  height: calc(100% - 22px);
  background: repeating-linear-gradient(-45deg, var(--copper) 0 26px, #d8662f 26px 52px);
}
html.sb-motion .tape--ribbon .tape__a .tape__txt { position: relative; display: block; height: var(--tape-h); }
html.sb-motion .tape--ribbon .tape__b { height: 14px; }
html.sb-motion .tape--ribbon .tape__line { top: calc(100% - 19px); }

/* the scissors: the SVG layer sets the size and is the fallback; the chrome WebGL copy replaces its look */
.scissors { display: none; }
html.sb-motion .scissors {
  display: block; position: fixed; left: 0; top: 0; z-index: 9; pointer-events: none;
  width: var(--sc-w, 196px); transform-origin: 35% 50%; will-change: transform; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .4));
}
html.sb-3d .scissors { visibility: hidden; }
.scissors svg { display: block; width: 100%; height: auto; overflow: visible; }
.blade__steel { fill: #e4e2df; stroke: #3a3632; stroke-width: 1.4; stroke-linejoin: round; }
.blade__edge { stroke: #fff; stroke-width: 1.2; opacity: .9; }
.handle__shank { stroke: #c9c5c0; stroke-width: 7; stroke-linecap: round; fill: none; }
.handle__ring { fill: none; stroke: #c9c5c0; stroke-width: 6.5; }
.pivot { fill: var(--copper); stroke: #fff; stroke-width: 1.5; }
.scissors3d { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9; pointer-events: none; filter: drop-shadow(0 12px 14px rgb(0 0 0 / .45)); }
@media (max-width: 1023px) { html.sb-motion .scissors { --sc-w: 124px; } }
@media (max-width: 639px) { html.sb-motion .scissors { --sc-w: 92px; } :root { --tape-h: 44px; } html.sb-motion .ribbon-host { padding-bottom: 36px; } }

@media (prefers-reduced-motion: reduce) {
  html.sb-motion .scissors, html.sb-motion .tape, .scissors3d { display: none; }
  .btn.btn--primary, .rows > li::after, .rows__name { transition: none; }
}

/* ---------- the loader, from the client's cartoon-barber page ---------- */
#ld, #ring { --ink: var(--black); --line: #2c2824; --mute: var(--p-muted); --sand: var(--cream); --cu: var(--copper); --body: var(--font-text); }
html:not(.sb-loading) #ld:not(.go) { display: none; }
html.sb-loading { overflow: hidden; }
/* loader */
#ld{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(2px,1.2vh,12px);cursor:default}
#ld::before,#ld::after{content:"";position:absolute;top:0;bottom:0;width:calc(50% + 1px);background:var(--ink)}
#ld::before{left:0}#ld::after{right:0}
.scene{position:relative;z-index:1;width:min(80vw,54svh,440px);aspect-ratio:400/460;transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
#stg{display:block;width:100%;height:100%;overflow:visible}
#stg *{transform-box:view-box}
#rig{transform-origin:200px 430px}
#head{transform-origin:200px 196px}
#pedal{transform-origin:211px 380px}
#stg #pup{transform-box:fill-box;transform-origin:50% 50%}
#stg #grin{transform-box:fill-box;transform-origin:50% 0}
#stg #pup circle{transform-box:fill-box;transform-origin:50% 50%}
#stg #lids ellipse{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0)}
#stg .spk path,#stg .madi,#stg #smile,#stg #ohh{transform-box:fill-box;transform-origin:50% 50%}
.spk path,.madi{transform:scale(0)}
#ohh{opacity:0}
.bl{transform:rotate(14deg)}
.ting{position:absolute;z-index:2;font:400 clamp(1.7rem,6.5vw,2.9rem)/1 var(--toon);color:#ffe8d2;text-shadow:var(--ext);opacity:0;pointer-events:none;white-space:nowrap}
#lname{position:relative;z-index:1;display:flex;overflow:hidden;padding:.1em .05em .2em;font:400 clamp(1.8rem,7vw,3.4rem)/1.05 var(--toon);color:#ffe8d2;text-shadow:var(--ext);transition:opacity .35s,transform .45s}
#lname span{display:inline-block;transform:translateY(115%);animation:up .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i)*.05s + .3s)}
@keyframes up{to{transform:none}}
#skip{position:absolute;z-index:4;right:clamp(20px,4vw,56px);bottom:calc(24px + env(safe-area-inset-bottom,0px));background:none;border:1px solid var(--line);border-radius:99px;padding:.45em 1.15em;color:var(--mute);font:500 .9rem var(--body);cursor:pointer;opacity:0;animation:fin .4s .7s forwards;transition:color .2s,border-color .2s}
#skip:hover{color:var(--sand);border-color:var(--mute)}
#skip:focus-visible{outline:2px solid var(--cu);outline-offset:3px}
#ld.go #skip{opacity:0!important;pointer-events:none}
@keyframes fin{to{opacity:1}}
#vig{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 45%,transparent 42%,rgba(0,0,0,.62) 100%);animation:fin 1s .2s forwards}
#ring{position:fixed;left:50%;top:50%;z-index:71;width:0;height:0;border-radius:50%;border:3px solid #ffb27a;box-shadow:0 0 36px 6px rgba(229,115,60,.75),inset 0 0 36px 6px rgba(229,115,60,.5);transform:translate(-50%,-50%);pointer-events:none;opacity:0}
#ld.hole{-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent var(--r),#000 calc(var(--r) + 6px));mask-image:radial-gradient(circle at 50% 50%,transparent var(--r),#000 calc(var(--r) + 6px))}

/* one booking button per screen: from 640px the bar's button is in view, so the hero drops its copy */
@media (min-width: 640px) { .sb-hero__side .btn-row { display: none; } }

/* a heading set in the toon face (one style per section) */
.section-head .statement--h2, .statement--h2 { font-size: clamp(40px, 4.4vw, 68px); line-height: .95; }

/* the price lists and the form stack before they get cramped */
@media (max-width: 1199px) { .price-groups { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }
@media (max-width: 1099px) { .form.book { grid-template-columns: minmax(0, 1fr); } }

/* the bar's booking button steps aside while the booking form is on screen */
.nav__actions .btn { transition: opacity .25s, visibility .25s; }
html.at-book .nav:not(.is-open) .nav__actions .btn { opacity: 0; visibility: hidden; }

/* the phone menu: hours, the street and Facebook under the links */
.nav__extra { display: none; }
@media (max-width: 1023px) {
  .nav.is-open .nav__extra { display: grid; gap: var(--s-3); padding-top: var(--s-6); color: var(--p-muted); }
  .nav__extra p { margin: 0; }
  .nav__extra b { display: block; color: var(--cream); font-weight: 500; }
  .nav__extra .link { justify-self: start; color: var(--cream); }
}
@media (max-width: 1099px) { #book .grid--top > * { grid-column: 1 / -1; } }
/* the price section holds one screen: its content sits in the middle of it, not on top of an empty band */
@media (min-width: 640px) { main > #services > .wrap { display: flex; flex-direction: column; justify-content: center; } }