/* More Than Muscle — Dave Krasowski, Boca Raton.
   Direction: gym-mag editorial × studio coaching × heritage iron-game posters.
   Deep graphite, bone, lifting-plate red, sparing gold accent.
*/

:root {
  --ink:    #0a0b0d;
  --steel:  #14171b;
  --steel-2:#1f242b;
  --steel-3:#2c333c;
  --bone:   #f1ece4;
  --bone-2: #e2dccf;
  --bone-3: #cdc4b1;
  --blood:  #d2331c;
  --blood-2:#a8230f;
  --gold:   #c89a3f;
  --line:   rgba(10, 11, 13, 0.14);
  --line-d: rgba(241, 236, 228, 0.14);
  --shadow-md: 0 22px 60px -28px rgba(10, 11, 13, 0.6);
  --shadow-lg: 0 40px 90px -32px rgba(10, 11, 13, 0.7);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, .display, .eyebrow, .nav a, .btn {
  font-family: 'Archivo Black', 'Big Shoulders Display', Impact, sans-serif;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 0.95;
  text-transform: uppercase;
}
.serif { font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif; font-weight: 500; text-transform: none; font-style: italic; letter-spacing: 0; }

h1 { font-size: clamp(3rem, 9vw, 7.5rem); letter-spacing: -0.03em; margin: 0 0 0.4em; color: var(--ink); }
h2 { font-size: clamp(2.2rem, 5.5vw, 4.2rem); letter-spacing: -0.02em; margin: 0 0 0.5em; color: var(--ink); }
h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 0.5em; color: var(--ink); }
h4 { font-size: 1.05rem; margin: 0 0 0.4em; letter-spacing: 0.04em; }

.display-xl {
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: clamp(4rem, 15vw, 12rem);
  line-height: 0.85;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

p { margin: 0 0 1.1em; }
.lede { font-size: 1.22rem; line-height: 1.55; color: rgba(10,11,13,0.78); max-width: 620px; }
.muted { color: rgba(10,11,13,0.6); }
.on-dark .muted { color: rgba(241,236,228,0.62); }
.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--blood);
  display: inline-block;
  margin-bottom: 1rem;
}
.eyebrow.bone { color: var(--bone-3); }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--blood); }
.on-dark a { color: var(--bone); }
.on-dark a:hover { color: var(--blood); }

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

.container { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.container--narrow { max-width: 820px; }

/* ─── Top tape ─────────────────────────────────────── */
.tape {
  background: var(--ink);
  color: var(--bone-3);
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 9px 24px;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid var(--steel-2);
}
.tape__inner { display: flex; justify-content: space-between; gap: 32px; max-width: 1280px; margin: 0 auto; }
.tape strong { color: var(--blood); }
/* Old mobile rule removed — was hiding a span in the now-animated marquee
   and breaking the seamless loop. */

/* ─── Top bar ──────────────────────────────────────── */
.topbar {
  background: var(--bone);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  max-width: 1280px;
  margin: 0 auto;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
}
.brand__mark {
  font-family: 'Archivo Black', Impact, sans-serif;
  background: var(--ink);
  color: var(--blood);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  border-radius: 4px;
}
.brand__name { display: block; font-family: 'Archivo Black', Impact, sans-serif; font-size: 1.05rem; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; }
.brand__tag { display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(10,11,13,0.55); margin-top: 4px; }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--blood); color: var(--ink); }
.nav .cta-call {
  background: var(--ink);
  color: var(--bone);
  padding: 12px 18px;
  border-radius: 4px;
  border: none;
  letter-spacing: 0.08em;
}
.nav .cta-call:hover { background: var(--blood); border: none; }

.nav-toggle {
  display: none;
  background: var(--ink);
  color: var(--bone);
  border: none;
  padding: 10px 14px;
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  gap: 8px;
  align-items: center;
}
.nav-toggle span { margin-left: 8px; font-size: 1rem; }

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 64px 0 0 0;
    background: var(--ink);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 32px;
    transform: translateX(100%);
    transition: transform 240ms ease;
  }
  .nav.open { transform: none; }
  .nav a {
    color: var(--bone);
    font-size: 1.5rem;
    padding: 18px 0;
    border-bottom: 1px solid var(--steel-2);
  }
  .nav .cta-call { background: var(--blood); margin-top: 18px; text-align: center; }
}

/* ─── Buttons ──────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--blood);
  color: var(--bone);
  padding: 16px 26px;
  border-radius: 4px;
  border: none;
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.btn:hover { background: var(--blood-2); color: var(--bone); transform: translateY(-1px); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 14px 24px;
}
.btn--ghost:hover { background: var(--ink); color: var(--bone); }
.on-dark .btn--ghost { color: var(--bone); border-color: var(--bone); }
.on-dark .btn--ghost:hover { background: var(--bone); color: var(--ink); }
.btn--lg { padding: 20px 32px; font-size: 1rem; }

/* ─── Hero ─────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--bone);
  padding: clamp(80px, 12vw, 140px) 0 clamp(70px, 10vw, 120px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(210, 51, 28, 0.18), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(200, 154, 63, 0.08), transparent 50%),
    linear-gradient(180deg, #0a0b0d 0%, #14171b 100%);
  z-index: 0;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr 0.55fr;
  gap: 64px;
  position: relative;
  z-index: 1;
  align-items: end;
}
.hero__eyebrow {
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--blood);
  display: inline-block;
  margin-bottom: 1.3rem;
}
.hero h1 { color: var(--bone); }
.hero h1 .stroke {
  -webkit-text-stroke: 2px var(--bone);
  color: transparent;
}
.hero h1 .accent { color: var(--blood); }
.hero__lede {
  font-size: 1.22rem;
  line-height: 1.5;
  color: rgba(241, 236, 228, 0.78);
  max-width: 560px;
  margin: 1.6rem 0 2rem;
}
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

.hero__card {
  background: linear-gradient(180deg, rgba(241,236,228,0.06), rgba(241,236,228,0.02));
  border: 1px solid rgba(241,236,228,0.12);
  border-radius: 10px;
  padding: 28px;
  backdrop-filter: blur(4px);
}
.hero__card h4 { color: var(--bone); font-size: 0.78rem; letter-spacing: 0.22em; color: var(--bone-3); }
.hero__card .stat {
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--bone);
  margin: 0.2em 0 0.2em;
  display: block;
}
.hero__card .stat + p { color: rgba(241,236,228,0.72); font-size: 0.95rem; margin: 0; }
.hero__card + .hero__card { margin-top: 18px; }

@media (max-width: 880px) {
  .hero__inner { grid-template-columns: 1fr; gap: 36px; }
}

/* ─── Sections ─────────────────────────────────────── */
section { padding: clamp(64px, 9vw, 120px) 0; }
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head h2 { margin-bottom: 16px; }
.section-head .lede { font-size: 1.12rem; }

.section--steel { background: var(--steel); color: var(--bone); }
.section--steel h2, .section--steel h3, .section--steel h4 { color: var(--bone); }
.section--steel .eyebrow { color: var(--blood); }
.section--bone { background: var(--bone); }
.section--bone-2 { background: var(--bone-2); }
.section--ink { background: var(--ink); color: var(--bone); }
.section--ink h2, .section--ink h3, .section--ink h4 { color: var(--bone); }
.section--ink .eyebrow { color: var(--blood); }

.divider-tape {
  background: var(--blood);
  color: var(--bone);
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 12px 24px;
  text-align: center;
}

/* ─── Services grid ────────────────────────────────── */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.svc {
  background: var(--bone);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 36px 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 200ms ease, box-shadow 200ms ease;
  position: relative;
  overflow: hidden;
}
.section--steel .svc, .section--ink .svc { background: var(--steel-2); color: var(--bone); border-color: var(--steel-3); }
.section--steel .svc h3, .section--ink .svc h3 { color: var(--bone); }
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.svc__num {
  font-family: 'Archivo Black', Impact, sans-serif;
  color: var(--blood);
  font-size: 0.9rem;
  letter-spacing: 0.18em;
}
.svc h3 { margin-bottom: 0; }
.svc p { color: rgba(10,11,13,0.72); margin-bottom: 0; }
.section--steel .svc p, .section--ink .svc p { color: rgba(241,236,228,0.72); }
.svc ul { margin: 0; padding-left: 0; list-style: none; }
.svc ul li {
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  display: flex;
  gap: 12px;
}
.section--steel .svc ul li, .section--ink .svc ul li { border-color: var(--steel-3); color: var(--bone-3); }
.svc ul li::before { content: "→"; color: var(--blood); flex-shrink: 0; }
.svc a.svc__cta {
  margin-top: auto;
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blood);
  text-decoration: none;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.svc a.svc__cta:hover { gap: 14px; }

@media (max-width: 880px) { .svc-grid { grid-template-columns: 1fr; } }

/* ─── Process ──────────────────────────────────────── */
.process {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-d);
  border-bottom: 1px solid var(--line-d);
}
.process__step {
  padding: 32px 24px;
  border-right: 1px solid var(--line-d);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.process__step:last-child { border-right: none; }
.process__num {
  font-family: 'Archivo Black', Impact, sans-serif;
  color: var(--blood);
  font-size: 2.4rem;
  line-height: 1;
}
.process__step h4 { font-size: 1.05rem; letter-spacing: 0.04em; }
.process__step p { color: rgba(241,236,228,0.7); font-size: 0.95rem; margin: 0; }
@media (max-width: 960px) {
  .process { grid-template-columns: repeat(2, 1fr); }
  .process__step:nth-child(2n) { border-right: none; }
  .process__step { border-bottom: 1px solid var(--line-d); }
}
@media (max-width: 540px) {
  .process { grid-template-columns: 1fr; }
  .process__step { border-right: none; border-bottom: 1px solid var(--line-d); }
}

/* ─── About / split sections ───────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split--narrow { grid-template-columns: 1fr 0.85fr; }
@media (max-width: 880px) { .split, .split--narrow { grid-template-columns: 1fr; gap: 36px; } }

.portrait {
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(210, 51, 28, 0.22), transparent 60%),
    linear-gradient(160deg, var(--steel-2) 0%, var(--ink) 100%);
  border-radius: 8px;
  border: 1px solid var(--steel-3);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.portrait > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
/* dave-portrait-wide.webp: source is 1510x650 with Dave on the right ~75% mark.
   When cropped to 4/5 portrait, push focus far right so he's centered. */
.portrait--right > img { object-position: 78% center; }
/* dave-action.webp: 1200x676, Dave's torso centered-right with the machine left.
   Center crop works; tune slightly right for the 4/5 portrait. */
.portrait--action > img { object-position: 60% center; }
/* coaching shots: Dave + client both centered, just nudge down to show the work. */
.portrait--coaching > img { object-position: center 45%; }
.portrait--wide { aspect-ratio: 16 / 10; }
.portrait--banner { aspect-ratio: 16 / 7; }
.portrait svg { width: 56%; opacity: 0.5; }

/* ─── Transformations grid (before/after reveal sliders) ──── */
.transformations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.reveal {
  --pos: 50%;
  position: relative;
  aspect-ratio: 1 / 2;
  overflow: hidden;
  border-radius: 8px;
  background: var(--steel-2);
  border: 1px solid var(--steel-3);
  touch-action: none;
  user-select: none;
  cursor: ew-resize;
  transition: box-shadow 220ms ease, transform 220ms ease;
}
.reveal:hover { box-shadow: 0 30px 60px -28px rgba(210,51,28,0.45); transform: translateY(-2px); }
.reveal__before,
.reveal__after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  pointer-events: none;
}
.reveal__after {
  /* AFTER sits on top; reveal it from the left as the handle moves right.
     At pos=0 the AFTER is fully hidden (BEFORE shows through underneath).
     At pos=100 the AFTER fully covers the BEFORE.
     This makes dragging right feel like "revealing the transformation." */
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.reveal__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 4px;
  background: var(--bone);
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(10,11,13,0.4), 0 4px 24px rgba(10,11,13,0.45);
  cursor: ew-resize;
  z-index: 3;
}
.reveal__handle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 50px; height: 50px;
  background: var(--bone);
  color: var(--ink);
  border-radius: 50%;
  border: 3px solid var(--ink);
  box-shadow: 0 10px 32px rgba(10,11,13,0.55), 0 0 0 6px rgba(241,236,228,0.16);
  display: grid;
  place-items: center;
}
.reveal__handle::before {
  content: "‹ ›";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  z-index: 4;
  pointer-events: none;
  white-space: nowrap;
}
/* Gentle attention-pulse on the handle until the user has touched it. */
.reveal:not(.demoed):not(.dragging) .reveal__handle::after { animation: handle-pulse 2.4s ease-in-out infinite; }
@keyframes handle-pulse {
  0%, 100% { box-shadow: 0 10px 32px rgba(10,11,13,0.55), 0 0 0 6px rgba(241,236,228,0.16); }
  50%      { box-shadow: 0 10px 32px rgba(10,11,13,0.55), 0 0 0 14px rgba(210,51,28,0.22); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal__handle::after { animation: none !important; }
}
.reveal__label {
  position: absolute;
  top: 12px;
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(10,11,13,0.62);
  padding: 5px 10px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 1;
}
/* AFTER label sits on the left where the AFTER image fills as pos grows.
   BEFORE label sits on the right where the original photo shows through. */
.reveal__label--after  { left: 12px; background: var(--blood); }
.reveal__label--before { right: 12px; }
.reveal__caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 30px 16px 12px;
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  background: linear-gradient(180deg, transparent, rgba(10,11,13,0.78));
  pointer-events: none;
  z-index: 1;
}
.reveal.dragging .reveal__handle { box-shadow: 0 0 0 1px var(--blood), 0 8px 30px rgba(210,51,28,0.45); }
@media (max-width: 880px) { .transformations { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .transformations { grid-template-columns: 1fr; } }

/* ─── Elfsight testimonial container ───────────────── */
.reviews-wrap {
  background: var(--bone);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow-md);
  min-height: 300px;
}
@media (max-width: 540px) { .reviews-wrap { padding: 14px; } }

/* ─── Credentials strip ────────────────────────────── */
.creds {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cred {
  padding: 28px 22px;
  border-right: 1px solid var(--line);
}
.cred:last-child { border-right: none; }
.cred__big {
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--ink);
}
.cred__label {
  margin-top: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(10,11,13,0.6);
}
.section--steel .cred, .section--ink .cred { border-color: var(--steel-3); }
.section--steel .creds, .section--ink .creds { border-color: var(--steel-3); }
.section--steel .cred__big, .section--ink .cred__big { color: var(--bone); }
.section--steel .cred__label, .section--ink .cred__label { color: rgba(241,236,228,0.6); }
@media (max-width: 720px) {
  .creds { grid-template-columns: repeat(2, 1fr); }
  .cred:nth-child(2n) { border-right: none; }
}

/* ─── Pull quote ───────────────────────────────────── */
.pullquote {
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.section--steel .pullquote, .section--ink .pullquote { color: var(--bone); }
.pullquote::before, .pullquote::after { content: "“"; color: var(--blood); font-size: 1.5em; line-height: 0; vertical-align: -0.25em; margin-right: 0.1em; }
.pullquote::after { content: "”"; margin-left: 0.1em; margin-right: 0; }
.pullquote__attr {
  display: block;
  margin-top: 24px;
  font-family: 'Archivo Black', Impact, sans-serif;
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blood);
}

/* ─── Results / testimonial grid ───────────────────── */
.results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.result-card {
  background: var(--steel-2);
  border: 1px solid var(--steel-3);
  border-radius: 8px;
  padding: 36px;
  color: var(--bone);
}
.result-card .eyebrow { color: var(--blood); }
.result-card h3 { color: var(--bone); }
.result-card blockquote {
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.5;
  font-style: italic;
  margin: 16px 0;
  color: var(--bone-2);
}
.result-card .attr {
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(241,236,228,0.6);
}
@media (max-width: 720px) { .results-grid { grid-template-columns: 1fr; } }

/* ─── CTA band ─────────────────────────────────────── */
.cta-band {
  background: var(--blood);
  color: var(--bone);
  padding: clamp(56px, 8vw, 96px) 0;
  text-align: center;
}
.cta-band h2 { color: var(--bone); margin-bottom: 16px; }
.cta-band .lede { color: rgba(241,236,228,0.92); margin: 0 auto 32px; }
.cta-band .btn { background: var(--ink); color: var(--bone); }
.cta-band .btn:hover { background: var(--bone); color: var(--ink); }
.cta-band .btn--ghost { background: transparent; color: var(--bone); border-color: var(--bone); }
.cta-band .btn--ghost:hover { background: var(--bone); color: var(--blood); }

/* ─── Contact ──────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; gap: 36px; } }
.contact-card {
  background: var(--steel-2);
  border-radius: 8px;
  padding: 36px;
  color: var(--bone);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-card h3 { color: var(--bone); }
.contact-row {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--steel-3);
}
.contact-row:first-of-type { border-top: none; }
.contact-row__label {
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-3);
  min-width: 90px;
}
.contact-row a {
  color: var(--bone);
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
}
.contact-row a:hover { color: var(--blood); }

form.lead-form {
  display: grid;
  gap: 14px;
}
form.lead-form label {
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  margin-bottom: 6px;
}
form.lead-form input,
form.lead-form select,
form.lead-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bone);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
}
form.lead-form input:focus,
form.lead-form select:focus,
form.lead-form textarea:focus {
  outline: 2px solid var(--blood);
  outline-offset: 1px;
  border-color: var(--blood);
}
form.lead-form textarea { min-height: 120px; resize: vertical; }
form.lead-form .form__msg { font-size: 0.92rem; min-height: 1.2em; }
form.lead-form .form__msg.ok { color: var(--blood); }
form.lead-form .form__msg.err { color: var(--blood-2); }

/* ─── Floating action buttons (call + WhatsApp) ────── */
.fab-stack {
  position: fixed;
  right: 22px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 100;
}
.fab {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.fab:hover { transform: translateY(-2px) scale(1.04); color: #fff; }
.fab svg { width: 28px; height: 28px; fill: #fff; }
.fab--call {
  background: var(--blood);
  color: #fff;
  box-shadow: 0 12px 30px -8px rgba(210, 51, 28, 0.55), 0 4px 12px rgba(10, 11, 13, 0.25);
}
.fab--call:hover {
  box-shadow: 0 16px 38px -10px rgba(210, 51, 28, 0.65), 0 6px 16px rgba(10, 11, 13, 0.3);
}
.fab--wa {
  background: #25d366;
  color: #fff;
  box-shadow: 0 12px 30px -8px rgba(37, 211, 102, 0.55), 0 4px 12px rgba(10, 11, 13, 0.25);
}
.fab--wa:hover {
  box-shadow: 0 16px 38px -10px rgba(37, 211, 102, 0.6), 0 6px 16px rgba(10, 11, 13, 0.3);
}
.fab__label {
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink);
  color: var(--bone);
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.fab:hover .fab__label { opacity: 1; transform: translateY(-50%) translateX(-4px); }
@media (max-width: 540px) { .fab__label { display: none; } }
/* legacy class used by 404.html */
.wa-fab { position: fixed; bottom: 22px; right: 22px; background: #25d366; color: #fff; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; box-shadow: 0 12px 30px -8px rgba(37, 211, 102, 0.55), 0 4px 12px rgba(10, 11, 13, 0.25); z-index: 100; }
.wa-fab svg { width: 28px; height: 28px; fill: #fff; }

/* ─── Footer ───────────────────────────────────────── */
.footer {
  background: var(--ink);
  color: var(--bone-3);
  padding: 72px 0 32px;
  border-top: 1px solid var(--steel-2);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
.footer__brand { display: flex; flex-direction: column; gap: 16px; }
.footer__brand .brand__name { color: var(--bone); }
.footer__brand p { font-size: 0.95rem; color: rgba(241,236,228,0.65); max-width: 360px; }
.footer h4 {
  color: var(--bone);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  margin-bottom: 18px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer a { color: rgba(241,236,228,0.78); text-decoration: none; font-size: 0.95rem; }
.footer a:hover { color: var(--blood); }
.footer__bottom {
  border-top: 1px solid var(--steel-2);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(241,236,228,0.5);
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 880px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ─── Misc utilities ───────────────────────────────── */
.stack-sm > * + * { margin-top: 12px; }
.stack-md > * + * { margin-top: 20px; }
.row-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.tag {
  display: inline-block;
  font-family: 'Archivo Black', Impact, sans-serif;
  background: var(--ink);
  color: var(--blood);
  padding: 6px 12px;
  border-radius: 3px;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.section--bone .tag { background: var(--ink); color: var(--blood); }

/* ─── Page-hero (interior pages) ───────────────────── */
.page-hero {
  background: var(--ink);
  color: var(--bone);
  padding: clamp(72px, 9vw, 112px) 0 clamp(56px, 7vw, 80px);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 90% 10%, rgba(210, 51, 28, 0.18), transparent 55%),
    linear-gradient(180deg, #0a0b0d 0%, #14171b 100%);
  z-index: 0;
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero h1 { color: var(--bone); font-size: clamp(2.6rem, 7vw, 5.5rem); margin-bottom: 16px; }
.page-hero h1 .accent { color: var(--blood); }
.page-hero .lede { color: rgba(241,236,228,0.78); }
.page-hero .crumb {
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bone-3);
  margin-bottom: 22px;
}
.page-hero .crumb a { color: var(--bone-3); text-decoration: none; }
.page-hero .crumb a:hover { color: var(--blood); }

/* ════════════════════════════════════════════════════
   CAPTIVATING LAYER
   marquee tape, scroll reveals, hero ghost type, hover treatments
   ════════════════════════════════════════════════════ */

/* Animated marquee — top tape scrolls horizontally on infinite loop. */
.tape { padding: 0; }
.tape__inner {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  padding: 9px 0;
  animation: tape-scroll 38s linear infinite;
  max-width: none;
  width: max-content;
}
.tape__inner > span { padding-right: 48px; border-right: 1px solid var(--steel-2); }
.tape__inner > span:last-child { border-right: none; }
@keyframes tape-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .tape__inner { animation: none; }
}

/* Big editorial section divider with scrolling content (replaces flat div). */
.marquee {
  background: var(--blood);
  color: var(--bone);
  padding: 16px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(0,0,0,0.18);
}
.marquee__track {
  display: flex;
  gap: 60px;
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
  align-items: center;
}
.marquee__track > span {
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 24px;
}
.marquee__track > span::after {
  content: "✦";
  color: rgba(255,255,255,0.55);
  font-size: 1rem;
  display: inline-block;
}
.marquee--ink { background: var(--ink); color: var(--bone); }
.marquee--ink .marquee__track > span::after { color: var(--blood); }
.marquee--bone { background: var(--bone); color: var(--ink); border-color: var(--line); }
.marquee--bone .marquee__track > span::after { color: var(--blood); }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* Hero — bigger, more cinematic. Replaces card-style portrait with full-bleed
   image, adds a ghost "MTM" letterform behind the headline. */
.hero { padding-top: clamp(60px, 9vw, 110px); padding-bottom: 0; }
.hero__inner {
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  padding-bottom: clamp(0px, 4vw, 30px);
  position: relative;
}
.hero__copy { position: relative; z-index: 3; padding-bottom: clamp(40px, 8vw, 90px); }
.hero__ghost {
  position: absolute;
  top: -10vw; left: -3vw;
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: clamp(16rem, 32vw, 32rem);
  line-height: 0.78;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(241, 236, 228, 0.06);
  pointer-events: none;
  z-index: 1;
  user-select: none;
}
.hero__inner > .portrait {
  align-self: end;
  aspect-ratio: 4 / 5;
  border-radius: 0;
  border: none;
  position: relative;
  z-index: 2;
  background: transparent;
  margin-bottom: -1px;
}
.hero__inner > .portrait > img { object-position: 78% center; }
.hero__inner > .portrait::before {
  content: "";
  position: absolute;
  inset: auto -32px -28px auto;
  width: 70%;
  height: 70%;
  background: var(--blood);
  z-index: -1;
  border-radius: 4px;
}
.hero__inner > .portrait::after {
  content: "EST. BOCA RATON";
  position: absolute;
  left: -64px;
  bottom: 16%;
  transform: rotate(-90deg);
  transform-origin: left top;
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--bone-3);
}
@media (max-width: 880px) {
  .hero__inner > .portrait::before { display: none; }
  .hero__inner > .portrait::after { display: none; }
  .hero__inner > .portrait { aspect-ratio: 4/5; }
}

/* Editorial section headers — huge ghost number behind the title */
.section-num {
  display: inline-block;
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: clamp(6rem, 14vw, 12rem);
  line-height: 0.78;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(10,11,13,0.08);
  margin-bottom: -0.4em;
  pointer-events: none;
  user-select: none;
}
.on-dark .section-num { -webkit-text-stroke-color: rgba(241,236,228,0.08); }

/* Scroll reveal — sections fade-up as they enter the viewport.
   Default state set on [data-reveal], cleared by JS via .is-visible. */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22,1,0.36,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Counters — big editorial numbers in creds strip */
.cred__big[data-counter] { display: inline-block; min-width: 2ch; }

/* Service card hover — accent bar slides in */
.svc { overflow: hidden; }
.svc::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--blood);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 320ms cubic-bezier(0.22,1,0.36,1);
}
.svc:hover::before { transform: scaleY(1); transform-origin: top; }

/* Transformation card hover — already partly handled by .reveal:hover; add subtle glow */
.reveal::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 9px;
  pointer-events: none;
  box-shadow: inset 0 0 0 0 var(--blood);
  transition: box-shadow 220ms ease;
  z-index: 4;
}
.reveal:hover::after { box-shadow: inset 0 0 0 2px var(--blood); }

/* Pull quote oversized opening mark */
.pullquote { position: relative; padding: 0 24px; }
.pullquote::before, .pullquote::after { font-size: 2em; }

/* Big stats — number with subtle scale-in on visible */
[data-counter] { display: inline-block; transition: transform 600ms ease; }

/* Tape entries — replicate for marquee loop */
.tape__inner > span,
.marquee__track > span { flex-shrink: 0; }

/* ════════════════════════════════════════════════════
   MOBILE RESPONSIVE PASS
   Defensive overrides for everything the captivating layer
   broke when shrunk down to a phone viewport.
   ════════════════════════════════════════════════════ */

/* Belt-and-suspenders: kill any horizontal scroll that the giant ghost
   letterforms or absolutely-positioned hero decorations might cause. */
html, body { overflow-x: hidden; max-width: 100vw; }

/* Hero ghost — at 32vw the "MTM" letterform is far wider than a phone
   viewport. Scale it way down (or hide outright) so it stops dominating. */
@media (max-width: 880px) {
  .hero__ghost {
    font-size: clamp(7rem, 28vw, 14rem);
    top: -4vw;
    left: -2vw;
    -webkit-text-stroke-width: 1px;
  }
}
@media (max-width: 540px) {
  .hero__ghost { display: none; }
}

/* Hero copy: when stacked above the portrait on mobile, kill the bottom
   padding so the two elements sit close. */
@media (max-width: 880px) {
  .hero { padding-top: clamp(40px, 8vw, 70px); }
  .hero__copy { padding-bottom: 0; }
  .hero__inner { gap: 28px; }
  .hero__inner > .portrait {
    width: 100%;
    aspect-ratio: 4/5;
    border-radius: 8px;
  }
}

/* Marquee section: 1.4rem is too aggressive on small phones, especially
   with a long word like "national-level". Scale it down. */
@media (max-width: 720px) {
  .marquee__track > span { font-size: 1rem; letter-spacing: 0.14em; gap: 14px; }
  .marquee__track { gap: 36px; }
  .marquee { padding: 12px 0; }
}

/* Top tape: tighten the spans on mobile so the marquee scrolls smoother
   and doesn't push a wall of dense text. */
@media (max-width: 720px) {
  .tape { font-size: 0.68rem; letter-spacing: 0.22em; }
  .tape__inner { gap: 28px; }
  .tape__inner > span { padding-right: 28px; }
}

/* Page hero (interior pages): tighter padding + h1 on mobile so it
   doesn't dominate the first scroll. */
@media (max-width: 720px) {
  .page-hero { padding: clamp(40px, 8vw, 60px) 0 clamp(30px, 5vw, 40px); }
  .page-hero h1 { font-size: clamp(2.2rem, 8vw, 3.6rem); }
}

/* Pull quotes: tighten on mobile so the giant decorative quotes don't
   blow past the screen edge. */
@media (max-width: 720px) {
  .pullquote { font-size: clamp(1.2rem, 5vw, 1.8rem); padding: 0 12px; }
  .pullquote::before, .pullquote::after { font-size: 1.5em; }
}

/* Reveal slider on mobile: still 1:2 aspect but the handle pulse halo
   has a 14px ring that can look heavy. Tone it down. */
@media (max-width: 540px) {
  .reveal__handle::after { width: 44px; height: 44px; border-width: 2px; }
  .reveal__handle::before { font-size: 0.95rem; }
  .reveal__label { font-size: 0.6rem; padding: 4px 8px; }
}

/* Service-grid cards: padding shrinks on mobile so they don't feel
   over-padded relative to the card content. */
@media (max-width: 540px) {
  .svc { padding: 26px 22px; }
  .svc h3 { font-size: 1.3rem; }
}

/* Floating action buttons: keep them clear of the bottom nav on iOS
   Safari, where the address bar bounces. */
@media (max-width: 540px) {
  .fab-stack { right: 16px; bottom: 16px; gap: 10px; }
  .fab { width: 52px; height: 52px; }
  .fab svg { width: 24px; height: 24px; }
}

/* Contact form: the inline 2-column email/phone grid breaks at small
   widths. Stack to a single column on phones. */
@media (max-width: 540px) {
  form.lead-form div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Hero h1: smaller floor on small phones so it doesn't take 4 lines. */
@media (max-width: 540px) {
  h1 { font-size: clamp(2.4rem, 11vw, 4rem); }
  .hero h1 { font-size: clamp(2.6rem, 12vw, 4.4rem); }
  h2 { font-size: clamp(1.8rem, 7vw, 2.6rem); }
}

/* Section padding: cap at 60px on phones so vertical rhythm doesn't
   stretch into infinite blank space. */
@media (max-width: 540px) {
  section { padding: clamp(48px, 9vw, 72px) 0; }
  .container { padding: 0 20px; }
}

/* Footer: 1-column footer was already wired, but the brand block can
   crowd. Tighten. */
@media (max-width: 540px) {
  .footer { padding: 48px 0 28px; }
  .footer__grid { gap: 32px; margin-bottom: 36px; }
}

/* Process steps: 1-col on small phones already, but tighten padding. */
@media (max-width: 540px) {
  .process__step { padding: 24px 16px; }
  .process__num { font-size: 1.8rem; }
}

/* Creds strip: numbers shrink on mobile. */
@media (max-width: 540px) {
  .cred { padding: 18px 14px; }
  .cred__big { font-size: 1.6rem; }
  .cred__label { font-size: 0.66rem; letter-spacing: 0.16em; }
}

/* Topbar: brand mark + tagline can wrap awkwardly. */
@media (max-width: 540px) {
  .topbar__inner { padding: 14px 18px; gap: 12px; }
  .brand__mark { width: 38px; height: 38px; font-size: 0.95rem; }
  .brand__name { font-size: 0.92rem; }
  .brand__tag { font-size: 0.66rem; }
}