/* ==========================================================================
   Strategy and Advisory page only (advisory.html, _build/advisory_page.py).
   Loaded after systems.css; behaviour is in systems.js. Rebuilt 2026-10-29: strategy is free.
   ========================================================================== */

/* ---- hero: the blueprint sheet ---------------------------------------------------
   After moodboard pins 54 (the exploded "sandwich blueprint") and 47 (isometric line
   work on blue). Deep drafting navy rather than the About page's bright cobalt, so the
   two sheets do not read as the same page. The six sheets of the Blueprint arrive
   stacked (--dz) and come apart into the exploded view when the figure is revealed;
   the tags and leaders draw in after. */
.sb-hero {
  --sb: #17266F; --sb-2: #22359A; --sb-ln: rgba(236, 241, 255, .92); --sb-fn: rgba(236, 241, 255, .5);
  --text: #F3F5FF; --text-2: rgba(243, 245, 255, .84); --text-3: rgba(243, 245, 255, .64); --line-2: rgba(243, 245, 255, .4);
  position: relative; overflow: hidden; color: var(--text);
  padding-block: clamp(32px, 4.5vw, 60px) clamp(32px, 4vw, 52px);
  background: radial-gradient(ellipse 60% 55% at 70% 45%, rgba(90, 120, 255, .22), transparent 70%), var(--sb);
}
.sb-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(170, 190, 255, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(170, 190, 255, .16) 1px, transparent 1px),
    linear-gradient(rgba(170, 190, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(170, 190, 255, .06) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px; }
.sb-hero .wrap { position: relative; }
.sb-hero .crumbs, .sb-hero .crumbs a { color: var(--text-3); }
.sb-hero .eyebrow { color: var(--text-2); }
.sb-hero .eyebrow::before { background: #F2A37C; }
.sb-hero .display em { color: #FFFFFF; }
.sb-hero .lede { color: var(--text-2); max-width: 46ch; }
.sb-hero .btn--primary { background: #F3F5FF; color: var(--sb); border-color: #F3F5FF; }
.sb-hero .btn--ghost { color: var(--text); border-color: rgba(243, 245, 255, .5); }
.sb-hero .btn--ghost:hover { background: rgba(243, 245, 255, .08); }
.sb-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.sb-hero .display { font-size: clamp(44px, 5.6vw, 80px); }
.sb-fig { margin: 0; }
.sb-svg { display: block; width: 100%; height: auto; max-height: 78vh; overflow: visible; }

.sb-top { fill: rgba(34, 53, 154, .72); stroke: var(--sb-ln); stroke-width: 1.3; }
.sb-side { fill: rgba(236, 241, 255, .22); stroke: var(--sb-ln); stroke-width: 1; }
.sb-ln { fill: none; stroke: var(--sb-ln); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.sb-fn { fill: none; stroke: var(--sb-fn); stroke-width: 1.2; stroke-linecap: round; }
.sb-dash { stroke-dasharray: 3 3; }
.sb-on { fill: var(--sb-ln); font: 600 12px var(--font-mono); letter-spacing: .1em; }
.sb-on--s { font-size: 10px; fill: var(--sb-fn); }
.sb-guide { stroke: rgba(236, 241, 255, .35); stroke-width: 1; stroke-dasharray: 2 5; }
.sb-tag rect { fill: #DCE3FF; }
.sb-tag text { fill: var(--sb); font: 600 10px var(--font-mono); letter-spacing: .08em; }
.sb-lead { fill: none; stroke: var(--sb-ln); stroke-width: 1; }
.sb-tag circle { fill: var(--sb-ln); }
.sb-head rect { fill: none; stroke: var(--sb-ln); stroke-width: 1.2; }
.sb-head__t { fill: var(--sb-ln); font: 600 21px var(--font-mono); letter-spacing: .06em; }
.sb-head__s { fill: var(--sb-fn); font: 9.5px var(--font-mono); letter-spacing: .12em; }
.sb-vert { fill: var(--sb-fn); font: 9.5px var(--font-mono); letter-spacing: .16em; }
.sb-chev { fill: var(--sb-fn); font: 13px var(--font-mono); letter-spacing: .02em; }
.sb-cap { fill: none; stroke: var(--sb-fn); stroke-width: 1; }

.sb-sheet { transition: transform 1100ms cubic-bezier(.2, .8, .2, 1); transition-delay: calc(250ms + var(--i) * 70ms); }
.sb-late { transition: opacity 600ms var(--ease) 1200ms; }
.sb-fig:not(.in) .sb-sheet { transform: translateY(var(--dz)); }
.sb-fig:not(.in) .sb-late { opacity: 0; }

/* the drawing's title block, as on an engineering print; the fee box is the one in colour */
.sb-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-top: clamp(24px, 3vw, 40px); border: 1px solid rgba(236, 241, 255, .5); }
.sb-title__lead { padding: 14px 18px; font-family: var(--font-display); font-size: clamp(18px, 1.8vw, 22px); }
.sb-title dl { display: grid; grid-template-columns: repeat(4, auto); margin: 0; }
.sb-title dl > div { padding: 10px 18px; border-left: 1px solid rgba(236, 241, 255, .5); }
.sb-title dt { font: 9.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.sb-title dd { margin: 3px 0 0; font: 500 13px var(--font-mono); }
.sb-title dl > div:has(.sb-free) { background: #F3F5FF; color: var(--sb); }
.sb-title dl > div:has(.sb-free) dt { color: rgba(23, 38, 111, .7); }
.sb-free { font-size: 15px !important; font-weight: 600 !important; letter-spacing: .04em; }

@media (max-width: 960px) {
  .sb-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .sb-svg { max-height: none; }
  .sb-title { grid-template-columns: minmax(0, 1fr); }
  .sb-title dl { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(236, 241, 255, .5); }
  .sb-title dl > div:nth-child(odd) { border-left: 0; }
  .sb-title dl > div:nth-child(n+3) { border-top: 1px solid rgba(236, 241, 255, .5); }
}
@media (prefers-reduced-motion: reduce) {
  .sb-sheet, .sb-late { transition: none; }
  .sb-fig:not(.in) .sb-sheet { transform: none; }
  .sb-fig:not(.in) .sb-late { opacity: 1; }
}

/* ---- why it is free ---------------------------------------------------------------- */
.ad-why .eyebrow { margin: 0 0 18px; }
.ad-why__q { margin: 0; max-width: 30ch; font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -.025em; }
.ad-why__q em { color: var(--text-2); }
.ad-beliefs { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); border-top: 2px solid var(--text); }
.ad-beliefs li { padding-top: 18px; }
.ad-beliefs span { font: 500 11px var(--font-mono); color: var(--orange); }
.ad-beliefs h3 { margin: 8px 0; font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -.015em; line-height: 1.2; }
.ad-beliefs p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-2); }

/* ---- free, always ------------------------------------------------------------------ */
.ad-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.ad-card { display: grid; grid-template-rows: auto auto 1fr; padding: 10px 10px 26px; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(var(--ov), .04), rgba(var(--ov), .012)); }
.ad-card__t { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 16px 8px; }
.ad-card h3 { margin: 0; font-family: var(--font-display); font-size: clamp(22px, 2vw, 26px); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.ad-card > p { margin: 0 16px; font-size: 15px; line-height: 1.55; color: var(--text-2); max-width: 54ch; }
.ad-free { padding: 4px 11px; border-radius: 100px; border: 1px solid rgba(21, 69, 48, .35); background: rgba(21, 69, 48, .07); color: #154530; font: 600 10.5px var(--font-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.ad-fig { display: grid; align-content: center; gap: 9px; min-height: 150px; padding: 16px 18px; border-radius: 3px; background: #fff; color: #14181B; box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 10px 24px -18px rgba(0, 0, 0, .35); }
.ad-call__h { display: grid; margin: 0; }
.ad-call__h b { font-size: 14px; }
.ad-call__h small { font: 10.5px var(--font-mono); color: #70757a; }
.ad-call ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.ad-call li { display: grid; grid-template-columns: 22px 1fr; padding: 7px 10px; border-radius: 6px; background: #f6f5f1; font-size: 12.5px; }
.ad-call li span { font: 600 11px var(--font-mono); color: #E2520F; }
.ad-rev__l { margin: 0; padding: 7px 10px; border-radius: 6px; border: 1px solid #ecebe6; font-size: 12.5px; }
.ad-rev__l::before { content: "\2713\00a0\00a0"; color: #154530; font-weight: 700; }
.ad-rev__l--bad { border-color: #f0d79a; background: #fdf8ea; color: #8a5a00; }
.ad-rev__l--bad::before { content: "!\00a0\00a0"; color: #B4400A; }

.ad-who { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); margin-top: clamp(14px, 1.6vw, 20px); border: 1px solid var(--line); border-radius: var(--r-lg); }
.ad-who > * { padding: 18px clamp(16px, 2vw, 24px); }
.ad-who__k { margin: 0; align-self: center; font: 500 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.ad-who > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-left: 1px solid var(--line); }
.ad-who span { font-size: 15px; color: var(--text-2); }
.ad-who b { font-family: var(--font-display); font-size: 24px; font-weight: 500; color: #154530; }

@media (max-width: 900px) {
  .ad-cards, .ad-beliefs { grid-template-columns: minmax(0, 1fr); }
  .ad-who { grid-template-columns: minmax(0, 1fr); }
  .ad-who > div { border-left: 0; border-top: 1px solid var(--line); }
  .ad-who__k { padding-bottom: 6px; }
}

/* ---- figure pieces shared by the cards ---------------------------------------------- */
.ad-rank { padding: 14px 16px; display: grid; gap: 10px; }
.ad-rank__h { display: grid; margin: 0; }
.ad-rank__h b { font-size: 14px; }
.ad-rank__h small { font-size: 10.5px; color: #70757a; }
.ad-rank table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.ad-rank th { padding: 5px 4px; border-bottom: 1px solid #ececec; font-size: 9.5px; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; color: #8a8f94; text-align: left; }
.ad-rank td { padding: 7px 4px; border-bottom: 1px solid #f3f3f1; vertical-align: middle; }
.ad-rank td b { display: block; font-size: 12px; }
.ad-rank td small { font-size: 10px; color: #8a8f94; }
.ad-n { font-family: Consolas, Menlo, monospace; color: #E2520F; font-weight: 700; }
.ad-r { padding: 2px 8px; border-radius: 100px; font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.ad-r--high { background: #e6f2ea; color: #1d6b3c; }
.ad-r--med { background: #fdf1d6; color: #8a5a00; }
.ad-r--low { background: #efeff0; color: #666; }
.ad-rank__foot { margin: 0; font-size: 10.5px; color: #8a8f94; }

.ad-bp { padding: 16px; display: grid; gap: 10px; }
.ad-bp__k { margin: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #2F5BD3; }
.ad-bp__h { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.1; }
.ad-bp__flow { display: flex; align-items: center; gap: 4px; margin: 0; }
.ad-bp__flow span { padding: 4px 8px; border-radius: 6px; border: 1px solid #d9dff3; background: #f4f6fd; font-size: 10.5px; }
.ad-bp__flow i { flex: 1; height: 1.5px; min-width: 6px; background: #2F5BD3; }
.ad-bp table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.ad-bp td { padding: 6px 0; border-bottom: 1px solid #f0f0ee; }
.ad-bp td:first-child { width: 64px; color: #8a8f94; }
.ad-open { display: grid; margin: 0; padding: 8px 10px; border-radius: 8px; background: #fdf1d6; color: #8a5a00; font-size: 11px; }
.ad-open b { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; }


/* ---- same idea, two briefs ---------------------------------------------------------- */
.ad-mail__m { display: grid; grid-template-columns: 70px 1fr; margin: 0; padding: 9px 18px; border-bottom: 1px solid #f1f1f1; font-size: 13px; color: #444; }
.ad-mail__m span { color: #8a8f94; }
.ad-mail__b { padding: 14px 18px 18px; font-size: 15px; line-height: 1.7; }
.ad-mail__b p { margin: 0 0 10px; }
.ad-doc { padding: 18px 20px; display: grid; gap: 10px; }
.ad-doc__s { display: grid; gap: 8px; }
.ad-doc__s p { display: grid; grid-template-columns: 64px 1fr; margin: 0; padding: 9px 10px; font-size: 13.5px; line-height: 1.5; }
.ad-doc__s b { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #2F5BD3; padding-top: 3px; }

/* ---- the narrowing ----------------------------------------------------------------- */
.ad-plan path { fill: none; stroke: var(--text-3); stroke-width: 1.3; stroke-dasharray: 5 6; opacity: .6; }
.ad-dot { fill: var(--text-3); transition: opacity .35s var(--ease), fill .35s var(--ease); }
.ad-dot.is-live { fill: var(--orange); }
.ad-opt { fill: none; stroke: url(#syLine); stroke-width: 1.6; opacity: .75; stroke-dasharray: var(--len); stroke-dashoffset: calc(var(--len) * (1 - var(--p))); transition: opacity .5s var(--ease); }
.ad-opt.is-live { opacity: .1; }
.ad-opt--top { stroke-width: 2.2; opacity: 1; }
.ad-chosen { fill: none; stroke: url(#syLine); stroke-width: 6; stroke-linecap: round; stroke-dasharray: var(--len) 2000; stroke-dashoffset: calc(var(--len) * (1 - var(--p))); }
.ad-badge circle { fill: var(--ink); stroke: var(--cobalt); stroke-width: 1.5; }
.ad-badge text { fill: var(--cobalt); font-size: 11px; font-weight: 600; }
.ad-badge, .ad-piece { transition: opacity .45s var(--ease); }
.sg-js .ad-badge:not(.is-live), .sg-js .ad-piece:not(.is-live) { opacity: 0; }
.ad-doc__ic { fill: var(--ink); stroke: var(--orange); stroke-width: 2; }
.ad-doc__ln { stroke: var(--orange); stroke-width: 2; stroke-linecap: round; }
.ad-lab { fill: var(--text); }
.ad-person { fill: url(#syLine); stroke: var(--ink); stroke-width: 2; }
.ad-done { fill: none; stroke: url(#syLine); stroke-width: 4; stroke-linecap: round; }