/* ==========================================================================
   Casey's C.O.D.E. — Master Stylesheet
   Loads AFTER Bootstrap 5.3. Brand tokens first, then Bootstrap overrides,
   then site components. Minimal, square, 1px borders, no shadows/gradients.
   ========================================================================== */

/* ---------- 1. Brand tokens ---------- */
:root {
  --bg: #ffffff;
  --text: #000000;
  --accent: #33beff;        /* accents only — never body text on white */
  --muted: #555555;         /* secondary text, passes AA on white */
  --line: #000000;          /* default 1px border color */
  --line-soft: #d9d9d9;     /* subtle separators */
  --surface: #f6f6f6;       /* image wells, quiet backgrounds */

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;

  --max-width: 1080px;
  --section-pad: clamp(4rem, 9vw, 7rem);
  --border: 1px solid var(--line);

  /* ---------- 2. Bootstrap variable overrides ---------- */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.6;
  --bs-font-monospace: var(--font-mono);
  --bs-border-color: var(--line);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-pill: 0;
  --bs-box-shadow: none;
  --bs-link-color: var(--text);
  --bs-link-color-rgb: 0, 0, 0;
  --bs-link-hover-color: var(--text);
  --bs-link-hover-color-rgb: 0, 0, 0;
  --bs-focus-ring-color: rgba(51, 190, 255, .6);
  --bs-secondary-color: var(--muted);
}

/* ---------- 3. Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }

.container-site { max-width: var(--max-width); }

/* Links: black text, accent underline */
a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 3px; }

/* Visible, consistent focus everywhere */
:focus-visible,
.btn:focus-visible,
.form-control:focus,
.form-select:focus {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none;
}

::selection { background: var(--accent); color: var(--text); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--text);
  padding: .5rem 1rem; z-index: 2000; font-family: var(--font-mono);
}
.skip-link:focus { left: 1rem; top: 1rem; }

.blink {
  animation: blink 1.8s step-end infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* ---------- 4. Retro nods: mono labels & section numbers ---------- */
.mono { font-family: var(--font-mono); }

.label {
  font-family: var(--font-mono);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.label-accent {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  border: 1px solid var(--accent);
  border-left-width: 6px;
  padding: .2rem .6rem;
}

.section-num {
  font-family: var(--font-mono);
  font-size: .875rem;
  color: var(--muted);
}
.section-num::after {
  content: "";
  display: inline-block;
  width: 2rem; height: 2px;
  background: var(--accent);
  vertical-align: middle;
  margin-left: .6rem;
}

.accent-rule {
  width: 4rem; height: 4px; border: 0; opacity: 1;
  background: var(--accent);
  margin: 1.25rem 0 1.5rem;
}

/* ---------- 5. Buttons ---------- */
.btn {
  --bs-btn-border-radius: 0;
  --bs-btn-padding-x: 1.4rem;
  --bs-btn-padding-y: .7rem;
  --bs-btn-font-family: var(--font-mono);
  --bs-btn-font-size: .9375rem;
  --bs-btn-font-weight: 600;
  --bs-btn-box-shadow: none;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s;
}

/* Primary: accent background, black text (readable) */
.btn-accent {
  --bs-btn-color: var(--text);
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--text);
  --bs-btn-hover-color: var(--bg);
  --bs-btn-hover-bg: var(--text);
  --bs-btn-hover-border-color: var(--text);
  --bs-btn-active-color: var(--bg);
  --bs-btn-active-bg: var(--text);
  --bs-btn-active-border-color: var(--text);
}

/* Secondary: outline black, accent on hover */
.btn-line {
  --bs-btn-color: var(--text);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--text);
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--text);
  --bs-btn-active-color: var(--text);
  --bs-btn-active-bg: var(--accent);
  --bs-btn-active-border-color: var(--text);
}

/* ---------- 6. Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 1030;
  background: var(--bg);
  border-bottom: var(--border);
}
.site-header .brand img { height: 40px; width: auto; display: block; }

.site-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.site-nav a {
  font-family: var(--font-mono);
  font-size: .875rem;
  text-decoration: none;
  padding: .25rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover,
.site-nav a.active { border-bottom-color: var(--accent); }

@media (max-width: 575.98px) {
  .site-header .brand img { height: 32px; }
  .site-nav { gap: .25rem 1rem; }
  .site-nav a { font-size: .8125rem; }
}

/* Contact strip at the top of the header */
.contact-bar {
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: .8125rem;
  padding-block: .3rem;
}
/* Contact strip (header + footer): icon squares only. On hover/focus the label slides out
   as an overlay beside the square. Nothing reflows, so no square ever moves under the
   pointer, and the label ignores the pointer so neighbouring squares stay reachable. */
.contact-seg { display: inline-flex; vertical-align: middle; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.contact-seg li { position: relative; }
.contact-seg a {
  position: relative;
  display: grid; place-items: center;
  width: 1.875rem; height: 1.875rem;
  border: 1px solid var(--line);
  background: var(--accent); color: #000;
  text-decoration: none;
}
.contact-seg .seg-ico { display: grid; place-items: center; }
.contact-seg .seg-ico .icon { width: .85rem; height: .85rem; }
.contact-seg .seg-txt {
  position: absolute; top: -1px; bottom: -1px;
  right: 100%;                                   /* opens to the LEFT of the square */
  display: flex; align-items: center;
  padding-inline: .65rem;
  border: 1px solid var(--line); border-right: 0;
  background: var(--bg); color: var(--text);
  font-family: var(--font-mono); font-size: .75rem; line-height: 1;
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  clip-path: inset(0 0 0 100%);                  /* collapsed against the square */
  transition: clip-path .3s ease, opacity .2s ease;
}
.contact-seg .seg-num { text-transform: none; letter-spacing: .02em; margin-left: .45rem; color: var(--muted); }
.contact-seg a:focus-visible { z-index: 3; }
.contact-seg a:focus-visible .seg-txt { opacity: 1; clip-path: inset(0); }
@media (hover: hover) {
  .contact-seg a:hover { z-index: 3; }
  .contact-seg a:hover .seg-txt { opacity: 1; clip-path: inset(0); }
}
/* Footer stacks left-aligned below md: open labels to the RIGHT there */
@media (max-width: 767.98px) {
  .contact-seg-foot .seg-txt { right: auto; left: 100%; border-right: 1px solid var(--line); border-left: 0; clip-path: inset(0 100% 0 0); }
}
/* Touch screens: bigger tap targets (labels never show; a tap acts immediately) */
@media (pointer: coarse) {
  .contact-seg { gap: .5rem; }
  .contact-seg a { width: 2.5rem; height: 2.5rem; }
  .contact-seg .seg-ico .icon { width: 1.05rem; height: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { .contact-seg .seg-txt { transition: none; } }

/* Social icon links (inline SVG sprite) */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1em; height: 1em; fill: currentColor; display: block; }
.social-links { display: flex; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.social-links a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; font-size: 1rem;
  color: var(--text); text-decoration: none;
}
.social-links a:hover { color: var(--accent); }
.social-links-lg a { width: 2.25rem; height: 2.25rem; font-size: 1.5rem; }

/* ---------- 7. Sections ---------- */
.section { padding-block: var(--section-pad); }
.section + .section { border-top: 1px solid var(--line-soft); }
.section-title { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: .5rem 0 0; }
.section-intro { max-width: 40rem; font-size: 1.125rem; }

/* ---------- 8. Hero ---------- */
.hero { padding-block: clamp(4rem, 12vw, 8.5rem); }
.hero h1 { font-size: clamp(2.75rem, 8vw, 5rem); letter-spacing: -0.03em; margin-bottom: .5rem; }
.hero .subhead { font-family: var(--font-mono); font-size: clamp(1rem, 2.4vw, 1.25rem); }
.hero .subhead b { font-weight: 700; border-bottom: 3px solid var(--accent); }
.hero .statement { font-size: clamp(1.2rem, 2.6vw, 1.5rem); max-width: 36rem; line-height: 1.45; }
.hero .support { color: var(--muted); max-width: 34rem; }
.hero-mark { max-width: 260px; width: 100%; height: auto; }

/* ---------- 9. Service cards ---------- */
.service-card {
  height: 100%;
  border: var(--border);
  padding: 1.75rem 1.5rem;
  background: var(--bg);
  transition: border-color .15s;
}
.service-card:hover { border-color: var(--accent); }
.service-card h3 { font-size: 1.375rem; margin: .5rem 0 1rem; }
.service-card .letter {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.5rem;
  display: inline-grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--text);
  background: var(--accent);
}
.service-card ul { list-style: none; padding: 0; margin: 0; }
.service-card li { border-top: 1px solid var(--line-soft); }

.service-detail { padding: 0; }
.service-detail summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .4rem 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.service-detail summary::-webkit-details-marker { display: none; }
.service-detail summary::before {
  content: "> ";
  font-family: var(--font-mono);
  color: var(--muted);
  flex-shrink: 0;
}
.service-detail summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform .15s;
}
.service-detail[open] > summary::after { content: "−"; }
.service-detail summary:hover { color: var(--text); }
.service-detail summary:hover::before { color: var(--accent); }
.service-detail > p {
  margin: 0 0 .6rem;
  padding: .35rem 0 .35rem 1.5rem;
  font-size: .9375rem;
  color: var(--muted);
  border-left: 2px solid var(--accent);
}

.pricing-note {
  border: var(--border);
  border-left: 6px solid var(--accent);
  padding: 1rem 1.25rem;
}

/* ---------- 10. Work cards ---------- */
.work-card {
  height: 100%;
  display: flex; flex-direction: column;
  border: var(--border);
  background: var(--bg);
  transition: border-color .15s;
}
.work-card:hover { border-color: var(--accent); }
.work-card .thumb {
  aspect-ratio: 16 / 10;
  background: var(--surface);
  border-bottom: var(--border);
  overflow: hidden;
}
.work-card .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.work-card .body { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.work-card h3 { font-size: 1.25rem; margin: .35rem 0 .5rem; }
.work-card p { margin-bottom: 1rem; }
.work-card .live-link { margin-top: auto; font-family: var(--font-mono); font-size: .875rem; }

.tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.tag {
  font-family: var(--font-mono);
  font-size: .75rem;
  border: 1px solid var(--text);
  padding: .1rem .5rem;
}

/* "Your project here" slot that keeps the grid even */
.work-card.work-cta {
  justify-content: center; align-items: flex-start;
  padding: 2rem 1.5rem;
  border-style: dashed;
}

/* ---------- 11. About ---------- */
.about-copy { max-width: 42rem; }
.values { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; padding: 0; margin: 0; }
.values li { font-family: var(--font-mono); font-size: .875rem; }
.values li::before { content: "■ "; color: var(--accent); }

/* Layout: phones stack head → photos → body; lg+ puts the photos in a right column
   spanning both rows, so the bio starts right under the label */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "photos" "body";
}
.about-head   { grid-area: head; }
.about-photos { grid-area: photos; }
.about-body   { grid-area: body; }

/* Photos: then/now pair. Side by side on phones, stacked on lg+ */
.about-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
  max-width: 32rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 992px) {
  .about-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas: "head photos" "body photos";
    grid-template-rows: auto 1fr;
    column-gap: 3rem;
  }
  .about-photos { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; max-width: none; margin-bottom: 0; }
  .about-photo-then { width: 70%; justify-self: end; }
}

/* Photo */
.about-photo {
  margin: 0;
  border: var(--border);
}
.about-photo img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(20%);
}
.about-photo figcaption {
  border-top: var(--border);
  padding: .75rem 1rem;
  background: var(--surface);
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.6;
}

/* Expandable "More about my background" */
.about-more {
  border-top: 1px solid var(--line-soft);
  padding-top: 1rem;
}
.about-more-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-mono);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .7rem 1.4rem;
  border: 1px solid var(--text);
  background: transparent;
  color: var(--text);
  transition: background-color .15s, border-color .15s;
}
.about-more-toggle::-webkit-details-marker { display: none; }
.about-more-toggle:hover { background: var(--accent); }
.about-more-toggle::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: .875rem;
  color: var(--muted);
  flex-shrink: 0;
}
.about-more[open] .about-more-toggle::after { content: "−"; }

.about-more-body {
  padding-top: 1.5rem;
}
.about-more-intro {
  color: var(--muted);
  font-size: .9375rem;
  max-width: 40rem;
  margin-bottom: 1.5rem;
}

/* Tech history timeline */
.about-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--accent);
}
.about-timeline li {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.about-timeline li:last-child { margin-bottom: 0; }
.timeline-year {
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--muted);
  white-space: nowrap;
  min-width: 4rem;
  padding-top: .2rem;
  flex-shrink: 0;
}
.about-timeline strong { display: block; margin-bottom: .25rem; }
.timeline-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: .05rem .4rem;
  margin-bottom: .35rem;
}
.about-timeline p {
  color: var(--muted);
  font-size: .9375rem;
  margin: 0;
}

/* Resume page */
.resume-top { border-bottom: 1px solid var(--line-soft); padding-bottom: 2rem; }
.resume-role { font-family: var(--font-mono); color: var(--muted); }
.resume {
  border: var(--border);
  border-left: 6px solid var(--accent);
  padding: clamp(1.25rem, 4vw, 2.75rem);
  max-width: 54rem;
}
.resume-head { border-bottom: var(--border); padding-bottom: 1.25rem; margin-bottom: 1.75rem; }
.resume-name { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 .35rem; }
.resume-contact { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .875rem; color: var(--muted); margin: 0; }
.resume-section + .resume-section { margin-top: 2rem; }
.resume-heading {
  font-family: var(--font-mono);
  font-size: .875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding-bottom: .4rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--accent);
}
.resume ul { padding-left: 1.15rem; margin: .35rem 0 0; }
.resume li { margin-bottom: .2rem; }
.resume li::marker { color: var(--accent); }
.resume-org { margin-top: 1.5rem; }
.resume-org:first-of-type { margin-top: 0; }
.resume-org-name { margin: 0; }
.resume-entry { margin-top: 1rem; }
.resume-entry-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 1rem; }
.resume-entry h3 { font-size: 1.0625rem; margin: 0; }
.resume-date { font-family: var(--font-mono); font-size: .8125rem; color: var(--muted); white-space: nowrap; }
.resume-sub { font-size: .875rem; font-style: italic; color: var(--muted); margin: .15rem 0 0; }

@media print {
  .skip-link, .site-header, .site-footer, .resume-top { display: none !important; }
  .section { padding-block: 0; }
  .resume { border: 0; padding: 0; max-width: none; }
  .resume a { text-decoration: none; }
  .resume-entry, .resume-org { break-inside: avoid; }
}

/* ---------- 12. Contact ---------- */
.form-label { font-family: var(--font-mono); font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; }
.form-control, .form-select {
  border: 1px solid var(--text);
  border-radius: 0;
  padding: .7rem .85rem;
  background-color: var(--bg);
}
.form-control:focus, .form-select:focus { border-color: var(--accent); }
.was-validated .form-control:invalid, .form-control.is-invalid,
.was-validated .form-select:invalid, .form-select.is-invalid { border-color: #b00020; }
.invalid-feedback { color: #b00020; font-family: var(--font-mono); font-size: .8125rem; }

.contact-details { border: var(--border); padding: 1.5rem; }
.contact-details dt { font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 400; }
.contact-details dd { margin-bottom: 1rem; }
.contact-details dd:last-child { margin-bottom: 0; }

.phone-big {
  display: inline-block;
  font-family: var(--font-mono); font-size: 1.375rem; font-weight: 700; letter-spacing: .02em;
  text-decoration: none; border-bottom: 3px solid var(--accent); line-height: 1.3;
}
.contact-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; }
.contact-actions .btn { display: inline-flex; align-items: center; }
.contact-actions .icon { width: .95em; height: .95em; }

.form-status { font-family: var(--font-mono); font-size: .875rem; }

/* Spam honeypot: off-screen (not display:none, which some bots skip) */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 13. Footer ---------- */
.site-footer { border-top: var(--border); padding-block: 2.5rem; font-size: .875rem; }
.site-footer .brand img { height: 32px; width: auto; }
.site-footer .site-nav a { font-size: .8125rem; }
.footer-contact { font-style: normal; margin-bottom: .75rem; }

/* ---------- 13b. Digital business card (card.html, shared by QR / NFC) ----------
   Phone-first single card. Reuses .label, .label-accent, .btn-accent, .seg-ico squares
   and .social-links; everything else is scoped to .bizcard. */
.bizcard-wrap {
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.bizcard {
  width: 100%; max-width: 26rem;
  border: var(--border);
  border-top: 6px solid var(--accent);
  background: var(--bg);
  padding: 1.25rem 1.25rem 1.5rem;
}
.bizcard-top { padding-bottom: 1rem; border-bottom: 1px solid var(--line-soft); }
.bizcard-top .brand img { height: 30px; width: auto; display: block; }

.bizcard-id { text-align: center; padding-top: 1.75rem; }
.bizcard-photo {
  width: 9.5rem; height: 9.5rem; object-fit: cover;
  display: block; margin: 0 auto 1.25rem;
  border: var(--border);
  background: var(--surface);
}
.bizcard-name { font-size: clamp(1.75rem, 8vw, 2.25rem); letter-spacing: -0.02em; margin: 0 0 .35rem; }
.bizcard-role { font-family: var(--font-mono); font-size: .875rem; color: var(--muted); margin: 0 0 1rem; }

.bizcard-org {
  text-align: center;
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
}
.bizcard-org-name { font-weight: 700; font-size: 1.125rem; margin: 0 0 .2rem; }
.bizcard-org .subhead { font-family: var(--font-mono); font-size: .875rem; }
.bizcard-org .subhead b { font-weight: 700; border-bottom: 3px solid var(--accent); }

.bizcard-save {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; margin-top: 1.5rem;
  --bs-btn-padding-y: .9rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-color: #000;          /* black on accent in both themes (brand rule) */
  --bs-btn-border-color: #000;
}
.bizcard-save .icon { width: 1.15rem; height: 1.15rem; }

.bizcard-links { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .5rem; }
.bizcard-links a {
  display: flex; align-items: center; gap: .85rem;
  border: var(--border);
  padding: .5rem .85rem .5rem .5rem;
  text-decoration: none;
  transition: border-color .15s;
}
.bizcard-links a::after { content: ">"; font-family: var(--font-mono); color: var(--muted); margin-left: auto; }
.bizcard-links a:hover { border-color: var(--accent); }
.bizcard-links a:hover::after { color: var(--accent); }
.bizcard-links .seg-ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--line);
  background: var(--accent); color: #000;
}
.bizcard-links .seg-ico .icon { width: 1.05rem; height: 1.05rem; }
.bizcard-link-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.bizcard-link-txt .label { font-size: .6875rem; color: var(--muted); }
.bizcard-val { font-family: var(--font-mono); font-size: .9375rem; overflow-wrap: anywhere; }

.bizcard .social-links { margin-top: 1.5rem; gap: 1.5rem; }
.bizcard-foot {
  text-align: center;
  font-family: var(--font-mono); font-size: .8125rem; color: var(--muted);
  margin: 1.25rem 0 0; padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 575.98px) {
  .bizcard-wrap { padding: 0; align-items: stretch; }
  .bizcard { border-left: 0; border-right: 0; border-bottom: 0; }
}
@media print {
  .bizcard-wrap { min-height: 0; display: block; padding: 0; }
  .bizcard .theme-toggle, .bizcard-save { display: none; }
}

/* ---------- 13c. Customer questionnaire + admin (customer.php, customer-admin.php) ----------
   Reuses .label, .section-num, .accent-rule, .pricing-note, .tags, .contact-details,
   .about-more and the form controls from §12. Everything new is prefixed .q- */
.q-page { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.q-narrow { max-width: 48rem; }
.q-h1 { font-size: clamp(2.25rem, 6vw, 3.25rem); letter-spacing: -0.02em; margin: 0; }
.q-h2 { font-size: 1.375rem; margin: 0 0 1rem; }
.q-lead { font-size: 1.125rem; max-width: 40rem; }
.q-note { font-size: .875rem; color: var(--muted); }
.q-grow { flex: 1 1 16rem; min-width: 0; }

.q-alert {
  border: var(--border);
  border-left: 6px solid #b00020;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0 0;
}
.q-alert:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.q-alert-ok { border-left-color: var(--accent); }

/* Sections and questions */
.q-section {
  border-top: var(--border);
  margin-top: 3rem;
  padding-top: 1.5rem;
}
.q-legend {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  width: 100%;   /* Bootstrap floats legends; keeps it below the section rule */
  font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;
  margin: 0 0 .35rem;
}
.q-intro { color: var(--muted); margin-bottom: .5rem; }
.q { margin-top: 1.75rem; }
.q-label { display: block; font-weight: 600; margin-bottom: .5rem; }
.q-hint { font-size: .875rem; color: var(--muted); margin: -.25rem 0 .5rem; }
.q-req { color: var(--muted); }
.q-error { color: #b00020; font-family: var(--font-mono); font-size: .8125rem; margin: .4rem 0 0; }
/* Missed / malformed answer on the questionnaire: a friendly card, not a red scold.
   Text stays in --text (red text fails contrast in dark mode); red is only the edge. */
div.q-error {
  color: var(--text);
  font-family: var(--font-sans); font-size: .9375rem;
  margin-top: .75rem;
  border: 1px solid var(--line-soft);
  border-left: 6px solid #b00020;
  background: var(--surface);
  padding: .65rem .9rem;
}
.q-error-title {
  margin: 0;
  font-family: var(--font-mono); font-size: .8125rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.q-error-text { margin: .2rem 0 0; color: var(--muted); }

/* "Rather talk this through": a quiet tick under each question (and one per section).
   Ticked = counts as answered. :has() does the show/hide, so it works without JS. */
.q-talk {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .6rem;
  font-family: var(--font-mono); font-size: .8125rem; color: var(--muted);
  cursor: pointer;
  transition: color .15s;
}
.q-talk .form-check-input { flex-shrink: 0; margin: 0; width: .95rem; height: .95rem; }
.q-talk:hover, .q-talk:has(input:checked) { color: var(--text); }
.q-talk:has(input:checked) span { border-bottom: 2px solid var(--accent); }
.q:has(> .q-talk input:checked) .form-control,
.q:has(> .q-talk input:checked) .q-opts { opacity: .55; }   /* still editable, just quieter */
.q-talk-sec { margin-top: .75rem; padding: .5rem .8rem; border: 1px dashed var(--line); }
.q-talk-note { display: none; }
.q-section:has(> .q-talk-sec input:checked) > .q { display: none; }
.q-section:has(> .q-talk-sec input:checked) > .q-talk-note {
  display: block;
  margin: 1rem 0 0; padding: .75rem 1rem;
  border-left: 6px solid var(--accent);
  background: var(--surface);
}
@media (pointer: coarse) { .q-talk { padding-block: .35rem; } }
.q-talk-list { border: var(--border); border-left: 6px solid var(--accent); padding: 1rem 1.25rem; }
.q-has-error .form-control { border-color: #b00020; }
.q-has-error .q-opt { border-color: #b00020; }

/* Choices: bordered rows with a big tap area; accent edge when picked */
.q-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); gap: .5rem; }
.q-opts-stack { grid-template-columns: 1fr; }
.q-opt {
  display: flex; align-items: flex-start; gap: .65rem;
  border: 1px solid var(--line-soft);
  padding: .6rem .8rem;
  cursor: pointer;
  line-height: 1.4;
  transition: border-color .15s, background-color .15s;
}
.q-opt:hover { border-color: var(--accent); }
.q-opt:has(input:checked) { border-color: var(--text); border-left: 4px solid var(--accent); background: var(--surface); }
.q-opt .form-check-input { flex-shrink: 0; margin: .15rem 0 0; }
.form-check-input {
  border: 1px solid var(--text);
  background-color: var(--bg);
}
.form-check-input:focus { border-color: var(--text); box-shadow: none; outline: 3px solid var(--accent); outline-offset: 2px; }
/* Black marks on accent (white marks on #33beff fail contrast) */
.form-check-input:checked { background-color: var(--accent); border-color: #000; }
.form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='square' stroke-width='3' d='m5 10 3 3 7-7'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23000'/%3e%3c/svg%3e");
}
@media (pointer: coarse) {
  .q-opt { padding: .8rem .9rem; }
  .q-opt .form-check-input { width: 1.25em; height: 1.25em; margin-top: 0; }
}

/* Save / submit bar */
.q-actions {
  border-top: var(--border);
  margin-top: 3rem;
  padding-top: 1.5rem;
}

/* Floating "Gotta run?" save box. position: sticky keeps it at the bottom of the screen
   while the form scrolls past, then it settles above Submit at the end. Pure CSS. */
.q-float {
  position: sticky; bottom: 1rem; z-index: 1020;
  display: flex; justify-content: flex-end;
  margin-top: 2.5rem;
  pointer-events: none;            /* the empty strip beside the box doesn't block clicks */
}
.q-float-box {
  pointer-events: auto;
  display: grid; grid-template-columns: auto auto; align-items: center; gap: .35rem 1rem;
  background: var(--bg);
  border: var(--border);
  border-left: 6px solid var(--accent);
  padding: .75rem 1rem;
  max-width: 100%;
}
.q-float-title { grid-column: 1; margin: 0; font-weight: 700; }
.q-float-box .btn { grid-column: 2; grid-row: 1 / span 2; }
.q-float-status {
  grid-column: 1; margin: 0;
  font-family: var(--font-mono); font-size: .75rem; color: var(--muted);
  min-height: 1.2em;
}
@media (max-width: 575.98px) {
  .q-float { bottom: 0; margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5); }
  .q-float-box { width: 100%; grid-template-columns: 1fr auto; border: 0; border-top: 3px solid var(--accent); }
}
/* Wide screens: the save box gets its own column to the right of the form and
   sticks below the header as the client scrolls. The intro stays the form's width. */
@media (min-width: 1200px) {
  .q-narrow.q-has-rail { max-width: var(--max-width); }
  .q-has-rail > :not(.q-form) { max-width: 48rem; }
  .q-has-rail .q-form { display: grid; grid-template-columns: minmax(0, 48rem) minmax(0, 1fr); column-gap: 3rem; }
  .q-has-rail .q-main, .q-has-rail .q-actions { grid-column: 1; }
  .q-has-rail .q-float {
    grid-column: 2; grid-row: 1 / span 2;
    display: block; position: static; margin: 0;
    pointer-events: auto;
  }
  .q-has-rail .q-float-box {
    position: sticky; top: 6rem;
    margin-top: 3rem;
    grid-template-columns: 1fr; gap: .6rem;
    border-left-width: 1px; border-top: 6px solid var(--accent);
    padding: 1.1rem 1.1rem 1rem;
  }
  .q-has-rail .q-float-box .btn { grid-column: 1; grid-row: auto; }
  .q-has-rail .q-float-title { font-size: 1.125rem; }
}

/* Read-only answers (thank-you page, admin) */
.q-sum + .q-sum { margin-top: 1.75rem; }
.q-sum-title {
  font-family: var(--font-mono); font-size: .875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  padding-bottom: .4rem; margin-bottom: .75rem;
  border-bottom: 2px solid var(--accent);
}
.q-sum-list { margin: 0; }
.q-sum-list dt { font-weight: 600; font-size: .9375rem; }
.q-sum-list dd { margin: 0 0 .9rem; color: var(--text); overflow-wrap: anywhere; }

/* Footer contact line */
.q-foot-contact { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; padding: 0; margin: 0; font-family: var(--font-mono); font-size: .8125rem; }
.q-foot-contact a { display: inline-flex; align-items: center; gap: .4rem; }
.q-foot-contact .icon { width: .9em; height: .9em; }

/* Admin */
.q-linkbtn {
  background: none; border: 0; padding: .25rem 0;
  font-family: var(--font-mono); font-size: .875rem; color: var(--text);
  border-bottom: 2px solid transparent; cursor: pointer;
}
.q-linkbtn:hover { border-bottom-color: var(--accent); }
.q-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--line-soft);
  margin: 0;
}
.q-table thead th { font-family: var(--font-mono); font-size: .75rem; font-weight: 400; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border-bottom: var(--border); }
.q-table td { vertical-align: middle; }
.q-status { text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.q-status-submitted { background: var(--accent); color: #000; border-color: #000; }
.q-status-expired, .q-status-closed { color: var(--muted); border-color: var(--muted); }
.q-share { border: var(--border); border-top: 6px solid var(--accent); padding: 1.25rem; }
.q-private { border: 1px dashed var(--line); padding: 1rem 1.25rem; }
.q-actions-side { display: grid; gap: .5rem; }
.q-danger summary { cursor: pointer; color: var(--muted); }
.q-steps li { margin-bottom: 1rem; }
.q-steps code, .q-alert code { overflow-wrap: anywhere; }
.q-login { max-width: 26rem; }

@media print {
  .q-body .site-header, .q-body .site-footer, .q-actions, .q-float, .q-actions-side, .q-danger,
  .q-share, [data-print], .q-body .about-more-toggle { display: none !important; }
  .q-body .about-more-body { padding-top: 0; }
  .q-page { padding-block: 0; }
}

/* ---------- 14. Theme toggle button ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  width: 2rem;
  height: 2rem;
  font-family: var(--font-mono);
  font-size: .875rem;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  flex-shrink: 0;
  transition: color .15s, border-color .15s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent); }
.theme-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: none; }

/* show sun in dark, moon in light */
.toggle-sun { display: none; }
.toggle-moon { display: inline; }
[data-bs-theme="dark"] .toggle-sun { display: inline; }
[data-bs-theme="dark"] .toggle-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) .toggle-sun { display: inline; }
  :root:not([data-bs-theme="light"]) .toggle-moon { display: none; }
}

/* ---------- 15. Logo swap (light ↔ dark) ----------
   !important matches Bootstrap's own d-none pattern and beats any
   display:block set by .site-header .brand img (specificity 0,2,1). */
.logo-dark { display: none !important; }

[data-bs-theme="dark"] .logo-dark { display: block !important; }
[data-bs-theme="dark"] .logo-light { display: none  !important; }

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) .logo-dark { display: block !important; }
  :root:not([data-bs-theme="light"]) .logo-light { display: none  !important; }
}

/* ---------- 16. Dark mode tokens ---------- */
:root[data-bs-theme="dark"] {
  --bg:        #111111;
  --text:      #e8e8e8;
  --accent:    #33beff;   /* accent reads well on dark — unchanged */
  --muted:     #8c8c8c;
  --line:      #e8e8e8;
  --line-soft: #272727;
  --surface:   #1c1c1c;
  color-scheme: dark;
}

/* CSS-only fallback for when JS is disabled */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    --bg:        #111111;
    --text:      #e8e8e8;
    --accent:    #33beff;
    --muted:     #8c8c8c;
    --line:      #e8e8e8;
    --line-soft: #272727;
    --surface:   #1c1c1c;
    color-scheme: dark;
  }
}

/* Print always uses the light palette: browsers drop the dark background,
   which would leave light-grey dark-mode text on white paper.
   Kept last so it outranks the dark-mode token rules above. */
@media print {
  :root,
  :root[data-bs-theme],
  :root:not([data-bs-theme="light"]) {
    --bg:        #ffffff;
    --text:      #000000;
    --muted:     #555555;
    --line:      #000000;
    --line-soft: #d9d9d9;
    --surface:   #f6f6f6;
    color-scheme: light;
  }
}