/* CSR Partners page — loaded only on page-templates/template-csr-partners.php.
   Mobile-first: base rules are the phone layout, min-width queries add the larger layouts.
   Everything is scoped to .csr-* */

/* The theme forces Lora 18px (!important) on every p/li inside #main-content. This page's UI copy is Inter
   at the sizes below, so these rules out-rank it and are limited to this page's body class. */
body.page-template-template-csr-partners #main-content p,
body.page-template-template-csr-partners #main-content li { font-family: var(--font-body) !important; font-size: 15px !important; line-height: 1.55 !important; }
body.page-template-template-csr-partners #main-content .csr-intro p:last-child,
body.page-template-template-csr-partners #main-content .csr-success__lead { font-size: 16px !important; }
body.page-template-template-csr-partners #main-content .csr-card__tag,
body.page-template-template-csr-partners #main-content .csr-note,
body.page-template-template-csr-partners #main-content .csr-hint,
body.page-template-template-csr-partners #main-content .csr-form__fine { font-size: 13px !important; }
body.page-template-template-csr-partners #main-content .csr-eyebrow { font-size: 12px !important; }
body.page-template-template-csr-partners #main-content .csr-error,
body.page-template-template-csr-partners #main-content .csr-form__alert { font-size: 14px !important; }
body.page-template-template-csr-partners #main-content .csr-aside__row,
body.page-template-template-csr-partners #main-content .csr-aside__row span,
body.page-template-template-csr-partners #main-content .csr-aside__row a { font-family: var(--font-body) !important; font-size: 15px !important; font-weight: 400 !important; color: rgba(255,255,255,0.9) !important; }

/* ---- Hero ---- */
.csr-hero { padding: 40px 0 30px; } /* the theme's .page-hero is 80px / 60px; halved here */
.csr-hero__sub { max-width: 680px; }
.csr-hero__cta { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); margin: var(--space-6) auto 0; max-width: 320px; position: relative; }
.csr-hero__cta .btn { justify-content: center; }
.csr-btn-ghost { background: transparent; color: var(--color-white); border: 2px solid rgba(255,255,255,0.7); gap: var(--space-2); }
.csr-btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: var(--color-white); color: var(--color-white); }
.csr-btn-ghost:focus-visible { outline: 3px solid var(--color-white); outline-offset: 2px; }

/* Deeper saffron than the site default so white text passes contrast */
.csr-btn { background-color: #B45309; color: var(--color-white); border: 2px solid #B45309; justify-content: center; }
.csr-btn:hover { background-color: var(--color-maroon); border-color: var(--color-maroon); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.csr-btn:focus-visible, .csr-chip input:focus-visible + span, .csr-check input:focus-visible, .csr-faq__item summary:focus-visible { outline: 3px solid var(--color-blue-deep); outline-offset: 2px; }
#csr-submit[disabled] { opacity: 0.7; cursor: wait; transform: none; }

/* ---- Shared bits ---- */
.csr-eyebrow { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-maroon); margin-bottom: var(--space-2); }
.csr-ico { width: 52px; height: 52px; border-radius: 50%; background: #FDF3E2; color: #B45309; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.csr-intro { text-align: center; max-width: 720px; margin: 0 auto var(--space-8); }
.csr-intro h2, .csr-why h2 { font-family: var(--font-heading); font-size: var(--text-2xl); line-height: 1.25; color: var(--color-blue-deep); margin-bottom: var(--space-3); }
.csr-intro p:last-child { color: #5B6470; }
.csr-intro, .csr-why h2 { overflow-wrap: anywhere; }
.csr-star { color: var(--color-error); }

main#main-content > .section { padding: var(--space-5) 0; }

/* ---- Impact strip ---- */
.csr-impact { background: var(--color-blue-deep); color: var(--color-white); padding: var(--space-4) 0; }
.csr-impact__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); margin: 0; text-align: center; }
.csr-impact dt { font-family: var(--font-heading); font-size: 28px; line-height: 1.1; font-weight: 700; color: var(--color-gold); }
.csr-impact dd { margin: 6px 0 0; font-size: var(--text-sm); color: rgba(255,255,255,0.85); }

/* ---- Focus areas ---- */
.csr-focus { background: var(--color-white); }
.csr-focus__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.csr-focus__grid > .csr-card { flex: 1 1 100%; min-width: 0; }
.csr-card { display: flex; gap: var(--space-4); align-items: flex-start; background: var(--color-off-white); border: 1px solid #EEE7DC; border-radius: 14px; padding: var(--space-5) var(--space-4); }
.csr-card .csr-ico { width: 48px; height: 48px; }
.csr-card h3 { font-size: 17px; font-weight: 600; color: var(--color-blue-deep); margin: 2px 0 var(--space-1); }
.csr-card p { color: #5B6470; }
.csr-card p.csr-card__tag, .csr-card__tag { color: var(--color-maroon) !important; font-weight: 600; letter-spacing: 0.02em; margin: 0; }
.csr-note { text-align: center; color: #5B6470; margin-top: var(--space-5); }

/* ---- Ways to partner ---- */
.csr-ways { background: var(--color-off-white); }
.csr-ways__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.csr-way { background: var(--color-white); border: 1px solid #EEE7DC; border-radius: 14px; padding: var(--space-5) var(--space-4); text-align: center; }
.csr-way .csr-ico { width: 48px; height: 48px; }
.csr-way h3 { font-size: 17px; font-weight: 600; color: var(--color-blue-deep); margin: var(--space-3) 0 var(--space-1); }
.csr-way p { color: #5B6470; }

/* ---- Why + credentials ---- */
.csr-why { background: var(--color-white); }
.csr-why__layout { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
.csr-why__list { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.csr-why__list li { display: flex; gap: var(--space-3); }
.csr-why__list strong { display: block; font-size: 16px; color: var(--color-blue-deep); }
.csr-why__list p { color: #5B6470; margin-top: 2px; }
.csr-tick { width: 30px; height: 30px; border-radius: 50%; background: #E8F5EC; color: #15803D; display: inline-flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
.csr-creds { align-self: start; background: var(--color-off-white); border: 1px solid #EEE7DC; border-radius: var(--radius-lg); padding: var(--space-6); }
.csr-creds h3 { font-family: var(--font-heading); font-size: 19px; color: var(--color-blue-deep); margin-bottom: var(--space-4); }
.csr-creds dl { margin: 0 0 var(--space-4); display: grid; gap: var(--space-3); }
.csr-creds dt { font-size: 13px; font-weight: 600; color: #5B6470; }
.csr-creds dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-blue-deep); overflow-wrap: anywhere; }
.csr-creds p { color: #5B6470; }

/* ---- Process ---- */
.csr-process { background: var(--color-off-white); }
.csr-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: flex; flex-direction: column; gap: 0; counter-reset: none; }
.csr-steps li { display: flex; gap: var(--space-4); position: relative; padding-bottom: var(--space-6); }
.csr-steps li:last-child { padding-bottom: 0; }
.csr-steps li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: 4px; width: 2px; background: #E7D7BC; }
.csr-steps__n { width: 36px; height: 36px; border-radius: 50%; background: var(--color-blue-deep); color: var(--color-white); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; flex: none; position: relative; }
.csr-steps h3 { font-size: 17px; font-weight: 600; color: var(--color-blue-deep); margin: 5px 0 2px; }
.csr-steps p { color: #5B6470; }

/* ---- Enquiry ---- */
.csr-enquiry { padding: var(--space-4) 0 28px; background: var(--color-white); scroll-margin-top: 80px; }
.csr-layout { display: flex; flex-direction: column; gap: var(--space-6); }
.csr-layout[hidden] { display: none; }
.csr-form { min-width: 0; background: var(--color-white); border: 1px solid #EEE7DC; border-radius: 20px; padding: var(--space-6) var(--space-5); box-shadow: var(--shadow-card); }
.csr-form h2 { font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--color-blue-deep); margin-bottom: 6px; }
.csr-form__lead { color: #5B6470; }
.csr-form__alert { margin: var(--space-5) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: #FEE2E2; color: #991B1B; }
.csr-form__alert[hidden] { display: none; }
.csr-form__fine { text-align: center; color: #5B6470; margin-top: var(--space-4); }
.csr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.csr-form fieldset { border: 0; margin-inline: 0; padding: 0; min-width: 0; }
.csr-form legend { padding: 0; }
.csr-form .form-label { margin-bottom: var(--space-2); }
.csr-form .form-label.required::after { content: ' *'; color: var(--color-error); }
.csr-field { margin-bottom: var(--space-5); }
.csr-opt { font-weight: 400; color: #5B6470; font-size: 13px; margin-left: 6px; font-family: var(--font-body); letter-spacing: 0; }
.csr-hint { color: #5B6470; margin-top: var(--space-2); }
.csr-error { color: var(--color-error); margin-top: var(--space-2); }
.csr-error:empty { display: none; }
.csr-grid-2 { display: grid; grid-template-columns: 1fr; gap: 0; }
.csr-form .form-input, .csr-form .form-select, .csr-form .form-textarea { border-color: var(--color-gray-300); }
.csr-form [aria-invalid="true"] { border-color: var(--color-error); }
.csr-form .form-input::placeholder, .csr-form .form-textarea::placeholder { color: var(--color-gray-500); }
.csr-select { position: relative; }
.csr-select .form-select { appearance: none; -webkit-appearance: none; padding-right: 44px; }
.csr-select svg { position: absolute; right: 16px; top: 16px; width: 16px; height: 16px; pointer-events: none; color: #5B6470; }

.csr-sec { border-top: 1px solid #EEE7DC; padding-top: 28px; margin-top: 28px; }
.csr-sec:first-of-type { margin-top: var(--space-6); }
.csr-sec__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.csr-sec__n { width: 34px; height: 34px; border-radius: 50%; background: var(--color-blue-deep); color: var(--color-white); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; flex: none; }
.csr-sec__head h3 { font-family: var(--font-heading); font-size: 18px; line-height: 1.25; color: var(--color-blue-deep); font-weight: 700; letter-spacing: 0.02em; }

/* Pills */
.csr-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.csr-chip { position: relative; display: block; cursor: pointer; max-width: 100%; }
.csr-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.csr-chip span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--color-gray-300); border-radius: var(--radius-full); background: var(--color-white); font-size: var(--text-sm); font-weight: 500; color: var(--color-gray-700); transition: border-color var(--transition-fast), background var(--transition-fast); line-height: 1.3; }
.csr-chip:hover span { border-color: var(--color-saffron); }
.csr-chip input:checked + span { background: #FFF7ED; border-color: var(--color-saffron); color: #7C2D12; font-weight: 600; }
.csr-chip input:checked + span::before { content: "\2713"; font-weight: 700; color: #B45309; }

.csr-check { min-height: 44px; padding: 10px 0; font-size: 15px; display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-gray-700); cursor: pointer; line-height: 1.5; }
.csr-check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: #B45309; flex: none; }
.csr-consent { margin: var(--space-6) 0; }

/* ---- Aside ---- */
.csr-aside { display: flex; flex-direction: column; gap: var(--space-5); }
.csr-aside h2 { font-family: var(--font-heading); font-size: 19px; margin-bottom: var(--space-2); }
.csr-aside__help { background: var(--color-blue-deep); color: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-6); }
.csr-aside__help h2 { color: var(--color-white); }
.csr-aside__help p { color: rgba(255,255,255,0.85); margin-bottom: var(--space-4); }
.csr-aside__row { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-3); }
.csr-aside__row:last-child { margin-bottom: 0; }
.csr-aside__row svg { flex: none; color: var(--color-gold); margin-top: 2px; }
.csr-aside__row a:hover { text-decoration: underline; }
.csr-aside__mail a { overflow-wrap: anywhere; }
.csr-aside__team { background: var(--color-off-white); border: 1px solid #EEE7DC; border-radius: var(--radius-lg); padding: var(--space-6); }
.csr-aside__team h2 { color: var(--color-blue-deep); }
.csr-aside__team p { color: #5B6470; margin-bottom: var(--space-4); }
.csr-aside__team .btn { justify-content: center; }

/* ---- Thank-you panel ---- */
.csr-success { max-width: 880px; margin: 0 auto; background: var(--color-white); border: 1px solid #EEE7DC; border-radius: 20px; padding: var(--space-8) var(--space-5); box-shadow: var(--shadow-card); text-align: center; scroll-margin-top: 120px; }
.csr-success[hidden] { display: none; }
.csr-success:focus { outline: none; }
.csr-success__tick { width: 72px; height: 72px; border-radius: 50%; background: #E8F5EC; color: #15803D; display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-5); }
.csr-success h2 { font-family: var(--font-heading); font-size: var(--text-3xl); color: var(--color-blue-deep); margin-bottom: var(--space-3); overflow-wrap: anywhere; }
.csr-success__lead { color: var(--color-gray-700); max-width: 560px; margin: 0 auto var(--space-5); }
.csr-success__ref { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; background: #FFF7ED; border: 1px solid #F5D9B0; border-radius: var(--radius-lg); padding: 8px 20px; color: #7C2D12; margin-bottom: var(--space-6); }
.csr-success__ref strong { letter-spacing: 0.04em; }
.csr-success__summary { text-align: left; background: var(--color-off-white); border: 1px solid #EEE7DC; border-radius: var(--radius-lg); padding: var(--space-5); display: grid; grid-template-columns: 1fr; gap: 16px 32px; margin: 0 0 var(--space-6); }
.csr-success__summary:empty { display: none; }
.csr-success__summary dt { font-size: 13px; font-weight: 600; color: #5B6470; margin-bottom: 2px; }
.csr-success__summary dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.csr-success__cta { display: flex; flex-direction: column; gap: var(--space-3); }
.csr-success__cta .btn { justify-content: center; }
.csr-success__more { margin-top: var(--space-5); color: #5B6470; }
.csr-success__more a { color: var(--color-maroon); text-decoration: underline; }

/* ---- FAQ ---- */
.csr-faq { background: var(--color-off-white); }
.csr-faq__list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.csr-faq__item { background: var(--color-white); border: 1px solid #EEE7DC; border-radius: 14px; }
.csr-faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4); min-height: 56px; font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--color-blue-deep); border-radius: 14px; }
.csr-faq__item summary::-webkit-details-marker { display: none; }
.csr-faq__item summary svg { flex: none; color: #B45309; transition: transform var(--transition-fast); }
.csr-faq__item[open] summary svg { transform: rotate(180deg); }
.csr-faq__item p { padding: 0 var(--space-4) var(--space-4); color: #5B6470; }
.csr-faq__item a { color: var(--color-maroon); text-decoration: underline; }

/* ---- Larger screens ---- */
@media (min-width: 560px) {
    .csr-hero__cta { flex-direction: row; justify-content: center; max-width: none; gap: var(--space-4); }
    .csr-impact dt { font-size: 34px; }
    .csr-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-5); }
    .csr-success__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .csr-success__cta { flex-direction: row; justify-content: center; }
}

@media (min-width: 768px) {
    main#main-content > .section { padding: var(--space-8) 0; }
    .csr-intro { margin-bottom: var(--space-10); }
    .csr-intro h2, .csr-why h2 { font-size: var(--text-4xl); }
    .csr-impact { padding: var(--space-5) 0; }
    .csr-impact__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .csr-impact dt { font-size: 40px; }
    .csr-focus__grid { gap: var(--space-5); }
    .csr-focus__grid > .csr-card { flex: 0 1 calc((100% - var(--space-5)) / 2); }
    .csr-card { padding: var(--space-6); border-radius: var(--radius-lg); }
    .csr-ways__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
    .csr-way { padding: var(--space-6); border-radius: var(--radius-lg); }
    .csr-why__layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-12); }
    .csr-enquiry { padding: var(--space-8) 0 48px; }
    .csr-form { padding: var(--space-8); border-radius: var(--radius-xl); }
    .csr-form h2 { font-size: 28px; }
    .csr-sec__n { width: 36px; height: 36px; }
    .csr-sec__head h3 { font-size: var(--text-xl); }
    .csr-success { padding: 48px; border-radius: var(--radius-xl); }
    .csr-success h2 { font-size: var(--text-4xl); }
    .csr-faq__item summary { padding: var(--space-5) var(--space-6); font-size: 17px; }
    .csr-faq__item p { padding: 0 var(--space-6) var(--space-5); }
}

@media (min-width: 992px) {
    /* Single-line intro copy where the container is wide enough to hold it */
    .csr-intro--wide p:last-child { white-space: nowrap; }
    .csr-focus__grid > .csr-card { flex: 0 1 calc((100% - 2 * var(--space-5)) / 3); }
    .csr-ways__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .csr-layout { flex-direction: row; align-items: flex-start; gap: var(--space-10); }
    .csr-form { flex: 1; padding: var(--space-10); }
    .csr-aside { flex: 0 0 340px; position: sticky; top: 110px; }
}

@media (min-width: 900px) {
    /* Hero copy: one sentence per line. The type scales down a little on narrower laptops/tablets so each sentence still fits (996px of text at 18px). */
    .csr-hero__sub { max-width: none; font-size: min(18px, calc((100vw - 70px) / 56)); }
    .csr-line { display: block; white-space: nowrap; }
}

@media (min-width: 768px) {
    /* "Partner in the way that suits you" on one line: 726px at 40px, so the size eases down just below 800px wide */
    .csr-intro .csr-nowrap-h2 { white-space: nowrap; font-size: min(var(--text-4xl), 5vw); }
    .csr-intro--wide { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .csr-chip span, .csr-btn, .csr-faq__item summary svg { transition: none; }
}