/*
Theme Name: LMJ Land Services Child
Theme URI: https://lmjlandservices.com
Template: kadence
Author: Built for LMJ Land Services
Description: Oil and gas title, ownership, and due diligence practice. Custom theme carrying the original static build's design system unchanged — flat fills, no gradients, no card outlines, no emoji.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: lmj
*/

/* ==========================================================================
   LMJ LAND SERVICES — v2, built to the client's design PDF (Aug 2026)
   --------------------------------------------------------------------------
   The mockups are the spec: navy + gold, thin tan outlines on cards,
   centered serif section titles with a short gold underline, gold CTA
   band, navy footer with LinkedIn. Red-note corrections applied on top.
   ========================================================================== */

:root {
  /* Navy — from the mockup header/footer/bands */
  --navy-950: #051423;   /* ticker bar */
  --navy-900: #071D31;   /* footer, feature band */
  --navy-800: #0C1B35;   /* buttons, table headers */
  --navy-700: #16324F;
  --navy-overlay: rgba(6, 20, 36, 0.66);

  /* Gold — buttons, icons, accents; tan band */
  --gold: #B1874F;
  --gold-bright: #C89B5F;
  --gold-dim: #8F6C3B;
  --band-gold: #AE8650;      /* the CTA band fill */
  --line-tan: #D2AF7E;       /* thin card outlines */

  /* Light surfaces */
  --cream: #F7F6F5;          /* warm section background */
  --cool: #F2F0EF;           /* light blue-gray band (About stats) */
  --white: #FFFFFF;

  /* Text */
  --ink: #0C1B35;            /* navy headings */
  --text: #2E3A48;
  --text-2: #5C6B7A;
  --text-on-navy: #E8EDF3;
  --text-on-navy-2: #A9B6C4;

  --up: #3FA34D;
  --down: #C4392F;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --script: "Mrs Saint Delafield", "Snell Roundhand", cursive;

  --container: 1180px;
  --gutter: 32px;
  --section-y: 72px;
  --radius: 2px;
}

@media (max-width: 900px) {
  :root { --section-y: 52px; --gutter: 18px; }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--navy-800); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--navy-900); color: #fff; padding: 12px 20px; font-size: 14px; font-weight: 600; }
.skip-link:focus { left: 0; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.container--narrow { max-width: 860px; }
.section { padding: var(--section-y) 0; }
.section--cream { background: var(--cream); }
.section--cool { background: var(--cool); }
.section--navy { background: var(--navy-900); color: var(--text-on-navy); }

/* ---------- type ---------- */
h1, .h1 { font-family: var(--serif); font-weight: 700; color: #fff; font-size: clamp(34px, 4.4vw, 48px); line-height: 1.12; letter-spacing: -0.01em; }
h2, .h2 { font-family: var(--serif); font-weight: 700; color: var(--ink); font-size: clamp(26px, 3vw, 34px); line-height: 1.2; }
h3, .h3 { font-family: var(--serif); font-weight: 700; color: var(--ink); font-size: 20px; line-height: 1.3; }
h4, .h4 { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.lede { font-size: 17px; color: var(--text-2); }

/* Centered section title with the short gold underline, per mockup */
.sec-head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.sec-head h2 { position: relative; padding-bottom: 16px; }
.sec-head h2::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 56px; height: 3px; background: var(--gold); }
.sec-head p { margin-top: 14px; color: var(--text-2); font-size: 15.5px; }
.sec-head--left { text-align: left; margin-left: 0; }
.sec-head--left h2::after { left: 0; transform: none; }
.sec-head--on-navy h2 { color: #fff; }
.sec-head--on-navy p { color: var(--text-on-navy-2); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 0; border-radius: var(--radius); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; }
.btn--gold { background: var(--gold); color: #fff; }
.btn--gold:hover { background: var(--gold-bright); }
.btn--navy { background: var(--navy-800); color: #fff; }
.btn--navy:hover { background: var(--navy-700); }
.btn--outline-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.7); }
.btn--outline-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--outline-navy { background: transparent; color: var(--navy-800); border: 1px solid var(--navy-800); }
.btn--outline-navy:hover { background: var(--navy-800); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.link-more { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.link-more:hover { color: var(--gold-dim); }

/* ==========================================================================
   Market prices bar — mockup #1 (with red-note rebuild rules)
   ========================================================================== */
.ticker { background: var(--navy-950); color: #fff; }
.ticker__inner { display: flex; align-items: center; gap: 26px; min-height: 44px; }
.ticker__brand { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ticker__brand svg { color: var(--gold); }
.ticker__list { display: flex; align-items: center; gap: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ticker__list::-webkit-scrollbar { display: none; }
.quote { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; padding: 0 22px; border-left: 1px solid rgba(255,255,255,.14); font-size: 13px; }
.quote:first-child { border-left: 0; }
.quote svg { color: var(--gold); flex: 0 0 auto; }
.quote__sym { font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 11.5px; color: #C7D0DA; }
.quote__px { font-weight: 700; font-variant-numeric: tabular-nums; }
.quote__chg { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.quote__chg.is-up { color: var(--up); }
.quote__chg.is-down { color: var(--down); }
.quote__chg.is-flat { color: #8FA0B0; }
.ticker__stamp { margin-left: auto; flex: 0 0 auto; font-size: 12px; color: #93A3B4; }
@media (max-width: 900px) {
  .ticker__brand span, .ticker__stamp { display: none; }
  .quote:nth-child(n+3) { display: none; } /* max two figures on mobile, per spec */
}

/* ==========================================================================
   Header + nav — white bar, uppercase links, navy phone button
   ========================================================================== */
.masthead { position: sticky; top: 0; z-index: 100; background: #fff; box-shadow: 0 1px 0 rgba(20,36,58,.08); }
/* The market bar sticks with the menu: bar at 0, menu offset by the bar's
   height. :has() keeps the menu at 0 when the bar is absent or still hidden
   (no data yet), so no gap ever appears. */
.ticker { position: sticky; top: 0; z-index: 110; }
body:has(.ticker:not([hidden])) .masthead { top: 44px; } /* = ticker height, both breakpoints */
.masthead__inner { display: flex; align-items: center; gap: 28px; min-height: 78px; }
.wordmark { display: inline-flex; flex-direction: column; line-height: 1; }
.wordmark__mark { font-family: var(--serif); font-weight: 700; font-size: 34px; color: var(--navy-800); letter-spacing: 0.01em; }
.wordmark__tag { margin-top: 3px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); }
.nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
@media (min-width: 1100px) { .nav { gap: 38px; } }
.nav__link { position: relative; font-size: 13px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); padding: 8px 0; }
.nav__link:hover { color: var(--gold-dim); }
.nav__link.is-active { color: var(--ink); }
.nav__link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); }
.masthead__cta { display: flex; align-items: center; gap: 14px; }
.btn--phone { background: var(--navy-800); color: #fff; padding: 12px 20px; border-radius: 3px; font-size: 14px; letter-spacing: 0.02em; text-transform: none; font-weight: 600; }
.btn--phone:hover { background: var(--navy-700); }
.nav-toggle { display: none; background: none; border: 0; width: 40px; height: 36px; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; }
.nav-toggle span { display: block; height: 2px; background: var(--ink); }
@media (max-width: 1020px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
}
.mobile-nav { display: none; background: #fff; border-top: 1px solid #E5E9EF; }
.mobile-nav.is-open { display: block; }
.mobile-nav ul { padding: 10px 0; }
.mobile-nav li a { display: block; padding: 12px var(--gutter); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.mobile-nav .btn { margin: 8px var(--gutter) 16px; }

/* ==========================================================================
   Heroes — navy-overlaid photo, serif title with short gold rule
   ========================================================================== */
.hero, .page-hero { position: relative; isolation: isolate; background: var(--navy-900); overflow: hidden; }
.hero img.bg, .page-hero img.bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
/* Hero photo as a native image block (WP): the figure wrapper takes the
   absolute-fill role and the img inside covers it. Mirrors img.bg above. */
.hero figure.bg, .page-hero figure.bg { position: absolute; inset: 0; z-index: -2; margin: 0; }
.hero figure.bg img, .page-hero figure.bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.hero::after, .page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6,20,36,.88) 0%, rgba(6,20,36,.62) 42%, rgba(6,20,36,.22) 78%, rgba(6,20,36,.14) 100%); }
.hero__inner { padding: 96px 0 104px; max-width: 560px; }
.page-hero__inner { padding: 64px 0 72px; max-width: 560px; }
.hero h1, .page-hero h1 { position: relative; padding-bottom: 18px; margin-bottom: 18px; }
.hero h1::after, .page-hero h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 3px; background: var(--gold); }
.hero p, .page-hero p { color: #E4E9F0; font-size: 16.5px; max-width: 46ch; }
.hero .btn-row { margin-top: 28px; }

/* ==========================================================================
   Outlined cards — mockup card language
   ========================================================================== */
.cards { display: grid; gap: 22px; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .cards--3, .cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cards--3, .cards--4, .cards--2 { grid-template-columns: 1fr; } }

.card { background: #fff; border: 1px solid var(--line-tan); border-radius: var(--radius); padding: 30px 26px; text-align: center; }
.card__icon { display: flex; justify-content: center; margin-bottom: 16px; color: var(--gold); }
.card h3 { font-size: 19px; }
.card p { margin-top: 12px; font-size: 14px; line-height: 1.65; color: var(--text-2); }
.card .link-more { margin-top: 16px; }
.card ul { margin-top: 14px; text-align: left; }
.card ul li { position: relative; padding: 5px 0 5px 18px; font-size: 13.5px; color: var(--text-2); }
.card ul li::before { content: ""; position: absolute; left: 0; top: 12px; width: 7px; height: 2px; background: var(--gold); }

/* who-we-serve variant: uppercase small titles */
.card--serve h3 { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

/* process boxes — numbered, per red note */
.process { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 760px; margin: 0 auto; }
@media (max-width: 640px) { .process { grid-template-columns: 1fr; } }
.process .card { text-align: center; padding: 24px; }
.process .card .num { font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--gold); letter-spacing: .12em; }
.process .card h3 { font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: 6px; }

/* ==========================================================================
   Navy feature band — "keep this band, no changes"
   ========================================================================== */
.featband { background: var(--navy-900); color: var(--text-on-navy); }
.featband__grid { display: grid; grid-template-columns: repeat(5, 1fr); padding: 44px 0; }
@media (max-width: 980px) { .featband__grid { grid-template-columns: repeat(2, 1fr); row-gap: 30px; } }
@media (max-width: 560px) { .featband__grid { grid-template-columns: 1fr; } }
.feat { padding: 0 22px; border-left: 1px solid rgba(255,255,255,.1); text-align: center; }
.feat:first-child { border-left: 0; }
@media (max-width: 980px) { .feat { border-left: 0; } }
.feat svg { margin: 0 auto 12px; color: var(--gold); }
.feat h3 { font-family: var(--sans); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.35; }
.feat p { margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: var(--text-on-navy-2); }

/* ==========================================================================
   Gold CTA band
   ========================================================================== */
.goldband { background: var(--band-gold); color: #fff; }
.goldband__inner { display: flex; align-items: center; gap: 22px; padding: 30px 0; }
.goldband__icon { flex: 0 0 auto; width: 56px; height: 56px; border: 1.5px solid rgba(255,255,255,.85); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.goldband h2 { color: #fff; font-size: clamp(21px, 2.4vw, 27px); }
.goldband p { margin-top: 4px; font-size: 14.5px; color: rgba(255,255,255,.92); }
.goldband .btn { margin-left: auto; flex: 0 0 auto; }
@media (max-width: 760px) {
  .goldband__inner { flex-wrap: wrap; }
  .goldband .btn { margin-left: 0; }
}

/* ==========================================================================
   Footer — navy, 4 columns + FOLLOW, bottom bar
   ========================================================================== */
.footer { background: var(--navy-900); color: var(--text-on-navy-2); }
.footer__top { display: grid; grid-template-columns: 1.3fr 0.8fr 0.9fr 1.1fr 0.6fr; gap: 34px; padding: 52px 0 40px; }
@media (max-width: 980px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; } }
.footer .wordmark__mark { color: #fff; }
.footer__blurb { margin-top: 14px; font-size: 13.5px; line-height: 1.65; }
.footer__regions { margin-top: 14px; font-size: 12.5px; color: #8FA0B2; letter-spacing: .04em; }
.footer h4 { color: #fff; font-size: 12px; letter-spacing: .12em; margin-bottom: 16px; }
.footer__assoc { text-align: center; padding: 26px 0 0; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.footer__assoc .assoc-mark { color: var(--gold-bright); }
.footer__links li { padding: 4px 0; }
.footer__links a { font-size: 14px; color: #C6CFDA; }
.footer__links a:hover { color: var(--gold-bright); }
.footer__contact li { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; font-size: 13.5px; color: #C6CFDA; }
.footer__contact svg { flex: 0 0 auto; margin-top: 2px; color: var(--gold); }
.footer__social a { display: inline-flex; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.35); border-radius: 4px; align-items: center; justify-content: center; color: #fff; }
.footer__social a:hover { border-color: var(--gold); color: var(--gold-bright); }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 12.5px; color: #8FA0B2; }
.footer__bottom a:hover { color: var(--gold-bright); }
@media (max-width: 560px) { .footer__bottom { flex-direction: column; } }

/* ==========================================================================
   Service Areas — state cards + county tables
   ========================================================================== */
.state-card svg { margin: 0 auto 18px; color: var(--gold); }
.state-card h3 { position: relative; padding-bottom: 12px; }
.state-card h3::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 40px; height: 2px; background: var(--gold); }

.county-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 980px; margin: 0 auto; }
@media (max-width: 800px) { .county-tables { grid-template-columns: 1fr; } }
.ctable { border: 1px solid #DDE3EA; border-radius: var(--radius); overflow: hidden; background: #fff; }
.ctable caption { background: var(--navy-800); color: #fff; font-family: var(--serif); font-weight: 700; font-size: 17px; padding: 11px; caption-side: top; }
.ctable table { width: 100%; border-collapse: collapse; }
.ctable td { padding: 9px 12px; font-size: 14px; text-align: center; color: var(--text); width: 33.33%; }
.ctable tr:nth-child(even) td { background: #F3F5F8; }

/* strat diagram section (carried over, per red note) */
.strat { background: var(--navy-900); color: var(--text-on-navy); }
.strat .split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .strat .split { grid-template-columns: 1fr; } }
.strat h2 { color: #fff; }
.strat p { color: var(--text-on-navy-2); margin-top: 14px; font-size: 15px; }

/* ==========================================================================
   About
   ========================================================================== */
.about-lead { display: grid; grid-template-columns: 380px 1fr; gap: 48px; align-items: stretch; }
@media (max-width: 900px) { .about-lead { grid-template-columns: 1fr; } }
.about-photo { position: relative; height: 100%; border-radius: var(--radius); overflow: hidden; background: var(--navy-900); }
.about-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,20,36,0) 58%, rgba(7,29,49,.85) 100%); pointer-events: none; }
.about-lead__photo { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top center; }
@media (max-width: 900px) { .about-photo { height: auto; } .about-lead__photo { height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 0; } }
.about-lead h2 { font-size: clamp(28px, 3.2vw, 36px); }
.role { margin-top: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.role--sub { color: var(--text-2); margin-top: 4px; }
.about-lead .rule { width: 44px; height: 3px; background: var(--gold); margin: 18px 0 20px; }
.about-lead p + p { margin-top: 14px; }
.signature { margin-top: 26px; font-family: var(--script); font-size: 48px; color: var(--navy-800); line-height: 1; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: 1020px; margin: 0 auto; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); row-gap: 30px; } }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr; } }
.stat { text-align: center; padding: 0 24px; border-left: 1px solid #D8DEE6; }
.stat:first-child { border-left: 0; }
@media (max-width: 900px) { .stat { border-left: 0; } }
.stat svg { margin: 0 auto 10px; color: var(--gold); }
.stat .big { font-family: var(--serif); font-weight: 700; font-size: 26px; color: var(--ink); }
.stat h3 { font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }
.stat p { margin-top: 8px; font-size: 12.5px; color: var(--text-2); line-height: 1.6; }

/* ==========================================================================
   Insights — feed cards with images + right rail
   ========================================================================== */
.insights-grid { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; }
/* The rail starts level with the first card, not the section heading. */
.insights-grid .rail { margin-top: 97px; }
@media (max-width: 980px) { .insights-grid .rail { margin-top: 0; } }
@media (max-width: 980px) { .insights-grid { grid-template-columns: 1fr; } }
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .posts { grid-template-columns: 1fr; } }
.post { background: #fff; border: 1px solid var(--line-tan); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.post__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--cool); }
.post__body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.post__meta { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dim); }
.post h3 { font-size: 16.5px; margin-top: 8px; line-height: 1.35; }
.post p { margin-top: 8px; font-size: 13.5px; color: var(--text-2); flex: 1; }
.post .link-more { margin-top: 12px; }
/* PDF scrim treatment on photographic card images and story leads. */
.post { position: relative; }
.post::before { content: ""; position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 16/10; background: linear-gradient(180deg, rgba(6,20,36,0) 52%, rgba(6,20,36,.5) 100%); pointer-events: none; z-index: 1; }
.story-lead-img { position: relative; }
.story-lead-img::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); background: linear-gradient(180deg, rgba(6,20,36,0) 55%, rgba(6,20,36,.45) 100%); pointer-events: none; }
.story-lead-img { margin: 28px 0 0; }
.story-lead-img img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line-tan); }

.rail > * + * { margin-top: 24px; }
.railbox { background: #fff; border: 1px solid var(--line-tan); border-radius: var(--radius); padding: 26px 24px; }
.railbox h3 { font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; position: relative; padding-bottom: 12px; margin-bottom: 14px; }
.railbox h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--gold); }
.railbox p { font-size: 14px; color: var(--text-2); }
.railbox .field { margin-top: 14px; }
.railbox .btn { width: 100%; margin-top: 12px; }

.feed__stamp { margin-top: 22px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 380px 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.cinfo li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid #E3E8EE; }
.cinfo li:last-child { border-bottom: 0; }
.cinfo__icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--navy-800); color: #fff; display: flex; align-items: center; justify-content: center; }
.cinfo h3 { font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.cinfo p { font-size: 14.5px; margin-top: 3px; }
.existing { margin-top: 22px; border: 1px solid var(--line-tan); border-radius: var(--radius); padding: 20px; display: flex; gap: 16px; align-items: center; background: #fff; }
.existing__icon { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: var(--band-gold); color: #fff; display: flex; align-items: center; justify-content: center; }
.existing h3 { font-size: 16px; }
.existing p { font-size: 13px; color: var(--text-2); margin-top: 3px; }

.form { background: #fff; border: 1px solid var(--line-tan); border-radius: var(--radius); padding: 28px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.field { display: block; margin-bottom: 14px; }
.field__label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin-bottom: 6px; }
.field__input { width: 100%; padding: 12px 13px; background: #fff; border: 1px solid #CBD4DE; border-radius: 3px; font-size: 14.5px; color: var(--text); }
.field__input:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(192,149,78,.25); }
textarea.field__input { resize: vertical; min-height: 120px; }
.consent { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-2); margin: 4px 0 16px; }
.consent a { color: var(--navy-800); text-decoration: underline; }
.form .btn { width: 100%; }
.form__note { margin-top: 14px; font-size: 12.5px; color: var(--text-2); }

/* Why clients choose / FAQ band */
.chooseband { background: var(--cool); }
.choose { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1060px; margin: 0 auto; }
@media (max-width: 900px) { .choose { grid-template-columns: repeat(2, 1fr); row-gap: 26px; } }
@media (max-width: 560px) { .choose { grid-template-columns: 1fr; } }
.choose > div { padding: 0 24px; border-left: 1px solid #D5DBE3; text-align: center; }
.choose > div:first-child { border-left: 0; }
@media (max-width: 900px) { .choose > div { border-left: 0; } }
.choose h3 { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.choose p { margin-top: 8px; font-size: 13px; color: var(--text-2); line-height: 1.65; }

/* ==========================================================================
   Long-form content pages (privacy, resources, b27, blog, messages)
   ========================================================================== */
.entry-content, .body-copy { max-width: 780px; }
.entry-content p, .body-copy p { color: var(--text); }
.entry-content p + p, .body-copy p + p { margin-top: 14px; }
.entry-content h2, .body-copy h2 { margin-top: 34px; margin-bottom: 10px; font-size: 24px; }
.entry-content a:not(.btn), .body-copy a:not(.btn) { color: var(--navy-800); text-decoration: underline; text-decoration-color: var(--gold); }

.faith-copy p { font-family: var(--serif); font-size: 17.5px; line-height: 1.75; color: var(--text); }
.faith-copy p + p { margin-top: 16px; }
.scripture { margin: 28px 0; padding: 22px 26px; border-left: 3px solid var(--gold); background: var(--cream); }
.scripture p { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink); }
.scripture cite { display: block; margin-top: 10px; font-family: var(--sans); font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dim); }

.sermon { padding-top: 40px; margin-top: 40px; border-top: 1px solid #E3E8EE; }
.sermon:first-of-type { border-top: 0; margin-top: 24px; padding-top: 0; }
.sermon__meta { margin: 10px 0 18px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dim); }

.breadcrumb { display: flex; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #B7C3CF; margin-bottom: 16px; }
.breadcrumb a { color: var(--gold-bright); }
.breadcrumb span { color: rgba(255,255,255,.4); }

.definition-list > div { display: grid; grid-template-columns: 180px 1fr; gap: 18px; padding: 14px 0; border-top: 1px solid #E3E8EE; }
.definition-list dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
@media (max-width: 640px) { .definition-list > div { grid-template-columns: 1fr; gap: 4px; } }

/* pagination + misc */
.nav-links { display: flex; gap: 8px; }
.nav-links .page-numbers { padding: 9px 14px; border: 1px solid #CBD4DE; border-radius: 3px; font-size: 13px; font-weight: 600; }
.nav-links .page-numbers.current { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   Carried-over components (blog, messages, resources, story pages)
   ========================================================================== */
.statement { font-family: var(--serif); font-weight: 700; font-size: 24px; color: var(--ink); line-height: 1.3; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 14px; display: block; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.link-arrow:hover { color: var(--gold-dim); }
.faith-lead { font-family: var(--serif); font-size: 21px; color: var(--ink); margin-bottom: 18px; }
.faith-signoff { font-style: italic; color: var(--ink); margin-top: 20px; }
.church { text-align: center; }
.church h2 { color: #fff; }
.church__line { margin-top: 8px; color: var(--text-on-navy-2); font-size: 15px; }
.church__motto { margin-top: 14px; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--gold-bright); }
.church .btn-row { justify-content: center; margin-top: 26px; }
.section--navy .eyebrow { color: var(--gold-bright); }
.message .breadcrumb, .story .breadcrumb, .section .breadcrumb { color: var(--text-2); }
.message .breadcrumb a, .story .breadcrumb a, .section .breadcrumb a { color: var(--gold-dim); }
.story-back { margin-bottom: 14px; }
.story-back a { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dim); }
.story-back a:hover { color: var(--gold); }

.form-confirm { background: #fff; border: 1px solid var(--line-tan); border-radius: var(--radius); padding: 36px 32px; text-align: center; color: var(--ink); }
.form-confirm svg { color: #2F6B3A; margin-bottom: 12px; }
.form-confirm h3 { margin-bottom: 8px; }
.form-confirm p { font-size: 14.5px; color: var(--text-2); max-width: 52ch; margin: 0 auto; }
.field__input--file { padding: 10px 12px; font-size: 13px; }
.field__input--file::file-selector-button { font: inherit; font-weight: 600; letter-spacing: .04em; border: 1px solid var(--line-tan); border-radius: 3px; background: var(--cream); color: var(--ink); padding: 6px 14px; margin-right: 12px; cursor: pointer; }

/* Image placement chosen in the editor (align left / center / right). */
main .wp-block-image.alignleft, main .wp-block-image .alignleft { float: left; margin: 6px 24px 14px 0; }
main .wp-block-image.alignright, main .wp-block-image .alignright { float: right; margin: 6px 0 14px 24px; }
main .wp-block-image.aligncenter, main .wp-block-image .aligncenter { display: block; float: none; margin-left: auto; margin-right: auto; }
.message__title, .story__title { font-size: clamp(28px, 3.6vw, 40px); color: var(--ink); }
.message__ref { color: var(--gold-dim); margin-bottom: 12px; }
.story__date { margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.message__church, .story__source { margin-top: 36px; padding: 24px 26px; background: var(--cream); border: 1px solid var(--line-tan); border-radius: var(--radius); }
.message__church-line { font-size: 14.5px; color: var(--text); }
.message__church-motto { margin: 10px 0 18px; font-family: var(--serif); font-style: italic; color: var(--gold-dim); }
.story__source-label { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dim); }
.story__source-text { margin-top: 8px; font-size: 14px; color: var(--text-2); }
.story__source-text strong { color: var(--ink); }
.story__source-link { margin-top: 16px; }
.story__excerpt { font-family: var(--serif); font-size: 19px; line-height: 1.6; color: var(--ink); }
.rule { height: 1px; background: #E3E8EE; border: 0; }
.hr-gold { width: 44px; height: 3px; background: var(--gold); }


/* ---------- editable icon images ---------- */
img.icon { width: 34px; height: 34px; }
img.icon--lg { width: 44px; height: 44px; }
img.icon--state { width: 130px; height: 110px; object-fit: contain; margin: 0 auto 18px; }
.feat img.icon { margin-bottom: 12px; }

/* Icons as native image blocks (WP): the figure wrapper must occupy the same
   box as a bare img. Sizing lives on the inner img, flow margins on the
   figure; alignment follows the container's text-align, and the image
   block's align control still works (its classes land on the figure). */
figure:is(.icon, .icon--lg, .icon--state) { margin: 0; }
figure.icon > img { width: 34px; height: 34px; }
figure.icon--lg > img { width: 44px; height: 44px; }
figure.icon--state { margin: 0 auto 18px; }
figure.icon--state > img { width: 130px; height: 110px; object-fit: contain; }
.feat figure.icon { margin-bottom: 12px; }
.card--serve figure.icon--lg { margin-bottom: 14px; }
.card--left .card__head figure.icon { flex: 0 0 auto; line-height: 0; }

/* Context armor: if an editor action (align, block recovery) strips a
   figure's classes — observed in production as <figure class="aligncenter">
   — the container still dictates icon size, so icons can never render at
   intrinsic/full size. Mirrors the class-based rules above. */
.feat figure { margin: 0 0 12px; }
.feat figure img { width: 34px; height: 34px; margin-left: auto; margin-right: auto; }
.card--serve figure { margin: 0 0 14px; }
.card--serve figure img { width: 44px; height: 44px; margin-left: auto; margin-right: auto; }
.card--left .card__head figure { margin: 0; line-height: 0; flex: 0 0 auto; }
.card--left .card__head figure img { width: 34px; height: 34px; }
.state-card figure { margin: 0 auto 18px; }
.state-card figure img { width: 130px; height: 110px; object-fit: contain; margin-left: auto; margin-right: auto; }
main figure.aligncenter { margin-left: auto; margin-right: auto; }

/* An explicit alignment chosen in the editor MOVES the icon — size stays
   fixed by the rules above, position obeys the choice. Without an alignment
   class, icons sit at the design default (the client PDF's placement).
   Floats are neutralized inside icon containers; position is driven by
   text-align (inline img inside a block figure) or margins (flex rows). */
.feat figure[class*="align"], .card--serve figure[class*="align"], .state-card figure[class*="align"] { float: none; width: 100%; }
.feat figure.alignleft img, .card--serve figure.alignleft img, .state-card figure.alignleft img { margin-left: 0; margin-right: auto; }
.feat figure.alignright img, .card--serve figure.alignright img, .state-card figure.alignright img { margin-left: auto; margin-right: 0; }
.card--left .card__head figure.aligncenter { margin-left: auto; margin-right: auto; }
.card--left .card__head figure.alignright { margin-left: auto; margin-right: 0; }

/* ---------- mockup-exact card variants ---------- */
.card--left { text-align: left; }
.card--left .card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.card--left .card__head img.icon { flex: 0 0 auto; }
.card--left h3 { font-size: 18px; line-height: 1.25; }
.card--left p { margin-top: 0; }
.card--serve { text-align: center; }
.card--serve img.icon--lg { margin-bottom: 14px; }

/* ---------- extreme mobile pass ---------- */
.county-tables-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) {
  .hero__inner { padding: 56px 0 64px; }
  .page-hero__inner { padding: 44px 0 52px; }
  .hero h1, .page-hero h1 { font-size: clamp(28px, 8vw, 36px); }
  .goldband__inner { flex-direction: column; align-items: flex-start; text-align: left; padding: 26px 0; }
  .goldband__icon { display: none; }
  .goldband .btn { width: 100%; }
  .sec-head { margin-bottom: 26px; }
  .card { padding: 22px 18px; }
  .about-lead__photo { max-width: 420px; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-left: 0; padding: 0; }
  .choose { grid-template-columns: 1fr; }
  .choose > div { border-left: 0; padding: 0; }
  .footer__top { padding: 36px 0 24px; }
  .btn { width: 100%; }
  .masthead .btn--phone { width: auto; }
  .btn-row .btn { width: auto; flex: 1 1 auto; }
  .form { padding: 20px 16px; }
  .insights-grid { gap: 26px; }
  .cinfo__icon { width: 38px; height: 38px; }
}
@media (max-width: 420px) {
  .masthead .btn--phone span.num { display: none; }
  .wordmark__mark { font-size: 28px; }
}

/* Gutenberg parity: the block wrappers must change nothing visually. */
:where(.wp-block-group) { margin: 0; padding: 0; }
/* Classic themes wrap group innards in a legacy container that breaks grid
   and flex parents. display:contents removes its box entirely. */
body .wp-block-group__inner-container { display: contents; }
:where(.wp-block-heading) { margin: 0; }
/* Core gap rules are :where(zero-specificity); this needs only to exist. */
main :where(.is-layout-flow) > :where(*),
main :where(.is-layout-constrained) > :where(*) { margin-block: 0; }
:where(.wp-block-list) { padding: 0; margin: 0; list-style: none; }
:where(li.wp-block-list-item) { margin: 0; }


/* ---------- mobile refinements (Aug 2026) ---------- */
@media (max-width: 1020px) {
  /* 44px tap target for the hamburger. */
  .nav-toggle { width: 44px; height: 44px; }
  /* The header is sticky but the menu panel lived in normal flow, so after
     scrolling it opened out of view — the "hamburger sometimes dead" bug.
     Pin the open panel to the bottom of the stuck header instead. */
  .mobile-nav.is-open { position: fixed; left: 0; right: 0; top: 78px; z-index: 115; max-height: calc(100vh - 78px); overflow: auto; box-shadow: 0 14px 24px rgba(6,20,36,.18); }
  body:has(.ticker:not([hidden])) .mobile-nav.is-open { top: 122px; max-height: calc(100vh - 122px); }
  /* Roomier, centered menu items, clear of curved screen edges. */
  .mobile-nav li a { text-align: center; padding: 13px max(24px, env(safe-area-inset-right)) 13px max(24px, env(safe-area-inset-left)); }
  /* The global mobile .btn is width:100%; with side margins that overflowed
     the right edge and skewed the whole panel. Symmetric width instead. */
  .mobile-nav .btn { display: block; width: calc(100% - 48px); margin: 10px 24px 18px; text-align: center; }
}
@media (max-width: 760px) {
  /* The band's own padding shorthand was overriding the container's side
     gutters, leaving the CTA flush to the screen edge. */
  .goldband__inner { padding-inline: var(--gutter); }
}
@media (max-width: 560px) {
  /* Two columns of information; brand, contact and social span both. */
  .footer__top { grid-template-columns: 1fr 1fr; gap: 28px 22px; }
  .footer__top > div:first-child,
  .footer__top > div:nth-child(4),
  .footer__top .footer__social { grid-column: 1 / -1; }
}