/* =============================================================================
   FCPE P0 CORRECTION LAYER — 2026-08-07
   Panel items 1, 2, 4, 6 (+ the CSS half of item 3).

   Loaded LAST, from the theme asset pipeline, so WordPress can never corrupt it
   (unlike code stored in page content, which wpautop rewrites into </p><p>).

   LAWS THIS FILE ENFORCES
   -----------------------
   L1  One gold. #D4AF37 and nothing else. No gradient-gold, no derived golds.
   L2  Gold is TEXT only on dark grounds. On cream/white it appears as hairlines,
       rules, underlines and marks — never as type. (Panel ruling 5.4: contrast is
       solved by placement, not by inventing a darker gold.)
   L3  One ink: #0B0F14.
   L4  Nothing crosses the right edge of the viewport, at any width.
   L5  Card rows align by construction, not by luck.
   L6  Every phone screen shows a phone number and a proposal CTA above the fold.

   AUDIENCE: older, high-net-worth homeowners. WCAG AA (4.5:1) is the floor for
   body text, 3:1 for large text — never "premium" low-contrast minimalism.
   ============================================================================= */

:root {
  --fcpe-p0-gold: #D4AF37;
  --fcpe-p0-ink: #0B0F14;
  --fcpe-p0-ink-soft: #3A3733;
  --fcpe-p0-rail-h: 64px;
}

/* =============================================================================
   L4 — OVERFLOW CONTAINMENT (panel item 1)
   The site already carries overflow-x:hidden on html/body, which SUPPRESSES the
   symptom. These rules remove the causes so the guard never has to fire.
   ============================================================================= */

html, body { overflow-x: clip; }

/* Replaced media never exceeds its box. */
img, svg, video, canvas, iframe, embed, object {
  max-width: 100%;
}
img, video { height: auto; }

/* Grid/flex children default to min-width:auto, which refuses to shrink below a
   long word's min-content width and pushes the row wide. This is the exact cause
   of the homepage department headline overflowing its own card. */
.fcpe-departments__body > *,
.fcpe-departments__item > *,
[class*="__grid"] > *,
[class*="-grid"] > * {
  min-width: 0;
}

/* Long unbroken strings (URLs, emails, uppercase display headings) wrap instead
   of overflowing. */
h1, h2, h3, h4, p, li, dd, dt, figcaption, blockquote {
  overflow-wrap: break-word;   /* break-word only breaks a word that cannot fit at all */
  word-break: normal;
}

/* 100vw includes the classic scrollbar; on desktop that is a guaranteed ~15px of
   horizontal overflow. The fixed header shipped with it. */
.fcpe-hdr,
.fcpe-hdr__wrap { width: 100%; max-width: 100%; }

/* Wide content scrolls inside its own box rather than widening the page. */
table, pre { max-width: 100%; }
.entry-content table, .fcpe-main table { display: block; overflow-x: auto; }

/* =============================================================================
   L5 — SELF-COLLAPSING CARD GRIDS (panel item 1 + 6)
   Rigid repeat(N, 1fr) tracks cannot reflow. Every measured multi-column grid on
   the site is converted to a track list that collapses to one column by
   construction, so no breakpoint can be missed.
   ============================================================================= */

.fcpe-dc-related-grid, .fcpe-hk-areas-list, .fcpe-ext__catalog-groups,
.fcpe-dc-scope__grid, .fcpe-ext__substrate, .fcpe-hk-services-grid,
.fcpe-hk-method__grid, .fcpe-ext__grid, .fcpe-ext__method,
.fcpe-service-grid, .county-grid, .trust-grid, .service-grid,
.fcpe-cluster__list, .fcpe-hp__guarantees-grid, .fcpe-hp__provenance-list,
.fcpe-map__grid, .gallery-grid, .gold-standard__pillars, .fcpe-ext__pillars,
.detail-grid, .faq-grid, .story-grid, .fcpe-grid-2, .fcpe-site-footer__nav {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

@media (max-width: 700px) {
  .fcpe-dc-related-grid, .fcpe-hk-areas-list, .fcpe-ext__catalog-groups,
  .fcpe-dc-scope__grid, .fcpe-ext__substrate, .fcpe-hk-services-grid,
  .fcpe-hk-method__grid, .fcpe-ext__grid, .fcpe-ext__method,
  .fcpe-service-grid, .county-grid, .trust-grid, .service-grid,
  .fcpe-cluster__list, .fcpe-hp__guarantees-grid, .fcpe-hp__provenance-list,
  .fcpe-map__grid, .gallery-grid, .gold-standard__pillars, .fcpe-ext__pillars,
  .detail-grid, .faq-grid, .story-grid, .fcpe-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =============================================================================
   PANEL ITEM 6 — THE FLAGSHIP DEPARTMENTS ROW
   Measured 2026-08-07 at 1728px: card 3 body overflowed its card by 16px, card 4
   by 46px; the four "Open Department" links sat on THREE different baselines
   (y=3501 / 3501 / 3511 / 3527); two different title top edges.

   Cause: .fcpe-departments__item shipped display:block !important, so the cards
   were four independent stacks with nothing shared but their column width.
   Fix: flex floor-pinning everywhere, subgrid line-locking where supported.
   ============================================================================= */

.fcpe-departments__item {
  display: flex !important;
  flex-direction: column;
  gap: 0;
}
.fcpe-departments__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  gap: clamp(12px, 1.5vw, 20px);
}
/* The button is pinned to the floor of its card in every browser. */
.fcpe-departments__link { margin-top: auto; }

/* One heading size, balanced wrapping, never wider than its card.
   ⚠ `overflow-wrap: anywhere` was WRONG here and shipped for ~40 minutes on
   2026-08-07: it let the browser break inside a word, and the owner screenshotted
   "RESTORATIO N & SEALING" and "CARE COORDINATI ON" on the live homepage. A
   headline may wrap at a space, or the type may shrink — a word is never split.
   The overflow it was chasing is solved properly by `min-width: 0` on the grid
   item plus a type scale that fits the narrowest card. */
.fcpe-departments__name {
  font-size: clamp(1.15rem, 1.55vw, 1.75rem);
  line-height: 1.08;
  max-width: 100%;
  min-width: 0;
  text-wrap: balance;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: manual !important;
  -webkit-hyphens: manual !important;
}
.fcpe-departments__text { min-width: 0; max-width: 100%; }

/* Line-lock: media / title / body / button share the same four row lines across
   all four cards, aligned by construction and incapable of drifting. */
@supports (grid-template-rows: subgrid) {
  .fcpe-departments__grid { grid-template-rows: auto auto 1fr auto; }
  .fcpe-departments__item {
    display: grid !important;
    grid-row: span 4;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(12px, 1.5vw, 20px);
  }
  .fcpe-departments__body { display: contents; }
  .fcpe-departments__media { margin-bottom: clamp(10px, 1.2vw, 18px); }
  .fcpe-departments__link { margin-top: 0; align-self: end; }
}

@media (max-width: 760px) {
  .fcpe-departments__grid { grid-template-columns: minmax(0, 1fr) !important; }
  @supports (grid-template-rows: subgrid) {
    .fcpe-departments__grid { grid-template-rows: none; }
    .fcpe-departments__item { grid-row: auto; grid-template-rows: none; }
    .fcpe-departments__body { display: flex; flex-direction: column; flex: 1 1 auto; }
  }
}


/* =============================================================================
   DEPARTMENTS ROW — FULL BLEED + HARD ROW LOCK  (owner, 2026-08-07:
   "we need full width on this")
   At 1728px the four-card block sat inside a bordered container with dead cream
   margin either side — the exact failure the full-width rule was written for.
   The band now runs edge to edge and the cards use the width.
   ============================================================================= */
/* Measured chain at 1728px BEFORE this rule:
     section.fcpe-departments   padding-inline 69.12px  (4vw)
     .fcpe-departments__inner   padding-inline 58.75px  (3.4vw)
   = 128px of dead cream on each side, and a 1472px band inside a 1728px screen.
   The section is the full-bleed band; the inner keeps only a small gutter so the
   cards are not glued to the glass. Owner: "we need full width on this." */
.fcpe-departments {
  width: 100%;
  max-width: 100%;
  padding-inline: 0 !important;
}
.fcpe-departments__inner {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding-inline: clamp(14px, 1.6vw, 30px) !important;
}
.fcpe-departments__head {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 0;
}
.fcpe-departments__grid {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

/* Every card image on ONE aspect ratio so the four media boxes are the same
   height by construction — card 1's image measured visibly shorter than 2-4. */
.fcpe-departments__media {
  aspect-ratio: 4 / 5 !important;
  min-height: 0 !important;
  height: auto;
  width: 100%;
}
.fcpe-departments__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Body copy of different lengths must not push the button down: the text block
   absorbs the slack, the button stays on the floor line. */
.fcpe-departments__text { flex: 1 1 auto; }

@media (min-width: 1440px) {
  .fcpe-departments__inner { padding-inline: 30px !important; }
}
@media (max-width: 760px) {
  .fcpe-departments__inner { padding-inline: 14px !important; }
  .fcpe-departments__name { font-size: clamp(1.25rem, 6vw, 1.7rem); }
}

/* Media was overflowing its own box by 1-2px on all four cards. */
.fcpe-departments__media { max-width: 100%; overflow: hidden; }
.fcpe-departments__media img { max-width: 100%; }

/* =============================================================================
   L1 + L2 — ONE GOLD, ONE CONTRAST LAW (panel item 4)

   Measured 2026-08-07 across 12 pages at 1728px: 246 gold text nodes rendered on
   cream/white grounds at contrast ratios of 1.87–2.10 against a 4.5 requirement.
   Every one of the selectors below was measured failing. On light grounds the
   type becomes ink and the gold survives as the rule/underline/mark beside it.
   ============================================================================= */

/* --- Eyebrows: ink type, gold hairline. The gold still leads the eye. --- */
[class*="eyebrow"],
.fcpe-dc-section__eyebrow, .fcpe-case-files__eyebrow, .fcpe-feature-ba__eyebrow,
.story-eyebrow, .fcpe-section-rubric, .fcpe-ba__caption-loc {
  color: var(--fcpe-p0-ink);
}
[class*="eyebrow"]::before,
.fcpe-section-rubric::before {
  background-color: var(--fcpe-p0-gold);
  border-color: var(--fcpe-p0-gold);
}

/* --- Card links / "read more" affordances on light grounds --- */
.fcpe-hk-service-card a,
.fcpe-ext__card-link,
.service-link,
.county-card a,
.fcpe-hp__anchor-link,
.final-cta-box a,
.gallery-container a,
.fcpe-ext__substrate-item a,
.fcpe-archive__title a:hover,
.fcpe-archive__title a:focus {
  color: var(--fcpe-p0-ink);
  text-decoration-color: var(--fcpe-p0-gold);
  text-underline-offset: 0.28em;
  text-decoration-thickness: 2px;
}
.fcpe-hk-service-card a:hover, .fcpe-ext__card-link:hover, .service-link:hover,
.county-card a:hover, .fcpe-hp__anchor-link:hover, .final-cta-box a:hover,
.fcpe-ext__substrate-item a:hover {
  color: #000;
  text-decoration: underline;
  text-decoration-color: var(--fcpe-p0-gold);
}

/* --- Headings and figures on light grounds --- */
.county-card h3, .service-card h3, .fcpe-specifics-block h3, .fcpe-ext__pillar h3,
.fcpe-dc-cta-band h2, .fcpe-hk-cta-band h2,
.price, .num, .hero-stat strong, .trustbar__item strong, .detail-card strong,
.detail-card div, .fcpe-cluster div, .cert-badge span,
.fcpe-tagline-badge__name, .fcpe-dc-phone, .fcpe-hk-phone,
.fcpe-sms-consent a, .fcpe-consent a {
  color: var(--fcpe-p0-ink);
}

/* --- The nav overlay renders on a WHITE ground; its wordmark, brand line and
       tagline all measured 2.10:1 in gold. Ink the type, keep the gold rule. --- */
.fcpe-nav-overlay__wordmark-second,
.fcpe-nav-overlay__brand-second,
.fcpe-nav-overlay__slogan {
  color: var(--fcpe-p0-ink);
}

/* --- Gradient-filled headings that fade to unreadable mid-phrase. Kill the
       background-clip trick outright; one flat ink heading. --- */
.section-title,
[class*="fcpe-area-page"] h2 {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--fcpe-p0-ink) !important;
  color: var(--fcpe-p0-ink) !important;
}

/* --- ROUND 2, measured 2026-08-07 after the first deploy ------------------
   The first pass cut gold-on-light failures from 246 to 165. The survivors were
   all losing the cascade to page-embedded <style> blocks that print in the footer,
   AFTER this stylesheet, at higher specificity. A contrast law that a page can
   overrule is not a law, so this block carries !important — and every selector
   below is one this probe actually measured failing, not a guess.
   Ratios measured: 1.36 – 2.10 against a 4.5 requirement.                  --- */
.eyebrow,
.section-header .eyebrow, .copy-block .eyebrow, .quote-box .eyebrow,
.story__copy .eyebrow, .resource-box .eyebrow, .gift-band .eyebrow,
.hero-card .eyebrow, .story-eyebrow,
.trustbar__item strong, .hero-stat strong,
.detail-card > div, .detail-card strong, .detail-card li strong,
.service-card h3, .service-link, .county-card h3, .county-card a,
.county-card p a, .areas-container .county-card a,
.fcpe-hk-service-card > a, .fcpe-ext__card-link,
.fcpe-hp__president-eyebrow .word,
.fcpe-tagline-badge__name, .fcpe-hk-phone, .fcpe-dc-phone,
.fcpe-hk-cta-band h2, .fcpe-dc-cta-band h2,
.final-cta-box p a, .gallery-container p a,
.hero__copy .slogan,
.fcpe-page footer p a {
  color: var(--fcpe-p0-ink) !important;
}
/* Links keep an affordance — the gold moves from the type to the underline. */
.service-link, .county-card a, .county-card p a, .areas-container .county-card a,
.fcpe-hk-service-card > a, .fcpe-ext__card-link,
.final-cta-box p a, .gallery-container p a, .fcpe-page footer p a {
  text-decoration: underline !important;
  text-decoration-color: var(--fcpe-p0-gold) !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.26em;
}
/* Eyebrows keep the gold as a rule, not as type. */
.eyebrow::before, .story-eyebrow::before {
  background-color: var(--fcpe-p0-gold);
}

/* --- Gold is still gold everywhere it belongs: on dark. Re-assert it so the
       rules above can never bleed onto a dark surface. --- */
.fcpe-hdr .eyebrow, .fcpe-ftr .eyebrow, .fcpe-site-footer .eyebrow,
.fcpe-hdr .trustbar__item strong, .fcpe-ftr .trustbar__item strong,
[data-fcpe-ground="dark"] .eyebrow,
[data-fcpe-ground="dark"] .hero-stat strong,
[data-fcpe-ground="dark"] a {
  color: var(--fcpe-p0-gold) !important;
}

.fcpe-hdr [class*="eyebrow"],
.fcpe-ftr [class*="eyebrow"],
.fcpe-site-footer [class*="eyebrow"],
[data-fcpe-ground="dark"] [class*="eyebrow"],
.fcpe-hdr .fcpe-section-rubric,
.fcpe-ftr .fcpe-section-rubric {
  color: var(--fcpe-p0-gold);
}

/* --- No gradient-gold anywhere. One flat gold on every gold surface. --- */
.fcpe-hdr__cta, .fcpe-hdr__burger, .fcpe-ftr__btn,
.btn--gold, .fcpe-btn--gold, .fcpe-panel__cta a {
  background-image: none !important;
  background-color: var(--fcpe-p0-gold) !important;
  color: var(--fcpe-p0-ink) !important;
}

/* =============================================================================
   PANEL ITEM 2 — THE FIRST FOUR SECONDS
   ============================================================================= */

/* --- 2a. CONSENT BANNER ---------------------------------------------------
   Measured 2026-08-07 at 1728px: the plugin laid the box out as a 226px / 350px
   two-column grid, so .cmplz-message rendered 340px wide inside a 226px column
   (scrollHeight 71 vs clientHeight 54 with overflow:hidden — the copy clipped
   mid-sentence) and the message box physically overlapped the button row in the
   band y=1024–1040. Rebuilt as one quiet single-row bar whose parts cannot
   collide. Panel ruling 5.7: the consent notice is the least designed-at thing
   on the page.                                                              --- */
.cmplz-cookiebanner {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  grid-template-columns: none !important;
  max-width: min(1180px, calc(100vw - 32px));
  padding: 14px 18px !important;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: #0B0F14;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
.cmplz-cookiebanner .cmplz-header {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}
.cmplz-cookiebanner .cmplz-title {
  width: auto;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--fcpe-p0-gold);
}
.cmplz-cookiebanner .cmplz-body {
  flex: 1 1 320px;
  width: auto !important;
  min-width: 0;
  margin: 0;
  overflow: visible !important;
  max-height: none !important;
}
/* The clipping itself: the message must never be cut off mid-sentence.
   Measured at 393px after the first deploy: .cmplz-message still carried
   max-height:32px with overflow:hidden and a scrollHeight of 62 — the plugin's
   own restyle prints later and at higher specificity, so this needs the full
   html/body chain to win. The banner box was also height-locked with
   overflow:hidden, which re-clipped whatever the message let through. */
html body .cmplz-cookiebanner,
html body .cmplz-cookiebanner .cmplz-body,
html body .cmplz-cookiebanner .cmplz-message {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
html body .cmplz-cookiebanner .cmplz-message {
  width: 100% !important;
  max-width: 100%;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #E8DCC4;
  text-overflow: clip;
  -webkit-line-clamp: none;
  display: block;
}
.cmplz-cookiebanner .cmplz-buttons {
  display: flex !important;
  grid-template-columns: none !important;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: auto !important;
  margin: 0;
}
/* Fixed 112px buttons were clipping "Decline Non-Essential". Width follows text. */
.cmplz-cookiebanner .cmplz-btn {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto;
  height: auto;
  min-height: 40px;
  padding: 9px 18px;
  white-space: nowrap;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.2;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept {
  background: var(--fcpe-p0-gold) !important;
  color: var(--fcpe-p0-ink) !important;
  border: 1px solid var(--fcpe-p0-gold) !important;
  font-weight: 700;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-deny {
  background: transparent !important;
  color: #F4EFE6 !important;
  border: 1px solid rgba(244, 239, 230, 0.45) !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences {
  background: transparent !important;
  color: #E8DCC4 !important;
  border: 0 !important;
  padding: 9px 6px;
  text-decoration: underline;
  text-decoration-color: rgba(212, 175, 55, 0.7);
  text-underline-offset: 0.25em;
}
@media (max-width: 760px) {
  .cmplz-cookiebanner { padding: 12px 14px !important; gap: 10px 12px; }
  .cmplz-cookiebanner .cmplz-title { white-space: normal; }
  .cmplz-cookiebanner .cmplz-buttons { width: 100% !important; }
  .cmplz-cookiebanner .cmplz-btn.cmplz-accept,
  .cmplz-cookiebanner .cmplz-btn.cmplz-deny { flex: 1 1 46%; justify-content: center; }
  .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences { flex: 1 1 100%; text-align: center; }
}

/* --- 2b. NAV PILLS: shared height, no-wrap labels ------------------------- */
.fcpe-luxury-mega-nav__trigger,
.fcpe-hdr__nav > ul > li > a,
.fcpe-hdr__nav > ul > li > button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  line-height: 1.2;
  letter-spacing: 0.06em;
}
/* Oversized tracking is what made the pills wrap in the first place; below the
   widest desktop tier it comes down rather than breaking the row. */
@media (max-width: 1280px) {
  .fcpe-luxury-mega-nav__trigger,
  .fcpe-hdr__nav > ul > li > a,
  .fcpe-hdr__nav > ul > li > button { letter-spacing: 0.03em; font-size: 11.5px; }
}
.fcpe-luxury-mega-nav__eyebrow { white-space: nowrap; letter-spacing: 0.14em; }

/* --- 2c. THE CONTINUE BUTTON ---------------------------------------------
   Measured: bg #0E0E10 (an off-canon sixth black), opacity 0.45, cursor
   not-allowed. On the one page that makes money, the primary action read as
   switched off. Enabled = solid gold. Disabled = still legible, still clearly
   the primary shape, obviously waiting rather than broken.                --- */
.fcpe-btn--primary,
button.fcpe-btn--primary,
.fcpe-estimate button[type="submit"],
.fcpe-estimate .fcpe-btn--primary {
  background: var(--fcpe-p0-gold) !important;
  background-image: none !important;
  color: var(--fcpe-p0-ink) !important;
  border: 1px solid var(--fcpe-p0-gold) !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  min-height: 52px;
}
.fcpe-btn--primary:hover:not(:disabled),
.fcpe-btn--primary:focus-visible:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.35);
}
.fcpe-btn--primary:disabled,
.fcpe-btn--primary[disabled],
.fcpe-btn--primary[aria-disabled="true"] {
  opacity: 1 !important;
  background: transparent !important;
  color: var(--fcpe-p0-ink) !important;
  border: 2px dashed rgba(212, 175, 55, 0.65) !important;
  cursor: default;
}
@media (max-width: 760px) {
  .fcpe-btn--primary, .fcpe-estimate button[type="submit"] {
    width: 100%;
    justify-content: center;
  }
}

/* =============================================================================
   PANEL ITEM 1 — THE MOBILE CONVERSION SPINE

   The shipped rule was:
     @media(max-width:980px){ .fcpe-hdr__util, .fcpe-hdr__nav, .fcpe-hdr__right
                              { display:none !important } }
   .fcpe-hdr__util carries the phone number. .fcpe-hdr__right carries the
   estimate CTA. Measured 2026-08-07 on 12 pages at a true 393px iPhone profile:
   both were display:none on every one. A phone visitor had no visible way to
   call and no visible way to start a proposal.
   ============================================================================= */

/* The compact header below 1180px is laid out by zz-fcpe-header-full-bleed:
   .fcpe-hdr__bar becomes a centred flex row, the wordmark is absolutely centred and
   the burger absolutely right. So the CTA is placed absolutely LEFT, mirroring the
   burger: [ESTIMATE] ... FCPE ... [burger]. Selector chains match that plugin's
   (0,2,4) specificity because it uses !important throughout. */
@media (max-width: 1179px) {
  /* Utility bar returns, carrying the phone number. */
  html body header.fcpe-hdr .fcpe-hdr__util {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    height: 42px !important;
    min-height: 42px;
  }
  html body header.fcpe-hdr .fcpe-hdr__util-row {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding-inline: 14px;
    max-width: 100%;
  }
  html body header.fcpe-hdr .fcpe-hdr__phone {
    font-size: 0.92rem;
    font-weight: 700;
    color: #F4EFE6;
    min-height: 42px;
  }
  html body header.fcpe-hdr .fcpe-hdr__phone svg { width: 16px; height: 16px; }
  html body header.fcpe-hdr .fcpe-hdr__trust { display: none !important; }
  html body header.fcpe-hdr .fcpe-hdr__util-right { justify-self: end; }
  html body header.fcpe-hdr .fcpe-hdr__bbb { padding: 4px 12px; font-size: 0.68rem; }

  /* Estimate CTA returns, pinned left of the centred wordmark. */
  html body header.fcpe-hdr .fcpe-hdr__right {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: absolute !important;
    left: clamp(12px, 2.6vw, 28px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    gap: 10px;
  }
  html body header.fcpe-hdr .fcpe-hdr__portal { display: none !important; }
  html body header.fcpe-hdr .fcpe-hdr__cta {
    padding: 11px 18px !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.09em !important;
    min-height: 44px;
    white-space: nowrap;
  }
  /* 100vw on the bar is a scrollbar-width overflow on any desktop-class viewport. */
  html body header.fcpe-hdr .fcpe-hdr__bar { width: 100% !important; max-width: 100% !important; }
  /* The fixed header is two rows tall again (42 + 80), so the page must clear it. */
  html body { padding-top: 124px !important; }
}

/* --- PHONE WIDTHS -------------------------------------------------------
   Measured at 393px after the first mobile deploy, by reading the screenshot:
   the gold CTA (x 12→102) sat ON TOP of the absolutely-centred wordmark
   (x 77→316), hiding "FIR" of "FIRST COAST". Two absolutely-positioned
   elements in the same band cannot be made to miss each other by tuning
   padding — they need different bands. So on phones the CTA moves UP into the
   utility bar, where hiding the social row leaves the whole right side free:

        [ (904) 466-1622 ...................... GET ESTIMATE ]   <- utility bar
        [            FIRST COAST | Property Experts      [☰] ]   <- main bar

   Nothing overlaps by construction, at any phone width.                --- */
@media (max-width: 700px) {
  html body header.fcpe-hdr .fcpe-hdr__bbb,
  html body header.fcpe-hdr .fcpe-hdr__social { display: none !important; }

  html body header.fcpe-hdr .fcpe-hdr__right {
    top: -42px !important;
    bottom: auto !important;
    left: auto !important;
    right: 12px !important;
    height: 42px;
    transform: none !important;
    align-items: center;
    z-index: 5;
  }
  html body header.fcpe-hdr .fcpe-hdr__cta {
    padding: 7px 14px !important;
    min-height: 30px;
    font-size: 0.58rem !important;
    letter-spacing: 0.06em !important;
  }
  html body header.fcpe-hdr .fcpe-hdr__phone { font-size: 0.86rem; }
  /* The wordmark now owns the full main bar minus the burger. */
  html body header.fcpe-hdr .fcpe-hdr__wordmark { max-width: calc(100vw - 120px) !important; }
}

/* --- The permanent call/proposal rail (markup injected by the P0 mu-plugin).
       Non-dismissible, thumb-height, gold on ink, and it never covers content
       because the body reserves its height.                                --- */
.fcpe-mrail {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9998;
  display: none;
  gap: 0;
  background: #0B0F14;
  border-top: 1px solid rgba(212, 175, 55, 0.45);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Measured 2026-08-07 at 393px: the first build's two nowrap labels had a combined
   min-content width of 411px and pushed 18px past the right edge. Type now scales
   with the viewport and the boxes are allowed to shrink, so the rail fits by
   construction at every phone width rather than at one tested width. */
.fcpe-mrail__btn {
  flex: 1 1 50%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--fcpe-p0-rail-h);
  padding: 12px 8px;
  font-family: 'NORD', 'Arial Narrow', Arial, sans-serif;
  font-size: clamp(0.6rem, 2.95vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
.fcpe-mrail__btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
@media (max-width: 359px) {
  .fcpe-mrail__btn svg { display: none; }
}
.fcpe-mrail__btn--call {
  color: #F4EFE6;
  background: #0B0F14;
  border-right: 1px solid rgba(212, 175, 55, 0.35);
}
.fcpe-mrail__btn--call svg { fill: none; stroke: var(--fcpe-p0-gold); stroke-width: 2; }
.fcpe-mrail__btn--quote {
  color: var(--fcpe-p0-ink);
  background: var(--fcpe-p0-gold);
}
.fcpe-mrail__btn:focus-visible { outline: 3px solid #F4EFE6; outline-offset: -3px; }

@media (max-width: 980px) {
  .fcpe-mrail { display: flex; }
  body { padding-bottom: calc(var(--fcpe-p0-rail-h) + env(safe-area-inset-bottom, 0px)); }
  /* Measured 2026-08-07: the consent banner sits at bottom:10px with z-index 9100 and
     the rail at 9998, so the rail covered the banner's lower 55px — including its
     buttons on shorter pages. The banner is lifted clear of the rail rather than the
     rail being pushed down, because the rail must stay in thumb reach. */
  .cmplz-cookiebanner {
    bottom: calc(var(--fcpe-p0-rail-h) + 12px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* THREE separate mu-plugins print this same compact-banner block, each at ID
   specificity — fcpe-complianz-restyle, fcpe-complianz-desktop-compact-hotfix and
   fcpe-premium-site-canon. All three carried the clamp; correcting only one left
   the last-loaded winner in place, which is how the notice stayed clipped through
   two deploys. All three are corrected at source; this rule is the backstop, cut
   deliberately ABOVE their (1,3,0) specificity so a restored backup cannot
   silently reintroduce the clip. */
html body #cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-p0a):not(.cmplz-p0b) .cmplz-message,
html body #cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-p0a):not(.cmplz-p0b) .cmplz-body,
html body #cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-p0a):not(.cmplz-p0b) p {
  max-height: none !important;
  overflow: visible !important;
}
@media (max-width: 980px) {
  html body #cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-p0a):not(.cmplz-p0b) {
    bottom: calc(var(--fcpe-p0-rail-h) + 12px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: none !important;
  }
}
@media print { .fcpe-mrail { display: none !important; } }

/* =============================================================================
   PANEL ITEM 3 (CSS HALF) — ONE REVEAL SYSTEM, CSS-FIRST

   The shipped reveal was killed sitewide by an emergency patch that force-painted
   every .reveal before it could ever animate. Replacement is scroll-driven CSS:
   no library, nothing for the publishing pipeline to corrupt, and — critically —
   content is VISIBLE by default and only becomes animatable inside the @supports
   block. If the feature is absent, or motion is reduced, the page is simply
   static. A reveal can never hide content again.
   ============================================================================= */

.reveal, [data-fcpe-reveal] { opacity: 1; transform: none; }

/* --- THE TAGLINE FAILSAFE ------------------------------------------------
   The handwriting reveal splits "The Gold Standard, Every Time." into 30
   .fcpe-slogan-char spans, each shipped at opacity:0 and animated in on a 30ms
   serial delay once an IntersectionObserver adds .in-view. That means the
   line's DEFAULT state is invisible: if the observer never arms — a JS error
   earlier in the page, an element already in view before the script attaches,
   a script blocked by consent — the brand's tagline simply does not appear, and
   nothing anywhere reports an error. Same failure class as the reveal-killer.

   Measured 2026-08-07 at 393px: all 30 chars present, opacity 1, right edge 317
   inside a 393 viewport — the line is NOT clipped. The panel's "renders as 'The
   Gold Standard,' with 'Every Time.' cut off" is a screenshot taken ~720ms into
   a 900ms reveal. Real defect, wrong diagnosis: the risk is not clipping, it is
   the invisible default.

   So: whole and visible at rest, and the reveal still owns it while running.
   The owner's handwriting effect is untouched.                            --- */
.fcpe-slogan-typed .fcpe-slogan-char { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .fcpe-slogan-typed .fcpe-slogan-char { opacity: 1 !important; animation: none !important; transform: none !important; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes fcpe-p0-rise {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: none; }
    }
    .reveal:not(.fcpe-mega):not(.fcpe-mega__inner):not(.fcpe-mega__col),
    [data-fcpe-reveal] {
      animation: fcpe-p0-rise both linear;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
    /* The one signature gesture: a gold hairline drawing left-to-right ahead of
       a section. Opt-in via [data-fcpe-rule]. */
    [data-fcpe-rule]::before {
      content: "";
      display: block;
      height: 2px;
      width: 100%;
      max-width: 220px;
      background: var(--fcpe-p0-gold);
      transform-origin: left center;
      animation: fcpe-p0-draw both linear;
      animation-timeline: view();
      animation-range: entry 10% cover 22%;
    }
    @keyframes fcpe-p0-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

/* =============================================================================
   FOCUS + TAP TARGETS — the audience constraint, not a nicety.
   ============================================================================= */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--fcpe-p0-gold);
  outline-offset: 2px;
}
@media (max-width: 980px) {
  .fcpe-hdr a, .fcpe-hdr button, .fcpe-panel a, .fcpe-panel button { min-height: 44px; }
}
/* =============================================================================
   FCPE HERO BRANDMARK — 2026-08-07
   Owner directive: "I want to start seeing my gold wordmark logo on more pages.
   I used to have it in every single hero, with a radiating glow, and it would
   fade in every hero and have the slogan handwritten underneath slowly in its
   Paris Signature script font."

   Three moments, in order:
     1. the halo blooms out from behind the mark
     2. the gold wordmark fades and rises into place
     3. the tagline writes itself, letter by letter, with a glow at the pen point

   The tagline is LIVE TEXT, not part of the logo image, for three reasons: the
   handwriting reveal needs real characters, search engines and screen readers
   need to read it, and the brand's own Paris Signature webfont should set it.
   (A gold lockup PNG with the tagline baked in exists — it is deliberately not
   used here.)

   Canon: gold #D4AF37 only. Mark on DARK grounds only — on cream the wordmark
   ships in ink with a gold rule, never as gold type.
   ============================================================================= */

.fcpe-heromark {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.4vw, 20px);
  margin: 0 auto clamp(20px, 2.6vw, 40px);
  text-align: center;
  pointer-events: none;
}
.fcpe-heromark--left { align-items: flex-start; text-align: left; margin-inline: 0; }

/* --- 1. THE RADIATING GLOW ------------------------------------------------
   A soft gold bloom behind the mark. Painted with a radial-gradient rather
   than a blurred box so it costs one composited layer and never darkens the
   photograph underneath.                                                 --- */
.fcpe-heromark__halo {
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(300px, 34vw, 620px);
  aspect-ratio: 1;
  transform: translate(-50%, -22%) scale(0.72);
  background: radial-gradient(
    circle at center,
    rgba(212, 175, 55, 0.30) 0%,
    rgba(212, 175, 55, 0.14) 34%,
    rgba(212, 175, 55, 0.04) 56%,
    rgba(212, 175, 55, 0) 72%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.fcpe-heromark--left .fcpe-heromark__halo { left: 0; transform: translate(-18%, -22%) scale(0.72); }

/* --- 2. THE WORDMARK ------------------------------------------------------ */
.fcpe-heromark__mark {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(168px, 17vw, 300px);
  height: auto;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  filter: drop-shadow(0 0 26px rgba(212, 175, 55, 0.34))
          drop-shadow(0 10px 30px rgba(0, 0, 0, 0.45));
}

/* --- 3. THE HANDWRITTEN TAGLINE ------------------------------------------
   Set in Paris Signature, the tagline face, with its period — always. The
   letter-by-letter reveal is the site's existing slogan system: the element
   carries [data-fcpe-slogan-animate], the splitter wraps each character in a
   .fcpe-slogan-char with an ordinal --i, and an IntersectionObserver adds
   .in-view. Only the pace is changed here — the owner asked for "slowly", so
   the hero runs at 55ms per character (~1.65s) instead of the default 30ms.

   The characters are visible at rest. If the splitter never runs, the tagline
   is simply there, whole — it is never allowed to be invisible because a
   script did not load.                                                   --- */
.fcpe-heromark__tagline {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: 'Paris Signature', 'ParisSignature-fallback', cursive;
  font-size: clamp(1.25rem, 2.5vw, 2.4rem);
  line-height: 1.25;
  letter-spacing: 0.005em;
  white-space: nowrap;
  color: #D4AF37;
  /* Heroes are photographs; a bright paver or a sunlit wall can land directly
     behind the script and swallow it. Two stacked shadows — a tight dark halo for
     separation, a wide gold bloom for the glow — keep the line readable on any
     frame without putting a box behind it. Verified by rendering, not by markup. */
  text-shadow:
    0 1px 2px rgba(7, 10, 15, 0.95),
    0 2px 12px rgba(7, 10, 15, 0.85),
    0 0 34px rgba(7, 10, 15, 0.7),
    0 0 22px rgba(212, 175, 55, 0.45);
  opacity: 0;
}
.fcpe-heromark__tagline .fcpe-slogan-char { opacity: 1; }

/* The glow at the pen point — a small gold light that travels left to right
   across the tagline at exactly the pace the letters appear. */
.fcpe-heromark__tagline::after {
  content: "";
  position: absolute;
  top: 52%;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #D4AF37;
  box-shadow: 0 0 10px 4px rgba(212, 175, 55, 0.85),
              0 0 26px 10px rgba(212, 175, 55, 0.40);
  opacity: 0;
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   MOTION. Everything above is the REST state, and the rest state is legible:
   the halo is invisible, the mark and tagline are hidden only because the
   animations below immediately paint them. If animations are unavailable the
   fallback block at the bottom paints all three outright — the brandmark can
   never be missing because a feature was not supported.
   -------------------------------------------------------------------------- */
@keyframes fcpe-heromark-bloom {
  0%   { opacity: 0; transform: translate(-50%, -22%) scale(0.72); }
  55%  { opacity: 1; }
  100% { opacity: 0.85; transform: translate(-50%, -22%) scale(1.06); }
}
@keyframes fcpe-heromark-bloom-left {
  0%   { opacity: 0; transform: translate(-18%, -22%) scale(0.72); }
  55%  { opacity: 1; }
  100% { opacity: 0.85; transform: translate(-18%, -22%) scale(1.06); }
}
@keyframes fcpe-heromark-rise {
  0%   { opacity: 0; transform: translateY(14px) scale(0.985); }
  100% { opacity: 1; transform: none; }
}
@keyframes fcpe-heromark-breathe {
  0%, 100% { filter: drop-shadow(0 0 22px rgba(212, 175, 55, 0.28)) drop-shadow(0 10px 30px rgba(0, 0, 0, 0.45)); }
  50%      { filter: drop-shadow(0 0 38px rgba(212, 175, 55, 0.46)) drop-shadow(0 10px 30px rgba(0, 0, 0, 0.45)); }
}
@keyframes fcpe-heromark-show { to { opacity: 1; } }
@keyframes fcpe-heromark-pen {
  0%        { opacity: 0; left: 0; }
  8%        { opacity: 1; }
  92%       { opacity: 1; }
  100%      { opacity: 0; left: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .fcpe-heromark__halo {
    animation: fcpe-heromark-bloom 1500ms cubic-bezier(0.22, 0.61, 0.36, 1) 120ms both;
  }
  .fcpe-heromark--left .fcpe-heromark__halo {
    animation-name: fcpe-heromark-bloom-left;
  }
  .fcpe-heromark__mark {
    animation: fcpe-heromark-rise 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) 220ms both,
               fcpe-heromark-breathe 6s ease-in-out 1400ms infinite;
  }
  .fcpe-heromark__tagline {
    animation: fcpe-heromark-show 1ms linear 1000ms both;
  }
  .fcpe-heromark__tagline::after {
    animation: fcpe-heromark-pen 1750ms cubic-bezier(0.32, 0.06, 0.36, 1) 1050ms both;
  }
  /* "Slowly" — 55ms per character across 30 characters is ~1.65s, against the
     sitewide default of 30ms. Matches the pen point's travel exactly. */
  .fcpe-heromark__tagline.fcpe-slogan-typed.in-view .fcpe-slogan-char {
    animation-delay: calc(var(--i) * 55ms + 1050ms) !important;
    animation-duration: 320ms !important;
  }
}

/* Fallback: no animation support, or reduced motion — everything simply on. */
@media (prefers-reduced-motion: reduce) {
  .fcpe-heromark__halo { opacity: 0.7; transform: translate(-50%, -22%) scale(1); }
  .fcpe-heromark--left .fcpe-heromark__halo { transform: translate(-18%, -22%) scale(1); }
  .fcpe-heromark__mark { opacity: 1; transform: none; }
  .fcpe-heromark__tagline { opacity: 1; }
  .fcpe-heromark__tagline::after { display: none; }
}
@supports not (animation-name: fcpe-heromark-rise) {
  .fcpe-heromark__mark, .fcpe-heromark__tagline { opacity: 1; transform: none; }
  .fcpe-heromark__halo { opacity: 0.7; }
}

/* -----------------------------------------------------------------------------
   GROUND RULES. Gold as a mark reads only on a dark ground. On a cream or white
   hero the mark ships in ink and the gold survives as the hairline beneath it —
   the same contrast law the rest of the P0 layer enforces.
   -------------------------------------------------------------------------- */
/* The MARK stays gold on every ground. The panel's contrast law is about gold as
   TYPE — "on cream it appears only as hairlines, rules, underlines and marks."
   A logotype is a mark, and WCAG 1.4.3 exempts logotypes for the same reason.
   What changes on a light ground is the tagline TEXT, which is type, and the
   halo, which only reads on dark. Measured note: the first render inked the mark
   and the ink never applied, because the breathing keyframe animates `filter`
   and an animation beats a normal declaration. Kept as a comment because the
   next person to try a filter override here will hit the same wall. */
.fcpe-heromark--light .fcpe-heromark__halo { display: none; }
.fcpe-heromark--light .fcpe-heromark__mark {
  filter: drop-shadow(0 6px 18px rgba(11, 15, 20, 0.16));
  animation: fcpe-heromark-rise 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) 220ms both;
}
.fcpe-heromark--light .fcpe-heromark__tagline {
  color: #0B0F14;
  text-shadow: none;
}
.fcpe-heromark--light .fcpe-heromark__tagline::after { display: none; }
.fcpe-heromark--light::after {
  content: "";
  display: block;
  width: 92px;
  height: 2px;
  margin: 6px auto 0;
  background: #D4AF37;
}

@media (max-width: 700px) {
  .fcpe-heromark { gap: 8px; margin-bottom: 18px; }
  .fcpe-heromark__mark { width: clamp(150px, 42vw, 200px); }
  .fcpe-heromark__tagline { font-size: clamp(1.05rem, 5.2vw, 1.5rem); }
  .fcpe-heromark__halo { width: clamp(240px, 76vw, 340px); }
}