/* tg-upgrade.css: Impeccable + Taste Skill upgrade layer for the Triad Global sites (2026-10-22). Same core in all three sites; site extras and the generated text-size floor follow. */
   Loaded last on every Solutions page. Keeps the brand (navy, gold, green, Playfair + Inter) and content;
   changes structure, type, contrast and surface details. Works in light and dark themes.
   Source of the rules: DESIGN.md + .claude/skills/impeccable/reference/craft-floor.md. */

/* ---------- Tokens: readable secondary text in both themes ---------- */
:root{--mut:#a6b2c6;--mut2:#9aa7bb;--mut-2:#9aa7bb;--ink-soft:#d3dbe8;--u-gold-text:#e0be6e;--u-rule:rgba(255,255,255,.12);--u-hover:rgba(255,255,255,.035)}
html[data-theme="light"]{--mut:#4b5870;--mut2:#56637a;--mut-2:#56637a;--ink-soft:#33415a;--u-gold-text:#8a6a1f;--u-rule:#e1d9c7;--u-hover:#fbf8f1}

/* ---------- Browser surfaces carry the design ---------- */
::selection{background:rgba(201,161,74,.32);color:inherit}
html{caret-color:#c9a14a;scrollbar-color:#8a97ad transparent;text-rendering:optimizeLegibility}
:focus-visible{outline:2px solid #c9a14a;outline-offset:3px;border-radius:6px}
a{text-underline-offset:.2em}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
.price,.stat b,.tgm-body,.score,[class*="num"]{font-variant-numeric:tabular-nums}

/* ---------- No kickers or eyebrows above headings ---------- */
.sec-head .eyebrow,.eyebrow,.band-eyebrow,.cw-kick,.tgm-eyebrow,.diadiv,.toc-label{display:none!important}

/* ---------- Hero: keep the brand motion (facet logo, live project window, button shine), drop static clutter ---------- */
.tgm-grid{display:none!important}
.tgm-mark{opacity:.16}
html[data-theme="light"] .tgm-mark{opacity:.13}
.tgm{padding-top:clamp(56px,8vw,104px)!important}
.tgm h1.tgm-h1{font-size:clamp(40px,5.4vw,76px)!important;line-height:1.02!important;letter-spacing:-.03em!important;max-width:16ch;margin-left:auto;margin-right:auto}
.tgm-shine{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:var(--u-gold-text)!important;color:var(--u-gold-text)!important;font-style:italic;display:inline}
.tgm-sub{font-size:clamp(17px,1.45vw,19.5px)!important;line-height:1.6!important;max-width:60ch;margin-left:auto;margin-right:auto}
.tgm a.tgm-gold,.btn.gold,.btn-gold,.btn-primary,a.cta,nav.top .cta{color:#14213a!important}
.btn.gold:hover,.tgm a.tgm-gold:hover{color:#14213a!important}
.tgm-small{font-size:14px!important}

/* ---------- Trust strip: numbers read as numbers ---------- */
.trust .stat b{font-size:20px!important;letter-spacing:-.01em}
.trust .stat span{font-size:14px!important;color:var(--mut)!important}

/* ---------- Section heads: editorial, left-aligned, measured ---------- */
.sec-head{text-align:left!important;margin:0 0 44px!important;max-width:760px!important}
.sec-head h2,section h2{letter-spacing:-.025em}
.lead{font-size:clamp(16.5px,1.3vw,18.5px)!important;color:var(--ink-soft)!important;max-width:62ch}
section{padding:clamp(64px,8vw,112px) 0!important}

/* ---------- Cards: no coloured stripes, one quiet depth, readable copy ---------- */
.card.face-navy,.card.face-green,.card.face-gold,.role,.stat,.cw-tile{border-top-width:1px!important;border-top-color:var(--line)!important}
.use,.pricing,.pull,.formula,.result,.red-flag,.ceo-note,.tm-body .promise,.prose blockquote{border-left-width:1px!important}
.card,.work-card,.showcard{box-shadow:none!important}
.card:hover,.work-card:hover{box-shadow:0 1px 2px rgba(10,15,26,.06),0 12px 32px rgba(10,15,26,.10)!important}
.card p,.work-card p,.showcard p,.tm-body p,.faq p,details p{font-size:15.5px!important;line-height:1.6!important}
.card h3,.work-card h3{font-size:1.25rem!important;letter-spacing:-.01em}
.mono,.card .meta,.card .price .sub,.work-card .kind,.work-card .role,.badge,.tags li,.tm-role-badge,.tm-creds span,.tm-title,.pill,.tag{font-family:'Inter',system-ui,sans-serif!important;letter-spacing:.02em!important;text-transform:none!important;font-weight:600!important}
.card .price{font-family:'Inter',system-ui,sans-serif!important;font-size:17px!important;font-weight:700!important;letter-spacing:-.01em!important;text-transform:none!important}
.ic{display:none!important}

/* ---------- Services: a price list, not a wall of cards (Stripe-style rows on desktop) ---------- */
#services .bandhead{margin-top:56px!important;text-align:left!important}
#services .bandhead h3{font-size:clamp(22px,2.2vw,28px)!important}
#services .bandhead p{color:var(--mut)!important;font-size:16px!important;max-width:62ch}
@media (min-width:900px){
  #services .grid4{display:flex!important;flex-direction:column!important;gap:0!important;border-top:1px solid var(--u-rule)}
  #services .grid4 .card{display:grid!important;grid-template-columns:minmax(170px,220px) 1fr 200px 140px;grid-template-rows:auto auto;column-gap:28px;align-items:center;
    padding:22px 14px!important;margin:0!important;border:0!important;border-bottom:1px solid var(--u-rule)!important;border-radius:0!important;background:transparent!important;min-height:0!important;transform:none!important}
  #services .grid4 .card:hover{background:var(--u-hover)!important;box-shadow:none!important}
  #services .grid4 .card h3{grid-column:1;grid-row:1/3;margin:0!important}
  #services .grid4 .card p{grid-column:2;grid-row:1/3;margin:0!important;color:var(--ink-soft)!important}
  #services .grid4 .card .price{grid-column:3;grid-row:1;margin:0!important}
  #services .grid4 .card .meta{grid-column:3;grid-row:2;margin:2px 0 0!important}
  #services .grid4 .card .arw{grid-column:4;grid-row:1/3;justify-self:end;margin:0!important;white-space:nowrap}
}
#services .card.core-wide{border-radius:16px!important}

/* ---------- Leadership photos never render as empty circles ---------- */
.tm-av,.tm-av.ph{background:#1f3a5e;object-fit:cover}

/* ---------- Motion: one entrance style, gentle, no bounce ---------- */
.reveal{transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)!important}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}}

/* ---------- Text-size floor (generated: every rule that set UI text below 12.5px) ---------- */

/* ---------- Gold sweep stays as a hover animation (brand motion), not a permanent stripe ---------- */
.card::after,.work-card::after{width:0!important;transition:width .6s cubic-bezier(.16,1,.3,1)!important}
.card:hover::after,.work-card:hover::after,.card:focus-visible::after{width:100%!important}
#services .grid4 .card::after{display:none!important}
#services .grid4 .card{position:relative}
#services .grid4 .card::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:#c9a14a;transition:width .6s cubic-bezier(.16,1,.3,1)}
#services .grid4 .card:hover::before{width:100%}

/* ---------- Leadership: the name is already under the card; keep the caption for screen readers only ---------- */
.tm-fig figcaption{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
.tm-av{width:88px!important;height:88px!important;border:3px solid rgba(255,255,255,.85)}
.tm-sub,.tm-body .tm-sub{font-family:'Inter',system-ui,sans-serif!important;letter-spacing:.01em!important;font-size:13.5px!important}

/* ---------- Services on phone: a compact list, not tall cards ---------- */
@media (max-width:899px){
  #services .grid4{display:flex!important;flex-direction:column!important;gap:0!important;border-top:1px solid var(--u-rule)}
  #services .grid4 .card{display:grid!important;grid-template-columns:1fr auto;column-gap:14px;row-gap:4px;padding:18px 2px!important;margin:0!important;border:0!important;border-bottom:1px solid var(--u-rule)!important;border-radius:0!important;background:transparent!important;min-height:0!important}
  #services .grid4 .card h3{grid-column:1;grid-row:1;margin:0!important;font-size:1.12rem!important}
  #services .grid4 .card .price{grid-column:2;grid-row:1;margin:0!important;font-size:15.5px!important;text-align:right;white-space:nowrap}
  #services .grid4 .card p{grid-column:1/3;grid-row:2;margin:2px 0 0!important;font-size:15px!important}
  #services .grid4 .card .meta{grid-column:1;grid-row:3;margin:0!important}
  #services .grid4 .card .arw{grid-column:2;grid-row:3;margin:0!important;text-align:right;white-space:nowrap}
  #services .grid4 .card .price .sub{display:none}
}

/* ---------- Light mode: gold used as text gets the accessible gold ---------- */
html[data-theme="light"] [style*="color:var(--gold)"],html[data-theme="light"] [style*="color:#c9a14a"],html[data-theme="light"] [style*="color: var(--gold)"]{color:#8a6a1f!important}
html[data-theme="light"] .center-link a,html[data-theme="light"] a.more,html[data-theme="light"] .arw,html[data-theme="light"] .cw-more,html[data-theme="light"] .faq summary::after{color:#8a6a1f!important}
html[data-theme="light"] h1 .accent,html[data-theme="light"] h2 .accent,html[data-theme="light"] .hero h1 .accent{color:#8a6a1f!important;-webkit-text-fill-color:#8a6a1f!important}

/* ---------- Inner pages ---------- */
.sp-kick{display:none!important}
.sp-tag{font-size:12.5px!important;letter-spacing:.04em!important}
html[data-theme="light"] .sp-card.feat{background:#fff!important;border-color:#d8bf7d!important}
.sp-lead,.sp-card p,.sp-list li{font-size:15.5px!important;line-height:1.6!important}
.sp-table td{font-size:14.5px!important;font-variant-numeric:tabular-nums}
/* Section heads read left-aligned like the home pages (call-to-action bands stay centred).
   Both spellings: page scripts re-serialise inline styles with a space after the colon. */
section:not(.cta-block):not(.audit):not(.sp-band) [style*="text-align:center"]:has(> h2),
section:not(.cta-block):not(.audit):not(.sp-band) h2[style*="text-align:center"],
section:not(.cta-block):not(.audit):not(.sp-band) h2[style*="text-align:center"] + p,
section:not(.cta-block):not(.audit):not(.sp-band) h2[style*="text-align:center"] ~ p[style*="text-align:center"],
section:not(.cta-block):not(.audit):not(.sp-band) [style*="text-align: center"]:has(> h2),
section:not(.cta-block):not(.audit):not(.sp-band) h2[style*="text-align: center"],
section:not(.cta-block):not(.audit):not(.sp-band) h2[style*="text-align: center"] + p,
section:not(.cta-block):not(.audit):not(.sp-band) h2[style*="text-align: center"] ~ p[style*="text-align: center"]{text-align:left!important;margin-left:0!important}
section:not(.cta-block):not(.audit):not(.sp-band) [style*="text-align:center"]:has(> h2) > *,
section:not(.cta-block):not(.audit):not(.sp-band) [style*="text-align: center"]:has(> h2) > *{margin-left:0!important}
/* Call-to-action bands: light text on the dark band in both themes */
.sp-band h2,.sp-band p,.sp-band h3{color:#fff!important;-webkit-text-fill-color:#fff!important}
.sp-band p{color:rgba(255,255,255,.86)!important}
.role .rate,.role .rate small{font-family:'Inter',system-ui,sans-serif!important;letter-spacing:.01em!important;text-transform:none!important}

/* ---------- Real estate: photos first, facts before adjectives (Zillow / Redfin habits) ---------- */
.props{gap:28px!important}
.prop{border-radius:16px!important;transition:box-shadow .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1)}
.prop:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(20,33,58,.06),0 18px 40px rgba(20,33,58,.12)}
.prop .art{aspect-ratio:3/2!important;border-bottom:0!important}
.prop .body{padding:22px 24px 24px!important}
.prop h3{font-size:24px!important;letter-spacing:-.015em}
.prop .loc{font-size:15px!important;color:var(--mut)!important}
.prop .status{font-size:12.5px!important;letter-spacing:.06em!important}
.prop .specs span{font-size:13.5px!important;font-variant-numeric:tabular-nums}
.prop p{font-size:15.5px!important;line-height:1.6!important}
.prop .map{font-size:14.5px!important}
nav.top .brand .sub,
.kicker,
.field label,
.lookup label,
.lookup .beta,
.verdict .v-label,
.metric .m-l,
.az-step .dot,
.gauge .glbl,
.ftoggle span:not(:empty),
.pin .s,
.lp-score{font-size:12.5px!important}
.lp-why span,
.mcontact .mc-h,
.prop .status,
.bio .role,
.fp .tag,
.ld-live,
.sec,
.thumb .pill,
html body nav.top .brand .sub,
.tgm-live,
.tgm-step,
.tgm-note{font-size:12.5px!important}
.tgm-label,
.tgm-eyebrow{font-size:12.5px!important}
.k,
.eyebrow,
.rm,
.study .v,
.lookup-st,
.section-label,
.metric .m-s,
.chk,
.disc,
#copied,
.us-sug div small,
.refreshed{font-size:13px!important}
.pop .who,
.pin,
.marker-cluster div,
.mapctl select,
.msheet .mini .ms,
.lp-dscr,
.lp-who,
.lp-btn,
.lp-open,
.mtabs button,
.mgroup>summary,
.sheet .mwhy span{font-size:13px!important}
.prop .specs span,
footer .legal,
.ld-hint,
.rf-note,
.tgm-bar,
.tgm-tab,
.tgm-ring span,
.tgp-panel h3,
.tgp-row span small,
.tg-people .call span,
.tg-floor .lab,
.tg-qr .k{font-size:13px!important}
.tg-qr .v,
.hero .eyebrow{font-size:13px!important}