/* ==========================================================================
   theme-extra.css — section-specific rules ported from the static site's
   inline <style> block (agitate, estimator gate, services, video lightbox).
   Loaded after brand.css.
   ========================================================================== */

/* Problem-agitation block (between hero and estimator) */
.agitate__inner { max-width: 880px; }
.agitate .h-section { max-width: 24ch; }
.agitate .lede + .lede { margin-top: 1.1rem; }

/* Estimator Step-2 gate: deliverables + contact form, inside the dark result band */
.estimator__gate { border-top: 1px solid var(--hairline-dark); margin-top: 0.4rem; padding-top: 1.4rem; transition: box-shadow .5s ease, background .5s ease; }
.estimator__gate-head { font-family: var(--font-alt); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; color: var(--accent-bright); font-weight: 700; margin-bottom: 0.9rem; }
.estimator__deliverables { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: 0.7rem; }
.estimator__deliverables li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.9rem; color: var(--text-muted-dark); line-height: 1.5; }
.estimator__deliverables svg { flex: none; margin-top: 3px; color: var(--accent-bright); }
.estimator__deliverables b { color: var(--ab-white); font-weight: 700; }
.estimator__form2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-bottom: 1rem; }
.field2 { display: flex; flex-direction: column; gap: 0.35rem; }
.field2 label { font-family: var(--font-alt); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; color: var(--text-muted-dark); font-weight: 600; }
.field2 input {
  width: 100%; background: rgba(255,255,255,.05); border: 1px solid var(--hairline-dark);
  border-radius: var(--radius); padding: 0.7em 0.9em; color: var(--ab-white);
  font-family: var(--font-body); font-size: 0.95rem; transition: border-color var(--dur-fast);
}
.field2 input::placeholder { color: var(--text-muted-dark); }
.field2 input:focus { border-color: var(--accent); }
.field2 input:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
.estimator__privacy { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.74rem; color: var(--text-muted-dark); line-height: 1.45; margin-top: 0.8rem; }

/* Services (What We Do) */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.service-card { background: var(--ab-white); border: 1px solid var(--hairline-light); border-top: 3px solid var(--ab-teal); border-radius: var(--radius-lg); padding: 1.8rem; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast); }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-1); }
.service-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.55rem; margin-bottom: 0.5rem; }
.service-card p { font-size: 0.94rem; color: var(--text-muted-light); margin: 0; line-height: 1.6; }

@media (max-width: 860px) {
  .estimator__form2-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1080px) {
  .services { grid-template-columns: 1fr; }
}
/* Founder briefing video lightbox */
.vlightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:6vw;}
.vlightbox[hidden]{display:none;}
.vlightbox__backdrop{position:absolute;inset:0;background:rgba(8,16,25,.86);backdrop-filter:blur(4px);}
.vlightbox__frame{position:relative;width:min(960px,100%);aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6);}
.vlightbox__embed{position:absolute;inset:0;}
.vlightbox__embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.vlightbox__close{position:absolute;top:-2.8rem;right:0;z-index:2;background:none;border:0;color:#fff;font-size:2.2rem;line-height:1;cursor:pointer;}

/* ==========================================================================
   Blog (index, single, archive, search)
   ========================================================================== */
.blog-header { text-align: left; }
.blog-header .h-display { max-width: 22ch; }
.blog-header__search { margin-top: 1.6rem; display: flex; justify-content: flex-start; }
.search-form { display: flex; gap: .5rem; width: min(520px, 100%); }
.search-form__input {
  flex: 1; background: rgba(255,255,255,.06); border: 1px solid var(--hairline-dark);
  border-radius: var(--radius); padding: .7em .9em; color: var(--ab-white); font-family: var(--font-body);
}
.search-form__input::placeholder { color: var(--text-muted-dark); }
.search-form__input:focus { border-color: var(--accent); outline: none; }

.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 1080px) { .posts-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .posts-grid { grid-template-columns: 1fr; } }
.post-card { position: relative; background: var(--ab-white); border: 1px solid var(--hairline-light); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast); }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-1); }
/* Make the whole card clickable (stretched link over the title link) */
.post-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Lifted above .post-card__title a::after, which covers the whole card — without
   this the category/date links in the meta line are unclickable. */
.post-card__media, .post-card__more, .post-card__meta { position: relative; z-index: 2; }
.post-card__meta a { display: inline-block; }
.post-card__meta a:hover { text-decoration: underline; }
.post-card__media { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--ab-mist, #eef1f3); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.post-card__meta { font-family: var(--font-alt); text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; color: var(--ab-teal); font-weight: 600; }
.post-card__meta a { color: inherit; }
.post-card__title { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; line-height: 1.2; margin: 0; }
.post-card__title a { color: var(--ab-charcoal); }
.post-card__excerpt { font-size: .92rem; color: var(--text-muted-light); line-height: 1.6; margin: 0; }
.post-card__more { margin-top: auto; font-weight: 700; color: var(--ab-teal); font-size: .9rem; }

/* ============================================================== BLOG ARTICLE */
/* Shared measure so header, hero image and body all share one left edge. */
.blog-single__col { max-width: 1100px; }
.blog-single-header { padding: clamp(2.4rem, 5vw, 4rem) 0 0; }
.blog-single-header .h-display { max-width: 18ch; font-size: clamp(2rem, 4.4vw, 3.3rem); margin: 0; }
/* Rule closes the byline block, above the title. */
.blog-single__byline-rule { border: 0; border-top: 1px solid var(--hairline-light); margin: 0 0 clamp(1.6rem, 3vw, 2.4rem); }
.blog-single__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  font-family: var(--font-alt); text-transform: uppercase; letter-spacing: .12em;
  font-size: .72rem; font-weight: 600; color: var(--ab-teal-deep); margin: 0 0 1.1rem;
}
.blog-single__meta span + span::before { content: "·"; margin-right: .55rem; }
.blog-single__meta a { color: inherit; transition: color var(--dur-fast) var(--ease); }
.blog-single__meta a:hover { color: var(--ab-charcoal); text-decoration: underline; }

.byline { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.4rem; }
.byline__avatar, .author-card__avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--ab-charcoal);
  color: var(--accent-bright); font-family: var(--font-num); font-weight: 700; font-size: .82rem; letter-spacing: .06em;
}
.byline__avatar img, .author-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.byline__text { display: flex; flex-direction: column; line-height: 1.3; }
.byline__text b { font-size: .95rem; color: var(--ab-ink); }
.byline__text b a, .author-card b a { color: inherit; transition: color var(--dur-fast) var(--ease); }
.byline__text b a:hover, .author-card b a:hover { color: var(--ab-teal-deep); text-decoration: underline; }
.byline__text span { font-size: .8rem; color: var(--text-muted-light); }

.blog-single__media { max-width: 1100px; margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; position: relative; z-index: 2; }
.blog-single__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.blog-single__media figcaption { font-size: .82rem; font-style: italic; color: var(--text-muted-light); margin-top: .7rem; }

.blog-single__main { padding-top: clamp(2rem, 4vw, 3.2rem); }
/* Same measure as the header/media above, so the TOC rail, H1 and featured image
   all share one left edge (max-width on .container, not on the grid inside it). */
.blog-single__main > .container { max-width: 1100px; }
.blog-grid {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.blog-grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 760px; }

.blog-toc { position: sticky; top: 96px; }
.blog-toc__title {
  font-family: var(--font-alt); text-transform: uppercase; letter-spacing: .16em;
  font-size: .7rem; font-weight: 700; color: var(--text-muted-light); margin: 0 0 1rem;
}
/* The rule runs beside the items only, not the title; the active item lights a
   teal segment of it (see the scroll-spy in site.js). */
.blog-toc__list { list-style: none; margin: 0; padding: 0; }
.blog-toc__list li { border-left: 2px solid var(--hairline-light); }
.blog-toc__list a { display: block; padding: .5rem 0 .5rem 1rem; font-size: .85rem; line-height: 1.4; color: var(--text-muted-light); transition: color var(--dur-fast) var(--ease); }
.blog-toc__list a:hover { color: var(--ab-teal-deep); }
.blog-toc__list li.is-current { border-left-color: var(--ab-teal); }
.blog-toc__list li.is-current a { color: var(--ab-ink); font-weight: 700; }

.blog-body { max-width: 760px; }
/* Drop cap only when the article actually opens with a paragraph — first-of-type
   would otherwise decorate a paragraph sitting mid-article under the first H2. */
.blog-body > p:first-child::first-letter {
  float: left; font-family: var(--font-display); font-weight: 500; font-size: 3.6em;
  line-height: .82; padding: .04em .12em 0 0; color: var(--ab-charcoal);
}

.inline-cta {
  background: var(--ab-charcoal); color: var(--text-on-dark);
  border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem); margin: 2.4rem 0;
}
.inline-cta h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; color: var(--ab-white); margin: 0 0 .4rem; }
.inline-cta p { font-size: .9rem; color: var(--text-muted-dark); margin: 0 0 1.1rem; }

.post-faq { margin-top: 2.8rem; }
.post-faq__item { background: var(--ab-grey-100); border: 1px solid var(--hairline-light); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-bottom: .8rem; }
.post-faq__item h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; margin: 0 0 .4rem; }
.post-faq__item p { font-size: .9rem; color: var(--text-muted-light); margin: 0; }

.author-card {
  display: flex; gap: 1.2rem; align-items: flex-start;
  background: var(--ab-offwhite); border: 1px solid var(--hairline-light);
  border-radius: var(--radius-lg); padding: clamp(1.3rem, 3vw, 1.8rem); margin-top: 2.6rem;
}
.author-card__avatar { width: 56px; height: 56px; font-size: .95rem; }
.author-card b { display: block; font-size: .98rem; color: var(--ab-ink); margin-bottom: .35rem; }
.author-card p { font-size: .9rem; line-height: 1.6; color: var(--text-muted-light); margin: 0; }

@media (max-width: 940px) {
  .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .blog-toc { position: static; order: -1; }
  .blog-body { max-width: none; }
}
.rich { line-height: 1.75; }
.rich h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.9rem; margin: 2rem 0 .8rem; }
.rich h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; margin: 1.6rem 0 .6rem; }
.rich p { margin: 0 0 1.1rem; }
.rich ul, .rich ol { margin: 0 0 1.1rem 1.2rem; }
.rich li { margin-bottom: .4rem; }
.rich a:not(.btn) { color: var(--ab-teal); text-decoration: underline; }
/* Buttons embedded in WYSIWYG content keep their own colour — .rich a used to win on
   specificity and render teal-on-teal (invisible) with a stray underline. */
.rich a.btn { text-decoration: none; }
.rich img { max-width: 100%; height: auto; border-radius: var(--radius); }
.rich blockquote { margin: 1.4rem 0; padding: .2rem 0 .2rem 1.2rem; border-left: 3px solid var(--ab-teal); font-style: italic; color: var(--text-muted-light); }
.ab-pagination { margin-top: 2.4rem; display: flex; justify-content: center; gap: .4rem; }
.ab-pagination .page-numbers { display: inline-flex; min-width: 2.4rem; height: 2.4rem; align-items: center; justify-content: center; padding: 0 .6rem; border: 1px solid var(--hairline-light); border-radius: var(--radius); color: var(--ab-charcoal); font-weight: 600; }
.ab-pagination .page-numbers.current { background: var(--ab-teal); color: #fff; border-color: var(--ab-teal); }

/* Footer: gap between logo and tagline */
.footer__top .brand { display: inline-block; margin-bottom: 1.2rem; }
.footer__tag { margin-top: 0.4rem; }

/* About: team grid */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 2.4rem; }
@media (max-width: 1080px){ .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px){ .team-grid { grid-template-columns: 1fr; } }
.team-card { background: var(--ab-white); border: 1px solid var(--hairline-light); border-top: 3px solid var(--ab-teal); border-radius: var(--radius-lg); padding: 1.6rem; }
.team-card__photo { aspect-ratio: 1/1; overflow: hidden; border-radius: var(--radius); margin-bottom: 1rem; background: var(--ab-mist,#eef1f3); }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__name { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; margin: 0; }
.team-card__role { font-family: var(--font-alt); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--ab-teal); font-weight: 600; margin: .2rem 0 .6rem; }
.team-card__bio { font-size: .92rem; color: var(--text-muted-light); line-height: 1.6; margin: 0; }

/* 404 */
.error404-hero { min-height: 60vh; display: flex; align-items: center; text-align: center; }
.error404-hero .h-display { font-size: clamp(3rem, 10vw, 7rem); }

/* Contact page */
.contact-hero { padding-block: clamp(4.5rem, 9vw, 8rem); overflow: hidden; position: relative; }
.contact-hero::before { content: ""; width: 38rem; height: 38rem; position: absolute; right: -15rem; top: -20rem; border: 1px solid rgba(96,211,188,.18); border-radius: 50%; box-shadow: 0 0 0 4rem rgba(96,211,188,.025), 0 0 0 8rem rgba(96,211,188,.018); }
.contact-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(360px, .78fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.contact-hero__inner > :only-child { grid-column: 1 / -1; max-width: 680px; }
.contact-hero__copy .h-display { margin: .65rem 0 1.25rem; max-width: 12ch; }
.contact-hero__copy .lede { max-width: 50ch; }
.contact-hero__assurances { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 2rem; color: var(--text-muted-dark); font-size: .84rem; }
.contact-hero__assurances span { display: inline-flex; gap: .45rem; align-items: center; }
.contact-hero__assurances svg { width: 18px; height: 18px; fill: none; stroke: var(--accent-bright); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-card { background: var(--ab-white); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.6rem); box-shadow: 0 24px 70px rgba(0,0,0,.22); color: var(--ab-ink); }
.contact-card__head { border-bottom: 1px solid var(--hairline-light); margin-bottom: 1.5rem; padding-bottom: 1.25rem; }
.contact-card__head .eyebrow { color: var(--ab-teal); margin-bottom: .55rem; }
.contact-card__head h2 { font-family: var(--font-display); font-size: 2rem; font-weight: 500; margin: 0 0 .35rem; }
.contact-card__head p:last-child { color: var(--text-muted-light); font-size: .92rem; line-height: 1.55; margin: 0; }
.contact-card__form { display: grid; gap: 1rem; }
.contact-field { display: grid; gap: .42rem; }
.contact-field label { color: var(--ab-charcoal); font-family: var(--font-alt); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.contact-field label small { color: var(--text-muted-light); font: inherit; letter-spacing: 0; text-transform: none; }
.contact-field input, .contact-field textarea { width: 100%; border: 1px solid var(--hairline-light); border-radius: var(--radius); background: #fff; color: var(--ab-charcoal); font: inherit; padding: .78em .9em; }
.contact-field textarea { min-height: 92px; resize: vertical; }
.contact-field input:focus, .contact-field textarea:focus { border-color: var(--ab-teal); outline: 2px solid rgba(76,191,169,.2); outline-offset: 2px; }
.contact-card__form .btn { justify-content: center; margin-top: .3rem; width: 100%; }
.contact-card__privacy { color: var(--text-muted-light); font-size: .75rem; line-height: 1.45; margin: 0; text-align: center; }
.contact-card__form--gf .gform_wrapper { margin: 0; }
.contact-card__form--gf .gform_fields { display: grid; gap: 1rem; }
.contact-card__form--gf input, .contact-card__form--gf textarea, .contact-card__form--gf select { border-color: var(--hairline-light) !important; background: #fff !important; color: var(--ab-charcoal) !important; }
.contact-card__form--gf .gfield_label { color: var(--ab-charcoal) !important; }
.contact-card__form--gf .gform_footer input { width: 100%; }
.contact-details { padding-block: clamp(3.5rem, 7vw, 6rem); }
.contact-details__intro { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.contact-details__intro .eyebrow { margin-bottom: .6rem; }
.contact-details__intro .h-section { margin: 0; }
.contact-details__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.contact-detail { align-items: center; background: var(--ab-white); border: 1px solid var(--hairline-light); border-radius: var(--radius-lg); color: var(--ab-charcoal); display: flex; gap: 1rem; min-height: 104px; padding: 1.3rem; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast), border-color var(--dur-fast); }
a.contact-detail:hover { border-color: var(--ab-teal); box-shadow: var(--shadow-1); transform: translateY(-3px); }
.contact-detail__icon { background: var(--ab-mist); border-radius: 50%; color: var(--ab-teal); display: grid; flex: none; height: 2.75rem; place-items: center; width: 2.75rem; }
.contact-detail small { color: var(--text-muted-light); display: block; font-family: var(--font-alt); font-size: .68rem; font-weight: 700; letter-spacing: .08em; margin-bottom: .25rem; text-transform: uppercase; }
.contact-detail strong { display: block; font-size: .95rem; font-weight: 700; line-height: 1.35; }
.contact-detail > b { color: var(--ab-teal); font-size: 1.25rem; margin-left: auto; }
.contact-detail--note { background: var(--ab-mist); border-color: transparent; }
.contact-map { background: var(--ab-mist); line-height: 0; }
.contact-map iframe { display: block; height: 400px; width: 100%; }
@media (max-width: 900px) { .contact-hero__inner { grid-template-columns: 1fr; max-width: 680px; } .contact-details__grid { grid-template-columns: 1fr; } }
@media (max-width: 540px) { .contact-hero { padding-top: 4rem; } .contact-card { padding: 1.35rem; } .contact-details__intro { display: block; } }
.error404-links { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.6rem; }

/* Gravity Forms — match dark brand contexts (footer connect + estimator) */
.connect__form--gf .gform_wrapper, .estimator__form2--gf .gform_wrapper { margin: 0; }
.connect__form--gf .gform_fields, .estimator__form2--gf .gform_fields { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.connect__form--gf .gfield, .estimator__form2--gf .gfield { grid-column: span 2; }
.connect__form--gf .gform_footer, .estimator__form2--gf .gform_footer { grid-column: span 2; padding: .6rem 0 0; }
.connect__form--gf label.gfield_label, .estimator__form2--gf label.gfield_label { font-family: var(--font-alt); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--text-muted-dark); font-weight: 600; }
.connect__form--gf input, .connect__form--gf textarea, .estimator__form2--gf input, .estimator__form2--gf textarea {
  width: 100%; background: rgba(255,255,255,.05); border: 1px solid var(--hairline-dark);
  border-radius: var(--radius); padding: .7em .9em; color: var(--ab-white); font-family: var(--font-body); font-size: .95rem;
}
.connect__form--gf input::placeholder, .estimator__form2--gf input::placeholder,
.connect__form--gf textarea::placeholder, .estimator__form2--gf textarea::placeholder { color: var(--text-muted-dark); }
.connect__form--gf input:focus, .estimator__form2--gf input:focus,
.connect__form--gf textarea:focus, .estimator__form2--gf textarea:focus { border-color: var(--accent); outline: none; }
.connect__form--gf .gform_button, .estimator__form2--gf .gform_button {
  width: 100%; cursor: pointer; border: 0; border-radius: var(--radius); padding: .9em 1.2em;
  background: var(--ab-teal); color: #fff; font-family: var(--font-alt); text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
.connect__form--gf .gform_button:hover, .estimator__form2--gf .gform_button:hover { filter: brightness(1.08); }
.connect__form--gf .gfield_consent_label, .connect__form--gf .gfield--type-consent label { font-size: .78rem; color: var(--text-muted-dark); text-transform: none; letter-spacing: 0; font-weight: 400; }
.connect__form--gf .validation_message, .estimator__form2--gf .validation_message { color: #ffb4b4; font-size: .78rem; }
@media (max-width: 640px){ .connect__form--gf .gform_fields, .estimator__form2--gf .gform_fields { grid-template-columns: 1fr; } .connect__form--gf .gfield, .estimator__form2--gf .gfield { grid-column: span 1; } }

/* ==========================================================================
   Gravity Forms — force dark-context styling (footer connect + estimator)
   Higher specificity + !important to beat GF's own theme stylesheet.
   ========================================================================== */
.connect__form--gf .gform_wrapper input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
.connect__form--gf .gform_wrapper textarea,
.connect__form--gf .gform_wrapper select,
.estimator__form2--gf .gform_wrapper input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
.estimator__form2--gf .gform_wrapper textarea,
.estimator__form2--gf .gform_wrapper select {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: .75em .9em !important;
  font-family: var(--font-body) !important;
  font-size: .95rem !important;
  box-shadow: none !important;
  width: 100% !important;
}
/* The Connect block sits on a raised panel, so its inputs are recessed
   (darker than the panel) instead of lighter — otherwise they disappear. */
.connect__form--gf .gform_wrapper input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
.connect__form--gf .gform_wrapper textarea,
.connect__form--gf .gform_wrapper select {
  background: rgba(4, 12, 22, .55) !important;
  border-color: rgba(255,255,255,.14) !important;
}

.connect__form--gf .gform_wrapper input::placeholder,
.connect__form--gf .gform_wrapper textarea::placeholder,
.estimator__form2--gf .gform_wrapper input::placeholder,
.estimator__form2--gf .gform_wrapper textarea::placeholder { color: rgba(255,255,255,.45) !important; }
.connect__form--gf .gform_wrapper input:focus,
.connect__form--gf .gform_wrapper textarea:focus,
.estimator__form2--gf .gform_wrapper input:focus,
.estimator__form2--gf .gform_wrapper textarea:focus { border-color: var(--ab-teal) !important; outline: none !important; }

.connect__form--gf .gform_wrapper .gfield_label,
.connect__form--gf .gform_wrapper legend.gfield_label,
.estimator__form2--gf .gform_wrapper .gfield_label,
.estimator__form2--gf .gform_wrapper legend.gfield_label {
  color: rgba(255,255,255,.72) !important;
  font-family: var(--font-alt) !important; text-transform: uppercase !important; letter-spacing: .08em !important;
  font-size: .72rem !important; font-weight: 600 !important; margin-bottom: .35rem !important;
}
.connect__form--gf .gform_wrapper .gfield_required { color: var(--ab-teal) !important; }

/* checkbox / consent row */
.connect__form--gf .gform_wrapper .gchoice label,
.connect__form--gf .gform_wrapper .gfield_checkbox label {
  color: rgba(255,255,255,.6) !important; font-size: .78rem !important; text-transform: none !important;
  letter-spacing: 0 !important; font-weight: 400 !important; line-height: 1.45 !important;
}

/* submit button — teal, full width */
.connect__form--gf .gform_wrapper .gform_footer input[type=submit],
.connect__form--gf .gform_wrapper .gform_footer button,
.estimator__form2--gf .gform_wrapper .gform_footer input[type=submit],
.estimator__form2--gf .gform_wrapper .gform_footer button {
  width: 100% !important; cursor: pointer !important; border: 0 !important; border-radius: 8px !important;
  padding: .95em 1.2em !important; background: var(--ab-teal) !important; color: #fff !important;
  font-family: var(--font-alt) !important; text-transform: uppercase !important; letter-spacing: .08em !important;
  font-weight: 700 !important; font-size: .82rem !important; margin-top: .4rem !important;
}
.connect__form--gf .gform_wrapper .gform_footer input[type=submit]:hover,
.estimator__form2--gf .gform_wrapper .gform_footer input[type=submit]:hover { filter: brightness(1.08) !important; }

/* validation + confirmation text on dark */
.connect__form--gf .gform_wrapper .validation_message,
.estimator__form2--gf .gform_wrapper .validation_message { color: #c02b0a !important; background: transparent !important; border: 0 !important; padding: .2rem 0 0 !important; }
.connect__form--gf .gform_wrapper .gfield_description,
.estimator__form2--gf .gform_wrapper .gfield_description { color: rgba(255,255,255,.5) !important; }
.connect__form--gf .gform_confirmation_message,
.estimator__form2--gf .gform_confirmation_message { color: #fff !important; }
/* Connect form — 2-column layout (matches reference):
   First | Last, then Email | Phone; textarea / checkbox / button full width. */
.connect__form--gf, .connect__form--gf .gform_wrapper, .connect__form--gf form,
.connect__form--gf .gform_body, .connect__form--gf .gform-body { width: 100% !important; max-width: 100% !important; }
.connect__form--gf .gform_wrapper .gform_fields {
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1.1rem 1rem !important;
}
.connect__form--gf .gform_wrapper .gfield { grid-column: span 2 !important; width: 100% !important; }
.connect__form--gf .gform_wrapper .gfield--type-text,
.connect__form--gf .gform_wrapper .gfield--type-email,
.connect__form--gf .gform_wrapper .gfield--type-phone { grid-column: span 1 !important; }
@media (max-width: 560px){
  .connect__form--gf .gform_wrapper .gform_fields { grid-template-columns: 1fr !important; }
  .connect__form--gf .gform_wrapper .gfield { grid-column: span 1 !important; }
}

/* Fix: the GF wrapper also carries .connect__form (grid) from brand.css, which
   squeezed the form into one half-column. Force it to block so the form fills full width. */
.connect__form--gf { display: block !important; grid-template-columns: none !important; }

/* Estimator step-2 form — 2 fields per row (Your name | Email, Phone | Practice name) */
.estimator__form2--gf { display: block !important; }
.estimator__form2--gf .gform_wrapper .gform_fields {
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1.1rem 1rem !important;
}
.estimator__form2--gf .gform_wrapper .gfield { grid-column: span 1 !important; width: 100% !important; }
.estimator__form2--gf .gform_wrapper .gfield--type-textarea { grid-column: span 2 !important; }
@media (max-width: 560px){
  .estimator__form2--gf .gform_wrapper .gform_fields { grid-template-columns: 1fr !important; }
  .estimator__form2--gf .gform_wrapper .gfield { grid-column: span 1 !important; }
}

/* Header search dropdown (opens the blog search box from the header icon) */
.nav__search-wrap { position: relative; display: inline-flex; }
.header-search {
  position: absolute; top: calc(100% + 14px); right: 0; z-index: 60;
  width: min(360px, 78vw); padding: 1rem; border-radius: var(--radius-lg);
  background: var(--ab-charcoal, #112337); border: 1px solid var(--hairline-dark);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.header-search::before {
  content: ""; position: absolute; top: -6px; right: 18px; width: 12px; height: 12px;
  background: var(--ab-charcoal, #112337); border-left: 1px solid var(--hairline-dark); border-top: 1px solid var(--hairline-dark);
  transform: rotate(45deg);
}
.header-search .search-form { width: 100%; }

/* ---------------------------------------------------------------------------
 * Adjacent same-surface sections: collapse the doubled vertical gap.
 * Two stacked .section--light (e.g. Intro + Subtopics on the Transaction
 * Advisory page) otherwise show ~2x padding as one empty band. Dropping the
 * second section's top padding leaves a single section's worth of space.
 *
 * Exception: a section carrying its own full-bleed backdrop (.w5-rel, e.g. the
 * Estimator) keeps its top padding. Collapsing it is fine when the surfaces
 * merge invisibly, but the backdrop makes the band visible, and its heading
 * then sat 22px from the band's edge instead of the usual 132px — it read as
 * cropped. Plain continuations still collapse, so the rhythm from the previous
 * section's content to the next heading stays a consistent 132px.
 * ------------------------------------------------------------------------- */
.section--light + .section--light:not(.w5-rel),
.section--grey  + .section--grey:not(.w5-rel),
.section--dark  + .section--dark:not(.w5-rel),
.section--deep  + .section--deep:not(.w5-rel) { padding-top: 0; }

/* Team cards that link to a member detail page (Our Team + About). */
.team-card { transition: box-shadow .18s ease, transform .18s ease; }
.team-card:has(.team-card__link):hover { box-shadow: 0 14px 34px rgba(0,0,0,.10); transform: translateY(-3px); }
.team-card__link { display: block; color: inherit; text-decoration: none; }
.team-card__more { display: inline-block; margin-top: .9rem; font-family: var(--font-alt); font-weight: 600; font-size: .82rem; letter-spacing: .04em; color: var(--ab-teal); }
.team-card__link:hover .team-card__more { text-decoration: underline; }

/* ---------------------------------------------------------------------------
 * Blog / rich article tables — styled comparison + data tables.
 * ------------------------------------------------------------------------- */
.rich table {
	width: 100%; border-collapse: separate; border-spacing: 0;
	margin: 2rem 0; font-size: .94rem; line-height: 1.5;
	border: 1px solid var(--hairline-light); border-radius: var(--radius-lg);
	overflow: hidden; box-shadow: 0 6px 22px rgba(16,35,55,.06);
}
.rich table thead th {
	background: var(--ab-charcoal, #112337); color: #fff;
	font-family: var(--font-alt); font-weight: 600;
	text-transform: uppercase; letter-spacing: .05em; font-size: .78rem;
	text-align: left; padding: .95rem 1.1rem;
}
.rich table td, .rich table th { padding: .85rem 1.1rem; vertical-align: top; text-align: left; }
.rich table tbody td { border-top: 1px solid var(--hairline-light); }
.rich table tbody tr:nth-child(even) { background: rgba(16,35,55,.025); }
.rich table tbody tr:hover { background: rgba(76,191,169,.06); }
.rich table td:first-child { font-weight: 600; color: var(--ab-charcoal, #112337); }
.rich table strong { color: var(--ab-teal, #2f8f7f); }
/* Horizontal scroll on small screens instead of breaking the layout. */
@media (max-width: 700px) {
	.rich table { display: block; overflow-x: auto; white-space: nowrap; box-shadow: none; }
}

/* Blog article body rhythm. */
.rich h2 { margin-top: 2.4rem; }
.rich h3 { margin-top: 1.8rem; }
.rich ul, .rich ol { margin: 1rem 0 1.4rem; padding-left: 1.3rem; }
.rich li { margin-bottom: .5rem; }

/* Contact form — intentionally late: Gravity Forms loads its stylesheet after
   the theme and otherwise strips the light-card treatment from this page. */
.contact-hero .contact-card { background: #fff !important; border: 1px solid rgba(255,255,255,.35); color: var(--ab-charcoal) !important; opacity: 1; transform: none; }
.contact-hero .contact-card .gform_wrapper { margin: 0 !important; max-width: none !important; }
.contact-hero .contact-card .gform_fields { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1rem !important; }
.contact-hero .contact-card .gfield { grid-column: span 2 !important; margin: 0 !important; }
.contact-hero .contact-card .gfield--type-text,
.contact-hero .contact-card .gfield--type-email,
.contact-hero .contact-card .gfield--type-phone { grid-column: span 1 !important; }
.contact-hero .contact-card .gfield_label,
.contact-hero .contact-card legend.gfield_label { color: var(--ab-charcoal) !important; font-family: var(--font-alt) !important; font-size: .7rem !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; }
.contact-hero .contact-card input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
.contact-hero .contact-card textarea,
.contact-hero .contact-card select { background: #fff !important; border: 1px solid var(--hairline-light) !important; border-radius: var(--radius) !important; box-shadow: none !important; color: var(--ab-charcoal) !important; min-height: 46px; width: 100% !important; }
.contact-hero .contact-card textarea { min-height: 108px; }
.contact-hero .contact-card input:focus,
.contact-hero .contact-card textarea:focus,
.contact-hero .contact-card select:focus { border-color: var(--ab-teal) !important; outline: 2px solid rgba(76,191,169,.18) !important; outline-offset: 2px !important; }
.contact-hero .contact-card .gform_footer { margin: .4rem 0 0 !important; padding: 0 !important; }
.contact-hero .contact-card .gform_footer input[type=submit],
.contact-hero .contact-card .gform_footer button { background: var(--ab-teal) !important; border: 0 !important; border-radius: var(--radius) !important; color: #fff !important; cursor: pointer; font-family: var(--font-alt) !important; font-size: .8rem !important; font-weight: 700 !important; letter-spacing: .08em !important; min-height: 48px; text-transform: uppercase !important; width: 100% !important; }
.contact-hero .contact-card .gfield_description,
.contact-hero .contact-card .gchoice label { color: var(--text-muted-light) !important; }
.contact-details .contact-details__grid { display: grid !important; }
.contact-details .contact-detail { display: flex !important; text-decoration: none; }
@media (max-width: 640px) { .contact-hero .contact-card .gform_fields { grid-template-columns: 1fr !important; } .contact-hero .contact-card .gfield--type-text, .contact-hero .contact-card .gfield--type-email, .contact-hero .contact-card .gfield--type-phone { grid-column: span 1 !important; } }

/* Contact details: left-aligned title and equal, well-defined action cards. */
.contact-details .contact-details__intro { align-items: flex-start; display: block; margin-bottom: 2.2rem; }
.contact-details .contact-details__intro .h-section { max-width: none; text-align: left; }
.contact-details .contact-details__grid { gap: 1.25rem; }
.contact-details .contact-detail,
.contact-details .contact-detail--note { background: #fff; border: 1px solid var(--hairline-light); box-shadow: 0 5px 20px rgba(16,35,55,.04); min-height: 132px; padding: 1.55rem; }
.contact-details a.contact-detail:hover { border-color: var(--ab-teal); box-shadow: 0 12px 30px rgba(16,35,55,.10); }
.contact-details .contact-detail__icon { background: rgba(76,191,169,.12); border: 1px solid rgba(76,191,169,.25); color: var(--ab-teal); height: 3.2rem; width: 3.2rem; }
.contact-details .contact-detail__icon svg { fill: none; height: 1.35rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 1.35rem; }
.contact-details .contact-detail small { margin-bottom: .35rem; }

/* ---------------------------------------------------------------------------
 * Pillar cards (template-parts/sections/pillars.php)
 * A .subcard that carries a bullet list: used on the growth-consulting pages
 * where each pillar is a claim plus the concrete work behind it.
 * ------------------------------------------------------------------------ */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: start; }
.pillar { display: flex; flex-direction: column; height: 100%; }
.pillar > p { color: var(--text-muted-light); line-height: 1.65; }
.pillar__list { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.pillar__list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .7rem;
  color: var(--text-muted-light);
  font-size: .95rem;
  line-height: 1.6;
}
.pillar__list li:last-child { margin-bottom: 0; }
.pillar__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 1px;
  background: var(--ab-teal);
}
.pillar__list li strong { color: var(--text-on-light); font-weight: 700; }
.pillar > a { margin-top: auto; padding-top: 1.1rem; }
.pillars__footnote {
  color: var(--text-muted-light);
  font-size: .95rem;
  line-height: 1.7;
  margin-top: 1.8rem;
  max-width: 80ch;
}
.section--grey .pillar { background: var(--ab-white); }
.pillars--pair { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1080px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .pillars, .pillars--pair { grid-template-columns: 1fr; } }

/* Mega menu with a third link column: widen the grid to four tracks so the
   feature panel keeps its place on the right rather than wrapping below.
   The responsive overrides are repeated here because brand.css loads first,
   and these class rules carry the same specificity as its .mega__inner rules. */
/* Near-equal link columns so the tiles line up; the feature panel takes the rest. */
.mega__inner--cols-3 { grid-template-columns: 1.06fr 1fr 1fr 1.02fr; gap: 1.6rem; }
@media (max-width: 1080px) {
  .mega__inner--cols-3 { grid-template-columns: 1fr 1fr; gap: 2.4rem; }
}
@media (max-width: 860px) {
  .mega__inner--cols-3 { grid-template-columns: 1fr; gap: 1rem; }
}

/* ==========================================================================
   Content highlighting
   Block/card copy is authored with <mark> around the phrases that should
   carry the eye. Rendered as a tinted accent, never the browser's yellow.
   ========================================================================== */
mark, .rich mark, .subcard mark, .process__step mark {
  background: rgba(76, 191, 169, .16);
  color: inherit;
  padding: 0.06em 0.26em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* On dark sections the same tint needs more light behind it to stay legible. */
.section--dark mark, .section--deep mark, .footer mark {
  background: rgba(124, 246, 223, .18);
  color: var(--ab-white);
}
/* A second emphasis level: bold inside body copy picks up the brand ink. */
.subcard p strong, .process__step p strong, .rich p strong { color: var(--ab-ink); font-weight: 700; }
.section--dark .subcard p strong, .section--dark .process__step p strong,
.section--deep .rich p strong, .footer .rich p strong { color: var(--ab-white); }

/* ==========================================================================
   Team member — dark intro refinements
   ========================================================================== */
.bio-role {
  font-family: var(--font-alt); text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 0.86rem; font-weight: 600; color: var(--accent-bright);
  margin: 0.5rem 0 1.2rem;
}
/* Credentials read as chips above the bio, matching the approved mockups. */
.bio-chips { list-style: none; padding: 0; margin: 0 0 1.6rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bio-chips li {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.34rem 0.75rem;
  border: 1px solid var(--hairline-dark); border-radius: 999px;
  background: rgba(124, 246, 223, .05);
  font-family: var(--font-alt); letter-spacing: 0.04em;
  font-size: 0.82rem; color: var(--text-on-dark);
}
.bio-chips svg { flex: none; color: var(--accent-bright); }

/* ==========================================================================
   Team member — Profile section (light)
   ========================================================================== */
.bio-profile__grid {
  display: grid; grid-template-columns: 320px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.bio-profile__head { margin: 0.3rem 0 1.4rem; }
.bio-profile__body .rich { color: var(--text-muted-light); }
.bio-profile__body .rich p:last-child { margin-bottom: 0; }

/* Fast-facts card */
.bio-facts {
  background: var(--ab-grey-100);
  border: 1px solid var(--hairline-light);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem;
  position: sticky; top: 96px;
}
.bio-facts__head { margin-bottom: 1.2rem; }
.bio-facts__list { margin: 0; display: grid; gap: 1.15rem; }
.bio-fact { display: flex; gap: 0.75rem; align-items: flex-start; }
.bio-fact__icon { flex: none; margin-top: 1px; color: var(--ab-teal-dark); display: grid; place-items: center; }
.bio-fact dt {
  font-family: var(--font-alt); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.78rem; font-weight: 700; color: var(--ab-ink); margin-bottom: 0.15rem;
}
.bio-fact dd { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--text-muted-light); }
.bio-facts__cta { width: 100%; margin-top: 1.6rem; font-size: 0.8rem; padding: 0.9em 1.2em; }

/* Pull quote — teal rules above and below, no quote marks in the field */
.bio-quote {
  margin: 1.8rem 0; padding: 1.4rem 0;
  border-top: 1px solid var(--ab-teal); border-bottom: 1px solid var(--ab-teal);
}
.bio-quote p {
  margin: 0; font-family: var(--font-alt); font-style: italic;
  font-size: clamp(1.02rem, 1.7vw, 1.22rem); line-height: 1.55;
  letter-spacing: 0.01em; color: var(--ab-teal-deep);
}
.bio-quote p::before { content: "\201C"; }
.bio-quote p::after  { content: "\201D"; }

/* Career timeline */
.bio-timeline {
  list-style: none; margin: 2.4rem 0 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1rem;
  position: relative;
}
.bio-timeline::before {
  content: ""; position: absolute; top: 5px; left: 8%; right: 8%; height: 1px;
  background: var(--hairline-light);
}
.bio-timeline__stop { position: relative; padding-top: 1.4rem; text-align: center; }
.bio-timeline__stop::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ab-teal); box-shadow: 0 0 0 4px var(--ab-white);
}
.bio-timeline__label { display: block; font-weight: 700; font-size: 0.9rem; color: var(--ab-ink); }
.bio-timeline__sub { display: block; margin-top: 0.2rem; font-size: 0.8rem; line-height: 1.45; color: var(--text-muted-light); }

@media (max-width: 900px) {
  .bio-profile__grid { grid-template-columns: 1fr; }
  .bio-facts { position: static; }
  .bio-timeline { grid-auto-flow: row; gap: 1.4rem; }
  .bio-timeline::before { left: 5px; right: auto; top: 5px; bottom: 5px; width: 1px; height: auto; }
  .bio-timeline__stop { padding-top: 0; padding-left: 1.6rem; text-align: left; }
  .bio-timeline__stop::before { left: 0; top: 4px; transform: none; }
}


/* ==========================================================================
   Inset dark panel — a navy card dropped into a light/grey section.
   Three treatments share it on the sectioned service pages:
     intro        → big outlined numerals in a bordered, column-divided box
     pillars      → numbered ladder, each rung its own inner card
     valuedrivers → grid of icon cards
   ========================================================================== */
.panel-dark {
  background: var(--ab-charcoal);
  border-radius: 14px;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  margin-top: 2.4rem;
  box-shadow: var(--shadow-2);
}
/* Shared look for the cards that sit ON the panel. */
.panel-dark .subcard {
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  box-shadow: none;
}
.panel-dark .subcard:hover {
  transform: translateY(-3px);
  border-color: rgba(124,246,223,.34);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}
.panel-dark .subcard h3 { color: var(--ab-white); }
.panel-dark .subcard p  { color: var(--text-muted-dark); }
.panel-dark .subcard a  { color: var(--accent-bright); }

/* ---------- intro: outlined numerals, divided columns ---------- */
.panel-dark .process {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  gap: 0;
}
.panel-dark .process__step { padding: 0 clamp(1rem, 2.2vw, 2rem); }
.panel-dark .process__step + .process__step { border-left: 1px solid rgba(255,255,255,.09); }
/* Hollow teal numeral replaces the small solid one. */
.panel-dark .process__step::before {
  position: static; display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.4rem, 4vw, 3.1rem); line-height: 1;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ab-teal-light);
  margin-bottom: 1.1rem;
}
.panel-dark .process__step::after { display: none; }
.panel-dark .process__step h3 {
  font-family: var(--font-display); font-weight: 500; text-transform: none;
  letter-spacing: 0; font-size: 1.32rem; color: var(--ab-white); margin-bottom: 0.55rem;
}
.panel-dark .process__step p { color: var(--text-muted-dark); font-size: 0.93rem; line-height: 1.65; }

/* ---------- pillars: numbered ladder ---------- */
.panel-dark:has(.pillars--ladder) { max-width: 1040px; }
.pillars--ladder { display: block; counter-reset: rung; position: relative; }
/* Teal spine threading the badges. */
.pillars--ladder::before {
  content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 1px;
  background: var(--ab-teal);
}
.pillars--ladder .pillar {
  position: relative; background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 0 0 1rem 3.6rem; transform: none;
}
.pillars--ladder .pillar:last-child { padding-bottom: 0; }
.pillars--ladder .pillar:hover { transform: none; box-shadow: none; border-color: transparent; }
.pillars--ladder .pillar::before {
  counter-increment: rung; content: counter(rung, decimal-leading-zero);
  position: absolute; left: 0; top: 18px; z-index: 1;
  width: 35px; height: 35px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--ab-teal); background: var(--ab-charcoal);
  font-family: var(--font-num); font-weight: 700; font-size: 0.78rem; color: var(--accent-bright);
}
/* The rung's own card. */
.pillars--ladder .pillar__body {
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  padding: 1.15rem 1.4rem;
}
.pillars--ladder .pillar h3 {
  font-family: var(--font-display); font-weight: 500; text-transform: none; letter-spacing: 0;
  font-size: 1.16rem; color: var(--ab-white); margin: 0 0 0.28rem;
}
.pillars--ladder .pillar p { color: var(--text-muted-dark); font-size: 0.92rem; line-height: 1.55; margin: 0; }
.pillars--ladder .pillar__list li { color: var(--text-muted-dark); }
/* Outside ladder mode the wrapper must not affect layout at all. */
.pillars:not(.pillars--ladder) .pillar__body { display: contents; }

/* ---------- valuedrivers: icon cards on the panel ---------- */
.subtopics--onpanel { gap: 1.1rem; }
.subcard__icon {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 1.1rem;
  border: 1px solid var(--ab-teal); color: var(--accent-bright);
}
.subcard__icon svg { width: 19px; height: 19px; }
.vd__footnote { color: var(--ab-slate); font-size: 0.82rem; margin-top: 1.6rem; max-width: 80ch; }

@media (max-width: 900px) {
  .panel-dark .process { grid-template-columns: 1fr !important; gap: 1.8rem; }
  .panel-dark .process__step { padding: 0; }
  .panel-dark .process__step + .process__step {
    border-left: 0; border-top: 1px solid rgba(255,255,255,.09); padding-top: 1.8rem;
  }
}