/* Plano Roofing & Siding — one static stylesheet, no build step, system fonts.

   Palette. --gable is the dark chrome, --valley the mid tone used in the hero
   gradient, --shingle the accent that buttons, labels and body links resolve
   to, --shingle-deep its hover, --patina the small-area highlight.

   Contrast (WCAG AA: 4.5:1 small text, 3:1 large):
     --acorn-copy-c (#241a18) on --sturdy-stock (#faf8f7) ............. 16.05:1
     --rapid-soft (#62544f) on --sturdy-stock / on white .......... 6.84:1 / 7.24:1
     white on --gable (#4b1d16) .................... 14.13:1
     white on --shingle (#a8321f) .................. 6.69:1
     white on --shingle-deep (#86260f) ............. 9.14:1
     --shingle on --sturdy-stock / on white (links, labels) .. 6.31:1 / 6.69:1
     --shingle-deep on --sturdy-stock (link hover) ........... 8.63:1
     --gable on --sturdy-stock (h2, h3) ...................... 13.34:1
     nav link (#ead9d4) on --gable ................. 10.34:1
     lead (#f0e4e0) on --gable / on --valley ....... 11.35:1 / 6.20:1
     subnote (#dcc6bf) on --gable / on --valley .... 8.66:1 / 4.73:1
     brand span (#e6a493) on --gable ............... 6.79:1
     footer text and links (#c9aaa1) on #2e110c .... 8.11:1
     --acorn-copy-c on --patina (#9fb8a0) ................... 7.96:1
     --gable on #f3e4df (step number, table head) .. 11.42:1
     success #1f5a2c on #e6f1e7 .................... 7.08:1
     error #9c1c14 on #fbe9e7 ...................... 6.92:1
   The hero gradient runs from --gable to --valley, so hero text is checked
   against both ends.
   Why these colors, and what they were compared against, is recorded outside
   the web root; this file is served publicly.
*/

:root {
  --gable: #4b1d16;
  /* RGB channels of --gable, for the hero photo scrim. */
  --ledger-veil: 75, 29, 22;
  --valley: #8a3a2c;
  --shingle: #a8321f;
  --shingle-deep: #86260f;
  --patina: #9fb8a0;
  --sturdy-stock: #faf8f7;
  --wick-paper-w: #ffffff;
  --acorn-copy-c: #241a18;
  --rapid-soft: #62544f;
  --bold-keyline: #e6dfdc;
  --relay-curve: 5px;
  --echo-reach-c: 1080px;
  /* Real height of the fixed call bar: 8px + 11px padding top and bottom
     around a 22px line, plus 2px slack. */
  --ash-cta-h: 62px;
}
@media (min-width: 740px) { :root { --ash-cta-h: 64px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  color: var(--acorn-copy-c);
  background: var(--sturdy-stock);
  line-height: 1.6;
  /* keeps the footer's last row clear of the fixed call bar */
  padding-bottom: var(--ash-cta-h);
}
img { max-width: 100%; display: block; }
a { color: var(--shingle); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--shingle-deep); }
.birch-span-x { max-width: var(--echo-reach-c); margin: 0 auto; padding: 0 22px; }

/* ---- header ---- */
header.hollow-brandbar { background: var(--gable); color: var(--wick-paper-w); position: sticky; top: 0; z-index: 50; }
header.hollow-brandbar .sincere-dock {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px; padding: 12px 22px; max-width: var(--echo-reach-c); margin: 0 auto;
}
header.hollow-brandbar .low-signature {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 1.12rem; color: var(--wick-paper-w); text-decoration: none;
}
header.hollow-brandbar .low-signature span { color: #e6a493; }
.juniper-device-logo { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.35); }
header.hollow-brandbar nav { display: flex; gap: 18px; flex-wrap: wrap; }
header.hollow-brandbar nav a { color: #ead9d4; font-size: 0.94rem; text-decoration: none; }
header.hollow-brandbar nav a:hover { color: var(--wick-paper-w); text-decoration: underline; }
header.hollow-brandbar .verse-reach-btn {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: var(--shingle); color: var(--wick-paper-w); padding: 9px 15px;
  border-radius: var(--relay-curve); font-weight: 700; text-decoration: none;
}
header.hollow-brandbar .verse-reach-btn:hover { background: var(--shingle-deep); }
@media (min-width: 821px) and (max-width: 1100px) {
  /* brand left, number right, nav on its own centered row */
  header.hollow-brandbar nav { order: 3; flex: 1 0 100%; justify-content: center; }
}
@media (max-width: 820px) {
  header.hollow-brandbar .sincere-dock { justify-content: center; text-align: center; }
}

/* ---- hero ---- */
.urban-topline { background: linear-gradient(160deg, var(--gable), var(--valley)); color: var(--wick-paper-w); padding: 50px 22px 44px; }
.urban-topline .birch-span-x { display: flex; flex-direction: column; gap: 16px; padding: 0; width: 100%; }
.urban-topline .lotus-overline {
  border-left: 3px solid var(--patina); padding-left: 10px;
  font-size: 0.84rem; letter-spacing: 0.02em; color: #f0e4e0; width: fit-content;
}
.urban-topline h1 { font-size: 2.15rem; line-height: 1.2; margin: 0; max-width: 780px; }
.urban-topline p.mosaic-chapeau { font-size: 1.08rem; color: #f0e4e0; max-width: 640px; margin: 0; }
.urban-topline .cocoa-button-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.urban-topline .gauge-postscript { font-size: 0.88rem; color: #dcc6bf; margin: 0; }
.urban-topline.tall-pictured {
  background-image:
    linear-gradient(90deg, rgba(var(--ledger-veil), 0.93) 0%, rgba(var(--ledger-veil), 0.78) 40%, rgba(var(--ledger-veil), 0.30) 70%, rgba(var(--ledger-veil), 0.05) 100%),
    url('/images/hero-roofing-photo.jpg');
  background-size: cover; background-position: center right; background-repeat: no-repeat;
  min-height: 520px; display: flex; align-items: center;
}
@media (max-width: 820px) {
  .urban-topline h1 { font-size: 1.65rem; }
  .urban-topline.tall-pictured {
    background-image:
      linear-gradient(180deg, rgba(var(--ledger-veil), 0.90) 0%, rgba(var(--ledger-veil), 0.82) 55%, rgba(var(--ledger-veil), 0.66) 100%),
      url('/images/hero-roofing-photo-mobile.jpg');
    min-height: 450px;
  }
}

/* ---- buttons ---- */
.moss-control { display: inline-block; padding: 12px 21px; border-radius: var(--relay-curve); font-weight: 700; font-size: 1rem; text-decoration: none; }
.moss-control.cobalt-emphatic { background: var(--shingle); color: var(--wick-paper-w); }
.moss-control.cobalt-emphatic:hover { background: var(--shingle-deep); color: var(--wick-paper-w); }
.moss-control.solid-subdued { background: rgba(255,255,255,0.08); color: var(--wick-paper-w); border: 1px solid rgba(255,255,255,0.4); }
.moss-control.solid-subdued:hover { background: rgba(255,255,255,0.18); color: var(--wick-paper-w); }

/* ---- sections and type ---- */
section { padding: 46px 22px; }
section.inner-shaded { background: var(--wick-paper-w); border-top: 1px solid var(--bold-keyline); border-bottom: 1px solid var(--bold-keyline); }
section .birch-span-x { padding: 0; }
.cove-strapline-sm { text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.76rem; color: var(--shingle); font-weight: 700; margin-bottom: 6px; }
h2 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 16px; color: var(--gable); }
h3 { font-size: 1.1rem; margin: 0 0 6px; color: var(--gable); }
section p { max-width: 760px; }
section ul.plain-points { max-width: 760px; padding-left: 20px; margin: 0 0 14px; }
section ul.plain-points li { margin-bottom: 7px; }

/* ---- figures band (homepage) ---- */
.count-band { background: var(--wick-paper-w); border-bottom: 1px solid var(--bold-keyline); padding: 26px 22px; }
.count-band .birch-span-x { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 0; }
.count-band .datum { font-size: 2rem; font-weight: 700; color: var(--gable); line-height: 1.1; }
.count-band .legend-sm { font-size: 0.9rem; color: var(--rapid-soft); margin-top: 4px; }
@media (max-width: 720px) { .count-band .birch-span-x { grid-template-columns: 1fr; gap: 16px; } }

/* ---- grids and cards ---- */
.poplar-panels { display: grid; gap: 18px; }
.poplar-panels.tempo-twin { grid-template-columns: repeat(2, 1fr); }
.poplar-panels.crisp-triplet { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .poplar-panels.tempo-twin, .poplar-panels.crisp-triplet { grid-template-columns: 1fr; } }
.lilac-tile { background: var(--wick-paper-w); border: 1px solid var(--bold-keyline); border-top: 3px solid var(--valley); border-radius: var(--relay-curve); padding: 18px 20px; }
section.inner-shaded .lilac-tile { background: var(--sturdy-stock); }
.lilac-tile p { color: var(--rapid-soft); margin: 6px 0 0; font-size: 0.95rem; }
.lilac-tile ul { margin: 10px 0 0; padding-left: 18px; font-size: 0.95rem; }
.lilac-tile li { margin-bottom: 5px; }

/* ---- city-rule citation block ---- */
.code-ref { border-left: 4px solid var(--patina); background: var(--wick-paper-w); padding: 16px 20px; max-width: 760px; margin: 0 0 16px; }
section.inner-shaded .code-ref { background: var(--sturdy-stock); }
.code-ref p { margin: 0 0 8px; }
.code-ref p:last-child { margin-bottom: 0; font-size: 0.88rem; color: var(--rapid-soft); }

/* ---- era table ---- */
.ridge-table-scroll { overflow-x: auto; max-width: 760px; }
.tariff-grid { border-collapse: collapse; width: 100%; font-size: 0.95rem; background: var(--wick-paper-w); }
.tariff-grid th, .tariff-grid td { text-align: left; padding: 9px 12px; border: 1px solid var(--bold-keyline); vertical-align: top; }
.tariff-grid th { background: #f3e4df; color: var(--gable); }

/* ---- how it works: an ordered list, numbered by the browser ---- */
ol.mosaic-steps-grid { list-style: none; counter-reset: stage; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0; margin: 0; }
.lupine-chapter-card { counter-increment: stage; background: var(--wick-paper-w); border: 1px solid var(--bold-keyline); border-radius: var(--relay-curve); padding: 18px; }
.lupine-chapter-card::before {
  content: counter(stage); display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: #f3e4df; color: var(--gable); font-weight: 700; margin-bottom: 10px;
}
.lupine-chapter-card h3 { font-size: 1rem; }
.lupine-chapter-card p { color: var(--rapid-soft); font-size: 0.92rem; margin: 0; }
@media (max-width: 820px) { ol.mosaic-steps-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { ol.mosaic-steps-grid { grid-template-columns: 1fr; } }

/* ---- questions ---- */
.questions-list { max-width: 800px; }
.bay-raised { border-bottom: 1px solid var(--bold-keyline); padding: 13px 0; }
.bay-raised summary { font-size: 1.06rem; font-weight: 600; color: var(--gable); cursor: pointer; }
.bay-raised p { margin: 9px 0 0; color: var(--rapid-soft); }

/* ---- place links ---- */
.central-reach { display: flex; flex-wrap: wrap; gap: 9px; }
.central-reach a { background: var(--wick-paper-w); border: 1px solid var(--bold-keyline); padding: 8px 13px; border-radius: var(--relay-curve); color: var(--gable); font-size: 0.92rem; text-decoration: none; }
.central-reach a:hover { border-color: var(--shingle); }

/* ---- closing band ---- */
.gilded-last-word { background: var(--gable); color: var(--wick-paper-w); text-align: center; padding: 42px 22px; }
.gilded-last-word h2 { color: var(--wick-paper-w); }
.gilded-last-word p { color: #ead9d4; margin: 0 auto 18px; }
.gilded-last-word .moss-control { margin: 4px 5px; }

/* ---- contact form ---- */
form.orbit-contact-form { display: grid; gap: 12px; max-width: 480px; }
form.orbit-contact-form label { font-size: 0.88rem; font-weight: 600; color: var(--gable); display: block; margin-bottom: 4px; }
form.orbit-contact-form input, form.orbit-contact-form select, form.orbit-contact-form textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #b9aaa5; border-radius: var(--relay-curve); font-size: 0.95rem; font-family: inherit; background: var(--wick-paper-w);
}
form.orbit-contact-form button { border: 0; cursor: pointer; font-family: inherit; }
form.orbit-contact-form button[disabled] { opacity: 0.6; cursor: not-allowed; }
form.orbit-contact-form .scout-qualifier-note { font-size: 0.8rem; color: var(--rapid-soft); margin: 0; }
form.orbit-contact-form .pole-aux-line { position: absolute; left: -9999px; top: -9999px; }
.west-submit-note { margin-top: 4px; padding: 11px 14px; border-radius: var(--relay-curve); font-size: 0.9rem; display: none; }
.west-submit-note.visible { display: block; }
.west-submit-note.success { background: #e6f1e7; color: #1f5a2c; }
.west-submit-note.error { background: #fbe9e7; color: #9c1c14; }

/* ---- breadcrumb ---- */
.quiver-path { font-size: 0.85rem; color: var(--rapid-soft); padding: 13px 22px 0; max-width: var(--echo-reach-c); margin: 0 auto; }
.quiver-path a { color: var(--rapid-soft); }

/* ---- referral note ---- */
.openly { font-size: 0.9rem; color: var(--rapid-soft); border-top: 1px solid var(--bold-keyline); padding-top: 12px; margin-top: 18px; max-width: 760px; }

/* ---- footer ---- */
footer.hollow-brandbar { background: #2e110c; color: #c9aaa1; padding: 38px 22px 22px; font-size: 0.9rem; }
footer.hollow-brandbar .birch-span-x { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; padding: 0; }
footer.hollow-brandbar h2 { color: var(--wick-paper-w); font-size: 0.95rem; margin: 0 0 10px; }
footer.hollow-brandbar p { margin: 0; }
footer.hollow-brandbar ul { list-style: none; padding: 0; margin: 0; }
footer.hollow-brandbar li { margin-bottom: 6px; }
footer.hollow-brandbar a { color: #c9aaa1; }
footer.hollow-brandbar .pennant-tail {
  max-width: var(--echo-reach-c); margin: 24px auto 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.8rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
@media (max-width: 720px) { footer.hollow-brandbar .birch-span-x { grid-template-columns: 1fr 1fr; } }

/* ---- fixed call bar, shown at every width ---- */
.lagoon-fixedbar {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; justify-content: center; gap: 10px;
  background: var(--gable); padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -2px 10px rgba(0,0,0,0.18);
}
.lagoon-fixedbar-inner { display: flex; gap: 10px; width: 100%; max-width: var(--echo-reach-c); margin: 0 auto; }
.lagoon-fixedbar a {
  display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-align: center;
  padding: 11px 10px; border-radius: var(--relay-curve); font-weight: 700; font-size: 0.88rem; text-decoration: none;
}
.lagoon-fixedbar .tiller-voice-glyph { flex: none; }
.lagoon-fixedbar-call { flex: 3; background: var(--shingle); color: var(--wick-paper-w); }
.lagoon-fixedbar-quote { flex: 2; background: rgba(255,255,255,0.1); color: var(--wick-paper-w); border: 1px solid rgba(255,255,255,0.4); }
.lagoon-fixedbar-call:hover { background: var(--shingle-deep); color: var(--wick-paper-w); }
.lagoon-fixedbar-quote:hover { background: rgba(255,255,255,0.2); color: var(--wick-paper-w); }
/* narrow phones: the digits stay, the qualifier gives way */
.lagoon-fixedbar .spiral-tagline-sm { display: none; }
@media (min-width: 560px) { .lagoon-fixedbar .spiral-tagline-sm { display: inline; } }
@media (min-width: 740px) {
  .lagoon-fixedbar-inner { justify-content: center; }
  .lagoon-fixedbar a { flex: 0 0 auto; padding: 11px 22px; font-size: 0.95rem; }
}

/* ---- reviews (rendered only when switched on) ---- */
.fore-testimonials .nimble-citation-card p { color: var(--acorn-copy-c); }
.fore-testimonials .arbor-marks { color: var(--shingle); letter-spacing: 2px; margin: 0 0 6px; }
.fore-testimonials .chord-named-by { font-size: 0.88rem; color: var(--rapid-soft); }

/* ---- build-time marker for an unfilled value ---- */
.kite-stub-mark { background: #fff3cd; color: #6b4f00; border: 1px dashed var(--patina); padding: 2px 6px; border-radius: 3px; font-size: 0.82em; }

/* ---- work photos ----
   One inline photo part-way down a service page. The width cap is what stops
   an image rendering edge to edge; every master here is landscape 1200x800,
   so there are no shape modifiers. */
.inner-fieldshot { max-width: calc(var(--echo-reach-c) + 44px); margin: 0 auto; padding: 30px 22px; }
.inner-fieldshot img { display: block; width: 100%; max-width: 780px; height: auto; margin: 0; border-radius: var(--relay-curve); border: 1px solid var(--bold-keyline); }

/* ---- homepage photo strip ----
   Twelve small images, one per service page, not links. Columns are set for
   twelve so every row is full: 6+6, then 4+4+4, then 3 across, then 2. */
.far-contact-sheet .keystone-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.far-contact-sheet img {
  display: block; width: 100%;
  /* height:auto is needed or the height attribute forces a fixed box */
  height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; border: 1px solid var(--bold-keyline); background: var(--wick-paper-w);
}
@media (max-width: 980px) { .far-contact-sheet .keystone-thumbs { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .far-contact-sheet .keystone-thumbs { grid-template-columns: repeat(3, 1fr); gap: 8px; } }
@media (max-width: 400px) { .far-contact-sheet .keystone-thumbs { grid-template-columns: repeat(2, 1fr); } }

/* --- 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 .folded-head past the header's own height and .drawer-spread while
   the menu is open. */
header.hollow-brandbar .page-key { display: none; }
@media (max-width: 820px) {
  header.hollow-brandbar { position: static; }
  header.hollow-brandbar .sincere-dock {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    padding: 8px 12px 2px;
    gap: 0;
  }
  header.hollow-brandbar .low-signature {
    display: block;
    position: relative;
    padding-left: 40px;
    min-height: 32px;
    line-height: 32px;
    white-space: nowrap;
    font-size: clamp(0.9rem, 5.60vw, 1.12rem);
  }
  header.hollow-brandbar .low-signature .juniper-device-logo {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  header.hollow-brandbar nav { flex: 1 0 100%; margin: 0; }
  header.hollow-brandbar nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  header.hollow-brandbar nav li { margin: 0; padding: 0; }
  header.hollow-brandbar nav a {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding-left: 0;
    padding-right: 0;
    white-space: nowrap;
    font-size: 0.88rem;
  }
  header.hollow-brandbar .verse-reach-btn { display: none; }

  header.hollow-brandbar.folded-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-head 0.2s ease-out;
  }
  header.hollow-brandbar.folded-head .sincere-dock {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 2px 4px 2px 12px;
    background: inherit;
  }
  header.hollow-brandbar.folded-head > :not(.sincere-dock):not(nav):not(script),
  header.hollow-brandbar.folded-head > .sincere-dock > :not(.low-signature):not(.page-key):not(nav),
  header.hollow-brandbar.folded-head nav { display: none; }
  header.hollow-brandbar.folded-head .low-signature {
    flex: 0 1 auto;
    min-width: 0;
    white-space: normal;
  }
  header.hollow-brandbar.folded-head .low-signature > * { white-space: nowrap; }
  header.hollow-brandbar.folded-head .low-signature {
    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.hollow-brandbar.folded-head .low-signature .juniper-device-logo { width: 26px; height: 26px; }
  header.hollow-brandbar.folded-head .page-key {
    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(234, 217, 212);
    cursor: pointer;
  }
  header.hollow-brandbar .page-key span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.2s, opacity 0.2s;
  }
  header.hollow-brandbar.drawer-spread .page-key span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  header.hollow-brandbar.drawer-spread .page-key span:nth-child(2) { opacity: 0; }
  header.hollow-brandbar.drawer-spread .page-key span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  header.hollow-brandbar.folded-head.drawer-spread nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0 0 8px;
    background: rgb(75, 29, 22);
    box-shadow: 0 8px 14px rgba(0,0,0,0.25);
    max-height: calc(100vh - 130px);
    overflow-y: auto;
  }
  header.hollow-brandbar.folded-head.drawer-spread nav { display: flex; flex-direction: column; gap: 0; }
  header.hollow-brandbar.folded-head.drawer-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) {
  .lagoon-fixedbar { height: auto; min-height: 0; padding: 0 0 env(safe-area-inset-bottom); }
  .lagoon-fixedbar-inner { height: auto; min-height: 0; padding: 7px 10px; gap: 8px; }
  .lagoon-fixedbar .lagoon-fixedbar-call, .lagoon-fixedbar .lagoon-fixedbar-quote { padding: 10px 6px; line-height: 1.2; font-size: 0.8rem; gap: 5px; min-width: 0; white-space: nowrap; }
  .lagoon-fixedbar-inner > :not(a) { display: none; }
}
@keyframes glide-head { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  header.hollow-brandbar.folded-head { animation: none; }
  header.hollow-brandbar .page-key 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; }
.pics-note { font-size: 0.8rem; opacity: 0.75; margin: 6px 0 0; }
.picked-files { list-style: none; margin: 6px 0 0; padding: 0; font-size: 0.82rem; }
.picked-files:empty, .image-alert:empty { display: none; }
.picked-files li { padding: 2px 0; overflow-wrap: anywhere; }
.image-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.far-contact-sheet.far-contact-sheet,
  section.gilded-last-word.gilded-last-word,
  section.inner-shaded.inner-shaded,
  section.urban-topline.tall-pictured.urban-topline,
  section.urban-topline.urban-topline { padding-left: 16px; padding-right: 16px; }
}

/* --- 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.hollow-brandbar div.sincere-dock { padding-top: 8px; padding-bottom: 8px; }
}

header.hollow-brandbar #dock-pages .fold-point { position: relative; display: inline-flex; align-items: center; gap: 0; margin: 0; padding: 0; }
header.hollow-brandbar #dock-pages .spur-key {
  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(234, 217, 212); cursor: pointer;
}
header.hollow-brandbar #dock-pages .spur-key::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.hollow-brandbar #dock-pages .fold-point.revealed-menu > .spur-key::before { transform: rotate(180deg); }
header.hollow-brandbar #dock-pages .fan-links {
  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(75, 29, 22); border-radius: 6px; box-shadow: 0 10px 24px rgba(0,0,0,0.28);
  text-align: left; column-gap: 0;
}
header.hollow-brandbar #dock-pages .fan-links[data-cols="2"] { columns: 2; min-width: 400px; }
header.hollow-brandbar #dock-pages .fan-links[data-cols="3"] { columns: 3; min-width: 560px; }
header.hollow-brandbar #dock-pages .fold-point.revealed-menu > .fan-links { display: block; }
@media (hover: hover) and (min-width: 821px) {
  header.hollow-brandbar #dock-pages .fold-point:hover > .fan-links { display: block; }
}
header.hollow-brandbar #dock-pages .fan-links a {
  display: block; min-height: 0; margin: 0; padding: 7px 16px; border: 0;
  color: rgb(234, 217, 212); font-size: 0.9rem; line-height: 1.3; white-space: nowrap; text-align: left;
  break-inside: avoid;
}
header.hollow-brandbar #dock-pages .fan-links a:hover, header.hollow-brandbar #dock-pages .fan-links a:focus-visible { background: rgba(255,255,255,0.09); color: #fff; text-decoration: none; }
header.hollow-brandbar #dock-pages .fan-links a.root-link { 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.hollow-brandbar #dock-pages .fold-point { position: static; flex-wrap: wrap; justify-content: center; }
  header.hollow-brandbar #dock-pages .fold-point.revealed-menu { flex-basis: 100%; }
  header.hollow-brandbar #dock-pages .spur-key { width: 18px; height: 34px; margin-left: 2px; }
  header.hollow-brandbar #dock-pages .fan-links, header.hollow-brandbar #dock-pages .fan-links[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.hollow-brandbar #dock-pages .fold-point.revealed-menu > .fan-links { display: grid; grid-template-columns: 1fr; columns: auto; }
  header.hollow-brandbar #dock-pages .fold-point.revealed-menu > .fan-links[data-short]:not([data-cols="1"]) { grid-template-columns: 1fr 1fr; }
  header.hollow-brandbar #dock-pages .fan-links a { display: flex; align-items: center; min-height: 40px; padding: 0 14px; white-space: normal; font-size: 0.88rem; }
  header.hollow-brandbar #dock-pages .fan-links a.root-link { grid-column: 1 / -1; margin-bottom: 0; padding-bottom: 0; }
  header.hollow-brandbar.folded-head.drawer-spread #dock-pages { flex-wrap: nowrap; }
  header.hollow-brandbar.folded-head.drawer-spread #dock-pages > * { flex-shrink: 0; }
  header.hollow-brandbar.folded-head.drawer-spread #dock-pages .fold-point { display: flex; flex-basis: auto; justify-content: space-between; border-top: 1px solid rgba(127,127,127,0.2); }
  header.hollow-brandbar.folded-head.drawer-spread #dock-pages .fold-point > a:first-child { flex: 1 1 auto; border-top: 0; }
  header.hollow-brandbar.folded-head.drawer-spread #dock-pages .spur-key { width: 52px; height: 48px; }
  header.hollow-brandbar.folded-head.drawer-spread #dock-pages .fan-links { margin: 0; border-radius: 0; }
  header.hollow-brandbar.folded-head.drawer-spread #dock-pages .fan-links 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.hollow-brandbar #dock-pages .spur-key::before { transition: none; } }