/* ============================================================
   Enterprise Advisory detail pages — shared "Advisory Detail Page"
   template CSS (Section 5/6 of the Enterprise Advisory pages spec).

   Used by all 11 new service pages (Business Restructuring through
   Executive Advisory). Reuses the site's shared design system
   (ec-styles.css: --green/--white/--black/--gray/--serif/--sans/--mono,
   .wrap, .eyebrow, .btn/.btn.ghost, .reveal/.reveal-stagger,
   .contact-line/.contact-lbl/.contact-val/.contact-arrow) the same way
   buyer-seller-advisory.css does. This file only adds the layout not
   already covered by ec-styles.css: the service hero, the explanatory
   section, the two-column "what we examine" list, the "what the
   engagement may produce" deliverables grid, the business-value / who-
   this-is-for lists, free-form sections (Early value / Scope
   clarification / Executive Advisory's extra sections), the closing
   inquiry, and the Related Advisory Capabilities block.
   ============================================================ */

.adv-app { padding-top: 0; }

/* ---- Ambient page texture (layout/dynamism pass, 2026-08-08) ----
   A very subtle fixed noise/grain layer over the whole page so the black
   background never reads as a completely flat, dead surface even before
   any section-level glow or animation kicks in. Extremely low opacity,
   pointer-events:none, purely decorative. */
.adv-app::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Service hero ----
   Deliberately modest height (not viewport-scaled like the homepage's
   sticky-canvas hero, and no scroll-scrubbing visual per spec Section 6B)
   so the full hero comfortably fits without forcing a scroll on load. */
.adv-hero {
  padding: clamp(96px, 9vw, 128px) 0 clamp(40px, 5vw, 64px);
  background: linear-gradient(180deg, #050505 0%, #000 100%);
  position: relative;
  overflow: hidden;
}
.adv-hero-inner { max-width: 780px; position: relative; z-index: 2; }

/* Homepage's universal one-word/phrase emphasis convention (green italic
   <em>), applied here to the hero headline so each advisory page carries
   the same signature accent as the homepage's hero, .problem, .tl-quote,
   etc. See ec-styles.css for the many equivalent `SELECTOR em { ... }`
   rules this mirrors. */
.adv-hero h1 em { font-style: italic; color: var(--green); }

/* ---- Hero with photo (visual layout refresh 2026-08-08; enlarged +
   glow + parallax in the layout/dynamism pass, 2026-08-08) ----
   Two-column hero used on pages that supply a heroImage: copy on the
   left, a soft-edge-faded photograph on the right -- now given noticeably
   more room and its own ambient glow so the photo feels like an
   integrated part of the page rather than a small inset thumbnail.
   Falls back to the original single-column .adv-hero-inner on pages
   without an image. */
.adv-hero-has-media { padding-bottom: clamp(56px, 6vw, 84px); }
.adv-hero-inner-split {
  max-width: 1320px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  position: relative;
  z-index: 2;
}
.adv-hero-copy-col { max-width: 600px; }
.adv-hero-media {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 480px;
}
.adv-hero-media-glow {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, var(--green-glow) 0%, transparent 62%);
  filter: blur(70px);
  animation: pulse 9s ease-in-out infinite;
}
.adv-hero-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55));
  will-change: transform;
  /* The source image already carries a baked-in alpha fade on all four
     edges, premultiplied toward black, so plain alpha compositing over
     this section's near-black gradient background dissolves the photo
     seamlessly with no visible rectangular frame. */
}
@media (max-width: 900px) {
  .adv-hero-inner-split {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .adv-hero-media { order: -1; margin-bottom: -8px; min-height: 0; }
  .adv-hero-media img { max-width: 420px; }
  .adv-hero-copy-col { max-width: none; }
}
.adv-hero-num {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--green);
  margin-bottom: 18px;
}
.adv-hero h1 {
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.12;
  margin: 16px 0 22px;
  letter-spacing: -0.015em;
  max-width: 34ch;
}
.adv-hero-copy p {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.6;
  color: #c0c0c0;
  margin: 0 0 14px;
  max-width: 62ch;
}
.adv-hero-copy p:last-child { margin-bottom: 0; }
.adv-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}
@media (max-width: 560px) {
  .adv-hero-actions { flex-direction: column; align-items: stretch; }
}

/* ---- White body zone (visual color-system pass, 2026-08-08) ----
   Per direction: the hero stays black; everything between the hero and
   the closing CTA switches to a white page background with black
   cards/icons/accents, matching the homepage's own alternating light
   sections (.assessments/.coaching -> .report-mock/.folder-card: a dark
   card floating on a white page). The closing CTA, related-capabilities
   block, and footer are deliberately left untouched below -- they were
   already relying on the page's black default, so simply not including
   them here gives the page its "back to black toward the bottom" beat
   for free. */
.adv-explain,
.adv-examines,
.adv-produces,
.adv-value,
.adv-who,
.adv-free {
  background: var(--white);
  color: var(--black);
}

/* ---- Explanatory section (C) — corrected to match the homepage's
   actual .tl-insight pattern (correction pass, 2026-08-08) ----
   Replaces the earlier ghost-number marker + scroll-fill dot rail
   (rejected: "gone, it's useless and looks random" / "still in
   paragraph form, it just has a line and some dots next to it") with a
   direct port of public/index.html's .tl-insight list (ec-styles.css
   lines ~6329-6361): each paragraph/item is its own row with a round
   icon badge, a short connector line, then the sentence -- restructured
   content, not decoration bolted onto unchanged paragraphs. Colors
   flipped for this section's white background (icon badge/connector
   stay green either way; body text goes dark-on-white instead of
   light-on-black). */
.adv-explain {
  padding: clamp(56px, 7vw, 90px) 0;
  border-top: 1px solid rgba(0,0,0,0.08);
}
/* Two-column split (correction pass #2, 2026-08-08) — the single
   narrow 800px column read as "empty space with words in the middle"
   because it left huge unused margins on either side instead of
   presenting as a designed layout. Splits the section like the
   homepage's .problem-head (ec-styles.css ~1069): heading pinned to a
   left rail, the insight rows filling the wider right column, so the
   section actually uses the page's width. */
.adv-explain-head {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) {
  .adv-explain-head { grid-template-columns: 1fr; gap: 32px; }
}
.adv-explain-head-copy { position: sticky; top: 110px; }
@media (max-width: 900px) { .adv-explain-head-copy { position: static; } }
.adv-explain h2 { font-size: clamp(28px, 3vw, 40px); margin: 14px 0 0; letter-spacing: -0.01em; max-width: 20ch; }

.adv-insights { list-style: none; margin: 0; padding: 0; }
.adv-insight {
  display: grid;
  grid-template-columns: 44px auto 1fr;
  align-items: center;
  column-gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.adv-insight:first-child { padding-top: 0; }
.adv-insight:last-child { border-bottom: none; padding-bottom: 0; }
.adv-insight-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(90,185,54,0.45);
  display: flex; align-items: center; justify-content: center;
  color: var(--green);
  flex-shrink: 0;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.adv-insight-icon svg { width: 22px; height: 22px; }
.adv-insight:hover .adv-insight-icon {
  transform: scale(1.1);
  box-shadow: 0 0 16px var(--green-glow);
}
.adv-insight-line {
  width: 28px; height: 1px;
  background: rgba(90,185,54,0.55);
  flex-shrink: 0;
}
@media (max-width: 560px) { .adv-insight-line { width: 16px; } }
.adv-insight p {
  font-family: var(--sans);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: #3a3a3a;
  margin: 0;
  max-width: none;
}
.adv-explain-closing {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 21px);
  color: var(--black);
  margin-top: 30px;
}

/* ---- D. What EnterCannected examines ----
   Vertical connected timeline (layout/dynamism pass, 2026-08-08),
   replacing the flat two-column text list: a running green line travels
   down the left edge of the list, threading through each numbered node,
   so the items read as a path/sequence rather than a static grid of
   rows. A soft ambient glow sits behind the section heading to break the
   flat background. */
.adv-examines {
  padding: clamp(56px, 7vw, 90px) 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  background: linear-gradient(180deg, var(--white) 0%, var(--white) 100%), radial-gradient(ellipse 900px 500px at 15% 0%, rgba(90,185,54,0.07) 0%, transparent 60%);
  position: relative;
}
.adv-examines h2 { font-size: clamp(28px, 3.4vw, 42px); margin: 16px 0 40px; letter-spacing: -0.01em; max-width: 62ch; }

/* ---- D2. Interactive grouped "What EnterCannected examines"
   (visual dynamism pass, 2026-08-08) ----
   Real interaction (see advisory-examines.js), not a static picture of
   one: a left column of selectable category tabs, a right-hand "stage"
   card that crossfades/expands its content to match whichever tab is
   active. The active tab and the stage card both get actual depth —
   layered shadow + green glow + gradient, matching the .report-mock /
   .diag-lens treatment elsewhere on the site — instead of a flat
   colored box. */
.adv-exg-shell {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
@media (max-width: 860px) {
  .adv-exg-shell { grid-template-columns: 1fr; }
}
.adv-exg-tabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.adv-exg-tab {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.adv-exg-tab:hover { border-color: rgba(90,185,54,0.35); }
.adv-exg-tab-num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--gray);
  letter-spacing: 0.06em;
  transition: color .35s ease;
}
.adv-exg-tab-label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  color: #1a1a1a;
  letter-spacing: -0.005em;
  transition: color .35s ease;
}
.adv-exg-tab-count {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
  transition: color .35s ease, opacity .35s ease;
}
/* Active tab: raised card, real green glow (same shadow language as
   .report-mock's card-level box-shadow), gradient surface instead of a
   flat fill. */
.adv-exg-tab-active {
  background: linear-gradient(135deg, #101410 0%, #0a0a0a 100%);
  border-color: rgba(90,185,54,0.55);
  box-shadow: 0 20px 46px -18px rgba(90,185,54,0.35), 0 0 0 1px rgba(90,185,54,0.12);
  transform: translateX(4px);
}
.adv-exg-tab-active .adv-exg-tab-num,
.adv-exg-tab-active .adv-exg-tab-count { color: var(--green); }
.adv-exg-tab-active .adv-exg-tab-label { color: var(--white); }

.adv-exg-stage {
  position: relative;
  background: linear-gradient(160deg, #0d0f0d 0%, #060706 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  padding: clamp(28px, 3.6vw, 44px);
  min-height: 260px;
  box-shadow: 0 40px 90px -32px rgba(90,185,54,0.16), 0 0 0 1px rgba(90,185,54,0.05), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
}
/* Faint ambient glow anchored to a top corner of the stage, echoing the
   hero's own radial glow so this feels like the same visual family
   rather than an unrelated black box. */
.adv-exg-stage::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, var(--green-glow) 0%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}
.adv-exg-panel {
  position: relative;
  z-index: 1;
  display: none;
  opacity: 0;
  animation: advExgFadeIn .45s ease forwards;
}
.adv-exg-panel-active { display: block; }
@keyframes advExgFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.adv-exg-panel-desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 23px);
  color: var(--white);
  line-height: 1.4;
  margin: 0 0 26px;
  max-width: 46ch;
}
.adv-exg-panel-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 22px;
}
@media (max-width: 620px) {
  .adv-exg-panel-items { grid-template-columns: 1fr; }
}
.adv-exg-panel-items li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: #d0d0d0;
}
.adv-exg-check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(90,185,54,0.14);
  color: var(--green);
  font-size: 11px;
  margin-top: 1px;
}
@media (prefers-reduced-motion: reduce) {
  .adv-exg-panel { animation: none; opacity: 1; }
  .adv-exg-tab, .adv-exg-tab-num, .adv-exg-tab-label, .adv-exg-tab-count { transition: none; }
}

.adv-examine-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  max-width: 800px;
}
.adv-examine-list::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 20px;
  bottom: 20px;
  width: 1px;
  background: linear-gradient(180deg, rgba(90,185,54,0.5) 0%, rgba(90,185,54,0.12) 100%);
}
.adv-examine-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 16px 12px;
  border-radius: 12px;
  transition: background .3s, transform .3s;
  position: relative;
}
.adv-examine-row:hover { background: rgba(90,185,54,0.08); transform: translateX(6px); }
.adv-examine-node {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0a0a0a;
  border: 1px solid rgba(90,185,54,0.35);
  position: relative;
  z-index: 2;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.adv-examine-row:hover .adv-examine-node {
  border-color: var(--green);
  box-shadow: 0 0 18px -2px var(--green-glow);
  transform: scale(1.08);
}
.adv-examine-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--green);
  letter-spacing: 0.05em;
}
.adv-examine-text {
  font-size: 15px;
  line-height: 1.5;
  color: #2a2a2a;
  padding-top: 9px;
}

/* ---- E. What the engagement may produce ----
   Bento-style grid (layout/dynamism pass, 2026-08-08): the first
   (lead/foundational) deliverable spans two columns and gets a slightly
   brighter surface + its own accent corner glow, so the grid has a
   focal point instead of being a uniform checkerboard of identical
   boxes. Hover on every cell now lifts + scales + glows instead of only
   nudging border-color/background. */
.adv-produces {
  padding: clamp(56px, 7vw, 90px) 0;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.adv-produces h2 { font-size: clamp(28px, 3.4vw, 42px); margin: 0; letter-spacing: -0.01em; max-width: 62ch; }
/* Optional header icon badge next to the heading (icon/layout richness
   pass, 2026-08-08) — reuses .adv-card-icon's circular badge style but
   laid out inline with the heading rather than stacked above it, since
   this section has no card container of its own. */
.adv-produces-heading-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 16px 0 32px;
}
.adv-produces-heading-row .adv-card-icon { margin-bottom: 0; flex-shrink: 0; }
.adv-produce-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 640px) {
  .adv-produce-grid { grid-template-columns: 1fr; }
}
.adv-produce-item {
  background: #0d0d0d;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 24px 22px;
  transition: border-color .35s, background .35s, transform .35s, box-shadow .35s;
  position: relative;
  overflow: hidden;
}
.adv-produce-item:hover {
  border-color: rgba(90,185,54,0.4);
  background: #101410;
  transform: translateY(-5px) scale(1.015);
  box-shadow: 0 18px 40px -14px rgba(0,0,0,0.6), 0 0 30px -8px var(--green-glow);
}
.adv-produce-item:hover .adv-produce-num { color: var(--white); }
.adv-produce-featured {
  grid-column: span 2;
  background: linear-gradient(135deg, #0f130e 0%, #0a0a0a 60%);
  border-color: rgba(90,185,54,0.18);
  padding: 30px 28px;
}
.adv-produce-featured::before {
  content: '';
  position: absolute;
  top: -30%; right: -20%;
  width: 220px; height: 220px;
  background: radial-gradient(circle, var(--green-glow) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.adv-produce-featured p { font-size: clamp(16px, 1.3vw, 19px); max-width: 46ch; }
@media (max-width: 640px) {
  .adv-produce-featured { grid-column: span 1; }
}
.adv-produce-num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--green);
  letter-spacing: 0.15em;
  margin-bottom: 12px;
  display: block;
  transition: color .3s;
}
.adv-produce-item p {
  font-size: 15px;
  line-height: 1.55;
  color: #c0c0c0;
  margin: 0;
  max-width: none;
  position: relative;
  z-index: 1;
}

/* ---- F. What this may help the business do / G. Who this is for ----
   Rendered as a single bordered "summary card" (visual layout refresh,
   2026-08-08) so the heading + intro + checklist reads as one compact,
   self-contained unit rather than open text running down the page —
   matching the same card treatment used elsewhere on the site. Copy is
   unchanged; only the container/spacing changed. */
.adv-value, .adv-who {
  padding: clamp(48px, 6vw, 76px) 0;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.adv-value-card, .adv-who-card {
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 40px);
  transition: border-color .35s, box-shadow .35s;
  position: relative;
  overflow: hidden;
}
.adv-value-card:hover, .adv-who-card:hover {
  border-color: rgba(90,185,54,0.3);
  box-shadow: 0 0 50px -14px var(--green-glow);
}
/* Topic-relevant icon badge (icon refresh, 2026-08-08) — same visual
   language as the homepage's .exo-icon badge (circular green-bordered
   frame + thin-line SVG) so this card's icon reads as part of the same
   design system rather than a new style introduced on advisory pages. */
.adv-card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(90,185,54,0.4);
  color: var(--green);
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
}
.adv-card-icon svg { width: 21px; height: 21px; }

/* Oversized watermark icon behind the "What this can help the business
   do" card (layout/dynamism pass, 2026-08-08, structural idea #7): a
   second graphic anchor mid-page, purely decorative line-art so it never
   competes with the copy. .adv-value-card needs position:relative +
   overflow:hidden for this to clip correctly (added below). */
.adv-value-card-bg-icon {
  position: absolute;
  top: -10%;
  right: -4%;
  width: clamp(180px, 26vw, 320px);
  height: clamp(180px, 26vw, 320px);
  color: rgba(90,185,54,0.07);
  pointer-events: none;
  z-index: 1;
}
.adv-value-card-bg-icon svg { width: 100%; height: 100%; }
.adv-value-card-content { position: relative; z-index: 2; }
.adv-value-card h2, .adv-who-card h2 {
  font-size: clamp(24px, 2.8vw, 34px);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  max-width: 62ch;
}
.adv-value-intro {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--gray);
  margin: 0 0 22px;
  max-width: 58ch;
}
/* .adv-who-intro sits directly on the white page background (outside
   the dark card), so it needs the dark-on-white text color, unlike
   .adv-value-intro which stays inside the dark .adv-value-card. */
.adv-who-intro {
  font-size: clamp(15px, 1.1vw, 17px);
  color: #4a4a4a;
  margin: 0 0 22px;
  max-width: 58ch;
}
.adv-value-list, .adv-who-list, .adv-free-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
}
@media (max-width: 760px) {
  .adv-value-list, .adv-who-list, .adv-free-list { grid-template-columns: 1fr; }
}
.adv-value-list li, .adv-who-list li {
  font-size: 15px;
  line-height: 1.5;
  color: #d0d0d0;
  padding-left: 24px;
  position: relative;
}
/* .adv-free-list sits directly on the white page background (no dark
   card wrapper, unlike .adv-value-list/.adv-who-list above), so it
   needs the dark-on-white text color. */
.adv-free-list li {
  font-size: 15px;
  line-height: 1.5;
  color: #2a2a2a;
  padding-left: 24px;
  position: relative;
}
.adv-value-list li::before, .adv-who-list li::before, .adv-free-list li::before {
  content: '\2713';
  position: absolute;
  left: 0; top: 1px;
  color: var(--green);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
}

/* ---- "Who this is for" per-item icon tiles (icon/layout richness pass,
   2026-08-08) — replaces the single-card checklist with a grid of
   individually-bordered tiles, each carrying its own topic-relevant icon,
   matching the reference design's "Who this is for" treatment. The
   section heading/intro sit directly on the page background (no
   surrounding card) since the tiles themselves now carry the bordered
   surface. */
.adv-who .adv-who-intro { max-width: 62ch; }
/* The fullbleed "Who this is for" variant deliberately stays on its own
   dark gradient (see .adv-fullbleed below, an intentional "back to
   black" beat near the end of the page) rather than the new white body
   background, so its intro text needs the light-on-dark color back. */
.adv-fullbleed .adv-who-intro { color: var(--gray); }
.adv-fullbleed h2 { color: var(--white); }
.adv-fullbleed .eyebrow { color: var(--green); }

/* ---- Full-bleed contrast panel (layout/dynamism pass, 2026-08-08) ----
   "Who this is for" breaks out of the contained-width rhythm every other
   section shares: edge-to-edge tinted background with a faint top/bottom
   seam and an ambient corner glow, so the scroll gets a visible "stop"
   here instead of one continuous tunnel of identically-framed sections. */
.adv-fullbleed {
  background: linear-gradient(180deg, #07090a 0%, #030402 55%, #050505 100%);
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(90,185,54,0.14);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.adv-fullbleed::before {
  content: '';
  position: absolute;
  top: -15%; left: -8%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, var(--green-glow) 0%, transparent 65%);
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.7;
}
.adv-fullbleed::after {
  content: '';
  position: absolute;
  bottom: -20%; right: -6%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, var(--green-glow) 0%, transparent 65%);
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.5;
}
.adv-fullbleed .wrap { position: relative; z-index: 2; }
.adv-who-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 760px) {
  .adv-who-grid { grid-template-columns: 1fr; }
}
.adv-who-tile {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 18px 20px;
  transition: border-color .3s, background .3s, transform .3s, box-shadow .3s;
}
.adv-who-tile:hover {
  border-color: rgba(90,185,54,0.4);
  background: #0d100b;
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 32px -12px rgba(0,0,0,0.6), 0 0 24px -6px var(--green-glow);
}
.adv-who-tile-icon {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(90,185,54,0.4);
  color: var(--green);
  transition: transform .3s, background .3s, color .3s;
}
.adv-who-tile:hover .adv-who-tile-icon {
  transform: scale(1.12) rotate(-4deg);
  background: rgba(90,185,54,0.15);
  color: var(--white);
}
.adv-who-tile-icon svg { width: 18px; height: 18px; }
.adv-who-tile p {
  font-size: 15px;
  line-height: 1.4;
  color: #d0d0d0;
  margin: 0;
  max-width: none;
}

/* ---- E2/F2/G2. Dense side-by-side "produce + value" pair and "who this
   is for" grid card (visual density pass, 2026-08-08) ----
   Replaces an earlier click-to-reveal roadmap/toggle treatment that hid
   content behind interaction and left too much empty space. This variant
   is deliberately information-forward: everything visible at once inside
   tight, green-bordered dark cards, matching the density of the approved
   reference layout (uppercase green header, inline icon badge, two-column
   checklist, compact icon-tile grid for "who"). No hidden state, no
   clicks required to read every item. */
.adv-dc-pair {
  padding: clamp(40px, 5.5vw, 64px) 0 clamp(24px, 3vw, 36px);
}
.adv-dc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 820px) {
  .adv-dc-row { grid-template-columns: 1fr; }
}
.adv-dc-card {
  background: #0a0d0a;
  border: 1px solid rgba(90,185,54,0.28);
  border-radius: 16px;
  padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.6vw, 28px);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.adv-dc-card:hover {
  border-color: rgba(90,185,54,0.5);
  box-shadow: 0 0 40px -16px var(--green-glow);
  transform: translateY(-3px);
}
.adv-dc-card .adv-card-icon {
  width: 40px; height: 40px;
  margin-bottom: 14px;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.adv-dc-card:hover .adv-card-icon { transform: scale(1.1) rotate(-4deg); }
.adv-dc-card .adv-card-icon svg { width: 19px; height: 19px; }
.adv-dc-card h2 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 6px;
  max-width: none;
}
.adv-dc-intro {
  font-size: 14px;
  color: var(--gray);
  margin: 0 0 16px;
  max-width: none;
}
.adv-dc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 22px;
}
@media (max-width: 560px) {
  .adv-dc-list { grid-template-columns: 1fr; }
}
.adv-dc-list li {
  font-size: 14px;
  line-height: 1.45;
  color: #c9c9c9;
  padding-left: 22px;
  position: relative;
  transition: color .25s;
}
.adv-dc-list li:hover { color: var(--white); }
.adv-dc-check {
  position: absolute;
  left: 0; top: 2px;
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  display: inline-block;
}
.adv-dc-list li:hover .adv-dc-check { transform: scale(1.35); }
/* "Who this is for" — one wide card, compact icon-tile grid inside it. */
.adv-wg { padding-top: 0; }
.adv-wg-card {
  background: #0a0d0a;
  border: 1px solid rgba(90,185,54,0.28);
  border-radius: 16px;
  padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.6vw, 28px);
}
.adv-wg-card .adv-card-icon { width: 40px; height: 40px; margin-bottom: 14px; }
.adv-wg-card .adv-card-icon svg { width: 19px; height: 19px; }
.adv-wg-card h2 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 6px;
  max-width: none;
}
.adv-wg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 18px;
}
@media (max-width: 900px) {
  .adv-wg-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .adv-wg-grid { grid-template-columns: 1fr; }
}
.adv-wg-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 13px 14px;
  transition: border-color .3s, background .3s, transform .3s;
}
.adv-wg-cell:hover {
  border-color: rgba(90,185,54,0.4);
  background: rgba(90,185,54,0.04);
  transform: translateY(-2px);
}
.adv-wg-icon {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(90,185,54,0.4);
  color: var(--green);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.adv-wg-cell:hover .adv-wg-icon {
  transform: scale(1.15);
  box-shadow: 0 0 14px var(--green-glow);
}
.adv-wg-icon svg { width: 15px; height: 15px; }
.adv-wg-cell p {
  font-size: 13.5px;
  line-height: 1.35;
  color: #c9c9c9;
  margin: 0;
}

/* ---- Mid-page pull-quote rest stop — corrected to match the homepage's
   actual .tl-quote / .program-quote pattern (correction pass, 2026-08-08)
   ----
   The earlier bordered/glowing card treatment was rejected as "doesn't
   look good or on brand." public/index.html never puts a pull-quote in
   a card: .tl-quote (ec-styles.css ~6363-6398) sits directly on the
   section's black background -- a large colored quote-mark GLYPH (the
   literal " character, not an icon), a thin 1px vertical accent rule,
   and serif text with a green italic <em> accent. This block reproduces
   that exact pattern at .tl-quote's own scale, on the same black
   background the homepage uses for its pull-quotes (a deliberate return
   to black between this page's white sections, matching the homepage's
   own light/dark alternation). */
.adv-pullquote {
  padding: clamp(70px, 9vw, 110px) 0;
  background: linear-gradient(180deg, #000 0%, #0a0a0a 100%);
}
.adv-pullquote .wrap { max-width: 900px; }
.adv-pullquote-inner {
  position: relative;
  margin: 0;
  padding: clamp(72px, 9vw, 104px) 0 4px 76px;
}
.adv-pq-mark {
  position: absolute;
  top: 12px;
  left: 76px;
  font-family: 'Fredoka', var(--sans);
  font-weight: 400;
  font-style: normal;
  color: var(--green);
  font-size: clamp(90px, 11vw, 130px);
  line-height: 1;
}
.adv-pq-rule {
  position: absolute;
  top: 6px;
  bottom: -8px;
  left: 0;
  width: 1px;
  background: rgba(90,185,54,0.45);
}
.adv-pullquote-inner p {
  font-family: var(--serif);
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.32;
  color: var(--white);
  font-weight: 400;
  margin: 0;
}
.adv-pullquote-inner p em { font-style: italic; color: var(--green); }
@media (max-width: 700px) {
  .adv-pullquote-inner { padding-left: 44px; padding-top: 64px; }
  .adv-pq-mark { left: 44px; font-size: 76px; top: 4px; }
}

/* ---- Free-form sections (Early value / Scope clarification /
        Executive Advisory's extra sections) ----
   Same asymmetric marker layout as .adv-explain (layout/dynamism pass,
   2026-08-08), so Executive Advisory's four consecutive "free" sections
   (which previously all rendered as identical centered blocks in a row)
   get the same numbered/alternating rhythm as everything else. */
.adv-free {
  padding: clamp(50px, 6.5vw, 80px) 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
}
.adv-free-inner {
  max-width: 900px;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  position: relative;
  z-index: 2;
}
.adv-free-inner[data-alt="1"] { grid-template-columns: minmax(0, 1fr) 84px; }
.adv-free-inner[data-alt="1"] .adv-section-marker { order: 2; }
.adv-free-inner[data-alt="1"] .adv-free-main { order: 1; }
@media (max-width: 700px) {
  .adv-free-inner, .adv-free-inner[data-alt="1"] { grid-template-columns: 1fr; }
  .adv-free-inner[data-alt="1"] .adv-section-marker,
  .adv-free-inner[data-alt="1"] .adv-free-main { order: initial; }
}
.adv-free-main { min-width: 0; }
.adv-free-inner h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 18px; letter-spacing: -0.01em; max-width: 32ch; }
.adv-free p {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.65;
  color: #3a3a3a;
  margin: 0 0 16px;
  max-width: none;
}
.adv-free p:last-of-type { margin-bottom: 0; }
.adv-free-list { margin-top: 18px; }

/* ---- Closing inquiry ----
   Ambient corner glow added (layout/dynamism pass, 2026-08-08) so the
   final CTA doesn't sit on the same flat black as every prior section --
   gives the page's last "stop" a bit of lift before the footer. */
.adv-inquiry {
  padding: clamp(70px, 9vw, 120px) 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 700px 500px at 85% 20%, rgba(90,185,54,0.06) 0%, transparent 65%);
}
.adv-inquiry-inner { max-width: 780px; position: relative; z-index: 2; }
.adv-inquiry-inner h2 { font-size: clamp(28px, 3.6vw, 46px); margin: 16px 0 18px; letter-spacing: -0.01em; }
/* Phrase-emphasis pass (2026-08-09): the closing CTA heading reuses the
   same closingHeadline string as the mid-page pull-quote above (which
   already has its own `.adv-pullquote-inner p em` accent) -- this gives
   the identical <em>/`.green` markup the same green treatment here so a
   page's one highlighted phrase reads consistently in both spots. */
.adv-inquiry-inner h2 em { font-style: italic; color: var(--green); }
.adv-inquiry-inner > p {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: #c0c0c0;
  margin: 0 0 40px;
  max-width: 62ch;
}
.adv-inquiry-options {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* ---- Return-to-Advisory + Related Advisory Capabilities (Section 20) ----
   Visibility pass (2026-08-08): same content/position as before -- only
   the treatment changed, from a small mono text line + plain underlined
   text links to a real ghost-pill button + a row of icon-badge cards, so
   this closing block reads as a clear "what to do next" rather than quiet
   footer text easy to scroll past. */
.adv-related {
  padding: clamp(56px, 7vw, 96px) 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.adv-related-inner { max-width: 980px; }

/* Ghost-pill button, matching the site's existing .btn.ghost treatment
   (public/static/ec-styles.css) instead of a bare mono text line -- gives
   the return link real visual weight and a hit target, not just color. */
.adv-return-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  padding: 12px 22px;
  margin-bottom: 44px;
  transition: border-color .25s, color .25s, transform .25s, box-shadow .25s;
}
.adv-return-link .arrow { display: inline-block; transition: transform .25s; }
.adv-return-link:hover, .adv-return-link:focus-visible {
  color: var(--green);
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -14px var(--green-glow);
}
.adv-return-link:hover .arrow, .adv-return-link:focus-visible .arrow { transform: translateX(4px); }

.adv-related-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 20px;
}

.adv-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* Icon-badge card (reuses .adv-card-icon's circular badge + each
   service's own topic icon from ADVISORY_SERVICES) so every related link
   carries the same visual identity its own page uses, instead of plain
   text -- makes the block scannable as distinct destinations.

   Bright-green pass (2026-08-08): switched from a dark card with a green
   outline to a solid bright-brand-green fill (same var(--green) as the
   site's primary .btn), so these read as the loudest, most "come click
   me" elements in the block -- matching the primary button's visual
   weight instead of a muted secondary treatment. Text/icon flip to black
   for contrast on the green fill, same pairing the primary .btn already
   uses. */
.adv-related-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--green);
  border: 1px solid var(--green);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 0 0 0 var(--green-glow);
  transition: box-shadow .3s, transform .3s, filter .3s;
}
.adv-related-card:hover, .adv-related-card:focus-visible {
  box-shadow: 0 20px 50px -12px var(--green-glow);
  transform: translateY(-3px);
  filter: brightness(1.08);
}
.adv-related-card .adv-card-icon {
  width: 38px; height: 38px;
  margin-bottom: 0;
  flex-shrink: 0;
  border-color: rgba(0,0,0,0.35);
  color: var(--black);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.adv-related-card:hover .adv-card-icon { transform: scale(1.1) rotate(-4deg); }
.adv-related-card .adv-card-icon svg { width: 18px; height: 18px; }
.adv-related-card-title {
  flex: 1;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--black);
  line-height: 1.3;
}
.adv-related-card .arrow {
  display: inline-block;
  color: var(--black);
  transition: transform .25s;
  flex-shrink: 0;
}
.adv-related-card:hover .arrow, .adv-related-card:focus-visible .arrow { transform: translateX(4px); }

@media (max-width: 900px) {
  .adv-related-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .adv-related-list { grid-template-columns: 1fr; }
}

/* ============================================================
   Sticky section rail (layout/dynamism pass, 2026-08-08)
   A slim fixed left-edge dot-index of every body section + the closing
   CTA. Gives the page a sense of structure/progress while scrolling
   instead of a shapeless, endless feed -- the current section is
   highlighted by advisory-visuals.js toggling `.is-active` on the
   matching link. Deliberately a compact DOT rail (not permanent text
   labels): the site's content column runs all the way to the viewport
   edge at common laptop widths (.wrap's max-width matches typical
   viewport widths with only ~60px of edge padding), so a text-labeled
   rail would overlap body copy. Labels appear as an on-hover/on-focus
   tooltip instead, costing no permanent layout width. Desktop/large-
   tablet only; hidden below 1300px so it's never competing for the
   already-tight edge gutter on narrower viewports. */
.adv-rail {
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none;
}
@media (min-width: 1300px) {
  .adv-rail { display: block; }
}
/* The rail is fixed-position, so it sits on top of whichever section
   (now alternating white/black) happens to be scrolled into view. Its
   dots were tuned for a black backdrop only; give the whole rail its own
   permanent dark glass chip so it stays legible over both the new white
   body sections and the remaining black ones (mirrors the site's own nav
   bar, which likewise stays dark regardless of the section behind it),
   instead of chasing per-section color logic. */
.adv-rail ul {
  list-style: none;
  margin: 0;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-left: 1px solid rgba(255,255,255,0.12);
  background: rgba(8,8,8,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 0 12px 12px 0;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.35);
}
.adv-rail a {
  display: flex;
  align-items: center;
  position: relative;
  width: 10px;
  height: 10px;
}
.adv-rail a::before {
  content: '';
  position: absolute;
  left: -9px; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transform: translateY(-50%) scale(0.85);
  transition: background .3s, transform .3s, box-shadow .3s;
}
.adv-rail a:hover::before,
.adv-rail a:focus-visible::before { background: rgba(255,255,255,0.6); transform: translateY(-50%) scale(1.1); }
.adv-rail a.is-active::before {
  background: var(--green);
  box-shadow: 0 0 10px 1px var(--green-glow);
  transform: translateY(-50%) scale(1.35);
}
/* Hover/focus-only tooltip label -- reads the link's own text content,
   positioned clear of the body copy column, no permanent width cost. */
.adv-rail a span {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.85);
  background: rgba(10,10,10,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 5px 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.adv-rail a.is-active span { color: var(--green); }
.adv-rail a:hover span,
.adv-rail a:focus-visible span {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ============================================================
   Varied entrance choreography (layout/dynamism pass, 2026-08-08)
   The sitewide .reveal-stagger (ec-styles.css) only ever fades+slides
   children up uniformly. These per-section overrides give each list
   type its own distinct entrance motion so scrolling through the page
   doesn't repeat the exact same animation every single time:
   - examine timeline rows slide in from the left, following the line
   - who-tiles pop in with a slight scale (rather than just translateY)
   Both still ride the same shared IntersectionObserver / .in toggle --
   only the *resting* (pre-reveal) transform differs, so no JS changes
   are required for these overrides to work.
   ============================================================ */
.adv-examine-list.reveal-stagger > .adv-examine-row {
  transform: translateX(-28px);
}
.adv-examine-list.reveal-stagger.in > .adv-examine-row {
  transform: translateX(0);
}
.adv-who-grid.reveal-stagger > .adv-who-tile {
  transform: translateY(24px) scale(0.94);
}
.adv-who-grid.reveal-stagger.in > .adv-who-tile {
  transform: translateY(0) scale(1);
}
.adv-produce-grid.reveal-stagger > .adv-produce-item {
  transform: translateY(26px) scale(0.97);
}
.adv-produce-grid.reveal-stagger.in > .adv-produce-item {
  transform: translateY(0) scale(1);
}