/* ============================================================
   Five website templates — each is its own layout, not a recolour.
   Markup lives in businesses/site/themes/theme-N.php; this file
   styles each template's own classes (t1-… t5-…) and lightly
   retunes base classes (.btn, .hours-table, .form-field) so the
   shared review pages match the chosen template. --brand is
   injected per business.
   ============================================================ */

/* ---------- shared ---------- */
.t1 section, .t2 section, .t3 section, .t4 section, .t5 section { border-top: none; }
.hours-table { width: 100%; max-width: 360px; border-collapse: collapse; font-size: .92rem; }
.hours-table td { padding: 5px 0; }
.hours-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.hours-table tr.today td { font-weight: 700; }

/* ============================================================
   THEME 1 — EDITORIAL (Modern Minimal)
   Text-first. Hairlines instead of boxes. Numbered chapters.
   Full-bleed image. Services as an index list. Pull-quote reviews.
   Display face: Manrope light.
   ============================================================ */
.t1 { --paper: #FCFCFA; --line: #16241F; background: var(--paper); }
.t1 .wrap { max-width: 680px; }
.t1-mast { border-bottom: 1px solid var(--line); padding: 14px 0; }
.t1-mast-inner { display: flex; align-items: center; gap: 12px; }
.t1-logo { object-fit: contain; }
.t1-logo.logo-square { width: 28px; height: 28px; }
.t1-logo.logo-rectangle { width: auto; max-width: 90px; height: 28px; }
.t1-mast-name { font-family: 'Manrope', 'Hind', sans-serif; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; }
.t1-mast-city { margin-left: auto; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.t1-hero { padding: 40px 0 26px; }
.t1-kicker { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 14px; }
.t1-h1 { font-family: 'Manrope', 'Hind', sans-serif; font-weight: 300; font-size: clamp(2.4rem, 9vw, 3.6rem); line-height: 1; letter-spacing: -0.04em; margin: 0 0 18px; }
.t1-lede { font-size: 1.05rem; line-height: 1.6; color: var(--ink-2); max-width: 52ch; margin: 0 0 18px; }
.t1-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .86rem; }
.t1-meta-item { color: var(--ink); text-decoration: none; }
.t1-stars { color: var(--ink); letter-spacing: .04em; }
.t1-bleed { margin: 0; }
.t1-bleed img { width: 100%; max-height: 62vh; object-fit: cover; display: block; }
.t1-section { border-top: 1px solid var(--line); padding: 34px 0; }
.t1-h2 { font-family: 'Manrope', 'Hind', sans-serif; font-weight: 400; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 20px; display: flex; align-items: baseline; gap: 14px; }
.t1-num { font-weight: 300; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.t1-h2-aside { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--ink-2); }
.t1-index { list-style: none; margin: 0; padding: 0; }
.t1-index-row { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid #DDE1DE; align-items: flex-start; }
.t1-index-row:first-child { border-top: none; padding-top: 0; }
.t1-index-no { font-family: 'Manrope', sans-serif; font-weight: 300; font-size: 1.3rem; color: var(--ink-3); width: 34px; flex-shrink: 0; line-height: 1.1; }
.t1-index-body { flex: 1; }
.t1-index-body h3 { margin: 0 0 4px; font-size: 1.08rem; font-weight: 600; }
.t1-index-body p { margin: 0; color: var(--ink-2); font-size: .94rem; line-height: 1.5; }
.t1-index-img { width: 64px; height: 64px; object-fit: cover; flex-shrink: 0; filter: grayscale(.2); }
.t1-why { font-size: 1.08rem; line-height: 1.75; margin: 0; }
.t1-dash { color: var(--ink-3); }
.t1-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.t1-grid figure { margin: 0; }
.t1-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.t1-grid figcaption { font-size: .72rem; color: var(--ink-2); margin-top: 4px; }
.t1-quote { margin: 0 0 22px; padding: 0 0 0 18px; border-left: 1px solid var(--line); }
.t1-quote p { font-size: 1.12rem; line-height: 1.55; margin: 8px 0; }
.t1-quote cite { font-style: normal; font-size: .84rem; color: var(--ink-2); }
.t1-reply { font-size: .92rem !important; color: var(--ink-2); }
.t1-reply span { text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; }
.t1-empty { color: var(--ink-2); margin: 0 0 14px; }
.t1-links { display: flex; gap: 22px; flex-wrap: wrap; }
.t1-link { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 1px; font-size: .92rem; }
.t1-visit { display: grid; gap: 22px; }
@media (min-width: 560px) { .t1-visit { grid-template-columns: 1fr 1fr; } }
.t1-address { margin: 0 0 10px; line-height: 1.5; }
.t1-hours td { border-bottom: 1px solid #DDE1DE; padding: 7px 0; }
.t1 .form-field input, .t1 .form-field textarea { border: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 12px 0; background: transparent; }
.t1 .phone-input { border: none; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.t1 .phone-input input { border: none; }
.t1 .btn { border-radius: 0; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; font-weight: 600; }
.t1-foot { border-top: 1px solid var(--line); padding: 18px 0 calc(18px + var(--bar-h)); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.t1-foot .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
[data-theme="1"] .site-header { border-bottom: 1px solid var(--ink); }
[data-theme="1"] .review-card { border: none; border-left: 1px solid var(--ink); border-radius: 0; padding: 4px 0 4px 16px; }
[data-theme="1"] .btn { border-radius: 0; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; }

/* ============================================================
   THEME 2 — APP (Bold & Vibrant)
   Brand-colour header block with the image card floating out of
   it, sticky chip navigation, 2-up image tiles, big score card,
   horizontal scrollers. Display face: Nunito black.
   ============================================================ */
.t2 { --paper: #F6F7FB; --r: 18px; --r-lg: 26px; background: var(--paper); }
.t2 .wrap { max-width: 640px; }
.t2-top { background: var(--brand); color: #fff; padding: 18px 0 0; border-radius: 0 0 34px 34px; }
.t2-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.t2-logo { object-fit: contain; border-radius: 10px; background: #fff; padding: 3px; }
.t2-logo.logo-square { width: 40px; height: 40px; }
.t2-logo.logo-rectangle { width: auto; max-width: 120px; height: 40px; }
.t2-brand-name { font-family: 'Nunito', 'Hind', sans-serif; font-weight: 800; font-size: 1.05rem; }
.t2-open { margin-left: auto; font-size: .72rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.18); }
.t2-open.on { background: #DDF6E8; color: #0F7B5A; }
.t2-tag { display: inline-block; background: rgba(255,255,255,.2); padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.t2-h1 { font-family: 'Nunito', 'Hind', sans-serif; font-weight: 900; font-size: clamp(2.2rem, 8vw, 3.1rem); line-height: 1; letter-spacing: -0.03em; margin: 14px 0 10px; }
.t2-lede { color: rgba(255,255,255,.9); font-size: 1.02rem; line-height: 1.55; margin: 0 0 14px; }
.t2-rating-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 999px; font-size: .88rem; text-decoration: none; margin-bottom: 18px; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.t2-stars { color: #F2B01E; letter-spacing: .03em; }
.t2-stars-lg { color: #F2B01E; font-size: 1.4rem; letter-spacing: .04em; }
.t2-hero-img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 22px; box-shadow: 0 16px 36px rgba(0,0,0,.22); margin: 6px 0 -56px; position: relative; }
.t2-top:not(:has(.t2-hero-img)) { padding-bottom: 26px; }
.t2-chips { position: sticky; top: 0; z-index: 20; background: rgba(246,247,251,.92); backdrop-filter: blur(8px); padding: 10px 0; margin-top: 70px; }
.t2-top:not(:has(.t2-hero-img)) + .t2-chips { margin-top: 0; padding-top: 16px; }
.t2-chips-inner { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.t2-chips-inner::-webkit-scrollbar { display: none; }
.t2-chips a { flex-shrink: 0; padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; font-size: .84rem; text-decoration: none; border: 1px solid #E4E7EE; }
.t2-section { padding: 26px 0 6px; }
.t2-h2 { font-family: 'Nunito', 'Hind', sans-serif; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; margin: 0 0 14px; }
.t2-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.t2-tile { background: #fff; border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: 0 4px 16px rgba(20,30,60,.06); display: flex; flex-direction: column; }
.t2-tile img, .t2-tile-ph { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.t2-tile-ph { display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--brand) 14%, #fff); color: var(--brand); font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 2.2rem; }
.t2-tile-body { padding: 10px 12px 12px; }
.t2-tile-body h3 { margin: 0 0 3px; font-size: .98rem; font-weight: 800; }
.t2-tile-body p { margin: 0 0 8px; font-size: .82rem; color: var(--ink-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t2-tile-cta { font-size: .78rem; font-weight: 800; color: var(--wa); }
.t2-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.t2-pill { background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand); font-weight: 700; padding: 9px 14px; border-radius: 999px; font-size: .9rem; }
.t2-scroller { display: flex; gap: 12px; overflow-x: auto; padding: 0 20px 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.t2-scroller::-webkit-scrollbar { display: none; }
.t2-shot { flex: 0 0 78%; max-width: 360px; margin: 0; scroll-snap-align: start; }
.t2-shot img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 18px; display: block; }
.t2-shot figcaption { font-size: .8rem; color: var(--ink-2); margin-top: 6px; }
.t2-score { background: #fff; border-radius: 20px; padding: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; box-shadow: 0 4px 16px rgba(20,30,60,.06); margin-bottom: 14px; }
.t2-score-big { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 3rem; line-height: 1; }
.t2-score-sub { font-size: .86rem; color: var(--ink-2); }
.t2-score-btn { margin-left: auto; width: auto; flex: 1 1 100%; }
@media (min-width: 480px) { .t2-score-btn { flex: 0 0 auto; } }
.t2-rslider { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; scrollbar-width: none; }
.t2-rslider::-webkit-scrollbar { display: none; }
.t2-rcard { flex: 0 0 84%; max-width: 340px; background: #fff; border-radius: 18px; padding: 16px; scroll-snap-align: start; box-shadow: 0 4px 16px rgba(20,30,60,.06); }
.t2-rhead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.t2-ravatar { width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .86rem; }
.t2-rdate { font-size: .74rem; color: var(--ink-3); }
.t2-rcard p { margin: 8px 0 0; font-size: .94rem; line-height: 1.5; }
.t2-reply { margin-top: 10px; background: var(--paper); border-radius: 12px; padding: 10px 12px; font-size: .86rem; }
.t2-reply b { display: block; color: var(--brand); font-size: .78rem; margin-bottom: 2px; }
.t2-reply p { margin: 0; font-size: .86rem; }
.t2-more { display: inline-block; margin-top: 8px; font-weight: 800; color: var(--brand); text-decoration: none; }
.t2-card { background: #fff; border-radius: 20px; padding: 18px; box-shadow: 0 4px 16px rgba(20,30,60,.06); }
.t2-address { margin: 10px 0; line-height: 1.5; }
.t2-lede-dark { color: var(--ink-2); margin: 0 0 14px; font-size: .92rem; }
.t2 .btn { border-radius: 999px; font-weight: 800; }
.t2 .form-field input, .t2 .form-field textarea, .t2 .phone-input { border-radius: 14px; background: var(--paper); }
.t2-foot { text-align: center; font-size: .78rem; color: var(--ink-3); padding: 24px 20px calc(24px + var(--bar-h)); }
[data-theme="2"] .site-header { background: var(--brand); color: #fff; border: none; }
[data-theme="2"] .site-header .name { color: #fff; }
[data-theme="2"] .btn { border-radius: 999px; font-weight: 800; }
[data-theme="2"] .review-card { border-radius: 18px; box-shadow: 0 4px 16px rgba(20,30,60,.06); border: none; }

/* ============================================================
   THEME 3 — BROCHURE (Classic Professional)
   Contact strip, centred masthead, real navigation row, facts
   table, ruled service rows, quotation testimonials, boxed form,
   full footer. Serif display: Tiro Devanagari Hindi. Navy ink.
   ============================================================ */
.t3 { --ink: #1C2B3A; --paper: #FFFFFF; --line: #C9D2DC; --r: 3px; background: #F3F5F8; color: var(--ink); }
.t3 .wrap { max-width: 720px; }
.t3-strip { background: var(--ink); color: #fff; font-size: .78rem; }
.t3-strip-inner { display: flex; gap: 18px; padding-top: 7px; padding-bottom: 7px; align-items: center; flex-wrap: wrap; }
.t3-strip a { color: #fff; text-decoration: none; }
.t3-strip-open { margin-left: auto; font-weight: 700; }
.t3-strip-open.on { color: #8FE3B5; } .t3-strip-open.off { color: #F5B7B1; }
.t3-mast { background: #fff; text-align: center; padding: 26px 0 18px; border-bottom: 3px double var(--brand); }
.t3-logo { object-fit: contain; margin: 0 auto 10px; display: block; }
.t3-logo.logo-square { width: 72px; height: 72px; }
.t3-logo.logo-rectangle { width: auto; max-width: 220px; height: 72px; }
.t3-name { font-family: 'Tiro Devanagari Hindi', 'Hind', serif; font-weight: 400; font-size: 2.1rem; margin: 0; letter-spacing: .01em; }
.t3-sr { position: absolute; left: -9999px; }
.t3-tagline { margin: 4px 0 0; text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; color: var(--ink-2); }
.t3-nav { background: #fff; border-bottom: 1px solid var(--line); }
.t3-nav-inner { display: flex; justify-content: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.t3-nav a { padding: 12px 14px; font-size: .84rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
.t3-nav a:hover { border-bottom-color: var(--brand); }
.t3-section { padding: 28px 0; }
.t3-h2 { font-family: 'Tiro Devanagari Hindi', 'Hind', serif; font-weight: 400; font-size: 1.5rem; margin: 0 0 14px; padding-bottom: 6px; border-bottom: 1px solid var(--line); position: relative; }
.t3-h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 56px; height: 3px; background: var(--brand); }
.t3-h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 8px; color: var(--ink-2); }
.t3-intro { display: grid; gap: 20px; }
@media (min-width: 600px) { .t3-intro { grid-template-columns: 1fr 1fr; align-items: start; } }
.t3-frame { margin: 0; padding: 6px; background: #fff; border: 1px solid var(--line); }
.t3-frame img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.t3-frame figcaption { font-size: .8rem; color: var(--ink-2); padding: 6px 2px 0; }
.t3-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.t3-table th, .t3-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.t3-table th { width: 32%; font-weight: 600; color: var(--ink-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.t3-table a { color: var(--ink); }
.t3-lede { margin: 12px 0 0; line-height: 1.6; color: var(--ink-2); font-size: .95rem; }
.t3-rows { background: #fff; border: 1px solid var(--line); }
.t3-row { display: flex; gap: 14px; padding: 14px; border-bottom: 1px solid var(--line); align-items: center; }
.t3-row:last-child { border-bottom: none; }
.t3-row img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--line); flex-shrink: 0; }
.t3-row-body { flex: 1; min-width: 0; }
.t3-row-body h3 { margin: 0 0 2px; font-size: 1rem; }
.t3-row-body p { margin: 0; font-size: .88rem; color: var(--ink-2); line-height: 1.45; }
.t3-row-link { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); text-decoration: none; border: 1px solid var(--brand); padding: 7px 10px; white-space: nowrap; }
.t3-panel { background: #fff; border: 1px solid var(--line); padding: 16px; }
.t3-panel p { margin: 0 0 8px; line-height: 1.55; font-size: .94rem; }
.t3-panel a { color: var(--ink); }
.t3-checks { list-style: none; margin: 0; padding: 0; columns: 1; }
@media (min-width: 560px) { .t3-checks { columns: 2; column-gap: 24px; } }
.t3-checks li { padding: 7px 0 7px 22px; position: relative; break-inside: avoid; border-bottom: 1px dotted var(--line); }
.t3-checks li::before { content: "✔"; position: absolute; left: 0; color: var(--brand); }
.t3-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.t3-rating-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.t3-stars { color: var(--star); }
.t3-testimonial { background: #fff; border: 1px solid var(--line); padding: 22px 18px 16px; margin-bottom: 12px; position: relative; }
.t3-qmark { position: absolute; top: -6px; left: 12px; font-family: 'Tiro Devanagari Hindi', serif; font-size: 3.4rem; line-height: 1; color: var(--brand); opacity: .35; }
.t3-tquote { font-family: 'Tiro Devanagari Hindi', 'Hind', serif; font-style: italic; font-size: 1.12rem; line-height: 1.55; margin: 6px 0 10px; }
.t3-tauthor { font-size: .86rem; color: var(--ink-2); }
.t3-treply { margin-top: 10px; padding: 10px 12px; background: #F3F5F8; border-left: 3px solid var(--brand); font-size: .88rem; line-height: 1.5; }
.t3-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.t3-btns .btn { width: auto; flex: 1; }
.t3-two { display: grid; gap: 14px; margin-bottom: 18px; }
@media (min-width: 560px) { .t3-two { grid-template-columns: 1fr 1fr; } }
.t3-hours td { border-bottom: 1px dotted var(--line); padding: 6px 0; }
.t3-link { font-size: .88rem; font-weight: 600; color: var(--brand); }
.t3-fieldset { border: 1px solid var(--line); background: #fff; padding: 14px 16px 18px; margin: 0; }
.t3-fieldset legend { padding: 0 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); }
.t3 .btn, .t3 .form-field input, .t3 .form-field textarea, .t3 .phone-input { border-radius: 3px; }
.t3 .btn { text-transform: uppercase; letter-spacing: .06em; font-size: .84rem; }
.t3-foot { background: var(--ink); color: #C9D2DC; padding: 22px 0 calc(22px + var(--bar-h)); font-size: .82rem; }
.t3-foot .wrap { display: flex; flex-direction: column; gap: 4px; }
.t3-foot b { color: #fff; font-size: .95rem; }
.t3-foot-by { margin-top: 8px; font-size: .74rem; opacity: .7; }
[data-theme="3"] .site-header { justify-content: center; border-bottom: 3px double var(--brand); }
[data-theme="3"] .btn, [data-theme="3"] .review-card { border-radius: 3px; }
[data-theme="3"] .review-card { border: 1px solid #C9D2DC; }

/* ============================================================
   THEME 4 — SHOWCASE (Elegant Dark)
   Dark ground, full-bleed cover image with the name over it,
   portfolio first, services as a horizontal rail, gold accents.
   Display face: Cormorant Garamond.
   ============================================================ */
.t4 { --ink: #F2EFE9; --ink-2: #B8B3A9; --ink-3: #7E7A72; --paper: #101311; --paper-2: #181C19; --line: #2A302C; --gold: #D4B36A; background: var(--paper); color: var(--ink); }
.t4 .wrap { max-width: 680px; }
.t4-cover { position: relative; min-height: 78vh; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(160deg, #1A211D, #0E100F); overflow: hidden; }
.t4-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.t4-cover.has-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,19,17,.96) 0%, rgba(16,19,17,.45) 45%, rgba(16,19,17,.1) 100%); }
.t4-cover-top, .t4-cover-text { position: relative; z-index: 1; padding: 18px 22px; }
.t4-cover-top { display: flex; align-items: center; gap: 10px; }
.t4-logo { object-fit: contain; border-radius: 6px; }
.t4-logo.logo-square { width: 34px; height: 34px; }
.t4-logo.logo-rectangle { width: auto; max-width: 110px; height: 34px; }
.t4-brand { font-family: 'Cormorant Garamond', 'Hind', serif; font-weight: 600; font-size: 1.15rem; letter-spacing: .06em; }
.t4-cover-text { padding-bottom: 30px; }
.t4-eyebrow { display: block; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.t4-h1 { font-family: 'Cormorant Garamond', 'Hind', serif; font-weight: 500; font-size: clamp(2.6rem, 10vw, 4rem); line-height: .98; margin: 0 0 12px; }
.t4-proof { color: var(--ink); text-decoration: none; font-size: .9rem; display: inline-block; margin-bottom: 8px; }
.t4-stars { color: var(--gold); letter-spacing: .06em; }
.t4-stars-lg { color: var(--gold); font-size: 1.5rem; letter-spacing: .08em; }
.t4-lede { color: var(--ink-2); line-height: 1.6; margin: 0; max-width: 46ch; }
.t4-section { padding: 30px 0; border-top: 1px solid var(--line); }
.t4-h2 { font-family: 'Cormorant Garamond', 'Hind', serif; font-weight: 500; font-size: 1.75rem; margin: 0 0 16px; position: relative; padding-left: 18px; }
.t4-h2::before { content: ""; position: absolute; left: 0; top: .35em; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); }
.t4-masonry { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.t4-masonry figure { margin: 0; }
.t4-masonry .t4-wide { grid-column: 1 / -1; }
.t4-masonry img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 4px; }
.t4-masonry .t4-wide img { aspect-ratio: 16/9; }
.t4-masonry figcaption { font-size: .76rem; color: var(--ink-2); margin-top: 4px; }
.t4-rail { display: flex; gap: 12px; overflow-x: auto; padding: 0 20px 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.t4-rail::-webkit-scrollbar { display: none; }
.t4-card { flex: 0 0 72%; max-width: 300px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px; padding: 16px; text-decoration: none; color: var(--ink); scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; }
.t4-card-no { font-family: 'Cormorant Garamond', serif; color: var(--gold); font-size: 1.3rem; }
.t4-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; }
.t4-card h3 { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 600; }
.t4-card p { margin: 0; color: var(--ink-2); font-size: .88rem; line-height: 1.5; }
.t4-card-cta { margin-top: auto; color: var(--gold); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.t4-why { list-style: none; margin: 0; padding: 0; }
.t4-why li { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: baseline; }
.t4-why li::before { content: "—"; color: var(--gold); }
.t4-score { text-align: center; padding: 10px 0 22px; }
.t4-score-num { font-family: 'Cormorant Garamond', serif; font-size: 4rem; line-height: 1; color: var(--gold); }
.t4-score-sub { color: var(--ink-2); font-size: .86rem; margin-top: 6px; }
.t4-review { padding: 16px 0; border-top: 1px solid var(--line); }
.t4-review-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.t4-review p { margin: 8px 0; line-height: 1.55; }
.t4-review-date { font-size: .76rem; color: var(--ink-3); }
.t4-reply { margin-top: 10px; padding: 10px 14px; border-left: 2px solid var(--gold); background: var(--paper-2); }
.t4-reply span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.t4-reply p { margin: 4px 0 0; font-size: .9rem; }
.t4-empty { color: var(--ink-2); }
.t4-btns { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.t4-btn-gold { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 1px solid var(--gold); color: var(--gold); background: transparent; text-decoration: none; letter-spacing: .1em; text-transform: uppercase; font-size: .82rem; font-weight: 600; border-radius: 3px; cursor: pointer; font-family: var(--font); }
.t4-btn-block { width: 100%; }
.t4-link { color: var(--gold); text-decoration: none; font-size: .9rem; }
.t4-panel { background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px; padding: 18px; }
.t4-open { display: inline-block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.t4-open.on { color: #8FE3B5; } .t4-open.off { color: #E7A9A2; }
.t4-address { margin: 0 0 12px; line-height: 1.5; }
.t4-hours td { border-bottom: 1px solid var(--line); padding: 7px 0; }
.t4 .form-field label { color: var(--ink-2); }
.t4 .form-field input, .t4 .form-field textarea, .t4 .phone-input { background: #0B0D0C; border-color: var(--line); color: var(--ink); border-radius: 4px; }
.t4 .phone-cc { color: var(--ink-2); }
.t4-foot { text-align: center; font-size: .76rem; color: var(--ink-3); padding: 24px 20px calc(24px + var(--bar-h)); letter-spacing: .06em; }
.t4 .action-bar { background: #0B0D0C; border-top: 1px solid var(--line); }
.t4 .action-bar .btn-secondary { background: transparent; color: var(--ink); border-color: var(--line); }
[data-theme="4"] { background: #101311; color: #F2EFE9; }
[data-theme="4"] .site-header { background: #101311; color: #F2EFE9; border-bottom: 1px solid #2A302C; }
[data-theme="4"] .review-card { background: #181C19; border-color: #2A302C; color: #F2EFE9; }
[data-theme="4"] .btn-secondary { background: transparent; color: #F2EFE9; border-color: #2A302C; }
[data-theme="4"] .form-field input, [data-theme="4"] .form-field textarea, [data-theme="4"] .phone-input { background: #0B0D0C; border-color: #2A302C; color: #F2EFE9; }
[data-theme="4"] .form-field label, [data-theme="4"] .muted { color: #B8B3A9; }

/* ============================================================
   THEME 5 — STORY (Warm & Friendly)
   Cream ground, avatar + greeting, WhatsApp-first, pastel icon
   cards, stacked service cards with "ask" links, polaroid
   gallery, reviews as a chat. Display face: Baloo 2.
   ============================================================ */
.t5 { --paper: #FFF8EE; --paper-2: #FFFFFF; --line: #F0E3D2; --r: 22px; background: var(--paper); }
.t5 .wrap { max-width: 600px; }
.t5-hello { text-align: center; padding: 34px 0 20px; }
.t5-avatar { width: 96px; height: 96px; border-radius: 50%; background: #fff; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(120,80,20,.14); overflow: hidden; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 2rem; color: var(--brand); }
.t5-avatar img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.t5-greet { font-family: 'Baloo 2', 'Hind', sans-serif; font-weight: 700; color: var(--ink-2); margin: 0; font-size: 1.05rem; }
.t5-h1 { font-family: 'Baloo 2', 'Hind', sans-serif; font-weight: 800; font-size: clamp(2rem, 8vw, 2.7rem); line-height: 1.1; margin: 0 0 4px; }
.t5-sub { margin: 0 0 12px; color: var(--ink-2); }
.t5-loved { display: inline-flex; gap: 8px; align-items: center; background: #fff; padding: 7px 14px; border-radius: 999px; font-size: .86rem; color: var(--ink); text-decoration: none; margin-bottom: 14px; box-shadow: 0 4px 14px rgba(120,80,20,.1); }
.t5-stars { color: #F2A93B; }
.t5-stars-lg { color: #F2A93B; font-size: 1.3rem; }
.t5-bubble { background: #fff; border-radius: 22px 22px 22px 6px; padding: 14px 16px; text-align: left; line-height: 1.55; margin: 0 0 16px; box-shadow: 0 4px 14px rgba(120,80,20,.08); }
.t5-wa-big { display: flex; align-items: center; justify-content: center; min-height: 56px; background: var(--wa); color: #fff; border-radius: 999px; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.1rem; text-decoration: none; box-shadow: 0 10px 24px rgba(18,140,126,.3); }
.t5-today { display: inline-block; margin-top: 12px; font-size: .82rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.t5-today.on { background: #E1F2EB; color: #0F7B5A; } .t5-today.off { background: #FBE9E7; color: #B42318; }
.t5-hero-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 26px; display: block; box-shadow: 0 10px 26px rgba(120,80,20,.14); }
.t5-section { padding: 28px 0 4px; }
.t5-h2 { font-family: 'Baloo 2', 'Hind', sans-serif; font-weight: 800; font-size: 1.45rem; margin: 0 0 14px; }
.t5-icons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.t5-icon-card { border-radius: 18px; padding: 14px; font-weight: 600; font-size: .92rem; line-height: 1.4; display: flex; flex-direction: column; gap: 10px; }
.t5-tone-1 { background: #FFE9D6; } .t5-tone-2 { background: #E3F4EA; } .t5-tone-3 { background: #E8ECFB; } .t5-tone-4 { background: #FBE7EE; }
.t5-blob { width: 34px; height: 34px; border-radius: 12px 14px 10px 16px; background: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Baloo 2', sans-serif; font-weight: 800; color: var(--brand); }
.t5-stack { display: flex; flex-direction: column; gap: 12px; }
.t5-item { background: #fff; border-radius: 20px; padding: 12px; display: flex; gap: 12px; box-shadow: 0 4px 14px rgba(120,80,20,.08); }
.t5-item img { width: 88px; height: 88px; object-fit: cover; border-radius: 14px; flex-shrink: 0; }
.t5-item-body { flex: 1; min-width: 0; }
.t5-item-body h3 { margin: 0 0 3px; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1.05rem; }
.t5-item-body p { margin: 0 0 6px; font-size: .88rem; color: var(--ink-2); line-height: 1.45; }
.t5-ask { color: var(--wa); font-weight: 700; text-decoration: none; font-size: .88rem; }
.t5-polaroids { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; padding: 6px 4px; }
.t5-polaroid { margin: 0; background: #fff; padding: 8px 8px 10px; box-shadow: 0 6px 18px rgba(120,80,20,.14); }
.t5-polaroid.tilt-l { transform: rotate(-2deg); } .t5-polaroid.tilt-r { transform: rotate(2deg); }
.t5-polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.t5-polaroid figcaption { font-family: 'Baloo 2', sans-serif; font-size: .8rem; color: var(--ink-2); margin-top: 6px; text-align: center; }
.t5-rating { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.t5-chat-empty { background: #fff; border-radius: 18px; padding: 14px 16px; margin-bottom: 12px; color: var(--ink-2); }
.t5-chat { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.t5-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; }
.t5-msg.us { align-self: flex-end; }
.t5-msg-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 800; flex-shrink: 0; }
.t5-msg-body { background: #fff; border-radius: 18px 18px 18px 4px; padding: 10px 14px; font-size: .92rem; box-shadow: 0 3px 10px rgba(120,80,20,.08); }
.t5-msg.us .t5-msg-body { background: #DCF5E7; border-radius: 18px 18px 4px 18px; }
.t5-msg-body b { font-size: .84rem; }
.t5-msg-body p { margin: 4px 0; line-height: 1.5; }
.t5-msg-time { font-size: .7rem; color: var(--ink-3); }
.t5-btns { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.t5-btns .btn { width: auto; flex: 1; }
.t5-card { background: #fff; border-radius: 22px; padding: 18px; box-shadow: 0 4px 14px rgba(120,80,20,.08); }
.t5-address { margin: 10px 0; line-height: 1.5; }
.t5-form-note { margin: 0 0 12px; color: var(--ink-2); font-size: .9rem; }
.t5 .btn { border-radius: 999px; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1rem; }
.t5 .form-field input, .t5 .form-field textarea, .t5 .phone-input { border-radius: 16px; background: var(--paper); border-color: var(--line); }
.t5-foot { text-align: center; font-size: .8rem; color: var(--ink-3); padding: 24px 20px calc(24px + var(--bar-h)); }
[data-theme="5"] { background: #FFF8EE; }
[data-theme="5"] .btn { border-radius: 999px; font-weight: 700; }
[data-theme="5"] .review-card { border-radius: 20px; border: none; box-shadow: 0 4px 14px rgba(120,80,20,.08); }

/* ============================================================
   THEME 6 — DOCTOR (clinic / doctor / hospital)
   Reference: banner → trust cards → "Meet the doctor" → review
   slider → treatments grid → FAQ → photos slider → visit card →
   big Call/WhatsApp CTA. Soft blue-tinted cards on a cool grey
   page, pill buttons. Display face: Poppins.
   ============================================================ */
.t6 { --paper: #F7FAFC; --ink: #33415C; --ink-2: #5B6B85; --r: 20px; background: var(--paper); color: var(--ink); font-family: 'Poppins', 'Hind', sans-serif; }
.t6 .wrap { max-width: 800px; }
.t6-top { background: #fff; box-shadow: 0 2px 10px rgba(30,60,90,.06); position: sticky; top: 0; z-index: 20; }
.t6-top-inner { max-width: 800px; margin: 0 auto; padding: 6px 16px; display: flex; align-items: center; gap: 12px; }
.t6-logo { object-fit: contain; border-radius: 8px; }
.t6-logo.logo-square { width: 44px; height: 44px; }
.t6-logo.logo-rectangle { width: auto; max-width: 130px; height: 44px; }
.t6-brand { font-weight: 700; font-size: 1.02rem; line-height: 1.2; }
.t6-tag { font-size: .74rem; color: var(--ink-2); }
.t6-top-call { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 12%, #fff); display: flex; align-items: center; justify-content: center; text-decoration: none; }
.t6-hero { max-width: 800px; margin: 0 auto; }
.t6-hero img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.t6-hero-ph { background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 18%, #fff), color-mix(in srgb, var(--brand) 32%, #fff)); padding: 46px 20px 34px; text-align: center; }
.t6-hero-h1 { margin: 0 0 4px; font-size: clamp(1.7rem, 7vw, 2.4rem); font-weight: 700; color: var(--ink); }
.t6-hero-ph p { margin: 0; color: var(--ink-2); }
.t6-wrap { padding-top: 0; }
.t6-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: -18px; position: relative; }
.t6-card { background: #fff; border-radius: 20px; padding: 14px; text-align: center; box-shadow: 0 6px 18px rgba(30,60,90,.08); }
.t6-card-icon { display: block; font-size: 1.15rem; color: var(--brand); margin-bottom: 2px; }
.t6-card-main { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.t6-card-sub { font-size: .74rem; color: var(--ink-2); margin-top: 2px; }
.t6-menu { margin-left: auto; position: relative; }
.t6-menu-btn { list-style: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--brand); cursor: pointer; user-select: none; }
.t6-menu-btn::-webkit-details-marker { display: none; }
.t6-menu-btn::marker { content: ''; }
.t6-menu[open] .t6-menu-btn { background: color-mix(in srgb, var(--brand) 12%, #fff); }
.t6-menu-list { position: absolute; top: 48px; right: 0; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(30,60,90,.16); padding: 8px; min-width: 170px; display: flex; flex-direction: column; z-index: 30; }
.t6-menu-list a { padding: 11px 14px; border-radius: 9px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; }
.t6-menu-list a:hover, .t6-menu-list a:active { background: color-mix(in srgb, var(--brand) 8%, #fff); }
body.t6 { scroll-behavior: smooth; }
.t6-h2 { margin: 28px 0 14px; font-weight: 600; font-size: 1.25rem; display: flex; align-items: baseline; gap: 10px; scroll-margin-top: 76px; }
.t6-h2-aside { font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.t6-stars { color: #F5A623; letter-spacing: .04em; }
.t6-doctor { background: #fff; border-radius: 20px; padding: 16px; box-shadow: 0 6px 18px rgba(30,60,90,.08); }
.t6-doctor-img { width: 100%; max-height: 320px; object-fit: contain; border-radius: 16px; background: color-mix(in srgb, var(--brand) 8%, #fff); }
.t6-doctor h3 { margin: 12px 0 2px; font-size: 1.15rem; font-weight: 700; }
.t6-doctor-role { color: var(--brand); font-weight: 600; font-size: .86rem; margin-bottom: 8px; }
.t6-doctor p { margin: 0; line-height: 1.75; color: var(--ink-2); }
.t6-scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.t6-scroll::-webkit-scrollbar { display: none; }
.t6-review { min-width: 290px; max-width: 320px; background: #fff; border-radius: 20px; padding: 16px; box-shadow: 0 6px 18px rgba(30,60,90,.08); scroll-snap-align: start; flex-shrink: 0; }
.t6-review p { margin: 8px 0 0; line-height: 1.6; font-size: .92rem; }
.t6-review-empty { min-width: 0; max-width: none; color: var(--ink-2); }
.t6-reviewer { margin-top: 12px; font-weight: 600; font-size: .9rem; }
.t6-verified { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #22C55E; color: #fff; font-size: 11px; margin-left: 4px; vertical-align: middle; }
.t6-review-date { font-weight: 400; font-size: .74rem; color: var(--ink-2); margin-top: 2px; }
.t6-reply { margin-top: 10px; background: var(--paper); border-radius: 12px; padding: 10px 12px; font-size: .86rem; }
.t6-reply b { display: block; color: var(--brand); font-size: .76rem; margin-bottom: 2px; }
.t6-reply p { margin: 0; font-size: .86rem; }
.t6-links { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.t6-pill-btn { display: inline-block; background: var(--brand); color: #fff; text-decoration: none; padding: 12px 24px; border-radius: 30px; font-weight: 600; font-size: .92rem; }
.t6-pill-outline { background: #fff; color: var(--brand); border: 2px solid var(--brand); }
.t6-link { color: var(--brand); font-weight: 600; text-decoration: none; font-size: .9rem; }
.t6-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.t6-service { background: #fff; border-radius: 20px; padding: 14px; min-height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-weight: 600; text-decoration: none; color: var(--ink); box-shadow: 0 6px 18px rgba(30,60,90,.08); gap: 6px; }
.t6-service img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 12px; }
.t6-service small { font-weight: 400; color: var(--ink-2); font-size: .78rem; line-height: 1.4; }
.t6-faq { background: #fff; border-radius: 20px; padding: 16px; box-shadow: 0 6px 18px rgba(30,60,90,.08); margin-bottom: 14px; }
.t6-faq summary { cursor: pointer; font-weight: 600; list-style: none; position: relative; padding-right: 26px; }
.t6-faq summary::-webkit-details-marker { display: none; }
.t6-faq summary::after { content: "+"; position: absolute; right: 0; top: -2px; font-size: 1.3rem; color: var(--brand); }
.t6-faq[open] summary::after { content: "–"; }
.t6-faq p { margin-top: 12px; line-height: 1.8; color: var(--ink-2); font-size: .92rem; }
.t6-photos .t6-photo { flex: 0 0 82%; max-width: 360px; margin: 0; scroll-snap-align: start; }
.t6-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 22px; display: block; box-shadow: 0 6px 18px rgba(30,60,90,.08); }
.t6-photo figcaption { text-align: center; font-size: .82rem; color: var(--ink-2); margin-top: 6px; font-weight: 500; }
@media (min-width: 769px) { .t6-photos .t6-photo { flex: 0 0 calc(33.333% - 8px); } }
.t6-info { background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 6px 18px rgba(30,60,90,.08); display: grid; gap: 18px; line-height: 1.7; font-size: .94rem; }
@media (min-width: 600px) { .t6-info { grid-template-columns: 1fr 1fr; } }
.t6-info strong { display: block; margin-bottom: 4px; }
.t6-info a { color: var(--ink); }
.t6-open { font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.t6-open.on { background: #DCFCE7; color: #15803D; } .t6-open.off { background: #FEE2E2; color: #B91C1C; }
.t6-hours td { padding: 4px 0; border-bottom: 1px dashed #E2ECF4; }
.t6-form { background: #fff; border-radius: 20px; padding: 18px; box-shadow: 0 6px 18px rgba(30,60,90,.08); }
.t6-form-note { margin: 0 0 12px; color: var(--ink-2); font-size: .9rem; }
.t6 .form-field input, .t6 .form-field textarea, .t6 .phone-input { border-radius: 14px; background: var(--paper); border-color: #E2ECF4; }
.t6 .btn { border-radius: 30px; font-weight: 600; }
.t6-cta { background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 16%, #fff), color-mix(in srgb, var(--brand) 28%, #fff)); border-radius: 24px; padding: 24px; text-align: center; margin-top: 24px; box-shadow: 0 6px 18px rgba(30,60,90,.08); }
.t6-cta h2 { margin: 0 0 6px; font-weight: 700; font-size: 1.3rem; }
.t6-cta p { margin: 0; color: var(--ink-2); font-size: .92rem; }
.t6-cta-btns { display: flex; flex-direction: column; gap: 12px; align-items: center; margin-top: 16px; }
.t6-cta-call, .t6-cta-wa { width: 90%; max-width: 340px; text-align: center; text-decoration: none; color: #fff; padding: 20px 18px; border-radius: 30px; font-weight: 600; font-size: 1.05rem; box-shadow: 0 6px 16px rgba(30,60,90,.15); }
.t6-cta-call { background: var(--brand); }
.t6-cta-wa { background: var(--wa); }
@media (min-width: 769px) { .t6-cta-btns { flex-direction: row; justify-content: center; } .t6-cta-call, .t6-cta-wa { width: auto; min-width: 220px; } }
.t6-foot { text-align: center; padding: 20px 20px calc(20px + var(--bar-h)); color: #667; font-size: .82rem; line-height: 1.7; }
.t6 .action-bar .btn { border-radius: 0; font-weight: 600; }
[data-theme="6"] { background: #F7FAFC; font-family: 'Poppins', 'Hind', sans-serif; }
[data-theme="6"] .btn { border-radius: 30px; }
[data-theme="6"] .review-card { border-radius: 20px; border: none; box-shadow: 0 6px 18px rgba(30,60,90,.08); }

/* ============================================================
   Theme 7 — Bento (round 14)
   ------------------------------------------------------------
   The only template that is not a stack of full-width sections.
   Everything is a tile in one grid: 2 columns on a phone, 4 on a
   desktop. .t7-wide spans the full row, so services, photos and
   reviews form an uneven mosaic instead of matching rows.
   grid-auto-flow: dense lets a 1-wide tile backfill a gap left by
   a wide one, which is what keeps the mosaic from looking ragged.
   ============================================================ */
[data-theme="7"] { background: #EEF0F4; font-family: 'Space Grotesk', 'Hind', sans-serif; color: #14181F; }
[data-theme="7"] .btn { border-radius: 12px; }

/* Top bar */
.t7-bar { position: sticky; top: 0; z-index: 20; background: rgba(238,240,244,.92); backdrop-filter: blur(10px); border-bottom: 1px solid #E0E3EA; }
.t7-bar-in { max-width: 1040px; margin: 0 auto; padding: 8px 14px; display: flex; align-items: center; gap: 10px; }
.t7-logo { object-fit: contain; border-radius: 8px; }
.t7-logo.logo-square { width: 40px; height: 40px; }
.t7-logo.logo-rectangle { width: auto; max-width: 128px; height: 40px; }
.t7-brand { font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }
.t7-menu { margin-left: auto; position: relative; }
.t7-menu-btn { list-style: none; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; user-select: none; background: #fff; border: 1px solid #E0E3EA; }
.t7-menu-btn::-webkit-details-marker { display: none; }
.t7-menu-btn::marker { content: ''; }
.t7-menu-list { position: absolute; top: 46px; right: 0; background: #fff; border: 1px solid #E0E3EA; border-radius: 14px; box-shadow: 0 14px 34px rgba(20,24,31,.14); padding: 6px; min-width: 168px; display: flex; flex-direction: column; z-index: 30; }
.t7-menu-list a { padding: 10px 13px; border-radius: 9px; color: #14181F; text-decoration: none; font-weight: 600; font-size: .9rem; }
.t7-menu-list a:hover { background: #F1F3F7; }

/* The mosaic */
.t7-grid { max-width: 1040px; margin: 0 auto; padding: 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; grid-auto-flow: dense; }
/* Each section packs within itself. Without this the page is one grid, and
   `dense` will lift a later tile up into an earlier gap — which is how a
   work photo ended up sitting inside the services row, above its own
   heading. A section-sized grid keeps the backfill inside the section. */
.t7-group { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; grid-auto-flow: dense; }
.t7-tile { background: #fff; border-radius: 20px; padding: 16px; border: 1px solid #E4E7ED; position: relative; overflow: hidden; }
.t7-wide { grid-column: 1 / -1; }
.t7-head { grid-column: 1 / -1; margin: 14px 2px 0; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 8px; scroll-margin-top: 70px; }
.t7-head-aside { font-size: .82rem; font-weight: 600; color: #6B7280; }
.t7-eyebrow { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #8A93A2; margin-bottom: 7px; }

/* Hero */
.t7-hero { grid-column: 1 / -1; padding: 0; min-height: 210px; display: flex; align-items: flex-end; background: var(--brand); }
.t7-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t7-hero.has-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,12,18,.86) 12%, rgba(8,12,18,.18) 62%, rgba(8,12,18,0)); }
.t7-hero-in { position: relative; z-index: 2; padding: 18px; width: 100%; }
.t7-h1 { margin: 0; color: #fff; font-size: 1.62rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.t7-sub { margin: 5px 0 13px; color: rgba(255,255,255,.9); font-size: .93rem; }
.t7-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.t7-chip { padding: 9px 15px; border-radius: 11px; background: #fff; color: #14181F; font-weight: 700; font-size: .87rem; text-decoration: none; }
.t7-chip-wa { background: var(--wa); color: #fff; }
.t7-chip-ghost { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.5); }

/* Proof tiles */
.t7-fact { display: flex; flex-direction: column; justify-content: center; min-height: 92px; }
.t7-fact-num { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.t7-fact-star { color: var(--star); font-size: 1rem; margin-left: 3px; }
.t7-fact-label { margin-top: 5px; font-size: .78rem; color: #6B7280; }
.t7-fact-rating { background: #FFFCF4; border-color: #EFE3C9; }
.t7-fact-neutral { background: #fff; }
.t7-fact-open { background: color-mix(in srgb, var(--brand) 9%, #fff); border-color: color-mix(in srgb, var(--brand) 26%, #fff); }
.t7-fact-open .t7-fact-num { color: var(--brand); }
.t7-fact-shut .t7-fact-num { color: #6B7280; }

.t7-about p { margin: 0; font-size: .93rem; line-height: 1.6; color: #3A424F; }
.t7-why { display: flex; align-items: flex-start; gap: 9px; font-size: .89rem; font-weight: 600; line-height: 1.45; }
.t7-tick { flex: 0 0 auto; width: 21px; height: 21px; border-radius: 7px; background: color-mix(in srgb, var(--brand) 14%, #fff); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: .74rem; }

/* Services */
.t7-svc { text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .12s ease, box-shadow .12s ease; }
.t7-svc:active { transform: scale(.985); }
.t7-svc:hover { box-shadow: 0 8px 22px rgba(20,24,31,.1); }
/* Services rail: same swipe behaviour as Our work, so the two sections
   of the page behave alike rather than one grid and one slider. */
.t7-rail {
    grid-column: 1 / -1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(72%, 260px), 1fr);
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
    overscroll-behavior-x: contain;
}
.t7-rail::-webkit-scrollbar { display: none; }
.t7-rail > .t7-svc { scroll-snap-align: start; }

/* Fixed frame, picture fitted inside it — a square or portrait service
   photo shows the backing at the sides instead of being cropped. */
.t7-svc-frame {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #EEF0F4;
    border-radius: 13px;
    overflow: hidden;
    margin-bottom: 10px;
}
.t7-svc-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.t7-svc-name { font-weight: 700; font-size: .95rem; line-height: 1.3; }
.t7-svc-desc { margin: 5px 0 0; font-size: .81rem; color: #6B7280; line-height: 1.5; }
.t7-svc-ask { margin-top: auto; padding-top: 10px; font-size: .78rem; font-weight: 700; color: var(--brand); }

/* Reviews */
.t7-stars { color: var(--star); font-size: .84rem; letter-spacing: 1px; }
.t7-rev { grid-column: 1 / -1; }
.t7-rev-text { margin: 8px 0 10px; font-size: .87rem; line-height: 1.55; color: #29303B; }
.t7-rev-who { font-weight: 700; font-size: .84rem; }
.t7-tick-sm { color: var(--brand); font-size: .74rem; }
.t7-rev-date { font-size: .72rem; color: #8A93A2; margin-top: 2px; }
.t7-rev-reply { margin-top: 11px; padding: 10px 12px; border-radius: 12px; background: #F4F6F9; font-size: .8rem; line-height: 1.5; }
.t7-rev-reply b { color: var(--brand); display: block; margin-bottom: 3px; font-size: .74rem; }
.t7-rev-reply p { margin: 0; color: #3A424F; }
.t7-rev-empty { font-size: .89rem; color: #6B7280; }
.t7-revcta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.t7-btn-out { display: inline-block; padding: 10px 16px; border-radius: 11px; border: 1.5px solid var(--brand); color: var(--brand); font-weight: 700; font-size: .85rem; text-decoration: none; }
.t7-link { color: var(--brand); font-weight: 600; font-size: .85rem; text-decoration: none; }

/* Photos */
/* Our work: a horizontal rail. Sits outside the page grid so it can run
   past the padding, and snaps card to card. */
.t7-shots {
    grid-column: 1 / -1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(78%, 300px), 1fr);
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
    overscroll-behavior-x: contain;
}
.t7-shots::-webkit-scrollbar { display: none; }
.t7-shot { scroll-snap-align: start; margin: 0; background: #fff; border-radius: 20px; border: 1px solid #E4E7ED; overflow: hidden; }

/* The frame is a fixed rectangle whatever the photo is. `contain` fits the
   picture inside it, so a square or portrait shot shows the backing at the
   sides rather than being cropped — which is what mangled the old layout,
   since every photo dictated its own height. */
.t7-shot-frame {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #EEF0F4;
}
.t7-shot-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Captions are clamped so a long one cannot make its card taller than the
   card beside it. */
.t7-shot figcaption {
    padding: 10px 13px 13px;
    font-size: .78rem;
    line-height: 1.45;
    color: #6B7280;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Visit + hours */
.t7-visit strong { display: block; font-size: .95rem; }
.t7-addr { margin-top: 5px; font-size: .87rem; color: #3A424F; line-height: 1.55; }
.t7-contact-lines { display: flex; flex-direction: column; gap: 3px; margin: 9px 0 12px; }
.t7-contact-lines a { color: var(--brand); font-weight: 600; font-size: .87rem; text-decoration: none; }
.t7-open { font-size: .68rem; padding: 2px 8px; border-radius: 999px; margin-left: 6px; letter-spacing: 0; text-transform: none; }
.t7-open.on { background: color-mix(in srgb, var(--brand) 14%, #fff); color: var(--brand); }
.t7-open.off { background: #F1F3F7; color: #6B7280; }
.t7-hours-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.t7-hours-table td { padding: 6px 0; border-bottom: 1px solid #EEF0F4; color: #3A424F; }
.t7-hours-table td:last-child { text-align: right; color: #6B7280; }
.t7-hours-table tr.today td { font-weight: 700; color: #14181F; }

/* Form + closing CTA */
.t7-form .form-field { margin-bottom: 12px; }
.t7-form input, .t7-form textarea, .t7-form select { border-radius: 11px; }
.t7-form .btn { width: 100%; }
.t7-cta { background: var(--brand); border-color: var(--brand); text-align: center; padding: 24px 18px; }
.t7-cta h2 { margin: 0 0 14px; color: #fff; font-size: 1.16rem; font-weight: 700; letter-spacing: -.01em; }
.t7-cta-btns { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
.t7-cta-a, .t7-cta-b { padding: 12px 18px; border-radius: 12px; font-weight: 700; font-size: .89rem; text-decoration: none; }
.t7-cta-a { background: #fff; color: var(--brand); }
.t7-cta-b { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.55); }

.t7-foot { text-align: center; padding: 22px 18px calc(22px + var(--bar-h)); color: #7B8494; font-size: .8rem; line-height: 1.7; }
.t7-foot a { color: inherit; text-decoration: none; }

@media (min-width: 760px) {
    .t7-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 18px 14px; }
    .t7-group { grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .t7-rail { grid-auto-columns: minmax(240px, 1fr); gap: 14px; }
    .t7-wide { grid-column: span 2; }
    .t7-hero, .t7-head, .t7-cta, .t7-form { grid-column: 1 / -1; }
    .t7-rev { grid-column: span 2; }
    .t7-hero { min-height: 300px; }
    .t7-h1 { font-size: 2.2rem; }
    .t7-shots { grid-auto-columns: minmax(280px, 1fr); gap: 14px; }
}

/* ============================================================
   Theme 8 — Journey (round 15)
   ------------------------------------------------------------
   A single vertical rail runs the length of the page and every
   section is a numbered stop hanging off it. The rail is the
   ::before line on .t8-rail; each .t8-num sits on top of it, so
   the page reads as one sequence instead of separate blocks.
   Stops are conditional in PHP, so numbers are counted at render
   time and never leave a gap.
   ============================================================ */
[data-theme="8"] { background: #FBF9F5; font-family: 'Sora', 'Hind', sans-serif; color: #1A1A19; }
[data-theme="8"] .btn { border-radius: 10px; }

.t8-bar { position: sticky; top: 0; z-index: 20; background: rgba(251,249,245,.93); backdrop-filter: blur(10px); border-bottom: 1px solid #E9E3D8; }
.t8-bar-in { max-width: 780px; margin: 0 auto; padding: 8px 18px; display: flex; align-items: center; gap: 10px; }
.t8-logo { object-fit: contain; border-radius: 7px; }
.t8-logo.logo-square { width: 38px; height: 38px; }
.t8-logo.logo-rectangle { width: auto; max-width: 124px; height: 38px; }
.t8-brand { font-weight: 600; font-size: .98rem; letter-spacing: -.01em; }
.t8-menu { margin-left: auto; position: relative; }
.t8-menu-btn { list-style: none; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; cursor: pointer; user-select: none; border: 1px solid #E0D8CA; background: #fff; }
.t8-menu-btn::-webkit-details-marker { display: none; }
.t8-menu-btn::marker { content: ''; }
.t8-menu-list { position: absolute; top: 46px; right: 0; background: #fff; border: 1px solid #E9E3D8; border-radius: 12px; box-shadow: 0 14px 32px rgba(26,26,25,.13); padding: 6px; min-width: 178px; display: flex; flex-direction: column; z-index: 30; }
.t8-menu-list a { padding: 10px 13px; border-radius: 8px; color: #1A1A19; text-decoration: none; font-weight: 500; font-size: .89rem; }
.t8-menu-list a:hover { background: #F5F1E9; }

/* Opening block — sits above the rail */
.t8-open { max-width: 780px; margin: 0 auto; padding: 30px 18px 8px; }
.t8-kicker { margin: 0 0 8px; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.t8-h1 { margin: 0; font-size: 2.1rem; line-height: 1.08; font-weight: 600; letter-spacing: -.035em; }
.t8-lede { margin: 13px 0 0; font-size: .97rem; line-height: 1.62; color: #4A4A46; max-width: 56ch; }
.t8-proof { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.t8-proof-item { display: flex; align-items: baseline; gap: 6px; padding: 8px 13px; border-radius: 10px; background: #fff; border: 1px solid #EAE4D8; font-size: .84rem; }
.t8-proof-item b { font-weight: 600; }
.t8-proof-item i { font-style: normal; color: #78766E; font-size: .78rem; }
.t8-proof-on b { color: var(--brand); }
.t8-proof-off b { color: #78766E; }
.t8-stars { color: var(--star); font-size: .78rem; letter-spacing: .5px; }
.t8-acts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.t8-act { padding: 12px 18px; border-radius: 10px; font-weight: 600; font-size: .89rem; text-decoration: none; }
.t8-act-wa { background: var(--wa); color: #fff; }
.t8-act-call { background: #fff; color: #1A1A19; border: 1px solid #E0D8CA; }
.t8-open-img { max-width: 780px; margin: 22px auto 0; padding: 0 18px; }
.t8-open-img img { width: 100%; height: 230px; object-fit: cover; border-radius: 16px; display: block; }

/* The rail itself */
.t8-rail { max-width: 780px; margin: 0 auto; padding: 8px 18px 0; position: relative; }
.t8-rail::before { content: ''; position: absolute; left: 33px; top: 34px; bottom: 34px; width: 1px; background: linear-gradient(to bottom, #DED6C6, #DED6C6 70%, transparent); }
.t8-stop { position: relative; padding: 26px 0 4px 52px; }
.t8-num { position: absolute; left: 16px; top: 30px; width: 35px; height: 35px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .76rem; font-weight: 600; letter-spacing: .02em; z-index: 2; }
.t8-num-last { background: #1A1A19; }
.t8-stop-body { min-width: 0; }
.t8-stop-last { padding-bottom: 10px; }
.t8-h2 { margin: 0 0 14px; font-size: 1.2rem; font-weight: 600; letter-spacing: -.022em; line-height: 1.25; scroll-margin-top: 66px; }
.t8-h2-aside { font-size: .8rem; font-weight: 500; color: #78766E; }
.t8-stop[id] { scroll-margin-top: 60px; }

/* Why us */
.t8-why { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.t8-why li { position: relative; padding-left: 24px; font-size: .93rem; line-height: 1.5; }
.t8-why li::before { content: '—'; position: absolute; left: 0; color: var(--brand); font-weight: 600; }

/* Services as rows, not cards */
.t8-svcs { display: flex; flex-direction: column; }
.t8-svc { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-top: 1px solid #EAE4D8; text-decoration: none; color: inherit; }
.t8-svc:last-child { border-bottom: 1px solid #EAE4D8; }
.t8-svc img { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }
.t8-svc-txt { flex: 1; min-width: 0; }
.t8-svc-txt b { display: block; font-size: .93rem; font-weight: 600; }
.t8-svc-txt span { display: block; font-size: .81rem; color: #78766E; margin-top: 2px; line-height: 1.45; }
.t8-svc em { font-style: normal; font-size: .8rem; font-weight: 600; color: var(--brand); flex: 0 0 auto; }

/* How it works — nested steps inside the stop */
.t8-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.t8-steps li { display: flex; gap: 12px; padding: 0 0 18px; position: relative; }
.t8-steps li:not(:last-child)::before { content: ''; position: absolute; left: 12px; top: 27px; bottom: 4px; width: 1px; background: #E4DCCC; }
.t8-step-n { flex: 0 0 auto; width: 25px; height: 25px; border-radius: 50%; border: 1px solid var(--brand); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 600; background: #FBF9F5; z-index: 1; }
.t8-steps b { display: block; font-size: .92rem; font-weight: 600; }
.t8-steps p { margin: 3px 0 0; font-size: .85rem; line-height: 1.55; color: #63615A; }

/* Reviews as pull quotes */
.t8-rev { margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid #EAE4D8; }
.t8-rev:last-of-type { border-bottom: none; }
.t8-rev p { margin: 7px 0 8px; font-size: 1rem; line-height: 1.55; letter-spacing: -.012em; }
.t8-rev cite { font-style: normal; font-size: .82rem; font-weight: 600; }
.t8-rev cite i { font-style: normal; font-weight: 400; color: #8B8880; margin-left: 4px; }
.t8-vtick { color: var(--brand); font-size: .74rem; }
.t8-reply { margin-top: 10px; padding-left: 13px; border-left: 2px solid var(--brand); font-size: .84rem; line-height: 1.55; color: #4A4A46; }
.t8-reply b { display: block; font-size: .74rem; color: var(--brand); font-weight: 600; margin-bottom: 2px; }
.t8-empty { font-size: .9rem; color: #78766E; margin: 0; }
.t8-revlinks { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; margin-top: 14px; }
.t8-outbtn { display: inline-block; margin-top: 8px; padding: 9px 15px; border-radius: 9px; border: 1px solid var(--brand); color: var(--brand); font-weight: 600; font-size: .84rem; text-decoration: none; }
.t8-link { color: var(--brand); font-weight: 500; font-size: .87rem; text-decoration: none; }

/* Photos */
.t8-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.t8-shots figure { margin: 0; }
.t8-shots img { width: 100%; height: 132px; object-fit: cover; border-radius: 12px; display: block; }
.t8-shots figcaption { margin-top: 5px; font-size: .76rem; color: #8B8880; }

/* Visit */
.t8-visit { display: flex; flex-direction: column; gap: 20px; }
.t8-visit strong { display: block; font-size: .93rem; font-weight: 600; margin-bottom: 5px; }
.t8-visit p { margin: 0 0 7px; font-size: .89rem; line-height: 1.55; color: #4A4A46; }
.t8-hours { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: 4px; }
.t8-hours td { padding: 6px 0; border-bottom: 1px solid #EFE9DD; color: #4A4A46; }
.t8-hours td:last-child { text-align: right; color: #78766E; }
.t8-hours tr.today td { font-weight: 600; color: #1A1A19; }

/* Form */
.t8-form .form-field { margin-bottom: 12px; }
.t8-form input, .t8-form textarea, .t8-form select { border-radius: 10px; }
.t8-form .btn { width: 100%; }

/* Closing */
.t8-end { max-width: 780px; margin: 26px auto 0; padding: 30px 18px; text-align: center; border-top: 1px solid #E9E3D8; }
.t8-end h2 { margin: 0 0 16px; font-size: 1.22rem; font-weight: 600; letter-spacing: -.022em; }
.t8-end-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.t8-end-a, .t8-end-b { padding: 12px 22px; border-radius: 10px; font-weight: 600; font-size: .89rem; text-decoration: none; }
.t8-end-a { background: var(--brand); color: #fff; }
.t8-end-b { background: #fff; color: #1A1A19; border: 1px solid #E0D8CA; }
.t8-foot { text-align: center; padding: 20px 18px calc(20px + var(--bar-h)); color: #8B8880; font-size: .79rem; line-height: 1.7; }
.t8-foot a { color: inherit; text-decoration: none; }

@media (min-width: 700px) {
    .t8-h1 { font-size: 2.9rem; }
    .t8-open { padding-top: 46px; }
    .t8-open-img img { height: 320px; }
    .t8-stop { padding-left: 66px; }
    .t8-rail::before { left: 39px; }
    .t8-num { left: 18px; width: 43px; height: 43px; font-size: .84rem; }
    .t8-shots { grid-template-columns: repeat(3, 1fr); }
    .t8-shots img { height: 150px; }
    .t8-visit { flex-direction: row; gap: 44px; }
    .t8-visit > div { flex: 1; }
}

/* ============================================================
   Theme 9 — Card (round 16)
   ------------------------------------------------------------
   A digital visiting card: narrow centred column, profile head,
   then full-width tap targets. Detail lives in <details> rows so
   the first screen stays actions-only while the text is still in
   the HTML for crawlers. Deliberately capped at 470px even on a
   desktop — widening it would turn it back into a web page.
   ============================================================ */
[data-theme="9"] { background: #F2F3F7; font-family: 'Plus Jakarta Sans', 'Hind', sans-serif; color: #191B22; }
[data-theme="9"] .btn { border-radius: 13px; }

.t9-shell { max-width: 470px; margin: 0 auto; padding: 0 14px calc(18px + var(--bar-h)); }

/* Profile head */
.t9-head { position: relative; margin-bottom: 16px; }
.t9-cover { height: 132px; border-radius: 0 0 22px 22px; overflow: hidden; margin: 0 -14px; }
.t9-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t9-cover-plain { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #000)); }
.t9-avatar { position: relative; display: block; margin: -38px auto 0; background: #fff; border: 3px solid #F2F3F7; box-shadow: 0 5px 16px rgba(25,27,34,.13); }
.t9-avatar.logo-square { width: 88px; height: 88px; border-radius: 26px; object-fit: cover; }
.t9-avatar.logo-rectangle { width: auto; max-width: 190px; height: 66px; border-radius: 16px; object-fit: contain; padding: 8px 14px; margin-top: -30px; }
.t9-id { text-align: center; padding: 11px 4px 0; }
.t9-id-nologo { padding-top: 18px; }
.t9-name { margin: 0; font-size: 1.42rem; font-weight: 800; letter-spacing: -.028em; line-height: 1.2; }
.t9-role { margin: 4px 0 0; font-size: .89rem; color: #666B7A; }
.t9-badges { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 12px; }
.t9-badge { display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border-radius: 999px; background: #fff; border: 1px solid #E3E5EC; font-size: .77rem; font-weight: 600; }
.t9-badge i { font-style: normal; font-weight: 500; color: #858A99; }
.t9-badge-on { background: color-mix(in srgb, var(--brand) 12%, #fff); border-color: color-mix(in srgb, var(--brand) 30%, #fff); color: var(--brand); }
.t9-badge-off { color: #666B7A; }
.t9-stars { color: var(--star); font-size: .74rem; letter-spacing: .5px; }

/* Action buttons */
.t9-actions { display: flex; flex-direction: column; gap: 9px; }
.t9-btn { display: flex; align-items: center; gap: 11px; padding: 15px 16px; border-radius: 15px; background: #fff; border: 1px solid #E3E5EC; text-decoration: none; color: #191B22; font-weight: 700; font-size: .93rem; box-shadow: 0 1px 2px rgba(25,27,34,.04); transition: transform .12s ease; }
.t9-btn:active { transform: scale(.985); }
.t9-btn span:nth-child(2) { flex: 1; min-width: 0; }
.t9-btn-ico { font-size: 1.06rem; flex: 0 0 auto; }
.t9-btn-go { color: #B4B8C4; font-size: 1.15rem; flex: 0 0 auto; }
.t9-btn-wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.t9-btn-wa .t9-btn-go { color: rgba(255,255,255,.65); }

/* Collapsible rows */
.t9-folds { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.t9-fold { background: #fff; border: 1px solid #E3E5EC; border-radius: 15px; overflow: hidden; scroll-margin-top: 14px; }
.t9-fold > summary { list-style: none; cursor: pointer; padding: 15px 16px; font-weight: 700; font-size: .93rem; display: flex; align-items: center; gap: 8px; user-select: none; }
.t9-fold > summary::-webkit-details-marker { display: none; }
.t9-fold > summary::marker { content: ''; }
.t9-fold > summary::after { content: '⌄'; margin-left: auto; color: #B4B8C4; font-size: 1.05rem; line-height: 1; transition: transform .18s ease; }
.t9-fold[open] > summary::after { transform: rotate(180deg); }
.t9-count { font-size: .76rem; font-weight: 600; color: #858A99; background: #F2F3F7; padding: 3px 9px; border-radius: 999px; }
.t9-fold-body { padding: 0 16px 16px; }
.t9-about { margin: 0 0 10px; font-size: .89rem; line-height: 1.6; color: #4A4F5E; }
.t9-muted { margin: 0; font-size: .87rem; color: #858A99; }
.t9-why { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.t9-why li { position: relative; padding-left: 21px; font-size: .87rem; line-height: 1.45; }
.t9-why li::before { content: '✓'; position: absolute; left: 0; color: var(--brand); font-weight: 700; font-size: .8rem; }

/* Service rows inside a fold */
.t9-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid #EEF0F4; text-decoration: none; color: inherit; }
.t9-row:first-child { border-top: none; padding-top: 2px; }
.t9-row img { width: 46px; height: 46px; border-radius: 11px; object-fit: cover; flex: 0 0 auto; }
.t9-row-txt { flex: 1; min-width: 0; }
.t9-row-txt b { display: block; font-size: .89rem; font-weight: 700; }
.t9-row-txt i { display: block; font-style: normal; font-size: .79rem; color: #858A99; margin-top: 2px; line-height: 1.4; }
.t9-row-go { flex: 0 0 auto; font-size: .79rem; font-weight: 700; color: var(--brand); }

/* Reviews inside a fold */
.t9-rev { padding: 11px 0; border-top: 1px solid #EEF0F4; }
.t9-rev:first-child { border-top: none; padding-top: 2px; }
.t9-rev p { margin: 6px 0 6px; font-size: .87rem; line-height: 1.55; color: #2C313D; }
.t9-rev-by { font-size: .77rem; font-weight: 600; color: #666B7A; }
.t9-rev-by em { font-style: normal; color: var(--brand); }
.t9-rev-reply { margin-top: 8px; padding: 9px 11px; border-radius: 11px; background: #F5F6FA; font-size: .81rem; line-height: 1.5; color: #4A4F5E; }
.t9-rev-reply b { display: block; font-size: .72rem; color: var(--brand); margin-bottom: 2px; }
.t9-fold-links { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 13px; }
.t9-ghost { display: inline-block; margin-top: 8px; padding: 9px 15px; border-radius: 11px; border: 1.5px solid var(--brand); color: var(--brand); font-weight: 700; font-size: .83rem; text-decoration: none; }
.t9-textlink { color: var(--brand); font-weight: 600; font-size: .86rem; text-decoration: none; }

.t9-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.t9-shots figure { margin: 0; }
.t9-shots img { width: 100%; height: 112px; object-fit: cover; border-radius: 12px; display: block; }
.t9-shots figcaption { margin-top: 4px; font-size: .74rem; color: #858A99; }

.t9-hours { width: 100%; border-collapse: collapse; font-size: .85rem; }
.t9-hours td { padding: 7px 0; border-bottom: 1px solid #EEF0F4; color: #4A4F5E; }
.t9-hours td:last-child { text-align: right; color: #858A99; }
.t9-hours tr:last-child td { border-bottom: none; }
.t9-hours tr.today td { font-weight: 700; color: #191B22; }

/* Form card */
.t9-formcard { margin-top: 16px; background: #fff; border: 1px solid #E3E5EC; border-radius: 18px; padding: 18px 16px; scroll-margin-top: 14px; }
.t9-formcard h2 { margin: 0 0 14px; font-size: 1.06rem; font-weight: 800; letter-spacing: -.02em; }
.t9-formcard .form-field { margin-bottom: 12px; }
.t9-formcard input, .t9-formcard textarea, .t9-formcard select { border-radius: 12px; }
.t9-formcard .btn { width: 100%; }

.t9-foot { text-align: center; padding: 20px 8px 6px; color: #858A99; font-size: .77rem; line-height: 1.75; }
.t9-foot a { color: inherit; text-decoration: none; }

/* ============================================================
   Theme 10 — Answers (round 17)
   ------------------------------------------------------------
   Question-led. Legibility is the whole design: 17px base, high
   contrast, a measure capped near 68ch, and answers whose first
   line carries weight. No cover image, no cards, no decoration
   competing with the text — which also makes it the fastest and
   plainest template for an older customer or a slow phone.
   ============================================================ */
[data-theme="10"] { background: #FFFFFF; font-family: 'Inter', 'Hind', sans-serif; color: #101418; font-size: 17px; }
[data-theme="10"] .btn { border-radius: 8px; }

.t10-bar { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 2px solid #101418; }
.t10-bar-in { max-width: 720px; margin: 0 auto; padding: 10px 18px; display: flex; align-items: center; gap: 11px; }
.t10-logo { object-fit: contain; }
.t10-logo.logo-square { width: 36px; height: 36px; border-radius: 6px; }
.t10-logo.logo-rectangle { width: auto; max-width: 122px; height: 36px; }
.t10-brand { font-weight: 700; font-size: 1rem; letter-spacing: -.015em; }
.t10-bar-cta { margin-left: auto; padding: 9px 15px; border-radius: 8px; background: var(--wa); color: #fff; font-weight: 600; font-size: .84rem; text-decoration: none; }

.t10-wrap { max-width: 720px; margin: 0 auto; padding: 0 18px; }

/* Quotable summary block */
.t10-summary { padding: 26px 0 24px; border-bottom: 2px solid #101418; }
.t10-h1 { margin: 0 0 14px; font-size: 1.72rem; line-height: 1.22; font-weight: 800; letter-spacing: -.03em; }
.t10-lede { margin: 0 0 18px; font-size: 1.02rem; line-height: 1.62; color: #26303A; max-width: 68ch; }
.t10-lede strong { font-weight: 700; color: #101418; }
.t10-facts { list-style: none; margin: 0 0 20px; padding: 0; border-top: 1px solid #DDE3E8; }
.t10-facts li { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid #DDE3E8; font-size: .93rem; }
.t10-facts b { flex: 0 0 92px; font-weight: 600; color: #5A6672; }
.t10-facts span { flex: 1; min-width: 0; }
.t10-facts a { color: var(--brand); text-decoration: none; font-weight: 600; }
.t10-sumacts { display: flex; flex-wrap: wrap; gap: 10px; }
.t10-cta { padding: 13px 20px; border-radius: 8px; font-weight: 600; font-size: .93rem; text-decoration: none; border: 2px solid #101418; color: #101418; }
.t10-cta-wa { background: var(--wa); border-color: var(--wa); color: #fff; }

/* Question / answer blocks */
.t10-qa { padding: 26px 0; border-bottom: 1px solid #DDE3E8; scroll-margin-top: 66px; }
.t10-q { margin: 0 0 10px; font-size: 1.2rem; line-height: 1.32; font-weight: 700; letter-spacing: -.022em; max-width: 60ch; }
.t10-a { margin: 0; font-size: 1.02rem; line-height: 1.65; color: #26303A; max-width: 68ch; }
.t10-list { margin: 12px 0 0; padding: 0; list-style: none; max-width: 68ch; }
.t10-list li { position: relative; padding: 5px 0 5px 22px; font-size: .97rem; line-height: 1.55; }
.t10-list li::before { content: ''; position: absolute; left: 4px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }

/* Services listed, not carded */
.t10-svcs { list-style: none; margin: 16px 0 0; padding: 0; }
.t10-svcs li { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid #DDE3E8; }
.t10-svcs li > div { flex: 1; min-width: 200px; }
.t10-svcs b { display: block; font-size: 1rem; font-weight: 700; }
.t10-svcs span { display: block; font-size: .92rem; color: #5A6672; margin-top: 2px; line-height: 1.5; }
.t10-svcs a { color: var(--brand); font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap; }

.t10-outbtn { display: inline-block; margin-top: 15px; padding: 11px 17px; border-radius: 8px; border: 2px solid var(--brand); color: var(--brand); font-weight: 600; font-size: .9rem; text-decoration: none; }
.t10-textlink { color: var(--brand); font-weight: 600; font-size: .93rem; text-decoration: underline; }

.t10-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
.t10-shots figure { margin: 0; }
.t10-shots img { width: 100%; height: 138px; object-fit: cover; border-radius: 8px; display: block; }
.t10-shots figcaption { margin-top: 5px; font-size: .84rem; color: #5A6672; }

/* Reviews as plain quoted text */
.t10-stars { color: var(--star); font-size: .88rem; letter-spacing: 1px; }
.t10-rev { margin-top: 18px; padding-left: 15px; border-left: 3px solid #DDE3E8; }
.t10-rev p { margin: 5px 0 6px; font-size: 1rem; line-height: 1.6; color: #26303A; }
.t10-rev-by { font-size: .88rem; color: #5A6672; font-weight: 600; }
.t10-rev-reply { margin-top: 8px; font-size: .93rem; line-height: 1.6; color: #26303A; }
.t10-rev-reply b { color: var(--brand); }
.t10-revlinks { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }

.t10-form { margin-top: 18px; max-width: 520px; }
.t10-form .form-field { margin-bottom: 14px; }
.t10-form input, .t10-form textarea, .t10-form select { border-radius: 8px; font-size: 1rem; }
.t10-form .btn { width: 100%; padding: 14px; font-size: 1rem; }

.t10-foot { max-width: 720px; margin: 0 auto; padding: 24px 18px calc(24px + var(--bar-h)); color: #5A6672; font-size: .88rem; line-height: 1.75; }
.t10-foot a { color: inherit; }

@media (min-width: 700px) {
    .t10-h1 { font-size: 2.32rem; }
    .t10-q { font-size: 1.38rem; }
    .t10-shots { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Theme 11 — Signboard (round 19)
   ------------------------------------------------------------
   Borrowed from the hand-painted shopfront board rather than from
   the usual "premium site" kit: a brand-coloured board with a
   double keyline inset, the name in Rozha One (high-contrast, and
   it carries Devanagari so a Marathi name sets properly), services
   with dotted leaders like a price board, photographs as keylined
   plates. The board is the only loud element — everything below it
   is ivory paper, hairlines and text, with no boxes or shadows.
   ============================================================ */
[data-theme="11"] {
    --ink:   #1D1A15;
    --paper: #FAF7F0;
    --rule:  #DCD3C2;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Hind', sans-serif;
}
[data-theme="11"] .btn { border-radius: 2px; }
[data-theme="11"] a:focus-visible,
[data-theme="11"] button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* The board */
.t11-board { background: var(--brand); padding: 14px; }
.t11-keyline {
    border: 1px solid rgba(255,255,255,.55);
    outline: 3px solid var(--brand);
    outline-offset: 3px;
    box-shadow: inset 0 0 0 5px var(--brand), inset 0 0 0 6px rgba(255,255,255,.3);
    padding: 34px 22px 26px;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}
.t11-logo { display: block; margin: 0 auto 16px; background: rgba(255,255,255,.94); }
.t11-logo.logo-square { width: 74px; height: 74px; object-fit: contain; padding: 8px; }
.t11-logo.logo-rectangle { width: auto; max-width: 210px; height: 62px; object-fit: contain; padding: 8px 14px; }
.t11-name {
    font-family: 'Rozha One', 'Hind', serif;
    font-weight: 400;
    font-size: clamp(2.3rem, 11vw, 3.9rem);
    line-height: 1.02;
    letter-spacing: .004em;
    margin: 0;
    color: #fff;
}
.t11-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.t11-trade { margin: 12px 0 0; font-size: 1.06rem; font-weight: 500; color: rgba(255,255,255,.93); }
.t11-place { margin: 2px 0 0; font-size: .93rem; color: rgba(255,255,255,.86); }

.t11-plate { margin: 20px auto 0; padding: 11px 16px; background: rgba(255,255,255,.1); border-top: 1px solid rgba(255,255,255,.28); border-bottom: 1px solid rgba(255,255,255,.28); display: flex; flex-direction: column; gap: 3px; align-items: center; }
.t11-open { font-size: 1rem; font-weight: 600; color: #fff; }
.t11-open.is-shut { color: rgba(255,255,255,.88); }
.t11-plate-sub { font-size: .86rem; color: rgba(255,255,255,.88); }
.t11-stars { color: #F4C95D; letter-spacing: 1px; }

.t11-calls { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.t11-call { padding: 13px 22px; background: #fff; color: var(--brand); font-weight: 600; font-size: .95rem; text-decoration: none; border: 1px solid #fff; }
.t11-call-quiet { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }

/* Paper */
.t11-paper { max-width: 660px; margin: 0 auto; padding: 34px 22px 0; }
.t11-intro { margin: 0; font-size: 1.08rem; line-height: 1.72; color: #33302A; }
.t11-marks { margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.t11-marks li { padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 1rem; }

.t11-sec { margin-top: 44px; }
.t11-h2 { font-family: 'Rozha One', 'Hind', serif; font-weight: 400; font-size: 1.85rem; line-height: 1.2; margin: 0 0 18px; color: var(--ink); }

/* Price-board list with dotted leaders */
.t11-menu { list-style: none; margin: 0; padding: 0; }
.t11-menu-row { padding: 13px 0; border-bottom: 1px solid var(--rule); }
.t11-menu-row:first-child { border-top: 1px solid var(--rule); }
.t11-menu-link { display: flex; align-items: baseline; gap: 9px; text-decoration: none; color: var(--ink); }
.t11-menu-name { font-size: 1.08rem; font-weight: 600; }
.t11-leader { flex: 1; min-width: 22px; border-bottom: 1px dotted #B9AE99; transform: translateY(-4px); }
.t11-menu-ask { font-size: .93rem; font-weight: 600; color: var(--brand); white-space: nowrap; }
.t11-menu-note { margin: 4px 0 0; font-size: .93rem; line-height: 1.6; color: #6B6558; max-width: 62ch; }

/* Keylined photo plates */
.t11-plates { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.t11-plate-img { margin: 0; padding: 7px; border: 1px solid var(--rule); background: #fff; }
.t11-plate-img img { width: 100%; height: 150px; object-fit: cover; display: block; }
.t11-plate-img figcaption { padding: 8px 2px 2px; font-size: .86rem; color: #6B6558; }
.t11-plate-lead { padding: 9px; margin-bottom: 30px; }
.t11-plate-lead img { height: 260px; }

/* Reviews */
.t11-quote { margin: 0 0 28px; padding: 0; }
.t11-quote p { margin: 0; font-family: 'Rozha One', 'Hind', serif; font-weight: 400; font-size: 1.3rem; line-height: 1.5; color: #2A2721; }
.t11-quote footer { margin-top: 9px; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.t11-quote .t11-stars { color: #C99A2E; font-size: .9rem; }
.t11-quote-by { font-size: .9rem; color: #6B6558; }
.t11-answer { margin: 12px 0 0; padding-left: 15px; border-left: 2px solid var(--brand); font-size: .96rem; line-height: 1.65; color: #4A463D; }
.t11-answer-by { font-weight: 600; color: var(--brand); }
.t11-quiet { margin: 0; font-size: 1rem; color: #6B6558; }
.t11-links { margin: 18px 0 0; display: flex; gap: 22px; flex-wrap: wrap; }
.t11-links a { color: var(--brand); font-weight: 600; font-size: .96rem; text-underline-offset: 4px; }

/* Visit */
.t11-visit { display: flex; flex-direction: column; gap: 26px; }
.t11-visit-col { flex: 1; }
.t11-addr { margin: 0; font-size: 1rem; line-height: 1.7; color: #33302A; }
.t11-legal { font-weight: 600; }
.t11-hours { width: 100%; border-collapse: collapse; font-size: .96rem; }
.t11-hours td { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.t11-hours td:last-child { text-align: right; color: #6B6558; }
.t11-hours tr.today td { font-weight: 600; color: var(--ink); }

/* Form */
.t11-form { max-width: 460px; }
.t11-form .form-field { margin-bottom: 14px; }
.t11-form input, .t11-form textarea, .t11-form select { border-radius: 2px; border-color: var(--rule); background: #fff; }
.t11-form .btn { width: 100%; padding: 14px; }

/* Foot */
.t11-foot { max-width: 660px; margin: 46px auto 0; padding: 26px 22px calc(26px + var(--bar-h)); border-top: 1px solid var(--rule); text-align: center; color: #6B6558; font-size: .9rem; line-height: 1.7; }
.t11-mono { display: inline-block; font-family: 'Rozha One', 'Hind', serif; font-size: 1.6rem; color: var(--brand); line-height: 1; margin-bottom: 10px; }
.t11-foot p { margin: 0 0 4px; }
.t11-foot a { color: inherit; }

@media (min-width: 700px) {
    .t11-board { padding: 22px; }
    .t11-keyline { padding: 52px 40px 40px; }
    .t11-plate { max-width: 420px; }
    .t11-plates { grid-template-columns: repeat(3, 1fr); }
    .t11-plate-lead img { height: 330px; }
    .t11-visit { flex-direction: row; gap: 46px; }
    .t11-quote p { font-size: 1.45rem; }
}

/* ============================================================
   Theme 12 — Landing (round 20)
   ------------------------------------------------------------
   The conventional one-pager: full-height hero, sticky anchor bar
   that marks the current section, alternating bands instead of
   boxes, a numbers band, closing call to action. Sections are
   separated by background colour, so nothing here needs a card,
   a border or a shadow.
   ============================================================ */
[data-theme="12"] {
    --band:      #FFFFFF;
    --band-tint: #F4F6F8;
    --band-dark: #131A22;
    --t12-ink:   #131A22;
    --t12-soft:  #5B6672;
    background: var(--band);
    color: var(--t12-ink);
    font-family: 'Figtree', 'Hind', sans-serif;
}
[data-theme="12"] .btn { border-radius: 10px; }
[data-theme="12"] a:focus-visible,
[data-theme="12"] button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.t12-in { max-width: 1020px; margin: 0 auto; padding: 0 20px; }

/* Hero */
.t12-hero { position: relative; min-height: 88vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 70px 20px 90px; background: var(--brand); overflow: hidden; }
.t12-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t12-hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,14,19,.62), rgba(10,14,19,.78)); }
.t12-hero-in { position: relative; z-index: 2; max-width: 720px; }
.t12-hero-logo { display: block; margin: 0 auto 20px; background: rgba(255,255,255,.95); border-radius: 12px; }
.t12-hero-logo.logo-square { width: 76px; height: 76px; object-fit: contain; padding: 8px; }
.t12-hero-logo.logo-rectangle { width: auto; max-width: 200px; height: 60px; object-fit: contain; padding: 8px 14px; }
.t12-hero-brand { margin: 0 0 10px; font-size: 1rem; font-weight: 600; color: rgba(255,255,255,.9); }
.t12-hero-h1 { margin: 0; font-size: clamp(2.05rem, 8vw, 3.5rem); line-height: 1.08; font-weight: 800; letter-spacing: -.032em; color: #fff; }
.t12-hero-sub { margin: 16px auto 0; max-width: 54ch; font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,.9); }
.t12-hero-btns { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; }
.t12-primary { padding: 15px 26px; border-radius: 10px; background: #fff; color: var(--t12-ink); font-weight: 700; font-size: .97rem; text-decoration: none; }
.t12-secondary { padding: 15px 26px; border-radius: 10px; background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.65); color: #fff; font-weight: 700; font-size: .97rem; text-decoration: none; }
.t12-scrollcue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2; width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.6); border-radius: 14px; display: flex; justify-content: center; padding-top: 7px; }
.t12-scrollcue span { width: 3px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.85); }

/* Sticky anchor bar */
.t12-nav { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid #E4E8EC; }
.t12-nav-in { max-width: 1020px; margin: 0 auto; padding: 0 12px; display: flex; align-items: center; gap: 10px; }
.t12-nav-links { display: flex; gap: 2px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.t12-nav-links::-webkit-scrollbar { display: none; }
.t12-nav-links a { padding: 15px 12px; font-size: .89rem; font-weight: 600; color: var(--t12-soft); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
.t12-nav-links a.is-here { color: var(--brand); border-bottom-color: var(--brand); }
.t12-nav-cta { flex: 0 0 auto; padding: 9px 15px; border-radius: 8px; background: var(--wa); color: #fff; font-weight: 700; font-size: .85rem; text-decoration: none; }

/* Bands */
.t12-band { padding: 58px 0; background: var(--band); scroll-margin-top: 54px; }
.t12-band-tint { background: var(--band-tint); }
.t12-band-dark { background: var(--band-dark); color: #fff; }
.t12-band-cta { background: var(--brand); color: #fff; }
.t12-h2 { margin: 0 0 26px; font-size: clamp(1.5rem, 5vw, 2.05rem); line-height: 1.18; font-weight: 800; letter-spacing: -.028em; }

/* Services */
.t12-svcs { display: grid; grid-template-columns: 1fr; gap: 16px; }
.t12-svc { display: block; text-decoration: none; color: inherit; padding-bottom: 18px; border-bottom: 1px solid #E4E8EC; }
.t12-svc img { width: 100%; height: 168px; object-fit: cover; border-radius: 12px; margin-bottom: 14px; }
.t12-svc h3 { margin: 0; font-size: 1.12rem; font-weight: 700; letter-spacing: -.015em; }
.t12-svc p { margin: 6px 0 0; font-size: .95rem; line-height: 1.6; color: var(--t12-soft); }
.t12-svc-ask { display: inline-block; margin-top: 10px; font-size: .89rem; font-weight: 700; color: var(--brand); }

/* Numbers band */
.t12-stats { background: var(--t12-ink); color: #fff; padding: 34px 0; }
.t12-stats-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
.t12-stat b { display: block; font-size: 1.85rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.t12-stat span { display: block; margin-top: 6px; font-size: .87rem; color: rgba(255,255,255,.72); }

/* Why us */
.t12-why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2px; }
.t12-why li { position: relative; padding: 15px 0 15px 34px; border-bottom: 1px solid #E1E6EB; font-size: 1.03rem; font-weight: 600; }
.t12-why li::before { content: ''; position: absolute; left: 4px; top: 21px; width: 12px; height: 12px; border-radius: 3px; background: var(--brand); }

/* Work */
.t12-work { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.t12-work figure { margin: 0; }
.t12-work img { width: 100%; height: 155px; object-fit: cover; border-radius: 12px; display: block; }
.t12-work figcaption { margin-top: 7px; font-size: .85rem; color: var(--t12-soft); }

/* Reviews on the dark band */
.t12-revs { display: grid; grid-template-columns: 1fr; gap: 26px; }
.t12-rev { margin: 0; padding: 0; }
.t12-stars { color: #F2C14E; letter-spacing: 1px; font-size: .9rem; }
.t12-rev p { margin: 9px 0 9px; font-size: 1.06rem; line-height: 1.6; color: rgba(255,255,255,.93); }
.t12-rev cite { font-style: normal; font-size: .88rem; color: rgba(255,255,255,.66); }
.t12-reply { font-size: .93rem !important; color: rgba(255,255,255,.75) !important; padding-left: 14px; border-left: 2px solid var(--brand); }
.t12-reply b { color: #fff; }
.t12-empty { margin: 0; font-size: 1rem; color: rgba(255,255,255,.75); }
.t12-revlinks { margin: 26px 0 0; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.t12-outline { display: inline-block; padding: 11px 18px; border-radius: 9px; border: 1.5px solid rgba(255,255,255,.6); color: #fff; font-weight: 700; font-size: .89rem; text-decoration: none; }
.t12-outline-dark { border-color: var(--brand); color: var(--brand); }
.t12-plainlink { color: rgba(255,255,255,.85); font-weight: 600; font-size: .92rem; }

/* Visit */
.t12-visit { display: grid; grid-template-columns: 1fr; gap: 26px; }
.t12-addr { margin: 0 0 10px; font-size: 1.02rem; line-height: 1.65; color: #2B3540; }
.t12-visit-links { margin: 0 0 14px; display: flex; flex-direction: column; gap: 4px; }
.t12-visit-links a { color: var(--brand); font-weight: 600; font-size: .97rem; text-decoration: none; }
.t12-hours { width: 100%; border-collapse: collapse; font-size: .95rem; }
.t12-hours td { padding: 9px 0; border-bottom: 1px solid #E4E8EC; color: #2B3540; }
.t12-hours td:last-child { text-align: right; color: var(--t12-soft); }
.t12-hours tr.today td { font-weight: 700; color: var(--t12-ink); }

/* Closing CTA */
.t12-cta-sub { margin: -14px 0 24px; font-size: 1.03rem; line-height: 1.6; color: rgba(255,255,255,.9); max-width: 56ch; }
.t12-form { max-width: 520px; }
.t12-form .form-field { margin-bottom: 13px; }
.t12-form label { color: rgba(255,255,255,.92); }
.t12-form input, .t12-form textarea, .t12-form select { border-radius: 10px; border-color: rgba(255,255,255,.4); background: #fff; }
.t12-form .btn { width: 100%; padding: 15px; background: #fff; color: var(--brand); border-color: #fff; }

.t12-foot { background: var(--t12-ink); color: rgba(255,255,255,.62); padding: 26px 0 calc(26px + var(--bar-h)); font-size: .87rem; line-height: 1.8; }
.t12-foot p { margin: 0; }
.t12-foot a { color: rgba(255,255,255,.85); }

@media (min-width: 700px) {
    .t12-band { padding: 82px 0; }
    .t12-svcs { grid-template-columns: repeat(3, 1fr); }
    .t12-svc { border-bottom: none; }
    .t12-stats-row { grid-template-columns: repeat(4, 1fr); }
    .t12-stat b { font-size: 2.3rem; }
    .t12-why { grid-template-columns: repeat(2, 1fr); gap: 0 34px; }
    .t12-work { grid-template-columns: repeat(3, 1fr); }
    .t12-work img { height: 190px; }
    .t12-revs { grid-template-columns: repeat(2, 1fr); gap: 34px; }
    .t12-visit { grid-template-columns: 1fr 1fr; gap: 46px; }
}


/* ============================================================
   Theme 13 — Workshop (round 21, rebuilt round 22) — repair trades
   ------------------------------------------------------------
   Rebuilt after the first pass came out flat: it opened on a plain
   colour block and never used the business's own photo. Now the work
   itself is the hero, behind a dark scrim, with the phone number
   landing on an enamel plate over it — the number is the largest
   element on the page because that is what a customer with a dead
   fridge is hunting for.
   Three devices carry the whole theme: the enamel plate, the hazard
   stripe (van livery), and a carbon-copy job card with a perforated
   tear edge. Everything else stays quiet so those read.
   ============================================================ */
[data-theme="13"] {
    --steel:    #E9ECEF;
    --t13-ink:  #14181D;
    --t13-mid:  #5C646E;
    --t13-line: #D3D8DE;
    --t13-warn: #F2C230;
    background: var(--steel);
    color: var(--t13-ink);
    font-family: 'Barlow', 'Hind', sans-serif;
}
[data-theme="13"] .btn { border-radius: 3px; }
[data-theme="13"] a:focus-visible,
[data-theme="13"] button:focus-visible { outline: 3px solid var(--t13-warn); outline-offset: 2px; }

.t13-wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }

/* Hero — the work behind a scrim */
.t13-hero { position: relative; background: var(--brand); overflow: hidden; }
.t13-hero-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t13-hero.has-shot::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(185deg, rgba(12,15,19,.72) 0%, rgba(12,15,19,.86) 62%, rgba(12,15,19,.94) 100%);
}
.t13-hero-in { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 30px 20px 34px; }
.t13-ident { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.t13-logo { background: rgba(255,255,255,.95); border-radius: 3px; flex: 0 0 auto; }
.t13-logo.logo-square { width: 50px; height: 50px; object-fit: contain; padding: 5px; }
.t13-logo.logo-rectangle { width: auto; max-width: 150px; height: 44px; object-fit: contain; padding: 5px 10px; }
.t13-brand { margin: 0; font-size: 1.02rem; font-weight: 600; color: rgba(255,255,255,.9); }

.t13-h1 {
    margin: 0;
    font-family: 'Barlow Condensed', 'Barlow', sans-serif;
    font-size: clamp(2.7rem, 13vw, 4.6rem);
    line-height: .94;
    font-weight: 700;
    letter-spacing: -.012em;
    color: #fff;
    text-transform: uppercase;
}
.t13-h1-where { display: block; font-size: .46em; font-weight: 500; letter-spacing: .01em; color: var(--t13-warn); margin-top: 6px; }

.t13-state { display: inline-flex; align-items: center; gap: 9px; margin: 20px 0 0; padding: 7px 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.4); font-size: .93rem; font-weight: 600; color: #fff; }
.t13-lamp { width: 9px; height: 9px; border-radius: 50%; background: #6FE39B; box-shadow: 0 0 9px #6FE39B; }
.t13-state.is-shut .t13-lamp { background: rgba(255,255,255,.55); box-shadow: none; }
.t13-state-sub { font-weight: 400; color: rgba(255,255,255,.82); }

/* Enamel plate carrying the number */
.t13-plate {
    display: block; position: relative;
    margin: 20px 0 0; padding: 17px 20px 18px;
    background: linear-gradient(180deg, #FCFCFB, #ECEEF0);
    border: 3px solid var(--t13-ink);
    box-shadow: 0 5px 0 rgba(0,0,0,.28);
    text-decoration: none;
}
.t13-plate-rivets { position: absolute; inset: 6px 8px auto; height: 5px; display: block; background-image: radial-gradient(circle, var(--t13-mid) 0 2px, transparent 2px); background-size: 22px 5px; background-repeat: repeat-x; opacity: .5; }
.t13-plate-label { display: block; margin-top: 6px; font-size: .87rem; font-weight: 600; color: var(--t13-mid); }
.t13-plate-no {
    display: block; margin-top: 2px;
    font-family: 'Barlow Condensed', 'Barlow', sans-serif;
    font-size: clamp(2.1rem, 10vw, 3.1rem);
    font-weight: 700; line-height: 1.02; letter-spacing: .004em;
    color: var(--brand);
}
.t13-wa { display: block; margin-top: 10px; padding: 15px 18px; background: var(--wa); color: #fff; font-weight: 600; font-size: .98rem; text-align: center; text-decoration: none; }

/* Van-livery stripe — used twice, nowhere else */
.t13-hazard { height: 12px; background-image: repeating-linear-gradient(-45deg, var(--t13-ink) 0 13px, var(--t13-warn) 13px 26px); }

/* Assurances */
.t13-assure { background: var(--t13-ink); }
.t13-assure-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px 22px; padding: 16px 0; }
.t13-assure-row p { margin: 0; padding: 5px 0; font-size: .92rem; font-weight: 600; line-height: 1.4; color: #fff; }

.t13-intro { margin: 30px 0 0; font-size: 1.04rem; line-height: 1.68; color: #333A43; }
.t13-sec { margin-top: 40px; }
.t13-h2 { margin: 0 0 16px; font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 2rem; font-weight: 700; letter-spacing: .004em; text-transform: uppercase; line-height: 1.06; }
.t13-h2-light { color: #fff; }

/* Docket rows */
.t13-docket { list-style: none; margin: 0; padding: 0; background: #fff; border: 2px solid var(--t13-ink); }
.t13-docket li + li { border-top: 1px solid var(--t13-line); }
.t13-docket a { display: flex; align-items: flex-start; gap: 12px; padding: 14px 15px; text-decoration: none; color: inherit; }
.t13-tick { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 3px; border: 2px solid var(--brand); position: relative; }
.t13-tick::after { content: ''; position: absolute; left: 3px; top: -2px; width: 6px; height: 12px; border: solid var(--brand); border-width: 0 2px 2px 0; transform: rotate(42deg); }
.t13-docket-txt { flex: 1; min-width: 0; }
.t13-docket-txt b { display: block; font-size: 1.04rem; font-weight: 600; }
.t13-docket-txt i { display: block; font-style: normal; margin-top: 2px; font-size: .9rem; line-height: 1.5; color: var(--t13-mid); }
.t13-docket-ask { flex: 0 0 auto; font-size: .9rem; font-weight: 700; color: var(--brand); }

/* Carbon-copy job card */
.t13-jobcard { background: #FFFDF6; border: 2px solid var(--t13-ink); box-shadow: 5px 5px 0 rgba(20,24,29,.14); }
.t13-jobcard-head { display: flex; align-items: baseline; gap: 10px; padding: 11px 16px; background: var(--t13-ink); color: #fff; font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 1.28rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.t13-jobcard-sub { font-family: 'Barlow', sans-serif; font-size: .82rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--t13-warn); }
.t13-ready { margin: 0; padding: 6px 16px 12px; list-style: none; counter-reset: jc; }
.t13-ready li { counter-increment: jc; position: relative; padding: 11px 0 11px 34px; border-bottom: 1px solid #E7E1CE; font-size: 1rem; line-height: 1.45; }
.t13-ready li:last-child { border-bottom: none; }
.t13-ready li::before { content: counter(jc); position: absolute; left: 0; top: 11px; width: 21px; height: 21px; border: 1.5px solid var(--t13-mid); display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; color: var(--t13-mid); }
.t13-perf { height: 1px; margin: 0 16px; border-top: 2px dashed #CFC8B2; }
.t13-jobcard-note { margin: 0; padding: 13px 16px 15px; font-size: .93rem; line-height: 1.6; color: var(--t13-mid); }

/* Tally */
.t13-tally { margin-top: 44px; background: var(--brand); }
.t13-tally-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 26px 0; }
.t13-tally-row p { margin: 0; }
.t13-tally-row b { display: block; font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 2.9rem; font-weight: 700; line-height: .92; color: #fff; }
.t13-tally-row span { display: block; margin-top: 6px; font-size: .89rem; color: rgba(255,255,255,.82); }

/* Photos on a dark band */
.t13-shots-band { margin-top: 44px; background: var(--t13-ink); padding: 38px 0 42px; }
.t13-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.t13-shots figure { margin: 0; }
.t13-shots img { width: 100%; height: 150px; object-fit: cover; display: block; border: 2px solid rgba(255,255,255,.14); }
.t13-shots figcaption { margin-top: 7px; font-size: .85rem; color: rgba(255,255,255,.66); }

/* Feedback slips */
.t13-slip { margin: 0 0 14px; padding: 15px 16px; background: #fff; border: 1px solid var(--t13-line); border-left: 4px solid var(--brand); }
.t13-stars { color: #D8951A; letter-spacing: 1px; font-size: .9rem; }
.t13-slip p { margin: 7px 0 7px; font-size: 1rem; line-height: 1.6; color: #2A313A; }
.t13-slip cite { font-style: normal; font-size: .88rem; color: var(--t13-mid); }
.t13-slip-reply { font-size: .93rem !important; color: var(--t13-mid) !important; padding-left: 13px; border-left: 3px solid var(--t13-line); }
.t13-slip-reply b { color: var(--brand); }
.t13-quiet { margin: 0; font-size: 1rem; color: var(--t13-mid); }
.t13-links { margin: 16px 0 0; display: flex; gap: 20px; flex-wrap: wrap; }
.t13-links a { color: var(--brand); font-weight: 600; font-size: .96rem; text-underline-offset: 4px; }

/* Visit */
.t13-visit { display: grid; grid-template-columns: 1fr; gap: 22px; }
.t13-addr { margin: 0 0 8px; font-size: 1rem; line-height: 1.65; color: #333A43; }
.t13-area { margin: 0 0 12px; font-size: .95rem; color: var(--t13-mid); }
.t13-outline { display: inline-block; padding: 10px 16px; border: 2px solid var(--t13-ink); color: var(--t13-ink); font-weight: 600; font-size: .92rem; text-decoration: none; }
.t13-hours { width: 100%; border-collapse: collapse; font-size: .95rem; background: #fff; border: 1px solid var(--t13-line); }
.t13-hours td { padding: 9px 12px; border-bottom: 1px solid var(--t13-line); }
.t13-hours td:last-child { text-align: right; color: var(--t13-mid); }
.t13-hours tr.today td { font-weight: 700; color: var(--t13-ink); }

/* Booking panel */
.t13-book { margin-top: 46px; background: var(--t13-ink); padding: 38px 0 42px; }
.t13-booknote { margin: -8px 0 18px; font-size: .98rem; line-height: 1.6; color: rgba(255,255,255,.75); max-width: 54ch; }
.t13-form { max-width: 480px; }
.t13-form .form-field { margin-bottom: 13px; }
.t13-form label { color: rgba(255,255,255,.9); }
.t13-form input, .t13-form textarea, .t13-form select { border-radius: 3px; border-color: rgba(255,255,255,.28); background: #fff; }
.t13-form .btn { width: 100%; padding: 15px; background: var(--t13-warn); color: var(--t13-ink); border-color: var(--t13-warn); font-weight: 700; }

.t13-foot { background: var(--t13-ink); color: rgba(255,255,255,.6); font-size: .87rem; line-height: 1.8; padding: 20px 0 calc(20px + var(--bar-h)); }
.t13-foot p { margin: 0; }
.t13-foot a { color: rgba(255,255,255,.82); }

@media (min-width: 700px) {
    .t13-hero-in { padding: 52px 20px 56px; }
    .t13-plate { display: inline-block; margin-right: 10px; }
    .t13-wa { display: inline-block; margin-top: 20px; vertical-align: bottom; }
    .t13-assure-row { grid-template-columns: repeat(4, 1fr); }
    .t13-tally-row { max-width: 520px; }
    .t13-shots { grid-template-columns: repeat(3, 1fr); }
    .t13-shots img { height: 180px; }
    .t13-visit { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* ============================================================
   Theme 14 — Motion (round 24)
   ------------------------------------------------------------
   Brief: responsive and animated. Motion is spent in three places
   only — one arrival sequence on load, feedback that answers the
   reader (progress, header, counters, review rail), and lift on
   the thing being touched. Everything is disabled wholesale under
   prefers-reduced-motion at the bottom of this block.
   Layout is fluid rather than stepped: clamp() type and
   auto-fit/minmax grids, so columns follow the space available.
   ============================================================ */
[data-theme="14"] {
    --t14-ink:  #12151B;
    --t14-mid:  #626C7A;
    --t14-line: #E4E8ED;
    --t14-soft: #F6F8FA;
    background: #fff;
    color: var(--t14-ink);
    font-family: 'Outfit', 'Hind', sans-serif;
}
[data-theme="14"] .btn { border-radius: 12px; }
[data-theme="14"] a:focus-visible,
[data-theme="14"] button:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

.t14-in { max-width: 1060px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 28px); }

/* Scroll progress */
.t14-progress { position: fixed; inset: 0 0 auto; height: 3px; background: var(--brand); transform: scaleX(0); transform-origin: 0 50%; z-index: 60; will-change: transform; }

/* Header, revealed once the hero is past */
.t14-bar { position: fixed; inset: 0 0 auto; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--t14-line); transform: translateY(-100%); transition: transform .28s ease; }
.t14-bar.is-shown { transform: translateY(0); }
.t14-bar-in { max-width: 1060px; margin: 0 auto; padding: 9px clamp(16px, 4vw, 28px); display: flex; align-items: center; gap: 10px; }
.t14-bar-logo { object-fit: contain; }
.t14-bar-logo.logo-square { width: 34px; height: 34px; border-radius: 8px; }
.t14-bar-logo.logo-rectangle { width: auto; max-width: 116px; height: 34px; }
.t14-bar-name { font-weight: 700; font-size: .97rem; letter-spacing: -.015em; }
.t14-bar-cta { margin-left: auto; padding: 9px 16px; border-radius: 10px; background: var(--wa); color: #fff; font-weight: 600; font-size: .86rem; text-decoration: none; }

/* Hero with a slowly drifting gradient */
.t14-hero { position: relative; overflow: hidden; padding: clamp(52px, 12vw, 104px) clamp(16px, 4vw, 28px) clamp(40px, 9vw, 78px); background: var(--t14-soft); }
.t14-aurora { position: absolute; inset: 0; z-index: 0; filter: blur(58px); opacity: .5; }
.t14-aurora span { position: absolute; display: block; border-radius: 50%; }
.t14-aurora span:nth-child(1) { width: 48vmax; height: 48vmax; left: -14vmax; top: -20vmax; background: var(--brand); animation: t14drift 22s ease-in-out infinite; }
.t14-aurora span:nth-child(2) { width: 38vmax; height: 38vmax; right: -12vmax; top: -8vmax; background: color-mix(in srgb, var(--brand) 55%, #7C5CFF); animation: t14drift 27s ease-in-out infinite reverse; }
.t14-aurora span:nth-child(3) { width: 32vmax; height: 32vmax; left: 34%; bottom: -20vmax; background: color-mix(in srgb, var(--brand) 40%, #FFC46B); animation: t14drift 33s ease-in-out infinite; }
@keyframes t14drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(4vmax, 3vmax, 0) scale(1.12); }
}
.t14-hero-in { position: relative; z-index: 1; max-width: 1060px; margin: 0 auto; }
.t14-hero-logo { display: block; margin-bottom: 18px; background: #fff; }
.t14-hero-logo.logo-square { width: 68px; height: 68px; border-radius: 18px; object-fit: contain; padding: 8px; }
.t14-hero-logo.logo-rectangle { width: auto; max-width: 190px; height: 56px; border-radius: 12px; object-fit: contain; padding: 8px 14px; }
.t14-eyebrow { margin: 0 0 8px; font-size: 1rem; font-weight: 600; color: var(--brand); }
.t14-h1 { margin: 0; font-size: clamp(2.2rem, 8.4vw, 4.2rem); line-height: 1.04; font-weight: 700; letter-spacing: -.035em; }
.t14-h1-sub { color: var(--t14-mid); font-weight: 600; }
.t14-mask { display: block; overflow: hidden; padding-bottom: .06em; }
.t14-slide { display: block; }
.t14-lede { margin: 18px 0 0; max-width: 58ch; font-size: clamp(1rem, 2.4vw, 1.14rem); line-height: 1.62; color: #3A4350; }
.t14-acts { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.t14-btn { padding: 14px 24px; border-radius: 12px; font-weight: 600; font-size: .97rem; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.t14-btn:active { transform: translateY(1px); }
.t14-btn-go { background: var(--brand); color: #fff; box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 34%, transparent); }
.t14-btn-go:hover { box-shadow: 0 12px 30px color-mix(in srgb, var(--brand) 42%, transparent); }
.t14-btn-line { background: #fff; color: var(--t14-ink); border: 1.5px solid var(--t14-line); }
.t14-live { display: flex; align-items: center; gap: 9px; margin: 20px 0 0; font-size: .93rem; font-weight: 500; color: var(--t14-mid); }
.t14-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--t14-mid); flex: 0 0 auto; }
.t14-pulse.is-on { background: #18B368; animation: t14pulse 2.4s ease-out infinite; }
@keyframes t14pulse {
    0%   { box-shadow: 0 0 0 0 rgba(24,179,104,.55); }
    70%  { box-shadow: 0 0 0 11px rgba(24,179,104,0); }
    100% { box-shadow: 0 0 0 0 rgba(24,179,104,0); }
}
.t14-hero-shot { position: relative; z-index: 1; max-width: 1060px; margin: clamp(28px, 6vw, 44px) auto 0; }
.t14-hero-shot img { width: 100%; height: clamp(190px, 42vw, 400px); object-fit: cover; border-radius: clamp(16px, 3vw, 26px); display: block; box-shadow: 0 22px 50px rgba(18,21,27,.16); }

/* The single arrival sequence */
.t14-rise { animation: t14rise .62s cubic-bezier(.22,.75,.3,1) both; animation-delay: var(--d, 0ms); }
@keyframes t14rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.t14-slide { animation: t14uncover .74s cubic-bezier(.22,.75,.3,1) both; animation-delay: var(--d, 0ms); }
@keyframes t14uncover { from { transform: translateY(105%); } to { transform: translateY(0); } }

/* Counters */
.t14-counters { padding: clamp(28px, 6vw, 46px) 0; border-bottom: 1px solid var(--t14-line); }
.t14-counter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 22px; }
.t14-num { display: block; font-size: clamp(1.8rem, 5.6vw, 2.7rem); font-weight: 700; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--brand); }
.t14-counter span { display: block; margin-top: 7px; font-size: .89rem; color: var(--t14-mid); }

/* Sections */
.t14-sec { padding: clamp(38px, 8vw, 66px) 0; }
.t14-sec + .t14-sec { border-top: 1px solid var(--t14-line); }
.t14-h2 { margin: 0 0 clamp(18px, 3vw, 28px); font-size: clamp(1.5rem, 4.6vw, 2.1rem); line-height: 1.16; font-weight: 700; letter-spacing: -.03em; }
.t14-h2-light { color: #fff; }

/* Service cards — motion only on touch/hover */
.t14-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(12px, 2.4vw, 20px); }
.t14-card { display: flex; flex-direction: column; border: 1px solid var(--t14-line); border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; background: #fff; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.t14-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(18,21,27,.11); border-color: transparent; }
.t14-card:active { transform: translateY(-1px); }
.t14-card-shot { display: block; overflow: hidden; }
.t14-card-shot img { width: 100%; height: 165px; object-fit: cover; display: block; transition: transform .45s cubic-bezier(.2,.7,.3,1); }
.t14-card:hover .t14-card-shot img { transform: scale(1.06); }
.t14-card-body { display: flex; flex-direction: column; gap: 5px; padding: 16px 17px 18px; }
.t14-card-body b { font-size: 1.06rem; font-weight: 600; letter-spacing: -.015em; }
.t14-card-body i { font-style: normal; font-size: .92rem; line-height: 1.55; color: var(--t14-mid); }
.t14-card-body em { font-style: normal; margin-top: 6px; font-size: .87rem; font-weight: 600; color: var(--brand); }

/* Why us */
.t14-why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 2px 26px; }
.t14-why li { position: relative; padding: 15px 0 15px 30px; border-bottom: 1px solid var(--t14-line); font-size: 1.02rem; font-weight: 500; }
.t14-why li::before { content: ''; position: absolute; left: 2px; top: 20px; width: 14px; height: 14px; border-radius: 5px; background: color-mix(in srgb, var(--brand) 22%, #fff); border: 2px solid var(--brand); }

/* Photos */
.t14-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: clamp(10px, 2vw, 16px); }
.t14-shots figure { margin: 0; }
.t14-shots img { width: 100%; height: clamp(150px, 26vw, 210px); object-fit: cover; border-radius: 14px; display: block; }
.t14-shots figcaption { margin-top: 8px; font-size: .86rem; color: var(--t14-mid); }

/* Review rail */
.t14-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(84%, 380px), 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.t14-rail::-webkit-scrollbar { display: none; }
.t14-rev { scroll-snap-align: start; background: var(--t14-soft); border-radius: 18px; padding: 20px 20px 22px; }
.t14-stars { color: #E0A422; letter-spacing: 1px; font-size: .9rem; }
.t14-rev p { margin: 10px 0 0; font-size: 1.01rem; line-height: 1.6; color: #2C333D; }
.t14-rev-by { font-size: .88rem !important; color: var(--t14-mid) !important; margin-top: 12px !important; }
.t14-rev-reply { font-size: .92rem !important; color: var(--t14-mid) !important; padding-left: 13px; border-left: 3px solid var(--brand); }
.t14-rev-reply b { color: var(--brand); }
.t14-dots { display: flex; gap: 7px; justify-content: center; margin-top: 16px; }
.t14-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--t14-line); transition: width .22s ease, background .22s ease; }
.t14-dots span.is-here { width: 22px; border-radius: 4px; background: var(--brand); }
.t14-quiet { margin: 0; font-size: 1rem; color: var(--t14-mid); }
.t14-links { margin: 22px 0 0; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.t14-outline { display: inline-block; padding: 11px 18px; border-radius: 11px; border: 1.5px solid var(--brand); color: var(--brand); font-weight: 600; font-size: .9rem; text-decoration: none; transition: background .18s ease, color .18s ease; }
.t14-outline:hover { background: var(--brand); color: #fff; }
.t14-plain { color: var(--brand); font-weight: 600; font-size: .93rem; text-decoration: none; }

/* Visit */
.t14-visit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(20px, 4vw, 44px); }
.t14-addr { margin: 0 0 10px; font-size: 1.02rem; line-height: 1.65; color: #2C333D; }
.t14-visit-links { margin: 0 0 14px; display: flex; flex-direction: column; gap: 4px; }
.t14-visit-links a { color: var(--brand); font-weight: 600; font-size: .97rem; text-decoration: none; }
.t14-hours { width: 100%; border-collapse: collapse; font-size: .95rem; }
.t14-hours td { padding: 9px 0; border-bottom: 1px solid var(--t14-line); color: #2C333D; }
.t14-hours td:last-child { text-align: right; color: var(--t14-mid); }
.t14-hours tr.today td { font-weight: 700; color: var(--t14-ink); }

/* Closing panel */
.t14-close { background: var(--t14-ink); color: #fff; padding: clamp(40px, 8vw, 72px) 0; }
.t14-close-sub { margin: -14px 0 24px; font-size: 1.02rem; line-height: 1.6; color: rgba(255,255,255,.72); max-width: 54ch; }
.t14-form { max-width: 520px; }
.t14-form .form-field { margin-bottom: 13px; }
.t14-form label { color: rgba(255,255,255,.9); }
.t14-form input, .t14-form textarea, .t14-form select { border-radius: 12px; border-color: rgba(255,255,255,.24); background: #fff; }
.t14-form .btn { width: 100%; padding: 15px; background: var(--brand); border-color: var(--brand); }

.t14-foot { background: var(--t14-ink); color: rgba(255,255,255,.55); font-size: .87rem; line-height: 1.8; padding: 0 0 calc(24px + var(--bar-h)); }
.t14-foot p { margin: 0; }
.t14-foot a { color: rgba(255,255,255,.8); }

/* Everything above is switched off for anyone who asks for less motion */
@media (prefers-reduced-motion: reduce) {
    [data-theme="14"] .t14-rise,
    [data-theme="14"] .t14-slide { animation: none; opacity: 1; transform: none; }
    [data-theme="14"] .t14-aurora span { animation: none; }
    [data-theme="14"] .t14-pulse.is-on { animation: none; }
    [data-theme="14"] .t14-bar { transition: none; }
    [data-theme="14"] .t14-card,
    [data-theme="14"] .t14-card-shot img,
    [data-theme="14"] .t14-btn,
    [data-theme="14"] .t14-dots span,
    [data-theme="14"] .t14-outline { transition: none; }
    [data-theme="14"] .t14-card:hover { transform: none; }
    [data-theme="14"] .t14-card:hover .t14-card-shot img { transform: none; }
}

/* ============================================================
   Theme 15 — Gallery (round 25) — photo-first
   ------------------------------------------------------------
   Pictures are the content: edge-to-edge, in an uneven grid so the
   page does not read as a sheet of thumbnails, with the writing
   kept small and quiet around them. Type is Jost, tracked slightly
   wide at small sizes the way a catalogue sets its captions.
   ============================================================ */
[data-theme="15"] {
    --t15-ink:  #17161A;
    --t15-mid:  #6E6B75;
    --t15-line: #E6E4E9;
    --t15-soft: #F7F6F8;
    background: #fff;
    color: var(--t15-ink);
    font-family: 'Jost', 'Hind', sans-serif;
}
[data-theme="15"] .btn { border-radius: 2px; }
[data-theme="15"] a:focus-visible,
[data-theme="15"] button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.t15-in { max-width: 780px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 28px); }

.t15-bar { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--t15-line); }
.t15-bar-in { max-width: 1200px; margin: 0 auto; padding: 10px clamp(18px, 5vw, 28px); display: flex; align-items: center; gap: 11px; }
.t15-bar-logo { object-fit: contain; }
.t15-bar-logo.logo-square { width: 32px; height: 32px; }
.t15-bar-logo.logo-rectangle { width: auto; max-width: 112px; height: 32px; }
.t15-bar-name { font-weight: 500; font-size: .97rem; letter-spacing: .05em; }
.t15-bar-cta { margin-left: auto; padding: 8px 15px; background: var(--wa); color: #fff; font-weight: 500; font-size: .84rem; letter-spacing: .03em; text-decoration: none; }

/* Hero */
.t15-hero { position: relative; }
.t15-hero img { width: 100%; height: clamp(300px, 68vh, 620px); object-fit: cover; display: block; }
.t15-hero-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(22px, 6vw, 46px) clamp(18px, 5vw, 40px); background: linear-gradient(to top, rgba(14,13,17,.72), rgba(14,13,17,0)); color: #fff; }
.t15-hero-cap h1 { margin: 0; font-size: clamp(1.7rem, 6vw, 3rem); font-weight: 400; letter-spacing: .01em; line-height: 1.1; }
.t15-hero-cap p { margin: 7px 0 0; font-size: clamp(.9rem, 2.4vw, 1.02rem); letter-spacing: .08em; color: rgba(255,255,255,.86); }
.t15-hero-type { background: var(--brand); color: #fff; padding: clamp(56px, 16vw, 120px) clamp(18px, 5vw, 40px); text-align: center; }
.t15-hero-type h1 { margin: 0; font-size: clamp(1.9rem, 8vw, 3.2rem); font-weight: 400; letter-spacing: .01em; line-height: 1.1; }
.t15-hero-type p { margin: 10px 0 0; font-size: 1rem; letter-spacing: .08em; color: rgba(255,255,255,.85); }

.t15-ownernote { max-width: 780px; margin: 20px auto 0; padding: 13px clamp(18px, 5vw, 28px); background: #FFF8E6; border: 1px solid #EBD9A6; font-size: .92rem; line-height: 1.6; color: #5A4A1E; }

/* The gallery — uneven on purpose */
.t15-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 4px 0 0; grid-auto-flow: dense; }
.t15-shot { margin: 0; position: relative; }
.t15-shot a { display: block; overflow: hidden; }
.t15-shot img { width: 100%; height: 100%; min-height: 190px; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.t15-shot a:hover img { transform: scale(1.04); }
.t15-shot.is-wide { grid-column: span 2; }
.t15-shot.is-wide img { min-height: 260px; }
.t15-shot.is-tall img { min-height: 300px; }
.t15-shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 11px; background: linear-gradient(to top, rgba(14,13,17,.62), transparent); color: #fff; font-size: .84rem; letter-spacing: .03em; }

/* Quiet writing between the pictures */
.t15-note { padding: clamp(34px, 8vw, 62px) 0 0; }
.t15-about { margin: 0; font-size: clamp(1rem, 2.6vw, 1.12rem); line-height: 1.75; color: #3B3A42; }
.t15-marks { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.t15-marks li { padding: 7px 13px; border: 1px solid var(--t15-line); font-size: .87rem; letter-spacing: .03em; color: var(--t15-mid); }

.t15-sec { padding: clamp(34px, 8vw, 62px) 0 0; }
.t15-h2 { margin: 0 0 20px; font-size: clamp(1.15rem, 3.4vw, 1.4rem); font-weight: 500; letter-spacing: .06em; }
.t15-h2-aside { font-size: .84rem; font-weight: 400; letter-spacing: .03em; color: var(--t15-mid); }

/* Image-led service cards */
.t15-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 4px; }
.t15-card { display: block; text-decoration: none; color: inherit; position: relative; }
.t15-card-shot { display: block; overflow: hidden; }
.t15-card-shot img { width: 100%; height: clamp(200px, 34vw, 280px); object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.t15-card:hover .t15-card-shot img { transform: scale(1.04); }
.t15-card-txt { display: block; padding: 13px 14px 18px; }
.t15-card-txt b { display: block; font-size: 1.02rem; font-weight: 500; letter-spacing: .02em; }
.t15-card-txt i { display: block; font-style: normal; margin-top: 4px; font-size: .89rem; line-height: 1.55; color: var(--t15-mid); }
.t15-card.is-plain { background: var(--t15-soft); }

/* Services with no pictures at all */
.t15-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--t15-line); }
.t15-list li { border-bottom: 1px solid var(--t15-line); }
.t15-list a { display: block; padding: 15px 0; text-decoration: none; color: inherit; }
.t15-list b { display: block; font-size: 1.02rem; font-weight: 500; letter-spacing: .02em; }
.t15-list i { display: block; font-style: normal; margin-top: 3px; font-size: .89rem; line-height: 1.55; color: var(--t15-mid); }

/* Reviews, kept small */
.t15-revs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 26px; }
.t15-rev { margin: 0; }
.t15-stars { color: #C79A2B; letter-spacing: 1px; font-size: .84rem; }
.t15-rev p { margin: 8px 0 8px; font-size: .99rem; line-height: 1.68; color: #3B3A42; }
.t15-rev cite { font-style: normal; font-size: .85rem; letter-spacing: .03em; color: var(--t15-mid); }
.t15-rev-reply { font-size: .89rem !important; color: var(--t15-mid) !important; padding-left: 13px; border-left: 1px solid var(--t15-line); }
.t15-rev-reply b { color: var(--t15-ink); font-weight: 500; }
.t15-quiet { margin: 0; font-size: .99rem; color: var(--t15-mid); }
.t15-links { margin: 24px 0 0; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.t15-outline { display: inline-block; padding: 11px 18px; border: 1px solid var(--t15-ink); color: var(--t15-ink); font-size: .87rem; letter-spacing: .05em; text-decoration: none; transition: background .2s ease, color .2s ease; }
.t15-outline:hover { background: var(--t15-ink); color: #fff; }
.t15-plain { color: var(--brand); font-size: .9rem; letter-spacing: .03em; text-decoration: none; }

/* Visit */
.t15-visit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(20px, 4vw, 40px); }
.t15-addr { margin: 0 0 10px; font-size: .99rem; line-height: 1.7; color: #3B3A42; }
.t15-addr b { font-weight: 500; }
.t15-visit-links { margin: 0 0 14px; display: flex; flex-direction: column; gap: 3px; }
.t15-visit-links a { color: var(--brand); font-size: .96rem; text-decoration: none; }
.t15-open { margin: 0 0 10px; font-size: .89rem; letter-spacing: .04em; }
.t15-open.is-on { color: var(--brand); }
.t15-open.is-off { color: var(--t15-mid); }
.t15-hours { width: 100%; border-collapse: collapse; font-size: .93rem; }
.t15-hours td { padding: 8px 0; border-bottom: 1px solid var(--t15-line); color: #3B3A42; }
.t15-hours td:last-child { text-align: right; color: var(--t15-mid); }
.t15-hours tr.today td { font-weight: 500; color: var(--t15-ink); }

.t15-form { max-width: 470px; }
.t15-form .form-field { margin-bottom: 13px; }
.t15-form input, .t15-form textarea, .t15-form select { border-radius: 2px; border-color: var(--t15-line); }
.t15-form .btn { width: 100%; padding: 15px; letter-spacing: .05em; }

.t15-foot { margin-top: clamp(40px, 9vw, 70px); border-top: 1px solid var(--t15-line); padding: 24px 0 calc(24px + var(--bar-h)); color: var(--t15-mid); font-size: .85rem; line-height: 1.8; letter-spacing: .02em; }
.t15-foot p { margin: 0; }
.t15-foot a { color: inherit; }

/* Tap-to-enlarge */
.t15-view { border: none; padding: 0; max-width: min(96vw, 1100px); max-height: 92vh; background: #111015; color: #fff; }
.t15-view::backdrop { background: rgba(10,9,13,.86); }
.t15-view img { display: block; max-width: 100%; max-height: 82vh; margin: 0 auto; object-fit: contain; }
.t15-view p { margin: 0; padding: 12px 16px; font-size: .88rem; letter-spacing: .03em; color: rgba(255,255,255,.75); }
.t15-view-close { position: absolute; top: 8px; right: 10px; width: 38px; height: 38px; border: none; background: rgba(0,0,0,.45); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }

@media (min-width: 760px) {
    .t15-gallery { grid-template-columns: repeat(3, 1fr); }
    .t15-shot.is-wide { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
    [data-theme="15"] .t15-shot img,
    [data-theme="15"] .t15-card-shot img,
    [data-theme="15"] .t15-outline { transition: none; }
    [data-theme="15"] .t15-shot a:hover img,
    [data-theme="15"] .t15-card:hover .t15-card-shot img { transform: none; }
}

/* ============================================================
   Theme 16 — Bhasha (round 26) — Devanagari-first
   ------------------------------------------------------------
   Set for Devanagari rather than adapted to it. Three rules do
   most of the work:
     1. Khand carries Devanagari and Latin, so a Hindi, Marathi or
        English name is set in the same face.
     2. Generous leading — matras sit above the shirorekha and
        conjuncts below the baseline, so Latin line-heights clip.
        Body 1.9, headings 1.4.
     3. letter-spacing is 0 everywhere and never overridden below.
        Tracking pulls apart the shirorekha and breaks conjuncts;
        it is the single most common way Devanagari gets damaged.
   No uppercase transforms either — they mean nothing in this script.
   ============================================================ */
[data-theme="16"] {
    --t16-ink:  #1A1712;
    --t16-mid:  #6B6459;
    --t16-line: #E2DCD1;
    --t16-soft: #FAF7F2;
    background: #fff;
    color: var(--t16-ink);
    font-family: 'Hind', sans-serif;
    font-size: 17px;
    line-height: 1.9;
    letter-spacing: 0;
}
[data-theme="16"] * { letter-spacing: 0; }
[data-theme="16"] .btn { border-radius: 6px; letter-spacing: 0; }
[data-theme="16"] a:focus-visible,
[data-theme="16"] button:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

.t16-in { max-width: 720px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 26px); }

.t16-top { border-bottom: 1px solid var(--t16-line); background: #fff; position: sticky; top: 0; z-index: 20; }
.t16-top-in { max-width: 720px; margin: 0 auto; padding: 9px clamp(18px, 5vw, 26px); display: flex; align-items: center; gap: 11px; }
.t16-logo { object-fit: contain; }
.t16-logo.logo-square { width: 38px; height: 38px; border-radius: 6px; }
.t16-logo.logo-rectangle { width: auto; max-width: 128px; height: 38px; }
.t16-brand { font-family: 'Khand', 'Hind', sans-serif; font-weight: 600; font-size: 1.2rem; line-height: 1.4; }

/* Hero */
.t16-hero { background: var(--t16-soft); border-bottom: 1px solid var(--t16-line); padding: clamp(30px, 7vw, 54px) 0; }
.t16-h1 { margin: 0; font-family: 'Khand', 'Hind', sans-serif; font-weight: 600; font-size: clamp(2.1rem, 8vw, 3.4rem); line-height: 1.4; }
.t16-trade { margin: 2px 0 0; font-size: 1.06rem; line-height: 1.8; color: var(--t16-mid); }
.t16-state { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.t16-flag { padding: 5px 14px; border-radius: 999px; font-size: .95rem; line-height: 1.7; }
.t16-flag.is-on { background: color-mix(in srgb, var(--brand) 13%, #fff); color: var(--brand); }
.t16-flag.is-off { background: #F0EDE7; color: var(--t16-mid); }
.t16-rate { font-size: .95rem; color: var(--t16-mid); }
.t16-stars { color: #C58F1E; }
.t16-acts { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.t16-btn { padding: 12px 22px; border-radius: 6px; font-size: 1rem; line-height: 1.7; text-decoration: none; }
.t16-btn-wa { background: var(--wa); color: #fff; }
.t16-btn-call { background: #fff; color: var(--t16-ink); border: 1.5px solid var(--t16-line); }

.t16-cover { margin: clamp(20px, 5vw, 32px) 0 0; }
.t16-cover img { width: 100%; height: clamp(190px, 40vw, 340px); object-fit: cover; border-radius: 10px; display: block; }

.t16-about { margin: clamp(26px, 6vw, 40px) 0 0; font-size: 1.06rem; line-height: 1.95; color: #34302A; }

.t16-sec { margin-top: clamp(34px, 7vw, 52px); }
.t16-h2 { margin: 0 0 16px; font-family: 'Khand', 'Hind', sans-serif; font-weight: 600; font-size: clamp(1.5rem, 5vw, 1.95rem); line-height: 1.4; }

/* Services */
.t16-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--t16-line); }
.t16-list li { border-bottom: 1px solid var(--t16-line); }
.t16-list a { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; text-decoration: none; color: inherit; }
.t16-list-txt { flex: 1; min-width: 0; }
.t16-list-txt b { display: block; font-weight: 600; font-size: 1.08rem; line-height: 1.7; }
.t16-list-txt i { display: block; font-style: normal; font-size: .97rem; line-height: 1.8; color: var(--t16-mid); }
.t16-list-ask { flex: 0 0 auto; font-size: .95rem; color: var(--brand); }

/* Why us */
.t16-why { list-style: none; margin: 0; padding: 0; }
.t16-why li { position: relative; padding: 9px 0 9px 28px; font-size: 1.03rem; line-height: 1.85; }
.t16-why li::before { content: ''; position: absolute; left: 3px; top: 19px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }

.t16-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.t16-shots figure { margin: 0; }
.t16-shots img { width: 100%; height: clamp(150px, 26vw, 200px); object-fit: cover; border-radius: 8px; display: block; }
.t16-shots figcaption { margin-top: 6px; font-size: .92rem; line-height: 1.7; color: var(--t16-mid); }

/* Reviews */
.t16-rev { margin: 0 0 22px; padding: 0 0 0 16px; border-left: 3px solid var(--t16-line); }
.t16-rev p { margin: 6px 0 6px; font-size: 1.04rem; line-height: 1.9; color: #34302A; }
.t16-rev cite { font-style: normal; font-size: .95rem; color: var(--t16-mid); }
.t16-reply { font-size: .99rem !important; color: var(--t16-mid) !important; }
.t16-reply b { color: var(--brand); font-weight: 600; }
.t16-quiet { margin: 0; font-size: 1.03rem; line-height: 1.9; color: var(--t16-mid); }
.t16-links { margin: 20px 0 0; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.t16-outline { display: inline-block; padding: 10px 18px; border: 1.5px solid var(--brand); border-radius: 6px; color: var(--brand); font-size: .99rem; text-decoration: none; }
.t16-plain { color: var(--brand); font-size: .99rem; text-decoration: none; }

/* Visit */
.t16-visit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(18px, 4vw, 36px); }
.t16-addr { margin: 0 0 10px; font-size: 1.03rem; line-height: 1.9; color: #34302A; }
.t16-visit-links { margin: 0 0 14px; display: flex; flex-direction: column; }
.t16-visit-links a { color: var(--brand); text-decoration: none; }
.t16-hours { width: 100%; border-collapse: collapse; font-size: 1rem; }
.t16-hours td { padding: 8px 0; border-bottom: 1px solid var(--t16-line); line-height: 1.8; }
.t16-hours td:last-child { text-align: right; color: var(--t16-mid); }
.t16-hours tr.today td { font-weight: 600; color: var(--t16-ink); }

/* Form — labels come through in the owner's language */
.t16-form { max-width: 480px; }
.t16-form .form-field { margin-bottom: 14px; }
.t16-form label { line-height: 1.8; }
.t16-form input, .t16-form textarea, .t16-form select { border-radius: 6px; border-color: var(--t16-line); font-size: 1rem; line-height: 1.8; }
.t16-form .btn { width: 100%; padding: 14px; font-size: 1.05rem; }

.t16-foot { margin-top: clamp(38px, 8vw, 60px); border-top: 1px solid var(--t16-line); padding: 22px 0 calc(22px + var(--bar-h)); color: var(--t16-mid); font-size: .95rem; line-height: 1.9; }
.t16-foot p { margin: 0; }
.t16-foot a { color: inherit; }

/* ============================================================
   Theme 17 — Lumen (round 27)
   ------------------------------------------------------------
   The one memorable element is depth: a glass panel breaking over
   the lower edge of the cover photograph, lit from behind by the
   owner's own colour. Everything below stays dark and quiet so the
   overlap keeps working. Distinct from template 4, the other dark
   one, which is a gold serif portfolio — this is a wide grotesque
   with glass surfaces and colour used as light.
   ============================================================ */
[data-theme="17"] {
    --t17-bg:    #0A0D13;
    --t17-lift:  #131824;
    --t17-line:  rgba(255,255,255,.10);
    --t17-text:  #EDF0F5;
    --t17-mid:   #98A2B3;
    background: var(--t17-bg);
    color: var(--t17-text);
    font-family: 'Hind', sans-serif;
}
[data-theme="17"] .btn { border-radius: 12px; }
[data-theme="17"] a:focus-visible,
[data-theme="17"] button:focus-visible,
[data-theme="17"] summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

.t17-in { max-width: 940px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 30px); }

.t17-bar { position: fixed; inset: 0 0 auto; z-index: 50; background: rgba(10,13,19,.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--t17-line); transform: translateY(-100%); transition: transform .3s ease; }
.t17-bar.is-shown { transform: translateY(0); }
.t17-bar-in { max-width: 940px; margin: 0 auto; padding: 9px clamp(18px, 5vw, 30px); display: flex; align-items: center; gap: 10px; }
.t17-bar-logo { object-fit: contain; }
.t17-bar-logo.logo-square { width: 32px; height: 32px; border-radius: 8px; }
.t17-bar-logo.logo-rectangle { width: auto; max-width: 112px; height: 32px; }
.t17-bar-name { font-family: 'Syne', 'Hind', sans-serif; font-weight: 700; font-size: .97rem; }
.t17-bar-cta { margin-left: auto; padding: 8px 15px; border-radius: 9px; background: var(--wa); color: #fff; font-weight: 600; font-size: .85rem; text-decoration: none; }

/* Cover */
.t17-cover { position: relative; overflow: hidden; padding: clamp(74px, 17vw, 150px) clamp(18px, 5vw, 30px) clamp(84px, 15vw, 140px); }
.t17-cover-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t17-cover.has-shot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,13,19,.62) 0%, rgba(10,13,19,.80) 55%, var(--t17-bg) 100%); }
.t17-glow { position: absolute; left: 50%; bottom: -22%; width: min(760px, 118vw); height: min(760px, 118vw); transform: translateX(-50%); background: radial-gradient(circle, color-mix(in srgb, var(--brand) 62%, transparent) 0%, transparent 62%); filter: blur(46px); opacity: .5; z-index: 1; }
.t17-cover-in { position: relative; z-index: 2; max-width: 940px; margin: 0 auto; }
.t17-cover-logo { display: block; margin-bottom: 20px; background: rgba(255,255,255,.94); }
.t17-cover-logo.logo-square { width: 62px; height: 62px; border-radius: 16px; object-fit: contain; padding: 7px; }
.t17-cover-logo.logo-rectangle { width: auto; max-width: 178px; height: 52px; border-radius: 11px; object-fit: contain; padding: 7px 13px; }
.t17-kicker { margin: 0 0 10px; font-size: 1rem; font-weight: 600; color: color-mix(in srgb, var(--brand) 60%, #fff); }
.t17-h1 { margin: 0; font-family: 'Syne', 'Hind', sans-serif; font-weight: 700; font-size: clamp(2.3rem, 8.6vw, 4.3rem); line-height: 1.04; letter-spacing: -.03em; }
.t17-h1 span { color: var(--t17-mid); font-weight: 600; }
.t17-lede { margin: 18px 0 0; max-width: 52ch; font-size: clamp(1rem, 2.5vw, 1.12rem); line-height: 1.68; color: #C3CBD8; }

/* The glass panel, lifted over the cover's edge */
.t17-panel-wrap { position: relative; z-index: 5; margin-top: clamp(-64px, -11vw, -46px); padding: 0 clamp(18px, 5vw, 30px); }
.t17-panel {
    max-width: 940px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: clamp(14px, 3vw, 26px);
    align-items: center;
    padding: clamp(18px, 4vw, 26px);
    border-radius: 20px;
    background: rgba(24,30,42,.72);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 26px 60px rgba(0,0,0,.5);
}
.t17-panel-cell b { display: block; font-family: 'Syne', 'Hind', sans-serif; font-size: clamp(1.5rem, 4.4vw, 2rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.t17-of { font-size: .5em; font-weight: 600; color: var(--t17-mid); }
.t17-panel-cell b.is-on { color: #4ADE80; }
.t17-panel-cell b.is-off { color: var(--t17-mid); }
.t17-panel-cell span { display: block; margin-top: 6px; font-size: .84rem; color: var(--t17-mid); }
.t17-panel-acts { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1 / -1; }
.t17-call, .t17-wa { flex: 1 1 140px; text-align: center; padding: 13px 16px; border-radius: 12px; font-weight: 600; font-size: .94rem; text-decoration: none; }
.t17-call { background: var(--brand); color: #fff; box-shadow: 0 10px 26px color-mix(in srgb, var(--brand) 40%, transparent); }
.t17-wa { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2); color: var(--t17-text); }

/* Sections */
.t17-sec { padding: clamp(40px, 8vw, 72px) 0 0; }
.t17-h2 { margin: 0 0 clamp(18px, 3vw, 26px); font-family: 'Syne', 'Hind', sans-serif; font-size: clamp(1.45rem, 4.4vw, 2rem); font-weight: 700; letter-spacing: -.028em; line-height: 1.16; }

/* Service rail */
.t17-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(76%, 300px), 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 clamp(18px, 5vw, 30px) 6px; }
.t17-rail::-webkit-scrollbar { display: none; }
.t17-svc { scroll-snap-align: start; display: block; text-decoration: none; color: inherit; background: var(--t17-lift); border: 1px solid var(--t17-line); border-radius: 18px; overflow: hidden; transition: border-color .2s ease, transform .2s ease; }
.t17-svc:hover { border-color: color-mix(in srgb, var(--brand) 55%, transparent); transform: translateY(-3px); }
.t17-svc-shot { position: relative; display: block; height: 168px; background: #1A2130; }
.t17-svc-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t17-svc-no { position: absolute; left: 14px; top: 12px; font-family: 'Syne', 'Hind', sans-serif; font-size: 1.5rem; font-weight: 700; color: rgba(255,255,255,.85); text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.t17-svc b { display: block; padding: 15px 16px 0; font-size: 1.05rem; font-weight: 600; }
.t17-svc i { display: block; padding: 5px 16px 17px; font-style: normal; font-size: .91rem; line-height: 1.55; color: var(--t17-mid); }

/* Why us */
.t17-why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 0 30px; }
.t17-why li { position: relative; padding: 15px 0 15px 28px; border-bottom: 1px solid var(--t17-line); font-size: 1.02rem; }
.t17-why li::before { content: ''; position: absolute; left: 2px; top: 22px; width: 10px; height: 10px; border-radius: 3px; background: var(--brand); }

.t17-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.t17-shots figure { margin: 0; }
.t17-shots img { width: 100%; height: clamp(155px, 26vw, 210px); object-fit: cover; border-radius: 14px; display: block; }
.t17-shots figcaption { margin-top: 8px; font-size: .85rem; color: var(--t17-mid); }

/* Reviews */
.t17-revs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 14px; }
.t17-rev { margin: 0; background: var(--t17-lift); border: 1px solid var(--t17-line); border-radius: 18px; padding: 20px; }
.t17-stars { color: #F0B429; letter-spacing: 1px; font-size: .88rem; }
.t17-rev p { margin: 10px 0 10px; font-size: 1rem; line-height: 1.65; color: #D7DDE7; }
.t17-rev cite { font-style: normal; font-size: .86rem; color: var(--t17-mid); }
.t17-reply { font-size: .92rem !important; color: var(--t17-mid) !important; padding-left: 13px; border-left: 2px solid var(--brand); }
.t17-reply b { color: color-mix(in srgb, var(--brand) 55%, #fff); }
.t17-quiet { margin: 0; font-size: 1rem; color: var(--t17-mid); }
.t17-links { margin: 22px 0 0; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.t17-outline { display: inline-block; padding: 11px 18px; border-radius: 11px; border: 1px solid rgba(255,255,255,.28); color: var(--t17-text); font-weight: 600; font-size: .9rem; text-decoration: none; transition: border-color .2s ease; }
.t17-outline:hover { border-color: var(--brand); }
.t17-plain { color: color-mix(in srgb, var(--brand) 60%, #fff); font-weight: 600; font-size: .93rem; text-decoration: none; }

/* Visit */
.t17-visit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: clamp(20px, 4vw, 44px); }
.t17-addr { margin: 0 0 10px; font-size: 1.01rem; line-height: 1.68; color: #D7DDE7; }
.t17-visit-links { margin: 0 0 14px; display: flex; flex-direction: column; gap: 3px; }
.t17-visit-links a { color: color-mix(in srgb, var(--brand) 60%, #fff); font-weight: 600; text-decoration: none; }
.t17-hours { width: 100%; border-collapse: collapse; font-size: .95rem; }
.t17-hours td { padding: 9px 0; border-bottom: 1px solid var(--t17-line); color: #D7DDE7; }
.t17-hours td:last-child { text-align: right; color: var(--t17-mid); }
.t17-hours tr.today td { font-weight: 700; color: #fff; }

/* FAQ */
.t17-faq { border-top: 1px solid var(--t17-line); }
.t17-faq details { border-bottom: 1px solid var(--t17-line); }
.t17-faq summary { list-style: none; cursor: pointer; padding: 17px 40px 17px 0; position: relative; font-size: 1.06rem; font-weight: 600; }
.t17-faq summary::-webkit-details-marker { display: none; }
.t17-faq summary::marker { content: ''; }
.t17-faq-mark { position: absolute; right: 4px; top: 50%; width: 14px; height: 14px; margin-top: -7px; }
.t17-faq-mark::before, .t17-faq-mark::after { content: ''; position: absolute; background: var(--brand); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.t17-faq-mark::before { left: 0; top: 6px; width: 14px; height: 2px; }
.t17-faq-mark::after { left: 6px; top: 0; width: 2px; height: 14px; }
.t17-faq details[open] .t17-faq-mark::after { transform: rotate(90deg); opacity: 0; }
.t17-faq-body { padding: 0 0 18px; }
.t17-faq-body p { margin: 0; font-size: 1rem; line-height: 1.72; color: #C3CBD8; max-width: 66ch; }
.t17-faq-body ul { margin: 12px 0 0; padding: 0; list-style: none; }
.t17-faq-body li { position: relative; padding: 6px 0 6px 20px; font-size: .96rem; line-height: 1.6; color: var(--t17-mid); }
.t17-faq-body li::before { content: ''; position: absolute; left: 4px; top: 15px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }

/* Closing */
.t17-close { margin-top: clamp(44px, 9vw, 78px); padding: clamp(40px, 8vw, 70px) 0; background: linear-gradient(180deg, var(--t17-lift), var(--t17-bg)); border-top: 1px solid var(--t17-line); }
.t17-close-sub { margin: -14px 0 24px; font-size: 1.01rem; line-height: 1.6; color: var(--t17-mid); max-width: 52ch; }
.t17-form { max-width: 500px; }
.t17-form .form-field { margin-bottom: 13px; }
.t17-form label { color: #C3CBD8; }
.t17-form input, .t17-form textarea, .t17-form select { border-radius: 12px; border-color: rgba(255,255,255,.16); background: #0E121A; color: var(--t17-text); }
.t17-form .btn { width: 100%; padding: 15px; background: var(--brand); border-color: var(--brand); }

.t17-foot { padding: 24px 0 calc(24px + var(--bar-h)); color: var(--t17-mid); font-size: .86rem; line-height: 1.8; }
.t17-foot p { margin: 0; }
.t17-foot a { color: #C3CBD8; }

@media (prefers-reduced-motion: reduce) {
    [data-theme="17"] .t17-bar,
    [data-theme="17"] .t17-svc,
    [data-theme="17"] .t17-outline,
    [data-theme="17"] .t17-faq-mark::before,
    [data-theme="17"] .t17-faq-mark::after { transition: none; }
    [data-theme="17"] .t17-svc:hover { transform: none; }
}

/* ============================================================
   Theme 18 — Bazaar (round 28) — storefront
   ------------------------------------------------------------
   Laid out the way Indian marketplace apps present a catalogue,
   because customers already know how to read it: search pinned to
   the top, a dense card grid, price with the struck-through
   original and the saving, a rating chip, one obvious action per
   card. Cards are deliberately tight — two per row on a phone —
   since a catalogue is meant to be scanned, not read.
   ============================================================ */
[data-theme="18"] {
    --t18-ink:   #1B1F27;
    --t18-mid:   #6A7280;
    --t18-line:  #E4E7EC;
    --t18-page:  #F1F3F6;
    --t18-save:  #12805C;
    background: var(--t18-page);
    color: var(--t18-ink);
    font-family: 'Inter', 'Hind', sans-serif;
}
[data-theme="18"] .btn { border-radius: 6px; }
[data-theme="18"] a:focus-visible,
[data-theme="18"] button:focus-visible,
[data-theme="18"] input:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* Header */
.t18-top { position: sticky; top: 0; z-index: 30; background: var(--brand); }
.t18-top-in { max-width: 1080px; margin: 0 auto; padding: 10px clamp(12px, 3vw, 20px) 12px; }
.t18-ident { display: flex; align-items: center; gap: 10px; }
.t18-logo { background: #fff; border-radius: 5px; flex: 0 0 auto; object-fit: contain; }
.t18-logo.logo-square { width: 38px; height: 38px; padding: 4px; }
.t18-logo.logo-rectangle { width: auto; max-width: 118px; height: 38px; padding: 4px 9px; }
.t18-idtext { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.t18-name { font-size: 1.02rem; font-weight: 700; color: #fff; line-height: 1.25; }
.t18-sub { font-size: .8rem; color: rgba(255,255,255,.85); line-height: 1.3; }
.t18-state { flex: 0 0 auto; padding: 4px 10px; border-radius: 4px; font-size: .74rem; font-weight: 700; background: rgba(255,255,255,.18); color: #fff; }
.t18-state.is-on { background: #fff; color: var(--brand); }
.t18-search { margin-top: 10px; }
.t18-search input { width: 100%; padding: 11px 14px; border: none; border-radius: 6px; font: inherit; font-size: .95rem; background: #fff; color: var(--t18-ink); }

/* Offer + trust strips */
.t18-strip { background: #fff; border-bottom: 1px solid var(--t18-line); }
.t18-strip-in { max-width: 1080px; margin: 0 auto; padding: 9px clamp(12px, 3vw, 20px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: .84rem; }
.t18-deal { padding: 4px 10px; border-radius: 4px; background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand); font-weight: 700; }
.t18-rated b { color: var(--t18-save); }
.t18-hours { color: var(--t18-mid); }
.t18-trust { background: #fff; border-bottom: 1px solid var(--t18-line); }
.t18-trust-in { max-width: 1080px; margin: 0 auto; padding: 9px clamp(12px, 3vw, 20px); display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; }
.t18-trust-in::-webkit-scrollbar { display: none; }
.t18-trust-in span { position: relative; padding-left: 16px; white-space: nowrap; font-size: .82rem; color: var(--t18-mid); }
.t18-trust-in span::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--t18-save); }

/* Catalogue */
.t18-wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(12px, 3vw, 20px) 0; }
.t18-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 0 12px; }
.t18-h1 { margin: 0; font-size: clamp(1.15rem, 3.6vw, 1.5rem); font-weight: 700; letter-spacing: -.02em; }
.t18-h1 span { font-weight: 400; color: var(--t18-mid); }
.t18-count { margin: 0; font-size: .85rem; color: var(--t18-mid); }

.t18-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(48%, 210px), 1fr)); gap: 8px; }
.t18-card { display: flex; flex-direction: column; background: #fff; border-radius: 6px; overflow: hidden; }
.t18-card[hidden] { display: none; }
.t18-card-shot { position: relative; background: #fff; }
.t18-card-shot img { width: 100%; height: clamp(140px, 34vw, 190px); object-fit: contain; display: block; padding: 10px; }
.t18-noshot { display: flex; align-items: center; justify-content: center; height: clamp(140px, 34vw, 190px); background: var(--t18-page); color: var(--t18-mid); font-size: 2.4rem; font-weight: 700; }
.t18-off { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 3px; background: var(--t18-save); color: #fff; font-size: .72rem; font-weight: 700; }
.t18-card-body { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px 12px; flex: 1; }
.t18-card-name { margin: 0; font-size: .95rem; font-weight: 600; line-height: 1.35; }
.t18-chip { align-self: flex-start; padding: 2px 7px; border-radius: 3px; background: var(--t18-save); color: #fff; font-size: .72rem; font-weight: 700; }
.t18-card-desc { margin: 0; font-size: .82rem; line-height: 1.45; color: var(--t18-mid); }
.t18-price { margin: 4px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
.t18-price b { font-size: 1.1rem; font-weight: 700; }
.t18-price s { font-size: .86rem; color: var(--t18-mid); }
.t18-price em { font-style: normal; font-size: .82rem; font-weight: 700; color: var(--t18-save); }
.t18-unit { font-size: .78rem; color: var(--t18-mid); }
.t18-price-ask { font-size: .88rem; color: var(--t18-mid); }
.t18-order { margin-top: auto; padding-top: 10px; }
.t18-order { display: block; margin-top: auto; text-align: center; padding: 10px 12px; border-radius: 5px; background: var(--brand); color: #fff; font-size: .87rem; font-weight: 700; text-decoration: none; }
.t18-empty { margin: 22px 0; padding: 16px; background: #fff; border-radius: 6px; font-size: .92rem; color: var(--t18-mid); }

/* Blocks below the catalogue */
.t18-sec { margin-top: 10px; background: #fff; border-radius: 6px; padding: 16px clamp(12px, 3vw, 18px) 18px; }
.t18-h2 { margin: 0 0 14px; font-size: 1.08rem; font-weight: 700; letter-spacing: -.015em; }
.t18-about { margin: 0; font-size: .95rem; line-height: 1.68; color: #39404B; }

.t18-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(48%, 190px), 1fr)); gap: 8px; }
.t18-shots figure { margin: 0; }
.t18-shots img { width: 100%; height: clamp(130px, 26vw, 175px); object-fit: cover; border-radius: 5px; display: block; }
.t18-shots figcaption { margin-top: 6px; font-size: .8rem; color: var(--t18-mid); }

/* Ratings */
.t18-score { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--t18-line); margin-bottom: 14px; }
.t18-score b { font-size: 2.2rem; font-weight: 700; line-height: 1; }
.t18-score span { font-size: .84rem; color: var(--t18-mid); line-height: 1.6; }
.t18-stars { color: #F0A020; letter-spacing: 1px; }
.t18-rev { display: flex; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--t18-line); }
.t18-rev:last-of-type { border-bottom: none; }
.t18-revscore { flex: 0 0 auto; align-self: flex-start; padding: 3px 8px; border-radius: 3px; background: var(--t18-save); color: #fff; font-size: .76rem; font-weight: 700; }
.t18-rev p { margin: 0 0 5px; font-size: .93rem; line-height: 1.55; color: #39404B; }
.t18-rev cite { font-style: normal; font-size: .82rem; color: var(--t18-mid); }
.t18-revreply { margin-top: 8px !important; padding-left: 11px; border-left: 3px solid var(--t18-line); font-size: .87rem !important; color: var(--t18-mid) !important; }
.t18-revreply b { color: var(--brand); }
.t18-quiet { margin: 0; font-size: .93rem; color: var(--t18-mid); }
.t18-links { margin: 16px 0 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.t18-outline { display: inline-block; padding: 10px 18px; border: 1px solid var(--brand); border-radius: 5px; color: var(--brand); font-weight: 700; font-size: .87rem; text-decoration: none; }
.t18-plain { color: var(--brand); font-weight: 600; font-size: .88rem; text-decoration: none; }

/* Store details */
.t18-visit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px 34px; }
.t18-addr { margin: 0 0 8px; font-size: .95rem; line-height: 1.65; color: #39404B; }
.t18-visit-links { margin: 0 0 12px; display: flex; flex-direction: column; gap: 3px; }
.t18-visit-links a { color: var(--brand); font-weight: 600; font-size: .93rem; text-decoration: none; }
.t18-hours-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.t18-hours-table td { padding: 7px 0; border-bottom: 1px solid var(--t18-line); color: #39404B; }
.t18-hours-table td:last-child { text-align: right; color: var(--t18-mid); }
.t18-hours-table tr.today td { font-weight: 700; color: var(--t18-ink); }

.t18-form { max-width: 470px; }
.t18-form .form-field { margin-bottom: 12px; }
.t18-form input, .t18-form textarea, .t18-form select { border-radius: 5px; border-color: var(--t18-line); }
.t18-form .btn { width: 100%; padding: 14px; }

.t18-foot { margin-top: 10px; background: #fff; padding: 18px clamp(12px, 3vw, 20px) calc(18px + var(--bar-h)); color: var(--t18-mid); font-size: .84rem; line-height: 1.75; }
.t18-foot p { max-width: 1080px; margin: 0 auto; }
.t18-foot a { color: inherit; }

@media (min-width: 700px) {
    .t18-top-in { display: flex; align-items: center; gap: 20px; }
    .t18-ident { flex: 0 0 auto; }
    .t18-search { margin-top: 0; flex: 1; }
    .t18-card-name { font-size: 1rem; }
}

/* ============================================================
   Theme 19 — Studio (round 29)
   ------------------------------------------------------------
   Composition rather than stacking: the opening is off-centre, a
   tall photograph on one side with the name block overlapping its
   edge and plenty of air around both. Everything after that keeps
   wide margins and hairlines. Fraunces for display, Hind for text.
   Services are set as a priced menu — the layout collapses to a
   plain list when the business publishes no prices.
   ============================================================ */
[data-theme="19"] {
    --t19-ink:   #241E22;
    --t19-mid:   #7A6F75;
    --t19-line:  #E7DEDE;
    --t19-page:  #FBF8F8;
    --t19-tint:  #F4ECEC;
    background: var(--t19-page);
    color: var(--t19-ink);
    font-family: 'Hind', sans-serif;
}
[data-theme="19"] .btn { border-radius: 4px; }
[data-theme="19"] a:focus-visible,
[data-theme="19"] button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.t19-in { max-width: 900px; margin: 0 auto; padding: 0 clamp(20px, 6vw, 40px); }

.t19-bar { position: sticky; top: 0; z-index: 30; background: rgba(251,248,248,.92); backdrop-filter: blur(8px); }
.t19-bar-in { max-width: 900px; margin: 0 auto; padding: 12px clamp(20px, 6vw, 40px); display: flex; align-items: center; gap: 12px; }
.t19-bar-logo { object-fit: contain; }
.t19-bar-logo.logo-square { width: 32px; height: 32px; border-radius: 50%; }
.t19-bar-logo.logo-rectangle { width: auto; max-width: 112px; height: 30px; }
.t19-bar-name { font-family: 'Fraunces', 'Hind', serif; font-size: 1.04rem; font-weight: 500; }
.t19-bar-cta { margin-left: auto; font-size: .87rem; color: var(--t19-ink); text-decoration: none; border-bottom: 1px solid var(--brand); padding-bottom: 2px; }

/* Off-centre opening */
.t19-open { max-width: 900px; margin: 0 auto; padding: clamp(26px, 7vw, 60px) clamp(20px, 6vw, 40px) 0; display: grid; grid-template-columns: 1fr; gap: clamp(26px, 5vw, 44px); align-items: center; }
.t19-eyebrow { margin: 0 0 14px; font-size: .84rem; color: var(--t19-mid); }
.t19-h1 { margin: 0; font-family: 'Fraunces', 'Hind', serif; font-weight: 400; font-size: clamp(2.5rem, 11vw, 4.4rem); line-height: 1.02; letter-spacing: -.02em; }
.t19-lede { margin: 20px 0 0; max-width: 42ch; font-size: 1.03rem; line-height: 1.75; color: #4B4247; }
.t19-acts { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.t19-btn { padding: 13px 24px; border-radius: 4px; background: var(--brand); color: #fff; font-size: .94rem; font-weight: 500; text-decoration: none; }
.t19-btn-quiet { background: transparent; color: var(--t19-ink); border: 1px solid var(--t19-line); }
.t19-meta { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .88rem; color: var(--t19-mid); }
.t19-on { color: var(--brand); }
.t19-off { color: var(--t19-mid); }
.t19-stars { color: #C9A227; }

.t19-open-shot { margin: 0; position: relative; }
.t19-open-shot img { width: 100%; height: clamp(300px, 74vw, 520px); object-fit: cover; border-radius: 200px 200px 6px 6px; display: block; }
.t19-open-blank { display: flex; align-items: center; justify-content: center; height: clamp(300px, 74vw, 520px); background: var(--t19-tint); border-radius: 200px 200px 6px 6px; }
.t19-open-blank span { font-family: 'Fraunces', 'Hind', serif; font-size: clamp(4rem, 18vw, 8rem); color: var(--brand); opacity: .55; line-height: 1; }

/* Assurance line */
.t19-marks { margin-top: clamp(34px, 7vw, 60px); border-top: 1px solid var(--t19-line); border-bottom: 1px solid var(--t19-line); }
.t19-marks ul { list-style: none; margin: 0; padding: 16px 0; display: flex; flex-wrap: wrap; gap: 10px 30px; }
.t19-marks li { font-size: .92rem; color: var(--t19-mid); position: relative; padding-left: 16px; }
.t19-marks li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }

.t19-sec { padding: clamp(38px, 8vw, 70px) 0 0; }
.t19-h2 { margin: 0 0 clamp(20px, 4vw, 32px); font-family: 'Fraunces', 'Hind', serif; font-weight: 400; font-size: clamp(1.7rem, 5.4vw, 2.4rem); line-height: 1.14; }

/* Priced service menu */
.t19-menu { list-style: none; margin: 0; padding: 0; }
.t19-menu li { border-top: 1px solid var(--t19-line); }
.t19-menu li:last-child { border-bottom: 1px solid var(--t19-line); }
.t19-menu a { display: flex; align-items: baseline; gap: 22px; padding: 17px 0; text-decoration: none; color: inherit; transition: padding-left .18s ease; }
.t19-menu a:hover { padding-left: 6px; }
.t19-menu-main { flex: 1; min-width: 0; }
.t19-menu-main b { display: block; font-size: 1.1rem; font-weight: 500; line-height: 1.4; }
.t19-menu-main i { display: block; font-style: normal; margin-top: 3px; font-size: .92rem; line-height: 1.6; color: var(--t19-mid); }
.t19-menu-price { flex: 0 0 auto; text-align: right; }
.t19-menu-price b { display: block; font-family: 'Fraunces', 'Hind', serif; font-size: 1.16rem; font-weight: 500; }
.t19-menu-price s { display: block; font-size: .84rem; color: var(--t19-mid); }
.t19-menu-price em { display: block; font-style: normal; font-size: .78rem; color: var(--t19-mid); }
.t19-menu-ask { font-size: .88rem; color: var(--t19-mid); }
.t19-menu.is-plain a { gap: 0; }
.t19-menu-note { margin: 16px 0 0; font-size: .87rem; color: var(--t19-mid); }

/* Work — a wide scrolling strip rather than a grid */
.t19-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(74%, 300px), 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 clamp(20px, 6vw, 40px) 6px; }
.t19-strip::-webkit-scrollbar { display: none; }
.t19-strip figure { margin: 0; scroll-snap-align: start; }
.t19-strip img { width: 100%; height: clamp(230px, 46vw, 330px); object-fit: cover; border-radius: 6px; display: block; }
.t19-strip figcaption { margin-top: 9px; font-size: .85rem; color: var(--t19-mid); }

/* Reviews */
.t19-quote { margin: 0 0 30px; padding: 0; max-width: 62ch; }
.t19-quote p { margin: 0; font-family: 'Fraunces', 'Hind', serif; font-weight: 400; font-size: clamp(1.15rem, 3.4vw, 1.45rem); line-height: 1.55; color: #33292E; }
.t19-quote footer { margin-top: 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: .88rem; color: var(--t19-mid); }
.t19-reply { margin: 14px 0 0 !important; padding-left: 16px; border-left: 1px solid var(--t19-line); font-family: 'Hind', sans-serif !important; font-size: .94rem !important; line-height: 1.7; color: var(--t19-mid) !important; }
.t19-reply b { color: var(--brand); font-weight: 600; }
.t19-quiet { margin: 0; font-size: 1rem; color: var(--t19-mid); }
.t19-links { margin: 26px 0 0; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.t19-outline { display: inline-block; padding: 11px 20px; border: 1px solid var(--t19-ink); border-radius: 4px; color: var(--t19-ink); font-size: .88rem; text-decoration: none; transition: background .2s ease, color .2s ease; }
.t19-outline:hover { background: var(--t19-ink); color: var(--t19-page); }
.t19-plain { color: var(--brand); font-size: .9rem; text-decoration: none; }

/* Visit */
.t19-visit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(22px, 4vw, 46px); }
.t19-addr { margin: 0 0 10px; font-size: 1rem; line-height: 1.75; color: #4B4247; }
.t19-addr b { font-weight: 600; }
.t19-visit-links { margin: 0 0 14px; display: flex; flex-direction: column; gap: 2px; }
.t19-visit-links a { color: var(--brand); font-size: .97rem; text-decoration: none; }
.t19-hours { width: 100%; border-collapse: collapse; font-size: .95rem; }
.t19-hours td { padding: 9px 0; border-bottom: 1px solid var(--t19-line); color: #4B4247; }
.t19-hours td:last-child { text-align: right; color: var(--t19-mid); }
.t19-hours tr.today td { font-weight: 600; color: var(--t19-ink); }

/* Booking panel */
.t19-book { margin-top: clamp(44px, 9vw, 80px); background: var(--t19-tint); padding: clamp(38px, 8vw, 70px) 0; }
.t19-book-sub { margin: -18px 0 26px; font-size: 1rem; line-height: 1.7; color: var(--t19-mid); max-width: 46ch; }
.t19-form { max-width: 460px; }
.t19-form .form-field { margin-bottom: 14px; }
.t19-form input, .t19-form textarea, .t19-form select { border-radius: 4px; border-color: #E0D4D4; background: #fff; }
.t19-form .btn { width: 100%; padding: 15px; }

.t19-foot { padding: 24px 0 calc(24px + var(--bar-h)); color: var(--t19-mid); font-size: .86rem; line-height: 1.8; }
.t19-foot p { margin: 0; }
.t19-foot a { color: inherit; }

@media (min-width: 800px) {
    .t19-open { grid-template-columns: 1.05fr .95fr; padding-top: 70px; }
    .t19-open-text { position: relative; z-index: 2; }
    /* the name block overlaps the photograph's edge */
    .t19-open-shot { margin-left: -70px; }
    .t19-h1 { margin-left: 0; }
    .t19-strip { grid-auto-columns: minmax(320px, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    [data-theme="19"] .t19-menu a,
    [data-theme="19"] .t19-outline { transition: none; }
    [data-theme="19"] .t19-menu a:hover { padding-left: 0; }
}

/* ============================================================
   Theme 20 — Retreat (round 30)
   ------------------------------------------------------------
   For places people stay or visit. The order is set by what the
   research says loses these bookings: uncertainty. Location sits in
   the cover, an at-a-glance bar carries rating, timings and price
   floor before any prose, offerings are priced cards, and a
   "Good to know" list answers the practical questions from the
   owner's own data. Marcellus for display, warm neutrals, quiet
   rules — calm rather than loud, because the photographs carry it.
   ============================================================ */
[data-theme="20"] {
    --t20-ink:   #221F1B;
    --t20-mid:   #6F6659;
    --t20-line:  #E3DCD0;
    --t20-page:  #FCFAF6;
    --t20-tint:  #F3EEE4;
    background: var(--t20-page);
    color: var(--t20-ink);
    font-family: 'Hind', sans-serif;
}
[data-theme="20"] .btn { border-radius: 3px; }
[data-theme="20"] a:focus-visible,
[data-theme="20"] button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.t20-in { max-width: 940px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 34px); }

/* Cover */
.t20-cover { position: relative; overflow: hidden; background: var(--brand); padding: clamp(64px, 16vw, 130px) clamp(18px, 5vw, 34px); text-align: center; }
.t20-cover-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t20-cover.has-shot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,17,13,.42), rgba(20,17,13,.66)); }
.t20-cover-in { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.t20-logo { display: block; margin: 0 auto 20px; background: rgba(255,255,255,.95); }
.t20-logo.logo-square { width: 66px; height: 66px; border-radius: 3px; object-fit: contain; padding: 7px; }
.t20-logo.logo-rectangle { width: auto; max-width: 190px; height: 54px; border-radius: 3px; object-fit: contain; padding: 7px 14px; }
.t20-h1 { margin: 0; font-family: 'Marcellus', 'Hind', serif; font-weight: 400; font-size: clamp(2.2rem, 8.4vw, 3.8rem); line-height: 1.1; color: #fff; }
.t20-where { margin: 12px 0 0; font-size: 1.02rem; color: rgba(255,255,255,.88); }
.t20-acts { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.t20-btn { padding: 14px 26px; border-radius: 3px; background: #fff; color: var(--t20-ink); font-size: .95rem; font-weight: 500; text-decoration: none; }
.t20-btn-quiet { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }

/* At a glance */
.t20-glance { background: var(--t20-tint); border-bottom: 1px solid var(--t20-line); }
.t20-glance-row { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 13px 0; font-size: .9rem; }
.t20-glance-row b { font-weight: 600; }
.t20-glance-row i { font-style: normal; color: var(--t20-mid); }
.t20-stars { color: #C08A2E; }
.t20-on b { color: #1F6B45; }
.t20-off b { color: var(--t20-mid); }

.t20-intro { margin: clamp(30px, 6vw, 52px) 0 0; font-size: 1.06rem; line-height: 1.8; color: #3E382F; max-width: 66ch; }

.t20-sec { padding: clamp(36px, 7vw, 62px) 0 0; }
.t20-h2 { margin: 0 0 clamp(18px, 3vw, 28px); font-family: 'Marcellus', 'Hind', serif; font-weight: 400; font-size: clamp(1.55rem, 4.8vw, 2.15rem); line-height: 1.18; }

/* Priced offering cards */
.t20-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(14px, 2.6vw, 22px); }
.t20-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--t20-line); border-radius: 3px; overflow: hidden; }
.t20-card-shot { margin: 0; }
.t20-card-shot img { width: 100%; height: clamp(180px, 32vw, 230px); object-fit: cover; display: block; }
.t20-card-body { display: flex; flex-direction: column; flex: 1; padding: 17px 18px 18px; }
.t20-card-body h3 { margin: 0; font-family: 'Marcellus', 'Hind', serif; font-weight: 400; font-size: 1.28rem; line-height: 1.25; }
.t20-card-body p { margin: 7px 0 0; font-size: .94rem; line-height: 1.65; color: var(--t20-mid); }
.t20-card-foot { margin-top: auto; padding-top: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.t20-rate b { font-size: 1.2rem; font-weight: 600; }
.t20-rate i { font-style: normal; font-size: .84rem; color: var(--t20-mid); margin-left: 4px; }
.t20-rate s { display: block; font-size: .82rem; color: var(--t20-mid); }
.t20-ask { flex: 0 0 auto; padding: 10px 18px; border-radius: 3px; background: var(--brand); color: #fff; font-size: .88rem; font-weight: 500; text-decoration: none; }

/* Facilities */
.t20-facilities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 32px; }
.t20-facilities li { position: relative; padding: 13px 0 13px 26px; border-bottom: 1px solid var(--t20-line); font-size: 1rem; }
.t20-facilities li::before { content: ''; position: absolute; left: 2px; top: 20px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--brand); }

/* Gallery */
.t20-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.t20-shots figure { margin: 0; }
.t20-shots figure.is-wide { grid-column: span 2; }
.t20-shots img { width: 100%; height: clamp(160px, 30vw, 220px); object-fit: cover; border-radius: 3px; display: block; }
.t20-shots figure.is-wide img { height: clamp(210px, 40vw, 320px); }
.t20-shots figcaption { margin-top: 7px; font-size: .85rem; color: var(--t20-mid); }

/* Reviews */
.t20-revs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 22px 30px; }
.t20-rev { margin: 0; }
.t20-rev p { margin: 8px 0 8px; font-size: 1rem; line-height: 1.7; color: #3E382F; }
.t20-rev cite { font-style: normal; font-size: .87rem; color: var(--t20-mid); }
.t20-reply { margin-top: 10px !important; padding-left: 14px; border-left: 1px solid var(--t20-line); font-size: .92rem !important; color: var(--t20-mid) !important; }
.t20-reply b { color: var(--brand); font-weight: 600; }
.t20-quiet { margin: 0; font-size: 1rem; color: var(--t20-mid); }
.t20-links { margin: 24px 0 0; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.t20-outline { display: inline-block; padding: 11px 20px; border: 1px solid var(--t20-ink); border-radius: 3px; color: var(--t20-ink); font-size: .88rem; text-decoration: none; }
.t20-plain { color: var(--brand); font-size: .9rem; text-decoration: none; }

/* Getting here */
.t20-visit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(20px, 4vw, 44px); }
.t20-addr { margin: 0 0 10px; font-size: 1rem; line-height: 1.75; color: #3E382F; }
.t20-addr b { font-weight: 600; }
.t20-visit-links { margin: 0 0 14px; display: flex; flex-direction: column; gap: 2px; }
.t20-visit-links a { color: var(--brand); font-size: .97rem; text-decoration: none; }
.t20-hours { width: 100%; border-collapse: collapse; font-size: .95rem; }
.t20-hours td { padding: 9px 0; border-bottom: 1px solid var(--t20-line); color: #3E382F; }
.t20-hours td:last-child { text-align: right; color: var(--t20-mid); }
.t20-hours tr.today td { font-weight: 600; color: var(--t20-ink); }

/* Good to know */
.t20-facts { margin: 0; border-top: 1px solid var(--t20-line); }
.t20-facts > div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--t20-line); }
.t20-facts dt { font-weight: 600; font-size: .95rem; }
.t20-facts dd { margin: 0; font-size: .97rem; line-height: 1.7; color: var(--t20-mid); }

/* Enquiry */
.t20-book { margin-top: clamp(40px, 8vw, 72px); background: var(--t20-tint); padding: clamp(38px, 7vw, 64px) 0; }
.t20-book-sub { margin: -16px 0 24px; font-size: 1rem; line-height: 1.7; color: var(--t20-mid); max-width: 50ch; }
.t20-form { max-width: 470px; }
.t20-form .form-field { margin-bottom: 14px; }
.t20-form input, .t20-form textarea, .t20-form select { border-radius: 3px; border-color: #DDD4C6; background: #fff; }
.t20-form .btn { width: 100%; padding: 15px; }

.t20-foot { padding: 24px 0 calc(24px + var(--bar-h)); color: var(--t20-mid); font-size: .86rem; line-height: 1.8; }
.t20-foot p { margin: 0; }
.t20-foot a { color: inherit; }

@media (min-width: 720px) {
    .t20-shots { grid-template-columns: repeat(3, 1fr); }
    .t20-shots figure.is-wide { grid-column: span 2; }
    .t20-facts > div { grid-template-columns: 190px 1fr; gap: 20px; }
}

/* ============================================================
   Theme 21 — Nest (round 31)
   ------------------------------------------------------------
   Ordered by how families actually decide: assurances first (a
   place that fails on safety is dropped before anything else is
   read), fees stated plainly on each card, and the visit given its
   own panel because that is where the decision is really made.
   Quicksand, rounded corners, warm neutrals — friendly without
   resorting to childish decoration.
   ============================================================ */
[data-theme="21"] {
    --t21-ink:   #2A2620;
    --t21-mid:   #6E675C;
    --t21-line:  #E8E2D6;
    --t21-page:  #FFFCF7;
    --t21-tint:  #F6F1E7;
    background: var(--t21-page);
    color: var(--t21-ink);
    font-family: 'Quicksand', 'Hind', sans-serif;
}
[data-theme="21"] .btn { border-radius: 14px; }
[data-theme="21"] a:focus-visible,
[data-theme="21"] button:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

.t21-in { max-width: 940px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 30px); }

.t21-bar { background: var(--t21-page); border-bottom: 1px solid var(--t21-line); position: sticky; top: 0; z-index: 30; }
.t21-bar-in { display: flex; align-items: center; gap: 11px; padding-top: 10px; padding-bottom: 10px; }
.t21-bar-logo { object-fit: contain; }
.t21-bar-logo.logo-square { width: 36px; height: 36px; border-radius: 12px; }
.t21-bar-logo.logo-rectangle { width: auto; max-width: 118px; height: 34px; }
.t21-bar-name { font-weight: 700; font-size: 1.02rem; }
.t21-bar-cta { margin-left: auto; padding: 9px 16px; border-radius: 12px; background: var(--brand); color: #fff; font-size: .86rem; font-weight: 600; text-decoration: none; }

/* Hero */
.t21-hero { padding: clamp(28px, 6vw, 54px) 0 0; }
.t21-hero-in { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 5vw, 40px); align-items: center; }
.t21-h1 { margin: 0; font-size: clamp(2rem, 7.4vw, 3.2rem); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
.t21-where { margin: 8px 0 0; font-size: 1.06rem; color: var(--t21-mid); }
.t21-lede { margin: 16px 0 0; font-size: 1.02rem; line-height: 1.75; color: #4A443B; max-width: 46ch; }
.t21-acts { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.t21-btn { padding: 13px 22px; border-radius: 14px; background: var(--brand); color: #fff; font-size: .95rem; font-weight: 600; text-decoration: none; }
.t21-btn-quiet { background: #fff; color: var(--t21-ink); border: 1.5px solid var(--t21-line); }
.t21-now { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; font-size: .92rem; color: var(--t21-mid); }
.t21-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.t21-dot.is-on { background: #3FA46A; }
.t21-dot.is-off { background: #BDB6A8; }
.t21-stars { color: #D9A31E; }
.t21-hero-text { min-width: 0; }
.t21-rate { display: inline-flex; align-items: center; gap: 6px; }
.t21-hero-shot { margin: 0; }
.t21-hero-shot img { width: 100%; height: clamp(220px, 46vw, 340px); object-fit: cover; border-radius: 26px; display: block; }

/* Assurances — the first block on the page */
.t21-assure { margin-top: clamp(30px, 6vw, 52px); background: var(--t21-tint); padding: clamp(28px, 5vw, 44px) 0; }
.t21-h2 { margin: 0 0 18px; font-size: clamp(1.35rem, 4.2vw, 1.75rem); font-weight: 700; letter-spacing: -.015em; }
.t21-assure-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px 26px; }
.t21-assure-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 1.02rem; line-height: 1.55; font-weight: 500; }
.t21-tick { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 16%, #fff); position: relative; }
.t21-tick::after { content: ''; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px; border: solid var(--brand); border-width: 0 2px 2px 0; transform: rotate(42deg); }

.t21-sec { padding: clamp(34px, 6vw, 56px) 0 0; }

/* Offering cards with the fee stated */
.t21-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(14px, 2.6vw, 20px); }
.t21-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--t21-line); border-radius: 20px; overflow: hidden; }
.t21-card figure { margin: 0; }
.t21-card figure img { width: 100%; height: clamp(160px, 30vw, 200px); object-fit: cover; display: block; }
.t21-card-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.t21-card-body h3 { margin: 0; font-size: 1.14rem; font-weight: 700; }
.t21-card-body p { margin: 6px 0 0; font-size: .94rem; line-height: 1.6; color: var(--t21-mid); }
.t21-fee { margin: 12px 0 0 !important; }
.t21-fee b { font-size: 1.16rem; font-weight: 700; }
.t21-fee i { font-style: normal; font-size: .86rem; color: var(--t21-mid); }
.t21-cardlink { margin-top: 14px; align-self: flex-start; padding: 9px 16px; border-radius: 11px; background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand); font-size: .87rem; font-weight: 700; text-decoration: none; }

.t21-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(48%, 210px), 1fr)); gap: 12px; }
.t21-shots figure { margin: 0; }
.t21-shots img { width: 100%; height: clamp(150px, 26vw, 200px); object-fit: cover; border-radius: 18px; display: block; }
.t21-shots figcaption { margin-top: 7px; font-size: .86rem; color: var(--t21-mid); }

.t21-revs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px 28px; }
.t21-rev { margin: 0; }
.t21-rev p { margin: 8px 0 8px; font-size: 1rem; line-height: 1.7; color: #4A443B; }
.t21-rev cite { font-style: normal; font-size: .88rem; color: var(--t21-mid); }
.t21-reply { margin-top: 10px !important; padding-left: 13px; border-left: 3px solid var(--t21-line); font-size: .92rem !important; color: var(--t21-mid) !important; }
.t21-reply b { color: var(--brand); }
.t21-quiet { margin: 0; font-size: 1rem; color: var(--t21-mid); }
.t21-links { margin: 22px 0 0; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.t21-outline { display: inline-block; padding: 11px 20px; border: 1.5px solid var(--brand); border-radius: 13px; color: var(--brand); font-weight: 700; font-size: .89rem; text-decoration: none; }
.t21-plain { color: var(--brand); font-weight: 600; font-size: .92rem; text-decoration: none; }

/* The visit gets its own panel */
.t21-visit { margin-top: clamp(38px, 7vw, 62px); background: var(--t21-tint); padding: clamp(32px, 6vw, 52px) 0; }
.t21-visit-lead { margin: -8px 0 22px; font-size: 1.02rem; line-height: 1.7; color: var(--t21-mid); max-width: 52ch; }
.t21-visit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(20px, 4vw, 40px); }
.t21-addr { margin: 0 0 10px; font-size: 1.02rem; line-height: 1.75; color: #4A443B; }
.t21-visit-links { margin: 0 0 16px; display: flex; flex-direction: column; gap: 2px; }
.t21-visit-links a { color: var(--brand); font-weight: 600; text-decoration: none; }
.t21-visit-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.t21-hours { width: 100%; border-collapse: collapse; font-size: .96rem; }
.t21-hours td { padding: 9px 0; border-bottom: 1px solid var(--t21-line); color: #4A443B; }
.t21-hours td:last-child { text-align: right; color: var(--t21-mid); }
.t21-hours tr.today td { font-weight: 700; color: var(--t21-ink); }

.t21-form { max-width: 470px; }
.t21-form .form-field { margin-bottom: 14px; }
.t21-form input, .t21-form textarea, .t21-form select { border-radius: 13px; border-color: var(--t21-line); background: #fff; }
.t21-form .btn { width: 100%; padding: 15px; }

.t21-foot { margin-top: clamp(34px, 6vw, 56px); padding: 24px 0 calc(24px + var(--bar-h)); color: var(--t21-mid); font-size: .87rem; line-height: 1.8; }
.t21-foot p { margin: 0; }
.t21-foot a { color: inherit; }

@media (min-width: 780px) {
    .t21-hero-in { grid-template-columns: 1.05fr .95fr; }
}

/* ============================================================
   Theme 22 — Greenhouse (round 31)
   ------------------------------------------------------------
   The opposite of template 18 even though both list priced items:
   that one is dense and scannable because a shopper is comparing;
   this one gives each item a large photograph and room to breathe,
   alternating left and right down the page, because the decision
   is made by looking. Lora, paper white, soft green rules.
   ============================================================ */
[data-theme="22"] {
    --t22-ink:   #1F241D;
    --t22-mid:   #5F6A5A;
    --t22-line:  #DFE4D8;
    --t22-page:  #FBFCF9;
    background: var(--t22-page);
    color: var(--t22-ink);
    font-family: 'Hind', sans-serif;
}
[data-theme="22"] .btn { border-radius: 4px; }
[data-theme="22"] a:focus-visible,
[data-theme="22"] button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.t22-in { max-width: 900px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 32px); }

.t22-bar { border-bottom: 1px solid var(--t22-line); position: sticky; top: 0; z-index: 30; background: rgba(251,252,249,.94); backdrop-filter: blur(8px); }
.t22-bar-in { display: flex; align-items: center; gap: 11px; padding-top: 11px; padding-bottom: 11px; }
.t22-bar-logo { object-fit: contain; }
.t22-bar-logo.logo-square { width: 34px; height: 34px; border-radius: 4px; }
.t22-bar-logo.logo-rectangle { width: auto; max-width: 116px; height: 32px; }
.t22-bar-name { font-family: 'Lora', 'Hind', serif; font-size: 1.04rem; font-weight: 500; }
.t22-bar-cta { margin-left: auto; padding: 8px 15px; border-radius: 4px; background: var(--wa); color: #fff; font-size: .85rem; font-weight: 600; text-decoration: none; }

.t22-open { padding: clamp(32px, 7vw, 60px) 0 0; }
.t22-eyebrow { margin: 0 0 12px; font-size: .9rem; color: var(--t22-mid); }
.t22-h1 { margin: 0; font-family: 'Lora', 'Hind', serif; font-weight: 500; font-size: clamp(2.1rem, 7.6vw, 3.4rem); line-height: 1.14; }
.t22-lede { margin: 18px 0 0; font-size: 1.05rem; line-height: 1.85; color: #3B443A; max-width: 58ch; }
.t22-open-meta { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: .93rem; color: var(--t22-mid); }
.t22-on { color: #2E6B43; }
.t22-off { color: var(--t22-mid); }
.t22-stars { color: #C8952A; }
.t22-open-shot { margin: clamp(26px, 5vw, 42px) 0 0; }
.t22-open-shot img { width: 100%; height: clamp(220px, 46vw, 400px); object-fit: cover; display: block; }

.t22-sec { padding: clamp(38px, 7vw, 66px) 0 0; }
.t22-h2 { margin: 0 0 clamp(20px, 4vw, 30px); font-family: 'Lora', 'Hind', serif; font-weight: 500; font-size: clamp(1.5rem, 4.6vw, 2.05rem); line-height: 1.2; }

/* Alternating catalogue rows */
.t22-rows { display: flex; flex-direction: column; gap: clamp(26px, 5vw, 46px); }
.t22-row { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; padding-bottom: clamp(26px, 5vw, 46px); border-bottom: 1px solid var(--t22-line); }
.t22-row:last-child { border-bottom: none; padding-bottom: 0; }
.t22-row-shot { margin: 0; }
.t22-row-shot img { width: 100%; height: clamp(220px, 46vw, 320px); object-fit: cover; display: block; }
.t22-row-blank { height: clamp(180px, 34vw, 260px); background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 14%, #fff), var(--t22-page)); }
.t22-row-body h3 { margin: 0; font-family: 'Lora', 'Hind', serif; font-weight: 500; font-size: clamp(1.28rem, 3.8vw, 1.6rem); line-height: 1.3; }
.t22-note { margin: 10px 0 0; font-size: 1rem; line-height: 1.8; color: var(--t22-mid); max-width: 46ch; }
.t22-price { margin: 16px 0 0; }
.t22-price b { font-size: 1.28rem; font-weight: 600; }
.t22-price i { font-style: normal; font-size: .88rem; color: var(--t22-mid); }
.t22-price s { margin-left: 8px; font-size: .88rem; color: var(--t22-mid); }
.t22-ask { display: inline-block; margin-top: 16px; padding: 11px 20px; border-radius: 4px; background: var(--brand); color: #fff; font-size: .9rem; font-weight: 500; text-decoration: none; }

.t22-why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 30px; }
.t22-why li { position: relative; padding: 12px 0 12px 24px; border-bottom: 1px solid var(--t22-line); font-size: 1rem; }
.t22-why li::before { content: ''; position: absolute; left: 2px; top: 20px; width: 8px; height: 8px; border-radius: 50% 0 50% 50%; background: var(--brand); }

.t22-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(48%, 220px), 1fr)); gap: 10px; }
.t22-shots figure { margin: 0; }
.t22-shots img { width: 100%; height: clamp(160px, 28vw, 220px); object-fit: cover; display: block; }
.t22-shots figcaption { margin-top: 7px; font-size: .87rem; color: var(--t22-mid); }

.t22-rev { margin: 0 0 24px; }
.t22-rev p { margin: 8px 0 8px; font-family: 'Lora', 'Hind', serif; font-size: 1.1rem; line-height: 1.7; color: #2F362D; max-width: 60ch; }
.t22-rev cite { font-style: normal; font-size: .89rem; color: var(--t22-mid); }
.t22-reply { font-family: 'Hind', sans-serif !important; font-size: .95rem !important; color: var(--t22-mid) !important; padding-left: 14px; border-left: 1px solid var(--t22-line); }
.t22-reply b { color: var(--brand); font-weight: 600; }
.t22-quiet { margin: 0; font-size: 1rem; color: var(--t22-mid); }
.t22-links { margin: 22px 0 0; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.t22-outline { display: inline-block; padding: 11px 20px; border: 1px solid var(--t22-ink); border-radius: 4px; color: var(--t22-ink); font-size: .89rem; text-decoration: none; }
.t22-plain { color: var(--brand); font-size: .92rem; text-decoration: none; }

.t22-visit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(20px, 4vw, 40px); }
.t22-addr { margin: 0 0 10px; font-size: 1rem; line-height: 1.8; color: #3B443A; }
.t22-visit-links { margin: 0 0 14px; display: flex; flex-direction: column; gap: 2px; }
.t22-visit-links a { color: var(--brand); text-decoration: none; }
.t22-hours { width: 100%; border-collapse: collapse; font-size: .96rem; }
.t22-hours td { padding: 9px 0; border-bottom: 1px solid var(--t22-line); color: #3B443A; }
.t22-hours td:last-child { text-align: right; color: var(--t22-mid); }
.t22-hours tr.today td { font-weight: 600; color: var(--t22-ink); }

.t22-form { max-width: 460px; }
.t22-form .form-field { margin-bottom: 14px; }
.t22-form input, .t22-form textarea, .t22-form select { border-radius: 4px; border-color: var(--t22-line); background: #fff; }
.t22-form .btn { width: 100%; padding: 15px; }

.t22-foot { margin-top: clamp(38px, 7vw, 60px); border-top: 1px solid var(--t22-line); padding: 24px 0 calc(24px + var(--bar-h)); color: var(--t22-mid); font-size: .87rem; line-height: 1.8; }
.t22-foot p { margin: 0; }
.t22-foot a { color: inherit; }

@media (min-width: 760px) {
    .t22-row { grid-template-columns: 1fr 1fr; gap: 40px; }
    .t22-row.is-flipped .t22-row-shot { order: 2; }
}