/* ==========================================================================
   URCIVILWALA Design Studio — shared stylesheet
   Used by homepage, True Cost hub, and all cost pages.
   ========================================================================== */

:root{
  --ink:#161824;
  --ink-2:#232637;
  --ochre:#c8892a;
  --ochre-d:#a56f1f;
  --paper:#faf8f4;
  --paper-2:#f1ece3;
  --line:#e2dccf;
  --slate:#4a4d5a;
  --muted:#7a7d88;
  --white:#ffffff;
  --ok:#1f8a4c;
  --wa-green:#25D366;
  --shadow-sm:0 1px 3px rgba(22,24,36,.08);
  --shadow:0 6px 24px rgba(22,24,36,.10);
  --shadow-lg:0 20px 60px rgba(22,24,36,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{line-height:1.15;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.accent{color:var(--ochre)}

/* ---------- Top bar ---------- */
.topbar{background:var(--ink);color:#cfd2dc;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;gap:16px}
.topbar a{color:#e7e9f0}
.topbar .tb-right{display:flex;gap:18px;align-items:center}
.topbar .dot{color:var(--ochre)}
@media(max-width:680px){.topbar .tb-left{display:none}.topbar .wrap{justify-content:center}}

/* ---------- Header / nav ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(250,248,244,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{display:flex;flex-direction:column;line-height:1}
.logo .lname{font-size:22px;font-weight:900;letter-spacing:.02em}
.logo .lname b{color:var(--ochre)}
.logo .ltag{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-size:14px;font-weight:600;color:var(--slate);transition:color .15s}
.nav-links a:hover{color:var(--ochre)}
.nav-cta{background:var(--ink);color:#fff !important;padding:10px 18px;border-radius:8px;font-size:13.5px}
.nav-cta:hover{background:var(--ochre)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.burger span{width:24px;height:2.5px;background:var(--ink);border-radius:2px;transition:.2s}
@media(max-width:900px){
  .nav-links{position:fixed;inset:70px 0 auto 0;background:var(--paper);flex-direction:column;
    padding:20px;gap:4px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);
    transform:translateY(-140%);transition:transform .25s;height:auto}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{width:100%;padding:12px 8px;border-bottom:1px solid var(--line);font-size:15px}
  .nav-links .nav-cta{text-align:center;border:none;margin-top:8px}
  .burger{display:flex}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 26px;border-radius:10px;
  font-size:15px;font-weight:700;cursor:pointer;border:none;transition:transform .12s,background .15s,box-shadow .15s}
.btn:active{transform:translateY(1px)}
.btn-wa{background:#25D366;color:#08301a}
.btn-wa:hover{background:#1fbe5a;box-shadow:0 8px 24px rgba(37,211,102,.35)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.28)}
.btn-ghost:hover{border-color:var(--ochre);color:var(--ochre)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--ochre)}
.btn-ochre{background:var(--ochre);color:#231a08}
.btn-ochre:hover{background:var(--ochre-d);color:#fff}

/* ---------- Hero (homepage) ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(200,137,42,.22), transparent 60%),
    linear-gradient(180deg, #1b1e2c 0%, #161824 100%);}
.hero-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;
  padding:64px 0 72px}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ochre);margin-bottom:18px}
.hero .eyebrow::before{content:"";width:26px;height:2px;background:var(--ochre)}
.hero h1{font-size:clamp(32px,5vw,52px);font-weight:900;margin-bottom:18px}
.hero h1 span{color:var(--ochre)}
.hero p.lead{font-size:17px;color:#c7cad6;max-width:520px;margin-bottom:26px}
.hero-trust{display:flex;gap:28px;margin-bottom:30px;flex-wrap:wrap}
.hero-trust .t{display:flex;flex-direction:column}
.hero-trust .num{font-size:26px;font-weight:900;color:#fff}
.hero-trust .lbl{font-size:12px;color:#9fa3b2;text-transform:uppercase;letter-spacing:.06em}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}

/* Estimate calculator card */
.calc{background:var(--paper);color:var(--ink);border-radius:16px;padding:26px;box-shadow:var(--shadow-lg)}
.calc h3{font-size:19px;font-weight:800;margin-bottom:4px}
.calc .sub{font-size:13px;color:var(--muted);margin-bottom:18px}
.calc label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);margin:14px 0 7px}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{flex:1;min-width:64px;padding:11px 8px;border:1.5px solid var(--line);background:#fff;
  border-radius:9px;font-size:14px;font-weight:700;color:var(--slate);cursor:pointer;transition:.15s}
.seg button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{padding:8px 12px;border:1.5px solid var(--line);background:#fff;border-radius:20px;
  font-size:12.5px;font-weight:600;color:var(--slate);cursor:pointer;transition:.15s}
.chip.on{background:var(--ochre);color:#231a08;border-color:var(--ochre)}
.calc-out{margin-top:20px;padding:16px;background:var(--ink);border-radius:12px;text-align:center}
.calc-out .rlbl{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#9fa3b2}
.calc-out .range{font-size:24px;font-weight:900;color:#fff;margin:3px 0 2px}
.calc-out .note{font-size:11px;color:#8a8e9c}
.calc .btn{width:100%;justify-content:center;margin-top:14px}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:32px;padding:44px 0 52px}
}

/* ---------- Section shells ---------- */
section{padding:72px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 46px}
.sec-head .eyebrow{display:inline-block;font-size:12.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.16em;color:var(--ochre);margin-bottom:12px}
.sec-head h2{font-size:clamp(26px,3.5vw,38px);font-weight:900;margin-bottom:12px}
.sec-head p{color:var(--slate);font-size:16px}

/* ---------- BHK pricing ---------- */
.bhk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bhk{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column}
.bhk:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.bhk .ph{aspect-ratio:4/3;background:linear-gradient(135deg,#2a2e42,#1b1e2c);position:relative;
  display:flex;align-items:center;justify-content:center;color:#4a4f68}
.bhk .ph .tag{position:absolute;top:14px;left:14px;background:var(--ochre);color:#231a08;
  font-size:12px;font-weight:800;padding:5px 12px;border-radius:6px}
.bhk .ph svg{width:56px;height:56px;opacity:.5}
.bhk .body{padding:22px;flex:1;display:flex;flex-direction:column}
.bhk h3{font-size:20px;font-weight:800;margin-bottom:6px}
.bhk .desc{font-size:13.5px;color:var(--muted);margin-bottom:16px;flex:1}
.bhk .price{font-size:13px;color:var(--slate)}
.bhk .price b{display:block;font-size:24px;font-weight:900;color:var(--ink);margin-top:2px}
.bhk .price .star{color:var(--ochre)}
.bhk .btn{margin-top:16px;width:100%;justify-content:center}
@media(max-width:820px){.bhk-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}}

/* ---------- Services ---------- */
.serv{background:var(--paper-2)}
.serv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.scard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 20px;
  text-align:center;transition:transform .15s,box-shadow .15s}
.scard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.scard .ic{width:52px;height:52px;margin:0 auto 14px;border-radius:12px;background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;color:var(--ochre)}
.scard .ic svg{width:26px;height:26px}
.scard h3{font-size:15.5px;font-weight:800;margin-bottom:5px}
.scard p{font-size:12.5px;color:var(--muted);line-height:1.5}
@media(max-width:900px){.serv-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.serv-grid{grid-template-columns:1fr 1fr;gap:12px}.scard{padding:18px 12px}}

/* ---------- Why us ---------- */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.why-list{display:flex;flex-direction:column;gap:22px}
.why-item{display:flex;gap:16px}
.why-item .n{flex:0 0 44px;height:44px;border-radius:11px;background:var(--ink);color:var(--ochre);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:17px}
.why-item h3{font-size:17px;font-weight:800;margin-bottom:3px}
.why-item p{font-size:14px;color:var(--slate)}
.why-visual{background:linear-gradient(135deg,#1b1e2c,#232637);border-radius:18px;padding:40px;color:#fff;
  box-shadow:var(--shadow)}
.why-visual .big{font-size:44px;font-weight:900;color:var(--ochre);line-height:1}
.why-visual .big-lbl{font-size:14px;color:#c7cad6;margin:6px 0 28px}
.why-visual .mini{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.why-visual .mini .num{font-size:26px;font-weight:900}
.why-visual .mini .lbl{font-size:12px;color:#9fa3b2;text-transform:uppercase;letter-spacing:.05em}
@media(max-width:820px){.why-grid{grid-template-columns:1fr;gap:32px}}

/* ---------- Process ---------- */
.proc{background:var(--ink);color:#fff}
.proc .sec-head h2{color:#fff}
.proc .sec-head p{color:#b9bcca}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{position:relative;padding:26px 20px;background:var(--ink-2);border-radius:14px;border:1px solid #2e3247}
.step .sn{font-size:13px;font-weight:800;color:var(--ochre);letter-spacing:.1em}
.step h3{font-size:16px;font-weight:800;margin:10px 0 6px}
.step p{font-size:13px;color:#a9adbd}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}

/* ---------- Trusted brands ---------- */
.brands{text-align:center}
.brand-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:8px}
.brand-pill{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 22px;
  font-weight:800;color:var(--slate);font-size:15px;box-shadow:var(--shadow-sm)}

/* ---------- Testimonials ---------- */
.tst{background:var(--paper-2)}
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;box-shadow:var(--shadow-sm)}
.tcard .stars{color:var(--ochre);font-size:15px;letter-spacing:2px;margin-bottom:12px}
.tcard p{font-size:14.5px;color:var(--slate);font-style:italic;margin-bottom:16px}
.tcard .who{display:flex;align-items:center;gap:12px}
.tcard .av{width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--ochre);
  display:flex;align-items:center;justify-content:center;font-weight:800}
.tcard .who .nm{font-weight:800;font-size:14px}
.tcard .who .loc{font-size:12px;color:var(--muted)}
@media(max-width:820px){.tst-grid{grid-template-columns:1fr}}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(120deg,var(--ochre),#e0a545);color:#231a08;text-align:center}
.cta-band h2{font-size:clamp(26px,3.5vw,36px);font-weight:900;margin-bottom:10px}
.cta-band p{font-size:16px;margin-bottom:26px;color:#3d2e10}
.cta-band .btn-wa{box-shadow:0 10px 30px rgba(8,48,26,.2)}

/* ---------- Contact / lead form ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.contact-info h3{font-size:22px;font-weight:900;margin-bottom:16px}
.ci-row{display:flex;gap:14px;margin-bottom:18px;align-items:flex-start}
.ci-row .ic{flex:0 0 42px;height:42px;border-radius:10px;background:var(--paper-2);color:var(--ochre);
  display:flex;align-items:center;justify-content:center}
.ci-row .ic svg{width:20px;height:20px}
.ci-row .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.ci-row .val{font-weight:700;font-size:15px}
.lead-form{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow)}
.lead-form h3{font-size:20px;font-weight:900;margin-bottom:4px}
.lead-form .fsub{font-size:13px;color:var(--muted);margin-bottom:18px}
.lead-form .fld{margin-bottom:14px}
.lead-form label{display:block;font-size:12.5px;font-weight:700;color:var(--slate);margin-bottom:6px}
.lead-form input,.lead-form select,.lead-form textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:9px;font-size:15px;
  font-family:inherit;background:var(--paper);transition:border-color .15s}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:none;border-color:var(--ochre)}
.lead-form textarea{min-height:84px;resize:vertical}
.lead-form .btn{width:100%;justify-content:center;margin-top:6px}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:30px}}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:#b6b9c7;padding:52px 0 28px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:40px;margin-bottom:36px}
footer .logo .lname{color:#fff;font-size:20px}
footer h4{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
footer .fdesc{font-size:14px;color:#9296a6;margin-top:14px;max-width:320px}
footer .flinks{list-style:none;display:flex;flex-direction:column;gap:10px}
footer .flinks a{font-size:14px;color:#b6b9c7}
footer .flinks a:hover{color:var(--ochre)}
.foot-bottom{border-top:1px solid #2b2f42;padding-top:22px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:10px;font-size:13px;color:#7f8394}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr;gap:28px}}

/* ---------- Floating WhatsApp ---------- */
.fab{position:fixed;right:20px;bottom:20px;z-index:60;width:58px;height:58px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px rgba(37,211,102,.45);
  animation:pulse 2.4s infinite}
.fab svg{width:32px;height:32px;fill:#fff}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

@media(prefers-reduced-motion:reduce){*{animation:none !important;scroll-behavior:auto}}

/* ==========================================================================
   TRUE COST section — hub + individual pages
   ========================================================================== */

/* Hub hero strip (lighter than homepage hero — no calc panel) */
.cost-hero{background:var(--ink);color:#fff;padding:56px 0 44px}
.cost-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ochre);margin-bottom:14px}
.cost-hero .eyebrow::before{content:"";width:26px;height:2px;background:var(--ochre)}
.cost-hero h1{font-size:clamp(28px,4vw,44px);font-weight:900;margin-bottom:14px;max-width:820px}
.cost-hero h1 span{color:var(--ochre)}
.cost-hero p{font-size:16px;color:#c7cad6;max-width:720px}

/* Hub tile grid */
.cost-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ctile{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column}
.ctile:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.ctile .ph{aspect-ratio:4/3;background:linear-gradient(135deg,#2a2e42,#1b1e2c);
  display:flex;align-items:center;justify-content:center;color:var(--ochre);position:relative}
.ctile .ph svg{width:48px;height:48px;opacity:.85}
.ctile .ph .badge{position:absolute;top:12px;left:12px;background:var(--ochre);color:#231a08;
  font-size:11px;font-weight:800;padding:4px 10px;border-radius:5px;letter-spacing:.04em}
.ctile .body{padding:18px 20px;flex:1;display:flex;flex-direction:column;gap:6px}
.ctile h3{font-size:16px;font-weight:800}
.ctile .range{font-size:13px;color:var(--slate);font-weight:600}
.ctile .range b{color:var(--ink);font-weight:800}
.ctile .cta{margin-top:auto;padding-top:10px;font-size:13px;font-weight:700;color:var(--ochre);
  display:inline-flex;align-items:center;gap:6px}
.ctile:hover .cta{color:var(--ochre-d)}
@media(max-width:960px){.cost-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.cost-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:420px){.cost-grid{grid-template-columns:1fr 1fr}.ctile .body{padding:14px}}

/* ---------- Individual cost page ---------- */
.crumb{padding:22px 0 0;font-size:13px;color:var(--muted)}
.crumb a{color:var(--slate);font-weight:600}
.crumb a:hover{color:var(--ochre)}
.crumb .sep{margin:0 8px;color:var(--line)}
.crumb .here{color:var(--ink);font-weight:700}

.page-head{padding:28px 0 12px}
.page-head h1{font-size:clamp(28px,4vw,40px);font-weight:900;margin-bottom:14px;max-width:820px}
.page-head h1 span{color:var(--ochre)}
.page-head .lede{font-size:16.5px;color:var(--slate);max-width:780px}

.page-body{padding:36px 0 60px}
.page-grid{display:grid;grid-template-columns:1.6fr .9fr;gap:44px;align-items:start}
@media(max-width:900px){.page-grid{grid-template-columns:1fr;gap:32px}}

/* Rate table */
.rate-block h2, .scope-block h2, .disc-block h2{
  font-size:20px;font-weight:900;margin-bottom:14px;
  display:flex;align-items:center;gap:10px}
.rate-block h2::before, .scope-block h2::before, .disc-block h2::before{
  content:"";width:4px;height:20px;background:var(--ochre);border-radius:2px}
.rate-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm)}
.rate-table thead{background:var(--ink);color:#fff}
.rate-table th{text-align:left;padding:12px 16px;font-size:12.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em}
.rate-table th.num, .rate-table td.num{text-align:right;white-space:nowrap}
.rate-table td{padding:14px 16px;font-size:14.5px;color:var(--slate);border-top:1px solid var(--line)}
.rate-table tbody tr:hover{background:var(--paper-2)}
.rate-table td strong{color:var(--ink);font-weight:800}
.rate-table td .unit{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.rate-note{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.55}

/* Scope lists */
.scope-block{margin-top:36px}
.scope-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:600px){.scope-cols{grid-template-columns:1fr}}
.scope-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;
  box-shadow:var(--shadow-sm)}
.scope-card h4{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:12px;display:flex;align-items:center;gap:8px}
.scope-card.inc h4{color:var(--ok)}
.scope-card.exc h4{color:#b64545}
.scope-card ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.scope-card li{font-size:14px;color:var(--slate);padding-left:22px;position:relative;line-height:1.5}
.scope-card.inc li::before{content:"✓";position:absolute;left:0;top:0;color:var(--ok);font-weight:900}
.scope-card.exc li::before{content:"✕";position:absolute;left:0;top:0;color:#b64545;font-weight:900}

/* Disclaimer */
.disc-block{margin-top:36px}
.disc-body{background:var(--paper-2);border-left:4px solid var(--ochre);border-radius:0 10px 10px 0;
  padding:18px 22px;font-size:14px;color:var(--slate);line-height:1.65}

/* Right rail (WA CTA + related) */
.rail{position:sticky;top:90px;display:flex;flex-direction:column;gap:20px}
@media(max-width:900px){.rail{position:static}}
.rail-cta{background:linear-gradient(135deg,#1b1e2c,#232637);color:#fff;border-radius:16px;
  padding:26px;box-shadow:var(--shadow)}
.rail-cta .eyebrow{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ochre);margin-bottom:10px;display:block}
.rail-cta h3{font-size:20px;font-weight:900;margin-bottom:8px;color:#fff}
.rail-cta p{font-size:14px;color:#c7cad6;margin-bottom:18px}
.rail-cta .btn{width:100%;justify-content:center}
.rail-cta .call{display:block;text-align:center;font-size:13px;color:#9fa3b2;margin-top:12px}
.rail-cta .call a{color:#fff;font-weight:700;border-bottom:1px dashed rgba(255,255,255,.3)}

.related{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;
  box-shadow:var(--shadow-sm)}
.related h4{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink);margin-bottom:14px}
.related ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.related li a{display:flex;justify-content:space-between;align-items:center;
  padding:11px 12px;border-radius:8px;font-size:14px;font-weight:600;color:var(--slate);
  transition:background .15s,color .15s}
.related li a:hover{background:var(--paper-2);color:var(--ochre)}
.related li a::after{content:"→";color:var(--muted);font-weight:700}
.related li a:hover::after{color:var(--ochre)}