@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,700&family=Sen:wght@400;600;700&display=swap');

/* valley-tree-care — Valley Tree Care (valleytreecare.com)
 *
 * WordPress + Thrive Theme / Thrive Architect, captured 2026-09-24 from 152
 * pages (sitemap + WP REST + link-graph reconcile), 22 linked stylesheets and a
 * live-DOM probe on four templates. Built for the Valley Tree Care wireframe
 * project only: not part of the shared design-system library or its picker.
 *
 * Tokens are ranked by what PAINTS, not by what the CSS declares. The source's
 * top declared greens (#243d20, #3f7039, #4eb151 outside the header icons) and
 * its #03a9f4 blue render on zero elements of the probed templates and are not
 * carried. All three faces are the source's own Google Fonts, so metrics carry
 * with no substitution.
 */

:root {
  /* COLOR — brand, measured off the render */
  --teal: #204147;                 /* every H1/H2/H3: the heading ink */
  --green: #407038;                /* buttons, icons, links, bubbles: 60 painted elements on home */
  --green-hover: #57814f;          /* Thrive hover = the green + 12% white overlay */
  --green-bright: #4eb151;         /* header utility icons only (pixel-sampled) */
  --green-badge: #68a15d;          /* numbered timeline badges (skin colour at 85%) */
  --green-dash: #9fb89b;           /* timeline connector */
  --green-soft: rgba(75, 149, 65, .12);    /* mint icon discs, pill shadow tint */

  /* COLOR — grounds */
  --paper: #ffffff;
  --mint: #f1fbef;                 /* the second ground: service area, city cards, closing section */
  --mist: #f8f8f8;                 /* the service content card's left stop */
  --post-band: #f9f9f9;            /* article body band */
  --charcoal: #232323;             /* both footers */
  --veil: rgba(63, 114, 55, .5);           /* home hero: flat 50% green veil over the photo */
  --wash-a: rgba(77, 144, 65, .85);        /* title bands: 71deg green wash, heavy left */
  --wash-b: rgba(78, 152, 67, .4);
  --lime-wash: rgba(209, 252, 168, .75);   /* testimonials: lime wash over the park photo */

  /* COLOR — ink */
  --ink: #3b3b3b;                  /* body copy, 355 renders */
  --ink-muted: #5c5c5c;            /* fine print on white: 6.6:1 */
  --ink-quiet: #767676;            /* doc chrome only, never body copy */
  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, .6);  /* source .5 on charcoal; lifted to clear 4.5:1 at 14px */
  --on-dark-line: rgba(255, 255, 255, .34);  /* the rating pill outline */

  /* COLOR — rules */
  --rule: #e6e6e6;                 /* hairline under the utility bar */
  --rule-card: #2d4c80;            /* 1px rule between service content-card sections (as served) */
  --rule-dark: #424242;            /* 3px post dividers */
  --border: rgba(0, 0, 0, .1);

  /* TYPE — the source's own faces */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;   /* 700 headings, 400 Oswald body lines */
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-ui: 'Sen', 'DM Sans', system-ui, sans-serif;     /* nav + theme buttons */

  /* GEOMETRY — measured radii. 0 dominates; these are the real steps. */
  --r-pill: 100px;                 /* home CTAs, rating pill, archive pills */
  --r-btn: 14px;                   /* theme solid buttons */
  --r-frame: 10px;                 /* home before/after frames */
  --r-card: 20px;                  /* hero card, mint cards, photo frames */
  --r-card-lg: 22px;               /* closing CTA card */
  --r-bubble: 38px;                /* testimonial bubbles */
  --r-foot: 100px;                 /* the content card's big rounded bottom (80-120px on source) */
  --sh-card: 0 8px 24px rgba(0, 0, 0, .06);
  --sh-frame: 0 8px 12px rgba(0, 0, 0, .25);
  --sh-cta: 0 10px 44px rgba(0, 0, 0, .04);
  --sh-soft: 0 0 9px 1px rgba(0, 0, 0, .15);
  --sh-pill: 0 4px 16px rgba(75, 149, 65, .12);
  --container: 1080px;             /* Thrive content column: 1040-1100px across templates */
  --speed: .3s;
}

/* ── base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .5em;
  color: var(--teal);
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.4375rem); line-height: 1.09; }   /* 55px home, 46px inner */
h2 { font-size: clamp(1.875rem, 1.5rem + 1.3vw, 2.625rem); line-height: 1.3; }    /* 42px, 30px on phones */
h3 { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.5rem); }                        /* 24px */
h4 { font-size: 1.125rem; }
h5 { font-size: clamp(1.1875rem, 1rem + .6vw, 1.5rem); }
p { margin: 0 0 1rem; }
a { color: var(--green); }
img { max-width: 100%; display: block; }
ul { margin: 0 0 1rem; padding: 0; list-style: none; }
strong, b { font-weight: 700; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.section { padding: 80px 0; }
@media (max-width: 767px) { .section { padding: 44px 0; } }
.section.mint { background: var(--mint); }
.section.mist { background: var(--mist); }
.center { text-align: center; }
.lede { font-size: 1.125rem; color: var(--ink); max-width: 760px; }
.center .lede { margin-left: auto; margin-right: auto; }
.oswald-lede { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.25rem, 1rem + .9vw, 1.5625rem); line-height: 1.3; color: var(--green); text-transform: capitalize; }
.fine { font-size: .875rem; color: var(--ink-muted); }
.disc { list-style: disc; padding-left: 1.4em; }
.disc li { margin-bottom: .35rem; }

/* A dark ground is not always .on-dark. The footers, the green title band, the
 * testimonial bubbles and the green CTA box each paint their own dark or
 * saturated ground; name every one of them here so inherited ink never lands
 * on it. Contrast is checked by the gate, not by this comment. */
.on-dark, .footer, .title-band, .green-box { color: var(--on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4,
.title-band h1, .title-band h2, .green-box h2, .green-box h3 { color: var(--on-dark); }
.on-dark p, .green-box p { color: var(--on-dark); }

/* ── buttons: the source's two families ───────────────────────────────── */
/* Home family: 1px green pill outline, uppercase DM Sans 20px bold, and a
 * trailing 38px solid green circle carrying a white arrow. Solid variant
 * fills the pill; the circle then matches so only the arrow shows. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .9rem;
  font-family: var(--font-body); font-weight: 700; font-size: 1.25rem; line-height: 1.2;
  letter-spacing: 1px; text-transform: uppercase; text-decoration: none; text-align: left;
  border: 1px solid var(--green); border-radius: var(--r-pill);
  padding: 8px 8px 8px 20px; color: var(--green); background: transparent; cursor: pointer;
  transition: background-color var(--speed), color var(--speed), border-color var(--speed), transform var(--speed);
}
.btn:hover { background: var(--green); color: var(--on-dark); }
.btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.btn-arrow {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green); color: var(--on-dark);
}
.btn-arrow svg { width: 18px; height: 18px; fill: currentColor; }
.btn:hover .btn-arrow { background: var(--paper); color: var(--green); }
.btn.solid { background: var(--green); color: var(--on-dark); }
.btn.solid:hover { background: var(--paper); color: var(--green); }
.btn.solid:hover .btn-arrow { background: var(--green); color: var(--on-dark); }
@media (max-width: 767px) { .btn { font-size: 1.0625rem; width: 100%; justify-content: space-between; } }

/* Theme family: solid green, 14px radius, a 3px darker lip on the bottom edge,
 * Sen 700 uppercase with 2px tracking, no icon. */
.btn-lip {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-weight: 700; font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem);
  letter-spacing: 2px; text-transform: uppercase; text-decoration: none; text-align: center;
  color: var(--on-dark); background: var(--green);
  border: 0; border-bottom: 3px solid rgba(0, 0, 0, .14); border-radius: var(--r-btn);
  padding: 18px 25px; cursor: pointer; transition: background-color var(--speed);
}
.btn-lip:hover { background: var(--green-hover); }
.btn-lip:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* Form submit: square green block, soft drop shadow, Sen 700 16px, 4px tracking. */
.btn-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  font-family: var(--font-ui); font-weight: 700; font-size: 1rem; letter-spacing: 4px;
  text-transform: uppercase; color: var(--on-dark); background: var(--green);
  border: 0; border-radius: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  padding: 18px 20px; cursor: pointer; transition: background-color var(--speed);
}
.btn-submit:hover { background: var(--green-hover); }

/* ── icon ring (process steps) ────────────────────────────────────────── */
.icon-ring {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%;
  border: 3px solid var(--green); color: var(--green);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color var(--speed), color var(--speed);
}
.icon-ring svg { width: 30px; height: 30px; fill: currentColor; }
.icon-ring:hover { background: var(--green); color: var(--on-dark); }
@media (max-width: 767px) { .icon-ring { flex-basis: 46px; width: 46px; height: 46px; border-width: 2px; } .icon-ring svg { width: 25px; height: 25px; } }

/* ── site chrome: utility bar, header, footer ─────────────────────────── */
.utility-bar { background: var(--paper); border-bottom: 1px solid var(--rule); font-size: .875rem; letter-spacing: 1px; text-transform: uppercase; }
.utility-bar .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: .5rem; padding-bottom: .5rem; }
.utility-bar a { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); text-decoration: none; }
.utility-bar a:hover { color: var(--green); }
.utility-bar svg { width: 20px; height: 20px; fill: var(--green-bright); flex: 0 0 20px; }
.utility-bar .mail { text-transform: none; letter-spacing: 0; }
@media (max-width: 767px) { .utility-bar .mail { display: none; } }

.nav { background: var(--paper); }
.nav > .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: .75rem; padding-bottom: .75rem; }
.nav .brand-mark { display: flex; align-items: center; flex: 0 0 auto; }
.nav .brand-mark img { width: 167px; height: auto; }
.nav .links { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0; }
.nav .links a { font-family: var(--font-ui); font-weight: 700; font-size: 1rem; color: var(--green); text-decoration: none; padding: 8px 10px; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 10px 85%; background-repeat: no-repeat; transition: background-size var(--speed); }
.nav .links a:hover { background-size: calc(100% - 20px) 1px; }
@media (max-width: 768px) { .nav .brand-mark img { width: 120px; } }

.footer { background: var(--charcoal); padding: 40px 0 0; }
.footer .top { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; align-items: center; padding-bottom: 20px; }
.footer .top > * { min-width: 0; }
@media (max-width: 880px) { .footer .top { grid-template-columns: 1fr; justify-items: start; } }
.footer .brand img { width: 213px; height: auto; }
.footer .f-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .5rem; }
.footer .f-links a { font-family: var(--font-ui); font-size: .875rem; color: var(--on-dark-muted); text-decoration: none; padding: 2px 5px; }
.footer .f-links a:hover { color: var(--on-dark); }
.footer .rating-row { display: flex; justify-content: center; margin-top: 1rem; }
.rating-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--on-dark-line); border-radius: 999px; padding: .35rem .6rem;
  font-family: system-ui, -apple-system, sans-serif; font-weight: 500; font-size: .8125rem;
  color: var(--on-dark-muted); text-decoration: none;
}
.rating-pill b { color: var(--on-dark); }
.footer .legal { border-top: 1px solid rgba(255, 255, 255, .04); padding: 20px 0; text-align: center; font-size: .875rem; color: var(--on-dark-muted); }
.footer .legal a { color: var(--on-dark-muted); }
.footer .legal b a, .footer .legal a b { color: var(--on-dark); }

/* ── kit note: the kit's own labels, exempt from the verbatim gate ────── */
.kit-note { font-family: var(--font-body); font-size: .8125rem; font-style: italic; color: var(--ink-quiet); }
.on-dark .kit-note, .footer .kit-note, .title-band .kit-note, .green-box .kit-note { color: var(--on-dark-muted); }
.slot { border: 1px dashed var(--border); border-radius: var(--r-card); padding: 1.25rem; text-align: center; background: var(--paper); }

/* ── doc chrome: ds-nav, catalog, gallery ─────────────────────────────── */
.ds-nav { background: var(--charcoal); color: var(--on-dark); padding: 1rem 0; }
.ds-nav .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; max-width: 1280px; }
.lockup-text { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; margin: 0; color: var(--on-dark); }
.lockup-text small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .75rem; color: var(--on-dark-muted); letter-spacing: .08em; text-transform: uppercase; }
.ds-nav .tabs { display: flex; gap: .5rem; flex-wrap: wrap; }
.ds-nav .tab { font-family: var(--font-ui); font-size: .8125rem; font-weight: 700; padding: .5rem 1rem; border-radius: var(--r-pill); color: rgba(255, 255, 255, .78); text-decoration: none; transition: background-color var(--speed), color var(--speed); }
.ds-nav .tab:hover { color: var(--on-dark); }
.ds-nav .tab.active { background: var(--green); color: var(--on-dark); }

.ds-hero { padding: 56px 0 40px; border-bottom: 1px solid var(--border); }
.meta-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 1.5rem; margin: 2rem 0 0; }
.meta-strip > * { min-width: 0; }
.meta-strip dt { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-quiet); }
.meta-strip dd { margin: .25rem 0 0; font-weight: 600; font-size: .9375rem; }
.door-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1.5rem; }
.door-cards > * { min-width: 0; }
.door { display: block; background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 1.5rem; text-decoration: none; color: var(--ink); transition: box-shadow var(--speed), transform var(--speed), border-color var(--speed); }
.door:hover { transform: translateY(-4px); border-color: var(--green); }
.door h3 { color: var(--teal); }
.files-list li { padding: .625rem 0; border-bottom: 1px solid var(--border); font-size: .9375rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.files-list .f { font-weight: 700; min-width: 190px; }
.files-list .d { color: var(--ink-muted); }
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 1rem; }
.swatch-grid > * { min-width: 0; }
.swatch { border: 1px solid var(--border); border-radius: var(--r-frame); overflow: hidden; background: var(--paper); }
.swatch .chip { height: 84px; }
.swatch .meta { padding: .625rem .75rem; font-size: .8125rem; }
.swatch .meta b { display: block; }
.type-spec { border-bottom: 1px solid var(--border); padding: 1.25rem 0; }
.type-spec .label { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-quiet); margin-bottom: .375rem; }
.anchor-tile { background: var(--mint); border: 1px solid var(--border); border-radius: var(--r-card); padding: 1.25rem; }
.grid { display: grid; gap: 1.5rem; }
.grid > * { min-width: 0; }

.sx-header { padding: 48px 0 32px; border-bottom: 1px solid var(--border); }
.sx-index { padding: 32px 0; border-bottom: 1px solid var(--border); }
.sx-index .grid { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: .25rem 1.5rem; }
.sx-index a { font-size: .875rem; color: var(--ink); text-decoration: none; display: block; padding: .25rem 0; }
.sx-index a:hover { color: var(--green); }
.sx-pattern { padding: 40px 16px; border-bottom: 1px solid var(--border); }
.pattern-meta { max-width: 1280px; margin: 0 auto 1.25rem; display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; }
.pattern-meta > * { min-width: 0; }
@media (max-width: 880px) { .pattern-meta { grid-template-columns: 1fr; gap: .5rem; } }
.pattern-meta .id { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-quiet); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; overflow-wrap: anywhere; }
.pattern-meta .num { color: var(--green); }
.pattern-meta .signature { background: var(--green); color: var(--on-dark); border-radius: var(--r-pill); padding: .125rem .5rem; font-size: .625rem; }
.pattern-meta .name { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; margin: 0; color: var(--teal); overflow-wrap: anywhere; }
.pattern-meta .purpose { margin: .25rem 0 0; color: var(--ink-muted); font-size: .9375rem; }
.sx-demo { max-width: 1280px; margin: 0 auto; border: 1px solid var(--border); border-radius: var(--r-frame); overflow: hidden; position: relative; padding: 0; background: var(--paper); }
.demo-label { position: absolute; top: 8px; right: 12px; z-index: 5; font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); background: rgba(255, 255, 255, .92); border-radius: var(--r-pill); padding: .125rem .5rem; }
@media (max-width: 600px) {
  body .sx-pattern { padding-left: 0; padding-right: 0; }
  body .sx-demo { border-left: 0; border-right: 0; border-radius: 0; }
  body .pattern-meta { padding-left: 16px; padding-right: 16px; }
  body .sx-header .container, body .sx-index .container { padding-left: 16px; padding-right: 16px; }
}
.pages-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 2rem; }
.pages-gallery > * { min-width: 0; }
.page-card { border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-card); background: var(--paper); }
.page-card .frame { height: 420px; overflow: hidden; border-bottom: 1px solid var(--border); }
.page-card iframe { width: 1440px; height: 1400px; border: 0; transform: scale(.3); transform-origin: 0 0; }
.page-card .body { padding: 1.25rem; }
.page-card .body p { color: var(--ink-muted); font-size: .9375rem; margin: 0 0 .875rem; }


/* ══ A-chrome ══════════════════════════════════════════════════════ */
/* ── A-chrome: site chrome. Global header (209), archive header (88), charcoal
 * footer (91), post footer (587), landing mini header, page-title band,
 * attachment title band, archive breadcrumb band. ──────────────────────── */

:root {
  --burger-ink: #243d20;       /* header 209 hamburger, phones only (rgb 36,61,32) */
  --burger-dark: #0c1115;      /* archive header 88 hamburger (Thrive skin colour 4) */
  --strip-fill: #f8fbf8;       /* archive header contact pill: rgba(75,144,65,.04) on white, pixel-sampled */
  --ring-soft: rgba(80, 152, 67, .4);   /* attachment band avatar ring (skin colour 29) */
  --glyph-quiet: #d7d7d7;      /* attachment band comment glyph */
  --sh-pill-hover: 0 14px 40px rgba(63, 114, 55, .18);  /* landing mini header APPLY NOW hover */
}

/* ── shared "More" dropdown (headers 209 and 88, footer 91) ───────────── */
.chr-more { position: relative; display: inline-flex; align-items: center; }
.chr-more-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
  padding: 8px 10px; line-height: inherit;
}
.chr-more-btn svg { width: 9px; height: 14px; fill: currentColor; }
.chr-more-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.chr-more-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 20;
  display: none; flex-direction: column; min-width: 160px; padding: 6px 0;
  background: var(--paper); border-radius: 3px; box-shadow: var(--sh-soft);
}
.chr-more:hover .chr-more-menu,
.chr-more:focus-within .chr-more-menu { display: flex; }

/* ── 01 header-utility-nav (symbol 209) ───────────────────────────────── */
.hdr209 { background: var(--paper); }
.hdr209 .utility-bar { border-bottom: 0; }
.hdr209 .utility-bar .container { position: relative; padding-top: 18px; padding-bottom: 8px; }
.hdr209 .utility-bar .container::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 1px; background: var(--rule); }
.hdr209 .utility-bar .mail { letter-spacing: 1px; }
.hdr209 .nav > .container { gap: 12px; padding-top: 8px; padding-bottom: 12px; }
.hdr209 .nav .links { gap: 0 10px; margin-right: -15px; }
.hdr209 .chr-more-btn {
  font-family: var(--font-ui); font-weight: 700; font-size: 1rem; color: var(--green);
  background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 10px 85%; background-repeat: no-repeat;
  transition: background-size var(--speed);
}
.hdr209 .chr-more:hover .chr-more-btn { background-size: calc(100% - 20px) 1px; }
.hdr209 .chr-more-menu a { padding: 8px 16px; background-position: 16px 85%; }
.hdr209 .chr-more-menu a:hover { background-size: calc(100% - 32px) 1px; }

/* ── 02 header-archive-pill-strip (symbol 88) ─────────────────────────── */
.arch88 { background: var(--paper); padding-bottom: 6px; }
.arch88 .nav > .container {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 20px;
  padding-top: 8px; padding-bottom: 10px;
}
.arch88 .nav > .container > * { min-width: 0; }
.arch88 .nav .brand-mark img { width: 220px; }
.arch88 .nav .links { justify-self: center; max-width: 720px; justify-content: center; gap: 0 30px; }
.arch88 .nav .links a,
.arch88 .chr-more-btn { font-family: var(--font-ui); font-weight: 700; font-size: .9375rem; line-height: 1.6; color: var(--ink); padding: 0 5px; }
.arch88 .nav .links a { background-position: 5px 92%; }
.arch88 .nav .links a:hover { color: var(--green); background-size: calc(100% - 10px) 1px; }
.arch88 .chr-more-btn:hover { color: var(--green); }
.arch88 .chr-more-menu a { padding: 8px 16px; }
.arch88-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 8px 15px;
  margin: 0; padding: 9px 8px; list-style: none;
  background: var(--strip-fill); border-radius: var(--r-pill);
}
.arch88-item { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 1rem; line-height: 1.4; color: var(--ink); }
.arch88-item .kit-note { line-height: 1.3; color: var(--ink-muted); }
.arch88-disc {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green-soft); color: var(--green);
}
.arch88-disc svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 880px) {
  .arch88 .nav > .container { grid-template-columns: 1fr; justify-items: center; gap: 8px; }
}
@media (max-width: 767px) {
  .arch88-strip { display: none; }
}

/* ── phone header layer: 209 + 88 (shared drawer from ../mobile-nav.js) ── */
@media (max-width: 768px) {
  .hdr209 .utility-bar .container::after { left: 16px; right: 16px; }
  .hdr209 .utility-bar .container { padding-top: 16px; }
  .hdr209 .nav,
  .arch88 .nav { padding: 0; }
  /* drawer: one column that scrolls, never a second wrapped column */
  .hdr209 .nav .links,
  .arch88 .nav .links { flex-wrap: nowrap; margin-right: 0; max-width: none; }
  .hdr209 .nav .links > *,
  .arch88 .nav .links > * { flex-shrink: 0; }
  .arch88 .nav .links { justify-content: flex-start; }
  .arch88 .nav .links > a { padding: 16px 4px; font-size: 16px; font-weight: 500; line-height: 1.6; }
  /* closed drawer takes no focus; on a page carrying two headers (the catalog)
     only the drawer whose own burger was pressed opens */
  .hdr209 .nav .links,
  .arch88 .nav .links { visibility: hidden; }
  body.nav-open .hdr209 .nav .links,
  body.nav-open .arch88 .nav .links { visibility: visible; }
  body.nav-open .hdr209 .nav:not(:has(.nav-burger[aria-expanded="true"])) .links,
  body.nav-open .arch88 .nav:not(:has(.nav-burger[aria-expanded="true"])) .links { visibility: hidden; opacity: 0; pointer-events: none; }
  .arch88 .nav > .container { padding-top: 14px; padding-bottom: 14px; }
  .hdr209 .nav .container .brand-mark img { width: 200px; height: auto; max-width: none; }
  .arch88 .nav .container .brand-mark img { width: 110px; height: auto; max-width: none; }
  .hdr209 .nav-burger,
  .arch88 .nav-burger { border: 0; border-radius: 0; width: 40px; height: 40px; }
  .hdr209 .nav-burger { color: var(--burger-ink); }
  .arch88 .nav-burger { color: var(--burger-dark); }
  .hdr209 .nav-burger span, .hdr209 .nav-burger span::before, .hdr209 .nav-burger span::after { width: 30px; height: 2px; }
  .hdr209 .nav-burger span::before { top: -9px; }
  .hdr209 .nav-burger span::after { top: 9px; }
  .arch88 .nav-burger span, .arch88 .nav-burger span::before, .arch88 .nav-burger span::after { width: 26px; height: 2px; }
  .arch88 .nav-burger span::before { top: -8px; }
  .arch88 .nav-burger span::after { top: 8px; }
  /* the drawer only styles direct links: flatten More into rows */
  .nav .links .chr-more { display: block; width: 100%; }
  .nav .links .chr-more-btn { display: none; }
  .nav .links .chr-more-menu { display: flex; position: static; transform: none; min-width: 0; padding: 0; background: transparent; border-radius: 0; box-shadow: none; }
  .nav .links .chr-more-menu a {
    display: block; width: 100%; padding: 16px 4px; border-bottom: 1px solid var(--border);
    font-size: 16px; font-weight: 500; color: var(--ink); text-align: left; background: transparent;
  }
  .nav .links .chr-more-menu a:last-child { border-bottom: 0; }
}

/* ── 03 footer-charcoal-rating-pill (symbol 91) ───────────────────────── */
.ft91 .f-links { align-items: center; }
.ft91 .chr-more-btn { font-family: var(--font-ui); font-size: .875rem; color: var(--on-dark-muted); padding: 2px 5px; }
.ft91 .chr-more-btn:hover { color: var(--on-dark); }
.ft91 .chr-more-menu { background: var(--charcoal); box-shadow: var(--sh-soft); }
.ft91 .chr-more-menu a { padding: 6px 14px; }
.footer.ft91 .legal { margin: 0; }
.ft91 .legal a { font-weight: 700; }
.ft91-toggle { display: none; }
.ft91-burger { display: none; }
@media (max-width: 1023px) {
  .footer.ft91 .top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
  .footer.ft91 .brand { flex: 1 1 150px; max-width: 171px; min-width: 0; }
  .footer.ft91 .brand img { width: 100%; }
  .ft91-toggle { display: block; position: absolute; top: 0; right: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .ft91-right { position: relative; flex: 1 1 130px; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; }
  .ft91-burger { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; color: var(--on-dark); cursor: pointer; }
  .ft91-burger svg { width: 22px; height: 22px; fill: currentColor; }
  .ft91-toggle:focus-visible + .ft91-burger { outline: 2px solid var(--on-dark); outline-offset: 3px; }
  .footer.ft91 .f-links { display: none; width: 100%; flex-direction: column; align-items: flex-end; gap: 0; }
  .footer.ft91 .ft91-toggle:checked ~ .f-links { display: flex; }
  .footer.ft91 .f-links a { padding: 6px 5px; }
  .ft91 .chr-more { flex-direction: column; align-items: flex-end; }
  .ft91 .chr-more-btn { display: none; }
  .ft91 .chr-more-menu { display: flex; position: static; transform: none; min-width: 0; padding: 0; background: transparent; box-shadow: none; align-items: flex-end; }
  .footer.ft91 .rating-row { margin-top: 0; justify-content: flex-end; }
  .ft91 .rating-pill { display: inline-block; border-radius: 20px; line-height: 1.35; }
}
@media (max-width: 768px) {
  .footer.ft91 { padding: 30px 0 0; }
  .footer.ft91 .legal { font-size: .6875rem; letter-spacing: 1px; padding: 16px 0; }
}

/* ── 04 footer-post-minimal (symbol 587) ──────────────────────────────── */
.footer.ftpost { padding: 40px 0; text-align: center; }
.ftpost-logo { display: block; width: 120px; margin: 0 auto; }
.ftpost-logo img { width: 100%; height: auto; }
.ftpost-copy { margin: 8px 0 0; font-size: .875rem; color: var(--on-dark-muted); }
.ftpost-copy a { color: inherit; font-weight: 700; }
.ftpost-copy a:hover { color: var(--on-dark); }
@media (max-width: 768px) {
  .footer.ftpost { padding: 30px 0 20px; }
  .ftpost-copy { font-size: .75rem; }
}

/* ── 05 lp-mini-header-pill-cta ───────────────────────────────────────── */
.lpm-bar { background: var(--mist); }
.lpm-bar > .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 138px; padding-top: 6px; padding-bottom: 6px; }
.lpm-logo { width: 214px; height: auto; flex: 0 1 auto; min-width: 0; }
.lpm-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  min-width: 184px; padding: 20px; border-radius: var(--r-pill);
  background: var(--green); color: var(--on-dark); box-shadow: var(--sh-pill);
  font-family: var(--font-ui); font-weight: 700; font-size: .75rem; line-height: 1.2; letter-spacing: 2px;
  text-transform: uppercase; text-decoration: none; transition: box-shadow var(--speed);
}
.lpm-btn:hover { box-shadow: var(--sh-pill-hover); }
.lpm-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
@media (max-width: 767px) {
  .lpm-bar > .container { min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  .lpm-logo { width: min(170px, 44%); }
  .lpm-btn { flex: 0 1 47%; min-width: 0; padding: 13px 8px 12px; }
}

/* ── 06 title-band-green-wash (theme 103 top section) ─────────────────── */
.tb-band {
  position: relative; overflow: hidden;
  background-color: var(--green);
  background-size: auto, cover; background-position: center, center; background-repeat: no-repeat;
}
.tb-band.tb-desert { background-image: linear-gradient(71deg, var(--wash-a) 0%, var(--wash-b) 100%), url('assets/valley-tree-care-brand/valley-tree-care-desert-landscape.webp'); }
.tb-band.tb-palms { background-image: linear-gradient(71deg, var(--wash-a) 0%, var(--wash-b) 100%), url('assets/valley-tree-care-brand/valley-tree-care-palm-mist.webp'); }
.tb-band > .container { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 275px; padding: 40px 20px; }
.tb-band + .tb-band { margin-top: 12px; }
.tb-ring { position: absolute; top: 0; left: 111px; width: 350px; height: 350px; fill: rgba(255, 255, 255, .07); pointer-events: none; }
.tb-band .container .tb-title {
  position: relative; z-index: 1; width: fit-content; max-width: min(50%, 500px); margin: 0 auto;
  font-size: clamp(2.625rem, 2.4rem + .5vw, 2.875rem); line-height: 1.35; text-align: left; color: var(--on-dark);
}
@media (max-width: 1023px) {
  .tb-band > .container { min-height: 200px; padding-left: 40px; padding-right: 40px; }
  .tb-ring { width: 250px; height: 250px; }
}
@media (max-width: 767px) {
  .tb-band { border-radius: 0 0 40px 40px; }
  .tb-band > .container { min-height: 150px; padding: 20px; }
  .tb-ring { width: 140px; height: 140px; left: 57px; }
  .tb-band .container .tb-title { max-width: 100%; }
}

/* ── 07 attachment-title-meta-band (theme 48 top section) ─────────────── */
.att-band { background: var(--paper); padding: 80px 0 20px; }
.att-band .container .att-title {
  margin: 0 0 30px; text-align: center; color: var(--ink);
  font-size: clamp(2.125rem, 1.6rem + 1.6vw, 2.875rem); line-height: 1.3;
}
.att-title a { color: inherit; text-decoration: underline; text-underline-offset: .12em; }
.att-meta { display: flex; align-items: center; gap: 16px; font-size: 1.125rem; color: var(--ink); }
.att-avatar {
  flex: 0 0 62px; width: 62px; height: 62px; border-radius: 50%;
  border: 4px solid var(--ring-soft); background: var(--mint); color: var(--green-dash);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
.att-avatar svg { width: 34px; height: 34px; fill: currentColor; }
.att-name { min-width: 0; }
.att-comments { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.att-comments svg { width: 22px; height: 22px; fill: var(--glyph-quiet); flex: 0 0 22px; }
.att-comments:hover { color: var(--green); }
@media (max-width: 767px) {
  .att-band { padding: 40px 0 20px; }
  .att-band .container .att-title { margin-bottom: 20px; }
  .att-meta { gap: 12px; }
  .att-name { font-size: .875rem; }
  .att-comments { font-size: .75rem; gap: 8px; }
  .att-comments svg { width: 16px; height: 16px; flex-basis: 16px; }
}

/* ── 08 archive-breadcrumb-band (theme 52 top section) ────────────────── */
.crumb-band { background: var(--mist); min-height: 124px; display: flex; flex-direction: column; justify-content: flex-end; }
.crumb-band + .crumb-band { margin-top: 12px; }
.crumb-list {
  display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 9px 0; list-style: none;
  font-family: var(--font-ui); font-size: .8125rem; line-height: 1.6; color: var(--green);
}
.crumb-item { display: inline-flex; align-items: center; min-width: 0; }
.crumb-list a { color: inherit; text-decoration: none; }
.crumb-list a:hover { text-decoration: underline; }
.crumb-sep { margin: 0 10px; }
.crumb-leaf span { display: inline-block; max-width: 80ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
@media (max-width: 1023px) {
  .crumb-leaf span { max-width: 25ch; }
}


/* ══ B-home ══════════════════════════════════════════════════════ */
/* B-home: the home page's signature sections (09 hero card, 10 process orbit,
 * 11 diagnostics split, 12 before/after frames, 13 service area, 14 testimonial
 * bubbles, 15 closing CTA card), plus the city-page variants of 12 and 13.
 * Stems: .hc- .orbit- .dx- .ba- .sa- .bubble- .rcta- */

:root {
  --sa-mint-wash: #f3fcf1;                  /* home service area ground: rgba(241,251,239,.85) over white */
  --dx-wash: rgba(63, 114, 55, .1);         /* diagnostics: 10% green wash, top layer over the palm photo */
  --dx-fade: rgba(255, 255, 255, .75);      /* diagnostics: right-edge stop of the 270deg white fade */
  --bubble-lime: #d1fca8;                   /* testimonials: solid floor under the lime wash + park photo */
  --bubble-name: #000000;                   /* testimonials: reviewer name H4 (Oswald 700 18px) */
  --bubble-sheen: rgba(255, 255, 255, .22); /* testimonials: 243deg sheen on the quote medallion */
  --bubble-glyph: rgba(255, 255, 255, .3);  /* testimonials: quote-left glyph */
  --rcta-watermark: rgba(75, 144, 65, .04); /* closing CTA: 350px dot-circle watermark */
}

/* Shared: the home pill CTA paints a 24px label on the live page (17px cap
 * height, 408px label at 1440), wider than the foundation's 20px .btn. */
.hc-copy .btn, .orbit-cta .btn, .ba-cta .btn, .bubble-cta .btn, .rcta-card .btn { font-size: 1.5rem; }

/* Shared: the mobile layer resets every .btn to 13px 24px / 14px at <=768px,
 * which squashes the pill-and-circle CTA. The source's phone button keeps the
 * circle, fills the column and centres a two-line label. */
@media (max-width: 768px) {
  .hc-copy .btn, .orbit-cta .btn, .ba-cta .btn, .bubble-cta .btn, .rcta-card .btn {
    width: 100%; padding: 8px 8px 8px 20px; font-size: 1.0625rem;
    justify-content: space-between; text-align: center;
  }
}

/* ── 09 hero-card-on-washed-photo ─────────────────────────────────────── */
.hc-section {
  padding: 80px 40px 100px;
  background-color: var(--green);           /* solid floor under veil + photo */
  background-image: linear-gradient(var(--veil), var(--veil)),
    url('assets/valley-tree-care-brand/valley-tree-care-hero-desert.webp');
  background-size: cover; background-position: 50% 100%; background-repeat: no-repeat;
}
@media (max-width: 560px) {                   /* phone crop: the centre strip, same scale */
  .hc-section { background-image: linear-gradient(var(--veil), var(--veil)),
    url('assets/valley-tree-care-brand/valley-tree-care-hero-desert-sm.webp'); }
}
.hc-card {
  max-width: 1100px; margin: 0 auto; padding: 40px;
  background: var(--paper); border-radius: var(--r-card); box-shadow: var(--sh-card);
  display: grid; grid-template-columns: 55.6% 44.4%; align-items: center;
}
.hc-card > * { min-width: 0; }
.hc-section .hc-copy h1 { font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.4375rem); line-height: 1.09; margin: 0 0 .45em; }
.hc-section .hc-copy h5 { margin: 0 0 46px; }
.hc-copy { padding: 0 30px 25px 0; }
.hc-copy .btn { margin-bottom: 1.4rem; }
.hc-copy p { font-size: 1.125rem; line-height: 1.4; letter-spacing: -1px; margin: 0; padding-bottom: 20px; }
.hc-copy p:last-child { padding-bottom: 0; }
.hc-media { display: flex; justify-content: center; }
.hc-tree { width: 400px; max-width: 100%; height: 360px; object-fit: cover; object-position: 50% 50%; }
@media (max-width: 880px) {
  .hc-card { grid-template-columns: minmax(0, 1fr); }
  .hc-media { order: -1; margin-bottom: 30px; }
  .hc-copy { padding: 0; }
}
@media (max-width: 767px) {
  .hc-section { padding: 20px 15px 40px; }
  .hc-card { padding: 25px; }
  .hc-tree { width: 250px; height: 250px; }
  .hc-section .hc-copy h5 { margin-bottom: 1.5rem; }
}

/* ── 10 process-orbit-circle-photo ────────────────────────────────────── */
.orbit { padding: 80px 40px 60px; background: var(--paper); }
.orbit-inner { max-width: 1100px; margin: 0 auto; }
.orbit .orbit-inner h2 { text-align: center; font-size: clamp(1.875rem, 1.5rem + 1.3vw, 2.625rem); margin: 0 0 20px; }
.orbit-intro.oswald-lede { max-width: 760px; margin: 0 auto 56px; text-align: center; line-height: 1.4; }
.orbit-grid { display: grid; grid-template-columns: 1fr 317px 1fr; gap: 30px; align-items: center; }
.orbit-grid > * { min-width: 0; }
.orbit-col { display: flex; flex-direction: column; gap: 85px; }
.orbit-step { display: flex; align-items: center; gap: 26px; }
.orbit-col.is-left .orbit-step { justify-content: flex-end; text-align: right; }
.orbit-col.is-left .icon-ring { order: 2; }
.orbit-step-text { max-width: 262px; min-width: 0; }
.orbit .orbit-step h3 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 10px; }
.orbit .orbit-step h3 .step-num-accent { font-size: 2.8125rem; color: var(--green); }
.orbit-step p { font-size: 1rem; line-height: 1.4; margin: 0; }
.orbit-step p a { color: inherit; text-decoration: none; }
.orbit-photo { width: 317px; max-width: 100%; aspect-ratio: 317 / 309; border-radius: 50%; overflow: hidden; }
.orbit-photo img { width: 100%; height: 100%; object-fit: cover; }
.orbit-cta { display: flex; justify-content: center; margin-top: 70px; }
@media (max-width: 880px) {
  .orbit-grid { grid-template-columns: minmax(0, 1fr); gap: 50px; }
  .orbit-photo { width: 350px; margin: 0 auto; }
  .orbit-col { gap: 50px; }
}
@media (max-width: 767px) {
  .orbit { padding: 40px 20px; }
  .orbit-intro.oswald-lede { font-size: 1.25rem; }
  .orbit-step { gap: 20px; }
}

/* ── 11 diagnostics-split-misty-palms ─────────────────────────────────── */
.dx-section {
  padding: 40px;
  background-color: var(--paper);           /* solid floor: the copy sits on near-white */
  background-image: linear-gradient(var(--dx-wash), var(--dx-wash)),
    linear-gradient(270deg, var(--dx-fade) 0%, var(--paper) 100%),
    url('assets/valley-tree-care-brand/valley-tree-care-palm-mist.webp');
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.dx-inner { max-width: 1100px; min-height: 577px; margin: 0 auto; display: grid; grid-template-columns: 45% 55%; align-items: center; }
.dx-inner > * { min-width: 0; }
.dx-photo { width: 479px; max-width: 100%; aspect-ratio: 479 / 338; border-radius: 44px; overflow: hidden; }
.dx-photo img { width: 100%; height: 100%; object-fit: cover; }
.dx-copy { padding: 0 60px; }
.dx-section .dx-copy h2 { font-size: clamp(1.875rem, 1.5rem + 1.3vw, 2.625rem); line-height: 1.3; margin: 0 0 16px; max-width: 360px; }
.dx-copy p { font-size: 1.125rem; line-height: 1.7; margin: 0; }
.dx-copy p strong { text-decoration: underline; }
@media (max-width: 880px) {
  .dx-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 24px; }
  .dx-copy { padding: 0; }
  .dx-photo { width: 100%; }
}
@media (max-width: 767px) {
  .dx-section { padding: 40px 20px 30px; }
  .dx-photo { border-radius: 30px; aspect-ratio: 350 / 248; }
  .dx-copy p { line-height: 1.4; }
}

/* ── 12 before-after-framed-photos ────────────────────────────────────── */
.ba-section { padding: 60px 40px; background: var(--paper); }
.ba-inner { max-width: 1100px; margin: 0 auto; }
.ba-section .ba-inner > h2 { text-align: center; font-size: clamp(1.875rem, 1.5rem + 1.3vw, 2.625rem); margin: 0 0 40px; }
.ba-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 66px 30px; }
.ba-grid > * { min-width: 0; }
.ba-item { text-align: center; }
.ba-section .ba-item h3 { font-size: 1.5rem; margin: 0 0 4px; color: var(--teal); }
.ba-section .ba-item h3.is-before { color: var(--green); }
.ba-cap { font-size: 1.125rem; font-style: italic; font-weight: 700; margin: 0 0 12px; }
.ba-frame { height: 552px; border: 2px solid var(--green); border-radius: var(--r-frame); box-shadow: var(--sh-frame); overflow: hidden; }
.ba-frame img { width: 100%; height: 100%; object-fit: cover; }
.ba-cta { display: flex; justify-content: center; margin-top: 56px; }
/* city-page variant: four-up row, teal 34px labels, no captions, 20px frames */
.ba-section.is-city { padding-top: 20px; padding-bottom: 20px; }
.ba-section.is-city .ba-grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 30px 16px; }
.ba-section.is-city .ba-item h3 { font-size: clamp(1.75rem, 1.4rem + .9vw, 2.125rem); color: var(--teal); margin-bottom: 12px; }
.ba-section.is-city .ba-frame { max-width: 347px; height: auto; aspect-ratio: 247 / 346; margin: 0 auto; border-radius: var(--r-card); }
.ba-section.is-city .ba-cta { margin: 30px 0 10px; }
.ba-variant-note { max-width: 1100px; margin: 0 auto; padding: 18px 40px 0; }
@media (max-width: 767px) {
  .ba-section { padding: 40px 20px; }
  .ba-frame { height: auto; aspect-ratio: 531 / 552; }
  .ba-grid { gap: 40px; }
  .ba-variant-note { padding: 18px 20px 0; }
}

/* ── 13 service-area-map-city-list ────────────────────────────────────── */
/* Linked cities: the source paints rgba(77,144,65,.85) (2.9:1 on the mint);
 * lifted to --green to clear 4.5:1 at 18px. */
.sa-section { padding: 0 40px; background: var(--sa-mint-wash); }
.sa-panel { max-width: 1100px; margin: 0 auto; padding: 20px 20px 60px; background: var(--mint); border-radius: var(--r-card); }
.sa-section .sa-panel h2 { text-align: center; font-size: clamp(1.875rem, 1.5rem + 1.3vw, 2.625rem); margin: 0 0 40px; }
.sa-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; align-items: center; }
.sa-row > * { min-width: 0; }
/* 351px frame as served; the kit's map file carries wider transparent margins
 * than the served PNG, so it is scaled up and cropped to paint the same 293px map. */
.sa-map { position: relative; width: 351px; max-width: 100%; aspect-ratio: 351 / 400; margin: 0 auto; overflow: hidden; }
.sa-map img { position: absolute; left: -22.1%; top: -5.25%; width: 132.8%; max-width: none; height: auto; }
.sa-list { list-style: disc; padding-left: 1.3em; margin: 0; align-self: start; font-size: 1.125rem; line-height: 22px; color: var(--ink); }
.sa-list li { padding: 11px 0; }
.sa-list li::marker { color: var(--charcoal); }
.sa-list a { color: var(--green); text-decoration: none; }
.sa-list a:hover { text-decoration: underline; }
/* city-page variant: flat white, no panel, Sen items, tight rhythm */
.sa-section.is-city { background: var(--paper); padding-top: 20px; padding-bottom: 40px; }
.sa-section.is-city .sa-panel { background: transparent; padding-bottom: 0; }
.sa-section.is-city .sa-list { font-family: var(--font-ui); font-size: 1.0625rem; }
.sa-section.is-city .sa-list li { padding: 4px 0; }
.sa-variant-note { max-width: 1100px; margin: 0 auto; padding: 18px 40px 0; }
@media (max-width: 880px) {
  .sa-row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sa-map { margin: 0 auto 20px; }
  .sa-list { align-self: auto; }
}
@media (max-width: 767px) {
  .sa-section { padding: 0; }
  .sa-panel { border-radius: 0; padding: 20px 20px 40px; }
  .sa-section .sa-panel h2 { margin-bottom: 20px; }
}

/* ── 14 testimonial-speech-bubbles ────────────────────────────────────── */
.bubble-section {
  min-height: 700px; padding: 40px; display: flex; align-items: center;
  background-color: var(--bubble-lime);     /* solid light floor under wash + photo */
  background-image: linear-gradient(var(--lime-wash), var(--lime-wash)),
    url('assets/valley-tree-care-brand/valley-tree-care-papago-park.webp');
  background-size: cover; background-position: 50% 13%; background-repeat: no-repeat;
}
.bubble-inner { width: 100%; max-width: 1100px; margin: 0 auto; }
.bubble-section .bubble-inner > h2 { text-align: center; font-size: clamp(1.875rem, 1.5rem + 1.3vw, 2.625rem); margin: 0 0 50px; }
.bubble-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 40px; align-items: start; }
.bubble-grid > * { min-width: 0; }
.bubble-card {
  position: relative; margin: 0; padding: 30px 30px 30px 60px;
  background: var(--green); border-radius: var(--r-bubble);
}
.bubble-card p { position: relative; z-index: 1; margin: 0; font-size: 1rem; line-height: 28px; color: var(--on-dark); }
.bubble-card::after {                       /* the speech tail: 18px pointer, clip-path polygon as served */
  content: ''; position: absolute; left: 60px; bottom: -8px; width: 18px; height: 16px;
  background: var(--green); clip-path: polygon(0 0, 0 51%, 50% 100%, 100% 51%, 100% 0);
}
.bubble-medallion {
  position: absolute; top: 0; left: 0; width: 76px; height: 76px; padding: 26px; border-radius: 50%;
  background-color: var(--green);           /* solid floor under the sheen */
  background-image: linear-gradient(243deg, var(--bubble-sheen) 0%, transparent 100%);
  color: var(--bubble-glyph); pointer-events: none;
}
.bubble-medallion svg { display: block; width: 24px; height: 24px; fill: currentColor; }
.bubble-section .bubble-item h4 { margin: 22px 0 0 22px; font-size: 1.125rem; color: var(--bubble-name); }
.bubble-cta { display: flex; justify-content: center; margin-top: 50px; }
@media (max-width: 767px) {
  .bubble-section { padding: 40px 20px; min-height: 0; }
  .bubble-card { padding-left: 50px; }
  .bubble-card::after { left: 50px; }
}

/* ── 15 closing-cta-card-watermark ────────────────────────────────────── */
.rcta-section { padding: 100px 40px; background: var(--mint); }
.rcta-inner { position: relative; max-width: 1100px; min-height: 400px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.rcta-watermark {                           /* icon-dot-circle-solid, decorative */
  position: absolute; top: -90px; right: 0; width: 350px; height: 350px; z-index: 0;
  fill: var(--rcta-watermark); pointer-events: none;
}
.rcta-card {
  position: relative; z-index: 1; isolation: isolate; overflow: hidden;
  width: 100%; max-width: 850px; padding: 60px; text-align: center;
  background-color: var(--paper);           /* solid floor; the fronds show at 10% (90% white veil as served) */
  border: 1px solid var(--green); border-radius: var(--r-card-lg); box-shadow: var(--sh-cta);
}
.rcta-card::before {                        /* 15.jpg fronds; brightness lift drops the baked-in checkerboard (live defect) */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('assets/valley-tree-care-brand/valley-tree-care-palm-frond-watermark.webp') center / cover no-repeat;
  opacity: .1; filter: brightness(1.09);
}
.rcta-section .rcta-card h2 { font-size: clamp(1.875rem, 1.5rem + 1.3vw, 2.625rem); margin: 0 0 10px; }
.rcta-card p { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); line-height: 1.3; color: var(--ink); margin: 0; padding-bottom: 20px; }
.rcta-card .btn { margin-top: 10px; }
@media (max-width: 880px) {
  .rcta-watermark { display: none; }
}
@media (max-width: 767px) {
  .rcta-section { padding: 30px 20px; }
  .rcta-inner { min-height: 0; }
  .rcta-card { padding: 30px 20px; }
}


/* ══ C-service ══════════════════════════════════════════════════════ */
/* C-service: the service-page content card (card-split-hero, card-bold-lead-rows,
 * card-closing-foot), the irrigation watering-guide lead form and its
 * "Contact Us Today" band, and the plant-health-care steps timeline and green
 * pine CTA box. Measured off the live render (services-work/*.live.json,
 * 1440 and 390) and the served markup. */

/* Three faces the foundation does not load, each painting on one block only:
 * Open Sans (the Thrive Leads watering-guide form), Roboto Slab and Roboto (the
 * green pine CTA box). @font-face is legal anywhere in the concatenated file,
 * unlike @import. Latin subset, variable weight files from Google Fonts. */
@font-face {
  font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v44/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-mu0SC55I.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto Slab'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotoslab/v36/BngMUXZYTXPIvIBgJJSb6ufN5qWr4xCC.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-stretch: 100%; font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v51/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmUiAr0klQmz24.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-leads: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;  /* watering-guide form only */
  --font-slab: 'Roboto Slab', Rockwell, Georgia, serif;                          /* pine CTA box heading + copy */
  --font-roboto: 'Roboto', system-ui, -apple-system, sans-serif;                 /* pine CTA box button */

  --leads-line: #ebebeb;         /* watering-guide form box: 1px border */
  --leads-ink: #3f3f3f;          /* watering-guide headline, sub copy and field text */
  --leads-panel: #f4f4f4;        /* inset panel behind the four fields */
  --leads-field: #f8f9fa;        /* field fill */
  --leads-field-line: #cccccc;   /* field border */
  --leads-submit-a: #3f7039;     /* SUBMIT gradient, bottom stop (also its solid floor) */
  --leads-submit-b: #78c456;     /* SUBMIT gradient, top stop */
  --leads-submit-line: #54a430;  /* SUBMIT 1px border */

  --pine-ink: #020302;           /* FREE TREE HEALTH EVALUATION button fill + border */
  --pine-glyph: rgba(0, 0, 0, .13);          /* pine watermark: renders #376130 on the green */
  --pine-rule: rgba(255, 255, 255, .2);      /* vertical rule between the box's two columns */
  --r-pine: 41px;                /* green CTA box corners */
}

/* ── service content card ────────────────────────────────────────────────
 * One 1040px card on the white page, built from stacked sections that each
 * repaint the same ground (#f8f8f8 under a 90deg fade to mint), so a hero,
 * any number of row sections and a foot read as one seamless card. Top
 * corners square; the foot rounds the bottom. A section that follows another
 * opens with the 1px navy rule, inset by the 40px padding. */
.svc-stack { background: var(--paper); padding: 50px 20px; }
.svc-card {
  max-width: 1040px; margin: 0 auto; padding: 40px 40px 32px;
  background-color: var(--mist);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 14%, var(--mint) 83%);
  color: var(--ink);
}
.svc-card + .svc-card { padding-top: 0; }
.svc-card + .svc-card::before { content: ''; display: block; height: 1px; background: var(--rule-card); margin: 0 0 24px; }
.svc-card p { font-size: 1.125rem; }
.svc-card p strong, .svc-card li strong { color: var(--ink); }
.svc-card a:not(.btn-lip) { color: var(--green); font-weight: 700; text-decoration: underline; }
.svc-card a:not(.btn-lip):hover { color: var(--green-hover); }
.svc-card h2 { text-align: center; font-size: clamp(1.625rem, .9rem + 2vw, 2.625rem); line-height: 1.4; }
.svc-cta { text-align: center; margin: 0; }
.svc-cta .btn-lip { max-width: 100%; }
.svc-card img { border-radius: var(--r-card); width: 100%; height: auto; }
.svc-card img.svc-square { border-radius: 0; }   /* irrigation Process photo is served square-cornered */

/* card-split-hero: H1 + intro + lipped button | one rounded photo */
.svc-hero { padding-bottom: 50px; }
.svc-hero-grid { display: grid; grid-template-columns: minmax(0, 550fr) minmax(0, 347fr); column-gap: 61px; align-items: center; }
.svc-hero-grid > * { min-width: 0; }
.svc-hero-copy { text-align: center; }
.svc-card .svc-hero-title { font-size: clamp(1.875rem, 1rem + 2.2vw, 2.875rem); line-height: 1.3; margin: 0 0 20px; text-align: center; }
.svc-hero-copy p:not(.svc-cta) { line-height: 1.4; margin: 0 0 44px; }
.svc-hero-photo { justify-self: center; width: 100%; max-width: 348px; margin: 0; }
.svc-hero--centred .svc-hero-copy p { max-width: 920px; margin-left: auto; margin-right: auto; }
@media (max-width: 880px) {
  .svc-hero-grid { grid-template-columns: 1fr; row-gap: 40px; }
  .svc-hero-photo { max-width: 228px; }
}

/* card-bold-lead-rows: centred H2, photo/text row, full-width bold-lead
 * paragraphs, centred wide photo, lipped button */
.svc-rows h2 { margin: 0 0 46px; }
.svc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 15px; align-items: start; margin: 0 0 44px; }
.svc-row > * { min-width: 0; }
.svc-row figure { margin: 0; }
.svc-row p { line-height: 1.6; margin: 0 0 1.25rem; }
.svc-row p:first-child { margin-top: 12px; }
.svc-lead { line-height: 1.8; margin: 0 0 32px; }
.svc-wide { max-width: 650px; margin: 38px auto 20px; }
.svc-wide img { aspect-ratio: 650 / 366; object-fit: cover; }
@media (max-width: 880px) {
  .svc-row { grid-template-columns: 1fr; row-gap: 20px; }
  .svc-row p:first-child { margin-top: 0; }
}

/* card-closing-foot: last card section, big rounded bottom */
.svc-foot { border-radius: 0 0 var(--r-foot) var(--r-foot); padding-bottom: 50px; }
.svc-foot h2 { margin: 0 0 18px; }
.svc-foot p { line-height: 1.8; margin: 0 0 1.25rem; }
.svc-foot p:last-child { margin-bottom: 0; }
.svc-foot .center { text-align: center; }
.svc-foot .svc-cta { margin-top: 36px; }
.svc-note { text-align: center; margin: 0; padding: 0 20px 24px; }
.svc-emoji { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-weight: 400; }

@media (max-width: 767px) {
  .svc-stack { padding: 32px 20px; }
  .svc-card { padding: 40px 10px 32px; }
  .svc-hero { padding-bottom: 40px; }
  .svc-foot { border-radius: 0 0 40px 40px; padding-bottom: 40px; }
  .svc-card .svc-hero-title { font-size: 1.875rem; }
  .svc-card h2 { font-size: 1.625rem; }
}

/* ── lead-magnet-ebook-form (irrigation, Thrive Leads 1191) ───────────── */
.leads-wrap { background: var(--paper); padding: 0 20px 20px; }
.leads-rule { max-width: 1038px; margin: 20px auto 40px; border: 0; height: 1px; background: var(--rule-card); }
.leads-box {
  max-width: 1038px; margin: 0 auto; padding: 30px 20px;
  background: var(--paper); border: 1px solid var(--leads-line); border-radius: 5px;
  text-align: center; color: var(--leads-ink); font-family: var(--font-leads);
}
.leads-cover { width: 270px; max-width: 100%; aspect-ratio: 270 / 382; margin: 0 auto 22px; display: flex; align-items: center; justify-content: center; border-radius: 0; }
.leads-box .leads-title { font-family: var(--font-leads); font-weight: 300; font-size: 1.875rem; line-height: 35px; color: var(--leads-ink); margin: 0 0 22px; overflow-wrap: break-word; }
.leads-title strong { font-weight: 700; color: var(--leads-ink); }
.leads-box .leads-sub { font-family: var(--font-leads); font-size: 1rem; line-height: 1.6; color: var(--leads-ink); max-width: 960px; margin: 0 auto 22px; }
.leads-form { background: var(--leads-panel); border-radius: 8px; padding: 18px 16px 10px; margin: 0; }
.leads-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px 12px; }
.leads-grid > * { min-width: 0; }
.leads-col { display: flex; flex-direction: column; gap: 20px; }
.leads-form input {
  width: 100%; min-width: 150px; height: 50px; padding: 0 14px;
  font-family: var(--font-leads); font-weight: 300; font-size: .9375rem; color: var(--leads-ink);
  background: var(--leads-field); border: 1px solid var(--leads-field-line); border-radius: 4px;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .13);
}
.leads-form input::placeholder { color: var(--ink-muted); opacity: 1; }
.leads-form input:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.leads-submit {
  display: block; width: 100%; height: 52px; margin: 15px 0 0; padding: 0 15px; cursor: pointer;
  font-family: var(--font-leads); font-weight: 600; font-size: .9375rem; letter-spacing: 1px; color: var(--on-dark);
  background-color: var(--leads-submit-a);
  background-image: linear-gradient(0deg, var(--leads-submit-a) 0%, var(--leads-submit-b) 100%);
  border: 1px solid var(--leads-submit-line); border-radius: 0;
}
.leads-submit:hover { background-image: none; background-color: var(--leads-submit-a); }
.leads-submit:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (max-width: 767px) {
  .leads-wrap { padding: 0 20px 20px; }
  .leads-box { padding: 30px 20px 25px; }
  .leads-cover { width: 255px; }
  .leads-form input { height: 54px; font-size: 1rem; }
  .leads-submit { height: 54px; font-size: .875rem; }
}

/* ── contact-us-today-text-band (irrigation, on the white page) ───────── */
.ctoday { background: var(--paper); padding: 40px 0 60px; text-align: center; }
.ctoday .container h2 { font-size: clamp(1.625rem, .9rem + 2vw, 2.625rem); line-height: 1.4; margin: 0 0 16px; }
.ctoday p { line-height: 1.8; margin: 0; }
.ctoday a { color: var(--green); font-weight: 700; text-decoration: underline; }
.ctoday a:hover { color: var(--green-hover); }
@media (max-width: 767px) { .ctoday .container h2 { font-size: 1.625rem; } }

/* ── numbered-step-timeline (plant-health-care, Thrive "Steps 02") ────── */
.steps { background: var(--paper); padding: 50px 0 80px; }
.steps-inner { max-width: 1040px; text-align: center; }
.steps .steps-title { font-size: 2.625rem; line-height: 1.3; margin: 0 0 6px; }
.steps-intro { max-width: 750px; margin: 0 auto 40px; line-height: 1.8; }
.steps-cta { margin: 0; }
.steps-list { position: relative; max-width: 650px; margin: 36px auto 0; padding: 0; list-style: none; text-align: left; }
.steps-list::before { content: ''; position: absolute; left: 30px; top: 25px; bottom: 0; border-left: 1px dashed var(--green-dash); pointer-events: none; }
.steps-item { display: grid; grid-template-columns: 75px minmax(0, 1fr); padding: 0 0 50px; margin: 0; }
.steps-item > * { min-width: 0; }
.steps-badge {
  position: relative; z-index: 1; display: block; width: 50px; height: 50px; margin-left: 5px; border-radius: var(--r-pill);
  background: var(--green-badge); color: var(--on-dark);
  font-family: var(--font-body); font-weight: 700; font-size: 1.25rem; line-height: 50px; text-align: center;
}
.steps-body h3 { font-size: clamp(1.625rem, 1.2rem + 1vw, 1.875rem); line-height: 1.4; margin: 4px 0 26px; }
.steps-body { padding-right: 20px; }
.steps-body p { font-size: 1.375rem; line-height: 1.7; margin: 0; }
@media (max-width: 767px) {
  .steps { padding: 30px 0 40px; }
  .steps .steps-title { font-size: 2.625rem; }
  .steps-intro { margin-bottom: 40px; }
  .steps-list { margin-top: 36px; }
  .steps-list::before { display: none; }
  .steps-item { display: block; padding-bottom: 60px; }
  .steps-body { padding-right: 0; }
  .steps-badge { margin: 0 0 10px; }
  .steps-body h3 { margin: 0 0 20px; font-size: 1.875rem; }
}

/* ── green-cta-box-pine-watermark (plant-health-care, "Call To Action 22") */
.pine-wrap { background: var(--paper); padding: 20px 20px 70px; }
.pine-box {
  position: relative; overflow: hidden; max-width: 1040px; margin: 0 auto; padding: 40px;
  display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); align-items: stretch;
  background: var(--green); border-radius: var(--r-pine); color: var(--on-dark);
}
.pine-box > * { min-width: 0; }
.pine-head { position: relative; display: flex; align-items: center; justify-content: flex-end; padding: 0 78px 0 0; }
.pine-glyph { position: absolute; left: -50px; top: -4px; width: 293px; height: 293px; fill: var(--pine-glyph); pointer-events: none; }
.pine-box .pine-head h3 {
  position: relative; max-width: 256px; margin: 0; text-align: right;
  font-family: var(--font-slab); font-weight: 500; font-size: clamp(2.125rem, 1.5rem + 1.6vw, 3rem); line-height: 1.4; color: var(--on-dark);
}
.pine-body { border-left: 1px solid var(--pine-rule); padding: 30px 0 30px 8%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.pine-box .pine-body p { font-family: var(--font-slab); font-size: 1.125rem; line-height: 1.8; color: var(--on-dark); margin: 0 0 30px; }
.pine-btn {
  display: inline-block; max-width: 100%; padding: 12px 25px;
  font-family: var(--font-roboto); font-weight: 400; font-size: 1.25rem; line-height: 1.5; text-align: center; text-decoration: none;
  color: var(--on-dark); background: var(--pine-ink); border: 2px solid var(--pine-ink); border-radius: 5px;
  transition: background-color var(--speed), border-color var(--speed), box-shadow var(--speed);
}
.pine-btn:hover { background: var(--green); border-color: var(--on-dark); box-shadow: var(--sh-soft); color: var(--on-dark); }
.pine-btn:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 3px; }
@media (max-width: 880px) {
  .pine-box { grid-template-columns: 1fr; padding: 40px 20px 30px; }
  .pine-head { justify-content: flex-start; padding: 16px 0 24px; }
  .pine-glyph { left: 3px; top: -20px; width: 200px; height: 200px; }
  .pine-box .pine-head h3 { text-align: left; font-size: 2.125rem; }
  .pine-body { padding: 0 0 0 20px; }
}
@media (max-width: 767px) { .pine-wrap { padding: 20px 20px 40px; } }


/* ══ D-city-company-forms ══════════════════════════════════════════════════════ */
/* D-city-company-forms: city pages (intro split, mint cards, closing split card),
 * company pages (about story card, careers job board), and the forms family
 * (contact Gravity Form, Thrive lead form, fine print, thank-you note, success toast)
 * plus the plain legal body. */

:root {
  --mint-85: rgba(241, 251, 239, .85);   /* city closing card outer shell: the mint at 85% on white (Thrive skin colour 19) */
  --gf-border: #cccccc;                  /* contact-us Gravity Form input hairline (pixel-sampled) */
  --gf-submit: #e6e6e6;                  /* contact-us Gravity Form unstyled Submit block */
  --gf-required: #c02b0a;                /* Gravity Forms '(Required)' marker */
  --form-font: Arial, Helvetica, sans-serif;  /* Thrive lead-gen labels and placeholders */
  --form-ink: #1e1f27;                   /* Thrive lead-gen labels */
  --form-required: #e42f2f;              /* Thrive lead-gen asterisks */
  --form-fill: rgba(255, 255, 255, .81); /* Thrive lead-gen input fill */
  --form-check: #afafaf;                 /* Thrive lead-gen checkbox outline */
  --form-placeholder: rgba(0, 0, 0, .5); /* Thrive lead-gen placeholders */
  --toast-green: #008000;                /* success toast icon column: the CSS keyword 'green' as served */
  --toast-ink: #000000;                  /* success toast message text */
  --toast-shadow: #a7a7a7;               /* success toast glow */
}

/* Group helper: a kit-note that sits under a demo, outside the pattern markup. */
.dcf-note { margin: 0; padding: 10px 20px 14px; color: var(--ink-muted); }

/* ── 23 city-intro-split ─────────────────────────────────────────────── */
.cityintro { background: var(--paper); padding: clamp(36px, 4vw, 56px) 0 25px; }
.cityintro .container h1 { text-align: center; font-size: clamp(1.875rem, 1.2rem + 1.9vw, 2.875rem); line-height: 1.3; margin: 0 0 30px; }
.cityintro-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; max-width: 1040px; margin: 0 auto; }
.cityintro-row > *, .cityintro-media { min-width: 0; }
.cityintro-copy { padding-left: 30px; text-align: center; }
.cityintro-copy p { line-height: 1.4; margin: 0 0 20px; }
.cityintro-copy a:not(.btn-lip) { color: var(--green); font-weight: 700; text-decoration: underline; }
.cityintro-photo { width: 347px; max-width: 100%; height: auto; aspect-ratio: 347 / 231; object-fit: cover; border-radius: var(--r-card); margin: 0 auto; }
.cityintro-mob { display: none; }
@media (max-width: 1023px) {
  .cityintro-desk { display: none; }
  .cityintro-mob { display: flex; width: fit-content; margin: 15px auto 0; }
  .cityintro-photo { width: 228px; }
}
@media (max-width: 880px) {
  .cityintro-row { grid-template-columns: 1fr; }
  .cityintro-copy { padding: 0 20px; }
  .cityintro-copy p { margin-bottom: 0; }
  .cityintro-photo { margin: 20px auto; }
  .cityintro-mob { width: 100%; margin-top: 0; }
}

/* ── 24 mint-rounded-text-card ───────────────────────────────────────── */
.mintcard-wrap { padding: 28px 0; }
.mintcard { max-width: 1040px; margin: 0 auto; background: var(--mint); border-radius: var(--r-card); overflow: hidden; padding: 20px 20px 1px; }
.mintcard + .mintcard { margin-top: 30px; }
.mintcard-wrap .mintcard h2 { text-align: center; font-size: clamp(1.625rem, 1.1rem + 1.75vw, 2.625rem); line-height: 1.4; margin: 0 0 20px; }
.mintcard p { line-height: 1.8; margin: 0 0 20px; }
.mintcard ul { list-style: disc; padding: 10px 0 10px 77px; margin: 0 0 12px; }
.mintcard li { line-height: 1.8; padding-bottom: 8px; }
.mintcard a { color: var(--green); font-weight: 700; text-decoration: underline; }
.mintcard-lead { padding-bottom: 5px; text-align: center; }
@media (max-width: 767px) { .mintcard ul { padding-left: 51px; } }

/* ── 25 city-closing-split-card ──────────────────────────────────────── */
.cityclose { padding: 28px 0 clamp(36px, 4vw, 60px); }
.cityclose-card { display: grid; grid-template-columns: 1fr 1fr; max-width: 1040px; margin: 0 auto; background: var(--mint-85); border-radius: var(--r-card); overflow: hidden; }
.cityclose-card > *, .cityclose-copy { min-width: 0; }
.cityclose-panel { background: var(--mint); border-radius: var(--r-card); overflow: hidden; padding: 20px 0 1px 30px; }
.cityclose .cityclose-panel h2 { text-align: left; font-size: clamp(1.625rem, 1.1rem + 1.75vw, 2.625rem); line-height: 1.4; margin: 0 0 20px; }
.cityclose-panel p { line-height: 1.8; margin: 0 0 20px; }
.cityclose-desk { display: flex; width: fit-content; margin: 1px auto 34px; }
.cityclose-media { padding: 25px 0 28px; }
.cityclose-photo { width: 347px; max-width: 100%; height: auto; aspect-ratio: 347 / 463; object-fit: cover; border-radius: var(--r-card); margin: 0 auto; }
.cityclose-mob { display: none; }
@media (max-width: 1023px) {
  .cityclose-desk { display: none; }
  .cityclose-mob { display: flex; width: fit-content; margin: 30px auto 0; }
  .cityclose-photo { width: 228px; }
}
@media (max-width: 880px) {
  .cityclose-card { grid-template-columns: 1fr; }
  .cityclose-panel { padding: 20px 20px 1px; }
  .cityclose-media { padding: 25px 0 34px; }
  .cityclose-mob { width: 100%; margin-top: 20px; }
}

/* ── 26 about-story-card ─────────────────────────────────────────────── */
.aboutcard-wrap { padding: 50px 0 40px; }
.aboutcard {
  max-width: 1040px; margin: 0 auto; padding: 40px;
  background-color: var(--mist);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 14%, var(--mint) 83%);
  border-radius: 0 0 120px 120px; overflow: hidden;
}
.aboutcard-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 357px); gap: 60px; align-items: center; margin-bottom: 20px; }
.aboutcard-top > *, .aboutcard-media { min-width: 0; }
.aboutcard .aboutcard-copy h1 { text-align: left; font-size: clamp(1.875rem, 1.2rem + 1.9vw, 2.875rem); line-height: 1.3; margin: 0 0 20px; }
.aboutcard p { line-height: 1.4; margin: 0 0 20px; }
.aboutcard-photo { width: 357px; max-width: 100%; height: auto; aspect-ratio: 357 / 295; object-fit: cover; background: var(--paper); border-radius: var(--r-card); margin: 0 auto; }
@media (max-width: 880px) {
  .aboutcard-top { grid-template-columns: 1fr; gap: 0; }
  .aboutcard-copy { text-align: center; padding-bottom: 20px; }
  .aboutcard-photo { width: 228px; margin-bottom: 20px; }
}
@media (max-width: 767px) {
  .aboutcard { padding: 40px 10px 10px; border-radius: 0 0 60px 60px; }
}

/* ── 27 careers-benefits-jobboard ────────────────────────────────────── */
.careers-wrap { padding: 50px 0 40px; }
.careers {
  max-width: 1040px; margin: 0 auto; padding: 37px 40px 1px;
  background-color: var(--mist);
  background-image: linear-gradient(16deg, rgba(255, 255, 255, 0) 49%, rgba(0, 0, 0, 0) 54%, var(--mint) 71%);
}
.careers .careers-title { text-align: center; font-size: clamp(1.875rem, 1.2rem + 1.9vw, 2.875rem); line-height: 1.3; margin: 0 0 20px; }
.careers p { line-height: 1.8; margin: 0 0 20px; }
.careers-sub, .careers-cta { text-align: center; }
.careers-rule { border: 0; border-top: 1px solid var(--rule-card); margin: 20px 0 42px; }
.careers-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.careers-cols > *, .careers-media { min-width: 0; }
.careers .careers-label { margin: 0; }
.careers-copy ul { list-style: disc; padding: 10px 0 10px 77px; margin: 0; }
.careers-copy li { font-family: var(--font-ui); line-height: 1.8; padding-bottom: 8px; }
.careers-photo { width: 100%; height: auto; aspect-ratio: 455 / 682; object-fit: cover; object-position: 45% center; margin-top: 7px; }
.careers-slot { border-radius: 0; margin: 40px 0 20px; display: flex; align-items: center; justify-content: center; }
.careers-office { aspect-ratio: 960 / 640; }
.careers-board { margin: 14px 0 0; min-height: 220px; }
@media (max-width: 880px) {
  .careers-cols { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 767px) {
  .careers { padding: 40px 10px 10px; }
  .careers-copy ul { padding-left: 51px; }
}

/* ── 28 contact-gravity-form ─────────────────────────────────────────── */
.cgf { padding: 44px 0 30px; }
.cgf-intro { text-align: center; line-height: 1.8; max-width: 1040px; margin: 0 auto 44px; }
.cgf-form { max-width: 1040px; margin: 0 auto; font-family: var(--font-ui); color: var(--ink); font-size: .9375rem; }
.cgf-form fieldset { border: 0; padding: 0; min-width: 0; }
.cgf-field { margin: 0 0 30px; min-width: 0; }
.cgf-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2%; }
.cgf-row > * { min-width: 0; }
.cgf-label { display: block; font-weight: 700; font-size: 1rem; line-height: 1.4; margin: 0 0 12px; padding: 0; }
.cgf-req { color: var(--gf-required); font-style: italic; font-weight: 400; font-size: .8125rem; padding-left: 4px; }
.cgf-sub { display: block; font-size: .9375rem; line-height: 1.4; margin: 8px 0 0; }
.cgf-address { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 2%; }
.cgf-address > * { min-width: 0; }
.cgf-address .cgf-sub { margin: 0 0 8px; }
.cgf-full { grid-column: 1 / -1; }
.cgf-form input[type="text"], .cgf-form input[type="email"], .cgf-form input[type="tel"], .cgf-form select, .cgf-form textarea {
  display: block; width: 100%; min-width: 150px; font: inherit; line-height: 1.2; color: var(--ink);
  padding: 8px; border: 1px solid var(--gf-border); border-radius: 2px; background: var(--paper);
}
.cgf-form input::placeholder { color: var(--ink-muted); }
.cgf-form select { height: 38px; }
.cgf-form textarea { height: 192px; resize: vertical; }
.cgf-choices { display: grid; gap: 12px; }
.cgf-choice { display: flex; align-items: center; gap: 6px; font-size: .9375rem; }
.cgf-choice input { margin: 0; width: 13px; height: 13px; }
.cgf-submit { font-family: var(--font-ui); font-size: .9375rem; color: var(--ink); background: var(--gf-submit); border: 0; border-radius: 0; padding: 10px 20px; cursor: pointer; }
.cgf-submit:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (max-width: 880px) {
  .cgf-row, .cgf-address { grid-template-columns: 1fr; }
}

/* ── 29 form-confirmation-note ───────────────────────────────────────── */
.confirm { padding: 56px 0 110px; text-align: center; }
.confirm-lead { line-height: 1.8; margin: 0 0 20px; }
.confirm-note { font-size: .75rem; line-height: 1.8; margin: 0; }

/* ── 30 legal-rich-text ──────────────────────────────────────────────── */
.legal { padding: 50px 0 30px; }
.legal-body { max-width: 1040px; margin: 0 auto; }
.legal-body p { line-height: 1.8; margin: 0 0 20px; }
.legal-body a { color: var(--green); text-decoration: underline; overflow-wrap: anywhere; }
.legal-more { max-width: 1040px; margin: 0 auto 12px; }

/* ── 31 lead-form-free-evaluation ────────────────────────────────────── */
.leadform { padding: 50px 0 20px; }
.leadform-form { max-width: 800px; margin: 0 auto; }
.leadform-form fieldset { border: 0; padding: 0; min-width: 0; }
.leadform-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 15px; }
.leadform-row > * { min-width: 0; }
.leadform-field { margin: 0 0 16px; }
.leadform-label { display: block; font-family: var(--form-font); font-size: 1rem; line-height: 1.4; letter-spacing: 1px; color: var(--form-ink); margin: 0 0 8px; padding: 0; }
.leadform-req { color: var(--form-required); }
.leadform-input {
  display: block; width: 100%; min-width: 150px; height: 51px; padding: 12px;
  font-family: var(--form-font); font-size: .875rem; letter-spacing: 1px; color: var(--form-ink);
  background: var(--form-fill); border: 1px solid var(--border); border-radius: 3px;
}
.leadform-input::placeholder { color: var(--form-placeholder); }
textarea.leadform-input { height: 102px; resize: vertical; line-height: 1.6; }
.leadform-select { position: relative; }
.leadform-select select { appearance: none; -webkit-appearance: none; height: 58px; padding-right: 40px; cursor: pointer; color: var(--ink-muted); }
.leadform-select svg { position: absolute; right: 18px; top: 50%; width: 9px; height: 14px; transform: translateY(-50%); fill: var(--form-ink); pointer-events: none; }
.leadform-counter { text-align: right; font-size: 1.0625rem; color: var(--form-ink); margin-top: 16px; }
.leadform-checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 15px; padding: 12px 0 0 10px; }
.leadform-checks > * { min-width: 0; }
.leadform-check { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 1.125rem; line-height: 1; letter-spacing: 1px; color: var(--ink); cursor: pointer; }
.leadform-check input { appearance: none; -webkit-appearance: none; flex: 0 0 14px; width: 14px; height: 14px; margin: 0; border: 1px solid var(--form-check); border-radius: 4px; background: var(--paper); cursor: pointer; }
.leadform-check input:checked { background: var(--green); border-color: var(--green); box-shadow: inset 0 0 0 2px var(--paper); }
.leadform-check input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.leadform-actions { text-align: center; padding-top: 16px; }
.leadform-submit { min-width: min(446px, 100%); justify-content: space-between; gap: 16px; }
.leadform-icon { flex: 0 0 22px; width: 22px; height: 22px; border: 1.2px solid currentColor; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.leadform-icon svg { width: 12px; height: 12px; fill: currentColor; }
@media (max-width: 880px) {
  .leadform-row, .leadform-checks { grid-template-columns: 1fr; }
  .leadform-checks { row-gap: 22px; }
  .leadform-submit { width: 100%; text-align: center; line-height: 1.2; }
}

/* ── 32 form-fine-print ──────────────────────────────────────────────── */
.fineprint-wrap { padding: 20px 0 16px; }
.fineprint { max-width: 1036px; margin: 0 auto; text-align: center; }
.fineprint p { font-size: .75rem; line-height: 1.8; color: var(--ink); margin: 0 0 20px; }
.fineprint a { color: var(--green); text-decoration: underline; }

/* ── 60 form-success-toast (reconstructed from the tvd-toast CSS) ────── */
.vtoast-stage { background: var(--mist); padding: 50px 16px 56px; }
.vtoast { width: 60%; max-width: 500px; margin: 0 auto; color: var(--toast-ink); }
.vtoast-fixed { position: fixed; top: 50px; left: 50%; transform: translateX(-50%); z-index: 9999993; margin: 0; }
.vtoast-msg { position: relative; background: var(--paper); box-shadow: 0 0 15px 0 var(--toast-shadow); }
.vtoast-icon { position: absolute; top: 0; left: 0; width: 50px; height: 100%; background: var(--toast-green); color: var(--on-dark); }
.vtoast-icon span, .vtoast-text span { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 50px; height: 100%; width: 100%; }
.vtoast-icon svg { width: 18px; height: 18px; fill: currentColor; }
.vtoast-text { padding: 20px 10px 20px 70px; font-family: Roboto, sans-serif; font-size: 1rem; line-height: 1.4; }
.vtoast-note { max-width: 500px; margin: 18px auto 0; text-align: center; color: var(--ink-muted); }


/* ══ E-campaign-recruit ══════════════════════════════════════════════════════ */
/* E-campaign-recruit: the two Thrive landing pages and their funnel.
 * /dreamtrees/ (33 campaign hero, 34 sunburst strip, 35 customer story,
 * 36 process panel, 37 empathy + review card), /climber/ (38 recruiting hero,
 * 39 circle-photo benefits, 40 Ready to Grow form band, 41 about blurb),
 * /thank-you-for-your-interest/ (42 application form + posting) and the
 * 404 template (43).
 * Stems: .camp- (dreamtrees, incl. the shared .camp-cta) .recruit- .jobapp- .e404- */

:root {
  --camp-sun: #ffc845;         /* logo yellow: dreamtrees CTA fill, hero H2, sunburst strip ground */
  --camp-sun-ray: #ffcf52;     /* the lighter rays of radial.png, pixel-sampled off the dreamtrees capture */
  --camp-sun-hover: #ffd570;   /* dreamtrees CTA hover fill */
  --camp-plum: #4b3048;        /* sunburst strip glyphs + labels; the kit's CTA label (see .camp-cta) */
  --camp-lime: #84bd00;        /* dreamtrees lime as served (2.3:1 on white): kept for reference only */
  --camp-lime-ink: #4f7400;    /* same hue, darkened so the label and the white step numerals clear 5.5:1 */
  --camp-faint: rgba(75, 144, 65, .04);   /* process panel fill, climber hollow ring (Thrive skin 25) */
  --recruit-forest: #053d1a;   /* climber hero card ink, application form question labels (Thrive skin 3) */
  --recruit-photo-floor: #6a6b6c;         /* climber hero: the source's own solid fallback under the photo (skin 5) */
  --recruit-form-ink: #1e1f27; /* Ready to Grow form labels */
  --recruit-req: #e42f2f;      /* required-field asterisks */
  --recruit-font-form: Arial, Helvetica, sans-serif;   /* Thrive lead-gen labels and inputs */
  --sh-recruit-hover: 0 14px 40px rgba(61, 113, 55, .18);  /* APPLY NOW pill hover (skin 8) */
  --jobapp-field: #fbfbfb;     /* application form pill fields */
  --jobapp-line: rgba(67, 112, 56, .08);  /* pill outline + inset glow */
  --jobapp-hint: #bcbcbc;      /* dropdown "Select One" resting text (as served; placeholder state) */
  --jobapp-input-ink: #3e3e3e; /* pill field text and placeholders */
  --e404-line: #6c6c6c;        /* 404 search pill outline */
  --e404-input-ink: rgba(0, 0, 0, .65);   /* 404 search field text + placeholder */
  --camp-wash: rgba(0, 0, 0, .24);        /* dreamtrees hero: black wash over the photo */
  --camp-wash-phone: rgba(0, 0, 0, .35);  /* the same wash at <=767px */
  --camp-h1-shadow: 4px 4px 9px rgba(0, 0, 0, .92);
  --camp-h2-shadow: 4px 4px 9px rgba(0, 0, 0, .73);
  --camp-avatar: #000000;      /* review card generic avatar (icon.png) */
  --recruit-wash: rgba(255, 255, 255, .14);         /* climber hero: white wash over the crew photo */
  --recruit-card-phone: rgba(241, 251, 239, .9);    /* climber hero card on phones (skin 20) */
  --recruit-grow-wash: rgba(0, 0, 0, .3);           /* Ready to Grow: black wash over the photo */
  --recruit-mark: rgba(255, 255, 255, .08);         /* Ready to Grow: dot-circle watermark */
  --recruit-field: rgba(255, 255, 255, .81);        /* Ready to Grow field fill */
  --recruit-input-ink: rgba(0, 0, 0, .5);           /* Ready to Grow field text + placeholder */
}

/* ── shared: the dreamtrees yellow sunburst CTA ─────────────────────────
 * Yellow #ffc845 rectangle, 8px radius, Oswald 27px, grows on hover and
 * flattens to #ffd570. radial.png (the sunburst texture) is not mirrored:
 * its rays are rebuilt as a repeating conic gradient over the solid yellow
 * floor. The source sets the label white, 1.5:1 on this yellow (INVISIBLE
 * to the contrast gate); the kit inks it in plum, the colour the page itself
 * sets on this yellow in the sunburst strip (7.5:1). */
.camp-cta-row { text-align: center; padding: 0 20px; }
.camp-cta {
  display: inline-block; max-width: 100%;
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5625rem, 1.45rem + .35vw, 1.6875rem);
  line-height: 1.2; letter-spacing: 0; text-align: center; text-decoration: none;
  color: var(--camp-plum); padding: 18px; border-radius: 8px;
  background-color: var(--camp-sun);
  background-image: repeating-conic-gradient(from 0deg at 50% 320%, var(--camp-sun-ray) 0deg 3deg, var(--camp-sun) 3deg 6deg);
  transition: transform var(--speed), background-color var(--speed);
}
.camp-cta:hover { transform: scale(1.06); background-image: none; background-color: var(--camp-sun-hover); }
.camp-cta:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
@media (max-width: 767px) {
  .camp-cta-row .camp-cta { display: block; width: 83%; margin: 0 auto; padding: 10px; font-size: 1.5625rem; line-height: 1; }
}

/* ── 33 campaign-hero-mascot ────────────────────────────────────────────
 * Layers, top down: mascot bottom-left, 24% black wash, photo (cover,
 * 50% 15%). The charcoal floor is the solid base the contrast gate reads. */
.camp-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 590px; padding: 60px 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background-color: var(--charcoal);
}
.camp-hero-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.camp-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--camp-wash); pointer-events: none; }
/* Mascot: cropped out of the kit logo (the standalone mascot PNG is not mirrored). */
.camp-hero-mascot { position: absolute; left: 0; bottom: 0; z-index: 0; width: 146px; height: 246px; overflow: hidden; pointer-events: none; }
.camp-hero-mascot img { position: absolute; left: -25px; top: -26px; width: 504px; height: 296px; max-width: none; }
.camp-hero-inner { position: relative; z-index: 1; max-width: 100%; }
.camp-hero .camp-hero-h1 {
  margin: 0 0 14px; font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4.0625rem); line-height: .95;
  color: var(--mist); text-shadow: var(--camp-h1-shadow);
}
.camp-hero .camp-hero-h2 {
  margin: 0 0 36px; font-size: clamp(1.5625rem, 1rem + 1.7vw, 2.6875rem); line-height: .95; letter-spacing: 2px;
  color: var(--camp-sun); text-shadow: var(--camp-h2-shadow);
}
.camp-hero .camp-cta-row { padding: 0; }
.camp-note { margin: 0; padding: 10px 20px; background: var(--paper); }
@media (max-width: 1023px) { .camp-hero-mascot { display: none; } }
@media (max-width: 767px) {
  .camp-hero { min-height: 353px; padding: 40px 8px; }
  .camp-hero::before { background: var(--camp-wash-phone); }
  .camp-hero-photo { object-position: 28% 50%; }
  .camp-hero .camp-hero-h1 { font-size: 2.5rem; line-height: 1.2; margin-bottom: 4px; }
  .camp-hero .camp-hero-h2 { font-size: 1.5625rem; line-height: 1.2; margin-bottom: 20px; }
}

/* ── 34 sunburst-service-icon-strip ─────────────────────────────────────
 * One no-wrap row of five on the yellow sunburst (source: radial.png,
 * background-attachment fixed; rebuilt as rays from just above the strip).
 * It stays five-up on phones, labels dropping to 10px on two lines, so it
 * is a flex row with shrinkable items rather than a fixed grid. */
.camp-strip {
  padding: 25px 40px;
  background-color: var(--camp-sun);
  background-image: repeating-conic-gradient(from 0deg at 50% -60%, var(--camp-sun-ray) 0deg 6deg, var(--camp-sun) 6deg 12deg);
}
.camp-strip-row { display: flex; gap: 40px; max-width: 1300px; margin: 0 auto; }
.camp-strip-item { flex: 1 1 0; min-width: 0; text-align: center; color: var(--camp-plum); }
.camp-strip-item svg { display: block; width: 37px; height: 37px; margin: 0 auto 10px; fill: currentColor; }
.camp-strip .camp-strip-label {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: .875rem; line-height: 1.2;
  text-transform: uppercase; color: var(--camp-plum); overflow-wrap: break-word;
}
@media (max-width: 767px) {
  .camp-strip { padding: 10px; }
  .camp-strip-row { gap: 6px; }
  .camp-strip-item svg { margin-bottom: 4px; }
  .camp-strip .camp-strip-label { font-size: .625rem; }
}

/* ── 35 customer-story-annotated-before-after ───────────────────────── */
.camp-story { padding: 40px 0 20px; background: var(--paper); }
.camp-story-row { display: grid; grid-template-columns: 1fr 1fr; max-width: 1300px; margin: 0 auto 40px; }
.camp-story-row > * { min-width: 0; }
.camp-story-copy { display: flex; flex-direction: column; justify-content: center; min-height: 520px; padding: 0 20px; }
.camp-story-copy-inner { width: 100%; max-width: 550px; margin: 0 auto; }
.camp-story .camp-story-label {
  margin: 0; font-size: 1.1875rem; line-height: 1.3; letter-spacing: 3px; text-align: center;
  text-transform: uppercase; color: var(--camp-lime-ink);
}
.camp-story .camp-story-quote { margin: 0 0 18px; font-size: clamp(2.25rem, 2rem + .6vw, 2.625rem); line-height: 1.3; text-align: center; }
.camp-story-body { margin: 0; line-height: 1.8; }
.camp-story-by { font-size: .875rem; color: var(--ink-muted); }
.camp-story-media { display: flex; align-items: center; justify-content: center; padding: 0 20px; }
.camp-story-slot { width: 100%; max-width: 650px; min-height: 450px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 1023px) {
  .camp-story-row { grid-template-columns: 1fr; }
  .camp-story-media { order: -1; }
  .camp-story-copy { min-height: 0; padding: 40px; }
  .camp-story-slot { min-height: 400px; }
}
@media (max-width: 767px) {
  .camp-story { padding-top: 0; }
  .camp-story-row { margin-bottom: 30px; }
  .camp-story-copy { padding: 30px 20px 0; }
  .camp-story-media { padding: 10px 1px 0; }
  .camp-story-slot { min-height: 300px; }
  .camp-story .camp-story-quote { font-size: 2.25rem; line-height: 1.2; }
  .camp-story-body { line-height: 1.9; }
}

/* ── 36 process-panel-sketches ──────────────────────────────────────────
 * Thrive "Benefits 03" build: panel right, sketches left on desktop. Each
 * step is a 64px numeral column + copy; the dashed connector runs down the
 * numeral column from each circle to the next. */
.camp-proc { padding: 40px 0 0; background: var(--paper); }
.camp-proc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 1300px; margin: 0 auto; padding: 0 20px; }
.camp-proc-row > * { min-width: 0; }
.camp-proc-sketches { order: -1; display: flex; flex-direction: column; justify-content: space-around; gap: 24px; padding: 20px 30px; }
.camp-proc-slot { min-height: 210px; display: flex; align-items: center; justify-content: center; }
.camp-proc-panel { background-color: var(--camp-faint); border-radius: 15px; padding: 15px 10px 1px; }
.camp-proc .camp-proc-title { max-width: 636px; margin: 0 auto 20px; text-align: center; }
.camp-proc-steps { margin: 0; padding: 0; list-style: none; }
.camp-proc-step { position: relative; display: grid; grid-template-columns: 64px 1fr; padding-bottom: 44px; }
.camp-proc-step > * { min-width: 0; }
.camp-proc-step::before {
  content: ""; position: absolute; left: 31px; top: 0; bottom: 0; width: 0;
  border-left: 1px dashed var(--veil); pointer-events: none;
}
.camp-proc-step:last-child::before { display: none; }
.camp-proc-num {
  position: relative; z-index: 1; width: 50px; height: 50px; margin: 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--camp-lime-ink); color: var(--on-dark);
  font-family: var(--font-body); font-weight: 700; font-size: 1.25rem; line-height: 1;
}
.camp-proc-copy { padding: 8px 1px 0 13px; }
.camp-proc .camp-proc-h3 { margin: 0 0 18px; font-size: clamp(1.625rem, 1.45rem + .5vw, 1.875rem); line-height: 1.2; }
.camp-proc-copy p { margin: 0; font-size: 1.25rem; line-height: 1.7; }
.camp-proc .camp-cta-row { margin: 36px 0 30px; }
@media (max-width: 1023px) {
  .camp-proc-row { grid-template-columns: 1fr; }
  .camp-proc-sketches { order: 0; }
}
@media (max-width: 767px) {
  .camp-proc { padding-top: 40px; }
  .camp-proc .camp-proc-title { font-size: 2.1875rem; margin-bottom: 10px; }
  .camp-proc-step { padding-bottom: 24px; }
  .camp-proc .camp-proc-h3 { font-size: 1.625rem; margin-bottom: 12px; }
  .camp-proc-copy p { font-size: 1.125rem; }
  .camp-proc-sketches { padding: 20px 0 0; }
  .camp-proc-slot { min-height: 130px; }
  .camp-proc .camp-cta-row { margin: 20px 0 30px; }
}

/* ── 37 empathy-review-card-cta ──────────────────────────────────────── */
.camp-empathy { padding: 40px 40px 20px; background: var(--paper); }
.camp-empathy-inner { max-width: 946px; margin: 0 auto; }   /* 891px section, its text blocks run to 946px */
.camp-empathy h2 { text-align: center; }
.camp-empathy-lead { margin: 0 0 32px; }
.camp-review {
  display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 20px;
  margin: 0 0 40px; padding: 35px 35px 35px 35px; border-radius: 41px; overflow: hidden;
  background-color: var(--green-soft);
}
.camp-review > * { min-width: 0; }
.camp-review-who { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.camp-review-avatar { flex: 0 0 38px; width: 38px; height: 38px; color: var(--camp-avatar); }
.camp-review-avatar svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.camp-review-name { margin: 0; line-height: 1.1; font-size: 1.125rem; }
/* Role line: source #999999 (2.8:1); lifted to the body-safe muted token
 * because it is copy people read, not doc chrome. */
.camp-review-role { font-size: .875rem; color: var(--ink-muted); }
.camp-review-quote { margin: 0; line-height: 1.8; }
.camp-review-media { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.camp-review-photo { width: 234px; max-width: 100%; aspect-ratio: 234 / 312; object-fit: cover; border-radius: 0; }
.camp-empathy .camp-cta-row { margin: 20px 0 0; padding: 0; }
.camp-empathy-close { margin: 40px auto 20px; text-align: center; }
@media (max-width: 767px) {
  .camp-empathy { padding: 40px 20px 20px; }
  .camp-review { grid-template-columns: 1fr; padding: 30px 20px; }
  .camp-review-avatar { flex-basis: 48px; width: 48px; height: 48px; }
  .camp-review-photo { width: 252px; }
}

/* ── 38 recruiting-photo-hero-card ──────────────────────────────────────
 * Full-bleed crew photo under a 14% white wash; the card sits bottom-left.
 * The source's own #6a6b6c fallback is the solid floor under the photo. */
.recruit-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 680px; padding: 40px; display: flex; flex-direction: column; justify-content: flex-end;
  background-color: var(--recruit-photo-floor);
}
.recruit-hero-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.recruit-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--recruit-wash); pointer-events: none; }
.recruit-card {
  width: 100%; max-width: 637px; margin: 0 0 50px; padding: 50px 60px 60px;
  border-radius: 30px; background-color: var(--mist); color: var(--recruit-forest);
}
.recruit-card .recruit-h1 { margin: 0 0 20px; font-size: clamp(2.25rem, 2rem + .6vw, 2.5625rem); line-height: 1.2; text-align: center; color: var(--recruit-forest); }
/* Source paints "Here" #4eb151 as well as italic; the kit keeps the italic
 * only (no coloured words in headings). */
.recruit-h1 em { font-style: italic; }
.recruit-card p { margin: 0 0 30px; color: var(--recruit-forest); line-height: 1.8; }
.recruit-card p strong { color: var(--green); }   /* source paints #4eb151 (2.6:1 on #f8f8f8); brand green clears 5.5:1 */
.recruit-pill {
  display: inline-flex; align-items: center; justify-content: center; min-width: 180px;
  padding: 20px; border-radius: 185px; background-color: var(--green); color: var(--on-dark); box-shadow: var(--sh-pill);
  font-family: var(--font-ui); font-weight: 700; font-size: .75rem; line-height: 1.2; letter-spacing: 2px;
  text-transform: uppercase; text-decoration: none; transition: box-shadow var(--speed);
}
.recruit-pill:hover { box-shadow: var(--sh-recruit-hover); }
.recruit-pill:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
@media (max-width: 1023px) {
  .recruit-hero { min-height: 600px; }
  .recruit-card { max-width: 100%; padding-left: 50px; margin-bottom: 0; }
}
@media (max-width: 767px) {
  .recruit-hero { min-height: 520px; padding: 20px; }
  .recruit-card { padding: 46px 22px 22px; background-color: var(--recruit-card-phone); }
  .recruit-card p { margin-bottom: 15px; }
  .recruit-card .recruit-pill { display: flex; width: 100%; padding: 17px 0; }
}

/* ── 39 circle-photo-quote-benefits ─────────────────────────────────────
 * Photo circle: 450px outer, a 57px translucent-green border ring that shows
 * the #f8f8f8 ground (background-clip keeps the photo off the ring). A 250px
 * hollow ring floats off its top-left and a white quote card overlaps its
 * bottom-left. The "Rounded" divider curves into the white section below. */
.recruit-thrive { position: relative; overflow: hidden; padding: 120px 40px 80px; background-color: var(--mist); }
.recruit-thrive-row {
  position: relative; z-index: 1; display: grid; grid-template-columns: 42.6% 57.4%;
  align-items: center; max-width: 1080px; min-height: 545px; margin: 0 auto;
}
.recruit-thrive-row > * { min-width: 0; }
.recruit-thrive-media { display: flex; justify-content: flex-end; padding-right: 30px; }
.recruit-thrive-frame { position: relative; width: 450px; height: 450px; max-width: 100%; }
.recruit-thrive-ring {
  position: absolute; top: -142px; left: -76px; width: 250px; height: 250px; border-radius: 50%;
  border: 57px solid var(--camp-faint); pointer-events: none;
}
.recruit-thrive-circle {
  position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  border: 57px solid var(--green-soft); background-clip: padding-box;
}
.recruit-thrive-circle img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 43%; border-radius: 50%; }
.recruit-quote {
  position: absolute; left: 0; bottom: -32px; z-index: 2; width: 300px; max-width: 100%;
  padding: 22px 21px; border-radius: 25px; background-color: var(--paper); box-shadow: 0 15px 26px var(--green-soft);
}
.recruit-quote-name { margin: 0; font-size: .875rem; font-weight: 700; letter-spacing: 1px; line-height: 1.6; text-transform: uppercase; color: var(--teal); }
/* Role: source rgba(63,114,55,.5), 2.1:1 on white; lifted to --green (copy people read). */
.recruit-quote-role { margin: 0 0 10px; font-size: .875rem; letter-spacing: 1px; line-height: 1.6; color: var(--green); }
.recruit-quote-text { margin: 0; font-size: .9375rem; line-height: 1.8; }
.recruit-thrive-copy { padding-left: 20px; }
.recruit-thrive-copy h2 { margin: 0 0 20px; }
.recruit-thrive-copy p { margin: 0 0 20px; line-height: 1.8; }
.recruit-thrive-curve { position: absolute; left: 0; bottom: 0; z-index: 0; width: 100%; height: 175px; fill: var(--paper); pointer-events: none; }
@media (max-width: 1023px) {
  .recruit-thrive { padding: 100px 40px 120px; }
  .recruit-thrive-row { grid-template-columns: 1fr; min-height: 0; }
  .recruit-thrive-media { justify-content: center; padding: 0; }
  .recruit-thrive-copy { margin-top: 150px; padding-left: 0; }
  .recruit-thrive-curve { height: 95px; }
}
@media (max-width: 767px) {
  .recruit-thrive { padding: 92px 20px 80px; }
  .recruit-thrive-frame { width: 300px; height: 300px; }
  .recruit-thrive-ring { width: 200px; height: 200px; top: -76px; left: -32px; border-width: 57px; }
  .recruit-thrive-circle { border-width: 40px; }
  .recruit-quote { left: 50%; transform: translateX(-50%); bottom: -136px; width: 256px; }
  .recruit-thrive-copy { margin-top: 178px; }
  .recruit-thrive-curve { height: 58px; }
}

/* ── 40 photo-form-band-ready-to-grow ───────────────────────────────────
 * 30% black wash over the climber photo (fixed on the live site; scrolled
 * here, since fixed backgrounds do not paint in captures). Charcoal floor. */
.recruit-grow {
  position: relative; isolation: isolate; overflow: hidden; padding: 40px;
  background-color: var(--charcoal); color: var(--on-dark);
}
.recruit-grow-photo { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.recruit-grow::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--recruit-grow-wash); pointer-events: none; }
.recruit-grow-mark { position: absolute; top: 0; left: 0; z-index: -1; width: 400px; height: 400px; max-width: 100%; fill: var(--recruit-mark); pointer-events: none; }
.recruit-grow-row {
  display: grid; grid-template-columns: 40% 60%; align-items: center;
  max-width: 1080px; min-height: 583px; margin: 0 auto;
}
.recruit-grow-row > * { min-width: 0; }
.recruit-grow .recruit-grow-h2 { margin: 0 0 12px; font-size: clamp(2.8125rem, 2rem + 2.2vw, 3.875rem); line-height: 1.2; color: var(--on-dark); }
.recruit-grow-sub { margin: 0; font-size: clamp(1.375rem, 1.2rem + .5vw, 1.5625rem); line-height: 1.5; letter-spacing: 8px; text-transform: capitalize; color: var(--on-dark); }
.recruit-form { padding: 40px; border-radius: 12px; background-color: var(--paper); color: var(--recruit-form-ink); }
.recruit-form-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 0 20px; margin-bottom: 30px; }
.recruit-form-pair > * { min-width: 0; }
.recruit-form-label {
  display: block; margin-top: 10px; font-family: var(--recruit-font-form); font-weight: 700; font-size: .75rem;
  line-height: 1.1; letter-spacing: 1px; color: var(--recruit-form-ink);
}
.recruit-form-label span { color: var(--recruit-req); }
.recruit-form-input {
  display: block; width: 100%; min-width: 150px; margin-top: 7px; padding: 12px;
  font-family: var(--recruit-font-form); font-size: .75rem; letter-spacing: 1px; color: var(--recruit-input-ink);
  border: 1px solid var(--border); border-radius: 3px; background-color: var(--recruit-field);
}
.recruit-form-input::placeholder { color: var(--recruit-input-ink); opacity: 1; }
.recruit-form-actions { text-align: center; margin-top: 20px; }
.recruit-form .recruit-grow-submit { border-radius: 116px; padding: 18px 20px; font-size: .75rem; letter-spacing: 4px; }
.recruit-grow-check {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border: 1.2px solid currentColor; border-radius: 50%;
}
.recruit-grow-check svg { width: 12px; height: 12px; fill: currentColor; }
@media (max-width: 880px) {
  .recruit-grow-row { grid-template-columns: 1fr; min-height: 0; gap: 30px; }
}
@media (max-width: 767px) {
  .recruit-grow { padding: 50px 20px 20px; }
  .recruit-grow .recruit-grow-h2 { font-size: 2.8125rem; }
  .recruit-form { padding: 20px; }
  .recruit-form-pair { grid-template-columns: 1fr; margin-bottom: 0; }
  .recruit-form-input { padding: 10px; }
  .recruit-form .recruit-grow-submit { width: 100%; justify-content: space-between; padding-left: 40px; }
}

/* ── 41 about-blurb-vertical-logo ───────────────────────────────────────*/
.recruit-about { padding: 100px 40px; background: var(--paper); }
.recruit-about-row { display: grid; grid-template-columns: 68.9% 31.1%; align-items: center; max-width: 1080px; margin: 0 auto; }
.recruit-about-row > * { min-width: 0; }
.recruit-about-copy { padding-right: 50px; }
.recruit-about .recruit-about-h3 { margin: 0 0 30px; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); line-height: 1.2; }
.recruit-about-copy p { margin: 0; line-height: 1.8; }
.recruit-about-media { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.recruit-about-logo { width: 100%; max-width: 397px; height: auto; }
@media (max-width: 1023px) {
  .recruit-about { padding: 60px 40px 50px; }
  .recruit-about-row { grid-template-columns: 1fr; gap: 30px; }
  .recruit-about-media { order: -1; }
  .recruit-about-copy { padding-right: 0; }
  .recruit-about-logo { max-width: 301px; }
}
@media (max-width: 767px) { .recruit-about { padding: 40px 20px 30px; } }

/* ── 42 job-application-form-posting ────────────────────────────────── */
.jobapp { padding: 40px 40px 60px; background: var(--paper); }
.jobapp-inner { max-width: var(--container); margin: 0 auto; }
.jobapp-intro { margin: 0 0 10px; line-height: 1.8; }
.jobapp-form { max-width: 954px; margin: 0 auto; padding: 0 10px; background-color: var(--paper); }
.jobapp-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 0 15px; }
.jobapp-pair > * { min-width: 0; }
.jobapp-label { display: block; margin: 30px 0 12px; font-size: 1.125rem; line-height: 1.3; color: var(--ink); }
.jobapp-ask { display: block; margin: 30px 0 12px; font-family: var(--recruit-font-form); font-size: 1.125rem; line-height: 1.5; color: var(--recruit-forest); }
.jobapp-input, .jobapp-select {
  display: block; width: 100%; min-width: 150px; padding: 18px;
  font-family: var(--recruit-font-form); font-size: .875rem; line-height: 1.2; color: var(--jobapp-input-ink);
  border: 1px solid var(--jobapp-line); border-radius: 56px; box-shadow: inset 0 0 3px var(--jobapp-line);
  background-color: var(--jobapp-field);
}
.jobapp-input::placeholder { color: var(--jobapp-input-ink); opacity: 1; }
.jobapp-select {
  appearance: none; -webkit-appearance: none; border-radius: 72px; color: var(--jobapp-hint); padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23bcbcbc' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 16px;
}
.jobapp-file {
  display: block; margin-top: 15px; padding: 20px 0;
  border-top: 1px solid var(--jobapp-line); border-bottom: 1px solid var(--jobapp-line);
}
.jobapp-file input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.jobapp-file-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 20px; cursor: pointer;
  border: 2px solid var(--green); border-radius: 45px; color: var(--green);
  font-family: var(--font-ui); font-weight: 700; font-size: .6875rem; letter-spacing: 2px;
  transition: background-color var(--speed), color var(--speed);
}
.jobapp-file-btn svg { width: 17px; height: 23px; fill: currentColor; flex: 0 0 auto; }
.jobapp-file:hover .jobapp-file-btn { background-color: var(--green); color: var(--on-dark); }
.jobapp-form .jobapp-submit {
  display: flex; width: 100%; margin: 20px 0 10px; padding: 18px 22px;
  border-radius: 100px; box-shadow: none; font-size: .875rem; letter-spacing: 2px;
}
.jobapp-note { margin: 0 0 30px; }
.jobapp-rule { margin: 0 0 35px; border: 0; border-top: 3px solid var(--rule-dark); }
.jobapp-post h4 { margin: 0 0 30px; font-size: 1.75rem; line-height: 1.3; }
.jobapp-post h4 u { text-decoration-thickness: 2px; text-underline-offset: 4px; }
.jobapp-post p { margin: 0 0 20px; line-height: 1.8; }
.jobapp-post ul { list-style: disc; margin: 0 0 40px; padding-left: 52px; }
.jobapp-post li { font-family: var(--font-ui); font-size: 1rem; line-height: 1.8; padding-bottom: 10px; }
.jobapp-post p strong { font-weight: 700; color: var(--ink); }
.jobapp-cta-row { text-align: center; margin-top: 10px; }
.jobapp-cta {
  display: inline-block; width: 27%; min-width: 220px; padding: 18px; border-radius: 20px;
  background-color: var(--green); color: var(--on-dark); text-align: center; text-decoration: none;
  font-family: var(--font-ui); font-weight: 700; font-size: .875rem; letter-spacing: 2px; text-transform: uppercase;
  transition: background-color var(--speed);
}
.jobapp-cta:hover { background-color: var(--green-hover); }
.jobapp-cta:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
@media (max-width: 767px) {
  .jobapp { padding: 20px 20px 30px; }
  .jobapp-form { padding: 0; }
  .jobapp-pair { grid-template-columns: 1fr; }
  .jobapp-post ul { padding-left: 32px; }
  .jobapp-cta { width: 85%; min-width: 0; }
}

/* ── 43 404-illustration-search ─────────────────────────────────────────
 * The live search pill carries min-width 550px and overflows phones
 * (scrollWidth 584 at 390); the kit caps it at the column instead. */
.e404 {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 50px 20px 123px; background-color: var(--mint); text-align: center;
}
.e404-slot { width: 166px; min-height: 250px; margin: 0 auto 29px; padding: 12px; display: flex; align-items: center; justify-content: center; }
.e404-msg { max-width: 491px; margin: 0 auto 50px; font-size: 1rem; line-height: 1.75; }
.e404-search {
  display: flex; align-items: stretch; gap: 8px; width: 100%; max-width: 564px; margin: 0 auto;
  padding: 6px; border: 1px solid var(--e404-line); border-radius: var(--r-pill); background-color: transparent;
}
.e404-search input {
  flex: 1 1 auto; min-width: 150px; padding: 0 15px; border: 0; border-radius: var(--r-pill); background: transparent;
  font-family: var(--recruit-font-form); font-size: .75rem; letter-spacing: 2px; color: var(--e404-input-ink);
}
.e404-search input::placeholder { color: var(--e404-input-ink); opacity: 1; }
.e404-search button {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 15px 20px;
  border: 0; border-radius: var(--r-pill); background-color: var(--green); color: var(--on-dark); cursor: pointer;
  font-family: var(--font-body); font-size: 1rem; line-height: 1; letter-spacing: 1px;
  transition: background-color var(--speed);
}
.e404-search button:hover { background-color: var(--green-bright); }
.e404-search button svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 767px) {
  .e404 { padding: 50px 20px 80px; }
  .e404-search button { padding: 15px; }
  .e404-search .e404-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}


/* ══ F-blog ══════════════════════════════════════════════════════ */
/* F-blog: blog index + sidebar, category/author archives, single posts
 * (Thrive theme-53 wrapper, Gutenberg and Thrive Architect bodies) and the
 * stock WordPress attachment view. Patterns 44-59. */

:root {
  /* archive category chip ink. The source paints rgba(78,152,67,.4) on the
     white chip (#b8d6b4, 1.6:1). Darkened along the same hue to clear 4.5:1. */
  --fb-chip-ink: #448539;
  --fb-sep: #808080;               /* Gutenberg wp-block-separator, 2px top border */
  --fb-line: rgba(0, 0, 0, .2);    /* blog pagination rule and page squares */
  --fb-dotted: rgba(0, 0, 0, .22); /* sidebar Recent Posts row dividers */
  --fb-cta-line: #999999;          /* sidebar "Call To Action 08" outline */
  --fb-share-fb: #3569b4;          /* attachment author box share discs (pixel-sampled) */
  --fb-share-tw: #3bceff;
  --fb-avatar: #c6c6c6;            /* Gravatar mystery-person ground in the AIOSEO card */
  --fb-bio-ink: #111111;           /* AIOSEO author name (plugin default) */
  --fb-bio-line: #000000;          /* AIOSEO card 1px outline (plugin default) */
  --fb-bio-link: #008fff;          /* AIOSEO See Full Bio (plugin default, 3.3:1 at 18px) */
  --fb-cmt-ink: #393939;           /* Thrive Comments: count, textarea text */
  --fb-cmt-sort: #6e767d;          /* Thrive Comments: sort option + caret + avatar glyph */
  --fb-cmt-label: #848b91;         /* Thrive Comments: "comments first" */
  --fb-cmt-field: #f6f7f8;         /* Thrive Comments: textarea fill */
  --fb-cmt-border: #c8cacb;
  --fb-cmt-glow: #d5d7d8;          /* textarea inset shadow */
  --fb-cmt-disc: #f2f2f2;          /* placeholder avatar disc */
  /* "Login on website": source paints #03a9f4 (2.6:1 on the grey ground);
     darkened in the same blue to clear 4.5:1. The underline keeps the source tint. */
  --fb-cmt-login: #0277bd;
  --fb-cmt-login-line: rgba(3, 169, 244, .5);
}

/* ── shared post primitives (F-blog only) ─────────────────────────────── */
/* theme-53 wrapper: flat #f9f9f9 band from under the hero to the footer. */
.fblog-band { background-color: var(--post-band); padding: 50px 0 60px; }
/* the single centred 850px body column (content-box width, 20px inset) */
.fblog-col { max-width: 890px; margin: 0 auto; padding: 0 20px; }
/* Thrive thrv-divider: 3px solid #424242, full column width */
.fblog-rule { border: 0; border-top: 3px solid var(--rule-dark); margin: 0; height: 0; }
/* Gutenberg wp-block-separator: 2px solid #808080, 9px 0 27px */
.fblog-sep { border: 0; border-top: 2px solid var(--fb-sep); margin: 9px 0 27px; height: 0; }
/* body type: DM Sans 18 / 32.4, links DM Sans 700 green underlined */
.fblog-prose p { font-family: var(--font-body); font-size: 1.125rem; line-height: 1.8; color: var(--ink); margin: 0 0 20px; }
.fblog-prose a { font-weight: 700; color: var(--green); text-decoration: underline; }
.fblog-prose a:hover { color: var(--green-hover); }
.fblog-prose .kit-note { font-family: var(--font-body); font-size: .8125rem; line-height: 1.5; font-weight: 400; color: var(--ink-quiet); }
.fblog-note { margin: 0 0 12px; }

/* ── 44 attachment-body-author-box ─────────────────────────────────────── */
.att-body { background-color: var(--post-band); padding: 36px 0 60px; }
.att-image { margin: 0 0 8px; }
.att-image img { width: 300px; max-width: 100%; height: 200px; object-fit: cover; }
.att-body .kit-note { margin: 0 0 40px; }
.att-author {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 25%); column-gap: 16px;
  background-color: var(--paper); padding: 30px 30px 46px;
}
.att-author > * { min-width: 0; }
.att-avatar {
  width: 120px; height: 120px; border-radius: 50%; border: 1px dashed var(--border);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px;
}
.att-avatar .kit-note { margin: 0; }
.att-body .att-who h5 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); color: var(--teal); margin: 12px 0 4px; }
.att-name { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: 1.125rem; }
.att-name a { color: var(--green); text-decoration: underline; }
.att-follow-label { margin: 22px 0 10px; font-family: var(--font-ui); font-weight: 700; font-size: .75rem; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); line-height: 1.2; }
.att-share { display: flex; gap: 10px; }
.att-share button {
  width: 24px; height: 24px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--on-dark);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.att-share svg { width: 10px; height: 10px; fill: currentColor; }
.att-share .att-fb { background-color: var(--fb-share-fb); }
.att-share .att-tw { background-color: var(--fb-share-tw); }
@media (max-width: 880px) {
  .att-author { grid-template-columns: 1fr; padding: 16px 16px 30px; }
  .att-avatar { width: min(232px, 100%); height: auto; aspect-ratio: 1; }
  .att-follow-label { margin-top: 10px; }
}

/* ── 45 thrive-comments-block (stock plugin UI) ───────────────────────── */
.cmt-block { background-color: var(--post-band); padding: 60px 0 80px; font-family: 'Roboto', system-ui, -apple-system, sans-serif; color: var(--fb-cmt-ink); }
.cmt-filters { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: 1.25rem; line-height: 1.4; }
.cmt-sort { display: flex; align-items: baseline; gap: 1.25rem; }
.cmt-sort-pick { display: inline-flex; align-items: center; gap: .5rem; color: var(--fb-cmt-sort); }
.cmt-sort-pick svg { width: 12px; height: 7px; fill: currentColor; }
.cmt-sort-label { color: var(--fb-cmt-label); }
.cmt-create { display: flex; align-items: flex-start; gap: 25px; margin-top: 30px; }
.cmt-avatar {
  flex: 0 0 65px; width: 65px; height: 65px; border-radius: 50%; background-color: var(--fb-cmt-disc);
  display: inline-flex; align-items: center; justify-content: center; color: var(--fb-cmt-sort);
}
.cmt-avatar svg { width: 30px; height: 30px; fill: currentColor; }
.cmt-field { flex: 1 1 auto; min-width: 0; }
.cmt-field textarea {
  display: block; width: 100%; min-height: 105px; resize: vertical;
  font: inherit; font-size: 1.25rem; color: var(--fb-cmt-ink); padding: 18px 20px 20px;
  background-color: var(--fb-cmt-field); border: 1px solid var(--fb-cmt-border); border-radius: 5px;
  box-shadow: inset 0 0 3px var(--fb-cmt-glow); outline: none;
}
.cmt-field textarea::placeholder { color: var(--fb-cmt-ink); opacity: 1; }
.cmt-login {
  display: none; margin: 24px auto 0; background: none; border: 0; border-bottom: 2px solid var(--fb-cmt-login-line);
  padding: 0; font: inherit; font-size: .9375rem; font-weight: 500; line-height: 25px; color: var(--fb-cmt-login); cursor: pointer;
}
@media (max-width: 767px) {
  .cmt-filters, .cmt-sort { flex-direction: column; align-items: center; text-align: center; gap: .35rem; }
  .cmt-create { flex-direction: column; align-items: center; gap: 12px; margin-top: 12px; }
  .cmt-avatar { flex-basis: 50px; width: 50px; height: 50px; }
  .cmt-field { width: 100%; text-align: center; }
  .cmt-login { display: inline-block; }
}

/* ── 46 find-us-here-green-band ────────────────────────────────────────── */
.findus { background-color: var(--green); color: var(--on-dark); min-height: 412px; padding: 130px 0 150px; display: grid; align-content: center; }
.findus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
.findus-grid > * { min-width: 0; }
.findus-info { padding: 0 30px; }
.findus .findus-info h3 { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); color: var(--on-dark); margin: 0 0 24px; }
.findus-list { margin: 0 0 16px; }
.findus-list li { display: flex; align-items: center; gap: 12px; padding: 0 0 0 10px; margin: 0 0 22px; font-family: var(--font-ui); font-size: 1.125rem; line-height: 1.6; color: var(--on-dark); overflow-wrap: anywhere; }
.findus-list svg { flex: 0 0 18px; width: 18px; height: 18px; fill: currentColor; }
.findus-map { border: 1px dashed var(--on-dark-line); display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 200px; text-align: center; }
.findus .kit-note { margin: 0; }
@media (max-width: 880px) {
  .findus { padding: 64px 0; }
  .findus-grid { grid-template-columns: 1fr; }
  .findus-info { padding: 0 24px; }
}

/* ── 47 blog-index-card-grid ───────────────────────────────────────────── */
.bidx { background-color: var(--paper); padding: 40px 0 80px; }
.bidx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 278px; column-gap: 60px; }
.bidx-layout > * { min-width: 0; }
.bidx .bidx-main h1 { font-size: clamp(1.875rem, 1.3rem + 1.9vw, 2.875rem); line-height: 1.3; text-align: center; color: var(--teal); margin: 0 0 36px; }
.bidx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); column-gap: 35px; row-gap: 38px; }
.bidx-grid > * { min-width: 0; }
.bidx-img { display: block; position: relative; height: 217px; overflow: hidden; background-color: var(--mist); }
.bidx-img img { width: 100%; height: 100%; object-fit: cover; }
.bidx-img::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0); transition: background-color var(--speed); }
.bidx-img:hover::after { background-color: rgba(255, 255, 255, .08); }
/* the title link paints ink grey; the H2 carries the same ink so no word reads as an accent */
.bidx .bidx-card h2 { font-size: clamp(1.125rem, 1.05rem + .3vw, 1.25rem); line-height: 1.4; color: var(--ink); margin: 18px 0 0; }
.bidx-card h2 a { color: var(--ink); text-decoration: underline; }
.bidx-card h2 a:hover { color: var(--green); }
.bidx-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 44px; padding: 11px 5px 0; border-top: 1px solid var(--fb-line); }
.bidx-page {
  min-width: 40px; height: 42px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--fb-line); border-radius: 2px; background-color: var(--paper);
  font-family: var(--font-body); font-size: 1.125rem; color: var(--ink); text-decoration: none;
}
.bidx-page svg { width: 8px; height: 16px; fill: currentColor; }
a.bidx-page:hover { border-color: var(--green); color: var(--green); }
.bidx-page.is-current { background-color: var(--green); border-color: var(--green); color: var(--on-dark); }
.bidx-page.is-off { border-color: rgba(0, 0, 0, .08); color: var(--ink-quiet); }
.bidx-gap { min-width: 40px; text-align: center; font-size: 1.125rem; color: var(--ink); }
.bidx-aside { border: 1px dashed var(--border); border-radius: var(--r-frame); padding: 1rem; align-self: start; }
.bidx-aside .kit-note, .bidx-main > .kit-note { margin: 0; }
.bidx-main > .kit-note { margin-top: 16px; }
@media (max-width: 880px) {
  .bidx-layout { grid-template-columns: 1fr; row-gap: 40px; }
}
@media (max-width: 767px) {
  .bidx-img { height: 197px; }
  .bidx-pages { padding-left: 0; }
  .bidx-page, .bidx-gap { min-width: 36px; }
}

/* ── 48 blog-sidebar-lists ─────────────────────────────────────────────── */
.bside-wrap { background-color: var(--paper); padding: 40px 0 60px; }
/* demo frame: the sidebar sits in its real 278px track beside a slot for the main column */
.bside-frame { display: grid; grid-template-columns: minmax(0, 1fr) 278px; column-gap: 60px; align-items: start; }
.bside-frame > * { min-width: 0; }
.bside-slot { border: 1px dashed var(--border); border-radius: var(--r-frame); padding: 1rem; }
.bside-slot .kit-note { margin: 0; }
/* H6 labels: Oswald 700 13px, 2px tracking, uppercase via CSS. The source
   paints #aaaaaa (2.3:1 on white); lifted to the kit's quiet grey for 4.5:1. */
.bside h6 { font-family: var(--font-display); font-weight: 700; font-size: .8125rem; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-quiet); margin: 0 0 22px; line-height: 1.4; }
.bside-cats { margin: 0 0 60px; padding-left: 21px; }
.bside-cats li { margin: 0 0 8px; font-family: var(--font-ui); font-weight: 700; font-size: 1rem; line-height: 1.5; }
.bside-cats a, .bside-recent a { color: var(--ink); text-decoration: underline; }
.bside-cats a:hover, .bside-recent a:hover { color: var(--green); }
.bside-recent li { padding: 15px 0; border-bottom: 1px dotted var(--fb-dotted); }
.bside .bside-recent h2 { font-size: 1rem; line-height: 1.4; color: var(--ink); margin: 0; }
@media (max-width: 880px) {
  .bside-frame { grid-template-columns: 1fr; row-gap: 32px; }
}

/* ── 49 sidebar-outline-cta-card ───────────────────────────────────────── */
.bcta-wrap { background-color: var(--paper); padding: 40px 0 60px; }
/* demo frame: same 278px sidebar track as blog-sidebar-lists */
.bcta-frame { display: grid; grid-template-columns: minmax(0, 1fr) 278px; column-gap: 60px; align-items: start; }
.bcta-frame > * { min-width: 0; }
.bcta-slot { border: 1px dashed var(--border); border-radius: var(--r-frame); padding: 1rem; }
.bcta-slot .kit-note { margin: 0; }
.bcta { min-height: 222px; padding: 22px; background-color: var(--paper); border: 1px solid var(--fb-cta-line); border-radius: 6px; text-align: center; }
.bcta-wrap .bcta h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 1.4rem + .3vw, 1.5625rem); line-height: 1.4; color: var(--teal); margin: 0 0 18px; }
.bcta p { font-family: var(--font-body); font-size: .875rem; line-height: 1.8; color: var(--ink); margin: 0; }
@media (max-width: 880px) {
  .bcta-frame { grid-template-columns: 1fr; row-gap: 32px; }
}
@media (max-width: 767px) {
  .bcta { padding: 40px 22px; }
}

/* ── 50 archive-masonry-cards ──────────────────────────────────────────── */
.arch { background-color: var(--paper); padding: 40px 0 80px; }
.arch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); column-gap: 50px; row-gap: 56px; align-items: start; }
.arch-grid > * { min-width: 0; }
.arch .arch-card h2 { font-size: clamp(1.5rem, 1.35rem + .45vw, 1.6875rem); line-height: 1.4; margin: 0 0 10px; }
.arch-card h2 a { color: var(--teal); text-decoration: none; }
.arch-card h2 a:hover { color: var(--green); }
.arch-media { position: relative; }
.arch-img { display: block; height: 253px; overflow: hidden; background-color: var(--mist); }
.arch-img img { width: 100%; height: 100%; object-fit: cover; }
.arch-chip {
  position: absolute; top: 15px; right: 15px; max-width: calc(100% - 30px);
  background-color: var(--paper); border-radius: 47px; padding: 2px 8px;
  font-family: var(--font-ui); font-weight: 700; font-size: .6875rem; letter-spacing: 1px; line-height: 1.6; color: var(--fb-chip-ink);
}
.arch-chip a { color: var(--fb-chip-ink); text-decoration: underline; }
.arch-excerpt { font-family: var(--font-body); font-size: .875rem; line-height: 1.8; color: var(--ink); margin: 16px 0 20px; }
.arch-more {
  display: inline-flex; align-items: center; justify-content: center; padding: 12px 13px;
  background-color: var(--green); color: var(--on-dark); border-radius: 79px; text-decoration: none;
  font-family: var(--font-ui); font-weight: 700; font-size: .6875rem; letter-spacing: 2px; line-height: 1.2;
  transition: background-color var(--speed);
}
.arch-more:hover { background-color: var(--green-hover); }
.arch-load {
  display: flex; align-items: center; justify-content: center; position: relative; width: 100%; min-height: 72px; margin-top: 64px;
  padding: 0 24px 0 56px; background-color: var(--paper); border: 1px solid var(--wash-b); border-radius: 43px; cursor: pointer;
  font-family: var(--font-ui); font-weight: 700; font-size: 1.125rem; color: var(--green);
}
.arch-load svg { position: absolute; left: 24px; top: 50%; width: 18px; height: 18px; margin-top: -9px; fill: currentColor; }
.arch-load:hover { border-color: var(--green); }
.arch > .container > .kit-note { margin: 20px 0 0; }
@media (max-width: 767px) {
  .arch-chip { left: 0; right: 15px; max-width: none; }
  .arch-load { min-height: 60px; margin-top: 44px; }
}

/* ── 51 archive-empty-state ────────────────────────────────────────────── */
.aempty { background-color: var(--paper); padding: 60px 0 80px; }
.aempty-msg { text-align: center; margin: 20px auto; font-family: var(--font-body); font-size: 1.125rem; color: var(--ink); }
.aempty-form { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.aempty-form label { flex: 0 1 280px; min-width: 150px; }
.aempty-form input[type="search"] { width: 100%; font: inherit; font-size: 1rem; padding: 8px 10px; border: 1px solid rgba(0, 0, 0, .25); border-radius: 0; background-color: var(--paper); color: var(--ink); }
.aempty-form input[type="submit"] { min-width: 150px; font: inherit; font-size: 1rem; padding: 8px 16px; border: 1px solid rgba(0, 0, 0, .25); background-color: var(--mist); color: var(--ink); cursor: pointer; }
.aempty-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 52 post-hero-date-chip ────────────────────────────────────────────── */
.phero { background-color: var(--paper); padding: 80px 0 40px; }
/* The source H1 element is teal, but its inner link (to '#') paints the ink
   grey, underlined, and that is all that renders; the kit sets the H1 itself
   to ink so no word reads as an accent. Source declares 500; the kit loads
   400/700, so it renders 400, which matches the thin face in the capture. */
.phero .container h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.875rem, 1.3rem + 1.9vw, 2.875rem); line-height: 1.3; text-align: left; color: var(--ink); margin: 0 0 48px; }
.phero h1 a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* min-width: 0 stops min-height transferring through aspect-ratio into a 363px min-width on phones */
.phero-panel { position: relative; width: 100%; min-width: 0; aspect-ratio: 1040 / 515; min-height: 180px; overflow: hidden; background-color: var(--charcoal); }
.phero-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero-date {
  position: absolute; top: 20px; left: 20px; z-index: 1; margin: 0; padding: 12px; background-color: var(--paper);
  font-family: var(--font-ui); font-size: .625rem; letter-spacing: 2px; text-transform: uppercase; line-height: 1.6; color: var(--teal);
}
.phero .fblog-rule { margin-top: 36px; }
.phero .kit-note { margin: 12px 0 0; }
@media (max-width: 767px) {
  .phero { padding: 44px 0 30px; }
  .phero .container h1 { margin-bottom: 24px; }
  .phero-date { top: 12px; left: 12px; padding: 4px; font-size: .5625rem; }
  .phero .fblog-rule { margin-top: 30px; }
}

/* ── 53 article-prose-column ───────────────────────────────────────────── */
.aprose h3 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); line-height: 1.3; color: var(--teal); margin: 0 0 20px; }
.aprose h5 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); color: var(--teal); margin: 0 0 20px; }
.aprose ul, .aprose ol { padding-left: 30px; margin: 0 0 20px; }
.aprose ul { list-style: disc; }
.aprose ol { list-style: decimal; }
.aprose li { font-family: var(--font-ui); font-size: 1.125rem; line-height: 1.8; color: var(--ink); margin: 0 0 10px; }
.aprose-run + .aprose-run { margin-top: 40px; }

/* ── 54 post-faq-toggle-grid ───────────────────────────────────────────── */
.pfaq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); column-gap: 2px; padding: 56px 0 44px; }
.pfaq > * { min-width: 0; }
.pfaq-item > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; cursor: pointer; }
.pfaq-item > summary::-webkit-details-marker { display: none; }
.pfaq .pfaq-item h4 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.125rem, 1.05rem + .3vw, 1.25rem); line-height: 2; color: var(--teal); margin: 0; }
.pfaq-item summary svg { flex: 0 0 13px; width: 13px; height: 18px; fill: var(--ink); }
.pfaq-item > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.pfaq-item + .pfaq-item { margin-top: 6px; }
.pfaq-a { padding: 20px; }
.pfaq-a p:last-child { margin-bottom: 0; }

/* ── 55 post-story-sections-emoji-h2 ───────────────────────────────────── */
.story-intro { padding: 0 20px; }
.story-box { padding: 20px; }
.story .story-box h2 { font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.3; color: var(--teal); margin: 40px 0 16px; }
.story-row { display: grid; grid-template-columns: minmax(0, 1fr) 223px; column-gap: 80px; align-items: start; margin-top: 40px; }
.story-row > * { min-width: 0; }
.story ul { list-style: disc; padding-left: 48px; margin: 0 0 16px; }
.story .story-box li p { margin-bottom: 26px; }
.story-photo img { width: 223px; height: 335px; object-fit: cover; }
.story-photo .kit-note { margin: 8px 0 0; }
@media (max-width: 880px) {
  .story-row { grid-template-columns: 1fr; row-gap: 12px; }
  .story-photo img { width: 100%; height: auto; aspect-ratio: 223 / 335; }
}

/* ── 56 post-closing-note-divider ──────────────────────────────────────── */
.pnote .fblog-rule { margin-bottom: 28px; }
.pnote p:last-child { margin-bottom: 0; }

/* ── 57 post-closing-cta-gutenberg ─────────────────────────────────────── */
.gcta h3 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); line-height: 1.3; color: var(--teal); margin: 0 0 20px; }

/* ── 58 post-quote-meta-box ────────────────────────────────────────────── */
.pquote {
  margin: 12px 0 20px; padding: 14px 20px; border-top: 1px solid var(--veil); border-radius: 0;
  background-color: var(--mint);   /* source rgba(241,251,239,.9) over #f9f9f9 */
}
.pquote p { margin: 0; font-family: var(--font-ui); font-style: italic; font-size: 1rem; line-height: 1.8; color: var(--ink); }

/* ── 59 author-bio-card-aioseo (plugin default styling) ────────────────── */
.abio { display: flex; align-items: flex-start; gap: 40px; padding: 12px; background-color: var(--paper); border: 1px solid var(--fb-bio-line); border-radius: 5px; }
.abio-avatar { flex: 0 0 120px; width: 120px; height: 120px; border-radius: 5px; overflow: hidden; background-color: var(--fb-avatar); color: var(--paper); }
.abio-avatar svg { width: 100%; height: 100%; display: block; }
.abio-right { min-width: 0; padding-top: 10px; }
.abio-name { display: block; font-family: var(--font-ui); font-weight: 600; font-size: clamp(1.25rem, 1.15rem + .3vw, 1.375rem); line-height: 1.4; color: var(--fb-bio-ink); margin-bottom: 14px; }
.abio-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 1.125rem; color: var(--fb-bio-link); text-decoration: none; }
.abio-link svg { width: 16px; height: 17px; fill: var(--fb-bio-ink); }
.abio-link:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .abio { flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 12px 12px 30px; }
  .abio-avatar { flex-basis: 160px; width: 160px; height: 160px; }
  .abio-right { padding-top: 0; }
}


/* ══ doc pages: kitchen-sink helpers ══════════════════════════════════════ */
.ks-block { margin: 0 0 3rem; }
.ks-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.ks-dark { background: var(--charcoal); border-radius: var(--r-card); padding: 1.5rem; }
.ks-mint { background: var(--mint); border-radius: var(--r-card); padding: 1.5rem; }
.ks-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1rem; }
.ks-photos > * { min-width: 0; }
.ks-photos figure { margin: 0; }
.ks-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); }
.ks-photos figcaption { font-size: .8125rem; color: var(--ink-muted); margin-top: .375rem; overflow-wrap: anywhere; }
.ks-logo { background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-card); padding: 1.5rem; display: flex; gap: 2rem; flex-wrap: wrap; align-items: center; }
.ks-logo img { width: 200px; height: auto; }
.ks-body-sample { font-family: var(--font-body); font-size: 1.125rem; color: var(--ink); margin: 0; }
.ks-ui-sample { font-family: var(--font-ui); font-weight: 700; font-size: 1rem; color: var(--green); margin: 0; }