html, body{
  margin: 0;
  padding: 0;
}
@font-face {
    font-family: 'Roustel';
    src: url('../fonts/Roustel-Regular.woff2') format('woff2'),
        url('../fonts/Roustel-Regular.woff') format('woff');
        url('../fonts/Roustel.ttf') format('truetype');
        url('../fonts/DIN-Condensed-Bold.woff') format('woff');
        url('../fonts/DIN-Condensed-Bold.ttf') format('truetype');
	
	
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* =========================
   Site width container
========================= */
.site-wrap{
  max-width: 1200px;   /* adjust later if needed */
  margin: 0 auto;
}

/* Base section styling */
.band{
  position: relative;
  min-height: 300px;      /* just a solid test height */
  display: flex;
  align-items: center;
	padding-bottom:50px;
}

/* Colors from your palette */
.band-1{
  background: #173435;
  color: #ffffff;
	padding-left:50px;
}



/* Fade Section 1 -> Section 2 */
.band-1::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  pointer-events:none;
/*  background: linear-gradient(to bottom, rgba(0,0,0,0), #3b6062);*/
}

.band-2{
  background: #3b6062;
  color: #ffffff;
}

/* Fade Section 2 -> Section 3 */

.band-3{
  background: #ffffff;
  color: #232321;
}
/* Hero image with bottom fade into Section 1 */
.hero{
  position: relative;
}

.hero::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px; /* fade depth */
  pointer-events: none;
 /* background: linear-gradient(
    to bottom,
    rgba(0,0,0,0),
    #173435  /* Section 1 color */
  );
}
/* Middle image with fades to/from sections */
.hero-mid{
  position: relative;
}

/* Fade from Section 1 into image (top fade) */
.hero-mid::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 160px;
  pointer-events: none;
/*  background: linear-gradient(
    to top,
    rgba(0,0,0,0),
    #173435   /* Section 1 color 
  );*/
}

/* Fade from image into Section 2 (bottom fade) */
.hero-mid::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  pointer-events: none;

}
/* Fade from Section 1 into image (top fade) */
.hero-midb::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 160px;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0),
    #173435   /* Section 1 color */
  );
}

/* Fade from image into Section 2 (bottom fade) */
.hero-midb::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  pointer-events: none;
 /* background: linear-gradient(
    to bottom,
    rgba(0,0,0,0),
    #3b6062    Section 2 color */
  );
}
/* =========================
   MOBILE FADE TUNING (bulletproof)
   Targets both :before/:after and ::before/::after
========================= */
@media (max-width: 576px){

  /* Ensure the wrappers are positioning contexts */
  .hero,
  .hero-mid,
  .hero-midb{
    position: relative !important;
  }

  /* --- p1 bottom fade into section 1 --- */
  .hero:after,
  .hero::after{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 70px !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  /* --- p2 top fade from section 1 into image --- */
  .hero-mid:before,
  .hero-mid::before,
  .hero-midb:before,
  .hero-midb::before{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 50px !important;
    pointer-events: none !important;
    z-index: 2 !important;
   
  }

  /* --- p2 bottom fade into section 2 --- */
  .hero-mid:after,
  .hero-mid::after,
  .hero-midb:after,
  .hero-midb::after{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 70px !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }
}

/* Ensure hero is the positioning container */
.hero{
  position: relative;
}

/* Logo overlay */
.hero-logo{
  position: absolute;
  top: -45px;
  left: 24px;

  max-width: 350px;      /* desktop size */
  width: 30vw;           /* responsive scaling */
  height: auto;

  z-index: 3;            /* above image + fades */
  pointer-events: none;  /* logo is decorative */
}
/* Hero caption (slogan/title) */
.hero-caption{
  position: absolute;
	max-width:100ch;
	min-height:2.2em;

  /* Requested positioning */
  left: 30%;
  top: 85%;
  transform: translate(-0%, -50%); /* centers text at that point */

  z-index: 3;              /* above image + fades */

	font-family: "the-youngest", sans-serif;

  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.1;

  color: #fcf8e9;          /* cream from your palette */
  text-shadow: 0 4px 16px rgba(0,0,0,0.45);

  pointer-events: none;   /* purely visual */
}
/* default: keep natural image on desktop */
.hero-img{
  width: 100%;
  height: auto;
  display: block;
}
/* mobile: give the hero a consistent height and crop */
@media (max-width: 576px){
  .hero{
    height: 240px;        /* adjust later */
    overflow: hidden;
  }

  .hero-img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: 65% 30%; /* shift focal point (tweak as needed) */
  }
}
@media (max-width: 576px){
  .hero-logo{
    max-width: 120px;
    top: 12px;
    left: 12px;
  }
}
/* mobile: move caption away from logo and make it blocky/legible */
@media (max-width: 576px){
  .hero-caption{
    left: 56%;

    transform: translate(-50%, -50%);
    max-width: 260px;
    text-align: left;

    font-size: 30px;      /* or clamp(26px, 7vw, 34px) */
    line-height: 1.05;
  }
}



/* Desktop defaults */
.hero{
  position: relative;
}

.hero-img{
  width: 100%;
  height: auto;
  display: block;
}

/* =========================
   MOBILE: tall hero + clean layout
========================= */
@media (max-width: 576px){

  /* Tall, cinematic hero */
  .hero{
    height: 420px;          /* tall */
    overflow: hidden;
  }

  /* Predictable crop */
  .hero-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 65% 25%;  /* shift focal point: tweak if needed */
  }

  /* Logo: smaller, tucked in */
  .hero-logo{
    max-width: 55%;
    top: 34%;
    left: 55%;
	  width:50vw;
	  transform: translate(-50%, -50%);
  }

  /* Slogan: down/right, readable */
  .hero-caption{
    left: 35%;
    top: 75%;
    transform: translate(-50%, -50%);
    max-width: 500px;
    text-align: left;

    font-size: clamp(30px, 7vw, 40px);
    line-height: 1.05;
	  left: 0;
    right: 0;
    width: 100%;

    top: 72%;
    transform: translateY(-50%); /* remove X centering */

    max-width: none;             /* allow full width */
    padding: 0 20px;             /* breathing room */

    text-align: center;          /* center text within full width */

    font-size: clamp(30px, 7vw, 40px);
    line-height: 1.05;
	   display: flex;
    align-items: center;        /* vertical centering */
    justify-content: center; 
  }

  /* Optional: subtle backing for readability (recommended) */
  .hero-caption{
    padding: 8px 12px;
    border-radius: 14px;
    background: rgba(0,0,0,0.18);
    backdrop-filter: blur(4px);
	  margin-top: 20px;
  }
}
/* Keep nav above everything */
.site-nav{
  position: relative;
  z-index: 50;
}

/* Use the same horizontal width system you already created */
.site-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Hamburger -> X animation (Bootstrap 5) */
.navbar-toggler{
  border: 0;
}

.navbar-toggler:focus{
  box-shadow: none;
}

/* Replace default icon with 3 bars we can animate */
.navbar-toggler .navbar-toggler-icon{
  background-image: none;
  width: 28px;
  height: 20px;
  position: relative;
  display: inline-block;
}

.navbar-toggler .navbar-toggler-icon::before,
.navbar-toggler .navbar-toggler-icon::after{
  content: "";
  position: absolute;
  left: 0;
  width: 28px;
  height: 2px;
  background: #173435; /* match palette */
  transition: transform 0.2s ease, top 0.2s ease, opacity 0.2s ease;
}

.navbar-toggler .navbar-toggler-icon::before{
  top: 4px;
}

.navbar-toggler .navbar-toggler-icon::after{
  top: 14px;
}

/* Middle bar (real element) */
.navbar-toggler .navbar-toggler-icon{
  border-top: 2px solid #173435; /* middle bar */
  transition: border-color 0.2s ease;
}

/* When open: turn into X */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{
  border-top-color: transparent; /* hide middle bar */
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before{
  top: 9px;
  transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after{
  top: 9px;
  transform: rotate(-45deg);
}
.site-nav{
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
body{
  font-family: "TikTok Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.site-nav{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.navbar-toggler{
  border: 0;
  padding: .4rem .25rem;
}
.navbar-toggler:focus{
  box-shadow: none;
}

/* Replace default Bootstrap icon with 3 bars we can animate */
.navbar-toggler .navbar-toggler-icon{
  background-image: none;
  width: 28px;
  height: 20px;
  position: relative;
  display: inline-block;
  border-top: 2px solid #173435; /* middle bar */
}

.navbar-toggler .navbar-toggler-icon::before,
.navbar-toggler .navbar-toggler-icon::after{
  content: "";
  position: absolute;
  left: 0;
  width: 28px;
  height: 2px;
  background: #173435;
  transition: transform 0.2s ease, top 0.2s ease, opacity 0.2s ease;
}

.navbar-toggler .navbar-toggler-icon::before{ top: 4px; }
.navbar-toggler .navbar-toggler-icon::after{ top: 14px; }

/* Open state = X */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{
  border-top-color: transparent; /* hide middle bar */
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before{
  top: 9px;
  transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after{
  top: 9px;
  transform: rotate(-45deg);
}
body{
  background-color: #f6f4ee; /* warm off-white */
  background-image: url("../img/Topography-LightGreen2.png");
  background-repeat: repeat;
background-position: center top;

}

/* optional: wash it down so it’s barely there */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(246,244,238,0.90);
  pointer-events: none;
  z-index: -1;
}
/* Nav logo */
.nav-logo{
  height: 42px;      /* desktop size */
  width: auto;
  display: block;
}

/* Mobile: slightly smaller */
@media (max-width: 576px){
  .nav-logo{
    height: 34px;
  }
}
/* Section 1: Hook (Assertive) */
.band-content.hook{
  padding: 25px 20px;
}

.hook-title{
	margin: 0 0 10px 0;
    font-size: clamp(34px, 5vw, 54px);
    font-weight: 400;
    line-height: 1.05;
	font-family: "din-condensed", sans-serif;
    text-transform: uppercase;
}

.hook-lines{
  margin: 0 0 26px 40px;
}

.hook-lines p{
  margin: 0 0 0 0;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.35;
  opacity: 0.95;
}

.hook-answer{
  padding-top: 0px;
	padding-left:40px;
 
}

.hook-lead{
  margin: 0 0 8px 0;
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 20px);
}

.hook-statement{
  margin: 0;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.35;
  opacity: 0.98;
}

/* Mobile tightening */
@media (max-width: 576px){
  .band-content.hook{
    padding: 44px 0px;
  }
  .hook-lines p{
    margin-bottom: 8px;
	  margin: 0 0 26px 00px;
  }
}
/* Wood hero section */
.hero-wood{
  position: relative;
  color: #ffffff;
}

/* Overlay tuned for wood texture */
.hero-wood .hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;

  background: linear-gradient(
    to right,
    rgba(0,0,0,0.62),
    rgba(0,0,0,0.56),
    rgba(0,0,0,0.46)
  );
}

/* Content positioning */
.hero-wood .hero-content{
  max-width: 900px;
  padding: 96px 24px;
}

/* Typography */
.hero-wood h2{
	
		margin: 0 0 10px 0;
    font-size: clamp(34px, 5vw, 54px);
    font-weight: 400;
    line-height: 1.05;
	font-family: "din-condensed", sans-serif;
    text-transform: uppercase;
}

.hero-wood .subtitle{
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 28px;
}

.hero-wood p{
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  max-width: 720px;
  margin-bottom: 18px;
}

.hero-link{
  display: inline-block;
  margin-top: 18px;
  color: #fcf8e9;
  text-decoration: none;
  border-bottom: 1px solid rgba(252,248,233,0.6);
}

.hero-link:hover{
  border-bottom-color: #fcf8e9;
}
@media (max-width: 576px){
  .hero-wood .hero-overlay{
    background: rgba(0,0,0,0.58);
  }

  .hero-wood .hero-content{
    padding: 56px 18px;
  }
}
/* =========================
   WOOD HERO SECTION (image + text overlay + restored fades)
========================= */
.hero-wood{
  position: relative;
  overflow: visible;
  color: #ffffff;
}

/* Background image */
.hero-wood .hero-img{
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

/* Dark overlay tuned for wood readability */
.hero-wood .hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;

  /* Best default for wood: readable, still shows texture */
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.62),
    rgba(0,0,0,0.56),
    rgba(0,0,0,0.46)
  );
}

/* CONTENT LAYER */
.hero-wood .hero-content{
  position: relative;
  z-index: 3;
  max-width: 1100px;
  padding: 86px 24px;
}

/* Bio layout */
.hero-wood .hero-content{
  position: relative;
  z-index: 3;
  max-width: 1100px;
  padding: 48px 24px;   /* WAS 86px */
}


.bio-photo-wrap{
  flex: 0 0 auto;
	position: relative;  /* this makes top work */
  top: -75px;         /* pull upward to overlap section above */
  z-index: 20;
}

.bio-photo{
  width: 170px;
  height: 170px;
  object-fit: cover;
  border-radius: 50%;
  border: 6px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
/* Force name + subtitle on one line */
.hero-wood .bio-heading{
  display: flex !important;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;   /* change to nowrap if you never want wrapping */
}

/* Remove the “stacking” margins only inside the heading row */
.hero-wood .bio-heading .bio-name,
.hero-wood .bio-heading .bio-subtitle{
  margin: 0 !important;
}

.bio-text{
  max-width: 760px;
}

.bio-name{
  margin: 0 0 6px 0;
  font-weight: 800;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.05;
}

.bio-subtitle{
  margin: 0 0 26px 0;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.hero-wood p{
  margin: 0 0 16px 0;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
}

.bio-link{
  display: inline-block;
  margin-top: 16px;
  color: #fcf8e9;
  text-decoration: none;
  border-bottom: 1px solid rgba(252,248,233,0.6);
	font-weight:600;
}
.bio-link:hover{
  border-bottom-color: #fcf8e9;
}

/* =========================
   RESTORE THE FADES (top from section 1, bottom into section 2)
   These sit ABOVE the overlay so they always show.
========================= */
.hero-wood::before,
.hero-wood::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 160px;
  pointer-events: none;
  z-index: 4; /* critical: above overlay (z=2) */
}

/* Top fade: section 1 (#173435) -> wood image */
.hero-wood::before{
  top: 0;
/*  background: linear-gradient(
    to bottom,
    rgba(23,52,53,0.75),
    rgba(23,52,53,0.30),
    rgba(0,0,0,0)
  );*/
}

/* Bottom fade: wood image -> section 2 (#3b6062) */
.hero-wood::after{
  bottom: 0;
}

/* Mobile tuning */
@media (max-width: 576px){
  .hero-wood .hero-overlay{
    background: rgba(0,0,0,0.56);
  }

  .hero-wood .hero-content{
    padding: 56px 18px;
  }

  .hero-wood .hero-content.bio{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .bio-photo{
    width: 132px;
    height: 132px;
    border-width: 5px;
  }

  .hero-wood::before,
  .hero-wood::after{
    height: 90px;
  }
}
/* Stand-up photo */
.bio-photo-standup{
  width: 260px;
  max-width: 30vw;
  height: auto;

  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.12);

  object-fit: cover;
}

/* Desktop spacing */
.hero-wood .hero-content.bio{
  align-items: center;
	padding-top:40px;
}

/* Mobile handling */
@media (max-width: 576px){
  .bio-photo-standup{
    width: 80%;
    max-width: 80%;
  }
}


/* =====================================================
   MOBILE CLIPPING FIX (DO NOT DELETE)
   Your wood hero uses class="hero hero-mid hero-wood".
   Older mobile rules were forcing ALL .hero blocks to a fixed height,
   which clipped the bio text. This overrides that behavior.
===================================================== */
@media (max-width: 576px){

  /* Default: allow heroes to expand to content unless explicitly cropped */
  .hero{
    height: auto !important;
    overflow: visible !important;
  }

  /* Crop ONLY the top hero (the one that is NOT hero-mid / hero-midb / hero-wood) */
  .hero:not(.hero-mid):not(.hero-midb):not(.hero-wood){
    height: 420px !important;
    overflow: hidden !important;
  }

  .hero:not(.hero-mid):not(.hero-midb):not(.hero-wood) .hero-img{
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: 65% 25% !important;
  }

  /* Ensure the wood hero can grow for text */
  .hero-wood{
    height: auto !important;
    overflow: visible !important;
  }

  .hero-wood .hero-img{
    height: auto !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  /* Guarantee bio text sits above overlays on mobile */
  .hero-wood .hero-content,
  .hero-wood .bio-text{
    position: relative !important;
    z-index: 10 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
	  padding-top:15px;
  }
}

/* =====================================================
   MOBILE: PREVENT OVERLAP (wood section taller than image)
   Make hero-wood a grid stack so content height controls layout
===================================================== */
/* =====================================================
   HERO WOOD: CLEAN STACKING + NO OVERLAP
===================================================== */

/* baseline */
.hero-wood .hero-img{
  width: 100%;
  display: block;
  object-fit: cover;
}

/* desktop/tablet */
.hero-wood .hero-overlay{
  position: absolute;
  inset: 0;
	padding-left:45px;
}

/* MOBILE: stack + let content define height, image fills it */
@media (max-width: 576px){

  .hero-wood{
    display: grid;
  }

  .hero-wood > img,
  .hero-wood .hero-overlay{
    grid-area: 1 / 1;
  }

  /* overlay must participate in layout */
  .hero-wood .hero-overlay{
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    z-index: 2;
  }

  /* content stays on top and adds breathing room */
  .hero-wood .hero-content{
    position: relative;
    z-index: 3;
    padding-bottom: 72px;
  }

  /* KEY: make the image fill the grid cell height */
  .hero-wood .hero-img{
    height: 100%;
    min-height: 520px;        /* optional visual floor */
    object-position: center;  /* adjust if needed */
  }

  /* fades can stay, but never above text */
  .hero-wood::before,
  .hero-wood::after{
    z-index: 2;
  }
}

/* cinematic desktop height (optional) */
@media (min-width: 992px){
  .hero-wood .hero-img{
    min-height: 52vh;
  }
}
@media (max-width: 576px){
  .hero-wood .hero-img{
    height: 100% !important;
  }
}
/* =====================================================
   WOOD HERO HEIGHT RULES
===================================================== */

/* Desktop / tablet: cap height */
@media (min-width: 577px){
  .hero.hero-mid.hero-wood{
   height: 500px;
	  overflow:visible;
  }

  .hero.hero-mid.hero-wood .hero-img{
    height: 100%;
	  width:100%;
    object-fit: cover;
  }

  .hero.hero-mid.hero-wood .hero-overlay{
    position: absolute;
    inset: 0;
  }
}

/* Mobile: NO height limit, content defines height */
@media (max-width: 576px){
  .hero.hero-mid.hero-wood{
    max-height: none;
    height: auto;
    display: grid;
  }

  .hero.hero-mid.hero-wood > img,
  .hero.hero-mid.hero-wood .hero-overlay{
    grid-area: 1 / 1;
  }

  /* Overlay participates in layout */
  .hero.hero-mid.hero-wood .hero-overlay{
    position: relative;
    inset: auto;
    height: auto;
  }

  /* Image fills the grid height */
  .hero.hero-mid.hero-wood .hero-img{
    height: 100%;
    min-height: 520px; /* visual floor only */
    object-fit: cover;
  }
}
/* =====================================================
   PRIORITIES SECTION (band pri)
   Matches the mockup style: dark block + glass cards + pill numbers
===================================================== */
.band.pri{
  padding: 100px 50px 72px 50px;
  background: #1a4243;           /* tweak if you want closer to your primary block */
  color: #fcf8e9;
}

/* small label above the title */
.band.pri .eyebrow{
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 10px;
}

/* section title */
.band.pri .pri-title{
  margin: 0 0 10px 0;
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 500;
  line-height: 1.05;
	    font-family: 'din-condensed';
    text-transform: uppercase;
}

/* intro paragraph */
.band.pri .pri-intro{
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  opacity: 0.85;
	font-size: clamp(16px, 1.6vw, 20px);
}

/* top-right button */
.band.pri .pri-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 18px;
  border-radius: 10px;

  text-decoration: none;
  color: #fcf8e9;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  background: rgba(0,0,0,0.14);
  border: 2px solid rgba(252,248,233,0.35);
  backdrop-filter: blur(8px);
  white-space: nowrap;
}

.band.pri .pri-btn:hover{
  border-color: rgba(252,248,233,0.65);
  background: rgba(0,0,0,0.18);
}

/* glass cards */
.band.pri .pri-card{
  height: 100%;
  padding: 22px 20px 18px;
  border-radius: 18px;

  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(252,248,233,0.14);
  backdrop-filter: blur(10px);

  box-shadow:
    0 18px 60px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

/* pill number */
.band.pri .pri-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 28px;
  min-width: 52px;
  padding: 0 12px;
  border-radius: 999px;

  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: #fcf8e9;

  margin-bottom: 16px;
}

/* card headings */
.band.pri .pri-card h3{
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 700;
}

/* card text */
.band.pri .pri-card p{
  margin: 0;
  color: rgba(252,248,233,0.78);
  line-height: 1.45;
}

/* bottom note */
.band.pri .pri-note{
  border-radius: 18px;
  padding: 18px 20px;

  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(252,248,233,0.14);
  backdrop-filter: blur(10px);

  color: rgba(252,248,233,0.88);
  line-height: 1.4;
}

.band.pri .pri-note strong{
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #fcf8e9;
}

/* big green CTA */
.band.pri .pri-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 76px;
  padding: 18px 26px;
  border-radius: 18px;

  background: #97b66c;
  color: #0b1212 !important;

  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;

  border: 1px solid rgba(0,0,0,0.25);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}

.band.pri .pri-cta:hover{
  filter: brightness(0.98);
}

/* responsive tweaks */
@media (max-width: 992px){
  .band.pri .pri-btn{
    width: 100%;
  }

  .band.pri .pri-cta{
    width: 100%;
  }
}

@media (max-width: 576px){
  .band.pri{
    padding: 44px 0 54px;
  }
}
/* =====================================================
   PRIORITIES: LINKS & BUTTON REPOSITION
===================================================== */

/* bottom-aligned share button */
.band.pri .pri-btn-bottom{
  min-height: 64px;
  padding: 16px 24px;
}

/* card "Learn more" link */
.band.pri .pri-link{
  display: inline-block;
  margin-top: 14px;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;

  color: rgba(252,248,233,0.85);
  text-decoration: none;
	color: #232321;
}

.band.pri .pri-link:hover{
  color: #232321;
  text-decoration: underline;
}

/* ensure cards space correctly */
.band.pri .pri-card{
  display: flex;
  flex-direction: column;
	    background: #fcf8e9;
    color: #232321;
	    border-radius: .375rem;
}

.band.pri .pri-card p{
  flex-grow: 1;
	color: #232321;
}

/* =====================================================
   DONATE HERO — CONTENT OVER IMAGE
===================================================== */

.hero.hero-donate{
  position: relative;
  overflow: hidden;
  color: #fcf8e9;
}

/* background image */
.hero-donate .hero-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* dark overlay */
.hero-donate .hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.45),
    rgba(0,0,0,0.75)
  );
  z-index: 1;
}

/* content OVER the image */
.hero-donate .hero-content{
  position: relative;
  z-index: 2;
  padding: 20px 20px 20px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}

/* =====================================================
   LOGOS — MAKE THEM BOLD AND PRESENT
===================================================== */

.donate-logos{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  margin-bottom: 36px;
}

.donate-logos img{
  width: auto;
  max-height: 300px;   /* MUCH larger */
}

/* =====================================================
   TEXT + BUTTON
===================================================== */

.hero-donate h2{
		margin: 0 0 10px 0;
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.hero-donate p{
  max-width: 680px;
  margin: 0 auto 32px;
  font-size: 16px;
  line-height: 1.45;
  opacity: 0.9;
}

.donate-btn{
  display: inline-block;
  padding: 16px 36px;
  border-radius: .375rem;

  background: #97b66c;
  color: #0b1212;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;

  box-shadow: 0 18px 48px rgba(0,0,0,0.45);
}

.donate-btn:hover{
  filter: brightness(0.95);
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 576px){
  .hero-donate{
    min-height: 640px;
  }

  .hero-donate .hero-content{
    padding: 64px 16px 72px;
  }

  .donate-logos{
    flex-direction: column;
    gap: 24px;
  }

  .donate-logos img{
    max-height: 200px;
  }
}
/* =====================================================
   SCHEDULE SECTION (Band 2)
===================================================== */

.band.schedule{
  /* pick one: keep your band-2 background, or force this darker */
  background: #232321; /* matches the mockup black */
  color: #fcf8e9;
	    padding: 0px 50px 0px 50px;
}

.schedule-title{
	margin: 0 0 10px 0;
    font-size: clamp(34px, 4vw, 54px);
font-weight: 500;
    line-height: 1.05;
    font-family: 'din-condensed';
	text-transform: uppercase;
}

.schedule-sub{
  margin: 0;
  opacity: 0.75;
font-size: clamp(16px, 1.6vw, 20px);
}

.schedule-card{
  border-radius: .375rem;
  padding: 18px 22px;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);

  box-shadow:
    0 18px 60px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.04);
	background:#fcf8e9;
	    color: #232321;
}

.schedule-card-title{
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 6px;
}

.schedule-card-meta{
  opacity: 0.75;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.schedule-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 18px;
  border-radius: 10px;

  background: transparent;
  color: #fcf8e9;
  text-decoration: none;

  border: 2px solid rgba(252,248,233,0.45);
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.schedule-btn:hover{
  border-color: rgba(252,248,233,0.75);
}

@media (max-width: 576px){
  .schedule-card{
    padding: 16px 18px;
  }
}
/* =====================================================
   CONTACT SECTION
===================================================== */

.band-contact{
  background: #ffffff; /* same family as primary block */
  color: #3b6062;
	padding: 0px 50px 0px 50px;
}

.contact-title{
  margin: 0 0 14px;
  font-size: clamp(32px, 4vw, 48px);
font-weight: 500;
    line-height: 1.05;
    font-family: 'din-condensed';
	text-transform: uppercase;
}

.contact-intro{

  margin: 0 0 36px;
font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.45;
  opacity: 0.9;
}

/* Placeholder form styles */
.contact-form-placeholder{
  max-width: 760px;
}

.form-field-placeholder{
  height: 54px;
  padding: 14px 16px;
  border-radius: 10px;

  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(252,248,233,0.18);
  color: rgba(252,248,233,0.55);

  display: flex;
  align-items: center;
  font-size: 14px;
}

.form-field-placeholder:last-of-type{

  align-items: flex-start;
}

.form-submit-placeholder{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 56px;
  padding: 0 26px;
  border-radius: 12px;

  background: #97b66c;
  color: #0b1212;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  opacity: 0.85;
}

/* Mobile spacing */
@media (max-width: 576px){
  .contact-intro{
    margin-bottom: 28px;
  }
}
.ak {font-weight:bold;
color:#fcf8e9;
	background:#526e32;
	border:white;
}
.bio-heading{
  display: flex;
  align-items: baseline;   /* lines text up nicely */
  gap: 12px;               /* space between name and subtitle */
  flex-wrap: wrap;         /* allows clean wrap on small screens */
}

.bio-name{
  margin: 0;
}

.bio-subtitle{
  margin: 0;
}
.bio-heading{
  display: flex !important;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;

}

.bio-heading .bio-name,
.bio-heading .bio-subtitle{
  margin: 0 !important;
}
.hero-content.bio .bio-heading{
  display: inline-flex;   /* wins against block */
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.bio-text{
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.bio-text .bio-name,
.bio-text .bio-subtitle{
  margin: 0;
}
.bio-name{ margin: 0; }

.bio-subtitle-inline{
  font-weight: normal;
  margin-left: 12px;
  font-size: 2rem;
	text-transform:none;
	    color: #97b66c;
}
/* FORCE side-by-side bio layout on desktop/tablet */
@media (min-width: 577px){
  .hero.hero-mid.hero-wood .hero-content.bio{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 28px !important;
    align-items: center !important;
  }

  .hero.hero-mid.hero-wood .bio-photo-wrap{
    flex: 0 0 auto !important;
  }

  .hero.hero-mid.hero-wood .bio-text{
    flex: 1 1 auto !important;
    min-width: 0; /* prevents weird wrapping issues */
  }
}
.donate-today{
  display: flex;
  align-items: center;
  gap: 32px;
  text-align: left;
}

.donate-today-logo{
  flex: 0 0 auto;
	padding-left:30px;
}

.donate-today-logo img{
  max-width: 260px;
  height: auto;
  display: block;
}

.donate-today-text{
  flex: 1 1 auto;
}

.donate-today-text p{
  margin: 0 0 14px 0;
  max-width: 600px;
	font-size: clamp(16px, 1.6vw, 20px);
}
@media (max-width: 576px){
  .donate-today{
    flex-direction: column;
    text-align: center;
  }

  .donate-today-text{
    text-align: center;
  }
}
/* FORCE donate-today into two columns (override hero-donate rules) */
.hero-donate .donate-today{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 32px !important;
  text-align: left !important;
}
html,
body {
  height: 100%;
  margin: 0;
}

body.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-content {
  flex: 1;
}
.about-me {
	  font-size: clamp(32px, 4vw, 48px);
font-weight: 500;
    line-height: 1.05;
    font-family: 'din-condensed';
	text-transform: uppercase;
}
.about-image-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;          /* portrait-friendly */
  background-color: #e9ecef;
  border: 2px dashed #adb5bd;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  font-weight: 600;
}
.pri-card-title {
	font-family: 'din-condensed';
    font-size: 1.3em;
    font-weight: 400;
    color: #97b66c !important;
    background: black;
    text-align: center;
	flex-grow:unset !important;
}

.pri-card.pri-card-vert{
  display:flex;
  overflow:hidden; /* keeps the rail clean with rounded corners */
}

.pri-rail{
  width:56px;              /* adjust to taste */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 0;
}

.pri-rail-text{
  display:inline-block;
  transform: rotate(-90deg);
  transform-origin:center;
  white-space:nowrap;

  /* keep your existing “label” styling vibe here */
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
}

/* your existing card content area */
.pri-body{
  flex:1;
  padding: 0 0 0 0;  /* set if you need extra spacing */
}

/* Optional: add breathing room between rail and content */
.pri-body{
  padding-left: 18px;
}
.pri-card.pri-card-vert{ display:flex; overflow:hidden; }

.pri-rail{
  width:56px;
  background:#111;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 0;
}

.pri-rail-text{
  color:#cfff00;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  white-space:nowrap;
  transform: rotate(-90deg);
  transform-origin:center;
}

.pri-body{ flex:1; padding-left:18px; }
/* =========================
   PRIORITY CARD - VERTICAL RAIL FIX
========================= */

.band.pri .pri-card.pri-card-vert{
  display: flex;
  padding: 0 !important;        /* IMPORTANT: overrides your pri-card padding */
  overflow: hidden;
}

/* left strip */
.band.pri .pri-card.pri-card-vert .pri-rail{
  width: 58px;
  background: #000;
  flex: 0 0 58px;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* vertical text (clean + centered) */
.band.pri .pri-card.pri-card-vert .pri-rail-text{
  writing-mode: vertical-rl;
  transform: rotate(180deg);  /* reads bottom-to-top like a sidebar label */
  color: #97b66c;

  font-family: 'din-condensed';
  font-size: 1.15em;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  white-space: nowrap;
  padding: 12px 0;
}

/* main content */
.band.pri .pri-card.pri-card-vert .pri-body{
  flex: 1;
  padding: 22px 20px 18px;  /* your original card padding goes here */
}
/* =========================
   PRIORITY CARDS - VERTICAL RAIL (FINAL OVERRIDE)
   Paste at very bottom of CSS
========================= */

.band.pri .pri-card.pri-card-vert{
  display: flex !important;
  flex-direction: row !important;  /* force side-by-side */
  align-items: stretch !important; /* rail spans full height */
  padding: 0 !important;           /* move padding to pri-body */
  overflow: hidden;
}

/* left strip */
.band.pri .pri-card.pri-card-vert .pri-rail{
  width: 62px;               /* tweak 56–70 to taste */
  flex: 0 0 62px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* vertical label (clean + centered) */
.band.pri .pri-card.pri-card-vert .pri-rail-text{
  writing-mode: vertical-rl;
  transform: rotate(180deg); /* makes it read bottom-to-top */
  white-space: nowrap;

  font-family: 'din-condensed';
  font-size: 1.15em;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: #97b66c;
  line-height: 1;
}

/* content area */
.band.pri .pri-card.pri-card-vert .pri-body{
  flex: 1;
  padding: 22px 20px 18px;     /* your original pri-card padding */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;  /* IMPORTANT: keep content at top */
}

/* tighten heading spacing so it doesn't look "dropped" */
.band.pri .pri-card.pri-card-vert .pri-body h3{
  margin-top: 0;
}
/* === PRIORITY CARD POLISH (override) === */

.band.pri .pri-card.pri-card-vert .pri-rail{
  width: 56px;
  flex: 0 0 56px;
}

.band.pri .pri-card.pri-card-vert .pri-rail-text{
  letter-spacing: 0.12em;  /* was larger */
  font-size: 1.1em;        /* tiny tighten */
}

.band.pri .pri-card.pri-card-vert .pri-body{
  padding: 22px 22px 20px; /* slightly more even */
}

.band.pri .pri-card.pri-card-vert .pri-body h3{
  margin: 0 0 14px 0;      /* consistent */
}
.band.pri .pri-card.pri-card-vert .pri-rail{
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.08);
}
.pri-body{
  position: relative;
}

.pri-watermark{
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 92px;
  opacity: 0.06;
  pointer-events: none;
  line-height: 1;
}
.hero {
  position: relative;
  overflow-x: clip; /* prevents sideways scroll */
}

.hero-content.donate-today {
  position: relative;
  z-index: 5;

  display: flex;
  align-items: center;
  gap: 1rem;

  max-width: 100%;
  padding: 1rem;

  flex-wrap: wrap; /* KEY: allows wrapping */
}

.donate-today-logo img {
  max-width: 180px;
  width: 100%;
  height: auto;
  display: block;
}

.donate-today-text {
  flex: 1;
  min-width: 220px; /* allows the layout to wrap cleanly */
}

@media (max-width: 576px) {
  .hero-content.donate-today {
    flex-direction: column;
    text-align: center;
  }

  .donate-today-text {
    min-width: 100%;
  }
}
/* MOBILE ONLY: Donate Today hero fixes */
@media (max-width: 576px) {

  /* Make the hero shorter on mobile */
  .hero.hero-donate {
    min-height: auto !important;
    height: auto !important;
    padding-top: 32px;
    padding-bottom: 28px;
  }

  /* Ensure the background image crops nicely within the shorter hero */
  .hero.hero-donate .hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Center the whole donate content stack */
  .hero-content.donate-today {
    position: relative;
    z-index: 5;
    max-width: 520px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    padding: 0 18px;
  }

  /* Center the logo */
  .donate-today-logo {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
  }

  .donate-today-logo img {
    display: block;
    max-width: 170px;
    width: 100%;
    height: auto;
  }

  /* Keep text/button tidy */
  .donate-today-text p {
    margin-bottom: 14px;
  }

}
@media (max-width: 576px) {
  .band-1 {
    padding-left: 10px !important;
  }
	.hook-lines {margin:0px 10px 0px 0px}
	.hook-answer{padding-left:0px}
	.hero-wood .hero-overlay {padding-left:0px}
	.hero-content.bio .bio-heading {margin-top:-60px}
	.band.schedule {padding:0}
	.band-contact {padding:0}
}
#schedule {
  scroll-margin-top: 90px; /* adjust this number */
}
#contact {
  scroll-margin-top: 90px; /* adjust this number */
}
.band-endorsement {
	padding: 0px 50px 0px 50px;
    background: #1a4243;
    color: #fcf8e9;
}

.band-endorsement .endorsement-title {
    margin: 0 0 10px 0;
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 500;
    line-height: 1.05;
    font-family: 'din-condensed';
    text-transform: uppercase;
}

.band-endorsement .endorsement-sub {
  font-size: 1.05rem;
  max-width: 760px;
  opacity: .95;
}

.endorsement-card {
  background: rgba(255,255,255);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  padding: 1.25rem;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.endorsement-logo {
  max-width: 100%;
  max-height: 110px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.calendar-shell {
  background: #fff;
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
}

#campaignCalendar .fc-toolbar-title {
  font-size: 1.75rem;
  font-weight: 800;
}

#campaignCalendar .fc-button {
  border-radius: 10px;
}

#campaignCalendar .fc-daygrid-event {
  border-radius: 8px;
  padding: 2px 6px;
}
.calendar-shell {
  background: #fff;
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
}

#campaignCalendar .fc-toolbar-title {
  font-size: 1.75rem;
  font-weight: 800;
}

#campaignCalendar .fc-button {
  border-radius: 10px;
}

#campaignCalendar .fc-daygrid-event {
  border-radius: 8px;
  padding: 2px 6px;
}
#campaignCalendar .fc-col-header-cell-cushion,
#campaignCalendar .fc-daygrid-day-number {
  color: #000 !important;
}

#campaignCalendar .fc-day-other .fc-daygrid-day-number {
  color: #777 !important;
}
@media (max-width: 576px) {
    .band-endorsement {
        padding: 0;
    }
}