/* Built Logic — Opportunity Map page, handoff v3 (11 Sep 2026).
   Page-local composition for ai-opportunity-map.html only. Palette and type are
   the locked design.md set; shared v3 tokens are read from bl-visual.css with a
   literal fallback so this sheet renders correctly on its own.

   Nothing here is required for the page to read: every diagram, preview and
   panel is complete, static HTML/SVG before any script runs. */

.om-page {
  --omv-radius-media: var(--bl-radius-media, 16px);
  --omv-radius-card: var(--bl-radius-card, 12px);
  --omv-shadow-media: var(--bl-shadow-media, 0 24px 60px rgba(35,42,49,.14), 0 2px 6px rgba(35,42,49,.08));
  --omv-line: var(--bl-line-strong, rgba(35,42,49,.18));
  --omv-ground: #FAFAF8;
  --omv-ease: cubic-bezier(.2,.6,.2,1);
}

/* ----------------------------------------------------------- media frames */
/* A complete portrait page keeps its own proportions: aspect-ratio plus
   object-fit: contain, never a fixed width/height pair that reshapes it. */

.omv-doc { margin: 0; }
/* The frame carries the border and shadow so the caption can sit inside the
   same <figure> without looking like part of the printed page. */
.omv-doc__frame {
  border: 1px solid var(--omv-line);
  border-radius: var(--omv-radius-media);
  background: var(--omv-ground);
  box-shadow: var(--omv-shadow-media);
  overflow: hidden;
}
.omv-doc img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 210 / 297;
  object-fit: contain;
  background: #FAFAF8;
}
/* Centred against the document frame, not the hero column. */
.omv-doc__cap {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: #586069;
  text-align: center;
}
.omv-hero__doc { max-width: 420px; margin-left: auto; }

/* ------------------------------------------------------ opportunity panels */

.omv-panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
  margin-top: 36px;
}
.omv-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 20px 24px;
  border: 1px solid #E5E5E2;
  border-radius: var(--omv-radius-card);
  background: #FAFAF8;
}
.omv-panel h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -.012em;
  margin: 0;
  color: #232A31;
}
.omv-panel p { margin: 0; font-size: 17px; line-height: 1.6; color: #232A31; }
/* "What the review addresses" sits below the diagram, quieter than the lead. */
.omv-panel__check {
  font-size: 15px;
  color: #586069;
  padding-top: 16px;
  border-top: 1px solid #E5E5E2;
}
.omv-panel__check strong { color: #232A31; font-weight: 600; }

.omv-panel__action {
  margin-top: auto;
  align-self: flex-start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1.5px solid #1B3A5B;
  border-radius: 2px;
  background: #FAFAF8;
  color: #1B3A5B;
  font: 600 16px "Source Sans 3", sans-serif;
  cursor: pointer;
}
.omv-panel__action:hover { background: #1B3A5B; color: #FAFAF8; }
.omv-panel__action:focus-visible { outline: 2px solid #232A31; outline-offset: 2px; }

/* The diagrams use the shared .bl-diagram panel and its [data-bl-animate]
   motion contract from assets/bl-visual.css + assets/bl-visual.js. They animate
   once on first entry and settle; there is no Replay control.

   Panel-width diagrams: trim the shared panel padding so the SVG renders close
   to 1:1 and its labels stay at reading size rather than being scaled down. */
.omv-panel .bl-diagram { padding: 18px; }
@media (max-width: 760px) { .omv-panel .bl-diagram { padding: 14px; } }

/* ------------------------------------------------------------ page viewer */

dialog.omv-viewer {
  border: none;
  padding: 0;
  background: transparent;
  /* A global reset zeroes dialog margins, which pins the modal to the top-left
     corner; restore the native centring. */
  margin: auto;
  max-width: min(92vw, 760px);
  max-height: 92vh;
}
dialog.omv-viewer::backdrop { background: rgba(35,42,49,.82); }
dialog.omv-viewer .omv-viewer__frame {
  position: relative;
  border: 1px solid #E5E5E2;
  border-radius: var(--bl-radius-media, 16px);
  background: #FAFAF8;
  overflow: hidden;
}
dialog.omv-viewer img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 74vh;
  aspect-ratio: 210 / 297;
  object-fit: contain;
}
dialog.omv-viewer .omv-viewer__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border: 1px solid #586069;
  border-radius: 50%;
  background: #FAFAF8;
  color: #232A31;
  font: 600 18px "Source Sans 3", sans-serif;
  cursor: pointer;
}
dialog.omv-viewer .omv-viewer__close:focus-visible { outline: 2px solid #1B3A5B; outline-offset: 2px; }
dialog.omv-viewer .omv-viewer__cap {
  margin: 6px 2px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #FAFAF8;
  text-align: center;
}
/* Step controls sit under the document frame, so they stay centred on the
   page rather than on the width of the split hero. */
dialog.omv-viewer .omv-viewer__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 12px;
}
dialog.omv-viewer .omv-viewer__step {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #AFC4DD;
  border-radius: 999px;
  background: transparent;
  color: #FAFAF8;
  font: 600 15px "Source Sans 3", sans-serif;
  cursor: pointer;
}
dialog.omv-viewer .omv-viewer__step:hover:not(:disabled) { background: rgba(250,250,248,.12); }
dialog.omv-viewer .omv-viewer__step:disabled { opacity: .45; cursor: default; }
dialog.omv-viewer .omv-viewer__step:focus-visible { outline: 2px solid #AFC4DD; outline-offset: 2px; }
dialog.omv-viewer .omv-viewer__count {
  margin: 0;
  min-width: 9ch;
  text-align: center;
  font: 500 13px "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  color: #FAFAF8;
}

/* --------------------------------------------------------------- steps v3 */

.omv-steps {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 36px;
  margin-top: 30px;
}
.omv-step { border-top: 2px solid #1B3A5B; padding-top: 16px; }
/* Proper heading, body font, normal emphasis: no tracked eyebrow row. */
.omv-step h3 {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: 0;
  color: #232A31;
  margin: 0 0 8px;
}
.omv-step p { margin: 0; font-size: 16px; line-height: 1.6; color: #586069; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1040px) {
  .omv-panels { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .omv-panel { flex-direction: column; }
}
@media (max-width: 900px) {
  .omv-steps { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 760px) {
  .omv-hero__doc { max-width: 340px; margin-left: 0; }
  .omv-panel { padding: 22px 16px 24px; }
  .omv-panel h3 { font-size: 22px; }
}

/* ------------------------------------------------------------ utility footer */
/* v4: the full-size tagline and Map CTA left the footer on this page, so the
   dark banner starts at the card. The site-wide -40px pull existed to overlap
   the old CTA block; without it the last section would be clipped. */
.footer-shell--compact { padding-top: 56px; }

/* ------------------------------------------------------ v6 ending (12 Sep) */
/* Hero: one quiet line of guidance under the request button, 10-12px below. */
.om-page .om-hero-note {
  margin: 11px 0 0;
  max-width: 32em;
  font-size: 15px;
  line-height: 1.55;
  color: #586069;
}

/* The standalone Questions block sits on the page centreline at ~48rem. Only
   the heading is centred: question and answer text stays left-aligned and the
   accordion control stays on the right of its row. */
.om-page .om-faq > .om-wrap { max-width: 48rem; }
.om-page .om-faq > .om-wrap > h2 { text-align: center; }
.om-page .om-faq .om-acc { max-width: none; }
.om-page .om-faq { padding-bottom: 0; }

/* Closing request group: same neutral paper ground, no new coloured panel. */
.om-page .om-close { padding: 56px 0; }
.om-close__inner { max-width: 48rem; text-align: center; }
.om-close__inner h2 { margin: 0 0 12px; }
.om-close__inner p { max-width: 34em; margin: 0 auto; color: #586069; }
.om-close__inner .om-buyrow { max-width: none; margin: 26px 0 0; }
@media (max-width: 760px) {
  .om-page .om-close { padding: 44px 0; }
}

/* ==================================================================
   Map page refresh (23 Sep 2026), same rules as the homepage
   (03_Marketing/Website/website-refresh-rules.md): soft Light Blue
   fields instead of hard edges, friendlier cards, one button style,
   and a clear journey onward. Six brand colours only.
   ================================================================== */

/* Buttons: the site-wide primary style (Charcoal, 11px radius, arrow, Consulting Blue on hover) */
.om-page .om-cta { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border-radius: 11px; background: #232A31; color: #FAFAF8; font: 600 16px "Source Sans 3", system-ui, sans-serif; box-shadow: 0 14px 30px -16px rgba(35, 42, 49, 0.55); transition: background-color .25s ease, transform .2s ease, box-shadow .25s ease; }
.om-page .om-cta::after { content: '\2192'; transition: transform .2s ease; }
.om-page .om-cta:hover, .om-page .om-cta:focus-visible { background: #1B3A5B; color: #FAFAF8; transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(27, 58, 91, 0.6); }
.om-page .om-cta:hover::after { transform: translateX(4px); }
.om-page .om-cta:focus-visible { outline: 2px solid #1B3A5B; outline-offset: 3px; }

/* Hero: Light Blue field and halftone dots behind the Map page, as on the homepage */
.om-page .om-section:first-of-type { position: relative; overflow: hidden; }
.om-page .om-section:first-of-type::before { content: ''; position: absolute; z-index: 0; right: -8vw; top: 6%; width: min(48vw, 660px); aspect-ratio: 1; border-radius: 50%; background: rgba(175, 196, 221, 0.28); pointer-events: none; }
.om-page .om-section:first-of-type::after { content: ''; position: absolute; z-index: 0; right: 1vw; top: 20%; width: min(28vw, 400px); height: min(18vw, 260px); border-radius: 28px; background-image: radial-gradient(#1B3A5B 1.3px, transparent 1.6px); background-size: 16px 16px; opacity: .38; pointer-events: none; }
.om-page .om-section:first-of-type > * { position: relative; z-index: 1; }

/* What your Map brings into focus: a tinted sheet with lifting, equal cards */
.om-page #example { background: rgba(175, 196, 221, 0.18); margin: 0 clamp(8px, 1.4vw, 20px); border-radius: clamp(20px, 3vw, 36px); }
.omv-panels { align-items: stretch; }
.omv-panel { border: 1px solid rgba(35, 42, 49, 0.08); border-radius: 18px; position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease; }
.omv-panel::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #1B3A5B; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.omv-panel:hover { transform: translateY(-6px); border-color: rgba(27, 58, 91, 0.18); }
.omv-panel:hover::before { transform: scaleX(1); }
.omv-panel__action { border-radius: 11px; border: 1.5px solid #232A31; color: #232A31; padding: 12px 20px; transition: background-color .25s ease, color .25s ease, transform .2s ease; }
.omv-panel__action::after { content: '\2192'; transition: transform .2s ease; }
.omv-panel__action:hover { background: #232A31; color: #FAFAF8; transform: translateY(-2px); }
.omv-panel__action:hover::after { transform: translateX(4px); }

/* How it works: three connected steps with icons (no numbers) */
.omv-steps { position: relative; }
.omv-step { border-top: 0; padding-top: 0; position: relative; }
.omv-step__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 14px; background: #1B3A5B; color: #FAFAF8; position: relative; z-index: 1; }
.omv-step__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.omv-step:not(:last-child)::after { content: ''; position: absolute; top: 24px; left: 64px; right: -28px; height: 1.5px; background: #AFC4DD; }

/* Questions: soft bordered cards, like the homepage */
.om-page .om-acc { border-top: 0; }
.om-page .om-acc__item { border: 1px solid #E5E5E2; border-radius: 14px; background: #FAFAF8; padding: 0 16px; transition: border-color .2s ease; }
.om-page .om-acc__item + .om-acc__item { margin-top: 10px; }
.om-page .om-acc__item:hover { border-color: #232A31; }

/* Closing request: a tinted panel with the lighter and heavier next steps */
.om-page .om-close { padding: clamp(48px, 6vw, 80px) clamp(8px, 1.4vw, 20px); }
.om-page .om-close__inner { background: rgba(175, 196, 221, 0.2); border-radius: clamp(20px, 3vw, 32px); padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px); max-width: 56rem; }
.om-close__alt { margin: 22px auto 0 !important; font-size: 16px; line-height: 1.8; color: #232A31 !important; }
.om-close__alt span { display: block; }
.om-close__alt a { color: #1B3A5B; font-weight: 600; text-decoration: underline; text-decoration-color: #AFC4DD; text-underline-offset: 4px; }
.om-close__alt a:hover { text-decoration-color: #1B3A5B; }

@media (max-width: 900px) {
  .om-page .om-section:first-of-type::before { width: 90vw; right: -40vw; top: auto; bottom: -8%; }
  .om-page .om-section:first-of-type::after { display: none; }
  .omv-step:not(:last-child)::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .om-page .om-cta, .omv-panel, .omv-panel::before, .omv-panel__action, .om-page .om-cta::after { transition: none; }
  .omv-panel:hover, .om-page .om-cta:hover { transform: none; }
}

/* Touch screens (24 Sep 2026, Emil Kowalski's motion rules): a tap leaves
   :hover stuck on, so hover lifts run only on a real mouse or trackpad. */
@media (hover: none), (pointer: coarse) {
  .om-page .om-cta:hover, .om-page .om-cta:hover::after,
  .omv-panel:hover, .omv-panel__action:hover, .omv-panel__action:hover::after { transform: none; }
  .omv-panel:hover::before { transform: scaleX(0); }
  .omv-panel:hover { box-shadow: none; }
}

/* A request button straight after How it works (25 Sep 2026 funnel review) */
.om-page .om-steps-cta { margin: 34px 0 0; }