/* Shared marketing-page primitives for the public CCTC pages.

   This is the single source of truth for the section styling that the public
   marketing pages have in common — the eyebrow, section header, buttons,
   values/mottos, the journey steps, the people carousel, the bar chart and the
   news ticker — together with their shared media queries and the reduced-motion
   / forced-colours blocks.

   Every rule is scoped under the shared root class `.cctc-public-page`, which a
   page applies to its root element alongside its own page class. The descendant
   combinator (e.g. `.cctc-public-page .btn`) keeps the same specificity the old
   per-page-scoped rules had, so these still beat the CDN Bootstrap base.

   Colours come from the public --web-* layer (see WebLayout.razor.css); the
   white-on-ink hairline/text alphas used only on the fixed dark bands are
   page-agnostic presentational vars declared here. Custom properties such as
   --web-*, --primary-font and --mono-font are defined on ancestors and inherit
   into the page content regardless of which stylesheet declares the rule. */

.cctc-public-page {
    /* page-local white-alpha roles for the fixed dark bands (hero/values/news) */
    --muted: rgba(255, 255, 255, 0.62);
    --muted-2: rgba(255, 255, 255, 0.45);
    --rule: rgba(255, 255, 255, 0.10);
    --rule-2: rgba(255, 255, 255, 0.18);

    --wrap: 71.25rem;          /* 1140px */

    font-family: var(--primary-font);
    color: var(--web-background-color);
    background: var(--web-paper);
    /* Public pages are light. Assert it locally so that if a prior dark route's root color-scheme:dark
       (html.dark-chrome, set for the flash fix in app.css) lingers after an enhanced (SPA) navigation into
       a light page, this page's own form controls / scrollbars still render light. Harmless on a fresh load
       where html carries no dark-chrome class. */
    color-scheme: light;
}

.cctc-public-page .wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    /* 22px, but capped against the viewport. A rem gutter doubles with the browser's
       default font size, so at 200% text on a 320px viewport this and .graph-wrap
       together claimed 168px — over half the width — and forced horizontal scroll
       (WCAG 1.4.4 / 1.4.10). 6vw only bites below ~367px, so rendering at the 375px
       mobile tier and above is unchanged. */
    padding: 0 min(1.375rem, 6vw);
}

/* shared eyebrow + section header --------------------------------------- */
.cctc-public-page .eyebrow {
    font-family: var(--mono-font);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    /* Darken the accent toward ink for text legibility: the raw accents are
       graphical colours (~3.3:1 on paper), so 65% accent + 35% ink clears the
       4.5:1 text minimum on the paper/card/tint surfaces while keeping the hue.
       Dark-band eyebrows override `color` inline and are unaffected. */
    color: color-mix(in oklch, var(--accent, var(--web-highlight-color)) 65%, var(--web-background-color));
}

.cctc-public-page .eyebrow .dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 4px color-mix(in oklch, currentColor 18%, transparent);
    flex-shrink: 0;
}

.cctc-public-page .band {
    padding: 4rem 0;
}

.cctc-public-page .sec-head {
    max-width: 41.25rem;
}

.cctc-public-page .sec-head h2 {
    font-size: 1.875rem;       /* 30px */
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0.875rem 0 0;
    line-height: 1.1;
}

.cctc-public-page .sec-head p {
    font-size: 1.03rem;
    line-height: 1.62;
    color: var(--web-ink-70);
    margin: 0.875rem 0 0;
    text-wrap: pretty;
}

/* ============================ BUTTONS ============================ */
.cctc-public-page .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5625rem;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.8125rem 1.375rem;
    border-radius: 999px;
    transition: transform 0.15s, background 0.15s, border-color 0.15s, color 0.15s, filter 0.15s;
}

.cctc-public-page .btn svg {
    width: 1rem;
    height: 1rem;
}

.cctc-public-page .btn.primary {
    background: var(--web-highlight-color);
    color: var(--web-background-color);
}

.cctc-public-page .btn.primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.cctc-public-page .btn.ghost {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid var(--rule-2);
}

.cctc-public-page .btn.ghost:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
}

.cctc-public-page .btn:focus-visible {
    outline: 3px solid var(--web-highlight-color);
    outline-offset: 3px;
}

/* ===================== VALUES / MOTTOS ===================== */
.cctc-public-page .values {
    background: var(--web-background-color);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.cctc-public-page .values::before {
    content: "";
    position: absolute;
    left: -7.5rem;
    bottom: -10rem;
    width: 26.25rem;
    height: 26.25rem;
    background: radial-gradient(circle at 50% 50%, rgba(53, 160, 215, 0.12), transparent 64%);
    pointer-events: none;
}

.cctc-public-page .values .sec-head h2 {
    color: #fff;
}

.cctc-public-page .values .sec-head p {
    color: rgba(255, 255, 255, 0.74);
}

.cctc-public-page .motto-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.cctc-public-page .motto {
    border: 1px solid var(--rule-2);
    border-radius: 1.125rem;
    padding: 1.875rem 1.75rem 2rem;
    background: rgba(255, 255, 255, 0.03);
    position: relative;
}

.cctc-public-page .motto .num {
    font-family: var(--mono-font);
    font-size: 0.6875rem;
    color: var(--muted-2);
    letter-spacing: 0.12em;
}

.cctc-public-page .motto h3 {
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 1rem 0 0;
}

.cctc-public-page .motto h3 .pip {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 999px;
    margin-left: 0.25rem;
    background: var(--mc, var(--web-highlight-color));
    vertical-align: middle;
}

.cctc-public-page .motto p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.74);
    margin: 0.75rem 0 0;
    text-wrap: pretty;
}

/* ===================== JOURNEY STEPS ===================== */
.cctc-public-page .steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.125rem;
    margin-top: 3rem;
}

.cctc-public-page .step {
    background: var(--web-card);
    border: 1px solid var(--web-ink-08);
    border-radius: 1.125rem;
    padding: 1.625rem 1.5rem 1.75rem;
    position: relative;
    /* let the grid track shrink below the card's content size so it can't push
       the page wider at 320px + 200% text zoom (WCAG 1.4.10) */
    min-width: 0;
    overflow-wrap: anywhere;
    box-shadow: 0 1px 2px rgba(15, 37, 55, 0.04);
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.cctc-public-page .step:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -22px rgba(15, 37, 55, 0.40);
    border-color: var(--web-ink-12);
}

.cctc-public-page .step .idx {
    font-family: var(--mono-font);
    font-size: 0.75rem;
    font-weight: 500;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 0.625rem;
    display: grid;
    place-items: center;
    background: color-mix(in oklch, var(--sc, var(--web-accent-clinical)) 14%, white);
    /* Darkened accent (65% + ink) so the number clears 4.5:1 on the pale tint. */
    color: color-mix(in oklch, var(--sc, var(--web-accent-clinical)) 65%, var(--web-background-color));
    border: 1px solid color-mix(in oklch, var(--sc, var(--web-accent-clinical)) 28%, transparent);
}

.cctc-public-page .step h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 1.125rem 0 0;
}

.cctc-public-page .step p {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--web-ink-70);
    margin: 0.5rem 0 0;
    text-wrap: pretty;
}

/* horizontal connector only appears in the 4-up desktop layout */
.cctc-public-page .step .conn {
    display: none;
}

/* ===================== PEOPLE CAROUSEL ===================== */
.cctc-public-page .people {
    background: var(--web-paper-2);
}

.cctc-public-page .carousel {
    margin-top: 2.5rem;
    position: relative;
}

.cctc-public-page .carousel-viewport {
    overflow: hidden;
    border-radius: 1.375rem;
}

.cctc-public-page .carousel-track {
    display: flex;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.cctc-public-page .slide {
    min-width: 100%;
}

.cctc-public-page .person {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--web-card);
    border: 1px solid var(--web-ink-08);
    border-radius: 1.375rem;
    overflow: hidden;
    box-shadow: 0 20px 50px -34px rgba(15, 37, 55, 0.45);
}

.cctc-public-page .person-media {
    position: relative;
    background: var(--web-background-color);
    overflow: hidden;
    min-height: 17.5rem;
}

.cctc-public-page .person-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cctc-public-page .person-media .role-pin {
    position: absolute;
    left: 1.375rem;
    top: 1.375rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.5625rem;
    background: rgba(10, 26, 40, 0.78);
    backdrop-filter: blur(6px);
    border: 1px solid var(--rule-2);
    color: #fff;
    font-family: var(--mono-font);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.5rem 0.875rem;
    border-radius: 999px;
}

.cctc-public-page .person-media .role-pin .dot {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 999px;
    background: var(--pc, var(--web-highlight-color));
}

/* striped placeholder for roles without a photo yet */
.cctc-public-page .ph {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(135deg, rgba(15, 37, 55, 0.05) 0 14px, rgba(15, 37, 55, 0.09) 14px 28px),
        linear-gradient(180deg, #e9edf1, #dfe5ea);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.75rem;
}

.cctc-public-page .ph .ph-mark {
    width: 4rem;
    height: 4rem;
    opacity: 0.5;
}

.cctc-public-page .ph .ph-label {
    font-family: var(--mono-font);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--web-ink-70);
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--web-ink-12);
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    text-transform: uppercase;
}

.cctc-public-page .person-body {
    padding: 1.875rem 1.625rem;
    display: flex;
    flex-direction: column;
}

.cctc-public-page .person-body .quote {
    font-size: 1.1875rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.4;
    margin: 1.375rem 0 0;
    text-wrap: pretty;
}

.cctc-public-page .person-body .blurb {
    font-size: 0.9375rem;
    line-height: 1.62;
    color: var(--web-ink-70);
    margin: 1.125rem 0 0;
    text-wrap: pretty;
}

.cctc-public-page .person-tasks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.375rem;
}

.cctc-public-page .task-chip {
    font-family: var(--mono-font);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--web-ink-70);
    background: var(--web-paper);
    border: 1px solid var(--web-ink-12);
    padding: 0.4375rem 0.75rem;
    border-radius: 0.5rem;
}

.cctc-public-page .person-who {
    margin-top: auto;
    padding-top: 1.625rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.cctc-public-page .person-who .av {
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--web-background-color);
    color: var(--web-paper);
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 0 0 1.5px color-mix(in oklch, var(--accent, var(--web-accent-clinical)) 55%, transparent), 0 0 0 5px var(--web-card);
}

.cctc-public-page .person-who .nm {
    font-weight: 600;
    font-size: 0.97rem;
    letter-spacing: -0.01em;
}

.cctc-public-page .person-who .rl {
    font-size: 0.8125rem;
    color: var(--web-ink-70);
}

.cctc-public-page .carousel-controls {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 1rem;
    margin-top: 1.5rem;
}

.cctc-public-page .carousel-controls-left {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    justify-content: center;
    /* At a raised browser default font the dots + .future-note no longer fit one
       line; without wrapping the note overflows its parent and the page scrolls
       horizontally (WCAG 1.4.4 / 1.4.10). min-width:0 lets the note shrink rather
       than force its intrinsic width. */
    flex-wrap: wrap;
}

.cctc-public-page .carousel-controls-left > * {
    min-width: 0;
}

.cctc-public-page .dots {
    display: flex;
    gap: 0.5625rem;
    align-items: center;
    justify-content: center;
}

.cctc-public-page .dots button {
    width: 0.5625rem;
    height: 0.5625rem;
    border-radius: 999px;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: var(--web-ink-12);
    transition: width 0.25s, background 0.25s;
}

.cctc-public-page .dots button.on {
    width: 1.875rem;
    background: var(--web-accent-clinical);
}

.cctc-public-page .dots button:focus-visible {
    outline: 3px solid var(--web-accent-clinical);
    outline-offset: 3px;
}

.cctc-public-page .future-note {
    font-family: var(--mono-font);
    font-size: 0.71875rem;
    color: var(--web-ink-70);
    letter-spacing: 0.02em;
    text-align: center;
}

.cctc-public-page .arrows {
    display: flex;
    gap: 0.625rem;
    justify-content: center;
}

.cctc-public-page .arrows button {
    width: 2.875rem;
    height: 2.875rem;
    border-radius: 999px;
    cursor: pointer;
    background: var(--web-card);
    border: 1px solid var(--web-ink-12);
    color: var(--web-background-color);
    display: grid;
    place-items: center;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.cctc-public-page .arrows button:hover {
    background: var(--web-background-color);
    border-color: var(--web-background-color);
    color: #fff;
    transform: translateY(-1px);
}

.cctc-public-page .arrows button:focus-visible {
    outline: 3px solid var(--web-accent-clinical);
    outline-offset: 3px;
}

.cctc-public-page .arrows svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* ===================== GRAPH / BAR CHART ===================== */
.cctc-public-page .graph-band {
    background: var(--web-paper);
}

.cctc-public-page .graph-wrap {
    margin-top: 2.5rem;
    background: var(--web-card);
    border: 1px solid var(--web-ink-08);
    border-radius: 1.375rem;
    /* horizontal gutter capped against the viewport for the same reason as .wrap */
    padding: 1.625rem min(1.25rem, 6vw) 1.5rem;
    box-shadow: 0 1px 2px rgba(15, 37, 55, 0.04);
}

.cctc-public-page .graph-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.875rem;
}

.cctc-public-page .graph-top .gt-n {
    font-family: var(--mono-font);
    font-size: 2.875rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1;
}

.cctc-public-page .graph-top .gt-l {
    font-size: 0.8125rem;
    color: var(--web-ink-70);
    margin-top: 0.375rem;
}

.cctc-public-page .graph-legend {
    display: flex;
    gap: 1.125rem;
    flex-wrap: wrap;
    font-family: var(--mono-font);
    font-size: 0.6875rem;
    color: var(--web-ink-70);
}

.cctc-public-page .graph-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
}

.cctc-public-page .graph-legend i {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 3px;
    display: inline-block;
}

.cctc-public-page .bars {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Mobile base: stack the label on its own row above the bar + value, so no
   fixed-width rem column can push the page wider at 320px + 200% text zoom
   (WCAG 1.4.10). The inline 3-column layout returns at 48rem. */
.cctc-public-page .bar-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "label label"
        "bar   val";
    align-items: center;
    gap: 0.25rem 0.625rem;
    min-width: 0;
}

.cctc-public-page .bar-row .label {
    grid-area: label;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--web-background-color);
}

.cctc-public-page .bar-row .label .sub {
    display: block;
    font-family: var(--mono-font);
    font-size: 0.656rem;
    color: var(--web-ink-70);
    letter-spacing: 0.04em;
    margin-top: 1px;
}

.cctc-public-page .bar-track {
    grid-area: bar;
    min-width: 0;
    height: 1.625rem;
    border-radius: 0.5rem;
    background: var(--web-paper-2);
    overflow: hidden;
    position: relative;
}

.cctc-public-page .bar-fill {
    height: 100%;
    width: 0;
    border-radius: 0.5rem;
    background: linear-gradient(90deg, color-mix(in oklch, var(--bc) 78%, white), var(--bc));
    transition: width 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cctc-public-page .bar-row .val {
    grid-area: val;
    font-family: var(--mono-font);
    font-size: 0.78rem;
    color: var(--web-ink-70);
    text-align: right;
}

.cctc-public-page .graph-foot {
    margin-top: 1.625rem;
    padding-top: 1.125rem;
    border-top: 1px solid var(--web-ink-08);
    font-size: 0.8125rem;
    color: var(--web-ink-70);
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.cctc-public-page .graph-foot .pip {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 999px;
    background: var(--web-accent-data);
    flex-shrink: 0;
}

/* ===================== NEWS TICKER ===================== */
.cctc-public-page .news {
    background: var(--web-background-color);
    color: #fff;
    padding: 4rem 0 4.5rem;
    position: relative;
    overflow: hidden;
}

.cctc-public-page .news .wrap {
    position: relative;
    z-index: 2;
}

.cctc-public-page .news .sec-head h2 {
    color: #fff;
}

.cctc-public-page .news .sec-head p {
    color: rgba(255, 255, 255, 0.74);
}

.cctc-public-page .ticker {
    margin-top: 2.5rem;
    position: relative;
}

.cctc-public-page .ticker::before,
.cctc-public-page .ticker::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3.75rem;
    z-index: 3;
    pointer-events: none;
}

.cctc-public-page .ticker::before {
    left: 0;
    background: linear-gradient(90deg, var(--web-background-color), transparent);
}

.cctc-public-page .ticker::after {
    right: 0;
    background: linear-gradient(270deg, var(--web-background-color), transparent);
}

.cctc-public-page .ticker-track {
    display: flex;
    gap: 1.125rem;
    width: max-content;
    animation: cctc-marquee 46s linear infinite;
}

.cctc-public-page .ticker:hover .ticker-track,
.cctc-public-page .ticker:focus-within .ticker-track {
    animation-play-state: paused;
}

@keyframes cctc-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.cctc-public-page .news-card {
    width: 18rem;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--rule-2);
    border-radius: 1rem;
    overflow: hidden;
}

.cctc-public-page .news-thumb {
    height: 8.25rem;
    position: relative;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 12px, rgba(255, 255, 255, 0.09) 12px 24px),
        linear-gradient(135deg, color-mix(in oklch, var(--nc, var(--web-highlight-color)) 60%, var(--web-background-color)), var(--web-ink-deep));
    display: flex;
    align-items: flex-end;
    padding: 0.75rem;
}

.cctc-public-page .news-thumb .tag {
    font-family: var(--mono-font);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(10, 26, 40, 0.72);
    border: 1px solid var(--rule-2);
    color: #fff;
    padding: 0.3125rem 0.625rem;
    border-radius: 0.375rem;
}

.cctc-public-page .news-card .nbody {
    padding: 1rem 1.125rem 1.125rem;
}

.cctc-public-page .news-card .ndate {
    font-family: var(--mono-font);
    font-size: 0.656rem;
    color: var(--web-highlight-color);
    letter-spacing: 0.06em;
}

.cctc-public-page .news-card h3 {
    font-size: 0.97rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0.5rem 0 0;
    line-height: 1.32;
    color: #fff;
    text-wrap: pretty;
}

/* ============================ TABLET (≥ 48rem) ============================ */
@media (min-width: 48rem) {
    .cctc-public-page .wrap {
        padding: 0 2.5rem;
    }

    .cctc-public-page .band {
        padding: 5rem 0;
    }

    .cctc-public-page .sec-head h2 {
        font-size: 2.375rem;
    }

    .cctc-public-page .motto-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cctc-public-page .steps {
        grid-template-columns: 1fr 1fr;
    }

    /* controls become a single row once there is width for it */
    .cctc-public-page .carousel-controls {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .cctc-public-page .person-body {
        padding: 2.75rem 2.75rem 2.5rem;
    }

    .cctc-public-page .person-body .quote {
        font-size: 1.375rem;
    }

    .cctc-public-page .graph-wrap {
        padding: 2.375rem 2.5rem 2.125rem;
    }

    .cctc-public-page .bar-row {
        grid-template-columns: 7.5rem 1fr 2.375rem;
        grid-template-areas: "label bar val";
        gap: 0.625rem;
    }

    .cctc-public-page .news-card {
        width: 21.25rem;
    }
}

/* ============================ DESKTOP (≥ 80rem) ============================ */
@media (min-width: 80rem) {
    .cctc-public-page .band {
        padding: 5.375rem 0;
    }

    .cctc-public-page .sec-head h2 {
        font-size: 2.375rem;
    }

    .cctc-public-page .motto-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* 4-up steps with the horizontal connector */
    .cctc-public-page .steps {
        grid-template-columns: repeat(4, 1fr);
    }

    /* longer journeys use a 3-up grid so 9 steps read as 3 rows of 3 */
    .cctc-public-page .steps.six {
        grid-template-columns: repeat(3, 1fr);
    }

    .cctc-public-page .step .conn {
        display: block;
        position: absolute;
        top: 2.6875rem;
        right: -0.75rem;
        width: 1.125rem;
        height: 2px;
        background: var(--web-ink-12);
        z-index: 1;
    }

    .cctc-public-page .step:last-child .conn {
        display: none;
    }

    .cctc-public-page .person {
        grid-template-columns: 1.05fr 1fr;
        min-height: 28.75rem;
    }

    .cctc-public-page .person-body {
        padding: 2.75rem 2.75rem 2.5rem;
    }

    .cctc-public-page .bar-row {
        grid-template-columns: 10.5rem 1fr 2.875rem;
        grid-template-areas: "label bar val";
        gap: 1rem;
    }

    .cctc-public-page .bar-row .label {
        font-size: 0.875rem;
    }
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
    .cctc-public-page .ticker-track {
        animation: none;
    }

    .cctc-public-page .carousel-track,
    .cctc-public-page .bar-fill,
    .cctc-public-page .step,
    .cctc-public-page .btn,
    .cctc-public-page .arrows button,
    .cctc-public-page .dots button {
        transition: none;
    }
}

/* ============================ FORCED COLOURS ============================ */
@media (forced-colors: active) {
    .cctc-public-page .motto,
    .cctc-public-page .step,
    .cctc-public-page .person,
    .cctc-public-page .graph-wrap,
    .cctc-public-page .task-chip,
    .cctc-public-page .news-card {
        border: 1px solid CanvasText;
    }

    /* gradient/colour-mix fills vanish in forced colours — keep bars + active dot visible */
    .cctc-public-page .bar-fill,
    .cctc-public-page .dots button.on {
        background: Highlight;
    }

    /* The eyebrows keep their author colour against the forced Canvas background,
       which is too low contrast. Pin them to the system text colour. !important
       is required because the dark-band eyebrows carry an inline `color`, which a
       normal rule can't beat.

       Pin the BACKGROUND with it, not the colour alone: Chromium also forces the
       backdrop to Canvas, but WebKit does not, so a colour-only pin puts CanvasText
       black on the band's own dark fill — measured 1.34:1 on webkit, worse than the
       unpinned original. Always pin the pair. */
    .cctc-public-page .eyebrow {
        color: CanvasText !important;
        background: Canvas;
    }
}