/*!
Theme Name: Shree Pranhir
Theme URI: http://underscores.me/
Author: Harshit
Author URI: https://github.com/harshitpatel-dev/
Description: श्री Pranhir Foundation | We are the light of change
Version: 1.1.2
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: shree-pranhir
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Shree Pranhir is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

html {line-height: 1.15;-webkit-text-size-adjust: 100%;}
body {margin: 0;}
main {display: block;}
h1 {font-size: 2em;margin: 0.67em 0;}
hr {box-sizing: content-box;height: 0;overflow: visible;}
pre {font-family: monospace, monospace;font-size: 1em;}
a {background-color: transparent;}
abbr[title] {border-bottom: none;text-decoration: underline;text-decoration: underline dotted;}
b,
strong {font-weight: bolder;}
code,
kbd,
samp {font-family: monospace, monospace;font-size: 1em;}
small {font-size: 80%;}
sub,
sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
img {border-style: none;}
button,
input,
optgroup,
select,
textarea {font-family: inherit;font-size: 100%;line-height: 1.15;margin: 0;}
button,
input {overflow: visible;}
button,
select {text-transform: none;}
button,
[type="button"],
[type="reset"],
[type="submit"] {-webkit-appearance: button;}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {border-style: none;padding: 0;}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}
fieldset {padding: 0.35em 0.75em 0.625em;}
legend {box-sizing: border-box;color: inherit;display: table;max-width: 100%;padding: 0;white-space: normal;}
progress {vertical-align: baseline;}
textarea {overflow: auto;}
[type="checkbox"],
[type="radio"] {box-sizing: border-box;padding: 0;}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {height: auto;}
[type="search"] {-webkit-appearance: textfield;outline-offset: -2px;}
[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
::-webkit-file-upload-button {-webkit-appearance: button;font: inherit;}
details {display: block;}
summary {display: list-item;}
template {display: none;}
[hidden] {display: none;}

*,
*::before,
*::after {box-sizing: inherit;}
html {box-sizing: border-box;}

body,
button,
input,
select,
optgroup,
textarea {color: #404040;font-family:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,  Cantarell, "Helvetica Neue", sans-serif;font-size: 1rem;line-height: 1.5;}

h1,
h2,
h3,
h4,
h5,
h6 {clear: both;}
p {margin-bottom: 1.5em;}
dfn,
cite,
em,
i {font-style: italic;}
blockquote {margin: 0 1.5em;}
address {margin: 0 0 1.5em;}
pre {background: #eee;font-family: "Courier 10 Pitch", courier, monospace;line-height: 1.6;margin-bottom: 1.6em;max-width: 100%;overflow: auto;padding: 1.6em;}
code,
kbd,
tt,
var {font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;}
abbr,
acronym {border-bottom: 1px dotted #666;cursor: help;}
mark,
ins {background: #fff9c0;text-decoration: none;}
big {font-size: 125%;}
body {background: #fff;}
hr {background-color: #ccc;border: 0;height: 1px;margin-bottom: 1.5em;}

ul,
ol {margin: 0 0 1.5em 3em;}
ul {list-style: disc;}
ol {list-style: decimal;}
li > ul,
li > ol {margin-bottom: 0;margin-left: 1.5em;}
dt {font-weight: 700;}
dd {margin: 0 1.5em 1.5em;}

embed,
iframe,
object {max-width: 100%;}
img {height: auto;max-width: 100%;}
figure {margin: 1em 0;}
table {margin: 0 0 1.5em;width: 100%;}
a {color: #4169e1;}
a:visited {color: #800080;}
a:hover,
a:focus,
a:active {color: #191970;}
a:focus {outline: thin dotted;}
a:hover,
a:active {outline: 0;}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {border: 1px solid;border-color: #ccc #ccc #bbb;border-radius: 3px;background: #e6e6e6;color: rgba(0, 0, 0, 0.8);line-height: 1;padding: 0.6em 1em 0.4em;}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {border-color: #ccc #bbb #aaa;}
button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {border-color: #aaa #bbb #bbb;}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {color: #666;border: 1px solid #ccc;border-radius: 3px;padding: 3px;}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {color: #111;}
select {border: 1px solid #ccc;}
textarea {width: 100%;}

.main-navigation {display: block;}
.main-navigation ul {display: none;list-style: none;margin: 0;padding-left: 0;}
.main-navigation ul ul {box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);float: left;position: absolute;top: 100%;left: -999em;z-index: 99999;}
.main-navigation ul ul ul {left: -999em;top: 0;}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {display: block;left: auto;}
.main-navigation ul ul a {width: 200px;}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {left: auto;}
.main-navigation li {position: relative;}
.main-navigation a {display: block;text-decoration: none;}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {display: block;}

@media screen and (min-width: 37.5em) {
  .menu-toggle {display: none;}
  .main-navigation ul {display: flex;}
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {margin: 0 0 1.5em;}
.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {display: flex;}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {flex: 1 0 50%;}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {text-align: end;flex: 1 0 50%;}
.sticky {display: block;}
.updated:not(.published) {display: none;}
.page-content,
.entry-content,
.entry-summary {margin: 1.5em 0 0;}
.page-links {clear: both;margin: 0 0 1.5em;}
.comment-content a {word-wrap: break-word;}
.bypostauthor {display: block;}
.widget {margin: 0 0 1.5em;}
.widget select {max-width: 100%;}
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {border: none;margin-bottom: 0;margin-top: 0;padding: 0;}
.custom-logo-link {display: inline-block;}
.wp-caption {margin-bottom: 1.5em;max-width: 100%;}
.wp-caption img[class*="wp-image-"] {display: block;margin-left: auto;margin-right: auto;}
.wp-caption .wp-caption-text {margin: 0.8075em 0;}
.wp-caption-text {text-align: center;}
.gallery {margin-bottom: 1.5em;display: grid;grid-gap: 1.5em;}
.gallery-item {display: inline-block;text-align: center;width: 100%;}
.gallery-columns-2 {grid-template-columns: repeat(2, 1fr);}
.gallery-columns-3 {grid-template-columns: repeat(3, 1fr);}
.gallery-columns-4 {grid-template-columns: repeat(4, 1fr);}
.gallery-columns-5 {grid-template-columns: repeat(5, 1fr);}
.gallery-columns-6 {grid-template-columns: repeat(6, 1fr);}
.gallery-columns-7 {grid-template-columns: repeat(7, 1fr);}
.gallery-columns-8 {grid-template-columns: repeat(8, 1fr);}
.gallery-columns-9 {grid-template-columns: repeat(9, 1fr);}
.gallery-caption {display: block;}

.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {display: none;}
.infinity-end.neverending .site-footer {display: block;}

/*-------------------------------------------------------------- # Utilities --------------------------------------------------------------*/
/* Accessibility --------------------------------------------- */
.screen-reader-text {border: 0;clip: rect(1px, 1px, 1px, 1px);clip-path: inset(50%);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute !important;width: 1px;word-wrap: normal !important;}
.screen-reader-text:focus {background-color: #f1f1f1;border-radius: 3px;box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);clip: auto !important;clip-path: none;color: #21759b;display: block;font-size: 0.875rem;font-weight: 700;height: auto;left: 5px;line-height: normal;padding: 15px 23px 14px;text-decoration: none;top: 5px;width: auto;z-index: 100000;}
#primary[tabindex="-1"]:focus {outline: 0;}
.alignleft {/*rtl:ignore*/float: left;/*rtl:ignore*/margin-right: 1.5em;margin-bottom: 1.5em;}
.alignright {/*rtl:ignore*/float: right;/*rtl:ignore*/margin-left: 1.5em;margin-bottom: 1.5em;}
.aligncenter {clear: both;display: block;margin-left: auto;margin-right: auto;margin-bottom: 1.5em;}


/*--------------------------------------------------------------
# Theme — Global Base (Shree Pranhir Foundation)
--------------------------------------------------------------*/

/* CSS custom properties / design tokens */
:root {
  --spf-orange: #ea5b0c;
  --spf-orange-dark: #b23c05;
  --spf-orange-light: #f7a94a;
  --spf-cream: #fff7f0;
  --spf-cream-mid: #fdeee1;
  --spf-cream-white: #fffdfb;
  --spf-brown: #24150c;
  --spf-brown-mid: #4a3626;
  --spf-font-body: "Outfit", system-ui, sans-serif;
  --spf-font-serif: "Instrument Serif", Georgia, serif;
  --spf-font-mono: "DM Mono", monospace;
  --spf-radius-pill: 999px;
  --spf-radius-card: 18px;
  --spf-container-max: 1200px;
  --spf-container-pad: clamp(20px, 5vw, 80px);
}

html {scroll-behavior: smooth;}
body {margin: 0;background: var(--spf-cream);color: var(--spf-brown);font-family: var(--spf-font-body);font-size: 1rem;line-height: 1.6;-webkit-font-smoothing: antialiased;text-wrap: pretty;}

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

img {height: auto;max-width: 100%;display: block;}
a {color: var(--spf-orange-dark);text-decoration: none;transition: color 0.2s ease;}
a:hover {color: var(--spf-orange);}
::selection {background: var(--spf-orange);color: #fff;}

/* Shared container */
.spf-container {max-width: var(--spf-container-max);margin-inline: auto;padding-inline: var(--spf-container-pad);}

/*--------------------------------------------------------------
# Theme — Scroll Progress Bar
--------------------------------------------------------------*/
#spf-progress {position: fixed;left: 0;top: 0;height: 3px;width: 0;background: linear-gradient(  90deg,  var(--spf-orange-light),  var(--spf-orange));z-index: 200;pointer-events: none;transition: width 0.1s linear;}

/*--------------------------------------------------------------
# Theme — Site Header / Navigation
--------------------------------------------------------------*/
.site-header {position: fixed;top: 0;left: 0;right: 0;z-index: 100;padding: 0 clamp(20px, 4vw, 40px);background: rgba(255, 247, 240, 0);transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;}
.site-header.is-scrolled {background: rgba(255, 247, 240, 0.92);backdrop-filter: saturate(1.4) blur(16px);-webkit-backdrop-filter: saturate(1.4) blur(16px);box-shadow: 0 1px 0 rgba(36, 21, 12, 0.08);}
.site-header__inner {display: flex;align-items: center;justify-content: space-between;gap: 24px;height: 72px;transition: height 0.35s ease;}
.site-header.is-scrolled .site-header__inner {height: 60px;}
.site-header__logo {flex-shrink: 0;display: flex;align-items: center;z-index: 2;}
.site-header__logo .custom-logo-link { display: flex; align-items: center; }
.site-header__logo .custom-logo { height: 44px; width: auto; display: block; }
.site-header__logo-text {font-family: var(--spf-font-serif);font-size: 1.2rem;font-weight: 700;color: var(--spf-brown);text-decoration: none;}
.site-header__nav {display: flex;align-items: center;}
.site-header__menu {list-style: none;margin: 0;padding: 0;display: flex;align-items: center;gap: 30px;}
.site-header__menu li { position: relative; }
.site-header__menu > li > a {font-size: 14.5px;font-weight: 500;color: var(--spf-brown-mid);letter-spacing: 0.01em;text-decoration: none;padding: 4px 0;transition: color 0.2s ease;}
.site-header__menu > li > a:hover { color: var(--spf-orange); }
.site-header__menu li.donate-btn > a,
.site-header__menu li > a.donate-btn {display: inline-flex;align-items: center;gap: 8px;padding: 11px 22px;border-radius: var(--spf-radius-pill);background: var(--spf-orange);color: #fff !important;font-size: 14px;font-weight: 600;box-shadow: 0 8px 22px -10px rgba(234, 91, 12, 0.9);transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;}
.site-header__menu li.donate-btn > a:hover,
.site-header__menu li > a.donate-btn:hover {background: var(--spf-orange-dark) !important;transform: translateY(-2px);box-shadow: 0 12px 28px -10px rgba(178, 60, 5, 0.8);}
.site-header__menu-toggle {display: none;flex-direction: column;justify-content: center;align-items: center;width: 44px;height: 44px;padding: 11px 10px;background: transparent;border: none;cursor: pointer;flex-shrink: 0;z-index: 2;-webkit-tap-highlight-color: transparent;gap: 0;}
.site-header__menu-toggle:focus-visible {outline: 2px solid var(--spf-orange);outline-offset: 2px;border-radius: 6px;}
.site-header__bar {display: block;width: 22px;height: 2px;background: var(--spf-brown);border-radius: 2px;transform-origin: center;transition:  transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),  opacity 0.22s ease,  width 0.22s ease;}
.site-header__bar--top    { margin-bottom: 5px; }
.site-header__bar--middle { margin-bottom: 5px; }
.site-header__menu-toggle[aria-expanded="true"] .site-header__bar--top {transform: translateY(7px) rotate(45deg);}
.site-header__menu-toggle[aria-expanded="true"] .site-header__bar--middle {opacity: 0;width: 0;}
.site-header__menu-toggle[aria-expanded="true"] .site-header__bar--bottom {transform: translateY(-7px) rotate(-45deg);}

@media (max-width: 900px) {
  .site-header__menu-toggle { display: flex;z-index: 500;}
  .site-header__nav {position: fixed;top: 0;right: 0;bottom: 0;               /* full viewport height */width: 88vw;             /* generous width on tablet */max-width: 420px;        /* cap at 420px on wider tablets */min-width: 280px;align-items: flex-start;overflow-y: auto;padding-top: 80px;       /* clears the header bar */padding-bottom: 40px;padding-left: clamp(24px, 6vw, 48px);padding-right: clamp(24px, 6vw, 48px);background: rgba(255, 252, 248, 0.98);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);/* Left-edge shadow — gives depth against page content */box-shadow: -8px 0 40px -4px rgba(36, 21, 12, 0.18),            -1px 0 0 0   rgba(36, 21, 12, 0.06);border-left: 1px solid rgba(36, 21, 12, 0.06);/* Slide in from the right */transform: translateX(100%);opacity: 0;visibility: hidden;transition:  transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),  opacity   0.28s ease,  visibility 0s linear 0.38s;z-index: 99;}
  .site-header__nav.toggled {transform: translateX(0);opacity: 1;visibility: visible;transition:  transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),  opacity   0.28s ease,  visibility 0s linear 0s;}
  .site-header__menu { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  .site-header__menu li { width: 100%; }
  .site-header__menu > li > a {display: block;padding: 14px 0;font-size: 17px;font-weight: 500;color: var(--spf-brown);border-bottom: 1px solid rgba(36, 21, 12, 0.06);transition: color 0.2s ease, padding-left 0.2s ease;}
  .site-header__menu > li > a:hover { color: var(--spf-orange); padding-left: 6px; }
  .site-header__menu > li:last-child > a { border-bottom: none; }
  .site-header__menu li.donate-btn > a,
  .site-header__menu li > a.donate-btn {margin-top: 16px;width: 100%;justify-content: center;font-size: 15.5px;}
}

@media (max-width: 600px) {
  .site-header__nav {width: 100%;max-width: 100%;height: 100vh;border-left: none;box-shadow: none;        /* no left shadow when full-width */z-index: 1;}
}

@media (min-width: 901px) {
  .site-header__menu-toggle { display: none !important; }
  .site-header__nav {transform: none !important;opacity: 1 !important;visibility: visible !important;position: static;background: none;backdrop-filter: none;-webkit-backdrop-filter: none;box-shadow: none;border: none;padding: 0;width: auto;max-width: none;overflow: visible;}
}

/*--------------------------------------------------------------
# Theme — Site Footer
--------------------------------------------------------------*/
.site-footer {padding: 64px clamp(20px, 4vw, 40px) 34px;background: var(--spf-brown);color: rgba(255, 247, 240, 0.72);}
.site-footer__grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap: 44px;padding-bottom: 44px;border-bottom: 1px solid rgba(255, 247, 240, 0.14);}
.site-footer__logo {height: 52px;width: auto;display: block;margin-bottom: 20px;filter: brightness(1.06);}
.site-footer__desc {margin: 0 0 18px;font-size: 15px;line-height: 1.65;color: rgba(255, 247, 240, 0.62);font-weight: 300;max-width: 320px;}
.site-footer__reg {font-family: var(--spf-font-mono);font-size: 12px;letter-spacing: 0.08em;color: rgba(255, 247, 240, 0.45);line-height: 1.6;}

.site-footer__nav-col {display: flex;flex-direction: column;gap: 11px;}
.site-footer__nav-label {font-family: var(--spf-font-mono);font-size: 11px;letter-spacing: 0.16em;text-transform: uppercase;color: var(--spf-orange-light);margin-bottom: 6px;}
.site-footer__nav-menu {display: flex;flex-direction: column;gap: 0;}
.site-footer__nav-menu ul,
.site-footer__nav-list {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;gap: 11px;}
.site-footer__nav-menu ul li,
.site-footer__nav-list li {margin: 0;padding: 0;}
.site-footer__nav-menu ul a,
.site-footer__nav-list a {font-size: 15px;color: rgba(255, 247, 240, 0.72);text-decoration: none;transition: color 0.2s ease;}

.site-footer__nav-menu ul a:hover,
.site-footer__nav-list a:hover {color: var(--spf-orange-light);}

.site-footer__contact-list {display: flex;flex-direction: column;gap: 11px;}
.site-footer__contact-link {font-size: 15px;color: rgba(255, 247, 240, 0.72);text-decoration: none;transition: color 0.2s ease;}
.site-footer__contact-link:hover {color: var(--spf-orange-light);}
.site-footer__contact-address {font-size: 15px;color: rgba(255, 247, 240, 0.72);font-weight: 300;line-height: 1.5;}
.site-footer__bottom {display: flex;flex-wrap: wrap;gap: 16px;justify-content: space-between;align-items: center;padding-top: 22px;}
.site-footer__copyright {font-size: 13.5px;color: rgba(255, 247, 240, 0.45);font-weight: 300;}
.site-footer__support-links {list-style: none;margin: 0;padding: 0;display: flex;flex-wrap: wrap;gap: 20px;align-items: center;}
.site-footer__support-links li {margin: 0;padding: 0;}
.site-footer__support-links a {font-size: 13.5px;color: rgba(255, 247, 240, 0.45);text-decoration: none;transition: color 0.2s ease;}
.site-footer__support-links a:hover {color: var(--spf-orange-light);}
.site-footer__support-link {font-size: 13.5px;color: rgba(255, 247, 240, 0.45);text-decoration: none;transition: color 0.2s ease;}
.site-footer__support-link:hover {color: var(--spf-orange-light);}

.site-footer__contact-cvr {font-size: 15px;color: rgba(255, 247, 240, 0.72);font-weight: 300;}

@media (max-width: 640px) {
  .site-footer__grid {grid-template-columns: 1fr;gap: 36px;}
  .site-footer__bottom {flex-direction: column;align-items: flex-start;gap: 12px;}
  .site-footer__support-links {gap: 14px;}
}

/*--------------------------------------------------------------
# Theme — Global Typography (consistent across all pages)
--------------------------------------------------------------*/

body,
button,
input,
select,
optgroup,
textarea {font-family: var(--spf-font-body);font-size: 16px; /* base — all rem values scale from this */line-height: 1.65;color: var(--spf-brown);-webkit-font-smoothing: antialiased;}

/* Heading scale — clamp(min, fluid, max) for full responsiveness */
h1 {font-size: clamp(46px, 5.3vw, 80px);line-height: 0.98;font-weight: 700;letter-spacing: -0.03em;color: var(--spf-brown);margin: 0 0 22px;}
h2 {font-size: clamp(34px, 3.5vw, 52px);line-height: 1.06;font-weight: 700;letter-spacing: -0.025em;color: var(--spf-brown);margin: 0 0 20px;}
h3 {font-size: clamp(24px, 2.4vw, 36px);line-height: 1.15;font-weight: 700;letter-spacing: -0.02em;color: var(--spf-brown);margin: 0 0 16px;}
h4 {font-size: clamp(18px, 1.8vw, 24px);line-height: 1.25;font-weight: 600;letter-spacing: -0.01em;color: var(--spf-brown);margin: 0 0 12px;}
h5 {font-size: clamp(15px, 1.4vw, 18px);line-height: 1.35;font-weight: 600;color: var(--spf-brown);margin: 0 0 10px;}
h6 {font-size: clamp(13px, 1.1vw, 15px);line-height: 1.4;font-weight: 600;color: var(--spf-brown);margin: 0 0 8px;}

p {font-size: 18.5px;line-height: 1.62;color: #5c4634;font-weight: 300;margin: 0 0 1.4em;}
.text-sm {font-size: 15px;line-height: 1.6;}
.text-label {font-family: var(--spf-font-mono);font-size: 11px;letter-spacing: 0.16em;text-transform: uppercase;color: var(--spf-orange-light);}

/*--------------------------------------------------------------
# Theme — Hero Banner Section
--------------------------------------------------------------*/
.hero-banner {position: relative;padding: clamp(120px, 15vw, 150px) clamp(20px, 4vw, 40px) 84px;background: linear-gradient(  180deg,  var(--spf-cream) 0%,  var(--spf-cream-mid) 100%);overflow: hidden;}
.hero-banner__inner {position: relative;max-width: 1280px;margin-inline: auto;display: grid;grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));gap: 56px;align-items: center;}
.hero-banner__sun {position: absolute;top: -260px;right: -240px;width: 820px;height: 820px;pointer-events: none;}
.hero-banner__sun-ring {position: absolute;inset: 0;border-radius: 50%;background: repeating-conic-gradient(  from 0deg,  rgba(234, 91, 12, 0.26) 0deg 2.2deg,  rgba(234, 91, 12, 0) 2.2deg 7.5deg);-webkit-mask-image: radial-gradient(  circle,  rgba(0, 0, 0, 0) 26%,  rgba(0, 0, 0, 1) 34%,  rgba(0, 0, 0, 1) 62%,  rgba(0, 0, 0, 0) 76%);mask-image: radial-gradient(  circle,  rgba(0, 0, 0, 0) 26%,  rgba(0, 0, 0, 1) 34%,  rgba(0, 0, 0, 1) 62%,  rgba(0, 0, 0, 0) 76%);animation: spinSlow 180s linear infinite;}
.hero-banner__sun-glow {position: absolute;left: 50%;top: 50%;width: 300px;height: 300px;margin: -150px 0 0 -150px;border-radius: 50%;background: radial-gradient(circle at 40% 35%, #f7a94a, #ea5b0c 62%, #b23c05);opacity: 0.16;}
.hero-banner__content {display: flex;flex-direction: column;gap: 0; /* spacing handled per-element */}
.hero-banner__badge {display: inline-flex;align-items: center;gap: 10px;padding: 7px 14px 7px 10px;border: 1px solid rgba(234, 91, 12, 0.3);border-radius: var(--spf-radius-pill);background: rgba(255, 255, 255, 0.7);margin-bottom: 26px;width: fit-content;}
.hero-banner__badge-diamond {width: 7px;height: 7px;background: var(--spf-orange);transform: rotate(45deg);display: block;flex-shrink: 0;}
.hero-banner__badge-text {font-family: var(--spf-font-mono);font-size: 11.5px;letter-spacing: 0.16em;text-transform: uppercase;color: var(--spf-orange-dark);}
.hero-banner__title {margin-bottom: 22px;}
.hero-banner__title span {font-family: var(--spf-font-serif);font-style: italic;font-weight: 400;color: var(--spf-orange);letter-spacing: -0.01em;}
.hero-banner__desc {margin-bottom: 34px;max-width: 520px;}
.hero-banner__buttons {display: flex;flex-wrap: wrap;gap: 14px;margin-bottom: 44px;}
.hero-banner__btn {display: inline-flex;align-items: center;gap: 10px;padding: 16px 30px;border-radius: var(--spf-radius-pill);font-size: 16px;font-weight: 600;text-decoration: none;transition:  background 0.2s ease,  color 0.2s ease,  border-color 0.2s ease,  transform 0.2s ease,  box-shadow 0.2s ease;}
.hero-banner__btn--primary {background: var(--spf-orange);color: #fff;border: 1.5px solid var(--spf-orange);box-shadow: 0 16px 34px -14px rgba(234, 91, 12, 0.95);}
.hero-banner__btn--primary:hover {background: var(--spf-orange-dark);border-color: var(--spf-orange-dark);color: #fff;transform: translateY(-2px);box-shadow: 0 20px 40px -16px rgba(178, 60, 5, 0.8);}
.hero-banner__btn--secondary {background: transparent;color: var(--spf-brown);border: 1.5px solid rgba(36, 21, 12, 0.18);padding: 16px 28px;}
.hero-banner__btn--secondary:hover {border-color: rgba(234, 91, 12, 0.4);background: rgba(255, 255, 255, 0.6);color: var(--spf-orange-dark);transform: translateY(-2px);}
.hero-banner__stats {display: flex;gap: 38px;flex-wrap: wrap;padding-top: 26px;border-top: 1px solid rgba(36, 21, 12, 0.1);}
.hero-banner__stat-number {font-size: 30px;font-weight: 700;letter-spacing: -0.02em;color: var(--spf-brown);line-height: 1;}
.hero-banner__stat-label {font-family: var(--spf-font-mono);font-size: 11px;letter-spacing: 0.14em;text-transform: uppercase;color: #8a7361;margin-top: 4px;}

.hero-banner__art {position: relative;min-width: 0;display: flex;justify-content: flex-end;}
.hero-banner__art-wrap {position: relative;width: 100%;max-width: 460px;}

.hero-banner__art-main {position: relative;width: 100%;height: 560px;border-radius: 230px 230px 26px 26px;overflow: hidden;box-shadow: 0 40px 80px -40px rgba(36, 21, 12, 0.5);background: #f6e7d8;}
.hero-banner__art-img {display: block;width: 100%;height: 100%;object-fit: cover;}
.hero-banner__art-overlay {position: absolute;inset: 0;background: linear-gradient(  180deg,  rgba(178, 60, 5, 0.18) 0%,  rgba(178, 60, 5, 0) 45%,  rgba(36, 21, 12, 0.42) 100%);pointer-events: none;}

.hero-banner__art-detail {position: absolute;left: -56px;bottom: 64px;width: 150px;height: 150px;border-radius: 50%;overflow: hidden;border: 7px solid var(--spf-cream);box-shadow: 0 24px 44px -20px rgba(36, 21, 12, 0.45);animation: floatY 7s ease-in-out infinite;}
.hero-banner__art-detail-img {display: block;width: 100%;height: 100%;object-fit: cover;border-radius: 50%;}

.hero-banner__live-badge {position: absolute;left: -40px;top: 44px;display: flex;align-items: center;gap: 12px;padding: 13px 18px;background: #fff;border-radius: 16px;box-shadow: 0 22px 40px -20px rgba(36, 21, 12, 0.42);}
.hero-banner__live-dot {position: relative;display: flex;width: 12px;height: 12px;align-items: center;justify-content: center;flex-shrink: 0;}
.hero-banner__live-pulse {position: absolute;width: 12px;height: 12px;border-radius: 50%;background: rgba(234, 91, 12, 0.5);animation: pulseRing 2.4s ease-out infinite;}
.hero-banner__live-core {width: 8px;height: 8px;border-radius: 50%;background: var(--spf-orange);position: relative;}
.hero-banner__live-text {font-size: 13.5px;font-weight: 600;color: var(--spf-brown);white-space: nowrap;}

/* ── Keyframe animations (defined once, used globally) ── */
@keyframes spinSlow {
  to {
    transform: rotate(360deg);
  }
}

@keyframes floatY {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

@keyframes pulseRing {
  0% {
    transform: scale(0.85);
    opacity: 0.55;
  }
  70% {
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


.hero-banner__inner--no-image {grid-template-columns: 1fr; /* single column always */max-width: 1280px;}
.hero-banner__inner--no-image .hero-banner__title {max-width: 1000px;}
.hero-banner__inner--no-image .hero-banner__desc {max-width: 640px;}
.hero-banner__sun--left {top: -300px;left: -260px;right: auto; /* reset the home-page right value */}
.hero-banner__stats--grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));gap: 1px;background: rgba(36, 21, 12, 0.1);border: 1px solid rgba(36, 21, 12, 0.1);border-radius: 20px;overflow: hidden;/* reset the strip styles */padding-top: 0;border-top: none;flex-wrap: unset;}
.hero-banner__stats--grid .hero-banner__stat {background: var(--spf-cream-white);padding: 26px 28px;}
.hero-banner__stats--grid .hero-banner__stat-number {font-size: 30px;font-weight: 700;letter-spacing: -0.02em;color: var(--spf-brown);line-height: 1;}
.hero-banner__stats--grid .hero-banner__stat-label {font-family: var(--spf-font-mono);font-size: 11px;letter-spacing: 0.14em;text-transform: uppercase;color: #8a7361;margin-top: 6px;}

@media (max-width: 900px) {
  .hero-banner__inner {grid-template-columns: 1fr;gap: 40px;}
  .hero-banner__art {justify-content: center;}
  .hero-banner__art-wrap {max-width: 340px;}
  .hero-banner__art-main {height: 420px;}
  .hero-banner__live-badge {left: 0;}
  .hero-banner__art-detail {left: -20px;}
}

@media (max-width: 600px) {
  .hero-banner {padding-bottom: 60px;}
  .hero-banner__buttons {flex-direction: column;}
  .hero-banner__btn {justify-content: center;}
  .hero-banner__stats {/* gap: 24px; */}
  p {font-size: 16px;}
}

/*--------------------------------------------------------------
# Theme — Marquee Slider Section
--------------------------------------------------------------*/

/* Outer band */
.marquee-slider {overflow: hidden;background: var(--spf-orange);padding: 15px 0;/* Respect users who prefer reduced motion */--marquee-duration: 34s;}
@media (prefers-reduced-motion: reduce) {
  .marquee-slider {--marquee-duration: 0s;}
}

.marquee-slider__track {display: flex;width: max-content;animation: marquee var(--marquee-duration) linear infinite;}
.marquee-slider__set {display: flex;align-items: center;gap: 34px;padding-right: 34px;white-space: nowrap;}
.marquee-slider__item {font-size: 14px;font-weight: 600;letter-spacing: 0.13em;text-transform: uppercase;color: #fff1e4;}
.marquee-slider__divider {color: #fff1e4;opacity: 0.6;font-size: 14px;line-height: 1;flex-shrink: 0;}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

.marquee-slider:hover .marquee-slider__track,
.marquee-slider:focus-within .marquee-slider__track {animation-play-state: paused;}

/*--------------------------------------------------------------
# Content Section (content_section.php)
# Flexible multi-column layout — Mission, How We Work, Programs,
# Stories, Get Involved, and any future content-heavy sections.
--------------------------------------------------------------*/

/* ── Section backgrounds ── */
.cs--bg-cream-white {background: var(--spf-cream-white);}
.cs--bg-cream {background: var(--spf-cream);}
.cs--bg-cream-mid {background: var(--spf-cream-mid);}
.cs--bg-brown {background: var(--spf-brown);color: rgba(255, 247, 240, 0.8);}
.cs--bg-orange {background: var(--spf-orange);color: #fff;}

/* ── Section padding ── */
.cs--pad-default {padding: clamp(72px, 10vw, 110px) clamp(20px, 4vw, 40px);}
.cs--pad-compact {padding: clamp(48px, 6vw, 72px) clamp(20px, 4vw, 40px);}
.cs--pad-flush {padding: 0;}

/* ── Section-level label ── */
.cs__section-label {margin-bottom: 20px;display: block;}

/* ══════════════════════════════════════════════════════════════
   GRID SYSTEM
   Native CSS Grid — no Bootstrap.
   auto-fit with minmax so columns collapse gracefully on mobile.
   ══════════════════════════════════════════════════════════════ */

.cs-grid {display: grid;gap: clamp(32px, 4vw, 56px);align-items: start;}
/* 1-column: full width */
.cs-grid--cols-1 {grid-template-columns: 1fr;}

/* 2-column: two halves, collapses at 640px */
.cs-grid--cols-2 {grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));}

/* 3-column: thirds, collapses at 480px each */
.cs-grid--cols-3 {grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));}

/* 4-column: quarters */
.cs-grid--cols-4 {grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));}

/* ── Column explicit width overrides (within a grid) ── */
.cs-col--full {grid-column: 1 / -1;}
.cs-col--half {}
.cs-col--third {}
.cs-col--quarter {}

/* ── Column vertical alignment ── */
.cs-col--align-top {align-self: start;}
.cs-col--align-center {align-self: center;}
.cs-col--align-bottom {align-self: end;}

/* ── Image/text pair swap (mobile: image below text) ── */
.cs-col--order-first {order: -1;}
.cs-col--order-last {order: 1;}

/* On desktop always restore natural order */
@media (min-width: 901px) {
  .cs-col--order-first,
  .cs-col--order-last {order: 0;}
}

/* ── Column inner wrapper ── */
.cs-col__inner {display: flex;flex-direction: column;gap: 20px;height: 100%;}

/* ══════════════════════════════════════════════════════════════
   BLOCK TYPES
   ══════════════════════════════════════════════════════════════ */

/* Every block gets a small top spacing when stacked */
.cs-block + .cs-block {margin-top: 4px;}
.cs-block--label .cs__label {display: inline-block;}

/* ── Title block ── */
.cs-block--title .cs__title {margin-bottom: 0;}

/* ── Text block ── */
.cs-block--text .cs__text p {font-size: 17px;line-height: 1.7;color: #5c4634;font-weight: 300;margin: 0 0 20px;}
.cs-block--text .cs__text p:last-child {margin-bottom: 0;}
/* Dark bg text override */
.cs--bg-brown .cs-block--text .cs__text p {color: rgba(255, 247, 240, 0.72);}
/* ── Image block ── */
.cs-block--image .cs__image {display: block;width: 100%;height: auto;object-fit: cover;}
.cs-block--image-default .cs__image {border-radius: 20px;}
.cs-block--image-rounded .cs__image {border-radius: clamp(16px, 3vw, 28px);}
.cs-block--image-circle .cs__image {border-radius: 50%;aspect-ratio: 1;}
.cs-block--image-card {border-radius: 20px;overflow: hidden;background: #f6e7d8;height: 280px;}
.cs-block--image-card .cs__image {height: 100%;}
.cs-block--feature-cards {display: flex;flex-direction: column;gap: 18px;}
.cs-feature-card {display: grid;grid-template-columns: auto 1fr;gap: 22px;padding: 30px;border-radius: 20px;background: var(--spf-cream);border: 1px solid rgba(234, 91, 12, 0.14);transition:  background 0.2s ease,  transform 0.2s ease,  box-shadow 0.2s ease;}

.cs-feature-card:hover {background: var(--spf-cream-mid);transform: translateY(-3px);box-shadow: 0 30px 56px -30px rgba(36, 21, 12, 0.42);}
.cs-feature-card--dark {background: var(--spf-brown);border-color: var(--spf-brown);}
.cs-feature-card--dark:hover {background: #2e1a0f;}
.cs-feature-card__number {font-family: var(--spf-font-serif);font-size: 40px;line-height: 1;color: var(--spf-orange);flex-shrink: 0;}
.cs-feature-card--dark .cs-feature-card__number {color: var(--spf-orange-light);}
.cs-feature-card__body {min-width: 0;}
.cs-feature-card__title {margin: 0 0 8px;font-size: 21px;font-weight: 600;letter-spacing: -0.01em;color: var(--spf-brown);line-height: 1.2;}
.cs-feature-card--dark .cs-feature-card__title {color: var(--spf-cream);}
.cs-feature-card__text {margin: 0;font-size: 15.5px;line-height: 1.65;color: #6b5240;font-weight: 300;}
.cs-feature-card--dark .cs-feature-card__text {color: rgba(255, 247, 240, 0.72);}
.cs-block--buttons .cs__buttons {display: flex;flex-wrap: wrap;gap: 14px;}
.cs__btn {display: inline-flex;align-items: center;gap: 8px;padding: 14px 26px;border-radius: var(--spf-radius-pill);font-size: 15.5px;font-weight: 600;text-decoration: none;transition:  background 0.2s ease,  color 0.2s ease,  border-color 0.2s ease,  transform 0.2s ease,  box-shadow 0.2s ease;}
.cs__btn--primary {background: var(--spf-orange);color: #fff;border: 1.5px solid var(--spf-orange);box-shadow: 0 12px 28px -12px rgba(234, 91, 12, 0.85);}
.cs__btn--primary:hover {background: var(--spf-orange-dark);border-color: var(--spf-orange-dark);color: #fff;transform: translateY(-2px);box-shadow: 0 16px 34px -14px rgba(178, 60, 5, 0.7);}
.cs__btn--secondary {background: transparent;color: var(--spf-brown);border: 1.5px solid rgba(36, 21, 12, 0.18);}
.cs__btn--secondary:hover {border-color: rgba(234, 91, 12, 0.4);background: rgba(255, 255, 255, 0.6);color: var(--spf-orange-dark);transform: translateY(-2px);}
/* ── List block ── */
.cs__list {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;gap: 10px;}
.cs__list li {padding-left: 20px;position: relative;font-size: 16px;line-height: 1.6;color: #5c4634;font-weight: 300;}
.cs__list li::before {content: "";position: absolute;left: 0;top: 10px;width: 6px;height: 6px;border-radius: 50%;background: var(--spf-orange);}
/* ── Icon List block ── */
.cs__icon-list {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;gap: 14px;}
.cs__icon-list-item {display: flex;align-items: flex-start;gap: 14px;}
.cs__icon-list-icon {flex-shrink: 0;width: 28px;height: 28px;}
.cs__icon-list-icon img {width: 100%;height: 100%;object-fit: contain;}
.cs__icon-list-text {font-size: 16px;line-height: 1.6;color: #5c4634;font-weight: 300;}
/* ── Quote / Testimonial block ── */
.cs__quote {margin: 0;padding: 32px;border-radius: 20px;background: var(--spf-cream);border: 1px solid rgba(234, 91, 12, 0.14);position: relative;}
.cs__quote::before {content: "\201C"; /* opening curly quote */font-family: var(--spf-font-serif);font-size: 80px;line-height: 0.7;color: var(--spf-orange);opacity: 0.25;position: absolute;top: 20px;left: 28px;}
.cs__quote-text {font-size: 18px;line-height: 1.65;color: var(--spf-brown);font-weight: 300;font-style: italic;margin: 0 0 20px;position: relative;}
.cs__quote-footer {display: flex;align-items: center;gap: 14px;}
.cs__quote-avatar {width: 44px;height: 44px;border-radius: 50%;object-fit: cover;flex-shrink: 0;}
.cs__quote-meta {display: flex;flex-direction: column;gap: 2px;}
.cs__quote-author {font-style: normal;font-size: 14.5px;font-weight: 600;color: var(--spf-brown);}
.cs__quote-role {font-family: var(--spf-font-mono);font-size: 11.5px;letter-spacing: 0.12em;text-transform: uppercase;color: var(--spf-orange);}
/* Dark bg quote override */
.cs--bg-brown .cs__quote {background: rgba(255, 247, 240, 0.06);border-color: rgba(255, 247, 240, 0.12);}
.cs--bg-brown .cs__quote-text,
.cs--bg-brown .cs__quote-author {color: var(--spf-cream);}
/* ── Accordion block ── */
.cs-accordion__item {border-bottom: 1px solid rgba(36, 21, 12, 0.1);}
.cs-accordion__item:first-child {border-top: 1px solid rgba(36, 21, 12, 0.1);}
.cs-accordion__question {display: flex;align-items: center;justify-content: space-between;gap: 16px;padding: 20px 0;cursor: pointer;list-style: none;font-size: 16.5px;font-weight: 600;color: var(--spf-brown);transition: color 0.2s ease;user-select: none;}
.cs-accordion__question::-webkit-details-marker {display: none;}
.cs-accordion__question:hover {color: var(--spf-orange);}
/* + / × toggle icon */
.cs-accordion__icon {flex-shrink: 0;width: 20px;height: 20px;position: relative;}
.cs-accordion__icon::before,
.cs-accordion__icon::after {content: "";position: absolute;background: currentColor;border-radius: 2px;transition:  transform 0.3s ease,  opacity 0.3s ease;}
.cs-accordion__icon::before {width: 2px;height: 14px;top: 3px;left: 9px;}
.cs-accordion__icon::after {width: 14px;height: 2px;top: 9px;left: 3px;}
details[open] .cs-accordion__icon::before {transform: rotate(90deg);opacity: 0;}
.cs-accordion__answer {padding: 0 0 20px;font-size: 15.5px;line-height: 1.7;color: #5c4634;font-weight: 300;}
.cs-accordion__answer p {margin: 0 0 12px;}
.cs-accordion__answer p:last-child {margin-bottom: 0;}

/* Dark bg accordion */
.cs--bg-brown .cs-accordion__item {border-color: rgba(255, 247, 240, 0.14);}
.cs--bg-brown .cs-accordion__question {color: var(--spf-cream);}
.cs--bg-brown .cs-accordion__answer {color: rgba(255, 247, 240, 0.72);}

/* ── Stats Grid block ── */
.cs-block--stats-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));gap: 32px;}
.cs-stat__number {font-size: clamp(28px, 3vw, 38px);font-weight: 700;letter-spacing: -0.02em;color: var(--spf-brown);line-height: 1;margin-bottom: 6px;}
.cs-stat__label {font-family: var(--spf-font-mono);font-size: 11px;letter-spacing: 0.14em;text-transform: uppercase;color: #8a7361;}

/* Dark bg stat overrides */
.cs--bg-brown .cs-stat__number {color: var(--spf-cream);}
.cs--bg-brown .cs-stat__label {color: rgba(255, 247, 240, 0.5);}

/* ── Centred layout utility ───────────────────────────────────────
   Add custom_class = "cs--centered" to a content_section in ACF.
   Centres heading, text, and buttons horizontally.            */
.cs--centered .cs-col__inner {text-align: center;align-items: center;}
.cs--centered .cs-col__inner .cs__title,
.cs--centered .cs-col__inner .cs__label,
.cs--centered .cs-col__inner .cs__text {max-width: 720px;margin-inline: auto;}
.cs--centered .cs-col__inner .cs__buttons {justify-content: center;}
.cs--centered .cs-col__inner .cs__text p{margin-bottom: 10px;}

@media (max-width: 900px) {
  /* Force all columns to full width below 900px */
  .cs-grid--cols-2,
  .cs-grid--cols-3,
  .cs-grid--cols-4 {grid-template-columns: 1fr;}

  .cs-block--image-card {height: 220px;}
  .cs-feature-card {padding: 24px;}
  .cs-feature-card__number {font-size: 32px;}
}

@media (max-width: 600px) {
  .cs--pad-default {padding-top: clamp(56px, 8vw, 72px);padding-bottom: clamp(56px, 8vw, 72px);}
  .cs--pad-compact {padding-top: 40px;padding-bottom: 40px;}
  .cs-block--image-card {height: 180px;}
  .cs-block--buttons .cs__buttons {flex-direction: column;}
  .cs__btn {width: 100%;justify-content: center;}
  .cs__quote {padding: 24px;}
  .cs-feature-card {grid-template-columns: 1fr;gap: 14px;padding: 22px;}
  .cs-feature-card__number {font-size: 28px;}
  .cs-feature-card__title {font-size: 18px;}
  .cs-block--stats-grid {grid-template-columns: repeat(2, 1fr);gap: 24px;}
}

/*--------------------------------------------------------------
# Containers
--------------------------------------------------------------*/

/* Content container — used inside sections (max 1280px) */
.pranhir-container {max-width: 1280px;margin-inline: auto;width: 100%;}
.pranhir-wrap {max-width: 1280px;margin-inline: auto;width: 100%;padding-inline: clamp(20px, 4vw, 40px);}
.shree-container {max-width: 1440px;margin-inline: auto;width: 100%;}

/*--------------------------------------------------------------
# Content Section — fixes & overrides
--------------------------------------------------------------*/

/* ── Section label colour fix
   Matches the HTML design: #EA5B0C orange, DM Mono, uppercase
   The .text-label utility sets font/size/case but not colour.
   We override here inside .cs so it doesn't bleed globally. ── */
.cs .cs__section-label {color: var(--spf-orange);font-family: var(--spf-font-mono);font-size: 11.5px;letter-spacing: 0.18em;text-transform: uppercase;margin-bottom: 20px;}
/* Dark bg sections — label stays orange-light so it's visible */
.cs--bg-brown .cs__section-label {color: var(--spf-orange-light);}

/* ── Image block — card style needs explicit fixed height
   HTML design uses height:280px with overflow:hidden + border-radius:20px
   We also add a fallback background matching the design (#F6E7D8) ── */
.cs-block--image-card {position: relative;width: 100%;height: 280px;border-radius: 20px;overflow: hidden;background: #f6e7d8;}
.cs-block--image-card .cs__image {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;border-radius: 0;}

/* ── Image block — default/rounded: full width, natural aspect ratio,
   with rounded corners and a warm fallback background ── */
.cs-block--image-default,
.cs-block--image-rounded {width: 100%;border-radius: 20px;overflow: hidden;background: #f6e7d8;}

.cs-block--image-default .cs__image,
.cs-block--image-rounded .cs__image {width: 100%;height: auto;aspect-ratio: 3 / 2;object-fit: cover;display: block;}

/* ── Image block — circle: 1:1 ratio with circular clip ── */
.cs-block--image-circle {width: 100%;max-width: 320px;border-radius: 50%;overflow: hidden;background: #f6e7d8;}
.cs-block--image-circle .cs__image {width: 100%;aspect-ratio: 1;object-fit: cover;display: block;}
.cs__inner {max-width: none;margin-inline: 0;}

/*--------------------------------------------------------------
# Header — container-aware layout
--------------------------------------------------------------*/

/* The header's inner .shree-container handles the flex layout.
   Remove flex from the header itself so it's purely a positioned wrapper. */
.site-header {display: block;}
.header_inner {display: flex;align-items: center;justify-content: space-between;gap: 10px;}

/*--------------------------------------------------------------
# Responsive — container adjustments
--------------------------------------------------------------*/
@media (max-width: 900px) {
  /* On mobile the shree-container in header stays flex but stacks vertically
	   via the existing .site-header__nav toggled logic */
  .shree-container {flex-wrap: wrap;}
  .cs-block--image-card {height: 220px;}
}

@media (max-width: 600px) {
  .cs-block--image-card {height: 180px;}
}

/*--------------------------------------------------------------
# Milestones Block (content_section.php — block_type: milestones)
# Vertical timeline: year left col, title + body right col,
# orange left-border line that terminates on the last item.
--------------------------------------------------------------*/

/*
  Design values (About Trust.html):
  - Outer: flex-direction column, no gap between items (padding handles spacing)
  - Each row: grid-template-columns 76px | 1fr, gap 22px
  - Year: Instrument Serif, 26px, orange, line-height 1.2
  - Content: border-left 1px solid rgba(234,91,12,.25), padding-left 24px, padding-bottom 26px
  - Last item: border-left 1px solid transparent (line disappears)
  - H3: 18px / 600 / brown, margin-bottom 6px
  - Body: 15.5px / 1.6 / #6B5240 / 300
  - Heading label: DM Mono 11px / #8A7361, margin-bottom 24px
*/

/* Milestones container */
.cs-milestones {display: flex;flex-direction: column;gap: 0;padding-top: 8px;}
.cs-milestones__heading {font-family: var(--spf-font-mono);font-size: 11px;letter-spacing: 0.16em;text-transform: uppercase;color: #8a7361;margin-bottom: 24px;}
.cs-milestones__list {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;}
.cs-milestones__item {display: grid;grid-template-columns: 76px minmax(0, 1fr);gap: 22px;align-items: start;}
.cs-milestones__year {font-family: var(--spf-font-serif);font-size: 26px;line-height: 1.2;color: var(--spf-orange);padding-top: 2px; /* align baseline with H3 */flex-shrink: 0;}
.cs-milestones__content {border-left: 1px solid rgba(234, 91, 12, 0.25);padding-left: 24px;padding-bottom: 26px;}
.cs-milestones__item--last .cs-milestones__content {border-left-color: transparent;padding-bottom: 0; /* no bottom padding on final entry */}
.cs-milestones__title {margin: 0 0 6px;font-size: 18px;font-weight: 600;letter-spacing: -0.01em;color: var(--spf-brown);line-height: 1.3;}
.cs-milestones__body {margin: 0;font-size: 15.5px;line-height: 1.6;color: #6b5240;font-weight: 300;}

/* Dark section overrides */
.cs--bg-brown .cs-milestones__heading { color: rgba(255, 247, 240, 0.45); }
.cs--bg-brown .cs-milestones__year    { color: var(--spf-orange-light); }
.cs--bg-brown .cs-milestones__content { border-left-color: rgba(247, 169, 74, 0.3); }
.cs--bg-brown .cs-milestones__item--last .cs-milestones__content { border-left-color: transparent; }
.cs--bg-brown .cs-milestones__title   { color: var(--spf-cream); }
.cs--bg-brown .cs-milestones__body    { color: rgba(255, 247, 240, 0.65); }

/* ── Responsive — tablet 900px ── */
@media (max-width: 900px) {
  /* Slightly tighter year column */
  .cs-milestones__item {grid-template-columns: 60px minmax(0, 1fr);gap: 16px;}
  .cs-milestones__year {font-size: 22px;}
  .cs-milestones__content {padding-bottom: 22px;}
}

/* ── Responsive — mobile 600px ── */
@media (max-width: 600px) {
  /* Stack year above content — no side-by-side grid */
  .cs-milestones__item {grid-template-columns: 1fr;gap: 6px;}
  .cs-milestones__year {font-size: 20px;padding-top: 0;}
  .cs-milestones__content {border-left: none;border-top: 1px solid rgba(234, 91, 12, 0.25);padding-left: 0;padding-top: 12px;padding-bottom: 24px;}
  .cs-milestones__item--last .cs-milestones__content {border-top-color: transparent;padding-bottom: 0;}
  .cs-milestones__title {font-size: 16.5px;}
}

/*--------------------------------------------------------------
# Process Steps Section (process_steps.php)
# "02 — How We Work" — section header, wide banner, steps grid
--------------------------------------------------------------*/

/* ── Section backgrounds ── */
.ps--bg-cream {background: var(--spf-cream);}
.ps--bg-cream-white {background: var(--spf-cream-white);}
.ps--bg-cream-mid {background: var(--spf-cream-mid);}
.ps--bg-brown {background: var(--spf-brown);}

/* ── Section outer padding ── */
.process-steps {padding: clamp(72px, 10vw, 104px) clamp(20px, 4vw, 40px);}

/* ── Inner container (max-width via .pranhir-container) ── */
.process-steps__inner {display: flex;flex-direction: column;gap: 40px;}

/* ══════════════════════════════════════════════════════════════
   HEADER ROW
   Left: section label + H2   |   Right: intro paragraph
   ══════════════════════════════════════════════════════════════ */
.process-steps__header {display: flex;flex-wrap: wrap;align-items: flex-end;justify-content: space-between;gap: 24px;}
.process-steps__header-left {min-width: 0;}

/* Section label — DM Mono, orange, uppercase */
.process-steps__label {font-family: var(--spf-font-mono);font-size: 11.5px;letter-spacing: 0.18em;text-transform: uppercase;color: var(--spf-orange);margin-bottom: 18px;}
.ps--bg-brown .process-steps__label {color: var(--spf-orange-light);}
.process-steps__heading {margin: 0;font-size: clamp(34px, 3.5vw, 52px);line-height: 1.06;letter-spacing: -0.025em;font-weight: 700;color: var(--spf-brown);max-width: 640px;}
.ps--bg-brown .process-steps__heading {color: var(--spf-cream);}

/* Intro paragraph (right-aligned beside the heading) */
.process-steps__intro {margin: 0;max-width: 330px;font-size: 15px;line-height: 1.65;color: #6b5240;font-weight: 300;align-self: flex-end;}
.ps--bg-brown .process-steps__intro {color: rgba(255, 247, 240, 0.72);}

/* ══════════════════════════════════════════════════════════════
   BANNER IMAGE
   Wide, fixed height, rounded corners, gradient overlay + caption
   ══════════════════════════════════════════════════════════════ */
.process-steps__banner {position: relative;width: 100%;height: 340px;border-radius: 26px;overflow: hidden;background: #f6e7d8;}
.process-steps__banner-img {display: block;width: 100%;height: 100%;object-fit: cover;border-radius: 0;}

/* Left-to-right dark gradient so caption text is legible */
.process-steps__banner-overlay {position: absolute;inset: 0;background: linear-gradient(  90deg,  rgba(36, 21, 12, 0.66) 0%,  rgba(36, 21, 12, 0.12) 55%,  rgba(36, 21, 12, 0) 100%);pointer-events: none;}
.process-steps__banner-caption {position: absolute;left: 34px;bottom: 30px;max-width: 440px;pointer-events: none;}
.process-steps__banner-caption-label {font-family: var(--spf-font-mono);font-size: 11px;letter-spacing: 0.16em;text-transform: uppercase;color: var(--spf-orange-light);margin-bottom: 8px;}
.process-steps__banner-caption-text {font-size: 20px;line-height: 1.35;font-weight: 500;color: var(--spf-cream);}

/* ══════════════════════════════════════════════════════════════
   STEPS GRID
   auto-fit columns, min 230px, gap 26px
   ══════════════════════════════════════════════════════════════ */
.process-steps__grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));gap: 26px;}
.process-steps__step {min-width: 0;padding-top: 22px;border-top: 2px solid rgba(234, 91, 12, 0.35);}
.process-steps__step--active {border-top-color: var(--spf-orange);}
.process-steps__step-number {font-family: var(--spf-font-mono);font-size: 12px;letter-spacing: 0.14em;text-transform: uppercase;color: var(--spf-orange);margin-bottom: 12px;}
.ps--bg-brown .process-steps__step-number {color: var(--spf-orange-light);}
.process-steps__step-title {margin: 0 0 8px;font-size: 19px;font-weight: 600;letter-spacing: -0.01em;color: var(--spf-brown);line-height: 1.25;}
.ps--bg-brown .process-steps__step-title {color: var(--spf-cream);}
.process-steps__step-text {margin: 0;font-size: 15px;line-height: 1.6;color: #6b5240;font-weight: 300;}
.ps--bg-brown .process-steps__step-text {color: rgba(255, 247, 240, 0.72);}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* Tablet: banner height reduces, caption adjusts */
@media (max-width: 900px) {
  .process-steps__banner {height: 260px;border-radius: 20px;}
  .process-steps__banner-caption {left: 24px;bottom: 20px;max-width: 320px;}
  .process-steps__banner-caption-text {font-size: 17px;}
  .process-steps__header {flex-direction: column;align-items: flex-start;gap: 16px;}
  .process-steps__intro {max-width: 100%;align-self: auto;}
  .process-steps__grid {grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));gap: 20px;}
}

/* Mobile: everything stacks, banner becomes shorter */
@media (max-width: 600px) {
  .process-steps {padding-top: clamp(56px, 8vw, 72px);padding-bottom: clamp(56px, 8vw, 72px);}
  .process-steps__inner {gap: 28px;}
  .process-steps__banner {height: 200px;border-radius: 16px;}
  .process-steps__banner-caption {left: 18px;bottom: 16px;max-width: 260px;}
  .process-steps__banner-caption-label {font-size: 10px;margin-bottom: 6px;}
  .process-steps__banner-caption-text {font-size: 15px;}
  .process-steps__grid {grid-template-columns: 1fr;gap: 16px;}
  .process-steps__step {padding-top: 16px;}
}

/*--------------------------------------------------------------
# Impact Stats Section (impact_stats.php)
# "Nine years, counted honestly."
# Dark background, animated counters, bordered stat-card grid
--------------------------------------------------------------*/
.impact-stats {position: relative;padding: clamp(72px, 10vw, 104px) clamp(20px, 4vw, 40px);background: var(--spf-brown);overflow: hidden;}
.impact-stats__ring {position: absolute;top: -320px;left: 50%;width: 900px;height: 900px;margin-left: -450px;border-radius: 50%;background: repeating-conic-gradient(  from 0deg,  rgba(247, 169, 74, 0.14) 0deg 2deg,  rgba(247, 169, 74, 0) 2deg 8deg);-webkit-mask-image: radial-gradient(  circle,  rgba(0, 0, 0, 0) 30%,  rgba(0, 0, 0, 1) 44%,  rgba(0, 0, 0, 0) 72%);mask-image: radial-gradient(  circle,  rgba(0, 0, 0, 0) 30%,  rgba(0, 0, 0, 1) 44%,  rgba(0, 0, 0, 0) 72%);animation: spinSlow 240s linear infinite reverse;pointer-events: none;}
.impact-stats__inner {position: relative;display: flex;flex-direction: column;gap: 56px;}
/* ══════════════════════════════════════════════════════════════
   HEADER ROW
   H2 left (max 620px)  |  intro paragraph right (max 340px)
   ══════════════════════════════════════════════════════════════ */
.impact-stats__header {display: flex;flex-wrap: wrap;align-items: flex-end;justify-content: space-between;gap: 24px;}
.impact-stats__heading {margin: 0;font-size: clamp(32px, 3.2vw, 46px);line-height: 1.08;letter-spacing: -0.025em;font-weight: 700;color: var(--spf-cream);max-width: 620px;}
.impact-stats__intro {margin: 0;max-width: 340px;font-size: 15px;line-height: 1.65;color: rgba(255, 247, 240, 0.62);font-weight: 300;align-self: flex-end;}

/* ══════════════════════════════════════════════════════════════
   STATS GRID
   auto-fit columns, 1px gap creates divider lines between cards,
   outer border + rounded corners on the grid wrapper
   ══════════════════════════════════════════════════════════════ */
.impact-stats__grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));gap: 1px;background: rgba(  255,  247,  240,  0.14); /* 1px gap fills with this — acts as divider */border: 1px solid rgba(255, 247, 240, 0.14);border-radius: 22px;overflow: hidden;}
.impact-stats__card {padding: 38px 30px;background: var(  --spf-brown);display: flex;flex-direction: column;gap: 0;transition: background 0.2s ease;}
.impact-stats__card:hover {background: #2e1a0f;}
.impact-stats__number {font-size: clamp(40px, 4.2vw, 60px);font-weight: 700;letter-spacing: -0.03em;color: var(--spf-orange-light);line-height: 1;margin-bottom: 0;}

/* Card title — white, medium weight */
.impact-stats__card-title {margin-top: 12px;font-size: 15px;font-weight: 500;color: var(--spf-cream);line-height: 1.4;}
.impact-stats__card-desc {margin-top: 6px;font-size: 13.5px;color: rgba(255, 247, 240, 0.5);font-weight: 300;line-height: 1.5;}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .impact-stats__header {flex-direction: column;align-items: flex-start;gap: 16px;}
  .impact-stats__intro {max-width: 100%;align-self: auto;}
  .impact-stats__grid {grid-template-columns: repeat(2, 1fr);}
  .impact-stats__card {padding: 30px 24px;}
}

@media (max-width: 600px) {
  .impact-stats {padding-top: clamp(56px, 8vw, 72px);padding-bottom: clamp(56px, 8vw, 72px);}
  .impact-stats__inner {gap: 36px;}
  .impact-stats__grid {grid-template-columns: 1fr;border-radius: 16px;}
  .impact-stats__card {padding: 26px 20px;}
  .impact-stats__number {font-size: clamp(36px, 10vw, 48px);}
  .impact-stats__ring {display: none;}
}

/*--------------------------------------------------------------
# Program Cards Section (program_cards.php)
# "03 — What We Do" — programme card grid
--------------------------------------------------------------*/
/* ── Section backgrounds ── */
.pc--bg-cream {background: var(--spf-cream);}
.pc--bg-cream-white {background: var(--spf-cream-white);}
.pc--bg-cream-mid {background: var(--spf-cream-mid);}
.program-cards {padding: clamp(72px, 10vw, 110px) clamp(20px, 4vw, 40px);}
.program-cards__inner {display: flex;flex-direction: column;gap: 50px;}

/* ══════════════════════════════════════════════════════════════
   SECTION HEADER
   Left: label + H2  |  Right: "See all field reports →" link
   ══════════════════════════════════════════════════════════════ */
.program-cards__header {display: flex;flex-wrap: wrap;align-items: flex-end;justify-content: space-between;gap: 24px;}
.program-cards__header-left {min-width: 0;}
.program-cards__label {font-family: var(--spf-font-mono);font-size: 11.5px;letter-spacing: 0.18em;text-transform: uppercase;color: var(--spf-orange);margin-bottom: 18px;}
.program-cards__heading {margin: 0;max-width: 620px;}

/* Header section description — used in board/people variant (About page).
   Sits right of the H2 in the header flex row, max 380px wide. */
.program-cards__header-desc {margin: 0;max-width: 380px;font-size: 16px;line-height: 1.65;color: #5c4634;font-weight: 300;align-self: flex-end;}
.program-cards__header-link {font-size: 15.5px;font-weight: 600;color: var(--spf-orange-dark);text-decoration: none;border-bottom: 1.5px solid rgba(178, 60, 5, 0.35);padding-bottom: 3px;align-self: flex-end;transition:  color 0.2s ease,  border-color 0.2s ease;white-space: nowrap;}
.program-cards__header-link:hover {color: var(--spf-orange);border-bottom-color: var(--spf-orange);}

/* ══════════════════════════════════════════════════════════════
   CARDS GRID
   auto-fit with min 260px — matches design exactly
   ══════════════════════════════════════════════════════════════ */
.program-cards__grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));gap: 22px;}

/* ══════════════════════════════════════════════════════════════
   INDIVIDUAL CARD
   White background, rounded 22px, shadow, hover lift
   ══════════════════════════════════════════════════════════════ */
.program-card {display: flex;flex-direction: column;background: #fff;border-radius: 22px;overflow: hidden;border: 1px solid rgba(36, 21, 12, 0.07);box-shadow: 0 18px 40px -30px rgba(36, 21, 12, 0.5);transition:  transform 0.25s ease,  box-shadow 0.25s ease;}
.program-card:hover {transform: translateY(-6px);box-shadow: 0 30px 56px -30px rgba(36, 21, 12, 0.42);}
.program-card__image-wrap {position: relative;width: 100%;height: 210px;background: #f6e7d8; /* warm fallback while image loads */flex-shrink: 0;}
.program-card__image {display: block;width: 100%;height: 100%;object-fit: cover;border-radius: 0;}
.program-card__body {padding: 26px 24px 28px;display: flex;flex-direction: column;gap: 10px;flex: 1;}

/* Category tag — DM Mono, orange, uppercase */
.program-card__category {font-family: var(--spf-font-mono);font-size: 10.5px;letter-spacing: 0.16em;text-transform: uppercase;color: var(--spf-orange);}
.program-card__title {margin: 0;font-size: 20px;font-weight: 600;letter-spacing: -0.01em;color: var(--spf-brown);line-height: 1.3;}
.program-card__desc {margin: 0;font-size: 15px;line-height: 1.6;color: #6b5240;font-weight: 300;flex: 1;}
.program-card__cta {font-size: 14.5px;font-weight: 600;color: var(--spf-orange-dark);text-decoration: none;margin-top: auto;transition: color 0.2s ease;}
.program-card__cta:hover {color: var(--spf-orange);}
.program-after-desc{margin: 0px;font-family: var(--spf-font-mono);font-size: 12.5px;letter-spacing: 0.06em;color: rgb(138, 115, 97);opacity: 1;transform: none;transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);}

/*--------------------------------------------------------------
# "04 — From the field" (field_stories.php)
# Testimonial slider with image mosaic and controls
--------------------------------------------------------------*/

.field-stories {padding: clamp(72px, 10vw, 110px) clamp(20px, 4vw, 40px);}
.field-stories--bg-cream {background: var(--spf-cream);}
.field-stories--bg-cream-white {background: var(--spf-cream-white);}
.field-stories--bg-cream-mid {background: var(--spf-cream-mid);}
.field-stories__inner {display: flex;flex-direction: column;gap: 34px;}
.field-stories__header {display: flex;flex-wrap: wrap;align-items: flex-end;justify-content: space-between;gap: 24px;}
.field-stories__header-left {min-width: 0;}
.field-stories__label {font-family: var(--spf-font-mono);font-size: 11.5px;letter-spacing: 0.18em;text-transform: uppercase;color: var(--spf-orange-dark);margin-bottom: 22px;}
.field-stories__heading {margin: 0;max-width: 620px;}
.field-stories__intro {margin: 0;max-width: 340px;font-size: 15px;line-height: 1.65;color: #6b5240;font-weight: 300;}
.field-stories__shell {display: flex;flex-direction: column;gap: 18px;}
.field-stories__viewport {border-radius: 26px;scroll-snap-type: x mandatory;scroll-behavior: smooth;scrollbar-width: none;-ms-overflow-style: none;}
.field-stories__viewport::-webkit-scrollbar {display: none;}
.field-stories__track {display: grid;grid-auto-flow: column;grid-auto-columns: 100%;width: 100%;}
.field-stories__slide {display: grid;grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));gap: clamp(28px, 4vw, 64px);align-items: center;padding: 0;background: transparent;border: 0;border-radius: 0;box-shadow: none;scroll-snap-align: start;}
.field-stories__visual {min-width: 0;}
.field-stories__main-card {position: relative;height: 520px;border-radius: 26px 26px 200px 200px;background: #f6e7d8;box-shadow: 0 40px 80px -44px rgba(36, 21, 12, 0.5);}
.field-stories__main-image {display: block;width: 100%;height: 100%;object-fit: cover;border-radius: 26px 26px 200px 200px;}
.field-stories__main-copy {position: absolute;right: -24px;left: auto;top: 36px;padding: 18px 22px;background: var(--spf-orange);border-radius: 18px;box-shadow: 0 24px 44px -22px rgba(178, 60, 5, 0.8);max-width: 160px;}
.field-stories__main-copy-title {font-size: 28px;font-weight: 700;color: #fff;letter-spacing: -0.02em;line-height: 1;margin-bottom: 6px;}
.field-stories__main-copy-text {font-size: 12.5px;color: rgba(255, 255, 255, 0.88);font-weight: 400;line-height: 1.45;}
.field-stories__content {min-width: 0;display: flex;flex-direction: column;gap: 0;padding-top: 8px;}
.field-stories__label--quote {margin-bottom: 22px;}
.field-stories__quote {margin: 0 0 28px;font-family: var(--spf-font-serif);font-style: italic;font-size: clamp(28px, 3vw, 40px);line-height: 1.24;letter-spacing: -0.01em;color: var(--spf-brown);quotes: "“" "”" "‘" "’";}
.field-stories__quote-mark {font-family: var(--spf-font-serif);}
.field-stories__person {display: flex;align-items: center;gap: 14px;margin-bottom: 34px;}
.field-stories__avatar {width: 52px;height: 52px;border-radius: 50%;overflow: hidden;background: #f6e7d8;flex: none;}
.field-stories__avatar-img {display: block;width: 100%;height: 100%;object-fit: cover;}
.field-stories__name {font-size: 15.5px;font-weight: 600;color: var(--spf-brown);}
.field-stories__role {font-size: 13.5px;color: #7a6250;font-weight: 300;margin-top: 2px;}
.field-stories__thumbnails {display: flex;gap: 14px;flex-wrap: wrap;}
.field-stories__thumb {position: relative;width: 120px;height: 100px;border-radius: 14px;overflow: hidden;background: #f6e7d8;border: 1px solid rgba(36, 21, 12, 0.06);display: flex;align-items: center;justify-content: center;text-align: center;/* padding: 10px; */color: var(--spf-orange-dark);font-size: 13.5px;font-weight: 600;line-height: 1.35;text-decoration: none;}
.field-stories__thumb-img {display: block;width: 100%;height: 100%;object-fit: cover;}
.field-stories__thumb--link {border: 1.5px dashed rgba(178, 60, 5, 0.4);background: transparent;}
.field-stories__controls {display: flex;align-items: center;justify-content: center;gap: 14px;}
.field-stories__mobile-controls {display: none;}
.field-stories__button {appearance: none;border: 1.5px solid rgba(36, 21, 12, 0.16);background: #fff;color: var(--spf-brown);font: inherit;font-size: 14.5px;font-weight: 600;padding: 12px 18px;border-radius: var(--spf-radius-pill);cursor: pointer;transition:  transform 0.2s ease,  border-color 0.2s ease,  background 0.2s ease,  color 0.2s ease;}
.field-stories__button:hover {transform: translateY(-2px);border-color: rgba(234, 91, 12, 0.3);color: var(--spf-orange-dark);}
.field-stories__dots {display: flex;align-items: center;gap: 8px;}
.field-stories__dot {width: 10px;height: 10px;border-radius: 50%;border: 0;background: rgba(36, 21, 12, 0.18);cursor: pointer;padding: 0;transition:  transform 0.2s ease,  background 0.2s ease;}
.field-stories__dot.is-active {background: var(--spf-orange);transform: scale(1.18);}

@media (max-width: 900px) {
  .field-stories__slide {grid-template-columns: 1fr;}
  .field-stories__main-card {height: 420px;}
  .field-stories__main-copy {right: 16px;left: auto;}
}

@media (max-width: 600px) {
  .field-stories {padding-top: clamp(56px, 8vw, 72px);padding-bottom: clamp(56px, 8vw, 72px);}
  .field-stories__inner {gap: 26px;}
  .field-stories__main-card {height: 360px;border-radius: 180px 180px 24px 24px;}
  .field-stories__main-copy {right: 16px;left: auto;top: 16px;padding: 14px 16px;max-width: 140px;}
  .field-stories__main-copy-title {font-size: 22px;}
  .field-stories__controls {flex-wrap: wrap;}
  .field-stories__mobile-controls {display: flex;align-items: center;justify-content: center;gap: 14px;}
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .program-cards__header {flex-direction: column;align-items: flex-start;gap: 16px;}
  .program-cards__header-link {align-self: auto;}
  .program-cards__grid {grid-template-columns: repeat(2, 1fr);gap: 18px;}
}

@media (max-width: 600px) {
  .program-cards {padding-top: clamp(56px, 8vw, 72px);padding-bottom: clamp(56px, 8vw, 72px);}
  .program-cards__inner {gap: 32px;}
  .program-cards__grid {grid-template-columns: 1fr;gap: 16px;}
  .program-card__image-wrap {height: 180px;}
}

/*--------------------------------------------------------------
# Photo Journal (photo_journal.php)
# Masonry-style photo grid — tall tiles span 2 rows.
# Header row: label + H2 left, archive link right.
--------------------------------------------------------------*/
.photo-journal {padding: clamp(72px, 10vw, 104px) clamp(20px, 4vw, 40px);}
.photo-journal--bg-cream-white {background: var(--spf-cream-white);}
.photo-journal--bg-cream {background: var(--spf-cream);}
.photo-journal--bg-cream-mid {background: var(--spf-cream-mid);}

/* pj-- aliases used by bg_map */
.pj--bg-cream-white { background: var(--spf-cream-white); }
.pj--bg-cream       { background: var(--spf-cream); }
.pj--bg-cream-mid   { background: var(--spf-cream-mid); }

/* ── Inner container ── */
.photo-journal__inner {display: flex;flex-direction: column;gap: 40px;}
.photo-journal__header {display: flex;flex-wrap: wrap;align-items: flex-end;justify-content: space-between;gap: 24px;}
.photo-journal__header-left {min-width: 0;}
.photo-journal__label {font-family: var(--spf-font-mono);font-size: 11.5px;letter-spacing: 0.18em;text-transform: uppercase;color: var(--spf-orange);margin-bottom: 18px;}
.photo-journal__heading {margin: 0;font-size: clamp(34px, 3.5vw, 52px);line-height: 1.06;letter-spacing: -0.025em;font-weight: 700;color: var(--spf-brown);max-width: 620px;}
.photo-journal__archive-link {font-size: 15.5px;font-weight: 600;color: var(--spf-orange-dark);border-bottom: 1.5px solid rgba(178, 60, 5, 0.35);padding-bottom: 3px;white-space: nowrap;transition: color 0.2s ease, border-color 0.2s ease;}
.photo-journal__archive-link:hover {color: var(--spf-orange);border-color: rgba(234, 91, 12, 0.5);}

/* ── Photo grid ── */
/*
  Design uses:
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
    grid-auto-rows: 200px
    gap: 16px
  Tiles 1 & 4 have grid-row: span 2  (→ tall_card = true)
*/
.photo-journal__grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));grid-auto-rows: 200px;gap: 16px;}
.photo-journal__tile {position: relative;min-width: 0;border-radius: 20px;overflow: hidden;background: #f6e7d8;}
.photo-journal__tile--tall {grid-row: span 2;}
.photo-journal__tile-img {display: block;width: 100%;height: 100%;object-fit: cover;}

/* Dark gradient overlay — bottom 58% fade to dark */
.photo-journal__tile-overlay {position: absolute;inset: 0;background: linear-gradient(  180deg,  rgba(36, 21, 12, 0) 42%,  rgba(36, 21, 12, 0.78) 100%);pointer-events: none;}
.photo-journal__tile-copy {position: absolute;left: 16px;bottom: 14px;right: 16px;pointer-events: none;}
.photo-journal__tile-tag {font-family: var(--spf-font-mono);font-size: 10px;letter-spacing: 0.14em;text-transform: uppercase;color: var(--spf-orange-light);margin-bottom: 4px;}
.photo-journal__tile-caption {font-size: 14.5px;line-height: 1.4;font-weight: 500;color: var(--spf-cream);}
.photo-journal__tile {transition: transform 0.25s ease, box-shadow 0.25s ease;}
.photo-journal__tile:hover {transform: translateY(-4px);box-shadow: 0 24px 48px -20px rgba(36, 21, 12, 0.36);}

/* ── Responsive — tablet 900px ── */
@media (max-width: 900px) {
  .photo-journal__grid {grid-template-columns: repeat(2, 1fr);grid-auto-rows: 180px;}
  .photo-journal__inner {gap: 28px;}
}

/* ── Responsive — mobile 600px ── */
@media (max-width: 600px) {
  .photo-journal {padding-top: clamp(56px, 8vw, 72px);padding-bottom: clamp(56px, 8vw, 72px);}
  .photo-journal__inner {gap: 22px;}
  .photo-journal__grid {grid-template-columns: 1fr;grid-auto-rows: 220px;gap: 12px;}
  .photo-journal__tile--tall {grid-row: span 1;}
  .photo-journal__header {flex-direction: column;align-items: flex-start;gap: 16px;}
}

/*--------------------------------------------------------------
# Upcoming Events (upcoming_events.php)
# 06 — What's next
# Vertical stack of 4-column horizontal event cards.
# Columns: date | thumb | text | cta-button
--------------------------------------------------------------*/
.upcoming-events {padding: clamp(72px, 10vw, 104px) clamp(20px, 4vw, 40px);}
.ue--bg-cream-mid   { background: var(--spf-cream-mid); }
.ue--bg-cream-white { background: var(--spf-cream-white); }
.ue--bg-cream       { background: var(--spf-cream); }

.upcoming-events__inner {display: flex;flex-direction: column;gap: 38px;}
.upcoming-events__header {display: flex;flex-direction: column;gap: 0;}
.upcoming-events__label {font-family: var(--spf-font-mono);font-size: 11.5px;letter-spacing: 0.18em;text-transform: uppercase;color: var(--spf-orange-dark);margin-bottom: 18px;}
.upcoming-events__heading {margin: 0;font-size: clamp(32px, 3.2vw, 46px);line-height: 1.08;letter-spacing: -0.025em;font-weight: 700;color: var(--spf-brown);}

/* ── Event list — vertical stack ── */
.upcoming-events__list {display: flex;flex-direction: column;gap: 14px;}

/* ── Single event card ── */
/*
  Design grid: auto  auto  minmax(0,1fr)  auto
               date  photo text           cta
  gap: 26px, padding: 20px
*/
.upcoming-events__card {display: grid;grid-template-columns: auto auto minmax(0, 1fr) auto;gap: 26px;align-items: center;padding: 20px;border-radius: 20px;background: var(--spf-cream-white);border: 1px solid rgba(36, 21, 12, 0.08);transition:  background 0.2s ease,  border-color 0.2s ease,  transform 0.2s ease;}
.upcoming-events__card:hover {background: var(--spf-cream-mid);border-color: rgba(234, 91, 12, 0.3);transform: translateY(-2px);}
.upcoming-events__date {text-align: center;min-width: 64px;}
.upcoming-events__day {font-size: 30px;font-weight: 700;letter-spacing: -0.02em;color: var(--spf-orange);line-height: 1;}
.upcoming-events__month {font-family: var(--spf-font-mono);font-size: 11px;letter-spacing: 0.14em;text-transform: uppercase;color: #8a7361;margin-top: 3px;}

/* ── Col 2: Photo thumbnail ── */
.upcoming-events__thumb-wrap {position: relative;width: 132px;height: 92px;border-radius: 14px;overflow: hidden;background: #f6e7d8;flex-shrink: 0;}
.upcoming-events__thumb-img {display: block;width: 100%;height: 100%;object-fit: cover;}

/* ── Col 3: Text block ── */
.upcoming-events__body {min-width: 0;}
.upcoming-events__tag {font-family: var(--spf-font-mono);font-size: 10.5px;letter-spacing: 0.16em;text-transform: uppercase;color: var(--spf-orange-dark);margin-bottom: 6px;}
.upcoming-events__title {margin: 0 0 5px;font-size: 19px;font-weight: 600;letter-spacing: -0.01em;color: var(--spf-brown);line-height: 1.3;}
.upcoming-events__desc {margin: 0;font-size: 14.5px;line-height: 1.55;color: #6b5240;font-weight: 300;}

/* ── Col 4: CTA button ── */
.upcoming-events__cta {flex-shrink: 0;}
.upcoming-events__btn {display: inline-flex;align-items: center;padding: 13px 22px;border-radius: var(--spf-radius-pill);border: 1.5px solid rgba(36, 21, 12, 0.16);font-size: 14.5px;font-weight: 600;color: var(--spf-brown);white-space: nowrap;text-decoration: none;transition:  background 0.2s ease,  border-color 0.2s ease,  color 0.2s ease;}
.upcoming-events__btn:hover {color: #fff;background: var(--spf-orange);border-color: var(--spf-orange);}

/* ── Responsive — tablet 900px ── */
/* Collapse to 3-col: hide thumb, stack text */
@media (max-width: 900px) {
  .upcoming-events__card {grid-template-columns: auto minmax(0, 1fr) auto;gap: 18px;}
  .upcoming-events__thumb-wrap {display: none;}
  .upcoming-events__day {font-size: 26px;}
}

/* ── Responsive — mobile 600px ── */
@media (max-width: 600px) {
  .upcoming-events {padding-top: clamp(56px, 8vw, 72px);padding-bottom: clamp(56px, 8vw, 72px);}
  .upcoming-events__card {grid-template-columns: auto minmax(0, 1fr);grid-template-rows: auto auto;gap: 14px 16px;align-items: start;}
  .upcoming-events__date {grid-column: 1;grid-row: 1;text-align: left;min-width: 0;display: flex;align-items: baseline;gap: 6px;}
  .upcoming-events__day {font-size: 24px;}
  .upcoming-events__month {margin-top: 0;}
  .upcoming-events__body {grid-column: 2;grid-row: 1;}
  .upcoming-events__cta {grid-column: 1 / -1;grid-row: 2;}
  .upcoming-events__btn {width: 100%;justify-content: center;}
}

/*--------------------------------------------------------------
# Card Grid (card_grid.php)
# Reusable grid — action / plain / numbered card styles.
# Admin picks 1–4 columns; CSS handles responsive collapse.
--------------------------------------------------------------*/

/* ── Section wrapper ── */
.card-grid {padding: clamp(72px, 10vw, 110px) clamp(20px, 4vw, 40px);}
.cg--bg-cream-white { background: var(--spf-cream-white); }
.cg--bg-cream       { background: var(--spf-cream); }
.cg--bg-cream-mid   { background: var(--spf-cream-mid); }
.cg--bg-brown       { background: var(--spf-brown); }

.card-grid__inner {display: flex;flex-direction: column;gap: 48px;}
.card-grid__header {display: flex;flex-direction: column;}
.cg__header--left {align-items: flex-start;max-width: 900px;}
.cg__header--center {align-items: center;text-align: center;max-width: 620px;margin-inline: auto;}
.card-grid__label {font-family: var(--spf-font-mono);font-size: 11.5px;letter-spacing: 0.18em;text-transform: uppercase;color: var(--spf-orange);margin-bottom: 20px;}
.card-grid__heading {margin: 0;font-size: clamp(32px, 3.4vw, 50px);line-height: 1.06;letter-spacing: -0.025em;font-weight: 700;color: var(--spf-brown);}
.card-grid__subtitle {margin: 16px 0 0;font-size: 17px;line-height: 1.65;color: #5c4634;font-weight: 300;}
.cg--bg-brown .card-grid__label   { color: var(--spf-orange-light); }
.cg--bg-brown .card-grid__heading { color: var(--spf-cream); }
.cg--bg-brown .card-grid__subtitle{ color: rgba(255, 247, 240, 0.72); }

/* ── Grid — column count classes ── */
/*
  .cg__grid--cols-1  → 1 column  (full width)
  .cg__grid--cols-2  → 2 columns
  .cg__grid--cols-3  → 3 columns  ← default for most sections
  .cg__grid--cols-4  → 4 columns
  All collapse → 2-col at 900px → 1-col at 600px
*/
.card-grid__grid {display: grid;gap: 22px;}
.cg__grid--cols-1 { grid-template-columns: 1fr; }
.cg__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.cg__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.cg__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ══════════════════════════════════════════════════════════════
   BASE CARD — shared across all three styles
   ══════════════════════════════════════════════════════════════ */
.cg-card {border-radius: 20px;}
.cg-card--bg-cream-white {background: var(--spf-cream-white);border: 1px solid rgba(234, 91, 12, 0.14);}
.cg-card--bg-cream {background: var(--spf-cream);border: 1px solid rgba(234, 91, 12, 0.18);}
.cg-card--bg-orange {background: var(--spf-orange);border: none;box-shadow: 0 28px 60px -34px rgba(178, 60, 5, 0.9);color: #fff;}
.cg-card--bg-brown {background: var(--spf-brown);border: none;}

/* ══════════════════════════════════════════════════════════════
   ACTION CARD  (.cg-card--action)
   Design: Get Involved — icon diamond · H3 · body · meta · CTA
   ══════════════════════════════════════════════════════════════ */
.cg-card--action {display: flex;flex-direction: column;gap: 14px;padding: 36px 32px 32px;border-radius: 24px;}
.cg-card__icon {display: block;width: 12px;height: 12px;transform: rotate(45deg);margin-bottom: 8px;flex-shrink: 0;}
.cg-card__icon--white  { background: #fff; }
.cg-card__icon--orange { background: var(--spf-orange); }
.cg-card__icon--light  { background: var(--spf-orange-light); }

.cg-card--action .cg-card__title {margin: 0;font-size: 24px;font-weight: 600;letter-spacing: -0.015em;line-height: 1.25;}
.cg-card--action .cg-card__body {margin: 0;font-size: 15.5px;line-height: 1.62;font-weight: 300;flex: 1;}
.cg-card__meta {font-family: var(--spf-font-mono);font-size: 12px;letter-spacing: 0.1em;text-transform: uppercase;margin: 4px 0 6px;}
.cg-card__cta-wrap {margin-top: auto;}
.cg-card__cta {display: inline-flex;align-items: center;justify-content: space-between;width: 100%;padding: 15px 22px;border-radius: var(--spf-radius-pill);font-size: 15.5px;font-weight: 600;text-decoration: none;transition: opacity 0.2s ease, transform 0.2s ease;}
.cg-card__cta:hover {opacity: 0.88;transform: translateY(-1px);}

/* ── Per-background colour overrides for action cards ── */

/* Orange card */
.cg-card--bg-orange .cg-card__title { color: #fff; }
.cg-card--bg-orange .cg-card__body  { color: rgba(255, 255, 255, 0.88); }
.cg-card--bg-orange .cg-card__meta  { color: rgba(255, 255, 255, 0.65); }
.cg-card--bg-orange .cg-card__cta   {background: #fff;color: var(--spf-orange-dark);}

/* Cream card */
.cg-card--bg-cream .cg-card__title { color: var(--spf-brown); }
.cg-card--bg-cream .cg-card__body  { color: #6b5240; }
.cg-card--bg-cream .cg-card__meta  { color: #8a7361; }
.cg-card--bg-cream .cg-card__cta   {background: var(--spf-brown);color: #fff;}

/* Brown (dark) card */
.cg-card--bg-brown .cg-card__title { color: var(--spf-cream); }
.cg-card--bg-brown .cg-card__body  { color: rgba(255, 247, 240, 0.72); }
.cg-card--bg-brown .cg-card__meta  { color: rgba(255, 247, 240, 0.5); }
.cg-card--bg-brown .cg-card__cta   {background: var(--spf-orange-light);color: var(--spf-brown);}

/* Cream-white card */
.cg-card--bg-cream-white .cg-card__title { color: var(--spf-brown); }
.cg-card--bg-cream-white .cg-card__body  { color: #6b5240; }
.cg-card--bg-cream-white .cg-card__meta  { color: #8a7361; }
.cg-card--bg-cream-white .cg-card__cta   {background: var(--spf-brown);color: #fff;}

/* ══════════════════════════════════════════════════════════════
   PLAIN CARD  (.cg-card--plain)
   Design: Objects of Trust — DM Mono tag + body paragraph
   ══════════════════════════════════════════════════════════════ */
.cg-card--plain {padding: 36px;}
.cg-card__tag {font-family: var(--spf-font-mono);font-size: 11px;letter-spacing: 0.16em;text-transform: uppercase;color: #8a7361;margin-bottom: 14px;}
.cg-card__body--plain {margin: 0;font-size: 19px;line-height: 1.55;font-weight: 400;color: var(--spf-brown);}

/* Dark (brown) plain card overrides */
.cg-card--bg-brown .cg-card__tag          { color: var(--spf-orange-light); }
.cg-card--bg-brown .cg-card__body--plain  {font-size: 16.5px;line-height: 1.62;font-weight: 300;color: rgba(255, 247, 240, 0.78);}

/* ══════════════════════════════════════════════════════════════
   NUMBERED CARD  (.cg-card--numbered)
   Design: What We Hold To — serif number | H3 + body (two-col)
   ══════════════════════════════════════════════════════════════ */
.cg-card--numbered {padding: 30px;}

/* Two-column inner layout: number auto | text 1fr */
.cg-card__numbered-inner {display: grid;grid-template-columns: auto minmax(0, 1fr);gap: 22px;align-items: start;}
.cg-card__number {font-family: var(--spf-font-serif);font-size: 40px;line-height: 1;color: var(--spf-orange);}
.cg-card--numbered .cg-card__title {margin: 0 0 8px;font-size: 21px;font-weight: 600;letter-spacing: -0.01em;color: var(--spf-brown);}
.cg-card--numbered .cg-card__body {margin: 0;font-size: 15.5px;line-height: 1.65;font-weight: 300;color: #6b5240;}

/* Dark card overrides (numbered) */
.cg-card--bg-brown.cg-card--numbered .cg-card__number { color: var(--spf-orange-light); }
.cg-card--bg-brown.cg-card--numbered .cg-card__title  { color: var(--spf-cream); }
.cg-card--bg-brown.cg-card--numbered .cg-card__body   { color: rgba(255, 247, 240, 0.72); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* ── Tablet 900px: all multi-col grids drop to 2 columns ── */
@media (max-width: 900px) {
  .cg__grid--cols-3,
  .cg__grid--cols-4 {grid-template-columns: repeat(2, 1fr);}
  .cg__header--center {max-width: 100%;}
}

/* ── Mobile 600px: everything goes single column ── */
@media (max-width: 600px) {
  .card-grid {padding-top: clamp(56px, 8vw, 72px);padding-bottom: clamp(56px, 8vw, 72px);}
  .card-grid__inner {gap: 32px;}
  .cg__grid--cols-2,
  .cg__grid--cols-3,
  .cg__grid--cols-4 {grid-template-columns: 1fr;}
  .cg-card__numbered-inner {grid-template-columns: 1fr;gap: 10px;}
  .cg-card__number {font-size: 32px;}
}

/*--------------------------------------------------------------
# FAQ Section (faq_section.php)
# 07 — Questions
# Narrow accordion stack — native <details>/<summary>.
# First item open by default. JS handles mutual-close.
--------------------------------------------------------------*/
.faq-section {padding: clamp(60px, 8vw, 96px) clamp(20px, 4vw, 40px) clamp(56px, 7vw, 84px);}
.faq--bg-cream-white { background: var(--spf-cream-white); }
.faq--bg-cream       { background: var(--spf-cream); }
.faq--bg-cream-mid   { background: var(--spf-cream-mid); }

/* ── Inner — max 900px centred, matching design ── */
.faq-section__inner {max-width: 900px;margin-inline: auto;display: flex;flex-direction: column;gap: 34px;}
.faq-section__header {display: flex;flex-direction: column;gap: 0;}
.faq-section__label {font-family: var(--spf-font-mono);font-size: 11.5px;letter-spacing: 0.18em;text-transform: uppercase;color: var(--spf-orange);margin-bottom: 18px;}
.faq-section__heading {margin: 0;font-size: clamp(30px, 3vw, 44px);line-height: 1.08;letter-spacing: -0.025em;font-weight: 700;color: var(--spf-brown);}
.faq-section__list {flex-direction: column;display: flex;gap: 12px;}

.faq-section__item {padding: 22px 24px;border-radius: 18px;background: var(--spf-cream);border: 1px solid rgba(36, 21, 12, 0.08);transition: background 0.2s ease, border-color 0.2s ease;}
.faq-section__item[open] {background: var(--spf-cream);border-color: rgba(234, 91, 12, 0.22);}

/* ── Summary row ── */
/* Remove default browser triangle */
.faq-section__item summary {list-style: none;}
.faq-section__item summary::-webkit-details-marker {display: none;}
.faq-section__summary {display: flex;justify-content: space-between;align-items: center;gap: 16px;cursor: pointer;user-select: none;}

/* ── Question text ── */
.faq-section__question {font-size: 17.5px;font-weight: 600;color: var(--spf-brown);letter-spacing: -0.01em;line-height: 1.35;}

/* ── +/× icon ── */
/*
  Built with CSS — no extra HTML.
  At rest:    + (two bars via pseudo-elements)
  When open:  vertical bar hidden → looks like ×
              achieved by rotating the whole icon 45deg
*/
.faq-section__icon {flex-shrink: 0;position: relative;width: 20px;height: 20px;color: var(--spf-orange);transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);}
.faq-section__icon::before,
.faq-section__icon::after {content: '';position: absolute;background: var(--spf-orange);border-radius: 2px;transition: opacity 0.2s ease;}
.faq-section__icon::before {width: 16px;height: 2px;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.faq-section__icon::after {width: 2px;height: 16px;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.faq-section__item[open] .faq-section__icon {transform: rotate(45deg);}
.faq-section__answer {overflow: hidden;}
.faq-section__answer-inner p {margin: 14px 0 4px;padding-bottom: 6px;font-size: 15.5px;line-height: 1.65;color: #6b5240;font-weight: 300;max-width: 760px;}

/* ── Smooth open/close animation ── */
/*
  Native <details> doesn't animate height natively.
  We animate the answer wrapper with a clip-path fade.
  JS adds/removes .is-closing for the close direction.
*/
/* Grid-rows technique: 0fr closed, 1fr open — pure CSS smooth animation */
.faq-section__answer {display: grid;grid-template-rows: 0fr;opacity: 0;transition:  grid-template-rows 0.34s cubic-bezier(0.4, 0, 0.2, 1),  opacity 0.28s ease;}
.faq-section__item[open] .faq-section__answer {grid-template-rows: 1fr;opacity: 1;}
.faq-section__answer-inner {overflow: hidden;}
.faq-section__item:not([open]):hover {border-color: rgba(234, 91, 12, 0.18);background: var(--spf-cream-mid);}
.faq-section__item:not([open]):hover .faq-section__question {color: var(--spf-orange-dark);}

/* ── Responsive ── */
@media (max-width: 600px) {
  .faq-section {padding-top: clamp(48px, 7vw, 60px);padding-bottom: clamp(48px, 7vw, 60px);}
  .faq-section__item {padding: 18px 18px;}
  .faq-section__question {font-size: 15.5px;}
  .faq-section__answer p {font-size: 14.5px;}
}

/*--------------------------------------------------------------
# Newsletter Subscribe (newsletter_subscribe.php)
# "One letter a month. No fundraising noise."
# Outer section has page bg. Inner card is gradient with
# a decorative spinning ring in the top-right corner.
--------------------------------------------------------------*/
.newsletter-subscribe {padding: 0 clamp(20px, 4vw, 40px) clamp(56px, 8vw, 90px);}
.ns--bg-cream-white { background: var(--spf-cream-white); }
.ns--bg-cream       { background: var(--spf-cream); }
.ns--bg-cream-mid   { background: var(--spf-cream-mid); }

/* ── Gradient card ── */
.newsletter-subscribe__card {position: relative;padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 48px);border-radius: 28px;background: linear-gradient(120deg, var(--spf-cream-mid) 0%, #f9dcc4 100%);overflow: hidden;}

/* ── Spinning ring decoration ── */
/*
  Design: 420×420px circle, top-right, partially off-card.
  Built with repeating-conic-gradient + radial-gradient mask.
  animation: spinSlow 200s linear infinite (already in global CSS).
*/
.newsletter-subscribe__ring {position: absolute;right: -120px;top: -140px;width: 420px;height: 420px;border-radius: 50%;background: repeating-conic-gradient(  from 0deg,  rgba(234, 91, 12, 0.3) 0deg 2deg,  rgba(234, 91, 12, 0)   2deg 8deg);-webkit-mask-image: radial-gradient(  circle,  rgba(0, 0, 0, 0)   28%,  rgba(0, 0, 0, 1)   42%,  rgba(0, 0, 0, 0)   74%);mask-image: radial-gradient(  circle,  rgba(0, 0, 0, 0)   28%,  rgba(0, 0, 0, 1)   42%,  rgba(0, 0, 0, 0)   74%);animation: spinSlow 200s linear infinite;pointer-events: none;}
.newsletter-subscribe__grid {position: relative;display: grid;grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));gap: 32px;align-items: center;}

/* ── Left: text block ── */
.newsletter-subscribe__heading {margin: 0 0 10px;font-size: clamp(26px, 2.6vw, 36px);line-height: 1.12;letter-spacing: -0.02em;font-weight: 700;color: var(--spf-brown);}
.newsletter-subscribe__subtitle {margin: 0;font-size: 16px;line-height: 1.6;color: #5c4634;font-weight: 300;max-width: 520px;}
.newsletter-subscribe__form {display: flex;gap: 10px;flex-wrap: wrap;}
input[type="email"].newsletter-subscribe__input {flex: 1;max-width: 260px;padding: 15px 20px;border-radius: var(--spf-radius-pill);border: 1.5px solid rgba(36, 21, 12, 0.16);background: rgba(255, 255, 255, 0.85);font-family: var(--spf-font-body);font-size: 15.5px;color: var(--spf-brown);outline: none;transition: border-color 0.2s ease, background 0.2s ease;}
.newsletter-subscribe__input:focus {border-color: rgba(234, 91, 12, 0.5);background: #fff;}
.newsletter-subscribe__input::placeholder {color: #a89080;}
.newsletter-subscribe__btn {padding: 15px 26px;border-radius: var(--spf-radius-pill);border: none;background: var(--spf-brown);color: #fff;font-family: var(--spf-font-body);font-size: 15.5px;font-weight: 600;cursor: pointer;white-space: nowrap;transition: background 0.2s ease, transform 0.2s ease;}
.newsletter-subscribe__btn:hover {background: var(--spf-orange);transform: translateY(-2px);}

/* ── Responsive ── */
@media (max-width: 600px) {
  .newsletter-subscribe__grid {grid-template-columns: 1fr;gap: 24px;}
  .newsletter-subscribe__form {flex-direction: column;}
  .newsletter-subscribe__input {min-width: 0;width: 100%;}
  .newsletter-subscribe__btn {width: 100%;text-align: center;}
  .newsletter-subscribe__ring {width: 260px;height: 260px;right: -80px;top: -80px;}
}

/*--------------------------------------------------------------
# Compliance Section (compliance_section.php)
# 05 — Registration & compliance
# Dark brown background. Six toggleable zones:
# label · heading · reg-table · budget-bars · downloads · policies
--------------------------------------------------------------*/

/* ── Section wrapper ── */
.compliance-section {background: var(--spf-brown); /* #24150C */padding: clamp(72px, 10vw, 110px) clamp(20px, 4vw, 40px);}
.compliance-section__inner {display: flex;flex-direction: column;gap: 0;}
.compliance-section__label {font-family: var(--spf-font-mono);font-size: 11.5px;letter-spacing: 0.18em;text-transform: uppercase;color: var(--spf-orange-light);margin-bottom: 20px;}
.compliance-section__heading {margin: 0 0 48px;max-width: 820px;font-size: clamp(32px, 3.4vw, 50px);line-height: 1.06;letter-spacing: -0.025em;font-weight: 700;color: var(--spf-cream);}

/* ══════════════════════════════════════════════════════════════
   TWO-COLUMN BODY
   Left: registration table  |  Right: budget + downloads
   ══════════════════════════════════════════════════════════════ */
.compliance-section__body {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 56px;align-items: start;margin-bottom: 0;}

/* ── Left column: registration key-value table ── */
.compliance-section__reg-table {min-width: 0;}
.compliance-section__reg-row {display: grid;grid-template-columns: minmax(0, 1fr) auto;gap: 16px;align-items: baseline;padding: 18px 0;border-bottom: 1px solid rgba(255, 247, 240, 0.14);}
.compliance-section__reg-row--last {border-bottom: none;}
.compliance-section__reg-key {font-size: 15.5px;color: rgba(255, 247, 240, 0.62);font-weight: 300;line-height: 1.5;}
.compliance-section__reg-val {font-family: var(--spf-font-mono);font-size: 14px;color: var(--spf-cream);white-space: nowrap;text-align: right;}
.compliance-section__right {min-width: 0;display: flex;flex-direction: column;gap: 34px;}
.compliance-section__budget {display: flex;flex-direction: column;}
.compliance-section__budget-label {font-family: var(--spf-font-mono);font-size: 11px;letter-spacing: 0.16em;text-transform: uppercase;color: var(--spf-orange-light);margin-bottom: 22px;}
.compliance-section__bars {display: flex;flex-direction: column;gap: 20px;}
.compliance-section__bar-item {display: flex;flex-direction: column;gap: 9px;}
.compliance-section__bar-header {display: flex;justify-content: space-between;align-items: baseline;}
.compliance-section__bar-label {font-size: 15.5px;color: var(--spf-cream);font-weight: 400;}
.compliance-section__bar-value {font-family: var(--spf-font-mono);font-size: 14px;color: var(--spf-orange-light);flex-shrink: 0;margin-left: 12px;}
.compliance-section__bar-track {height: 8px;border-radius: var(--spf-radius-pill);background: rgba(255, 247, 240, 0.12);overflow: hidden;}
.compliance-section__bar-fill {height: 100%;border-radius: var(--spf-radius-pill);background: linear-gradient(90deg, var(--spf-orange-light), var(--spf-orange));transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);}
.compliance-section__downloads {display: flex;flex-wrap: wrap;gap: 12px;}
.compliance-section__btn {display: inline-flex;align-items: center;gap: 9px;padding: 13px 24px;border-radius: var(--spf-radius-pill);font-size: 15px;font-weight: 600;text-decoration: none;transition:  background 0.2s ease,  border-color 0.2s ease,  color 0.2s ease,  transform 0.2s ease;}
.compliance-section__btn--primary {background: var(--spf-orange);color: #fff;border: 1.5px solid var(--spf-orange);}
.compliance-section__btn--primary:hover {background: var(--spf-orange-dark);border-color: var(--spf-orange-dark);color: #fff;transform: translateY(-2px);}
.compliance-section__btn--ghost {background: transparent;color: var(--spf-cream);border: 1.5px solid rgba(255, 247, 240, 0.28);font-weight: 500;}
.compliance-section__btn--ghost:hover {background: rgba(255, 247, 240, 0.08);border-color: rgba(255, 247, 240, 0.5);color: #fff;transform: translateY(-2px);}

/* ══════════════════════════════════════════════════════════════
   POLICY GRID — bottom zone
   Separated from body by a top border + top margin.
   ══════════════════════════════════════════════════════════════ */
.compliance-section__policies {display: grid;grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));gap: 32px;margin-top: 56px;padding-top: 34px;border-top: 1px solid rgba(255, 247, 240, 0.14);}
.compliance-section__policy {min-width: 0;}
.compliance-section__policy-title {margin: 0 0 8px;font-size: 17px;font-weight: 600;color: var(--spf-cream);line-height: 1.3;}
.compliance-section__policy-body {margin: 0;font-size: 14.5px;line-height: 1.6;color: rgba(255, 247, 240, 0.6);font-weight: 300;}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* ── Tablet 900px ── */
@media (max-width: 900px) {
  .compliance-section__body {grid-template-columns: 1fr;gap: 40px;}
  .compliance-section__heading {margin-bottom: 36px;}
  .compliance-section__policies {grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 24px;margin-top: 40px;padding-top: 28px;}
}

/* ── Mobile 600px ── */
@media (max-width: 600px) {
  .compliance-section {padding-top: clamp(56px, 8vw, 72px);padding-bottom: clamp(56px, 8vw, 72px);}
  .compliance-section__heading {font-size: clamp(28px, 7vw, 40px);margin-bottom: 28px;}
  .compliance-section__reg-row {grid-template-columns: 1fr;gap: 4px;padding: 14px 0;}
  .compliance-section__reg-val {text-align: left;color: var(--spf-orange-light);}
  .compliance-section__downloads {flex-direction: column;}
  .compliance-section__btn {justify-content: center;width: 100%;}
  .compliance-section__policies {grid-template-columns: 1fr;gap: 20px;margin-top: 32px;padding-top: 22px;}
}

/*--------------------------------------------------------------
# Blog Listing (blog_listing.php)
# Flexible content component — responsive card grid + load more
--------------------------------------------------------------*/

/* ── Section backgrounds ── */
.bl--bg-cream-white { background: var(--spf-cream-white); }
.bl--bg-cream       { background: var(--spf-cream); }
.bl--bg-cream-mid   { background: var(--spf-cream-mid); }

/* ── Section wrapper ── */
.blog-listing {padding: clamp(72px, 10vw, 110px) clamp(20px, 4vw, 40px);}
.blog-listing__inner {display: flex;flex-direction: column;gap: 48px;}
.blog-listing__header {display: flex;flex-direction: column;gap: 0;max-width: 760px;}
.blog-listing__label {font-family: var(--spf-font-mono);font-size: 11.5px;letter-spacing: 0.18em;text-transform: uppercase;color: var(--spf-orange);margin-bottom: 18px;}
.blog-listing__heading {margin: 0;font-size: clamp(32px, 3.4vw, 50px);line-height: 1.06;letter-spacing: -0.025em;font-weight: 700;color: var(--spf-brown);}
.blog-listing__desc {font-size: 17px;margin: 16px 0 0;line-height: 1.65;color: #5c4634;font-weight: 300;max-width: 600px;}

/* ══════════════════════════════════════════════════════════════
   BLOG CARD GRID
   3 columns desktop → 2 tablet → 1 mobile
   ══════════════════════════════════════════════════════════════ */
.blog-listing__grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 28px;}
.blog-card--hidden {display: none;}
.blog-card {display: flex;flex-direction: column;background: var(--spf-cream-white);border-radius: var(--spf-radius-card);overflow: hidden;border: 1px solid rgba(36, 21, 12, 0.07);box-shadow: 0 12px 32px -20px rgba(36, 21, 12, 0.28);transition: transform 0.25s ease, box-shadow 0.25s ease;}
.blog-card:hover {transform: translateY(-6px);box-shadow: 0 28px 56px -28px rgba(36, 21, 12, 0.38);}
.blog-card__image-link {display: block;text-decoration: none;}
.blog-card__image-wrap {position: relative;width: 100%;height: 220px;background: #f6e7d8;overflow: hidden;flex-shrink: 0;}
.blog-card__image {display: block;width: 100%;height: 100%;object-fit: cover;transition: transform 0.4s ease;}
.blog-card:hover .blog-card__image {transform: scale(1.04);}
.blog-card__image-placeholder {width: 100%;height: 100%;background: linear-gradient(135deg, #f6e7d8 0%, #fdeee1 100%);}
.blog-card__body {padding: 24px 22px 26px;display: flex;flex-direction: column;gap: 10px;flex: 1;}
.blog-card__meta {display: flex;align-items: center;gap: 10px;flex-wrap: wrap;}
.blog-card__category {font-family: var(--spf-font-mono);font-size: 10.5px;letter-spacing: 0.14em;text-transform: uppercase;color: var(--spf-orange);text-decoration: none;transition: color 0.2s ease;}
.blog-card__category:hover { color: var(--spf-orange-dark); }
.blog-card__read-time {font-family: var(--spf-font-mono);font-size: 10.5px;letter-spacing: 0.1em;color: #8a7361;text-transform: uppercase;}
.blog-card__meta .blog-card__read-time::before {content: '·';margin-right: 10px;color: rgba(36, 21, 12, 0.25);}
.blog-card__title {margin: 0;font-size: 19px;font-weight: 600;letter-spacing: -0.01em;line-height: 1.3;color: var(--spf-brown);}
.blog-card__title a {color: inherit;text-decoration: none;transition: color 0.2s ease;}
.blog-card__title a:hover { color: var(--spf-orange-dark); }
.blog-card__excerpt {margin: 0;font-size: 14.5px;line-height: 1.6;color: #6b5240;font-weight: 300;flex: 1;/* clamp to 3 lines */display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;}
.blog-card__footer {display: flex;align-items: center;justify-content: space-between;gap: 12px;padding-top: 12px;border-top: 1px solid rgba(36, 21, 12, 0.06);margin-top: auto;}
.blog-card__date {font-family: var(--spf-font-mono);font-size: 11px;letter-spacing: 0.08em;color: #8a7361;}
.blog-card__read-more {font-size: 13.5px;font-weight: 600;color: var(--spf-orange-dark);text-decoration: none;display: inline-flex;align-items: center;gap: 5px;transition: color 0.2s ease, gap 0.2s ease;}
.blog-card__read-more:hover {color: var(--spf-orange);gap: 8px;}
.blog-listing__load-more-wrap {display: flex;justify-content: center;}
.blog-listing__load-more {display: inline-flex;align-items: center;gap: 10px;padding: 14px 32px;border-radius: var(--spf-radius-pill);border: 1.5px solid rgba(36, 21, 12, 0.16);background: transparent;color: var(--spf-brown);font-family: var(--spf-font-body);font-size: 15px;font-weight: 600;cursor: pointer;transition:  background 0.2s ease,  border-color 0.2s ease,  color 0.2s ease,  transform 0.2s ease;}
.blog-listing__load-more:hover {background: var(--spf-orange);border-color: var(--spf-orange);color: #fff;transform: translateY(-2px);}
.blog-listing__load-more[data-loading] {opacity: 0.6;pointer-events: none;}
.blog-listing__load-more-wrap[data-all-loaded] {display: none;}

/* ── Empty state ── */
.blog-listing__empty {text-align: center;padding: 48px 0;color: #8a7361;font-size: 16px;}

/* ── Responsive ── */
@media (max-width: 900px) {
  .blog-listing__grid {grid-template-columns: repeat(2, 1fr);gap: 20px;}
}
@media (max-width: 600px) {
  .blog-listing {padding-top: clamp(56px, 8vw, 72px);padding-bottom: clamp(56px, 8vw, 72px);}
  .blog-listing__inner { gap: 32px; }
  .blog-listing__grid {grid-template-columns: 1fr;gap: 18px;}
  .blog-card__image-wrap { height: 200px; }
}

/*--------------------------------------------------------------
# Single Post — Blog Detail (single.php)
# Hero · featured image · content + sidebar · prev/next · related
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Default Page — Detail Layout (page.php)
--------------------------------------------------------------*/
.spf-page-wrap {padding-top: 72px;}
.spf-page-hero {background: linear-gradient(180deg, var(--spf-cream) 0%, var(--spf-cream-mid) 100%);padding: clamp(56px, 8vw, 88px) clamp(20px, 4vw, 40px) clamp(40px, 5vw, 64px);}
.spf-page-hero__inner {max-width: 860px;margin-inline: auto;}
.spf-page-hero__top {display: flex;align-items: center;gap: 8px;margin-bottom: 22px;}
.spf-page-hero__crumb,.spf-page-hero__label {font-family: var(--spf-font-mono);font-size: 11.5px;letter-spacing: 0.14em;text-transform: uppercase;text-decoration: none;}
.spf-page-hero__crumb {color: #8a7361;transition: color 0.2s ease;}
.spf-page-hero__crumb:hover {color: var(--spf-orange-dark);}
.spf-page-hero__label {color: var(--spf-orange);}
.spf-page-hero__crumb-sep {font-size: 11px;color: rgba(36, 21, 12, 0.25);}
.spf-page-hero__title {margin: 0 0 22px;font-size: clamp(34px, 4.5vw, 60px);line-height: 1.06;letter-spacing: -0.03em;font-weight: 700;color: var(--spf-brown);}
.spf-page-hero__meta {display: flex;align-items: center;gap: 10px;flex-wrap: wrap;font-family: var(--spf-font-mono);font-size: 12px;letter-spacing: 0.08em;text-transform: uppercase;color: #8a7361;}
.spf-page-featured {padding: 0 clamp(20px, 4vw, 40px);margin-bottom: clamp(40px, 6vw, 64px);}
.spf-page-featured__inner {max-width: 1280px;margin-inline: auto;}
.spf-page-featured__img {display: block;width: 100%;max-height: 520px;object-fit: cover;border-radius: var(--spf-radius-card);box-shadow: 0 32px 64px -32px rgba(36, 21, 12, 0.32);}
.spf-page-layout {display: grid;grid-template-columns: minmax(0, 1fr) 280px;gap: clamp(32px, 4vw, 64px);align-items: start;padding-bottom: clamp(64px, 8vw, 96px);}
.spf-page-layout.no-featured-image{margin-top: clamp(40px, 6vw, 64px);}
.spf-page-content {min-width: 0;}
.spf-page-content__body {font-size: 17.5px;line-height: 1.72;color: #4a3626;max-width: 760px;}
.spf-page-content__body h2 {font-size: clamp(22px, 2.4vw, 30px);font-weight: 700;letter-spacing: -0.02em;color: var(--spf-brown);margin: 2em 0 0.6em;line-height: 1.2;}
.spf-page-content__body h3 {font-size: clamp(18px, 1.8vw, 22px);font-weight: 600;color: var(--spf-brown);margin: 1.6em 0 0.5em;line-height: 1.3;}
.spf-page-content__body h4 {font-size: 18px;font-weight: 600;color: var(--spf-brown);margin: 1.4em 0 0.4em;}
.spf-page-content__body p {margin: 0 0 1.4em;}
.spf-page-content__body a {color: var(--spf-orange-dark);text-decoration: underline;text-underline-offset: 3px;}
.spf-page-content__body ul,.spf-page-content__body ol {margin: 0 0 1.4em 1.4em;padding: 0;}
.spf-page-content__body li {margin-bottom: 0.4em;}
.spf-page-content__body blockquote {margin: 2em 0;padding: 24px 28px;border-left: 3px solid var(--spf-orange);background: var(--spf-cream-mid);border-radius: 0 12px 12px 0;font-style: italic;font-size: 18px;color: var(--spf-brown);}
.spf-page-content__body img {max-width: 100%;height: auto;border-radius: 12px;margin: 1.5em 0;}
.spf-page-content__body hr {border: none;border-top: 1px solid rgba(36, 21, 12, 0.1);margin: 2.5em 0;}
.spf-page-content__body .wp-block-heading:first-child {margin-top: 0;}
@media (max-width: 900px) {
  .spf-page-layout {grid-template-columns: 1fr;gap: 40px;}
  .spf-page-content {order: 2;}
  .spf-page-layout .spf-post-sidebar {order: 1;}
}
@media (max-width: 600px) {
  .spf-page-wrap {padding-top: 60px;}
  .spf-page-hero {padding-top: clamp(40px, 8vw, 60px);}
  .spf-page-featured__img {max-height: 260px;}
  .spf-page-content__body {font-size: 16.5px;}
}

/* ── Body padding for fixed header ── */
.spf-post-wrap {padding-top: 72px;}

/* ══════════════════════════════════════════════════════════════
   POST HERO
   ══════════════════════════════════════════════════════════════ */
.spf-post-hero {background: linear-gradient(180deg, var(--spf-cream) 0%, var(--spf-cream-mid) 100%);padding: clamp(56px, 8vw, 88px) clamp(20px, 4vw, 40px) clamp(40px, 5vw, 64px);}
.spf-post-hero__inner {max-width: 860px;margin-inline: auto;}

/* Breadcrumb / category */
.spf-post-hero__top {display: flex;align-items: center;gap: 8px;margin-bottom: 22px;}
.spf-post-hero__crumb {font-family: var(--spf-font-mono);font-size: 11.5px;letter-spacing: 0.14em;text-transform: uppercase;color: #8a7361;text-decoration: none;transition: color 0.2s ease;}
.spf-post-hero__crumb:hover { color: var(--spf-orange-dark); }
.spf-post-hero__crumb-sep {font-size: 11px;color: rgba(36, 21, 12, 0.25);}
.spf-post-hero__category {font-family: var(--spf-font-mono);font-size: 11.5px;letter-spacing: 0.14em;text-transform: uppercase;color: var(--spf-orange);text-decoration: none;transition: color 0.2s ease;}
.spf-post-hero__category:hover { color: var(--spf-orange-dark); }

.spf-post-hero__title {margin: 0 0 18px;font-size: clamp(32px, 4.5vw, 60px);line-height: 1.06;letter-spacing: -0.03em;font-weight: 700;color: var(--spf-brown);}
.spf-post-hero__subtitle {margin: 0 0 24px;font-size: 19px;line-height: 1.55;color: #5c4634;font-weight: 300;}
.spf-post-hero__meta {display: flex;align-items: center;gap: 10px;flex-wrap: wrap;}
.spf-post-hero__author,
.spf-post-hero__date,
.spf-post-hero__read-time {font-family: var(--spf-font-mono);font-size: 12px;letter-spacing: 0.08em;text-transform: uppercase;color: #8a7361;}
.spf-post-hero__meta-sep {color: rgba(36, 21, 12, 0.22);font-size: 14px;}

/* ══════════════════════════════════════════════════════════════
   FEATURED IMAGE
   ══════════════════════════════════════════════════════════════ */
.spf-post-featured {padding: 0 clamp(20px, 4vw, 40px);margin-bottom: clamp(40px, 6vw, 64px);}
.spf-post-featured__inner {max-width: 1280px;margin-inline: auto;}
.spf-post-featured__img {display: block;width: 100%;max-height: 520px;object-fit: cover;border-radius: var(--spf-radius-card);box-shadow: 0 32px 64px -32px rgba(36, 21, 12, 0.32);}

/* ══════════════════════════════════════════════════════════════
   CONTENT + SIDEBAR TWO-COLUMN LAYOUT
   65% content | 30% sidebar (sticky)
   ══════════════════════════════════════════════════════════════ */
.spf-post-layout {grid-template-columns: minmax(0, 1fr) 280px;display: grid;gap: clamp(32px, 4vw, 64px);align-items: start;padding-bottom: clamp(48px, 7vw, 80px);}
.spf-post-layout.no-featured-image{margin-top: clamp(40px, 6vw, 64px);}
.spf-post-content {min-width: 0;}

/* Themed typography for post body */
.spf-post-content__body {font-size: 17.5px;line-height: 1.72;color: #4a3626;}
.spf-post-content__body h2 {font-size: clamp(22px, 2.4vw, 30px);font-weight: 700;letter-spacing: -0.02em;color: var(--spf-brown);margin: 2em 0 0.6em;line-height: 1.2;}
.spf-post-content__body h3 {font-size: clamp(18px, 1.8vw, 22px);font-weight: 600;color: var(--spf-brown);margin: 1.6em 0 0.5em;line-height: 1.3;}
.spf-post-content__body h4 {font-size: 18px;font-weight: 600;color: var(--spf-brown);margin: 1.4em 0 0.4em;}
.spf-post-content__body p {margin: 0 0 1.4em;}
.spf-post-content__body a {color: var(--spf-orange-dark);text-decoration: underline;text-underline-offset: 3px;}
.spf-post-content__body a:hover { color: var(--spf-orange); }
.spf-post-content__body ul,
.spf-post-content__body ol {margin: 0 0 1.4em 1.4em;padding: 0;}
.spf-post-content__body li { margin-bottom: 0.4em; }
.spf-post-content__body blockquote {margin: 2em 0;padding: 24px 28px;border-left: 3px solid var(--spf-orange);background: var(--spf-cream-mid);border-radius: 0 12px 12px 0;font-style: italic;font-size: 18px;color: var(--spf-brown);}
.spf-post-content__body img {max-width: 100%;height: auto;border-radius: 12px;margin: 1.5em 0;}
.spf-post-content__body pre {background: var(--spf-brown);color: var(--spf-cream);padding: 20px 24px;border-radius: 12px;overflow-x: auto;font-size: 14px;line-height: 1.7;margin: 1.5em 0;}
.spf-post-content__body hr {border: none;border-top: 1px solid rgba(36, 21, 12, 0.1);margin: 2.5em 0;}

/* Tags strip */
.spf-post-content__tags {display: flex;flex-wrap: wrap;gap: 8px;margin-top: 48px;padding-top: 24px;border-top: 1px solid rgba(36, 21, 12, 0.08);}
.spf-post-content__tag {padding: 6px 14px;border-radius: var(--spf-radius-pill);border: 1px solid rgba(36, 21, 12, 0.12);font-family: var(--spf-font-mono);font-size: 11px;letter-spacing: 0.1em;text-transform: uppercase;color: #6b5240;text-decoration: none;transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;}
.spf-post-content__tag:hover {background: var(--spf-cream-mid);border-color: rgba(234, 91, 12, 0.3);color: var(--spf-orange-dark);}
.spf-post-sidebar {min-width: 0;}
.spf-post-sidebar__sticky {position: sticky;top: 96px;align-self: start;display: flex;flex-direction: column;gap: 32px;}
.spf-post-sidebar__toggle {display: none;}
.spf-post-sidebar__panel {display: flex;flex-direction: column;gap: 32px;}

/* ── Table of Contents ── */
.spf-toc {background: var(--spf-cream-mid);border: 1px solid rgba(234, 91, 12, 0.12);border-radius: var(--spf-radius-card);padding: 20px 22px;}
.spf-toc__label {font-family: var(--spf-font-mono);font-size: 10.5px;letter-spacing: 0.18em;text-transform: uppercase;color: var(--spf-orange);margin-bottom: 14px;}
.spf-toc__list {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;gap: 2px;}
.spf-toc__item--h3 {padding-left: 14px;}.spf-toc__link {display: block;padding: 6px 8px;font-size: 13.5px;line-height: 1.4;color: #6b5240;text-decoration: none;border-radius: 8px;border-left: 2px solid transparent;transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;}
.spf-toc__link:hover {color: var(--spf-orange-dark);background: rgba(234, 91, 12, 0.06);}
.spf-toc__link.is-active {color: var(--spf-orange-dark);border-left-color: var(--spf-orange);background: rgba(234, 91, 12, 0.06);font-weight: 500;}

/* Hide TOC when JS hasn't found any headings */
.spf-toc:empty,
.spf-toc[data-toc-empty] {display: none;}
.spf-post-share {display: flex;flex-direction: column;gap: 10px;}
.spf-post-share__label {font-family: var(--spf-font-mono);font-size: 10.5px;letter-spacing: 0.18em;text-transform: uppercase;color: #8a7361;}
.spf-post-share__links {display: flex;gap: 8px;}
.spf-post-share__link {display: inline-flex;align-items: center;justify-content: center;width: 38px;height: 38px;border-radius: 50%;border: 1.5px solid rgba(36, 21, 12, 0.14);font-family: var(--spf-font-mono);font-size: 11px;font-weight: 600;color: var(--spf-brown-mid);text-decoration: none;transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;}
.spf-post-share__link:hover {background: var(--spf-orange);border-color: var(--spf-orange);color: #fff;}

/* ══════════════════════════════════════════════════════════════
   PREV / NEXT NAV
   ══════════════════════════════════════════════════════════════ */
.spf-post-nav {display: flex;gap: 16px;padding: 32px clamp(20px, 4vw, 40px) clamp(40px, 6vw, 64px);border-top: 1px solid rgba(36, 21, 12, 0.08);}
.spf-post-nav__item {flex: 1;display: flex;flex-direction: column;gap: 6px;padding: 20px 22px;border-radius: var(--spf-radius-card);border: 1px solid rgba(36, 21, 12, 0.08);text-decoration: none;background: var(--spf-cream-white);transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;}
.spf-post-nav__item:hover {background: var(--spf-cream-mid);border-color: rgba(234, 91, 12, 0.2);transform: translateY(-2px);}
.spf-post-nav__item--next {text-align: right;align-items: flex-end;}
.spf-post-nav__dir {font-family: var(--spf-font-mono);font-size: 11px;letter-spacing: 0.14em;text-transform: uppercase;color: var(--spf-orange);display: flex;align-items: center;gap: 6px;}
.spf-post-nav__title {font-size: 15px;font-weight: 600;color: var(--spf-brown);line-height: 1.35;/* clamp to 2 lines */display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}

/* ══════════════════════════════════════════════════════════════
   RELATED POSTS
   ══════════════════════════════════════════════════════════════ */
.spf-post-related {padding-bottom: clamp(56px, 8vw, 88px);}
.spf-post-related__header {margin-bottom: 32px;}
.spf-post-related__heading {font-weight: 700;font-size: clamp(22px, 2.4vw, 30px);margin: 0;color: var(--spf-brown);letter-spacing: -0.02em;}
.spf-post-related__grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 24px;}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — single post
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Stack content + sidebar vertically */
  .spf-post-layout {grid-template-columns: 1fr;gap: 40px;}
  .spf-post-content{order:2;}
  /* .spf-post-sidebar {order:1;position: static;gap: 0;} */
  .spf-post-sidebar {order:1;top: 80px;gap: 0;}
  .spf-post-sidebar__toggle {display: flex;align-items: center;justify-content: space-between;width: 100%;padding: 16px 18px;border: 1px solid rgba(36, 21, 12, 0.12);border-radius: var(--spf-radius-card);background: var(--spf-cream-mid);color: var(--spf-brown);font-family: var(--spf-font-mono);font-size: 11px;letter-spacing: 0.14em;text-transform: uppercase;text-align: left;cursor: pointer;}
  .spf-post-sidebar__toggle:focus-visible {outline: 2px solid var(--spf-orange);outline-offset: 3px;}
  .spf-post-sidebar__toggle-icon {position: relative;width: 14px;height: 14px;flex-shrink: 0;}
  .spf-post-sidebar__toggle-icon::before,
  .spf-post-sidebar__toggle-icon::after {content: '';position: absolute;top: 6px;left: 1px;width: 12px;height: 1.5px;background: currentColor;transition: transform 0.25s ease;}
  .spf-post-sidebar__toggle-icon::after {transform: rotate(90deg);}
  .spf-post-sidebar__toggle[aria-expanded="true"] .spf-post-sidebar__toggle-icon::after {transform: rotate(0);}
  .spf-post-sidebar__panel {display:none; gap: 20px;padding-top: 20px;}
  .spf-post-sidebar__panel.is-open {display: flex;height:auto;}
  .spf-toc__label.desktop{display: none;}
  .spf-toc__label.mobile{margin:0px;}
  .spf-toc__item--h3{padding-left: 0px;}
  .spf-toc {width: 100%;}
  .spf-post-share {flex-direction: row;align-items: center;justify-content: space-between;}
  .spf-post-related__grid {grid-template-columns: repeat(2, 1fr);gap: 18px;}
}
@media (max-width: 600px) {
  .spf-post-wrap { padding-top: 60px; }
  .spf-post-hero { padding-top: clamp(40px, 8vw, 60px); }
  .spf-post-featured__img { max-height: 260px; }
  .spf-post-nav {flex-direction: column;gap: 12px;}
  .spf-post-nav__item--next { text-align: left; align-items: flex-start; }
  .spf-post-related__grid {grid-template-columns: 1fr;gap: 16px;}
}

/*--------------------------------------------------------------
# Contact Section (contact_section.php)
--------------------------------------------------------------*/
.contact-section {padding: clamp(72px, 9vw, 112px) clamp(20px, 4vw, 40px);}
.contact-section--bg-cream {background: var(--spf-cream);}
.contact-section--bg-cream-white {background: var(--spf-cream-white);}
.contact-section--bg-cream-mid {background: var(--spf-cream-mid);}
.contact-section--bg-brown {background: var(--spf-brown);}
.contact-section--pad-compact {padding-top: 56px;padding-bottom: 56px;}
.contact-section--pad-flush {padding-top: 0;padding-bottom: 0;}
.contact-section__inner {display: flex;flex-direction: column;gap: clamp(40px, 5vw, 64px);}
.contact-section__header {max-width: 760px;}
.contact-section__label,.contact-section__column-label {font-family: var(--spf-font-mono);font-size: 11.5px;letter-spacing: 0.18em;text-transform: uppercase;color: var(--spf-orange);}
.contact-section__label {margin-bottom: 18px;}
.contact-section__heading {margin: 0;font-size: clamp(32px, 3.4vw, 50px);line-height: 1.06;letter-spacing: -0.025em;font-weight: 700;color: var(--spf-brown);}
.contact-section__intro {margin-top: 16px;max-width: 620px;font-size: 17px;line-height: 1.65;color: #5c4634;font-weight: 300;}
.contact-section__grid {display: grid;grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);gap: clamp(32px, 6vw, 88px);align-items: start;}
.contact-section__details {padding-top: clamp(28px, 4vw, 48px);}
.contact-section__column-label {margin-bottom: 16px;color: #8a7361;}
.contact-section__column-title {margin: 0 0 14px;font-size: clamp(24px, 2.5vw, 36px);line-height: 1.12;letter-spacing: -0.02em;color: var(--spf-brown);}
.contact-section__column-description,.contact-section__form-description {font-size: 17px;line-height: 1.55;color: #6b5240;font-weight: 300;}
.contact-section__column-description p,.contact-section__form-description p {margin: 0 0 1em;}
.contact-section__info-list {display: flex;flex-direction: column;gap: 12px;margin: 34px 0 34px;padding: 0;list-style: none;}
.contact-section__info-item {display: flex;align-items: center;gap: 14px;font-size: 17px;line-height: 1.5;color: #5c4634;}
.contact-section__info-icon {display: inline-flex;align-items: center;justify-content: center;width: 34px;height: 34px;flex: 0 0 34px;border: 1px solid rgba(234, 91, 12, 0.25);border-radius: 50%;color: var(--spf-orange);}
.contact-section__info-icon svg {display: block;width: 17px;height: 17px;fill: none;stroke: currentColor;stroke-linecap: round;stroke-linejoin: round;stroke-width: 1.6;}
.contact-section__info-item a {color: inherit;text-decoration: none;transition: color 0.2s ease;}
.contact-section__info-item a:hover {color: var(--spf-orange-dark);}
.contact-section__column-map{max-height: 300px;overflow: hidden;border-radius: 20px;border: 1px solid rgba(36, 21, 12, 0.08);}
 .contact-section__column-map p:last-child{margin-bottom:0px;}
.contact-section__form-card {padding: clamp(28px, 4vw, 48px);border: 1px solid rgba(36, 21, 12, 0.08);border-radius: var(--spf-radius-card);background: var(--spf-cream-white);box-shadow: 0 24px 56px -34px rgba(36, 21, 12, 0.35);}
.contact-section__form-title {margin: 0 0 10px;font-size: clamp(24px, 2.5vw, 34px);line-height: 1.12;color: var(--spf-brown);}
.contact-section__form-description {margin-bottom: 28px;}
.contact-section__form-wrapper .wpcf7-form {display: flex;flex-direction: column;gap: 0;}
.contact-section__form-wrapper.no-desc{margin-top:20px;}
.contact-section .spf-form-row {margin: 0 0 20px;}
.contact-section .spf-form-row--two-columns {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 16px;}
.contact-section .spf-form-group {display: flex;flex-direction: column;gap: 8px;}
.contact-section .spf-form-label {font-family: var(--spf-font-mono);font-size: 12px;letter-spacing: 0.1em;text-transform: uppercase;color: #6b5240;}
.contact-section .spf-required {color: var(--spf-orange);}
.contact-section .spf-optional {font-family: var(--spf-font-body);font-size: 11px;letter-spacing: 0;color: #a08d7e;text-transform: none;}
.contact-section .spf-form-help {margin: 0 0 8px;font-size: 14px;line-height: 1.45;color: #8a7361;}
.contact-section .spf-input,.contact-section .spf-select,.contact-section .spf-textarea {box-sizing: border-box;width: 100%;border: 1px solid rgba(36, 21, 12, 0.14);border-radius: 10px;background: #fff;color: var(--spf-brown);font: 400 16px/1.4 var(--spf-font-body);outline: none;transition: border-color 0.2s ease, box-shadow 0.2s ease;}
.contact-section .spf-input,.contact-section .spf-select {min-height: 48px;padding: 12px 14px;}
.contact-section .spf-textarea {min-height: 100px;max-height: 140px;padding: 13px 14px;resize: vertical;}
.contact-section .spf-form-group > p,
.contact-section .spf-form-control > p,
.contact-section .spf-reason-options > p,
.contact-section .spf-form-submit > p {margin: 0;}
.contact-section .spf-form-group label br {display: none;}
.contact-section .spf-form-control .wpcf7-form-control-wrap {display: block;}
.contact-section .spf-input:focus,.contact-section .spf-select:focus,.contact-section .spf-textarea:focus {border-color: rgba(234, 91, 12, 0.65);box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.1);}
.contact-section .spf-form-submit {display: flex;align-items: center;gap: 16px;flex-wrap: wrap;}
.contact-section .spf-submit-button {display: inline-flex;align-items: center;justify-content: center;min-height: 48px;padding: 12px 26px;border: 0;border-radius: var(--spf-radius-pill);background: var(--spf-orange);color: #fff;font: 600 15px var(--spf-font-body);cursor: pointer;transition: background 0.2s ease, transform 0.2s ease;}
.contact-section .spf-submit-button:hover {background: var(--spf-orange-dark);transform: translateY(-2px);}
.contact-section .wpcf7-not-valid-tip {margin-top: 4px;font-size: 12px;color: var(--spf-orange-dark);}
.contact-section .wpcf7-response-output {margin: 18px 0 0;padding: 12px 14px;border: 1px solid rgba(234, 91, 12, 0.25);border-radius: 8px;font-size: 13px;color: #6b5240;}
.contact-section--bg-brown .contact-section__heading,.contact-section--bg-brown .contact-section__column-title {color: var(--spf-cream);}
.contact-section--bg-brown .contact-section__intro,.contact-section--bg-brown .contact-section__column-description,.contact-section--bg-brown .contact-section__info-item {color: rgba(255, 247, 240, 0.72);}
.contact-section--bg-brown .contact-section__column-label {color: var(--spf-orange-light);}
@media (max-width: 900px) {
  .contact-section__grid {grid-template-columns: 1fr;gap: 40px;}
  .contact-section__details {padding-top: 0;}
}
@media (max-width: 600px) {
  .contact-section {padding-top: 56px;padding-bottom: 56px;}
  .contact-section__grid {gap: 32px;}
  .contact-section__form-card {padding: 24px 20px;}
  .contact-section .spf-form-row--two-columns {grid-template-columns: 1fr;gap: 20px;}
}