/* ==========================================================================
   DINKOMART — the About page

   Rebuilt 2026-10-06 from the owner's brochure (DINKO_MART_Brochure_Long):
   the hero, the "every home" band, about, why, what we offer, purpose,
   vision, mission, belief, founders and the closing philosophy. The words
   are the brochure's; the shapes follow it — dark contour bands, mint tints,
   three lines converging on EVERY HOME.

   Loaded by about.php ONLY, from outside the synced ag:head block, so it is
   last in the cascade on this one page and absent everywhere else. Semantic
   tokens throughout, so every rule flips with the theme; the dark bands use
   the band tokens, which are dark in both themes by design.
   ========================================================================== */

/* ------------------------------------------------------------ shared */
.ab-display {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  line-height: 1.04;
  letter-spacing: var(--tr-tight);
  font-weight: 700;
  margin: 0;
}
.ab-tint { background: color-mix(in srgb, var(--brand-soft) 55%, var(--bg)); }
.ab-ico {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-ink);
  color: var(--accent);
}
.ab-ico .ico { width: 20px; height: 20px; }
.ab-ico.is-accent { background: var(--accent); color: #1a0f02; }
.ab-ico.is-line {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 60%, transparent);
}
.on-band .ab-ico:not(.is-accent):not(.is-line) { background: rgba(255, 255, 255, .06); color: var(--band-accent); border: 1px solid var(--band-border); }

/* ------------------------------------------------------------ hero */
.ab-hero { padding-block: clamp(28px, 4vw, 48px) clamp(56px, 7vw, 104px); text-align: center; }
.ab-hero .breadcrumb { justify-content: flex-start; text-align: left; }
.ab-hero-in { max-width: 860px; margin: clamp(24px, 4vw, 48px) auto 0; }
.ab-hero-mark { width: clamp(92px, 11vw, 132px); height: auto; margin: 0 auto var(--s-5); display: block; }
.ab-hero .sec-num { justify-content: center; }
.ab-title {
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  line-height: 1.02;
  letter-spacing: var(--tr-tight);
  margin: var(--s-4) 0 var(--s-5);
}
.ab-title em { font-style: normal; color: var(--brand-ink); }
.ab-hero .lede { margin-inline: auto; max-width: 58ch; }
.ab-hero .cluster { justify-content: center; margin-top: var(--s-6); }

/* ------------------------------------------------------------ the every-home band */
.ab-every { padding-block: clamp(48px, 6vw, 88px); overflow: hidden; }
.ab-flow {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 900px) {
  .ab-flow { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-8); }
}
.ab-converge { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; gap: var(--s-3); }
.ab-sources { display: grid; gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.ab-sources li {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--band-fg-muted);
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--sprout-400);
  white-space: nowrap;
}
.ab-sources li:nth-child(2) { border-color: var(--band-accent); color: var(--band-fg); }
.ab-sources li:nth-child(3) { border-color: color-mix(in srgb, var(--sprout-400) 60%, #d6e86c); }
.ab-lines { width: 100%; height: 120px; overflow: visible; }
.ab-lines path { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.ab-lines .l1 { stroke: var(--sprout-400); }
.ab-lines .l2 { stroke: var(--band-accent); }
.ab-lines .l3 { stroke: color-mix(in srgb, var(--sprout-400) 60%, #d6e86c); }
.ab-dest b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  letter-spacing: var(--tr-tight);
  color: var(--band-accent);
  line-height: 1;
  white-space: nowrap;
}
.ab-dest span { display: block; margin-top: 6px; font-size: var(--t-xs); color: var(--band-fg-muted); max-width: 24ch; }
.ab-every-quote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-xl);
  line-height: 1.35;
  color: var(--band-fg);
  padding-left: var(--s-6);
  border-left: 1px solid var(--band-border);
}
@media (max-width: 640px) {
  .ab-converge { grid-template-columns: 1fr; }
  .ab-lines { display: none; }
  .ab-dest { padding-top: var(--s-3); }
  .ab-every-quote { padding-left: var(--s-4); }
}

/* ------------------------------------------------------------ about */
.ab-about { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 940px) { .ab-about { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 5vw, 80px); } }
.ab-about .ab-display { font-size: var(--t-4xl); text-transform: uppercase; margin-bottom: var(--s-6); }
.ab-journey-card {
  border-radius: var(--r-panel);
  padding: clamp(28px, 4vw, 44px) var(--s-6);
  overflow: hidden;
}
.ab-journey { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; justify-items: center; }
.ab-journey li { display: grid; justify-items: center; gap: 8px; text-align: center; }
.ab-journey li + li::before {
  content: '';
  width: 1.5px; height: 30px;
  background: color-mix(in srgb, var(--band-accent) 70%, transparent);
  margin-bottom: 4px;
}
.ab-journey b { font-size: var(--t-xs); font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--band-fg-muted); font-weight: 600; }
.ab-journey .ab-ico { width: 52px; height: 52px; }
.ab-journey li.is-end .ab-ico { width: 64px; height: 64px; box-shadow: 0 0 0 8px rgba(238, 155, 60, .18); }
.ab-journey li.is-end b { color: var(--band-accent); }
.ab-statement {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  line-height: 1.32;
  color: var(--fg);
  margin: 0 0 var(--s-5);
}
.ab-statement::after { content: ''; display: block; width: 56px; height: 3px; border-radius: 2px; background: var(--accent); margin-top: var(--s-5); }
.ab-copy p { color: var(--fg-muted); max-width: 64ch; }
.ab-copy mark {
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 38%, transparent) 62%);
  color: var(--fg);
  font-weight: 700;
  padding: 0 2px;
}

/* ------------------------------------------------------------ why */
.ab-center-head { text-align: center; margin-bottom: var(--s-8); }
.ab-center-head .sec-num { justify-content: center; }
.ab-center-head .ab-display { margin-top: var(--s-3); }
.ab-why {
  position: relative;
  display: grid;
  border-radius: var(--r-panel);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}
@media (min-width: 820px) { .ab-why { grid-template-columns: 1fr 1fr; } }
.ab-why-col { padding: clamp(28px, 4vw, 44px); }
.ab-why-col.band { border-radius: 0; }
.ab-why-col h3 { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-lg); margin: 0 0 var(--s-4); }
.ab-why-col ul { list-style: none; margin: 0; padding: 0; }
.ab-why-col li {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--border);
  font-weight: 600;
  font-size: var(--t-sm);
}
.ab-why-col.band li { border-color: var(--band-border); color: var(--band-fg); }
.ab-why-col li .ico { width: 18px; height: 18px; color: var(--brand-ink); flex: none; }
.ab-why-col.band li .ico { color: var(--band-accent); }
.ab-why-mark {
  display: none;
}
@media (min-width: 820px) {
  .ab-why-mark {
    display: grid; place-items: center;
    position: absolute; left: 50%; top: 50%;
    width: 104px; height: 104px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--surface) 70%, transparent), var(--shadow-md);
    z-index: 2;
  }
  .ab-why-mark img { width: 72px; height: auto; }
  /* the badge straddles the seam, so each column keeps clear of it */
  .ab-why-col.band { padding-right: clamp(76px, 7vw, 92px); }
  .ab-why-col:not(.band) { padding-left: clamp(76px, 7vw, 92px); }
}

/* ------------------------------------------------------------ what we offer */
.ab-offer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
@media (min-width: 620px) { .ab-offer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ab-offer { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ab-offer-title {
  border-radius: var(--r-panel);
  padding: clamp(24px, 3vw, 36px);
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 200px;
}
.ab-offer-title .ab-display { font-size: var(--t-3xl); text-transform: uppercase; }
.ab-offer-item {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: clamp(20px, 2.4vw, 28px);
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  text-decoration: none;
}
@media (min-width: 620px) { .ab-offer-item { border-left: 1px solid var(--border); } }
.ab-offer-item h3 { font-size: var(--t-md); margin: 0; }
.ab-offer-item p { margin: 0; font-size: var(--t-sm); color: var(--fg-muted); }
.ab-offer-item .ab-ico { background: var(--surface); color: var(--brand-ink); border: 1px solid var(--border); }
.ab-offer-item .ab-ico.is-accent { background: var(--accent); color: #1a0f02; border-color: transparent; }
.ab-offer-go { margin-top: auto; padding-top: var(--s-2); font-size: var(--t-xs); font-weight: 700; color: var(--brand-ink); display: inline-flex; align-items: center; gap: 6px; }
.ab-offer-go .ico { width: 14px; height: 14px; transition: transform var(--dur-1) var(--ease-out); }
a.ab-offer-item:hover { background: var(--surface); }
a.ab-offer-item:hover .ab-offer-go .ico { transform: translateX(4px); }

/* ------------------------------------------------------------ purpose */
.ab-purpose-head { display: grid; gap: var(--s-5); align-items: end; margin-bottom: var(--s-8); }
@media (min-width: 900px) { .ab-purpose-head { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.ab-purpose-head .ab-display { text-transform: uppercase; }
.ab-quote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-xl);
  line-height: 1.35;
  color: var(--band-fg);
}
/* the rows' lines run edge to edge, so the band clips them rather than
   letting them widen the page (the root's overflow-x: clip hides it, but a
   1,870px document under a 960px viewport is still the defect) */
#purpose { overflow: hidden; }
.ab-bridge { display: grid; gap: var(--s-5); position: relative; }
.ab-bridge-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-4);
}
.ab-bridge-row::before {
  content: '';
  position: absolute; left: -100vw; right: -100vw; top: 50%;
  height: 1.5px;
  background: var(--sprout-400);
  opacity: .8;
  z-index: 0;
}
.ab-bridge-row.is-gold::before { background: var(--band-accent); }
.ab-bridge-row.is-lime::before { background: color-mix(in srgb, var(--sprout-400) 60%, #d6e86c); }
.ab-bridge-row > * { position: relative; z-index: 1; }
.ab-pill {
  justify-self: end;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--band-bg);
  border: 1px solid var(--band-border);
  color: var(--band-fg);
  white-space: nowrap;
}
.ab-pill.is-out { justify-self: start; background: #fff; color: var(--raw-night, #0A2114); border-color: #fff; font-weight: 700; }
.ab-hub {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 22px 10px 12px;
  border-radius: var(--r-pill);
  background: #fff;
  color: #0A2114;
  font-weight: 800;
  font-size: var(--t-sm);
  letter-spacing: .04em;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  white-space: nowrap;
}
.ab-hub img { width: 40px; height: auto; }
@media (max-width: 560px) {
  .ab-bridge-row { grid-template-columns: 1fr; justify-items: center; gap: var(--s-2); }
  .ab-pill, .ab-pill.is-out { justify-self: center; }
  .ab-bridge-row::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1.5px; height: auto; }
}

/* ------------------------------------------------------------ vision */
.ab-vision { text-align: center; overflow: hidden; }
.ab-vision .sec-num { justify-content: center; }
.ab-vision .ab-display { margin: var(--s-3) 0 var(--s-5); text-transform: uppercase; }
.ab-vision-text {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  line-height: 1.3;
  color: var(--fg);
  max-width: 30ch;
  margin: 0 auto;
}
.ab-vision-text em {
  font-style: italic;
  font-weight: 700;
  color: var(--brand-ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.ab-rings { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.ab-rings circle { fill: none; stroke: color-mix(in srgb, var(--brand) 14%, transparent); }

/* ------------------------------------------------------------ mission */
.ab-mission-head { margin-bottom: var(--s-6); }
.ab-mission-head .ab-display { text-transform: uppercase; }
.ab-mission { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--border); }
@media (min-width: 640px) { .ab-mission { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .ab-mission { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ab-mission li {
  display: grid; gap: var(--s-4); align-content: start;
  padding: var(--s-6) var(--s-5) var(--s-6) 0;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 640px) { .ab-mission li { padding-left: var(--s-5); border-left: 1px solid var(--border); } }
.ab-mission p { margin: 0; font-weight: 600; color: var(--fg); max-width: 34ch; }

/* ------------------------------------------------------------ belief */
.ab-belief { overflow: hidden; }
.ab-belief .ab-display { text-transform: uppercase; }
.ab-belief-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-3xl);
  line-height: 1.12;
  letter-spacing: var(--tr-tight);
  color: var(--fg);
  margin: var(--s-5) 0 var(--s-8);
  max-width: 22ch;
}
.ab-belief-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--border); }
@media (min-width: 900px) { .ab-belief-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ab-belief-row li { display: grid; gap: 6px; padding: var(--s-6) var(--s-5); border-left: 1px solid var(--border); }
.ab-belief-row li:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 899px) { .ab-belief-row li:nth-child(3) { border-left: 0; padding-left: 0; } .ab-belief-row li:nth-child(n+3) { border-top: 1px solid var(--border); } }
.ab-belief-row .ab-ico { margin-bottom: var(--s-3); }
.ab-belief-row small { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: .06em; color: var(--fg-subtle); }
.ab-belief-row b { font-family: var(--font-display); font-size: var(--t-xl); color: var(--fg); font-weight: 700; }
.ab-belief-text { margin: var(--s-6) 0 0; color: var(--fg-muted); max-width: 62ch; }
.ab-glow { background: radial-gradient(60% 70% at 78% 30%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); }

/* ------------------------------------------------------------ founders */
.ab-founders-head .ab-display { text-transform: uppercase; }
.ab-founders { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--band-border); margin-top: var(--s-7); }
@media (min-width: 860px) { .ab-founders { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ab-founder { padding: var(--s-7) var(--s-6) var(--s-7) 0; display: grid; gap: var(--s-3); align-content: start; }
@media (min-width: 860px) {
  .ab-founder + .ab-founder { padding-left: var(--s-6); border-left: 1px solid var(--band-border); }
}
@media (max-width: 859px) { .ab-founder + .ab-founder { border-top: 1px solid var(--band-border); } }
.ab-founder .ab-ico { width: 56px; height: 56px; margin-bottom: var(--s-3); }
.ab-founder .ab-ico .ico { width: 24px; height: 24px; }
.ab-founder h3 { font-family: var(--font-display); font-size: var(--t-2xl); letter-spacing: var(--tr-tight); margin: 0; }
.ab-founder-role { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: .08em; color: var(--band-accent); margin: 0; }
.ab-founder-role::before { content: '\2013\00a0'; }
.ab-founder p:not(.ab-founder-role) { color: var(--band-fg-muted); margin: var(--s-2) 0 0; font-size: var(--t-sm); line-height: 1.6; max-width: 36ch; }

/* ------------------------------------------------------------ partners strip */
.ab-partners { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .ab-partners { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ab-partner {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.ab-partner:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ab-partner img { width: 56px; height: 56px; object-fit: contain; border-radius: 50%; background: #fff; border: 1px solid var(--border); padding: 3px; flex: none; }
.ab-partner span { display: grid; line-height: 1.35; }
.ab-partner small { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); }
.ab-partner b { font-size: var(--t-md); }
.ab-partner em { font-style: normal; font-size: var(--t-xs); color: var(--fg-subtle); }

/* ------------------------------------------------------------ the line note */
.ab-line-note { margin-top: var(--s-5); }

/* ------------------------------------------------------------ philosophy */
.ab-philosophy { text-align: center; overflow: hidden; }
.ab-philosophy .ab-display { text-transform: uppercase; font-size: var(--t-3xl); }
.ab-script {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-xl);
  color: var(--accent-ink);
  margin: var(--s-3) 0 var(--s-6);
}
.ab-phil-pills { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-3); }
.ab-phil-pills > span {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 16px 6px 6px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
}
.ab-phil-pills .ab-ico { width: 30px; height: 30px; }
.ab-phil-pills .ab-ico .ico { width: 14px; height: 14px; }
.ab-phil-pills i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.ab-phil-lines { display: block; width: min(420px, 80%); height: 80px; margin: 0 auto; overflow: visible; }
.ab-phil-lines path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ab-phil-lines .l1 { stroke: var(--brand); }
.ab-phil-lines .l2 { stroke: var(--accent); }
.ab-phil-lines .l3 { stroke: var(--sprout); }
.ab-every-pill {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: 14px 30px;
  border-radius: var(--r-pill);
  background: var(--band-bg);
  color: var(--band-accent);
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 700;
  letter-spacing: var(--tr-tight);
  box-shadow: var(--shadow-lg);
}
.ab-every-pill .ico { width: 26px; height: 26px; }
.ab-philosophy .lede { margin: var(--s-6) auto 0; max-width: 46ch; }
.ab-philosophy .lede b { color: var(--fg); }
.ab-signoff {
  margin-top: var(--s-8);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.ab-signoff b { color: var(--accent-ink); }

@media (prefers-reduced-motion: reduce) {
  .ab-partner, a.ab-offer-item .ab-offer-go .ico { transition: none; }
}
@media print {
  .ab-lines, .ab-phil-lines, .ab-rings { display: none; }
}