/* ==========================================================================
   OUR CEO — page-scoped styles
   Light palette shared with client-coins.css and experience-timeline.css:
   a pale mint page, white cards, navy type and brand green for emphasis.
   Loaded only on /our-ceo via the conditional in layouts/default.htm.
   ========================================================================== */

.ceo-page {
    --ceo-page-bg: linear-gradient(to right, #f1f6f7, #d5f1f1);
    --ceo-ink: var(--gf-navy);
    --ceo-ink-soft: rgba(48, 68, 79, 0.74);
    --ceo-ink-faint: rgba(48, 68, 79, 0.56);
    --ceo-line: rgba(94, 179, 70, 0.26);
    --ceo-card: #ffffff;
    --ceo-card-shadow: 0 14px 34px rgba(48, 68, 79, 0.1);

    position: relative;
    font-family: "Poppins", sans-serif;
    background: var(--ceo-page-bg);
}

/* The theme sets a global `img, svg { border-radius: 15px }`. That is wrong for
   a cut-out portrait and for icon glyphs, so it is undone inside this page only
   — removing it globally would ripple across every other template. */
.ceo-page .ceo-hero-portrait,
.ceo-page svg {
    border-radius: 0;
}

/* ---------- shared section furniture ---------- */
.ceo-section-eyebrow {
    display: inline-block;
    margin-bottom: 0.85rem;
    padding: 0.38rem 1rem;
    border-radius: 100px;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gf-green-dark);
    background: rgba(94, 179, 70, 0.1);
    border: 1px solid var(--ceo-line);
}

.ceo-section-eyebrow--light {
    color: #d8ecc4;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.26);
}

.ceo-section-title {
    margin: 0 0 0.9rem;
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.22;
    letter-spacing: -0.015em;
    color: var(--ceo-ink);
}

.ceo-section-intro {
    max-width: 44rem;
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.75;
    color: var(--ceo-ink-soft);
}

.ceo-section-head {
    max-width: 46rem;
    margin: 0 auto 2.6rem;
    text-align: center;
}

.ceo-section-head .ceo-section-intro {
    margin-inline: auto;
}

/* ---------- buttons ---------- */
.ceo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.82rem 1.6rem;
    border-radius: 100px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease,
        color 0.25s ease;
}

.ceo-btn:hover {
    transform: translateY(-2px);
}

.ceo-btn--solid {
    color: #ffffff;
    background: linear-gradient(90deg, var(--gf-green) 0%, var(--gf-green-dark) 100%);
    box-shadow: 0 10px 24px rgba(94, 179, 70, 0.3);
}

.ceo-btn--solid:hover {
    color: #ffffff;
    box-shadow: 0 16px 30px rgba(94, 179, 70, 0.38);
}

.ceo-btn--ghost {
    color: var(--ceo-ink);
    background: transparent;
    border: 1.5px solid rgba(48, 68, 79, 0.24);
}

.ceo-btn--ghost:hover {
    color: var(--gf-green-dark);
    border-color: var(--gf-green);
}

.ceo-btn--ghost-light {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.4);
}

.ceo-btn--ghost-light:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.ceo-hero {
    position: relative;
    overflow: hidden;
    /* Top padding is measured from the fixed header rather than from the
       viewport: the old clamp bottomed out at 2.5rem, which put the eyebrow
       underneath the header on narrow and mid-width screens. */
    padding: calc(var(--gf-header-h) + clamp(1rem, 2.5vw, 2rem)) 0 clamp(2rem, 4vw, 3rem);
}

.ceo-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.ceo-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
}

.ceo-hero-glow--a {
    top: -12%;
    right: 2%;
    width: 30rem;
    height: 30rem;
    background: rgba(94, 179, 70, 0.17);
}

.ceo-hero-glow--b {
    bottom: -20%;
    left: -6%;
    width: 26rem;
    height: 26rem;
    background: rgba(120, 185, 69, 0.12);
}

.ceo-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}

.ceo-hero-eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.38rem 1rem;
    border-radius: 100px;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gf-green-dark);
    background: rgba(94, 179, 70, 0.1);
    border: 1px solid var(--ceo-line);
}

.ceo-hero-title {
    margin: 0 0 0.6rem;
    font-weight: 700;
    font-size: clamp(1.9rem, 4vw, 3.1rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--ceo-ink);
}

.ceo-hero-title-accent {
    color: var(--gf-green);
}

.ceo-hero-role {
    margin: 0 0 1.1rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ceo-ink-faint);
}

.ceo-hero-desc {
    max-width: 32rem;
    margin: 0 0 1.5rem;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ceo-ink-soft);
}

.ceo-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 1.8rem;
    padding: 0;
    list-style: none;
}

.ceo-hero-chip {
    padding: 0.44rem 0.95rem;
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ceo-ink);
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--ceo-line);
}

.ceo-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

/* ---------- portrait stage ---------- */
.ceo-hero-stage {
    position: relative;
    display: grid;
    place-items: end center;
    min-height: clamp(21rem, 42vw, 31rem);
}

/* Brand hexagon echoing the logo mark, sitting behind the cut-out. */
.ceo-hero-hex {
    position: absolute;
    bottom: 6%;
    left: 50%;
    width: min(94%, 25rem);
    aspect-ratio: 1 / 1.08;
    transform: translateX(-50%);
    background: linear-gradient(160deg, #6fbf4e 0%, #4f9a3c 55%, #3d7f31 100%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    box-shadow: 0 24px 60px rgba(48, 68, 79, 0.22);
}

.ceo-hero-ring {
    position: absolute;
    bottom: 2%;
    left: 50%;
    width: min(104%, 28rem);
    aspect-ratio: 1 / 1;
    transform: translateX(-50%);
    border: 1.5px dashed rgba(94, 179, 70, 0.35);
    border-radius: 50%;
}

.ceo-hero-portrait {
    position: relative;
    z-index: 2;
    width: min(100%, 24rem);
    height: auto;
    display: block;
    filter: drop-shadow(0 22px 34px rgba(48, 68, 79, 0.28));
    /* ceo.js nudges this on scroll; the variable keeps the transform in one place. */
    transform: translate3d(0, var(--ceo-parallax, 0px), 0);
    will-change: transform;
}

.ceo-hero-badge {
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: 16%;
    display: grid;
    gap: 0.1rem;
    padding: 0.85rem 1.15rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--ceo-line);
    box-shadow: var(--ceo-card-shadow);
    backdrop-filter: blur(6px);
}

.ceo-hero-badge i {
    font-size: 1rem;
    color: var(--gf-green);
}

.ceo-hero-badge b {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ceo-ink);
}

.ceo-hero-badge small {
    font-size: 0.72rem;
    color: var(--ceo-ink-faint);
}

/* ---------- hero motion -------------------------------------------------
   Two layers, kept apart on purpose:

   Entrance — hex, ring and portrait assemble once on load. The hero is above
   the fold, so AOS (which fires on scroll) is the wrong tool here.

   Ambient — a slow float and orbit that never stops. Everything below moves
   on transform / translate / rotate / opacity only, so it composites and
   never triggers layout.

   The portrait is the one element already carrying a transform: ceo.js writes
   --ceo-parallax into it on scroll. Its float therefore uses the independent
   `translate` property instead, which the engine applies before `transform`,
   so the two compose instead of overwriting each other. Rotation and scale do
   NOT commute with the hex and ring's centring translateX(-50%), so those keep
   every step inside one `transform`.

   The reduced-motion block at the foot of this file drops all of it. Each base
   rule above is written at its finished state, so removing the animation
   leaves the hero correct rather than invisible. */

@keyframes ceoHexIn {
    from { opacity: 0; transform: translateX(-50%) translateY(28px) scale(0.94) rotate(-4deg); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1) rotate(0deg); }
}

@keyframes ceoHexFloat {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
    50%      { transform: translateX(-50%) translateY(-14px) rotate(1.2deg); }
}

/* One light pass across the face of the hexagon, then a long wait. */
@keyframes ceoHexSheen {
    0%        { transform: translateX(-130%) skewX(-12deg); }
    26%, 100% { transform: translateX(130%) skewX(-12deg); }
}

@keyframes ceoHaloIn {
    from { opacity: 0; transform: translateX(-50%) scale(0.82); }
    to   { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes ceoHaloSpin {
    from { transform: translateX(-50%) rotate(0deg); }
    to   { transform: translateX(-50%) rotate(360deg); }
}

@keyframes ceoHaloSpinBack {
    to { transform: rotate(-360deg); }
}

@keyframes ceoOrbitSpin {
    to { transform: rotate(360deg); }
}

/* The node breathes on its own clock, so the three never pulse together.
   `scale` rather than `transform`, because the parent box owns the rotation
   and a transform here would have to restate it. */
@keyframes ceoNodePulse {
    0%, 100% { scale: 1; opacity: 0.82; }
    50%      { scale: 1.45; opacity: 1; }
}

@keyframes ceoPortraitIn {
    from { opacity: 0; scale: 0.96; }
    to   { opacity: 1; scale: 1; }
}

@keyframes ceoPortraitFloat {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -11px; }
}

@keyframes ceoBadgeFloat {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -9px; }
}

@keyframes ceoBadgeSpark {
    0%, 100% { opacity: 1; scale: 1; }
    50%      { opacity: 0.72; scale: 1.14; }
}

@keyframes ceoGlowDriftA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-28px, 22px) scale(1.12); }
}

@keyframes ceoGlowDriftB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(24px, -20px) scale(1.1); }
}

.ceo-hero-glow--a { animation: ceoGlowDriftA 17s ease-in-out infinite; }
.ceo-hero-glow--b { animation: ceoGlowDriftB 21s ease-in-out 1.5s infinite; }

.ceo-hero-hex {
    animation:
        ceoHexIn 1s cubic-bezier(0.2, 0.8, 0.25, 1) both,
        ceoHexFloat 9s ease-in-out 1s infinite;
}

/* clip-path on the hexagon also clips its children, so the sweep needs no
   mask of its own — it simply cannot escape the six sides. */
.ceo-hero-hex::before {
    content: "";
    position: absolute;
    inset: -20% -10%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.38) 50%,
        rgba(255, 255, 255, 0) 100%);
    transform: translateX(130%) skewX(-12deg);
    animation: ceoHexSheen 11s ease-in-out 2.2s infinite;
}

.ceo-hero-ring {
    animation:
        ceoHaloIn 1.1s cubic-bezier(0.2, 0.8, 0.25, 1) 0.15s both,
        ceoHaloSpin 72s linear 1.25s infinite;
}

/* A second, tighter dashed circle. It sits inside the outer ring, so it
   inherits that rotation and subtracts its own — the two never line up, which
   is what reads as depth rather than as one spinning wheel. */
.ceo-hero-ring::before {
    content: "";
    position: absolute;
    inset: 13%;
    border: 1px dashed rgba(94, 179, 70, 0.2);
    border-radius: 50%;
    animation: ceoHaloSpinBack 54s linear infinite;
}

/* Credential nodes travelling the ring. Each node is a full-size box that
   spins; the dot itself is drawn on that box's top edge by ::before. Sizing
   the orbit in percentages would fail — a percentage in translate() resolves
   against the dot's own 10px, not the circle — so the radius comes from the
   box instead and stays correct at every stage width. */
.ceo-hero-orbit {
    position: absolute;
    /* Above the hexagon, below the portrait (z-index 2): a node on the near
       side of the circle passes behind him and comes back out, which is what
       makes the orbit read as a circle rather than as three dots on glass. */
    z-index: 1;
    bottom: 2%;
    left: 50%;
    width: min(104%, 28rem);
    aspect-ratio: 1 / 1;
    transform: translateX(-50%);
    pointer-events: none;
}

.ceo-hero-orbit i {
    position: absolute;
    inset: 0;
    /* One shared duration; the negative delays spread the three nodes evenly
       around the circle without a keyframe set each. */
    animation: ceoOrbitSpin 28s linear infinite;
}

.ceo-hero-orbit i:nth-child(2) { animation-delay: -9.33s; }
.ceo-hero-orbit i:nth-child(3) { animation-delay: -18.66s; }

.ceo-hero-orbit i::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: var(--gf-green);
    box-shadow:
        0 0 0 4px rgba(94, 179, 70, 0.16),
        0 0 14px rgba(94, 179, 70, 0.7);
    animation: ceoNodePulse 2.9s ease-in-out infinite;
}

.ceo-hero-orbit i:nth-child(2)::before {
    width: 7px; height: 7px; margin-left: -3.5px; top: -3.5px;
    animation-delay: -0.95s;
}

.ceo-hero-orbit i:nth-child(3)::before {
    width: 13px; height: 13px; margin-left: -6.5px; top: -6.5px;
    animation-delay: -1.9s;
}

.ceo-hero-portrait {
    /* Entrance touches opacity and scale, the float touches translate, the
       parallax owns transform — three properties, no collisions. */
    animation:
        ceoPortraitIn 1s cubic-bezier(0.2, 0.8, 0.25, 1) 0.25s both,
        ceoPortraitFloat 8s ease-in-out 1.25s infinite;
}

.ceo-hero-badge {
    animation: ceoBadgeFloat 6.5s ease-in-out 0.6s infinite;
}

.ceo-hero-badge i {
    animation: ceoBadgeSpark 3.4s ease-in-out infinite;
}

/* ==========================================================================
   CREDENTIALS
   ========================================================================== */
.ceo-creds {
    padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
}

.ceo-creds-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.ceo-cred {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: 0.3rem;
    padding: 1.5rem 1.3rem;
    background: var(--ceo-card);
    border: 1px solid rgba(94, 179, 70, 0.2);
    border-radius: 18px;
    box-shadow: var(--ceo-card-shadow);
    /* ceo.js writes --rx/--ry from the cursor; the transform lives here so the
       rest/hover states stay in CSS and the script only feeds it numbers. */
    transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
        translateY(var(--lift, 0px));
    transform-style: preserve-3d;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.ceo-cred:hover {
    --lift: -6px;
    border-color: rgba(94, 179, 70, 0.5);
    box-shadow: 0 20px 40px rgba(48, 68, 79, 0.14),
        0 14px 32px -12px rgba(94, 179, 70, 0.35);
}

/* While the cursor is moving the tilt should track it immediately; easing the
   transform here would lag the pointer and feel like syrup. */
.ceo-cred.is-tilting {
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.ceo-cred-value,
.ceo-cred-label,
.ceo-cred-note {
    position: relative;
    z-index: 1;
}

.ceo-cred-value {
    font-size: clamp(1.7rem, 2.6vw, 2.1rem);
    font-weight: 700;
    line-height: 1;
    color: var(--gf-green);
    /* Keeps the tile from reflowing as the counter rolls up. */
    font-variant-numeric: tabular-nums;
    transition: color 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ceo-cred:hover .ceo-cred-value {
    color: var(--gf-green-dark);
    transform: translateZ(18px) scale(1.04);
}

.ceo-cred-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ceo-ink);
}

.ceo-cred-note {
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--ceo-ink-faint);
}

/* ==========================================================================
   BIOGRAPHY
   ========================================================================== */
.ceo-bio {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: #ffffff;
}

.ceo-bio-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

.ceo-bio-aside {
    position: sticky;
    top: 7rem;
}

.ceo-bio-aside-note {
    margin: 0;
    padding-left: 1rem;
    border-left: 3px solid var(--gf-green);
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--ceo-ink-faint);
}

.ceo-bio-text {
    /* ~68ch keeps the line length readable rather than running the page width. */
    max-width: 68ch;
    margin: 0 0 1.3rem;
    font-size: 1rem;
    line-height: 1.85;
    color: var(--ceo-ink-soft);
}

.ceo-bio-quote {
    position: relative;
    max-width: 68ch;
    margin: 0 0 1.5rem;
    padding: 1.5rem 1.6rem 1.5rem 3.4rem;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(94, 179, 70, 0.09), rgba(120, 185, 69, 0.04));
    border: 1px solid rgba(94, 179, 70, 0.22);
}

.ceo-bio-quote::before {
    content: "\201C";
    position: absolute;
    top: 0.55rem;
    left: 1.1rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3.6rem;
    line-height: 1;
    color: rgba(94, 179, 70, 0.4);
}

.ceo-bio-quote p {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 500;
    font-style: italic;
    line-height: 1.75;
    color: var(--ceo-ink);
}

/* ==========================================================================
   AFFILIATIONS
   ========================================================================== */
.ceo-affil {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.ceo-affil-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}

/* Hover treatment ported from the Usmani & Co. partner cards
   (usmaniandco themes/usmaniandco/assets/css/styles.css, ".partner-card"):
   a sweeping accent bar along the top edge, a cursor-following radial glow fed
   by --mx/--my from ceo.js, and a lift. Gold there, brand green here. */
.ceo-affil-card {
    position: relative;
    isolation: isolate;
    /* Visible, not hidden: the ring's drop-shadow glow has to escape the box. */
    overflow: visible;
    padding: 1.9rem 1.7rem;
    background: var(--ceo-card);
    border: 1px solid rgba(94, 179, 70, 0.2);
    border-radius: 22px;
    box-shadow: var(--ceo-card-shadow);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.ceo-affil-card:hover {
    transform: translateY(-8px);
    border-color: rgba(94, 179, 70, 0.55);
    box-shadow: 0 24px 46px rgba(48, 68, 79, 0.15),
        0 18px 40px -14px rgba(94, 179, 70, 0.4);
}

/* --- the moving border ring ------------------------------------------------
   A conic gradient is painted across the whole card, then masked down to a 2px
   rim: the element is filled twice, once clipped to the content-box and once to
   the border-box, and the two are composited with `exclude` so only the padding
   ring survives. Spinning the gradient's start angle then runs colour around
   the perimeter while the card face stays perfectly still.

   An angle in a gradient cannot be animated unless the custom property holding
   it is registered with a type, hence @property. Browsers without it fall back
   to the plain `--gf-angle: 0deg` declared on the card, which renders the same
   ring as a static gradient — the rim still appears on hover, it just does not
   travel. */
@property --gf-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes ceoRingSpin {
    to { --gf-angle: 360deg; }
}

.ceo-affil-card,
.ceo-cred {
    /* Plain fallback value: without @property support this stays 0deg and the
       ring renders as a static gradient rather than failing to parse. */
    --gf-angle: 0deg;
}

.ceo-affil-card::before,
.ceo-cred::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    padding: 2px;
    /* A solid green base covers the whole perimeter so the border never thins
       out or appears to drop off, and a short bright arc travels around it.
       A gradient that merely cycles through colours dips to pale values, which
       against a white card reads as a missing edge rather than movement. */
    background: conic-gradient(from var(--gf-angle),
        #4a9e3c 0deg,
        #4a9e3c 265deg,
        #8ed157 310deg,
        #d9f5b4 332deg,
        #8ed157 352deg,
        #4a9e3c 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    animation: ceoRingSpin 3.5s linear infinite;
    animation-play-state: paused;
}

.ceo-affil-card:hover::before,
.ceo-affil-card:focus-within::before,
.ceo-cred:hover::before,
.ceo-cred:focus-within::before {
    opacity: 1;
    animation-play-state: running;
    filter: drop-shadow(0 0 12px rgba(94, 179, 70, 0.3));
}

/* Cursor-follow glow. --mx/--my default to the centre so it still reads if the
   pointer never moves (or on a keyboard focus). */
.ceo-affil-card::after,
.ceo-cred::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Must clip to the card's own curve now that overflow is visible. */
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
        rgba(94, 179, 70, 0.18), transparent 60%);
    transition: opacity 0.35s ease;
}

.ceo-affil-card:hover::after,
.ceo-affil-card:focus-within::after,
.ceo-cred:hover::after,
.ceo-cred:focus-within::after {
    opacity: 1;
}

/* Keep the content above the glow layer. */
.ceo-affil-icon,
.ceo-affil-org,
.ceo-affil-role,
.ceo-affil-detail {
    position: relative;
    z-index: 1;
}

.ceo-affil-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.1rem;
    border-radius: 14px;
    font-size: 1.1rem;
    color: #ffffff;
    background: linear-gradient(135deg, var(--gf-green), var(--gf-green-dark));
    box-shadow: 0 10px 20px rgba(94, 179, 70, 0.28);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ceo-affil-card:hover .ceo-affil-icon {
    transform: translateY(-4px) scale(1.06);
}

.ceo-affil-org {
    margin: 0 0 0.35rem;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--ceo-ink);
}

.ceo-affil-role {
    margin: 0 0 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gf-green-dark);
}

.ceo-affil-detail {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.72;
    color: var(--ceo-ink-soft);
}

/* ==========================================================================
   JOURNEY — vertical rail
   ========================================================================== */
.ceo-journey {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: #ffffff;
}

.ceo-rail {
    position: relative;
    max-width: 52rem;
    margin: 0 auto;
    padding: 0 0 0 2.6rem;
    list-style: none;
}

/* The rail itself, drawn once behind every item. */
.ceo-rail::before {
    content: "";
    position: absolute;
    top: 0.6rem;
    bottom: 0.6rem;
    left: 0.56rem;
    width: 2px;
    background: linear-gradient(180deg,
        rgba(94, 179, 70, 0.1),
        rgba(94, 179, 70, 0.55) 15%,
        rgba(94, 179, 70, 0.55) 85%,
        rgba(94, 179, 70, 0.1));
}

.ceo-rail-item {
    position: relative;
    padding-bottom: 1.1rem;
}

.ceo-rail-item:last-child {
    padding-bottom: 0;
}

.ceo-rail-dot {
    position: absolute;
    top: 1.55rem;
    left: -2.33rem;
    width: 0.86rem;
    height: 0.86rem;
    border-radius: 50%;
    background: var(--gf-green);
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 6px rgba(94, 179, 70, 0.26);
}

.ceo-rail-card {
    position: relative;
    overflow: hidden;
    padding: 1.3rem 1.5rem;
    background: #ffffff;
    border: 1px solid rgba(94, 179, 70, 0.2);
    border-radius: 18px;
    box-shadow: var(--ceo-card-shadow);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* Accent bar that wipes down the leading edge on hover. */
.ceo-rail-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--gf-green-dark), var(--gf-green));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ceo-rail-card:hover {
    transform: translateX(6px);
    border-color: rgba(94, 179, 70, 0.5);
    box-shadow: 0 18px 38px -16px rgba(94, 179, 70, 0.45),
        var(--ceo-card-shadow);
}

.ceo-rail-card:hover::before {
    transform: scaleY(1);
}

/* The dot on the rail pulses while its card is hovered. */
.ceo-rail-item:hover .ceo-rail-dot {
    animation: ceoDotPulse 1.6s ease-out infinite;
}

@keyframes ceoDotPulse {
    0% { box-shadow: 0 0 0 4px #ffffff, 0 0 0 6px rgba(94, 179, 70, 0.5); }
    70% { box-shadow: 0 0 0 4px #ffffff, 0 0 0 16px rgba(94, 179, 70, 0); }
    100% { box-shadow: 0 0 0 4px #ffffff, 0 0 0 16px rgba(94, 179, 70, 0); }
}

.ceo-rail-card:hover .ceo-rail-year {
    background: rgba(94, 179, 70, 0.2);
}

.ceo-rail-year {
    transition: background 0.3s ease;
    display: inline-block;
    margin-bottom: 0.5rem;
    padding: 0.26rem 0.72rem;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gf-green-dark);
    background: rgba(94, 179, 70, 0.11);
}

.ceo-rail-title {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ceo-ink);
}

.ceo-rail-body {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.72;
    color: var(--ceo-ink-soft);
}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.ceo-gallery {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.ceo-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
}

/* The grid stretches each figure to the tallest row, so the button must size to
   its image instead of filling that height — otherwise the backing colour
   letterboxes above and below the photo. */
.ceo-shot {
    margin: 0;
    align-self: start;
}

.ceo-shot-btn {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
    overflow: hidden;
    line-height: 0;
    background: #dfe9e4;
    border: 1px solid rgba(94, 179, 70, 0.22);
    border-radius: 18px;
    cursor: pointer;
}

.ceo-shot-btn img {
    display: block;
    width: 100%;
    height: auto;
    /* The source files are only 242x242. A 4:3 tile at this grid width lands
       around 225px tall, so the art is never scaled up past its own pixels. */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.ceo-shot-btn:hover img {
    transform: scale(1.05);
}

.ceo-shot-zoom {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    font-size: 0.8rem;
    color: var(--gf-green-dark);
    background: rgba(255, 255, 255, 0.92);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.ceo-shot-btn:hover .ceo-shot-zoom,
.ceo-shot-btn:focus-visible .ceo-shot-zoom {
    opacity: 1;
    transform: translateY(0);
}

.ceo-shot-btn:focus-visible {
    outline: 3px solid var(--gf-green);
    outline-offset: 3px;
}

.ceo-shot-caption {
    margin: 0.65rem 0 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--ceo-ink-faint);
    transition: color 0.3s ease, transform 0.3s ease;
}

.ceo-shot:hover .ceo-shot-caption {
    color: var(--ceo-ink);
    transform: translateY(-2px);
}

.ceo-shot:hover .ceo-shot-btn {
    border-color: rgba(94, 179, 70, 0.5);
    box-shadow: 0 16px 34px -16px rgba(94, 179, 70, 0.5);
}

/* ---------- lightbox ---------- */
.ceo-lightbox .modal-content {
    position: relative;
    padding: 0.6rem;
    background: #ffffff;
    border: none;
    border-radius: 22px;
}

.ceo-lightbox-img {
    width: 100%;
    height: auto;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 16px;
}

.ceo-lightbox-caption {
    margin: 0.75rem 0.4rem 0.35rem;
    font-size: 0.86rem;
    text-align: center;
    color: var(--ceo-ink-soft);
}

.ceo-lightbox-close {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    z-index: 5;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 6px 18px rgba(48, 68, 79, 0.25);
    opacity: 1;
}

/* ==========================================================================
   GOVERNANCE BAND
   ========================================================================== */
.ceo-gov {
    padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 4.5rem);
}

.ceo-gov-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 3.4rem);
    border-radius: 28px;
    background:
        radial-gradient(ellipse 60% 80% at 85% 20%, rgba(120, 185, 69, 0.35), transparent 62%),
        linear-gradient(120deg, var(--gf-navy-deep) 0%, var(--gf-navy) 60%, #2b5340 120%);
    box-shadow: 0 26px 60px rgba(48, 68, 79, 0.24);
}

/* Hex motif, reused from the clients section. */
.ceo-gov-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.14;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 1L54 16v32L28 63 2 48V16z M28 63l26 15v18M28 63L2 78v18' fill='none' stroke='%23a9c585' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 56px 97px;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 30% 50%, #000 10%, transparent 80%);
    mask-image: radial-gradient(ellipse 70% 80% at 30% 50%, #000 10%, transparent 80%);
}

.ceo-gov-copy {
    position: relative;
    z-index: 1;
    max-width: 44rem;
}

.ceo-gov-title {
    margin: 0 0 0.9rem;
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.22;
    color: #ffffff;
}

.ceo-gov-text {
    margin: 0 0 1.5rem;
    font-size: 1rem;
    line-height: 1.78;
    color: rgba(255, 255, 255, 0.82);
}

.ceo-gov-list {
    display: grid;
    gap: 0.7rem;
    margin: 0 0 1.9rem;
    padding: 0;
    list-style: none;
}

.ceo-gov-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.9);
}

.ceo-gov-list i {
    display: grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 0.8rem;
    color: #d8ecc4;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media only screen and (max-width: 1199px) {
    .ceo-creds-grid { grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (max-width: 991px) {
    .ceo-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .ceo-hero-desc { margin-inline: auto; }
    .ceo-hero-chips,
    .ceo-hero-actions { justify-content: center; }
    .ceo-hero-stage {
        order: -1;
        min-height: clamp(17rem, 56vw, 24rem);
    }
    .ceo-hero-portrait { width: min(74%, 19rem); }
    .ceo-hero-badge { left: 2%; bottom: 8%; }

    .ceo-bio-grid { grid-template-columns: 1fr; }
    .ceo-bio-aside { position: static; }

    .ceo-affil-grid { grid-template-columns: 1fr; }
}

@media only screen and (max-width: 767px) {
    .ceo-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (max-width: 575px) {
    .ceo-creds-grid { grid-template-columns: 1fr; }
    .ceo-gallery-grid { grid-template-columns: 1fr; }
    .ceo-hero-badge { display: none; }
    .ceo-rail { padding-left: 2.1rem; }
    .ceo-rail-dot { left: -1.85rem; }
    .ceo-bio-quote { padding: 1.3rem 1.2rem 1.3rem 2.8rem; }
    .ceo-btn { width: 100%; }
}

/* ==========================================================================
   REDUCED MOTION — freeze every transform, keep every final state
   ========================================================================== */
/* Touch: no pointer to follow and no hover to hold, so the ring sits on quietly
   at a low opacity instead of spinning, and the tilt never engages. */
@media (hover: none) {
    .ceo-affil-card::before,
    .ceo-cred::before {
        opacity: 0.55;
        animation: none;
    }
    .ceo-affil-card::after,
    .ceo-cred::after {
        opacity: 0;
    }
    .ceo-cred {
        transform: none;
    }

    /* The two hero glows are 26-30rem circles under a 70px blur. Moving them
       is the one piece of hero motion that is genuinely expensive on a phone
       GPU, and at that size the drift is barely legible anyway. Everything
       else in the hero is a plain composited transform and stays. */
    .ceo-hero-glow--a,
    .ceo-hero-glow--b {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ceo-page *,
    .ceo-page *::before,
    .ceo-page *::after {
        animation: none !important;
        transition: none !important;
    }
    .ceo-hero-portrait {
        transform: none !important;
    }
    .ceo-shot-zoom {
        opacity: 1;
        transform: none;
    }
    .ceo-cred {
        transform: none !important;
    }
    /* The ring still appears on hover — it simply holds a static gradient
       rather than travelling. */
    .ceo-affil-card:hover::before,
    .ceo-cred:hover::before {
        opacity: 1;
        filter: none;
    }
}