/* Large, accessible editorial interactions. No application data or product mockups. */
[hidden] { display: none !important; }
.interactive-ready .hero-grid { padding-block: 65px; }
.interactive-ready .hero h1 { font-size: clamp(3.5rem,6vw,5.5rem); }
.interactive-ready .hero-description { max-width: 485px; }
.interactive-ready .source-node { background: none; border: 0; color: #fff; padding: 0; font: inherit; cursor: pointer; }
.interactive-ready .source-node .source-icon { transition: background .2s, border-color .2s, box-shadow .2s; }
.interactive-ready .source-node:hover .source-icon, .interactive-ready .source-node[aria-pressed=true] .source-icon { border-color: #91d4ff; background: #1c4160; box-shadow: 0 0 0 7px #6bc4ff0c,0 0 28px #6bc4ff1c; }
.interactive-ready .diagram-foot { min-height: 3.3rem; }
.interactive-ready .vision .section-heading, .interactive-ready .approach .section-heading { margin-bottom: 31px; }
.interactive-ready .section-heading h2 { font-size: clamp(2.3rem,4vw,3.8rem); }
.journey-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 25px; }
.experience-hint { font-size: .875rem; color: #5b758a; }
.perspective-switch { display: flex; padding: 4px; border: 1px solid #d0dfeb; border-radius: 12px; background: #e9f0f6; }
.perspective-button { padding: 9px 18px; border: 0; border-radius: 8px; color: #587087; background: transparent; cursor: pointer; font-size: .875rem; font-weight: 550; }
.perspective-button[aria-pressed=true] { background: var(--navy); color: #fff; box-shadow: 0 3px 10px #0a1b2d14; }
.journey-tabs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border-bottom: 1px solid #cbdde9; }
.journey-tab { display: flex; align-items: center; gap: 12px; padding: 20px 15px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: transparent; color: #617e94; font-size: .9375rem; text-align: left; cursor: pointer; font-weight: 550; }
.tab-index { font-size: .75rem; letter-spacing: .02em; color: #8ba3b6; }
.journey-tab[aria-selected=true] { border-bottom-color: #3088c4; color: #1d689a; background: linear-gradient(#dcebfa00,#dcebfa70); }
.journey-tab[aria-selected=true] .tab-index { color: #277bae; }
.journey-stage-area { display: grid; grid-template-columns: 1.07fr 1fr; gap: 75px; align-items: center; padding: 40px 35px 36px 10px; }
.stage-headline { white-space: pre-line; font-size: clamp(2rem,3.5vw,3rem); font-weight: 650; line-height: 1.15; letter-spacing: -.05em; }
.stage-description { font-size: 1.0625rem; line-height: 1.75; color: #4c657a; margin-top: 24px; max-width: 485px; }
.stage-benefit { font-size: 1rem; line-height: 1.75; color: #5a758b; margin-top: 19px; padding-left: 19px; border-left: 2px solid #79b9e5; max-width: 490px; }
.next-stage { background: #e3eff9; color: #286e9f; border: 1px solid #c7dfef; border-radius: 8px; padding: 10px 18px; margin-top: 25px; cursor: pointer; font-size: .875rem; font-weight: 600; }
.next-stage:hover { background: #d1e7f7; }
.phase-wheel { --sector-start: -36deg; position: relative; width: 100%; max-width: 415px; aspect-ratio: 1; margin: 15px auto; }
.phase-wheel::before { content: ''; position: absolute; inset: 4%; border-radius: 50%; background: conic-gradient(from var(--sector-start),#68bdfa 0deg,#9fd6fd 65deg,#dae8f2 66deg,#dae8f2 360deg); box-shadow: 0 20px 55px #2b75a012; }
.phase-wheel::after { content: ''; position: absolute; inset: 12%; border-radius: 50%; background: var(--paper); border: 1px solid #c5dbea; }
.wheel-centre { position: absolute; z-index: 2; inset: 20%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 9px #4384b00b,0 15px 35px #1c50731c; text-align: center; color: #fff; }
.wheel-caption { font-size: .75rem; letter-spacing: .07em; line-height: 1.5; color: #93bddb; max-width: 130px; }
.wheel-icon { margin: 18px 0 15px; }
.wheel-icon svg { width: 47px; height: 47px; margin: 0; flex-shrink: 0; fill: none; stroke: #8bcefc; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.wheel-stage { font-family: var(--display); font-size: 1.7rem; font-weight: 600; letter-spacing: -.04em; line-height: 1.2; }
.wheel-centre small { margin-top: 11px; color: #abc7dc; font-size: .75rem; line-height: 1.5; max-width: 155px; }
.wheel-node { position: absolute; z-index: 3; left: var(--node-x); top: var(--node-y); transform: translate(-50%,-50%); width: 43px; height: 43px; display: grid; place-items: center; padding: 0; border: 1px solid #c0d6e6; border-radius: 50%; background: var(--paper); color: #6b889f; font-size: .8125rem; font-weight: 550; cursor: pointer; }
.wheel-node[aria-pressed=true] { background: #b1ddfa; border-color: #7dbde7; color: #14577f; box-shadow: 0 0 0 5px #81bfe422; }
.audience-details { border-top: 1px solid #d4e1ec; padding-top: 20px; color: #526d82; }
.audience-details summary { font-size: .875rem; cursor: pointer; width: fit-content; }
.audience-details[open] .audience-value { margin-top: 25px; }

.service-explorer { display: grid; grid-template-columns: 255px minmax(0,1fr); gap: 30px; }
.service-tabs { display: flex; flex-direction: column; gap: 8px; }
.service-tab { display: flex; align-items: center; gap: 13px; padding: 18px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #9fbbd1; text-align: left; cursor: pointer; font-size: .9375rem; font-weight: 500; }
.service-tab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.service-tab .tab-index { margin-left: auto; }
.service-tab[aria-selected=true] { border-color: #3b7198; background: linear-gradient(110deg,#1e4662,#142c42); color: #d7efff; }
.service-tab:hover { background: #83b6df0c; }
.service-tab[aria-selected=true]:hover { background: #1e4662; }
.service-content { min-width: 0; }
.service-panel { display: grid; grid-template-columns: 1.32fr .8fr; gap: 15px 25px; padding: 36px; border: 1px solid #3c63804d; border-radius: 20px; min-height: 432px; overflow: hidden; background: radial-gradient(ellipse at 85% 20%,#3678a52b,transparent 55%),linear-gradient(130deg,#142f46,#0d2235); }
.service-text { position: relative; z-index: 2; align-self: center; }
.service-headline { font-size: clamp(1.8rem,2.5vw,2.6rem); line-height: 1.15; letter-spacing: -.05em; }
.service-description { font-size: 1rem; line-height: 1.8; color: #b5cadd; margin-top: 22px; }
.service-status { display: block; font-size: .75rem; color: #91b3cf; margin-top: 20px; }
.service-poster { position: relative; min-width: 0; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 23px; align-self: center; }
.poster-number { position: absolute; top: -65px; right: -8px; font-family: var(--display); font-size: 12rem; font-weight: 600; line-height: 1; letter-spacing: -.09em; color: #81b9e60b; }
.poster-icon { position: relative; display: grid; place-items: center; width: 153px; height: 153px; border: 1px solid #76b2dc70; border-radius: 50%; background: radial-gradient(circle,#448fc522,#2f6f9f08); box-shadow: 0 0 0 15px #70b3e00b,0 0 0 30px #70b3e006; }
.poster-icon svg { width: 72px; height: 72px; stroke: #a4dcff; fill: none; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.poster-label { position: relative; font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; color: #92bedf; }
.service-features { display: flex; flex-wrap: wrap; gap: 10px; grid-column: 1 / -1; padding-top: 21px; border-top: 1px solid #5d8eb130; align-self: end; }
.service-features span { border: 1px solid #3c628058; background: #88b8da05; border-radius: 7px; padding: 7px 11px; color: #acc8dc; font-size: .8125rem; }
.interactive-ready .record-flow { margin-top: 26px; margin-bottom: 0; }
.interactive-ready .foundation-heading { margin-top: 39px; }
.verification-explorer { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: center; padding: 25px 30px; border: 1px solid #3c63804d; border-radius: 17px; background: #9acaf805; }
.evidence-content { min-width: 0; }
.evidence-panel h3 { font-size: 1.8rem; line-height: 1.2; letter-spacing: -.04em; }
.evidence-panel > p:last-child { margin-top: 17px; font-size: 1rem; color: #aac5d9; line-height: 1.75; }
.evidence-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.evidence-tab { display: flex; flex-direction: column; justify-content: end; align-items: stretch; gap: 12px; min-height: 240px; padding: 0; color: #8eafc9; background: none; border: 0; cursor: pointer; text-align: center; font-size: .75rem; line-height: 1.5; }
.evidence-bar { display: flex; align-items: flex-start; justify-content: center; height: var(--bar-size); min-height: 48px; max-height: 180px; background: linear-gradient(180deg,#284d69,#18354b); border: 1px solid #3e6380; border-radius: 8px; padding-top: 17px; }
.evidence-number { font-family: var(--display); font-size: 1.25rem; color: #7eabc9; }
.evidence-tab[aria-selected=true] { color: #d6eeff; }
.evidence-tab[aria-selected=true] .evidence-bar { background: linear-gradient(180deg,#75bde9,#2d6e9c); border-color: #a3daff; box-shadow: 0 0 30px #51acdf12; }
.evidence-tab[aria-selected=true] .evidence-number { color: #f2faff; }
.journey-panel:not([hidden]), .service-panel:not([hidden]), .evidence-panel:not([hidden]) { animation: panel-in .35s ease-out; }
@keyframes panel-in { from { opacity: .5; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width:1100px) {
  .journey-stage-area { gap: 40px; padding-right: 20px; }
  .wheel-centre { padding: 17px; }
  .wheel-icon { margin-block: 14px 12px; }
  .wheel-icon svg { width: 37px; height: 37px; }
  .wheel-stage { font-size: 1.45rem; }
  .service-explorer { grid-template-columns: 210px minmax(0,1fr); gap: 20px; }
  .service-tab { padding: 17px 13px; }
  .service-panel { padding: 30px; grid-template-columns: 1.4fr .7fr; gap: 20px; }
  .poster-icon { width: 105px; height: 105px; }
  .poster-icon svg { width: 54px; height: 54px; }
  .poster-number { font-size: 9rem; top: -35px; }
  .verification-explorer { gap: 30px; }
}
@media (max-width:900px) {
  .service-panel { grid-template-columns: 1fr; }
  .service-poster { min-height: 175px; grid-row: 1; }
  .poster-number { right: 10%; top: -15px; }
  .poster-icon { width: 115px; height: 115px; }
  .service-headline { font-size: 2rem; }
  .phase-wheel { max-width: 345px; }
  .wheel-centre { inset: 18%; }
}
@media (max-width:760px) {
  .interactive-ready .hero-grid { padding-block: 44px 36px; }
  .interactive-ready .hero h1 { font-size: clamp(2.45rem,9.8vw,4rem); }
  .interactive-ready .section-heading h2 { font-size: 2.15rem; }
  .journey-toolbar { flex-direction: column; align-items: flex-start; gap: 16px; }
  .journey-tabs { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .journey-tab { flex-direction: column; align-items: center; gap: 5px; font-size: .8125rem; padding: 13px 2px; text-align: center; }
  .journey-stage-area { grid-template-columns: 1fr; gap: 20px; padding: 28px 0 20px; }
  .stage-headline { font-size: 2.2rem; }
  .stage-description { font-size: 1rem; margin-top: 20px; }
  .stage-benefit { font-size: .9375rem; }
  .phase-wheel { grid-row: 1; width: 86%; max-width: 320px; margin-block: 12px 18px; }
  .wheel-centre { padding: 15px; }
  .wheel-caption { font-size: .75rem; letter-spacing: .03em; }
  .wheel-icon { margin-block: 10px 8px; }
  .wheel-icon svg { width: 33px; height: 33px; }
  .wheel-stage { font-size: 1.35rem; }
  .wheel-centre small { font-size: .75rem; margin-top: 9px; }
  .wheel-node { width: 36px; height: 36px; }
  .service-explorer { grid-template-columns: 1fr; gap: 20px; }
  .service-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .service-tab { flex-direction: column; gap: 9px; padding: 15px 6px; font-size: .8125rem; text-align: center; border: 1px solid #2c4a62; border-radius: 10px; }
  .service-tab .tab-index { display: none; }
  .service-panel { padding: 27px 24px; min-height: auto; gap: 20px; }
  .service-headline { font-size: 2rem; }
  .service-poster { min-height: 190px; }
  .poster-icon { width: 126px; height: 126px; }
  .poster-icon svg { width: 63px; height: 63px; }
  .poster-number { right: 0; font-size: 10rem; }
  .service-features { gap: 8px; padding-top: 20px; }
  .service-features span { font-size: .75rem; }
  .verification-explorer { grid-template-columns: 1fr; padding: 24px; gap: 25px; }
  .evidence-tabs { grid-row: 1; gap: 9px; }
  .evidence-tab { min-height: 218px; font-size: .75rem; }
  .evidence-bar { max-height: 158px; }
  .evidence-panel h3 { font-size: 1.7rem; }
  .evidence-panel > p:last-child { font-size: .9375rem; }
  .interactive-ready .record-flow { padding-inline: 25px; }
}
@media (max-width:360px) {
  .phase-wheel { width: 92%; }
  .wheel-centre { inset: 17%; padding: 13px; }
  .wheel-caption { max-width: 110px; }
  .wheel-icon svg { width: 29px; height: 29px; }
  .wheel-icon { margin-block: 9px; }
  .wheel-stage { font-size: 1.2rem; }
  .wheel-centre small { max-width: 119px; }
  .stage-headline { font-size: 2rem; }
  .service-panel { padding-inline: 21px; }
  .evidence-tab { min-height: 214px; }
  .verification-explorer { padding-inline: 18px; }
}
@media (prefers-reduced-motion:reduce) {
  .journey-panel:not([hidden]), .service-panel:not([hidden]), .evidence-panel:not([hidden]) { animation: none; }
}
