/* WEB-02 public experience repair (14 October 2026). Builds on WEB-01: Architectural Truth, Quiet Stewardship.
   One memorable element per page: on the homepage it is the band of conditions around a building, photographed in
   general and paired with what each may touch. Everything else stays quiet: rules, type and white space. */

.w2-flush { margin: 0; }

/* homepage: the conditions around a building */
.w2-conditions { background: var(--paper); }
.w2-cond-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.w2-cond-intro h2 { margin: 0 0 0.6rem; }
.w2-cond-intro .lede { margin: 0 0 1.5rem; max-width: 46ch; }
.w2-lookup-h { font-size: 1.0625rem; margin: 0 0 0.25rem; color: var(--ink); }
.w2-conditions .home-lookup { margin-top: 0.5rem; }
.w2-conditions .alm-preview { margin: 0; }
.w2-conditions .alm-preview .fine { margin-top: 0.75rem; }
.w2-cond-grid { list-style: none; max-width: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.4vw, 2rem) clamp(1rem, 2vw, 1.75rem);
  border-top: 2px solid var(--rule-strong); padding-top: clamp(1.25rem, 2.4vw, 2rem); }
.w2-cond { display: flex; flex-direction: column; min-width: 0; }
.w2-cond img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-control); }
.w2-cond-body { display: flex; flex-direction: column; flex: 1; }
.w2-cond h3 { font-size: 1.1875rem; margin: 0.85rem 0 0.5rem; color: var(--ink); }
.w2-cond dl { margin: 0 0 0.75rem; display: grid; gap: 0.55rem; }
.w2-cond dl div { padding-left: 0.75rem; border-left: 2px solid var(--rule); }
.w2-cond dt { font-size: 0.8125rem; font-weight: 700; color: var(--muted); margin: 0; }
.w2-cond dd { margin: 0.1rem 0 0; color: var(--body); line-height: 1.5; font-size: 0.9375rem; }
.w2-cond-link { margin-top: auto; font-weight: 600; color: var(--action); }
.w2-conditions .w-illustration { margin: 1.25rem 0 0; color: var(--muted); font-size: 0.875rem; }
.w2-alerts { margin-top: clamp(1.5rem, 3vw, 2.25rem); padding: 1.1rem 1.25rem; display: flex; gap: 1rem 1.5rem; align-items: center;
  justify-content: space-between; flex-wrap: wrap; border: 1px solid var(--rule); border-left: 4px solid var(--logo-teal); border-radius: var(--radius-control); background: var(--surface, #FFFFFF); }
.w2-alerts .ba-note { margin: 0; max-width: 62ch; color: var(--body); }

/* homepage: free tools as two short lists, not a wall of image cards */
.w2-tools h2 { margin: 0 0 0.5rem; }
.w2-tools .lede { margin: 0 0 1.75rem; }
.w2-toolgroups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
.w2-toolgroup h3 { font-size: 1rem; margin: 0; padding-bottom: 0.6rem; border-bottom: 2px solid var(--rule-strong); color: var(--ink); }
.w2-toollist { list-style: none; max-width: none; margin: 0; padding: 0; }
.w2-toollist li { padding: 0.95rem 0; border-bottom: 1px solid var(--rule); }
.w2-toollist a { font-family: var(--font-display); font-weight: 650; font-size: 1.0625rem; color: var(--ink); text-decoration: none; }
.w2-toollist a:hover, .w2-toollist a:focus-visible { color: var(--action); text-decoration: underline; }
.w2-toollist p { margin: 0.25rem 0 0; color: var(--body); line-height: 1.5; font-size: 0.9375rem; max-width: 58ch; }

@media (max-width: 61.99rem) {
  .w2-cond-head { grid-template-columns: minmax(0, 1fr); }
  .w2-cond-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .w2-cond-grid, .w2-toolgroups { grid-template-columns: minmax(0, 1fr); }
  .w2-alerts { display: block; }
  .w2-alerts .btn { margin-top: 0.9rem; }
}
@media (max-width: 40rem) {
  .w2-cond { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0 0.9rem; align-items: start; }
  .w2-cond img { aspect-ratio: 1 / 1; }
  .w2-cond h3 { margin-top: 0; }
}

/* menu: six groups, so a visitor can tell building tools, local conditions, equipment, retrofit, resilience
   resources and organizations apart */
.nav-menu-grouped { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem clamp(1.25rem, 3vw, 2.5rem); }
.nav-menu-group { display: flex; flex-direction: column; min-width: 0; }
.nav-menu-group .nav-menu-h { margin: 1rem 0 0.25rem; }
.nav-menu-grouped .nav-menu-cta { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 47.99rem) { .nav-menu-grouped { grid-template-columns: minmax(0, 1fr); } }

/* Building Almanac (WEB-02): the question, the area search, the map, the evidence, then what to do with it */
.w2-alm-h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); margin: 0 0 0.85rem; color: var(--ink); }
main[class] .w2-alm-find { width: min(100%, 1504px); margin: 1.25rem auto 2rem; padding: clamp(1.1rem, 3.4vw, 3rem);
  background: var(--logo-navy); color: #FFFFFF; border-radius: var(--radius); }
.w2-alm-find h2 { color: #FFFFFF; font-size: clamp(1.375rem, 2.4vw, 1.875rem); margin: 0 0 0.85rem; }
main[class] .w2-alm-find .alm-fsaform { width: auto; margin: 0; padding: 0; background: transparent; border: 0; max-width: 46rem; }
.w2-alm-find .alm-fsaform label { color: #DCE7EE; font-weight: 600; font-size: 0.9375rem; margin: 0 0 0.35rem; }
.w2-alm-find .alm-fsarow { align-items: stretch; }
.w2-alm-find .alm-fsarow input { width: 11rem; min-height: 3rem; font-size: 1.125rem; border-radius: var(--radius-control); border: 1px solid #FFFFFF; }
.w2-alm-find .alm-fsarow .btn { min-height: 3rem; background: #FFFFFF; color: var(--logo-navy); border-color: #FFFFFF; }
.w2-alm-find .alm-fsarow .btn:hover { background: #DCE7EE; }
.w2-alm-find .alm-fsarow button#alm-fsaclear, .w2-alm-find .w2-linkbtn { background: transparent; border: 0; color: #FFFFFF; text-decoration: underline; min-height: 3rem; padding: 0 0.5rem; cursor: pointer; font: inherit; }
.w2-alm-find .alm-fsamsg { color: #FFFFFF; margin: 0.6rem 0 0; }
.w2-alm-find .alm-fsamsg:empty { display: none; }
.w2-alm-find .fine { color: #B9CBD6; margin: 0.75rem 0 0; max-width: 72ch; }
.w2-alm-find .fine a { color: #FFFFFF; }
.w2-alm-or { margin: 0.9rem 0 0; color: #DCE7EE; }
.alm-fail p { margin: 0 0 0.6rem; }
.alm-fail .btn { margin-top: 0.25rem; }

.w2-alm-care { width: min(100%, 1504px); margin: clamp(2rem, 4vw, 3rem) auto 0; display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start;
  border-top: 2px solid var(--rule-strong); padding-top: clamp(1.25rem, 2.5vw, 2rem); }
.w2-alm-care-photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-control); }
.w2-alm-care-photo .fine { margin: 0.5rem 0 0; color: var(--muted); }
.w2-alm-care-copy h2 { margin: 0 0 0.5rem; }
.w2-alm-care-copy > p { margin: 0 0 1rem; color: var(--body); max-width: 56ch; }
.w2-alm-care-list { list-style: none; margin: 0; padding: 0; max-width: none; }
.w2-alm-care-list li { padding: 0.8rem 0; border-bottom: 1px solid var(--rule); display: grid; gap: 0.15rem; }
.w2-alm-care-list a { font-family: var(--font-display); font-weight: 650; color: var(--ink); text-decoration: none; font-size: 1.0625rem; }
.w2-alm-care-list a:hover, .w2-alm-care-list a:focus-visible { color: var(--action); text-decoration: underline; }
.w2-alm-care-list span { color: var(--body); font-size: 0.9375rem; line-height: 1.5; }

main[class] .alm-meth-group { width: min(100%, 1504px); margin-inline: auto; margin-top: clamp(2rem, 4vw, 3rem); }
main[class] .alm-meth-body { max-width: 60rem; display: grid; gap: 0.6rem; }
main[class] .alm-meth-item > summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.85rem 1.1rem; min-height: 3rem; }
main[class] .alm-meth-item > summary .alm-meth-h { margin: 0; }
main[class] .alm-meth-item-body { padding: 0 1.1rem 1rem; }
main[class] .alm-boundary { width: min(100%, 1504px); max-width: none; margin: 1.75rem auto 0; }

@media (max-width: 61.99rem) {
  .w2-alm-care { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .w2-alm-find .alm-fsarow input { width: 100%; }
  .w2-alm-find .alm-fsarow .btn { width: 100%; }
}

/* the optional contact form (WEB-02): same fields, wording and destination; clearer layout. The introduction stays in
   view beside the form on wide screens, each permission reads as its own choice, and the operator statement is
   set apart as small print rather than mixed into the choices. */
main[class] .lead-capture .capture-card { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; padding: clamp(1.25rem, 3vw, 2.5rem); }
main[class] .lead-capture .capture-intro { position: sticky; top: 1.5rem; }
main[class] .lead-capture .capture-heading { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; }
main[class] .lead-capture .capture-points { margin-top: 1.25rem; }
main[class] .lead-capture .capture-form { display: grid; gap: 1.1rem; }
main[class] .lead-capture .capture-form .field { margin: 0; }
main[class] .lead-capture .capture-form fieldset.field { border: 0; padding: 0; margin: 0.25rem 0 0; }
main[class] .lead-capture .capture-form legend { font-family: var(--font-display); font-weight: 650; color: var(--ink); font-size: 1.0625rem; margin-bottom: 0.6rem; padding: 0; }
main[class] .lead-capture .choice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; max-width: none; }
main[class] .lead-capture .choice { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.75rem; align-items: start;
  padding: 0.85rem 1rem; border: 1px solid var(--rule); border-radius: var(--radius-control); background: var(--surface, #FFFFFF); cursor: pointer; }
main[class] .lead-capture .choice:has(input:checked) { border-color: var(--logo-teal); box-shadow: inset 3px 0 0 var(--logo-teal); }
main[class] .lead-capture .choice input { width: 1.15rem; height: 1.15rem; margin: 0.15rem 0 0; }
main[class] .lead-capture .choice-title { display: block; font-weight: 650; color: var(--ink); }
main[class] .lead-capture .choice-note { display: block; margin-top: 0.2rem; font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
main[class] .lead-capture p.field-hint.capture-fine { margin: 0.75rem 0 0; padding: 0.75rem 0 0; border-top: 1px solid var(--rule); font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
main[class] .lead-capture details.capture-more, main[class] .lead-capture details.lead-notice { border-top: 1px solid var(--rule); padding-top: 0.75rem; }
main[class] .lead-capture details > summary { cursor: pointer; font-weight: 600; color: var(--action); }
main[class] .lead-capture .check-nav { margin-top: 0.25rem; }
main[class] .lead-capture .check-nav .btn { min-width: 10rem; }
@media (max-width: 61.99rem) {
  main[class] .lead-capture .capture-card { grid-template-columns: minmax(0, 1fr); }
  main[class] .lead-capture .capture-intro { position: static; }
}
main[class] details.alm-meth-item.alm-availability { display: block; margin: 0; font-size: inherit; }
main[class] .alm-meth-item.alm-availability > summary { justify-content: space-between; }

/* values that were inline styles, which the site Content-Security-Policy blocks in production */
/* evidence coverage bar: one class per whole percent, because the site CSP blocks inline style */
.rp-ici-bar .w2-bar-0 { width: 0%; }
.rp-ici-bar .w2-bar-1 { width: 1%; }
.rp-ici-bar .w2-bar-2 { width: 2%; }
.rp-ici-bar .w2-bar-3 { width: 3%; }
.rp-ici-bar .w2-bar-4 { width: 4%; }
.rp-ici-bar .w2-bar-5 { width: 5%; }
.rp-ici-bar .w2-bar-6 { width: 6%; }
.rp-ici-bar .w2-bar-7 { width: 7%; }
.rp-ici-bar .w2-bar-8 { width: 8%; }
.rp-ici-bar .w2-bar-9 { width: 9%; }
.rp-ici-bar .w2-bar-10 { width: 10%; }
.rp-ici-bar .w2-bar-11 { width: 11%; }
.rp-ici-bar .w2-bar-12 { width: 12%; }
.rp-ici-bar .w2-bar-13 { width: 13%; }
.rp-ici-bar .w2-bar-14 { width: 14%; }
.rp-ici-bar .w2-bar-15 { width: 15%; }
.rp-ici-bar .w2-bar-16 { width: 16%; }
.rp-ici-bar .w2-bar-17 { width: 17%; }
.rp-ici-bar .w2-bar-18 { width: 18%; }
.rp-ici-bar .w2-bar-19 { width: 19%; }
.rp-ici-bar .w2-bar-20 { width: 20%; }
.rp-ici-bar .w2-bar-21 { width: 21%; }
.rp-ici-bar .w2-bar-22 { width: 22%; }
.rp-ici-bar .w2-bar-23 { width: 23%; }
.rp-ici-bar .w2-bar-24 { width: 24%; }
.rp-ici-bar .w2-bar-25 { width: 25%; }
.rp-ici-bar .w2-bar-26 { width: 26%; }
.rp-ici-bar .w2-bar-27 { width: 27%; }
.rp-ici-bar .w2-bar-28 { width: 28%; }
.rp-ici-bar .w2-bar-29 { width: 29%; }
.rp-ici-bar .w2-bar-30 { width: 30%; }
.rp-ici-bar .w2-bar-31 { width: 31%; }
.rp-ici-bar .w2-bar-32 { width: 32%; }
.rp-ici-bar .w2-bar-33 { width: 33%; }
.rp-ici-bar .w2-bar-34 { width: 34%; }
.rp-ici-bar .w2-bar-35 { width: 35%; }
.rp-ici-bar .w2-bar-36 { width: 36%; }
.rp-ici-bar .w2-bar-37 { width: 37%; }
.rp-ici-bar .w2-bar-38 { width: 38%; }
.rp-ici-bar .w2-bar-39 { width: 39%; }
.rp-ici-bar .w2-bar-40 { width: 40%; }
.rp-ici-bar .w2-bar-41 { width: 41%; }
.rp-ici-bar .w2-bar-42 { width: 42%; }
.rp-ici-bar .w2-bar-43 { width: 43%; }
.rp-ici-bar .w2-bar-44 { width: 44%; }
.rp-ici-bar .w2-bar-45 { width: 45%; }
.rp-ici-bar .w2-bar-46 { width: 46%; }
.rp-ici-bar .w2-bar-47 { width: 47%; }
.rp-ici-bar .w2-bar-48 { width: 48%; }
.rp-ici-bar .w2-bar-49 { width: 49%; }
.rp-ici-bar .w2-bar-50 { width: 50%; }
.rp-ici-bar .w2-bar-51 { width: 51%; }
.rp-ici-bar .w2-bar-52 { width: 52%; }
.rp-ici-bar .w2-bar-53 { width: 53%; }
.rp-ici-bar .w2-bar-54 { width: 54%; }
.rp-ici-bar .w2-bar-55 { width: 55%; }
.rp-ici-bar .w2-bar-56 { width: 56%; }
.rp-ici-bar .w2-bar-57 { width: 57%; }
.rp-ici-bar .w2-bar-58 { width: 58%; }
.rp-ici-bar .w2-bar-59 { width: 59%; }
.rp-ici-bar .w2-bar-60 { width: 60%; }
.rp-ici-bar .w2-bar-61 { width: 61%; }
.rp-ici-bar .w2-bar-62 { width: 62%; }
.rp-ici-bar .w2-bar-63 { width: 63%; }
.rp-ici-bar .w2-bar-64 { width: 64%; }
.rp-ici-bar .w2-bar-65 { width: 65%; }
.rp-ici-bar .w2-bar-66 { width: 66%; }
.rp-ici-bar .w2-bar-67 { width: 67%; }
.rp-ici-bar .w2-bar-68 { width: 68%; }
.rp-ici-bar .w2-bar-69 { width: 69%; }
.rp-ici-bar .w2-bar-70 { width: 70%; }
.rp-ici-bar .w2-bar-71 { width: 71%; }
.rp-ici-bar .w2-bar-72 { width: 72%; }
.rp-ici-bar .w2-bar-73 { width: 73%; }
.rp-ici-bar .w2-bar-74 { width: 74%; }
.rp-ici-bar .w2-bar-75 { width: 75%; }
.rp-ici-bar .w2-bar-76 { width: 76%; }
.rp-ici-bar .w2-bar-77 { width: 77%; }
.rp-ici-bar .w2-bar-78 { width: 78%; }
.rp-ici-bar .w2-bar-79 { width: 79%; }
.rp-ici-bar .w2-bar-80 { width: 80%; }
.rp-ici-bar .w2-bar-81 { width: 81%; }
.rp-ici-bar .w2-bar-82 { width: 82%; }
.rp-ici-bar .w2-bar-83 { width: 83%; }
.rp-ici-bar .w2-bar-84 { width: 84%; }
.rp-ici-bar .w2-bar-85 { width: 85%; }
.rp-ici-bar .w2-bar-86 { width: 86%; }
.rp-ici-bar .w2-bar-87 { width: 87%; }
.rp-ici-bar .w2-bar-88 { width: 88%; }
.rp-ici-bar .w2-bar-89 { width: 89%; }
.rp-ici-bar .w2-bar-90 { width: 90%; }
.rp-ici-bar .w2-bar-91 { width: 91%; }
.rp-ici-bar .w2-bar-92 { width: 92%; }
.rp-ici-bar .w2-bar-93 { width: 93%; }
.rp-ici-bar .w2-bar-94 { width: 94%; }
.rp-ici-bar .w2-bar-95 { width: 95%; }
.rp-ici-bar .w2-bar-96 { width: 96%; }
.rp-ici-bar .w2-bar-97 { width: 97%; }
.rp-ici-bar .w2-bar-98 { width: 98%; }
.rp-ici-bar .w2-bar-99 { width: 99%; }
.rp-ici-bar .w2-bar-100 { width: 100%; }
.rs[data-season="spring"] { --sc: #2E8B6F; }
.rs[data-season="summer"] { --sc: #C2410C; }
.rs[data-season="fall"] { --sc: #A16207; }
.rs[data-season="winter"] { --sc: #1D6F9C; }

/* former inline style attributes (blocked by the site CSP in production), one class each */
.w2s-092e1f { margin:0 auto 1.2rem; }
.w2s-0e83ee { margin-top:2rem; }
.w2s-1a8917 { color:var(--ink);margin-top:0.9rem; }
.w2s-2239d6 { margin-top:1rem; }
.w2s-28c433 { max-width:58ch; }
.w2s-3a6b94 { margin-top:2rem;max-width:64ch; }
.w2s-3c4add { margin-top:1.5rem;grid-template-columns:1fr; }
.w2s-3ffdc9 { margin-bottom:1.25rem; }
.w2s-43cfd3 { margin-top:0.75rem; }
.w2s-44b21a { width:20%; }
.w2s-556b66 { outline: none; }
.w2s-634b96 { display:block;margin-top:.4rem; }
.w2s-63dabc { margin-top:0.9rem; }
.w2s-789157 { color:var(--ink); }
.w2s-91a870 { text-align:center; }
.w2s-aeb32f { margin-top:2.5rem; }
.w2s-bfbce8 { max-width:20ch; }
.w2s-cc7c20 { max-width:56ch; }
.w2s-ea2d86 { margin-top:1.75rem; }
.w2s-efd53f { margin-top:2rem;max-width:66ch; }
.w2s-fc511f { margin-top:1.5rem; }

/* WEB-02 eye review: the find panel keeps its padding against the Almanac's section rules, and phones get a 16px gutter */
main[class] section section.w2-alm-find { padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.1rem, 3.4vw, 3rem); }
@media (max-width: 40rem) {
  main[class] section.alm.ici-section { padding-left: 1rem; padding-right: 1rem; }
}