/* ============================================================
   Mobile Adjustments (Overrides Only)
   File: assets/css/mobile-adjustments.css
   Goal: Mobile-specific tweaks without touching desktop styles
   Strategy: Keep selectors scoped + use max-width media queries
   ============================================================ */


/* ------------------------------------------------------------
   0) GLOBAL MOBILE BASELINE
   ------------------------------------------------------------ */

/* LG and down (Bootstrap-ish) */
@media (max-width: 991.98px) {

  /* Prevent sideways scroll from wide effects */
  html, body {
    overflow-x: hidden;
  }

  /* Give mobile a little breathing room globally */
  .container {
    padding-left: clamp(1rem, 3vw, 1.25rem);
    padding-right: clamp(1rem, 3vw, 1.25rem);
  }

  /* Tap targets: buttons + links feel better */
  a, button, .btn {
    -webkit-tap-highlight-color: transparent;
  }

  .btn, .btn-primary, .btn-outline, .btn-secondary {
    padding: clamp(0.75rem, 2.2vw, 0.95rem) clamp(1rem, 3vw, 1.25rem);
    border-radius: 999px;
  }
}

/* Phone-focused */
@media (max-width: 575.98px) {

  /* Reduce section spacing a touch (keeps flow tight) */
  section.section {
    padding-top: clamp(2.25rem, 6vw, 3rem);
    padding-bottom: clamp(2.25rem, 6vw, 3rem);
  }
}


/* ------------------------------------------------------------
   1) HEADER / NAV
   ------------------------------------------------------------ */

@media (max-width: 991.98px) {

  /* Keep header layout stable and prevent logo crowding */
  #header .container {
    gap: 0.75rem;
  }

  #header .logo img {
    max-height: 42px;
    height: auto;
    width: auto;
  }

  /* If the mobile nav menu gets cramped, reduce link padding slightly */
  .navmenu a,
  .navmenu a:focus {
    padding: 0.65rem 0.9rem;
  }
}


/* ------------------------------------------------------------
   2) HERO
   ------------------------------------------------------------ */

@media (max-width: 991.98px) {

  /* Make hero feel less tall on mobile but still premium */
  #hero,
  .hero {
    min-height: 0;
    padding-top: clamp(5.25rem, 10vw, 6.25rem);
    padding-bottom: clamp(2.5rem, 7vw, 3.5rem);
  }

  /* If you have a two-column hero layout, stack it */
  #hero .hero-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 5vw, 2rem);
    align-items: start;
  }

  /* Keep copy readable */
  #hero h1 {
    line-height: 1.05;
  }

  /* Keep Jim photo badge from overpowering */
  #hero .hero-photo,
  #hero .hero-photo-badge,
  #hero .hero-image {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}


@media (max-width: 991.98px) {

  /* Hide the whole right column (image + badge) */
  #hero .hero-right,
  .hero .hero-right {
    display: none !important;
  }

  /* Make the left column take full width */
  #hero .hero-layout,
  .hero .hero-layout {
    grid-template-columns: 1fr !important;
  }

  /* If hero-layout isn't grid in your build, this helps anyway */
  #hero .hero-left,
  .hero .hero-left {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 991.98px) {
  #hero .col-lg-6.hero-right,
  #hero .col-lg-5.hero-right,
  #hero .col-lg-4.hero-right {
    display: none !important;
  }
}
@media (max-width: 991.98px) {

  /* Make hero taller on mobile */
  #hero,
  .hero {
    min-height: 100svh;  /* better on iOS than 100vh */
    padding-top: clamp(5.5rem, 10vw, 6.5rem);
    padding-bottom: clamp(3.25rem, 9vw, 5rem);
  }

  /* If your hero wrapper is clipping, keep it visible */
  #hero,
  .hero {
    overflow: hidden; /* keep this if you need it; change to visible if something is still getting cut */
  }

  /* Bias the crop so you see more "top" (sky/sun) */
  #hero picture img,
  .hero picture img {
    object-position: 50% 20%;
  }
}

/* HERO: remove "Talk to Jim" button on mobile */
@media (max-width: 991.98px) {

  /* Hide the tel button (Talk to Jim) */
  #hero .hero-actions a[href^="tel:"],
  .hero .hero-actions a[href^="tel:"] {
    display: none !important;
  }

  /* Optional: tighten spacing so the remaining button doesn't look lonely */
  #hero .hero-actions,
  .hero .hero-actions {
    gap: 0.75rem;
  }
}


/* HERO (mobile): move content up so CTA doesn't cover the dog */
@media (max-width: 575.98px) {

  /* Shift the whole left content block upward */
  #hero .hero-left .hero-content {
    transform: translateY(clamp(-3rem, -7vw, -1.5rem));
  }

  /* Keep spacing tight so the block stays compact */
  #hero .hero-actions {
    margin-top: 0.75rem;
  }

  /* Optional: slightly smaller button so it doesn't sit as low */
  #hero .hero-actions .btn-primary {
    padding: 0.75rem 1.1rem;
  }
}

@media (max-width: 575.98px) {
  #hero .hero-background picture img {
    object-position: 50% 75%;
  }
}

/* HERO (phones): show more dog by moving content up + shifting crop */
@media (max-width: 575.98px) {

  /* Give the hero more vertical room */
  #hero.hero {
    min-height: 110svh; /* try 105–120svh if needed */
    padding-bottom: 1.25rem;
  }

  /* Move all hero copy + CTA upward more */
  #hero .hero-left .hero-content {
    transform: translateY(clamp(-6.5rem, -16vw, -4rem));
  }

  /* Shift the background "focus" upward so the dog lands lower */
  #hero .hero-background picture img {
    object-position: 50% 10%;
  }

  /* Tighten spacing so the CTA doesn’t drift downward */
  #hero .hero-actions {
    margin-top: 0.6rem;
  }
}

@media (max-width: 575.98px) {
  #hero .hero-actions {
    transform: translateY(clamp(5.5rem, 16vw, 9rem)) !important;
  }
}

/* ABOUT (mobile): center the intro content */
@media (max-width: 991.98px) {

  #about .about-content {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 38rem; /* keeps it readable when centered */
  }

  /* Center any “lead” lines nicely */
  #about .about-content .lead {
    margin-left: auto;
    margin-right: auto;
  }

  /* If you’re using the .about-intro style with a left border, remove it on mobile */
  #about .about-content .about-intro {
    padding-left: 0 !important;
    border-left: 0 !important;
  }
}

/* ------------------------------------------------------------
   3) ABOUT
   ------------------------------------------------------------ */

@media (max-width: 991.98px) {

  #about .row,
  .about .row {
    row-gap: clamp(1.25rem, 4vw, 2rem);
  }

  /* If you have promise cards / icon cards, make them 1 column */
  #about .promise-cards,
  #about .about-cards,
  .about .promise-cards,
  .about .about-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
}


/* ------------------------------------------------------------
   4) PROCESS (your icon circle + sizing lives here)
   ------------------------------------------------------------ */

@media (max-width: 991.98px) {

  /* Stack process steps cleanly */
  #process .process-step {
    padding: clamp(1rem, 3.5vw, 1.25rem);
  }

  /* Keep header from colliding */
  #process .process-header {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.9rem;
    align-items: center;
  }

  /* Icon circle wrapper: contains the square image */
  #process .process-icon-wrapper {
    width: clamp(44px, 9vw, 54px);
    height: clamp(44px, 9vw, 54px);
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--default-color), transparent 15%);
    display: grid;
    place-items: center;
    overflow: hidden; /* key: forces the image to appear circular */
    flex: 0 0 auto;
    background: color-mix(in srgb, var(--surface-color), transparent 10%);
  }

  /* The image itself: never overflow the circle, stay centered */
  #process .process-icon-wrapper img {
    width: 72%;
    height: 72%;
    object-fit: contain;
    display: block;
    border-radius: 0; /* wrapper is doing the rounding */
  }

  /* Prevent icon from pushing into text */
  #process .process-meta h3 {
    margin: 0;
    font-size: clamp(1.15rem, 2.2vw + 1rem, 1.35rem);
  }

  #process .process-tag {
    display: inline-block;
    margin-top: 0.2rem;
    font-size: 0.95rem;
  }
}

/* Even tighter on phones */
@media (max-width: 575.98px) {
  #process .process-icon-wrapper {
    width: 46px;
    height: 46px;
  }

  #process .process-header {
    column-gap: 0.75rem;
  }
}

/* ------------------------------------------------------------
   ABOUT (mobile): make it feel like a designed card, not text on a page
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {

  /* Turn the whole text block into a soft card */
  #about .about-content{
    text-align: center !important;
    max-width: 36rem !important;
    margin: 0 auto !important;

    padding: 1.15rem 1.05rem 1.25rem !important;
    border-radius: 18px !important;

    background: color-mix(in srgb, #ffffff, #EAF6FF 65%) !important;
    border: 1px solid rgba(6, 30, 37, 0.10) !important;
    box-shadow: 0 18px 36px rgba(6, 30, 37, 0.10) !important;
  }

  /* Headline: slightly larger, tighter */
  #about .about-content h2{
    font-size: clamp(1.65rem, 1.25rem + 2vw, 2.15rem) !important;
    line-height: 1.08 !important;
    margin-bottom: 0.65rem !important;
  }

  /* Body text: keep readable line length + softer color */
  #about .about-content p{
    max-width: 32rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    color: color-mix(in srgb, var(--default-color), transparent 14%) !important;
  }

  /* Lead lines: slightly bolder, more “hero-y” */
  #about .about-content .lead{
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
    font-weight: 750 !important;
    color: var(--heading-color) !important;
    margin-bottom: 0.9rem !important;
  }

  /* Make the long middle paragraph feel less like a wall */
  #about .about-content p:not(.lead):not(.about-service-area-stamp){
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
    margin-top: 0.65rem !important;
    margin-bottom: 0.65rem !important;
  }

  /* CTA buttons: stacked, full width, centered */
  #about .about-actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
    margin-top: 1rem !important;
  }

  #about .about-actions a{
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Service area stamp: better mobile sizing + no “pushed down” look */
  #about .about-service-area-stamp{
    width: 100% !important;
    max-width: 28rem !important;

    font-size: 0.95rem !important;
    line-height: 1.2 !important;

    padding: 0.75rem 0.85rem !important;
    gap: 0.55rem !important;

    margin: 1rem auto 0 !important;
    top: 0 !important; /* remove the offset so it sits naturally */
    border-radius: 16px !important; /* less “pill-y”, more “badge card” */
  }

  #about .about-service-area-stamp .asa-dot{
    width: 0.55rem !important;
    height: 0.55rem !important;
  }
}

/* ------------------------------------------------------------
   ABOUT (mobile): warmer California light + friendlier spacing
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {

  /* Warmer, sunnier card background */
  #about .about-content{
    background:
      radial-gradient(circle at 18% 10%,
        color-mix(in srgb, #FAE79A, #ffffff 65%) 0%,
        transparent 55%),
      radial-gradient(circle at 85% 22%,
        color-mix(in srgb, #EAF6FF, #ffffff 55%) 0%,
        transparent 60%),
      color-mix(in srgb, #ffffff, #FAE79A 10%) !important;

    border: 1px solid rgba(6, 30, 37, 0.10) !important;
    box-shadow: 0 20px 44px rgba(6, 30, 37, 0.10) !important;

    padding: 1.25rem 1.1rem 1.35rem !important; /* more air */
  }

  /* Make text feel softer and easier to scan */
  #about .about-content p{
    font-size: 1.02rem !important;
    line-height: 1.7 !important;
    color: color-mix(in srgb, var(--default-color), transparent 10%) !important;
  }

  /* Lead lines: friendly emphasis, not shouty */
  #about .about-content .lead{
    font-size: 1.08rem !important;
    line-height: 1.6 !important;
    font-weight: 750 !important;
    margin-bottom: 1.05rem !important;
  }

  /* Give the middle paragraph more breathing room */
  #about .about-content p:not(.lead):not(.about-service-area-stamp){
    margin-top: 0.8rem !important;
    margin-bottom: 0.8rem !important;
  }

  /* Headline: a touch more spacious */
  #about .about-content h2{
    letter-spacing: 0.01em !important;
    margin-bottom: 0.75rem !important;
  }

  /* Service area stamp: softer, warmer, more “badge” than “alert” */
  #about .about-service-area-stamp{
    background: color-mix(in srgb, #ffffff, #FAE79A 12%) !important;
    border: 1px solid color-mix(in srgb, #C7443A, transparent 55%) !important;

    font-size: 0.98rem !important;
    padding: 0.8rem 0.9rem !important;
  }
}
/* ------------------------------------------------------------
   PROCESS (mobile): layout + readability + spacing
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {

  /* Give the section breathing room and keep background from overpowering */
  #process.process {
    position: relative;
    padding-top: clamp(2.5rem, 6vw, 3.25rem);
    padding-bottom: clamp(2.5rem, 6vw, 3.25rem);
  }

  #process .section-bg {
    opacity: 0.18;              /* soften background image */
    transform: translateY(-6%); /* slight reposition */
  }

  /* Stack columns + control spacing */
  #process .row.align-items-center {
    row-gap: clamp(1.5rem, 5vw, 2.25rem);
  }

  /* Intro column */
  #process .process-intro h2 {
    font-size: clamp(1.8rem, 1.2rem + 2vw, 2.25rem);
    line-height: 1.12;
  }

  #process .process-lead {
    font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.25rem);
    line-height: 1.55;
  }

  /* Choices list: tighter + less indentation */
  #process .process-choices {
    padding-left: 0;
    margin: 1rem 0 1.25rem;
  }

  #process .process-choice {
    padding: 0.9rem 0;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  }

  #process .process-choice:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  }

  /* Metrics become a 2-col grid on tablet, 1-col on phone (see below) */
  #process .process-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.1rem;
  }

  #process .metric-card {
    padding: 0.9rem;
  }

  /* CTA buttons: stacked, full-width */
  #process .ps-process-cta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-top: 1.25rem;
  }

  #process .ps-process-cta a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Steps column: tighter card spacing */
  #process .process-collection {
    display: grid;
    gap: 0.85rem;
  }

  #process .process-step {
    padding: clamp(1rem, 3.5vw, 1.25rem);
  }

  /* Header layout inside each step */
  #process .process-header {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.85rem;
    align-items: center;
    margin-bottom: 0.35rem;
  }

  #process .process-meta h3 {
    font-size: clamp(1.12rem, 0.9rem + 0.9vw, 1.35rem);
    line-height: 1.15;
    margin: 0;
  }

  #process .process-tag {
    margin-top: 0.2rem;
    display: inline-block;
    font-size: 0.95rem;
  }

  /* Icon sizing: slightly smaller on mobile so it doesn’t compete */
  #process .ps-process-icon {
    width: 54px;
    height: 54px;
  }
}

/* Phone-specific: center intro + make metrics 1-column */
@media (max-width: 575.98px) {

  /* Optional: center the intro content (feels nice on phones) */
  #process .process-intro {
    text-align: center;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
  }

  #process .intro-badge {
    justify-content: center;
  }

  /* Choices read better centered if we cap width */
  #process .process-choices,
  #process .process-lead {
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
    text-align: left; /* keep body readable even if intro is centered */
  }

  /* Metrics: single column */
  #process .process-metrics {
    grid-template-columns: 1fr;
  }

  /* Icons just a touch smaller on phones */
  #process .ps-process-icon {
    width: 48px;
    height: 48px;
  }
}

/* ------------------------------------------------------------
   PROCESS INTRO (mobile): badge + choices + metrics as cards
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {

  /* Intro block becomes a soft card so it doesn't read like flat text */
  #process .process-intro{
    padding: 1.05rem !important;
    border-radius: 16px !important;
    border: 1px solid rgba(6, 30, 37, 0.10) !important;
    background: color-mix(in srgb, #ffffff, #2A78A6 4%) !important;
    box-shadow: 0 16px 34px rgba(6, 30, 37, 0.10) !important;
  }

  /* Badge pill */
  #process .intro-badge{
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.55rem !important;

    padding: 0.45rem 0.75rem !important;
    border-radius: 999px !important;

    background: #ffffff !important;
    border: 1px solid rgba(6, 30, 37, 0.10) !important;

    color: var(--heading-color) !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
  }

  #process .intro-badge i{
    color: #2A78A6 !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
  }

  /* Heading + lead */
  #process .process-intro h2{
    margin-top: 0.85rem !important;
    margin-bottom: 0.55rem !important;
    font-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.1rem) !important;
    line-height: 1.12 !important;
  }

  #process .process-lead{
    margin-bottom: 0.95rem !important;
    color: color-mix(in srgb, var(--default-color), transparent 10%) !important;
    font-size: clamp(1.02rem, 0.95rem + 0.55vw, 1.2rem) !important;
    line-height: 1.55 !important;
  }

  /* Choices -> mini-cards */
  #process .process-choices{
    list-style: none !important;
    padding: 0 !important;
    margin: 0.85rem 0 1rem !important;

    display: grid !important;
    gap: 0.65rem !important;
  }

  #process .process-choice{
    padding: 0.9rem !important;
    border-radius: 14px !important;
    border: 1px solid rgba(6, 30, 37, 0.10) !important;
    background: #ffffff !important;
    box-shadow: 0 12px 26px rgba(6, 30, 37, 0.08) !important;
  }

  #process .process-choice__title{
    display: block !important;
    font-family: var(--heading-font) !important;
    font-weight: 900 !important;
    font-size: 1.05rem !important;
    color: var(--heading-color) !important;
    margin-bottom: 0.35rem !important;
  }

  #process .process-choice__text{
    margin: 0 !important;
    color: color-mix(in srgb, var(--default-color), transparent 16%) !important;
    font-size: 0.98rem !important;
    line-height: 1.45 !important;
  }

  /* Metrics -> compact card grid */
  #process .process-metrics{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
    margin-top: 0.95rem !important;
  }

  #process .metric-card{
    padding: 0.85rem !important;
    border-radius: 14px !important;
    border: 1px solid rgba(6, 30, 37, 0.10) !important;

    background: color-mix(in srgb, #ffffff, #D7E8C8 18%) !important;
    box-shadow: 0 12px 26px rgba(6, 30, 37, 0.08) !important;
  }

  #process .metric-value{
    font-family: var(--heading-font) !important;
    font-weight: 900 !important;
    color: var(--heading-color) !important;
    font-size: 1.02rem !important;
    line-height: 1.1 !important;
  }

  #process .metric-label{
    margin-top: 0.25rem !important;
    color: color-mix(in srgb, var(--default-color), transparent 22%) !important;
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
  }
}

/* Phone tweak: metrics become 1-column so nothing feels cramped */
@media (max-width: 575.98px) {
  #process .process-metrics{
    grid-template-columns: 1fr !important;
  }
}


/* ------------------------------------------------------------
   5) SERVICES (tabs/cards)
   ------------------------------------------------------------ */

@media (max-width: 991.98px) {

  /* If tabs are horizontal and cramped, let them wrap */
  #services .nav-tabs,
  .services .nav-tabs {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Cards: stack */
  #services .service-cards,
  .services .service-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* MOBILE: highlight stats layout */
@media (max-width: 991.98px) {
  .highlight-stats {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    text-align: center !important;
  }

  .highlight-stats .stat-item {
    padding: 0.9rem !important;
  }

  .highlight-stats .stat-value {
    display: block !important;
    font-size: 1.25rem !important;
    line-height: 1.1 !important;
  }

  .highlight-stats .stat-label {
    display: block !important;
    margin-top: 0.25rem !important;
    font-size: 0.95rem !important;
  }
}
/* ------------------------------------------------------------
   HIGHLIGHT STATS (mobile): replicate the centered stat card look
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {

  /* If you know the parent section ID, put it in front (example: #services or #pricing).
     Leaving it generic here so it works immediately. */
  .highlight-stats{
    /* card */
    max-width: 560px !important;
    margin: 1rem auto 0 !important;
    padding: clamp(1.15rem, 3.5vw, 1.6rem) !important;

    border-radius: 18px !important;
    border: 1px solid rgba(6, 30, 37, 0.12) !important;

    /* warm, light surface (subtle tint from your red accent) */
    background: color-mix(in srgb, #ffffff, #C7443A 6%) !important;

    /* soft drop shadow */
    box-shadow: 0 20px 40px rgba(6, 30, 37, 0.22) !important;

    /* layout */
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: clamp(0.85rem, 2.5vw, 1.2rem) !important;
    text-align: center !important;
  }

  .highlight-stats .stat-item{
    padding: 0 !important; /* keep clean like your screenshot */
  }

  .highlight-stats .stat-value{
    display: block !important;
    font-family: var(--heading-font) !important;
    font-weight: 900 !important;
    font-size: clamp(1.35rem, 2.6vw + 1.05rem, 1.8rem) !important;
    line-height: 1.05 !important;
    color: #C7443A !important;
    letter-spacing: 0.01em !important;
  }

  .highlight-stats .stat-label{
    display: block !important;
    margin-top: 0.35rem !important;

    font-family: var(--default-font) !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    line-height: 1.25 !important;

    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;

    color: color-mix(in srgb, var(--default-color), transparent 25%) !important;
  }
}

@media (max-width: 991.98px) {
  .highlight-stats{
    margin: 1rem auto 1.25rem !important; /* adds bottom space */
  }
}

/* ------------------------------------------------------------
   FEATURE POINTS (mobile): card-like list, more visual + scannable
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {

  .feature-points{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    margin-top: 1rem !important;
  }

  .feature-points .point-item{
    display: grid !important;
    grid-template-columns: 34px 1fr !important;
    gap: 0.75rem !important;
    align-items: start !important;

    padding: 0.95rem 0.95rem !important;

    border-radius: 14px !important;
    border: 1px solid rgba(6, 30, 37, 0.10) !important;
    background: color-mix(in srgb, #ffffff, #C7443A 4%) !important;

    box-shadow: 0 14px 28px rgba(6, 30, 37, 0.12) !important;
  }

  /* Icon becomes a small “badge” instead of inline text */
  .feature-points .point-item > i{
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;

    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid rgba(6, 30, 37, 0.10) !important;

    color: #C7443A !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;

    margin-top: 0.1rem !important;
  }

  .feature-points .point-head{
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
  }

  .feature-points .point-title{
    font-family: var(--heading-font) !important;
    font-weight: 900 !important;
    color: var(--heading-color) !important;
    font-size: 1.05rem !important;
    line-height: 1.15 !important;
  }

  .feature-points .point-price{
    font-family: var(--heading-font) !important;
    font-weight: 900 !important;
    color: #C7443A !important;
    font-size: 1.02rem !important;
    white-space: nowrap !important;
  }

  .feature-points .point-desc{
    margin-top: 0.35rem !important;
    font-family: var(--default-font) !important;
    color: color-mix(in srgb, var(--default-color), transparent 18%) !important;
    font-size: 0.98rem !important;
    line-height: 1.45 !important;
  }

  /* If an item has no price, keep spacing clean */
  .feature-points .point-head .point-price:empty{
    display: none !important;
  }
}

/* Phone tweak: let the title/price stack if it gets tight */
@media (max-width: 575.98px) {
  .feature-points .point-head{
    flex-wrap: wrap !important;
  }

  .feature-points .point-price{
    margin-left: 0 !important;
  }
}

/* ------------------------------------------------------------
   6) TESTIMONIALS (Swiper)
   ------------------------------------------------------------ */

@media (max-width: 991.98px) {

  /* Give slides full width feel */
  #testimonials .swiper,
  #testimonials .swiper-wrapper {
    padding-left: 0;
    padding-right: 0;
  }

  #testimonials .testimonial-card {
    margin-left: auto;
    margin-right: auto;
    max-width: 520px;
  }

  /* Make controls easier to tap */
  #testimonials .swiper-button-next,
  #testimonials .swiper-button-prev {
    width: 44px;
    height: 44px;
  }
}


/* ------------------------------------------------------------
   7) PRICING
   ------------------------------------------------------------ */

@media (max-width: 991.98px) {

  #pricing .pricing-cards,
  .pricing .pricing-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  #pricing .pricing-card {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ------------------------------------------------------------
   PRICING (mobile): center price stack + heading font + bigger $/amount
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {

  /* Center the whole pricing area */
  #pricing .plan-pricing,
  .pricing .plan-pricing,
  .plan-pricing {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Center the inline pieces and make them feel like one unit */
  #pricing .price-wrapper,
  .pricing .price-wrapper,
  .price-wrapper {
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 0.35rem !important;

    font-family: var(--heading-font) !important; /* price uses heading font */
    letter-spacing: 0.01em !important;
  }

  /* Make $ a bit larger */
  #pricing .price-wrapper .currency,
  .pricing .price-wrapper .currency,
  .price-wrapper .currency {
    font-size: clamp(1.15rem, 1rem + 1.2vw, 1.55rem) !important;
    font-weight: 900 !important;
    color: var(--heading-color) !important;
    transform: translateY(-0.1em) !important; /* nudges $ up slightly */
  }

  /* Make the number the star */
  #pricing .price-wrapper .amount,
  .pricing .price-wrapper .amount,
  .price-wrapper .amount {
    font-size: clamp(2.25rem, 1.7rem + 3.2vw, 3rem) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: var(--heading-color) !important;
  }

  /* Keep /month smaller but still strong */
  #pricing .price-wrapper .period,
  .pricing .price-wrapper .period,
  .price-wrapper .period {
    font-size: clamp(1rem, 0.95rem + 0.7vw, 1.2rem) !important;
    font-weight: 800 !important;
    color: color-mix(in srgb, var(--default-color), transparent 20%) !important;
  }

  /* Subtitle line: centered + slightly larger */
  #pricing .billing-info,
  .pricing .billing-info,
  .billing-info {
    margin-top: 0.35rem !important;
    margin-bottom: 0 !important;
    font-size: clamp(0.98rem, 0.92rem + 0.5vw, 1.1rem) !important;
    color: color-mix(in srgb, var(--default-color), transparent 18%) !important;
  }
}


/* ------------------------------------------------------------
   8) CALL TO ACTION
   ------------------------------------------------------------ */

@media (max-width: 991.98px) {
  #call-to-action .cta-inner,
  .call-to-action .cta-inner {
    text-align: center;
  }

  #call-to-action .cta-actions,
  .call-to-action .cta-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    align-items: center;
    justify-items: center;
  }
}
/* ------------------------------------------------------------
   CTA BOX + BENEFITS + TRUST METRICS (mobile)
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {

  /* Make the whole box feel like a real mobile card */
  .cta-box{
    padding: clamp(1rem, 3.5vw, 1.4rem) !important;
    border-radius: 18px !important;
    border: 1px solid rgba(6, 30, 37, 0.10) !important;
    background: color-mix(in srgb, #ffffff, #2A78A6 4%) !important;
    box-shadow: 0 18px 40px rgba(6, 30, 37, 0.12) !important;
  }

  .cta-header{
    text-align: center !important;
  }

  .cta-header h3{
    font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.85rem) !important;
    line-height: 1.12 !important;
    margin-bottom: 0.4rem !important;
  }

  .cta-header p{
    margin: 0 auto !important;
    max-width: 38rem !important;
    color: color-mix(in srgb, var(--default-color), transparent 16%) !important;
    font-size: 1.02rem !important;
    line-height: 1.45 !important;
  }

  /* Benefits grid becomes single column with “card rows” */
  .benefits-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    margin-top: 1rem !important;
  }

  .benefit-item{
    display: grid !important;
    grid-template-columns: 44px 1fr !important;
    gap: 0.75rem !important;
    align-items: start !important;

    padding: 0.9rem !important;
    border-radius: 16px !important;
    border: 1px solid rgba(6, 30, 37, 0.10) !important;
    background: #ffffff !important;
    box-shadow: 0 14px 28px rgba(6, 30, 37, 0.08) !important;
  }

  .benefit-icon{
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;

    background: color-mix(in srgb, #ffffff, #D7E8C8 22%) !important;
    border: 1px solid rgba(6, 30, 37, 0.10) !important;
  }

  /* Make sure the icon image fits the circle */
  .benefit-icon img{
    width: 68% !important;
    height: 68% !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* “LG” icon variant stays consistent on mobile */
  .benefit-icon--lg{
    width: 44px !important;
    height: 44px !important;
  }

  .benefit-content h4{
    margin: 0 !important;
    font-family: var(--heading-font) !important;
    font-weight: 900 !important;
    font-size: 1.05rem !important;
    line-height: 1.15 !important;
    color: var(--heading-color) !important;
  }

  .benefit-content p{
    margin: 0.35rem 0 0 !important;
    font-size: 0.98rem !important;
    line-height: 1.45 !important;
    color: color-mix(in srgb, var(--default-color), transparent 18%) !important;
  }

  /* Actions: stacked, centered */
  .cta-box .action-area{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
    margin-top: 1rem !important;
  }

  .cta-box .action-area a{
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }


/* ------------------------------------------------------------

/* ------------------------------------------------------------
   CTA TRUST METRICS (mobile): full-width cards, consistent bg, white pill text
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {

  .trust-metrics--cta{
    display: grid !important;                 /* <-- critical */
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;

    width: 100% !important;
    max-width: none !important;
    margin: 1rem 0 0 !important;

    justify-items: stretch !important;        /* children stretch */
    align-items: stretch !important;
    text-align: center !important;
  }

  .trust-metrics--cta .metric-item{
    display: block !important;                /* avoid shrink-to-fit */
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;

    padding: 1.05rem 1rem !important;
    border-radius: 18px !important;

    background: color-mix(in srgb, #ffffff, #D7E8C8 55%) !important;
    border: 2px solid color-mix(in srgb, #7D9B00, #ffffff 35%) !important;

    box-shadow: 0 18px 34px rgba(6, 30, 37, 0.10) !important;
    box-sizing: border-box !important;
  }

  .trust-metrics--cta .metric-value{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0.45rem 1.05rem !important;
    border-radius: 999px !important;

    background: #7D9B00 !important;
    color: #ffffff !important;

    font-family: var(--heading-font) !important;
    font-weight: 900 !important;
    font-size: 1.12rem !important;
    line-height: 1.05 !important;

    box-shadow: 0 14px 26px rgba(125, 155, 0, 0.22) !important;
  }

  .trust-metrics--cta .metric-label{
    margin-top: 0.55rem !important;
    font-size: 1.02rem !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    color: var(--heading-color) !important;
  }

}
/* ------------------------------------------------------------
   9) FAQ
   ------------------------------------------------------------ */

@media (max-width: 991.98px) {
  #faq .faq-container,
  .faq .faq-container {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ------------------------------------------------------------
   10) FOOTER
   ------------------------------------------------------------ */

@media (max-width: 991.98px) {
  #footer .footer-top .row {
    row-gap: 1.5rem;
  }

  #footer .footer-links ul {
    margin: 0;
    padding: 0;
  }
}