:root{
  --htf-forest:#274436;
  --htf-forest-deep:#182e25;
  --htf-forest-soft:#3d5c4a;
  --htf-cream:#f4edde;
  --htf-cream-2:#fbf7ee;
  --htf-stone:#b8b3a6;
  --htf-charcoal:#17231d;
  --htf-bronze:#8c7651;
  --htf-line:rgba(39,68,54,.16);
  --htf-shadow:0 16px 45px rgba(24,46,37,.11);
}

html{scroll-behavior:smooth}
body{
  background:var(--htf-cream)!important;
  color:var(--htf-charcoal);
  font-family:Arial,Helvetica,sans-serif!important;
  text-rendering:optimizeLegibility;
}

/* Shared header built around the logo */
.global-header{
  min-height:104px;
  padding:12px clamp(20px,4vw,62px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  position:sticky;
  top:0;
  z-index:999;
  background:rgba(244,237,222,.96);
  border-bottom:1px solid var(--htf-line);
  backdrop-filter:blur(14px);
}
.global-brand{display:block;flex:0 0 auto}
.global-brand img{
  width:190px;
  height:78px;
  object-fit:contain;
  object-position:left center;
  transition:transform .28s ease;
}
.global-brand:hover img{transform:translateY(-2px)}
.global-nav{
  display:flex;
  align-items:center;
  gap:clamp(13px,1.8vw,28px);
  font-size:.84rem;
  font-weight:800;
  letter-spacing:.01em;
}
.global-nav a{
  position:relative;
  color:var(--htf-charcoal);
  text-decoration:none;
  padding:13px 0;
  transition:opacity .2s ease,transform .2s ease,color .2s ease;
}
.global-nav a:not(.site-donate)::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:5px;
  height:2px;
  background:var(--htf-forest);
  transition:right .24s ease;
}
.global-nav a:hover{color:var(--htf-forest);transform:translateY(-1px)}
.global-nav a:hover::after,.global-nav a.active::after{right:0}
.site-donate{
  padding:13px 24px!important;
  border-radius:8px;
  background:var(--htf-forest)!important;
  color:var(--htf-cream-2)!important;
  box-shadow:0 7px 18px rgba(24,46,37,.14);
}
.site-donate:hover{background:var(--htf-forest-deep)!important}
.global-menu-toggle{
  display:none;
  border:0;
  background:none;
  padding:8px;
}
.global-menu-toggle span{
  display:block;
  width:28px;
  height:2px;
  margin:6px 0;
  background:var(--htf-forest);
}

/* Shared footer */
.global-footer{
  margin-top:58px;
  padding:38px clamp(20px,5vw,72px) 22px;
  background:var(--htf-forest-deep);
  color:var(--htf-cream);
}
.global-footer-inner{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:190px 1fr auto;
  gap:36px;
  align-items:center;
}
.footer-brand img{
  width:175px;
  padding:7px;
  border-radius:10px;
  background:var(--htf-cream);
}
.footer-message{display:flex;flex-direction:column;gap:3px}
.footer-message strong{font-size:1.05rem}
.footer-message span{opacity:.76}
.footer-actions{display:flex;gap:18px}
.footer-actions a{
  color:var(--htf-cream);
  text-decoration:none;
  font-weight:800;
}
.global-footer-bottom{
  max-width:1180px;
  margin:28px auto 0;
  padding-top:18px;
  border-top:1px solid rgba(244,237,222,.16);
  opacity:.66;
  font-size:.86rem;
}

/* Masculine-modern surface language */
:is(.testimonial-card,.contact-card,.founder-card,.action-card,.community-card,.spotlight-card,.bio-card,.quote-card,.share-card,.closing-card,.donate-panel,.featured-interview,.interview-row,.suggest-banner,.takeaways,.next-interview){
  border-color:var(--htf-line)!important;
  box-shadow:none!important;
}
:is(.testimonial-card,.contact-card,.founder-card,.action-card,.community-card,.spotlight-card,.bio-card,.quote-card,.share-card,.closing-card,.donate-panel,.featured-interview,.interview-row,.suggest-banner,.takeaways,.next-interview):hover{
  box-shadow:var(--htf-shadow)!important;
}
:is(h1,h2,h3){font-family:Arial,Helvetica,sans-serif!important}
h1{font-weight:800!important}
h2,h3{font-weight:750}
.eyebrow{
  font-family:Arial,Helvetica,sans-serif!important;
  font-weight:800!important;
  letter-spacing:.14em!important;
}
:is(.btn,.green-btn,.outline-btn,.text-link,.quote-button,.cta-button,.primary-button){
  transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease,color .22s ease;
}
:is(.btn,.green-btn,.outline-btn,.text-link,.quote-button,.cta-button,.primary-button):hover{
  transform:translateY(-2px);
}
:is(.split-image,.hero-image,.testimonial-image,.testimonial-photo,.mission-image,.mission-image-wrap,.contact-card>img,.community-card-art,.feature-story,.featured-interview img){
  overflow:hidden;
}
:is(.split-image img,.hero-image img,.testimonial-image img,.testimonial-photo img,.mission-image img,.mission-image-wrap img,.contact-card>img,.featured-interview img){
  transition:transform .6s cubic-bezier(.2,.65,.25,1);
}
:is(.split-image,.hero-image,.testimonial-image,.testimonial-photo,.mission-image,.mission-image-wrap,.contact-card,.featured-interview):hover img{
  transform:scale(1.025);
}

/* Subtle scroll reveals */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .65s ease,transform .65s cubic-bezier(.2,.65,.25,1);
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.16s}
.reveal-delay-3{transition-delay:.24s}

/* Initial page entrance */
body.page-ready main{
  animation:pageEnter .55s ease both;
}
@keyframes pageEnter{
  from{opacity:.65;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

/* Community Post refinements */
.page-community .community-line-art,
.page-community .hero-art{
  background:
    linear-gradient(135deg,rgba(61,92,74,.09),rgba(251,247,238,.7));
  color:var(--htf-forest);
  border:1px solid var(--htf-line);
}
.page-community .feature-story{
  background:
    linear-gradient(110deg,rgba(24,46,37,.94),rgba(39,68,54,.55));
}
.page-community .feature-overlay h2{color:var(--htf-cream-2)!important}
.page-community .community-card-art{
  background:var(--htf-forest)!important;
}
.page-community .story-tag{
  border-radius:6px!important;
}

/* Stronger dark-green accents instead of decorative/feminine flourishes */
:is(.quote-band,.closing-banner,.final-cta,.cta-banner){
  background:linear-gradient(100deg,var(--htf-forest-deep),var(--htf-forest))!important;
}
:is(.icon-circle,.pillar-icon){
  background:var(--htf-forest)!important;
  color:var(--htf-cream)!important;
}

/* Responsive navigation */
@media(max-width:1100px){
  .global-menu-toggle{display:block;margin-left:auto}
  .global-nav{
    position:fixed;
    inset:104px 0 auto 0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    padding:20px 24px 28px;
    background:var(--htf-cream);
    border-bottom:1px solid var(--htf-line);
    transform:translateY(-135%);
    opacity:0;
    pointer-events:none;
    transition:transform .28s ease,opacity .28s ease;
  }
  .global-nav.open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .global-nav a{padding:13px 8px}
  .site-donate{text-align:center;margin-top:8px}
}
@media(max-width:680px){
  .global-header{min-height:88px;padding:9px 18px}
  .global-brand img{width:150px;height:66px}
  .global-nav{inset:88px 0 auto 0}
  .global-footer-inner{grid-template-columns:1fr}
  .footer-actions{flex-wrap:wrap}
}

/* Accessibility: motion preference */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .reveal{opacity:1!important;transform:none!important}
}


/* =========================================================
   PHONE + TABLET RESPONSIVE ENHANCEMENTS
   ========================================================= */

/* Prevent horizontal scrolling from wide content/images */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  -webkit-text-size-adjust: 100%;
}

img, video, svg, iframe {
  max-width: 100%;
  height: auto;
}

/* Better touch targets */
a, button {
  -webkit-tap-highlight-color: transparent;
}

.global-nav a,
.site-donate,
.btn,
.green-btn,
.outline-btn,
.cta-button,
.primary-button,
.text-link {
  min-height: 44px;
}

/* iPad landscape and smaller laptops */
@media (max-width: 1180px) {
  .global-header {
    padding-left: 24px;
    padding-right: 24px;
  }

  .global-nav {
    gap: 16px;
    font-size: .82rem;
  }

  .global-brand img {
    width: 170px;
  }

  main > section,
  .wrap,
  .article-shell,
  .all-interviews,
  .featured-interview,
  .suggest-banner,
  .section-wrap,
  .story-content,
  .share-card,
  .community-feature-grid,
  .latest-community,
  .community-hero {
    max-width: calc(100% - 32px) !important;
  }
}

/* iPad portrait */
@media (max-width: 1024px) {
  .global-header {
    min-height: 92px;
  }

  .global-brand img {
    width: 160px;
    height: 66px;
  }

  .global-nav {
    inset: 92px 0 auto 0;
    max-height: calc(100vh - 92px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }

  /* Convert two-column hero/content areas to a comfortable stacked layout */
  .two-col,
  .split-hero,
  .mission-layout,
  .founder-layout,
  .about-grid,
  .article-hero,
  .article-grid,
  .interviews-hero,
  .featured-interview,
  .community-hero,
  .community-feature-grid,
  .hero,
  .closing-card,
  .share-section,
  .vision {
    grid-template-columns: 1fr !important;
  }

  /* Keep imagery visually strong on tablet */
  .split-image,
  .mission-image,
  .hero-image,
  .featured-interview img,
  .article-hero img {
    width: 100%;
    min-height: 340px;
  }

  .split-image img,
  .mission-image img,
  .hero-image img,
  .article-hero img {
    width: 100%;
    height: 100%;
    min-height: 340px;
    object-fit: cover;
  }

  /* Cards: 2 columns on tablet where appropriate */
  .contact-grid,
  .community-cards,
  .ways-grid,
  .involved-grid,
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .pillars {
    grid-template-columns: 1fr !important;
  }

  .testimonial-card,
  .testimonial-card.reverse {
    grid-template-columns: 1fr !important;
  }

  .testimonial-card.reverse .testimonial-image,
  .testimonial-card.reverse .testimonial-photo {
    order: -1;
  }

  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .focus-grid {
    grid-template-columns: 1fr !important;
  }

  .focus-item {
    border-right: 0 !important;
    border-bottom: 1px solid var(--htf-line) !important;
  }

  .focus-item:last-child {
    border-bottom: 0 !important;
  }

  .footer-inner,
  .global-footer-inner {
    grid-template-columns: 1fr !important;
  }
}

/* Large phones / small tablets */
@media (max-width: 768px) {
  :root {
    --mobile-gutter: 18px;
  }

  .global-header {
    min-height: 84px;
    padding: 8px var(--mobile-gutter);
  }

  .global-brand img {
    width: 145px;
    height: 60px;
  }

  .global-nav {
    inset: 84px 0 auto 0;
    padding-left: var(--mobile-gutter);
    padding-right: var(--mobile-gutter);
  }

  .global-nav a {
    width: 100%;
    padding: 14px 8px;
    font-size: 1rem;
  }

  .site-donate {
    width: 100%;
    justify-content: center;
  }

  .wrap,
  .article-shell,
  .all-interviews,
  .featured-interview,
  .suggest-banner,
  .section-wrap,
  .story-content,
  .share-card,
  .community-feature-grid,
  .latest-community,
  .community-hero,
  .breadcrumb,
  .hero {
    width: calc(100% - (var(--mobile-gutter) * 2)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Typography scales */
  h1,
  .hero-copy h1,
  .interviews-hero h1,
  .article-hero h1,
  .community-hero h1 {
    font-size: clamp(2.8rem, 12vw, 4.3rem) !important;
    letter-spacing: -0.035em !important;
    overflow-wrap: anywhere;
  }

  h2 {
    font-size: clamp(2rem, 8.5vw, 3.2rem) !important;
    line-height: 1.05 !important;
  }

  .page-intro h1 {
    font-size: clamp(3rem, 13vw, 4.5rem) !important;
  }

  p,
  .body-copy,
  .hero-copy p,
  .mission-copy p,
  .story-section p,
  .testimonial-copy p {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  .lead,
  .hero-copy .lead {
    font-size: 1.2rem !important;
  }

  /* All common grids become one column on phones */
  .contact-grid,
  .community-cards,
  .ways-grid,
  .involved-grid,
  .card-grid,
  .gallery,
  .focus-grid {
    grid-template-columns: 1fr !important;
  }

  .interview-row {
    grid-template-columns: 92px 1fr !important;
    gap: 16px !important;
  }

  .interview-row img {
    width: 92px !important;
    height: 92px !important;
  }

  .interview-row .outline-btn {
    grid-column: 1 / -1 !important;
    width: 100%;
    justify-content: center;
  }

  /* Consistent mobile cards */
  .testimonial-card,
  .contact-card,
  .community-card,
  .action-card,
  .founder-card,
  .spotlight-card,
  .bio-card,
  .featured-interview,
  .interview-row,
  .suggest-banner,
  .share-card,
  .quote-card,
  .closing-card {
    border-radius: 16px !important;
  }

  .testimonial-card,
  .contact-card,
  .community-card,
  .action-card,
  .interview-row {
    margin-bottom: 16px !important;
  }

  .contact-card > img,
  .testimonial-image img,
  .testimonial-photo img,
  .founder-card > img,
  .community-card img {
    width: 100% !important;
    object-fit: cover !important;
  }

  /* Hero image heights */
  .home-hero {
    min-height: 620px !important;
  }

  .home-hero-content {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }

  .home-hero-content > p:not(.eyebrow) {
    max-width: 92% !important;
  }

  .split-image img,
  .mission-image img,
  .hero-image img,
  .article-hero img,
  .featured-interview img {
    min-height: 280px !important;
    height: 300px !important;
  }

  .testimonial-image,
  .testimonial-photo {
    min-height: 0 !important;
  }

  .testimonial-image img,
  .testimonial-photo img {
    height: auto !important;
    max-height: 520px;
  }

  /* Buttons are easier to tap */
  .button-row,
  .final-actions,
  .share-links,
  .footer-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .button-row .btn,
  .final-actions a {
    flex: 1 1 180px;
  }

  /* Horizontal overflows */
  .article-meta,
  .meta,
  .breadcrumb {
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
  }

  .quote-band,
  .share-card,
  .suggest-banner,
  .next-interview,
  .footer-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .quote-band {
    padding: 28px var(--mobile-gutter) !important;
  }

  /* Footer */
  .global-footer {
    padding-left: var(--mobile-gutter);
    padding-right: var(--mobile-gutter);
  }

  .footer-brand img {
    width: 150px;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .global-header {
    min-height: 78px;
  }

  .global-brand img {
    width: 132px;
    height: 56px;
  }

  .global-nav {
    inset: 78px 0 auto 0;
  }

  .home-hero {
    min-height: 590px !important;
  }

  h1,
  .hero-copy h1,
  .interviews-hero h1,
  .article-hero h1,
  .community-hero h1 {
    font-size: clamp(2.45rem, 13vw, 3.5rem) !important;
  }

  h2 {
    font-size: clamp(1.85rem, 9vw, 2.75rem) !important;
  }

  .split-copy,
  .mission-copy,
  .hero-copy,
  .community-hero > div:first-child {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  .contact-card .card-pad,
  .testimonial-copy,
  .community-card-copy,
  .bio-card,
  .action-card {
    padding: 20px !important;
  }

  .quote-banner {
    grid-template-columns: 1fr !important;
    padding: 22px !important;
  }

  .quote-banner p,
  .article-content blockquote {
    font-size: 1.2rem !important;
  }

  .interview-row {
    grid-template-columns: 1fr !important;
  }

  .interview-row img {
    width: 100% !important;
    height: 210px !important;
  }

  .footer-actions,
  .footer-links,
  .follow,
  .social-links {
    width: 100%;
  }
}

/* iPad landscape specific tuning */
@media (min-width: 769px) and (max-width: 1180px) and (orientation: landscape) {
  .global-nav {
    font-size: .78rem;
    gap: 12px;
  }

  .global-brand img {
    width: 150px;
  }

  .contact-grid,
  .community-cards,
  .ways-grid,
  .involved-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .testimonial-card {
    grid-template-columns: 36% 64% !important;
  }

  .testimonial-card.reverse {
    grid-template-columns: 64% 36% !important;
  }

  .testimonial-card.reverse .testimonial-image,
  .testimonial-card.reverse .testimonial-photo {
    order: initial;
  }
}

/* Safe-area support for iPhones/iPads */
@supports (padding: max(0px)) {
  .global-header {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }

  .global-footer {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
    padding-bottom: max(22px, env(safe-area-inset-bottom));
  }
}


/* =========================================================
   ABOUT PAGE — RESPONSIVE VISION SECTION FIX
   Keeps the final About section contained, balanced, and
   properly spaced on desktop, iPad, and phone.
   ========================================================= */

.page-about .vision {
  width: min(1180px, calc(100% - 40px));
  margin: 54px auto 70px;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid var(--htf-line);
  border-radius: 22px;
  background: var(--htf-cream-2);
}

.page-about .vision .split-copy {
  padding: 58px clamp(38px, 6vw, 72px);
}

.page-about .vision .split-copy h2 {
  max-width: 600px;
  margin-bottom: 24px;
  font-size: clamp(2.8rem, 5vw, 4.8rem);
  line-height: 1.02;
}

.page-about .vision .split-copy > p:not(.eyebrow) {
  max-width: 570px;
  margin-bottom: 26px;
  font-size: 1.08rem;
  line-height: 1.65;
}

.page-about .vision .btn {
  align-self: flex-start;
  min-width: 170px;
}

.page-about .vision .split-image {
  min-width: 0;
  min-height: 430px;
  border-radius: 0;
}

.page-about .vision .split-image img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
  object-position: center;
}

/* Give visual breathing room between the dark pillars and the vision card. */
.page-about .pillars + .vision {
  margin-top: 54px;
}

/* iPad portrait / tablet */
@media (max-width: 1024px) {
  .page-about .vision {
    width: min(760px, calc(100% - 40px));
    grid-template-columns: 1fr !important;
    margin-top: 44px;
    margin-bottom: 58px;
    border-radius: 20px;
  }

  .page-about .vision .split-copy {
    padding: 44px 42px 38px;
  }

  .page-about .vision .split-copy h2 {
    font-size: clamp(2.7rem, 7vw, 4.4rem);
  }

  .page-about .vision .split-image {
    min-height: 360px;
  }

  .page-about .vision .split-image img {
    height: 360px !important;
    min-height: 360px !important;
    object-position: center 42%;
  }
}

/* Phone */
@media (max-width: 720px) {
  .page-about .vision {
    width: calc(100% - 28px) !important;
    margin: 34px auto 48px !important;
    border-radius: 18px;
  }

  .page-about .vision .split-copy {
    padding: 36px 28px 32px !important;
  }

  .page-about .vision .eyebrow {
    margin-bottom: 16px;
  }

  .page-about .vision .split-copy h2 {
    margin-bottom: 22px;
    font-size: clamp(2.45rem, 10.5vw, 3.5rem) !important;
    line-height: 1.04;
    letter-spacing: -0.035em;
  }

  .page-about .vision .split-copy > p:not(.eyebrow) {
    margin-bottom: 24px;
    font-size: 1.04rem !important;
    line-height: 1.65 !important;
  }

  .page-about .vision .btn {
    width: auto !important;
    min-width: 0;
    padding-left: 28px;
    padding-right: 28px;
    align-self: flex-start;
  }

  .page-about .vision .split-image {
    min-height: 0 !important;
  }

  .page-about .vision .split-image img {
    display: block;
    width: 100%;
    height: clamp(280px, 68vw, 390px) !important;
    min-height: 0 !important;
    object-fit: cover;
    object-position: center 38%;
  }
}

/* Small phone */
@media (max-width: 480px) {
  .page-about .vision {
    width: calc(100% - 24px) !important;
  }

  .page-about .vision .split-copy {
    padding: 32px 24px 28px !important;
  }

  .page-about .vision .split-copy h2 {
    font-size: clamp(2.2rem, 11vw, 3rem) !important;
  }

  .page-about .vision .split-image img {
    height: 300px !important;
  }
}


/* =========================================================
   HOME PAGE — RESPONSIVE HERO + INTRO FIX
   ========================================================= */

.page-home .home-hero{
  min-height:680px;
  border-bottom:1px solid var(--htf-line);
}

.page-home .home-hero-content{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
  padding:92px 0;
}

.page-home .home-hero-content h1{
  max-width:760px;
  margin:18px 0 24px;
  font-size:clamp(4.2rem,7vw,7rem);
  line-height:.92;
}

.page-home .home-hero-content>p:not(.eyebrow){
  max-width:620px!important;
  font-size:1.18rem!important;
  line-height:1.6!important;
}

.page-home .home-overlay{
  background:
    linear-gradient(90deg,
      rgba(24,46,37,.92) 0%,
      rgba(24,46,37,.75) 36%,
      rgba(24,46,37,.40) 63%,
      rgba(24,46,37,.08) 100%);
}

.page-home .home-hero-image{
  object-position:center 48%;
}

.page-home .section .two-col{
  width:min(1120px,calc(100% - 40px));
  margin:0 auto;
  padding:12px 0;
}

.page-home .section .two-col h2{
  max-width:520px;
}

.page-home .section .two-col .body-copy{
  max-width:560px;
}

/* iPad / tablet */
@media(max-width:1024px){
  .page-home .home-hero{
    min-height:640px!important;
  }

  .page-home .home-hero-content{
    width:min(760px,calc(100% - 40px));
    padding:76px 0!important;
  }

  .page-home .home-hero-content h1{
    font-size:clamp(4rem,9vw,6.2rem)!important;
  }

  .page-home .home-overlay{
    background:
      linear-gradient(90deg,
        rgba(24,46,37,.90) 0%,
        rgba(24,46,37,.72) 52%,
        rgba(24,46,37,.25) 100%);
  }

  .page-home .section .two-col{
    grid-template-columns:1fr!important;
    gap:26px!important;
    width:min(760px,calc(100% - 40px));
  }

  .page-home .section .two-col .body-copy{
    max-width:none;
  }
}

/* Phone */
@media(max-width:720px){
  .page-home .home-hero{
    min-height:590px!important;
  }

  .page-home .home-hero-image{
    object-position:62% center;
  }

  .page-home .home-overlay{
    background:
      linear-gradient(90deg,
        rgba(24,46,37,.94) 0%,
        rgba(24,46,37,.82) 55%,
        rgba(24,46,37,.48) 100%);
  }

  .page-home .home-hero-content{
    width:calc(100% - 36px);
    padding:62px 0!important;
  }

  .page-home .home-hero-content h1{
    margin:14px 0 22px;
    max-width:95%;
    font-size:clamp(3rem,14vw,4.7rem)!important;
    line-height:.94!important;
  }

  .page-home .home-hero-content>p:not(.eyebrow){
    max-width:92%!important;
    margin-bottom:26px!important;
    font-size:1.02rem!important;
    line-height:1.58!important;
  }

  .page-home .button-row{
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }

  .page-home .button-row .btn{
    flex:none!important;
    width:100%;
    min-height:50px;
  }

  .page-home .section{
    padding:58px 0!important;
  }

  .page-home .section .two-col{
    width:calc(100% - 32px);
    gap:22px!important;
  }

  .page-home .section .two-col h2{
    font-size:clamp(2.35rem,10vw,3.3rem)!important;
  }

  .page-home .pillars article{
    padding:30px 24px!important;
  }
}

/* =========================================================
   MISSION PAGE — RESPONSIVE CARD-LIKE HERO FIX
   ========================================================= */

.page-mission .mission-layout{
  width:min(1180px,calc(100% - 40px));
  margin:52px auto 42px;
  min-height:640px;
  grid-template-columns:1.05fr .95fr;
  overflow:hidden;
  border:1px solid var(--htf-line);
  border-radius:22px;
  background:var(--htf-cream-2);
}

.page-mission .mission-copy{
  padding:58px clamp(38px,5vw,68px);
}

.page-mission .mission-copy h1{
  margin-bottom:28px;
  font-size:clamp(3.3rem,5.4vw,5.5rem);
  line-height:.98;
}

.page-mission .mission-copy p{
  margin-bottom:18px;
  font-size:1rem!important;
  line-height:1.58!important;
}

.page-mission .mission-image{
  border-radius:0!important;
  min-height:640px;
}

.page-mission .mission-image img{
  width:100%;
  height:100%;
  min-height:640px;
  object-fit:cover;
  object-position:center;
}

.page-mission .quote-band{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto 58px;
  border-radius:18px;
  padding:34px 44px!important;
}

/* iPad / tablet */
@media(max-width:1024px){
  .page-mission .mission-layout{
    width:min(760px,calc(100% - 40px));
    grid-template-columns:1fr!important;
    margin-top:42px;
    min-height:0;
  }

  .page-mission .mission-copy{
    padding:44px 42px 38px;
  }

  .page-mission .mission-copy h1{
    font-size:clamp(3rem,7vw,4.7rem);
  }

  .page-mission .mission-image{
    min-height:360px!important;
  }

  .page-mission .mission-image img{
    height:360px!important;
    min-height:360px!important;
    object-position:center 45%;
  }

  .page-mission .quote-band{
    width:min(760px,calc(100% - 40px));
    margin-bottom:52px;
  }
}

/* Phone */
@media(max-width:720px){
  .page-mission .mission-layout{
    width:calc(100% - 28px)!important;
    margin:34px auto 32px!important;
    border-radius:18px;
  }

  .page-mission .mission-copy{
    padding:34px 26px 28px!important;
  }

  .page-mission .mission-copy h1{
    margin-bottom:22px;
    font-size:clamp(2.7rem,11vw,3.8rem)!important;
  }

  .page-mission .mission-copy p{
    font-size:.98rem!important;
    line-height:1.62!important;
  }

  .page-mission .mission-image{
    min-height:0!important;
  }

  .page-mission .mission-image img{
    width:100%;
    height:300px!important;
    min-height:0!important;
    object-fit:cover;
    object-position:center 42%;
  }

  .page-mission .pillars article{
    padding:30px 24px!important;
  }

  .page-mission .quote-band{
    width:calc(100% - 28px)!important;
    margin:0 auto 44px!important;
    padding:28px 24px!important;
    border-radius:16px;
    text-align:left!important;
  }

  .page-mission .quote-band p{
    font-size:1.12rem!important;
    line-height:1.55!important;
  }

  .page-mission .quote-band .btn{
    width:100%;
  }
}

@media(max-width:480px){
  .page-home .home-hero-content{
    width:calc(100% - 28px);
  }

  .page-home .home-hero-content h1{
    font-size:clamp(2.8rem,14.5vw,4rem)!important;
  }

  .page-mission .mission-layout,
  .page-mission .quote-band{
    width:calc(100% - 24px)!important;
  }

  .page-mission .mission-copy{
    padding:30px 22px 26px!important;
  }

  .page-mission .mission-image img{
    height:275px!important;
  }
}

/* =========================================================
   LAYOUT REPAIR — remove accidental one-sided cropping
   ========================================================= */
@media (max-width: 1180px) {
  /* A prior responsive rule constrained every top-level section without
     centering it. That created the cream strip visible on the right. */
  main > section {
    max-width: none !important;
  }
}

/* Structural sections should either be full-width or explicitly centered. */
.page-home .home-hero,
.page-about > main > .split-hero,
.page-about .pillars,
.page-home .pillars,
.page-mission .pillars {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keep the contained sections genuinely centered. */
.page-about .vision,
.page-mission .mission-layout,
.page-mission .quote-band,
.page-testimonials .stories,
.page-testimonials .page-heading {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Testimonial cards were invisible because the original page animation
   script was replaced by the global script. Make their base state visible;
   the section itself still receives the subtle global reveal animation. */
.page-testimonials .story-card {
  opacity: 1 !important;
  transform: none !important;
}

/* Make the testimonial page use the full available mobile/tablet width
   while maintaining symmetrical gutters. */
@media (max-width: 1024px) {
  .page-testimonials .stories {
    width: calc(100% - 32px) !important;
    max-width: 920px !important;
  }

  .page-testimonials .page-heading {
    width: calc(100% - 32px) !important;
    max-width: 920px !important;
  }
}

@media (max-width: 720px) {
  .page-testimonials .stories,
  .page-testimonials .page-heading {
    width: calc(100% - 28px) !important;
  }

  /* Full-bleed hero on Home; no stray cream column on the right. */
  .page-home .home-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
  }

  /* Center the dark pillar blocks instead of leaving a one-sided gutter. */
  .page-about .pillars,
  .page-mission .pillars,
  .page-home .pillars {
    width: calc(100% - 28px) !important;
    margin: 0 auto !important;
    border-radius: 18px;
    overflow: hidden;
  }

  /* About intro becomes a contained, balanced mobile block. */
  .page-about > main > .split-hero:first-of-type {
    width: calc(100% - 28px) !important;
    margin: 28px auto 38px !important;
    overflow: hidden;
    border: 1px solid var(--htf-line);
    border-radius: 18px;
    background: var(--htf-cream-2);
  }

  .page-about > main > .split-hero:first-of-type .split-copy {
    padding: 34px 26px 28px !important;
  }

  .page-about > main > .split-hero:first-of-type .split-image img {
    height: 320px !important;
    min-height: 0 !important;
    object-fit: cover;
  }
}

@media (max-width: 480px) {
  .page-about .pillars,
  .page-mission .pillars,
  .page-home .pillars,
  .page-about > main > .split-hero:first-of-type {
    width: calc(100% - 24px) !important;
  }
}