/* ---------------------------------------------------------------------------
   styles.css — every inline style from the Claude Design export, moved here
   and re-expressed against the tokens in looks.css.

   Section order matches the page: base, hero, services, gallery, about,
   hours + location, booking CTA, footer, fixed action bar.
--------------------------------------------------------------------------- */

/* --- Base -------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  /* clears the fixed action bar */
  padding-bottom: 96px;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Accent can be too dark to see against a dark panel; use the lightened one. */
.hero :focus-visible,
.featured__card :focus-visible,
.footer :focus-visible,
.hours__row.is-today :focus-visible { outline-color: var(--accent-bright); }

.cta :focus-visible { outline-color: var(--on-accent); }

/* Anchor targets have to clear the demo banner and the sticky header. */
main [id],
main section[id] {
  scroll-margin-top: calc(var(--banner-h) + var(--header-h) + 16px);
}

/* Very light grain on the page ground, under everything. Sections with their
   own background paint over it, which is intended. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 140px 140px;
  opacity: .035;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 200;
  padding: 13px 20px;
  border-radius: var(--radius);
  background: var(--dark);
  color: var(--on-dark);
  font-size: 15px;
  font-weight: 600;
  transition: top .14s ease;
}

.skip-link:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 64px);
}

.eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 30px;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-align: center;
  cursor: pointer;
}

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
}

.btn--primary:hover {
  background: var(--dark);
  color: var(--on-dark);
}

.btn--ghost-light {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .45);
}

.btn--ghost-light:hover {
  background: #fff;
  color: var(--dark);
  border-color: #fff;
}

.btn--ghost-dark {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
}

.btn--ghost-dark:hover {
  background: var(--dark);
  color: var(--on-dark);
  border-color: var(--dark);
}

/* --- Demo banner ------------------------------------------------------- */
/* Deliberately outside the look system: this is Clear Path's chrome, not the
   shop's, so it should read as something sitting on top of the site rather
   than part of it. Renders only when content.json has "demo": true. */

.demobar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 120;
  height: var(--banner-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 16px;
  /* A blue-grey slate rather than the look's own near-black, so the bar still
     separates from the page in the Classic look, which is dark itself. */
  background: #232935;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.demobar__text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demobar__link {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.demobar__link:hover { text-decoration-thickness: 2px; }
.demobar :focus-visible { outline-color: #FFFFFF; }

/* The client-preview wording is longer than the demo wording, and the bar is a
   single nowrap line in a fixed 32px. Tighten the tracking and drop the two
   words the credit can spare, rather than letting the ellipsis eat "Clear Path
   Sites" — a credit that truncates is not a credit. */
@media (max-width: 480px) {
  .demobar__text {
    font-size: 10px;
    letter-spacing: .04em;
  }

  .demobar__by { display: none; }
}

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

.siteheader {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--banner-h);
  z-index: 110;
  height: var(--header-h);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

/* Translucent only where it can actually be blurred; otherwise the header
   would just be a washed-out band over the hero photo. */
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .siteheader {
    background: var(--bg-blur);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}

.siteheader__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(16px, 5vw, 64px);
}

.siteheader__name {
  margin-right: auto;
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: var(--display-weight);
  letter-spacing: -.025em;
  color: var(--ink);
  white-space: nowrap;
}

.siteheader__name:hover { color: var(--accent); }

/* The bottom action bar already carries Book and Call on phones, so the nav
   is desktop-only rather than hidden behind a menu button. */
.siteheader__nav { display: none; }

@media (min-width: 860px) {
  .siteheader__nav {
    display: flex;
    gap: clamp(16px, 2.4vw, 32px);
    margin-right: 10px;
  }
}

.siteheader__link {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink-soft);
}

.siteheader__link:hover { color: var(--accent); }

.siteheader__book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 20px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.siteheader__book:hover {
  background: var(--dark);
  color: var(--on-dark);
}

/* --- Hero: shared ------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  background: var(--dark);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(var(--hero-scrim), .55) 0%,
    rgba(var(--hero-scrim), .15) 38%,
    rgba(var(--hero-scrim), .82) 100%);
}

.hero__inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  /* the export's clamp(120px,10vw,88px) resolves to 120px at every width */
  padding: 0 clamp(20px, 5vw, 64px) 120px;
  /* keeps the copy clear of the fixed chrome if the viewport gets very short */
  padding-top: calc(var(--banner-h) + var(--header-h) + 16px);
}

/* On a landscape phone the hero copy cannot fit between the fixed header and
   the fixed action bar — 88px and 68px of a ~400px viewport. The page scrolls,
   which is fine; tighten the padding so as little as possible starts covered. */
@media (max-height: 640px) {
  .hero__inner {
    padding-top: calc(var(--banner-h) + var(--header-h) + 8px);
    padding-bottom: 84px;
  }
}

/* Grain over the hero photograph. Sits inside the scrim, which is below
   .hero__inner, so it never lands on top of the text. */
.hero__scrim::after,
.hero--split .hero__media::after,
.hero--plain::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 140px 140px;
  opacity: .1;
  mix-blend-mode: overlay;
}

.hero__eyebrow {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
}

.hero__title {
  margin: 0 0 20px;
  max-width: 12ch;
  font-family: var(--font-display);
  font-size: clamp(52px, 13vw, 132px);
  line-height: .88;
  letter-spacing: -.035em;
  font-weight: var(--display-weight);
  color: #fff;
  text-wrap: balance;
}

.hero__tagline {
  margin: 0 0 32px;
  max-width: 22ch;
  font-size: clamp(19px, 2.6vw, 28px);
  line-height: 1.3;
  color: rgba(255, 255, 255, .9);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.hero__note {
  margin: 20px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
}

/* script.js fills this in the shop's timezone; until then it is empty and the
   separator before "Walk-ins welcome" must not show. */
.hero__today:empty + .hero__note-sep { display: none; }
.hero__note:has(> .hero__today:empty:only-child) { display: none; }

/* --- Hero: split ------------------------------------------------------- */

.hero--split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  align-items: stretch;
  min-height: 92vh;
  background: var(--dark);
}

.hero--split .hero__media {
  position: relative;
  inset: auto;
  z-index: auto;
  min-height: 48vh;
}

.hero--split .hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none;
  padding: clamp(36px, 6vw, 80px);
}

.hero--split .hero__eyebrow { color: var(--on-dark-muted); }
.hero--split .hero__title {
  max-width: none;
  font-size: clamp(48px, 7vw, 96px);
  color: var(--on-dark);
}
.hero--split .hero__tagline {
  max-width: 24ch;
  font-size: clamp(19px, 2.2vw, 26px);
  color: var(--on-dark-soft);
}
.hero--split .hero__note {
  margin-top: 22px;
  color: var(--on-dark-soft);
}

/* Split hero sits above the fold on phones too, so give the panel breathing
   room when the two columns stack. */
@media (max-width: 700px) {
  .hero--split { min-height: 0; }
  .hero--split .hero__media { min-height: 56vh; }
}

/* --- Hero: no image at all --------------------------------------------- */

.hero--plain {
  background: var(--surface);
  min-height: 72vh;
}

.hero--plain .hero__inner { position: relative; z-index: 1; }

.hero--plain .hero__title { color: var(--on-surface); }
.hero--plain .hero__eyebrow { color: var(--on-surface-muted); }
.hero--plain .hero__tagline,
.hero--plain .hero__note { color: var(--on-surface-soft); }

/* --- Services ---------------------------------------------------------- */

.services { padding-block: clamp(56px, 9vw, 120px) clamp(40px, 6vw, 72px); }

.section-title {
  margin: 0 0 40px;
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 64px);
  line-height: .94;
  letter-spacing: -.03em;
  font-weight: var(--display-weight);
  text-wrap: balance;
}

.featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px;
  margin: 0 0 56px;
  padding: 0;
  list-style: none;
}

.featured__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px 24px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--on-surface);
}

.featured__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.featured__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -.02em;
  font-weight: var(--display-weight);
}

.featured__price {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--accent-on-surface);
}

.featured__dur {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

.featured__desc {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--on-surface-soft);
  text-wrap: pretty;
}

.groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 5vw, 72px);
}

.group__title {
  margin: 0 0 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.group__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.service {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}

.service__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.service__name {
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 600;
  letter-spacing: -.015em;
}

.service__dur {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
}

.service__price {
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
}

/* --- Gallery ----------------------------------------------------------- */

.gallery { padding-block: clamp(40px, 6vw, 72px); }

.gallery__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.gallery__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1;
  letter-spacing: -.03em;
  font-weight: var(--display-weight);
}

.gallery__link {
  padding-bottom: 2px;
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--ink-muted);
}

.gallery__link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Fixed column count rather than auto-fill, because the tiles are not all the
   same shape: build.js writes --span and --ratio per tile from the crop the
   optimizer made. A span-2 tile is half the row on desktop and the full row
   on smaller screens.
   The 3:2 and 3:4 ratios are picked so tiles sharing a row come out within a
   few pixels of each other; grid stretch absorbs the remainder. */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .gallery__grid { grid-template-columns: repeat(4, 1fr); }
}

.gallery__item {
  position: relative;
  grid-column: span var(--span, 1);
  /* aspect-ratio sets each tile's natural size, which is what gives the row
     its height; width + min-height then pull every tile in that row flush,
     so the rows differ from each other but never look broken inside. */
  aspect-ratio: var(--ratio, 3 / 4);
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--placeholder);
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Barbers ----------------------------------------------------------- */

.barbers { padding-block: clamp(24px, 4vw, 40px) clamp(48px, 7vw, 96px); }

.barbers__title { margin-bottom: clamp(24px, 4vw, 36px); }

/* Phones get a snapping side-scroller: four portrait cards stacked would be
   most of a screen height each. */
.barbers__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 66%;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* bleed to the viewport edges so the row reads as scrollable */
  margin-inline: calc(clamp(20px, 5vw, 64px) * -1);
  padding-inline: clamp(20px, 5vw, 64px);
  scroll-padding-inline: clamp(20px, 5vw, 64px);
}

.barbers__grid::-webkit-scrollbar { display: none; }

.barber { scroll-snap-align: start; }

@media (min-width: 560px) {
  .barbers__grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(14px, 2vw, 22px);
    overflow-x: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding-inline: 0;
  }
}

@media (min-width: 900px) {
  .barbers__grid { grid-template-columns: repeat(4, 1fr); }
}

.barber__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: 14px;
  border-radius: var(--radius);
  background: var(--placeholder);
}

.barber__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.barber__name {
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 23px);
  font-weight: var(--display-weight);
  letter-spacing: -.02em;
}

.barber__specialty {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.barber__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 14px 0 0;
}

.barber__ig {
  padding-bottom: 2px;
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-muted);
}

.barber__ig:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.barber__book {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 15px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}

.barber__book:hover {
  background: var(--dark);
  color: var(--on-dark);
  border-color: var(--dark);
}

/* --- About ------------------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding-block: clamp(56px, 9vw, 110px);
}

.about__media {
  position: relative;
  aspect-ratio: 4 / 5;
  min-height: 280px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--placeholder);
}

.about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__lead {
  margin: 0 0 24px;
  font-size: clamp(21px, 2.6vw, 30px);
  line-height: 1.35;
  letter-spacing: -.02em;
  text-wrap: pretty;
}

.about__body {
  margin: 0;
  max-width: 42ch;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* --- Hours and location ------------------------------------------------ */

.info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(28px, 5vw, 64px);
  padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 100px);
}

.info__title {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1;
  letter-spacing: -.03em;
  font-weight: var(--display-weight);
}

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

.hours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin: 0 -14px;
  padding: 14px;
  border-bottom: 1px solid var(--rule);
  border-radius: var(--radius);
}

.hours__day {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.hours__time {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
}

.hours__row.is-today {
  background: var(--dark);
  color: var(--on-dark);
  border-bottom-color: transparent;
}

.hours__row.is-today .hours__day,
.hours__row.is-today .hours__time { font-weight: 800; }

/* Filled by script.js; collapses entirely when JavaScript does not run. */
.hours__meta:empty { display: none; }

.hours__meta {
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.hours__note {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.map {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: var(--radius);
  background: var(--placeholder);
}

.map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.place__address {
  margin: 0 0 18px;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.3;
  letter-spacing: -.02em;
  font-weight: 600;
  font-style: normal;
}

.place__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* --- Booking CTA ------------------------------------------------------- */

.cta {
  padding: clamp(64px, 11vw, 140px) clamp(20px, 5vw, 64px);
  background: var(--accent);
  color: var(--on-accent);
  text-align: center;
}

.cta__title {
  margin: 0 auto 32px;
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(40px, 9vw, 104px);
  line-height: .9;
  letter-spacing: -.04em;
  font-weight: var(--display-weight);
  text-wrap: balance;
}

.cta__btn {
  min-height: 62px;
  padding: 0 40px;
  background: var(--on-accent);
  color: var(--on-accent-contrast);
  font-size: 20px;
}

.cta__btn:hover {
  background: var(--on-accent-contrast);
  color: var(--on-accent);
}

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

.footer {
  padding: clamp(48px, 7vw, 80px) clamp(20px, 5vw, 64px) 120px;
  background: var(--dark);
  color: var(--on-dark-soft);
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 36px;
  max-width: var(--maxw);
  margin: 0 auto;
}

/* Only the unclassed paragraph, the address. `.footer p` is (0,1,1) and every
   classed paragraph below is (0,1,0), so an unscoped rule here wins on
   specificity regardless of source order and silently flattens the footer's
   whole type scale — the shop name to 16px, the label and credit to 16px, and
   every declared margin to 0. Scope it, and give any classed paragraph without
   its own margin one explicitly. */
.footer p:not([class]) { margin: 0; font-size: 16px; line-height: 1.5; }

.footer__name {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--display-weight);
  letter-spacing: -.025em;
  color: var(--on-dark);
}

.footer__label {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

.footer__hours { margin: 0; line-height: 1.6; }

.footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.footer__links a { font-size: 16px; }
.footer__links a:hover { color: var(--accent-bright); }
.footer__book { color: var(--accent-bright); }

/* Clear Path's own mark, hardcoded in template.html. The whole phrase is the
   link, and it is styled as one: muted is fine, invisible is not. */
.footer__credit {
  max-width: var(--maxw);
  margin: 48px auto 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--on-dark-muted);
}

.footer__credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.footer__credit a:hover { color: var(--on-dark); }

/* --- Fixed action bar -------------------------------------------------- */

.actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  justify-content: center;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  pointer-events: none;
}

.actionbar__inner {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 520px;
  pointer-events: auto;
}

.actionbar__book,
.actionbar__call {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border-radius: var(--radius);
  font-weight: 700;
}

.actionbar__book {
  flex: 1;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}

.actionbar__book:hover {
  background: var(--dark);
  color: var(--on-dark);
}

.actionbar__call {
  padding: 0 22px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--rule);
  font-size: 17px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

.actionbar__call:hover {
  background: var(--dark);
  color: var(--on-dark);
  border-color: var(--dark);
}

/* --- Print -------------------------------------------------------------- */

@media print {
  .demobar,
  .siteheader,
  .actionbar,
  .skip-link { display: none !important; }

  body::before { display: none; }

  body {
    padding-bottom: 0;
    background: #fff;
    color: #000;
  }

  .hero { min-height: 0; }
}

/* --- Motion preferences ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}