/* Plano Gutter Pros stylesheet. One file, no web fonts, no framework.

   Colors
     --fascia       #41375a  dusk slate violet: top band, footer band, bottom strip
     --trough       #5e5a80  lighter slate violet: banner fade, rules under table heads
     --outlet       #c2185b  raspberry: buttons, links, small labels
     --outlet-deep  #97104a  the same, pressed or hovered
     --zinc         #c9d6df  pale galvanized gray: brand word, chips, markers

   Measured contrast pairs are at the bottom.
*/

:root {
  --fascia: #41375a;
  --lilac-wash: 65, 55, 90;            /* --fascia split into channels for the photo banner */
  --trough: #5e5a80;
  --outlet: #c2185b;
  --outlet-deep: #97104a;
  --zinc: #c9d6df;
  --willow-stock: #f4f6f8;
  --verse-pure: #ffffff;
  --swift-ink: #18222d;
  --tassel-dim: #4f5c69;
  --khaki-margin-c: #d3dae1;
  --glen-round: 6px;
  --solid-maxw: 1100px;
  --central-bar-h: 62px;                  /* bottom strip: 9 + 44 + 9 */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding-bottom: var(--central-bar-h);
  background: var(--willow-stock);
  color: var(--swift-ink);
  font: 17px/1.62 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
img { display: block; max-width: 100%; }
a { color: var(--outlet); text-underline-offset: 3px; }
a:hover { color: var(--outlet-deep); }
h1, h2, h3 { line-height: 1.22; font-weight: 750; }
h2 { font-size: 1.62rem; margin: 0 0 12px; color: var(--fascia); }
h3 { font-size: 1.08rem; margin: 0 0 6px; color: var(--fascia); }
.nexus-canvas { max-width: var(--solid-maxw); margin: 0 auto; padding: 0 20px; }

/* top band */
header.smooth-masthead { background: var(--fascia); color: var(--verse-pure); border-bottom: 4px solid var(--zinc); }
header.smooth-masthead .orchid-rail {
  max-width: calc(var(--solid-maxw) + 40px); margin: 0 auto; padding: 9px 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;
}
header.smooth-masthead .inner-titleblock {
  display: inline-flex; align-items: center; gap: 9px; margin-right: auto;
  color: var(--verse-pure); font-weight: 750; font-size: 1.05rem; text-decoration: none;
}
header.smooth-masthead .inner-titleblock span { color: var(--zinc); }
.simple-emblem { width: 36px; height: 36px; flex: none; }
header.smooth-masthead nav { display: flex; flex-wrap: wrap; gap: 2px 18px; }
header.smooth-masthead nav a { color: #d5dee7; font-size: 0.93rem; text-decoration: none; padding: 5px 0; }
header.smooth-masthead nav a:hover { color: var(--verse-pure); text-decoration: underline; }
header.smooth-masthead .lower-tel-action {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 8px 15px; border-radius: var(--glen-round); background: var(--outlet);
  color: var(--verse-pure); font-weight: 700; text-decoration: none;
}
header.smooth-masthead .lower-tel-action:hover { background: var(--outlet-deep); }
@media (max-width: 1040px) { header.smooth-masthead nav { order: 3; flex-basis: 100%; } }
@media (max-width: 600px) {
  header.smooth-masthead .orchid-rail { justify-content: center; }
  header.smooth-masthead .inner-titleblock { margin-right: 0; }
  header.smooth-masthead nav { justify-content: center; gap: 0 14px; }
}

/* banner */
.indigo-first-band { background: linear-gradient(160deg, var(--fascia) 55%, var(--trough)); color: var(--verse-pure); padding: 42px 20px 40px; }
.indigo-first-band .nexus-canvas { padding: 0; }
.indigo-first-band .sage-pretitle {
  display: inline-block; margin-bottom: 12px; padding: 2px 10px; border-radius: 3px;
  background: var(--zinc); color: var(--swift-ink); font-size: 0.8rem; font-weight: 700;
}
.indigo-first-band h1 { margin: 0 0 12px; max-width: 800px; font-size: 2.3rem; }
.indigo-first-band p.loyal-lede-copy { margin: 0 0 20px; max-width: 670px; font-size: 1.08rem; color: #e8eef3; }
.indigo-first-band .flint-paths { display: flex; flex-wrap: wrap; gap: 12px; }
.indigo-first-band .hazel-aside-note { margin: 16px 0 0; max-width: 640px; font-size: 0.9rem; color: #e1e8ee; }
.indigo-first-band.echo-with-photo {
  min-height: 500px; display: flex; align-items: center;
  background-image:
    linear-gradient(90deg, rgba(var(--lilac-wash), 0.95) 0%, rgba(var(--lilac-wash), 0.9) 46%, rgba(var(--lilac-wash), 0.35) 76%, rgba(var(--lilac-wash), 0.05) 100%),
    url('/images/hero-wet-corner.jpg');
  background-size: cover; background-position: center right; background-repeat: no-repeat;
}
.indigo-first-band.echo-with-photo .nexus-canvas { width: 100%; }
@media (max-width: 820px) {
  .indigo-first-band h1 { font-size: 1.72rem; }
  .indigo-first-band.echo-with-photo {
    min-height: 430px;
    background-image:
      linear-gradient(180deg, rgba(var(--lilac-wash), 0.94) 0%, rgba(var(--lilac-wash), 0.9) 60%, rgba(var(--lilac-wash), 0.78) 100%),
      url('/images/hero-wet-corner-mobile.jpg');
  }
}

/* buttons */
.spoke-control { display: inline-block; padding: 12px 22px; border-radius: var(--glen-round); font-weight: 700; text-decoration: none; }
.spoke-control.humble-solid { background: var(--outlet); color: var(--verse-pure); }
.spoke-control.humble-solid:hover { background: var(--outlet-deep); color: var(--verse-pure); }
.spoke-control.shore-secondary-el { padding: 10px 20px; border: 2px solid rgba(255, 255, 255, 0.65); color: var(--verse-pure); }
.spoke-control.shore-secondary-el:hover { background: rgba(255, 255, 255, 0.14); color: var(--verse-pure); }

/* page sections */
section { padding: 44px 20px; }
section.urban-washed { background: var(--verse-pure); }
section .nexus-canvas { padding: 0; }
.daisy-heading-tag { margin-bottom: 5px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--outlet); }
section p, section li { max-width: 750px; }
.plain-read ul, .plain-read ol { padding-left: 21px; margin: 0 0 16px; }
.plain-read li { margin-bottom: 7px; }
.plain-read h3 { margin-top: 22px; }

/* the two or three sentences that answer the page's question up front */
.quick-take { max-width: 750px; margin: 0 0 22px; padding: 15px 18px; background: var(--verse-pure); border: 1px solid var(--khaki-margin-c); border-top: 4px solid var(--trough); border-radius: var(--glen-round); }
section.urban-washed .quick-take { background: var(--willow-stock); }
.quick-take p { margin: 0; }
.quick-take p + p { margin-top: 8px; }

/* small print naming the source of a figure */
.where-from { max-width: 750px; margin: 0 0 16px; font-size: 0.86rem; color: var(--tassel-dim); }

/* work that belongs to a different trade than a gutter crew */
.other-trade { max-width: 750px; margin: 18px 0; padding: 13px 17px; border-left: 5px solid var(--outlet); background: #fbeaf1; border-radius: 0 var(--glen-round) var(--glen-round) 0; }
.other-trade p { margin: 0; }
.other-trade p + p { margin-top: 8px; }

/* build decade on the left, what the gutters are likely doing on the right */
.run-ledger { list-style: none; margin: 0 0 18px; padding: 0; max-width: 880px; border-left: 3px solid var(--trough); }
.run-line { display: grid; grid-template-columns: 150px 1fr; gap: 4px 20px; padding: 14px 0 14px 18px; border-bottom: 1px solid var(--khaki-margin-c); }
.run-line:last-child { border-bottom: 0; }
.run-era { font-weight: 750; color: var(--fascia); }
.run-era small { display: block; font-weight: 400; font-size: 0.84rem; color: var(--tassel-dim); }
.run-line p { margin: 0 0 6px; }
@media (max-width: 640px) { .run-line { grid-template-columns: 1fr; } }

/* three measured figures side by side */
.rain-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 10px; border: 1px solid var(--khaki-margin-c); border-radius: var(--glen-round); background: var(--verse-pure); }
.rain-figures div { padding: 16px 18px; border-right: 1px solid var(--khaki-margin-c); }
.rain-figures div:last-child { border-right: 0; }
.rain-figures dt { font-size: 1.55rem; font-weight: 750; color: var(--fascia); }
.rain-figures dd { margin: 3px 0 0; font-size: 0.9rem; color: var(--tassel-dim); }
@media (max-width: 760px) {
  .rain-figures { grid-template-columns: 1fr; }
  .rain-figures div { border-right: 0; border-bottom: 1px solid var(--khaki-margin-c); }
  .rain-figures div:last-child { border-bottom: 0; }
}

/* tables */
.square-grid-pan { max-width: 880px; margin: 0 0 16px; overflow-x: auto; }
.ash-schedule-table { width: 100%; border-collapse: collapse; background: var(--verse-pure); font-size: 0.95rem; }
.ash-schedule-table th, .ash-schedule-table td { padding: 10px 13px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--khaki-margin-c); }
.ash-schedule-table th { background: #e6ebf0; color: var(--fascia); border-bottom: 2px solid var(--trough); }
.ash-schedule-table td:first-child { font-weight: 700; color: var(--fascia); }
@media (max-width: 640px) { .ash-schedule-table { min-width: 540px; } }

/* boxes in a grid */
.axis-grid { display: grid; gap: 16px; }
.axis-grid.flute-pair { grid-template-columns: repeat(2, 1fr); }
.axis-grid.stencil-triplet { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .axis-grid.flute-pair, .axis-grid.stencil-triplet { grid-template-columns: 1fr; } }
.fern-block { padding: 17px 19px; background: var(--verse-pure); border: 1px solid var(--khaki-margin-c); border-radius: var(--glen-round); }
section.urban-washed .fern-block { background: var(--willow-stock); }
.fern-block p { margin: 0 0 8px; font-size: 0.95rem; color: var(--tassel-dim); }
.fern-block a { font-weight: 700; font-size: 0.93rem; }
.era-chip { display: inline-block; margin-bottom: 8px; padding: 1px 9px; border-radius: 3px; background: var(--zinc); color: var(--swift-ink); font-size: 0.78rem; font-weight: 700; }

/* numbered steps */
.yarrow-sequence { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.harp-chapter-card { padding: 16px 18px; background: var(--verse-pure); border-radius: var(--glen-round); border: 1px solid var(--khaki-margin-c); }
section.urban-washed .harp-chapter-card { background: var(--willow-stock); }
.harp-chapter-card .fiber-step-num { display: block; margin-bottom: 6px; font-size: 1.5rem; font-weight: 750; color: var(--outlet); }
.harp-chapter-card p { margin: 0; font-size: 0.95rem; color: var(--tassel-dim); }
@media (max-width: 960px) { .yarrow-sequence { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .yarrow-sequence { grid-template-columns: 1fr; } }

/* questions */
.east-question-set { max-width: 800px; }
.bell-query-block { margin-bottom: 8px; background: var(--verse-pure); border: 1px solid var(--khaki-margin-c); border-radius: var(--glen-round); }
section.urban-washed .bell-query-block { background: var(--willow-stock); }
.bell-query-block summary { padding: 12px 16px; cursor: pointer; font-weight: 700; color: var(--fascia); }
.bell-query-block summary:hover { color: var(--outlet); }
.bell-query-block p { margin: 0; padding: 0 16px 14px; color: var(--tassel-dim); }

/* rows of short links */
.cyan-zones-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cyan-zones-list a { padding: 6px 13px; border-radius: var(--glen-round); border: 1px solid var(--trough); background: var(--verse-pure); color: var(--fascia); font-size: 0.92rem; text-decoration: none; }
.cyan-zones-list a:hover { background: var(--fascia); color: var(--verse-pure); }

/* last band before the footer */
.scroll-action-band { padding: 38px 20px; background: var(--fascia); color: var(--verse-pure); border-top: 4px solid var(--zinc); }
.scroll-action-band h2 { color: var(--verse-pure); margin-bottom: 8px; }
.scroll-action-band p { margin: 0 0 18px; max-width: 640px; color: #d5dee7; }
.scroll-action-band .spoke-control { margin: 0 8px 8px 0; }

/* form */
form.quarry-ask-form { display: grid; gap: 13px; max-width: 520px; }
form.quarry-ask-form label { display: block; margin-bottom: 4px; font-size: 0.88rem; font-weight: 700; color: var(--fascia); }
form.quarry-ask-form input, form.quarry-ask-form select, form.quarry-ask-form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #7d8a97; border-radius: var(--glen-round);
  background: var(--verse-pure); color: var(--swift-ink); font: inherit;
}
form.quarry-ask-form button { border: 0; cursor: pointer; font: inherit; font-weight: 700; justify-self: start; }
form.quarry-ask-form button[disabled] { opacity: 0.6; cursor: not-allowed; }
form.quarry-ask-form .tide-small-note { margin: 0; font-size: 0.82rem; color: var(--tassel-dim); }
form.quarry-ask-form .crane-aux-line { position: absolute; left: -9999px; top: -9999px; }
.wheat-reply-note { display: none; padding: 11px 14px; border-radius: var(--glen-round); font-size: 0.93rem; }
.wheat-reply-note.visible { display: block; }
.wheat-reply-note.success { background: #e2f0e6; color: #1d5630; }
.wheat-reply-note.error { background: #fbe6e6; color: #931c1c; }

/* trail of links under the top band */
.cove-waypoints { max-width: calc(var(--solid-maxw) + 40px); margin: 0 auto; padding: 11px 20px; font-size: 0.84rem; color: var(--tassel-dim); }
.cove-waypoints a { color: var(--tassel-dim); }

/* the sentence that says who does the work */
.rare-standing-note { max-width: 750px; margin-top: 20px; padding: 11px 15px; border-radius: var(--glen-round); background: #e6ebf0; color: var(--tassel-dim); font-size: 0.9rem; }

/* footer */
footer.smooth-masthead { padding: 34px 20px 20px; background: #2d2640; color: #b4c0cc; font-size: 0.9rem; }
footer.smooth-masthead .nexus-canvas { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 24px; padding: 0; }
footer.smooth-masthead h2 { margin: 0 0 10px; font-size: 0.92rem; color: var(--verse-pure); }
footer.smooth-masthead p { margin: 0; }
footer.smooth-masthead ul { list-style: none; margin: 0; padding: 0; }
footer.smooth-masthead li { margin-bottom: 6px; }
footer.smooth-masthead a { color: #b4c0cc; }
footer.smooth-masthead a:hover { color: var(--verse-pure); }
footer.smooth-masthead .lilac-tail { max-width: var(--solid-maxw); margin: 22px auto 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.8rem; }
footer.smooth-masthead .lilac-tail span { display: block; margin-bottom: 4px; }
@media (max-width: 900px) { footer.smooth-masthead .nexus-canvas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { footer.smooth-masthead .nexus-canvas { grid-template-columns: 1fr; } }

/* strip pinned to the bottom of the window at every width */
.chalk-clingbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
  background: var(--fascia); box-shadow: 0 -2px 9px rgba(0, 0, 0, 0.25);
}
.chalk-clingbar-inner { display: flex; gap: 10px; max-width: var(--solid-maxw); margin: 0 auto; }
.chalk-clingbar a {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px;
  padding: 0 12px; border-radius: var(--glen-round); font-weight: 700; font-size: 0.9rem;
  white-space: nowrap; text-decoration: none;
}
.chalk-clingbar .lupine-dial-mark { flex: none; }
.chalk-clingbar-call { flex: 3; background: var(--outlet); color: var(--verse-pure); }
.chalk-clingbar-call:hover { background: var(--outlet-deep); color: var(--verse-pure); }
.chalk-clingbar-quote { flex: 2; border: 1px solid rgba(255, 255, 255, 0.6); color: var(--verse-pure); }
.chalk-clingbar-quote:hover { background: rgba(255, 255, 255, 0.15); color: var(--verse-pure); }
.chalk-clingbar .rust-cta-note { display: none; }
@media (min-width: 620px) { .chalk-clingbar .rust-cta-note { display: inline; } }
@media (min-width: 780px) {
  .chalk-clingbar-inner { justify-content: flex-end; }
  .chalk-clingbar a { flex: 0 0 auto; padding: 0 24px; font-size: 0.96rem; }
}

/* reviews, printed only when switched on */
.lucid-feedback-block .hinge-report-card p { color: var(--swift-ink); }
.lucid-feedback-block .poplar-pips { margin: 0 0 6px; color: var(--outlet); letter-spacing: 2px; }
.lucid-feedback-block .snug-named-by { font-size: 0.88rem; color: var(--tassel-dim); }

/* marks a value nobody has filled in yet */
.cliff-not-yet { padding: 1px 6px; border: 1px dashed #9a8400; background: #fff6c7; color: #564900; font-size: 0.85em; }

/* the single photo on a gutter work page; the max-width stops it from
   filling a wide desktop window */
.narrow-in-situ { max-width: calc(var(--solid-maxw) + 40px); margin: 0 auto; padding: 26px 20px 0; }
.narrow-in-situ img { width: 100%; max-width: 680px; height: auto; margin: 0; border-radius: var(--glen-round); border: 1px solid var(--khaki-margin-c); }

/* home page photos: ten of them, five across, two across on a phone.
   height:auto keeps the height attribute from overriding aspect-ratio. */
.azure-jobstrip .knot-tiles-sm { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.azure-jobstrip img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; background: var(--verse-pure); }
@media (max-width: 760px) { .azure-jobstrip .knot-tiles-sm { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* Contrast as measured (body text needs 4.5:1, large text 3:1)
     --swift-ink on --willow-stock                        14.85:1
     --tassel-dim on --willow-stock                       6.32:1
     --tassel-dim on white                      6.85:1
     --tassel-dim on #e6ebf0                    5.71:1
     white on --fascia                    10.94:1
     white on --trough                     6.46:1
     white on --outlet                     5.87:1
     white on --outlet-deep                8.44:1
     --outlet on --willow-stock                      5.42:1
     --outlet on white                     5.87:1
     --outlet-deep on --willow-stock                 7.79:1
     --fascia on --willow-stock                     10.10:1
     --fascia on white                    10.94:1
     --fascia on #e6ebf0                   9.12:1
     menu #d5dee7 on --fascia              8.04:1
     banner text #e8eef3 on --fascia       9.36:1
     banner text #e8eef3 on --trough       5.52:1
     banner note #e1e8ee on --fascia       8.85:1
     banner note #e1e8ee on --trough       5.22:1
     --zinc on --fascia                    7.38:1
     --swift-ink on --zinc                      10.85:1
     footer #b4c0cc on #2d2640             7.76:1
     success #1d5630 on #e2f0e6            7.35:1
     error #931c1c on #fbe6e6              7.25:1
     --swift-ink on #fbeaf1                     13.90:1
     --outlet on #fbeaf1                   5.07:1
     #564900 on #fff6c7                    8.20:1
   The banner runs from --fascia into --trough, so banner text is listed 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 .pared-top past the header's own height and .panel-spread while
   the menu is open. */
header.smooth-masthead .fold-latch { display: none; }
@media (max-width: 820px) {
  header.smooth-masthead { position: static; }
  header.smooth-masthead .orchid-rail {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    padding: 8px 12px 2px;
    gap: 0;
  }
  header.smooth-masthead .inner-titleblock {
    display: block;
    position: relative;
    padding-left: 44px;
    min-height: 36px;
    line-height: 36px;
    white-space: nowrap;
    font-size: clamp(0.9rem, 5.25vw, 1.05rem);
  }
  header.smooth-masthead .inner-titleblock .simple-emblem {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  header.smooth-masthead nav { flex: 1 0 100%; margin: 0; }
  header.smooth-masthead nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  header.smooth-masthead nav li { margin: 0; padding: 0; }
  header.smooth-masthead nav a {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding-left: 0;
    padding-right: 0;
    white-space: nowrap;
    font-size: 0.88rem;
  }
  header.smooth-masthead .lower-tel-action { display: none; }

  header.smooth-masthead.pared-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 65;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    animation: glide-band 0.2s ease-out;
  }
  header.smooth-masthead.pared-top .orchid-rail {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 2px 4px 2px 12px;
    background: inherit;
  }
  header.smooth-masthead.pared-top > :not(.orchid-rail):not(nav):not(script),
  header.smooth-masthead.pared-top > .orchid-rail > :not(.inner-titleblock):not(.fold-latch):not(nav),
  header.smooth-masthead.pared-top nav { display: none; }
  header.smooth-masthead.pared-top .inner-titleblock {
    flex: 0 1 auto;
    min-width: 0;
    white-space: normal;
  }
  header.smooth-masthead.pared-top .inner-titleblock > * { white-space: nowrap; }
  header.smooth-masthead.pared-top .inner-titleblock {
    padding-left: 34px;
    min-height: 0;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(0.81rem, 5.25vw, 1.05rem);
  }
  header.smooth-masthead.pared-top .inner-titleblock .simple-emblem { width: 26px; height: 26px; }
  header.smooth-masthead.pared-top .fold-latch {
    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(213, 222, 231);
    cursor: pointer;
  }
  header.smooth-masthead .fold-latch span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.2s, opacity 0.2s;
  }
  header.smooth-masthead.panel-spread .fold-latch span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  header.smooth-masthead.panel-spread .fold-latch span:nth-child(2) { opacity: 0; }
  header.smooth-masthead.panel-spread .fold-latch span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  header.smooth-masthead.pared-top.panel-spread nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0 0 8px;
    background: rgb(65, 55, 90);
    box-shadow: 0 8px 14px rgba(0,0,0,0.25);
    max-height: calc(100vh - 130px);
    overflow-y: auto;
  }
  header.smooth-masthead.pared-top.panel-spread nav { display: flex; flex-direction: column; gap: 0; }
  header.smooth-masthead.pared-top.panel-spread 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) {
  .chalk-clingbar { height: auto; min-height: 0; padding: 0 0 env(safe-area-inset-bottom); }
  .chalk-clingbar-inner { height: auto; min-height: 0; padding: 7px 10px; gap: 8px; }
  .chalk-clingbar .chalk-clingbar-call, .chalk-clingbar .chalk-clingbar-quote { padding: 10px 6px; line-height: 1.2; font-size: 0.8rem; gap: 5px; min-width: 0; white-space: nowrap; }
  .chalk-clingbar-inner > :not(a) { display: none; }
}
@keyframes glide-band { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  header.smooth-masthead.pared-top { animation: none; }
  header.smooth-masthead .fold-latch span { transition: none; }
}

.file-field input[type="file"] { display: block; width: 100%; box-sizing: border-box; padding: 9px 10px; background: #fff; color: #222; font-size: 0.9rem; }
.file-field label span { font-weight: 400; opacity: 0.7; }
.photo-hint { font-size: 0.8rem; opacity: 0.75; margin: 6px 0 0; }
.photo-roll { list-style: none; margin: 6px 0 0; padding: 0; font-size: 0.82rem; }
.photo-roll:empty, .attach-alert:empty { display: none; }
.photo-roll 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.azure-jobstrip.azure-jobstrip,
  section.indigo-first-band.echo-with-photo.indigo-first-band,
  section.indigo-first-band.indigo-first-band,
  section.scroll-action-band.scroll-action-band,
  section.urban-washed.urban-washed { 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.harp-chapter-card:has(> span.fiber-step-num + h3) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: center; }
li.harp-chapter-card:has(> span.fiber-step-num + h3) > * { grid-column: 1 / -1; min-width: 0; }
li.harp-chapter-card:has(> span.fiber-step-num + h3) > span.fiber-step-num { grid-column: 1; margin: 0; }
li.harp-chapter-card:has(> span.fiber-step-num + h3) > span.fiber-step-num + 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.smooth-masthead div.orchid-rail { padding-top: 6px; padding-bottom: 6px; }
}

header.smooth-masthead #dock-nav .nest-slot { position: relative; display: inline-flex; align-items: center; gap: 0; margin: 0; padding: 0; }
header.smooth-masthead #dock-nav .tip-toggle {
  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(213, 222, 231); cursor: pointer;
}
header.smooth-masthead #dock-nav .tip-toggle::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.smooth-masthead #dock-nav .nest-slot.opened-branch > .tip-toggle::before { transform: rotate(180deg); }
header.smooth-masthead #dock-nav .lower-deck {
  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(65, 55, 90); border-radius: 6px; box-shadow: 0 10px 24px rgba(0,0,0,0.28);
  text-align: left; column-gap: 0;
}
header.smooth-masthead #dock-nav .lower-deck[data-cols="2"] { columns: 2; min-width: 400px; }
header.smooth-masthead #dock-nav .lower-deck[data-cols="3"] { columns: 3; min-width: 560px; }
header.smooth-masthead #dock-nav .nest-slot.opened-branch > .lower-deck { display: block; }
@media (hover: hover) and (min-width: 821px) {
  header.smooth-masthead #dock-nav .nest-slot:hover > .lower-deck { display: block; }
}
header.smooth-masthead #dock-nav .lower-deck a {
  display: block; min-height: 0; margin: 0; padding: 7px 16px; border: 0;
  color: rgb(213, 222, 231); font-size: 0.9rem; line-height: 1.3; white-space: nowrap; text-align: left;
  break-inside: avoid;
}
header.smooth-masthead #dock-nav .lower-deck a:hover, header.smooth-masthead #dock-nav .lower-deck a:focus-visible { background: rgba(255,255,255,0.09); color: #fff; text-decoration: none; }
header.smooth-masthead #dock-nav .lower-deck a.root-entry { 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.smooth-masthead #dock-nav .nest-slot { position: static; flex-wrap: wrap; justify-content: center; }
  header.smooth-masthead #dock-nav .nest-slot.opened-branch { flex-basis: 100%; }
  header.smooth-masthead #dock-nav .tip-toggle { width: 18px; height: 34px; margin-left: 2px; }
  header.smooth-masthead #dock-nav .lower-deck, header.smooth-masthead #dock-nav .lower-deck[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.smooth-masthead #dock-nav .nest-slot.opened-branch > .lower-deck { display: grid; grid-template-columns: 1fr; columns: auto; }
  header.smooth-masthead #dock-nav .nest-slot.opened-branch > .lower-deck[data-short]:not([data-cols="1"]) { grid-template-columns: 1fr 1fr; }
  header.smooth-masthead #dock-nav .lower-deck a { display: flex; align-items: center; min-height: 40px; padding: 0 14px; white-space: normal; font-size: 0.88rem; }
  header.smooth-masthead #dock-nav .lower-deck a.root-entry { grid-column: 1 / -1; margin-bottom: 0; padding-bottom: 0; }
  header.smooth-masthead.pared-top.panel-spread #dock-nav { flex-wrap: nowrap; }
  header.smooth-masthead.pared-top.panel-spread #dock-nav > * { flex-shrink: 0; }
  header.smooth-masthead.pared-top.panel-spread #dock-nav .nest-slot { display: flex; flex-basis: auto; justify-content: space-between; border-top: 1px solid rgba(127,127,127,0.2); }
  header.smooth-masthead.pared-top.panel-spread #dock-nav .nest-slot > a:first-child { flex: 1 1 auto; border-top: 0; }
  header.smooth-masthead.pared-top.panel-spread #dock-nav .tip-toggle { width: 52px; height: 48px; }
  header.smooth-masthead.pared-top.panel-spread #dock-nav .lower-deck { margin: 0; border-radius: 0; }
  header.smooth-masthead.pared-top.panel-spread #dock-nav .lower-deck 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.smooth-masthead #dock-nav .tip-toggle::before { transition: none; } }