:root {
  --ink: #101418;
  --ink-soft: #242a31;
  --muted: #69727d;
  --paper: #f6f8f9;
  --paper-alt: #eef5f4;
  --white: #ffffff;
  --night: #07090d;
  --accent: #81d8d0;
  --accent-dark: #1d7a72; /* text-safe teal: 4.71:1 on white (AA). #21877e was 4.35:1, just under. */
  --blue: #2f8fca;
  --green: #1d7a72; /* was #21877e — same value as --accent-dark; kept in step for AA contrast. */
  --gold: #d5a642;
  --line: rgba(16, 20, 24, 0.1);
  --shadow: 0 22px 54px rgba(15, 23, 42, 0.13);
  --soft-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
  --radius: 8px;
  --container: min(1160px, calc(100vw - 40px));
  --font-heading: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Bebas Neue", "Haettenschweiler", "Impact", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--paper); letter-spacing: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { color: var(--muted); font-size: clamp(1rem, 1.1vw, 1.08rem); line-height: 1.66; }
h1, h2, h3 { margin: 0; font-family: var(--font-heading); text-wrap: balance; }
h1 { max-width: 690px; font-size: clamp(2.85rem, 4.4vw, 4.2rem) !important; line-height: 1.04; font-weight: 760; letter-spacing: -0.028em; }
h2 { font-size: clamp(2.15rem, 4.5vw, 4.25rem) !important; line-height: 1.1; font-weight: 720; letter-spacing: -0.024em; }
h3 { font-size: clamp(1.22rem, 1.55vw, 1.55rem); line-height: 1.22; font-weight: 700; letter-spacing: -0.012em; }
.container { width: var(--container); margin: 0 auto; }

/* wpautop wraps raw-HTML page content in stray paragraphs: bare <p></p> and a
   <p> around the trailing JSON-LD <script>. They render at zero height but keep
   a 16px bottom margin. The last one sat between the final dark section and the
   footer and painted a visible strip there. Zero them at the source. */
#site-content p:empty,
#site-content p:has(> script:only-child) { margin: 0; }

/* Belt and braces: keep any remaining descendant margin from collapsing out
   through <main> and pushing the footer away from the content. */
#site-content, main.flex-1 { display: flow-root; }

/* The fixed header is cleared with padding-top on #site-content. That padding
   had no background, so the body tint showed as a pale band between the nav and
   the page. The body colour is only ever a fallback, never a designed surface. */
#site-content { background: var(--white); }
.screen-reader-text, .skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip-link:focus { z-index: 1000; top: 12px; left: 12px; width: auto; height: auto; padding: 12px 16px; clip: auto; border-radius: var(--radius); background: var(--white); }
.eyebrow { margin: 0 0 16px; color: var(--accent-dark); font-size: 0.74rem; font-weight: 780; line-height: 1; text-transform: uppercase; }
.button, button { border: 0; border-radius: 999px; cursor: pointer; font: inherit; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 22px; font-size: 0.94rem; font-weight: 720; transition: transform 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease; }
.button:hover { transform: translateY(-1px); }
.button--light { color: var(--ink); background: rgba(255, 255, 255, 0.94); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16); backdrop-filter: blur(18px); }
.button--ghost { color: var(--white); border: 1px solid rgba(255, 255, 255, 0.36); background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(18px); }
.button--dark { color: var(--white); background: var(--ink); }
.button--dark:hover { background: var(--ink-soft); }

/* Trust band: who writes the blog. An agent blog converts on credibility, and
   the homepage previously carried no name, licence or proof of any kind. */
.trust-band { padding: clamp(70px, 8vw, 116px) 0; background: var(--white); }
/* No photograph here on purpose: a stock image weakened the section, and there
   is no team shot yet. The credentials carry it instead. Same two-column lead
   as .intro-band__grid so the page keeps one layout grammar. */
.trust-band__inner { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(290px, 0.92fr); gap: clamp(30px, 5vw, 76px); align-items: start; }
.trust-band__lead h2 { font-size: clamp(2rem, 3.1vw, 3.05rem) !important; }
.trust-band__body > p { margin: 0; color: #2f3742; font-size: clamp(1.04rem, 1.25vw, 1.15rem); line-height: 1.7; }

/* Credential strip: one rule across the full container, dividers between. */
.trust-band__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: clamp(44px, 5vw, 68px) 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.trust-band__facts li { display: grid; gap: 5px; padding: 26px 30px 0; border-left: 1px solid var(--line); }
.trust-band__facts li:first-child { padding-left: 0; border-left: 0; }
.trust-band__facts strong { color: var(--ink); font-family: var(--font-heading); font-size: clamp(1.15rem, 1.5vw, 1.42rem); font-weight: 720; letter-spacing: -0.018em; }
.trust-band__facts span { color: var(--muted); font-size: 0.84rem; font-weight: 600; line-height: 1.4; }
@media (max-width: 860px) {
  .trust-band__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-band__facts li { padding: 22px 18px 0; }
  .trust-band__facts li:nth-child(odd) { padding-left: 0; border-left: 0; }
}
.trust-band__actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 30px; }
@media (max-width: 860px) {
  .trust-band__grid { grid-template-columns: 1fr; }
  .trust-band__media { order: 2; }
}
.text-link { display: inline-flex; align-items: center; color: var(--accent-dark); font-size: 0.96rem; font-weight: 720; }
.text-link::after { content: ">"; margin-left: 7px; transition: transform 180ms ease; }
.text-link:hover::after { transform: translateX(3px); }
.site-header { position: fixed; z-index: 50; top: 0; right: 0; left: 0; color: var(--white); background: transparent; transition: background 240ms ease, color 240ms ease, border-color 240ms ease, box-shadow 240ms ease; }
.admin-bar .site-header { top: 32px; }
.site-header.is-scrolled, body:not(.home) .site-header { color: var(--ink); border-bottom: 1px solid rgba(17, 19, 22, 0.08); background: rgba(255, 255, 255, 0.92); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); backdrop-filter: blur(22px); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; width: min(1240px, calc(100vw - 32px)); height: 88px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.brand--logo { position: relative; display: block; width: 170px; height: 76px; padding: 6px 0; overflow: visible; background: transparent; box-shadow: none; }
.brand__logo { position: absolute; top: 50%; left: 0; width: 170px !important; height: auto !important; max-width: 170px !important; object-fit: contain !important; object-position: left center !important; transform: translateY(-50%); transition: opacity 240ms ease, filter 240ms ease; }
.brand__logo--white { opacity: 1; }
.brand__logo--color { opacity: 0; }
.site-header.is-scrolled .brand__logo--color, body:not(.home) .brand__logo--color { opacity: 1; }
.site-header.is-scrolled .brand__logo--white, body:not(.home) .brand__logo--white { opacity: 0; }
.primary-nav { display: flex; align-items: center; gap: 18px; }
.primary-nav__list, .footer-nav__list { display: flex; gap: 22px; padding: 0; margin: 0; list-style: none; }
.primary-nav a { font-size: 0.88rem; line-height: 1; font-weight: 690; opacity: 0.92; }
.primary-nav a:hover { opacity: 1; }
.nav-main-site { display: inline-flex; min-height: 36px; align-items: center; padding: 0 15px; border-radius: 999px; color: var(--ink); background: var(--accent); box-shadow: 0 12px 30px rgba(129, 216, 208, 0.26); }
.site-header.is-scrolled .nav-main-site, body:not(.home) .nav-main-site { color: var(--white); background: var(--ink); box-shadow: none; }
.nav-toggle { display: none; width: 42px; height: 42px; color: var(--white); background: rgba(255, 255, 255, 0.18); }
.nav-toggle span:not(.screen-reader-text) { display: block; width: 18px; height: 2px; margin: 4px auto; background: currentColor; }
.hero { position: relative; display: grid; min-height: 88vh; overflow: hidden; color: var(--white); background: var(--night); }
/* Hero slides crossfade through the three markets named in the h1. The parallax
   transform now lives on the wrapper so all three slides move together. */
.hero__media { position: absolute; inset: 0; overflow: hidden; transform-origin: center; will-change: transform; }
.hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 54%; opacity: 0; transition: opacity 1200ms ease; }
.hero__image.is-active { opacity: 1; }
/* The teal radial that used to sit here washed the top-right of the hero blue.
   Removed — the photography carries the colour now. */
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.26) 48%, rgba(0, 0, 0, 0.1)), linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.52)); }
.hero__content { position: relative; z-index: 1; align-self: end; padding: 0 0 10vh; }
.hero__content p:not(.eyebrow) { max-width: 620px; margin: 22px 0 28px; color: rgba(255, 255, 255, 0.84); font-size: clamp(1.08rem, 1.45vw, 1.32rem); line-height: 1.56; }
.hero__content .eyebrow { color: rgba(255, 255, 255, 0.78); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__notes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.hero__notes span.is-active { border-color: rgba(129, 216, 208, 0.85); color: #0d1418; background: var(--accent); }
.hero__notes span { transition: color 420ms ease, background 420ms ease, border-color 420ms ease; min-height: 30px; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; color: rgba(255, 255, 255, 0.74); background: rgba(255, 255, 255, 0.07); font-size: 0.82rem; font-weight: 650; backdrop-filter: blur(14px); }
.hero__next { position: absolute; z-index: 2; right: 28px; bottom: 24px; color: rgba(255, 255, 255, 0.74); font-size: 0.84rem; font-weight: 700; }
.intro-band, .explore-feature, .post-grid-section, .footer-cta, .compact-band, .category-hero { padding: clamp(70px, 8vw, 116px) 0; }
.intro-band { background: var(--white); }
.intro-band__grid, .footer-cta__inner, .category-hero__inner, .section-heading { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(290px, 0.92fr); gap: clamp(30px, 5vw, 76px); align-items: center; }
.intro-copy p { max-width: 620px; margin: 0; font-size: clamp(1.08rem, 1.42vw, 1.3rem); }
.intro-points { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.intro-points span { padding: 8px 11px; border: 1px solid rgba(33, 135, 126, 0.18); border-radius: 999px; color: var(--ink-soft); background: rgba(129, 216, 208, 0.13); font-size: 0.82rem; font-weight: 700; }
.explore-feature { background: linear-gradient(180deg, var(--paper-alt), #f7faf9); }
.area-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.area-card { position: relative; display: flex !important; min-height: 228px; flex-direction: column; justify-content: flex-end; padding: 24px; border: 1px solid rgba(31, 138, 112, 0.14); border-radius: var(--radius); overflow: hidden; background: rgba(255, 255, 255, 0.84); box-shadow: var(--soft-shadow); transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease, border-color 220ms ease; }
.area-card:hover { transform: translateY(-5px); border-color: rgba(31, 138, 112, 0.26); background: var(--white); box-shadow: var(--shadow); }
.area-card--wide { grid-column: span 2; min-height: 310px; }
.area-card--image { color: var(--white); background: var(--night); border: 0; }
.area-card--image img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 650ms ease, filter 650ms ease; }
.area-card--image::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6, 12, 18, 0.04), rgba(6, 12, 18, 0.78)); }
.area-card--image:hover img { transform: scale(1.045); filter: saturate(1.04); }
.area-card span, .area-card strong, .area-card p { position: relative; z-index: 2; }
.area-card span { margin-bottom: 12px; color: var(--green); font-size: 0.72rem; font-weight: 780; text-transform: uppercase; }
.area-card--image span, .area-card--image strong, .area-card--image p { color: var(--white); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.42); }
.area-card strong { color: var(--ink); font-size: clamp(1.34rem, 2vw, 1.95rem); line-height: 1.04; }
.area-card p { margin: 12px 0 0; font-size: 0.94rem; line-height: 1.52; }
.area-card--quiet::after { content: ""; position: absolute; top: 18px; right: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); opacity: 0.8; }
.post-grid-section { background: var(--paper); }
.section-heading { margin-bottom: 34px; align-items: end; }
.section-heading .text-link { justify-self: end; }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.post-card { overflow: hidden; border: 1px solid rgba(17, 19, 22, 0.08); border-radius: var(--radius); background: var(--white); box-shadow: var(--soft-shadow); transition: transform 220ms ease, box-shadow 220ms ease; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.post-card__image { display: block; aspect-ratio: 1.48; overflow: hidden; background: #dbe7ee; }
.post-card__image img, .placeholder-image { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.post-card:hover .post-card__image img { transform: scale(1.035); }
.placeholder-image { background-image: url("https://blog.floridahomesgroup.com/wp-content/uploads/2026/02/Orlando-Downtown-Real-Estate-HM.jpg"); background-position: center; background-size: cover; }
.post-card__body { padding: 24px; }
.post-card__meta, .post-hero__meta { display: flex; gap: 10px; align-items: center; margin: 0 0 13px; color: var(--muted); font-size: 0.8rem; font-weight: 700; }
.post-card h3 { margin-bottom: 12px; }
.post-card p:not(.post-card__meta) { margin: 0 0 18px; font-size: 0.98rem; }
/* Cards in a row have different excerpt lengths, so "Read story" was landing at
   three different heights. Make the card a column and push the link to the
   bottom so the CTAs align across the row. */
.post-card { display: flex; flex-direction: column; }
.post-card__body { display: flex; flex: 1; flex-direction: column; }
.post-card__body .text-link { margin-top: auto; }
.footer-cta { color: var(--white); background: #101419; }
.footer-cta p, .footer-cta .eyebrow { color: rgba(255, 255, 255, 0.7); }
.subscribe-form { display: flex; gap: 10px; }
.subscribe-form input, .footer-search input { width: 100%; min-height: 46px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; padding: 0 16px; color: inherit; background: rgba(255, 255, 255, 0.08); font: inherit; }
.subscribe-form button, .footer-search button { min-height: 46px; padding: 0 18px; color: var(--white); background: var(--blue); font-weight: 700; }
.subscribe-form--link { justify-content: flex-end; }
.subscribe-button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; border-radius: 999px; padding: 0 24px; color: #101419; background: var(--accent); font-weight: 760; text-decoration: none; box-shadow: 0 14px 32px rgba(129, 216, 208, 0.22); }
.site-footer { color: rgba(255, 255, 255, 0.76); background: var(--night); }
.site-footer__inner { display: grid; grid-template-columns: minmax(230px, 1.15fr) 0.7fr 0.8fr minmax(250px, 0.9fr); gap: 32px; width: var(--container); margin: 0 auto; padding: 54px 0; }
.brand--footer { position: relative; display: block; width: 230px; height: 54px; margin-bottom: 16px; background: transparent; box-shadow: none; }
.brand--footer .brand__logo { height: 50px !important; max-width: 230px !important; }
.site-footer p, .site-footer label { color: rgba(255, 255, 255, 0.62); font-size: 0.92rem; }
.footer-nav h2 { margin: 0 0 14px; color: var(--white); font-size: 0.82rem !important; line-height: 1.1 !important; text-transform: uppercase; }
.footer-nav__list { flex-direction: column; gap: 12px; }
.footer-nav a { color: rgba(255, 255, 255, 0.72); font-size: 0.98rem; }
.footer-nav a:hover { color: var(--white); }
.footer-search div { display: flex; gap: 8px; margin-top: 10px; }
.site-footer__bottom { width: var(--container); margin: 0 auto; padding: 18px 0 32px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.compact-band, .category-hero { padding-top: 130px; background: var(--white); }
.compact-band h1, .category-hero h1 { max-width: 760px; color: var(--ink); font-size: clamp(2.8rem, 5vw, 4.6rem) !important; }
.archive-description { max-width: 680px; }
.category-hero__panel { padding: 26px; border-radius: var(--radius); background: #eef5f8; }
.category-hero__panel span { display: block; margin-bottom: 8px; color: var(--blue); font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 750; }
.post-hero { position: relative; min-height: 64vh; color: var(--white); background: var(--night); }
.post-hero__media { position: absolute; inset: 0; }
.post-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.post-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.68)); }
.post-hero__content { position: relative; display: grid; min-height: 64vh; align-items: end; padding: 130px 0 70px; }
.post-hero h1 { max-width: 840px; font-size: clamp(2.8rem, 5vw, 5rem) !important; }
.post-hero__meta, .post-hero .eyebrow { color: rgba(255, 255, 255, 0.76); }
.article-wrap { padding: clamp(56px, 8vw, 96px) 0; background: var(--white); }
.article-content { width: min(680px, calc(100vw - 40px)); margin: 0 auto; }
.article-content > * { margin-top: 0; margin-bottom: 1.35em; }
.article-content p, .article-content li { color: #2f3742; font-size: clamp(1.08rem, 1.5vw, 1.22rem); line-height: 1.78; }
/* Headings bind to the section they introduce: generous space above, tight below.
   Equal margins on both sides give the reader no grouping signal. */
.article-content h2 { margin-top: 1.75em; margin-bottom: 0.44em; font-size: clamp(2rem, 3vw, 3rem) !important; line-height: 1.14; }
.article-content h3 { margin-top: 2.1em; margin-bottom: 0.55em; }
.article-content > h2:first-child, .article-content > h3:first-child { margin-top: 0; }
.article-content ul, .article-content ol { padding-left: 1.15em; }
.article-content li + li { margin-top: 0.55em; }
/* The n8n post pipeline hard-codes the brand teal as a TEXT colour: #81d8d0 on
   white is ~1.8:1, which fails WCAG AA badly and is near-invisible to many
   readers — including on the "reach out" CTA link. Until the pipeline emits
   --accent-dark instead, correct it here. Scoped to text-bearing elements so
   teal BACKGROUNDS (buttons, callout fills) are left untouched. */
.article-content h2[style*="color:#81d8d0" i],
.article-content h3[style*="color:#81d8d0" i],
.article-content h4[style*="color:#81d8d0" i],
.article-content strong[style*="color:#81d8d0" i],
.article-content a[style*="color:#81d8d0" i] { color: var(--accent-dark) !important; }

/* Full/wide-aligned blocks (cover images, galleries) are authored to break out of
   the text measure, but inside the 680px article column they were trapped at
   column width. Let them expand to the page container. Bounded rather than 100vw
   so a scrollbar can never produce horizontal overflow. */
.article-content > .alignfull,
.article-content > .alignwide {
  width: min(1100px, calc(100vw - 40px));
  max-width: none;
  margin-left: 50%;
  translate: -50% 0;
}

/* ---------- Blog index (page-florida-homes-group-blogs.php) ----------
   Editorial layout: one lead story, a pair, then the archive grid. Hierarchy
   does the work rather than chrome, so cards carry no borders or shadows. */
.ed { background: var(--white); }
/* Deliberately small. #site-content already carries a 120px padding-top to clear
   the 93px fixed header, so anything generous here stacks on top of that and the
   masthead ends up ~117px below the nav. This keeps the visible gap around 55px. */
.ed-masthead { padding: clamp(16px, 2.2vw, 32px) 0 0; }
.ed-masthead h1 { max-width: 16ch; font-size: clamp(2.8rem, 6vw, 5.4rem) !important; line-height: 0.98; font-weight: 760; letter-spacing: -0.035em; }
/* Named .ed-lede, not .ed-sub: .ed-sub is the secondary story card, and the
   collision was applying this max-width and font-size to those articles. */
.ed-lede { max-width: 58ch; margin: 30px 0 0; color: #2f3742; font-size: clamp(1.05rem, 1.3vw, 1.22rem); line-height: 1.6; }

/* Two axes, each short. A single flat list mixed places with intent. */
.ed-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); margin-top: clamp(38px, 4vw, 58px); padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.ed-topics__label { margin: 0 0 14px; color: var(--muted); font-size: 0.72rem; font-weight: 780; letter-spacing: 0.14em; text-transform: uppercase; }
.ed-topics__list { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ed-topics__list a { display: inline-flex; align-items: baseline; gap: 5px; color: var(--ink); font-size: 1rem; font-weight: 680; letter-spacing: -0.012em; border-bottom: 2px solid transparent; transition: border-color 200ms ease; }
.ed-topics__list a:hover { border-bottom-color: var(--ink); }
.ed-topics__list span { color: var(--muted); font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.ed-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0; color: var(--muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ed-cat { color: var(--accent-dark); }
.ed-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.45; }

.ed-lead { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(44px, 5vw, 76px) 0 clamp(40px, 4vw, 64px); border-bottom: 1px solid var(--line); }
.ed-lead__media { display: block; overflow: hidden; border-radius: 10px; background: var(--paper); }
/* height:auto is required, not optional. WordPress prints height="1024" on the
   img, which is a presentational hint; without overriding it the browser uses
   that fixed height and ignores aspect-ratio entirely, so cards rendered over
   1000px tall. Same applies to .ed-sub and .ed-item below. */
.ed-lead__media img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 700ms ease; }
.ed-lead:hover .ed-lead__media img { transform: scale(1.03); }
.ed-lead h2 { margin: 14px 0 0; font-size: clamp(1.9rem, 3.1vw, 3rem) !important; line-height: 1.08; letter-spacing: -0.028em; }
.ed-standfirst { margin: 16px 0 0; color: #2f3742; font-size: 1.04rem; line-height: 1.65; }
.ed-readmore { display: inline-block; margin-top: 22px; color: var(--accent-dark); font-size: 0.95rem; font-weight: 720; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

.ed-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); padding: clamp(40px, 4vw, 64px) 0; border-bottom: 1px solid var(--line); }
.ed-sub__media { display: block; overflow: hidden; border-radius: 10px; background: var(--paper); margin-bottom: 16px; }
.ed-sub__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 700ms ease; }
.ed-sub:hover .ed-sub__media img { transform: scale(1.03); }
.ed-sub h3 { margin: 12px 0 0; font-size: clamp(1.25rem, 1.8vw, 1.62rem); line-height: 1.18; font-weight: 730; letter-spacing: -0.018em; }

.ed-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 2.6vw, 40px) clamp(20px, 2.4vw, 34px); padding: clamp(44px, 5vw, 72px) 0 0; }
.ed-item__media { display: block; overflow: hidden; border-radius: 8px; background: var(--paper); margin-bottom: 14px; }
.ed-item__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 700ms ease; }
.ed-item:hover .ed-item__media img { transform: scale(1.04); }
.ed-item h3 { margin: 10px 0 0; font-size: 1.02rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.012em; }

.ed-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: clamp(48px, 5vw, 76px) 0 0; }
.ed-pager__link { color: var(--ink); font-size: 0.96rem; font-weight: 720; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.ed-pager__link[rel="next"] { justify-self: end; }
.ed-pager__count { margin: 0; color: var(--muted); font-size: 0.84rem; font-weight: 650; text-align: center; }

/* The page's guide copy. These rules were inline in the page content next to
   5KB of CSS for the old client-side listing; re-homed here so the page keeps
   only its prose and the stylesheet stays cacheable. */
.ed-guide { padding: clamp(56px, 6vw, 96px) 0 clamp(60px, 7vw, 110px); border-top: 1px solid var(--line); }
.ed-guide .fhgb-copy { width: min(720px, calc(100vw - 40px)); margin: 0 auto; }
.ed-guide .fhgb-copy h2 { color: var(--ink); font-size: clamp(1.6rem, 2.5vw, 2.1rem) !important; font-weight: 740; line-height: 1.25; margin: 0 0 0.6em; }
.ed-guide .fhgb-copy h3 { color: var(--ink); font-size: 1.2rem; font-weight: 740; margin: 1.6em 0 0.6em; }
.ed-guide .fhgb-copy p { color: #2f3742; font-size: 1.05rem; line-height: 1.75; margin: 0 0 1.1em; }
.ed-guide .fhgb-copy a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 1000px) {
  .ed-lead, .ed-pair { grid-template-columns: 1fr; }
  .ed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .ed-topics { grid-template-columns: 1fr; }
  .ed-grid { grid-template-columns: 1fr; }
  .ed-pager { grid-template-columns: 1fr; justify-items: start; }
  .ed-pager__link[rel="next"] { justify-self: start; }
}

/* ---------- Market Updates hub (/market-updates/) ----------
   The markup is generated by the "Weekly Market Update" n8n workflow, which
   emits classes only. All styling lives here on purpose: it means the page can
   be redesigned without touching the automation, and the automation can rewrite
   the data without touching the design. Do not move these rules inline. */
.mkt-hub { width: min(1400px, calc(100vw - 40px)); max-width: none; margin-left: 50%; translate: -50% 0; }
/* The hero headline is the page's real title, so suppress the template's
   "Market Updates" h1 above it rather than running two competing headings. */
.article-wrap:has(.mkt-hub) .page-title { display: none; }
.mkt-hub > * { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }

.mkt-tick { width: 100%; overflow: hidden; background: var(--night); color: #fff; border-radius: var(--radius); }
.mkt-tick__track { display: flex; width: max-content; animation: mkt-scroll 44s linear infinite; }
.mkt-tick:hover .mkt-tick__track { animation-play-state: paused; }
.mkt-tick__lead { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 11px 24px; color: var(--accent); font-size: 0.7rem; font-weight: 780; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.mkt-tick__lead i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(129, 216, 208, 0.25); }
.mkt-tick__item { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; padding: 11px 24px; border-left: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.78rem; white-space: nowrap; }
.mkt-tick__item b { font-weight: 720; }
.mkt-tick__item em { font-style: normal; color: var(--accent); font-weight: 700; }
.mkt-tick__item i { font-style: normal; color: rgba(255, 255, 255, 0.55); }
@keyframes mkt-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mkt-tick__track { animation: none; } }

.mkt-hero { padding: clamp(40px, 5vw, 68px) 0 clamp(24px, 3vw, 36px); text-align: center; }
.mkt-hero__eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 22px; color: var(--accent-dark); font-size: 0.72rem; font-weight: 780; letter-spacing: 0.16em; text-transform: uppercase; }
.mkt-hero__eyebrow::before, .mkt-hero__eyebrow::after { content: ""; width: 32px; height: 1px; background: currentColor; opacity: 0.45; }
.mkt-hero__title { margin: 0 auto; max-width: 17ch; font-size: clamp(2.2rem, 4.4vw, 3.7rem) !important; line-height: 1.04; font-weight: 760; letter-spacing: -0.03em; }
.mkt-hero__sub { max-width: 62ch; margin: 22px auto 0; color: var(--ink-soft); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.62; }

.mkt-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--soft-shadow); overflow: hidden; }
.mkt-kpi { padding: clamp(20px, 2.4vw, 30px); border-left: 1px solid var(--line); }
.mkt-kpi:first-child { border-left: 0; }
.mkt-kpi__value { display: block; font-family: var(--font-display); font-size: clamp(2.4rem, 3.8vw, 3.4rem); line-height: 0.9; font-variant-numeric: tabular-nums; }
.mkt-kpi__value small { font-size: 0.34em; letter-spacing: 0.06em; color: var(--accent-dark); margin-left: 6px; }
.mkt-kpi__label { display: block; margin-top: 14px; color: var(--muted); font-size: 0.84rem; line-height: 1.45; }
.mkt-stamp { margin: 18px auto 0; text-align: center; color: var(--muted); font-size: 0.72rem; font-weight: 750; letter-spacing: 0.13em; text-transform: uppercase; }

.mkt-quote { padding: clamp(44px, 5vw, 74px) 0; }
/* Specificity has to beat .article-content blockquote, which sets margin: 2em 0
   and was pinning this to the left edge instead of centring it. */
.mkt-hub .mkt-quote blockquote { margin: 0 auto !important; max-width: 34ch; padding-left: 22px; border-left: 3px solid var(--accent); font-size: clamp(1.35rem, 2.2vw, 1.95rem); line-height: 1.28; font-weight: 730; letter-spacing: -0.022em; }
.mkt-quote__note { max-width: 68ch; margin: 26px auto 0; text-align: center; color: var(--muted); font-size: 0.75rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.75; }

.mkt-group { width: 100% !important; padding: clamp(40px, 5vw, 70px) clamp(24px, 3vw, 48px); border-radius: var(--radius); background: var(--night); color: #fff; }
.mkt-group__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 22px; margin-bottom: clamp(22px, 3vw, 32px); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.mkt-group__title { margin: 0; font-size: clamp(1.6rem, 2.5vw, 2.3rem) !important; font-weight: 740; letter-spacing: -0.026em; }
.mkt-group__meta { color: var(--accent); font-size: 0.74rem; font-weight: 780; letter-spacing: 0.11em; text-transform: uppercase; }
.mkt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.mkt-card { display: flex; flex-direction: column; padding: clamp(20px, 2.4vw, 28px); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius); background: rgba(255, 255, 255, 0.04); transition: background 240ms ease, transform 240ms ease, border-color 240ms ease; }
.mkt-card:hover { background: rgba(255, 255, 255, 0.075); border-color: rgba(255, 255, 255, 0.28); transform: translateY(-4px); }
.mkt-card__chip { display: inline-flex; align-items: center; gap: 7px; font-size: 0.7rem; font-weight: 780; letter-spacing: 0.1em; text-transform: uppercase; }
.mkt-card__chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mkt-card--balanced .mkt-card__chip { color: var(--accent); }
.mkt-card--seller .mkt-card__chip { color: var(--gold); }
.mkt-card--buyer .mkt-card__chip { color: #6fb2e8; }
/* Cards use inline elements throughout, not <h3>/<p>/<div>. Block elements
   inside an <a> are what wpautop latches onto; spans made display:block are
   equivalent visually and survive any future filter. */
.mkt-card__name { display: block; margin: 14px 0 0; font-family: var(--font-heading); font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.15; font-weight: 740; letter-spacing: -0.024em; }
.mkt-card__sub { display: block; margin: 8px 0 0; color: rgba(255, 255, 255, 0.58); font-size: 0.85rem; line-height: 1.5; }
.mkt-card__cell { display: block; }
.mkt-card__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.mkt-card__stat { display: block; font-family: var(--font-display); font-size: 1.45rem; line-height: 0.95; font-variant-numeric: tabular-nums; }
.mkt-card__lab { display: block; margin-top: 8px; color: rgba(255, 255, 255, 0.5); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.mkt-card__cta { margin-top: 20px; align-self: flex-start; color: var(--accent); font-size: 0.88rem; font-weight: 720; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

.mkt-final { padding: clamp(46px, 5vw, 78px) 0 0; text-align: center; }
.mkt-final h2 { margin: 0 auto; max-width: 22ch; font-size: clamp(1.7rem, 2.8vw, 2.5rem) !important; line-height: 1.12; font-weight: 740; letter-spacing: -0.026em; }
.mkt-final p { max-width: 58ch; margin: 16px auto 0; color: var(--ink-soft); font-size: 1.04rem; line-height: 1.6; }
.mkt-final__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }
.mkt-btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border-radius: 999px; font-size: 0.96rem; font-weight: 720; }
.mkt-btn--dark { color: #fff; background: var(--ink); }
.mkt-btn--line { color: var(--ink); border: 1px solid rgba(16, 20, 24, 0.3); }
.mkt-src { margin: clamp(40px, 5vw, 64px) auto 0; color: var(--muted); font-size: 0.8rem; line-height: 1.65; text-align: center; }
.mkt-src a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 980px) {
  .mkt-grid, .mkt-kpis { grid-template-columns: 1fr; }
  .mkt-kpi { border-left: 0; border-top: 1px solid var(--line); }
  .mkt-kpi:first-child { border-top: 0; }
}

.page-title { margin-bottom: 0.55em; }
.page-figure { margin: 0 auto 2.4em; }
.page-figure img { width: 100%; height: auto; border-radius: var(--radius); }
.article-content blockquote { margin: 2em 0; padding-left: 24px; border-left: 3px solid var(--blue); color: var(--ink); font-size: 1.25rem; line-height: 1.45; }
.post-nav { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 80px; }
.post-nav a { color: var(--blue); font-weight: 650; }
.nav-links { display: flex; justify-content: center; gap: 10px; margin-top: 38px; }
.nav-links a, .nav-links span { display: grid; min-width: 40px; height: 40px; place-items: center; border-radius: 50%; background: var(--white); }
.empty-state { padding: 48px; border-radius: var(--radius); background: var(--white); text-align: center; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 760ms ease, transform 760ms ease; transition-delay: var(--reveal-delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } .hero__image, .hero__media { transform: none !important; } }
@media (max-width: 980px) { .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  :root { --container: min(100vw - 28px, 680px); }
  .site-header__inner { height: 78px; }
  .nav-toggle { display: block; }
  .site-header.is-scrolled .nav-toggle, body:not(.home) .nav-toggle { color: var(--ink); }
  .primary-nav { position: absolute; top: 78px; right: 14px; left: 14px; display: none; padding: 18px; border-radius: var(--radius); color: var(--ink); background: rgba(255, 255, 255, 0.96); box-shadow: var(--shadow); }
  .primary-nav.is-open { display: grid; gap: 16px; }
  .primary-nav__list, .footer-nav__list { flex-direction: column; }
  .nav-main-site { width: fit-content; color: var(--white); background: var(--ink); }
  .hero { min-height: 84vh; }
  .hero__content { padding-bottom: 9vh; }
  .hero__scrim { background: linear-gradient(180deg, rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0.22) 42%, rgba(0, 0, 0, 0.74)), linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent); }
  .intro-band__grid, .footer-cta__inner, .category-hero__inner, .section-heading { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: 1fr; }
  .section-heading .text-link { justify-self: start; }
  .subscribe-form, .footer-search div, .post-nav { flex-direction: column; }
}
@media (max-width: 620px) {
  h1 { font-size: 2.42rem !important; line-height: 1.05; }
  h2 { font-size: 2.28rem !important; }
  .site-header__inner { height: 74px; }
  .brand--logo { width: 160px; height: 62px; padding: 5px 0; overflow: visible; }
  .brand__logo { width: 160px !important; height: auto !important; max-width: 160px !important; }
  .hero { min-height: 82vh; }
  .hero__image { object-position: center bottom; }
  .hero__next { display: none; }
  .area-grid, .site-footer__inner { grid-template-columns: 1fr; }
  .area-card--wide { grid-column: auto; min-height: 260px; }
}