/* ==========================================================================
   MaziClean — Site components
   ========================================================================== */

/* --------------------------------------------------------------------------
   Masthead — one bar, one hairline, nothing else
   -------------------------------------------------------------------------- */

.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  background: rgba(11, 11, 13, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.masthead__bar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 66px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--bone);
}

.brand__mark { width: 32px; height: 32px; flex: none; display: block; }
.brand__name { white-space: nowrap; letter-spacing: -0.04em; }
.brand em { font-style: normal; color: var(--red-hot); }

.nav { display: none; }

@media (min-width: 980px) {
  .nav { display: flex; align-items: center; }
  .nav ul { display: flex; gap: 0.1rem; align-items: center; }
}

.nav__link {
  position: relative;
  padding: 0.5rem 0.8rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
  transition: color var(--t-fast);
}

.nav__link:hover { color: var(--bone); }
.nav__link[aria-current='page'] { color: var(--bone); }

.nav__link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0.8rem; right: 0.8rem; bottom: 0.15rem;
  height: 2px;
  background: var(--red);
}

.masthead__cta { display: none; }
@media (min-width: 980px) { .masthead__cta { display: inline-flex; } }

.burger {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 3px 10px 3px 10px;
  border: 1px solid var(--line-2);
  transition: border-color var(--t-fast);
}
.burger:hover { border-color: var(--chrome); }
@media (min-width: 980px) { .burger { display: none; } }

.burger span {
  display: block;
  width: 17px; height: 2px;
  background: var(--bone);
  transition: transform var(--t-mid), opacity var(--t-fast);
}
.burger span + span { margin-top: 4px; }

.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 66px 0 0 0;
  z-index: 89;
  background: var(--ink);
  padding: 1.25rem var(--gutter) 2.5rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-mid), transform var(--t-mid), visibility var(--t-mid);
}

.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 980px) { .drawer { display: none; } }

.drawer a {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.drawer a span {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  color: var(--red-text);
}

.drawer .btn { margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   Hero — compact, photo on the right, copy on solid ink
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: calc(66px + clamp(2rem, 5vw, 3.75rem));
  padding-bottom: clamp(2.25rem, 5vw, 3.5rem);
  overflow: hidden;
}

.hero > .shell { position: relative; z-index: 1; }

/* Desktop: the graded studio shot is the hero image; the copy sits on the
   ink it dissolves into and the right column stays empty so the car breathes. */
@media (min-width: 1000px) {
  .hero { min-height: clamp(540px, 62vh, 700px); display: flex; align-items: center; }
  .hero > .shell { width: min(100% - (var(--gutter) * 2), var(--shell)); }
  .hero__photo { display: none; }
}

/* Under 1000px the same photo becomes a band under the copy instead of a
   backdrop fighting the text. */
@media (max-width: 999px) {
  .hero.bg-photo { background-image: none !important; }
  /* The car bleeds to the screen edges between the headline and the
     call to action. The crop already dissolves into ink on every side, so
     there is no frame and no border. */
  .hero__photo {
    margin: 1rem calc(-1 * var(--gutter)) 1.1rem;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }
  .hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; }

  /* Nudge, then one dominant action */
  .hero__live { margin-top: 0; }
  .hero__actions { margin-top: 0.9rem; }
  .hero__actions .btn--primary { flex: 1 1 auto; min-height: 50px; }
  .hero__actions .btn--ghost { min-height: 50px; }

  /* Trust row: tighter cells so labels do not wrap mid-phrase */
  .trust div { padding: 0.85rem 0.7rem; font-size: 0.8rem; gap: 0.55rem; }
  .trust small { font-size: 0.7rem; }
  .trust svg { width: 17px; height: 17px; }
}

/* Narrow phones: icon above the label so all four cells share one height */
@media (max-width: 599px) {
  .trust div { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.95rem 0.9rem; }
  .trust small { margin-top: 0.1rem; }
}

.hero__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}

@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: 3.5rem; }
}

.hero__copy > * + * { margin-top: 1.15rem; }
.hero h1 { max-width: 13ch; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.hero__live {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.9rem 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(63, 207, 124, 0.3);
  font-size: 0.8rem;
  color: var(--good);
  font-weight: 500;
}

.hero__live[data-state='closed'] { border-color: rgba(232, 163, 60, 0.35); color: var(--warn); }
.hero__live[data-state='loading'] { color: var(--muted); border-color: var(--line-2); }
.hero__live[data-state='loading'] .dot { animation: none; opacity: 0.5; }

.hero__pane-wrap { position: relative; }

/* --------------------------------------------------------------------------
   Before / after slider
   -------------------------------------------------------------------------- */

.reveal-pane {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-chrome);
  box-shadow: var(--lift);
  aspect-ratio: 4 / 3;
  touch-action: pan-y;
  cursor: ew-resize;
  background: var(--surface);
  user-select: none;
  -webkit-user-select: none;
}

.reveal-pane img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.reveal-pane__after { clip-path: inset(0 0 0 var(--split, 50%)); }

.reveal-pane__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--split, 50%);
  width: 2px;
  margin-left: -1px;
  background: var(--chrome-hi);
  pointer-events: none;
}

.reveal-pane__handle:focus-visible { outline: none; }
.reveal-pane__handle:focus-visible::after { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px #fff; }

.reveal-pane__handle::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 42px; height: 42px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--chrome-hi);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.8);
}

.reveal-pane__grip {
  position: absolute;
  top: 50%; left: var(--split, 50%);
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  color: #fff;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
}

.reveal-pane__grip svg { width: 18px; height: 18px; }

.reveal-pane figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  padding: 0.9rem 1rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
  background: linear-gradient(to top, rgba(11, 11, 13, 0.85), transparent);
}

.reveal-pane figcaption b { font-weight: 500; color: var(--muted); }
.reveal-pane figcaption b:last-child { color: var(--red-text); }

.hero__badge {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  z-index: 4;
  padding: 0.55rem 0.8rem;
  border-radius: 3px 10px 3px 10px;
  background: rgba(11, 11, 13, 0.82);
  border: 1px solid var(--line-chrome);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chrome);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Trust row — four facts, no motion
   -------------------------------------------------------------------------- */

.trust {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
  grid-template-columns: repeat(2, 1fr);
}

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

.trust div {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  background: var(--ink);
  font-size: 0.86rem;
  font-weight: 500;
}

.trust svg { width: 20px; height: 20px; flex: none; color: var(--red-hot); }
.trust small { display: block; font-weight: 400; color: var(--muted-dim); font-size: 0.76rem; }

/* --------------------------------------------------------------------------
   Services index — rows plus a sticky image stage
   -------------------------------------------------------------------------- */

.index-list { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

@media (min-width: 1000px) {
  .index-list { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; }
}

.index-list__rows { border-top: 1px solid var(--line); }

.index-row {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: clamp(1rem, 2vw, 1.4rem) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left var(--t-mid);
}

@media (min-width: 1000px) {
  .index-row:hover, .index-row.is-active { padding-left: 1rem; }
}

.index-row::before {
  content: '';
  position: absolute;
  left: 0; top: 14%; bottom: 14%;
  width: 3px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t-mid);
}

.index-row:hover::before, .index-row.is-active::before { transform: scaleY(1); }

.index-row__top { display: flex; align-items: baseline; gap: 0.85rem; flex-wrap: wrap; }

.index-row__no {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--muted-dim);
  flex: none;
}

.index-row:hover .index-row__no, .index-row.is-active .index-row__no { color: var(--red-text); }

.index-row__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-right: auto;
}

.index-row__price { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.index-row__price b { color: var(--bone); font-weight: 600; }

.index-row__desc { margin-top: 0.4rem; color: var(--muted); font-size: 0.9rem; max-width: 52ch; }

.index-row__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; }

.tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3em 0.6em;
  border-radius: 3px;
  border: 1px solid var(--line);
  color: var(--muted);
}

.index-row__thumb {
  margin-top: 0.9rem;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
}
.index-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1000px) { .index-row__thumb { display: none; } }

.index-stage {
  display: none;
  position: sticky;
  top: 5.5rem;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-chrome);
  aspect-ratio: 4 / 4.6;
  box-shadow: var(--lift);
  background: var(--surface);
}

@media (min-width: 1000px) { .index-stage { display: block; } }

.index-stage img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 520ms var(--ease), transform 1000ms var(--ease);
}

.index-stage img.is-live { opacity: 1; transform: scale(1); }

.index-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 11, 13, 0.75) 0%, transparent 40%);
  pointer-events: none;
}

.index-stage__label {
  position: absolute;
  left: 1.25rem; bottom: 1.15rem;
  z-index: 2;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chrome);
}

/* --------------------------------------------------------------------------
   Method — numbered steps
   -------------------------------------------------------------------------- */

.method {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

@media (min-width: 700px)  { .method { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .method { grid-template-columns: repeat(4, 1fr); } }

.method__step {
  background: var(--ink);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  transition: background-color var(--t-mid);
}

.method__step:hover { background: var(--surface); }

.method__no {
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--red);
}

.method__step h3 { margin-top: 0.9rem; font-size: 1.05rem; letter-spacing: -0.02em; }
.method__step p  { margin-top: 0.4rem; color: var(--muted); font-size: 0.88rem; }

/* --------------------------------------------------------------------------
   Pledge band — photo behind, quote in front
   -------------------------------------------------------------------------- */

.pledge {
  border-block: 1px solid var(--line);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.pledge blockquote {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  max-width: 22ch;
}

.pledge__sig { display: flex; align-items: center; gap: 0.85rem; margin-top: 1.5rem; }

.pledge__sig img {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line-chrome);
}

.pledge__sig strong { display: block; font-size: 0.9rem; }
.pledge__sig span   { font-size: 0.78rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.proof { display: grid; gap: 1rem; }

/* Phones: one row you swipe, the next card peeking in from the right.
   Five stacked cards were a screen and a half of reading. */
@media (max-width: 719px) {
  .proof {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    padding: 0.25rem var(--gutter) 0.5rem;
    scrollbar-width: none;
  }
  .proof::-webkit-scrollbar { display: none; }
  .proof__card { flex: 0 0 min(82%, 320px); scroll-snap-align: start; }
}

@media (min-width: 720px)  { .proof { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .proof { grid-template-columns: repeat(3, 1fr); } }

.proof__card {
  padding: clamp(1.15rem, 2vw, 1.5rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0;
  transition: border-color var(--t-mid);
}

.proof__card:hover { border-color: var(--line-chrome); }

@media (min-width: 1040px) {
  .proof__card--lead { grid-column: span 2; border-color: rgba(200, 16, 46, 0.4); }
  .proof__card--lead p { font-size: 1.15rem; }
}

.proof__stars { display: flex; gap: 2px; color: var(--red-hot); }
.proof__stars svg { width: 14px; height: 14px; }

.proof__card blockquote { margin: 0; flex: 1; }
.proof__card p { color: var(--bone); font-size: 0.98rem; line-height: 1.5; }

.proof__who {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.proof__who .avatar {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--red-tint);
  border: 1px solid rgba(200, 16, 46, 0.35);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--red-hot);
}

.proof__who strong { display: block; font-size: 0.86rem; font-weight: 600; }
.proof__who span   { font-size: 0.75rem; color: var(--muted-dim); }

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

.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.gallery .reveal-pane { aspect-ratio: 3 / 2; }

/* --------------------------------------------------------------------------
   Service area
   -------------------------------------------------------------------------- */

.area { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
@media (min-width: 900px) { .area { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }

.area__list { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.area__list li {
  padding: 0.5em 0.9em;
  border-radius: 3px 10px 3px 10px;
  border: 1px solid var(--line-2);
  font-size: 0.85rem;
  transition: border-color var(--t-fast), color var(--t-fast);
}

.area__list li:hover { border-color: var(--red); color: var(--red-hot); }

/* --------------------------------------------------------------------------
   Updates strip — filled from the posts table; hidden when empty
   -------------------------------------------------------------------------- */

.news { border-block: 1px solid var(--line); background: var(--ink-2); }

.news__list { display: grid; }
@media (min-width: 800px) { .news__list { grid-template-columns: repeat(3, 1fr); } }

.news__item { display: grid; gap: 0.2rem; padding: 1rem 1.1rem 1rem 0; font-size: 0.88rem; }
.news__item + .news__item { border-top: 1px solid var(--line); }

@media (min-width: 800px) {
  .news__item + .news__item { border-top: 0; border-left: 1px solid var(--line); padding-left: 1.1rem; }
}

.news__item time { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; color: var(--red-text); text-transform: uppercase; }
.news__item b { font-weight: 600; }
.news__item span { color: var(--muted); font-size: 0.84rem; }

/* --------------------------------------------------------------------------
   CTA band — crimson plate, chrome hairlines
   -------------------------------------------------------------------------- */

.cta-slab {
  position: relative;
  display: grid;
  gap: 1.25rem;
  align-items: center;
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2.5rem);
  border-radius: var(--r-lg);
  background: var(--red);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  color: #fff;
}

@media (min-width: 860px) { .cta-slab { grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; } }

.cta-slab h2 { max-width: 20ch; letter-spacing: -0.035em; }
.cta-slab .lede { color: rgba(255, 255, 255, 0.8); margin-top: 0.5rem; }
.cta-slab .eyebrow { color: rgba(255, 255, 255, 0.92); }
.cta-slab .eyebrow::before { background: rgba(255, 255, 255, 0.92); }
.cta-slab :focus-visible { outline-color: #fff; }

.cta-slab__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.cta-slab .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.cta-slab .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

/* --------------------------------------------------------------------------
   Interior page header
   -------------------------------------------------------------------------- */

.pagehead {
  padding-top: calc(66px + clamp(2rem, 5vw, 3.5rem));
  padding-bottom: clamp(1.75rem, 4vw, 2.75rem);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.pagehead h1 { margin-top: 0.8rem; max-width: 16ch; }
.pagehead .lede { margin-top: 0.9rem; }

.crumbs {
  display: flex;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.crumbs a:hover { color: var(--red-hot); }

/* --------------------------------------------------------------------------
   Spec sheet
   -------------------------------------------------------------------------- */

.spec { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }

.spec__row {
  display: grid;
  gap: 0.5rem 1.25rem;
  padding: clamp(0.95rem, 1.8vw, 1.3rem) clamp(0.95rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--t-fast);
}

.spec__row:last-child { border-bottom: 0; }
.spec__row:hover { background: var(--surface-2); }

@media (min-width: 800px) {
  .spec__row { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto; align-items: baseline; }
}

.spec__row--head {
  background: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dim);
  padding-block: 0.7rem;
}
.spec__row--head:hover { background: var(--ink-2); }

.spec__name { font-family: var(--display); font-size: 1.02rem; font-weight: 600; letter-spacing: -0.02em; }
.spec__desc { color: var(--muted); font-size: 0.88rem; }
.spec__price { font-family: var(--mono); font-size: 0.95rem; font-weight: 500; white-space: nowrap; }
.spec__price small { color: var(--muted-dim); font-size: 0.74rem; }

/* Packages */
.tiers { display: grid; gap: 1rem; }
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, 1fr); } }

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color var(--t-mid);
}

.tier:hover { border-color: var(--line-chrome); }
.tier--featured { border-color: var(--red); }

.tier__flag {
  position: absolute;
  top: -0.65rem; left: clamp(1.25rem, 2.4vw, 1.75rem);
  padding: 0.3em 0.75em;
  border-radius: 3px 8px 3px 8px;
  background: var(--red);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.tier__name { font-family: var(--display); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.03em; }

.tier__price {
  margin-top: 0.7rem;
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}

.tier__price sup { font-size: 0.42em; vertical-align: 0.9em; margin-right: 0.05em; color: var(--muted); }
.tier__price .to { font-size: 0.42em; color: var(--muted); letter-spacing: 0; font-weight: 500; }
.tier__meta { margin-top: 0.4rem; font-size: 0.76rem; color: var(--muted-dim); font-family: var(--mono); }

.tier__list { margin: 1.25rem 0 1.5rem; display: grid; gap: 0.55rem; flex: 1; }
.tier__list li { display: flex; gap: 0.6rem; font-size: 0.88rem; color: var(--muted); line-height: 1.45; }
.tier__list svg { width: 15px; height: 15px; flex: none; margin-top: 0.2rem; color: var(--red-hot); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  text-align: left;
  padding: 1.1rem 0;
  font-family: var(--display);
  font-size: clamp(1rem, 1.7vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  transition: color var(--t-fast);
}

.faq__q:hover { color: var(--red-hot); }

.faq__q i {
  margin-left: auto;
  flex: none;
  width: 24px; height: 24px;
  border-radius: 3px 8px 3px 8px;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  position: relative;
  transition: transform var(--t-mid), border-color var(--t-mid), background-color var(--t-mid);
}

.faq__q i::before, .faq__q i::after { content: ''; position: absolute; background: currentColor; transition: opacity var(--t-fast); }
.faq__q i::before { width: 10px; height: 2px; }
.faq__q i::after  { width: 2px; height: 10px; }

.faq__q[aria-expanded='true'] i { transform: rotate(180deg); border-color: var(--red); background: var(--red-tint); }
.faq__q[aria-expanded='true'] i::after { opacity: 0; }

.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-mid); }
.faq__a > div { overflow: hidden; }
.faq__a.is-open { grid-template-rows: 1fr; }
.faq__a p { color: var(--muted); padding-bottom: 1.15rem; max-width: 66ch; font-size: 0.94rem; }

/* --------------------------------------------------------------------------
   Prose
   -------------------------------------------------------------------------- */

.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { font-family: var(--display); font-size: 1.45rem; margin-top: 2.25rem; letter-spacing: -0.03em; }
.prose h3 { font-family: var(--display); font-size: 1.12rem; margin-top: 1.6rem; letter-spacing: -0.02em; }
.prose p, .prose li { color: var(--muted); }
.prose ul { display: grid; gap: 0.5rem; padding-left: 1.1rem; list-style: disc; }
.prose a { color: var(--red-hot); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--bone); }
.prose img { border-radius: var(--r-lg); border: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   Footer — compact, one baseline
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line);
  background: var(--ink-2);
  padding-top: clamp(2.25rem, 4vw, 3rem);
}

.footer__grid { display: grid; gap: 1.5rem 1.25rem; }

/* Phones: brand on its own line, the two link lists share a row, contact last */
@media (max-width: 699px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > :first-child, .footer__grid > :last-child { grid-column: 1 / -1; }
  .footer__grid > :last-child { padding-top: 1.25rem; border-top: 1px solid var(--line); }
  .footer__contact { grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  .footer__contact > span { grid-column: 1 / -1; }
}

@media (min-width: 700px)  { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

.footer p { color: var(--muted); font-size: 0.9rem; max-width: 30ch; margin-top: 0.75rem; }
.footer__title { max-width: none; }

.footer__title {
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin: 0 0 0.85rem;
}

.footer__links { display: grid; gap: 0.15rem; }
.footer__links a { display: inline-block; padding: 0.2rem 0; font-size: 0.9rem; color: var(--muted); transition: color var(--t-fast); }
.footer__links a:hover { color: var(--red-hot); }

.footer__contact { display: grid; gap: 0.35rem; font-size: 0.9rem; color: var(--muted); }
.footer__contact a { display: inline-block; padding: 0.15rem 0; }
.footer__contact a:hover { color: var(--red-hot); }

.footer__social { display: flex; gap: 0.5rem; margin-top: 1rem; }

.footer__social a {
  width: 40px; height: 40px;
  border-radius: 3px 10px 3px 10px;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: color var(--t-fast), border-color var(--t-fast);
}

.footer__social a:hover { color: var(--red-hot); border-color: var(--red); }
.footer__social svg { width: 15px; height: 15px; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.1rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted-dim);
}

.footer__base nav { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.footer__base nav a { padding: 0.4rem 0.3rem; }
.footer__base a:hover { color: var(--red-hot); }

@media (max-width: 699px) {
  .footer__base { justify-content: center; text-align: center; padding-block: 0.9rem; margin-top: 1.5rem; }
}

/* --------------------------------------------------------------------------
   Dock — the phone's book bar. Appears once the page's own buttons have
   scrolled away, so it never doubles them; absent on desktop and on the
   booking flow itself.
   -------------------------------------------------------------------------- */

.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: none;
  gap: 0.6rem;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(11, 11, 13, 0.94);
  border-top: 1px solid var(--line-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateY(110%);
  transition: transform var(--t-mid);
}

.js .dock { display: flex; }
.dock.is-on { transform: none; }
.dock .btn { min-height: 48px; }
.dock .btn--primary { flex: 1 1 auto; }
.dock .btn--ghost { padding-inline: 1em; }
.dock .btn--ghost svg { width: 1.1em; height: 1.1em; }

body.noscroll .dock { transform: translateY(110%); }

/* Keep the last footer links reachable above the bar, and do not repeat
   its button inside the footer while the bar exists */
@media (max-width: 979px) {
  body.has-dock .footer { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .js .footer__grid .btn { display: none; }
}

@media (min-width: 980px) { .dock, .js .dock { display: none; } }

/* --------------------------------------------------------------------------
   Vacation banner
   -------------------------------------------------------------------------- */

.vacay {
  position: relative;
  z-index: 91;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 0.65rem 1.1rem;
  background: rgba(232, 163, 60, 0.12);
  border-bottom: 1px solid rgba(232, 163, 60, 0.35);
  color: var(--warn);
  font-size: 0.86rem;
  text-align: center;
}

.vacay svg { width: 15px; height: 15px; flex: none; }
.vacay a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
body.has-vacay .masthead { position: sticky; }

/* --------------------------------------------------------------------------
   Page-specific grids
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .svc-grid  { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  #storyGrid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

@media (min-width: 960px) {
  #contactGrid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }
  #postGrid    { grid-template-columns: minmax(0, 1fr) 19rem; align-items: start; }
}

.proof__card a:hover img { transform: scale(1.03); }