/* ============================================================
   Mediaology — Components
   Reusable UI: nav, footer, page header, buttons, cards, FAQ.
   ============================================================ */

/* ============================================================
   1. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
  white-space: nowrap;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }

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

.btn-outline-light {
  background: transparent;
  color: var(--brand-white);
  border: var(--border-medium) solid rgba(255, 255, 255, 0.5);
}
.btn-outline-light:hover { border-color: var(--brand-white); background: rgba(255, 255, 255, 0.08); }

.btn-outline-dark {
  background: transparent;
  color: var(--brand-black);
  border: var(--border-medium) solid var(--brand-black);
}
.btn-outline-dark:hover { background: var(--brand-black); color: var(--brand-white); }

.btn-text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: inherit;
}
.btn-text-link .arrow-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: var(--border-medium) solid currentColor;
  border-radius: 50%;
  transition: transform var(--duration-base) var(--ease-out);
}
.btn-text-link:hover .arrow-circle { transform: translateX(4px); }
.btn-text-link svg { width: 12px; height: 12px; fill: currentColor; }

/* Arrow icon — used in btns and elsewhere */
.icon-arrow-right { width: 14px; height: 14px; flex-shrink: 0; }


/* ============================================================
   2. TOP NAVIGATION (Section 0.7)
   ============================================================ */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  padding: var(--space-4) 0;
  background: transparent;
  transition: background-color var(--duration-base) var(--ease-out),
              backdrop-filter var(--duration-base) var(--ease-out),
              padding var(--duration-base) var(--ease-out);
}
.site-nav.is-scrolled {
  background: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: var(--space-3) 0;
}

/* On pages where the top of the page is white (sub-service detail pages),
   make the nav opaque-dark from the start so white text stays readable. */
body.services-detail .site-nav {
  background: rgba(0, 0, 0, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  position: relative;
}
.site-nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 40px;
}
.site-nav__logo img, .site-nav__logo svg { height: 100%; width: auto; }

/* ============================================================
   CUSTOM BRAND LOGO — kills the flash-of-default by hiding the
   default SVG until JS confirms which logo should render. Three
   states:
     - default (no class on <html>): visibility:hidden — layout
       reserved but nothing paints. Used as the safe initial state
       for visitors with no localStorage; replaced ~50-200ms later
       by site.js when content.json arrives.
     - .has-brand-logo: SVG display:none + ::before / background
       paints the uploaded logo via var(--brand-logo-url).
     - .show-default-logo: SVG visibility:visible — the original
       Mediaology mark is shown.
   The inline <head> script in each HTML file picks one of those two
   classes synchronously when localStorage is populated, so admin
   users never see a flash; site.js re-applies the same class after
   content.json fetches for everyone else.
   ============================================================ */
a.site-nav__logo > svg,
.site-footer__brand > svg.site-footer__logo {
  visibility: hidden;
}
html.show-default-logo a.site-nav__logo > svg,
html.show-default-logo .site-footer__brand > svg.site-footer__logo {
  visibility: visible;
}
html.has-brand-logo a.site-nav__logo > svg,
html.has-brand-logo .site-footer__brand > svg.site-footer__logo {
  display: none !important;
}
html.has-brand-logo a.site-nav__logo {
  background-image: var(--brand-logo-url);
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
  width: var(--brand-logo-width, 200px);
  height: 40px;
}
html.has-brand-logo .site-footer__brand::before {
  content: '';
  display: block;
  background-image: var(--brand-logo-url);
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
  height: 56px;
  width: var(--brand-logo-width, 200px);
  margin-bottom: var(--space-3);
}
.site-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  /* Absolutely positioned at the true geometric center of the nav bar
     so the menu stays balanced regardless of how wide the logo or
     CTA button on either side happen to be. The hidden mobile state
     (display:none below 960px) is unaffected. */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
}
.site-nav__link {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  color: var(--text-on-dark-primary);
  padding: var(--space-2) 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color var(--duration-base) var(--ease-out);
}
.site-nav__link:hover { color: var(--brand-primary); }
.site-nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--brand-primary);
}
.site-nav__link .caret { width: 10px; height: 10px; opacity: 0.7; transition: transform var(--duration-base) var(--ease-out); }

/* Services dropdown */
.site-nav__dropdown {
  position: relative;
}
.site-nav__dropdown-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 880px;
  /* Solid on purpose, with no backdrop-filter.

     A backdrop-filter makes the browser promote everything painted behind
     the element into its own compositing layer so it can be sampled and
     blurred. That re-composite subtly shifts colour and gamma across the
     whole area being sampled -- and because this panel hangs off the fixed,
     full-width nav, the area is the entire page. The result was that the
     site visibly went dull for exactly as long as About / Services /
     Industries was hovered, then snapped back.

     At 96% opacity the blur behind it was invisible anyway, so this costs
     nothing to look at and removes the shift completely. */
  background: rgb(12, 12, 12);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              visibility 0s linear var(--duration-base);
}
/* Invisible bridge to prevent hover loss when cursor crosses the 12px gap */
.site-nav__dropdown-panel::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
  /* No visible background — just hover real estate */
}
.site-nav__dropdown.is-open > .site-nav__dropdown-panel,
.site-nav__dropdown:hover > .site-nav__dropdown-panel,
.site-nav__dropdown:focus-within > .site-nav__dropdown-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.site-nav__dropdown.is-open .caret,
.site-nav__dropdown:hover .caret { transform: rotate(180deg); }

/* Smaller variant for menus with just a few items (About) */
.site-nav__dropdown-panel--small {
  min-width: 220px !important;
  display: block !important;
  grid-template-columns: none !important;
  padding: var(--space-3) !important;
}

/* Flat-list variant — used by the Industries dropdown so it shows
   only the 8 categories (no sub-niches). Two columns × 4 rows. */
.site-nav__dropdown-panel--list {
  min-width: 480px !important;
  max-width: calc(100vw - 32px);
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0 var(--space-3) !important;
  padding: var(--space-3) !important;
}
.site-nav__dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__dropdown-list li { list-style: none; margin: 0; }
.site-nav__dropdown-list a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--text-on-dark-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.site-nav__dropdown-list a:hover {
  background: rgba(236, 26, 100, 0.1);
  color: var(--brand-primary);
}
.site-nav__dropdown-mini {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__dropdown-mini li { list-style: none; margin: 0; }
.site-nav__dropdown-mini a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--text-on-dark-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.site-nav__dropdown-mini a:hover {
  background: rgba(236, 26, 100, 0.1);
  color: var(--brand-primary);
}

.site-nav__dropdown-col h4 {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}
.site-nav__dropdown-col h4 a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.site-nav__dropdown-col h4 a:hover {
  opacity: 0.7;
}
.site-nav__dropdown-col ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Pull the list flush to the column's content edge so the hover
     box visually aligns with the column heading rather than
     floating in the middle. */
  margin-left: calc(-1 * var(--space-3));
  margin-right: calc(-1 * var(--space-3));
}
.site-nav__dropdown-col ul a {
  /* Same hover treatment as the About dropdown
     (.site-nav__dropdown-mini a) — pink highlight box on hover
     with a colour shift to brand-primary, rather than the
     text-only translate that used to live here. Scoped to ul a
     so it doesn't leak into the column-heading h4 anchors. */
  display: block;
  font-size: var(--fs-caption);
  color: var(--text-on-dark-secondary);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.site-nav__dropdown-col ul a:hover {
  background: rgba(236, 26, 100, 0.1);
  color: var(--brand-primary);
}

/* "See all N →" link inside Industries dropdown columns —
   slightly visually distinct from the regular niche items so the
   user immediately reads it as "shows the full list". */
.site-nav__dropdown-more {
  color: var(--brand-primary) !important;
  font-weight: var(--fw-medium);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 4px;
  padding-top: var(--space-2) !important;
}

.site-nav__cta { flex-shrink: 0; }

/* Mobile menu */
.site-nav__hamburger {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
}
.site-nav__hamburger-bars {
  position: relative;
  width: 22px; height: 16px;
}
.site-nav__hamburger-bars span {
  display: block;
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--brand-white);
  transition: transform var(--duration-base) var(--ease-out), top var(--duration-base) var(--ease-out), opacity var(--duration-fast);
}
.site-nav__hamburger-bars span:nth-child(1) { top: 0; }
.site-nav__hamburger-bars span:nth-child(2) { top: 7px; }
.site-nav__hamburger-bars span:nth-child(3) { top: 14px; }
.site-nav.is-mobile-open .site-nav__hamburger-bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.site-nav.is-mobile-open .site-nav__hamburger-bars span:nth-child(2) { opacity: 0; }
.site-nav.is-mobile-open .site-nav__hamburger-bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

.site-nav__mobile-panel {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  /* Use dynamic viewport height so the panel doesn't get cut off
     by mobile browser chrome (address bar, etc.) */
  height: calc(100vh - 64px);
  height: calc(100dvh - 64px);
  background: var(--surface-black);
  padding: var(--space-8) var(--container-px) var(--space-12);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  z-index: calc(var(--z-nav) - 1);
  transition: opacity var(--duration-base) var(--ease-out);
}
@media (max-width: 960px) {
  .site-nav__mobile-panel {
    display: block;
    visibility: hidden;
    transition: opacity var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base);
  }
}
.site-nav.is-mobile-open .site-nav__mobile-panel {
  display: block;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.site-nav__mobile-panel ul { display: flex; flex-direction: column; gap: var(--space-2); }
.site-nav__mobile-panel a {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--text-on-dark-primary);
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-nav__mobile-cta {
  margin-top: var(--space-8);
  display: flex;
  justify-content: center;
}
.site-nav__mobile-cta .btn {
  width: auto;
  min-width: 240px;
  text-align: center;
  justify-content: center;
}

/* Mobile nested dropdown for Services */
.mobile-services {
  display: block;
}
.mobile-services__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-services__label {
  flex: 1;
  display: block;
  padding: var(--space-3) 0 !important;
  font-family: var(--font-display) !important;
  font-size: var(--fs-h2) !important;
  color: var(--text-on-dark-primary) !important;
  text-decoration: none;
  border-bottom: none !important;
}
.mobile-services__caret {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  background: none;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-on-dark-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.mobile-services__caret .caret {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-base) var(--ease-out);
}
.mobile-services.is-open > .mobile-services__trigger .mobile-services__caret .caret {
  transform: rotate(180deg);
}
.mobile-services__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-slow) var(--ease-out);
}
.mobile-services.is-open > .mobile-services__panel {
  max-height: 2400px;
}
.mobile-cat {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mobile-cat__trigger {
  display: flex;
  align-items: center;
  width: 100%;
}
.mobile-cat__label {
  flex: 1;
  display: block;
  padding: var(--space-3) var(--space-4) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-body-lg) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--text-on-dark-secondary) !important;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: none !important;
}
.mobile-cat__caret {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-on-dark-secondary);
  cursor: pointer;
  flex-shrink: 0;
}
.mobile-cat__caret .caret { width: 12px; height: 12px; transition: transform var(--duration-base) var(--ease-out); }
/* Defensive: any svg.caret inside any mobile-cat trigger is forced to icon size,
   prevents giant SVG render if older markup variant is present. */
.mobile-cat__trigger svg.caret,
.mobile-services__trigger svg.caret {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.mobile-cat.is-open > .mobile-cat__trigger .mobile-cat__label { color: var(--brand-primary) !important; }
.mobile-cat.is-open > .mobile-cat__trigger .mobile-cat__caret { color: var(--brand-primary); }
.mobile-cat.is-open > .mobile-cat__trigger .mobile-cat__caret .caret { transform: rotate(180deg); }
.mobile-cat__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-base) var(--ease-out);
}
.mobile-cat.is-open > .mobile-cat__panel {
  max-height: 600px;
}
.mobile-cat__list {
  display: flex !important;
  flex-direction: column;
  padding: 0 var(--space-4) var(--space-3);
  gap: 0 !important;
}
.mobile-cat__list li { list-style: none; }
.mobile-cat__list a {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body) !important;
  font-size: var(--fs-body) !important;
  color: var(--text-on-dark-secondary) !important;
  text-decoration: none;
  border-bottom: none !important;
  border-left: 2px solid transparent;
  transition: border-color var(--duration-fast), color var(--duration-fast);
}
.mobile-cat__list a:hover {
  color: var(--brand-primary) !important;
  border-left-color: var(--brand-primary);
}

@media (max-width: 960px) {
  .site-nav__menu { display: none; }
  .site-nav__cta { display: none; }
  .site-nav__hamburger { display: inline-flex; }
}


/* ============================================================
   3. PAGE HEADER (Section 0.8)
   Used on every page except Home.
   ============================================================ */
.page-header {
  position: relative;
  min-height: 480px;
  padding: 160px 0 80px;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-black); /* fallback */
  color: var(--text-on-dark-primary);
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}
.page-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(480px - 240px);
  max-width: 960px;
  margin: 0 auto;
}
.page-header__eyebrow { margin-bottom: var(--space-6); }
.page-header__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw + 0.5rem, 4.5rem);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--text-on-dark-primary);
  margin-bottom: var(--space-6);
}
.page-header__subhead {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-on-dark-secondary);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .page-header { min-height: 320px; padding: 96px 0 48px; }
  .page-header__inner { min-height: 0; }
  /* Smaller floor for the responsive title clamp on small screens so
     a long uppercase headline like "INDUSTRIES WE SERVE DEEPLY" fits
     comfortably on a phone instead of breaking onto five lines. */
  .page-header__title {
    font-size: clamp(1.6rem, 7vw, 2.5rem);
    margin-bottom: var(--space-4);
  }
  .page-header__subhead { font-size: var(--fs-body); }
  .page-header__eyebrow { margin-bottom: var(--space-4); }
}


/* ============================================================
   4. FOOTER (Section 0.5)
   ============================================================ */
.site-footer {
  background: var(--surface-black);
  color: var(--text-on-dark-primary);
  padding: var(--space-20) 0 var(--space-8);
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
}
.site-footer__brand p {
  margin-top: var(--space-4);
  font-size: var(--fs-body-sm);
  color: var(--text-on-dark-secondary);
  max-width: 280px;
}
.site-footer__logo { height: 36px; width: auto; }

.site-footer__col h4 {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-4);
  color: var(--text-on-dark-primary);
}
.site-footer__col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__col a, .site-footer__col p {
  font-size: var(--fs-body-sm);
  color: var(--text-on-dark-secondary);
  transition: color var(--duration-fast) var(--ease-out);
}
.site-footer__col a:hover { color: var(--brand-primary); }
.site-footer__col a.email-link { border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 1px; }

/* A note about the address above it, not another way to reach us. At the
   same size and colour as the email and phone it read as a third contact
   line. Smaller, dimmer and tucked up under the address instead. */
.site-footer__note {
  margin-top: 4px;
  font-size: var(--fs-caption);
}

/* The appointment policy, wherever it appears: the footer of every page,
   the contact page hours card, and the contact block of the legal pages.
   One class so the four copies cannot drift apart. */
.appointment-note {
  color: var(--brand-primary);
}
/* .site-footer__col sets a colour on every <p> inside it, which is a class
   plus a type and so outranks a lone class. The footer copy has to be named
   or it keeps the column colour and never turns pink. */
.site-footer__col p.appointment-note {
  color: var(--brand-primary);
}

.site-footer__socials {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.site-footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  color: var(--text-on-dark-primary);
  transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.site-footer__socials a:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-white); /* override the column hover rule so the SVG stays white */
}
.site-footer__socials svg { width: 16px; height: 16px; fill: currentColor; }

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-caption);
  color: var(--text-on-dark-tertiary);
}
.site-footer__legal { display: flex; gap: var(--space-6); }
.site-footer__legal a:hover { color: var(--text-on-dark-primary); }

@media (max-width: 960px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-10) var(--space-6); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; gap: var(--space-4); text-align: center; }
}

/* Touch targets in the footer.

   These links render 19px tall — the height of the text and nothing more —
   in a stacked list a thumb has to pick through. Google's floor for a tap
   target is around 44px, and two of these are the phone number and the email
   address: the two things a visitor on a phone is most likely to be reaching
   for, and the most annoying to miss.

   The 12px gap between rows is traded for padding inside each link, so the
   tappable area grows to 44px while the visible rhythm of the list stays
   close to what it was. Pointer devices are left alone — this is a thumb
   problem, not a mouse one. */
@media (max-width: 768px) and (pointer: coarse) {
  .site-footer__col ul { gap: var(--space-1); }
  .site-footer__col li > a,
  .site-footer__col p > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* The mobile menu is the whole navigation on a phone, and its sub-links
     landed at 40px — close enough to look fine and miss often. */
  .site-nav__mobile-panel a { min-height: 44px; box-sizing: border-box; }

  /* Legal row and the text-link CTA: 42px and 28px respectively. */
  .site-footer__bottom a,
  .btn-text-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}


/* ============================================================
   5. SERVICE CATEGORY CARD
   Reusable card: image top + eyebrow + headline + description.
   Used on Home Section 4, Services hub, etc.
   ============================================================ */
.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-out);
  text-decoration: none;
  color: inherit;
}
.service-card:hover { transform: translateY(-4px); }
.service-card__image {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-off-white);
}
.service-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.service-card:hover .service-card__image img { transform: scale(1.04); }

.service-card__label {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
}
.service-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--brand-primary);
}
.service-card__description {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}


/* ============================================================
   6. FAQ ACCORDION (used on Home, About, Services, Contact)
   ============================================================ */
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  border-bottom: 1px solid var(--surface-card-border);
}
.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  color: var(--text-on-light-primary);
  transition: color var(--duration-base) var(--ease-out);
}
.faq-item__trigger:hover { color: var(--brand-primary); }
.faq-item__icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  position: relative;
  transition: transform var(--duration-base) var(--ease-out);
}
.faq-item__icon::before, .faq-item__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform var(--duration-base) var(--ease-out);
}
.faq-item__icon::before { top: 11px; left: 4px; right: 4px; height: 2px; } /* horizontal */
.faq-item__icon::after { left: 11px; top: 4px; bottom: 4px; width: 2px; }  /* vertical */
.faq-item.is-open .faq-item__icon::after { transform: scaleY(0); }
.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-base) var(--ease-out);
}
.faq-item.is-open .faq-item__panel { grid-template-rows: 1fr; }
.faq-item__panel-inner { overflow: hidden; }
.faq-item__panel-content {
  padding: 0 0 var(--space-5);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--text-on-light-secondary);
  max-width: 640px;
}


/* ============================================================
   7. CTA BANNER (used on About, Services, etc.)
   ============================================================ */
.cta-banner {
  background: var(--surface-black);
  color: var(--text-on-dark-primary);
  padding: var(--space-20) 0;
  text-align: center;
}
.cta-banner__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-4);
}
.cta-banner__subhead {
  font-size: var(--fs-body-lg);
  color: var(--text-on-dark-secondary);
  margin-bottom: var(--space-8);
  max-width: 580px;
  margin-inline: auto;
}
.cta-banner__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}


/* ============================================================
   8. CONNECT CARDS (2x2 "How to Connect" grid)
   ============================================================ */
.connect-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.connect-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-lg);
  background: var(--surface-white);
  transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
  text-decoration: none;
  color: inherit;
}
.connect-card:hover { transform: translateY(-3px); border-color: var(--brand-primary); }
.connect-card__icon {
  color: var(--brand-primary);
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.connect-card__icon svg { width: 100%; height: 100%; fill: currentColor; }
.connect-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  margin-top: var(--space-2);
}
.connect-card__body {
  font-size: var(--fs-body-sm);
  color: var(--text-on-light-secondary);
  line-height: var(--lh-relaxed);
}
.connect-card__body strong { color: var(--text-on-light-primary); font-weight: var(--fw-medium); }

@media (max-width: 600px) {
  .connect-cards { grid-template-columns: 1fr; }
}


/* ============================================================
   9. SCROLL-FADE-UP (intersection observer driven)
   ============================================================ */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.fade-up.is-visible { opacity: 1; transform: translateY(0); }

/* Stagger children */
.fade-up-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.fade-up-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.fade-up-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.fade-up-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.fade-up-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.fade-up-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.fade-up-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.fade-up-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-up-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   SECTION — Testimonials (3-COLUMN VERTICAL MARQUEE)
   Black background, columns scroll up/down/up with fade top/bottom
   ============================================================ */
.testimonials-section {
  background: var(--surface-black);
  color: var(--brand-white);
  padding: var(--space-20) 0 var(--space-16);
  position: relative;
  overflow: hidden;
}
/* Old --light/--dark variants now both render same: black background. */
.testimonials-section--light,
.testimonials-section--dark {
  background: var(--surface-black);
  color: var(--brand-white);
}
.testimonials-section__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-10);
}
.testimonials-section__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
}
.testimonials-section__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw + 0.5rem, 3rem);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--brand-white);
}

/* Vertical scrolling marquee -- 3 columns */
.testimonials-marquee {
  position: relative;
  height: 640px;
  overflow: hidden;
  /* Mask: fade in/out at top and bottom edges */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.testimonials-marquee__col {
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.testimonials-marquee__track {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  will-change: transform;
}
/* Outer columns scroll UP, middle scrolls DOWN.
   Animation runs the duplicated track from 0 → -50% (UP) or -50% → 0 (DOWN). */
.testimonials-marquee__col:nth-child(1) .testimonials-marquee__track,
.testimonials-marquee__col:nth-child(3) .testimonials-marquee__track {
  animation: testimonials-scroll-up 38s linear infinite;
}
.testimonials-marquee__col:nth-child(2) .testimonials-marquee__track {
  animation: testimonials-scroll-down 44s linear infinite;
}
/* IMPORTANT: do NOT pause on hover. Per spec, marquee keeps moving. */
@keyframes testimonials-scroll-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
@keyframes testimonials-scroll-down {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}

/* Card */
.testimonial-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--brand-white);
  flex-shrink: 0;
}
.testimonial-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.testimonial-card__quote-icon {
  width: 28px;
  height: 28px;
  color: var(--brand-white);
  opacity: 0.5;
  flex-shrink: 0;
}
.testimonial-card__stars {
  display: flex;
  gap: 2px;
  color: var(--brand-primary);
}
.testimonial-card__stars svg { width: 12px; height: 12px; fill: currentColor; }
.testimonial-card__quote {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-on-dark-secondary);
  margin: 0;
}
.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
}
.testimonial-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #EC1A64, #AD144F);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  color: var(--brand-white);
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}
.testimonial-card__name {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 2px;
  color: var(--brand-white);
}
.testimonial-card__role {
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--text-on-dark-tertiary);
}

/* Tablet: 2 columns (hide 3rd column on smaller screens) */
@media (max-width: 900px) {
  .testimonials-marquee {
    grid-template-columns: 1fr 1fr;
    height: 560px;
  }
  .testimonials-marquee__col:nth-child(3) { display: none; }
}
/* Mobile: 1 column, still constrained height + still scrolls */
@media (max-width: 600px) {
  .testimonials-marquee {
    grid-template-columns: 1fr;
    height: 520px;
  }
  .testimonials-marquee__col:nth-child(2),
  .testimonials-marquee__col:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .testimonials-marquee__track { animation: none !important; }
}

/* Old grid kept as fallback if needed (legacy class) */
.testimonials-grid { display: none; }

/* ============================================================
   PROJECTS PAGE — Phase 7
   Hero, filter tabs, four category grids each tuned to its
   content's aspect ratio, and the lift-on-hover tile pattern.
   ============================================================ */
.projects-hero {
  background-image: linear-gradient(135deg, #0F0A1A 0%, #2A0820 50%, #0A0A0A 100%);
  color: var(--text-on-dark-primary);
  padding: var(--space-32) 0 var(--space-24);
  position: relative;
  overflow: hidden;
}
.projects-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(236, 26, 100, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.projects-hero__inner { position: relative; z-index: 1; max-width: 720px; }
.projects-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: var(--space-4);
}
.projects-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw + 0.5rem, 4.5rem);
  font-weight: var(--fw-medium);
  line-height: 1.05;
  margin-bottom: var(--space-5);
}
.projects-hero__subhead {
  font-size: var(--fs-body-lg);
  color: var(--text-on-dark-secondary);
  line-height: var(--lh-relaxed);
}

/* Filter tabs (light theme on white background) */
.projects-tabs {
  background: var(--surface-white);
  border-bottom: 1px solid var(--surface-card-border);
  padding: var(--space-6) 0;
  position: sticky;
  top: 64px;
  z-index: 5;
  /* When site.js calls tabsEl.scrollIntoView() after a tab tap,
     this offset pads the scroll so the bar lands just under the
     sticky main nav instead of being clipped behind it. */
  scroll-margin-top: 64px;
}
.projects-tabs__row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.projects-tabs__row::-webkit-scrollbar { display: none; }
.projects-tab {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--surface-card-border);
  background: var(--surface-white);
  color: var(--text-on-light-secondary);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.projects-tab:hover { color: var(--text-on-light-primary); border-color: #B8B8BA; }
.projects-tab.is-active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-white);
  box-shadow: 0 4px 16px rgba(236, 26, 100, 0.25);
}

/* ============================================================
   Case Studies — "Real Wins for Real Brands"
   Shared between About page and Projects page so editing on
   About flows through to Projects (same data-edit keys).
   Dark surface, pink-tinted radial gradient, hover lift.
   ============================================================ */
.about-results {
  background: var(--surface-near-black);
  color: var(--brand-white);
  padding: var(--section-py) 0;
  position: relative;
  overflow: hidden;
}
.about-results::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 40% at 50% 100%, rgba(236, 26, 100, 0.1) 0%, transparent 60%);
  pointer-events: none;
}
.about-results__inner { position: relative; }
.about-results__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-16);
}
.about-results__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
}
.about-results__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw + 0.5rem, 3rem);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.about-results__subtitle {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-on-dark-secondary);
}
.about-results__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
/* Scoped override: tighten the 4 case-card reveal so cards 3 & 4
   don't trail behind (global .fade-up-stagger delays them 160ms /
   240ms). Applies to both /about and /projects. Global stagger
   used elsewhere is untouched. */
.about-results__grid.fade-up-stagger.is-visible > *:nth-child(2) { transition-delay: 50ms; }
.about-results__grid.fade-up-stagger.is-visible > *:nth-child(3) { transition-delay: 100ms; }
.about-results__grid.fade-up-stagger.is-visible > *:nth-child(4) { transition-delay: 150ms; }
.case-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}
.case-card:hover {
  border-color: rgba(236, 26, 100, 0.32);
  background: rgba(236, 26, 100, 0.05);
  transform: translateY(-3px);
}
.case-card__industry {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: var(--space-2);
}
.case-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: 1.15;
  margin-bottom: var(--space-5);
}
.case-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: var(--space-5);
}
.case-metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.case-metric__value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--fw-medium);
  color: var(--brand-primary);
  line-height: 1;
}
.case-metric__label {
  font-size: 0.6875rem;
  color: var(--text-on-dark-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.case-card__body {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-on-dark-secondary);
}
@media (max-width: 900px) {
  .about-results__grid { grid-template-columns: 1fr; }
  .case-card__metrics { grid-template-columns: 1fr 1fr; }
}

/* ----------------------------------------------------------------
   Projects-page-only override: case studies on /projects render
   on a white surface (vs. the dark surface used on /about).
   Same data, two different visual contexts.
   ---------------------------------------------------------------- */
body.projects-page .about-results {
  background: var(--surface-white);
  color: var(--text-on-light-primary);
  /* Matched top + bottom padding so the section sits flush against
     the hero above and the portfolio grids below. */
  padding: var(--space-8) 0;
}
/* Pull the intro block closer to the first row of cards too. */
body.projects-page .about-results__intro {
  margin-bottom: var(--space-10);
}
body.projects-page .about-results::before {
  /* No pink wash on the projects page — keep it crisp white. */
  display: none;
}
body.projects-page .about-results__subtitle {
  color: var(--text-on-light-secondary);
}
body.projects-page .case-card {
  background: #FFFFFF;
  border: 1px solid var(--surface-card-border);
}
body.projects-page .case-card:hover {
  border-color: rgba(236, 26, 100, 0.32);
  background: rgba(236, 26, 100, 0.04);
}
body.projects-page .case-card__title {
  color: var(--text-on-light-primary);
}
body.projects-page .case-card__metrics {
  border-top-color: var(--surface-card-border);
  border-bottom-color: var(--surface-card-border);
}
body.projects-page .case-metric__label {
  color: var(--text-on-light-tertiary);
}
body.projects-page .case-card__body {
  color: var(--text-on-light-secondary);
}

/* Section per category (white background, dark text). Padding kept tight
   so the four grids sit close together — generous spacing inside the
   tiles already gives each section visual room. */
.projects-section {
  background: var(--surface-white);
  color: var(--text-on-light-primary);
  padding: var(--space-8) 0 var(--space-6);
}
.projects-section[hidden] { display: none; }
.projects-section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-5);
  gap: var(--space-4);
}
.projects-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
  font-weight: var(--fw-medium);
  color: var(--text-on-light-primary);
}
.projects-section__count {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-on-light-secondary);
}

/* Category-specific grids — tuned per aspect ratio */
.projects-grid {
  display: grid;
  gap: var(--space-4);
}
.projects-grid--reels           { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.projects-grid--websites        { grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); }
.projects-grid--graphic         { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.projects-grid--logos           { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.projects-grid--logo-animations { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.projects-grid--photography     { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.projects-grid--product-videos  { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* Tile — shared lift-on-hover pattern (light page, subtle border + shadow) */
.project-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-off-white);
  border: 1px solid var(--surface-card-border);
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.project-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(236, 26, 100, 0.18);
  border-color: rgba(236, 26, 100, 0.3);
}
.project-tile__media {
  position: relative;
  width: 100%;
  background: var(--surface-off-white);
  background-size: cover;
  background-position: center;
}
.projects-grid--reels           .project-tile__media { aspect-ratio: 9 / 16; }
.projects-grid--websites        .project-tile__media { aspect-ratio: 16 / 10; }
.projects-grid--graphic         .project-tile__media { aspect-ratio: 1 / 1; }
.projects-grid--logos           .project-tile__media { aspect-ratio: 1 / 1; background: #FFFFFF; }
.projects-grid--logo-animations .project-tile__media { aspect-ratio: 9 / 16; }
.projects-grid--photography     .project-tile__media { aspect-ratio: 1 / 1; }
.projects-grid--product-videos  .project-tile__media { aspect-ratio: 1 / 1; }
.project-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.projects-grid--logos .project-tile__media img { object-fit: contain; padding: 18%; }

/* ---- Website tiles: a still screenshot in a browser frame -------------

   The tile shows one screenshot, held in a frame with a chrome bar. It had
   a scrolling version for a while -- first panning itself, then scrolled by
   hand -- and both were dropped: the owner wanted the shot to just sit
   there, which is also the least surprising thing a portfolio tile can do.

   The frame takes its shape from the image rather than imposing 16:10.
   Screenshots arrive at whatever ratio the machine that took them used --
   this one is 2544x1251, or 2.03 -- and cropping that to 16:10 would cut
   roughly a tenth off each side, which on a website shot means the edges of
   the navigation and whatever sits at the margins. Letterboxing instead
   would float the page inside bars that do not match its own background.
   Neither is worth it when the tile can simply be the shape of the picture.

   Because tile heights now vary, the grid aligns to the top; stretching
   would leave the shorter ones with a strip of card below the image. */
.projects-grid--websites { align-items: start; }
/* A fixed shape, cropped from the top. Letting each tile take its
   screenshot's own proportions meant the row was only ever as tidy as the
   captures were consistent -- and they are not: two are hero-only, two run
   past the fold. Cropping from the top keeps every tile showing the part
   of a site that identifies it. */
.project-tile--site .project-tile__media {
  /* 2/1 is what the screenshots actually are -- measured, not assumed.
     A 16/10 frame cropped a fifth off the sides of all four. */
  aspect-ratio: 2 / 1;
  overflow: hidden;
}
.project-tile--site .project-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform var(--duration-slow, 420ms) var(--ease-out);
}
.project-tile--site:hover .project-tile__media img { transform: scale(1.03); }

/* Browser chrome. Three dots on a bar is the shortest way to say "this is a
   screenshot of a website" — it stops a site with a white page header
   reading as a half-empty tile, and it gives the scroll a fixed edge to
   move against, so the motion reads as a page moving rather than a picture
   sliding. The media carries matching top padding, so at rest the capture
   starts below the bar and then travels up under it. */
.project-tile--site .project-tile__chrome {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 22px;
  z-index: 2;
  display: flex;
  align-items: center;
  padding-left: 10px;
  background: #F2F2F4;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
/* Two pseudo-elements and a box-shadow give three dots without asking the
   generated markup to carry three empty spans per tile. */
.project-tile--site .project-tile__chrome::before,
.project-tile--site .project-tile__chrome::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #D3D3D8;
}
.project-tile--site .project-tile__chrome::before { margin-right: 5px; }
.project-tile--site .project-tile__chrome::after { box-shadow: 12px 0 0 #D3D3D8; }
.project-tile--site .project-tile__media { padding-top: 22px; }

/* The caption sits below the frame rather than on top of the screenshot.

   It used to be the shared hover overlay: opacity 0 until :hover. That made
   the section four unlabelled pictures, and on a touch screen, where there
   is no hover, the client names were unreachable entirely. Work that cannot
   be attributed is not a portfolio. Out here it is always legible, costs the
   screenshot nothing, and reads the way a studio index reads. */
.project-tile--site {
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
.project-tile--site .project-tile__frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-off-white);
  border: 1px solid var(--surface-card-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
/* The lift lives here rather than on the tile. The tile now contains the
   caption too, so lifting it moved the client name and description along
   with the screenshot. Only the image should respond. */
.project-tile--site:hover .project-tile__frame {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.13);
}
/* Switch off the shared tile hover for these: its translate moved the
   caption, and its pink glow drew a rectangle round the text, which is
   most of what made the section feel boxed in. */
.project-tile--site:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}
.project-tile--site .project-tile__overlay {
  position: static;
  inset: auto;
  opacity: 1;
  background: none;
  text-align: left;
  /* The rule sits directly under the text. An earlier version stretched
     this to fill the row height so every line aligned, which left dead
     space under a short caption and closed each item into a box. A divider
     should divide, not frame. */
  display: block;
  padding: var(--space-4) 2px var(--space-5);
  pointer-events: none;
  border-bottom: 1px solid var(--surface-card-border);
}
.project-tile--site .project-tile__name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--text-on-light-primary);
  background: none;
  padding: 0;
  border-radius: 0;
  /* The pill version carries a pink glow; without this it haloes the
     text out here on white. */
  box-shadow: none;
  display: block;
  max-width: none;
}
/* Clamped so a long brief cannot make one caption twice the height of its
   neighbour and pull the row out of line. */
.project-tile--site .project-tile__brief {
  margin-top: 6px;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-on-light-secondary);
  /* Shown in full, however many lines that takes. */
}


/* Hover overlay — centered pink pill with the project name + brief below.
   Replaces the bottom-gradient pattern so labels stay legible on white
   website screenshots and over busy graphic-post imagery. */
.project-tile__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--space-4);
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}
.project-tile:hover .project-tile__overlay { opacity: 1; }
.project-tile__name {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: var(--fw-medium);
  color: var(--brand-white);
  background: var(--brand-primary);
  padding: 10px 20px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(236, 26, 100, 0.4);
  line-height: 1.2;
  max-width: 90%;
}
.project-tile__brief {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.45;
  margin-top: 12px;
  max-width: 85%;
}
/* Reels: small persistent play badge in the upper-right corner so the
   tile reads as a video at a glance. The centered pill on hover is the
   click target; the badge is visual only. */
.project-tile__play {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(236, 26, 100, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-white);
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.project-tile__play svg { width: 12px; height: 12px; fill: currentColor; margin-left: 2px; }
/* Hide play badge for non-reel tiles */
.projects-grid--websites    .project-tile__play,
.projects-grid--graphic     .project-tile__play,
.projects-grid--logos       .project-tile__play,
.projects-grid--photography .project-tile__play { display: none; }

/* Empty-state when an admin list is empty (no items rendered yet) */
.projects-grid:empty::before {
  content: 'No projects yet — add some via the Admin panel.';
  display: block;
  grid-column: 1 / -1;
  color: var(--text-on-light-secondary);
  font-size: 14px;
  padding: var(--space-12);
  text-align: center;
  border: 1px dashed var(--surface-card-border);
  border-radius: var(--radius-lg);
}

/* ============================================================
   VIDEO LIGHTBOX — used by reels tiles with YouTube URLs
   ============================================================ */
.video-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease-out), visibility 0.25s;
}
.video-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.video-lightbox__frame {
  position: relative;
  width: min(90vw, 1200px);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
/* Vertical for YouTube Shorts */
.video-lightbox--vertical .video-lightbox__frame {
  width: auto;
  height: min(85vh, 900px);
  aspect-ratio: 9 / 16;
  max-width: 90vw;
}
.video-lightbox__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-lightbox__close {
  position: absolute;
  top: max(16px, calc(env(safe-area-inset-top, 0px) + 16px));
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  cursor: pointer;
  color: var(--brand-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration-base) var(--ease-out);
  z-index: 1;
}
.video-lightbox__close:hover { background: rgba(255, 255, 255, 0.25); }
.video-lightbox__close svg { width: 22px; height: 22px; fill: currentColor; }

/* ============================================================
   IMAGE LIGHTBOX — used by Photography + Logo Designs tiles
   Same fullscreen-overlay pattern as video-lightbox, plus
   prev/next nav arrows and an optional caption.
   ============================================================ */
.image-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease-out), visibility 0.25s;
}
.image-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.image-lightbox__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  max-width: min(90vw, 1100px);
  max-height: 90vh;
}
.image-lightbox__inner img {
  display: block;
  max-width: 100%;
  max-height: calc(90vh - 80px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  background: #1a1a1a;
}
.image-lightbox__caption {
  text-align: center;
  color: var(--brand-white);
  max-width: 540px;
  padding: 0 var(--space-4);
}
.image-lightbox__name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 4px;
}
.image-lightbox__brief {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}
.image-lightbox__counter {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.08em;
}

/* Close button — same visual treatment as the video close. */
.image-lightbox__close {
  position: absolute;
  top: max(16px, calc(env(safe-area-inset-top, 0px) + 16px));
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  cursor: pointer;
  color: var(--brand-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration-base) var(--ease-out);
  z-index: 2;
}
.image-lightbox__close:hover { background: rgba(255, 255, 255, 0.25); }
.image-lightbox__close svg { width: 22px; height: 22px; fill: currentColor; }

/* Prev/next nav arrows — anchored to the viewport edges so they're
   always reachable regardless of how big the image is. */
.image-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  cursor: pointer;
  color: var(--brand-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration-base) var(--ease-out), opacity 0.15s;
  z-index: 2;
}
.image-lightbox__nav:hover { background: rgba(255, 255, 255, 0.22); }
.image-lightbox__nav svg { width: 32px; height: 32px; fill: currentColor; }
.image-lightbox__nav--prev { left: max(16px, calc(env(safe-area-inset-left, 0px) + 16px)); }
.image-lightbox__nav--next { right: max(16px, calc(env(safe-area-inset-right, 0px) + 16px)); }
/* When the lightbox holds only one item, the JS toggles this class
   so the arrows disappear cleanly without leaving an awkward gap. */
.image-lightbox--single .image-lightbox__nav { display: none; }

/* Make logo-design lightbox images sit on white the same way they
   do in the grid — transparent PNG marks need a light backdrop. */
.image-lightbox--logos .image-lightbox__inner img {
  background: #FFFFFF;
  padding: 8%;
}

@media (max-width: 600px) {
  .image-lightbox__nav { width: 44px; height: 44px; }
  .image-lightbox__nav svg { width: 24px; height: 24px; }
  .image-lightbox__nav--prev { left: 8px; }
  .image-lightbox__nav--next { right: 8px; }
}

/* ============================================================
   CONTACT PAGE — Phase 8A
   Hero, two-column form + info block, full-width booking embed,
   newsletter signup, footer.
   ============================================================ */
.contact-hero {
  background-image: linear-gradient(135deg, #1A0008 0%, #2A0820 50%, #0A0A0A 100%);
  color: var(--text-on-dark-primary);
  padding: var(--space-32) 0 var(--space-24);
  position: relative;
  overflow: hidden;
}
.contact-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 30% 100%, rgba(236, 26, 100, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.contact-hero__inner { position: relative; z-index: 1; max-width: 720px; }
.contact-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: var(--space-4);
}
.contact-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw + 0.5rem, 4.5rem);
  font-weight: var(--fw-medium);
  line-height: 1.05;
  margin-bottom: var(--space-5);
}
.contact-hero__subhead {
  font-size: var(--fs-body-lg);
  color: var(--text-on-dark-secondary);
  line-height: var(--lh-relaxed);
}

/* Quick-ways row — 4 horizontal cards (Email, Phone, Location, Hours) */
.contact-quickways {
  background: var(--surface-white);
  padding: var(--space-12) 0 0;
}
.contact-quickways__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.contact-quickway {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-5) var(--space-5);
  background: var(--surface-off-white);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text-on-light-primary);
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.contact-quickway:hover:not(.contact-quickway--static) {
  transform: translateY(-3px);
  border-color: rgba(236, 26, 100, 0.3);
  box-shadow: 0 14px 30px rgba(236, 26, 100, 0.12);
}
.contact-quickway__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(236, 26, 100, 0.1);
  color: var(--brand-primary);
  margin-bottom: var(--space-2);
}
.contact-quickway__icon svg { width: 18px; height: 18px; }
.contact-quickway__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-light-secondary);
}
.contact-quickway__value {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--text-on-light-primary);
  word-break: break-word;
}
@media (max-width: 900px) {
  .contact-quickways__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .contact-quickways__grid { grid-template-columns: 1fr; }
}

/* Form section — two-column on desktop, stacked on mobile */
.contact-form-section {
  background: var(--surface-white);
  padding: var(--space-12) 0 var(--space-20);
  scroll-margin-top: 80px;
}
/* One column, so the embedded form gets the full content width.

   The form is the CRM's and pairs its fields -- first/last, phone/email,
   budget/timeline -- only above roughly 670px of frame width; measured, 640
   gives one field per row and 700 gives two. Side by side, the form column
   was 569px and every pair collapsed into a stack, which is what prompted
   this.

   Widening the column instead of stacking does not survive: with the gap at
   --space-12, a two-column split only clears 700px once the viewport is past
   about 1240, so every laptop between 900 and 1240 would quietly fall back to
   the single-column form. Full width clears it from tablet upward and leaves
   phones stacked, which is right for them anyway.

   The booking calendar moves below the form rather than beside it. It reads
   as the alternative to the form either way, and it is the half of the pair
   that loses least from the change. */
/* The embedded form caps its own content at 766px and centres it inside
   whatever width the frame has. Measured in the form itself: at a 1185px
   frame, .form-side is 766px sitting at left 209 -- so a full-width frame
   does not make a full-width form, it makes a 766px form marooned in the
   middle of an empty box, out of line with the heading above it.

   So the frame is capped at the form's own width and left-aligned. The form
   then fills it edge to edge and sits directly under "Send Us a Message.",
   and 766 is comfortably past the ~660px where the field pairs collapse. */
.contact-form-embed {
  max-width: 766px;
}

.contact-form-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
}

/* Calendar beside the form, but only where the form still fits.

   The embedded form collapses its field pairs below about 660px of frame
   width -- measured against the form itself: 640 gives one field per row,
   668 gives two. So the form column is pinned at 700px rather than taking a
   share: a 1fr 1fr split gave it 569px and every pair stacked, which is the
   bug this whole sequence started with.

   700 + gap + a calendar wide enough to be usable needs about 1180px of
   viewport, so that is where the pair turns on. Below it the two stack and
   the form takes the full column, which still clears 660 comfortably
   (929px at a 1024 viewport). Nothing between the two states renders a
   collapsed form. */
@media (min-width: 1180px) {
  .contact-form-section__grid {
    grid-template-columns: minmax(0, 700px) minmax(0, 1fr);
    gap: var(--space-8);
  }
}
.contact-form-section__booking-col {
  display: flex;
  flex-direction: column;
}
.contact-form-section__booking-col .booking-embed {
  margin-top: var(--space-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-off-white);
  border: 1px solid var(--surface-card-border);
}
.contact-form-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.5rem);
  font-weight: var(--fw-medium);
  line-height: 1.15;
  margin-bottom: var(--space-3);
  color: var(--text-on-light-primary);
}
.contact-form-section__intro {
  font-size: var(--fs-body);
  color: var(--text-on-light-secondary);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-8);
}

/* The contact form itself */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.contact-form__honeypot { display: none; }
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.contact-form__field { display: flex; flex-direction: column; gap: 6px; }
.contact-form__label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--text-on-light-primary);
  letter-spacing: 0.01em;
}
.contact-form__optional {
  font-weight: var(--fw-regular);
  color: var(--text-on-light-secondary);
  font-size: 12px;
  margin-left: 4px;
}
.contact-form__required {
  color: var(--brand-primary);
  margin-left: 3px;
  font-weight: var(--fw-medium);
}
.contact-form__hint {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-on-light-secondary);
  margin: 0;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--surface-card-border);
  border-radius: 8px;
  background: var(--surface-white);
  color: var(--text-on-light-primary);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(236, 26, 100, 0.15);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form select { cursor: pointer; }
/* A <select> sizes itself to its widest <option>, and with the default
   min-width:auto it refuses to shrink below that inside a grid track. The
   topic select's longest option — "Web & Tech (Sites, CRM, AI-Powered
   Automation)" — measured 405px min-content, which forced the whole
   two-column grid to 405px on a 375px phone and made the contact page
   scroll sideways. Letting the field shrink fixes the cause; the grid rule
   below stops any future wide child doing the same thing again. */
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.contact-form select { text-overflow: ellipsis; }
.contact-form-section__grid > * { min-width: 0; }
.contact-form__submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: var(--fs-body);
  margin-top: var(--space-2);
}

/* Inline success state shown after submit */
.contact-form-success {
  background: rgba(31, 138, 79, 0.08);
  border: 1px solid rgba(31, 138, 79, 0.25);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
}
.contact-form-success__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: rgba(31, 138, 79, 0.18);
  color: #1F8A4F;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-form-success h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-2);
  color: var(--text-on-light-primary);
}
.contact-form-success p {
  color: var(--text-on-light-secondary);
  line-height: var(--lh-relaxed);
}
.contact-form-success a { color: var(--brand-primary); text-decoration: underline; }

/* Side info block */
.contact-info { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: 90px; }
.contact-info__card {
  background: var(--surface-off-white);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.contact-info__title {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-on-light-secondary);
  margin-bottom: var(--space-5);
}
.contact-info__list { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; }
.contact-info__row dt {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-on-light-secondary);
  margin-bottom: 4px;
}
.contact-info__row dd { margin: 0; font-size: 15px; color: var(--text-on-light-primary); }
.contact-info__row dd a { color: inherit; text-decoration: none; transition: color var(--duration-base) var(--ease-out); }
.contact-info__row dd a:hover { color: var(--brand-primary); }
.contact-info__card--dark {
  background: var(--surface-near-black);
  border: 1px solid #232323;
  color: var(--text-on-dark-primary);
  position: relative;
  overflow: hidden;
}
.contact-info__card--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 70% 100%, rgba(236, 26, 100, 0.25) 0%, transparent 70%);
  pointer-events: none;
}
.contact-info__card--dark > * { position: relative; z-index: 1; }
.contact-info__card--dark h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-3);
}
.contact-info__card--dark p {
  font-size: 14px;
  color: var(--text-on-dark-secondary);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-5);
}
.contact-info__cta { width: 100%; justify-content: center; }

@media (max-width: 900px) {
  .contact-form-section__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .contact-info { position: static; }
  .contact-form__row { grid-template-columns: 1fr; }
}

/* Booking — inline embed (contact page) + site-wide modal.
   The calendar itself is a third-party iframe we cannot style, so all of
   the brand work happens in the frame around it. */
.booking-embed {
  position: relative;
  min-height: 700px;
  display: flex;
  align-items: stretch;
}
.booking-embed__frame {
  width: 100%;
  min-height: 700px;
  border: 0;
  display: block;
  /* GHL's calendar paints its own white ground; matching it here stops a
     flash of the page background while the iframe boots. */
  background: var(--surface-white);
}
.booking-embed__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  text-align: center;
  color: var(--text-on-light-secondary);
  width: 100%;
}
.booking-embed__placeholder svg { color: var(--surface-card-border); }
.booking-embed__placeholder p {
  margin: 0;
  font-size: 14px;
  line-height: var(--lh-relaxed);
  max-width: 320px;
}
/* Once the real calendar is in, the placeholder has done its job. */
.booking-embed.is-loaded .booking-embed__placeholder { display: none; }

/* ---- Site-wide booking modal ---- */
.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
}
.booking-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
}
.booking-modal__panel {
  position: relative;
  width: min(920px, 100%);
  /* A definite height, not a cap. The body below is flex:1 with a zero
     basis, so with only a max-height the panel took its height from the
     iframe -- and the moment the embed script set an explicit height on
     that iframe the panel collapsed to 0 for over a second, which is the
     popup appearing to hang on open. Measured 700 -> 0 -> 752 before this.
     A definite height gives the body something to fill and makes the panel
     independent of whatever the calendar reports. */
  height: min(860px, 100%);
  background: var(--surface-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}
.booking-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text-on-light-primary);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--surface-card-border);
  transition: background 0.18s ease, color 0.18s ease;
}
.booking-modal__close:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--surface-white);
}
.booking-modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.booking-modal__frame {
  width: 100%;
  min-height: 700px;
  border: 0;
  display: block;
  background: var(--surface-white);
}

/* Shown from the moment the popup opens until the calendar document has
   loaded. It overlays the panel rather than sitting in the scrolling body,
   which would stack a 700px placeholder on top of a 700px frame and push
   the calendar down the panel. z-index stays below the close button so the
   popup can still be dismissed while it is loading. */
.booking-modal__loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--surface-white);
  color: var(--text-on-light-tertiary);
  font-size: var(--fs-body-sm);
}
.booking-modal__loading::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: booking-spin 700ms linear infinite;
}
@keyframes booking-spin { to { transform: rotate(360deg); } }
/* The spinner is decoration; the words carry the message either way. */
@media (prefers-reduced-motion: reduce) {
  .booking-modal__loading::before { animation: none; }
}
/* Lock the page behind the modal so scrolling drives the calendar, not
   the page underneath it. */
body.has-booking-modal { overflow: hidden; }

@media (max-width: 640px) {
  .booking-modal { padding: 0; }
  .booking-modal__panel {
    width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
  }
}

/* Newsletter section (dark) */
.contact-newsletter {
  background: var(--surface-black);
  color: var(--text-on-dark-primary);
  padding: var(--space-20) 0;
  position: relative;
  overflow: hidden;
}
.contact-newsletter::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 60% at 80% 50%, rgba(236, 26, 100, 0.2) 0%, transparent 70%);
  pointer-events: none;
}
.contact-newsletter__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
.contact-newsletter__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: var(--space-4);
}
.contact-newsletter__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.5rem);
  font-weight: var(--fw-medium);
  line-height: 1.15;
  margin-bottom: var(--space-4);
}
.contact-newsletter__subhead {
  font-size: var(--fs-body);
  color: var(--text-on-dark-secondary);
  line-height: var(--lh-relaxed);
}
.contact-newsletter__form-wrap {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  min-height: 200px;
}
.contact-newsletter__form-wrap iframe { width: 100%; min-height: 200px; border: 0; background: transparent; }
.contact-newsletter__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--text-on-dark-secondary);
  min-height: 160px;
}
.contact-newsletter__placeholder svg { color: rgba(255, 255, 255, 0.2); }
.contact-newsletter__placeholder p { margin: 0; font-size: 14px; line-height: var(--lh-relaxed); max-width: 320px; }
.contact-newsletter__placeholder strong { color: var(--text-on-dark-primary); }

@media (max-width: 900px) {
  .contact-newsletter__inner { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* ---- Newsletter form (dark surface, matches the site) -------------
   Lives in components.css (not a page file) because the newsletter
   block is reusable across pages. Fields are styled for a DARK
   background, unlike .contact-form which sits on white.            */
.newsletter-form { display: flex; flex-direction: column; gap: var(--space-4); }
.newsletter-form__honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.newsletter-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.newsletter-form__field { display: flex; flex-direction: column; gap: 6px; }
.newsletter-form__label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--text-on-dark-secondary);
  letter-spacing: 0.01em;
}
.newsletter-form__required { color: var(--brand-primary); margin-left: 3px; }
.newsletter-form input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-on-dark-primary);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out);
}
.newsletter-form input::placeholder { color: rgba(255, 255, 255, 0.32); }
.newsletter-form input:hover { border-color: rgba(255, 255, 255, 0.24); }
.newsletter-form input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(236, 26, 100, 0.22);
}
/* Chrome autofill repaints the field white — force it back to dark. */
.newsletter-form input:-webkit-autofill,
.newsletter-form input:-webkit-autofill:hover,
.newsletter-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-on-dark-primary);
  -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset;
  caret-color: var(--text-on-dark-primary);
}
.newsletter-form__submit {
  width: 100%;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-1);
}
.newsletter-form__fineprint {
  margin: 0;
  font-size: 12px;
  line-height: var(--lh-relaxed);
  color: var(--text-on-dark-tertiary);
}
.newsletter-form__fineprint a { color: var(--text-on-dark-secondary); text-decoration: underline; }
.newsletter-form__fineprint a:hover { color: var(--brand-primary); }

.newsletter-form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-2);
}
.newsletter-form-success__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--brand-primary);
  background: rgba(236, 26, 100, 0.12);
  border: 1px solid rgba(236, 26, 100, 0.35);
}
.newsletter-form-success h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: var(--fw-medium);
  margin: 0;
  color: var(--text-on-dark-primary);
}
.newsletter-form-success p {
  margin: 0;
  font-size: 14px;
  line-height: var(--lh-relaxed);
  color: var(--text-on-dark-secondary);
  max-width: 34ch;
}

@media (max-width: 520px) {
  .newsletter-form__row { grid-template-columns: 1fr; }
}

/* ============================================================
   BLOG PAGE — Phase 8B
   Single page handles two views: index (cards) + single-post
   (cover hero + body). View toggling lives in site.js.
   ============================================================ */
.blog-hero {
  background-image: linear-gradient(135deg, #001020 0%, #08183A 50%, #0A0A0A 100%);
  color: var(--text-on-dark-primary);
  padding: var(--space-32) 0 var(--space-24);
  position: relative;
  overflow: hidden;
}
.blog-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(236, 26, 100, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.blog-hero__inner { position: relative; z-index: 1; max-width: 760px; }
.blog-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: var(--space-4);
}
.blog-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw + 0.5rem, 4.5rem);
  font-weight: var(--fw-medium);
  line-height: 1.05;
  margin-bottom: var(--space-5);
}
.blog-hero__subhead {
  font-size: var(--fs-body-lg);
  color: var(--text-on-dark-secondary);
  line-height: var(--lh-relaxed);
}

.blog-list {
  background: var(--surface-white);
  padding: var(--space-16) 0 var(--space-24);
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-8);
}
.blog-card {
  background: var(--surface-white);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.blog-card:hover {
  transform: translateY(-4px);
  border-color: rgba(236, 26, 100, 0.3);
  box-shadow: 0 20px 40px rgba(236, 26, 100, 0.12);
}
.blog-card__cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface-off-white);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.blog-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.blog-card__meta {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--text-on-light-secondary);
  letter-spacing: 0.02em;
}
.blog-card__meta-sep { margin: 0 6px; opacity: 0.5; }
.blog-card__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: var(--fw-medium);
  line-height: 1.25;
  color: var(--text-on-light-primary);
}
.blog-card__excerpt {
  font-size: 14px;
  color: var(--text-on-light-secondary);
  line-height: var(--lh-relaxed);
  flex: 1;
}
.blog-card__cta {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-top: var(--space-3);
  transition: gap var(--duration-base) var(--ease-out);
}
.blog-card:hover .blog-card__cta { letter-spacing: 0.06em; }

/* ============================================================
   SINGLE-POST VIEW
   Hero: cover image as background with a dark gradient overlay
   for legibility (original pattern). Body sits in a 70/30 grid:
   main reading column on the left, sticky "More from the blog"
   sidebar on the right. Editorial typography lives in the body
   block (drop cap, H2 underline, magazine blockquote).
   ============================================================ */
.blog-post-hero {
  position: relative;
  background: var(--surface-near-black);
  color: var(--text-on-dark-primary);
  padding: var(--space-32) 0 var(--space-16);
  overflow: hidden;
  isolation: isolate;
}
.blog-post-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.45;
  z-index: -2;
}
.blog-post-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.4) 0%, rgba(10, 10, 10, 0.85) 100%);
  z-index: -1;
}
.blog-post-hero__inner { max-width: 800px; }
.blog-post-hero__back {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-on-dark-secondary);
  text-decoration: none;
  margin-bottom: var(--space-6);
  transition: color var(--duration-base) var(--ease-out);
}
.blog-post-hero__back:hover { color: var(--text-on-dark-primary); }
.blog-post-hero__meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-on-dark-secondary);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-4);
}
.blog-post-hero__meta-sep { margin: 0 8px; opacity: 0.5; }
.blog-post-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw + 0.5rem, 3.5rem);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  margin-bottom: var(--space-5);
}
.blog-post-hero__excerpt {
  font-size: var(--fs-body-lg);
  color: var(--text-on-dark-secondary);
  line-height: var(--lh-relaxed);
}

/* 70/30 grid that wraps the body + the sticky sidebar. The main
   column auto-fills (minmax 0 1fr) so it can shrink past the
   intrinsic content width, the sidebar is a fixed 300px. Below
   900px the sidebar drops underneath the post body. */
.blog-post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-12);
  max-width: 1180px;
  margin: 0 auto;
  align-items: start;
}
.blog-post-layout__main { min-width: 0; }
.blog-post-layout__sidebar {
  position: sticky;
  top: var(--space-6);
  align-self: start;
}

.blog-post-sidebar__head { margin-bottom: var(--space-4); }
.blog-post-sidebar__eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-primary);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--surface-card-border);
}
.blog-post-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.blog-post-sidebar__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-base) var(--ease-out);
}
.blog-post-sidebar__card:hover { transform: translateY(-2px); }
.blog-post-sidebar__card-cover {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  background-size: cover;
  background-position: center;
  background-color: #1A0A2A;
}
.blog-post-sidebar__card-meta {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-on-light-secondary);
  text-transform: uppercase;
}
.blog-post-sidebar__card-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--fw-medium);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  color: var(--text-on-light-primary);
  transition: color var(--duration-base) var(--ease-out);
}
.blog-post-sidebar__card:hover .blog-post-sidebar__card-title { color: var(--brand-primary); }

/* Body */
.blog-post-body {
  background: var(--surface-white);
  padding: var(--space-20) 0 var(--space-24);
}
.blog-post-body__content {
  /* Main column inside the 70/30 grid — fills its column. */
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.75;
  color: var(--text-on-light-primary);
}
.blog-post-body__content > * + * { margin-top: var(--space-5); }

/* Drop cap — magazine-style first letter on the first paragraph.
   Branded pink, Display font, generous size, floats so following
   text wraps cleanly around it. */
.blog-post-body__content > p:first-child::first-letter {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 4.6rem;
  line-height: 0.85;
  float: left;
  padding: 6px 14px 0 0;
  color: var(--brand-primary);
}

.blog-post-body__content h2,
.blog-post-body__content h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-12);
  color: var(--text-on-light-primary);
}
.blog-post-body__content h2 {
  font-size: 2rem;
  /* Pink underline accent under each H2 */
  position: relative;
  padding-bottom: var(--space-3);
}
.blog-post-body__content h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--brand-primary);
  border-radius: 2px;
}
.blog-post-body__content h3 { font-size: 1.4rem; margin-top: var(--space-8); }
.blog-post-body__content p { font-size: 18px; line-height: 1.75; }
.blog-post-body__content a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.blog-post-body__content a:hover { color: var(--brand-primary-dark); text-decoration-thickness: 2px; }
.blog-post-body__content ul,
.blog-post-body__content ol { padding-left: var(--space-6); }
.blog-post-body__content li + li { margin-top: var(--space-2); }
.blog-post-body__content ul li::marker { color: var(--brand-primary); }
.blog-post-body__content strong { color: var(--text-on-light-primary); font-weight: 600; }

/* Magazine-style blockquote with an oversized opening quote glyph */
.blog-post-body__content blockquote {
  position: relative;
  margin: var(--space-10) 0;
  padding: var(--space-6) var(--space-8) var(--space-6) var(--space-12);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--text-on-light-primary);
  background: var(--surface-off-white);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--brand-primary);
}
.blog-post-body__content blockquote::before {
  content: '“';
  position: absolute;
  top: -10px;
  left: 16px;
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 6rem;
  line-height: 1;
  color: var(--brand-primary);
  opacity: 0.85;
  pointer-events: none;
}

.blog-post-body__content code {
  background: var(--surface-off-white);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
}
.blog-post-body__content pre {
  background: var(--surface-near-black);
  color: var(--text-on-dark-primary);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
}
.blog-post-body__content pre code { background: transparent; padding: 0; }
.blog-post-body__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: var(--space-8) 0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}
.blog-post-body__content hr {
  border: 0;
  height: 1px;
  background: var(--surface-card-border);
  margin: var(--space-10) auto;
  max-width: 200px;
}

/* Share row sits at the bottom of the main column inside the
   70/30 grid — let it fill the column instead of capping width. */
.blog-post-body__share {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--surface-card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.blog-post-body__share-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-on-light-secondary);
}
.blog-post-body__share-buttons { display: flex; gap: var(--space-2); }
.blog-post-body__share-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface-off-white);
  border: 1px solid var(--surface-card-border);
  color: var(--text-on-light-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.blog-post-body__share-btn:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-white);
}
.blog-post-body__share-btn.is-copied {
  background: #1F8A4F;
  border-color: #1F8A4F;
  color: var(--brand-white);
}

/* Sidebar drops below the main column on narrower screens, and
   body type tightens for phones. */
@media (max-width: 900px) {
  .blog-post-layout {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    max-width: 760px;
  }
  .blog-post-layout__sidebar { position: static; }
}
@media (max-width: 600px) {
  .blog-post-body__content { font-size: 17px; }
  .blog-post-body__content > p:first-child::first-letter { font-size: 3.6rem; }
  .blog-post-body__content blockquote { font-size: 1.15rem; padding-left: var(--space-10); }
  .blog-post-body__share { flex-direction: column; align-items: flex-start; }
}

/* "No post found" / 404-style state */
.blog-not-found {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-16) var(--space-4);
  background: var(--surface-off-white);
  border: 1px dashed var(--surface-card-border);
  border-radius: var(--radius-lg);
}
.blog-not-found h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: var(--space-3);
}
.blog-not-found p { color: var(--text-on-light-secondary); margin-bottom: var(--space-6); }

/* Chat widget — keep it under our own overlays.
   The third-party launcher sets z-index 99999999, far above the nav (1000)
   and the lightboxes (9999), so left alone it floats on top of anything we
   open: the bottom-right corner of the booking calendar (exactly where GHL
   puts the time-slot controls), lightbox media, and the full-screen mobile
   menu. We cannot reach inside its shadow root, but the custom element host
   sits in our DOM, so hiding the host takes the whole widget with it. */
body.has-booking-modal chat-widget,
body:has(.video-lightbox.is-open) chat-widget,
body:has(.image-lightbox.is-open) chat-widget,
body:has(.site-nav.is-mobile-open) chat-widget {
  display: none !important;
}

/* SMS consent row on the contact form. Deliberately legible rather than
   buried fine print — a carrier reviewing a toll-free registration has
   to be able to read this in a screenshot. */
/* Two consent boxes stacked. The gap has to read as a real separation:
   they are different permissions and a visitor skimming should not take
   the pair for one wrapped sentence. */
.contact-form__consents {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-2);
}
.contact-form__consents .contact-form__consent { margin-top: 0; }

.contact-form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-2);
  cursor: pointer;
}
.contact-form__consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--brand-primary);
  cursor: pointer;
}
.contact-form__consent span {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-on-light-secondary);
}
.contact-form__consent a {
  color: var(--text-on-light-secondary);
  text-decoration: underline;
}
.contact-form__consent a:hover { color: var(--brand-primary); }

/* The policy links sit under the consent sentence, indented to line up with
   its text rather than the checkbox. They are outside the <label> on purpose:
   the wording registered for the A2P campaign is the sentence and nothing
   more, and a reviewer comparing the two should not have to decide whether a
   trailing "See our..." was part of it. */
.contact-form__consent-links {
  margin: var(--space-2) 0 0;
  padding-left: calc(18px + var(--space-3));
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-on-light-secondary);
}
.contact-form__consent-links a {
  color: var(--text-on-light-secondary);
  text-decoration: underline;
}
.contact-form__consent-links a:hover { color: var(--brand-primary); }