/* Custom CSS Overrides for Life Stories Preserved
   These styles override the Webflow export to fix issues
   that arise from dynamic content via Contentful CMS */

/* ==============================================
   FIX: Navigation logo/company name wrapping
   The .w--current class adds display:flex but only
   appears on the active page. We need flex always.
   ============================================== */
.navigation-logo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.navigation-logo-link:hover {
  opacity: 0.85;
}

/* ==============================================
   FIX: Service type text on colored book images
   The text needs to be white to be visible
   ============================================== */
.services-page .service-type-label,
.grid-four-column .w-dyn-item .service-image + div,
.grid-four-column .w-dyn-item figcaption {
  color: white;
}

/* Service book covers with text overlay */
.grid-four-column .w-dyn-item {
  position: relative;
}

/* Service card hover — subtle scale + pointer */
.grid-four-column .feature-card {
  transition: transform 0.2s ease !important;
  cursor: pointer !important;
}

.grid-four-column .feature-card:hover {
  transform: scale(1.03) !important;
}

/* ==============================================
   FIX: Widen header text containers
   ============================================== */
.max-width-regular {
  max-width: 800px;
}

.max-width-large {
  max-width: 900px;
}

.title-wrapper-small,
.title-wrapper-x-large {
  max-width: 100%;
}

.title-wrapper-small h1,
.title-wrapper-small h2,
.title-wrapper-x-large h1 {
  max-width: 100%;
}

/* Allow headings more breathing room */
.h1-heading,
.h1-heading-2,
.h1-heading-3,
.h2-heading {
  max-width: 100%;
}

/* Content block title wrapper */
.content-block .title-wrapper-x-large {
  max-width: 100%;
}

.content-block .max-width-large {
  max-width: 1000px;
}

/* ==============================================
   FIX: Prevent horizontal overflow on all pages
   ============================================== */
html, body {
  overflow-x: hidden;
}

/* ==============================================
   FIX: Hero section - tighten spacing to fit above the fold
   ============================================== */
body > .section-regular:first-of-type {
  padding-top: 48px;
  padding-bottom: 48px;
}

body > .section-regular:first-of-type .column-gigantic {
  gap: 24px;
}

body > .section-regular:first-of-type .column-large {
  gap: 12px;
}

/* ==============================================
   FIX: Broken images - hide broken img gracefully
   ============================================== */
img {
  max-width: 100%;
  height: auto;
}

/* ==============================================
   FIX: Privacy/Terms links inside checkbox label
   Make links clickable even inside <label>
   ============================================== */
.checkbox-field .span-link {
  position: relative;
  z-index: 2;
}

/* ==============================================
   FIX: About page - Square.png crops nicely in its grid cell
   Webflow sets .product-image-large to height:588px which constrains both
   columns to the same height. We only override the image's object-fit
   so Alan's head stays at the top of the crop.
   ============================================== */
.product-image-large .image-cover-2 {
  object-fit: cover;
  object-position: top center;
  width: 100%;
  height: 100%;
}

/* ==============================================
   FIX: Testimonials - hide avatar and 5/5 rating
   Per feedback: simplify testimonial cards but keep name visible
   ============================================== */
.testimonial-card-large .testimonial-avatar,
.testimonial-card-large .testimonial-rating,
.testimonial-card-large .wrap-h-regular.align-c {
  display: none;
}

/* Show the testimonial giver name in the lower section */
.testimonial-card-large .wrap-v-tiny .testimonial-author-name {
  display: block !important;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 4px;
  color: #2a514c;
}

/* ==============================================
   FIX: Slider book cards - hide badge, title, and author name below covers
   Per feedback: just show the book cover images
   ============================================== */
.content-slide-description {
  display: none !important;
}

/* White book placeholder in slider MUST remain visible -
   it provides the book shape that .cover-image blends onto via mix-blend-mode: hard-light */

/* Remove Webflow's margin-right on slides since our custom slider uses flex gap.
   Without this, each slide is 24px wider than what the JS offset calculation expects,
   causing drift when clicking arrows (scrolls too far per click). */
.content-slide {
  margin-right: 0 !important;
}

/* Override Webflow's max-width:252px on the slider mask.
   Our custom JS manages the slider layout entirely, so this constraint
   causes the mask to be tiny on desktop (252px instead of full width).
   ALSO override overflow:hidden from webflow.css - the mask is the element
   being translated via JS, so it must NOT clip. Clipping comes from the
   parent .content-slider which has overflow:hidden.
   >>> SYNC WITH JS: reinitializeWebflowSlider() in contentful.js <<< */
.content-mask-x-small.w-slider-mask {
  max-width: none !important;
  width: 100% !important;
  overflow: visible !important;
}

/* Slider container must clip overflow on all screen sizes,
   since our custom JS uses translateX on the mask inside it. */
.content-slider {
  overflow: hidden;
}

/* Book slides: remove pointer cursor (covers aren't clickable links)
   and add hover zoom effect.
   The slides are <a href="#"> elements, so browser UA adds cursor:pointer.
   Target the element, all children, and hover state to fully override. */
a.content-slide-card,
a.content-slide-card *,
a.content-slide-card:hover,
a.content-slide-card:hover * {
  cursor: default !important;
}

.content-slide-image {
  transition: transform 0.3s ease;
}

.content-slide-card:hover .content-slide-image {
  transform: scale(1.06);
}

/* Book slider covers: fill the slide cell, maintain book aspect ratio.
   Width is determined by the JS-set slide width (via inline style on .w-slide).
   Do NOT set max-width here - it must track the JS getSlideWidth() values.
   >>> SYNC WITH JS: getSlideWidth() in contentful.js <<< */
.content-slide-image {
  height: auto;
  width: 100%;
  aspect-ratio: 2 / 3;
  margin: 0 auto;
  position: relative;
}

/* The .image class is the White-Book-min.png book shape - must stay visible as base for blend */
.content-slide-image .image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Cover images blend onto the white book shape */
.content-slide-image img.cover-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}

/* White book placeholder in hero carousels MUST remain visible -
   it provides the book shape that .cover-image blends onto via mix-blend-mode: hard-light */

/* ==============================================
   FIX: Hero carousel - prevent collapse before ticker init
   The Flowbase ticker can render at minimum height if it
   initializes before Contentful images load. Set min-height
   and ensure the gradient overlay always shows.
   ============================================== */
/* Use viewport-relative min-height so it scales properly on all screen sizes */
.header-marquee-loop {
  min-height: min(500px, 60vh);
}

/* Ensure carousel columns also have a minimum height */
.header-carousel-column-large,
.header-carousel-column-small {
  min-height: min(480px, 58vh);
}

/* Prevent ticker from collapsing content */
.header-carousel-column-large [fb-carousel-content],
.header-carousel-column-small [fb-carousel-content] {
  min-height: inherit;
}

.header-marquee-overlay {
  pointer-events: none !important;
  background-image: linear-gradient(#f7f6f2, #f7f6f2 10%, #f7f6f200 38% 62%, #f7f6f2cc 90%, #f7f6f2) !important;
  position: absolute !important;
  inset: 0% !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
}

/* ==============================================
   FIX: Active navigation highlighting
   Highlight the current page in the header menu
   ============================================== */
.navigation-link.w--current {
  font-weight: 700;
  color: #2a514c;
}

/* ==============================================
   FIX: Stay Connected illustrations - hide plant/books images
   Per feedback: remove but keep newsletter box
   ============================================== */
.cta-image-01,
.cta-image-02 {
  display: none;
}

/* ==============================================
   FIX: Excerpts page - hide social share links, author name/avatar
   Keep only the "X min read" caption
   ============================================== */
.article-social-links {
  display: none;
}

.article-author-detail .avatar,
.article-author-detail .paragraph-large-5.text-weight-semi-bold {
  display: none;
}

/* Excerpts page - constrain header body text width */
.title-wrapper-small > .paragraph-regular-2 {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Excerpts page - hide star ratings (avatar shown for book covers) */
.testimonial-card-2 .testimonial-rating {
  display: none;
}

/* Excerpts page - constrain excerpt images to a reasonable max-width */
.article-image img {
  max-width: 600px;
  margin: 0 auto;
  display: block;
}

/* Slightly larger excerpt text */
.article-rich-text p {
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ==============================================
   FIX: Excerpt link text - "Read [Title]" should flow inline
   ============================================== */
.row.excerpt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.row.excerpt .h6-heading {
  white-space: nowrap;
}

/* ==============================================
   FIX: FAQ dropdowns - ensure proper collapse/expand
   Override Webflow's absolute positioning and use JS-driven toggle
   ============================================== */
.faq-dropdown .faq-dropdown-content {
  position: static !important;
  display: none !important;
  overflow: hidden;
}

.faq-dropdown .faq-dropdown-content.faq-open {
  display: block !important;
}

.faq-dropdown .faq-dropdown-toggle {
  cursor: pointer;
  white-space: normal;
}

/* Override Webflow's pre-wrap on all faq-dropdown-toggle elements */
.faq-dropdown-toggle {
  white-space: normal !important;
}

/* Reduce FAQ box padding */
.faq-dropdown.w-dropdown,
.faq-wrapper .w-dyn-item {
  margin-bottom: 8px;
}

.faq-dropdown .faq-dropdown-toggle {
  padding: 10px 16px;
}

.faq-dropdown .faq-content-2 {
  padding: 0 16px 10px 16px;
  color: #333;
  text-align: left;
  /* Override Webflow animation inline styles that set opacity:0 and transform */
  opacity: 1 !important;
  transform: none !important;
}

.faq-dropdown .h6-heading-4 {
  margin-bottom: 2px;
}

.faq-dropdown .paragraph-regular-5 {
  margin-top: 0;
  color: #333 !important;
}

/* ==============================================
   FIX: Process step boxes - reduce padding, show content
   Process steps should NOT look clickable (unlike FAQ items)
   ============================================== */
.process-box.w-dropdown {
  margin-bottom: 6px;
}

.process-box .faq-dropdown-toggle {
  padding: 6px 12px 0 12px;
  cursor: default;
  white-space: normal;
}

.process-box .faq-dropdown-toggle:hover {
  background: inherit;
}

.process-box .faq-dropdown-content {
  position: static !important;
  display: block !important;
}

.process-box .faq-content-2 {
  padding: 0 12px 6px 12px;
  opacity: 1 !important;
  transform: none !important;
}

.process-box .h6-heading-4 {
  margin-bottom: 2px;
}

.process-box .paragraph-regular-5 {
  margin-top: 0;
  margin-bottom: 4px;
}

/* ==============================================
   FIX: Phone number link under CTA buttons
   ============================================== */
.phone-cta {
  display: block;
  text-align: left;
  margin-top: 6px;
  font-family: 'PT Serif', serif;
  font-size: 0.95rem;
  color: #2a514c;
}

.phone-cta a {
  color: #2a514c;
  text-decoration: none;
  font-weight: 700;
}

.phone-cta a:hover {
  text-decoration: underline;
}

/* ==============================================
   FIX: Mobile hamburger menu styling
   ============================================== */
.w-nav-button {
  float: right;
  padding: 18px;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  tap-highlight-color: rgba(0,0,0,0);
  user-select: none;
}

/* Process step number styling */
.process-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #2a514c;
  color: white;
  font-family: 'PT Serif', serif;
  font-weight: 700;
  font-size: 14px;
  margin-right: 10px;
  flex-shrink: 0;
}

/* ==============================================
   FIX: Navigation font - logo stays serif, links go sans-serif
   ============================================== */
.navigation-logo-text,
.navigation-logo-link {
  font-family: 'PT Serif', serif !important;
}

.navigation-link {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* ==============================================
   FIX: Service book covers - labels hidden (images have text baked in)
   ============================================== */
.service-card-label {
  display: none !important;
}

/* ==============================================
   Responsive break helpers
   ============================================== */
.mobile-only {
  display: none;
}

.desktop-only {
  display: inline;
}

/* ==============================================
   RESPONSIVE: Tablet (max-width: 991px)
   ============================================== */
@media screen and (max-width: 991px) {
  /* Fix excerpt card overflow */
  .content-links-grid {
    flex-direction: column;
    align-items: stretch;
  }

  .content-links-grid .w-dyn-items {
    flex-direction: column;
    display: flex;
    gap: 24px;
  }

  /* Stats section - 2 columns on tablet instead of 4 */
  .grid-four-column {
    grid-template-columns: 1fr 1fr;
  }

  /* Slider - constrain to viewport */
  .content-slider {
    max-width: 100%;
    overflow: hidden;
  }

  .content-slide-card {
    max-width: 100%;
  }

  /* Testimonial cards on excerpts page */
  .grid-two-column-2 {
    grid-template-columns: 1fr;
  }

  /* Mobile nav menu - white background when open */
  .navigation-menu.w-nav-menu {
    background: white;
  }

  .navigation-menu .navigation-link {
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
  }

  /* Process page hero - stack vertically */
  .header-title-row {
    flex-direction: column !important;
    display: flex !important;
  }

  .header-title-row .max-width-regular {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ==============================================
   RESPONSIVE: Mobile (max-width: 767px)
   ============================================== */
@media screen and (max-width: 767px) {
  /* Show/hide responsive elements */
  .mobile-only {
    display: inline !important;
  }

  .desktop-only {
    display: none !important;
  }

  /* Constrain all containers */
  .container-regular,
  .container-regular-2,
  .container-regular-3,
  .container-regular-4,
  .container-regular-5,
  .container-regular-6,
  .container-regular-7,
  .container-large,
  .container-large-2,
  .container-large-3,
  .container-large-7,
  .container-large-9,
  .container-large-10,
  .container-x-large,
  .container-small {
    padding-left: 5%;
    padding-right: 5%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* --- HOMEPAGE: Hero Stats side-by-side --- */
  .header-statistics-grid {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px;
    justify-content: flex-start;
  }

  .header-statistics-card {
    flex: 0 0 auto;
  }

  /* --- HOMEPAGE: Hero heading mobile breaks --- */
  .h1-heading-3 {
    font-size: 2.5rem;
    line-height: 1.15;
  }

  /* --- HOMEPAGE: Book slider on mobile --- */
  .content-slider-button {
    width: 44px;
    height: 44px;
    opacity: 1;
  }

  .content-slider-button .icon-x-small {
    width: 20px;
    height: 20px;
  }

  /* Slider covers on mobile - auto-size to fill slide */
  .content-slide-image {
    height: auto;
    width: 100%;
    aspect-ratio: 2 / 3;
  }

  /* --- HOMEPAGE: Excerpt link cards - fix spacing --- */
  .content-link {
    flex-direction: row;
    max-width: 100%;
    align-items: center;
    gap: 16px;
  }

  .content-link-image-wrapper {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    margin: 0;
  }

  .content-link-description {
    text-align: left;
    word-break: break-word;
    padding: 8px 0 !important;
    gap: 6px !important;
  }

  /* Excerpt link text: "Read" + title flow together */
  .row.excerpt {
    display: inline;
  }

  .row.excerpt .h6-heading {
    display: inline;
    white-space: normal;
    font-size: 1rem;
  }

  .row.excerpt .content-card-arrow {
    display: inline;
  }

  /* Excerpt description text larger */
  .content-link-description .paragraph-small {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  /* Consistent spacing between excerpt cards */
  .content-links-grid .w-dyn-items {
    gap: 16px;
  }

  /* --- HOMEPAGE: Photo grid on mobile ---
     7 images in a 2-column grid:
     - Images 1-6: each 1x1 square (3 rows x 2 cols)
     - Image 7 (book-on-shelf): full width last (span 2 cols)
     - Text: full width below
     ============================================== */
  .social-media-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: none !important;
    gap: 6px !important;
    grid-row-gap: 6px !important;
    grid-column-gap: 6px !important;
  }

  /* Flatten all wrapper divs so individual images become grid items */
  .social-media-grid .wrap-v-large,
  .social-media-grid .social-media-group {
    display: contents !important;
    padding: 0;
    gap: 0;
  }

  /* All image containers: consistent 1x1 square with rounded corners, no border */
  .social-media-grid .social-media-image-small,
  .social-media-grid .social-media-image-large {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: 8px;
    border: none !important;
  }

  .social-media-grid .social-media-image-small img,
  .social-media-grid .social-media-image-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    top: 0 !important;
  }

  /* Full-width image: spans both columns and goes LAST via order */
  .social-media-grid .photo-full-width {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
    order: 99;
  }

  /* Text paragraphs: each spans full width */
  .social-media-grid .paragraph-regular.text-weight-medium.tight-paragraph {
    grid-column: 1 / -1;
    font-size: 1rem;
    line-height: 1.6;
  }

  /* --- HOMEPAGE: Testimonials mobile fix --- */
  .grid-three-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px;
  }

  /* --- HOMEPAGE: Testimonial book covers on mobile ---
     The Webflow design uses:
     - .testimonial-image: fixed 240px gray box with overflow:clip
     - .image-cover-crop: relative container, height:100%, offset by top:19%
     - .image-2: absolute cover with mix-blend-mode:hard-light
     We must NOT set height:auto on .image-cover-crop or the absolute child collapses. */
  .testimonial-card-large .testimonial-image {
    height: 240px;
    overflow: hidden;
  }

  .testimonial-card-large .image-cover-crop {
    width: 55% !important;
    max-width: 180px;
    height: 100%;
    margin: 0 auto;
    top: 10% !important;
    position: relative;
  }

  /* --- HOMEPAGE: Hero carousel min-height on mobile --- */
  .header-marquee-loop {
    min-height: min(350px, 50vh);
  }

  .header-carousel-column-large,
  .header-carousel-column-small {
    min-height: min(330px, 48vh);
  }

  /* --- HOMEPAGE: Phone CTA - center on mobile --- */
  .phone-cta {
    text-align: center;
  }

  /* --- HOMEPAGE: Elder quote section - center on mobile --- */
  .content-wrapper {
    text-align: center;
  }

  .column-large.column-left {
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
  }

  .content-wrapper .h2-heading.accent {
    text-align: center;
  }

  /* Center the consultation button on mobile.
     Root cause: Webflow's .column-large.column-left has align-items:flex-start
     and .content-wrapper also has align-items:flex-start.
     Both need !important overrides, plus the button itself needs block+auto margins. */
  .section-regular.dark .content-wrapper {
    align-items: center !important;
    text-align: center !important;
  }

  .section-regular.dark .content-wrapper .column-large.column-left {
    align-items: center !important;
    text-align: center !important;
  }

  .section-regular.dark .content-wrapper .column-large.column-left .button-secondary-3 {
    display: block !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
  }

  /* NOTE: .w-slider-mask overflow:visible is handled globally (not in media query)
     via .content-mask-x-small.w-slider-mask rule at top of file. */

  /* CTA section */
  .cta-block {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Footer newsletter */
  .footer-newsletter {
    max-width: 100%;
  }

  .footer-newsletter .wrap-v-regular {
    max-width: 100%;
  }

  .text-field-2 {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Contact form */
  .contact-form-card {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Service sections - prevent overflow */
  .content-statistics {
    flex-wrap: wrap;
    gap: 16px;
  }

  /* Article/excerpt sections */
  .article-wrapper {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .article-social-links {
    display: none;
  }

  /* Excerpt body text - bigger on mobile */
  .article-rich-text p,
  .rich-text p {
    font-size: 1.1rem;
    line-height: 1.7;
  }

  /* --- ABOUT PAGE: 2x2 image grid on mobile ---
     All 4 images (Square.png, Radio, editing, screenshot) form a uniform 2x2 grid.
     Each cell is the same size with cover-cropped images. */
  .product-grid:first-of-type {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }

  /* Make the large image container a single grid cell, not spanning */
  .product-grid:first-of-type .product-image-large {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1;
    overflow: hidden;
  }

  .product-grid:first-of-type .product-image-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  /* Right column: also becomes grid contents so its children fill grid cells */
  .product-grid:first-of-type .wrap-v-large {
    display: contents !important;
  }

  /* Radio image container: same size as all others */
  .product-grid:first-of-type .product-image {
    width: 100%;
    height: auto !important;
    aspect-ratio: 1;
    overflow: hidden;
  }

  .product-grid:first-of-type .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Two small images: flatten wrapper, each fills one grid cell */
  .product-grid:first-of-type .product-image-wrapper {
    display: contents !important;
  }

  .product-grid:first-of-type .product-image-small {
    width: 100%;
    height: auto !important;
    aspect-ratio: 1;
    overflow: hidden;
  }

  .product-grid:first-of-type .product-image-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* --- ABOUT PAGE: Inline images in text (radio.webp, max.webp) ---
     Webflow sets .product-image to height:384px which leaves huge empty space
     when the image is auto-height. Override to auto on mobile. */
  .product-wrapper .product-image {
    height: auto !important;
    width: 100%;
  }

  .product-wrapper .product-image img {
    width: 100%;
    height: auto !important;
    object-fit: contain;
  }

  /* Second product-grid (text content) stacks to single column */
  .product-grid:nth-of-type(2) {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px;
  }

  /* --- SERVICES PAGE: Bigger book covers on mobile --- */
  .grid-four-column {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px;
  }

  .grid-four-column .w-dyn-item .feature-card,
  .grid-four-column .w-dyn-item {
    min-height: 220px;
  }

  /* Service images have 48px horizontal padding in Webflow CSS - way too much on mobile */
  .grid-four-column .service-image {
    padding: 12px 16px !important;
    min-height: 160px;
    width: 100%;
    object-fit: contain;
  }

  .grid-four-column .feature-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  /* --- SERVICES PAGE: Service detail sections stack --- */
  .service .w-layout-grid {
    display: flex !important;
    flex-direction: column;
  }

  /* Hide duplicate small image on mobile (main image already shows) */
  .service .service-image-small {
    display: none;
  }

  /* Service stats: 2x2 grid above Get Started on mobile */
  .content-grid-wrapper-small {
    display: flex !important;
    flex-direction: column;
  }

  .content-grid-wrapper-small .content-statistics {
    order: -2 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .content-grid-wrapper-small .divider-gray-50 {
    order: -1 !important;
  }

  /* Fallback for .content-statistics outside wrapper */
  .content-statistics {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* --- PROCESS PAGE: Hero vertical stack on mobile --- */
  .header-carousel-section .header-title-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px;
  }

  .header-carousel-section .header-title-row .max-width-regular {
    max-width: 100% !important;
  }

  /* --- PRICING PAGE: Fix alignment and spacing --- */
  .pricing-section-2 {
    padding-left: 5%;
    padding-right: 5%;
  }

  .pricing-block {
    text-align: left;
    padding: 24px 20px;
  }

  .pricing-block .horizontal-flex,
  .pricing-block .horizontal-flex.large {
    justify-content: center;
    text-align: center;
  }

  .pricing-type.large {
    text-align: center;
    font-size: 16px;
  }

  .grid-pricing-detail {
    display: flex !important;
    flex-direction: column;
    gap: 0;
  }

  .pricing-feature-grid {
    gap: 8px;
    display: flex !important;
    flex-direction: column;
  }

  .feature-statistics-card {
    text-align: left;
  }

  .feature-statistics-card .wrap-v-x-small {
    align-items: flex-start;
    gap: 4px;
  }

  .stat {
    justify-content: flex-start;
    gap: 4px;
  }

  .stat .h6-heading {
    text-align: left;
    font-size: 1.1rem;
  }

  .pricing-feature-2 .paragraph-regular-2 {
    text-align: left;
    font-size: 0.9rem;
  }

  .pricing-block .middle-block {
    padding: 12px 0;
    border-left: none;
    border-right: none;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
  }

  /* Price and connect button */
  .price-amount,
  .pricing-header-2 {
    text-align: center;
    font-size: 2rem;
    margin-top: 12px;
  }

  .pricing-block .button-primary-5 {
    text-align: center;
    width: 100%;
    margin-top: 8px;
  }

  /* Pricing cards - reduce gap between them */
  .prices.w-dyn-items {
    gap: 16px !important;
  }

  /* --- STAY CONNECTED: Tighten padding on mobile (but keep it elegant) --- */
  .section-regular-6 {
    padding: 32px 5% !important;
  }

  .section-regular-6 .container-large-10 {
    padding-left: 3%;
    padding-right: 3%;
  }

  .cta-block {
    padding: 28px 20px !important;
  }

  .cta-title-wrapper {
    padding: 0 4px;
  }

  .cta-form-wrapper {
    padding: 0 4px;
  }

  /* --- CONTACT PAGE: Fix spacing and alignment --- */
  .section-regular-6 .container-regular-6 {
    padding: 0 3%;
  }

  .contact-grid {
    display: flex !important;
    flex-direction: column;
    gap: 24px;
  }

  .contact-content-left {
    text-align: left;
  }

  .contact-content-left .h1-heading-8 {
    font-size: 2.2rem;
  }

  .contact-content-left .paragraph-regular-2 {
    text-align: left;
  }

  /* Contact social wrapper - left-aligned */
  .contact-social-wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    text-align: left;
    align-items: center;
    padding-left: 0;
  }

  .contact-detail-card {
    text-align: left;
  }

  /* Contact links grid */
  .contact-links-grid {
    gap: 16px;
  }

  .contact-link {
    padding: 20px;
  }
}

/* ==============================================
   RESPONSIVE: Small Mobile (max-width: 479px)
   ============================================== */
@media screen and (max-width: 479px) {
  /* Tighten spacing */
  .title-wrapper-small,
  .title-wrapper-x-large {
    padding-left: 0;
    padding-right: 0;
  }

  /* Stats still side-by-side on small mobile */
  .header-statistics-grid {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px;
  }

  .header-statistics-card .h4-heading {
    font-size: 1.5rem;
  }

  /* Slider navigation - better spacing and bigger arrows */
  .content-slide-nav {
    margin-top: 8px;
  }

  .content-slider-button {
    width: 48px;
    height: 48px;
  }

  .content-slider-button .icon-x-small {
    width: 22px;
    height: 22px;
  }

  /* Footer grid */
  .footer-newsletter h6 {
    font-size: 20px;
  }

  /* Testimonial cards */
  .testimonial-card-2 {
    padding: 20px;
  }

  /* Pricing cards */
  .price-card {
    max-width: 100%;
  }

  /* Contact social wrapper */
  .vertical-divider {
    display: none;
  }

  /* Hero heading tighter on small screens */
  .h1-heading-3 {
    font-size: 2.2rem;
  }

  /* About page images - cover-crop in 2x2 grid cells */
  .product-grid:first-of-type .product-image-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
}

/* ==============================================
   "How it works" section (homepage)
   ============================================== */
.how-it-works-banner {
  background-color: #f7f5f0 !important;
}

.how-it-works-row {
  display: flex;
  align-items: center;
  gap: 48px;
}

.how-it-works-book {
  flex-shrink: 0;
}

.how-it-works-book-wrap {
  position: relative;
  width: 160px;
  aspect-ratio: 2 / 3;
}

.how-it-works-book-shape {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.how-it-works-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: hard-light;
  border-radius: 3px;
}

.how-it-works-text {
  flex: 1;
}

.how-it-works-text .h3-heading {
  margin-bottom: 10px !important;
  color: #294F4A !important;
}

.how-it-works-text .paragraph-regular {
  margin-bottom: 20px !important;
  color: #4a4a4a !important;
  line-height: 1.6 !important;
}

@media screen and (max-width: 767px) {
  .how-it-works-row {
    flex-direction: column;
    text-align: center;
    gap: 28px;
  }

  .how-it-works-book-wrap {
    width: 130px;
  }
}

/* ==============================================
   Navigation "Let's Talk" contact button
   ============================================== */
.nav-contact-button {
  background-color: #2a514c !important;
  color: white !important;
  border-radius: 6px !important;
  padding: 8px 18px !important;
  margin-left: 8px !important;
  font-size: 14px !important;
  letter-spacing: 0.02em;
  transition: background-color 0.2s ease, opacity 0.2s ease !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.nav-contact-button:hover {
  background-color: #1e3b37 !important;
  color: white !important;
}

/* Keep button styled even when on contact page */
.nav-contact-button.w--current {
  background-color: #2a514c !important;
  color: white !important;
  font-weight: 400 !important;
}

@media screen and (max-width: 991px) {
  .nav-contact-button {
    background-color: #2a514c !important;
    color: white !important;
    border-radius: 6px !important;
    padding: 12px 20px !important;
    margin: 8px 20px !important;
    text-align: center !important;
    width: calc(100% - 40px) !important;
  }
}

/* ==============================================
   Partners page styles
   ============================================== */

/* --- Base / Shared --- */
.partners-centered {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* --- Hero Section --- */
.partners-hero-section .h1-heading-3,
.partners-hero-section .partners-hero-heading {
  color: white !important;
}

.partners-hero-section .paragraph-regular,
.partners-hero-section .partners-hero-subtext {
  color: rgba(255, 255, 255, 0.9) !important;
}

.partners-hero-cta-row {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 8px;
}

.partners-hero-section .button-primary {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border: none !important;
  color: white !important;
}
.partners-hero-section .button-primary:hover {
  background-color: rgba(255, 255, 255, 0.25) !important;
}

.partners-hero-secondary {
  display: inline-block;
  padding: 12px 28px;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  color: white !important;
  background-color: transparent !important;
  border-radius: 6px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.partners-hero-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}

/* --- The Pitch feature grid --- */
.partners-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.partners-feature-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

.partners-feature-text .overline-small {
  margin-bottom: 8px;
}

.partners-feature-text .h2-heading {
  margin-bottom: 16px;
}

.partners-feature-text .paragraph-regular-2 {
  margin-bottom: 12px;
  color: #555;
}

.partners-feature-image-wrap {
  max-height: 400px;
  overflow: hidden;
  border-radius: 8px;
}

.partners-feature-image-wrap .partners-feature-image {
  max-height: 400px;
  object-position: center top;
}

/* --- Tab System --- */
.partners-tabs-section {
  padding-top: 72px;
  padding-bottom: 72px;
}

.partners-tabs {
  margin-top: 40px;
}

.partners-tab-menu {
  justify-content: center !important;
  margin-bottom: 48px !important;
  gap: 12px !important;
}

.partners-tab-link {
  padding: 10px 28px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  border: 2px solid #cbd0c8 !important;
  background-color: transparent !important;
  color: #2a514c !important;
  border-radius: 44px !important;
  transition: all 0.25s ease !important;
}

.partners-tab-link:hover {
  background-color: #e8f0ef !important;
  border-color: #9bc5c0 !important;
}

.partners-tab-link.w--current {
  background-color: #2a514c !important;
  color: white !important;
  border-color: #2a514c !important;
}

/* --- Tab Intro Paragraph --- */
.partners-tab-intro {
  max-width: 720px;
  margin: 0 auto 48px auto;
  text-align: center;
}

.partners-tab-intro .paragraph-regular-2 {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #555;
}

/* --- Scenario Blocks (full use case sections within tabs) --- */
.partners-scenario {
  margin-bottom: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid #e5e5e5;
}

.partners-scenario:last-of-type {
  border-bottom: none;
  margin-bottom: 40px;
  padding-bottom: 0;
}

.partners-scenario-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.partners-scenario-reversed .partners-scenario-grid {
  direction: rtl;
}

.partners-scenario-reversed .partners-scenario-grid > * {
  direction: ltr;
}

.partners-scenario-text .overline-small {
  color: #9bc5c0;
  margin-bottom: 8px;
}

.partners-scenario-heading {
  font-family: 'PT Serif', serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #2a514c !important;
  margin-bottom: 16px !important;
  line-height: 1.35 !important;
  font-style: italic !important;
}

.partners-scenario-story {
  color: #555 !important;
  line-height: 1.7 !important;
  margin-bottom: 20px !important;
}

.partners-scenario-outcome {
  background-color: #f7f6f2;
  border-left: 3px solid #9bc5c0;
  padding: 14px 18px;
  border-radius: 0 6px 6px 0;
  font-family: 'PT Serif', serif;
  font-size: 0.95rem;
  color: #2a514c;
  line-height: 1.6;
}

.partners-scenario-image-wrap {
  border-radius: 8px;
  overflow: hidden;
  max-height: 340px;
}

.partners-scenario-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* --- Rich Cards (additional use cases within tabs) --- */
.partners-more-heading {
  margin-top: 8px;
  margin-bottom: 24px;
  text-align: center;
}

.partners-more-heading .h4-heading {
  color: #2a514c;
}

.partners-use-case-cards {
  gap: 20px !important;
}

.partners-use-case-card {
  background-color: #f7f6f2;
  border-radius: 8px;
  padding: 28px 24px;
  border: 1px solid #e5e5e5;
  transition: border-color 0.2s ease;
}

.partners-use-case-card:hover {
  border-color: #9bc5c0;
}

.partners-use-case-card .h6-heading {
  margin-bottom: 8px;
  color: #2a514c;
}

.partners-use-case-card .paragraph-small-3 {
  color: #555;
  line-height: 1.6;
}

/* --- How It Works step cards --- */
.partners-steps {
  margin-top: 40px;
}

.partners-step {
  text-align: center;
  padding: 32px 24px;
}

.partners-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #2a514c;
  color: white;
  font-family: 'PT Serif', serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 16px;
}

/* Light variant for step numbers on dark background */
.partners-step-number-light {
  background-color: #9bc5c0 !important;
  color: #2a514c !important;
}

.partners-step .h6-heading {
  margin-bottom: 8px;
}

.partners-step .paragraph-regular-2 {
  color: #555;
}

/* Override heading + subtext color in dark How It Works section */
.partners-how-it-works .h2-heading {
  color: white !important;
}

/* Override step text color when inside dark section */
.partners-how-it-works .partners-step .h6-heading {
  color: white !important;
}

.partners-how-it-works .partners-step .paragraph-regular-2 {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* --- Trust / No Surprises items --- */
.partners-trust {
  margin-top: 40px;
}

.partners-trust-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 24px 16px;
}

.partners-trust-item .icon-wrapper {
  margin: 0 auto 12px auto !important;
}

.partners-trust-item .h6-heading {
  margin-bottom: 8px;
}

.partners-trust-item .paragraph-small-3 {
  color: #555;
}

/* --- Final CTA --- */
.partners-final-cta .column-large {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.partners-final-cta .partners-cta-inline {
  display: inline-block !important;
  width: auto !important;
  max-width: 280px !important;
  align-self: center !important;
  margin-top: 24px;
}

.partners-cta-subtext {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* --- Partners page responsive: TABLET --- */
@media screen and (max-width: 991px) {
  .partners-feature-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .partners-feature-image-wrap {
    order: -1;
  }

  .partners-scenario-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .partners-scenario-reversed .partners-scenario-grid {
    direction: ltr;
  }

  .partners-scenario-image-wrap {
    order: -1;
    max-height: 280px;
  }

  .partners-use-case-cards {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* --- Partners page responsive: MOBILE --- */
@media screen and (max-width: 767px) {
  .partners-feature-grid {
    gap: 24px;
  }

  .partners-feature-text {
    text-align: center;
  }

  .partners-feature-image-wrap {
    max-height: 300px;
  }

  .partners-feature-image-wrap .partners-feature-image {
    max-height: 300px;
  }

  .partners-tabs-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .partners-tab-menu {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .partners-tab-link {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
  }

  .partners-tab-intro {
    margin-bottom: 32px;
  }

  .partners-scenario {
    padding-bottom: 32px;
    margin-bottom: 32px;
  }

  .partners-scenario-heading {
    font-size: 1.3rem !important;
  }

  .partners-use-case-cards {
    grid-template-columns: 1fr !important;
  }

  .partners-hero-cta-row {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
}

/* --- Partners page responsive: SMALL MOBILE --- */
@media screen and (max-width: 479px) {
  .partners-tab-link {
    display: block !important;
    font-size: 14px !important;
    padding: 10px 20px !important;
  }
}

/* ==============================================
   Partners teaser sections (on services + homepage)
   ============================================== */
.partners-teaser {
  text-align: center;
  padding-top: 60px;
  padding-bottom: 60px;
}

.partners-teaser .h2-heading {
  margin-bottom: 12px;
}

.partners-teaser .paragraph-regular-2 {
  color: #555;
  margin-bottom: 24px;
}

.partners-teaser .button-outline {
  display: inline-block;
  padding: 12px 28px;
  border: 2px solid #2a514c;
  color: #2a514c;
  border-radius: 6px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.partners-teaser .button-outline:hover {
  background-color: #2a514c;
  color: white;
}

/* ==============================================
   Circle image fill (hero sections + homepage)
   ============================================== */
.content-image-background {
  background-color: #9bc5c0 !important;
}