/* About us: the 7 Colors & More story, live numbers and every kasi we reach. Same cream/leaf look as the shop. */
.ab { background: var(--kh-page, #f3eedf); color: var(--kh-ink, #231f1c); }
.ab a { color: inherit; }
.ab h1, .ab h2, .ab h3 { font-family: var(--kh-display); font-weight: 400; margin: 0; line-height: 1.05; }
.ab-wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* Top bar */
.ab-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 1rem; padding: .6rem 16px; background: #24581b; color: #fff; }
.ab-logo img { height: 40px; width: auto; background: #f3eedf; border-radius: 12px; padding: .2rem .55rem; display: block; }
.ab-nav { display: flex; gap: 1.2rem; margin-left: auto; }
.ab-nav a { color: #e9f3df; text-decoration: none; } .ab-nav a:hover { color: #fff; text-decoration: underline; }
.ab-shop { display: inline-flex; align-items: center; gap: .35rem; background: #f3eedf; color: #24581b !important; text-decoration: none; border-radius: 999px; padding: .45rem 1rem; white-space: nowrap; }
@media (max-width: 720px) { .ab-nav { display: none; } .ab-shop { margin-left: auto; } }

/* Buttons */
.ab-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px; padding: .4rem 1.3rem; border-radius: 999px; background: #3d8b2f; color: #fff !important; text-decoration: none; border: 2px solid #3d8b2f; font-size: 1.08rem; }
.ab-btn:hover { background: #2f7124; border-color: #2f7124; }
.ab-btn.ghost { background: transparent; color: #24581b !important; border-color: #24581b; }

/* Hero */
.ab-hero { background: radial-gradient(1200px 500px at 80% -10%, rgba(124,194,67,.28), transparent 60%), radial-gradient(800px 400px at 0% 110%, rgba(226,116,44,.18), transparent 60%), #f7f2e4; padding: 3.2rem 16px 3rem; text-align: center; overflow: hidden; }
.ab-hero-in { max-width: 820px; margin: 0 auto; }
.ab-kicker { display: inline-flex; align-items: center; gap: .35rem; background: rgba(61,139,47,.12); color: #2f7124; border-radius: 999px; padding: .3rem .9rem; }
.ab-hero h1 { font-size: clamp(2.8rem, 8vw, 5.2rem); margin: .9rem 0 .7rem; color: #24581b; }
.ab-lead { font-size: clamp(1.08rem, 2.4vw, 1.3rem); color: #4a4238; max-width: 640px; margin: 0 auto; line-height: 1.5; }
.ab-lead em { color: #c8352d; font-style: normal; }
.ab-plate { display: flex; justify-content: center; gap: .55rem; margin: 1.8rem 0 1.6rem; flex-wrap: wrap; }
.ab-plate span { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-size: 1.6rem; box-shadow: 0 10px 18px -12px var(--c); animation: ab-bob 2.8s ease-in-out infinite; }
.ab-plate span:nth-child(2) { animation-delay: .15s; } .ab-plate span:nth-child(3) { animation-delay: .3s; } .ab-plate span:nth-child(4) { animation-delay: .45s; }
.ab-plate span:nth-child(5) { animation-delay: .6s; } .ab-plate span:nth-child(6) { animation-delay: .75s; } .ab-plate span:nth-child(7) { animation-delay: .9s; }
@keyframes ab-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.ab-hero-cta { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }

/* Sections */
.ab-sec { padding: 3.4rem 0; }
.ab-sec--soft { background: #ece5d2; }
.ab-sec--green { background: #1f3a18; color: #f3eedf; }
.ab-sec h2 { font-size: clamp(2rem, 5vw, 3rem); margin: .3rem 0 1.2rem; color: #24581b; }
.ab-sec--green h2 { color: #fff; }
.ab-eyebrow { display: inline-flex; align-items: center; gap: .45rem; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: #c8794b; }
.ab-eyebrow--light { color: #e9b949; }
.ab-sub { color: #5a5145; max-width: 60ch; margin: -.4rem 0 1.2rem; font-size: 1.08rem; }

/* Story */
.ab-story { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.4rem; align-items: center; }
.ab-story-text p { font-size: 1.1rem; line-height: 1.65; color: #3b342c; margin: 0 0 1rem; }
.ab-story-card { margin: 0; background: #fffdf7; border-radius: 28px; padding: 1.6rem; text-align: center; box-shadow: 0 30px 50px -36px rgba(36,88,27,.6); transform: rotate(-2deg); }
.ab-story-card img { width: 100%; max-width: 300px; height: auto; }
.ab-story-card figcaption { color: #5a5145; margin-top: .6rem; }
@media (max-width: 820px) { .ab-story { grid-template-columns: 1fr; } .ab-story-card { transform: none; max-width: 360px; margin: 0 auto; } }

/* Flow */
.ab-flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; counter-reset: ab; position: relative; }
.ab-flow li { background: #fffdf7; border-radius: 22px; padding: 1.1rem 1rem; display: flex; flex-direction: column; gap: .35rem; position: relative; border-top: 5px solid var(--c); }
.ab-flow li .mdi { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-size: 1.5rem; }
.ab-flow li b { font-weight: 400; font-size: 1.12rem; } .ab-flow li span { color: #5a5145; font-size: .95rem; line-height: 1.4; }
.ab-flow li:not(:last-child)::after { content: "\F0142"; font-family: "Material Design Icons"; position: absolute; right: -.95rem; top: 1.6rem; color: #a49b8a; font-size: 1.3rem; z-index: 1; }
@media (max-width: 900px) { .ab-flow { grid-template-columns: 1fr; } .ab-flow li { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: .8rem; } .ab-flow li span { flex-basis: 100%; }
  .ab-flow li:not(:last-child)::after { content: "\F0140"; right: auto; left: 2.1rem; top: auto; bottom: -1.15rem; } }

/* Values */
.ab-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ab-values article { background: #fffdf7; border-radius: 22px; padding: 1.3rem 1.1rem; }
.ab-values .mdi { font-size: 2.2rem; color: var(--c); }
.ab-values h3 { font-size: 1.6rem; margin: .3rem 0 .4rem; color: #231f1c; }
.ab-values p { margin: 0; color: #5a5145; line-height: 1.5; }
@media (max-width: 900px) { .ab-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ab-values { grid-template-columns: 1fr; } }

/* Live counters */
.ab-live { width: 10px; height: 10px; border-radius: 50%; background: #7cc243; box-shadow: 0 0 0 0 rgba(124,194,67,.7); animation: ab-pulse 1.6s infinite; }
@keyframes ab-pulse { 70% { box-shadow: 0 0 0 10px rgba(124,194,67,0); } 100% { box-shadow: 0 0 0 0 rgba(124,194,67,0); } }
.ab-counters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .9rem; }
@media (max-width: 1000px) { .ab-counters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ab-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ab-count b { font-size: 2.3rem; } }
.ab-count { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; padding: 1.1rem 1rem; display: flex; flex-direction: column; gap: .2rem; position: relative; overflow: hidden; }
.ab-count::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c); }
.ab-count .mdi { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-size: 1.3rem; margin-bottom: .3rem; }
.ab-count b { font-family: var(--kh-display); font-weight: 400; font-size: 2.8rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.ab-count span { color: #d9d1bd; }
.ab-count.bump b { animation: ab-bump .5s ease; }
@keyframes ab-bump { 40% { transform: scale(1.12); color: #e9b949; } }

/* Areas */
.ab-legend { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ab-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.ab-area { background: #fffdf7; border-radius: 22px; padding: 1.1rem; }
.ab-area h3 { font-size: 1.45rem; color: #24581b; margin-bottom: .6rem; display: flex; align-items: center; gap: .4rem; }
.ab-area h3 small { font-family: var(--bx-font); font-size: .85rem; color: #8a7f6c; margin-left: auto; }
.ab-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ab-chip { display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px; padding: .25rem .75rem; background: #f3eedf; border: 1px solid #e2d9c3; color: #4a4238; font-size: .95rem; }
.ab-chip.is-kasi { background: rgba(61,139,47,.12); border-color: rgba(61,139,47,.3); color: #24581b; }
.ab-chip.is-home { background: #c8352d; border-color: #c8352d; color: #fff; }
.ab-notyet { margin-top: 1.4rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: #fffdf7; border: 2px dashed #d7cbb0; border-radius: 22px; padding: 1rem 1.2rem; }
.ab-notyet > .mdi { font-size: 2.2rem; color: #c8794b; } .ab-notyet > div { flex: 1 1 260px; color: #4a4238; } .ab-notyet b { font-weight: 400; color: #231f1c; }

/* Join */
.ab-join { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ab-join a { background: #fffdf7; border-radius: 22px; padding: 1.3rem 1.1rem; text-decoration: none; display: flex; flex-direction: column; gap: .3rem; border: 2px solid transparent; transition: transform .15s, border-color .15s; }
.ab-join a:hover { transform: translateY(-3px); border-color: var(--c); }
.ab-join .mdi { font-size: 2.2rem; color: var(--c); } .ab-join b { font-family: var(--kh-display); font-weight: 400; font-size: 1.7rem; color: #231f1c; } .ab-join span { color: #5a5145; }
@media (max-width: 820px) { .ab-join { grid-template-columns: 1fr; } }

.ab .ks-footer { margin-top: 0; padding-bottom: 1.4rem; } .ab .ks-footer a { color: #e9e3d2; }

/* Dark mode */
html.kh-dark .ab { background: #121610; color: #ece5d2; }
html.kh-dark .ab-hero { background: radial-gradient(1200px 500px at 80% -10%, rgba(124,194,67,.16), transparent 60%), #151c13; }
html.kh-dark .ab-hero h1, html.kh-dark .ab-sec h2, html.kh-dark .ab-area h3 { color: #a6d98a; }
html.kh-dark .ab-lead, html.kh-dark .ab-story-text p, html.kh-dark .ab-sub, html.kh-dark .ab-notyet > div { color: #cfc6b2; }
html.kh-dark .ab-sec--soft { background: #182116; }
html.kh-dark .ab-flow li, html.kh-dark .ab-values article, html.kh-dark .ab-area, html.kh-dark .ab-join a, html.kh-dark .ab-story-card, html.kh-dark .ab-notyet { background: #1b2a20; }
html.kh-dark .ab-values h3, html.kh-dark .ab-join b, html.kh-dark .ab-notyet b { color: #f3eedf; }
html.kh-dark .ab-flow li span, html.kh-dark .ab-values p, html.kh-dark .ab-join span, html.kh-dark .ab-story-card figcaption { color: #bdb4a0; }
html.kh-dark .ab-chip { background: #22301c; border-color: #2f4029; color: #ddd5c2; } html.kh-dark .ab-chip.is-kasi { color: #a6d98a; }
html.kh-dark .ab-btn.ghost { color: #a6d98a !important; border-color: #a6d98a; } html.kh-dark .ab-kicker { color: #a6d98a; }

@media (prefers-reduced-motion: reduce) { .ab-plate span, .ab-live, .ab-count.bump b { animation: none; } }