/* pages.css: the pages beyond the home page (About, Locations, the three counties, FAQ, Contact, Start Bond Process, the policies, 404).
   Every value reads a token from styles.css or qr.css; nothing here changes the home page. */

/* the form's honeypot: off screen for people, present for bots */
.qr .qr-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.qr .qr-field--area { min-height: 7.5rem; padding-top: var(--space-3); resize: vertical; }

/* a long page-header eyebrow (Proudly Serving Texas for 25+ Years) shares a phone's width with its rules */
@media (max-width: 479px) { .qr-page-header .qr-eyebrow { min-width: 0; max-width: 100%; } .qr-page-header .qr-eyebrow__text { flex: 0 1 auto; min-width: 0; white-space: normal; letter-spacing: 0.16em; text-indent: 0; } .qr-page-header .qr-eyebrow__line { flex: 1 1 1.5rem; min-width: 1.5rem; } }

/* page header actions sit on the dark ground */
.qr-page-header .qr-btn-group { flex: none; }
.qr-page-header__lead { max-width: 40rem; }

/* the home page's office names now open their county pages */
.qr-location__name a { color: inherit; text-decoration: none; }

/* county tiles: three across on Locations, two on a county page */
.qr-county-tiles { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
@media (min-width: 768px) { .qr-county-tiles { grid-template-columns: repeat(3, 1fr); } .qr-county-tiles--two { grid-template-columns: repeat(2, 1fr); } }
.qr-county-tile { text-decoration: none; }
.qr-county-tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qr-county-tile__media[data-plate] img { inset: auto; left: 0; top: 0; height: calc(100% * (1 + var(--parallax-strength))); } /* parallax plate: the photograph is taller than its tile by the plate's travel (motion.js plate()) */
.qr-county-tile .qr-t-h3 { color: var(--white); }
.qr-license--on-dark { color: var(--white); }
.qr-license--on-dark .qr-license__line { background: currentColor; opacity: 0.5; }
.qr-county-tile__go img { width: 1.1rem; height: 1.1rem; }

/* a county page */
.county-body { margin-top: var(--space-6); max-width: 44rem; }
.county-photo { margin-top: var(--space-8); aspect-ratio: 3 / 2; }
.county-motto, .about-motto { margin-top: var(--space-8); }
.qr-office .qr-btn--block { width: 100%; }
.county-gallery { grid-template-columns: 1fr; }
@media (min-width: 768px) { .county-gallery { grid-template-columns: repeat(3, 1fr); } }

/* About: the motto under the mission */
.qr-split__body .qr-t-h4 { margin-top: var(--space-6); }

/* FAQ: native details, so every answer opens with or without scripts */
.qr-faq__list { border-top: 1px solid var(--faq-line); }
.qr-faq__item > summary { list-style: none; cursor: pointer; }
.qr-faq__item > summary::-webkit-details-marker { display: none; }
.qr-faq__item[open] .qr-faq__icon img { transform: rotate(180deg); }
.qr-faq__answer p { margin: 0; }

/* the home page's Service Is in Our DNA band */
.qr-section--dark .qr-intro { color: var(--ink-on-dark); }
.qr-section--dark .service-text { max-width: 46rem; color: var(--white); }
@media (max-width: 479px) { .qr-section--dark .service-text { font-size: 1.0625rem; line-height: 1.6; } }

/* the policies: the CMS text */
.qr-prose h2 strong { font-weight: inherit; color: inherit; }

/* About: two figures, so the row is two columns centred under its eyebrow (the home strip's four-column row left half of it empty),
   and the word after the 3 keeps a space and plain tracking (the stat's -0.08em ran "3Counties" together) */
.qr .proof-strip--pair .proof-strip__row { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 48rem; margin: var(--space-6) auto 0; }
.qr .proof-strip__tail--word { margin-left: 0.24em; letter-spacing: -0.02em; }

/* a county page's office card: the licence line set like the home page's office cards (small, each part kept whole), so
   "Rockwall County License" no longer breaks over two lines beside its rule on a phone */
.qr .qr-office .qr-license { flex-wrap: wrap; row-gap: var(--space-1); font-size: var(--fs-small); color: var(--text-secondary); }
.qr .qr-office .qr-license > span { white-space: nowrap; }
@media (max-width: 399px) { .qr .qr-office .qr-license { column-gap: var(--space-3); } .qr .qr-office .qr-license__line { display: none; } }

/* =====================================================================
   Round seven (2026-11-03 review): photographs as the live site shows them, large and edge to edge, set by four parts
   used on every page. Each reads the tokens below; motion.js moves them.
   1. qr-stage: a split whose photograph (or map) fills its half edge to edge, top to bottom, and stays put (sticky) while the
      words on the other half scroll past it; the photograph drifts a little inside its frame; once the section ends the whole
      thing scrolls away. Under --bp-stage the photograph sits full width above the words.
   2. qr-page-header--photo: a page header over a full-bleed photograph (About, Locations, the three counties), as live.
   3. qr-bleed-gallery: a county's photographs edge to edge, side by side.
   4. qr-map: a Google map under each office, the whole map a link to that office on Google Maps.
   ===================================================================== */
:root {
  --stage-drift: .14;            /* how far a stage's photograph travels inside its frame, as a share of the frame */
  --stage-ratio: 1 / 1;          /* a stage's photograph on a phone, full width above the words */
  --stage-ratio-tall: 4 / 5;     /* ... a portrait (data-shape="tall") */
  --stage-ratio-wide: 4 / 3;     /* ... a map (data-shape="wide") */
  --stage-body-w: 40rem;         /* the words' column at most */
  --header-photo-min-h: min(78svh, 46rem);
  --header-photo-scrim: linear-gradient(180deg, rgb(10 14 24 / .72) 0%, rgb(10 14 24 / .38) 45%, rgb(10 14 24 / .86) 100%);
  --map-h: 15rem;
  --map-h-band: clamp(20rem, 36vw, 30rem);
  --nav-ease: cubic-bezier(.65, 0, .35, 1); /* the header's fold: eased in and out (the compress was harsh) */
  --nav-fold: 560ms;
}
@media (prefers-reduced-motion: reduce) { :root { --stage-drift: 0; --nav-fold: 1ms; } }

/* ---------- the header's fold: everything that changes size eases together ---------- */
@media (min-width: 1280px) {
  .qr .qr-nav { transition: height var(--nav-fold) var(--nav-ease), transform var(--timing-base) var(--ease-out-quart); }
  .qr .qr-nav__topbar { transition: height var(--nav-fold) var(--nav-ease), border-bottom-width var(--nav-fold) var(--nav-ease), opacity var(--nav-fold) var(--nav-ease); }
  .qr .qr-nav.is-scrolled .qr-nav__topbar { opacity: 0; }
  .qr .qr-nav__menu, .qr .qr-nav__brand { transition: width var(--nav-fold) var(--nav-ease), background-color var(--timing-fast), color var(--timing-fast); }
  .qr .qr-nav__main { transition: background-color var(--nav-fold) var(--nav-ease); }
}

/* ---------- 1. the stage ---------- */
.qr .qr-stage { display: grid; padding-block: 0; }
.qr .qr-stage__media { position: relative; min-width: 0; }
.qr .qr-stage__frame { position: relative; overflow: hidden; aspect-ratio: var(--stage-ratio); background: var(--surface-dark); }
.qr .qr-stage__media[data-shape="tall"] .qr-stage__frame { aspect-ratio: var(--stage-ratio-tall); }
.qr .qr-stage__media[data-shape="wide"] .qr-stage__frame { aspect-ratio: var(--stage-ratio-wide); }
@media (min-width: 768px) { .qr .qr-stage { --stage-ratio: 3 / 2; --stage-ratio-tall: 1 / 1; --stage-ratio-wide: 16 / 9; } }
.qr .qr-stage__frame > img { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% * (1 + var(--stage-drift))); object-fit: cover; will-change: transform; }
.qr .qr-stage__frame > .qr-map { position: absolute; inset: 0; height: auto; }
.qr .qr-stage__body { display: flex; flex-direction: column; justify-content: center; gap: var(--space-5); min-width: 0; padding: var(--section-y) var(--gutter); }
.qr .qr-stage__body > * { max-width: var(--stage-body-w); }
.qr .qr-stage__body .qr-t-body + .qr-t-body { margin-top: calc(var(--space-2) * -1); }
.qr .qr-stage__body .qr-t-feature { margin-bottom: var(--space-5); }
.qr .qr-stage__body .qr-t-h4 { margin-top: var(--space-5); }
.qr .qr-stage__body .qr-office { width: 100%; margin-top: var(--space-5); }
@media (min-width: 992px) {
  .qr .qr-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 120vh; }
  .qr .qr-stage__frame, .qr .qr-stage__media[data-shape] .qr-stage__frame { position: sticky; top: 0; height: 100vh; aspect-ratio: auto; }
  .qr .qr-stage__body { padding: calc(var(--section-y) + var(--nav-row-h)) var(--gutter) var(--section-y) var(--space-9); }
  .qr .qr-stage--media-left .qr-stage__body { padding-inline: var(--space-9) var(--gutter); }
  .qr .qr-stage--media-right .qr-stage__media { order: 2; }
  .qr .qr-stage--media-right .qr-stage__body { padding-inline: var(--gutter) var(--space-9); align-items: flex-end; }
  .qr .qr-stage--media-right .qr-stage__body > * { width: 100%; }
}
@media (min-width: 1440px) { .qr .qr-stage__body { padding-inline: var(--space-10) var(--gutter); } .qr .qr-stage--media-right .qr-stage__body { padding-inline: var(--gutter) var(--space-10); } }
.qr .qr-stage + .qr-stage { border-top: 0; }

/* the stage's words over the dark ground */
.qr .qr-section--dark.qr-stage .qr-t-h2, .qr .qr-section--dark.qr-stage .service-text { color: var(--white); }
.qr .qr-section--dark.qr-stage .service-text { max-width: var(--stage-body-w); }

/* the profile's name and role inside a stage (About: Glen Cox) */
.qr .qr-stage .qr-profile__role { margin-top: calc(var(--space-3) * -1); }
.qr .qr-stage .qr-profile__bio { margin-top: var(--space-2); }

/* ---------- 2. the photo page header ---------- */
.qr .qr-page-header--photo { position: relative; display: flex; align-items: flex-end; min-height: var(--header-photo-min-h); overflow: hidden; isolation: isolate; }
.qr .qr-page-header--photo > .qr-container { position: relative; z-index: 1; }
.qr .qr-page-header__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.qr .qr-page-header__media img { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% * (1 + var(--parallax-strength))); object-fit: cover; }
.qr .qr-page-header__media::after { content: ""; position: absolute; inset: 0; background: var(--header-photo-scrim); }
@media (prefers-reduced-motion: no-preference) { html.js .qr-page-header__media img { transform: scale(var(--settle-scale)); } }

/* ---------- 3. the edge-to-edge gallery ---------- */
.qr .qr-bleed-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hairline); background: var(--surface-page); }
.qr .qr-bleed-gallery__item { margin: 0; aspect-ratio: 4 / 5; }
@media (min-width: 992px) { .qr .qr-bleed-gallery { grid-template-columns: repeat(var(--gallery-n, 4), 1fr); } .qr .qr-bleed-gallery__item { aspect-ratio: auto; height: min(80vh, 44rem); } }
@media (max-width: 991.98px) { .qr .qr-bleed-gallery--odd .qr-bleed-gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; } }

/* ---------- 4. the map ---------- */
.qr .qr-map { position: relative; height: var(--map-h); overflow: hidden; background: var(--surface-sunken); border: var(--hairline) solid var(--border-soft); }
.qr .qr-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.02); transition: filter var(--dur-base) var(--ease-in-out); }
.qr .qr-map__link { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: flex-start; padding: var(--space-3); text-decoration: none; }
.qr .qr-map__chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.25rem; padding: 0 var(--space-4); background: var(--surface-inverse); color: var(--text-inverse); font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-nav); text-transform: uppercase; transition: background-color var(--dur-fast); }
.qr .qr-map__chip img { width: 1rem; height: 1rem; filter: invert(1); }
.qr .qr-map__link:hover .qr-map__chip, .qr .qr-map__link:focus-visible .qr-map__chip { background: var(--accent); color: var(--text-on-accent); }
.qr .qr-map__link:hover ~ iframe, .qr .qr-map:hover iframe { filter: none; }
.qr .qr-map__link:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.qr .qr-map--band { height: var(--map-h-band); border-inline: 0; }
.qr .qr-stage__frame > .qr-map { border: 0; }

/* ---------- the reviews: a row that moves sideways, each review whole, no photograph (round seven) ---------- */
.qr .proof-head { text-align: center; }
.qr .proof-head .qr-t-h2 { margin-top: var(--space-5); }
.qr .proof-lead { max-width: 44rem; margin: var(--space-5) auto 0; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-secondary); }
.qr .proof-reviews { margin-top: var(--space-8); }
.qr .proof-track { --tile-gap: var(--space-4); grid-auto-columns: var(--track-tile-w); gap: var(--tile-gap); align-items: start; }
.qr .proof-track .proof-review .qr-review__quote { font-size: var(--fs-body); }
@media (min-width: 768px) { .qr .proof-track { --tile-gap: var(--space-5); grid-auto-columns: calc((100% - var(--tile-gap)) / 2); align-items: stretch; } }
@media (min-width: 992px) { .qr .proof-track { grid-auto-columns: calc((100% - var(--tile-gap) * 2) / 3); } }
@media (min-width: 1680px) { .qr .proof-track { grid-auto-columns: calc((100% - var(--tile-gap) * 3) / 4); } }
.qr .proof-controls { margin-top: var(--space-6); }
.qr .proof-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-7); margin-top: var(--space-6); }

/* ---------- the figures strip: dividers between the figures, drawn as they arrive (round seven) ---------- */
@media (min-width: 992px) {
  .qr .proof-strip .qr-stats-row__item { position: relative; }
  .qr .proof-strip .qr-stats-row__item + .qr-stats-row__item::before { content: ""; position: absolute; left: calc(var(--space-4) * -.5); top: 10%; bottom: 10%; width: var(--hairline); background: var(--line-soft); transform-origin: 50% 0; transform: scaleY(var(--divide, 1)); }
}
.qr .proof-strip__mark { display: block; width: 2.5rem; height: 2px; margin: var(--space-2) auto 0; background: var(--accent); transform-origin: 50% 50%; transform: scaleX(var(--mark, 1)); }
.qr .proof-strip--four .proof-strip__row { margin-top: var(--space-6); }
@media (min-width: 992px) { .qr .proof-strip--four .proof-strip__row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- FAQ: one answer open in a list, each opening and closing on an ease ---------- */
.qr .qr-faq__answer { overflow: hidden; }
.qr .qr-faq__item .qr-faq__icon img { transition: transform var(--nav-fold) var(--nav-ease); }
.qr .has-fold .qr-faq__item[open]:not(.is-open) .qr-faq__icon img { transform: none; }
.qr .qr-stage .glen-statement { margin-bottom: var(--space-6); }
/* the review row on a phone (round seven): the row takes the height of the review in view and eases to the next (ui.js, .is-fit) */
@media (max-width: 767.98px) { .qr .proof-track.is-fit { overflow-y: hidden; transition: height var(--dur-base) var(--ease-in-out); } }
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) { .qr .proof-track.is-fit { transition: none; } }
/* About's header fills the screen (round seven) */
.qr .qr-page-header--full { min-height: 100vh; min-height: 100svh; }

/* =====================================================================
   The type scale (round seven: one look per heading level, site-wide). The tag decides the look; every heading on every page
   takes one of these five, and no section sets its own size:
   H1, display:    --fs-display, regular, tight tracking (the hero and every page header; qr.css .qr-t-hero / .qr-page-header__title)
   H2, section:    --fs-h2, semibold, --ls-heading (every section title, the FAQ's group titles and the policies' sections included)
   H3, sub-head:   --fs-h4, semibold, --ls-heading (a heading inside a section: What to Have Ready, More Than Just Bail Bonds, a county tile)
   H3, item title: --fs-item, semibold (the title of one item in a row of cards or steps: an office's county name, a step's title)
   Statement:      Oswald, --fs-feature, uppercase (.qr-t-feature: a line set as display type, not a heading)
   Eyebrows (.qr-eyebrow), labels and captions stay as they are: they are not headings.
   ===================================================================== */
:root { --fs-item: 1.125rem; }
.qr main h2, .qr .qr-t-h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: var(--fw-semibold); letter-spacing: var(--ls-heading); text-transform: none; }
.qr main h3, .qr .qr-t-h3 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: var(--fw-semibold); letter-spacing: var(--ls-heading); text-transform: none; }
.qr main :is(h3.qr-location__name, h3.qr-scroll-steps__title) { font-size: var(--fs-item); line-height: var(--lh-snug); font-weight: var(--fw-semibold); letter-spacing: 0; }
.qr .qr-prose h2 { margin-top: var(--space-8); }
.qr .qr-prose h2:first-child { margin-top: 0; }
.qr .qr-office .qr-location__office { margin: 0; }

/* Turnstile's slot (ui.js): nothing to see unless Cloudflare wants the visitor to tick it (2026-11-03) */
.qr .qr-turnstile { max-width: 100%; }
.qr .qr-turnstile.is-shown { margin-top: var(--space-6); }