/* ==========================================================================
   First Call Auto Care - service pages 2026

   A self-contained stylesheet for the rebuilt service page bodies. Scoped to
   .fcs26 so it cannot reach the header, the footer, or the 80 pages that are
   still on the Duda template.

   Tokens are the same system as home-2026.css so a visitor moving from the
   homepage into a service page does not cross a visual seam: near-black ink,
   one accent red, generous whitespace, 14px radii.

   NOTE: Duda sets the document root to 12px, so rem units render at 0.75x
   here. Every size below is px against a 16px design baseline for that
   reason. This is the same trap home-2026.css documents.
   ========================================================================== */

.fcs26 {
  --ink: #1d1f21;
  --ink-soft: #5b6066;
  /* Was #8b9096, which is 3.22:1 on paper and 3.00:1 on the wash band:
     a WCAG AA failure at 4.5:1 everywhere it is used, and it is used for
     the Step 1..5 labels, the coupon expiry date and "and older models
     too". Darkened to the lightest value that clears 4.8:1 on the harder
     of the two grounds, so the muted hierarchy survives.
     CHANGE_ID fc-contrast-20260916 */
  --ink-faint: #6a6d72;
  --line: #e6e7e9;
  --wash: #f6f7f8;
  --accent: #c8362f;
  --accent-deep: #9c2721;
  --accent-wash: #fdf3f2;
  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1200px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
    Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.fcs26 *,
.fcs26 *::before,
.fcs26 *::after { box-sizing: border-box; }

.fcs26 img { max-width: 100%; display: block; }
.fcs26 p { margin: 0 0 16px; }
.fcs26 p:last-child { margin-bottom: 0; }

.fcs26 h1,
.fcs26 h2,
.fcs26 h3 {
  margin: 0;
  color: var(--ink);
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.fcs26 h1 { font-size: 46px; font-weight: 800; }
.fcs26 h2 { font-size: 32px; font-weight: 800; }
.fcs26 h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }

.fcs26 a { color: var(--accent); }
.fcs26 a:hover { color: var(--accent-deep); }

.fcs26 .wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Section rhythm. `--wash` alternates the ground so the page has movement
   without a hard rule between every block. */
.fcs26 .band { padding-block: 84px; }
.fcs26 .band--wash { background: var(--wash); }
.fcs26 .band--tight { padding-block: 60px; }

.fcs26 .eyebrow {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fcs26 .lede {
  max-width: 62ch;
  font-size: 18px;
  color: var(--ink-soft);
}

.fcs26 .head { max-width: 68ch; margin-bottom: 40px; }

/* ---- buttons ---------------------------------------------------------- */

.fcs26 .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 28px;
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.fcs26 .btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }

.fcs26 .btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.fcs26 .btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.fcs26 .btn--onphoto { background: #fff; border-color: #fff; color: var(--ink); }
.fcs26 .btn--onphoto:hover { background: #f1f1f1; border-color: #f1f1f1; color: var(--ink); }

.fcs26 .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---- hero ------------------------------------------------------------- */

/* Copy on the left, the real photograph on the right. Not a full-bleed
   background: a brake job is a close-up subject and a scrim over it just
   makes an expensive photo look like wallpaper. */
.fcs26 .svc-hero { padding-block: 64px 72px; border-bottom: 1px solid var(--line); }

.fcs26 .svc-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}

.fcs26 .svc-hero h1 { margin-bottom: 18px; }

.fcs26 .svc-hero__fig {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 46px rgba(29, 31, 33, .14);
}
.fcs26 .svc-hero__fig img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* Careers leads with the team photograph rather than with copy, so the figure
   takes the wider column there. Declared above the responsive block on purpose:
   the 1024px rule collapses .svc-hero__grid to one column and a modifier of
   equal specificity declared after it would win and keep two columns on a
   phone. */
.fcs26 .svc-hero__grid--photo-led {
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
}

/* ---- trust strip ------------------------------------------------------ */

/* A two-up grid, not a wrapping flex row. Flex packed these by natural text
   width, so a four-item list came out as a ragged 2-1-1 stack that reads as
   broken layout rather than as a list. A grid keeps the left edges aligned
   whatever the copy happens to say. */
.fcs26 .trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px;
  margin-top: 26px;
  padding: 0;
  list-style: none;
}
.fcs26 .trust li {
  display: flex;
  /* flex-start, not center: an item long enough to wrap to two lines would
     otherwise float its dot down to the middle of the block. */
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-soft);
}
.fcs26 .trust li::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  margin-top: 7px; /* sits the dot on the first line rather than the box top */
  border-radius: 50%;
  background: var(--accent);
}

/* ---- symptom cards ---------------------------------------------------- */

/* The most useful block on the page: a symptom the driver actually notices,
   then what it means mechanically. The number is decorative but the order is
   real, running from most common to most urgent. */
.fcs26 .signs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* Four cards in a three-up grid leaves a lone card stranded on the second row,
   which reads as a mistake. Pages that have exactly four get their own row.
   The builders add .signs--4 when len(signs) == 4. */
.fcs26 .signs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fcs26 .signs--4 .sign { padding: 24px 20px 22px; }
.fcs26 .signs--4 .sign h3 { font-size: 17.5px; }
.fcs26 .signs--4 .sign p { font-size: 14.5px; }

/* Four narrow columns get cramped before the shared 1024px breakpoint does its
   work, so this variant drops to two a little earlier. */
@media (max-width: 1150px) {
  .fcs26 .signs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .fcs26 .signs--4 .sign { padding: 28px 26px 26px; }
  .fcs26 .signs--4 .sign h3 { font-size: 19px; }
  .fcs26 .signs--4 .sign p { font-size: 15.5px; }
}

.fcs26 .sign {
  position: relative;
  padding: 28px 26px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.fcs26 .sign:hover {
  border-color: #d6d8da;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(29, 31, 33, .07);
}

.fcs26 .sign__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.fcs26 .sign h3 { margin-bottom: 10px; }
.fcs26 .sign p { font-size: 15.5px; color: var(--ink-soft); }

/* ---- process steps ---------------------------------------------------- */

/* A vertical rail rather than a card row: this is a sequence, and a row of
   equal boxes hides that. The rail is drawn on the list, not per item, so it
   never leaves a stub under the last step.

   The indent lives on .step, NOT on the <ol>. Duda ships
   `#site_content ol:not(.defaultList){-webkit-padding-start:0}` at
   specificity (1,1,1), which beats any class selector we can write and
   silently zeroes a padding-left set here. That pushed the numbers out of the
   list while the rail stayed put, so the rail drew straight through the copy.
   Indenting the items instead sidesteps the rule entirely: nothing in the
   Duda stylesheets sets padding on li. */
.fcs26 .steps {
  position: relative;
  max-width: 820px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fcs26 .steps::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 10px;
  /* Stops level with the last marker rather than running past it into the
     section padding, which reads as a stub. */
  bottom: 22px;
  width: 2px;
  background: var(--line);
}

.fcs26 .step { position: relative; padding: 0 0 34px 56px; }
.fcs26 .step:last-child { padding-bottom: 0; }

/* Badge is 32px wide sitting at left:0, so its centre falls on 16px, which is
   where the 2px rail at left:15px sits. Keep those three numbers in step. */
.fcs26 .step__n {
  position: absolute;
  left: 0;
  top: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.fcs26 .step h3 { margin-bottom: 8px; }
.fcs26 .step p { font-size: 15.5px; color: var(--ink-soft); max-width: 64ch; }

/* ---- editorial split -------------------------------------------------- */

.fcs26 .split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.fcs26 .split--flip .split__media { order: -1; }

.fcs26 .split__media {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(29, 31, 33, .12);
}
.fcs26 .split__media img { width: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

.fcs26 .split__body p { color: var(--ink-soft); }

/* ---- checklist -------------------------------------------------------- */

.fcs26 .incl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fcs26 .incl li {
  position: relative;
  padding-left: 32px;
  font-size: 15.5px;
  color: var(--ink-soft);
}
.fcs26 .incl li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;
  height: 10px;
  border-left: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---- FAQ -------------------------------------------------------------- */

/* Native <details> so every answer ships in the HTML. No client JS, and the
   text is in the DOM for a crawler whether or not the panel is open. */
.fcs26 .faq { max-width: 860px; border-top: 1px solid var(--line); }

.fcs26 .faq details { border-bottom: 1px solid var(--line); }

.fcs26 .faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.fcs26 .faq summary::-webkit-details-marker { display: none; }
.fcs26 .faq summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  margin-top: 6px;
  border-right: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.fcs26 .faq details[open] summary::after { transform: rotate(-135deg); margin-top: 10px; }
.fcs26 .faq summary:hover { color: var(--accent); }

.fcs26 .faq .answer { padding: 0 0 24px; font-size: 16px; color: var(--ink-soft); max-width: 70ch; }

/* ---- related links ---------------------------------------------------- */

.fcs26 .related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.fcs26 .rel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.fcs26 .rel:hover {
  border-color: var(--accent);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(29, 31, 33, .08);
}
.fcs26 .rel b { font-size: 16.5px; font-weight: 700; }
.fcs26 .rel span { font-size: 14.5px; color: var(--ink-soft); }

/* ---- closing CTA ------------------------------------------------------ */

.fcs26 .svc-cta { background: var(--ink); color: #fff; padding-block: 72px; }
.fcs26 .svc-cta h2 { color: #fff; }
.fcs26 .svc-cta p { color: #c9ccd0; max-width: 58ch; margin-top: 14px; }
/* Any link on the dark CTA band, not only the reviews one. The brand red is
   3.17:1 here and /vehicles/ carries a plain in-sentence link ("the current
   offers") that the narrower rule below missed.
   CHANGE_ID fc-contrast-20260916 */
/* :not(.btn) matters. Without it this repainted the label of every button on
   the band, so "Book Appointment" went to 3.39:1 and "Call (248) 632-1600"
   to 1.54:1 on 53 pages: worse than the problem it was fixing. Buttons carry
   their own fill and their own text colour. */
.fcs26 .svc-cta a:not(.btn):not([class*=btn]) { color: #da6964; }
.fcs26 .svc-cta .eyebrow { color: #ff8079; }

/* ==========================================================================
   Responsive. The Duda template ships no breakpoint of its own for this
   content, so every column count is stepped explicitly here.
   ========================================================================== */

@media (max-width: 1024px) {
  .fcs26 .band { padding-block: 64px; }
  .fcs26 h1 { font-size: 38px; }
  .fcs26 h2 { font-size: 28px; }
  .fcs26 .svc-hero__grid,
  .fcs26 .split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .fcs26 .split--flip .split__media { order: 0; }
  .fcs26 .signs,
  .fcs26 .related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .fcs26 .band { padding-block: 52px; }
  .fcs26 .wrap { padding-left: 18px; padding-right: 18px; }
  .fcs26 h1 { font-size: 31px; }
  .fcs26 h2 { font-size: 24px; }
  .fcs26 .lede { font-size: 16.5px; }
  .fcs26 .signs,
  .fcs26 .related,
  .fcs26 .trust,
  .fcs26 .incl { grid-template-columns: minmax(0, 1fr); }
  .fcs26 .step { padding-left: 46px; }
  .fcs26 .actions .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Location page additions

   The city pages reuse the .fcs26 shell above so a visitor never crosses a
   visual seam. These are the two components the service pages do not have:
   a facts strip for address, hours and phone, and a chip grid for the makes
   we service. Appended at the very end deliberately, so nothing here can be
   silently beaten by an earlier rule at equal specificity.
   ========================================================================== */

.fcs26 .locfacts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 40px;
}

/* =====================================================================
   The Older / Newer post links under an article.

   TWO BUGS IN ONE PLACE, and the first only appears in Safari.

   The markup is an inline <a> wrapping a block <p>. Chromium measures that
   anchor's box as the first line only, 28px tall. WebKit encloses the block
   child and measures it 73px tall. In WebKit that makes the "Older Post" hit
   area overlap "Newer Post" by 19px, so a tap near the boundary opens the
   wrong article. Nothing in a Chromium-only test can see this, which is
   exactly why the audit now runs under both engines.

   Second, both links were 18 to 19px tall, under the 24x24 that WCAG 2.5.8
   asks for at AA.

   display:block makes the geometry identical in both engines and cannot
   overlap; the padding takes them past 44px, which is the AAA figure.
   CHANGE_ID fc-postnav-safari-20260916
   ===================================================================== */
.fcs26 .wrap--article > a {
  display: block;
  padding-block: 12px;
}
.fcs26 .wrap--article > a > p { margin-bottom: 0; }

.fcs26 .locfact { background: #fff; padding: 24px 22px; }

.fcs26 .locfact dt {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 8px;
}

/* The shop's phone number was a 120x18 target here, under AA. It is the most
   valuable tap on a location page. CHANGE_ID fc-tap-targets-20260916 */
.fcs26 .locfact dd a {
  display: inline-block;
  padding-block: 7px;
}

.fcs26 .locfact dd {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
}

.fcs26 .locfact dd span {
  display: block;
  font-weight: 400;
  color: var(--ink-soft);
}

.fcs26 .makes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fcs26 .make {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.fcs26 .make:hover {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent-deep);
}

@media (max-width: 900px) {
  .fcs26 .locfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .fcs26 .locfacts { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Vehicle make page additions

   Make pages reuse the whole .fcs26 system so a visitor crossing from a
   service page into a make page sees one site. Two things are new.

   1. A hero that works without a photograph. We only have shop photography of
      about fifteen of the thirty-five makes, and putting an Audi on the
      Chevrolet page would be a lie. Those pages get a wider text hero
      instead, which reads as deliberate rather than as a missing image.
   2. A model chip list, which is the one piece of information a make page
      owes the reader that a service page does not.
   ========================================================================== */

.fcs26 .svc-hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
.fcs26 .svc-hero__grid--solo .lede { max-width: 62ch; }
.fcs26 .svc-hero__grid--solo .trust { max-width: 760px; }

.fcs26 .models {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fcs26 .models li {
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.fcs26 .models li.models__more {
  border-style: dashed;
  color: var(--ink-faint);
  font-weight: 500;
}

/* Service chips on a make page: same pill as .models but they are links, so
   they need the accent on hover and no inherited link underline. */
.fcs26 .models--links li { padding: 0; border: 0; background: none; }
.fcs26 .models--links a {
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.fcs26 .models--links a:hover {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent-deep);
}

/* The /vehicles roster: three grouped blocks rather than one alphabetical run
   of thirty-five names. The group blurb earns its place by telling somebody
   which column they are in before they start reading badges. */
.fcs26 .vgroups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
}

.fcs26 .vgroup h3 {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fcs26 .vgroup > p {
  margin-bottom: 18px;
  font-size: 15px;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .fcs26 .vgroups { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

/* ==========================================================================
   Blog article layout

   Narrower measure than the marketing pages, because this is the one part of
   the site people actually read top to bottom rather than scan. The body copy
   is the original post text, preserved: these articles rank, and the job here
   was chrome and conversion, not a rewrite.
   ========================================================================== */

.fcs26 .wrap--article { max-width: 760px; }

.fcs26 .art-hero {
  padding-block: 56px 32px;
  border-bottom: 1px solid var(--line);
}
.fcs26 .art-hero h1 { font-size: 40px; margin-bottom: 16px; }
.fcs26 .art-hero .eyebrow a { color: inherit; text-decoration: none; }
.fcs26 .art-hero .eyebrow a:hover { text-decoration: underline; }

.fcs26 .art-meta {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-faint);
}

.fcs26 .art { padding-block: 44px 64px; }

.fcs26 .art p,
.fcs26 .art li {
  font-size: 17.5px;
  line-height: 1.72;
  color: #34383d;
}
.fcs26 .art p { margin: 0 0 22px; }

.fcs26 .art h2 {
  margin: 44px 0 16px;
  font-size: 27px;
}
.fcs26 .art h3 {
  margin: 32px 0 12px;
  font-size: 20px;
}
.fcs26 .art h2:first-child,
.fcs26 .art h3:first-child { margin-top: 0; }

.fcs26 .art ul,
.fcs26 .art ol { margin: 0 0 22px; padding-left: 22px; }
.fcs26 .art li { margin-bottom: 9px; }

/* Duda's export zeroes list padding via `#site_content ul:not(.defaultList)`,
   an ID selector that beats any class rule. Put the indent on the item so the
   bullets do not sit on top of the text. Same trap as the service page rail. */
.fcs26 .art ul > li,
.fcs26 .art ol > li { padding-left: 4px; }

.fcs26 .art a { text-decoration: underline; text-underline-offset: 2px; }

.fcs26 .art blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--accent);
  font-size: 18px;
  color: var(--ink);
}

.fcs26 .art table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 16px; }
.fcs26 .art th,
.fcs26 .art td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; }
.fcs26 .art th { background: var(--wash); font-weight: 700; }

.fcs26 .art-cta {
  padding: 34px 32px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: #fff;
}
.fcs26 .art-cta h2 { font-size: 25px; margin-bottom: 12px; }
.fcs26 .art-cta p { color: var(--ink-soft); }

@media (max-width: 680px) {
  .fcs26 .art-hero h1 { font-size: 29px; }
  .fcs26 .art p, .fcs26 .art li { font-size: 16.5px; }
  .fcs26 .art h2 { font-size: 23px; }
  .fcs26 .art-cta { padding: 26px 22px; }
}

/* ---- blog index -------------------------------------------------------- */

.fcs26 .bloggroups { display: grid; gap: 46px; }
.fcs26 .bloggroup h3 {
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- specials ---------------------------------------------------------- */

.fcs26 .offers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.fcs26 .offer {
  display: flex;
  flex-direction: column;
  padding: 30px 28px 26px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  background: #fff;
}

.fcs26 .offer__price {
  margin: 0 0 6px;
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.fcs26 .offer__price span {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.fcs26 .offer h3 { margin-bottom: 6px; }
.fcs26 .offer__for { font-size: 15.5px; color: var(--ink-soft); }
.fcs26 .offer__terms {
  margin-top: auto;
  padding-top: 16px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-faint);
}

.fcs26 .offer__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.fcs26 .offer__foot .btn { min-height: 44px; padding: 0 20px; font-size: 14px; }
.fcs26 .offer__exp {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- careers form ------------------------------------------------------ */

.fcs26 .jobform { margin-top: 8px; }
.fcs26 .jobform__hp { position: absolute; left: -9999px; }
.fcs26 .jobform__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
}
.fcs26 .jobform label,
.fcs26 .jobform__wide {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
.fcs26 .jobform__wide { margin-top: 18px; }
.fcs26 .jobform .req { color: var(--accent); margin-left: 3px; }

.fcs26 .jobform input,
.fcs26 .jobform select,
.fcs26 .jobform textarea {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 12px 14px;
  border: 1px solid #d3d6d9;
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit;
  font-size: 15.5px;
  font-weight: 400;
  color: var(--ink);
}
.fcs26 .jobform textarea { resize: vertical; }
.fcs26 .jobform input:focus,
.fcs26 .jobform select:focus,
.fcs26 .jobform textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.fcs26 .jobform button.btn { border: 2px solid var(--accent); font: inherit; font-size: 15px; font-weight: 700; }

@media (max-width: 900px) {
  .fcs26 .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .fcs26 .offers { grid-template-columns: minmax(0, 1fr); }
  .fcs26 .jobform__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Structural heading, present for assistive tech and for document outline but
   not repeated on screen where the eyebrow already says it. */
.fcs26 .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.fcs26 .jobform__note { margin: 14px 0 0; color: var(--mut, #6b7177); font-size: 15px; min-height: 1.2em; }


/* ---- service tiles ----------------------------------------------------- */

/* The same treatment the home page gives its service tiles: the photograph
   with the service name on it and nothing else, a dark gradient so the name
   stays readable, and a wash of brand red rising from the foot on hover with
   an arrow appearing. Reproduced here rather than shared because the home page
   rules are scoped to body[data-page-alias="home"] .fc26 and cannot reach
   these pages. The colours and timings are copied exactly so the two match. */
.fcs26 .tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.fcs26 .tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 210px;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: #fff;
}
.fcs26 .tile img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.fcs26 .tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(15,16,18,.42) 0%, rgba(15,16,18,.62) 55%, rgba(15,16,18,.86) 100%);
  transition: background .3s ease;
}
.fcs26 .tile:hover img,
.fcs26 .tile:focus-visible img { transform: scale(1.06); }
.fcs26 .tile:hover::after,
.fcs26 .tile:focus-visible::after {
  background: linear-gradient(180deg, rgba(15,16,18,.3) 0%, rgba(15,16,18,.55) 50%, rgba(200,54,47,.78) 100%);
}
.fcs26 .tile h3 {
  margin: 0;
  padding: 22px;
  font-size: 17.92px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
}
.fcs26 .tile h3::after { content: " \2192"; opacity: 0; transition: opacity .25s ease; }
.fcs26 .tile:hover h3::after,
.fcs26 .tile:focus-visible h3::after { opacity: 1; }
.fcs26 .tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

@media (max-width: 1024px) { .fcs26 .tiles { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 760px)  { .fcs26 .tiles { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 460px)  { .fcs26 .tiles { grid-template-columns: minmax(0,1fr); } }

@media (prefers-reduced-motion: reduce) {
  .fcs26 .tile img, .fcs26 .tile::after, .fcs26 .tile h3::after { transition: none; }
  .fcs26 .tile:hover img { transform: none; }
}


/* ---- hero layouts ------------------------------------------------------ */

/* Every page on the site opened the same way: copy on the left, photograph on
   the right, two buttons under the copy. Across eighty pages that reads as one
   template with the words swapped, which is exactly what it was.

   These are four ways to open a page. Which one a page gets is decided by the
   photograph it has, not at random: a detail shot of a rotor or a strut needs
   a contained box to read, an environmental shot of the shop floor wants the
   full width, and a page whose photograph is a building works better as a band
   under the headline than as a panel beside it. */

/* --flip: the mirror of the default. Figure first on a wide screen, and still
   copy first on a phone, because the headline should never be pushed below an
   image on a small screen. */
.fcs26 .svc-hero__grid--flip { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.fcs26 .svc-hero__grid--flip > div { order: 2; }
.fcs26 .svc-hero__grid--flip .svc-hero__fig { order: 1; }
@media (max-width: 1024px) {
  /* The column reset is NOT optional here, and leaving it out was a real bug.
     The 1024px rule further up collapses `.fcs26 .svc-hero__grid` to a single
     column, but the `--flip` rule above is unconditional, sits LATER in the
     file, and carries the same (0,2,0) specificity. A media query adds no
     specificity, so the two-column track won at every width. Every vehicle
     page rendered its hero as two columns on a phone: the h1, the lede, the
     bullets and both buttons squeezed into 151px of a 390px screen with the
     photograph beside them. Nothing overflowed, which is why an overflow check
     never saw it.
     CHANGE_ID fc-hero-flip-mobile-20260921 */
  .fcs26 .svc-hero__grid--flip { grid-template-columns: minmax(0, 1fr); }
  .fcs26 .svc-hero__grid--flip > div { order: 1; }
  .fcs26 .svc-hero__grid--flip .svc-hero__fig { order: 2; }
}

/* --overlay: the photograph runs the full width of the band and the copy sits
   on it. Only used where the photograph has somewhere quiet to put text. */
.fcs26 .svc-hero--overlay {
  position: relative;
  padding-block: 0;
  border-bottom: 0;
  /* A dark ground under the photograph. White copy over a photograph that has
     not decoded yet would otherwise be white on white. */
  background: #0e0f11;
}
/* The figure is positioned against the section, not the content column, so the
   photograph runs the full width of the band. .wrap is relative by default,
   which would otherwise trap it at 1152px. */
.fcs26 .svc-hero--overlay .wrap { position: static; }
.fcs26 .svc-hero--overlay .svc-hero__grid {
  grid-template-columns: minmax(0, 1fr);
  min-height: 460px;
  align-content: center;
  padding-block: 72px;
  /* Static on purpose. A positioned grid would become the containing block for
     the figure below and trap the photograph at the content width. The copy is
     lifted over the photograph by positioning the column instead. */
  position: static;
}
.fcs26 .svc-hero--overlay .svc-hero__grid > div {
  max-width: 62ch;
  position: relative;
  z-index: 1;
}
.fcs26 .svc-hero--overlay .svc-hero__fig {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
.fcs26 .svc-hero--overlay .svc-hero__fig img,
.fcs26 .svc-hero--overlay .svc-hero__fig picture { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.fcs26 .svc-hero--overlay .svc-hero__fig::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(14,15,17,.92) 0%, rgba(14,15,17,.80) 42%, rgba(14,15,17,.42) 78%, rgba(14,15,17,.30) 100%);
}
.fcs26 .svc-hero--overlay h1,
.fcs26 .svc-hero--overlay .lede,
.fcs26 .svc-hero--overlay .trust li { color: #fff; }
.fcs26 .svc-hero--overlay .eyebrow { color: #ffb3ad; }
.fcs26 .svc-hero--overlay .trust li::before { background: #fff; }
.fcs26 .svc-hero--overlay .btn--ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.fcs26 .svc-hero--overlay .btn--ghost:hover { background: rgba(255,255,255,.14); }

/* --band: headline centered, photograph full width underneath as a wide strip.
   Suits a building or a forecourt, which say nothing at panel size. */
.fcs26 .svc-hero__grid--band { grid-template-columns: minmax(0, 1fr); gap: 34px; text-align: center; }
.fcs26 .svc-hero__grid--band > div { max-width: 68ch; margin: 0 auto; }
.fcs26 .svc-hero__grid--band .trust { max-width: 820px; margin-inline: auto; text-align: left; }
.fcs26 .svc-hero__grid--band .actions { justify-content: center; }
.fcs26 .svc-hero__grid--band .svc-hero__fig img { aspect-ratio: 21 / 8; }

/* The Ferndale hero is the storefront, and the sign is near the TOP of the
   frame. This band is 21/8, and with object-fit: cover on a 4:3 photograph that
   shows only the middle 51% of its height, which cut the sign off entirely and
   left an awning and a window. Raising the focal point keeps the sign, the
   address and the flags in the band.

   Keyed to the file rather than the page because it is a property of this
   photograph, not of Ferndale: swap the picture and the rule should go with it.
   Below 1024px the same image reverts to 4:3 and nothing is cropped, so this
   only applies where the band is wide.
   CHANGE_ID fc-ferndale-hero-focal-20260917 */
.fcs26 .svc-hero__grid--band .svc-hero__fig img[src*="fc26-loc-ferndale-hero"] {
  object-position: 50% 24%;
}
@media (max-width: 680px) {
  .fcs26 .svc-hero__grid--band .svc-hero__fig img { aspect-ratio: 4 / 3; }
}


/* ==========================================================================
   Component variants

   The page set carried the same eight components in the same order on fifteen
   pages. The copy was never shared, but the shapes were, and a row of three
   identical card grids is what makes a site read as generated. Each shared
   component is now drawn more than one way, and which way is assigned per page
   in tools/hero_layouts.py so neighbors in the nav never match.

   Every indent below sits on the list ITEM rather than the <ol> or <ul>, for
   the same reason .steps documents above: Duda ships
   `#site_content ol:not(.defaultList){-webkit-padding-start:0}` at
   specificity (1,1,1) and it silently wins.
   ========================================================================== */

/* ---- symptoms as a ledger --------------------------------------------- */

/* Two columns of rows separated by rules rather than boxed cards. Reads as a
   reference list, which suits a page where the symptoms are a checklist the
   reader is running down rather than six separate ideas. */
.fcs26 .ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
  border-top: 1px solid var(--line);
}
.fcs26 .ledger__row {
  position: relative;
  padding: 26px 0 26px 52px;
  border-bottom: 1px solid var(--line);
}
.fcs26 .ledger__n {
  position: absolute;
  left: 0;
  top: 26px;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.fcs26 .ledger h3 { margin-bottom: 8px; font-size: 18px; }
.fcs26 .ledger p { font-size: 15.5px; color: var(--ink-soft); margin: 0; }

/* ---- symptoms as a rail ----------------------------------------------- */

/* One column, a red rule down the left, no numbering. For pages where the
   items are alternatives rather than a sequence, so numbering them would be
   claiming an order that is not there. */
.fcs26 .rail {
  max-width: 880px;
  border-left: 2px solid var(--line);
  padding-left: 0;
}
.fcs26 .rail__item {
  position: relative;
  padding: 0 0 30px 34px;
}
.fcs26 .rail__item:last-child { padding-bottom: 0; }
.fcs26 .rail__item::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 10px;
  width: 2px;
  height: 26px;
  background: var(--accent);
}
.fcs26 .rail h3 { margin-bottom: 8px; }
.fcs26 .rail p { font-size: 15.5px; color: var(--ink-soft); max-width: 66ch; margin: 0; }

/* ---- process as a timeline -------------------------------------------- */

/* The rail sits behind outlined markers instead of filled ones, and the copy
   is offset further, so a timeline and the numbered .steps list read as two
   different objects at a glance rather than the same one with a new colour. */
.fcs26 .tl {
  position: relative;
  max-width: 840px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fcs26 .tl::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 12px;
  bottom: 24px;
  width: 1px;
  background: var(--line);
}
.fcs26 .tl__item { position: relative; padding: 0 0 38px 62px; }
.fcs26 .tl__item:last-child { padding-bottom: 0; }
/* 36px marker at left:0 centers on 18px; the rail sits at 17px with 1px width,
   so the two line up. Keep these three numbers in step. */
.fcs26 .tl__dot {
  position: absolute;
  left: 0;
  top: -3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: #fff;
  color: var(--accent);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.fcs26 .tl h3 { margin-bottom: 8px; }
.fcs26 .tl p { font-size: 15.5px; color: var(--ink-soft); max-width: 64ch; }

/* ---- process as a flow ------------------------------------------------ */

/* Horizontal rather than vertical: the steps sit side by side as columns with
   a rule above each, which suits a short process where the point is that it is
   quick rather than that it is thorough. */
.fcs26 .flow {
  display: grid;
  /* The row gap is not optional. Where the count does not divide into the
     column count the last items wrap, and with no row gap their accent rules
     land directly under the paragraph above and read as an underline. */
  gap: 44px 32px;
  margin: 0;
  padding: 0;
  list-style: none;

  /* Single column is the floor. The widths below build up from it.
     CHANGE_ID fc-flow-orphan-20260916 */
  grid-template-columns: minmax(0, 1fr);
}

/* THE ORPHAN. Every one of these flows is a five step process, and the old
   `repeat(auto-fit, minmax(210px, 1fr))` produced four columns in the 1152px
   content column, so step 5 dropped onto a second row on its own and read as
   an afterthought rather than the end of the sequence. Dawson called it "4 on
   top then 1 random one below", which is exactly what it was.

   A five step process only tiles cleanly as five across or one down, so this
   does not try to be clever with auto-fit. It states the counts.

   Mid widths cannot fit five, so they go to two and the last step spans the
   full width. That reads as the closing step of the process rather than as a
   leftover, which is the whole complaint. */
@media (min-width: 1080px) {
  .fcs26 .flow {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 40px 24px;
  }
  /* Five narrow columns, so the headings need to be a touch tighter or every
     one of them wraps to three lines. */
  .fcs26 .flow h3 { font-size: 17px; line-height: 1.25; }
}

@media (min-width: 640px) and (max-width: 1079px) {
  .fcs26 .flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fcs26 .flow > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
.fcs26 .flow__item {
  padding: 22px 0 0;
  border-top: 3px solid var(--accent);
}
.fcs26 .flow__n {
  display: block;
  margin-bottom: 10px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.fcs26 .flow h3 { margin-bottom: 8px; font-size: 18px; }
.fcs26 .flow p { font-size: 15px; color: var(--ink-soft); margin: 0; }

/* ---- included as chips ------------------------------------------------ */

.fcs26 .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 960px;
}
.fcs26 .chips li {
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 14.5px;
  color: var(--ink-soft);
}

/* ---- included as ruled columns ---------------------------------------- */

.fcs26 .cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.fcs26 .cols li {
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
  color: var(--ink-soft);
}

/* ==========================================================================
   The one-of-a-kind section (tools/svc_extra.py)
   ========================================================================== */

/* ---- as a table ------------------------------------------------------- */

.fcs26 .xtab__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fcs26 .xtab {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  text-align: left;
  font-size: 15.5px;
}
.fcs26 .xtab thead th {
  padding: 14px 18px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.fcs26 .xtab thead th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.fcs26 .xtab thead th:last-child { border-radius: 0 var(--radius-sm) 0 0; }
.fcs26 .xtab tbody th {
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}
.fcs26 .xtab tbody th,
.fcs26 .xtab tbody td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-soft);
}
.fcs26 .xtab tbody tr:nth-child(odd) { background: var(--wash); }
/* On the washed band the zebra would vanish, so it inverts there. */
.fcs26 .band--wash .xtab tbody tr:nth-child(odd) { background: #fff; }

/* The column label that only appears in the stacked phone view below. */
.fcs26 .xtab__lab { display: none; }

/* ---- the same table, stacked, on a phone -------------------------------
   These tables carry two columns of prose and were given min-width: 620px,
   so on a 390px screen the wrapper was 354px wide and between 43% and 52% of
   every one of them sat off-screen behind a sideways drag nothing advertised.
   The page itself never overflowed, which is why it looked fine to a
   document-level check.

   Below 720px each row becomes a card: the row header is the title, and each
   cell carries the label of the column it came from. Nothing is hidden and
   nothing needs dragging.

   The role attributes in the markup are what keep this accessible. Setting
   display:block on table elements drops their implicit ARIA semantics, and
   the explicit roles put them back, so a screen reader still announces the
   cell with its column. tools/stack_tables.py adds them.
   ------------------------------------------------------------------------ */
@media (max-width: 720px) {
  .fcs26 .xtab__scroll { overflow-x: visible; }

  .fcs26 .xtab {
    min-width: 0;
    width: 100%;
    display: block;
    font-size: 15px;
  }

  /* The header row has nowhere to go once the columns stack, and every cell
     now carries its own label instead. */
  .fcs26 .xtab thead { display: none; }

  .fcs26 .xtab tbody { display: block; }

  .fcs26 .xtab tbody tr {
    display: block;
    margin: 0 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #fff;
  }

  /* The zebra striping was doing the work of separating rows. Cards do that
     now, so it would only muddy them. */
  .fcs26 .xtab tbody tr:nth-child(odd),
  .fcs26 .band--wash .xtab tbody tr:nth-child(odd) { background: #fff; }

  .fcs26 .xtab tbody tr:last-child { margin-bottom: 0; }

  /* The row header becomes the card title. white-space:nowrap was fine in a
     620px grid and would force an overflow in a 354px card. */
  .fcs26 .xtab tbody th {
    display: block;
    white-space: normal;
    padding: 12px 16px;
    background: var(--ink);
    color: #fff;
    font-size: 15px;
    line-height: 1.3;
    border-bottom: 0;
  }

  .fcs26 .xtab tbody td {
    display: block;
    padding: 12px 16px 14px;
    border-bottom: 1px solid var(--line);
  }

  .fcs26 .xtab tbody td:last-child { border-bottom: 0; }

  .fcs26 .xtab__lab {
    display: block;
    margin: 0 0 4px;
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
  }
}

/* ---- as a definition list --------------------------------------------- */

.fcs26 .defs { margin: 0; max-width: 980px; border-top: 1px solid var(--line); }
.fcs26 .defs__row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0 40px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.fcs26 .defs dt {
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -.01em;
}
.fcs26 .defs dd {
  margin: 0;
  font-size: 15.5px;
  color: var(--ink-soft);
}

/* ---- as a ladder ------------------------------------------------------ */

/* For anything that gets worse in sequence. The key column is set in the
   accent and kept narrow, so the page can be read down that column alone. */
.fcs26 .lad { margin: 0; padding: 0; list-style: none; max-width: 980px; }
.fcs26 .lad__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 0 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.fcs26 .lad__row:first-child { border-top: 1px solid var(--line); }
.fcs26 .lad__k {
  font-size: 15px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.fcs26 .lad h3 { margin-bottom: 8px; font-size: 18px; }
.fcs26 .lad p { margin: 0; font-size: 15.5px; color: var(--ink-soft); }

/* ---- the closing note under any of the three -------------------------- */

.fcs26 .xfoot {
  margin-top: 28px;
  max-width: 76ch;
  padding-left: 20px;
  border-left: 3px solid var(--accent);
  font-size: 15.5px;
  color: var(--ink-soft);
}

/* ---- narrow --------------------------------------------------------- */

@media (max-width: 860px) {
  .fcs26 .ledger,
  .fcs26 .cols { grid-template-columns: minmax(0, 1fr); }
  .fcs26 .defs__row,
  .fcs26 .lad__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fcs26 .lad__k { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
}


/* ---- the waiting room, Royal Oak only --------------------------------- */

/* Two photographs and a list, arranged so the pair reads as one object. The
   big frame is portrait-ish and the small one squares off beneath it, which is
   what stops this looking like another two-up split. */
.fcs26 .waitgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 20px 56px;
  align-items: start;
}
.fcs26 .waitgrid__big,
.fcs26 .waitgrid__small {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(29, 31, 33, .12);
}
.fcs26 .waitgrid__big { grid-column: 1; grid-row: 1; }
.fcs26 .waitgrid__small { grid-column: 1; grid-row: 2; width: 62%; }
.fcs26 .waitgrid__body { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.fcs26 .waitgrid img { display: block; width: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

.fcs26 .waitlist { margin: 26px 0 0; padding: 0; list-style: none; }
.fcs26 .waitlist li {
  position: relative;
  margin: 0 0 16px;
  padding-left: 26px;
  font-size: 15.5px;
  color: var(--ink-soft);
}
.fcs26 .waitlist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.fcs26 .waitlist b { color: var(--ink); font-weight: 700; }

@media (max-width: 900px) {
  .fcs26 .waitgrid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .fcs26 .waitgrid__big,
  .fcs26 .waitgrid__small,
  .fcs26 .waitgrid__body { grid-column: 1; grid-row: auto; }
  .fcs26 .waitgrid__small { width: 100%; }
  .fcs26 .waitgrid__body { margin-top: 12px; }
}


/* ---- the fact band ---------------------------------------------------- */

/* One mechanical fact per service, set large on a dark ground. It is the only
   full width dark section in the middle of a service page, which is the point:
   it breaks a long scroll of white and washed bands, and it sits at a
   different depth on every page. */
.fcs26 .factband {
  padding-block: 76px;
  background:
    radial-gradient(900px 340px at 14% 0%, rgba(200, 54, 47, .30), transparent 68%),
    #17181b;
  color: #fff;
}
.fcs26 .factband__label {
  margin: 0 0 18px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ff9d96;
}
.fcs26 .factband__h {
  margin: 0;
  max-width: 20ch;
  font-size: 40px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.022em;
  color: #fff;
  text-wrap: balance;
}
.fcs26 .factband__p {
  margin: 22px 0 0;
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.66;
  color: rgba(255, 255, 255, .78);
}
@media (max-width: 860px) {
  .fcs26 .factband { padding-block: 56px; }
  .fcs26 .factband__h { font-size: 29px; }
  .fcs26 .factband__p { font-size: 16px; }
}


/* ---- amenities strip (city pages) ------------------------------------- */

/* The practical answers to "what happens to my morning". Three up, ruled
   rather than boxed, so it does not read as another card grid. */
.fcs26 .amen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 48px;
  border-top: 1px solid var(--line);
}
.fcs26 .amen__item {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.fcs26 .amen__item b {
  display: block;
  margin-bottom: 6px;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.01em;
}
.fcs26 .amen__item span { font-size: 15px; color: var(--ink-soft); }

@media (max-width: 1000px) { .fcs26 .amen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .fcs26 .amen { grid-template-columns: minmax(0, 1fr); } }

/* ---- one real review (city pages) ------------------------------------- */

.fcs26 .quote {
  margin: 0;
  max-width: 900px;
  padding: 44px 0 0;
  border-top: 3px solid var(--accent);
}
/* 264x22, under AA. CHANGE_ID fc-tap-targets-20260916 */
.fcs26 .quote > a {
  display: inline-block;
  padding-block: 8px;
}

.fcs26 .quote__stars {
  margin: 0 0 20px;
  font-size: 19px;
  letter-spacing: .18em;
  color: var(--accent);
}
.fcs26 .quote blockquote {
  margin: 0;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -.012em;
  color: var(--ink);
  text-wrap: pretty;
}
.fcs26 .quote figcaption {
  margin-top: 26px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
.fcs26 .quote figcaption span {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-faint);
}
.fcs26 .quote__all {
  display: inline-block;
  margin-top: 22px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}
@media (max-width: 860px) {
  .fcs26 .quote blockquote { font-size: 20px; }
}

/* Directions link inside the address card of the city page facts strip. */
.fcs26 .locfact__dir {
  display: inline-block;
  margin-top: 6px;
  padding-block: 6px;          /* 18px tall was too small to hit on a phone */
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.fcs26 .locfact__dir::after { content: " \2192"; }
.fcs26 .locfact__dir:hover { text-decoration: underline; }

/* The reviews link under the closing call to action. Quiet on purpose: it is a
   reason to act, not a competing button. */
.fcs26 .svc-cta__reviews { margin: 16px 0 0; font-size: 14.5px; }
/* The brand red is 3.17:1 on the dark CTA band, an AA failure on a link
   people use. Same hue and saturation lifted in lightness to 4.88:1 here
   and 5.35:1 on the footer's darker ground, so one value serves both.
   CHANGE_ID fc-contrast-20260916 */
.fcs26 .svc-cta__reviews a {
  display: inline-block;
  padding-block: 6px;          /* touch target */
  color: #da6964;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fcs26 .svc-cta__reviews a:hover { color: #fff; }