/* ============================================================
   Custom page edits, loaded after styles.css on every page.
   (The design-system editor that once managed this file is gone —
   hand-edited now.)
   ============================================================ */

/* Office addresses are PNGs, not text (anti-scrape) — see CLAUDE.md.
   The light/dark pair is gone: this is a light-only project, and the -dark
   images were still being DOWNLOADED on every page (display:none does not
   stop an <img src> fetch) and then never painted. */
.addr-img { display: inline-block; vertical-align: top; max-width: 100%; height: auto; }

/* ============================================================
   Index hero — 3D chrome quote-marks (Magnific render, echoes the
   quetxt.com logo mark). Floats inside the pastel panel, left of the
   check form's top edge — decor placed against the copy, as in the
   visual references. Static image: no motion, so no reduced-motion
   concerns. Hidden ≤1100px where the columns stack.
   Position picked by the client in devtools — keep these values.
   It sits on the column seam, so it lives and dies with the two-column
   hero: hidden at ≤1023, the same breakpoint where the hero stacks.
   ============================================================ */
.hero-grid { position: relative; }
.hero-chrome {
  position: absolute;
  top: 50px;
  left: calc(52.5% - 200px);
  width: 176px; height: 176px;
  transform: rotate(-10deg);
  filter: drop-shadow(0 18px 26px rgba(15, 18, 20, 0.28));
  z-index: 6;
  pointer-events: none;
}
@media (max-width: 1023px) {
  .hero-chrome { display: none; }
}

/* Checker page — the same chrome mark, here breaking the pastel panel's TOP
   edge on the right instead of a column seam (this hero has no seam: the copy
   runs full width above the form). Hidden with the panel's roomy layout. */
.check-hero-chrome {
  position: absolute;
  top: -46px;
  right: clamp(24px, 7vw, 96px);
  width: 150px; height: 150px;
  transform: rotate(14deg);
  filter: drop-shadow(0 18px 26px rgba(15, 18, 20, 0.28));
  z-index: 6;
  pointer-events: none;
}
@media (max-width: 1023px) {
  .check-hero-chrome { display: none; }
}

/* Contact page — the same mark again, here breaking the panel's BOTTOM edge on
   the left. The copy column is ~80px shorter than the message form beside it,
   so the panel's bottom-left is dead space; the mark fills it and spills past
   the edge. (Checker breaks the top edge, the landing sits on the column seam —
   same move, three different boundaries.) Hidden with the two-column layout. */
.contact-hero-chrome {
  position: absolute;
  bottom: -46px;
  left: clamp(24px, 5vw, 78px);
  width: 150px; height: 150px;
  transform: rotate(-14deg);
  filter: drop-shadow(0 18px 26px rgba(15, 18, 20, 0.28));
  z-index: 6;
  pointer-events: none;
}
@media (max-width: 1023px) {
  .contact-hero-chrome { display: none; }
}

/* ============================================================
   Design-system reference page (html/design-system.html) —
   dev-only, not linked from the nav. Everything on it uses the
   production classes; these rules only lay the specimens out.
   ============================================================ */
.ds-page { background: var(--bg); }
.ds-page main { padding: clamp(40px, 6vw, 90px) 0 120px; }
.ds-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(40px, 5vw, 72px); }
.ds-note { max-width: 640px; }
.ds-note b { color: var(--text); font-weight: 600; }
.ds-section { padding: 40px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 24px; }
.ds-title { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.ds-stack { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.ds-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ds-mono-sample { font-size: 11px; letter-spacing: 0.08em; color: var(--text-muted); }

.ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.ds-swatch { display: flex; align-items: center; gap: 10px; font-size: 10.5px; color: var(--text-muted); }
.ds-chip { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); flex-shrink: 0; }
.ds-c-ink { background: var(--ink); }
.ds-c-ink2 { background: var(--ink-2); }
.ds-c-paper { background: #FFFFFF; }
.ds-c-paper2 { background: var(--paper-2); }
.ds-c-paper3 { background: var(--paper-3); }
.ds-c-line { background: var(--line); }
.ds-c-muted { background: var(--muted); }
.ds-c-muted2 { background: var(--muted-2); }
.ds-c-primary { background: var(--primary); }
.ds-c-primary2 { background: var(--primary-2); }
.ds-c-primarysoft { background: var(--primary-soft); }
.ds-c-tint1 { background: var(--tint-1); }
.ds-c-tint2 { background: var(--tint-2); }
.ds-c-grad { background: var(--grad-soft); }
.ds-c-cyan { background: var(--accent-cyan); }
.ds-c-success { background: var(--success); }
.ds-c-alert { background: var(--alert); }

/* Timeline pills are absolutely positioned in their track — anchor them
   back into flow for the specimen row (relative keeps the hover hint). */
.ds-page .tl-pill { position: relative; }
.ds-row--tl { align-items: flex-start; }

.ds-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.ds-page .feat-card { background: var(--paper-3); }
.ds-plain-card { padding: var(--pad-card); display: flex; align-items: center; }

/* The seam coin is absolute in its grid — static specimen here. */
.ds-coin-static { position: static; }
.ds-row--decor { gap: 40px; }
.ds-row--decor img { display: block; }