/* Source Sans 3, served from this site -- never a third-party font or stylesheet host.
   Static weights (not one variable file) so every engine renders 400, 600 and 700 as drawn.
   Adobe, SIL Open Font License 1.1: ../fonts/OFL-source-sans-3.txt */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/SourceSans3-Regular.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/SourceSans3-Semibold.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/SourceSans3-Bold.woff2") format("woff2"); }

/* Greenfield Communications - public site.
   The templates carry the design prototype's inline styles verbatim; this
   file only holds what inline styles cannot express: base typography,
   hover/focus states, responsive switches and a few stateful widgets. */

/* The surfaces: a tinted ground under the heroes, white cards on it, a head
   strip on any card with a title. A change of look is a change here. */
:root {
  --gf-ink: #0b1d12; --gf-muted: #3c4a40; --gf-brand: #006327; --gf-bright: #59ad40;
  --gf-ground: #edf2ea;              /* the page under the heroes */
  --gf-card: #fff;
  --gf-line: #d9e3d6;                /* a card's border */
  --gf-hair: #e3ebe0;                /* rules inside a card */
  --gf-head: #f7faf5;                /* a card's head strip, a note strip */
  --gf-tint: #e3f2df; --gf-tint-ink: #1f5a2a;   /* chips */
}

html { scroll-behavior: auto; }
body {
  margin: 0; background: var(--gf-ground); color: #0b1d12;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; text-wrap: pretty;
}
* { box-sizing: border-box; }
a { color: #006327; }
a:hover { color: #59ad40; }
input, select, textarea, button { font-family: inherit; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid #59ad40; outline-offset: 2px;
}
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
@keyframes gfpulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
@media print { .gf-noprint { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---- the kit ---------------------------------------------------------- */
.wrap { max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.band-white { background: #fff; border-top: 1px solid #dfe6df; border-bottom: 1px solid #dfe6df; }
.card { background: var(--gf-card); border: 1px solid var(--gf-line); border-radius: 16px; overflow: hidden;
  min-width: 0; display: flex; flex-direction: column; }
.card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 13px 20px; min-height: 56px;
  background: var(--gf-head); border-bottom: 1px solid var(--gf-hair); }
.card-title { margin: 0; flex: 1 1 auto; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--gf-ink); }
.card-meta { font-size: 15px; font-weight: 600; color: var(--gf-muted); }
.card-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card-body > p { margin: 0; }
.card-intro { margin: 0; padding: 14px 20px 0; font-size: 16px; line-height: 1.5; color: var(--gf-muted); }
a.card { text-decoration: none; color: var(--gf-ink); }
a.card:hover { border-color: var(--gf-brand); color: var(--gf-ink); }
.card-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: var(--gf-brand); color: #fff; }
.card-ico svg { width: 21px; height: 21px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-block; font-size: 15px; font-weight: 600; line-height: 1.3; background: var(--gf-tint);
  color: var(--gf-tint-ink); border-radius: 999px; padding: 4px 12px; }
/* A key to press on the phone: Contact's department keys, the FAQ's dial codes. */
.key { display: inline-block; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.4; background: var(--gf-ink);
  color: #a6ce90; border-radius: 6px; padding: 0 7px; white-space: nowrap; }
/* A footnote: a quiet strip closing its card, or boxed on the ground. */
/* A block, not flex: a note's text and links must flow as one paragraph, so the mark sits in the padding. */
.note { position: relative; display: block; margin: 0; padding: 12px 20px 12px 48px; background: var(--gf-head);
  border-top: 1px solid var(--gf-hair); font-size: 15px; line-height: 1.5; color: var(--gf-muted); overflow-wrap: anywhere; }
.note::before { content: "i"; position: absolute; left: 20px; top: 14px; display: grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; border: 1.5px solid var(--gf-brand); color: var(--gf-brand); font-size: 12px; font-weight: 700;
  font-style: italic; font-family: Georgia, serif; line-height: 1; }
.note--box { border: 1px solid var(--gf-line); border-radius: 12px; }
/* equipment's buy-or-lease line, under its description: the box charges apart from the service price */
.pr-row.has-equip { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; row-gap: 0; }
.pr-row.has-equip > .note--inline { grid-column: 1 / -1; }   /* the whole row's width, under description and price */
.note--inline { margin-top: 10px; padding: 8px 14px 8px 40px; font-size: 15px; }
.note--inline::before { left: 13px; top: 10px; }
.note--inline strong { color: var(--gf-ink); font-weight: 700; }
/* a legal disclosure (a license line): a card of its own, marked § rather than i */
.note--legal { background: var(--gf-card); padding-top: 14px; padding-bottom: 14px; }
.note--legal::before { content: "§"; top: 16px; font-style: normal; font-family: inherit; font-size: 13px; }
.card-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
/* a group's panel within a tab ("Basic Television", "Expanded Television"), in the colours of the tag with
   its name: a light tag tints the panel, a dark one makes it a band like the page's own dark blocks. The
   heading stays pinned under the section bar while its cards scroll by. */
.tier { --tier-pad: clamp(14px, 2.2vw, 24px); background: var(--tier-bg); border: 1px solid var(--tier-border);
  border-radius: 20px; padding: 0 var(--tier-pad) var(--tier-pad); overflow: clip; }   /* clip, not hidden: the heading still pins */
.tier-head { position: sticky; top: 121px; z-index: 5; margin: 0 calc(-1 * var(--tier-pad)) 4px; padding: 16px var(--tier-pad) 14px;
  background: var(--tier-bg); color: var(--tier-fg); font-size: clamp(21px, 2.2vw, 26px); font-weight: 700; line-height: 1.2; }
.tier > .card-grid { gap: 18px; }
/* Community pages: a section card's head is a deep green band with a white title (Tyler, 2026-11-11: "deep green
   all around"), except in a group on a dark band, where a dark head would melt into it; there it is a light green
   band with the ink title. Both are top-to-bottom gradients, so the head has some life without a hard edge. Print
   (below) clears them with the `background` shorthand. Contrast at each gradient's lightest point: white on #1c5a33
   8.2:1; ink on #e2f1dc 14.9:1 (AA is 4.5:1). */
.com-sections .card-head { background: linear-gradient(180deg, #1c5a33 0%, #0f3b21 100%); border-bottom-color: #0f3b21; }
.com-sections .card-head .card-title { color: #fff; }
.com-sections .tier.is-dark .card-head { background: linear-gradient(180deg, #f3faf0 0%, #e2f1dc 100%); border-bottom-color: #d4e8cd; }
.com-sections .tier.is-dark .card-head .card-title { color: var(--gf-ink); }
/* On paper the backgrounds drop by default, which would leave a white title on white: print the light strip. */
@media print {
  .com-sections .card-head { background: var(--gf-head); border-bottom-color: var(--gf-hair); }
  .com-sections .card-head .card-title { color: var(--gf-ink); }
  /* a dark group's heading is light-on-dark on screen; on paper, the brand green the light groups print in */
  .tier.is-dark .tier-head { color: var(--gf-brand); }
}
/* price lists two to a row: each column stacks on its own, so no gaps */
.card-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.card-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (max-width: 1105px) {
  .card-cols { display: flex; flex-direction: column; }
  .card-col { display: contents; }   /* one column, back in the page's order (each card's `order`) */
}

/* header */
/* The header row. Between the phone header (under 760px) and 900px the desktop row is tightened so it fits on one
   line (at full size it needs about 810px): a slightly smaller logo and nav, less padding. !important only where the
   markup sets the padding inline. */
.hdr-row { padding: 0 24px; gap: 16px; }
.hdr-nav { gap: 8px; }
.hdr-logo { height: 42px; }
@media (min-width: 760px) and (max-width: 899px) {
  .hdr-row { padding: 0 16px; gap: 10px; }
  .hdr-logo { height: 36px; }
  .hdr-nav { gap: 2px; }
  .hdr-nav .nav-link { padding: 10px 9px; font-size: 16px; }
  #loginToggle { padding: 10px 10px !important; }
  .hdr-row a[href^="tel:"] { padding: 10px 12px !important; }
}
.nav-link { color: #fff; text-decoration: none; padding: 10px 14px; border-radius: 8px; background: transparent; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.1); }
.nav-link[aria-current="page"] { background: rgba(255,255,255,.16); }

/* hover states the prototype expressed as style-hover */
.hov-bg:hover { background: #f4f6f3; color: #0b1d12; }
.hov-border:hover { border-color: #006327 !important; color: #0b1d12; }
.toc-link:hover { color: #006327 !important; }
/* Legal contents: pinned only while it has its own column beside the text (the grid puts it there from
   ~941px with a scrollbar). Stacked above the text on narrower screens, it scrolls away with the page. */
@media (min-width: 960px) {
  .legal-toc { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow: auto; }
}
.bar-link:hover { background: rgba(255,255,255,.1); border-bottom-color: #59ad40 !important; color: #fff; }

/* community section bar: the order button appears only once the bar is stuck */
.bar-cta { opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .2s, transform .2s; }
#sectionbar[data-stuck="true"] .bar-cta { opacity: 1; transform: none; pointer-events: auto; }
#sectionbar nav.has-more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
/* Phones: six sections never fit one row beside Order Now, so the row becomes a picker: one button naming the section
   you're in (site.js follows the scroll), opening the list of every section under the bar. Desktop keeps the row;
   without script the phone keeps it too (the picker stays hidden). */
.bar-pick, .bar-pick-list[hidden] { display: none; }
@media (max-width: 759px) {
  #sectionbar.is-picker nav { display: none !important; }   /* the row carries an inline display:flex */
  #sectionbar.is-picker .bar-pick { display: block; flex: 1 1 auto; min-width: 0; }
  .bar-pick-btn { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 14px 0; border: 0; background: none;
    color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
  .bar-pick-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bar-pick-btn svg { flex: none; transition: transform .2s; }
  .bar-pick-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
  .bar-pick-btn:focus-visible { outline: 3px solid #59ad40; outline-offset: 2px; border-radius: 6px; }
  .bar-pick-list { position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 6px 12px 12px; list-style: none;
    background: #0b1d12; border-top: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 32px -14px rgba(0,0,0,.65);
    max-height: calc(100vh - 160px); overflow-y: auto; }
  .bar-pick-list a { display: block; padding: 13px 12px; border-left: 3px solid transparent; border-radius: 0 8px 8px 0; color: #fff;
    font-size: 17px; font-weight: 600; text-decoration: none; }
  .bar-pick-list a:hover { background: rgba(255,255,255,.08); }
  .bar-pick-list a[aria-current="true"] { background: rgba(255,255,255,.08); border-left-color: #59ad40; }
  .bar-pick-list a:focus-visible { outline: 3px solid #59ad40; outline-offset: -3px; }
}
@media (prefers-reduced-motion: reduce) { .bar-pick-btn svg { transition: none; } }

/* finder dropdown */
.finder-hit { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-decoration: none; color: #0b1d12; padding: 12px 14px; border-radius: 8px; font-size: 17px; font-weight: 600; }
.finder-hit:hover, .finder-hit:focus { background: #f4f6f3; color: #0b1d12; }
.finder-hit span:last-child { color: #3c4a40; font-weight: 400; font-size: 16px; }

/* order form interest tiles */
.interest:has(input:checked) { border-color: #006327 !important; background: #f4f6f3 !important; }

/* Footer: dark, closing the page as the header opens it. Address on the left,
   legal links on the right, the copyright under a hairline across both; stacked
   on phones. On the page's own edges: 1232 = the 1280 content box less its 24px
   gutters (the footer pads 24px itself). */
.site-footer { background: #0b1d12; color: #c9d6cc; padding: 36px 24px 28px; }
.footer-grid { max-width: 1232px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto;
  grid-template-areas: "info nav" "copy copy"; column-gap: 24px; row-gap: 20px;
  font-size: 15px; color: #c9d6cc; line-height: 1.6; }
.footer-grid a { color: #fff; }
.footer-grid a:hover { color: #a6ce90; }
.footer-info { grid-area: info; }
.footer-nav { grid-area: nav; }
.footer-copy { grid-area: copy; font-size: 14px; color: #a9b8ad; border-top: 1px solid rgba(255,255,255,.14); padding-top: 14px; }

/* The short band (_band.html): a page's title on the site's dark ground. */
.band { position: relative; background: #06140c; color: #fff; overflow: hidden; }
.band-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 92% 120%, rgba(89,173,64,.42), transparent 70%),
    radial-gradient(45% 80% at 4% -30%, rgba(30,160,170,.28), transparent 70%); }
.band-ring { position: absolute; width: 1400px; height: 1400px; border-radius: 50%; right: -560px; top: 60px;
  border: 1.5px solid rgba(89,173,64,.32); box-shadow: 0 0 40px rgba(89,173,64,.2); }
.band-ring--2 { right: -520px; top: 100px; border: 1px solid rgba(120,220,200,.22); box-shadow: none; }
.band-in { position: relative; max-width: 1280px; margin: 0 auto; padding: clamp(32px, 4.5vw, 56px) 24px; }
.band-above { font-size: 16px; color: #a6ce90; margin-bottom: 10px; }
.band-above a { color: #a6ce90; text-decoration: none; }
.band-eyebrow { font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.band-above a:hover { color: #fff; }
.band-title { font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -.01em; margin: 0; }
.band-lede { font-size: 19px; line-height: 1.5; color: #d7e3d9; margin: 10px 0 0; max-width: 640px; }
.band--center .band-in { text-align: center; }
.band--center .band-lede { margin-inline: auto; }

/* Search: field and button on one line; on a phone the button goes under the
   field, so the field is wide enough for its hint. */
.find-row { display: flex; flex-wrap: wrap; gap: 10px; }
.find-row input { flex: 999 1 240px; min-width: 0; }
.find-row button { flex: 1 0 auto; min-height: 48px; }

/* Price rows: the unit on the price line; a fee that isn't monthly is named above it. */
.pr-price { flex: none; text-align: right; min-width: 90px; font-variant-numeric: tabular-nums; }
.pr-price strong { font-size: 19px; white-space: nowrap; }
.pr-unit { font-size: 15px; font-weight: 400; color: #3c4a40; margin-left: 2px; }
.pr-note { display: block; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #0b1d12; }
/* priced per box (The Mill's Wally): the first, then each additional, two prices of equal weight */
.pr-price.is-tiered { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.pr-tier { display: block; }
.pr-more { display: block; font-size: 13px; color: #3c4a40; white-space: nowrap; }

/* Inside a card: price rows, catalogs, documents. Rows divide on hairlines. */
.pr-row { display: flex; justify-content: space-between; gap: 20px; padding: 13px 20px; font-size: 17px; }
.pr-row + .pr-row, .card-intro + .pr-list .pr-row:first-child { border-top: 1px solid var(--gf-hair); }
.card-intro + .pr-list, .card-intro + .doc-list, .card-intro + .cat-body { margin-top: 12px; }
.pr-desc { color: var(--gf-muted); line-height: 1.45; font-size: 16px; }
.cat-body { padding: 16px 20px 18px; }
.cat-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.cat-item { background: var(--gf-head); border: 1px solid var(--gf-hair); border-radius: 10px; padding: 12px 14px; }
.cat-item strong { font-size: 17px; }
.cat-item div { font-size: 15px; line-height: 1.45; color: var(--gf-muted); margin-top: 4px; }
/* A dark panel's ring in its corner, as on the bands. */
.ring-corner { position: absolute; right: -90px; top: -160px; width: 380px; height: 380px; border-radius: 50%;
  border: 1.5px solid rgba(89,173,64,.32); pointer-events: none; }

/* Documents. A document with one file is a tile, the whole tile its link; a device with
   several files (a receiver's guides) is a row in "Guides by device", each file a chip. */
.doc-tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.doc-tile { display: flex; gap: 14px; align-items: flex-start; min-width: 0; padding: 16px 18px; text-decoration: none;
  color: var(--gf-ink); background: var(--gf-card); border: 1px solid var(--gf-line); border-radius: 14px; }
.doc-tile:hover { border-color: var(--gf-bright); color: var(--gf-ink); box-shadow: 0 6px 18px -12px rgba(11,29,18,.45); }
.doc-tile:focus-visible { outline: 3px solid var(--gf-bright); outline-offset: 2px; }
.doc-tile.is-unset { opacity: .55; pointer-events: none; }
.doc-ico { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--gf-tint); color: var(--gf-brand); }
.doc-ico svg { width: 20px; height: 20px; }
.doc-tile-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.doc-tile-text strong { font-size: 17px; line-height: 1.3; }
.doc-tile-text span { font-size: 15px; line-height: 1.45; color: var(--gf-muted); }
.doc-tile-text .doc-kind { align-self: flex-start; margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--gf-muted); background: var(--gf-head); border: 1px solid var(--gf-hair); border-radius: 6px; padding: 2px 7px;
  line-height: 1.4; white-space: nowrap; }
.doc-tiles + .doc-devices { margin-top: 18px; }
.doc-row { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: 8px 24px; align-items: center;
  padding: 14px 20px; }
.doc-row + .doc-row { border-top: 1px solid var(--gf-hair); }
.doc-name { font-size: 17px; }
.doc-files { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-file { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--gf-brand); font-size: 16px; font-weight: 600;
  border: 1px solid var(--gf-line); border-radius: 999px; padding: 6px 14px; min-height: 40px; background: var(--gf-card); }
.doc-file:hover { border-color: var(--gf-brand); color: var(--gf-brand); background: #f1f8ee; }
.doc-file small { font-size: 12px; font-weight: 700; letter-spacing: .05em; color: var(--gf-muted); }
@media (max-width: 759px) {
  .doc-row { grid-template-columns: minmax(0, 1fr); }
}

/* Order request: the form, and beside it what has been picked and the one Send button. */
.order-layout { max-width: 1280px; margin: 0 auto; padding: clamp(24px, 4vw, 48px) 24px; display: grid; gap: 32px;
  grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) {
  .order-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; }
  .order-side { position: sticky; top: 92px; }
}
.order-picked { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.order-picked li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; font-size: 15px; line-height: 1.35; }
.op-name { min-width: 0; overflow-wrap: anywhere; }
.op-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.op-more { grid-column: 1 / -1; font-size: 13px; color: #3c4a40; }   /* a box's buy or lease, under its line */
.order-empty { font-size: 15px; color: #3c4a40; margin: 0; }
.order-send { background: #006327; color: #fff; font-weight: 700; font-size: 18px; padding: 14px 20px; border-radius: 10px; border: 0; cursor: pointer; }
.order-call { font-size: 15px; color: #3c4a40; }

/* responsive switches (the prototype's isDesktop / isMobile at 760px) */
@media (max-width: 759px) {
  .only-desktop { display: none !important; }
  .site-footer { padding-bottom: calc(28px + 56px); } /* dark room under the fixed call bar: no light strip if the bar is shorter */
  .footer-grid { grid-template-columns: 1fr; grid-template-areas: "info" "nav" "copy"; row-gap: 20px; }
}
@media (min-width: 760px) {
  .only-mobile { display: none !important; }
}


/* Order request form: the services page's look, compact. */
.of-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.of-legend { font-size: 20px; font-weight: 700; color: #0b1d12; padding: 0; margin-bottom: 10px; }
.of-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.of-label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.of-opt { color: #3c4a40; font-weight: 400; }
/* The forms' fields (app/templates/_fields.html), the order form and Contact alike: one height, one border,
   the site's focus ring, and a drop-down drawn the same in every browser (site.js, initMenus). */
.of-field { min-width: 0; }
.of-row { margin-top: 12px; }
.of-input { display: block; width: 100%; min-height: 48px; margin: 0; font: inherit; font-size: 16px; line-height: 1.4; padding: 11px 12px;
  border: 2px solid #b8c4bb; border-radius: 10px; background: #fff; color: #0b1d12; }
.of-input:hover { border-color: #9fb3a4; }
.of-input:focus, .of-input[aria-expanded="true"] { border-color: #006327; }
.of-input[aria-invalid="true"], .of-input[aria-invalid="true"]:hover, .of-input[aria-invalid="true"]:focus { border-color: #b8412b; }
.of-text { resize: vertical; min-height: 96px; }
/* A drop-down's chevron, on the <select> itself (shown without script) and on the drawn one. */
.of-select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5l4.5 4.5 4.5-4.5' fill='none' stroke='%23006327' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center / 12px 8px; }
.of-error { color: #7a1f10; font-size: 14px; line-height: 1.35; margin-top: 6px; }
/* The drawn drop-down: a box with the chosen answer, over the finder's dropdown list. */
.menu { position: relative; }
.menu-btn { display: flex; align-items: center; text-align: left; user-select: none; -webkit-user-select: none; }
.menu-btn[aria-expanded="true"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 6.5l4.5-4.5 4.5 4.5' fill='none' stroke='%23006327' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.menu-btn:focus { outline: 3px solid #59ad40; outline-offset: 2px; }   /* focused by mouse or keys alike, as a text field */
.menu-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Two answers side by side (Email / Phone) on a form, the order form's and Contact's alike: the seg reads as a
   field (its box, border and height; it may sit on the page's ground, not a card), and the chosen answer is
   tinted green. In a form's column it fills the column (.seg-fill); in Contact's bar it hugs its answers. */
.of-segfield { border: 0; margin: 0; padding: 0; min-width: 0; }
.of-segfield legend { padding: 0; }
.seg.seg-field { display: inline-flex; min-height: 48px; padding: 3px; background: #fff; border: 2px solid #b8c4bb; }
.seg.seg-field:hover { border-color: #9fb3a4; }
.seg.seg-field label { display: flex; min-width: 0; }
.seg.seg-field label span { flex: 1; justify-content: center; padding: 6px 16px; border-radius: 7px; }
.seg.seg-field label input:checked + span { background: var(--gf-tint); color: var(--gf-tint-ink); box-shadow: inset 0 0 0 1px #a6ce90; }
.seg.seg-fill { display: flex; width: 100%; }
.seg.seg-fill label { flex: 1 1 0; }
.seg.seg-fill label span { padding: 6px 10px; }

/* minmax(0, 1fr): a grid column otherwise never narrows below its widest row,
   and one long option would push every price off the card on a phone. */
.oi-list { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
.oi { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid #dfe6df;
  border-radius: 10px; background: #fff; cursor: pointer; font-size: 16px; line-height: 1.35; }
.oi:hover { border-color: #a6ce90; }
.oi:has(input:checked) { border-color: #006327; background: #f1f8ee; box-shadow: inset 0 0 0 1px #006327; }
.oi:has(input:focus-visible) { outline: 2px solid #006327; outline-offset: 2px; }
/* The form's tick boxes and radios are drawn here, not by the browser: a browser's own control has its own
   hover and pressed shades (Chrome darkens a ticked box to near-black under the pointer), so each browser
   would show its own. These look the same everywhere, in every state. They are still the real inputs, so the
   keyboard, screen readers and the posted form are unchanged; in high contrast mode the browser's own return. */
.oi input { flex: none; box-sizing: border-box; width: 20px; height: 20px; margin: 0; appearance: none; -webkit-appearance: none;
  border: 2px solid #6b7c70; background: #fff center / 14px 14px no-repeat; cursor: pointer; }   /* no fade: no in-between shade */
.oi input:checked, .oi:hover input:checked, .oi input:checked:active, .oi input:checked:focus { border-color: #006327; background-color: #006327; }
.oi input[type="checkbox"] { border-radius: 5px; }
.oi input[type="radio"] { border-radius: 50%; }
.oi:hover input:not(:checked) { border-color: #006327; }
.oi input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3.1 3.1 6.5-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.oi input[type="radio"]:checked { box-shadow: inset 0 0 0 4px #fff; }   /* green ring, white gap, green dot */
.oi input:focus-visible { outline: none; }   /* the row carries the focus ring (.oi:has(input:focus-visible)) */
.oi input:disabled { opacity: .5; cursor: default; }
@media (forced-colors: active) { .oi input { appearance: auto; -webkit-appearance: auto; } }
.oi-main { flex: 1; min-width: 6em; display: flex; flex-direction: column; }   /* a floor: the name never squeezes to a letter a line */
.oi-more { font-size: 13px; color: #3c4a40; overflow-wrap: anywhere; }   /* each additional, buy or lease, a deposit: under the name, so the price column is only the monthly figure */
.oi-name { font-weight: 600; color: #0b1d12; overflow-wrap: anywhere; }
.oi-detail { font-size: 14px; color: #3c4a40; overflow-wrap: anywhere; }
.oi-price { flex: 0 1 auto; min-width: 0; text-align: right; }   /* may wrap "/mo each" under the amount */
.oi-price strong { font-size: 16px; color: #0b1d12; font-variant-numeric: tabular-nums; }
.oi-price .pr-unit { white-space: nowrap; }   /* at the narrowest, "/mo each" drops under the amount, whole */
.oi-price .pr-unit { font-size: 13px; }
.oi-price .pr-note { font-size: 11px; }
.oi-none .oi-name { font-weight: 400; color: #3c4a40; }
/* A plan's tag, as on its card on the services page. */
.oi-tag { display: inline-block; margin-left: 8px; vertical-align: 1px; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; padding: 1px 7px; border: 1px solid; border-radius: 5px; line-height: 1.4; }

.og { border: 1px solid #dfe6df; border-radius: 14px; background: #fff; margin-top: 10px; }
.og summary { list-style: none; cursor: pointer; padding: 13px 16px; display: flex; align-items: center;
  gap: 10px; font-size: 18px; font-weight: 700; color: #0b1d12; }
.og summary::-webkit-details-marker { display: none; }
.og summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid #006327;
  border-bottom: 2px solid #006327; transform: rotate(45deg); transition: transform .15s; }
.og[open] summary::after { transform: rotate(-135deg); }
.og[open] summary { border-bottom: 1px solid #dfe6df; }
.og summary:focus-visible { outline: 2px solid #006327; outline-offset: 2px; border-radius: 14px; }
.og-count { font-size: 13px; font-weight: 700; color: #006327; background: #eaf4e6; border-radius: 999px; padding: 2px 10px; }
.og-count:empty { display: none; }
.os { padding: 12px 16px 14px; }
.os + .os { border-top: 1px dashed #dfe6df; }
/* The order form shows what's relevant (app/ordering.py; site.js keeps it live): a tier's main choice, its
   add-ons once it has a service, and equipment once what it needs is picked. .is-off folds a part (the
   template's noscript rule unfolds everything without script). */
.is-off { display: none !important; }
.ot + .ot { border-top: 1px dashed #dfe6df; }
.ot { padding-bottom: 6px; }
.ot-name { padding: 14px 16px 0; font-size: 17px; font-weight: 700; color: #006327; }
.ot-gone, .ot-tease { margin: 4px 16px 10px; padding: 10px 12px; font-size: 15px; color: #3c4a40; border: 1px dashed #c9d8c5;
  border-radius: 10px; background: #fbfdfa; }
.ot-gone { margin-top: 10px; }
.ot-tease b, .ot-gone b, .og-unsure b { color: #0b1d12; font-weight: 600; }
.og-unsure { margin: 10px 0 0; padding: 12px 14px; font-size: 16px; color: #3c4a40; border: 1px dashed #c9d8c5;
  border-radius: 12px; background: #fbfdfa; }
.ot-addons { margin: 2px 16px 12px; border-radius: 12px; background: #f6faf4; border: 1px solid #e3ebe0; }
.ot-addons-h { padding: 12px 12px 0; font-size: 16px; font-weight: 700; color: #0b1d12; }
.ot-addons .os { padding: 10px 12px 12px; }
@media (max-width: 360px) {   /* the add-ons' box sits inside a card: give its rows the width back on the narrowest phones */
  .ot-addons { margin-left: 8px; margin-right: 8px; }
  .ot-addons .os { padding-left: 8px; padding-right: 8px; }
}
.os-sub { margin: 10px 0 2px; font-size: 14px; font-weight: 600; color: #3c4a40; }   /* a step lighter than the choice's heading: one choice, two lists */
.os-held { margin: 8px 0 0; font-size: 14px; color: #3c4a40; }
.oi.is-new, .ot-addons.is-new { animation: oi-in .3s ease both; }
@keyframes oi-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .oi.is-new, .ot-addons.is-new { animation: none; } }
.os-head { display: flex; gap: 8px; align-items: baseline; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #3c4a40; margin-bottom: 8px; }
.os-head span { text-transform: none; letter-spacing: 0; font-weight: 400; color: #6b7a70; }
.of-summary { margin-top: 14px; background: #f4f6f3; border-radius: 12px; padding: 14px 16px; font-size: 15px; }
.of-summary ul { margin: 6px 0 0; padding-left: 20px; line-height: 1.5; }

/* ---- Support page ------------------------------------------------------ */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sup { padding-top: 28px; padding-bottom: clamp(40px, 6vw, 64px); display: grid; gap: 24px; }

/* The band: the title, and the one number with what each option reaches. */
.sup-band { display: grid; gap: 32px 48px; align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.ivr { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 20px 24px 12px; }
.ivr-num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ivr-num a { color: #fff; text-decoration: none; font-size: clamp(30px, 3.2vw, 40px); font-weight: 700; white-space: nowrap; }
.ivr-num span { color: #a6ce90; font-size: 16px; }
.ivr-opts { list-style: none; margin: 10px 0 0; padding: 0; }
.ivr-opts li { display: grid; grid-template-columns: 34px 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.12); }
.ivr-opts b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(165,217,137,.16);
  color: #a6ce90; font-size: 18px; }
.ivr-what { font-size: 18px; font-weight: 700; }
.ivr-when { font-size: 15px; color: #d7e3d9; }
.ivr-when.is-always { color: #a6ce90; font-weight: 600; }
.ivr-alt { font-size: 15px; color: #b9c8bd; padding: 10px 0 6px; border-top: 1px solid rgba(255,255,255,.12); }
.ivr-alt a { color: #fff; }
@media (max-width: 759px) { .ivr-opts li { grid-template-columns: 34px 1fr; } .ivr-when { grid-column: 2; } }

/* Quick links: a row of tiles. */
.sup-tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
a.card.tile { flex-direction: row; align-items: flex-start; gap: 14px; padding: 18px 20px; }
.tile-text { display: grid; gap: 2px; min-width: 0; }
.tile-text strong { font-size: 18px; }
.tile-text span { font-size: 15px; color: var(--gf-muted); }

/* A segmented choice: buttons or radio labels in a tray. */
.seg { display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 3px; border-radius: 10px; background: #e6eee3; }
.seg button, .seg label span { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 15px; font-weight: 600;
  color: var(--gf-muted); background: transparent; border: 0; border-radius: 8px; padding: 7px 14px; cursor: pointer; white-space: nowrap; }
.seg button[aria-pressed="true"], .seg label input:checked + span { background: #fff; color: var(--gf-ink); box-shadow: 0 1px 2px rgba(11,29,18,.14); }
.seg label { position: relative; }
.seg label input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg label input:focus-visible + span, .seg button:focus-visible { outline: 3px solid var(--gf-bright); outline-offset: 1px; }
.seg-n { font-size: 13px; color: #5b6b5f; }

/* Common questions: the list beside the answer. Without script every answer
   is shown in the right-hand column; with it (.is-live), one at a time. */
.faq-tools { flex: 0 1 600px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; }
/* The topic tray: one row while it fits, wrapping rather than leaving the card (Studio can add topics). Once the
   tools stack under the title (870px and under), they take the card's width and the tray fills it, lined up with
   the search. Under 700px it is an even grid across the card: three a row, two on a phone. */
.faq-tools .seg { flex-wrap: wrap; max-width: 100%; }
@media (max-width: 879px) {
  .faq-tools { flex-basis: 100%; }
  .faq-tools .seg { width: 100%; }
  .faq-tools .seg button { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 699px) {
  .faq-tools .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faq-tools .seg button { justify-content: center; white-space: normal; text-align: center; }
}
@media (max-width: 520px) { .faq-tools .seg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.faq-search { position: relative; flex: 1 1 220px; }
/* Wide screens: the title, the search and the tray on one line, the search taking the room between (at least
   240px). The tools still wrap, so a tray with more topics than fit drops under the search instead of leaving the
   card. */
@media (min-width: 1140px) {
  .faq > .card-head > .card-title { flex: none; }
  .faq-tools { flex: 1 1 auto; gap: 12px; }
  .faq-tools .faq-search { flex: 1 1 240px; }
  .faq-tools .seg { flex: none; }
}
.faq-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--gf-muted); }
.faq-search input { width: 100%; font: inherit; font-size: 16px; padding: 9px 12px 9px 38px; border: 1.5px solid #c7d3c4;
  border-radius: 10px; background: #fff; color: var(--gf-ink); }
.faq-search input:focus { outline: none; border-color: var(--gf-brand); box-shadow: 0 0 0 3px rgba(0,99,39,.15); }
.faq-status { margin: 0; padding: 0 20px; font-size: 15px; color: var(--gf-muted); }
.faq-status:empty { display: none; }
.faq-status:not(:empty) { padding-top: 12px; }
.faq-body { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .faq-body { grid-template-columns: minmax(260px, 400px) minmax(0, 1fr); } }
.faq-list { padding: 8px; border-bottom: 1px solid var(--gf-hair); }
@media (min-width: 900px) { .faq-list { border-bottom: 0; border-right: 1px solid var(--gf-hair); } }
.faq-group-title { margin: 10px 12px 4px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gf-brand); }
.faq.is-live .faq-group-title { display: none; }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px;
  font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--gf-ink); text-decoration: none; }
.faq-q::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor;
  transform: rotate(45deg); opacity: .5; }
.faq-q:hover { background: #f2f6f0; color: var(--gf-ink); }
.faq-q[aria-current="true"] { background: var(--gf-tint); color: #0b3d1a; }
.faq-answers { padding: 8px 0; min-width: 0; }
.faq-a { padding: 18px 28px; scroll-margin-top: 96px; outline: none; }
.faq-a + .faq-a { border-top: 1px solid var(--gf-hair); }
.faq.is-live .faq-a { border-top: 0; }
.faq-a-topic { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gf-brand); }
.faq-a h3 { margin: 6px 0 10px; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; }
/* Plain wrapping in answers: WebKit's text-wrap: pretty (from body) breaks their lines well short of the
   column on a phone. */
.faq-answer { font-size: 17px; line-height: 1.6; color: #26342b; max-width: 66ch; display: grid; gap: 12px;
  text-wrap: wrap; }
.faq-answer > * { margin: 0; }
.faq-answer strong { color: var(--gf-ink); }
/* Steps: numbered squares, the IVR's option keys on a light ground. Points: a small dot. */
.faq-steps, .faq-points { list-style: none; padding: 0; display: grid; gap: 10px; }
.faq-steps { counter-reset: faq-step; }
.faq-steps > li { counter-increment: faq-step; position: relative; padding-left: 40px; }
.faq-steps > li::before { content: counter(faq-step); position: absolute; left: 0; top: 0; display: grid; place-items: center;
  width: 27px; height: 27px; border-radius: 8px; background: var(--gf-tint); color: var(--gf-tint-ink); font-size: 15px; font-weight: 700; line-height: 1; }
.faq-points > li { position: relative; padding-left: 22px; }
.faq-points > li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--gf-bright); }
.faq-answer .note { margin: 2px 0 0; font-size: 16px; }
.faq-tel, .faq-nb { white-space: nowrap; }
/* A screen word's light padding and border read as a gap before a stop, so the stop is pulled tight against it, as
   after a word. A dark key's edge already reads tight; pulled in, the stop would run into its corner. */
.ui-word + .faq-stop { margin-left: -.04em; }
.faq-tel a { font-weight: 700; }
/* A word as it shows on a screen or a device: a key-cap chip (gfNMS Help's button words). */
.ui-word { display: inline-block; font-family: inherit; font-size: .88em; font-weight: 600; line-height: 1.45; color: var(--gf-ink);
  background: #fff; border: 1px solid #c7d3c4; border-bottom-width: 2px; border-radius: 6px; padding: 0 7px; white-space: nowrap; }
.guide.faq-doc { width: fit-content; max-width: 100%; margin-top: 16px; }   /* the Guides row's part, as wide as its name */
.faq-more { margin: 8px 28px 10px; padding-top: 14px; border-top: 1px solid var(--gf-hair); font-size: 16px; line-height: 1.5; color: var(--gf-muted);
  text-wrap: wrap; }

/* Guides: one slim row. */
.guides .card-meta { font-weight: 400; }
.guides-row { display: grid; gap: 10px; padding: 14px 20px 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.guide { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--gf-line);
  border-radius: 12px; background: #fbfcfa; color: var(--gf-ink); font-size: 16px; font-weight: 600; text-decoration: none; }
.guide:hover { border-color: var(--gf-bright); color: var(--gf-ink); }
.guide-name { flex: 1 1 auto; min-width: 0; }   /* the icon, then the name, then the PDF tag at the end */
.guide small { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--gf-tint-ink); background: var(--gf-tint);
  border-radius: 6px; padding: 3px 7px; }

/* Contact: the band's number, then the three departments (the message's topic)
   above the form, with the office and links in a column beside them. */
.contact-band { display: flex; flex-wrap: wrap; gap: 16px 48px; align-items: flex-end; justify-content: space-between; }
.contact-num { display: grid; gap: 2px; text-align: right; }
.contact-num > a { color: #fff; text-decoration: none; font-size: clamp(28px, 3vw, 38px); font-weight: 700; line-height: 1.1; }
.contact-num span { font-size: 15px; color: #a6ce90; }
.contact-num span a { color: #fff; }
@media (max-width: 759px) { .contact-num { text-align: left; } }
.contact { padding-top: 28px; padding-bottom: clamp(40px, 6vw, 64px); display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .contact { grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr); align-items: start; } }
.contact-main { min-width: 0; }
.contact-side { display: grid; gap: 14px; min-width: 0; }
@media (min-width: 1000px) { .contact-side { padding-top: 30px; } }   /* level with the department cards, under their label */
.contact-office { font-style: normal; font-size: 16px; line-height: 1.55; display: block; }
.contact-office span { color: var(--gf-muted); }
.contact-links { gap: 8px; }
.contact-links a { font-weight: 700; text-decoration: none; }

/* The message form (_message_form.html) */
.msg { display: grid; gap: 18px; scroll-margin-top: 90px; }
.msg-wrap { display: grid; gap: 18px; margin: 0; }
.msg-depts { border: 0; margin: 0; padding: 0; min-width: 0; }
.msg-lab { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gf-brand); }
.dept-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dept { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px 18px; border-radius: 16px;
  background: var(--gf-card); border: 1.5px solid var(--gf-line); color: var(--gf-ink); }
label.dept { cursor: pointer; }
label.dept:hover { border-color: var(--gf-bright); }
.dept input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dept:has(input:checked) { border: 2px solid var(--gf-brand); padding: 15.5px 17.5px; box-shadow: 0 10px 30px -18px rgba(0,99,39,.6); }
.dept:has(input:checked)::after { content: "✓"; position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--gf-brand); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.dept:has(input:focus-visible) { outline: 3px solid var(--gf-bright); outline-offset: 2px; }
.dept-top { display: flex; align-items: center; gap: 12px; padding-right: 26px; }
.dept-top strong { font-size: 19px; line-height: 1.2; }
.dept-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--gf-tint); color: var(--gf-brand); }
.dept:has(input:checked) .dept-ico { background: var(--gf-brand); color: #fff; }
.dept-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dept-line { display: flex; align-items: baseline; gap: 8px; font-size: 15px; color: var(--gf-muted); }
.dept-sub { font-size: 15px; font-weight: 600; color: var(--gf-brand); overflow-wrap: anywhere; }
@media (max-width: 759px) {
  .dept-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* compact on a phone: the icon beside the three lines, not above them */
  .dept { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 12px 16px; }
  .dept:has(input:checked) { padding: 11.5px 15.5px; }
  .dept-top { display: contents; }
  .dept-ico { grid-row: 1 / span 3; align-self: start; }
  .dept-top strong { padding-right: 26px; }
}
.msg-card { min-width: 0; }
.msg-form { padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; }
.msg-alert { background: #fdf1ef; border: 1px solid #e3a59a; color: #7a1f10; border-radius: 10px; padding: 12px 16px; font-size: 16px; }
.msg-alert.is-notice { background: #fff6dc; border-color: #e8d28f; color: #5c4400; }   /* amber: send again, not an error */
.msg-fields { display: grid; gap: 16px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 599px) { .msg-fields { grid-template-columns: minmax(0, 1fr); } }
/* The community search on Contact (site.js): a box over the hidden <select>. Its list is the shared dropdown
   (.dd-list), the finder's look, which the drawn drop-downs use too. */
.cpick { position: relative; }
.cpick-input { padding-right: 40px !important; }
.cpick-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: var(--gf-muted); font-size: 22px; line-height: 1; cursor: pointer; }
.cpick-clear:hover { background: var(--gf-head); color: var(--gf-ink); }
.dd-list { position: absolute; left: 0; right: 0; top: 100%; margin: 6px 0 0; padding: 6px; list-style: none; z-index: 20;
  background: #fff; border: 1px solid #9fb3a4; border-radius: 12px; max-height: 300px; overflow-y: auto;
  box-shadow: 0 2px 0 rgba(11,29,18,.06), 0 24px 48px -8px rgba(11,29,18,.45); }
.dd-list [role=option] { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 12px; border-radius: 8px;
  cursor: pointer; font-size: 16px; font-weight: 600; color: var(--gf-ink); }
.dd-list [role=option] span + span { flex: none; font-size: 15px; font-weight: 400; color: var(--gf-muted); }
.dd-list [role=option]:hover, .cpick-list [aria-selected=true] { background: #f1f8ee; }
.dd-list .cpick-other { margin-top: 4px; border-top: 1px solid var(--gf-hair); border-radius: 0 0 8px 8px; color: var(--gf-brand); }
.cpick-none { padding: 10px 12px; font-size: 15px; color: var(--gf-muted); }
.dd-list.is-up { top: auto; bottom: 100%; margin: 0 0 6px; }   /* no room below: it opens upward */
/* The drawn drop-down's answers: the chosen one green with a tick; the one the keys are on, tinted. */
.dd-list .menu-opt { font-weight: 400; }
.dd-list .menu-opt[aria-selected="true"] { font-weight: 600; color: #006327; }
.dd-list .menu-opt[aria-selected="true"]::after { content: ""; flex: none; width: 14px; height: 14px; align-self: center;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3.1 3.1 6.5-7' fill='none' stroke='%23006327' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.dd-list .menu-opt.is-active { background: #f1f8ee; }
.msg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding-top: 18px; border-top: 1px solid var(--gf-hair); }
.msg-reply { display: flex; align-items: center; gap: 12px 24px; }
.msg-reply-lab { font-size: 15px; font-weight: 600; }
.msg-hint { flex: 1 1 200px; text-align: right; font-size: 15px; color: var(--gf-muted); }
.msg-send { background: var(--gf-brand); color: #fff; font-weight: 700; font-size: 18px; padding: 13px 28px; border-radius: 10px; border: 0; cursor: pointer; }
@media (max-width: 759px) { .msg-hint { text-align: left; } .msg-send { width: 100%; } .msg-form { padding: 20px 18px; } }
.msg-sent { padding: 28px 24px; display: grid; gap: 10px; }
.msg-sent h2 { font-size: 26px; margin: 4px 0 0; }
.msg-sent p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--gf-muted); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Speed test: the verdict on the dark band, the region's test card under it
   once its host answers (site.js), and the explainer only when there is a card. */
.st-band { position: relative; background: #06140c; color: #fff; overflow: hidden; }
/* Its own backdrop, unlike the corner glows elsewhere: one glow rising behind
   the card, with faint rings spreading from it, fading out toward the top. */
.st-glow { position: absolute; inset: 0;
  background: radial-gradient(45% 75% at 50% 100%, rgba(89,173,64,.42), transparent 70%),
    radial-gradient(30% 45% at 50% 100%, rgba(30,160,170,.22), transparent 70%),
    repeating-radial-gradient(circle at 50% 115%, rgba(166,206,144,.09) 0 1px, transparent 1.5px 46px);
  -webkit-mask-image: linear-gradient(to top, #000 25%, transparent 95%);
  mask-image: linear-gradient(to top, #000 25%, transparent 95%); }
.st-head { position: relative; max-width: 760px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) 24px; text-align: center; }
.st-eyebrow { color: #a6ce90; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.st-title { display: flex; justify-content: center; align-items: center; gap: 14px; font-size: clamp(30px, 4.5vw, 48px);
  letter-spacing: -.01em; margin: 8px 0 14px; line-height: 1.15; }
.st-dot { flex: none; width: 16px; height: 16px; border-radius: 50%; }
.st-ip { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 17px; color: #d7e3d9; }
.st-lede { font-size: 19px; line-height: 1.5; color: #d7e3d9; margin: 0 auto; max-width: 560px; }
.st-ip button { font: inherit; font-size: 20px; font-weight: 700; color: #fff; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 4px 12px; margin: 0 4px; cursor: pointer; }
.st-ip button:hover { background: rgba(255,255,255,.16); }
#copyHint { display: inline-block; min-width: 6em; text-align: left; font-size: 15px; color: #a6ce90; }
.st-advice { font-size: 18px; line-height: 1.55; color: #d7e3d9; margin: 18px auto 0; max-width: 560px; }
.st-again { display: inline-block; margin-top: 22px; background: #1e7d34; color: #fff; font-weight: 700; font-size: 17px;
  padding: 12px 22px; border-radius: 10px; text-decoration: none; }
.st-slot { max-width: 720px; margin: 0 auto; text-align: left; }
.st-slot iframe { display: block; width: 100%; height: 450px;   /* until the card reports its own height (336 desktop, 447 phone) */ border: 0; border-radius: 16px; margin-top: 36px;
  background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.st-about { max-width: 1120px; margin: 0 auto; padding: clamp(36px, 5vw, 64px) 24px; }
.st-about[hidden] { display: none; }
.st-h2 { font-size: 24px; color: #0b1d12; margin: 0 0 16px; }
.st-metrics { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.st-metric { display: flex; flex-direction: column; border: 1px solid var(--gf-line); border-radius: 16px; background: #fff; overflow: hidden; }
.st-metric-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; min-height: 56px;
  background: var(--gf-head); border-bottom: 1px solid var(--gf-hair); }
.st-metric-head strong { font-size: 19px; color: #0b1d12; }
/* The Artisan, 2026-11-06: the same isometric icons as the speed test card's figures (app/templates/_st_glyph). */
/* the "What the numbers mean" icons, isometric (st-glyph): a solid icon on a small ground slab, in today's 38px slot */
.st-glyph { flex: none; width: 38px; height: 38px; display: block; overflow: visible; }
.st-glyph polygon, .st-glyph path { stroke-linejoin: round; }
.st-glyph .g-slabT { fill: #e3f2df; } .st-glyph .g-slabL { fill: #59ad40; } .st-glyph .g-slabR { fill: #4b9536; }
.st-glyph .g-shadow { fill: #0b1d12; opacity: .12; }
.st-glyph .g-face { fill: #006327; } .st-glyph .g-up { fill: #3a9a5a; stroke: #3a9a5a; stroke-width: .25; } .st-glyph .g-side { fill: #003d17; stroke: #003d17; stroke-width: .25; }
.st-glyph .g-dFace { fill: #22412f; } .st-glyph .g-dUp { fill: #4a6b56; stroke: #4a6b56; stroke-width: .25; } .st-glyph .g-dSide { fill: #16301f; stroke: #16301f; stroke-width: .25; }
.st-glyph .g-dial { fill: #fff; } .st-glyph .g-hand { fill: none; stroke: #006327; stroke-width: 1.3; stroke-linecap: round; }
.st-unit { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--gf-tint-ink); background: var(--gf-tint);
  border-radius: 6px; padding: 2px 8px; }
.st-metric p { flex: 1; margin: 14px 18px; font-size: 16px; line-height: 1.5; color: #3c4a40; }
.st-better { padding: 0 18px 16px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #006327; }
.st-tips { margin-top: 32px; background: #fff; border: 1px solid var(--gf-line); border-radius: 16px; padding: clamp(20px, 3vw, 28px); }
.st-tips ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.st-tips li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.5; color: #3c4a40; }
.st-tips li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 7px; height: 12px;
  border-right: 2.5px solid #006327; border-bottom: 2.5px solid #006327; transform: rotate(45deg); }
.st-tips li strong { display: block; color: #0b1d12; }
.st-tips a { font-weight: 700; }

/* ---- home: "Why fiber from Greenfield" tile ---------------------------------
   States (classes on .wf, set by site.js initWhyFiber):
     (none)                 the still -- no JS, reduced motion, or before init
     .is-armed              hidden, waiting to scroll into view
     .is-armed.is-building  the build plays once (~5.4 s)
     .is-live               the still, with light running in a 4 s loop
     .is-paused             off screen: every animation holds                   */
.wf { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #f4f6f3; }
.wf svg { display: block; width: 100%; height: 100%; }

.wf-faceL { fill: #cfd9cf; }
.wf-faceR { fill: #bccabe; }
.wf-lipL { fill: #59ad40; }
.wf-lipR { fill: #4b9536; }
.wf-strata { fill: none; stroke: #a9b8ab; stroke-width: 1.5; stroke-dasharray: 2 9; }
.wf-top { fill: #e3f2df; }
.wf-road { fill: #c6d0c8; }
.wf-roadcut { fill: #97a99b; }
.wf-roadline { fill: none; stroke: #fff; stroke-width: 2.5; stroke-dasharray: 14 10; }
.wf-xray { fill: none; stroke: #006327; stroke-width: 2.5; stroke-dasharray: 7 6; stroke-linecap: round; }
.wf-xrayglow { fill: none; stroke: #59ad40; stroke-width: 8; opacity: .35; }
.wf-duct { fill: #0b1d12; stroke: #59ad40; stroke-width: 3; }
.wf-ductglow { fill: #59ad40; opacity: .55; transform-box: fill-box; transform-origin: center; }
.wf-spare { fill: #7f9284; stroke: #6b7f70; stroke-width: 2; }
.wf-roofB { fill: #1a3326; }
.wf-roofF { fill: #2a4a37; }
.wf-wall { fill: #fff; }
.wf-gable { fill: #e1e9e2; }
.wf-win { fill: #f3c969; }
.wf-wg { fill: #f3c969; opacity: 0; }
.wf-node { fill: #59ad40; stroke: #fff; stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.wf-trunk { fill: none; stroke: #4c6b55; stroke-width: 4; stroke-linecap: round; }
.wf-leaf { fill: #86c172; }
.wf-leafhi { fill: #a6d68f; }
.wf-tree { transform-box: fill-box; transform-origin: 50% 100%; }
.wf-mk { fill: none; stroke: #fff; stroke-width: 16; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.wf-run, .wf-runglow { fill: none; stroke-linecap: round; stroke-dasharray: 40 600; stroke-dashoffset: 40; }
.wf-run { stroke: #f2ffe9; stroke-width: 4; }
.wf-runglow { stroke: #8fe07a; stroke-width: 13; opacity: .85; }
.wf-drop, .wf-dropglow { fill: none; stroke-linecap: round; stroke-dasharray: 16 200; stroke-dashoffset: 16; }
.wf-drop { stroke: #f2ffe9; stroke-width: 3; }
.wf-dropglow { stroke: #8fe07a; stroke-width: 10; opacity: .85; }

/* waiting to be seen */
.wf.is-armed .wf-slab, .wf.is-armed .wf-house { opacity: 0; }
.wf.is-armed .wf-tree, .wf.is-armed .wf-node { transform: scale(0); }
.wf.is-armed .wf-mk { stroke-dashoffset: 1.02; }
.wf.is-armed .wf-ductglow { opacity: 0; }

/* the build, once */
.wf.is-building .wf-slab { animation: wf-slab .9s cubic-bezier(.2,.7,.2,1) both; }
.wf.is-building .wf-house { animation: wf-house .7s cubic-bezier(.3,1.3,.5,1) calc(.8s + var(--d)) both; }
.wf.is-building .wf-tree { animation: wf-tree .5s ease-out calc(2.1s + var(--d)) both; }
.wf.is-building .wf-ductglow { animation: wf-duct-in 1.2s ease-out 3.1s both; }
.wf.is-building .wf-mkT { animation: wf-draw 1s linear 3.2s both; }
.wf.is-building .wf-mkD { animation: wf-draw .35s ease-out calc(3.36s + var(--d)) both; }
.wf.is-building .wf-node { animation: wf-node-in .5s ease-out calc(3.7s + var(--d)) both; }
.wf.is-building .wf-wg { animation: wf-win-in 1s ease-out calc(3.7s + var(--d)) both; }

/* then the light keeps running */
.wf.is-live .wf-run, .wf.is-live .wf-runglow { animation: wf-run 4s linear infinite both; }
.wf.is-live .wf-drop, .wf.is-live .wf-dropglow { animation: wf-drop 4s linear var(--p) infinite both; }
.wf.is-live .wf-node { animation: wf-node-beat 4s ease-out var(--p) infinite both; }
.wf.is-live .wf-wg { animation: wf-win 4s ease-out var(--p) infinite both; }
.wf.is-live .wf-ductglow { animation: wf-duct-beat 4s ease-out infinite both; }

.wf.is-paused, .wf.is-paused * { animation-play-state: paused !important; }

@keyframes wf-slab { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes wf-house { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: none; } }
@keyframes wf-tree { 0% { transform: scale(0); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes wf-duct-in { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(1.7); } 100% { opacity: .55; transform: scale(1); } }
@keyframes wf-draw { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
@keyframes wf-node-in { 0% { transform: scale(0); } 55% { transform: scale(1.7); } 100% { transform: scale(1); } }
@keyframes wf-win-in { 0% { opacity: 0; } 30% { opacity: .95; } 100% { opacity: 0; } }
@keyframes wf-run { 0% { stroke-dashoffset: 40; } 60%, 100% { stroke-dashoffset: -480; } }
@keyframes wf-drop { 0% { stroke-dashoffset: 16; } 10%, 100% { stroke-dashoffset: -90; } }
@keyframes wf-node-beat { 0% { transform: scale(1); } 4% { transform: scale(2); } 25%, 100% { transform: scale(1); } }
@keyframes wf-win { 0% { opacity: 0; } 5% { opacity: .95; } 55% { opacity: .12; } 100% { opacity: 0; } }
@keyframes wf-duct-beat { 0% { opacity: .55; transform: scale(1); } 6% { opacity: 1; transform: scale(1.6); } 40%, 100% { opacity: .55; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .wf * { animation: none !important; }   /* site.js never arms the tile here, so this is the still */
}

/* ---- the fiber kit (fk-): shared parts of the website art series -------------------------------------
   One isometric projection (x = 402 + (X-Y)*.866, y = 176 + (X+Y)/2 - Z). Parts: ground block (fk-slab faces,
   fk-top, fk-road), house (fk-house: built / is-ghost / is-frame / is-pad; fk-win is-lit), tree, hub (+ fk-ring),
   van, stake, trench, conduit, fiber (+ glow, fk-node), plan line, lot. Colours: the site tokens plus #f3c969.
   Filters come from the piece's <defs> (fk-bg, fk-blur, fk-blurw, fk-soft). Append once to site.css. */
.fk-shadow{fill:#0b1d12;opacity:.13;filter:url(#fk-soft)}
.fk-faceL{fill:#cfd9cf}.fk-faceR{fill:#bccabe}.fk-lipL{fill:#59ad40}.fk-lipR{fill:#4b9536}
.fk-strata{fill:none;stroke:#a9b8ab;stroke-width:1.5;stroke-dasharray:2 9}
.fk-top{fill:#e3f2df}.fk-grid{fill:none;stroke:#fff;stroke-width:1.2;opacity:.9}
.fk-road{fill:#c6d0c8}.fk-roadcut{fill:#97a99b}.fk-roadline{fill:none;stroke:#fff;stroke-width:2.5;stroke-dasharray:14 10}
.fk-roofB{fill:#1a3326}.fk-roofF{fill:#2a4a37}.fk-wall{fill:#fff}.fk-gable{fill:#e1e9e2}
.fk-win{fill:#c9d4cb}.fk-win.is-lit{fill:#f3c969}.fk-winglow{fill:#f3c969;opacity:.9}
.fk-pad{fill:#d3dcd4}.fk-padedge{fill:#b5c2b7}.fk-padedgeR{fill:#a5b4a8}
.fk-frame{fill:none;stroke:#4c6b55;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fk-trunk{fill:none;stroke:#4c6b55;stroke-width:4;stroke-linecap:round}.fk-leaf{fill:#86c172}.fk-leafhi{fill:#a6d68f}
.fk-hubR{fill:#16301f}.fk-hubF{fill:#22412f}.fk-hubTop{fill:#3d5e49}.fk-hubRim{fill:#4f735b}
.fk-hubDoor{fill:#0b1d12}.fk-hubLouver{fill:none;stroke:#4d6f59;stroke-width:2;stroke-linecap:round}.fk-hubSign{fill:#59ad40}
.fk-status{fill:#4d6f59;stroke:#0b1d12;stroke-width:1.5}.fk-status.is-on{fill:#8fe07a}
.fk-rings{fill:none}.fk-ring{fill:none;stroke:#59ad40;stroke-width:2}
.fk-van .fk-vanshadow{fill:#0b1d12;opacity:.14}.fk-vanSide{fill:#fff}.fk-vanFront{fill:#e1e9e2}.fk-vanTop{fill:#f4f6f3}.fk-vanScreen{fill:#1a3326}
.fk-vanStripe{fill:#006327}.fk-vanWin{fill:#1a3326}.fk-wheel{fill:#0b1d12}
.fk-stakepost{fill:none;stroke:#4c6b55;stroke-width:2.5;stroke-linecap:round}.fk-flag{fill:#f3c969}
.fk-trench{fill:#2f3d33}.fk-spoil{fill:none;stroke:#9b8a6c;stroke-width:3;stroke-linecap:round}
.fk-conduit{fill:none;stroke:#59ad40;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.fk-fiber{fill:none;stroke:#f2ffe9;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fk-fiberglow{fill:none;stroke:#8fe07a;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.fk-plan{fill:none;stroke:#006327;stroke-width:3;stroke-dasharray:9 7;stroke-linecap:round;stroke-linejoin:round}
.fk-lot{fill:none;stroke:#9fb5a5;stroke-width:1.5;stroke-dasharray:6 5}
.fk-ghost{fill:none;stroke:#4f8a5f;stroke-width:1.6;stroke-dasharray:5 4;stroke-linejoin:round}
.fk-node{fill:#59ad40;stroke:#fff;stroke-width:2}.fk-node.is-plan{fill:#fff;stroke:#006327;stroke-width:2.5}

/* ---- About: the build tile -------------------------------------------------------------------
   States (classes on .ab, set by site.js initAboutBuild):
     .is-services            the still: the finished block (no JS, reduced motion, before init)
     .is-design / .is-build / .is-services   which stage shows; each plays its build-up when shown
     .is-anim                motion is on (never under reduced motion); the shown stage's layer gets .is-on, which (re)starts its build
     .is-paused              off screen: every animation holds
   Slots on the page: [data-ab-slot="aside"] (right column, desktop: sticky, follows the sections)
                      [data-ab-slot="inline"] (above "Design", phone: plays all three in turn)       */
.ab { position: relative; margin: 0; background: #fff; border: 1px solid #d9e3d6; border-radius: 16px; overflow: hidden; }
.ab svg { display: block; width: 100%; height: auto; }
[data-ab-slot="aside"] { flex: 1 1 auto; }
[data-ab-slot]:empty { display: none; }
[data-ab-slot="aside"] .ab { position: sticky; top: 92px; }

.ab-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 20px 12px; background: #f7faf5; border-bottom: 1px solid #d9e3d6; }
.ab-st { display: flex; flex-direction: column; justify-content: space-between; gap: 7px; font-size: 15px; font-weight: 600; line-height: 1.2; color: #5c6b60;
  font-family: inherit; text-align: left; background: none; border: 0; margin: 0; padding: 4px 0 0; cursor: pointer; min-height: 44px; }
.ab-st:hover { color: #006327; }
.ab-st:focus-visible { outline: 3px solid #59ad40; outline-offset: 2px; border-radius: 4px; }
.ab-st i { display: block; height: 3px; border-radius: 2px; background: #d9e3d6; transition: background .3s; }
.ab.is-build .ab-st-design, .ab.is-services .ab-st-design, .ab.is-services .ab-st-build { color: #3c4a40; }
.ab.is-build .ab-st-design i, .ab.is-services .ab-st-design i, .ab.is-services .ab-st-build i { background: #a6ce90; }
.ab.is-design .ab-st-design, .ab.is-build .ab-st-build, .ab.is-services .ab-st-services { color: #006327; }
.ab.is-design .ab-st-design i, .ab.is-build .ab-st-build i, .ab.is-services .ab-st-services i { background: #59ad40; }
.ab-short { display: none; }
@media (max-width: 480px) { .ab-steps { padding: 12px 14px 10px; gap: 8px; } .ab-st { font-size: 14px; } .ab-long { display: none; } .ab-short { display: inline; } }

/* one stage at a time */
.ab-L { display: none; }
.ab.is-design .ab-L-design, .ab.is-build .ab-L-build, .ab.is-services .ab-L-services { display: inline; }

/* the still's details */
.ab-draw { stroke-dasharray: 1 1; }
.ab-pop, .ab-ring { transform-box: fill-box; transform-origin: 50% 50%; }
.fk-tree.ab-pop { transform-origin: 50% 100%; }
.ab-L-services .fk-winglow { opacity: .5; }
.ab-tipglow { fill: #8fe07a; }
.ab-ring:nth-child(1) { transform: scale(.36); opacity: .9; }
.ab-ring:nth-child(2) { transform: scale(.68); opacity: .6; }
.ab-ring:nth-child(3) { opacity: .35; }
.ab-loop { display: none; }
.ab-run, .ab-runglow, .ab-pulse, .ab-pulseglow { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ab-run { stroke: #f2ffe9; stroke-width: 4; stroke-dasharray: 8 200; stroke-dashoffset: 8; }
.ab-runglow { stroke: #8fe07a; stroke-width: 13; opacity: .85; }
.ab-pulse { stroke: #f2ffe9; stroke-width: 3; stroke-dasharray: 18 200; stroke-dashoffset: 18; }
.ab-pulseglow { stroke: #8fe07a; stroke-width: 10; opacity: .85; }

/* motion: each stage builds when it shows */
.ab.is-anim .is-on .ab-loop { display: inline; }
.ab.is-anim .is-on .ab-fade { animation: ab-fade .5s ease-out var(--d, 0s) both; }
.ab.is-anim .is-on .ab-rise { animation: ab-rise .6s cubic-bezier(.3, 1.3, .5, 1) var(--d, 0s) both; }
.ab.is-anim .is-on .ab-drop { animation: ab-drop .7s cubic-bezier(.3, 1.3, .5, 1) var(--d, 0s) both; }
.ab.is-anim .is-on .ab-pop { animation: ab-pop .5s ease-out var(--d, 0s) both; }
.ab.is-anim .is-on .ab-draw { animation: ab-draw var(--t, .8s) ease-in-out var(--d, 0s) both; }
.ab.is-anim .is-on .ab-tip { animation: ab-tip var(--t, 1s) ease-in-out var(--d, 0s) both; }
.ab.is-anim .is-on .ab-tipglow { animation: ab-breathe 1.6s ease-in-out 3.3s infinite; }
.ab.is-anim .is-on .ab-van { animation: ab-van 1.6s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }
.ab.is-anim .is-on .ab-lit.ab-lightup { animation: ab-fade .6s ease-out var(--d, 0s) both; }
.ab.is-anim .is-on .fk-winglow.ab-lightup { animation: ab-glow-in .6s ease-out var(--d, 0s) both, ab-glow-beat 4s ease-out var(--p, 0s) infinite; }
.ab.is-anim .is-on .ab-beat { animation: ab-pop .5s ease-out var(--d, 0s) both, ab-node-beat 4s ease-out var(--p, 0s) infinite; }
.ab.is-anim .is-on .ab-ring { animation: ab-ring 4s ease-out var(--d, 0s) infinite both; }
.ab.is-anim .is-on .ab-run, .ab.is-anim .is-on .ab-runglow { animation: ab-run 4s linear var(--d, 0s) infinite both; }
.ab.is-anim .is-on .ab-pulse, .ab.is-anim .is-on .ab-pulseglow { animation: ab-pulse 4s linear var(--p, 0s) infinite both; }

.ab.is-paused, .ab.is-paused * { animation-play-state: paused !important; }

@keyframes ab-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ab-rise { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes ab-drop { from { opacity: 0; transform: translateY(-46px); } to { opacity: 1; transform: none; } }
@keyframes ab-pop { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes ab-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ab-tip { 0% { opacity: 0; transform: translate(var(--dx), var(--dy)); } 12% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ab-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes ab-van { 0% { opacity: 0; transform: translate(var(--dx), var(--dy)); } 25% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ab-glow-in { from { opacity: 0; } to { opacity: .5; } }
@keyframes ab-glow-beat { 0% { opacity: .5; } 6% { opacity: 1; } 55%, 100% { opacity: .5; } }
@keyframes ab-node-beat { 0% { transform: scale(1); } 4% { transform: scale(2); } 25%, 100% { transform: scale(1); } }
@keyframes ab-ring { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes ab-run { 0% { stroke-dashoffset: 8; } 60%, 100% { stroke-dashoffset: -100; } }
@keyframes ab-pulse { 0% { stroke-dashoffset: 18; } 10%, 100% { stroke-dashoffset: -100; } }

@media (prefers-reduced-motion: reduce) {
  .ab * { animation: none !important; }   /* site.js never arms the tile here, so this is the still */
}

/* ---- "Sent": the home lights up (contact's Message sent, the order's Order sent) -------------------
   States (classes on .sent-pic, set by site.js initSentHome):
     (none)                 the still: the home lit (no JS, reduced motion)
     .is-armed              waiting to be seen: the drop unlit, windows dark
     .is-armed.is-play      plays once (~2 s), then rests lit
     .is-paused             off screen mid-play: holds                                          */
.sent-pic { flex: none; width: 184px; }
.sent-pic svg { display: block; width: 100%; height: auto; }
.sent-row { display: flex; align-items: center; gap: 24px; }
.sent-text { display: grid; gap: 10px; min-width: 0; }
@media (max-width: 759px) {
  .sent-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sent-pic { width: 160px; }
}

.sent-idle { fill: none; stroke: #b9d8ad; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sent-draw { stroke-dasharray: 1 1; }
.sent-node { transform-box: fill-box; transform-origin: 50% 50%; }
.sent-lit { fill: #f3c969; }
.sent-glow { fill: #f3c969; opacity: .9; }

/* waiting to be seen */
.sent-pic.is-armed:not(.is-play) .sent-draw { stroke-dashoffset: 1; }
.sent-pic.is-armed:not(.is-play) .sent-node { transform: scale(0); }
.sent-pic.is-armed:not(.is-play) .sent-lit,
.sent-pic.is-armed:not(.is-play) .sent-glow { opacity: 0; }

/* once: the drop lights in, the node pops, the windows warm */
.sent-pic.is-play .sent-draw { animation: sent-draw .7s ease-in-out .2s both; }
.sent-pic.is-play .sent-node { animation: sent-pop .5s ease-out .85s both; }
.sent-pic.is-play .sent-lit { animation: sent-warm .9s ease-out 1s both; }
.sent-pic.is-play .sent-glow { animation: sent-bloom 1.4s ease-out 1s both; }
.sent-pic.is-paused, .sent-pic.is-paused * { animation-play-state: paused !important; }

@keyframes sent-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sent-pop { 0% { transform: scale(0); } 60% { transform: scale(1.8); } 100% { transform: scale(1); } }
@keyframes sent-warm { from { opacity: 0; } to { opacity: 1; } }
@keyframes sent-bloom { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: .9; } }

@media (prefers-reduced-motion: reduce) {
  .sent-pic * { animation: none !important; }   /* site.js never arms it here, so this is the still */
}

/* ---- 404: the strand rejoins (in the band, under the lede) -----------------------------------------
   States (classes on .nf-slot, set by site.js initStrand):
     (none)                 the still: joined, lit (no JS, reduced motion)
     .is-armed              waiting to be seen: dark, broken
     .is-armed.is-play      plays once (~3.6 s): light to the break, a spark, the splice, light on;
                            then pulses keep flowing while it is on screen
     .is-paused             off screen: holds                                                     */
.nf-slot { display: flex; justify-content: center; margin-top: 28px; }
.nf-slot svg { display: block; width: min(560px, 100%); height: auto; overflow: visible; }

.nf-dim { fill: none; stroke: #2f4a39; stroke-width: 3; stroke-linecap: round; }
.nf-glow { fill: none; stroke: #8fe07a; stroke-width: 10; opacity: .8; stroke-dasharray: 1 1; }
.nf-core { fill: none; stroke: #f2ffe9; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; }
.nf-spark { opacity: 0; }
.nf-spark path { fill: none; stroke: #a6ce90; stroke-width: 1.6; stroke-linecap: round; }
.nf-end { fill: #4d6f59; opacity: 0; }
.nf-sleeve rect { fill: #1f3a2a; stroke: #59ad40; stroke-width: 1.6; }
.nf-sleeve path { fill: none; stroke: #f2ffe9; stroke-width: 2.4; stroke-linecap: round; }
.nf-sleeve { transform-box: fill-box; transform-origin: 50% 50%; }

/* waiting to be seen: dark and broken */
.nf-slot.is-armed:not(.is-play) .nf-a, .nf-slot.is-armed:not(.is-play) .nf-b { stroke-dashoffset: 1; }
.nf-slot.is-armed:not(.is-play) .nf-fill,
.nf-slot.is-armed:not(.is-play) .nf-sleeve,
.nf-slot.is-armed:not(.is-play) .nf-pulses { opacity: 0; }
.nf-slot.is-armed:not(.is-play) .nf-end { opacity: 1; }

/* once: the light runs to the break (stops 18 short of the middle), sparks, the ends splice, it runs on */
.nf-slot.is-play .nf-a { animation: nf-to-break 1.2s ease-out .2s both, nf-to-mid .25s linear 2.4s forwards; }
.nf-slot.is-play .nf-b { animation: nf-draw .9s ease-in 2.6s both; }
.nf-slot.is-play .nf-spark { animation: nf-spark .85s steps(1, end) 1.3s forwards; }
.nf-slot.is-play .nf-end { animation: nf-end-off .3s ease-out 2.1s both; }
.nf-slot.is-play .nf-fill { animation: nf-in .3s ease-out 2.1s both; }
.nf-slot.is-play .nf-sleeve { animation: nf-sleeve .45s cubic-bezier(.3, 1.4, .5, 1) 2.15s both; }
.nf-slot.is-play .nf-pulses { animation: nf-in .4s ease-out 3.5s both; }
.nf-slot.is-play .nf-pulse { animation: nf-flow 4.2s linear 3.5s infinite; }
.nf-slot.is-play .nf-p2 { animation-delay: 2.1s; }
.nf-slot.is-play .nf-p3 { animation-delay: .7s; }
.nf-slot.is-paused, .nf-slot.is-paused * { animation-play-state: paused !important; }

/* the core and glow of the left half run 0 → .936 (the break), then close to 1 at the splice */
@keyframes nf-to-break { from { stroke-dashoffset: 1; } to { stroke-dashoffset: .064; } }
@keyframes nf-to-mid { from { stroke-dashoffset: .064; } to { stroke-dashoffset: 0; } }
@keyframes nf-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes nf-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes nf-end-off { from { opacity: 1; } to { opacity: 0; } }
@keyframes nf-spark { 0% { opacity: 1; } 15% { opacity: .35; } 30% { opacity: 1; } 50% { opacity: .5; } 65% { opacity: 1; } 100% { opacity: 0; } }
@keyframes nf-sleeve { from { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: none; } }
@keyframes nf-flow { from { transform: translateX(0); } to { transform: translateX(560px); } }

@media (prefers-reduced-motion: reduce) {
  .nf-slot * { animation: none !important; }   /* site.js never arms it here, so this is the still */
}

/* ---- Communities hero: the network finds your neighborhood (sf-) --------------------------------------
   Five neighborhood islands round a hub. A pulse runs out to each in turn (order 2, 3, 0, 4, 1, 3 s each,
   a 15 s loop); that neighborhood's run lights, its windows warm and rings spread, then it fades as the next is found.
   Needs the fk- kit (already in site.css); the dusk look below re-colours it inside .sf only.
   States (site.js initServicesFinder):
     no class            the still: neighborhood 2 found (no JS, reduced motion, before init)
     .is-on              the loop runs (never under reduced motion); the cycle starts on the still's frame
     .is-on.is-paused    off screen: holds
     [data-sf-match="n"] phase 2 (not wired yet): the search's match n shows found, still, and the loop stops */
.sf-art { display: none; }
@media (min-width: 1100px) {
  .sf-hero-in { display: grid; grid-template-columns: minmax(0, 720px) clamp(320px, 34vw, 480px); justify-content: space-between; column-gap: 40px; align-items: center; }
  .sf-art { display: block; margin-block: -56px; }
}
.sf { display: block; width: 100%; height: auto; overflow: visible; }
.sf-dots{fill:none;stroke:#59ad40;stroke-width:2.6;stroke-linecap:round;opacity:.28}
.sf-run{fill:none;stroke:#2f5a3d;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sf-ring{fill:none;stroke:#8fe07a;stroke-width:2}
.sf .fk-rings .fk-ring{opacity:.5}
.sf .fk-top{fill:#16341f}.sf .fk-faceL{fill:#0e2316}.sf .fk-faceR{fill:#0b1d12}
.sf .fk-road{fill:#24452f}.sf .fk-lipL{fill:#59ad40}.sf .fk-lipR{fill:#4b9536}
.sf .fk-win{fill:#9fb3a4}.sf .fk-win.is-lit{fill:#f3c969}
.sf .fk-leaf{fill:#3f7a3a}.sf .fk-leafhi{fill:#59ad40}
.sf .sf-hubisl .fk-top{fill:#1d4029}
.sf-pulsecore { fill: none; stroke: #f2ffe9; stroke-width: 4; stroke-linejoin: round; }
.sf-pulseglow { fill: none; stroke: #8fe07a; stroke-width: 14; stroke-linejoin: round; }
.sf-ring:nth-child(2) { opacity: .6; } .sf-ring:nth-child(3) { opacity: .3; }
.sf .fk-rings .fk-ring { opacity: .5; }

/* the still: only the first neighborhood found */
.sf-lit, .sf-wins, .sf-winglow, .sf-rings, .sf-pulseg { opacity: 0; }
.sf-lit.is-still, .sf-wins.is-still, .sf-rings.is-still { opacity: 1; }
.sf-winglow.is-still { opacity: .9; }
.sf-draw { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.sf-pulse { stroke-dasharray: .09 2; stroke-dashoffset: -1.1; }
.sf-rings { transform-box: fill-box; transform-origin: center; }
.sf .fk-rings { transform-box: fill-box; transform-origin: center; }

/* the loop */
.sf.is-on .sf-lit { animation: sf-lit 15s linear var(--d) infinite both; }
.sf.is-on .sf-draw { animation: sf-draw 15s linear var(--d) infinite both; }
.sf.is-on .sf-pulseg { opacity: 1; }
.sf.is-on .sf-pulse { animation: sf-pulse 15s linear var(--d) infinite both; }
.sf.is-on .sf-wins { animation: sf-wins 15s linear var(--d) infinite both; }
.sf.is-on .sf-winglow { animation: sf-glow 15s linear var(--d) infinite both; }
.sf.is-on .sf-rings { animation: sf-rings 15s ease-out var(--d) infinite both; }
.sf.is-on .fk-rings { animation: sf-hub 3s ease-out var(--d) infinite both; }
.sf.is-on.is-paused * { animation-play-state: paused; }
@keyframes sf-pulse { 0% { stroke-dashoffset: .1; } 6% { stroke-dashoffset: -1; } 6.07%, 100% { stroke-dashoffset: -1.1; } }
@keyframes sf-draw { 0% { stroke-dashoffset: 1.02; } 6%, 19.33% { stroke-dashoffset: 0; } 19.4%, 100% { stroke-dashoffset: 1.02; } }
@keyframes sf-lit { 0%, 14.67% { opacity: 1; } 19.33%, 100% { opacity: 0; } }
@keyframes sf-wins { 0%, 5.67% { opacity: 0; } 8.67%, 14.67% { opacity: 1; } 19.33%, 100% { opacity: 0; } }
@keyframes sf-glow { 0%, 6% { opacity: 0; } 8.67% { opacity: 1; } 14.67% { opacity: .9; } 19.33%, 100% { opacity: 0; } }
@keyframes sf-rings { 0%, 6% { opacity: 0; transform: scale(.4); } 10.67%, 14.67% { opacity: 1; transform: scale(1); } 19.33%, 100% { opacity: 0; transform: scale(1.08); } }
@keyframes sf-hub { 0% { opacity: .5; transform: scale(1); } 8% { opacity: 1; transform: scale(1.15); } 40%, 100% { opacity: .5; transform: scale(1); } }

/* phase 2: the search's match */
.sf[data-sf-match] * { animation: none !important; }
.sf[data-sf-match] .is-still, .sf[data-sf-match] .sf-pulseg { opacity: 0; }
.sf[data-sf-match="0"] [data-sf-for="0"],
.sf[data-sf-match="1"] [data-sf-for="1"],
.sf[data-sf-match="2"] [data-sf-for="2"],
.sf[data-sf-match="3"] [data-sf-for="3"],
.sf[data-sf-match="4"] [data-sf-for="4"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .sf * { animation: none !important; }   /* site.js never arms it here, so this is the still */
}

/* Home page What we offer cards: isometric card art (The Artisan, 2026-11-06; Tyler picked "III · Card art").
   A scene band leads the card and the title sits under it. The drawings are app/templates/_card_art/*.svg,
   used as delivered (one shared viewBox, classes only); their part colours are scoped to the band. */
.card.is-art .card-art { display: grid; grid-template: 100% / 100%; height: 150px; padding: 14px 12px 10px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 100%, #e7f2e2 0%, #f4f9f1 60%, #fbfdfa 100%); border-bottom: 1px solid var(--gf-hair); }
.card.is-art .card-art > .ic { display: block; overflow: visible; width: 100%; height: 100%; min-height: 0; }
.card.is-art .card-head { background: #fff; border-bottom: 0; min-height: 0; padding: 16px 20px 0; }
.card.is-art .card-body { padding-top: 6px; }
.card-art .ic polygon, .card-art .ic path { stroke-linejoin: round; }
.card-art .ic-slabT { fill: #e3f2df; } .card-art .ic-slabL { fill: #59ad40; } .card-art .ic-slabR { fill: #4b9536; }
.card-art .ic-wall { fill: #fff; } .card-art .ic-gable { fill: #dfe8e0; } .card-art .ic-roofF { fill: #2a4a37; } .card-art .ic-roofB { fill: #1a3326; }
.card-art .ic-door { fill: #1a3326; } .card-art .ic-warm { fill: #f3c969; }
.card-art .ic-glow { fill: none; stroke: #59ad40; stroke-width: 3.4; stroke-linecap: round; }
.card-art .ic-lit { fill: none; stroke: #f2ffe9; stroke-width: 1.3; stroke-linecap: round; }
.card-art .ic-litdot { fill: #f2ffe9; stroke: #59ad40; stroke-width: 1.1; }
.card-art .ic-litdot.ic-ont { fill: #8fe07a; stroke: #006327; stroke-width: 1.2; }
.card-art .ic-darkF { fill: #2a4a37; } .card-art .ic-darkT { fill: #4a6b56; stroke: #4a6b56; stroke-width: .3; }
.card-art .ic-darkS { fill: #16301f; stroke: #16301f; stroke-width: .3; }
.card-art .ic-shadow { fill: #0b1d12; opacity: .12; }
.card-art .ic-ring1, .card-art .ic-ring2 { stroke: #59ad40; stroke-width: 2; }
.card-art .ic-bezel { fill: #22412f; } .card-art .ic-screen { fill: #0b1d12; } .card-art .ic-screenhi { fill: #8fe07a; opacity: .16; }
.card-art .ic-play { fill: #a8e58f; } .card-art .ic-spill { fill: #8fe07a; opacity: .32; }
.card-art .ic-shF { fill: #006327; } .card-art .ic-shT { fill: #3a9a5a; stroke: #3a9a5a; stroke-width: .3; }
.card-art .ic-shS { fill: #003d17; stroke: #003d17; stroke-width: .3; }
.card-art .ic-shLit { fill: #a8e58f; } .card-art .ic-shGap { fill: none; stroke: #006327; stroke-width: 6.2; }
.card-art .ic-shRim { fill: none; stroke: #fff; stroke-width: 2.8; }
.card-art .ic-guard { fill: none; stroke: #59ad40; stroke-width: 1.1; } .card-art .ic-guard.g2 { opacity: .45; }
.card-art .ic-trunk { fill: none; stroke: #4c6b55; stroke-width: 1.5; stroke-linecap: round; }
.card-art .ic-leaf { fill: #86c172; } .card-art .ic-leafhi { fill: #a6d68f; }
/* Pointed at: the object lifts 2px and the lit parts warm. The still is the full design. */
@media (prefers-reduced-motion: no-preference) {
  .card.is-art .ic { transition: transform .35s ease; } .card.is-art:hover .ic { transform: translateY(-2px); }
  .card.is-art .ic-warm, .card.is-art .ic-play, .card.is-art .ic-ring2, .card.is-art .ic-guard.g2 { transition: opacity .35s ease, fill .35s ease; }
  .card.is-art:hover .ic-warm { fill: #ffd97a; } .card.is-art:hover .ic-guard.g2 { opacity: .85; }
}
/* What we offer: the card-art band on the night ground (Tyler, 2026-11-06). Dusk is earmarked: The Artisan's
   grounds/dusk-bg.css line, with t-night changed to t-dusk on the four bands. */
.card-art.is-dark .ic-roofF { fill: #3f6550; } .card-art.is-dark .ic-roofB { fill: #2d4d3a; } .card-art.is-dark .ic-door { fill: #1a3326; }
.card-art.is-dark .ic-darkF { fill: #4fa63e; } .card-art.is-dark .ic-darkT { fill: #8fd27a; stroke: #8fd27a; } .card-art.is-dark .ic-darkS { fill: #2b6e22; stroke: #2b6e22; }
.card-art.is-dark .ic-tv .ic-darkF, .card-art.is-dark .ic-tv .ic-darkT, .card-art.is-dark .ic-tv .ic-darkS { fill: #9fb8a6; stroke: none; }
.card-art.is-dark .ic-bezel { fill: #e9f1e6; } .card-art.is-dark .ic-tv .ic-darkT { fill: #ffffff; } .card-art.is-dark .ic-tv .ic-darkS { fill: #b9cdbd; }
.card-art.is-dark .ic-screen { fill: #0b1d12; } .card-art.is-dark .ic-screenhi { opacity: .3; } .card-art.is-dark .ic-spill { opacity: .5; }
.card-art.is-dark .ic-ring1, .card-art.is-dark .ic-ring2 { stroke: #a8e58f; }
.card-art.is-dark .ic-guard { stroke: #a8e58f; } .card-art.is-dark .ic-guard.g2 { opacity: .55; }
.card-art.is-dark .ic-shadow { opacity: .35; }
.card-art.is-dark .ic-shT { fill: #5fb47a; stroke: #5fb47a; } .card-art.is-dark .ic-shS { fill: #002f12; stroke: #002f12; }
.card-art.is-dark .ic-glow { stroke: #8fe07a; }
.card.is-art .card-art.t-night { background: radial-gradient(90% 80% at 50% 100%, rgba(89,173,64,.32), transparent 70%), #0b1d12; border-bottom: 0; }
/* /communities: the new parts of the three card-art scenes (The Artisan, 2026-11-06; app/templates/_community_art).
   The shared parts are the home cards' .card-art .ic-* and night rules above. */
.card-art .ic-colT { fill: #a8e58f; } .card-art .ic-colF { fill: #3a9a5a; } .card-art .ic-colS { fill: #1f6b35; } .card-art .ic-colBand { fill: #8fe07a; }
.card-art .ic-wifi { fill: none; stroke: #59ad40; stroke-width: 1.6; stroke-linecap: round; } .card-art .ic-wifiDot { fill: #59ad40; }
.card-art .ic-vanSide { fill: #fff; } .card-art .ic-vanFront { fill: #e1e9e2; } .card-art .ic-vanTop { fill: #f4f6f3; } .card-art .ic-vanWind { fill: #1a3326; }
.card-art .ic-vanStripe { fill: #006327; } .card-art .ic-vanWin { fill: #1a3326; } .card-art .ic-wheel { fill: #0b1d12; }
.card-art .ic-lapT { fill: #dfe8e0; } .card-art .ic-lapF { fill: #c3d0c6; } .card-art .ic-lapS { fill: #9fb3a5; } .card-art .ic-keys { fill: #b7c6bb; }
.card-art .ic-lapScreen { fill: #0b1d12; } .card-art .ic-check { fill: none; stroke: #8fe07a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* three wide cards: a taller band than the home row's four, so the scenes fill it */
.card.is-art .card-art.is-tall { height: 196px; padding: 16px 14px 10px; }
@media (max-width: 480px) { .card.is-art .card-art.is-tall { height: 176px; } }
/* the label under the title on all three, at every width (as the phone already lays them out): one label column
   under the lined-up bands. Only these cards' heads carry a card-meta; the home cards have none. */
.card.is-art .card-head:has(.card-meta) { flex-direction: column; align-items: flex-start; gap: 2px; }
/* on the night ground */
.card-art.is-dark .ic-wifi, .card-art.is-dark .ic-wifiDot { stroke: #a8e58f; } .card-art.is-dark .ic-wifiDot { fill: #a8e58f; }
.card-art.is-dark .ic-vanWind, .card-art.is-dark .ic-vanWin { fill: #2d4d3a; }
/* pointed at: the lit parts brighten (as the home cards' windows) */
@media (prefers-reduced-motion: no-preference) {
  .card .ic-colT, .card .ic-wifi, .card .ic-check { transition: fill .35s, stroke .35s; }
  .card:hover .ic-colT { fill: #d4f5c4; } .card:hover .ic-wifi { stroke: #d4f5c4; } .card:hover .ic-check { stroke: #d4f5c4; }
}
/* /login: the two cards lead with a large card-art scene on the night ground, left on desktop and on top on a phone
   (The Artisan, 2026-11-07; Tyler approved). Scenes: app/templates/_card_art/login-billing|login-phone.svg. */
.lg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.card.is-art.lg-card { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); color: #0b1d12; }
.card.is-art.lg-card .card-art { height: auto; min-height: 196px; padding: 16px 10px 12px; border-bottom: 0; }
.lg-txt { padding: 26px 28px; align-self: center; min-width: 0; }
.lg-kicker { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #006327; }
.lg-title { font-size: 26px; font-weight: 700; line-height: 1.2; margin: 6px 0 8px; }
.lg-txt p { margin: 0; font-size: 16px; line-height: 1.5; color: #3c4a40; }
@media (max-width: 700px) {
  .card.is-art.lg-card { grid-template-columns: 1fr; }
  .card.is-art.lg-card .card-art { min-height: 0; height: 150px; }
  .lg-txt { padding: 20px 24px 24px; }
}

/* /login: the two scenes' new parts, on the night ground (shared parts: the What we offer and home-row .card-art .ic-* rules) */
.card-art .ic-paper { fill: #ffffff; } .card-art .ic-pgT { fill: #e9f1e6; stroke: #e9f1e6; stroke-width: .3; } .card-art .ic-pgS { fill: #9fb8a6; stroke: #9fb8a6; stroke-width: .3; }
.card-art .ic-pgHead { fill: #0b1d12; } .card-art .ic-pgLine { fill: #c3d0c6; } .card-art .ic-logo { fill: #59ad40; }
.card-art .ic-total { fill: #e3f2df; } .card-art .ic-totalHi { fill: #59ad40; }
.card-art .ic-cardF { fill: #006327; } .card-art .ic-cardT { fill: #3a9a5a; stroke: #3a9a5a; stroke-width: .3; } .card-art .ic-cardS { fill: #003d17; stroke: #003d17; stroke-width: .3; }
.card-art .ic-stripe { fill: #0b2a17; } .card-art .ic-chip { fill: #f3c969; } .card-art .ic-digits { fill: #a8e58f; }
.card-art .ic-tabF { fill: #e9f1e6; } .card-art .ic-tabT { fill: #ffffff; stroke: #fff; stroke-width: .3; } .card-art .ic-tabS { fill: #9fb8a6; stroke: #9fb8a6; stroke-width: .3; }
.card-art .ic-tabScreen { fill: #0b1d12; } .card-art .ic-row { fill: #4a6b56; } .card-art .ic-rowBar { fill: #2d4d3a; }
.card-art .ic-vm { fill: #8fe07a; } .card-art .ic-rowLit { fill: #59ad40; }
.card-art .ic-hsF { fill: #4fa63e; } .card-art .ic-hsT { fill: #8fd27a; stroke: #8fd27a; stroke-width: .3; } .card-art .ic-hsS { fill: #2b6e22; stroke: #2b6e22; stroke-width: .3; }
.lg-art .card-art.is-dark .ic-shadow { opacity: .16; }

/* The site's remaining icons in isometric (The Artisan, 2026-11-06): Support tiles, Contact departments,
   community documents. Drawings in app/templates/_gf_glyph. */
/* the website's isometric icons (gf-glyph): one solid object on a small ground slab; a 38-40px slot, no tile */
.gf-glyph { flex: none; display: block; width: 40px; height: 40px; overflow: visible; }
.gf-glyph polygon, .gf-glyph path { stroke-linejoin: round; }
.gf-glyph .g-slabT { fill: #e3f2df; transition: fill .25s; } .gf-glyph .g-slabL { fill: #59ad40; } .gf-glyph .g-slabR { fill: #4b9536; }
.gf-glyph .g-shadow { fill: #0b1d12; opacity: .12; }
.gf-glyph .g-face { fill: #006327; } .gf-glyph .g-up { fill: #3a9a5a; stroke: #3a9a5a; stroke-width: .25; } .gf-glyph .g-side { fill: #003d17; stroke: #003d17; stroke-width: .25; }
.gf-glyph .g-cUp { fill: #3a9a5a; } .gf-glyph .g-cSide { fill: #003d17; }
.gf-glyph .g-dFace { fill: #22412f; } .gf-glyph .g-dUp { fill: #4a6b56; stroke: #4a6b56; stroke-width: .25; } .gf-glyph .g-dSide { fill: #16301f; stroke: #16301f; stroke-width: .25; }
.gf-glyph .g-pFace { fill: #fff; } .gf-glyph .g-pUp { fill: #eef3ee; } .gf-glyph .g-pSide { fill: #b9c8bd; }
.gf-glyph .g-fold { fill: #dbe5dc; } .gf-glyph .g-text { fill: none; stroke: #9fb5a5; stroke-width: .9; stroke-linecap: round; }
.gf-glyph .g-dial { fill: #fff; } .gf-glyph .g-band { fill: none; stroke: #8fe07a; stroke-width: 1.2; stroke-linecap: round; }
.gf-glyph .g-needle { fill: none; stroke: #006327; stroke-width: 1.3; stroke-linecap: round; } .gf-glyph .g-hub { fill: #22412f; }
.gf-glyph .g-stripe { fill: #0b2a17; } .gf-glyph .g-chip { fill: #f3c969; } .gf-glyph .g-digits { fill: #a8e58f; }
.gf-glyph .g-ring { fill: none; stroke: #59ad40; stroke-width: 1.3; stroke-linecap: round; }
.gf-glyph .g-roofB { fill: #1a3326; } .gf-glyph .g-roofF { fill: #2a4a37; } .gf-glyph .g-wall { fill: #fff; } .gf-glyph .g-gable { fill: #dfe8e0; }
.gf-glyph .g-door { fill: #1a3326; } .gf-glyph .g-win { fill: #f3c969; }
.gf-glyph .g-arrow { fill: none; stroke: #006327; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gf-glyph .g-arrowSh { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* the slots keep their size; the tile goes */
.card-ico.is-iso, .dept-ico.is-iso, .doc-ico.is-iso { background: none; border-radius: 0; width: 40px; height: 40px; }
.card-ico.is-iso svg.gf-glyph, .dept-ico.is-iso svg.gf-glyph, .doc-ico.is-iso svg.gf-glyph { width: 40px; height: 40px; fill: none; stroke: none; }
/* Contact: the picked department's ground lights and its object lifts */
.dept:has(input:checked) .dept-ico.is-iso { background: none; }
.dept:has(input:checked) .gf-glyph .g-slabT { fill: #a8e58f; }
.dept .gf-glyph { transition: transform .25s; }
.dept:has(input:checked) .gf-glyph { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .dept .gf-glyph { transition: none; } }
/* The community page's section icons (The Artisan, 2026-11-06; app/templates/_sec_glyph, named by sec_glyph in main.py):
   their new parts; the rest are gf-glyph's (Support / Contact). */
.gf-glyph .g-b1T { fill: #a8e58f; } .gf-glyph .g-b1F { fill: #59ad40; } .gf-glyph .g-b1S { fill: #3a8a2c; }
.gf-glyph .g-b2T { fill: #8fd27a; } .gf-glyph .g-b2F { fill: #3a9a5a; } .gf-glyph .g-b2S { fill: #1f6b35; }
.gf-glyph .g-b3T { fill: #3a9a5a; } .gf-glyph .g-b3F { fill: #006327; } .gf-glyph .g-b3S { fill: #003d17; }
.gf-glyph .g-port { fill: #22412f; } .gf-glyph .g-portIn { fill: #59ad40; } .gf-glyph .g-screw { fill: #9fb5a5; }
.gf-glyph .g-hole { fill: #2f3d33; } .gf-glyph .g-fglow { fill: none; stroke: #3a9a2c; stroke-width: 4; stroke-linecap: round; }
.gf-glyph .g-fcore { fill: none; stroke: #c8f5b4; stroke-width: 1.6; stroke-linecap: round; }
.gf-glyph .g-ftipGlow { fill: #8fe07a; opacity: .55; } .gf-glyph .g-ftip { fill: #fff; stroke: #59ad40; stroke-width: .6; }
.gf-glyph .g-oT { fill: #c9d4cb; } .gf-glyph .g-oF { fill: #fff; } .gf-glyph .g-oS { fill: #dfe8e0; }
.gf-glyph .g-ow { fill: #2a4a37; } .gf-glyph .g-owS { fill: #3d5e49; } .gf-glyph .g-owLit { fill: #f3c969; }
.gf-glyph .g-screen { fill: #0b1d12; } .gf-glyph .g-play { fill: #a8e58f; } .gf-glyph .g-spill { fill: #8fe07a; opacity: .35; }
.gf-glyph .g-shT { fill: #3a9a5a; stroke: #3a9a5a; stroke-width: .25; } .gf-glyph .g-shS { fill: #003d17; stroke: #003d17; stroke-width: .25; }
.gf-glyph .g-rim { stroke: #fff; stroke-width: .8; stroke-linejoin: round; } .gf-glyph .g-shLit { fill: #a8e58f; }
/* in a section heading: the icon sits in the heading's own line, so the heading is no taller */
.sec-h2 { display: flex; align-items: center; gap: .38em; }
.sec-h2 > .gf-glyph { flex: none; width: 1.25em; height: 1.25em; }

.gf-glyph .g-wifi { fill: none; stroke: #59ad40; stroke-width: 1.5; stroke-linecap: round; } .gf-glyph .g-wifiDot { fill: #59ad40; }
.gf-glyph .g-stF { fill: #f3c969; } .gf-glyph .g-stT { fill: #ffe39a; stroke: #ffe39a; stroke-width: .2; } .gf-glyph .g-stS { fill: #c99536; stroke: #c99536; stroke-width: .2; }
.gf-glyph .g-stSh { fill: #004a1d; opacity: .5; }

/* the order form's groups: the same icon leads each group's label, inside the summary's own line */
.og summary > .gf-glyph { flex: none; width: 1.25em; height: 1.25em; }
/* About: the opening sentence is the page's lead, larger than the body, with the company's name bold inside it at
   the same size (one size per line; Tyler picked it over a larger name alone, 2026-11-07). */
.ab-lead { margin: 0; font-size: 23px; line-height: 1.45; color: #26342b; }
.ab-lead strong { font-weight: 700; color: #0b1d12; }
@media (max-width: 599px) { .ab-lead { font-size: 21px; } }
/* The Log in menu: each choice leads with the Support tile's icon for the same place (card: billing, handset: the
   phone control panel). Desktop: the drop-down's rows. Phone: the menu's two login buttons, a smaller icon over the words, so both fit at 320. */
.login-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 8px;
  text-decoration: none; color: #0b1d12; }
.login-item-text { display: grid; gap: 1px; min-width: 0; }
.login-item-text strong { font-size: 17px; }
.login-item-text span { font-size: 15px; color: #3c4a40; }
.login-link { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 12px; color: #fff;
  text-decoration: none; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; text-align: center; }
.login-link > .card-ico.is-iso, .login-link > .card-ico.is-iso svg.gf-glyph { width: 32px; height: 32px; }
/* The handset on the phone menu's dark ground: the What we offer phone's night colours (green body, brighter ring) */
.login-link .gf-glyph .g-dFace { fill: #4fa63e; }
.login-link .gf-glyph .g-dUp { fill: #8fd27a; stroke: #8fd27a; }
.login-link .gf-glyph .g-dSide { fill: #2b6e22; stroke: #2b6e22; }
.login-link .gf-glyph .g-ring { stroke: #a8e58f; }
.login-link .gf-glyph .g-shadow { opacity: .3; }

/* Home page, the last row: Help and FAQ and Log in keep their cards, with an icon beside the title (The Artisan,
   2026-11-07; Tyler picked "Icon in the header, today's height"). Two more gf-glyph icons; append after the gf-glyph rules. */
.gf-glyph .g-head { fill: #0b1d12; } .gf-glyph .g-step { fill: #c9e6c0; } .gf-glyph .g-step.is-lit { fill: #59ad40; }
.gf-glyph .g-shackle { fill: none; stroke: #7f9a87; stroke-width: 1.5; stroke-linecap: round; } .gf-glyph .g-hole { fill: #0b1d12; }
/* in a card's head strip the 40px icon tucks into the strip's own height (min-height 56), so the card keeps its size */
.card-head > .card-ico.is-iso { margin-block: -6px; }
/* the Contact page's Office card: the HQ (gf-glyph office); its new parts, the rest are gf-glyph's */
.gf-glyph .g-glassHi { fill: #a7cbb4; } .gf-glyph .g-glassLo { fill: #6f9a80; }
.gf-glyph .g-mull { fill: none; stroke: #22412f; stroke-width: .35; } .gf-glyph .g-sign { fill: #0b1d12; }
.gf-glyph .g-signLit { fill: none; stroke: #8fe07a; stroke-width: .7; stroke-linecap: round; }
.gf-glyph .g-rail { fill: none; stroke: #22412f; stroke-width: .45; }
.gf-glyph .g-post { fill: none; stroke: #22412f; stroke-width: .7; stroke-linecap: round; }

/* The forms' honeypot (app/formguard.py): off-screen rather than display:none, since some bots skip hidden fields.
   aria-hidden on the wrapper and tabindex -1 on the field keep it from screen readers and the keyboard. */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }