/*
Theme Name:   Bret Jones, P.A.
Theme URI:    ../../../
Description:  Child theme of Hello Elementor carrying the Bret Jones, P.A. design system (v1.0, July 2026). Tokens and components are the source of truth; see DESIGN_SYSTEM.md.
Author:       Bret Jones, P.A.
Template:     hello-elementor
Version:      1.0.0
Text Domain:  bret-jones-child
*/

/* ============================================================
   BRET JONES, P.A. — DESIGN SYSTEM v1.0
   Ported from site/style.css. Canonical source lives in the repo.
   If this file changes, re-sync design-system.html and DESIGN_SYSTEM.md.

   CONTENTS
     1. Tokens (light)
     2. Tokens (dark)
     3. Base
     4. Layout: wrap, section, bands
     5. Typography helpers
     6. Actions: buttons, link-arrow
     7. Components (v1.0 inventory)
     8. Components (v1.1 extensions — team, insights)
     9. Compliance machinery
    10. Motion
    11. Elementor compatibility layer
   ============================================================ */


/* ---------- 1. TOKENS (LIGHT) ---------- */
:root,
[data-theme="light"] {
  --color-bg:             #f4f1ea;
  --color-surface:        #faf8f2;
  --color-surface-2:      #ffffff;
  --color-surface-offset: #ece7dc;
  --color-divider:        #ddd6c7;
  --color-border:         #cfc7b5;

  --color-text:           #23241f;
  --color-text-muted:     #5c5d54;
  --color-text-faint:     #8c8c81;
  --color-text-inverse:   #f6f3ec;

  --color-primary:        #2f4a3c;
  --color-primary-hover:  #263e32;
  --color-primary-active: #1c2f26;
  --color-primary-soft:   #e3e7df;

  --color-brass:          #9a7b3f;
  --color-brass-hover:    #856a34;
  --color-brass-active:   #6f582b;
  --color-brass-soft:     #ece2cc;

  /* Reserved. Currently unused — do not introduce without a system-level reason. */
  --color-blue:           #3d5a6c;

  --color-ink-band:       #23261f;
  --color-green-band:     #2f4a3c;

  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-full: 9999px;

  --transition-interactive: 240ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px rgba(35, 36, 31, .06);
  --shadow-md: 0 6px 24px rgba(35, 36, 31, .09);
  --shadow-lg: 0 18px 48px rgba(35, 36, 31, .14);

  --content-wide:    1200px;
  --content-default: 940px;
  --content-narrow:  680px;

  --font-display: 'Boska', 'Georgia', serif;
  --font-body:    'General Sans', 'Helvetica Neue', system-ui, sans-serif;

  --text-xs:   clamp(0.75rem, 0.7rem + 0.2vw, 0.82rem);
  --text-sm:   clamp(0.875rem, 0.82rem + 0.25vw, 0.95rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --text-lg:   clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --text-xl:   clamp(1.6rem, 1.25rem + 1.4vw, 2.4rem);
  --text-2xl:  clamp(2.3rem, 1.6rem + 2.9vw, 3.9rem);
  --text-3xl:  clamp(3rem, 1.8rem + 4.2vw, 5rem);

  --space-2:  .5rem;
  --space-3:  .75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
}


/* ---------- 2. TOKENS (DARK) ---------- */
[data-theme="dark"] {
  --color-bg:             #1a1c17;
  --color-surface:        #202219;
  --color-surface-2:      #262820;
  --color-surface-offset: #23261f;
  --color-divider:        #33362c;
  --color-border:         #3d4136;

  --color-text:           #e7e4d8;
  --color-text-muted:     #a5a397;
  --color-text-faint:     #77766c;
  --color-text-inverse:   #1a1c17;

  --color-primary:        #7fa088;
  --color-primary-hover:  #93b09b;
  --color-primary-active: #a7bfae;
  --color-primary-soft:   #2a3b31;

  --color-brass:          #c7a566;
  --color-brass-hover:    #d4b579;
  --color-brass-active:   #ddc48f;
  --color-brass-soft:     #3a3221;

  --color-blue:           #7f9caf;

  --color-ink-band:       #14160f;
  --color-green-band:     #24352b;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);
}


/* ---------- 3. BASE ---------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  line-height: 1.62;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  transition: background .4s ease, color .4s ease;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-wrap: balance;
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

img, svg { display: block; max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--color-brass);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background: color-mix(in oklab, var(--color-primary) 24%, transparent);
}

a, button, [role="button"] {
  transition:
    color var(--transition-interactive),
    background var(--transition-interactive),
    border-color var(--transition-interactive),
    box-shadow var(--transition-interactive),
    transform var(--transition-interactive);
}


/* ---------- 4. LAYOUT ---------- */
.wrap {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.measure-default { max-width: var(--content-default); margin-inline: auto; }
.measure-narrow  { max-width: var(--content-narrow);  margin-inline: auto; }

.section { padding-block: clamp(3.5rem, 8vw, 7rem); }

/* Full-bleed colour bands */
.band-surface { background: var(--color-surface); }
.band-offset  { background: var(--color-surface-offset); }
.band-green   { background: var(--color-green-band); color: #fff; }
.band-ink     { background: var(--color-ink-band);   color: var(--color-text-inverse); }

.band-green h1, .band-green h2, .band-green h3, .band-green h4,
.band-ink   h1, .band-ink   h2, .band-ink   h3, .band-ink   h4 { color: inherit; }

.band-green .eyebrow { color: #d9c69a; }


/* ---------- 5. TYPOGRAPHY HELPERS ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 600;
  color: var(--color-brass);
}

.lede {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.4;
  max-width: 52ch;
}

.text-muted { color: var(--color-text-muted); }
.text-faint { color: var(--color-text-faint); }


/* ---------- 6. ACTIONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .01em;
  padding: .85rem 1.6rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
}

/* Tier 1 — one solid-brass button per view. Wording is always
   "Schedule a Consultation". See DESIGN_SYSTEM.md §6 and §9. */
.btn-primary {
  background: var(--color-brass);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--color-brass-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-primary:active {
  background: var(--color-brass-active);
  transform: translateY(0);
}
[data-theme="dark"] .btn-primary { color: #1a1c17; }

/* Tier 2 — secondary */
.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
}

.btn-on-dark {
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
  background: transparent;
}
.btn-on-dark:hover {
  background: rgba(255, 255, 255, .1);
  border-color: #fff;
  transform: translateY(-2px);
}

/* Tier 3 — inline link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-primary);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.link-arrow svg { transition: transform var(--transition-interactive); }
.link-arrow:hover {
  border-bottom-color: var(--color-brass);
  color: var(--color-brass);
}
.link-arrow:hover svg { transform: translateX(4px); }

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  background: none;
  cursor: pointer;
}
.theme-toggle:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}


/* ---------- 7. COMPONENTS (v1.0 INVENTORY) ---------- */

/* Service card */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

.svc-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem 1.8rem 1.6rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.svc-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--color-brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-interactive);
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-divider);
}
.svc-card:hover::before { transform: scaleX(1); }

.svc-icon { color: var(--color-primary); margin-bottom: 1.3rem; }
.svc-card :is(h2, h3) { font-size: var(--text-lg); }
.svc-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-top: .8rem;
  flex: 1;
  line-height: 1.55;
}
.svc-card .link-arrow { margin-top: 1.4rem; }

.svc-card.flagship { border-color: var(--color-primary); }
.flag-badge {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: .22rem .55rem;
  border-radius: 3px;
}

/* Audience chips */
.chip {
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-full);
  padding: .55rem 1.15rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, .94);
  display: inline-block;
  transition: background var(--transition-interactive),
              border-color var(--transition-interactive);
}
[data-theme="dark"] .chip {
  border-color: rgba(231, 228, 216, .24);
  color: #e7e4d8;
}
.chip:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .55);
}
.chip.chip-ogc {
  background: rgba(201, 165, 102, .22);
  border-color: rgba(201, 165, 102, .55);
}

/* Document tiers */
.doc-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

.doc-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.doc-card.featured {
  border-color: var(--color-brass);
  box-shadow: var(--shadow-lg);
}
.doc-card .doc-badge {
  position: absolute;
  top: -.7rem;
  left: 1.8rem;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #1a1c17;
  background: var(--color-brass);
  padding: .25rem .6rem;
  border-radius: 3px;
}
.doc-card .kicker {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.doc-card h3 { font-size: var(--text-lg); margin-top: .6rem; }
.doc-card .doc-sub {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-top: .6rem;
  line-height: 1.55;
}
.doc-card ul {
  list-style: none;
  margin: 1.3rem 0 1.6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 1;
}
.doc-card ul li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.doc-card ul li svg {
  color: var(--color-brass);
  flex: none;
  margin-top: .2rem;
}
.doc-card .btn { width: 100%; justify-content: center; }

/* Dichotomy — public / private */
.dicho-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem;
}
.dicho-col {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem 1.8rem;
  background: var(--color-surface-2);
  min-width: 0; /* guards the known overflow trouble spot */
}
.contact-panel-heading { font-size: 1.75rem; margin-bottom: 1.4rem; }
.dicho-bridge {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  text-align: center;
  margin-top: 2rem;
  color: var(--color-text-muted);
  max-width: 46ch;
  margin-inline: auto;
}

/* Process steps */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.step { position: relative; padding-top: 1rem; }
.step::before {
  counter-increment: step;
  content: counter(step);
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--color-brass);
  display: block;
  margin-bottom: .6rem;
  line-height: 1;
}
.step h4 { margin-bottom: .4rem; }
.step p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* Trust strip */
.trust { background: var(--color-ink-band); color: var(--color-text-inverse); }
.trust-item { font-size: var(--text-sm); color: rgba(246, 243, 236, .82); }


/* ---------- 8. COMPONENTS (v1.1 EXTENSIONS) ---------- */
/* New in this build. Derived per DESIGN_SYSTEM.md §10 rule 7.
   Specimens must be added to design-system.html in the repo. */

/* Team grid — derived from .svc-grid. Built to scale past two members. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.6rem;
}

/* Team card — derived from .svc-card, same interaction grammar. */
.team-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 0 1.6rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.team-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--color-brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-interactive);
  z-index: 1;
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-divider);
}
.team-card:hover::before { transform: scaleX(1); }

.team-card .portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-surface-offset);
  box-shadow: var(--shadow-md);
}
.team-card .portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-card .team-body { padding: 1.4rem 1.6rem 0; }
.team-card h2 { font-size: var(--text-lg); }
.team-card .role {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: .5rem;
}
.team-card .link-arrow { margin: 1.2rem 1.6rem 0; }

/* Bio page — .page-hero + narrow measure */
.bio-body { max-width: var(--content-narrow); margin-inline: auto; }
.bio-body h2 { font-size: var(--text-xl); margin-top: 2.4rem; }
.bio-body p  { margin-top: 1rem; color: var(--color-text-muted); }

.bio-facts {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  padding: 1.6rem 1.8rem;
  margin-top: 2rem;
}
.bio-facts dt {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 1rem;
}
.bio-facts dt:first-child { margin-top: 0; }
.bio-facts dd { font-size: var(--text-sm); margin-top: .3rem; }

/* Insights — post card derived from .svc-card */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.6rem;
}
.post-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.post-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--color-brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-interactive);
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-divider);
}
.post-card:hover::before { transform: scaleX(1); }

.post-card .post-meta {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 600;
  color: var(--color-text-muted);
}
.post-card h3 { font-size: var(--text-lg); margin-top: .7rem; }
.post-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-top: .7rem;
  flex: 1;
  line-height: 1.55;
}
.post-card .link-arrow { margin-top: 1.3rem; }

/* Insights single — long-form measure */
.article-body { max-width: var(--content-narrow); margin-inline: auto; }
.article-body h2 { font-size: var(--text-xl); margin-top: 2.4rem; }
.article-body h3 { font-size: var(--text-lg); margin-top: 1.8rem; }
.article-body p,
.article-body ul,
.article-body ol { margin-top: 1rem; color: var(--color-text-muted); }
.article-body ul,
.article-body ol { padding-left: 1.2rem; }
.article-body li { margin-top: .4rem; }


/* ---------- 9. COMPLIANCE MACHINERY ---------- */
/* Infrastructure, not decoration. Never remove to tidy a layout.
   See DESIGN_SYSTEM.md §9. */

.tag-supply {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #1a1c17;
  background: #c7a566;
  padding: .15rem .45rem;
  border-radius: 3px;
  margin-left: .5rem;
  vertical-align: middle;
  white-space: nowrap;
}

.placeholder-note {
  background: var(--color-surface);
  border-left: 3px solid var(--color-brass);
  padding: 1rem 1.2rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.placeholder-note b { color: var(--color-text); }

.disclaimer {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.6;
}


/* ---------- 10. MOTION ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              transform .7s cubic-bezier(.16, 1, .3, 1);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ---------- 11. ELEMENTOR COMPATIBILITY ---------- */
/* Hybrid model: Elementor owns structure, this file owns styling.
   Apply these class names in the Elementor "CSS Classes" field. */

/* Let our bands run full-bleed inside Elementor containers */
.e-con.band-green,
.e-con.band-ink,
.e-con.band-surface,
.e-con.band-offset { --e-con-margin: 0; }

/* Elementor container widths mapped to our measures */
.e-con.wrap > .e-con-inner {
  max-width: var(--content-wide);
  margin-inline: auto;
}
.e-con.measure-default > .e-con-inner { max-width: var(--content-default); }
.e-con.measure-narrow  > .e-con-inner { max-width: var(--content-narrow); }

/* Elementor widgets inherit the system's faces rather than the kit defaults */
.elementor-widget-heading .elementor-heading-title { font-family: var(--font-display); }
.elementor-widget-text-editor,
.elementor-widget-icon-list { font-family: var(--font-body); }

/* Hello Elementor resets we do not want fighting the system */
.site-header, .site-footer { background: transparent; }

/* Gravity Forms — inherit tokens rather than plugin defaults */
.gform_wrapper .gform-field-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper select,
.gform_wrapper textarea {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: .7rem .9rem;
}
.gform_wrapper .gform_footer input[type="submit"] {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  background: var(--color-brass);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: .85rem 1.6rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.gform_wrapper .gform_footer input[type="submit"]:hover {
  background: var(--color-brass-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
[data-theme="dark"] .gform_wrapper .gform_footer input[type="submit"] { color: #1a1c17; }


/* ---------- BREAKPOINTS ---------- */
/* Per DESIGN_SYSTEM.md §5. QA floor: 1440px and 390px, both themes. */

@media (max-width: 940px) {
  .svc-grid,
  .doc-tiers,
  .steps,
  .dicho-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .btn { width: 100%; justify-content: center; }
}


/* ============================================================
   PATCH 1.0.1 — theme-switch repaint fix
   The v1.0 body rule transitions the `background` SHORTHAND. When the
   value comes from a custom property, Chrome does not re-trigger that
   transition on a --var change, so the old colour stays painted and the
   light/dark switch appears to do nothing. Transitioning
   `background-color` explicitly fixes it.
   FOLD THIS INTO THE CANONICAL site/style.css — do not leave as a patch.
   ============================================================ */
body {
  background-color: var(--color-bg);
  transition: background-color .4s ease, color .4s ease;
}


/* ============================================================
   PATCH 1.0.2 — Elementor global typography override

   WHY: respira_update_elementor_global_typography writes only to the
   kit's `custom` list and omits the typography_typography:"custom"
   flag, so the four SYSTEM fonts stay on Elementor's Roboto defaults
   and cannot be corrected through the connector. Rewriting the kit's
   _elementor_page_settings meta directly was rejected as too risky —
   it would mean overwriting the working global colours too.

   HOW: Elementor emits kit typography as CSS variables scoped to
   body.elementor-kit-N. Redefining them here at higher specificity
   (0,1,1 vs 0,1,0) repoints Elementor's own globals at the design
   system faces, without needing to know the kit ID.

   REMOVE THIS BLOCK if the kit is ever corrected by hand in
   Elementor -> Site Settings -> Global Fonts.
   ============================================================ */
body[class*="elementor-kit-"] {
  --e-global-typography-primary-font-family:   var(--font-display);
  --e-global-typography-primary-font-weight:   500;
  --e-global-typography-secondary-font-family: var(--font-display);
  --e-global-typography-secondary-font-weight: 400;
  --e-global-typography-text-font-family:      var(--font-body);
  --e-global-typography-text-font-weight:      400;
  --e-global-typography-accent-font-family:    var(--font-body);
  --e-global-typography-accent-font-weight:    600;
}

/* Elementor widgets fall back to the system faces when no widget-level
   typography is set. Explicit per-widget settings still win by load
   order, which is intended — the old design's widgets keep their fonts
   until those pages are rebuilt. */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-theme-page-title .elementor-heading-title,
.elementor-widget-theme-post-title .elementor-heading-title {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.elementor-widget-text-editor,
.elementor-widget-icon-list .elementor-icon-list-text,
.elementor-widget-button .elementor-button {
  font-family: var(--font-body);
}


/* ============================================================
   12. GLOBAL CHROME — header, nav, mobile, footer
   Built in the child theme rather than an Elementor HFE template:
   two header states + dropdown + toggle + mobile menu need markup
   and JS control, and wp_nav_menu() keeps the menu editable.
   ============================================================ */

/* ---- Header ---- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  transition: background var(--transition-interactive),
              box-shadow var(--transition-interactive),
              border-color var(--transition-interactive);
  border-bottom: 1px solid transparent;
}
.site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1rem;
}

/* Over-hero state: transparent, white text */
.site-header:not(.scrolled) { background: transparent; }
.site-header:not(.scrolled) .nav-link,
.site-header:not(.scrolled) .brand-text,
.site-header:not(.scrolled) .menu-btn { color: #fff; }
.site-header:not(.scrolled) .theme-toggle {
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.4);
}
.site-header:not(.scrolled) .theme-toggle:hover {
  color: #fff; border-color: #fff;
}

/* Scrolled state: blur, surface tint, hairline, shadow */
.site-header.scrolled {
  background: color-mix(in oklab, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--color-divider);
  box-shadow: var(--shadow-sm);
}
.site-header.scrolled .nav-link,
.site-header.scrolled .brand-text { color: var(--color-text); }

body.has-fixed-header { padding-top: 0; }

/* ---- Brand ---- */
.brand { display: flex; align-items: center; gap: .7rem; flex: none; }
.brand img { max-height: 46px; width: auto; }
.brand-text {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* ---- Primary nav ---- */
.primary-nav > ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.9rem;
  margin: 0;
  padding: 0;
}
.primary-nav li { position: relative; }
.nav-link, .primary-nav a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  padding-block: .4rem;
  display: inline-block;
  border-bottom: 1px solid transparent;
}
.primary-nav a:hover { color: var(--color-brass); border-bottom-color: var(--color-brass); }
.primary-nav .current-menu-item > a,
.primary-nav .current-page-ancestor > a { border-bottom-color: var(--color-brass); }

/* Dropdown */
.primary-nav .sub-menu {
  list-style: none;
  position: absolute;
  top: calc(100% + .7rem);
  left: -1rem;
  min-width: 268px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: .5rem;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-interactive),
              transform var(--transition-interactive),
              visibility var(--transition-interactive);
}
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: none;
}
.primary-nav li:focus-within > .sub-menu {
  transition-property: opacity, transform;
}
.primary-nav .sub-menu a {
  display: block;
  padding: .6rem .8rem;
  border-radius: var(--radius-sm);
  border-bottom: none;
  color: var(--color-text);
  white-space: normal;
}
.primary-nav .sub-menu a:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-bottom: none;
}

/* ---- Header actions ---- */
.header-actions { display: flex; align-items: center; gap: .8rem; flex: none; }

/* ---- Hamburger ---- */
.menu-btn {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  color: var(--color-text);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
}

/* ---- Mobile menu ---- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: var(--color-bg);
  padding: 5.5rem clamp(1.25rem,5vw,2.5rem) 2rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--transition-interactive);
  visibility: hidden;
}
.mobile-menu.open { transform: none; visibility: visible; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu > ul > li { border-bottom: 1px solid var(--color-divider); }
.mobile-menu a {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  padding-block: .95rem;
  color: var(--color-text);
}
.mobile-menu .sub-menu { padding-left: 1rem; padding-bottom: .6rem; }
.mobile-menu .sub-menu a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-block: .5rem;
}
.mobile-menu-close {
  position: absolute;
  top: 1.1rem; right: clamp(1.25rem,5vw,2.5rem);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: none;
}
body.menu-open { overflow: hidden; }

/* ---- Sticky mobile CTA ---- */
.mobile-cta {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 940;
  padding: .7rem clamp(1rem,4vw,1.5rem);
  background: color-mix(in oklab, var(--color-surface) 94%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-divider);
}
.mobile-cta .btn { width: 100%; justify-content: center; }

/* ---- Footer ---- */
.site-footer {
  background: var(--color-ink-band);
  color: var(--color-text-inverse);
  padding-block: clamp(3rem,6vw,4.5rem) 2rem;
}
.site-footer a { color: rgba(246,243,236,.78); }
.site-footer a:hover { color: var(--color-brass); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
}
.footer-brand img { max-height: 54px; width: auto; margin-bottom: 1rem; }
.footer-brand p {
  font-size: var(--text-sm);
  color: rgba(246,243,236,.62);
  max-width: 34ch;
  line-height: 1.6;
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 600;
  color: var(--color-brass);
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-col li { font-size: var(--text-sm); }
.footer-office { font-size: var(--text-sm); color: rgba(246,243,236,.78); line-height: 1.65; }
.footer-office + .footer-office { margin-top: 1.1rem; }
.footer-office strong {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-text-inverse);
  margin-bottom: .2rem;
}
.footer-bottom {
  margin-top: clamp(2.5rem,5vw,3.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid rgba(246,243,236,.14);
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.site-footer .disclaimer { color: rgba(246,243,236,.5); max-width: 78ch; }
.site-footer .placeholder-note {
  background: rgba(246,243,236,.06);
  color: rgba(246,243,236,.7);
  margin-bottom: 1.4rem;
}
.site-footer .placeholder-note b { color: var(--color-text-inverse); }

/* ---- Chrome breakpoints ---- */
@media (max-width: 940px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .primary-nav, .header-actions .btn { display: none; }
  .menu-btn { display: flex; }
  .mobile-cta { display: block; }
  body { padding-bottom: 4.5rem; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
}


/* ============================================================
   PATCH 1.0.3 — chrome corrections

   (a) `color` suffers the same var()-transition defect as `background`
       did in 1.0.1: when --color-text changes, the transition fails to
       re-trigger and the old colour stays painted. Transitioning only
       background-color keeps the theme fade smooth without freezing
       text at the wrong value.

   (b) wp_nav_menu() emits plain <a> with no .nav-link class, so the
       over-hero rules have to target .primary-nav a directly.

   (c) The header must NOT default to transparent/white text. Only
       pages with a dark hero behind the header can carry that; on an
       ordinary page it renders white-on-white. Solid is now the
       default and .over-hero opts in — Phase 3 hero sections add it.
   ============================================================ */

/* (a) */
body { transition: background-color .4s ease; }

/* (c) solid by default */
.site-header {
  background: color-mix(in oklab, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--color-divider);
}
.site-header .primary-nav a,
.site-header .brand-text,
.site-header .menu-btn { color: var(--color-text); }

/* (c) opt in to the transparent over-hero treatment */
.site-header.over-hero:not(.scrolled) {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* (b) over-hero text, targeting the real markup */
.site-header.over-hero:not(.scrolled) .primary-nav a,
.site-header.over-hero:not(.scrolled) .brand-text,
.site-header.over-hero:not(.scrolled) .menu-btn { color: #fff; }
.site-header.over-hero:not(.scrolled) .primary-nav a:hover {
  color: #fff;
  border-bottom-color: #fff;
}
.site-header.over-hero:not(.scrolled) .theme-toggle {
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.4);
}
.site-header.over-hero:not(.scrolled) .theme-toggle:hover {
  color: #fff;
  border-color: #fff;
}

/* Scrolled always returns to the solid treatment */
.site-header.scrolled {
  background: color-mix(in oklab, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--color-divider);
  box-shadow: var(--shadow-sm);
}
.site-header.scrolled .primary-nav a,
.site-header.scrolled .brand-text,
.site-header.scrolled .menu-btn { color: var(--color-text); }

/* Fixed header needs the page pushed down on non-hero pages. */
body:not(.bjpa-has-hero) .site-main,
body:not(.bjpa-has-hero) .elementor { padding-top: 84px; }


/* ============================================================
   PATCH 1.0.4 — root-cause fix for theme-switch transition sticking

   ROOT CAUSE: any property transitioned from a var() value fails to
   re-trigger when that custom property changes, leaving the old value
   painted. This has now surfaced three times — background (1.0.1),
   body color (1.0.3), and nav link colour — because the design system
   transitions color/background/border-color on a, button and body, and
   all three are token-driven.

   Patching each symptom is the wrong shape. Instead, suspend
   transitions for a single frame while the theme flips, then restore
   them. Hover, focus and card-lift transitions are untouched — they
   change rules rather than variables, and never had the defect.

   Paired with JS in bjpa_frontend_scripts() which adds
   .theme-switching to <html> around the attribute change.

   FOLD INTO CANONICAL site/style.css. The design system needs this,
   and design-system.html's own toggle has the same latent bug.
   ============================================================ */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
}

/* Section 12 used .site-header:not(.scrolled) at (0,2,0), which beat the
   (0,1,0) solid default added in 1.0.3. Match specificity so solid wins
   and .over-hero remains the explicit opt-in. */
.site-header:not(.over-hero) {
  background: color-mix(in oklab, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--color-divider);
}
.site-header:not(.over-hero) .primary-nav a,
.site-header:not(.over-hero) .brand-text,
.site-header:not(.over-hero) .menu-btn {
  color: var(--color-text);
}
.site-header:not(.over-hero) .theme-toggle {
  color: var(--color-text-muted);
  border-color: var(--color-border);
}


/* ============================================================
   PATCH 1.0.5 — do not force colour onto inherited contexts

   The Gravity Forms compat block set an explicit colour on field
   labels. Where a form sits inside a dark section (the old design's
   navy contact block), that repainted white labels dark — 1.05:1
   against the navy. Labels should inherit from their container so
   they stay correct on light AND dark surfaces.
   ============================================================ */
.gform_wrapper .gform-field-label,
.gform_wrapper legend.gfield_label,
.gform_wrapper .gfield_label {
  color: inherit;
}
.gform_wrapper .gfield_required { color: var(--color-brass); }


/* ============================================================
   PATCH 1.0.6 — brass contrast correction (light mode only)

   The v1.0 light brass #9a7b3f fails WCAG AA as text and as a
   button fill:
     eyebrow on --color-bg              3.53:1
     eyebrow on --color-surface         3.75:1
     eyebrow on --color-surface-offset  3.23:1
     white on brass (primary button)    3.98:1
   The eyebrow renders ~13px at weight 600 — too small to claim
   "large text" relief, so 4.5:1 applies. Dark mode already passes
   (#c7a566 gives 6.9-7.4:1) and is deliberately left alone.

   Darkening the light ramp to #7a6130 gives 5.2:1 on background,
   4.76:1 on the offset band, and lifts the primary button clear.
   Same brass identity, slightly deeper.

   KNOCK-ON: .doc-badge and .flag-badge place near-black text ON
   brass. Darkening the fill inverts that relationship, so badge
   text flips to the inverse token.

   FOLD INTO CANONICAL site/style.css — this is a design system
   defect, not a site-specific override.
   ============================================================ */
:root,
[data-theme="light"] {
  --color-brass:        #7a6130;
  --color-brass-hover:  #684f26;
  --color-brass-active: #56411f;
}

/* Text on a brass fill must now be light, not near-black. */
[data-theme="light"] .doc-card .doc-badge,
:root .doc-card .doc-badge {
  color: #fff;
}

/* .tag-supply keeps its own lighter brass (#c7a566) and near-black
   text — that pairing still passes at 8:1 and is intentionally
   distinct so compliance markers read as annotations, not brand. */


/* ============================================================
   PATCH 1.0.7 — dark mode corrections

   (a) MY BUG, from 1.0.6. The brass override was written as
       `:root, [data-theme="light"]`. `:root` matches <html> in BOTH
       themes, and because the override sits after the dark token
       block in source order at equal specificity, it also overwrote
       DARK brass with the darkened light value. Result: brass text
       at ~2.5:1 on dark surfaces. The dark ramp is restored here and
       the light override must never use a bare :root again.

   (b) DESIGN SYSTEM BUG. --color-text-inverse flips between themes
       (#f6f3ec light, #1a1c17 dark) and is used for text on ink and
       green bands. But those bands are DARK IN BOTH THEMES, so in
       dark mode the token turned band text near-black on near-black
       — the hero headline measured 1.06:1. Band text is now pinned
       light in both themes, which is what "inverse" meant here.

   FOLD BOTH INTO CANONICAL site/style.css.
   ============================================================ */

/* (a) restore the dark brass ramp */
[data-theme="dark"] {
  --color-brass:        #c7a566;
  --color-brass-hover:  #d4b579;
  --color-brass-active: #ddc48f;
}

/* (b) ink and green bands are dark in both themes — text stays light */
.band-green,
.band-ink,
.trust,
.site-footer {
  color: #f6f3ec;
}
.band-green h1, .band-green h2, .band-green h3, .band-green h4,
.band-ink h1,  .band-ink h2,  .band-ink h3,  .band-ink h4,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 {
  color: #f6f3ec;
}
.band-green .text-muted,
.band-ink .text-muted {
  color: rgba(246, 243, 236, .78);
}
.band-green .eyebrow,
.band-ink .eyebrow,
.trust .eyebrow {
  color: #d9c69a;
}


/* ============================================================
   15. HERO PHOTOGRAPHY + PLACEHOLDER IMAGERY

   .page-hero carries the ink gradient scrim the design system
   requires over photography, so headline text never sits directly
   on an image. Header goes transparent automatically on any page
   containing a hero, via :has() — no PHP or JS needed.
   ============================================================ */
.page-hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-block: 9rem clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
.page-hero.hero-home { min-height: 78vh; }
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,22,15,.30) 0%, rgba(20,22,15,.62) 45%, rgba(20,22,15,.88) 100%);
}
.page-hero > * { position: relative; z-index: 1; width: 100%; }
.page-hero,
.page-hero h1, .page-hero h2, .page-hero h3,
.page-hero p { color: #f6f3ec; }
.page-hero .eyebrow { color: #d9c69a; }
.page-hero .lede { color: rgba(246,243,236,.9); }
.page-hero .text-muted { color: rgba(246,243,236,.78); }

/* Header sits transparently over any page that opens with a hero. */
body:has(.page-hero) .site-header:not(.scrolled) {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
body:has(.page-hero) .site-header:not(.scrolled) .primary-nav a,
body:has(.page-hero) .site-header:not(.scrolled) .brand-text,
body:has(.page-hero) .site-header:not(.scrolled) .menu-btn { color: #fff; }
body:has(.page-hero) .site-header:not(.scrolled) .theme-toggle {
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.4);
}
body:has(.page-hero) .site-main,
body:has(.page-hero) .elementor { padding-top: 0; }

/* Editorial figure inside a content column. */
.figure {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  margin-block: 2rem;
}
.figure img { width: 100%; height: auto; display: block; }
.figure.figure-wide { aspect-ratio: 16 / 7; }
.figure.figure-wide img { height: 100%; object-fit: cover; }

/* Split: media beside text. Collapses at 940px with the rest. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

/* Marks unverified/placeholder imagery. Same compliance role as
   .tag-supply — it is infrastructure, not decoration, and must not
   be removed to tidy a layout. */
.img-note {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: .5rem;
  line-height: 1.5;
}
.page-hero .img-note { color: rgba(246,243,236,.6); }

@media (max-width: 940px) {
  .split { grid-template-columns: 1fr; }
  .page-hero { min-height: 52vh; padding-block: 7.5rem 2.5rem; }
  .page-hero.hero-home { min-height: 60vh; }
}


/* ============================================================
   16. PER-PAGE PLACEHOLDER HEROES

   Each page's opening section is promoted to a photographic hero
   here rather than by rewriting every page's markup. All imagery
   below is EXISTING AI-GENERATED PLACEHOLDER ARTWORK carried over
   from the previous site — it depicts no real office, client,
   project, or property of the firm.

   The ::after flag on each hero states that plainly on the page,
   the same way .tag-supply marks unverified text. When the firm
   supplies real photography, delete this entire section and the
   flags disappear with it.
   ============================================================ */

:is(
  body.page-id-56,  body.page-id-160, body.page-id-163, body.page-id-133,
  body.page-id-122, body.page-id-111, body.page-id-72,  body.page-id-170,
  body.page-id-57,  body.page-id-45,  body.page-id-171, body.page-id-172
) .page-content > section:first-child {
  position: relative;
  min-height: 58vh;
  display: flex;
  align-items: flex-end;
  background-color: var(--color-ink-band);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-block: 9rem clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}

:is(
  body.page-id-56,  body.page-id-160, body.page-id-163, body.page-id-133,
  body.page-id-122, body.page-id-111, body.page-id-72,  body.page-id-170,
  body.page-id-57,  body.page-id-45,  body.page-id-171, body.page-id-172
) .page-content > section:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,22,15,.32) 0%, rgba(20,22,15,.64) 45%, rgba(20,22,15,.88) 100%);
}

:is(
  body.page-id-56,  body.page-id-160, body.page-id-163, body.page-id-133,
  body.page-id-122, body.page-id-111, body.page-id-72,  body.page-id-170,
  body.page-id-57,  body.page-id-45,  body.page-id-171, body.page-id-172
) .page-content > section:first-child > * {
  position: relative;
  z-index: 1;
  width: 100%;
}

:is(
  body.page-id-56,  body.page-id-160, body.page-id-163, body.page-id-133,
  body.page-id-122, body.page-id-111, body.page-id-72,  body.page-id-170,
  body.page-id-57,  body.page-id-45,  body.page-id-171, body.page-id-172
) .page-content > section:first-child :is(h1, h2, h3, p) { color: #f6f3ec; }

:is(
  body.page-id-56,  body.page-id-160, body.page-id-163, body.page-id-133,
  body.page-id-122, body.page-id-111, body.page-id-72,  body.page-id-170,
  body.page-id-57,  body.page-id-45,  body.page-id-171, body.page-id-172
) .page-content > section:first-child .eyebrow { color: #d9c69a; }

:is(
  body.page-id-56,  body.page-id-160, body.page-id-163, body.page-id-133,
  body.page-id-122, body.page-id-111, body.page-id-72,  body.page-id-170,
  body.page-id-57,  body.page-id-45,  body.page-id-171, body.page-id-172
) .page-content > section:first-child .text-muted { color: rgba(246,243,236,.8); }

/* Visible placeholder flag — the imagery equivalent of .tag-supply. */
:is(
  body.page-id-56,  body.page-id-160, body.page-id-163, body.page-id-133,
  body.page-id-122, body.page-id-111, body.page-id-72,  body.page-id-170,
  body.page-id-57,  body.page-id-45,  body.page-id-171, body.page-id-172
) .page-content > section:first-child .wrap::after {
  content: "";
  display: block;
  margin-top: 1.6rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: .04em;
  color: rgba(246,243,236,.62);
  border-left: 2px solid var(--color-brass);
  padding-left: .8rem;
  max-width: 62ch;
  line-height: 1.5;
}

/* Header sits transparently over these heroes too. */
body:is(
  .page-id-56,  .page-id-160, .page-id-163, .page-id-133,
  .page-id-122, .page-id-111, .page-id-72,  .page-id-170,
  .page-id-57,  .page-id-45,  .page-id-171, .page-id-172
) .site-header:not(.scrolled) {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
body:is(
  .page-id-56,  .page-id-160, .page-id-163, .page-id-133,
  .page-id-122, .page-id-111, .page-id-72,  .page-id-170,
  .page-id-57,  .page-id-45,  .page-id-171, .page-id-172
) .site-header:not(.scrolled) :is(.primary-nav a, .brand-text, .menu-btn) { color: #fff; }
body:is(
  .page-id-56,  .page-id-160, .page-id-163, .page-id-133,
  .page-id-122, .page-id-111, .page-id-72,  .page-id-170,
  .page-id-57,  .page-id-45,  .page-id-171, .page-id-172
) .site-header:not(.scrolled) .theme-toggle {
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.4);
}
body:is(
  .page-id-56,  .page-id-160, .page-id-163, .page-id-133,
  .page-id-122, .page-id-111, .page-id-72,  .page-id-170,
  .page-id-57,  .page-id-45,  .page-id-171, .page-id-172
) .site-main { padding-top: 0; }

/* --- per-page placeholder artwork --- */
body.page-id-160 .page-content > section:first-child { background-image: url("../../uploads/2025/09/land-use-attorney-2.png"); }
body.page-id-163 .page-content > section:first-child { background-image: url("../../uploads/2025/09/commercial-real-estate.png"); }
body.page-id-133 .page-content > section:first-child { background-image: url("../../uploads/2025/09/land-use-attorney.png"); }
body.page-id-122 .page-content > section:first-child { background-image: url("../../uploads/2025/09/commercial-real-estate-3.png"); }
body.page-id-111 .page-content > section:first-child { background-image: url("../../uploads/2025/09/residential-real-estate-closing-services.png"); }
body.page-id-170 .page-content > section:first-child { background-image: url("../../uploads/2025/04/staff-v1-bg.2306011239550.jpg"); }
body.page-id-45  .page-content > section:first-child { background-image: url("../../uploads/2025/04/content-img.2306011246550.jpg"); }
body.page-id-171 .page-content > section:first-child { background-image: url("../../uploads/2025/04/bret-jones-pa-local-image-1.png"); }
body.page-id-172 .page-content > section:first-child { background-image: url("../../uploads/2025/04/bret-jones-pa-local-image.png"); }

/* Attorney portraits on bio pages. */
.bio-portrait {
  float: right;
  width: min(38%, 300px);
  margin: 0 0 1.6rem 2rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-surface-offset);
}
.bio-portrait img { width: 100%; height: auto; display: block; }
@media (max-width: 640px) {
  .bio-portrait { float: none; width: 100%; margin: 0 0 1.6rem; }
}


/* ============================================================
   18. HEADER LOGO INVERSION

   The WordPress custom logo is the WHITE variant. That is correct
   over a hero and on the ink footer, but wrong once the header goes
   solid on a light surface — white on parchment.

   So: invert to black by default in LIGHT theme, and restore white
   only in the states where the header is actually transparent over
   a dark hero. Dark theme needs no inversion — its solid header is
   dark, so the white mark is already correct.

   brightness(0) maps a white transparent PNG to solid black while
   preserving the alpha channel.
   ============================================================ */
[data-theme="light"] .site-header .brand img {
  filter: brightness(0);
  transition: filter var(--transition-interactive);
}

/* Transparent header states keep the white mark. */
[data-theme="light"] .site-header.over-hero:not(.scrolled) .brand img,
[data-theme="light"] body:has(.page-hero) .site-header:not(.scrolled) .brand img,
[data-theme="light"] body:is(
  .page-id-56,  .page-id-160, .page-id-163, .page-id-133,
  .page-id-122, .page-id-111, .page-id-72,  .page-id-170,
  .page-id-57,  .page-id-45,  .page-id-171, .page-id-172,
  .page-id-189
) .site-header:not(.scrolled) .brand img {
  filter: none;
}

/* The Difference — placeholder hero (see section 17). */
:is(body.page-id-189) .page-content > section:first-child {
  position: relative;
  min-height: 58vh;
  display: flex;
  align-items: flex-end;
  background-color: var(--color-ink-band);
  background-image: url("../../uploads/2026/09/bjpa-hero-the-difference.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-block: 9rem clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
body.page-id-189 .page-content > section:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,22,15,.32) 0%, rgba(20,22,15,.64) 45%, rgba(20,22,15,.88) 100%);
}
body.page-id-189 .page-content > section:first-child > * { position: relative; z-index: 1; width: 100%; }
body.page-id-189 .page-content > section:first-child :is(h1,h2,h3,p) { color: #f6f3ec; }
body.page-id-189 .page-content > section:first-child .eyebrow { color: #d9c69a; }
body.page-id-189 .page-content > section:first-child .wrap::after {
  content: "";
  display: block;
  margin-top: 1.6rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: .04em;
  color: rgba(246,243,236,.62);
  border-left: 2px solid var(--color-brass);
  padding-left: .8rem;
  max-width: 62ch;
  line-height: 1.5;
}
body.page-id-189 .site-header:not(.scrolled) {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
body.page-id-189 .site-header:not(.scrolled) :is(.primary-nav a, .brand-text, .menu-btn) { color: #fff; }
body.page-id-189 .site-header:not(.scrolled) .theme-toggle {
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.4);
}
body.page-id-189 .site-main { padding-top: 0; }


/* ============================================================
   19. NAV COLOUR SCOPING + HEADER BREATHING ROOM

   BUG: the over-hero rules coloured `.primary-nav a` — which matches
   dropdown links too. The dropdown panel has a light surface
   background, so its items rendered white-on-white and were
   effectively invisible. Over-hero colouring must apply ONLY to
   top-level links, i.e. direct children of the top-level <li>.

   Also: the header sat at 1rem padding-block, which read as cramped
   against the hero. Raised, with matching hero offset.
   ============================================================ */

/* Restrict every over-hero / transparent-state colour rule to
   top-level links only. */
.site-header .primary-nav .sub-menu a,
.site-header.over-hero:not(.scrolled) .primary-nav .sub-menu a,
body:has(.page-hero) .site-header:not(.scrolled) .primary-nav .sub-menu a,
body:is(
  .page-id-56,  .page-id-160, .page-id-163, .page-id-133,
  .page-id-122, .page-id-111, .page-id-72,  .page-id-170,
  .page-id-57,  .page-id-45,  .page-id-171, .page-id-172,
  .page-id-189
) .site-header:not(.scrolled) .primary-nav .sub-menu a {
  color: var(--color-text);
}
.site-header .primary-nav .sub-menu a:hover,
body:has(.page-hero) .site-header:not(.scrolled) .primary-nav .sub-menu a:hover,
body:is(
  .page-id-56,  .page-id-160, .page-id-163, .page-id-133,
  .page-id-122, .page-id-111, .page-id-72,  .page-id-170,
  .page-id-57,  .page-id-45,  .page-id-171, .page-id-172,
  .page-id-189
) .site-header:not(.scrolled) .primary-nav .sub-menu a:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-bottom-color: transparent;
}

/* Dropdown panel: tighten to its content and keep it readable. */
.primary-nav .sub-menu {
  min-width: 250px;
  width: max-content;
  max-width: 320px;
  padding: .45rem;
}
.primary-nav .sub-menu li { width: 100%; }
.primary-nav .sub-menu a {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.35;
}

/* Hover bridge — stops the dropdown closing in the gap between the
   top-level link and the panel. */
.primary-nav > ul > li.menu-item-has-children::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: .8rem;
}

/* --- breathing room --- */
.site-header .header-inner { padding-block: 1.5rem; }
.brand img { max-height: 52px; }

/* Heroes gain matching offset so content clears the taller header. */
.page-hero { padding-block: 10.5rem clamp(3rem, 5vw, 4.5rem); }
:is(
  body.page-id-56,  body.page-id-160, body.page-id-163, body.page-id-133,
  body.page-id-122, body.page-id-111, body.page-id-72,  body.page-id-170,
  body.page-id-57,  body.page-id-45,  body.page-id-171, body.page-id-172,
  body.page-id-189
) .page-content > section:first-child {
  padding-block: 10.5rem clamp(3rem, 5vw, 4.5rem);
}

/* Non-hero pages: clear the taller fixed header. */
body:not(:has(.page-hero)):not(.page-id-56):not(.page-id-160):not(.page-id-163):not(.page-id-133):not(.page-id-122):not(.page-id-111):not(.page-id-72):not(.page-id-170):not(.page-id-57):not(.page-id-45):not(.page-id-171):not(.page-id-172):not(.page-id-189) .site-main {
  padding-top: 104px;
}

html { scroll-padding-top: 7rem; }

@media (max-width: 940px) {
  .page-hero { padding-block: 8.5rem 2.5rem; }
  :is(
    body.page-id-56,  body.page-id-160, body.page-id-163, body.page-id-133,
    body.page-id-122, body.page-id-111, body.page-id-72,  body.page-id-170,
    body.page-id-57,  body.page-id-45,  body.page-id-171, body.page-id-172,
    body.page-id-189
  ) .page-content > section:first-child { padding-block: 8.5rem 2.5rem; }
}


/* ============================================================
   20. GRAVITY FORMS — OVERRIDE THIRD-PARTY INLINE STYLING

   The "Styles & Layouts for Gravity Forms" plugin prints inline CSS
   at ID specificity (body #gform_wrapper_1 .gform_body …) AFTER the
   theme stylesheet. Its values are inherited from the old navy
   design: white labels and a black submit button. On the rebuilt
   light contact panel that produced white-on-white labels measuring
   1.0:1 — invisible — and a black CTA that breaks the one-brass-
   button rule.

   Theme CSS cannot win on specificity here, so these use
   !important. That is the correct tool for overriding a third
   party's inline output; it is NOT used anywhere in the design
   system's own cascade.

   PROPER FIX: reconfigure or deactivate that plugin and let the
   design system style the form directly. This block is the interim.
   ============================================================ */
body .gform_wrapper .gfield_label,
body .gform_wrapper .gform-field-label,
body .gform_wrapper legend.gfield_label,
body .gform_wrapper .ginput_complex label,
body .gform_wrapper .gform-field-label--type-sub {
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: var(--text-sm) !important;
}
body .gform_wrapper .gfield_description,
body .gform_wrapper .gform_fileupload_rules,
body .gform_wrapper .gfield_consent_label {
  color: var(--color-text-muted) !important;
  font-family: var(--font-body) !important;
}
body .gform_wrapper .gfield_required,
body .gform_wrapper .gfield_required_text {
  color: var(--color-brass) !important;
  font-weight: 600 !important;
}

body .gform_wrapper input[type="text"],
body .gform_wrapper input[type="email"],
body .gform_wrapper input[type="tel"],
body .gform_wrapper input[type="url"],
body .gform_wrapper input[type="number"],
body .gform_wrapper select,
body .gform_wrapper textarea {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--color-text) !important;
  background: var(--color-surface-2) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: .7rem .9rem !important;
}
body .gform_wrapper input:focus,
body .gform_wrapper select:focus,
body .gform_wrapper textarea:focus {
  outline: 2px solid var(--color-brass) !important;
  outline-offset: 2px !important;
  border-color: var(--color-primary) !important;
}
body .gform_wrapper ::placeholder { color: var(--color-text-faint) !important; }

/* The submit button is a primary CTA and must read as one. */
body .gform_wrapper .gform_footer .gform_button,
body .gform_wrapper .gform_footer input[type="submit"],
body .gform_wrapper .gform_footer button {
  background: var(--color-brass) !important;
  background-color: var(--color-brass) !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm) !important;
  padding: .85rem 1.6rem !important;
  box-shadow: var(--shadow-sm) !important;
  cursor: pointer !important;
  transition: background var(--transition-interactive),
              transform var(--transition-interactive),
              box-shadow var(--transition-interactive) !important;
}
body .gform_wrapper .gform_footer .gform_button:hover,
body .gform_wrapper .gform_footer input[type="submit"]:hover,
body .gform_wrapper .gform_footer button:hover {
  background: var(--color-brass-hover) !important;
  background-color: var(--color-brass-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}
[data-theme="dark"] body .gform_wrapper .gform_footer .gform_button,
[data-theme="dark"] body .gform_wrapper .gform_footer input[type="submit"],
[data-theme="dark"] body .gform_wrapper .gform_footer button {
  color: #1a1c17 !important;
}

/* Validation states keep the system's colours. */
body .gform_wrapper .gfield_error .gfield_label { color: var(--color-text) !important; }
body .gform_wrapper .validation_message {
  color: #a8543f !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
}
[data-theme="dark"] body .gform_wrapper .validation_message { color: #d08b77 !important; }


/* ============================================================
   21. MOBILE MENU BUTTON SIZING

   The hamburger was a 40px box around a 22px glyph — under the 44px
   minimum touch target, and visually undersized against a 52px logo
   and 102px header. Enlarged to a 48px target with a 30px glyph, and
   the close control matched so the two read as a pair.
   ============================================================ */
.menu-btn {
  width: 48px;
  height: 48px;
  margin-right: -.4rem;
}
.menu-btn svg {
  width: 30px;
  height: 30px;
}
.menu-btn:hover { color: var(--color-brass); }

.mobile-menu-close {
  width: 48px;
  height: 48px;
}
.mobile-menu-close svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 520px) {
  .menu-btn { width: 46px; height: 46px; }
  .menu-btn svg { width: 28px; height: 28px; }
}


/* ============================================================
   22. IMAGE LIBRARY — BATCH B

   Replaces the carried-over placeholder artwork from section 16
   and section 18 with the commissioned Batch B library: town,
   village and rural-scale new urbanist scenes with Central
   Florida character. WebP, ~280KB each, down from 0.8-4MB PNGs.

   Appended rather than edited into section 16 so the original
   block stays intact and this swap can be reverted by deleting
   this section alone. Selectors are identical to section 16 /
   section 18, so these win on source order at equal specificity.

   DELIBERATELY NOT CHANGED: page-id-171 and page-id-172 (the two
   attorney bio pages). Their imagery is the firm's to supply, so
   they keep the original placeholders AND the original
   "FIRM TO SUPPLY" flag. Do not fold them in here.

   The caption below is also rewritten. The section 16 flag said
   "Placeholder imagery — AI-generated ... FIRM TO SUPPLY", which
   is now wrong on both counts: this artwork is the intended
   final imagery, and nothing further is coming from the firm to
   replace it. It remains flagged as representative because that
   is true and because Florida Bar advertising rules require the
   distinction to be visible, not buried.
   ============================================================ */

body.page-id-160 .page-content > section:first-child { background-image: url("../../uploads/2026/09/bjpa-hero-new-urbanism.webp"); }
body.page-id-163 .page-content > section:first-child { background-image: url("../../uploads/2026/09/bjpa-hero-outside-general-counsel.webp"); }
body.page-id-133 .page-content > section:first-child { background-image: url("../../uploads/2026/09/bjpa-hero-land-use.webp"); }
body.page-id-122 .page-content > section:first-child { background-image: url("../../uploads/2026/09/bjpa-hero-commercial-real-estate.webp"); }
body.page-id-111 .page-content > section:first-child { background-image: url("../../uploads/2026/09/bjpa-hero-residential-closings.webp"); }
body.page-id-170 .page-content > section:first-child { background-image: url("../../uploads/2026/09/bjpa-hero-team.webp"); }
body.page-id-45  .page-content > section:first-child { background-image: url("../../uploads/2026/09/bjpa-hero-insights.webp"); }
body.page-id-189 .page-content > section:first-child { background-image: url("../../uploads/2026/09/bjpa-hero-the-difference.webp"); }

/* Caption: representative rather than placeholder. Bio pages 171
   and 172 are excluded and keep the FIRM TO SUPPLY flag. */
:is(
  body.page-id-56,  body.page-id-160, body.page-id-163, body.page-id-133,
  body.page-id-122, body.page-id-111, body.page-id-72,  body.page-id-170,
  body.page-id-57,  body.page-id-45,  body.page-id-189
) .page-content > section:first-child .wrap::after {
  content: "";
}


/* ============================================================
   23. HEADER-BAND SCRIM — CONTRAST FIX

   BUG: white header text was failing WCAG AA on every hero.
   Reported as light-on-light on Contact; measurement showed it
   is systemic, and Contact is not even the worst case.

   ROOT CAUSE: the hero scrim is a vertical gradient that starts
   at its WEAKEST value (.30-.32) at the very top — which is
   exactly where the fixed header sits. That was survivable with
   the old artwork, which was dark at the top. Every image in the
   Batch B library is golden-hour with bright sky in the upper
   right, which is precisely where the nav links and theme toggle
   land.

   Measured contrast of #fff against the 95th-percentile bright
   spot behind the nav, before this fix:

     land-use 2.22 · residential-closings 2.29 · contact 2.31
     the-difference 2.33 · commercial-real-estate 2.36
     about 2.38 · new-urbanism 2.65 · home 2.67
     practice-areas 2.81 · insights 3.02 · team 3.21
     outside-general-counsel 3.50

   All below the 4.5:1 floor; several below 2.5:1.

   FIX: a second gradient layer stacked above the existing scrim,
   anchored to the TOP of the hero and faded out by 170px — just
   past the 102px header. Effective alpha in the header band rises
   from .32 to .59, which lifts every hero to 5.06:1 or better
   (worst: residential-closings 5.06; best: outside-general-
   counsel 7.06). Because it is a short fade rather than a bar, it
   reads as vignetting and leaves the headline zone untouched —
   that sits lower, where the base scrim is already .64-.88.

   Anchored in PIXELS, not a percentage of hero height, so it
   tracks the header rather than the viewport.

   FOLD INTO CANONICAL site/style.css — the underlying defect is
   in the design system's hero scrim, not in this site's artwork.
   ============================================================ */

/* Homepage hero — base scrim .30 / .62 / .88 preserved beneath. */
.page-hero::before {
  background:
    linear-gradient(180deg, rgba(20,22,15,.46) 0px, rgba(20,22,15,.40) 70px, rgba(20,22,15,0) 170px),
    linear-gradient(180deg, rgba(20,22,15,.30) 0%, rgba(20,22,15,.62) 45%, rgba(20,22,15,.88) 100%);
}

/* Section 16 + section 18 heroes — base scrim .32 / .64 / .88. */
:is(
  body.page-id-56,  body.page-id-160, body.page-id-163, body.page-id-133,
  body.page-id-122, body.page-id-111, body.page-id-72,  body.page-id-170,
  body.page-id-57,  body.page-id-45,  body.page-id-171, body.page-id-172,
  body.page-id-189
) .page-content > section:first-child::before {
  background:
    linear-gradient(180deg, rgba(20,22,15,.46) 0px, rgba(20,22,15,.40) 70px, rgba(20,22,15,0) 170px),
    linear-gradient(180deg, rgba(20,22,15,.32) 0%, rgba(20,22,15,.64) 45%, rgba(20,22,15,.88) 100%);
}

/* The theme toggle's border was rgba(255,255,255,.4) over these
   same bright areas — a 1px line at that alpha is not reliably
   visible even once the scrim is corrected. Raised to .6, which
   keeps it quiet against the header without disappearing. */
body:has(.page-hero) .site-header:not(.scrolled) .theme-toggle,
body:is(
  .page-id-56,  .page-id-160, .page-id-163, .page-id-133,
  .page-id-122, .page-id-111, .page-id-72,  .page-id-170,
  .page-id-57,  .page-id-45,  .page-id-171, .page-id-172,
  .page-id-189
) .site-header:not(.scrolled) .theme-toggle {
  color: #fff;
  border-color: rgba(255,255,255,.6);
}


/* ============================================================
   24. COMPLIANCE TEXT LEGIBILITY

   Found during the same contrast pass as section 23.

   (a) .img-note was set in --color-text-faint, which the design
       system reserves for "captions and tertiary detail only"
       (DESIGN_SYSTEM.md §2). Measured against its actual
       surfaces it fails AA in BOTH themes:

         light  #8c8c81 on --color-bg      3.01:1
         light  #8c8c81 on offset band     2.75:1
         dark   #77766c on --color-bg      3.76:1
         dark   #77766c on offset band     3.36:1

       The faint token is the right choice for a decorative
       caption. It is the wrong choice here: .img-note carries
       the representative-imagery disclaimer, which is required
       text under Florida Bar advertising rules and has to be
       readable. Moving it to --color-text-muted clears AA on
       every surface in both themes (5.41 - 6.78:1) while still
       reading as secondary to body copy.

   (b) The hero ::after caption sat at rgba(246,243,236,.62),
       which measured exactly 4.50:1 over the worst hero — on
       the AA floor with no margin, at ~13px. Raised to .72
       (5.45:1 worst case). Still visibly quieter than the lede
       above it.

   FOLD (a) INTO CANONICAL site/style.css — it is a design system
   defect. Any site using .img-note for compliance text has it.
   ============================================================ */

/* (a) */
.img-note { color: var(--color-text-muted); }

/* (b) */
:is(
  body.page-id-56,  body.page-id-160, body.page-id-163, body.page-id-133,
  body.page-id-122, body.page-id-111, body.page-id-72,  body.page-id-170,
  body.page-id-57,  body.page-id-45,  body.page-id-171, body.page-id-172,
  body.page-id-189
) .page-content > section:first-child .wrap::after {
  color: rgba(246,243,236,.72);
}

/* The hero variant keeps its own lighter treatment, raised to
   match. .page-hero .img-note sits on the scrim, not a surface. */
.page-hero .img-note { color: rgba(246,243,236,.72); }


/* ============================================================
   25. HERO SELECTOR FIX — :first-child -> :first-of-type

   BUG: the Contact page hero never rendered. The opening section
   showed as a plain light band, and because the header still went
   transparent-with-white-text on that page, the nav and logo sat
   white-on-parchment and were invisible.

   ROOT CAUSE: sections 16, 18, 19, 23 and 24 all target the hero
   as `.page-content > section:first-child`. On Contact, the
   "Styles & Layouts for Gravity Forms" plugin injects two inline
   <style> elements as the FIRST children of .page-content:

     0: STYLE   <- body #gform_wrapper_1 { ... }
     1: STYLE   <- #gform_wrapper_1 .gform_body ...
     2: SECTION.section band-surface   <- the intended hero
     3: SECTION.section

   :first-child is false for that section, so every hero rule
   silently failed to match. Verified across all 13 hero pages:
   Contact is the ONLY one affected, because it is the only page
   carrying a Gravity Form.

   This is the same plugin already documented in section 20 as
   fighting the design system with ID-specificity inline CSS. It
   is now also breaking layout, which strengthens the case for
   retiring it.

   FIX: :first-of-type instead. It selects the first <section>
   among its siblings regardless of what non-section nodes a
   plugin injects ahead of it. Applied to ALL hero pages, not just
   Contact, so the same injection cannot break another page later.
   On pages where the section genuinely is the first child the two
   selectors resolve to the same element, so nothing changes there.

   This block re-declares the full hero treatment against the
   corrected selector, carrying forward the section 22 artwork,
   the section 23 header scrim and the section 24 caption colour.

   FOLD INTO CANONICAL site/style.css — :first-child was always
   the fragile choice for this pattern.
   ============================================================ */

:is(
  body.page-id-56,  body.page-id-160, body.page-id-163, body.page-id-133,
  body.page-id-122, body.page-id-111, body.page-id-72,  body.page-id-170,
  body.page-id-57,  body.page-id-45,  body.page-id-171, body.page-id-172,
  body.page-id-189
) .page-content > section:first-of-type {
  position: relative;
  min-height: 58vh;
  display: flex;
  align-items: flex-end;
  background-color: var(--color-ink-band);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-block: 10.5rem clamp(3rem, 5vw, 4.5rem);
  overflow: hidden;
}

:is(
  body.page-id-56,  body.page-id-160, body.page-id-163, body.page-id-133,
  body.page-id-122, body.page-id-111, body.page-id-72,  body.page-id-170,
  body.page-id-57,  body.page-id-45,  body.page-id-171, body.page-id-172,
  body.page-id-189
) .page-content > section:first-of-type::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20,22,15,.46) 0px, rgba(20,22,15,.40) 70px, rgba(20,22,15,0) 170px),
    linear-gradient(180deg, rgba(20,22,15,.32) 0%, rgba(20,22,15,.45) 18%, rgba(20,22,15,.57) 45%, rgba(20,22,15,.75) 75%, rgba(20,22,15,.88) 100%);
}

:is(
  body.page-id-56,  body.page-id-160, body.page-id-163, body.page-id-133,
  body.page-id-122, body.page-id-111, body.page-id-72,  body.page-id-170,
  body.page-id-57,  body.page-id-45,  body.page-id-171, body.page-id-172,
  body.page-id-189
) .page-content > section:first-of-type > * {
  position: relative;
  z-index: 1;
  width: 100%;
}

:is(
  body.page-id-56,  body.page-id-160, body.page-id-163, body.page-id-133,
  body.page-id-122, body.page-id-111, body.page-id-72,  body.page-id-170,
  body.page-id-57,  body.page-id-45,  body.page-id-171, body.page-id-172,
  body.page-id-189
) .page-content > section:first-of-type :is(h1, h2, h3, p) { color: #f6f3ec; }

:is(
  body.page-id-56,  body.page-id-160, body.page-id-163, body.page-id-133,
  body.page-id-122, body.page-id-111, body.page-id-72,  body.page-id-170,
  body.page-id-57,  body.page-id-45,  body.page-id-171, body.page-id-172,
  body.page-id-189
) .page-content > section:first-of-type .eyebrow { color: #d9c69a; }

:is(
  body.page-id-56,  body.page-id-160, body.page-id-163, body.page-id-133,
  body.page-id-122, body.page-id-111, body.page-id-72,  body.page-id-170,
  body.page-id-57,  body.page-id-45,  body.page-id-171, body.page-id-172,
  body.page-id-189
) .page-content > section:first-of-type .text-muted { color: rgba(246,243,236,.8); }

/* Representative-imagery caption. Bio pages 171/172 keep the
   FIRM TO SUPPLY wording — see section 22. */
:is(
  body.page-id-56,  body.page-id-160, body.page-id-163, body.page-id-133,
  body.page-id-122, body.page-id-111, body.page-id-72,  body.page-id-170,
  body.page-id-57,  body.page-id-45,  body.page-id-189
) .page-content > section:first-of-type .wrap::after {
  content: "";
  display: block;
  margin-top: 1.6rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: .04em;
  color: rgba(246,243,236,.72);
  border-left: 2px solid var(--color-brass);
  padding-left: .8rem;
  max-width: 62ch;
  line-height: 1.5;
}

:is(body.page-id-171, body.page-id-172) .page-content > section:first-of-type .wrap::after {
  content: "";
  display: block;
  margin-top: 1.6rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: .04em;
  color: rgba(246,243,236,.72);
  border-left: 2px solid var(--color-brass);
  padding-left: .8rem;
  max-width: 62ch;
  line-height: 1.5;
}

/* --- artwork, keyed to the corrected selector --- */
body.page-id-160 .page-content > section:first-of-type { background-image: url("../../uploads/2026/09/bjpa-hero-new-urbanism.webp"); }
body.page-id-163 .page-content > section:first-of-type { background-image: url("../../uploads/2026/09/bjpa-hero-outside-general-counsel.webp"); }
body.page-id-133 .page-content > section:first-of-type { background-image: url("../../uploads/2026/09/bjpa-hero-land-use.webp"); }
body.page-id-122 .page-content > section:first-of-type { background-image: url("../../uploads/2026/09/bjpa-hero-commercial-real-estate.webp"); }
body.page-id-111 .page-content > section:first-of-type { background-image: url("../../uploads/2026/09/bjpa-hero-residential-closings.webp"); }
body.page-id-170 .page-content > section:first-of-type { background-image: url("../../uploads/2026/09/bjpa-hero-team.webp"); }
body.page-id-45  .page-content > section:first-of-type { background-image: url("../../uploads/2026/09/bjpa-hero-insights.webp"); }
body.page-id-189 .page-content > section:first-of-type { background-image: url("../../uploads/2026/09/bjpa-hero-the-difference.webp"); }
body.page-id-171 .page-content > section:first-of-type { background-image: url("../../uploads/2025/04/bret-jones-pa-local-image-1.png"); }
body.page-id-172 .page-content > section:first-of-type { background-image: url("../../uploads/2025/04/bret-jones-pa-local-image.png"); }

@media (max-width: 940px) {
  :is(
    body.page-id-56,  body.page-id-160, body.page-id-163, body.page-id-133,
    body.page-id-122, body.page-id-111, body.page-id-72,  body.page-id-170,
    body.page-id-57,  body.page-id-45,  body.page-id-171, body.page-id-172,
    body.page-id-189
  ) .page-content > section:first-of-type { padding-block: 8.5rem 2.5rem; }
}


/* ============================================================
   26. VISUAL PASS CORRECTIONS

   Three defects found rendering the site in a browser at desktop
   width. All three predate the image work.

   ------------------------------------------------------------
   (a) BANDS WERE NOT FULL-BLEED

   Hello Elementor sets .site-main { max-width: 1140px }, its
   stock container width. Every hero and every .band-* section
   was therefore boxed at 1140px with parchment gutters either
   side on any screen wider than that — visible immediately at
   1440px and glaring on a 2320px viewport.

   DESIGN_SYSTEM.md §5 is explicit that page rhythm comes from
   alternating FULL-BLEED colour bands against contained content,
   and containment is the job of .wrap (max-width 1200px). The
   1140px cap is a stock theme default nobody chose; it fights
   the system and clips the design's central device.

   Released here. .wrap still holds content to 1200px, so text
   measure is unchanged — only the colour bands and hero imagery
   now run edge to edge, as intended.

   ------------------------------------------------------------
   (b) BUTTONS WERE UNDERLINED

   Hello Elementor's theme.min.css carries:
     .comments-area a, .page-content a { text-decoration: underline }
   at (0,1,1), which outranks the design system's a { text-
   decoration: none } at (0,0,1). Every link inside .page-content
   was underlined — including both hero CTAs and every .link-arrow.

   Fixed narrowly: buttons and link-arrows only. Genuine inline
   prose links (the tel: links on Contact, for instance) KEEP
   their underline, which is correct for accessibility — an
   underline is the only non-colour affordance a text link has.

   ------------------------------------------------------------
   (c) THEME TOGGLE HAD NO ICON

   The button renders as <button class="theme-toggle"
   data-theme-toggle aria-label="Toggle colour theme"></button> —
   completely empty. The toggle FUNCTIONS (clicking flips
   data-theme correctly), but presents as a blank circle with no
   indication of what it does.

   The icon markup is meant to come from the theme's inline
   chrome script, which Respira cannot edit (PHP writes are out
   of scope). Supplied here in CSS instead, via a mask so the
   glyph picks up currentColor and stays correct in every header
   state — white over a hero, dark on the solid header.

   Scoped to :empty, so this is SELF-RETIRING: if the PHP is ever
   fixed to inject the real SVG, the button stops being empty and
   these rules stop applying. No duplicate icon, no cleanup step.

   Moon in light theme (click for dark), sun in dark theme —
   matching design-system.html.
   ============================================================ */

/* (a) */
body .site-main {
  max-width: none;
  width: 100%;
}

/* (b) */
.page-content a.btn,
.page-content .btn,
.page-content .link-arrow,
.site-header a,
.site-footer a.btn {
  text-decoration: none;
}

/* (c) */
.theme-toggle:empty::before {
  content: "";
  display: block;
  width: 17px;
  height: 17px;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Light theme shows the moon — click to go dark. */
[data-theme="light"] .theme-toggle:empty::before,
:root:not([data-theme="dark"]) .theme-toggle:empty::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Cpath d='M14.5 10.2A6.3 6.3 0 0 1 6.8 2.5a6.3 6.3 0 1 0 7.7 7.7Z' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Cpath d='M14.5 10.2A6.3 6.3 0 0 1 6.8 2.5a6.3 6.3 0 1 0 7.7 7.7Z' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Dark theme shows the sun — click to return to light. */
[data-theme="dark"] .theme-toggle:empty::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Ccircle cx='8.5' cy='8.5' r='3.4' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M8.5 1v2M8.5 14v2M1 8.5h2M14 8.5h2M3.2 3.2l1.4 1.4M12.4 12.4l1.4 1.4M13.8 3.2l-1.4 1.4M4.6 12.4l-1.4 1.4' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Ccircle cx='8.5' cy='8.5' r='3.4' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M8.5 1v2M8.5 14v2M1 8.5h2M14 8.5h2M3.2 3.2l1.4 1.4M12.4 12.4l1.4 1.4M13.8 3.2l-1.4 1.4M4.6 12.4l-1.4 1.4' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* ============================================================
   27. CORRECTION TO 26(a) — SPECIFICITY

   My section 26(a) rule was `body .site-main` at (0,1,1). That
   lost: the element is `main#content.site-main`, and the 1140px
   cap is applied at ID strength. The rule silently had no effect
   and the bands stayed boxed.

   The competing declaration does not appear in any stylesheet
   readable from the page (cross-origin CSSOM access is blocked),
   so it could not be located by inspection — only its strength
   could be inferred. Raised to (1,2,1) and verified live in the
   browser before writing: hero width went 1140px -> full
   viewport.

   Keep this above ID strength if Hello Elementor is ever
   updated. Do NOT reach for !important here — the design system
   reserves that for overriding third-party inline output
   (section 20), and normal specificity is sufficient.
   ============================================================ */
main#content.site-main {
  max-width: none;
  width: 100%;
}

/* ---------- 12. Footer disclaimer toggle ---------- */
.disclaimer-toggle {
  margin-top: 1rem;
}
.disclaimer-toggle summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.disclaimer-toggle summary::-webkit-details-marker {
  display: none;
}
.disclaimer-toggle summary::after {
  content: "Read More";
  color: var(--color-brass);
  text-decoration: underline;
  font-weight: 600;
  transition: color var(--transition-interactive);
}
.disclaimer-toggle summary:hover::after {
  color: var(--color-brass-hover);
}
.disclaimer-toggle[open] summary::after {
  content: "Read Less";
}
.disclaimer-toggle summary:focus-visible {
  outline: 2px solid var(--color-brass);
  outline-offset: 3px;
}
.disclaimer-toggle-body {
  margin-top: .75rem;
}
.disclaimer-toggle-body p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: .75rem;
}
.disclaimer-toggle-body p:last-child {
  margin-bottom: 0;
}


/* Two-up service grid (Home + Practice Areas hub after the 2026-10 copy restructure). */
.svc-grid.svc-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 940px) { .svc-grid.svc-grid-2 { grid-template-columns: 1fr; } }

/* Full-bleed header/footer: Hello Elementor caps .site-header/.site-footer at its container widths (defect also present on the WP dev site). */
footer.site-footer, header.site-header { max-width: none !important; width: 100%; }

/* November 3: Clermont photography belongs to About; project art supports other pages. */
body[data-page="home"] .hero-home { background-position: 50% 50%; }
body[data-page="home"] .hero-home::before {
  background:
    linear-gradient(180deg, rgba(20,22,15,.62) 0px, rgba(20,22,15,.52) 72px, transparent 155px),
    linear-gradient(180deg, rgba(20,22,15,.10) 0%, rgba(20,22,15,.14) 45%, rgba(20,22,15,.81) 83%, rgba(20,22,15,.88) 100%);
}
.image-hero { isolation: isolate; }
.page-content > section.image-hero:first-of-type > .hero-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-art-position, center);
}
.practice-plan-hero { --hero-art-position: 46% center; }
.image-hero .img-note { margin-top: .8rem; }
/* Keep the small gold labels legible over bright artwork. */
body:is([data-page="about"], [data-page="contact"], [data-page="practice"], [data-page="corporate-counsel"], [data-page="real-estate"])
  .page-content > section:first-of-type .eyebrow {
  width: fit-content;
  border-radius: .15em;
  background: rgba(20,22,15,.48);
  box-shadow: 0 0 .32em .18em rgba(20,22,15,.48);
}
body[data-page="corporate-counsel"] .page-content > section:first-of-type {
  background-image: url("../../uploads/2026/09/bjpa-hero-outside-general-counsel.webp");
}
body[data-page="real-estate"] .page-content > section:first-of-type {
  background-image: url("../../uploads/2026/09/bjpa-hero-commercial-real-estate.webp");
}
body[data-page="team"] .page-content > section:first-of-type,
body[data-page="bret-jones"] .page-content > section:first-of-type,
body[data-page="madelyn-damon"] .page-content > section:first-of-type {
  background-image: url("../../uploads/2026/09/bjpa-hero-team.webp");
}
.about-mural-hero { --hero-art-position: 25% 45%; }
body[data-page="about"] .page-content > section.about-mural-hero::before {
  background:
    linear-gradient(180deg, rgba(20,22,15,.66) 0 104px, transparent 178px),
    linear-gradient(180deg, rgba(20,22,15,.06) 26%, rgba(20,22,15,.57) 57%, rgba(20,22,15,.88) 96%);
}
.page-content > section:first-of-type .wrap::after { border: 0; padding: 0; }
.clermont-story-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: start; }
.clermont-story-copy { max-width: 62ch; }
.clermont-photo { margin: 0; position: sticky; top: 8rem; }
.clermont-photo img { width: 100%; height: auto; border-radius: var(--radius-md); }
.clermont-photo figcaption { margin-top: .75rem; font-size: var(--text-xs); color: var(--color-text-muted); }
.clermont-lake-photo { margin: clamp(2.5rem,5vw,4rem) 0 0; }
.clermont-lake-photo img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 40%; border-radius: var(--radius-md); }
.clermont-lake-photo figcaption { margin-top: .75rem; font-size: var(--text-xs); color: var(--color-text-muted); }
.team-card .portrait { display: block; margin: 0; }
.team-card .portrait img[src*="doris-goldstein-selected-20261103"] { object-position: 50% 25%; }
.bio-portrait img[src*="doris-goldstein-selected-20261103"] { border-radius: var(--radius-md); }
.insights-intro, .article-header { padding-top: clamp(8rem,12vw,11rem); }
.insights-intro h1 { font-size: var(--text-3xl); margin-block: .6rem 1rem; }
.insight-feature { display: grid; grid-template-columns: 1fr 1.1fr; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); }
.insight-feature-image { align-self: center; max-width: 626px; margin: 0; }
.insight-feature-image img { display: block; width: 100%; height: auto; }
.insight-feature-image figcaption { padding: .65rem 1rem; font-size: var(--text-xs); color: var(--color-text-muted); }
.insight-feature-content { padding: clamp(1.5rem,4vw,3rem); }
.insight-feature-content h2 { font-size: var(--text-xl); margin-block: .8rem 1rem; }
.page-content .insight-feature h2 a { text-decoration: none; }
.insight-feature h2 a:hover { color: var(--color-primary); }
.insight-feature-content .text-muted { margin-block: 1.2rem 1.5rem; }
.article-header h1 { font-size: clamp(2.5rem,5vw,4.4rem); max-width: 24ch; margin-block: 1rem 1.5rem; }
.article-header .eyebrow { margin-top: 2rem; }
.article-byline { font-size: var(--text-sm); color: var(--color-text-muted); }
.article-body p { line-height: 1.8; }
.article-body .lede { font-size: var(--text-lg); line-height: 1.6; color: var(--color-text); margin-top: 0; }
.article-author { margin-block: 3rem; padding: 1.6rem 1.8rem; background: var(--color-surface-offset); border-left: 3px solid var(--color-brass); }
.article-author h2 { margin-top: .8rem; }
.article-author .link-arrow { margin-top: 1rem; }
.article-closing { font-weight: 600; color: var(--color-text) !important; }
.staging-form-note { border-left: 3px solid var(--color-brass); background: var(--color-surface-offset); padding: 1rem 1.2rem; margin-bottom: 1.5rem; color: var(--color-text); }
#gform_submit_button_1:disabled { cursor: not-allowed; opacity: .6; }
.site-footer :is(.disclaimer, .disclaimer-toggle summary, .disclaimer-toggle-body p) { color: rgba(246,243,236,.78); }
.site-footer .disclaimer-toggle summary::after { color: #d9c69a; }
.primary-nav a[aria-current], .primary-nav li:has(.sub-menu a[aria-current]) > a { border-bottom-color: var(--color-brass); }
@media (max-width: 940px) {
  .clermont-story-grid, .insight-feature { grid-template-columns: 1fr; }
  .clermont-photo { position: static; max-width: 560px; margin-inline: auto; }
  .clermont-lake-photo img { aspect-ratio: auto; height: auto; }
  .insight-feature-image { width: 100%; justify-self: center; }
  body[data-page="practice"] .page-content > section.practice-plan-hero {
    display: block;
    min-height: 0;
    padding-bottom: 0;
  }
  .page-content > section.practice-plan-hero:first-of-type > .hero-art {
    display: block;
    position: relative;
    height: auto;
    margin-top: 1.75rem;
  }
  body[data-page="practice"] .page-content > section.practice-plan-hero::before { content: none; }
  body[data-page="practice"] .page-content > section.practice-plan-hero .eyebrow { background: none; box-shadow: none; }
  .article-header h1 { font-size: clamp(2.2rem,7vw,3.5rem); }
}
@media (max-width: 540px) {
  body[data-page="about"] .page-content > section.about-mural-hero::before {
    background:
      linear-gradient(180deg, rgba(20,22,15,.66) 0 104px, transparent 178px),
      linear-gradient(180deg, rgba(20,22,15,.06) 24%, rgba(20,22,15,.60) 38%, rgba(20,22,15,.88) 95%);
  }
  body[data-page="home"] .hero-home::before {
    background:
      linear-gradient(180deg, rgba(20,22,15,.62) 0px, rgba(20,22,15,.52) 72px, transparent 155px),
      linear-gradient(180deg, rgba(20,22,15,.06) 24%, rgba(20,22,15,.55) 38%, rgba(20,22,15,.81) 83%, rgba(20,22,15,.88) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}