/* ==========================================================================
   INA — International Network Advisors
   Shared stylesheet — tokens: ink navy / chart paper / signal amber
   ========================================================================== */

:root{
  --ink:#0B1526;
  --ink-2:#111E33;
  --ink-3:#16233A;
  --ink-line: rgba(232,236,234,0.14);
  --paper:#E7EBE7;
  --paper-2:#DCE1DC;
  --paper-line: rgba(11,21,38,0.13);
  --text:#0E1520;
  --text-on-dark:#EEF1ED;
  --muted:#5B6670;
  --muted-on-dark:#93A2AC;
  --amber:#D9922E;
  --amber-deep:#B9741C;
  --amber-soft: rgba(217,146,46,0.14);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
  --maxw: 1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--sans);
  background: var(--paper);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul,ol{list-style:none;}
.wrap{max-width: var(--maxw); margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .wrap{padding:0 20px;} #mobileMenu .wrap{ padding:18px 20px !important; } }

::selection{ background: var(--amber-soft); color: var(--text); }
:focus-visible{ outline: 2px solid var(--amber); outline-offset: 3px; }

.eyebrow{
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber-deep);
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; min-width:0; max-width:100%;
}
.eyebrow > span{ min-width:0; }
.eyebrow::before{ content:""; width:22px; height:1px; background: var(--amber-deep); display:inline-block; }
.eyebrow.on-dark{ color: var(--amber); }
.eyebrow.on-dark::before{ background: var(--amber); }

h1,h2,h3,h4{ font-family: var(--serif); font-weight:600; letter-spacing:-0.01em; }
.h-display{ font-size: clamp(38px, 6vw, 74px); line-height: 1.03; font-weight:500; }
.h-display em{ font-style: italic; font-weight:500; color: var(--amber); }
.h-page{ font-size: clamp(34px, 5vw, 58px); line-height:1.06; font-weight:500; }
.h-section{ font-size: clamp(28px, 3.6vw, 42px); line-height:1.12; }
.h-card{ font-size: 21px; line-height:1.28; }
p.lede{ font-size: 18px; color: var(--muted); max-width: 640px; }
.on-dark p.lede{ color: var(--muted-on-dark); }
article p{ margin-bottom: 16px; max-width: 720px; color: var(--text); }
article p.muted{ color: var(--muted); }

/* ---------- Nav ---------- */
header.site{
  position: sticky; top:0; z-index: 100;
  background: rgba(231,235,231,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--paper-line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:14px; flex-wrap:nowrap; }
header.site .wrap.nav{ padding: 0 18px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--mono); flex:0 0 auto; }
.brand .mark{
  width:30px;height:30px; border:1px solid var(--text); border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--serif); font-weight:600; font-size:15px; flex:0 0 auto;
}
.brand .logo-mark{ flex:0 0 auto; color: var(--text); }
footer .brand .logo-mark{ color: var(--text-on-dark); }
.brand .word{ font-size:13px; letter-spacing:.12em; }
.brand .word b{ font-weight:600; }
.brand .word span{ display:block; font-size:9.5px; color:var(--muted); letter-spacing:.1em; }

nav.links{
  display:flex; align-items:center; justify-content:center; gap:10px; min-width:0; flex:1 1 auto;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
nav.links::-webkit-scrollbar{ display:none; }
nav.links a{
  font-family: var(--sans); font-weight:500; font-size:13px; letter-spacing:0;
  color: var(--text); position:relative; padding: 6px 0; white-space:nowrap; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
}
nav.links a .nl2{ display:block; text-align:center; line-height:1.2; white-space:normal; max-width:66px; }
nav.links a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0%; background: var(--amber); transition: width .25s ease; }
nav.links a:hover::after, nav.links a.current::after{ width:100%; }
nav.links a.current{ color: var(--amber-deep); }

.btn{
  font-family: var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding: 11px 20px; border-radius:2px; display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--text); transition: all .2s ease; cursor:pointer; background:transparent; color:inherit;
}
.btn.amber{ background:var(--amber); border-color:var(--amber); color:#141008; font-weight:500; }
.btn.amber:hover{ background:var(--amber-deep); border-color:var(--amber-deep); }
.btn.ghost{ background:transparent; }
.btn.ghost:hover{ background: var(--text); color: var(--paper); }
.btn.on-dark{ border-color: var(--text-on-dark); color: var(--text-on-dark); }
.btn.on-dark:hover{ background: var(--text-on-dark); color: var(--ink); }
.btn.small{ padding:8px 14px; font-size:10.5px; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn[disabled]:hover{ background:inherit; color:inherit; }

.nav > .btn.amber{ flex:0 0 auto; }
.navToggle{ display:none; background:none; border:none; cursor:pointer; flex:0 0 auto; padding:8px; margin:-8px; }
@media (max-width: 1350px){ header.site .brand .word span{ display:none; } }
/* Tuned for 9 nav items (added Advisory Board): tighter header padding, smaller
   nav font and narrower two-line labels reclaim enough width to keep the
   breakpoint close to its original, known-good value. */
@media (max-width: 1200px){
  nav.links{ display:none; }
  .navToggle{ display:block; }
}

/* ---------- Hero (home) — fits one viewport ---------- */
.hero{
  min-height: calc(100vh - 73px);
  min-height: calc(100dvh - 73px);
  display:flex; align-items:center;
  padding: 32px 0 !important;
}
.hero > .wrap{ min-width:0; width:100%; }
.hero .hero-head{ margin-top:0 !important; max-width:100%; }
.hero .h-display{ overflow-wrap:break-word; }
.hero .stat-strip{ min-width:0; }
.hero .stat-strip > div{ min-width:0; overflow-wrap:break-word; }
.hero .stat-strip{ margin-top:clamp(20px,4vh,48px) !important; }
@media (max-height: 760px){
  .hero .stat-strip{ display:none; }
}
@media (max-width: 600px){
  .hero .stat-strip{ grid-template-columns: repeat(2,1fr) !important; row-gap:18px; }
}
@media (max-width: 480px) and (max-height: 760px){
  .hero{ padding: 24px 0 !important; }
  .hero .hero-cta{ margin-top:22px !important; }
}

/* ---------- Breadcrumb / page header — fits one viewport, shared connectivity background ---------- */
.page-hero{
  position:relative; color: var(--text-on-dark); overflow:hidden;
  min-height: calc(100vh - 73px);
  min-height: calc(100dvh - 73px);
  display:flex; align-items:center;
  padding: 40px 0;
  background-color: var(--ink);
  /* min-width:0 below fixes an iOS clipping bug: .wrap is this flex row's
     only real child, and flex items default to min-width:auto (their
     content's natural width) instead of 0 — on narrow phones that let
     long headings render wider than the screen and get silently clipped
     by the site's global overflow-x:hidden instead of wrapping. */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDUyMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNYXggc2xpY2UiPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJzZyIgeDE9IjAiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDcwRDE4Ii8+CjxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSIjMEIxNTI2Ii8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE4MkEyMiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9ImdsIiB4MT0iMCIgeTE9IjEiIHgyPSIwIiB5Mj0iMCI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNEOTkyMkUiIHN0b3Atb3BhY2l0eT0iMC4xNiIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNEOTkyMkUiIHN0b3Atb3BhY2l0eT0iMCIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+CjxyZWN0IHdpZHRoPSIxNDQwIiBoZWlnaHQ9IjUyMCIgZmlsbD0idXJsKCNzZykiLz4KPHJlY3QgeT0iMjYwIiB3aWR0aD0iMTQ0MCIgaGVpZ2h0PSIyNjAiIGZpbGw9InVybCgjZ2wpIi8+CjwhLS0gZmFpbnQgZ2xvYmFsIG5ldHdvcmsgZ2xvYmUgLS0+CjxnIHN0cm9rZT0iIzFCMkM0NiIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBvcGFjaXR5PSIwLjYiPgo8Y2lyY2xlIGN4PSI3MjAiIGN5PSIyMzAiIHI9IjIxMCIvPgo8ZWxsaXBzZSBjeD0iNzIwIiBjeT0iMjMwIiByeD0iMjEwIiByeT0iNjAiLz4KPGVsbGlwc2UgY3g9IjcyMCIgY3k9IjIzMCIgcng9IjIxMCIgcnk9IjEzMCIvPgo8bGluZSB4MT0iNTEwIiB5MT0iMjMwIiB4Mj0iOTMwIiB5Mj0iMjMwIi8+CjxsaW5lIHgxPSI3MjAiIHkxPSIyMCIgeDI9IjcyMCIgeTI9IjQ0MCIvPgo8L2c+CjwhLS0gZGF0YSBwYXJ0aWNsZXMgYWxvbmcgdGhlIGdsb2JlIC0tPgo8ZyBmaWxsPSIjRDk5MjJFIiBvcGFjaXR5PSIwLjUiPgo8Y2lyY2xlIGN4PSI1NjAiIGN5PSIxMjAiIHI9IjIiLz48Y2lyY2xlIGN4PSI4ODAiIGN5PSIxNDAiIHI9IjIiLz48Y2lyY2xlIGN4PSI2MjAiIGN5PSIzMzAiIHI9IjIiLz4KPGNpcmNsZSBjeD0iODIwIiBjeT0iMzIwIiByPSIyIi8+PGNpcmNsZSBjeD0iNzIwIiBjeT0iNzAiIHI9IjIiLz48Y2lyY2xlIGN4PSI3MjAiIGN5PSIzOTAiIHI9IjIiLz4KPC9nPgo8IS0tIGhvcml6b24gbGluZSAtLT4KPGxpbmUgeDE9IjAiIHkxPSI1MDAiIHgyPSIxNDQwIiB5Mj0iNTAwIiBzdHJva2U9IiMxODJBMjIiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iMC43Ii8+CjwhLS0gdGVsZWNvbSB0b3dlciBhcnJheSAtLT4KPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjAsMCkiPjxwYXRoIGQ9Ik0gLTYsNTAwIEwgMCwzNTAgTCA2LDUwMCBaIiBmaWxsPSJub25lIiBzdHJva2U9IiMxQjJDNDYiIHN0cm9rZS13aWR0aD0iMS42Ii8+PGxpbmUgeDE9Ii00LjkiIHkxPSI0NDcuNSIgeDI9IjQuOSIgeTI9IjQ0Ny41IiBzdHJva2U9IiMxQjJDNDYiIHN0cm9rZS13aWR0aD0iMS4yIi8+PGxpbmUgeDE9Ii0zLjUiIHkxPSI0MTMuMCIgeDI9IjMuNSIgeTI9IjQxMy4wIiBzdHJva2U9IiMxQjJDNDYiIHN0cm9rZS13aWR0aD0iMS4yIi8+PGxpbmUgeDE9Ii0yLjIiIHkxPSIzODAuMCIgeDI9IjIuMiIgeTI9IjM4MC4wIiBzdHJva2U9IiMxQjJDNDYiIHN0cm9rZS13aWR0aD0iMS4yIi8+PGxpbmUgeDE9Ii0xMSIgeTE9IjM2MCIgeDI9IjExIiB5Mj0iMzYwIiBzdHJva2U9IiMyNDM5NUEiIHN0cm9rZS13aWR0aD0iMiIvPjxsaW5lIHgxPSItOCIgeTE9IjM3MiIgeDI9IjgiIHkyPSIzNzIiIHN0cm9rZT0iIzI0Mzk1QSIgc3Ryb2tlLXdpZHRoPSIyIi8+PGNpcmNsZSBjeD0iMCIgY3k9IjM0OCIgcj0iMi42IiBmaWxsPSIjRDk5MjJFIiBvcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTSAtMTYsMzQ4IEEgMTYsMTYgMCAwIDEgMTYsMzQ4IiBmaWxsPSJub25lIiBzdHJva2U9IiNEOTkyMkUiIHN0cm9rZS13aWR0aD0iMS4xIiBvcGFjaXR5PSIwLjUwIi8+PHBhdGggZD0iTSAtMjgsMzQ4IEEgMjgsMjggMCAwIDEgMjgsMzQ4IiBmaWxsPSJub25lIiBzdHJva2U9IiNEOTkyMkUiIHN0cm9rZS13aWR0aD0iMS4xIiBvcGFjaXR5PSIwLjMyIi8+PHBhdGggZD0iTSAtNDAsMzQ4IEEgNDAsNDAgMCAwIDEgNDAsMzQ4IiBmaWxsPSJub25lIiBzdHJva2U9IiNEOTkyMkUiIHN0cm9rZS13aWR0aD0iMS4xIiBvcGFjaXR5PSIwLjE4Ii8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxMCwwKSI+PHBhdGggZD0iTSAtNiw1MDAgTCAwLDI4MCBMIDYsNTAwIFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFCMkM0NiIgc3Ryb2tlLXdpZHRoPSIxLjYiLz48bGluZSB4MT0iLTQuOSIgeTE9IjQyMy4wIiB4Mj0iNC45IiB5Mj0iNDIzLjAiIHN0cm9rZT0iIzFCMkM0NiIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iLTMuNSIgeTE9IjM3Mi40IiB4Mj0iMy41IiB5Mj0iMzcyLjQiIHN0cm9rZT0iIzFCMkM0NiIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iLTIuMiIgeTE9IjMyNC4wIiB4Mj0iMi4yIiB5Mj0iMzI0LjAiIHN0cm9rZT0iIzFCMkM0NiIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iLTExIiB5MT0iMjkwIiB4Mj0iMTEiIHkyPSIyOTAiIHN0cm9rZT0iIzI0Mzk1QSIgc3Ryb2tlLXdpZHRoPSIyIi8+PGxpbmUgeDE9Ii04IiB5MT0iMzAyIiB4Mj0iOCIgeTI9IjMwMiIgc3Ryb2tlPSIjMjQzOTVBIiBzdHJva2Utd2lkdGg9IjIiLz48Y2lyY2xlIGN4PSIwIiBjeT0iMjc4IiByPSIyLjYiIGZpbGw9IiNEOTkyMkUiIG9wYWNpdHk9IjAuODUiLz48cGF0aCBkPSJNIC0xNiwyNzggQSAxNiwxNiAwIDAgMSAxNiwyNzgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0Q5OTIyRSIgc3Ryb2tlLXdpZHRoPSIxLjEiIG9wYWNpdHk9IjAuNTAiLz48cGF0aCBkPSJNIC0yOCwyNzggQSAyOCwyOCAwIDAgMSAyOCwyNzgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0Q5OTIyRSIgc3Ryb2tlLXdpZHRoPSIxLjEiIG9wYWNpdHk9IjAuMzIiLz48cGF0aCBkPSJNIC00MCwyNzggQSA0MCw0MCAwIDAgMSA0MCwyNzgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0Q5OTIyRSIgc3Ryb2tlLXdpZHRoPSIxLjEiIG9wYWNpdHk9IjAuMTgiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzgwLDApIj48cGF0aCBkPSJNIC02LDUwMCBMIDAsMzcwIEwgNiw1MDAgWiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMUIyQzQ2IiBzdHJva2Utd2lkdGg9IjEuNiIvPjxsaW5lIHgxPSItNC45IiB5MT0iNDU0LjUiIHgyPSI0LjkiIHkyPSI0NTQuNSIgc3Ryb2tlPSIjMUIyQzQ2IiBzdHJva2Utd2lkdGg9IjEuMiIvPjxsaW5lIHgxPSItMy41IiB5MT0iNDI0LjYiIHgyPSIzLjUiIHkyPSI0MjQuNiIgc3Ryb2tlPSIjMUIyQzQ2IiBzdHJva2Utd2lkdGg9IjEuMiIvPjxsaW5lIHgxPSItMi4yIiB5MT0iMzk2LjAiIHgyPSIyLjIiIHkyPSIzOTYuMCIgc3Ryb2tlPSIjMUIyQzQ2IiBzdHJva2Utd2lkdGg9IjEuMiIvPjxsaW5lIHgxPSItMTEiIHkxPSIzODAiIHgyPSIxMSIgeTI9IjM4MCIgc3Ryb2tlPSIjMjQzOTVBIiBzdHJva2Utd2lkdGg9IjIiLz48bGluZSB4MT0iLTgiIHkxPSIzOTIiIHgyPSI4IiB5Mj0iMzkyIiBzdHJva2U9IiMyNDM5NUEiIHN0cm9rZS13aWR0aD0iMiIvPjxjaXJjbGUgY3g9IjAiIGN5PSIzNjgiIHI9IjIuNiIgZmlsbD0iI0Q5OTIyRSIgb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik0gLTE2LDM2OCBBIDE2LDE2IDAgMCAxIDE2LDM2OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRDk5MjJFIiBzdHJva2Utd2lkdGg9IjEuMSIgb3BhY2l0eT0iMC41MCIvPjxwYXRoIGQ9Ik0gLTI4LDM2OCBBIDI4LDI4IDAgMCAxIDI4LDM2OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRDk5MjJFIiBzdHJva2Utd2lkdGg9IjEuMSIgb3BhY2l0eT0iMC4zMiIvPjxwYXRoIGQ9Ik0gLTQwLDM2OCBBIDQwLDQwIDAgMCAxIDQwLDM2OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRDk5MjJFIiBzdHJva2Utd2lkdGg9IjEuMSIgb3BhY2l0eT0iMC4xOCIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NjAsMCkiPjxwYXRoIGQ9Ik0gLTYsNTAwIEwgMCwyNDAgTCA2LDUwMCBaIiBmaWxsPSJub25lIiBzdHJva2U9IiMxQjJDNDYiIHN0cm9rZS13aWR0aD0iMS42Ii8+PGxpbmUgeDE9Ii00LjkiIHkxPSI0MDkuMCIgeDI9IjQuOSIgeTI9IjQwOS4wIiBzdHJva2U9IiMxQjJDNDYiIHN0cm9rZS13aWR0aD0iMS4yIi8+PGxpbmUgeDE9Ii0zLjUiIHkxPSIzNDkuMiIgeDI9IjMuNSIgeTI9IjM0OS4yIiBzdHJva2U9IiMxQjJDNDYiIHN0cm9rZS13aWR0aD0iMS4yIi8+PGxpbmUgeDE9Ii0yLjIiIHkxPSIyOTIuMCIgeDI9IjIuMiIgeTI9IjI5Mi4wIiBzdHJva2U9IiMxQjJDNDYiIHN0cm9rZS13aWR0aD0iMS4yIi8+PGxpbmUgeDE9Ii0xMSIgeTE9IjI1MCIgeDI9IjExIiB5Mj0iMjUwIiBzdHJva2U9IiMyNDM5NUEiIHN0cm9rZS13aWR0aD0iMiIvPjxsaW5lIHgxPSItOCIgeTE9IjI2MiIgeDI9IjgiIHkyPSIyNjIiIHN0cm9rZT0iIzI0Mzk1QSIgc3Ryb2tlLXdpZHRoPSIyIi8+PGNpcmNsZSBjeD0iMCIgY3k9IjIzOCIgcj0iMi42IiBmaWxsPSIjRDk5MjJFIiBvcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTSAtMTYsMjM4IEEgMTYsMTYgMCAwIDEgMTYsMjM4IiBmaWxsPSJub25lIiBzdHJva2U9IiNEOTkyMkUiIHN0cm9rZS13aWR0aD0iMS4xIiBvcGFjaXR5PSIwLjUwIi8+PHBhdGggZD0iTSAtMjgsMjM4IEEgMjgsMjggMCAwIDEgMjgsMjM4IiBmaWxsPSJub25lIiBzdHJva2U9IiNEOTkyMkUiIHN0cm9rZS13aWR0aD0iMS4xIiBvcGFjaXR5PSIwLjMyIi8+PHBhdGggZD0iTSAtNDAsMjM4IEEgNDAsNDAgMCAwIDEgNDAsMjM4IiBmaWxsPSJub25lIiBzdHJva2U9IiNEOTkyMkUiIHN0cm9rZS13aWR0aD0iMS4xIiBvcGFjaXR5PSIwLjE4Ii8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc2MCwwKSI+PHBhdGggZD0iTSAtNiw1MDAgTCAwLDMxMCBMIDYsNTAwIFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFCMkM0NiIgc3Ryb2tlLXdpZHRoPSIxLjYiLz48bGluZSB4MT0iLTQuOSIgeTE9IjQzMy41IiB4Mj0iNC45IiB5Mj0iNDMzLjUiIHN0cm9rZT0iIzFCMkM0NiIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iLTMuNSIgeTE9IjM4OS44IiB4Mj0iMy41IiB5Mj0iMzg5LjgiIHN0cm9rZT0iIzFCMkM0NiIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iLTIuMiIgeTE9IjM0OC4wIiB4Mj0iMi4yIiB5Mj0iMzQ4LjAiIHN0cm9rZT0iIzFCMkM0NiIgc3Ryb2tlLXdpZHRoPSIxLjIiLz48bGluZSB4MT0iLTExIiB5MT0iMzIwIiB4Mj0iMTEiIHkyPSIzMjAiIHN0cm9rZT0iIzI0Mzk1QSIgc3Ryb2tlLXdpZHRoPSIyIi8+PGxpbmUgeDE9Ii04IiB5MT0iMzMyIiB4Mj0iOCIgeTI9IjMzMiIgc3Ryb2tlPSIjMjQzOTVBIiBzdHJva2Utd2lkdGg9IjIiLz48Y2lyY2xlIGN4PSIwIiBjeT0iMzA4IiByPSIyLjYiIGZpbGw9IiNEOTkyMkUiIG9wYWNpdHk9IjAuODUiLz48cGF0aCBkPSJNIC0xNiwzMDggQSAxNiwxNiAwIDAgMSAxNiwzMDgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0Q5OTIyRSIgc3Ryb2tlLXdpZHRoPSIxLjEiIG9wYWNpdHk9IjAuNTAiLz48cGF0aCBkPSJNIC0yOCwzMDggQSAyOCwyOCAwIDAgMSAyOCwzMDgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0Q5OTIyRSIgc3Ryb2tlLXdpZHRoPSIxLjEiIG9wYWNpdHk9IjAuMzIiLz48cGF0aCBkPSJNIC00MCwzMDggQSA0MCw0MCAwIDAgMSA0MCwzMDgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0Q5OTIyRSIgc3Ryb2tlLXdpZHRoPSIxLjEiIG9wYWNpdHk9IjAuMTgiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTYwLDApIj48cGF0aCBkPSJNIC02LDUwMCBMIDAsMjYwIEwgNiw1MDAgWiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMUIyQzQ2IiBzdHJva2Utd2lkdGg9IjEuNiIvPjxsaW5lIHgxPSItNC45IiB5MT0iNDE2LjAiIHgyPSI0LjkiIHkyPSI0MTYuMCIgc3Ryb2tlPSIjMUIyQzQ2IiBzdHJva2Utd2lkdGg9IjEuMiIvPjxsaW5lIHgxPSItMy41IiB5MT0iMzYwLjgiIHgyPSIzLjUiIHkyPSIzNjAuOCIgc3Ryb2tlPSIjMUIyQzQ2IiBzdHJva2Utd2lkdGg9IjEuMiIvPjxsaW5lIHgxPSItMi4yIiB5MT0iMzA4LjAiIHgyPSIyLjIiIHkyPSIzMDguMCIgc3Ryb2tlPSIjMUIyQzQ2IiBzdHJva2Utd2lkdGg9IjEuMiIvPjxsaW5lIHgxPSItMTEiIHkxPSIyNzAiIHgyPSIxMSIgeTI9IjI3MCIgc3Ryb2tlPSIjMjQzOTVBIiBzdHJva2Utd2lkdGg9IjIiLz48bGluZSB4MT0iLTgiIHkxPSIyODIiIHgyPSI4IiB5Mj0iMjgyIiBzdHJva2U9IiMyNDM5NUEiIHN0cm9rZS13aWR0aD0iMiIvPjxjaXJjbGUgY3g9IjAiIGN5PSIyNTgiIHI9IjIuNiIgZmlsbD0iI0Q5OTIyRSIgb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik0gLTE2LDI1OCBBIDE2LDE2IDAgMCAxIDE2LDI1OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRDk5MjJFIiBzdHJva2Utd2lkdGg9IjEuMSIgb3BhY2l0eT0iMC41MCIvPjxwYXRoIGQ9Ik0gLTI4LDI1OCBBIDI4LDI4IDAgMCAxIDI4LDI1OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRDk5MjJFIiBzdHJva2Utd2lkdGg9IjEuMSIgb3BhY2l0eT0iMC4zMiIvPjxwYXRoIGQ9Ik0gLTQwLDI1OCBBIDQwLDQwIDAgMCAxIDQwLDI1OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRDk5MjJFIiBzdHJva2Utd2lkdGg9IjEuMSIgb3BhY2l0eT0iMC4xOCIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMTUwLDApIj48cGF0aCBkPSJNIC02LDUwMCBMIDAsMzQwIEwgNiw1MDAgWiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMUIyQzQ2IiBzdHJva2Utd2lkdGg9IjEuNiIvPjxsaW5lIHgxPSItNC45IiB5MT0iNDQ0LjAiIHgyPSI0LjkiIHkyPSI0NDQuMCIgc3Ryb2tlPSIjMUIyQzQ2IiBzdHJva2Utd2lkdGg9IjEuMiIvPjxsaW5lIHgxPSItMy41IiB5MT0iNDA3LjIiIHgyPSIzLjUiIHkyPSI0MDcuMiIgc3Ryb2tlPSIjMUIyQzQ2IiBzdHJva2Utd2lkdGg9IjEuMiIvPjxsaW5lIHgxPSItMi4yIiB5MT0iMzcyLjAiIHgyPSIyLjIiIHkyPSIzNzIuMCIgc3Ryb2tlPSIjMUIyQzQ2IiBzdHJva2Utd2lkdGg9IjEuMiIvPjxsaW5lIHgxPSItMTEiIHkxPSIzNTAiIHgyPSIxMSIgeTI9IjM1MCIgc3Ryb2tlPSIjMjQzOTVBIiBzdHJva2Utd2lkdGg9IjIiLz48bGluZSB4MT0iLTgiIHkxPSIzNjIiIHgyPSI4IiB5Mj0iMzYyIiBzdHJva2U9IiMyNDM5NUEiIHN0cm9rZS13aWR0aD0iMiIvPjxjaXJjbGUgY3g9IjAiIGN5PSIzMzgiIHI9IjIuNiIgZmlsbD0iI0Q5OTIyRSIgb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik0gLTE2LDMzOCBBIDE2LDE2IDAgMCAxIDE2LDMzOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRDk5MjJFIiBzdHJva2Utd2lkdGg9IjEuMSIgb3BhY2l0eT0iMC41MCIvPjxwYXRoIGQ9Ik0gLTI4LDMzOCBBIDI4LDI4IDAgMCAxIDI4LDMzOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRDk5MjJFIiBzdHJva2Utd2lkdGg9IjEuMSIgb3BhY2l0eT0iMC4zMiIvPjxwYXRoIGQ9Ik0gLTQwLDMzOCBBIDQwLDQwIDAgMCAxIDQwLDMzOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRDk5MjJFIiBzdHJva2Utd2lkdGg9IjEuMSIgb3BhY2l0eT0iMC4xOCIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzMwLDApIj48cGF0aCBkPSJNIC02LDUwMCBMIDAsMzAwIEwgNiw1MDAgWiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMUIyQzQ2IiBzdHJva2Utd2lkdGg9IjEuNiIvPjxsaW5lIHgxPSItNC45IiB5MT0iNDMwLjAiIHgyPSI0LjkiIHkyPSI0MzAuMCIgc3Ryb2tlPSIjMUIyQzQ2IiBzdHJva2Utd2lkdGg9IjEuMiIvPjxsaW5lIHgxPSItMy41IiB5MT0iMzg0LjAiIHgyPSIzLjUiIHkyPSIzODQuMCIgc3Ryb2tlPSIjMUIyQzQ2IiBzdHJva2Utd2lkdGg9IjEuMiIvPjxsaW5lIHgxPSItMi4yIiB5MT0iMzQwLjAiIHgyPSIyLjIiIHkyPSIzNDAuMCIgc3Ryb2tlPSIjMUIyQzQ2IiBzdHJva2Utd2lkdGg9IjEuMiIvPjxsaW5lIHgxPSItMTEiIHkxPSIzMTAiIHgyPSIxMSIgeTI9IjMxMCIgc3Ryb2tlPSIjMjQzOTVBIiBzdHJva2Utd2lkdGg9IjIiLz48bGluZSB4MT0iLTgiIHkxPSIzMjIiIHgyPSI4IiB5Mj0iMzIyIiBzdHJva2U9IiMyNDM5NUEiIHN0cm9rZS13aWR0aD0iMiIvPjxjaXJjbGUgY3g9IjAiIGN5PSIyOTgiIHI9IjIuNiIgZmlsbD0iI0Q5OTIyRSIgb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik0gLTE2LDI5OCBBIDE2LDE2IDAgMCAxIDE2LDI5OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRDk5MjJFIiBzdHJva2Utd2lkdGg9IjEuMSIgb3BhY2l0eT0iMC41MCIvPjxwYXRoIGQ9Ik0gLTI4LDI5OCBBIDI4LDI4IDAgMCAxIDI4LDI5OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRDk5MjJFIiBzdHJva2Utd2lkdGg9IjEuMSIgb3BhY2l0eT0iMC4zMiIvPjxwYXRoIGQ9Ik0gLTQwLDI5OCBBIDQwLDQwIDAgMCAxIDQwLDI5OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRDk5MjJFIiBzdHJva2Utd2lkdGg9IjEuMSIgb3BhY2l0eT0iMC4xOCIvPjwvZz4KPC9zdmc+");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}
.page-hero > .wrap{ min-width:0; width:100%; }
.breadcrumb{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color: var(--muted-on-dark); display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap; min-width:0; max-width:100%; }
.breadcrumb > span, .breadcrumb > a{ min-width:0; }
.breadcrumb a:hover{ color: var(--amber); }
.page-hero .h-page{ color: var(--text-on-dark); max-width: 820px; margin-top:12px; overflow-wrap:break-word; }
.page-hero p.lede{ margin-top:16px; }
.corner-tag{ display:none; }
@media (max-width: 480px) and (max-height: 760px){
  .page-hero{ padding: 26px 0; }
}

.lang-switch{
  display:flex; align-items:center; gap:1px; font-family:var(--mono); flex:0 0 auto;
  border:1px solid var(--paper-line); border-radius:100px; padding:3px;
  background: var(--paper-2);
  box-shadow: inset 0 1px 2px rgba(11,21,38,0.10);
}
.lang-switch span{ display:none; }
.lang-btn{
  background:transparent; border:none; cursor:pointer; font-family:var(--mono);
  font-size:11px; letter-spacing:.04em; color:var(--muted);
  padding:5px 12px; border-radius:100px; transition:all .15s ease;
}
.lang-btn:hover:not(.active){ color:var(--text); }
.lang-btn.active{
  background: var(--text); color: var(--paper); font-weight:600;
  box-shadow: 0 1px 3px rgba(11,21,38,0.35);
}
.on-dark .lang-switch, section.hero .lang-switch{ border-color: var(--ink-line); background: rgba(238,241,237,0.06); box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); }
.on-dark .lang-btn, section.hero .lang-btn{ color: var(--muted-on-dark); }
.on-dark .lang-btn.active, section.hero .lang-btn.active{ background: var(--amber); color:#141008; box-shadow:0 1px 3px rgba(0,0,0,0.35); }
@media (max-width:1200px){ header.site > .wrap.nav > .lang-switch{ display:none; } }

/* Institution badges ("Methodologies aligned with" row on the homepage) —
   deliberately NOT the institutions' official logos (World Bank, IDB, CAF,
   ITU, PMI, DFC, USTDA haven't endorsed or partnered with INA, and their
   marks are trademarked/brand-guideline-restricted) — a plain-text
   acronym pill in INA's own visual language instead, using the same amber
   dot motif as the logo mark and the same pill shape as .lang-switch. */
.method-badges{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.method-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 15px; border:1px solid var(--paper-line); border-radius:100px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.03em; color:var(--text);
  background: var(--paper-2);
  white-space:nowrap;
}
.method-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--amber); flex:0 0 auto; }

/* ---------- Section shells ---------- */
section{ padding: 108px 0; }
section.on-dark{ background: var(--ink); color: var(--text-on-dark); }
section.tight{ padding: 72px 0; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px; flex-wrap:wrap; }
.section-head h2{ margin-top:14px; max-width: 620px; }
.section-head .side{ max-width:360px; padding-bottom:4px; }
hr.rule{ border:none; border-top:1px solid var(--paper-line); }
.on-dark hr.rule{ border-top:1px solid var(--ink-line); }

/* ---------- Who we serve ---------- */
.audience-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: var(--paper-line); border:1px solid var(--paper-line); }
.audience-card{ background: var(--paper); padding: 30px 26px; display:flex; flex-direction:column; gap:16px; min-height: 300px; }
.audience-card .idx{ font-family:var(--mono); font-size:11px; color:var(--amber-deep); letter-spacing:.08em; }
.audience-card h3{ font-size:19px; }
.audience-card ul{ margin-top:auto; display:flex; flex-direction:column; gap:8px; }
.audience-card ul li{ font-size:13.5px; color: var(--muted); border-top:1px solid var(--paper-line); padding-top:8px; }
@media (max-width:920px){ .audience-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:560px){ .audience-grid{ grid-template-columns: 1fr;} }

/* ---------- Positioning / Why ---------- */
.position-wrap{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items:center; }
.domain-cluster{ position:relative; height: 340px; }
.domain-node{
  position:absolute; border:1px solid var(--paper-line); background:var(--paper);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
  padding:10px 14px; border-radius:100px; color:var(--muted);
}
.domain-node.center{
  left:50%; top:50%; transform:translate(-50%,-50%);
  background: var(--ink); color: var(--amber); border-color:var(--ink);
  font-family: var(--serif); font-style:italic; text-transform:none; font-size:16px; padding:20px 26px;
  border-radius: 8px; text-align:center; width: 220px;
}
.domain-node.n1{ left:6%; top:8%; } .domain-node.n2{ right:2%; top:14%; }
.domain-node.n3{ left:2%; bottom:10%; } .domain-node.n4{ right:6%; bottom:6%; }
.domain-svg{ position:absolute; inset:0; z-index:0; }
.not-list li{ font-size:14.5px; color:var(--muted); padding: 9px 0; border-top:1px solid var(--paper-line); }
.not-list li:first-child{ border-top:none; }
.not-list li b{ color:var(--text); font-weight:500; }
@media (max-width:900px){ .position-wrap{ grid-template-columns:1fr; } .domain-cluster{ height:280px; } }
@media (max-width:640px){
  .domain-cluster{ height:auto; display:flex; flex-direction:column; align-items:stretch; gap:10px; margin-top:20px; }
  .domain-svg{ display:none; }
  .domain-node{ position:static; text-align:center; width:auto !important; left:auto; right:auto; top:auto; bottom:auto; transform:none; }
  .domain-node.center{ order:-1; margin:0 0 6px; }
}

/* ---------- Frameworks (teaser cards, dark) ---------- */
.fw-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background:var(--ink-line); border:1px solid var(--ink-line); }
.fw-card{ background: var(--ink); padding:32px 28px; min-height: 300px; display:flex; flex-direction:column; transition: background .2s ease; }
.fw-card.linkable:hover{ background: var(--ink-3); }
.fw-card .fnum{ font-family:var(--serif); font-style:italic; font-size:34px; color: var(--amber); }
.fw-card h3{ margin-top:18px; font-size:19px; color: var(--text-on-dark); line-height:1.28; }
.fw-card .purpose{ margin-top:10px; font-size:13.5px; color: var(--muted-on-dark); }
.fw-card .tags{ margin-top:auto; display:flex; flex-wrap:wrap; gap:6px; padding-top:18px; }
.fw-card .tags span{ font-family:var(--mono); font-size:10.5px; border:1px solid var(--ink-line); color:var(--muted-on-dark); padding:4px 8px; border-radius:100px; text-transform:uppercase; letter-spacing:.04em; }
.fw-card .goto{ margin-top:14px; font-family:var(--mono); font-size:11px; color:var(--amber); text-transform:uppercase; letter-spacing:.05em; }
@media (max-width:920px){ .fw-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .fw-grid{ grid-template-columns:1fr;} }

.workflow{ margin-top: 64px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; row-gap:20px; column-gap:0; }
.wf-step{ display:inline-flex; align-items:center; flex:0 0 auto; }
.wf-node{ font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--text); line-height:1.3;
  border:1px solid var(--amber-deep); border-radius:100px; padding:7px 11px; white-space:nowrap; flex:0 0 auto; background:var(--paper); }
.on-dark .wf-node{ color:var(--text-on-dark); border-color:var(--amber); background:transparent; }
.wf-arrow{ color: var(--muted); padding:0 5px; flex:0 0 auto; line-height:1; }
.on-dark .wf-arrow{ color: var(--muted-on-dark); }
@media (max-width:600px){ .wf-node{ font-size:9px; padding:6px 10px; } }

/* ---------- Industries ---------- */
.industry-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); }
.industry-card{ background:var(--paper); padding: 26px 20px; display:flex; flex-direction:column; gap:16px; min-height:150px; transition: background .2s ease; }
.industry-card:hover{ background: var(--paper-2); }
.industry-card svg{ width:26px; height:26px; color: var(--amber-deep); }
.industry-card span{ font-size:13.5px; font-weight:500; line-height:1.3; }
@media (max-width:920px){ .industry-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){ .industry-grid{ grid-template-columns:repeat(2,1fr);} }

.industry-detail-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); }
.industry-detail{ background:var(--paper); padding:34px 30px; display:flex; gap:22px; }
.industry-detail svg{ width:30px;height:30px; color:var(--amber-deep); flex:0 0 auto; }
.industry-detail h3{ font-size:19px; margin-bottom:8px; }
.industry-detail p{ font-size:14px; color:var(--muted); margin:0; }
@media (max-width:800px){ .industry-detail-grid{ grid-template-columns:1fr; } }

/* ---------- Services ---------- */
.service-list{ display:flex; flex-direction:column; }
.service-row{ display:grid; grid-template-columns: 60px 1fr 200px; gap:20px; align-items:center; padding:26px 0; border-top:1px solid var(--paper-line); }
.service-row:last-child{ border-bottom:1px solid var(--paper-line); }
.service-row .si{ font-family:var(--mono); font-size:12px; color:var(--amber-deep); }
.service-row h4{ font-family:var(--serif); font-weight:500; font-size:20px; }
.service-row p{ font-size:13.5px; color:var(--muted); margin-top:4px; max-width:520px; }
.service-row .arrow{ justify-self:end; font-family:var(--mono); font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.service-row:hover .arrow{ color: var(--amber-deep); }
@media (max-width:700px){ .service-row{ grid-template-columns: 40px 1fr; } .service-row .arrow{ display:none; } }

.service-detail{ padding: 56px 0; border-top:1px solid var(--paper-line); }
.service-detail:first-of-type{ border-top:none; }
.service-detail-grid{ display:grid; grid-template-columns: 280px 1fr; gap:50px; }
.service-detail .si-big{ font-family:var(--serif); font-style:italic; font-size:52px; color: var(--amber-deep); }
.service-detail h3{ font-size:26px; margin-top:8px; }
.service-detail ul.checks{ margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.service-detail ul.checks li{ font-size:14px; color:var(--muted); padding-left:22px; position:relative; }
.service-detail ul.checks li::before{ content:"—"; position:absolute; left:0; color:var(--amber-deep); }
@media (max-width:800px){ .service-detail-grid{ grid-template-columns:1fr; gap:20px; } }

/* ---------- Finance ---------- */
.finance-wrap{ display:grid; grid-template-columns: .9fr 1.1fr; gap:60px; }
.finance-list{ display:grid; grid-template-columns:1fr 1fr; gap: 14px 24px; }
.finance-list li{ font-size:14px; padding:12px 0 12px 20px; border-left:2px solid var(--paper-line); color:var(--muted); position:relative; }
.finance-list li b{ color:var(--text); display:block; font-weight:500; font-family:var(--serif); font-size:15.5px; }
@media (max-width:900px){ .finance-wrap{ grid-template-columns:1fr; } .finance-list{ grid-template-columns:1fr; } }

/* ---------- Knowledge ---------- */
.knowledge-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
.k-card{ border:1px solid var(--paper-line); padding:24px 22px; background:var(--paper); display:flex; flex-direction:column; gap:36px; min-height:190px; }
.k-card .kicon{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--amber-deep); }
.k-card h4{ font-family:var(--serif); font-weight:500; font-size:18px; }
.k-card .kfoot{ margin-top:auto; font-family:var(--mono); font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
@media (max-width:920px){ .knowledge-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .knowledge-grid{ grid-template-columns:1fr;} }

.kcat{ margin-bottom:70px; }
.kcat-head{ display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--paper-line); padding-bottom:14px; margin-bottom:26px; }
.kcat-head h3{ font-size:20px; }
.kcat-head span{ font-family:var(--mono); font-size:11px; color:var(--muted); text-transform:uppercase; }

/* ---------- Platform / roadmap ---------- */
.roadmap{ display:grid; grid-template-columns: repeat(5,1fr); gap:1px; background: var(--ink-line); border:1px solid var(--ink-line); margin-top: 60px; }
.stage{ background: var(--ink); padding:22px 18px; min-height:210px; position:relative; }
.stage.active{ background: var(--ink-3); }
.stage .sn{ font-family:var(--mono); font-size:11px; color:var(--amber); }
.stage h4{ font-family:var(--serif); font-size:15.5px; color:var(--text-on-dark); margin-top:12px; line-height:1.3; }
.stage ul{ margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.stage ul li{ font-size:11.5px; color:var(--muted-on-dark); }
.stage .badge{ position:absolute; top:18px; right:16px; font-family:var(--mono); font-size:9px; background:var(--amber); color:#141008; padding:3px 7px; border-radius:100px; letter-spacing:.05em; }
@media (max-width:920px){ .roadmap{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .roadmap{ grid-template-columns:1fr;} }

.platform-note{ margin-top:56px; border:1px dashed var(--paper-line); padding:34px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.platform-note p{ color: var(--muted); max-width:560px; font-size:14.5px; margin:0; }
.on-dark .platform-note{ border-color: var(--ink-line); }
.on-dark .platform-note p{ color: var(--muted-on-dark); }

/* ---------- Contact ---------- */
.contact-wrap{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 60px; }
.contact-info h2{ margin-top:14px; }
.contact-info .ci-row{ margin-top:34px; padding-top:18px; border-top:1px solid var(--paper-line); }
.contact-info .ci-row:first-child{ margin-top:0; padding-top:0; border-top:none; }
.contact-info .ci-row .lab{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--amber-deep); }
.contact-info .ci-row .val{ margin-top:6px; font-size:15px; }
form.advisory{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
form.advisory .full{ grid-column: 1 / -1; }
.field label{ display:block; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; border:none; border-bottom:1px solid var(--paper-line); background:transparent;
  font-family: var(--sans); font-size:15px; padding:10px 2px; color:var(--text);
}
.field textarea{ resize:vertical; min-height:90px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-bottom-color: var(--amber); }
.contact-note{ font-size:12.5px; color:var(--muted); margin-top:6px; }
@media (max-width:900px){ .contact-wrap{ grid-template-columns:1fr; } form.advisory{ grid-template-columns:1fr; } }

/* ---------- Contact — "Request Advisory" fits one screen, no scrolling ----------
   Previously this page had a full-viewport dark .page-hero (heading only)
   followed by a SEPARATE section with the form below the fold — always
   required scrolling to reach the form, and repeated the "Start a
   professional engagement" heading twice (once in the hero, again atop the
   form column). Folded into one section instead: heading + form together,
   vertically centered in the remaining viewport height below the fixed
   header (73px), same min-height technique already used for .hero/.page-hero
   elsewhere. clamp() on the internal spacing (rather than fixed px) lets it
   breathe on tall screens but tighten automatically on shorter ones, instead
   of a fixed guess that only fits one specific screen size. */
.contact-onepage{
  min-height: calc(100vh - 73px);
  min-height: calc(100dvh - 73px);
  display:flex; align-items:center;
  padding: clamp(24px,5vh,64px) 0;
}
.contact-onepage .wrap{ width:100%; }
.contact-head{ margin-bottom: clamp(20px,3.5vh,36px); }
/* .breadcrumb's default color (--muted-on-dark) is tuned for the dark
   .page-hero background it normally lives inside — too low-contrast here
   now that it sits directly on the page's light background instead. */
.contact-head .breadcrumb{ color: var(--muted); margin-bottom:14px; }
.contact-head .breadcrumb a:hover{ color: var(--amber-deep); }
.contact-onepage .contact-info .ci-row{ margin-top: clamp(14px,2.2vh,28px); padding-top: clamp(10px,1.6vh,16px); }
.contact-onepage form.advisory{ gap: clamp(14px,2vh,22px); }
.contact-onepage .field label{ margin-bottom: clamp(4px,0.8vh,8px); }
.contact-onepage .field textarea{ min-height: clamp(56px,9vh,90px); }
/* Below ~900px wide, contact-wrap/form.advisory both collapse to a single
   column (existing rule above) — the form gets visibly taller (every field
   stacks) at the same time the viewport is usually a phone/tablet in
   portrait, so guaranteeing zero scroll there isn't realistic. Let it grow
   past the viewport and scroll normally rather than compressing fields to
   the point of being unreadable/hard to tap. */
@media (max-width:900px){ .contact-onepage{ min-height:auto; } }

/* ---------- Advisory Board ---------- */
/* Two columns by default — with a small, fixed roster (4 profiles today)
   this reads as a clean, balanced 2x2 rather than leaving an orphan card
   dangling in a third column. Falls back to one column on narrow screens. */
.board-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:1px; background: var(--paper-line); border:1px solid var(--paper-line); margin-top:30px; }
.board-card{
  background: var(--paper); padding: 36px 34px; display:flex; flex-direction:row; align-items:flex-start;
  gap:22px; min-height:180px; border:1px dashed transparent; transition: background .15s ease;
}
.board-card:hover{ background: var(--paper-2); }
.board-card.placeholder{ border-color: var(--paper-line); }
.board-avatar{
  width:88px; height:88px; border-radius:50%; flex:0 0 auto;
  background: var(--paper-2); border:1px dashed var(--muted);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--muted); text-transform:uppercase;
  overflow:hidden;
}
/* Real headshot instead of the "IMG" text placeholder — drop the dashed
   placeholder border/background once there's an actual photo to show. */
.board-avatar.has-photo{ border-style:solid; border-color:var(--paper-line); }
.board-avatar img{ width:100%; height:100%; object-fit:cover; }
.board-card-body{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.board-card h3{ font-size:19px; color:var(--text); }
.board-card .role{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--amber-deep); margin-top:-6px; display:block; }
.board-card .bio{ font-size:13.5px; color:var(--muted); line-height:1.55; }
@media (max-width:760px){
  .board-grid{ grid-template-columns: 1fr; }
  .board-card{ flex-direction:column; padding:28px 26px; }
}

/* ---------- INA Platform (auth, dashboard, projects) ---------- */
.auth-wrap{ max-width:460px; margin:0 auto; }
.auth-card{ border:1px solid var(--paper-line); background:var(--paper); padding:40px 36px; }
.auth-card .field select{
  width:100%; border:none; border-bottom:1px solid var(--paper-line); background:transparent;
  font-family:var(--sans); font-size:15px; padding:8px 0; color:var(--text);
}
.auth-card .field select:focus{ outline:none; border-bottom-color:var(--amber); }
.auth-card button[disabled]{ opacity:.5; cursor:not-allowed; }

.platform-header{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:32px; }
.platform-header .who{ font-size:13.5px; color:var(--muted); margin-top:6px; }

.advisor-banner{
  display:flex; align-items:center; gap:10px; padding:12px 18px; margin-bottom:24px;
  background:var(--amber-soft); border:1px solid var(--amber); color:var(--amber-deep);
  font-size:12.5px; flex-wrap:wrap;
}

/* ---------- Dashboard stat strip ---------- */
.dash-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--paper-line); border:1px solid var(--paper-line); margin-bottom:28px;
}
.dash-stat{ background:var(--paper); padding:20px 22px; }
.dash-stat .dsn{ font-family:var(--serif); font-style:italic; font-size:32px; color:var(--amber-deep); line-height:1; }
.dash-stat .dsl{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:9px; }
.dash-stat.is-attention .dsn{ color:#b23b3b; }
@media (max-width:760px){ .dash-stats{ grid-template-columns:repeat(2,1fr); } }

.filter-bar{
  display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end;
  padding:20px 22px; background:var(--paper-2); border:1px solid var(--paper-line);
  border-top:2px solid var(--ink); margin-bottom:20px;
}
.filter-bar .ffield{ display:flex; flex-direction:column; gap:6px; }
.filter-bar label{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.filter-bar select, .filter-bar input{
  border:1px solid var(--paper-line); background:var(--paper); font-family:var(--sans);
  font-size:13px; padding:8px 10px; color:var(--text); min-width:150px; transition:border-color .15s ease;
}
.filter-bar input[type="search"]{ min-width:200px; }
.filter-bar select:focus, .filter-bar input:focus{ outline:none; border-color:var(--amber); }
.filter-bar select:hover, .filter-bar input:hover{ border-color:var(--muted); }
.filter-bar .fclear{
  background:none; border:none; color:var(--muted); font-size:12.5px; cursor:pointer;
  text-decoration:underline; padding-bottom:9px; white-space:nowrap; transition:color .15s ease;
}
.filter-bar .fclear:hover{ color:var(--amber-deep); }
.filter-count{ font-size:12.5px; color:var(--muted); margin:0; }
.filter-count-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
/* ---------- List/Grid view toggle (dashboard.html) ---------- */
.view-toggle{ display:flex; border:1px solid var(--paper-line); }
.view-toggle-btn{
  display:flex; align-items:center; justify-content:center; width:32px; height:30px;
  background:var(--paper); border:none; color:var(--muted); cursor:pointer;
  transition: background-color .15s ease, color .15s ease;
}
.view-toggle-btn:not(:last-child){ border-right:1px solid var(--paper-line); }
.view-toggle-btn svg{ width:15px; height:15px; }
.view-toggle-btn:hover{ color:var(--amber-deep); }
.view-toggle-btn.active{ background:var(--ink); color:var(--amber); }

.project-list{ display:flex; flex-direction:column; gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); }
.project-row{
  background:var(--paper); padding:18px 24px; display:grid;
  grid-template-columns: 1fr 100px auto 170px auto; gap:18px; align-items:center;
  border-left:3px solid transparent; transition: background-color .15s ease, border-left-color .15s ease;
}
.project-row:hover{ background:var(--paper-2); }
.project-row[data-accent="progress"]{ border-left-color: var(--amber); }
.project-row[data-accent="ready"]{ border-left-color: var(--ink); }
.project-row[data-accent="attention"]{ border-left-color: #b23b3b; }
.project-row[data-accent="neutral"]{ border-left-color: var(--paper-line); }
.project-row .main{ display:flex; align-items:flex-start; gap:12px; min-width:0; }
.project-row .ptype-icon{
  width:32px; height:32px; flex:0 0 auto; border:1px solid var(--paper-line); background:var(--paper-2);
  display:flex; align-items:center; justify-content:center; color:var(--amber-deep);
}
.project-row .ptype-icon svg{ width:15px; height:15px; }
.project-row .maintext{ min-width:0; }
.project-row .pname{ font-size:15.5px; font-weight:500; overflow-wrap:break-word; }
.project-row .pmeta{ font-size:12.5px; color:var(--muted); margin-top:4px; }
/* Score badges (Self-Assessment / AI Analysis / FSU Scoring) shown under a
   project row's name+type line on dashboard.html — see scoreBadgesHtml()
   there. All three are colored by their SCORE, not by which of the three
   they are — every badge gets one of the .stage-* modifiers below (via
   INAPlatform.scoreBandClass()) so a 20/100 reads as "needs work" and an
   85/100 reads as "strong" the same way regardless of whether it's a
   Self-Assessment, an AI Analysis or an FSU Scoring — the exact same
   0-25/25-50/50-75/75-100 bands and colors as .status-pill.stage-*. The
   "Auto"/"IA"/"FSU" label text is what tells the three metrics apart, not
   the color. */
.score-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.score-badge{
  font-family:var(--mono); font-size:10px; letter-spacing:.02em; white-space:nowrap;
  padding:3px 8px; border-radius:100px; line-height:1.3;
  background:var(--paper-2); color:var(--muted); border:1px solid var(--paper-line); /* fallback if no band resolves */
}
.score-badge i{ font-style:normal; opacity:.65; margin-left:1px; }
.score-badge.stage-concept{ background:var(--paper-2); color:var(--muted); border:1px solid var(--paper-line); }
.score-badge.stage-early{ background:var(--amber-soft); color:var(--amber-deep); border:1px solid var(--amber); }
.score-badge.stage-advanced{ background:var(--amber); color:var(--ink); border:1px solid var(--amber-deep); }
.score-badge.stage-ready{ background:var(--ink); color:var(--amber); border:1px solid var(--ink); }

/* Budget/duration/complexity/technical-criticality tags — see attrTagsHtml()
   in dashboard.html. Plain-text tags for budget/duration; complexity and
   technical criticality additionally get a .tier-pill low/medium/high color
   (same 3-tier convention as .score-badge.stage-*, just reusing muted/amber/
   ink instead of the 4-band score scale, since these are a 3-tier scale). */
.attr-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.attr-tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.02em; white-space:nowrap;
  padding:3px 8px; border-radius:100px; line-height:1.3;
  background:var(--paper-2); color:var(--muted); border:1px solid var(--paper-line);
}
.attr-tag.tier-pill.tier-low{ background:var(--paper-2); color:var(--muted); border:1px solid var(--paper-line); }
.attr-tag.tier-pill.tier-medium{ background:var(--amber-soft); color:var(--amber-deep); border:1px solid var(--amber); }
.attr-tag.tier-pill.tier-high{ background:var(--ink); color:var(--amber); border:1px solid var(--ink); }

/* ---------- Risk Matrix (app/risk-matrix.html + the summary card on
   project.html) — see migration_v41_project_risks.sql. Same 4-band ramp
   as .score-badge.stage-* (neutral → amber-soft → amber → ink), reused
   here for probability×impact severity instead of readiness stage, so the
   whole platform keeps one consistent "how alarmed should you be" color
   language rather than introducing a separate red/green traffic-light
   palette that doesn't exist anywhere else in the site's ink/paper/amber
   system. */
.risk-badge{
  display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:12px;
  letter-spacing:.02em; white-space:nowrap; padding:6px 13px; border-radius:100px; line-height:1.3;
  background:var(--paper-2); color:var(--muted); border:1px solid var(--paper-line); font-weight:600;
}
.risk-badge.band-low{ background:var(--paper-2); color:var(--muted); border:1px solid var(--paper-line); }
.risk-badge.band-medium{ background:var(--amber-soft); color:var(--amber-deep); border:1px solid var(--amber); }
.risk-badge.band-high{ background:var(--amber); color:var(--ink); border:1px solid var(--amber-deep); }
.risk-badge.band-critical{ background:var(--ink); color:var(--amber); border:1px solid var(--ink); }

.risk-summary{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; max-width:600px; }
.risk-summary-card{
  padding:20px 16px; border-radius:12px; text-align:center;
  background:var(--paper-2); border:1px solid var(--paper-line);
}
.risk-summary-card.band-low{ background:var(--paper-2); border-color:var(--paper-line); }
.risk-summary-card.band-medium{ background:var(--amber-soft); border-color:var(--amber); }
.risk-summary-card.band-high{ background:rgba(217,146,46,.35); border-color:var(--amber-deep); }
.risk-summary-card.band-critical{ background:var(--ink); border-color:var(--ink); }
.risk-summary-card.band-critical .risk-summary-count,
.risk-summary-card.band-critical .risk-summary-label{ color:var(--amber); }
.risk-summary-count{ font-family:var(--serif); font-style:italic; font-size:32px; color:var(--text); line-height:1; }
.risk-summary-label{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-top:8px; }
@media (max-width:520px){ .risk-summary{ grid-template-columns:repeat(2, 1fr); max-width:none; } }

.risk-top-card{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:13px; color:var(--text);
  padding:10px 14px; background:var(--paper-2); border:1px solid var(--paper-line); border-radius:8px;
}

/* app/risk-matrix.html list + modal form */
.risk-table{ width:100%; border-collapse:collapse; font-size:13px; }
.risk-table th{
  font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--paper-line); white-space:nowrap;
}
.risk-table td{ padding:12px; border-bottom:1px solid var(--paper-line); vertical-align:middle; }
.risk-table tr.risk-row:hover td{ background:var(--paper-2); }

.risk-form-overlay{
  position:fixed; inset:0; background:rgba(11,21,38,.55); z-index:60;
  display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto;
}
.risk-form-panel{
  background:var(--paper); border-radius:14px; padding:30px; width:100%; max-width:560px;
  box-shadow:0 20px 60px rgba(11,21,38,.35);
}
.risk-form-panel .field{ margin-bottom:16px; }

/* ---------- Grid/card layout (dashboard.html "Grid view") ----------
   Alternative to .project-list/.project-row above — same data, same
   accent-border/actions, just arranged as a self-contained card in a
   responsive grid instead of a wide row of columns. Toggled via
   .view-toggle-btn / setViewMode() in dashboard.html. */
.project-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
.project-card{
  background:var(--paper); border:1px solid var(--paper-line); padding:18px;
  border-left:3px solid transparent; display:flex; flex-direction:column; gap:12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.project-card:hover{ box-shadow:0 2px 10px rgba(11,21,38,.06); }
.project-card[data-accent="progress"]{ border-left-color: var(--amber); }
.project-card[data-accent="ready"]{ border-left-color: var(--ink); }
.project-card[data-accent="attention"]{ border-left-color: #b23b3b; }
.project-card[data-accent="neutral"]{ border-left-color: var(--paper-line); }
.project-card .pc-main{ display:block; color:inherit; text-decoration:none; }
.project-card .pc-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.project-card .pname{ font-size:15px; font-weight:500; overflow-wrap:break-word; }
.project-card .pmeta{ font-size:12.5px; color:var(--muted); margin-top:4px; }
.project-card .pc-footer{
  display:flex; align-items:center; gap:9px; color:inherit; text-decoration:none;
  padding-top:12px; border-top:1px solid var(--paper-line); font-size:12.5px; color:var(--text);
}
.project-card .pc-footer .pc-owner-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.project-card .pc-footer .pc-date{ color:var(--muted); white-space:nowrap; }
.project-card .icon-action-group{ justify-self:auto; justify-content:flex-end; }
@media (max-width:520px){ .project-grid{ grid-template-columns:1fr; } }
.project-row .powner{ font-size:12.5px; color:var(--text); display:flex; align-items:center; gap:9px; justify-content:flex-end; }
.project-row .powner .mini-avatar{
  width:26px; height:26px; border-radius:50%; background:var(--amber); color:var(--ink); flex:0 0 auto;
  font-family:var(--serif); font-weight:600; font-size:11px; display:flex; align-items:center; justify-content:center;
}
.project-row .powner .otext{ text-align:left; min-width:0; }
.project-row .powner .oorg{ display:block; font-size:11px; color:var(--muted); margin-top:1px; }
/* ---------- Compact grouped icon actions (edit + delete side by side) ----------
   Shared between dashboard.html's project rows and programs.html's program
   cards, so "edit" and "delete" always read as one tight action pair
   instead of two icons scattered across a wider layout. */
.icon-action-group{ justify-self:end; display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:2px; }
.icon-btn{
  display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:7px; color:var(--muted); font-size:14px; line-height:1;
  background:none; border:none; cursor:pointer; text-decoration:none;
  transition: background-color .15s ease, color .15s ease;
}
.icon-btn:hover{ background:var(--paper-2); color:var(--amber-deep); }
.icon-btn.icon-btn-delete:hover{ background:#f4d9d9; color:#a13a3a; }
.status-pill{
  font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
  padding:5px 12px; border-radius:100px; white-space:nowrap; text-align:center;
}
.status-pill.submitted{ background:var(--paper-2); color:var(--muted); border:1px solid var(--paper-line); }
.status-pill.analyzing{ background:var(--amber-soft); color:var(--amber-deep); border:1px solid var(--amber); }
.status-pill.completed{ background:var(--ink); color:var(--amber); border:1px solid var(--ink); }
.status-pill.error{ background:#f4d9d9; color:#a13a3a; border:1px solid #d99; }
/* Framework-derived stage pills — replace the generic "Completed" pill once
   an analysis finishes, so status reflects Investment Readiness Index™. */
.status-pill.stage-concept{ background:var(--paper-2); color:var(--muted); border:1px solid var(--paper-line); }
.status-pill.stage-early{ background:var(--amber-soft); color:var(--amber-deep); border:1px solid var(--amber); }
.status-pill.stage-advanced{ background:var(--amber); color:var(--ink); border:1px solid var(--amber-deep); }
.status-pill.stage-ready{ background:var(--ink); color:var(--amber); border:1px solid var(--ink); }
/* Roadmaps checklist status pills — see the Roadmaps block in
   app/project.html and supabase/migration_v26_gestion_templates.sql. */
.status-pill.roadmap-status-pending{ background:var(--paper-2); color:var(--muted); border:1px solid var(--paper-line); }
.status-pill.roadmap-status-in_progress{ background:var(--amber-soft); color:var(--amber-deep); border:1px solid var(--amber); }
.status-pill.roadmap-status-completed{ background:var(--ink); color:var(--amber); border:1px solid var(--ink); }
.status-pill.roadmap-status-blocked{ background:#f4d9d9; color:#a13a3a; border:1px solid #d99; }
.empty-state{ padding:64px 30px; text-align:center; border:1px dashed var(--paper-line); color:var(--muted); }
.empty-state .ei{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--paper-line); background:var(--paper-2);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px; color:var(--amber-deep);
}
.empty-state .ei svg{ width:22px; height:22px; }
@media (max-width:900px){ .project-row{ grid-template-columns:1fr 100px auto auto; } .project-row .powner{ display:none; } }
@media (max-width:700px){
  .project-row{ grid-template-columns:1fr; gap:10px; }
  .project-row .icon-action-group{ justify-self:start; }
}

/* ---------- Manual self-assessment questionnaire (Likert scale) ---------- */
.assess-progress{
  font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); padding:12px 0; position:sticky; top:0; background:var(--paper); z-index:2;
  border-bottom:1px solid var(--paper-line); margin-bottom:8px;
}
.assess-progress b{ color:var(--amber-deep); }
.assess-dim{ margin-top:24px; }
.assess-dim h4{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--amber-deep); }
.assess-dim .adnum{ color:var(--muted); margin-right:6px; }
.likert-q{ margin-top:20px; padding-top:20px; border-top:1px solid var(--paper-line); }
.likert-q:first-of-type{ margin-top:16px; padding-top:0; border-top:none; }
.likert-qtext{ font-size:13.5px; color:var(--text); max-width:560px; }
.likert-scale{ display:flex; gap:8px; margin-top:12px; }
.likert-opt{ position:relative; display:block; }
.likert-opt input{ position:absolute; inset:0; opacity:0; width:36px; height:36px; margin:0; cursor:pointer; }
.likert-opt span{
  display:flex; align-items:center; justify-content:center; width:36px; height:36px;
  border:1px solid var(--paper-line); border-radius:50%; font-family:var(--mono); font-size:13px;
  color:var(--muted); background:var(--paper); transition:all .15s ease; pointer-events:none;
}
.likert-opt input:hover + span{ border-color:var(--amber); color:var(--amber-deep); }
.likert-opt input:checked + span{ background:var(--amber); border-color:var(--amber-deep); color:var(--ink); font-weight:600; }
.likert-opt input:focus-visible + span{ outline:2px solid var(--amber-deep); outline-offset:2px; }
.likert-caption{
  display:flex; justify-content:space-between; margin-top:6px; font-size:10.5px; color:var(--muted);
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.04em; max-width:216px;
}

/* ---------- Guided project-submission templates (app/project-template.html) ---------- */
.tmpl-section{ margin-top:32px; padding-top:24px; border-top:1px solid var(--paper-line); }
.tmpl-section:first-of-type{ margin-top:0; padding-top:0; border-top:none; }
.tmpl-section h3{
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--amber-deep); margin-bottom:16px;
}
.tmpl-fields{ display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; }
@media (max-width:700px){ .tmpl-fields{ grid-template-columns:1fr; } }

/* Print / Save-as-PDF view for a filled-in template (app/project-template.html).
   Hidden on screen; only #tplPrintView is shown when the browser print dialog runs. */
.print-only{ display:none; }
@media print{
  body *{ visibility:hidden; }
  #tplPrintView, #tplPrintView *{ visibility:visible; }
  #tplPrintView{
    display:block; position:absolute; top:0; left:0; width:100%;
    padding:0; margin:0; color:#000; background:#fff; font-family:var(--sans, Arial, sans-serif);
  }
  .p-header{
    display:flex; justify-content:space-between; align-items:flex-end;
    border-bottom:2px solid #000; padding-bottom:10px; margin-bottom:20px;
  }
  .p-brand{ font-weight:700; font-size:14px; letter-spacing:.04em; text-transform:uppercase; }
  .p-date{ font-size:11px; color:#333; }
  #tplPrintView h1{ font-size:19px; margin:0 0 4px; }
  .p-project{ font-size:12px; color:#333; margin:0 0 18px; }
  #tplPrintView h3{
    font-size:12px; text-transform:uppercase; letter-spacing:.05em;
    margin:22px 0 10px; padding-bottom:4px; border-bottom:1px solid #999;
  }
  .p-field{ margin-bottom:10px; page-break-inside:avoid; }
  .p-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:#555; margin:0 0 2px; }
  .p-value{ font-size:12.5px; margin:0; white-space:pre-wrap; }
  .p-notes{ margin-top:22px; }
}

/* ---------- Admin: user management panel ---------- */
.mini-avatar{
  width:26px; height:26px; border-radius:50%; background:var(--amber); color:var(--ink); flex:0 0 auto;
  font-family:var(--serif); font-weight:600; font-size:11px; display:flex; align-items:center; justify-content:center;
}
.user-row{
  background:var(--paper); padding:16px 24px; display:grid;
  grid-template-columns: 1.4fr 1fr 130px 170px; gap:16px; align-items:center;
}
.user-row:hover{ background:var(--paper-2); }
.user-row .uwho{ display:flex; align-items:center; gap:12px; min-width:0; }
.user-row .utext{ min-width:0; }
.user-row .uname{ font-size:14.5px; font-weight:500; overflow-wrap:break-word; }
.user-row .uemail{ font-size:12px; color:var(--muted); margin-top:2px; overflow-wrap:break-word; }
.user-row .uorg{ font-size:13px; color:var(--text); }
.user-row .uroletype{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.user-row .urole-select{
  border:1px solid var(--paper-line); background:var(--paper); font-family:var(--sans);
  font-size:12.5px; padding:7px 9px; color:var(--text); width:100%; transition:border-color .15s ease;
}
.user-row .urole-select:focus{ outline:none; border-color:var(--amber); }
.user-row .urole-select:disabled{ background:var(--paper-2); color:var(--muted); cursor:not-allowed; }
.user-row .userdate{ font-size:12px; color:var(--muted); font-family:var(--mono); }
@media (max-width:820px){
  .user-row{ grid-template-columns:1fr; gap:10px; }
  .user-row .userdate{ display:none; }
}

.fsu-pts{
  font-family:var(--mono); font-size:11px; color:var(--amber-deep); background:var(--amber-soft);
  padding:2px 9px; border-radius:100px; margin-left:6px; vertical-align:middle;
}
.chk-group{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.chk-pill{
  display:flex; align-items:center; gap:7px; padding:8px 14px; border:1px solid var(--paper-line);
  background:var(--paper); font-size:12.5px; color:var(--text); cursor:pointer; transition:all .15s ease;
}
.chk-pill:hover{ border-color:var(--amber); }
.chk-pill input{ accent-color:var(--amber-deep); margin:0; }
.chk-pill:has(input:checked){ background:var(--amber-soft); border-color:var(--amber); color:var(--amber-deep); }

.type-tag{
  font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.05em;
  padding:3px 9px; border-radius:100px; background:var(--paper-2); color:var(--muted);
  border:1px solid var(--paper-line); white-space:nowrap;
}

/* Master Data tab switcher (see app/master-data.html) — a plain
   underline-tab pattern, distinct from .chk-pill (used inside its forms
   for single/multi-select fields like company type or jurisdiction). */
.md-tab{
  font-family:var(--sans); font-size:13.5px; font-weight:500; color:var(--muted);
  background:none; border:none; border-bottom:2px solid transparent;
  padding:10px 4px; margin-bottom:-1px; cursor:pointer;
}
.md-tab:hover{ color:var(--text); }
.md-tab.active{ color:var(--ink); border-bottom-color:var(--amber); }

/* Business card upload (Master Data → Contacts) — see migration_v45 and
   app/master-data.html's "Upload from business card" flow. */
.card-scan-status{
  font-family:var(--mono); font-size:11.5px; color:var(--amber-deep);
}
.card-pending-name{
  font-size:12px; color:var(--muted); font-style:italic;
}
/* "Create this new company/agency" suggestion box shown inside the Contact
   form when the card reader detects an org that isn't in Master Data yet —
   never submitted silently, see cNewCompanyConfirm/cNewAgencyConfirm. */
.new-org-box{
  margin-top:10px; padding:12px 14px; border:1px dashed var(--amber);
  background:var(--amber-soft); border-radius:4px;
}
.new-org-box input[type="text"]{ margin-top:8px; width:100%; }
.chk-pill-inline{
  display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--amber-deep); font-weight:500;
}
.chk-pill-inline input{ accent-color:var(--amber-deep); margin:0; }

/* Program funding_stage badge (see app/programs.html and
   supabase/migration_v21_program_funding_stage_and_applications.sql) —
   'preparation' Programs (fund elaborating the project itself, e.g. USTDA)
   get an amber tint to stand out from the default 'financing' badge, which
   just uses .type-tag's neutral styling. */
.funding-stage-preparation{
  background:rgba(217,146,46,.12); color:var(--amber-deep); border-color:rgba(217,146,46,.35);
}

/* Program role badge (see app/programs.html, supabase/migration_v43_program_role.sql)
   — shown INSTEAD OF the funding-stage badge above for 'umbrella' Programs
   (they don't fund anything, so a preparation/financing badge would be
   misleading). A deliberately different hue (ink, not amber) so a
   multi-project umbrella like Atlántico-Pacífico never reads as "just
   another financing badge" next to FSU/BID/CAF tags in the same list. */
.program-role-umbrella{
  background:rgba(11,21,38,.06); color:var(--ink-2); border-color:rgba(11,21,38,.18);
  font-weight:600;
}

/* Program financing_entity tag (see migration_v36_program_financing_entity.sql
   and INAPlatform.isFsuFinancingEntity()) — programs financed by ENACOM-FSU
   get a blue tint so they read as "part of the FSU group" at a glance in
   app/programs.html's list and app/project.html's Financing tab grouping. */
.financing-entity-fsu{
  background:rgba(46,110,217,.12); color:#2e5fc7; border-color:rgba(46,110,217,.35);
}

/* Financing tab grouping (app/project.html's "Project financing"
   subsection, see migration_v36_program_financing_entity.sql) — everything
   FSU-related (the project's own direct FSU fields + any Program
   application whose financing_entity is ENACOM-FSU) sits in one bordered
   block, everything else in a second one, so the split reads clearly at a
   glance. #fsuFinancingGroup reuses the same blue tint as
   .financing-entity-fsu above for visual consistency. */
.financing-group{
  padding:14px 16px; border:1px solid var(--paper-line); border-radius:10px; background:var(--paper);
}
#fsuFinancingGroup{
  border-color:rgba(46,110,217,.35); background:rgba(46,110,217,.05);
}
.financing-group-title{
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:0;
}

.upload-drop{
  border:1px dashed var(--paper-line); padding:28px; text-align:center; cursor:pointer;
  font-size:13.5px; color:var(--muted); transition:all .15s ease;
}
.upload-drop:hover, .upload-drop.dragover{ border-color:var(--amber); color:var(--amber-deep); background:var(--paper-2); }
.upload-list{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.upload-list .uf{ display:flex; justify-content:space-between; align-items:center; font-size:13px; padding:8px 12px; background:var(--paper-2); }
.upload-list .uf button{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:16px; line-height:1; }
.upload-status{ font-size:12px; color:var(--amber-deep); margin-top:8px; min-height:14px; }

/* ---------- Roadmaps ---------- */
/* Per-project checklist rows in app/project.html's Roadmaps block — see
   supabase/migration_v26_gestion_templates.sql. Same look in both the
   advisor/admin editable variant and the project owner's read-only
   variant (renderRoadmapInstanceRow() in app/project.html branches the HTML, not
   the container styling). */
.roadmap-row{ padding:14px 16px; border:1px solid var(--paper-line); border-radius:10px; background:var(--paper); }
/* Used as a clickable card linking to roadmap-instance.html (project.html's
   Roadmaps list) as well as the non-interactive step cards there — the
   hover only matters for the <a> variant, harmless on the rest. */
a.roadmap-row:hover{ border-color:var(--amber); }
.roadmap-row input[type="text"], .roadmap-row select, .roadmap-row textarea, .roadmap-row input[type="date"]{
  border:none; border-bottom:1px solid var(--paper-line); background:transparent;
  font-family:var(--sans); color:var(--text); border-radius:0;
}
.roadmap-row input[type="text"]:focus, .roadmap-row select:focus, .roadmap-row textarea:focus, .roadmap-row input[type="date"]:focus{
  outline:none; border-bottom-color:var(--amber);
}
.roadmap-row-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.roadmap-row textarea{ width:100%; font-size:13px; padding:8px 2px; resize:vertical; min-height:44px; }
.roadmap-row-meta{
  display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:8px; font-size:12px; color:var(--muted);
}

/* Step-editor rows in app/new-roadmap-template.html — dynamic, reorderable
   list of { title, description, entity, entity type, required } used to
   build a roadmap_templates + roadmap_template_steps definition. */
.roadmap-step-row{ padding:16px 18px; border:1px solid var(--paper-line); border-radius:10px; background:var(--paper-2); }
.roadmap-step-row input[type="text"], .roadmap-step-row select, .roadmap-step-row textarea{
  border:none; border-bottom:1px solid var(--paper-line); background:transparent;
  font-family:var(--sans); color:var(--text); border-radius:0;
}
.roadmap-step-row input[type="text"]:focus, .roadmap-step-row select:focus, .roadmap-step-row textarea:focus{
  outline:none; border-bottom-color:var(--amber);
}
.roadmap-step-row-head{ display:flex; align-items:center; gap:10px; }
.roadmap-step-num{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--amber-soft); color:var(--amber-deep);
  font-family:var(--mono); font-size:11px; display:flex; align-items:center; justify-content:center;
}
.roadmap-step-row-head input.rt-step-title{ flex:1 1 auto; min-width:120px; font-size:13.5px; padding:4px 2px; }
.roadmap-step-row-actions{ display:flex; align-items:center; gap:4px; flex:0 0 auto; }
.roadmap-step-row-actions .icon-btn:disabled{ opacity:.35; cursor:default; }
.roadmap-step-row textarea{ width:100%; font-size:13px; padding:8px 2px; resize:vertical; min-height:50px; margin-top:8px; }
.roadmap-step-row-fields{
  display:grid; grid-template-columns:auto auto; gap:10px 14px; margin-top:10px; align-items:center; justify-content:start;
}
.roadmap-step-row-fields input[type="text"]{ font-size:12.5px; padding:8px 2px; }
.roadmap-step-row-fields select{ font-size:12.5px; padding:8px 2px; }
@media (max-width:640px){ .roadmap-step-row-fields{ grid-template-columns:1fr; } }

/* RACI editor (app/new-roadmap-template.html) — replaces the old single
   "responsible entity" input + free-form involved-entities chip list with
   an explicit Responsible/Accountable/Consulted/Informed role per entity.
   See migration_v42_roadmap_raci.sql. */
.raci-row{ display:grid; grid-template-columns:1fr 190px auto; gap:8px; align-items:center; }
.raci-row input[type="text"]{
  border:none; border-bottom:1px solid var(--paper-line); background:transparent;
  font-family:var(--sans); color:var(--text); border-radius:0; font-size:12.5px; padding:8px 2px;
}
.raci-row input[type="text"]:focus{ outline:none; border-bottom-color:var(--amber); }
.raci-row select{ font-size:12.5px; padding:8px 4px; }
@media (max-width:640px){ .raci-row{ grid-template-columns:1fr; } }

/* R/A/C/I badges — read-only display on app/roadmap-instance.html and
   project.html's Roadmaps block. One color per role so a step's whole
   RACI breakdown scans quickly; same restrained ink/paper/amber palette
   as the rest of the platform (no unrelated color language introduced). */
.raci-badge{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-size:12.5px;
  letter-spacing:.01em; white-space:nowrap; padding:5px 13px 5px 5px; border-radius:100px; line-height:1.3;
  background:var(--paper-2); color:var(--muted); border:1px solid var(--paper-line);
}
.raci-badge .raci-letter{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; font-weight:700; font-size:11.5px; font-family:var(--mono); flex:0 0 auto;
}
.raci-badge.role-responsible{ background:var(--paper-2); color:var(--text); border-color:var(--paper-line); }
.raci-badge.role-responsible .raci-letter{ background:var(--text); color:var(--paper); }
.raci-badge.role-accountable{ background:var(--amber-soft); color:var(--amber-deep); border-color:var(--amber); }
.raci-badge.role-accountable .raci-letter{ background:var(--amber-deep); color:var(--paper); }
.raci-badge.role-consulted{ background:var(--paper-2); color:var(--muted); border-color:var(--paper-line); }
.raci-badge.role-consulted .raci-letter{ background:var(--muted); color:var(--paper); }
.raci-badge.role-informed{ background:var(--paper-2); color:var(--muted); border-color:var(--paper-line); opacity:.8; }
.raci-badge.role-informed .raci-letter{ background:var(--muted-on-dark); color:var(--ink); }
.raci-badge-group{ display:flex; flex-wrap:wrap; gap:5px; }

/* New-project 4-section interface (app/new-project.html) — name+type /
   documents / optional AI template autofill / remaining details — one
   .wizard-panel visible at a time, identical in both create and edit mode.
   Every section name below is directly clickable to jump straight there
   (see the wizard-step-dot click handler + canJumpTo() in
   app/new-project.html) — section 1 is always reachable, sections 2-4 as
   soon as the project record exists (immediately when editing; after
   section 1's "Continue" when creating). See PLATFORM_SETUP.md for the
   full rationale. */
.wizard-steps{ display:flex; flex-wrap:wrap; gap:0; margin-bottom:32px; border-bottom:1px solid var(--paper-line); }
.wizard-step-dot{
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); padding:0 20px 12px 0; margin-right:20px; border-bottom:2px solid transparent;
  white-space:nowrap; cursor:pointer; transition:color .15s ease;
}
.wizard-step-dot .num{
  display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  border-radius:50%; background:var(--paper-2); color:var(--muted); font-size:10px; margin-right:7px;
  transition:all .15s ease;
}
.wizard-step-dot:hover{ color:var(--amber-deep); }
.wizard-step-dot:hover .num{ background:var(--amber); color:#fff; }
.wizard-step-dot.active{ color:var(--amber-deep); border-bottom-color:var(--amber); }
.wizard-step-dot.active .num{ background:var(--amber); color:#fff; }
/* .done marks a section actually visited and now behind the current one —
   purely a progress checkmark, not a clickability gate (every section name
   is clickable per the comment above). */
.wizard-step-dot.done{ color:var(--text); }
.wizard-step-dot.done .num{ background:var(--amber-soft); color:var(--amber-deep); }
.wizard-panel{ display:none; }
.wizard-panel.active{ display:block; }
.wizard-nav{ display:flex; gap:12px; margin-top:30px; align-items:center; }
.wizard-skip{ font-size:12.5px; color:var(--muted); text-decoration:underline; cursor:pointer; background:none; border:none; padding:0; }
.template-offer-card{
  border:1px solid var(--paper-line); background:var(--paper-2); padding:22px; text-align:left;
}

.readiness-score{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.score-circle{
  width:130px; height:130px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  background: var(--ink); color:var(--amber);
  font-family:var(--serif);
}
.score-circle .num{ font-size:38px; font-weight:600; line-height:1; }
.score-circle .max{ font-size:11px; color:var(--muted-on-dark); font-family:var(--mono); margin-top:4px; }
.dim-grid{ display:flex; flex-direction:column; gap:14px; margin-top:30px; }
.dim-row{ display:grid; grid-template-columns:200px 1fr 48px; gap:16px; align-items:center; }
.dim-row .dname{ font-size:13px; color:var(--text); }
.dim-row .dtrack{ height:7px; background:var(--paper-line); border-radius:100px; overflow:hidden; }
.dim-row .dfill{ height:100%; background:var(--amber); border-radius:100px; }
.dim-row .dval{ font-family:var(--mono); font-size:12px; color:var(--muted); text-align:right; }
@media (max-width:640px){ .dim-row{ grid-template-columns:1fr 40px; } .dim-row .dname{ grid-column:1/-1; } }

.roadmap-list{ display:flex; flex-direction:column; gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); margin-top:14px; }
.roadmap-item{ background:var(--paper); padding:16px 20px; font-size:13.5px; color:var(--text); display:flex; gap:14px; }
.roadmap-item .pr{ font-family:var(--mono); font-size:10px; text-transform:uppercase; color:var(--amber-deep); flex:0 0 auto; padding-top:2px; }

.finance-rec-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); margin-top:14px; }
.finance-rec-card{ background:var(--paper); padding:20px 22px; }
.finance-rec-card h4{ font-size:15px; }
.finance-rec-card p{ font-size:13px; color:var(--muted); margin-top:8px; }
@media (max-width:700px){ .finance-rec-grid{ grid-template-columns:1fr; } }

.analysis-pending{ padding:50px 30px; text-align:center; border:1px dashed var(--paper-line); }
.spinner{
  width:34px; height:34px; border-radius:50%; margin:0 auto 18px;
  border:3px solid var(--paper-line); border-top-color:var(--amber);
  animation: spin 0.8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Framework detail page ---------- */
.fw-layout{ display:grid; grid-template-columns: 240px 1fr; gap:64px; align-items:start; }
.fw-toc{ position:sticky; top:96px; display:flex; flex-direction:column; gap:2px; }
.fw-toc .toc-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.fw-toc a{ font-family:var(--mono); font-size:12px; padding:9px 0 9px 14px; border-left:2px solid var(--paper-line); color:var(--muted); transition:all .15s ease; }
.fw-toc a:hover{ color:var(--text); border-left-color:var(--text); }
.fw-toc a.active{ color:var(--amber-deep); border-left-color:var(--amber-deep); }
@media (max-width:980px){ .fw-layout{ grid-template-columns:1fr; } .fw-toc{ position:static; flex-direction:row; overflow-x:auto; gap:0; } .fw-toc a{ border-left:none; border-bottom:2px solid var(--paper-line); padding:8px 14px; white-space:nowrap; } }

.fw-section{ padding: 76px 0; border-top:1px solid var(--paper-line); scroll-margin-top: 100px; }
.fw-section:first-of-type{ border-top:none; padding-top:0; }
.fw-section .fw-kicker{ display:flex; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.fw-section .fw-kicker .fw-title{ min-width:0; }
.fw-section .fw-kicker .fnum-big{ font-family:var(--serif); font-style:italic; font-size:44px; color:var(--amber-deep); line-height:1; }
.fw-section .fw-kicker .fw-title small{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.fw-section .fw-kicker .fw-title h2{ font-size: clamp(24px,3vw,32px); }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:30px; }
@media (max-width:800px){ .two-col{ grid-template-columns:1fr; } }
.info-block{ background:var(--paper-2); border:1px solid var(--paper-line); padding:22px 24px; }
.info-block h4{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--amber-deep); margin-bottom:14px; }
.info-block ol, .info-block ul{ display:flex; flex-direction:column; gap:9px; }
.info-block li{ font-size:14px; color:var(--text); padding-left:20px; position:relative; }
.info-block ol{ counter-reset: item; }
.info-block ol li{ counter-increment:item; }
.info-block ol li::before{ content: counter(item) "."; position:absolute; left:0; color:var(--amber-deep); font-family:var(--mono); font-size:12px; }
.info-block ul li::before{ content:"—"; position:absolute; left:0; color:var(--amber-deep); }

/* Project Attributes grid on project.html (#attrsBlock/#attrsGrid) — one
   labeled item per optional project attribute (beneficiaries, budget,
   duration, priority, technical criticality, complexity), shown together
   instead of packed into a single meta line. See renderAttrs() there. */
.attrs-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:16px 24px; }
.attr-item{ display:flex; flex-direction:column; gap:4px; }
.attr-item-label{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--amber-deep); }
.attr-item-value{ font-size:14.5px; color:var(--text); }

.dim-bars{ display:flex; flex-direction:column; gap:14px; margin-top:26px; }
.dim-bar{ display:grid; grid-template-columns: 200px 1fr; gap:16px; align-items:center; }
.dim-bar .dlabel{ font-size:13px; color:var(--muted); }
.dim-bar .dtrack{ height:8px; background:var(--paper-line); border-radius:100px; position:relative; overflow:hidden; }
.dim-bar .dtrack i{ position:absolute; inset:0; background: var(--amber); border-radius:100px; transform-origin:left; }

.score-scale{ display:flex; margin-top:24px; border:1px solid var(--paper-line); }
.score-scale div{ flex:1; padding:16px 14px; border-left:1px solid var(--paper-line); }
.score-scale div:first-child{ border-left:none; }
.score-scale .range{ font-family:var(--mono); font-size:11px; color:var(--amber-deep); }
.score-scale .label{ font-size:13px; margin-top:6px; }
@media (max-width:700px){ .score-scale{ flex-direction:column; } .score-scale div{ border-left:none; border-top:1px solid var(--paper-line); } .score-scale div:first-child{ border-top:none; } }

.lifecycle-strip{ display:flex; flex-wrap:wrap; gap:0; margin-top:30px; border:1px solid var(--paper-line); }
.lifecycle-strip span{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:12px 16px; border-right:1px solid var(--paper-line); flex:1 1 auto; text-align:center; }
.lifecycle-strip span:last-child{ border-right:none; }

.deliv-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); margin-top:30px; }
.deliv-grid div{ background:var(--paper); padding:18px 16px; font-size:13px; }
.deliv-grid div b{ display:block; font-family:var(--serif); font-size:15px; margin-bottom:4px; }
@media (max-width:800px){ .deliv-grid{ grid-template-columns:repeat(2,1fr);} }

.ai-callout{ margin-top:34px; background:var(--ink); color:var(--text-on-dark); padding:26px 28px; display:flex; gap:20px; align-items:flex-start; border-left:3px solid var(--amber); }
.ai-callout .lab{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--amber); white-space:nowrap; padding-top:3px; }
.ai-callout p{ margin:0; font-size:14px; color:var(--muted-on-dark); max-width:none; }

.resource-row{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }

/* --- F1 deep-dive additions: tables, quote, phases, chips, typology --- */
.fw-quote{ margin:30px 0; padding:22px 26px; border-left:3px solid var(--amber-deep); background:var(--paper-2); font-family:var(--serif); font-style:italic; font-size:16.5px; line-height:1.5; color:var(--text); }
.fw-quote cite{ display:block; margin-top:10px; font-family:var(--mono); font-style:normal; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }

.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.chip-row span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; border:1px solid var(--paper-line); color:var(--muted); padding:6px 12px; border-radius:100px; }

.table-wrap{ margin-top:26px; overflow-x:auto; border:1px solid var(--paper-line); }
table.fw-table{ width:100%; border-collapse:collapse; min-width:640px; font-size:13.5px; }
table.fw-table th{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--amber-deep); text-align:left; padding:12px 16px; background:var(--paper-2); border-bottom:1px solid var(--paper-line); white-space:nowrap; }
table.fw-table td{ padding:13px 16px; border-bottom:1px solid var(--paper-line); color:var(--text); vertical-align:top; }
table.fw-table tr:last-child td{ border-bottom:none; }
table.fw-table td.muted, table.fw-table td b{ font-weight:500; }
table.fw-table td small{ display:block; margin-top:3px; color:var(--muted); font-size:12px; }

.phase-list{ margin-top:34px; display:flex; flex-direction:column; gap:0; }
.phase-item{ display:grid; grid-template-columns:64px 1fr; gap:20px; padding:26px 0; border-top:1px solid var(--paper-line); }
.phase-item:first-child{ border-top:none; }
.phase-item .pn{ font-family:var(--serif); font-style:italic; font-size:26px; color:var(--amber-deep); }
.phase-item h4{ font-size:17px; margin-bottom:4px; }
.phase-item .pgate{ display:inline-block; margin-top:8px; font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--amber-deep); border:1px solid var(--paper-line); padding:4px 10px; border-radius:100px; }
.phase-item .pagent{ font-size:12.5px; color:var(--muted); margin-top:10px; }
.phase-item .pdeliv{ margin-top:10px; font-size:13px; color:var(--muted); }
@media (max-width:640px){ .phase-item{ grid-template-columns:1fr; } }

.typo-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); margin-top:26px; }
.typo-card{ background:var(--paper); padding:22px 24px; }
.typo-card h4{ font-size:16px; margin-bottom:8px; }
.typo-card p{ font-size:13.5px; color:var(--muted); margin:0; }
@media (max-width:700px){ .typo-grid{ grid-template-columns:1fr; } }

.glossary-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 28px; margin-top:22px; }
.glossary-grid dt{ font-family:var(--mono); font-size:12.5px; color:var(--amber-deep); }
.glossary-grid dd{ font-size:13px; color:var(--muted); margin:2px 0 12px; }
@media (max-width:700px){ .glossary-grid{ grid-template-columns:1fr; } }

.check-list{ margin-top:22px; display:flex; flex-direction:column; gap:10px; }
.check-list li{ font-size:14px; color:var(--text); padding-left:26px; position:relative; }
.check-list li::before{ content:"☐"; position:absolute; left:0; color:var(--amber-deep); }

.subhead{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:44px 0 4px; }

.info-block-dark{ background:var(--ink) !important; border-color:var(--ink) !important; }
.info-block-dark h4{ color:var(--amber) !important; }
.info-block-dark li{ color:var(--text-on-dark) !important; }
.info-block-dark li::before{ color:var(--amber) !important; }

/* ---------- Footer ---------- */
footer{ background: var(--ink); color: var(--muted-on-dark); padding: 64px 0 30px; }
.foot-grid{ display:grid; grid-template-columns: 1.4fr repeat(3,1fr); gap:40px; }
.foot-grid h5{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-on-dark); margin-bottom:16px; }
.foot-grid ul li{ padding:6px 0; font-size:13.5px; }
.foot-grid ul li a:hover{ color:var(--amber); }
.foot-bottom{ margin-top:56px; padding-top:22px; border-top:1px solid var(--ink-line); display:flex; justify-content:space-between; font-size:12px; flex-wrap:wrap; gap:10px; }
@media (max-width:800px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .foot-grid{ grid-template-columns:1fr; gap:32px; } .foot-bottom{ flex-direction:column; gap:6px; } }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  * { animation: none !important; }
}