/* ============ Shared inner-page styles ============ */
nav.primary-nav a.active-nav{color:var(--peach);}
nav.primary-nav a.active-nav::after{content:''; display:block; height:2px; background:var(--peach); margin-top:4px;}


/* ============ Shared Inner Page Hero ============ */

.page-hero {
  padding: 45px 0 50px;
  background: #fff;
  text-align: left;
}

.page-hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 50px;
}

.page-hero h1 {
  font-size: 40px;
  line-height: 1.18;
  color: var(--maroon);
  max-width: 400px;
  margin: 10px;
  text-align: left;
}

.page-hero p {
  font-size: 16px;
  color: #4b4038;
  max-width: 460px;
  margin: 0;
  line-height: 1.75;
  padding-top: 6px;
}

.page-hero .line {
  display: inline;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .8s var(--ease),
    transform .8s var(--ease);
}

.page-hero .line.in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .page-hero .line {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 980px) {
  .page-hero .container {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .page-hero h1 {
    font-size: 36px;
    max-width: none;
  }

  .page-hero p {
    max-width: none;
  }
}

@media (max-width: 560px) {
  .page-hero {
    padding: 60px 0 44px;
  }

  .page-hero h1 {
    font-size: 28px;
  }

  .page-hero p {
    font-size: 14.5px;
  }
}


/* Our Story */
.story{background:var(--cream); padding:20px 0 110px; position:relative; overflow:hidden;}
.story h2{text-align:center; font-size:42px; color:var(--maroon); margin-bottom:56px;}
.story-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center; position:relative;}
.story-bigletter{
  position:absolute; left:-40px; top:50%; transform:translateY(-50%); font-family:'DM Serif Display',serif;
  font-size:520px; line-height:1; color:rgba(138,45,59,0.06); z-index:0; pointer-events:none; user-select:none;
}
.story-photo{position:relative; z-index:1; border-radius:20px; overflow:hidden; box-shadow:var(--shadow);}
.story-photo img{width:100%; display:block;}
.story-copy{position:relative; z-index:1; font-size:15px; line-height:1.85; color:#4b4038;}
.story-copy p{margin-bottom:18px;}
.story-copy b{color:var(--maroon);}

/* The Journey */
.journey{background:#fff; padding:100px 0;}
.journey h2{text-align:center; font-size:42px; color:var(--maroon); margin-bottom:50px;}
.journey-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.journey-card{border-radius:18px; overflow:hidden; border:1px solid var(--line);}
.journey-media{
  height:170px; background:linear-gradient(150deg, var(--maroon), var(--maroon-dark));
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.journey-media svg{width:56px; height:56px; color:rgba(254,243,226,0.85);}
.journey-media .pat{position:absolute; inset:0; opacity:.35;}
.journey-body{padding:20px 22px 24px;}
.journey-body h3{font-family:'DM Serif Display',serif; font-size:19px; color:var(--ink); margin-bottom:8px;}
.journey-body p{font-size:13.5px; color:#7a6f66; line-height:1.6;}

/* Philosophy */
.philosophy{background:var(--cream); padding:100px 0;}
.philosophy-grid{display:grid; grid-template-columns:0.6fr 1.4fr; gap:20px;}
.philosophy h2{font-size:42px; color:var(--maroon); margin-bottom:14px;}
.philosophy-intro p{font-size:14.5px; color:#7a6f66; max-width:280px; line-height:1.65;}
.p-item{display:flex; gap:26px; border-left:1.5px solid rgba(138,45,59,0.2); padding:0 0 44px 30px; position:relative;}
.p-item:last-child{padding-bottom:0;}
.p-item::before{content:''; position:absolute; left:-6px; top:2px; width:11px; height:11px; border-radius:50%; background:var(--maroon);}
.p-item .picon{flex:none; width:56px; height:56px; color:var(--maroon);}
.p-item .picon svg{width:100%; height:100%;}
.p-item p{font-size:15.5px; line-height:1.7; color:#4b4038; padding-top:6px;}

/* Founder quote block */
.founder-quote{padding:0 0 100px;}
.fq-card{
  border-radius:26px; overflow:hidden; background:var(--maroon); display:grid; grid-template-columns:1.4fr 1fr;
  align-items:stretch; box-shadow:var(--shadow);
}
.fq-text{padding:56px 50px; display:flex; align-items:center;}
.fq-text h3{font-family:'DM Serif Display',serif; font-style:italic; font-size:28px; line-height:1.5; color:var(--cream);}
.fq-media{position:relative; min-height:280px;}
.fq-media img{width:100%; height:100%; object-fit:cover; object-position:top;}

/* Mission / Vision */
.mission-vision{background:var(--cream); padding:0 0 110px;}
.mv-row{display:grid; grid-template-columns:0.5fr 1.5fr; gap:30px; padding:36px 0; border-bottom:1px solid var(--line);}
.mv-row:last-child{border-bottom:none;}
.mv-row h2{font-size:32px; color:var(--maroon);}
.mv-row h4{font-family:'Roboto'; font-weight:700; font-size:16px; color:var(--ink); margin-bottom:8px;}
.mv-row p{font-size:14.5px; color:#7a6f66; line-height:1.7; max-width:640px;}

/* Services detail card */
.svc-detail{background:#fff; padding:0 0 110px;}
.svc-tabs-wrap{text-align:center; margin-bottom:44px;}
.svc-card{
  border:1px solid var(--line); border-radius:26px; padding:48px; display:grid; grid-template-columns:0.85fr 1.15fr; gap:50px;
  box-shadow:0 30px 60px -30px rgba(20,8,10,0.12);
}
.svc-card h3{font-family:'DM Serif Display',serif; font-size:30px; color:var(--maroon); margin-bottom:18px;}
.svc-card .desc{font-size:14.5px; line-height:1.8; color:#4b4038; margin-bottom:22px;}
.svc-card .ideal{font-size:13.5px; color:#7a6f66; padding-top:18px; border-top:1px solid var(--line);}
.svc-card .ideal b{color:var(--maroon);}
.svc-covered h4{font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--maroon); font-weight:700; margin-bottom:26px; text-align:center;}
.svc-icon-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0;}
.svc-icon-item{padding:18px 16px; text-align:center; border-right:1px solid var(--line); border-bottom:1px solid var(--line);}
.svc-icon-item:nth-child(3n){border-right:none;}
.svc-icon-item:nth-child(n+4){border-bottom:none;}
.svc-icon-item svg{width:34px; height:34px; color:var(--maroon); margin:0 auto 10px;}
.svc-icon-item span{font-size:12.5px; color:#4b4038; line-height:1.4; display:block;}

/* Services: the cards stack as you scroll.
   Each card sticks near the top and the next one slides up over it.
   --stack-top / --stack-step are also read by the script in services.html. */
.svc-stack{--stack-top:96px; --stack-step:18px; position:relative;}
.svc-stack .svc-card{background:#fff; margin-bottom:44px; transform-origin:50% 0; will-change:transform; transition:transform .12s linear;}
.svc-stack .svc-card:last-child{margin-bottom:0;}
.svc-link{display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-size:13.5px; font-weight:700; color:var(--maroon); transition:gap .2s ease;}
.svc-link:hover{gap:12px;}
@media (min-width:981px) and (min-height:640px){
  .svc-stack .svc-card{position:sticky; top:calc(var(--stack-top) + var(--i, 0) * var(--stack-step));}
}

/* Services: keep the "How It Works" heading pinned together with the cards */
.how-sticky > .how-head{
  position:absolute; top:70px; left: calc(160px - max(0px, (100vw - 1280px) / 2));
  width:300px; max-width:300px; margin:0; padding:0; transform:none; z-index:5; text-align:left;
}
/* Phones & tablets: no room to pin it, so it sits above the cards and
   scrolls away normally, exactly like before. */
@media (max-width:980px){
  .how{padding-top:170px;}
  .how-sticky > .how-head{
    position:absolute; top:auto; bottom:100%; left:0; right:0;
    width:auto; max-width:none; text-align:center; padding:0 20px 28px;
  }
  .how-sticky > .how-head h2{max-width:none; margin:0 auto;}
  .how-sticky > .how-head p{max-width:none; margin:12px auto 0;}
}

/* Blog listing */
.blog-listing-hero{padding-bottom:30px;}
.blog-tabs{display:flex; justify-content:center; gap:8px; margin:20px 0 50px; flex-wrap:wrap;}
.blog-tabs .f{
  padding:11px 24px; border-radius:100px; font-size:13.5px; font-weight:500; cursor:pointer;
  border:1px solid rgba(16,46,80,0.15); color:var(--navy); transition:all .2s ease;
}
.blog-tabs .f.active{background:var(--maroon); color:var(--cream); border-color:var(--maroon);}
.blog-listing-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; padding-bottom:90px;}
.blog-list-card{background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease); display:block;}
.blog-list-card:hover{transform:translateY(-5px); box-shadow:var(--shadow);}
.blog-list-media{aspect-ratio:16/10; overflow:hidden; position:relative;}
.blog-list-media img{width:100%; height:100%; object-fit:cover;}
.blog-list-media .date{position:absolute; top:16px; left:16px; background:#fff; color:var(--maroon); font-size:11.5px; font-weight:700; padding:6px 14px; border-radius:100px;}
.blog-list-body{padding:22px 24px 26px;}
.blog-list-body h3{font-family:'DM Serif Display',serif; font-size:20px; color:var(--ink); margin-bottom:8px;}
.blog-list-body p{font-size:13.5px; color:#7a6f66; line-height:1.6; margin-bottom:14px;}

/* Blog detail article */
.article-hero{padding:60px 0 0;}
.article-hero h1{font-size:36px; color:var(--maroon); max-width:920px; margin-bottom:30px;}
.article-media{border-radius:20px; overflow:hidden; max-height:460px;}
.article-media img{width:100%; display:block;}
.article-body{padding:50px 0 100px; max-width:800px; margin:0 auto;}
.article-body h2{font-size:24px; color:var(--ink); margin:40px 0 16px; font-family:'Roboto'; font-weight:700;}
.article-body h2:first-child{margin-top:0;}
.article-body p{font-size:15.5px; line-height:1.85; color:#4b4038; margin-bottom:20px;}
.article-body p b{color:var(--ink);}
.article-pullquote{
  background:var(--maroon); color:var(--cream); border-radius:20px; padding:40px 46px; margin:36px 0;
  font-family:'DM Serif Display',serif; font-size:22px; line-height:1.6;
}
.article-list{margin:0 0 20px; padding-left:0; list-style:none;}
.article-list li{font-size:15.5px; line-height:1.8; color:#4b4038; margin-bottom:14px;}
.article-list li b{color:var(--ink);}
.article-meta{display:flex; align-items:center; gap:14px; margin-bottom:26px; color:#8a7f76; font-size:13.5px;}
.article-meta .badge{background:var(--cream); color:var(--maroon); font-weight:700; padding:6px 14px; border-radius:100px; font-size:11.5px;}

@media (max-width:980px){
  .svc-stack .svc-card{position:static; transform:none !important;}
  .page-hero .container{
    grid-template-columns:1fr;
    gap:30px;
  }

  .page-hero h1{
    font-size:36px;
  }

  .page-hero p{
    max-width:100%;
  }
  .story-grid{grid-template-columns:1fr;}
  .story-bigletter{display:none;}
  .journey-grid{grid-template-columns:repeat(2,1fr);}
  .philosophy-grid{grid-template-columns:1fr;}
  .fq-card{grid-template-columns:1fr;}
  .fq-media{min-height:220px; order:-1;}
  .mv-row{grid-template-columns:1fr; gap:12px;}
  .svc-card{grid-template-columns:1fr;}
  .blog-listing-grid{grid-template-columns:1fr;}
  .article-hero h1{font-size:28px;}
}
@media (max-width:560px){
  .page-hero h1{font-size:28px;}
  .journey-grid{grid-template-columns:1fr;}
  .story h2, .journey h2, .philosophy h2{font-size:30px;}
  .svc-icon-grid{grid-template-columns:1fr 1fr;}
  .svc-icon-item:nth-child(3n){border-right:1px solid var(--line);}
  .svc-icon-item:nth-child(2n){border-right:none;}
}







/* Fix Services footer on mobile */
@media (max-width: 600px) {
  footer .container {
    padding-left: 22px;
    padding-right: 22px;
    box-sizing: border-box;
  }

  .footer-panel {
    width: calc(100% - 40px);
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 30px 25px;
    border-radius: 32px;
    min-height: auto;
    box-sizing: border-box;
  }

  .footer-nav-cols {
    border-left: none;
    border-top: 1px solid rgba(254, 243, 226, 0.18);
    padding: 25px 0 0;
  }

 /* .footer-wordmark {
    height: 150px;
    margin-top: 0;
  }

  .footer-wordmark img {
    width: 82%;
    transform: translateY(2%);
  } */

  
/* Center footer logo on inner pages */
.footer-wordmark {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding-top: 55px;
}

.footer-wordmark img {
  display: block;
  width: 85%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  transform: none;
  object-fit: contain;
  object-position: center;
}

}





/* Show the complete image on blog article pages */
.article-media {
  height: auto;
  max-height: none;
  overflow: visible;
}

.article-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}




/* Contact page Google Map */
.contact-map {
  width: 100%;
  max-width: 100%;
  margin-top: 28px;
}

.contact-map h4 {
  margin-bottom: 14px;
  color: var(--cream);
}

.contact-map iframe {
  display: block;
  width: 100%;
  max-width: 100%;
}

.contact-map a {
  display: inline-block;
  margin-top: 12px;
  color: var(--cream);
  text-decoration: underline;
  font-size: 14px;
}

@media (max-width: 600px) {
  .contact-map iframe {
    height: 240px;
  }
}




/* Cream background across the entire How It Works section */
.how,
.how-scroll {
  background-color: #fff3e2;
}

.how .stack-card {
  box-shadow: 0 6px 12px rgba(50, 25, 20, 0.28);
  border: 1px solid rgba(90, 45, 35, 0.12);
}