/* Klein's Cleaning and Maintenance.
 *
 * DESIGN PLAN (full version in README.md, "Design plan").
 * Subject: a Waterdown cleaning business started by a school board custodian.
 * The palette comes from that world: the deep green of the Escarpment woods
 * around Waterdown, and the yellow of the custodian's mop bucket, which is in
 * the client's own photograph of a commercial floor. The one bold element is
 * the squeegee streak: a single yellow diagonal, in the logo and as the wipe
 * that clears the haze off the homepage photo. Nothing else animates.
 *
 * Colour tokens and what each is allowed to touch. A hex value anywhere below
 * this block is a bug.
 */
:root {
  --pine: #17362E;     /* header, page heroes, footer grounds; headings on light */
  --pine-2: #21483D;   /* the fact strip, hover state on dark, menu panel */
  --ink: #1A201E;      /* body text */
  --slate: #4F5E59;    /* secondary text on light grounds only */
  --mist: #C9DAD4;     /* secondary text on pine only */
  --bucket: #F3C318;   /* primary buttons, the logo streak, link underlines, focus ring. NEVER text on white */
  --bucket-2: #E0B00B; /* primary button hover */
  --glass: #EAF2EF;    /* alternate section ground, answer panels, cards */
  --paper: #FFFFFF;    /* page ground */
  --line: #CFDCD7;     /* rules and table borders */
  --moss: #276150;     /* links on light grounds (7:1 on white) */
  --error: #9B1C1C;
  --ok: #1F5E3F;
  --haze: rgba(234, 242, 239, 0.64); /* the squeegee haze over the hero photo */
  --shadow: rgba(10, 25, 20, 0.35);  /* the open mobile menu, nothing else */

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --text: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --r: 12px;           /* photos and panels */
  --r-sm: 8px;         /* buttons and inputs */
  --gutter: 20px;
  --header-h: 76px;
}

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/bricolage-grotesque.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/instrument-sans.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/fonts/instrument-sans-italic.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.65 var(--text); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
a { color: var(--moss); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
a:hover { text-decoration-color: var(--bucket); text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--bucket); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); color: var(--pine); line-height: 1.1; letter-spacing: -0.012em; margin: 0 0 0.6em; font-weight: 750; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.35rem); }
h3 { font-size: 1.3rem; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.25em; }
li { margin-bottom: 0.35em; }
strong { font-weight: 650; }
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

.wrap { width: min(1180px, calc(100% - 2 * var(--gutter))); margin: 0 auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--bucket); color: var(--pine); padding: 10px 16px; border-radius: var(--r-sm); font-weight: 700; z-index: 100; }
.skip:focus { left: 8px; }
.muted { color: var(--slate); }
.small { font-size: 0.9rem; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 50px; padding: 0 1.4rem; border-radius: var(--r-sm); font-weight: 700; font-size: 1rem; text-decoration: none; border: 2px solid transparent; line-height: 1.2; }
.btn:hover { text-decoration: none; }
.btn-bucket { background: var(--bucket); color: var(--pine); }
.btn-bucket:hover { background: var(--bucket-2); }
.btn-line { border-color: var(--pine); color: var(--pine); background: transparent; }
.btn-line:hover { background: var(--glass); }
.on-dark .btn-line, .btn-line.on-dark { border-color: var(--mist); color: var(--paper); }
.on-dark .btn-line:hover { background: var(--pine-2); }
.acts { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* ---------------------------------------------------------------- header */
.site-header { background: var(--pine); color: var(--paper); position: sticky; top: 0; z-index: 50; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--paper); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand .mark { flex: none; color: var(--paper); }
.mark .streak { stroke: var(--bucket); }
.brand-text { display: flex; flex-direction: column; }
.brand-name { font: 800 1.6rem/1 var(--display); letter-spacing: -0.02em; }
.brand-sub { font-size: 0.8rem; color: var(--mist); margin-top: 4px; letter-spacing: 0.01em; }
.desk-nav { display: none; align-items: center; gap: 1.1rem; }
.mainnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.2rem; }
.mainnav li { margin: 0; }
.mainnav a { display: block; color: var(--paper); text-decoration: none; font-weight: 500; font-size: 0.95rem; padding: 0.55rem 0.6rem; border-radius: 6px; }
.mainnav a:hover { background: var(--pine-2); }
.mainnav a[aria-current] { box-shadow: inset 0 -3px 0 var(--bucket); border-radius: 0; }
.nav-cta { min-height: 44px; padding: 0 1.1rem; white-space: nowrap; }
.menu { position: static; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 46px; padding: 0 0.9rem; border: 2px solid var(--pine-2); border-radius: var(--r-sm); font-weight: 600; background: var(--pine-2); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { border-color: var(--bucket); }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--pine); border-top: 1px solid var(--pine-2); padding: 0.5rem var(--gutter) 1.25rem; max-height: calc(100vh - var(--header-h)); overflow-y: auto; box-shadow: 0 18px 30px var(--shadow); }
.menu-panel .mainnav ul { flex-direction: column; gap: 0; }
.menu-panel .mainnav a { padding: 0.9rem 0.25rem; font-size: 1.1rem; border-bottom: 1px solid var(--pine-2); border-radius: 0; }
.menu-panel .mainnav a[aria-current] { box-shadow: inset 4px 0 0 var(--bucket); padding-left: 0.9rem; }
@media (min-width: 1200px) {
  .desk-nav { display: flex; }
  .menu { display: none; }
}
@media (max-width: 420px) {
  .brand-name { font-size: 1.35rem; }
  .brand-sub { font-size: 0.72rem; }
  .brand .mark { width: 38px; height: 38px; }
}

/* ---------------------------------------------------------------- breadcrumb */
.crumbs { background: var(--glass); border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0.6rem 0; display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; }
.crumbs li { margin: 0; color: var(--slate); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--slate); }
.crumbs a { color: var(--moss); display: inline-block; padding: 0.35rem 0; }

/* ---------------------------------------------------------------- homepage hero */
.hero { background: var(--pine); color: var(--paper); padding-top: 2.5rem; overflow: hidden; }
.hero-grid { display: grid; gap: 2rem; }
.hero h1 { color: var(--paper); font-size: clamp(2.2rem, 4.4vw, 3.45rem); margin-bottom: 1.1rem; }
.hero .lede { color: var(--mist); font-size: 1.15rem; max-width: 36em; }
.hero .lede strong { color: var(--paper); font-weight: 600; }
.hero-photo { position: relative; border-radius: var(--r) var(--r) 0 0; overflow: hidden; align-self: end; }
.hero-photo img { width: 100%; height: clamp(260px, 42vw, 520px); object-fit: cover; }
/* The squeegee pass. A translucent haze sits over the photo and one skewed
   stroke carries it off, left to right, once. Transform only, on an element
   with no filter, so the compositor moves it without repainting (the DeepSteam
   hero measured 11 fps the moment a filter met a transform). */
.haze { position: absolute; top: -10%; bottom: -10%; left: -30%; width: 160%; background: var(--haze); transform: skewX(-14deg) translateX(18%); animation: squeegee 1.5s 0.45s cubic-bezier(0.62, 0.04, 0.3, 1) forwards; pointer-events: none; }
.haze::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: var(--bucket); }
@keyframes squeegee { to { transform: skewX(-14deg) translateX(105%); } }
@media (prefers-reduced-motion: reduce) { .haze { display: none; } }
.factbar { background: var(--pine-2); color: var(--mist); font-size: 0.95rem; }
.factbar ul { list-style: none; margin: 0; padding: 0.9rem 0; display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; }
.factbar li { margin: 0; }
.factbar strong { color: var(--paper); }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: end; }
  .hero-copy { padding-bottom: 3.5rem; }
}

/* ---------------------------------------------------------------- inner page hero */
.page-hero { background: var(--pine); color: var(--paper); padding: 2.6rem 0 2.8rem; }
.page-hero h1 { color: var(--paper); max-width: 22em; }
.page-hero .lede { color: var(--mist); font-size: 1.15rem; max-width: 40em; margin-bottom: 0; }
.page-hero .lede a { color: var(--paper); text-decoration-color: var(--bucket); }
.page-hero .meta { color: var(--mist); font-size: 0.92rem; margin: 1rem 0 0; }
.page-hero .meta time { color: var(--paper); }

/* The bridge under every track hero, for a visitor search sent to the wrong side. */
.switch { background: var(--glass); border-bottom: 1px solid var(--line); font-size: 0.97rem; }
.switch p { margin: 0; padding: 0.8rem 0; }

/* ---------------------------------------------------------------- sections */
.sec { padding: 3.5rem 0; }
.sec-glass { background: var(--glass); }
.sec-tight { padding: 2.25rem 0; }
.sec-head { max-width: 44em; margin-bottom: 2rem; }
.sec-head p { color: var(--slate); font-size: 1.08rem; }
.two { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
.two > * { min-width: 0; }
@media (min-width: 900px) {
  .two { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
  .two.even { grid-template-columns: 1fr 1fr; }
  .sticky-aside { position: sticky; top: calc(var(--header-h) + 20px); }
}
.prose { max-width: 44em; }
.prose h2 { margin-top: 2.2rem; font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
.prose h2:first-child, .prose .answer + h2 { margin-top: 1.6rem; }
.prose h3 { margin-top: 1.6rem; }
.prose li::marker { color: var(--moss); }

/* The answer-first block: the paragraph an assistant lifts. */
.answer { background: var(--glass); border-top: 5px solid var(--pine); border-radius: 0 0 var(--r) var(--r); padding: 1.3rem 1.4rem 0.4rem; margin: 0 0 1.5rem; font-size: 1.1rem; }
.answer p { margin-bottom: 0.9rem; }

/* Photos */
.photo { margin: 0; }
.photo img { border-radius: var(--r); width: 100%; object-fit: cover; }
.photo figcaption { color: var(--slate); font-size: 0.9rem; margin-top: 0.6rem; }
.photo.tall img { aspect-ratio: 3 / 4; }

/* Two doors on the homepage */
.doors { display: grid; gap: 1.5rem; }
@media (min-width: 820px) { .doors { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }
.door { background: var(--glass); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.door img { width: 100%; height: 250px; object-fit: cover; border-radius: 0; }
.door-body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.door h3 { font-size: 1.7rem; margin-bottom: 0.4rem; }
.door p { color: var(--slate); }
.door ul { margin: 0 0 1.4rem; padding-left: 1.1em; }
.door li { margin: 0; }
.door li > a, .door .go > a { display: inline-block; padding: 0.45rem 0; font-weight: 600; }
.door img.pos-low { object-position: center 88%; }
.door .btn { margin-top: auto; align-self: flex-start; }

/* Ledger: a list of rows, not a card kit */
.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ledger li { margin: 0; border-bottom: 1px solid var(--line); }
.ledger a, .ledger .go > a { display: grid; gap: 0.2rem 1.5rem; padding: 1.1rem 0.25rem; text-decoration: none; color: var(--ink); }
.ledger a:hover { background: var(--glass); }
.ledger-name { font: 700 1.2rem/1.25 var(--display); color: var(--pine); }
.ledger-desc { color: var(--slate); }
.ledger-go { color: var(--moss); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; font-size: 0.95rem; }
.ledger a:hover .ledger-go { text-decoration-color: var(--bucket); text-decoration-thickness: 3px; }
@media (min-width: 820px) {
  .ledger:not(.compact) a { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; align-items: baseline; padding: 1.2rem 0.5rem; }
}

/* Checklists */
.checks { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.checks li { position: relative; padding-left: 2rem; margin-bottom: 0.6rem; }
.checks li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 1.2rem; height: 1.2rem; border-radius: 4px; background: var(--pine); }
.checks li::after { content: ""; position: absolute; left: 0.42rem; top: 0.44em; width: 0.35rem; height: 0.65rem; border: solid var(--bucket); border-width: 0 3px 3px 0; transform: rotate(45deg); }

/* The scope ticket: a checklist framed like the work order it is */
.ticket { background: var(--paper); border: 2px solid var(--pine); border-radius: var(--r); padding: 1.3rem 1.4rem 0.6rem; }
.ticket h3 { font-size: 1.15rem; margin-bottom: 0.8rem; }
.ticket .checks li { border-bottom: 1px dashed var(--line); padding-bottom: 0.55rem; }
.ticket .checks li:last-child { border-bottom: 0; }

/* Steps: a genuine sequence, so it is numbered */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 1.4rem; display: grid; gap: 1rem; }
.steps li { counter-increment: step; position: relative; padding: 1rem 1rem 1rem 3.6rem; background: var(--glass); border-radius: var(--r); margin: 0; }
.steps li::before { content: counter(step); position: absolute; left: 1rem; top: 0.95rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--pine); color: var(--paper); font: 700 1rem/1.9rem var(--display); text-align: center; }
.steps strong { display: block; color: var(--pine); font-family: var(--display); font-size: 1.1rem; }

/* Tables stay tables; on a phone the rows stack into labelled blocks */
.table-wrap { margin: 0 0 1.6rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
caption { text-align: left; font-weight: 650; color: var(--pine); padding-bottom: 0.6rem; caption-side: top; }
th, td { text-align: left; vertical-align: top; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--line); }
thead th { background: var(--pine); color: var(--paper); font-weight: 650; }
tbody th { color: var(--pine); font-weight: 650; }
tbody tr:nth-child(even) { background: var(--glass); }
@media (max-width: 700px) {
  caption { display: block; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table, tbody, tr, th, td { display: block; width: 100%; }
  tbody tr { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 0.8rem; padding: 0.3rem 0; background: var(--paper); }
  tbody tr:nth-child(even) { background: var(--paper); }
  tbody th { border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  td { border: 0; padding: 0.4rem 0.8rem; }
  td[data-label]::before { content: attr(data-label); display: block; font-size: 0.8rem; font-weight: 650; color: var(--slate); }
}

/* Testimonials */
.quote { margin: 0; }
.quote blockquote { margin: 0; }
.quote p { font: 650 clamp(1.3rem, 2.4vw, 1.75rem)/1.35 var(--display); color: var(--pine); margin: 0 0 0.9rem; max-width: 34em; }
.quote figcaption { color: var(--slate); font-size: 0.95rem; }

/* Inline call to action at the end of a page's argument */
.inline-cta { background: var(--pine); color: var(--paper); border-radius: var(--r); padding: 1.6rem 1.6rem 1.7rem; margin: 2rem 0 0; }
.inline-cta h2, .inline-cta h3 { color: var(--paper); margin-top: 0; }
.inline-cta p { color: var(--mist); }
.inline-cta .acts { margin-top: 1rem; }
.inline-cta a:not(.btn) { color: var(--paper); }

/* Generated related links */
.related { border-top: 1px solid var(--line); padding: 2.6rem 0; }
.related h2 { font-size: 1.4rem; }
.related-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.2rem 2rem; }
.related-list li { margin: 0; padding: 0.55rem 0; }
.related-list a { font-weight: 650; }
.related-list span { color: var(--slate); }
.related + .related { border-top: 0; padding-top: 0; }
@media (min-width: 900px) { .related-list { grid-template-columns: 1fr 1fr; } }

/* The visible date and publisher at the foot of each page */
.stamp { color: var(--slate); font-size: 0.88rem; padding: 0.5rem 0 2rem; }
.stamp p { margin: 0; }

/* A link that stands alone on its line gets a finger-sized target */
.go > a { display: inline-block; padding: 0.55rem 0; font-weight: 650; }

/* Process figure (carpet pages) */
.process { margin: 0 0 1.2rem; }
@media (max-width: 640px) { .process { display: none; } }
.process svg { width: 100%; height: auto; display: block; }
.process figcaption { color: var(--slate); font-size: 0.9rem; margin-top: 0.5rem; }
.process .p-ground { fill: var(--glass); }
.process .p-pile { stroke: var(--moss); }
.process .p-soil { fill: var(--slate); }
.process .p-water { stroke: var(--pine); }
.process .p-accent { fill: var(--bucket); stroke: var(--bucket); }
.process .p-text { fill: var(--pine); font: 700 17px var(--text); }
.process .p-sub { fill: var(--slate); font: 500 14px var(--text); }

/* ---------------------------------------------------------------- forms */
.form { display: grid; gap: 1rem; }
.form .row { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.form .row > * { min-width: 0; }
@media (min-width: 640px) { .form .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.form label { display: block; font-weight: 650; margin-bottom: 0.35rem; color: var(--pine); }
.form .hint { font-weight: 400; color: var(--slate); font-size: 0.9rem; }
.form input, .form select, .form textarea { width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--line); border-radius: var(--r-sm); padding: 0.75rem 0.85rem; min-height: 50px; }
.form textarea { min-height: 140px; resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { border-color: var(--pine); outline: 3px solid var(--bucket); outline-offset: 1px; }
.form fieldset { border: 0; margin: 0; padding: 0; }
.form legend { font-weight: 650; color: var(--pine); margin-bottom: 0.4rem; }
.form .choice { display: flex; align-items: center; gap: 0.55rem; font-weight: 400; color: var(--ink); min-height: 40px; margin: 0; }
.form .choice input { width: 20px; height: 20px; min-height: 0; accent-color: var(--pine); }
.form .choices { display: grid; gap: 0.1rem 1.5rem; }
@media (min-width: 640px) { .form .choices { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-note { border-radius: var(--r-sm); padding: 0.9rem 1rem; }
.form-note.success { background: var(--glass); color: var(--ok); border: 2px solid var(--ok); }
.form-note.error { background: var(--paper); color: var(--error); border: 2px solid var(--error); }
.form .fine { font-size: 0.9rem; color: var(--slate); margin: 0; }
.panel { background: var(--glass); border-radius: var(--r); padding: 1.5rem; }
.panel h2, .panel h3 { margin-top: 0; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--pine); color: var(--mist); padding: 3.5rem 0 6.5rem; margin-top: 0; }
.site-footer a { color: var(--paper); }
.footer-grid { display: grid; gap: 2.2rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } .footer-about { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 0.8fr; } .footer-about { grid-column: auto; } }
.footer-about .brand { margin-bottom: 1rem; }
.footer-h { color: var(--paper); font-size: 1.05rem; margin-bottom: 0.7rem; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin: 0; }
.footer-links a { display: inline-block; padding: 0.4rem 0; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; text-decoration-color: var(--bucket); }
.foot-bottom { border-top: 1px solid var(--pine-2); margin-top: 2.5rem; padding-top: 1.3rem; display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; justify-content: space-between; font-size: 0.9rem; }
.site-footer .go > a { padding: 0.4rem 0; }

/* ---------------------------------------------------------------- sticky phone bar */
.actbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.5rem; padding: 0.55rem 0.6rem calc(0.55rem + env(safe-area-inset-bottom)); background: var(--pine); border-top: 1px solid var(--pine-2); }
.actbar a { display: flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 48px; border-radius: var(--r-sm); font-weight: 700; text-decoration: none; white-space: nowrap; }
.a-call { background: var(--pine-2); color: var(--paper); }
.a-quote { background: var(--bucket); color: var(--pine); }
@media (min-width: 900px) { .actbar { display: none; } .site-footer { padding-bottom: 2.5rem; } }
.ico { flex: none; }

/* On a guide the answer IS the hero: the paragraph an assistant lifts sits directly under
   the h1, on the pine ground, before anything else (citable-page blueprint, step 3). */
.page-hero .answer-hero { background: transparent; border: 0; border-left: 5px solid var(--bucket); border-radius: 0; padding: 0.1rem 0 0.1rem 1.2rem; margin: 0.4rem 0 0; max-width: 46em; color: var(--paper); font-size: 1.15rem; }
.page-hero .answer-hero p { margin: 0; }
.page-hero .answer-hero a { color: var(--paper); }

@media (max-width: 560px) { .page-hero .answer-hero { font-size: 1.02rem; padding-left: 0.9rem; } }