/*
 * The Housing Signal — 2026 redesign stylesheet
 * File: ths-2026-v1.css  (version is IN THE FILENAME on purpose:
 * the edge caches assets for 10 years and ignores query strings,
 * so every future revision must ship under a NEW filename, e.g. ths-2026-v2.css.)
 * Loads after the theme's style.css and layers the new design system on top.
 */

:root{
  --ths2-navy-950:#081321; --ths2-navy-900:#0C1D33; --ths2-navy-800:#122A47;
  --ths2-navy-700:#1B3A5E; --ths2-navy-600:#28496F;
  --ths2-gold:#C8A44B; --ths2-gold-soft:#E3C77F; --ths2-gold-deep:#A9862F;
  --ths2-paper:#FFFFFF; --ths2-mist:#F4F6F9; --ths2-line:#E3E8EF;
  --ths2-ink:#152232; --ths2-slate:#51637A; --ths2-slate-soft:#7A8BA0;
  --ths2-link:#1D5FA8;
  --ths2-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --ths2-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ths2-radius:14px; --ths2-radius-sm:10px;
  --ths2-shadow-card:0 1px 2px rgba(12,29,51,.06),0 10px 30px rgba(12,29,51,.08);
  --ths2-shadow-panel:0 2px 6px rgba(8,19,33,.25),0 24px 60px rgba(8,19,33,.35);
  --ths2-maxw:1180px;
}

/* ---------- Global refinements (site-wide) ---------- */
h1,h2,h3,h4{font-family:var(--ths2-serif);letter-spacing:-.005em}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--ths2-gold);outline-offset:2px}
.btn-primary{background:var(--ths2-navy-800)!important;border-radius:10px!important}
.btn-primary:hover{background:var(--ths2-navy-700)!important}
main table{border-collapse:collapse;width:100%;font-size:.95em}
main table th{background:var(--ths2-mist);color:var(--ths2-ink);text-align:left}
main table th,main table td{border:1px solid var(--ths2-line);padding:10px 12px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.ths2-wrap{max-width:var(--ths2-maxw);margin:0 auto;padding:0 24px}
.ths2-skip{position:absolute;left:-9999px;top:0;background:var(--ths2-gold);color:var(--ths2-navy-950);padding:10px 16px;border-radius:0 0 8px 0;z-index:200;font-weight:600}
.ths2-skip:focus{left:0}

.ths2-eyebrow{font:600 12px/1.5 var(--ths2-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ths2-gold)}
.ths2-eyebrow::before{content:"";display:inline-block;width:28px;height:2px;background:var(--ths2-gold);margin-right:10px;vertical-align:middle;border-radius:1px}
.ths2-news .ths2-eyebrow::before{display:none}
.ths2-title{font:600 clamp(26px,3.2vw,36px)/1.2 var(--ths2-serif);color:var(--ths2-ink);margin:10px 0 8px}
.ths2-sub{color:var(--ths2-slate);max-width:640px;font-size:16px}
.ths2-section{padding:76px 0}
.ths2-section--mist{background:var(--ths2-mist)}
.ths2-section-head{margin-bottom:36px}

.ths2-btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1.2 var(--ths2-sans);padding:14px 24px;border-radius:10px;text-decoration:none;transition:transform .15s ease,background .15s ease;cursor:pointer;border:0}
.ths2-btn--gold{background:var(--ths2-gold);color:var(--ths2-navy-950)}
.ths2-btn--gold:hover{background:var(--ths2-gold-soft)}
.ths2-btn--ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.35)}
.ths2-btn--ghost:hover{background:rgba(255,255,255,.16)}
.ths2-btn--navy{background:var(--ths2-navy-800);color:#fff}
.ths2-btn--navy:hover{background:var(--ths2-navy-700)}

/* ---------- Header ---------- */
.ths2-header{background:var(--ths2-navy-950);padding:14px 0;position:relative;z-index:60}
.ths2-header--overlay{position:absolute;top:0;left:0;right:0;background:linear-gradient(180deg,rgba(8,19,33,.55),rgba(8,19,33,0));padding:18px 0}
.ths2-header.ths2-stuck{position:fixed;top:0;left:0;right:0;background:var(--ths2-navy-950);box-shadow:0 2px 20px rgba(8,19,33,.4);padding:12px 0}
body.ths2-has-stuck{scroll-padding-top:70px}
.ths2-header-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.ths2-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.ths2-brand-mark{width:34px;height:34px;flex:0 0 auto}
.ths2-brand-name{font:700 19px/1.1 var(--ths2-serif);margin:0}
.ths2-brand-name a{color:#fff;text-decoration:none}
.ths2-brand-name span{color:var(--ths2-gold-soft)}
.ths2-nav{display:flex;align-items:center;gap:2px}
.ths2-nav a{font:500 14.5px/1.2 var(--ths2-sans);color:rgba(255,255,255,.88);text-decoration:none;padding:10px 13px;border-radius:8px}
.ths2-nav a:hover{color:#fff;background:rgba(255,255,255,.1)}
.ths2-search{position:relative}
.ths2-search summary{list-style:none;display:inline-flex;padding:10px;border-radius:8px;color:rgba(255,255,255,.88);cursor:pointer}
.ths2-search summary::-webkit-details-marker{display:none}
.ths2-search summary:hover{color:#fff;background:rgba(255,255,255,.1)}
.ths2-search-pop{position:absolute;right:0;top:calc(100% + 10px);background:#fff;border:1px solid var(--ths2-line);border-radius:12px;box-shadow:var(--ths2-shadow-panel);padding:14px;width:290px;z-index:80}
.ths2-search-pop .search-field{width:100%;padding:10px 12px;border:1px solid var(--ths2-line);border-radius:8px;font:400 14px var(--ths2-sans)}
.ths2-burger{display:none;background:none;border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:8px 10px;color:#fff;cursor:pointer}
#mobile-navigation.ths2-mobilenav{display:none;background:var(--ths2-navy-950);padding:8px 24px 18px}
#mobile-navigation.ths2-mobilenav.active{display:block;box-shadow:0 20px 40px rgba(8,19,33,.5)}
#mobile-navigation.ths2-mobilenav a{display:block;font:500 15px/1.3 var(--ths2-sans);color:rgba(255,255,255,.9);text-decoration:none;padding:11px 4px;border-bottom:1px solid rgba(255,255,255,.08)}
#mobile-navigation.ths2-mobilenav a:hover{color:#fff}
#mobile-navigation.ths2-mobilenav .search-form{margin-top:14px}
#mobile-navigation.ths2-mobilenav .search-field{width:100%;padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff}
.ths2-header--overlay + * .ths2-hero{margin-top:0}

/* ---------- Hero ---------- */
.ths2-hero{position:relative;min-height:clamp(640px,88vh,860px);display:flex;align-items:center;background:var(--ths2-navy-950);padding:150px 0 180px;overflow:hidden}
.ths2-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 68%}
.ths2-hero-veil{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 78% 30%,rgba(8,19,33,0) 0%,rgba(8,19,33,.34) 100%),
  linear-gradient(180deg,rgba(8,19,33,.66) 0%,rgba(8,19,33,.22) 32%,rgba(8,19,33,.42) 64%,rgba(6,14,25,.97) 100%),
  linear-gradient(100deg,rgba(8,19,33,.78) 0%,rgba(8,19,33,.34) 52%,rgba(8,19,33,.04) 100%)}
.ths2-hero .ths2-wrap{width:100%}
.ths2-hero-inner{position:relative;z-index:2;max-width:760px}
.ths2-hero-inner h1{font:700 clamp(36px,5.6vw,66px)/1.08 var(--ths2-serif);letter-spacing:-.012em;color:#fff;margin:20px 0 20px;text-shadow:0 2px 30px rgba(8,19,33,.55)}
.ths2-hero-inner p{font-size:clamp(16px,1.7vw,20px);color:rgba(255,255,255,.88);max-width:580px;margin:0 0 34px;text-shadow:0 1px 18px rgba(8,19,33,.5);line-height:1.6}
.ths2-hero-ctas{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Signals panel ---------- */
.ths2-signals{position:relative;z-index:5;margin-top:-104px}
.ths2-signals-panel{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--ths2-navy-900),var(--ths2-navy-950));border:1px solid rgba(255,255,255,.09);border-radius:18px;box-shadow:var(--ths2-shadow-panel);padding:32px 36px 28px}
.ths2-signals-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--ths2-gold) 15%,var(--ths2-gold) 85%,transparent)}
.ths2-signals-panel::after{content:"";position:absolute;top:-160px;right:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(200,164,75,.10),transparent 65%);pointer-events:none}
.ths2-signals-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.ths2-signals-head h2{font:600 21px/1.2 var(--ths2-serif);color:#fff;margin:0}
.ths2-signals-head .ths2-src{font-size:12.5px;color:var(--ths2-slate-soft)}
.ths2-signals-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ths2-signal{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:var(--ths2-radius-sm);padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px;min-height:132px}
.ths2-signal .lbl{font:600 11.5px/1.4 var(--ths2-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ths2-gold-soft)}
.ths2-signal .val{font:600 24px/1.15 var(--ths2-serif);color:#fff}
.ths2-signal .val-link{font:500 16.5px/1.35 var(--ths2-serif)}
.ths2-signal .note{font-size:12.5px;color:var(--ths2-slate-soft);margin-top:auto;line-height:1.5}
.ths2-signal a{color:#BFD5EE;text-decoration:none}
.ths2-signal a:hover{text-decoration:underline}
.ths2-dir-down{color:#8FC7A2;font:600 13px/1 var(--ths2-sans)}
.ths2-dir-up{color:#E4A9A0;font:600 13px/1 var(--ths2-sans)}
.ths2-dir-flat{color:var(--ths2-slate-soft);font:600 13px/1 var(--ths2-sans)}

/* ---------- Featured ---------- */
.ths2-featured{padding-top:84px}
.ths2-featured-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:center}
.ths2-featured-frame{position:relative}
.ths2-featured-frame::after{content:"";position:absolute;right:-16px;bottom:-16px;width:62%;height:62%;border-right:2px solid rgba(200,164,75,.55);border-bottom:2px solid rgba(200,164,75,.55);border-radius:0 0 var(--ths2-radius) 0;pointer-events:none}
.ths2-featured-media{display:block;border-radius:var(--ths2-radius);overflow:hidden;box-shadow:0 2px 6px rgba(12,29,51,.08),0 24px 60px rgba(12,29,51,.16);aspect-ratio:16/10;background:linear-gradient(140deg,var(--ths2-navy-800),var(--ths2-navy-950) 60%,#1F3251)}
.ths2-featured-media img{width:100%;height:100%;object-fit:cover;display:block}
.ths2-chip{display:inline-block;align-self:flex-start;font:600 11.5px/1.4 var(--ths2-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ths2-navy-800);background:rgba(200,164,75,.16);border:1px solid rgba(200,164,75,.45);padding:5px 10px;border-radius:999px}
.ths2-featured-copy h2{font:600 clamp(24px,2.6vw,34px)/1.22 var(--ths2-serif);margin:16px 0 12px}
.ths2-featured-copy h2 a{color:var(--ths2-ink);text-decoration:none}
.ths2-featured-copy h2 a:hover{color:var(--ths2-navy-700)}
.ths2-featured-copy p{color:var(--ths2-slate);margin:0 0 14px;line-height:1.6}
.ths2-meta{font-size:13px;color:var(--ths2-slate-soft);margin-bottom:22px}

/* ---------- Cards grid ---------- */
.ths2-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ths2-card{background:var(--ths2-paper);border:1px solid var(--ths2-line);border-radius:var(--ths2-radius);overflow:hidden;box-shadow:var(--ths2-shadow-card);display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease}
.ths2-card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(12,29,51,.06),0 18px 44px rgba(12,29,51,.13)}
.ths2-card > a{text-decoration:none;display:flex;flex-direction:column;height:100%;color:inherit}
.ths2-card-media{aspect-ratio:16/10;background:linear-gradient(135deg,var(--ths2-navy-700),var(--ths2-navy-950));overflow:hidden}
.ths2-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.ths2-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.ths2-card-body h3{font:600 18.5px/1.35 var(--ths2-serif);margin:0;color:var(--ths2-ink)}
.ths2-card:hover h3{color:var(--ths2-navy-700)}
.ths2-card-body p{font-size:14.5px;color:var(--ths2-slate);margin:0;line-height:1.55}
.ths2-card-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ths2-slate-soft)}
.ths2-card-foot .ths2-read{font-weight:600;color:var(--ths2-link)}
.ths2-more{text-align:center;margin-top:40px}

/* ---------- Calculators band ---------- */
.ths2-calcs{position:relative;overflow:hidden;background:linear-gradient(165deg,var(--ths2-navy-900) 0%,var(--ths2-navy-950) 70%);color:#fff}
.ths2-calcs::before{content:"";position:absolute;top:-220px;right:-160px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(200,164,75,.12),transparent 65%);pointer-events:none}
.ths2-calcs .ths2-wrap{position:relative}
.ths2-calcs .ths2-title{color:#fff}
.ths2-calcs .ths2-sub{color:rgba(255,255,255,.72)}
.ths2-calc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:8px}
.ths2-calc-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--ths2-radius-sm);padding:24px 20px;text-decoration:none;display:flex;flex-direction:column;gap:12px;transition:background .15s ease,transform .15s ease}
.ths2-calc-card:hover{background:rgba(255,255,255,.1);transform:translateY(-3px)}
.ths2-calc-card svg{width:30px;height:30px;stroke:var(--ths2-gold-soft)}
.ths2-calc-card .t{font:600 16px/1.3 var(--ths2-serif);color:#fff}
.ths2-calc-card .d{font-size:13px;color:rgba(255,255,255,.62);line-height:1.5}
.ths2-calc-card .go{margin-top:auto;font:600 13px/1.4 var(--ths2-sans);color:var(--ths2-gold-soft)}

/* ---------- Topic cards + state strip ---------- */
.ths2-topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ths2-topic-card{position:relative;border-radius:var(--ths2-radius);overflow:hidden;text-decoration:none;min-height:230px;display:flex;align-items:flex-end;box-shadow:var(--ths2-shadow-card);transition:transform .15s ease}
.ths2-topic-card:hover{transform:translateY(-3px)}
.ths2-topic-card::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--ths2-gold),transparent 70%);opacity:0;transition:opacity .15s ease;z-index:3}
.ths2-topic-card:hover::after{opacity:1}
.ths2-topic-bg{position:absolute;inset:0;background:linear-gradient(150deg,var(--ths2-navy-700),var(--ths2-navy-950))}
.ths2-topic-card:nth-child(2) .ths2-topic-bg{background:linear-gradient(150deg,#2E4E75,var(--ths2-navy-950))}
.ths2-topic-card:nth-child(3) .ths2-topic-bg{background:linear-gradient(150deg,#24466B,#0A1729)}
.ths2-topic-card:nth-child(4) .ths2-topic-bg{background:linear-gradient(150deg,#1D3C60,#081321)}
.ths2-topic-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,19,33,0) 30%,rgba(8,19,33,.8))}
.ths2-topic-body{position:relative;z-index:2;padding:22px;display:flex;flex-direction:column;gap:6px}
.ths2-topic-body .t{font:600 20px/1.25 var(--ths2-serif);color:#fff}
.ths2-topic-body .d{font-size:13.5px;color:rgba(255,255,255,.75);line-height:1.5}
.ths2-topic-body .go{font:600 13px/1.4 var(--ths2-sans);color:var(--ths2-gold-soft);margin-top:8px}
.ths2-states{margin-top:26px;font-size:14px;color:var(--ths2-slate);line-height:2}
.ths2-states a{color:var(--ths2-link);text-decoration:none;font-weight:500}
.ths2-states a:hover{text-decoration:underline}
.ths2-states .sep{color:var(--ths2-line);margin:0 6px}

/* ---------- Trust ---------- */
.ths2-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ths2-trust-item{background:var(--ths2-paper);border:1px solid var(--ths2-line);border-left:3px solid var(--ths2-gold);border-radius:var(--ths2-radius-sm);padding:24px}
.ths2-trust-item h3{font:600 17px/1.3 var(--ths2-serif);margin:0 0 8px;color:var(--ths2-ink)}
.ths2-trust-item p{font-size:14px;color:var(--ths2-slate);margin:0;line-height:1.55}

/* ---------- Newsletter / signals CTA ---------- */
.ths2-news{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--ths2-navy-800),var(--ths2-navy-950));color:#fff;text-align:center}
.ths2-news::before{content:"";position:absolute;left:50%;top:-260px;transform:translateX(-50%);width:720px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(200,164,75,.10),transparent 62%);pointer-events:none}
.ths2-news-inner{position:relative;max-width:640px;margin:0 auto}
.ths2-news h2{font:600 clamp(26px,3vw,34px)/1.2 var(--ths2-serif);color:#fff;margin:12px 0 12px}
.ths2-news p{color:rgba(255,255,255,.75);margin:0 0 28px;line-height:1.6}

/* ---------- Footer ---------- */
.ths2-footer{background:var(--ths2-navy-950);color:rgba(255,255,255,.72);padding:64px 0 34px;font-size:14px}
.ths2-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
.ths2-footer h4{font:600 12.5px/1.4 var(--ths2-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ths2-gold-soft);margin:0 0 16px}
.ths2-footer ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
.ths2-footer a{color:rgba(255,255,255,.72);text-decoration:none}
.ths2-footer a:hover{color:#fff}
.ths2-footer .ths2-brand-name a{color:#fff}
.ths2-footer-brand p{margin:14px 0 0;max-width:340px;font-size:13.5px;color:rgba(255,255,255,.55);line-height:1.6}
.ths2-footer-legal{padding-top:28px;font-size:12.5px;color:rgba(255,255,255,.45);display:flex;flex-direction:column;gap:10px;line-height:1.6}
.ths2-footer-legal strong{color:rgba(255,255,255,.6)}

/* ---------- Ad slots: keep capability, hide empty shells ---------- */
.ths2-adslot:empty{display:none}

/* ---------- Responsive ---------- */
@media (max-width:1040px){
  .ths2-signals-grid{grid-template-columns:repeat(2,1fr)}
  .ths2-cards{grid-template-columns:repeat(2,1fr)}
  .ths2-calc-grid{grid-template-columns:repeat(3,1fr)}
  .ths2-topic-grid{grid-template-columns:repeat(2,1fr)}
  .ths2-trust-grid{grid-template-columns:repeat(2,1fr)}
  .ths2-featured-grid{grid-template-columns:1fr;gap:28px}
  .ths2-footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .ths2-nav,.ths2-search{display:none}
  .ths2-burger{display:inline-flex}
}
@media (max-width:720px){
  .ths2-section{padding:56px 0}
  .ths2-hero{min-height:620px;padding:128px 0 170px}
  .ths2-signals-panel{padding:22px 20px}
  .ths2-signals-grid{grid-template-columns:1fr}
  .ths2-cards{grid-template-columns:1fr}
  .ths2-calc-grid{grid-template-columns:1fr 1fr}
  .ths2-topic-grid{grid-template-columns:1fr}
  .ths2-trust-grid{grid-template-columns:1fr}
  .ths2-footer-grid{grid-template-columns:1fr;gap:28px}
  .ths2-featured{padding-top:64px}
}

/* v2 (2026-08-27): hero content block raised; signals-panel overlap reduced. New filename because the edge caches assets for 10 years. */
.ths2-hero-inner{transform:translateY(-50px)}
.ths2-signals{margin-top:36px}
@media (max-width:720px){
  .ths2-hero-inner{transform:translateY(-24px)}
  .ths2-signals{margin-top:28px}
}

/* v3 (2026-08-27): signals panel fully separated from the hero — no overlap; ~36px white space after the hero (28px mobile). Overrides the v2 values above. */

/* v4 (2026-08-27): tighten the Featured Analysis -> Latest Insights gap to ~64px desktop / ~56px mobile.
   Real padding changes (no transforms) so everything below flows up. */
.ths2-featured{padding-bottom:8px}
.ths2-featured + .ths2-section--mist{padding-top:56px}
@media (max-width:720px){
  .ths2-featured + .ths2-section--mist{padding-top:48px}
}

/* v5 (2026-08-27): Bayfront Cluster hero tuning.
   Overlay rebalanced: strongest darkening only over the left text zone; towers, sky and
   water reflections stay bright. Crop tuned so desktop keeps the full right tower cluster
   + reflections, mobile centres a meaningful slice of the towers. */
.ths2-hero-img{object-position:60% 50%}
.ths2-hero-veil{background:
  linear-gradient(100deg, rgba(8,19,33,.78) 0%, rgba(8,19,33,.45) 40%, rgba(8,19,33,.08) 66%, rgba(8,19,33,0) 100%),
  linear-gradient(180deg, rgba(8,19,33,.5) 0%, rgba(8,19,33,.06) 30%, rgba(8,19,33,.06) 72%, rgba(6,14,25,.6) 100%)}
@media (max-width:720px){
  .ths2-hero-img{object-position:68% 50%}
  .ths2-hero-veil{background:
    linear-gradient(180deg, rgba(8,19,33,.6) 0%, rgba(8,19,33,.35) 40%, rgba(8,19,33,.3) 70%, rgba(6,14,25,.65) 100%)}
}