/* ==========================================================================
   CITY WALK — extended components
   The former charcoal "frameless" layer has been retired. This file now
   carries only the page types that live outside assets/css/style.css
   (guides, communities, health, area hubs), expressed in the same
   limestone-and-brass system. Loaded after style.css.
   ========================================================================== */

/* --- page hero used by hub and article pages ---------------------------- */
.pg-hero{position:relative;background:var(--paper);border-bottom:1px solid var(--line);
padding:78px 0 66px;overflow:hidden}
.pg-hero::after{content:"";position:absolute;right:-90px;top:-90px;width:320px;height:320px;
border:1px solid var(--line-soft);border-radius:50%;pointer-events:none}
.pg-hero .wrap{position:relative;z-index:1}
.pg-hero .crumb{padding-left:0;padding-right:0;padding-top:0;margin-bottom:20px}
.pg-hero h1{max-width:20ch;margin:14px 0 0}
.pg-hero .lead{margin-top:22px;max-width:62ch}
@media(max-width:660px){.pg-hero{padding:44px 0 40px}.pg-hero::after{display:none}}

.kicker{display:inline-flex;align-items:center;gap:12px;font-family:var(--text);font-style:italic;
font-size:.92rem;letter-spacing:0;text-transform:none;color:var(--brass-deep)}
.kicker::before{content:"";width:34px;height:1px;background:var(--brass);flex:none}

/* --- link grids (community tiers, related services) --------------------- */
.lnk-grid{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0;border-top:1px solid var(--line)}
.lnk-grid li{margin:0}
.lnk-grid a{display:flex;align-items:baseline;gap:10px;padding:15px 4px;
border-bottom:1px solid var(--line);color:var(--ink);font-family:var(--text);font-size:.94rem;
text-decoration:none;transition:color .16s ease,padding-left .22s ease}
.lnk-grid a svg{margin-left:auto;flex:none;opacity:0;transform:translateX(-4px);
transition:opacity .2s ease,transform .2s ease;color:var(--brass);stroke-width:1.4}
.lnk-grid a:hover{color:var(--brass-deep);padding-left:12px}
.lnk-grid a:hover svg{opacity:1;transform:translateX(0)}
.cw-tier a em{font-style:italic;font-size:.82rem;color:var(--muted)}
.cw-covered{color:var(--brass-deep)}

/* --- alternating deep section for hub pages ----------------------------- */
.sec-dune{background:var(--linen);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.sec-dune + .sec-dune{border-top:0}

/* --- article / sub cards ------------------------------------------------ */
article.sub{background:var(--paper);border:0;border-top:1px solid var(--line);border-radius:0;
padding:30px 0;position:relative;transition:background .25s ease}
article.sub::before{content:"";position:absolute;left:0;top:0;height:1px;width:0;background:var(--brass);transition:width .35s ease}
article.sub:hover::before{width:100%}
article.sub h3{font-size:1.34rem;font-weight:600;margin-bottom:8px}
article.sub p{font-size:.95rem;line-height:1.75;color:var(--body);margin:0}
p.sub{font-size:.94rem;font-style:italic;color:var(--muted)}

/* --- alternate button variants used across hub pages -------------------- */
.btn-gold{color:var(--brass-deep);border-color:var(--brass);background:transparent}
.btn-gold:hover{background:var(--brass-wash)}
.btn-line{color:var(--ink);border-color:var(--line);background:transparent}
.btn-line:hover{border-color:var(--ink)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:stretch}

/* --- the enquiry form used on every page -------------------------------- */
.cw-form label{display:block;font-family:var(--text);font-size:.88rem;letter-spacing:0;
text-transform:none;color:var(--ink);margin:0 0 8px}
.cw-form input,.cw-form select,.cw-form textarea{width:100%;padding:12px 2px;
border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);
font-family:var(--text);font-size:.98rem;border-radius:0;min-height:48px}
.cw-form textarea{min-height:110px;resize:vertical}
.cw-form ::placeholder{color:var(--muted);opacity:.75;font-style:italic}
.cw-form input:focus-visible,.cw-form select:focus-visible,.cw-form textarea:focus-visible{
outline:none;border-bottom-color:var(--brass)}
.cw-form .err{color:#9A3324;font-size:.84rem;margin-top:6px;display:none;font-style:italic}
.cw-form .field.bad input,.cw-form .field.bad select{border-bottom-color:#9A3324}
.cw-form .note{margin-top:16px;font-size:.86rem;color:var(--muted);font-style:italic}

/* --- menu home link ----------------------------------------------------- */
.mm-home{font-size:.93rem;letter-spacing:0;color:var(--ink);text-decoration:none;white-space:nowrap}
.mm-home:hover,.mm-home:focus-visible{color:var(--brass-deep)}

/* --- misc --------------------------------------------------------------- */
.grad{background:none}
.gc-note,.ge-dd{font-size:.9rem;color:var(--muted);font-style:italic}