/* Area-only structure. Typography, buttons, services, team, FAQ and house notes
   are the actual homepage components, served by home-components.css. */
html{background:var(--star)}
html.at-page-bottom{background:var(--plum)}
body.area-page{background:var(--wall);padding-bottom:0}
.area-page main{min-width:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:fixed;left:20px;top:-90px;z-index:150;background:var(--plum);color:#fff;padding:12px 20px;border-radius:var(--r-s)}
.skip:focus{top:12px}

/* A local page adds a breadcrumb and photography to the homepage hero. */
.area-opening{background:var(--star);color:#FBF9F6}
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-top:20px;font-size:var(--t-xs);line-height:1.5;color:inherit}
.breadcrumb a{display:inline-flex;align-items:center;min-height:24px}
.breadcrumb a:hover{text-decoration:underline;text-underline-offset:3px}
.breadcrumb .ic{width:12px;height:12px;transform:rotate(-90deg);color:currentColor;--fl:transparent}
.breadcrumb [aria-current]{font-weight:600}
.area-opening .breadcrumb :focus-visible{outline-color:#FBF9F6}
.area-hero .hero-txt :focus-visible{outline-color:#FBF9F6}
.area-hero .hero-txt,.area-hero .hero-copy,.area-hero .hero-media{min-width:0}
.area-hero h1>span{white-space:normal;text-wrap:balance}
.area-photo{margin:0}
.area-photo-caption{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:12px;font-size:var(--t-xs);line-height:1.5}
.area-photo-caption>span{min-width:0;max-width:42ch}
.photo-credit{position:relative;flex:none;font-size:inherit;line-height:inherit;z-index:2}
.photo-credit>summary{display:flex;align-items:center;min-height:44px;margin:-10px -4px;padding:10px 4px;list-style:none;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.photo-credit>summary::-webkit-details-marker{display:none}
.photo-credit>div{position:absolute;right:0;bottom:calc(100% + 12px);width:min(280px,calc(100vw - 40px));padding:20px;border:1px solid var(--rule);border-radius:var(--r-s);background:#fff;color:var(--ink-2);box-shadow:var(--shadow)}
.photo-credit>div p+p{margin-top:12px}
.photo-credit>div a{display:block;margin-top:12px;color:var(--star);text-decoration:underline;text-underline-offset:3px}
.photo-credit>div a .ic{display:inline;width:14px;height:14px;vertical-align:-2px;color:currentColor}
.photo-credit>div :focus-visible{outline-color:var(--star)}

/* The section shortcuts share the homepage's reading and action sizes. */
.page-guide{padding:0;border-bottom:1px solid var(--rule);background:var(--wall)}
.page-guide>.wrap{display:flex;align-items:center;flex-wrap:wrap;gap:12px 32px}
.page-guide a{display:flex;align-items:center;min-height:56px;font-size:var(--t-ui);line-height:1.4;color:var(--ink-2)}
.page-guide a:hover{color:var(--star);text-decoration:underline;text-underline-offset:4px}

/* Finder behavior is unique; its headings, region badges and pills are .areas. */
.area-finder-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);align-items:end;gap:40px}
.area-finder-head>*{min-width:0}
.area-finder-head h2{margin-top:16px}
.finder-tools{min-width:0;width:100%;max-width:440px;justify-self:end}
.finder-tools>label{display:block;margin-bottom:12px;font-size:var(--t-ui);font-weight:700;line-height:1.4;color:var(--ink)}
.search-field{display:flex;align-items:center;gap:12px;padding:0 14px;border:1.5px solid var(--bx-control);border-radius:var(--r-s);background:#fff;color:var(--ink)}
.search-field>.ic{width:22px;height:22px;flex:none;--fl:transparent}
.search-field input{display:block;width:100%;min-width:0;min-height:52px;margin:0;padding:12px 0;border:0;border-radius:0;appearance:none;background:transparent;color:inherit;font:inherit;font-size:var(--t-ui);line-height:1.5;outline:0}
.search-field:focus-within{border-color:var(--star-deep);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--star)}
.finder-tools>p{margin-top:12px;font-size:var(--t-xs);line-height:1.5;color:var(--ink-3)}
.area-directory-hero .directory-search{justify-self:start;margin-top:28px;max-width:520px}
.area-directory-hero .directory-search>label,.area-directory-hero .directory-search>p{color:inherit}
.area-directory-hero .search-field{border-color:#fff}
.area-directory-hero .search-field:focus-within{box-shadow:0 0 0 2px var(--star),0 0 0 4px #fff}
#area-search-matches{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding:16px;background:#fff;color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-s)}
#area-search-matches .area-tile{display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;border:1.5px solid var(--rule);border-radius:999px;font-size:var(--t-ui);font-weight:600;line-height:1.25}
#area-search-matches .area-tile:hover{border-color:var(--star);background:var(--star-soft);color:var(--star-deep)}
.area-directory-hero #area-search-matches :focus-visible{outline-color:var(--star)}
.region-finder .lists{grid-template-columns:minmax(0,1fr)}
.area-finder .disclosure-content>.link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:12px;font-size:var(--t-ui);line-height:1.4}
.area-finder .disclosure-content>.link .ic{width:18px;height:18px;color:currentColor;--fl:transparent}
.coverage-note{display:flex;align-items:flex-start;gap:12px;border-top:1px solid var(--rule);margin-top:32px;padding-top:24px;color:var(--ink-3);font-size:var(--t-xs);line-height:1.55}
.coverage-note>.ic{width:22px;height:22px;flex:none;--fl:transparent}
.coverage-note p{max-width:70ch}
.coverage-note a{color:var(--star);text-decoration:underline;text-underline-offset:3px}
.area-nearby{border-top:1px solid var(--rule)}
.area-nearby-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.area-nearby-head h2{margin-top:16px}
.area-nearby-head>.link{display:inline-flex;align-items:center;gap:8px;min-height:44px;flex:none;font-size:var(--t-ui);line-height:1.4}
.area-nearby-head>.link .ic{width:18px;height:18px;color:currentColor;--fl:transparent}
.area-nearby .lists{grid-template-columns:minmax(0,1fr)}
.area-nearby-list{grid-column:1/-1}

/* Local content occupies the existing how-it-works and house-notes layout. */
.area-home .how-grid{align-items:start}
.area-home-copy{min-width:0}
.area-home-copy>.body{max-width:56ch}
.area-home-copy>.steps{margin-top:32px}
/* Local entry notes vary in length; reserve the shared sticker's corner. */
.area-home .card ul{padding-bottom:var(--s6)}
.area-note{margin-top:28px;border-bottom:1px solid var(--rule)}
.area-note>summary{display:flex;align-items:center;gap:12px;min-height:64px;padding:16px 0;cursor:pointer;list-style:none;font-size:var(--t-ui);font-weight:700;line-height:1.4}
.area-note>summary::-webkit-details-marker{display:none}
.area-note>summary>.ic{width:22px;height:22px;flex:none}
.area-note>summary>.ic:last-child{margin-left:auto;--fl:transparent;transition:transform .25s}
.area-note[open]>summary>.ic:last-child{transform:rotate(180deg)}
.area-note>p{padding-bottom:20px;color:var(--ink-2);font-size:var(--t-ui);line-height:1.5}

/* Coverage is secondary information, using the shared section and action roles. */
.area-coverage{background:var(--plaster);border-top:1px solid var(--rule)}
.area-coverage>.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:48px}
.area-coverage h2{margin-top:16px}
.area-coverage .sec-head{margin-bottom:0}
.area-coverage .btn{margin-top:24px}
.area-page footer{padding-bottom:0}

@media(max-width:879px){
  .area-photo-caption{max-width:none}
  .area-finder-head{grid-template-columns:1fr;gap:28px}
  .finder-tools{justify-self:start;max-width:560px}
  .area-nearby-head{align-items:flex-start;flex-direction:column;gap:16px}
  .area-coverage>.wrap{grid-template-columns:1fr;gap:28px}
}
@media(max-width:759px){
  .breadcrumb{padding-top:16px;gap:6px}
  .area-photo-caption{gap:12px}
  .page-guide>.wrap{gap:0 20px}
  .page-guide a{min-height:48px;font-size:var(--t-xs)}
  .area-finder .disclosure-content>.link{margin-top:8px}
  .area-home-copy>.steps{margin-top:28px}
  .coverage-note{margin-top:28px}
  .area-coverage>.wrap{gap:24px}
}
@media(max-width:359px){
  .region-hero .cta-row{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .area-note>summary>.ic:last-child{transition:none}
}