/* Brinkman Data — design v2 shared classes (cyndra-class restyle, 2026-07-15).
   Source of truth for the sitewide sweep; homepage carries an inline copy.
   Spec: DESIGN-OVERHAUL-PLAN.md 2026-07-15 addendum. */
/* Sentence case + terminal period sitewide (owner ruling 2026-07-16, typo verdict).
   700 stated honestly: the self-hosted set has no inter-600, so 600 rendered 700 anyway. */
.display-h1 { font-weight: 700; font-size: clamp(2.75rem, 6vw, 4.5rem); line-height: 1.03; letter-spacing: -0.025em; color: #14243f; }
.display-h2 { font-weight: 700; font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; color: #14243f; }
/* Card title (2026-08-30). Fixes a specificity collision: .display-h2 and Tailwind's
   .text-xl are both (0,1,0), and this file loads after tailwind.css, so every element
   written "display-h2 text-xl" - author intent clearly 20px - rendered at 43.52px,
   identical to a section H2. 140 instances across 58 pages. Never combine .display-h2
   with a Tailwind text size again; use this. */
.card-title { font-weight: 700; font-size: 1.25rem; line-height: 1.4; letter-spacing: -0.02em; color: #14243f; }
/* COLOUR WAS #5f6b7d (zinc-500) UNTIL 2026-09-01. At 12px that measured 4.12:1 on
   the site's own #ffffff background, against a 4.5:1 AA floor for small text - and
   its ceiling against pure black is 4.35:1, so it could not pass anywhere on the
   site, on any page, with or without a photo behind it. That is a defect, not a
   preference. #556174 (zinc-400) measures 7.76:1 on the same background and fixes
   4,427 instances across 184 pages in one line. Stays inside the existing zinc text
   ramp, so it touches none of the brand hue rulings in BRAND-COLORS.md.
   Approved by MAIN BD 2026-09-01. Do not put it back. */
.kicker { font-size: 12px; font-weight: 500; color: #556174; letter-spacing: .01em; }
/* The one place caps survive: a small mono eyebrow above a hero H1, <=2 per page. */
.kicker-caps { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: .14em; color: #556174; }
.btn-txt { font-weight: 600; font-size: 15px; letter-spacing: 0; text-transform: none; }
.tile { background: rgba(20,36,63,.02); transition: background .15s ease; }
.tile:hover { background: rgba(20,36,63,.05); }

/* MOBILE PERF (2026-07-16, owner: scroll jank + content appearing late on phones).
   Phones get zero scroll effects: reveals always-visible, no backdrop blur
   (continuous GPU repaint), no fixed full-viewport grid layer (compositing cost).
   Desktop keeps the full treatment. */
@media (max-width: 767px) {
    /* Mobile type de-bulk (owner 2026-07-16: hero too text-heavy on phones —
       big H1, big buttons, photo invisible). Words unchanged, sizes calmer. */
    .display-h1 { font-size: 2.25rem; }
    .display-h2 { font-size: 1.45rem; }
    .card-title { font-size: 1.125rem; }
    .btn-txt { font-size: 14px; }

    /* Mobile keeps the full look (grid, glows-as-gradients, shadows) AND the
       scroll fade-ins — cyndra-style. Only the two genuinely GPU-expensive
       effects stay off: backdrop-filter (continuous repaint under the nav)
       and blur() filters (the radial-gradient glows still render, just
       without the extra filter pass). Reveal = cheap opacity/transform only,
       no blur, reveals once and stays (owner spec 2026-07-16). */
    .backdrop-blur-xl, .backdrop-blur-sm, .backdrop-blur { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background-color: rgba(255,255,255, 0.92) !important; }
    [class*="blur-["] { filter: none !important; }
    .reveal { opacity: 0; transform: translateY(12px); filter: none !important; }
    .reveal.reveal--in { opacity: 1; transform: none; transition: opacity 0.45s ease-out, transform 0.45s ease-out; }
}

/* Hero footage rotator layers (hero-rotator.js; pages opt in via #hero-rot) */
.hr-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s ease-in-out; }
.hr-v.hr-on { opacity: 1; }

/* Scroll reveal (reveal.js adds the classes; no-JS users see content directly) */
.reveal { opacity: 0; transform: translateY(20px); filter: blur(8px); }
.reveal.reveal--in { opacity: 1; transform: none; filter: blur(0); transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1), filter 0.8s cubic-bezier(0.22,1,0.36,1); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; filter: none !important; } }

/* EMERALD APEX ACCENT (owner ruling 2026-08-30, BRAND-COLORS.md amendment).
   The compiled tailwind.css predates emerald, so every arbitrary-value class the
   retainer swap introduced would silently purge to nothing - the gold equivalents
   only worked because they were already in the build. These define exactly the
   classes in use on services/retainer/products. If you add a new emerald utility,
   add it here too or it will not render. */
.bg-\[\#b8912f\]{background-color:#b8912f}
.bg-\[\#b8912f\]\/30{background-color:rgb(184 145 47 / 0.30)}
.bg-\[\#b8912f\]\/15{background-color:rgb(184 145 47 / 0.15)}
.bg-\[\#b8912f\]\/\[0\.12\]{background-color:rgb(184 145 47 / 0.12)}
.hover\:bg-\[\#7a5d14\]:hover{background-color:#7a5d14}
.text-\[\#8f6f1c\]{color:#8f6f1c}
.text-\[\#b8912f\]{color:#b8912f}
.border-\[\#b8912f\]{border-color:#b8912f}
.border-\[\#b8912f\]\/30{border-color:rgb(184 145 47 / 0.30)}
.border-\[\#b8912f\]\/40{border-color:rgb(184 145 47 / 0.40)}
.border-\[\#b8912f\]\/60{border-color:rgb(184 145 47 / 0.60)}
.hover\:border-\[\#b8912f\]\/50:hover{border-color:rgb(184 145 47 / 0.50)}
.hover\:border-\[\#b8912f\]:hover{border-color:#b8912f}
.hover\:border-\[\#8f6f1c\]:hover{border-color:#8f6f1c}
.from-\[\#b8912f\]\/\[0\.05\]{--tw-gradient-from:rgb(184 145 47 / 0.05) var(--tw-gradient-from-position);--tw-gradient-to:rgb(184 145 47 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-\[\#b8912f\]\/\[0\.08\]{--tw-gradient-from:rgb(184 145 47 / 0.08) var(--tw-gradient-from-position);--tw-gradient-to:rgb(184 145 47 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}

/* PEER CTA HEIGHT (2026-08-31). A filled CTA and the outline CTA beside it use the
   same padding, but the outline carries a 1px border and these buttons have auto
   height, so the outline rendered 2px taller. Measured on /, /products,
   /sample-report, /property-review and /retainer - every hero pair was 55 vs 57.
   Giving the borderless ones a transparent 1px border equalises them without
   touching a single padding value. The :not() guard means any button that already
   carries a border utility is left completely alone. */
.btn-txt:not([class*="border-"]) { border: 1px solid transparent; }

/* --- white-gold pair fixes. Colour properties only. --- */
.bg-blue-600,
.bg-blue-500,
.bg-blue-700,
.hover\:bg-blue-500:hover,
.hover\:bg-blue-600:hover,
.bg-\[\#7a5d14\],
.bg-\[\#7a5d14\]:hover,
.hover\:bg-\[\#7a5d14\]:hover,
.bg-\[\#8f6f1c\],
.bg-\[\#8f6f1c\]:hover,
.hover\:bg-\[\#8f6f1c\]:hover,
.bg-\[\#96731f\],
.bg-\[\#96731f\]:hover,
.hover\:bg-\[\#96731f\]:hover,
.bg-\[\#b8912f\],
.bg-\[\#b8912f\]:hover,
.hover\:bg-\[\#b8912f\]:hover,
.bg-\[\#c9a344\],
.bg-\[\#c9a344\]:hover,
.hover\:bg-\[\#c9a344\]:hover,
.bg-blue-600 *,
.bg-blue-500 *,
.bg-blue-700 *,
.hover\:bg-blue-500:hover *,
.hover\:bg-blue-600:hover *,
.bg-\[\#7a5d14\] *,
.bg-\[\#7a5d14\]:hover *,
.hover\:bg-\[\#7a5d14\]:hover *,
.bg-\[\#8f6f1c\] *,
.bg-\[\#8f6f1c\]:hover *,
.hover\:bg-\[\#8f6f1c\]:hover *,
.bg-\[\#96731f\] *,
.bg-\[\#96731f\]:hover *,
.hover\:bg-\[\#96731f\]:hover *,
.bg-\[\#b8912f\] *,
.bg-\[\#b8912f\]:hover *,
.hover\:bg-\[\#b8912f\]:hover *,
.bg-\[\#c9a344\] *,
.bg-\[\#c9a344\]:hover *,
.hover\:bg-\[\#c9a344\]:hover *{color:#14243f}
/* The funnel bars keep a dark gradient whatever the ground, so their
   type stays light. On a LIGHT palette the inversion would otherwise
   turn these numbers dark on a dark bar. */
div[style*="height:54px"][style*="linear-gradient"] span{color:#ffffff}