/* ==========================================================================
   For business (vendor & insurance info) and sample reports: page-specific layout only.
   Owner: "business" builder. Loaded via front matter "styles": ["business.css"].
   Uses the design tokens from site.css; no new colors or type styles.
   ========================================================================== */

/* Local fixes for two site.css rhythm quirks (reported to the lead; harmless once fixed there):
   1) ".section + .section:not(--band)" also zeroes the top padding of a plain section that follows a BAND section.
   2) List components (.feature-list, .ticks…) reset margin to 0 after the .stack rules, so they butt up
      against the paragraph above them inside a .stack / .stack-lg. */
.section--band + .section:not(.section--band):not(.section--tint):not(.theme-ink) { padding-top: var(--space-section); }
.section--band + .section.section--tight:not(.section--band):not(.section--tint):not(.theme-ink) { padding-top: clamp(3rem, 2rem + 4vw, 5rem); }
.stack > * + :is(.feature-list, .ticks, .stat-row, .status-list), .stack-lg > * + :is(.feature-list, .ticks, .stat-row, .status-list) { margin-top: var(--space-4); }
.stack-sm > * + :is(.feature-list, .ticks, .stat-row, .status-list) { margin-top: var(--space-2); }
/* A note on a linen band would disappear into it; give it a white card instead */
.section--band .note { background: var(--gt-white); border: var(--border-hair); }
.section--band .report .note { background: var(--gt-linen); border: 0; }

/* ---------- Typographic hero: icon ring + eyebrow on the left; on the right, an "at a glance" card inside the
   broken circle (the same idea as the service pages' glance cards), in full ink ---------- */
.biz-hero { position: relative; overflow: hidden; }
.biz-hero--split > .container { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; column-gap: clamp(2rem, 1rem + 5vw, 6rem); }
.biz-hero-text { display: grid; gap: var(--space-5); align-content: start; }
.biz-hero--split > .container > .biz-quick { grid-column: 1 / -1; }
.biz-hero-aside { position: relative; display: grid; place-items: center; padding: clamp(2rem, 1rem + 2vw, 3rem) 0; }
.biz-hero-aside > .gt-arc { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(112%, 34rem); height: auto; aspect-ratio: 1;
  color: var(--gt-ink); --arc-w: 0.3; pointer-events: none; }
.biz-glance { position: relative; display: grid; gap: var(--space-4); width: min(100%, 25rem); padding: var(--space-6);
  background: var(--gt-white); border: var(--border-hair); border-radius: var(--radius-l); box-shadow: var(--shadow-2); }
.biz-glance-list { list-style: none; padding: 0; margin: 0; display: grid; }
.biz-glance-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; padding-block: var(--space-3); border-top: var(--border-hair); }
.biz-glance-list li:first-child { border-top: 0; padding-top: 0; }
.biz-glance-list li:last-child { padding-bottom: 0; }
.biz-glance-list .icon { width: 22px; height: 22px; margin-top: 2px; color: var(--color-accent); }
.biz-glance-list strong, .biz-glance-list a { display: block; width: fit-content; font-weight: 500; font-size: var(--step--1); }
.biz-glance-list span { display: block; font-size: var(--step--1); color: var(--color-text-muted); line-height: 1.45; }
.biz-glance-foot { margin: 0; padding-top: var(--space-4); border-top: var(--border-hair); font-size: var(--step--1); }
/* Phones and tablets: the same facts and links sit further down the page, so the hero stays short */
@media (max-width: 859px) { .biz-hero--split > .container { grid-template-columns: 1fr; } .biz-hero-aside { display: none; } }
.biz-hero-kicker { display: flex; align-items: center; gap: var(--space-3); }
.biz-hero-kicker .icon-ring { width: 48px; height: 48px; }
.biz-hero-kicker .icon-ring .icon { width: 22px; height: 22px; }
.biz-hero h1 { max-width: 16ch; }
.biz-hero .lead { max-width: 44ch; }
.report-disclaimer { max-width: 46rem; }

/* Quick-link cards in the hero */
.biz-quick { margin-top: var(--space-4); }
.biz-quick > ul { list-style: none; padding: 0; margin: 0; }
.biz-quick-card { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-3); row-gap: 2px; align-items: start; padding: var(--space-5); }
.biz-quick-card > .icon { grid-row: span 2; width: 22px; height: 22px; margin-top: 3px; color: var(--color-accent); }
.biz-quick-card > a.stretch { font: 600 var(--step-1)/1.25 var(--font-display); }
.biz-quick-card > a.stretch:hover { text-decoration: underline; }
.biz-quick-card > span { color: var(--color-text-muted); font-size: var(--step--1); }
@media (max-width: 639px) { .biz-quick > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .biz-quick-card { padding: var(--space-4); } }
@media (max-width: 399px) { .biz-quick > ul { grid-template-columns: 1fr; } }

/* ---------- Compliance facts ---------- */
.facts-card { padding: clamp(1.25rem, 0.75rem + 2vw, 2.25rem); }
.facts-dl { margin: 0; border-top: 1px solid var(--gt-ink); }
.facts-dl > div { display: grid; grid-template-columns: minmax(10rem, 0.9fr) minmax(0, 1.1fr); gap: var(--space-2) var(--space-4); padding: var(--space-4) 0; border-bottom: var(--border-hair); }
.facts-dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.facts-dl dt { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; }
.facts-dl dt .icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--color-accent); }
.facts-dl dd { margin: 0; color: var(--color-text-muted); font-size: var(--step--1); overflow-wrap: anywhere; }
@media (max-width: 479px) { .facts-dl > div { grid-template-columns: 1fr; } .facts-dl dd { padding-left: 30px; } }

/* ---------- Form sections: explanation beside a wider form card; the explanation stays put while the form scrolls ---------- */
.biz-form { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
@media (max-width: 899px) { .biz-form { grid-template-columns: 1fr; } }
@media (min-width: 900px) and (min-height: 820px) { .biz-form > .biz-aside { position: sticky; top: calc(var(--header-h) + 24px); } }
.biz-aside .note { max-width: 32rem; }
/* Small caps part headings inside longer forms */
.form .form-part { margin: 0; padding-top: var(--space-5); border-top: var(--border-hair);
  font-family: var(--font-sans); font-size: var(--step--1); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gt-ink-2); }
.form > .hp-field + .form-part { padding-top: 0; border-top: 0; }

/* Choice chips inside forms: a check mark on the selected chip, so the state never relies on color alone */
.chip-row.is-choice .chip:has(input:checked)::before {
  content: ""; width: 16px; height: 16px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.chip-row.is-choice .chip { min-height: 44px; }

/* ---------- Sample reports ---------- */
.report { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1.5rem + 2vw, 3.25rem); padding: clamp(1.25rem, 0.5rem + 3vw, 3.25rem);
  background: var(--gt-white); border: var(--border-hair); border-radius: var(--radius-l); box-shadow: var(--shadow-2); }
.report-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-4);
  padding-bottom: var(--space-5); border-bottom: 1px solid var(--gt-ink); }
.report-brand { display: grid; justify-items: end; gap: var(--space-2); }
.report-head .brand-mark { height: 44px; width: auto; }
/* Reports sit under the page's h2, so their headings are one level down (h3/h4); keep the report look */
.report-head h3 { font-size: var(--step-4); font-weight: 500; line-height: 1.1; }
/* Two columns on phones, never more than four, so 8 items don't leave a lonely last row */
.report-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(8rem, calc((100% - 3 * var(--space-5)) / 4))), 1fr)); gap: var(--space-4) var(--space-5); margin: 0; }
.report-meta > div { display: grid; gap: 2px; align-content: start; }
.report-meta dt { font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gt-ink-3); }
.report-meta dd { margin: 0; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.report-block { display: grid; gap: var(--space-4); }
.report-block > h4 { display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; letter-spacing: var(--tracking-display); line-height: 1.2; }
.report-block > h4 .icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-accent); }
.report-block > p { margin: 0; }
.report-foot { padding-top: var(--space-5); border-top: var(--border-hair); max-width: none; }

/* Area / section status list: name and detail on the left, a status tag on the right */
.status-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--gt-ink); }
.status-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-bottom: var(--border-hair); }
.status-list .sl-name { font-weight: 500; }
.status-list .sl-name small { display: block; font-weight: 400; color: var(--gt-ink-3); font-size: var(--step--2); margin-top: 2px; }

/* Findings table: a small photo frame per row */
table.report-findings { min-width: 46rem; }
table.report-findings thead th, table.report-findings tbody th { white-space: normal; }
table.report-findings td:nth-child(2), table.report-findings td:nth-child(4) { min-width: 12rem; }
/* Photo spaces in a sample report: a calm neutral frame (not the yellow owner-placeholder look) */
.report .ph-block { gap: 4px; padding: var(--space-3); border: 1.5px dashed var(--gt-line); border-radius: var(--radius-s); background: var(--gt-linen); color: var(--gt-ink-3); font-size: var(--step--2); letter-spacing: 0.06em; text-transform: uppercase; }
.report .ph-block .icon { width: 22px; height: 22px; color: var(--gt-ink-3); }
.report-thumb { width: 6.5rem; aspect-ratio: 4 / 3; }
.report-shot { aspect-ratio: 4 / 3; border-radius: var(--radius-m) !important; }
.report-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 959px) { .report-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.report-photo { margin: 0; }
.report-photo figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: var(--space-3); font-size: var(--step--1); color: var(--gt-ink-2); }

/* "Ready for walkthrough" box and signature lines */
.report-ready { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; padding: var(--space-4) var(--space-5); border: 1px solid var(--gt-ink); border-radius: var(--radius-m); }
.report-ready p { margin: 0; }
.report-box { display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid var(--gt-ink); border-radius: 6px; }
.report-box .icon { width: 18px; height: 18px; }
.report-signatures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); padding-top: var(--space-5); }
.report-signatures > div { display: grid; gap: var(--space-2); }
.sig-line { display: block; height: 2.5rem; border-bottom: 1px solid var(--gt-ink); }
.sig-label { font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gt-ink-3); }
@media (max-width: 559px) { .report-signatures { grid-template-columns: 1fr; gap: var(--space-4); } }

/* ---------- Capabilities statement: the same document look as the sample reports, in two columns ---------- */
.biz-glance-title { margin: 0; font: 500 var(--step-3)/1.15 var(--font-display); letter-spacing: var(--tracking-display); max-width: 20ch; }
.biz-glance > .btn-row { margin: 0; }
@media (max-width: 859px) {
  /* This card holds the print and share buttons, so on phones it stays, below the text and without the arc */
  .biz-hero-aside.biz-hero-aside--keep { display: block; padding: 0; }
  .biz-hero-aside--keep > .gt-arc { display: none; }
  .biz-hero-aside--keep > .biz-glance { width: 100%; box-shadow: none; }
}
.cap-doc .report-head h2 { font-size: var(--step-4); font-weight: 500; line-height: 1.1; }
.cap-doc .report-block > h3 { display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; letter-spacing: var(--tracking-display); line-height: 1.2; }
.cap-doc .report-block > h3 .icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-accent); }
.cap-doc .report-block > p { margin: 0; }
.cap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 1.5rem + 2vw, 3.25rem) clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
.cap-grid > .cap-wide { grid-column: 1 / -1; }
.cap-col { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.25rem); align-content: start; min-width: 0; }
@media (max-width: 899px) { .cap-grid { grid-template-columns: minmax(0, 1fr); } }
.cap-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) clamp(2rem, 1rem + 3vw, 4rem); }
@media (max-width: 899px) { .cap-services { grid-template-columns: minmax(0, 1fr); } }
.cap-services strong a { color: inherit; }
.cap-dl > div { grid-template-columns: minmax(8.5rem, 0.8fr) minmax(0, 1.2fr); }
/* Email and website share one wide cell: two of the four columns on wide screens, the full row on narrow ones */
.cap-doc .report-meta > .cap-meta-wide { grid-column: 1 / -1; }
@media (min-width: 900px) { .cap-doc .report-meta > .cap-meta-wide { grid-column: span 2; } }
.cap-dl dt { font-weight: 500; }
@media (max-width: 479px) { .cap-dl > div { grid-template-columns: 1fr; } .cap-dl dd { padding-left: 0; } }

/* Sample proposal: scope table, price line (text only, never a figure) and terms */
table.report-scope tbody th { width: 9.5rem; white-space: normal; }
.report-tasks { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.report-tasks li { padding-left: 2px; }
.report-tasks li::marker { color: var(--gt-ink-3); }
.report-price { display: grid; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--gt-ink); border-radius: var(--radius-m); }
.report-price p { margin: 0; }
.report-price-label { font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gt-ink-3); }
.report-price-line { font: 500 var(--step-2)/1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.report-terms > div { grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); }
.report-terms dt { font-weight: 500; }
@media (max-width: 479px) { .report-terms > div { grid-template-columns: 1fr; } .report-terms dd { padding-left: 0; } }

/* Four samples in tabs. Every panel is in the page source, so with JavaScript off all four show (each has its own
   header) and the tab buttons, which would do nothing, are hidden; with it on, only the first shows until the page's
   inline script has picked the right one (a deep link may ask for another) and marked the tabs ready. */
html:not(.js) .report-tabs > .tablist { display: none; }
.js .report-tabs:not(.is-ready) > [role="tabpanel"] ~ [role="tabpanel"] { display: none; }
.report-tabs > .tablist { max-width: 100%; }
@media (max-width: 599px) {
  /* Two rows of two equal segments instead of a pill that wraps unevenly */
  .report-tabs > .tablist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: stretch; border-radius: var(--radius-m); }
  .report-tabs > .tablist [role="tab"] { padding: 6px 8px; border-radius: var(--radius-s); line-height: 1.25; }
}
.report-tabs > [role="tabpanel"]:focus-visible { outline-offset: 6px; border-radius: var(--radius-l); }

@page cap { size: letter; margin: 10mm 13mm; }
@media print {
  .page-hero { padding-block: 0 1rem; }
  /* The capabilities statement prints as the document alone (no hero, no next steps), sized to fit one letter page */
  .cap-hero { display: none; }
  .cap-section { padding-block: 0; page: cap; }
  .report.cap-doc { gap: 0.75rem; font-size: 8.5pt; line-height: 1.4; }
  .cap-doc .report-head { padding-bottom: 0.5rem; }
  .cap-doc .report-head h2 { font-size: 18pt; }
  .cap-doc .report-head .muted { font-size: 9pt; }
  .cap-doc .report-head .brand-mark { height: 34px; }
  .cap-doc .report-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem 1rem; }
  .cap-doc .report-meta dt { font-size: 6.5pt; }
  .cap-doc .report-meta dd { font-size: 8.5pt; }
  .cap-doc .report-meta > .cap-meta-wide { grid-column: span 2; }
  .cap-grid, .cap-services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1.5rem; }
  .cap-col { gap: 0.75rem; }
  .cap-doc .report-block { gap: 0.4rem; }
  .cap-doc .report-block > h3 { font-size: 11.5pt; break-after: avoid; }
  .cap-doc .report-block > h3 .icon { width: 15px; height: 15px; }
  .cap-doc :is(.ticks li, .feature-list strong, .feature-list span, .cap-dl dt, .cap-dl dd, .report-block > p) { font-size: 8.5pt; line-height: 1.35; }
  .cap-doc .ticks { gap: 3px; }
  .cap-doc .ticks li { padding-left: 18px; }
  .cap-doc .ticks li::before { width: 11px; height: 11px; top: 0.25em; }
  .cap-doc .feature-list { gap: 0.35rem; }
  .cap-doc .feature-list li { gap: 0.5rem; }
  .cap-doc .feature-list .icon { width: 14px; height: 14px; margin-top: 1px; }
  .cap-dl > div { grid-template-columns: 7.5rem minmax(0, 1fr); padding-block: 0.25rem; gap: 0.1rem 0.75rem; }
  .cap-doc .report-foot { padding-top: 0.4rem; font-size: 7.5pt; }
  .cap-doc .feature-list li, .cap-doc .ticks li, .cap-dl > div { break-inside: avoid; }
  .biz-hero-aside, .breadcrumb { display: none; }
  .section--band { background: none; }
  /* Print every sample, one after another, not just the open tab */
  .report-tabs > [role="tabpanel"][hidden] { display: block !important; }
  .report-tabs > [role="tabpanel"] + [role="tabpanel"] { break-before: page; }
  .report { box-shadow: none; border: 0; border-radius: 0; padding: 0; gap: 1.25rem; }
  .report-tabs > .tablist, .report-intro { display: none; }
  .report-block > h4 { break-after: avoid; }
  .report-photo, .report-meta > div, .status-list li, .report tr, .report .feature-list li, .report-ready, .report-price, .report-terms > div, .report-signatures { break-inside: avoid; }
  .report-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
  .table-wrap { overflow: visible; border: 0; }
  table.data { min-width: 0 !important; }
  table.data thead th, table.data tbody th { white-space: normal; }
}
table.report-findings td:last-child { min-width: 7.5rem; }
@media (max-width: 479px) { .report-meta { column-gap: var(--space-4); } }