@import url("https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gothic+A1:wght@400;500;700&display=swap");

:root {
  --bg: #ffffff;
  --bg-soft: #ffffff;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --text: #1b2340;
  --muted: #4f5672;
  --line: rgba(35, 64, 184, 0.16);
  --line-strong: rgba(35, 64, 184, 0.32);
  --accent: #2340b8;
  --accent-deep: #14205c;
  --accent-soft: #ffe3ec;
  --cta-start: color-mix(in srgb, var(--accent-deep) 88%, white);
  --cta-end: color-mix(in srgb, var(--text) 94%, black);
  --cta-start-hover: color-mix(in srgb, var(--cta-start) 88%, white);
  --cta-end-hover: color-mix(in srgb, var(--cta-end) 86%, white);
  --cta-shadow: color-mix(in srgb, var(--accent-deep) 30%, transparent);
  --shadow: 0 30px 60px -34px rgba(20, 32, 92, 0.5);
  --shadow-soft: 0 18px 36px -28px rgba(20, 32, 92, 0.4);
  --footer-bg: #14205c;
  --footer-surface: transparent;
  --footer-line: rgba(255, 255, 255, 0.16);
  --footer-text: #ffffff;
  --footer-muted: #c3cbef;
  --page-space: 0px;
  --section-space: 88px;
  --layout-gap: 24px;
  --hero-gap: 56px;
  --hero-padding: 0;
  --card-padding: 0;
  --radius-xl: 34px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --container: min(1180px, calc(100% - 32px));
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text);
  font-family: "Gothic A1", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.32), transparent 28%),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 48%, var(--bg) 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.08);
  outline-offset: 3px;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

.site-header,
.page-main,
.site-footer-inner {
  width: var(--container);
  margin: 0 auto;
}

.page-main {
  padding: var(--page-space) 0 calc(var(--page-space) * 1.9);
}

.section,
.page-intro,
.hero,
.trust-strip,
.split-section,
.service-grid,
.photo-grid,
.trust-grid,
.faq-list,
.contact-grid,
.services-layout,
.info-grid,
.footer-grid,
.legal-hero,
.legal-stack {
  display: grid;
  gap: var(--layout-gap);
}

.section {
  padding: var(--section-space) 0;
}

.section + .section,
.trust-strip + .section {
  border-top: 1px solid var(--line);
}

.page-intro {
  max-width: 58rem;
  padding: calc(var(--section-space) + 4px) 0 18px;
}

.split-section,
.contact-grid {
  grid-template-columns: 0.94fr 1.06fr;
}

.services-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-grid,
.trust-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.photo-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.faq-list,
.footer-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: "Black Han Sans", "Arial Black", ui-sans-serif, sans-serif;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

h1 {
  font-size: clamp(3rem, 7vw, 5.8rem);
  max-width: 10ch;
}

h2 {
  font-size: clamp(2rem, 5vw, 3.7rem);
  max-width: 16ch;
}

h3 {
  font-size: clamp(1.35rem, 3vw, 2rem);
}

p,
li,
dd,
dt,
label {
  line-height: 1.8;
}

.hero-copy p,
.page-intro p,
.section-heading p,
.service-card p,
.trust-card p,
.faq-item p,
.service-item p,
.card-panel p,
.footer-note,
.cta-copy p,
.story-card p,
.legal-card p,
.legal-summary p,
.breadcrumbs,
.hours-list,
.social-links,
.info-item dd {
  color: var(--muted);
  font-size: 1rem;
}

.page-main a:not(.button):not(.brand):not(.nav-cta):not(.staff-link) {
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 0.2em;
}

.page-main a:not(.button):not(.brand):not(.nav-cta):not(.staff-link):hover,
.page-main a:not(.button):not(.brand):not(.nav-cta):not(.staff-link):focus-visible {
  color: var(--text);
}

.site-header {
  position: sticky;
  top: 14px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 34px rgba(43, 31, 24, 0.06);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.brand-logo {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-strong));
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.42);
  object-fit: cover;
  flex: 0 0 auto;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.brand-copy strong {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand-copy span {
  color: var(--muted);
  font-size: 0.82rem;
}

.nav-toggle {
  display: none;
}

.nav-toggle-label {
  display: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-toggle-label span,
.nav-toggle-label::before,
.nav-toggle-label::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--text);
  transition: transform 180ms ease, opacity 180ms ease;
}

.nav-toggle-label::before {
  transform: translateY(-6px);
}

.nav-toggle-label::after {
  transform: translateY(4px);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 0.95rem;
}

.site-nav a:not(.nav-cta),
.footer-links a,
.footer-legal a,
.button-link,
.social-links a {
  color: var(--muted);
  transition: color 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.site-nav a:not(.nav-cta):hover,
.site-nav a:not(.nav-cta):focus-visible,
.footer-links a:hover,
.footer-links a:focus-visible,
.footer-legal a:hover,
.footer-legal a:focus-visible,
.button-link:hover,
.button-link:focus-visible,
.social-links a:hover,
.social-links a:focus-visible,
.site-nav a[aria-current="page"] {
  color: var(--text);
  transform: translateY(-1px);
}

.button,
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease,
    border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.button:hover,
.button:focus-visible,
.nav-cta:hover,
.nav-cta:focus-visible {
  transform: translateY(-1px);
}

.button-primary,
.nav-cta {
  color: #fdfcf8;
  background: linear-gradient(180deg, var(--cta-start), var(--cta-end));
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 30px var(--cta-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  opacity: 1;
  filter: none;
}

.button-primary:hover,
.button-primary:focus-visible,
.site-nav .nav-cta:hover,
.site-nav .nav-cta:focus-visible {
  color: #ffffff;
  background: linear-gradient(180deg, var(--cta-start-hover), var(--cta-end-hover));
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 22px 34px color-mix(in srgb, var(--accent-deep) 36%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.button-primary:focus-visible,
.site-nav .nav-cta:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 36%, transparent);
  outline-offset: 3px;
}

.button-primary:active,
.site-nav .nav-cta:active {
  transform: translateY(0);
  box-shadow: 0 12px 22px var(--cta-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.button-secondary {
  color: #ffffff;
  background: #1f3d2b;
  border: none;
  font-weight: 700;
  box-shadow: 0 18px 30px rgba(31, 61, 43, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  color: #ffffff;
  background: #2a5a3f;
  box-shadow: 0 22px 34px rgba(31, 61, 43, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.button-secondary:focus-visible {
  outline: 3px solid rgba(42, 90, 63, 0.28);
  outline-offset: 3px;
}

.button-secondary:active {
  transform: scale(0.98);
  box-shadow: 0 10px 18px rgba(31, 61, 43, 0.2);
}

.button-link {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  text-decoration: none;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.availability-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.6;
  max-width: 38ch;
}

.hero {
  grid-template-columns: 0.96fr 1.04fr;
  gap: var(--hero-gap);
  align-items: center;
  margin-bottom: 12px;
  padding: var(--hero-padding);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--surface-strong), color-mix(in srgb, var(--surface) 78%, white));
  box-shadow: var(--shadow);
}

.hero-copy {
  display: grid;
  gap: 18px;
  align-content: center;
}

.hero-copy .eyebrow,
.hero-copy p,
.hero-copy h1 {
  margin: 0;
}

.hero-panel,
.hero-image-card,
.service-card,
.trust-card,
.staff-card,
.service-list,
.faq-item,
.card-panel,
.info-panel,
.cta-banner,
.legal-card,
.legal-summary,
.editorial-aside,
.local-facts-card,
.service-aside {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.hero-panel {
  min-height: 520px;
  padding: 18px;
  border-radius: var(--radius-xl);
}

.hero-image-card {
  width: 100%;
  height: 100%;
  min-height: 460px;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(160deg, var(--accent-soft) 0%, var(--bg-soft) 100%);
}

.hero-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-card {
  overflow: hidden;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: color-mix(in srgb, var(--surface-strong) 84%, white);
  box-shadow: var(--shadow-soft);
}

.photo-card img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.photo-card-feature {
  grid-column: 1 / -1;
}

.trust-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 18px 0 12px;
  border-top: 1px solid var(--line);
}

.trust-strip-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
  text-align: center;
}

.trust-strip-item span {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.45;
}

.section-heading {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  margin-bottom: 24px;
}

.story-card,
.info-panel,
.card-panel,
.editorial-aside,
.local-facts-card,
.service-aside,
.legal-card,
.legal-summary {
  padding: var(--card-padding);
  border-radius: var(--radius-xl);
}

.service-card,
.trust-card,
.faq-item,
.service-list {
  height: 100%;
  padding: calc(var(--card-padding) - 2px);
  border-radius: 24px;
}

.service-card,
.trust-card,
.service-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-card-top,
.service-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.service-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-strong));
  color: var(--accent-deep);
  font-weight: 800;
}

.service-card h3,
.trust-card h3,
.faq-item h3,
.card-panel h2,
.service-list h2 {
  margin-bottom: 10px;
}

.service-list h2,
.legal-summary h2,
.legal-card h2 {
  max-width: none;
}

.service-item + .service-item {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.service-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent-soft) 60%, white);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.info-item {
  padding: 8px 0 18px;
  border-bottom: 1px solid var(--line);
}

.info-item dd {
  margin: 0;
}

.info-item:last-child,
.info-item:nth-last-child(2) {
  border-bottom: 0;
  padding-bottom: 0;
}

.hours-list,
.social-links {
  margin: 0;
  padding-left: 20px;
}

.hours-list {
  display: grid;
  gap: 10px;
  padding-left: 0;
  list-style: none;
}

.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.hours-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.hours-list strong {
  color: var(--text);
  flex: 0 0 auto;
}

.hours-list span {
  text-align: right;
}

.social-links li + li {
  margin-top: 8px;
}

.map-card {
  margin: 20px 0 22px;
  padding: 12px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
}

.map-embed {
  width: 100%;
  min-height: 260px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(160deg, var(--accent-soft) 0%, var(--bg-soft) 100%);
}

.legal-hero {
  grid-template-columns: 1.02fr 0.98fr;
  align-items: start;
  padding: calc(var(--section-space) + 4px) 0 14px;
}

.legal-stack {
  gap: 18px;
}

.cta-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: calc(var(--card-padding) + 2px);
  border-radius: 30px;
}

.guarantees {
  padding: var(--card-padding);
  border-radius: 30px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.guarantees h2 {
  max-width: 24ch;
  margin-bottom: 18px;
}

.guarantees-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.guarantees-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.6;
}

.guarantees-list li:last-child {
  border-bottom: 0;
}

.guarantees-list strong {
  color: var(--accent);
  margin-right: 6px;
  font-weight: 700;
}

/* Named technicians.
 *
 * Its own card family rather than .trust-card, which is styled to read as a
 * list of facts: uniform, text-only, three wide. A roster rendered in those
 * read as more facts. A technician you can ask for by name is the most
 * specific thing on the page and the hardest claim for a competitor to copy,
 * so the section leads with people: an initial medallion for a visual anchor,
 * the speciality as an accent chip rather than grey body copy, handles as
 * tappable pills, and a tighter auto-fit grid so a seven-person team reads as
 * a team instead of a column of near-empty cards.
 *
 * Every colour is a theme token, and .staff-card joins the shared card-surface
 * rule above, so all 124 themes keep their own palette with no per-theme CSS.
 */
.staff-section .section-heading {
  margin-bottom: 20px;
}

.staff-grid {
  display: grid;
  /* auto-fit, so the roster fills the row it is given and collapses on its
     own at narrow widths — no breakpoint to keep in sync with .trust-grid. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  /* Each card is as tall as its own content. Stretching them to match the
     row meant one technician with two handles gave everyone beside her a
     half-empty card — the exact airy, low-signal look this section is
     meant to shed. */
  align-items: start;
}

.staff-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 26px 24px;
  border-radius: 24px;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.staff-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

/* Same gradient + ink pairing as .service-icon, which is already proven
   readable across every generated theme. */
.staff-avatar {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-strong));
  /* A hairline ring so the medallion still reads as an object on the themes
     whose accent-soft is barely distinguishable from their card surface. */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
  color: var(--accent-deep);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
}

.staff-card h3 {
  margin: 0;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  line-height: 1.2;
}

.staff-specialty {
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}

.staff-accolade {
  margin: 0;
}

.staff-accolade span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent-deep);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
}

.staff-accolade span::before {
  content: "\2605";
  font-size: 0.95em;
}

/* Earned by having an accolade, not hand-picked — see render_staff_html. */
.staff-card-featured {
  border-color: var(--accent);
  background: linear-gradient(160deg, var(--accent-soft) 0%, var(--surface) 62%);
  box-shadow: var(--shadow);
}

/* What a technician is cleared to do, synced from the POS's skill tags.
   Outline chips, deliberately quieter than the filled .staff-specialty above
   them: the speciality is the owner's sentence about a person, these are the
   menu they can be booked for. Same pill shape so the card reads as one
   family rather than three competing badge styles. */
.staff-skills {
  margin: 2px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.staff-skill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
}

.staff-links {
  margin: 2px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.staff-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  word-break: break-word;
}

.staff-link:hover,
.staff-link:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-deep);
}

@media (prefers-reduced-motion: reduce) {
  .staff-card {
    transition: none;
  }

  .staff-card:hover {
    transform: none;
  }
}

.gallery-credit {
  margin-top: 12px;
  color: var(--muted);
}

.gallery-credit strong {
  color: var(--accent);
  font-weight: 700;
}

/* A technician with synced portfolio photos shows their latest work in the
   medallion instead of an initial. */
.staff-avatar-photo {
  overflow: hidden;
  padding: 0;
}

.staff-avatar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The roster preview ends in a link to /team/ when it is cut short. */
.staff-more {
  margin: 22px 0 0;
}

/* A technician's own page (/team/<name>/): the badges, chips and handles sit
   under the intro sentence in the same pill family as the roster card. */
.staff-profile .staff-accolade,
.staff-profile .staff-specialty {
  display: inline-block;
  margin: 4px 8px 0 0;
}

.staff-profile .staff-skills,
.staff-profile .staff-links {
  margin-top: 12px;
}

.staff-profile .button-row {
  margin-top: 22px;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  align-items: start;
}

.review-card {
  margin: 0;
  padding: 24px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.review-card blockquote {
  margin: 8px 0 12px;
}

.review-card blockquote p {
  margin: 0;
  color: var(--text);
  line-height: 1.6;
}

.review-stars {
  margin: 0;
  color: var(--accent);
  letter-spacing: 2px;
}

.review-card figcaption {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.review-tech {
  margin: 10px 0 0;
  font-size: 0.92rem;
  font-weight: 600;
}

.review-more {
  margin: 20px 0 0;
}

/* In the footer the profiles sit on one line after the phone number; the
   bulleted list shape is kept for the contact page body. */
.site-footer .social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-left: 0;
  list-style: none;
}

.site-footer .social-links li + li {
  margin-top: 0;
}

.site-footer {
  margin-top: 18px;
  padding: 18px 0 34px;
  border-top: 1px solid var(--line);
}

.site-footer-inner {
  display: grid;
  gap: 20px;
  padding: 30px;
  border: 1px solid var(--footer-line);
  border-radius: 30px;
  background: var(--footer-bg);
  box-shadow: 0 28px 52px rgba(24, 18, 16, 0.18);
}

.site-footer-inner .card-panel {
  border-color: var(--footer-line);
  background: var(--footer-surface);
  box-shadow: none;
}

.site-footer-inner,
.site-footer-inner h2,
.site-footer-inner strong,
.site-footer-inner a {
  color: var(--footer-text);
}

.site-footer-inner p,
.site-footer-inner .hours-list,
.site-footer-inner .social-links,
.site-footer-inner .footer-legal,
.site-footer-inner .footer-links,
.site-footer .brand-copy span,
.site-footer .footer-note {
  color: var(--footer-muted);
}

.site-footer .hours-list li {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.footer-top,
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.footer-top {
  justify-content: space-between;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 0.92rem;
}

.footer-note {
  margin: 0;
}

.footer-note-meta {
  font-size: 0.92rem;
}

.theme-grid-two,
.editorial-story-grid,
.local-trust-grid,
.service-story-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--layout-gap);
}

@media (max-width: 1024px) {
  .hero,
  .trust-strip,
  .split-section,
  .contact-grid,
  .legal-hero,
  .cta-banner,
  .section-heading,
  .services-layout,
  .faq-list,
  .footer-grid,
  .theme-grid-two,
  .editorial-story-grid,
  .local-trust-grid,
  .service-story-grid {
    grid-template-columns: 1fr;
  }

  .service-grid,
  .photo-grid,
  .trust-grid,
  .info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-panel {
    min-height: 420px;
  }
}

@media (max-width: 760px) {
  .page-main {
    padding: 30px 0 64px;
  }

  .section {
    padding: 34px 0;
  }

  .site-header {
    top: 10px;
    border-radius: 28px;
    align-items: flex-start;
    padding: 14px;
  }

  .nav-toggle-label {
    display: inline-flex;
    margin-left: auto;
  }

  .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: var(--surface-strong);
    box-shadow: var(--shadow-soft);
  }

  .site-nav a {
    padding: 12px 14px;
    border-radius: 16px;
  }

  .nav-toggle:checked + .nav-toggle-label span {
    opacity: 0;
  }

  .nav-toggle:checked + .nav-toggle-label::before {
    transform: translateY(2px) rotate(45deg);
  }

  .nav-toggle:checked + .nav-toggle-label::after {
    transform: translateY(0) rotate(-45deg);
  }

  .nav-toggle:checked ~ .site-nav {
    display: flex;
  }

  .service-grid,
  .photo-grid,
  .trust-grid,
  .trust-strip,
  .info-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 40px 24px;
  }

  .hero-panel,
  .hero-image-card {
    min-height: 360px;
  }

  .button-row {
    flex-direction: column;
    align-items: stretch;
  }

  .button,
  .button-row .button {
    width: 100%;
  }

  .service-card-top,
  .service-head,
  .hours-list li {
    flex-direction: column;
    align-items: flex-start;
  }

  .hours-list span {
    text-align: left;
  }

  .footer-top,
  .footer-links,
  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Living-signal layer: trust strip wrap, hero hours note, tel button polish. */
.trust-strip-item span {
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}
.hero .availability-note {
  font-size: 0.95rem;
  line-height: 1.5;
}
.button-primary[href^="tel:"] {
  letter-spacing: 0.01em;
}

/* Balance compact trust cards with the service list they sit beside. */
.trust-grid-compact {
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}
.trust-grid-compact .trust-card {
  min-height: 120px;
  padding: 24px;
  justify-content: center;
  gap: 6px;
}
.trust-grid-compact .trust-card h3 {
  font-size: 1.2rem;
  line-height: 1.25;
  margin-bottom: 4px;
}
.trust-grid-compact .trust-card p {
  font-size: 1rem;
  line-height: 1.45;
}
.service-aside .hours-list {
  margin-bottom: 20px;
}

/* Site-wide card + grid normalization. Keeps repeated cards as one family. */
.faq-list {
  grid-template-columns: 1fr;
  gap: 16px;
}
.service-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.faq-item h3,
.service-card h3,
.trust-card h3 {
  line-height: 1.25;
}
.faq-item h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  max-width: 56ch;
}
.faq-item p {
  max-width: 72ch;
}
.card-panel .faq-list {
  gap: 12px;
}
.trust-card h3 {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
}
.trust-card {
  min-height: 120px;
  justify-content: center;
}

/* Real-menu price styling and featured service cards. */
.price-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.price-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text);
}
.price-list li:last-child {
  border-bottom: none;
}
.price-list .price {
  font-weight: 600;
  color: var(--accent-deep);
  white-space: nowrap;
}
.service-note {
  margin-top: 14px;
  font-size: 0.95rem;
  color: var(--muted);
}
.service-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-deep);
  background: var(--accent-soft);
  border-radius: 999px;
  vertical-align: middle;
}
.service-card-featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-soft);
}
.service-card .service-meta {
  font-weight: 600;
  color: var(--accent-deep);
  margin: 0;
}

/* Lightbox Sign
   Nail Korea's storefront on W 8th St is a hot-pink lightbox reading the
   salon name and the phone number in big white letters; inside, the work
   is clean and cute (bear and cat art, a cobalt checkerboard). The one
   bold move: the page opens with that sign, lit, name on the left and
   number on the right, and the whole sign dials the salon. Under it the
   page is white with cobalt type and plain three-part layout. */

/* ---------- Shared plumbing (type scale, links, flattened card kit) ---------- */

.theme-lightbox-sign {
  --container: min(1180px, calc(100% - 40px));
  background: var(--paper);
  color: var(--ink);
  font-size: 1.0625rem;
}

.theme-lightbox-sign h1,
.theme-lightbox-sign h2,
.theme-lightbox-sign h3 {
  color: var(--head);
  text-wrap: balance;
}

.theme-lightbox-sign p,
.theme-lightbox-sign li,
.theme-lightbox-sign dd {
  line-height: 1.6;
}

.theme-lightbox-sign .eyebrow {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.theme-lightbox-sign .lb-block .eyebrow,
.theme-lightbox-sign .site-footer .eyebrow,
.theme-lightbox-sign .service-list .eyebrow,
.theme-lightbox-sign .page-intro .eyebrow,
.theme-lightbox-sign .cta-banner .eyebrow {
  display: none;
}

.theme-lightbox-sign .page-main a:not(.button):not(.brand):not(.nav-cta):not(.staff-link) {
  color: var(--link);
  text-decoration-color: var(--rule-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.theme-lightbox-sign .page-main a:not(.button):not(.brand):not(.nav-cta):not(.staff-link):hover {
  color: var(--link-hover);
}

.theme-lightbox-sign a:focus-visible,
.theme-lightbox-sign .button:focus-visible,
.theme-lightbox-sign .nav-cta:focus-visible,
.theme-lightbox-sign .site-nav .nav-cta:focus-visible,
.theme-lightbox-sign .button-primary:focus-visible,
.theme-lightbox-sign .button-secondary:focus-visible,
.theme-lightbox-sign .photo-grid:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.theme-lightbox-sign .site-header {
  top: 0;
  margin-top: 0;
  padding: 14px 0;
  width: 100%;
  max-width: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-inline: max(20px, calc((100% - 1180px) / 2));
}

.theme-lightbox-sign .brand-logo {
  border: 0;
  box-shadow: none;
  object-fit: cover;
}

.theme-lightbox-sign .brand-copy strong {
  letter-spacing: 0;
  text-transform: none;
}

.theme-lightbox-sign .site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--rule-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.theme-lightbox-sign .button,
.theme-lightbox-sign .nav-cta {
  min-height: 52px;
  padding: 0 26px;
  font-weight: 700;
  box-shadow: none;
}

.theme-lightbox-sign .nav-cta {
  min-height: 44px;
  padding: 0 20px;
}

.theme-lightbox-sign .button:hover,
.theme-lightbox-sign .nav-cta:hover {
  box-shadow: none;
}

.theme-lightbox-sign .button-link {
  color: var(--link);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--rule-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

.theme-lightbox-sign .service-card,
.theme-lightbox-sign .trust-card,
.theme-lightbox-sign .faq-item,
.theme-lightbox-sign .service-list,
.theme-lightbox-sign .card-panel,
.theme-lightbox-sign .story-card,
.theme-lightbox-sign .info-panel,
.theme-lightbox-sign .legal-card,
.theme-lightbox-sign .legal-summary,
.theme-lightbox-sign .review-card,
.theme-lightbox-sign .staff-card {
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.theme-lightbox-sign .section + .section,
.theme-lightbox-sign .trust-strip + .section {
  border-top: 0;
}

.theme-lightbox-sign .service-card-top,
.theme-lightbox-sign .service-icon {
  display: none;
}

.theme-lightbox-sign .service-card h3 {
  margin: 0 0 6px;
}

.theme-lightbox-sign .service-card p {
  margin: 0;
  max-width: 44ch;
  color: var(--muted);
}

.theme-lightbox-sign .hours-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.theme-lightbox-sign .hours-list li {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.theme-lightbox-sign .hours-list li:last-child {
  border-bottom: 0;
}

.theme-lightbox-sign .hours-list span {
  text-align: right;
  white-space: nowrap;
}

.theme-lightbox-sign .faq-list {
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 18px;
}

.theme-lightbox-sign .faq-item {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.theme-lightbox-sign .faq-item h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-family: inherit;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0;
}

.theme-lightbox-sign .faq-item p {
  margin: 0;
}

.theme-lightbox-sign .review-grid {
  gap: 40px;
}

.theme-lightbox-sign .review-card {
  padding-left: 22px;
  border-left: 3px solid var(--rule-accent);
}

.theme-lightbox-sign .lb-callbar {
  display: none;
}

.theme-lightbox-sign .page-main.lb-home {
  padding-top: 0;
  padding-bottom: 0;
}

.theme-lightbox-sign .page-main.lb-services {
  padding-bottom: 0;
}

/* ---------- Inner pages ---------- */

.theme-lightbox-sign .page-intro {
  padding: 64px 0 8px;
}

.theme-lightbox-sign .page-intro h1 {
  margin-top: 10px;
  max-width: 20ch;
}

.theme-lightbox-sign .page-intro p {
  max-width: 56ch;
  font-size: 1.15rem;
}

.theme-lightbox-sign .breadcrumbs {
  color: var(--muted);
}

.theme-lightbox-sign .card-panel h2,
.theme-lightbox-sign .service-list h2 {
  margin-bottom: 10px;
}

.theme-lightbox-sign .contact-grid,
.theme-lightbox-sign .split-section {
  gap: 64px;
}

.theme-lightbox-sign .info-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.theme-lightbox-sign .trust-grid {
  gap: 0 32px;
  align-items: start;
}

.theme-lightbox-sign .trust-card p {
  margin: 0;
}

.theme-lightbox-sign .trust-card {
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.theme-lightbox-sign .trust-card h3 {
  margin: 0 0 6px;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
}

.theme-lightbox-sign .cta-banner {
  border: 0;
  box-shadow: none;
}

.theme-lightbox-sign .services-layout {
  grid-template-columns: 1fr;
  gap: 0;
}

.theme-lightbox-sign .service-list {
  padding: 26px 0;
  border-top: 1px solid var(--line-strong);
}

.theme-lightbox-sign .service-list .service-head h2 {
  margin-bottom: 0;
}

.theme-lightbox-sign .service-list .service-item p {
  margin: 8px 0 0;
  max-width: 52ch;
}

.theme-lightbox-sign .service-story-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
  gap: 72px;
  align-items: start;
}

.theme-lightbox-sign .lb-side {
  position: sticky;
  top: 100px;
}

.theme-lightbox-sign .lb-side h2 {
  margin: 0 0 8px;
}

.theme-lightbox-sign .lb-side-note {
  margin: 14px 0 0;
  color: var(--muted);
}

/* ---------- Footer ---------- */

.theme-lightbox-sign .site-footer {
  margin-top: 0;
  padding: 56px 0 40px;
  border-top: 0;
  background: var(--footer-bg);
  color: var(--footer-text);
}

.theme-lightbox-sign .site-footer-inner {
  gap: 36px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.theme-lightbox-sign .site-footer .footer-top {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--footer-line);
}

.theme-lightbox-sign .site-footer-inner .card-panel {
  padding: 0;
  border: 0;
  background: transparent;
}

.theme-lightbox-sign .site-footer h2 {
  color: var(--footer-text);
  font-size: 1.35rem;
}

.theme-lightbox-sign .site-footer .brand-copy strong {
  color: var(--footer-text);
}

.theme-lightbox-sign .site-footer p,
.theme-lightbox-sign .site-footer .hours-list,
.theme-lightbox-sign .site-footer .footer-links a,
.theme-lightbox-sign .site-footer .footer-legal a,
.theme-lightbox-sign .site-footer .footer-note {
  color: var(--footer-muted);
}

.theme-lightbox-sign .site-footer .hours-list li {
  border-bottom-color: var(--footer-line);
}

.theme-lightbox-sign .site-footer .hours-list strong {
  color: var(--footer-text);
}

.theme-lightbox-sign .site-footer a:hover {
  color: var(--footer-text);
}

.theme-lightbox-sign .site-footer .button-secondary {
  color: var(--footer-text);
  background: transparent;
  border: 1px solid var(--footer-line-strong);
}

/* ---------- Responsive plumbing ---------- */

@media (max-width: 1024px) {
  .theme-lightbox-sign .service-story-grid {
    gap: 48px;
  }
}

@media (max-width: 760px) {
  .theme-lightbox-sign {
    --container: calc(100% - 32px);
  }

  .theme-lightbox-sign .site-header {
    padding-inline: 16px;
  }

  /* Stack the three menu bars; the base label lays them out in a row. */
  .theme-lightbox-sign .nav-toggle-label {
    position: relative;
  }

  .theme-lightbox-sign .nav-toggle-label span,
  .theme-lightbox-sign .nav-toggle-label::before,
  .theme-lightbox-sign .nav-toggle-label::after {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -1px 0 0 -9px;
  }

  .theme-lightbox-sign .nav-toggle-label::before {
    transform: translateY(-6px);
  }

  .theme-lightbox-sign .nav-toggle-label::after {
    transform: translateY(6px);
  }

  .theme-lightbox-sign .nav-toggle:checked + .nav-toggle-label span {
    opacity: 0;
  }

  .theme-lightbox-sign .nav-toggle:checked + .nav-toggle-label::before {
    transform: rotate(45deg);
  }

  .theme-lightbox-sign .nav-toggle:checked + .nav-toggle-label::after {
    transform: rotate(-45deg);
  }

  .theme-lightbox-sign .footer-legal span[aria-hidden="true"] {
    display: none;
  }

  .theme-lightbox-sign .service-story-grid {
    grid-template-columns: 1fr;
  }

  .theme-lightbox-sign .lb-side {
    position: static;
  }

  .theme-lightbox-sign .cta-banner {
    grid-template-columns: 1fr;
    padding: 32px 24px;
  }

  .theme-lightbox-sign .lb-callbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--callbar-bg);
  }

  .theme-lightbox-sign .lb-callbar .button {
    min-height: 48px;
    padding: 0 12px;
  }

  .theme-lightbox-sign .site-footer {
    padding-bottom: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-lightbox-sign *,
  .theme-lightbox-sign *::before,
  .theme-lightbox-sign *::after {
    animation: none !important;
    transition: none !important;
  }

  .theme-lightbox-sign .button:hover,
  .theme-lightbox-sign .nav-cta:hover,
  .theme-lightbox-sign .site-nav a:hover {
    transform: none;
  }
}

/* ---------- Theme-specific ---------- */

.theme-lightbox-sign {
  --paper: #ffffff;
  --sign: #ff2d6f;
  --sign-hot: #ff5a8f;
  --cobalt: #2340b8;
  --cobalt-deep: #14205c;
  --blush: #ffe3ec;
  --ink: #1b2340;
  --head: #14205c;
  --muted: #4f5672;
  --link: #14205c;
  --link-hover: #2340b8;
  --rule-accent: #ff2d6f;
  --focus: #2340b8;
  --footer-line-strong: rgba(255, 255, 255, 0.5);
  --callbar-bg: rgba(255, 255, 255, 0.97);
}

/* ---------- Type ---------- */

.theme-lightbox-sign h1,
.theme-lightbox-sign h2 {
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.08;
}

.theme-lightbox-sign h1 {
  font-size: clamp(2.1rem, 3.6vw, 3.2rem);
  max-width: 16ch;
}

.theme-lightbox-sign h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  max-width: 20ch;
}

.theme-lightbox-sign h3 {
  font-family: "Gothic A1", "Segoe UI", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* ---------- Header ---------- */

.theme-lightbox-sign .site-header {
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--line);
}

.theme-lightbox-sign .brand-logo {
  width: 42px;
  height: 42px;
  border-radius: 8px;
}

.theme-lightbox-sign .brand-copy strong {
  font-family: "Black Han Sans", "Arial Black", sans-serif;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--cobalt-deep);
}

.theme-lightbox-sign .site-nav a:not(.nav-cta) {
  color: var(--ink);
}

/* ---------- Buttons ---------- */

.theme-lightbox-sign .button,
.theme-lightbox-sign .nav-cta {
  border-radius: 8px;
}

.theme-lightbox-sign .button-primary,
.theme-lightbox-sign .nav-cta,
.theme-lightbox-sign .site-nav .nav-cta {
  color: #ffffff;
  background: var(--cobalt);
  border: 0;
}

.theme-lightbox-sign .button-primary:hover,
.theme-lightbox-sign .button-primary:focus-visible,
.theme-lightbox-sign .site-nav .nav-cta:hover,
.theme-lightbox-sign .site-nav .nav-cta:focus-visible {
  color: #ffffff;
  background: var(--cobalt-deep);
}

.theme-lightbox-sign .button-secondary {
  color: var(--cobalt-deep);
  background: transparent;
  border: 2px solid var(--cobalt);
}

.theme-lightbox-sign .button-secondary:hover,
.theme-lightbox-sign .button-secondary:focus-visible {
  color: #ffffff;
  background: var(--cobalt);
}

.theme-lightbox-sign .lb-visit .button-primary {
  color: var(--cobalt-deep);
  background: #ffffff;
}

.theme-lightbox-sign .lb-visit .button-primary:hover {
  color: #ffffff;
  background: var(--sign);
}

.theme-lightbox-sign .lb-visit .button-secondary {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.6);
}

.theme-lightbox-sign .lb-visit .button-secondary:hover {
  color: var(--cobalt-deep);
  background: #ffffff;
}

/* ---------- Home: the sign ---------- */

.theme-lightbox-sign .lb-sign-wrap {
  padding: 36px 0 0;
}

.theme-lightbox-sign .page-main a.lb-sign:not(.button):not(.brand):not(.nav-cta):not(.staff-link) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
  padding: 26px 40px 22px;
  border: 10px solid #1b1d29;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 40%),
    var(--sign);
  box-shadow:
    inset 0 0 40px rgba(255, 255, 255, 0.25),
    0 0 0 1px #3a3d4f,
    0 0 60px -6px rgba(255, 45, 111, 0.65),
    0 26px 40px -30px rgba(20, 32, 92, 0.6);
  color: #ffffff;
  text-decoration: none;
  animation: lb-light 900ms ease-out 200ms both;
}

.theme-lightbox-sign .page-main a.lb-sign:not(.button):not(.brand):not(.nav-cta):not(.staff-link):hover {
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 40%),
    var(--sign-hot);
}

.theme-lightbox-sign .lb-sign-name {
  font-family: "Black Han Sans", "Arial Black", sans-serif;
  font-size: clamp(2.6rem, 7.4vw, 6.4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(150, 0, 50, 0.35);
}

.theme-lightbox-sign .lb-sign-phone {
  font-family: "Black Han Sans", "Arial Black", sans-serif;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  line-height: 1;
  text-shadow: 0 2px 0 rgba(150, 0, 50, 0.35);
}

@keyframes lb-light {
  0% {
    filter: brightness(0.45) saturate(0.6);
  }
  40% {
    filter: brightness(1.15) saturate(1.1);
  }
  100% {
    filter: none;
  }
}

/* ---------- Home: three-part row under the sign ---------- */

.theme-lightbox-sign .lb-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr) minmax(0, 0.8fr);
  gap: 40px;
  align-items: start;
  padding: 48px 0 80px;
}

.theme-lightbox-sign .lb-hero h1 {
  margin: 0;
}

.theme-lightbox-sign .lb-lede {
  max-width: 36ch;
  margin: 18px 0 28px;
  font-size: 1.12rem;
}

.theme-lightbox-sign .lb-rating .booking-trust-note {
  margin: 20px 0 0;
  color: var(--muted);
}

.theme-lightbox-sign .lb-hero-photo .hero-image-card {
  min-height: 0;
  aspect-ratio: 3 / 4;
  border: 0;
  border-radius: 10px;
  background: var(--blush);
  box-shadow: none;
  overflow: hidden;
}

.theme-lightbox-sign .lb-hero-photo .hero-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.theme-lightbox-sign .lb-hours {
  padding-top: 6px;
  border-top: 4px solid var(--cobalt);
}

.theme-lightbox-sign .lb-hours h2 {
  margin: 12px 0 6px;
  font-size: 1.6rem;
}

.theme-lightbox-sign .lb-hours .hours-list strong {
  color: var(--cobalt-deep);
}

.theme-lightbox-sign .lb-hours-address {
  margin: 14px 0 0;
  font-size: 0.98rem;
}

/* ---------- Home: services ---------- */

.theme-lightbox-sign .lb-menu {
  padding-top: 24px;
}

.theme-lightbox-sign .lb-menu-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.theme-lightbox-sign .lb-menu-head h2 {
  margin: 0;
}

.theme-lightbox-sign .lb-menu .service-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 32px;
}

.theme-lightbox-sign .lb-menu .service-card {
  padding: 18px 0 8px;
  border-top: 4px solid var(--cobalt);
}

.theme-lightbox-sign .lb-menu .service-card h3 {
  color: var(--cobalt-deep);
}

/* ---------- Home: gallery ---------- */

.theme-lightbox-sign .lb-gallery .section-heading {
  display: block;
  margin-bottom: 24px;
}

.theme-lightbox-sign .lb-gallery .section-heading p {
  margin: 8px 0 0;
  color: var(--muted);
}

.theme-lightbox-sign .photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 16px;
}

.theme-lightbox-sign .photo-card,
.theme-lightbox-sign .photo-card-feature {
  grid-column: auto;
  grid-row: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--blush);
  box-shadow: none;
  overflow: hidden;
}

.theme-lightbox-sign .photo-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
}

/* ---------- Home: about + questions ---------- */

.theme-lightbox-sign .lb-about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}

.theme-lightbox-sign .lb-about h2 {
  margin-bottom: 18px;
}

.theme-lightbox-sign .lb-about-story p {
  max-width: 58ch;
}

/* ---------- Visit band ---------- */

.theme-lightbox-sign .lb-visit {
  margin-top: 24px;
  background: var(--cobalt);
  box-shadow: 0 0 0 100vmax var(--cobalt);
  clip-path: inset(0 -100vmax);
  color: #ffffff;
}

.theme-lightbox-sign .lb-visit-inner {
  padding: 72px 0 80px;
}

.theme-lightbox-sign .lb-visit h2 {
  margin: 0 0 6px;
  color: #ffffff;
}

.theme-lightbox-sign .lb-address {
  margin: 0 0 6px;
  font-size: 1.12rem;
}

.theme-lightbox-sign .page-main .lb-visit a:not(.button):not(.brand):not(.nav-cta):not(.staff-link) {
  color: #ffffff;
  text-decoration-color: rgba(255, 255, 255, 0.55);
}

.theme-lightbox-sign .page-main .lb-visit a.lb-phone:not(.button):not(.brand):not(.nav-cta):not(.staff-link) {
  display: inline-block;
  margin: 4px 0 26px;
  color: #ffffff;
  font-family: "Black Han Sans", "Arial Black", sans-serif;
  font-size: clamp(2.4rem, 6.4vw, 4.8rem);
  line-height: 1.05;
  text-decoration: none;
}

.theme-lightbox-sign .page-main .lb-visit a.lb-phone:not(.button):not(.brand):not(.nav-cta):not(.staff-link):hover {
  color: var(--blush);
}

/* ---------- Inner pages ---------- */

.theme-lightbox-sign .page-intro h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.4rem);
}

.theme-lightbox-sign .service-list {
  border-top: 4px solid var(--cobalt);
}

.theme-lightbox-sign .service-list .service-head h2 {
  font-size: 1.8rem;
}

.theme-lightbox-sign .contact-grid > aside.card-panel,
.theme-lightbox-sign .lb-side {
  padding: 24px 26px;
  border-top: 4px solid var(--sign);
  border-radius: 0 0 10px 10px;
  background: var(--blush);
}

.theme-lightbox-sign .lb-side h2 {
  font-size: 1.6rem;
}

.theme-lightbox-sign .map-card {
  border-radius: 10px;
  overflow: hidden;
}

.theme-lightbox-sign .cta-banner {
  padding: 40px 44px;
  border-radius: 10px;
  background: var(--blush);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .theme-lightbox-sign .lb-hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  .theme-lightbox-sign .lb-hours {
    grid-column: 1 / -1;
  }

  .theme-lightbox-sign .lb-menu .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 24px;
  }

  .theme-lightbox-sign .lb-about {
    gap: 48px;
  }
}

@media (max-width: 760px) {
  .theme-lightbox-sign .site-header .site-nav {
    background: #ffffff;
  }

  .theme-lightbox-sign .lb-sign-wrap {
    padding-top: 20px;
  }

  .theme-lightbox-sign .page-main a.lb-sign:not(.button):not(.brand):not(.nav-cta):not(.staff-link) {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 20px 16px;
    border-width: 7px;
  }

  .theme-lightbox-sign .lb-sign-name {
    font-size: clamp(2.3rem, 12vw, 3.2rem);
  }

  .theme-lightbox-sign .lb-hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 0 56px;
  }

  .theme-lightbox-sign .lb-hero-photo .hero-image-card {
    aspect-ratio: 4 / 3;
  }

  .theme-lightbox-sign .lb-menu-head {
    flex-direction: column;
    gap: 6px;
  }

  .theme-lightbox-sign .lb-menu .service-grid,
  .theme-lightbox-sign .lb-about {
    grid-template-columns: 1fr;
  }

  .theme-lightbox-sign .lb-menu .service-grid {
    row-gap: 18px;
  }

  .theme-lightbox-sign .photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .theme-lightbox-sign .lb-visit-inner {
    padding: 56px 0 64px;
  }
}