/* ==========================================================================
   Elite Bathrooms & Plumbing — components
   Header, navigation, hero, cards, marquee, gallery, forms, footer.
   ========================================================================== */

/* ================================ HEADER ================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 0.85rem var(--gutter);
  color: var(--bone);
  transition: background 0.5s var(--ease), color 0.5s var(--ease),
    box-shadow 0.5s var(--ease), padding 0.4s var(--ease);
}

/* Once past the hero the bar condenses onto a card */
.site-header.is-stuck {
  background: color-mix(in oklab, var(--bone) 92%, transparent);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--hair), 0 12px 34px -28px rgb(20 22 26 / 60%);
  padding-block: 0.6rem;
}

@supports (backdrop-filter: blur(14px)) {
  .site-header.is-stuck {
    background: color-mix(in oklab, var(--bone) 76%, transparent);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: currentColor;
  /* The wordmark is only ~12px tall, so the link itself needs vertical padding
     to become a comfortable touch target. The negative margin gives the space
     straight back, so the header keeps its height and alignment. */
  padding-block: 1.15rem;
  margin-block: -1.15rem;
}

.brand__logo {
  width: clamp(150px, 30vw, 232px);
  height: auto;
  fill: currentColor;
  transition: width 0.4s var(--ease);
}

.brand__logo path {
  fill: currentColor;
}

/* Header actions */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.header__tel {
  display: none;
  align-items: center;
  gap: 0.5em;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.55em 0.9em;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  opacity: 0.9;
  transition: opacity 0.3s var(--ease), background 0.3s var(--ease),
    color 0.3s var(--ease);
}
.header__tel:hover {
  opacity: 1;
  background: currentColor;
}
.header__tel:hover .header__tel-txt {
  color: var(--bone);
}
.site-header.is-stuck .header__tel:hover .header__tel-txt {
  color: var(--bone);
}

/* Menu trigger */
.menu-btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  height: 44px;
  padding: 0 0.35em 0 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: currentColor;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.menu-btn__bars {
  position: relative;
  width: 34px;
  height: 10px;
  flex: none;
}
.menu-btn__bars i {
  position: absolute;
  left: 0;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  transition: transform 0.45s var(--ease-out), width 0.45s var(--ease-out),
    top 0.45s var(--ease-out);
}
.menu-btn__bars i:first-child {
  top: 0;
}
.menu-btn__bars i:last-child {
  top: 8px;
  width: 62%;
}
.menu-btn:hover .menu-btn__bars i:last-child {
  width: 100%;
}

body.nav-open .menu-btn__bars i:first-child {
  top: 4px;
  transform: rotate(45deg);
}
body.nav-open .menu-btn__bars i:last-child {
  top: 4px;
  width: 100%;
  transform: rotate(-45deg);
}
body.nav-open .menu-btn {
  color: var(--bone);
}
body.nav-open .site-header {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============================== FULLSCREEN NAV ============================== */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--ink);
  color: var(--bone);
  padding: 6rem var(--gutter) var(--s-6);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.75s var(--ease-out), visibility 0s 0.75s;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.nav-open .nav-overlay {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.75s var(--ease-out), visibility 0s 0s;
}

.nav-overlay__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-6);
  min-height: min-content;
}

.nav-list {
  display: grid;
  gap: 0.15em;
}

.nav-list a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: "Instrument Serif", serif;
  font-size: clamp(2rem, 9vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--bone);
  padding-block: 0.06em;
  transition: color 0.4s var(--ease), opacity 0.4s var(--ease);
}

.nav-list a .nav-i {
  font-family: "InterVariable", sans-serif;
  font-size: 0.24em;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--brand);
  transform: translateY(-0.9em);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.nav-list a:hover .nav-i,
.nav-list a:focus-visible .nav-i {
  opacity: 1;
}
.nav-list a:hover,
.nav-list a:focus-visible {
  color: var(--brand);
}
.nav-list:hover a:not(:hover) {
  opacity: 0.42;
}

.nav-list a[aria-current="page"]::after {
  content: "";
  display: inline-block;
  width: 0.24em;
  height: 0.24em;
  border-radius: 50%;
  background: var(--brand);
  margin-left: 0.28em;
  /* Superscript marker, aligned with the index numerals on hover. */
  transform: translateY(-0.62em);
}

.nav-overlay__meta {
  display: grid;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hair-light);
  font-size: var(--step--1);
  line-height: 1.9;
  color: color-mix(in oklab, var(--bone) 68%, transparent);
}

.nav-overlay__meta strong {
  display: block;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--brand);
  margin-bottom: 0.35em;
}

.nav-overlay__meta a:hover {
  color: var(--bone);
}

@media (min-width: 700px) {
  .nav-overlay__meta {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
  }
}

/* ================================== HERO ================================== */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding-block: 7rem 2.25rem;
  color: var(--bone);
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: -8% 0 0 0;
  z-index: -2;
  will-change: transform;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 52%;
  filter: saturate(1.02) contrast(1.04);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      180deg,
      rgb(10 12 15 / 74%) 0%,
      rgb(10 12 15 / 26%) 26%,
      rgb(10 12 15 / 14%) 48%,
      rgb(10 12 15 / 72%) 84%,
      rgb(10 12 15 / 92%) 100%
    ),
    linear-gradient(94deg, rgb(10 12 15 / 62%) 0%, transparent 62%);
}

/* A single hairline grid over the hero — architectural, not decorative */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.14;
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent calc(25% - 1px),
    var(--bone) calc(25% - 1px),
    var(--bone) 25%
  );
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent,
    #000 30%,
    #000 70%,
    transparent
  );
}

.hero__inner {
  position: relative;
  width: 100%;
}

.hero__eyebrow {
  color: color-mix(in oklab, var(--bone) 82%, transparent);
  margin-bottom: var(--s-4);
}

.hero__title {
  font-family: "Instrument Serif", serif;
  font-size: var(--step-6);
  line-height: 0.88;
  letter-spacing: -0.035em;
  margin-bottom: var(--s-5);
  max-width: 22ch;
}

.hero__title em {
  font-style: italic;
  color: color-mix(in oklab, var(--bone) 92%, var(--brand));
}

/* line-by-line reveal */
.hero__title .line {
  display: block;
  overflow: hidden;
}
.hero__title .line > span {
  display: block;
  transform: translate3d(0, 104%, 0) rotate(2.2deg);
  transform-origin: left top;
  transition: transform 1.05s var(--ease-out);
}
.hero.is-ready .hero__title .line > span {
  transform: translate3d(0, 0, 0) rotate(0);
}
.hero__title .line:nth-child(2) > span {
  transition-delay: 0.1s;
}
.hero__title .line:nth-child(3) > span {
  transition-delay: 0.2s;
}

.hero__bottom {
  display: grid;
  gap: var(--s-5);
  align-items: end;
  padding-top: var(--s-5);
  border-top: 1px solid var(--hair-light);
}

.hero__lede {
  max-width: 34ch;
  font-size: var(--step-0);
  line-height: 1.62;
  color: color-mix(in oklab, var(--bone) 84%, transparent);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* The four facts that appear under the hero */
.hero__facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: var(--s-6);
  background: var(--hair-light);
  border: 1px solid var(--hair-light);
}

.hero__fact {
  padding: var(--s-4) var(--s-3);
  background: rgb(12 14 17 / 34%);
}

.hero__fact dt {
  font-size: 0.66rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 500;
  margin-bottom: 0.45em;
}

.hero__fact dd {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--bone);
}

@media (min-width: 720px) {
  .hero__facts {
    grid-template-columns: repeat(4, 1fr);
  }
  .hero__bottom {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-6);
  }
}

@media (min-width: 1024px) {
  .hero {
    padding-block: 8.5rem 3rem;
  }
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: end;
    gap: var(--s-8);
  }
  .hero__title {
    margin-bottom: 0;
  }
  .hero__aside {
    padding-bottom: 0.6rem;
  }
  .hero__facts {
    margin-top: var(--s-6);
  }
}

/* Scroll cue */
.hero__cue {
  display: none;
  position: absolute;
  right: var(--gutter);
  bottom: 2.4rem;
  z-index: 3;
  align-items: center;
  gap: 0.7em;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--bone) 62%, transparent);
  writing-mode: vertical-rl;
}
.hero__cue i {
  width: 1px;
  height: 46px;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--bone) 60%, transparent),
    transparent
  );
  animation: cue 2.4s var(--ease-in-out) infinite;
  transform-origin: top;
}
@keyframes cue {
  0%,
  100% {
    transform: scaleY(0.35);
    opacity: 0.4;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}
@media (min-width: 1024px) {
  .hero__cue {
    display: flex;
  }
}

/* ================================ MARQUEE ================================ */
.marquee {
  --speed: 44s;
  position: relative;
  display: flex;
  overflow: hidden;
  background: var(--ink);
  color: var(--bone);
  padding-block: 1.05rem;
  border-block: 1px solid rgb(255 255 255 / 10%);
  user-select: none;
}

.marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0;
  min-width: 100%;
  animation: slide var(--speed) linear infinite;
  will-change: transform;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  padding-inline: 1.6rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in oklab, var(--bone) 74%, transparent);
}

.marquee__item::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  flex: none;
  opacity: 0.85;
}

@keyframes slide {
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

/* ================================ SECTIONS ================================ */
.section-head {
  display: grid;
  gap: var(--s-4);
  margin-bottom: clamp(2rem, 5vw, 3.75rem);
}

.section-head__title {
  font-family: "Instrument Serif", serif;
  font-size: var(--step-4);
  line-height: 1;
  letter-spacing: -0.03em;
  max-width: 20ch;
}

.section-head__aside {
  max-width: 46ch;
  color: var(--muted);
  font-size: var(--step-0);
  line-height: 1.66;
}

@media (min-width: 860px) {
  .section-head {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: end;
    gap: var(--s-7);
  }
  .section-head--stack {
    grid-template-columns: 1fr;
  }
}

/* ============================== SPLIT / INTRO ============================== */
.intro {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 900px) {
  .intro {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }
}

.intro__figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bone-3);
  aspect-ratio: 4 / 5;
}

.intro__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}

.intro__figure:hover img {
  transform: scale(1.035);
}

.intro__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.9rem 1.1rem;
  background: var(--ink);
  color: var(--bone);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
}
.intro__badge b {
  display: block;
  font-family: "Instrument Serif", serif;
  font-size: 1.65rem;
  letter-spacing: -0.02em;
  font-weight: 400;
  text-transform: none;
  margin-top: 0.1em;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: var(--s-6);
  background: var(--hair);
  border-block: 1px solid var(--hair);
}

.stat {
  padding: var(--s-4) 0;
  background: var(--bone);
}
.stat + .stat {
  padding-left: var(--s-4);
}

.stat__n {
  display: block;
  font-family: "Instrument Serif", serif;
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat__l {
  display: block;
  margin-top: 0.5em;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.45;
}

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

/* ================================= CARDS ================================= */
/* 3D tilt cards: the wrapper owns perspective, the inner element rotates   */
.cards {
  display: grid;
  gap: var(--s-4);
  perspective: 1400px;
}

@media (min-width: 700px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1080px) {
  .cards--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: clamp(1.4rem, 3vw, 2.1rem);
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease),
    border-color 0.4s var(--ease);
  will-change: transform;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in oklab, var(--brand) 11%, transparent),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}

.card:hover {
  border-color: color-mix(in oklab, var(--ink) 22%, transparent);
  box-shadow: 0 26px 60px -42px rgb(20 22 26 / 62%);
}
.card:hover::before {
  opacity: 1;
}

.card__idx {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--muted-2);
  font-weight: 500;
}

.card__title {
  font-family: "Instrument Serif", serif;
  font-size: var(--step-2);
  line-height: 1.1;
  letter-spacing: -0.022em;
}

.card__body {
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--muted);
}

.card__list {
  display: grid;
  gap: 0.55em;
  margin-top: 0.35em;
  font-size: var(--step--1);
  color: var(--ink-3);
}

.card__list li {
  position: relative;
  padding-left: 1.15em;
  line-height: 1.5;
}

.card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 1px;
  background: var(--brand-deep);
}

.card__foot {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--hair);
}

/* Card with a photograph */
.card--media {
  padding: 0;
  overflow: hidden;
}
.card--media .card__media {
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--bone-3);
}
.card--media .card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.card--media:hover .card__media img {
  transform: scale(1.045);
}
.card--media .card__pad {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  flex: 1;
}

/* ============================== DARK PANEL ============================== */
.panel-dark {
  position: relative;
  background: var(--ink);
  color: var(--bone);
  overflow: hidden;
  isolation: isolate;
}

.panel-dark::after {
  content: "";
  position: absolute;
  inset: auto -20% -40% auto;
  width: 70vw;
  height: 70vw;
  max-width: 720px;
  max-height: 720px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--brand) 26%, transparent),
    transparent 68%
  );
  z-index: -1;
  pointer-events: none;
}

.panel-dark .eyebrow {
  color: var(--brand);
}
.panel-dark .section-head__title {
  color: var(--bone);
}
.panel-dark .section-head__aside,
.panel-dark .card__body,
.panel-dark .prose p {
  color: color-mix(in oklab, var(--bone) 72%, transparent);
}
.panel-dark .rule,
.panel-dark hr {
  border-color: var(--hair-light);
  background: var(--hair-light);
}

/* ================================ PROCESS ================================ */
.steps {
  display: grid;
  gap: 0;
  counter-reset: step;
  border-top: 1px solid var(--hair);
}

.step {
  position: relative;
  display: grid;
  gap: var(--s-2);
  padding-block: clamp(1.5rem, 3.5vw, 2.4rem);
  border-bottom: 1px solid var(--hair);
  transition: background 0.5s var(--ease);
}

.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: "Instrument Serif", serif;
  font-size: var(--step-1);
  color: var(--brand-deep);
  letter-spacing: 0;
  line-height: 1;
}

.step__title {
  font-family: "Instrument Serif", serif;
  font-size: var(--step-2);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.step__body {
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--muted);
  max-width: 54ch;
}

/* the sweep on hover */
.step::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}
.step:hover::after {
  transform: scaleX(1);
}

@media (min-width: 860px) {
  .step {
    grid-template-columns: 4.5rem minmax(0, 0.9fr) minmax(0, 1.35fr);
    align-items: baseline;
    gap: var(--s-5);
  }
  .step::before {
    font-size: var(--step-2);
  }
}

/* ================================ GALLERY ================================ */
/* Horizontal rail driven by scroll progress — the 3D "carousel in space".
   No overflow here on purpose: a clipping ancestor kills position: sticky,
   so the clipping lives on .gallery__pin instead. */
.gallery {
  position: relative;
}

.gallery__stage {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding-inline: var(--gutter);
  padding-block: 1rem;
  perspective: 1600px;
  will-change: transform;
}

.gallery__stage.is-draggable {
  cursor: grab;
}
.gallery__stage.is-dragging {
  cursor: grabbing;
}

.shot {
  position: relative;
  flex: 0 0 auto;
  width: clamp(240px, 74vw, 430px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bone-3);
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease);
  will-change: transform;
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out), filter 0.7s var(--ease);
}

.shot:hover img {
  transform: scale(1.04);
}

.shot__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1rem 0.85rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  background: linear-gradient(transparent, rgb(10 12 15 / 78%));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease-out);
}
.shot:hover .shot__cap {
  opacity: 1;
  transform: translateY(0);
}

.gallery__hint {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: var(--s-4);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.gallery__hint svg {
  width: 1.4em;
  height: 1em;
}

/* =============================== BRAND STRIP =============================== */
.brands {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}

.brand-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 1.9rem) 0.75rem;
  background: var(--bone);
  font-family: "Instrument Serif", serif;
  font-size: clamp(0.95rem, 2.4vw, 1.3rem);
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: center;
  transition: color 0.35s var(--ease), background 0.35s var(--ease),
    letter-spacing 0.5s var(--ease);
}
.brand-cell:hover {
  color: var(--ink);
  background: var(--bone-2);
  letter-spacing: 0.09em;
}

@media (min-width: 620px) {
  .brands {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 960px) {
  .brands {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ================================== VISIT ================================== */
.visit {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 900px) {
  .visit {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.visit__block + .visit__block {
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--hair);
}

.visit__label {
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.85em;
}

.visit__big {
  font-family: "Instrument Serif", serif;
  font-size: var(--step-3);
  line-height: 1.14;
  letter-spacing: -0.02em;
  display: inline-block;
}
.visit__big:hover {
  color: var(--brand-deep);
}

.hours {
  display: grid;
  gap: 0.2em;
  font-size: var(--step-0);
  max-width: 26rem;
}
.hours li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.55em;
  border-bottom: 1px dotted var(--hair);
}
.hours li span:last-child {
  flex: none;
  white-space: nowrap;
  text-align: right;
}
.hours li span:first-child {
  color: var(--ink-3);
}
.hours li span:last-child {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hours li.is-today span {
  color: var(--ink);
  font-weight: 550;
}
/* "today" sits beside the day name, not beside the time, so the two can
   never fight for the same space on a narrow screen. */
.hours li.is-today {
  border-left: 2px solid var(--brand);
  padding-left: 0.7rem;
  margin-left: -0.7rem;
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--brand) 9%, transparent),
    transparent 70%
  );
}
.hours li.is-today span:first-child::after {
  content: "today";
  display: inline-block;
  margin-left: 0.5em;
  font-size: 0.62em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand-deep);
  vertical-align: 0.15em;
}

.map-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hair);
  aspect-ratio: 4 / 3;
  width: 100%;
  /* Deliberately no min-height: paired with aspect-ratio it computes a
     min-content width of 400px, which is what was clipping the column. */
  /* street-grid fallback: shows if the map embed is blocked or still loading,
     so the frame always reads as a map rather than an empty box */
  background-color: var(--bone-2);
  background-image: linear-gradient(
      90deg,
      color-mix(in oklab, var(--ink) 7%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      color-mix(in oklab, var(--ink) 7%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      24deg,
      transparent 46%,
      color-mix(in oklab, var(--brand) 32%, transparent) 46%,
      color-mix(in oklab, var(--brand) 32%, transparent) 48.5%,
      transparent 48.5%
    );
  background-size: 46px 46px, 46px 46px, 100% 100%;
}
.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.65) contrast(1.02);
  transition: filter 0.6s var(--ease);
}
.map-frame:hover iframe {
  filter: grayscale(0) contrast(1);
}

/* ================================== FORM ================================== */
.form-card {
  position: relative;
  padding: clamp(1.4rem, 3.4vw, 2.5rem);
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
}

.field {
  display: grid;
  gap: 0.45rem;
  margin-bottom: var(--s-4);
}

.field > label {
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0.82em 0.9em;
  min-height: 48px;
  background: var(--bone);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  font-size: var(--step-0);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
  appearance: none;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236c6862' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 11px;
  padding-right: 2.4rem;
  cursor: pointer;
}

.field textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: color-mix(in oklab, var(--ink) 26%, transparent);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--brand-deep);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 26%, transparent);
}

.field input:user-invalid,
.field textarea:user-invalid {
  border-color: #c0392b;
}

.field-row {
  display: grid;
  gap: 0;
}
@media (min-width: 560px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
  }
}

.form-note {
  margin-top: var(--s-3);
  margin-bottom: var(--s-4);
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--muted-2);
}

/* The submit sits directly after the privacy note, so the note needs its own
   breathing room rather than relying on the paragraph's default margins. */
.form-card .form-note + p,
.form-card .form-note + .form-actions {
  margin-top: 0;
}

.form-status {
  margin-top: var(--s-3);
  padding: 0.85rem 1rem;
  font-size: var(--step--1);
  line-height: 1.5;
  border-radius: var(--radius);
  border: 1px solid;
  display: none;
}
.form-status.is-ok {
  display: block;
  color: #1c6b3a;
  border-color: color-mix(in oklab, #1c6b3a 32%, transparent);
  background: color-mix(in oklab, #1c6b3a 8%, transparent);
}
.form-status.is-err {
  display: block;
  color: #a02a1e;
  border-color: color-mix(in oklab, #a02a1e 32%, transparent);
  background: color-mix(in oklab, #a02a1e 7%, transparent);
}

/* ================================== FAQ ================================== */
.faq {
  border-top: 1px solid var(--hair);
}

.faq__item {
  border-bottom: 1px solid var(--hair);
}

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: 1.15rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-size: var(--step-1);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.35;
  color: var(--ink);
  transition: color 0.3s var(--ease);
}
.faq__q:hover {
  color: var(--brand-deep);
}

.faq__sign {
  position: relative;
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 0.35em;
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.45s var(--ease-out), opacity 0.35s var(--ease);
}
.faq__sign::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  transform: translateY(-50%);
}
.faq__sign::after {
  left: 50%;
  top: 0;
  height: 100%;
  width: 1.5px;
  transform: translateX(-50%);
}
.faq__item.is-open .faq__sign::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.faq__a {
  overflow: hidden;
  height: 0;
  transition: height 0.45s var(--ease-out);
}
.faq__a > div {
  padding: 0 0 1.4rem;
  max-width: 66ch;
  color: var(--muted);
  font-size: var(--step-0);
  line-height: 1.68;
}
.faq__a p + p {
  margin-top: 0.85em;
}

/* ================================== CTA ================================== */
.cta-band {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  background: var(--ink);
  color: var(--bone);
  overflow: hidden;
  isolation: isolate;
}

.cta-band__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.34;
}
.cta-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgb(10 12 15 / 82%),
    rgb(10 12 15 / 94%) 60%,
    rgb(10 12 15 / 98%)
  );
}

/* The eyebrow sets its own muted colour for light sections; on the dark band it
   has to be re-tinted light or it drops to 3.27:1. */
.cta-band .eyebrow {
  color: color-mix(in oklab, var(--bone) 74%, transparent);
}

.cta-band__inner {
  display: grid;
  gap: var(--s-5);
  text-align: center;
  justify-items: center;
}

.cta-band__title {
  font-family: "Instrument Serif", serif;
  font-size: var(--step-5);
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 18ch;
}
.cta-band__title em {
  font-style: italic;
  color: color-mix(in oklab, var(--bone) 88%, var(--brand));
}

.cta-band__body {
  max-width: 46ch;
  color: color-mix(in oklab, var(--bone) 74%, transparent);
}

/* ================================= FOOTER ================================= */
.site-footer {
  background: var(--ink);
  color: color-mix(in oklab, var(--bone) 66%, transparent);
  padding-block: clamp(2.5rem, 5vw, 4rem) var(--s-5);
  font-size: var(--step--1);
  border-top: 1px solid rgb(255 255 255 / 9%);
}

.footer__top {
  display: grid;
  gap: var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid rgb(255 255 255 / 9%);
}

.footer__brand-logo {
  width: 210px;
  color: var(--bone);
  fill: currentColor;
  margin-bottom: var(--s-4);
}
.footer__brand-logo path {
  fill: currentColor;
}

.footer__tag {
  max-width: 32ch;
  line-height: 1.7;
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}

.footer__col h2,
.footer__col h3 {
  font-size: 0.66rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 500;
  margin-bottom: 0.95em;
}

.footer__col li + li {
  margin-top: 0.5em;
}
.footer__col a:hover {
  color: var(--bone);
}

.footer__cols--wide {
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .footer__cols {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer__cols--wide {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .footer__top {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr);
    gap: var(--s-8);
  }
  .footer__cols--wide {
    grid-template-columns: repeat(3, 1fr);
  }
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-5);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1.2em;
}

.social {
  display: flex;
  gap: 0.55rem;
}
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 50%;
  color: color-mix(in oklab, var(--bone) 72%, transparent);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
    background 0.3s var(--ease), transform 0.4s var(--ease-out);
}
.social a:hover {
  color: var(--ink);
  background: var(--bone);
  border-color: var(--bone);
  transform: translateY(-2px);
}
.social svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* ============================== FLOATING CALL ============================== */
.call-fab {
  position: fixed;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.7em 1.05em;
  background: var(--ink);
  color: var(--bone);
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 14px 30px -12px rgb(20 22 26 / 70%);
  transform: translateY(0);
  transition: transform 0.45s var(--ease-out), opacity 0.35s var(--ease-out),
    background 0.35s var(--ease);
}
.call-fab:hover {
  transform: translateY(-3px);
  background: var(--brand-deep);
}
.call-fab svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.call-fab {
  min-height: 44px;
}
/* Withdrawn while hours, map or form are on screen — see initCallFab(). */
.call-fab.is-tucked {
  transform: translateY(calc(100% + 1.5rem));
  opacity: 0;
  pointer-events: none;
}

/* Below 380px the pill crowds the content; the header phone does the job. */
@media (max-width: 379px) {
  .call-fab {
    display: none;
  }
}
@media (min-width: 900px) {
  .call-fab {
    display: none;
  }
}

/* ================================ PAGE HERO ================================ */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 62svh;
  padding-block: 7.5rem 2.5rem;
  background: var(--ink);
  color: var(--bone);
  overflow: hidden;
  isolation: isolate;
}
.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.page-hero__media img {
  width: 100%;
  height: 118%;
  object-fit: cover;
  object-position: center 46%;
}
.page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgb(10 12 15 / 76%),
    rgb(10 12 15 / 40%) 45%,
    rgb(10 12 15 / 90%)
  );
}
.page-hero__title {
  font-family: "Instrument Serif", serif;
  font-size: var(--step-5);
  line-height: 0.95;
  letter-spacing: -0.032em;
  max-width: 24ch;
  margin-top: var(--s-3);
}
.page-hero__lede {
  margin-top: var(--s-4);
  max-width: 48ch;
  color: color-mix(in oklab, var(--bone) 80%, transparent);
  font-size: var(--step-1);
  line-height: 1.55;
}

/* breadcrumbs */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55em;
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--bone) 60%, transparent);
}
.crumbs a:hover {
  color: var(--bone);
}
.crumbs span[aria-hidden] {
  opacity: 0.45;
}

/* ============================== SPEC / FEATURE ============================== */
.split {
  display: grid;
  gap: clamp(1.75rem, 4.5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 880px) {
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .split--flip > :first-child {
    order: 2;
  }
}

.split__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  background: var(--bone-3);
}
.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.split__media:hover img {
  transform: scale(1.03);
}

.spec {
  display: grid;
  gap: 1px;
  margin-top: var(--s-5);
  background: var(--hair);
  border: 1px solid var(--hair);
}
@media (min-width: 560px) {
  .spec {
    grid-template-columns: repeat(2, 1fr);
  }
}
.spec > div {
  padding: var(--s-4);
  background: var(--bone);
}
.spec dt {
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5em;
}
.spec dd {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-3);
}

/* ======================= REVEAL / MOTION PRIMITIVES ======================= */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="left"] {
  transform: translate3d(-30px, 0, 0);
}
[data-reveal="right"] {
  transform: translate3d(30px, 0, 0);
}

/* Below the tablet breakpoint there is no room to slide sideways without
   pushing the element past the viewport edge, so the horizontal reveal
   collapses into the vertical rise. Content is never clipped mid-reveal. */
@media (max-width: 760px) {
  [data-reveal="left"],
  [data-reveal="right"] {
    transform: translate3d(0, 22px, 0);
  }
}

/* Curtain wipe for images */
[data-wipe] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s var(--ease-out);
}
[data-wipe].is-in {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-wipe] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .hero__title .line > span {
    transform: none !important;
  }
  .hero__cue i {
    animation: none;
  }
}

/* ============================== CREDENTIALS ============================== */
/* Verifiable third-party proof: manufacturer stockist listings, presented as
   labels rather than as quotes. Nothing here is a testimonial we cannot source. */
.credentials-band {
  background: var(--bone-2);
  border-block: 1px solid var(--hair);
}

.credentials-band__head {
  display: grid;
  gap: var(--s-4);
  margin-bottom: clamp(2rem, 4.5vw, 3.25rem);
}

.credentials-band__title {
  font-family: "Instrument Serif", serif;
  font-size: var(--step-4);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-top: 0.55rem;
  max-width: 18ch;
}

.credentials-band__aside {
  max-width: 44ch;
  color: var(--muted);
  font-size: var(--step-0);
  line-height: 1.66;
}

.credentials-band__foot {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  max-width: 62ch;
  color: var(--muted);
  font-size: var(--step-0);
  line-height: 1.7;
}

@media (min-width: 860px) {
  .credentials-band__head {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: end;
    gap: var(--s-7);
  }
}

.credentials {
  display: grid;
  gap: 1px;
  background: var(--hair);
  border-block: 1px solid var(--hair);
}

.credential {
  display: grid;
  gap: 0.2rem;
  padding: clamp(1.1rem, 2.5vw, 1.6rem) 0;
  background: var(--bone-2);
  align-content: start;
}

@media (min-width: 620px) {
  .credentials {
    grid-template-columns: repeat(2, 1fr);
  }
  .credential {
    padding-inline: clamp(1rem, 2.5vw, 1.75rem);
  }
  .credential:nth-child(odd) {
    padding-left: 0;
  }
}

@media (min-width: 1040px) {
  .credentials {
    grid-template-columns: repeat(4, 1fr);
  }
  .credential {
    padding-left: clamp(1rem, 2.5vw, 1.75rem);
  }
  .credential:first-child {
    padding-left: 0;
  }
}

.credential__name {
  font-family: "Instrument Serif", serif;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.credential__label {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--brand-deep);
  margin-top: 0.15rem;
}

.credential__note {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--muted);
  margin-top: 0.35rem;
  max-width: 26ch;
}

/* ======================= TOUCH TARGET SIZING =======================
   Wordmarks, phone numbers and standalone text links are only as tall as their
   type. On touch screens each becomes a full-height target without altering
   the visual rhythm, using padding that the negative margin gives back.
   ================================================================== */
@media (max-width: 899px) {
  /* Primary navigation rows: thumb-friendly hit area without disturbing the
     inline geometry of the superscript index and current-page dot. */
  .nav-list a {
    display: inline-block;
    padding-block: 0.14em;
    margin-block: -0.07em;
  }
  .footer__col li a,
  .nav-overlay__meta a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer__col li + li {
    margin-top: 0.15rem;
  }
  .footer__col li a[href^="mailto"],
  .tlink,
  a.phone-link,
  .footer__cta a,
  .nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .tlink {
    padding-block: 0.55rem;
    margin-block: -0.55rem;
  }
  a.phone-link {
    padding-block: 0.7rem;
    margin-block: -0.7rem;
  }
}