:root {
            --navy-950: #0b2236;
            --navy-900: #102f49;
            --navy-800: #173f5f;
            --blue-500: #2ea5df;
            --teal-500: #39b9b3;
            --green-500: #62d430;
            --green-600: #42b95f;
            --ink: #173148;
            --muted: #617384;
            --line: #d9e7eb;
            --surface: #ffffff;
            --mist: #f3f9fa;
            --soft-blue: #eaf7fd;
            --soft-green: #effbed;
            --soft-teal: #ebf9f7;
            --danger: #b42339;
            --danger-bg: #fff3f5;
            --shadow-sm: 0 12px 34px rgba(16, 47, 73, 0.08);
            --shadow-lg: 0 28px 80px rgba(16, 47, 73, 0.16);
            --radius-sm: 14px;
            --radius-md: 22px;
            --radius-lg: 32px;
            --container: 1180px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            min-width: 320px;
            background: #fff;
            color: var(--ink);
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            line-height: 1.65;
        }

        img {
            display: block;
            max-width: 100%;
        }

        a {
            color: inherit;
        }

        button,
        a {
            -webkit-tap-highlight-color: transparent;
        }

        h1,
        h2,
        h3,
        p {
            margin-top: 0;
        }

        h1,
        h2,
        h3 {
            color: var(--navy-900);
            line-height: 1.08;
            letter-spacing: -0.035em;
        }

        .container {
            width: min(calc(100% - 32px), var(--container));
            margin: 0 auto;
        }

        .skip-link {
            position: fixed;
            top: 12px;
            left: 12px;
            z-index: 999;
            transform: translateY(-160%);
            padding: 12px 16px;
            border-radius: 10px;
            background: var(--navy-950);
            color: #fff;
            font-weight: 800;
            text-decoration: none;
        }

        .skip-link:focus {
            transform: translateY(0);
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 100;
            border-bottom: 1px solid rgba(16, 47, 73, 0.08);
            background: rgba(255, 255, 255, 0.94);
            backdrop-filter: blur(18px);
        }

        .header-inner {
            display: flex;
            min-height: 84px;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            border-radius: 12px;
        }

        .brand img {
            width: clamp(210px, 24vw, 320px);
            height: auto;
        }

        .nav {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .nav-list {
            display: flex;
            align-items: center;
            gap: 2px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .nav a {
            display: inline-flex;
            min-height: 44px;
            align-items: center;
            padding: 10px 13px;
            border-radius: 999px;
            color: var(--navy-900);
            font-size: 0.92rem;
            font-weight: 760;
            text-decoration: none;
        }

        .nav a:hover,
        .nav a[aria-current="page"] {
            background: var(--mist);
        }

        .nav .nav-cta {
            margin-left: 8px;
            padding-inline: 18px;
            background: var(--navy-900);
            color: #fff;
        }

        .nav .nav-cta:hover {
            background: var(--navy-950);
        }

        .menu-button {
            display: none;
            width: 46px;
            height: 46px;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--line);
            border-radius: 50%;
            background: #fff;
            color: var(--navy-900);
            cursor: pointer;
        }

        .menu-button svg {
            width: 22px;
            height: 22px;
        }

        .hero {
            position: relative;
            overflow: hidden;
            padding: clamp(72px, 9vw, 118px) 0 54px;
            background:
                radial-gradient(circle at 8% 12%, rgba(46, 165, 223, 0.18), transparent 26rem),
                radial-gradient(circle at 92% 10%, rgba(98, 212, 48, 0.16), transparent 24rem),
                linear-gradient(180deg, #ffffff 0%, #f5fbfc 100%);
        }

        .hero::after {
            position: absolute;
            right: -160px;
            bottom: -250px;
            width: 560px;
            height: 560px;
            border: 66px solid rgba(57, 185, 179, 0.08);
            border-radius: 50%;
            content: "";
        }

        .hero-grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
            align-items: center;
            gap: clamp(44px, 8vw, 96px);
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 22px;
            padding: 8px 14px;
            border: 1px solid rgba(66, 185, 95, 0.24);
            border-radius: 999px;
            background: rgba(239, 251, 237, 0.92);
            color: #246d3d;
            font-size: 0.86rem;
            font-weight: 800;
        }

        .badge::before {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--blue-500), var(--green-500));
            box-shadow: 0 0 0 5px rgba(98, 212, 48, 0.12);
            content: "";
        }

        .hero h1 {
            max-width: 900px;
            margin-bottom: 24px;
            font-size: clamp(3.2rem, 7.4vw, 6.9rem);
            line-height: 0.95;
            letter-spacing: -0.065em;
        }

        .hero h1 span {
            display: block;
            background: linear-gradient(90deg, var(--blue-500), var(--teal-500), var(--green-600));
            background-clip: text;
            color: transparent;
            -webkit-background-clip: text;
        }

        .hero-copy {
            max-width: 760px;
        }

        .hero-copy > p {
            max-width: 690px;
            margin-bottom: 30px;
            color: var(--muted);
            font-size: clamp(1.12rem, 2vw, 1.28rem);
        }

        .actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .button {
            display: inline-flex;
            min-height: 54px;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px 22px;
            border: 2px solid transparent;
            border-radius: 999px;
            font-weight: 830;
            text-decoration: none;
            transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
        }

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

        .button-primary {
            background: var(--navy-900);
            color: #fff;
            box-shadow: 0 16px 34px rgba(16, 47, 73, 0.2);
        }

        .button-primary:hover {
            background: var(--navy-950);
            box-shadow: 0 20px 42px rgba(16, 47, 73, 0.25);
        }

        .button-secondary {
            border-color: var(--navy-900);
            background: rgba(255, 255, 255, 0.78);
            color: var(--navy-900);
        }

        .button-secondary:hover {
            background: #fff;
        }

        .hero-panel {
            position: relative;
            overflow: hidden;
            padding: 26px;
            border: 1px solid rgba(16, 47, 73, 0.1);
            border-radius: var(--radius-lg);
            background: rgba(255, 255, 255, 0.92);
            box-shadow: var(--shadow-lg);
        }

        .hero-panel::before {
            position: absolute;
            top: -70px;
            right: -70px;
            width: 190px;
            height: 190px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(46,165,223,0.18), rgba(98,212,48,0.18));
            content: "";
        }

        .hero-panel-mark {
            display: grid;
            width: 122px;
            height: 122px;
            place-items: center;
            margin-bottom: 26px;
            border: 8px solid transparent;
            border-radius: 50%;
            background:
                linear-gradient(#fff, #fff) padding-box,
                linear-gradient(145deg, var(--blue-500), var(--teal-500), var(--green-500)) border-box;
            color: var(--teal-500);
            font-family: Georgia, serif;
            font-size: 74px;
        }

        .hero-panel h2 {
            margin-bottom: 10px;
            font-size: 1.8rem;
        }

        .hero-panel p {
            margin-bottom: 22px;
            color: var(--muted);
        }

        .check-list {
            display: grid;
            gap: 10px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .check-list li {
            display: flex;
            align-items: flex-start;
            gap: 11px;
            padding: 13px 14px;
            border: 1px solid var(--line);
            border-radius: 14px;
            background: #fff;
            font-weight: 750;
        }

        .tick {
            display: grid;
            width: 24px;
            height: 24px;
            flex: 0 0 auto;
            place-items: center;
            border-radius: 50%;
            background: var(--soft-green);
            color: #277446;
            font-size: 0.84rem;
            font-weight: 900;
        }

        .safety {
            position: relative;
            z-index: 3;
            margin-top: -4px;
            padding: 18px 0;
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            background: #fff;
        }

        .safety-inner {
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 16px;
        }

        .safety-icon {
            display: grid;
            width: 46px;
            height: 46px;
            place-items: center;
            border-radius: 50%;
            background: var(--danger-bg);
            color: var(--danger);
            font-weight: 900;
        }

        .safety h2 {
            margin-bottom: 3px;
            color: #7d1829;
            font-size: 1.03rem;
            letter-spacing: -0.01em;
        }

        .safety p {
            margin: 0;
            color: #6e4d55;
            font-size: 0.94rem;
        }

        .safety strong {
            color: #7d1829;
        }

        .safety-tag {
            padding: 8px 12px;
            border-radius: 999px;
            background: var(--danger-bg);
            color: #8c1f31;
            font-size: 0.8rem;
            font-weight: 850;
            white-space: nowrap;
        }

        .section {
            padding: clamp(76px, 9vw, 120px) 0;
        }

        .section-head {
            max-width: 760px;
            margin-bottom: 42px;
        }

        .section-head.center {
            margin-inline: auto;
            text-align: center;
        }

        .eyebrow {
            display: inline-block;
            margin-bottom: 12px;
            color: #277446;
            font-size: 0.82rem;
            font-weight: 900;
            letter-spacing: 0.09em;
            text-transform: uppercase;
        }

        .section h2 {
            margin-bottom: 16px;
            font-size: clamp(2.2rem, 4.8vw, 4.4rem);
        }

        .section-head p {
            color: var(--muted);
            font-size: 1.08rem;
        }

        .path-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
        }

        .path-card {
            display: flex;
            min-height: 100%;
            flex-direction: column;
            padding: 28px;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: #fff;
            box-shadow: var(--shadow-sm);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .path-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
        }

        .path-number {
            display: grid;
            width: 44px;
            height: 44px;
            place-items: center;
            margin-bottom: 22px;
            border-radius: 14px;
            background: var(--soft-blue);
            color: var(--navy-900);
            font-weight: 900;
        }

        .path-card:nth-child(2) .path-number {
            background: var(--soft-green);
        }

        .path-card:nth-child(3) .path-number {
            background: var(--soft-teal);
        }

        .path-card h3 {
            margin-bottom: 10px;
            font-size: 1.45rem;
        }

        .path-card p {
            margin-bottom: 22px;
            color: var(--muted);
        }

        .path-card a {
            margin-top: auto;
            color: var(--navy-900);
            font-weight: 850;
            text-decoration: none;
        }

        .path-card a:hover {
            color: #0b6f82;
        }

        .mission {
            position: relative;
            overflow: hidden;
            background: var(--navy-950);
            color: #fff;
        }

        .mission::before {
            position: absolute;
            top: -230px;
            right: -170px;
            width: 530px;
            height: 530px;
            border: 72px solid rgba(98, 212, 48, 0.08);
            border-radius: 50%;
            content: "";
        }

        .mission-grid {
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
            gap: clamp(48px, 8vw, 94px);
            align-items: start;
        }

        .mission .eyebrow,
        .mission h2 {
            color: #fff;
        }

        .mission-copy p {
            color: #c6d8e2;
            font-size: 1.08rem;
        }

        .mission-quote {
            margin-top: 28px;
            padding: 24px;
            border: 1px solid rgba(255,255,255,0.14);
            border-radius: var(--radius-md);
            background: rgba(255,255,255,0.06);
        }

        .mission-quote strong {
            display: block;
            color: #fff;
            font-size: 1.45rem;
            line-height: 1.35;
        }

        .mission-list {
            display: grid;
            gap: 14px;
        }

        .mission-item {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 16px;
            padding: 20px;
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: var(--radius-md);
            background: rgba(255,255,255,0.05);
        }

        .mission-item span {
            display: grid;
            width: 46px;
            height: 46px;
            place-items: center;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--blue-500), var(--green-500));
            color: var(--navy-950);
            font-weight: 900;
        }

        .mission-item h3 {
            margin-bottom: 4px;
            color: #fff;
            font-size: 1.2rem;
        }

        .mission-item p {
            margin-bottom: 0;
            color: #bfd0d9;
        }

        .feature-band {
            background: var(--mist);
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 16px;
        }

        .feature-card {
            display: flex;
            min-height: 100%;
            flex-direction: column;
            padding: 24px;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: #fff;
        }

        .feature-icon {
            display: grid;
            width: 50px;
            height: 50px;
            place-items: center;
            margin-bottom: 18px;
            border-radius: 16px;
            background: linear-gradient(135deg, var(--soft-blue), var(--soft-green));
            color: var(--navy-900);
            font-weight: 900;
        }

        .feature-card h3 {
            margin-bottom: 8px;
            font-size: 1.2rem;
        }

        .feature-card p {
            margin-bottom: 20px;
            color: var(--muted);
            font-size: 0.95rem;
        }

        .feature-card a {
            margin-top: auto;
            color: var(--navy-900);
            font-weight: 850;
            text-decoration: none;
        }

        .story {
            background: #fff;
        }

        .story-grid {
            display: grid;
            grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr);
            align-items: center;
            gap: clamp(48px, 8vw, 96px);
        }

        .story-art {
            position: relative;
            display: grid;
            min-height: 490px;
            place-items: center;
            overflow: hidden;
            border-radius: var(--radius-lg);
            background:
                radial-gradient(circle at 28% 20%, rgba(255,255,255,0.92), transparent 9rem),
                linear-gradient(145deg, rgba(46,165,223,0.28), rgba(57,185,179,0.28), rgba(98,212,48,0.3));
            box-shadow: var(--shadow-lg);
        }

        .story-art::before,
        .story-art::after {
            position: absolute;
            border-radius: 50%;
            content: "";
        }

        .story-art::before {
            top: -90px;
            right: -70px;
            width: 240px;
            height: 240px;
            border: 42px solid rgba(255,255,255,0.28);
        }

        .story-art::after {
            bottom: -120px;
            left: -90px;
            width: 290px;
            height: 290px;
            border: 48px solid rgba(16,47,73,0.08);
        }

        .story-symbol {
            position: relative;
            z-index: 2;
            display: grid;
            width: 210px;
            height: 210px;
            place-items: center;
            border: 12px solid rgba(255,255,255,0.9);
            border-radius: 50%;
            color: #fff;
            font-family: Georgia, serif;
            font-size: 124px;
            text-shadow: 0 10px 30px rgba(16,47,73,0.18);
        }

        .story-copy blockquote {
            margin: 0 0 24px;
            padding-left: 18px;
            border-left: 5px solid var(--teal-500);
            color: var(--navy-900);
            font-size: clamp(1.45rem, 3vw, 2rem);
            font-weight: 850;
            line-height: 1.35;
        }

        .story-copy p {
            color: var(--muted);
            font-size: 1.05rem;
        }

        .standards {
            background:
                linear-gradient(180deg, #fff 0%, #f4fafb 100%);
        }

        .standards-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 14px;
        }

        .standard {
            padding: 24px;
            border-top: 4px solid transparent;
            border-image: linear-gradient(90deg, var(--blue-500), var(--green-500)) 1;
            background: #fff;
            box-shadow: var(--shadow-sm);
        }

        .standard strong {
            display: block;
            margin-bottom: 8px;
            color: var(--navy-900);
            font-size: 1.1rem;
        }

        .standard p {
            margin-bottom: 0;
            color: var(--muted);
            font-size: 0.94rem;
        }

        .cta {
            padding: 34px 0 88px;
            background: #f4fafb;
        }

        .cta-panel {
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 28px;
            overflow: hidden;
            padding: clamp(32px, 6vw, 58px);
            border-radius: var(--radius-lg);
            background:
                radial-gradient(circle at 88% 12%, rgba(98,212,48,0.24), transparent 17rem),
                linear-gradient(135deg, #0f6374, var(--navy-900));
            box-shadow: var(--shadow-lg);
        }

        .cta-panel::after {
            position: absolute;
            right: -110px;
            bottom: -180px;
            width: 330px;
            height: 330px;
            border: 50px solid rgba(255,255,255,0.06);
            border-radius: 50%;
            content: "";
        }

        .cta-panel h2 {
            margin-bottom: 10px;
            color: #fff;
            font-size: clamp(2rem, 4vw, 3.6rem);
        }

        .cta-panel p {
            max-width: 760px;
            margin-bottom: 0;
            color: #d4e6eb;
            font-size: 1.05rem;
        }

        .cta-panel .button {
            position: relative;
            z-index: 2;
            white-space: nowrap;
            background: #fff;
            color: var(--navy-900);
        }

        .site-footer {
            padding-top: 64px;
            background: var(--navy-950);
            color: #c8d8e0;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(150px, 0.7fr));
            gap: 42px;
            padding-bottom: 42px;
        }

        .footer-brand img {
            width: min(100%, 310px);
            margin-bottom: 18px;
        }

        .footer-brand p {
            max-width: 430px;
            color: #b8ccd5;
            font-size: 0.94rem;
        }

        .footer-grid h2 {
            margin-bottom: 16px;
            color: #fff;
            font-size: 1rem;
            letter-spacing: -0.01em;
        }

        .footer-links {
            display: grid;
            gap: 9px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .footer-links a {
            color: #c8d8e0;
            text-decoration: none;
            font-size: 0.93rem;
        }

        .footer-links a:hover {
            color: #fff;
            text-decoration: underline;
        }

        .footer-note {
            padding: 20px 0;
            border-top: 1px solid rgba(255,255,255,0.1);
            border-bottom: 1px solid rgba(255,255,255,0.1);
            color: #b9ccd5;
            font-size: 0.9rem;
        }

        .footer-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding: 22px 0;
            color: #9fb7c2;
            font-size: 0.86rem;
        }

        .social {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }

        .social a {
            color: #c8d8e0;
            font-weight: 750;
            text-decoration: none;
        }

        .social a:hover {
            color: #fff;
        }

        :focus-visible {
            outline: 3px solid var(--blue-500);
            outline-offset: 3px;
        }

        @media (max-width: 1040px) {
            .menu-button {
                display: inline-flex;
            }

            .nav {
                position: fixed;
                top: 76px;
                right: 16px;
                left: 16px;
                display: none;
                max-height: calc(100vh - 92px);
                padding: 14px;
                overflow-y: auto;
                border: 1px solid var(--line);
                border-radius: 20px;
                background: #fff;
                box-shadow: var(--shadow-lg);
            }

            .nav.open {
                display: block;
            }

            .nav-list {
                display: grid;
                gap: 4px;
            }

            .nav a {
                width: 100%;
                justify-content: flex-start;
                border-radius: 12px;
            }

            .nav .nav-cta {
                margin: 8px 0 0;
                justify-content: center;
            }

            .hero-grid,
            .mission-grid,
            .story-grid {
                grid-template-columns: 1fr;
            }

            .hero-panel {
                width: min(100%, 620px);
            }

            .feature-grid,
            .standards-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .footer-grid {
                grid-template-columns: minmax(240px, 1.4fr) repeat(2, minmax(150px, 0.7fr));
            }
        }

        @media (max-width: 760px) {
            .header-inner {
                min-height: 74px;
            }

            .brand img {
                width: min(58vw, 250px);
            }

            .hero {
                padding-top: 56px;
            }

            .hero h1 {
                font-size: clamp(3rem, 15vw, 5.4rem);
            }

            .safety-inner {
                grid-template-columns: auto 1fr;
            }

            .safety-tag {
                grid-column: 1 / -1;
                width: fit-content;
                margin-left: 62px;
            }

            .path-grid,
            .feature-grid,
            .standards-grid {
                grid-template-columns: 1fr;
            }

            .story-art {
                min-height: 380px;
            }

            .cta-panel {
                grid-template-columns: 1fr;
            }

            .cta-panel .button {
                width: fit-content;
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
            }

            .footer-brand {
                grid-column: 1 / -1;
            }

            .footer-bottom {
                align-items: flex-start;
                flex-direction: column;
            }
        }

        @media (max-width: 480px) {
            .container {
                width: min(calc(100% - 22px), var(--container));
            }

            .actions {
                flex-direction: column;
            }

            .actions .button {
                width: 100%;
            }

            .hero-panel {
                padding: 22px;
            }

            .safety-inner {
                grid-template-columns: 1fr;
            }

            .safety-tag {
                grid-column: auto;
                margin-left: 0;
            }

            .footer-grid {
                grid-template-columns: 1fr;
            }

            .footer-brand {
                grid-column: auto;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            *,
            *::before,
            *::after {
                transition-duration: 0.01ms !important;
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
            }
        }

/* Our Story page */
.story-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(72px, 9vw, 118px) 0;
    background:
        radial-gradient(circle at 8% 12%, rgba(46, 165, 223, 0.18), transparent 26rem),
        radial-gradient(circle at 92% 10%, rgba(98, 212, 48, 0.16), transparent 24rem),
        linear-gradient(180deg, #ffffff 0%, #f5fbfc 100%);
}

.story-hero::after {
    position: absolute;
    right: -160px;
    bottom: -250px;
    width: 560px;
    height: 560px;
    border: 66px solid rgba(57, 185, 179, 0.08);
    border-radius: 50%;
    content: "";
}

.story-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
    align-items: center;
    gap: clamp(44px, 8vw, 96px);
}

.story-hero h1 {
    max-width: 850px;
    margin-bottom: 24px;
    font-size: clamp(3.2rem, 7vw, 6.4rem);
    line-height: 0.96;
    letter-spacing: -0.065em;
}

.story-hero h1 span {
    display: block;
    background: linear-gradient(90deg, var(--blue-500), var(--teal-500), var(--green-600));
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
}

.story-hero-copy > p {
    max-width: 710px;
    color: var(--muted);
    font-size: clamp(1.12rem, 2vw, 1.28rem);
}

.story-hero-card {
    padding: 28px;
    border: 1px solid rgba(16, 47, 73, 0.1);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-lg);
}

.story-hero-mark {
    display: grid;
    width: 126px;
    height: 126px;
    place-items: center;
    margin-bottom: 24px;
    border: 8px solid transparent;
    border-radius: 50%;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(145deg, var(--blue-500), var(--teal-500), var(--green-500)) border-box;
    color: var(--teal-500);
    font-family: Georgia, serif;
    font-size: 76px;
}

.story-hero-card blockquote {
    margin: 0 0 16px;
    color: var(--navy-900);
    font-size: 1.45rem;
    font-weight: 850;
    line-height: 1.38;
}

.story-hero-card p {
    margin-bottom: 0;
    color: var(--muted);
}

.story-intro {
    padding: clamp(72px, 9vw, 110px) 0;
}

.story-intro-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(42px, 8vw, 90px);
    align-items: start;
}

.story-intro-aside {
    position: sticky;
    top: 118px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--mist);
}

.story-intro-aside h2 {
    margin-bottom: 12px;
    font-size: 1.45rem;
}

.story-intro-aside p {
    color: var(--muted);
}

.story-intro-aside ul {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.story-intro-aside li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 740;
}

.story-intro-aside li::before {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    margin-top: 0.52em;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-500), var(--green-500));
    content: "";
}

.story-intro-copy h2 {
    margin-bottom: 22px;
    font-size: clamp(2.2rem, 4.6vw, 4rem);
}

.story-intro-copy > p {
    color: var(--muted);
    font-size: 1.08rem;
}

.timeline {
    position: relative;
    display: grid;
    gap: 18px;
    margin-top: 34px;
}

.timeline::before {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 25px;
    width: 2px;
    background: linear-gradient(var(--blue-500), var(--teal-500), var(--green-500));
    content: "";
}

.timeline-step {
    position: relative;
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 18px;
    align-items: start;
}

.timeline-number {
    position: relative;
    z-index: 1;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 5px solid #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-500), var(--green-500));
    color: var(--navy-950);
    box-shadow: var(--shadow-sm);
    font-weight: 900;
}

.timeline-card {
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.timeline-card h3 {
    margin-bottom: 8px;
    font-size: 1.28rem;
}

.timeline-card p {
    margin-bottom: 0;
    color: var(--muted);
}

.turning-point {
    position: relative;
    overflow: hidden;
    background: var(--navy-950);
    color: #fff;
}

.turning-point::before {
    position: absolute;
    top: -220px;
    right: -150px;
    width: 500px;
    height: 500px;
    border: 68px solid rgba(98, 212, 48, 0.08);
    border-radius: 50%;
    content: "";
}

.turning-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(48px, 8vw, 94px);
    align-items: center;
}

.turning-point .eyebrow,
.turning-point h2 {
    color: #fff;
}

.turning-point h2 {
    margin-bottom: 20px;
    font-size: clamp(2.3rem, 5vw, 4.5rem);
}

.turning-copy p {
    color: #c6d8e2;
    font-size: 1.08rem;
}

.turning-quote {
    padding: clamp(28px, 5vw, 46px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.06);
}

.turning-quote blockquote {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(1.65rem, 3.5vw, 2.7rem);
    font-weight: 850;
    line-height: 1.28;
}

.turning-quote p {
    margin-bottom: 0;
    color: #c4d5dd;
}

.values-section {
    background: var(--mist);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.value-card {
    min-height: 100%;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
}

.value-card span {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--soft-blue), var(--soft-green));
    color: var(--navy-900);
    font-weight: 900;
}

.value-card h3 {
    margin-bottom: 8px;
    font-size: 1.2rem;
}

.value-card p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.today-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: clamp(42px, 8vw, 88px);
    align-items: center;
}

.today-copy h2 {
    margin-bottom: 18px;
    font-size: clamp(2.2rem, 4.8vw, 4.2rem);
}

.today-copy p {
    color: var(--muted);
    font-size: 1.05rem;
}

.today-panel {
    padding: 28px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 80% 10%, rgba(98, 212, 48, 0.18), transparent 14rem),
        linear-gradient(145deg, var(--soft-blue), var(--soft-teal));
    box-shadow: var(--shadow-lg);
}

.today-panel h3 {
    margin-bottom: 12px;
    font-size: 1.55rem;
}

.today-panel ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.today-panel li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-weight: 740;
}

.today-panel li::before {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #277446;
    content: "✓";
    font-size: 0.82rem;
    font-weight: 900;
}

@media (max-width: 1040px) {
    .story-hero-grid,
    .story-intro-grid,
    .turning-grid,
    .today-grid {
        grid-template-columns: 1fr;
    }

    .story-hero-card {
        width: min(100%, 620px);
    }

    .story-intro-aside {
        position: static;
    }

    .values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .story-hero {
        padding-top: 56px;
    }

    .story-hero h1 {
        font-size: clamp(3rem, 15vw, 5.4rem);
    }

    .values-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .timeline::before {
        left: 21px;
    }

    .timeline-step {
        grid-template-columns: 44px 1fr;
        gap: 12px;
    }

    .timeline-number {
        width: 44px;
        height: 44px;
    }

    .timeline-card {
        padding: 18px;
    }
}

/* Help and Support page */
.support-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(72px, 9vw, 118px) 0;
    background:
        radial-gradient(circle at 8% 12%, rgba(46, 165, 223, 0.18), transparent 26rem),
        radial-gradient(circle at 92% 10%, rgba(98, 212, 48, 0.16), transparent 24rem),
        linear-gradient(180deg, #ffffff 0%, #f5fbfc 100%);
}

.support-hero::after {
    position: absolute;
    right: -160px;
    bottom: -250px;
    width: 560px;
    height: 560px;
    border: 66px solid rgba(57, 185, 179, 0.08);
    border-radius: 50%;
    content: "";
}

.support-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
    align-items: center;
    gap: clamp(44px, 8vw, 96px);
}

.support-hero h1 {
    max-width: 900px;
    margin-bottom: 24px;
    font-size: clamp(3.2rem, 7vw, 6.4rem);
    line-height: 0.96;
    letter-spacing: -0.065em;
}

.support-hero h1 span {
    display: block;
    background: linear-gradient(90deg, var(--blue-500), var(--teal-500), var(--green-600));
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
}

.support-hero-copy > p {
    max-width: 720px;
    color: var(--muted);
    font-size: clamp(1.12rem, 2vw, 1.28rem);
}

.support-hero-card {
    padding: 28px;
    border: 1px solid rgba(16, 47, 73, 0.1);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-lg);
}

.support-hero-card h2 {
    margin-bottom: 12px;
    font-size: 1.65rem;
}

.support-hero-card p {
    color: var(--muted);
}

.support-quick-list {
    display: grid;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.support-quick-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--navy-900);
    font-weight: 800;
    text-decoration: none;
}

.support-quick-list a:hover {
    background: var(--mist);
}

.emergency-section {
    padding: 34px 0;
    background: #fff;
}

.emergency-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.emergency-card {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.emergency-card.danger {
    border-color: #efbcc5;
    background: var(--danger-bg);
}

.emergency-card.urgent {
    background: var(--soft-blue);
}

.emergency-card.routine {
    background: var(--soft-green);
}

.emergency-card span {
    display: inline-flex;
    margin-bottom: 14px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff;
    color: var(--navy-900);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.emergency-card.danger span {
    color: var(--danger);
}

.emergency-card h2 {
    margin-bottom: 10px;
    font-size: 1.35rem;
}

.emergency-card p {
    margin-bottom: 0;
    color: var(--muted);
}

.emergency-card strong {
    color: var(--navy-900);
}

.support-pathways {
    background: var(--mist);
}

.support-path-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.support-path-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.support-path-card .feature-icon {
    margin-bottom: 18px;
}

.support-path-card h3 {
    margin-bottom: 9px;
    font-size: 1.35rem;
}

.support-path-card p {
    color: var(--muted);
}

.support-path-card ul {
    display: grid;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.support-path-card li {
    position: relative;
    padding-left: 18px;
    color: var(--ink);
    font-size: 0.94rem;
}

.support-path-card li::before {
    position: absolute;
    top: 0.64em;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-500), var(--green-500));
    content: "";
}

.support-path-card a {
    margin-top: auto;
    color: var(--navy-900);
    font-weight: 850;
    text-decoration: none;
}

.action-plan-section {
    position: relative;
    overflow: hidden;
    background: var(--navy-950);
    color: #fff;
}

.action-plan-section::before {
    position: absolute;
    top: -220px;
    right: -150px;
    width: 500px;
    height: 500px;
    border: 68px solid rgba(98, 212, 48, 0.08);
    border-radius: 50%;
    content: "";
}

.action-plan-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(48px, 8vw, 94px);
    align-items: start;
}

.action-plan-section .eyebrow,
.action-plan-section h2 {
    color: #fff;
}

.action-plan-copy h2 {
    margin-bottom: 20px;
    font-size: clamp(2.3rem, 5vw, 4.5rem);
}

.action-plan-copy p {
    color: #c6d8e2;
    font-size: 1.08rem;
}

.plan-panel {
    display: grid;
    gap: 14px;
}

.plan-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.05);
}

.plan-step span {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-500), var(--green-500));
    color: var(--navy-950);
    font-weight: 900;
}

.plan-step h3 {
    margin-bottom: 4px;
    color: #fff;
    font-size: 1.18rem;
}

.plan-step p {
    margin-bottom: 0;
    color: #bfd0d9;
}

.rescue-section {
    background: #fff;
}

.rescue-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(300px, 0.98fr);
    gap: clamp(42px, 8vw, 88px);
    align-items: start;
}

.rescue-copy h2 {
    margin-bottom: 18px;
    font-size: clamp(2.2rem, 4.8vw, 4.2rem);
}

.rescue-copy p {
    color: var(--muted);
    font-size: 1.05rem;
}

.rescue-panel {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 84% 10%, rgba(98, 212, 48, 0.18), transparent 14rem),
        linear-gradient(145deg, var(--soft-blue), var(--soft-teal));
    box-shadow: var(--shadow-lg);
}

.rescue-panel h3 {
    margin-bottom: 14px;
    font-size: 1.5rem;
}

.rescue-panel ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rescue-panel li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-weight: 740;
}

.rescue-panel li::before {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #277446;
    content: "✓";
    font-size: 0.82rem;
    font-weight: 900;
}

.wellbeing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.wellbeing-card {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.wellbeing-card h3 {
    margin-bottom: 10px;
    font-size: 1.4rem;
}

.wellbeing-card p {
    color: var(--muted);
}

.wellbeing-card a {
    color: var(--navy-900);
    font-weight: 850;
    text-decoration: none;
}

.professional-help {
    background: var(--mist);
}

.professional-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.professional-card {
    min-height: 100%;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
}

.professional-card span {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--soft-blue), var(--soft-green));
    color: var(--navy-900);
    font-weight: 900;
}

.professional-card h3 {
    margin-bottom: 8px;
    font-size: 1.18rem;
}

.professional-card p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.94rem;
}

.support-boundary {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.support-boundary h2 {
    margin-bottom: 10px;
    font-size: 1.45rem;
}

.support-boundary p {
    margin-bottom: 0;
    color: var(--muted);
}

@media (max-width: 1040px) {
    .support-hero-grid,
    .action-plan-grid,
    .rescue-grid {
        grid-template-columns: 1fr;
    }

    .support-hero-card {
        width: min(100%, 620px);
    }

    .support-path-grid,
    .professional-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .support-hero {
        padding-top: 56px;
    }

    .support-hero h1 {
        font-size: clamp(3rem, 15vw, 5.4rem);
    }

    .emergency-grid,
    .support-path-grid,
    .wellbeing-grid,
    .professional-grid {
        grid-template-columns: 1fr;
    }
}

/* COPD Resources library */
.resources-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(72px, 9vw, 118px) 0;
    background:
        radial-gradient(circle at 8% 12%, rgba(46, 165, 223, 0.18), transparent 26rem),
        radial-gradient(circle at 92% 10%, rgba(98, 212, 48, 0.16), transparent 24rem),
        linear-gradient(180deg, #ffffff 0%, #f5fbfc 100%);
}

.resources-hero::after {
    position: absolute;
    right: -160px;
    bottom: -250px;
    width: 560px;
    height: 560px;
    border: 66px solid rgba(57, 185, 179, 0.08);
    border-radius: 50%;
    content: "";
}

.resources-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
    align-items: center;
    gap: clamp(44px, 8vw, 96px);
}

.resources-hero h1 {
    max-width: 920px;
    margin-bottom: 24px;
    font-size: clamp(3.2rem, 7vw, 6.4rem);
    line-height: 0.96;
    letter-spacing: -0.065em;
}

.resources-hero h1 span {
    display: block;
    background: linear-gradient(90deg, var(--blue-500), var(--teal-500), var(--green-600));
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
}

.resources-hero-copy > p {
    max-width: 720px;
    color: var(--muted);
    font-size: clamp(1.12rem, 2vw, 1.28rem);
}

.resources-summary {
    padding: 28px;
    border: 1px solid rgba(16, 47, 73, 0.1);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.92);
    box-shadow: var(--shadow-lg);
}

.resources-summary h2 {
    margin-bottom: 10px;
    font-size: 1.65rem;
}

.resources-summary p {
    color: var(--muted);
}

.summary-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.summary-stat {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
}

.summary-stat strong {
    display: block;
    color: var(--navy-900);
    font-size: 1.6rem;
}

.summary-stat span {
    color: var(--muted);
    font-size: 0.88rem;
}

.library-nav {
    padding: 20px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.library-nav-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.library-nav strong {
    margin-right: 4px;
    color: var(--navy-900);
}

.library-nav a {
    padding: 8px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--mist);
    color: var(--navy-900);
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
}

.library-nav a:hover {
    background: var(--soft-blue);
}

.resource-library {
    background: var(--mist);
}

.resource-category + .resource-category {
    margin-top: 68px;
}

.category-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

.category-head h2 {
    margin-bottom: 7px;
    font-size: clamp(2rem, 4vw, 3.4rem);
}

.category-head p {
    max-width: 700px;
    margin-bottom: 0;
    color: var(--muted);
}

.category-count {
    flex: 0 0 auto;
    padding: 7px 12px;
    border-radius: 999px;
    background: #fff;
    color: var(--navy-900);
    font-size: 0.84rem;
    font-weight: 850;
}

.download-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.download-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.download-card.featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 30px;
    align-items: center;
    background:
        radial-gradient(circle at 90% 10%, rgba(98,212,48,0.15), transparent 18rem),
        #fff;
}

.resource-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.resource-label {
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--soft-blue);
    color: var(--navy-900);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.resource-label.nhs {
    background: #e8f3ff;
    color: #135b96;
}

.resource-label.community {
    background: var(--soft-green);
    color: #286f41;
}

.download-card h3 {
    margin-bottom: 10px;
    font-size: 1.48rem;
}

.download-card p {
    color: var(--muted);
}

.resource-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 18px;
    margin: 4px 0 20px;
    color: #526777;
    font-size: 0.88rem;
}

.resource-meta strong {
    color: var(--navy-900);
}

.resource-note {
    margin: 0 0 20px;
    padding: 13px 15px;
    border-left: 4px solid var(--teal-500);
    border-radius: 0 12px 12px 0;
    background: var(--soft-teal);
    color: #365e61;
    font-size: 0.9rem;
}

.download-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

.download-button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 11px 17px;
    border-radius: 999px;
    background: var(--navy-900);
    color: #fff;
    font-weight: 850;
    text-decoration: none;
}

.download-button:hover {
    background: var(--navy-950);
}

.download-button.secondary {
    border: 2px solid var(--navy-900);
    background: #fff;
    color: var(--navy-900);
}

.feature-download {
    min-width: 210px;
    padding: 24px;
    border-radius: var(--radius-md);
    background: var(--navy-950);
    color: #fff;
    text-align: center;
}

.feature-download strong {
    display: block;
    margin-bottom: 4px;
    font-size: 2.6rem;
    line-height: 1;
}

.feature-download span {
    display: block;
    margin-bottom: 16px;
    color: #c5d8e1;
}

.feature-download .download-button {
    width: 100%;
    background: #fff;
    color: var(--navy-900);
}

.review-panel {
    padding: clamp(28px, 5vw, 46px);
    border: 1px solid #eed6a6;
    border-radius: var(--radius-lg);
    background: #fffaf0;
}

.review-panel h2 {
    margin-bottom: 12px;
    color: #694c13;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
}

.review-panel p {
    color: #6f6042;
}

.review-list {
    display: grid;
    gap: 12px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.review-list li {
    padding: 14px 16px;
    border: 1px solid #eeddb9;
    border-radius: 14px;
    background: #fff;
    color: #5d5139;
    font-weight: 740;
}

.resource-standards {
    background: var(--navy-950);
    color: #fff;
}

.resource-standards .eyebrow,
.resource-standards h2 {
    color: #fff;
}

.resource-standards .section-head p {
    color: #c6d8e2;
}

.resource-standards-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.resource-standard {
    padding: 23px;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.06);
}

.resource-standard strong {
    display: block;
    margin-bottom: 8px;
    color: #fff;
    font-size: 1.08rem;
}

.resource-standard p {
    margin-bottom: 0;
    color: #bfd0d9;
    font-size: 0.93rem;
}

@media (max-width: 1040px) {
    .resources-hero-grid {
        grid-template-columns: 1fr;
    }

    .resources-summary {
        width: min(100%, 620px);
    }

    .resource-standards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .resources-hero {
        padding-top: 56px;
    }

    .resources-hero h1 {
        font-size: clamp(3rem, 15vw, 5.4rem);
    }

    .category-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .download-grid,
    .resource-standards-grid {
        grid-template-columns: 1fr;
    }

    .download-card.featured {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .feature-download {
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .summary-stats {
        grid-template-columns: 1fr;
    }

    .download-actions {
        flex-direction: column;
    }

    .download-button {
        width: 100%;
    }
}

/* Living with COPD guide pages */
.guide-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(68px, 8vw, 108px) 0;
    background:
        radial-gradient(circle at 8% 12%, rgba(46,165,223,.18), transparent 25rem),
        radial-gradient(circle at 92% 10%, rgba(98,212,48,.15), transparent 23rem),
        linear-gradient(180deg, #fff 0%, #f5fbfc 100%);
}
.guide-hero::after {
    position: absolute;
    right: -150px;
    bottom: -250px;
    width: 540px;
    height: 540px;
    border: 64px solid rgba(57,185,179,.08);
    border-radius: 50%;
    content: "";
}
.guide-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0,1.08fr) minmax(300px,.72fr);
    align-items: center;
    gap: clamp(40px,7vw,88px);
}
.guide-hero h1 {
    max-width: 920px;
    margin-bottom: 22px;
    font-size: clamp(3rem,6.6vw,6rem);
    line-height: .98;
    letter-spacing: -.06em;
}
.guide-hero h1 span {
    display: block;
    background: linear-gradient(90deg,var(--blue-500),var(--teal-500),var(--green-600));
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
}
.guide-hero-copy>p {
    max-width: 720px;
    color: var(--muted);
    font-size: clamp(1.1rem,2vw,1.25rem);
}
.guide-summary {
    padding: 27px;
    border: 1px solid rgba(16,47,73,.1);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.93);
    box-shadow: var(--shadow-lg);
}
.guide-summary h2 {
    margin-bottom: 11px;
    font-size: 1.62rem;
}
.guide-summary p {
    color: var(--muted);
}
.guide-summary ul,
.guide-checklist {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.guide-summary li,
.guide-checklist li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 730;
}
.guide-summary li::before,
.guide-checklist li::before {
    display: grid;
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--soft-green);
    color: #277446;
    content: "✓";
    font-size: .78rem;
    font-weight: 900;
}
.guide-index {
    padding: 22px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff;
}
.guide-index-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
}
.guide-index strong { margin-right: 4px; }
.guide-index a {
    padding: 8px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--mist);
    color: var(--navy-900);
    font-size: .89rem;
    font-weight: 800;
    text-decoration: none;
}
.guide-index a:hover { background: var(--soft-blue); }
.guide-card-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px;
}
.guide-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.guide-card-number {
    display: grid;
    width: 47px;
    height: 47px;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 15px;
    background: linear-gradient(135deg,var(--soft-blue),var(--soft-green));
    color: var(--navy-900);
    font-weight: 900;
}
.guide-card h3 {
    margin-bottom: 9px;
    font-size: 1.32rem;
}
.guide-card p {
    color: var(--muted);
}
.guide-card a {
    margin-top: auto;
    color: var(--navy-900);
    font-weight: 850;
    text-decoration: none;
}
.guide-card a:hover { color: #0b6f82; }
.guide-content {
    background: var(--mist);
}
.guide-content-grid {
    display: grid;
    grid-template-columns: minmax(250px,.68fr) minmax(0,1.32fr);
    gap: clamp(38px,7vw,80px);
    align-items: start;
}
.guide-aside {
    position: sticky;
    top: 112px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.guide-aside h2 {
    margin-bottom: 10px;
    font-size: 1.38rem;
}
.guide-aside p { color: var(--muted); }
.guide-aside a {
    color: var(--navy-900);
    font-weight: 800;
}
.guide-article {
    display: grid;
    gap: 18px;
}
.guide-block {
    padding: clamp(23px,4vw,32px);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.guide-block h2 {
    margin-bottom: 12px;
    font-size: clamp(1.65rem,3vw,2.35rem);
}
.guide-block h3 {
    margin: 22px 0 8px;
    font-size: 1.18rem;
}
.guide-block p { color: var(--muted); }
.guide-block ul {
    display: grid;
    gap: 8px;
    padding-left: 20px;
}
.guide-alert {
    padding: 20px;
    border-left: 5px solid var(--danger);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--danger-bg);
}
.guide-alert h2 {
    margin-bottom: 8px;
    color: #7d1829;
    font-size: 1.28rem;
}
.guide-alert p {
    margin-bottom: 0;
    color: #6e4d55;
}
.guide-tip {
    padding: 19px 21px;
    border-left: 5px solid var(--teal-500);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--soft-teal);
}
.guide-tip strong {
    display: block;
    margin-bottom: 5px;
    color: var(--navy-900);
}
.guide-tip p {
    margin-bottom: 0;
    color: #466a6c;
}
.source-panel {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
}
.source-panel h2 {
    margin-bottom: 10px;
    font-size: 1.4rem;
}
.source-panel ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 20px;
}
.source-panel a {
    color: var(--navy-900);
    font-weight: 760;
}
@media (max-width:1040px) {
    .guide-hero-grid,
    .guide-content-grid { grid-template-columns: 1fr; }
    .guide-summary { width:min(100%,620px); }
    .guide-aside { position:static; }
}
@media (max-width:760px) {
    .guide-hero { padding-top:54px; }
    .guide-hero h1 { font-size:clamp(2.85rem,14vw,5.1rem); }
    .guide-card-grid { grid-template-columns:1fr; }
}

/* Air Quality and Heat pages */
.environment-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(68px, 8vw, 108px) 0;
    background:
        radial-gradient(circle at 8% 12%, rgba(46,165,223,.18), transparent 25rem),
        radial-gradient(circle at 92% 10%, rgba(98,212,48,.15), transparent 23rem),
        linear-gradient(180deg, #fff 0%, #f5fbfc 100%);
}
.environment-hero::after {
    position: absolute;
    right: -150px;
    bottom: -250px;
    width: 540px;
    height: 540px;
    border: 64px solid rgba(57,185,179,.08);
    border-radius: 50%;
    content: "";
}
.environment-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0,1.08fr) minmax(300px,.72fr);
    align-items: center;
    gap: clamp(40px,7vw,88px);
}
.environment-hero h1 {
    max-width: 920px;
    margin-bottom: 22px;
    font-size: clamp(3rem,6.6vw,6rem);
    line-height: .98;
    letter-spacing: -.06em;
}
.environment-hero h1 span {
    display: block;
    background: linear-gradient(90deg,var(--blue-500),var(--teal-500),var(--green-600));
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
}
.environment-hero-copy>p {
    max-width: 720px;
    color: var(--muted);
    font-size: clamp(1.1rem,2vw,1.25rem);
}
.environment-summary {
    padding: 27px;
    border: 1px solid rgba(16,47,73,.1);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.93);
    box-shadow: var(--shadow-lg);
}
.environment-summary h2 {
    margin-bottom: 11px;
    font-size: 1.62rem;
}
.environment-summary p { color: var(--muted); }
.environment-summary ul {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.environment-summary li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 730;
}
.environment-summary li::before {
    display: grid;
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--soft-green);
    color: #277446;
    content: "✓";
    font-size: .78rem;
    font-weight: 900;
}
.environment-links {
    padding: 22px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff;
}
.environment-links-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.environment-links a {
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--mist);
    color: var(--navy-900);
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
}
.environment-links a:hover { background: var(--soft-blue); }
.daqi-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 16px;
}
.daqi-card {
    min-height: 100%;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.daqi-card.low { border-top: 7px solid #39a852; }
.daqi-card.moderate { border-top: 7px solid #efc83c; }
.daqi-card.high { border-top: 7px solid #d54b43; }
.daqi-card.very-high { border-top: 7px solid #7c4a9c; }
.daqi-range {
    display: inline-flex;
    margin-bottom: 16px;
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--mist);
    color: var(--navy-900);
    font-size: .82rem;
    font-weight: 900;
}
.daqi-card h3 {
    margin-bottom: 8px;
    font-size: 1.32rem;
}
.daqi-card p {
    margin-bottom: 0;
    color: var(--muted);
}
.environment-content {
    background: var(--mist);
}
.environment-grid {
    display: grid;
    grid-template-columns: minmax(260px,.7fr) minmax(0,1.3fr);
    gap: clamp(38px,7vw,80px);
    align-items: start;
}
.environment-aside {
    position: sticky;
    top: 112px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.environment-aside h2 {
    margin-bottom: 10px;
    font-size: 1.4rem;
}
.environment-aside p { color: var(--muted); }
.environment-aside a {
    display: inline-flex;
    margin-top: 8px;
    color: var(--navy-900);
    font-weight: 850;
}
.environment-article {
    display: grid;
    gap: 18px;
}
.environment-block {
    padding: clamp(23px,4vw,32px);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.environment-block h2 {
    margin-bottom: 12px;
    font-size: clamp(1.65rem,3vw,2.35rem);
}
.environment-block h3 {
    margin: 22px 0 8px;
    font-size: 1.18rem;
}
.environment-block p { color: var(--muted); }
.environment-block ul {
    display: grid;
    gap: 8px;
    padding-left: 20px;
}
.environment-tip {
    padding: 20px;
    border-left: 5px solid var(--teal-500);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--soft-teal);
}
.environment-tip strong {
    display: block;
    margin-bottom: 5px;
    color: var(--navy-900);
}
.environment-tip p {
    margin-bottom: 0;
    color: #466a6c;
}
.environment-warning {
    padding: 20px;
    border-left: 5px solid var(--danger);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--danger-bg);
}
.environment-warning h2 {
    margin-bottom: 8px;
    color: #7d1829;
    font-size: 1.28rem;
}
.environment-warning p {
    margin-bottom: 0;
    color: #6e4d55;
}
.heat-plan-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 17px;
}
.heat-plan-card {
    padding: 25px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.heat-plan-card span {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    margin-bottom: 17px;
    border-radius: 15px;
    background: linear-gradient(135deg,var(--soft-blue),var(--soft-green));
    color: var(--navy-900);
    font-weight: 900;
}
.heat-plan-card h3 {
    margin-bottom: 8px;
    font-size: 1.25rem;
}
.heat-plan-card p {
    margin-bottom: 0;
    color: var(--muted);
}
.source-box {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
}
.source-box h2 {
    margin-bottom: 10px;
    font-size: 1.4rem;
}
.source-box ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 20px;
}
.source-box a {
    color: var(--navy-900);
    font-weight: 760;
}
@media (max-width:1040px) {
    .environment-hero-grid,
    .environment-grid { grid-template-columns:1fr; }
    .environment-summary { width:min(100%,620px); }
    .environment-aside { position:static; }
    .daqi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
    .environment-hero { padding-top:54px; }
    .environment-hero h1 { font-size:clamp(2.85rem,14vw,5.1rem); }
    .daqi-grid,
    .heat-plan-grid { grid-template-columns:1fr; }
}

/* News and Community Stories */
.news-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(68px, 8vw, 108px) 0;
    background:
        radial-gradient(circle at 8% 12%, rgba(46,165,223,.18), transparent 25rem),
        radial-gradient(circle at 92% 10%, rgba(98,212,48,.15), transparent 23rem),
        linear-gradient(180deg, #fff 0%, #f5fbfc 100%);
}
.news-hero::after {
    position: absolute;
    right: -150px;
    bottom: -250px;
    width: 540px;
    height: 540px;
    border: 64px solid rgba(57,185,179,.08);
    border-radius: 50%;
    content: "";
}
.news-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0,1.08fr) minmax(300px,.72fr);
    align-items: center;
    gap: clamp(40px,7vw,88px);
}
.news-hero h1 {
    max-width: 920px;
    margin-bottom: 22px;
    font-size: clamp(3rem,6.6vw,6rem);
    line-height: .98;
    letter-spacing: -.06em;
}
.news-hero h1 span {
    display: block;
    background: linear-gradient(90deg,var(--blue-500),var(--teal-500),var(--green-600));
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
}
.news-hero-copy>p {
    max-width: 720px;
    color: var(--muted);
    font-size: clamp(1.1rem,2vw,1.25rem);
}
.news-summary {
    padding: 27px;
    border: 1px solid rgba(16,47,73,.1);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.93);
    box-shadow: var(--shadow-lg);
}
.news-summary h2 {
    margin-bottom: 11px;
    font-size: 1.62rem;
}
.news-summary p { color: var(--muted); }
.news-summary ul {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.news-summary li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 730;
}
.news-summary li::before {
    display: grid;
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--soft-green);
    color: #277446;
    content: "✓";
    font-size: .78rem;
    font-weight: 900;
}
.news-filter {
    padding: 22px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff;
}
.news-filter-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.news-filter a {
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--mist);
    color: var(--navy-900);
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
}
.news-filter a:hover { background: var(--soft-blue); }
.featured-story {
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr);
    gap: 24px;
    align-items: stretch;
}
.featured-story-copy,
.featured-story-art {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.featured-story-copy {
    padding: clamp(28px,5vw,48px);
}
.story-kicker {
    display: inline-flex;
    margin-bottom: 15px;
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--soft-green);
    color: #277446;
    font-size: .8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.featured-story-copy h2 {
    margin-bottom: 14px;
    font-size: clamp(2rem,4.2vw,3.6rem);
}
.featured-story-copy p {
    color: var(--muted);
    font-size: 1.06rem;
}
.story-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 18px;
    margin: 16px 0 22px;
    color: #526777;
    font-size: .88rem;
}
.story-meta strong { color: var(--navy-900); }
.featured-story-art {
    position: relative;
    display: grid;
    min-height: 390px;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 28% 20%, rgba(255,255,255,.92), transparent 9rem),
        linear-gradient(145deg, rgba(46,165,223,.28), rgba(57,185,179,.28), rgba(98,212,48,.3));
}
.featured-story-art::before,
.featured-story-art::after {
    position: absolute;
    border-radius: 50%;
    content: "";
}
.featured-story-art::before {
    top: -90px;
    right: -70px;
    width: 240px;
    height: 240px;
    border: 42px solid rgba(255,255,255,.28);
}
.featured-story-art::after {
    bottom: -120px;
    left: -90px;
    width: 290px;
    height: 290px;
    border: 48px solid rgba(16,47,73,.08);
}
.featured-story-symbol {
    position: relative;
    z-index: 2;
    display: grid;
    width: 180px;
    height: 180px;
    place-items: center;
    border: 11px solid rgba(255,255,255,.9);
    border-radius: 50%;
    color: #fff;
    font-family: Georgia,serif;
    font-size: 108px;
}
.news-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px;
}
.news-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    padding: 25px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.news-card .story-kicker {
    width: fit-content;
}
.news-card h3 {
    margin-bottom: 9px;
    font-size: 1.34rem;
}
.news-card p { color: var(--muted); }
.news-card a {
    margin-top: auto;
    color: var(--navy-900);
    font-weight: 850;
    text-decoration: none;
}
.news-card a:hover { color: #0b6f82; }
.editorial-section {
    background: var(--navy-950);
    color: #fff;
}
.editorial-section .eyebrow,
.editorial-section h2 { color:#fff; }
.editorial-section .section-head p { color:#c6d8e2; }
.editorial-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 16px;
}
.editorial-card {
    padding: 23px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.06);
}
.editorial-card strong {
    display: block;
    margin-bottom: 8px;
    color: #fff;
    font-size: 1.08rem;
}
.editorial-card p {
    margin-bottom: 0;
    color: #bfd0d9;
    font-size: .93rem;
}
.contribute-grid {
    display: grid;
    grid-template-columns: minmax(0,1.05fr) minmax(300px,.95fr);
    gap: clamp(38px,7vw,76px);
    align-items: start;
}
.contribute-copy h2 {
    margin-bottom: 15px;
    font-size: clamp(2rem,4vw,3.7rem);
}
.contribute-copy p {
    color: var(--muted);
    font-size: 1.05rem;
}
.contribute-panel {
    padding: 27px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--mist);
}
.contribute-panel h3 {
    margin-bottom: 12px;
    font-size: 1.48rem;
}
.contribute-panel ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 20px;
}
.article-hero {
    padding: clamp(62px,8vw,96px) 0 42px;
    background:
        radial-gradient(circle at 10% 12%, rgba(46,165,223,.15), transparent 23rem),
        linear-gradient(180deg,#fff 0%,#f5fbfc 100%);
}
.article-wrap {
    width: min(calc(100% - 32px), 860px);
    margin: 0 auto;
}
.article-hero h1 {
    margin-bottom: 18px;
    font-size: clamp(2.7rem,6vw,5.2rem);
    line-height: 1;
    letter-spacing: -.055em;
}
.article-lead {
    color: var(--muted);
    font-size: 1.15rem;
}
.article-body {
    padding: 54px 0 84px;
}
.article-content {
    width: min(calc(100% - 32px), 780px);
    margin: 0 auto;
}
.article-content h2 {
    margin: 42px 0 14px;
    font-size: clamp(1.7rem,3vw,2.45rem);
}
.article-content h3 {
    margin: 30px 0 10px;
    font-size: 1.28rem;
}
.article-content p,
.article-content li {
    color: #42596a;
    font-size: 1.05rem;
}
.article-content ul {
    display: grid;
    gap: 8px;
}
.article-note {
    margin: 30px 0;
    padding: 20px;
    border-left: 5px solid var(--teal-500);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--soft-teal);
}
.article-note p {
    margin-bottom: 0;
}
@media (max-width:1040px) {
    .news-hero-grid,
    .featured-story,
    .contribute-grid { grid-template-columns:1fr; }
    .news-summary { width:min(100%,620px); }
    .news-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .editorial-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
    .news-hero { padding-top:54px; }
    .news-hero h1 { font-size:clamp(2.85rem,14vw,5.1rem); }
    .news-grid,
    .editorial-grid { grid-template-columns:1fr; }
}

/* Contact and Participation */
.contact-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(68px, 8vw, 108px) 0;
    background:
        radial-gradient(circle at 8% 12%, rgba(46,165,223,.18), transparent 25rem),
        radial-gradient(circle at 92% 10%, rgba(98,212,48,.15), transparent 23rem),
        linear-gradient(180deg, #fff 0%, #f5fbfc 100%);
}
.contact-hero::after {
    position: absolute;
    right: -150px;
    bottom: -250px;
    width: 540px;
    height: 540px;
    border: 64px solid rgba(57,185,179,.08);
    border-radius: 50%;
    content: "";
}
.contact-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0,1.08fr) minmax(300px,.72fr);
    align-items: center;
    gap: clamp(40px,7vw,88px);
}
.contact-hero h1 {
    max-width: 920px;
    margin-bottom: 22px;
    font-size: clamp(3rem,6.6vw,6rem);
    line-height: .98;
    letter-spacing: -.06em;
}
.contact-hero h1 span {
    display: block;
    background: linear-gradient(90deg,var(--blue-500),var(--teal-500),var(--green-600));
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
}
.contact-hero-copy>p {
    max-width: 720px;
    color: var(--muted);
    font-size: clamp(1.1rem,2vw,1.25rem);
}
.contact-summary {
    padding: 27px;
    border: 1px solid rgba(16,47,73,.1);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.93);
    box-shadow: var(--shadow-lg);
}
.contact-summary h2 {
    margin-bottom: 11px;
    font-size: 1.62rem;
}
.contact-summary p { color: var(--muted); }
.contact-summary ul {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.contact-summary li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 730;
}
.contact-summary li::before {
    display: grid;
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--soft-green);
    color: #277446;
    content: "✓";
    font-size: .78rem;
    font-weight: 900;
}
.contact-safety {
    padding: 22px 0;
    border-top: 1px solid #efbcc5;
    border-bottom: 1px solid #efbcc5;
    background: var(--danger-bg);
}
.contact-safety-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 15px;
    align-items: start;
}
.contact-safety-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    background: var(--danger);
    color: #fff;
    font-weight: 900;
}
.contact-safety h2 {
    margin-bottom: 4px;
    color: #7d1829;
    font-size: 1.12rem;
}
.contact-safety p {
    margin-bottom: 0;
    color: #6e4d55;
}
.contact-route-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px;
}
.contact-route-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.contact-route-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 15px;
    background: linear-gradient(135deg,var(--soft-blue),var(--soft-green));
    color: var(--navy-900);
    font-weight: 900;
}
.contact-route-card h3 {
    margin-bottom: 8px;
    font-size: 1.32rem;
}
.contact-route-card p {
    color: var(--muted);
}
.contact-route-card a {
    margin-top: auto;
    color: var(--navy-900);
    font-weight: 850;
    text-decoration: none;
}
.contact-route-card a:hover { color:#0b6f82; }
.contact-main {
    background: var(--mist);
}
.contact-main-grid {
    display: grid;
    grid-template-columns: minmax(0,1.1fr) minmax(300px,.9fr);
    gap: clamp(38px,7vw,76px);
    align-items: start;
}
.contact-panel {
    padding: clamp(26px,5vw,42px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.contact-panel h2 {
    margin-bottom: 12px;
    font-size: clamp(1.9rem,3.8vw,3rem);
}
.contact-panel p { color:var(--muted); }
.email-box {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin: 22px 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--soft-blue);
}
.email-box a {
    color: var(--navy-900);
    font-size: clamp(1rem,2vw,1.2rem);
    font-weight: 900;
    overflow-wrap: anywhere;
}
.contact-expectations {
    display: grid;
    gap: 11px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}
.contact-expectations li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 730;
}
.contact-expectations li::before {
    display: grid;
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--soft-green);
    color: #277446;
    content: "✓";
    font-size: .78rem;
    font-weight: 900;
}
.contact-sidebar {
    display: grid;
    gap: 16px;
}
.contact-side-card {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.contact-side-card h3 {
    margin-bottom: 9px;
    font-size: 1.28rem;
}
.contact-side-card p {
    margin-bottom: 0;
    color: var(--muted);
}
.contact-side-card a {
    color: var(--navy-900);
    font-weight: 820;
}
.participation-section {
    background: var(--navy-950);
    color: #fff;
}
.participation-section .eyebrow,
.participation-section h2 { color:#fff; }
.participation-section .section-head p { color:#c6d8e2; }
.participation-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 16px;
}
.participation-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    padding: 23px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.06);
}
.participation-card strong {
    display: block;
    margin-bottom: 8px;
    color: #fff;
    font-size: 1.08rem;
}
.participation-card p {
    color: #bfd0d9;
    font-size: .93rem;
}
.participation-card a {
    margin-top: auto;
    color: #fff;
    font-weight: 850;
}
.policy-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
}
.policy-card {
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.policy-card h3 {
    margin-bottom: 9px;
    font-size: 1.34rem;
}
.policy-card p {
    color: var(--muted);
}
.policy-card a {
    color: var(--navy-900);
    font-weight: 850;
}
.contact-note {
    padding: 20px;
    border-left: 5px solid var(--teal-500);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--soft-teal);
}
.contact-note strong {
    display:block;
    margin-bottom:5px;
    color:var(--navy-900);
}
.contact-note p {
    margin-bottom:0;
    color:#466a6c;
}
@media (max-width:1040px) {
    .contact-hero-grid,
    .contact-main-grid { grid-template-columns:1fr; }
    .contact-summary { width:min(100%,620px); }
    .contact-route-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .participation-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
    .contact-hero { padding-top:54px; }
    .contact-hero h1 { font-size:clamp(2.85rem,14vw,5.1rem); }
    .contact-route-grid,
    .participation-grid,
    .policy-grid { grid-template-columns:1fr; }
}

/* Governance, Trust and Policy pages */
.trust-review-banner {
    padding: 12px 0;
    border-bottom: 1px solid #eed6a6;
    background: #fff7e7;
    color: #684b12;
    font-size: .9rem;
    font-weight: 760;
}
.trust-review-banner strong { color:#51390b; }
.trust-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(68px,8vw,108px) 0;
    background:
        radial-gradient(circle at 8% 12%, rgba(46,165,223,.18), transparent 25rem),
        radial-gradient(circle at 92% 10%, rgba(98,212,48,.15), transparent 23rem),
        linear-gradient(180deg,#fff 0%,#f5fbfc 100%);
}
.trust-hero::after {
    position: absolute;
    right: -150px;
    bottom: -250px;
    width: 540px;
    height: 540px;
    border: 64px solid rgba(57,185,179,.08);
    border-radius: 50%;
    content: "";
}
.trust-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0,1.08fr) minmax(300px,.72fr);
    align-items: center;
    gap: clamp(40px,7vw,88px);
}
.trust-hero h1 {
    max-width: 920px;
    margin-bottom: 22px;
    font-size: clamp(3rem,6.6vw,6rem);
    line-height: .98;
    letter-spacing: -.06em;
}
.trust-hero h1 span {
    display:block;
    background:linear-gradient(90deg,var(--blue-500),var(--teal-500),var(--green-600));
    background-clip:text;
    color:transparent;
    -webkit-background-clip:text;
}
.trust-hero-copy>p {
    max-width:720px;
    color:var(--muted);
    font-size:clamp(1.1rem,2vw,1.25rem);
}
.trust-summary {
    padding:27px;
    border:1px solid rgba(16,47,73,.1);
    border-radius:var(--radius-lg);
    background:rgba(255,255,255,.93);
    box-shadow:var(--shadow-lg);
}
.trust-summary h2 {
    margin-bottom:11px;
    font-size:1.62rem;
}
.trust-summary p { color:var(--muted); }
.trust-summary ul {
    display:grid;
    gap:10px;
    margin:18px 0 0;
    padding:0;
    list-style:none;
}
.trust-summary li {
    display:flex;
    gap:10px;
    align-items:flex-start;
    font-weight:730;
}
.trust-summary li::before {
    display:grid;
    width:23px;
    height:23px;
    flex:0 0 auto;
    place-items:center;
    border-radius:50%;
    background:var(--soft-green);
    color:#277446;
    content:"✓";
    font-size:.78rem;
    font-weight:900;
}
.trust-nav {
    padding:22px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:#fff;
}
.trust-nav-inner {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
}
.trust-nav a {
    padding:9px 14px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--mist);
    color:var(--navy-900);
    font-size:.9rem;
    font-weight:800;
    text-decoration:none;
}
.trust-nav a:hover { background:var(--soft-blue); }
.status-panel {
    padding:clamp(26px,5vw,42px);
    border:1px solid #eed6a6;
    border-radius:var(--radius-lg);
    background:#fffaf0;
}
.status-panel h2 {
    margin-bottom:12px;
    color:#694c13;
    font-size:clamp(1.9rem,3.8vw,3rem);
}
.status-panel p { color:#6f6042; }
.status-table {
    width:100%;
    margin-top:22px;
    border-collapse:collapse;
    background:#fff;
}
.status-table th,
.status-table td {
    padding:14px 16px;
    border:1px solid #eadfc7;
    text-align:left;
    vertical-align:top;
}
.status-table th {
    width:34%;
    color:var(--navy-900);
}
.status-needed {
    display:inline-flex;
    padding:5px 9px;
    border-radius:999px;
    background:#fff1cf;
    color:#795514;
    font-size:.78rem;
    font-weight:900;
}
.status-complete {
    display:inline-flex;
    padding:5px 9px;
    border-radius:999px;
    background:var(--soft-green);
    color:#286f41;
    font-size:.78rem;
    font-weight:900;
}
.trust-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}
.trust-card {
    display:flex;
    min-height:100%;
    flex-direction:column;
    padding:26px;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    background:#fff;
    box-shadow:var(--shadow-sm);
}
.trust-card-number {
    display:grid;
    width:48px;
    height:48px;
    place-items:center;
    margin-bottom:18px;
    border-radius:15px;
    background:linear-gradient(135deg,var(--soft-blue),var(--soft-green));
    color:var(--navy-900);
    font-weight:900;
}
.trust-card h3 {
    margin-bottom:8px;
    font-size:1.32rem;
}
.trust-card p { color:var(--muted); }
.trust-card a {
    margin-top:auto;
    color:var(--navy-900);
    font-weight:850;
    text-decoration:none;
}
.trust-card a:hover { color:#0b6f82; }
.policy-hero {
    padding:clamp(58px,7vw,88px) 0 42px;
    background:
        radial-gradient(circle at 10% 12%,rgba(46,165,223,.15),transparent 23rem),
        linear-gradient(180deg,#fff 0%,#f5fbfc 100%);
}
.policy-wrap {
    width:min(calc(100% - 32px),900px);
    margin:0 auto;
}
.policy-hero h1 {
    margin-bottom:16px;
    font-size:clamp(2.7rem,6vw,5.2rem);
    line-height:1;
    letter-spacing:-.055em;
}
.policy-intro {
    color:var(--muted);
    font-size:1.14rem;
}
.policy-meta {
    display:flex;
    flex-wrap:wrap;
    gap:9px 18px;
    margin-top:20px;
    color:#526777;
    font-size:.88rem;
}
.policy-meta strong { color:var(--navy-900); }
.policy-body {
    padding:52px 0 84px;
}
.policy-content {
    width:min(calc(100% - 32px),820px);
    margin:0 auto;
}
.policy-content h2 {
    margin:40px 0 13px;
    font-size:clamp(1.7rem,3vw,2.4rem);
}
.policy-content h3 {
    margin:28px 0 9px;
    font-size:1.28rem;
}
.policy-content p,
.policy-content li {
    color:#42596a;
    font-size:1.03rem;
}
.policy-content ul,
.policy-content ol {
    display:grid;
    gap:8px;
}
.policy-note {
    margin:28px 0;
    padding:20px;
    border-left:5px solid var(--teal-500);
    border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    background:var(--soft-teal);
}
.policy-note.warning {
    border-left-color:#d39a2f;
    background:#fff8e8;
}
.policy-note p { margin-bottom:0; }
.policy-contact {
    margin-top:34px;
    padding:24px;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    background:var(--mist);
}
.policy-contact h2 {
    margin-top:0;
    font-size:1.5rem;
}
.report-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}
.report-card {
    padding:26px;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    background:#fff;
    box-shadow:var(--shadow-sm);
}
.report-card h3 {
    margin-bottom:9px;
    font-size:1.34rem;
}
.report-card p { color:var(--muted); }
.report-card .status-needed,
.report-card .status-complete { margin-bottom:13px; }
@media (max-width:1040px) {
    .trust-hero-grid { grid-template-columns:1fr; }
    .trust-summary { width:min(100%,620px); }
    .trust-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
    .trust-hero { padding-top:54px; }
    .trust-hero h1 { font-size:clamp(2.85rem,14vw,5.1rem); }
    .trust-grid,
    .report-grid { grid-template-columns:1fr; }
    .status-table,
    .status-table tbody,
    .status-table tr,
    .status-table th,
    .status-table td {
        display:block;
        width:100%;
    }
    .status-table tr { margin-bottom:12px; }
}

/* Privacy and Cookie pages */
.privacy-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(62px,7vw,94px) 0 44px;
    background:
        radial-gradient(circle at 10% 12%,rgba(46,165,223,.15),transparent 23rem),
        linear-gradient(180deg,#fff 0%,#f5fbfc 100%);
}
.privacy-wrap {
    width:min(calc(100% - 32px),900px);
    margin:0 auto;
}
.privacy-hero h1 {
    margin-bottom:16px;
    font-size:clamp(2.7rem,6vw,5.2rem);
    line-height:1;
    letter-spacing:-.055em;
}
.privacy-intro {
    color:var(--muted);
    font-size:1.14rem;
}
.privacy-meta {
    display:flex;
    flex-wrap:wrap;
    gap:9px 18px;
    margin-top:20px;
    color:#526777;
    font-size:.88rem;
}
.privacy-meta strong { color:var(--navy-900); }
.privacy-body {
    padding:52px 0 84px;
}
.privacy-content {
    width:min(calc(100% - 32px),820px);
    margin:0 auto;
}
.privacy-content h2 {
    margin:40px 0 13px;
    font-size:clamp(1.7rem,3vw,2.4rem);
}
.privacy-content h3 {
    margin:28px 0 9px;
    font-size:1.28rem;
}
.privacy-content p,
.privacy-content li {
    color:#42596a;
    font-size:1.03rem;
}
.privacy-content ul,
.privacy-content ol {
    display:grid;
    gap:8px;
}
.privacy-note {
    margin:28px 0;
    padding:20px;
    border-left:5px solid var(--teal-500);
    border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    background:var(--soft-teal);
}
.privacy-note.warning {
    border-left-color:#d39a2f;
    background:#fff8e8;
}
.privacy-note p { margin-bottom:0; }
.data-table {
    width:100%;
    margin:22px 0;
    border-collapse:collapse;
    background:#fff;
}
.data-table th,
.data-table td {
    padding:14px 16px;
    border:1px solid var(--line);
    text-align:left;
    vertical-align:top;
}
.data-table th {
    color:var(--navy-900);
    background:var(--mist);
}
.cookie-status {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    margin:25px 0;
}
.cookie-status-card {
    padding:22px;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    background:#fff;
    box-shadow:var(--shadow-sm);
}
.cookie-status-card span {
    display:inline-flex;
    margin-bottom:11px;
    padding:6px 10px;
    border-radius:999px;
    background:var(--soft-green);
    color:#286f41;
    font-size:.78rem;
    font-weight:900;
}
.cookie-status-card h3 {
    margin-bottom:8px;
    font-size:1.2rem;
}
.cookie-status-card p {
    margin-bottom:0;
    color:var(--muted);
    font-size:.94rem;
}
.rights-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:17px;
    margin:24px 0;
}
.right-card {
    padding:23px;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    background:#fff;
}
.right-card h3 {
    margin-bottom:8px;
    font-size:1.2rem;
}
.right-card p {
    margin-bottom:0;
    color:var(--muted);
    font-size:.95rem;
}
@media (max-width:760px) {
    .cookie-status,
    .rights-grid { grid-template-columns:1fr; }
    .data-table,
    .data-table tbody,
    .data-table tr,
    .data-table th,
    .data-table td {
        display:block;
        width:100%;
    }
    .data-table tr { margin-bottom:12px; }
}

/* Sitemap and error page */
.sitemap-hero,
.error-page {
    padding:clamp(64px,8vw,104px) 0;
    background:
        radial-gradient(circle at 8% 12%,rgba(46,165,223,.18),transparent 25rem),
        radial-gradient(circle at 92% 10%,rgba(98,212,48,.15),transparent 23rem),
        linear-gradient(180deg,#fff 0%,#f5fbfc 100%);
}
.sitemap-hero h1,
.error-page h1 {
    margin-bottom:18px;
    font-size:clamp(3rem,6.6vw,6rem);
    line-height:.98;
    letter-spacing:-.06em;
}
.sitemap-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}
.sitemap-card {
    padding:25px;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    background:#fff;
    box-shadow:var(--shadow-sm);
}
.sitemap-card h2 {
    margin-bottom:13px;
    font-size:1.35rem;
}
.sitemap-card ul {
    display:grid;
    gap:9px;
    margin:0;
    padding:0;
    list-style:none;
}
.sitemap-card a {
    color:var(--navy-900);
    font-weight:760;
    text-decoration:none;
}
.sitemap-card a:hover { text-decoration:underline; }
.error-inner {
    width:min(calc(100% - 32px),780px);
    margin:0 auto;
    text-align:center;
}
.error-code {
    display:inline-block;
    margin-bottom:12px;
    color:var(--teal-500);
    font-size:clamp(4rem,14vw,9rem);
    font-weight:900;
    line-height:.9;
    letter-spacing:-.07em;
}
.error-page p {
    max-width:650px;
    margin:0 auto 26px;
    color:var(--muted);
    font-size:1.12rem;
}
@media (max-width:900px) {
    .sitemap-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:650px) {
    .sitemap-grid { grid-template-columns:1fr; }
}

.u-margin-top-22 { margin-top: 22px; }
.u-margin-top-34 { margin-top: 34px; }
.u-justify-center { justify-content: center; }
.u-bg-mist { background: var(--mist); }