/* Frisco Tree Care Pros
   A single stylesheet, written by hand. System fonts only.

   Palette
     --rootflare  #2a3d23  dark green: header, footer, closing band
     --sapwood    #456838  lighter green: the far end of the banner fade, table rules
     --redbud     #b02a78  buttons, links, small labels
     --redbud-deep #8a1f5d hover state for the above
     --bloom      #ec8fc6  pink used in small amounts: brand word, markers, tags

   Contrast ratios are listed at the foot of this file.
*/

:root {
  --rootflare: #2a3d23;
  --easel-scrim: 42, 61, 35;          /* --rootflare as channels, for the photo banner */
  --sapwood: #456838;
  --redbud: #b02a78;
  --redbud-deep: #8a1f5d;
  --bloom: #ec8fc6;
  --ivory-field: #f6f8f3;
  --mesa-pure: #ffffff;
  --tide-copy-c: #1b2418;
  --medal-understated: #55604f;
  --fennel-margin-c: #d5ddcd;
  --orbit-rounding: 10px;
  --narrow-maxw: 1120px;
  --bold-pin-h: 64px;                /* fixed bar: 10 + 44 + 10 */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding-bottom: var(--bold-pin-h);
  background: var(--ivory-field);
  color: var(--tide-copy-c);
  font: 17px/1.6 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
img { display: block; max-width: 100%; }
a { color: var(--redbud); text-underline-offset: 2px; }
a:hover { color: var(--redbud-deep); }
h1, h2, h3 { line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: 1.7rem; margin: 0 0 14px; color: var(--rootflare); }
h3 { font-size: 1.1rem; margin: 0 0 6px; color: var(--rootflare); }
.jewel-gutter { max-width: var(--narrow-maxw); margin: 0 auto; padding: 0 22px; }

/* ---- top strip ---- */
header.garnet-site { background: var(--rootflare); color: var(--mesa-pure); }
header.garnet-site .olive-crossbar {
  max-width: var(--narrow-maxw); margin: 0 auto; padding: 10px 22px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
}
header.garnet-site .alder-insignia {
  display: inline-flex; align-items: center; gap: 10px; margin-right: auto;
  color: var(--mesa-pure); font-weight: 800; font-size: 1.08rem; text-decoration: none;
}
header.garnet-site .alder-insignia span { color: var(--bloom); }
.fair-stamp-mark { width: 38px; height: 38px; flex: none; border-radius: 50%; }
header.garnet-site nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
header.garnet-site nav a { color: #d6e0cf; font-size: 0.92rem; text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
header.garnet-site nav a:hover { color: var(--mesa-pure); border-bottom-color: var(--bloom); }
header.garnet-site .cove-handset-link {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 16px; border-radius: 999px; background: var(--redbud);
  color: var(--mesa-pure); font-weight: 700; text-decoration: none;
}
header.garnet-site .cove-handset-link:hover { background: var(--redbud-deep); }
@media (max-width: 1080px) {
  header.garnet-site nav { order: 3; flex-basis: 100%; }
}
@media (max-width: 600px) {
  header.garnet-site .olive-crossbar { justify-content: center; }
  header.garnet-site .alder-insignia { margin-right: 0; }
  header.garnet-site nav { justify-content: center; gap: 2px 14px; }
}

/* ---- banner ---- */
.russet-marquee-block { background: linear-gradient(120deg, var(--rootflare) 40%, var(--sapwood)); color: var(--mesa-pure); padding: 46px 22px 42px; }
.russet-marquee-block .jewel-gutter { padding: 0; }
.russet-marquee-block .acorn-banner-line {
  display: inline-block; margin-bottom: 12px; padding: 3px 12px; border-radius: 999px;
  background: var(--bloom); color: var(--tide-copy-c); font-size: 0.8rem; font-weight: 700;
}
.russet-marquee-block h1 { margin: 0 0 14px; max-width: 780px; font-size: 2.35rem; }
.russet-marquee-block p.topaz-intro { margin: 0 0 20px; max-width: 660px; font-size: 1.1rem; color: #e9f0e3; }
.russet-marquee-block .arbor-choice-row { display: flex; flex-wrap: wrap; gap: 12px; }
.russet-marquee-block .vane-marginalia { margin: 16px 0 0; max-width: 640px; font-size: 0.9rem; color: #dbe5d3; }
.russet-marquee-block.even-pictured {
  min-height: 520px; display: flex; align-items: center;
  background-image:
    linear-gradient(90deg, rgba(var(--easel-scrim), 0.96) 0%, rgba(var(--easel-scrim), 0.88) 42%, rgba(var(--easel-scrim), 0.38) 72%, rgba(var(--easel-scrim), 0.08) 100%),
    url('/images/hero-tree-row.jpg');
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.russet-marquee-block.even-pictured .jewel-gutter { width: 100%; }
@media (max-width: 800px) {
  .russet-marquee-block h1 { font-size: 1.75rem; }
  .russet-marquee-block.even-pictured {
    min-height: 440px;
    background-image:
      linear-gradient(180deg, rgba(var(--easel-scrim), 0.93) 0%, rgba(var(--easel-scrim), 0.88) 55%, rgba(var(--easel-scrim), 0.74) 100%),
      url('/images/hero-tree-row-mobile.jpg');
  }
}

/* ---- buttons ---- */
.dune-cta { display: inline-block; padding: 12px 24px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.dune-cta.far-lead-btn { background: var(--redbud); color: var(--mesa-pure); }
.dune-cta.far-lead-btn:hover { background: var(--redbud-deep); color: var(--mesa-pure); }
.dune-cta.hollow-bare-btn { padding: 10px 22px; border: 2px solid rgba(255, 255, 255, 0.6); color: var(--mesa-pure); }
.dune-cta.hollow-bare-btn:hover { background: rgba(255, 255, 255, 0.15); color: var(--mesa-pure); }

/* ---- sections ---- */
section { padding: 46px 22px; }
section.gamma-alt { background: var(--mesa-pure); }
section .jewel-gutter { padding: 0; }
.ready-group-label { margin-bottom: 6px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--redbud); }
section p, section li { max-width: 760px; }
.leafy-copy ul, .leafy-copy ol { padding-left: 22px; margin: 0 0 16px; }
.leafy-copy li { margin-bottom: 7px; }
.leafy-copy h3 { margin-top: 22px; }

/* the short answer box that opens most pages */
.short-answer { max-width: 760px; margin: 0 0 22px; padding: 16px 20px; background: var(--mesa-pure); border: 1px solid var(--fennel-margin-c); border-radius: var(--orbit-rounding); box-shadow: inset 5px 0 0 var(--bloom); }
section.gamma-alt .short-answer { background: var(--ivory-field); }
.short-answer p { margin: 0; }
.short-answer p + p { margin-top: 8px; }

/* where a fact came from */
.sourced-note { max-width: 760px; margin: 0 0 16px; font-size: 0.86rem; color: var(--medal-understated); }

/* the line between what a tree crew does and what somebody else does */
.not-crew-work { max-width: 760px; margin: 18px 0; padding: 14px 18px; border: 2px dashed var(--sapwood); border-radius: var(--orbit-rounding); background: #e6ecdf; }
.not-crew-work p { margin: 0; }
.not-crew-work p + p { margin-top: 8px; }

/* tree age chart: one row per planting era */
.ring-timeline { list-style: none; margin: 0 0 18px; padding: 0; max-width: 900px; }
.ring-row { display: grid; grid-template-columns: 170px 1fr; gap: 6px 22px; padding: 16px 0; border-top: 1px solid var(--fennel-margin-c); }
.ring-row:first-child { border-top: 0; }
.ring-years { font-weight: 800; color: var(--rootflare); }
.ring-years small { display: block; font-weight: 400; font-size: 0.84rem; color: var(--medal-understated); }
.ring-row p { margin: 0 0 6px; }
@media (max-width: 640px) { .ring-row { grid-template-columns: 1fr; } }

/* a row of plain figures */
.lot-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0 0 8px; }
.lot-facts div { padding: 16px 18px; border-radius: var(--orbit-rounding); background: var(--rootflare); color: var(--mesa-pure); }
.lot-facts dt { font-size: 1.6rem; font-weight: 800; color: var(--bloom); }
.lot-facts dd { margin: 4px 0 0; font-size: 0.9rem; color: #dbe5d3; }
@media (max-width: 860px) { .lot-facts { grid-template-columns: repeat(2, 1fr); } }

/* tables */
.hub-table-slide { max-width: 900px; margin: 0 0 16px; overflow-x: auto; }
.knot-schedule-table { width: 100%; border-collapse: collapse; background: var(--mesa-pure); font-size: 0.95rem; }
.knot-schedule-table th, .knot-schedule-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--fennel-margin-c); }
.knot-schedule-table th { background: #e6ecdf; color: var(--rootflare); border-bottom: 2px solid var(--sapwood); }
.knot-schedule-table td:first-child { font-weight: 700; color: var(--rootflare); }
@media (max-width: 640px) { .knot-schedule-table { min-width: 520px; } }

/* cards */
.quarry-mosaic { display: grid; gap: 18px; }
.quarry-mosaic.glint-two-across { grid-template-columns: repeat(2, 1fr); }
.quarry-mosaic.gilded-trisect { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .quarry-mosaic.glint-two-across, .quarry-mosaic.gilded-trisect { grid-template-columns: 1fr; } }
.sincere-box { padding: 18px 20px; background: var(--mesa-pure); border: 1px solid var(--fennel-margin-c); border-radius: var(--orbit-rounding); }
section.gamma-alt .sincere-box { background: var(--ivory-field); }
.sincere-box p { margin: 0 0 8px; font-size: 0.95rem; color: var(--medal-understated); }
.sincere-box a { font-weight: 700; font-size: 0.93rem; }
.age-tag { display: inline-block; margin-bottom: 8px; padding: 2px 10px; border-radius: 999px; background: #e6ecdf; color: var(--rootflare); font-size: 0.78rem; font-weight: 700; }

/* numbered steps */
.sail-procedure { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fable-step-card { padding: 18px 20px; background: var(--mesa-pure); border-radius: var(--orbit-rounding); border: 1px solid var(--fennel-margin-c); }
section.gamma-alt .fable-step-card { background: var(--ivory-field); }
.fable-step-card .wren-rung-index { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 10px; border-radius: 50%; background: var(--rootflare); color: var(--mesa-pure); font-weight: 800; }
.fable-step-card p { margin: 0; font-size: 0.95rem; color: var(--medal-understated); }
@media (max-width: 880px) { .sail-procedure { grid-template-columns: 1fr; } }

/* questions that open and close */
.question-set { max-width: 820px; }
.nexus-qa { border-bottom: 1px solid var(--fennel-margin-c); }
.nexus-qa summary { padding: 14px 28px 14px 0; cursor: pointer; font-weight: 700; color: var(--rootflare); list-style-position: outside; }
.nexus-qa summary:hover { color: var(--redbud); }
.nexus-qa p { margin: 0 0 14px; color: var(--medal-understated); }

/* pill links */
.axis-area-links { display: flex; flex-wrap: wrap; gap: 8px; }
.axis-area-links a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--sapwood); background: var(--mesa-pure); color: var(--rootflare); font-size: 0.92rem; text-decoration: none; }
.axis-area-links a:hover { background: var(--rootflare); color: var(--mesa-pure); }

/* closing band */
.moss-cta-band { padding: 40px 22px; background: var(--rootflare); color: var(--mesa-pure); }
.moss-cta-band h2 { color: var(--mesa-pure); margin-bottom: 8px; }
.moss-cta-band p { margin: 0 0 18px; max-width: 640px; color: #d6e0cf; }
.moss-cta-band .dune-cta { margin: 0 8px 8px 0; }

/* contact form */
form.gamma-approach { display: grid; gap: 14px; max-width: 520px; }
form.gamma-approach label { display: block; margin-bottom: 4px; font-size: 0.88rem; font-weight: 700; color: var(--rootflare); }
form.gamma-approach input, form.gamma-approach select, form.gamma-approach textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #8a9783; border-radius: 6px;
  background: var(--mesa-pure); color: var(--tide-copy-c); font: inherit;
}
form.gamma-approach button { border: 0; cursor: pointer; font: inherit; font-weight: 700; justify-self: start; }
form.gamma-approach button[disabled] { opacity: 0.6; cursor: not-allowed; }
form.gamma-approach .helm-legal-note { margin: 0; font-size: 0.82rem; color: var(--medal-understated); }
form.gamma-approach .medal-aux-line { position: absolute; left: -9999px; top: -9999px; }
.zenith-answer-line { display: none; padding: 11px 14px; border-radius: 6px; font-size: 0.93rem; }
.zenith-answer-line.visible { display: block; }
.zenith-answer-line.success { background: #e3f1e0; color: #1f5a22; }
.zenith-answer-line.error { background: #fbe7ec; color: #96182f; }

/* breadcrumb */
.spire-crumb { max-width: var(--narrow-maxw); margin: 0 auto; padding: 12px 22px; font-size: 0.84rem; color: var(--medal-understated); }
.spire-crumb a { color: var(--medal-understated); }

/* referral note */
.forge-made-plain { max-width: 760px; margin-top: 20px; padding: 12px 16px; border-radius: var(--orbit-rounding); background: #e6ecdf; color: var(--medal-understated); font-size: 0.9rem; }

/* footer */
footer.garnet-site { padding: 36px 22px 20px; background: #1c2a17; color: #aebba6; font-size: 0.9rem; }
footer.garnet-site .jewel-gutter { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 26px; padding: 0; }
footer.garnet-site h2 { margin: 0 0 10px; font-size: 0.92rem; color: var(--mesa-pure); }
footer.garnet-site p { margin: 0; }
footer.garnet-site ul { list-style: none; margin: 0; padding: 0; }
footer.garnet-site li { margin-bottom: 6px; }
footer.garnet-site a { color: #aebba6; }
footer.garnet-site a:hover { color: var(--mesa-pure); }
footer.garnet-site .canyon-footer-lower { max-width: var(--narrow-maxw); margin: 24px auto 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.8rem; }
footer.garnet-site .canyon-footer-lower span { display: block; margin-bottom: 4px; }
@media (max-width: 900px) { footer.garnet-site .jewel-gutter { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { footer.garnet-site .jewel-gutter { grid-template-columns: 1fr; } }

/* bar fixed to the bottom edge, shown at every width */
.fable-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--rootflare); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.22);
}
.fable-sticky-cta-inner { display: flex; gap: 10px; max-width: var(--narrow-maxw); margin: 0 auto; }
.fable-sticky-cta a {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px;
  padding: 0 12px; border-radius: 999px; font-weight: 700; font-size: 0.9rem;
  white-space: nowrap; text-decoration: none;
}
.fable-sticky-cta .vale-phone-glyph { flex: none; }
.fable-sticky-cta-call { flex: 3; background: var(--redbud); color: var(--mesa-pure); }
.fable-sticky-cta-call:hover { background: var(--redbud-deep); color: var(--mesa-pure); }
.fable-sticky-cta-quote { flex: 2; border: 1px solid rgba(255, 255, 255, 0.55); color: var(--mesa-pure); }
.fable-sticky-cta-quote:hover { background: rgba(255, 255, 255, 0.16); color: var(--mesa-pure); }
.fable-sticky-cta .thyme-subclause { display: none; }
@media (min-width: 600px) { .fable-sticky-cta .thyme-subclause { display: inline; } }
@media (min-width: 780px) {
  .fable-sticky-cta-inner { justify-content: flex-end; }
  .fable-sticky-cta a { flex: 0 0 auto; padding: 0 26px; font-size: 0.96rem; }
}

/* reviews: only printed when turned on */
.lotus-commendations .loyal-voice p { color: var(--tide-copy-c); }
.lotus-commendations .fore-ranking { margin: 0 0 6px; color: var(--redbud); letter-spacing: 2px; }
.lotus-commendations .thimble-credited { font-size: 0.88rem; color: var(--medal-understated); }

/* flags a value that still has to be filled in */
.low-unfilled { padding: 1px 6px; border: 1px dashed #a08a00; background: #fff7cc; color: #574a00; font-size: 0.85em; }

/* one photo on each tree work page. The cap on the image is what keeps
   it from stretching the full width of a desktop window. */
.warm-site-shot { max-width: var(--narrow-maxw); margin: 0 auto; padding: 0 22px 10px; }
.warm-site-shot img { width: 100%; max-width: 700px; height: auto; margin: 0; border-radius: var(--orbit-rounding); box-shadow: 0 2px 8px rgba(27, 36, 24, 0.22); }

/* home page photo block: nine pictures, three across at every width.
   height:auto is needed or the height attribute wins over aspect-ratio. */
.fore-job-band .ruby-strip-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 900px; }
.fore-job-band img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; background: var(--mesa-pure); }
@media (max-width: 560px) { .fore-job-band .ruby-strip-items { gap: 6px; } }

/* Contrast, measured (4.5:1 is the floor for body text, 3:1 for large text)
     --tide-copy-c on --ivory-field                      14.97:1
     --medal-understated on --ivory-field                     6.19:1
     --medal-understated on white                    6.62:1
     --medal-understated on #e6ecdf                  5.49:1
     white on --rootflare               11.73:1
     white on --sapwood                  6.38:1
     white on --redbud                   6.09:1
     white on --redbud-deep              8.63:1
     --redbud on --ivory-field                    5.70:1
     --redbud on white                   6.09:1
     --redbud-deep on --ivory-field               8.07:1
     --rootflare on --ivory-field                10.97:1
     --rootflare on #e6ecdf              9.74:1
     nav #d6e0cf on --rootflare          8.61:1
     lead #e9f0e3 on --rootflare        10.08:1
     lead #e9f0e3 on --sapwood           5.48:1
     note #dbe5d3 on --rootflare         9.03:1
     note #dbe5d3 on --sapwood           4.91:1
     --bloom on --rootflare              5.20:1
     --tide-copy-c on --bloom                    7.10:1
     footer #aebba6 on #1c2a17           7.51:1
     success #1f5a22 on #e3f1e0          7.05:1
     error #96182f on #fbe7ec            7.19:1
     ink on #e6ecdf                     13.28:1
     #574a00 on #fff7cc                  8.15:1
   The banner fades from --rootflare to --sapwood, so its text is checked on both. */

/* --- Phone header (2026-10-15) ------------------------------------------
   On phones the desktop header stacked into a tall block that stayed pinned
   over the content, and its call button repeated the fixed bottom bar. Under
   820px: the full header sits at the top of the page and scrolls away (the
   name on one line, the nav in tidy centered rows, no call button), and once
   it has gone a slim bar with the name and a menu button slides down. The
   header script adds .trim-head past the header's own height and .index-open while
   the menu is open. */
header.garnet-site .drawer-knob { display: none; }
@media (max-width: 820px) {
  header.garnet-site { position: static; }
  header.garnet-site .olive-crossbar {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    padding: 8px 12px 2px;
    gap: 0;
  }
  header.garnet-site .alder-insignia {
    display: block;
    position: relative;
    padding-left: 46px;
    min-height: 38px;
    line-height: 38px;
    white-space: nowrap;
    font-size: clamp(0.9rem, 5.40vw, 1.08rem);
  }
  header.garnet-site .alder-insignia .fair-stamp-mark {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  header.garnet-site nav { flex: 1 0 100%; margin: 0; }
  header.garnet-site nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  header.garnet-site nav li { margin: 0; padding: 0; }
  header.garnet-site nav a {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding-left: 0;
    padding-right: 0;
    white-space: nowrap;
    font-size: 0.88rem;
  }
  header.garnet-site .cove-handset-link { display: none; }

  header.garnet-site.trim-head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 65;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    animation: glide-lid 0.2s ease-out;
  }
  header.garnet-site.trim-head .olive-crossbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 2px 4px 2px 12px;
    background: inherit;
  }
  header.garnet-site.trim-head > :not(.olive-crossbar):not(nav):not(script),
  header.garnet-site.trim-head > .olive-crossbar > :not(.alder-insignia):not(.drawer-knob):not(nav),
  header.garnet-site.trim-head nav { display: none; }
  header.garnet-site.trim-head .alder-insignia {
    flex: 0 1 auto;
    min-width: 0;
    white-space: normal;
  }
  header.garnet-site.trim-head .alder-insignia > * { white-space: nowrap; }
  header.garnet-site.trim-head .alder-insignia {
    padding-left: 34px;
    min-height: 0;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(0.81rem, 5.31vw, 1.06rem);
  }
  header.garnet-site.trim-head .alder-insignia .fair-stamp-mark { width: 26px; height: 26px; }
  header.garnet-site.trim-head .drawer-knob {
    display: flex;
    flex: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 11px;
    background: none;
    border: 0;
    color: rgb(214, 224, 207);
    cursor: pointer;
  }
  header.garnet-site .drawer-knob span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.2s, opacity 0.2s;
  }
  header.garnet-site.index-open .drawer-knob span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  header.garnet-site.index-open .drawer-knob span:nth-child(2) { opacity: 0; }
  header.garnet-site.index-open .drawer-knob span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  header.garnet-site.trim-head.index-open nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0 0 8px;
    background: rgb(42, 61, 35);
    box-shadow: 0 8px 14px rgba(0,0,0,0.25);
    max-height: calc(100vh - 130px);
    overflow-y: auto;
  }
  header.garnet-site.trim-head.index-open nav { display: flex; flex-direction: column; gap: 0; }
  header.garnet-site.trim-head.index-open nav a {
    min-height: 48px;
    padding: 0 20px;
    font-size: 1rem;
    text-align: left;
    border-top: 1px solid rgba(127,127,127,0.2);
  }
}
/* At 320px the bottom bar's second button ran off the screen. */
@media (max-width: 380px) {
  .fable-sticky-cta { height: auto; min-height: 0; padding: 0 0 env(safe-area-inset-bottom); }
  .fable-sticky-cta-inner { height: auto; min-height: 0; padding: 7px 10px; gap: 8px; }
  .fable-sticky-cta .fable-sticky-cta-call, .fable-sticky-cta .fable-sticky-cta-quote { padding: 10px 6px; line-height: 1.2; font-size: 0.8rem; gap: 5px; min-width: 0; white-space: nowrap; }
  .fable-sticky-cta-inner > :not(a) { display: none; }
}
@keyframes glide-lid { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  header.garnet-site.trim-head { animation: none; }
  header.garnet-site .drawer-knob span { transition: none; }
}

/* --- Phone detail (2026-10-15) ---
   At 320px "200,509" could not fit its half-width tile and pushed the page sideways. */
@media (max-width: 380px) {
  .lot-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .lot-facts div { padding: 14px 12px; }
  .lot-facts dt { font-size: 1.35rem; }
}

.picture-field input[type="file"] { display: block; width: 100%; box-sizing: border-box; padding: 9px 10px; background: #fff; color: #222; font-size: 0.9rem; }
.picture-field label span { font-weight: 400; opacity: 0.7; }
.file-note { font-size: 0.8rem; opacity: 0.75; margin: 6px 0 0; }
.chosen-files { list-style: none; margin: 6px 0 0; padding: 0; font-size: 0.82rem; }
.chosen-files:empty, .attach-alert:empty { display: none; }
.chosen-files li { padding: 2px 0; overflow-wrap: anywhere; }
.attach-alert { margin: 6px 0 0; font-size: 0.85rem; font-weight: 600; color: #b42318; }

/* --- Phone body (2026-10-15) ---------------------------------------------
   On phones: body text runs 16px from the screen edge instead of 40px, and
   a centered row that wraps into a stack is left-aligned instead. */
@media (max-width: 820px) {
  section,
  section.fore-job-band.gamma-alt.fore-job-band,
  section.gamma-alt.gamma-alt,
  section.moss-cta-band.moss-cta-band,
  section.russet-marquee-block.even-pictured.russet-marquee-block,
  section.russet-marquee-block.russet-marquee-block { padding-left: 16px; padding-right: 16px; }
}

/* --- Card icons (2026-10-15) ---------------------------------------------
   A card's icon sits on the same line as its heading instead of on a line
   of its own above it; the text below spans the full card. */
li.fable-step-card:has(> span.wren-rung-index + h3) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: center; }
li.fable-step-card:has(> span.wren-rung-index + h3) > * { grid-column: 1 / -1; min-width: 0; }
li.fable-step-card:has(> span.wren-rung-index + h3) > span.wren-rung-index { grid-column: 1; margin: 0; }
li.fable-step-card:has(> span.wren-rung-index + h3) > span.wren-rung-index + h3 { grid-column: 2; margin-top: 0; margin-bottom: 0; }

/* --- Header spacing (2026-10-15) ---------------------------------------------
   Desktop: the same header in less height (its rows' vertical padding cut by
   about a third). Phones have their own header block above. */
@media (min-width: 821px) {
  header.garnet-site div.olive-crossbar { padding-top: 6px; padding-bottom: 6px; }
}

header.garnet-site #dock-sections .cluster-item { position: relative; display: inline-flex; align-items: center; gap: 0; margin: 0; padding: 0; }
header.garnet-site #dock-sections .arrow-flip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 28px; margin: 0 0 0 1px; padding: 0;
  background: none; border: 0; color: rgb(214, 224, 207); cursor: pointer;
}
header.garnet-site #dock-sections .arrow-flip::before {
  content: ""; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor;
  transition: transform 0.15s;
}
header.garnet-site #dock-sections .cluster-item.fanned-branch > .arrow-flip::before { transform: rotate(180deg); }
header.garnet-site #dock-sections .child-panel {
  display: none; position: absolute; top: 100%; left: -14px; z-index: 90;
  min-width: 220px; max-width: min(620px, calc(100vw - 16px)); padding: 6px 0;
  background: rgb(42, 61, 35); border-radius: 6px; box-shadow: 0 10px 24px rgba(0,0,0,0.28);
  text-align: left; column-gap: 0;
}
header.garnet-site #dock-sections .child-panel[data-cols="2"] { columns: 2; min-width: 400px; }
header.garnet-site #dock-sections .child-panel[data-cols="3"] { columns: 3; min-width: 560px; }
header.garnet-site #dock-sections .cluster-item.fanned-branch > .child-panel { display: block; }
@media (hover: hover) and (min-width: 821px) {
  header.garnet-site #dock-sections .cluster-item:hover > .child-panel { display: block; }
}
header.garnet-site #dock-sections .child-panel a {
  display: block; min-height: 0; margin: 0; padding: 7px 16px; border: 0;
  color: rgb(214, 224, 207); font-size: 0.9rem; line-height: 1.3; white-space: nowrap; text-align: left;
  break-inside: avoid;
}
header.garnet-site #dock-sections .child-panel a:hover, header.garnet-site #dock-sections .child-panel a:focus-visible { background: rgba(255,255,255,0.09); color: #fff; text-decoration: none; }
header.garnet-site #dock-sections .child-panel a.full-way { column-span: all; font-weight: 600; border-bottom: 1px solid rgba(127,127,127,0.3); margin-bottom: 4px; padding-bottom: 8px; }
@media (max-width: 820px) {
  header.garnet-site #dock-sections .cluster-item { position: static; flex-wrap: wrap; justify-content: center; }
  header.garnet-site #dock-sections .cluster-item.fanned-branch { flex-basis: 100%; }
  header.garnet-site #dock-sections .arrow-flip { width: 18px; height: 34px; margin-left: 2px; }
  header.garnet-site #dock-sections .child-panel, header.garnet-site #dock-sections .child-panel[data-cols] {
    position: static; flex-basis: 100%; min-width: 0; max-width: none; width: 100%;
    margin: 0 0 6px; padding: 4px 0; border-radius: 4px; box-shadow: none;
    background: rgba(0,0,0,0.2); transform: none !important;
  }
  header.garnet-site #dock-sections .cluster-item.fanned-branch > .child-panel { display: grid; grid-template-columns: 1fr; columns: auto; }
  header.garnet-site #dock-sections .cluster-item.fanned-branch > .child-panel[data-short]:not([data-cols="1"]) { grid-template-columns: 1fr 1fr; }
  header.garnet-site #dock-sections .child-panel a { display: flex; align-items: center; min-height: 40px; padding: 0 14px; white-space: normal; font-size: 0.88rem; }
  header.garnet-site #dock-sections .child-panel a.full-way { grid-column: 1 / -1; margin-bottom: 0; padding-bottom: 0; }
  header.garnet-site.trim-head.index-open #dock-sections { flex-wrap: nowrap; }
  header.garnet-site.trim-head.index-open #dock-sections > * { flex-shrink: 0; }
  header.garnet-site.trim-head.index-open #dock-sections .cluster-item { display: flex; flex-basis: auto; justify-content: space-between; border-top: 1px solid rgba(127,127,127,0.2); }
  header.garnet-site.trim-head.index-open #dock-sections .cluster-item > a:first-child { flex: 1 1 auto; border-top: 0; }
  header.garnet-site.trim-head.index-open #dock-sections .arrow-flip { width: 52px; height: 48px; }
  header.garnet-site.trim-head.index-open #dock-sections .child-panel { margin: 0; border-radius: 0; }
  header.garnet-site.trim-head.index-open #dock-sections .child-panel a { min-height: 44px; padding: 0 20px 0 32px; font-size: 0.95rem; border-top: 1px solid rgba(127,127,127,0.12); }
}
@media (prefers-reduced-motion: reduce) { header.garnet-site #dock-sections .arrow-flip::before { transition: none; } }