/* ===========================================================================
   Candy Coating Ceramics
   ---------------------------------------------------------------------------
   The palette is sampled straight out of Bryson's logo (tools scratch pass,
   Sept 2026): candy pink #E44895, baby blue #9AD3F3, chrome #D9D7D8.
   House rule is that brand colours come from the logo, never invented.

   The base is near black rather than the logo's white, for one reason: every
   photo on this site is a dark, glossy car shot outdoors in Florida sun. On
   white they look like snapshots. On near black with a chrome hairline they
   read the way the paint reads in person, and the pink stops being bubblegum
   and starts being an accent.
   =========================================================================== */

:root {
  --ink: #0B0B0F;
  --ink-2: #13131A;
  --ink-3: #1B1B24;
  --line: #2A2A36;

  --pink: #E44895;
  --pink-hot: #F268AC;
  --pink-deep: #B8256E;
  --blue: #9AD3F3;
  --chrome-1: #F2F1F2;
  --chrome-2: #C9C7CC;
  --chrome-3: #8E8C95;

  --text: #F4F2F5;
  --text-mid: #B4B1BC;
  --text-dim: #85828F;

  --display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shell: 1200px;
  --gut: 20px;
  --r: 14px;
}

@media (min-width: 720px) { :root { --gut: 32px; } }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--pink-hot); }
a:hover { color: var(--pink); }

h1, h2, h3, .kicker, .btn, .sec-num, .svc-num, .step-num {
  font-family: var(--display);
}

h1 {
  font-size: clamp(2.1rem, 6.2vw, 4.05rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin: 0 0 14px;
  text-wrap: balance;
}

h2 { font-size: clamp(1.55rem, 3.4vw, 2.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.022em; margin: 0 0 12px; text-wrap: balance; }
h3 { font-size: 1.12rem; font-weight: 700; line-height: 1.28; letter-spacing: -0.012em; margin: 0 0 7px; }
p { margin: 0 0 15px; }
p:last-child { margin-bottom: 0; }

/* The SEO contract puts the meta description in the first H2 on every page.
   It is a sentence, not a headline, so it is set at subtitle size. Shipping it
   at real H2 size prints a wall of 45px text under every headline. */
.hero-sub, .page-sub, .seo-description {
  font-family: var(--body);
  font-size: clamp(1rem, 1.7vw, 1.16rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--text-mid);
  max-width: 60ch;
  margin: 0 0 26px;
  text-wrap: pretty;
}

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); }
.shell.narrow { max-width: 760px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--pink); color: #fff; padding: 12px 18px; font-weight: 700;
}
.skip-link:focus { left: 8px; top: 8px; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 3px; }

.kicker {
  display: inline-block;
  font-size: .70rem; font-weight: 700; letter-spacing: .20em; text-transform: uppercase;
  color: var(--pink-hot);
  margin-bottom: 12px;
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: 999px;
  font-size: .90rem; font-weight: 700; letter-spacing: .02em;
  text-decoration: none; border: 1.5px solid transparent;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap; cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn-fill { background: var(--pink); color: #fff; border-color: var(--pink); }
.btn-fill:hover { background: var(--pink-hot); border-color: var(--pink-hot); color: #fff; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--pink); color: var(--pink-hot); }
.btn-block { display: flex; width: 100%; margin-bottom: 10px; }

/* --------------------------------------------------------------- header */

.topbar {
  background: linear-gradient(90deg, var(--pink-deep), var(--pink) 45%, var(--blue) 145%);
  color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .04em;
}
.topbar-in { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.topbar-sep { width: 1px; height: 13px; background: rgba(255,255,255,.45); }
.topbar-hours { color: rgba(255,255,255,.92); }
.topbar-call { margin-left: auto; color: #fff; text-decoration: none; font-weight: 700; }
.topbar-call:hover { color: #fff; text-decoration: underline; }
@media (max-width: 620px) { .topbar-hours, .topbar-sep { display: none; } }

/* No backdrop-filter and no stacking context games on the header: those are what
   silently break the mobile menu on these builds. Solid background, plain z-index. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}
.nav-shell { display: flex; align-items: center; gap: 16px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand-mark { width: auto; height: 46px; }

.site-menu { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.site-menu a {
  color: var(--text-mid); text-decoration: none; font-size: .90rem; font-weight: 600;
  padding: 9px 13px; border-radius: 999px; transition: color .18s ease, background .18s ease;
}
.site-menu a:hover { color: var(--text); background: var(--ink-3); }
.site-menu a[aria-current="page"] { color: var(--pink-hot); }
.nav-cta { margin-left: 8px; color: #fff !important; }
.nav-cta:hover { color: #fff !important; background: var(--pink-hot) !important; }

.menu-toggle {
  display: none; margin-left: auto; width: 46px; height: 42px;
  background: transparent; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 0; cursor: pointer; position: relative;
}
.menu-toggle span:not(.sr-only) {
  display: block; width: 20px; height: 2px; background: var(--text);
  margin: 4px auto; border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
  .menu-toggle { display: block; }
  /* display:flex would beat [hidden], so the closed state is driven by the same
     display property the open state sets. */
  .site-menu {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--ink-2); border-bottom: 1px solid var(--line);
    padding: 12px var(--gut) 20px;
  }
  .site-menu.open { display: flex; }
  .site-menu a { padding: 13px 10px; font-size: 1rem; }
  .nav-cta { margin: 8px 0 0; }
}

/* --------------------------------------------------------------- hero */

.hero { position: relative; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hero-video { object-position: center; background: #0b0b0f; }
/* A flat scrim across the whole frame kills the photo. This one is vertical and
   weighted to the bottom, where the text sits. */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,15,.82) 0%, rgba(11,11,15,.30) 30%, rgba(11,11,15,.72) 70%, rgba(11,11,15,.96) 100%),
    linear-gradient(90deg, rgba(11,11,15,.80) 0%, rgba(11,11,15,.15) 62%, rgba(11,11,15,0) 100%);
}
/* On a phone the hero is tall and narrow, so the copy runs down through the light
   middle band of the gradient and lands on the brightest part of the car. The
   horizontal pass does nothing at this width either. Heavier, flatter scrim. */
@media (max-width: 720px) {
  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(11,11,15,.80) 0%, rgba(11,11,15,.58) 24%, rgba(11,11,15,.70) 52%, rgba(11,11,15,.94) 100%);
  }
}
.hero-in { padding: clamp(84px, 16vh, 168px) var(--gut) clamp(52px, 9vh, 92px); }
.home .hero-in { min-height: 76vh; display: flex; flex-direction: column; justify-content: flex-end; }
.hero h1 { max-width: 16ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-stats {
  list-style: none; margin: 40px 0 0; padding: 22px 0 0;
  border-top: 1px solid rgba(242,241,242,.16);
  display: flex; flex-wrap: wrap; gap: 14px 46px;
}
.hero-stats li { display: flex; flex-direction: column; }
.hero-stats b {
  font-family: var(--display); font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 900;
  letter-spacing: -.02em; line-height: 1;
  background: linear-gradient(180deg, var(--chrome-1), var(--chrome-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-stats span { font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin-top: 5px; }

/* --------------------------------------------------------------- page head */

.page-head {
  padding: clamp(40px, 7vw, 76px) 0 clamp(26px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(900px 340px at 8% -20%, rgba(228,72,149,.16), transparent 70%),
    radial-gradient(700px 300px at 92% -10%, rgba(154,211,243,.09), transparent 70%);
}
.crumbs { font-size: .80rem; color: var(--text-dim); margin-bottom: 18px; }
.crumbs a { color: var(--text-dim); text-decoration: none; }
.crumbs a:hover { color: var(--pink-hot); }
.crumb-sep { margin: 0 8px; opacity: .5; }

/* --------------------------------------------------------------- sections */

.sec { padding: clamp(52px, 8vw, 100px) 0; border-bottom: 1px solid var(--line); }
.sec:last-of-type { border-bottom: 0; }

.sec-head { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 38px; }
.sec-num {
  font-size: .82rem; font-weight: 800; letter-spacing: .1em; color: var(--pink);
  padding-top: 6px; flex: 0 0 auto;
}
.sec-head .kicker { margin-bottom: 8px; }
.lede { color: var(--text-mid); max-width: 62ch; font-size: 1.05rem; margin: 10px 0 0; }
.big-lede { font-size: clamp(1.14rem, 2.1vw, 1.36rem); line-height: 1.5; color: var(--text); margin-bottom: 18px; }
.sec-more { margin-top: 34px; }
.small { font-size: .88rem; color: var(--text-dim); }

/* --------------------------------------------------------------- service cards */

.svc-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.svc-grid-wide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* There are five services, and a plain auto-fit grid puts four across with the
   fifth stranded on its own row. On a six column track three cards of span 2 fill
   the first row and two cards of span 3 fill the second, so the odd count reads as
   a decision. Scoped to exactly five children: the service pages show four. */
@media (min-width: 1060px) {
  .svc-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) { grid-template-columns: repeat(6, 1fr); }
  .svc-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) > .svc-card { grid-column: span 2; }
  .svc-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) > .svc-card:nth-child(n+4) { grid-column: span 3; }
}

.svc-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; transition: border-color .2s ease, transform .2s ease;
}
.svc-card:hover { border-color: var(--pink); transform: translateY(-3px); color: inherit; }
.svc-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-3); }
.svc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.svc-card:hover .svc-media img { transform: scale(1.04); }
.svc-body { display: block; padding: 20px 20px 22px; position: relative; }
.svc-num {
  position: absolute; top: 18px; right: 20px;
  font-size: .78rem; font-weight: 800; letter-spacing: .08em; color: var(--text-dim);
}
.svc-tag { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pink-hot); margin-bottom: 10px; }
.svc-copy { display: block; color: var(--text-mid); font-size: .95rem; line-height: 1.55; }
.svc-go { display: block; margin-top: 14px; font-size: .85rem; font-weight: 700; color: var(--text); }
.svc-card:hover .svc-go { color: var(--pink-hot); }

/* --------------------------------------------------------------- why grid */

.why-grid { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .why-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; } }
.why-list { display: grid; gap: 22px; margin-top: 30px; }
.why-list > div { padding-left: 18px; border-left: 2px solid var(--pink); }
.why-list p { color: var(--text-mid); font-size: .97rem; margin: 0; }
.why-photo { margin: 0; }
.why-photo img { border-radius: var(--r); width: 100%; }
.why-photo figcaption, .strip figcaption, .gal-item figcaption {
  font-size: .82rem; color: var(--text-dim); margin-top: 10px;
}

/* --------------------------------------------------------------- strip + gallery */

.strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 62vw; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 12px; margin: 0 calc(var(--gut) * -1); padding-left: var(--gut); padding-right: var(--gut);
  scrollbar-width: thin;
}
@media (min-width: 720px) { .strip { grid-auto-columns: 30%; } }
@media (min-width: 1100px) { .strip { grid-auto-columns: 22%; } }
.strip-item { margin: 0; scroll-snap-align: start; }
.strip-item img { border-radius: 10px; aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }

.gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.gal-item { margin: 0; }
.gal-item img { border-radius: var(--r); width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.gal-note { margin-top: 30px; color: var(--text-dim); font-size: .92rem; }

/* --------------------------------------------------------------- reviews */

.reviews { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.review {
  margin: 0; padding: 26px 24px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r);
  display: flex; flex-direction: column;
}
.stars { color: var(--pink); font-size: 1rem; letter-spacing: .14em; margin-bottom: 14px; }
.review blockquote { margin: 0; flex: 1; }
.review blockquote p { color: var(--text); font-size: .98rem; line-height: 1.6; }
.review figcaption {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  font-weight: 700; font-size: .92rem;
}
.review figcaption span { display: block; font-weight: 500; font-size: .80rem; color: var(--text-dim); margin-top: 3px; }

/* --------------------------------------------------------------- benefits, steps */

.benefit-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.benefit { padding: 22px 20px; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); }
.benefit p { color: var(--text-mid); font-size: .95rem; margin: 0; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: step; }
.steps li { display: flex; gap: 20px; padding: 20px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.step-num { font-size: .84rem; font-weight: 800; color: var(--pink); flex: 0 0 34px; padding-top: 3px; }
.steps p { color: var(--text-mid); font-size: .96rem; margin: 0; }

.extra-grid, .pair-grid, .about-grid, .contact-grid {
  display: grid; gap: 34px; grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 900px) {
  .extra-grid, .pair-grid { grid-template-columns: 1.05fr .95fr; gap: 52px; }
  .about-grid { grid-template-columns: 1.2fr .8fr; gap: 52px; }
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
}
.extra-photo, .pair-photo { margin: 0; }
.extra-photo img, .pair-photo img { border-radius: var(--r); width: 100%; }

/* --------------------------------------------------------------- areas */

.area-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.area-chips li {
  padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px;
  font-size: .88rem; font-weight: 600; color: var(--text-mid); background: var(--ink-2);
}
.area-chips a { color: inherit; text-decoration: none; }
.area-chips li:hover { border-color: var(--pink); }
.area-chips li:hover a { color: var(--pink-hot); }

.area-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.area {
  display: block; padding: 22px 20px; background: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--r);
  text-decoration: none; color: inherit;
  transition: border-color .2s ease, transform .2s ease;
}
a.area:hover { border-color: var(--pink); transform: translateY(-3px); color: inherit; }
.area h3 { color: var(--text); }
.area p { color: var(--text-mid); font-size: .94rem; margin: 0; }
.area-go {
  display: block; margin-top: 14px; font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim);
}
a.area:hover .area-go { color: var(--pink-hot); }

/* Link clouds on the area and service-by-city pages. */
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.chip {
  padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px;
  font-size: .87rem; font-weight: 600; color: var(--text-mid); background: var(--ink-2);
  text-decoration: none; transition: border-color .2s ease, color .2s ease;
}
.chip:hover { border-color: var(--pink); color: var(--pink-hot); }

/* Per-city area page: copy left, photo and facts right. */
.area-page, .matrix-grid { display: grid; gap: 34px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 920px) {
  .area-page { grid-template-columns: 1.25fr .75fr; gap: 52px; }
  .matrix-grid { grid-template-columns: 1.3fr .7fr; gap: 48px; }
}
.area-side figure, .area-side { margin: 0; }
.area-side figure img { border-radius: var(--r); width: 100%; margin-bottom: 4px; }
.area-side .btn { margin-top: 18px; }
.area-copy h2 { margin-top: 30px; }
.matrix-copy h2 { margin-bottom: 16px; }
.matrix-copy p { color: var(--text-mid); }
.matrix-copy .big-lede { color: var(--text); }
.matrix-copy strong { color: var(--text); font-weight: 700; }

/* The "included" ticket beside the service-by-city copy. */
.ticket {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; position: sticky; top: 96px;
}
@media (max-width: 919px) { .ticket { position: static; } }
.ticket-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 16px 20px; background: linear-gradient(90deg, var(--pink-deep), var(--pink));
  color: #fff;
}
.ticket-head span { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .92; }
.ticket-head b { font-family: var(--display); font-size: .98rem; font-weight: 800; text-align: right; }
.ticket-body { padding: 20px; }
.ticket-body h3 { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; }
.ticket-body ul { list-style: none; margin: 0 0 16px; padding: 0; }
.ticket-body li {
  position: relative; padding: 7px 0 7px 20px; font-size: .91rem; color: var(--text-mid);
  border-bottom: 1px solid var(--line);
}
.ticket-body li::before { content: ''; position: absolute; left: 0; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); }
.ticket-note { font-size: .82rem; color: var(--text-dim); margin-bottom: 16px; }

/* --------------------------------------------------------------- faqs */

.faqs { display: grid; gap: 2px; }
.faqs details { border-top: 1px solid var(--line); }
.faqs details:last-child { border-bottom: 1px solid var(--line); }
.faqs summary {
  cursor: pointer; padding: 20px 40px 20px 0; position: relative;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.012em;
  list-style: none;
}
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after {
  content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--pink); line-height: 1;
}
.faqs details[open] summary::after { content: '\2212'; }
.faqs summary:hover { color: var(--pink-hot); }
.faqs p { padding: 0 40px 22px 0; color: var(--text-mid); margin: 0; max-width: 72ch; }

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

.band {
  background:
    radial-gradient(800px 320px at 12% 10%, rgba(228,72,149,.22), transparent 70%),
    radial-gradient(700px 300px at 88% 90%, rgba(154,211,243,.12), transparent 70%),
    var(--ink-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.band-in {
  padding: clamp(40px, 6vw, 64px) var(--gut);
  display: flex; flex-wrap: wrap; gap: 26px; align-items: center; justify-content: space-between;
}
.band h2 { margin-bottom: 6px; }
.band p { color: var(--text-mid); margin: 0; }
.band-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------- facts, hours, forms */

.facts { margin: 24px 0 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 18px; background: var(--ink-2); }
.facts dt { font-size: .80rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin: 0; }
.facts dd { margin: 0; font-weight: 600; font-size: .95rem; text-align: right; }

.hours { width: 100%; border-collapse: collapse; margin: 12px 0 18px; }
.hours th, .hours td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .94rem; }
.hours th { font-weight: 600; color: var(--text-mid); }
.hours td { text-align: right; font-weight: 600; }

.contact-panel { padding: 28px 24px; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); }
.contact-panel p { color: var(--text-mid); font-size: .96rem; margin-bottom: 20px; }
.form-wrap { min-height: 700px; background: #fff; border-radius: var(--r); overflow: hidden; }
.form-wrap iframe { display: block; width: 100%; min-height: 700px; }

.about-side figure { margin: 0 0 4px; }
.about-side img { border-radius: var(--r); width: 100%; }
.about-copy h2 { margin-top: 30px; }

.legal h2 { font-size: 1.35rem; margin-top: 32px; }
.legal h3 { margin-top: 22px; }
.legal p, .legal li { color: var(--text-mid); }
.legal ul { padding-left: 20px; }

/* --------------------------------------------------------------- footer */

.footer { background: var(--ink-2); border-top: 1px solid var(--line); padding: clamp(46px, 7vw, 76px) 0 28px; }
.footer-grid { display: grid; gap: 34px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 40px; } }
.footer h2 { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; }
.footer h3 { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin: 20px 0 8px; }
.footer a, .footer-area { display: block; color: var(--text-mid); text-decoration: none; font-size: .92rem; padding: 5px 0; }
.footer a:hover { color: var(--pink-hot); }
.footer-mark { margin-bottom: 16px; height: 58px; width: auto; }
.footer-brand p { color: var(--text-mid); font-size: .94rem; max-width: 42ch; }
.footer-note { color: var(--text-dim) !important; font-size: .88rem !important; }
.footer-num { font-family: var(--display); font-size: 1.28rem !important; font-weight: 800; color: var(--text) !important; margin-top: 10px; }
.footer-num:hover { color: var(--pink-hot) !important; }
.footer-mail { font-size: .88rem !important; word-break: break-all; }
.footer-hours span { display: flex; justify-content: space-between; gap: 12px; font-size: .86rem; color: var(--text-dim); padding: 3px 0; }
.footer-hours b { color: var(--text-mid); font-weight: 600; }
.footer-bottom {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: .84rem; color: var(--text-dim);
}
.footer-bottom a { display: inline-block; margin-left: 18px; font-size: .84rem; }