/* Eliza Stucker-Rozovsky — child overrides for the shared TPA landing template.
   Loaded after tpa-landing-css on the landing template only. */

/* Brand fonts (Fraunces + Montserrat are enqueued for the LP) */
:root{
  --lp-serif:'Fraunces',Georgia,serif;
  --lp-sans:'Montserrat',system-ui,sans-serif;
  /* recolor the LP from its default greens to Eliza's terracotta/cocoa palette */
  --lp-primary:#c07f56;    /* terracotta-dk: eyebrows, bullets, borders, accents */
  --lp-secondary:#a85f34;  /* burnt-orange: "your past" band, h2 em, hovers */
  --lp-accent:#e6c7a8;     /* light terracotta on dark bg */
  --lp-charcoal:#463f37;   /* dark cocoa: buttons, footer, dark sections */
  --lp-ink:#2d2822;
  --lp-ink-soft:#4c463c;
}

/* HEADER LOGO — smaller */
.lp-logo-img{height:46px!important;width:auto!important}
.lp-logo-mark{height:42px!important;width:auto!important}

/* HERO — even spacing, kicker above the button with breathing room, image pulled left */
.lp-hero-grid{gap:clamp(1.5rem,3vw,3rem)!important;align-items:center!important}
.lp-hero-text{display:flex;flex-direction:column}
.lp-hero-text h1{order:1;margin:0 0 1.2rem!important}
.lp-hero-sub{order:2;margin:0!important}
.lp-hero-tagline{order:3;margin:1.6rem 0 1.5rem!important}
.lp-hero-ctas{order:4}
.lp-hero-meta{order:5;margin-top:1.6rem!important}
.lp-hero-sub em{font-family:var(--lp-serif);font-style:italic}
.lp-hero-md{display:block;margin-top:.55rem;font-size:.9em;font-style:normal;opacity:.82}
.lp-hero,.lp-hero-visual,.lp-hero-frame{overflow:visible!important}
.lp-hero-visual{max-width:430px;justify-self:start;padding-bottom:14px}
.lp-hero-frame-inner img,.lp-hero-frame img{aspect-ratio:4/5;height:auto!important;max-height:none!important;object-fit:cover;object-position:center 32%}

/* PROBLEM image — sensible size, centered, cropped */
.lp-problem-grid{align-items:center!important}
.lp-problem-visual{margin:0!important;align-self:center!important}
.lp-problem-visual img{width:100%;max-height:440px;object-fit:cover}

/* PROBLEM section — three beats, each its own image/text row, sides alternating
   so the copy never stacks into one long column. The section image field is
   empty on purpose; every image lives inside a beat, next to the copy it
   belongs to (heading inside the text column, per the image-beside-text rule). */
.lp-problem-grid{display:block!important}
.lp-beat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;margin-bottom:clamp(40px,6vw,72px)}
.lp-beat:last-child{margin-bottom:0}
.lp-beat-text{max-width:580px}
/* every beat heading is an h2 so all three match .lp-section h2 exactly —
   no duplicated type spec here to drift out of sync with the parent theme */
.lp-beat-text h2{margin-top:0}
.lp-beat-text p:last-child{margin-bottom:0}
/* Image keeps its own 4:3 height and the row centres it against the copy, so the
   space above and below it is equal. In normal flow — an out-of-flow variant was
   tried to force image height == text height and it lay across the copy. */
.lp-beat-img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:var(--lp-radius)}
/* even beats flip: image left, copy right */
.lp-beat:nth-child(even) .lp-beat-img{order:-1}
@media(max-width:768px){
  .lp-beat{grid-template-columns:1fr;gap:20px}
  .lp-beat:nth-child(even) .lp-beat-img{order:0}
  /* stacked: wider ratio reads better full-bleed on a phone */
  .lp-beat-img img{aspect-ratio:16/10}
}

/* SOLUTION (kid) image — pinned to the top of the section, sticky as you scroll */
.lp-solution-grid{align-items:start!important}
.lp-solution-visual{margin:0!important;align-self:start!important;position:sticky!important;top:100px!important}
.lp-solution-visual img{width:100%!important;height:auto!important;max-height:none!important;min-height:0!important;aspect-ratio:auto!important;object-fit:contain!important;border-radius:6px}

/* PROCESS — 3 steps fill the width */
.lp-process-steps{grid-template-columns:repeat(3,1fr)!important;max-width:1040px;margin-left:auto;margin-right:auto}

/* ABOUT — wider pillars, bigger portrait headshot, name + credentials below */
.lp-about-grid{grid-template-columns:2fr 1fr!important;gap:clamp(2rem,4vw,4rem)!important;align-items:start}
.lp-about-right{display:flex!important;flex-direction:column!important;align-items:flex-start!important}
.lp-about-headshot{order:1;position:relative!important;float:none!important;width:100%!important;max-width:340px;margin:0 0 20px!important}
.lp-about-headshot picture,.lp-about-headshot img{width:100%!important;height:auto!important;aspect-ratio:3/4;border-radius:12px}
.lp-about-right h2{order:2;position:static!important;float:none!important;margin:0!important;font-size:clamp(1.3rem,1.9vw,1.7rem)!important;line-height:1.25!important;white-space:normal!important}
.lp-about-creds{display:block;font-family:var(--lp-sans);font-size:.58em;letter-spacing:.05em;color:var(--lp-secondary);font-weight:600;margin-top:.5rem}

/* FOOTER — bigger logo (light on dark), drop redundant name + the fee-compliance line */
.lp-footer-logo img{width:132px!important;height:auto!important;filter:brightness(0) invert(1)!important;opacity:.92}
.lp-footer-name{display:none!important}
.lp-footer-compliance{display:none!important}

/* WHAT-NEXT — remove hardcoded scarcity chip, style the CTA button + steps */
.lp-scarcity{display:none!important}
.lp-form-copy .lp-eyebrow{display:none!important}
.lp-whatnext-lead{margin-top:1.6rem!important}
.lp-whatnext-lead .lp-btn{display:inline-flex}

/* FORM — "What Happens Next" list styling + balanced columns */
.lp-next-h{font-family:var(--lp-sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lp-secondary);font-weight:700;margin:1.8rem 0 .8rem}
.lp-next-ol{margin:0;padding-left:1.3rem;display:flex;flex-direction:column;gap:.6rem;max-width:520px}
.lp-next-ol li{color:var(--lp-ink-soft);line-height:1.5}
.lp-form-grid{grid-template-columns:1fr 1fr!important;gap:clamp(2rem,5vw,4.5rem)!important;align-items:start}
.lp-form-card{align-self:start;padding:26px 26px!important}
.lp-form-card h3{margin-bottom:4px!important}
.lp-form-card .lp-form-sub{margin-bottom:16px!important}
.lp-form-card .wpforms-field{margin-bottom:10px!important}
.lp-form-card .wpforms-field input,.lp-form-card .wpforms-field textarea{padding:10px 14px!important}
.lp-form-card .wpforms-field textarea{min-height:54px!important;height:118px!important}
.lp-form-card .wpforms-field-label,.lp-form-card .wpforms-field label{margin-bottom:5px!important}
/* CTA button on the burnt-orange bands (2026-08-10).
   .lp-whatnext and .lp-section-primary are painted var(--lp-secondary), and the
   shared .lp-btn-primary:hover ALSO resolves to var(--lp-secondary) — so the
   button dissolved into the band on hover, leaving floating text. Invert to
   paper-on-orange instead, which reads clearly as a hover state. */
.lp-whatnext .lp-btn-primary:hover,
.lp-section-primary .lp-btn-primary:hover{background:var(--lp-paper);color:var(--lp-secondary)}

/* Paubox secure-form button replaces the WPForms embed (2026-08-05) */
.lp-form-card .paubox-btn{width:100%;justify-content:center;display:inline-flex;align-items:center;gap:10px;padding:18px 30px;margin-top:6px;font-family:var(--lp-sans);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-radius:var(--lp-radius);border:0;cursor:pointer;background:var(--lp-charcoal);color:var(--lp-paper);transition:all .35s var(--lp-ease)}
.lp-form-card .paubox-btn:hover{background:var(--lp-secondary);transform:translateY(-1px)}
/* Rebalance the CTA card against the tall narrative column now that it holds a button, not a form:
   let the warm panel fill the full column height and vertically center the CTA inside it. */
.lp-form-section .lp-form-grid{align-items:stretch!important}
.lp-form-card{align-self:stretch!important;display:flex;flex-direction:column;justify-content:center;padding-top:52px!important;padding-bottom:52px!important}
/* Parent's hardcoded "Fill out your info below" no longer fits a button CTA — reword in place */
.lp-form-card .lp-form-sub{font-size:0!important;line-height:0!important}
.lp-form-card .lp-form-sub::after{content:"Click below to open my secure contact form \2014 I\2019ll personally reach out within one business day.";display:block;font-family:var(--lp-sans);font-size:14.5px;line-height:1.6;color:var(--lp-ink-soft)}
.lp-form-card .paubox-btn{margin-top:8px}
.lp-form-card .lp-form-disclaimer{margin-top:22px}

/* ===== MOBILE — my !important desktop grids must collapse to one column ===== */
@media(max-width:960px){
  .lp-hero-grid{gap:2rem!important}
  .lp-hero-visual{max-width:none!important;justify-self:stretch!important;padding-bottom:0}
  .lp-about-grid{grid-template-columns:1fr!important}
  .lp-form-grid{grid-template-columns:1fr!important}
  .lp-process-steps{grid-template-columns:1fr 1fr!important}
  .lp-solution-grid{align-items:start!important}
  .lp-solution-visual{position:static!important;top:auto!important;max-width:520px;margin:0 auto!important}
  .lp-about-headshot{max-width:300px}
  .lp-footer-logo img{width:110px!important}
}
@media(max-width:540px){
  .lp-process-steps{grid-template-columns:1fr!important}
  .lp-form-card{padding:24px 20px!important}
}