@layer reset, base, layout, direction;

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        scroll-padding-top: 8rem;
    }

    body,
    h1,
    h2,
    h3,
    p,
    dl,
    dd {
        margin: 0;
    }

    ol,
    ul {
        margin: 0;
    }

    a {
        color: inherit;
    }

    button,
    input {
        font: inherit;
    }
}

@layer base {
    @font-face {
        font-family: 'Fraunces';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url('f/fraunces-400.ttf') format('truetype');
    }

    @font-face {
        font-family: 'Fraunces';
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: url('f/fraunces-600.ttf') format('truetype');
    }

    @font-face {
        font-family: 'Manrope';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url('f/manrope-400.ttf') format('truetype');
    }

    @font-face {
        font-family: 'Manrope';
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: url('f/manrope-600.ttf') format('truetype');
    }

    :root {
        color-scheme: dark;
    }

    body {
        background: var(--ink);
        color: var(--paper);
        font: 400 1rem/1.75 var(--body);
    }

    h1,
    h2,
    h3 {
        font-family: var(--heading);
        font-weight: 400;
        line-height: 1.13;
        text-wrap: balance;
    }

    h1 {
        font-size: 2.8rem;
        letter-spacing: -.075rem;
    }

    h2 {
        font-size: 2rem;
        letter-spacing: -.05rem;
    }

    h3 {
        font-size: 1.6rem;
    }

    p + p {
        margin-top: 1rem;
    }

    a {
        text-underline-offset: .25rem;
        text-decoration-thickness: .0625rem;

        &:hover {
            text-decoration-thickness: .125rem;
        }

        &:focus-visible {
            outline: .18rem solid var(--accent);
            outline-offset: .3rem;
        }
    }

    [data-label] {
        font: 600 .73rem/1.5 var(--body);
        letter-spacing: .06rem;
        margin-bottom: 1.15rem;
    }

    [data-lead] {
        font-size: 1.15rem;
        line-height: 1.65;
    }

    [data-note],
    [data-source],
    small {
        font: 400 .83rem/1.6 var(--body);
        color: var(--muted);
    }

    [data-source] {
        margin-top: 1rem;
    }

    [data-source] a {
        color: inherit;
    }

    [data-link="button"],
    [data-link="outline"] {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.25rem;
        min-height: 3rem;
        padding: .75rem 1.1rem;
        background: var(--accent);
        color: var(--button-ink);
        font-size: .9rem;
        font-weight: 600;
        text-decoration: none;
        border: 1px solid var(--accent);
    }

    [data-link="button"]:hover {
        background: transparent;
        color: var(--accent);
    }

    [data-link="outline"] {
        background: transparent;
        color: var(--accent);
    }

    [data-link="outline"]:hover {
        text-decoration: underline;
    }

    [data-link="email"] {
        overflow-wrap: anywhere;
    }

    [data-skip] {
        position: fixed;
        top: .75rem;
        left: 1rem;
        z-index: 10;
        padding: .5rem 1rem;
        background: var(--paper);
        color: var(--ink);
        transform: translateY(-200%);
    }

    [data-skip]:focus {
        transform: translateY(0);
    }

    :target {
        scroll-margin-top: 8rem;
    }

    ::selection {
        background: var(--accent);
        color: var(--button-ink);
    }
}

@layer layout {
    body > header {
        position: sticky;
        top: 0;
        z-index: 5;
        background: var(--ink);
        border-bottom: 1px solid var(--line);
    }

    [data-masthead] {
        max-width: 74rem;
        margin-inline: auto;
        padding: 1rem 1.25rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: .75rem 1rem;
    }

    [data-wordmark] {
        display: block;
        width: 16rem;
        max-width: 100%;
        text-decoration: none;
    }

    [data-wordmark] > svg {
        display: block;
        width: 100%;
        height: auto;
    }

    [data-masthead] > a:last-child {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .6rem 1rem;
        background: var(--brass);
        color: var(--button-ink);
        border: 1px solid var(--brass);
        font: 600 .8rem/1.4 var(--body);
        text-decoration: none;
    }

    [data-masthead] > a:last-child:hover {
        background: transparent;
        color: var(--brass);
    }

    [data-masthead] nav {
        display: flex;
        flex-wrap: wrap;
        gap: .25rem 1.25rem;
    }

    nav a {
        font-size: .8rem;
        text-decoration: none;
        padding-block: .4rem;
    }

    main {
        max-width: 74rem;
        margin-inline: auto;
        padding-inline: 1.25rem;
    }

    [data-hero] {
        padding-block: 3rem;
    }

    [data-hero-copy] > p:not([data-label]) {
        max-width: 46rem;
        margin-top: 1.5rem;
    }

    [data-hero-copy] h1 {
        max-width: 15ch;
    }

    [data-hero-actions] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem 1.5rem;
        margin-top: 1.75rem;
    }

    [data-hero-actions] > a:not([data-link]) {
        font-size: .9rem;
    }

    [data-hero-note] > a {
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: .5rem;
        row-gap: .25rem;
        align-content: start;
        padding: 1.25rem .25rem;
        text-decoration: none;
        border-bottom: 1px solid var(--line);
    }

    [data-hero-note] > a > span:first-child {
        font-size: .75rem;
        color: var(--muted);
        grid-column: 1;
    }

    [data-hero-note] strong {
        font: 400 1.7rem/1.2 var(--heading);
        grid-column: 1;
    }

    [data-hero-note] > a > span:last-child {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        color: var(--brass);
        font-size: 1.7rem;
        line-height: 1.2;
    }

    [data-section] {
        padding-block: 3rem;
        border-top: 1px solid var(--line);
    }

    [data-content] {
        min-width: 0;
        margin-top: 1.75rem;
    }

    body > footer {
        border-top: 1px solid var(--line);
        max-width: 71.5rem;
        margin-inline: auto;
        padding: 1.5rem 1.25rem 2rem;
        color: var(--muted);
        font-size: .75rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: .75rem 2rem;
    }

    body > footer p + p {
        margin: 0;
    }

    @media (min-width: 48rem) {
        [data-masthead] {
            padding-inline: 2rem;
        }

        main {
            padding-inline: 2rem;
        }

        [data-hero] {
            padding-block: 5rem;
        }

        [data-section] {
            padding-block: 4rem;
        }
    }

    @media (max-width: 27rem) {
        [data-masthead] nav {
            order: 3;
            width: 100%;
            column-gap: 1rem;
        }
    }

    @media (max-width: 47.99rem) {
        [data-masthead],
        [data-masthead] nav {
            justify-content: center;
        }
    }
}

@layer direction {
    :root {
        --ink: #111f2b;
        --paper: #f5f0e7;
        --brass: #d4b477;
        --accent: var(--brass);
        --button-ink: #111f2b;
        --muted: #c4cbd0;
        --line: #52606b;
        --panel: #1b2c39;
        --navy: #1b2b39;
        --heading: 'Fraunces';
        --body: 'Manrope';
    }

    main {
        max-width: 70rem;
    }

    h1 {
        font-size: 2.8rem;
        line-height: 1.13;
        letter-spacing: -.075rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.6rem;
        font-weight: 400;
    }

    [data-hero-copy] {
        text-align: center;
    }

    [data-hero-copy] h1 {
        max-width: 20ch;
        margin-inline: auto;
    }

    [data-hero-copy] > p:not([data-label]) {
        margin-inline: auto;
    }

    [data-hero-actions] {
        justify-content: center;
    }

    [data-hero-note] {
        margin-top: 3rem;
        display: grid;
        border-top: 1px solid var(--line);
    }

    [data-section] {
        background: var(--ink);
        text-align: left;
    }

    [data-section] > header {
        max-width: 44rem;
        margin-inline: auto;
        text-align: center;
    }

    [data-section] > header > [data-label] {
        color: var(--brass);
    }

    [data-section="worth"],
    [data-section="reasons"],
    [data-section="working"],
    [data-section="contact"] {
        margin-inline: -1.25rem;
        padding-inline: 1.25rem;
        background: var(--navy);
        color: var(--paper);
        border-block: 1px solid var(--brass);
    }

    :is([data-section="worth"], [data-section="reasons"], [data-section="working"], [data-section="contact"]) + [data-section] {
        border-top: 0;
    }

    [data-section="contact"] {
        text-align: left;
    }

    [data-section="contact"] > header {
        margin-inline: auto;
    }

    [data-section="contact"] [data-content] {
        max-width: 42rem;
        margin-inline: auto;
    }

    [data-section="contact"] h2 {
        font-size: 3rem;
    }

    @media (min-width: 48rem) {
        h1 {
            font-size: 4.25rem;
        }

        h2 {
            font-size: 2.65rem;
        }

        [data-section="contact"] h2 {
            font-size: 4.75rem;
        }

        [data-hero-note] {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        [data-hero-note] > a {
            padding: 1.75rem 1.5rem;
            border-bottom: 0;
            border-right: 1px solid var(--line);
        }

        [data-hero-note] > a:last-child {
            border-right: 0;
        }

        [data-section="worth"],
        [data-section="reasons"],
        [data-section="working"],
        [data-section="contact"] {
            margin-inline: -2rem;
            padding-inline: 3rem;
        }
    }
}

@layer direction {
    [data-figure] {
        margin: 2rem 0 0;
        min-width: 0;
    }

    [data-figure] :is(ol, ul) {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    [data-figure] strong {
        display: block;
        font-weight: 400;
    }

    [data-figure] li > p {
        margin-top: 0;
    }

    [data-figure] a {
        text-decoration: none;
    }

    [data-figure] a:hover > span {
        text-decoration: underline;
    }

    [data-frame] {
        --mark: 1rem;
        padding: 2rem 1.5rem;
        outline: 1px solid var(--brass);
        outline-offset: -.4rem;
        background:
            linear-gradient(var(--brass) 0 0) left top / var(--mark) 2px,
            linear-gradient(var(--brass) 0 0) left top / 2px var(--mark),
            linear-gradient(var(--brass) 0 0) right top / var(--mark) 2px,
            linear-gradient(var(--brass) 0 0) right top / 2px var(--mark),
            linear-gradient(var(--brass) 0 0) left bottom / var(--mark) 2px,
            linear-gradient(var(--brass) 0 0) left bottom / 2px var(--mark),
            linear-gradient(var(--brass) 0 0) right bottom / var(--mark) 2px,
            linear-gradient(var(--brass) 0 0) right bottom / 2px var(--mark);
        background-repeat: no-repeat;
    }

    [data-figure-title] {
        display: grid;
        grid-template-columns: minmax(1rem, 1fr) auto minmax(1rem, 1fr);
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.75rem;
        font: 600 .8rem/1.5 var(--body);
        letter-spacing: .14rem;
        text-transform: uppercase;
        text-align: center;
        color: var(--brass);
    }

    [data-figure-title]::before,
    [data-figure-title]::after {
        content: '';
        border-top: 1px solid var(--line);
    }

    [data-figure-note] {
        margin-top: 1.5rem;
        padding-top: 1.25rem;
        border-top: 1px solid var(--line);
        text-align: center;
    }

    [data-figure="income"] {
        & li {
            padding-block: 1.5rem;
            border-top: 1px solid var(--line);
        }

        & li:first-child {
            padding-top: 0;
            border-top: 0;
        }

        & li:last-child {
            padding-bottom: 0;
        }

        & strong {
            font: 400 2.65rem/1.13 var(--heading);
            letter-spacing: -.05rem;
            color: var(--brass);
        }

        & strong::after {
            content: '';
            display: block;
            width: 2.5rem;
            margin-top: 1rem;
            border-top: 1px solid var(--brass);
        }

        & li > p {
            margin-top: 1rem;
            font-weight: 600;
            line-height: 1.5;
        }
    }

    [data-figure="reasons"] {
        & li + li {
            border-top: 1px solid var(--line);
        }

        & a {
            display: grid;
            grid-template-columns: 3.5rem minmax(0, 1fr);
            align-items: center;
            column-gap: 1.25rem;
            padding-block: 1rem;
            font-weight: 600;
            line-height: 1.5;
        }

        & li:first-child a {
            padding-top: 0;
        }

        & li:last-child a {
            padding-bottom: 0;
        }

        & svg {
            display: block;
            width: 3.5rem;
            height: 3.5rem;
            padding: .3rem;
            border: 1px solid var(--brass);
            fill: none;
            stroke: var(--brass);
            stroke-width: 1.5;
            stroke-linecap: square;
            stroke-linejoin: miter;
        }

        & svg text {
            fill: var(--brass);
            stroke: none;
        }

        & svg [data-occlude] {
            fill: var(--navy);
        }
    }

    [data-figure="deadlines"] {
        & li {
            padding-block: 1.5rem;
            border-top: 1px solid var(--line);
            text-align: center;
        }

        & li:first-child {
            padding-top: 0;
            border-top: 0;
        }

        & li:last-child {
            padding-bottom: 0;
        }

        & strong {
            font: 400 4.75rem/1 var(--heading);
            letter-spacing: -.1rem;
            color: var(--brass);
        }

        & strong span {
            font-size: 1.6rem;
            letter-spacing: 0;
            color: var(--paper);
        }

        & li > p {
            margin-top: .75rem;
            font: 600 .8rem/1.5 var(--body);
            letter-spacing: .12rem;
            text-transform: uppercase;
        }
    }

    [data-figure="route"] {
        margin-top: 3rem;

        & [data-clauses] {
            border-top: 1px solid var(--brass);
        }

        & [data-clauses] li {
            display: grid;
            grid-template-columns: 3rem minmax(0, 1fr);
            align-items: baseline;
            column-gap: 1rem;
            padding-block: 1rem;
            border-bottom: 1px solid var(--line);
            font: 400 1.6rem/1.13 var(--heading);
        }

        & [data-mark] {
            font-size: 2.65rem;
            line-height: 1;
            color: var(--brass);
        }

        & [data-mark]::after {
            content: '.';
        }

        & [data-routes] {
            display: grid;
            gap: 1rem;
            margin: 1.5rem 0 0;
        }

        & [data-routes] > li {
            --mark: .75rem;
            padding: 1.75rem 1.5rem;
        }

        & [data-routes] h3 {
            font: 400 2rem/1.13 var(--heading);
            color: var(--brass);
        }

        & [data-routes] ul {
            margin-top: 1rem;
        }

        & [data-routes] ul li {
            display: grid;
            grid-template-columns: .45rem minmax(0, 1fr);
            align-items: baseline;
            column-gap: .75rem;
            font-weight: 600;
            line-height: 1.5;
        }

        & [data-routes] ul li::before {
            content: '';
            width: .45rem;
            height: .45rem;
            background: var(--brass);
            translate: 0 -.1rem;
        }

        & [data-routes] ul li + li {
            margin-top: .5rem;
        }

        & [data-figure-note] {
            text-align: left;
        }

        & + p {
            margin-top: 1.5rem;
        }
    }

    @media (min-width: 48rem) {
        [data-frame] {
            padding: 2.5rem;
        }

        [data-figure="income"] {
            & ol {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            & li,
            & li:first-child,
            & li:last-child {
                padding: 0 1.5rem;
                border-top: 0;
            }

            & li + li {
                border-left: 1px solid var(--line);
            }

            & li:first-child {
                padding-left: 0;
            }

            & li:last-child {
                padding-right: 0;
            }

            & strong {
                font-size: 3.25rem;
            }
        }

        [data-figure="reasons"] {
            & ol {
                display: grid;
                grid-template-columns: repeat(5, minmax(0, 1fr));
            }

            & li + li {
                border-top: 0;
                border-left: 1px solid var(--line);
            }

            & a,
            & li:first-child a,
            & li:last-child a {
                grid-template-columns: minmax(0, 1fr);
                justify-items: center;
                row-gap: 1rem;
                padding: .25rem 1rem;
                text-align: center;
            }

            & svg {
                width: 4rem;
                height: 4rem;
                padding: .4rem;
            }
        }

        [data-figure="deadlines"] {
            & ul {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            & li,
            & li:first-child,
            & li:last-child {
                padding: 0 1.5rem;
                border-top: 0;
            }

            & li + li {
                border-left: 1px solid var(--line);
            }

            & strong {
                font-size: 5.5rem;
            }
        }

        [data-figure="route"] [data-routes] {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1.5rem;
        }
    }
}

@layer layout {
    [data-pair],
    [data-issues] {
        display: grid;
        gap: 1.75rem;
        margin-top: 2rem;
    }

    article h3 + p {
        margin-top: 1rem;
    }

    [data-pair] article {
        border-left: 1px solid var(--line);
        padding-left: 1.25rem;
    }

    [data-issues] article {
        border-top: 1px solid var(--line);
        padding-top: 1.5rem;
    }

    [data-issues] [data-label] {
        color: var(--accent);
    }

    dl {
        margin-top: 1.5rem;
    }

    dl > div {
        padding-block: 1.5rem;
        border-bottom: 1px solid var(--line);
    }

    dt {
        font-weight: 600;
        line-height: 1.5;
        margin-bottom: .75rem;
    }

    dd {
        color: var(--muted);
    }

    [data-callout] {
        margin-top: 2rem;
        border-left: 3px solid var(--accent);
        padding: 1.25rem 1.5rem;
        background: var(--panel);
    }

    [data-callout] h3 + p {
        margin-top: .75rem;
    }

    [data-lead] + [data-steps],
    [data-steps] + p {
        margin-top: 2rem;
    }

    [data-steps] {
        list-style: none;
        counter-reset: step;
        padding: 0;
        display: grid;
        gap: 1.5rem;
    }

    [data-steps] li {
        counter-increment: step;
        position: relative;
        padding-left: 3rem;
    }

    [data-steps] li::before {
        content: '0' counter(step);
        position: absolute;
        left: 0;
        top: .2rem;
        font-size: .8rem;
        font-weight: 600;
        color: var(--accent);
    }

    [data-steps] p {
        margin-top: .75rem;
    }

    [data-email] {
        font-size: 1rem;
        margin-block: 1.5rem;
    }

    [data-route-sources] {
        display: grid;
        gap: .5rem;
        margin: 1.25rem 0 0;
        padding: 0;
        list-style: none;
        font: 400 .83rem/1.6 var(--body);
        color: var(--muted);
    }

    [data-route-sources] + p {
        margin-top: 2rem;
    }

    [data-back-to-top] {
        position: fixed;
        right: 1.25rem;
        bottom: 1.25rem;
        z-index: 5;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .7rem 1rem;
        background: var(--brass);
        color: var(--button-ink);
        border: 1px solid var(--ink);
        font: 600 .8rem/1.4 var(--body);
        text-decoration: none;
    }

    [data-back-to-top]:hover {
        background: var(--paper);
    }

    @media (max-width: 47.99rem) {
        [data-back-to-top] {
            right: 1rem;
            bottom: 1rem;
            inline-size: 2.75rem;
            block-size: 2.75rem;
            justify-content: center;
            padding: 0;
            font-size: 1rem;
        }

        [data-back-to-top-label] {
            position: absolute;
            inline-size: 1px;
            block-size: 1px;
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
        }
    }

    @keyframes back-to-top-reveal {
        from {
            opacity: 0;
            visibility: hidden;
            translate: 0 .75rem;
        }

        to {
            opacity: 1;
            visibility: visible;
            translate: 0 0;
        }
    }

    @supports (animation-timeline: view()) {
        body {
            timeline-scope: --hero;
        }

        [data-hero] {
            view-timeline-name: --hero;
        }

        [data-back-to-top] {
            animation: back-to-top-reveal linear both;
            animation-timeline: --hero;
            animation-range: exit 70% exit 100%;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        [data-back-to-top] {
            animation-range: exit 99% exit 100%;
        }
    }

    @media (prefers-reduced-motion: no-preference) {
        html {
            scroll-behavior: smooth;
        }
    }

    @media (min-width: 48rem) {
        [data-email] {
            font-size: 1.65rem;
        }

        [data-pair] {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        [data-issues] {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 2rem;
        }

        [data-steps] {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 2rem;
        }

        dl > div {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
            gap: 3rem;
        }

        dt {
            font-size: 1.1rem;
        }
    }
}

@layer direction {
    [data-section] > header {
        margin-inline: auto;
        text-align: center;
    }

    [data-section] > [data-content] > [data-lead]:first-child {
        max-width: 60ch;
        margin-inline: auto;
        text-align: center;
    }

    [data-pair] article {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding: 1.5rem 0 0;
    }

    [data-question-panel] {
        margin-top: 2rem;
        padding: 1.75rem 1.25rem;
        background: var(--navy);
        border-left: 3px solid var(--brass);
        text-align: left;
    }

    [data-question-panel] > h3,
    [data-question-panel] > [data-answer] {
        max-width: 44rem;
    }

    [data-question-panel] > [data-answer] {
        margin-top: 1.75rem;
    }

    [data-question-sources] {
        padding-left: 1.25rem;
        margin-top: 1.5rem;
        color: var(--muted);
        font-size: .83rem;
        line-height: 1.6;
    }

    [data-question-sources] li + li {
        margin-top: .5rem;
    }

    [data-section="contact"] [data-content] {
        text-align: center;
        text-wrap: balance;
    }

    [data-section="contact"] h2 {
        font-size: 3rem;
    }

    #refusal-reasons dl > div:last-child {
        border-bottom: 0;
    }

    @media (min-width: 48rem) {
        [data-section="contact"] h2 {
            font-size: 4.75rem;
        }

        [data-pair] article {
            padding: 1.5rem 0 0;
        }

        [data-question-panel] {
            margin-inline: 1rem;
            padding: 3rem;
        }
    }
}