/* A visual vocabulary for the deck: each motif describes the content beside it. */
.presentation-page {
    --meaning-ink: #315b3a;
    --meaning-accent: #638d34;
    --meaning-surface: #edf3e0;
    --meaning-border: #c6d4b7;
}
.presentation-page .presentation-meaning-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--meaning-border);
    border-radius: 12px;
    background: var(--meaning-surface);
    color: var(--meaning-ink);
    box-shadow: inset 0 1px #fff5, 0 3px 0 #203e2312;
}
.presentation-page .presentation-meaning-icon > svg { width: 24px; height: 24px; }
.presentation-page .meaning-motif { pointer-events: none; }
.deck-slide[data-meaning] > .slide-aura > .meaning-motif {
    /* Context stays in the heading and card icons; the large section backdrop
       is the original CtrlBox cube. */
    display: none;
    position: absolute;
    width: clamp(220px, 24vw, 340px);
    height: auto;
    aspect-ratio: 1;
    inset: auto -2% -7% auto;
    color: #598145;
    opacity: .045;
    transform: rotate(-9deg);
    transition: opacity 280ms ease;
}
.deck-slide[data-meaning]:is(:hover, :focus-within) > .slide-aura > .meaning-motif { opacity: .075; }
.deck-slide .slide-aura > .meaning-motif > svg { width: 100%; height: 100%; stroke-width: .65; }
.project-slide[data-meaning] > .slide-aura > .meaning-motif { right: auto; left: -5%; bottom: -3%; width: 36%; opacity: .055; }
.project-slide[data-meaning]:is(:hover, :focus-within) > .slide-aura > .meaning-motif { opacity: .075; }
.challenges-slide[data-meaning] > .slide-aura > .meaning-motif,
.technology-slide[data-meaning] > .slide-aura > .meaning-motif,
.roadmap-slide[data-meaning] > .slide-aura > .meaning-motif { color: #c8f36e; opacity: .06; }

.has-section-meaning { display: flex; align-items: center; gap: 11px; }
.presentation-page .has-section-meaning > .presentation-meaning-icon { width: 31px; height: 31px; border-radius: 9px; box-shadow: none; }
.presentation-page .has-section-meaning > .presentation-meaning-icon > svg { width: 18px; height: 18px; }
.challenges-slide, .technology-slide, .roadmap-slide {
    --meaning-surface: #274832;
    --meaning-ink: #d0f291;
    --meaning-accent: #d0f291;
    --meaning-border: #57794a;
}
.capability-label .meaning-capability { display: inline-flex; width: 15px; height: 15px; color: currentColor; }
.capability-label .meaning-capability svg { width: 100%; height: 100%; }

/* Project logos stay in the foreground; industry symbols sit in the corners. */
.project-index-art > .presentation-meaning-icon {
    position: absolute;
    top: 9px;
    right: 10px;
    width: 29px;
    height: 29px;
    border-radius: 8px;
    border-color: #ffffff30;
    background: #00000014;
    color: var(--project-accent);
    transform: translateZ(18px);
    box-shadow: none;
}
.project-index-art > .presentation-meaning-icon svg { width: 17px; height: 17px; }
.project-index-art > .meaning-motif { position: absolute; width: 83px; height: 83px; top: auto; right: 0; bottom: 0; color: var(--project-accent); opacity: .11; transform: translateZ(1px); }
.project-index-art .depth-light { background-image: linear-gradient(130deg, #ffffff20, transparent 60%); }
.project-index-invite { position: relative; isolation: isolate; }
.project-index-invite > .meaning-motif { position: absolute; top: auto; right: 5px; bottom: 8px; width: 112px; height: 112px; opacity: .09; z-index: -1; }

/* Meaning is carried by the icon, while the sequence number stays secondary. */
.solution-card, .tech-layer, .partnership-card, .roadmap-step, .challenge-row { position: relative; }
.solution-card[data-meaning]::after, .tech-layer[data-meaning]::after,
.partnership-card[data-meaning]::after, .roadmap-step[data-meaning]::after { display: none; }
.solution-card > .meaning-motif, .tech-layer > .meaning-motif,
.partnership-card > .meaning-motif, .roadmap-step > .meaning-motif,
.challenge-row > .meaning-motif {
    position: absolute;
    width: 112px;
    height: 112px;
    top: auto;
    right: 10px;
    bottom: 5px;
    color: currentColor;
    opacity: .055;
    z-index: -1;
    transition: opacity 240ms ease;
}
.solution-card:hover > .meaning-motif, .tech-layer:hover > .meaning-motif,
.partnership-card:hover > .meaning-motif, .roadmap-step:hover > .meaning-motif { opacity: .12; }
.solution-card > .presentation-meaning-icon { margin-bottom: 22px; }
.solution-card .solution-number {
    position: absolute;
    top: 27px;
    right: 25px;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    font: 10px/1.4 var(--mono);
    color: #61714f;
}
.solution-card { padding: 25px 27px 28px; }
.tech-layer { grid-template-columns: 42px 1fr; gap: 8px 17px; }
.tech-layer-index { grid-row: 1 / 3; opacity: 1; }
.tech-layer .presentation-meaning-icon { width: 39px; height: 39px; }
.tech-layer:first-child, .tech-layer:nth-child(2), .roadmap-step {
    --meaning-ink: #284b2e;
    --meaning-accent: #59852f;
    --meaning-surface: #f4f8e64d;
    --meaning-border: #547a3540;
}
.partnership-index { display: block; margin: 26px 0; opacity: 1; }
.partnership-index .presentation-meaning-icon { width: 52px; height: 52px; border-radius: 15px; }
.partnership-index .presentation-meaning-icon > svg { width: 29px; height: 29px; }
.partnership-card:nth-child(2), .partnership-card:nth-child(3) {
    --meaning-ink: #def5bf;
    --meaning-accent: #d0f291;
    --meaning-surface: #ffffff0a;
    --meaning-border: #abc58f45;
}
.roadmap-step > div > .presentation-meaning-icon { width: 42px; height: 42px; border-radius: 12px; }
.roadmap-step > div { gap: 12px; }
.roadmap-step > div > .presentation-meaning-icon + span { margin-right: auto; border: 0; width: auto; box-shadow: none; }
.roadmap-step > .meaning-motif { width: 120px; height: 120px; bottom: 10px; }
.roadmap-step > p:not(.deck-eyebrow) { font-size: 14px; line-height: 1.6; }
.project-index-art > .meaning-motif::before,
.project-index-invite > .meaning-motif::before,
.solution-card > .meaning-motif::before, .tech-layer > .meaning-motif::before,
.partnership-card > .meaning-motif::before, .roadmap-step > .meaning-motif::before,
.challenge-row > .meaning-motif::before { display: none; }
.challenge-row { grid-template-columns: 38px 1fr 1.2fr 38px; isolation: isolate; }
.challenge-row > .presentation-meaning-icon { width: 36px; height: 36px; border-radius: 10px; }
.challenge-row > .presentation-meaning-icon > svg { width: 21px; height: 21px; }
.challenge-row > .meaning-motif { width: 70px; height: 70px; right: 45px; bottom: 8px; opacity: .05; }
.market-stats p > .presentation-meaning-icon { display: grid; width: 29px; height: 29px; margin-bottom: 9px; margin-top: 0; border-radius: 8px; }
.market-stats p > .presentation-meaning-icon > svg { width: 17px; height: 17px; }

/* Chapter choices remain labelled links, now easier to recognise at a glance. */
.chapter-grid > a.meaning-chapter { grid-template-columns: 20px 33px 1fr 17px; gap: 11px; padding: 11px 9px; border-radius: 8px; }
.chapter-grid > a.meaning-chapter > .presentation-meaning-icon { width: 33px; height: 33px; border-radius: 9px; color: #3a5b2d; box-shadow: none; }
.chapter-grid > a.meaning-chapter > .presentation-meaning-icon > svg { width: 19px; height: 19px; }
.chapter-grid > a.meaning-chapter[aria-current] { box-shadow: inset 3px 0 #507735; background: #e1edcd; }
.chapter-grid > a.meaning-chapter[aria-current] > .presentation-meaning-icon { background: #315333; color: #d8f5a5; border-color: #315333; }

@media (max-width: 800px) {
    .deck-slide[data-meaning] > .slide-aura > .meaning-motif { width: 250px; right: -60px; bottom: -25px; opacity: .04; }
    .deck-slide[data-meaning]:is(:hover, :focus-within) > .slide-aura > .meaning-motif { opacity: .06; }
    .project-slide[data-meaning] > .slide-aura > .meaning-motif { width: 260px; left: auto; right: -50px; top: 170px; bottom: auto; }
    .challenge-row { grid-template-columns: 30px 1fr 36px; }
    .challenge-row > .presentation-meaning-icon { grid-column: 3; grid-row: 1 / 3; }
    .chapter-grid > a.meaning-chapter { gap: 9px; }
}
@media (max-width: 480px) {
    .presentation-page .has-section-meaning > .presentation-meaning-icon { width: 27px; height: 27px; }
    .has-section-meaning { gap: 9px; }
    .project-index-art > .presentation-meaning-icon { top: 7px; right: 7px; width: 25px; height: 25px; border-radius: 7px; }
    .project-index-art > .presentation-meaning-icon svg { width: 15px; height: 15px; }
    .project-index-art > .meaning-motif { width: 65px; height: 65px; opacity: .1; }
    .solution-card { padding: 24px 20px; grid-template-columns: 39px 1fr; column-gap: 15px; }
    .solution-card > .presentation-meaning-icon { grid-column: 1; grid-row: 1 / 3; width: 39px; height: 39px; margin: 2px 0 0; }
    .solution-card h3 { grid-column: 2; grid-row: 1; font-size: 22px; padding-right: 7px; }
    .solution-card p { grid-column: 2; grid-row: 2; }
    .solution-card .solution-number { top: 9px; right: 11px; font-size: 8px; }
    .tech-layer { grid-template-columns: 33px 1fr; gap: 5px 11px; padding: 19px 17px; }
    .tech-layer .presentation-meaning-icon { width: 33px; height: 33px; border-radius: 10px; }
    .tech-layer .presentation-meaning-icon > svg { width: 20px; height: 20px; }
    .tech-layer h3 { font-size: 27px; }
    .partnership-index { margin-block: 23px; }
    .partnership-index .presentation-meaning-icon { width: 46px; height: 46px; border-radius: 13px; }
    .roadmap-step > p:not(.deck-eyebrow) { font-size: 15px; }
    .challenge-row { grid-template-columns: 22px 1fr 33px; gap: 7px 9px; }
    .challenge-row > .presentation-meaning-icon { width: 32px; height: 32px; }
    .challenge-row > .meaning-motif { display: none; }
    .chapter-grid > a.meaning-chapter { grid-template-columns: 19px 31px 1fr 16px; gap: 10px; padding-inline: 4px; }
    .chapter-grid > a.meaning-chapter > .presentation-meaning-icon { width: 31px; height: 31px; }
}
/* A more readable screen edition; the compact print layout stays independent. */
@media screen {
    .presentation-page { font-size: 18px; }
    .cover-copy > p { font-size: clamp(18px, 1.35vw, 21px); max-width: 48ch; }
    .slide-heading > p, .project-details dd, .solution-card p,
    .challenge-row p, .tech-layer p, .partnership-card > p:not(.deck-eyebrow),
    .roadmap-step > p:not(.deck-eyebrow), .project-features p {
        font-size: 17px;
        line-height: 1.65;
    }
    .slide-lede, .technology-slide .slide-lede, .contact-main p { font-size: 20px; }
    .deck-eyebrow, .project-category, .project-details dt { font-size: 12px; line-height: 1.65; }
    .cover-top .deck-eyebrow, .contact-top .deck-eyebrow { font-size: 12px; }
    .deck-header-label, .deck-edition, .art-label, .art-index { font-size: 11px; }
    .cover-bottom, .cover-bottom > span:last-child, .art-caption { font-size: 13px; }
    .capability-label { font-size: 12px; }
    .project-index-caption h3 { font-size: 22px; line-height: 1.2; }
    .project-index-caption > span { font-size: 14px; }
    .project-index-invite > span:first-child { font-size: 14px; }
    .project-index-invite strong { font-size: 27px; }
    .project-index-invite .deck-text-link { min-height: 44px; font-size: 15px; }
    .project-topline .deck-eyebrow, .project-domain { font-size: 12px; }
    .project-topline { flex-wrap: wrap; gap: 8px 16px; }
    .gallery-topline, .gallery-bottomline, .project-screen figcaption,
    .project-screen figcaption > span:last-child, .screen-enlarge span { font-size: 12px; }
    .project-screen figcaption { flex-wrap: wrap; gap: 3px 10px; }
    .project-features h3 { font-size: 24px; }
    .video-direct-link { font-size: 15px; min-height: 48px; }
    .market-stats p { font-size: 18px; }
    .market-stats p > span, .snapshot-label { font-size: 12px; }
    .solution-card h3 { font-size: 27px; }
    .solution-card .solution-number { font-size: 12px; }
    .partnership-card > div, .roadmap-step .deck-eyebrow, .roadmap-note { font-size: 12px; line-height: 1.6; }
    .comparison-table { font-size: 16px; }
    .comparison-table thead th, .comparison-legend { font-size: 13px; }
    .contact-links > a > span { font-size: 12px; }
    .deck-button, .project-copy .deck-button, .cover-actions .deck-button {
        min-height: 56px;
        padding: 16px 24px;
        font-size: 16px;
        gap: 18px;
    }
    .deck-text-link, .cover-actions .deck-text-link, .deck-back-link { font-size: 16px; min-height: 48px; }
    .deck-tool, .deck-chapters-button { font-size: 15px; min-height: 48px; }
    .deck-tool .deck-icon { width: 20px; height: 20px; }
    .deck-page-button, .deck-icon-button { width: 48px; height: 48px; min-width: 48px; }
    .deck-current { font-size: 14px; }
    .deck-current > [data-counter], .chapter-total, .keyboard-hint { font-size: 12px; }
    .deck-status { font-size: 15px; padding: 13px 20px; }
    .chapter-grid > a.meaning-chapter { font-size: 16px; padding-block: 14px; min-height: 60px; }
    .chapter-grid > a > span { font-size: 12px; }
    .chapter-grid > a.meaning-chapter strong { line-height: 1.4; }
    .chapters-bottom, .chapters-bottom .deck-tool { font-size: 14px; }
    .share-dialog > p, .share-dialog input, .image-dialog .dialog-heading p { font-size: 16px; }
    .share-dialog label, .dialog-heading .deck-eyebrow { font-size: 13px; }

    /* Feedback follows real links and controls, with the same response on focus. */
    .chapter-grid > a, .contact-links > a, .project-index-invite,
    .deck-chapters-button, .deck-icon-button {
        transition: background-color 180ms ease, color 180ms ease, transform 220ms var(--depth-ease);
    }
    .project-index-caption h3 { transition: color 180ms ease; }
    .project-index-card:is(:hover, :focus-visible) .project-index-caption h3 { color: #3c6a30; }
    .chapter-grid > a:is(:hover, :focus-visible), .contact-links > a:is(:hover, :focus-visible) { background: #deedca; }
    .chapter-grid > a.meaning-chapter[aria-current] { background: #d2e7af; box-shadow: inset 4px 0 #315333; }
    .chapter-grid > a > .deck-icon, .contact-links > a > .deck-icon { transition: transform 220ms var(--depth-ease); }
    .depth-enabled .chapter-grid > a:is(:hover, :focus-visible) > .deck-icon,
    .depth-enabled .contact-links > a:is(:hover, :focus-visible) > .deck-icon { transform: translateX(3px); }
    .depth-enabled .chapter-grid > a:active, .depth-enabled .project-index-invite:active,
    .depth-enabled .deck-chapters-button:active, .depth-enabled .deck-icon-button:active { transform: scale(.98); }
    .deck-button:focus-visible, .deck-page-button:focus-visible, .contact-circle:focus-visible { outline-offset: 6px; }
    .deck-tool:focus-visible, .deck-chapters-button:focus-visible, .deck-icon-button:focus-visible { background: #d6e5c5; }
    .screen-link:is(:hover, :focus-visible) .screen-enlarge { background: #284d31; }
}
@media screen and (max-width: 1100px) {
    .partnership-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .partnership-card { min-height: 320px; }
    .deck-current { margin-left: 12px; }
}
@media screen and (max-width: 800px) {
    .presentation-page { font-size: 17px; }
    .slide-heading > p { max-width: 52ch; }
    .slide-heading > p br { display: initial; }
    .slide-lede, .technology-slide .slide-lede, .contact-main p { font-size: 18px; }
    .cover-copy > p { font-size: 18px; }
    .cover-bottom, .cover-bottom > span:last-child { font-size: 12px; }
    .capability-label { font-size: 11px; }
    .deck-tools .deck-tool { min-width: 44px; min-height: 44px; }
    .deck-current > [data-current-title] { max-width: 180px; }
    .project-index-caption h3 { font-size: 21px; }
    .gallery-topline, .gallery-bottomline { font-size: 11px; }
}
@media screen and (max-width: 480px) {
    .deck-slide { padding-inline: 22px; }
    .project-slide { padding: 0; }
    .slide-heading > p, .project-details dd, .solution-card p,
    .challenge-row p, .tech-layer p, .partnership-card > p:not(.deck-eyebrow),
    .roadmap-step > p:not(.deck-eyebrow), .project-features p { font-size: 16px; }
    .cover-copy > p { font-size: 17px; }
    .deck-eyebrow, .cover-top .deck-eyebrow, .contact-top .deck-eyebrow,
    .project-category { font-size: 11px; letter-spacing: .045em; }
    .project-index-caption h3 { font-size: 20px; }
    .project-index-caption > span, .project-index-invite > span:first-child { font-size: 13px; }
    .project-index-invite { padding: 15px; }
    .project-index-invite strong { font-size: 23px; }
    .project-index-invite .deck-text-link { font-size: 14px; }
    .project-copy .deck-button, .cover-actions .deck-button { font-size: 16px; padding-inline: 18px; }
    .solution-card h3 { font-size: 24px; }
    .solution-card .solution-number { font-size: 10px; }
    .solution-card { padding-inline: 17px; column-gap: 13px; }
    .market-stats p { font-size: 16px; }
    .market-stats p > span { font-size: 11px; }
    .partnership-grid { grid-template-columns: 1fr; gap: 18px; }
    .partnership-card { min-height: 0; padding: 25px; }
    .partnership-card h3 { font-size: 28px; }
    .partnership-index { margin-block: 20px; }
    .deck-chapters-button { font-size: 14px; padding-inline: 5px; }
    .deck-current > [data-counter] { font-size: 12px; }
    .deck-page-button { width: 46px; height: 46px; min-width: 46px; }
    .deck-paging { gap: 8px; }
    .chapter-grid > a.meaning-chapter { font-size: 16px; }
    .deck-status { font-size: 14px; }
    .contact-links strong { font-size: 19px; overflow-wrap: anywhere; }
}
@media screen and (max-width: 360px) {
    .project-index { grid-template-columns: 1fr; }
    .project-index-art { min-height: 150px; }
    .project-index-invite { min-height: 200px; padding: 22px; }
    .deck-slide h2 { overflow-wrap: anywhere; }
    .solution-card { grid-template-columns: 30px 1fr; padding-inline: 13px; column-gap: 10px; }
    .solution-card > .presentation-meaning-icon { width: 30px; height: 30px; }
    .solution-card > .presentation-meaning-icon > svg { width: 20px; height: 20px; }
    .solution-card h3 { font-size: 23px; }
    .tech-layer { grid-template-columns: 30px minmax(0, 1fr); padding-inline: 13px; gap: 5px 10px; }
}
@media print {
    .presentation-page .meaning-motif { display: none !important; }
    .solution-card > .presentation-meaning-icon { width: 28px; height: 28px; margin-bottom: 10px; }
    .solution-card > .presentation-meaning-icon > svg { width: 18px; height: 18px; }
    .solution-card { padding: 5mm; }
    .solution-card .solution-number { top: 5mm; right: 5mm; }
    .has-section-meaning > .presentation-meaning-icon { display: none !important; }
    .contact-links > a { padding-left: 0; }
    .contact-links > a > .presentation-meaning-icon { display: none !important; }
}

/* Give icon, label/value and arrow independent tracks. The icon span must
   never inherit the full-width grid placement used for the text label. */
@media screen {
    .contact-links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        padding-top: 28px;
        align-items: stretch;
    }
    .contact-links > a {
        position: relative;
        isolation: isolate;
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 22px;
        grid-template-rows: auto auto;
        align-content: center;
        align-items: center;
        gap: 6px 12px;
        min-width: 0;
        min-height: 122px;
        padding: 22px 18px;
        overflow: hidden;
        border: 1px solid #6f96454d;
        border-radius: 16px;
        background: linear-gradient(135deg, #f5ffdf73, #e1f4ba2e);
        box-shadow: inset 0 1px 0 #ffffff59, 0 5px 0 -3px #668c3e24;
    }
    .contact-links > a:last-child { grid-column: auto; }
    .contact-links > a > .presentation-meaning-icon {
        position: static;
        grid-column: 1;
        grid-row: 1 / 3;
        place-self: center;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        border-radius: 13px;
        background: #f0f8df;
        border-color: #779d4d66;
        color: #315b3a;
        transition: transform 220ms var(--depth-ease);
    }
    .contact-links > a > .presentation-meaning-icon > svg { width: 23px; height: 23px; }
    .contact-links > a > span:not(.presentation-meaning-icon):not(.card-gloss) {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        min-width: 0;
        font: 600 12px/1.5 var(--mono);
        letter-spacing: .06em;
        color: #3b5a2d;
    }
    .contact-links > a > strong {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        min-width: 0;
        font-size: clamp(18px, 1.4vw, 23px);
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: -.025em;
        overflow-wrap: anywhere;
    }
    .contact-links > a > .deck-icon {
        grid-column: 3;
        grid-row: 1 / 3;
        place-self: center end;
        width: 21px;
        height: 21px;
        color: #315b3a;
    }
    .contact-links > a > .card-gloss { grid-column: auto; grid-row: auto; }
    .contact-links > a > :not(.card-gloss),
    .contact-circle > :not(.card-gloss) { position: relative; z-index: 3; }
    .contact-links > a:is(:hover, :focus-visible) {
        background: #e8f8cc;
        border-color: #5b833f;
    }
    .contact-links > a:focus-visible { outline-color: #315b3a; outline-offset: 5px; }
    .depth-enabled .contact-links > a:is(:hover, :focus-visible) > .presentation-meaning-icon {
        transform: translateY(-2px) rotate(-3deg);
    }
    .depth-enabled .contact-links > a:active { transform: translateY(1px); }
}
@media screen and (max-width: 1200px) {
    .contact-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-links > a:last-child { grid-column: 1 / -1; }
}
@media screen and (max-width: 800px) {
    .contact-links { grid-template-columns: 1fr; gap: 12px; padding-top: 22px; }
    .contact-links > a { min-height: 104px; padding: 20px; }
    .contact-links > a:last-child { grid-column: auto; }
    .contact-links > a > strong { font-size: 20px; }
}
@media screen and (max-width: 600px) {
    .contact-links > a {
        grid-template-columns: 38px minmax(0, 1fr) 22px;
        gap: 10px 12px;
        min-height: 112px;
        padding: 18px;
        border-radius: 14px;
    }
    .contact-links > a > .presentation-meaning-icon { grid-row: 1; width: 38px; height: 38px; border-radius: 11px; }
    .contact-links > a > span:not(.presentation-meaning-icon):not(.card-gloss) { align-self: center; font-size: 12px; }
    .contact-links > a > .deck-icon { grid-row: 1; }
    .contact-links > a > strong { grid-column: 1 / -1; font-size: 19px; }
}
@media screen and (max-width: 360px) {
    .contact-links > a { padding: 16px; }
    .contact-links > a > strong { font-size: 18px; }
}