/**
 * SMSF (Samuel & Margaret Sitta Foundation) brand overrides.
 * Generated: this file re-declares CharityPlus's own selectors (extracted
 * from gavias_charityplus/css/{template,sliderlayer}.css wherever the
 * theme's default demo accent colors #FBB122 / #f8c44f / #f6b41e / #232733
 * appear) with the SMSF brand palette. The purchased theme's files are
 * never edited directly; this subtheme stylesheet loads after them.
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Names kept from the original brand pass (--smsf-brown/-orange/etc.) even
     though the values below are the client-approved reference palette, not
     literally brown/orange anymore — renaming every var() call site across
     this file isn't worth the diff noise. */
  --smsf-brown: #A34E00;      /* deep amber, sampled directly from the logo's dominant orange/gold arc (~#EC7801/#F09306 at full brightness) and darkened to ~32% lightness at the same hue so white text on it stays readable: headings, dark band bg, primary buttons */
  --smsf-orange: #B77D88;     /* rose/mauve: kickers, accents, numbers, links */
  --smsf-lime: #8F5C64;       /* darker rose: hover states */
  --smsf-amber: #B77D88;      /* consolidated into rose */
  --smsf-offwhite: #F7F5EE;   /* cream page background */
  --smsf-body-text: #1D2924;
  --smsf-nav-text: #425049;
  --smsf-sage: #E4E9DC;       /* pale sage-green: Our Roots / Moments placeholder cards */
  --smsf-font-heading: 'Playfair Display', serif;
  --smsf-font-body: 'DM Sans', sans-serif;
}

body {
  background-color: var(--smsf-offwhite);
}

/* Body copy justified site-wide (headings are untouched -- this only
   targets <p>). Paragraphs that are meant to stay centered set that on
   themselves directly (their own inline style, or a class rule elsewhere
   in this file) -- an element's own text-align always wins over this
   plain-type-selector rule regardless of load order, so those are safe;
   only paragraphs that were relying on an ANCESTOR's centering via
   inheritance need protecting (done per-case, see the page-builder
   content and .smsf2-people-feature p below). Turned off again below
   768px: justify on narrow single-column text reliably produces ugly
   rivers of whitespace between words, which is worse than ragged-right. */
p {
  text-align: justify;
}
@media (max-width: 767.98px) {
  p {
    text-align: left;
  }
}

h1, h2, h3, h4, h5, h6 {
  /* !important needed: gavias_charityplus/css/bootstrap.css has the exact
     same "h1, h2, h3, h4, h5, h6" selector (plus .h1-.h6) setting black,
     and since this subtheme's style.css loads BEFORE the base theme's own
     CSS files (verified repeatedly in this project), an equal-specificity
     tie always goes to bootstrap.css's later-loaded rule without this. */
  color: var(--smsf-brown) !important;
}

/* ==== overrides extracted from template.css ==== */

a:hover, a:focus, a:active {
  color: #B77D88 !important;
}

ul.menu > li > a:hover, ul.menu > li > a:active, ul.menu > li > a:focus {
  color: #B77D88 !important;
}

ul.menu > li > a:hover:after, ul.menu > li > a:active:after, ul.menu > li > a:focus:after {
  background: #B77D88 !important;
}

ul.feature-list > li:after {
  color: #B77D88 !important;
}

.pager .paginations a.active {
  background: #B77D88 !important;
  border-color: #B77D88 !important;
}

.pager li > a:hover {
  background: #B77D88 !important;
}

.pager li.is-active > a {
  background-color: #B77D88 !important;
  border-color: #B77D88 !important;
}

.breadcrumb-content-inner .gva-breadcrumb-content .breadcrumb-links nav.breadcrumb li a {
  color: #A34E00 !important;
}

.breadcrumb-content-inner .gva-breadcrumb-content .breadcrumb-links nav.breadcrumb li a:hover {
  color: #B77D88 !important;
}

.footer a:hover, .footer a:focus {
  color: #B77D88 !important;
}

.copyright .copyright-inner a {
  color: #B77D88 !important;
}

.copyright-links a:hover {
  color: #B77D88 !important;
}

.copyright-links a:hover, .copyright-links a:active, .copyright-links a:focus {
  color: #B77D88 !important;
}

body.footer-v2 .copyright {
  color: #A34E00 !important;
}

body.footer-v2 .copyright a {
  color: #A34E00 !important;
}

body.footer-v2 .copyright-links a {
  color: #A34E00 !important;
}

body.footer-v2 .copyright-links a:hover {
  color: #B77D88 !important;
}

body.footer-v3 .copyright a {
  color: #B77D88 !important;
}

.topbar-social .social a:hover, .topbar-social .social a:focus {
  color: #B77D88 !important;
}

.topbar-menu .user-picture {
  background: #B77D88 !important;
}

.topbar-menu .block-menu a:hover, .topbar-menu .block-menu a:focus {
  color: #B77D88 !important;
}

.gva-search-region .icon {
  color: #A34E00 !important;
}

.gva-search-region .search-content form.search-block-form input#edit-submit {
  background: #B77D88 !important;
}

.page-notfound .big-title {
  color: #A34E00 !important;
}

.page-notfound .action a {
  color: #B77D88 !important;
}

.page-notfound .action a:hover {
  color: #A34E00 !important;
}

.team-single-page .team-name .name {
  color: #A34E00 !important;
}

.team-single-page .team-name .line span.second {
  background: #B77D88 !important;
}

.team-single-page .heading {
  color: #A34E00 !important;
}

.team-single-page .team-education .field__item:after {
  background: #B77D88 !important;
}

.team-single-page .team-quote:after {
  color: #B77D88 !important;
}

.page-user-login .main-page details > summary, .page-user-register .main-page details > summary, .page-user-pass .main-page details > summary, .page-user-edit .main-page details > summary {
  background: #B77D88 !important;
}

.user-profile .user-fullname {
  color: #A34E00 !important;
}

.post-block .post-title a {
  color: #A34E00 !important;
}

.post-block .post-title a:hover, .post-block .post-title a:active, .post-block .post-title a:before {
  color: #B77D88 !important;
}

.post-block .post-categories a {
  color: #B77D88 !important;
}

.post-style-grid.style-v2 .post-readmore a {
  color: #B77D88 !important;
}

.post-style-grid.style-v2 .post-readmore a:hover {
  color: #B77D88 !important;
}

.node-detail .field--name-field-tags .field__item a:hover, .node-detail .field--name-field-tags .field__item a:focus, .node-detail .field--name-field-tags .field__item a:active {
  background: #B77D88 !important;
}

.post-style-list.small .post-title a:hover {
  color: #B77D88 !important;
}

.post-style-stick .item-list > ul > li .post-categories a {
  background: #B77D88 !important;
}

.post-style-stick .item-list > ul > li:not(:first-child) .post-title a:hover {
  color: #B77D88 !important;
}

.post-style-stick .item-list > ul > li:first-child .post-title a:hover {
  color: #B77D88 !important;
}

.testimonial-node-v1 .quote {
  color: #A34E00 !important;
}

.testimonial-node-v1 .content-inner .title {
  color: #A34E00 !important;
}

.testimonial-node-v2 .content:before {
  background: #B77D88 !important;
}

.testimonial-node-v2 .quote {
  color: #A34E00 !important;
}

.testimonial-node-v2 .quote .fa-quote-left {
  background: #B77D88 !important;
}

.testimonial-node-v2 .info .title {
  color: #A34E00 !important;
}

.testimonial-node-v3 .content-inner:before {
  background: #B77D88 !important;
}

.testimonial-node-v3 .quote {
  color: #A34E00 !important;
}

.testimonial-node-v3 .title {
  color: #B77D88 !important;
}

.testimonial-node-v4 {
  background: #B77D88 !important;
}

.team-block .team-image .socials-team a:hover, .team-block .team-image .socials-team a:focus, .team-block .team-image .socials-team a:active {
  color: #B77D88 !important;
}

.bg-theme {
  background: #B77D88 !important;
}

.bg-theme-second {
  background: #B77D88 !important;
}

.text-black {
  color: #A34E00 !important;
}

.text-black > a {
  color: #A34E00 !important;
}

.text-theme {
  color: #B77D88 !important;
}

.text-theme > a {
  color: #B77D88 !important;
}

.text-theme-2, .text-theme-second {
  color: #B77D88 !important;
}

.text-theme-2 > a, .text-theme-second > a {
  color: #B77D88 !important;
}

.color-theme {
  color: #B77D88 !important;
}

.color-theme > a {
  color: #B77D88 !important;
}

.nav-tabs > li > a {
  color: #A34E00 !important;
}

.nav-tabs > li > a:hover, .nav-tabs > li > a:focus, .nav-tabs > li > a:active {
  color: #B77D88 !important;
}

.nav-tabs > li.active > a, .nav-tabs > li > a.active {
  color: #B77D88 !important;
}

.owl-carousel .owl-dots .owl-dot.active {
  background: #B77D88 !important;
}

.owl-carousel .owl-nav > div:hover {
  background: #B77D88 !important;
}

.owl-carousel.carousel-thumbnail.text.top .owl-dots .owl-dot {
  color: #A34E00 !important;
}

.owl-carousel.carousel-thumbnail.text.top .owl-dots .owl-dot.active {
  color: #B77D88 !important;
}

.owl-carousel.carousel-thumbnail.text.vertical .owl-dots .owl-dot {
  color: #A34E00 !important;
}

.owl-carousel.carousel-thumbnail.text.vertical .owl-dots .owl-dot:after {
  background: #B77D88 !important;
}

.owl-carousel.carousel-thumbnail.text.vertical .owl-dots .owl-dot.active {
  color: #B77D88 !important;
}

.btn, .btn-white, .btn-theme, .btn-theme-second, .more-link a, .btn-theme-submit, input[type='submit'] {
  background: #B77D88 !important;
}

.btn:hover, .btn:focus, .btn:active, .btn-white:hover, .btn-white:focus, .btn-white:active, .btn-theme:hover, .btn-theme:focus, .btn-theme:active, .btn-theme-second:hover, .btn-theme-second:focus, .btn-theme-second:active, .more-link a:hover, .more-link a:focus, .more-link a:active, .btn-theme-submit:hover, .btn-theme-submit:focus, .btn-theme-submit:active, input[type='submit']:hover, input[type='submit']:focus, input[type='submit']:active {
  background: #A34E00 !important;
}

a.btn-inline {
  color: #B77D88 !important;
}

a.btn-inline:hover, a.btn-inline:focus {
  color: #B77D88 !important;
}

.btn-theme-second {
  background: #B77D88 !important;
}

.btn-theme-second:hover, .btn-theme-second:focus, .btn-theme-second:active {
  background: #B77D88 !important;
}

.gsc-button.btn-white, .btn-white {
  color: #A34E00 !important;
}

.gsc-button.btn-white:hover, .gsc-button.btn-white:focus, .gsc-button.btn-white:active, .btn-white:hover, .btn-white:focus, .btn-white:active {
  color: #B77D88 !important;
}

.gsc-button.btn-default {
  background: #A34E00 !important;
}

.gsc-button.btn-default:hover, .gsc-button.btn-default:focus, .gsc-button.btn-default:active {
  color: #B77D88 !important;
}

.btn-line {
  border: 2px solid #B77D88 !important;
}

.btn-line:hover, .btn-line:focus, .btn-line:active, .btn-line.active {
  background: #B77D88 !important;
  color: #A34E00 !important;
  border-color: #B77D88 !important;
}

.user-login-form input[type*='submit'], .user-register-form input[type*='submit'], .user-form input[type*='submit'], .user-pass input[type*='submit'] {
  background: #B77D88 !important;
}

.user-login-form input[type*='submit']:hover, .user-login-form input[type*='submit']:focus, .user-login-form input[type*='submit']:active, .user-register-form input[type*='submit']:hover, .user-register-form input[type*='submit']:focus, .user-register-form input[type*='submit']:active, .user-form input[type*='submit']:hover, .user-form input[type*='submit']:focus, .user-form input[type*='submit']:active, .user-pass input[type*='submit']:hover, .user-pass input[type*='submit']:focus, .user-pass input[type*='submit']:active {
  color: #A34E00 !important;
  border-color: #B77D88 !important;
}

.progress-label {
  color: #A34E00 !important;
}

.progress .progress-bar {
  background: #B77D88 !important;
}

.progress .progress-bar .percentage {
  color: #A34E00 !important;
  background: #B77D88 !important;
}

.progress .progress-bar .percentage:after {
  border-top-color: #B77D88 !important;
}

.progress .progress-bar .percentage span {
  border: 4px solid #B77D88 !important;
}

.pricing-table .plan-name .title {
  color: #A34E00 !important;
}

.pricing-table .content-wrap .plan-price .price-value .dollar {
  color: #B77D88 !important;
}

.pricing-table .content-wrap .plan-price .price-value .value {
  color: #B77D88 !important;
}

.pricing-table .plan-list ul li:after {
  color: #B77D88 !important;
}

.pricing-table.highlight-plan .recommended-plan {
  background: #B77D88 !important;
}

.pricing-table.highlight-plan .plan-name .title {
  color: #B77D88 !important;
}

.panel .panel-title > a {
  color: #A34E00 !important;
}

.panel .panel-title > a:after {
  color: #B77D88 !important;
}

.info-contact > div .icon {
  background: #B77D88 !important;
}

.info-contact > div.phone .icon {
  background: #B77D88 !important;
}

#node-single-comment h2:before {
  background: #B77D88 !important;
}

#node-single-comment #comment-form .form-item label {
  color: #A34E00 !important;
}

.comment__author .username {
  color: #A34E00 !important;
}

.comment__author {
  color: #A34E00 !important;
}

#search-block-form input.form-submit {
  background: #B77D88 !important;
}

#search-block-form input.form-submit:hover {
  background: #A34E00 !important;
}

.contact-message-form #edit-preview {
  background: #B77D88 !important;
}

.contact-message-form #edit-preview:hover {
  background: #A34E00 !important;
}

form.commerce-product-campaign-add-form .layout-region-product-main legend, form.commerce-product-campaign-add-form .layout-region-product-main .field--widget-commerce-price-default label, form.commerce-product-campaign-add-form .layout-region-product-main .field--name-field-campaign-video label {
  color: #A34E00 !important;
}

form.commerce-product-campaign-add-form .layout-region-product-main .field--widget-image-image summary {
  color: #A34E00 !important;
}

.webform-submission-form .form-item input:focus, .webform-submission-form .form-item textarea:focus, .webform-submission-form .form-item select:focus {
  border-color: #B77D88 !important;
}

.text-light .webform-submission-form .form-actions input.form-submit {
  color: #A34E00 !important;
}

.block .block-title {
  color: #A34E00 !important;
}

.block.style-higlight .more-link a:hover {
  color: #B77D88 !important;
}

.block.block-simplenews input#edit-subscribe {
  background: #B77D88 !important;
}

.block.block-simplenews input#edit-subscribe:hover, .block.block-simplenews input#edit-subscribe:focus, .block.block-simplenews input#edit-subscribe:active {
  color: #B77D88 !important;
}

.block.block-blocktabs .ui-tabs-nav > li.ui-tabs-active > a {
  color: #B77D88 !important;
}

.drupal-tabs .is-active a {
  color: #B77D88 !important;
}

.sidebar .block-menu ul li a:hover, .sidebar .block-menu ul li a:focus, .sidebar .block-menu ul li a:active {
  color: #B77D88 !important;
}

.sidebar .block-menu ul li.menu-item--active-trail > a {
  color: #B77D88 !important;
}

.list-tags .view-list ul > li:hover {
  background: #B77D88 !important;
}

nav.breadcrumb ol > li a:hover {
  color: #B77D88 !important;
}

.contact-link {
  background: #B77D88 !important;
}

.poll .poll-item .bar .foreground {
  background: #B77D88 !important;
}

@media (min-width: 992px) and (min-width: 768px) {
.navigation .gva_menu_main > li:hover > a {
  color: #B77D88 !important;
}

}

@media (min-width: 992px) {
.navigation .gva_menu_main > li > a:hover, .navigation .gva_menu_main > li > a:focus, .navigation .gva_menu_main > li > a:active {
  color: #B77D88 !important;
}

.navigation .gva_menu_main > li > a.is-active {
  color: #B77D88 !important;
}

.navigation .gva_menu_main > li.menu-item--active-trail > a {
  color: #B77D88 !important;
}

}

@media (min-width: 992px) {
.navigation .gva_menu_main .megamenu > .sub-menu > li > a {
  color: #A34E00 !important;
}

.navigation .gva_menu_main .sub-menu {
  border-top: 3px solid #B77D88 !important;
}

.navigation .gva_menu_main .sub-menu > li > a:hover, .navigation .gva_menu_main .sub-menu > li > a:focus, .navigation .gva_menu_main .sub-menu > li > a:active {
  color: #B77D88 !important;
}

}

.gva-mega-menu .block-blocktabs .ui-tabs-nav > li.ui-tabs-active > a {
  color: #B77D88 !important;
}

ul[data-drupal-views-infinite-scroll-pager].pager a {
  border: 1px solid #B77D88 !important;
  background: #B77D88 !important;
}

ul[data-drupal-views-infinite-scroll-pager].pager a:hover, ul[data-drupal-views-infinite-scroll-pager].pager a:active, ul[data-drupal-views-infinite-scroll-pager].pager a:focus {
  color: #B77D88 !important;
}

.more-link a {
  border: 2px solid #B77D88 !important;
}

.more-link a:hover {
  background: #B77D88 !important;
}

.category-list .item-list ul li a:hover, .category-list .item-list ul li a:focus, .category-list .item-list ul li a:active {
  background: #B77D88 !important;
}

.testimonial-v1 .testimonial-item .content .title {
  color: #A34E00 !important;
}

.view-testimonial-v2 .owl-dots .owl-dot.active {
  border-color: #B77D88 !important;
}

.testimonial-grid .item-grid .testimonials-quote {
  color: #A34E00 !important;
}

.testimonial-grid .item-grid .testimonials-profile:after {
  background: #B77D88 !important;
}

.testimonial-grid .item-grid .testimonials-profile .right .job {
  color: #B77D88 !important;
}

.small-list .item-list ul > li a {
  color: #A34E00 !important;
}

.small-list .item-list ul > li a:hover {
  color: #B77D88 !important;
}

.tags-list .item-list > ul > li a {
  background: #B77D88 !important;
}

.tags-list .item-list > ul > li a:hover, .tags-list .item-list > ul > li a:focus, .tags-list .item-list > ul > li a:active {
  background: #A34E00 !important;
}

.gavias-blockbuilder-content .link-edit-blockbuider {
  background: #B77D88 !important;
}

.gsc-box-parallax .content-inner .subtitle {
  color: #A34E00 !important;
}

.gsc-hover-background .front .icon {
  color: #B77D88 !important;
}

.gsc-hover-background .front h2 {
  color: #A34E00 !important;
}

.quote-icon:before {
  color: #B77D88 !important;
}

.gsc-our-history-carousel .item .content-inner .year {
  background: #B77D88 !important;
}

.gsc-our-history-carousel .item .content-inner .title {
  color: #B77D88 !important;
}

.gsc-our-history-timeline .item:before {
  background: #B77D88 !important;
}

.gsc-our-history-timeline .item .year {
  color: #A34E00 !important;
}

.gsc-our-history-timeline .item .content-right .title {
  color: #A34E00 !important;
}

.gbb-row-wrapper .icon-row {
  color: #B77D88 !important;
}

.gsc-carousel-content .item .item-content .content-box {
  background: #B77D88 !important;
}

.gsc-carousel-content.style-3 .content-box .content-inner .action a {
  background: #A34E00 !important;
  border: 1px solid #A34E00 !important;
}

.gsc-accordion .panel .panel-title > a.collapsed:after {
  color: #A34E00 !important;
}

.gsc-accordion .panel .panel-title > a:after {
  background: #B77D88 !important;
}

.gsc-call-to-action.button-bottom .title:after {
  background: #B77D88 !important;
}

.gsc-call-to-action.button-bottom-v4 .title:after {
  background: #B77D88 !important;
}

.gsc-call-to-action.button-bottom-v4 .title strong {
  color: #B77D88 !important;
}

.gsc-icon-box .highlight_content .title {
  color: #A34E00 !important;
}

.gsc-icon-box .highlight-icon .icon-container {
  color: #A34E00 !important;
}

.gsc-icon-box.icon-background .highlight-icon .icon-container.bg-theme:after {
  background: #B77D88 !important;
}

.gsc-icon-box.icon-background.icon-border .highlight-icon .icon-container.bg-theme {
  border-color: #B77D88 !important;
}

.gsc-icon-box.icon-border:not(.icon-background) .highlight-icon .icon-container {
  color: #B77D88 !important;
}

.gsc-icon-box .i-border-theme {
  border-color: #B77D88 !important;
}

.gsc-icon-box .i-border-black {
  border-color: #A34E00 !important;
}

.gsc-icon-box-new.style-1 .icon-inner {
  background: #B77D88 !important;
}

.gsc-icon-box-new.style-1 .content-inner .title {
  color: #B77D88 !important;
}

.gsc-icon-box-new.style-2 .icon-inner {
  background: #B77D88 !important;
}

.gsc-icon-box-new.style-2 .content-inner .desc ul li:after {
  color: #B77D88 !important;
}

.gsc-icon-box-new.style-2 .content-inner .desc .link {
  color: #B77D88 !important;
}

.gsc-icon-box-new.style-3 .icon-inner {
  border: 1px solid #B77D88 !important;
  color: #B77D88 !important;
}

.gsc-icon-box-new.style-4 .icon-inner .icon {
  color: #B77D88 !important;
  background: #B77D88 !important;
}

.gsc-icon-box-new.style-5 .content-inner .desc a:hover {
  color: #B77D88 !important;
}

.gsc-icon-box-new.style-5 .icon-inner .icon {
  color: #B77D88 !important;
}

.gsc-icon-box-new.style-5:hover .icon-inner .icon {
  background: #B77D88 !important;
}

.milestone-block .milestone-icon span {
  color: #A34E00 !important;
}

.milestone-block .milestone-number-inner {
  color: #A34E00 !important;
}

.milestone-block .milestone-text {
  color: #A34E00 !important;
}

.milestone-block.position-icon-top .milestone-icon {
  color: #B77D88 !important;
}

.milestone-block.position-icon-top .milestone-icon span {
  color: #B77D88 !important;
}

.milestone-block.position-icon-top-v2 .milestone-icon span {
  border: 2px solid #A34E00 !important;
}

.gsc-our-team.team-horizontal .team-header .social-list a:hover {
  color: #B77D88 !important;
}

.gsc-our-team.team-horizontal .team-name:after {
  background: #B77D88 !important;
}

.gsc-our-team.team-vertical:hover .signature {
  color: #B77D88 !important;
}

.gsc-quote-text .icon {
  color: #B77D88 !important;
}

.gva-job-box .content-inner .job-type {
  color: #B77D88 !important;
}

.gva-job-box .content-inner .information ul li i {
  color: #B77D88 !important;
}

.gsc-our-gallery .title {
  color: #A34E00 !important;
}

.gsc-our-gallery .image:after {
  background: #A34E00 !important;
}

.gsc-our-gallery .image:before {
  background: #B77D88 !important;
}

.gsc-heading .sub-title {
  color: #B77D88 !important;
}

.gsc-map.style-2 .info-inner {
  border: 5px solid #B77D88 !important;
}

.gsc-box-color .box-content {
  background: #B77D88 !important;
}

.gsc-box-color .box-content .icon {
  color: #B77D88 !important;
}

.gsc-tabs .tabs_horizontal .nav-tabs > li > a {
  background: #B77D88 !important;
}

.gsc-tabs .tabs_horizontal .nav-tabs > li > a.active {
  color: #A34E00 !important;
}

.gsc-tabs .tabs_vertical .nav-tabs > li a {
  background: #B77D88 !important;
}

.gsc-tabs .tabs_vertical .nav-tabs > li a.active {
  color: #A34E00 !important;
}

.gsc-our-partners .content-inner .title {
  color: #A34E00 !important;
}

.gsc-our-partners .content-inner .info .category {
  color: #B77D88 !important;
}

.gsc-image-content.skin-v2 .bg-color {
  background: #B77D88 !important;
}

.gsc-image-content.skin-v2 .content a:hover, .gsc-image-content.skin-v2 .content a:focus, .gsc-image-content.skin-v2 .content a:active {
  color: #B77D88 !important;
}

.gsc-service-carousel.style-v1 .icon i {
  color: #B77D88 !important;
}

.gsc-service-carousel.style-v1 .title a {
  color: #A34E00 !important;
}

.gsc-service-carousel.style-v1 .content-inner:hover .icon i, .gsc-service-carousel.style-v1 .content-inner:focus .icon i, .gsc-service-carousel.style-v1 .content-inner:active .icon i {
  -webkit-box-shadow: 0 0 0 3px #B77D88 inset !important;
  box-shadow: 0 0 0 3px #B77D88 inset !important;
}

.gsc-service-carousel.style-v1 .content-inner:hover .icon i:after, .gsc-service-carousel.style-v1 .content-inner:focus .icon i:after, .gsc-service-carousel.style-v1 .content-inner:active .icon i:after {
  background: #B77D88 !important;
}

.gsc-service-carousel.style-v2 .content-inner:hover, .gsc-service-carousel.style-v2 .content-inner:focus, .gsc-service-carousel.style-v2 .content-inner:active {
  background: url("../images/bg-icon-hover-h4.png") no-repeat -45px -40px #B77D88 !important;
}

.gsc-service-carousel.style-v2 .icon i {
  color: #B77D88 !important;
}

.gsc-service-carousel.style-v2 .title a {
  color: #A34E00 !important;
}

.gsc-box-download {
  background: #B77D88 !important;
}

.gsc-box-download .box-files a {
  color: #A34E00 !important;
}

.gsc-instagram .title a {
  color: #B77D88 !important;
  border-bottom: 1px solid #B77D88 !important;
}

.gsc-instagram .title a:hover, .gsc-instagram .title a:focus, .gsc-instagram .title a:active {
  color: #A34E00 !important;
}

.gsc-progress-box.style-v1:after {
  background: #B77D88 !important;
}

.gsc-progress-box.style-v1:before {
  background: #B77D88 !important;
}

.gsc-progress-box.style-v1:hover span.step-number {
  background: #B77D88 !important;
}

.gsc-progress-box.style-v1 span.step-number {
  background: #B77D88 !important;
}

.gsc-progress-box.style-v2 span.step-number {
  background: #B77D88 !important;
}

@media (max-width: 991.98px) {
.gva-offcanvas-mobile .close-offcanvas:hover {
  color: #B77D88 !important;
}

.gva-offcanvas-mobile .gva-navigation .gva_menu > li > a {
  color: #A34E00 !important;
}

.gva-offcanvas-mobile .gva-navigation .gva_menu > li > a:hover {
  color: #B77D88 !important;
}

.gva-offcanvas-mobile .gva-navigation .gva_menu > li ul.menu.sub-menu li a:hover {
  color: #B77D88 !important;
}

.gva-offcanvas-mobile .gva-navigation .gva_menu li a:hover {
  color: #B77D88 !important;
}

}

.event-list-item .event-title a {
  color: #B77D88 !important;
}

.event-block .event-image .date .day {
  color: #B77D88 !important;
}

.event-block .event-image .date .month {
  color: #A34E00 !important;
}

.event-block .event-content .event-info .event-meta {
  color: #B77D88 !important;
}

.event-block-2 .event-image .event-date .date {
  color: #B77D88 !important;
}

.event-block-2 .event-image .event-date .month {
  color: #A34E00 !important;
}

.event-block-2 .event-line {
  background: #B77D88 !important;
}

.event-block-list .event-date {
  background: #B77D88 !important;
}

.event-block-list .event-address i {
  color: #B77D88 !important;
}

.portfolio-filter ul.nav-tabs > li > a {
  color: #A34E00 !important;
}

.portfolio-filter ul.nav-tabs > li > a.active {
  background: #B77D88 !important;
}

.portfolio-v1 .portfolio-images:after {
  background: #B77D88 !important;
}

.portfolio-v1 .portfolio-images .image-popup:hover {
  background: #A34E00 !important;
}

.portfolio-v1 .portfolio-images .link:hover {
  background: #A34E00 !important;
}

.portfolio-carousel-single .portfolio-item .images .image-popup {
  background: #A34E00 !important;
}

.portfolio-carousel-single .portfolio-item .images .read-more a {
  color: #A34E00 !important;
}

.portfolio-carousel-single .portfolio-item .images .read-more a:hover {
  color: #B77D88 !important;
}

.portfolio-carousel-single .portfolio-item .images .read-more:after {
  background: #A34E00 !important;
}

.portfolio-carousel-single .portfolio-item .portfolio-content:after {
  background: #A34E00 !important;
}

.portfolio-carousel-single .portfolio-item .portfolio-content .category a {
  color: #A34E00 !important;
}

.portfolio-carousel-single .portfolio-item .portfolio-content .category a:hover {
  color: #B77D88 !important;
}

.portfolio-carousel-single .portfolio-item .portfolio-content .title:after {
  background: #B77D88 !important;
}

.portfolio-carousel-single .portfolio-item .portfolio-content .title a {
  color: #A34E00 !important;
}

.portfolio-carousel-single .portfolio-item .portfolio-content .title a:hover {
  color: #B77D88 !important;
}

.campaign-block .image .funded span {
  color: #B77D88 !important;
}

.campaign-block .campaign-content .content-raised .goal {
  color: #B77D88 !important;
}

.campaign-block-2 .content-action {
  background: #B77D88 !important;
}

.campaigns-tabs .carousel-nav .slick-slide.slick-center .link-campaign {
  background: #B77D88 !important;
}

.campaign-single #popup-add-to-cart .form-item input[type=radio]:checked ~ label {
  color: #B77D88 !important;
}

.campaign-single #popup-add-to-cart .form-item input[type=radio]:checked ~ label:before {
  border-color: #B77D88 !important;
}

.campaign-single .field--name-field-campaign-category .field__item a:hover {
  background: #B77D88 !important;
}

.gva-cart-region .cart-block--contents {
  border-top: 2px solid #B77D88 !important;
}

.gva-cart-region .cart-block--contents .cart-block--contents__links {
  color: #B77D88 !important;
}

.cart-form table tr td.views-field-remove-button input {
  color: #B77D88 !important;
}

.path-user .order-information > .field .field__label {
  color: #A34E00 !important;
}

.gavias-skins-panel #gavias_profile_customize_name option {
  color: #A34E00 !important;
}

.gavias-skins-panel .control-panel {
  background: #B77D88 !important;
}

.gavias-skins-panel .panel-skins-content .title {
  color: #A34E00 !important;
}

.gavias-skins-panel .panel-skins-content .item-color.default {
  background: #B77D88 !important;
}

.gavias-skins-panel .panel-skins-content .item-color.active {
  border-color: #A34E00 !important;
}

.gavias-skins-panel .panel-skins-content .layout.active {
  background-color: #B77D88 !important;
}

#customize-gavias-preivew .form-group label {
  color: #A34E00 !important;
}

#customize-gavias-preivew .form-group .colorselector .remove {
  color: #A34E00 !important;
}

/* ==== overrides extracted from sliderlayer.css ==== */

.gavias_sliderlayer .tparrows, #gavias_slider_single .tparrows {
  color: #A34E00 !important;
}

.gavias_sliderlayer .tparrows:before, #gavias_slider_single .tparrows:before {
  color: #A34E00 !important;
}

.gavias_sliderlayer .tp-caption, #gavias_slider_single .tp-caption {
  color: #A34E00 !important;
}

.gavias_sliderlayer .text-black, #gavias_slider_single .text-black {
  color: #A34E00 !important;
}

.gavias_sliderlayer .text-theme, #gavias_slider_single .text-theme {
  color: #B77D88 !important;
}

.gavias_sliderlayer .text-second, #gavias_slider_single .text-second {
  color: #B77D88 !important;
}

.gavias_sliderlayer .inner.btn-slide, .gavias_sliderlayer .btn-slide a, #gavias_slider_single .inner.btn-slide, #gavias_slider_single .btn-slide a {
  background: #B77D88 !important;
}

.gavias_sliderlayer .inner.btn-slide-white, .gavias_sliderlayer .btn-slide-white a, #gavias_slider_single .inner.btn-slide-white, #gavias_slider_single .btn-slide-white a {
  color: #A34E00 !important;
}

.gavias_sliderlayer .inner.btn-slide-white:hover, .gavias_sliderlayer .inner.btn-slide-white:focus, .gavias_sliderlayer .inner.btn-slide-white:active, .gavias_sliderlayer .inner.btn-slide-white.active, .gavias_sliderlayer .btn-slide-white a:hover, .gavias_sliderlayer .btn-slide-white a:focus, .gavias_sliderlayer .btn-slide-white a:active, .gavias_sliderlayer .btn-slide-white a.active, #gavias_slider_single .inner.btn-slide-white:hover, #gavias_slider_single .inner.btn-slide-white:focus, #gavias_slider_single .inner.btn-slide-white:active, #gavias_slider_single .inner.btn-slide-white.active, #gavias_slider_single .btn-slide-white a:hover, #gavias_slider_single .btn-slide-white a:focus, #gavias_slider_single .btn-slide-white a:active, #gavias_slider_single .btn-slide-white a.active {
  color: #A34E00 !important;
}


/* ==== manual brand rules (win over the generic swap above by cascade order) ==== */

/* Footer widget titles: amber, per brand spec (customizer's footer_color only reaches body text/links, not headings) */
.footer .block .block-title,
body.footer-v2 .block .block-title span,
body.footer-v3 #footer .block .block-title span {
  color: var(--smsf-amber) !important;
}

/* Impact counters/odometers: amber for the number + icon, keep the label legible in brown */
.milestone-block .milestone-icon span,
.milestone-block .milestone-number-inner,
.milestone-block .milestone-number-inner .milestone-number,
.milestone-block.position-icon-top .milestone-icon span,
.milestone-block.position-icon-top-v2 .milestone-icon span,
.milestone-block.position-icon-top-v2 .milestone-right .milestone-number {
  color: var(--smsf-amber) !important;
}

.milestone-block .milestone-text {
  color: var(--smsf-brown) !important;
}

/* Footer/copyright link hovers: lime, per brand spec (wins over the generic
   swap above, which mapped several footer hover states to orange since the
   theme demo reused the same accent color for rest + hover states) */
.footer a:hover,
.footer a:focus,
.copyright a:hover,
.copyright a:focus,
.copyright-links a:hover,
.copyright-links a:focus,
.copyright-links a:active,
.copyright .copyright-inner a:hover,
.copyright .copyright-inner a:focus,
body.footer-v2 .copyright-links a:hover,
body.footer-v3 .copyright a:hover,
#footer .footer-center a:hover {
  color: var(--smsf-lime) !important;
}

/* Header: 7 top-level main-menu items were wrapping to a second line because
   the header row was boxed to Bootstrap's ~1140px .container, leaving only
   the narrow strip between the absolutely-positioned logo (220px) and Donate
   button (150px) for the nav. That was originally fixed by going full-width
   (logo at the true left edge, button at the true right edge) -- correct for
   "nav fits on one line" but it also stretched the gap between the logo and
   the nav out to however wide the viewport happened to be, which read as
   "too much white space" on anything wider than a laptop. A wider boxed
   container (1320px, still comfortably wider than the ~370px the logo+nav
   actually need) fits the same 7 items on one line while keeping the whole
   header visually together and centered instead of pinned to the screen
   edges. Kept in sync with the homepage/page-header boxing below so
   section content still lines up under the logo/button at any width. */
@media (min-width: 992px) {
  header.header-default .header-content-layout > .container {
    max-width: 1320px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
  }

  .navigation .gva_menu_main > li {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .navigation .gva_menu_main > li > a {
    font-size: 15px !important;
  }
}

/* Extra headroom in the tight 992–1200px band, where the desktop nav is
   forced on but there isn't much width to work with yet. */
@media (min-width: 992px) and (max-width: 1200px) {
  .navigation .gva_menu_main > li {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .navigation .gva_menu_main > li > a {
    font-size: 16px !important;
    font-weight: 700 !important;
  }
}

@media (min-width: 992px) {
  .navigation .gva_menu_main > li > a {
    font-size: 18px !important;
    font-weight: 700 !important;
  }
}

/* Logo: client uploaded a real logo via the theme's Logo setting, replacing
   the "Samuel & Margaret Sitta Foundation / Make a Change" text branding
   (block config: use_site_logo=1, use_site_name/slogan=0). Stays in the
   theme's default slot on the left of the main nav — only the image needs
   sizing, since the logo file is much taller than the text it replaced and
   was overflowing the header height / spilling into the hero below. */
header.header-default .header-main-inner .header-inner .branding {
  display: flex;
  align-items: center;
  height: 100%;
}

header.header-default .header-main-inner .header-inner .branding .site-branding-logo {
  padding: 0;
}

header.header-default .header-main-inner .header-inner .branding img {
  max-height: 128px;
  width: auto;
  max-width: 100%;
}

@media (max-width: 991.98px) {
  header.header-default .header-main-inner .header-inner .branding img {
    max-height: 68px;
  }
}

/* Nav links carried the base theme's demo padding (35px top/bottom),
   which -- combined with the logo above -- was most of the header's
   perceived "empty" whitespace. Trimmed down so the header hugs its
   content instead of padding it out. */
@media (min-width: 992px) {
  .navigation .gva_menu_main > li {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
}

/* Buttons losing their text ("Donate Now" etc. invisible until hover):
   the theme customizer's global body-content link color
   (gavias_customize.link_color, output by dynamic_style.php as
   "body .body-page a { color: ... !important }") is more specific than the
   base theme's ".btn-theme{color:#fff}" rule, so it repaints every button's
   text the same brand orange as its own background — everywhere a button
   widget (CTA, "Apply Now", "Read more", form submit link, etc.) sits inside
   page-builder body content. Restore each button variant's own text color,
   scoped under .body-page so it outranks the customizer rule; body-copy
   links outside buttons keep the intended brand-orange link color. */
.body-page a.btn,
.body-page a.btn-theme,
.body-page a.btn-theme-submit,
.body-page a.more-link,
.body-page .more-link a {
  color: #fff !important;
}

.body-page a.btn-theme-second {
  color: #fff !important;
}

.body-page a.btn-white,
.body-page .gsc-button.btn-white {
  color: var(--smsf-brown) !important;
}

.body-page a.btn-white:hover,
.body-page a.btn-white:focus,
.body-page .gsc-button.btn-white:hover,
.body-page .gsc-button.btn-white:focus {
  color: var(--smsf-orange) !important;
}

.body-page .gsc-button.btn-default {
  color: #fff !important;
}

.body-page a.btn-line {
  color: var(--smsf-brown) !important;
}

.body-page a.btn-line:hover,
.body-page a.btn-line:focus,
.body-page a.btn-line.active {
  color: var(--smsf-brown) !important;
}

.body-page a.btn:hover,
.body-page a.btn:focus,
.body-page a.btn-theme:hover,
.body-page a.btn-theme:focus,
.body-page a.btn-theme-second:hover,
.body-page a.btn-theme-second:focus,
.body-page a.btn-theme-submit:hover,
.body-page a.btn-theme-submit:focus,
.body-page .more-link a:hover,
.body-page .more-link a:focus {
  color: #fff !important;
}

/* Featured Projects grid (homepage): the "featured_projects" View renders
   these cards from Portfolio nodes (promoted to front page) instead of the
   hard-coded HTML that used to live in the page builder. Styling matches
   the original card design exactly. */
.featured-projects-grid ul {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.featured-projects-grid ul > li {
  flex: 1 1 calc(33.333% - 16px);
  max-width: calc(33.333% - 16px);
}

@media (max-width: 991.98px) {
  .featured-projects-grid ul > li {
    flex: 1 1 calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
}

@media (max-width: 575.98px) {
  .featured-projects-grid ul > li {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.smsf-card {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(92, 42, 3, 0.08);
  margin-bottom: 20px;
  height: calc(100% - 20px);
}

.smsf-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.smsf-card-body {
  padding: 20px;
}

.smsf-card-body h4 {
  margin-top: 0;
}

.smsf-card-body h4 a {
  color: var(--smsf-brown);
}

.smsf-card-body p {
  color: #666;
}

/* Our 2026–2030 Targets section (homepage): the heading, the counter
   cards, and the "USD 18.5 million..." text below each carry the theme's
   default 80px top+bottom row padding, stacking into a 160px gap on both
   sides of the counters. Trim that specific run of gaps down to something
   tighter, anchored on the counters' own .milestone-block markup so this
   never touches padding-medium rows anywhere else on the site.
   Note: .milestone-block.special-top carries the theme's own
   `margin-top: -80px` (it's designed to sit flush against the row above),
   so the counters row's own top padding must stay at the default 80px --
   only its bottom padding gets trimmed. Trimming the top too would let the
   -80px pull drag the cards up through the heading text above. */
.gbb-row-wrapper:has(.milestone-block) > .gbb-row > .bb-inner.padding-medium {
  padding-bottom: 20px;
}

.gbb-row-wrapper:has(+ .gbb-row-wrapper .milestone-block) > .gbb-row > .bb-inner.padding-medium {
  padding-bottom: 20px;
}

.gbb-row-wrapper:has(.milestone-block) + .gbb-row-wrapper > .gbb-row > .bb-inner.padding-medium {
  padding-top: 20px;
}

/* Featured Projects section (homepage): same fix as the Targets section
   above -- the "Featured Projects" heading and the card grid below it
   each carry the theme's default 80px row padding (plus the heading
   widget's own 30px padding-bottom), stacking into a large gap. Anchored
   on .featured-projects-grid so it only affects this row pair. */
.gbb-row-wrapper:has(+ .gbb-row-wrapper .featured-projects-grid) > .gbb-row > .bb-inner.padding-medium {
  padding-bottom: 20px;
}

.gbb-row-wrapper:has(.featured-projects-grid) > .gbb-row > .bb-inner.padding-medium {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Latest News section (homepage + /news): same heading-to-grid tightening,
   anchored on the view's own .post-style-grid wrapper class. Tightened on
   both sides of the heading this time (not just below it, as with
   Featured Projects), per request. */
.gbb-row-wrapper:has(+ .gbb-row-wrapper .post-style-grid) > .gbb-row > .bb-inner.padding-medium {
  padding-top: 20px;
  padding-bottom: 20px;
}

.gbb-row-wrapper:has(.post-style-grid) > .gbb-row > .bb-inner.padding-medium {
  padding-top: 20px;
}

/* Homepage: two more gaps in the same "Make a Change" -> "Featured
   Projects" run. Neither the mission text nor the icon-box row nor the
   USD-investment text carry a class distinctive enough to anchor a
   :has() selector on (unlike the milestone/grid-anchored rules above),
   so these are targeted by position among the page builder's row-wrapper
   siblings instead -- row 2 (mission text) / row 3 (focus-area icon
   boxes), and row 6 (USD text) / row 7 (Featured Projects heading).
   Scoped to the frontpage body class since row position elsewhere on the
   site is unrelated. If the homepage's row order changes, these indices
   need updating to match. */
body.frontpage .gavias-builder--content > .gbb-row-wrapper:nth-child(2) > .gbb-row > .bb-inner.padding-medium {
  padding-bottom: 20px;
}

body.frontpage .gavias-builder--content > .gbb-row-wrapper:nth-child(3) > .gbb-row > .bb-inner.padding-medium {
  padding-top: 20px;
}

body.frontpage .gavias-builder--content > .gbb-row-wrapper:nth-child(6) > .gbb-row > .bb-inner.padding-medium {
  padding-bottom: 20px;
}

body.frontpage .gavias-builder--content > .gbb-row-wrapper:nth-child(7) > .gbb-row > .bb-inner.padding-medium {
  padding-top: 20px;
}

/* Program Areas grid (/programs, /impact): the "program_areas" View
   renders these 4 cards from the program pages (tagged with a
   program_area term) instead of hard-coded icon-box widgets duplicated
   on both pages. Reuses the theme's own .widget.gsc-icon-box markup, so
   only the 4-column grid wrapper needs layout rules here. */
.programs-grid ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 -15px;
  padding: 0;
}

.programs-grid ul > li {
  flex: 1 1 25%;
  max-width: 25%;
  padding: 0 15px;
}

@media (max-width: 991.98px) {
  .programs-grid ul > li {
    flex: 1 1 50%;
    max-width: 50%;
  }
}

@media (max-width: 575.98px) {
  .programs-grid ul > li {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* Resources grid (/resources): the "resources_grid" View renders these
   cards from the "resource" content type (Strategic Plan, Annual Report,
   Safeguarding Policy) instead of hard-coded icon-box widgets. Same
   .widget.gsc-icon-box markup as Program Areas, 3 columns instead of 4. */
.resources-grid ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 -15px;
  padding: 0;
}

.resources-grid ul > li {
  flex: 1 1 33.333%;
  max-width: 33.333%;
  padding: 0 15px;
}

@media (max-width: 991.98px) {
  .resources-grid ul > li {
    flex: 1 1 50%;
    max-width: 50%;
  }
}

@media (max-width: 575.98px) {
  .resources-grid ul > li {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* Bolding + enlarging the main menu text (above) widens each item enough
   that at ~1400px viewports the row no longer fits and wraps ("Contact"
   dropping to a second line). Trim the per-item horizontal padding to
   reclaim that space instead of shrinking the text back down. */
@media (min-width: 992px) {
  .navigation .gva_menu_main > li {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* Bold the dropdown submenu links to match the bolded top-level items. */
.navigation .gva_menu_main .sub-menu > li > a {
  font-weight: 700 !important;
}

/* Vision, Mission & Values page (/about/vision-mission): every row
   (Vision/Mission text, "Our Values" heading, the two rows of value
   icon-boxes, "Our Guiding Principles" heading, the two rows of principle
   icon-boxes) carries the theme's default 80px top+bottom row padding,
   stacking into large gaps throughout the page. Scoped to this node via
   its data-history-node-id attribute (no page-specific body class is
   available) rather than reducing padding-medium sitewide. */
[data-history-node-id="105"] .gbb-row > .bb-inner.padding-medium {
  padding-top: 25px !important;
  padding-bottom: 25px !important;
}

/* ============================================================
   REFERENCE REDESIGN (client-approved AI mockup, Sept 2026)
   ============================================================
   The dark login/search topbar strip above the main nav is hardcoded
   markup in the base theme's page/parts/topbar.html.twig (a raw
   <a href="{{ path('user.page') }}"> icon, not a block) -- the reference
   design has no such bar, and it can't be removed by disabling blocks.
   Hidden here instead. */
.topbar {
  display: none !important;
}

/* Buttons: the base theme's .btn family all carry a ribbon/arrow shape
   (a ::after pseudo-element painting btn-arrow.png over the left edge) --
   the reference design uses plain full-pill buttons with no such cutout.
   Strip the arrow and reshape into pills sitewide. */
.btn,
.btn-white,
.btn-theme,
.btn-theme-second,
.btn-theme-submit,
.more-link a,
input[type='submit'] {
  border-radius: 999px !important;
  padding: 13px 28px !important;
  line-height: normal !important;
  font-family: var(--smsf-font-body) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  background: var(--smsf-brown) !important;
  color: #fff !important;
  border: 1px solid var(--smsf-brown) !important;
}

.btn:after,
.btn-white:after,
.btn-theme:after,
.btn-theme-second:after,
.btn-theme-submit:after,
.more-link a:after,
input[type='submit']:after {
  content: none !important;
  display: none !important;
}

.btn:hover, .btn:focus,
.btn-white:hover, .btn-white:focus,
.btn-theme:hover, .btn-theme:focus,
.btn-theme-second:hover, .btn-theme-second:focus,
.btn-theme-submit:hover, .btn-theme-submit:focus,
.more-link a:hover, .more-link a:focus,
input[type='submit']:hover, input[type='submit']:focus {
  background: var(--smsf-lime) !important;
  border-color: var(--smsf-lime) !important;
  color: #fff !important;
}

/* Outline/secondary pill (e.g. "Continue the story"): transparent fill,
   dark-green border and text -- add class="btn-line" in page-builder
   content to use it. */
.btn-line {
  border-radius: 999px !important;
  padding: 13px 28px !important;
  line-height: normal !important;
  font-family: var(--smsf-font-body) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  background: transparent !important;
  color: var(--smsf-brown) !important;
  border: 1px solid var(--smsf-brown) !important;
  display: inline-block;
  text-transform: none !important;
  box-shadow: none !important;
}

.btn-line:hover, .btn-line:focus {
  background: var(--smsf-brown) !important;
  color: #fff !important;
}

/* ---- New homepage section components (reference redesign) ---- */

.smsf2-kicker {
  display: block;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--smsf-orange);
  font-family: var(--smsf-font-body);
  margin-bottom: 14px;
}

/* Each page-builder row wraps its content in its OWN top-level
   .bb-container.container (Bootstrap, capped at max-width:1200px at this
   breakpoint) -- that outer box is what was actually constraining hero
   text/image narrower than the header, which escapes the same cap via a
   different, not-fully-traced mechanism (empirically: ~40px fixed side
   inset at any width, not a capped-and-centered box at all). This forces
   every row's outer container on the homepage to that SAME boxed width as
   the header (1320px, centered) instead of either fighting Bootstrap's
   narrower cap from the inside or going fully edge-to-edge -- edge-to-edge
   was tried first and made the gap between hero text and image (and
   between every other section's two columns) balloon out to whatever the
   viewport happened to be, since flex/grid only fill however much box
   width they're given. Boxing both the header and this to the same width
   keeps section content aligned under the logo/button at any viewport
   width, same as before, just without the excess width to spread into. */
body.frontpage .gavias-builder--content .bb-container.container {
  max-width: 1320px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
}

@media (max-width: 767.98px) {
  body.frontpage .gavias-builder--content .bb-container.container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

.smsf2-section {
  width: 100%;
  /* Also carries class="container" (nested inside .bb-container.container
     above), so it independently matches Bootstrap's own .container
     max-width:1200px rule -- uncapped here or it re-centers a narrow box
     inside the now-full-width parent. */
  max-width: none !important;
}

/* Hero */
.smsf2-hero {
  display: flex;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
}
.smsf2-hero-text { flex: 1 1 420px; }
.smsf2-hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--smsf-orange);
  margin-bottom: 18px;
}
.smsf2-hero-text h1 {
  font-size: 56px;
  line-height: 1.1;
  margin: 0 0 24px;
}
.smsf2-hero-text p {
  font-size: 18px;
  color: var(--smsf-body-text);
  max-width: 480px;
  margin-bottom: 28px;
  text-align: justify;
}
.smsf2-hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
/* The previous fixed-height (580px) box forced object-fit:cover to scale
   the photo up to match that height at any rendered width, and since the
   source (330x446, portrait, ~0.74) is much narrower than it is tall,
   matching the box's width was always the larger scale factor -- cover
   picks the larger factor, so it actually cropped top/bottom heavily
   (cutting heads), the opposite of what the old comment here assumed.
   aspect-ratio matching the source exactly means cover never has
   anything to crop -- the full photo (including the headroom already
   present above both people) always renders. max-width caps how tall
   that makes the box at wide viewports. */
.smsf2-hero-media { flex: 1.3 1 340px; max-width: 420px; position: relative; }
.smsf2-hero-media img {
  width: 100%;
  aspect-ratio: 330 / 446;
  height: auto;
  object-fit: cover;
  border-radius: 180px 180px 24px 24px;
  display: block;
}
@media (max-width: 991.98px) {
  .smsf2-hero-media { max-width: 320px; }
}
.smsf2-hero-caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  background: #fff;
  border-radius: 12px;
  padding: 18px 22px;
  box-shadow: 0 10px 30px rgba(163,78,0,0.12);
}
.smsf2-hero-caption strong { display: block; font-family: var(--smsf-font-heading); font-size: 18px; color: var(--smsf-brown); }
.smsf2-hero-caption span { font-size: 14px; color: #6b7a72; }

/* Why SMSF -- heading (left) + supporting text/link (right), no media.
   Reference site sets this section's background to pure white, distinct
   from the off-white page background; .gbb-row is the full-bleed row
   wrapper (confirmed via getBoundingClientRect to span x:0 to viewport
   width), targeted via :has() since it's a shared class across all rows. */
.gbb-row:has(.smsf2-why) {
  background-color: #fff;
}
/* Our Work (heading row + separate view-embed row) and How We Work both
   have a white background on the reference site (.section.work,
   .principles { background: white }), distinct from the off-white page
   background -- same :has() full-bleed technique as .smsf2-why above. */
.gbb-row:has(#work),
.gbb-row:has(.smsf2-work-grid),
.gbb-row:has(.smsf2-howwework),
.gbb-row:has(.smsf2-people-preview-grid),
.gbb-row:has(.smsf2-contact-split) {
  background-color: #fff;
}
/* Values copied from the reference site's .intro / .intro-grid rules
   exactly: CSS grid (not flex) with a 10vw gap, 110px padding on every
   side, and the same 56px/700 heading treatment used sitewide. */
.smsf2-why { padding: 110px; }
.smsf2-why > .smsf2-kicker { margin-bottom: 14px; }
.smsf2-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10vw;
}
.smsf2-why-heading h2 { font-size: 56px; font-weight: 700; line-height: 1.1; margin: 0 0 22px; }
.smsf2-why-text { padding-top: 0; }
.smsf2-why-text p { font-size: 17px; color: #56635C; margin-bottom: 18px; text-align: justify; }
.smsf2-why-text a { font-weight: 700; font-size: 14px; color: var(--smsf-brown); }
@media (max-width: 900px) {
  .smsf2-why-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  .smsf2-why { padding: 60px 40px; }
}
@media (max-width: 600px) {
  .smsf2-why { padding: 60px 20px; }
}

/* Two-column text+image section (Our Story) */
.smsf2-split {
  display: flex;
  gap: 60px;
  /* Center, not stretch/sticky: the photo should just sit at the vertical
     centre of the row next to the (much longer) text column, not pinned to
     the top or scroll-follow down the page. */
  align-items: center;
  flex-wrap: wrap;
}
.smsf2-split-media { flex: 1 1 420px; }
.smsf2-split-media img {
  width: 100%;
  /* Matches the Samuel & Margaret greeting photo's own dimensions exactly,
     so object-fit:cover never needs to crop anything -- both people stay
     fully in frame regardless of column width (same fix as the hero). */
  aspect-ratio: 1280 / 833;
  height: auto;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}
.smsf2-split-text { flex: 1 1 420px; }
.smsf2-split-text h2 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  margin: 15px 0 20px;
}
.smsf2-split-text p { font-size: 17px; color: var(--smsf-body-text); margin-bottom: 18px; text-align: justify; }
.smsf2-pullquote {
  font-family: var(--smsf-font-heading);
  font-size: 32px;
  color: var(--smsf-orange);
  margin: 24px 0 18px;
}

/* Dark quote band (full bleed) -- "full bleed" stopped being true once the
   homepage's outer .bb-container.container got boxed to 1320px (nav/hero
   whitespace fix): .smsf2-band inherited that same boxed width since it's
   nested inside it, instead of spanning the viewport like its background
   color implies it should. Breaking it out to 100vw here (independent of
   how many centered/boxed ancestors sit above it) restores the edge-to-edge
   background while .smsf2-band-inner keeps the actual text readable-width
   and centered. */
.smsf2-band {
  background: var(--smsf-brown);
  color: #fff;
  padding: 80px 20px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.smsf2-band-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
}
.smsf2-band h2, .smsf2-band h3 { color: #fff !important; }
.smsf2-band p { color: #d7e0da; font-size: 17px; }
/* Justified only inside .smsf2-band-inner (the "Continuing the Legacy"
   two-column layout, genuinely long-form paragraphs) -- NOT the bare
   .smsf2-band p selector, which would also catch the short centered
   "Listen. Act. Learn. Grow." intro blurb and force it left-aligned. */
.smsf2-band-inner p { text-align: justify; }

/* Our Work numbered cards -- the program_areas View wraps each card's
   "nothing" field output in <ul><li>, same structure as the other
   *-grid views on the site, so the grid/hover rules target ul/li, not
   the .smsf2-work-grid wrapper div itself. Spacing/hover values (gap,
   border color, shadow, translateY) copied from the reference site's
   .pillar-grid / .pillar rules exactly. */
.smsf2-work-grid ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.smsf2-work-card {
  background: #F7F5EE;
  border: 1px solid #d9ded7;
  padding: 30px;
  min-height: 330px;
  height: 100%;
  position: relative;
  transition: 0.25s;
  box-sizing: border-box;
}
.smsf2-work-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 60px rgba(163, 78, 0, 0.12);
  background: #fff;
}
.smsf2-work-num { color: var(--smsf-orange); font-weight: 700; font-size: 12px; display: block; }
.smsf2-work-glyph { font-size: 32px; margin: 20px 0 10px; color: var(--smsf-brown); line-height: 1; }
.smsf2-work-card h3 { font-family: var(--smsf-font-heading); font-size: 24px; line-height: 1.15; margin: 0 0 10px; color: var(--smsf-brown); }
.smsf2-work-card p { font-size: 14px; color: #68736d; margin: 0 0 40px; }
.smsf2-work-card a { position: absolute; left: 30px; bottom: 28px; font-size: 13px; font-weight: 700; color: var(--smsf-brown); text-decoration: none; }
@media (max-width: 900px) { .smsf2-work-grid ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .smsf2-work-grid ul { grid-template-columns: 1fr; } }

/* Vision band -- was a rounded card boxed to the (former) full-bleed outer
   container; now that the outer container is boxed to 1320px (nav/hero
   whitespace fix) this needs the same explicit 100vw breakout as
   .smsf2-band, and rounded corners don't make sense once it reaches the
   true viewport edge, so those come off too. .smsf2-vision-card-inner
   (added around the heading/text/button in the page content) keeps them
   centered and readable-width, same technique as .smsf2-band-inner. */
.smsf2-vision-card {
  background: var(--smsf-brown);
  color: #fff;
  padding: 80px 20px;
  margin: 60px 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.smsf2-vision-card-inner { max-width: 1200px; margin: 0 auto; }
.smsf2-vision-card h2 { color: #fff !important; font-size: 42px; line-height: 1.2; }
.smsf2-vision-card p { color: #d7e0da; font-size: 17px; max-width: 700px; text-align: justify; }

/* How We Work section padding -- reference applies 110px on every side
   directly to the full-bleed section (no inner max-width container),
   reduced at its own breakpoints. */
/* Extra-repeated class beats template.css's ".container .container
   {padding:0 !important}" nested-override rule -- same specificity fight
   documented for .bb-container.container elsewhere in this file, and
   template.css loads after this stylesheet so a plain tie goes to it. */
.smsf2-howwework.smsf2-howwework.smsf2-howwework { padding: 110px 40px !important; }
@media (max-width: 600px) {
  .smsf2-howwework.smsf2-howwework.smsf2-howwework { padding: 75px 20px !important; }
}

/* Moments of Service -- reference keeps this section's background
   off-white (matches page bg), unlike Our Work/How We Work which are
   pure white, so this gets its own padding class rather than reusing
   .smsf2-howwework (which is also targeted by the white-background
   :has() rule above). Split across two page-builder rows (heading text
   + gallery view embed), so padding is split top/bottom between them. */
.smsf2-moments-section.smsf2-moments-section.smsf2-moments-section { padding: 110px 40px 0 !important; }
@media (max-width: 600px) {
  .smsf2-moments-section.smsf2-moments-section.smsf2-moments-section { padding: 75px 20px 0 !important; }
}
/* The gva_view page-builder embed wraps the View in its own markup
   (.gva-view / .widget.block...) rather than Views' usual
   .view-id-X.view-display-id-Y wrapper, so that selector never matched --
   .smsf2-gallery-grid (our own wrapper_class) is the reliable target. */
.smsf2-gallery-grid { display: block; margin: 40px 0 110px; }
@media (max-width: 600px) {
  .smsf2-gallery-grid { margin: 30px 0 75px; }
}

/* Principle cards (How We Work) -- hairline grid: a 1px gap over a
   line-colored background paints thin dividers between cells, same
   technique as the reference site's .principle-grid rule. */
.smsf2-principles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: #d9ded7;
  border: 1px solid #d9ded7;
}
.smsf2-principle {
  background: #fff;
  padding: 28px 22px;
}
.smsf2-principle h4 {
  font-family: var(--smsf-font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--smsf-brown);
  margin: 0 0 8px;
}
.smsf2-principle p { font-size: 13px; color: #68736d; margin: 0; }
@media (max-width: 950px) { .smsf2-principles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .smsf2-principles { grid-template-columns: 1fr; } }

/* Our Roots -- values copied from the reference site's .roots /
   .map-card rules exactly. */
.smsf2-roots-section.smsf2-roots-section.smsf2-roots-section { padding: 110px 40px !important; }
@media (max-width: 600px) {
  .smsf2-roots-section.smsf2-roots-section.smsf2-roots-section { padding: 75px 20px !important; }
}
.smsf2-roots-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 10vw;
  align-items: center;
}
.smsf2-roots-media {
  background: #e4ece4;
  border: 1px solid #d2ddd3;
  border-radius: 30px;
  padding: 24px;
  text-align: center;
}
.smsf2-roots-media img { display: block; width: 100%; height: 430px; object-fit: contain; }
.smsf2-roots-caption { font-size: 13px; color: #5c6a62; max-width: 430px; margin: 0 auto; }
@media (max-width: 950px) { .smsf2-roots-split { grid-template-columns: 1fr; } }

/* Our People preview cards */
.smsf2-people-grid { display: flex; gap: 32px; flex-wrap: wrap; }
.smsf2-people-card {
  flex: 1 1 380px;
  display: flex;
  gap: 20px;
  background: #F7F5EE;
  border-radius: 20px;
  padding: 20px;
  align-items: center;
}
.smsf2-people-card img { width: 130px; height: 150px; object-fit: cover; border-radius: 14px; flex-shrink: 0; }
.smsf2-people-card .smsf2-kicker { margin-bottom: 8px; }
.smsf2-people-card h3 { font-size: 20px; margin: 0 0 8px; }
.smsf2-people-card p { font-size: 14px; color: #6b7a72; margin: 0 0 10px; }
.smsf2-people-card a { font-size: 14px; font-weight: 700; color: var(--smsf-brown); text-decoration: none; }

/* Homepage "Our People" preview cards -- a dedicated class (not
   .smsf2-people-card, which /management also reuses in a different
   list layout) so this can match the reference site's .person-card.feature
   exactly: centered, capped-width grid; photo-left feature cards with a
   hover lift + shadow. */
.smsf2-people-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
  text-align: left;
}
.smsf2-people-feature {
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: stretch;
  min-height: 260px;
  overflow: hidden;
  border-radius: 18px;
  background: #F7F5EE;
  transition: 0.25s;
}
.smsf2-people-feature:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 60px rgba(163, 78, 0, 0.12);
}
.smsf2-people-feature img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.smsf2-people-feature > div:last-child { padding: 30px; }
.smsf2-people-feature .smsf2-kicker { margin-bottom: 0; }
.smsf2-people-feature h3 { font-family: var(--smsf-font-heading); font-size: 28px; line-height: 1.1; margin: 10px 0; color: var(--smsf-brown); }
.smsf2-people-feature p { font-size: 14px; color: #68736d; margin: 0 0 10px; }
.smsf2-people-feature a { font-size: 13px; font-weight: 700; color: var(--smsf-brown); text-decoration: none; }
@media (max-width: 950px) { .smsf2-people-preview-grid { grid-template-columns: 1fr; } }

/* Moments preview pills */
.smsf2-moments-grid { display: flex; gap: 20px; flex-wrap: wrap; }
.smsf2-moment-card {
  flex: 1 1 180px;
  height: 220px;
  border-radius: 20px;
  background: linear-gradient(160deg, #E4E9DC, #CFDAC4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 24px;
}
.smsf2-moment-card span {
  background: #fff;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--smsf-brown);
}

/* Moments masonry gallery (real photos, Gallery content type via the
   "gallery" View's Moments Masonry display) -- grid mechanic copied
   from the reference site's .gallery/.gallery-item rules: fixed
   3-column template with .large spanning 2 rows and .wide spanning 2
   columns, generalized to any item count via grid-auto-flow:dense so
   more than 5 photos still packs into a sensible mosaic. */
/* wrapper_class from the Views "html_list" style plugin puts .smsf2-gallery-grid
   on a DIV that wraps the actual <ul>, and each <li> IS the real grid item
   (the .smsf2-gallery-item div the "nothing" field renders is nested two
   levels deeper, inside Views' own .views-field/.field-content wrappers,
   so grid-row/grid-column spans must go on the <li> itself -- done via
   the style plugin's row_class option (row_class: "{{ field_gallery_size }}"),
   not on .smsf2-gallery-item). */
/* Moments carousel (reference: jmkfoundation.org "Our Approach") --
   replaces the old CSS-grid masonry with a horizontal, 4-at-a-time
   slider, showing one photo at a time on phones. Built with native CSS
   scroll-snap + two plain-JS prev/next buttons (main.js) rather than the
   base theme's bundled Owl Carousel: Owl 2.3.4's own init throws inside
   this project (jQuery .attr('class') on this <ul>'s missing class
   attribute, then a second, different null-read once that's patched) --
   the same vintage-vendor-JS-vs-current-jQuery problem already worked
   around for the sticky menu elsewhere in this file, so it gets the same
   treatment: skip the fragile library, not fight it further. No JS is
   required for this to work at all -- without it the row is just a
   normal (scrollable-by-drag) row; the buttons are progressive
   enhancement. */
.smsf2-gallery-grid { position: relative; }
.smsf2-gallery-grid ul {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 4px 4px 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.smsf2-gallery-grid ul::-webkit-scrollbar { display: none; }
.smsf2-gallery-grid ul li {
  list-style: none;
  position: relative;
  flex: 0 0 calc(25% - 15px);
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 4 / 5;
}
.smsf2-gallery-grid ul li::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(163, 78, 0, 0.18);
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}
.smsf2-gallery-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.smsf2-gallery-item a {
  position: absolute;
  inset: 0;
  display: block;
  cursor: zoom-in;
}
.smsf2-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.smsf2-gallery-item span {
  position: relative;
  z-index: 1;
  margin: 16px;
  background: rgba(255, 255, 255, 0.85);
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--smsf-brown);
}
@media (max-width: 950px) {
  .smsf2-gallery-grid ul li { flex-basis: calc(33.333% - 14px); }
}
@media (max-width: 700px) {
  .smsf2-gallery-grid ul li { flex-basis: calc(50% - 10px); }
}
@media (max-width: 480px) {
  .smsf2-gallery-grid ul li { flex-basis: 88%; }
}

/* Prev/next buttons, injected by main.js right after the <ul>. */
.smsf2-gallery-nav {
  position: absolute;
  top: calc(50% - 8px);
  left: -22px;
  right: -22px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  transform: translateY(-50%);
}
.smsf2-gallery-nav button {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--smsf-brown);
  box-shadow: 0 10px 24px rgba(163, 78, 0, 0.18);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.smsf2-gallery-nav button:disabled { opacity: 0.35; cursor: default; }
@media (max-width: 700px) {
  .smsf2-gallery-nav { left: 4px; right: 4px; }
}

/* Legacy-to-action numbered cards (dark band) */
/* Values copied from the reference site's .steps / .steps > div rules. */
.smsf2-legacy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.smsf2-legacy-card {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  padding: 28px;
}
.smsf2-legacy-card .smsf2-work-num { color: #BFCDBF; font-size: 12px; }
.smsf2-legacy-card h4 {
  color: #fff !important;
  font-family: var(--smsf-font-heading);
  font-size: 28px;
  font-weight: 400;
  margin: 8px 0;
}
.smsf2-legacy-card p { color: #C9D8CE; font-size: 13px; margin: 0; }
@media (max-width: 700px) {
  .smsf2-legacy-grid { grid-template-columns: 1fr; }
}

/* Get involved / contact -- values copied from the reference site's
   .contact / .contact-box / .small-label / .contact-box > a rules. */
.smsf2-contact-section.smsf2-contact-section.smsf2-contact-section { padding: 110px 40px !important; }
@media (max-width: 600px) {
  .smsf2-contact-section.smsf2-contact-section.smsf2-contact-section { padding: 75px 20px !important; }
}
.smsf2-contact-split {
  display: grid;
  grid-template-columns: 1fr 0.75fr;
  gap: 10vw;
  align-items: start;
}
@media (max-width: 950px) {
  .smsf2-contact-split { grid-template-columns: 1fr; }
}
.smsf2-contact-card {
  background: #F7F5EE;
  border: 1px solid #d9ded7;
  border-radius: 18px;
  padding: 38px;
}
.smsf2-contact-card h4 {
  color: var(--smsf-orange);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  margin: 0 0 20px;
}
.smsf2-contact-card .row { margin-bottom: 18px; }
.smsf2-contact-card .row strong { display: block; font-size: 16px; color: var(--smsf-brown); }
.smsf2-contact-card .row small { display: block; font-size: 12px; color: #68736d; margin-top: 4px; }
.smsf2-contact-card .phone-link {
  display: block;
  font-family: var(--smsf-font-heading);
  font-size: 30px;
  color: var(--smsf-brown) !important;
  text-decoration: none;
}
.smsf2-contact-card .email-link {
  display: block;
  font-size: 16px;
  color: var(--smsf-brown) !important;
  text-decoration: none;
}

/* /board page: 3-column trustee cards (photo top, label/name/bio below).
   Values copied from the reference site's .leadership-grid / .leader-card
   rules exactly. */
.smsf2-board-grid ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.smsf2-board-card {
  border: 1px solid #d9ded7;
  background: #F7F5EE;
  border-radius: 18px;
  overflow: hidden;
  height: 100%;
}
/* aspect-ratio (matching the team photos' actual 688x1032 dimensions)
   instead of a fixed height -- object-fit:cover never needs to crop, so
   heads stay fully visible at every column/viewport width, the same fix
   used earlier for the hero and Our Story images. */
.smsf2-board-photo img {
  width: 100%;
  aspect-ratio: 688 / 1032;
  height: auto;
  object-fit: cover;
  object-position: top center;
  display: block;
}
/* Caroline's supplied photo is itself a much tighter face-fill crop than
   the other trustees' (same canvas size, but framed closer -- nothing to
   "zoom out" to within the image itself). object-fit:contain plus a
   matching-background pad shrinks her rendered face back down so it
   reads at roughly the same scale/headroom as the others, at the cost of
   a visible mat around the photo. Targeted by filename since this is a
   fix for this one photo, not the layout. */
.smsf2-board-photo img[src*="caroline-sitta-mshiu"] {
  object-fit: contain;
  background: #F7F5EE;
  padding: 9% 13%;
}
.smsf2-board-body { padding: 26px; }
.smsf2-role { font-size: 13px; font-weight: 600; color: var(--smsf-orange); margin: 0; }
.smsf2-board-body h3 {
  font-family: var(--smsf-font-heading);
  font-size: 30px;
  font-weight: 400;
  margin: 9px 0 10px;
  color: var(--smsf-brown);
}
.smsf2-board-body p { font-size: 14px; color: #68736d; margin: 0; }
@media (max-width: 900px) { .smsf2-board-grid ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .smsf2-board-grid ul { grid-template-columns: 1fr; } }

/* /management page: single photo-left director card, reusing
   .smsf2-people-card (only used here, not the homepage preview, which
   has its own .smsf2-people-feature class -- see that comment). Values
   copied from the reference's .management-grid / .leader-card.management-card
   / .add-person rules exactly. */
.smsf2-people-grid ul {
  /* The actual 2-column layout (director card | "Coming Next" card) is
     two Bootstrap col_lg:6 page-builder columns, NOT this <ul> -- the
     management_grid View only ever returns one result, so this just
     needs to not add its own layout on top of that. */
  list-style: none;
  margin: 0;
  padding: 0;
}
.smsf2-people-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  border: 1px solid #d9ded7;
  background: #F7F5EE;
  border-radius: 18px;
  overflow: hidden;
}
.smsf2-people-card > div:last-child { padding: 26px; }
.smsf2-people-card h3 {
  font-family: var(--smsf-font-heading);
  font-size: 30px;
  font-weight: 400;
  margin: 9px 0 10px;
  color: var(--smsf-brown);
}
.smsf2-people-card p { font-size: 14px; color: #68736d; margin: 0; }
.smsf2-board-photo-sm img {
  width: 100%;
  aspect-ratio: 688 / 1032;
  height: auto;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.smsf2-coming-next {
  border: 1px dashed #B9C7BB;
  background: #F4F6F1;
  border-radius: 18px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.smsf2-coming-next .smsf2-kicker { font-size: 11px; letter-spacing: 0.14em; }
.smsf2-coming-next h3 {
  font-family: var(--smsf-font-heading);
  font-size: 34px;
  font-weight: 400;
  margin: 10px 0;
  color: var(--smsf-brown);
}
.smsf2-coming-next p { font-size: 14px; color: #68736d; margin: 0; }
@media (max-width: 500px) { .smsf2-people-card { grid-template-columns: 1fr; } }

/* Interior page header band -- values copied from the reference site's
   own page-header section (e.g. /management): a soft sage gradient,
   large 88px title, left-aligned (not centered). */
.smsf2-page-header {
  background: linear-gradient(135deg, #F7F5EE, #E7EEE6);
  padding: 120px 110px 95px;
  text-align: left;
}
.smsf2-page-header h1 { font-size: 88px; font-weight: 700; line-height: 1.05; margin: 0 0 20px; }
.smsf2-page-header p { max-width: 760px; margin: 0; color: #56635c; font-size: 19px; }
@media (max-width: 900px) {
  .smsf2-page-header { padding: 80px 40px 60px; }
  .smsf2-page-header h1 { font-size: 52px; }
}
@media (max-width: 600px) {
  .smsf2-page-header { padding: 60px 20px 40px; }
  .smsf2-page-header h1 { font-size: 38px; }
}
/* Values copied from the reference's .page-actions: left-aligned, first
   link a solid pill button, second a plain text link. */
.smsf2-page-footer-links {
  text-align: left;
  padding: 0 0 70px;
  margin-top: 45px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 26px;
}
.smsf2-page-footer-links a { font-weight: 700; text-decoration: none; }
.smsf2-page-footer-links a:first-child {
  background: var(--smsf-brown);
  color: #fff;
  padding: 13px 22px;
  border-radius: 999px;
}
.smsf2-page-footer-links a:last-child { color: var(--smsf-brown); }

/* Generalized (not per-node-ID) interior-page consistency: whenever a
   page supplies its own .smsf2-page-header, hide the theme's default
   breadcrumb band and native node <header> (title/tabs banner), and give
   every OTHER page-builder row on that page a white background -- the
   reference's own convention (header gradient band, then plain white for
   the rest of the page). Excludes the homepage (node 1), whose sections
   deliberately alternate between white and the off-white page background. */
.breadcrumbs:has(~ * .smsf2-page-header) {
  display: none !important;
}
article.node--view-mode-full:has(.smsf2-page-header) > header {
  display: none !important;
}
article.node--type-page:not([data-history-node-id="1"]):has(.smsf2-page-header) .gbb-row:not(:has(.smsf2-page-header)) {
  background-color: #fff;
  padding: 70px 110px;
}
@media (max-width: 900px) {
  article.node--type-page:not([data-history-node-id="1"]):has(.smsf2-page-header) .gbb-row:not(:has(.smsf2-page-header)) {
    padding: 50px 40px;
  }
}
@media (max-width: 600px) {
  article.node--type-page:not([data-history-node-id="1"]):has(.smsf2-page-header) .gbb-row:not(:has(.smsf2-page-header)) {
    padding: 40px 20px;
  }
}
/* Both the header band and the white content rows should span the full
   viewport width (edge-to-edge), not Bootstrap's default ~1170px
   centered .container -- same override technique used for the homepage
   (body.frontpage ... .bb-container.container), generalized here via the
   .smsf2-page-header marker instead of frontpage-only scoping. Padding
   is applied separately above (to the row) and inside .smsf2-page-header
   itself, so the outer container itself carries none. */
article.node--type-page:not([data-history-node-id="1"]):has(.smsf2-page-header) .bb-container.container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Nav layout (reference): logo on the far left, nav links clustered
   directly next to the "Get in touch" button on the right -- not the base
   theme's default of an absolutely-positioned logo/button either side of
   a middle nav block that ends up looking centered.

   Actual DOM (verified via devtools, not assumption): .header-inner has
   only two direct children, .branding and .main-menu -- .header-action
   is NOT a sibling of .main-menu, it's nested three levels deep inside
   it (.main-menu > .area-main-menu > .area-inner > .header-action,
   alongside .header-menu which holds the real nav). So two separate flex
   contexts are needed: .header-inner (branding vs. everything else) and
   .area-inner (nav vs. button, which is the part that actually holds
   both side by side). */
@media (min-width: 992px) {
  header.header-default .header-main-inner .header-inner {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  header.header-default .header-main-inner .header-inner .branding {
    position: static !important;
    transform: none !important;
    width: auto !important;
    padding-right: 0;
  }
  header.header-default .header-main-inner .header-inner .main-menu {
    /* Must actually fill the remaining width (not just size-to-content)
       so the flex-end alignment below has real room to push the nav+
       button cluster all the way to the container's right edge --
       .main-menu was sizing to its content's width and then space-between
       on .header-inner had nothing left to push against, leaving the
       button ~500px short of the edge. */
    flex: 1 1 auto;
  }
  header.header-default .header-main-inner .header-inner .main-menu .area-main-menu,
  header.header-default .header-main-inner .header-inner .main-menu .area-inner {
    width: 100%;
  }
  header.header-default .header-main-inner .header-inner .main-menu .area-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  header.header-default .header-main-inner .header-inner .header-action {
    position: static !important;
    transform: none !important;
    margin-left: 32px;
    flex: 0 0 auto;
  }
}

/* Site footer -- rebuilt to match the reference site's <footer> exactly
   (own markup in page/footer.html.twig, reached via the page.html.twig
   override that redirects the footer include -- see that file's
   comment). Values copied from the reference's footer/.footer-brand/
   .footer-links/.copyright rules. */
.smsf2-footer {
  /* Sampled directly from the logo's own wordmark ("SAMUEL & MARGARET
     SITTA") -- the previous dark green (#0C2C20) wasn't a logo color at
     all, same issue as the old primary green. */
  background: #5A2904;
  color: #fff;
  padding: 55px clamp(20px, 7vw, 110px);
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 40px;
  /* Was bottom-aligned, which worked when every column was short text --
     now that the logo is as tall as the header's (128px), bottom-aligning
     it against the much shorter nav-links/copyright columns left them
     looking like they were floating well below the logo's centre.
     Centering keeps all three columns level regardless of their own
     height. */
  align-items: center;
}
.smsf2-footer-brand { display: flex; gap: 16px; align-items: center; }
/* Same file used in the header (logo-main.png), just with its one
   dark-brown element (the "SAMUEL & MARGARET SITTA" wordmark) recolored
   to cream so it reads against this dark background -- see the comment
   in footer.html.twig. No plate/background box: the logo file itself is
   fully transparent, so a box behind it isn't part of the actual logo.
   Sized the same as the header's logo (max-height: 128px there) rather
   than the old 45px-tall thumbnail. */
.smsf2-footer-logo {
  max-height: 128px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .smsf2-footer-logo { max-height: 84px; }
}
.smsf2-footer-brand strong {
  display: block;
  font-family: var(--smsf-font-heading);
  font-size: 16px;
  color: #fff;
  font-weight: 700;
}
.smsf2-footer-brand span {
  display: block;
  color: #B9C9BF;
  font-size: 11px;
  max-width: 370px;
  margin-top: 5px;
}
.smsf2-footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
}
.smsf2-footer-links a { color: #D7E2DB !important; text-decoration: none; }
.smsf2-footer-links a:hover { color: #fff !important; }
.smsf2-footer-copyright { font-size: 11px; color: #94A89B; white-space: nowrap; }
@media (max-width: 700px) {
  .smsf2-footer {
    grid-template-columns: 1fr;
    justify-items: start;
    text-align: left;
  }
}

/* Two Tanzanians (Our Story): native builder columns. Photo sits at the
   vertical centre of the row, next to the text column, same as before. */
.row:has(.smsf2-story-photo) { align-items: center; }
.smsf2-story-photo img {
  width: 100%;
  aspect-ratio: 1280 / 833;
  height: auto;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

/* ---- Homepage sections built from native Gavias elements ----
   Rows are targeted by a marker class on one of their elements, since the
   builder doesn't emit row class_css as a real class on the rendered row. */
.gbb-row:has(.smsf2-hero-title) { padding: 70px 0 60px; }
.smsf2-hero-photo img {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 330 / 446;
  height: auto;
  object-fit: cover;
  border-radius: 180px 180px 24px 24px;
  display: block;
  margin-left: auto;
}
.smsf2-hero-title h1 { font-size: 56px; line-height: 1.1; }
.smsf2-hero-caption p { font-size: 15px; margin-top: 12px; }

.gbb-row:has(.smsf2-why-title) { background-color: #fff; padding: 90px 0; }
.smsf2-why-title h2 { font-size: 48px; line-height: 1.15; }

.gbb-row:has(.smsf2-band-title),
.gbb-row:has(.smsf2-legacy-title),
.gbb-row:has(.smsf2-vision-title) {
  background: var(--smsf-brown);
  padding: 80px 0;
}
.gbb-row:has(.smsf2-band-title) h2,
.gbb-row:has(.smsf2-legacy-title) h2,
.gbb-row:has(.smsf2-vision-title) h2,
.gbb-row:has(.smsf2-legacy-title) h4,
.gbb-row:has(.smsf2-band-title) h4 { color: #fff !important; }
.gbb-row:has(.smsf2-band-title) p,
.gbb-row:has(.smsf2-legacy-title) p,
.gbb-row:has(.smsf2-vision-title) p { color: #d7e0da; }
.smsf2-band-title h2 { font-size: 48px; line-height: 1.15; }

.gbb-row:has(.smsf2-work-head-title),
.gbb-row:has(.smsf2-centre-title) { padding-top: 90px; }
.smsf2-centre-title h2 { font-size: 48px; line-height: 1.15; }
.smsf2-centre-lead { text-align: center; color: #6b7a72; max-width: 640px; margin: 0 auto 40px; }

.gbb-row:has(.smsf2-howwork-title) { padding: 90px 0; }
.smsf2-howwork-title h2 { font-size: 48px; line-height: 1.15; text-align: center; }
.smsf2-principle-col { background: #F7F5EE; border: 1px solid #e3e6df; border-radius: 16px; padding: 24px; margin-top: 30px; }
.smsf2-principle-title h4 { font-size: 22px; }
.smsf2-principle-text p { font-size: 14px; color: #68736d; }

.gbb-row:has(.smsf2-roots-title) { padding: 90px 0; background-color: #fff; }
.smsf2-roots-title h2 { font-size: 44px; line-height: 1.15; }
.smsf2-roots-map img { width: 100%; height: 430px; object-fit: contain; background: #fff; border-radius: 18px; }
.smsf2-roots-caption { font-size: 13px; color: #5c6a62; text-align: center; }

.gbb-row:has(.smsf2-people-title) { padding-top: 90px; }
.gbb-row:has(.smsf2-people-photo) { padding-bottom: 90px; }
.smsf2-people-photo img { width: 100%; max-width: 360px; height: 360px; object-fit: cover; border-radius: 18px; }
.smsf2-people-card-title h3 { font-size: 26px; }

.gbb-row:has(.smsf2-moments-head-title) { padding-top: 90px; }

.gbb-row:has(.smsf2-legacy-title) .smsf2-legacy-card { border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 28px; margin-top: 24px; }
.smsf2-legacy-num p { color: #BFCDBF; font-size: 12px; margin: 0; }

.gbb-row:has(.smsf2-contact-title) { padding: 90px 0; }
.smsf2-contact-title h2 { font-size: 44px; line-height: 1.15; }
.smsf2-contact-card { background: #F7F5EE; border: 1px solid #e3e6df; border-radius: 18px; padding: 36px; }
.smsf2-contact-card-title h4 { font-size: 13px; letter-spacing: .15em; text-transform: uppercase; }
.smsf2-contact-card p { font-size: 18px; line-height: 1.8; }
.smsf2-contact-card .phone-link { font-family: var(--smsf-font-heading); font-size: 30px; color: var(--smsf-brown) !important; text-decoration: none; }
.smsf2-contact-card .email-link { color: var(--smsf-brown) !important; text-decoration: none; }
a.smsf2-vision-btn, .smsf2-vision-btn a {
  display: inline-block;
  background: #fff !important;
  color: var(--smsf-brown) !important;
  padding: 14px 30px;
  border-radius: 999px;
  font-family: var(--smsf-font-heading);
  font-weight: 700;
  text-decoration: none;
}

/* Contact page: Address and Email & Phone icon boxes -- centre their text
   under the icon and title. */
.gbb-row:has(.gsc-icon-box) .gsc-icon-box,
.gbb-row:has(.gsc-icon-box) .gsc-icon-box .content,
.gbb-row:has(.gsc-icon-box) .gsc-icon-box .content-inner { text-align: center; }
.gbb-row:has(.gsc-icon-box) .gsc-icon-box .highlight_content,
.gbb-row:has(.gsc-icon-box) .gsc-icon-box .desc { text-align: center; }
.gbb-row:has(.gsc-icon-box) .gsc-icon-box p { text-align: center; }
.gbb-row:has(.gsc-icon-box) .gsc-icon-box .icon.fas,
.gbb-row:has(.gsc-icon-box) .gsc-icon-box .icon.fa {
  font-family: "FontAwesome" !important;
  font-weight: 900;
  font-style: normal;
}
.gbb-row:has(.gsc-icon-box) .gsc-icon-box .icon.fas:before {
  font-family: "FontAwesome";
  font-weight: 900;
}
.gbb-row:has(.gsc-icon-box) .gsc-icon-box .icon.fa-map-marker-alt:before { content: "\f3c5"; }
.gbb-row:has(.gsc-icon-box) .gsc-icon-box .icon.fa-envelope:before { content: "\f0e0"; }