:root {
     --brand: #919c23;
     /* primary */
     --ink: #111827;
     /* text */
     --muted: #6b7280;
     /* secondary text */
     --bg: #ffffff;
     /* page background */
     --card: #ffffff;
     /* card background */
     --elev: 0 6px 20px rgba(17, 24, 39, .08);
     --radius: 18px;
     --radius-sm: 12px;
     --ring: 0 0 0 3px rgba(145, 156, 35, .25);
 }

 /* Reset-ish */
 *,
 *::before,
 *::after {
     box-sizing: border-box
 }


 .contact-grid {
     display: grid;
     gap: 24px;
 }

 .contact-grid.cols {
     grid-template-columns: 1.1fr .9fr;
     align-items: start;
 }

 .branch-column {
     display: grid;
     gap: 24px;
 }

 /* Safety: make sure nothing collapses */
 #contact-modern,
 #contact-modern .branch-column {
     height: auto !important;
 }



 p {
     margin: .25rem 0;
     color: var(--muted)
 }

 a {
     color: var(--brand);
     text-decoration: none
 }

 img {
     max-width: 100%;
     display: block
 }

 button {
     font: inherit
 }

 /* Page shell */
 .container {
     /* max-width: 1180px; */
     margin: 0 auto;
     padding: 0 20px
 }

 .hero {
     position: relative;
     overflow: hidden;
     background: linear-gradient(180deg, #ffffff, #fafafa)
 }

 .hero-wrap {
     padding: 64px 0 28px
 }

 .hero .badge {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     color: #566014;
     background: rgba(145, 156, 35, .08);
     border: 1px solid rgba(145, 156, 35, .25);
     padding: .35rem .7rem;
     border-radius: 999px;
     font-weight: 600;
     font-size: .85rem
 }

 .title {
     font-size: clamp(28px, 3vw, 44px);
     letter-spacing: .2px;
     margin-top: 14px
 }

 .subtitle {
     font-size: clamp(14px, 2vw, 18px);
     color: var(--muted)
 }

 /* Layout */
 .grid {
     display: grid;
     gap: 24px
 }

 .cols {
     grid-template-columns: 1.1fr .9fr;
     align-items: start
 }

 @media (max-width:960px) {
     .cols {
         grid-template-columns: 1fr
     }
 }

 /* Branch cards */
 .branch-list {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 16px
 }

 @media (max-width:720px) {
     .branch-list {
         grid-template-columns: 1fr
     }
 }

 .card {
     background: var(--card);
     border: 1px solid rgba(17, 24, 39, .08);
     border-radius: var(--radius);
     padding: 18px 16px;
     box-shadow: var(--elev);
     position: relative;
     isolation: isolate
 }

 .card::after {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: inherit;
     background: radial-gradient(600px 200px at -10% -30%, rgba(145, 156, 35, .06), transparent 50%);
 }

 .card:hover {
     transform: translateY(-2px);
     transition: .25s ease;
     box-shadow: 0 12px 34px rgba(17, 24, 39, .12)
 }

 .branch {
     display: flex;
     gap: 12px;
     align-items: flex-start
 }

 .branch .pin {
     flex: 0 0 42px;
     height: 42px;
     border-radius: 10px;
     display: grid;
     place-items: center;
     background: rgba(145, 156, 35, .08);
     border: 1px solid rgba(145, 156, 35, .25)
 }

 .branch h3 {
     font-size: 18px
 }

 .branch .addr {
     font-size: 14px;
     color: #4b5563
 }

 .card .actions {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-top: 12px
 }

 .btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     border: 1px solid rgba(17, 24, 39, .12);
     background: #fff;
     color: var(--ink);
     padding: 8px 12px;
     border-radius: 12px;
     cursor: pointer
 }

 .btn:hover {
     border-color: rgba(145, 156, 35, .6)
 }

 .btn.primary {
     color: #fff;
     background: linear-gradient(180deg, #a4b12a, #919c23);
     border-color: transparent
 }

 .btn.ghost {
     background: transparent
 }

 .btn:focus {
     outline: none;
     box-shadow: var(--ring)
 }

 .active-indicator {
     position: absolute;
     top: 14px;
     right: 14px;
     width: 10px;
     height: 10px;
     border-radius: 999px;
     background: linear-gradient(180deg, #a4b12a, #7b851f)
 }

 .card[data-active="true"] {
     outline: 2px solid rgba(145, 156, 35, .35)
 }

 /* Map + contact panel */
 .map-panel {
     display: grid;
     gap: 16px
 }

 .map {
     height: 440px;
     border-radius: var(--radius);
     overflow: hidden;
     border: 1px solid rgba(17, 24, 39, .08);
     box-shadow: var(--elev)
 }

 .map iframe {
     width: 100%;
     height: 100%;
     border: 0
 }

 .contact-box {
     display: grid;
     gap: 12px;
     position: relative;
     background: linear-gradient(180deg, #ffffff, #fafafa);
     border: 1px solid rgba(17, 24, 39, .08);
     border-radius: var(--radius);
     padding: 18px 16px;
     box-shadow: var(--elev);
     border-left: 5px solid var(--brand)
 }

 .contact-box::after {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: inherit;
     pointer-events: none;
     background: linear-gradient(135deg, rgba(145, 156, 35, .08), transparent 45%)
 }

 .contact-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px
 }

 .chip {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: .25rem .6rem;
     border-radius: 999px;
     border: 1px solid rgba(145, 156, 35, .35);
     background: rgba(145, 156, 35, .1);
     color: #566014;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: .2px
 }

 .contact-actions {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     margin-top: 6px
 }

 .contact-row {
     display: flex;
     align-items: center;
     gap: 10px;
     color: var(--ink)
 }

 .contact-row a {
     color: var(--brand)
 }

 .mini {
     font-size: 13px;
     color: var(--muted)
 }

 /* Form */
 .form-card {
     margin-top: 6px;
     padding: 18px;
     background: var(--card);
     border: 1px solid rgba(17, 24, 39, .08);
     border-radius: var(--radius)
 }

 label {
     display: block;
     margin: 8px 0 6px;
     color: var(--ink);
     font-weight: 600
 }

 input,
 textarea,
 select {
     width: 100%;
     padding: 12px 14px;
     border-radius: 12px;
     border: 1px solid rgba(17, 24, 39, .12);
     background: #fff;
     color: var(--ink)
 }

 input:focus,
 textarea:focus,
 select:focus {
     outline: none;
     box-shadow: var(--ring);
     border-color: rgba(145, 156, 35, .6)
 }

 textarea {
     min-height: 120px;
     resize: vertical
 }



 /* Reduce motion preferences */
 @media (prefers-reduced-motion:reduce) {
     .card:hover {
         transform: none
     }
 }