/* Subpages in the new look — loaded after styles.css, site.css and home.css
 * on fractional-cpo, ai-in-the-workplace, awards and hr-calculators.
 *
 * The page markup and copy are unchanged apart from the hero, so this file
 * restyles the existing components (section headers, service/finalist/
 * comparison/speaking cards, steps, FAQ, CTA) rather than replacing them.
 * Everything is scoped to body.page so the home page is untouched.
 */

body.page {
    background: var(--bg);
    color: var(--ink);
}

/* AI in the Workplace is a separate business with its own brand (navy, and
   a blue-to-green gradient from its logo). Swapping the tokens here recolours
   every component below, the dock CTA and the display accent. */
body.aiw {
    --bg: #F5F7FB;
    --ink: #0B1033;
    --accent: #1F5BFF;
    --accent-text: #1D4ED8;
    --peach: #2DD881;
    --muted: #3F4663;
}

/* The card icons are inline SVGs with Neni's colours as fill attributes;
   CSS outranks presentation attributes, so map them to the AIW palette. */
body.aiw svg [fill="#FFB9AF"] { fill: #D6E2FF; }
body.aiw svg [fill="#FF3130"] { fill: #1F5BFF; }
body.aiw svg [fill="#FF8730"] { fill: #2DD881; }

/* --- Hero: text left, the page's video right --- */
body.page .p-hero {
    padding-top: 56px;
    padding-bottom: 56px;
    text-align: left;
    background: none;
    overflow: visible;
}

.p-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 56px;
    align-items: center;
}

.p-hero-title {
    margin: 0 0 20px;
    font-size: clamp(2.75rem, 5.2vw, 5.25rem);
    color: var(--ink);
}

.p-hero-desc {
    max-width: 560px;
    margin: 0 0 24px;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--muted);
}

body.page .p-hero .hero-logo {
    display: block;
    width: min(360px, 100%);
    height: auto;
    margin: 0 0 16px;
}

body.page .p-hero .motion-toggle {
    margin-left: 0;
}

.p-hero-video {
    width: 100%;
}

/* A diagram video (psychosocial cycle) sits on the page with no card: the
   outer ring is its edge. The clip matches the ring in the 4:3 frame
   (radius 340 of 960 x 720), so the frame's corners never show. */
body.page .p-hero-video-bare {
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    clip-path: ellipse(35.5% 47.4% at 50% 50%);
}

/* HR tools is a working page: keep its hero compact so the calculators
   start high. body.page .p-hero above would otherwise override the 32px
   bottom padding styles.css gives .calc-hero. */
body.page .calc-hero.p-hero {
    padding-bottom: 32px;
}

body.page .calc-hero .p-hero-title {
    font-size: clamp(2.75rem, 5.5vw, 5rem);
}

body.page .calc-hero .p-hero-grid {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
}

/* --- Sections and headers --- */
body.page .award-detail {
    background: var(--bg);
}

body.page .award-detail-alt {
    background: #fff;
}

body.page .section-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--accent-text);
}

body.page .section-header h2,
body.page .award-detail-body h2,
body.page .award-detail-card h2 {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: 0.005em;
    font-size: clamp(2.25rem, 4.6vw, 4rem);
    color: var(--ink);
}

body.page .section-subtitle,
body.page .award-detail-body p {
    color: var(--muted);
}

/* --- Cards --- */
body.page .service-card,
body.page .speaking-card {
    background: var(--ink);
    border: 0;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

body.page .service-card h3,
body.page .speaking-card h3,
body.page .speaking-card-label {
    color: #fff;
}

body.page .service-card p,
body.page .speaking-card p,
body.page .speaking-card-desc {
    color: rgba(255, 255, 255, 0.8);
}

body.page .finalist-card,
body.page .award-detail-card,
body.page .faq-card,
body.page .comparison-card {
    background: #fff;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}

body.page .finalist-card {
    border-left: 4px solid var(--accent);
}

body.page .finalist-category,
body.page .comparison-label {
    color: var(--accent-text);
}

/* The year is a pill: white 12px text needs the darker red (5.8:1), not
   brand red (3.7:1). */
body.page .award-year {
    color: #fff;
    background: var(--accent-text);
}

body.page .finalist-card h3,
body.page .comparison-card h3,
body.page .award-detail-card h3 {
    color: var(--ink);
}

/* The highlighted comparison column: ink card, white text. */
body.page .comparison-card-highlight {
    background: var(--ink);
    border-color: var(--ink);
}

body.page .comparison-card-highlight h3,
body.page .comparison-card-highlight .comparison-attr,
body.page .comparison-card-highlight .comparison-value {
    color: #fff;
}

body.page .comparison-card-highlight .comparison-label-accent {
    color: var(--peach);
}

body.page .award-quote {
    border-left: 4px solid var(--accent);
    color: var(--ink);
}

/* styles.css colours the bold lead-in brand red (3.4:1 on the quote tint). */
body.page .award-quote strong {
    color: var(--accent-text);
}

/* styles.css tints the quote Neni peach; AIW gets its own pale blue. */
body.aiw .award-quote {
    background: #EEF3FF;
}

/* The video placeholder colour shows before the poster paints. */
body.aiw .feature-video {
    background: #10183F;
}

/* Small labels: the darker accent passes 4.5:1 where brand red and the old
   orange (2.4:1) did not. */
body.page .comparison-attr {
    color: var(--accent-text);
}

body.page .comparison-card-highlight .comparison-attr {
    color: var(--peach);
}

body.page .award-subtitle {
    color: var(--accent-text);
}

body.page .speaking-card-label {
    background: var(--accent-text);
}

/* --- Numbered steps (Fractional CPO) --- */
body.page .step-number {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(3.5rem, 6vw, 5rem);
    color: var(--accent);
}

body.page .step h3 {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    color: var(--ink);
}

body.page .step-connector {
    background: var(--accent);
    opacity: 0.35;
}

/* --- FAQ --- */
body.page .faq-question {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--ink);
}

/* --- Closing call to action: ink panel, accent button --- */
body.page .contact {
    background: var(--ink);
}

body.page .contact h2 {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.95;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    color: #fff;
}

body.page .contact p {
    color: rgba(255, 255, 255, 0.82);
}

body.page .contact .section-label-light {
    color: var(--peach);
}

body.page .btn-cta {
    background: var(--accent-text);
    border-radius: 999px;
    box-shadow: none;
}

body.page .btn-cta::before {
    display: none;
}

body.page .btn-cta:hover {
    background: var(--ink);
    box-shadow: 0 0 0 2px #fff;
}

/* --- Glowing honeycomb (hex.js, AI in the Workplace intro) --- */
body.page .award-detail-card:has(.hexgrid) {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 40px;
    align-items: center;
}

.hexgrid svg {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin: 0 auto;
    overflow: visible;
}

.hexgrid polygon {
    fill: transparent;
    stroke: rgba(11, 16, 51, 0.14);
    stroke-width: 1.5;
    transition: fill 0.7s ease, filter 0.7s ease;
}

.hexgrid text {
    font-family: var(--font-display);
    font-size: 30px;
    text-anchor: middle;
    dominant-baseline: middle;
    fill: var(--ink);
    opacity: 0;
    transition: opacity 0.7s ease;
}

.hexgrid .is-lit polygon {
    fill: var(--accent);
    fill-opacity: 0.55;
    filter: drop-shadow(0 0 14px var(--accent)) drop-shadow(0 0 28px var(--peach));
}

.hexgrid .is-lit text {
    opacity: 0.85;
}

/* Alternate cells glow in --peach, which is the AIW green on that page. */
.hexgrid .is-lit.is-alt polygon {
    fill: var(--peach);
    fill-opacity: 0.6;
    filter: drop-shadow(0 0 14px var(--peach)) drop-shadow(0 0 28px var(--peach));
}

/* Dark letters on the bright green, on both the light card and the navy panel. */
.hexgrid .is-lit.is-alt text,
body.aiw .contact .hexgrid .is-lit.is-alt text {
    fill: var(--ink);
}

/* Closing section on the AI page: honeycomb left, text right. On the dark
   panel the outlines and letters flip to light. */
body.aiw .cta-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: center;
    max-width: 1200px;
    text-align: left;
}

body.aiw .cta-split .hexgrid svg {
    max-width: 440px;
}

body.aiw .contact .hexgrid polygon {
    stroke: rgba(255, 255, 255, 0.16);
}

body.aiw .contact .hexgrid text {
    fill: #fff;
}

body.aiw .cta-split-text p:not(.section-label) {
    margin-left: 0;
    max-width: 560px;
}

@media (prefers-reduced-motion: reduce) {
    .hexgrid polygon,
    .hexgrid text {
        transition: none;
    }
}

/* --- Phones and small tablets --- */
@media (max-width: 899px) {
    .p-hero-grid,
    body.page .calc-hero .p-hero-grid,
    body.page .award-detail-card:has(.hexgrid),
    body.aiw .cta-split {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    body.aiw .cta-split .hexgrid svg {
        max-width: 280px;
    }

    .hexgrid svg {
        max-width: 340px;
    }

    body.page .p-hero {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    body.page .calc-hero.p-hero {
        padding-bottom: 24px;
    }
}

/* --- HR tools closing panel: dark like the other pages' closing panels --- */
body.page .calc-cta {
    background: var(--ink);
    color: #fff;
}

body.page .calc-cta h2 {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.95;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    color: #fff;
}

body.page .calc-cta p {
    color: rgba(255, 255, 255, 0.82);
}

/* Turnover page: the card title is the page's first h2 (heading order), so it
 * needs the size the h3 card titles get from styles.css. */
body.page .calc-card h2 {
    font-size: 1.0625rem;
    line-height: 1.3;
}

/* One calculator on its own: centred, not stranded in the left column. */
body.page .calc-grid-single {
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
}

body.page .calc-cta p a {
    color: #fff;
    text-decoration: underline;
}

/* A note after a row of cards or the FAQ needs room above it. */
body.page .services-grid + .section-subtitle,
body.page .faq-grid + .section-subtitle {
    margin-top: 40px;
}

/* Links inside running text must look like links. */
body.page .section-subtitle a,
body.page .faq-answer a {
    color: var(--accent-text);
    text-decoration: underline;
}

body.page .service-card p a {
    color: #fff;
    text-decoration: underline;
}