/* Sahra Noor homepage redesign prototype */

@font-face {
  font-family: "Thug Land";
  src:
    url("../fonts/thug-land.woff2") format("woff2"),
    url("../fonts/thug-land.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.redesign-page {
  --redesign-ink: #243033;
  --redesign-muted: #667174;
  --redesign-soft: #f8f2ed;
  --redesign-snow: #f5f9fa;
  --redesign-clay: #b96144;
  --redesign-deep: #163f45;
  --redesign-teal: #2f7f88;
  --redesign-line: rgba(36, 48, 51, 0.14);
  --default-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --heading-font: "Noir Pro", "Playfair Display", Georgia, serif;
  color: var(--redesign-ink);
  background: #fffdfb;
}

.redesign-page h1,
.redesign-page h2,
.redesign-page h3,
.redesign-page h4 {
  font-family: var(--heading-font);
  letter-spacing: 0;
  color: var(--redesign-deep);
}

.redesign-page p,
.redesign-page li,
.redesign-page label,
.redesign-page input,
.redesign-page select,
.redesign-page textarea {
  font-family: var(--default-font);
}

.redesign-page .header {
  z-index: 10000;
  background: rgba(255, 253, 251, 0.92);
  border-bottom: 1px solid rgba(36, 48, 51, 0.08);
  backdrop-filter: blur(14px);
}

.redesign-page .logo .sitename {
  font-family: var(--heading-font);
  font-size: 1.35rem;
  color: var(--redesign-deep);
}

.redesign-page .navmenu a,
.redesign-page .navmenu a:focus {
  color: var(--redesign-deep);
}

.redesign-section {
  padding: clamp(4rem, 7vw, 7rem) 0;
}

.redesign-section .section-title {
  max-width: 780px;
  margin: 0 auto clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 0;
}

.redesign-section .section-title h2 {
  font-size: clamp(2.1rem, 4vw, 4.25rem);
  line-height: 1.02;
  margin-bottom: 0.8rem;
}

.redesign-section .section-title p {
  color: var(--redesign-muted);
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.18rem);
  line-height: 1.75;
}

.redesign-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  color: var(--redesign-clay);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.redesign-hero {
  position: relative;
  min-height: min(780px, 92vh);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 7.5rem 0 5rem;
  background: var(--redesign-snow);
}

.redesign-hero .hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}

body.index-page.redesign-page #hero.redesign-hero {
  position: relative;
  overflow: hidden;
}

body.index-page.redesign-page #hero.redesign-hero .hero-bg-video {
  z-index: 0 !important;
  opacity: 0.58 !important;
  filter: brightness(0.92) saturate(1.06) !important;
}

.redesign-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 28, 32, 0.24) 0%, rgba(10, 28, 32, 0.2) 42%, rgba(10, 28, 32, 0.12) 72%, rgba(10, 28, 32, 0.1) 100%),
    linear-gradient(90deg, rgba(255, 253, 251, 0.78) 0%, rgba(255, 253, 251, 0.56) 42%, rgba(255, 253, 251, 0.2) 72%, rgba(255, 253, 251, 0.08) 100%),
    linear-gradient(180deg, rgba(10, 28, 32, 0.08) 0%, rgba(10, 28, 32, 0.16) 48%, rgba(10, 28, 32, 0.12) 100%);
}

.redesign-hero .container {
  position: relative;
  z-index: 2;
}

body.index-page.redesign-page #hero.redesign-hero .container {
  position: relative;
  z-index: 2;
}

@media (min-width: 992px) {
  body.index-page.redesign-page #hero.redesign-hero .redesign-kicker {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: auto;
    color: #fff;
    background: rgba(13, 75, 84, 0.88);
    border: 1px solid rgba(13, 75, 84, 0.88);
    border-radius: 0;
    padding: 0.34rem 0.82rem;
    font-size: 0.68rem;
    line-height: 1.2;
    box-shadow: none;
    margin: 0 0 1.65rem;
    transform: translateX(3.1rem);
    text-align: center;
    text-shadow: none;
  }

  body.index-page.redesign-page #hero.redesign-hero .redesign-kicker::before,
  body.index-page.redesign-page #hero.redesign-hero .redesign-kicker::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 3.4rem;
    border-top: 1px solid rgba(13, 75, 84, 0.58);
    transform: translateY(-50%);
    z-index: -1;
  }

  body.index-page.redesign-page #hero.redesign-hero .redesign-kicker::before {
    right: 100%;
    margin-right: 0.5rem;
  }

  body.index-page.redesign-page #hero.redesign-hero .redesign-kicker::after {
    left: 100%;
    margin-left: 0.5rem;
  }
}

.redesign-hero h1 {
  max-width: 12ch;
  margin-bottom: 1.1rem;
  font-size: clamp(3.6rem, 8vw, 7.5rem);
  line-height: 0.94;
}

body.redesign-page #hero .hero-book-title-lockup {
  margin: clamp(0.95rem, 2.5vw, 1.45rem) 0 clamp(1.25rem, 3vw, 1.9rem);
  color: var(--heading-color, #123f46);
  font-family: "Thug Land", Georgia, serif;
  font-size: clamp(3.25rem, 7.2vw, 6.75rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  max-width: 100%;
}

body.index-page.redesign-page #hero .hero-book-title-lockup,
body.index-page.redesign-page #hero .hero-title-word,
body.index-page.redesign-page #hero .hero-title-small {
  color: #fffaf1;
}

body.index-page.redesign-page #hero .hero-book-title-lockup {
  position: relative;
  z-index: 2;
  text-shadow: 0 0.08em 0.25em rgba(5, 20, 24, 0.18);
}

body.redesign-page #hero .hero-title-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
}

body.redesign-page #hero .hero-title-topline {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.06em;
  max-width: 100%;
}

body.redesign-page #hero .hero-title-word,
body.redesign-page #hero .hero-title-small {
  display: block;
  font-family: "Thug Land", Georgia, serif;
  font-weight: 400;
}

body.redesign-page #hero .hero-title-word {
  line-height: 0.88;
  letter-spacing: 0.01em;
}

body.redesign-page #hero .hero-title-small-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0.02em;
  margin-left: -0.01em;
}

body.redesign-page #hero .hero-title-small {
  font-size: 0.34em;
  line-height: 1.38;
  letter-spacing: 0.02em;
}

body.redesign-page #hero .hero-title-snow {
  margin-top: 0.52em;
}

body.redesign-page #hero .hero-title-the {
  margin-top: 0.22em;
}

.redesign-hero .hero-copy {
  max-width: 650px;
  color: #344145;
  font-size: clamp(1.12rem, 0.8vw + 1rem, 1.45rem);
  line-height: 1.7;
}

/* =========================================================
   Hero book cover mockup effect
   Faithful simple cover: 2:3 frame, stacked shadow,
   tight radius, and subtle left-edge binding sheen.
========================================================= */
body.redesign-page #hero .bookfx {
  width: clamp(240px, 27vw, 330px);
  aspect-ratio: 2 / 3;
  margin-inline: auto;
}

body.redesign-page #hero .bookfx-content {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  box-shadow:
    rgba(0, 0, 0, 0.15) 0px 1.1px 1.5px,
    rgba(0, 0, 0, 0.1) 0px 2.8px 3.9px,
    rgba(0, 0, 0, 0.08) 0px 5.8px 7.9px,
    rgba(0, 0, 0, 0.06) 0px 12.0455px 16.4px,
    rgba(0, 0, 0, 0.04) 0px 33px 45px;
}

body.redesign-page #hero .bookfx-cover {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border-radius: 3px !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: none !important;
  transform: none !important;
}

body.redesign-page #hero .bookfx-content::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  pointer-events: none;
  filter: contrast(310%) brightness(100%);
  box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px inset;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.118) 0.65%,
    rgba(255, 255, 255, 0.2) 1.53%,
    rgba(255, 255, 255, 0.1) 2.38%,
    rgba(0, 0, 0, 0.05) 3.26%,
    rgba(255, 255, 255, 0.14) 5.68%,
    rgba(244, 244, 244, 0) 6.96%
  );
}

@media (max-width: 991px) {
  body.redesign-page #hero .bookfx {
    width: clamp(210px, 58vw, 300px);
  }
}

.redesign-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

.redesign-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.85rem 1.3rem;
  border: 1px solid var(--redesign-deep);
  border-radius: 999px;
  font-weight: 700;
  color: #fff;
  background: var(--redesign-deep);
}

.redesign-btn:hover {
  color: #fff;
  background: var(--redesign-clay);
  border-color: var(--redesign-clay);
}

.redesign-btn.is-outline {
  color: var(--redesign-deep);
  background: transparent;
}

.redesign-btn.is-outline:hover {
  color: #fff;
  background: var(--redesign-deep);
}

.book-intro {
  background:
    linear-gradient(180deg, #fffdf9 0%, #f7fbfb 100%);
}

.book-intro .row {
  align-items: flex-start !important;
}

.book-intro .about-book-img {
  top: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.book-intro .about-book-img img {
  border-radius: 0;
  box-shadow: 0 22px 44px rgba(22, 63, 69, 0.18);
}

/* Book metadata card — quiet editorial treatment */
/* Book metadata — quiet editorial treatment */
/* Book facts panel — quiet editorial treatment */
/* Book facts panel — quiet editorial treatment */
/* Book facts: quiet editorial treatment under the cover */
.book-intro .book-details {
  position: static;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.4rem;
  padding: 1.35rem 1.4rem 1.45rem;
  background: #f7f4ef;
  border-top: 1px solid rgba(36, 48, 51, 0.12);
  color: #243033;
}

.book-intro .book-details::before,
.book-intro .book-details::after {
  display: none !important;
  content: none !important;
}

.book-intro .book-details .detail-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.7rem;
  align-items: start;
  min-width: 0;
}

.book-intro .book-details .detail-item i {
  font-size: 1.05rem;
  line-height: 1;
  color: #243033;
  opacity: 0.56;
  margin-top: 0.15rem;
}

.book-intro .book-details .detail-item span {
  display: block;
  margin-bottom: 0.18rem;
  font-family: var(--default-font);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(36, 48, 51, 0.58);
}

.book-intro .book-details .detail-item p {
  margin: 0;
  font-family: var(--default-font);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.25;
  color: #243033;
}

@media (max-width: 575px) {
  .book-intro .book-details {
    grid-template-columns: 1fr;
  }
}

.book-intro .book-copy {
  max-width: 720px;
}

.book-intro .book-copy h2 {
  margin-bottom: 0.45rem;
  color: #17282d;
  font-size: clamp(2.65rem, 4.7vw, 5.4rem);
  line-height: 0.98;
}

.book-intro .book-copy h2::before,
.book-intro .book-copy h2::after {
  display: none;
}

.book-intro .about-book-author {
  margin: 0 0 clamp(1.15rem, 2vw, 1.6rem);
  color: rgba(36, 48, 51, 0.58);
  font-family: var(--default-font);
  font-size: 0.82rem !important;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-align: left;
  text-transform: uppercase;
}

.book-intro .about-book-author span {
  color: var(--redesign-deep);
}

.book-intro .lead {
  max-width: 38rem;
  color: #17282d;
  font-size: clamp(1.15rem, 0.65vw + 1rem, 1.38rem);
  line-height: 1.68;
}

.book-intro .book-copy p:not(.lead):not(.about-book-author) {
  color: #405054;
  font-size: clamp(1rem, 0.28vw + 0.96rem, 1.1rem);
  line-height: 1.82;
}

@media (min-width: 992px) {
  .book-intro .about-book-img {
    margin-top: 0.45rem;
  }
}

@media (max-width: 991px) {
  .book-intro .row {
    align-items: center !important;
  }
}

.purchase.redesign-section {
  background: var(--redesign-soft);
}

.purchase .book-format-card {
  border: 1px solid rgba(22, 63, 69, 0.14);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(22, 63, 69, 0.08);
}

.purchase .book-format-card h3 {
  color: var(--redesign-deep);
}

.purchase .book-format-card .buy-options {
  display: flex;
  justify-content: center;
}

.purchase .book-format-card .buy-options .btn-purchase {
  width: min(100%, 280px);
  border-radius: 999px;
  background: var(--redesign-deep);
}

.purchase .book-format-card .buy-options .btn-purchase:hover {
  background: var(--redesign-clay);
}

.meet-sahra {
  background: var(--redesign-snow);
}

.meet-sahra .about-photo img,
.grit-partners .founder-photo-portrait img {
  border-radius: 8px !important;
}

.media-press.redesign-section {
  background: #fffdfb;
}

.media-press .press-card {
  height: 100%;
  border: 1px solid rgba(36, 48, 51, 0.12);
  border-radius: 8px;
  box-shadow: none;
}

.media-press .press-card::before,
.media-press .press-card::after {
  display: none;
}

.story-strategy {
  background: var(--redesign-deep);
  color: rgba(255, 255, 255, 0.84);
}

.story-strategy h2 {
  color: #fff;
}

.story-strategy .section-title p,
.story-strategy p {
  color: rgba(255, 255, 255, 0.82);
}

.story-strategy .bridge-copy {
  max-width: 860px;
  margin: 0 auto;
  font-size: clamp(1.08rem, 0.55vw + 1rem, 1.25rem);
  line-height: 1.85;
}

.story-strategy .story-strategy-mobile-copy {
  display: none;
}

.story-strategy .story-strategy-cta {
  margin-top: 1.4rem;
}

.story-strategy .story-strategy-cta .redesign-btn {
  border-color: #fff;
  color: var(--redesign-deep);
  background: #fff;
}

.story-strategy .story-strategy-cta .redesign-btn:hover {
  border-color: var(--redesign-clay);
  color: #fff;
  background: var(--redesign-clay);
}

@media (max-width: 767px) {
  .story-strategy .story-strategy-desktop-copy {
    display: none;
  }

  .story-strategy .story-strategy-mobile-copy {
    display: block;
  }
}

.grit-partners.redesign-section {
  background: #fffdfb;
}

.grit-partners .founder-intro {
  margin-top: 0 !important;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--redesign-line);
  border-radius: 8px;
  background: var(--redesign-snow);
}

.grit-partners .grit-card {
  height: 100%;
  border: 1px solid rgba(36, 48, 51, 0.12);
  border-radius: 8px;
  box-shadow: none;
}

.contact.redesign-section {
  background: var(--redesign-snow);
}

/* EVENTS PAGE */
body.events-page .main {
  background: #fffdfb;
}

body.events-page .events-hero-rebuilt {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: clamp(430px, 60vh, 590px);
  padding: clamp(5.4rem, 6.2vw, 6.7rem) 0 clamp(2.25rem, 3.4vw, 3.2rem);
  background: var(--redesign-snow);
}

body.events-page .events-hero-rebuilt .hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

body.events-page .events-hero-rebuilt .events-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 253, 251, 0.62) 0%, rgba(255, 253, 251, 0.38) 48%, rgba(255, 253, 251, 0.12) 100%),
    linear-gradient(180deg, rgba(255, 253, 251, 0.22) 0%, rgba(255, 253, 251, 0.04) 48%, rgba(255, 253, 251, 0.38) 100%);
  pointer-events: none;
}

body.events-page .events-hero-rebuilt .container {
  position: relative;
  z-index: 2;
}

body.events-page .events-hero-rebuilt .events-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.44fr);
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: center;
}

body.events-page .events-hero-rebuilt .events-hero-copy h1 {
  max-width: 11ch;
  margin: clamp(0.8rem, 2.4vw, 1.35rem) 0 clamp(1.1rem, 3vw, 1.8rem);
  color: var(--heading-color, #123f46);
  font-family: "Thug Land", Georgia, serif;
  font-size: clamp(3rem, 6vw, 5.8rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

body.events-page .events-hero-rebuilt .events-hero-title-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.56em;
  max-width: 100%;
}

body.events-page .events-hero-rebuilt .events-hero-title-stack span {
  display: block;
  font-family: "Thug Land", Georgia, serif;
  font-weight: 400;
  line-height: 0.96;
}

body.events-page .events-hero-rebuilt .events-hero-copy p {
  max-width: 660px;
  margin: 0;
  color: var(--redesign-muted);
  font-size: clamp(1.04rem, 0.45vw + 1rem, 1.25rem);
  line-height: 1.68;
}

body.events-page .events-hero-rebuilt .events-hero-book {
  display: flex;
  justify-content: center;
}

body.events-page .events-hero-rebuilt .bookfx {
  width: clamp(250px, 17vw, 340px);
  aspect-ratio: 2 / 3;
  margin-inline: auto;
}

body.events-page .events-hero-rebuilt .bookfx-content {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  box-shadow:
    rgba(0, 0, 0, 0.15) 0px 1.1px 1.5px,
    rgba(0, 0, 0, 0.1) 0px 2.8px 3.9px,
    rgba(0, 0, 0, 0.08) 0px 5.8px 7.9px,
    rgba(0, 0, 0, 0.06) 0px 12.0455px 16.4px,
    rgba(0, 0, 0, 0.04) 0px 33px 45px;
}

body.events-page .events-hero-rebuilt .bookfx-cover {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border-radius: 3px !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: none !important;
  transform: none !important;
}

body.events-page .events-hero-rebuilt .bookfx-content::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  pointer-events: none;
  filter: contrast(310%) brightness(100%);
  box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px inset;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.118) 0.65%,
    rgba(255, 255, 255, 0.2) 1.53%,
    rgba(255, 255, 255, 0.1) 2.38%,
    rgba(0, 0, 0, 0.05) 3.26%,
    rgba(255, 255, 255, 0.14) 5.68%,
    rgba(244, 244, 244, 0) 6.96%
  );
}

@media (min-width: 1500px) {
  body.events-page .events-hero-rebuilt .bookfx {
    width: clamp(300px, 18vw, 370px);
  }
}

body.events-page .events-list-section {
  padding-top: clamp(2.25rem, 4vw, 3.5rem);
  background:
    linear-gradient(180deg, #fffdfb 0%, var(--redesign-snow) 100%);
}

body.events-page .events-section-heading {
  max-width: 720px;
  margin-bottom: clamp(1.6rem, 3.8vw, 2.6rem);
}

body.events-page .events-section-heading h2 {
  margin: 0 0 0.8rem;
  font-size: clamp(2rem, 3.4vw, 3.35rem);
  line-height: 1.06;
}

body.events-page .events-section-heading p {
  margin: 0;
  color: var(--redesign-muted);
  font-size: 1rem;
  line-height: 1.65;
}

body.events-page .events-month-tabs {
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
}

body.events-page .event-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid var(--redesign-line);
  border-radius: 999px;
  background: rgba(255, 253, 251, 0.78);
  box-shadow: 0 10px 28px rgba(22, 63, 69, 0.06);
}

body.events-page .event-tab {
  appearance: none;
  min-height: 42px;
  padding: 0.68rem 1.05rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--redesign-deep);
  font-family: var(--default-font);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

body.events-page .event-tab:hover,
body.events-page .event-tab:focus-visible {
  border-color: rgba(185, 97, 68, 0.35);
  color: var(--redesign-clay);
  outline: none;
}

body.events-page .event-tab:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(185, 97, 68, 0.18);
}

body.events-page .event-tab.active,
body.events-page .event-tab[aria-selected="true"] {
  border-color: var(--redesign-deep);
  background: var(--redesign-deep);
  color: #fff;
}

body.events-page .events-month-panels {
  min-height: 1px;
}

body.events-page .event-panel {
  outline: none;
}

body.events-page .event-panel:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(22, 63, 69, 0.12);
}

body.events-page .events-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

body.events-page .event-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: clamp(0.9rem, 1.8vw, 1.15rem);
  border: 1px solid var(--redesign-line);
  border-radius: 8px;
  background: #fffdfb;
  box-shadow: 0 12px 30px rgba(22, 63, 69, 0.06);
}

body.events-page .event-date {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 92px;
  padding: 0.72rem 0.55rem;
  border: 1px solid rgba(185, 97, 68, 0.28);
  border-radius: 8px;
  background: var(--redesign-soft);
  text-align: center;
}

body.events-page .event-date span,
body.events-page .event-date em {
  color: var(--redesign-clay);
  font-family: var(--default-font);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

body.events-page .event-date strong {
  margin: 0.32rem 0;
  color: var(--redesign-deep);
  font-family: var(--heading-font);
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 0.95;
}

body.events-page .event-card-body {
  min-width: 0;
}

body.events-page .event-card-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.45rem;
}

body.events-page .event-format {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0.28rem 0.58rem;
  border-radius: 999px;
  font-family: var(--default-font);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.1;
}

body.events-page .event-format {
  color: var(--redesign-clay);
  background: rgba(185, 97, 68, 0.1);
}

body.events-page .event-card h3 {
  margin: 0 0 0.45rem;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.08;
}

body.events-page .event-card p {
  max-width: 660px;
  margin: 0;
  color: var(--redesign-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

body.events-page .event-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.75rem;
  max-width: none;
  margin: 0.85rem 0 0.65rem;
}

body.events-page .event-meta div {
  padding-top: 0.55rem;
  border-top: 1px solid var(--redesign-line);
}

body.events-page .event-meta dt {
  margin-bottom: 0.12rem;
  color: var(--redesign-clay);
  font-family: var(--default-font);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.events-page .event-meta dd {
  margin: 0;
  color: var(--redesign-ink);
  font-family: var(--default-font);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.4;
}

body.events-page .event-card .event-note {
  color: var(--redesign-deep);
  font-size: 0.78rem;
  font-weight: 800;
}

body.events-page .events-cta-section {
  padding: clamp(2.6rem, 5vw, 4.2rem) 0;
  background: #fffdfb;
}

body.events-page .events-final-cta {
  padding: clamp(1.5rem, 3.6vw, 2.5rem);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(22, 63, 69, 0.97), rgba(36, 48, 51, 0.94)),
    linear-gradient(90deg, rgba(185, 97, 68, 0.22), transparent);
  color: #fff;
}

body.events-page .events-final-cta h2 {
  max-width: 760px;
  margin: 0;
  color: #fff;
  font-size: clamp(1.9rem, 3vw, 3rem);
  line-height: 1.06;
}

body.events-page .events-final-cta p {
  max-width: 760px;
  margin: 0.85rem 0 1.25rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.98rem;
  line-height: 1.65;
}

body.events-page .events-final-cta .redesign-btn {
  border-color: #fff;
  background: #fff;
  color: var(--redesign-deep);
}

body.events-page .events-final-cta .redesign-btn:hover {
  border-color: var(--redesign-clay);
  background: var(--redesign-clay);
  color: #fff;
}

@media (max-width: 991px) {
  body.events-page .events-hero-rebuilt .events-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 0.36fr);
    gap: 1.75rem;
  }

  body.events-page .events-hero-rebuilt .bookfx {
    width: clamp(190px, 25vw, 260px);
  }

  body.events-page .events-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  body.events-page .events-hero-rebuilt {
    min-height: auto;
    padding-top: 5.7rem;
    padding-bottom: 2.5rem;
  }

  body.events-page .events-hero-rebuilt .events-hero-title {
    margin-top: 0.85rem;
    margin-bottom: 1.1rem;
    line-height: 0.92;
  }

  body.events-page .events-hero-rebuilt .events-hero-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  body.events-page .events-hero-rebuilt .events-hero-book {
    justify-content: flex-start;
  }

  body.events-page .events-hero-rebuilt .bookfx {
    width: clamp(160px, 45vw, 230px);
  }

  body.events-page .event-card {
    grid-template-columns: 1fr;
  }

  body.events-page .events-month-tabs,
  body.events-page .event-tabs {
    width: 100%;
  }

  body.events-page .event-tabs {
    border-radius: 8px;
  }

  body.events-page .event-tab {
    flex: 1 1 30%;
    padding-right: 0.6rem;
    padding-left: 0.6rem;
  }

  body.events-page .event-meta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 390px) {
  body.events-page .events-hero-rebuilt .events-hero-title {
    margin-top: 0.75rem;
    margin-bottom: 1rem;
  }

}

@media (max-width: 575px) {
  body.events-page .redesign-actions,
  body.events-page .redesign-actions .redesign-btn,
  body.events-page .events-final-cta .redesign-btn {
    width: 100%;
  }
}

.contact .php-email-form,
.contact .info-wrap {
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(22, 63, 69, 0.08);
}

.redesign-page .footer {
  background: #102f34;
  color: rgba(255, 255, 255, 0.78);
}

.redesign-page .footer h4,
.redesign-page .footer .sitename {
  color: #fff;
}

.redesign-page .footer a {
  color: rgba(255, 255, 255, 0.86);
}

.redesign-page .footer a:hover {
  color: #fff;
}

.redesign-page .footer .social-links a {
  border-color: rgba(255, 255, 255, 0.24);
}

@media (max-width: 991px) {
  .redesign-hero {
    min-height: auto;
    padding-top: 6.5rem;
  }

  .redesign-hero::before {
    background: rgba(255, 253, 251, 0.9);
  }

}

@media (max-width: 575px) {
  .redesign-actions .redesign-btn {
    width: 100%;
  }

  .redesign-section {
    padding: 3.5rem 0;
  }
}

/* =========================================================
   BOOK INTRO — Final neutral editorial override
   Purpose: remove the overworked color treatment from the
   book information panel and bring this section closer to a
   clean modern author-site direction.
========================================================= */

body.redesign-page .book-intro {
  background:
    linear-gradient(180deg, #fbfaf7 0%, #ffffff 100%) !important;
}

body.redesign-page .book-intro .row {
  align-items: flex-start !important;
}

/* Restore the book cover to a clean image treatment */
body.redesign-page .book-intro .about-book-img {
  margin-top: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.redesign-page .book-intro .about-book-img img {
  display: block !important;
  width: min(100%, 390px) !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: 0 18px 36px rgba(18, 28, 31, 0.16) !important;
}

/* Remove the “decorated box” feeling from the book facts */
body.redesign-page .book-intro .book-details {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;

  width: min(100%, 390px) !important;
  margin: 1.35rem auto 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.redesign-page .book-intro .book-details::before,
body.redesign-page .book-intro .book-details::after {
  display: none !important;
  content: none !important;
}

body.redesign-page .book-intro .book-details .detail-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.7rem !important;

  padding: 0.9rem 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(20, 31, 34, 0.14) !important;
  box-shadow: none !important;
}

body.redesign-page .book-intro .book-details .detail-item:nth-last-child(-n + 2) {
  border-bottom: 0 !important;
}

body.redesign-page .book-intro .book-details .detail-item i {
  width: auto !important;
  height: auto !important;
  margin-top: 0.15rem !important;

  color: #9b6a45 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  font-size: 1rem !important;
  line-height: 1 !important;
}

body.redesign-page .book-intro .book-details .detail-item span {
  display: block !important;
  margin-bottom: 0.2rem !important;

  color: rgba(20, 31, 34, 0.56) !important;
  font-family: var(--default-font) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

body.redesign-page .book-intro .book-details .detail-item p {
  margin: 0 !important;

  color: #18282d !important;
  font-family: var(--default-font) !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

/* Keep the title/content aligned with the top of the book */
body.redesign-page .book-intro .book-copy {
  padding-top: 0 !important;
}

body.redesign-page .book-intro .book-copy h2 {
  margin-top: 0 !important;
  color: #18282d !important;
}

body.redesign-page .book-intro .lead {
  color: #223237 !important;
}

body.redesign-page .book-intro .book-copy p:not(.lead):not(.about-book-author) {
  color: #48575b !important;
}

@media (max-width: 575px) {
  body.redesign-page .book-intro .book-details {
    grid-template-columns: 1fr !important;
  }

  body.redesign-page .book-intro .book-details .detail-item:nth-last-child(2) {
    border-bottom: 1px solid rgba(20, 31, 34, 0.14) !important;
  }
}

/* =========================================================
   EXCERPT READER — open book spread
========================================================= */
body.redesign-page #excerpt-reader.excerpt-reader {
  background: linear-gradient(180deg, #F7FCFD 0%, #EEF8FA 100%);
  color: #122D32;
  padding: clamp(3.25rem, 5.5vw, 5rem) 0;
  overflow: hidden;
}

body.redesign-page #excerpt-reader .reader {
  max-width: 1240px;
}

body.redesign-page #excerpt-reader .reader-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.35rem, 2.5vw, 2rem);
}

body.redesign-page #excerpt-reader .reader-intro h2 {
  color: #102F38;
  font-family: var(--heading-font);
  font-size: clamp(2.4rem, 4vw, 4.35rem);
  line-height: 0.98;
  letter-spacing: 0;
  margin: 0 0 0.55rem;
}

body.redesign-page #excerpt-reader .reader-intro p {
  color: #667174;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

body.redesign-page #excerpt-reader .book-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  flex: 0 0 auto;
}

body.redesign-page #excerpt-reader .book-control {
  width: 2.65rem;
  height: 2.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #102F38;
  background: rgba(255, 253, 248, 0.82);
  border: 1px solid rgba(143, 181, 196, 0.72);
  border-radius: 999px;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

body.redesign-page #excerpt-reader .book-control:hover,
body.redesign-page #excerpt-reader .book-control:focus-visible {
  color: #9A5B45;
  border-color: rgba(154, 91, 69, 0.38);
  transform: translateY(-1px);
}

body.redesign-page #excerpt-reader .book-control[disabled] {
  opacity: 0.38;
  pointer-events: none;
}

body.redesign-page #excerpt-reader .book-page-status {
  min-width: 5.8rem;
  color: #667174;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

body.redesign-page #excerpt-reader .book-cover-excerpt {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 auto 0.65rem;
  padding: 0.48rem 0.8rem;
  color: #667174;
  background: rgba(220, 238, 243, 0.84);
  border: 1px solid rgba(143, 181, 196, 0.7);
  border-radius: 999px;
  box-shadow:
    0 10px 26px rgba(35, 73, 88, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.58) inset;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.redesign-page #excerpt-reader .book-cover-excerpt strong {
  color: #102F38;
  font-family: var(--heading-font);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}

body.redesign-page #excerpt-reader .open-book {
  position: relative;
  padding: clamp(1.25rem, 2.4vw, 1.95rem);
  border: 1px solid #8FB5C4;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(143, 181, 196, 0.26), transparent 12%, transparent 88%, rgba(143, 181, 196, 0.22)),
    linear-gradient(180deg, #E4F3F7 0%, #D2E8EF 100%);
  box-shadow:
    0 30px 78px rgba(35, 73, 88, 0.20),
    0 2px 0 rgba(255, 255, 255, 0.58) inset,
    0 -1px 0 rgba(87, 128, 143, 0.18) inset;
}

body.redesign-page #excerpt-reader .book-viewport {
  position: relative;
  min-height: min(78vh, 760px);
}

body.redesign-page #excerpt-reader .spread {
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: min(78vh, 760px);
  background: #FFFFFB;
  border: 1px solid rgba(243, 235, 220, 0.8);
  border-radius: 8px;
  box-shadow:
    0 18px 46px rgba(35, 73, 88, 0.14),
    0 2px 0 rgba(255, 255, 255, 0.84) inset;
  overflow: hidden;
}

body.redesign-page #excerpt-reader .spread-active {
  display: grid;
}

body.redesign-page #excerpt-reader .page {
  position: relative;
  min-width: 0;
  background:
    linear-gradient(90deg, rgba(210, 225, 230, 0.22), transparent 10%),
    #FFFFFB;
}

body.redesign-page #excerpt-reader .page-left {
  background:
    linear-gradient(270deg, rgba(226, 232, 226, 0.35), transparent 12%),
    #FFFFFB;
}

body.redesign-page #excerpt-reader .page-right {
  border-left: 1px solid rgba(143, 181, 196, 0.42);
}

body.redesign-page #excerpt-reader .page-right::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2.15rem;
  background: linear-gradient(90deg, rgba(32, 58, 67, 0.16), transparent);
  pointer-events: none;
}

body.redesign-page #excerpt-reader .page-inner {
  height: min(78vh, 760px);
  max-width: 34.5rem;
  margin-inline: auto;
  padding: clamp(1.08rem, 1.8vw, 1.58rem) clamp(1.32rem, 2.35vw, 2.18rem);
  color: #102F38;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.82rem, 0.64rem + 0.24vw, 0.91rem);
  line-height: 1.66;
  overflow: hidden;
}

body.redesign-page #excerpt-reader .page-inner p {
  margin: 0 0 0.52rem;
}

body.redesign-page #excerpt-reader .page-inner p + p {
  text-indent: 1.25em;
}

body.redesign-page #excerpt-reader .page-inner p:last-child {
  margin-bottom: 0;
}

body.redesign-page #excerpt-reader .excerpt-break {
  color: #667174;
  font-family: var(--default-font);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  line-height: 1;
  margin: 0.8rem 0 0.7rem;
  text-align: center;
}

body.redesign-page #excerpt-reader .excerpt-page-kicker {
  display: block;
  margin-bottom: 0.38rem;
  color: #9A5B45;
  font-family: var(--default-font);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.redesign-page #excerpt-reader .page h3 {
  color: #102F38;
  font-family: var(--heading-font);
  font-size: clamp(1.55rem, 2.5vw, 2.55rem);
  line-height: 1;
  margin: 0 0 0.78rem;
}

body.redesign-page #excerpt-reader .dropcap::first-letter {
  float: left;
  color: #102F38;
  font-family: var(--heading-font);
  font-size: 3.1em;
  line-height: 0.82;
  padding: 0.08em 0.1em 0 0;
}

@media (max-width: 991px) {
  body.redesign-page #excerpt-reader .reader-intro {
    align-items: flex-start;
    flex-direction: column;
  }

  body.redesign-page #excerpt-reader .book-viewport,
  body.redesign-page #excerpt-reader .spread {
    min-height: auto;
  }

  body.redesign-page #excerpt-reader .spread-active {
    grid-template-columns: 1fr;
  }

  body.redesign-page #excerpt-reader .page-right {
    border-left: 0;
    border-top: 1px solid rgba(62, 48, 36, 0.14);
  }

  body.redesign-page #excerpt-reader .page-right::before {
    display: none;
  }
}

@media (max-width: 575px) {
  body.redesign-page #excerpt-reader .book-controls {
    width: 100%;
    justify-content: space-between;
  }

  body.redesign-page #excerpt-reader .book-page-status {
    flex: 1 1 auto;
  }

  body.redesign-page #excerpt-reader .page-inner {
    padding: 1.2rem;
    font-size: 0.94rem;
    line-height: 1.5;
  }

  body.redesign-page #excerpt-reader .book-cover-excerpt {
    margin-left: 0;
  }
}

/* =========================================================
   PURCHASE — Quiet editorial preorder section
   Purpose:
   - Move away from book-cover color repetition
   - Use light accents, neutral cards, and professional contrast
   - Preserve existing purchase markup/layout
========================================================= */

.purchase.redesign-section,
#purchase.purchase {
  background: #f8f5ef !important;
  color: #243033 !important;
}

#purchase .section-title,
.purchase.redesign-section .section-title {
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-bottom: clamp(2rem, 4vw, 3rem) !important;
}

#purchase .section-title h2,
.purchase.redesign-section .section-title h2 {
  color: #12383f !important;
  font-size: clamp(2.1rem, 3.6vw, 4rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 0.75rem !important;
}

#purchase .section-title h2::before {
  background: rgba(18, 56, 63, 0.14) !important;
}

#purchase .section-title h2::after {
  background: rgba(38, 139, 163, 0.45) !important;
}

#purchase .section-title p,
.purchase.redesign-section .section-title p {
  color: rgba(36, 48, 51, 0.66) !important;
  font-size: 0.98rem !important;
  line-height: 1.6 !important;
}

/* Cards */
#purchase .book-format-card {
  background: #fffdfa !important;
  border: 1px solid rgba(36, 48, 51, 0.12) !important;
  border-radius: 6px !important;
  box-shadow: 0 14px 34px rgba(31, 44, 47, 0.055) !important;
  color: #243033 !important;
  padding: clamp(1.5rem, 2.3vw, 2.15rem) !important;
}

#purchase .book-format-card::before,
#purchase .book-format-card::after {
  display: none !important;
  content: none !important;
}

/* Icons: quiet accent, not decorative color blocks */
#purchase .book-format-card .format-icon {
  width: 42px !important;
  height: 42px !important;
  margin-bottom: 1.25rem !important;
  background: #eef5f4 !important;
  border: 1px solid rgba(38, 139, 163, 0.16) !important;
  color: #267d8b !important;
}

#purchase .book-format-card .format-icon i {
  color: #267d8b !important;
  font-size: 1.05rem !important;
}

/* Card typography */
#purchase .book-format-card h3 {
  color: #243033 !important;
  font-family: var(--default-font) !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
  margin-bottom: 0.35rem !important;
  text-align: center !important;
  text-transform: none !important;
}

#purchase .book-format-card .format-price {
  color: #267d8b !important;
  font-family: var(--default-font) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin-bottom: 1.2rem !important;
  text-align: center !important;
}

/* Feature list */
#purchase .format-features {
  max-width: 32ch !important;
  margin: 0 auto 1.45rem !important;
  padding: 0 !important;
}

#purchase .format-features li {
  color: rgba(36, 48, 51, 0.78) !important;
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
  gap: 0.55rem !important;
  margin-bottom: 0.55rem !important;
}

#purchase .format-features li i {
  color: rgba(38, 125, 139, 0.72) !important;
  font-size: 0.82rem !important;
  margin-right: 0 !important;
  margin-top: 0.25rem !important;
}

/* Buttons */
#purchase .buy-options {
  display: flex !important;
  justify-content: center !important;
  margin-top: auto !important;
}

#purchase .btn-purchase {
  width: min(100%, 240px) !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #12383f !important;
  border: 1px solid #12383f !important;
  border-radius: 999px !important;
  color: #ffffff !important;

  font-family: var(--default-font) !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.1 !important;
  padding: 0.8rem 1.3rem !important;

  box-shadow: none !important;
  text-decoration: none !important;
}

#purchase .btn-purchase:hover,
#purchase .btn-purchase:focus {
  background: #1d5962 !important;
  border-color: #1d5962 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* Remove the overly blue/peach row-card feel */
#purchase .purchase-row {
  align-items: stretch !important;
}

#purchase .purchase-row + .purchase-row {
  margin-top: 1.25rem !important;
}

/* Slightly calmer two-up row */
#purchase .purchase-row .col-lg-6 .book-format-card {
  align-items: center !important;
  text-align: center !important;
}

@media (max-width: 768px) {
  #purchase .book-format-card {
    padding: 1.35rem !important;
  }

  #purchase .section-title h2 {
    font-size: clamp(2rem, 10vw, 3rem) !important;
  }
}

/* =========================================================
   PURCHASE — Quiet retailer cards
========================================================= */

.purchase.redesign-section {
  background: #f8f5ef;
}

.purchase.redesign-section .book-format-card {
  background: #fffdf9;
  border: 1px solid rgba(25, 38, 42, 0.12);
  border-radius: 6px;
  box-shadow: 0 16px 36px rgba(25, 38, 42, 0.06);
  padding: clamp(1.6rem, 2.4vw, 2.2rem);
  text-align: center;
}

.purchase.redesign-section .book-format-card::before {
  display: none !important;
}

.purchase.redesign-section .format-icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 1.15rem;
  background: #f1eee8;
  color: #1c3439;
}

.purchase.redesign-section .format-icon i {
  color: #1c3439;
  font-size: 1.1rem;
}

.purchase.redesign-section .book-format-card h3 {
  color: #1b272b;
  font-family: var(--default-font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 0.35rem;
}

.purchase.redesign-section .format-price {
  color: #4f6267;
  font-family: var(--default-font);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 1.35rem;
}

.purchase.redesign-section .format-features {
  width: min(100%, 31ch);
  margin: 0 auto 1.65rem;
  padding: 0;
  list-style: none;
}

.purchase.redesign-section .format-features li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  color: #445154;
  font-size: 0.94rem;
  line-height: 1.45;
  text-align: left;
  margin-bottom: 0.46rem;
}

.purchase.redesign-section .format-features li i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1rem;
  margin: 0;
  color: #60777d;
  font-size: 0.82rem;
  line-height: 1;
  transform: none;
}

.purchase.redesign-section .format-features li span {
  display: inline-block;
}

.purchase.redesign-section .buy-options {
  display: flex;
  justify-content: center;
  margin-top: auto;
}

.purchase.redesign-section .btn-purchase {
  width: min(100%, 250px);
  background: #183a40;
  border: 1px solid #183a40;
  color: #fff;
  border-radius: 999px;
  padding: 0.72rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

.purchase.redesign-section .btn-purchase:hover {
  background: #2c5359;
  border-color: #2c5359;
  color: #fff;
  transform: translateY(-2px);
}

/* =========================================================
   PURCHASE — Final quiet retailer section
   Clean author-site treatment: warm paper, ink, soft blue accent.
========================================================= */

body.redesign-page #purchase.purchase.redesign-section,
body.redesign-page #purchase.purchase {
  background: #f7f4ef !important;
  color: #243033 !important;
}

body.redesign-page #purchase .section-title {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-bottom: clamp(2rem, 4vw, 3rem) !important;
}

body.redesign-page #purchase .section-title h2 {
  color: #17282d !important;
  font-size: clamp(2.1rem, 3.6vw, 4rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 0.75rem !important;
}

body.redesign-page #purchase .section-title h2::before {
  background: rgba(23, 40, 45, 0.14) !important;
}

body.redesign-page #purchase .section-title h2::after {
  background: #a8c9cf !important;
}

body.redesign-page #purchase .section-title p {
  color: rgba(36, 48, 51, 0.68) !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
}

body.redesign-page #purchase .purchase-row {
  justify-content: center !important;
  align-items: stretch !important;
}

body.redesign-page #purchase .purchase-row + .purchase-row {
  margin-top: 1.25rem !important;
}

body.redesign-page #purchase .book-format-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;

  background: #fffdf9 !important;
  color: #243033 !important;
  border: 1px solid rgba(36, 48, 51, 0.12) !important;
  border-radius: 6px !important;
  box-shadow: 0 16px 36px rgba(25, 38, 42, 0.055) !important;
  padding: clamp(1.5rem, 2.4vw, 2.2rem) !important;
}

body.redesign-page #purchase .book-format-card::before,
body.redesign-page #purchase .book-format-card::after {
  display: none !important;
  content: none !important;
}

body.redesign-page #purchase .book-format-card .format-icon {
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 1.15rem !important;

  background: #eef3f2 !important;
  border: 1px solid rgba(36, 48, 51, 0.10) !important;
  border-radius: 999px !important;
  color: #315e65 !important;
}

body.redesign-page #purchase .book-format-card .format-icon i {
  color: #315e65 !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
}

body.redesign-page #purchase .book-format-card h3 {
  width: 100% !important;
  color: #1b272b !important;
  font-family: var(--default-font) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: none !important;
  margin: 0 0 0.35rem !important;
}

body.redesign-page #purchase .book-format-card .format-price {
  width: 100% !important;
  color: #5c6b6f !important;
  font-family: var(--default-font) !important;
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  margin: 0 0 1.25rem !important;
}

body.redesign-page #purchase .format-features {
  width: min(100%, 32ch) !important;
  max-width: 32ch !important;
  margin: 0 auto 1.55rem !important;
  padding: 0 !important;
  list-style: none !important;
}

body.redesign-page #purchase .format-features li {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.58rem !important;

  color: #465356 !important;
  font-size: 0.93rem !important;
  line-height: 1.45 !important;
  text-align: left !important;
  margin: 0 0 0.72rem !important;
}

body.redesign-page #purchase .format-features li i {
  flex: 0 0 1rem !important;
  width: 1rem !important;
  height: 1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #6e8b90 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 0.86rem !important;
  line-height: 1 !important;
  margin: 0 !important;
  transform: none !important;
}

body.redesign-page #purchase .buy-options {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin-top: auto !important;
}

body.redesign-page #purchase .btn-purchase {
  width: min(100%, 250px) !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #183a40 !important;
  border: 1px solid #183a40 !important;
  border-radius: 999px !important;
  color: #ffffff !important;

  font-family: var(--default-font) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-decoration: none !important;
  padding: 0.72rem 1.25rem !important;

  box-shadow: none !important;
}

body.redesign-page #purchase .btn-purchase:hover,
body.redesign-page #purchase .btn-purchase:focus-visible {
  background: #2d5960 !important;
  border-color: #2d5960 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* =========================================================
   PURCHASE — spacing + content rhythm refinement
   Keeps the cleaner white-card direction, reduces the empty gap,
   and lets CTAs sit naturally after the sales points.
========================================================= */

body.redesign-page #purchase {
  padding-top: clamp(3.5rem, 6vw, 5rem) !important;
  padding-bottom: clamp(4rem, 7vw, 6rem) !important;
}

body.redesign-page #purchase .section-title {
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem) !important;
  margin-bottom: 0 !important;
}

body.redesign-page #purchase .section-title p {
  margin-bottom: 0 !important;
}

body.redesign-page #purchase .purchase-row {
  margin-top: clamp(0.25rem, 1vw, 0.75rem) !important;
}

body.redesign-page #purchase .book-format-card {
  min-height: auto !important;
  justify-content: flex-start !important;
  padding: clamp(2rem, 3vw, 2.6rem) clamp(1.6rem, 2.6vw, 2.2rem) !important;
}

body.redesign-page #purchase .format-icon {
  margin-bottom: 1.1rem !important;
}

body.redesign-page #purchase .book-format-card h3 {
  margin-bottom: 0.35rem !important;
}

body.redesign-page #purchase .format-price {
  margin-bottom: 1.35rem !important;
}

body.redesign-page #purchase .format-features {
  width: min(100%, 34ch) !important;
  max-width: 34ch !important;
  margin: 0 auto 1.55rem !important;
}

body.redesign-page #purchase .format-features li {
  align-items: center !important;
  gap: 0.65rem !important;
  margin-bottom: 0.8rem !important;
  line-height: 1.42 !important;
}

body.redesign-page #purchase .format-features li i {
  margin-top: 0 !important;
  transform: none !important;
}

body.redesign-page #purchase .buy-options {
  margin-top: 0 !important;
  width: 100% !important;
  justify-content: center !important;
}

body.redesign-page #purchase .btn-purchase {
  margin-top: 0 !important;
}

/* =========================================================
   PURCHASE — Card hierarchy + constrained sales points
   Keeps the section quiet, but makes retailer/price clearer.
========================================================= */

body.redesign-page #purchase .book-format-card {
  padding-top: clamp(2.35rem, 3vw, 3rem) !important;
}

/* Larger retailer icon */
body.redesign-page #purchase .book-format-card .format-icon {
  width: clamp(3.35rem, 4.2vw, 4.25rem) !important;
  height: clamp(3.35rem, 4.2vw, 4.25rem) !important;
  margin-bottom: 1.35rem !important;
}

body.redesign-page #purchase .book-format-card .format-icon i {
  font-size: clamp(1.35rem, 1.4vw, 1.7rem) !important;
}

/* Bigger retailer name */
body.redesign-page #purchase .book-format-card h3 {
  font-size: clamp(1.35rem, 1.05rem + 0.75vw, 1.75rem) !important;
  line-height: 1.15 !important;
  margin-bottom: 0.35rem !important;
}

/* Prominent price + quieter format label */
body.redesign-page #purchase .book-format-card .format-price {
  display: flex !important;
  justify-content: center !important;
  align-items: baseline !important;
  gap: 0.4rem !important;
  margin-bottom: clamp(1.5rem, 2vw, 2rem) !important;
}

body.redesign-page #purchase .book-format-card .format-price .price-main {
  font-size: clamp(2rem, 1.55rem + 1.45vw, 3rem) !important;
  line-height: 0.95 !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  color: #143f46 !important;
}

body.redesign-page #purchase .book-format-card .format-price .price-note {
  font-size: clamp(0.95rem, 0.85rem + 0.25vw, 1.1rem) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #667477 !important;
}

/* Constrain sales points so the visual width matches the button better */
body.redesign-page #purchase .book-format-card .format-features {
  width: min(100%, 20rem) !important;
  max-width: 20rem !important;
  margin: 0 auto clamp(2rem, 3vw, 2.75rem) !important;
  padding-left: 0 !important;
}

/* Align icon with the middle of the first text line */
body.redesign-page #purchase .book-format-card .format-features li {
  display: grid !important;
  grid-template-columns: 1.05rem minmax(0, 1fr) !important;
  column-gap: 0.8rem !important;
  align-items: center !important;
  text-align: left !important;
  line-height: 1.35 !important;
}

body.redesign-page #purchase .book-format-card .format-features li i {
  display: inline-grid !important;
  place-items: center !important;
  width: 1.05rem !important;
  height: 1.05rem !important;
  margin: 0 !important;
  transform: none !important;
  font-size: 0.9rem !important;
}

/* Keep button and bullet column visually related */
body.redesign-page #purchase .book-format-card .btn-purchase {
  width: min(100%, 20rem) !important;
}

/* =========================================================
   PURCHASE REDESIGN — refined literary retail cards
   Final scoped override for the active prototype purchase section.
========================================================= */

body.redesign-page #purchase.purchase.redesign-section {
  background: #f8f5ef !important;
  color: #4b4b46 !important;
  padding-top: clamp(3.75rem, 6vw, 5.75rem) !important;
  padding-bottom: clamp(4rem, 6vw, 5.75rem) !important;
}

body.redesign-page #purchase .section-title {
  max-width: 720px !important;
  padding-bottom: clamp(1.45rem, 2.6vw, 2.15rem) !important;
}

body.redesign-page #purchase .section-title .redesign-kicker {
  color: #a66f52 !important;
  margin-bottom: 0.75rem !important;
}

body.redesign-page #purchase .section-title h2 {
  color: #102e34 !important;
  font-size: clamp(2.35rem, 3.8vw, 4.2rem) !important;
  letter-spacing: 0 !important;
  margin-bottom: 0.75rem !important;
}

body.redesign-page #purchase .section-title h2::before,
body.redesign-page #purchase .section-title h2::after {
  display: none !important;
}

body.redesign-page #purchase .section-title p {
  color: #5d625d !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
}

body.redesign-page #purchase .purchase-row {
  row-gap: 1.35rem !important;
  align-items: stretch !important;
}

body.redesign-page #purchase .book-format-card {
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: clamp(1.45rem, 2.1vw, 1.95rem) clamp(1.25rem, 2vw, 1.65rem) !important;
  background: #fffdf8 !important;
  border: 1px solid rgba(24, 54, 58, 0.12) !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 38px rgba(68, 52, 39, 0.08) !important;
  text-align: center !important;
}

body.redesign-page #purchase .book-format-card::before,
body.redesign-page #purchase .book-format-card::after {
  display: none !important;
  content: none !important;
}

body.redesign-page #purchase .book-format-card .format-icon {
  width: clamp(3rem, 3.8vw, 3.65rem) !important;
  height: clamp(3rem, 3.8vw, 3.65rem) !important;
  margin: 0 auto 1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #7f6f55 !important;
  background: #f3eadf !important;
  border: 1px solid rgba(166, 111, 82, 0.2) !important;
  border-radius: 999px !important;
}

body.redesign-page #purchase .book-format-card .format-icon i {
  color: #7f6f55 !important;
  font-size: clamp(1.22rem, 1.2vw, 1.48rem) !important;
  line-height: 1 !important;
}

body.redesign-page #purchase .book-format-card h3 {
  color: #102e34 !important;
  font-family: var(--heading-font) !important;
  font-size: clamp(1.45rem, 1.1rem + 0.75vw, 1.8rem) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  margin: 0 0 0.45rem !important;
  text-align: center !important;
}

body.redesign-page #purchase .book-format-card .format-price {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 0.42rem !important;
  width: 100% !important;
  margin: 0 0 1.1rem !important;
  color: #102e34 !important;
}

body.redesign-page #purchase .book-format-card .format-price .price-main {
  color: #102e34 !important;
  font-family: var(--default-font) !important;
  font-size: clamp(1.7rem, 1.3rem + 1vw, 2.35rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}

body.redesign-page #purchase .book-format-card .format-price .price-note {
  color: #7a6b5f !important;
  font-size: 0.94rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

body.redesign-page #purchase .book-format-card .format-features {
  width: min(100%, 17.5rem) !important;
  max-width: 17.5rem !important;
  margin: 0 auto 1.2rem !important;
  padding: 0 !important;
  list-style: none !important;
}

body.redesign-page #purchase .book-format-card .format-features li {
  display: grid !important;
  grid-template-columns: 1rem minmax(0, 1fr) !important;
  column-gap: 0.68rem !important;
  align-items: start !important;
  margin: 0 0 0.58rem !important;
  color: #4f5552 !important;
  font-size: 0.92rem !important;
  line-height: 1.38 !important;
  text-align: left !important;
}

body.redesign-page #purchase .book-format-card .format-features li i {
  display: inline-grid !important;
  place-items: center !important;
  width: 1rem !important;
  height: 1rem !important;
  margin: 0.16rem 0 0 !important;
  color: #a66f52 !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 0.82rem !important;
  line-height: 1 !important;
}

body.redesign-page #purchase .book-format-card .format-features li span {
  min-width: 0 !important;
}

body.redesign-page #purchase .book-format-card .buy-options {
  width: 100% !important;
  margin-top: 0 !important;
  display: flex !important;
  justify-content: center !important;
}

body.redesign-page #purchase .book-format-card .btn-purchase {
  width: min(100%, 17.5rem) !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.72rem 1.15rem !important;
  color: #fffdf8 !important;
  background: #102e34 !important;
  border: 1px solid #102e34 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
}

body.redesign-page #purchase .book-format-card .btn-purchase:hover,
body.redesign-page #purchase .book-format-card .btn-purchase:focus-visible {
  color: #fffdf8 !important;
  background: #18363a !important;
  border-color: #18363a !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 991px) {
  body.redesign-page #purchase .book-format-card {
    padding: 1.45rem 1.25rem !important;
  }
}

/* =========================================================
   PURCHASE REDESIGN — balanced stacked price hierarchy
========================================================= */
body.redesign-page #purchase.purchase.redesign-section .book-format-card > .format-price {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  gap: 0.18rem !important;
  padding-block: 0.75rem !important;
  margin: 0.2rem 0 1.15rem !important;

  line-height: 1 !important;
  text-align: center !important;
}

body.redesign-page #purchase.purchase.redesign-section .book-format-card > .format-price > .price-note {
  display: block !important;
  order: 1 !important;
  margin: 0 !important;
  padding: 0 !important;

  color: #75695e !important;
  font-size: clamp(0.82rem, 0.76rem + 0.18vw, 0.95rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.12 !important;
  text-transform: uppercase !important;
}

body.redesign-page #purchase.purchase.redesign-section .book-format-card > .format-price > .price-main {
  display: block !important;
  order: 2 !important;
  margin: 0 !important;
  padding: 0 !important;

  color: #102e34 !important;
  font-family: var(--default-font) !important;
  font-size: clamp(2.9rem, 2.15rem + 2vw, 4.15rem) !important;
  font-weight: 850 !important;
  letter-spacing: -0.055em !important;
  line-height: 0.92 !important;
}

/* =========================================================
   PURCHASE REDESIGN — lower price within stacked price block
   Actual section class is: #purchase.purchase.redesign-section
========================================================= */
body.redesign-page main.main #purchase.purchase.redesign-section .book-format-card .format-price {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  margin-top: 0.45rem !important;
  margin-bottom: 1.75rem !important;
  padding: 0 !important;
  text-align: center !important;
}

body.redesign-page main.main #purchase.purchase.redesign-section .book-format-card .format-price .price-note {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
}

body.redesign-page main.main #purchase.purchase.redesign-section .book-format-card .format-price .price-main {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(0.42rem) !important;
  line-height: 0.92 !important;
}

/* =========================================================
   PURCHASE REDESIGN — compress section/card vertical height
   Actual section class: #purchase.purchase.redesign-section
========================================================= */
body.redesign-page main.main #purchase.purchase.redesign-section {
  padding-top: clamp(3rem, 4vw, 4.25rem) !important;
  padding-bottom: clamp(3.25rem, 4.5vw, 4.75rem) !important;
}

body.redesign-page main.main #purchase.purchase.redesign-section .section-title {
  padding-bottom: clamp(1.45rem, 2vw, 2rem) !important;
  margin-bottom: 0 !important;
}

body.redesign-page main.main #purchase.purchase.redesign-section .purchase-row {
  margin-top: 0 !important;
}

body.redesign-page main.main #purchase.purchase.redesign-section .book-format-card {
  min-height: 0 !important;
  height: auto !important;
  padding-top: clamp(1.65rem, 2vw, 2.1rem) !important;
  padding-bottom: clamp(1.65rem, 2vw, 2.1rem) !important;
}

body.redesign-page main.main #purchase.purchase.redesign-section .book-format-card .format-icon {
  margin-bottom: 0.85rem !important;
}

body.redesign-page main.main #purchase.purchase.redesign-section .book-format-card h3 {
  margin-bottom: 0.15rem !important;
}

body.redesign-page main.main #purchase.purchase.redesign-section .book-format-card .format-price {
  margin-top: 0.2rem !important;
  margin-bottom: 1.15rem !important;
}

body.redesign-page main.main #purchase.purchase.redesign-section .book-format-card .format-features {
  margin-bottom: 1.35rem !important;
}

body.redesign-page main.main #purchase.purchase.redesign-section .book-format-card .format-features li {
  margin-bottom: 0.48rem !important;
}

body.redesign-page main.main #purchase.purchase.redesign-section .book-format-card .format-features li:last-child {
  margin-bottom: 0 !important;
}

body.redesign-page main.main #purchase.purchase.redesign-section .book-format-card .buy-options {
  margin-top: 0 !important;
}

@media (max-width: 767px) {
  body.redesign-page main.main #purchase.purchase.redesign-section {
    padding-top: 2.75rem !important;
    padding-bottom: 3rem !important;
  }

  body.redesign-page main.main #purchase.purchase.redesign-section .book-format-card {
    padding-top: 1.5rem !important;
    padding-bottom: 1.55rem !important;
  }
}


/* =========================================================
   PURCHASE REDESIGN — refined price symbol
========================================================= */
body.redesign-page main.main #purchase.purchase.redesign-section .book-format-card .format-price .price-main {
  display: inline-flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 0.025em !important;
  line-height: 0.9 !important;
}

body.redesign-page main.main #purchase.purchase.redesign-section .book-format-card .format-price .price-main .price-currency {
  font-size: 0.48em !important;
  line-height: 1 !important;
  transform: translateY(0.16em) !important;
  font-weight: 800 !important;
}

body.redesign-page main.main #purchase.purchase.redesign-section .book-format-card .format-price .price-main .price-amount {
  font-size: 1em !important;
  line-height: 0.9 !important;
  font-weight: 800 !important;
}

/* =========================================================
   PURCHASE REDESIGN — final price spacing correction
   Separates the currency symbol from the amount.
========================================================= */
body.redesign-page main.main section#purchase.purchase.redesign-section .book-formats-grid .book-format-card .format-price .price-main {
  display: inline-grid !important;
  grid-template-columns: auto auto !important;
  align-items: start !important;
  justify-content: center !important;
  column-gap: 0.09em !important;
  line-height: 0.88 !important;
  letter-spacing: -0.035em !important;
}

body.redesign-page main.main section#purchase.purchase.redesign-section .book-formats-grid .book-format-card .format-price .price-main .price-currency {
  display: inline-block !important;
  font-size: 0.44em !important;
  line-height: 1 !important;
  transform: translateY(0.2em) !important;
  margin-right: 0.02em !important;
  letter-spacing: 0 !important;
}

body.redesign-page main.main section#purchase.purchase.redesign-section .book-formats-grid .book-format-card .format-price .price-main .price-amount {
  display: inline-block !important;
  font-size: 1em !important;
  line-height: 0.88 !important;
  letter-spacing: -0.045em !important;
}

/* =========================================================
   PURCHASE REDESIGN — simple dollar sign spacing override
========================================================= */
body.redesign-page main.main section#purchase.purchase.redesign-section .book-formats-grid .book-format-card .format-price .price-main {
  display: inline-flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 0 !important;
  column-gap: 0 !important;
  letter-spacing: normal !important;
}

body.redesign-page main.main section#purchase.purchase.redesign-section .book-formats-grid .book-format-card .format-price .price-main .price-currency {
  display: inline-block !important;
  margin-right: 0.16em !important;
  padding-right: 0 !important;
  letter-spacing: normal !important;
}

body.redesign-page main.main section#purchase.purchase.redesign-section .book-formats-grid .book-format-card .format-price .price-main .price-amount {
  display: inline-block !important;
  margin-left: 0 !important;
  letter-spacing: normal !important;
}

/* =========================================================
   PURCHASE REDESIGN — whiter, cleaner retailer cards
   Remove the green cast; keep only very soft warm-neutral tone.
========================================================= */
body.redesign-page main.main #purchase.purchase.redesign-section .book-format-card {
  background:
    linear-gradient(180deg, #FFFFFF 0%, #FFFEFC 100%) !important;
  border: 1px solid rgba(38, 45, 48, 0.10) !important;
  box-shadow:
    0 18px 42px rgba(24, 31, 35, 0.075),
    0 1px 0 rgba(255, 255, 255, 0.95) inset !important;
}

body.redesign-page main.main #purchase.purchase.redesign-section .book-format-card::before,
body.redesign-page main.main #purchase.purchase.redesign-section .book-format-card::after {
  opacity: 0 !important;
  background: transparent !important;
}

body.redesign-page main.main #purchase.purchase.redesign-section .book-format-card .format-icon {
  background: #F7F8F7 !important;
  color: #445357 !important;
  border: 1px solid rgba(38, 45, 48, 0.10) !important;
}

body.redesign-page main.main #purchase.purchase.redesign-section .book-format-card .format-icon i {
  color: #445357 !important;
}

body.redesign-page main.main #purchase.purchase.redesign-section .book-format-card h3 {
  color: #1F292C !important;
}

body.redesign-page main.main #purchase.purchase.redesign-section .book-format-card .format-features li,
body.redesign-page main.main #purchase.purchase.redesign-section .book-format-card .format-features li span {
  color: #4F5A5D !important;
}

body.redesign-page main.main #purchase.purchase.redesign-section .book-format-card .format-features li i {
  color: #7B8588 !important;
}

/* =========================================================
   MEET SAHRA — editorial author section
   Scoped to the staged redesign about section only.
========================================================= */
body.redesign-page #about.meet-sahra.redesign-section {
  background: #fbf8f2 !important;
  color: #273032 !important;
  padding-block: clamp(4.25rem, 7vw, 7rem) !important;
}

body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-editorial {
  align-items: center !important;
}

body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-copy {
  max-width: 760px !important;
}

body.redesign-page #about.meet-sahra.redesign-section .redesign-kicker {
  display: inline-block !important;
  color: #9b6a50 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  margin-bottom: 0.85rem !important;
  text-transform: uppercase !important;
}

body.redesign-page #about.meet-sahra.redesign-section h2 {
  color: #102e34 !important;
  font-family: var(--heading-font) !important;
  font-size: clamp(2.45rem, 4.5vw, 4.85rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 0.98 !important;
  margin: 0 0 clamp(1.35rem, 2.4vw, 2rem) !important;
  max-width: 10ch !important;
}

body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-copy p {
  color: #454c49 !important;
  font-size: clamp(1rem, 0.92rem + 0.25vw, 1.16rem) !important;
  line-height: 1.78 !important;
  margin: 0 0 1.1rem !important;
}

body.redesign-page #about.meet-sahra .meet-sahra-lede {
  max-width: 36rem;
}

@media (min-width: 768px) {
  body.redesign-page #about.meet-sahra .meet-sahra-lede {
    color: #18343a;
    font-size: clamp(1.58rem, 1.35rem + 1.15vw, 2.08rem);
    line-height: 1.48;
    font-weight: 500;
    letter-spacing: -0.014em;
    max-width: 44rem;
  }
}

body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-disclosure {
  display: block;
  margin-top: 0.95rem;
  border-top: 1px solid rgba(20, 31, 34, 0.14);
  border-bottom: 1px solid rgba(20, 31, 34, 0.14);
  background: transparent;
}

body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  max-width: 35rem;
  padding: 0.82rem 0;
  color: rgba(20, 31, 34, 0.72);
  font-family: var(--default-font);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}

body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-disclosure > summary::-webkit-details-marker {
  display: none;
}

body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-plus {
  position: relative;
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
}

body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-plus::before,
body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-plus::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 0.78rem;
  height: 2px;
  border-radius: 999px;
  background: #9b6a45;
  transform: translate(-50%, -50%);
  transition: transform 180ms ease, opacity 180ms ease;
}

body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-disclosure[open] .meet-sahra-plus::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-disclosure:not([open]) > .meet-sahra-more {
  display: none !important;
}

body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-more {
  padding-top: 0.95rem;
}

body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-mobile-cta {
  display: flex !important;
  justify-content: center;
  margin: 1.35rem 0 0 !important;
}

body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-pullquote {
  max-width: 37rem !important;
  margin: clamp(1.45rem, 3vw, 2.15rem) 0 !important;
  padding: 0.25rem 0 0.25rem clamp(1.1rem, 2vw, 1.45rem) !important;
  border-left: 2px solid rgba(155, 106, 80, 0.5) !important;
  color: #102e34 !important;
  font-family: var(--heading-font) !important;
  font-size: clamp(1.45rem, 1.15rem + 1vw, 2.15rem) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.22 !important;
}

body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-markers {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.65rem 0.85rem !important;
  margin-top: clamp(1.45rem, 2.5vw, 2rem) !important;
  max-width: 39rem !important;
}

body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-markers span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 2rem !important;
  padding: 0.4rem 0.72rem !important;
  color: #59605c !important;
  background: rgba(255, 253, 248, 0.55) !important;
  border: 1px solid rgba(16, 46, 52, 0.12) !important;
  border-radius: 999px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
}

body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-portrait {
  margin: 0 !important;
  padding-left: clamp(0rem, 3vw, 2rem) !important;
}

body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-portrait img {
  width: min(100%, 420px) !important;
  border-radius: 8px !important;
  box-shadow: 0 24px 60px rgba(49, 38, 28, 0.16) !important;
  transform: none !important;
}

body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-portrait img:hover {
  transform: none !important;
}

body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-portrait figcaption {
  max-width: 420px !important;
  color: #6d716d !important;
  font-size: 0.9rem !important;
  line-height: 1.45 !important;
  margin: 0.85rem auto 0 !important;
  padding: 0 !important;
}

@media (max-width: 991px) {
  body.redesign-page #about.meet-sahra.redesign-section {
    padding-block: 3.75rem !important;
  }

  body.redesign-page #about.meet-sahra.redesign-section h2 {
    max-width: 12ch !important;
  }

  body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-portrait {
    padding-left: 0 !important;
  }
}

@media (max-width: 575px) {
  body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-markers {
    gap: 0.5rem !important;
  }

body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-markers span {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* =========================================================
   MEET SAHRA — mobile read-more disclosure
   Added 2026-05-24
   Purpose:
   - keep the author intro visible on mobile
   - contain the longer copy behind a semantic disclosure
========================================================= */

@media (max-width: 767px) {
  body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-disclosure {
    display: block;
    margin-top: 0.95rem;
    border-top: 1px solid rgba(20, 31, 34, 0.14);
    border-bottom: 1px solid rgba(20, 31, 34, 0.14);
    background: transparent;
  }

  body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.82rem 0;
    color: rgba(20, 31, 34, 0.72);
    font-family: var(--default-font);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
    list-style: none;
    cursor: pointer;
  }

  body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-disclosure > summary::-webkit-details-marker {
    display: none;
  }

  body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-plus {
    position: relative;
    flex: 0 0 auto;
    width: 0.95rem;
    height: 0.95rem;
  }

  body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-plus::before,
  body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-plus::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 0.78rem;
    height: 2px;
    border-radius: 999px;
    background: #9b6a45;
    transform: translate(-50%, -50%);
    transition: transform 180ms ease, opacity 180ms ease;
  }

  body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-plus::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-disclosure[open] .meet-sahra-plus::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg);
  }

  body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-disclosure:not([open]) > .meet-sahra-more {
    display: none !important;
  }

  body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-more {
    padding-top: 0.95rem;
  }

  body.redesign-page #about.meet-sahra.redesign-section .meet-sahra-mobile-cta {
    display: flex !important;
    justify-content: center;
    margin: 1.35rem 0 0 !important;
  }
}

/* =========================================================
   MEDIA & PRESS — editorial slider
   Uses the page's existing Swiper initializer.
========================================================= */
body.redesign-page #media-press.media-press-editorial.redesign-section {
  background: #f4f7f6 !important;
  color: #263033 !important;
  padding-block: clamp(3.75rem, 6vw, 5.75rem) !important;
}

body.redesign-page #media-press.media-press-editorial .section-title {
  max-width: 760px !important;
  padding-bottom: clamp(1.35rem, 2.5vw, 2rem) !important;
}

body.redesign-page #media-press.media-press-editorial .section-title .redesign-kicker {
  color: #8d6d5a !important;
}

body.redesign-page #media-press.media-press-editorial .section-title h2 {
  color: #102e34 !important;
  font-family: var(--heading-font) !important;
  font-size: clamp(2.25rem, 3.6vw, 4rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  margin-bottom: 0.8rem !important;
  text-transform: none !important;
}

body.redesign-page #media-press.media-press-editorial .section-title p {
  color: #5a6364 !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
}

body.redesign-page #media-press.media-press-editorial .media-slider-shell {
  position: relative !important;
  overflow: hidden !important;
  padding: 0.25rem 0 0.15rem !important;
}

body.redesign-page #media-press.media-press-editorial .media-slider-shell:not(.swiper-initialized) {
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
}

body.redesign-page #media-press.media-press-editorial .media-slider-track {
  align-items: stretch !important;
}

body.redesign-page #media-press.media-press-editorial .media-slider-shell:not(.swiper-initialized) .media-slider-track {
  display: flex !important;
  gap: 1.25rem !important;
}

body.redesign-page #media-press.media-press-editorial .media-slide {
  height: auto !important;
}

body.redesign-page #media-press.media-press-editorial .media-slider-shell:not(.swiper-initialized) .media-slide {
  flex: 0 0 min(86vw, 25rem) !important;
  scroll-snap-align: start !important;
}

body.redesign-page #media-press.media-press-editorial .media-item {
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  padding: clamp(1.25rem, 2vw, 1.7rem) !important;
  background: #fffefb !important;
  border: 1px solid rgba(16, 46, 52, 0.12) !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 42px rgba(31, 43, 47, 0.07) !important;
  overflow: hidden !important;
  position: relative !important;
  transform: none !important;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
}

body.redesign-page #media-press.media-press-editorial .media-item::before {
  content: "" !important;
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: 2px !important;
  margin: 0 0 1.05rem !important;
  background: linear-gradient(90deg, rgba(16, 46, 52, 0.72), rgba(141, 109, 90, 0.24), transparent) !important;
}

body.redesign-page #media-press.media-press-editorial .media-item::after {
  content: none !important;
  display: none !important;
}

body.redesign-page #media-press.media-press-editorial .media-item:hover {
  border-color: rgba(16, 46, 52, 0.2) !important;
  box-shadow: 0 22px 52px rgba(31, 43, 47, 0.1) !important;
  transform: translateY(-2px) !important;
}

body.redesign-page #media-press.media-press-editorial .press-icon {
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 0 0.85rem !important;
  background: transparent !important;
  border-radius: 0 !important;
}

body.redesign-page #media-press.media-press-editorial .press-icon i {
  color: #627174 !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
}

body.redesign-page #media-press.media-press-editorial .press-tag {
  order: -1 !important;
  align-self: flex-start !important;
  margin: 0 0 0.6rem !important;
  color: #8d6d5a !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

body.redesign-page #media-press.media-press-editorial .media-item h3 {
  color: #102e34 !important;
  font-family: var(--heading-font) !important;
  font-size: clamp(1.35rem, 1.1rem + 0.55vw, 1.75rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.18 !important;
  margin: 0 0 0.85rem !important;
}

body.redesign-page #media-press.media-press-editorial .media-item p {
  flex: 1 1 auto !important;
  color: #515b5d !important;
  font-size: 0.96rem !important;
  line-height: 1.62 !important;
  margin: 0 !important;
}

body.redesign-page #media-press.media-press-editorial .press-link {
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  margin: 1.35rem 0 0 !important;
  padding: 0.18rem 0 !important;
  color: #18363a !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  transition: color 160ms ease !important;
}

body.redesign-page #media-press.media-press-editorial .press-link i {
  color: currentColor !important;
  font-size: 1rem !important;
  transition: transform 160ms ease !important;
}

body.redesign-page #media-press.media-press-editorial .press-link:hover,
body.redesign-page #media-press.media-press-editorial .press-link:focus-visible {
  color: #8d4f3c !important;
  background: transparent !important;
}

body.redesign-page #media-press.media-press-editorial .press-link:hover i,
body.redesign-page #media-press.media-press-editorial .press-link:focus-visible i {
  transform: translateX(3px) !important;
}

body.redesign-page #media-press.media-press-editorial .media-slider-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.9rem !important;
  margin-top: clamp(1.3rem, 2.5vw, 1.9rem) !important;
}

body.redesign-page #media-press.media-press-editorial .media-slider-button {
  width: 2.45rem !important;
  height: 2.45rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #18363a !important;
  background: rgba(255, 254, 251, 0.76) !important;
  border: 1px solid rgba(16, 46, 52, 0.14) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease !important;
}

body.redesign-page #media-press.media-press-editorial .media-slider-button:hover,
body.redesign-page #media-press.media-press-editorial .media-slider-button:focus-visible {
  color: #8d4f3c !important;
  border-color: rgba(141, 79, 60, 0.34) !important;
  transform: translateY(-1px) !important;
}

body.redesign-page #media-press.media-press-editorial .media-slider-button.swiper-button-disabled {
  opacity: 0.35 !important;
  pointer-events: none !important;
}

body.redesign-page #media-press.media-press-editorial .media-slider-dots {
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  min-width: 4.25rem !important;
}

body.redesign-page #media-press.media-press-editorial .media-slider-dots .swiper-pagination-bullet {
  width: 0.42rem !important;
  height: 0.42rem !important;
  margin: 0 !important;
  background: rgba(16, 46, 52, 0.28) !important;
  opacity: 1 !important;
}

body.redesign-page #media-press.media-press-editorial .media-slider-dots .swiper-pagination-bullet-active {
  width: 1.45rem !important;
  border-radius: 999px !important;
  background: #18363a !important;
}

@media (max-width: 575px) {
  body.redesign-page #media-press.media-press-editorial.redesign-section {
    padding-block: 3.35rem !important;
  }

  body.redesign-page #media-press.media-press-editorial .media-item {
    padding: 1.2rem !important;
  }
}

/* =========================================================
   EXCERPT READER — final cleaned overrides
   Keeps one clear cascade for the book controls, page status,
   page height, and final-page CTA.
========================================================= */

/* Keep the book tall enough without stacking multiple height attempts. */
body.redesign-page #excerpt-reader.excerpt-reader .page-inner {
  height: min(88vh, 920px);
  min-height: min(88vh, 920px);
  max-height: none;
}

/* Page counter: plain centered text above the book, not a pill/eyebrow. */
body.redesign-page #excerpt-reader .book-cover-excerpt.book-page-status-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  margin: 0 auto 0.85rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.redesign-page #excerpt-reader .book-cover-excerpt.book-page-status-wrap .book-page-status {
  position: static;
  display: block;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #667276;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Controls: arrows sit beside the book, vertically centered on the pages. */
body.redesign-page #excerpt-reader .reader {
  position: relative;
}

body.redesign-page #excerpt-reader .reader-intro {
  position: relative;
}

body.redesign-page #excerpt-reader .book-controls {
  position: absolute;
  left: 50%;
  top: 57%;
  z-index: 12;
  width: min(100vw - 2rem, 88rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

body.redesign-page #excerpt-reader .book-control {
  pointer-events: auto;
}

body.redesign-page #excerpt-reader .book-control-prev,
body.redesign-page #excerpt-reader .book-control-next {
  transform: none;
}

/* Final-page CTA: use a restrained reader-specific style, not purchase-card peach. */
body.redesign-page #excerpt-reader .excerpt-page-cta {
  margin-top: 1.45rem;
  text-indent: 0;
}

body.redesign-page #excerpt-reader .excerpt-page-cta .btn-purchase {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  padding: 0.72rem 1.28rem;
  border: 1px solid rgba(24, 54, 58, 0.82);
  border-radius: 999px;
  background: #18363A;
  color: #FFFFFB;
  box-shadow: 0 0.85rem 1.75rem rgba(24, 54, 58, 0.16);
  font-family: var(--nav-font, inherit);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

body.redesign-page #excerpt-reader .excerpt-page-cta .btn-purchase:hover,
body.redesign-page #excerpt-reader .excerpt-page-cta .btn-purchase:focus-visible {
  background: #244B50;
  border-color: #244B50;
  color: #FFFFFB;
}

body.redesign-page #excerpt-reader .excerpt-mini-retailers {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.redesign-page #excerpt-reader .excerpt-mini-retailers-intro {
  margin: 0 0 1rem;
  color: #667276;
  font-family: var(--default-font);
  font-size: 0.86rem;
  line-height: 1.45;
  text-indent: 0;
}

body.redesign-page #excerpt-reader .excerpt-mini-retailer-list {
  display: grid;
  gap: 0.72rem;
}

body.redesign-page #excerpt-reader .excerpt-mini-retailer {
  display: block;
  padding: 0.82rem 0.9rem;
  border: 1px solid rgba(143, 181, 196, 0.48);
  border-radius: 0.75rem;
  background: rgba(255, 253, 248, 0.72);
  box-shadow: 0 0.7rem 1.55rem rgba(35, 73, 88, 0.08);
  color: #102F38;
  font-family: var(--default-font);
  line-height: 1.25;
  text-decoration: none;
  text-indent: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body.redesign-page #excerpt-reader .excerpt-mini-retailer:hover,
body.redesign-page #excerpt-reader .excerpt-mini-retailer:focus-visible {
  border-color: rgba(154, 91, 69, 0.48);
  box-shadow: 0 0.9rem 1.7rem rgba(35, 73, 88, 0.12);
  color: #102F38;
  transform: translateY(-1px);
}

body.redesign-page #excerpt-reader .excerpt-mini-retailer span {
  display: block;
  margin-bottom: 0.2rem;
  color: #9A5B45;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.redesign-page #excerpt-reader .excerpt-mini-retailer strong {
  display: block;
  color: #102F38;
  font-size: 0.98rem;
  font-weight: 800;
}

body.redesign-page #excerpt-reader .excerpt-signup {
  position: relative;
  max-width: 920px;
  margin: clamp(1.5rem, 3vw, 2.4rem) auto 0;
  padding: clamp(1.15rem, 2.5vw, 1.65rem);
  border: 1px solid rgba(24, 54, 58, 0.14);
  border-radius: 8px;
  background: rgba(255, 253, 251, 0.94);
  box-shadow: 0 1.35rem 3rem rgba(24, 54, 58, 0.1);
}

body.redesign-page #excerpt-reader .excerpt-signup[hidden] {
  display: none !important;
}

body.redesign-page #excerpt-reader .excerpt-signup-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #18363a;
  background: transparent;
  border: 1px solid rgba(24, 54, 58, 0.18);
  border-radius: 999px;
}

body.redesign-page #excerpt-reader .excerpt-signup-close:hover,
body.redesign-page #excerpt-reader .excerpt-signup-close:focus-visible {
  color: #fffdfb;
  background: #18363a;
}

body.redesign-page #excerpt-reader .excerpt-signup-copy {
  max-width: 680px;
  padding-right: 2rem;
}

body.redesign-page #excerpt-reader .excerpt-signup-copy h3 {
  margin-bottom: 0.55rem;
  color: #102f38;
  font-size: clamp(1.55rem, 1.1rem + 1.3vw, 2.35rem);
  line-height: 1.08;
}

body.redesign-page #excerpt-reader .excerpt-signup-copy p,
body.redesign-page #excerpt-reader .excerpt-signup-note {
  color: #667276;
  font-size: 0.96rem;
  line-height: 1.6;
}

body.redesign-page #excerpt-reader .excerpt-signup-form {
  margin-top: 1.1rem;
}

body.redesign-page #excerpt-reader .excerpt-signup-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

body.redesign-page #excerpt-reader .excerpt-signup label {
  display: grid;
  gap: 0.35rem;
  color: #18363a;
  font-weight: 700;
}

body.redesign-page #excerpt-reader .excerpt-signup label span {
  font-size: 0.82rem;
}

body.redesign-page #excerpt-reader .excerpt-signup input[type="text"],
body.redesign-page #excerpt-reader .excerpt-signup input[type="email"] {
  min-height: 2.9rem;
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(24, 54, 58, 0.18);
  border-radius: 8px;
  background: #fff;
  color: #18363a;
}

body.redesign-page #excerpt-reader .excerpt-signup input[type="text"]:focus,
body.redesign-page #excerpt-reader .excerpt-signup input[type="email"]:focus {
  border-color: rgba(141, 79, 60, 0.52);
  box-shadow: 0 0 0 0.2rem rgba(141, 79, 60, 0.12);
  outline: none;
}

body.redesign-page #excerpt-reader .excerpt-signup-consent {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.65rem;
  margin-top: 0.9rem;
  color: #405054;
  font-weight: 600;
}

body.redesign-page #excerpt-reader .excerpt-signup-consent input {
  margin-top: 0.18rem;
}

body.redesign-page #excerpt-reader .excerpt-signup-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.15rem;
}

body.redesign-page #excerpt-reader .excerpt-signup-note {
  margin: 0;
}

@media (max-width: 991px) {
  body.redesign-page #excerpt-reader.excerpt-reader .page-inner {
    height: auto;
    min-height: 0;
  }

  body.redesign-page #excerpt-reader .book-controls {
    position: static;
    width: auto;
    margin-top: 1.25rem;
    gap: 1rem;
    justify-content: center;
    transform: none;
    pointer-events: auto;
  }
}

/* =========================================================
   EXCERPT READER — final arrow placement only
   Keep page numbers where they are. Center arrows beside book.
========================================================= */
body.redesign-page #excerpt-reader .reader {
  position: relative !important;
}

body.redesign-page #excerpt-reader .reader-intro {
  position: static !important;
}

body.redesign-page #excerpt-reader .book-controls {
  position: absolute !important;
  left: 50% !important;
  top: clamp(18rem, 38vw, 31rem) !important;
  width: min(100vw - 2rem, 76rem) !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}

body.redesign-page #excerpt-reader .book-control {
  pointer-events: auto !important;
}

body.redesign-page #excerpt-reader .book-control-prev,
body.redesign-page #excerpt-reader .book-control-next {
  transform: none !important;
}

@media (max-width: 991px) {
  body.redesign-page #excerpt-reader .book-controls {
    position: static !important;
    width: auto !important;
    margin-top: 1.25rem !important;
    gap: 1rem !important;
    justify-content: center !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  body.redesign-page #excerpt-reader .excerpt-signup-fields {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   EXCERPT READER — mobile one-page slider mode
   Mobile shows one page at a time, not full spreads.
   Controls sit left/right at the middle of the book.
========================================================= */
@media (max-width: 991px) {
  body.redesign-page #excerpt-reader .reader {
    width: min(100% - 1.25rem, 44rem) !important;
  }

  body.redesign-page #excerpt-reader .reader-intro {
    margin-bottom: 1.1rem !important;
  }

  body.redesign-page #excerpt-reader .book-cover-excerpt.book-page-status-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto 0.85rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.redesign-page #excerpt-reader .book-cover-excerpt.book-page-status-wrap .book-page-status {
    display: block !important;
    position: static !important;
    transform: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    color: #667276 !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  body.redesign-page #excerpt-reader .open-book {
    position: relative !important;
    padding: clamp(0.7rem, 3vw, 0.95rem) !important;
  }

  body.redesign-page #excerpt-reader.mobile-page-mode .book-controls {
    display: flex !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    width: 100% !important;
    z-index: 40 !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 0 0.15rem !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
  }

  body.redesign-page #excerpt-reader.mobile-page-mode .book-control {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
  }

  body.redesign-page #excerpt-reader.mobile-page-mode .book-control-prev {
    transform: translateX(-0.65rem) !important;
  }

  body.redesign-page #excerpt-reader.mobile-page-mode .book-control-next {
    transform: translateX(0.65rem) !important;
  }

  body.redesign-page #excerpt-reader.mobile-page-mode #book-viewport,
  body.redesign-page #excerpt-reader.mobile-page-mode .book-viewport {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.redesign-page #excerpt-reader.mobile-page-mode .spread,
  body.redesign-page #excerpt-reader.mobile-page-mode .spread.spread-active,
  body.redesign-page #excerpt-reader.mobile-page-mode .spread-active {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.redesign-page #excerpt-reader.mobile-page-mode .page,
  body.redesign-page #excerpt-reader.mobile-page-mode article.page {
    display: none !important;
  }

  body.redesign-page #excerpt-reader.mobile-page-mode .page.mobile-page-active,
  body.redesign-page #excerpt-reader.mobile-page-mode article.page.mobile-page-active {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 1rem !important;
    background:
      linear-gradient(180deg, #FFFFFB 0%, #FFF8EC 100%) !important;
    box-shadow:
      0 1rem 2rem rgba(24, 54, 58, 0.1),
      0 0 0 1px rgba(143, 181, 196, 0.22) inset !important;
  }

  body.redesign-page #excerpt-reader.mobile-page-mode .page-left::after,
  body.redesign-page #excerpt-reader.mobile-page-mode .page-right::before {
    display: none !important;
  }

  body.redesign-page #excerpt-reader.mobile-page-mode .page-inner {
    height: auto !important;
    min-height: min(68vh, 560px) !important;
    max-height: none !important;
    overflow: visible !important;
    padding: clamp(1.25rem, 6vw, 1.75rem) !important;
    font-size: clamp(0.98rem, 4.2vw, 1.08rem) !important;
    line-height: 1.58 !important;
  }

  body.redesign-page #excerpt-reader.mobile-page-mode .page-inner p {
    margin-bottom: 0.72rem !important;
  }

  body.redesign-page #excerpt-reader.mobile-page-mode .page-inner p + p {
    text-indent: 0 !important;
  }
}


/* =========================================================
   EXCERPT READER — large desktop shorter interface
   Desktop-only compression so the book does not dominate
   the viewport on wide screens.
========================================================= */
@media (min-width: 1200px) {
  body.redesign-page #excerpt-reader.excerpt-reader {
    padding-top: clamp(2.25rem, 3.5vw, 3.5rem) !important;
    padding-bottom: clamp(2.25rem, 3.5vw, 3.5rem) !important;
  }

  body.redesign-page #excerpt-reader .reader-intro {
    margin-bottom: 0.65rem !important;
  }

  body.redesign-page #excerpt-reader .book-cover-excerpt.book-page-status-wrap,
  body.redesign-page #excerpt-reader .book-page-status {
    margin-bottom: 0.55rem !important;
  }

  body.redesign-page #excerpt-reader .open-book {
    padding: clamp(0.55rem, 0.8vw, 0.85rem) !important;
  }

  body.redesign-page #excerpt-reader.excerpt-reader .page-inner,
  body.redesign-page #excerpt-reader .page-inner {
    height: min(68vh, 760px) !important;
    min-height: min(68vh, 760px) !important;
    padding-top: clamp(1.25rem, 1.65vw, 1.75rem) !important;
    padding-bottom: clamp(1.25rem, 1.65vw, 1.75rem) !important;
  }

  body.redesign-page #excerpt-reader .book-controls {
    top: 57% !important;
  }
}

/* =========================================================
   EXCERPT READER — mid-desktop height safety
   1200–1499px screens need more vertical room than
   very large desktop because the same text clips sooner.
========================================================= */
@media (min-width: 1200px) and (max-width: 1499px) {
  body.redesign-page #excerpt-reader.excerpt-reader .page-inner,
  body.redesign-page #excerpt-reader .page-inner {
    height: min(82vh, 940px) !important;
    min-height: min(82vh, 940px) !important;
  }

  body.redesign-page #excerpt-reader .book-controls {
    top: 58% !important;
  }
}

@media (min-width: 1500px) {
  body.redesign-page #excerpt-reader.excerpt-reader .page-inner,
  body.redesign-page #excerpt-reader .page-inner {
    height: min(68vh, 760px) !important;
    min-height: min(68vh, 760px) !important;
  }
}

/* Work with Sahra subpage */
body.grit-partners-page {
  --grit-ink: #14132B;
  --grit-deep: #14132B;
  --grit-purple: #251947;
  --grit-gold: #D7A84F;
  --grit-cream: #F7F3EA;
  --grit-soft: #FBF8F0;
  --grit-card: #FFFFFF;
  --grit-muted: rgba(20, 19, 43, 0.72);
  background: var(--grit-soft);
  color: var(--grit-ink);
}

body.grit-partners-page .main {
  background: var(--grit-soft);
}

body.grit-partners-page .grit-page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(8rem, 12vw, 12rem) 0 clamp(4rem, 8vw, 7rem);
  background:
    linear-gradient(135deg, rgba(20, 19, 43, 0.96), rgba(37, 25, 71, 0.92)),
    radial-gradient(circle at 80% 18%, rgba(215, 168, 79, 0.24), transparent 28%);
  color: #fff;
}

body.grit-partners-page .grit-page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 6px;
  background: linear-gradient(90deg, transparent, var(--grit-gold), transparent);
  opacity: 0.86;
}

body.grit-partners-page .grit-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  color: var(--grit-gold);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.grit-partners-page .grit-page-hero h1,
body.grit-partners-page .grit-section-heading h2,
body.grit-partners-page .grit-page-expect h2,
body.grit-partners-page .grit-page-founder h2,
body.grit-partners-page .grit-page-cta h2 {
  color: inherit;
  font-family: "Playfair Display", serif;
  letter-spacing: 0;
}

body.grit-partners-page .grit-page-hero h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(3rem, 6vw, 5.75rem);
  line-height: 0.98;
}

body.grit-partners-page .grit-hero-copy {
  max-width: 700px;
  margin: 1.5rem 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.18rem, 0.75vw + 1rem, 1.55rem);
  line-height: 1.65;
}

body.grit-partners-page .grit-hero-subcopy {
  max-width: 660px;
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  line-height: 1.8;
}

body.grit-partners-page .grit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

body.grit-partners-page .grit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 48px;
  padding: 0.85rem 1.3rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 800;
  line-height: 1;
}

body.grit-partners-page .grit-btn-primary {
  border-color: var(--grit-gold);
  background: var(--grit-gold);
  color: var(--grit-ink);
}

body.grit-partners-page .grit-btn-primary:hover {
  border-color: #fff;
  background: #fff;
  color: var(--grit-ink);
}

body.grit-partners-page .grit-btn-secondary {
  border-color: rgba(255, 255, 255, 0.42);
  background: transparent;
  color: #fff;
}

body.grit-partners-page .grit-btn-secondary:hover {
  border-color: var(--grit-gold);
  background: rgba(215, 168, 79, 0.12);
  color: #fff;
}

body.grit-partners-page .grit-hero-image,
body.grit-partners-page .grit-founder-image {
  overflow: hidden;
  border: 1px solid rgba(215, 168, 79, 0.45);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
}

body.grit-partners-page .grit-hero-image img,
body.grit-partners-page .grit-founder-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

body.grit-partners-page .grit-page-approach,
body.grit-partners-page .grit-page-solutions,
body.grit-partners-page .grit-page-expect,
body.grit-partners-page .grit-page-founder,
body.grit-partners-page .grit-page-cta {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}

body.grit-partners-page .grit-page-approach {
  background: var(--grit-card);
}

body.grit-partners-page .grit-section-heading {
  max-width: 760px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

body.grit-partners-page .grit-section-heading.text-center {
  margin-right: auto;
  margin-left: auto;
}

body.grit-partners-page .grit-section-heading h2,
body.grit-partners-page .grit-page-expect h2,
body.grit-partners-page .grit-page-founder h2,
body.grit-partners-page .grit-page-cta h2 {
  margin: 0;
  color: var(--grit-ink);
  font-size: clamp(2.15rem, 3.4vw, 4rem);
  line-height: 1.08;
}

body.grit-partners-page .grit-lede {
  margin: 0;
  color: var(--grit-ink);
  font-size: clamp(1.22rem, 0.8vw + 1rem, 1.55rem);
  line-height: 1.75;
}

body.grit-partners-page .grit-approach-card {
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-left: 5px solid var(--grit-gold);
  border-radius: 8px;
  background: var(--grit-cream);
}

body.grit-partners-page .grit-approach-card p,
body.grit-partners-page .grit-page-founder p,
body.grit-partners-page .grit-page-cta p {
  margin: 0;
  color: var(--grit-muted);
  font-size: 1.03rem;
  line-height: 1.8;
}

body.grit-partners-page .grit-page-solutions {
  background:
    linear-gradient(180deg, var(--grit-soft), #fff 100%);
}

body.grit-partners-page .grit-solution-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border: 1px solid rgba(20, 19, 43, 0.12);
  border-radius: 8px;
  background: var(--grit-card);
  box-shadow: 0 22px 55px rgba(20, 19, 43, 0.08);
}

body.grit-partners-page .grit-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.25rem;
  border-radius: 8px;
  background: rgba(215, 168, 79, 0.18);
  color: var(--grit-purple);
  font-size: 1.45rem;
}

body.grit-partners-page .grit-solution-card h3 {
  margin: 0 0 0.8rem;
  color: var(--grit-ink);
  font-size: 1.28rem;
  line-height: 1.25;
}

body.grit-partners-page .grit-solution-card p,
body.grit-partners-page .grit-solution-card li {
  color: var(--grit-muted);
  line-height: 1.7;
}

body.grit-partners-page .grit-solution-card ul {
  display: grid;
  gap: 0.55rem;
  margin: 0.9rem 0 1.4rem;
  padding-left: 1.15rem;
}

body.grit-partners-page .grit-solution-card a,
body.grit-partners-page .grit-text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  margin-top: auto;
  color: var(--grit-purple);
  font-weight: 800;
}

body.grit-partners-page .grit-solution-card a:hover,
body.grit-partners-page .grit-text-link:hover {
  color: var(--grit-gold);
}

body.grit-partners-page .grit-page-expect {
  background: var(--grit-ink);
  color: #fff;
}

body.grit-partners-page .grit-page-expect h2 {
  color: #fff;
}

body.grit-partners-page .grit-expect-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

body.grit-partners-page .grit-expect-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

body.grit-partners-page .grit-expect-grid div {
  min-height: 88px;
  padding: 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 800;
}

body.grit-partners-page .grit-page-founder {
  background: var(--grit-card);
}

body.grit-partners-page .grit-page-founder p {
  margin-top: 1.15rem;
  max-width: 760px;
}

body.grit-partners-page .grit-page-founder .grit-collaborators {
  padding-top: 1.15rem;
  border-top: 1px solid rgba(20, 19, 43, 0.12);
}

body.grit-partners-page .grit-page-founder .grit-text-link {
  margin-top: 1.5rem;
}

body.grit-partners-page .grit-page-cta {
  background: var(--grit-soft);
}

body.grit-partners-page .grit-final-cta {
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(20, 19, 43, 0.96), rgba(37, 25, 71, 0.92)),
    radial-gradient(circle at 92% 18%, rgba(215, 168, 79, 0.24), transparent 28%);
  color: #fff;
}

body.grit-partners-page .grit-final-cta h2 {
  color: #fff;
}

body.grit-partners-page .grit-final-cta p {
  max-width: 760px;
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 991px) {
  body.grit-partners-page .grit-page-hero {
    padding-top: 7.25rem;
  }

  body.grit-partners-page .grit-expect-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  body.grit-partners-page .grit-actions,
  body.grit-partners-page .grit-btn {
    width: 100%;
  }

  body.grit-partners-page .grit-expect-grid {
    grid-template-columns: 1fr;
  }
}

/* Contact page */
body.contact-page #contact {
  background: transparent;
}

body.contact-page #contact .section-title {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}

body.contact-page #contact .section-title h2 {
  color: #18363A;
}

body.contact-page #contact .section-title p {
  color: rgba(24, 54, 58, 0.72);
}

body.contact-page #contact .info-wrap,
body.contact-page #contact .php-email-form {
  height: 100%;
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid rgba(21, 56, 63, 0.14);
  border-radius: 0.75rem;
  background: #FFFAF1;
  box-shadow: 0 0.9rem 2rem rgba(21, 56, 63, 0.06);
}

body.contact-page #contact .php-email-form {
  background: #FFFAF1;
}

body.contact-page #contact .contact-simple-info h3 {
  margin: 0 0 0.75rem;
  color: #15383f;
  font-size: 1.12rem;
  line-height: 1.25;
}

body.contact-page #contact .contact-simple-info {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

body.contact-page #contact .contact-simple-list,
body.contact-page #contact .contact-simple-list li,
body.contact-page #contact .contact-simple-lede,
body.contact-page #contact .contact-simple-note {
  color: rgba(24, 54, 58, 0.72) !important;
}

body.contact-page #contact .contact-simple-lede {
  margin: 0.75rem 0 1.4rem;
  line-height: 1.58;
}

body.contact-page #contact .contact-helpful-details {
  margin-top: 0.35rem;
}

body.contact-page #contact .contact-helpful-details h4 {
  margin: 0 0 0.75rem;
  color: #15383f;
  font-size: 0.88rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.contact-page #contact .contact-simple-list {
  margin: 0;
  padding-left: 1.1rem;
}

body.contact-page #contact .contact-simple-list li {
  margin-bottom: 0.45rem;
  line-height: 1.45;
}

body.contact-page #contact .contact-simple-list li:last-child {
  margin-bottom: 0;
}

body.contact-page #contact .contact-simple-note {
  margin: auto 0 0;
  padding-top: 2rem;
  font-size: 0.95rem;
  line-height: 1.55;
}

body.contact-page #contact label {
  color: #253236;
  font-weight: 600;
}

body.contact-page #contact .form-control,
body.contact-page #contact .form-select,
body.contact-page #contact textarea {
  min-height: 46px;
  border: 1px solid rgba(24, 54, 58, 0.18);
  border-radius: 0.35rem;
  background-color: #FFFFFB;
  color: #253236;
  box-shadow: none;
}

body.contact-page #contact textarea.form-control {
  min-height: 180px;
}

body.contact-page #contact .form-control::placeholder,
body.contact-page #contact textarea::placeholder {
  color: rgba(37, 50, 54, 0.48);
}

body.contact-page #contact .form-control:focus,
body.contact-page #contact .form-select:focus,
body.contact-page #contact textarea:focus {
  border-color: rgba(24, 54, 58, 0.58);
  background-color: #FFFFFB;
  box-shadow: 0 0 0 0.2rem rgba(24, 54, 58, 0.12);
}

body.contact-page #contact .php-email-form .loading,
body.contact-page #contact .php-email-form .error-message,
body.contact-page #contact .php-email-form .sent-message {
  border-radius: 0.45rem;
}

body.contact-page #contact .php-email-form button[type="submit"],
body.contact-page #contact .btn.btn-primary {
  border: 1px solid #18363A;
  border-radius: 999px;
  background: #18363A;
  color: #FFFFFB;
  padding: 0.82rem 1.55rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 0.45rem 1rem rgba(24, 54, 58, 0.12);
  transform: none;
}

body.contact-page #contact .php-email-form button[type="submit"]:hover,
body.contact-page #contact .php-email-form button[type="submit"]:focus-visible,
body.contact-page #contact .btn.btn-primary:hover,
body.contact-page #contact .btn.btn-primary:focus-visible {
  border-color: #244B50;
  background: #244B50;
  color: #FFFFFB;
  box-shadow: 0 0.55rem 1.1rem rgba(24, 54, 58, 0.14);
  transform: none;
}

/* =========================================================
   Work with Sahra page — horizontal hero photo crop
   Keep founder image separate; only widen the top hero image.
========================================================= */
body.grit-partners-page .grit-page-hero .grit-hero-image {
  max-width: 680px;
  width: 100%;
}

body.grit-partners-page .grit-page-hero .grit-hero-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 500px;
  object-fit: cover;
  object-position: center center;
}

@media (min-width: 1200px) {
  body.grit-partners-page .grit-page-hero .grit-hero-image {
    max-width: 760px;
  }

  body.grit-partners-page .grit-page-hero .grit-hero-image img {
    aspect-ratio: 16 / 9;
    max-height: 480px;
  }
}

/* =========================================================
   Work with Sahra page — enlarge horizontal hero photo
   Keeps the landscape crop but lets the image fill the
   right-side hero space more confidently.
========================================================= */
body.grit-partners-page .grit-page-hero .grit-hero-image {
  max-width: 780px;
  width: 100%;
}

body.grit-partners-page .grit-page-hero .grit-hero-image img {
  aspect-ratio: 16 / 9;
  max-height: 560px;
  object-fit: cover;
  object-position: center center;
}

@media (min-width: 1200px) {
  body.grit-partners-page .grit-page-hero .grit-hero-image {
    max-width: 900px;
  }

  body.grit-partners-page .grit-page-hero .grit-hero-image img {
    max-height: 540px;
  }
}

/* =========================================================
   Work with Sahra page — larger horizontal hero photo nudge
========================================================= */
@media (min-width: 992px) {
  body.grit-partners-page .grit-page-hero .container,
  body.grit-partners-page .grit-page-hero .grit-hero-grid {
    max-width: 1480px;
  }

  body.grit-partners-page .grit-page-hero .grit-hero-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(540px, 1.1fr);
    gap: clamp(2.5rem, 5vw, 5.5rem);
    align-items: center;
  }

  body.grit-partners-page .grit-page-hero .grit-hero-image {
    max-width: 980px;
    width: 100%;
  }

  body.grit-partners-page .grit-page-hero .grit-hero-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 620px;
    object-fit: cover;
    object-position: center center;
  }
}

@media (min-width: 1400px) {
  body.grit-partners-page .grit-page-hero .grit-hero-image {
    max-width: 1080px;
  }

  body.grit-partners-page .grit-page-hero .grit-hero-image img {
    max-height: 660px;
  }
}

/* =========================================================
   Work with Sahra page — largest horizontal hero photo
========================================================= */
@media (min-width: 992px) {
  body.grit-partners-page .grit-page-hero .container {
    max-width: 1600px;
  }

  body.grit-partners-page .grit-page-hero .grit-hero-grid {
    max-width: 1600px;
    grid-template-columns: minmax(0, 0.82fr) minmax(620px, 1.18fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: center;
  }

  body.grit-partners-page .grit-page-hero .grit-hero-image {
    max-width: 1180px;
    width: 100%;
  }

  body.grit-partners-page .grit-page-hero .grit-hero-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 700px;
    object-fit: cover;
    object-position: center center;
  }
}

@media (min-width: 1400px) {
  body.grit-partners-page .grit-page-hero .grit-hero-image {
    max-width: 1280px;
  }

  body.grit-partners-page .grit-page-hero .grit-hero-image img {
    max-height: 720px;
  }
}


/* =========================================================
   Work with Sahra page — full hero background image
   Photo fills the hero and fades out toward the text side.
========================================================= */
body.grit-partners-page .grit-page-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      rgba(20, 19, 43, 1) 0%,
      rgba(20, 19, 43, 0.98) 28%,
      rgba(20, 19, 43, 0.78) 48%,
      rgba(20, 19, 43, 0.38) 68%,
      rgba(20, 19, 43, 0.18) 100%
    ),
    url("../img/grit/grit-hero.webp") center right / cover no-repeat;
}

body.grit-partners-page .grit-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 28%, rgba(215, 168, 79, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(37, 25, 71, 0.18), rgba(20, 19, 43, 0.42));
}

body.grit-partners-page .grit-page-hero .container,
body.grit-partners-page .grit-page-hero .grit-hero-grid,
body.grit-partners-page .grit-page-hero .grit-hero-copy {
  position: relative;
  z-index: 1;
}

body.grit-partners-page .grit-page-hero .grit-hero-grid {
  display: block;
  max-width: 1680px;
}

body.grit-partners-page .grit-page-hero .grit-hero-copy {
  max-width: 760px;
}

body.grit-partners-page .grit-page-hero .grit-hero-image {
  display: none;
}

@media (max-width: 991px) {
  body.grit-partners-page .grit-page-hero {
    background:
      linear-gradient(
        180deg,
        rgba(20, 19, 43, 0.92) 0%,
        rgba(20, 19, 43, 0.96) 48%,
        rgba(20, 19, 43, 1) 100%
      ),
      url("../img/grit/grit-hero.webp") center center / cover no-repeat;
  }

  body.grit-partners-page .grit-page-hero .grit-hero-copy {
    max-width: 100%;
  }
}


/* =========================================================
   Footer contrast fix
   Make footer links and secondary text readable on dark footer.
========================================================= */
body.redesign-page .footer,
body.redesign-page footer.footer {
  color: rgba(255, 255, 251, 0.88);
}

body.redesign-page .footer p,
body.redesign-page .footer li,
body.redesign-page .footer span,
body.redesign-page footer.footer p,
body.redesign-page footer.footer li,
body.redesign-page footer.footer span {
  color: rgba(255, 255, 251, 0.82);
}

body.redesign-page .footer a,
body.redesign-page footer.footer a {
  color: rgba(255, 255, 251, 0.86);
  opacity: 1;
  text-decoration-color: rgba(255, 255, 251, 0.3);
}

body.redesign-page .footer a:hover,
body.redesign-page .footer a:focus-visible,
body.redesign-page footer.footer a:hover,
body.redesign-page footer.footer a:focus-visible {
  color: #ffffff;
  text-decoration-color: currentColor;
}

body.redesign-page .footer h2,
body.redesign-page .footer h3,
body.redesign-page .footer h4,
body.redesign-page .footer h5,
body.redesign-page .footer strong,
body.redesign-page footer.footer h2,
body.redesign-page footer.footer h3,
body.redesign-page footer.footer h4,
body.redesign-page footer.footer h5,
body.redesign-page footer.footer strong {
  color: #fffffb;
}

body.redesign-page .footer .bi,
body.redesign-page .footer i,
body.redesign-page footer.footer .bi,
body.redesign-page footer.footer i {
  color: rgba(95, 181, 213, 0.95);
}

/* =========================================================
   Hero book cover mockup — balanced large desktop size
========================================================= */
@media (min-width: 1200px) {
  body.redesign-page #hero .bookfx {
    width: clamp(310px, 24vw, 390px);
  }
}

@media (min-width: 1500px) {
  body.redesign-page #hero .bookfx {
    width: clamp(340px, 21vw, 430px);
  }
}

/* =========================================================
   Header nav clarity fix
   Remove old blurry/glow nav text treatment.
========================================================= */
body.redesign-page #header .navmenu a,
body.redesign-page #header .navmenu a:focus,
body.redesign-page #header .navmenu a:hover,
body.redesign-page #header .navmenu .active,
body.redesign-page #header .navmenu .active:focus,
body.redesign-page #header .navmenu li:hover > a,
body.redesign-page .header .navmenu a,
body.redesign-page .header .navmenu a:focus,
body.redesign-page .header .navmenu a:hover,
body.redesign-page .header .navmenu .active,
body.redesign-page .header .navmenu .active:focus,
body.redesign-page .header .navmenu li:hover > a {
  text-shadow: none;
  filter: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.redesign-page #header .navmenu a:hover,
body.redesign-page #header .navmenu a:focus,
body.redesign-page #header .navmenu .active,
body.redesign-page #header .navmenu .active:focus,
body.redesign-page #header .navmenu li:hover > a {
  color: #102f35;
}


/* Work with Sahra testimonial slider */
.grit-testimonials-section {
  background: #121026;
  color: #fffaf2;
}

.grit-testimonials-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.grit-testimonials-heading h2 {
  max-width: 11ch;
  margin: 0;
  color: #fffaf2;
}

.grit-testimonial-slider {
  position: relative;
  min-width: 0;
}

.grit-testimonial-track {
  position: relative;
  min-height: 24rem;
}

.grit-testimonial-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 2.35rem);
  border: 1px solid rgba(255, 250, 242, 0.18);
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateX(1rem);
  transition: opacity 260ms ease, transform 260ms ease, visibility 260ms ease;
}

.grit-testimonial-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.grit-testimonial-slide p {
  margin: 0;
  color: rgba(255, 250, 242, 0.88);
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.12rem);
  line-height: 1.75;
}

.grit-testimonial-slide footer {
  margin-top: 1.35rem;
  color: #e4b74f;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.grit-testimonial-slide footer span {
  display: block;
  margin-top: 0.25rem;
  color: rgba(255, 250, 242, 0.68);
  font-size: 0.88rem;
  font-weight: 600;
}

.grit-testimonial-controls {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.15rem;
}

.grit-testimonial-prev,
.grit-testimonial-next,
.grit-testimonial-dot {
  border: 1px solid rgba(255, 250, 242, 0.22);
  background: rgba(255, 255, 255, 0.07);
  color: #fffaf2;
}

.grit-testimonial-prev,
.grit-testimonial-next {
  display: inline-flex;
  width: 2.55rem;
  height: 2.55rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
}

.grit-testimonial-prev:hover,
.grit-testimonial-next:hover,
.grit-testimonial-prev:focus-visible,
.grit-testimonial-next:focus-visible {
  background: #e4b74f;
  color: #14132b;
}

.grit-testimonial-dots {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}

.grit-testimonial-dot {
  width: 0.62rem;
  height: 0.62rem;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
}

.grit-testimonial-dot.is-active {
  width: 1.65rem;
  background: #e4b74f;
  border-color: #e4b74f;
}

@media (max-width: 991px) {
  .grit-testimonials-panel {
    grid-template-columns: 1fr;
  }

  .grit-testimonials-heading h2 {
    max-width: 14ch;
  }

  .grit-testimonial-track {
    min-height: 32rem;
  }
}

@media (max-width: 575px) {
  .grit-testimonial-track {
    min-height: 42rem;
  }

  .grit-testimonial-slide {
    padding: 1.25rem;
  }
}

/* =========================================================
   MOBILE HERO — hide duplicate hero book cover
   Added 2026-05-23
   Purpose:
   - do not load/show the hero book-cover mockup on mobile
   - keep hero height so the background video still has room to show
   - leave the lower #about-book cover untouched
========================================================= */

@media (max-width: 767px) {
  body.redesign-page #hero .bookfx {
    display: none !important;
  }

  body.redesign-page #hero.hero,
  body.redesign-page #hero.hero-scroll {
    min-height: 100svh;
  }
}

/* =========================================================
   MOBILE HERO — title and copy readability over video
   Added 2026-05-24
   Purpose:
   - make the mobile hero title more prominent
   - make intro copy read more clearly over the video layer
   - preserve existing hero layout and video height
========================================================= */

@media (max-width: 767px) {
  body.redesign-page #hero .hero-book-title-lockup {
    margin-top: 0.9rem;
    margin-bottom: 1.15rem;
    font-size: clamp(3rem, 15vw, 4.9rem);
    line-height: 0.92;
    letter-spacing: 0.01em;
    max-width: min(100%, 8.4em);
    text-shadow:
      0 0.08em 0.24em rgba(12, 20, 24, 0.34),
      0 0.35em 1.35em rgba(12, 20, 24, 0.2);
  }

  body.redesign-page #hero .hero-title-topline {
    gap: 0.05em;
  }

  body.redesign-page #hero .hero-title-small-stack {
    margin-top: 0.02em;
  }

  body.redesign-page #hero .hero-title-small {
    font-size: 0.32em;
    line-height: 1.3;
  }

  body.redesign-page #hero .hero-title-snow {
    margin-top: 0.46em;
  }

  body.redesign-page #hero .hero-title-the {
    margin-top: 0.17em;
  }

  body.redesign-page #hero p {
    max-width: 32rem;
    margin-top: 1.12rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    background: rgba(10, 18, 22, 0.22);
    color: rgba(255, 250, 242, 0.94);
    font-size: clamp(1rem, 4.3vw, 1.18rem);
    font-weight: 600;
    line-height: 1.48;
    text-shadow: 0 0.08em 0.4em rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
}

@media (max-width: 390px) {
  body.redesign-page #hero .hero-book-title-lockup {
    margin-top: 0.8rem;
    margin-bottom: 1rem;
  }

  body.redesign-page #hero .hero-title-snow {
    margin-top: 0.26em;
  }
}

/* =========================================================
   MOBILE BOOK DETAILS — elegant collapsible panel
   Added 2026-05-24
   Purpose:
   - contain publisher/date/language/ISBN details on mobile
   - preserve desktop book-details presentation
========================================================= */

.book-details-disclosure {
  display: contents;
}

.book-details-disclosure > summary {
  display: none;
}

body.redesign-page #about-book .book-details-disclosure:not([open]) > .book-details {
  display: grid !important;
}

@media (max-width: 767px) {
  body.redesign-page #about-book .book-details-disclosure {
    display: block;
    width: min(100%, 390px);
    margin: 1.1rem auto 0;
    border-top: 1px solid rgba(20, 31, 34, 0.14);
    border-bottom: 1px solid rgba(20, 31, 34, 0.14);
    background: transparent;
  }

  body.redesign-page #about-book .book-details-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.82rem 0;
    color: rgba(20, 31, 34, 0.72);
    font-family: var(--default-font);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
    list-style: none;
    cursor: pointer;
  }

  body.redesign-page #about-book .book-details-disclosure > summary::-webkit-details-marker {
    display: none;
  }

  body.redesign-page #about-book .book-details-plus {
    position: relative;
    flex: 0 0 auto;
    width: 0.95rem;
    height: 0.95rem;
  }

  body.redesign-page #about-book .book-details-plus::before,
  body.redesign-page #about-book .book-details-plus::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 0.78rem;
    height: 2px;
    border-radius: 999px;
    background: #9b6a45;
    transform: translate(-50%, -50%);
    transition: transform 180ms ease, opacity 180ms ease;
  }

  body.redesign-page #about-book .book-details-plus::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  body.redesign-page #about-book .book-details-disclosure[open] .book-details-plus::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg);
  }

  body.redesign-page #about-book .book-details-disclosure:not([open]) > .book-details {
    display: none !important;
  }

  body.redesign-page #about-book .book-details-disclosure .book-details {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    margin: 0 !important;
    padding: 0 0 0.2rem !important;
    border-top: 1px solid rgba(20, 31, 34, 0.1) !important;
  }

  body.redesign-page #about-book .book-details-disclosure .book-details .detail-item {
    padding: 0.78rem 0 !important;
  }

  body.redesign-page #about-book .book-details-disclosure .book-details .detail-item:nth-last-child(-n + 2) {
    border-bottom: 1px solid rgba(20, 31, 34, 0.14) !important;
  }

  body.redesign-page #about-book .book-details-disclosure .book-details .detail-item:last-child {
    border-bottom: 0 !important;
  }
}

/* =========================================================
   MOBILE EXCERPT READER — small-phone spacing refinement
   Added 2026-05-24
   Purpose:
   - reduce mobile page margins without changing reader behavior
   - preserve desktop excerpt layout
========================================================= */

@media (max-width: 575px) {
  body.redesign-page #excerpt-reader .open-book {
    padding: clamp(0.45rem, 2.4vw, 0.7rem) !important;
  }

  body.redesign-page #excerpt-reader.mobile-page-mode .page-inner {
    padding: clamp(0.95rem, 4.5vw, 1.25rem) !important;
    font-size: clamp(0.92rem, 3.8vw, 1rem) !important;
    line-height: 1.58 !important;
  }
}

@media (max-width: 390px) {
  body.redesign-page #excerpt-reader .open-book {
    padding: clamp(0.38rem, 2vw, 0.55rem) !important;
  }

  body.redesign-page #excerpt-reader.mobile-page-mode .page-inner {
    padding: clamp(0.85rem, 4vw, 1.05rem) !important;
    font-size: clamp(0.9rem, 3.7vw, 0.96rem) !important;
    line-height: 1.55 !important;
  }
}

/* =========================================================
   MOBILE EXCERPT READER — tighter small-phone measure
   Added 2026-05-24
   Purpose:
   - reclaim compounded horizontal spacing on small phones
   - preserve reader behavior, text, page count, and desktop layout
========================================================= */

@media (max-width: 575px) {
  body.redesign-page #excerpt-reader .reader {
    width: min(100% - 0.75rem, 680px) !important;
  }

  body.redesign-page #excerpt-reader .open-book {
    padding: 0.38rem !important;
    border-radius: 0.9rem !important;
  }

  body.redesign-page #excerpt-reader.mobile-page-mode .page,
  body.redesign-page #excerpt-reader.mobile-page-mode article.page.mobile-page-active {
    border-radius: 0.72rem !important;
  }

  body.redesign-page #excerpt-reader.mobile-page-mode .page-inner {
    padding: 0.85rem 0.9rem !important;
    font-size: clamp(0.9rem, 3.65vw, 0.98rem) !important;
    line-height: 1.52 !important;
  }
}

@media (max-width: 390px) {
  body.redesign-page #excerpt-reader .reader {
    width: min(100% - 0.45rem, 680px) !important;
  }

  body.redesign-page #excerpt-reader .open-book {
    padding: 0.28rem !important;
  }

  body.redesign-page #excerpt-reader.mobile-page-mode .page-inner {
    padding: 0.78rem !important;
    font-size: clamp(0.88rem, 3.55vw, 0.95rem) !important;
    line-height: 1.5 !important;
  }
}

/* =========================================================
   MOBILE PURCHASE — horizontal card slider
   Added 2026-05-24
   Purpose:
   - show Bookshop first with the next retailer peeking on mobile
   - preserve desktop purchase grid and card content
========================================================= */

@media (max-width: 767px) {
  body.redesign-page #purchase .purchase-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 1rem !important;
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5) !important;
    margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5) !important;
    padding: 0 1rem 0.65rem !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-padding-left: 1rem !important;
    scroll-padding-right: 1rem !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
  }

  body.redesign-page #purchase .purchase-row::-webkit-scrollbar {
    height: 0.45rem;
  }

  body.redesign-page #purchase .purchase-row::-webkit-scrollbar-track {
    background: rgba(24, 54, 58, 0.08);
    border-radius: 999px;
  }

  body.redesign-page #purchase .purchase-row::-webkit-scrollbar-thumb {
    background: rgba(24, 54, 58, 0.22);
    border-radius: 999px;
  }

  body.redesign-page #purchase .purchase-row > [class*="col-"] {
    flex: 0 0 84% !important;
    width: 84% !important;
    max-width: 84% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: normal !important;
  }

  body.redesign-page #purchase .purchase-row > [class*="col-"]:last-child {
    margin-right: 1rem !important;
  }

  body.redesign-page #purchase .purchase-row .book-format-card {
    height: 100% !important;
  }
}

/* =========================================================
   GRIT TESTIMONIALS — mobile slider polish
   Added 2026-05-24
   Purpose:
   - reduce oversized mobile testimonial cards
   - center controls below the active testimonial
========================================================= */

@media (max-width: 767px) {
  body.redesign-page.grit-partners-page .grit-testimonials-section {
    padding-block: clamp(2.75rem, 8vw, 4rem) !important;
  }

  body.redesign-page.grit-partners-page .grit-testimonials-panel {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 1.35rem !important;
  }

  body.redesign-page.grit-partners-page .grit-testimonials-heading h2 {
    max-width: 13ch !important;
  }

  body.redesign-page.grit-partners-page .grit-testimonial-slider {
    width: 100% !important;
  }

  body.redesign-page.grit-partners-page .grit-testimonial-track {
    min-height: clamp(25rem, 118vw, 34rem) !important;
  }

  body.redesign-page.grit-partners-page .grit-testimonial-slide {
    justify-content: center !important;
    padding: clamp(1.15rem, 5vw, 1.65rem) !important;
    border-radius: 1rem !important;
  }

  body.redesign-page.grit-partners-page .grit-testimonial-slide p {
    font-size: clamp(0.94rem, 3.7vw, 1.02rem) !important;
    line-height: 1.55 !important;
  }

  body.redesign-page.grit-partners-page .grit-testimonial-slide footer {
    margin-top: 1rem !important;
    font-size: clamp(0.9rem, 3.5vw, 0.98rem) !important;
    line-height: 1.3 !important;
  }

  body.redesign-page.grit-partners-page .grit-testimonial-slide footer span {
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
  }

  body.redesign-page.grit-partners-page .grit-testimonial-controls {
    justify-content: center !important;
    margin-top: 1rem !important;
  }
}

/* =========================================================
   ABOUT THE BOOK — Mobile copy trim
   Keeps the final positioning sentence on desktop while
   removing it from the tighter mobile reading flow.
========================================================= */

@media (max-width: 767px) {
  .mobile-hidden-book-closing {
    display: none !important;
  }
}


/* =========================================================
   MEET SAHRA — Desktop lede emphasis
   Gives the opening bio paragraph a stronger editorial role
   while leaving the mobile reading flow unchanged.
========================================================= */

@media (min-width: 768px) {
  body.redesign-page main #about.meet-sahra.redesign-section p.meet-sahra-lede {
    font-size: 1.68rem !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    letter-spacing: -0.012em !important;
    color: #3f4b4b !important;
    max-width: 45rem !important;
  }
}

/* =========================================================
   EXCERPT SIGNUP — Floating non-layout card
   Keeps the delayed signup prompt from changing the book
   reader height, which prevents arrow controls from moving.
========================================================= */

body.redesign-page #excerpt-reader .excerpt-signup {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: clamp(1rem, 3vw, 2rem) !important;
  width: min(calc(100vw - 2rem), 34rem) !important;
  max-height: calc(100vh - 2rem) !important;
  overflow-y: auto !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 1000 !important;
  box-shadow: 0 24px 70px rgba(24, 54, 58, 0.22) !important;
}

@media (max-width: 767px) {
  body.redesign-page #excerpt-reader .excerpt-signup {
    bottom: 0.75rem !important;
    width: min(calc(100vw - 1rem), 32rem) !important;
    max-height: calc(100vh - 1.5rem) !important;
  }
}

/* =========================================================
   EXCERPT SIGNUP — Wide compact layout
   Keeps the delayed chapter signup broad and shallow, with
   name, email, and submit button on one desktop row.
========================================================= */

body.redesign-page #excerpt-reader .excerpt-signup {
  width: min(calc(100vw - 3rem), 58rem) !important;
  padding: clamp(1.1rem, 1.8vw, 1.45rem) clamp(1.2rem, 2.2vw, 1.8rem) !important;
}

body.redesign-page #excerpt-reader .excerpt-signup-copy {
  max-width: none !important;
}

body.redesign-page #excerpt-reader .excerpt-signup h3 {
  max-width: none !important;
  margin-bottom: 0.35rem !important;
  font-size: clamp(1.9rem, 1.35rem + 1.7vw, 2.85rem) !important;
  line-height: 1.02 !important;
}

body.redesign-page #excerpt-reader .excerpt-signup p {
  max-width: none !important;
  margin-bottom: 0.7rem !important;
  font-size: 0.98rem !important;
  line-height: 1.45 !important;
}

body.redesign-page #excerpt-reader .excerpt-signup-form {
  margin-top: 0 !important;
}

body.redesign-page #excerpt-reader .excerpt-signup-fields {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 0.75rem !important;
  margin-top: 0.55rem !important;
}

body.redesign-page #excerpt-reader .excerpt-signup-fields label {
  margin: 0 !important;
}

body.redesign-page #excerpt-reader .excerpt-signup-fields label span {
  display: block;
  margin-bottom: 0.28rem !important;
  font-size: 0.78rem !important;
  line-height: 1.1 !important;
}

body.redesign-page #excerpt-reader .excerpt-signup input[type="text"],
body.redesign-page #excerpt-reader .excerpt-signup input[type="email"] {
  min-height: 2.65rem !important;
  height: 2.65rem !important;
  padding: 0.55rem 0.75rem !important;
  font-size: 0.95rem !important;
}

body.redesign-page #excerpt-reader .excerpt-signup-actions {
  margin: 0 !important;
}

body.redesign-page #excerpt-reader .excerpt-signup button[type="submit"] {
  min-height: 2.65rem !important;
  height: 2.65rem !important;
  padding: 0.55rem 1.05rem !important;
  font-size: 0.9rem !important;
  white-space: nowrap !important;
}

body.redesign-page #excerpt-reader .excerpt-signup-consent {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.45rem !important;
  margin: 0.65rem 0 0 !important;
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
}

body.redesign-page #excerpt-reader .excerpt-signup-consent input {
  width: 0.85rem !important;
  height: 0.85rem !important;
  margin-top: 0.13rem !important;
  flex: 0 0 auto !important;
}

body.redesign-page #excerpt-reader .excerpt-signup-note:empty {
  display: none !important;
}

body.redesign-page #excerpt-reader .excerpt-signup-note:not(:empty) {
  display: block !important;
  margin-top: 0.6rem !important;
}

@media (max-width: 767px) {
  body.redesign-page #excerpt-reader .excerpt-signup {
    width: min(calc(100vw - 1rem), 34rem) !important;
    padding: 1rem !important;
  }

  body.redesign-page #excerpt-reader .excerpt-signup h3 {
    font-size: clamp(1.65rem, 1.25rem + 4vw, 2.25rem) !important;
  }

  body.redesign-page #excerpt-reader .excerpt-signup-fields {
    grid-template-columns: 1fr !important;
  }

  body.redesign-page #excerpt-reader .excerpt-signup button[type="submit"] {
    width: 100% !important;
  }
}

/* =========================================================
   EXCERPT SIGNUP — Final visibility state
   Keeps the prompt fixed and non-layout while making reveal
   state explicit and reliable.
========================================================= */

body.redesign-page #excerpt-reader .excerpt-signup[hidden] {
  display: none !important;
}

body.redesign-page #excerpt-reader .excerpt-signup:not([hidden]) {
  display: block !important;
}

body.redesign-page #excerpt-reader .excerpt-signup {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(0.75rem) !important;
  transition: opacity 180ms ease, transform 180ms ease;
}

body.redesign-page #excerpt-reader .excerpt-signup.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.redesign-page #excerpt-reader .excerpt-signup {
    transition: none;
  }
}

/* =========================================================
   PURCHASE CARDS — Correct cents placement
   Prevents retail prices such as $20.46 from reading as
   four-digit whole-dollar amounts.
========================================================= */

body.redesign-page .format-price .price-main {
  display: inline-flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  line-height: 0.9 !important;
}

body.redesign-page .format-price .price-currency {
  font-size: 0.42em !important;
  line-height: 1 !important;
  margin-top: 0.1em !important;
  margin-right: 0.04em !important;
}

body.redesign-page .format-price .price-cents {
  display: inline-block !important;
  font-size: 0.34em !important;
  line-height: 1 !important;
  margin-left: 0.06em !important;
  margin-top: 0.08em !important;
  vertical-align: super !important;
  transform: translateY(-0.12em) !important;
  font-weight: 700 !important;
}

/* =========================================================
   PURCHASE CARDS — Cents digit spacing refinement
   Adds a touch of spacing between raised cents digits so
   prices read clearly at smaller scale.
========================================================= */

body.redesign-page .format-price .price-cents {
  letter-spacing: 0.035em !important;
}

/* =========================================================
   CONTACT — Simple contact support panel
========================================================= */

body.redesign-page #contact .contact-social-icons {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.6rem !important;
  margin: 1.15rem 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.redesign-page #contact .contact-social-icons a {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(21, 56, 63, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  color: rgba(21, 56, 63, 0.78) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

body.redesign-page #contact .contact-social-icons a:hover,
body.redesign-page #contact .contact-social-icons a:focus-visible {
  color: #15383f !important;
  border-color: rgba(21, 56, 63, 0.3) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  transform: translateY(-1px) !important;
}

body.redesign-page #contact .contact-social-icons a i,
body.redesign-page #contact .contact-social-icons i {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}

/* =========================================================
   CONTACT — Desktop vertical rhythm tightening
   Reduces excess whitespace so the submit button remains
   visible sooner without making the form feel cramped.
========================================================= */

@media (min-width: 992px) {
  body.redesign-page #contact.contact {
    padding-top: clamp(3.25rem, 5vw, 4.5rem) !important;
    padding-bottom: clamp(3rem, 5vw, 4.25rem) !important;
  }

  body.redesign-page #contact .section-title {
    margin-bottom: clamp(2rem, 3vw, 2.75rem) !important;
  }

  body.redesign-page #contact .section-title .redesign-kicker,
  body.redesign-page #contact .section-title .section-kicker {
    margin-bottom: 0.45rem !important;
  }

  body.redesign-page #contact .section-title h2 {
    margin-bottom: 0.5rem !important;
    line-height: 1.02 !important;
  }

  body.redesign-page #contact .section-title p {
    margin: 0 auto !important;
    max-width: 46rem !important;
    line-height: 1.45 !important;
  }

  body.redesign-page #contact .row {
    row-gap: 1.5rem !important;
  }

  body.redesign-page #contact .info-wrap,
  body.redesign-page #contact .php-email-form {
    padding-top: clamp(1.6rem, 2.3vw, 2rem) !important;
    padding-bottom: clamp(1.6rem, 2.3vw, 2rem) !important;
  }

  body.redesign-page #contact .contact-simple-list {
    margin-top: 0.65rem !important;
  }

  body.redesign-page #contact .contact-simple-list li {
    line-height: 1.42 !important;
  }

  body.redesign-page #contact .contact-simple-lede {
    margin-bottom: 1.5rem !important;
  }

  body.redesign-page #contact .contact-helpful-details {
    margin-top: 0.25rem !important;
  }

  body.redesign-page #contact .contact-social-icons {
    margin-top: 1.25rem !important;
    margin-bottom: 1rem !important;
  }

  body.redesign-page #contact .contact-simple-note {
    margin-top: auto !important;
    padding-top: 1.75rem !important;
    line-height: 1.42 !important;
  }

  body.redesign-page #contact .php-email-form .form-group,
  body.redesign-page #contact .php-email-form .col-md-6 {
    margin-bottom: 0.85rem !important;
  }

  body.redesign-page #contact .php-email-form label {
    margin-bottom: 0.28rem !important;
  }

  body.redesign-page #contact .php-email-form input,
  body.redesign-page #contact .php-email-form select {
    min-height: 2.65rem !important;
    height: 2.65rem !important;
  }

  body.redesign-page #contact .php-email-form textarea {
    min-height: 8.5rem !important;
    height: 8.5rem !important;
  }

  body.redesign-page #contact .php-email-form .text-center,
  body.redesign-page #contact .php-email-form .form-submit,
  body.redesign-page #contact .php-email-form button[type="submit"] {
    margin-top: 0.85rem !important;
  }
}

/* =========================================================
   CONTACT — Extra compact desktop form pass
   Further reduces the form-card vertical footprint after
   the HTML gutter/label cleanup.
========================================================= */

@media (min-width: 992px) {
  body.redesign-page #contact .php-email-form {
    padding: 1.1rem 1.35rem 1.2rem !important;
  }

  body.redesign-page #contact .contact-form-grid {
    --bs-gutter-y: 0.5rem !important;
  }

  body.redesign-page #contact .php-email-form .col-md-6,
  body.redesign-page #contact .php-email-form .col-md-12 {
    margin-bottom: 0.45rem !important;
  }

  body.redesign-page #contact .contact-field-label {
    margin-bottom: 0.18rem !important;
    font-size: 0.9rem !important;
    line-height: 1.1 !important;
  }

  body.redesign-page #contact .php-email-form input,
  body.redesign-page #contact .php-email-form select {
    height: 2.2rem !important;
    min-height: 2.2rem !important;
    padding: 0.35rem 0.65rem !important;
    font-size: 0.92rem !important;
  }

  body.redesign-page #contact .php-email-form textarea#message-field {
    height: 5.35rem !important;
    min-height: 5.35rem !important;
    padding: 0.5rem 0.65rem !important;
    font-size: 0.92rem !important;
  }

  body.redesign-page #contact .php-email-form .text-center {
    margin-top: 0.35rem !important;
  }

  body.redesign-page #contact .php-email-form button[type="submit"] {
    padding: 0.58rem 1.35rem !important;
    min-height: 2.35rem !important;
    line-height: 1.1 !important;
  }
}

/* =========================================================
   CONTACT — Cohesive form grouping
   Groups fields into clearer rows so the form reads as one
   connected request flow rather than disconnected fields.
========================================================= */

@media (min-width: 992px) {
  body.redesign-page #contact .php-email-form {
    padding: 1.25rem 1.45rem 1.35rem !important;
  }

  body.redesign-page #contact .contact-form-grid {
    --bs-gutter-x: 1rem !important;
    --bs-gutter-y: 0.82rem !important;
    align-items: start !important;
  }

  body.redesign-page #contact .php-email-form .col-md-6,
  body.redesign-page #contact .php-email-form .col-md-12 {
    margin-bottom: 0 !important;
  }

  body.redesign-page #contact .contact-field-label {
    margin-bottom: 0.32rem !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.01em;
  }

  body.redesign-page #contact .php-email-form input,
  body.redesign-page #contact .php-email-form select {
    height: 2.45rem !important;
    min-height: 2.45rem !important;
  }

  body.redesign-page #contact .php-email-form textarea#message-field {
    height: 6.15rem !important;
    min-height: 6.15rem !important;
  }

  body.redesign-page #contact .php-email-form .text-center {
    margin-top: 0.15rem !important;
  }
}

/* =========================================================
   CONTACT — Message field depth refinement
   Gives the message box a little more writing room while
   preserving the compact desktop form layout.
========================================================= */

@media (min-width: 992px) {
  body.redesign-page #contact .php-email-form textarea#message-field {
    height: 7.35rem !important;
    min-height: 7.35rem !important;
  }
}

/* =========================================================
   CONTACT — Equal height desktop cards
   Keeps the left info card and right form card visually aligned
   on desktop without changing mobile stacking.
========================================================= */

@media (min-width: 992px) {
  body.redesign-page #contact .row.gy-4 {
    align-items: stretch !important;
  }

  body.redesign-page #contact .row.gy-4 > [class*="col-"] {
    display: flex !important;
  }

  body.redesign-page #contact .info-wrap,
  body.redesign-page #contact .php-email-form {
    width: 100% !important;
    height: 100% !important;
  }

  body.redesign-page #contact .info-wrap {
    display: flex !important;
    flex-direction: column !important;
  }

  body.redesign-page #contact .contact-simple-note {
    margin-top: auto !important;
  }
}

/* =========================================================
   NAVIGATION — Brand scroll background
   Keeps the header white on page load, then uses Sahra's
   BrandBook color after scroll instead of turquoise.
========================================================= */

body.redesign-page .header,
body.redesign-page #header {
  background: #ffffff;
}

body.redesign-page .header.header-scrolled,
body.redesign-page #header.header-scrolled,
body.redesign-page .header.scrolled,
body.redesign-page #header.scrolled {
  background: #F6DED1 !important;
}

body.redesign-page .header.header-scrolled .navmenu a,
body.redesign-page #header.header-scrolled .navmenu a,
body.redesign-page .header.scrolled .navmenu a,
body.redesign-page #header.scrolled .navmenu a,
body.redesign-page .header.header-scrolled .sitename,
body.redesign-page #header.header-scrolled .sitename,
body.redesign-page .header.scrolled .sitename,
body.redesign-page #header.scrolled .sitename {
  color: #15383f !important;
}

/* =========================================================
   NAVIGATION — Correct body-scrolled brand color
   The template applies the scroll state to body, so target
   body.scrolled .header instead of only .header.scrolled.
========================================================= */

body.redesign-page.scrolled #header,
body.redesign-page.scrolled .header,
body.scrolled.redesign-page #header,
body.scrolled.redesign-page .header {
  background: #F6DED1 !important;
  background-color: #F6DED1 !important;
}

body.redesign-page.scrolled #header .sitename,
body.redesign-page.scrolled .header .sitename,
body.redesign-page.scrolled #header .navmenu a,
body.redesign-page.scrolled .header .navmenu a,
body.scrolled.redesign-page #header .sitename,
body.scrolled.redesign-page .header .sitename,
body.scrolled.redesign-page #header .navmenu a,
body.scrolled.redesign-page .header .navmenu a {
  color: #15383f !important;
}

body.redesign-page.scrolled #header .navmenu a:hover,
body.redesign-page.scrolled .header .navmenu a:hover,
body.redesign-page.scrolled #header .navmenu .active,
body.redesign-page.scrolled .header .navmenu .active {
  color: #9d715b !important;
}

/* =========================================================
   NAVIGATION — Exact scroll-state override
   The template uses .index-page.scrolled .header for the
   scrolled navigation state.
========================================================= */

.index-page.scrolled .header,
.index-page.scrolled #header {
  background: #F6DED1 !important;
  background-color: #F6DED1 !important;
}

.index-page.scrolled .header a,
.index-page.scrolled .header .navmenu > ul > li > a,
.index-page.scrolled .header .sitename {
  color: #15383f !important;
}

.index-page.scrolled .header a:hover,
.index-page.scrolled .header .navmenu > ul > li > a:hover,
.index-page.scrolled .header .navmenu .active {
  color: #9d715b !important;
}

/* =========================================================
   SITE BRAND — Sahra Noor wordmark font
   Uses Julius Sans One for the site name with a slightly
   stronger editorial treatment.
========================================================= */

body.redesign-page .sitename,
body.redesign-page .logo .sitename,
.header .sitename {
  font-family: "Julius Sans One", var(--default-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0.045em !important;
  text-transform: none !important;
  color: #15383f !important;
  text-shadow: 0 0 0.01em currentColor;
}

body.redesign-page .logo,
.header .logo {
  text-decoration: none !important;
}

/* =========================================================
   WORK WITH SAHRA / GRIT PARTNERS — Page typography
   Uses Julius Sans One for headings and Montserrat for body
   copy on the Grit Partners page only.
========================================================= */

body.redesign-page.grit-partners-page {
  font-family: "Montserrat", var(--default-font) !important;
}

body.redesign-page.grit-partners-page h1,
body.redesign-page.grit-partners-page h2,
body.redesign-page.grit-partners-page h3,
body.redesign-page.grit-partners-page h4,
body.redesign-page.grit-partners-page h5,
body.redesign-page.grit-partners-page h6,
body.redesign-page.grit-partners-page .section-title,
body.redesign-page.grit-partners-page .redesign-kicker,
body.redesign-page.grit-partners-page .service-card-title,
body.redesign-page.grit-partners-page .testimonial-card h3 {
  font-family: "Julius Sans One", var(--heading-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0.045em !important;
}

body.redesign-page.grit-partners-page p,
body.redesign-page.grit-partners-page li,
body.redesign-page.grit-partners-page a,
body.redesign-page.grit-partners-page span,
body.redesign-page.grit-partners-page label,
body.redesign-page.grit-partners-page input,
body.redesign-page.grit-partners-page textarea,
body.redesign-page.grit-partners-page select,
body.redesign-page.grit-partners-page button {
  font-family: "Montserrat", var(--default-font) !important;
}

/* =========================================================
   WORK WITH SAHRA / GRIT PARTNERS — Restrained BrandBook color pass
   Uses Sahra Noor's primary palette as a calm foundation, with
   secondary/accent colors used sparingly for emphasis.
========================================================= */

body.redesign-page.grit-partners-page {
  --grit-blush: #F6DED1;
  --grit-mist: #D8EEED;
  --grit-clay: #DEC4BA;
  --grit-teal: #6C9296;
  --grit-copper: #B46A46;
  --grit-ink: #15383f;
  --grit-paper: #fffaf7;

  background: linear-gradient(180deg, #fffaf7 0%, rgba(246, 222, 209, 0.28) 52%, rgba(216, 238, 237, 0.24) 100%) !important;
  color: var(--grit-ink);
}

/* Keep the hero calm and readable, not gradient-heavy */
body.redesign-page.grit-partners-page .grit-hero,
body.redesign-page.grit-partners-page .work-hero,
body.redesign-page.grit-partners-page section:first-of-type {
  background:
    linear-gradient(90deg, rgba(246, 222, 209, 0.86), rgba(216, 238, 237, 0.62)) !important;
}

/* Headings and small labels */
body.redesign-page.grit-partners-page .redesign-kicker,
body.redesign-page.grit-partners-page .section-kicker {
  color: var(--grit-copper) !important;
}

body.redesign-page.grit-partners-page h1,
body.redesign-page.grit-partners-page h2,
body.redesign-page.grit-partners-page h3,
body.redesign-page.grit-partners-page h4 {
  color: var(--grit-ink) !important;
}

/* Cards: mostly warm paper, with very subtle BrandBook borders */
body.redesign-page.grit-partners-page .service-card,
body.redesign-page.grit-partners-page .testimonial-card,
body.redesign-page.grit-partners-page .grit-card {
  background: rgba(255, 250, 247, 0.88) !important;
  border: 1px solid rgba(222, 196, 186, 0.72) !important;
  box-shadow: 0 18px 46px rgba(108, 146, 150, 0.10) !important;
}

/* Use pale mist only for icon containers / small accents */
body.redesign-page.grit-partners-page .service-card .icon,
body.redesign-page.grit-partners-page .service-icon,
body.redesign-page.grit-partners-page .testimonial-icon {
  background: rgba(216, 238, 237, 0.68) !important;
  color: var(--grit-teal) !important;
  border-color: rgba(108, 146, 150, 0.22) !important;
}

/* Buttons: professional teal, warm copper on hover */
body.redesign-page.grit-partners-page .redesign-btn,
body.redesign-page.grit-partners-page .btn,
body.redesign-page.grit-partners-page button[type="submit"] {
  background: var(--grit-teal) !important;
  border-color: var(--grit-teal) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 34px rgba(108, 146, 150, 0.18) !important;
}

body.redesign-page.grit-partners-page .redesign-btn:hover,
body.redesign-page.grit-partners-page .btn:hover,
body.redesign-page.grit-partners-page button[type="submit"]:hover {
  background: var(--grit-copper) !important;
  border-color: var(--grit-copper) !important;
  color: #ffffff !important;
}

/* Secondary/outline buttons should remain legible */
body.redesign-page.grit-partners-page .redesign-btn-outline,
body.redesign-page.grit-partners-page .btn-outline,
body.redesign-page.grit-partners-page .hero-actions a:not(.redesign-btn):not(.btn) {
  color: var(--grit-ink) !important;
  border-color: rgba(21, 56, 63, 0.34) !important;
  background: rgba(255, 250, 247, 0.18) !important;
}

body.redesign-page.grit-partners-page .redesign-btn-outline:hover,
body.redesign-page.grit-partners-page .btn-outline:hover,
body.redesign-page.grit-partners-page .hero-actions a:not(.redesign-btn):not(.btn):hover {
  color: #ffffff !important;
  background: var(--grit-teal) !important;
  border-color: var(--grit-teal) !important;
}

/* Text links */
body.redesign-page.grit-partners-page a:not(.btn):not(.redesign-btn) {
  color: var(--grit-teal);
}

body.redesign-page.grit-partners-page a:not(.btn):not(.redesign-btn):hover {
  color: var(--grit-copper);
}

/* =========================================================
   WORK WITH SAHRA / GRIT PARTNERS — Hero BrandBook refinement
   Restores the hero image after the broad restrained color pass
   and keeps the hero palette warm, misted, and readable.
========================================================= */

body.redesign-page.grit-partners-page .grit-page-hero {
  background:
    linear-gradient(
      90deg,
      rgba(255, 250, 247, 0.96) 0%,
      rgba(246, 222, 209, 0.86) 34%,
      rgba(216, 238, 237, 0.54) 58%,
      rgba(216, 238, 237, 0.16) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 250, 247, 0.72) 0%,
      rgba(222, 196, 186, 0.18) 100%
    ),
    url("../img/grit/grit-hero.webp") center right / cover no-repeat !important;
  color: var(--grit-ink) !important;
}

body.redesign-page.grit-partners-page .grit-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 24%, rgba(246, 222, 209, 0.52), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(216, 238, 237, 0.34), transparent 30%);
}

body.redesign-page.grit-partners-page .grit-page-hero::after {
  background: linear-gradient(90deg, transparent, rgba(222, 196, 186, 0.72), transparent) !important;
  opacity: 0.72 !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .container,
body.redesign-page.grit-partners-page .grit-page-hero .row {
  position: relative;
  z-index: 1;
}

body.redesign-page.grit-partners-page .grit-page-hero h1 {
  color: var(--grit-ink) !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-eyebrow {
  color: var(--grit-copper) !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-hero-copy,
body.redesign-page.grit-partners-page .grit-page-hero .grit-hero-subcopy {
  color: rgba(21, 56, 63, 0.82) !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-btn-primary {
  border-color: var(--grit-teal) !important;
  background: var(--grit-teal) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 34px rgba(108, 146, 150, 0.2) !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-btn-primary:hover,
body.redesign-page.grit-partners-page .grit-page-hero .grit-btn-primary:focus-visible {
  border-color: var(--grit-copper) !important;
  background: var(--grit-copper) !important;
  color: #ffffff !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-btn-secondary {
  border-color: rgba(21, 56, 63, 0.32) !important;
  background: rgba(255, 250, 247, 0.58) !important;
  color: var(--grit-ink) !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-btn-secondary:hover,
body.redesign-page.grit-partners-page .grit-page-hero .grit-btn-secondary:focus-visible {
  border-color: rgba(108, 146, 150, 0.42) !important;
  background: rgba(216, 238, 237, 0.72) !important;
  color: var(--grit-ink) !important;
}

@media (max-width: 991px) {
  body.redesign-page.grit-partners-page .grit-page-hero {
    background:
      linear-gradient(
        180deg,
        rgba(255, 250, 247, 0.95) 0%,
        rgba(246, 222, 209, 0.84) 46%,
        rgba(216, 238, 237, 0.7) 100%
      ),
      url("../img/grit/grit-hero.webp") center center / cover no-repeat !important;
  }
}

/* Testimonials: keep dark section readable and less clashy */
body.redesign-page.grit-partners-page .testimonials,
body.redesign-page.grit-partners-page .testimonial-section {
  background: #15383f !important;
}

body.redesign-page.grit-partners-page .testimonials .redesign-kicker,
body.redesign-page.grit-partners-page .testimonial-section .redesign-kicker {
  color: #FAE79A !important;
}

body.redesign-page.grit-partners-page .testimonials h2,
body.redesign-page.grit-partners-page .testimonial-section h2,
body.redesign-page.grit-partners-page .testimonials p,
body.redesign-page.grit-partners-page .testimonial-section p {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* =========================================================
   GRIT PARTNERS — Restore visible hero image block
   The image exists in the markup; this restores the right-side
   photo card and prevents the color wash from hiding it.
========================================================= */

body.redesign-page.grit-partners-page .grit-page-hero .row {
  position: relative;
  z-index: 2;
}

body.redesign-page.grit-partners-page .grit-page-hero .col-lg-5 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.redesign-page.grit-partners-page .grit-hero-image {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 3 !important;
  max-width: 420px;
  margin-left: auto;
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(222, 196, 186, 0.72);
  background: rgba(255, 250, 247, 0.42);
  box-shadow: 0 24px 70px rgba(21, 56, 63, 0.16);
}

body.redesign-page.grit-partners-page .grit-hero-image img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

body.redesign-page.grit-partners-page .grit-page-hero::before {
  z-index: 0 !important;
  opacity: 0.42 !important;
}

body.redesign-page.grit-partners-page .grit-page-hero::after {
  opacity: 0.18 !important;
  z-index: 0 !important;
}

@media (max-width: 991px) {
  body.redesign-page.grit-partners-page .grit-hero-image {
    max-width: 320px;
    margin: 1.5rem auto 0;
  }
}

/* =========================================================
   GRIT PARTNERS — Hero image as background layer
   Moves the hero image out of the visible card treatment and
   back into the right-side background, with a protective
   gradient for left-side text readability.
========================================================= */

body.redesign-page.grit-partners-page .grit-page-hero {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(
      90deg,
      rgba(246, 222, 209, 0.96) 0%,
      rgba(246, 222, 209, 0.88) 28%,
      rgba(216, 238, 237, 0.58) 52%,
      rgba(216, 238, 237, 0.18) 74%,
      rgba(216, 238, 237, 0.02) 100%
    ),
    url("../img/grit/grit-hero.webp") right center / auto 82% no-repeat !important;
}

/* Keep subtle atmosphere without hiding the image */
body.redesign-page.grit-partners-page .grit-page-hero::before {
  background:
    radial-gradient(circle at 18% 24%, rgba(246, 222, 209, 0.24), transparent 30%),
    radial-gradient(circle at 78% 45%, rgba(216, 238, 237, 0.12), transparent 34%) !important;
  opacity: 1 !important;
  z-index: 0 !important;
}

body.redesign-page.grit-partners-page .grit-page-hero::after {
  opacity: 0 !important;
  display: none !important;
}

/* Hide the inline image card because the image now lives in the hero background */
body.redesign-page.grit-partners-page .grit-page-hero .col-lg-5 {
  display: none !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .col-lg-7 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .container,
body.redesign-page.grit-partners-page .grit-page-hero .row,
body.redesign-page.grit-partners-page .grit-page-hero .col-lg-7 {
  position: relative !important;
  z-index: 2 !important;
}

/* Keep the text column from running into the image area */
body.redesign-page.grit-partners-page .grit-page-hero h1,
body.redesign-page.grit-partners-page .grit-page-hero .grit-hero-copy,
body.redesign-page.grit-partners-page .grit-page-hero .grit-hero-subcopy,
body.redesign-page.grit-partners-page .grit-page-hero .grit-actions {
  max-width: 48rem;
}

@media (min-width: 1400px) {
  body.redesign-page.grit-partners-page .grit-page-hero {
    background:
      linear-gradient(
        90deg,
        rgba(246, 222, 209, 0.96) 0%,
        rgba(246, 222, 209, 0.88) 26%,
        rgba(216, 238, 237, 0.50) 50%,
        rgba(216, 238, 237, 0.12) 72%,
        rgba(216, 238, 237, 0.00) 100%
      ),
      url("../img/grit/grit-hero.webp") right center / auto 88% no-repeat !important;
  }
}

@media (max-width: 991px) {
  body.redesign-page.grit-partners-page .grit-page-hero {
    background:
      linear-gradient(
        180deg,
        rgba(246, 222, 209, 0.94) 0%,
        rgba(246, 222, 209, 0.86) 46%,
        rgba(216, 238, 237, 0.72) 100%
      ),
      url("../img/grit/grit-hero.webp") center bottom / 88% auto no-repeat !important;
  }

  body.redesign-page.grit-partners-page .grit-page-hero {
    padding-bottom: clamp(14rem, 44vw, 22rem) !important;
  }
}

/* =========================================================
   GRIT PARTNERS — Right-side hero image layer repair
   Uses the existing image as a real background layer on the
   hero pseudo-element so it remains visible on the right.
========================================================= */

body.redesign-page.grit-partners-page .grit-page-hero {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(
      90deg,
      #F6DED1 0%,
      rgba(246, 222, 209, 0.94) 34%,
      rgba(216, 238, 237, 0.72) 62%,
      rgba(216, 238, 237, 0.42) 100%
    ) !important;
}

/* Photo layer — visible on right side */
body.redesign-page.grit-partners-page .grit-page-hero::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 0 0 auto !important;
  width: min(56vw, 980px) !important;
  height: 100% !important;
  background: url("../img/grit/grit-hero.webp") center center / cover no-repeat !important;
  opacity: 1 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Gradient veil above image, protecting left text and fading toward full image */
body.redesign-page.grit-partners-page .grit-page-hero::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(
      90deg,
      rgba(246, 222, 209, 0.98) 0%,
      rgba(246, 222, 209, 0.92) 34%,
      rgba(216, 238, 237, 0.56) 58%,
      rgba(216, 238, 237, 0.18) 78%,
      rgba(216, 238, 237, 0.02) 100%
    ) !important;
  opacity: 1 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Hide inline card version now that photo is a hero layer */
body.redesign-page.grit-partners-page .grit-page-hero .col-lg-5 {
  display: none !important;
}

/* Keep text content above image and overlay */
body.redesign-page.grit-partners-page .grit-page-hero .container,
body.redesign-page.grit-partners-page .grit-page-hero .row,
body.redesign-page.grit-partners-page .grit-page-hero .col-lg-7 {
  position: relative !important;
  z-index: 2 !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .col-lg-7 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

@media (max-width: 991px) {
  body.redesign-page.grit-partners-page .grit-page-hero::after {
    width: 100% !important;
    opacity: 0.28 !important;
  }

  body.redesign-page.grit-partners-page .grit-page-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(246, 222, 209, 0.98) 0%,
        rgba(246, 222, 209, 0.9) 48%,
        rgba(216, 238, 237, 0.72) 100%
      ) !important;
  }
}

/* =========================================================
   GRIT PARTNERS — Approach image refinement
   Makes the approach image a smaller elevated circle instead
   of a large rectangular image.
========================================================= */

body.redesign-page.grit-partners-page .grit-page-approach .row {
  align-items: center !important;
}

body.redesign-page.grit-partners-page .grit-page-approach {
  padding-top: clamp(3.2rem, 6vw, 5rem) !important;
  padding-bottom: clamp(3.2rem, 6vw, 5rem) !important;
  background: #fffaf7 !important;
}

body.redesign-page.grit-partners-page .grit-approach-layout {
  max-width: 1240px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  row-gap: clamp(2rem, 5vw, 4rem) !important;
}

body.redesign-page.grit-partners-page .grit-approach-heading {
  max-width: 720px !important;
  margin-bottom: clamp(1rem, 2vw, 1.45rem) !important;
}

body.redesign-page.grit-partners-page .grit-approach-heading h2 {
  max-width: 13.5ch !important;
  font-size: clamp(2rem, 3vw, 3.35rem) !important;
  line-height: 1.12 !important;
}

body.redesign-page.grit-partners-page .grit-page-approach .grit-lede {
  max-width: 46rem !important;
  color: rgba(21, 56, 63, 0.8) !important;
  font-size: clamp(1.16rem, 0.6vw + 1rem, 1.38rem) !important;
  line-height: 1.65 !important;
}

body.redesign-page.grit-partners-page .grit-approach-photo {
  position: relative !important;
  width: min(100%, 34rem) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
}

body.redesign-page.grit-partners-page .grit-approach-photo::before {
  display: none !important;
  content: none !important;
}

body.redesign-page.grit-partners-page .grit-approach-photo-frame {
  position: relative !important;
  z-index: 1 !important;
  width: clamp(22rem, 30vw, 31rem) !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto !important;
  padding: 0.45rem !important;
  border: 1px solid rgba(222, 196, 186, 0.82) !important;
  border-radius: 50% !important;
  background: #fffaf7 !important;
  box-shadow:
    0 24px 60px rgba(21, 56, 63, 0.12),
    0 8px 22px rgba(180, 106, 70, 0.07) !important;
  overflow: hidden !important;
}

body.redesign-page.grit-partners-page .grit-approach-photo-frame::after {
  content: "" !important;
  position: absolute !important;
  inset: 0.42rem !important;
  border: 1px solid rgba(255, 250, 247, 0.86) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

body.redesign-page.grit-partners-page .grit-approach-photo-frame img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center 42% !important;
}

body.redesign-page.grit-partners-page .grit-approach-photo figcaption {
  position: relative !important;
  z-index: 1 !important;
  max-width: 24rem !important;
  margin: 1.1rem auto 0 !important;
  color: rgba(21, 56, 63, 0.74) !important;
  font-size: 0.95rem !important;
  line-height: 1.48 !important;
}

@media (min-width: 1200px) {
  body.redesign-page.grit-partners-page .grit-approach-photo {
    transform: translate(-2rem, -1rem);
  }

  body.redesign-page.grit-partners-page .grit-approach-photo-frame {
    width: clamp(24rem, 31vw, 32rem) !important;
  }
}

@media (max-width: 991px) {
  body.redesign-page.grit-partners-page .grit-approach-photo {
    width: min(100%, 25rem) !important;
    margin: 2rem auto 0 !important;
    transform: none !important;
  }

  body.redesign-page.grit-partners-page .grit-approach-photo-frame {
    width: clamp(17rem, 72vw, 24rem) !important;
  }
}

/* =========================================================
   GRIT PARTNERS — Solutions pathway refinement
   Keeps the services section cooler, lighter, and easier to scan.
========================================================= */

body.redesign-page.grit-partners-page .grit-page-solutions {
  background:
    linear-gradient(180deg, rgba(216, 238, 237, 0.62) 0%, rgba(255, 250, 247, 0.96) 100%) !important;
}

body.redesign-page.grit-partners-page .grit-page-solutions .grit-section-heading {
  max-width: 860px;
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}

body.redesign-page.grit-partners-page .grit-page-solutions .grit-section-heading h2 {
  max-width: 14.5ch;
  margin-right: auto;
  margin-left: auto;
}

body.redesign-page.grit-partners-page .grit-solutions-intro {
  max-width: 48rem;
  margin: clamp(0.9rem, 2vw, 1.2rem) auto 0;
  color: rgba(21, 56, 63, 0.74);
  font-family: var(--default-font);
  font-size: clamp(1rem, 0.4vw + 0.92rem, 1.16rem);
  line-height: 1.65;
}

body.redesign-page.grit-partners-page .grit-solutions-grid {
  align-items: stretch;
}

body.redesign-page.grit-partners-page .grit-page-solutions .grit-solution-card {
  padding: clamp(1.3rem, 2.2vw, 1.85rem);
  border: 1px solid rgba(108, 146, 150, 0.24);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 42px rgba(21, 56, 63, 0.09);
}

body.redesign-page.grit-partners-page .grit-page-solutions .grit-solution-card:hover {
  border-color: rgba(108, 146, 150, 0.38);
  box-shadow: 0 22px 52px rgba(21, 56, 63, 0.12);
}

body.redesign-page.grit-partners-page .grit-page-solutions .grit-card-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 1.05rem;
  border: 1px solid rgba(108, 146, 150, 0.24);
  background: rgba(216, 238, 237, 0.78);
  color: #6C9296;
  font-size: 1.28rem;
}

body.redesign-page.grit-partners-page .grit-page-solutions .grit-solution-card h3 {
  margin-bottom: 0.65rem;
  color: #15383f;
  font-size: clamp(1.16rem, 0.45vw + 1.02rem, 1.36rem);
}

body.redesign-page.grit-partners-page .grit-page-solutions .grit-solution-card p {
  margin: 0;
  color: rgba(21, 56, 63, 0.76);
  font-size: 0.98rem;
  line-height: 1.62;
}

body.redesign-page.grit-partners-page .grit-page-solutions .grit-focus-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.05rem 0 1.35rem;
  padding: 0;
  list-style: none;
}

body.redesign-page.grit-partners-page .grit-page-solutions .grit-focus-list li {
  padding: 0.42rem 0.62rem;
  border: 1px solid rgba(108, 146, 150, 0.22);
  border-radius: 999px;
  background: rgba(216, 238, 237, 0.5);
  color: rgba(21, 56, 63, 0.82);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}

body.redesign-page.grit-partners-page .grit-page-solutions .grit-solution-card a {
  color: #6C9296 !important;
}

body.redesign-page.grit-partners-page .grit-page-solutions .grit-solution-card a:hover,
body.redesign-page.grit-partners-page .grit-page-solutions .grit-solution-card a:focus-visible {
  color: #6C9296 !important;
}

@media (max-width: 991px) {
  body.redesign-page.grit-partners-page .grit-page-solutions .grit-section-heading h2 {
    max-width: 100%;
  }
}

/* =========================================================
   GRIT PARTNERS — Final BrandBook color system cleanup
   Replaces mixed gradients with clear section color fields.
========================================================= */

body.redesign-page.grit-partners-page {
  background: #fffaf7 !important;
  color: #15383f !important;
}

body.redesign-page.grit-partners-page .grit-page-hero {
  background: #D8EEED !important;
}

body.redesign-page.grit-partners-page .grit-page-hero::before {
  background:
    linear-gradient(90deg, rgba(246, 222, 209, 0.68) 0%, rgba(216, 238, 237, 0.36) 58%, rgba(255, 250, 247, 0.2) 100%) !important;
}

body.redesign-page.grit-partners-page .grit-page-hero::after {
  background: rgba(255, 250, 247, 0.1) !important;
}

body.redesign-page.grit-partners-page .grit-page-approach {
  background: #fffaf7 !important;
}

body.redesign-page.grit-partners-page .grit-page-solutions {
  background: #D8EEED !important;
}

body.redesign-page.grit-partners-page .grit-page-expect,
body.redesign-page.grit-partners-page .grit-testimonials-section {
  background: #D8EEED !important;
  color: #15383f !important;
}

body.redesign-page.grit-partners-page .grit-testimonials-panel {
  color: #15383f !important;
}

body.redesign-page.grit-partners-page .grit-testimonials-heading h2,
body.redesign-page.grit-partners-page .grit-page-expect h2 {
  color: #15383f !important;
}

body.redesign-page.grit-partners-page .grit-page-expect .grit-eyebrow,
body.redesign-page.grit-partners-page .grit-testimonials-heading .grit-eyebrow {
  color: #B46A46 !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-slide {
  border: 1px solid rgba(108, 146, 150, 0.24) !important;
  background: rgba(255, 250, 247, 0.94) !important;
  box-shadow: 0 20px 48px rgba(21, 56, 63, 0.1) !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-slide p {
  color: rgba(21, 56, 63, 0.82) !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-slide footer {
  color: #6C9296 !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-slide footer span {
  color: rgba(21, 56, 63, 0.62) !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-prev,
body.redesign-page.grit-partners-page .grit-testimonial-next,
body.redesign-page.grit-partners-page .grit-testimonial-dot {
  border-color: rgba(108, 146, 150, 0.34) !important;
  background: rgba(255, 250, 247, 0.72) !important;
  color: #15383f !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-prev:hover,
body.redesign-page.grit-partners-page .grit-testimonial-next:hover,
body.redesign-page.grit-partners-page .grit-testimonial-prev:focus-visible,
body.redesign-page.grit-partners-page .grit-testimonial-next:focus-visible {
  background: #6C9296 !important;
  border-color: #6C9296 !important;
  color: #ffffff !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-dot.is-active {
  background: #6C9296 !important;
  border-color: #6C9296 !important;
}

body.redesign-page.grit-partners-page .grit-page-founder {
  background: #ffffff !important;
  color: #15383f !important;
}

body.redesign-page.grit-partners-page .grit-page-founder h2 {
  color: #15383f !important;
}

body.redesign-page.grit-partners-page .grit-page-founder p {
  color: rgba(21, 56, 63, 0.78) !important;
}

body.redesign-page.grit-partners-page .grit-page-founder .grit-collaborators {
  border-top-color: rgba(222, 196, 186, 0.72) !important;
}

body.redesign-page.grit-partners-page .grit-page-founder .grit-founder-image {
  border-color: rgba(222, 196, 186, 0.76) !important;
  background: #fffaf7 !important;
  box-shadow: 0 22px 54px rgba(21, 56, 63, 0.12) !important;
}

body.redesign-page.grit-partners-page .grit-page-cta {
  background: #fffaf7 !important;
}

body.redesign-page.grit-partners-page .grit-final-cta {
  background: #6C9296 !important;
  border: 1px solid rgba(216, 238, 237, 0.42) !important;
  color: #ffffff !important;
  box-shadow: 0 22px 52px rgba(21, 56, 63, 0.16) !important;
}

body.redesign-page.grit-partners-page .grit-final-cta .grit-eyebrow {
  color: #F6DED1 !important;
}

body.redesign-page.grit-partners-page .grit-final-cta h2,
body.redesign-page.grit-partners-page .grit-final-cta p {
  color: #ffffff !important;
}

body.redesign-page.grit-partners-page .grit-final-cta .grit-btn-primary {
  background: #F6DED1 !important;
  border-color: #F6DED1 !important;
  color: #15383f !important;
  box-shadow: 0 14px 30px rgba(21, 56, 63, 0.16) !important;
}

body.redesign-page.grit-partners-page .grit-final-cta .grit-btn-primary:hover,
body.redesign-page.grit-partners-page .grit-final-cta .grit-btn-primary:focus-visible {
  background: #B46A46 !important;
  border-color: #B46A46 !important;
  color: #ffffff !important;
}

body.redesign-page.grit-partners-page .grit-final-cta .grit-btn-secondary {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  color: #ffffff !important;
}

body.redesign-page.grit-partners-page .grit-final-cta .grit-btn-secondary:hover,
body.redesign-page.grit-partners-page .grit-final-cta .grit-btn-secondary:focus-visible {
  background: #D8EEED !important;
  border-color: #D8EEED !important;
  color: #15383f !important;
}

/* =========================================================
   GRIT PARTNERS — Hero solid background and image repair
   Restores the inline hero image and removes competing overlays.
========================================================= */

body.redesign-page.grit-partners-page .grit-page-hero {
  position: relative !important;
  overflow: hidden !important;
  background: #D8EEED !important;
  color: #15383f !important;
}

body.redesign-page.grit-partners-page .grit-page-hero::before,
body.redesign-page.grit-partners-page .grit-page-hero::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .container,
body.redesign-page.grit-partners-page .grit-page-hero .row,
body.redesign-page.grit-partners-page .grit-page-hero .col-lg-7,
body.redesign-page.grit-partners-page .grit-page-hero .col-lg-5 {
  position: relative !important;
  z-index: 1 !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .row {
  align-items: center !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .col-lg-7 {
  display: block !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .col-lg-5 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.redesign-page.grit-partners-page .grit-page-hero h1 {
  color: #15383f !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-eyebrow {
  color: #B46A46 !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-hero-copy,
body.redesign-page.grit-partners-page .grit-page-hero .grit-hero-subcopy {
  max-width: 44rem !important;
  color: rgba(21, 56, 63, 0.84) !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-actions {
  max-width: none !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-hero-image {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 2 !important;
  width: min(100%, 29rem) !important;
  max-width: none !important;
  margin: 0 0 0 auto !important;
  border: 1px solid rgba(222, 196, 186, 0.82) !important;
  border-radius: 1.15rem !important;
  background: #fffaf7 !important;
  box-shadow: 0 24px 58px rgba(21, 56, 63, 0.14) !important;
  overflow: hidden !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-hero-image img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-btn-primary {
  background: #6C9296 !important;
  border-color: #6C9296 !important;
  color: #ffffff !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-btn-primary:hover,
body.redesign-page.grit-partners-page .grit-page-hero .grit-btn-primary:focus-visible {
  background: #B46A46 !important;
  border-color: #B46A46 !important;
  color: #ffffff !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-btn-secondary {
  background: rgba(255, 250, 247, 0.62) !important;
  border-color: rgba(21, 56, 63, 0.28) !important;
  color: #15383f !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-btn-secondary:hover,
body.redesign-page.grit-partners-page .grit-page-hero .grit-btn-secondary:focus-visible {
  background: #fffaf7 !important;
  border-color: #6C9296 !important;
  color: #15383f !important;
}

@media (min-width: 992px) {
  body.redesign-page.grit-partners-page .grit-page-hero .col-lg-7 {
    flex: 0 0 auto !important;
    width: 58.33333333% !important;
    max-width: 58.33333333% !important;
  }

  body.redesign-page.grit-partners-page .grit-page-hero .col-lg-5 {
    flex: 0 0 auto !important;
    width: 41.66666667% !important;
    max-width: 41.66666667% !important;
  }
}

@media (max-width: 991px) {
  body.redesign-page.grit-partners-page .grit-page-hero {
    background: #D8EEED !important;
    padding-bottom: clamp(4rem, 10vw, 6rem) !important;
  }

  body.redesign-page.grit-partners-page .grit-page-hero .col-lg-7,
  body.redesign-page.grit-partners-page .grit-page-hero .col-lg-5 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  body.redesign-page.grit-partners-page .grit-page-hero .grit-hero-image {
    width: min(100%, 22rem) !important;
    margin: 1.4rem auto 0 !important;
  }
}

/* =========================================================
   GRIT PARTNERS — Hero DEC4BA background image treatment
   Uses the hero image as a right-side background, with a
   single-color BrandBook wash protecting the text.
========================================================= */

body.redesign-page.grit-partners-page .grit-page-hero {
  position: relative !important;
  min-height: clamp(38rem, 74vh, 48rem) !important;
  padding-top: clamp(7rem, 12vh, 8.5rem) !important;
  padding-bottom: clamp(4.5rem, 8vh, 6rem) !important;
  overflow: hidden !important;
  background:
    linear-gradient(
      90deg,
      rgba(222, 196, 186, 0.96) 0%,
      rgba(222, 196, 186, 0.88) 34%,
      rgba(222, 196, 186, 0.54) 58%,
      rgba(222, 196, 186, 0.18) 78%,
      rgba(222, 196, 186, 0.02) 100%
    ),
    url("../img/grit/grit-hero.webp") right center / cover no-repeat !important;
  color: #15383f !important;
}

body.redesign-page.grit-partners-page .grit-page-hero::before,
body.redesign-page.grit-partners-page .grit-page-hero::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .container,
body.redesign-page.grit-partners-page .grit-page-hero .row,
body.redesign-page.grit-partners-page .grit-page-hero .col-lg-7 {
  position: relative !important;
  z-index: 2 !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .row {
  min-height: 0 !important;
  align-items: center !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .col-lg-5,
body.redesign-page.grit-partners-page .grit-page-hero .grit-hero-image {
  display: none !important;
  visibility: hidden !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .col-lg-7 {
  display: block !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.redesign-page.grit-partners-page .grit-page-hero h1 {
  max-width: 12ch !important;
  color: #15383f !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-eyebrow {
  color: #B46A46 !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-hero-copy,
body.redesign-page.grit-partners-page .grit-page-hero .grit-hero-subcopy {
  max-width: 42rem !important;
  color: rgba(21, 56, 63, 0.86) !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-actions {
  max-width: 42rem !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-btn-primary {
  background: #B46A46 !important;
  border-color: #B46A46 !important;
  color: #ffffff !important;
  box-shadow: 0 14px 32px rgba(180, 106, 70, 0.22) !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-btn-primary:hover,
body.redesign-page.grit-partners-page .grit-page-hero .grit-btn-primary:focus-visible {
  background: #8f4d35 !important;
  border-color: #8f4d35 !important;
  color: #ffffff !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-btn-secondary {
  background: rgba(255, 250, 247, 0.54) !important;
  border-color: rgba(21, 56, 63, 0.3) !important;
  color: #15383f !important;
  box-shadow: none !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-btn-secondary:hover,
body.redesign-page.grit-partners-page .grit-page-hero .grit-btn-secondary:focus-visible {
  background: rgba(255, 250, 247, 0.78) !important;
  border-color: #B46A46 !important;
  color: #B46A46 !important;
}

@media (min-width: 1400px) {
  body.redesign-page.grit-partners-page .grit-page-hero {
    min-height: clamp(39rem, 72vh, 50rem) !important;
    background:
      linear-gradient(
        90deg,
        rgba(222, 196, 186, 0.96) 0%,
        rgba(222, 196, 186, 0.86) 31%,
        rgba(222, 196, 186, 0.46) 55%,
        rgba(222, 196, 186, 0.12) 75%,
        rgba(222, 196, 186, 0) 100%
      ),
      url("../img/grit/grit-hero.webp") right center / cover no-repeat !important;
  }
}

@media (max-width: 991px) {
  body.redesign-page.grit-partners-page .grit-page-hero {
    min-height: auto !important;
    padding-top: clamp(6.5rem, 15vw, 8rem) !important;
    padding-bottom: clamp(4rem, 12vw, 6rem) !important;
    background:
      linear-gradient(
        180deg,
        rgba(222, 196, 186, 0.96) 0%,
        rgba(222, 196, 186, 0.9) 54%,
        rgba(222, 196, 186, 0.58) 100%
      ),
      url("../img/grit/grit-hero.webp") center center / cover no-repeat !important;
  }
}

/* =========================================================
   GRIT PARTNERS — FINAL HERO TERMINAL PATCH
   Purpose:
   - restore grit hero image as background
   - remove green/mist overlay
   - use #DEC4BA wash fading to transparent
   - hide inline image card
========================================================= */

body.redesign-page.grit-partners-page .grit-page-hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  background-color: #DEC4BA !important;
  background-image:
    linear-gradient(
      90deg,
      rgba(222, 196, 186, 0.98) 0%,
      rgba(222, 196, 186, 0.94) 34%,
      rgba(222, 196, 186, 0.76) 52%,
      rgba(222, 196, 186, 0.36) 68%,
      rgba(222, 196, 186, 0.08) 82%,
      rgba(222, 196, 186, 0.00) 100%
    ),
    url("../img/grit/grit-hero.webp") !important;
  background-size: cover, cover !important;
  background-position: left center, right center !important;
  background-repeat: no-repeat, no-repeat !important;

  min-height: 74vh !important;
  padding-top: clamp(6rem, 9vw, 8rem) !important;
  padding-bottom: clamp(4rem, 7vw, 6rem) !important;
}

/* Kill previous green/mist pseudo-layer experiments in the hero only */
body.redesign-page.grit-partners-page .grit-page-hero::before,
body.redesign-page.grit-partners-page .grit-page-hero::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* Hide the inline hero image/card because the image is now the background */
body.redesign-page.grit-partners-page .grit-page-hero .col-lg-5,
body.redesign-page.grit-partners-page .grit-page-hero .grit-hero-image {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Let the text column occupy the hero without fighting the hidden image column */
body.redesign-page.grit-partners-page .grit-page-hero .col-lg-7 {
  flex: 0 0 58% !important;
  max-width: 58% !important;
  width: 58% !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .container,
body.redesign-page.grit-partners-page .grit-page-hero .row,
body.redesign-page.grit-partners-page .grit-page-hero .col-lg-7 {
  position: relative !important;
  z-index: 2 !important;
}

/* Hero accent and buttons */
body.redesign-page.grit-partners-page .grit-page-hero .redesign-kicker,
body.redesign-page.grit-partners-page .grit-page-hero .section-kicker,
body.redesign-page.grit-partners-page .grit-page-hero .grit-kicker {
  color: #B46A46 !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .redesign-btn,
body.redesign-page.grit-partners-page .grit-page-hero .btn,
body.redesign-page.grit-partners-page .grit-page-hero .grit-actions a:first-child {
  background: #B46A46 !important;
  border-color: #B46A46 !important;
  color: #ffffff !important;
  box-shadow: 0 16px 34px rgba(180, 106, 70, 0.22) !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .redesign-btn:hover,
body.redesign-page.grit-partners-page .grit-page-hero .btn:hover,
body.redesign-page.grit-partners-page .grit-page-hero .grit-actions a:first-child:hover {
  background: #9f563a !important;
  border-color: #9f563a !important;
  color: #ffffff !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-actions a:last-child {
  background: rgba(255, 250, 247, 0.58) !important;
  border-color: rgba(21, 56, 63, 0.28) !important;
  color: #15383f !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-actions a:last-child:hover {
  background: rgba(255, 250, 247, 0.86) !important;
  border-color: #B46A46 !important;
  color: #B46A46 !important;
}

@media (max-width: 991px) {
  body.redesign-page.grit-partners-page .grit-page-hero {
    background-image:
      linear-gradient(
        180deg,
        rgba(222, 196, 186, 0.98) 0%,
        rgba(222, 196, 186, 0.92) 58%,
        rgba(222, 196, 186, 0.62) 100%
      ),
      url("../img/grit/grit-hero.webp") !important;
    background-size: cover, cover !important;
    background-position: center top, center bottom !important;
    min-height: auto !important;
    padding-top: clamp(6rem, 18vw, 8rem) !important;
    padding-bottom: clamp(5rem, 20vw, 8rem) !important;
  }

  body.redesign-page.grit-partners-page .grit-page-hero .col-lg-7 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* =========================================================
   GRIT PARTNERS — Real hero image layer final fix
   Uses an actual image element as the hero background so prior
   background-image conflicts cannot hide it. No green allowed.
========================================================= */

body.redesign-page.grit-partners-page .grit-page-hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: #DEC4BA !important;
  background-color: #DEC4BA !important;
  background-image: none !important;
  min-height: 72vh !important;
  padding-top: clamp(6rem, 8vw, 7.5rem) !important;
  padding-bottom: clamp(4rem, 6vw, 5.5rem) !important;
}

/* Remove all old pseudo-element hero experiments */
body.redesign-page.grit-partners-page .grit-page-hero::before,
body.redesign-page.grit-partners-page .grit-page-hero::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

/* Actual right-side background image layer */
body.redesign-page.grit-partners-page .grit-hero-bg-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

body.redesign-page.grit-partners-page .grit-hero-bg-layer img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: right center !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Single-color #DEC4BA veil only. No green, no aqua, no mixed gradient. */
body.redesign-page.grit-partners-page .grit-hero-bg-layer::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      90deg,
      rgba(222, 196, 186, 1) 0%,
      rgba(222, 196, 186, 1) 48%,
      rgba(222, 196, 186, 0.96) 58%,
      rgba(222, 196, 186, 0.78) 70%,
      rgba(222, 196, 186, 0.38) 86%,
      rgba(222, 196, 186, 0.00) 100%
    ) !important;
}

/* Hide the old inline/card image column */
body.redesign-page.grit-partners-page .grit-page-hero .col-lg-5,
body.redesign-page.grit-partners-page .grit-page-hero .grit-hero-image {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Keep hero content above the image layer */
body.redesign-page.grit-partners-page .grit-page-hero .container,
body.redesign-page.grit-partners-page .grit-page-hero .row,
body.redesign-page.grit-partners-page .grit-page-hero .col-lg-7,
body.redesign-page.grit-partners-page .grit-page-hero .grit-hero-content {
  position: relative !important;
  z-index: 2 !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .col-lg-7 {
  flex: 0 0 58% !important;
  max-width: 58% !important;
  width: 58% !important;
}

/* Hero accent and buttons */
body.redesign-page.grit-partners-page .grit-page-hero .redesign-kicker,
body.redesign-page.grit-partners-page .grit-page-hero .section-kicker,
body.redesign-page.grit-partners-page .grit-page-hero .grit-kicker {
  color: #B46A46 !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-actions a:first-child {
  background: #B46A46 !important;
  border-color: #B46A46 !important;
  color: #ffffff !important;
  box-shadow: 0 16px 34px rgba(180, 106, 70, 0.24) !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-actions a:first-child:hover {
  background: #9f563a !important;
  border-color: #9f563a !important;
  color: #ffffff !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-actions a:last-child {
  background: rgba(255, 250, 247, 0.66) !important;
  border-color: rgba(21, 56, 63, 0.28) !important;
  color: #15383f !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-actions a:last-child:hover {
  background: rgba(255, 250, 247, 0.92) !important;
  border-color: #B46A46 !important;
  color: #B46A46 !important;
}

@media (max-width: 991px) {
  body.redesign-page.grit-partners-page .grit-page-hero {
    min-height: auto !important;
    padding-top: clamp(6rem, 18vw, 8rem) !important;
    padding-bottom: clamp(5rem, 18vw, 7rem) !important;
  }

  body.redesign-page.grit-partners-page .grit-hero-bg-layer img {
    object-position: center bottom !important;
    opacity: 0.5 !important;
  }

  body.redesign-page.grit-partners-page .grit-hero-bg-layer::after {
    background:
      linear-gradient(
        180deg,
        rgba(222, 196, 186, 0.98) 0%,
        rgba(222, 196, 186, 0.94) 58%,
        rgba(222, 196, 186, 0.72) 100%
      ) !important;
  }

  body.redesign-page.grit-partners-page .grit-page-hero .col-lg-7 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* =========================================================
   GRIT PARTNERS — Solutions eyebrow color
   Replaces the gold eyebrow in the cool solutions section
   with a warmer BrandBook copper for better harmony.
========================================================= */

body.redesign-page.grit-partners-page .grit-solutions .redesign-kicker,
body.redesign-page.grit-partners-page .grit-page-solutions .redesign-kicker,
body.redesign-page.grit-partners-page .solutions .redesign-kicker,
body.redesign-page.grit-partners-page .grit-solutions .section-kicker,
body.redesign-page.grit-partners-page .grit-page-solutions .section-kicker,
body.redesign-page.grit-partners-page .solutions .section-kicker {
  color: #B46A46 !important;
}

/* =========================================================
   GRIT PARTNERS — Final solutions eyebrow color override
   Targets the actual solutions eyebrow after earlier color
   rules failed to win.
========================================================= */

body.redesign-page.grit-partners-page .grit-page-solutions .redesign-kicker,
body.redesign-page.grit-partners-page .grit-page-solutions .section-kicker,
body.redesign-page.grit-partners-page .grit-page-solutions .grit-kicker,
body.redesign-page.grit-partners-page .grit-page-solutions .kicker,
body.redesign-page.grit-partners-page section.grit-page-solutions .redesign-kicker,
body.redesign-page.grit-partners-page section.grit-page-solutions .section-kicker,
body.redesign-page.grit-partners-page section.grit-page-solutions .grit-kicker,
body.redesign-page.grit-partners-page section.grit-page-solutions .kicker {
  color: #B46A46 !important;
}

/* =========================================================
   GRIT PARTNERS — Testimonials darker green section
   Creates a stronger visual break after the pale solutions
   section using a deeper shade derived from BrandBook teal.
========================================================= */

body.redesign-page.grit-partners-page .grit-testimonials-section {
  background: #426E72 !important;
  color: #ffffff !important;
}

body.redesign-page.grit-partners-page .grit-testimonials-section .redesign-kicker,
body.redesign-page.grit-partners-page .grit-testimonials-section .section-kicker,
body.redesign-page.grit-partners-page .grit-testimonials-section .grit-eyebrow {
  color: #F6DED1 !important;
}

body.redesign-page.grit-partners-page .grit-testimonials-section h2,
body.redesign-page.grit-partners-page .grit-testimonials-heading h2 {
  color: #ffffff !important;
}

body.redesign-page.grit-partners-page .grit-testimonials-panel,
body.redesign-page.grit-partners-page .grit-testimonial-slide {
  background: rgba(255, 250, 247, 0.94) !important;
  border-color: rgba(246, 222, 209, 0.42) !important;
  color: #15383f !important;
  box-shadow: 0 22px 60px rgba(21, 56, 63, 0.22) !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-slide p {
  color: rgba(21, 56, 63, 0.84) !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-slide footer,
body.redesign-page.grit-partners-page .grit-testimonial-slide strong {
  color: #B46A46 !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-controls button,
body.redesign-page.grit-partners-page .grit-testimonials-section .swiper-button-prev,
body.redesign-page.grit-partners-page .grit-testimonials-section .swiper-button-next {
  border-color: rgba(246, 222, 209, 0.58) !important;
  color: #ffffff !important;
  background: rgba(255, 250, 247, 0.12) !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-controls button:hover,
body.redesign-page.grit-partners-page .grit-testimonials-section .swiper-button-prev:hover,
body.redesign-page.grit-partners-page .grit-testimonials-section .swiper-button-next:hover {
  background: rgba(246, 222, 209, 0.22) !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-dots button,
body.redesign-page.grit-partners-page .grit-testimonials-section .swiper-pagination-bullet {
  background: rgba(246, 222, 209, 0.45) !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-dots button.is-active,
body.redesign-page.grit-partners-page .grit-testimonials-section .swiper-pagination-bullet-active {
  background: #F6DED1 !important;
}

/* =========================================================
   GRIT PARTNERS — Testimonials content repair
   Keeps the darker green section background while removing
   the washed-out middle panel and restoring readable content.
========================================================= */

body.redesign-page.grit-partners-page .grit-testimonials-section {
  background: #426E72 !important;
  color: #F6DED1 !important;
}

/* Remove pale overlay/panel effects that washed out the middle */
body.redesign-page.grit-partners-page .grit-testimonials-section::before,
body.redesign-page.grit-partners-page .grit-testimonials-section::after,
body.redesign-page.grit-partners-page .grit-testimonials-section .container::before,
body.redesign-page.grit-partners-page .grit-testimonials-section .container::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* Keep the layout clean without an oversized pale box */
body.redesign-page.grit-partners-page .grit-testimonials-section .container {
  background: transparent !important;
  box-shadow: none !important;
}

body.redesign-page.grit-partners-page .grit-testimonials-heading,
body.redesign-page.grit-partners-page .grit-testimonials-copy {
  color: #F6DED1 !important;
}

/* Left-side eyebrow and headline */
body.redesign-page.grit-partners-page .grit-testimonials-section .redesign-kicker,
body.redesign-page.grit-partners-page .grit-testimonials-section .section-kicker,
body.redesign-page.grit-partners-page .grit-testimonials-section .grit-eyebrow {
  color: #DEC4BA !important;
}

body.redesign-page.grit-partners-page .grit-testimonials-section h2,
body.redesign-page.grit-partners-page .grit-testimonials-heading h2 {
  color: #F6DED1 !important;
}

/* Testimonial card stays readable and warm */
body.redesign-page.grit-partners-page .grit-testimonials-panel,
body.redesign-page.grit-partners-page .grit-testimonial-slide,
body.redesign-page.grit-partners-page .grit-testimonial-card {
  background: #FFFAF7 !important;
  border: 1px solid rgba(246, 222, 209, 0.42) !important;
  color: #15383f !important;
  box-shadow: 0 24px 70px rgba(21, 56, 63, 0.28) !important;
}

body.redesign-page.grit-partners-page .grit-testimonials-panel p,
body.redesign-page.grit-partners-page .grit-testimonial-slide p,
body.redesign-page.grit-partners-page .grit-testimonial-card p {
  color: rgba(21, 56, 63, 0.86) !important;
}

body.redesign-page.grit-partners-page .grit-testimonials-panel strong,
body.redesign-page.grit-partners-page .grit-testimonial-slide strong,
body.redesign-page.grit-partners-page .grit-testimonial-card strong {
  color: #B46A46 !important;
}

body.redesign-page.grit-partners-page .grit-testimonials-panel footer,
body.redesign-page.grit-partners-page .grit-testimonial-slide footer,
body.redesign-page.grit-partners-page .grit-testimonial-card footer {
  color: rgba(21, 56, 63, 0.72) !important;
}

/* Controls and dots */
body.redesign-page.grit-partners-page .grit-testimonial-controls button {
  color: #F6DED1 !important;
  border-color: rgba(246, 222, 209, 0.55) !important;
  background: rgba(255, 250, 247, 0.1) !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-controls button:hover {
  color: #15383f !important;
  background: #F6DED1 !important;
  border-color: #F6DED1 !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-dots button {
  background: rgba(246, 222, 209, 0.35) !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-dots button.is-active {
  background: #F6DED1 !important;
}

/* =========================================================
   GRIT PARTNERS — Testimonials inner section color repair
   Makes the inner testimonial area match the green background
   and restores readable warm-white heading text.
========================================================= */

body.redesign-page.grit-partners-page .grit-testimonials-section,
body.redesign-page.grit-partners-page .grit-testimonials-section .container,
body.redesign-page.grit-partners-page .grit-testimonials-inner,
body.redesign-page.grit-partners-page .grit-testimonials-wrap,
body.redesign-page.grit-partners-page .grit-testimonials-grid {
  background: #426E72 !important;
  background-color: #426E72 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Remove pale middle panel/veil effects */
body.redesign-page.grit-partners-page .grit-testimonials-section::before,
body.redesign-page.grit-partners-page .grit-testimonials-section::after,
body.redesign-page.grit-partners-page .grit-testimonials-section .container::before,
body.redesign-page.grit-partners-page .grit-testimonials-section .container::after,
body.redesign-page.grit-partners-page .grit-testimonials-inner::before,
body.redesign-page.grit-partners-page .grit-testimonials-inner::after,
body.redesign-page.grit-partners-page .grit-testimonials-wrap::before,
body.redesign-page.grit-partners-page .grit-testimonials-wrap::after,
body.redesign-page.grit-partners-page .grit-testimonials-grid::before,
body.redesign-page.grit-partners-page .grit-testimonials-grid::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

/* Left-side testimonial intro */
body.redesign-page.grit-partners-page .grit-testimonials-section .redesign-kicker,
body.redesign-page.grit-partners-page .grit-testimonials-section .section-kicker,
body.redesign-page.grit-partners-page .grit-testimonials-section .grit-eyebrow {
  color: #F6DED1 !important;
}

body.redesign-page.grit-partners-page .grit-testimonials-section h2,
body.redesign-page.grit-partners-page .grit-testimonials-heading h2 {
  color: #F6DED1 !important;
  opacity: 1 !important;
}

/* Keep quote card readable */
body.redesign-page.grit-partners-page .grit-testimonials-panel,
body.redesign-page.grit-partners-page .grit-testimonial-slide,
body.redesign-page.grit-partners-page .grit-testimonial-card {
  background: #FFFAF7 !important;
  color: #15383f !important;
  border-color: rgba(246, 222, 209, 0.42) !important;
}

/* Slider controls visible on green */
body.redesign-page.grit-partners-page .grit-testimonial-controls button {
  color: #F6DED1 !important;
  border-color: rgba(246, 222, 209, 0.58) !important;
  background: rgba(255, 250, 247, 0.08) !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-dots button {
  background: rgba(246, 222, 209, 0.38) !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-dots button.is-active {
  background: #F6DED1 !important;
}

/* =========================================================
   GRIT PARTNERS — Testimonials panel direct fix
   The pale middle box is .grit-testimonials-panel. Make it
   part of the green section while keeping quote cards readable.
========================================================= */

body.redesign-page.grit-partners-page .grit-testimonials-section {
  background: #426E72 !important;
  background-color: #426E72 !important;
  background-image: none !important;
}

/* This is the pale rectangle currently causing the issue */
body.redesign-page.grit-partners-page .grit-testimonials-panel {
  background: #426E72 !important;
  background-color: #426E72 !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Remove any decorative panel overlays */
body.redesign-page.grit-partners-page .grit-testimonials-panel::before,
body.redesign-page.grit-partners-page .grit-testimonials-panel::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* Left text on the green field */
body.redesign-page.grit-partners-page .grit-testimonials-heading .grit-eyebrow {
  color: #DEC4BA !important;
}

body.redesign-page.grit-partners-page .grit-testimonials-heading h2 {
  color: #F6DED1 !important;
  opacity: 1 !important;
}

/* Keep actual testimonial slide/card readable */
body.redesign-page.grit-partners-page .grit-testimonial-slide {
  background: #FFFAF7 !important;
  color: #15383f !important;
  border: 1px solid rgba(246, 222, 209, 0.45) !important;
  box-shadow: 0 24px 70px rgba(21, 56, 63, 0.28) !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-slide p {
  color: rgba(21, 56, 63, 0.86) !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-slide footer {
  color: #B46A46 !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-slide footer span {
  color: rgba(21, 56, 63, 0.68) !important;
}

/* Controls visible against green */
body.redesign-page.grit-partners-page .grit-testimonial-prev,
body.redesign-page.grit-partners-page .grit-testimonial-next {
  color: #F6DED1 !important;
  border-color: rgba(246, 222, 209, 0.55) !important;
  background: rgba(255, 250, 247, 0.08) !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-prev:hover,
body.redesign-page.grit-partners-page .grit-testimonial-next:hover {
  color: #15383f !important;
  background: #F6DED1 !important;
  border-color: #F6DED1 !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-dot {
  background: rgba(246, 222, 209, 0.35) !important;
  border-color: rgba(246, 222, 209, 0.35) !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-dot.is-active {
  background: #F6DED1 !important;
  border-color: #F6DED1 !important;
}

/* =========================================================
   GRIT PARTNERS — Center testimonial controls
   Centers the testimonial arrows and dots under the quote card.
========================================================= */

body.redesign-page.grit-partners-page .grit-testimonial-controls {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

body.redesign-page.grit-partners-page .grit-testimonial-dots {
  justify-content: center !important;
}

/* =========================================================
   FOOTER — Site name color
   Keeps the footer Sahra Noor wordmark readable against the
   dark footer background without changing the header logo.
========================================================= */

body.redesign-page .footer .sitename,
body.redesign-page #footer .sitename {
  color: rgba(255, 255, 255, 0.88) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* =========================================================
   FOOTER — Julius Sans One wordmark
   Applies the Sahra Noor wordmark font in the footer only.
========================================================= */

body.redesign-page .footer .sitename,
body.redesign-page #footer .sitename {
  font-family: "Julius Sans One", var(--default-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0.045em !important;
  text-transform: none !important;
  color: rgba(255, 255, 255, 0.88) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}


/* =========================================================
   HERO — subtitle targeted contrast + compact rhythm
   Added 2026-05-26
   Purpose:
   - target the actual homepage hero subtitle paragraph
   - remove the mobile background panel
   - make the subtitle white with subtle shadow
========================================================= */

body.index-page.redesign-page #hero p {
  max-width: 34rem;
  margin-top: 1.35rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fffaf1;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.003em;
  text-shadow: 0 0.06em 0.18em rgba(5, 20, 24, 0.38);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 767px) {
  body.index-page.redesign-page #hero p {
    max-width: 28rem;
    margin-top: 1.15rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fffaf1;
    font-size: clamp(0.96rem, 4vw, 1.06rem);
    font-weight: 500;
    line-height: 1.22;
    text-shadow: 0 0.06em 0.2em rgba(5, 20, 24, 0.42);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* =========================================================
   HERO — direct subtitle placement refinement
   Added 2026-05-26
   Purpose:
   - target the actual .hero-copy subtitle directly
   - move it down visually without adding a background panel
========================================================= */

body.index-page.redesign-page #hero .hero-copy {
  max-width: 32rem;
  position: relative;
  transform: translateY(0.55rem);
  color: #fffaf1;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.003em;
  text-shadow: 0 0.06em 0.18em rgba(5, 20, 24, 0.38);
}

@media (max-width: 767px) {
  body.index-page.redesign-page #hero .hero-copy {
    max-width: 28rem;
    transform: translateY(0.45rem);
    font-size: clamp(0.96rem, 4vw, 1.06rem);
    line-height: 1.22;
  }
}

/* =========================================================
   EVENTS HERO — video visibility + white title contrast
   Added 2026-05-26
   Purpose:
   - match the homepage hero's clearer video + darker wash direction
   - keep Events title above overlay and readable
   - scope changes to Events page only
========================================================= */

body.events-page .events-hero-rebuilt {
  position: relative;
  overflow: hidden;
}

body.events-page .events-hero-rebuilt .hero-video,
body.events-page .events-hero-rebuilt video {
  opacity: 0.72;
  filter: saturate(1.05) contrast(1.04) brightness(0.92);
}

body.events-page .events-hero-rebuilt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(8, 28, 32, 0.48) 0%,
      rgba(8, 28, 32, 0.32) 38%,
      rgba(8, 28, 32, 0.16) 70%,
      rgba(8, 28, 32, 0.1) 100%
    );
}

body.events-page .events-hero-rebuilt .container,
body.events-page .events-hero-rebuilt .events-hero-copy,
body.events-page .events-hero-rebuilt .events-hero-title {
  position: relative;
  z-index: 2;
}

body.events-page .events-hero-rebuilt .events-hero-title,
body.events-page .events-hero-rebuilt .events-hero-title span {
  color: #fffaf1;
  text-shadow: 0 0.08em 0.28em rgba(5, 20, 24, 0.34);
}

body.events-page .events-hero-rebuilt .events-hero-copy > .redesign-kicker {
  position: relative;
  z-index: 2;
}

@media (max-width: 767px) {
  body.events-page .events-hero-rebuilt .hero-video,
  body.events-page .events-hero-rebuilt video {
    opacity: 0.68;
    filter: saturate(1.04) contrast(1.04) brightness(0.9);
  }

  body.events-page .events-hero-rebuilt::before {
    background:
      linear-gradient(
        180deg,
        rgba(8, 28, 32, 0.44) 0%,
        rgba(8, 28, 32, 0.32) 50%,
        rgba(8, 28, 32, 0.22) 100%
      );
  }
}

/* =========================================================
   EVENTS HERO — subtitle contrast + compact rhythm
   Added 2026-05-26
   Purpose:
   - make Events subtitle harmonize with the white hero title
   - keep it readable over video without adding a text background
========================================================= */

body.events-page .events-hero-rebuilt .events-hero-copy p {
  max-width: 34rem;
  margin-top: 1rem;
  color: #fffaf1;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: 0.003em;
  text-shadow: 0 0.06em 0.2em rgba(5, 20, 24, 0.42);
}

@media (max-width: 767px) {
  body.events-page .events-hero-rebuilt .events-hero-copy p {
    max-width: 28rem;
    margin-top: 0.9rem;
    font-size: clamp(0.96rem, 4vw, 1.06rem);
    line-height: 1.24;
    text-shadow: 0 0.06em 0.22em rgba(5, 20, 24, 0.48);
  }
}

/* =========================================================
   EVENTS — event/location links
   Added 2026-05-26
========================================================= */

body.events-page .event-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.15rem;
}

body.events-page .event-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.58rem 0.9rem;
  border: 1px solid rgba(19, 59, 66, 0.18);
  border-radius: 999px;
  color: #133b42;
  background: rgba(255, 250, 241, 0.62);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

body.events-page .event-links a:hover,
body.events-page .event-links a:focus-visible {
  transform: translateY(-1px);
  background: rgba(255, 250, 241, 0.95);
  border-color: rgba(19, 59, 66, 0.34);
}

@media (max-width: 575px) {
  body.events-page .event-links {
    gap: 0.5rem;
  }

  body.events-page .event-links a {
    width: 100%;
  }
}

/* =========================================================
   EVENTS — mobile hero + balanced date badges
   Added 2026-05-26
   Purpose:
   - hide Events hero book cover on mobile
   - add Events headline line spacing
   - make event date badge compact and visually balanced
========================================================= */

@media (max-width: 767px) {
  body.events-page .events-hero-rebuilt .events-hero-book {
    display: none !important;
  }

  body.events-page .events-hero-rebuilt .events-hero-title-stack {
    gap: 0.72em !important;
  }

  body.events-page .events-hero-rebuilt .events-hero-title-stack span {
    line-height: 1.02 !important;
  }

  body.events-page .event-date {
    position: relative;
    width: 5.85rem;
    min-width: 5.85rem;
    max-width: 5.85rem;
    height: 5.85rem;
    min-height: 5.85rem;
    margin: 0 auto 1rem;
    padding: 0;
    display: block;
    text-align: center;
  }

  body.events-page .event-date span,
  body.events-page .event-date strong,
  body.events-page .event-date em {
    position: absolute;
    left: 50%;
    display: block;
    width: 100%;
    margin: 0;
    text-align: center;
    transform: translateX(-50%);
  }

  body.events-page .event-date span {
    top: 1.05rem;
    font-size: 0.86rem;
    line-height: 1;
    letter-spacing: 0.16em;
  }

  body.events-page .event-date strong {
    top: 1.7rem;
    font-size: clamp(2.08rem, 11vw, 2.44rem);
    line-height: 0.86;
    letter-spacing: -0.04em;
  }

  body.events-page .event-date em {
    bottom: 0.38rem;
    font-size: 0.72rem;
    line-height: 1;
    letter-spacing: 0.16em;
  }
}

@media (max-width: 390px) {
  body.events-page .events-hero-rebuilt .events-hero-title-stack {
    gap: 0.64em !important;
  }

  body.events-page .event-date {
    width: 5.55rem;
    min-width: 5.55rem;
    max-width: 5.55rem;
    height: 5.55rem;
    min-height: 5.55rem;
  }

  body.events-page .event-date span {
    top: 1.02rem;
    font-size: 0.8rem;
  }

  body.events-page .event-date strong {
    top: 1.78rem;
    font-size: clamp(1.95rem, 10.8vw, 2.28rem);
    line-height: 0.86;
  }

  body.events-page .event-date em {
    bottom: 0.56rem;
    font-size: 0.68rem;
  }
}


/* =========================================================
   NAVIGATION — Mobile menu visible panel
   Added 2026-05-26
   Purpose:
   - keep the existing JS hamburger/X behavior
   - convert the verified debug selector into the real mobile menu
   - make links visible above hero/video overlays
========================================================= */

@media (max-width: 1199px) {
  body.mobile-nav-active #header,
  body.mobile-nav-active .header,
  body.redesign-page.mobile-nav-active #header,
  body.redesign-page.mobile-nav-active .header {
    z-index: 10000 !important;
  }

  body.mobile-nav-active .mobile-nav-toggle,
  body.redesign-page.mobile-nav-active .mobile-nav-toggle {
    position: fixed !important;
    top: 0.72rem;
    right: 1rem;
    z-index: 10004 !important;
    color: #fffaf1 !important;
  }

  body.mobile-nav-active #navmenu,
  body.redesign-page.mobile-nav-active #navmenu {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10001 !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: rgba(6, 30, 37, 0.72) !important;
  }

  body.mobile-nav-active #navmenu > ul,
  body.mobile-nav-active #navmenu>ul,
  body.redesign-page.mobile-nav-active #navmenu > ul,
  body.redesign-page.mobile-nav-active #navmenu>ul {
    position: fixed !important;
    top: 4rem !important;
    left: 1rem !important;
    right: 1rem !important;
    bottom: auto !important;
    z-index: 10003 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: calc(100vh - 5rem) !important;
    margin: 0 !important;
    padding: 0.65rem 0 !important;
    overflow-y: auto !important;
    list-style: none !important;
    border: 1px solid rgba(21, 56, 63, 0.14) !important;
    border-radius: 1rem !important;
    background: #fffaf1 !important;
    box-shadow: 0 1.25rem 3rem rgba(5, 20, 24, 0.34) !important;
  }

  body.mobile-nav-active #navmenu > ul > li,
  body.redesign-page.mobile-nav-active #navmenu > ul > li {
    display: block !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    border-bottom: 1px solid rgba(21, 56, 63, 0.08);
  }

  body.mobile-nav-active #navmenu > ul > li:last-child,
  body.redesign-page.mobile-nav-active #navmenu > ul > li:last-child {
    border-bottom: 0;
  }

  body.mobile-nav-active #navmenu > ul > li > a,
  body.mobile-nav-active #navmenu > ul > li > a:focus,
  body.redesign-page.mobile-nav-active #navmenu > ul > li > a,
  body.redesign-page.mobile-nav-active #navmenu > ul > li > a:focus {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 2.85rem !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.82rem 1.1rem !important;
    color: #15383f !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    filter: none !important;
  }

  body.mobile-nav-active #navmenu > ul > li > a:hover,
  body.mobile-nav-active #navmenu > ul > li > a.active,
  body.redesign-page.mobile-nav-active #navmenu > ul > li > a:hover,
  body.redesign-page.mobile-nav-active #navmenu > ul > li > a.active {
    color: #9d715b !important;
    background: rgba(157, 113, 91, 0.08) !important;
  }
}


/* =========================================================
   HOME HERO — mobile video contrast wash
   Added 2026-05-26
   Purpose:
   - restore darker video wash on mobile homepage hero
   - keep white title/subtitle readable without adding text boxes
========================================================= */

@media (max-width: 767px) {
  body.index-page.redesign-page #hero.redesign-hero {
    background-color: #061e25;
  }

  body.index-page.redesign-page #hero.redesign-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(6, 30, 37, 0.62) 0%,
        rgba(6, 30, 37, 0.52) 42%,
        rgba(6, 30, 37, 0.42) 72%,
        rgba(6, 30, 37, 0.34) 100%
      ) !important;
    opacity: 1 !important;
  }

  body.index-page.redesign-page #hero.redesign-hero .hero-bg-video {
    opacity: 0.82 !important;
    filter: saturate(1.04) contrast(1.08) brightness(0.78) !important;
  }

  body.index-page.redesign-page #hero.redesign-hero .container,
  body.index-page.redesign-page #hero.redesign-hero .hero-content,
  body.index-page.redesign-page #hero.redesign-hero .hero-book-title-lockup,
  body.index-page.redesign-page #hero.redesign-hero .hero-copy,
  body.index-page.redesign-page #hero.redesign-hero .cta-group {
    position: relative;
    z-index: 2;
  }

  body.index-page.redesign-page #hero.redesign-hero .hero-book-title-lockup,
  body.index-page.redesign-page #hero.redesign-hero .hero-title-word,
  body.index-page.redesign-page #hero.redesign-hero .hero-title-small,
  body.index-page.redesign-page #hero.redesign-hero .hero-copy {
    color: #fffaf1 !important;
    text-shadow: 0 0.08em 0.3em rgba(5, 20, 24, 0.58);
  }
}

@media (max-width: 390px) {
  body.index-page.redesign-page #hero.redesign-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(6, 30, 37, 0.66) 0%,
        rgba(6, 30, 37, 0.56) 45%,
        rgba(6, 30, 37, 0.44) 100%
      ) !important;
  }

  body.index-page.redesign-page #hero.redesign-hero .hero-bg-video {
    filter: saturate(1.04) contrast(1.08) brightness(0.74) !important;
  }
}

/* =========================================================
   HOME HERO — mobile title spacing + button contrast
   Added 2026-05-26
   Purpose:
   - add breathing room between Salt and Snow on mobile
   - make hero buttons harmonize with darker mobile video wash
========================================================= */

@media (max-width: 767px) {
  body.index-page.redesign-page #hero.redesign-hero .hero-title-snow {
    margin-top: 0.64em;
  }

  body.index-page.redesign-page #hero.redesign-hero .cta-group {
    gap: 0.85rem;
    margin-top: 1.65rem;
  }

  body.index-page.redesign-page #hero.redesign-hero .cta-group .btn,
  body.index-page.redesign-page #hero.redesign-hero .cta-group a {
    box-shadow: 0 0.85rem 1.85rem rgba(5, 20, 24, 0.28);
  }

  body.index-page.redesign-page #hero.redesign-hero .cta-group .btn:first-child,
  body.index-page.redesign-page #hero.redesign-hero .cta-group a:first-child {
    border-color: #fffaf1;
    background: #fffaf1;
    color: #0f3f47;
  }

  body.index-page.redesign-page #hero.redesign-hero .cta-group .btn:last-child,
  body.index-page.redesign-page #hero.redesign-hero .cta-group a:last-child {
    border-color: rgba(255, 250, 241, 0.88);
    background: rgba(255, 250, 241, 0.12);
    color: #fffaf1;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  body.index-page.redesign-page #hero.redesign-hero .cta-group .btn:hover,
  body.index-page.redesign-page #hero.redesign-hero .cta-group .btn:focus-visible,
  body.index-page.redesign-page #hero.redesign-hero .cta-group a:hover,
  body.index-page.redesign-page #hero.redesign-hero .cta-group a:focus-visible {
    transform: translateY(-1px);
  }
}

@media (max-width: 390px) {
  body.index-page.redesign-page #hero.redesign-hero .hero-title-snow {
    margin-top: 0.58em;
  }

  body.index-page.redesign-page #hero.redesign-hero .cta-group {
    margin-top: 1.45rem;
  }
}

/* =========================================================
   HOME HERO — mobile hero-actions button contrast
   Added 2026-05-26
   Purpose:
   - target the actual homepage hero button classes
   - make both CTAs readable on darker mobile video
========================================================= */

@media (max-width: 767px) {
  body.index-page.redesign-page #hero.redesign-hero .hero-actions {
    gap: 0.85rem;
    margin-top: 1.65rem;
  }

  body.index-page.redesign-page #hero.redesign-hero .hero-actions .redesign-btn,
  body.index-page.redesign-page #hero.redesign-hero .hero-actions a {
    position: relative;
    z-index: 3;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
    filter: none !important;
    box-shadow: 0 0.85rem 1.85rem rgba(5, 20, 24, 0.28);
  }

  body.index-page.redesign-page #hero.redesign-hero .hero-actions .redesign-btn:first-child,
  body.index-page.redesign-page #hero.redesign-hero .hero-actions a:first-child {
    background: #114d55 !important;
    border-color: #114d55 !important;
    color: #fffaf1 !important;
  }

  body.index-page.redesign-page #hero.redesign-hero .hero-actions .redesign-btn-outline,
  body.index-page.redesign-page #hero.redesign-hero .hero-actions .redesign-btn:last-child,
  body.index-page.redesign-page #hero.redesign-hero .hero-actions a:last-child {
    background: #fffaf1 !important;
    border-color: #fffaf1 !important;
    color: #114d55 !important;
    box-shadow: 0 0.85rem 1.85rem rgba(5, 20, 24, 0.24);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.index-page.redesign-page #hero.redesign-hero .hero-actions .redesign-btn-outline *,
  body.index-page.redesign-page #hero.redesign-hero .hero-actions .redesign-btn:last-child *,
  body.index-page.redesign-page #hero.redesign-hero .hero-actions a:last-child * {
    color: #114d55 !important;
  }
}

@media (max-width: 390px) {
  body.index-page.redesign-page #hero.redesign-hero .hero-actions {
    margin-top: 1.45rem;
  }
}

/* =========================================================
   HOME HERO — mobile redesign-actions button contrast
   Added 2026-05-26
   Purpose:
   - target the actual homepage hero CTA wrapper/classes
   - make default/non-hover button states readable on dark mobile video
========================================================= */

@media (max-width: 767px) {
  body.index-page.redesign-page #hero.redesign-hero .redesign-actions {
    gap: 0.85rem;
    margin-top: 1.65rem;
  }

  body.index-page.redesign-page #hero.redesign-hero .redesign-actions .redesign-btn {
    position: relative;
    z-index: 3;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
    filter: none !important;
    box-shadow: 0 0.85rem 1.85rem rgba(5, 20, 24, 0.28);
  }

  body.index-page.redesign-page #hero.redesign-hero .redesign-actions .redesign-btn:not(.is-outline) {
    background: #114d55 !important;
    border-color: #114d55 !important;
    color: #fffaf1 !important;
  }

  body.index-page.redesign-page #hero.redesign-hero .redesign-actions .redesign-btn.is-outline {
    background: #fffaf1 !important;
    border-color: #fffaf1 !important;
    color: #114d55 !important;
    box-shadow: 0 0.85rem 1.85rem rgba(5, 20, 24, 0.24);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.index-page.redesign-page #hero.redesign-hero .redesign-actions .redesign-btn.is-outline:hover,
  body.index-page.redesign-page #hero.redesign-hero .redesign-actions .redesign-btn.is-outline:focus-visible {
    background: #fffaf1 !important;
    border-color: #fffaf1 !important;
    color: #114d55 !important;
  }

  body.index-page.redesign-page #hero.redesign-hero .redesign-actions .redesign-btn:not(.is-outline):hover,
  body.index-page.redesign-page #hero.redesign-hero .redesign-actions .redesign-btn:not(.is-outline):focus-visible {
    background: #c46549 !important;
    border-color: #c46549 !important;
    color: #fffaf1 !important;
  }
}

@media (max-width: 390px) {
  body.index-page.redesign-page #hero.redesign-hero .redesign-actions {
    margin-top: 1.45rem;
  }
}

/* =========================================================
   GRIT PARTNERS — mobile hero image removal
   Added 2026-05-26
   Purpose:
   - remove the Grit hero background image layer on mobile
   - use a solid brand-color field for faster mobile rendering
========================================================= */

@media (max-width: 767px) {
  body.redesign-page.grit-partners-page .grit-page-hero {
    background: #426E72 !important;
    background-color: #426E72 !important;
    background-image: none !important;
  }

  body.redesign-page.grit-partners-page .grit-hero-bg-layer,
  body.redesign-page.grit-partners-page .grit-hero-bg-layer img {
    display: none !important;
  }

  body.redesign-page.grit-partners-page .grit-hero-bg-layer::before,
  body.redesign-page.grit-partners-page .grit-hero-bg-layer::after {
    display: none !important;
    background: none !important;
    background-image: none !important;
  }
}

/* =========================================================
   GRIT PARTNERS — final color refinements
   Added 2026-05-26
   Purpose:
   - use solid #DEC4BA mobile hero field
   - set primary/top Grit buttons to #B65A6E
   - set hover and secondary/bottom button tone to #F6DED1
========================================================= */

/* Grit hero buttons — desktop and mobile */
body.redesign-page.grit-partners-page .grit-page-hero .grit-actions a:first-child,
body.redesign-page.grit-partners-page .grit-actions a:first-child {
  background: #B65A6E !important;
  border-color: #B65A6E !important;
  color: #ffffff !important;
  box-shadow: 0 16px 34px rgba(182, 90, 110, 0.24) !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-actions a:first-child:hover,
body.redesign-page.grit-partners-page .grit-page-hero .grit-actions a:first-child:focus-visible,
body.redesign-page.grit-partners-page .grit-actions a:first-child:hover,
body.redesign-page.grit-partners-page .grit-actions a:first-child:focus-visible {
  background: #F6DED1 !important;
  border-color: #F6DED1 !important;
  color: #B65A6E !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-actions a:last-child,
body.redesign-page.grit-partners-page .grit-actions a:last-child {
  background: #F6DED1 !important;
  border-color: #F6DED1 !important;
  color: #B65A6E !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-actions a:last-child:hover,
body.redesign-page.grit-partners-page .grit-page-hero .grit-actions a:last-child:focus-visible,
body.redesign-page.grit-partners-page .grit-actions a:last-child:hover,
body.redesign-page.grit-partners-page .grit-actions a:last-child:focus-visible {
  background: #B65A6E !important;
  border-color: #B65A6E !important;
  color: #ffffff !important;
}

/* Grit mobile hero — solid background, no image layer */
@media (max-width: 767px) {
  body.redesign-page.grit-partners-page .grit-page-hero {
    background: #DEC4BA !important;
    background-color: #DEC4BA !important;
    background-image: none !important;
  }

  body.redesign-page.grit-partners-page .grit-page-hero::before,
  body.redesign-page.grit-partners-page .grit-page-hero::after {
    background: none !important;
    background-image: none !important;
  }

  body.redesign-page.grit-partners-page .grit-hero-bg-layer,
  body.redesign-page.grit-partners-page .grit-hero-bg-layer img,
  body.redesign-page.grit-partners-page .grit-hero-bg-layer::before,
  body.redesign-page.grit-partners-page .grit-hero-bg-layer::after {
    display: none !important;
    background: none !important;
    background-image: none !important;
  }
}

/* =========================================================
   GRIT PARTNERS — mobile solid background direct override
   Added 2026-05-26
   Purpose:
   - force the mobile Grit hero to use solid #DEC4BA
   - remove remaining gradient/image/pseudo-element wash
========================================================= */

@media (max-width: 991px) {
  body.index-page.redesign-page.grit-partners-page section#grit-partners.grit-page-hero,
  body.redesign-page.grit-partners-page section#grit-partners.grit-page-hero,
  body.grit-partners-page section#grit-partners.grit-page-hero {
    background: #DEC4BA !important;
    background-color: #DEC4BA !important;
    background-image: none !important;
  }

  body.index-page.redesign-page.grit-partners-page section#grit-partners.grit-page-hero::before,
  body.index-page.redesign-page.grit-partners-page section#grit-partners.grit-page-hero::after,
  body.redesign-page.grit-partners-page section#grit-partners.grit-page-hero::before,
  body.redesign-page.grit-partners-page section#grit-partners.grit-page-hero::after,
  body.grit-partners-page section#grit-partners.grit-page-hero::before,
  body.grit-partners-page section#grit-partners.grit-page-hero::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    opacity: 0 !important;
  }

  body.index-page.redesign-page.grit-partners-page section#grit-partners.grit-page-hero .grit-hero-bg-layer,
  body.index-page.redesign-page.grit-partners-page section#grit-partners.grit-page-hero .grit-hero-bg-layer img,
  body.redesign-page.grit-partners-page section#grit-partners.grit-page-hero .grit-hero-bg-layer,
  body.redesign-page.grit-partners-page section#grit-partners.grit-page-hero .grit-hero-bg-layer img,
  body.grit-partners-page section#grit-partners.grit-page-hero .grit-hero-bg-layer,
  body.grit-partners-page section#grit-partners.grit-page-hero .grit-hero-bg-layer img {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

/* =========================================================
   GRIT PARTNERS — mobile hero type nudge
   Added 2026-05-26
   Purpose:
   - slightly increase mobile hero headline and subhead presence
   - preserve the solid #DEC4BA mobile background result
========================================================= */

@media (max-width: 991px) {
  body.index-page.redesign-page.grit-partners-page section#grit-partners.grit-page-hero h1,
  body.redesign-page.grit-partners-page section#grit-partners.grit-page-hero h1,
  body.grit-partners-page section#grit-partners.grit-page-hero h1 {
    font-size: clamp(3rem, 13.5vw, 4.65rem);
    line-height: 0.98;
  }

  body.index-page.redesign-page.grit-partners-page section#grit-partners.grit-page-hero .grit-hero-copy,
  body.redesign-page.grit-partners-page section#grit-partners.grit-page-hero .grit-hero-copy,
  body.grit-partners-page section#grit-partners.grit-page-hero .grit-hero-copy {
    font-size: clamp(1.18rem, 4.8vw, 1.42rem);
    line-height: 1.46;
  }
}

@media (max-width: 390px) {
  body.index-page.redesign-page.grit-partners-page section#grit-partners.grit-page-hero h1,
  body.redesign-page.grit-partners-page section#grit-partners.grit-page-hero h1,
  body.grit-partners-page section#grit-partners.grit-page-hero h1 {
    font-size: clamp(2.85rem, 13vw, 4.2rem);
  }

  body.index-page.redesign-page.grit-partners-page section#grit-partners.grit-page-hero .grit-hero-copy,
  body.redesign-page.grit-partners-page section#grit-partners.grit-page-hero .grit-hero-copy,
  body.grit-partners-page section#grit-partners.grit-page-hero .grit-hero-copy {
    font-size: clamp(1.12rem, 4.6vw, 1.32rem);
  }
}

/* =========================================================
   GRIT PARTNERS — hero eyebrow warm white
   Added 2026-05-26
   Purpose:
   - make "Work with Sahra" harmonize with #DEC4BA hero field
   - apply on desktop and mobile
========================================================= */

body.redesign-page.grit-partners-page .grit-page-hero .grit-eyebrow,
body.index-page.redesign-page.grit-partners-page section#grit-partners.grit-page-hero .grit-eyebrow,
body.redesign-page.grit-partners-page section#grit-partners.grit-page-hero .grit-eyebrow,
body.grit-partners-page section#grit-partners.grit-page-hero .grit-eyebrow {
  color: #FFF7F1 !important;
  border-color: rgba(255, 247, 241, 0.42) !important;
  background: #DEC4BA !important;
}

/* =========================================================
   GRIT PARTNERS — solutions peach color scheme
   Added 2026-05-26
   Purpose:
   - set Solutions section background to #F1C2AA
   - use warm white section text on peach field
   - keep cards warm white with existing dark text palette
========================================================= */

body.redesign-page.grit-partners-page .grit-page-solutions {
  background: #DEC4BA !important;
  background-color: #DEC4BA !important;
  background-image: none !important;
}

body.redesign-page.grit-partners-page .grit-page-solutions .grit-section-heading,
body.redesign-page.grit-partners-page .grit-page-solutions .grit-section-heading h2,
body.redesign-page.grit-partners-page .grit-page-solutions .grit-solutions-intro {
  color: #FFF7F1 !important;
}

body.redesign-page.grit-partners-page .grit-page-solutions .grit-solutions-intro {
  opacity: 0.95;
}

body.redesign-page.grit-partners-page .grit-page-solutions .grit-solution-card {
  background: #FFF7F1 !important;
  background-color: #FFF7F1 !important;
  border-color: rgba(96, 55, 45, 0.12) !important;
  box-shadow: 0 1.25rem 3rem rgba(96, 55, 45, 0.12) !important;
}

body.redesign-page.grit-partners-page .grit-page-solutions .grit-solution-card h3 {
  color: #15383f !important;
}

body.redesign-page.grit-partners-page .grit-page-solutions .grit-solution-card p,
body.redesign-page.grit-partners-page .grit-page-solutions .grit-focus-list li {
  color: rgba(21, 56, 63, 0.78) !important;
}

body.redesign-page.grit-partners-page .grit-page-solutions .grit-card-icon {
  background: rgba(182, 90, 110, 0.12) !important;
  color: #B65A6E !important;
}

body.redesign-page.grit-partners-page .grit-page-solutions .grit-solution-card a {
  color: #B65A6E !important;
}

body.redesign-page.grit-partners-page .grit-page-solutions .grit-solution-card a:hover,
body.redesign-page.grit-partners-page .grit-page-solutions .grit-solution-card a:focus-visible {
  color: #15383f !important;
}

/* =========================================================
   GRIT PARTNERS — solutions heading contrast refinement
   Added 2026-05-26
   Purpose:
   - improve section headline readability on #F1C2AA
   - preserve the peach/rose/cream palette
========================================================= */

body.redesign-page.grit-partners-page .grit-page-solutions .grit-section-heading h2 {
  color: #8F4F5F !important;
}

body.redesign-page.grit-partners-page .grit-page-solutions .grit-section-heading,
body.redesign-page.grit-partners-page .grit-page-solutions .grit-solutions-intro {
  color: rgba(255, 247, 241, 0.94) !important;
}

body.redesign-page.grit-partners-page .grit-page-solutions .grit-solutions-intro {
  font-weight: 500;
  text-shadow: 0 0.06em 0.18em rgba(96, 55, 45, 0.14);
}

/* =========================================================
   GRIT PARTNERS — solutions subhead light rose
   Added 2026-05-26
   Purpose:
   - make Solutions subhead a lighter companion to #8F4F5F
========================================================= */

body.redesign-page.grit-partners-page .grit-page-solutions .grit-solutions-intro {
  color: #A96A78 !important;
  font-weight: 500;
  text-shadow: none !important;
}

/* =========================================================

   GRIT PARTNERS — solutions subhead size nudge

   Added 2026-05-26

   Purpose:

   - give the Solutions subhead a little more presence

========================================================= */

body.redesign-page.grit-partners-page .grit-page-solutions .grit-solutions-intro {

  font-size: clamp(1.16rem, 1.45vw, 1.38rem);

  line-height: 1.55;

}


/* =========================================================
   GRIT PARTNERS — testimonials heading color refinement
   Added 2026-05-26
   Purpose:
   - improve left-side testimonial heading contrast
   - keep existing language while making hierarchy cleaner
========================================================= */

body.redesign-page.grit-partners-page .grit-page-expect .grit-section-heading,
body.redesign-page.grit-partners-page .grit-page-expect .grit-section-heading h2 {
  color: #FFF7F1 !important;
}

body.redesign-page.grit-partners-page .grit-page-expect .grit-section-heading .redesign-kicker,
body.redesign-page.grit-partners-page .grit-page-expect .grit-section-heading .section-kicker,
body.redesign-page.grit-partners-page .grit-page-expect .redesign-kicker,
body.redesign-page.grit-partners-page .grit-page-expect .section-kicker {
  color: #F1C2AA !important;
}

/* =========================================================
   GRIT PARTNERS — mobile solutions card slider
   Added 2026-05-26
   Purpose:
   - make the three Solutions cards horizontally scrollable on mobile
   - preserve desktop grid layout
   - use CSS scroll snap, no JavaScript
========================================================= */

@media (max-width: 767px) {
  body.redesign-page.grit-partners-page .grit-page-solutions .grit-solutions-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
    margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
    padding: 0 1rem 1.4rem;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1rem;
    -webkit-overflow-scrolling: touch;
  }

  body.redesign-page.grit-partners-page .grit-page-solutions .grit-solutions-grid > [class*="col-"] {
    flex: 0 0 min(84vw, 22rem);
    width: min(84vw, 22rem);
    max-width: min(84vw, 22rem);
    padding-right: 0;
    padding-left: 0;
    scroll-snap-align: start;
  }

  body.redesign-page.grit-partners-page .grit-page-solutions .grit-solution-card {
    height: 100%;
    min-height: 22rem;
  }

  body.redesign-page.grit-partners-page .grit-page-solutions .grit-solutions-grid::-webkit-scrollbar {
    height: 0.45rem;
  }

  body.redesign-page.grit-partners-page .grit-page-solutions .grit-solutions-grid::-webkit-scrollbar-track {
    background: rgba(255, 247, 241, 0.28);
    border-radius: 999px;
  }

  body.redesign-page.grit-partners-page .grit-page-solutions .grit-solutions-grid::-webkit-scrollbar-thumb {
    background: rgba(143, 79, 95, 0.42);
    border-radius: 999px;
  }
}

@media (max-width: 390px) {
  body.redesign-page.grit-partners-page .grit-page-solutions .grit-solutions-grid > [class*="col-"] {
    flex-basis: 86vw;
    width: 86vw;
    max-width: 86vw;
  }
}

/* =========================================================

   GRIT PARTNERS — approach inline CTA

   Added 2026-05-26

   Purpose:

   - add a simple Work With Sahra action beneath the approach copy

========================================================= */

body.redesign-page.grit-partners-page .grit-approach-cta-line {

  margin: 1.25rem 0 0;

}

body.redesign-page.grit-partners-page .grit-approach-cta-link {

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  color: #B65A6E;

  font-weight: 800;

  line-height: 1.2;

  text-decoration: none;

}

body.redesign-page.grit-partners-page .grit-approach-cta-link:hover,

body.redesign-page.grit-partners-page .grit-approach-cta-link:focus-visible {

  color: #8F4F5F;

  text-decoration: underline;

  text-underline-offset: 0.18em;

}



/* =========================================================

   GRIT PARTNERS — hero secondary CTA outline

   Added 2026-05-26

   Purpose:

   - make the second hero CTA transparent with dark text

   - preserve the primary Get In Touch button

========================================================= */

body.redesign-page.grit-partners-page .grit-page-hero .grit-actions a:last-child,

body.redesign-page.grit-partners-page .grit-actions a:last-child {

  background: transparent !important;

  border-color: rgba(21, 56, 63, 0.42) !important;

  color: #15383f !important;

  box-shadow: none !important;

}

body.redesign-page.grit-partners-page .grit-page-hero .grit-actions a:last-child:hover,

body.redesign-page.grit-partners-page .grit-page-hero .grit-actions a:last-child:focus-visible,

body.redesign-page.grit-partners-page .grit-actions a:last-child:hover,

body.redesign-page.grit-partners-page .grit-actions a:last-child:focus-visible {

  background: rgba(21, 56, 63, 0.08) !important;

  border-color: #15383f !important;

  color: #15383f !important;

}


/* =========================================================
   GRIT PARTNERS — hero secondary CTA final outline
   Added 2026-05-26
   Purpose:
   - make the second hero CTA an outline button
   - transparent background, dark text
   - preserve the filled primary CTA
========================================================= */

body.redesign-page.grit-partners-page .grit-page-hero .grit-actions a:last-child,
body.redesign-page.grit-partners-page .grit-actions a:last-child {
  background: transparent !important;
  background-color: transparent !important;
  border-color: rgba(17, 17, 17, 0.42) !important;
  color: #111111 !important;
  box-shadow: none !important;
}

body.redesign-page.grit-partners-page .grit-page-hero .grit-actions a:last-child:hover,
body.redesign-page.grit-partners-page .grit-page-hero .grit-actions a:last-child:focus-visible,
body.redesign-page.grit-partners-page .grit-actions a:last-child:hover,
body.redesign-page.grit-partners-page .grit-actions a:last-child:focus-visible {
  background: #F6DED1 !important;
  background-color: #F6DED1 !important;
  border-color: #F6DED1 !important;
  color: #111111 !important;
}


/* =========================================================
   CONTACT — mobile form-first layout
   Added 2026-05-26
   Purpose:
   - hide the contact info box on mobile
   - allow the form to appear first without reworking desktop layout
========================================================= */

@media (max-width: 767px) {
  body.contact-page #contact .info-wrap,
  body.redesign-page.contact-page #contact .info-wrap,
  body.redesign-page #contact .info-wrap {
    display: none !important;
  }

  body.contact-page #contact .php-email-form,
  body.redesign-page.contact-page #contact .php-email-form,
  body.redesign-page #contact .php-email-form {
    margin-top: 0 !important;
  }
}



/* =========================================================

   CONTACT — mobile title-to-form gap refinement

   Added 2026-05-26

   Purpose:

   - reduce the large mobile gap between intro/subhead and form

   - target section-title spacing instead of forcing form upward

========================================================= */

@media (max-width: 767px) {

  body.redesign-page #contact .section-title {

    padding-bottom: 1.15rem !important;

    margin-bottom: 0 !important;

  }

  body.redesign-page #contact .section-title p {

    margin-bottom: 0 !important;

  }

  body.redesign-page #contact .row.gy-4 {

    margin-top: 0 !important;

  }

  body.redesign-page #contact .php-email-form {

    margin-top: 0 !important;

  }

}

@media (max-width: 390px) {

  body.redesign-page #contact .section-title {

    padding-bottom: 0.9rem !important;

  }

}



/* =========================================================
   FOOTER — hide book metadata icons only
   Added 2026-05-26
   Purpose:
   - remove icons beside publisher/publication/ISBN footer details
   - preserve social icons under Connect
========================================================= */

body.redesign-page .footer .footer-links ul li > i.bi-building,
body.redesign-page .footer .footer-links ul li > i.bi-calendar-event,
body.redesign-page .footer .footer-links ul li > i.bi-book,
body.redesign-page footer.footer .footer-links ul li > i.bi-building,
body.redesign-page footer.footer .footer-links ul li > i.bi-calendar-event,
body.redesign-page footer.footer .footer-links ul li > i.bi-book {
  display: none !important;
}

/* =========================================================
   GRIT PARTNERS — solutions heading warm white refinement
   Added 2026-05-26
   Purpose:
   - soften Solutions headline/subhead color against #F1C2AA
   - harmonize with the warm-white card surfaces
========================================================= */

body.redesign-page.grit-partners-page .grit-page-solutions .grit-section-heading h2 {
  color: #FFF7F1 !important;
}

body.redesign-page.grit-partners-page .grit-page-solutions .grit-solutions-intro {
  color: rgba(255, 247, 241, 0.92) !important;
  text-shadow: none !important;
}

/* =========================================================
   GRIT PARTNERS — desktop hero image rightward nudge
   Added 2026-05-26
   Purpose:
   - shift the desktop hero image slightly right
   - preserve the existing gradient/text protection
   - avoid affecting mobile, where the image layer is hidden
========================================================= */

@media (min-width: 992px) {
  body.redesign-page.grit-partners-page .grit-hero-bg-layer img {
    object-position: right center !important;
    transform: translateX(7.25rem) scale(1.1) !important;
    transform-origin: center center !important;
  }
}

/* =========================================================
   HOME HERO — desktop composition gap refinement
   Keeps the text and cover as one centered desktop unit.
========================================================= */

@media (min-width: 992px) and (max-width: 1199.98px) {
  body.index-page.redesign-page #hero.redesign-hero .container {
    max-width: 960px;
  }

  body.index-page.redesign-page #hero.redesign-hero .row > [class*="col-"]:first-child {
    transform: translateX(0.35rem);
  }

  body.index-page.redesign-page #hero.redesign-hero .bookfx {
    margin-left: 0.45rem;
    margin-right: auto;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  body.index-page.redesign-page #hero.redesign-hero .container {
    max-width: 1100px;
  }

  body.index-page.redesign-page #hero.redesign-hero .row > [class*="col-"]:first-child {
    transform: translateX(0.75rem);
  }

  body.index-page.redesign-page #hero.redesign-hero .bookfx {
    width: clamp(320px, 25vw, 385px);
    margin-left: 0.25rem;
    margin-right: auto;
  }
}

@media (min-width: 1400px) and (max-width: 1599.98px) {
  body.index-page.redesign-page #hero.redesign-hero .container {
    max-width: 1160px;
  }

  body.index-page.redesign-page #hero.redesign-hero .row > [class*="col-"]:first-child {
    transform: translateX(1.25rem);
  }

  body.index-page.redesign-page #hero.redesign-hero .bookfx {
    width: clamp(330px, 23vw, 390px);
    margin-left: -0.35rem;
    margin-right: auto;
  }
}

@media (min-width: 1600px) {
  body.index-page.redesign-page #hero.redesign-hero .container {
    max-width: 1220px;
  }

  body.index-page.redesign-page #hero.redesign-hero .row > [class*="col-"]:first-child {
    transform: translateX(1.55rem);
  }

  body.index-page.redesign-page #hero.redesign-hero .bookfx {
    width: clamp(340px, 20vw, 400px);
    margin-left: -0.65rem;
    margin-right: auto;
  }
}

@media (min-width: 1800px) {
  body.index-page.redesign-page #hero.redesign-hero .container {
    max-width: 1200px;
  }

  body.index-page.redesign-page #hero.redesign-hero .row > [class*="col-"]:first-child {
    transform: translateX(1.85rem);
  }

  body.index-page.redesign-page #hero.redesign-hero .bookfx {
    width: clamp(350px, 19vw, 390px);
    margin-left: -0.95rem;
    margin-right: auto;
  }
}

/* =========================================================
   GRIT PARTNERS — medium desktop testimonial quote sizing
   Added 2026-05-28
   Updated 2026-05-28
   Purpose:
   - reduce testimonial quote text on medium desktop widths
   - includes 1400px-class displays where the quote card can crowd
   - preserve mobile and wide-desktop sizing
========================================================= */

@media (min-width: 992px) and (max-width: 1500px) {
  body.redesign-page.grit-partners-page .grit-testimonial-slide p {
    font-size: 0.94rem !important;
    line-height: 1.5 !important;
  }
}

/* =========================================================
   CONTACT — Page title
   Added 2026-05-28
   Purpose:
   - preserve contact page heading styling while using a semantic H1
========================================================= */

body.redesign-page.contact-page .contact-page-title {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 600;
  color: #18363A;
  margin-bottom: 0.75rem;
}

/* =========================================================
   HOME HERO — Publication date badge
   Added 2026-05-28
   Purpose:
   - make the publication date visible near the primary hero action
========================================================= */

body.index-page.redesign-page #hero .hero-publication-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 1rem 0 1.15rem;
  padding: 0.42rem 0.78rem;
  border: 1px solid rgba(18, 63, 70, 0.28);
  border-radius: 999px;
  background: rgba(255, 247, 241, 0.72);
  color: #123F46;
  font-size: clamp(0.78rem, 0.9vw, 0.92rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: none;
  box-shadow: 0 0.65rem 1.75rem rgba(18, 63, 70, 0.12);
}

@media (max-width: 767px) {
  body.index-page.redesign-page #hero .hero-publication-date {
    margin: 0.9rem 0 1.05rem;
    padding: 0.44rem 0.72rem;
    font-size: 0.76rem;
    letter-spacing: 0.1em;
  }
}

/* =========================================================
   PURCHASE — Kindle coming soon state
   Added 2026-06-05
   Purpose:
   - make Kindle availability clear while preorder is unavailable
========================================================= */

body.index-page.redesign-page .excerpt-mini-retailer.is-coming-soon {
  cursor: not-allowed;
  opacity: 0.64;
  background: rgba(245, 241, 235, 0.78);
  border-color: rgba(21, 56, 63, 0.16);
  color: rgba(21, 56, 63, 0.68);
  text-decoration: none;
  filter: grayscale(0.25);
}

body.index-page.redesign-page .excerpt-mini-retailer.is-coming-soon strong {
  color: rgba(21, 56, 63, 0.72);
}

body.index-page.redesign-page .book-format-card.is-coming-soon {
  position: relative;
  opacity: 0.74;
  background: #f3eee8;
  border-color: rgba(21, 56, 63, 0.14);
  box-shadow: 0 1rem 2.2rem rgba(21, 56, 63, 0.08);
  filter: grayscale(0.2);
}

body.index-page.redesign-page .book-format-card.is-coming-soon::before {
  content: "Coming Aug. 4";
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  padding: 0.32rem 0.58rem;
  border: 1px solid rgba(21, 56, 63, 0.16);
  border-radius: 999px;
  background: rgba(255, 250, 241, 0.9);
  color: rgba(21, 56, 63, 0.72);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

body.index-page.redesign-page .book-format-card.is-coming-soon .format-icon,
body.index-page.redesign-page .book-format-card.is-coming-soon .format-price,
body.index-page.redesign-page .book-format-card.is-coming-soon .format-features {
  opacity: 0.82;
}

body.index-page.redesign-page .btn-purchase.is-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: not-allowed;
  pointer-events: none;
  background: #d8d2cb;
  border-color: #d8d2cb;
  color: rgba(21, 56, 63, 0.72);
  box-shadow: none;
}



/* =========================================================
   NAV — Preorder button
   Updated 2026-06-05
   Purpose:
   - move preorder to the end of the nav
   - keep it visible in book-cover orange with white text in all header states
========================================================= */

body.index-page.redesign-page .header .navmenu a.nav-preorder-btn,
body.index-page.redesign-page.scrolled .header .navmenu a.nav-preorder-btn,
body.index-page.redesign-page .header.header-scrolled .navmenu a.nav-preorder-btn,
body.scrolled.index-page.redesign-page .header .navmenu a.nav-preorder-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.45rem;
  padding: 0.42rem 0.68rem;
  border: 1px solid #F47A16 !important;
  border-radius: 0.42rem;
  background: #F47A16 !important;
  color: #ffffff !important;
  font-weight: 800;
  letter-spacing: 0.035em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 0.32rem 0.9rem rgba(244, 122, 22, 0.18);
}

body.index-page.redesign-page .header .navmenu a.nav-preorder-btn:hover,
body.index-page.redesign-page .header .navmenu a.nav-preorder-btn:focus-visible,
body.index-page.redesign-page.scrolled .header .navmenu a.nav-preorder-btn:hover,
body.index-page.redesign-page.scrolled .header .navmenu a.nav-preorder-btn:focus-visible {
  border-color: #D96510 !important;
  background: #D96510 !important;
  color: #ffffff !important;
  box-shadow: 0 0.38rem 1rem rgba(217, 101, 16, 0.2);
}

@media (max-width: 1199px) {
  body.index-page.redesign-page .header .navmenu a.nav-preorder-btn,
  body.index-page.redesign-page.scrolled .header .navmenu a.nav-preorder-btn,
  body.index-page.redesign-page .header.header-scrolled .navmenu a.nav-preorder-btn,
  body.scrolled.index-page.redesign-page .header .navmenu a.nav-preorder-btn {
    width: fit-content;
    margin: 0.45rem 0 0;
    padding: 0.52rem 0.82rem;
    border-radius: 0.46rem;
  }
}


/* =========================================================
   NAV — Preorder button text lock
   Added 2026-06-05
   Purpose:
   - prevent scrolled/header nav color rules from turning Preorder text black
========================================================= */

body.index-page.redesign-page .header .navmenu a.nav-preorder-btn,
body.index-page.redesign-page .header .navmenu a.nav-preorder-btn:link,
body.index-page.redesign-page .header .navmenu a.nav-preorder-btn:visited,
body.index-page.redesign-page .header .navmenu a.nav-preorder-btn.active,
body.index-page.redesign-page .header .navmenu a.nav-preorder-btn.show,
body.index-page.redesign-page .header .navmenu a.nav-preorder-btn:hover,
body.index-page.redesign-page .header .navmenu a.nav-preorder-btn:focus,
body.index-page.redesign-page .header .navmenu a.nav-preorder-btn:focus-visible,
body.index-page.redesign-page .header .navmenu a.nav-preorder-btn:active,
body.index-page.redesign-page.scrolled .header .navmenu a.nav-preorder-btn,
body.index-page.redesign-page.scrolled .header .navmenu a.nav-preorder-btn:link,
body.index-page.redesign-page.scrolled .header .navmenu a.nav-preorder-btn:visited,
body.index-page.redesign-page.scrolled .header .navmenu a.nav-preorder-btn.active,
body.index-page.redesign-page.scrolled .header .navmenu a.nav-preorder-btn.show,
body.index-page.redesign-page.scrolled .header .navmenu a.nav-preorder-btn:hover,
body.index-page.redesign-page.scrolled .header .navmenu a.nav-preorder-btn:focus,
body.index-page.redesign-page.scrolled .header .navmenu a.nav-preorder-btn:focus-visible,
body.index-page.redesign-page.scrolled .header .navmenu a.nav-preorder-btn:active,
body.scrolled.index-page.redesign-page .header .navmenu a.nav-preorder-btn,
body.scrolled.index-page.redesign-page .header .navmenu a.nav-preorder-btn:link,
body.scrolled.index-page.redesign-page .header .navmenu a.nav-preorder-btn:visited,
body.scrolled.index-page.redesign-page .header .navmenu a.nav-preorder-btn.active,
body.scrolled.index-page.redesign-page .header .navmenu a.nav-preorder-btn.show,
body.scrolled.index-page.redesign-page .header .navmenu a.nav-preorder-btn:hover,
body.scrolled.index-page.redesign-page .header .navmenu a.nav-preorder-btn:focus,
body.scrolled.index-page.redesign-page .header .navmenu a.nav-preorder-btn:focus-visible,
body.scrolled.index-page.redesign-page .header .navmenu a.nav-preorder-btn:active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}