/* About (page-about.php) and Contact (page-contact.php). */

/* ---------- About: hero ---------- */
.ab-hero { position: relative; overflow: hidden; padding: clamp(22px, 3vw, 36px) 0 clamp(40px, 6vw, 88px); background: radial-gradient(60% 90% at 85% 40%, rgba(44,207,0,.10), transparent 70%), radial-gradient(40% 60% at 100% 100%, rgba(254,60,0,.07), transparent 70%), var(--paper); }
.ab-hero .wrap { position: relative; }
.ab-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: clamp(20px, 3vw, 40px); }
.ab-hero__copy { display: grid; gap: var(--s-5); }
.ab-hero h1 { font-size: var(--t-h1); letter-spacing: -.04em; line-height: 1.02; max-width: 16ch; }
.ab-portrait { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 4.4; background: #E9EAE7; box-shadow: var(--sh-3); }
.ab-portrait::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; z-index: 2; background: linear-gradient(90deg, var(--volt), #FF8A00, var(--solar)); }
.ab-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.ab-portrait figcaption { position: absolute; left: 16px; bottom: 16px; padding: 12px 18px; border-radius: var(--r-md); display: grid; gap: 2px; }
.ab-portrait figcaption strong { font-family: var(--f-display); font-size: 1.1rem; }
.ab-portrait figcaption span { font-size: .82rem; color: var(--slate); }
@media (max-width: 900px) { .ab-hero__grid { grid-template-columns: 1fr; } .ab-portrait { max-width: 460px; } }

/* ---------- About: story timeline ---------- */
.story { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: var(--s-7); counter-reset: none; }
.story__i { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 16px; padding: 26px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--mist); transition: transform var(--d-med) var(--ease-out), box-shadow var(--d-med); }
.story__i:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.story__n { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .1em; color: var(--slate); display: flex; align-items: center; gap: 10px; }
.story__n::after { content: ""; flex: 1; height: 1px; background: var(--mist); }
.story__i h3 { font-size: 1.35rem; letter-spacing: -.02em; margin-bottom: 8px; }
.story__i p { color: var(--slate); }
.story__i p strong { color: var(--charcoal); }
.story__i--hl { background: radial-gradient(80% 60% at 50% 100%, rgba(44,207,0,.14), transparent 70%), var(--white); border-color: var(--charcoal); }
.story__stat { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 22px; border-radius: var(--r-sm); overflow: hidden; background: var(--mist); border: 1px solid var(--mist); }
.story__stat div { display: flex; flex-direction: column; padding: 16px; background: var(--white); }
.story__stat dt { order: 2; font-size: .78rem; color: var(--slate); }
.story__stat dd { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem); letter-spacing: -.04em; line-height: 1; }
.story__stat dd small { font-size: .45em; color: var(--slate); letter-spacing: 0; }
.story__i:last-child .story__n { color: var(--solar-ink, #C22D00); }
@media (max-width: 1000px) { .story { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .story { grid-template-columns: 1fr; } }

/* ---------- About: aim ---------- */
.ab-aim-sec { padding-top: 0; }
.ab-aim { position: relative; overflow: hidden; display: grid; gap: var(--s-5); padding: clamp(32px, 6vw, 88px); border-radius: var(--r-lg); background: var(--charcoal); color: #fff; isolation: isolate; }
.ab-aim::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 80% at 90% 10%, rgba(44,207,0,.22), transparent 70%), radial-gradient(40% 70% at 0% 100%, rgba(254,60,0,.18), transparent 70%); }
.ab-aim .eyebrow { color: rgba(255,255,255,.7); }
.ab-aim__txt { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.4rem); letter-spacing: -.035em; line-height: 1.1; max-width: 24ch; }
.ab-aim__txt em { font-style: normal; background: linear-gradient(90deg, #6BFF3D, #FF8A00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-aim__by { display: flex; align-items: center; gap: 14px; }
.ab-aim__by img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; border: 2px solid rgba(255,255,255,.3); }
.ab-aim__by span { display: grid; font-size: .85rem; color: rgba(255,255,255,.7); }
.ab-aim__by strong { color: #fff; font-size: 1rem; }

/* ---------- About: today + map ---------- */
.ab-today { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ab-today .samap { margin-top: 0; }
.ab-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: var(--s-3) 0; }
.ab-nums div { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--r-md); background: var(--paper); }
.section--paper .ab-nums div { background: var(--white); }
.ab-nums dt { order: 2; font-size: .8rem; color: var(--slate); line-height: 1.35; }
.ab-nums dd { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 2.2rem; letter-spacing: -.04em; line-height: 1; }
@media (max-width: 900px) { .ab-today { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .ab-nums { grid-template-columns: 1fr; } }

/* ---------- About: team ---------- */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: var(--s-7); }
.person { display: grid; gap: 4px; }
.person__img { aspect-ratio: 4 / 4.2; border-radius: var(--r-lg); overflow: hidden; background: #E9EAE7; margin-bottom: 12px; }
.person__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.person__img--ph { display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--paper) 0 12px, #EDEFEB 12px 24px); border: 1px dashed var(--line); }
.person h3 { font-size: 1.2rem; }
.person p { color: var(--slate); font-size: .9rem; }
@media (max-width: 760px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Contact ---------- */
.ct-hero { position: relative; overflow: hidden; padding: clamp(22px, 3vw, 36px) 0 clamp(36px, 5vw, 64px); background: radial-gradient(60% 90% at 85% 30%, rgba(44,207,0,.10), transparent 70%), var(--paper); }
.ct-hero .wrap { position: relative; }
.ct-hero__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-top: clamp(20px, 3vw, 40px); }
.ct-hero__head > div { display: grid; gap: var(--s-4); max-width: 640px; }
.ct-hero h1 { font-size: var(--t-h1); letter-spacing: -.04em; line-height: 1.02; }
.ct-status { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--mist); font-size: .88rem; font-weight: 600; }
.ct-status span { width: 10px; height: 10px; border-radius: 50%; background: #9BA3A0; }
.ct-status.is-open span { background: var(--volt); box-shadow: 0 0 0 4px rgba(44,207,0,.2); }
.ct-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: var(--s-7); }
.ct-way { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center; padding: 18px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--mist); transition: transform var(--d-med) var(--ease-out), box-shadow var(--d-med), border-color var(--d-med); }
.ct-way:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: transparent; }
.ct-way__ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--paper); }
.ct-way__ic .i { width: 26px; height: 26px; --duo: var(--volt); --duo-o: .4; }
.ct-way--wa .ct-way__ic { background: #25D366; color: #fff; }
.ct-way small { display: block; font-size: .78rem; color: var(--slate); }
.ct-way strong { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); letter-spacing: -.01em; overflow-wrap: anywhere; }
.ct-way__go { width: 20px; height: 20px; color: var(--slate); transition: transform var(--d-fast); }
.ct-way:hover .ct-way__go { transform: translateX(3px); color: var(--charcoal); }
@media (max-width: 900px) { .ct-ways { grid-template-columns: 1fr; } }

.ct-body { padding-top: clamp(36px, 5vw, 64px); }
.ct-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(20px, 3vw, 44px); align-items: start; }
.ct-form, .ct-ok { display: grid; gap: 18px; padding: clamp(22px, 3.4vw, 40px); border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--mist); box-shadow: var(--sh-2); }
.ct-form h2, .ct-ok h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); letter-spacing: -.03em; outline: none; }
.ct-form > .btn { justify-self: start; }
.ct-optins { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-md); background: var(--paper); }
.chips-sel--radio span::before { border-radius: 50%; }
.ct-side { display: grid; gap: 14px; position: sticky; top: 86px; }
.ct-hours { display: grid; }
.ct-hours div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--mist); font-size: .9rem; }
.ct-hours div:first-child { border-top: 0; }
.ct-hours dt { color: var(--slate); }
.ct-hours dd { margin: 0; font-weight: 600; }
.ct-fb { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.ct-fb .i { width: 22px; height: 22px; color: #1877F2; flex: none; }
.ct-fb:hover { text-decoration: underline; text-underline-offset: 3px; }
.ct-branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: var(--s-3); }
.ct-branches li { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--mist); }
.ct-branches strong { font-family: var(--f-display); font-weight: 600; }
.ct-branches span { font-size: .82rem; color: var(--slate); }
@media (max-width: 960px) { .ct-grid { grid-template-columns: 1fr; } .ct-side { position: static; } }
.feats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .feats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .feats--4 { grid-template-columns: 1fr; } }