/* ==========================================================================
   Green Glove Heroes: design system v2 (2026-10-04)
   Mollie-derived section patterns, made ours. Loaded after site.css on every
   page. Reviewed on /styleguide2/ before any section moves onto a page.
   Live on pages so far: Contact page layout and every form's fields.

   Rules this file follows:
   - Left aligned. Centered only in .statement and .tiles-panel__head.
   - Sand bands hold white cards. White bands hold sand panels.
     Green and navy bands carry white text.
   - No hover on cards or blocks. Hover only on links and buttons.
   - Fixed sizes per breakpoint: 1200+, 901-1199, 641-900, 640 and below.
   ========================================================================== */

/* Roboto light weights for the large thin numbers (SIL Open Font License). */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100; font-display: swap; src: url("../fonts/roboto-100.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/roboto-200.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/roboto-300.woff2") format("woff2"); }

:root {
  /* Warm grays, measured from mollie.com (2026-10-04). Keep the full set:
     use the alternates when several gray areas sit next to each other. */
  --sand: #eeeeee;          /* main band gray: the old site's gray (v102, was Mollie's #f5f2f0) */
  --sand-light: #f5f5f5;    /* one step lighter: large feature panels */
  --sand-soft: #f5f5f5;     /* soft button on white */
  --sand-olive: #eeeeee;    /* soft pill inside white cards; alternate panel tone */
  --sand-lightest: #faf8f7; /* surfaces inside drawn screens */
  --sand-white: #fafaf9;    /* near-white tiles */
  --sand-cool: #f5f5f7;     /* cool gray, behind device or product photos */
  --sand-2: #eeeeee;        /* soft buttons, chips, tiles */
  --sand-3: #dddddd;        /* soft button hover */
  --hair: rgb(0 0 0 / 10%);
  --muted: rgb(0 0 0 / 62%);
  --green-tint: #e5f5e5;
  --navy-deep: #053241;
  --r-card: 24px;
  --r-img: 20px;
  --r-tile: 16px;
  --r-field: 12px;
  --band-y: 120px;
  --card-pad: 40px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

@media (max-width: 1199px) { :root { --band-y: 96px; } }
@media (max-width: 900px)  { :root { --band-y: 72px; --card-pad: 32px; } }
@media (max-width: 640px)  { :root { --band-y: 56px; --card-pad: 24px; --r-card: 20px; } }

/* ------------------------------------------------------------- Bands --- */
.band { padding-block: var(--band-y); }
.band--tight { padding-block: calc(var(--band-y) * 0.6); }
.band--flush-top { padding-top: 0; }
.band--sand { background: var(--sand); }
.band--green { background: var(--green-dark); color: var(--white); }
.band--navy { background: var(--navy); color: var(--white); }

.on-dark,
.band--green,
.band--navy { --muted: var(--white); --hair: rgb(255 255 255 / 22%); }
.on-dark :where(.t-display, .t-h2, .t-h3, .t-h4, .t-eyebrow, .t-body),
.band--green :where(.t-display, .t-h2, .t-h3, .t-h4, .t-eyebrow, .t-body),
.band--navy :where(.t-display, .t-h2, .t-h3, .t-h4, .t-eyebrow, .t-body) { color: var(--white); }
.on-dark .t-lede,
.band--green .t-lede,
.band--navy .t-lede { color: var(--white); }

.muted { color: var(--muted); }
.t-lede { color: var(--muted); }

/* ------------------------------------------------------ Section head --- */
.s-head { display: grid; gap: 16px; max-width: 820px; margin: 0 0 56px; }
.kfeat-band .s-head { max-width: none; }
.s-head > * { margin: 0; }
.s-head .t-lede { max-width: 720px; }
.s-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; max-width: none; }
.s-head--split > div:first-child { display: grid; gap: 16px; max-width: 820px; }
.s-head--split > .btn-row { flex: none; }
.s-head--split .btn { flex: none; }
.s-head--center { text-align: center; margin-inline: auto; justify-items: center; }
@media (max-width: 900px) {
  .s-head { margin-bottom: 40px; }
  .s-head--split { flex-direction: column; align-items: flex-start; }
}

/* ----------------------------------------------------------- Eyebrow --- */
.eyebrow2 { display: block; font: 700 15px/1.3 var(--font-head); letter-spacing: -0.2px; color: var(--navy); margin: 0; }
.eyebrow2 .arrow { color: var(--green); }
.eyebrow2 .ico { color: var(--green); width: 20px; height: 20px; vertical-align: -4px; margin-right: 8px; }
.on-dark .eyebrow2, .band--navy .eyebrow2, .band--green .eyebrow2 { color: var(--white); }
.band--green .eyebrow2 .arrow { color: var(--white); }

/* ----------------------------------------------------------- Buttons --- */
.btn--navy { background: var(--navy); color: var(--white); }
.btn--navy:hover, .btn--navy:focus-visible { background: var(--green-dark); color: var(--white); }
.btn--green { background: var(--green-dark); color: var(--white); }
.btn--green:hover, .btn--green:focus-visible { background: var(--green); color: var(--white); }
.btn--soft { background: var(--sand-2); color: var(--ink); }
.btn--soft:hover, .btn--soft:focus-visible { background: var(--sand-3); color: var(--ink); }
.btn--light { background: var(--white); color: var(--navy); }
.btn--light:hover, .btn--light:focus-visible { background: var(--sand-2); color: var(--navy); }
.btn--sm { min-height: 40px; padding: 10px 16px; font-size: 15px; line-height: 18px; }
.btn .ico { width: 18px; height: 18px; stroke-width: 2; transition: transform 0.2s ease; }
.btn:hover .ico--go { transform: translateX(3px); }
@media (max-width: 640px) {
  .btn-row--stack { flex-direction: column; align-items: stretch; }
}

/* ------------------------------------------------------------- Icons --- */
.ico { width: 24px; height: 24px; flex: none; display: inline-block; vertical-align: middle; }
.ico-chip { width: 48px; height: 48px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--green-tint); color: var(--green-dark); }
.ico-chip .ico { width: 24px; height: 24px; }
.ico-chip--navy { background: rgb(8 72 94 / 10%); color: var(--navy); }

/* ------------------------------------------------- Image placeholder --- */
.ph { position: relative; display: grid; place-items: center; align-content: center; gap: 10px; padding: 24px;
  background: var(--sand-2); color: var(--muted); border-radius: inherit; text-align: center;
  font: 500 14px/1.4 var(--font-body); min-height: 200px; width: 100%; height: 100%; }
.ph .ico { width: 32px; height: 32px; }
.ph b { color: var(--ink); font-weight: 700; }
.on-dark .ph, .band--navy .ph, .band--green .ph { background: rgb(255 255 255 / 10%); }
.media { border-radius: var(--r-img); overflow: hidden; background: var(--sand-2); }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media--wide { aspect-ratio: 2 / 1; }
.media--photo { aspect-ratio: 3 / 2; }
.media--square { aspect-ratio: 1 / 1; }
.media--card { aspect-ratio: 16 / 10; }
@media (max-width: 640px) { .media--wide { aspect-ratio: 4 / 3; } }

/* ------------------------------------------------------------- Cards --- */
.card { position: relative; background: var(--white); color: var(--ink); border-radius: var(--r-card); padding: var(--card-pad);
  display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.card > * { margin: 0; }
.card--sand { background: var(--sand); }
.card--navy { background: var(--navy); color: var(--white); }
.card--green { background: var(--green-dark); color: var(--white); }
.card--navy, .card--green { --muted: var(--white); }
.card__kicker { font: 700 14px/1.3 var(--font-head); letter-spacing: -0.1px; color: var(--green-dark); }
.card--navy .card__kicker, .card--green .card__kicker { color: var(--white); }
.card__title { font: 400 30px/1.15 var(--font-head); letter-spacing: -0.9px; }
.card__title--sm { font: 500 22px/1.25 var(--font-head); letter-spacing: -0.4px; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover, .card__title a:focus-visible { color: var(--green-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.card__text { font-size: 17px; line-height: 1.55; letter-spacing: -0.2px; color: var(--muted); }
.card__foot { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.card__media { margin: 12px calc(var(--card-pad) * -1) calc(var(--card-pad) * -1); }
.card__media .media, .card__media .ph { border-radius: 0; }
.card__media--inset { margin: 8px 0 0; }
.card__media--inset .media { border-radius: var(--r-tile); }
.card__visual { margin-top: auto; padding-top: 24px; }
@media (max-width: 900px) { .card__title { font-size: 26px; letter-spacing: -0.7px; } }
@media (max-width: 640px) { .card__title { font-size: 24px; } .card__text { font-size: 16px; } }

.card-row { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-row--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.card-row--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.card-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199px) { .card-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .card-row, .card-row--2, .card-row--1-2, .card-row--2-1 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) { .card-row--4 { grid-template-columns: minmax(0, 1fr); } }

/* -------------------------------------------------- Line lists ---------- */
/* One component, three versions: plain, check and link (chevron). */
.line-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.line-list > li { border-bottom: 1px solid var(--hair); padding: 18px 0; display: flex; gap: 14px; align-items: flex-start;
  font-size: 18px; line-height: 1.5; letter-spacing: -0.2px; }
.line-list--check > li > .ico { color: var(--green-dark); width: 22px; height: 22px; margin-top: 2px; }
.band--green .line-list--check > li > .ico, .band--navy .line-list--check > li > .ico { color: var(--white); }
.line-list--check b { font-weight: 700; }
.line-list--center > li { justify-content: center; text-align: center; font: 400 22px/1.3 var(--font-head); letter-spacing: -0.4px; padding: 22px 0; }
.line-list--links > li { padding: 0; }
.line-list--links a { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; color: var(--ink); text-decoration: none; }
.line-list--links a .ico { width: 20px; height: 20px; stroke-width: 2; transition: transform 0.2s ease, color 0.2s ease; }
.line-list--links a:hover, .line-list--links a:focus-visible { color: var(--green-dark); }
.line-list--links a:hover .ico, .line-list--links a:focus-visible .ico { transform: translateX(4px); }
.line-list--links small { display: block; color: var(--muted); font-size: 15px; }
@media (max-width: 640px) {
  .line-list > li { font-size: 16px; }
  .line-list--center > li { font-size: 19px; }
}

/* ------------------------------------ 1. Three items with thin dividers - */
.line-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 56px; }
.line-cols > div { padding: 0 32px; border-left: 1px solid var(--hair); display: grid; align-content: start; gap: 12px; }
.line-cols > div:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.line-cols > div > * { margin: 0; }
.line-cols__title { font: 500 22px/1.25 var(--font-head); letter-spacing: -0.4px; }
.line-cols__title a { color: var(--ink); text-decoration: none; }
.line-cols__title a:hover, .line-cols__title a:focus-visible { color: var(--green-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.line-cols p { color: var(--muted); font-size: 17px; line-height: 1.55; }
@media (max-width: 900px) {
  .line-cols { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .line-cols > div, .line-cols > div:nth-child(3n+1) { padding: 24px 0; border-left: 0; border-top: 1px solid var(--hair); }
  .line-cols > div:first-child { padding-top: 0; border-top: 0; }
}

/* ------------------------------------------------ 2. Sand CTA panel ---- */
.panel { background: var(--sand); border-radius: var(--r-card); padding: 64px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; }
.panel > div { display: grid; align-content: start; gap: 20px; }
.panel > div > * { margin: 0; }
.panel__side { border-left: 1px solid var(--hair); padding-left: 64px; }
.panel__link { display: inline-flex; align-items: center; gap: 6px; font: 700 16px/1.3 var(--font-head); color: var(--navy); text-decoration: none; }
.panel__link .ico { width: 18px; height: 18px; stroke-width: 2; transition: transform 0.2s ease; }
.panel__link:hover, .panel__link:focus-visible { color: var(--green-dark); }
.panel__link:hover .ico { transform: translateX(3px); }
.panel--green { background: var(--green-dark); color: var(--white); --muted: var(--white); --hair: rgb(255 255 255 / 28%); }
.panel--green .panel__link { color: var(--white); }
.panel--green :where(.t-h2, .t-h3, .t-h4) { color: var(--white); }
@media (max-width: 1199px) { .panel { padding: 48px; gap: 48px; } .panel__side { padding-left: 48px; } }
@media (max-width: 900px) {
  .panel { grid-template-columns: minmax(0, 1fr); padding: 40px 32px; gap: 32px; }
  .panel__side { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); padding-top: 32px; }
}
@media (max-width: 640px) { .panel { padding: 32px 24px; } }

/* ------------------------------------------- 3. Split, 1/3 text 2/3 image */
.split2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 64px; align-items: center; }
.split2__body { display: grid; gap: 20px; }
.split2__body > * { margin: 0; }
.split2--rev .split2__body { order: 2; }
.split2 .media { aspect-ratio: 3 / 2; }
.split2 .t-h2 { font-size: 44px; letter-spacing: -1.6px; }
@media (max-width: 1199px) { .split2 .t-h2 { font-size: 40px; } }
@media (max-width: 640px) { .split2 .t-h2 { font-size: 32px; letter-spacing: -1.3px; } }
@media (max-width: 1199px) { .split2 { gap: 48px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } }
@media (max-width: 900px) { .split2 { grid-template-columns: minmax(0, 1fr); gap: 32px; } .split2--rev .split2__body { order: 0; } }

/* ------------------------------------------------------- Icon list ----- */
.icon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.icon-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.45; letter-spacing: -0.2px; }
.icon-list .ico { width: 22px; height: 22px; color: var(--green-dark); margin-top: 1px; }
.card--navy .icon-list .ico, .card--green .icon-list .ico { color: var(--white); }

/* ---------------------------------- 7. Feature list + success story ---- */
.feat-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.feat-list { display: grid; gap: 32px; }
.feat { display: grid; gap: 6px; }
.feat > * { margin: 0; }
.feat .ico { width: 28px; height: 28px; color: var(--green-dark); margin-bottom: 6px; }
.feat__title { font: 500 20px/1.3 var(--font-head); letter-spacing: -0.4px; }
.feat__text { color: var(--muted); font-size: 17px; line-height: 1.55; }
.story-photo { position: relative; border-radius: var(--r-card); overflow: hidden; min-height: 520px; background: var(--navy); color: var(--white); display: flex; flex-direction: column; justify-content: space-between; padding: var(--card-pad); }
.story-photo > img, .story-photo > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.story-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 45%) 0%, rgb(0 0 0 / 0%) 30%, rgb(0 0 0 / 0%) 50%, rgb(0 0 0 / 70%) 100%); pointer-events: none; }
.story-photo > :not(img, .ph) { position: relative; z-index: 1; margin: 0; }
.story-photo__label { font: 700 13px/1 var(--font-head); letter-spacing: 1.4px; text-transform: uppercase; }
.story-photo__title { font: 400 30px/1.2 var(--font-head); letter-spacing: -0.8px; max-width: 520px; }
.story-photo__title a { color: var(--white); text-decoration: none; }
.story-photo__title a:hover, .story-photo__title a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
@media (max-width: 900px) { .feat-story { grid-template-columns: minmax(0, 1fr); } .story-photo { min-height: 420px; } .story-photo__title { font-size: 26px; } }

/* ------------------------------------------------------ 8. Story cards -- */
.story-card { padding: 0; gap: 0; }
.story-card .media { border-radius: 0; aspect-ratio: 16 / 10; }
.story-card__body { padding: 28px var(--card-pad) var(--card-pad); display: grid; gap: 12px; align-content: start; }
.story-card__body > * { margin: 0; }
.chip { display: inline-flex; width: fit-content; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--sand-2); color: var(--ink); font: 500 13px/1.2 var(--font-body); letter-spacing: -0.1px; }
.chip--green { background: var(--green-tint); color: var(--green-dark); }

/* ------------------------------------------------- 9. Dark banner card -- */
.banner { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--navy); color: var(--white); min-height: 440px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.banner__body { position: relative; z-index: 2; padding: 64px; display: grid; align-content: space-between; justify-items: start; gap: 32px; }
.banner__body > div { display: grid; gap: 16px; }
.banner__body > div > * { margin: 0; }
.banner__media { position: absolute; inset: 0 0 0 42%; }
.banner__media img, .banner__media .ph { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.banner__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--navy) 0%, rgb(8 72 94 / 85%) 18%, rgb(8 72 94 / 0%) 55%); }
.banner--ink { background: #000; }
.banner--ink .banner__media::before { background: linear-gradient(90deg, #000 0%, rgb(0 0 0 / 85%) 18%, rgb(0 0 0 / 0%) 55%); }
@media (max-width: 900px) {
  .banner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .banner__body { padding: 40px 32px 0; }
  .banner__media { position: relative; inset: auto; aspect-ratio: 4 / 3; margin-top: 32px; }
  .banner__media::before { background: linear-gradient(180deg, var(--navy) 0%, rgb(8 72 94 / 0%) 45%); }
  .banner--ink .banner__media::before { background: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0%) 45%); }
}

/* -------------------------------------------- 10. Product-style cards --- */
.prod-card { gap: 16px; }
.prod-card .media, .prod-card .ph { aspect-ratio: 4 / 3; border-radius: var(--r-tile); min-height: 0; }
.prod-card .btn { width: fit-content; }
.prod-card .icon-list { padding-top: 8px; }

/* --------------------------------- 11. White panel with two image tiles - */
.tiles-panel { background: var(--white); border-radius: var(--r-card); padding: 64px; }
.tiles-panel__head { text-align: center; display: grid; gap: 12px; justify-items: center; margin-bottom: 48px; }
.tiles-panel__head > * { margin: 0; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.tile { display: grid; gap: 14px; align-content: start; }
.tile > * { margin: 0; }
.tile .media { aspect-ratio: 2 / 1.05; border-radius: var(--r-card); }
.tile .btn { width: fit-content; margin-top: 6px; }
@media (max-width: 900px) { .tiles-panel { padding: 40px 32px; } .tiles { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .tiles-panel { padding: 32px 24px; } }

/* ------------------------------------------------------- 12. FAQ v2 ---- */
.accordion--v2 { border-top: 1px solid var(--hair); }
.accordion--v2 .accordion__item { border-bottom: 1px solid var(--hair); }
.accordion--v2 .accordion__trigger { padding: 26px 0; font: 400 22px/1.3 var(--font-head); letter-spacing: -0.4px; color: var(--ink); gap: 24px; }
.accordion--v2 .accordion__trigger:hover, .accordion--v2 .accordion__trigger:focus-visible { color: var(--green-dark); }
.accordion--v2 .accordion__icon { width: 20px; height: 20px; transition: transform 0.25s ease; }
.accordion--v2 .accordion__icon::before, .accordion--v2 .accordion__icon::after { border-top: 2px solid currentColor; inset: calc(50% - 1px) 0 auto 0; transition: none; }
.accordion--v2 .accordion__icon::after { transform: rotate(90deg); }
.accordion--v2 .accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
.accordion--v2 .accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(90deg); }
.accordion--v2 .accordion__panel { padding: 0 0 28px; max-width: 780px; font-size: 18px; line-height: 1.6; letter-spacing: -0.2px; color: var(--muted); }
.accordion--v2 .accordion__panel p { margin: 0 0 14px; }
.accordion--v2 .accordion__panel p:last-child { margin: 0; }
.accordion--v2 .accordion__panel a { color: var(--navy); }
@media (max-width: 640px) {
  .accordion--v2 .accordion__trigger { font-size: 19px; padding: 20px 0; }
  .accordion--v2 .accordion__panel { font-size: 16px; }
}
/* Open FAQ, for blog posts: every answer visible. */
.faq-open { margin: 0; border-top: 1px solid var(--hair); }
.faq-open > div { border-bottom: 1px solid var(--hair); padding: 24px 0; display: grid; gap: 10px; }
.faq-open dt { font: 500 20px/1.35 var(--font-head); letter-spacing: -0.3px; }
.faq-open dd { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.6; }

/* ----------------------------------------- 13. Outlined grid of cells -- */
.grid-box { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--r-card); overflow: hidden; }
.grid-box--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-box > div { background: var(--sand); padding: 36px; min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.band:not(.band--sand) .grid-box > div { background: var(--white); }
.grid-box__head { display: grid; gap: 18px; justify-items: start; }
.grid-box__title { margin: 0; font: 500 20px/1.25 var(--font-head); letter-spacing: -0.4px; }
.grid-box__title a { color: var(--ink); text-decoration: none; }
.grid-box__title a:hover, .grid-box__title a:focus-visible { color: var(--green-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.grid-box p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
@media (max-width: 1199px) { .grid-box, .grid-box--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-box > div { min-height: 240px; padding: 32px; } }
@media (max-width: 640px) { .grid-box, .grid-box--3 { grid-template-columns: minmax(0, 1fr); } .grid-box > div { min-height: 0; padding: 28px 24px; } }

/* --------------------------------------- 14. Wide card with a graphic -- */
.wide-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; min-height: 460px; }
.wide-card__body { display: flex; flex-direction: column; gap: 14px; }
.wide-card__body > * { margin: 0; }
.wide-card__body .btn { margin-top: auto; width: fit-content; }
.orbit { position: relative; width: min(100%, 440px); aspect-ratio: 1; justify-self: end; align-self: center; }
.orbit__ring { position: absolute; border: 1px dashed var(--sand-3); border-radius: 50%; }
.orbit__ring--1 { inset: 0; }
.orbit__ring--2 { inset: 20%; }
.orbit__hub { position: absolute; inset: 37%; border-radius: 50%; background: var(--navy); color: var(--white); display: grid; place-items: center; align-content: center; gap: 2px; text-align: center; font: 700 13px/1.15 var(--font-head); }
.orbit__hub .ico { width: 22px; height: 22px; color: var(--green-accent); }
.orbit__node { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: var(--white); box-shadow: 0 2px 10px rgb(0 0 0 / 10%); font: 500 14px/1 var(--font-head); color: var(--ink); text-decoration: none; }
a.orbit__node:hover, a.orbit__node:focus-visible { background: var(--green-dark); color: var(--white); }
@media (max-width: 900px) { .wide-card { grid-template-columns: minmax(0, 1fr); } .orbit { justify-self: center; margin-top: 16px; } }
@media (max-width: 640px) { .orbit__node { font-size: 12px; padding: 6px 10px; } }

/* -------------------------------------------- 16. Testimonial cards ---- */
.tcard { min-height: 440px; gap: 24px; }
.tcard__logo { height: 72px; margin-left: -12px; width: auto; max-width: 200px; object-fit: contain; object-position: left center; }
.tcard__stars { color: var(--green-dark); letter-spacing: 3px; font-size: 18px; }
.tcard blockquote { margin: 0; font: 400 26px/1.35 var(--font-head); letter-spacing: -0.6px; }
.tcard blockquote p { margin: 0 0 12px; }
.tcard--serif blockquote { font: 400 30px/1.32 var(--serif); letter-spacing: -0.4px; }
.tcard__who { display: grid; gap: 2px; font-size: 16px; }
.tcard__who b { font-weight: 500; }
.tcard__who span { color: var(--muted); font-size: 14px; }
@media (max-width: 900px) { .tcard { min-height: 0; } .tcard blockquote { font-size: 22px; } .tcard--serif blockquote { font-size: 25px; } }

/* -------------------------------- 17. Dark visual cards, text beneath -- */
.viz-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.viz { display: grid; gap: 14px; align-content: start; }
.viz > * { margin: 0; }
.viz__screen { aspect-ratio: 4 / 3; border-radius: var(--r-card); background: var(--navy-deep); color: var(--white); padding: 28px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; font: 500 14px/1.3 var(--font-head); }
.viz__title { font: 500 22px/1.25 var(--font-head); letter-spacing: -0.4px; }
.viz__text { color: var(--muted); font-size: 17px; line-height: 1.5; }
.sched { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: auto; }
.sched span { display: grid; place-items: center; gap: 4px; padding: 12px 0; border-radius: 10px; background: rgb(255 255 255 / 8%); font-size: 12px; }
.sched span.on { background: var(--green-dark); }
.sched span.call { background: transparent; border: 1px dashed rgb(255 255 255 / 40%); }
.sched-key { display: flex; gap: 14px; font-size: 12px; color: rgb(255 255 255 / 75%); }
.proof { display: grid; gap: 8px; margin-top: auto; }
.proof__row { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; background: rgb(255 255 255 / 7%); }
.proof__thumb { aspect-ratio: 4 / 3; border-radius: 8px; background: linear-gradient(135deg, #5b7f8c, #2c4f5c); display: grid; place-items: center; }
.proof__thumb .ico { width: 18px; height: 18px; opacity: .8; }
.proof__bar { height: 8px; border-radius: 4px; background: rgb(255 255 255 / 25%); }
.proof__bar + .proof__bar { width: 60%; margin-top: 6px; background: rgb(255 255 255 / 14%); }
.proof__ok { color: var(--green-accent); }
.bill { margin-top: auto; background: var(--white); color: var(--ink); border-radius: 14px; padding: 18px; display: grid; gap: 10px; transform: rotate(-2deg); }
.bill__line { display: grid; grid-template-columns: 1fr 56px; gap: 12px; align-items: center; }
.bill__line i { height: 8px; border-radius: 4px; background: var(--sand-3); }
.bill__line.flag i { background: #f3c7c7; }
.bill__line .tag { justify-self: end; font: 700 10px/1 var(--font-head); padding: 4px 6px; border-radius: 6px; background: var(--green-tint); color: var(--green-dark); text-transform: uppercase; letter-spacing: .5px; }
.bill__line.flag .tag { background: #fde3e3; color: #a12020; }
@media (max-width: 1199px) { .viz__screen { padding: 22px; } }
@media (max-width: 900px) { .viz-row { grid-template-columns: minmax(0, 1fr); } .viz__screen { aspect-ratio: 16 / 10; } }

/* ------------------------------------------- 18. Statement (centered) -- */
.statement { text-align: center; display: grid; justify-items: center; gap: 32px; }
.statement > * { margin: 0; }
.statement .t-lede { max-width: 760px; }
.statement .line-list { width: min(100%, 880px); margin-top: 24px; }

/* ----------------------------------------- 19. Cards with bleed visuals - */
.bleed-card { min-height: 560px; }
.logo-tiles { margin: auto calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 0; padding-top: 24px; display: grid; grid-template-columns: repeat(3, 220px); gap: 12px; }
.logo-tiles span { aspect-ratio: 960 / 416; border-radius: var(--r-tile); background: var(--sand); display: grid; place-items: center; padding: 4px; }
.logo-tiles img { width: 100%; height: 100%; object-fit: contain; }
.bleed-photo { margin: auto calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 15%; padding-top: 24px; }
.bleed-photo .media { border-radius: var(--r-tile) 0 0 0; aspect-ratio: 4 / 3; }
@media (max-width: 1199px) { .logo-tiles { grid-template-columns: repeat(3, 170px); } }
@media (max-width: 900px) { .bleed-card { min-height: 0; } }
@media (max-width: 640px) { .logo-tiles { grid-template-columns: repeat(2, 150px); } .bleed-photo { margin-left: 0; } }

/* ------------------------------------------- 20. Stat cards ------------ */
.stat-card { min-height: 320px; justify-content: space-between; gap: 24px; }
.stat-card__num { font: 500 64px/1 var(--font-head); letter-spacing: -2.5px; }
.stat-card__label { font-size: 18px; line-height: 1.45; margin-top: 12px !important; }
.stat-card__foot { font-size: 14px; line-height: 1.45; color: var(--muted); }
.stat-card__foot b { color: inherit; font-weight: 700; }
.card--green.stat-card .stat-card__foot, .card--navy.stat-card .stat-card__foot { color: var(--white); }
.stat-row + .line-list { margin-top: 48px; }
@media (max-width: 1199px) { .stat-card__num { font-size: 56px; } }
@media (max-width: 900px) { .stat-card { min-height: 220px; } }
@media (max-width: 640px) { .stat-card__num { font-size: 48px; letter-spacing: -1.8px; } }

/* ------------------------------------- 21. Feature grid in one card ---- */
.fgrid-card { padding: 56px; gap: 0; }
.fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.fgrid__sub { grid-column: 1 / -1; margin: 24px 0 0; font: 500 26px/1.25 var(--font-head); letter-spacing: -0.6px; }
.fgrid .feat .ico { color: var(--ink); width: 26px; height: 26px; }
.fgrid .feat__title { font: 700 17px/1.35 var(--font-head); letter-spacing: -0.2px; }
.fgrid .feat__text { color: var(--ink); font-size: 16px; }
@media (max-width: 1199px) { .fgrid-card { padding: 40px; } .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fgrid-card { padding: 28px 24px; } .fgrid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* --------------------------------------------- 24. Numbered steps ------ */
.steps-card { padding: 48px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.steps li { display: grid; gap: 12px; align-content: start; }
.steps li > * { margin: 0; }
.steps__title { font: 400 26px/1.2 var(--font-head); letter-spacing: -0.6px; }
.steps__text { color: var(--ink); font-size: 17px; line-height: 1.55; }
@media (max-width: 900px) { .steps-card { padding: 32px; } .steps { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* --------------------------------------- 25. Category index, link rows -- */
.index-group { display: grid; grid-template-columns: 280px minmax(0, 1fr) 300px; gap: 48px; padding-bottom: 72px; }
.index-group:last-child { padding-bottom: 0; }
.index-group__name { margin: 0; font: 400 28px/1.2 var(--font-head); letter-spacing: -0.7px; }
.index-group__name a { color: var(--ink); text-decoration: none; }
.index-group__name a:hover, .index-group__name a:focus-visible { color: var(--green-dark); }
.index-group .line-list--links a { font-size: 18px; letter-spacing: -0.2px; }
.index-group__visual { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 1; }
@media (max-width: 1199px) { .index-group { grid-template-columns: 240px minmax(0, 1fr); } .index-group__visual { display: none; } }
@media (max-width: 900px) { .index-group { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-bottom: 48px; } .index-group__name { font-size: 24px; } }

/* -------------------------------------------- 26. Blog archive --------- */
.post-card { padding: 0; gap: 0; }
.post-card .media { border-radius: 0; aspect-ratio: 16 / 10; }
.post-card__body { padding: 24px 28px 32px; display: grid; gap: 10px; align-content: start; }
.post-card__body > * { margin: 0; }
.post-card__date { font-size: 14px; color: var(--muted); }
.post-card--big .post-card__body { padding: 32px 36px 40px; }
.post-card--big .card__title { font-size: 32px; letter-spacing: -1px; }
.archive-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 72px 0 32px; }
.archive-bar h2 { margin: 0; font: 500 22px/1.2 var(--font-head); letter-spacing: -0.4px; }
@media (max-width: 900px) { .post-card--big .card__title { font-size: 26px; } }

/* --------------------------------------------- 27. Blog post ----------- */
.post-head { display: grid; gap: 20px; max-width: 900px; }
.post-head > * { margin: 0; }
.post-head__back { display: inline-flex; align-items: center; gap: 4px; font: 700 14px/1 var(--font-head); color: var(--ink); text-decoration: none; width: fit-content; }
.post-head__back .ico { width: 16px; height: 16px; stroke-width: 2; }
.post-head__back:hover, .post-head__back:focus-visible { color: var(--green-dark); }
.post-head__meta { font-size: 14px; color: var(--muted); }
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 80px; align-items: start; margin-top: 48px; }
.post-layout > article > .media { margin-bottom: 48px; }
.post-aside { position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 24px; }
.toc { display: grid; gap: 4px; font-size: 15px; }
.toc p { margin: 0 0 8px; font: 700 14px/1.2 var(--font-head); }
.toc a { display: block; padding: 6px 0 6px 14px; border-left: 2px solid var(--hair); color: var(--muted); text-decoration: none; line-height: 1.35; }
.toc a:hover, .toc a:focus-visible { color: var(--ink); }
.toc a.is-active { border-left-color: var(--green-dark); color: var(--ink); font-weight: 500; }
.prose2 { max-width: 760px; font-size: 18px; line-height: 1.65; letter-spacing: -0.2px; }
.prose2 > * { margin: 0 0 20px; }
.prose2 h2 { font: 400 34px/1.2 var(--font-head); letter-spacing: -1px; margin: 56px 0 18px; }
.prose2 h3 { font: 500 22px/1.3 var(--font-head); letter-spacing: -0.4px; margin: 36px 0 12px; }
.prose2 ul { padding-left: 22px; }
.prose2 li { margin-bottom: 10px; }
.prose2 a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.prose2 a:hover { color: var(--green-dark); }
@media (max-width: 1199px) { .post-layout { grid-template-columns: minmax(0, 1fr) 240px; gap: 48px; } }
@media (max-width: 900px) { .post-layout { grid-template-columns: minmax(0, 1fr); } .post-aside { position: static; order: -1; } .toc { display: none; } .prose2 h2 { font-size: 28px; } .prose2 { font-size: 17px; } }

/* --------------------------------------------- Page hero v2 (inner) ---- */
.phero { padding: 96px 0 72px; }
.phero__grid { display: grid; gap: 24px; }
.phero__grid > * { margin: 0; }
.phero__title { font: 400 64px/1.06 var(--font-head); letter-spacing: -3px; color: var(--ink); max-width: 1000px; }
.phero .t-lede { max-width: 760px; }
.phero .btn-row { margin-top: 8px; }
.phero__media { margin-top: 56px; }
@media (max-width: 1199px) { .phero { padding: 80px 0 64px; } .phero__title { font-size: 52px; letter-spacing: -2.4px; } }
@media (max-width: 900px) { .phero { padding: 64px 0 48px; } .phero__title { font-size: 44px; letter-spacing: -2px; } .phero__media { margin-top: 40px; } }
@media (max-width: 640px) { .phero { padding: 48px 0 40px; } .phero__title { font-size: 36px; letter-spacing: -1.5px; } }

/* =========================================================== Forms v2 ===
   Every form on the site (Contact, Free Quote, Employment). Markup and
   classes are unchanged so the form script and Turnstile keep working.
   ======================================================================== */
.form .field { margin-bottom: 20px; }
.form .field label,
.form .field--check label { font: 500 15px/1.3 var(--font-head); letter-spacing: -0.1px; color: var(--ink); margin-bottom: 8px; }
.form .field label .req { color: var(--green-dark); }
.form .field input,
.form .field select,
.form .field textarea {
  min-height: 52px;
  padding: 14px 16px;
  font: 400 16px/22px var(--font-body);
  letter-spacing: -0.1px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgb(0 0 0 / 18%);
  border-radius: var(--r-field);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form .field textarea { min-height: 160px; }
.form .field input::placeholder,
.form .field textarea::placeholder { color: rgb(0 0 0 / 40%); }
.form .field input:hover,
.form .field select:hover,
.form .field textarea:hover { border-color: rgb(0 0 0 / 35%); }
.form .field input:focus,
.form .field select:focus,
.form .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgb(8 72 94 / 18%); }
.form .field.is-invalid input,
.form .field.is-invalid select,
.form .field.is-invalid textarea { border-color: #c62828; box-shadow: 0 0 0 3px rgb(198 40 40 / 12%); }
.form .field__error { font-size: 14px; }
.form .field-row { gap: 16px; }
.form .field__hint { font-size: 14px; color: var(--muted); margin: 0; }
.form .form__actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
.form .form__btn { background: var(--navy); color: var(--white); }
.form .form__btn:hover:not([disabled]) { background: var(--green-dark); }
.form .form__status { border-radius: var(--r-field); }
.form .form__section h2 { font: 400 26px/1.2 var(--font-head); letter-spacing: -0.6px; color: var(--ink); }
.form-rule { display: none; }
@media (max-width: 640px) { .form .form__actions { flex-direction: column-reverse; align-items: stretch; } .form .form__btn { width: 100%; } }

/* ======================================================= Contact v2 ==== */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.contact-form-card { padding: 48px; gap: 8px; }
.contact-form-card .form { max-width: none; margin: 0; }
.contact-form-card .t-h3 { margin-bottom: 4px; }
.contact-form-card > .muted { margin-bottom: 24px; }
.contact-side { display: grid; gap: 24px; }
.contact-side .card { gap: 18px; }
.contact-side .card__title--sm { margin-bottom: 4px; }
.contact-methods { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.contact-methods li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--hair); font-size: 17px; line-height: 1.45; }
.contact-methods .ico { color: var(--green-dark); width: 22px; height: 22px; margin-top: 1px; }
.contact-methods small { display: block; font-size: 14px; color: var(--muted); }
.contact-methods a, .contact-methods .linklike { color: var(--ink); text-decoration: none; font: inherit; padding: 0; background: none; border: 0; cursor: pointer; text-align: left; }
.contact-methods a:hover, .contact-methods a:focus-visible, .contact-methods .linklike:hover, .contact-methods .linklike:focus-visible { color: var(--green-dark); text-decoration: underline; text-underline-offset: 3px; }
.contact-side address { font-style: normal; }
.county-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.county-chips a { padding: 8px 14px; border-radius: 999px; background: var(--sand-2); color: var(--ink); text-decoration: none; font: 500 14px/1 var(--font-head); }
.county-chips a:hover, .county-chips a:focus-visible { background: var(--green-dark); color: var(--white); }
@media (max-width: 1199px) { .contact-form-card { padding: 40px; } }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .contact-form-card { padding: 28px 20px; } }

/* ================================================ Rolling numbers ==== */
.roll { --rh: 1.1em; display: inline-flex; align-items: flex-start; white-space: nowrap; }
.roll.is-ready > span { display: inline-block; height: var(--rh); line-height: var(--rh); overflow: hidden; }
.roll__strip { display: flex; flex-direction: column; transform: translateY(0); transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1); }
.roll__strip > span { height: var(--rh); line-height: var(--rh); display: block; text-align: center; }
.roll.is-in .roll__strip { transform: translateY(calc(var(--to) * var(--rh) * -1)); }
.roll__ch > span { display: inline-block; transform: translateY(105%); transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.roll.is-in .roll__ch > span { transform: none; }

/* ======================================= Stats in thin-line columns === */
.stat-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-cols > div { padding: 8px 40px; border-left: 1px solid var(--hair); display: grid; align-content: start; gap: 16px; }
.stat-cols > div:first-child { padding-left: 0; border-left: 0; }
.stat-cols > div > * { margin: 0; }
.stat-big { font: 200 120px/1 var(--font-head); letter-spacing: -5px; color: var(--ink); }
.stat-big--100 { font-weight: 100; }
.stat-big--300 { font-weight: 300; letter-spacing: -4px; }
.stat-cols__label { font: 500 18px/1.35 var(--font-head); letter-spacing: -0.3px; }
.stat-cols__text { color: var(--muted); font-size: 16px; line-height: 1.5; }
.band--navy .stat-big, .band--green .stat-big { color: var(--white); }
.band--navy .stat-cols__label, .band--green .stat-cols__label { color: var(--white); }
@media (max-width: 1199px) { .stat-big { font-size: 96px; letter-spacing: -4px; } .stat-cols > div { padding: 8px 28px; } }
@media (max-width: 900px) {
  .stat-cols { grid-template-columns: minmax(0, 1fr); }
  .stat-cols > div { padding: 28px 0; border-left: 0; border-top: 1px solid var(--hair); }
  .stat-cols > div:first-child { padding-top: 0; border-top: 0; }
  .stat-big { font-size: 80px; letter-spacing: -3px; }
}
@media (max-width: 640px) { .stat-big { font-size: 64px; letter-spacing: -2.5px; } }

/* ================================================== Result bars ====== */
/* The Results page rows, back to the earlier full bar, now rounded. */
.result-bars { display: grid; gap: 16px; }
.result-bar { border-radius: var(--r-card); padding: 56px 64px; background: var(--navy); color: var(--white); display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.result-bar--split { grid-template-columns: minmax(0, 1fr) 260px; }
.result-bar--green { background: var(--green-dark); }
.result-bar__body { display: grid; gap: 14px; justify-items: start; }
.result-bar__body > * { margin: 0; }
.result-bar__meta { font: 700 13px/1.35 var(--font-head); letter-spacing: 1.2px; text-transform: uppercase; color: var(--white); }
.result-bar__title { font: 400 34px/1.2 var(--font-head); letter-spacing: -1px; color: var(--white); max-width: 860px; }
.result-bar__title strong { font-weight: 500; color: var(--green-accent); }
.result-bar--green .result-bar__title strong { color: var(--white); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.result-bar__summary { font-size: 17px; line-height: 1.55; color: var(--white); max-width: 760px; }
.result-bar__note { font-size: 13px; line-height: 1.5; color: var(--white); max-width: 760px; }
.result-bar .btn { margin-top: 6px; }
.result-bar__stat { border-left: 1px solid rgb(255 255 255 / 25%); padding-left: 48px; align-self: stretch; display: grid; align-content: center; gap: 8px; }
.result-bar__stat .stat-big { color: var(--white); font-size: 96px; letter-spacing: -4px; }
.result-bar__stat > span { font-size: 14px; color: var(--white); }
.result-bars--alt .result-bar:nth-child(even) { background: var(--green-dark); }
.result-bars--alt .result-bar:nth-child(even) .result-bar__title strong { color: var(--white); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 1199px) { .result-bar { padding: 48px; } .result-bar__title { font-size: 30px; } .result-bar__stat .stat-big { font-size: 80px; } }
@media (max-width: 900px) {
  .result-bar, .result-bar--split { grid-template-columns: minmax(0, 1fr); padding: 40px 32px; gap: 28px; }
  .result-bar__stat { border-left: 0; padding-left: 0; border-bottom: 1px solid rgb(255 255 255 / 25%); padding-bottom: 24px; order: -1; }
  .result-bar__title { font-size: 26px; letter-spacing: -0.6px; }
}
@media (max-width: 640px) { .result-bar, .result-bar--split { padding: 32px 24px; } .result-bar__stat .stat-big { font-size: 64px; } }

/* ================================================== Content bands ===== */
/* .flow: markdown sections on every page, set in the v2 type scale.
   Text keeps a reading measure; grids, lists and FAQs run wider. */
.flow > * { max-width: var(--measure); margin-top: 0; margin-bottom: 20px; }
.flow > :last-child { margin-bottom: 0; }
.flow > :where(.line-cols, .line-list--cols, .flyer-grid, .cs-table-wrap, .result-bars, .card-row, .stat-cols, .grid-box) { max-width: none; }
.flow > .accordion { max-width: 940px; margin-top: 8px; }
.flow > .line-cols { margin: 48px 0; }
.flow h2 { font: 400 56px/1.08 var(--font-head); letter-spacing: -2.2px; color: var(--ink); margin: 0 0 28px; max-width: 900px; }
.flow > h2:not(:first-child) { margin-top: 80px; }
.flow h3 { font: 400 30px/1.2 var(--font-head); letter-spacing: -0.9px; color: var(--ink); margin: 48px 0 14px; }
.flow > h3:first-child { margin-top: 0; }
.flow h4 { font: 500 21px/1.3 var(--font-head); letter-spacing: -0.4px; color: var(--ink); margin: 36px 0 10px; }
.flow p, .flow li { font-size: 18px; line-height: 1.6; letter-spacing: -0.2px; }
.flow > p { color: var(--ink); }
.flow ul:not([class]), .flow ol:not([class]) { padding-left: 1.3em; }
.flow ul:not([class]) li, .flow ol:not([class]) li { margin-bottom: 10px; }
.flow strong { font-weight: 700; }
.flow p a, .flow li a:not(.btn), .flow address a, .flow .accordion__panel a { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.flow p a:hover, .flow li a:not(.btn):hover, .flow address a:hover, .flow .accordion__panel a:hover { color: var(--green-dark); }
.flow .line-cols__title a, .flow .line-list--links a { text-decoration: none; }
.flow > .btn-row { margin-top: 36px; }
.flow figure { margin: 40px 0; max-width: 900px; }
.flow figure img { border-radius: var(--r-img); width: auto; max-height: 560px; }
.flow .callout { background: var(--sand); border: 0; border-radius: var(--r-tile); padding: 24px 28px; margin: 32px 0; }
.band--sand .flow .callout, .band--sand.flow .callout { background: var(--white); }
.flow .flyer-grid img { border-radius: var(--r-tile); }
.flow .quote-card { max-width: 900px; margin: 40px 0; padding: 40px; border-radius: var(--r-card); background: var(--sand); color: var(--ink); }
.band--sand .quote-card { background: var(--white); }
.flow .quote-card blockquote { font: 400 26px/1.35 var(--font-head); letter-spacing: -0.6px; font-style: normal; }
.flow .quote-card blockquote p { font: inherit; letter-spacing: inherit; margin: 0 0 12px; }
.flow .quote-card .testimonial__cite { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--muted); margin-top: 16px; }
.flow .quote-card .stars { color: var(--green-dark); letter-spacing: 2px; }
@media (max-width: 1199px) { .flow h2 { font-size: 48px; letter-spacing: -1.9px; } .flow h3 { font-size: 28px; } }
@media (max-width: 900px) {
  .flow h2 { font-size: 40px; letter-spacing: -1.6px; } .flow > h2:not(:first-child) { margin-top: 56px; }
  .flow h3 { font-size: 26px; } .flow p, .flow li { font-size: 17px; }
  .flow .quote-card { padding: 32px; } .flow .quote-card blockquote { font-size: 22px; }
}
@media (max-width: 640px) { .flow h2 { font-size: 32px; letter-spacing: -1.3px; } .flow h3 { font-size: 24px; } .flow p, .flow li { font-size: 16px; } .flow .quote-card { padding: 24px; } }

.line-list--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; border-top: 0; }
.line-list--cols > li:nth-child(-n+2) { border-top: 1px solid var(--hair); }
@media (max-width: 900px) { .line-list--cols { grid-template-columns: minmax(0, 1fr); } .line-list--cols > li:nth-child(2) { border-top: 0; } }

/* Hero buttons: the home hero's green and outline everywhere. */
.phero .btn--primary { background: var(--green-dark); color: var(--white); }

/* ===================================================== Home + Results === */
.split-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 64px; align-items: start; }
.split-list__head { display: grid; gap: 12px; }
.split-list__head > * { margin: 0; }
@media (max-width: 900px) { .split-list { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.split2--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .split2--even { grid-template-columns: minmax(0, 1fr); } }
.split2__body .t-body { color: var(--muted); }
.stat-card__end { display: grid; gap: 16px; justify-items: start; }
.stat-card__end > * { margin: 0; }
.stat-card .btn--light { color: var(--navy); }
.banner__text { color: var(--white); font-size: 17px; line-height: 1.55; max-width: 520px; }
.banner .t-h2 { max-width: 560px; }
.tcard blockquote p { margin: 0 0 12px; }
.tcard blockquote p:last-child { margin: 0; }
.card-row .tcard blockquote { font-size: 21px; line-height: 1.4; letter-spacing: -0.3px; }
@media (min-width: 901px) and (max-width: 1199px) { .banner__media { inset: 0 0 0 50%; } }

/* ============================================ Home round 2 (2026-10-04) */
/* Dark backgrounds: every word is solid white, never see-through. */
:where(.on-dark, .band--navy, .band--green, .card--navy, .card--green, .panel--green, .result-bar, .banner, .tq--navy) :where(p, li, span, small, dd, dt, figcaption, blockquote, .t-lede, .muted, .card__text) { color: var(--white); }

/* Guarantees, contained: sand panel with rounded corners. */
.g-panel { background: var(--sand); border-radius: var(--r-card); padding: 64px; }
@media (max-width: 1199px) { .g-panel { padding: 48px; } }
@media (max-width: 900px) { .g-panel { padding: 40px 32px; } }
@media (max-width: 640px) { .g-panel { padding: 32px 24px; } }
.line-list--tight > li { padding: 10px 0; }
.line-list--center.line-list--tight > li { padding: 12px 0; }
/* The old solid checkmark (Font Awesome fa-check from the live site). */
.line-list--oldcheck > li { align-items: center; }
.line-list--oldcheck > li::before { content: ""; flex: none; width: 20px; height: 20px; background: var(--green); -webkit-mask: var(--check-icon) center / 20px 20px no-repeat; mask: var(--check-icon) center / 20px 20px no-repeat; }
.line-list--oldcheck > li { font-weight: 700; font-family: var(--font-head); font-size: 18px; }

/* Text 1/3, image 2/3; the image holds still while long text scrolls. */
.split2--sticky { align-items: start; }
.split2--sticky .media { position: sticky; top: calc(var(--header-h) + 32px); }
@media (max-width: 900px) { .split2--sticky .media { position: static; } }

/* Single testimonials between sections: contained (navy, sand) or full width (green, navy). */
.tq { margin: 0; display: grid; gap: 24px; justify-items: start; }
.tq blockquote { margin: 0; font: 400 22px/1.45 var(--font-head); letter-spacing: -0.3px; max-width: 900px; }
.tq blockquote p { margin: 0 0 12px; } .tq blockquote p:last-child { margin: 0; }
.tq--long blockquote { font-size: 19px; line-height: 1.55; letter-spacing: -0.2px; }
.tq__stars { color: var(--green-dark); font-size: 20px; letter-spacing: 4px; }
.tq figcaption { font: 500 18px/1.3 var(--font-head); }
.tq--panel { border-radius: var(--r-card); padding: 56px 64px; }
.tq--navy { background: var(--navy); color: var(--white); }
.tq--sand { background: var(--sand); color: var(--ink); }
.tq--navy .tq__stars, .band--green .tq__stars, .band--navy .tq__stars { color: var(--white); }
.tq--serif blockquote { font-family: var(--serif); letter-spacing: -0.3px; }
@media (max-width: 1199px) { .tq--panel { padding: 56px; } }
@media (max-width: 900px) { .tq--panel { padding: 40px 32px; } .tq blockquote { font-size: 20px; } .tq--long blockquote { font-size: 18px; } }
@media (max-width: 640px) { .tq--panel { padding: 32px 24px; } .tq blockquote { font-size: 18px; } .tq--long blockquote { font-size: 17px; } }

/* Nav dropdown guarantee (2026-10-04): bigger shield, copy column only as
   wide as "Green Glove Heroes" so "Difference:" drops to the next line. */
.dd--mega .dd-guarantee { grid-template-columns: max-content minmax(0, 300px); gap: 28px; }
.dd--mega .dd-guarantee__copy { width: min-content; }
.dd--mega .dd-guarantee__name { white-space: nowrap; }
.dd--mega .dd__shield { max-width: 300px; width: 100%; }

/* ======================================================= Case study v2 = */
.cs2-meta { font: 700 13px/1.35 var(--font-head); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink); margin: 0; }
.cs2-statbar { background: var(--navy); color: var(--white); border-radius: var(--r-card); padding: 56px 48px; margin-bottom: 96px; }
.cs2-statbar .stat-cols > div { border-left-color: rgb(255 255 255 / 25%); }
.cs2-statbar .stat-big, .cs2-statbar .stat-cols__label { color: var(--white); }
.cs2-statbar .stat-big { font-size: 80px; letter-spacing: -3px; }
.stat-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-cols--4 > div { padding: 8px 28px; }
.cs2-lede { font: 400 24px/1.45 var(--font-head) !important; letter-spacing: -0.4px !important; color: var(--ink); max-width: 900px; }
.cs2-results { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.cs2-callouts { gap: 32px; }
.cs2-callouts > div > * { margin: 0; }
.cs2-callouts .stat-card__label { margin-top: 8px !important; }
.cs2-services { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 48px; align-items: start; }
.cs2-services > h2 { margin: 0; }
@media (max-width: 1199px) {
  .stat-cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .stat-cols--4 > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .cs2-statbar .stat-big { font-size: 64px; }
}
@media (max-width: 900px) {
  .cs2-statbar { padding: 40px 32px; margin-bottom: 64px; }
  .stat-cols--4 { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .stat-cols--4 > div, .stat-cols--4 > div:nth-child(3) { padding: 24px 0; border-left: 0; border-top: 1px solid rgb(255 255 255 / 25%); }
  .stat-cols--4 > div:first-child { padding-top: 0; border-top: 0; }
  .cs2-results, .cs2-services { grid-template-columns: minmax(0, 1fr); }
  .cs2-lede { font-size: 20px !important; }
}
@media (max-width: 640px) { .cs2-statbar { padding: 32px 24px; } .cs2-statbar .stat-big { font-size: 56px; } }
.statement .t-small { max-width: 760px; color: var(--muted); }

/* Tables (case studies): rounded, sand header, thin rows. */
.flow .cs-table-wrap { border-radius: var(--r-tile); overflow-x: auto; border: 1px solid var(--hair); margin: 32px 0; max-width: 900px; }
.flow .cs-table { width: 100%; border-collapse: collapse; font-size: 17px; }
.flow .cs-table th, .flow .cs-table td { padding: 16px 20px; text-align: left; border-top: 1px solid var(--hair); background: var(--white); color: var(--ink); }
.flow .cs-table thead th { background: var(--sand); border-top: 0; font: 700 14px/1.3 var(--font-head); letter-spacing: 0.4px; text-transform: uppercase; }
.flow .cs-table tbody th { font-weight: 500; }

/* ========================================================== FAQ page v2 = */
.faq2 { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
.faq2__toc { position: sticky; top: calc(var(--header-h) + 32px); }
.faq2__group + .faq2__group { margin-top: 72px; }
.faq2__group h2 { font: 400 34px/1.2 var(--font-head); letter-spacing: -1px; color: var(--ink); margin: 0 0 16px; scroll-margin-top: calc(var(--header-h) + 24px); }
.faq2__group .accordion { max-width: none; }
@media (max-width: 900px) { .faq2 { grid-template-columns: minmax(0, 1fr); gap: 32px; } .faq2__toc { position: static; } .faq2__group h2 { font-size: 28px; } }

/* ========================================================= Site map v2 = */
.sitemap2 { list-style: none; padding: 0; margin: 0; columns: 3 300px; column-gap: 48px; }
.sitemap2 > li { break-inside: avoid; margin: 0 0 40px; font: 500 20px/1.3 var(--font-head); letter-spacing: -0.3px; }
.sitemap2 a { color: var(--ink); text-decoration: none; }
.sitemap2 a:hover, .sitemap2 a:focus-visible { color: var(--green-dark); text-decoration: underline; text-underline-offset: 3px; }
.sitemap2 ul { list-style: none; padding: 0; margin: 12px 0 0; border-top: 1px solid var(--hair); }
.sitemap2 ul li { font: 400 16px/1.4 var(--font-body); padding: 8px 0; margin: 0; border-bottom: 1px solid var(--hair); }
.sitemap2 ul ul { border-top: 0; margin: 6px 0 0 16px; }
.sitemap2 ul ul li { border-bottom: 0; padding: 4px 0; font-size: 15px; color: var(--muted); }
.cs2-statbar .stat-big--word { font-size: 44px; letter-spacing: -1.4px; font-weight: 300; line-height: 80px; }
@media (max-width: 1199px) { .cs2-statbar .stat-big--word { font-size: 38px; line-height: 64px; } }
@media (max-width: 640px) { .cs2-statbar .stat-big--word { font-size: 34px; line-height: 1.2; } }

/* =========================================== Forms pages + legal (v2) = */
.form-card--solo { max-width: 860px; }
.form-card--solo .form { max-width: none; margin: 0; }
.mini-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.mini-steps li { display: grid; gap: 6px; font-size: 16px; line-height: 1.5; }
.mini-steps__title { font-weight: 700; }
.flow.legal { max-width: none; }
.legal__updated { color: var(--muted); font-size: 15px !important; }
.phero--404 { padding-block: 140px; }
@media (max-width: 900px) { .phero--404 { padding-block: 80px; } }
.sitemap-tree.sitemap2 > li > a { color: var(--ink); font-weight: 500; }
.flow.legal h2 { font-size: 34px; letter-spacing: -1px; margin-top: 56px; }
.flow.legal h3 { font-size: 22px; letter-spacing: -0.4px; font-weight: 500; }
@media (max-width: 640px) { .flow.legal h2 { font-size: 28px; } }

/* ================================= Gray variance (2026-10-04) ======== */
/* Soft buttons on a gray surface turn white so they stay visible; inside a
   white card they go back to the olive pill. */
:is(.band--sand, .panel, .g-panel, .tq--sand, .card--sand) .btn--soft { background: var(--white); }
:is(.band--sand, .panel, .g-panel, .tq--sand, .card--sand) .btn--soft:hover { background: var(--sand-3); }
:is(.band--sand, .panel, .g-panel, .tq--sand) .card:not(.card--sand) .btn--soft { background: var(--sand-2); }
/* Two gray areas in a row: the second takes the olive tone, a full sand
   band after another sand band takes the lighter tone. */
:is(.band--sand, section:has(> .wrap > :is(.g-panel, .tq--sand, .panel))) + section:has(> .wrap > :is(.g-panel, .tq--sand, .panel)) > .wrap > :is(.g-panel, .tq--sand, .panel) { background: var(--sand-olive); }
.band--sand + .band--sand { background: var(--sand-light); }

/* =========================================== Page layouts (2026-10-04) = */
/* Inner hero B: the home hero layout with a long answer block. */
.hero2--inner .hero2__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; }
.hero2--inner .phero__title { font-size: 60px; letter-spacing: -2.8px; }
.hero2--inner .hero2__side .t-lede { font-size: 18px; line-height: 1.55; color: var(--ink); }
.hero2--inner .hero2__media .media { aspect-ratio: 2 / 1; }
@media (max-width: 1199px) { .hero2--inner .phero__title { font-size: 48px; letter-spacing: -2px; } }
@media (max-width: 900px) { .hero2--inner .hero2__grid { grid-template-columns: minmax(0, 1fr); } .hero2--inner .phero__title { font-size: 40px; letter-spacing: -1.6px; } }
@media (max-width: 640px) { .hero2--inner .phero__title { font-size: 34px; letter-spacing: -1.3px; } .hero2--inner .hero2__media .media { aspect-ratio: 4 / 3; } }
.phero__media .ph, .hero2__media .ph { min-height: 0; }

/* side: heading in the left third (stays put), text in the right two thirds. */
.side2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 64px; align-items: start; }
.side2__h { position: sticky; top: calc(var(--header-h) + 32px); margin: 0; font: 400 44px/1.1 var(--font-head); letter-spacing: -1.6px; color: var(--ink); }
.side2 .flow > * { max-width: 760px; }
@media (max-width: 1199px) { .side2__h { font-size: 38px; } }
@media (max-width: 900px) { .side2 { grid-template-columns: minmax(0, 1fr); gap: 24px; } .side2__h { position: static; font-size: 32px; letter-spacing: -1.2px; } }

/* Number callout: a figure that is already in the copy, set large and thin. */
.numcall { display: grid; gap: 6px; padding-bottom: 24px; margin-bottom: 28px !important; border-bottom: 1px solid var(--hair); }
.numcall > * { margin: 0 !important; }
.numcall .stat-big { font-size: 96px; letter-spacing: -4px; color: var(--green-dark); }
.numcall__label { font: 500 18px/1.35 var(--font-head) !important; }
@media (max-width: 900px) { .numcall .stat-big { font-size: 72px; letter-spacing: -3px; } }

/* screen: text beside a drawn screen. */
.split-viz { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; align-items: center; }
@media (max-width: 900px) { .split-viz { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* features: Title Case list as an icon grid in one white card. */
.features2 .feat { gap: 10px; }
.features2 .feat__title { font: 500 18px/1.35 var(--font-head); letter-spacing: -0.3px; }
.features2__after { margin-top: 32px; }
.band:not(.band--sand) .features2 { background: var(--sand); }

/* compare: two options side by side. */
.compare2 { margin-top: 40px; }
.compare2__card .flow > * { max-width: none; }
.compare2__card .flow p { font-size: 17px; }
.band:not(.band--sand) .compare2__card { background: var(--sand); }

/* proof: the proof paragraph large, the quote in a gray box beside it. */
.proof2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.proof2__lede { font: 400 26px/1.4 var(--font-head) !important; letter-spacing: -0.5px !important; }
.proof2__lede strong { color: var(--green-dark); font-weight: 500; }
.band--sand .proof2 .tq--sand { background: var(--white); }
@media (max-width: 900px) { .proof2 { grid-template-columns: minmax(0, 1fr); gap: 32px; } .proof2__lede { font-size: 21px !important; } }
/* Text and image split, image on the left (2/3), text on the right (1/3). */
.split2--rev { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 1199px) { .split2--rev { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
@media (max-width: 900px) { .split2--rev { grid-template-columns: minmax(0, 1fr); } }
.proof2--solo { grid-template-columns: minmax(0, 1fr); }
.proof2--solo .flow > * { max-width: 900px; }
.split2__flow > * { max-width: none; }
.split2__flow p, .split2__flow li { font-size: 17px; color: var(--muted); }
.split2__flow strong { color: var(--ink); }
/* Grouped sections (hub pages): each H2 + paragraph is one outlined cell. */
.grid-box--cells > div { min-height: 0; justify-content: flex-start; gap: 20px; }
.grid-box--cells .grid-box__title { font-size: 22px; }
.grid-box__body > * { max-width: none; }
.grid-box__body p { font-size: 16px; color: var(--muted); }
.band--sand .grid-box--cells > div { background: var(--white); }
.grid-box--cells:has(> div:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ================================================ Client portal login = */
.login-dd { position: relative; display: inline-flex; }
.login-panel { position: absolute; top: calc(100% + 14px); right: 0; width: 380px; background: var(--white); border-radius: 20px;
  box-shadow: 0 24px 60px rgb(8 72 94 / 20%), 0 2px 8px rgb(0 0 0 / 6%); padding: 24px; z-index: 60; text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; }
.login-panel::before { content: ""; position: absolute; top: -14px; right: 0; left: 0; height: 14px; }
.login-dd.is-open .login-panel { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.login-panel__head { display: flex; gap: 14px; align-items: center; margin-bottom: 20px; }
.login-panel__title { margin: 0; font: 500 19px/1.25 var(--font-head); letter-spacing: -0.3px; color: var(--ink); }
.login-panel__sub { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.login-form { display: grid; gap: 8px; }
.login-form__label { font: 500 14px/1.3 var(--font-head); color: var(--ink); }
.login-form__input { width: 100%; min-height: 48px; padding: 12px 14px; font: 400 16px/22px var(--font-body); color: var(--ink);
  border: 1px solid rgb(0 0 0 / 18%); border-radius: var(--r-field); background: var(--white); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.login-form__input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgb(8 72 94 / 18%); }
.has-error .login-form__input { border-color: #c62828; }
.login-form__error { margin: 0; font-size: 13px; color: #c62828; min-height: 0; }
.login-form__error:empty { display: none; }
.login-form__btn { width: 100%; margin-top: 6px; justify-content: center; }
.login-form__btn.is-sending span::after { content: "\2026"; }
.login-form__btn.is-sending { opacity: 0.75; }
.login-panel__perks { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--hair); display: grid; gap: 10px; }
.login-panel__perks li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--ink); margin: 0; }
.login-panel__perks .ico { width: 18px; height: 18px; color: var(--green-dark); }
.login-done { display: none; text-align: left; }
.login-dd.is-sent .login-form { display: none; }
.login-dd.is-sent .login-done { display: grid; gap: 6px; justify-items: start; }
.login-done__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--green-tint); color: var(--green-dark); display: grid; place-items: center; margin-bottom: 8px; animation: login-pop 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.login-done__icon .ico { width: 28px; height: 28px; }
.login-done__again { margin-top: 10px; padding: 0; background: none; border: 0; font: 500 14px/1.3 var(--font-head); color: var(--navy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.login-done__again:hover { color: var(--green-dark); }
@keyframes login-pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.login-panel { font-weight: 400; letter-spacing: normal; white-space: normal; }
.login-panel__sub, .login-panel__perks li { font-family: var(--font-body); font-weight: 400; }

/* Page widths (2026-10-09), measured on mollie.com and used site-wide:
   nav, text, cards and sections share one content width, 1120px, or 1320px
   from a 1480px window up. Hero images run 40px wider on each side: the
   window less 40px a side, up to 1400px. Side gutter is 40px from 901px up. */
:root { --content-max: 1120px; --wrap: calc(1120px + (var(--gutter) * 2)); }
@media (min-width: 901px) { :root { --gutter: 40px; } }
@media (min-width: 1480px) { :root { --content-max: 1320px; --wrap: calc(1320px + (var(--gutter) * 2)); } }
@media (min-width: 901px) {
  .wrap.wrap--media { max-width: 1480px; padding-inline: 40px; }
}
.phero .phero__media { margin-top: 56px; }
@media (max-width: 900px) { .phero .phero__media { margin-top: 40px; } }
/* Hero text lines up with the nav (Mollie): the old 40px inset is gone now
   that the image is the wider element. */
.hero2 .wrap.hero2__grid { padding-inline: var(--gutter); }
/* Up-right arrow in the hero rotator ("↗ property value"), drawn at cap height. */
.rot-arrow { display: inline-block; width: 0.6em; height: 0.6em; vertical-align: 0.02em; color: var(--green-dark); overflow: visible; }

/* Home hero on tablets (2026-10-09): below 1200px the text stacks in one
   column, so the headline can stay large and the side copy sits under it
   with the buttons in a row. Sizes are fixed per step and sized so the
   longest rotating phrase still fits on one line. */
@media (max-width: 1199px) {
  .hero2:not(.hero2--inner) .hero2__grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; align-items: start; }
  .hero2:not(.hero2--inner) .hero2__side { max-width: 640px; }
  .hero2:not(.hero2--inner) .hero2__side .btn-row { flex-direction: row; flex-wrap: wrap; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .hero2:not(.hero2--inner) .hero2__display { font-size: 76px; letter-spacing: -5.2px; }
}
@media (min-width: 768px) and (max-width: 900px) {
  .hero2:not(.hero2--inner) .hero2__display { font-size: 68px; letter-spacing: -4.6px; }
}
@media (min-width: 641px) and (max-width: 767px) {
  .hero2:not(.hero2--inner) .hero2__display { font-size: 64px; letter-spacing: -4.4px; }
}
@media (max-width: 640px) {
  .hero2:not(.hero2--inner) .hero2__display { font-size: 38px; letter-spacing: -2.6px; }
}

/* ============================== Home: logo strip + "Only GGH Delivers" = */
/* The logo strip is as wide as the hero image, with the same gap above and
   below it as between the hero text and the image. */
.hero2:has(+ .logo-strip-band) { padding-bottom: 0; }
.logo-strip-band { padding-block: 64px; }
@media (max-width: 1199px) { .logo-strip-band { padding-block: 56px; } }
@media (max-width: 900px) { .logo-strip-band { padding-block: 48px; } }
.logo-strip-band + .band.delivers { padding-top: 0; }

/* Mollie's "Ask us anything" section, made ours: heading, one line of what
   we deliver, then the statistics with a thin line on the left of each. */
.delivers__head { display: grid; gap: 14px; max-width: 980px; }
.delivers__head > * { margin: 0; }
.delivers__list { list-style: none; padding: 0; font-size: 18px; line-height: 1.6; letter-spacing: -0.3px; color: var(--muted); }
.delivers__list li { display: inline; margin: 0; }
.delivers__list li + li::before { content: "|"; margin: 0 0.7em; color: rgb(0 0 0 / 22%); }
.stat-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 72px; }
.stat-line > div { border-left: 1px solid var(--hair); padding-left: 20px; display: grid; gap: 8px; align-content: start; }
.stat-line > div > * { margin: 0; }
.stat-line__num { font: 300 60px/1 var(--font-head); letter-spacing: -2.4px; color: var(--ink); }
.stat-line__label { font-size: 14px; line-height: 1.4; letter-spacing: -0.1px; color: var(--muted); }
@media (max-width: 900px) { .stat-line { margin-top: 56px; } .delivers__list { font-size: 17px; } }
@media (max-width: 640px) {
  .stat-line { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 40px; }
  .stat-line__num { font-size: 52px; letter-spacing: -2px; }
}

/* Services link bar (Mollie's product bar): one outlined box, thin lines,
   icon + name per cell. Hover is on the link text only. */
.svc-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 72px;
  background: var(--hair); border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; }
.svc-bar a { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 14px 22px; background: var(--white);
  font: 400 16px/1.3 var(--font-head); letter-spacing: -0.16px; color: var(--ink); text-decoration: none; transition: color 0.2s ease; }
.svc-bar a .ico { width: 18px; height: 18px; color: rgb(0 0 0 / 55%); transition: color 0.2s ease; }
.svc-bar a:hover, .svc-bar a:focus-visible { color: var(--green-dark); }
.svc-bar a:hover .ico, .svc-bar a:focus-visible .ico { color: var(--green-dark); }
@media (max-width: 1199px) { .svc-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .svc-bar { margin-top: 56px; } }
@media (max-width: 640px) { .svc-bar { grid-template-columns: minmax(0, 1fr); margin-top: 40px; } }

/* Delivers section, round 2 (2026-10-09): heading and list centered (Ethan's
   call, like Mollie); the statistics sit in a centered box with their
   content left aligned; services bar hover is Mollie's soft fill. */
.delivers__head { margin-inline: auto; text-align: center; justify-items: center; }
.delivers .delivers__head .t-h2 { font-size: 56px; letter-spacing: -1.12px; line-height: 1.1; }
@media (max-width: 900px) { .delivers .delivers__head .t-h2 { font-size: 40px; letter-spacing: -0.8px; } }
@media (max-width: 640px) { .delivers .delivers__head .t-h2 { font-size: 32px; letter-spacing: -0.6px; } }
.stat-line { max-width: 920px; margin-inline: auto; text-align: left; }
.svc-bar a, .svc-bar a .ico { transition: background-color 0.2s ease, color 0.2s ease; }
.svc-bar a:hover, .svc-bar a:focus-visible { background: #f9f7f6; color: var(--ink); } /* Mollie: rgba(247,244,242,.7) over white */
.svc-bar a:hover .ico, .svc-bar a:focus-visible .ico { color: rgb(0 0 0 / 55%); }
.svc-bar { background: var(--hair); }

/* Services bar with descriptions (2026-10-09): "What we handle" sits above
   it with a "View all services" link. Each service's one-line description is
   in the page (read by search and AI crawlers) and shows on hover or keyboard
   focus as a small card under the cell; on phones it shows under the name. */
.svc-bar-head { margin: 72px 0 20px; align-items: center; }
.svc-bar-head .t-h3 { margin: 0; }
.svc-bar-head + .svc-bar { margin-top: 0; }
.svc-bar { overflow: visible; }
.svc-bar a { position: relative; }
.svc-bar a:nth-child(1) { border-top-left-radius: 15px; }
.svc-bar a:nth-child(4) { border-top-right-radius: 15px; }
.svc-bar a:nth-child(5) { border-bottom-left-radius: 15px; }
.svc-bar a:nth-child(8) { border-bottom-right-radius: 15px; }
.svc-bar__desc { position: absolute; top: calc(100% + 8px); left: -1px; z-index: 20; width: 300px; padding: 14px 16px;
  background: var(--white); border: 1px solid var(--hair); border-radius: 14px; box-shadow: 0 14px 34px rgb(0 0 0 / 10%);
  font: 400 15px/1.5 var(--font-body); letter-spacing: -0.1px; color: var(--muted);
  opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s; }
.svc-bar a:nth-child(4n) .svc-bar__desc { left: auto; right: -1px; }
.svc-bar a:hover .svc-bar__desc, .svc-bar a:focus-visible .svc-bar__desc { opacity: 1; visibility: visible; transform: none; transition: opacity 0.18s ease, transform 0.18s ease; }
@media (max-width: 1199px) {
  .svc-bar a:nth-child(n) { border-radius: 0; }
  .svc-bar a:nth-child(1) { border-top-left-radius: 15px; }
  .svc-bar a:nth-child(2) { border-top-right-radius: 15px; }
  .svc-bar a:nth-child(7) { border-bottom-left-radius: 15px; }
  .svc-bar a:nth-child(8) { border-bottom-right-radius: 15px; }
  .svc-bar a:nth-child(n) .svc-bar__desc { left: -1px; right: auto; }
  .svc-bar a:nth-child(2n) .svc-bar__desc { left: auto; right: -1px; }
}
@media (max-width: 900px) { .svc-bar-head { margin-top: 56px; } }
@media (max-width: 640px) {
  .svc-bar a:nth-child(n) { border-radius: 0; flex-wrap: wrap; row-gap: 4px; }
  .svc-bar a:nth-child(1) { border-radius: 15px 15px 0 0; }
  .svc-bar a:nth-child(8) { border-radius: 0 0 15px 15px; }
  .svc-bar a:nth-child(n) .svc-bar__desc { position: static; width: auto; flex-basis: 100%; padding: 0 0 0 30px; border: 0;
    box-shadow: none; background: none; opacity: 1; visibility: visible; transform: none; font-size: 14px; }
  .svc-bar-head { margin-top: 40px; }
}
/* Full service names on one line: at 1200-1479px the four cells are 280px,
   so the names drop to 14px, slightly tighter, with less padding. */
@media (min-width: 1200px) and (max-width: 1479px) {
  .svc-bar a { padding: 14px 16px; gap: 10px; font-size: 14px; letter-spacing: -0.3px; }
  .svc-bar a .ico { width: 16px; height: 16px; }
}
@media (max-width: 900px) { .svc-bar-head { align-items: flex-start; gap: 8px; } }

/* Delivers + What we handle, round 3 (2026-10-09) */
/* The five items: same size, one per line with a green bullet. The list is
   a centered block; each line reads from the left. */
.delivers__list { display: inline-grid; justify-items: start; gap: 6px; text-align: left; margin-inline: auto; }
.delivers__list li { display: flex; gap: 12px; align-items: baseline; }
.delivers__list li::before, .delivers__list li + li::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0; border-radius: 50%; background: var(--green); transform: translateY(-2px); }
/* "What we handle": same size as the Delivers heading, centered. */
.svc-bar-title { text-align: center; margin: 96px 0 28px; font-size: 56px; letter-spacing: -1.12px; line-height: 1.1; }
@media (max-width: 900px) { .svc-bar-title { font-size: 40px; letter-spacing: -0.8px; margin-top: 72px; } }
@media (max-width: 640px) { .svc-bar-title { font-size: 32px; letter-spacing: -0.6px; margin-top: 56px; } }
.svc-bar-title + .svc-bar { margin-top: 0; }
.svc-bar-more { display: flex; justify-content: center; margin-top: 32px; }

/* Smoother description card: eases in after a short pause, eases out fast. */
.svc-bar__desc { transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s; transform: translateY(6px); }
.svc-bar a:hover .svc-bar__desc, .svc-bar a:focus-visible .svc-bar__desc {
  transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1) 0.08s, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.08s, visibility 0s; }
.svc-bar a { transition: background-color 0.3s ease, color 0.2s ease; }

/* Hover option mockups (styleguide2 only, 2026-10-09). The base .svc-bar
   card is option A; these modifiers swap the entrance. */
.g2-hover-opts { gap: 120px; }
.g2-hover-opt > .t-h4 { margin: 0 0 4px; }
.g2-hover-opt > .g2-note { margin: 0 0 20px; }
/* B. Unfold: clip from the top edge down. */
.svc-bar--unfold .svc-bar__desc { transform: none; clip-path: inset(0 0 100% 0 round 14px);
  transition: opacity 0.12s ease, clip-path 0.2s ease, visibility 0s linear 0.2s; }
.svc-bar--unfold a:hover .svc-bar__desc, .svc-bar--unfold a:focus-visible .svc-bar__desc { clip-path: inset(0 0 0 0 round 14px);
  transition: opacity 0.2s ease 0.06s, clip-path 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.06s, visibility 0s; }
/* C. Grow from the cell corner. */
.svc-bar--scale .svc-bar__desc { transform: scale(0.94); transform-origin: top left; }
.svc-bar--scale a:nth-child(4n) .svc-bar__desc { transform-origin: top right; }
.svc-bar--scale a:hover .svc-bar__desc, .svc-bar--scale a:focus-visible .svc-bar__desc { transform: none;
  transition: opacity 0.3s ease 0.06s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.06s, visibility 0s; }
/* D. Focus in: blur to sharp. */
.svc-bar--focus .svc-bar__desc { transform: none; filter: blur(6px); transition: opacity 0.16s ease, filter 0.16s ease, visibility 0s linear 0.16s; }
.svc-bar--focus a:hover .svc-bar__desc, .svc-bar--focus a:focus-visible .svc-bar__desc { filter: blur(0);
  transition: opacity 0.38s ease 0.06s, filter 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.06s, visibility 0s; }
/* E. Detail line under the bar; no floating card. */
.svc-bar--strip .svc-bar__desc { display: none; }
.svc-strip { position: relative; min-height: 56px; margin-top: 16px; }
.svc-strip p { position: absolute; inset: 0 auto auto 0; margin: 0; max-width: 900px; font-size: 16px; line-height: 1.5; color: var(--muted);
  opacity: 0; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s ease; }
.svc-strip p b { color: var(--ink); font-weight: 500; }
.svc-strip .svc-strip__hint { opacity: 1; transform: none; }
.svc-bar--strip:has(a:hover) + .svc-strip .svc-strip__hint, .svc-bar--strip:has(a:focus-visible) + .svc-strip .svc-strip__hint { opacity: 0; }
.svc-bar--strip:has(a:nth-child(1):hover) + .svc-strip p:nth-child(2),
.svc-bar--strip:has(a:nth-child(1):focus-visible) + .svc-strip p:nth-child(2),
.svc-bar--strip:has(a:nth-child(2):hover) + .svc-strip p:nth-child(3),
.svc-bar--strip:has(a:nth-child(2):focus-visible) + .svc-strip p:nth-child(3),
.svc-bar--strip:has(a:nth-child(3):hover) + .svc-strip p:nth-child(4),
.svc-bar--strip:has(a:nth-child(3):focus-visible) + .svc-strip p:nth-child(4),
.svc-bar--strip:has(a:nth-child(4):hover) + .svc-strip p:nth-child(5),
.svc-bar--strip:has(a:nth-child(4):focus-visible) + .svc-strip p:nth-child(5),
.svc-bar--strip:has(a:nth-child(5):hover) + .svc-strip p:nth-child(6),
.svc-bar--strip:has(a:nth-child(5):focus-visible) + .svc-strip p:nth-child(6),
.svc-bar--strip:has(a:nth-child(6):hover) + .svc-strip p:nth-child(7),
.svc-bar--strip:has(a:nth-child(6):focus-visible) + .svc-strip p:nth-child(7),
.svc-bar--strip:has(a:nth-child(7):hover) + .svc-strip p:nth-child(8),
.svc-bar--strip:has(a:nth-child(7):focus-visible) + .svc-strip p:nth-child(8),
.svc-bar--strip:has(a:nth-child(8):hover) + .svc-strip p:nth-child(9),
.svc-bar--strip:has(a:nth-child(8):focus-visible) + .svc-strip p:nth-child(9) { opacity: 1; transform: none; transition: opacity 0.3s ease 0.05s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.05s; }
@media (max-width: 640px) { .svc-strip { display: none; } .svc-bar--strip .svc-bar__desc { display: block; } }

/* v65: Delivers items as the centered statement rows (guide #41); the
   statistics sit under "Proof, not promises." above the case study bars. */
.delivers__head .delivers__rows { width: min(100%, 880px); margin: 12px auto 0; }
.delivers__rows > li { color: var(--ink); }
.stat-line--proof { margin: 0 auto 64px; }
@media (max-width: 900px) { .stat-line--proof { margin-bottom: 48px; } }
/* Option C on tablets (two columns): right-column cards grow from the right. */
@media (max-width: 1199px) {
  .svc-bar--scale a:nth-child(n) .svc-bar__desc { transform-origin: top left; }
  .svc-bar--scale a:nth-child(2n) .svc-bar__desc { transform-origin: top right; }
}
/* v66: Delivers rows at Mollie's size (their business-accounts list):
   16px, 1.4 line height, 42px row pitch, 600px column. */
.delivers__head .delivers__rows { width: min(100%, 600px); margin-top: 16px; }
.delivers__rows.line-list--center > li { font: 400 16px/22.4px var(--font-head); letter-spacing: -0.32px; color: #111; padding: 10px 0; }
.delivers__head .delivers__rows.line-list > li { padding: 9px 0; margin: 0; line-height: 22.4px; }
/* v67: stats left aligned under "Proof, not promises."; View All Results under the bars. */
.stat-line--proof { margin: 0 0 64px; }
@media (max-width: 900px) { .stat-line--proof { margin-bottom: 48px; } }
.proof-more { display: flex; margin-top: 32px; }
/* v68: View All Results centered, like View All Services. */
.proof-more { justify-content: center; }

/* v69: no line under the main nav. */
.site-header, .site-header.is-stuck, .site-header.is-scrolled { box-shadow: none; border-bottom: 0; }

/* ======================= What we handle, version B (2026-10-12) ======= */
/* After kraft-template.webflow.io's features grid: a large light statement,
   then four across: small uppercase label, light title, gray text, and a
   text link. Short thin dividers sit between the columns. */
.kfeat__intro { margin: 0 0 80px; max-width: 980px; font: 300 40px/1.25 var(--font-head); letter-spacing: -1px; color: var(--ink); }
.kfeat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 64px; row-gap: 72px; }
.kfeat__item { position: relative; display: flex; flex-direction: column; gap: 8px; }
.kfeat__item > * { margin: 0; }
.kfeat__item:not(:nth-child(4n+1))::before { content: ""; position: absolute; left: -32px; top: 50%; height: 44%; transform: translateY(-50%); border-left: 1px solid var(--hair); }
.kfeat__label { font: 400 13px/1.6 var(--font-head); letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); }
.kfeat__title { font: 300 28px/1.2 var(--font-head); letter-spacing: -0.4px; color: var(--ink); }
.kfeat__text { font-size: 16px; line-height: 1.6; color: var(--muted); }
.kfeat__link { margin-top: auto !important; padding-top: 8px; display: inline-flex; align-items: center; gap: 4px; width: fit-content;
  font: 500 15px/1.3 var(--font-head); color: var(--navy); text-decoration: none; }
.kfeat__link .ico { width: 16px; height: 16px; stroke-width: 2; transition: transform 0.2s ease; }
.kfeat__link:hover, .kfeat__link:focus-visible { color: var(--green-dark); }
.kfeat__link:hover .ico { transform: translateX(3px); }
@media (max-width: 1199px) {
  .kfeat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kfeat__item:not(:nth-child(4n+1))::before { content: none; }
  .kfeat__item:nth-child(2n)::before { content: ""; }
  .kfeat__intro { font-size: 34px; margin-bottom: 64px; }
}
@media (max-width: 640px) {
  .kfeat { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .kfeat__item:nth-child(2n)::before { content: none; }
  .kfeat__intro { font-size: 26px; letter-spacing: -0.5px; margin-bottom: 48px; }
  .kfeat__title { font-size: 24px; }
}
@media (min-width: 1200px) and (max-width: 1479px) { .kfeat__title { font-size: 24px; } .kfeat { column-gap: 56px; } .kfeat__item:not(:nth-child(4n+1))::before { left: -28px; } }

/* ========== "Only Green Glove Heroes delivers" after Jurri's About block =
   (jurri-template.webflow.io, 2026-10-12): eyebrow + large two-line heading
   on the left, the five items with the old green checkmarks on the right. */
.jab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start; }
.jab__head { display: grid; gap: 14px; }
.jab__head > * { margin: 0; }
.jab__title { font: 400 56px/1.1 var(--font-head); letter-spacing: -1.12px; color: var(--ink); margin: 0; }
.jab__list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 16px; }
.jab__list li { display: flex; gap: 14px; align-items: flex-start; margin: 0; font: 400 20px/1.45 var(--font-head); letter-spacing: -0.3px; color: var(--ink); }
.jab__list li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 4px; background: var(--green);
  -webkit-mask: var(--check-icon) center / 20px 20px no-repeat; mask: var(--check-icon) center / 20px 20px no-repeat; }
@media (max-width: 1199px) { .jab__title { font-size: 48px; letter-spacing: -1px; } .jab__list li { font-size: 18px; } }
@media (max-width: 900px) { .jab { grid-template-columns: minmax(0, 1fr); row-gap: 32px; } .jab__title { font-size: 40px; letter-spacing: -0.8px; } }
@media (max-width: 640px) { .jab__title { font-size: 32px; letter-spacing: -0.6px; } .jab__list li { font-size: 17px; } }

/* What we handle (version B) statement one weight up. */
.kfeat__intro { font-weight: 400; }
/* Two white bands in a row: one gap between them, not two. */
.band.delivers + .kfeat-band { padding-top: 0; }

/* v73: Delivers on green, same padding top and bottom, all text and the
   checkmarks white. What we handle gets its own top padding again. */
.logo-strip-band + .band.delivers { padding-top: var(--band-y); }
.band.delivers + .kfeat-band { padding-top: var(--band-y); }
.band--green .jab__title, .band--green .jab__list li, .band--green .eyebrow2 { color: var(--white); }
.band--green .jab__list li::before { background: var(--white); }

/* v74: Delivers checklist rows half as far apart (16px -> 8px). Home
   testimonials as full-width green bands, white text, yellow stars like
   the original site (#f5a623). */
.jab__list { gap: 8px; }
.tq-band .tq { max-width: 980px; }
.tq-band .tq blockquote, .tq-band .tq figcaption { color: var(--white); }
.band--green.tq-band .tq__stars { color: var(--star); }

/* v75: home stats spread across the full width with equal space between. */
.stat-line--proof { display: flex; justify-content: space-between; gap: 24px; max-width: none; }
.stat-line--proof > div { flex: 0 1 auto; padding-right: 20px; }
@media (max-width: 640px) { .stat-line--proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* v75: FAQs match Mollie. Full-width list, thin lines, 18px medium questions,
   16px answers, rounded plus that turns to an X. Home FAQ sits on sand. */
#faqs-section { background: var(--sand); }
.flow > .eyebrow2:first-child { margin-bottom: 16px; }
.flow > p.eyebrow2 { color: var(--navy); }
:is(.on-dark, .band--navy, .band--green) .flow > p.eyebrow2 { color: var(--white); }
.flow > .eyebrow2:first-child + h2:has(+ .accordion--v2) { font: 400 76px/1 var(--font-head); letter-spacing: -2px; margin: 0 0 40px; max-width: none; }
.flow > .eyebrow2:first-child + h2 + .accordion--v2 { max-width: none; margin-top: 0; }
@media (max-width: 900px) { .flow > .eyebrow2:first-child + h2:has(+ .accordion--v2) { font-size: 56px; letter-spacing: -1.4px; } }
@media (max-width: 640px) { .flow > .eyebrow2:first-child + h2:has(+ .accordion--v2) { font-size: 44px; letter-spacing: -1px; margin-bottom: 32px; } }
.flow > h2:first-child:has(+ .accordion--v2) { font: 400 60px/1 var(--font-head); letter-spacing: -1.2px; margin-bottom: 32px; max-width: none; }
.flow > h2:first-child + .accordion--v2 { max-width: none; margin-top: 0; }
.accordion--v2 .accordion__item > h3 { margin: 0; }
.accordion--v2 .accordion__trigger { padding: 26px 0 27px; font: 500 18px/1.1 var(--font-head); letter-spacing: -0.4px; color: #111; gap: 32px; }
.accordion--v2 .accordion__icon { position: relative; width: 22px; height: 22px; transition: transform 0.3s ease; }
.accordion--v2 .accordion__icon::before, .accordion--v2 .accordion__icon::after { content: ""; position: absolute; inset: auto; left: 3px; top: 10px; width: 16px; height: 2px; border: 0; border-radius: 4px; background: currentColor; transition: none; }
.accordion--v2 .accordion__icon::after { transform: rotate(90deg); }
.accordion--v2 .accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
.accordion--v2 .accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(90deg); }
.accordion--v2 .accordion__panel { padding: 0 0 40px; max-width: min(80%, 1056px); font: 500 16px/1.3 var(--font-body, var(--font-head)); letter-spacing: -0.2px; color: var(--muted); }
.accordion--v2 .accordion__panel p, .flow .accordion--v2 .accordion__panel p { font: inherit; letter-spacing: inherit; color: inherit; }
.band--navy .accordion--v2 .accordion__trigger, .band--green .accordion--v2 .accordion__trigger { color: var(--white); }
@media (max-width: 900px) {
  .flow > h2:first-child:has(+ .accordion--v2) { font-size: 44px; letter-spacing: -0.9px; }
  .accordion--v2 .accordion__trigger { font-size: 17px; padding: 22px 0 23px; }
  .accordion--v2 .accordion__panel { max-width: none; padding-bottom: 28px; }
}
@media (max-width: 640px) { .flow > h2:first-child:has(+ .accordion--v2) { font-size: 36px; letter-spacing: -0.7px; } }


/* v76: home green testimonials. Quote 22px medium (all three, the long one too), stars 1.5x. Name unchanged. */
.tq-band .tq blockquote, .tq-band .tq--long blockquote { font-size: 22px; font-weight: 500; line-height: 1.45; letter-spacing: -0.3px; }
.tq-band .tq__stars { font-size: 30px; letter-spacing: 6px; }
@media (max-width: 900px) { .tq-band .tq blockquote, .tq-band .tq--long blockquote { font-size: 20px; } }
@media (max-width: 640px) { .tq-band .tq blockquote, .tq-band .tq--long blockquote { font-size: 18px; } .tq-band .tq__stars { font-size: 26px; } }

/* v78: home green testimonials. Quote 30px at the body text line height (1.55), name 26px italic. */
.tq-band .tq blockquote, .tq-band .tq--long blockquote { font-size: 30px; line-height: 1.55; letter-spacing: -0.5px; }
.tq-band .tq figcaption { font-size: 26px; font-style: italic; }
@media (max-width: 900px) { .tq-band .tq blockquote, .tq-band .tq--long blockquote { font-size: 26px; } .tq-band .tq figcaption { font-size: 22px; } }
@media (max-width: 640px) { .tq-band .tq blockquote, .tq-band .tq--long blockquote { font-size: 22px; letter-spacing: -0.3px; } .tq-band .tq figcaption { font-size: 20px; } }

/* v79: testimonial quote line height 1.2. */
.tq-band .tq blockquote, .tq-band .tq--long blockquote { line-height: 1.2; }

/* v80: home statistics match the case study numbers (96px, weight 200). */
.stat-line--proof .stat-line__num { font-size: 96px; font-weight: 200; letter-spacing: -4px; }
@media (max-width: 1199px) { .stat-line--proof .stat-line__num { font-size: 80px; letter-spacing: -3.2px; } }
@media (max-width: 640px) { .stat-line--proof .stat-line__num { font-size: 64px; letter-spacing: -2.6px; } }

/* v81: two white bands in a row (Client Success Stories, then Done Right) doubled the gap to 240px.
   The second drops its top padding so every section break on home is one band (120/96/72/56). */
#results + .band:not([class*="band--"]) { padding-top: 0; }

/* ================================================= v82: home styling site-wide ===
   Icons are gone from page content. Arrows (chevrons) stay on links. */
/* Check lists use the home check (green, CSS mask) instead of the circle icon. */
.line-list--check > li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 3px; background: var(--green);
  -webkit-mask: var(--check-icon) center / 20px 20px no-repeat; mask: var(--check-icon) center / 20px 20px no-repeat; }
.band--green .line-list--check > li::before, .band--navy .line-list--check > li::before, .card--green .line-list--check > li::before { background: var(--white); }
/* Feature lists use the home "delivers" layout: heading left, checks right. */
.band:not(.band--green) .jab__list li::before { background: var(--green); }
.jab + .features2__after { margin-top: 40px; max-width: none; }
/* Service grid cells lose the icon chip. */
.grid-box__head { gap: 0; }
/* Photo placeholders: text only. */
.ph .ico { display: none; }
/* Contact links: the Reach us list takes the arrow-link rows. */
.contact-links address.nap { font-style: normal; }
.line-list--links .line-list__static { display: block; padding: 16px 0; }
/* Buttons that show their fill only on hover, like the header Login button. */
.btn--reveal { background: transparent; color: var(--ink); border: 0; }
.btn--reveal:hover, .btn--reveal:focus-visible { background: var(--navy); color: var(--white); }
.btn-row--reveal { gap: 8px; margin-left: -16px; }
.btn-row--reveal + .btn-row--reveal { margin-top: 4px; }
/* Stats match the home statistics: thin 96px numbers. */
.stat-cols .stat-big { font-size: 96px; letter-spacing: -4px; }
@media (max-width: 1199px) { .stat-cols .stat-big { font-size: 80px; letter-spacing: -3.2px; } }
@media (max-width: 640px) { .stat-cols .stat-big { font-size: 64px; letter-spacing: -2.6px; } }
.stat-card__num { font-weight: 200; }

/* v83: outline-only buttons (contact map buttons): navy 2px border, no fill until hover. Same size as btn--sm. */
.btn--line { background: transparent; color: var(--ink); border: 2px solid var(--navy); padding: 8px 14px; }
.btn--line:hover, .btn--line:focus-visible { background: var(--navy); color: var(--white); }
.btn-row--reveal + .btn-row--line { margin-top: 16px; }
.btn-row--line { gap: 8px; }
/* v83: every green button starts dark green and goes to the lighter green on hover, as on home.
   (The inner hero rule .phero .btn--primary had been pinning the dark green on hover.) */
.btn.btn--primary:not(:disabled):hover, .btn.btn--primary:not(:disabled):focus-visible,
.btn.btn--green:not(:disabled):hover, .btn.btn--green:not(:disabled):focus-visible { background: var(--green); color: var(--white); }

/* ======================================================= v84: white pages ===
   Inner pages are white like home (build.py whiten_bands). FAQ bands are sand.
   Two white bands in a row: the second has no top padding, so the gap is one band. */
.band--join { padding-top: 0; }
.band--tight + .band--join { padding-top: calc(var(--band-y) * 0.4); }
.band--tight.band--join { padding-top: 0; }
/* Plain cards on a white band take the sand fill so they still read as cards. */
.band:not(.band--sand):not(.band--navy):not(.band--green) .card:not([class*="card--"]) { background: var(--sand); }
/* Contact and quote: navy band outside, white cards inside. */
.contact-band .card { background: var(--white); --muted: rgb(0 0 0 / 62%); --hair: rgb(0 0 0 / 10%); }
:where(.contact-band .card) :where(p, li, span, small, dd, dt, figcaption, blockquote, label, legend) { color: inherit; }
/* Kraft grid inside text sections and the service/audience cells. */
.flow > .kfeat { max-width: none; margin: 56px 0 0; }
.kfeat--cells .kfeat__title { margin: 0; }
.kfeat__text.flow > * { max-width: none; margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.kfeat__text.flow > :last-child { margin-bottom: 0; }
.phero:has(+ .band--join) { padding-bottom: 0; }
.phero + .band--join { padding-top: var(--band-y); }
.logo-strip-band.band--join { padding-top: 0; }
.contact-band .card :is(.t-display, .t-h2, .t-h3, .t-h4, .t-eyebrow, .t-body, .t-lede, .card__title) { color: var(--ink); }
.contact-band .card .t-eyebrow { color: var(--navy); }

/* v85: text sections on inner pages: eyebrow + large heading left, content right (home "delivers" layout). */
.jab--text .flow > * { max-width: none; }
.jab--text .flow > :first-child { margin-top: 0; }
.jab--text .flow > h3:first-child { margin-top: 0; }
.jab--text .line-list--cols { grid-template-columns: minmax(0, 1fr); }
.jab--text .line-list--cols > li:nth-child(2) { border-top: 0; }
/* Full-width sections get the same eyebrow above the heading. */
.flow > .eyebrow2:first-child + h2 { margin-top: 0; }
/* v85: Client Success Stories on inner pages, as on home. */
.success .s-head .t-lede { max-width: 820px; }
.success .result-bars { margin-top: 0; }
.success__note { margin: 16px 0 0; color: var(--muted); max-width: 820px; }
.cs-aside__note { margin: 0 0 16px; color: var(--muted); }

/* ============================================ v89: inner heroes = home hero */
/* Same grid, gap, H1 size and image as the home hero. Text content sits in the
   intro band under the image. */
.hero2.hero2--inner .hero2__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: end; }
.hero2.hero2--inner .phero__title { font: 400 80px/1.04 var(--font-head); letter-spacing: -5.5px; color: var(--ink); max-width: none; margin: 0; }
.hero2--inner .hero2__main > .eyebrow2 { margin-bottom: 12px; }
.hero2--inner .hero2__side .btn-row:first-child { margin-top: 0; }
.hero2--inner .hero2__side .cs2-meta, .hero2--inner .hero2__side .t-lede { margin: 0; font-size: 16px; line-height: 1.35; letter-spacing: -0.2px; text-transform: none; font-weight: 400; font-family: var(--font-body, inherit); color: rgb(0 0 0 / 70%); }
.band--intro .intro-grid { padding-inline: var(--gutter); }
.intro > * { max-width: none; }
.intro .intro__text { font: 400 24px/1.4 var(--font-head); letter-spacing: -0.4px; color: var(--ink); }
.band--intro + .band:not(.band--sand):not(.band--green):not(.band--navy) { padding-top: 0; }
@media (max-width: 1199px) {
  .hero2.hero2--inner .hero2__grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; align-items: start; }
  .hero2.hero2--inner .hero2__side { max-width: 640px; }
  .hero2.hero2--inner .hero2__side .btn-row { flex-direction: row; flex-wrap: wrap; }
  .hero2.hero2--inner .phero__title { font-size: 76px; letter-spacing: -5.2px; }
  .band--intro .intro-grid { grid-template-columns: minmax(0, 1fr); }
  .intro { max-width: 760px; }
}
@media (min-width: 768px) and (max-width: 900px) { .hero2.hero2--inner .phero__title { font-size: 68px; letter-spacing: -4.6px; } }
@media (min-width: 641px) and (max-width: 767px) { .hero2.hero2--inner .phero__title { font-size: 64px; letter-spacing: -4.4px; } }
@media (max-width: 640px) {
  .hero2.hero2--inner .phero__title { font-size: 38px; letter-spacing: -2.6px; }
  .intro .intro__text { font-size: 20px; }
}

/* ======================== v90: body text sections (option C, chosen 10-12) */
/* Heading in a 340px column that stays in view, text in the wide column. The
   right edge lines up with the hero. Sections alternate gray and white (build). */
.jab--text { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); column-gap: 96px; }
.jab--text .jab__head { position: sticky; top: 120px; }
.jab--text .jab__title { font-size: 40px; letter-spacing: -0.8px; line-height: 1.1; }
.jab--text .flow p, .jab--text .flow li { font-size: 18px; }
.band:has(> .jab--text) { padding-block: calc(var(--band-y) + 24px); }
/* v165: portrait in the left column instead of a heading (About, Who we are). */
.jab__portrait { aspect-ratio: 3 / 4; width: 100%; max-width: 340px; }
@media (max-width: 1199px) {
  .jab--text { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .jab--text .jab__head { position: static; }
  .jab--text .flow { max-width: 760px; }
}
@media (max-width: 640px) { .jab--text .jab__title { font-size: 32px; letter-spacing: -0.6px; } }
/* Hero rotator inside an inner H1: same slide as home, same color as the H1. */
.hero2--inner .hero-rot { color: inherit; }
/* v92: the intro under the hero image uses the body section layout (text column only). */
/* v94: the intro's opening words sit large on the left (40px, like the section
   headings) and the sentence carries on in the right column. One <p> in the HTML;
   display: contents lets its two spans fill the two grid columns. */
.intro-split { display: contents; }
.intro-split__lead { grid-column: 1; align-self: start; font: 400 40px/1.1 var(--font-head); letter-spacing: -0.8px; color: var(--ink); }
.intro-split__rest { grid-column: 2; font-size: 18px; line-height: 1.6; letter-spacing: -0.2px; color: var(--ink); }
.jab--intro > p:not(.intro-split) { grid-column: 2; margin: 0; font-size: 18px; line-height: 1.6; color: var(--ink); }
@media (max-width: 1199px) {
  .intro-split__lead, .intro-split__rest, .jab--intro > p:not(.intro-split) { grid-column: 1; }
  .jab--intro .jab__head:empty { display: none; }
}
@media (max-width: 640px) { .intro-split__lead { font-size: 32px; letter-spacing: -0.6px; } }
.band--intro.band--join { padding-top: 0; }

/* ============================== v102: case studies rebuilt on site parts */
.cs-figures .stat-line--proof { margin: 0; }
.stat-line__num--word { font: 300 56px/1.25 var(--font-head) !important; letter-spacing: -1.6px !important; }
.cs-nums { display: flex; gap: 48px; margin-top: 40px; flex-wrap: wrap; }
.cs-nums > div > * { margin: 0; }
.cs-nums__num { font: 200 72px/1 var(--font-head); letter-spacing: -3px; color: var(--white); }
.cs-nums__label { margin-top: 8px !important; font-size: 15px; color: rgb(255 255 255 / 85%); }
.cs-outcomes .cs-fnote { margin: 48px 0 0; max-width: 820px; font-size: 14px; line-height: 1.5; color: rgb(255 255 255 / 80%); }
.jab--text .cs-table-wrap { margin: 0; }
@media (max-width: 640px) { .cs-nums__num { font-size: 56px; } .stat-line__num--word { font-size: 44px !important; } }
/* Four numbers across: 80px so the widest ($27,456) still fits the content width. */
.cs-figures .stat-line--proof .stat-line__num { font-size: 80px; letter-spacing: -3.2px; }
@media (max-width: 1199px) { .cs-figures .stat-line--proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } .cs-figures .stat-line--proof .stat-line__num { font-size: 64px; letter-spacing: -2.6px; } }
@media (max-width: 640px) { .cs-figures .stat-line--proof { grid-template-columns: minmax(0, 1fr); } }
.cs-outcomes .cs-notes { grid-column: 1 / -1; }
.cs-nums { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 48px; row-gap: 24px; }
.cs-nums__num { font-size: 56px; letter-spacing: -2px; }
.cs-nums__label { text-transform: none; letter-spacing: 0; }
@media (max-width: 640px) { .cs-nums { grid-template-columns: minmax(0, 1fr); } .cs-nums__num { font-size: 48px; } }
.cs-figures .stat-line--proof { max-width: none; width: 100%; margin: 0; }
.cs-figures .stat-line--proof > div { display: flex; flex-direction: column; justify-content: flex-end; }
.cs-figures .stat-line__label { white-space: nowrap; }
@media (max-width: 1199px) { .cs-figures .stat-line__label { white-space: normal; } }

/* ================== v104: case study design (Ethan: C hero + D body) */
/* Shared parts */
.cs-kicker { display: block; margin: 0 0 14px; font: 600 14px/1 var(--font-head); letter-spacing: 1px; color: var(--green-dark); }
.tt { font-weight: 600; }
.cs-aside { display: none; }
.cs-pair__head { font: 400 40px/1.1 var(--font-head); letter-spacing: -0.8px; margin: 0 0 40px; color: var(--ink); }
.cs-pair__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.cs-pair__title { font: 600 20px/1.3 var(--font-head); margin: 0 0 16px; color: var(--ink); }
.cs-pair__col ul { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.cs-pair__col li { font-size: 18px; line-height: 1.55; color: var(--ink); }
.cs-ba { display: grid; gap: 14px; margin: 0 0 32px; }
.cs-ba__row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 150px; align-items: center; gap: 16px; }
.cs-ba__label { font: 600 13px/1 var(--font-head); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.cs-ba__track { height: 32px; background: rgb(0 0 0 / 6%); border-radius: 8px; overflow: hidden; }
.cs-ba__bar { display: block; height: 100%; border-radius: 8px; background: var(--navy); }
.cs-ba__row--after .cs-ba__bar { background: var(--green-dark); }
.cs-ba__val { font: 300 30px/1 var(--font-head); letter-spacing: -0.8px; color: var(--ink); text-align: right; }
.cs-ba__val small { font-size: 14px; letter-spacing: 0; color: var(--muted); }

/* Hero: full-bleed photo, dark overlay, white text, tag strip under a thin line */
.cs-top { position: relative; min-height: 88vh; display: flex; flex-direction: column; justify-content: flex-end; padding-block: 140px 48px; overflow: hidden; }
.cs-top > .wrap { position: relative; z-index: 2; }
.cs-top .hero2__media { position: absolute; inset: 0; margin: 0; max-width: none; width: 100%; padding: 0; z-index: 0; }
.cs-top .hero2__media .media { height: 100%; aspect-ratio: auto !important; border-radius: 0; opacity: 1 !important; transform: none !important; background: transparent; }
.cs-top .hero2__media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 30%; border-radius: 0; }
.cs-top::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(0 0 0 / 50%) 0%, rgb(0 0 0 / 80%) 100%); }
.cs-top :is(.eyebrow2, .phero__title, .hero2__text, .cs2-meta, .breadcrumbs a, .breadcrumbs) { color: var(--white) !important; }
.cs-top .cs2-meta { display: none; }
.cs-tags { margin-top: 72px; }
.cs-tags ul { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid rgb(255 255 255 / 40%); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
.cs-tags li { margin: 0; font: 700 12px/1.3 var(--font-head); letter-spacing: 1px; text-transform: uppercase; color: var(--white); }

/* Stats: below the photo, lines between them */
.cs-figures { padding-block: 64px !important; border-bottom: 1px solid var(--hair); }
.cs-figures .stat-line--proof > div { border-left: 1px solid var(--hair); padding-left: 24px; }
.cs-figures .stat-line--proof > div:first-child { border-left: 0; padding-left: 0; }
.cs-figures .stat-line__num { color: var(--green-dark); }

/* Body: numbers-first layout with the at-a-glance rail */
@media (min-width: 1200px) {
  .cs-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 72px; width: min(1120px, 100% - 80px); margin: 0 auto; align-items: start; padding-top: 56px; }
  .cs-aside { display: block; grid-column: 1; grid-row: 1 / span 40; position: sticky; top: 104px; background: #eeeeee; border-radius: 20px; padding: 28px; }
  .cs-aside__title { font: 700 13px/1 var(--font-head); letter-spacing: 1.4px; text-transform: uppercase; margin: 0 0 20px; color: var(--ink); }
  .cs-aside dl { margin: 0 0 24px; display: grid; gap: 16px; }
  .cs-aside dl > div { border-top: 1px solid var(--hair); padding-top: 12px; }
  .cs-aside dt { font-size: 12px; letter-spacing: .4px; color: var(--muted); }
  .cs-aside dd { margin: 4px 0 0; font-size: 15px; line-height: 1.4; color: var(--ink); }
  .cs-aside dd.cs-aside__num { font: 300 30px/1.1 var(--font-head); letter-spacing: -1px; color: var(--green-dark); }
  .cs-aside .btn { width: 100%; justify-content: center; }
  .cs-body > section { grid-column: 2; background: transparent !important; padding-block: 56px !important; border-top: 1px solid var(--hair); }
  .cs-body > section.band--intro { border-top: 0; padding-top: 0 !important; }
  .cs-body > section > .wrap { width: auto; max-width: none; padding-inline: 0; margin: 0; }
  .cs-body .jab--text { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .cs-body .jab__head { position: static; }
  .cs-body .jab--intro { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .cs-body .jab--intro :is(.intro-split__lead, .intro-split__rest) { grid-column: 1; }
  .cs-body .intro-split__lead { font-size: 32px; }
  .cs-body > .cs-outcomes { background: var(--green-dark) !important; border-radius: 24px; padding: 56px 48px !important; margin-block: 24px 56px; border-top: 0; }
  .cs-body > .cs-outcomes .jab { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
}
@media (max-width: 1199px) {
  .cs-top { min-height: 72vh; }
  .cs-figures .stat-line--proof > div:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 900px) {
  .cs-pair__grid { grid-template-columns: minmax(0, 1fr); }
  .cs-pair__head { font-size: 32px; }
  .cs-ba__row { grid-template-columns: 56px minmax(0, 1fr) 110px; }
  .cs-ba__val { font-size: 22px; }
  .cs-tags ul { justify-content: flex-start; }
}
@media (max-width: 640px) { .cs-figures .stat-line--proof > div { border-left: 0; padding-left: 0; } }
/* v105: link lists inside body text (Services behind this result and others) behave like the
   contact page: ink, no underline, green on hover. The .flow link rule was winning. */
.flow .line-list--links li a:not(.btn) { color: var(--ink); text-decoration: none; }
.flow .line-list--links li a:not(.btn):hover, .flow .line-list--links li a:not(.btn):focus-visible { color: var(--green-dark); text-decoration: none; }
/* v106/v107 (Ethan): Kraft grid labels 800 / 11px / 0.2px tracking; titles 800. */
.kfeat__label { font-weight: 800; font-size: 11px; letter-spacing: 0.2px; }
.kfeat__title { font-weight: 800; }
/* v109/v110 (Ethan, trial): every 400-weight h2 in page content goes to 800 (was 600 in v109). Grid titles (800),
   card titles (500), the map modal title and the footer keep their own weights. Two-tone
   case study headings move their bold half to 800 so the contrast survives. */
main h2:not(.kfeat__title):not(.card__title):not(.modal__title) { font-weight: 800; }
/* v110: at 800 the two-tone case study headings keep their contrast with a 400 first half (weunf style). */
main h2:has(.tt) { font-weight: 400 !important; }
main h2 .tt { font-weight: 800; }
main .flow > .eyebrow2:first-child + h2:has(+ .accordion--v2) { font-weight: 800; }
/* v111/v112 (Ethan, trial): hero left text at 600 (was 800 in v111; inner H1s and the home display line). */
.hero2.hero2--inner .phero__title, .hero2 .hero2__display { font-weight: 600; }
/* v113: the rotating hero phrase sits in a clipped one-line slot, which cut off descenders
   (g, p, y). Each phrase gets room below it and the slot pulls the same amount back, so
   spacing is unchanged. (-5px letter spacing was tried: the longest phrase then needs 686px
   of a 684px line and wraps, so -5.5px stays, per Ethan.) */
.rotator .rot-item { padding-bottom: 0.16em; }
.rotator { margin-bottom: -0.16em; }
/* v114 (Ethan): the intro's large left text at 800, every page (incl. case studies). */
.intro-split__lead { font-weight: 800; }
/* v114 (Ethan): "What happens next" without the white card: the three steps sit on the navy
   band, divided by thin lines like the stats; step titles 800. */
.steps-card { background: transparent; color: inherit; padding: 0; border-radius: 0; box-shadow: none; }
.steps { gap: 0; }
.steps li { padding-inline: 40px; }
.steps li:first-child { padding-left: 0; }
.steps li:last-child { padding-right: 0; }
.steps li + li { border-left: 1px solid var(--hair); }
.steps__title { font-weight: 800; }
.band--navy .steps :is(.steps__title, .steps__text) { color: var(--white); }
@media (max-width: 900px) {
  .steps li { padding: 28px 0 0; }
  .steps li:first-child { padding-top: 0; }
  .steps li + li { border-left: 0; border-top: 1px solid var(--hair); }
}

/* ================= v116: "Where to start" (Ethan: option C, no numbers) */
/* Gray cards, 2 across; the service link sits right-aligned in green and hovers
   like the footer links: a green line grows under it and the chevron slides in. */
.ws__head { display: grid; gap: 16px; max-width: 820px; margin-bottom: 56px; }
.ws__head > * { margin: 0; }
.ws__head .t-lede { color: var(--ink); }
.ws__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ws__item { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; background: #eeeeee; border-radius: 20px; padding: 32px; }
.ws__problem { margin: 0; font: 800 24px/1.25 var(--font-head); letter-spacing: -0.3px; color: var(--ink); }
.band:has(> .ws) { background: var(--white) !important; }
.ws__link { align-self: flex-end; display: inline-flex; align-items: center; gap: 9px; font: 600 16px/1.3 var(--font-head); color: var(--green-dark); text-decoration: none; text-align: right; }
.ws__label { background-image: linear-gradient(var(--green), var(--green)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; padding-bottom: 3px; transition: background-size 0.25s ease; }
.ws__link::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--green); border-top: 2px solid var(--green); transform: translateX(-6px) rotate(45deg); opacity: 0; transition: opacity 0.2s ease, transform 0.25s ease; }
.ws__link:hover .ws__label, .ws__link:focus-visible .ws__label { background-size: 100% 2px; }
.ws__link:hover::after, .ws__link:focus-visible::after { opacity: 1; transform: translateX(0) rotate(45deg); }
@media (max-width: 900px) { .ws__grid { grid-template-columns: minmax(0, 1fr); } .ws__item { padding: 28px 24px; } }
/* v117: question-and-answer cards. The answer sits under the question at the same size;
   the service link is inline, dark green, and hovers like the footer (growing green line).
   The footer's chevron is left off here because it would push the rest of the sentence. */
.ws__item { justify-content: flex-start; gap: 10px; }
.ws__answer { margin: 0; font: 400 24px/1.25 var(--font-head); letter-spacing: -0.3px; color: var(--ink); }
.ws__answer a { color: var(--green-dark); font-weight: 600; text-decoration: none; background-image: linear-gradient(var(--green), var(--green)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; padding-bottom: 2px; transition: background-size 0.25s ease; }
.ws__answer a:hover, .ws__answer a:focus-visible { background-size: 100% 2px; }
@media (max-width: 640px) { .ws__problem, .ws__answer { font-size: 20px; } }
/* v118 (Ethan): question and answer read as one sentence: bold question, regular answer, no break. */
.ws__qa { margin: 0; font: 400 24px/1.3 var(--font-head); letter-spacing: -0.3px; color: var(--ink); }
.ws__qa .ws__problem { font: inherit; font-weight: 800; }
.ws__qa .ws__answer { font: inherit; }
@media (max-width: 640px) { .ws__qa { font-size: 20px; } }
/* v119 (Ethan): question then the service link with a chevron, on one line; 20px. */
.ws__qa { font-size: 20px; line-height: 1.35; }
.ws__go { display: inline-flex; align-items: center; gap: 4px; color: var(--green-dark); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ws__go .ico { width: 18px; height: 18px; stroke-width: 2; transition: transform 0.2s ease; }
.ws__go .ws__label { background-image: linear-gradient(var(--green), var(--green)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; padding-bottom: 2px; transition: background-size 0.25s ease; }
.ws__go:hover .ws__label, .ws__go:focus-visible .ws__label { background-size: 100% 2px; }
.ws__go:hover .ico, .ws__go:focus-visible .ico { transform: translateX(4px); }
@media (max-width: 640px) { .ws__qa { font-size: 18px; } }
/* v120 (Ethan, trial): "Where to start" one card per row. */
.ws__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ws__item { padding: 24px 32px; }
/* v121 (Ethan): service links right-aligned in each row, question on the left. */
.ws__qa { display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; }
.ws__go { margin-left: auto; }

/* ================ v122: porter page sections (Ethan picked crews A, valet D) */
/* What our crews handle: green band like home "delivers": heading left, white checks right,
   the Saturday line last under a thin divider. */
.crew__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.crew__num { display: none; }
.crew-band { background: var(--green-dark) !important; }
.crew { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start; }
.crew__title { margin: 0; font: 800 56px/1.1 var(--font-head); letter-spacing: -1.12px; color: var(--white); }
.crew__item { margin: 0; display: flex; gap: 14px; align-items: flex-start; }
.crew__text { font: 600 20px/1.4 var(--font-head); letter-spacing: -0.3px; color: var(--white); }
.crew__item:not(.crew__item--note)::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 4px; background: var(--white); -webkit-mask: var(--check-icon) center / 20px 20px no-repeat; mask: var(--check-icon) center / 20px 20px no-repeat; }
.crew__item--note { margin-top: 18px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / 30%); }
.crew__item--note .crew__text { font-weight: 400; font-size: 17px; color: rgb(255 255 255 / 88%); }
@media (max-width: 900px) { .crew { grid-template-columns: minmax(0, 1fr); row-gap: 32px; } .crew__title { font-size: 40px; } }

/* Valet trash vs. porter service: navy band, white text, porter column marked by a green line. */
.vs-band { background: var(--navy) !important; }
.vs__title { margin: 0 0 48px; font: 800 56px/1.1 var(--font-head); letter-spacing: -1.12px; color: var(--white); }
.vs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
.vs__col { margin: 0; border-top: 3px solid rgb(255 255 255 / 30%); padding-top: 24px; }
.vs__col--porter { border-top-color: var(--green); }
.vs__tag { margin: 0 0 14px; font: 800 13px/1.3 var(--font-head); letter-spacing: 1.2px; text-transform: uppercase; color: rgb(255 255 255 / 70%); }
.vs__col--porter .vs__tag { color: var(--white); }
.vs__text { margin: 0; font: 400 22px/1.45 var(--font-head); letter-spacing: -0.3px; color: var(--white); }
.vs__badge { display: none; }
.vs__note { margin-top: 48px; }
.vs__note p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--white); }
.vs__note a { color: #7ee07e; font-weight: 600; text-decoration: none; }
.vs__note a:hover, .vs__note a:focus-visible { text-decoration: underline; }
@media (max-width: 900px) { .vs__title { font-size: 40px; } .vs__grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; } }

/* ============ v123: 6-day schedule section (Ethan picked option A) */
/* Heading left, text right, then the week as seven blocks: green on-site days, Saturday dashed. */
.sched2 { display: grid; gap: 48px; }
.sched2__text { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); column-gap: 96px; row-gap: 20px; align-items: start; }
.sched2__title { grid-row: 1 / span 4; margin: 0; font: 800 40px/1.1 var(--font-head); letter-spacing: -0.8px; color: var(--ink); }
.sched2__text p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--ink); }
.sched2__label { margin: 0 0 16px; font: 800 12px/1 var(--font-head); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.sched2__days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.sched2__day { margin: 0; display: grid; gap: 6px; align-content: end; min-height: 150px; padding: 20px 18px; border-radius: 16px; background: var(--green-dark); }
.sched2__d { font: 800 18px/1.2 var(--font-head); color: var(--white); }
.sched2__h { font: 400 15px/1.3 var(--font-head); color: var(--white); }
.sched2__day.is-call { background: transparent; border: 2px dashed var(--hair); }
.sched2__day.is-call :is(.sched2__d, .sched2__h) { color: var(--ink); }
.sched2__track, .sched2__scale { display: none; }
.sched2__cap { margin: 20px 0 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
@media (max-width: 1199px) { .sched2__text { grid-template-columns: minmax(0, 1fr); } .sched2__title { grid-row: auto; } }
@media (max-width: 900px) { .sched2__days { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sched2__day { min-height: 96px; padding: 14px; } }

/* v130 layout: svc (Ethan picked A): a pillar's sub-services, heading left, rows right divided by lines */
.svc-rows { display: grid; }
.svc-row { display: grid; gap: 12px; padding: 40px 0; border-top: 1px solid var(--hair); }
.svc-row:first-child { padding-top: 0; border-top: 0; }
.svc-row:last-child { padding-bottom: 0; }
.svc-row > * { margin: 0; }
.svc-row__title { font: 800 28px/1.2 var(--font-head); letter-spacing: -0.4px; color: var(--ink); }
.svc-row__text { font-size: 18px; line-height: 1.6; color: var(--muted); }
.svc-row__link { display: inline-flex; align-items: center; gap: 4px; width: fit-content; font-weight: 700; font-size: 16px; color: var(--green-dark); text-decoration: none; }
.svc-row__link .ico { width: 16px; height: 16px; stroke-width: 2; transition: transform 0.2s ease; }
.svc-row__link:hover .ico, .svc-row__link:focus-visible .ico { transform: translateX(3px); }
@media (max-width: 640px) { .svc-row { padding: 32px 0; } .svc-row__title { font-size: 24px; } .svc-row__text { font-size: 17px; } }

/* ==================================================== Site map v3 (v139) = */
.smap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.smap__aside { display: grid; gap: 56px; align-content: start; }
.smap__title { margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--hair); font: 800 28px/1.15 var(--font-head); letter-spacing: -0.8px; color: var(--ink); }
.smap__pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; }
.smap__list, .smap__subs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.smap__subs { margin-top: 12px; gap: 8px; }
.smap__link { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font: 500 17px/1.35 var(--font-body); letter-spacing: -0.2px; }
.smap__title .smap__link { font: inherit; letter-spacing: inherit; }
.smap__link--pillar { font: 800 19px/1.25 var(--font-head); letter-spacing: -0.3px; }
.smap__subs .smap__link { font-size: 15.5px; font-weight: 400; color: var(--muted); }
/* Hover mirrors the footer: a green line grows under the label, a chevron slides in. */
.smap__label { background-image: linear-gradient(var(--green), var(--green)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; padding-bottom: 3px; transition: background-size 0.25s ease; }
.smap__link::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--green); border-top: 2px solid var(--green); transform: translateX(-6px) rotate(45deg); opacity: 0; transition: opacity 0.2s ease, transform 0.25s ease; }
.smap__link:hover::after, .smap__link:focus-visible::after { opacity: 1; transform: translateX(0) rotate(45deg); }
.smap__link:hover .smap__label, .smap__link:focus-visible .smap__label { background-size: 100% 2px; }
.smap__subs .smap__link:hover, .smap__subs .smap__link:focus-visible { color: var(--ink); }
@media (max-width: 1199px) { .smap { grid-template-columns: minmax(0, 1fr); gap: 56px; } .smap__aside { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } }
@media (max-width: 640px) { .smap__pillars, .smap__aside { grid-template-columns: minmax(0, 1fr); } .smap__title { font-size: 24px; } }

/* v153: hero photo options for client review (About). */
.hero-option { margin: 12px 0 0; font: 600 15px/1.3 var(--font-head); letter-spacing: -0.2px; color: var(--muted); }
.hero2__media--option { margin-top: 40px; }

/* v156: intro option A (Ethan): title in the heading column, whole paragraph on the right. */
.jab--intro > .intro-title { grid-column: 1; align-self: start; margin: 0; font: 800 40px/1.1 var(--font-head); letter-spacing: -0.8px; color: var(--ink); }
.jab--intro > .intro-full { grid-column: 2; margin: 0; font-size: 19px; line-height: 1.6; letter-spacing: -0.2px; color: var(--ink); }
@media (max-width: 1199px) { .jab--intro > .intro-title, .jab--intro > .intro-full { grid-column: 1; } }
@media (max-width: 640px) { .jab--intro > .intro-title { font-size: 30px; letter-spacing: -0.6px; } .jab--intro > .intro-full { font-size: 17px; } }
/* v156: case studies have the At a glance rail beside the intro, so the title sits above the paragraph. */
.cs-body .jab--intro > .intro-title, .cs-body .jab--intro > .intro-full { grid-column: 1 / -1; }
.cs-body .jab--intro > .intro-title { font-size: 34px; letter-spacing: -0.7px; margin-bottom: 4px; }