:root {

    --navy:#142f42;

    --red:#b92c2e;

    --gold:#c7a772;

    --cream:#f7f4ef;

    --ink:#1c2d38;

    --muted:#63717b;

}



* {

    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

    margin:0;

    font-family:Arial,Helvetica,sans-serif;

    color:var(--ink);

    background:#fff;

}



a {

    color:inherit;

    text-decoration:none;

}



.wrap {

    width:min(1180px,calc(100% - 40px));

    margin:auto;

}



.site-header {

    background:var(--navy);

    color:#fff;

}



.nav {

    min-height:84px;

    display:flex;

    align-items:center;

    gap:32px;

}



.brand {

    display:flex;

    align-items:center;

    gap:12px;

    font-size:17px;

    font-weight:700;

    letter-spacing:.5px;

    white-space:nowrap;

}



.brand b {

    color:#e7c58f;

}



.brand small {

    display:block;

    font-size:9px;

    letter-spacing:2.4px;

    margin-top:5px;

}



.brand-mark {

    background:var(--red);

    border:2px solid #e4c48b;

    border-radius:50%;

    width:49px;

    height:49px;

    display:grid;

    place-items:center;

    font-family:Georgia,serif;

    font-size:21px;

}



.nav nav {

    display:flex;

    gap:27px;

    margin-left:auto;

    font-size:13px;

}



.nav nav a:hover {

    color:#e7c58f;

}



.nav-cta,.search-panel button,.cta a {

    background:var(--red);

    color:#fff;

    border:0;

    padding:15px 21px;

    border-radius:4px;

    font-weight:700;

    cursor:pointer;

    font-size:13px;

}



.hero {

    background:

        linear-gradient(

            90deg,

            rgba(16, 43, 62, 0.95) 0%,

            rgba(16, 43, 62, 0.85) 25%,

            rgba(16, 43, 62, 0.35) 50%,

            rgba(16, 43, 62, 0) 70%

        ),

        url('/assets/images/madison_hero.png') center center / cover no-repeat;



    color: white;

}



.hero-inner {

    padding:98px 0 85px;

}



.kicker,.eyebrow {

    font-size:11px;

    font-weight:800;

    letter-spacing:2.5px;

    color:var(--gold);

}



h1,h2,h3,p {

    margin-top:0;

}



.hero h1 {

    font-family:Georgia,serif;

    font-size:clamp(40px,5.3vw,70px);

    line-height:1.08;

    margin:20px 0;

}



.hero h1 em {

    color:#f0cf9a;

    font-weight:400;

}



.hero p {

    font-size:17px;

    color:#e3e8e9;

    max-width:620px;

    line-height:1.6;

}



.search-panel {

    margin-top:30px;

    max-width:920px;

    display:flex;

    background:#fff;

    border-radius:7px;

    padding:8px;

    gap:8px;

    box-shadow:0 14px 40px #071c2c40;

}



.search-panel input,.search-panel select {

    border:0;

    min-width:0;

    padding:17px;

    font-size:14px;

    background:#fff;

    color:var(--ink);

}



.search-panel input {

    flex:1;

}



.search-panel select {

    width:195px;

    border-left:1px solid #ddd;

}



.search-panel button {

    white-space:nowrap;

}



.hero-note {

    margin-top:26px;

    font-size:11px;

    letter-spacing:2px;

    color:#e1d7c5;

}



.hero-note span {

    margin:0 10px;

    color:var(--gold);

}



.section {

    padding-top:75px;

    padding-bottom:80px;

}



.section-head {

    display:flex;

    justify-content:space-between;

    align-items:end;

    gap:20px;

    margin-bottom:28px;

}



.section-head h2,.cta h2 {

    font-family:Georgia,serif;

    font-size:36px;

    margin:10px 0 0;

}



.section-head a {

    color:var(--red);

    font-size:13px;

    font-weight:700;

}



.section-head p {

    color:var(--muted);

    margin:12px 0 0;

}



.category-grid {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:15px;

}



.category {

    border:1px solid #e6e4e0;

    border-radius:7px;

    padding:27px 18px;

    display:flex;

    flex-direction:column;

    gap:12px;

    min-height:165px;

    transition:transform .2s,box-shadow .2s;

}



.category:hover,.business-card:hover {

    transform:translateY(-3px);

    box-shadow:0 12px 28px #122d4018;

}



.category-icon {

    font-size:30px;

}



.category strong {

    font-size:15px;

}



.category small {

    color:var(--red);

    font-size:12px;

}



.listings {

    background:var(--cream);

}



.business-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}



.business-card {

    background:white;

    border-radius:8px;

    overflow:hidden;

    box-shadow:0 3px 12px #122d400d;

    transition:transform .2s,box-shadow .2s;

}



.business-art {

    height:175px;

    background:linear-gradient(135deg,#35576c,#163448);

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    color:#fff;

    gap:8px;

}



.business-art>span {

    font-size:43px;

}



.business-art small {

    letter-spacing:2px;

    font-size:10px;

    color:#e4d1b2;

}



.business-content {

    padding:23px;

}



.business-category {

    color:var(--red);

    font-size:11px;

    text-transform:uppercase;

    font-weight:700;

    letter-spacing:1px;

}



.business-content h3 {

    font-family:Georgia,serif;

    font-size:23px;

    margin:10px 0;

}



.business-content p {

    color:var(--muted);

    font-size:13px;

    line-height:1.7;

    min-height:45px;

}



.business-foot {

    border-top:1px solid #eee;

    padding-top:16px;

    display:flex;

    justify-content:space-between;

    gap:10px;

    font-size:12px;

    color:var(--muted);

}



.business-foot strong {

    color:var(--red);

}



.filter-note,.empty {

    padding:20px;

    background:white;

    border-radius:6px;

    margin-bottom:20px;

}



.filter-note a {

    color:var(--red);

}



.town-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:14px;

}



.town-grid a {

    border:1px solid #e7e3dc;

    border-radius:5px;

    padding:22px;

    display:flex;

    gap:12px;

    align-items:center;

    font-weight:700;

}



.town-grid a span:last-child {

    margin-left:auto;

    color:var(--red);

}



.cta {

    background:var(--navy);

    color:white;

    padding:60px 0;

}



.cta-inner {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:24px;

}



.cta h2 {

    margin:10px 0;

}



.cta p {

    color:#d1d9dd;

    margin:0;

}



.cta a {

    white-space:nowrap;

}



footer {

    background:#0e2534;

    color:#fff;

    padding:25px 0;

}



.foot {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    font-size:12px;

}



.foot span,.foot small {

    color:#bdcbd4;

}



.profile {

    padding:38px 0 85px;

}



.back {

    color:var(--red);

    font-size:13px;

}



.profile-hero {

    background:var(--navy);

    color:white;

    border-radius:9px;

    padding:55px;

    margin-top:24px;

}



.profile-hero h1 {

    font-family:Georgia,serif;

    font-size:48px;

    margin:15px 0;

}



.profile-hero p {

    color:#d3dce1;

}



.profile-layout {

    display:grid;

    grid-template-columns:minmax(0,2fr) minmax(260px,1fr);

    gap:36px;

    margin-top:40px;

}



.profile-main h2 {

    font-family:Georgia,serif;

    margin:32px 0 14px;

}



.profile-main p {

    line-height:1.8;

    color:#485a64;

}



.profile-side {

    background:var(--cream);

    border-radius:8px;

    padding:27px;

    align-self:start;

}



.profile-side p {

    font-size:14px;

    line-height:1.7;

}



.profile-side a {

    color:var(--red);

}



.hour {

    display:flex;

    justify-content:space-between;

    gap:8px;

}



.gallery {

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

}



.gallery img {

    width:100%;

    height:190px;

    object-fit:cover;

    border-radius:6px;

}



.sr-only {

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}



@media(max-width:850px) {

    .nav {

        flex-wrap:wrap;

        padding:15px 0;

    }

    .nav nav {

        order:3;

        width:100%;

        margin:0;

        justify-content:center;

        flex-wrap:wrap;

    }

    .nav-cta {

        margin-left:auto;

    }

    .category-grid {

        grid-template-columns:repeat(2,1fr);

    }

    .business-grid {

        grid-template-columns:repeat(2,1fr);

    }

    .profile-layout {

        grid-template-columns:1fr;

    }

}



@media(max-width:580px) {

    .wrap {

        width:min(100% - 28px,1180px);

    }

    .nav {

        gap:14px;

    }

    .brand {

        font-size:13px;

    }

    .brand-mark {

        width:40px;

        height:40px;

    }

    .nav-cta {

        font-size:11px;

        padding:11px;

    }

    .nav nav {

        font-size:12px;

        gap:18px;

    }

    .hero-inner {

        padding:65px 0;

    }

    .hero h1 {

        font-size:40px;

    }

    .search-panel {

        display:grid;

        grid-template-columns:1fr;

    }

    .search-panel select {

        width:100%;

        border:0;

        border-top:1px solid #eee;

    }

    .hero-note {

        font-size:9px;

        line-height:2;

    }

    .section {

        padding:55px 0;

    }

    .section-head {

        align-items:start;

    }

    .section-head h2 {

        font-size:30px;

    }

    .category-grid {

        gap:10px;

    }

    .category {

        padding:18px 13px;

        min-height:145px;

    }

    .business-grid,.town-grid {

        grid-template-columns:1fr;

    }

    .cta-inner,.foot {

        flex-direction:column;

        align-items:start;

    }

    .profile-hero {

        padding:32px 24px;

    }

    .profile-hero h1 {

        font-size:35px;

    }

}



.business-art img {

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}



/* v0.3: compact category filters above listings; desktop pills / mobile select */

.directory-filters {

    background:var(--cream);

    padding:26px 0 0;

}



.directory-filter-label {

    font-size:11px;

    letter-spacing:2px;

    font-weight:800;

    color:var(--muted);

    margin-bottom:14px;

}



.category-pills {

    display:flex;

    flex-wrap:wrap;

    gap:9px;

}



.category-pill {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 15px;

    border:1px solid #d6d4d0;

    border-radius:999px;

    background:#fff;

    color:var(--navy);

    font-size:13px;

    font-weight:700;

    transition:background .15s,color .15s,border-color .15s;

}



.category-pill:hover {

    border-color:var(--red);

    color:var(--red);

}



.category-pill.is-active {

    background:var(--navy);

    border-color:var(--navy);

    color:#fff;

}



.category-mobile-label,.category-mobile-select {

    display:none;

}



.directory-filters + .listings {

    padding-top:30px;

}



#businesses {

    scroll-margin-top:18px;

}



#businesses[aria-busy="true"] {

    opacity:.65;

}



@media(max-width:700px) {

    .directory-filters {

        padding-top:20px;

    }

    .category-pills {

        display:none;

    }

    .category-mobile-label {

        display:block;

        font-size:12px;

        font-weight:700;

        margin-bottom:9px;

    }

    .category-mobile-select {

        display:block;

        width:100%;

        padding:13px 14px;

        background:#fff;

        border:1px solid #d6d4d0;

        border-radius:7px;

        color:var(--navy);

        font-size:15px;

    }

    .directory-filters + .listings {

        padding-top:24px;

    }

}



/* v0.3.1: Keep uploaded business photos inside the dedicated media area. */

.business-card {

    display:block;

}



.business-art {

    position:relative;

    overflow:hidden;

}



.business-art img {

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

}



.business-content {

    position:relative;

    background:#fff;

    color:var(--ink);

}

/* v0.9: Parent and child category filters. */
.category-child-pills {
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid #e1ded9;
}

.category-child-pill {
    font-size: 12px;
    padding: 8px 13px;
}

.category-child-label {
    margin-top: 14px;
}

@media (max-width: 700px) {
    .category-child-pills {
        display: none;
    }
}
/* v0.9.2: Compact town quick links between hero and category filters. */
.town-quicklinks {
    background: #fff;
    border-bottom: 1px solid #e7e3dc;
}

.town-quicklinks-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 17px;
    padding-bottom: 17px;
}

.town-quicklinks-title {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.town-quicklinks-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.town-quicklink {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid #e1ded9;
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    font-size: 12px;
    font-weight: 700;
}

.town-quicklink:hover,
.town-quicklink.is-active {
    border-color: var(--navy);
    background: var(--navy);
    color: #fff;
}

.town-quicklink-clear {
    color: var(--red);
}

@media (max-width: 700px) {
    .town-quicklinks-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .town-quicklinks-list {
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 5px;
        -webkit-overflow-scrolling: touch;
    }

    .town-quicklink {
        flex: 0 0 auto;
    }
}

/* v0.10: Compact homepage town/category discovery and dedicated category directory. */
.home-discovery {
    background: var(--cream);
    padding: 24px 0 27px;
}

.home-discovery-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.home-discovery-head .directory-filter-label {
    margin: 0;
}

.home-discovery-head a,
.categories-page-intro a {
    color: var(--red);
    font-size: 13px;
    font-weight: 700;
}

.home-town-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.home-filter-caption,
.home-filter-field label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.home-filter-caption {
    white-space: nowrap;
}

.home-town-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.home-category-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 760px;
}

.home-filter-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.home-filter-select {
    width: 100%;
    min-width: 0;
    min-height: 43px;
    padding: 10px 12px;
    border: 1px solid #d6d4d0;
    border-radius: 6px;
    background: #fff;
    color: var(--navy);
    font-size: 14px;
}

.home-filter-select:disabled {
    opacity: .6;
}

.home-discovery + .listings {
    padding-top: 32px;
}

.categories-page-intro {
    padding-top: 48px;
    padding-bottom: 30px;
}

.categories-page-intro h1 {
    font-family: Georgia, serif;
    font-size: clamp(32px, 4vw, 46px);
    margin: 12px 0;
}

.categories-page-intro p {
    color: var(--muted);
    line-height: 1.6;
}

.category-directory-layout {
    display: grid;
    grid-template-columns: minmax(225px, 270px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    padding-bottom: 70px;
}

.category-directory-sidebar {
    border: 1px solid #e6e4e0;
    border-radius: 8px;
    background: #fff;
    padding: 16px;
}

.category-sidebar-title {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.category-sidebar-all,
.category-sidebar-parent-link {
    display: block;
    padding: 11px 10px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 700;
}

.category-sidebar-all:hover,
.category-sidebar-all.is-active,
.category-sidebar-parent-link:hover,
.category-sidebar-parent-link.is-active {
    background: var(--navy);
    color: #fff;
}

.category-sidebar-group {
    border-top: 1px solid #eeece8;
}

.category-sidebar-parent-row {
    display: flex;
    align-items: center;
}

.category-sidebar-parent-link {
    flex: 1;
    min-width: 0;
}

.category-sidebar-toggle {
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--navy);
    cursor: pointer;
    font-size: 20px;
}

.category-sidebar-toggle:hover,
.category-sidebar-toggle:focus-visible {
    background: #eae6df;
}

.category-sidebar-toggle[aria-expanded="true"] span {
    display: inline-block;
    transform: rotate(180deg);
}

.category-sidebar-children {
    padding: 3px 0 11px 12px;
}

.category-sidebar-children[hidden] {
    display: none;
}

.category-sidebar-children a {
    display: block;
    padding: 8px 9px;
    border-radius: 4px;
    color: #465a66;
    font-size: 12px;
    line-height: 1.4;
}

.category-sidebar-children a:hover,
.category-sidebar-children a.is-active {
    color: var(--red);
    background: #f7f4ef;
    font-weight: 700;
}

.category-directory-results {
    min-width: 0;
}

.category-directory-search {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 16px;
}

.category-directory-search input,
.category-directory-search select {
    min-width: 0;
    padding: 12px;
    border: 1px solid #d6d4d0;
    border-radius: 5px;
    background: #fff;
    font-size: 13px;
}

.category-directory-search input {
    flex: 1 1 170px;
}

.category-directory-search select {
    flex: 0 1 170px;
}

.category-directory-search button {
    padding: 12px 18px;
    border: 0;
    border-radius: 5px;
    background: var(--red);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.category-directory-results .listings {
    padding: 0;
    background: transparent;
}

.category-directory-results .listings > .wrap {
    width: 100%;
}

.category-directory-results .section-head h2 {
    font-size: 30px;
}

.category-directory-results .business-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 850px) {
    .category-directory-layout {
        grid-template-columns: minmax(190px, 225px) minmax(0, 1fr);
        gap: 18px;
    }

    .category-directory-results .business-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .home-town-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .home-town-pills {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 5px;
        -webkit-overflow-scrolling: touch;
    }

    .home-town-pills .town-quicklink {
        flex: 0 0 auto;
    }

    .home-category-row,
    .category-directory-layout {
        grid-template-columns: 1fr;
    }

    .category-directory-sidebar {
        padding: 12px;
    }

    .category-directory-results .business-grid {
        grid-template-columns: 1fr;
    }
}

/* v0.10.1: Town links and category controls share one compact row. */
.home-discovery-inline {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.home-discovery-inline .home-town-row {
    flex: 1 1 520px;
    min-width: 0;
    margin-bottom: 0;
}

.home-discovery-inline .home-category-row {
    flex: 0 1 auto;
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 10px;
    max-width: none;
}

.home-discovery-inline .home-filter-field {
    flex: 1 1 180px;
    width: 190px;
    max-width: 260px;
}

.home-discovery-inline .home-filter-select {
    min-height: 40px;
}

@media (max-width: 900px) {
    .home-discovery-inline .home-town-row {
        flex-basis: 100%;
    }

    .home-discovery-inline .home-category-row {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .home-discovery-inline .home-town-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-discovery-inline .home-category-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .home-discovery-inline .home-filter-field {
        width: 100%;
        max-width: none;
        flex: 0 0 auto;
    }
}