/* margallaenclaveplots.pk — design system
   Identity: DHA institutional prestige (deep pine) + Margalla hills, with brass
   as the single accent. Deliberately unlike the navy/copper of our Bahria site so
   the two read as different publishers, not one network.
   Built mobile-first. Pakistani traffic is overwhelmingly mobile on 4G. */

/* ============================ TOKENS ============================ */
:root{
  --pine:#0B2E22; --pine-2:#123B2C; --pine-3:#1A5440; --pine-4:#2A6B52;
  --paper:#F8F7F3; --card:#FFFFFF; --tint:#EFEDE5; --tint-2:#E5E2D6;
  --brass:#A8741F; --brass-dk:#8A5D14; --brass-lt:#C79B45; --brass-bg:#FAF2E2;
  --wa:#25D366; --wa-dk:#1DA851;
  --text:#1E2A24; --muted:#57655D; --muted-2:#87938B;
  --line:#E2DFD4; --line-2:#D3CFC0; --line-dk:rgba(255,255,255,.14);
  --ok:#166534; --ok-bg:#ECFDF3;
  --warn:#92400E; --warn-bg:#FEF6E7;
  --risk:#9F1239; --risk-bg:#FEF1F4;
  --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:28px;
  --sh:0 1px 2px rgba(11,46,34,.05),0 10px 28px -12px rgba(11,46,34,.16);
  --sh-lg:0 2px 6px rgba(11,46,34,.07),0 26px 60px -18px rgba(11,46,34,.26);
  --nav-h:66px;
  --fd:"Fraunces",Georgia,"Times New Roman",serif;
  --fb:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 14px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{margin:0;background:var(--paper);color:var(--text);
  font:400 16px/1.65 var(--fb);
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--pine-3);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--brass-dk)}
:focus-visible{outline:3px solid var(--brass);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--pine);color:#fff;padding:.8rem 1.2rem;border-radius:0 0 var(--r-s) 0}
.skip:focus{left:0}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:1.1rem}
@media(min-width:768px){.wrap{padding-inline:1.8rem}}
.ico{width:1.15em;height:1.15em;flex:none;vertical-align:-.16em}
.tiny{font-size:.8rem;line-height:1.55;color:var(--muted)}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* ============================ TYPE ============================ */
h1,h2,h3,h4{font-family:var(--fd);font-weight:600;line-height:1.12;
  letter-spacing:-.015em;color:var(--pine);margin:0 0 .5em}
h1{font-size:clamp(2rem,1.35rem + 3.1vw,3.5rem);letter-spacing:-.028em}
h2{font-size:clamp(1.5rem,1.18rem + 1.5vw,2.3rem);letter-spacing:-.022em}
h3{font-size:clamp(1.12rem,1.02rem + .45vw,1.35rem);letter-spacing:-.012em}
h4{font-size:1.02rem;font-family:var(--fb);font-weight:700;letter-spacing:-.005em}
p{margin:0 0 1.05em}
.lede{font-size:clamp(1.06rem,1rem + .35vw,1.24rem);line-height:1.62;color:var(--muted)}
.sec{font-family:var(--fd);font-weight:600;color:var(--pine)}
.kick{font:600 .74rem/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass-dk);margin:0 0 .85rem}

/* ============================ BUTTONS ============================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:600 .95rem/1 var(--fb);letter-spacing:-.005em;padding:.92rem 1.35rem;
  border-radius:var(--r-s);border:1.5px solid transparent;cursor:pointer;
  text-decoration:none;transition:background .18s,border-color .18s,transform .18s,box-shadow .18s;
  min-height:48px}
.btn:active{transform:translateY(1px)}
.btn--wa{background:var(--wa);color:#062814;border-color:var(--wa)}
.btn--wa:hover{background:var(--wa-dk);border-color:var(--wa-dk);color:#062814}
.btn--wa .ico{fill:currentColor;stroke:none}
.btn--pine{background:var(--pine);color:#fff;border-color:var(--pine)}
.btn--pine:hover{background:var(--pine-3);border-color:var(--pine-3);color:#fff}
.btn--brass{background:var(--brass);color:#fff;border-color:var(--brass)}
.btn--brass:hover{background:var(--brass-dk);border-color:var(--brass-dk);color:#fff}
.btn--ghost{background:transparent;color:var(--pine);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--pine);background:var(--tint);color:var(--pine)}
.btn--ghost-l{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn--ghost-l:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff}
.btn--sm{padding:.62rem .95rem;font-size:.86rem;min-height:40px}
.btns{display:flex;flex-wrap:wrap;gap:.7rem}

/* ============================ HEADER ============================ */
.hd{position:sticky;top:0;z-index:80;background:rgba(248,247,243,.86);
  backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);
  border-bottom:1px solid var(--line)}
.hd__in{display:flex;align-items:center;gap:1rem;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.brand__mk{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;
  background:var(--pine);color:var(--brass-lt);font:700 .82rem/1 var(--fd);letter-spacing:.03em;flex:none}
.brand__tx{display:flex;flex-direction:column;line-height:1.12}
.brand__tx b{font:600 1.02rem/1.1 var(--fd);color:var(--pine);letter-spacing:-.02em}
.brand__tx i{font:500 .68rem/1.3 var(--fb);font-style:normal;color:var(--muted);letter-spacing:.04em}
.hd__nav{display:none;margin-left:auto;gap:.15rem}
.hd__nav a{font:500 .9rem/1 var(--fb);color:var(--text);text-decoration:none;
  padding:.62rem .68rem;border-radius:var(--r-s);white-space:nowrap}
.hd__nav a:hover{background:var(--tint);color:var(--pine)}
.hd__nav a.on{color:var(--pine);background:var(--tint);font-weight:600}
.hd__act{display:none;align-items:center;gap:.6rem;margin-left:.4rem}
.hd__tel{display:inline-flex;align-items:center;gap:.4rem;font:600 .88rem/1 var(--fb);
  color:var(--pine);text-decoration:none;white-space:nowrap}
.hd__tel:hover{color:var(--brass-dk)}
.hd__burger{margin-left:auto;width:44px;height:44px;display:grid;place-content:center;gap:5px;
  background:transparent;border:1px solid var(--line-2);border-radius:var(--r-s);cursor:pointer}
.hd__burger span{display:block;width:19px;height:2px;background:var(--pine);border-radius:2px;
  transition:transform .2s,opacity .2s}
.hd__burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hd__burger[aria-expanded=true] span:nth-child(2){opacity:0}
.hd__burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{display:flex;flex-direction:column;padding:.6rem 1.1rem 1.2rem;gap:.1rem;
  background:var(--paper);border-top:1px solid var(--line)}
/* display:flex above beats the UA's [hidden]{display:none}, which shipped the mobile
   menu OPEN on every page load. Caught in a 390px viewport screenshot, not by reading
   the markup — the `hidden` attribute was there and looked correct. */
.mnav[hidden]{display:none}
.mnav a{font:500 1rem/1 var(--fb);color:var(--text);text-decoration:none;padding:.92rem .2rem;
  border-bottom:1px solid var(--line)}
.mnav a.on{color:var(--pine);font-weight:700}
.mnav__cta{display:grid;gap:.6rem;margin-top:1rem}
@media(min-width:1024px){
  .hd__nav,.hd__act{display:flex}
  .hd__burger,.mnav{display:none!important}
}

/* ============================ HERO ============================ */
.hero{position:relative;background:var(--pine);color:#fff;overflow:hidden;
  padding:3.2rem 0 3rem}
.hero::before{content:"";position:absolute;inset:0;
  background:url('/assets/img/hills-01.webp') center/cover no-repeat;opacity:.22}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(165deg,rgba(11,46,34,.94) 0%,rgba(11,46,34,.80) 45%,rgba(18,59,44,.92) 100%)}
.hero>*{position:relative;z-index:2}
.hero h1{color:#fff;margin-bottom:.45em}
.hero .kick{color:var(--brass-lt)}
.hero__dek{font-size:clamp(1.04rem,.98rem + .4vw,1.2rem);line-height:1.6;
  color:rgba(255,255,255,.86);max-width:60ch;margin-bottom:1.6rem}
.hero__btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:2rem}
.hero__trust{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;padding-top:1.4rem;
  border-top:1px solid var(--line-dk)}
.hero__trust span{display:inline-flex;align-items:center;gap:.45rem;
  font:500 .84rem/1.4 var(--fb);color:rgba(255,255,255,.8)}
.hero__trust .ico{color:var(--brass-lt)}
@media(min-width:900px){.hero{padding:4.6rem 0 4.2rem}}

/* ============================ PAGE HEAD ============================ */
.ph{position:relative;background:var(--pine-2);color:#fff;padding:1.6rem 0 2.4rem;overflow:hidden}
.ph::before{content:"";position:absolute;inset:0;background-image:var(--ph-img);
  background-size:cover;background-position:center;opacity:.18}
.ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(11,46,34,.93),rgba(26,84,64,.88))}
.ph>*{position:relative;z-index:2}
.ph h1{color:#fff;margin:.3em 0 .35em;max-width:22ch}
.ph__kick{font:600 .74rem/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass-lt);margin:0}
.ph__dek{font-size:clamp(1rem,.96rem + .3vw,1.13rem);color:rgba(255,255,255,.85);
  max-width:65ch;margin:0}
.ph__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  font:500 .8rem/1.5 var(--fb);color:rgba(255,255,255,.62);margin-bottom:.4rem}
.crumbs a{color:rgba(255,255,255,.72);text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs i{font-style:normal;color:rgba(255,255,255,.35)}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.36rem .75rem;
  border-radius:100px;font:600 .78rem/1 var(--fb);letter-spacing:.01em}
.chip--ok{background:rgba(255,255,255,.14);color:#fff}
.chip--brass{background:var(--brass);color:#fff}
.chip--out{background:transparent;color:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}

/* ============================ SECTIONS ============================ */
main{display:block}
.sect{padding:3rem 0}
.sect--tint{background:var(--tint)}
.sect--pine{background:var(--pine);color:rgba(255,255,255,.86)}
.sect--pine h2,.sect--pine h3{color:#fff}
@media(min-width:900px){.sect{padding:4.2rem 0}}
.sect__h{max-width:60ch;margin-bottom:2rem}
.sect__h p{margin-bottom:0}
.prose{max-width:72ch}
.prose h2{margin-top:2.4rem}
.prose h3{margin-top:1.8rem}
.prose ul,.prose ol{padding-left:1.15rem;margin:0 0 1.15em}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--brass)}
.prose blockquote{margin:1.6rem 0;padding:.2rem 0 .2rem 1.2rem;
  border-left:3px solid var(--brass);color:var(--muted);font-style:italic}

/* ============================ GRID / CARDS ============================ */
.g{display:grid;gap:1rem}
.g--2{grid-template-columns:1fr}
.g--3{grid-template-columns:1fr}
.g--4{grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.g--2{grid-template-columns:repeat(2,1fr)}
  .g--3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.g--3{grid-template-columns:repeat(3,1fr)}
  .g--4{grid-template-columns:repeat(4,1fr)};.g{gap:1.3rem}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:1.4rem;box-shadow:var(--sh);display:flex;flex-direction:column}
.card h3{margin-bottom:.4em}
.card p{color:var(--muted);font-size:.94rem;margin-bottom:0}
.card__ico{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;
  background:var(--brass-bg);color:var(--brass-dk);margin-bottom:.9rem}
.card--link{text-decoration:none;transition:border-color .18s,transform .18s,box-shadow .18s}
.card--link:hover{border-color:var(--brass);transform:translateY(-2px);box-shadow:var(--sh-lg)}
.card--link .ico--go{color:var(--brass);margin-top:auto;padding-top:.9rem}

/* stat row */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin:1.6rem 0}
@media(min-width:768px){.stats{grid-template-columns:repeat(4,1fr);gap:1.1rem}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:1.1rem}
.stat b{display:block;font:600 clamp(1.35rem,1.1rem + 1.1vw,1.95rem)/1.05 var(--fd);
  color:var(--pine);letter-spacing:-.025em}
.stat i{display:block;font:500 .82rem/1.4 var(--fb);font-style:normal;color:var(--muted);margin-top:.28rem}
.stat__s{display:block;font-size:.72rem;color:var(--muted-2);margin-top:.3rem}
.sect--pine .stat{background:rgba(255,255,255,.06);border-color:var(--line-dk)}
.sect--pine .stat b{color:#fff}
.sect--pine .stat i{color:rgba(255,255,255,.7)}

/* ============================ TABLES ============================ */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 .5rem;
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--card)}
table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
thead th{background:var(--pine);color:#fff;font:600 .78rem/1.3 var(--fb);
  letter-spacing:.04em;text-transform:uppercase;text-align:left;padding:.85rem .9rem;
  position:sticky;top:0}
thead th.num{text-align:right}
tbody td{padding:.85rem .9rem;border-top:1px solid var(--line);vertical-align:top}
tbody tr:nth-child(even){background:#FCFBF8}
tbody tr:hover{background:var(--brass-bg)}
td b{color:var(--pine);font-weight:700}
caption{caption-side:bottom;padding:.8rem .9rem;font-size:.8rem;color:var(--muted);text-align:left}
.src{display:flex;gap:.5rem;align-items:flex-start;font-size:.8rem;line-height:1.55;
  color:var(--muted);margin:.6rem 0 1.6rem}
.src .ico{color:var(--brass);margin-top:.15em}

/* ============================ NOTES ============================ */
.note{border-radius:var(--r-m);padding:1.1rem 1.25rem;margin:1.6rem 0;
  border:1px solid var(--line);background:var(--card);font-size:.93rem}
.note p:last-child{margin-bottom:0}
.note--ok{background:var(--ok-bg);border-color:#BBF7D0;color:#14532D}
.note--warn{background:var(--warn-bg);border-color:#FDE3B0;color:#78350F}
.note--risk{background:var(--risk-bg);border-color:#FBCFE0;color:#881337}
.note--info{background:var(--tint);border-color:var(--line-2)}
.note b{font-weight:700}
.note .ico{vertical-align:-.2em;margin-right:.3rem}

/* ============================ ACCORDION ============================ */
.accs{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--card)}
.acc+.acc{border-top:1px solid var(--line)}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.25rem;cursor:pointer;list-style:none;
  font:600 1rem/1.45 var(--fb);color:var(--pine)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--tint)}
.acc__ico{transition:transform .2s;color:var(--brass);transform:rotate(90deg)}
.acc[open] .acc__ico{transform:rotate(-90deg)}
.acc__b{padding:0 1.25rem 1.25rem;color:var(--muted);font-size:.95rem}
.acc__b p:last-child{margin-bottom:0}

/* ============================ CTA BAND ============================ */
.ctab{background:var(--pine);color:#fff;padding:2.6rem 0}
.ctab__in{display:flex;flex-direction:column;gap:1.4rem}
.ctab h2{color:#fff;margin-bottom:.35em;max-width:24ch}
.ctab p{color:rgba(255,255,255,.8);margin-bottom:0;max-width:56ch}
.ctab__btns{display:flex;flex-wrap:wrap;gap:.7rem}
@media(min-width:900px){
  .ctab__in{flex-direction:row;align-items:center;justify-content:space-between;gap:2.5rem}
  .ctab__btns{flex:none}
}

/* ============================ CLUSTER ============================ */
.cl{background:var(--tint);padding:2.8rem 0;border-top:1px solid var(--line)}
.cl__h{font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);margin-bottom:1.3rem}
.cl__g{display:grid;gap:.8rem;grid-template-columns:1fr}
@media(min-width:640px){.cl__g{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.cl__g{grid-template-columns:repeat(3,1fr)}}
.cl__c{display:flex;flex-direction:column;gap:.25rem;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-m);padding:1rem 1.1rem;
  text-decoration:none;transition:border-color .18s,transform .18s}
.cl__c:hover{border-color:var(--brass);transform:translateY(-2px)}
.cl__c b{font:600 1rem/1.3 var(--fd);color:var(--pine)}
.cl__c i{font:400 .85rem/1.45 var(--fb);font-style:normal;color:var(--muted)}
.cl__c .ico{color:var(--brass);margin-top:.4rem}

/* ============================ FOOTER ============================ */
.ft{background:var(--pine);color:rgba(255,255,255,.72);padding:3rem 0 2rem;font-size:.9rem}
.ft__top{display:grid;gap:2.4rem;grid-template-columns:1fr}
@media(min-width:900px){.ft__top{grid-template-columns:minmax(280px,1fr) 2fr;gap:3.5rem}}
.brand--ft .brand__mk{background:rgba(255,255,255,.1);color:var(--brass-lt)}
.brand--ft .brand__tx b{color:#fff}
.brand--ft .brand__tx i{color:rgba(255,255,255,.6)}
.ft__blurb{margin:1rem 0 1.2rem;color:rgba(255,255,255,.68);font-size:.88rem;line-height:1.6}
.ft__contact p{display:flex;gap:.55rem;align-items:flex-start;margin-bottom:.55rem;
  color:rgba(255,255,255,.78);font-size:.87rem}
.ft__contact .ico{color:var(--brass-lt);margin-top:.2em;flex:none}
.ft__contact a{color:#fff;text-decoration:none;font-weight:600}
.ft__contact a:hover{color:var(--brass-lt)}
.ft__cta{margin-top:1.2rem}
.ft__cols{display:grid;gap:1.8rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.ft__cols{grid-template-columns:repeat(4,1fr)}}
.ft__col h3{font:600 .78rem/1 var(--fb);letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass-lt);margin-bottom:.9rem}
.ft__col ul{list-style:none;margin:0;padding:0}
.ft__col li{margin-bottom:.55rem}
.ft__col a{color:rgba(255,255,255,.74);text-decoration:none;font-size:.87rem;line-height:1.45}
.ft__col a:hover{color:#fff;text-decoration:underline}
.ft__legal{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line-dk);
  font-size:.79rem;line-height:1.6;color:rgba(255,255,255,.56)}
.ft__legal b{color:rgba(255,255,255,.82)}
.ft__legal a{color:rgba(255,255,255,.74)}
.ft__copy{margin-top:1.2rem;color:rgba(255,255,255,.46)}

/* ============================ FAB ============================ */
.fab{position:fixed;right:14px;bottom:14px;z-index:70;width:56px;height:56px;
  border-radius:50%;background:var(--wa);color:#062814;display:grid;place-items:center;
  box-shadow:0 6px 24px rgba(0,0,0,.28);text-decoration:none;
  transition:transform .2s,box-shadow .2s}
.fab .ico{width:29px;height:29px;fill:currentColor;stroke:none}
.fab:hover{transform:scale(1.06);box-shadow:0 10px 30px rgba(0,0,0,.34);color:#062814}
@media(min-width:1024px){.fab{right:24px;bottom:24px}}

/* ============================ MISC ============================ */
.upd{display:flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--muted-2);
  margin:2rem 0 0;padding-top:1rem;border-top:1px solid var(--line)}
.upd .ico{color:var(--brass)}
.pill{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .65rem;border-radius:100px;
  font:600 .74rem/1 var(--fb);letter-spacing:.02em}
.pill--ok{background:var(--ok-bg);color:var(--ok)}
.pill--warn{background:var(--warn-bg);color:var(--warn)}
.pill--risk{background:var(--risk-bg);color:var(--risk)}
.hr{height:1px;background:var(--line);border:0;margin:2.6rem 0}
.toc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:1.2rem 1.35rem;margin:0 0 2rem}
.toc h2{font:600 .78rem/1 var(--fb);letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass-dk);margin-bottom:.85rem}
.toc ol{margin:0;padding-left:1.15rem}
.toc li{margin-bottom:.42rem;font-size:.92rem}
.toc a{color:var(--text);text-decoration:none}
.toc a:hover{color:var(--brass-dk);text-decoration:underline}

/* form / calculator */
.fld{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.fld label{font:600 .85rem/1.3 var(--fb);color:var(--pine)}
.fld select,.fld input{font:400 1rem/1.3 var(--fb);padding:.8rem .9rem;border-radius:var(--r-s);
  border:1.5px solid var(--line-2);background:var(--card);color:var(--text);min-height:48px}
.fld select:focus,.fld input:focus{border-color:var(--brass);outline:none;
  box-shadow:0 0 0 3px var(--brass-bg)}
.out{background:var(--pine);color:#fff;border-radius:var(--r-m);padding:1.4rem}
.out__row{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;
  border-bottom:1px solid var(--line-dk);font-size:.92rem}
.out__row:last-child{border-bottom:0}
.out__row b{font-variant-numeric:tabular-nums}
.out__big{font:600 1.6rem/1.1 var(--fd);color:var(--brass-lt)}

/* map */
#map{height:380px;border-radius:var(--r-m);border:1px solid var(--line);z-index:1}
@media(min-width:768px){#map{height:460px}}

/* ---- mobile tap targets ----------------------------------------------------
   Verified in a 390px viewport: footer and sitemap links rendered ~17px tall,
   well under the 44px guideline, which on a phone means mis-taps. Padding is
   added only on small screens so the desktop footer keeps its density. */
@media (max-width:767px){
  .ft__col li{margin-bottom:0}
  .ft__col a{display:block;padding:.62rem 0;min-height:44px;line-height:1.35}
  .ft__legal a{padding:.15rem 0;display:inline-block}
  .ft__contact a{display:inline-block;padding:.35rem 0;min-height:32px}
  .crumbs a{padding:.2rem 0;display:inline-block}
  .toc a{display:inline-block;padding:.3rem 0}
  .prose li a{padding:.1rem 0}
}
/* The horizontal scroller must announce itself to keyboard users too. */
.tw{scrollbar-width:thin}
.tw:focus-visible{outline:3px solid var(--brass);outline-offset:2px}