/*
 * workfol.io pages (R193 P3): the Default and Minimal templates of the old site (commit 9b61ec2), redrawn without a
 * framework. Tailwind's values are written out by hand. No inline styles anywhere: the per-page colours (the background and
 * each link's two colours) come in the page's one hashed <style> block.
 *
 * FONTS. Inter (OFL) is served from /_p/fonts. Clash Display, the old site's display face, is NOT shipped: its licence
 * (Fontshare's Free Font License) is unconfirmed for self-hosting (R193 P0 finding 10), and a page must never load a font
 * from another host. TODO(R193, owner): read license.txt in the Fontshare download; if self-hosting is allowed, add
 * clash-display-600.woff2 + clash-display-700.woff2 here (and their licence) and the @font-face below. Until then the display
 * text uses the local system stack.
 */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/_p/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/_p/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/_p/fonts/inter-700.woff2') format('woff2'); }
/* TODO(R193): @font-face { font-family: 'Clash Display'; font-weight: 600; src: url('/_p/fonts/clash-display-600.woff2') format('woff2'); } */

:root {
	--ink: #15192C;
	--muted: #64748B;
	--gray6: #4B5563;
	--line: #E5E7EB;
	--chip: #E9EDF0;
	--chip-more: #FFE5B1;
	--display: 'Clash Display', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
/* Nothing may make the page wider than the screen: a sideways shift would show the white body down one edge. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; margin: 0; font-family: var(--body); color: var(--ink); background: #FFFFFF; line-height: 1.5; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:target { scroll-margin-top: 6rem; }

.display { font-family: var(--display); word-spacing: 0.1em; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.tiny { font-size: 0.75rem; }
.italic { font-style: italic; }
.center { text-align: center; display: flex; justify-content: center; }
.ic { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.ic-s { width: 1rem; height: 1rem; }
.ic-l { width: 2.5rem; height: 2.5rem; }
.ic-xl { width: 4rem; height: 4rem; }

/* stars */
/* the old star-rating.tsx: 1.25rem stars, .25rem apart; fill and outline are the SVG's own attributes (icons.ts) */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.stars { display: inline-flex; gap: 0.25rem; vertical-align: middle; }
.star { width: 1.25rem; height: 1.25rem; }
/* Default's header draws them half as big again (scale-150) */
.stars-l { gap: 0.375rem; }
.stars-l .star { width: 1.875rem; height: 1.875rem; }

/* the round frame: the business logo, whole, on white (OD10), or its initial */
.logo { position: relative; margin: 0 auto; border-radius: 9999px; background: #FFFFFF; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.logo img { width: 80%; height: 80%; object-fit: contain; }
.logo.initial { background: #F1F5F9; color: var(--ink); font-family: var(--display); font-weight: 600; }
.logo-d { width: 8rem; height: 8rem; margin-top: 3rem; margin-bottom: 1.5rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.logo-d.initial { font-size: 3rem; }
.logo-m { width: 10rem; height: 10rem; border: 1px solid #F0F0F0; }
.logo-m.initial { font-size: 4rem; }

.pill { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 1rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; color: #FFFFFF; background: #000000; }
/* the old shimmer: a light band sweeping across the pill, once a second */
.pill::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent); transform: translateX(-100%); animation: wb-shimmer 1s infinite; pointer-events: none; }
@keyframes wb-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.pill-apprentice { background: #1D4ED8; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 400; background: var(--chip); color: var(--ink); white-space: nowrap; }
.chip-more { background: var(--chip-more); }

.meta { display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: var(--gray6); }

.btn-dark { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.5rem 1rem; border-radius: 0.5rem; background: #000000; color: #FFFFFF; font-weight: 600; }
.contact { display: flex; flex-direction: column; gap: 0.5rem; }

.tag { position: absolute; left: 0.5rem; bottom: 0.5rem; padding: 0.25rem 0.75rem; border-radius: 9999px; background: #0F172A; color: #FFFFFF; font-size: 0.875rem; font-weight: 400; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.pair figure { position: relative; }
.pair img { width: 100%; height: 8rem; object-fit: cover; border-radius: 0.5rem; background: #F3F4F6; }
@media (min-width: 768px) { .pair img { height: 12rem; } }

.video, .m-video { position: relative; display: block; overflow: hidden; background: #1F2937; }
.video { aspect-ratio: 16 / 9; border-radius: 0.5rem; }
.video img, .m-video img { width: 100%; height: 100%; object-fit: cover; }
.play { position: absolute; inset: 0; margin: auto; width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; }
.play svg { width: 1.5rem; height: 1.5rem; fill: #FFFFFF; }

/* the old floater: fixed bottom-left, black, rounded-lg, an orange glow turning round its 1px edge, a little bigger on hover */
.badge { position: fixed; bottom: 5vh; left: 1rem; z-index: 100; display: inline-flex; align-items: center; padding: 0.25rem 0.5rem; border-radius: 0.5rem; border: 1px solid transparent; background: #000000; color: #FFFFFF; font-size: 0.75rem; font-family: var(--display); word-spacing: 0.1em; transition: transform 0.3s; animation: wb-slide-up 0.5s ease-out; }
.badge:hover { transform: scale(1.1); }
@property --wb-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.glow { background: linear-gradient(#000000, #000000) padding-box, conic-gradient(from var(--wb-angle), transparent, orange 100%, transparent 20%) border-box; animation: wb-slide-up 0.5s ease-out, wb-rotate 3s linear infinite; }
@keyframes wb-rotate { to { --wb-angle: 360deg; } }
@keyframes wb-slide-up { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pill::before, .glow, .badge { animation: none; } }

.card { background: #FFFFFF; border-radius: 1rem; }
.prose { color: var(--gray6); display: flex; flex-direction: column; gap: 1rem; }
.prose ul, .prose ol { padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.more[open] > summary { display: none; }
.more-link { color: #3B82F6; }
.more-link:hover { text-decoration: underline; }

.review .rv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.rv-name { font-weight: 600; font-size: 1.125rem; }
.rv-body { margin-top: 1rem; font-size: 0.875rem; display: flex; flex-direction: column; gap: 0.5rem; }

.track { height: 0.5rem; border-radius: 9999px; background: #E5E7EB; overflow: hidden; }
.fill { height: 100%; border-radius: 9999px; }
.pc-0{width:0%}
.pc-5{width:5%}
.pc-10{width:10%}
.pc-15{width:15%}
.pc-20{width:20%}
.pc-25{width:25%}
.pc-30{width:30%}
.pc-35{width:35%}
.pc-40{width:40%}
.pc-45{width:45%}
.pc-50{width:50%}
.pc-55{width:55%}
.pc-60{width:60%}
.pc-65{width:65%}
.pc-70{width:70%}
.pc-75{width:75%}
.pc-80{width:80%}
.pc-85{width:85%}
.pc-90{width:90%}
.pc-95{width:95%}
.pc-100{width:100%}

/* --- Default -------------------------------------------------------------------------------------------------------- */
.d-bg { min-height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
/* the old .fixed-container: a fixed frame 95% wide (at most 1760px) with 2rem of the background always round it, its own scroll */
.d-card { position: fixed; top: 2rem; left: 50%; transform: translateX(-50%); width: 95%; max-width: 1760px; height: calc(100vh - 4rem); height: calc(100dvh - 4rem); overflow: hidden; background: #FFFFFF; border-radius: 1.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
.d-scroll { height: 100%; overflow-y: auto; scroll-behavior: smooth; }
.d-scroll::-webkit-scrollbar { width: 8px; }
.d-scroll::-webkit-scrollbar-track { background: #F1F1F1; border-radius: 4px; }
.d-scroll::-webkit-scrollbar-thumb { background: #888888; border-radius: 4px; }
.d-tabs { display: none; justify-content: flex-end; gap: 1rem; padding: 1.5rem 2rem; }
.d-tab { display: inline-flex; align-items: center; padding: 0.5rem 1.5rem; border-radius: 9999px; background: #000000; color: #FFFFFF; font-weight: 600; font-size: 0.875rem; border: 2px solid var(--line); }
.ic-tab { width: 1.25rem; height: 1.25rem; margin-right: 0.5rem; }
/* the active tab is white: Home until a section is the address's #fragment, then that section's (no script: :has + :target) */
.d-tab.d-tab-home, .d-card:has(#home:target) .d-tab.d-tab-home, .d-card:has(#about:target) .d-tab.d-tab-home { background: #FFFFFF; color: var(--ink); }
.d-card:has(:target) .d-tab.d-tab-home { background: #000000; color: #FFFFFF; }
.d-card:has(#work:target) .d-tab.d-tab-work, .d-card:has(#services:target) .d-tab.d-tab-services, .d-card:has(#qualifications:target) .d-tab.d-tab-qualifications, .d-card:has(#reviews:target) .d-tab.d-tab-reviews { background: #FFFFFF; color: var(--ink); }
/* the old mobile menu: a black square top-right of the frame, a white list of the sections under it */
.d-menu { position: absolute; top: 1rem; right: 1rem; z-index: 50; }
.d-menu > summary { display: flex; padding: 0.5rem; border-radius: 0.75rem; background: #000000; color: #FFFFFF; }
.d-menu > summary:hover { background: #1F2937; }
.d-menu-close, .d-menu[open] .d-menu-open { display: none; }
.d-menu[open] .d-menu-close { display: flex; }
.d-menu-open { display: flex; }
.d-menu-list { position: absolute; top: 3rem; right: 0; width: 12rem; background: #FFFFFF; border: 2px solid var(--line); border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); padding: 0.5rem 0; display: flex; flex-direction: column; }
.d-menu-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 600; }
.d-menu-item:hover { background: #F3F4F6; }
.d-menu-item.d-tab-home, .d-card:has(#home:target) .d-menu-item.d-tab-home, .d-card:has(#about:target) .d-menu-item.d-tab-home { background: #F3F4F6; font-weight: 700; }
.d-card:has(:target) .d-menu-item.d-tab-home { background: transparent; font-weight: 600; }
.d-card:has(#work:target) .d-menu-item.d-tab-work, .d-card:has(#services:target) .d-menu-item.d-tab-services, .d-card:has(#qualifications:target) .d-menu-item.d-tab-qualifications, .d-card:has(#reviews:target) .d-menu-item.d-tab-reviews { background: #F3F4F6; font-weight: 700; }
.d-cols { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem; }
.d-side { text-align: center; padding: 0 0.5rem; margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0; }
.d-name { font-size: 1.875rem; font-weight: 700; color: var(--ink); margin-bottom: 0.5rem; }
.d-side .center { margin-bottom: 1.5rem; }
.d-side .chips { margin-bottom: 1.5rem; }
.d-side .meta { margin-bottom: 0.5rem; }
.d-side .meta + .d-rating, .d-side .meta:last-of-type { margin-bottom: 1.5rem; }
.d-rating { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin: 1rem 0 2rem; }
.d-side .contact { margin-bottom: 1rem; }
.d-links { display: flex; flex-direction: column; gap: 1rem; }
.d-link { display: block; width: 100%; padding: 1rem; border-radius: 1rem; font-weight: 600; text-align: center; transition: transform 0.3s; }
.d-link:hover { transform: scale(1.05); }
.ic-link { width: 1.25rem; height: 1.25rem; }
.lk-in { display: inline-flex; align-items: center; gap: 0.5rem; }
.d-main { display: flex; flex-direction: column; }
.d-sec { margin-top: 5rem; }
.d-sec:first-child { margin-top: 2.5rem; }
.d-h2 { font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--ink); margin-bottom: 1rem; }
.d-rule { width: 10%; border-bottom: 4px solid #3B82F6; margin-bottom: 2.5rem; }
.d-sec .prose { padding-left: 1rem; }
.d-grid2 { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.d-sec .card { border: 2px solid var(--line); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); transition: transform 0.3s; }
.d-sec .card:hover { transform: scale(1.05); }
.d-service { padding: 1.5rem; display: flex; flex-direction: column; }
.d-service-head { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.d-service-icon { width: 40px; height: 40px; border-radius: 0.375rem; }
.d-service h3 { font-size: 1.25rem; font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.d-service-list { list-style: disc inside; padding: 0; margin-top: 1rem; display: flex; flex-direction: column; gap: 0.25rem; text-align: center; color: var(--gray6); font-size: 0.875rem; overflow-wrap: anywhere; }
.clamp4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.d-service-more[open] .clamp4 { display: block; -webkit-line-clamp: none; overflow: visible; }
.d-service-more .more-link { display: block; text-align: center; font-size: 0.875rem; margin-top: 0.25rem; }
.when-open, .d-service-more[open] .when-closed { display: none; }
.d-service-more[open] .when-open { display: inline; }
.d-work { overflow: hidden; display: flex; flex-direction: column; }
.d-work-head { padding: 1.5rem 1.5rem 1rem; }
.d-work-head h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-work-head .muted { font-weight: 300; margin-top: 0.25rem; }
.d-work .pair, .d-work .video { margin: 0 1.5rem; }
.d-work-foot { padding: 1rem; margin-top: auto; }
.d-cert { padding: 1.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; }
.d-cert .ic-xl { color: #3B82F6; margin-bottom: 0.5rem; }
.d-cert h3 { font-size: 1.125rem; font-weight: 600; }
.tag-green { display: inline-flex; padding: 0.25rem 0.75rem; border-radius: 9999px; background: #CDF0EC; color: #000000; border: 1px solid #39D2C0; font-size: 0.75rem; margin-top: 0.5rem; }
.d-summary { padding: 2rem 1.5rem 1.5rem; }
.d-score { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.d-big { font-size: 3rem; line-height: 1; }
.d-bars { display: flex; flex-direction: column; gap: 1rem; }
.d-bar-label { display: flex; justify-content: space-between; font-size: 0.875rem; margin-bottom: 0.25rem; }
.t-default .fill-orange { background: linear-gradient(to right, #FED7AA, #EA580C); }
.t-default .fill-green { background: linear-gradient(to right, #BBF7D0, #16A34A); }
.t-default .fill-blue { background: linear-gradient(to right, #BFDBFE, #2563EB); }
.d-reviews { margin-top: 3rem; gap: 2rem; }
.d-reviews .review { padding: 1.5rem; }
.d-foot { display: flex; align-items: center; justify-content: center; gap: 0.25rem; padding: 1rem; color: #9CA3AF; font-size: 0.75rem; text-align: center; }
@media (min-width: 768px) {
	.d-cols { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.d-side { grid-column: span 4 / span 4; padding: 0 2rem; margin-top: 5rem; }
	.d-main { grid-column: span 8 / span 8; }
	.d-grid2 { grid-template-columns: 1fr 1fr; margin: 0 1.25rem; }
	/* the old portfolio grid: one column at md, two from lg */
	.d-grid-work { grid-template-columns: 1fr; }
	.d-reviews { margin: 3rem 0 0; }
}
@media (min-width: 1024px) {
	.d-grid2 { margin: 0 2.5rem; }
	.d-grid-work { grid-template-columns: 1fr 1fr; }
	.d-reviews { margin: 3rem 0 0; }
	.d-tabs { display: flex; }
	.d-menu { display: none; }
}

/* --- Minimal -------------------------------------------------------------------------------------------------------- */
.m-bg { min-height: 100dvh; position: relative; }
.m-head { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
.m-head-in { max-width: 42rem; margin: 0 auto; padding: 1rem; display: flex; }
.m-nav { display: flex; flex: 1; align-items: center; justify-content: center; gap: 0.5rem; background: #FFFFFF; border: 2px solid #F5F5F5; border-radius: 0.75rem; padding: 0.5rem 1rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
.m-nav a { display: flex; padding: 0.5rem; border-radius: 9999px; color: #9CA3AF; }
.m-nav a:hover { background: #F3F4F6; color: #000000; }
.m-wrap { max-width: 42rem; margin: 0 auto; padding: 6rem 1rem; }
.m-card { background: #FFFFFF; border: 2px solid #F5F5F5; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); padding: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.m-hero { padding: 0 2rem 3rem; display: flex; flex-direction: column; gap: 2rem; }
.m-hero-row { display: flex; flex-direction: column; }
.m-hero-top { display: flex; flex-direction: column; align-items: center; gap: 2rem; padding: 1.5rem 0; }
.m-hero-text { display: flex; flex-direction: column; gap: 0.5rem; text-align: center; }
.m-name { font-size: 2.25rem; font-weight: 600; line-height: 1.15; }
.m-hero-text .chips { padding-bottom: 0.5rem; }
.m-round { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
.round { display: flex; padding: 0.5rem; border-radius: 9999px; background: #000000; color: #FFFFFF; transition: transform 0.2s; }
.round:hover { transform: scale(1.1); }
.round .ic { width: 1.25rem; height: 1.25rem; }
.m-place { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; color: var(--muted); }
.m-place-col { flex-direction: column; justify-content: center; margin-top: 1rem; }
.hours { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; border-radius: 9999px; background: #DCFCE7; color: #15803D; font-size: 0.875rem; }
.m-desktop { display: none; }
.m-mobile { display: flex; }
.m-card > .contact { padding: 0 2rem 1rem; align-items: center; }
.btn-wide { width: 90%; font-weight: 500; }
.m-videos { display: flex; gap: 1rem; overflow-x: auto; padding: 1.5rem 1rem; scroll-snap-type: x mandatory; scrollbar-width: none; }
.m-videos::-webkit-scrollbar { display: none; }
.m-video { flex: 0 0 auto; width: 200px; height: 100px; border-radius: 0.5rem; scroll-snap-align: start; }
.m-video .play { width: 2.5rem; height: 2.5rem; }
.m-box { background: #F5F5F5; border-radius: 0.75rem; padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.m-h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; font-weight: 500; color: var(--muted); }
.m-list { display: flex; flex-direction: column; gap: 0.5rem; }
.m-box .card { border: 1px solid #F0F0F0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); border-radius: 0.75rem; }
.m-score { padding: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 1rem; }
.m-big { font-size: 2.25rem; }
.m-cats { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.m-cat { padding: 1rem; border-radius: 0.75rem; border: 2px solid; display: flex; flex-direction: column; gap: 0.5rem; }
.m-cat-row { display: flex; align-items: center; justify-content: space-between; }
.m-cat-row p { font-size: 0.875rem; font-weight: 500; }
.m-cat-row span { font-size: 1.5rem; font-weight: 600; }
.m-cat-orange { background: linear-gradient(to bottom right, #FFF7ED, #FFEDD5); border-color: #FFEDD5; }
.m-cat-orange p { color: #7C2D12; } .m-cat-orange span { color: #C2410C; }
.m-cat-green { background: linear-gradient(to bottom right, #ECFDF5, #D1FAE5); border-color: #D1FAE5; }
.m-cat-green p { color: #064E3B; } .m-cat-green span { color: #047857; }
.m-cat-blue { background: linear-gradient(to bottom right, #EFF6FF, #DBEAFE); border-color: #DBEAFE; }
.m-cat-blue p { color: #1E3A8A; } .m-cat-blue span { color: #1D4ED8; }
.track-soft { background: rgba(255, 255, 255, 0.5); }
.t-minimal .fill-orange { background: linear-gradient(to right, #FB923C, #EA580C); }
.t-minimal .fill-green { background: linear-gradient(to right, #34D399, #059669); }
.t-minimal .fill-blue { background: linear-gradient(to right, #60A5FA, #2563EB); }
.m-review { padding: 1.5rem; }
.m-item, .m-service { padding: 1.5rem; }
.m-item-video { display: block; }
.m-thumb-video { background: #1F2937; display: flex; align-items: center; justify-content: center; }
.ic-video { width: 2rem; height: 2rem; color: #E5E7EB; }
.m-cert { padding: 1rem; }
.m-cert-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.m-cert-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.m-cert h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-cert-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; padding-top: 1rem; }
.badge-blue, .badge-amber { display: inline-flex; padding: 0.125rem 0.625rem; border-radius: 9999px; border: 1px solid; font-size: 0.75rem; font-weight: 600; }
.badge-blue { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }
.badge-amber { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }
.ic-tick { width: 1.25rem; height: 1.25rem; color: #16A34A; }
.m-service { padding: 1rem; }
.m-item-row { display: flex; flex-direction: column; gap: 1.5rem; }
.m-thumb { width: 100%; height: 6rem; border-radius: 0.5rem; overflow: hidden; background: #F3F4F6; flex-shrink: 0; }
.m-thumb img { width: 100%; height: 100%; object-fit: cover; }
.m-item-text { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }
.m-item h3, .m-cert h3 { font-size: 1.125rem; font-weight: 500; }
.m-pair { margin-top: 1rem; }
.m-desc { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.m-service-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.m-service h3 { font-size: 1rem; font-weight: 400; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0.25rem; }
.m-service[open] .clamp2 { display: none; }
.m-service[open] .chev { transform: rotate(90deg); }
.chev { color: var(--muted); transition: transform 0.2s; }
.m-link { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.75rem; border-radius: 0.75rem; font-weight: 500; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.m-foot { padding: 1.5rem 1rem; text-align: center; }
.m-foot-link { text-decoration: underline; }
.m-foot-link:hover { color: var(--gray6); }
/* the active nav item: Home until a section is the #fragment, then that section's */
.m-nav .m-nav-top, .m-bg:has(#top:target) .m-nav .m-nav-top { background: #F5F5F5; color: #000000; }
.m-bg:has(:target) .m-nav .m-nav-top { background: transparent; color: #9CA3AF; }
.m-bg:has(#about:target) .m-nav .m-nav-about, .m-bg:has(#work:target) .m-nav .m-nav-work, .m-bg:has(#reviews:target) .m-nav .m-nav-reviews, .m-bg:has(#services:target) .m-nav .m-nav-services, .m-bg:has(#qualifications:target) .m-nav .m-nav-qualifications { background: #F5F5F5; color: #000000; }
@media (min-width: 640px) {
	.m-cats { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
	.m-head-in > .m-nav { flex: 0 1 auto; justify-content: flex-start; }
	.m-head-in { align-items: center; justify-content: space-between; background: #FFFFFF; border: 2px solid #F5F5F5; border-radius: 0.75rem; padding: 0.5rem 1rem; margin-top: 1rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); max-width: 40rem; }
	.m-head-in > .m-nav { background: transparent; border: 0; box-shadow: none; padding: 0; }
	.m-head-in > .m-desktop { display: flex; }
	.m-desktop { display: flex; }
	.m-mobile { display: none; }
	.m-hero { padding-top: 1.5rem; }
	.m-hero-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; }
	.m-hero-text { text-align: left; }
	.m-hero-text .chips, .m-round { justify-content: flex-start; }
	.m-item-row { flex-direction: row; }
	.m-thumb { width: 8rem; }
}

/* --- the message pages ------------------------------------------------------------------------ */
.t-message { background: linear-gradient(to bottom, #FFC956, #FF9F4D); }
.msg { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.msg-card { background: #FFFFFF; border-radius: 1.5rem; padding: 2.5rem 2rem; max-width: 28rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.msg-card h1 { font-size: 1.5rem; font-weight: 700; }

/* --- R203 P6: the booking pages (/<u>/book…) ------------------------------------------------------------
   The shared booking steps (src/booking/views.ts) in this site's own dress: the business's background, a white card like the
   message pages', the round logo, Inter, the dark button the templates' contact buttons use (#000, 0.5rem), the chips' grey for
   quiet surfaces. Everything is under .t-book, so nothing here touches a business page (whose .pill is the shimmer pill). */
.t-book-plain .bg { background: linear-gradient(to bottom, #FFC956, #FF9F4D); }
.bk-bg { min-height: 100dvh; padding: 1.5rem 1rem 3rem; }
.bk-card { max-width: 32rem; margin: 0 auto; padding: 1.5rem 1.25rem; background: #FFFFFF; border-radius: 1.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; gap: 1.25rem; }
.bk-head { display: flex; align-items: center; gap: 0.75rem; }
.logo-b { width: 3rem; height: 3rem; margin: 0; border: 1px solid #F0F0F0; }
.logo-b.initial { font-size: 1.25rem; }
.bk-name { font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 640px) { .bk-bg { padding-top: 3rem; } .bk-card { padding: 2rem; } }
/* R203 P7: framed on the business's own website. No background, no screen-high page: the frame is as tall as the card (book.js tells the parent page),
   and the card wears a hairline instead of a shadow, so it reads on any background. */
.t-book-embed { background: transparent; }
.t-book-embed .bk-bg { min-height: 0; padding: 0.25rem; }
.t-book-embed .bk-card { box-shadow: none; border: 1px solid var(--line); }
@media (min-width: 640px) { .t-book-embed .bk-bg { padding: 0.25rem; } }

.t-book .icon { flex-shrink: 0; }
.t-book .wb-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.t-book .wb-body { font-size: 0.875rem; color: var(--gray6); }
.t-book .wb-row-title { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.t-book .wb-ui { font-size: 0.9375rem; font-weight: 600; }

.t-book .unlock { display: flex; flex-direction: column; gap: 1rem; }
.t-book .unlock form, .t-book .book form { display: contents; }
.t-book .unlock__title { font-family: var(--display); font-size: 1.5rem; font-weight: 700; line-height: 1.15; word-spacing: 0.1em; }
.t-book .unlock__lede { color: var(--gray6); }
.t-book .unlock__mono { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.t-book .unlock__status { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; }
.t-book .unlock__hint { color: var(--muted); font-size: 0.875rem; }
.t-book .unlock__links { display: flex; flex-direction: column; align-items: center; }
.t-book .unlock__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.5rem; color: var(--gray6); font-size: 0.875rem; text-decoration: underline; text-underline-offset: 3px; }
.t-book .unlock__art { display: flex; }
.t-book .art { display: block; width: 96px; height: auto; }
.t-book .art__ink { fill: #15192C; }
.t-book .art__accent { fill: #F2811E; }
.t-book .art__surface { fill: #FFFFFF; }

.t-book .btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; min-height: 48px; padding: 0.625rem 1rem; border: 1px solid transparent; border-radius: 0.5rem; font-family: var(--body); line-height: 1.2; text-align: center; cursor: pointer; -webkit-appearance: none; appearance: none; }
.t-book .btn .icon { width: 1rem; height: 1rem; }
.t-book .btn--primary { background: #000000; color: #FFFFFF; }
.t-book .btn--secondary { background: #FFFFFF; color: var(--ink); border-color: var(--line); }
.t-book .btn:hover { filter: brightness(0.96); }
.t-book .btn[aria-disabled='true'] { cursor: default; filter: none; color: var(--muted); }

/* the status pill: a dot and a tint, no shimmer */
.t-book .pill { overflow: visible; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; color: var(--ink); background: var(--chip); }
.t-book .pill::before { content: ''; position: static; inset: auto; width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: var(--pill-dot, var(--muted)); transform: none; animation: none; }
.t-book .pill--overdue { --pill-dot: #DC2626; background: #FEE2E2; }
.t-book .pill--ok { --pill-dot: #16A34A; background: #DCFCE7; }
.t-book .pill--wait { --pill-dot: #D97706; background: #FEF3C7; }

.t-book .box { background: #FFFFFF; border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; }
.t-book .rows { padding: 0; list-style: none; }
.t-book .rows li + li { border-top: 1px solid var(--line); }
.t-book .row { display: flex; align-items: center; gap: 0.875rem; min-height: 56px; padding: 0.5rem 1rem; }
.t-book a.row:hover { background: #F8FAFC; }
.t-book .row__text { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.t-book .row__text .wb-row-title { overflow-wrap: anywhere; }
.t-book .book__pick .icon:last-child { margin-left: auto; color: var(--muted); }
.t-book .book__summary .row { min-height: 52px; }
.t-book .book__value { white-space: pre-line; }
.t-book .book__step { color: var(--muted); }
.t-book .book__inline { display: inline; min-height: 0; padding: 0 0 0 0.25rem; }
.t-book button.book__linkbtn { background: none; border: 0; font: inherit; font-size: 0.875rem; cursor: pointer; -webkit-appearance: none; appearance: none; }
.t-book .book__check { min-height: 65px; }
/* the honeypot: off screen, never display:none (some bots skip hidden fields) */
.t-book .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.t-book .field { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.625rem 0.875rem; background: #FFFFFF; border: 1px solid var(--line); border-radius: 0.75rem; }
.t-book .field:focus-within { border-color: var(--ink); }
.t-book .field__label { font-size: 0.6875rem; }
.t-book .field__input { width: 100%; min-height: 28px; padding: 0.125rem 0; background: transparent; border: 0; color: var(--ink); font-family: var(--body); font-size: 1rem; font-weight: 600; outline: none; }
.t-book .field__area { min-height: 72px; resize: vertical; font-weight: 400; line-height: 1.4; }

/* the code: ONE input over six drawn boxes (the sticker site's), so a paste, the phone's suggestion and Backspace all work with no script */
.t-book .otp { display: flex; flex-direction: column; gap: 0.5rem; }
.t-book .otp__label { font-size: 0.6875rem; }
.t-book .otp__row { --box: clamp(2.25rem, 11vw, 3rem); --gap: 0.5rem; position: relative; display: flex; gap: var(--gap); width: calc(var(--box) * 6 + var(--gap) * 5); max-width: 100%; overflow: clip; }
.t-book .otp__box { flex: none; width: var(--box); height: calc(var(--box) * 1.25); background: #FFFFFF; border: 1px solid var(--line); border-radius: 0.75rem; }
.t-book .otp__row:focus-within .otp__box { border-color: var(--ink); }
.t-book .otp__input { position: absolute; inset: 0; width: calc(100% + var(--gap) + (var(--box) - 1ch) / 2 + 2px); height: 100%; padding: 0 0 0 calc((var(--box) - 1ch) / 2); background: transparent; border: 0; color: var(--ink); caret-color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.5rem; font-weight: 600; letter-spacing: calc(var(--box) + var(--gap) - 1ch); outline: none; }

/* the week strip: ‹, seven days, ›; a day with times is a tap target, one without is dashed and inert; the chosen day is the dark button's black */
.t-book .week { display: flex; align-items: stretch; gap: 0.25rem; }
.t-book .week__days { display: grid; flex: 1 1 auto; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; padding: 0; list-style: none; }
.t-book .week__day, .t-book .week__arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0.375rem 0; background: #FFFFFF; border: 1px solid var(--line); border-radius: 0.5rem; color: var(--ink); font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.t-book .week__arrow { flex: none; width: 2.25rem; background: none; border-color: transparent; }
.t-book .week__arrow--off { color: var(--muted); opacity: 0.35; cursor: default; }
.t-book .week__dow { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.t-book .week__num { font-size: 1.125rem; font-weight: 700; line-height: 1.2; }
.t-book .week__day--on { background: #000000; border-color: #000000; color: #FFFFFF; }
.t-book .week__day--off { background: none; border-style: dashed; color: var(--muted); cursor: default; }
.t-book .book__day { margin-top: 0.5rem; }
.t-book .times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; padding: 0; list-style: none; }
.t-book .times__btn { min-height: 48px; padding: 0.625rem 0; font-variant-numeric: tabular-nums; }
@media (min-width: 480px) { .t-book .times { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* R203: motion and tap feedback, the sticker site's rules in this dress (owner, 2026-11-02: "more fluid"). A tap shows at once, the card fades up as a step
   arrives (opacity and transform only), and /_p/book.js (booking pages only) adds is-busy to what was tapped: a spinner in the button, the row's chevron or
   the arrow's glyph; a time filled black as chosen. No script: every step works as before. Reduced motion: no slide or scale, a slow spinner. */
.t-book .book { animation: bk-in 220ms cubic-bezier(0.215, 0.61, 0.355, 1) both; }
@keyframes bk-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.t-book .book a, .t-book .book button { -webkit-tap-highlight-color: transparent; }
.t-book .btn, .t-book .week__day, .t-book .week__arrow { transition: filter 180ms ease, transform 120ms ease, background-color 120ms ease, color 120ms ease; }
.t-book .btn:active { filter: brightness(0.92); transform: scale(0.98); }
.t-book .week__day:not(.week__day--off):active, .t-book .week__arrow:not(.week__arrow--off):active { transform: scale(0.94); }
.t-book a.row { transition: background-color 120ms ease; }
.t-book a.row:active { background: #F1F5F9; }
.t-book .unlock__link:active, .t-book button.book__linkbtn:active { color: var(--ink); }
.t-book .is-busy { cursor: progress; }
.t-book .btn.is-busy { position: relative; }
.t-book .btn.is-busy:disabled { opacity: 1; }
.t-book .btn.is-busy::after, .t-book .book__pick.is-busy::after, .t-book .week__arrow.is-busy::after { content: ''; flex: none; box-sizing: border-box; width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 9999px; animation: bk-spin 700ms linear infinite; }
.t-book .btn.is-busy::after { position: absolute; top: 50%; right: 1rem; margin-top: -0.5rem; }
.t-book .times__btn.is-busy { background: #000000; border-color: #000000; color: #FFFFFF; }
.t-book .times__btn.is-busy::after { right: 0.5rem; width: 0.75rem; height: 0.75rem; margin-top: -0.375rem; }
.t-book .book__pick.is-busy { background: #F8FAFC; }
.t-book .book__pick.is-busy .icon:last-child, .t-book .week__arrow.is-busy .icon { display: none; }
.t-book .book__pick.is-busy::after { margin-left: auto; color: var(--muted); }
@keyframes bk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .t-book .book { animation: none; }
  .t-book .btn, .t-book .week__day, .t-book .week__arrow, .t-book a.row { transition: none; }
  .t-book .btn:active, .t-book .week__day:not(.week__day--off):active, .t-book .week__arrow:not(.week__arrow--off):active { transform: none; }
  .t-book .btn.is-busy::after, .t-book .book__pick.is-busy::after, .t-book .week__arrow.is-busy::after { animation-duration: 1600ms; }
}