/* ==========================================================================
   Anchor Locations skin — state / county / town pages.
   The per-page bodies (al_html meta) use the .hh-* content classes below;
   the global wrapper (Locations settings) uses hp-* components from hh.css.
   Tokens come from hh.css.
   ========================================================================== */

/* ---------- Wrapper: hero, trust band, directory ---------- */
.hh-loc__hero .al-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--yellow-400)}
.hh-loc__hero .al-breadcrumbs a{color:var(--silver-400);text-decoration:none}
.hh-loc__hero .al-breadcrumbs a:hover{color:#fff}
.hh-loc__hero .al-breadcrumbs .sep{color:var(--asphalt-600)}
.hh-loc__hero .al-h1{font:var(--text-display-1);color:#fff;margin:0;max-width:16ch}
.hh-loc__trust{background:var(--asphalt-950);border-top:1px solid var(--border-inverse)}
.hh-loc__trust .hp-trust{justify-content:center;padding:0 var(--gutter);height:96px}
@media (max-width:1100px){.hh-loc__trust .hp-trust{height:auto}}
.hh-directory .al-directory>ul{list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px}
.hh-directory .al-directory>ul>li{padding-top:16px;border-top:4px solid var(--blue-600)}
.hh-directory .al-directory>ul>li>a{font:var(--text-heading-1);color:#fff;text-decoration:none}
.hh-directory .al-directory ul ul{list-style:none;padding:0;margin:10px 0 0}
.hh-directory .al-directory ul ul ul{padding-left:14px;border-left:1px solid var(--border-inverse);margin:6px 0 10px}
.hh-directory .al-directory li li{margin:6px 0}
.hh-directory .al-directory li li a{font:var(--text-body-sm);color:var(--silver-400);text-decoration:none}
.hh-directory .al-directory li li a:hover{color:var(--yellow-400)}

/* ---------- Body sections ---------- */
.hh-body .hh-sec{padding:clamp(56px,6vw,96px) 0;border-bottom:1px solid var(--border-hairline)}
.hh-body .hh-sec:last-child{border-bottom:0}
.hh-sec h2{font:var(--text-display-2);margin:0 0 20px;max-width:22ch}
.hh-sec h3{font:var(--text-heading-2)}
.hh-sec p{max-width:72ch}
.hh-sec p+p{margin-top:1em}
.hh-sec strong{color:var(--text-heading)}
.hh-eyebrow-dark,.hh-eyebrow{display:flex;align-items:center;gap:12px;font:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-brand);margin:0 0 14px}
.hh-eyebrow-dark::before,.hh-eyebrow::before{content:"";width:28px;height:6px;flex:none;background:var(--yellow-400);transform:skewX(var(--skew))}
.hh-lead{font:var(--text-lead);color:var(--text-body);max-width:72ch;margin:0 0 28px}
.hh-img{width:100%;height:auto;border-radius:var(--radius-media);display:block}

/* Buttons */
.hh-btn{display:inline-flex;align-items:center;justify-content:center;font:var(--text-label);letter-spacing:var(--tracking-button);text-transform:uppercase;padding:14px 22px;min-height:48px;border-radius:var(--radius-control);background:var(--yellow-400);color:var(--asphalt-950);text-decoration:none;border:1px solid var(--yellow-400)}
.hh-btn:hover{background:#ffd04d;color:var(--asphalt-950)}
.hh-btn--outline{background:transparent;border-color:var(--border-strong);color:var(--text-brand)}
.hh-btn--outline:hover{background:transparent;border-color:var(--blue-600);color:var(--blue-800)}

/* Intro */
.hh-intro-grid,.hh-lede-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,5vw,88px);align-items:start}
.hh-lede-grid{align-items:center;margin-bottom:40px}
.hh-intro-body p:first-of-type{font:var(--text-lead);color:var(--text-heading)}
.hh-intro-media{position:sticky;top:calc(var(--header-h) + 24px)}
.hh-intro-cta{display:grid;gap:10px;margin-top:16px}
.hh-intro-cta .hh-btn{width:100%}
.hh-lede-body .hh-lead{margin:0}

/* Process panel + 8 steps */
.hh-panel{background:var(--surface-raised);border-radius:var(--radius-card);padding:clamp(28px,4vw,56px)}
.hh-panel>*:first-child{margin-top:0}
ol.hh-steps{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 28px}
.hh-step{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:4px solid var(--blue-600)}
.hh-step-n{font:var(--text-mono-sm);color:var(--text-brand)}
.hh-step-n::before{content:"0"}
.hh-step h3{margin:0}
.hh-step p{font:var(--text-body-sm);margin:0}

/* Dark "why" panel + stats */
.hh-panel--dark{background:var(--asphalt-950);color:var(--silver-400);position:relative;overflow:hidden}
.hh-panel--dark::after{content:"";position:absolute;right:-40px;bottom:-40px;width:220px;height:220px;background:var(--blue-600);transform:skewX(var(--skew));opacity:.18;pointer-events:none}
.hh-panel--dark h2{color:#fff}
.hh-panel--dark .hh-eyebrow{color:var(--yellow-400)}
.hh-panel--dark .hh-lead{color:var(--silver-300)}
.hh-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--grad-brand);border-radius:var(--radius-card);overflow:hidden;position:relative;z-index:1}
.hh-stat{padding:28px 24px;display:flex;flex-direction:column;gap:8px;box-shadow:inset -1px 0 0 rgba(255,255,255,.18)}
.hh-stat-n{font:400 clamp(44px,5vw,64px)/1 var(--font-display);color:#fff}
.hh-stat-l{font:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--yellow-400)}

/* Service links */
ul.hh-services{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
ul.hh-services a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 22px;background:var(--surface-raised);border-radius:var(--radius-card);border-left:4px solid var(--blue-600);font:var(--text-heading-2);color:var(--text-heading);text-decoration:none}
ul.hh-services a::after{content:"";width:22px;height:5px;background:var(--yellow-400);transform:skewX(var(--skew));transition:transform .2s var(--ease)}
ul.hh-services a:hover{background:var(--blue-600);color:#fff}
ul.hh-services a:hover::after{transform:skewX(var(--skew)) translateX(4px)}

/* Residential / commercial feature columns */
.hh-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.hh-feature{display:flex;flex-direction:column;gap:12px}
.hh-feature-media{margin:0 0 8px;border-radius:var(--radius-media);overflow:hidden}
.hh-feature-media img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:0}
.hh-feature h2{font:var(--text-display-3);margin:0}

/* Cards (repair/resurface/replace, seasons) */
.hh-cards3,.hh-cards4{display:grid;gap:28px}
.hh-cards3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hh-cards4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hh-card{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:4px solid var(--blue-600)}
.hh-card h3{margin:0}
.hh-card p{font:var(--text-body-sm);margin:0}

/* FAQ accordion */
.hh-accordion{border-top:1px solid var(--border-hairline);max-width:980px}
.hh-accordion details{border-bottom:1px solid var(--border-hairline)}
.hh-accordion summary{list-style:none;cursor:pointer;padding:22px 48px 22px 0;font:var(--text-heading-1);color:var(--text-heading);position:relative}
.hh-accordion summary::-webkit-details-marker{display:none}
.hh-accordion summary::after{content:"+";position:absolute;right:4px;top:16px;font:400 32px/1 var(--font-text);color:var(--blue-600)}
.hh-accordion details[open] summary::after{content:"\2212"}
.hh-accordion details p{margin:0 0 24px}

/* Map */
.hh-map-frame{border-radius:var(--radius-media);overflow:hidden;border:1px solid var(--border-hairline);background:var(--silver-100)}
.hh-map-frame .al-map{width:100%}

/* Nearby / child-location chips */
.hh-nearby ul,.hh-cities ul.hh-services,.al-child-locations,.al-nearby{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.al-nearby a,.al-child-locations a{display:inline-block;padding:10px 16px;border:1px solid var(--border-strong);border-radius:var(--radius-control);font:var(--text-label);color:var(--text-heading);text-decoration:none}
.al-nearby a:hover,.al-child-locations a:hover{border-color:var(--blue-600);color:var(--blue-700)}
.hh-parent{margin-top:20px;font:var(--text-body-sm)}
.hh-parent a{font-weight:600}
.hh-parent a::before{content:"\2190  All of "}

@media (max-width:1100px){ol.hh-steps,.hh-cards4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .hh-intro-grid,.hh-lede-grid,.hh-cols{grid-template-columns:minmax(0,1fr)}
  .hh-intro-media{position:static}
  .hh-cards3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){ol.hh-steps,.hh-cards4,.hh-stats{grid-template-columns:minmax(0,1fr)}.hh-stat{box-shadow:inset 0 -1px 0 rgba(255,255,255,.18)}}
/* Grouped directory: state > county > towns */
.hh-directory .al-directory>ul{grid-template-columns:repeat(3,minmax(0,1fr))}
.hh-directory .al-directory>ul>li>ul>li{margin:14px 0 0}
.hh-directory .al-directory>ul>li>ul>li>a{font:var(--text-label);color:#fff;text-transform:uppercase;letter-spacing:var(--tracking-button)}
.hh-directory .al-directory ul ul ul{display:flex;flex-wrap:wrap;gap:4px 14px;border-left:0;padding-left:0}
.hh-directory .al-directory ul ul ul li{margin:0}
@media (max-width:900px){.hh-directory .al-directory>ul{grid-template-columns:minmax(0,1fr)}}