/* ==========================================================================
   24 Performance, Custom Theme
   Palette: Black, Gold (logo-matched), White accents
   ========================================================================== */

:root {
  --bg: #080808;
  --bg-2: #0e0e0e;
  --bg-3: #141414;
  --line: #292929;
  --gold: #c9a961;
  --gold-bright: #d8b974;
  --gold-soft: rgba(201, 169, 97, 0.12);
  --white: #ffffff;
  --muted: #9a9a9a;
  --muted-2: #c8c8c8;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.48);

  /* Shared background photo (hero, page headers, CTA banner). JPEG by default;
     upgraded to WebP below where the browser supports image-set(). */
  --hero-img: url('../img/gym2.jpg?v=20260929');
}

@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
  :root {
    --hero-img: image-set(
      url('../img/gym2.webp?v=20260929') type('image/webp'),
      url('../img/gym2.jpg?v=20260929')  type('image/jpeg')
    );
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Belt-and-braces against sideways panning. overflow-x:hidden on <body> alone
     propagates to the viewport but iOS Safari honours it inconsistently, and it
     never clips position:fixed children. 'clip' clips without creating a scroll
     container, so scroll-behavior:smooth and position:sticky keep working.
     Browsers without support (Safari <16) simply ignore it. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--gold); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--gold-bright); }

h1, h2, h3, h4, h5 {
  font-family: 'Anton', 'Bebas Neue', 'Inter', sans-serif;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 .8rem;
  line-height: 1.1;
}

h1 { font-size: clamp(2.4rem, 5.5vw, 5rem); letter-spacing: 1px; }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
h4 { font-size: 1.15rem; letter-spacing: 1.5px; }

p { margin: 0 0 1rem; }

/* Utility */
.gold { color: var(--gold); }
.text-white { color: var(--white) !important; }

.section { padding: 100px 0; position: relative; }
.section-darker { background: var(--bg-2); }

@media (max-width: 768px) {
  .section { padding: 70px 0; }
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 18px 0;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, padding .3s ease, border-color .3s ease;
}
.site-header.scrolled {
  padding: 12px 0;
  background: rgba(10, 10, 10, 0.96);
  border-bottom-color: var(--line);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.brand img {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--gold-soft);
}
.brand-name {
  font-family: 'Anton', sans-serif;
  font-size: 1.25rem;
  letter-spacing: 2px;
  color: var(--white);
  text-transform: uppercase;
  line-height: 1;
}
.brand-name span { color: var(--gold); }
.brand-tag {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: .65rem;
  letter-spacing: 3px;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 4px;
}

.nav-links {
  /* Desktop: fixed-positioned to sit inside the header bar on the right */
  position: fixed;
  top: 0;
  right: 0;
  height: 84px;        /* matches header height (padding 18px + 48px logo) */
  display: flex;
  align-items: center;
  gap: 2.2rem;
  list-style: none;
  margin: 0;
  padding: 0 32px 0 0;
  z-index: 1001;       /* above header's stacking context */
  transition: height .3s ease;
}
.site-header.scrolled ~ .site-nav .nav-links { height: 72px; }
.nav-links a {
  color: var(--muted-2);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  position: relative;
  padding: 6px 0;
  transition: color .2s ease;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width .3s ease;
}
.nav-links a:hover,
.nav-links a.active { color: var(--white); }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.nav-cta {
  background: var(--gold);
  color: #000 !important;
  padding: 12px 25px !important;
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: .8rem;
  text-transform: uppercase;
  transition: all .25s ease;
  white-space: nowrap;
  margin-left: 1rem;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover {
  background: var(--gold-bright);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(201, 169, 97, 0.25);
}

/* Skip link — first tab stop, visible only when focused */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1100;
  background: var(--gold);
  color: #000;
  padding: 12px 20px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: .8rem;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
  color: #000;
}

/* Visible keyboard focus ring (previously relied on the browser default,
   which is near-invisible against the dark theme) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Nav items shown only in the burger menu (mobile and tablet). Kept out of the
   desktop bar because seven items already fill the width beside the brand. */
.nav-links li.nav-mobile-only { display: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--white);
  font-size: 1.6rem;
  cursor: pointer;
  padding: 4px 8px;
}

/* Mobile nav toggle — full nav styling lives in the responsive block at the bottom */
@media (max-width: 991.98px) {
  .nav-toggle { display: block; }
  /* Same breakpoint as the burger, so mobile-only items appear exactly when the
     slide-out menu does. Uses list-item to match the other <li> children. */
  .nav-links li.nav-mobile-only { display: list-item; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-gold,
.btn-ghost,
.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .25s ease;
  text-decoration: none;
}
.btn-gold { background: var(--gold); color: #000; }
.btn-gold:hover {
  background: var(--gold-bright);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(201, 169, 97, 0.3);
}
.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.25);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-dark {
  background: #000;
  color: var(--gold);
  border-color: var(--gold);
}
.btn-dark:hover { background: var(--gold); color: #000; }
.btn-sm { padding: 11px 20px; font-size: .75rem; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 0 207px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10,10,10,.65) 0%, rgba(10,10,10,.85) 70%, var(--bg) 100%),
    var(--hero-img) center/cover no-repeat;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 75% 30%, rgba(201, 169, 97, 0.18), transparent 55%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; max-width: 900px; }
.hero h1 { color: var(--white); margin-bottom: 1.4rem; }
.hero h1 .gold { color: var(--gold); }
.hero p.lead {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--muted-2);
  max-width: 640px;
  margin-bottom: 2.4rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-meta {
  position: absolute;
  bottom: 96px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem 3rem;
  z-index: 2;
  font-size: .75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  /* Four items no longer fit on one line at most widths, so this centers
     wrapped rows instead of sizing to the unwrapped content (max-content
     would keep it one line and just overflow). */
  width: 100%;
  max-width: calc(100% - 32px);
}
.hero-meta strong { color: var(--gold); display: block; font-size: 1.6rem; font-family: 'Anton', sans-serif; letter-spacing: 1px; }

@media (max-width: 991.98px) {
  .hero-meta { gap: 1.2rem 2rem; }
}

@media (max-width: 767.98px) {
  .hero-meta {
    gap: 1rem 1.4rem;
    bottom: 60px;
    font-size: .6rem;
    letter-spacing: 2px;
  }
  .hero-meta strong { font-size: 1.1rem; }
}

/* Page header (non-home pages) */
.page-header {
  padding: 180px 0 80px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(10,10,10,.7), rgba(10,10,10,.95)),
    var(--hero-img) center/cover no-repeat;
  border-bottom: 1px solid var(--line);
}
.page-header h1 { margin-bottom: .6rem; }
.page-header p { color: var(--muted); letter-spacing: 4px; text-transform: uppercase; font-size: .8rem; }

/* ==========================================================================
   Cards / Service / Plan
   ========================================================================== */
.card-dark {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2rem;
  height: 100%;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  position: relative;
  overflow: hidden;
}
.card-dark::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.card-dark:hover {
  transform: translateY(-6px);
  border-color: var(--gold-soft);
  box-shadow: var(--shadow);
}
.card-dark:hover::before { transform: scaleX(1); }

.card-icon {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 1.6rem;
  border-radius: 4px;
  margin-bottom: 1.4rem;
}

.plan {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2.4rem 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all .3s ease;
}
.plan:hover { border-color: var(--gold-soft); transform: translateY(-4px); }
.plan-featured {
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--bg-3) 0%, #1a1610 100%);
}
.plan-featured::after {
  content: "Most Popular";
  position: absolute;
  top: -12px; right: 24px;
  background: var(--gold);
  color: #000;
  padding: 4px 14px;
  font-size: .65rem;
  letter-spacing: 2px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 2px;
}
.plan h3 { color: var(--white); margin-bottom: .4rem; }
.plan-tag {
  font-size: .7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.6rem;
}
.plan-price {
  font-family: 'Anton', sans-serif;
  font-size: 3rem;
  color: var(--white);
  line-height: 1;
  margin-bottom: .4rem;
}
.plan-price small { font-size: .9rem; color: var(--muted); font-family: 'Inter', sans-serif; font-weight: 400; letter-spacing: 1px; }
/* Stands in for a price figure on plan cards; prices are shared on enquiry. */
.plan-enquire {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 1.2rem 0 1.4rem;
  font-family: 'Anton', sans-serif;
  font-size: 1.25rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white);
}
.plan-enquire::before {
  content: "";
  flex: 0 0 22px;
  height: 1px;
  background: var(--gold);
}
.pricing-note {
  max-width: 640px;
  margin: -.4rem auto 2.2rem;
  text-align: center;
  font-size: .95rem;
  color: var(--muted-2);
}
.pricing-note a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.plan-founding {
  background: var(--gold-soft);
  border-left: 3px solid var(--gold);
  padding: 12px 16px;
  margin: 1rem 0 1.6rem;
  font-size: .85rem;
  color: var(--muted-2);
}
.plan-founding strong { color: var(--gold); display: block; font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; }
.plan ul {
  list-style: none;
  padding: 0; margin: 0 0 1.8rem;
  flex: 1;
}
.plan ul li {
  position: relative;
  padding: 8px 0 8px 28px;
  border-bottom: 1px solid var(--line);
  font-size: .92rem;
  color: var(--muted-2);
}
.plan ul li:last-child { border-bottom: 0; }
.plan ul li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 8px;
  color: var(--gold);
  font-weight: 700;
}
.plan-actions { display: flex; flex-direction: column; gap: 8px; }

/* Bullet list with gold marker */
.gold-list { list-style: none; padding: 0; margin: 0; }
.gold-list li {
  position: relative;
  padding: 6px 0 6px 32px;
  color: var(--muted-2);
}
.gold-list li::before {
  content: "▸";
  position: absolute;
  left: 0; top: 6px;
  color: var(--gold);
  font-size: 1.1rem;
}

/* ==========================================================================
   Image columns
   ========================================================================== */
.media-frame {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.media-frame img { width: 100%; display: block; }
.media-frame.with-accent::before {
  content: "";
  position: absolute;
  top: -16px; left: -16px;
  width: 80px; height: 80px;
  border-top: 2px solid var(--gold);
  border-left: 2px solid var(--gold);
  z-index: 2;
}
.media-frame.with-accent::after {
  content: "";
  position: absolute;
  bottom: -16px; right: -16px;
  width: 80px; height: 80px;
  border-bottom: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
  z-index: 2;
}

/* ==========================================================================
   Marquee strip
   ========================================================================== */
.strip {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
  overflow: hidden;
}
.strip-track {
  display: flex;
  gap: 4rem;
  white-space: nowrap;
  animation: scroll-x 40s linear infinite;
  font-family: 'Anton', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 4px;
  color: var(--white);
  text-transform: uppercase;
  width: max-content;
}
.strip-track span { display: inline-flex; align-items: center; gap: 4rem; }
.strip-track .dot { color: var(--gold); }
@keyframes scroll-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   Forms
   ========================================================================== */
.form-control,
.form-select {
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--white);
  padding: 14px 16px;
  border-radius: 2px;
  font-size: .95rem;
  transition: border-color .2s ease, background .2s ease;
  width: 100%;
  font-family: 'Inter', sans-serif;
}
.form-control::placeholder { color: var(--muted); }
.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--gold);
  background: #1a1a1a;
  box-shadow: 0 0 0 3px var(--gold-soft);
}
textarea.form-control { min-height: 160px; resize: vertical; }
.form-label {
  display: block;
  font-size: .75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 500;
}

/* ==========================================================================
   Application form (contact page)
   ========================================================================== */
.application-form .form-section + .form-section { margin-top: 2.4rem; }
.application-form .form-section-title {
  font-family: 'Anton', sans-serif;
  font-size: 1rem;
  letter-spacing: 3px;
  color: var(--gold);
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding-bottom: .8rem;
  margin-bottom: 1.4rem;
}
.application-form .form-hint {
  font-size: .75rem;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin-left: .5rem;
}

/* Checkbox grid (multi-select goals, training times, etc.) */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .55rem;
}
.check-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem .9rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  transition: all .2s ease;
  font-size: .85rem;
  color: var(--muted-2);
}
.check-item:hover { border-color: var(--gold-soft); color: var(--white); }
.check-item input { accent-color: var(--gold); cursor: pointer; flex-shrink: 0; }
.check-item input:checked + span { color: var(--gold); font-weight: 600; }
.check-item:has(input:checked) {
  border-color: var(--gold);
  background: var(--gold-soft);
}

/* 1-10 commitment scale */
.scale-row {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: .6rem;
}
.scale-label {
  color: var(--muted);
  font-size: .75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.scale-buttons {
  display: flex;
  flex: 1;
  gap: 4px;
}
.scale-buttons label {
  flex: 1;
  position: relative;
  cursor: pointer;
}
.scale-buttons input { position: absolute; opacity: 0; pointer-events: none; }
.scale-buttons span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: 'Anton', sans-serif;
  font-size: .95rem;
  color: var(--muted-2);
  transition: all .2s ease;
}
.scale-buttons label:hover span { border-color: var(--gold-soft); color: var(--white); }
.scale-buttons input:checked + span {
  background: var(--gold);
  border-color: var(--gold);
  color: #000;
}

@media (max-width: 575.98px) {
  .scale-buttons span { height: 32px; font-size: .8rem; }
  .scale-buttons { gap: 3px; }
  .scale-row { gap: .4rem; }
  .check-grid { grid-template-columns: 1fr 1fr; }
}

.contact-info-block {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.contact-info-block i {
  font-size: 1.4rem;
  color: var(--gold);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-soft);
  border-radius: 4px;
  flex-shrink: 0;
}
.contact-info-block strong {
  display: block;
  color: var(--white);
  font-size: .75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.contact-info-block span { color: var(--muted-2); font-size: .95rem; word-break: break-word; }
.contact-info-block a { color: var(--muted-2); }
.contact-info-block a:hover { color: var(--gold); }

/* ==========================================================================
   Resources
   ========================================================================== */
.resource-card {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all .3s ease;
}
.resource-card:hover { border-color: var(--gold-soft); transform: translateY(-4px); box-shadow: var(--shadow); }
.resource-card .badge-free,
.resource-card .badge-price {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  margin-bottom: 1rem;
  align-self: flex-start;
  font-weight: 600;
}
.resource-card .badge-free { background: var(--gold-soft); color: var(--gold); }
.resource-card .badge-price { background: var(--gold); color: #000; }
.resource-card h3 { font-size: 1.25rem; }
.resource-card p { color: var(--muted-2); font-size: .92rem; flex: 1; }

.resource-card.featured {
  background: linear-gradient(180deg, var(--bg-3) 0%, #1a1610 100%);
  border-color: var(--gold);
}

/* ==========================================================================
   Testimonial card
   ========================================================================== */
.testimonial-card {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3rem 3.5rem;
  margin-bottom: 3rem;
  position: relative;
  overflow: hidden;
}
.testimonial-card::before {
  content: '\201C';
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 10rem;
  line-height: 1;
  color: var(--gold);
  opacity: .08;
  position: absolute;
  top: .5rem;
  left: 2rem;
  pointer-events: none;
  user-select: none;
}
.testimonial-stars {
  display: flex;
  gap: 5px;
  margin-bottom: 1.6rem;
}
.testimonial-stars i {
  color: var(--gold);
  font-size: 1.05rem;
}
.testimonial-quote {
  font-size: 1.08rem;
  line-height: 1.85;
  color: var(--muted-2);
  font-style: italic;
  margin: 0 0 2rem;
  padding: 0;
  border: none;
}
.testimonial-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.testimonial-name {
  font-family: 'Anton', sans-serif;
  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
}
.testimonial-detail {
  font-size: .75rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
}

/* Before / After transformation */
.before-after {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 5rem;
}
.before-after-item {
  position: relative;
  flex: 1;
  max-width: 400px;
}
.before-after-item img {
  width: 100%;
  height: 540px;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 4px;
  border: 1px solid var(--line);
  display: block;
}
.before-after-label {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(0, 0, 0, 0.78);
  color: var(--muted-2);
  font-family: 'Anton', sans-serif;
  font-size: .8rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 2px;
  border: 1px solid var(--line);
}
.before-after-label.after {
  color: var(--gold);
  border-color: rgba(201, 169, 97, 0.4);
}
.before-after-arrow {
  font-size: 2rem;
  color: var(--gold);
  flex-shrink: 0;
  opacity: .6;
}

@media (max-width: 767.98px) {
  .testimonial-card { padding: 2rem 1.5rem; }

  /* Before/after swipe carousel on mobile */
  .before-after {
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding-bottom: 1rem;
    justify-content: flex-start;
  }
  .before-after::-webkit-scrollbar { display: none; }
  .before-after-item {
    flex: 0 0 88%;
    max-width: 88%;
    scroll-snap-align: center;
  }
  .before-after-item img { height: 360px; object-fit: cover; }
  .before-after-arrow { display: none; }
}

/* ==========================================================================
   Legal pages (privacy, terms, disclaimer)
   ========================================================================== */
.legal-page {
  max-width: 820px;
  margin: 0 auto;
  color: var(--muted-2);
}
.legal-page h2 {
  font-size: 1.4rem;
  letter-spacing: 2px;
  color: var(--gold);
  margin-top: 2.4rem;
  margin-bottom: 1rem;
}
.legal-page h2:first-of-type { margin-top: 0; }
.legal-page h3 {
  font-size: 1.1rem;
  letter-spacing: 1.5px;
  color: var(--white);
  margin-top: 1.6rem;
  margin-bottom: .6rem;
}
.legal-page p, .legal-page li {
  font-size: .95rem;
  line-height: 1.75;
}
.legal-page ul, .legal-page ol {
  padding-left: 1.4rem;
  margin-bottom: 1.2rem;
}
.legal-page ul li, .legal-page ol li { padding: 4px 0; }
.legal-page a { text-decoration: underline; }
.legal-page .last-updated {
  display: inline-block;
  font-size: .75rem;
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 2rem;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.legal-page .placeholder {
  background: var(--gold-soft);
  border-left: 3px solid var(--gold);
  padding: 12px 16px;
  margin: 1rem 0;
  font-size: .9rem;
}
.legal-page .placeholder strong {
  display: block;
  color: var(--gold);
  font-size: .7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* ==========================================================================
   Cookie banner (dormant — set window.__24P_COOKIE_ENABLED = true to enable)
   ========================================================================== */
.cookie-banner {
  position: fixed;
  bottom: 16px; left: 16px; right: 16px;
  max-width: 520px;
  background: var(--bg-3);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 1.2rem 1.4rem;
  z-index: 1200;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  display: none;
}
.cookie-banner.visible { display: block; animation: fade-in .3s ease; }
.cookie-banner p { font-size: .85rem; color: var(--muted-2); margin: 0 0 .8rem; }
.cookie-banner .cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie-banner .cookie-actions button {
  flex: 1;
  min-width: 100px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: all .2s ease;
}
.cookie-banner .cookie-actions button.accept {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
  font-weight: 600;
}
.cookie-banner .cookie-actions button:hover { transform: translateY(-1px); }
@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Plans scroll-snap (mobile horizontal carousel; desktop = normal grid)
   Add the .plans-scroll class to a Bootstrap .row that contains plan cards.
   On screens < 992px the row becomes a horizontal swipe-able scroller with
   each card snapping to centre. On large screens it stays a normal grid.
   ========================================================================== */
@media (max-width: 991.98px) {
  .plans-scroll {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 1.2rem;
    -webkit-overflow-scrolling: touch;
  }
  .plans-scroll::-webkit-scrollbar { display: none; }
  /* Plan cards — show one at a time (wide cards) */
  .plans-scroll.plans-wide > [class*="col-"] {
    flex: 0 0 88%;
    max-width: 88%;
    scroll-snap-align: center;
  }
  /* Card-dark carousels — show ~1.5 cards so user knows to swipe */
  .plans-scroll > [class*="col-"] {
    flex: 0 0 75%;
    max-width: 75%;
    scroll-snap-align: start;
  }
}
@media (max-width: 575.98px) {
  .plans-scroll.plans-wide > [class*="col-"] {
    flex: 0 0 92%;
    max-width: 92%;
  }
  .plans-scroll > [class*="col-"] {
    flex: 0 0 82%;
    max-width: 82%;
  }
}

/* ==========================================================================
   Journey carousel (Bootstrap)
   ========================================================================== */
.journey-carousel {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
}
.journey-carousel .carousel-inner { aspect-ratio: 16 / 10; }
.journey-carousel .carousel-item { height: 100%; }
.journey-carousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.journey-carousel .carousel-control-prev,
.journey-carousel .carousel-control-next { width: 8%; opacity: .85; }
.journey-carousel .carousel-control-prev-icon,
.journey-carousel .carousel-control-next-icon {
  background-color: var(--gold);
  border-radius: 50%;
  padding: 18px;
  background-size: 50%;
  filter: invert(1);
}
.journey-carousel .carousel-indicators { margin-bottom: .8rem; }
.journey-carousel .carousel-indicators [data-bs-target] {
  width: 8px; height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  border: 0;
  margin: 0 5px;
  transition: background-color .2s ease;
}
.journey-carousel .carousel-indicators .active { background-color: var(--gold); }

.quote-card {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2rem;
  height: 100%;
  position: relative;
}
.quote-card::before {
  content: "\201C";
  position: absolute;
  top: -10px; left: 18px;
  font-family: 'Anton', serif;
  font-size: 5rem;
  color: var(--gold);
  line-height: 1;
}

/* ==========================================================================
   FAQ / policy accordion
   Built on native <details>/<summary> so it needs no JavaScript, works with
   script-src 'self', and is keyboard accessible out of the box.
   ========================================================================== */
.faq-list { margin-top: 2rem; }

.faq-item {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  margin-bottom: 12px;
  transition: border-color .25s ease;
}
.faq-item:hover { border-color: var(--gold-soft); }
.faq-item[open] { border-color: var(--gold-soft); }

.faq-item summary {
  cursor: pointer;
  list-style: none;                /* hide the default marker */
  padding: 18px 52px 18px 22px;
  position: relative;
  font-family: 'Anton', sans-serif;
  font-size: 1.05rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--white);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }

/* Custom chevron, rotates when the item is open */
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform .25s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }

.faq-item summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.faq-body {
  padding: 0 22px 20px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: -1px;
}
.faq-body p { color: var(--muted-2); font-size: .95rem; }
.faq-body p:last-child { margin-bottom: 0; }
.faq-body strong { color: var(--white); }
.faq-body ul { color: var(--muted-2); font-size: .95rem; padding-left: 1.1rem; margin-bottom: 1rem; }
.faq-body ul li { margin-bottom: .4rem; }
.faq-body ul li::marker { color: var(--gold); }

@media (max-width: 575.98px) {
  .faq-item summary { font-size: .95rem; padding: 16px 46px 16px 16px; }
  .faq-body { padding-left: 16px; padding-right: 16px; }
}

/* ==========================================================================
   CTA banner
   ========================================================================== */
.cta-banner {
  position: relative;
  padding: 100px 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,.85), rgba(10,10,10,.95)),
    var(--hero-img) center/cover no-repeat;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-banner h2 { max-width: 800px; margin: 0 auto 1.2rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: #050505;
  padding: 70px 0 30px;
  color: var(--muted);
}
.site-footer h4 {
  color: var(--white);
  font-size: .9rem;
  letter-spacing: 2px;
  margin-bottom: 1.4rem;
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--gold); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { padding: 4px 0; font-size: .9rem; }
.footer-socials { display: flex; gap: 12px; margin-top: 1rem; }
.footer-socials a {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted-2);
  transition: all .2s ease;
}
.footer-socials a:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}
.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .8rem;
  color: var(--muted);
  letter-spacing: 1px;
}
.footer-bottom a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.footer-bottom a:hover { color: var(--gold-bright); }

/* Section heads */
.section-head { margin-bottom: 3.5rem; }
.section-head h2 { margin-bottom: .8rem; }
.section-head p { color: var(--muted); max-width: 640px; }
.text-center .section-head p { margin-left: auto; margin-right: auto; }


[data-aos] { will-change: transform, opacity; }

/* Scroll-to-top */
.to-top {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 44px; height: 44px;
  background: var(--gold);
  color: #000;
  border: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: all .3s ease;
  z-index: 999;
  box-shadow: 0 10px 25px rgba(0,0,0,.4);
}
.to-top.show { opacity: 1; transform: translateY(0); }
.to-top:hover { background: var(--gold-bright); }

/* Anchor offset for fixed nav */
section[id] { scroll-margin-top: 90px; }

/* Form status messages, toggled by assets/js/form.js */
.form-status-loading,
.form-status-success,
.form-status-error {
  display: none;
  padding: 14px 18px;
  border-radius: 2px;
  font-size: .9rem;
  margin-top: 1rem;
}
.form-status-success { background: rgba(40, 167, 69, .15); color: #5dd17e; border: 1px solid rgba(40, 167, 69, .3); }
.form-status-error   { background: rgba(220, 53, 69, .15); color: #f08080; border: 1px solid rgba(220, 53, 69, .3); }
.form-status-loading { background: var(--gold-soft); color: var(--gold); }

/* ==========================================================================
   Responsive
   ----------------------------------------------------------------------------
   Breakpoints (Bootstrap-aligned):
     >= 1200px  laptop / desktop      (default styles above)
     992-1199   small laptop / iPad landscape
     768-991    iPad portrait
     576-767    large phone
     < 576px    phone
   ========================================================================== */

/* iPad landscape & small laptop */
@media (max-width: 1199.98px) {
  .container { max-width: 100%; padding-left: 32px; padding-right: 32px; }
  /* Seven nav items no longer fit at 1000-1100px at the default sizing, and the
     links would overlap the brand lockup. Tighten spacing and type just for
     this range; below 992px the burger menu takes over anyway. */
  .nav-links { gap: 1.1rem; }
  .nav-links a { font-size: .78rem; letter-spacing: 1px; }
  .nav-cta { padding: 10px 18px !important; margin-left: .5rem; }
}

/* iPad portrait */
@media (max-width: 991.98px) {
  .section { padding: 80px 0; }
  .hero { min-height: 90vh; padding: 130px 0 150px; }
  .page-header { padding: 150px 0 70px; }
  .cta-banner { padding: 80px 0; }
  .container { padding-left: 24px; padding-right: 24px; }
  .strip-track { font-size: 1.3rem; gap: 3rem; }
  .strip-track span { gap: 3rem; }
  .footer-bottom { justify-content: flex-start; }

  /* Mobile nav: panel slides in BELOW the fixed header */
  .site-header { padding: 14px 0; }
  .nav-wrap { gap: 1rem; }
  .brand img { width: 42px; height: 42px; }
  .brand-name { font-size: 1.05rem; }
  .brand-tag { font-size: .58rem; letter-spacing: 2px; }

  .nav-links {
    position: fixed;
    top: 70px;          /* sits below the header */
    left: 0; right: 0; bottom: 0;
    height: auto !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: #0a0a0a;
    padding: 1.5rem 1.5rem 2rem;
    gap: 0;
    border-top: 1px solid var(--line);
    transform: translateX(100%);
    /* Hidden while parked off-canvas. Without this the panel stays "visible"
       one screen-width to the right, and because it is position:fixed it is not
       clipped by body's overflow-x, so iOS Safari lets you pan the whole page
       sideways. It also kept the closed menu's links in the tab order. */
    visibility: hidden;
    transition: transform .3s ease, visibility .3s ease;
    overflow-y: auto;
    z-index: 999;       /* below header (1000) so brand stays visible */
  }
  .site-header.scrolled ~ .site-nav .nav-links { height: auto !important; top: 70px; }
  .nav-links.open { transform: translateX(0); visibility: visible; }

  .nav-links li {
    width: 100%;
    border-bottom: 1px solid var(--line);
  }
  .nav-links li:last-child {
    border-bottom: 0;
    margin-top: 1.5rem;
  }

  .nav-links a {
    display: block;
    width: 100%;
    padding: 1.1rem 0;
    color: var(--white);
    font-family: 'Anton', sans-serif;
    font-size: 1.35rem;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .nav-links a::after { display: none; }
  .nav-links a.active { color: var(--gold); }

  .nav-cta {
    background: var(--gold) !important;
    color: #000 !important;
    padding: 1.05rem !important;
    margin: 0 !important;
    text-align: center;
    font-family: 'Inter', sans-serif !important;
    font-size: .85rem !important;
    letter-spacing: 2px !important;
    border-radius: 2px;
  }

  /* Lock body scroll while menu is open */
  body.nav-open { overflow: hidden; }

  /* Hero/page typography on tablet */
  h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
  h2 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); }

  /* Plan cards a touch tighter on tablet */
  .plan { padding: 2rem 1.6rem; }
}

/* Large phone */
@media (max-width: 767.98px) {
  .section { padding: 60px 0; }
  /* Extra bottom padding: .hero-meta now holds 4 items and wraps to two
     rows at this width, so it needs more clearance above it than a single
     row did, or it overlaps the CTA buttons above it. */
  .hero { padding: 110px 0 218px; min-height: auto; }
  .page-header { padding: 130px 0 60px; }
  .cta-banner { padding: 60px 0; }
  .container { padding-left: 20px; padding-right: 20px; }

  h1 { font-size: clamp(2rem, 8vw, 3rem); }
  h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  h3 { font-size: 1.25rem; }

  .hero p.lead { font-size: 1rem; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-actions .btn-gold,
  .hero-actions .btn-ghost,
  .hero-actions .btn-dark { justify-content: center; width: 100%; }

  .btn-gold, .btn-ghost, .btn-dark { padding: 14px 24px; font-size: .8rem; letter-spacing: 1.5px; }

  /* Cards */
  .card-dark { padding: 1.6rem; }
  .plan { padding: 1.8rem 1.4rem; }
  .plan-price { font-size: 2.4rem; }

  /* Resource grid: 1-up on phone */
  .resource-card { padding: 1.6rem; }

  /* Section heads tighter */
  .section-head { margin-bottom: 2.4rem; }

  /* Marquee strip */
  .strip { padding: 20px 0; }
  .strip-track { font-size: 1rem; gap: 2rem; letter-spacing: 3px; }
  .strip-track span { gap: 2rem; }

  /* CTA banner content padding */
  .cta-banner .hero-actions { justify-content: center; }

  /* Footer stack neatly */
  .site-footer { padding: 50px 0 24px; text-align: left; }
  .footer-bottom {
    flex-direction: column;
    gap: .6rem;
    text-align: left;
    font-size: .75rem;
  }
  .footer-socials { gap: 10px; }

  /* Contact form padding tighter */
  .contact-info-block { padding: 1.1rem 1.2rem; gap: .9rem; }
  .contact-info-block i { width: 38px; height: 38px; font-size: 1.2rem; }

  /* Carousel controls smaller on phone */
  .journey-carousel .carousel-control-prev-icon,
  .journey-carousel .carousel-control-next-icon { padding: 12px; }
  .journey-carousel .carousel-inner { aspect-ratio: 4 / 3; }

  /* Plan featured badge tighter */
  .plan-featured::after { right: 16px; padding: 3px 10px; font-size: .6rem; }

  /* Page header text */
  .page-header p { font-size: .7rem; letter-spacing: 3px; }

  /* Scroll-to-top */
  .to-top { right: 16px; bottom: 16px; width: 40px; height: 40px; }

  /* Form fields a bit smaller */
  .form-control, .form-select { padding: 12px 14px; font-size: .9rem; }
  textarea.form-control { min-height: 130px; }
}

/* Small phone */
@media (max-width: 420px) {
  h1 { font-size: 1.85rem; }
  .plan-price { font-size: 2rem; }
  .hero { padding: 100px 0 208px; }
  .nav-links a { font-size: 1.3rem; }
  .container { padding-left: 16px; padding-right: 16px; }
}

/* Tall but narrow (landscape phone) */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 100px 0 110px; }
}

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

/* ==========================================================================
   2026 refinement — quieter, editorial, premium
   ========================================================================== */
body {
  line-height: 1.65;
  background:
    radial-gradient(circle at 85% 10%, rgba(201, 169, 97, .035), transparent 25rem),
    var(--bg);
}

h1, h2 { letter-spacing: -.01em; }
h3 { letter-spacing: .02em; }

.section { padding: clamp(5rem, 8vw, 8rem) 0; }
.section-head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-head p { max-width: 570px; }

.site-header {
  background: rgba(8, 8, 8, .78);
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.brand img { border-color: rgba(201, 169, 97, .3); }
.nav-links { gap: clamp(1.2rem, 2vw, 2.2rem); }
.nav-links a { font-size: .76rem; letter-spacing: .12em; }
.nav-cta,
.btn-gold,
.btn-ghost,
.btn-dark { border-radius: 999px; }
.nav-cta { padding-inline: 22px !important; }

.hero {
  min-height: min(920px, 100svh);
  background-position: center 38%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,8,8,.78) 0%, rgba(8,8,8,.22) 62%, rgba(8,8,8,.12) 100%);
  pointer-events: none;
}
.hero-inner { z-index: 3; max-width: 780px; }
.hero h1 { font-size: clamp(3.25rem, 7.4vw, 7rem); line-height: .94; }
.hero p.lead { max-width: 560px; font-size: clamp(1rem, 1.3vw, 1.15rem); }
.hero-meta { z-index: 3; }

.page-header {
  min-height: 490px;
  display: flex;
  align-items: flex-end;
  padding: 150px 0 82px;
  background-position: center 42%;
}
.page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,8,8,.3), rgba(8,8,8,.96));
}
.page-header .container { position: relative; z-index: 2; text-align: center; }
.page-header h1 { font-size: clamp(3rem, 7vw, 6.6rem); max-width: 900px; margin-inline: auto; }

.card-dark,
.plan,
.resource-card,
.testimonial-card,
.contact-info-block,
.faq-item {
  border-color: rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,.038), rgba(255,255,255,.012));
}
.card-dark:hover,
.plan:hover,
.resource-card:hover { transform: translateY(-3px); border-color: rgba(201,169,97,.34); }
.media-frame,
.journey-carousel { border-radius: 18px; border-color: rgba(255,255,255,.09); }
.media-frame img { aspect-ratio: 4 / 5; object-fit: cover; }

.audience-list { border-top: 1px solid var(--line); }
.audience-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1.2rem;
  padding: 1.45rem 0;
  border-bottom: 1px solid var(--line);
}
.audience-item > span {
  color: var(--gold);
  font-size: .72rem;
  letter-spacing: .16em;
  padding-top: .25rem;
}
.audience-item h3 { margin: 0 0 .3rem; font-size: 1.5rem; }
.audience-item p { margin: 0; color: var(--muted); }

.service-editorial {
  min-height: 520px;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  color: var(--white);
  isolation: isolate;
}
.service-editorial::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.04) 20%, rgba(0,0,0,.92) 92%);
}
.service-editorial > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.75) contrast(1.07);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}
.service-editorial:hover { color: var(--white); border-color: rgba(201,169,97,.5); }
.service-editorial:hover > img { transform: scale(1.035); filter: saturate(.95) contrast(1.07); }
.service-editorial-copy { padding: 2rem; width: 100%; }
.service-editorial-copy > span { color: var(--gold); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.service-editorial-copy h3 { margin: .55rem 0 .65rem; font-size: 2rem; }
.service-editorial-copy p { color: #d0d0d0; max-width: 30ch; }
.service-editorial-copy b { display: inline-flex; gap: .5rem; align-items: center; color: var(--gold); font-size: .73rem; letter-spacing: .14em; text-transform: uppercase; }

.result-story {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-bottom: clamp(4rem, 8vw, 7rem);
}
.result-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 250px);
  gap: .75rem;
}
.result-shot { position: relative; margin: 0; overflow: hidden; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); }
.result-shot:nth-child(1) { grid-column: 1 / 7; grid-row: 1 / 3; }
.result-shot:nth-child(2) { grid-column: 7 / 10; grid-row: 1; }
.result-shot:nth-child(3) { grid-column: 10 / 13; grid-row: 1; }
.result-shot:nth-child(4) { grid-column: 7 / 13; grid-row: 2; }
.result-shot picture,
.result-shot img { width: 100%; height: 100%; }
.result-shot img { object-fit: cover; object-position: center 26%; filter: saturate(.88) contrast(1.03); }
.result-shot-current { background: #090909; }
.result-shot-current img { object-fit: contain; object-position: center; }
.result-shot figcaption {
  position: absolute;
  inset: auto 10px 10px;
  width: max-content;
  padding: .38rem .7rem;
  border-radius: 999px;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
  color: #ddd;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.result-story-copy blockquote { margin: 0 0 2rem; color: var(--white); font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.55; letter-spacing: -.015em; }
.result-story-copy h3 { margin-bottom: 1.3rem; font-size: clamp(1.8rem, 3vw, 2.7rem); }
/* Text-only client review (no photos), sits below the photo case studies. */
.review-quote {
  max-width: 820px;
  margin: clamp(4rem, 8vw, 7rem) auto 0;
  padding-top: clamp(4rem, 8vw, 7rem);
  border-top: 1px solid var(--line);
  text-align: center;
}
.review-quote .testimonial-stars { justify-content: center; }
.review-quote blockquote {
  margin: 0 0 2rem;
  color: var(--white);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.55;
  letter-spacing: -.015em;
  overflow-wrap: break-word;
}
.review-quote .testimonial-meta { align-items: center; max-width: 320px; margin: 0 auto; }
.result-story-second { padding-top: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--line); }
.result-gallery-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 520px; }
.result-gallery-pair .result-shot:nth-child(1) { grid-column: 1; grid-row: 1; }
.result-gallery-pair .result-shot:nth-child(2) { grid-column: 2; grid-row: 1; }
.result-gallery-pair .result-shot img { object-position: center 30%; }
.testimonial-card-compact { max-width: 900px; margin-inline: auto; }
.testimonial-card-compact .testimonial-quote { font-size: 1.15rem; color: var(--white); }

.plan { padding: clamp(1.6rem, 3vw, 2.35rem); }
.plan h3 { font-size: 1.6rem; }
.plan ul li { font-size: .86rem; }
.plan-price { margin-top: 1.2rem; }

.cta-banner { padding-block: clamp(5rem, 10vw, 9rem); }
.cta-banner h2 { font-size: clamp(2.8rem, 6vw, 5.5rem); }

@media (max-width: 991.98px) {
  .result-story { grid-template-columns: 1fr; }
  .result-gallery { grid-template-rows: repeat(2, 220px); }
  .service-editorial { min-height: 460px; }
  .page-header { min-height: 400px; }
}

@media (max-width: 575.98px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  main, section, .container, .row > *, .result-story, .result-gallery, .result-story-copy { min-width: 0; max-width: 100%; }
  .container { width: 100%; padding-left: 20px; padding-right: 20px; }
  .section { padding: 4.5rem 0; }
  .hero h1 { font-size: clamp(2.7rem, 13vw, 3.3rem); line-height: .98; }
  .hero p.lead { max-width: 34ch; }
  .hero-actions { width: 100%; }
  .hero-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem .5rem;
    padding-inline: 12px;
  }
  .page-header { min-height: 340px; padding: 125px 0 55px; }
  .page-header h1 { font-size: clamp(2.6rem, 11.5vw, 3.25rem); overflow-wrap: break-word; }
  .section h2 { overflow-wrap: break-word; }
  .audience-item { grid-template-columns: 36px minmax(0, 1fr); }
  .audience-item > div { min-width: 0; }
  .result-gallery { grid-template-rows: repeat(2, 180px); gap: .5rem; }
  .result-gallery-pair { grid-template-rows: 360px; }
  .result-shot:nth-child(1) { grid-column: 1 / 7; grid-row: 1; }
  .result-shot:nth-child(2) { grid-column: 7 / 13; grid-row: 1; }
  .result-shot:nth-child(3) { grid-column: 1 / 7; grid-row: 2; }
  .result-shot:nth-child(4) { grid-column: 7 / 13; grid-row: 2; display: block; }
  .result-shot figcaption { font-size: .55rem; }
  .result-story-copy blockquote { font-size: 1.08rem; overflow-wrap: break-word; }
  .service-editorial { min-height: 420px; }
  .service-editorial-copy { padding: 1.5rem; }
}

/* ==========================================================================
   Apple HIG pass: readable body text, sentence-case UI, 44px touch targets.
   The Anton display headlines (h1, h2) stay as the brand's one loud element;
   everything around them is made quieter.
   ========================================================================== */
body { font-size: 17px; line-height: 1.6; }

/* Keep running text to a readable measure (roughly 50-75 characters). */
main p { max-width: 68ch; }
main p.mx-auto,
main p.text-center,
main .text-center p,
main .section-head p { margin-left: auto; margin-right: auto; }

/* Subheads in the text face, sentence case, so the display type has room. */
h3, h4,
.faq-item summary {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -.01em;
}
h3 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.3; }
h4 { font-size: 1.05rem; }
.faq-item summary { font-size: 1.05rem; }
.audience-item h3 { font-size: 1.3rem; }
.resource-card h3 { font-size: 1.2rem; }
/* Stat figures on the About page stay in the display face. */
.card-dark.text-center h3 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Buttons: sentence case, no tracking, at least 44px tall. */
.btn-gold,
.btn-ghost,
.btn-dark,
.nav-cta {
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  font-weight: 600;
  min-height: 44px;
}
.btn-sm { font-size: .9rem; min-height: 44px; }

/* Small UI labels: sentence case instead of tracked capitals. */
.plan-tag { font-size: .9rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.plan-featured::after { content: "Most popular"; font-size: .75rem; letter-spacing: 0; text-transform: none; }
.plan-enquire { font-family: 'Inter', sans-serif; font-size: 1.05rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.plan-founding strong { font-size: .85rem; letter-spacing: 0; text-transform: none; }
.application-form .form-label { font-size: .9rem; letter-spacing: 0; text-transform: none; color: var(--muted-2); }
.application-form .form-section-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: none;
}
.testimonial-name { font-family: 'Inter', sans-serif; font-size: .95rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.testimonial-detail { font-size: .85rem; letter-spacing: 0; text-transform: none; }
.resource-card .badge-free,
.resource-card .badge-price { letter-spacing: 0; text-transform: none; }
.hero-meta { font-size: .85rem; letter-spacing: 0; text-transform: none; }
.result-shot figcaption { font-size: .78rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.site-footer h4 { font-size: .95rem; letter-spacing: 0; }
.contact-info-block strong { font-size: .9rem; letter-spacing: 0; text-transform: none; }

/* Footer links: full 44px rows instead of 16px text-height targets. */
.footer-links li { padding: 0; }
.footer-links a { display: inline-block; padding: 11px 0; }
.footer-socials a { width: 44px; height: 44px; }
.footer-bottom a { display: inline-block; padding: 14px 0; }

/* Desktop nav: sentence case with a 44px hit area. The mobile menu keeps
   its large display-type links. */
@media (min-width: 992px) {
  .nav-links a { font-size: .9rem; letter-spacing: 0; text-transform: none; }
  .nav-links a:not(.nav-cta) { padding: 12px 0; }
  .nav-links a::after { bottom: 8px; }
}

/* Mobile menu: restore the large display links. An earlier unscoped rule
   (.nav-links a { font-size: .76rem }) was shrinking them to 12px on phones. */
@media (max-width: 991.98px) {
  .nav-links a:not(.nav-cta) { font-size: 1.35rem; letter-spacing: 1px; }
  /* !important needed: the original mobile .nav-cta rule sets these with !important. */
  .nav-links .nav-cta { font-size: 1rem !important; letter-spacing: 0 !important; text-transform: none; }
}

/* Calmer entrance motion: a short rise instead of a 100px slide. */
[data-aos="fade-up"] { transform: translate3d(0, 20px, 0); }
[data-aos="fade-left"] { transform: translate3d(20px, 0, 0); }
[data-aos="fade-right"] { transform: translate3d(-20px, 0, 0); }

/* ==========================================================================
   Slanted sections
   One angle used everywhere (edges rise to the right) so it reads as a
   deliberate motion cue, not decoration. The cut is always smaller than the
   section's padding, so no content is clipped.
   ========================================================================== */
:root {
  --slant: clamp(22px, 4.2vw, 64px);
}

.section-darker,
.cta-banner {
  clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}
.cta-banner { border-top: 0; border-bottom: 0; }
.section-darker { background: #131313; }

/* Two slanted blocks back to back: tuck the second under the first so the
   diagonal edges meet instead of leaving a stripe of page background. */
:is(.section-darker, .cta-banner) + :is(.section-darker, .cta-banner) {
  margin-top: calc(var(--slant) * -1);
}

/* ==========================================================================
   Marquee band under the hero: a straight gold ribbon
   ========================================================================== */
.strip {
  background: var(--gold);
  border: 0;
  padding: 22px 0;
  position: relative;
  z-index: 2;
}
.strip-track { color: #0a0a0a; }
.strip-track .dot { color: rgba(10, 10, 10, .45); font-size: .7em; }

/* ==========================================================================
   Page anchor chips (Services, Nutrition): always a single line
   ========================================================================== */
.anchor-strip { background: var(--bg-2); padding: 18px 0; }
.anchor-nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: safe center;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.anchor-nav::-webkit-scrollbar { display: none; }
.anchor-nav a { flex: 0 0 auto; white-space: nowrap; margin: 0; padding-inline: 18px; }
.anchor-nav .lbl-short { display: none; }
@media (max-width: 767.98px) {
  .anchor-nav { gap: .4rem; }
  .anchor-nav a { padding-inline: 14px; }
  .anchor-nav .lbl-full { display: none; }
  .anchor-nav .lbl-short { display: inline; }
}

/* A thin gold line along each slanted edge. The gradient's 50% line runs
   corner to corner of the box (bottom-left to top-right), which is exactly
   the angle of the clip-path edge at any viewport width. */
.section-darker::before,
.section-darker::after,
.cta-banner::before,
.cta-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--slant);
  pointer-events: none;
  background: linear-gradient(to top left, transparent calc(50% - 1px), rgba(201, 169, 97, .55) 50%, transparent calc(50% + 1px));
}
.section-darker::before,
.cta-banner::before { top: 0; }
.section-darker::after,
.cta-banner::after { bottom: 0; }

/* ==========================================================================
   Gym-style buttons: a forward-leaning parallelogram, the same angle as the
   slanted sections. Outlines can't follow a cut edge, so the secondary
   buttons are tinted solids instead of bordered. The focus ring is drawn
   inside the shape because clip-path would hide an outside outline.
   ========================================================================== */
:root { --btn-cut: 14px; }

.nav-cta,
.btn-gold,
.btn-ghost,
.btn-dark {
  border: 0;
  border-radius: 0;
  clip-path: polygon(var(--btn-cut) 0, 100% 0, calc(100% - var(--btn-cut)) 100%, 0 100%);
}
.btn-gold,
.btn-ghost,
.btn-dark { padding-inline: 34px; }
.btn-sm { padding-inline: 24px; }

.btn-gold:hover,
.nav-cta:hover { box-shadow: none; }

.btn-ghost { background: rgba(255, 255, 255, .11); }
.btn-ghost:hover { background: rgba(201, 169, 97, .2); color: var(--gold-bright); }
.btn-dark { background: rgba(201, 169, 97, .14); }
.btn-dark:hover { background: var(--gold); color: #000; }

.nav-cta:focus-visible,
.btn-gold:focus-visible { outline: 2px solid #0a0a0a; outline-offset: -5px; }
.btn-ghost:focus-visible,
.btn-dark:focus-visible { outline: 2px solid var(--white); outline-offset: -5px; }

/* Icon buttons and badges follow the same shape language. */
.to-top {
  border-radius: 0;
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.footer-socials a { border-radius: 0; }
.plan-featured::after {
  border-radius: 0;
  padding-inline: 20px;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

/* ==========================================================================
   Form fields: typed text must stay readable in every browser.
   Browsers paint their own light background behind autofilled values and the
   open dropdown list, and the field text is white, so it vanished (white on
   white). Telling them the design is dark, and styling those two states
   explicitly, fixes it.
   ========================================================================== */
:root { color-scheme: dark; }

.form-control,
.form-select {
  -webkit-text-fill-color: var(--white);
  caret-color: var(--gold);
}
.form-control::placeholder {
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
  opacity: 1;
}

/* Open dropdown list (Windows Chrome and Edge ignore the select's background). */
.form-select option,
.form-select optgroup {
  background-color: #141414;
  color: var(--white);
}

/* Autofilled values: repaint the dark background over the browser's tint. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-select:-webkit-autofill,
.form-select:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--white);
  caret-color: var(--gold);
  box-shadow: 0 0 0 1000px #141414 inset;
  transition: background-color 9999s ease-out 0s;
}
.form-control:-webkit-autofill:focus,
.form-select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--white);
  box-shadow: 0 0 0 1000px #1a1a1a inset, 0 0 0 3px var(--gold-soft);
  transition: background-color 9999s ease-out 0s;
}
/* Standard (unprefixed) pseudo-class, in its own rule so an unsupported
   selector cannot invalidate the -webkit- rules above. */
.form-control:autofill,
.form-select:autofill {
  -webkit-text-fill-color: var(--white);
  box-shadow: 0 0 0 1000px #141414 inset;
}