/*
 * victorisfree.css — Victor's letter page.
 *
 * Loads AFTER lead-form.css and depends on it: every token (--t-*, --r-*, --shadow-*) and every
 * form component (.lf-card, .lf-chip, .lf-btn, .lf-step) comes from there.
 *
 * ONE design (2026-07-14). It merges the two variants Dallas kept: the BOLD HERO from "wrapped"
 * (large portrait, large headline, name + Instagram above it) and the readable single column from
 * "letter". The per-beat alternating panels are GONE. They gave every paragraph its own background
 * colour, which read as a rainbow rather than a design.
 *
 * PALETTE (2026-07-14, final): the whole page is WHITE. Nothing else.
 *
 * It went through forest, then off-yellow, then a cream/white alternation, and every version had the
 * same problem: banded stripes down the page ("top bar in gray, hero white, text in gray, CTA in
 * white... looks weird"). Sections do not need their own backgrounds to be distinct; space does that.
 * So: one white sheet, with the two soft green corner glows on the PAGE (not per section, or they
 * repeat and read as stripes again), and the lime brush as the single accent. That is the whole
 * system. Do not reintroduce a section background. (Re-affirmed 2026-07-27: a forest closing
 * band was tried and Dallas sent it back to white; the .vf-banner reference at the page's close
 * sits on the same white sheet behind a hairline top border, like the interviews section.)
 *
 * The page SCROLLS. The old non-scrollable hero rule is retired: a 350-word letter cannot fit a
 * viewport, and clipping it would be worse than scrolling.
 */

html, body { margin: 0; }

body.treantly-victor {
  background: var(--t-white);
  color: var(--t-forest);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;   /* binding: numerals are DM Sans tabular */
  -webkit-font-smoothing: antialiased;
}

.vf-top { display: flex; justify-content: center; padding: 26px 20px 6px; }
.vf-logo { width: 150px; height: auto; display: block; }

/* ================================================================ 1. HERO (cream) */

/* The corner glows live on the PAGE, not on a section: per-section blobs repeat down the page and
   start reading as stripes again, which is the exact thing we removed. Fragments from the margin,
   never a centred object behind the content. */
.vf-page { position: relative; overflow: hidden; }
.vf-page::before {
  content: ''; position: absolute; top: -220px; right: -180px; z-index: 0;
  width: 680px; height: 680px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,232,90,.20) 0%, transparent 62%);
  pointer-events: none;
}
.vf-page::after {
  content: ''; position: absolute; bottom: -200px; left: -200px; z-index: 0;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,232,90,.13) 0%, transparent 62%);
  pointer-events: none;
}
/* Every section is transparent over the one white sheet. Space separates them, not colour. */
.vf-hero, .vf-letter, .vf-cta, .vf-interviews { position: relative; z-index: 1; background: transparent; }

.vf-hero { padding: clamp(2rem, 4vw, 4rem) 20px clamp(3rem, 6vw, 5rem); }
.vf-hero-inner {
  max-width: 1040px; margin-inline: auto;
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}

/* A circle, per Victor. The face sits upper-middle in the square crop, so nudge the focal point up
   rather than letting object-fit centre it on his chin. */
.vf-portrait {
  margin: 0; justify-self: center;
  width: min(340px, 100%); aspect-ratio: 1 / 1;
}
.vf-portrait img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
  border-radius: 50%;
  box-shadow: var(--shadow-lift);
  background: var(--t-bg-warm);
}

/* Name + handle sit on ONE line above the headline. They live in a flex row so they share a single
   centre line: as two loose inline-flex elements with different bottom margins they baseline-shifted
   against each other, which is the misalignment Dallas spotted. The children carry no margins now;
   the row owns the spacing. */
.vf-meta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 18px;
}
.vf-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--t-forest-mid); margin: 0;
  line-height: 1;
}
.vf-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--t-lime-bright); flex: 0 0 auto; }

.vf-ig {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--t-forest-mid);
  text-decoration: none; margin: 0;
  line-height: 1;
  transition: color .15s ease;
}
.vf-ig:hover { color: var(--t-forest); }
.vf-ig-icon { width: 16px; height: 16px; flex: 0 0 auto; }

.vf-h1 {
  font-size: clamp(30px, 4.4vw, 58px); line-height: 1.1; font-weight: 700;
  letter-spacing: -.025em; margin: 0; color: var(--t-forest);
}

@media (max-width: 760px) {
  .vf-hero { padding: 1.25rem 20px 2rem; }
  .vf-hero-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  /* Portrait first on a phone: he is the reason they clicked. */
  .vf-portrait { order: -1; width: 168px; justify-self: start; }
  .vf-h1 { font-size: clamp(26px, 7vw, 34px); }
}

/* ================================================================ 2. THE LETTER */
/* No background of its own. It is prose on the page's white sheet; the measure and the space around
   it are what make it a zone. */

.vf-letter {
  color: var(--t-forest);
  padding: clamp(1rem, 2vw, 2rem) 20px clamp(3rem, 6vw, 5rem);
}
/* The letter and the form sit on the SAME left edge as the hero copy above them, inside the shared
   1040 container. The measure is set on the paragraph so the column stays readable. */
.vf-beat { max-width: 1040px; margin-inline: auto; }
.vf-beat p { max-width: 46rem; }
.vf-beat p {
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.7;
  margin: 0 0 1.35rem;
  color: inherit;              /* the one colour; nothing overrides it */
}
.vf-beat:last-child p:last-child { margin-bottom: 0; }
.vf-signoff { font-weight: 600; }

/* The single accent on the whole page: the brand's brush highlight, a lime wash behind the ONE
   phrase that carries the argument ("staying just doesn't pay"). The text stays the letter's one
   colour. The letter neither links nor marks anything transactional (2026-07-27): "hire someone
   here" is plain text, and the pointer to Treantly is the quiet .vf-banner reference at the
   page's close. (.vf-mark-link removed with the anchor it styled.) */
.vf-mark {
  background: linear-gradient(180deg, transparent 58%, var(--t-lime-bright) 58%);
  color: inherit;
  padding: 0 .12em;
}

@media (max-width: 640px) {
  .vf-beat p { font-size: 16.5px; }
}

/* ---- reveal on scroll ----
   Opt in only when motion is allowed AND IntersectionObserver exists, so a no-JS or reduced-motion
   visitor is never left staring at opacity:0 content. */
.js-reveal .vf-reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease-out, transform .5s ease-out; }
.js-reveal .vf-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .vf-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ================================================================ 3. THE FORM (cream) */

.vf-cta { padding: 0 20px clamp(3.5rem, 7vw, 6rem); }
.vf-card {
  max-width: 560px;
  margin-inline-start: max(0px, calc((100% - 1040px) / 2));
  margin-inline-end: auto;
  padding: 30px 30px 26px;
}
.vf-card .lf-q { font-size: 24px; margin-bottom: 18px; }
.vf-form-lede { font-size: 16px; margin: 0 0 20px; }
.vf-start .lf-actions { margin-top: 0; }
.lf-textarea { resize: vertical; min-height: 104px; line-height: 1.55; font-family: inherit; }
/* One button, full width. There is nothing to choose between, so it should not look like a
   next-step chevron in a funnel; it should look like the single thing to do. */
.vf-btn-wide { width: 100%; margin-left: 0; }
.vf-done { text-align: center; }

@media (max-width: 560px) {
  .vf-card { padding: 24px 20px 20px; }
}

/* ================================================================ 4. THE INTERVIEWS (white) */

.vf-interviews { padding: clamp(2.5rem, 5vw, 4rem) 20px clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--t-border-light); }
.vf-interviews-inner { max-width: 1040px; margin-inline: auto; }
.vf-int-head { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; font-weight: 700; letter-spacing: -.015em; margin: 0 0 .5rem; }
.vf-int-sub { font-size: 16.5px; line-height: 1.6; color: var(--t-text-muted); margin: 0 0 2.2rem; max-width: 40rem; }

.vf-int-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.vf-int-card a { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: .7rem; }
.vf-int-media {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--t-border-light);
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.vf-int-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vf-int-card a:hover .vf-int-media { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
/* Play affordance: a poster with no play cue reads as a dead image. */
.vf-int-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: 0 2px 12px rgba(45,61,35,.28);
}
.vf-int-play::after {
  content: ''; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent var(--t-forest);
}
.vf-int-name { font-weight: 700; font-size: 16px; }
.vf-int-role { font-size: 14px; color: var(--t-text-muted); margin-top: -.45rem; }

/* The quiet CTA. A link, never a button, never lime: it must not compete with the ask above. It is
   also the path for a visitor who simply wants to read about Treantly. */
.vf-quiet { margin: 2.6rem 0 0; text-align: center; font-size: 15px; }
.vf-quiet a { color: var(--t-forest-mid); text-decoration: underline; text-underline-offset: 3px; }
.vf-quiet a:hover { color: var(--t-forest); }

@media (max-width: 860px) {
  .vf-int-grid { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ================================================================ 5. THE TREANTLY REFERENCE / FOOTER */
/* The page's close, on the same white sheet as everything else (no section background; the
   header note stands). A hairline top border marks it off, the same device the interviews
   section uses. The link is a ghost button, never lime: the form's "Let's work together" is
   this page's single lime CTA, and this is a reference, not a pitch. Three grouped rows that
   END on the brand: reference, meta (links + copyright), then the wordmark spanning the full
   container, anchored tight to the page end. The bottom-left page glow sits behind the mark
   and warms it; that is the corner fragment doing its job, not a new background. */
.vf-banner {
  position: relative; z-index: 1; background: transparent;
  border-top: 1px solid var(--t-border-light);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 20px clamp(1.1rem, 2.2vw, 1.75rem);
}
.vf-banner-inner {
  max-width: 1040px; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; flex-wrap: wrap;
}
/* The reference line carries the row: letter-adjacent weight, not small print. */
.vf-banner-sub {
  margin: 0; font-size: 16px; line-height: 1.55;
  color: var(--t-forest-mid); max-width: 40rem;
}
.vf-banner-btn {
  flex: 0 0 auto; display: inline-block; text-align: center; text-decoration: none;
  border-color: var(--t-forest-mid); color: var(--t-forest);
}

/* Meta row: links left, copyright right, one baseline. The small print lives HERE, above the
   mark, so the page never ends on it. */
.vf-banner-meta {
  max-width: 1040px;
  margin: clamp(1.4rem, 2.8vw, 2rem) auto clamp(2.25rem, 4.5vw, 3.25rem);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem 1.6rem; flex-wrap: wrap;
}
.vf-banner-links { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.vf-banner-links a {
  font-size: 14px; color: var(--t-forest-mid); text-decoration: none;
}
.vf-banner-links a:hover { color: var(--t-forest); text-decoration: underline; text-underline-offset: 3px; }
.vf-banner-copy { margin: 0; font-size: 13px; color: var(--t-text-muted); }

/* The wordmark closes the page: solid forest, 500px (Dallas iterated 2026-07-27 through
   full-width lime -> smaller -> forest watermark -> solid; opacity removed at his call). */
.vf-banner-logo {
  display: block; width: min(500px, 100%);
  margin-inline-start: max(0px, calc((100% - 1040px) / 2));
  color: var(--t-forest);
}
.vf-banner-logo svg { display: block; width: 100%; height: auto; }

@media (max-width: 640px) {
  .vf-banner-btn { width: 100%; box-sizing: border-box; }
  .vf-banner-links { gap: .6rem 1.25rem; }
  .vf-banner-meta { margin-bottom: 1.9rem; }
}