/* JourneyGuide marketing site — matches the live Astra/Elementor look (Lato + teal), zero JS.
   Design tokens extracted from the live site: font Lato, primary teal #006A85, links #21759B,
   headings near-black weight 400, hero = dark-overlaid photo, footer teal. */

/* ---- Self-hosted Lato (no external font requests; font-src 'self') ---- */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/lato-400.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/lato-700.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/lato-900.woff2') format('woff2'); }

:root {
  --teal: #006A85;          /* primary: buttons, footer, accents */
  --teal-dark: #00566d;     /* button hover */
  --teal-nav: #3f7183;      /* muted teal for small labels — darkened from live #6291A3 to pass WCAG AA on white */
  --link: #21759B;
  --text: #6d6d6d;          /* body copy — darkened from live #999 to clear WCAG AA (keeps Lighthouse a11y=100) */
  --heading: #000000;       /* section headings — match live exactly */
  --line: #e6e9ec;
  --bg: #ffffff;
  --bg-soft: #f2f2f2;       /* neutral light grey (matches live) */
  --radius: 4px;
  --space-xl: 6.25rem;      /* 100px — matches the live section rhythm */
  --maxw: 1200px;
  --font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --header-h: 104px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 18px; line-height: 1.6; color: var(--text); background: var(--bg); }   /* live base body = 18px */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--heading); font-weight: 400; line-height: 1.2; margin: 0 0 0.5em; }
/* Live keeps hero H1s large across breakpoints (~55px mobile, ~65px tablet, 70px desktop) and lets
   them WRAP rather than shrink — that's why "JourneyGuide" breaks mid-word on live mobile. The old
   6vw term collapsed them to ~35-46px; 8.5vw + a 3.4rem floor tracks live's near-constant scale. */
h1 { font-size: clamp(3.4rem, 8.5vw, 4.375rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.2vw, 1.875rem); }   /* 30px */
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--teal); color: #fff; padding: 0.5rem 1rem; z-index: 100; }
.skip-link:focus { left: 0; }

/* ---- Buttons (teal pill, per live) ---- */
.btn { display: inline-block; padding: 13px 40px; border-radius: 50px; font-weight: 400; font-size: 0.95rem; line-height: 1.2;
  text-align: center; cursor: pointer; border: 1px solid transparent; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn--primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }
.btn--ghost { background: transparent; border-color: #fff; color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--teal); }

/* ---- Header: solid white bar above the hero (per live) ---- */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 1px 8px rgba(0,0,0,.07); }
/* Full-width header bar (overrides the .container max-width on the same element). */
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); max-width: none; padding: 0 2.2rem; }
.site-header__brand img { height: 60px; width: auto; }   /* live logo renders ~220x61 */
.site-nav__list { list-style: none; display: flex; align-items: center; gap: 0; margin: 0; padding: 0; }
.site-nav__list a:not(.btn) { color: #6d6d6d; font-weight: 400; font-size: 18px; padding: 0 20px; }   /* live: 18px, #6d6d6d, 0 20px */
.site-nav__list a:not(.btn):hover { color: var(--teal); text-decoration: none; }
/* Slimmer nav CTA pill (the hero/section CTAs keep the larger .btn padding). */
.site-nav__cta { padding: 12px 30px; font-size: 0.95rem; margin-left: 12px; }
/* Active page highlighted teal — each page's <body> carries a nav-<page> class (header is shared via SSI). */
/* :not(.btn) so the active-page highlight never recolors the "Schedule a Demo" CTA
   (which links to /contact/ and would otherwise render teal-on-teal on the Contact page). */
.nav-home .site-nav__list a[href="/"]:not(.btn),
.nav-solutions .site-nav__list a[href="/solutions/"]:not(.btn),
.nav-services .site-nav__list a[href="/services/"]:not(.btn),
.nav-pricing .site-nav__list a[href="/pricing/"]:not(.btn),
.nav-about .site-nav__list a[href="/about/"]:not(.btn),
.nav-contact .site-nav__list a[href="/contact/"]:not(.btn) { color: var(--teal); }

/* CSS-only mobile nav toggle (no JavaScript). Hidden on desktop. */
.nav-toggle { display: none; }
.nav-toggle__btn { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 0.5rem; }
.nav-toggle__btn span { width: 26px; height: 3px; background: var(--teal); border-radius: 2px; transform-origin: center; transition: transform .25s ease, opacity .2s ease; }
/* Open state: the three bars morph into an X (bar height 3 + gap 5 = 8px centre spacing). */
.nav-toggle:checked ~ .nav-toggle__btn span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle:checked ~ .nav-toggle__btn span:nth-child(2) { opacity: 0; }
.nav-toggle:checked ~ .nav-toggle__btn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---- Sections ---- */
.section { padding: var(--space-xl) 0; }
.section--soft { background: var(--bg-soft); }
/* Per-section vertical rhythm — match live Elementor per-section paddings. */
.section--commit  { padding: 100px 0 10px; }   /* home "Our Commitment to You" */
.section--hurdles { padding: 40px 0 60px; }    /* home "Eliminate Your Hurdles" */
.section--logos   { padding: 0 0 25px; }       /* home "Broker-Dealers We Work With" */
.section--pillars { padding: 50px 0; }         /* about "Our Software" pillars */
.section--history { background: #f6f6f6; padding: 75px 0; }   /* about "Our History" */
.section--leaders { padding: 80px 0; }         /* about "Our Leadership Team" */
.section--pricing { padding: 150px 0; }        /* pricing cards ("Independent Advisors") */
.section--pricing .container { max-width: 1266px; }   /* live pricing row is wider → 382px cards */
/* Textured band (spikes.png tiling pattern over a tint) — per live Pricing "Let's Work Together".
   Live band runs 50px top/bottom (tighter than the default 100px .section rhythm). */
/* spikes.png is an OPAQUE light tile — live composites it as: opaque tile + a translucent colour overlay on top
   (Elementor background-overlay). Replicated here with a translucent gradient layered OVER the tile so the
   texture stays faint and the band colour dominates. Pricing overlay = #f4f4f7 @ .6. */
.section--spikes { background: linear-gradient(rgba(244,244,247,.6), rgba(244,244,247,.6)), url('/images/spikes.png'); background-color: #f4f4f7; padding: 50px 0; }
.section__title { text-align: center; padding-bottom: 1.1rem; }
/* Short teal divider under each section heading (per live). */
.section__title::after { content: ""; display: block; width: 118px; height: 0; border-top: 1px solid #00494E; margin: 1.1rem auto 0; }
.section__lead { max-width: 720px; margin: 0 auto 2.5rem; text-align: center; }
.eyebrow, .feature-row__eyebrow { display: block; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem;
  font-weight: 700; color: var(--teal); margin-bottom: .6rem; }

/* ---- Hero: dark-overlaid photo, white text (per live) ---- */
.hero { position: relative; color: #fff; padding: 40px 0 64px;
  /* HOME hero: live uses a GREY haze overlay (elementor-background-overlay rgba(122,122,122,.62)) over the raw
     bright photo — NOT a dark scrim — plus a soft text-shadow. Interior heroes override this with a black .6 scrim. */
  background: linear-gradient(rgba(122,122,122,.62), rgba(122,122,122,.62)), url('/images/hero-web.png') center 20% / cover no-repeat; }
.hero h1 { color: #fff; max-width: 720px; margin-bottom: 0.75rem; text-shadow: 0 0 10px rgba(0,0,0,.3); }
/* Subtitle matches the live H4: Lato 23px, bold, 1.5 line-height, light grey. */
.hero p { font-size: 1.4375rem; font-weight: 700; line-height: 1.5; color: #e6e2e2; max-width: 400px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }
.hero__actions .btn { padding: 12px 32px; font-size: 0.9rem; }   /* slim banner CTA */
.hero--tall { padding: 25px 0 100px; }     /* live home banner: 25px top / 100px bottom, content-driven height */
.hero--compact { padding: 25px 0 40px; }
/* Centered banner hero (interior pages: Advisors/Solutions, Services, About, Pricing, Contact). */
.hero--center { text-align: center; }
.hero--center h1 { margin-left: auto; margin-right: auto; }
.hero--center p { margin-left: auto; margin-right: auto; }
.hero--banner { padding: 150px 0; }   /* live interior heroes = 150px 0 */
.hero--banner h1 { max-width: none; margin-bottom: 1rem; }
.hero--banner p { font-size: 1.4375rem; font-weight: 700; max-width: 900px; color: #f2f2f2; }
/* Services headline wraps to two centered lines on live (width-constrained ~820px). */
.nav-services .hero h1 { max-width: 820px; }
/* Per-page hero photos (downloaded full-res from the live site). All interior heroes use a black .6 scrim (per live). */
.nav-solutions .hero { background-image: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('/images/hero/advisors.jpg'); }
.nav-services .hero  { background-image: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('/images/hero/services.jpg'); }
.nav-pricing .hero   { background-image: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('/images/hero/pricing.jpg'); }
.nav-about .hero     { background-image: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('/images/hero/about.jpg'); }
.nav-contact .hero   { background-image: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('/images/hero/contact.jpg'); }

/* ---- Two-column content rows (Solutions "Advisors", etc.) ---- */
.solution-rows { max-width: 1140px; margin: 0 auto; }
.solution-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding: 3rem 0; border-bottom: 2px solid rgba(0,0,0,.1); }
/* Live eyebrow (H6): Lato 21px/700 black + a short teal accent rule to its RIGHT (a sibling divider widget on
   live — 60px x 2px #006A85). Restored after an earlier pass wrongly removed it. */
.solution-row__eyebrow { display: inline-flex; align-items: center; gap: .85rem; font-weight: 700; color: #000; font-size: 1.3125rem; letter-spacing: normal; line-height: 1.4; margin: 0 0 .5rem; }
.solution-row__eyebrow::after { content: ""; flex: 0 0 60px; height: 2px; background: #006A85; }
.solution-row__title { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 400; color: #000; line-height: 1.25; margin: 0; }
.solution-row__body p { margin: 0 0 1rem; }
.bullet-list { list-style: disc; margin: 1rem 0 0; padding-left: 1.5rem; display: grid; gap: .4rem; }
.bullet-list li { color: var(--text); }
/* "It's All About the Journey" + embedded video, inside the banner (per live) */
.hero__feature { margin-top: 11rem; max-width: 460px; }
.hero__feature-title { color: #fff; font-size: 1.7rem; margin-bottom: 1rem; }
.video-embed { position: relative; aspect-ratio: 16 / 9; max-width: 460px; border-radius: 6px; overflow: hidden; background: #000; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.video-embed iframe { width: 100%; height: 100%; display: block; border: 0; }
/* Click-to-play facade (poster + play button); the real iframe is injected on click by /js/video.js. */
.video-facade { display: block; width: 100%; height: 100%; padding: 0; border: 0; margin: 0; cursor: pointer; position: relative; background: #000; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-facade__play { position: absolute; inset: 0; margin: auto; width: 68px; height: 48px; background: rgba(0,0,0,.72); border-radius: 12px; transition: background .2s ease; }
.video-facade__play::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #fff; }
.video-facade:hover .video-facade__play, .video-facade:focus-visible .video-facade__play { background: #c00; }
.video-facade:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Commitment grid (home) — 2x2, icon-left, borderless (matches live) */
.commitment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.75rem 3rem; max-width: 1160px; margin: 3rem auto 0; }   /* live grid spans full container */
.commitment-item { display: flex; align-items: flex-start; gap: 1.25rem; text-align: left; }
.commitment-item__icon { width: 60px; height: 60px; flex: 0 0 60px; margin: 0; }
.commitment-item__title { font-size: 30px; font-weight: 400; color: #000; line-height: 1.3; margin: 0 0 .45rem; }
.commitment-item p { color: var(--text); font-size: 18px; line-height: 1.6; margin: 0; }

/* ---- Card grid ---- */
.grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; text-align: center; }
.card h3 { margin-top: 0; color: var(--heading); }
.card img { width: 64px; height: 64px; margin: 0 auto 1.25rem; }
.card .feature-row__eyebrow { text-align: center; }

/* ---- Prose / legal ---- */
.prose { max-width: 820px; margin: 0 auto; }
.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.5rem; font-size: 1.1rem; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.5rem; }
.legal-meta { color: var(--teal-nav); font-size: 0.85rem; text-transform: uppercase; letter-spacing: .06em; }

/* ---- Legal pages: grey page + white content card (per live; no hero photo) ---- */
.legal { background: #f5f5f5; padding: 4.4rem 1.25rem 4rem; }   /* live grey gutter above the card ≈70px */
.legal .prose > *:last-child { margin-bottom: 0; }
.legal__card { background: #fff; max-width: 1200px; margin: 0 auto; padding: 6rem clamp(1.5rem, 9.5vw, 7.5rem); border-radius: 2px; }
.legal__title { font-size: 1.875rem; font-weight: 400; color: #000; text-align: left; margin: 0 0 2rem; }
.legal__updated { text-align: center; color: var(--text); font-weight: 400; font-size: 1.125rem; margin: 0 0 2.5rem; }
.legal .prose { max-width: none; font-size: 1.125rem; line-height: 1.6; }
/* Live legal body rhythm: paragraphs, sub-headings and list items are all spaced ~a full line apart. */
.legal .prose p { margin-bottom: 1.6em; }
/* Live legal sub-headings are bold body-scale and grey (not black), with a full blank line above and below. */
.legal .prose h2 { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 2.75rem 0 1.5rem; }
.legal .prose h3 { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 2.5rem 0 1.25rem; }
.legal .prose li { margin-bottom: 0.95rem; }

/* ---- Alternating feature rows ---- */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin: 0; }
.feature-row + .feature-row { margin-top: 4rem; }   /* spacing only between stacked rows (multi-row pages) */
.feature-row--reverse .feature-row__media { order: -1; }
.feature-row__media img { border-radius: var(--radius); border: 1px solid var(--line); width: 100%; }
/* Plain rows carry transparent illustrations / screenshots — no frame (per live Services). */
.feature-row--plain .feature-row__media img { border: 0; border-radius: 0; background: transparent; }
/* Italic descriptive section heading (per live Services / Lead Generation). */
.heading-italic { font-style: italic; font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.5625rem); color: #000; margin: 0 0 1.25rem; line-height: 1.25; }   /* live desktop = 41px */

/* Services paired illustration + screenshot blocks (per live). */
.lead-block { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; margin: 0 0 4.5rem; }
.lead-block--rev .lead-block__illus { order: 2; }
.lead-block__illus img { width: 100%; border: 0; }
.lead-block__panel { text-align: center; }
.lead-block__panel .heading-italic { text-align: center; margin-bottom: 1.5rem; }
/* Frameless screenshots (per live — no card border/shadow). */
.lead-block__shot { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
/* Services-specific: bold larger bullets, tighter row gap. (Hero H1 = base 70px, per live.) */
.nav-services .bullet-list { font-size: 1.15rem; }
.nav-services .bullet-list li { font-weight: 700; color: #2b2b2b; }
.feature-row--plain { gap: 1.5rem; align-items: start; }   /* live top-aligns the text column with the illustration */

/* ---- Feature-row sub-heading + circle-check list + text link (per live "Eliminate Your Hurdles") ---- */
.feature-heading { font-size: 23px; font-weight: 700; color: #000; line-height: 1.4; margin: 0 0 1.25rem; }
.icon-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .95rem; }
.icon-list li { position: relative; padding-left: 2.5rem; font-size: 18px; color: var(--text); line-height: 1.5; }
.icon-list li::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12.5l2.5 2.5 5-6'/%3E%3C/svg%3E") no-repeat center / contain; }
.text-link { display: inline-flex; align-items: center; gap: .45rem; color: var(--teal-nav); font-size: 1rem; font-weight: 400; }
.text-link::before { content: "\00BB"; font-weight: 700; color: var(--teal-nav); }
.text-link:hover { color: var(--teal); text-decoration: none; }
.text-link:hover::before { color: var(--teal); }

/* ---- Checklist ---- */
.checklist { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .6rem; }
.checklist li { padding-left: 1.9rem; position: relative; }
.checklist li::before { content: "\2713"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }

/* ---- Pricing ---- */
/* align-items:stretch → all three cards equal length per live, even though their checklists
   differ (10/7/4 items); flex column lets the shorter cards absorb the height difference. */
.pricing { display: grid; gap: 40px; grid-template-columns: repeat(3, 1fr); align-items: stretch; }   /* live: 382px cards, 40px gaps */
.price-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 2.5rem 2.25rem; box-shadow: 0 8px 30px rgba(0,0,0,.06); text-align: center; display: flex; flex-direction: column; }
.price-card__name { font-size: 1.875rem; color: var(--heading); font-weight: 400; margin-bottom: 1rem; }
.price-card__price { font-size: 1.4375rem; color: var(--heading); font-weight: 700; margin: .5rem 0 2.25rem; }
.price-card__price span { font-size: 1.4375rem; font-weight: 700; color: var(--heading); }
/* Live card subtitles are bold BLACK 23px (same weight as the price line), not muted grey. */
.price-card__sub { color: var(--heading); font-weight: 700; font-size: 1.4375rem; margin: .5rem 0 2.25rem; line-height: 1.5; }
.price-card__cta { align-self: center; }
/* Divider under the CTA, before the feature list (per live). */
.price-card .checklist { text-align: left; border-top: 1px solid var(--line); margin-top: 1.75rem; padding-top: 1.75rem; gap: .5rem; }
/* 16px (not the 18px body default) matches live; larger text was wrapping items to 2 lines
   and pushing card bottoms ~30px lower than live. */
.price-card .checklist li { color: var(--text); font-size: 1rem; }

/* Gold contact buttons (Pricing "Let's Work Together" band, per live). */
.btn--gold { background: #f4b83e; color: #fff; border-color: #f4b83e; }
.btn--gold:hover { background: #e0a52c; border-color: #e0a52c; color: #fff; }
.contact-buttons { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; margin-top: 2rem; }

/* ---- Testimonials (teal photo band + white cards, per live) ---- */
/* Live overlay = #006A85 @ .5 over the spikes tile over a #6291A3 base → teal band, faint texture. */
.testimonials { background: linear-gradient(rgba(0,106,133,.5), rgba(0,106,133,.5)), url('/images/spikes.png'); background-color: #6291A3; }
/* Heading stays dark on the band (matches live). */
/* align-items:stretch (default) makes all cards equal height per live; the person
   block is pinned to the card bottom (margin-top:auto) so short & long quotes align. */
.testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; margin: 2.5rem auto 0; max-width: 1000px; }
/* margin:0 resets the UA <figure> default (1em 40px) which was shrinking cards to 237px in their 317px columns. */
.quote-card { background: #fff; border-radius: var(--radius); padding: 2.5rem 2rem 2rem; box-shadow: 0 10px 30px rgba(0,0,0,.12); position: relative; margin: 0; display: flex; flex-direction: column; }
/* Large decorative opening quote mark (per live — dark, not teal). */
.quote-card::before { content: "\201C"; display: block; font-family: Georgia, 'Times New Roman', serif; font-size: 4.5rem; line-height: .8; color: #1f1f1f; margin-bottom: .25rem; }
.quote-card blockquote { margin: 0 0 1.5rem; font-size: 1rem; color: #555; font-style: normal; line-height: 1.6; }
.quote-card__who { display: flex; align-items: center; gap: .85rem; margin-top: auto; }
.quote-card__who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 52px; }
.quote-card__name { font-weight: 700; color: var(--heading); }
.quote-card__title { font-size: .85rem; color: var(--teal-nav); }

/* ---- Experts (centered single quote, avatar below — per live) ---- */
.experts .expert-quote { max-width: 680px; margin: 2rem auto 0; text-align: center; font-style: normal; font-size: 1.25rem; line-height: 1.7; color: #555; }
.expert-who { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin: 2rem 0 0; text-align: center; }
.expert-who img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.expert-who__name { display: block; font-weight: 400; color: var(--text); }   /* live renders the name grey/regular, not bold-black */
.expert-who__title { display: block; font-size: .85rem; color: var(--teal-nav); }

/* ---- Standalone centered demo CTA (home) ---- */
.demo-cta { text-align: center; }
.demo-cta .btn { padding: 15px 44px; }

/* ---- Partner logos ---- */
.logos { display: flex; flex-wrap: wrap; gap: 2.5rem 3rem; align-items: center; justify-content: center; }
.logos img { max-height: 48px; width: auto; filter: grayscale(1); opacity: .7; transition: opacity .2s, filter .2s; }
.logos img:hover { filter: none; opacity: 1; }
/* Tiled 5-col grid of seamless light-grey cells (per live "Broker-Dealers We Work With").
   Live cells are #eaeaea with 35px/55px padding, no gap and no borders — adjacent cells merge
   into one continuous grey block. Each logo is centred in its cell via object-fit:contain. */
/* Full-bleed grey logo band (breaks out of the 1200 container to span the viewport). */
/* 4 columns × 3 rows = a symmetric grid for the 12 logos (no partial trailing row).
   Live uses 5 cols with a ragged final row; 4×3 fills evenly and lets each logo render
   larger (wider cells) while staying a clean grey band. */
.logos--grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 2.5rem; background: #eaeaea;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
/* Full colour (per live) + generous padding so square logos don't balloon —
   object-fit:contain caps every logo to a uniform visual height. Wider 4-col cells → taller
   cell + more h-padding so logos read bigger than the old 6-col grid without overflowing. */
.logos--grid img { width: 100%; height: 190px; max-height: none; object-fit: contain; margin: 0; max-width: none;
  padding: 28px 56px; background: #eaeaea; filter: none; opacity: 1; }   /* taller cell + less v-pad → square logos render bigger */
/* Checkerboard cell tints for the 4-col × 3-row grid: tint (row+col)-even cells so it reads as a true checker.
   Row1 1-4 → 1,3 · Row2 5-8 → 6,8 · Row3 9-12 → 9,11 */
.logos--grid img:nth-child(1), .logos--grid img:nth-child(3),
.logos--grid img:nth-child(6), .logos--grid img:nth-child(8),
.logos--grid img:nth-child(9), .logos--grid img:nth-child(11) { background: #f5f5f5; }

/* ---- About: three centered pillars (Our Software / Our Mission / What We Do) ---- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 1200px; margin: 0 auto; text-align: center; }
.pillar { padding: 0 1.25rem; }
/* Live constrains each pillar's copy to a narrow centred measure (~250px). */
.pillar p { max-width: 250px; margin: 0 auto; }
.pillar__title { font-size: 1.875rem; font-weight: 400; color: var(--heading); margin: 0 0 1rem; }
/* Live pillar divider: short thick teal rule (37px x 5px, #006A85). */
.pillar__title::after { content: ""; display: block; width: 37px; height: 5px; background: #006A85; margin: 1rem auto 0; }
.pillar p { color: var(--text); margin: 0 auto; }

/* ---- Leadership (grayscale photo cards with teal name label, per live) ---- */
.leaders { display: grid; gap: 1.75rem; grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem; }
.leader { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; }
.leader img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: grayscale(1); display: block; }
.leader__label { position: absolute; left: 0; bottom: 45px; background: rgba(98,145,163,.8); color: #fff; padding: .5rem 1rem; }
.leader__name { display: block; font-weight: 700; color: #fff; }
.leader__title { display: block; color: #e4f1f4; font-size: .85rem; }
/* About: History intro ~980px; Leadership intro runs full container width on live. */
.nav-about .section__lead { max-width: 980px; }
.section--leaders .section__lead { max-width: 1160px; }

/* ---- About: "join the team" band (medium teal + spikes texture, gold button, per live) ---- */
/* Live overlay = #006A85 @ .75 over the spikes tile over a #6291A3 base → deeper teal band, faint texture,
   white heading/body legible (the earlier opaque-tile version washed the text out). */
.join-band { background: linear-gradient(rgba(0,106,133,.75), rgba(0,106,133,.75)), url('/images/spikes.png'); background-color: #6291A3; color: #fff; padding: 80px 0; }
.join-band__inner { display: grid; grid-template-columns: 320px auto; justify-content: start; align-items: center; gap: 2.5rem; max-width: 980px; margin: 0 auto; }
.join-band h2 { color: #fff; margin: 0 0 .75rem; }
.join-band p { color: #eaf3f6; margin: 0; max-width: 46ch; }

/* ---- Product showcase (Solutions) ---- */
.showcase { display: block; margin: 0 auto; max-width: 1024px; width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.15); }

/* ---- CTA band (teal) ---- */
.cta-band { background: var(--teal); color: #fff; text-align: center; padding: var(--space-xl) 0; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #e4f1f4; max-width: 560px; margin: 0 auto 1.75rem; }
.cta-band .btn--primary { background: #fff; color: var(--teal); border-color: #fff; }
.cta-band .btn--primary:hover { background: rgba(255,255,255,.88); color: var(--teal); }

/* ---- Contact page (two-column: info + form, per live) ---- */
button.btn { font: inherit; font-size: 0.95rem; }
.contact-layout { display: grid; grid-template-columns: 1fr 1.25fr; gap: 4rem; align-items: start; }
.block-title { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 400; color: #000; margin: 0 0 1.75rem; padding-bottom: 1.5rem; position: relative; }
.block-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 2px; background: #00494E; }
/* Live's left "Get In Touch" column has a longer divider + more gap than the form column. */
.contact-info .block-title { padding-bottom: 2rem; }
.contact-info .block-title::after { width: 130px; }
.contact-address { font-style: normal; display: grid; gap: 1.5rem; margin: 0 0 1.6rem; color: var(--text); }
.contact-email { margin: 0 0 2rem; }
.contact-email a { color: var(--text); }
.contact-email a:hover { color: var(--teal); text-decoration: none; }
.contact-callus { font-weight: 700; color: var(--heading); margin: 0 0 .4rem; }
.contact-phone { font-size: 1.9rem; margin: 0; }
.contact-phone a { color: var(--heading); }
.contact-phone a:hover { color: var(--teal); text-decoration: none; }
.form { max-width: 640px; margin: 0 auto; display: grid; gap: 1.2rem; text-align: left; }
.form--stack { max-width: none; margin: 0; }
.form__row { display: grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; }
/* Contact form submit button — JourneyGuide teal (our brand colour; replaces the live HubSpot coral). */
.btn--submit { background: var(--teal); color: #fff; border-color: var(--teal); border-radius: var(--radius); padding: 10px 24px; font-weight: 700; }
.btn--submit:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }
/* Submit stays visually disabled + unclickable until every required field passes native validation
   (required + type="email" for format + phone pattern). Pure CSS via :has(:invalid) — no JavaScript.
   Browsers without :has() keep the button enabled; the browser's own submit-time validation (and the
   API) are the backstop either way, so this degrades safely. */
.form:has(:invalid) .btn--submit { opacity: .5; cursor: not-allowed; pointer-events: none; }
/* Flag a field red only once the user has left it in an invalid state (e.g. a malformed email),
   not while it's still empty/untouched — :user-invalid keeps the form from screaming on load. */
.field input:user-invalid { border-color: #c0392b; background: #fdf3f2; }
/* Per-field error message: hidden by default, revealed only when the field is invalid AND touched
   (:user-invalid). Zero-JS; the message sits under its input via the .field grid gap. */
.field__error { display: none; font-size: .8rem; line-height: 1.35; color: #c0392b; }
.field input:user-invalid ~ .field__error { display: block; }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 500; color: #33475b; font-size: .9rem; }
.field .req { color: #c0392b; }
/* Filled pale inputs, matching the live HubSpot form. */
.field input { font: inherit; line-height: 1.3; padding: .45rem .85rem; border: 1px solid #cbd6e2; border-radius: var(--radius); background: #f5f8fa; color: var(--heading); width: 100%; }   /* ~40px tall, per live */
.field input:focus-visible { outline: 3px solid var(--teal); outline-offset: 1px; border-color: var(--teal); background: #fff; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__actions { margin-top: .5rem; }
.contact-meta { text-align: center; margin-top: 2.5rem; }
.contact-meta a { font-weight: 700; }
/* Embedded Google map below the form (per live). Section runs 100px top / 50px bottom. */
.section--map { padding: var(--space-xl) 0 50px; }
.contact-map { width: 100%; height: 483px; border: 0; display: block; }

/* ---- Footer (teal, per live) ---- */
.site-footer { background: var(--teal); color: #6291A3; margin-top: 0; }
/* 4 equal columns (per live): brand | Quick Links | Important Links | LinkedIn badge. */
.site-footer__inner { display: grid; gap: 1rem 0; grid-template-columns: repeat(4, 1fr); align-items: start; padding: 2rem 1.25rem 1.5rem; }
/* Gold LinkedIn badge, right-aligned in the 4th column (per live). */
.site-footer__social { justify-self: end; width: 35px; height: 35px; border-radius: 50%; background: #f4b83e; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; line-height: 1; text-decoration: none; }
.site-footer__social:hover { background: #e0a52c; text-decoration: none; }
.site-footer__brand img { width: 228px; margin-bottom: 1rem; }
.site-footer__tagline { color: #dfeef2; max-width: 32ch; }
/* Column headings: Lato 19px/700 white (per live). */
.site-footer__heading { font-size: 1.1875rem; text-transform: none; letter-spacing: normal; color: #fff; margin: 0 0 0.9rem; font-weight: 700; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }   /* live pitch = line-height only (~22px) */
/* Links: 14px, colour lightened from live's #6291A3 to #d7e8ed for WCAG AA (keeps Lighthouse a11y=100). */
.site-footer__col a { color: #d7e8ed; font-size: 0.875rem; line-height: 1.6; }
/* Leading "›" chevron marker on every footer link. */
.site-footer__col a::before { content: "\203A"; margin-right: .5rem; font-weight: 700; }
.site-footer__col a:hover { color: #fff; }
/* Copyright bar: white 14px, taller padding, seamless (no divider) — per live bottom section. */
.site-footer__legal { padding: 0.9rem 1.25rem; font-size: 0.875rem; color: #fff; }

/* ---- Entrance animations (zero-JS; CSS scroll-driven, degrades gracefully) ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero p, .hero__actions { opacity: 0; animation: jgFadeUp .7s ease forwards; }
  .hero p { animation-delay: .12s; }
  .hero__actions { animation-delay: .24s; }
  @supports (animation-timeline: view()) {
    /* Scroll reveal = translate only (NO opacity): below-fold content stays fully visible/accessible,
       so it never trips the contrast audit the way opacity:0 pre-entry state does. */
    .card, .feature-row, .quote-card, .price-card, .leader, .logos img, .section > .container > .section__title {
      animation: jgRise linear both; animation-timeline: view(); animation-range: entry 0% cover 20%;
    }
    /* Hero content already fades in on load — don't put it under the scroll timeline. */
    .hero h1, .hero p, .hero__actions { animation-timeline: auto; }
  }
}
@keyframes jgFadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes jgRise { from { transform: translateY(30px); } to { transform: none; } }

/* ---- Responsive ---- */
/* ---- Tablet (<=900px): hamburger nav + small-screen chrome, but KEEP multi-column content
   layouts (live's Elementor tablet). Grids only fold to one column at the phone bp (<=767px).
   Exceptions that live ALSO stacks at tablet stay here: pricing cards, the home hero video,
   the "Eliminate Your Hurdles" row, and the About join band. ---- */
@media (max-width: 900px) {
  .site-header__inner { padding: 0 1.25rem; }
  .nav-toggle { display: block; position: absolute; top: 28px; right: 1.25rem; width: 44px; height: 34px; margin: 0; padding: 0; opacity: 0; z-index: 3; cursor: pointer; }
  .nav-toggle__btn { display: flex; }
  .nav-toggle:focus-visible ~ .nav-toggle__btn { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 3px; }
  .site-nav { position: absolute; top: var(--header-h); left: 0; right: 0; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 10px 16px rgba(0,0,0,.08);
    max-height: 0; visibility: hidden; overflow: hidden; transition: max-height .25s ease, visibility .25s ease; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 1.25rem; }
  .site-nav__list li { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
  .site-nav__list li:last-child { border-bottom: none; padding-top: 1rem; }
  .nav-toggle:checked ~ .site-nav { max-height: 560px; visibility: visible; }
  .hero__feature { margin-top: 3rem; }
  /* Interior banner heroes are compact on small screens (live), not the fixed desktop 150px. */
  .hero--banner { padding: 90px 0; }
  .section--pricing { padding: 80px 0; }
  /* Testimonials: 3 -> 2 columns at tablet (live shows 2-up here); 1 column at phone below. */
  .testimonials__grid { grid-template-columns: repeat(2, 1fr); }
  /* Logo band keeps 4 cols at tablet (live ~4-up); tighten cells so wide logos aren't squeezed. */
  .logos--grid img { height: 132px; padding: 30px 34px; }
  /* Footer: brand on its own full-width row; two link columns + LinkedIn badge share the next row (live). */
  .site-footer__inner { grid-template-columns: 1fr 1fr auto; }
  .site-footer__brand { grid-column: 1 / -1; }
  /* Legal card: shrink desktop-scale padding/font on tablet (live Astra responsive typography). */
  .legal { padding: 1.75rem 1rem 2.5rem; }
  .legal__card { padding: 2.75rem 2.5rem; }
  .legal .prose { font-size: 1rem; }
  /* Home "Eliminate Your Hurdles" stacks at tablet (live), with the screenshot capped & centered. */
  .section--hurdles .feature-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .section--hurdles .feature-row__media img { max-width: 520px; margin: 0 auto; }
  /* Pricing cards stack at tablet on live too. */
  .pricing { grid-template-columns: 1fr; }
  /* Services lead-blocks stack at tablet on live, but with SMALL centered media and tight spacing
     (live tablet ≈3000px). Cap media and trim the between-block margin so we don't run ~40% taller. */
  .lead-block { grid-template-columns: 1fr; gap: .5rem; margin-bottom: 2rem; }
  .lead-block__illus img { max-width: 250px; margin-left: auto; margin-right: auto; }
  .lead-block__shot { max-width: 420px; margin-left: auto; margin-right: auto; }
}
/* ---- Phone (<=767px): live's Elementor mobile breakpoint — content grids fold to one column. ---- */
@media (max-width: 767px) {
  .feature-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .feature-row--reverse .feature-row__media { order: 0; }
  .feature-row__media img { max-width: 520px; margin: 0 auto; }
  .commitment-grid { grid-template-columns: 1fr; gap: 2rem; }
  /* Commitment items center (icon above heading) on phone, per live. */
  .commitment-item { flex-direction: column; align-items: center; text-align: center; }
  .commitment-item__icon { margin: 0 auto; }
  .testimonials__grid { grid-template-columns: 1fr; }
  /* Single-column logo band on phone (live) — full-width cells keep logos large; clean alternating stripe. */
  .logos--grid { grid-template-columns: 1fr; }
  .logos--grid img { height: 120px; padding: 26px 40px; }
  .logos--grid img:nth-child(odd)  { background: #f5f5f5; }
  .logos--grid img:nth-child(even) { background: #eaeaea; }
  .solution-row { grid-template-columns: 1fr; gap: .75rem; padding: 2.25rem 0; }
  .pillars { grid-template-columns: 1fr; gap: 2.5rem; }
  .leaders { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  /* About "Interested in joining" band: 2-col at tablet (live), stacks/centers only at phone. */
  .join-band__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  /* No .lead-block--rev order override: DOM order puts the panel on top when stacked, matching live. */
}
@media (max-width: 520px) {
  .form__row { grid-template-columns: 1fr; }
  .hero--banner { padding: 60px 0; }
  .section--pricing { padding: 50px 0; }
  .price-card__name { font-size: 1.5rem; }   /* keep pricing card names on one line, per live */
  .legal__card { padding: 2rem 1.25rem; }
  .legal .prose { font-size: 0.95rem; }
  .legal__title { font-size: 1.6rem; }
}