/* Hair Base home page. An old shop wall: glazed tile, brass fittings, a mirror that shows the next free chair. */
/* Fonts are bundled with the theme (SIL Open Font License), so the page needs no outside font service. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/bricolage-grotesque-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+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hind Siliguri"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/hind-siliguri-bengali-400-normal.woff2") format("woff2"); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1; }
@font-face { font-family: "Hind Siliguri"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/hind-siliguri-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hind Siliguri"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/hind-siliguri-bengali-500-normal.woff2") format("woff2"); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1; }
@font-face { font-family: "Hind Siliguri"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/hind-siliguri-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hind Siliguri"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/hind-siliguri-bengali-600-normal.woff2") format("woff2"); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1; }
@font-face { font-family: "Hind Siliguri"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/hind-siliguri-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
	--enamel: #0f2c2e; --deep: #08191b; --tile: #e6ece7; --paper: #f9faf6;
	--brass: #d1a14a; --brass-dk: #a97f2e; --stamp: #9a3a2e;
	--text: #1b2b2c; --muted: #526466; --line: #cbd6cf; --glaze: #dbe6df;
	--display: "Bricolage Grotesque", "Hind Siliguri", system-ui, sans-serif;
	--body: "Hind Siliguri", system-ui, -apple-system, "Segoe UI", sans-serif;
	--tiles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.06'%3E%3Cpath d='M0 .5H96M0 24.5H96M.5 0V24M48.5 24V48'/%3E%3C/g%3E%3C/svg%3E");
}
body.hb-site { margin: 0; background: var(--paper); color: var(--text); font: 400 17px/1.65 var(--body); -webkit-font-smoothing: antialiased; }
.hb-site *, .hb-site *::before, .hb-site *::after { box-sizing: border-box; }
:where(.hb-site) a { color: inherit; }
.hb-site :focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
.hb-wrap { width: min(1160px, 100% - 40px); margin-inline: auto; }
.hb-skip { position: absolute; left: -999px; top: 8px; background: var(--paper); color: var(--enamel); padding: 8px 14px; z-index: 100; }
.hb-skip:focus { left: 8px; }
.hb-site h1, .hb-site h2, .hb-site h3 { font-family: var(--display); font-optical-sizing: auto; font-weight: 800; letter-spacing: -.025em; margin: 0; }
.hb-site p { margin: 0; }

/* buttons */
.hb-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border: 2px solid transparent; border-radius: 999px; font: 600 17px/1 var(--body); text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.hb-btn-brass { background: var(--brass); color: var(--deep); }
.hb-btn-brass:hover { background: #e0b35e; }
.hb-btn-line { border-color: rgba(230, 236, 231, .5); color: var(--tile); }
.hb-btn-line:hover { border-color: var(--tile); background: rgba(230, 236, 231, .1); }
.hb-btn-ink { background: var(--enamel); color: var(--paper); }
.hb-btn-ink:hover { background: #17484b; }
.hb-btn[disabled] { opacity: .6; cursor: progress; }

/* header */
.hb-head { position: sticky; top: 0; z-index: 50; background: var(--deep); color: var(--tile); border-bottom: 1px solid rgba(209, 161, 74, .35); }
.hb-head-in { display: flex; align-items: center; gap: 24px; min-height: 66px; }
.hb-brand { min-width: 0; display: flex; align-items: center; gap: 10px; margin-right: auto; font: 800 19px/1.15 var(--display); letter-spacing: -.01em; text-decoration: none; }
.hb-brand img { border-radius: 50%; object-fit: cover; }
.hb-nav { display: none; gap: 26px; }
.hb-nav a { text-decoration: none; font-weight: 500; opacity: .8; }
.hb-nav a:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 7px; text-decoration-thickness: 2px; }
.hb-head-cta { flex: none; white-space: nowrap; min-height: 42px; padding: 0 20px; font-size: 16px; background: var(--brass); color: var(--deep); }
.hb-head-cta:hover { background: #e0b35e; }
@media (min-width: 860px) { .hb-nav { display: flex; } }

/* hero */
.hb-hero { background: var(--enamel) var(--tiles); color: var(--paper); overflow: hidden; }
.hb-hero-in { display: grid; gap: 56px; padding-block: 52px 80px; align-items: center; }
.hb-h1 { font-size: clamp(2.7rem, 8.6vw, 5.6rem); line-height: .98; margin-bottom: 30px !important; }
.hb-h1 span { display: block; }
.hb-status { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-bottom: 4px !important; font-size: 18px; }
.hb-status span:last-child { opacity: .75; }
.hb-dot { width: 12px; height: 12px; border-radius: 50%; background: #8aa0a0; flex: none; }
.is-open .hb-dot { background: #46d28a; box-shadow: 0 0 0 4px rgba(70, 210, 138, .22); }
.hb-where { margin-bottom: 30px !important; opacity: .8; max-width: 44ch; }
.hb-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* the mirror: next free chair */
.hb-mirror { position: relative; isolation: isolate; width: min(100%, 380px); min-height: 440px; margin-inline: auto; padding: 120px 34px 38px; border: 4px solid var(--brass); border-radius: 190px 190px 30px 30px; background: linear-gradient(165deg, #1a4a4c, #0b2224 70%); box-shadow: 0 0 0 10px var(--enamel), 0 0 0 12px rgba(209, 161, 74, .55), 0 40px 60px -24px rgba(0, 0, 0, .6); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.hb-mirror.has-img { min-height: 540px; background: linear-gradient(to top, rgba(8, 25, 27, .94) 38%, rgba(8, 25, 27, .1)), var(--hero-img) center / cover; }
.hb-mirror::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, .16) 48%, transparent 62%); transform: translateX(-130%); animation: hb-sheen 1.7s .5s ease-out 1 forwards; pointer-events: none; }
@keyframes hb-sheen { to { transform: translateX(130%); } }
.hb-mir-k { font-size: 17px; color: var(--brass); font-weight: 600; margin-bottom: 4px !important; }
.hb-mir-time { display: inline-flex; align-items: baseline; gap: 8px; align-self: flex-start; font: 800 clamp(3.6rem, 12vw, 5rem)/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; text-decoration: none; color: var(--paper); border-bottom: 3px solid transparent; }
.hb-mir-time:hover { border-color: var(--brass); }
.hb-mir-time small { font: 600 22px/1 var(--body); letter-spacing: 0; color: var(--brass); }
.hb-mir-day { font-size: 19px; margin: 6px 0 22px !important; opacity: .9; }
.hb-mir-more { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-mir-more a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border: 1.5px solid rgba(209, 161, 74, .65); border-radius: 999px; text-decoration: none; font-weight: 500; font-variant-numeric: tabular-nums; transition: background .15s, color .15s; }
.hb-mir-more a:hover { background: var(--brass); color: var(--deep); }
.hb-mir-none { font-size: 19px; max-width: 24ch; }
@media (min-width: 940px) { .hb-hero-in { grid-template-columns: 1.3fr .7fr; padding-block: 84px 100px; } .hb-mirror { margin-inline: 0 0; justify-self: end; } }
@media (prefers-reduced-motion: reduce) { .hb-mirror::after { animation: none; display: none; } }

/* sections */
.hb-sec { padding-block: 84px; }
.hb-h2 { font-size: clamp(2.1rem, 5.2vw, 3.3rem); line-height: 1; color: var(--enamel); margin-bottom: 18px !important; text-wrap: balance; }
.hb-lead { max-width: 56ch; margin-bottom: 14px !important; font-size: 18.5px; }
.hb-sub { margin-bottom: 40px !important; max-width: 56ch; color: var(--muted); }
.hb-hint, .hb-note { color: var(--muted); }
.hb-note { margin-top: 22px !important; }
.hb-pr { font: 800 26px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--enamel); white-space: nowrap; }
.hb-min { color: var(--muted); font-size: 15px; white-space: nowrap; }

/* price board */
.hb-board { background: var(--paper); }
.hb-picks { list-style: none; margin: 0 0 52px; padding: 0; display: grid; gap: 20px; }
.hb-pick { position: relative; display: flex; flex-direction: column; padding: 26px 26px 22px; background: var(--enamel); color: var(--paper); border-radius: 18px; -webkit-mask: radial-gradient(circle 11px at 0 62%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 62%, #0000 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 11px at 0 62%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 62%, #0000 98%, #000) right / 51% 100% no-repeat; }
.hb-pick h3 { font-size: 27px; line-height: 1.05; color: var(--paper); margin-bottom: 8px !important; }
.hb-pick > p { color: rgba(249, 250, 246, .8); margin-bottom: 18px !important; }
.hb-pick-foot { margin-top: auto; padding-top: 18px; border-top: 2px dashed rgba(209, 161, 74, .5); display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.hb-pick .hb-pr { color: var(--brass); font-size: 32px; }
.hb-pick .hb-min { color: rgba(249, 250, 246, .7); }
.hb-pick-go { margin-left: auto; align-self: center; font-weight: 600; color: var(--deep); background: var(--brass); padding: 9px 18px; border-radius: 999px; text-decoration: none; }
.hb-pick-go:hover { background: #e0b35e; }
@media (min-width: 760px) { .hb-picks { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }

.hb-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px 64px; }
.hb-menu li { padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
.hb-row { display: flex; align-items: baseline; gap: 12px; }
.hb-nm { font: 700 21px/1.2 var(--display); letter-spacing: -.01em; text-decoration: none; }
.hb-nm:hover { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.hb-lead-dots { flex: 1; border-bottom: 2px dotted rgba(27, 43, 44, .35); transform: translateY(-5px); min-width: 20px; }
.hb-ds { margin-top: 4px !important; color: var(--muted); font-size: 16px; }
@media (min-width: 860px) { .hb-menu { grid-template-columns: 1fr 1fr; } }

/* how booking works (a real sequence) */
.hb-steps-sec { background: var(--tile); padding-block: 34px; border-block: 1px solid var(--line); }
.hb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: s; }
.hb-steps li { counter-increment: s; display: flex; align-items: center; gap: 16px; font-weight: 500; }
.hb-steps li::before { content: counter(s); flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--enamel); color: var(--brass); font: 800 20px/1 var(--display); }
@media (min-width: 860px) { .hb-steps { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

/* shop */
.hb-about-in { display: grid; gap: 48px; align-items: start; }
.hb-facts { margin: 30px 0 0; display: grid; gap: 14px; }
.hb-facts div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.hb-facts dt { color: var(--muted); font-weight: 500; }
.hb-facts dd { margin: 0; font-weight: 500; }
.hb-facts a { text-underline-offset: 4px; text-decoration-color: var(--brass); text-decoration-thickness: 2px; }
.hb-hours { width: 100%; border-collapse: collapse; background: var(--enamel); color: var(--paper); border: 3px solid var(--brass); border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 7px var(--paper), 0 0 0 9px rgba(209, 161, 74, .5); }
.hb-hours caption { caption-side: top; text-align: left; padding: 20px 24px 8px; font: 800 24px/1 var(--display); letter-spacing: -.02em; background: var(--enamel); color: var(--paper); }
.hb-hours th, .hb-hours td { padding: 12px 24px; text-align: left; font-weight: 400; border-top: 1px solid rgba(255, 255, 255, .09); font-variant-numeric: tabular-nums; }
.hb-hours td { text-align: right; }
.hb-hours .is-today th, .hb-hours .is-today td { background: var(--brass); color: var(--deep); font-weight: 600; border-top-color: var(--brass); }
.hb-hours .is-off td { color: #f0a89c; }
@media (min-width: 900px) { .hb-about-in { grid-template-columns: 1.1fr .9fr; gap: 80px; } }

/* why */
.hb-why { background: var(--tile); }
.hb-why-list { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 28px 56px; }
.hb-why-list li { padding-left: 22px; border-left: 4px solid var(--brass); }
.hb-why-list h3 { font-size: 22px; margin-bottom: 4px !important; color: var(--enamel); }
.hb-why-list p { color: var(--muted); max-width: 40ch; }
@media (min-width: 760px) { .hb-why-list { grid-template-columns: repeat(3, 1fr); } }

/* loyalty */
.hb-loyal { background: var(--deep) var(--tiles); color: var(--paper); }
.hb-loyal .hb-h2 { color: var(--paper); }
.hb-loyal-in { display: grid; gap: 52px; align-items: center; }
.hb-ladder { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; max-width: 520px; }
.hb-ladder li { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: baseline; padding: 14px 18px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.hb-ladder b { font: 800 20px/1 var(--display); letter-spacing: -.01em; }
.hb-ladder span { color: rgba(249, 250, 246, .8); }
.hb-ladder .t-platinum b { color: #e6ecff; }
.hb-ladder .t-platinum { border-color: rgba(190, 205, 255, .6); }
.hb-ladder .t-silver b { color: #cfd8dc; }
.hb-ladder .t-gold b { color: var(--brass); }
.hb-ladder .t-gold { border-color: rgba(209, 161, 74, .7); }
.hb-member { position: relative; padding: 30px 30px 32px; border-radius: 22px; background: linear-gradient(150deg, #17484b, var(--enamel) 60%); border: 1.5px solid var(--brass); box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .7); max-width: 480px; width: 100%; justify-self: center; }
.hb-member-brand { font-size: 15px; color: var(--brass); font-weight: 600; margin-bottom: 26px !important; }
.hb-member h3 { font-size: 30px; line-height: 1; margin-bottom: 20px !important; }
.hb-member label { display: block; font-weight: 500; margin-bottom: 6px; }
.hb-inline { display: flex; gap: 10px; }
.hb-inline input { flex: 1; min-width: 0; }
#pts-out { margin-top: 20px; }
#pts-out:empty { margin: 0; }
#pts-out p { margin-top: 6px !important; color: rgba(249, 250, 246, .85); }
.hb-big { font: 800 76px/1 var(--display); letter-spacing: -.04em; color: var(--brass); font-variant-numeric: tabular-nums; }
.hb-big small { font: 600 20px/1 var(--body); letter-spacing: 0; color: var(--paper); margin-left: 8px; }
.hb-meter { height: 8px; margin-top: 12px; border-radius: 99px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.hb-meter i { display: block; height: 100%; background: var(--brass); border-radius: 99px; }
.hb-err { color: #ffc6bc !important; }
@media (min-width: 940px) { .hb-loyal-in { grid-template-columns: 1.1fr .9fr; gap: 80px; } .hb-member { justify-self: end; } }

/* booking */
.hb-book { background: var(--tile); }
.hb-book-in { display: grid; gap: 44px; align-items: start; }
.hb-ticket { position: relative; max-width: 420px; margin-top: 28px; padding: 22px 26px 18px; background: var(--paper); border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 18px 30px -22px rgba(15, 44, 46, .55); }
.hb-ticket::before, .hb-ticket::after { content: ""; position: absolute; top: 58%; width: 22px; height: 22px; border-radius: 50%; background: var(--tile); border: 1px solid var(--line); }
.hb-ticket::before { left: -12px; clip-path: inset(0 0 0 50%); }
.hb-ticket::after { right: -12px; clip-path: inset(0 50% 0 0); }
.hb-ticket-h { font: 800 20px/1 var(--display); letter-spacing: -.02em; margin-bottom: 14px !important; color: var(--enamel); }
.hb-ticket dl { margin: 0; display: grid; gap: 8px; padding-bottom: 18px; border-bottom: 2px dashed var(--line); }
.hb-ticket dl div { display: grid; grid-template-columns: 70px 1fr; gap: 10px; }
.hb-ticket dt { color: var(--muted); }
.hb-ticket dd { margin: 0; font-weight: 600; }
.hb-ticket dd.is-empty { color: #8a9a9a; font-weight: 400; }
.hb-ticket-foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 14px; font-weight: 600; }
#tk-price { font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--enamel); }
#tk-ref { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.hb-stamp { position: absolute; top: 14px; right: 20px; padding: 3px 12px; border: 3px solid var(--stamp); border-radius: 6px; color: var(--stamp); font: 800 20px/1.2 var(--display); transform: rotate(-9deg); opacity: 0; pointer-events: none; }
.hb-ticket.is-sent .hb-stamp { animation: hb-stamp .45s cubic-bezier(.2, .9, .3, 1.2) forwards; }
@keyframes hb-stamp { from { transform: rotate(-9deg) scale(1.5); opacity: 0; } to { transform: rotate(-9deg) scale(1); opacity: .92; } }
@media (prefers-reduced-motion: reduce) { .hb-ticket.is-sent .hb-stamp { animation: none; transform: rotate(-9deg); opacity: .92; } }

.hb-form { display: grid; gap: 18px; padding: 30px; background: var(--paper); border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 24px 40px -30px rgba(15, 44, 46, .6); }
.hb-form label, .hb-member label { display: block; font-weight: 600; }
.hb-form label > input, .hb-form label > select, .hb-form label > textarea { margin-top: 6px; }
.hb-form input, .hb-form select, .hb-form textarea, .hb-member input { display: block; width: 100%; min-height: 50px; padding: 11px 14px; font: 400 17px/1.4 var(--body); color: var(--text); background: #fff; border: 1.5px solid #a9b8b1; border-radius: 12px; }
.hb-member input { border-color: transparent; }
.hb-form input:focus, .hb-form select:focus, .hb-form textarea:focus, .hb-member input:focus { outline: 3px solid var(--brass); outline-offset: 1px; border-color: var(--enamel); }
.hb-two { display: grid; gap: 18px; }
@media (min-width: 560px) { .hb-two { grid-template-columns: 1fr 1fr; } }
.hb-opt { font-weight: 400; color: var(--muted); margin-left: 6px; }
.hb-slots { border: 0; margin: 0; padding: 0; min-width: 0; }
.hb-slots legend { font-weight: 600; padding: 0; margin-bottom: 8px; }
#book-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-chip { position: relative; display: inline-block; }
.hb-form .hb-chip { font-weight: 500; }
.hb-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0 !important; cursor: pointer; }
.hb-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid #a9b8b1; border-radius: 999px; background: #fff; font-variant-numeric: tabular-nums; transition: background .12s, color .12s; }
.hb-chip:hover span { border-color: var(--enamel); }
.hb-chip input:checked + span { background: var(--enamel); border-color: var(--enamel); color: var(--paper); }
.hb-chip input:focus-visible + span { outline: 3px solid var(--brass); outline-offset: 2px; }
.hb-submit { width: 100%; min-height: 56px; font-size: 18px; }
.hb-msg:empty { display: none; }
.hb-msg { padding: 14px 16px; border-radius: 12px; font-weight: 500; }
.hb-msg.is-ok { background: #dcefe3; color: #12452b; border: 1px solid #8fc6a5; }
.hb-msg.is-bad { background: #f7e0dc; color: #6e1f16; border: 1px solid #d8978c; }
.hb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 940px) { .hb-book-in { grid-template-columns: .85fr 1.15fr; gap: 72px; } .hb-book-side { position: sticky; top: 100px; } .hb-form { padding: 38px; } }

/* contact + footer */
.hb-contact { background: var(--enamel) var(--tiles); color: var(--paper); padding-block: 72px; }
.hb-contact .hb-h2 { color: var(--paper); }
.hb-contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 18px; }
.hb-contact-list a { text-underline-offset: 5px; text-decoration-color: var(--brass); text-decoration-thickness: 2px; }
.hb-foot { background: var(--deep); color: rgba(249, 250, 246, .75); padding-block: 22px; font-size: 15px; }
.hb-foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; }
.hb-foot a { text-underline-offset: 4px; }
.hb-plain { padding-block: 120px; }

/* phone action bar */
.hb-bar { color: var(--paper); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(8, 25, 27, .96); border-top: 1px solid rgba(209, 161, 74, .4); transition: transform .25s; }
.hb-bar .hb-btn { flex: 1; min-height: 48px; }
.hb-bar.is-hidden { transform: translateY(110%); }
@media (min-width: 860px) { .hb-bar { display: none; } }
@media (max-width: 859px) { body.hb-site { padding-bottom: 72px; } }
@media (prefers-reduced-motion: reduce) { .hb-bar { transition: none; } html { scroll-behavior: auto; } }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }

/* multi-service picker */
.hb-svcpick { border: 0; margin: 0; padding: 0; min-width: 0; }
.hb-svcpick legend { font-weight: 600; padding: 0; margin-bottom: 8px; }
.hb-svcpick #svc-filter { width: 100%; margin-bottom: 6px; }
.hb-dd { position: relative; }
.hb-dd-btn { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border: 1.5px solid #a9b8b1; border-radius: 12px; background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.hb-dd-btn::after { content: ""; flex: none; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.hb-dd.is-open .hb-dd-btn::after { transform: rotate(-135deg) translateY(-2px); }
.hb-dd-btn:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.hb-dd-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-dd-panel { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border: 1.5px solid #a9b8b1; border-radius: 12px; padding: 8px; box-shadow: 0 14px 30px rgba(10, 40, 34, .22); }
.hb-dd-panel[hidden] { display: none; }
.hb-svclist { max-height: 252px; overflow-y: auto; padding: 0; }
.hb-svc { display: block; position: relative; }
.hb-svc[hidden] { display: none; }
.hb-svc input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0 !important; cursor: pointer; }
.hb-svc span { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px 6px 40px; border-radius: 8px; position: relative; font-weight: 500; }
.hb-svc span::before { content: ""; position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 1.5px solid #6f857b; border-radius: 5px; background: #fff; }
.hb-svc b { font-weight: 500; }
.hb-svc em { font-style: normal; white-space: nowrap; font-variant-numeric: tabular-nums; opacity: .75; }
.hb-svc:hover span { background: #eef3f0; }
.hb-svc input:checked + span { background: #e3ede8; }
.hb-svc input:checked + span::before { background: var(--enamel); border-color: var(--enamel); }
.hb-svc input:checked + span::after { content: ""; position: absolute; left: 17px; top: 50%; width: 5px; height: 10px; margin-top: -7px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.hb-svc input:focus-visible + span { outline: 3px solid var(--brass); outline-offset: -2px; }