/* FAQ page (/faq). Page-only classes are prefixed .faq-. Tokens only, no raw hex. */

/* ---------- Hero search ---------- */
.faq-search { margin-top: var(--sp-6); max-width: 40rem; }
.faq-search__label {
  display: block; margin-bottom: var(--sp-2);
  font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 800;
  font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--fg);
}
.faq-search__box { position: relative; }
.faq-search__icon {
  position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
  width: 1.35rem; height: 1.35rem; color: var(--c-black); pointer-events: none;
}
.faq-search__input.input {
  padding-left: 3.25rem; padding-right: 3.5rem;
  font-size: var(--fs-md); font-weight: 500;
  border: 2px solid var(--c-black); border-radius: var(--r);
  box-shadow: 0 3px 0 var(--c-black);
  background: var(--c-white);
}
.faq-search__input.input::placeholder { color: var(--c-muted); font-weight: 400; }
.faq-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.faq-search__input.input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.faq-search__clear {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--c-black); cursor: pointer;
}
.faq-search__clear:hover { background: var(--c-paper); }
.faq-search__clear[hidden] { display: none; }
.faq-search__hint { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--muted); }
.faq-search__hint kbd { background: var(--c-white); border: 1px solid var(--c-line-strong); box-shadow: 0 1px 0 var(--c-line-strong); color: var(--fg); }

/* Live preview of matching questions: floats over the page, so nothing below it moves */
.faq-suggest {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + .5rem);
  padding: var(--sp-2); background: var(--c-white); color: var(--c-black);
  border: 2px solid var(--c-black); border-radius: var(--r); box-shadow: var(--sh-3);
}
.faq-suggest[hidden] { display: none; }
.faq-suggest__head {
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 800;
  font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted);
}
.faq-suggest__list { list-style: none; padding: 0; margin: 0; }
.faq-suggest__list { max-height: min(26rem, 55vh); overflow-y: auto; overscroll-behavior: contain; }
.faq-suggest__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.faq-suggest__a { display: block; margin-top: .2rem; font-weight: 400; font-size: var(--fs-xs); line-height: 1.45; color: var(--c-muted); }
.faq-suggest__link {
  display: block;
  min-height: 2.75rem; padding: .6rem var(--sp-3); border-radius: var(--r-sm);
  color: var(--c-black); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); line-height: 1.35;
}
.faq-suggest__link:hover, .faq-suggest__link:focus-visible { background: var(--c-paper); }
.faq-suggest__link:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.faq-suggest__q { min-width: 0; }
.faq-suggest__topic { flex: none; font-size: var(--fs-xs); font-weight: 500; color: var(--c-muted); white-space: nowrap; }
.faq-suggest__none { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); color: var(--c-muted); }
.faq-suggest__none--partial { margin-top: var(--sp-1); padding-top: var(--sp-3); border-top: 1px dashed var(--c-line); font-size: var(--fs-xs); }
.faq-suggest__none a { color: var(--c-black); font-weight: 600; text-underline-offset: .2em; }
.faq-suggest__all {
  display: flex; align-items: center; gap: .4rem; width: 100%; min-height: 2.75rem; margin-top: var(--sp-1);
  padding: .5rem var(--sp-3); border: 0; border-top: 1px solid var(--c-line); border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: none; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 800; font-size: var(--fs-xs);
  letter-spacing: .06em; text-transform: uppercase; color: var(--c-black);
}
.faq-suggest__all:hover, .faq-suggest__all:focus-visible { background: var(--c-yellow-100); }
.faq-suggest__all .icon { width: 1rem; height: 1rem; }
@media (max-width: 599px) {
  .faq-suggest__top { flex-direction: column; gap: .1rem; }
}
.faq-search__popular { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-4); }
.faq-search__popular-label { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.faq-search__chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.faq-chip { min-height: 2.75rem; padding-inline: 1rem; cursor: pointer; font-family: var(--font-text); transition: border-color var(--t-fast), background-color var(--t-fast); }
.faq-chip:hover { border-color: var(--c-black); background: var(--c-white); }

/* Hero: the "most asked" card starts level with the eyebrow and runs beside the search,
   so the right half above the fold carries real answers instead of empty paper. */
@media (min-width: 960px) { .faq-hero .hero__aside { align-self: start; } }
.faq-quick { padding-bottom: var(--sp-5); }
.faq-quick .faq-quick__list { margin-top: var(--sp-2); }
.faq-quick .faq-quick__list li { display: block; padding: 0; }
.faq-quick__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 2.75rem; padding: var(--sp-3) var(--sp-2); margin-inline: calc(var(--sp-2) * -1);
  border-radius: var(--r-sm); text-decoration: none; color: inherit;
  transition: background-color var(--t-fast);
}
.fact-card a.faq-quick__row { color: inherit; }
.faq-quick__row:hover { background: var(--c-ink-700); }
.faq-quick__row > span { flex: 1; min-width: 0; }
.faq-quick__go { flex: none; width: 1rem; height: 1rem; margin-left: calc(var(--sp-4) * -.5); color: var(--c-muted-dark); transition: transform var(--t-fast), color var(--t-fast); }
.faq-quick__row:hover .faq-quick__go, .faq-quick__row:focus-visible .faq-quick__go { color: var(--c-yellow); transform: translateX(2px); }
.faq-quick__row > span { color: var(--c-white); font-weight: 600; font-size: var(--fs-sm); line-height: 1.35; }
.faq-quick__row > span small { display: block; margin-top: .1rem; font-size: var(--fs-xs); font-weight: 500; color: var(--c-muted-dark); }
.faq-quick__row:hover > span { text-decoration: underline; text-decoration-color: var(--c-yellow); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.faq-quick__row > strong {
  flex: none; font-family: var(--font-display); font-stretch: 115%; font-weight: 900; font-size: var(--fs-xl); line-height: 1;
  color: var(--c-white); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.faq-quick__row > strong small { font-size: .5em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted-dark); margin-right: .3em; vertical-align: .25em; }
.fact-card.faq-quick a.btn { color: var(--btn-fg); }
.faq-quick .btn--primary { --btn-bd: var(--c-yellow); --btn-sh: var(--sh-hard-dark, none); }
.faq-quick__actions { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-ink-700); }
.faq-quick__call {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem;
  font-weight: 600; font-size: var(--fs-sm); color: var(--c-white); text-decoration: underline; text-decoration-color: var(--c-ink-500, var(--c-muted-dark)); text-underline-offset: .25em;
  font-variant-numeric: tabular-nums;
}
.fact-card a.faq-quick__call { color: var(--c-white); }
.faq-quick__call:hover { text-decoration-color: var(--c-yellow); }
.faq-quick__call .icon { width: 1.05rem; height: 1.05rem; color: var(--c-yellow); }

/* ---------- Layout: topics rail + answers ---------- */
.faq-main { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.faq-side { min-width: 0; }
@media (min-width: 1024px) {
  .faq-layout { grid-template-columns: 17.75rem minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 4vw, 5rem); }
  .faq-side { position: sticky; top: calc(var(--header-h) + var(--sp-5)); display: grid; gap: var(--sp-5); }
}
.faq-results { min-width: 0; max-width: 52rem; }

/* Topics nav */
.faq-toc__title {
  font-family: var(--font-display); font-stretch: 112%; font-weight: 850; font-size: var(--fs-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-3);
}
.faq-toc__list { list-style: none; padding: 0; display: grid; gap: 2px; }
.faq-toc__link {
  position: relative; display: flex; align-items: center; gap: var(--sp-3);
  min-height: 2.75rem; padding: .5rem .75rem; border-radius: var(--r-sm);
  color: var(--text); text-decoration: none; font-weight: 600; font-size: var(--fs-sm);
}
/* Only the hover fades. The "current topic" swaps instantly, row and count together, so two topics
   never look lit at once while the reader scrolls. */
.faq-toc__link:hover:not([aria-current="true"]) { transition: background-color var(--t-fast); }
.faq-toc__link .icon { flex: none; width: 1.15rem; height: 1.15rem; color: var(--muted); }
.faq-toc__link:hover { background: var(--c-paper); color: var(--fg); }
.faq-toc__link[aria-current="true"] { background: var(--c-black); color: var(--c-white); }
.faq-toc__link[aria-current="true"] .icon { color: var(--c-yellow); }
.faq-toc__count {
  margin-left: auto; min-width: 1.75rem; padding: .1rem .45rem; border-radius: var(--r-pill);
  background: var(--c-paper); color: var(--fg); text-align: center;
  font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 800; font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.faq-toc__link[aria-current="true"] .faq-toc__count { background: var(--c-yellow); color: var(--c-black); }
.faq-toc__link.is-empty { opacity: .45; pointer-events: none; }

/* Under the topics: one quiet line that points to the "Ask us" panel, not a second copy of it */
.faq-help { padding: var(--sp-4) .75rem 0; border-top: 1px solid var(--line); }
.faq-help__title { font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 850; font-size: var(--fs-base); color: var(--fg); }
.faq-help p:not(.faq-help__title) { margin-top: .25rem; font-size: var(--fs-sm); color: var(--muted); }
.faq-help p.faq-help__links { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; margin-top: var(--sp-2); }
.faq-help__links a { min-height: 2.5rem; }
.faq-help__links .link-arrow .icon { width: 1rem; height: 1rem; transition: transform var(--t-fast); }
.faq-help__links .link-arrow:hover .icon { transform: translateX(3px); }
.faq-help__call { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--fg); text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: .25em; font-variant-numeric: tabular-nums; }
.faq-help__call:hover { text-decoration-color: var(--c-yellow); }
.faq-help__call .icon { width: 1rem; height: 1rem; }

/* Desktop hero: a tighter headline, so the topics and first answers arrive sooner */
@media (min-width: 1024px) {
  .faq-hero .hero__title { font-size: clamp(2.6rem, .8rem + 3vw, 3.55rem); }
  .faq-hero.hero--page { padding-block: clamp(1.75rem, 1rem + 2vw, 3rem); }
  .faq-hero .hero__lede { margin-top: var(--sp-4); max-width: 40rem; }
  .faq-hero__copy { align-self: start; }
  .faq-quick__row { padding-block: .6rem; }
  /* Book + call share one row, so the card ends level with the search chips */
  .faq-quick__actions { grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-4); }
  .faq-quick__actions .btn--block { width: auto; padding-inline: var(--sp-6, 1.75rem); }
  .faq-quick__call { justify-content: flex-start; }
}

/* Phones & tablets: topics collapse into one sticky "current topic" button under the header.
   Tapping it drops down every topic, full names and counts, so no label is ever cut off. */
.faq-toc__switch, .faq-toc__short { display: none; }
@media (max-width: 1023px) {
  .faq-side {
    position: sticky; top: var(--header-h); z-index: 5;
    margin-inline: calc(var(--gutter) * -1); padding: var(--sp-2) var(--gutter);
    background: var(--c-white); border-bottom: 1px solid var(--c-line);
  }
  .faq-help, .faq-toc__title { display: none; }
  .faq-toc { position: relative; }
  .faq-toc__switch {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center;
    column-gap: var(--sp-3); width: 100%; min-height: 3rem; padding: .35rem .4rem .35rem .9rem;
    border: 2px solid var(--c-black); border-radius: var(--r-sm); background: var(--c-white); color: var(--c-black);
    text-align: left; cursor: pointer; font: inherit;
  }
  .faq-toc__switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .faq-toc__switch-k { grid-column: 1; grid-row: 1; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); line-height: 1.2; }
  .faq-toc__switch-v {
    grid-column: 1; grid-row: 2; min-width: 0; text-wrap: balance;
    font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 850; font-size: var(--fs-sm); line-height: 1.3;
  }
  .faq-toc__switch-all {
    grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: .35rem;
    min-height: 2.5rem; padding: 0 .75rem; border-radius: var(--r-xs, 4px); background: var(--c-black); color: var(--c-white);
    font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .04em; white-space: nowrap;
  }
  .faq-toc__switch-all .icon { width: 1rem; height: 1rem; color: var(--c-yellow); transition: transform var(--t-fast); }
  .faq-toc.is-open .faq-toc__switch-all .icon { transform: rotate(180deg); }
  /* The dropdown */
  .faq-toc__list {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + .4rem); z-index: 6;
    max-height: calc(100vh - var(--header-h) - 6rem); overflow-y: auto; overscroll-behavior: contain;
    padding: var(--sp-2); background: var(--c-white); border: 2px solid var(--c-black); border-radius: var(--r-sm); box-shadow: var(--sh-3);
  }
  .faq-toc.is-open .faq-toc__list { display: grid; gap: 2px; }
  .faq-toc__link.is-empty { display: none; }
}



/* Results bar */
.faq-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding-bottom: var(--sp-4); border-bottom: 3px solid var(--c-black);
}
.faq-bar__status {
  font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 800;
  font-size: var(--fs-sm); color: var(--fg);
}
.faq-bar__toggle { flex: none; }

/* ---------- Topic groups ---------- */
.faq-group { padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.faq-group[hidden] { display: none; }
.faq-group__head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.faq-group__head h2 { margin: 0; }
.faq-group__sub { margin-top: .15rem; font-size: var(--fs-sm); color: var(--muted); }
.faq-item { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.faq-item[hidden] { display: none; }
@media (max-width: 1023px) {
  .faq-group, .faq-item { scroll-margin-top: calc(var(--header-h) + 4.5rem); }
}
.faq-item .accordion__summary { position: relative; display: block; text-wrap: pretty; }
/* The toggle sits top-right beside the question only, so the short answer can use the full width */
.faq-item .accordion__summary::after { position: absolute; top: calc(var(--sp-5) - .4rem); right: 0; }
.faq-item__q { padding-right: 3.5rem; min-height: 2.15rem; }
.faq-item__badge + .faq-item__q { min-height: 0; }
.faq-item__a { max-width: 48rem; }
/* Question + its one-line answer, always visible: scanning the page answers most questions */
.faq-item__head { display: block; min-width: 0; }
.faq-item__q { display: block; }
.faq-item__a {
  display: block; margin-top: .55rem; padding-left: .85rem; border-left: 3px solid var(--c-yellow);
  font-family: var(--font-text); font-stretch: normal; font-weight: 600; font-size: var(--fs-base); line-height: 1.5;
  color: var(--text); letter-spacing: 0; text-transform: none;
}
.faq-item__badge {
  display: inline-block; margin-bottom: .45rem; padding: .2rem .5rem; border-radius: var(--r-xs);
  background: var(--c-black); color: var(--c-yellow);
  font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 800; font-size: .6875rem; line-height: 1.2;
  letter-spacing: .08em; text-transform: uppercase;
}
.faq-item .accordion__summary:hover { text-decoration: none; }
.faq-item .accordion__summary:hover .faq-item__q { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--c-yellow); text-underline-offset: .25em; }
.faq-item[open] > .accordion__summary { color: var(--fg); padding-bottom: var(--sp-4); }
/* The fine print lines up under the short answer */
.faq-item .accordion__body { padding-left: calc(.85rem + 3px); }
@media (max-width: 479px) {
  .faq-item__a { font-size: var(--fs-sm); padding-left: .7rem; }
  .faq-item .accordion__body { padding-left: 0; }
}

/* ---------- Inside answers ---------- */
.faq-item .accordion__body { max-width: 46rem; font-size: var(--fs-base); line-height: var(--lh-body); }
.faq-item .accordion__body strong { color: var(--fg); }
.faq-item .accordion__body a:not(.link-arrow):not(.btn) { color: var(--fg); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.faq-item .accordion__body a:not(.link-arrow):not(.btn):hover { text-decoration-color: var(--c-yellow); text-decoration-thickness: 2px; }
.faq-item .check-list, .faq-item .x-list { gap: var(--sp-2); }

/* Label/value rows (sizes, fees, windows) */
.faq-dims { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.faq-dims > li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: .65rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm);
}
.faq-dims > li > span { font-weight: 600; color: var(--fg); min-width: 0; }
.faq-dims > li > span small { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; margin-top: .1rem; }
.faq-dims > li > strong {
  flex: none; text-align: right; font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 850;
  font-size: var(--fs-base); color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 479px) { .faq-dims > li > strong { white-space: normal; max-width: 50%; } }

/* Price tables inside answers sit tight */
.faq-table { font-size: var(--fs-sm); }
/* Phones: the nickname sits on its own line under the name, so no leading middle dot */
@media (max-width: 719px) {
  .faq-table.price-table--stack tbody th small { display: block; margin: .2rem 0 0; white-space: normal; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
  .faq-table.price-table--stack tbody th small::before { content: none; }
}

/* Answer you jumped to gets a brief yellow flash */
@media (prefers-reduced-motion: no-preference) {
  .faq-item.is-flash { animation: faq-flash 1.4s ease-out; }
  @keyframes faq-flash { 0%, 30% { background: var(--c-yellow-100); } 100% { background: transparent; } }
}
.faq-item .table-wrap { margin-top: var(--sp-4); }

/* Two routes side by side (heavy materials) */
.faq-options { display: grid; gap: var(--sp-3); }
@media (min-width: 600px) { .faq-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.faq-option { padding: var(--sp-4); background: var(--c-paper); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.faq-option > * + * { margin-top: .5rem; }
.faq-option__label { font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.faq-option__title { margin-top: .15rem; font-family: var(--font-display); font-stretch: 108%; font-weight: 850; font-size: var(--fs-base); color: var(--fg); }
.faq-option .faq-dims { border-top-color: var(--c-line-strong); }
.faq-option .faq-dims > li { border-bottom-color: var(--c-line-strong); padding: .5rem 0; }
.faq-option__note { color: var(--text); line-height: 1.5; }
.faq-option__eg { padding: var(--sp-3); background: var(--c-white); border-radius: var(--r-xs); font-size: var(--fs-xs); color: var(--muted); }
.faq-option__eg strong { display: block; margin-top: .15rem; font-size: var(--fs-sm); color: var(--fg); font-variant-numeric: tabular-nums; }

/* Side-by-side price comparison: the cheaper row is marked */
.faq-dims--compare > li.is-win { margin-inline: calc(var(--sp-3) * -1); padding-inline: var(--sp-3); background: var(--c-yellow-100); border-radius: var(--r-xs); }
.faq-dims--compare > li:not(.is-win) > strong { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }

/* Smaller second list (only-if fees) */
.faq-subhead { margin-top: var(--sp-5) !important; font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.faq-subhead + .faq-dims { margin-top: var(--sp-2); }
.faq-dims--compact > li { padding: .45rem 0; }
.faq-dims--compact > li > strong { font-size: var(--fs-sm); }
@media (min-width: 720px) {
  .faq-dims--compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); }
}

/* Arrival windows: weekday time first, Saturday beside it */
.faq-wintable-wrap { overflow-x: auto; }
.faq-wintable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.faq-wintable th, .faq-wintable td { padding: .6rem .75rem .6rem 0; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.faq-wintable thead th { padding-top: 0; font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--c-black); }
.faq-wintable tbody th { font-weight: 600; color: var(--fg); }
.faq-wintable tbody td:nth-child(2) { font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 850; font-size: var(--fs-base); color: var(--fg); }
.faq-wintable tbody td:nth-child(3) { color: var(--muted); }

/* Steps (junk removal) */
.faq-steps { list-style: none; padding: 0; counter-reset: faqstep; display: grid; gap: var(--sp-3); }
.faq-steps > li { counter-increment: faqstep; position: relative; padding-left: 2.75rem; min-height: 2rem; }
.faq-steps > li::before {
  content: counter(faqstep, decimal-leading-zero); position: absolute; left: 0; top: -.05rem;
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-sm);
  background: var(--c-black); color: var(--c-yellow);
  font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 850; font-size: var(--fs-xs);
}

/* Service areas */
.faq-areas { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
@media (min-width: 720px) { .faq-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); } }
.faq-areas > li { padding: var(--sp-3) var(--sp-4); background: var(--c-paper); border-radius: var(--r-sm); font-size: var(--fs-sm); line-height: 1.5; }
.faq-areas strong { display: block; font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 850; margin-bottom: .2rem; }

/* Prohibited list: two columns on wide screens */
@media (min-width: 720px) { .faq-nolist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); } }
.faq-nolist > li { font-size: var(--fs-sm); }

/* Copy-link row (added by faq.js) */
.faq-item__share { padding-top: var(--sp-2); }
.faq-item__copy {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: 0;
  border: 0; background: none; cursor: pointer;
  font: 600 var(--fs-xs)/1 var(--font-text); color: var(--muted);
  text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: .25em;
}
.faq-item__copy:hover { color: var(--fg); text-decoration-color: var(--c-yellow); }
.faq-item__copy .icon { width: 1rem; height: 1rem; }

/* Search hit highlight */
mark.faq-hit { background: var(--c-yellow-100); color: inherit; box-shadow: inset 0 -.18em 0 var(--c-yellow); border-radius: 2px; padding: 0 .05em; }

/* ---------- Empty state ---------- */
.faq-empty {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4) var(--sp-5); align-items: start;
  margin-top: var(--sp-6); padding: var(--sp-6); background: var(--c-paper); border-radius: var(--r);
}
.faq-empty[hidden] { display: none; }
.faq-empty h2 { margin: 0; overflow-wrap: anywhere; }
.faq-empty p { margin-top: var(--sp-2); color: var(--text); }
.faq-empty__reset {
  margin-top: var(--sp-4); min-height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 var(--fs-sm)/1.3 var(--font-text); color: var(--fg); text-decoration: underline; text-underline-offset: .25em;
}
@media (max-width: 599px) {
  .faq-empty { grid-template-columns: 1fr; padding: var(--sp-5); }
}

/* Topic headings take focus after a topic jump (for screen readers); no ring on a non-control */
.faq-group h2[tabindex="-1"]:focus, #faq-h1[tabindex="-1"]:focus { outline: none; }

.faq-bar { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
@media (max-width: 1023px) { .faq-bar { scroll-margin-top: calc(var(--header-h) + 4.5rem); } }

/* ---------- Every possible add-on (hidden-fees answer) ---------- */
.faq-fees-wrap { margin-top: var(--sp-4); }
.faq-fees { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.4; }
.faq-fees caption { caption-side: bottom; padding-top: var(--sp-2); text-align: left; font-size: var(--fs-xs); color: var(--muted); }
.faq-fees thead th {
  padding: 0 var(--sp-3) .5rem 0; text-align: left; border-bottom: 2px solid var(--c-black);
  font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 800; font-size: var(--fs-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.faq-fees thead th:last-child, .faq-fees__price { text-align: right; padding-right: 0; }
.faq-fees tbody th, .faq-fees tbody td { padding: .6rem var(--sp-3) .6rem 0; border-bottom: 1px solid var(--line); vertical-align: baseline; text-align: left; }
.faq-fees tbody th { font-weight: 650; white-space: nowrap; }
.faq-fees tbody th a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--c-line-strong); text-decoration-thickness: 1px; text-underline-offset: .22em; }
.faq-fees tbody th a:hover, .faq-fees tbody th a:focus-visible { text-decoration-color: var(--c-yellow); text-decoration-thickness: 2px; }
.faq-fees tbody td { color: var(--text); }
.faq-fees td.faq-fees__price {
  padding-right: 0; text-align: right; white-space: nowrap; font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 850;
  font-size: var(--fs-base); color: var(--fg); font-variant-numeric: tabular-nums;
}
/* Phones: charge + price on one line, "when it applies" underneath */
@media (max-width: 599px) {
  .faq-fees thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .faq-fees { display: flex; flex-direction: column; }
  .faq-fees tbody { display: block; }
  .faq-fees caption { display: block; order: 2; }
  .faq-fees tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); padding: .6rem 0; border-bottom: 1px solid var(--line); }
  .faq-fees tbody tr:first-child { border-top: 2px solid var(--c-black); }
  .faq-fees tbody th, .faq-fees tbody td { display: block; padding: 0; border: 0; }
  .faq-fees tbody th { grid-column: 1; grid-row: 1; white-space: normal; }
  .faq-fees td.faq-fees__price { grid-column: 2; grid-row: 1; }
  .faq-fees tbody td:not(.faq-fees__price) { grid-column: 1 / -1; grid-row: 2; margin-top: .15rem; font-size: var(--fs-xs); color: var(--muted); }
}

/* Hero card: the add-ons row reads as the "and that's everything" line */


/* ---------- Phones: the six most-asked come straight after the H1, as compact rows that keep their
   sub-text (same content as desktop), then the search. The sticky bar already has Call and Book. ---------- */
@media (max-width: 719px) {
  .faq-hero__copy { display: contents; }
  .faq-hero .hero__grid > .breadcrumbs { order: 0; }
  .faq-hero .eyebrow { order: 1; }
  .faq-hero .hero__title { order: 2; margin-top: calc(var(--sp-4) * -1 + .25rem); }
  .faq-hero .hero__lede { display: none; }
  .faq-hero .faq-quick { order: 3; }
  .faq-hero .faq-search { order: 4; margin-top: var(--sp-2); }
  .faq-quick { padding: var(--sp-3) var(--sp-4) var(--sp-2); }
  .faq-quick .faq-quick__list { margin-top: var(--sp-1); }
  .faq-quick__row { padding-block: .6rem; gap: var(--sp-3); }
  .faq-quick__row > span { font-size: var(--fs-sm); }
  .faq-quick__row > strong { font-size: var(--fs-lg); }
  .faq-quick__go { display: none; }
  .faq-quick__actions { display: none; }
}

/* ---------- "Still can't find it? Ask us" ---------- */
.faq-ask {
  display: grid; gap: var(--sp-5); margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding: clamp(1.25rem, 1rem + 2vw, 2.25rem); background: var(--c-paper); border-radius: var(--r);
  border-top: 4px solid var(--c-black); scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}
@media (min-width: 840px) { .faq-ask { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--sp-7, 2.5rem); align-items: start; } }
.faq-ask__intro h2 { margin: .25rem 0 0; }
.faq-ask__intro p:not(.eyebrow) { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text); }
.faq-ask__intro a { color: var(--fg); font-weight: 600; text-underline-offset: .2em; }
.faq-ask__form { display: grid; gap: var(--sp-4); }
.faq-ask__form .field[hidden] { display: none; }
.faq-ask__form .textarea { min-height: 6.5rem; resize: vertical; background: var(--c-white); }
.faq-ask__form .input { background: var(--c-white); }
.faq-ask__submit { justify-self: start; }
.faq-ask__submit[hidden] { display: none; }
@media (max-width: 479px) { .faq-ask__submit { justify-self: stretch; } }
.faq-ask__done { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-4); background: var(--c-white); border-radius: var(--r-sm); }
.faq-ask__done[hidden] { display: none; }
.faq-ask__done:focus { outline: none; }
.faq-ask__done-title { font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 850; font-size: var(--fs-md); color: var(--fg); }
.faq-ask__done p:not(.faq-ask__done-title) { margin-top: .25rem; font-size: var(--fs-sm); color: var(--text); }

.faq-empty__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-3) !important; }
.faq-empty__links a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; color: var(--fg); text-underline-offset: .25em; }
.faq-empty__links .faq-empty__reset { margin-top: 0; }

/* Phones: a tighter hero so the first question arrives sooner */
@media (max-width: 719px) {
  .faq-hero.hero--page { padding-bottom: var(--sp-5); }
  .faq-hero .hero__grid { gap: var(--sp-4) 0; }
  .faq-hero__copy { min-width: 0; }
  .faq-quick { margin-top: var(--sp-1) !important; }
  .faq-search { margin-top: var(--sp-5); }
  .faq-search__popular { margin-top: var(--sp-3); }
  .faq-search__popular-label { flex-basis: 100%; font-size: var(--fs-xs); }
  .faq-search__chips { gap: var(--sp-2); }
  .faq-chip { min-height: 2.5rem; padding-inline: .85rem; }
  .faq-main { padding-top: var(--sp-3); }
}

/* ---------- Search preview: why a result matched ---------- */
.faq-suggest__a--ex { color: var(--c-black); }
.faq-suggest__where {
  display: block; margin-bottom: .1rem; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted);
}
.faq-suggest__where--rel { margin: .25rem 0 0; }
.faq-suggest__a mark.faq-hit { font-weight: 650; }

/* ---------- Results bar: last-checked date ---------- */
.faq-bar { flex-wrap: wrap; row-gap: var(--sp-2); }
.faq-bar__updated {
  flex-basis: 100%; order: 3; display: block; line-height: 1.5;
  font-size: var(--fs-xs); color: var(--muted);
}
.faq-bar__updated .icon { display: inline-block; width: .95rem; height: .95rem; margin-right: .35rem; vertical-align: -.15em; color: var(--fg); }
.faq-bar__updated time { font-weight: 650; color: var(--fg); }

/* Side note inside an answer (fridge $129 vs $40, last-checked date) */
.faq-item .accordion__body .faq-note { padding: var(--sp-3) var(--sp-4); background: var(--c-paper); border-radius: var(--r-sm); font-size: var(--fs-sm); }

/* ---------- "Did this answer it?" + copy link ---------- */
.faq-item__share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.faq-fb { display: inline-flex; align-items: center; gap: var(--sp-2); }
.faq-fb__q { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); margin-right: .15rem; }
.faq-fb__btn {
  min-width: 3.25rem; min-height: 2.75rem; padding: 0 .85rem; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill);
  background: var(--c-white); color: var(--fg); cursor: pointer; font: 600 var(--fs-xs)/1 var(--font-text);
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.faq-fb__btn:hover { border-color: var(--c-black); }
.faq-fb__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.faq-fb__btn[aria-pressed="true"] { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }
.faq-fb__msg { flex-basis: 100%; font-size: var(--fs-sm); color: var(--text); }
.faq-fb__msg:empty { display: none; }
.faq-fb__msg a { color: var(--fg); font-weight: 600; text-underline-offset: .2em; }

/* ---------- Sub-topic inside a group ("On the day") ---------- */
.faq-subhead {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-6) 0 var(--sp-3); font-family: var(--font-display); font-stretch: 112%; font-weight: 850;
  font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--fg);
}
.faq-subhead::before { content: ""; flex: none; width: 1.5rem; height: 4px; background: var(--c-yellow); }
.faq-subhead[hidden] { display: none; }

/* Payment methods as a row of plain "cards" */
.faq-paylist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.faq-paylist li {
  padding: .4rem .75rem; border: 1px solid var(--c-line-strong); border-radius: var(--r-xs); background: var(--c-white);
  font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 800; font-size: var(--fs-xs); color: var(--fg);
}

/* ---------- End of each topic: where to go next ---------- */
.faq-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-4); }
.faq-next[hidden] { display: none; }
.faq-next__go {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 2.75rem; padding: .35rem .9rem .35rem .35rem;
  border-radius: var(--r-pill); background: var(--c-paper); color: var(--fg); text-decoration: none;
  font-size: var(--fs-sm); font-weight: 600; transition: background-color var(--t-fast);
}
.faq-next__go:hover { background: var(--c-concrete); }
.faq-next__go:focus-visible, .faq-next__top:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.faq-next__go .icon-tile { width: 2.1rem; height: 2.1rem; border-radius: 50%; }
.faq-next__go .icon-tile .icon { width: 1rem; height: 1rem; }
.faq-next__go small { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.2; }
.faq-next__go b { display: block; font-weight: 700; line-height: 1.3; }
.faq-next__top {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .25rem;
  font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: .2em; background: none; border: 0; cursor: pointer;
}
.faq-next__top:hover { color: var(--fg); }

/* ---------- Phones & tablets: a "Back to top" square sits in the sticky topic bar ---------- */
.faq-totop { display: none; }
@media (max-width: 1023px) {
  .faq-side { display: flex; align-items: stretch; gap: var(--sp-2); }
  .faq-toc { flex: 1 1 auto; min-width: 0; }
  .faq-totop {
    display: inline-grid; place-items: center; flex: none; width: 3rem; min-height: 3rem; padding: 0;
    border: 2px solid var(--c-black); border-radius: var(--r-sm); background: var(--c-white); color: var(--c-black); cursor: pointer;
    transition: background-color var(--t-fast);
  }
  .faq-totop .icon { width: 1.15rem; height: 1.15rem; transform: rotate(-90deg); }
  .faq-totop:hover { background: var(--c-yellow); }
  .faq-totop:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
}

/* The sidebar "Still not sure?" card steps aside when the full "Ask us" panel is on screen */
@media (min-width: 1024px) {
  .faq-help { transition: opacity var(--t), visibility 0s linear 0s; }
  .faq-side.is-ask-near .faq-help { opacity: 0; visibility: hidden; transition: opacity var(--t), visibility 0s linear var(--t); }
}

/* ---------- Long topics: first questions, then "Show all N" ---------- */
.faq-results:not(.is-filtering) .faq-group.is-clipped .faq-item[data-faq-extra="all"],
.faq-results:not(.is-filtering) .faq-group.is-clipped .faq-subhead { display: none; }
@media (max-width: 719px) {
  .faq-results:not(.is-filtering) .faq-group.is-clipped .faq-item[data-faq-extra="phone"] { display: none; }
}
.faq-more {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: 3rem; margin-top: var(--sp-3);
  padding: .65rem var(--sp-4); border: 2px solid var(--c-black); border-radius: var(--r-sm);
  background: var(--c-white); color: var(--c-black); cursor: pointer; text-align: left;
  font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 800; font-size: var(--fs-sm);
  letter-spacing: .04em; text-transform: uppercase;
  transition: background-color var(--t-fast), box-shadow var(--t-fast);
  box-shadow: 0 3px 0 var(--c-black);
}
.faq-more:hover { background: var(--c-yellow-100); }
.faq-more:active { box-shadow: 0 1px 0 var(--c-black); transform: translateY(2px); }
.faq-more:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.faq-more[hidden], .faq-results.is-filtering .faq-more { display: none; }
.faq-more__label { flex: 1; }
.faq-more__n {
  display: inline-grid; place-items: center; min-width: 2.25rem; height: 1.6rem; padding: 0 .45rem;
  border-radius: var(--r-pill); background: var(--c-black); color: var(--c-yellow); font-size: var(--fs-xs); letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.faq-more .icon { width: 1.1rem; height: 1.1rem; flex: none; }
.faq-more__n--phone { display: none; }
@media (max-width: 719px) {
  .faq-more__n--phone { display: inline-grid; }
  .faq-more__n--wide { display: none; }
}
@media (min-width: 720px) { .faq-more--phone { display: none; } }

/* ---------- "Which bin size?": each block is one pickup-truck load ---------- */
.faq-loads { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.faq-loads > li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name n" "bar bar";
  gap: .45rem var(--sp-4); align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .faq-loads > li { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 7.5rem; grid-template-areas: "name bar n"; }
}
.faq-loads__name { grid-area: name; font-weight: 700; color: var(--fg); }
.faq-loads__name .badge { margin-left: .3rem; vertical-align: .1em; }
.faq-loads__name small { display: block; margin-top: .1rem; font-weight: 400; font-size: var(--fs-xs); line-height: 1.45; color: var(--muted); }
.faq-loads__track { grid-area: bar; display: block; height: 1.1rem; }
.faq-loads__bar {
  --u: calc(100% / var(--n));
  display: block; height: 100%; width: calc(var(--n) / 12 * 100%);
  background: repeating-linear-gradient(90deg, var(--c-black) 0 calc(var(--u) - 3px), transparent calc(var(--u) - 3px) var(--u));
}
.faq-loads > li > strong { grid-area: n; font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 850; font-size: var(--fs-base); color: var(--fg); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.faq-loads > li > strong span { display: block; font-family: var(--font-text); font-stretch: normal; font-weight: 500; font-size: var(--fs-xs); color: var(--muted); }

/* ---------- "How much room?": to-scale driveway plan ---------- */
.faq-plan { margin: var(--sp-2) 0 var(--sp-4); padding: var(--sp-3); background: var(--c-paper); border-radius: var(--r-sm); }
.faq-plan__svg { display: block; width: 100%; height: auto; max-width: 40rem; margin-inline: auto; }
.faq-plan__garage { fill: var(--c-concrete); }
.faq-plan__door { stroke: var(--c-line-strong); stroke-width: 2; }
.faq-plan__drive { fill: var(--c-white); stroke: var(--c-line-strong); stroke-width: 2; }
.faq-plan__street { fill: var(--c-ink-600); }
.faq-plan__arrow { fill: none; stroke: var(--c-yellow-800); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.faq-plan__bin { fill: var(--c-black); }
.faq-plan__end { stroke: var(--c-ink-600); stroke-width: 3; stroke-dasharray: 8 6; }
.faq-plan__mini { fill: none; stroke: var(--c-yellow); stroke-width: 4; stroke-dasharray: 10 6; }
.faq-plan__tick { stroke: var(--c-black); stroke-width: 2; }
.faq-plan__label text { font-family: var(--font-display); font-stretch: var(--stretch-ui); font-weight: 850; font-size: 20px; fill: var(--c-black); text-anchor: middle; }
.faq-plan__label text.is-end { text-anchor: end; }
.faq-plan__label text.is-start { text-anchor: start; }
.faq-plan + .faq-dims > li > strong { max-width: none; white-space: nowrap; }
@media (max-width: 599px) { .faq-plan__label text { font-size: 26px; } .faq-plan { padding: var(--sp-2) var(--sp-2) var(--sp-3); } }
.faq-plan figcaption { margin-top: var(--sp-2); font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); }

/* Comparison labels used outside an option card */
.accordion__body > .faq-option__label { margin-top: var(--sp-4); }
.accordion__body > .faq-option__label + .faq-dims { margin-top: var(--sp-2); }

/* ---------- Tighter rhythm: question + short answer read as one compact unit ---------- */
.faq-item .accordion__summary { padding-block: 1.1rem; }
.faq-item .accordion__summary::after { top: .7rem; }
.faq-item__a { margin-top: .4rem; max-width: 54rem; font-weight: 500; color: var(--c-body); }
.faq-item[open] > .accordion__summary { padding-bottom: var(--sp-3); }

/* ---------- Pictures inside answers ---------- */
.faq-fig { margin: var(--sp-4) 0 0; }
.faq-fig img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); background: var(--c-paper); }
.faq-fig figcaption { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }
/* A strike-through on a losing comparison value is not an underline; keep it */
.faq-dims--compare > li:not(.is-win) > strong { text-decoration-line: line-through !important; }