/* ============================================================
   ATLANTA TREE — service & location sub-page components
   Loaded only on /<service>/ and /tree-service/<area>/ pages,
   on top of styles.css. Reuses the main design tokens.
   ============================================================ */

/* ---- shorter hero for interior pages ---- */
.hero--page{min-height:clamp(440px,62vh,600px)}

/* ---- breadcrumb ---- */
.crumbs{background:var(--birch-100);border-bottom:1px solid var(--birch-200);font-size:.85rem}
.crumbs .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding-block:.85rem}
.crumbs a{color:var(--bark-600);font-weight:600;transition:color .2s}
.crumbs a:hover{color:var(--amber-600)}
.crumbs span[aria-current]{color:var(--forest-900);font-weight:700}
.crumbs__sep{color:var(--bark-400);font-weight:400}

/* ---- intro + prose ---- */
.svc-intro{background:var(--birch)}
.svc-intro__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media(min-width:920px){.svc-intro__grid{grid-template-columns:1.1fr .9fr}}
.prose{max-width:64ch}
.prose .section__title{margin-bottom:1.1rem}
.prose p{color:var(--bark-600);font-size:1.04rem;margin-bottom:1.05rem}
.prose .btn{margin-top:.5rem}
.prose--center{margin-inline:auto;text-align:center}
.prose--center p{margin-inline:auto}

/* ---- "what's included" feature list ---- */
.ifeatures{background:var(--birch-100);border:1px solid var(--birch-200);border-radius:var(--radius);padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--shadow-sm)}
.ifeatures__head{font-size:1.35rem;margin-bottom:1.2rem;color:var(--forest-900)}
.ifeature{display:flex;gap:.85rem;align-items:flex-start;padding:.75rem 0;border-top:1px solid var(--birch-200)}
.ifeature:first-of-type{border-top:0;padding-top:0}
.ifeature__ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--sage-200);color:var(--pine-600)}
.ifeature__ico svg{width:20px;height:20px}
.ifeature strong{display:block;font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--forest-900);margin-bottom:.1rem}
.ifeature p{font-size:.92rem;color:var(--bark-600);line-height:1.5}

/* ---- 3-up related services grid ---- */
@media(min-width:1080px){.grid-cards--3{grid-template-columns:repeat(3,1fr)}}

/* ---- clickable cards (overlay link) ---- */
.card{position:relative}
.card__link{position:absolute;inset:0;z-index:3;text-indent:-9999px;overflow:hidden}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--birch-300)}

/* ---- compact service-area list with links ---- */
.areas--compact{background:var(--birch-100)}
.areas__list--links li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber-500);flex:none}
.areas__list--links li a{color:var(--forest-800);font-weight:600;transition:color .2s}
.areas__list--links li a:hover{color:var(--amber-600)}

/* ---- FAQ accordion ---- */
.faq{background:var(--birch)}
.faq__list{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:.8rem}
.faq__item{background:var(--birch-100);border:1px solid var(--birch-200);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);overflow:hidden}
.faq__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.3rem;font-family:var(--font-display);font-weight:600;font-size:1.1rem;color:var(--forest-900)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font-size:1.6rem;font-weight:400;color:var(--amber-600);flex:none;transition:transform .25s var(--ease)}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__a{padding:0 1.3rem 1.2rem}
.faq__a p{color:var(--bark-600);font-size:1rem;line-height:1.6}