@font-face {
    font-family: "Aktiv Grotesk";
    src: url("/fonts/aktiv-grotesk/AktivGrotesk-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-024F, U+2000-206F;
}
@font-face {
    font-family: "Aktiv Grotesk";
    src: url("/fonts/aktiv-grotesk/AktivGrotesk-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-024F, U+2000-206F;
}
:root {
    --font-sans: "Aktiv Grotesk", "Noto Sans Bengali", system-ui, sans-serif;
    --brand-white: #FFFFFF;
    --brand-teal: #0B3134;
    --brand-ivory: #EBECDE;
}

:root {
            color-scheme: light;
            --bg: var(--brand-white);
            --ink: var(--brand-teal);
            --panel: var(--brand-ivory);
            --line: #d4dbd3;
        }
        :root[data-theme="dark"] {
            color-scheme: dark;
            --bg: var(--brand-teal);
            --ink: var(--brand-ivory);
            --panel: #123b3e;
            --line: #527275;
        }
        *, *::before, *::after { box-sizing: border-box; }
        body {
            margin: 0;
            background: var(--bg);
            color: var(--ink);
            font: 1rem/1.65 var(--font-sans);
        }
        a { color: inherit; text-underline-offset: .25em; }
        a:focus-visible, button:focus-visible, summary:focus-visible {
            outline: 2px solid currentColor;
            outline-offset: 5px;
        }
        .wrap { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }
        .skip { position: absolute; inset: .5rem auto auto .5rem; padding: .5rem; background: var(--bg); }
        .skip:not(:focus) { clip-path: inset(50%); }
        header { border-bottom: 1px solid var(--line); }
        .bar, nav {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: .75rem 1.5rem;
        }
        .bar { justify-content: space-between; padding-block: 1rem; }
        .brand { font-weight: 500; letter-spacing: .12em; text-decoration: none; }
        .brand span { letter-spacing: normal; }
        button {
            min-width: 44px;
            min-height: 44px;
            border: 1px solid var(--line);
            border-radius: 50%;
            background: var(--bg);
            color: var(--ink);
            font-size: 1.25rem;
            cursor: pointer;
        }
        section { padding-block: clamp(3rem, 8vw, 7rem); }
        .hero, .process { background: var(--panel); }
        .eyebrow { font-size: .8rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }
        h1, h2, h3 { line-height: 1.15; }
        h1, h2 { font-family: var(--font-sans); font-weight: 400; }
        h1 { max-width: 13ch; font-size: clamp(2.75rem, 8vw, 6.5rem); margin: .3em 0; }
        h2 { font-size: clamp(2rem, 5vw, 3.5rem); margin: 0 0 1.5rem; }
        p { max-width: 62ch; }
        .cta { display: inline-block; margin-top: 1rem; padding: .7rem 1.1rem; border: 1px solid; }
        .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
        article { padding: 1.5rem; border: 1px solid var(--line); }
        article h3 { margin-top: 0; }
        article p { margin-bottom: 0; }
        li + li { margin-top: .65rem; }
        details { border-top: 1px solid var(--line); padding: 1rem 0; }
        summary { cursor: pointer; font-weight: 500; }
        footer { padding: 2rem 0; border-top: 1px solid var(--line); }
button, input, select, textarea { font-family: var(--font-sans); }
:lang(bn) { font-family: "Noto Sans Bengali", system-ui, sans-serif; }
strong, b, nav a, .cta, h3 { font-weight: 500; }
#theme-toggle .material-symbols-outlined { vertical-align: middle; }