/* Renew Vitality: Luxury Clinical
   Brand: Black + White + Warm Neutrals, Montserrat (headings), Inter (body)
   Architecture reference: skills/static-site-build.md
*/

/* Fonts are self-hosted (site/fonts/) so no third-party stylesheet blocks the
   first paint. General Sans comes from Fontshare (free licence, self-hosting
   allowed). The icon font is Material Icons Round cut down to only the icons
   the site uses (6 KB instead of 174 KB); to add an icon, rebuild it with
   tools/build-icon-font.py or it will show as its name in plain text. */
@font-face { font-family: 'General Sans'; src: url('/fonts/general-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/fonts/general-sans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/fonts/general-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/fonts/general-sans-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Material Icons Round'; src: url('/fonts/material-icons-round-subset.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; }


:root {
  --black: #0B0B0B;
  --ink: #1a1a1a;
  --white: #ffffff;
  --cream: #f6f3ee;
  --beige: #e9e3d7;
  --gold: #b79354;
  --gold-dark: #876939;  /* was #8f6f3c, 4.21:1 on cream; this passes AA (4.62) */
  /* Gold for small text and star ratings on LIGHT backgrounds. --gold is 2.87:1
     on white and 2.59:1 on cream, so it fails WCAG AA for text (4.5:1 needed).
     This clears both: 6.81 on white, 6.16 on cream. --gold stays the brand accent
     for backgrounds, borders, and text on the dark bands where it has plenty of
     contrast. */
  --gold-text: #6f5730;
  --gray-100: #f4f4f4;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-500: #6b7280;
  --gray-700: #374151;
  --gray-900: #111827;

  /* v2b design system: General Sans everywhere (display + body). */
  --font-head: 'General Sans', 'Inter', system-ui, sans-serif;
  --font-body: 'General Sans', 'Inter', system-ui, sans-serif;

  --radius: 4px;
  --radius-lg: 8px;
  --transition: 0.2s ease;
  --container: 1200px;

  /* bridge aliases */
  --navy: var(--black);
  --orange: var(--gold);
  --orange-light: var(--beige);
  --text-light: #555;
  --bg-light: var(--cream);
  --border: var(--gray-200);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--black);
}

h1 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: 16px; }
h3 { font-size: 1.35rem; margin-bottom: 10px; }
h4 { font-size: 1.1rem; margin-bottom: 8px; }

p { margin-bottom: 16px; }
p:last-child { margin-bottom: 0; }

.material-icons-round {
  font-family: 'Material Icons Round';
  font-weight: normal; font-style: normal;
  font-size: inherit; line-height: 1;
  letter-spacing: normal; text-transform: none;
  white-space: nowrap; word-wrap: normal; direction: ltr;
  font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  display: inline-flex; align-items: center; justify-content: center;
  /* one glyph is 1em square; clip so the icon's name never shows or shifts layout while the font loads */
  width: 1em; height: 1em; overflow: hidden;
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px;
  padding: 15px 28px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.97rem;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-primary { background: var(--black); color: var(--white); }
.btn-primary:hover { background: var(--gold); color: var(--white); }
/* White on --gold (#b79354) is 2.87:1 and fails WCAG AA, which needs 4.5:1 at
   this size and weight. --gold-dark was already the hover colour, so promoting it
   to the base is the smallest visible change that passes (4.85:1), with a deeper
   tone for hover (6.81:1). --gold stays the brand accent everywhere else. */
.btn-gold { background: var(--gold-dark); color: var(--white); }
.btn-gold:hover { background: #6f5730; color: var(--white); }
.btn-outline { background: transparent; color: var(--black); border-color: var(--black); }
.btn-outline:hover { background: var(--black); color: var(--white); }
.btn-outline-white { background: transparent; color: var(--white); border-color: var(--white); }
.btn-outline-white:hover { background: var(--white); color: var(--black); }
.btn-sm { padding: 10px 18px; font-size: 0.85rem; }
.btn-lg { padding: 18px 36px; font-size: 1rem; }

/* ============ TOP BAR ============ */
.top-bar {
  background: var(--black);
  color: var(--white);
  font-size: 0.85rem;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.top-bar .container {
  display: flex; justify-content: space-between; align-items: center;
}
.top-bar-left { display: flex; gap: 14px; color: var(--cream); }
.top-bar-divider { color: rgba(255,255,255,0.35); }
.top-bar-right { display: flex; align-items: center; gap: 18px; }
.top-bar-phone { color: var(--white); font-weight: 700; letter-spacing: 0.02em; }
.top-bar-phone:hover { color: var(--gold); }

/* ============ HEADER ============
   v2b: translucent "glass" sticky bar that firms up on scroll. Kept readable on
   every page (dark text on a light blur) rather than transparent-with-light-text,
   which would vanish on the many pages whose first section is light. */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(246, 243, 238, 0.70);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(226, 221, 211, 0.6);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.site-header.scrolled {
  background: rgba(246, 243, 238, 0.96);
  border-bottom-color: var(--line, #e2ddd3);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
/* ===== Transparent-over-hero header, matching the bespoke pages. Applies ONLY
   at rest AND only when the header is immediately followed by a dark hero
   (:has gate), so any light-top page keeps the solid header. On scroll it
   reverts to the solid .site-header.scrolled state above. ===== */
.site-header:not(.scrolled):has(+ .page-hero),
.site-header:not(.scrolled):has(+ .lifestyle-full) {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: rgba(255,255,255,0.16);
}
.site-header:not(.scrolled):has(+ .page-hero) .site-logo img,
.site-header:not(.scrolled):has(+ .lifestyle-full) .site-logo img { filter: brightness(0) invert(1) drop-shadow(0 1px 5px rgba(0,0,0,.5)); }
.site-header:not(.scrolled):has(+ .page-hero) .site-nav a,
.site-header:not(.scrolled):has(+ .lifestyle-full) .site-nav a { color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.55); }
.site-header:not(.scrolled):has(+ .page-hero) .header-phone-number,
.site-header:not(.scrolled):has(+ .lifestyle-full) .header-phone-number { color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.55); }
.site-header:not(.scrolled):has(+ .page-hero) .header-phone-label,
.site-header:not(.scrolled):has(+ .lifestyle-full) .header-phone-label { color: rgba(255,255,255,0.78); }
.site-header:not(.scrolled):has(+ .page-hero) .hamburger span,
.site-header:not(.scrolled):has(+ .lifestyle-full) .hamburger span { background:#fff; }
/* Dropdown links live on a white panel, so keep them dark (the white-over-hero
   rule above would otherwise make them white-on-white and bleed). */
.site-header:not(.scrolled):has(+ .page-hero) .nav-dropdown a,
.site-header:not(.scrolled):has(+ .lifestyle-full) .nav-dropdown a { color:#2a2621; text-shadow:none; }
/* pull the dark hero up so the transparent header overlaps it */
.site-header:has(+ .page-hero) + .page-hero,
.site-header:has(+ .lifestyle-full) + .lifestyle-full { margin-top: -86px; }
.site-header:has(+ .page-hero) + .page-hero { padding-top: 112px; }
/* gold Free Consult in the header, matching the bespoke pages */
.header-cta .btn { background: var(--gold); color:#1a1408; border-color: var(--gold); text-transform:none; }
.header-cta .btn:hover { background:#c8a565; color:#1a1408; }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0;
  gap: 18px;
}
.site-logo { flex-shrink: 0; }
.site-logo img { height: 52px; width: auto; }
.site-nav { display: flex; gap: 26px; align-items: center; flex-wrap: nowrap; }
.site-nav a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  color: #2a2621;
  text-transform: none;
  letter-spacing: 0;
  position: relative;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--black); border-bottom-color: var(--gold); }
/* "For Men" and "For Women" are wrapped in .nav-item so they can hold a
   dropdown; the rest of the nav links are direct children of .site-nav. That
   made two different flex items: a direct <a> is block level and its 6px
   padding counts toward its height, while an <a> inside .nav-item stays inline,
   where vertical padding does not affect the line box. The two ended up 32px
   and 27px tall, centred on different axes, so the wrapped links sat lower than
   the rest. Making .nav-item a flex box gives its anchor the same block layout
   as the others, so every link shares one baseline. */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown { display: block; }
.nav-dropdown {
  display: none;
  position: absolute; top: 100%; left: -16px;
  margin-top: 12px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 12px 0;
  min-width: 240px;
  box-shadow: 0 16px 38px rgba(0,0,0,0.12);
}
/* Invisible hover bridge: keeps the menu open while the cursor crosses the gap
   between the nav label and the dropdown, so it never flickers shut. */
.nav-dropdown::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.nav-dropdown a {
  display: block;
  padding: 8px 20px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 0.92rem;
}
/* The header needs 1224px of content width for logo + nav + phone + CTA, but the
   shared .container caps content at 1152 (1200 minus 24px padding each side). So
   above the 1200px band handled below, the Free Consult button hung 8px past the
   viewport on EVERY page and was clipped, not scrollable, which is why nothing
   scrolled sideways to give it away. The header and the bar above it get a wider
   container than the body column; the article measure stays 1200. */
.site-header .container, .top-bar .container { max-width: 1340px; }

.header-cta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.header-phone { text-align: right; line-height: 1.2; white-space: nowrap; }
.header-phone-label { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray-500); }
.header-phone-number { font-family: var(--font-head); font-weight: 800; font-size: 1rem; color: var(--black); white-space: nowrap; }
@media (max-width: 1200px) {
  .site-nav { gap: 16px; }
  .site-nav a { font-size: 0.78rem; }
  .header-phone-label { display: none; }
}
/* Between the 1024px hamburger breakpoint and 1200px the header still did not
   fit: nav + phone + CTA measured 1189px inside a 1157px viewport, so EVERY page
   scrolled sideways, including the homepage. The tightening above was not enough.
   The phone number is already in the top bar directly above, so dropping the
   duplicate from the header in this band costs nothing and removes the overflow.

   The band runs to 1280px, not 1200px. Above 1280 the wider header container
   gives 1233px of content, which clears the 1224px the header needs; below it
   there is not enough room even with the wider container, so the duplicate phone
   comes out. Those two numbers are what set this breakpoint. */
@media (max-width: 1280px) and (min-width: 1025px) {
  .site-nav { gap: 13px; }
  .header-phone { display: none; }
  .header-cta .btn-sm { padding-left: 14px; padding-right: 14px; }
}
/* Right at the bottom of that band, just above the hamburger breakpoint, even a
   phoneless header ran 11px over: seven nav labels do not fit in 977px of content
   at 0.78rem. One more notch of tightening covers 1025 to 1080, rather than
   pushing the hamburger up and taking the full nav away from tablet landscape. */
@media (max-width: 1080px) and (min-width: 1025px) {
  .site-nav { gap: 10px; }
  .site-nav a { font-size: 0.72rem; letter-spacing: 0; }
}
.hamburger {
  display: none;
  background: transparent; border: 0; cursor: pointer;
  width: 36px; height: 36px;
  flex-direction: column; justify-content: center; gap: 5px;
}
.hamburger span { display: block; width: 24px; height: 2px; background: var(--black); }

/* ============ HERO ============ */
/* Hero: Lucid-style full-screen */
.hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  color: var(--white);
  overflow: hidden;
  display: flex;
  align-items: flex-end; /* pin to bottom */
}
.hero-video-wrap {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden;
}
.hero-video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.78) 0%,
    rgba(0,0,0,0.38) 40%,
    rgba(0,0,0,0.08) 70%,
    transparent 100%
  );
}
.hero-content {
  position: relative; z-index: 3;
  width: 100%;
  padding: 0 0 72px;
}
.hero-content .container {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: flex-end;
}
.hero-left .eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 20px;
}
.hero-left h1 {
  color: var(--white);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 600;
  line-height: 1.08;
  margin-bottom: 18px;
}
.hero-sub {
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.80);
  margin-bottom: 30px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.hero-phone-link { color: rgba(255,255,255,0.70); font-size: 0.9rem; }
.hero-phone-link a { color: rgba(255,255,255,0.90); font-weight: 600; }

/* Glass form card */
.hero-card {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--white);
  padding: 28px 28px 24px;
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(0,0,0,0.30);
}
.hero-card h3 {
  font-size: 1.1rem;
  margin-bottom: 4px;
  color: var(--white);
  letter-spacing: 0.01em;
}
.hero-card .hero-card-sub {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  margin-bottom: 18px;
}
.hero-card .form-row { margin-bottom: 10px; }
.hero-card .form-row label { color: rgba(255,255,255,0.75); font-size: 0.7rem; }
.hero-card .form-row input,
.hero-card .form-row select,
.hero-card .form-row textarea {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  color: var(--white);
  padding: 10px 12px;
  font-size: 0.9rem;
}
.hero-card .form-row input::placeholder,
.hero-card .form-row textarea::placeholder { color: rgba(255,255,255,0.40); }
.hero-card .form-row input:focus,
.hero-card .form-row select:focus,
.hero-card .form-row textarea:focus {
  background: rgba(255,255,255,0.15);
  border-color: var(--gold);
  outline: none;
}
.hero-card .form-row select option { color: var(--ink); background: var(--white); }
/* white on --gold is 2.87:1; --gold-dark clears AA at 4.66, matching .btn-gold */
.hero-card .form-submit { background: var(--gold-dark); margin-top: 4px; }
.hero-card .form-submit:hover { background: #6f5730; }
.hero-card .form-note { color: rgba(255,255,255,0.45); font-size: 0.78rem; }
.form-row { margin-bottom: 14px; }
.form-row label {
  display: block;
  font-family: var(--font-head);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-700);
  margin-bottom: 6px;
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--white);
  transition: border-color var(--transition);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-submit {
  width: 100%;
  background: var(--black);
  color: var(--white);
  padding: 14px;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition);
}
.form-submit:hover { background: var(--gold-dark); }
.form-note {
  font-size: 0.78rem;
  color: var(--gray-500);
  margin-top: 10px;
  text-align: center;
}

/* ============ TRUST BAR ============ */
.trust-bar {
  background: var(--cream);
  border-bottom: 1px solid var(--beige);
  padding: 32px 0;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: center;
}
.trust-item {
  display: flex; align-items: center; gap: 14px;
  font-size: 0.9rem;
  color: var(--gray-700);
}
.trust-icon {
  width: 44px; height: 44px;
  background: var(--white);
  border: 1px solid var(--beige);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
}
.trust-icon .material-icons-round { font-size: 22px; }
.trust-item strong { display: block; color: var(--black); font-family: var(--font-head); font-size: 0.95rem; }

/* ============ SECTIONS ============ */
.section { padding: 90px 0; }
.section-sm { padding: 60px 0; }
.section-pale { background: var(--cream); }
.section-dark { background: var(--black); color: var(--white); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--white); }

.section-head { text-align: center; max-width: 780px; margin: 0 auto 56px; }
.section-head .eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 14px;
}
.section-head p { font-size: 1.05rem; color: var(--gray-700); }
.section-dark .section-head p { color: rgba(255,255,255,0.78); }

/* ============ CONVERSATION BLOCK ============ */
.convo {
  max-width: 860px; margin: 0 auto;
  font-size: 1.1rem;
}
.convo-list {
  list-style: none;
  padding: 0;
  margin: 28px 0;
}
.convo-list li {
  padding: 14px 0 14px 28px;
  border-bottom: 1px solid var(--gray-200);
  position: relative;
  font-style: italic;
  color: var(--gray-700);
}
.convo-list li:before {
  content: "\201C";
  position: absolute; left: 0; top: 14px;
  font-family: var(--font-head);
  font-size: 1.8rem;
  color: var(--gold);
  line-height: 1;
}

/* ============ MECHANISM STEPS ============ */
.steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.step {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
  transition: all var(--transition);
}
.step:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.06); }
.step-num {
  font-family: var(--font-head);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 8px;
}
.step h3 { margin-bottom: 12px; }
.step p { color: var(--gray-700); font-size: 0.98rem; }

/* ============ SERVICES GRID ============ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.svc-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: all var(--transition);
  display: flex; flex-direction: column;
}
.svc-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); }
.svc-icon {
  width: 52px; height: 52px;
  background: var(--cream);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  margin-bottom: 20px;
}
.svc-icon .material-icons-round { font-size: 26px; }
.svc-card h3 { margin-bottom: 10px; }
.svc-card p { color: var(--gray-700); font-size: 0.95rem; flex-grow: 1; margin-bottom: 16px; }
.svc-link {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--black);
  display: inline-flex; align-items: center; gap: 6px;
}
.svc-link:hover { color: var(--gold); }
.svc-link:after { content: "\2192"; transition: transform var(--transition); }
.svc-link:hover:after { transform: translateX(4px); }

/* ============ TESTIMONIALS ============ */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.testimonial {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex; flex-direction: column;
}
.testimonial-stars { color: var(--gold-text); margin-bottom: 14px; font-size: 0.95rem; letter-spacing: 2px; }
.testimonial-hook {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--black);
  margin-bottom: 14px;
}
.testimonial-body { color: var(--gray-700); font-size: 0.95rem; font-style: italic; flex-grow: 1; }
.testimonial-meta {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--gray-200);
  font-size: 0.85rem; color: var(--gray-500);
}
.testimonial-meta strong { color: var(--black); font-family: var(--font-head); }

/* ============ LOCATION CARDS ============ */
.locations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.loc-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: all var(--transition);
}
.loc-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.06); }
.loc-card h3 { font-size: 1.2rem; margin-bottom: 6px; }
.loc-card .loc-rating { color: var(--gold-text); font-size: 0.9rem; margin-bottom: 12px; }
.loc-card address {
  font-style: normal;
  color: var(--gray-700); font-size: 0.92rem;
  margin-bottom: 16px; line-height: 1.5;
}
.loc-card .loc-phone {
  font-family: var(--font-head); font-weight: 700; color: var(--black);
  display: block; margin-bottom: 14px;
}

/* ============ FAQ ============ */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--gray-200);
  padding: 22px 0;
}
.faq-item h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
  display: flex; align-items: flex-start; gap: 12px;
}
.faq-item h3:before {
  content: "Q.";
  color: var(--gold);
  flex-shrink: 0;
}
.faq-item p { color: var(--gray-700); padding-left: 28px; }

/* ============ FINAL CTA ============ */
.cta-block {
  text-align: center;
  max-width: 720px; margin: 0 auto;
}
.cta-block h2 { color: var(--white); margin-bottom: 20px; }
.cta-block p { color: rgba(255,255,255,0.8); margin-bottom: 28px; font-size: 1.05rem; }
.cta-block .btn { margin: 0 6px; }

/* ============ FOOTER ============ */
.site-footer {
  background: var(--black);
  color: rgba(255,255,255,0.7);
  padding: 70px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 50px;
}
.footer-brand .footer-logo { height: 52px; width: auto; margin-bottom: 20px; }
.footer-brand p { color: rgba(255,255,255,0.6); font-size: 0.95rem; max-width: 320px; }
.footer-contact-line { margin-top: 18px; font-size: 0.92rem; }
.footer-phone-link { color: var(--white); font-weight: 700; font-family: var(--font-head); font-size: 1.1rem; display: block; margin-bottom: 6px; }
.footer-address { color: rgba(255,255,255,0.6); }
.site-footer h4 {
  color: var(--white);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
}
.site-footer ul { list-style: none; padding: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer li a { color: rgba(255,255,255,0.7); font-size: 0.93rem; }
.site-footer li a:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  color: rgba(255,255,255,0.45);
  font-size: 0.85rem;
}

/* ============ FLOAT BAR + CHAT BUBBLE (mobile only) ============ */
.float-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 999;
  background: var(--black);
  padding: 10px 14px 12px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}
.float-bar-inner { display: flex; gap: 10px; max-width: 500px; margin: 0 auto; }
.float-call, .float-quote {
  flex: 1;
  text-align: center;
  padding: 13px 10px;
  border-radius: var(--radius);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.float-call { background: var(--gold); color: #1a1408; }  /* dark text: white on gold is 2.87:1 */
.float-quote { background: var(--white); color: var(--black); }
.float-call .material-icons-round { font-size: 18px; }

.chat-bubble {
  display: none;
  position: fixed; bottom: 82px; right: 18px;
  z-index: 998;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--white);
  align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.chat-bubble .material-icons-round { font-size: 26px; color: var(--white); }

/* ============ INNER PAGES ============ */
.page-hero {
  background: var(--black);
  color: var(--white);
  padding: 80px 0 60px;
  border-bottom: 4px solid var(--gold);
}
.page-hero .eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.page-hero h1 {
  color: var(--white);
  font-size: clamp(2rem, 4vw, 3rem);
  max-width: 860px;
  margin-bottom: 16px;
}
.page-hero p {
  color: rgba(255,255,255,0.8);
  font-size: 1.1rem;
  max-width: 720px;
}
.page-hero .page-hero-ctas { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.page-hero .page-hero-ctas .btn-primary { background: var(--gold); }
.page-hero .page-hero-ctas .btn-primary:hover { background: var(--gold-dark); }

.breadcrumbs {
  padding: 14px 0;
  font-size: 0.85rem;
  /* gray-500 is 4.37:1 on cream, just under AA */
  color: #55606f;
  background: var(--cream);
  border-bottom: 1px solid var(--beige);
}
.breadcrumbs a { color: var(--gray-700); text-decoration: underline; text-underline-offset: 2px; }
.breadcrumbs a:hover { color: var(--gold); }
.breadcrumbs .sep { margin: 0 8px; color: var(--gray-300); }

.article-body {
  max-width: 820px;
  margin: 0 auto;
  font-size: 1.05rem;
}
.article-body h2 { margin-top: 48px; margin-bottom: 16px; }
.article-body h3 { margin-top: 32px; margin-bottom: 10px; }
.article-body p { color: var(--gray-700); }
.article-body ul, .article-body ol { color: var(--gray-700); margin: 0 0 16px 24px; }
.article-body li { margin-bottom: 8px; }
.article-body strong { color: var(--black); }
.article-body blockquote {
  border-left: 3px solid var(--gold);
  padding-left: 20px;
  margin: 24px 0;
  font-style: italic;
  color: var(--gray-700);
}
.article-body hr {
  border: 0; border-top: 1px solid var(--gray-200);
  margin: 40px 0;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.info-card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.info-card h3 { margin-bottom: 14px; }

/* contact form block */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}
.contact-info h3 { margin-bottom: 12px; }
.contact-info p { color: var(--gray-700); margin-bottom: 24px; }
.contact-info dl { margin: 0; }
.contact-info dt {
  font-family: var(--font-head);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gray-500);
  margin-top: 18px;
}
.contact-info dd { margin: 4px 0 0 0; color: var(--black); font-weight: 500; }
.contact-info dd a { color: var(--black); border-bottom: 1px dotted var(--gray-300); }
.contact-info dd a:hover { color: var(--gold); border-bottom-color: var(--gold); }

.contact-form {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 36px;
}

/* ============ STATS BAND ============ */
.stats-band {
  background: var(--black);
  color: var(--white);
  padding: 56px 0;
  border-top: 4px solid var(--gold);
  border-bottom: 4px solid var(--gold);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-block { padding: 0 12px; }
.stat-num {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  color: var(--gold);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.stat-label {
  font-family: var(--font-head);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.75);
}
.stat-sub { font-size: 0.8rem; color: rgba(255,255,255,0.5); margin-top: 4px; display: block; }

/* ============ UNBOXING / AT-HOME EXPERIENCE ============ */
.unboxing { background: var(--cream); padding: 100px 0; }
.unboxing-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.unboxing-visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,0.35);
  background: #0b0b0b;
}
.kit-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Mobile-only form section ───────────────── */
.mobile-form-section {
  display: none; /* hidden on desktop */
  padding: 48px 0;
  background: var(--black);
  color: var(--white);
}
.mobile-form-section h3 {
  color: var(--white);
  font-size: 1.4rem;
  margin-bottom: 6px;
}
.mobile-form-section .hero-card-sub {
  color: rgba(255,255,255,0.65);
  font-size: 0.9rem;
  margin-bottom: 20px;
}
.mobile-form-section .form-row label { color: rgba(255,255,255,0.75); }
.mobile-form-section .form-row input,
.mobile-form-section .form-row select {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.20);
  color: var(--white);
}
.mobile-form-section .form-row input::placeholder { color: rgba(255,255,255,0.40); }
.mobile-form-section .form-row select option { color: var(--ink); background: var(--white); }
.mobile-form-section .form-submit { background: var(--gold-dark); }
.mobile-form-section .form-note { color: rgba(255,255,255,0.45); font-size: 0.78rem; }
@media (max-width: 768px) {
  .mobile-form-section { display: block; }
}

/* ── Full-bleed lifestyle section ────────────── */
.lifestyle-full {
  position: relative;
  width: 100%;
  height: 90vh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.lifestyle-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.lifestyle-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.80) 0%,
    rgba(0,0,0,0.45) 40%,
    rgba(0,0,0,0.10) 70%,
    transparent 100%
  );
}
.lifestyle-content {
  position: relative;
  z-index: 2;
  padding: 0 80px 72px;
  max-width: 620px;
  color: #fff;
}
.lifestyle-eyebrow {
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
}
.lifestyle-headline {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 600;
  line-height: 1.12;
  color: #fff;
  margin: 0 0 18px;
}
.lifestyle-sub {
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.80);
  margin: 0;
}
/* Women's lifestyle: subjects right, keep left bright for text */
.lifestyle-overlay-women {
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.78) 0%,
    rgba(0,0,0,0.40) 40%,
    rgba(0,0,0,0.10) 65%,
    transparent 100%
  ),
  linear-gradient(
    to right,
    rgba(0,0,0,0.45) 0%,
    transparent 55%
  );
}
/* Women's image: show full subject, position from bottom */
.lifestyle-women .lifestyle-bg {
  object-position: center bottom;
}
@media (max-width: 768px) {
  .lifestyle-full { height: 70vh; min-height: 480px; }
  .lifestyle-content { padding: 0 28px 48px; }
  .lifestyle-headline { font-size: 2rem; }
}

/* Premium rendered kit box */
.kit-box {
  position: relative;
  width: 62%;
  aspect-ratio: 3/4;
  z-index: 2;
  transform: rotateX(4deg) rotateY(-10deg) rotateZ(-2deg);
  transform-style: preserve-3d;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.55) 100%),
    linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 50%, #080808 100%);
  border: 1px solid rgba(183,147,84,0.35);
  border-radius: 10px;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.6),
    0 10px 24px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.08);
  padding: 8%;
  display: flex; flex-direction: column;
  justify-content: space-between;
}
.kit-box:before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 100%);
  border-radius: 10px 10px 0 0;
  pointer-events: none;
}
.kit-box-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  font-family: var(--font-head);
}
.kit-brand-mark {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #f4d98e 0%, #b79354 40%, #8f6f3c 70%, #d4b06a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.kit-batch {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(183,147,84,0.8);
  font-weight: 600;
  text-align: right;
  line-height: 1.5;
}
.kit-band {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 12% 0;
  opacity: 0.6;
}
.kit-box-center { text-align: center; }
.kit-label {
  font-family: var(--font-head);
  font-size: 0.58rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 6px;
}
.kit-product {
  font-family: var(--font-head);
  font-size: clamp(1rem, 2.3vw, 1.45rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #f0e6d2;
  line-height: 1.15;
  margin-bottom: 4px;
}
.kit-product-sub {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: rgba(255,255,255,0.5);
  font-style: italic;
}
.kit-box-bottom {
  display: flex; justify-content: space-between; align-items: flex-end;
  font-family: var(--font-head);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.kit-seal {
  width: 38px; height: 38px;
  border: 1px solid rgba(183,147,84,0.5);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1;
  font-weight: 700;
  background: radial-gradient(circle, rgba(183,147,84,0.12), transparent 70%);
}

/* Little vial next to box */
.kit-vial {
  position: absolute;
  right: 8%;
  bottom: 10%;
  width: 12%;
  aspect-ratio: 1/3.2;
  z-index: 3;
  transform: rotateZ(8deg);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.5));
}
.kit-vial:before {
  content: "";
  position: absolute;
  top: 0; left: 20%; right: 20%; height: 14%;
  background: linear-gradient(180deg, #2a2a2a 0%, #0e0e0e 100%);
  border-radius: 3px 3px 0 0;
  border: 1px solid #3a3a3a;
}
.kit-vial:after {
  content: "";
  position: absolute;
  top: 14%; bottom: 0; left: 0; right: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 30%),
    linear-gradient(180deg, #f6ecd4 0%, #d4b06a 50%, #8f6f3c 100%);
  border-radius: 4px 4px 8px 8px;
  border: 1px solid rgba(0,0,0,0.4);
  box-shadow: inset -2px 0 4px rgba(0,0,0,0.3), inset 2px 0 4px rgba(255,255,255,0.15);
}
.unboxing-features { list-style: none; padding: 0; margin: 32px 0 0 0; }
.unboxing-features li {
  display: flex; gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--beige);
}
.unboxing-features li:last-child { border-bottom: 1px solid var(--beige); }
.unboxing-icon {
  width: 46px; height: 46px;
  background: var(--white);
  border: 1px solid var(--beige);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
}
.unboxing-icon .material-icons-round { font-size: 22px; }
.unboxing-features h4 { margin-bottom: 4px; font-size: 1.05rem; }
.unboxing-features p { margin: 0; font-size: 0.95rem; color: var(--gray-700); }

/* ============ CREDENTIAL STRIP ============ */
.cred-strip {
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: 36px 0;
}
.cred-strip-label {
  text-align: center;
  font-family: var(--font-head);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gray-500);
  margin-bottom: 24px;
}
.cred-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  align-items: center;
}
.cred-item {
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--gray-700);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 8px 0;
  border-right: 1px solid var(--gray-200);
}
.cred-item:last-child { border-right: 0; }
.cred-item .material-icons-round { font-size: 26px; color: var(--gold); }

/* ============ FEATURE SPLIT (5-PART style) ============ */
.feature-split {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.feature-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: center;
  transition: all var(--transition);
}
.feature-card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 12px 30px rgba(0,0,0,0.06); }
.feature-card-num {
  font-family: var(--font-head);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.feature-card-icon {
  width: 56px; height: 56px;
  background: var(--cream);
  border-radius: 50%;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.feature-card-icon .material-icons-round { font-size: 28px; }
.feature-card h4 { font-size: 1rem; margin-bottom: 8px; }
.feature-card p { font-size: 0.88rem; color: var(--gray-700); margin: 0; }

/* ============ FULL-HEIGHT SECTIONS (desktop) ============ */
@media (min-width: 1024px) {
  .section {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
  .section > .container {
    width: 100%;
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .stats-band {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
  .stats-band > .container {
    width: 100%;
  }
  .unboxing {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
  .unboxing > .container {
    width: 100%;
  }
  .cred-strip {
    min-height: 40vh;
    display: flex;
    align-items: center;
  }
  .cred-strip > .container {
    width: 100%;
  }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .hero-content .container { grid-template-columns: 1fr; gap: 40px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials { grid-template-columns: 1fr; }
  .locations-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-nav { display: none; }
  /* Mobile menu panel: hamburger toggles .open (handled once by /js/ui.js).
     The nav drops as a full-width white panel under the sticky header, with the
     hover dropdowns expanded inline since there is no hover on touch. */
  .site-nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 22px 44px rgba(0,0,0,0.18);
    padding: 6px 0 10px;
    max-height: calc(100vh - 58px);
    overflow-y: auto;
    z-index: 1000;
  }
  .site-nav.open > a,
  .site-nav.open .nav-item { width: 100%; display: block; }
  .site-nav.open > a,
  .site-nav.open .nav-item > a {
    color: #2a2621 !important;
    text-shadow: none !important;
    padding: 13px 24px;
    font-size: 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    white-space: normal;
  }
  .site-nav.open .nav-dropdown {
    display: block;
    position: static;
    margin: 0; min-width: 0;
    border: 0; border-radius: 0; box-shadow: none;
    padding: 0 0 6px;
    background: #faf8f4;
  }
  .site-nav.open .nav-dropdown::before { display: none; }
  .site-nav.open .nav-dropdown a {
    color: #2a2621 !important;
    text-shadow: none !important;
    padding: 10px 24px 10px 38px;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(0,0,0,0.04);
  }
  .site-nav.open .nav-dropdown .nav-sub { padding-left: 54px; opacity: 0.85; }
  .hamburger { display: flex; }
  .two-col, .contact-layout { grid-template-columns: 1fr; gap: 30px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .unboxing-layout { grid-template-columns: 1fr; gap: 40px; }
  .cred-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .cred-item:nth-child(3) { border-right: 0; }
  .feature-split { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  body { font-size: 16px; }
  .section { padding: 60px 0; }
  .top-bar { position: sticky; top: 0; z-index: 1001; padding: 8px 0; font-size: 0.8rem; }
  .top-bar .container { justify-content: center; }
  .top-bar-left { display: none; }
  .top-bar-right { gap: 10px; }
  .site-header { top: 0; }
  .header-inner { padding: 12px 0; }
  .site-logo img { height: 40px; }
  .header-cta .header-phone { display: none; }
  .header-cta .btn { display: none; }
  .hero { height: 100svh; min-height: 600px; }
  .hero-content { padding: 0 0 110px; } /* above float bar */
  .hero-content .container { grid-template-columns: 1fr; }
  .hero-card { display: none; } /* form moved below hero on mobile */
  .hero-left h1 { font-size: 2.6rem; }
  .hero-sub { font-size: 0.95rem; }
  .form-row-2 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .locations-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .float-bar { display: block; }
  .chat-bubble { display: inline-flex; }
  body { padding-bottom: 70px; }
  .trust-grid { grid-template-columns: 1fr; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .unboxing { padding: 60px 0; }
  .cred-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .cred-item { border-right: 0; border-bottom: 1px solid var(--gray-200); padding-bottom: 14px; }
  .cred-item:nth-last-child(-n+2) { border-bottom: 0; }
  .feature-split { grid-template-columns: 1fr; }
}

/* Everything below lives here rather than in pages.css because index.html loads
   ONLY styles.css. A rule in pages.css reaches 655 of the 656 pages and silently
   skips the homepage, which is how the homepage nav dropdown lost its indent and
   why a mobile button fix appeared to do nothing. */

/* Second level inside a dropdown. Their real menu nests Fat Loss and Explore
   Peptides; this indents the children rather than adding a flyout, which would
   be unusable on touch. */
.nav-dropdown .nav-sub {
  padding-left: 30px; font-size: 0.85rem; opacity: 0.82;
}

/* ---------- MOBILE: buttons must not exceed their container ---------- */
/* .btn-lg keeps 36px of side padding at every width, so "Book Your Free
   Consultation" rendered 370px wide inside a 327px container. That widened the
   document to 406px, the page scrolled sideways, and the fixed float bar
   stretched to match, which made it look like the float bar was at fault. */
@media (max-width: 768px) {
  .btn { max-width: 100%; }
  .btn-lg { padding: 16px 22px; }
  /* a full-width CTA is also a better tap target on a phone */
  .cta-block .btn,
  .prose-cta .btn,
  .lifestyle-ctas .btn,
  .women-hero-cta .btn { width: 100%; }
  .lifestyle-ctas, .women-hero-cta { flex-direction: column; align-items: stretch; }
}

/* ---------- ACCESSIBILITY (2026-09-29) ---------- */
/* Footer column titles are h2 (they were h4 straight after the page's last h2,
   which skips a heading level); this pins the look they had as h4. */
.site-footer .footer-h { font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; line-height: 1.06; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin: 0 0 18px; }
/* links inside running text need more than colour to stand out */
.footer-bottom p a { text-decoration: underline; text-underline-offset: 2px; }