/*
Theme Name:  LSQFA Child
Theme URI:   https://lsqfa.com
Description: Child theme for Lafayette Square Financial Advisors
Author:      LSQFA
Template:    kadence
Version:     1.2.12
Text Domain: lsqfa-child
*/

/* ==========================================================================
   HOW TO USE THIS FILE
   Canonical stylesheet. Replace all of style.css with this, bump Version on
   every change, clear the Kinsta cache, hard-refresh.

   Order matters: the Kadence resets (section 2) must come BEFORE the section
   system (section 4). Later rules of equal specificity win.

   Sections 6-11 are new and untuned — the numbers are estimates from the
   Canva comps. Adjust in DevTools, then copy final values back here.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  --font-heading: Georgia, 'Times New Roman', serif;
  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --color-primary:  #224242;  /* deep teal */
  --color-headline: #1f2a24;
  --color-body:     #5a5f5b;
  --color-accent:   #d0b5a9;  /* clay */
  --color-offwhite: #faf7f5;
  --color-sage:     #f2f5f2;
  --color-muted:    #89968d;
  --color-border:   #d3d8d4;

  /* vertical rhythm — change here to restyle every section at once */
  --section-pad-y: 90px;
  --section-pad-x: 24px;
  --content-max:   1100px;

  /* depth of the chevron notch under the teal section */
  --notch-h: 60px;

  /* where the timeline bars start fading out */
  --bar-fade: 55%
}


/* ==========================================================================
   2. KADENCE WRAPPER RESETS
   Removes the boxed content wrapper so full-width sections sit flush.
   Preferred fix is Customize > Page Layout > Content Style > Unboxed;
   this is the belt-and-braces version.
   ========================================================================== */

.entry.content-bg,
.content-bg {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

.entry-content-wrap,
.content-wrap {
  padding: 0;
  margin: 0;
}

/* Kadence pads any block with a background (default 20px 30px).
   Zero it here; section padding is reapplied in section 4. */
.entry-content .wp-block-group.has-background {
  padding: 0;
}

.entry-content > .wp-block-group {
  margin-block-start: 0;
  margin-block-end: 0;
}


/* ==========================================================================
   3. GLOBAL ELEMENTS
   ========================================================================== */

/* Pill buttons, per the header CTA */
.wp-block-button__link,
.kb-button,
.kadence-button {
  border-radius: 999px;
  font-family: var(--font-body);
  letter-spacing: 0.01em;
}

/* Eyebrow labels: WHAT WE DO / WHO WE ARE / RESOURCES / STAY CONNECTED.
   Always paragraphs, never headings — keeps the document outline clean. */
p.lsq-eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 14px;
}

p.lsq-eyebrow.lsq-eyebrow--accent { color: var(--color-accent); }
p.lsq-eyebrow.lsq-eyebrow--light  { color: var(--color-offwhite); }
p.lsq-eyebrow.lsq-eyebrow--dark   { color: var(--color-primary); }


/* ==========================================================================
   4. SECTION SYSTEM
   Add "lsq-section" to every top-level section Group.
   Add "lsq-section__inner" to the constrained inner container.
   Add "section-teal" as a second class on dark sections.
   Set background colours in the block editor, not here.

   The .entry-content .wp-block-group prefix is required to outrank the
   has-background reset in section 2.
   ========================================================================== */

.entry-content .wp-block-group.lsq-section {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
  padding-left: var(--section-pad-x);
  padding-right: var(--section-pad-x);
}

.entry-content .wp-block-group.lsq-section__inner {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

.lsq-section h1,
.lsq-section h2,
.lsq-section h3 {
  margin-top: 0;
}

.lsq-section h2 {
  margin-bottom: 24px;
}

/* Dark sections */
.section-teal h1,
.section-teal h2,
.section-teal h3,
.section-teal p {
  color: var(--color-offwhite);
}

/* Teal sections that don't want the chevron */
.section-teal.section-teal--flat::after { content: none; }

.entry-content .wp-block-group.section-teal--flat + .wp-block-group.lsq-section {
  padding-top: var(--section-pad-y);
}


/* ==========================================================================
   5. HERO
   ========================================================================== */

.wp-block-group.hero-collage {
  display: grid;
  grid-template-columns: 1.05fr 1.15fr 1fr 0.7fr;
  gap: 16px;
  align-items: start;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.wp-block-group.hero-collage > figure {
  margin: 0;
  width: auto;
  flex: none;
}

.wp-block-group.hero-collage > figure img {
  width: 100%;
  height: auto;
  display: block;
}

.wp-block-group.hero-collage > figure:nth-child(2) { margin-top: 65px; }
.wp-block-group.hero-collage > figure:nth-child(3) { margin-top: 20px; }

.hero-lede {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  line-height: 1.3;
  color: var(--color-primary);
  text-align: center;
  max-width: 46ch;
  margin: 56px auto 20px;
}

.hero-support {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-body);
  text-align: center;
  max-width: 62ch;
  margin: 0 auto 28px;
}

.hero-cta {
  text-align: center;
  margin: 0;
}

.hero-cta a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-headline);
  text-decoration: none;
}

/* Arrow via CSS so screen readers don't announce it as part of the link */
.hero-cta a::after {
  content: " \2192";
}

.hero-cta a:hover {
  text-decoration: underline;
}


/* ==========================================================================
   6. SECTION: WHAT WE DO — teal with chevron notch
   Classes: lsq-section section-teal
   ========================================================================== */

.section-teal {
  position: relative;
  overflow: visible;
}

/* Downward chevron on the bottom edge */
.section-teal::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--notch-h) * -1 + 1px);
  height: calc(var(--notch-h) + 1px);
  background: var(--color-primary);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}

/* The section AFTER a notched one needs clearance for the chevron.
   The :not() is load-bearing: without it this rule and the --flat opt-out
   in section 4 are both 0-5-0, and this one wins on document order, so the
   opt-out silently does nothing. */
.section-teal:not(.section-teal--flat) + .lsq-section,
.entry-content .wp-block-group.section-teal:not(.section-teal--flat) + .wp-block-group.lsq-section {
  padding-top: calc(var(--section-pad-y) + var(--notch-h));
}

.entry-content .wp-block-group.lsq-card-grid-2 > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}

.entry-content .wp-block-group.lsq-card-grid-2 > .wp-block-group__inner-container > .wp-block-group {
  width: auto;
  max-width: none;
  margin: 0;
}

.entry-content .wp-block-group.lsq-card {
  background: var(--color-offwhite);
  padding: 56px 40px;
}

/* Cards are light, so override the section-teal off-white heading colour */
.section-teal .lsq-card h3 {
  font-family: var(--font-body);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-headline);
  margin: 0 0 16px;
}

.section-teal .lsq-card p {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-body);
  line-height: 1.6;
  margin: 0;
}


/* ==========================================================================
   7. SECTION: PROCESS TIMELINE
   Applied to a core List block: class "lsq-timeline"
   ========================================================================== */

.entry-content .wp-block-list.lsq-timeline {
  position: relative;
  list-style: none;
  padding-left: 48px;
  max-width: 620px;
  margin: 48px auto 0;
}

/* Dotted connector line */
.entry-content .wp-block-list.lsq-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  border-left: 2px dotted var(--color-accent);
}

.entry-content .wp-block-list.lsq-timeline > li {
  position: relative;
  list-style: none;
  margin: 0 0 44px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--color-headline);
}

.entry-content .wp-block-list.lsq-timeline > li:last-child {
  margin-bottom: 0;
}

/* Outlined circle markers */
.entry-content .wp-block-list.lsq-timeline > li::before {
  content: "";
  position: absolute;
  left: -48px;
  top: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  background: #fff;
  box-sizing: border-box;
}

/* --- Timeline tail: solid bar + closing note --- */

.entry-content .wp-block-group.lsq-timeline-tail {
  position: relative;
  max-width: 620px;
  margin: -44px auto 0;
  padding-left: 48px;
  padding-bottom: 60px;
}

/* Solid teal bar, aligned to the dotted line above it */
.lsq-timeline-tail__bar {
  position: absolute;
  left: 1px;
  top: 0;
  bottom: calc(var(--section-pad-y) * -1);
  width: 14px;
  border-radius: 999px;
  background: var(--color-primary);
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--bar-fade), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 60px), transparent 100%);
}

/* Three white dots down the bar */
.lsq-timeline-tail__bar::before,
.lsq-timeline-tail__bar::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.lsq-timeline-tail__bar::before { top: 40px; }
.lsq-timeline-tail__bar::after  { top: 160px; }

.entry-content .wp-block-group.lsq-timeline-tail__note {
  padding-top: 120px;
  padding-left: 60px;
}

.entry-content .wp-block-list.lsq-timeline > li:last-child::before {
  display: none;
}

.lsq-timeline-tail__note p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-body);
  margin: 0 0 4px;
}

p.lsq-cta-link.lsq-cta-link {
  margin-top: 14px !important;
  font-weight: 700;
  color: var(--color-headline);
}

.lsq-cta-link a {
  color: var(--color-headline);
  text-decoration: none;
  font-weight: 700;
}

p.lsq-cta-link a::after {
  content: " \2192";
}

p.lsq-cta-link a:hover {
  text-decoration: underline;
}


/* ==========================================================================
   8. SECTION: VIDEO — line-art background
   Classes: lsq-section section-video
   Update the SVG path to match your actual Media Library upload.
   ========================================================================== */

.section-video {
  position: relative;
  background-image: url('/wp-content/uploads/2026/08/illustrated-background.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.section-video::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -24px;
  height: 24px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(31, 42, 36, 0),
    rgba(31, 42, 36, 0.10)
  );
}

.section-video .wp-block-embed {
  max-width: 720px;
  margin: 32px auto 0;
}

/* ==========================================================================
   9. SECTION: RECENT THINKING — article card grid
   Classes: lsq-section  /  inner: lsq-card-grid-3, lsq-article-card
   Card structure:
     Group .lsq-article-card
       ├── Image figure.lsq-card__media  (add --top for square/social graphics)
       └── Group .lsq-article-card__body  ← the clay outline lives here
   The fixed aspect-ratio is what lets mixed source image shapes (1:1 social
   graphics, horizontal blog images) sit in an even grid.
   ========================================================================== */

.entry-content .wp-block-group.lsq-card-grid-3 > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.entry-content .wp-block-group.lsq-card-grid-3 > .wp-block-group__inner-container > .wp-block-group {
  width: auto;
  max-width: none;
  margin: 0;
}

/* Card wrapper is transparent — the border belongs to the body only */
.entry-content .wp-block-group.lsq-article-card {
  background: transparent;
  padding: 0;
  border: none;
}

/* Media */
.lsq-article-card figure.lsq-card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin: 0;
}

.lsq-article-card figure.lsq-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Square/social graphics: crop from the top, where the message lives */
.lsq-article-card figure.lsq-card__media--top img {
  object-position: top center;
}

/* Alternative: show the whole graphic, letterboxed */
.lsq-article-card figure.lsq-card__media--contain {
  background: var(--color-offwhite);
}

.lsq-article-card figure.lsq-card__media--contain img {
  object-fit: contain;
}

/* Text body — outlined box below the image */
.entry-content .wp-block-group.lsq-article-card__body {
  background: #fff;
  border: 1px solid var(--color-accent);
  padding: 20px 22px 24px;
}

.lsq-article-card__body .lsq-eyebrow {
  margin: 0 0 8px;
}

.lsq-article-card__body h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--color-headline);
  margin: 0 0 10px;
}

.lsq-article-card__body p {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-body);
  margin: 0;
}

.lsq-article-card__body .lsq-cta-link {
  margin-top: 16px !important;
  font-size: 0.85rem;
}

/* "Find more →" below the grid */
.lsq-find-more {
  text-align: center;
  margin: 40px 0 0;
}

.lsq-find-more a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-headline);
  text-decoration: none;
}

.lsq-find-more a::after {
  content: " \2192";
}

.lsq-find-more a:hover {
  text-decoration: underline;
}


/* ==========================================================================
   10. SECTION: NEWSLETTER
   Classes: lsq-section  /  inner: lsq-newsletter
   ========================================================================== */

.entry-content .wp-block-group.lsq-newsletter {
  border: 1px solid #e3ded9;
  background: #fff;
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 40px;
  text-align: center;
}

.lsq-newsletter h2 {
  font-family: var(--font-heading);
  margin-bottom: 12px;
}

.lsq-newsletter p {
  font-family: var(--font-body);
  color: var(--color-body);
}


/* ==========================================================================
   11. INTERACTIVE COMPONENTS
   Native <details> keeps content server-rendered and in the DOM on load,
   which is required for the SEO/GEO brief.
   ========================================================================== */

.lsq-accordion {
  border-bottom: 1px solid var(--color-border);
  padding: 18px 0;
}

.lsq-accordion > summary {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--color-headline);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lsq-accordion > summary::-webkit-details-marker {
  display: none;
}

.lsq-accordion > summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-muted);
}

.lsq-accordion[open] > summary::after {
  content: "\2013";  /* en dash */
}

.lsq-accordion__body {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-body);
  padding-top: 12px;
}

/* Comparison table — real semantic table, extracts cleanly for crawlers/LLMs */
.lsq-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  margin-top: 32px;
}

.lsq-table th,
.lsq-table td {
  text-align: left;
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.lsq-table th {
  font-weight: 700;
  color: var(--color-headline);
}

.lsq-table td {
  font-size: 0.95rem;
  color: var(--color-body);
}


/* ==========================================================================
   12. RESPONSIVE
   Don't hide content at narrow widths — collapse or scroll instead, so
   everything stays in the DOM.
   ========================================================================== */

@media (max-width: 781px) {
  :root {
    --section-pad-y: 56px;
    --section-pad-x: 20px;
    --notch-h: 36px;
  }

  .wp-block-group.hero-collage {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .wp-block-group.hero-collage > figure {
    margin-top: 0;
  }

  .hero-lede {
    margin-top: 36px;
  }
	
 .entry-content .wp-block-group.lsq-card-grid-2 > .wp-block-group__inner-container,
  .entry-content .wp-block-group.lsq-card-grid-3 > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
  }

  .entry-content .wp-block-group.lsq-newsletter {
    padding: 32px 24px;
  }

  .lsq-timeline {
    padding-left: 32px;
  }

  .lsq-timeline__item::before {
    left: -32px;
  }

  /* Table scrolls rather than hiding columns */
  .lsq-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ==========================================================================
   13. FINANCIAL PLANNING PAGE
   Kadence consistently emits .wp-block-group__inner-container, so every
   grid targets that wrapper. Do not add non-wrapper fallbacks — forcing
   display:grid on the outer group collapses everything into one column.
   ========================================================================== */

/* --- Shared: two-column split --- */

.entry-content .wp-block-group.lsq-split > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: start;
}

.entry-content .wp-block-group.lsq-split__col {
  padding: 0;
}

/* --- Shared: tighter section --- */

.entry-content .wp-block-group.lsq-section--tight {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* --- Shared: visually hidden (stays readable to AT + crawlers) --- */

.lsq-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Shared: inline reveal ---------------------------------------------
   Summary sits BELOW the content (order:2). The label text is generated in
   CSS so it can swap between states: "Read more +" / "Hide –".
   The typed summary text is hidden with font-size:0; screen readers
   announce the generated label instead.
   The aside overrides all of this further down.
   ---------------------------------------------------------------------- */

.entry-content .wp-block-details.lsq-reveal {
  display: flex;
  flex-direction: column;
  border: none;
  padding: 0;
  margin: 6px 0 0;
}

.wp-block-details.lsq-reveal > summary {
  order: 2;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-accent);
  margin-top: 8px;
  width: fit-content;
  font-size: 0;
}

.wp-block-details.lsq-reveal > summary::-webkit-details-marker { display: none; }

.wp-block-details.lsq-reveal > summary::before {
  content: "Read more +";
  font-size: 0.9rem;
}

.wp-block-details.lsq-reveal[open] > summary::before {
  content: "Hide \2013";
}

.wp-block-details.lsq-reveal > summary::after { content: none; }

.wp-block-details.lsq-reveal > summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.wp-block-details.lsq-reveal > *:not(summary) {
  order: 1;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-body);
  margin: 0 0 8px;
}

/* Light variant, used inside the dark research card */
.wp-block-details.lsq-reveal--light > summary { color: var(--color-offwhite); }
.wp-block-details.lsq-reveal--light > *:not(summary) { color: var(--color-offwhite); }

.lsq-research .lsq-reveal > p {
  margin-bottom: 26px;
}


/* ==========================================================================
   13.1 — Section 1: What we do
   ========================================================================== */

/* Replaced with flip cards in section 19 */


/* ==========================================================================
   13.2 — Section 2: Building your plan
   ========================================================================== */

.entry-content .wp-block-group.lsq-method > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
  margin-top: 48px;
}

/* Steps column carries the dotted rail */
.entry-content .wp-block-group.lsq-method__steps {
  position: relative;
  padding-left: 48px;
}

.lsq-method__steps::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: -60px;
  border-left: 2px dotted var(--color-accent);
}

.entry-content .wp-block-group.lsq-step {
  position: relative;
  margin-bottom: 44px;
  padding: 0;
}

.lsq-step::before {
  content: "";
  position: absolute;
  left: -48px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  background: var(--color-offwhite);
  box-sizing: border-box;
}

.lsq-step--filled::before {
  background: var(--color-accent);
}

.lsq-step h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-headline);
  margin: 0 0 4px;
}

.lsq-step > p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-body);
  margin: 0;
}

/* --- Tail step: spans the full grid width below both columns ---
   Adjust margin-top until the teal bar meets the dotted rail above. */
.entry-content .wp-block-group.lsq-method > .wp-block-group__inner-container > .lsq-step--tail {
  grid-column: 1 / -1;
  padding-left: 48px;
  margin-top: -80px;
  margin-bottom: 0;
}

/* The tail bar here is much shorter than the homepage one, so the shared
   --bar-fade percentage produces a much shorter fade in absolute pixels.
   Override it locally rather than changing the token for both. */
.entry-content .wp-block-group.lsq-step--tail {
  --bar-fade: 20%;
  padding-bottom: 100px;
}

/* Solid teal bar replaces the circle marker on the tail step.
   The white dots are a repeating background rather than box-shadows, so they
   distribute down the whole bar however tall it grows when the reveal opens. */
.entry-content .wp-block-group.lsq-step--tail::before {
  top: 0;
  bottom: 0;
  height: auto;
  width: 14px;
  left: 0;
  border-radius: 999px;
  border: none;
  background-color: var(--color-primary);
  background-image: radial-gradient(circle, #fff 3px, transparent 3.5px);
  background-size: 14px 150px;
  background-repeat: repeat-y;
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--bar-fade), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 var(--bar-fade), transparent 100%);
}

.lsq-step--tail > .lsq-cta-link {
  margin-top: 40px;
}


/* --- Seasonal grid: clockwise annual cycle -------------------------------
   DOM order is Q1, Q2, Q4, Q3, so the grid reads

     [ Jan-Mar ]  [ Apr-Jun ]
     [ Oct-Dec ]  [ Jul-Sep ]

   and the flow runs clockwise: 1 -> 2 -> 4 -> 3 -> back to 1.

   Each box carries ONE outgoing point and ONE incoming notch. A point has to
   paint outside the box's own grid area, and clip-path can't do that on its
   own -- a clip region beyond the border box renders nothing. So every box is
   enlarged by --season-pt on all four sides with a negative margin and padded
   back by the same amount. The visible rectangle still lands exactly on the
   grid area; the extra territory only exists for the point to live in.

   Because the enlargement is uniform, all four polygons share one geometry
   and differ only in direction. The inset rectangle is:
       left / top     = var(--season-pt)
       right / bottom = calc(100% - var(--season-pt))
   A point reaches 0 or 100%. A notch stops 2 x --season-pt from its own edge.

   Rows need explicit heights -- with auto rows the negative vertical margins
   shrink the track and the bottom row rides up.
   --------------------------------------------------------------------- */

.entry-content .wp-block-group.lsq-season-grid {
  --season-gap: 16px;   /* width of the white band between boxes */
  --season-pt:  40px;   /* chevron depth */
  --season-ch:  40px;   /* chevron half-height (equal to --season-pt = 45deg) */
  --season-h:   280px;  /* row height */
}

.entry-content .wp-block-group.lsq-season-grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: var(--season-h) var(--season-h);
  gap: var(--season-gap);
  margin-top: 24px;
}

.entry-content .wp-block-group.lsq-season {
  background: var(--color-primary);
  position: relative;
  box-sizing: border-box;
  height: auto;                                   /* the row sets the height */
  margin: calc(var(--season-pt) * -1);            /* grow into the gutters */
  padding: calc(var(--season-pt) + 34px)          /* and give it straight back */
           calc(var(--season-pt) + 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

/* Box 1 - Jan-Mar. Point RIGHT (into box 2), notch BOTTOM (from box 3). */
.lsq-season:nth-child(1) {
  clip-path: polygon(
    var(--season-pt)                   var(--season-pt),
    calc(100% - var(--season-pt))      var(--season-pt),
    calc(100% - var(--season-pt))      calc(50% - var(--season-ch)),
    100%                               50%,
    calc(100% - var(--season-pt))      calc(50% + var(--season-ch)),
    calc(100% - var(--season-pt))      calc(100% - var(--season-pt)),
    calc(50% + var(--season-ch))       calc(100% - var(--season-pt)),
    50%                                calc(100% - var(--season-pt) * 2),
    calc(50% - var(--season-ch))       calc(100% - var(--season-pt)),
    var(--season-pt)                   calc(100% - var(--season-pt))
  );
}

/* Box 2 - Apr-Jun. Point BOTTOM (into box 4), notch LEFT (from box 1). */
.lsq-season:nth-child(2) {
  clip-path: polygon(
    var(--season-pt)                   var(--season-pt),
    calc(100% - var(--season-pt))      var(--season-pt),
    calc(100% - var(--season-pt))      calc(100% - var(--season-pt)),
    calc(50% + var(--season-ch))       calc(100% - var(--season-pt)),
    50%                                100%,
    calc(50% - var(--season-ch))       calc(100% - var(--season-pt)),
    var(--season-pt)                   calc(100% - var(--season-pt)),
    var(--season-pt)                   calc(50% + var(--season-ch)),
    calc(var(--season-pt) * 2)         50%,
    var(--season-pt)                   calc(50% - var(--season-ch))
  );
}

/* Box 3 - Oct-Dec. Point TOP (into box 1), notch RIGHT (from box 4). */
.lsq-season:nth-child(3) {
  clip-path: polygon(
    var(--season-pt)                   var(--season-pt),
    calc(50% - var(--season-ch))       var(--season-pt),
    50%                                0,
    calc(50% + var(--season-ch))       var(--season-pt),
    calc(100% - var(--season-pt))      var(--season-pt),
    calc(100% - var(--season-pt))      calc(50% - var(--season-ch)),
    calc(100% - var(--season-pt) * 2)  50%,
    calc(100% - var(--season-pt))      calc(50% + var(--season-ch)),
    calc(100% - var(--season-pt))      calc(100% - var(--season-pt)),
    var(--season-pt)                   calc(100% - var(--season-pt))
  );
}

/* Box 4 - Jul-Sep. Point LEFT (into box 3), notch TOP (from box 2). */
.lsq-season:nth-child(4) {
  clip-path: polygon(
    var(--season-pt)                   var(--season-pt),
    calc(50% - var(--season-ch))       var(--season-pt),
    50%                                calc(var(--season-pt) * 2),
    calc(50% + var(--season-ch))       var(--season-pt),
    calc(100% - var(--season-pt))      var(--season-pt),
    calc(100% - var(--season-pt))      calc(100% - var(--season-pt)),
    var(--season-pt)                   calc(100% - var(--season-pt)),
    var(--season-pt)                   calc(50% + var(--season-ch)),
    0                                  50%,
    var(--season-pt)                   calc(50% - var(--season-ch))
  );
}

.lsq-season p {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-offwhite);
  margin: 0;
}

/* Date range */
.lsq-season p:first-child {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 10px;
}

/* Check-in label */
.lsq-season p:nth-child(2) {
  font-weight: 700;
  margin-bottom: 12px;
}

/* --- Aside box --- */

.entry-content .wp-block-group.lsq-aside {
  background: var(--color-sage);
  border-radius: 10px;
  padding: 32px 30px;
}

/* Decorative dotted line with a circle at each end */
.lsq-dotline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 26px;
  max-width: 190px;
}

.lsq-dotline__end {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--color-accent);
  flex: none;
  box-sizing: border-box;
}

.lsq-dotline__line {
  flex: 1;
  height: 3px;
  background-image: radial-gradient(circle, var(--color-accent) 1.4px, transparent 1.4px);
  background-size: 6px 3px;
  background-repeat: repeat-x;
  background-position: center;
}

/* Aside: title stays ABOVE content and keeps its own text,
   unlike the step reveals which use a generated label. */
.lsq-aside .wp-block-details.lsq-reveal > summary {
  order: 0;
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1rem;
  color: var(--color-headline);
}

.lsq-aside .wp-block-details.lsq-reveal > summary::before { content: none; }
.lsq-aside .wp-block-details.lsq-reveal > summary::after { content: " +"; }
.lsq-aside .wp-block-details.lsq-reveal[open] > summary::after { content: " \2013"; }

.lsq-aside .wp-block-details.lsq-reveal > *:not(summary) {
  order: 1;
}

.lsq-aside ul {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-body);
  padding-left: 20px;
  margin: 8px 0;
}

.entry-content .wp-block-group.lsq-pills > .wp-block-group__inner-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.lsq-pills p {
  background: var(--color-accent);
  color: var(--color-headline);
  font-family: var(--font-body);
  font-size: 0.78rem;
  padding: 6px 14px;
  border-radius: 999px;
  margin: 0;
}


/* ==========================================================================
   13.3 — Section 3: Schwab
   ========================================================================== */

.entry-content .wp-block-group.lsq-schwab > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 28px;
  align-items: center;
}

.entry-content .wp-block-group.lsq-schwab figure,
.entry-content .wp-block-group.lsq-schwab figure.wp-block-image {
  margin: 0;
}

.lsq-schwab h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-headline);
  margin: 0 0 4px;
}

.lsq-schwab p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-headline);
  margin: 0;
}


/* ==========================================================================
   13.4 — Section 4: Hexagons
   ========================================================================== */

.section-dark h2,
.section-dark h3 { color: var(--color-offwhite); }
.section-dark p  { color: #c9d2cc; }

p.lsq-badge {
  display: inline-block;
  background: var(--color-muted);
  color: var(--color-headline);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 8px 18px;
  margin: 0 0 22px;
}


/* --- Cluster ------------------------------------------------------------
   Positions are a real honeycomb lattice on a 926 x 767 unit canvas, and
   every width/left/top below is a percentage of that canvas — so the
   aspect-ratio and the coordinates are a matched set. Change one and the
   lattice skews.

   Two grids are in play. The SPACING grid uses fixed slots (215 units for a
   satellite, 360 for a core) and decides where each centre goes. The DRAWN
   size is set per hexagon and is always smaller than its slot, so varying
   the sizes only widens the gap around a hexagon and can never cause an
   overlap. That's what produces the comp's uneven, hand-placed look.

   Lattice rules, where W is a slot width and H = 0.866 x W:
     diagonal neighbour = offset (0.75 x W, 0.5 x H)
     between two slot sizes, average the two first

   Height is always 0.866 x width. Resize both together or the clip-path
   corners stop meeting cleanly.
   --------------------------------------------------------------------- */

.lsq-hex-cluster {
  --hex-line: rgba(250, 247, 245, 0.45);
  position: relative;
  width: 100%;
  max-width: clamp(560px, calc(60vh * 1.308), 820px);
  aspect-ratio: 972 / 743;
  margin: 40px auto 0;
}

/* Flat-top honeycomb. For pointy-top instead:
   polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) */
.lsq-hex,
.lsq-hex-core {
  position: absolute;
  isolation: isolate;          /* lets the ::before fill sit above this background */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 1 / 0.866;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  box-sizing: border-box;
  padding: 8px;
  background: var(--hex-line);
}

/* A real `border` gets sliced by clip-path — it only survives where the
   polygon runs along the border box, so the diagonals lose it. Instead the
   element's own background IS the outline, and this inset pseudo-element
   paints the fill 1px inside it. z-index:-1 puts it above the parent
   background but below the label text. */
.lsq-hex::before,
.lsq-hex-core::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: var(--color-muted);
  transition: background 0.2s ease;
}

.lsq-hex-core {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  line-height: 1.2;
  color: var(--color-primary);
}

.lsq-hex-core::before { background: var(--color-offwhite); }

.lsq-hex {
  border: none;
  cursor: pointer;
  background: var(--hex-line);
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 1.3vw, 0.85rem);
  line-height: 1.25;
  transition: transform 0.2s ease;
}

/* Kadence styles bare <button> elements, including a white hover colour.
   The button.lsq-hex compound outranks it so the label stays readable. */
.entry-content button.lsq-hex,
.entry-content button.lsq-hex:hover,
.entry-content button.lsq-hex:focus,
.entry-content button.lsq-hex[aria-selected="true"] {
  color: var(--color-headline);
  background: var(--hex-line);
}

/* Only the fill changes on hover — the outline and the text hold still. */
.lsq-hex:hover::before,
.lsq-hex[aria-selected="true"]::before {
  background: var(--color-offwhite);
}

.lsq-hex:hover,
.lsq-hex[aria-selected="true"] {
  transform: scale(1.04);
}

.lsq-hex:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* Lattice positions and drawn sizes. Panel order must match hexagon order —
   the script pairs them by index. */
.lsq-hex-core--1 { width: 35.51%; left: 16.29%; top: 19.50%; }  /* Your Business       */
.lsq-hex-core--2 { width: 35.51%; left: 44.15%; top: 40.53%; }  /* Your Future         */

.lsq-hex--1 { width: 20.58%; left:  1.48%; top: 11.13%; }       /* Business Planning   */
.lsq-hex--2 { width: 21.10%; left:  1.03%; top: 44.61%; }       /* Continuity Planning */
.lsq-hex--3 { width: 18.53%; left: 16.17%; top: 77.68%; }       /* Exit Planning       */
.lsq-hex--4 { width: 18.32%; left: 31.33%; top: 66.43%; }       /* Estate & Legacy     */
.lsq-hex--5 { width: 18.73%; left: 46.25%; top: 12.71%; }       /* Business Value      */
.lsq-hex--6 { width: 18.53%; left: 61.56%; top:  1.35%; }       /* Minimizing Risk     */
.lsq-hex--7 { width: 25.73%; left: 73.24%; top: 27.80%; }       /* Retirement Planning */
.lsq-hex--8 { width: 17.29%; left: 74.30%; top: 66.72%; }       /* Personal Finances   */


/* --- Panels ------------------------------------------------------------ */

.entry-content .wp-block-group.lsq-hex-panels {
  margin: 40px auto 0;
  max-width: 780px;
  min-height: 140px;
}

.entry-content .wp-block-group.lsq-hex-panel {
  background: rgba(250, 247, 245, 0.06);
  border: 1px solid rgba(250, 247, 245, 0.12);
  border-radius: 12px;
  padding: 30px 34px;
  max-width: none;
}

.lsq-hex-panel h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--color-offwhite);
  margin: 0 0 10px;
}

.lsq-hex-panel p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: #c9d2cc;
  margin: 0;
}

/* ==========================================================================
   13.5 — Section 5: Is it worth it?
   ========================================================================== */

.lsq-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  margin: 36px 0 0;
  background: #fff;
}

.lsq-table caption {
  caption-side: top;
  background: var(--color-primary);
  color: var(--color-offwhite);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  padding: 20px 16px;
}

.lsq-table th {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  padding: 16px 20px;
  text-align: center;
  border: 1px solid var(--color-accent);
}

th.lsq-table__feel { background: var(--color-sage);  color: var(--color-primary); }
th.lsq-table__do   { background: var(--color-accent); color: #fff; }

.lsq-table td {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-body);
  padding: 22px 20px;
  border: 1px solid var(--color-accent);
  vertical-align: top;
  width: 50%;
}

.lsq-table__quote { font-style: italic; }


/* ==========================================================================
   13.6 / 13.7 — Carousels (tech + testimonial)
   ========================================================================== */

.entry-content .wp-block-group.lsq-carousel {
  position: relative;
  margin: 0;
}

.entry-content .wp-block-group.lsq-carousel__track {
  position: relative;
  min-height: 420px;
}

.entry-content .wp-block-group.lsq-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
  padding: 0;
}

.entry-content .wp-block-group.lsq-slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* A lone slide is always visible, and sizes its own track */
.entry-content .wp-block-group.lsq-slide:only-child {
  position: relative;
  opacity: 1;
  visibility: visible;
}

.lsq-slide figure { margin: 0 0 18px; }

.lsq-slide img {
  width: 100%;
  height: auto;
  display: block;
}

p.lsq-slide__caption {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-headline);
  margin: 0;
}

.lsq-carousel__dots {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.lsq-carousel__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: var(--color-muted);
  padding: 0;
  cursor: pointer;
  opacity: 0.55;
}

.lsq-carousel__dot[aria-current="true"] { opacity: 1; }

.lsq-carousel__dot:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Testimonial variant */
.lsq-carousel--light .lsq-carousel__dots { justify-content: center; }
.lsq-carousel--light .lsq-carousel__dot { background: var(--color-offwhite); }

.entry-content .wp-block-group.lsq-carousel--light .wp-block-group.lsq-carousel__track {
  min-height: 340px;
}

p.lsq-quote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1.45;
  color: var(--color-offwhite);
  text-align: center;
  max-width: 750px;
  margin: 0 auto 34px;
}

p.lsq-quote__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-offwhite);
  text-align: center;
  margin: 0 0 2px;
}

p.lsq-quote__meta {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-offwhite);
  text-align: center;
  margin: 0;
}

.lsq-slide .lsq-quote__name { margin: 0; line-height: 1.35; }
.lsq-slide .lsq-quote__meta { margin: 0; line-height: 1.35; }


/* ==========================================================================
   13.8 — Section 8: What you pay
   ========================================================================== */

.entry-content .wp-block-separator.lsq-dotted-rule {
  width: 100%;
  max-width: none;
  border: none;
  border-top: 2px dotted var(--color-border);
  margin: 20px 0 24px;
  height: 0;
}

.entry-content .wp-block-group.lsq-research {
  background: var(--color-primary);
  border-radius: 12px;
  padding: 38px 36px;
}

.lsq-research p.lsq-research__label {
  font-size: 0.8rem;
  margin-bottom: 18px;
}

.lsq-research__label > span {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 4px;
}

.lsq-research p.lsq-research__stat {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--color-accent);
  margin: 0 0 18px;
}

.lsq-research__stat > span {
  font-size: 0.42em;
  font-weight: 400;
}

.lsq-research p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-offwhite);
}

.lsq-research p.lsq-research__source {
  font-size: 0.8rem !important;
  line-height: 1.55 !important;
  color: var(--color-muted) !important;
  margin-top: 26px !important;
}

.lsq-research h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-offwhite);
  margin: 0 0 6px;
}

.entry-content .lsq-bars { margin-top: 26px; }

.entry-content .lsq-bar { margin-bottom: 22px; padding: 0; }

.lsq-research p.lsq-bar__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--color-offwhite);
  margin: 0 0 8px;
}

.entry-content .lsq-bar__track {
  height: 8px;
  border-radius: 999px;
  background: rgba(250, 247, 245, 0.18);
  overflow: hidden;
  padding: 0;
}

.lsq-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--color-accent);
}

.lsq-bar__note {
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
  color: #c9d2cc !important;
  margin: 8px 0 0 !important;
}


/* ==========================================================================
   13.9 — Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .entry-content .wp-block-group.lsq-split > .wp-block-group__inner-container,
  .entry-content .wp-block-group.lsq-method > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Tail no longer needs to span or overlap once stacked */
  .entry-content .wp-block-group.lsq-method > .wp-block-group__inner-container > .lsq-step--tail {
    margin-top: 0;
  }
}

@media (max-width: 781px) {
  .entry-content .wp-block-group.lsq-service-grid > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
  }

  .entry-content .wp-block-group.lsq-service-box { height: 130px; }

  /* Honeycomb doesn't survive narrow screens — stack as a simple grid */
  .lsq-hex-cluster {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* position stays RELATIVE, not static: grid placement doesn't need static,
     and the inset ::before fill in 13.4 must keep resolving against the hex.
     left/top are cleared instead. width must be cleared too — 13.4 gives every
     hex a lattice percentage, which collapses grid children to slivers. */
  .lsq-hex,
  .lsq-hex-core {
    position: relative;
    width: auto;
    left: auto;
    top: auto;
    aspect-ratio: 1 / 0.9;
    clip-path: none;
    border-radius: 8px;
  }

  .lsq-hex::before,
  .lsq-hex-core::before {
    clip-path: none;
    border-radius: 8px;
  }

  .lsq-hex-core {
    grid-column: span 2;
    font-size: 1.2rem;
	aspect-ratio: 3 / 1;
  }

  /* Single column: no cycle, so no points, no notches, no overhang. */
  .entry-content .wp-block-group.lsq-season-grid > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .entry-content .wp-block-group.lsq-season {
    margin: 0;
    padding: 34px 24px;
    clip-path: none;
    min-height: 240px;
  }

  .entry-content .wp-block-group.lsq-schwab > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .lsq-quote { font-size: 1.2rem; max-width: 100%; }

  .lsq-research__stat { font-size: 2.4rem; }

  .entry-content .wp-block-group.lsq-carousel__track { min-height: 340px; }

  .lsq-table { display: block; overflow-x: auto; }
  .lsq-table td { min-width: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .entry-content .wp-block-group.lsq-slide { transition: none; }
}

/* ==========================================================================
   14. ABOUT US PAGE
   Append to the end of style.css. Bump Version to 1.1.30.

   Sections, top to bottom:
     14.0  Two fixes to earlier sections (read the notes — these are edits,
           not appends)
     14.1  Why we do this        — teal, flat, carries the page H1
     14.2  Shared person card    — used by both 14.3 and 14.4
     14.3  The leadership team   — 2 up, offwhite section / white cards
     14.4  Our team              — 4 up, white section / offwhite cards
     14.5  Work with us          — teal, flat, centred CTA band
     14.6  Responsive

   Specificity notes for this page, in the spirit of the FP page:

   - Never style a bare `p` inside a card. `.lsq-person__body p` would be
     0-3-0 and would outrank `p.lsq-eyebrow.lsq-eyebrow--dark` (0-2-1),
     silently killing the role label's colour and size. Every paragraph
     below is class-targeted for exactly this reason.
   - `.lsq-section h2` and `.lsq-section h3` (both 0-2-0, section 4) beat a
     plain `.lsq-thing h2` (0-1-1). Heading retunes below use a two-class +
     element form.
   - `.entry-content .wp-block-image` (0-2-0) ships a figure margin. The
     media rules are 0-2-1 so they win without !important.
   - The team card is a modifier on the base card, and modifiers here are
     written doubled (`.lsq-person-card.lsq-person-card--team`) so they win
     on specificity rather than on document order.
   ========================================================================== */


/* ==========================================================================
   14.0 — TWO EDITS TO EARLIER SECTIONS

   (a) SECTION 6, the chevron clearance rule. As written it is:

         .section-teal + .lsq-section,
         .entry-content .wp-block-group.section-teal + .wp-block-group.lsq-section {
           padding-top: calc(var(--section-pad-y) + var(--notch-h));
         }

       That is 0-5-0, and the flat opt-out in section 4 is also 0-5-0 —
       a tie, decided by document order, and section 6 comes later. So the
       flat rule loses and the section following ANY teal section gets 60px
       of phantom top padding, chevron or not. Both About Us teal sections
       are flat, so this bites twice. Replace the selector with the :not()
       form below, which stops matching flat sections entirely.

   (b) SECTION 4, the dark-section text colour rule, lists h2, h3 and p but
       not h1. The About Us H1 sits on teal, so add h1 to it.

   Make both edits in place. They are also written here so the intent is
   recorded; if you'd rather not touch earlier sections tonight, these two
   appended blocks do the same job from the bottom of the file.
   ========================================================================== */

.entry-content .section-teal h1 {
  color: var(--color-offwhite);
}


/* ==========================================================================
   14.1 — Section 1: Why we do this
   Classes: lsq-section section-teal section-teal--flat
   Inner:   lsq-section__inner
              lsq-about__head   (eyebrow + H1, centred)
              lsq-prose         (body copy, narrower, left-aligned)
   ========================================================================== */

/* Shared centred heading block — reused by sections 2, 3 and 4 */
.entry-content .wp-block-group.lsq-about__head {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  text-align: center;
}

.lsq-section .lsq-about__head h1,
.lsq-section .lsq-about__head h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.18;
  margin-bottom: 0;
}

/* Body copy column. Descendant selector, not `>` — the paragraphs are
   grandchildren of the group once Kadence injects the inner container. */
.entry-content .wp-block-group.lsq-prose {
  max-width: 84ch;
  margin: 42px auto 0;
  padding: 0;
}

.entry-content .lsq-prose p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 22px;
}

.entry-content .lsq-prose p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   14.2 — Shared person card
   Structure:
     Group  .lsq-person-card
       ├── Image  figure.lsq-person__media
       └── Group  .lsq-person__body
             ├── Paragraph  .lsq-eyebrow .lsq-eyebrow--dark   (role)
             ├── H3                                            (name)
             ├── Paragraph  .lsq-person__bio
             └── Paragraph  .lsq-cta-link                      (optional)

   The card is a flex column and the bio takes flex:1, which pushes the CTA
   link to the foot of the card so links line up across a row of uneven
   bios. That avoids fighting the `margin-top: 14px !important` on
   .lsq-cta-link — the gap above the link comes from padding instead.

   Both the group and its inner container are flexed, so this holds up
   whether or not Kadence emits the wrapper on a given block.
   ========================================================================== */

.entry-content .wp-block-group.lsq-person-card {
  background: #fff;
  border: 1px solid var(--color-accent);
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.entry-content .wp-block-group.lsq-person-card > .wp-block-group__inner-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Media — 0-2-1 beats the .entry-content .wp-block-image figure margin */
.lsq-person-card figure.lsq-person__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.lsq-person-card figure.lsq-person__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Body */
.entry-content .wp-block-group.lsq-person__body {
  flex: 1;
  padding: 24px 22px 26px;
  background: transparent;
  display: flex;
  flex-direction: column;
}

.entry-content .wp-block-group.lsq-person__body > .wp-block-group__inner-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Role label. Colour and size come from p.lsq-eyebrow.lsq-eyebrow--dark
   in section 3 — only spacing is set here. */
.lsq-person__body p.lsq-eyebrow {
  line-height: 1.3;
  margin-bottom: 10px;
}

.lsq-person-card .lsq-person__body h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.85rem;
  line-height: 1.15;
  color: var(--color-headline);
  margin: 0 0 14px;
}

.lsq-person__body p.lsq-person__bio {
  flex: 1;                        /* this is what floors the CTA link */
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-body);
  margin: 0;
}

.lsq-person__body p.lsq-cta-link {
  font-size: 0.9rem;
  padding-top: 22px;
  margin-bottom: 0;
}


/* ==========================================================================
   14.3 — Section 2: The leadership team
   Section background offwhite (#faf7f5), cards white.
   ========================================================================== */

.entry-content .wp-block-group.lsq-leader-grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-top: 48px;
}

.entry-content .wp-block-group.lsq-leader-grid > .wp-block-group__inner-container > .wp-block-group {
  width: auto;
  max-width: none;
  margin: 0;
}


/* ==========================================================================
   14.4 — Section 3: Our team
   Inverted from 14.3 — section background white, cards offwhite.
   Modifiers are doubled so they beat the base card on specificity rather
   than relying on being further down the file.
   ========================================================================== */

.entry-content .wp-block-group.lsq-team-grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 48px;
}

.entry-content .wp-block-group.lsq-team-grid > .wp-block-group__inner-container > .wp-block-group {
  width: auto;
  max-width: none;
  margin: 0;
}

.entry-content .wp-block-group.lsq-person-card.lsq-person-card--team {
  background: var(--color-offwhite);
  padding: 10px;
}

.lsq-person-card.lsq-person-card--team figure.lsq-person__media {
  aspect-ratio: 1 / 1;
}

.entry-content .wp-block-group.lsq-person-card--team .lsq-person__body {
  padding: 20px 15px 22px;
}

/* Roles wrap to two lines on some cards (Director of Wealth Management).
   Reserving two lines keeps every name in the row on the same baseline. */
.lsq-person-card.lsq-person-card--team .lsq-person__body p.lsq-eyebrow {
  min-height: 2.6em;
}

.lsq-person-card.lsq-person-card--team .lsq-person__body h3 {
  font-size: 1.45rem;
  margin-bottom: 12px;
}

.lsq-person-card.lsq-person-card--team .lsq-person__body p.lsq-person__bio {
  font-size: 0.88rem;
  line-height: 1.6;
}


/* ==========================================================================
   14.5 — Section 4: Work with us
   Classes: lsq-section section-teal section-teal--flat lsq-cta-band

   Do NOT set the button's colours in the block editor. Kadence writes those
   as an inline style, which beats anything in this file and there is no
   qualifier that gets you past it.
   ========================================================================== */

.entry-content .wp-block-group.lsq-cta-band {
  text-align: center;
}

.lsq-section.lsq-cta-band h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.15;
  margin-bottom: 30px;
}

.entry-content .lsq-cta-band p.lsq-cta-band__lede {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 56ch;
  margin: 0 auto 46px;
}

.lsq-cta-band .wp-block-buttons {
  justify-content: center;
}

/* 0-2-0 beats the global pill radius (0-1-0) in section 3 */
.lsq-cta-band .wp-block-button__link {
  border-radius: 0;
  background-color: var(--color-offwhite);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  padding: 18px 44px;
}

.lsq-cta-band .wp-block-button__link:hover,
.lsq-cta-band .wp-block-button__link:focus {
  background-color: #fff;
  color: var(--color-primary);
}

.lsq-cta-band .wp-block-button__link:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}


/* ==========================================================================
   14.6 — Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .entry-content .wp-block-group.lsq-team-grid > .wp-block-group__inner-container {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Two per row: roles no longer need to align across four cards */
  .lsq-person-card.lsq-person-card--team .lsq-person__body p.lsq-eyebrow {
    min-height: 0;
  }
}

@media (max-width: 900px) {
  .entry-content .wp-block-group.lsq-leader-grid > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .lsq-person-card .lsq-person__body h3 {
    font-size: 1.6rem;
  }
}

@media (max-width: 600px) {
  .entry-content .wp-block-group.lsq-team-grid > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
  }

  .lsq-person-card.lsq-person-card--team figure.lsq-person__media {
    aspect-ratio: 4 / 3;
  }
}

/* ==========================================================================
   15. PERSON PAGE (Greg, Erin)

   One off-white section; the hero runs full content width and everything
   below sits on a narrower measure, left-aligned to the same gutter.

   Specificity notes:

   - `.lsq-eyebrow` is written `p.lsq-eyebrow`, so it will NOT match the h2
     section labels. They carry their own declarations via .lsq-section-label.
   - `.lsq-section h2` (0-2-0, section 4) sets margin-bottom: 24px. The label
     rule is 0-2-1 to beat it.
   - `.entry-content .wp-block-image` (0-2-0) ships a figure margin. The hero
     media rule is 0-2-1.
   - The help card is NOT .section-teal — that class carries the chevron
     ::after. Colours are set explicitly here instead.
   ========================================================================== */

.lsq-person-page {
  --person-measure: 840px;
}

/* --- Shared: narrow measure, left-aligned --- */

.entry-content .wp-block-group.lsq-measure,
.entry-content p.lsq-measure {
  max-width: var(--person-measure, 840px);
  margin-left: 0;
  margin-right: auto;
}

/* --- Shared: section label (a real h2 drawn at eyebrow size) --- */

.lsq-section h2.lsq-section-label {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: 0;
  margin-bottom: 18px;
}

.lsq-section h2.lsq-section-label--light {
  color: var(--color-offwhite);
}

/* ==========================================================================
   15.1 — Hero
   ========================================================================== */

.entry-content .wp-block-group.lsq-person-hero > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 56px;
  align-items: end;
}

/* 0-2-1 beats the .entry-content .wp-block-image figure margin (0-2-0) */
.lsq-person-hero figure.lsq-person-hero__media {
  margin: 0;
  aspect-ratio: 6 / 7;
  overflow: hidden;
}

.lsq-person-hero figure.lsq-person-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.entry-content .wp-block-group.lsq-person-hero__body {
  padding: 0;
}

.lsq-section .lsq-person-hero__body h1.lsq-person-hero__name {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 2.6rem);
  line-height: 1.15;
  color: var(--color-headline);
  margin: 0 0 14px;
}

.lsq-person-hero__body p.lsq-person-hero__role {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--color-body);
  margin: 0 0 22px;
}

/* --- Contact row --- */

.lsq-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
  align-items: center;
}

.lsq-contact a.lsq-contact__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--color-body);
  text-decoration: none;
}

.lsq-contact a.lsq-contact__item:hover span,
.lsq-contact a.lsq-contact__item:focus span {
  text-decoration: underline;
}

.lsq-contact a.lsq-contact__item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.lsq-contact__icon {
  flex: none;
  color: var(--color-muted);
}

/* ==========================================================================
   15.2 — Summary + rule
   ========================================================================== */

.entry-content p.lsq-person-summary {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-body);
  max-width: 92ch;
  margin: 46px 0 0;
}

/* Core Separator ships at max-width:100px on the default style */
.entry-content .wp-block-separator.lsq-hairline {
  width: 100%;
  max-width: none;
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 30px 0 48px;
  height: 0;
}

/* ==========================================================================
   15.3 — Narrative
   Descendant selector, not `>` — the paragraphs are grandchildren of the
   group once Kadence injects the inner container.
   ========================================================================== */

.entry-content .lsq-narrative p {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--color-headline);
  text-align: left;          /* justify + hyphens:auto if Sarah wants the comp */
  margin: 0 0 26px;
}

.entry-content .lsq-narrative p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   15.4 — How I help
   NOT .section-teal — that class carries the chevron ::after.
   ========================================================================== */

.entry-content .wp-block-group.lsq-help-card {
  background: var(--color-primary);
  border-radius: 10px;
  padding: 34px 32px 38px;
  margin-top: 52px;
}

.entry-content .wp-block-group.lsq-help-card__grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.entry-content .wp-block-group.lsq-help-card__grid > .wp-block-group__inner-container > .wp-block-group {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

.lsq-help-card h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--color-offwhite);
  margin: 0 0 12px;
}

.entry-content .lsq-help-card p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: #c9d2cc;
  margin: 0;
}

/* ==========================================================================
   15.5 — Credentials & background
   ========================================================================== */

.entry-content .wp-block-group.lsq-creds-block {
  margin-top: 52px;
}

.lsq-creds {
  display: grid;
  grid-template-columns: 170px 1fr;
  margin: 0;
  font-family: var(--font-body);
}

.lsq-creds dt,
.lsq-creds dd {
  font-size: 0.92rem;
  line-height: 1.6;
  padding: 12px 0;
  margin: 0;
  border-bottom: 1px dotted var(--color-border);
}

.lsq-creds dt {
  color: var(--color-body);
  padding-right: 20px;
}

.lsq-creds dd {
  color: var(--color-headline);
}

.lsq-creds dt:last-of-type,
.lsq-creds dd:last-of-type {
  border-bottom: none;
}

/* ==========================================================================
   15.6 — Disclosure
   ========================================================================== */

.entry-content p.lsq-disclosure {
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 56px 0 0;
}

/* ==========================================================================
   15.7 — Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .entry-content .wp-block-group.lsq-person-hero > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: start;
  }

  .lsq-person-hero figure.lsq-person-hero__media {
    aspect-ratio: 4 / 3;
    max-width: 420px;
  }

  .entry-content .wp-block-group.lsq-help-card__grid > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

@media (max-width: 600px) {
  .entry-content .lsq-narrative p {
    font-size: 1.05rem;
  }

  /* Label above value rather than a cramped two-column grid */
  .lsq-creds {
    grid-template-columns: 1fr;
  }

  .lsq-creds dt {
    padding-bottom: 2px;
    border-bottom: none;
    font-weight: 700;
    color: var(--color-headline);
  }

  .lsq-creds dd {
    padding-top: 0;
  }
}

/* ==========================================================================
   16. GET IN TOUCH

   Everything is prefixed .entry-content rather than .lsq-section, so a
   missing wrapper class costs section padding and nothing else.

   Specificity notes:

   - The form card sits inside .section-teal, whose `p` rule is 0-2-0 and
     would turn form text off-white on a white card. Do NOT fix that with
     `.section-teal .lsq-form-card p` (0-3-0) — that also outranks
     p.lsq-eyebrow.lsq-eyebrow--accent (0-2-1) and kills the clay eyebrow.
     Scope to .fluentform instead, which the eyebrow is not inside.
   - The clay eyebrow survives .section-teal p on its own because the
     modifier is doubled (0-2-1). Don't unwrap it.
   ========================================================================== */

/* ==========================================================================
   16.1 — Book a call
   ========================================================================== */

.entry-content .wp-block-group.lsq-booking {
  text-align: center;
}

.entry-content .lsq-booking h1 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.15;
  color: var(--color-headline);
  margin: 0 0 20px;
}

.entry-content .lsq-booking p.lsq-booking__lede {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-body);
  max-width: 62ch;
  margin: 0 auto 46px;
}

/* --- The embed ---------------------------------------------------------
   --embed-h and --embed-h-narrow are PLACEHOLDERS. Measure the real
   scheduler at its tallest step (see the guide) and replace them. Too
   short produces an inner scrollbar that only appears on the last step.
   ---------------------------------------------------------------------- */

.lsq-embed {
  --embed-h: 992px;
  --embed-crop: 0px;
  --embed-crop-bottom: 75px;
  --embed-h-narrow: 1000px;
  max-width: 920px;
  margin: 0 auto;
  text-align: left;
}

.lsq-embed__window {
  height: var(--embed-h);
  overflow: hidden;
}

.lsq-embed iframe.lsq-embed__frame {
  display: block;
  width: 100%;
  height: calc(var(--embed-h) + var(--embed-crop) + var(--embed-crop-bottom));
  margin-top: calc(var(--embed-crop) * -1);
  border: 0;
  background: #fff;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* legacy Edge */
}

.lsq-embed iframe.lsq-embed__frame::-webkit-scrollbar {
  display: none;                /* Chrome, Brave, Safari */
}

.entry-content .lsq-embed p.lsq-embed__fallback {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-muted);
  text-align: center;
  margin: 16px 0 0;
}

.lsq-embed__fallback a {
  color: var(--color-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   16.2 — Have a question first?
   ========================================================================== */

.entry-content .wp-block-group.lsq-contact-split > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: start;
}

.entry-content .wp-block-group.lsq-contact-split__col {
  padding: 0;
}

.entry-content .lsq-contact-split h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.1;
  margin: 0 0 20px;
}

.entry-content .lsq-contact-split p.lsq-contact-split__note {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   16.3 — Form card

   ⚠️ Every .fluentform selector below is written from Fluent Forms'
   documented markup and has NOT been checked against your install. Verify
   before trusting them — see the dump snippet in the guide. If they differ,
   the class names change but the structure of this block does not.
   ========================================================================== */

/* min-height pins the card at roughly its form height. Without it, the
   inline success message collapses the card, and because the split grid is
   align-items:center the whole section reflows and the page jumps under the
   reader at the exact moment they're trying to read the confirmation.
   Measure the real height once built and replace 480px:
     document.querySelector('.lsq-form-card').getBoundingClientRect().height */
.entry-content .wp-block-group.lsq-form-card {
  background: #fff;
  border: 1px solid var(--color-accent);
  padding: 44px 40px 48px;
  min-height: 480px;
}

.lsq-form-card p.lsq-eyebrow {
  text-align: center;
  margin-bottom: 28px;
}

/* Scoped to .fluentform, NOT to the card — see the note at the top */
.lsq-form-card .fluentform p {
  color: var(--color-body);
}

.lsq-form-card .fluentform .ff-el-group {
  margin-bottom: 18px;
}

.lsq-form-card .fluentform .ff-el-form-control {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--color-headline);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: 16px 18px;
  line-height: 1.4;
}

.lsq-form-card .fluentform .ff-el-form-control::placeholder {
  color: var(--color-muted);
  opacity: 1;
}

.lsq-form-card .fluentform .ff-el-form-control:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

.lsq-form-card .fluentform textarea.ff-el-form-control {
  min-height: 150px;
  resize: vertical;
}

/* Submit — square, matching the About Us CTA button rather than the
   global pill. .lsq-form-card is 0-2-0 so it beats the 0-1-0 radius rule. */
.lsq-form-card .fluentform .ff-btn.ff-btn-submit.ff_btn_style,
.lsq-form-card .fluentform button.ff-btn-submit,
.lsq-form-card .fluentform input[type="submit"] {
  width: 100%;
  border-radius: 999px;
  border: none;
  background-color: var(--color-primary);
  color: var(--color-offwhite);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  padding: 17px 32px;
  cursor: pointer;
  margin-top: 10px;
}

.lsq-form-card .fluentform .ff-btn.ff-btn-submit.ff_btn_style:hover,
.lsq-form-card .fluentform .ff-btn.ff-btn-submit.ff_btn_style:focus {
  background-color: var(--color-headline);
  color: var(--color-offwhite);
}

.lsq-form-card .fluentform .ff-btn-submit:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* Validation messages need to be readable on white */
.lsq-form-card .fluentform .error,
.lsq-form-card .fluentform .text-danger {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: #a3401f;
}

/* Inline success message — replaces the form in place (Q10) */
.lsq-form-card .fluentform .ff-message-success {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-headline);
  background: var(--color-sage);
  border: 1px solid var(--color-accent);
  padding: 22px 24px;
  margin: 0;
}

/* ==========================================================================
   16.4 — Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .entry-content .wp-block-group.lsq-contact-split > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 600px) {
  .lsq-embed iframe.lsq-embed__frame {
    height: var(--embed-h-narrow);
  }

  .entry-content .wp-block-group.lsq-form-card {
    padding: 32px 22px 36px;
  }
}

/* ==========================================================================
   17. FOOTER

   Kadence writes per-widget alignment classes from the Customizer. Widgets 1
   and 2 got content-valign-top; widget 3 fell back to content-valign-default,
   which centres — and since widget 3 is the tallest column, its logo sits
   lower than the other two. The Customizer control didn't take, so this
   forces all three to top.
   ========================================================================== */

.site-footer .site-footer-row .site-footer-section,
.site-footer .footer-widget-area {
  align-self: start;
  justify-content: flex-start;
}

.site-footer .footer-widget-area.content-valign-default {
  align-self: start;
  justify-content: flex-start;
}

/* First element in each column carries its own top margin — a <ul class="menu">
   in column 1 vs a <p> in column 2 — so they don't line up even once the
   columns do. */
.site-footer .footer-widget-area-inner > .widget:first-child {
  margin-top: 0;
}

.site-footer .footer-widget-area-inner > .widget:first-child > *:first-child,
.site-footer .footer-widget-area-inner > .widget:first-child .menu {
  margin-top: 0;
}

.site-footer .footer-widget-area-inner > .widget:first-child > figure.wp-block-image {
  margin-top: -14px;
  margin-left: -10px;
}

/* ==========================================================================
   18. LEGAL PAGES (Privacy Policy, Disclosure)

   Two components, both reusable on the Disclosure page:
     .lsq-defs          — definition list with teal label blocks
     .lsq-table--privacy — three-column variant of the FP §5 table

   Specificity notes:
   - .lsq-table td sets width:50% at 0-1-1 (section 13.5). The privacy
     variant is written .lsq-table.lsq-table--privacy td (0-2-1) so it wins
     on specificity rather than on being later in the file.
   - .lsq-table th centres text at 0-1-1. Row headers here need left
     alignment, so they're targeted with an attribute selector.
   ========================================================================== */

.entry-content .wp-block-group.lsq-legal {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.entry-content .lsq-legal h1 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.15;
  color: var(--color-headline);
  margin: 0 0 12px;
}

.entry-content .lsq-legal h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--color-headline);
  margin: 56px 0 18px;
}

.entry-content p.lsq-legal__meta {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0 0 40px;
}

.lsq-legal__meta a {
  color: var(--color-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-content .lsq-legal p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-body);
  margin: 0 0 16px;
}

.entry-content p.lsq-legal__lede {
  font-size: 1rem;
  margin-bottom: 24px;
}

/* --- 18.1 Definition list ---------------------------------------------
   Teal label block, light content block, matching the GLBA notice format
   the PDF uses. Collapses to label-above-content on narrow screens.
   --------------------------------------------------------------------- */

.lsq-defs {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2px;
  margin: 0 0 28px;
  font-family: var(--font-body);
}

.lsq-defs dt {
  background: var(--color-primary);
  color: var(--color-offwhite);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.4;
  padding: 20px 22px;
  margin: 0;
}

.lsq-defs dd {
  background: #fff;
  color: var(--color-body);
  font-size: 0.95rem;
  line-height: 1.7;
  padding: 20px 24px;
  margin: 0;
}

.lsq-defs dd > p {
  margin: 0 0 14px;
}

.lsq-defs dd > p:last-child {
  margin-bottom: 0;
}

.lsq-defs dd ul {
  margin: 0 0 14px;
  padding-left: 20px;
}

.lsq-defs dd ul:last-child {
  margin-bottom: 0;
}

.lsq-defs dd li {
  margin-bottom: 8px;
}

.lsq-defs dd a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- 18.2 Three-column privacy table ----------------------------------- */

.lsq-table.lsq-table--privacy {
  margin-top: 0;
}

.lsq-table.lsq-table--privacy thead th {
  background: var(--color-primary);
  color: var(--color-offwhite);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.4;
  text-align: left;
  padding: 16px 18px;
}

.lsq-table.lsq-table--privacy th[scope="row"] {
  background: #fff;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.6;
  text-align: left;
  color: var(--color-body);
  padding: 18px;
  width: 52%;
}

.lsq-table.lsq-table--privacy th[scope="row"] strong {
  display: block;
  color: var(--color-headline);
  margin-bottom: 4px;
}

.lsq-table.lsq-table--privacy th[scope="row"] span {
  display: block;
}

.lsq-table.lsq-table--privacy td {
  width: 24%;
  text-align: center;
  vertical-align: middle;
  font-size: 0.92rem;
  padding: 18px;
}

/* --- 18.3 Responsive --------------------------------------------------- */

@media (max-width: 781px) {
  /* Label above content rather than a cramped two-column grid */
  .lsq-defs {
    grid-template-columns: 1fr;
  }

  .lsq-defs dt {
    padding: 14px 18px;
  }

  .lsq-defs dd {
    padding: 18px;
    margin-bottom: 10px;
  }

  /* The table still scrolls rather than hiding columns — section 12 rule */
  .lsq-table.lsq-table--privacy th[scope="row"] {
    min-width: 260px;
  }

  .lsq-table.lsq-table--privacy td {
    min-width: 120px;
  }
}


/* ==========================================================================
   19. FLIP CARDS — Financial Planning §1

   Replaces .lsq-service-grid / .lsq-service-box (13.1), which can be deleted
   once this is verified working.

   Custom HTML, not Group blocks: Kadence's injected inner-container would sit
   between .lsq-flip and .lsq-flip__inner and break the 3D context.

   Both faces stay in the DOM. backface-visibility hides a face visually
   without removing it from the accessibility tree or the HTML source, which
   is what keeps this compliant with the server-rendering requirement.
   ========================================================================== */

.lsq-flip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.lsq-flip {
  perspective: 1000px;
  height: 190px;
}

.lsq-flip:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.lsq-flip__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

/* :focus-within covers keyboard; :hover covers mouse */
.lsq-flip:hover .lsq-flip__inner,
.lsq-flip:focus-within .lsq-flip__inner {
  transform: rotateY(180deg);
}

.lsq-flip__face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  background: var(--color-offwhite);
  border: 1px solid var(--color-accent);
}

.lsq-flip__back {
  transform: rotateY(180deg);
}

/* Class-targeted, and .entry-content prefixed so they beat any bare
   .entry-content p rule Kadence ships. */
.entry-content .lsq-flip__front p {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--color-headline);
  margin: 0;
}

.entry-content .lsq-flip__back p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--color-body);
  margin: 0;
}

/* --- Touch: no hover, so no flip. One card, both strings visible. ------- */

@media (hover: none) {
  .lsq-flip {
    height: auto;
    perspective: none;
  }

  .lsq-flip__inner {
    transform: none;
    transform-style: flat;
    height: auto;
    background: var(--color-offwhite);
    border: 1px solid var(--color-accent);
    padding: 24px 20px;
    text-align: center;
  }

  .lsq-flip:hover .lsq-flip__inner,
  .lsq-flip:focus-within .lsq-flip__inner {
    transform: none;
  }

  .lsq-flip__face {
    position: static;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    display: block;
    padding: 0;
    background: transparent;
    border: none;
  }

  .lsq-flip__back {
    transform: none;
  }

  .entry-content .lsq-flip__front p {
    margin-bottom: 10px;
  }
}

/* --- Narrow: single column ---------------------------------------------- */

@media (max-width: 781px) {
  .lsq-flip-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Reduced motion: still flips, just doesn't animate ------------------- */

@media (prefers-reduced-motion: reduce) {
  .lsq-flip__inner {
    transition: none;
  }
}