/* =======================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ======================================================= */

:root {

  /* --- Brand Palette --- */
  --primary:          #1F3A5F;
  --secondary:        #3E454C;
  --accent:           #B08D57;
  --background:       #F4F1EA;
  --dark:             #1F2328;
  --text:             #1A1A1A;
  --text-light:       #FFFFFF;

  /* --- Hero Derived Colours --- */
  --hero-overlay-start:       rgba(31, 35, 40, 0.55);
  --hero-overlay-end:         rgba(31, 35, 40, 0.85);
  --hero-bg-fallback:         #1F2328;
  --hero-subtext-color:       rgba(255, 255, 255, 0.88);

  /* Badge */
  --badge-bg:                 rgba(176, 141, 87, 0.15);
  --badge-border:             rgba(176, 141, 87, 0.45);

  /* Secondary / ghost button */
  --btn-secondary-border:     rgba(255, 255, 255, 0.50);
  --btn-secondary-hover-bg:   rgba(255, 255, 255, 0.10);

  /* --- Typography --- */
  --font-heading:   'Roboto Slab', serif;
  --font-body:      'Open Sans', sans-serif;
  --font-size-base: 18px;

  /* --- Layout --- */
  --hero-min-height: 80vh;

  /* --- Navigation --- */
  --nav-height:               68px;
  --nav-bg-transparent:       rgba(31, 35, 40, 0.0);
  --nav-bg-solid:             rgba(31, 35, 40, 0.97);
  --nav-shadow:               0 2px 16px rgba(0, 0, 0, 0.35);
  --nav-border-bottom:        rgba(176, 141, 87, 0.20);
  --nav-link-color:           rgba(255, 255, 255, 0.85);
  --nav-mobile-bg:            rgba(31, 35, 40, 0.99);
  --nav-mobile-border-top:    rgba(176, 141, 87, 0.25);
  --nav-mobile-link-color:    rgba(255, 255, 255, 0.90);
  --nav-mobile-link-hover-bg: rgba(176, 141, 87, 0.08);

  /* --- Welcome section --- */
  --welcome-bg:                 #F4F1EA;
  --welcome-panel-bg:           #1F2328;
  --welcome-panel-header-bg:    rgba(255, 255, 255, 0.03);
  --welcome-panel-divider:      rgba(176, 141, 87, 0.20);
  --welcome-panel-item-divider: rgba(255, 255, 255, 0.05);
  --welcome-panel-icon-bg:      rgba(176, 141, 87, 0.12);
  --welcome-cred-desc-color:    rgba(255, 255, 255, 0.60);

  /* --- What We Do section --- */
  --what-we-do-bg:            #1F2328;
  --do-card-bg:               #3E454C;
  --do-card-border:           rgba(176, 141, 87, 0.20);
  --do-card-icon-color:       #B08D57;
  --do-card-hover-border:     rgba(176, 141, 87, 0.60);
  --do-card-hover-shadow:     0 6px 24px rgba(0, 0, 0, 0.30);

}


/* =======================================================
   2. BASE RESET & GLOBAL DEFAULTS
   ======================================================= */

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

html {
  scroll-behavior:    smooth;
  scroll-padding-top: var(--nav-height);
}

body {
  font-family:             var(--font-body);
  font-size:               var(--font-size-base);
  color:                   var(--text);
  background-color:        var(--background);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* =======================================================
   3. NAVIGATION / SITE HEADER
   ======================================================= */

/* -------------------------------------------
   3a. Header Shell
   ------------------------------------------- */
.site-header {
  position:         fixed;
  top:              0;
  left:             0;
  right:            0;
  z-index:          100;
  background-color: var(--nav-bg-transparent);
  border-bottom:    1px solid transparent;
  transition:
    background-color 0.35s ease,
    border-color     0.35s ease,
    box-shadow       0.35s ease;
}

.site-header--scrolled {
  background-color:    var(--nav-bg-solid);
  border-bottom-color: var(--nav-border-bottom);
  box-shadow:          var(--nav-shadow);
}


/* -------------------------------------------
   3b. Nav Inner Layout
   ------------------------------------------- */
.nav__inner {
  height:          var(--nav-height);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}


/* -------------------------------------------
   3c. Logo / Site Title
   ------------------------------------------- */
.nav__logo {
  font-family:    var(--font-heading);
  font-size:      clamp(0.82rem, 2.2vw, 1.2rem);
  font-weight:    700;
  color:          var(--text-light);
  text-decoration: none;
  line-height:    1.2;
  letter-spacing: 0.01em;
  flex-shrink:    1;
  white-space:    nowrap;
  transition:     color 0.2s ease;
}

.nav__logo:hover,
.nav__logo:focus-visible {
  color: var(--accent);
}


/* -------------------------------------------
   3d. Desktop Nav Links
   ------------------------------------------- */
.nav__menu-wrap {
  display:     flex;
  align-items: center;
}

.nav__list {
  display:     flex;
  align-items: center;
  gap:         0.25rem;
  list-style:  none;
  margin:      0;
  padding:     0;
}

.nav__link {
  font-family:     var(--font-body);
  font-size:       0.95rem;
  font-weight:     600;
  color:           var(--nav-link-color);
  text-decoration: none;
  padding:         0.5em 0.85em;
  border-radius:   2px;
  position:        relative;
  white-space:     nowrap;
  transition:      color 0.2s ease;
}

/* Sliding brass underline on hover / active */
.nav__link::after {
  content:          '';
  position:         absolute;
  bottom:           0;
  left:             0.85em;
  right:            0.85em;
  height:           2px;
  background-color: var(--accent);
  transform:        scaleX(0);
  transform-origin: left center;
  transition:       transform 0.25s ease;
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--accent);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link--active::after {
  transform: scaleX(1);
}

.nav__link--active {
  color: var(--accent);
}

.nav__list:has(.nav__link:hover) .nav__link--active:not(:hover) {
  color: var(--nav-link-color);
}
.nav__list:has(.nav__link:hover) .nav__link--active:not(:hover)::after {
  transform: scaleX(0);
}

.nav__link:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 3px;
}


/* -------------------------------------------
   3e. CTA Button — "Visit Us"
   ------------------------------------------- */
.nav__cta {
  font-family:      var(--font-body);
  font-size:        0.95rem;
  font-weight:      700;
  text-decoration:  none;
  white-space:      nowrap;
  background-color: var(--accent);
  color:            var(--dark);
  border-radius:    3px;
  padding:          0.5em 1.25em;
  margin-left:      0.75rem;
  transition:
    filter           0.25s ease,
    transform        0.2s  ease;
}

.nav__cta:hover,
.nav__cta:focus-visible {
  filter:    brightness(0.85);
  transform: translateY(-1px);
}

.nav__cta:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 3px;
}


/* -------------------------------------------
   3f. Hamburger Button
   ------------------------------------------- */
.nav__hamburger {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             5px;
  width:           44px;
  height:          44px;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  padding:         0;
  border-radius:   3px;
}

.nav__hamburger:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 2px;
}

.nav__hamburger-bar {
  display:          block;
  width:            26px;
  height:           2px;
  background-color: var(--text-light);
  border-radius:    2px;
  transition:
    transform 0.3s  ease,
    opacity   0.25s ease;
}

/* Morph bars into × when menu is open */
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(2) {
  opacity:   0;
  transform: scaleX(0);
}

.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* -------------------------------------------
   3g. Mobile Menu
   ------------------------------------------- */
.nav__mobile {
  overflow:         hidden;
  max-height:       0;
  visibility:       hidden;
  background-color: var(--nav-mobile-bg);
  border-top:       1px solid transparent;
  transition:
    max-height   0.38s ease,
    visibility   0s    linear 0.38s,
    border-color 0.35s ease;
}

.nav__mobile--open {
  max-height:       min(480px, calc(100dvh - 60px));
  overflow-y:       auto;
  visibility:       visible;
  border-top-color: var(--nav-mobile-border-top);
  transition:
    max-height   0.38s ease,
    visibility   0s    linear 0s,
    border-color 0.35s ease;
}

.nav__mobile-list {
  list-style: none;
  margin:     0;
  padding:    0.5rem 0 1rem;
}

.nav__mobile-link {
  display:          block;
  font-family:      var(--font-body);
  font-size:        1.1rem;
  font-weight:      600;
  color:            var(--nav-mobile-link-color);
  text-decoration:  none;
  padding:          0.85em 1.5rem;
  border-left:      3px solid transparent;
  transition:
    color             0.2s ease,
    border-left-color 0.2s ease,
    background-color  0.2s ease;
}

.nav__mobile-link:hover,
.nav__mobile-link:focus-visible {
  color:             var(--accent);
  border-left-color: var(--accent);
  background-color:  var(--nav-mobile-link-hover-bg);
}

.nav__mobile-link--active {
  color:             var(--accent);
  border-left-color: var(--accent);
}

.nav__mobile-link:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: -2px;
}

.nav__mobile-cta {
  display:          inline-block;
  font-family:      var(--font-body);
  font-size:        1.1rem;
  font-weight:      700;
  text-decoration:  none;
  margin:           0.5rem 1.5rem 0;
  padding:          0.7em 1.75em;
  background-color: var(--accent);
  color:            var(--dark);
  border-radius:    3px;
  transition:
    background-color 0.25s ease,
    color            0.25s ease;
}

.nav__mobile-cta:hover,
.nav__mobile-cta:focus-visible {
  background-color: var(--primary);
  color:            var(--text-light);
}

.nav__mobile-cta:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 3px;
}


/* =======================================================
   4. HERO SECTION
   ======================================================= */

/* -------------------------------------------
   4a. Hero Background & Container
   ------------------------------------------- */
.hero {
  background-image:      url('../assets/images/alford-mens-shed-hero-image.png');
  background-size:       cover;
  background-position:   center center;
  background-repeat:     no-repeat;
  background-color:      var(--hero-bg-fallback);
  background-attachment: fixed;

  position:   relative;
  min-height: var(--hero-min-height);
  display:    flex;
  align-items: center;
  overflow:   hidden;
}

.hero__container {
  position:       relative;
  z-index:        2;
  padding-top:    calc(var(--nav-height) + 3.5rem);
  padding-bottom: 6rem;
}


/* -------------------------------------------
   4b. Hero Overlay
   Darkens the photo so text remains legible
   ------------------------------------------- */
.hero__overlay {
  position: absolute;
  inset:    0;
  background: linear-gradient(
    160deg,
    var(--hero-overlay-start) 0%,
    var(--hero-overlay-end)   100%
  );
  z-index: 1;
}


/* -------------------------------------------
   4c. Hero Content Wrapper
   ------------------------------------------- */
.hero__content {
  text-align: left;
}


/* -------------------------------------------
   4d. Hero Badge
   ------------------------------------------- */
.hero__badge {
  display:          inline-block;
  font-family:      var(--font-body);
  font-size:        0.78rem;
  font-weight:      600;
  letter-spacing:   0.15em;
  text-transform:   uppercase;
  color:            var(--accent);
  background-color: var(--badge-bg);
  border:           1px solid var(--badge-border);
  border-radius:    2px;
  padding:          0.4em 0.95em;
  margin-bottom:    1.35rem;

  opacity:   0;
  transform: translateY(18px);
}


/* -------------------------------------------
   4e. Hero Heading
   ------------------------------------------- */
.hero__heading {
  font-family:   var(--font-heading);
  /* clamp: scales from 32px on phones to 56px on wide desktop */
  font-size:     clamp(2rem, 5vw, 3.5rem);
  font-weight:   700;
  line-height:   1.15;
  color:         var(--text-light);
  margin-bottom: 1.25rem;

  opacity:   0;
  transform: translateY(18px);
}


/* -------------------------------------------
   4f. Hero Supporting Text
   ------------------------------------------- */
.hero__subtext {
  font-family:   var(--font-body);
  font-size:     clamp(1rem, 2.2vw, 1.35rem);
  font-weight:   400;
  line-height:   1.8;
  color:         var(--hero-subtext-color);
  max-width:     530px;
  margin-bottom: 2.25rem;

  opacity:   0;
  transform: translateY(18px);
}


/* -------------------------------------------
   4g. Hero Buttons
   ------------------------------------------- */
.hero__buttons {
  display:   flex;
  flex-wrap: wrap;
  gap:       1rem;

  opacity:   0;
  transform: translateY(18px);
}

/* Shared button base */
.hero__btn {
  display:         inline-block;
  font-family:     var(--font-body);
  font-size:       1rem;
  font-weight:     600;
  letter-spacing:  0.03em;
  text-decoration: none;
  border-radius:   3px;
  padding:         0.72em 1.85em;
  min-width:       128px;
  text-align:      center;
  border:          2px solid transparent;
  transition:
    background-color 0.25s ease,
    color            0.25s ease,
    border-color     0.25s ease,
    filter           0.25s ease,
    transform        0.2s  ease;
  cursor: pointer;
}

.hero__btn--primary {
  background-color: var(--accent);
  color:            var(--dark);
  border-color:     var(--accent);
}

.hero__btn--primary:hover,
.hero__btn--primary:focus-visible {
  filter:    brightness(0.85);
  transform: translateY(-2px);
}

.hero__btn--secondary {
  background-color: transparent;
  color:            var(--text-light);
  border-color:     var(--btn-secondary-border);
}

.hero__btn--secondary:hover,
.hero__btn--secondary:focus-visible {
  background-color: var(--btn-secondary-hover-bg);
  border-color:     var(--text-light);
  color:            var(--text-light);
  transform:        translateY(-2px);
}

.hero__btn:focus-visible {
  outline:        3px solid var(--accent);
  outline-offset: 3px;
}


/* =======================================================
   5. RESPONSIVE — NAVIGATION
   ======================================================= */

@media (max-width: 1100px) {
  .nav__logo {
    font-size: 1rem;
  }
}

@media (max-width: 991px) {
  .nav__menu-wrap {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }
}

@media (max-width: 767px) {
  .site-header {
    background-color:    var(--nav-bg-solid);
    border-bottom-color: var(--nav-border-bottom);
    box-shadow:          var(--nav-shadow);
  }
}


/* =======================================================
   6. RESPONSIVE — HERO
   ======================================================= */

@media (max-width: 991px) {
  .hero {
    background-attachment: scroll;
    min-height: 70vh;
  }

  .hero__container {
    padding-top: calc(var(--nav-height) + 2.5rem);
  }
}

@media (max-width: 767px) {
  .hero {
    margin-top: var(--nav-height); /* push below fixed solid nav */
  }

  .hero__container {
    padding-top:    2rem;
    padding-bottom: 4.5rem;
  }

  .hero__content {
    text-align: center;
  }

  .hero__subtext {
    margin-left:  auto;
    margin-right: auto;
  }

  .hero__buttons {
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
  }

  .hero__btn {
    width:     100%;
    max-width: 300px;
  }
}

@media (max-width: 575px) {
  .hero {
    min-height: auto;
  }
}


/* =======================================================
   7. SHARED SECTION UTILITIES
   ======================================================= */

.section-eyebrow {
  font-family:    var(--font-body);
  font-size:      0.8rem;
  font-weight:    600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  0.6rem;
}

.section-eyebrow--light {
  color: var(--accent);
}

.section-heading {
  font-family:   var(--font-heading);
  font-size:     clamp(2.35rem, 5.5vw, 3.2rem);
  font-weight:   700;
  line-height:   1.2;
  color:         var(--primary);
  margin-bottom: 1.5rem;
}

.section-heading--light {
  color: var(--text-light);
}

.section-btn {
  display:          inline-block;
  font-family:      var(--font-body);
  font-size:        1rem;
  font-weight:      600;
  text-decoration:  none;
  border-radius:    3px;
  padding:          0.7em 1.65em;
  border:           2px solid transparent;
  cursor:           pointer;
  transition:
    background-color 0.25s ease,
    color            0.25s ease,
    border-color     0.25s ease,
    filter           0.25s ease;
}

.section-btn--primary {
  background-color: var(--accent);
  color:            var(--dark);
  border-color:     var(--accent);
}

.section-btn--primary:hover,
.section-btn--primary:focus-visible {
  filter: brightness(0.85);
}

.section-btn--outline {
  background-color: transparent;
  color:            var(--accent);
  border-color:     var(--accent);
}

.section-btn--outline:hover,
.section-btn--outline:focus-visible {
  background-color: var(--accent);
  color:            var(--dark);
}

.section-btn:focus-visible {
  outline:        3px solid var(--accent);
  outline-offset: 3px;
}

.section-header {
  margin-bottom: 2rem;
}


/* =======================================================
   8. SHED STORY SECTION
   ======================================================= */

/* -------------------------------------------
   8a. Section shell
   ------------------------------------------- */
.shed-story {
  position:         relative;
  background-color: var(--welcome-bg);
  border-top:       3px solid var(--accent);
  padding:          5rem 0;
  overflow:         hidden;
}

.shed-story__overlay {
  position:         absolute;
  inset:            0;
  background-color: var(--what-we-do-bg);
  opacity:          0;
  pointer-events:   none;
  z-index:          0;
}

.shed-story__inner {
  position: relative;
  z-index:  1;
}


/* -------------------------------------------
   8b. Welcome text (left column)
   ------------------------------------------- */
.welcome__body {
  font-family:   var(--font-body);
  font-size:     1.05rem;
  line-height:   1.85;
  color:         var(--text);
  margin-bottom: 1.25rem;
  max-width:     62ch;
}

.welcome__body:last-of-type {
  margin-bottom: 0;
}

.welcome__more-btn {
  align-self: flex-start;
  margin-top: 1.75rem;
  font-size:  1rem;
}


/* -------------------------------------------
   8c. Right column — credential items
   Stacked vertically with a divider between
   each item. On mobile these are fully visible;
   on desktop GSAP fades them in during Act 5.
   ------------------------------------------- */
.shed-story__creds {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.shed-story__creds .cred-item {
  padding:       1rem 0;
  border-bottom: 1px solid var(--welcome-panel-divider);
}

.shed-story__creds .cred-item:first-child { padding-top:    0; }
.shed-story__creds .cred-item:last-child  { padding-bottom: 0; border-bottom: none; }


/* -------------------------------------------
   8d. Mobile placeholder images
   Replace the birdhouse stage on small screens.
   ------------------------------------------- */
.shed-story__mobile-img img {
  width:         100%;
  border-radius: 6px;
  object-fit:    cover;
  max-height:    280px;
}


/* -------------------------------------------
   8e. Birdhouse stage (right column, desktop)
   ------------------------------------------- */

.birdhouse-stage {
  position:     relative;
  width:        300px;
  aspect-ratio: 1414 / 2000;
  overflow:     visible;
}

.birdhouse__piece {
  position:         absolute;
  inset:            0;
  will-change:      transform, opacity;
  transform-origin: center center;
  opacity:          0;
}

.birdhouse__piece img {
  display:   block;
  width:     100%;
  height:    100%;
  max-width: none;
}

/* Z-index stacking: back → sides → face → roof → landing */
.birdhouse__piece--back    { z-index: 1; }
.birdhouse__piece--side-l  { z-index: 2; }
.birdhouse__piece--side-r  { z-index: 2; }
.birdhouse__piece--face    { z-index: 3; }
.birdhouse__piece--roof-l  { z-index: 4; }
.birdhouse__piece--roof-r  { z-index: 4; }
.birdhouse__piece--landing { z-index: 5; }

.birdhouse__face {
  position: absolute;
  inset:    0;
  display:  block;
  width:    100%;
  height:   100%;
}
.birdhouse__face--dark { opacity: 0; }


/* -------------------------------------------
   8f. Desktop overrides (≥ 992px)
   ------------------------------------------- */
@media (min-width: 992px) {
  .shed-story {
    padding:     0;
    min-height:  100vh;
    display:     flex;
    align-items: center;
  }

  .shed-story__inner { width: 100%; padding: 5rem 0; }

  .shed-story__left-col {
    position: relative;
    overflow: hidden;
  }

  .shed-story__panel--welcome,
  .shed-story__mobile-img {
    position: relative;
    z-index:  1;
  }

  .shed-story__right-col {
    position:   relative;
    min-height: 480px;
  }

  .shed-story__scene-img {
    position:      absolute;
    inset:         0;
    overflow:      hidden;
    border-radius: 8px;
  }
  .shed-story__scene-img img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
  }
  .shed-story__scene-img--wwd {
    opacity:       0;
    inset:         auto;
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -50%);
    width:         468px;
    height:        360px;
    border-radius: 8px;
  }

  .shed-story__birdhouse-wrap {
    position:        absolute;
    inset:           0;
    align-items:     center;
    justify-content: center;
  }

  .shed-story__creds {
    position:        absolute;
    inset:           0;
    justify-content: center;
  }

  .shed-story__creds .cred-item {
    opacity: 0;
  }
}


/* =======================================================
   9. WHAT WE DO SECTION
   ======================================================= */

/* -------------------------------------------
   9a. Section Layout
   ------------------------------------------- */
.what-we-do {
  background-color: var(--what-we-do-bg);
  padding:          5rem 0;
}


/* -------------------------------------------
   9b. Activity Cards
   ------------------------------------------- */
.do-card {
  background-color: var(--do-card-bg);
  border:           1px solid var(--do-card-border);
  border-radius:    4px;
  padding:          2rem 1.75rem 2.25rem;
  height:           100%;
  transition:
    border-color 0.25s ease,
    box-shadow   0.25s ease,
    transform    0.25s ease;
}

.do-card:hover {
  border-color: var(--do-card-hover-border);
  box-shadow:   var(--do-card-hover-shadow);
  transform:    translateY(-4px);
}

.do-card__icon {
  width:         40px;
  height:        40px;
  color:         var(--do-card-icon-color);
  margin-bottom: 1.25rem;
}

.do-card__icon svg {
  width:  100%;
  height: 100%;
}

.do-card__title {
  font-family:   var(--font-heading);
  font-size:     1.1rem;
  font-weight:   700;
  color:         var(--text-light);
  margin-bottom: 0.75rem;
}

.do-card__body {
  font-family: var(--font-body);
  font-size:   0.98rem;
  line-height: 1.75;
  color:       rgba(255, 255, 255, 0.78);
  margin:      0;
}


/* =======================================================
   11. CREDENTIAL ITEMS
   ======================================================= */

.cred-item {
  display:        flex;
  flex-direction: column;
  gap:            0.55rem;
}

.cred-item__icon {
  flex-shrink:      0;
  width:            36px;
  height:           36px;
  background-color: var(--welcome-panel-icon-bg);
  border-radius:    3px;
  color:            var(--accent);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          7px;
  margin-bottom:    0.2rem;
}

.cred-item__icon svg {
  width:  100%;
  height: 100%;
}

.cred-item__label {
  display:     block;
  font-family: var(--font-body);
  font-size:   0.95rem;
  font-weight: 700;
  color:       var(--text);
}

.cred-item__desc {
  display:     block;
  font-family: var(--font-body);
  font-size:   0.875rem;
  line-height: 1.65;
  color:       var(--secondary);
}

@media (min-width: 992px) {
  .cred-item__label { color: var(--text-light); }
  .cred-item__desc  { color: var(--welcome-cred-desc-color); }
}


/* =======================================================
   10. RESPONSIVE — SHED STORY & WHAT WE DO
   ======================================================= */

/* --- Tablet and below (≤ 991px) --- */
@media (max-width: 991px) {
  .shed-story,
  .what-we-do {
    padding: 4rem 0;
  }
}

/* --- Small screen (≤ 767px) --- */
@media (max-width: 767px) {

  .section-eyebrow,
  .section-heading {
    text-align: center;
  }

  .welcome__body {
    text-align: center;
    max-width:  100%;
  }

  .welcome__more-btn {
    align-self: center;
    width:      100%;
    text-align: center;
  }

  .do-card {
    text-align: center;
  }

  .do-card__icon {
    margin-left:  auto;
    margin-right: auto;
  }

  .cred-item {
    align-items: center;
    text-align:  center;
  }
}

/* --- Mobile (≤ 575px): tighter padding only --- */
@media (max-width: 575px) {
  .shed-story,
  .what-we-do {
    padding: 3rem 0;
  }
}


/* =======================================================
   12. QUICK CTA SECTION
   Parchment background, centred heading and two buttons.
   ======================================================= */

.quick-cta {
  background-color: var(--background);
  border-top:       3px solid var(--accent);
  padding:          5.5rem 0;
}

.quick-cta__body {
  font-family:   var(--font-body);
  font-size:     1.1rem;
  line-height:   1.8;
  color:         var(--secondary);
  max-width:     520px;
  margin:        0 auto 2.25rem;
}

.quick-cta__buttons {
  display:         flex;
  flex-wrap:       wrap;
  gap:             1rem;
  justify-content: center;
}

@media (max-width: 767px) {
  .quick-cta__body {
    text-align: center;
  }
}

@media (max-width: 575px) {
  .quick-cta {
    padding: 3.5rem 0;
  }
}


/* =======================================================
   13. IMAGE STRIP SECTION
   ======================================================= */

.img-strip {
  background-color: var(--dark);
  overflow:         hidden;
}

.img-strip__track {
  display: flex;
  height:  280px;
}

.img-strip__item {
  flex:     1;
  overflow: hidden;
}

.img-strip__item + .img-strip__item {
  border-left: 2px solid var(--dark);
}

.img-strip__item img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.img-strip__item:hover img {
  transform: scale(1.05);
}

@media (max-width: 575px) {
  .img-strip__track {
    height: 160px;
  }
}


/* =======================================================
   14. SITE FOOTER
   ======================================================= */

.site-footer {
  background-color: var(--dark);
  color:            rgba(255, 255, 255, 0.75);
  font-family:      var(--font-body);
}

/* ── Main content area ─────────────────────────────── */
.site-footer__main {
  padding: 4.5rem 0 3.5rem;
  border-top: 3px solid var(--accent);
}

.site-footer__brand {
  font-family:   var(--font-heading);
  font-size:     1.1rem;
  font-weight:   700;
  color:         var(--text-light);
  margin-bottom: 0.85rem;
  line-height:   1.3;
}

.site-footer__about {
  font-size:   0.9rem;
  line-height: 1.75;
  color:       rgba(255, 255, 255, 0.65);
  margin:      0;
}

.site-footer__heading {
  font-family:    var(--font-body);
  font-size:      0.78rem;
  font-weight:    700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  1.1rem;
}

.site-footer__links {
  list-style:    none;
  padding:       0;
  margin:        0;
  display:       flex;
  flex-direction: column;
  gap:           0.55rem;
}

.site-footer__links a {
  font-size:       0.92rem;
  color:           rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition:      color 0.2s ease;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--accent);
}

.site-footer__info {
  margin:  0 0 1rem;
  display: flex;
  flex-direction: column;
  gap:     0.3rem;
}

.site-footer__info dt {
  font-size:      0.78rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.45);
  margin-top:     0.75rem;
}

.site-footer__info dt:first-child {
  margin-top: 0;
}

.site-footer__info dd {
  font-size:   0.9rem;
  line-height: 1.7;
  color:       rgba(255, 255, 255, 0.72);
  margin:      0;
}

.site-footer__info dd a,
.site-footer__info a {
  color:           var(--accent);
  text-decoration: none;
  transition:      color 0.2s ease;
}

.site-footer__info dd a:hover,
.site-footer__info a:hover {
  color: var(--text-light);
}

/* Drop-in / contact note */
.site-footer__note {
  font-size:    0.875rem;
  line-height:  1.65;
  color:        rgba(255, 255, 255, 0.50);
  margin:       0;
  font-style:   italic;
  border-left:  2px solid rgba(176, 141, 87, 0.35);
  padding-left: 0.85rem;
}

/* ── Bottom bar ────────────────────────────────────── */
.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding:    1.35rem 0;
}

.site-footer__bottom-inner {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: space-between;
  gap:             0.75rem;
}

.site-footer__legal,
.site-footer__credit {
  font-size: 0.8rem;
  color:     rgba(255, 255, 255, 0.38);
  margin:    0;
}

.site-footer__credit a {
  color:           rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition:      color 0.2s ease;
}

.site-footer__credit a:hover {
  color: var(--accent);
}

/* Responsive */
@media (max-width: 767px) {
  .site-footer__bottom-inner {
    flex-direction: column;
    align-items:    center;
    text-align:     center;
  }
}

@media (max-width: 575px) {
  .site-footer__main {
    padding: 3rem 0 2.5rem;
  }
}


/* =======================================================
   15. ABOUT PAGE
   Page hero, section shell, stat grid, pillars, timeline,
   and FAQ accordion overrides.
   ======================================================= */

/* --- Page hero (compact, dark) --- */
.page-hero {
  background-image:      url('../assets/images/alford-mens-shed-hero-image.png');
  background-size:       cover;
  background-position:   center center;
  background-attachment: fixed;
  background-color:      var(--hero-bg-fallback);
  position:              relative;
  min-height:            42vh;
  display:               flex;
  align-items:           center;
  overflow:              hidden;
}

.page-hero__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(160deg, rgba(31,35,40,0.65) 0%, rgba(31,35,40,0.92) 100%);
  z-index:    1;
}

.page-hero__container {
  position:       relative;
  z-index:        2;
  padding-top:    calc(var(--nav-height) + 2.5rem);
  padding-bottom: 4rem;
}

.page-hero__heading {
  font-family:   var(--font-heading);
  font-size:     clamp(2.5rem, 6vw, 4rem);
  font-weight:   700;
  color:         var(--text-light);
  line-height:   1.15;
  margin-bottom: 1rem;
}

.page-hero__subtext {
  font-size:  clamp(1rem, 2vw, 1.2rem);
  color:      rgba(255, 255, 255, 0.80);
  max-width:  480px;
  margin:     0;
}

/* --- About section shells --- */
.about-section {
  padding: 5rem 0;
}

.about-section--light {
  background-color: var(--background);
  border-top:       3px solid var(--accent);
}

.about-section--dark {
  background-color: var(--dark);
  border-top:       3px solid rgba(176, 141, 87, 0.30);
}

/* Body text (light sections) */
.about-body {
  font-family:   var(--font-body);
  font-size:     1.05rem;
  line-height:   1.85;
  color:         var(--secondary);
  margin-bottom: 1.1rem;
}

.about-body:last-of-type { margin-bottom: 0; }

.about-body strong { color: var(--text); }

/* --- Stat grid --- */
.about-stat-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1.25rem;
}

.about-stat {
  background-color: var(--welcome-panel-bg);
  border:           1px solid rgba(176, 141, 87, 0.20);
  border-radius:    4px;
  padding:          1.5rem 1.25rem;
  text-align:       center;
  transition:
    border-color 0.25s ease,
    box-shadow   0.25s ease,
    transform    0.25s ease;
}

.about-stat:hover {
  border-color: rgba(176, 141, 87, 0.60);
  box-shadow:   0 6px 24px rgba(0, 0, 0, 0.30);
  transform:    translateY(-4px);
}

.about-stat__value {
  display:     block;
  font-family: var(--font-heading);
  font-size:   clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color:       var(--accent);
  line-height: 1.1;
}

.about-stat__label {
  display:        block;
  font-family:    var(--font-body);
  font-size:      0.78rem;
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.50);
  margin-top:     0.4rem;
}

/* --- Mission / Aim / Ambition pillars --- */
.about-pillar {
  background-color: var(--do-card-bg);
  border:           1px solid var(--do-card-border);
  border-radius:    4px;
  padding:          2rem 1.75rem 2.25rem;
  height:           100%;
  transition:
    border-color 0.25s ease,
    box-shadow   0.25s ease,
    transform    0.25s ease;
}

.about-pillar:hover {
  border-color: var(--do-card-hover-border);
  box-shadow:   var(--do-card-hover-shadow);
  transform:    translateY(-4px);
}

.about-pillar__icon {
  width:         40px;
  height:        40px;
  color:         var(--accent);
  margin-bottom: 1.25rem;
}

.about-pillar__icon svg {
  width:  100%;
  height: 100%;
}

.about-pillar__title {
  font-family:   var(--font-heading);
  font-size:     1.1rem;
  font-weight:   700;
  color:         var(--text-light);
  margin-bottom: 0.75rem;
}

.about-pillar__body {
  font-family: var(--font-body);
  font-size:   0.98rem;
  line-height: 1.75;
  color:       rgba(255, 255, 255, 0.78);
  margin:      0;
}

/* --- History timeline --- */
.about-timeline {
  position:     relative;
  margin-top:   2.5rem;
  padding-left: 0;
}

/* Vertical rule */
.about-timeline::before {
  content:          '';
  position:         absolute;
  top:              0;
  bottom:           0;
  left:             108px;
  width:            2px;
  background-color: rgba(176, 141, 87, 0.25);
}

.about-timeline__item {
  display:       flex;
  gap:           1.75rem;
  margin-bottom: 2.5rem;
}

.about-timeline__item:last-child {
  margin-bottom: 0;
}

.about-timeline__marker {
  flex-shrink: 0;
  width:       108px;
  text-align:  right;
  padding-top: 0.2rem;
}

.about-timeline__year {
  display:          inline-block;
  font-family:      var(--font-heading);
  font-size:        0.85rem;
  font-weight:      700;
  color:            var(--accent);
  background-color: rgba(176, 141, 87, 0.10);
  border:           1px solid rgba(176, 141, 87, 0.30);
  border-radius:    3px;
  padding:          0.25em 0.7em;
  position:         relative;
}

/* Dot sitting on the vertical rule */
.about-timeline__year::after {
  content:          '';
  position:         absolute;
  top:              50%;
  right:            -26px;
  width:            10px;
  height:           10px;
  border-radius:    50%;
  background-color: var(--accent);
  transform:        translateY(-50%);
}

.about-timeline__content {
  flex:             1;
  background-color: #fff;
  border:           1px solid rgba(31, 35, 40, 0.10);
  border-radius:    4px;
  padding:          1.25rem 1.5rem;
}

.about-timeline__title {
  font-family:   var(--font-heading);
  font-size:     1rem;
  font-weight:   700;
  color:         var(--text);
  margin-bottom: 0.5rem;
}

.about-timeline__body {
  font-family: var(--font-body);
  font-size:   0.92rem;
  line-height: 1.75;
  color:       var(--secondary);
  margin:      0;
}

/* --- FAQ accordion (Bootstrap override) --- */
.about-faq .about-faq__item {
  background-color: transparent;
  border:           1px solid rgba(31, 35, 40, 0.12) !important;
  border-radius:    4px !important;
  overflow:         hidden;
  margin-bottom:    0.75rem;
}

.about-faq .about-faq__btn {
  font-family:      var(--font-body);
  font-size:        1rem;
  font-weight:      600;
  color:            var(--text);
  background-color: #fff;
  padding:          1.1rem 1.5rem;
  box-shadow:       none;
}

.about-faq .about-faq__btn:not(.collapsed) {
  color:            var(--accent);
  background-color: rgba(176, 141, 87, 0.06);
  box-shadow:       none;
}

/* Accordion chevron — accent colour */
.about-faq .about-faq__btn::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23B08D57'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.about-faq .about-faq__body {
  font-family:      var(--font-body);
  font-size:        0.98rem;
  line-height:      1.78;
  color:            var(--secondary);
  background-color: #fff;
  padding:          1rem 1.5rem 1.35rem;
}

.about-faq .about-faq__body a {
  color:           var(--accent);
  text-decoration: none;
}

.about-faq .about-faq__body a:hover {
  color: var(--primary);
}

/* Responsive */
@media (max-width: 991px) {
  .about-section  { padding: 4rem 0; }

  .about-timeline::before { left: 90px; }
  .about-timeline__marker { width: 90px; }
  .about-timeline__year::after { right: -22px; }
}

@media (max-width: 767px) {
  .page-hero {
    min-height:            35vh;
    background-attachment: scroll;
  }

  /* Stack timeline vertically */
  .about-timeline::before  { display: none; }
  .about-timeline__item    { flex-direction: column; gap: 0.6rem; }
  .about-timeline__marker  { width: auto; text-align: left; }
  .about-timeline__year::after { display: none; }
}

@media (max-width: 575px) {
  .about-section { padding: 3rem 0; }

  .page-hero__container {
    padding-top:    calc(var(--nav-height) + 1.5rem);
    padding-bottom: 2.5rem;
  }
}


/* =======================================================
   16. PROJECTS PAGE
   Section shell, project card grid, responsive.
   ======================================================= */

/* -------------------------------------------
   16a. Section Shell
   Dark background matches the overall dark-
   section pattern used across the site.
   ------------------------------------------- */
.projects-section {
  background-color: var(--dark);
  border-top:       3px solid rgba(176, 141, 87, 0.30);
  padding:          5rem 0;
}


/* -------------------------------------------
   16b. Project Card
   Image placeholder on top, title + one-line
   description below. Reuses card token vars.
   ------------------------------------------- */
.project-card {
  background-color: var(--do-card-bg);
  border:           1px solid var(--do-card-border);
  border-radius:    4px;
  overflow:         hidden;
  height:           100%;
  transition:
    border-color 0.25s ease,
    box-shadow   0.25s ease,
    transform    0.25s ease;
}

.project-card:hover {
  border-color: var(--do-card-hover-border);
  box-shadow:   var(--do-card-hover-shadow);
  transform:    translateY(-4px);
}


/* -------------------------------------------
   16c. Project Card — Image Area
   Acts as a photo slot (fixed height, dark bg).
   When a real <img> is placed inside it will
   cover the container via object-fit:cover.
   Without an <img> the placeholder SVG shows.
   ------------------------------------------- */
.project-card__img {
  position:         relative;
  height:           200px;
  background-color: var(--secondary);
  overflow:         hidden;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  color:            rgba(176, 141, 87, 0.50);  /* icon tint */
}

/* Placeholder SVG icon */
.project-card__img svg {
  width:      56px;
  height:     56px;
  flex-shrink: 0;
}

/* Real photo — covers the container once added */
.project-card__img img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.5s ease;
}

.project-card:hover .project-card__img img {
  transform: scale(1.05);
}


/* -------------------------------------------
   16d. Project Card — Body (title + desc)
   ------------------------------------------- */
.project-card__body {
  padding: 1.5rem 1.75rem 1.75rem;
}

.project-card__title {
  font-family:   var(--font-heading);
  font-size:     1.1rem;
  font-weight:   700;
  color:         var(--text-light);
  margin-bottom: 0.65rem;
}

.project-card__desc {
  font-family: var(--font-body);
  font-size:   0.95rem;
  line-height: 1.7;
  color:       rgba(255, 255, 255, 0.72);
  margin:      0;
}


/* -------------------------------------------
   16e. Responsive — Projects Page
   ------------------------------------------- */
@media (max-width: 991px) {
  .projects-section { padding: 4rem 0; }
}

@media (max-width: 767px) {
  .project-card {
    text-align: center;
  }
}

}

@media (max-width: 575px) {
  .projects-section    { padding: 3rem 0; }
  .project-card__img   { height: 180px; }
}


/* =======================================================
   17. FACILITIES FOR HIRE & GREEN HUB
   (what-we-do.html — sections added below Community Activities)
   ======================================================= */

/* -------------------------------------------
   17a. Facility Block
   Each block = one facility row (text + 2 images).
   Dividers between blocks; last has no divider.
   ------------------------------------------- */
.facility-block {
  padding:       3rem 0;
  border-bottom: 1px solid rgba(176, 141, 87, 0.20);
}

.facility-block:last-of-type {
  padding-bottom: 0;
  border-bottom:  none;
}

.facility-block__title {
  font-family:   var(--font-heading);
  font-size:     1.5rem;
  font-weight:   700;
  color:         var(--primary);
  margin-bottom: 0.75rem;
  margin-top:    0.65rem;
}

.facility-block__cta {
  display:    inline-block;
  margin-top: 1.5rem;
}

/* Intro paragraph above the three blocks */
.facilities-intro {
  font-family:   var(--font-body);
  font-size:     1.05rem;
  line-height:   1.8;
  color:         var(--secondary);
  max-width:     60ch;
  margin:        0 auto 0.5rem;
  text-align:    center;
}


/* -------------------------------------------
   17b. Facility badges — "For Hire" / "Members Only"
   ------------------------------------------- */
.facility-badge {
  display:        inline-block;
  font-family:    var(--font-body);
  font-size:      0.72rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius:  2px;
  padding:        0.3em 0.85em;
  margin-bottom:  0.4rem;
}

.facility-badge--hire {
  background-color: rgba(176, 141, 87, 0.12);
  border:           1px solid rgba(176, 141, 87, 0.40);
  color:            var(--accent);
}

.facility-badge--members {
  background-color: rgba(31, 58, 95, 0.08);
  border:           1px solid rgba(31, 58, 95, 0.30);
  color:            var(--primary);
}


/* -------------------------------------------
   17c. Facility image placeholder slots
   ------------------------------------------- */
.facility-img-slot {
  position:         relative;
  width:            100%;
  aspect-ratio:     4 / 3;
  background-color: var(--secondary);
  border:           1px solid rgba(176, 141, 87, 0.15);
  border-radius:    4px;
  overflow:         hidden;
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  color:            rgba(176, 141, 87, 0.50);
  gap:              0.5rem;
}

.facility-img-slot svg {
  width:  48px;
  height: 48px;
  flex-shrink: 0;
}

/* Real photo — drop in as absolute child */
.facility-img-slot img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}


/* -------------------------------------------
   17d. Green Hub body text (dark section)
   ------------------------------------------- */
.section-body--on-dark {
  font-family:   var(--font-body);
  font-size:     1.05rem;
  line-height:   1.85;
  color:         rgba(255, 255, 255, 0.82);
  margin-bottom: 1.1rem;
}

.section-body--on-dark:last-of-type { margin-bottom: 0; }


/* -------------------------------------------
   17e. Green Hub portrait benefit map slot
   ------------------------------------------- */
.green-hub__map-slot {
  position:         relative;
  width:            100%;
  aspect-ratio:     3 / 4;
  background-color: var(--secondary);
  border:           1px solid rgba(176, 141, 87, 0.20);
  border-radius:    4px;
  overflow:         hidden;
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  color:            rgba(176, 141, 87, 0.50);
  gap:              0.75rem;
}

.green-hub__map-slot svg {
  width:       56px;
  height:      56px;
  flex-shrink: 0;
}

.green-hub__map-label {
  font-family:    var(--font-body);
  font-size:      0.78rem;
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          rgba(176, 141, 87, 0.55);
  margin:         0;
}

/* Real benefit map image */
.green-hub__map-slot img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: contain;
  display:    block;
}


/* -------------------------------------------
   17f. Green Hub photo gallery (8 images)
   ------------------------------------------- */
.green-hub-gallery {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   0.85rem;
  margin-top:            2.5rem;
}

.green-hub-gallery__slot {
  position:         relative;
  aspect-ratio:     4 / 3;
  background-color: var(--secondary);
  border:           1px solid rgba(176, 141, 87, 0.15);
  border-radius:    4px;
  overflow:         hidden;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  color:            rgba(176, 141, 87, 0.45);
  transition:       border-color 0.25s ease;
}

.green-hub-gallery__slot:hover { border-color: rgba(176, 141, 87, 0.50); }

.green-hub-gallery__slot svg {
  width:  40px;
  height: 40px;
}

.green-hub-gallery__slot img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.5s ease;
}

.green-hub-gallery__slot:hover img { transform: scale(1.05); }


/* -------------------------------------------
   17g. Responsive — Facilities & Green Hub
   ------------------------------------------- */
@media (max-width: 991px) {
  .green-hub-gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .facility-block     { padding: 2.5rem 0; }
  .green-hub-gallery  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
  .facility-block     { padding: 2rem 0; }
  .green-hub-gallery  { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
}


/* =======================================================
   18. SHOP SECTION
   (projects.html — product cards with Enquire + Call actions)
   ======================================================= */

/* -------------------------------------------
   18a. Section Shell
   ------------------------------------------- */
.shop-section {
  background-color: var(--what-we-do-bg);
  border-top:       3px solid rgba(176, 141, 87, 0.30);
  padding:          5rem 0;
}

/* Intro paragraphs above the grid */
.shop-intro {
  font-family:   var(--font-body);
  font-size:     1rem;
  line-height:   1.8;
  color:         rgba(255, 255, 255, 0.72);
  max-width:     72ch;
  margin:        0 auto 0.75rem;
}

.shop-intro--note {
  font-style: italic;
  color:      rgba(255, 255, 255, 0.50);
}

/* Enquire note below the grid */
.shop-enquire-note {
  font-family: var(--font-body);
  font-size:   0.95rem;
  color:       rgba(255, 255, 255, 0.55);
}

.shop-enquire-note strong { color: rgba(255, 255, 255, 0.80); }

.shop-enquire-note a {
  color:           var(--accent);
  text-decoration: none;
}

.shop-enquire-note a:hover { color: var(--text-light); }


/* -------------------------------------------
   18b. Shop Card
   ------------------------------------------- */
.shop-card {
  background-color: var(--do-card-bg);
  border:           1px solid var(--do-card-border);
  border-radius:    4px;
  overflow:         hidden;
  height:           100%;
  display:          flex;
  flex-direction:   column;
  transition:
    border-color 0.25s ease,
    box-shadow   0.25s ease,
    transform    0.25s ease;
}

.shop-card:hover {
  border-color: var(--do-card-hover-border);
  box-shadow:   var(--do-card-hover-shadow);
  transform:    translateY(-4px);
}


/* -------------------------------------------
   18c. Shop Card — Image area
   ------------------------------------------- */
.shop-card__img {
  position:         relative;
  height:           200px;
  background-color: var(--secondary);
  overflow:         hidden;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  color:            rgba(176, 141, 87, 0.50);
  flex-shrink:      0;
}

.shop-card__img svg {
  width:       52px;
  height:      52px;
  flex-shrink: 0;
}

.shop-card__img img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.5s ease;
}

.shop-card:hover .shop-card__img img { transform: scale(1.05); }


/* -------------------------------------------
   18d. Shop Card — Body
   ------------------------------------------- */
.shop-card__body {
  padding:        1.35rem 1.5rem 1.5rem;
  display:        flex;
  flex-direction: column;
  flex:           1;
}

.shop-card__title {
  font-family:   var(--font-heading);
  font-size:     1.05rem;
  font-weight:   700;
  color:         var(--text-light);
  margin-bottom: 0.5rem;
}

.shop-card__desc {
  font-family: var(--font-body);
  font-size:   0.9rem;
  line-height: 1.65;
  color:       rgba(255, 255, 255, 0.65);
  margin:      0 0 1rem;
  flex:        1;
}


/* -------------------------------------------
   18e. Shop Card — Action Buttons
   ------------------------------------------- */
.shop-card__actions {
  display:    flex;
  flex-wrap:  wrap;
  gap:        0.6rem;
  margin-top: auto;
}

.shop-card__btn {
  display:          inline-block;
  font-family:      var(--font-body);
  font-size:        0.85rem;
  font-weight:      600;
  text-decoration:  none;
  border-radius:    3px;
  padding:          0.5em 1.1em;
  border:           1px solid transparent;
  cursor:           pointer;
  white-space:      nowrap;
  transition:
    background-color 0.25s ease,
    color            0.25s ease,
    border-color     0.25s ease,
    filter           0.25s ease;
}

.shop-card__btn--enquire {
  background-color: var(--accent);
  color:            var(--dark);
  border-color:     var(--accent);
}

.shop-card__btn--enquire:hover,
.shop-card__btn--enquire:focus-visible { filter: brightness(0.85); }

.shop-card__btn--call {
  background-color: transparent;
  color:            var(--text-light);
  border-color:     rgba(255, 255, 255, 0.40);
}

.shop-card__btn--call:hover,
.shop-card__btn--call:focus-visible {
  background-color: rgba(255, 255, 255, 0.08);
  border-color:     var(--text-light);
}

.shop-card__btn:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 2px;
}


/* -------------------------------------------
   18f. project-card__more — "Learn more" link
   Small accent link at the bottom of a project card.
   ------------------------------------------- */
.project-card__more {
  display:         inline-block;
  font-family:     var(--font-body);
  font-size:       0.88rem;
  font-weight:     600;
  color:           var(--accent);
  text-decoration: none;
  margin-top:      0.85rem;
  transition:      color 0.2s ease;
}

.project-card__more:hover { color: var(--text-light); }


/* -------------------------------------------
   18g. Responsive — Shop Section
   ------------------------------------------- */
@media (max-width: 991px) {
  .shop-section { padding: 4rem 0; }
}

@media (max-width: 575px) {
  .shop-section   { padding: 3rem 0; }
  .shop-card__img { height: 180px; }
}


/* =======================================================
   19. GRANTS & AWARDS / FUNDERS
   (about.html — between FAQ and Quick CTA)
   ======================================================= */

.funders-intro {
  font-family:   var(--font-body);
  font-size:     1.05rem;
  line-height:   1.8;
  color:         var(--secondary);
  max-width:     58ch;
  margin:        0 auto 2.5rem;
}

.funders-list {
  list-style:    none;
  padding:       0;
  margin:        0;
  display:       flex;
  flex-direction: column;
  gap:           0;
}

.funders-list__item {
  font-family:    var(--font-heading);
  font-size:      1.05rem;
  font-weight:    700;
  color:          var(--primary);
  padding:        0.85rem 1rem;
  border-bottom:  1px solid rgba(176, 141, 87, 0.20);
  display:        flex;
  flex-wrap:      wrap;
  align-items:    baseline;
  gap:            0.4em;
  justify-content: center;
}

.funders-list__item:first-child { border-top: 1px solid rgba(176, 141, 87, 0.20); }

.funders-list__sub {
  font-family:  var(--font-body);
  font-size:    0.9rem;
  font-weight:  400;
  color:        var(--secondary);
}


/* =======================================================
   20. ABOUT PAGE — LIFESTYLE QUOTE BANNER
   Full-bleed image with dark overlay and centred quote.
   Sits between "Why We Exist" and "Our History".
   ======================================================= */

.about-quote-banner {
  position:   relative;
  height:     420px;
  overflow:   hidden;
}

.about-quote-banner img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center 40%;
}

.about-quote-banner__overlay {
  position:        absolute;
  inset:           0;
  background:      linear-gradient(
                     to bottom,
                     rgba(31, 35, 40, 0.45) 0%,
                     rgba(31, 35, 40, 0.72) 100%
                   );
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         2rem;
}

.about-quote-banner__quote {
  margin:     0;
  padding:    0;
  text-align: center;
  max-width:  640px;
}

.about-quote-banner__quote p {
  font-family:    var(--font-heading);
  font-size:      clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight:    700;
  line-height:    1.35;
  color:          var(--text-light);
  margin:         0;
  text-shadow:    0 2px 12px rgba(0, 0, 0, 0.55);
  letter-spacing: 0.01em;
}

@media (max-width: 767px) {
  .about-quote-banner         { height: 300px; }
}

@media (max-width: 575px) {
  .about-quote-banner         { height: 240px; }
  .about-quote-banner__quote p { font-size: 1.35rem; }
}