/* ═══════════════════════════════════════════════════════════════════════
   pages.css — about + contact. Built on zarnoush.css.
   ═══════════════════════════════════════════════════════════════════════ */
/* impeccable-disable repeating-stripes-gradient -- .map-frame is an honest ruled-plan placeholder for the office map until the real embed lands. */

/* ── principle rows: a ruled ledger, not an icon-card grid ─────────── */
.principle {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.25rem; align-items: start;
  padding: 1.5rem 0; border-top: 1px solid var(--line);
}
.principle:first-child { border-top: 0; }
.principle .mk {
  width: 3.5rem; height: 3.5rem; border-radius: var(--r-control); display: grid; place-items: center;
  border: 1px solid var(--line-strong); color: var(--gold-deep);
}
.dark .principle .mk { color: var(--gold-hi); }
.principle .mk svg { width: 20px; height: 20px; }

/* ── the story timeline: dated ledger entries ──────────────────────── */
.timeline { position: relative; padding-inline-start: 1.9rem; }
.timeline::before { content: ""; position: absolute; inset-inline-start: .36rem; top: .5rem; bottom: .5rem; width: 1px; background: var(--line-strong); }
.tl-item { position: relative; padding-bottom: 2rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; inset-inline-start: -1.9rem; top: .3rem;
  width: .7rem; height: .7rem; border-radius: 999px; background: var(--gold);
  box-shadow: 0 0 0 4px var(--paper);
}
.tl-item .yr { font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.dark .tl-item .yr { color: var(--gold-hi); }

/* ── founder portrait frame ───────────────────────────────────────── */
.portrait {
  overflow: hidden; border-radius: var(--r-media); box-shadow: var(--lift-media);
  background: var(--ink-900);
}
.portrait img { display: block; width: 100%; height: auto; }

/* ── contact tiles: a ledger of ways to reach a person ─────────────── */
.contact-tile {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 0; border-top: 1px solid var(--line); transition: padding-inline .24s var(--ease);
}
.contact-tile:first-child { border-top: 0; }
a.contact-tile:hover { padding-inline: .6rem; }
.contact-tile .ic {
  width: 42px; height: 42px; border-radius: var(--r-control); flex: 0 0 auto; display: grid; place-items: center;
  border: 1px solid var(--line-strong); color: var(--gold-deep);
}
.dark .contact-tile .ic { color: var(--gold-hi); }
.contact-tile .ic svg { width: 17px; height: 17px; }
.contact-tile .big { font-size: 17px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* ── map placeholder: a ruled plan, honestly a placeholder ────────── */
.map-frame {
  position: relative; overflow: hidden; border-radius: var(--r-media); aspect-ratio: 16 / 7;
  border: 1px solid var(--line); display: grid; place-items: center;
  padding: 1.75rem; text-align: center;
  background-color: #F3F0E9;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 43px, rgba(201,151,63,.06) 43px 44px),
    repeating-linear-gradient(90deg, transparent 0 43px, rgba(201,151,63,.06) 43px 44px),
    linear-gradient(180deg, #F5F1E8, #ECE6D9);
}
.dark .map-frame {
  border-color: rgba(255,255,255,.08); background-color: #0F1824;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 43px, rgba(219,184,113,.07) 43px 44px),
    repeating-linear-gradient(90deg, transparent 0 43px, rgba(219,184,113,.07) 43px 44px),
    linear-gradient(180deg, #121B27, #0C131E);
}

#contact-card { padding: 1.5rem; }
@media (min-width: 640px) { #contact-card { padding: 2rem; } }

.form-note {
  border: 1px solid rgba(201,151,63,.3); background: rgba(201,151,63,.06); color: var(--ink-700);
  border-radius: var(--r-control); padding: 13px 16px; font-size: 12px; line-height: 1.9; max-width: 30rem;
}
.dark .form-note { color: rgba(255,255,255,.78); }
.form-note strong { color: var(--gold-ink); }
.dark .form-note strong { color: var(--gold-hi); }
.fld.field-err { border-color: var(--down) !important; }
.fld.field-ok { border-color: var(--up) !important; }
#form-status[data-tone="ok"] { color: var(--up); }
#form-status[data-tone="err"] { color: var(--down); }

@media (max-width: 639px) {
  .principle { grid-template-columns: 1fr; gap: .75rem; }
}
/* ── /rates/ detail table on a phone: unit moves beside the name, the spread column is dropped, no sideways scrolling ── */
.rates-unit-inline { display: none; font-weight: 500; }
@media (max-width: 639px) {
  #rates-detail-table .rates-col-unit, #rates-detail-table .rates-col-spread { display: none; }
  #rates-detail-table .rates-unit-inline { display: inline; }
  #rates-detail-table .rates-table th, #rates-detail-table .rates-table td { padding: 12px; }
}
@media (min-width: 640px) { #rates-detail-table .rates-table { min-width: 680px; } }