/* elite-funnel — v1.8 stylesheet
   DM Sans typography + Elite Design Group lime palette. */

:root {
  /* Brand greens — taken from elitedesigngroup.com */
  --lime:       #82bf00;   /* primary brand accent (24× on reference site) */
  --lime-deep:  #6fa800;   /* hover / pressed */
  --lime-edge:  #8fae1b;   /* secondary lime */

  /* Slate ink scale — matches reference site's text tones */
  --ink:        #111111;
  --ink-soft:   #1e293b;
  --ink-mid:    #475569;
  --ink-faint:  #9CA3AF;
  --line:       #D1D5DB;
  --line-soft:  #e6e6e2;

  /* Paper tones */
  --paper:      #ffffff;
  --paper-cool: #fafafa;
  --paper-warm: #fbfbfb;
  --paper-blue: #F0F5FA;
  --paper-lime: #f1f7e0;  /* soft lime wash — brand green at ~8% over white */
  --paper-sage: #dbe3cd;  /* desaturated sage grey-green — calmer, more visible */

  /* Accents */
  --accent:     var(--lime);
  --accent-ink: #ffffff;
  --whatsapp:   #25d366;
  --warning:    #b25b17;
}

*, *::before, *::after { box-sizing: border-box; }

/* ---------- ICON SYSTEM ---------- */
.icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  fill: currentColor;
  stroke: currentColor;
  flex-shrink: 0;
}
/* feather-style icons that use stroke not fill */
.icon use { stroke: inherit; }
.icon-check {
  color: var(--lime);
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.18em;
}
.icon-arrow {
  width: 1em;
  height: 1em;
  margin-left: 0.15em;
  vertical-align: -0.15em;
}
.pillar-icon svg {
  width: 44px;
  height: 44px;
  color: var(--lime);
  display: block;
}

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { font-family: "DM Sans", sans-serif; line-height: 1.15; margin: 0 0 0.5em; color: var(--ink); font-weight: 800; letter-spacing: -0.02em; }
p          { margin: 0 0 1em; }
a          { color: var(--accent); }
img        { max-width: 100%; height: auto; display: block; }

.container        { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
.container.narrow { max-width: 720px; }

section, footer { padding: 5rem 0; }

/* ---------- SITE HEADER ---------- */
.site-header {
  background: transparent;
  border-bottom: 1px solid transparent;
  padding: 1rem 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: none;
  transition: background 0.3s ease, border-bottom-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.scrolled {
  background: #ffffff;
  border-bottom-color: rgba(0,0,0,0.08);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
/* Initial state: header is empty (logo lives inside the hero).
   On scroll, logo + CTAs appear in the fixed header. */
.site-header .brand-link { display: none; }
.site-header.scrolled .brand-link { display: inline-flex; }
.site-header .header-ctas { display: none; }
.site-header.scrolled .header-ctas { display: flex; }
.site-header.scrolled .container {
  justify-content: space-between;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.brand-link { display: inline-flex; align-items: center; line-height: 0; }
.brand-logo { height: 72px; width: auto; display: block; }

.header-ctas { display: flex; gap: 0.5rem; align-items: center; }
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  line-height: 1;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.header-cta .icon { width: 1.1em; height: 1.1em; vertical-align: middle; }
.header-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.header-cta-phone    { background: var(--paper-cool); color: var(--ink); border: 1px solid var(--line); }
.header-cta-whatsapp { background: var(--lime); color: var(--ink); }
.hcta-label { font-size: 0.95rem; }

@media (max-width: 720px) {
  .brand-logo { height: 56px; }
}

@media (max-width: 560px) {
  .brand-logo { height: 48px; }
  .header-cta { padding: 0.45rem 0.7rem; }
  .header-cta-phone .hcta-label,
  .header-cta-whatsapp .hcta-label { display: none; }  /* icon-only CTAs on mobile so logo isn't squished */
}

@media (max-width: 380px) {
  .hero-title-mobile .hero-dash { display: none; }
  .brand-logo { height: 40px; }
  .header-cta { padding: 0.4rem 0.6rem; font-size: 0.85rem; }
  .header-cta-whatsapp .hcta-label { font-size: 0.85rem; }
  .site-header { padding: 0.7rem 0; }
  .site-header .container { padding: 0 1rem; gap: 0.5rem; }
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  background:
    linear-gradient(90deg, rgba(130,191,0,0.25) 0%, rgba(130,191,0,0.12) 25%, rgba(130,191,0,0.03) 45%, rgba(130,191,0,0) 65%),
    linear-gradient(90deg, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.58) 45%, rgba(0,0,0,0.30) 75%, rgba(0,0,0,0.08) 95%, rgba(0,0,0,0.04) 100%),
    url("/assets/hero-desktop.webp?v=v108") center/cover no-repeat;
  color: #ffffff;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 4rem 0 7rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero .trust-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.18);
  padding: 1rem 0;
}
.hero .trust-bar .container {
  color: rgba(255,255,255,0.92);
  font-size: 0.92rem;
}
.hero > .container { max-width: 860px; }
.hero-logo {
  display: block;
  height: 80px;
  width: auto;
  margin: 0 auto 2rem;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35));
}
@media (max-width: 720px) { .hero-logo { height: 60px; margin-bottom: 1.5rem; } }
@media (max-width: 480px) { .hero-logo { height: 48px; margin-bottom: 1.25rem; } }
.hero h1 {
  font-size: clamp(2rem, 4.4vw, 2.8rem);
  color: #ffffff;
  margin-bottom: 1rem;
  letter-spacing: -0.025em;
  font-weight: 800;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
/* desktop title shown by default; mobile-specific title kept in DOM but hidden */
.hero h1 .hero-title-desktop { display: inline; }
.hero h1 .hero-title-mobile  { display: none; }
.hero .sub {
  font-size: 1.2rem;
  max-width: 640px;
  margin: 0 auto 2.5rem;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.hero .cta-headline {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.5rem 0 0;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.hero .cta-disclaimer { margin-top: 1.25rem; font-size: 0.9rem; color: rgba(255,255,255,0.78); }

/* ---------- CTA BUTTONS ---------- */
.cta-group { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.cta .icon { width: 1.1em; height: 1.1em; vertical-align: middle; }
.cta:hover  { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.15); }
.cta:active { transform: translateY(0); }
.cta-whatsapp { background: var(--lime); color: var(--ink); }
.cta-phone    { background: var(--paper);   color: var(--ink);   border: 1px solid var(--line); }

/* ---------- TRUST BAR ---------- */
.trust-bar {
  background: var(--paper-cool);
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}
.trust-bar .container {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.trust-bar span { white-space: nowrap; }

/* ---------- PROBLEM / NICHE (narrow text sections) ---------- */
.problem h2, .niche h2, .price-anchor h2, .capture h2 {
  text-align: center;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  margin-bottom: 1.5rem;
}
.problem p, .niche p, .price-anchor p, .capture p {
  font-size: 1.1rem;
  color: var(--ink-soft);
  text-align: center;
}
.problem .emphasis {
  font-weight: 600;
  color: var(--ink);
  font-size: 1.2rem;
  margin-top: 1.25rem;
}
.problem { background: var(--paper); }
.niche   { background: var(--paper-warm); }

/* ---------- VALUE PROP ---------- */
.value {
  background:
    linear-gradient(rgba(219,227,205,0.55), rgba(219,227,205,0.55)),
    url("/assets/bg-plan-desktop.webp") center/cover no-repeat;
  background-color: var(--paper-sage);
}
@media (max-width: 760px) {
  .value { background-image: linear-gradient(rgba(219,227,205,0.55), rgba(219,227,205,0.55)), url("/assets/bg-plan-mobile.webp"); }
}
.value h2        { text-align: center; font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin-bottom: 3rem; }
.value-grid      { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pillar          { background: var(--paper); padding: 2rem; border-radius: 12px; border: 1px solid var(--line); display: flex; flex-direction: column; }
.pillar-icon     { margin-bottom: 1rem; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 14px; background: rgba(130, 191, 0, 0.12); }
.pillar h3       { font-size: 1.2rem; margin-bottom: 0.5rem; }
.pillar p        { color: var(--ink-soft); margin: 0; }

/* image-led pillar variant — image banner replaces the icon */
.pillar-with-image { padding: 0; overflow: hidden; }
.pillar-with-image .pillar-image { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-cool); position: relative; }
.pillar-with-image .pillar-image img,
.pillar-with-image .pillar-image picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.pillar-with-image h3 { padding: 1.5rem 1.5rem 0.5rem; margin: 0 0 0.5rem; }
.pillar-with-image p  { padding: 0 1.5rem 1.5rem; }

/* process layout — cards with arrows between */
.value-grid-process {
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 1.25rem;
  align-items: stretch;
}
.value-grid-process .pillar-with-image p { flex: 1; }  /* body absorbs extra height so cards align */

/* lime card body + white text on the process cards (image area stays as-is) */
.value-grid-process .pillar {
  background: var(--lime);
  border-color: var(--lime);
}
.value-grid-process .pillar h3,
.value-grid-process .pillar p { color: var(--ink); }

.step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lime);
}
.step-arrow svg {
  width: 2.75rem;
  height: 2.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.12));
}

@media (max-width: 760px) {
  .value-grid-process { grid-template-columns: 1fr; }
  .step-arrow { transform: rotate(90deg); padding: 0.25rem 0; }
}

/* ---------- FEATURED PLANS ---------- */
.plans           { background: var(--paper); }
.plans h2        { text-align: center; font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin-bottom: 1rem; }
.plans h2 .plans-h2-desktop { display: inline; }
.plans h2 .plans-h2-mobile  { display: none; }
@media (max-width: 640px) {
  .plans h2 .plans-h2-desktop { display: none; }
  .plans h2 .plans-h2-mobile  { display: inline; }
}
.plans .lead     { text-align: center; color: var(--ink-soft); max-width: 640px; margin: 0 auto 1rem; }
.plans-catalog   { text-align: center; color: var(--ink); font-weight: 700; letter-spacing: 0.01em; max-width: 640px; margin: 0 auto 3rem; }
.plans-grid      { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.plan-card       { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--paper); display: flex; flex-direction: column; }
.plan-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: repeating-linear-gradient(45deg, #ececea 0px, #ececea 10px, #f3f3f1 10px, #f3f3f1 20px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.plan-thumb-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  font-size: 0.9rem;
  font-style: italic;
  z-index: 1;
}
.plan-thumb picture,
.plan-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 2;
}
.plan-thumb-empty picture { display: none; }  /* image 404 → fallback shows */
.plan-card h3    { font-size: 1.15rem; padding: 1.25rem 1.25rem 0.25rem; margin: 0; }
.plan-card h3 .plan-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.12s ease;
}
.plan-card h3 .plan-link:hover { color: var(--lime-deep); }
.plan-card .spec  { padding: 0 1.25rem 1.25rem; font-size: 0.9rem; color: var(--ink-faint); margin: 0; line-height: 1.55; }
.plan-card .price { padding: 0 1.25rem 0.85rem; font-size: 1rem; font-weight: 700; color: var(--lime-deep); margin-top: auto; }

/* shared CTA below the plans grid */
.plans-cta {
  text-align: center;
  margin-top: 3rem;          /* matches the lead-text → grid spacing above */
}
.plans-cta p {
  color: var(--ink);
  font-size: 1.15rem;
  max-width: 580px;
  margin: 0 auto 2rem;       /* breathing room down to the buttons */
}
.plans-cta .cta-group { justify-content: center; }
.plan-card .feel { padding: 0 1.25rem; color: var(--ink-soft); flex-grow: 1; }
.plan-card .ask-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--lime);
  text-decoration: none;
  font-weight: 700;
  background: var(--lime);
  color: var(--ink);
  transition: background 0.12s ease;
}
.plan-card .ask-link .icon       { color: var(--ink); }
.plan-card .ask-link .icon-arrow { color: var(--ink); margin-left: auto; }
.plan-card .ask-link:hover       { background: var(--lime-deep); }

/* ---------- PRICE ANCHOR ---------- */
.price-anchor {
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.6) 25%,
      rgba(255,255,255,0.9) 50%,
      rgba(255,255,255,0.6) 75%,
      rgba(255,255,255,0) 100%),
    url("/assets/bg-plan-desktop.webp") center/cover no-repeat;
  background-color: var(--paper);
  border: none;
}
@media (max-width: 760px) {
  .price-anchor {
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.6) 25%,
        rgba(255,255,255,0.9) 50%,
        rgba(255,255,255,0.6) 75%,
        rgba(255,255,255,0) 100%),
      url("/assets/bg-plan-mobile.webp") center/cover no-repeat;
  }
}
.price-anchor h2 { color: var(--ink); }
.price-anchor p  { color: var(--ink); }
.price-anchor .container.narrow { text-align: center; }
.price-anchor .guarantee-icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 1.5rem;
  display: block;
  color: var(--ink);
}

/* ---------- TESTIMONIALS ---------- */
.testimonials       { background: var(--paper-cool); }
.testimonials h2    { text-align: center; font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin-bottom: 3rem; }
.testimonial-grid   { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.testimonials figure { margin: 0; background: var(--lime); padding: 1.75rem; border-radius: 12px; border: 1px solid var(--lime); }
.testimonials blockquote {
  margin: 0 0 1rem;
  font-style: italic;
  color: var(--ink);
  line-height: 1.65;
  font-size: 1rem;
}
.testimonials figcaption { color: var(--ink); font-size: 0.9rem; font-weight: 700; }

/* ---------- LEAD FORM (lives in the merged final-cta closer) ---------- */
#lead-form          { display: flex; flex-direction: column; gap: 0.75rem; max-width: 460px; margin: 0.5rem auto 0; }
#lead-form input,
#lead-form textarea {
  padding: 0.95rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
}
#lead-form textarea { resize: vertical; min-height: 110px; }
#lead-form button {
  padding: 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease;
}
#lead-form button:hover { background: var(--lime-deep); transform: translateY(-1px); }
/* "or" divider above the form */
.closer-or {
  text-align: center;
  margin: 0 auto 1rem;
  color: var(--ink-faint);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

/* ---------- FINAL CTA / CLOSER (merged with lead form, 2-col on desktop) ---------- */
.final-cta {
  background: #eef0f2;  /* slight grey */
  color: var(--ink);
  text-align: center;
}
.final-cta h2 { color: var(--ink); font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.final-cta .closer-intro { color: var(--ink-soft); max-width: 640px; margin: 0 auto 2.5rem; }
.final-cta .cta-disclaimer { margin-top: 1.25rem; font-size: 0.9rem; color: var(--ink-faint); }

.closer-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
}
.closer-col-title {
  font-size: 1.3rem;
  margin: 0 0 1.25rem;
  color: var(--ink);
}
.closer-jj-photo {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  background: url('/assets/jj-contact-desktop.webp?v=v108') center / cover no-repeat;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.closer-cta-col  { display: flex; flex-direction: column; align-items: center; }
.closer-cta-col .closer-btn { width: 100%; max-width: 320px; }
.closer-cta-col .cta-phone   { margin-bottom: 1rem; }   /* guaranteed breathing room above WhatsApp */
.closer-cta-col .closer-btn-bottom { margin-top: auto; } /* WhatsApp pushed to col bottom */
.closer-form-col { text-align: center; display: flex; flex-direction: column; }
.closer-form-col #lead-form { margin-top: 0; flex: 1; display: flex; flex-direction: column; gap: 0; }
.closer-form-col #lead-form input,
.closer-form-col #lead-form textarea { margin-bottom: 0.75rem; }
.closer-form-col #lead-form button {
  margin-top: auto;   /* anchor send button to bottom of column */
  margin-bottom: 0;
}
.closer-form-col .cf-turnstile {
  margin: 0;
  min-height: 0;  /* collapses to zero when interaction-only — so it doesn't push send button up */
}

@media (max-width: 760px) {
  .closer-layout { grid-template-columns: 1fr; gap: 2rem; }
  .closer-jj-photo { width: 140px; height: 140px; }
  .closer-cta-col .closer-btn-bottom { margin-top: 0; }
}

/* ---------- LEAD FORM THANK-YOU + ERROR ---------- */
.form-thanks {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--paper-lime, #f1f7e0);
  border: 1px solid var(--lime, #82bf00);
  border-radius: 16px;
  max-width: 460px;
  margin: 2rem auto 0;
}
.form-thanks .thanks-icon {
  color: var(--lime, #82bf00);
  margin: 0 auto 0.75rem;
  display: block;
}
.form-thanks h3 {
  font-size: 1.35rem;
  margin: 0 0 0.5rem;
  color: var(--ink, #111111);
}
.form-thanks p {
  color: var(--ink-soft, #1e293b);
  margin: 0 0 0.75rem;
}
.form-thanks .thanks-sub {
  font-size: 0.95rem;
  color: var(--ink-mid, #475569);
  margin-top: 1rem;
}
.form-thanks .thanks-sub a {
  color: var(--lime-deep, #6fa800);
  font-weight: 600;
  text-decoration: none;
}
.form-thanks .thanks-sub a:hover { text-decoration: underline; }

.form-err {
  margin-top: 0.85rem;
  padding: 0.7rem 0.95rem;
  background: #fff4f0;
  border: 1px solid #f3c4b8;
  color: #7a3a14;
  border-radius: 8px;
  font-size: 0.92rem;
}

/* ---------- LEGAL PAGES (Privacy + Terms) ---------- */
main.legal { padding: 3rem 0 4rem; background: var(--paper); }
main.legal h1 { font-size: 2rem; margin-bottom: 0.5rem; }
main.legal h2 { font-size: 1.15rem; margin-top: 2rem; margin-bottom: 0.5rem; color: var(--ink); }
main.legal p { color: var(--ink-soft); }
main.legal .legal-lead { color: var(--ink-faint); font-size: 1.05rem; margin-bottom: 2rem; }
main.legal ul { color: var(--ink-soft); padding-left: 1.25rem; }
main.legal ul li { margin-bottom: 0.35rem; }
main.legal a { color: var(--accent); }
main.legal .legal-footnote { color: var(--ink-faint); font-size: 0.85rem; margin-top: 2.5rem; font-style: italic; }

/* ---------- FOOTER ---------- */
footer {
  background: #ffffff;
  color: var(--ink);
  text-align: center;
  padding: 1.5rem 0;
  font-size: 0.88rem;
  border-top: 1px solid var(--line-soft);
}
footer p          { margin: 0.15rem 0; color: var(--ink); }
footer .footer-logo { height: 56px; width: auto; display: block; margin: 0 auto 0.75rem; }
footer a          { color: var(--ink); text-decoration: underline; }
footer .footer-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
footer .footer-info p { margin: 0; }
footer .footer-sep   { color: var(--ink-faint); }
@media (max-width: 640px) {
  footer .footer-info { flex-direction: column; gap: 0.1rem; }
  footer .footer-sep  { display: none; }
}
footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line-soft);
}
footer .footer-bottom .copyright,
footer .footer-bottom .links { margin: 0; font-size: 0.82rem; color: var(--ink-faint); }
@media (max-width: 640px) {
  footer .footer-bottom { flex-direction: column; gap: 0.25rem; text-align: center; }
}

/* ---------- MEET JJ ---------- */
.meet-jj         { background: var(--paper-warm); }
.meet-jj-grid    {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.4fr;
  gap: 3rem;
  align-items: center;
}
.meet-jj-photo img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.meet-jj-text h2  { font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin-bottom: 0.25rem; }
.meet-jj-role     { color: var(--ink-faint); font-size: 1.05rem; font-style: italic; margin-bottom: 1.25rem; }
.meet-jj-award    { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--lime-deep); font-weight: 700; font-size: 1rem; letter-spacing: 0.01em; margin: 0 0 1.5rem; }
.meet-jj-award .icon-award { width: 2.5rem; height: 2.5rem; flex-shrink: 0; }
@media (max-width: 640px) {
  .meet-jj-award { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem; }
}
.meet-jj-text h3  { font-size: 1.25rem; color: var(--ink); margin: 0 0 1rem; }
.meet-jj-text p   { color: var(--ink-soft); }
.meet-jj-close    { font-weight: 600; color: var(--ink); font-size: 1.15rem; margin-top: 1.25rem; }

@media (max-width: 760px) {
  .meet-jj-grid     { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
  .meet-jj-photo    { max-width: 320px; margin: 0 auto; }
}

/* ---------- MOBILE TUNING ---------- */
@media (max-width: 640px) {
  section, footer { padding: 3.5rem 0; }
  .hero           { padding: 4rem 0 3.5rem; }
  .trust-bar .container { gap: 1rem; font-size: 0.88rem; }
  .cta            { width: 100%; max-width: 320px; }
  .cta-group      { flex-direction: column; align-items: center; }
}

/* short labels are hidden by default (desktop + landscape) */
.cta-label-short { display: none; }

/* ---------- MOBILE + TABLET PORTRAIT (phones & tablets held upright) ---------- */
@media (max-width: 1024px) and (orientation: portrait) {
  /* full-screen hero with shifted bg so central person is in view */
  .hero {
    background:
      linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.25) 100%),
      url("/assets/hero-mobile.webp?v=v108") center/cover no-repeat;
    min-height: 100vh;   /* fallback for old browsers */
    min-height: 100svh;  /* pinned to URL-bar-visible state — no reflow on scroll */
    padding: 3rem 0 0;
    justify-content: flex-start;
  }
  /* container fills hero; logo sticks to top, text+CTAs pushed to lower half
     so the faces between them stay visible */
  .hero > .container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .hero-logo { height: 68px; margin-bottom: 0; }
  .hero h1   { font-size: clamp(1.5rem, 6.5vw, 2.1rem); line-height: 1.15; margin: 32vh 0 0.75rem; margin-top: 32svh; }
  .hero-title-mobile .title-line { white-space: nowrap; }
  .hero h1 .hero-title-desktop { display: none; }
  .hero h1 .hero-title-mobile  { display: inline; }
  .hero .sub { font-size: 1rem; margin-bottom: 1.5rem; }

  /* WhatsApp + Call side-by-side, icon + one short word */
  .hero .cta-group {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.6rem;
  }
  .hero .cta {
    width: auto;
    max-width: none;
    flex: 0 1 auto;
    padding: 0.7rem 1.1rem;
    font-size: 0.95rem;
  }
  .hero .cta .cta-label-full  { display: none; }
  .hero .cta .cta-label-short { display: inline; }

  /* trust bar: in-flow at bottom of hero, smaller text to fit ~2 rows */
  .hero .trust-bar {
    position: static;
    padding: 0.75rem 0 1rem;
  }
  .hero .trust-bar .container {
    gap: 0.35rem 0.9rem;
    font-size: 0.72rem;
  }
  .hero .trust-bar .icon-check {
    width: 0.85em;
    height: 0.85em;
  }
}
@media (max-width: 380px) and (orientation: portrait) {
  .hero-logo { height: 56px; }
  .hero h1   { font-size: 1.8rem; }
  .hero .cta { padding: 0.65rem 0.9rem; font-size: 0.9rem; }
  .hero .trust-bar .container { font-size: 0.68rem; gap: 0.3rem 0.7rem; }
}

/* ---------- TABLET PORTRAIT — logo travels with the title block so they sit together below JJ's face ---------- */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
  .hero-logo {
    margin-top: 45vh;
    margin-top: 45svh;
  }
  .hero h1 {
    margin-top: 1.25rem;
  }
}

/* ---------- TABLET LANDSCAPE — shift hero image right so foreground person clears title ---------- */
@media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape) {
  .hero {
    background:
      linear-gradient(90deg, rgba(130,191,0,0.25) 0%, rgba(130,191,0,0.12) 25%, rgba(130,191,0,0.03) 45%, rgba(130,191,0,0) 65%),
      linear-gradient(90deg, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.58) 45%, rgba(0,0,0,0.30) 75%, rgba(0,0,0,0.08) 95%, rgba(0,0,0,0.04) 100%),
      url("/assets/hero-desktop.webp?v=v108") 70% center/cover no-repeat;
  }
}