* {
        box-sizing: border-box
    }

    body {
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji;
        line-height: 1.5;
        color: #111;
        background: #fff;
        overflow-x: hidden
    }

    header {
        position: sticky;
        top: 0;
        background: #ffffffcc;
        backdrop-filter: blur(6px);
        border-bottom: 1px solid #e5e5e5
    }

    /* ============ Mobile dropdown nav (overrides) ============ */

    /* show toggle only on mobile */
    @media (max-width: 720px) {
        .nav-toggle {
            display: inline-flex !important;
            /* beats earlier 'display:none' */
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            margin-left: auto;
            /* pushes it to the right */
            border: 1px solid #e5e5e5;
            border-radius: 10px;
            background: #fff;
            box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .2);
        }

        /* minimalist hamburger -> three lines */
        .nav-burger,
        .nav-burger::before,
        .nav-burger::after {
            content: "";
            display: block;
            width: 18px;
            height: 2px;
            background: #111;
            border-radius: 2px;
            transition: transform .18s ease, opacity .18s ease;
        }

        .nav-burger::before {
            transform: translateY(-6px);
        }

        .nav-burger::after {
            transform: translateY(6px);
        }

        /* animate to "X" when open */
        .nav-toggle.is-open .nav-burger {
            background: transparent;
        }

        .nav-toggle.is-open .nav-burger::before {
            transform: rotate(45deg);
        }

        .nav-toggle.is-open .nav-burger::after {
            transform: rotate(-45deg);
        }

        /* header row tweaks */
        header .top {
            position: relative;
            flex-wrap: nowrap;
            gap: 8px;
            padding: 8px 0;
        }

        /* CTA stays full-width under brand */
        header .btn.primary.cta {
            order: 3;
            width: 100%;
            justify-content: center;
            padding: 12px 16px !important;
        }

        /* turn nav into a dropdown panel (right-aligned under header) */
        header nav {
            position: absolute !important;
            top: calc(100% + 8px);
            right: 0;
            left: auto;
            min-width: min(88vw, 360px);
            background: #fff;
            border: 1px solid #eee;
            border-radius: 16px;
            box-shadow: 0 20px 48px -18px rgba(0, 0, 0, .28);
            padding: 8px;
            display: block !important;
            /* cancel previous flex/grid */
            opacity: 0;
            visibility: hidden;
            transform: translateY(-4px) scale(.98);
            pointer-events: none;
            transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
            z-index: 1000;
        }

        /* gradient accent strip on top edge */
        header nav::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, #111, #ee7422);
            border-radius: 16px 16px 0 0;
        }

        /* open state */
        header nav.open {
            opacity: 1;
            visibility: visible;
            transform: none;
            pointer-events: auto;
            transition: opacity .18s ease, transform .18s ease;
        }

        /* vertical menu items */
        header nav a {
            display: flex !important;
            /* cancel previous pills */
            align-items: center;
            gap: 10px;
            margin: 0 0 6px 0 !important;
            padding: 10px 12px !important;
            border: 1px solid #f1f1f1 !important;
            border-radius: 10px !important;
            background: #fff !important;
            white-space: nowrap;
        }

        header nav a:last-child {
            margin-bottom: 0 !important;
        }
    }

    /* desktop keeps your original inline nav */
    @media (min-width: 721px) {
        .nav-toggle {
            display: none !important;
        }

        header nav {
            position: static;
            display: block;
            opacity: 1;
            transform: none;
            pointer-events: auto;
            box-shadow: none;
            border: 0;
            padding: 0;
        }
    }



    .container {
        max-width: 1120px;
        margin: 0 auto;
        padding: 0 20px
    }

    .top {
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: #111;
        text-decoration: none;
        font-weight: 600;
        font-size: 20px
    }

    .muted {
        color: #999
    }

    nav a {
        color: #555;
        text-decoration: none;
        margin-left: 18px
    }

    nav a:hover {
        color: #000
    }

    .logo-mark {
        position: relative;
        width: 32px;
        height: 32px;
        border: 2px solid #d97332;
        border-radius: 10px;
        display: inline-block;
        flex-shrink: 0
    }

    .logo-mark::before,
    .logo-mark::after {
        content: "";
        position: absolute;
        width: 12px;
        height: 12px;
        background: #d97332;
        border-radius: 50%;
        top: 50%;
        transform: translateY(-50%)
    }

    .logo-mark::before {
        left: 7px
    }

    .logo-mark::after {
        right: 7px
    }

    .hero {
        position: relative;
        overflow: hidden
    }

    .hero .blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(50px);
        z-index: -1
    }

    .hero .b1 {
        width: 320px;
        height: 320px;
        background: radial-gradient(circle, #ee742230, transparent 60%);
        left: 50%;
        top: -10%;
        transform: translateX(-50%)
    }

    .hero .b2 {
        width: 380px;
        height: 380px;
        background: radial-gradient(circle, #ee742230, transparent 60%);
        right: -10%;
        bottom: -15%
    }

    h1 {
        font-size: 44px;
        line-height: 1.1;
        margin: 16px 0
    }

    .subtitle {
        color: #444;
        max-width: 720px
    }

    .cta {
        display: flex;
        gap: 10px;
        margin-top: 16px;
        flex-wrap: wrap
    }

    .btn {
        border: none;
        border-radius: 12px;
        padding: 12px 16px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none
    }

    .btn.primary {
        background: #fdfdfd;
        border: 1px solid #111;
        box-shadow: 0 12px 26px -18px rgba(0, 0, 0, .35);
        display: inline-flex;
        align-items: center;
        justify-content: center
    }

    .btn.primary span {
        color: #1a1a1a
    }

    @supports (-webkit-background-clip:text) or (background-clip:text) {
        .btn.primary span {
            background: linear-gradient(90deg, #111, #ee7422);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            -webkit-text-fill-color: transparent
        }
    }

    .btn.outline {
        background: #fff;
        border: 1px solid #ddd
    }

    .icon {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #444;
        text-decoration: none;
        transition: color .18s ease
    }

    .icon:hover {
        color: #000
    }

    .cta .icon {
        gap: 10px;
        padding: 0;
        border: none;
        border-radius: 0;
        background: none;
        box-shadow: none;
        font-weight: 600;
        color: #111
    }

    .cta .icon:hover {
        color: #ee7422
    }

    .icon-symbol {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 600;
        color: #ee7422
    }

    .cta .icon .icon-label {
        color: #1a1a1a;
        font-weight: 600
    }

    @supports (-webkit-background-clip:text) or (background-clip:text) {
        .cta .icon .icon-label {
            background: linear-gradient(90deg, #111, #ee7422);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            -webkit-text-fill-color: transparent
        }
    }

    .btn.outline:hover {
        border-color: rgba(56, 189, 248, .5);
        box-shadow: 0 8px 24px -8px rgba(56, 189, 248, .35)
    }

    .badge {
        display: inline-flex;
        align-items: center;
        border: 1px solid #e5e5e5;
        background: #fafafa;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 12px;
        color: #555;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .04)
    }

    .badge .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 8px;
        background: #23c788
    }

    section {
        padding: 64px 0
    }

    .grid {
        display: grid;
        gap: 16px
    }

    .grid-3 {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))
    }

    .card {
        border: 1px solid #e5e5e5;
        border-radius: 16px;
        padding: 20px;
        background: #fff;
        box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .15)
    }

    .card:hover {
        box-shadow: 0 18px 40px -18px #ee742230
    }

    .chips span {
        display: inline-block;
        margin: 2px;
        border: 1px solid #e5e5e5;
        background: #fafafa;
        border-radius: 999px;
        padding: 4px 9px;
        font-size: 12px;
        color: #555;
        box-shadow: 0 0 0 1px #ee742230
    }

    footer {
        border-top: 1px solid #e5e5e5;
        padding: 24px 0;
        color: #666
    }

    /* ---- About section (clean cutout, no card) ---- */

    /* Two columns on desktop: image | text */
    .about-grid {
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 24px;
        align-items: center;
    }

    /* Image wrapper (no borders, no cards) */
    .portrait-wrap {
        position: relative;
        width: 100%;
        max-width: 360px;
        /* was 320; tweak to taste */
        margin: 0 auto;
    }

    /* Optional soft glow behind the figure (tone it down or disable below) */
    .portrait-glow {
        position: absolute;
        inset: -10%;
        border-radius: 24px;
        z-index: -1;
        background: radial-gradient(60% 60% at 50% 50%, #ee742218, transparent 60%);
        filter: blur(40px);
    }

    /* Transparent anime cutout — cancel any “card” styles hard */
    .about-grid .portrait-wrap img.portrait.portrait--cutout {
        width: 100%;
        height: auto;
        aspect-ratio: auto !important;
        /* stop 1:1 */
        object-fit: contain !important;
        /* show full figure */
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        display: block;
        /* keep only a subtle depth hint */
        filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .16));
    }

    /* Body text */
    .about-body p {
        color: #444;
        margin: 0 0 12px;
    }

    .about-list {
        margin: 12px 0 0;
        padding-left: 18px;
        color: #333;
    }

    /* KPIs (unchanged) */
    .about-kpis {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin-top: 12px;
        text-wrap: balance;
    }

    .kpi {
        background: #fff;
        border: 1px solid #eee;
        border-radius: 12px;
        padding: 12px 14px;
        box-shadow: 0 10px 26px -18px rgba(0, 0, 0, .25);
    }

    .kpi .val {
        font-weight: 700;
        font-size: 20px;
        text-wrap: balance;
    }

    @supports (-webkit-background-clip:text) or (background-clip:text) {
        .kpi .val {
            background: linear-gradient(90deg, #111, #ee7422);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            -webkit-text-fill-color: transparent;
        }
    }

    .kpi .label {
        display: block;
        font-size: 12px;
        color: #666;
        margin-top: 2px;
    }

    .about-tags {
        margin-top: 14px;
    }

    /* Mobile: stack to one column; center the anime */
    @media (max-width: 860px) {
        .about-grid {
            grid-template-columns: 1fr;
        }

        .portrait-wrap {
            max-width: 320px;
            margin: 0 auto;
        }

        .about-grid .portrait-wrap img.portrait.portrait--cutout {
            filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .14));
        }
    }


    /* Accent picked from your palette */
    :root {
        --accent: #ee7422;
    }

    /* Steps layout + track */
    .approach .steps {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-top: 16px;
        position: relative;
        z-index: -1;
    }

    @media (max-width: 900px) {
        .approach .steps {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 560px) {
        .approach .steps {
            grid-template-columns: 1fr;
        }
    }

    /* subtle progress line behind icons (horizontal on desktop) */
    .approach .steps::before {
        content: "";
        position: absolute;
        left: 8px;
        right: 8px;
        top: 22px;
        /* vertically aligns with icon centers */
        height: 2px;
        background: linear-gradient(90deg, rgba(238, 116, 34, .15), rgba(238, 116, 34, .05));
        border-radius: 2px;
        pointer-events: none;
    }

    @media (max-width: 560px) {
        .approach .steps::before {
            left: 22px;
            right: auto;
            top: 0;
            bottom: 0;
            width: 2px;
            height: auto;
            background: linear-gradient(180deg, rgba(238, 116, 34, .15), rgba(238, 116, 34, .05));
        }
    }

    /* Step cards */
    .step {
        position: relative;
        padding-top: 18px;
    }

    .step h3 {
        margin: 4px 0 6px;
        font-size: 18px;
    }

    .step p {
        margin: 0;
        color: #444;
    }

    /* Icon pill */
    .step-icon {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        color: var(--accent);
        border: 1px solid #e5e5e5;
        background: #fff;
        box-shadow: 0 10px 24px -12px rgba(238, 116, 34, .35);
        transition: transform .18s ease, box-shadow .18s ease;
    }

    /* Connector dots to the track (looks neat on desktop) */
    .step .step-icon::after {
        content: "";
        position: absolute;
        top: 22px;
        left: -6px;
        right: -6px;
        margin: auto;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 0 2px rgba(238, 116, 34, .18);
    }

    @media (max-width: 560px) {
        .step .step-icon::after {
            left: -14px;
            right: auto;
            top: 10px;
        }
    }

    /* Hover polish */
    .step:hover .step-icon {
        transform: translateY(-2px);
        box-shadow: 0 16px 38px -14px rgba(238, 116, 34, .45);
        border-color: rgba(238, 116, 34, .35);
    }

    .mindset {
        position: relative;
        overflow: hidden;
        padding: 22px 20px;
        border: 1px solid #eee;
        border-radius: 16px;
        background:
            radial-gradient(60% 120% at 0% 0%, rgba(238, 116, 34, .08), transparent 70%),
            #fff;
        box-shadow: 0 18px 40px -22px rgba(238, 116, 34, .35);
    }

    .mindset-title {
        margin: 10px 0 6px;
        font-size: 24px;
        line-height: 1.2;
    }

    .mindset-lead {
        background: linear-gradient(90deg, #111, #ee7422);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        font-weight: 800;
    }

    .mindset-tagline {
        color: #444;
        margin: 0 0 8px;
    }

    .mindset-actions {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-top: 12px;
        flex-wrap: wrap;
    }

    /* spacing scale */
    :root {
        --space-0: 0px;
        --space-1: 8px;
        --space-2: 12px;
        --space-3: 16px;
        --space-4: 24px;
        --space-5: 32px;
        --space-6: 48px;
        --space-7: 64px;
        /* current default */
    }

    /* global keeps 64px unless overridden */
    section {
        padding: var(--space-7) 0;
    }

    /* helpers you can mix and match */
    .section--compact {
        padding-top: var(--space-5);
        padding-bottom: var(--space-5);
    }

    .section--tight {
        padding-top: var(--space-4);
        padding-bottom: var(--space-4);
    }

    /* specifically tuck hero + mindset closer together */
    .hero {
        padding-bottom: var(--space-4);
    }

    /* 24px bottom instead of 64px */
    #mindset {
        padding-top: var(--space-3);
    }

    /* 16px top so it sits higher */

    /* (list semantics, no visible numbers) */
    ol.steps {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

    ol.steps>li {
        list-style: none;
    }

    /* The card should clip the ribbon at the rounded edge */
    .card.mindset {
        position: relative;
        overflow: hidden;
    }

    /* Diagonal ribbon anchored to the top-right corner of the card */
    .corner-ribbon {
        position: absolute;
        top: 15px;
        /* nudge so the band crosses the corner */
        right: -65px;
        width: 180px;
        /* band length */
        height: 24px;
        /* band thickness */
        transform: rotate(45deg);
        transform-origin: 50% 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        font-weight: 800;
        font-size: 8px;
        letter-spacing: .08em;
        text-transform: uppercase;
        pointer-events: none;
        /* decorative */
        z-index: 2;
        border-radius: 2px;
        /* soft corners on the band itself */
    }

    /* Outline style: no fill, darker border, gradient text (black → orange) */
    .corner-ribbon.outline {
        background: transparent;
        border: 1px solid #1a1a1a;
        /* darker accent */
        color: transparent;
        background-image: linear-gradient(90deg, #111, #ee7422);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* Optional ultra-thin inner hairline for crispness on light backgrounds */
    .corner-ribbon.outline::after {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: 3px;
        border: 1px solid rgba(0, 0, 0, .06);
    }

    /* Mobile tune so it doesn't dominate */
    @media (max-width: 560px) {
        .corner-ribbon {
            top: 15px;
            right: -54px;
            width: 170px;
            height: 30px;
            font-size: 8px;
        }
    }

    .mindset-wrap {
        position: relative;
    }

    .card.mindset {
        position: relative;
        overflow: hidden;
    }

    /* clips ribbon to rounded corner */

    /* overlay image */
    .mindset-figure {
        position: absolute;
        right: 100px;
        bottom: 0;
        /* flush with card bottom */
        height: 360px;
        /* Fallback so it's visible even if JS fails */
        object-fit: contain;
        pointer-events: none;
        z-index: 6;
        /* over the card; raise if you want over the ribbon */
        filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .18));
        opacity: 0;
        /* fade in after sizing */
        transition: opacity .2s ease;
    }

    /* Desktop fallback already fine; below is the mobile tune */
    @media (max-width: 720px) {

        /* smaller scale, nudge right so it doesn't sit on text */
        .mindset-figure {
            right: -8px;
            /* pushes it to the edge/outside a touch */
            filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .12));
            opacity: .95;
            z-index: 3;
            /* under the ribbon but over the card edge */
        }

        /* base: keep your existing styles */
        .container.top {
            position: relative;
        }

        /* anchor for the dropdown panel */
        .nav-toggle {
            display: none;
        }

        /* hidden on desktop */

    }

    /* keep copy above the image and reserve room on small screens */
    .mindset-copy {
        position: relative;
        z-index: 4;
    }

    @media (max-width: 720px) {

        /* reserve space on the right so text never sits under the image */
        .mindset-copy {
            padding-right: clamp(90px, 38vw, 180px);
        }

        /* gentle fade of the image near the text (Safari needs -webkit-mask) */
        .mindset-figure {
            -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 0) 96%);
            mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 0) 96%);
            right: -8px;
            filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .12));
            opacity: .96;
            z-index: 3;
            /* keeps ribbon above */
        }
    }

    /* Hide hamburger everywhere unless you want it back later */
    .nav-toggle {
        display: none !important;
    }

    /* Desktop/tablet: keep your existing inline nav */
    @media (min-width: 721px) {
        header nav {
            position: static;
            display: block;
            opacity: 1;
            transform: none;
            pointer-events: auto;
            box-shadow: none;
            border: 0;
            padding: 0;
        }
    }

    @media (max-width: 720px) {
        header nav {
            order: 2;
            width: 100%;
            display: flex;
            gap: 8px;
            overflow-x: auto;
            /* one line with horizontal scroll */
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            padding-bottom: 2px;
            z-index: 2000;
        }

        header nav::-webkit-scrollbar {
            display: none;
        }

        header nav a {
            flex: 0 0 calc((100% - 16px)/3);
            /* equal-size pills; ~3 visible at a time */
            text-align: center;
            padding: 10px 12px;
            border: 1px solid #eee;
            border-radius: 999px;
            background: #fff;
            white-space: nowrap;
            font-size: 14px;
        }

        header .btn.primary.cta {
            order: 3;
            width: 100%;
            justify-content: center;
            padding: 12px 16px !important;
        }
    }
    /* --- MOBILE DROPDOWN NAV: final override --- */

/* Base: hide toggle on desktop */
.nav-toggle { display: none; }

/* Mobile only */
@media (max-width: 720px){
  /* Make sure legacy pill styles don't win */
  header nav{
    /* kill flex/grid pills from earlier blocks */
    display: block !important;
    position: absolute !important;
    top: calc(100% + 8px);
    right: 0; left: auto;
    min-width: min(88vw, 360px);
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    box-shadow: 0 20px 48px -18px rgba(0,0,0,.28);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px) scale(.98);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    z-index: 1000;
    /* remove borders added by earlier "mobile wrap" block */
    border-top: 1px solid #eee !important;
  }
  header nav.open{
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  }
  header nav::before{
    content:""; position:absolute; top:0; left:0; right:0; height:2px;
    background: linear-gradient(90deg,#111,#ee7422);
    border-radius:16px 16px 0 0;
  }

  /* Menu items in the dropdown */
  header nav a{
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #f1f1f1 !important;
    border-radius: 10px !important;
    background: #fff !important;
    white-space: nowrap;
  }
  header nav a:last-child{ margin-bottom: 0 !important; }

  /* Show the toggle button and ensure it sits above the panel */
  .nav-toggle{
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    margin-left: auto;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 16px -10px rgba(0,0,0,.2);
    z-index: 1001; /* above dropdown */
  }

  /* Kebab (three-dot) icon */
  .nav-burger{
    position: relative;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #111;
  }
  .nav-burger::before,
  .nav-burger::after{
    content:""; position:absolute; top:0;
    width: 4px; height: 4px; border-radius:50%; background:#111;
  }
  .nav-burger::before{ left:-8px; }
  .nav-burger::after { left: 8px; }

  /* Header row tweaks */
  header .top{
    position: relative; gap: 8px; padding: 8px 0;
    flex-wrap: nowrap; /* keep on one line: brand | toggle */
  }

  /* If you re-enable the CTA, keep it full-width under the brand */
  header .btn.primary.cta{
    order: 3; width: 100%; justify-content: center; padding: 12px 16px !important;
  }
}

/* Desktop keeps inline nav; hide the toggle */
@media (min-width: 721px){
  .nav-toggle{ display: none !important; }
  header nav{
    position: static; display: block; opacity: 1; transform: none;
    pointer-events: auto; box-shadow: none; border: 0; padding: 0;
  }
}

/* ===== Fix header being covered by hero/mindset ===== */
:root{
  --z-header: 4000;   /* higher than anything in content */
  --z-nav: 4001;      /* dropdown above header bar */
  --z-toggle: 4002;   /* toggle above dropdown for clicks */
}

/* Make the sticky header a high layer */
header{
  position: sticky;   /* you already have this */
  top: 0;
  z-index: var(--z-header);
}

/* Mindset stack stays under header */
.mindset-wrap{ position: relative; z-index: 0; }
.card.mindset{ position: relative; z-index: 1; }
.mindset-figure{
  z-index: 2;               /* fine for overlapping the card */
  pointer-events: none;     /* already set, keeps menu clickable if seen */
}

/* Mobile dropdown should sit above everything */
@media (max-width: 720px){
  header nav{ z-index: var(--z-nav) !important; }
  .nav-toggle{ z-index: var(--z-toggle) !important; }
}

/* (Optional) If any section ever gets a wild z-index, cap it */
section, .hero, #mindset{ z-index: auto; position: relative; }

/* --- ABOUT: anchored to the image’s true center --- */
#about .portrait-wrap{
  position:relative;
  width:min(440px,88%);
  margin-inline:auto;
  overflow:visible;
  /* set by JS: */
  --ring-size: 360px;
  --cx: 50%;
  --cy: 50%;
}
#about .portrait--cutout{
  width:72%;
  display:block;
  margin:0 auto;
  position:relative;
  z-index:2;
}

/* Ring is centered at (--cx, --cy) inside the portrait-wrap */
#about .orbit{
  position:absolute;
  left:var(--cx);
  top:var(--cy);
  width:var(--ring-size);
  height:var(--ring-size);
  transform:translate(-50%,-50%);
  pointer-events:auto;
  z-index:1;
}

/* Pills around the circle + faint heartbeat (no movement) */
#about .orbit-item{
  position:absolute; top:40%; left:30%;
  transform-origin:center;
  transform: rotate(var(--angle,0deg))
             translate(calc(var(--ring-size)/2 - 24px))
             rotate(calc(-1 * var(--angle,0deg)));
  padding:12px 12px; border-radius:999px; white-space:nowrap;
  background:#fff;             /* pill background stays white */
  text-decoration:none;          /* we'll fake the underline */
  box-shadow:0 6px 18px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.08);
  font-size:14px; line-height:1;
  animation: about-pulse 2.6s ease-in-out infinite;
  will-change: transform, box-shadow, filter;

  /* >>> gradient text + gradient underline (no blue link color) */
  color: transparent;
  -webkit-text-fill-color: transparent;                 /* Safari */
  background-image:
    linear-gradient(90deg,#111,#ee7422),                /* text */
    linear-gradient(90deg,#111,#ee7422);                /* underline */
  -webkit-background-clip: text, padding-box;
          background-clip: text, padding-box;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 2px;                 /* underline thickness */
  background-position: 0 0, 0 100%;                     /* underline at bottom */
}

/* Slightly thicker underline on hover (optional), box-shadow already there */
#about .orbit-item:hover{
  background-size: 100% 100%, 100% 3px;
  box-shadow:0 10px 26px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.12);
}

/* Fallback for browsers without background-clip:text */
@supports not (-webkit-background-clip: text) {
  #about .orbit-item{
    color:#111; 
    text-decoration:underline;
    text-decoration-color:#ee7422;
    text-decoration-thickness:2px;
  }
}


/* Heartbeat effect that preserves position */
@keyframes about-pulse{
  0%, 70%, 100%{
    transform: rotate(var(--angle,0deg))
               translate(calc(var(--ring-size)/2 - 24px))
               rotate(calc(-1 * var(--angle,0deg))) scale(1);
    box-shadow:0 6px 18px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.08);
    filter: brightness(1);
  }
  35%{
    transform: rotate(var(--angle,0deg))
               translate(calc(var(--ring-size)/2 - 24px))
               rotate(calc(-1 * var(--angle,0deg))) scale(1.03);
    box-shadow:0 10px 24px rgba(0,0,0,.16), inset 0 0 0 1px rgba(0,0,0,.10);
    filter: brightness(1.03);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #about .orbit-item{animation:none}
}

/* Small-screen tweaks: slightly smaller pills to avoid overlap */
@media (max-width: 420px){
  #about .orbit-item{font-size:13px; padding:7px 10px}
}
@media (max-width: 360px){
  #about .orbit-item{font-size:12px; padding:6px 8px}
}