/* =========================================================================
   FRINGE BEAUTY STUDIO — Editorial / bridal palette
   Adapted from Salon Laveau's editorial newspaper system.
   Whiter, brighter, more bridal.
   ========================================================================= */

:root {
  --paper:        #fdfaf4;          /* bright bridal cream */
  --paper-2:      #f4ede0;          /* card background */
  --paper-3:      #ece4d3;          /* deeper hairline cards */
  --ink:          #1f1c17;          /* warm near-black */
  --ink-soft:     #3d362c;          /* secondary text */
  --ink-muted:    #7d7363;          /* tertiary / captions */
  --rule:         #8a7560;          /* warm taupe hairline */
  --rule-soft:    rgba(31,28,23,0.10);
  --accent:       #b89a72;          /* soft champagne */
  --hover:        #d4b896;          /* lighter champagne hover */
  --invert-bg:    #2a221a;          /* warm dark espresso */
  --invert-fg:    #fdfaf4;
  --invert-muted: rgba(253,250,244,0.6);

  --font-display: 'Cormorant Garamond', 'Playfair Display', 'Bodoni 72', 'Didot', 'Times New Roman', serif;
  --font-script:  'Pinyon Script', 'Allura', 'Cormorant Garamond', cursive;
  --font-body:    'Lora', 'Georgia', 'Times New Roman', serif;
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --max:          1240px;
  --gutter:       clamp(1.25rem, 4vw, 3rem);
}

/* Reset + base ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--hover); }
button { font-family: inherit; cursor: pointer; }

/* Subtle paper texture via SVG noise */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.025 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity: .35;
}
body > * { position: relative; z-index: 1; }

::selection { background: var(--ink); color: var(--paper); }

/* Containers ------------------------------------------------------------- */
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* Masthead --------------------------------------------------------------- */
.masthead {
  border-top: 3px solid var(--rule);
  border-bottom: 1px solid var(--rule-soft);
  padding: 1rem 0;
  background: var(--paper);
}
.masthead-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}
.masthead-meta {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.masthead-meta--right { text-align: right; }

/* Fringe masthead — script "fringe" over sans-stack BEAUTY STUDIO */
.masthead-title {
  text-align: center;
  line-height: 1;
  color: var(--ink);
}
.masthead-title a { display: inline-flex; flex-direction: column; align-items: center; gap: 0.1em; color: inherit; }
.masthead-title a:hover { color: var(--ink); }
.masthead-title .brand-script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.masthead-title .brand-stack {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(9px, 1.2vw, 11px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.1em;
}

/* Image-based masthead logo (the trimmed FRINGE BEAUTY STUDIO wordmark
   PNG). Sized to feel like a wordmark, not a banner. */
.masthead-logo {
  display: block;
  height: 38px;
  width: auto;
  max-width: 100%;
}
/* Monogram-only variant — square mark, sized for a header. */
.masthead-logo--mark {
  height: clamp(56px, 6vw, 72px);
  width: auto;
}
/* Full lockup variant — monogram + wordmark + tagline stacked vertically.
   Sized to fit a masthead without dominating the page. */
.masthead-logo--lockup {
  height: auto;
  width: clamp(120px, 12vw, 180px);
}
@media (max-width: 640px) {
  .masthead-logo { height: 28px; }
  .masthead-logo--mark { height: 48px; }
  .masthead-logo--lockup { width: 110px; height: auto; }
}

@media (max-width: 640px) {
  /* Compact mobile masthead — drop the city/appointment captions so the
     hero shows up much sooner on first load. Shrink the script logo too. */
  .masthead { padding: 0.55rem 0 0.6rem; }
  .masthead-inner {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: center;
  }
  .masthead-meta,
  .masthead-meta--right { display: none; }
  .masthead-title .brand-script { font-size: 2.4rem; }
  .masthead-title .brand-stack { font-size: 8.5px; letter-spacing: 0.36em; }
}

/* Nav -------------------------------------------------------------------- */
.nav {
  border-bottom: 1px solid var(--rule-soft);
  background: var(--paper);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 2.6rem);
  flex-wrap: wrap;
  padding: 0.7rem var(--gutter);
}
/* On phones, keep every nav option visible — but shrink the font and
   tighten letter-spacing so the six items wrap into two compact rows
   (~3 per row) instead of five. No hidden scrolling, no hamburger. */
@media (max-width: 640px) {
  .nav-inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem 1rem;
    padding: 0.55rem var(--gutter) 0.6rem;
  }
  .nav a {
    font-size: 10.5px;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }
}
.nav a {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.nav a:hover, .nav a[aria-current="page"] {
  border-color: var(--ink);
  color: var(--ink);
}

/* Sections --------------------------------------------------------------- */
section { padding: clamp(1.75rem, 3.5vw, 3rem) 0; }
section + section { border-top: 1px solid var(--rule-soft); }
.section-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--accent);
  margin-bottom: 1.1rem;
}
.kicker {
  font-family: 'Bebas Neue', 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

/* Headlines -------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.08; color: var(--ink); }
h1 { font-size: clamp(2.6rem, 6.5vw, 5rem); letter-spacing: -0.005em; }
h2 { font-size: clamp(2rem, 4.5vw, 3.6rem); letter-spacing: -0.005em; }
h3 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
h4 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); letter-spacing: 0.02em; }

p { margin-bottom: 1rem; }
p.lead {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Drop cap */
.dropcap::first-letter {
  font-family: var(--font-display);
  float: left;
  font-size: 4.5em;
  line-height: 0.85;
  padding: 0.1em 0.1em 0 0;
  font-weight: 400;
  color: var(--ink);
}

/* Hero ------------------------------------------------------------------- */
.hero {
  padding: clamp(1.75rem, 4vw, 3.25rem) 0 clamp(2rem, 4vw, 3.25rem);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
/* On mobile, push the hero image ABOVE the text so something visual is
   visible the moment the page loads. Above 800px the grid is two columns
   and the natural source order (text-left, image-right) takes over. */
@media (max-width: 799px) {
  .hero-grid > figure.hero-image { order: -1; }
}
@media (min-width: 800px) {
  .hero-grid { grid-template-columns: 1.15fr 1fr; }
}
.hero-headline {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
}
.hero-headline em { font-style: italic; }
.hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-soft);
  font-style: italic;
  max-width: 42ch;
}
.hero-image {
  position: relative;
  aspect-ratio: 4/4.6;
  max-height: 540px;
  background: var(--paper-2);
  overflow: hidden;
}
@media (min-width: 800px) {
  .hero-image { aspect-ratio: 1/1; max-height: 520px; }
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-image figcaption {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  color: var(--paper);
  padding: 1.5rem 1.25rem 0.85rem;
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
}

/* Article columns -------------------------------------------------------- */
.article-cols {
  columns: 2;
  column-gap: 2.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
}
@media (max-width: 720px) { .article-cols { columns: 1; } }
.article-cols p { break-inside: avoid; orphans: 3; widows: 3; }

/* Two-column intro split */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
@media (min-width: 800px) {
  .split { grid-template-columns: 1fr 1.4fr; }
  .split-narrow { grid-template-columns: 1fr 2fr; }
}

/* Stylist cards ---------------------------------------------------------- */
.stylists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.6rem;
  margin-top: 2rem;
}
.stylist {
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.stylist:hover { transform: translateY(-3px); box-shadow: 0 12px 40px -20px rgba(31,28,23,0.3); }
.stylist-img {
  aspect-ratio: 4/5;
  background: var(--paper-2);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule-soft);
}
.stylist-img img { width: 100%; height: 100%; object-fit: cover; }
.stylist-body { padding: 1.1rem 1.1rem 1.25rem; flex: 1; display: flex; flex-direction: column; }
.stylist-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-style: italic;
  margin-bottom: 0.2rem;
  color: var(--ink);
  line-height: 1.1;
}
.stylist-tagline {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.85rem;
}
.stylist-services {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 1rem;
  flex: 1;
}
.stylist-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  border-top: 1px solid var(--rule-soft);
  padding-top: 0.85rem;
  margin-top: auto;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.stylist-cta a { color: var(--ink); border-bottom: 1px solid transparent; }
.stylist-cta a:hover { border-color: var(--ink); }
.stylist-cta .book-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.7rem 1rem;
  border: 1px solid var(--ink);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  text-align: center;
  width: 100%;
}
.stylist-cta .book-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.stylist-cta > a:not(.book-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.25rem 0.5rem;
}
.stylist-cta > a:not(.book-btn):hover {
  color: var(--ink);
  border-color: transparent;
}
.stylist-tag {
  position: absolute; top: 0.85rem; right: 0.85rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.18em;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--ink);
  z-index: 3;
}

/* FEATURE rows — large editorial side-by-side (used on team page bios) */
.feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
@media (min-width: 800px) {
  .feature { grid-template-columns: 1fr 1.15fr; }
  .feature.reverse { grid-template-columns: 1.15fr 1fr; }
  .feature.reverse .feature-img { order: 2; }
}
.feature-img {
  aspect-ratio: 4/5;
  background: var(--paper-2);
  overflow: hidden;
  border: 1px solid var(--rule-soft);
}
.feature-img img { width: 100%; height: 100%; object-fit: cover; }
/* Bridal-collage variant — the source AVIF is 5 rows of tightly-framed
   photos. Centering the crop produced two ugly half-row peeks. Anchor
   the image to the top and shorten the container by ~one row so the
   bottom row is cleanly cut off and the visible area is exactly 4 rows. */
.feature-img--full {
  aspect-ratio: 5 / 6;
  background: var(--paper-2);
  overflow: hidden;
  border: 1px solid var(--rule-soft);
}
.feature-img--full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.feature-body h2 {
  font-style: italic;
  margin-bottom: 0.5rem;
}
.feature-body h4 {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.feature-body p { color: var(--ink-soft); }
.feature-body p strong { color: var(--ink); font-weight: 500; }

.feature-list {
  list-style: none;
  margin: 1rem 0 1.25rem;
  padding: 0;
}
.feature-list li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.25rem;
  border-bottom: 1px dashed var(--rule-soft);
  color: var(--ink-soft);
}
.feature-list li:last-child { border-bottom: 0; }
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 0.55rem;
  height: 1px;
  background: var(--accent);
}

/* Services list (single-column row layout) ------------------------------ */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
  margin-top: 2rem;
}
.service {
  padding: 1.5rem 1.5rem 1.5rem 0;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.service:last-child { border-bottom: 1px solid var(--rule-soft); }
.service-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink);
}
.service-desc {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin-top: 0.25rem;
}
.service-price {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Services category cards */
.service-cats {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (min-width: 720px) { .service-cats { grid-template-columns: repeat(3, 1fr); } }
.service-cat {
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  padding: 1.75rem 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.service-cat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--rule-soft);
}
.service-cat-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--ink);
  margin: 0;
}
.service-cat-meta {
  font-family: 'Bebas Neue','Inter',system-ui,sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--accent);
  white-space: nowrap;
}
.service-cat ul {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.service-cat li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.85rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px dashed rgba(31,28,23,0.08);
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ink-soft);
}
.service-cat li:last-child { border-bottom: 0; }
.service-cat li strong {
  color: var(--ink);
  font-weight: 500;
}
.service-cat li .price {
  color: var(--accent);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.service-cat-foot {
  margin-top: 1.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-muted);
}

/* Per-stylist sub-section title used on services page */
.stylist-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  margin: 2.5rem 0 1.25rem;
  border-bottom: 1px solid var(--rule-soft);
}
.stylist-section-head h3 {
  font-style: italic;
  margin: 0;
}
.stylist-section-head .who {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.95rem 1.6rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
}
.btn:hover { background: var(--rule); color: var(--paper); border-color: var(--rule); }
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.5rem; }
.btn-row.center { justify-content: center; }

/* Pull quote ------------------------------------------------------------- */
.pull-quote {
  border-top: 4px double var(--ink);
  border-bottom: 4px double var(--ink);
  padding: 1.5rem 0;
  margin: 0;
  text-align: center;
}
.pull-quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.2;
  color: var(--ink);
  max-width: 24ch;
  margin: 0 auto;
}
.pull-quote cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Inverted (dark) sections ---------------------------------------------- */
.invert {
  background: var(--invert-bg);
  color: var(--invert-fg);
}
.invert h1, .invert h2, .invert h3, .invert h4 { color: var(--invert-fg); }
.invert p { color: rgba(253,250,244,0.85); }
.invert .section-label { color: rgba(253,250,244,0.6); border-color: var(--invert-fg); }
.invert .btn { border-color: var(--invert-fg); color: var(--invert-fg); }
.invert .btn:hover { background: var(--invert-fg); color: var(--invert-bg); }
.invert .btn-primary { background: var(--invert-fg); color: var(--invert-bg); }
.invert .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--invert-bg); }
.invert .pull-quote { border-color: var(--invert-fg); }
.invert .pull-quote blockquote { color: var(--invert-fg); }
.invert .feature-list li { color: rgba(253,250,244,0.8); border-bottom-color: rgba(253,250,244,0.12); }
.invert .feature-list li::before { background: var(--hover); }

/* Gallery strip ---------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.5rem;
  margin-top: 2rem;
}
.gallery-item {
  aspect-ratio: 1/1;
  background: var(--paper-2);
  overflow: hidden;
  position: relative;
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.gallery-item:hover img { transform: scale(1.05); }

/* Team CTA card on home -------------------------------------------------- */
.team-cta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--rule-soft);
  background: var(--paper-2);
  color: var(--ink);
  overflow: hidden;
  margin-top: 1.5rem;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.team-cta:hover {
  box-shadow: 0 16px 48px -22px rgba(31,28,23,0.25);
  color: var(--ink);
  transform: translateY(-2px);
}
@media (min-width: 720px) {
  .team-cta { grid-template-columns: 0.7fr 1.3fr; align-items: stretch; }
}
.team-cta-stat {
  background: var(--invert-bg);
  color: var(--invert-fg);
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.75rem, 4vw, 2.75rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  min-height: 240px;
}
.team-cta-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(5rem, 12vw, 8rem);
  line-height: 0.9;
  color: var(--invert-fg);
}
.team-cta-num-label {
  font-family: 'Bebas Neue','Inter',system-ui,sans-serif;
  font-size: clamp(0.85rem, 1.3vw, 1rem);
  letter-spacing: 0.22em;
  color: rgba(253,250,244,0.65);
  line-height: 1.3;
}
.team-cta-body {
  padding: clamp(1.75rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85rem;
}
.team-cta-body h3 { margin: 0; }
.team-cta-body .lead { margin: 0; font-size: 1.05rem; }
/* Team photo on the home-page Meet-the-Team card. Replaces the dark
   "07 stylists" stat panel — the team group photo IS the visual. */
.team-cta-photo {
  background: var(--paper-2);
  overflow: hidden;
  min-height: 280px;
}
.team-cta-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 719px) {
  .team-cta-photo { aspect-ratio: 4 / 3; min-height: 0; }
}

/* About-section studio photo, sits under the italic tagline on the left split.
   Landscape crop anchored to the bottom of the source photo so the editorial
   product flatlay (boots, Goldwell box, business card) frames into view and
   the column height matches the right column's text content. */
.about-photo {
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
}

/* Review marquee --------------------------------------------------------- */
.review-marquee {
  overflow: hidden;
  padding: 0.85rem 0;
  -webkit-mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
          mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
}
.review-marquee + .review-marquee { padding-top: 0; margin-top: 0.5rem; }
.review-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  padding-left: var(--gutter);
  animation: review-scroll-left 75s linear infinite;
  will-change: transform;
}
.review-track--reverse {
  animation: review-scroll-right 85s linear infinite;
}
.review-marquee:hover .review-track { animation-play-state: paused; }
@keyframes review-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes review-scroll-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.review-card {
  flex: 0 0 320px;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  padding: 1.5rem 1.35rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-height: 220px;
}
.review-stars {
  color: var(--accent);
  letter-spacing: 0.12em;
  font-size: 0.9rem;
}
.review-body {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--ink);
  flex: 1;
  margin: 0;
}
.review-meta {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
.review-meta strong { color: var(--accent); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .review-track { animation: none; flex-wrap: wrap; width: 100%; padding: 0 var(--gutter); }
  .review-marquee { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 600px) {
  .review-card {
    flex: 0 0 62vw;
    max-width: 248px;
    min-height: 168px;
    padding: 1rem 0.95rem 0.85rem;
    gap: 0.55rem;
  }
  .review-body { font-size: 0.92rem; line-height: 1.4; }
  .review-stars { font-size: 0.8rem; }
  .review-meta { font-size: 10px; letter-spacing: 0.12em; }
  .review-marquee { padding: 0.5rem 0; }
  .review-marquee + .review-marquee { margin-top: 0.65rem; }
  .review-track { animation-duration: 55s; gap: 0.65rem; }
  .review-track--reverse { animation-duration: 65s; }
}

/* Contact / info grid ---------------------------------------------------- */
.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  margin-top: 2rem;
}
@media (min-width: 560px) {
  .info-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .info-grid { grid-template-columns: repeat(3, 1fr); }
}
.info-cell {
  background: var(--paper);
  padding: 2rem 1.5rem;
}
.info-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
}
.info-value {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--ink);
}
.info-value a { border-bottom: 1px solid transparent; }
.info-value a:hover { border-color: var(--ink); }

/* Membership cards ------------------------------------------------------- */
.membership-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (min-width: 800px) {
  .membership-grid { grid-template-columns: repeat(3, 1fr); }
}
.member-card {
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  padding: 2rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.member-card.featured {
  background: var(--invert-bg);
  color: var(--invert-fg);
  border-color: var(--invert-bg);
}
.member-card.featured h3,
.member-card.featured .member-price { color: var(--invert-fg); }
.member-card.featured .member-tier,
.member-card.featured .member-sub { color: rgba(253,250,244,0.7); }
.member-card.featured .feature-list li { color: rgba(253,250,244,0.85); border-bottom-color: rgba(253,250,244,0.15); }
.member-card.featured .feature-list li::before { background: var(--hover); }

.member-tier {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.member-card h3 {
  font-style: italic;
  font-size: 1.5rem;
  margin-bottom: 0.85rem;
}
.member-price {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
}
.member-sub {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1.25rem;
}
.member-card .btn { margin-top: auto; align-self: stretch; text-align: center; }

/* FAQ - using <details> -------------------------------------------------- */
.faq {
  border-top: 1px solid var(--rule-soft);
  margin-top: 2rem;
}
.faq details {
  border-bottom: 1px solid var(--rule-soft);
  padding: 1.25rem 0;
}
.faq details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink);
  gap: 1rem;
}
.faq details > summary::-webkit-details-marker { display: none; }
.faq details > summary::after {
  content: "+";
  font-family: var(--font-ui);
  font-size: 1.2rem;
  color: var(--accent);
  transition: transform 0.2s ease;
}
.faq details[open] > summary::after {
  content: "−";
}
.faq details p {
  margin-top: 0.85rem;
  color: var(--ink-soft);
}

/* Bridal portfolio grid (Supabase-fed) ---------------------------------- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;
  margin-top: 2rem;
}
.portfolio-grid .portfolio-item {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  cursor: zoom-in;
}
.portfolio-grid .portfolio-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.portfolio-grid .portfolio-item:hover img { transform: scale(1.04); }

/* Bridal portfolio (column layout) -------------------------------------- */
.portfolio {
  columns: 3;
  column-gap: 1rem;
  margin-top: 2rem;
}
@media (max-width: 900px) { .portfolio { columns: 2; } }
@media (max-width: 540px) { .portfolio { columns: 1; } }
.portfolio figure {
  break-inside: avoid;
  margin: 0 0 1rem 0;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  overflow: hidden;
}
.portfolio img {
  width: 100%;
  display: block;
  height: auto;
  transition: transform 0.4s ease;
}
.portfolio figure:hover img { transform: scale(1.03); }
.portfolio figcaption {
  padding: 0.65rem 0.85rem;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.portfolio figcaption strong { color: var(--ink); font-weight: 600; }

/* Lightbox (for portfolio) */
.lightbox {
  position: fixed; inset: 0; background: rgba(31,28,23,0.92);
  display: none; align-items: center; justify-content: center;
  z-index: 9000; padding: 2rem;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; }
.lightbox-close {
  position: absolute; top: 1rem; right: 1.25rem;
  background: transparent; border: 1px solid var(--invert-fg);
  color: var(--invert-fg); width: 40px; height: 40px;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}

/* Hero band (used on extensions / bridal / memberships / policies) ------ */
.hero-band {
  position: relative;
  padding: clamp(4rem, 9vw, 7rem) 0;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule-soft);
  overflow: hidden;
}
.hero-band-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.85;
}
.hero-band-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(253,250,244,0.5) 0%, rgba(253,250,244,0.78) 100%);
}
.hero-band-inner { position: relative; }

/* Footer ----------------------------------------------------------------- */
footer.foot {
  background: var(--invert-bg);
  color: var(--invert-fg);
  border-top: 1px solid var(--rule);
  padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
  font-family: var(--font-ui);
  font-size: 13px;
}
.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.foot h4 {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: var(--invert-muted);
}
.foot a { color: var(--invert-fg); border-bottom: 1px solid transparent; }
.foot a:hover { border-color: var(--invert-fg); }
.foot ul { list-style: none; }
.foot ul li { margin-bottom: 0.5rem; }
.foot-bottom {
  border-top: 1px solid rgba(253,250,244,0.15);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--invert-muted);
}
.foot-mast {
  display: inline-flex; flex-direction: column; line-height: 1;
  margin-bottom: 0.75rem;
}
.foot-mast .brand-script {
  font-family: var(--font-script);
  font-size: 2.6rem;
  color: var(--invert-fg);
}
.foot-mast .brand-stack {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(253,250,244,0.6);
  margin-top: 0.1em;
}
.foot-social { display: flex; gap: 0.85rem; margin-top: 1rem; }
.foot-social a { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border: 1px solid rgba(253,250,244,0.25); border-radius: 0; }
.foot-social svg { width: 14px; height: 14px; }
.foot-credit {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(253,250,244,0.08);
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(253,250,244,0.4);
}
.foot-credit a {
  color: rgba(253,250,244,0.55);
  border-bottom: 1px solid rgba(253,250,244,0.18);
  padding-bottom: 1px;
}
.foot-credit a:hover { color: var(--invert-fg); border-color: var(--invert-fg); }

/* Chat widget hooks — keep generous z-index so widget appears above all */
.fringe-chat { z-index: 9999; }

/* Utility ---------------------------------------------------------------- */
.center { text-align: center; }
.muted  { color: var(--ink-muted); }
.italic { font-style: italic; }
.serif  { font-family: var(--font-display); }
.sans   { font-family: var(--font-ui); }
.cap    { letter-spacing: 0.18em; text-transform: uppercase; font-size: 11px; font-weight: 600; }
.divider { border: 0; border-top: 1px solid var(--rule-soft); margin: 2rem 0; }
.divider-double { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.skip-link { position: absolute; left: -9999px; top: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--ink); color: var(--paper); padding: 0.5rem 1rem; z-index: 1000; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Print */
@media print {
  body::before, .nav, .btn, footer.foot { display: none; }
  .stylist, .feature { break-inside: avoid; }
}

/* Image-based footer logo (white wordmark on dark footer) */
.foot-mast-logo {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
}
@media (max-width: 640px) {
  .foot-mast-logo { width: 180px; }
}

/* Brand lockup — the FBS monogram + wordmark as a centered welcome
   moment between hero and the team CTA on the home page. */
.brand-lockup-section {
  padding: 4rem 0 3.5rem;
  text-align: center;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  background: var(--paper);
}
.brand-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  color: inherit;
  text-decoration: none;
}
.brand-lockup:hover { color: inherit; }
.brand-lockup-mark {
  width: clamp(110px, 14vw, 170px);
  height: auto;
  display: block;
}
.brand-lockup-wordmark {
  width: clamp(260px, 32vw, 420px);
  height: auto;
  display: block;
}
@media (max-width: 640px) {
  .brand-lockup-section { padding: 2.5rem 0 2.25rem; }
  .brand-lockup { gap: 0.9rem; }
}

/* Mobile gallery — 2-up portrait grid so each shot stays full and the
   gallery doesn't eat 4 screens of vertical scroll. */
@media (max-width: 640px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .gallery-item {
    aspect-ratio: 3 / 4;
  }
}

/* Owner letter section — personal voice with editorial breathing room.
   Uses the existing .split layout (label-on-left, copy-on-right) and the
   already-defined .dropcap class for the 4.5em italic capital. */
.owner-letter-section {
  /* Inherits section padding + section+section hairline from the global rules.
     Was getting double-borders before. */
}
.owner-letter-section .dropcap {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 1.25rem;
  max-width: 56ch;
}
.owner-letter-section p { color: var(--ink-soft); margin-bottom: 1rem; }
.owner-letter-section .owner-sign {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink);
  margin-top: 1.25rem;
}

/* Pull-quote section wrapper — gives the editorial quote moment its own
   air on the page, centered on a narrower column. */
.pull-quote-section {
  /* Inherits global section padding for rhythm consistency. */
}
.pull-quote-section .pull-quote {
  margin: 0 auto;
  max-width: 720px;
  border-color: var(--accent);
}
.pull-quote-section .pull-quote blockquote {
  max-width: 28ch;
}
.pull-quote-section .pull-quote cite {
  color: var(--accent);
}

/* === Accent color threading — warm champagne across the page === */
.info-label { color: var(--accent); }
.service-cat-title { color: var(--accent); }
.dropcap::first-letter { color: var(--accent); }
.owner-letter-section .owner-sign { color: var(--accent); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.cap a, a.cap { color: var(--accent); }
.feature-list li::before { background: var(--accent); }
.review-meta strong { color: var(--accent); }

/* === Scroll reveal — subtle fade-up on first viewport intersection.
   Respects prefers-reduced-motion. JavaScript adds .is-visible. === */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms;   }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms;  }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }

/* Subtle parallax-ish drift on feature images while their section is visible.
   Uses scroll-driven CSS where supported; falls back to no-op otherwise. */
@supports (animation-timeline: view()) {
  .hero-image img,
  .feature-img img,
  .team-cta-photo img {
    animation: drift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes drift {
    from { transform: translateY(-2%) scale(1.04); }
    to   { transform: translateY(2%)  scale(1.04); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-image img, .feature-img img, .team-cta-photo img {
    animation: none !important;
  }
}

/* New-client offers grid — 1 column on mobile, 2 columns from 600px up.
   Overrides the default 3-up .service-cats sizing for this section only. */
.service-cats--2up { grid-template-columns: 1fr !important; }
@media (min-width: 600px) {
  .service-cats--2up { grid-template-columns: 1fr 1fr !important; }
}

/* Landscape hero variant — used when the hero source image is wider than
   tall (e.g. the team photo). Mobile uses a 3:2 aspect ratio so nothing
   gets cropped off the sides; desktop keeps the standard hero-image rules. */
.hero-image--landscape {
  aspect-ratio: 3 / 2;
  max-height: none;
}
@media (min-width: 800px) {
  .hero-image--landscape { aspect-ratio: 3 / 2; max-height: 520px; }
}
.hero-image--landscape img { object-fit: cover; object-position: center; }

/* ========================================================================
   BRANDS WE TRUST — homepage section
   Two grouped lockups (At the Chair / Take Home), each with brand logos
   that link out to the manufacturer's site. Logos render grayscale at low
   opacity by default, fading to full color on hover — keeps the section
   feeling editorial and trustworthy rather than promotional.
======================================================================== */
.brands-section { padding: clamp(3.5rem, 6vw, 5rem) 0; }
.brands-header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.brands-header .section-label { display: inline-block; margin-bottom: 0.75rem; }
.brands-header h3 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
.brands-header p {
  max-width: 36rem; margin: 0.6rem auto 0;
  color: var(--ink-mid); font-size: 0.95rem; line-height: 1.6;
}
.brands-group {
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
}
.brands-group + .brands-group { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.brands-group-label {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--ink);
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.brands-group-label::before,
.brands-group-label::after {
  content: ""; display: inline-block;
  width: 28px; height: 1px; background: var(--rule-soft);
  vertical-align: middle; margin: 0 0.85rem 0.25rem;
}
.brands-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center;
  max-width: 56rem;
  margin: 0 auto;
}
@media (min-width: 720px) {
  .brands-grid--six { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 720px) {
  .brands-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem 0.5rem; }
}
.brand-tile {
  display: flex; align-items: center; justify-content: center;
  height: clamp(48px, 8vw, 64px);
  padding: 0.5rem;
  text-decoration: none;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}
.brand-tile:hover,
.brand-tile:focus-visible {
  opacity: 1;
  filter: grayscale(0%);
  transform: translateY(-2px);
}
.brand-tile img {
  max-height: 100%;
  max-width: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}
.brand-tile.is-wordmark {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  letter-spacing: 0.08em;
  font-size: clamp(1.1rem, 2.3vw, 1.6rem);
  color: var(--ink);
  white-space: nowrap;
}
.brand-tile.is-wordmark .accent {
  color: #c8102e;
  font-size: 0.65em;
  vertical-align: super;
  margin-left: 0.1em;
  letter-spacing: 0;
}

/* Mangomint app.js injects its own webchat bubble + container.
   We use our own (Lobbii) chat, so hide Mangomint's to prevent stacking. */
.mangomint-chat-container,
.mangomint-chat-bubble { display: none !important; }