/* /testhome2 SANDBOX styles. SCOPED entirely under .testhome2 (content) and
   body.testhome2-page (header/footer overrides) so nothing here bleeds onto the
   live site. Do NOT move any of this into base.css. Palette + rules come from
   the /testhome2 spec. Large display headings use flat #f27321 by Jordan's
   approved large-heading exception (fails AA at ~2.6:1); this is NOT used for
   body copy, links, or small text. Button contrast (#f27321 + white) is under
   review by Jeff; built as specified. */

.testhome2 {
  --t2-warm: #f5f2ef;    /* background warm white (no pure white anywhere but topics) */
  --t2-blue: #35454f;    /* blue sections + eyebrow + some text */
  --t2-orange: #f27321;  /* buttons, fills, decorative, large headings (exception) */
  --t2-black: #2d2c2b;   /* body + standard headings */
  --t2-white: #ffffff;   /* button label, text on blue */
  --t2-maxw: 64rem;
  color: var(--t2-black);
  font-family: var(--font-body);
  background: var(--t2-warm);
}

.testhome2 .t2-inner { width: 100%; max-width: var(--t2-maxw); margin: 0 auto; padding: 0 1.25rem; }
/* Section padding scoped to the bespoke t2 sections only, so the reused
   .topics-block (kept exactly as the real homepage) is left alone. */
.testhome2 .t2-hero, .testhome2 .t2-bio,
.testhome2 .t2-steps, .testhome2 .t2-stakes, .testhome2 .t2-ctaband,
.testhome2 .t2-service { padding: 4.5rem 0; }
.testhome2 h1, .testhome2 h2, .testhome2 h3 { font-family: var(--font-display); color: var(--t2-black); }
.testhome2 p { line-height: 1.65; }

/* --- Orange CTA button: single style everywhere (#f27321 bg, white, bolder) -- */
.testhome2 .t2-btn {
  display: inline-block; background: var(--t2-orange); color: var(--t2-white);
  font-family: var(--font-body); font-weight: 700; font-size: 1.05rem;
  padding: 0.85rem 1.6rem; border-radius: 999px; text-decoration: none;
  border: 0; cursor: pointer; line-height: 1.1;
}
.testhome2 .t2-btn:hover { filter: brightness(0.96); }
.testhome2 .t2-btn-secondary {
  display: inline-block; background: transparent; color: var(--t2-black);
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  padding: 0.85rem 1.5rem; text-decoration: none;
  border: 1.5px solid var(--t2-black); border-radius: 999px;   /* pill again, not underline-only */
}
.testhome2 .t2-on-blue .t2-btn-secondary { color: var(--t2-white); border-color: var(--t2-white); }

/* NOTE: the flat-orange primary-button styling (.btn-primary / .mobile-nav-cta /
   .sf-btn) that used to live here, scoped to body.testhome2-page, was promoted
   to base.css un-scoped so the whole site (interior pages, footer, and PPC)
   shares the same orange primary button. Home looks identical; the rule is just
   global now. Body CTAs on this page use .t2-btn (styled below), not .btn. */

/* --- Hero (Section 3) ---------------------------------------------------- */
.testhome2 .t2-hero { background: var(--t2-warm); padding-top: 3.5rem; }
.testhome2 .t2-hero .t2-inner { display: grid; grid-template-columns: 1.35fr 0.9fr; gap: 3rem; align-items: center; }
.testhome2 .t2-eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--t2-blue); margin: 0 0 1rem;
}
.testhome2 .t2-hero h1 {
  color: var(--t2-black); font-weight: 800;
  font-size: clamp(2.3rem, 6vw, 4.2rem); line-height: 1.04; margin: 0 0 1.1rem; max-width: 18ch;   /* restored original hero H1 size */
}
.testhome2 .t2-hl { color: var(--t2-orange); }   /* first three words "Therapy for men" (large-heading exception) */
.testhome2 .t2-hero-second {
  font-family: var(--font-body);   /* body font, not the heading font */
  color: var(--t2-black); font-weight: 700;   /* bold, per spec */
  font-size: 1.2rem; line-height: 1.55; max-width: 42ch; margin: 0 0 1.8rem;
}
.testhome2 .t2-cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem 1.4rem; align-items: center; }
.testhome2 .t2-trust { margin: 1.4rem 0 0; font-size: 0.9rem; color: var(--t2-blue); }
.testhome2 .t2-hero-photo { max-width: 340px; margin: 0 auto; }
.testhome2 .t2-hero-photo img { width: 100%; height: auto; display: block; border-radius: 10px; }
.testhome2 .t2-hero-cap { margin: 0.7rem 0 0; font-size: 0.82rem; color: var(--t2-blue); text-align: center; }

/* --- "I'm good" SUNRISE (Section 11; scroll-driven; sandbox test) ---------
   PROGRESSIVE ENHANCEMENT: the base rules are the STATIC, non-pinned, fully
   readable state (sun already risen behind the text, all three lines legible on
   the orange). JS adds .t2-animate to the spacer ONLY on large screens with
   motion allowed, which switches on the sticky pin + the scroll-driven rise
   (and flips the top line to orange for the dark start). No-JS, reduced-motion,
   and touch/small screens keep the static state, so the scroll-jack is genuinely
   bypassed rather than merely CSS-disabled. Uses our tokens + fonts. */
.testhome2 .t2-sun-spacer { position: relative; }
.testhome2 .t2-sun-section {
  position: relative;                 /* static by default; JS makes it sticky */
  min-height: clamp(320px, 52vh, 520px);
  width: 100%;
  background: var(--t2-blue);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.testhome2 .t2-sun-circle {
  position: absolute; left: 50%; top: 0;
  /* Sized off viewport height (with a px floor) so travel never depends on width. */
  width: max(340px, 128vh); height: max(340px, 128vh);
  border-radius: 50%; background: var(--t2-orange);
  transform: translate(-50%, 0);      /* risen by default (static / no-JS) */
  will-change: transform;
}
.testhome2 .t2-sun-text {
  position: relative; z-index: 2; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 2.5rem 1.5rem;
}
.testhome2 .t2-sun-top {
  font-family: var(--font-body); font-weight: 600; margin: 0;
  font-size: clamp(0.9rem, 2vw, 1.15rem); letter-spacing: 0.04em; text-transform: lowercase;
  color: var(--t2-blue);              /* readable on the risen orange (static state) */
}
.testhome2 .t2-sun-mid {
  font-family: var(--font-display); font-weight: 800; line-height: 1; margin: 0.2em 0;
  font-size: clamp(2.5rem, 9vw, 6rem); color: var(--t2-white);
}
/* The "I'm good" words are a quiet link into the essay: it inherits the sunrise
   type (no button, no clashing underline) so the section stays calm. position +
   z-index keep it clickable above the rising circle; a faint underline appears
   only on hover/focus so it reads as interactive without shouting. */
.testhome2 .t2-sun-link {
  color: inherit; text-decoration: none; position: relative; z-index: 3;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.testhome2 .t2-sun-link:hover,
.testhome2 .t2-sun-link:focus-visible {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em;
}
.testhome2 .t2-sun-link:focus-visible { outline: 2px solid var(--t2-white); outline-offset: 6px; border-radius: 4px; }
.testhome2 .t2-sun-bottom {
  font-family: var(--font-body); font-weight: 500; margin: 0;
  font-size: clamp(1rem, 2.4vw, 1.4rem); color: var(--t2-blue);
}

/* Animated mode: pin + scroll-driven rise (JS-gated to motion allowed; runs on
   desktop AND mobile). Heights are driven off --t2-vh, a MEASURED viewport pixel
   value set by JS from window.innerHeight, so the mobile address bar showing or
   hiding never resizes the pinned section mid-scroll (the vh fallback only
   applies for the split second before JS sets the var). */
.testhome2 .t2-sun-spacer.t2-animate { height: calc(var(--t2-vh, 100vh) * 1.3); }
.testhome2 .t2-sun-spacer.t2-animate .t2-sun-section {
  position: sticky; top: calc(var(--t2-vh, 100vh) * 0.24); min-height: 0;
  height: calc(var(--t2-vh, 100vh) * 0.52);
}
/* On the dark start the top line reads as orange, then washes into the rising sun. */
.testhome2 .t2-sun-spacer.t2-animate .t2-sun-top { color: var(--t2-orange); }

/* --- Bio / letter (Section 6; warm white; orange heading; sunset right) --- */
.testhome2 .t2-bio { background: var(--t2-warm); }
.testhome2 .t2-bio .t2-inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3rem; align-items: center; }
.testhome2 .t2-bio h2 { color: var(--t2-orange); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.08; margin: 0 0 1.3rem; max-width: 20ch; }
.testhome2 .t2-bio .t2-body p { color: var(--t2-black); font-size: 1.05rem; margin: 0 0 1.1rem; }
.testhome2 .t2-signature { margin: 0.4rem 0 1.2rem; }
.testhome2 .t2-signature img { display: block; width: 240px; max-width: 72%; height: auto; }
.testhome2 .t2-bio-art img { width: 100%; height: auto; display: block; }
/* Bio-cell video: reuse the shared .ppc-video component but strip its section
   chrome (band background + padding) so it sits cleanly in the letter's grid cell.
   width:100% keeps the cell from shrink-to-fitting to 0 on mobile, where the grid
   item is centered (margin:auto) and the aspect-ratio frame has no min-content. */
.testhome2 .t2-bio-video { width: 100%; }
.testhome2 .t2-bio-video .ppc-video { background: transparent; padding: 0; }
.testhome2 .t2-bio-video .ppc-inner { max-width: 100%; padding: 0; margin: 0; }

/* --- "Simple, and no pressure." steps (Section 7; blue; white; trail line) - */
.testhome2 .t2-steps { background: var(--t2-blue); color: var(--t2-white); }
.testhome2 .t2-steps h2 { color: var(--t2-white); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.4rem); text-align: center; margin: 0 0 0.5rem; }
.testhome2 .t2-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 1rem; }
.testhome2 .t2-step { text-align: center; }
.testhome2 .t2-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 999px; background: var(--t2-orange);
  color: var(--t2-white); font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; margin: 0 0 1rem;
}
.testhome2 .t2-step h3 { color: var(--t2-white); font-size: 1.2rem; margin: 0 0 0.5rem; }
.testhome2 .t2-step p { color: var(--t2-white); opacity: 0.92; font-size: 1rem; margin: 0; }
/* Animated orange dotted trail line ending in an X, above the 1-2-3. */
.testhome2 .t2-trail { max-width: 46rem; margin: 1.5rem auto 0.5rem; }
.testhome2 .t2-trail svg { display: block; width: 100%; height: auto; overflow: visible; }
.testhome2 .t2-trail-reveal { clip-path: inset(0 100% 0 0); }
.testhome2 .t2-trail.is-drawn .t2-trail-reveal {
  clip-path: inset(0 0 0 0); transition: clip-path 1200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.testhome2 .t2-trail-x { opacity: 0; }
.testhome2 .t2-trail.is-drawn .t2-trail-x { opacity: 1; transition: opacity 300ms ease 1150ms; }

/* --- Stakes (Section, kept; warm white; black heading) ------------------- */
.testhome2 .t2-stakes { background: var(--t2-warm); }
.testhome2 .t2-stakes .t2-inner { max-width: 52rem; text-align: center; }
.testhome2 .t2-stakes h2 { color: var(--t2-black); font-weight: 800; font-size: clamp(1.6rem, 3.6vw, 2.2rem); margin: 0 0 1rem; }
.testhome2 .t2-stakes p { color: var(--t2-black); font-size: 1.1rem; margin: 0; }

/* --- CTA band (blue) ----------------------------------------------------- */
.testhome2 .t2-ctaband { background: var(--t2-blue); color: var(--t2-white); text-align: center; }
.testhome2 .t2-ctaband h2 { color: var(--t2-white); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 0.8rem; }
.testhome2 .t2-ctaband p { color: var(--t2-white); opacity: 0.92; max-width: 50ch; margin: 0 auto 1.6rem; font-size: 1.05rem; }

/* --- Service area (warm white; black heading; Ontario wording kept) ------ */
.testhome2 .t2-service { background: var(--t2-warm); text-align: center; }
.testhome2 .t2-service .t2-inner { max-width: 52rem; }
.testhome2 .t2-service h2 { color: var(--t2-black); font-weight: 800; font-size: clamp(1.6rem, 3.6vw, 2.2rem); margin: 0 0 1rem; }
.testhome2 .t2-service p { color: var(--t2-black); font-size: 1.05rem; margin: 0 0 1rem; }
.testhome2 .t2-service .t2-note { color: var(--t2-blue); font-size: 0.95rem; }

/* --- "What men come to me for": kept EXACTLY as the real homepage (base.css
   .topics-block). Only the heading colour changes to black per the global rule;
   background, tiles, and "Explore this" links are untouched (Section 8 exception). */
.testhome2 .topics-block h2 { color: var(--t2-black); }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 860px) {
  .testhome2 .t2-hero .t2-inner,
  .testhome2 .t2-bio .t2-inner { grid-template-columns: 1fr; gap: 2rem; }
  .testhome2 .t2-bio-art { order: -1; max-width: 460px; margin: 0 auto; }
  .testhome2 .t2-steps-grid { grid-template-columns: 1fr; gap: 1.6rem; }
}
@media (max-width: 560px) {
  .testhome2 .t2-hero, .testhome2 .t2-bio,
  .testhome2 .t2-steps, .testhome2 .t2-stakes, .testhome2 .t2-ctaband,
  .testhome2 .t2-service { padding: 3.25rem 0; }
  .testhome2 .t2-cta-row { flex-direction: column; align-items: flex-start; }
  /* Mobile only: hide the animated trail line. The bio cell now holds Jordan's
     video (not the old moon graphic), so it stays visible on mobile. */
  .testhome2 .t2-trail { display: none; }
}

/* NOTE: the <=699px mobile-header layout (hamburger moved top-left, header CTA
   shortened to "Book a free call") that used to live here, scoped to
   body.testhome2-page, was promoted to base.css un-scoped so every non-PPC page
   (all use the shared .site-header) gets the same mobile header. PPC uses its own
   .ppc-bar, so those .site-header rules do not affect it. Home is unchanged. */

/* Reduced motion: show the finished trail state; the sunrise stays static (its
   JS is gated on prefers-reduced-motion: no-preference, so the pin never runs). */
@media (prefers-reduced-motion: reduce) {
  .testhome2 .t2-trail-reveal { clip-path: inset(0 0 0 0); transition: none; }
  .testhome2 .t2-trail-x { opacity: 1; transition: none; }
}