body.esp-resource-page {
    --esp-ink: #183e45;
    --esp-muted: #60757b;
    --esp-line: rgba(24, 62, 69, 0.12);
    --esp-surface: rgba(255, 252, 247, 0.88);
    --esp-accent: #c97a32;
    --esp-accent-deep: #7a4b22;
    --esp-shadow: 0 28px 60px rgba(24, 62, 69, 0.09);
    color: var(--esp-ink);
    background:
        radial-gradient(circle at top left, rgba(201, 122, 50, 0.14), transparent 24%),
        radial-gradient(circle at 88% 10%, rgba(24, 62, 69, 0.08), transparent 24%),
        linear-gradient(180deg, #f0e7dc 0%, #f8f4ed 38%, #fcfaf6 100%);
}

.esp-shell {
    background:
        radial-gradient(circle at top right, rgba(201, 122, 50, 0.08), transparent 18%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 18%);
}

.esp-site-header .site-header__inner {
    background: rgba(251, 247, 240, 0.84);
    border-color: rgba(24, 62, 69, 0.08);
}

.esp-main {
    padding-bottom: 104px;
}

.esp-breadcrumb-wrap,
.esp-hero,
.esp-section {
    padding-left: 24px;
    padding-right: 24px;
}

.esp-container {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.esp-breadcrumb-wrap {
    padding-top: 8px;
}

.esp-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--esp-muted);
    font-size: 0.92rem;
}

.esp-breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.esp-breadcrumbs a:hover,
.esp-breadcrumbs a:focus-visible {
    color: var(--esp-ink);
}

.esp-eyebrow {
    margin: 0 0 18px;
    color: var(--esp-accent);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.esp-hero {
    position: relative;
    overflow: hidden;
    padding-top: 28px;
    padding-bottom: 62px;
}

.esp-hero__glow {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.esp-hero__glow--one {
    top: 48px;
    right: 10%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(201, 122, 50, 0.18) 0%, rgba(201, 122, 50, 0) 70%);
}

.esp-hero__glow--two {
    left: -40px;
    bottom: -60px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(24, 62, 69, 0.12) 0%, rgba(24, 62, 69, 0) 70%);
}

.esp-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
    gap: 28px;
    align-items: end;
}

.esp-hero__copy h1,
.esp-section-heading h2,
.esp-card h3,
.esp-flow__step h3,
.esp-highlight h3 {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    letter-spacing: -0.04em;
    color: var(--esp-ink);
}

.esp-hero__copy h1 {
    font-size: clamp(2.6rem, 4.8vw, 4.8rem);
    line-height: 0.95;
}

.esp-hero__copy p:not(.esp-eyebrow),
.esp-section-heading p:last-child,
.esp-hero__panel p,
.esp-card p,
.esp-flow__step p,
.esp-highlight p,
.esp-history-card p,
.esp-caution-card li {
    margin: 18px 0 0;
    color: var(--esp-muted);
    font-size: 1.02rem;
    line-height: 1.8;
}

.esp-hero__copy sup a,
.esp-section sup a,
.esp-reference-list a {
    color: var(--esp-accent-deep);
    text-decoration: none;
}

.esp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.esp-hero__panel,
.esp-card,
.esp-flow__step,
.esp-highlight,
.esp-caution-card,
.esp-history-card,
.esp-reference-list,
.esp-figure-card {
    border: 1px solid var(--esp-line);
    border-radius: 28px;
    background: var(--esp-surface);
    box-shadow: var(--esp-shadow);
    backdrop-filter: blur(16px);
}

.esp-hero__panel {
    padding: 28px;
}

.esp-hero__panel span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(201, 122, 50, 0.14);
    color: var(--esp-accent-deep);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.esp-hero__panel strong {
    display: block;
    margin-top: 18px;
    font-size: clamp(1.5rem, 1vw + 1.1rem, 2rem);
    line-height: 1.1;
}

.esp-section {
    padding-top: 86px;
}

.esp-section--alt {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 100%);
}

.esp-section-heading {
    max-width: 860px;
    margin-bottom: 30px;
}

.esp-section-heading h2 {
    font-size: clamp(2.2rem, 4vw, 4.2rem);
    line-height: 0.95;
}

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

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

.esp-card,
.esp-highlight,
.esp-flow__step,
.esp-history-card {
    padding: 26px;
}

.esp-card h3,
.esp-flow__step h3,
.esp-highlight h3 {
    font-size: clamp(1.55rem, 0.9vw + 1.1rem, 2rem);
    line-height: 1;
}

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

.esp-working-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 22px;
    align-items: start;
}

.esp-figure-card {
    margin: 0;
    overflow: hidden;
}

.esp-figure-card img {
    display: block;
    width: 100%;
    height: auto;
    background: #ffffff;
}

.esp-figure-card figcaption {
    padding: 16px 18px 18px;
    color: var(--esp-muted);
    font-size: 0.94rem;
    line-height: 1.7;
}

.esp-flow__step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(201, 122, 50, 0.14);
    color: var(--esp-accent-deep);
    font-weight: 800;
}

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

.esp-caution-card {
    padding: 28px 30px;
}

.esp-caution-card ul {
    margin: 0;
    padding-left: 1.2rem;
}

.esp-caution-card li + li {
    margin-top: 10px;
}

.esp-reference-list {
    margin: 0;
    padding: 26px 28px 26px 48px;
}

.esp-reference-list li + li {
    margin-top: 14px;
}

@media (max-width: 1100px) {
    .esp-hero__grid,
    .esp-card-grid,
    .esp-card-grid--two,
    .esp-working-layout,
    .esp-flow,
    .esp-highlight-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .esp-main {
        padding-bottom: 80px;
    }

    .esp-breadcrumb-wrap,
    .esp-hero,
    .esp-section {
        padding-left: 18px;
        padding-right: 18px;
    }

    .esp-hero {
        padding-bottom: 48px;
    }

    .esp-section {
        padding-top: 72px;
    }

    .esp-hero__panel,
    .esp-card,
    .esp-flow__step,
    .esp-highlight,
    .esp-caution-card,
    .esp-history-card,
    .esp-reference-list,
    .esp-figure-card {
        border-radius: 24px;
    }
}