/* Built Logic project-based page — page-scoped composition (handoff v3,
   11 Sep 2026). Loaded after /assets/bl-visual.css, which owns the shared
   .bl-diagram motion module and the .bl-film / .bl-media components. */

/* ------------------------------------------------------------- hero */
/* The shared .bl-hero owns the 45:55 copy/media split (assets/bl-visual.css).
   The hero uses the shared .bl-wide container so the primary frame matches the
   other pages at the same breakpoint. With the staging-only figure removed at
   publish time the opening returns to one column. */

.seo-hero .bl-hero__media .bl-film { position: relative; z-index: 2; }
.seo-hero .bl-hero:has(.bl-hero__media:empty) { grid-template-columns: minmax(0, 1fr); }
.seo-hero .bl-hero:has(.bl-hero__media:empty) .bl-hero__media { display: none; }

/* ------------------------------------------ refresh (25 Sep 2026) */
/* Rules: 03_Marketing/Website/website-refresh-rules.md. Shared pieces (.bl-lift,
   .bl-icon, .bl-sheet, .bl-ghost, .bl-alt) live in assets/bl-visual.css. */

.pj-page .seo-hero { position: relative; overflow: hidden; border-bottom: 0; }
.pj-page .seo-hero::before { content: ''; position: absolute; z-index: 0; right: -8vw; top: 4%; width: min(48vw, 660px); aspect-ratio: 1; border-radius: 50%; background: rgba(175, 196, 221, 0.28); pointer-events: none; }
.pj-page .seo-hero::after { content: ''; position: absolute; z-index: 0; right: 2vw; top: 18%; width: min(26vw, 380px); height: min(18vw, 260px); border-radius: 28px; background-image: radial-gradient(#1B3A5B 1.3px, transparent 1.6px); background-size: 16px 16px; opacity: .34; pointer-events: none; }
.pj-page .seo-hero > * { position: relative; z-index: 1; }
.pj-page .seo-section { border-bottom: 0; padding-block: clamp(56px, 6vw, 88px); }
.pj-page .seo-section__title { text-wrap: balance; }

/* Cards: shared type inside the refreshed cards */
.pj-needs, .pj-stages, .pj-areas, .pj-sectors { list-style: none; margin: 0; padding: 0; }
.pj-needs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(28px, 3vw, 40px); }
.pj-needs li { padding: 26px 24px 24px; }
.pj-needs h3, .pj-stage__name { margin: 18px 0 8px; font: 600 18px/1.3 'Source Sans 3', system-ui, sans-serif; color: #232A31; }
.pj-needs p, .pj-stage__note { margin: 0; font-size: 15.5px; line-height: 1.6; color: #586069; }

/* Delivery: four stage cards on the tinted sheet */
.pj-page .pj-deliver { padding-block: clamp(64px, 7vw, 104px); }
.pj-flow { margin: clamp(28px, 3vw, 40px) 0 0; }
.pj-flow__lead { margin: 0 0 22px; max-width: 70ch; font-size: 16.5px; line-height: 1.6; color: #586069; }
.pj-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pj-stage { position: relative; display: flex; flex-direction: column; padding: 24px 22px 20px; border: 1px solid rgba(35, 42, 49, 0.1); border-radius: 18px; background: #FAFAF8; }
.pj-stage--accent { border-color: #1B3A5B; box-shadow: inset 0 4px 0 #1B3A5B; }
.pj-stage__name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pj-tag { display: inline-block; padding: 3px 9px; border-radius: 999px; background: rgba(175, 196, 221, 0.45); color: #1B3A5B; font: 500 10px/1.4 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.pj-stage__dep { margin: auto 0 0; padding-top: 16px; font-size: 14.5px; line-height: 1.5; color: #586069; }
.pj-stage__note + .pj-stage__dep { margin-top: 18px; border-top: 1px dashed rgba(88, 96, 105, 0.5); }
.pj-stage__dep span { display: block; margin-bottom: 4px; font: 500 10px/1.4 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #1B3A5B; }
.pj-flow__key { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 18px; border-radius: 14px; background: rgba(175, 196, 221, 0.3); font-size: 15px; line-height: 1.5; color: #232A31; }

/* The Feasibility Study aside, as a card with an outlined button */
.pj-study { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; margin-top: 28px; padding: 26px 28px; border: 1px solid rgba(35, 42, 49, 0.1); border-radius: 18px; background: #FAFAF8; }
.pj-study__label { margin: 0; font: 500 10.5px/1.4 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #586069; }
.pj-study__title { margin: 6px 0 6px; font: 500 24px/1.2 'Fraunces', Georgia, serif; color: #232A31; }
.pj-study__body { margin: 0; max-width: 62ch; font-size: 15.5px; line-height: 1.6; color: #586069; }
.pj-study__links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; }
.pj-study__alt { color: #1B3A5B; font-weight: 600; text-decoration: underline; text-decoration-color: #AFC4DD; text-underline-offset: 4px; transition: text-decoration-color 200ms ease; }
.pj-study__alt:hover { text-decoration-color: #1B3A5B; }

/* Who this is for: task-area cards and sector chips */
.pj-areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 3vw, 40px); }
.pj-areas li { display: flex; align-items: center; gap: 14px; padding: 20px; font: 600 17px/1.3 'Source Sans 3', system-ui, sans-serif; color: #232A31; }
.pj-sectors { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pj-sectors li { padding: 7px 14px; border: 1px solid #E5E5E2; border-radius: 999px; background: #FAFAF8; font-size: 14.5px; color: #586069; }

/* Cost: one flat Charcoal panel */
.pj-cost { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(32px, 4vw, 56px); border-radius: clamp(20px, 3vw, 32px); background: #232A31; }
.pj-cost .eyebrow { color: #AFC4DD; }
.pj-cost .seo-section__title { color: #FAFAF8; margin-bottom: 0; }
.pj-cost .seo-section__lead { margin: 0; color: rgba(250, 250, 248, 0.78); }

/* Questions: soft bordered cards, centred block */
.pj-faq .seo-section__title { text-align: center; margin-inline: auto; }
.pj-faq .seo-faq { max-width: 48rem; margin-inline: auto; }
.pj-page .seo-faq details { border: 1px solid #E5E5E2; border-radius: 14px; background: #FAFAF8; padding: 0 20px; transition: border-color 200ms ease; }
.pj-page .seo-faq details + details { margin-top: 10px; }
.pj-page .seo-faq details:hover { border-color: #232A31; }
.pj-page .seo-faq summary { padding: 18px 0; font-size: 20px; }
.pj-page .seo-faq p { padding-bottom: 20px; }

/* Close: a tinted panel with the Map as the lighter step */
.pj-close { padding: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 56px); border-radius: clamp(20px, 3vw, 32px); background: var(--bl-tint); text-align: center; }
.pj-close .seo-section__title { margin-inline: auto; }
.pj-close .seo-close__act { margin: 26px 0 0; }

/* Related pages: cards that lift */
.pj-related .seo-section__title { font-size: clamp(28px, 3vw, 36px); }
.pj-page .seo-related a { border-radius: 18px; padding: 22px; }
.pj-page .seo-related a:hover { border-color: rgba(27, 58, 91, 0.2); }

@media (max-width: 1080px) {
  .pj-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj-study { grid-template-columns: auto minmax(0, 1fr); }
  .pj-study__links { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px; }
}
@media (max-width: 760px) {
  .pj-page .seo-hero::before { width: 90vw; right: -40vw; top: auto; bottom: -8%; }
  .pj-page .seo-hero::after { display: none; }
  .pj-needs, .pj-stages, .pj-areas, .pj-cost { grid-template-columns: minmax(0, 1fr); }
  .pj-study { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .pj-study__links { grid-column: auto; }
  .pj-page .seo-related { grid-template-columns: minmax(0, 1fr); }
  .pj-page .seo-faq summary { font-size: 18px; }
}