/**
 * FADE — original Tunai theme for barbershops & men's grooming.
 * Midnight barbershop, est. heritage: bottle-green near-black room, aged
 * cream serif ink, burnished copper, and the barber-pole diagonal stripe as
 * the signature motif — dividers, button reveals, price-board hovers.
 * Scoped under .fade-theme; all classes prefixed fd-.
 */

.fade-theme {
  --fd-bg: #0e1512;
  --fd-bg-deep: #0a100d;
  --fd-panel: #131c17;
  --fd-panel-2: #172219;
  --fd-ink: #efe6d4;
  --fd-cream: #efe6d4;
  --fd-muted: #9fa896;
  --fd-line: rgba(239, 230, 212, 0.11);
  --fd-line-strong: rgba(239, 230, 212, 0.3);
  --fd-copper: #c47f3f;
  --fd-copper-lift: #dda36c;
  --fd-copper-deep: #8a5729;
  --fd-copper-line: rgba(196, 127, 63, 0.32);
  --fd-copper-soft: rgba(196, 127, 63, 0.12);
  --fd-on-copper: #170f07;
  --fd-stripe: repeating-linear-gradient(
    45deg,
    var(--fd-copper) 0 9px,
    var(--fd-bg-deep) 9px 13px,
    var(--fd-cream) 13px 22px,
    var(--fd-bg-deep) 22px 26px
  );
  --fd-stripe-v: repeating-linear-gradient(
    -45deg,
    var(--fd-copper) 0 7px,
    var(--fd-bg-deep) 7px 10px,
    var(--fd-cream) 10px 17px,
    var(--fd-bg-deep) 17px 20px
  );
  --fx-accent: #c47f3f;
  --fx-spot: rgba(196, 127, 63, 0.1);
  --fd-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --fd-serif: "Libre Caslon Text", Georgia, serif;
  --fd-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  background: var(--fd-bg);
  color: var(--fd-ink);
  font-family: var(--fd-serif);
  font-size: 15.5px;
  line-height: 1.75;
  overflow-x: hidden;
  min-height: 100vh;
}

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

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

.fade-theme a {
  color: inherit;
  text-decoration: none;
}

.fade-theme ::selection {
  background: var(--fd-copper);
  color: var(--fd-bg-deep);
}

/* Dark colour scheme + themed thin scrollbar on the page root. */
html:has(.fade-theme) {
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: rgba(196, 127, 63, 0.6) #0a100d;
}

/* Lamplight in a dark green room — copper from above, bottle-green depth. */
.fade-theme::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 48% 34% at 78% 0%, rgba(196, 127, 63, 0.1), transparent),
    radial-gradient(ellipse 60% 42% at 8% 100%, rgba(26, 46, 36, 0.55), transparent),
    linear-gradient(180deg, rgba(10, 16, 13, 0.5), transparent 30%);
}

.fade-theme > *:not(.fd-deco) {
  position: relative;
  z-index: 1;
}

.fd-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.fd-copper-word {
  color: var(--fd-copper);
  text-shadow: 0 0 34px rgba(196, 127, 63, 0.35);
}

/* ── Signature: barber-pole stripe band ─────────────────────────────────── */
.fd-stripe-band {
  height: 7px;
  background: var(--fd-stripe);
  opacity: 0.9;
}

/* ── Signature: copper corner ticks (framed-panel detail) ───────────────── */
.fd-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fd-ticks::before,
.fd-ticks::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 0 solid var(--fd-copper);
}

.fd-ticks::before {
  top: -1px;
  left: -1px;
  border-top-width: 2px;
  border-left-width: 2px;
}

.fd-ticks::after {
  bottom: -1px;
  right: -1px;
  border-bottom-width: 2px;
  border-right-width: 2px;
}

/* ── Signature: EST. crest — hairlines flanking crossed scissors ────────── */
.fd-crest {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--fd-copper);
}

.fd-crest-line {
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fd-copper));
}

.fd-crest-line:last-child {
  transform: scaleX(-1);
}

.fd-crest-mark {
  font-size: 17px;
  line-height: 1;
  transform: rotate(-90deg);
}

/* ── Eyebrows ───────────────────────────────────────────────────────────── */
.fd-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--fd-serif);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fd-copper);
}

.fd-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--fd-copper);
}

/* ── Nav ────────────────────────────────────────────────────────────────── */
.fd-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 28px;
  background: rgba(14, 21, 18, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--fd-line);
}

.fd-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--fd-display);
  font-size: 21px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fd-logo-mark {
  color: var(--fd-copper);
  font-size: 16px;
  transform: rotate(-90deg);
  flex-shrink: 0;
}

.fd-nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--fd-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.fd-nav-links a {
  color: var(--fd-muted);
  padding-bottom: 4px;
  background: linear-gradient(var(--fd-copper), var(--fd-copper)) left bottom / 0 1px no-repeat;
  transition: color 0.2s ease, background-size 0.3s var(--fd-ease);
}

.fd-nav-links a:hover {
  color: var(--fd-cream);
  background-size: 100% 1px;
}

.fd-nav-links a:focus-visible {
  outline: 2px solid var(--fd-copper);
  outline-offset: 3px;
}

.fd-nav .fd-btn {
  padding: 9px 20px;
  font-size: 14.5px;
}

/* ── Buttons — sharp corners, copper, stripe slide-in on hover ──────────── */
.fd-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  border: 1px solid var(--fd-line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--fd-cream);
  font-family: var(--fd-display);
  font-size: 16.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease,
    transform 0.2s ease, box-shadow 0.3s ease;
}

/* The pole stripe slides across on hover — the motif on every CTA. */
.fd-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fd-stripe);
  opacity: 0;
  transform: translateX(-101%);
  transition: transform 0.4s var(--fd-ease), opacity 0.3s ease;
  pointer-events: none;
}

.fd-btn:hover {
  border-color: var(--fd-copper);
  color: var(--fd-copper-lift);
  transform: translateY(-2px);
}

.fd-btn:hover::before {
  opacity: 0.14;
  transform: translateX(0);
}

.fd-btn:focus-visible {
  outline: 2px solid var(--fd-copper);
  outline-offset: 3px;
}

.fd-btn--solid {
  background: var(--fd-copper);
  border-color: var(--fd-copper);
  color: var(--fd-on-copper);
}

.fd-btn--solid:hover {
  background: var(--fd-copper-lift);
  border-color: var(--fd-copper-lift);
  color: var(--fd-on-copper);
  box-shadow: 0 12px 32px rgba(196, 127, 63, 0.32);
}

.fd-btn--solid:hover::before {
  opacity: 0.22;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.fd-hero {
  position: relative;
  padding: 96px 0 100px;
  overflow: hidden;
}

/* Faint oversized scissors watermark drifting behind the type. */
.fd-hero-mark {
  position: absolute;
  top: -6%;
  right: -6%;
  z-index: 0;
  font-size: clamp(300px, 42vw, 580px);
  line-height: 1;
  color: var(--fd-cream);
  opacity: 0.04;
  transform: rotate(-24deg);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.fd-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 56px;
  align-items: center;
}

.fd-hero-copy .fd-crest {
  margin-bottom: 20px;
}

.fd-hero-eyebrow {
  margin-bottom: 22px;
}

.fd-hero h1 {
  margin: 0 0 22px;
  font-family: var(--fd-display);
  font-weight: 400;
  font-size: calc(clamp(62px, 8.6vw, 118px) * var(--tx-scale, 1));
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  max-width: 11ch;
  overflow-wrap: anywhere;
  /* Balance forced mid-word breaks of very long single-word names so the
     last line never strands one or two characters. */
  text-wrap: balance;
}

.fd-hero-motto {
  margin: 0 0 38px;
  max-width: 46ch;
  color: var(--fd-muted);
  font-size: 16.5px;
}

.fd-hero-cta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* Tall framed photo panel — double hairline, corner ticks, side pole. */
.fd-hero-frame {
  position: relative;
  height: min(68vh, 600px);
  padding: 16px;
  background: var(--fd-panel);
  border: 1px solid var(--fd-line);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.fd-hero-frame::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--fd-copper-line);
  pointer-events: none;
  z-index: 2;
}

.fd-hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.08) saturate(1.05) contrast(1.03);
}

/* Vertical barber pole hung off the frame's left edge. */
.fd-pole {
  position: absolute;
  left: -22px;
  top: 9%;
  bottom: 9%;
  width: 10px;
  background: var(--fd-stripe-v);
  border: 1px solid rgba(239, 230, 212, 0.18);
  z-index: 2;
}

/* ── Marquee ────────────────────────────────────────────────────────────── */
.fd-marquee {
  padding: 13px 0;
  background: var(--fd-bg-deep);
  color: var(--fd-cream);
  --fx-mq: 30s;
}

.fd-marquee em {
  display: inline-flex;
  align-items: center;
  font-family: var(--fd-display);
  font-style: normal;
  font-size: 15px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 0 0 0 34px;
  white-space: nowrap;
}

.fd-marquee em::after {
  content: "✂";
  margin-left: 34px;
  font-size: 12px;
  color: var(--fd-copper);
  transform: rotate(-90deg);
}

/* ── Sections ───────────────────────────────────────────────────────────── */
.fd-section {
  padding: 112px 0;
}

.fd-sec-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 54px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--fd-line);
}

/* Stripe tick under the section title — the motif as punctuation. */
.fd-sec-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 74px;
  height: 7px;
  background: var(--fd-stripe);
}

.fd-sec-head h2 {
  margin: 0;
  font-family: var(--fd-display);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 62px);
  line-height: 0.95;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  text-wrap: balance;
}

.fd-sec-no {
  flex-shrink: 0;
  font-family: var(--fd-display);
  font-size: 15px;
  letter-spacing: 0.3em;
  color: var(--fd-muted);
  white-space: nowrap;
}

/* ── Price board ────────────────────────────────────────────────────────── */
.fd-board {
  border-top: 1px solid var(--fd-line);
}

.fd-row {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 25px 14px;
  border-bottom: 1px solid var(--fd-line);
  overflow: hidden;
  transition: background 0.3s ease, padding 0.3s var(--fd-ease);
}

/* Pole stripe rises along the row's left edge on hover. */
.fd-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--fd-stripe-v);
  opacity: 0;
  transform: translateX(-7px);
  transition: transform 0.3s var(--fd-ease), opacity 0.25s ease;
}

.fd-row:hover {
  background: rgba(196, 127, 63, 0.07);
  padding-left: 28px;
}

.fd-row:hover::before {
  opacity: 1;
  transform: translateX(0);
}

.fd-row:focus-visible {
  outline: 2px solid var(--fd-copper);
  outline-offset: -2px;
}

.fd-row-name {
  font-family: var(--fd-display);
  font-size: 23px;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  line-height: 1.15;
  overflow-wrap: anywhere;
  transition: color 0.25s ease;
}

.fd-row:hover .fd-row-name {
  color: var(--fd-copper-lift);
}

.fd-row-meta {
  display: block;
  margin-top: 5px;
  font-family: var(--fd-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--fd-muted);
  letter-spacing: 0.04em;
}

/* Dotted price leaders — the classic board. */
.fd-row-dots {
  flex: 1;
  min-width: 36px;
  border-bottom: 1px dotted rgba(239, 230, 212, 0.32);
  transform: translateY(-6px);
}

.fd-row-price {
  font-family: var(--fd-display);
  font-size: 21px;
  letter-spacing: 0.05em;
  color: var(--fd-copper);
  white-space: nowrap;
}

.fd-row-book {
  font-family: var(--fd-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fd-muted);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.25s ease, transform 0.25s var(--fd-ease), color 0.25s ease;
}

.fd-row:hover .fd-row-book {
  opacity: 1;
  transform: translateX(0);
  color: var(--fd-cream);
}

/* ── Gallery — beveled frames, light sweeping across on hover ───────────── */
.fd-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.fd-gallery figure {
  position: relative;
  margin: 0;
  padding: 11px;
  background: var(--fd-panel);
  border: 1px solid var(--fd-line);
  box-shadow:
    inset 0 1px 0 rgba(239, 230, 212, 0.06),
    0 16px 40px rgba(0, 0, 0, 0.4);
  transition: border-color 0.3s ease, transform 0.3s var(--fd-ease);
}

.fd-gallery figure::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--fd-copper-line);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.fd-gallery figure:hover {
  border-color: var(--fd-copper-line);
  transform: translateY(-4px);
}

.fd-gallery figure:hover::after {
  opacity: 1;
}

.fd-gallery figure:focus-visible {
  outline: 2px solid var(--fd-copper);
  outline-offset: 3px;
}

.fd-photo {
  display: block;
  position: relative;
  overflow: hidden;
}

.fd-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: sepia(0.08) saturate(1.05) contrast(1.02);
  transition: transform 0.6s var(--fd-ease);
}

.fd-gallery figure:hover .fd-photo img {
  transform: scale(1.05);
}

/* A shaft of light sweeps the print on hover. */
.fd-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.25) 50%, transparent 60%);
  transform: translateX(-130%);
  transition: transform 0.7s var(--fd-ease);
  pointer-events: none;
}

.fd-gallery figure:hover .fd-photo::after {
  transform: translateX(130%);
}

.fd-gallery figure .fd-ticks {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fd-gallery figure:hover .fd-ticks {
  opacity: 1;
}

/* ── Barbers — vintage member badges, arched double-hairline frames ─────── */
/* Centered flex rather than auto-fill grid so an incomplete last row of
   badges sits centred instead of leaving a ragged left-aligned tail. */
.fd-team {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}

.fd-member {
  flex: 1 1 212px;
  max-width: 256px;
  min-width: 0;
  position: relative;
  padding: 30px 20px 26px;
  background: var(--fd-panel);
  border: 1px solid var(--fd-line);
  text-align: center;
  transition: border-color 0.3s ease, transform 0.3s var(--fd-ease), box-shadow 0.3s ease;
}

.fd-member::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--fd-copper-line);
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.fd-member:hover {
  border-color: var(--fd-copper-line);
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}

.fd-member:hover::after {
  opacity: 1;
}

.fd-member:focus-visible {
  outline: 2px solid var(--fd-copper);
  outline-offset: 3px;
}

.fd-member .fd-ticks {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fd-member:hover .fd-ticks {
  opacity: 1;
}

/* Arch portrait — the member-badge crop. */
.fd-member-frame {
  display: block;
  width: 68%;
  aspect-ratio: 4 / 5;
  margin: 0 auto 18px;
  border-radius: 999px 999px 0 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--fd-copper-line);
  outline: 1px solid var(--fd-line);
  outline-offset: 5px;
}

.fd-member-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.08) saturate(1.04);
  transition: transform 0.5s var(--fd-ease);
}

.fd-member:hover .fd-member-frame img {
  transform: scale(1.05);
}

/* The same light sweep grazes the badge portrait. */
.fd-member-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.25) 50%, transparent 60%);
  transform: translateX(-130%);
  transition: transform 0.7s var(--fd-ease);
  pointer-events: none;
}

.fd-member:hover .fd-member-frame::after {
  transform: translateX(130%);
}

.fd-member h3 {
  margin: 0;
  font-family: var(--fd-display);
  font-weight: 400;
  font-size: 21px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fd-member p {
  margin: 7px 0 0;
  font-family: var(--fd-serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--fd-muted);
}

/* ── Classes ────────────────────────────────────────────────────────────── */
.fd-classes {
  border-top: 1px solid var(--fd-line);
}

.fd-class {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 22px 14px;
  border-bottom: 1px solid var(--fd-line);
  overflow: hidden;
  transition: background 0.3s ease, padding 0.3s var(--fd-ease);
}

.fd-class::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--fd-stripe-v);
  opacity: 0;
  transform: translateX(-7px);
  transition: transform 0.3s var(--fd-ease), opacity 0.25s ease;
}

.fd-class:hover {
  background: rgba(196, 127, 63, 0.07);
  padding-left: 28px;
}

.fd-class:hover::before {
  opacity: 1;
  transform: translateX(0);
}

.fd-class:focus-visible {
  outline: 2px solid var(--fd-copper);
  outline-offset: -2px;
}

.fd-class b {
  font-family: var(--fd-display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fd-class:hover b {
  color: var(--fd-copper-lift);
}

.fd-class-when {
  display: block;
  margin-top: 4px;
  font-family: var(--fd-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--fd-muted);
}

.fd-class-seats {
  font-family: var(--fd-display);
  font-size: 15.5px;
  letter-spacing: 0.09em;
  color: var(--fd-copper);
  white-space: nowrap;
}

.fd-class-seats.is-full {
  color: var(--fd-muted);
}

/* ── Visit ──────────────────────────────────────────────────────────────── */
.fd-visit {
  position: relative;
  padding: 118px 0 122px;
  text-align: center;
  background:
    radial-gradient(ellipse 62% 68% at 50% 118%, rgba(196, 127, 63, 0.13), transparent),
    var(--fd-bg-deep);
}

.fd-visit .fd-crest {
  justify-content: center;
  margin-bottom: 20px;
}

.fd-visit-eyebrow {
  justify-content: center;
  margin-bottom: 16px;
}

.fd-visit-eyebrow::before {
  display: none;
}

.fd-visit h2 {
  margin: 0 0 24px;
  font-family: var(--fd-display);
  font-weight: 400;
  font-size: clamp(46px, 6.4vw, 86px);
  line-height: 0.92;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  text-wrap: balance;
}

.fd-visit-info {
  max-width: 60ch;
  margin: 0 auto 38px;
  color: var(--fd-muted);
  font-size: 15px;
}

.fd-visit-info p {
  margin: 0 0 7px;
}

.fd-visit-info a {
  color: var(--fd-copper);
  border-bottom: 1px dotted var(--fd-copper-line);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.fd-visit-info a:hover {
  color: var(--fd-copper-lift);
  border-bottom-color: var(--fd-copper);
}

.fd-visit-info a:focus-visible {
  outline: 2px solid var(--fd-copper);
  outline-offset: 3px;
}

/* Quiet caption so the outlet links below read as locations, not mystery
   links. */
.fd-outlets-label {
  margin: 44px 0 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(159, 168, 150, 0.8);
}

.fd-outlets {
  list-style: none;
  margin: 12px auto 0;
  padding: 0;
  font-size: 13.5px;
  font-style: italic;
  color: var(--fd-muted);
}

.fd-outlets li {
  margin-bottom: 7px;
}

.fd-outlets a {
  transition: color 0.2s ease;
}

.fd-outlets a:hover {
  color: var(--fd-copper);
}

.fd-outlets a:focus-visible {
  outline: 2px solid var(--fd-copper);
  outline-offset: 3px;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.fd-footer {
  border-top: 1px solid var(--fd-line);
  padding: 30px 0 42px;
  color: var(--fd-muted);
  font-size: 12.5px;
}

.fd-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.fd-footer a {
  transition: color 0.2s ease;
}

.fd-footer a:hover {
  color: var(--fd-copper);
}

.fd-footer a:focus-visible {
  outline: 2px solid var(--fd-copper);
  outline-offset: 3px;
}

.fd-footer-social {
  display: flex;
  gap: 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ── View-all control (shared markup) tuned to the room ─────────────────── */
.fade-theme .theme-view-more {
  font-family: var(--fd-serif);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fade-theme .theme-view-more:hover {
  color: var(--fd-copper);
}

/* ── Motion ─────────────────────────────────────────────────────────────── */
.tfx .fade-theme [data-reveal] {
  opacity: 0;
  translate: 0 28px;
  transition: opacity 0.7s ease, translate 0.7s var(--fd-ease);
}

.tfx .fade-theme [data-reveal].is-in {
  opacity: 1;
  translate: 0 0;
}

.fade-theme .fd-hero-copy > * {
  animation: fd-rise 0.9s var(--fd-ease) backwards;
}

.fade-theme .fd-hero-copy > *:nth-child(2) { animation-delay: 0.1s; }
.fade-theme .fd-hero-copy > *:nth-child(3) { animation-delay: 0.2s; }
.fade-theme .fd-hero-copy > *:nth-child(4) { animation-delay: 0.3s; }
.fade-theme .fd-hero-copy > *:nth-child(5) { animation-delay: 0.42s; }

@keyframes fd-rise {
  from {
    opacity: 0;
    translate: 0 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fade-theme .fd-hero-copy > * {
    animation: none;
  }

  .tfx .fade-theme [data-reveal] {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }

  .fade-theme .fd-btn,
  .fade-theme .fd-btn::before,
  .fade-theme .fd-row,
  .fade-theme .fd-row::before,
  .fade-theme .fd-class,
  .fade-theme .fd-class::before {
    transition: none;
  }
}

/* ── Mobile booking bar ─────────────────────────────────────────────────── */
.fd-mobile-bar {
  display: none;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .fd-hero-grid {
    gap: 36px;
  }

  .fd-hero h1 {
    font-size: calc(clamp(56px, 8vw, 96px) * var(--tx-scale, 1));
  }

  .fd-hero-frame {
    height: min(60vh, 520px);
  }

  .fd-gallery {
    gap: 18px;
  }

  .fd-section {
    padding: 96px 0;
  }
}

@media (max-width: 860px) {
  .fd-nav-links,
  .fd-nav > .fd-btn {
    display: none;
  }

  .fd-hero {
    padding: 64px 0 84px;
  }

  .fd-hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .fd-hero-frame {
    height: min(52vh, 440px);
  }

  .fd-pole {
    left: auto;
    right: -18px;
  }

  .fd-hero-mark {
    font-size: clamp(240px, 60vw, 380px);
    top: -3%;
    right: -18%;
  }

  .fd-section {
    padding: 76px 0;
  }

  .fd-sec-head {
    margin-bottom: 40px;
  }

  .fd-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .fd-team {
    gap: 18px;
  }

  .fd-member {
    flex-basis: 172px;
    max-width: 224px;
  }

  .fd-row-book {
    display: none;
  }
}

@media (max-width: 720px) {
  .fd-mobile-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    justify-content: center;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(10, 16, 13, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--fd-line);
  }

  .fd-mobile-bar::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 7px;
    background: var(--fd-stripe);
  }

  .fd-mobile-bar .fd-btn {
    width: 100%;
  }

  .fd-footer {
    padding-bottom: 118px;
  }
}

@media (max-width: 640px) {
  .fade-theme {
    font-size: 15px;
  }

  .fd-hero h1 {
    font-size: calc(clamp(48px, 14vw, 72px) * var(--tx-scale, 1));
  }

  .fd-hero-motto {
    font-size: 15.5px;
  }

  .fd-hero-frame {
    padding: 12px;
    height: min(48vh, 380px);
  }

  .fd-crest-line {
    width: 38px;
  }

  .fd-marquee em {
    font-size: 13.5px;
    padding-left: 24px;
  }

  .fd-marquee em::after {
    margin-left: 24px;
  }

  .fd-section {
    padding: 64px 0;
  }

  .fd-sec-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .fd-sec-no {
    order: -1;
  }

  .fd-row {
    padding: 20px 10px;
    gap: 12px;
  }

  .fd-row:hover {
    padding-left: 20px;
  }

  .fd-row-name {
    font-size: 19px;
  }

  .fd-row-price {
    font-size: 18px;
  }

  .fd-gallery {
    gap: 14px;
  }

  .fd-gallery figure {
    padding: 8px;
  }

  .fd-team {
    gap: 14px;
  }

  .fd-member {
    flex: 0 1 calc(50% - 7px);
    max-width: none;
    padding: 22px 14px 20px;
  }

  .fd-member-frame {
    width: 78%;
  }

  .fd-visit {
    padding: 86px 0 92px;
  }

  .fd-footer-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Themed backdrop: shears, combs and barber-pole stripes ──────────────────────────────
   A page-wide motif tile pinned behind every section, so the canvas reads as
   shears, combs and barber-pole stripes the way the seasonal themes carry their own festive
   backdrop. `::before` is left to the existing colour wash; this rides on
   `::after` at z-index -1, which keeps it above the page background but under
   every in-flow section without having to restack the theme's own children.
   `isolation` makes the root a stacking context so the -1 layer stays inside it
   (above the root's own background) instead of sinking behind the page. */
.fade-theme {
  isolation: isolate;
}

.fade-theme::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='118'%20height='118'%3E%20%3Cg%20fill='none'%20stroke='%23efe6d4'%20stroke-opacity='.085'%20stroke-width='1.2'%20stroke-linecap='round'%3E%20%3Ccircle%20cx='20'%20cy='34'%20r='5'/%3E%3Ccircle%20cx='20'%20cy='48'%20r='5'/%3E%20%3Cpath%20d='M24%2032l30-16M24%2050l30%2016M40%2041l14%208M40%2041l14-8'/%3E%20%3Crect%20x='68'%20y='76'%20width='34'%20height='9'%20rx='2'/%3E%20%3Cpath%20d='M72%2085v9M78%2085v9M84%2085v9M90%2085v9M96%2085v9'/%3E%20%3Cpath%20d='M84%2018l10%2010M92%2014l10%2010'%20stroke-opacity='.05'/%3E%20%3C/g%3E%3C/svg%3E");
  background-size: 118px 118px;
  background-repeat: repeat;
}

/* ── Ambient deco: copper dust, stripe slivers, tools of the trade ─────────
   Fixed full-viewport layer at z-index -1 inside the isolated root (see the
   backdrop note above): lamplit dust above the bottle-green vignette floor,
   under every in-flow section, so the copy never fights it. Base transforms
   use `transform`; keyframes animate the independent `translate`/`rotate`
   properties so the two compose. */
.fd-deco {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* Copper dust caught in the lamplight, climbing slowly. */
.fd-mote {
  position: absolute;
  bottom: -8px;
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: rgba(196, 127, 63, 0.55);
  box-shadow: 0 0 8px 1px rgba(196, 127, 63, 0.3);
  opacity: 0;
  animation: fd-mote-rise linear infinite;
}

.fd-mote--1  { left: 4%;  animation-duration: 21s; }
.fd-mote--2  { left: 12%; width: 2.5px; height: 2.5px; animation-duration: 27s; animation-delay: -9s; }
.fd-mote--3  { left: 21%; animation-duration: 23s; animation-delay: -14s; background: rgba(239, 230, 212, 0.4); box-shadow: 0 0 8px 1px rgba(239, 230, 212, 0.2); }
.fd-mote--4  { left: 30%; width: 3px; height: 3px; animation-duration: 29s; animation-delay: -4s; }
.fd-mote--5  { left: 39%; animation-duration: 24s; animation-delay: -18s; }
.fd-mote--6  { left: 47%; width: 2.5px; height: 2.5px; animation-duration: 31s; animation-delay: -11s; background: rgba(239, 230, 212, 0.4); box-shadow: 0 0 8px 1px rgba(239, 230, 212, 0.2); }
.fd-mote--7  { left: 55%; animation-duration: 22s; animation-delay: -6s; }
.fd-mote--8  { left: 63%; width: 3px; height: 3px; animation-duration: 28s; animation-delay: -16s; }
.fd-mote--9  { left: 71%; animation-duration: 25s; animation-delay: -2s; }
.fd-mote--10 { left: 79%; width: 2.5px; height: 2.5px; animation-duration: 30s; animation-delay: -20s; background: rgba(239, 230, 212, 0.4); box-shadow: 0 0 8px 1px rgba(239, 230, 212, 0.2); }
.fd-mote--11 { left: 86%; animation-duration: 23.5s; animation-delay: -13s; }
.fd-mote--12 { left: 93%; width: 3px; height: 3px; animation-duration: 26s; animation-delay: -7s; }
.fd-mote--13 { left: 26%; width: 2.5px; height: 2.5px; animation-duration: 32s; animation-delay: -22s; }
.fd-mote--14 { left: 68%; animation-duration: 27.5s; animation-delay: -17s; }

@keyframes fd-mote-rise {
  0%   { translate: 0 0; opacity: 0; }
  12%  { opacity: 0.7; }
  50%  { translate: 12px -50vh; opacity: 0.3; }
  85%  { opacity: 0.55; }
  100% { translate: -8px -106vh; opacity: 0; }
}

/* Barber-pole slivers ghosting up the page edges. */
.fd-sliver {
  position: absolute;
  top: -20vh;
  width: 7px;
  height: 140vh;
  background: var(--fd-stripe);
  background-size: 100% 120px;
  opacity: 0.045;
  animation: fd-sliver-slide 32s linear infinite;
}

.fd-sliver--l { left: 2.5vw; }
.fd-sliver--r { right: 2.5vw; animation-duration: 40s; animation-delay: -16s; opacity: 0.035; }

@keyframes fd-sliver-slide {
  from { background-position-y: 0; }
  to   { background-position-y: -240px; }
}

/* Line-art tools hung in the gloom, swaying with the room. */
.fd-tool {
  position: absolute;
  color: rgba(239, 230, 212, 0.08);
  animation: fd-tool-sway ease-in-out infinite;
}

.fd-tool--shears { top: 14%; right: 6%; width: 150px; transform: rotate(-10deg); animation-duration: 26s; }
.fd-tool--comb   { bottom: 14%; left: 5%; width: 160px; color: rgba(196, 127, 63, 0.09); transform: rotate(8deg); animation-duration: 31s; animation-delay: -12s; }
.fd-tool--razor  { top: 52%; left: 8%; width: 120px; transform: rotate(-16deg); animation-duration: 23s; animation-delay: -6s; }

@keyframes fd-tool-sway {
  0%, 100% { translate: 0 0; rotate: -2deg; }
  50%      { translate: 8px -12px; rotate: 3deg; }
}

/* ── Large anchored ornaments: barber pole, bulb strings, shave kit ── */

/* Wall-bracket barber pole hung off the top-right edge. */
.fd-barberpole {
  position: absolute;
  top: -8px;
  right: -6px;
  width: 110px;
  opacity: 0.9;
  filter: drop-shadow(0 8px 22px rgba(196, 127, 63, 0.3));
  transform-origin: 90% 0;
  animation: fd-orn-sway 8s ease-in-out infinite;
}

/* Drooping Edison bulb strings along the top band. */
.fd-bulbs {
  position: absolute;
  top: -4px;
  width: 260px;
  opacity: 0.8;
  transform-origin: 50% 0;
  animation: fd-orn-sway 10s ease-in-out infinite;
}

.fd-bulbs--l { left: -30px; }
.fd-bulbs--r { right: 14%; width: 210px; opacity: 0.65; animation-delay: -4.5s; }

/* Shave-kit still life shelved in the bottom-left corner. */
.fd-shavekit {
  position: absolute;
  bottom: 12px;
  left: -14px;
  width: 230px;
  opacity: 0.6;
  animation: fd-orn-bob 13s ease-in-out infinite;
}

@keyframes fd-orn-sway {
  0%, 100% { rotate: -2.5deg; }
  50%      { rotate: 2.5deg; }
}

@keyframes fd-orn-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}

@media (max-width: 720px) {
  .fd-barberpole { width: 74px; }
  .fd-bulbs--l { width: 180px; }
  .fd-bulbs--r,
  .fd-shavekit { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fd-deco * {
    animation: none;
  }
}