/*
 * Premier headliner design — see docs/architecture/premier-headliner-variant.md
 *
 * One family layout for the seven Premier booking sites, each keeping its
 * own ink, headline face and logo. Loaded after premier-family.css, and only
 * on a Premier tenant whose public design variant is `headliner`, so every
 * selector here is gated on that body state and RenoVegas (still `elevated`)
 * never matches.
 *
 * Two layers:
 *  1. `--hl-*` tokens the headliner homepage module reads, and a re-point of
 *     the shared `--premier-*` tokens so every inner page (directory,
 *     profiles, forms, services) inherits the same chassis.
 *  2. Targeted chrome: headings, buttons, header, footer, cards.
 */

/* ── 1. Chassis tokens ──────────────────────────────────────────────── */
body[data-theme-family="premier"][data-design-variant="headliner"] {
  /* Per-site ink inputs; overridden per tenant below. */
  --hl-ink: #3E7BFA;
  --hl-ink-text: #8FB4FF;
  --hl-cta: #2F6AE6;
  --hl-cta-hover: #2558C8;
  --hl-cta-fg: #FFFFFF;
  --hl-bg: #0B0C10;
  --hl-surface: #15171D;
  --hl-surface-raised: #1C1F27;
  --hl-display: var(--font-premier-headliner-display), "Anton", "Impact", sans-serif;
  --hl-display-scale: 1;
  --hl-display-case: uppercase;
  --hl-display-leading: 0.98;
  --hl-display-tracking: 0.005em;
  --hl-display-weight: 400;

  /* Shared neutrals. */
  --hl-fg: #F4F4F6;
  --hl-fg-soft: rgb(255 255 255 / 0.84);
  --hl-fg-mute: rgb(255 255 255 / 0.66);
  --hl-line: rgb(255 255 255 / 0.12);
  --hl-line-strong: rgb(255 255 255 / 0.3);
  --hl-paper: #FFFFFF;
  --hl-paper-ink: #14151A;
  --hl-paper-mute: #5B5D66;
  --hl-paper-wash: #EEF0F4;
  --hl-ink-plate: color-mix(in oklab, var(--hl-ink) 26%, var(--hl-surface));

  /* Type. */
  --hl-ui: var(--font-premier-headliner-condensed), "Barlow Condensed", "Arial Narrow", sans-serif;
  --hl-body: var(--font-premier-body), "Roboto", system-ui, sans-serif;
  --hl-text-xs: 0.8125rem;
  --hl-text-sm: 0.9375rem;
  --hl-text-base: 1rem;
  --hl-text-md: 1.0625rem;
  --hl-text-lg: 1.375rem;
  --hl-text-xl: 1.75rem;
  --hl-text-2xl: clamp(1.625rem, 1.2rem + 1.2vw, 2.125rem);
  --hl-hero-size: clamp(
    calc(2.875rem * var(--hl-display-scale)),
    calc((1.6rem + 4.4vw) * var(--hl-display-scale)),
    calc(5.25rem * var(--hl-display-scale))
  );
  --hl-cta-size: clamp(
    calc(2rem * var(--hl-display-scale)),
    calc((1.2rem + 2.6vw) * var(--hl-display-scale)),
    calc(3.25rem * var(--hl-display-scale))
  );
  --hl-weight-regular: 400;
  --hl-weight-semibold: 600;
  --hl-weight-bold: 700;
  --hl-leading-tight: 1.05;
  --hl-leading-snug: 1.4;
  --hl-leading-body: 1.55;
  --hl-tracking-title: 0.04em;
  --hl-tracking-name: 0.02em;
  --hl-tracking-label: 0.12em;
  --hl-tracking-button: 0.1em;
  --hl-tracking-nav: 0.1em;

  /* Space and shape. */
  --hl-space-1: 0.25rem;
  --hl-space-2: 0.5rem;
  --hl-space-3: 0.75rem;
  --hl-space-4: 1rem;
  --hl-space-5: 1.25rem;
  --hl-space-6: 1.5rem;
  --hl-space-8: 2rem;
  --hl-space-10: 2.5rem;
  --hl-space-14: 3.5rem;
  --hl-section-y: clamp(3.25rem, 2rem + 4vw, 5.5rem);
  --hl-gutter: clamp(1.5rem, 4vw, 3rem);
  --hl-max-w: 90rem;
  --hl-header-h: 5rem;
  /* Logo height in the bar: square marks need more height than wide ones. */
  --hl-logo-h: 3.25rem;
  --hl-logo-h-scrolled: 2.75rem;
  --hl-search-h: 3.75rem;
  --hl-radius: 4px;
  --hl-radius-sm: 3px;
  --hl-ease-slow: 600ms cubic-bezier(0.2, 0.6, 0.2, 1);

  /* Re-point the shared Premier chassis so inner pages follow along. */
  --premier-bg: var(--hl-bg);
  /* Photo scrims and night plates follow the neutral ground, not navy. */
  --premier-night-rgb: 11 12 16;
  --premier-scrim-ink-rgb: 11 12 16;
  --premier-scrim-mid-rgb: 11 12 16;
  --premier-scrim-top-rgb: 11 12 16;
  --premier-fg: var(--hl-fg);
  --premier-text-mid: var(--hl-fg-mute);
  --premier-text-soft: var(--hl-fg-soft);
  --premier-surface: var(--hl-surface);
  --premier-surface-elevated: var(--hl-surface-raised);
  --premier-card-bg: var(--hl-surface);
  --premier-ink: var(--hl-ink-text);
  --premier-ink-edge: var(--hl-ink-text);
  --premier-cta-bg: var(--hl-cta);
  --premier-cta-bg-hover: var(--hl-cta-hover);
  --premier-cta-fg: var(--hl-cta-fg);
  --premier-footer-bg: var(--hl-bg);
  --premier-footer-fg: var(--hl-fg-mute);
  --premier-nav-bg: var(--hl-bg);
  --premier-nav-plate-bg: transparent;
  --premier-field-bg: var(--hl-surface);
  --premier-field-panel-bg: var(--hl-surface-raised);
  --premier-border-soft: var(--hl-line);
  --premier-border-strong: var(--hl-line-strong);
  --premier-page-backdrop-image: none;
  --premier-font-display: var(--hl-display);
  --premier-font-card-title: var(--hl-ui);
  --premier-weight-card-title: 700;
  --premier-radius-pill: var(--hl-radius);
  --premier-radius-sm: var(--hl-radius-sm);
  --premier-radius-md: var(--hl-radius);
  --premier-radius-lg: var(--hl-radius);
  --premier-radius-xl: var(--hl-radius);
  --premier-radius-reference-card: var(--hl-radius);
  --premier-surface-tinted-wash: var(--hl-surface);
  --premier-surface-duotone-tint: var(--hl-surface);
  --premier-surface-duotone-plate: var(--hl-surface);
  --premier-surface-texture-base: var(--hl-bg);
  --premier-surface-texture-plate: var(--hl-bg);
  --premier-focus-color: var(--hl-fg);
  --premier-section-max-w: var(--hl-max-w);

  background: var(--hl-bg);
  background-image: none;
}

/* Per-site ink, ground and headline face. CTA plates are tuned so white
 * or near-black button text clears 4.5:1 on each site's ink. */
body[data-tenant="90stonow"][data-design-variant="headliner"] {
  --hl-logo-h: 4.25rem;
  --hl-logo-h-scrolled: 3.5rem;
  --hl-ink: #E5177E;
  --hl-ink-text: #F27AB8;
  --hl-cta: #C8136F;
  --hl-cta-hover: #AD0F60;
  --hl-cta-fg: #FFFFFF;
  --hl-bg: #0E0A10;
  --hl-surface: #19131B;
  --hl-surface-raised: #221A24;
  --hl-display: var(--font-sister-90stonow-display), "Audiowide", sans-serif;
  --hl-display-scale: 0.8;
  --hl-display-leading: 1.04;
}

body[data-tenant="allcountrytributes"][data-design-variant="headliner"] {
  --hl-logo-h: 4.25rem;
  --hl-logo-h-scrolled: 3.5rem;
  --hl-ink: #D0803F;
  --hl-ink-text: #E8A673;
  --hl-cta: #D0803F;
  --hl-cta-hover: #E0914F;
  --hl-cta-fg: #140C06;
  --hl-bg: #0C0D0F;
  --hl-surface: #17181B;
  --hl-surface-raised: #1F2024;
  --hl-display: var(--font-sister-allcountrytributes-display), "Rye", serif;
  --hl-display-scale: 0.78;
  --hl-display-leading: 1.04;
}

body[data-tenant="legendsofgroove"][data-design-variant="headliner"] {
  --hl-logo-h: 3.75rem;
  --hl-logo-h-scrolled: 3rem;
  --hl-ink: #FFAA1D;
  --hl-ink-text: #FFC560;
  --hl-cta: #FFAA1D;
  --hl-cta-hover: #FFBA45;
  --hl-cta-fg: #140C00;
  --hl-bg: #0D0B0C;
  --hl-surface: #181517;
  --hl-surface-raised: #211D20;
  --hl-display: var(--font-sister-legendsofgroove-display), "Bungee", sans-serif;
  --hl-display-scale: 0.78;
  --hl-display-leading: 1.04;
}

body[data-tenant="taylortributes"][data-design-variant="headliner"] {
  --hl-logo-h: 3.75rem;
  --hl-logo-h-scrolled: 3rem;
  --hl-ink: #E8343C;
  --hl-ink-text: #FF8086;
  --hl-cta: #D42A32;
  --hl-cta-hover: #BC222A;
  --hl-cta-fg: #FFFFFF;
  --hl-bg: #0D0B0C;
  --hl-surface: #181416;
  --hl-surface-raised: #211C1F;
  --hl-display: var(--font-sister-taylortributes-display), "Italiana", serif;
  --hl-display-scale: 0.95;
  --hl-display-case: none;
  --hl-display-leading: 1.04;
  --hl-display-tracking: 0;
}

body[data-tenant="bandastributos"][data-design-variant="headliner"] {
  --hl-logo-h: 4.25rem;
  --hl-logo-h-scrolled: 3.5rem;
  --hl-ink: #22A6D9;
  --hl-ink-text: #7CCDEE;
  --hl-cta: #22A6D9;
  --hl-cta-hover: #3CB6E4;
  --hl-cta-fg: #04121A;
  --hl-bg: #0A0C0E;
  --hl-surface: #141719;
  --hl-surface-raised: #1B1F22;
  --hl-display: var(--font-sister-bandastributos-display), "Alfa Slab One", serif;
  --hl-display-scale: 0.8;
  --hl-display-leading: 1.04;
}

body[data-tenant="latintributes"][data-design-variant="headliner"] {
  --hl-logo-h: 4.25rem;
  --hl-logo-h-scrolled: 3.5rem;
  --hl-ink: #17B39A;
  --hl-ink-text: #6FD6C4;
  --hl-cta: #17B39A;
  --hl-cta-hover: #26C4AA;
  --hl-cta-fg: #03140F;
  --hl-bg: #0A0D0D;
  --hl-surface: #141818;
  --hl-surface-raised: #1B2020;
  --hl-display: var(--font-sister-bandastributos-display), "Alfa Slab One", serif;
  --hl-display-scale: 0.8;
  --hl-display-leading: 1.04;
}

body[data-tenant="yachtrockharbor"][data-design-variant="headliner"] {
  --hl-logo-h: 4rem;
  --hl-logo-h-scrolled: 3.25rem;
  --hl-ink: #FF9A52;
  --hl-ink-text: #FFB27A;
  --hl-cta: #B93C0A;
  --hl-cta-hover: #A3340A;
  --hl-cta-fg: #FFFFFF;
  --hl-bg: #0A0E15;
  --hl-surface: #131923;
  --hl-surface-raised: #1A212D;
  --hl-display: var(--font-sister-yachtrockharbor-display), "Shrikhand", serif;
  --hl-display-scale: 0.8;
  --hl-display-case: none;
  --hl-display-leading: 1.08;
  --hl-display-tracking: 0;
}

body[data-tenant="allelvistributes"][data-design-variant="headliner"] {
  --hl-logo-h: 3.75rem;
  --hl-logo-h-scrolled: 3rem;
  --hl-ink: #E8B04B;
  --hl-ink-text: #F0C46E;
  --hl-cta: #A3221F;
  --hl-cta-hover: #8C1C1A;
  --hl-cta-fg: #FFFFFF;
  --hl-bg: #0E0B0A;
  --hl-surface: #181311;
  --hl-surface-raised: #211A17;
  --hl-display: var(--font-sister-allelvistributes-display), "Limelight", serif;
  --hl-display-scale: 0.8;
  --hl-display-leading: 1.04;
}

/* Public bridge: the shared BandHub primitives (directory, profile, forms)
 * still read the generic theme roles, so map them onto this chassis instead
 * of letting the legacy gold through. */
body[data-theme-family="premier"][data-design-variant="headliner"]:not([data-console-tone]) {
  --background: var(--hl-bg);
  --foreground: var(--hl-fg);
  --font-body: var(--hl-body);
  --font-display: var(--hl-display);
  --card: var(--hl-surface);
  --card-foreground: var(--hl-fg);
  --popover: var(--hl-surface-raised);
  --popover-foreground: var(--hl-fg);
  --primary: var(--hl-cta);
  --primary-foreground: var(--hl-cta-fg);
  --secondary: var(--hl-surface);
  --secondary-foreground: var(--hl-fg-soft);
  --muted: var(--hl-surface);
  --muted-foreground: var(--hl-fg-mute);
  --accent: rgb(255 255 255 / 0.06);
  --accent-foreground: var(--hl-fg);
  --border: var(--hl-line);
  --input: var(--hl-line-strong);
  --ring: var(--hl-ink);
  --gold: var(--hl-ink-text);
  --gold-muted: var(--hl-fg-mute);
  --surface-elevated: var(--hl-surface-raised);
  --surface-sunken: var(--hl-bg);
  --control-background: var(--hl-surface);
  --placeholder-foreground: var(--hl-fg-mute);
  --focus-ring: var(--hl-ink);
  --radius: var(--hl-radius);
  --radius-panel: var(--hl-radius);
  --shadow-soft: none;
  --shadow-panel: none;
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-css-module~="directory-view-content"][class*="page"] {
  --background: var(--hl-bg);
  --card: var(--hl-surface);
  --foreground: var(--hl-fg);
  --muted-foreground: var(--hl-fg-mute);
  --border: var(--hl-line);
  --gold: var(--hl-ink-text);
  --radius: var(--hl-radius);
  background: var(--hl-bg);
  background-image: none;
}

/* Band hero shots are 16:9, so directory cards are landscape and lead with
 * the band's hero (directory repository, prefersLandscapeBandCards). The base
 * image min-height suits the square frame and would over-zoom this one. */
body[data-theme-family="premier"][data-design-variant="headliner"] [data-directory-card-media] {
  aspect-ratio: 16 / 9;
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-directory-card-media] [data-directory-card-image] {
  min-height: 0;
}

/* The 16:9 frame is short, so the overlay is one row of controls on top and
 * the name below, as on WorkingBands. Featured becomes a star in the bottom
 * corner instead of a pill that pushes Quick view onto a second row. */
body[data-theme-family="premier"][data-design-variant="headliner"] [data-directory-card-root] ~ [class~="top-12"] {
  top: 0.5rem;
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-directory-card-media] [data-directory-card-scrim] + span {
  top: auto;
  right: var(--hl-space-3);
  bottom: var(--hl-space-3);
  left: auto;
  z-index: 2;
  width: 2rem;
  min-height: 2rem;
  height: 2rem;
  padding: 0;
  justify-content: center;
  gap: 0;
  border: 0;
  background: var(--hl-ink);
  color: var(--hl-cta-fg);
  font-size: 0;
  box-shadow: none;
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-directory-card-media]:has([data-directory-card-scrim] + span) [data-directory-card-media-copy] {
  padding-right: calc(var(--hl-space-3) + 2.5rem);
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-directory-card-media-copy] {
  gap: var(--hl-space-1);
  padding: var(--hl-space-3);
}

/* Quick view and Add to lineup share one row; trim them so they never meet. */
body[data-theme-family="premier"][data-design-variant="headliner"] [data-directory-card-root] ~ div [data-directory-overlay-action] {
  gap: var(--hl-space-1);
  padding-inline: var(--hl-space-2);
  letter-spacing: 0.04em;
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-directory-card-root] ~ div [data-directory-overlay-action] > svg + span + svg {
  display: none;
}

/* On a narrow card Quick view keeps only its eye icon; its accessible name
 * is the aria-label, so nothing is lost for assistive tech. */
body[data-theme-family="premier"][data-design-variant="headliner"] div:has(> [data-directory-card-root]) {
  container-type: inline-size;
}

@container (max-width: 20.5rem) {
  body[data-theme-family="premier"][data-design-variant="headliner"] [data-directory-card-root] ~ div [data-directory-overlay-action][aria-haspopup="dialog"] > svg + span {
    display: none;
  }
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-directory-card-title] {
  font-family: var(--hl-ui);
  font-size: var(--hl-text-lg);
  line-height: 1.05;
}

/* No gradient text or gradient plates. */
body[data-theme-family="premier"][data-design-variant="headliner"] :where(.text-gradient-gold) {
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--hl-fg);
  -webkit-text-fill-color: currentColor;
}

body[data-theme-family="premier"][data-design-variant="headliner"] :where(.bg-gradient-gold) {
  background-image: none;
  background-color: var(--hl-cta);
  color: var(--hl-cta-fg);
}

/* ── 2. Type ────────────────────────────────────────────────────────── */
/* The site's own face is reserved for the big moments (hero, page titles,
 * closing call). Every working heading is set in the condensed UI face. */
body[data-theme-family="premier"][data-design-variant="headliner"] :where(h2, h3, h4, h5, h6) {
  font-family: var(--hl-ui);
  font-weight: var(--hl-weight-bold);
  line-height: var(--hl-leading-tight);
  text-transform: uppercase;
}

body[data-theme-family="premier"][data-design-variant="headliner"] h1,
body[data-theme-family="premier"][data-design-variant="headliner"] [data-component="page-header"] h1 {
  font-family: var(--hl-display);
  font-weight: var(--hl-display-weight);
  line-height: var(--hl-display-leading);
  letter-spacing: var(--hl-display-tracking);
  text-transform: var(--hl-display-case);
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-component="page-header"] h1 {
  font-size: var(--hl-cta-size);
}

/* Retired printed-ink headings read as plain white working titles. */
body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-gold],
body[data-theme-family="premier"][data-design-variant="headliner"] h2[data-premier-gold],
body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-gold][class*="sectionHeading"] {
  color: var(--hl-fg) !important;
  -webkit-text-fill-color: var(--hl-fg);
  font-weight: var(--hl-weight-bold) !important;
}

/* No kicker rules under headings. */
body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-gold]::after {
  display: none;
}

body[data-theme-family="premier"][data-design-variant="headliner"] :where(.eyebrow, .text-primary) {
  color: var(--hl-ink-text);
}

/* No kicker above page titles. (`.eyebrow` also labels form fields and
 * invoice details, so only the page-header kicker is dropped.) */
body[data-theme-family="premier"][data-design-variant="headliner"] [data-component="page-header"] .eyebrow {
  display: none;
}

/* ── Buttons ────────────────────────────────────────────────────────── */
body[data-theme-family="premier"][data-design-variant="headliner"] [data-component="button"] {
  font-family: var(--hl-ui);
  font-weight: var(--hl-weight-bold);
  letter-spacing: var(--hl-tracking-button);
  border-radius: var(--hl-radius);
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-component="button"][data-size="lg"] {
  font-size: var(--hl-text-base);
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-component="button"][data-variant="gold-outline"] {
  color: var(--hl-fg);
  border: 1px solid var(--hl-line-strong);
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-component="button"][data-variant="gold-outline"]:hover {
  border-color: var(--hl-fg);
  background: transparent;
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-component="button"][data-variant="ghost"]:hover {
  background: rgb(255 255 255 / 0.06);
  color: var(--hl-fg);
}

/* Hero quick ask: the quote request is a text action beside the phone. */
body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-headliner-hero] [data-premier-hero-quick-ask] [data-component="button"] {
  min-height: 44px;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--hl-fg);
  font-size: var(--hl-text-md);
  text-decoration: underline solid var(--hl-ink) 2px;
  text-underline-offset: 6px;
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-headliner-hero] [data-premier-hero-quick-ask] [data-component="button"]:hover {
  background: none;
  color: var(--hl-ink-text);
}

/* ── Header ─────────────────────────────────────────────────────────── */
/* One row: logo, nav, search, phone. Transparent with a top shade while it
 * rides the home hero; the page ground once scrolled or on inner pages. */
body[data-theme-family="premier"][data-design-variant="headliner"] nav.glass-strong {
  padding-top: 0;
  background: var(--hl-bg);
  /* No border: a transparent border would repeat the shade gradient
   * into its own row and draw a dark hairline. The scrolled rule is an
   * inset shadow instead. */
  border: 0;
  box-shadow: none;
}

body[data-theme-family="premier"][data-design-variant="headliner"] nav.glass-strong:has([data-header-brand-lockup][data-prominent="true"]) {
  background: linear-gradient(180deg, rgb(0 0 0 / 0.6) 0%, rgb(0 0 0 / 0) 100%);
}

body[data-theme-family="premier"][data-design-variant="headliner"] nav.glass-strong[data-scrolled="true"] {
  background: var(--hl-bg);
  box-shadow: inset 0 -1px 0 var(--hl-line);
}

body[data-theme-family="premier"][data-design-variant="headliner"] nav.glass-strong [data-component="site-header-inner"] {
  max-width: var(--hl-max-w) !important;
  height: var(--hl-header-h);
  padding-inline: var(--hl-gutter);
}

body[data-theme-family="premier"][data-design-variant="headliner"] nav.glass-strong[data-scrolled="true"] [data-component="site-header-inner"] {
  height: 4rem;
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-component="site-header-spacer"] {
  height: var(--hl-header-h);
}

/* Logo: one size on every page, never overhanging the bar. */
body[data-theme-family="premier"][data-design-variant="headliner"] nav.glass-strong a[aria-label$="home"],
body[data-theme-family="premier"][data-design-variant="headliner"] nav.glass-strong a[href="/"] {
  align-self: center;
}

body[data-theme-family="premier"][data-design-variant="headliner"] nav.glass-strong [data-header-brand-lockup] img,
body[data-theme-family="premier"][data-design-variant="headliner"] nav.glass-strong [data-header-brand-lockup][data-prominent="true"] img {
  width: auto;
  height: auto;
  max-height: var(--hl-logo-h);
  max-width: 11rem;
}

body[data-theme-family="premier"][data-design-variant="headliner"] nav.glass-strong[data-scrolled="true"] [data-header-brand-lockup] img {
  max-height: var(--hl-logo-h-scrolled);
  max-width: 9.5rem;
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-header-brand-tagline] {
  display: none !important;
}

/* Nav: plain condensed caps on the bar, active page underlined in ink. */
body[data-theme-family="premier"][data-design-variant="headliner"] nav.glass-strong [role="navigation"] {
  gap: var(--hl-space-1);
  padding: 0;
  border: 0;
  background: none;
}

body[data-theme-family="premier"][data-design-variant="headliner"] nav.glass-strong [role="navigation"] a[data-variant="ghost"],
body[data-theme-family="premier"][data-design-variant="headliner"] nav.glass-strong:not([data-scrolled="true"]) [role="navigation"] a[data-variant="ghost"] {
  font-family: var(--hl-ui);
  font-size: var(--hl-text-base);
  font-weight: var(--hl-weight-semibold);
  letter-spacing: var(--hl-tracking-nav);
  color: var(--hl-fg-soft);
}

body[data-theme-family="premier"][data-design-variant="headliner"] nav.glass-strong [role="navigation"] a[data-variant="ghost"]:hover {
  background: none;
  color: var(--hl-fg);
}

body[data-theme-family="premier"][data-design-variant="headliner"] nav.glass-strong a[aria-current="page"],
body[data-theme-family="premier"][data-design-variant="headliner"] nav.glass-strong:not([data-scrolled="true"]) a[aria-current="page"] {
  color: var(--hl-fg) !important;
  font-weight: var(--hl-weight-semibold);
  text-decoration: underline solid var(--hl-ink) 2px;
  text-underline-offset: 8px;
}

/* Phone sits in the bar at every desktop width; the second row is retired. */
body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-header-phone-row] {
  display: none !important;
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-header-phone] {
  display: block;
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-header-phone] a {
  font-family: var(--hl-ui);
  font-size: var(--hl-text-base);
  font-weight: var(--hl-weight-semibold);
  letter-spacing: var(--hl-tracking-label);
  color: var(--hl-fg-soft);
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-header-search] input[data-component="input"] {
  border: 1px solid var(--hl-line-strong);
  border-radius: var(--hl-radius);
  background: rgb(0 0 0 / 0.28);
  color: var(--hl-fg);
}

body[data-theme-family="premier"][data-design-variant="headliner"] nav.glass-strong[data-scrolled="true"] [data-premier-header-search] input[data-component="input"] {
  background: var(--hl-surface);
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-header-search-icon] {
  color: var(--hl-fg-mute);
}

body[data-theme-family="premier"][data-design-variant="headliner"] #site-mobile-drawer.glass-strong {
  background: var(--hl-bg);
  border-color: var(--hl-line);
}

/* ── Homepage sections that keep their shared components ───────────── */
body[data-theme-family="premier"][data-design-variant="headliner"] [data-css-module~="premier-trusted-by-strip"][class*="section"] {
  padding-block: var(--hl-space-8);
  border-block: 1px solid var(--hl-line);
  background: none;
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-css-module~="premier-trusted-by-strip"][class*="eyebrow"] {
  font-family: var(--hl-ui);
  font-size: var(--hl-text-xs);
  font-weight: var(--hl-weight-semibold);
  letter-spacing: var(--hl-tracking-label);
  color: var(--hl-fg-mute);
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-css-module~="premier-trusted-by-strip"][class*="badge"] {
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--hl-ui);
  font-size: var(--hl-text-lg);
  font-weight: var(--hl-weight-semibold);
  letter-spacing: var(--hl-tracking-name);
  text-transform: uppercase;
  color: var(--hl-fg-soft);
}

/* Closing call plate (HeadlinerClosingCall). The plate is the site's ink,
 * so its lead button takes the page ground, and the second button, the
 * focus ring and the phone take the plate's own text colour. */
body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-closing-actions] {
  --premier-cta-bg: var(--hl-bg);
  --premier-cta-bg-hover: var(--hl-surface-raised);
  --premier-cta-fg: var(--hl-fg);
  --premier-focus-outline: 2px solid var(--hl-cta-fg);
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-closing-actions] [data-component="button"] {
  justify-content: center;
  min-height: 3.5rem;
  font-size: var(--hl-text-md);
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-closing-actions] [data-component="button"][data-variant="gold-outline"] {
  border: 2px solid var(--hl-cta-fg);
  color: var(--hl-cta-fg);
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-closing-actions] [data-component="button"][data-variant="gold-outline"]:hover {
  border-color: var(--hl-cta-fg);
  background: color-mix(in srgb, transparent, var(--hl-cta-fg) 12%);
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-closing-actions] a:not([data-component="button"]):focus-visible {
  outline: 2px solid var(--hl-cta-fg);
  outline-offset: 3px;
}

/* FAQ questions are working text: the condensed UI face, never the
 * site's decorative headline face at small sizes. */
body[data-theme-family="premier"][data-design-variant="headliner"] details > summary {
  font-family: var(--hl-ui);
  font-weight: var(--hl-weight-semibold);
  letter-spacing: var(--hl-tracking-name);
  text-transform: uppercase;
}

/* ── Inner pages ────────────────────────────────────────────────────── */
/* No small kicker labels above headings. The heading says it; the profile's
 * "Tribute to X" line is content, not a kicker, and stays. */
body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-eyebrow],
body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-profile-section-eyebrow],
body[data-theme-family="premier"][data-design-variant="headliner"] [data-css-module~="directory-view-content"][class*="eyebrow"],
body[data-theme-family="premier"][data-design-variant="headliner"] [data-css-module~="directory-discovery-rail"][class*="eyebrow"],
body[data-theme-family="premier"][data-design-variant="headliner"] [data-request-act-page] header > .eyebrow {
  display: none;
}

/* Packages, Services and About open on the photo, title low-left on it, the
 * way the homepage hero does, instead of a centred title over a boxed strip. */
body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-page-hero] {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(24rem, 16rem + 24vw, 36rem);
  padding: var(--hl-gutter);
  overflow: hidden;
  border-radius: var(--hl-radius);
  background: var(--hl-surface);
}

/* A phone hero is tall and narrow: hold the top of the frame clear so the
 * photo reads before the words start. */
@media (max-width: 767px) {
  body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-page-hero] {
    padding-top: 56vw;
  }
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-page-hero] > [class*="heroPhoto"] {
  position: absolute;
  inset: 0;
  z-index: -1;
  min-height: 0;
  max-height: none;
  margin: 0;
  aspect-ratio: auto;
  border-radius: 0;
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-page-hero] > [class*="heroPhoto"]::after {
  background:
    linear-gradient(180deg, transparent 20%, color-mix(in srgb, var(--hl-bg) 90%, transparent) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--hl-bg) 60%, transparent) 0%, transparent 70%);
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-page-hero] > h1[data-premier-gold] {
  max-width: 16ch;
  margin: 0 0 var(--hl-space-4);
  font-size: var(--hl-hero-size);
  font-weight: var(--hl-display-weight) !important;
  text-align: left;
  text-shadow: none;
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-page-hero] > [class*="sectionDeck"] {
  max-width: 38rem;
  margin: 0;
  font-family: var(--hl-body);
  font-size: var(--hl-text-md);
  font-style: normal;
  line-height: var(--hl-leading-body);
  text-align: left;
  color: var(--hl-fg-soft);
}

/* Section headings sit left over left-aligned grids, as on the homepage. */
body[data-theme-family="premier"][data-design-variant="headliner"] h2[data-premier-gold][class*="center"] {
  text-align: left;
}

/* Cards are plain panels: no clip-art icon, a white working title. */
body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-card-icon] {
  display: none;
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-card-title] {
  font-family: var(--hl-ui);
  font-size: var(--hl-text-lg);
  font-weight: var(--hl-weight-bold);
  letter-spacing: var(--hl-tracking-name);
  color: var(--hl-fg);
}

body[data-theme-family="premier"][data-design-variant="headliner"] :where(article, div, li):has(> [data-premier-card-title]),
body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-stats] > * {
  border-radius: var(--hl-radius);
}

/* One figure is not a "by the numbers" section. */
body[data-theme-family="premier"][data-design-variant="headliner"] section:has([data-premier-stats] > :only-child) {
  display: none;
}

/* Form fields share the chassis radius instead of the rounded app default. */
body[data-theme-family="premier"][data-design-variant="headliner"] main :where(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea, button[role="combobox"]) {
  border-radius: var(--hl-radius);
}

/* The booking form is a short column, not a full-width sheet. */
body[data-theme-family="premier"][data-design-variant="headliner"] [data-request-act-page] > [data-component="page-shell"] {
  max-width: 46rem;
}

/* The pricing call to action is a button, not a full-width bar. */
body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-pricing-hero] > a {
  justify-self: start;
}

/* ── Footer: quiet ──────────────────────────────────────────────────── */
/* One neutral ground under the ink plate: the logo and a one-row
 * newsletter on top, five even link columns (featured acts become a plain
 * list of names), then a single small legal block. No ink on the footer
 * except the hover underline; the plate above already carries the colour.
 * Layout hooks are data attributes on PremierFooterContent. */
body[data-theme-family="premier"][data-design-variant="headliner"] footer {
  background: var(--hl-bg);
  border-top: 1px solid var(--hl-line);
  color: var(--hl-fg-mute);
}

body[data-theme-family="premier"][data-design-variant="headliner"] footer > .container {
  width: 100%;
  max-width: var(--hl-max-w);
  margin-inline: auto;
  padding: var(--hl-space-14) var(--hl-gutter) var(--hl-space-8);
}

body[data-theme-family="premier"][data-design-variant="headliner"] footer :where(a, p, li, label) {
  color: var(--hl-fg-mute);
}

body[data-theme-family="premier"][data-design-variant="headliner"] footer :where(a:hover, a:focus-visible) {
  color: var(--hl-fg);
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hl-space-10) var(--hl-space-6);
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer] > * {
  grid-column: 1 / -1;
}

/* The column wrapper dissolves so its four columns and the featured-acts
 * column share one grid. */
body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer-columns] {
  display: contents;
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer] > [data-premier-footer-featured-row],
body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer-column] {
  grid-column: auto;
  align-content: start;
  gap: var(--hl-space-3);
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer-column="site"] { order: 1; }
body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer] > [data-premier-footer-featured-row] { order: 2; }
body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer-column="specialty"] { order: 3; }
body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer-column="information"] { order: 4; }
body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer-column="contact"] { order: 5; }
body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer-social-row] { order: 6; }
body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer-newsletter] { order: 7; }

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer-brand-row] img {
  height: var(--hl-logo-h);
  max-width: 11rem;
}

/* Text wordmark fallback (no footer logo): the condensed UI face, wrapping
 * inside the column so a long site name never widens a phone page. */
body[data-theme-family="premier"][data-design-variant="headliner"] footer [data-premier-footer-brand] {
  max-width: 100%;
  font-family: var(--hl-ui);
  font-weight: var(--hl-weight-bold);
  letter-spacing: var(--hl-tracking-title);
  overflow-wrap: anywhere;
  color: var(--hl-fg);
}

/* Column headings: small condensed caps in white, never the site ink. */
body[data-theme-family="premier"][data-design-variant="headliner"] footer :where(h2, h3, [data-premier-footer-heading], [data-premier-footer-section-label]) {
  margin: 0 0 var(--hl-space-1);
  font-family: var(--hl-ui);
  font-size: var(--hl-text-sm);
  font-weight: var(--hl-weight-semibold);
  line-height: var(--hl-leading-tight);
  letter-spacing: var(--hl-tracking-label);
  text-transform: uppercase;
  color: var(--hl-fg);
}

body[data-theme-family="premier"][data-design-variant="headliner"] footer :where([data-premier-footer-link], [data-premier-featured-act]) {
  font-family: var(--hl-body);
  font-size: var(--hl-text-sm);
  line-height: var(--hl-leading-snug);
  text-decoration: underline solid transparent 1px;
  text-underline-offset: 5px;
  transition: color 160ms ease-out, text-decoration-color 160ms ease-out;
}

body[data-theme-family="premier"][data-design-variant="headliner"] footer :where([data-premier-footer-link], [data-premier-featured-act]):where(:hover, :focus-visible) {
  color: var(--hl-fg);
  text-decoration-color: var(--hl-ink);
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer-column="contact"] > p:not([data-premier-footer-heading]) {
  margin-top: var(--hl-space-1);
  font-size: var(--hl-text-xs);
  line-height: var(--hl-leading-body);
}

/* Featured acts: a plain list of names, like the other columns. */
body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer-featured-row] {
  display: grid;
  padding: 0;
  border: 0;
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer-featured-grid] {
  display: grid;
  grid-template-columns: none;
  gap: var(--hl-space-3);
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-featured-act] {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  font-weight: var(--hl-weight-regular);
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-featured-act]:where(:hover, :focus-visible) {
  border: 0;
  background: none;
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-featured-act-thumb] {
  display: none;
}

/* Social: bare icons, no boxes. */
body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer-social-row] {
  gap: var(--hl-space-2);
  padding: 0;
  border: 0;
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer-social-link] {
  width: 44px;
  height: 44px;
  border: 0;
  color: var(--hl-fg-mute);
}

body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer-social-link]:where(:hover, :focus-visible) {
  background: none;
  color: var(--hl-fg);
}

/* Newsletter: one heading, one line of copy, the field and button on one
 * row. The "Newsletter" kicker is dropped; the field keeps its label for
 * assistive tech. */
body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer-newsletter] {
  padding: 0;
  border: 0;
}

body[data-theme-family="premier"][data-design-variant="headliner"] footer [data-premier-footer-newsletter] [data-component="section-card"] > div {
  gap: var(--hl-space-3);
  padding: 0;
}

body[data-theme-family="premier"][data-design-variant="headliner"] footer [data-premier-footer-newsletter] .eyebrow {
  display: none;
}

body[data-theme-family="premier"][data-design-variant="headliner"] footer [data-premier-footer-newsletter] [data-component="section-card"] > div > p:not(.eyebrow) {
  font-size: var(--hl-text-sm);
  line-height: var(--hl-leading-snug);
}

body[data-theme-family="premier"][data-design-variant="headliner"] footer [data-premier-footer-newsletter] form {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--hl-space-2);
  align-items: end;
}

body[data-theme-family="premier"][data-design-variant="headliner"] footer [data-premier-footer-newsletter] form > label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body[data-theme-family="premier"][data-design-variant="headliner"] footer [data-premier-footer-newsletter] form > div:last-child {
  display: contents;
}

body[data-theme-family="premier"][data-design-variant="headliner"] footer [data-premier-footer-newsletter] form > div:last-child > :not([data-component="button"]) {
  grid-column: 1 / -1;
  grid-row: 2;
}

body[data-theme-family="premier"][data-design-variant="headliner"] footer [data-premier-footer-newsletter] form > div:last-child > [data-component="button"] {
  grid-column: 2;
  grid-row: 1;
  height: 3rem;
}

body[data-theme-family="premier"][data-design-variant="headliner"] footer [data-premier-footer-newsletter] form :where(p) {
  font-size: var(--hl-text-xs);
}

body[data-theme-family="premier"][data-design-variant="headliner"] footer [data-premier-footer-newsletter] input[type="email"] {
  height: 3rem;
  border: 1px solid var(--hl-line-strong);
  border-radius: var(--hl-radius);
  background: var(--hl-surface);
  color: var(--hl-fg);
}

body[data-theme-family="premier"][data-design-variant="headliner"] footer [data-premier-footer-newsletter] input[type="email"]::placeholder {
  color: var(--hl-fg-mute);
}

body[data-theme-family="premier"][data-design-variant="headliner"] footer [data-premier-footer-newsletter] input:focus-visible {
  border-color: var(--hl-fg);
  box-shadow: none;
  outline: 2px solid var(--hl-fg);
  outline-offset: 2px;
}

/* Legal block: one hairline, then the supplemental links, the issue
 * report as a text link, the licence lines and the copyright in small
 * type. */
body[data-theme-family="premier"][data-design-variant="headliner"] footer [data-footer-supplemental-legal] {
  margin-top: var(--hl-space-14);
  padding-top: var(--hl-space-6);
  border-top: 1px solid var(--hl-line);
}

body[data-theme-family="premier"][data-design-variant="headliner"] footer [data-footer-supplemental-legal] ul {
  gap: var(--hl-space-1) var(--hl-space-6);
  font-size: var(--hl-text-sm);
}

body[data-theme-family="premier"][data-design-variant="headliner"] footer > .container > div:last-child:not([data-premier-footer]) {
  display: grid;
  gap: var(--hl-space-2);
  max-width: 60rem;
  margin-top: var(--hl-space-5);
  padding-top: 0;
  border-top: 0;
  font-size: var(--hl-text-xs);
  line-height: var(--hl-leading-body);
}

body[data-theme-family="premier"][data-design-variant="headliner"] footer > .container > div:last-child:not([data-premier-footer]) :where(p) {
  margin: 0;
}

body[data-theme-family="premier"][data-design-variant="headliner"] footer [data-issue-report-affordance] {
  justify-content: flex-start;
  gap: var(--hl-space-2);
  margin: 0 0 var(--hl-space-2);
  padding: 0;
  border: 0;
}

body[data-theme-family="premier"][data-design-variant="headliner"] footer [data-issue-report-affordance] [data-component="button"] {
  height: auto;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--hl-fg-soft);
  font-family: var(--hl-body);
  font-size: var(--hl-text-xs);
  font-weight: var(--hl-weight-regular);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline solid var(--hl-line-strong) 1px;
  text-underline-offset: 4px;
}

body[data-theme-family="premier"][data-design-variant="headliner"] footer [data-issue-report-affordance] [data-component="button"]:hover {
  background: none;
  color: var(--hl-fg);
  text-decoration-color: var(--hl-ink);
}

@media (min-width: 768px) {
  body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Desktop: logo left, newsletter right on the top row; five even columns
 * below it. */
@media (min-width: 1024px) {
  body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--hl-space-8);
    row-gap: var(--hl-space-14);
  }

  body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer-brand-row] {
    grid-column: 1 / span 2;
    grid-row: 1;
  }

  body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer-newsletter] {
    grid-column: 4 / -1;
    grid-row: 1;
  }

  body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer] > [data-premier-footer-featured-row],
  body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer-column] {
    grid-row: 2;
  }

  body[data-theme-family="premier"][data-design-variant="headliner"] [data-premier-footer-social-row] {
    grid-row: 3;
  }
}