/* ============================================================
   BATUMIREALESTATE.INFO - BASE + COMPONENTS
   Built strictly from Brandbook v1.0. Three voices only:
   editorial (Newsreader) · official (Public Sans) · instrument (Plex Mono).
   60/30/10: Fog+white ~60% · Ink ~30% · Saperavi+Brass+Verdigris ~10%.
   ============================================================ */

/* ---- reset ---- */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
img,svg{max-width:100%;height:auto;display:block}

body{
  background:var(--fog);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---- layout ---- */
.container{max-width:var(--maxw);margin:0 auto;padding-left:24px;padding-right:24px}
.site-main{padding-bottom:var(--sp-6)}
.section{margin-top:var(--sp-7)}
.section > h2:first-child{margin-top:0;padding-top:0}

/* ---- typography ---- */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--heading);line-height:1.15;font-weight:500}
h1{font-size:clamp(34px,5vw,52px);letter-spacing:-.01em}
h2{font-size:28px;margin:var(--sp-6) 0 var(--sp-2);padding-top:var(--sp-3)}
h3{font-size:19px;margin:var(--sp-6) 0 var(--sp-2);font-weight:600}
h4{font-size:16px;font-weight:600;margin:var(--sp-5) 0 var(--sp-2)}
p{margin:0 0 var(--sp-4)}
strong{font-weight:600}
em{font-style:italic}

a{color:var(--verdigris);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--heading)}

code{font-family:var(--font-data);font-size:.85em;background:var(--ink-soft);padding:2px 6px;border-radius:4px}

.eyebrow{font-family:var(--font-data);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.rule-note,.meta{font-size:14px;color:var(--text-muted)}
.coords{font-family:var(--font-data);font-size:12px;letter-spacing:.12em;color:var(--text-muted)}

/* numbers everywhere read as instrument */
.num,td.num,.tabular{font-family:var(--font-data);font-variant-numeric:tabular-nums}

/* ---- signature motif: depth-contour divider ---- */
.contour{
  height:26px;margin:var(--sp-2) 0 var(--sp-5);border:0;
  background:repeating-linear-gradient(to bottom, transparent 0 7px, var(--hairline) 7px 8px);
  -webkit-mask-image:linear-gradient(to right,black 0%,black 62%,transparent 100%);
          mask-image:linear-gradient(to right,black 0%,black 62%,transparent 100%);
}

/* ---- skip link (a11y) ---- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--surface-invert);color:#F6F8F5;padding:10px 16px;z-index:1000;border-radius:0 0 var(--radius) 0}
.skip-link:focus{left:0}

/* ============================================================
   SITE HEADER / NAV
   ============================================================ */
.site-header{background:var(--surface-invert);color:#EAF1EF}
.site-header a{color:#EAF1EF;text-decoration:none}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.brand{display:inline-flex;align-items:center;line-height:0}
.brand svg{height:40px;width:auto;display:block}
.brand:hover{opacity:.9}
.main-nav ul{display:flex;gap:22px;list-style:none;padding:0;margin:0}
.main-nav a{font-family:var(--font-ui);font-size:15px;font-weight:500;padding:6px 0;border-bottom:2px solid transparent}
.main-nav a:hover,.main-nav .current-menu-item>a{border-bottom-color:var(--saperavi);color:#F6F8F5}
.nav-toggle{display:none;background:none;border:1px solid #2C5559;color:#EAF1EF;border-radius:var(--radius);padding:8px 12px;font-family:var(--font-ui);cursor:pointer}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.crumbs{font-size:13px;color:var(--text-muted);padding:14px 0}
.crumbs-inner{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumbs .current{overflow-wrap:anywhere;min-width:0}
.crumbs a{color:var(--text-muted);text-decoration:none}
.crumbs a:hover{color:var(--verdigris);text-decoration:underline}
.crumbs .sep{color:var(--hairline);font-size:14px}
.crumbs .current{color:var(--heading);font-weight:600}

/* ============================================================
   HERO / PAGE HEAD
   ============================================================ */
.page-head{padding:var(--sp-7) 0 var(--sp-5)}
.hero{background:var(--surface-invert);color:#EAF1EF;position:relative;overflow:hidden}
.hero .container{padding-top:var(--sp-8);padding-bottom:var(--sp-8);position:relative;z-index:1}
.hero h1{color:#F6F8F5;max-width:20ch}
.hero .lede{color:#C7D6D2;max-width:60ch;font-size:18px;margin-top:var(--sp-4)}
.hero .eyebrow{color:#8FB0AB}
/* faint contour soundings, ≤6% opacity, ink - decorative depth only */
.hero .soundings{position:absolute;inset:0;opacity:.06;background-repeat:repeat;pointer-events:none;z-index:0}

/* ============================================================
   BUTTONS  (one Saperavi per viewport = the lead action)
   ============================================================ */
.btn{display:inline-block;font-family:var(--font-ui);font-weight:600;font-size:15px;padding:12px 22px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;text-decoration:none;line-height:1.2;transition:background .12s ease,color .12s ease}
.btn-primary{background:var(--saperavi);color:#fff}
.btn-primary:hover{background:var(--saperavi-2);color:#fff}
.btn-secondary{background:transparent;color:var(--heading);border-color:var(--heading)}
.btn-secondary:hover{background:var(--ink-soft);color:var(--heading)}
.btn-ghost{background:transparent;color:var(--verdigris);border-color:var(--hairline)}
.btn-ghost:hover{color:var(--heading);border-color:var(--heading)}
.btn+.btn{margin-left:12px}
.btn-whatsapp{background:#1E6B62;color:#fff}
.btn-whatsapp:hover{background:var(--surface-invert);color:#fff}

/* ============================================================
   ANSWER BLOCK - the AIO-extractable unit, first after every H1
   ============================================================ */
.answer{
  border-left:3px solid var(--saperavi);
  background:var(--card);
  padding:18px 22px;
  border-radius:0 var(--radius) var(--radius) 0;
  box-shadow:var(--shadow);
  margin:var(--sp-4) 0 var(--sp-6);
  font-size:16.5px;
}
.answer strong{color:var(--heading)}

/* ============================================================
   DELIVERY INDEX BADGE  (brass = the "official plaque")
   ============================================================ */
.badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-data);font-size:12px;letter-spacing:.08em;color:var(--brass);border:1px solid var(--brass);border-radius:999px;padding:5px 14px;text-transform:uppercase;background:transparent}

/* ============================================================
   TABLES  (highest AI-citation format - HTML tables, mono numbers)
   ============================================================ */
.wp-block-table table,
table.data,
.entry-content table{
  width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;
  font-size:14.5px;margin:var(--sp-4) 0;
}
table.data th,.entry-content table th{background:var(--ink-soft);color:var(--heading);text-align:left;font-weight:600;padding:11px 14px;font-size:13px;letter-spacing:.02em}
table.data td,.entry-content table td{padding:11px 14px;border-top:1px solid var(--hairline)}
table.data td.num{font-family:var(--font-data);font-variant-numeric:tabular-nums;text-align:right}
table.data tr:hover td{background:var(--row-hover)}
.delta-ok{color:var(--ok);font-weight:600}
.delta-warn{color:var(--warn);font-weight:600}
.delta-bad{color:var(--error);font-weight:600}

/* ============================================================
   CARDS  (projects, developers, guides)
   ============================================================ */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:var(--sp-4)}
.card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card .thumb{aspect-ratio:16/10;object-fit:cover;width:100%;background:var(--ink-soft)}
.card .body{padding:16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card .title{font-family:var(--font-display);font-size:18px;color:var(--heading);font-weight:600;text-decoration:none}
.card .title:hover{color:var(--verdigris)}
.card .kv{font-family:var(--font-data);font-size:12.5px;color:var(--text-muted)}
.card .card-foot{margin-top:auto;padding-top:10px}

/* stat cards (homepage live snapshot / data headline block) */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:var(--sp-4)}
.stat{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow)}
.stat .figure{font-family:var(--font-display);font-size:34px;color:var(--heading);font-weight:600;line-height:1}
.stat .figure .unit{font-family:var(--font-data);font-size:15px;color:var(--text-muted);font-weight:400}
.stat .label{font-family:var(--font-data);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-top:8px}
.stat .delta{font-family:var(--font-data);font-size:13px;margin-top:4px}

/* ============================================================
   KEY-FACTS TABLE (project/developer profile)
   ============================================================ */
.keyfacts{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;font-size:14.5px;margin:var(--sp-4) 0}
.keyfacts th{width:38%;background:var(--ink-soft);color:var(--heading);text-align:left;font-weight:600;padding:11px 14px;vertical-align:top}
.keyfacts td{padding:11px 14px;border-top:1px solid var(--hairline);font-family:var(--font-data);font-variant-numeric:tabular-nums}
.keyfacts tr:first-child th,.keyfacts tr:first-child td{border-top:0}

/* ============================================================
   LEAD CTA BLOCK  (every conversion path ends here)
   ============================================================ */
.lead-cta{background-color:var(--surface-invert);background-image:radial-gradient(130% 90% at 100% 0%, rgba(126,37,54,.22), transparent 55%);color:#EAF1EF;border-radius:var(--radius);border-top:3px solid var(--saperavi);padding:30px 34px;margin:var(--sp-7) auto;max-width:760px;box-shadow:0 18px 50px rgba(8,26,28,.22)}
.lead-cta h3{color:#F6F8F5;margin-top:0;font-size:23px}
/* Scroll-reveal entrance (JS adds .reveal-ready; no-JS shows normally) */
.lead-cta.reveal-ready{opacity:0;transform:translateY(18px)}
.lead-cta.reveal-ready.is-in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s ease}
.lead-cta p{color:#C7D6D2}
.lead-cta .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.lead-cta .actions .btn+.btn{margin-left:0}

/* pros / cons */
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:var(--sp-4) 0}
.proscons .col{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);padding:18px 20px}
.proscons h4{margin-top:0}
.proscons .pros h4{color:var(--ok)}
.proscons .cons h4{color:var(--error)}
.proscons ul{padding-left:18px;margin:0;font-size:14.5px}
.proscons li{margin:7px 0}

/* ============================================================
   FORMS  (Fluent Forms will inherit; these are base styles)
   ============================================================ */
label{display:block;font-size:14px;font-weight:600;color:var(--heading);margin-bottom:6px}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;font-family:var(--font-ui);font-size:15px;padding:11px 13px;
  background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);color:var(--text);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--verdigris);outline-offset:2px;border-color:var(--verdigris)}
.field{margin-bottom:16px}
.consent{font-size:13px;color:var(--text-muted);display:flex;gap:8px;align-items:flex-start}
.consent input{width:auto;margin-top:3px}

/* ============================================================
   FAQ (details/summary - FAQPage schema mirrors this)
   ============================================================ */
.faq details{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);margin:8px 0;padding:0 18px}
.faq summary{font-weight:600;color:var(--heading);cursor:pointer;padding:14px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--saperavi);font-family:var(--font-data)}
.faq details[open] summary::after{content:"-"}
.faq details[open] summary{border-bottom:1px dashed var(--hairline)}
.faq .faq-a{padding:12px 0 16px}

/* ============================================================
   SOURCES / LAST-UPDATED  (coordinate-style metadata)
   ============================================================ */
.sources{margin-top:var(--sp-7);padding-top:var(--sp-4);border-top:1px solid var(--hairline);font-size:13.5px;color:var(--text-muted)}
.updated-line{font-family:var(--font-data);font-size:12px;letter-spacing:.08em;color:var(--text-muted);text-transform:uppercase}

/* ============================================================
   FOOTER  (full topical sitemap)
   ============================================================ */
.site-footer{background:var(--surface-invert);color:#C7D6D2;margin-top:var(--sp-6);padding:var(--sp-8) 0 var(--sp-6)}
.site-footer a{color:#C7D6D2;text-decoration:none}
.site-footer a:hover{color:#F6F8F5;text-decoration:underline}
.footer-cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
.footer-cols h4{color:#8FB0AB;font-family:var(--font-data);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;margin-bottom:12px}
.footer-cols ul{list-style:none;padding:0;margin:0}
.footer-cols li{margin:8px 0;font-size:14px}
.footer-brand .brand{margin-bottom:10px}
.footer-brand .brand svg{height:48px}
.footer-meta{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid #1B3E41;font-family:var(--font-data);font-size:11px;letter-spacing:.08em;color:#6E8C88;text-transform:uppercase}

/* ============================================================
   ACCESSIBILITY  (WCAG AA - verified in brandbook §7)
   ============================================================ */
:focus-visible{outline:2px solid var(--verdigris);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .footer-cols{grid-template-columns:1fr 1fr}
  .proscons{grid-template-columns:1fr}
}
@media (max-width:720px){
  .main-nav{display:none;position:absolute;left:0;right:0;top:76px;background:var(--surface-invert);padding:8px 24px 20px;z-index:50}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;gap:0}
  .main-nav li{border-top:1px solid #1B3E41}
  .main-nav a{display:block;padding:12px 0}
  .nav-toggle{display:inline-block}
  .btn+.btn{margin-left:0;margin-top:10px}
  .footer-cols{grid-template-columns:1fr}
  .keyfacts th{width:44%}
}

/* ============================================================
   HEADER RIGHT CLUSTER + THEME TOGGLE  (added v0.2)
   ============================================================ */
.site-header{position:sticky;top:0;z-index:100;box-shadow:0 2px 14px rgba(8,26,28,.16)}
.header-right{display:flex;align-items:center;gap:18px}
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;cursor:pointer;
  color:#EAF1EF;background:transparent;
  border:1px solid #2C5559;border-radius:var(--radius);
  transition:background .12s ease,border-color .12s ease;
}
.theme-toggle:hover{background:rgba(255,255,255,.06);border-color:#3C6A6E}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
[data-theme="dark"] .theme-toggle .icon-sun{display:block}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}

/* ============================================================
   HERO SKYLINE (chart-style line + dot art, right side)
   ============================================================ */
.hero-skyline{
  position:absolute;right:2.5%;bottom:0;top:0;
  width:46%;max-width:560px;
  display:flex;align-items:flex-end;justify-content:flex-end;
  color:#BCD6D0; /* fallback for no-rgba UAs */
  color:rgba(233,241,239,.42);
  z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to left, black 55%, transparent 100%);
          mask-image:linear-gradient(to left, black 55%, transparent 100%);
}
.hero-skyline svg{width:100%;height:auto;max-height:88%}
.hero-skyline .sk-accent{color:var(--brass)}      /* brass beacons */
.hero-skyline .sk-dots{color:rgba(95,184,171,.7)} /* verdigris dots */
.hero .container{position:relative;z-index:1}
@media (max-width:1024px){ .hero-skyline{width:40%;opacity:.7} }
@media (max-width:820px){ .hero-skyline{display:none} }

/* ============================================================
   NATIVE FORMS (contact / lead) + QUIZ  (added v0.2)
   Must read well on the dark .lead-cta panel AND on light pages.
   ============================================================ */
.batumi-form{margin-top:8px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.form-grid > *{min-width:0}
.batumi-form input,.batumi-form select,.batumi-form textarea{min-width:0;max-width:100%}
.form-grid .field--wide{grid-column:1 / -1}
@media (max-width:560px){ .form-grid{grid-template-columns:1fr} }

.batumi-form .field{margin-bottom:0}
.batumi-form .field-label{display:block;font-size:14px;font-weight:600;color:var(--heading);margin-bottom:8px}
.batumi-form .req{color:var(--saperavi)}
.batumi-form button[type=submit]{margin-top:18px}

/* radio chips */
.radio-set{display:flex;flex-wrap:wrap;gap:8px}
.radio-chip{display:inline-flex;align-items:center;margin:0;font-weight:400;cursor:pointer}
.radio-chip input{position:absolute;opacity:0;width:0;height:0}
.radio-chip span{
  display:inline-block;padding:9px 16px;border:1px solid var(--hairline);
  border-radius:999px;background:var(--card);color:var(--text);font-size:14px;
  transition:border-color .12s ease,background .12s ease,color .12s ease;
}
.radio-chip:hover span{border-color:var(--verdigris)}
.radio-chip input:checked+span{background:#1E6B62;border-color:#1E6B62;color:#fff}
.radio-chip input:focus-visible+span{outline:2px solid var(--verdigris);outline-offset:2px}

/* consent + status panels */
.form-consent{font-size:12.5px;color:var(--text-muted);margin:14px 0 0;max-width:60ch}
.form-consent a{color:var(--verdigris)}
.form-success{background:#EAF6EE;border:1px solid var(--ok);color:#14512F;border-radius:var(--radius);padding:16px 18px;font-size:15px}
.form-error{background:#FBEDEA;border:1px solid var(--error);color:#8A2C1B;border-radius:var(--radius);padding:12px 16px;margin-bottom:14px;font-size:14px}
.or-sep{color:var(--text-muted);font-size:13px;margin-right:4px}

/* --- dark context: form lives inside the ink .lead-cta panel --- */
.lead-cta .lead-form{margin-top:8px}
.lead-cta .batumi-form .field-label,
.lead-cta .batumi-form label{color:#EAF1EF}
.lead-cta .radio-chip span{background:rgba(255,255,255,.05);border-color:#2C5559;color:#DCE7E4}
.lead-cta .radio-chip input:checked+span{background:var(--saperavi);border-color:var(--saperavi);color:#fff}
.lead-cta .form-consent{color:#93A5A2}
.lead-cta .form-consent a{color:#8FB0AB}
.lead-cta .form-success{background:rgba(30,123,79,.15);color:#CBEAD7;border-color:#2E7D53}
.lead-cta .or-sep{color:#8FB0AB}

/* Buttons inside the always-dark .lead-cta panel must read LIGHT in both
   themes. Their default colors (--heading/--verdigris) go dark-on-dark in
   light mode, which hid "Next" and made "Back" vanish on hover. */
.lead-cta .btn-secondary,
.lead-cta .btn-ghost{color:var(--on-invert);border-color:var(--invert-border);background:transparent}
.lead-cta .btn-secondary:hover,
.lead-cta .btn-ghost:hover{background:rgba(255,255,255,.10);color:#fff;border-color:var(--on-invert)}
.lead-cta .actions{align-items:center}

/* --- quiz stepper --- */
.quiz{position:relative}
.quiz-progress{height:4px;background:rgba(255,255,255,.12);border-radius:999px;margin-bottom:22px;overflow:hidden}
.lead-cta .quiz-progress{background:rgba(255,255,255,.12)}
.quiz-bar{display:block;height:100%;background:var(--saperavi);border-radius:999px;transition:width .3s ease}
.quiz-step{border:0;padding:0;margin:0;min-width:0}
.quiz-step legend{font-family:var(--font-display);font-size:22px;color:#F6F8F5;padding:0;margin-bottom:16px;font-weight:500}
.entry-content .quiz-step legend{color:var(--heading)}
.quiz-nav{display:flex;gap:10px;align-items:center;margin-top:20px}
.quiz-nav .btn+.btn{margin-left:0}
.quiz-nav button[type=submit]{margin-top:0}
.quiz.shake{animation:batumi-shake .38s}
@keyframes batumi-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ============================================================
   POLISH PASS v0.3.1 - mobile logo, placeholders, small a11y
   ============================================================ */
/* consistent placeholder colour across themes */
.batumi-form input::placeholder,
.batumi-form textarea::placeholder,
input::placeholder,textarea::placeholder{color:var(--text-muted);opacity:1}

/* native select should follow the theme (arrow + text) */
select{color:var(--text);background-color:var(--card)}

/* keep the hero CTA row aligned on small screens */
.hero p .btn{vertical-align:middle}

@media (max-width:720px){
  .brand svg{height:32px}
  .header-right{gap:12px}
  .theme-toggle{width:36px;height:36px}
  h1{font-size:clamp(30px,7vw,40px)}
  .hero .container{padding-top:var(--sp-7);padding-bottom:var(--sp-7)}
  .lead-cta{padding:22px 20px}
  .quiz-step legend{font-size:20px}
}

/* ============================================================
   INTERACTIVE TOOLS (calculators)  v0.3.4
   ============================================================ */
.calc{margin:8px 0}
.calc .field{margin-bottom:0}
.calc .form-grid{margin-bottom:20px}
.calc [data-when]{display:none}
.calc .checkline{display:flex;align-items:center;gap:8px;font-weight:400;color:var(--text)}
.calc .checkline input{width:auto;margin:0}
.calc-result{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);padding:4px 20px;box-shadow:var(--shadow)}
.calc-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-top:1px solid var(--hairline);font-size:15px}
.calc-row:first-child{border-top:0}
.calc-row span{color:var(--text-muted)}
.calc-row strong{font-family:var(--font-data);font-variant-numeric:tabular-nums;color:var(--heading);font-size:16px}
.calc-headline{border-top:2px solid var(--ink-soft);margin-top:2px}
.calc-headline span{color:var(--heading);font-weight:600}
.calc-headline strong{font-family:var(--font-display);font-size:26px;color:var(--saperavi);line-height:1}
.calc-verdict{font-family:var(--font-display);font-size:24px;font-weight:600;margin:16px 0 4px}
.calc-verdict.ok{color:var(--ok)}
.calc-verdict.bad{color:var(--error)}

/* Featured image on project / developer profiles */
.entity-figure{margin:0 0 26px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--hairline);box-shadow:var(--shadow)}
.entity-figure img{display:block;width:100%;height:auto}

/* At-a-glance scorecard on developer / project profiles */
.scorecard{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 30px}
.score-item{display:flex;flex-direction:column;gap:7px;padding:14px 18px;background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow);flex:1 1 130px}
.score-label{font-family:var(--font-ui);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.score-val{font-family:var(--font-data);font-size:21px;font-weight:600;color:var(--heading);line-height:1;font-variant-numeric:tabular-nums}
.score-val.delta-bad{color:var(--error)}
.score-val.delta-warn{color:var(--warn)}
.chip{display:inline-block;align-self:flex-start;font-family:var(--font-ui);font-size:13px;font-weight:600;padding:5px 13px;border-radius:999px;line-height:1.35}
.chip-ok{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.chip-warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.chip-bad{background:color-mix(in srgb,var(--error) 15%,transparent);color:var(--error)}

/* Horizontal-scroll wrapper for wide tables (mobile-safe; JS auto-wraps) */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--sp-4) 0;border-radius:var(--radius)}
.table-scroll > table{margin:0}
.keyfacts td{overflow-wrap:anywhere}

/* Map-pin link (HQ -> Google Maps directions). SVG via CSS mask so it inherits colour and survives kses */
.map-link{display:inline-flex;align-items:center;gap:5px}
.map-link::before{content:"";width:11px;height:13px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z'/%3E%3C/svg%3E") center/contain no-repeat}

/* Verdict / answer boxes fill their full width (override the prose readability cap) */
.answer p{max-width:none}
.answer p:last-child{margin-bottom:0}

/* Developer logo avatar (uploaded logo) or monogram fallback (IP-safe) */
.entity-avatar{width:76px;height:76px;border-radius:14px;overflow:hidden;margin:0 0 18px;border:1px solid var(--hairline);box-shadow:var(--shadow);background:var(--card);display:flex;align-items:center;justify-content:center}
.entity-avatar img{width:100%;height:100%;object-fit:contain}
.monogram{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:32px;font-weight:600;color:var(--on-invert);background:linear-gradient(135deg,var(--ink) 0%,var(--ink-2) 100%)}

/* Brand-partner badges (trust layer) */
.badge-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.pill{display:inline-block;font-family:var(--font-ui);font-size:13px;font-weight:600;padding:6px 14px;border-radius:999px;background:var(--ink-soft);color:var(--heading);border:1px solid var(--hairline)}

/* Project location map (Leaflet + OSM). isolation contains Leaflet's z-index under the sticky header */
.project-map{height:340px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--hairline);box-shadow:var(--shadow);margin:0 0 12px;isolation:isolate;position:relative;z-index:0}
.project-map .leaflet-control-attribution{font-size:10px}

/* Pre-filled tool link buttons on project pages */
.tool-links{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 0}
.tool-links .btn{margin:0}

/* Full-width prose on profile pages (guides/articles keep the 68ch readability cap) */
.single-project p,.single-developer p,
.single-project .entry-content p,.single-developer .entry-content p{max-width:none}

/* Compact 2-up for short profile sections */
.info-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:var(--sp-4) 0}
.info-card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px}
.info-card.accent{border-left:3px solid var(--brass)}
.info-card h3{margin:0 0 8px;font-size:18px}
.info-card p{margin:0;max-width:none}

/* Mobile refinements (audit pass) */
@media (max-width:560px){
  .container{padding-left:18px;padding-right:18px}
  h2{font-size:23px}
  .keyfacts th,.keyfacts td{display:block;width:auto}
  .keyfacts th{padding-bottom:2px;border-top:1px solid var(--hairline)}
  .keyfacts td{padding-top:2px;border-top:0}
  .keyfacts tr:first-child th{border-top:0}
  .scorecard{gap:10px}
  .score-item{padding:12px 14px}
  .entity-avatar{width:64px;height:64px}
  .project-map{height:260px}
}

/* Construction-updates timeline (dated, sourced status) */
.timeline{list-style:none;margin:var(--sp-4) 0 12px;padding:0}
.timeline-item{position:relative;padding:0 0 16px 22px;border-left:2px solid var(--hairline)}
.timeline-item:last-child{padding-bottom:0;border-left-color:transparent}
.timeline-item::before{content:"";position:absolute;left:-6px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--brass);border:2px solid var(--card)}
.timeline-date{display:block;font-family:var(--font-data);font-size:12.5px;color:var(--text-muted);letter-spacing:.02em;margin-bottom:2px}
.timeline-note{display:block;font-size:15px}

/* Server-rendered charts (theme-aware, no JS) */
.svg-chart{width:100%;height:auto;display:block;margin:var(--sp-4) 0;overflow:visible}
.chart-grid{stroke:var(--hairline);stroke-width:1}
.chart-area{fill:var(--verdigris);opacity:.12}
.chart-line{fill:none;stroke:var(--verdigris);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart-dot{fill:var(--verdigris);stroke:var(--card);stroke-width:2}
.chart-ylabel,.chart-xlabel{fill:var(--text-muted);font-family:var(--font-data);font-size:12px}
.bar-chart{margin:var(--sp-4) 0;display:flex;flex-direction:column;gap:7px}
.bar-row{display:grid;grid-template-columns:124px 1fr 68px;align-items:center;gap:12px;font-size:14px}
.bar-label{color:var(--heading);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{background:var(--ink-soft);border-radius:4px;height:16px;overflow:hidden}
.bar-fill{display:block;height:100%;background:linear-gradient(90deg,var(--verdigris),var(--brass));border-radius:4px}
.bar-row.is-hl .bar-fill{background:var(--brass)}
.bar-val{font-family:var(--font-data);color:var(--heading);text-align:right}
@media (max-width:560px){ .bar-row{grid-template-columns:92px 1fr 58px;gap:8px;font-size:12.5px} }

/* Whole entity card is clickable (stretched link over the card) */
.card{position:relative;transition:box-shadow .18s ease,transform .18s ease}
.card:hover{box-shadow:0 10px 28px rgba(8,26,28,.14);transform:translateY(-2px)}
.card .title::after{content:"";position:absolute;inset:0;z-index:1}
.card .card-foot .btn{position:relative;z-index:2}

/* Sub-section label inside calculators (e.g. cost breakdown) */
.calc-sub{margin:16px 0 6px;font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);border-top:1px solid var(--hairline);padding-top:14px}

/* Homepage mobile: right-size hero CTA, 2-up stats, tighter uniform sections */
@media (max-width:560px){
  .section{margin-top:var(--sp-6)}
  .hero .btn{font-size:13.5px;padding:11px 16px}
  .stat-grid{grid-template-columns:1fr 1fr;gap:12px;margin-top:var(--sp-3)}
  .stat{padding:16px 14px}
  .stat .figure{font-size:26px}
  .stat .figure .unit{font-size:12px}
  .stat .label{font-size:10px;letter-spacing:.06em;margin-top:6px}
}

/* Project card: structured, scannable info */
.card .card-sub{font-family:var(--font-ui);font-size:13px;color:var(--text-muted);margin:3px 0 0}
.card .card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.card .card-tags .pill{font-size:12px;padding:4px 11px}

/* Calculator notes fill the width (they sit under a wide tool UI) */
.calc .rule-note{max-width:none}

/* Cookie-consent banner (custom, plugin-free) */
.consent-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:560px;margin:0 auto;background:var(--surface-invert);color:#C7D6D2;border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:0 12px 40px rgba(8,26,28,.4);padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.consent-banner[hidden]{display:none}
.consent-text{margin:0;font-size:13.5px;line-height:1.5;max-width:none}
.consent-text a{color:#9ec7c0;text-decoration:underline}
.consent-actions{display:flex;gap:10px;justify-content:flex-end}
.consent-actions .btn{margin:0}
.consent-banner .btn-ghost{color:#C7D6D2;border-color:rgba(199,214,210,.4);background:transparent}
@media (max-width:480px){ .consent-actions{justify-content:stretch} .consent-actions .btn{flex:1} }

/* Lead form: mobile - tighter padding, full-width tap targets, stacked actions */
@media (max-width:560px){
  .lead-cta{padding:20px 18px}
  .lead-cta h3{font-size:19px}
  .quiz-nav{margin-top:16px}
  .quiz-nav .btn{flex:1 1 0}
  .lead-cta .actions{flex-direction:column;align-items:stretch;gap:8px}
  .lead-cta .actions .btn{width:100%;justify-content:center}
  .lead-cta .or-sep{text-align:center;margin:0}
}

/* Responsive hero CTA label: full on desktop, short on mobile */
.cta-short{display:none}
@media (max-width:560px){
  .cta-full{display:none}
  .cta-short{display:inline}
}

/* Hero action buttons: flex row, stay side-by-side (incl. mobile) */
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-actions .btn{margin:0}
.hero-actions .btn+.btn{margin:0}

/* Author byline (E-E-A-T credit) */
.byline{font-size:14.5px;color:var(--text-muted);margin-top:14px}