@import url("style-desktop.css");

/* Outfit */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Outfit-Regular.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/Outfit-Bold.ttf') format('truetype');
  }
  
  /* Playfair Display */
  @font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/PlayfairDisplay-Bold.ttf') format('truetype');
  }
  
  /* Patrick Hand */
  @font-face {
    font-family: 'Patrick Hand';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/PatrickHand-Regular.ttf') format('truetype');
  }
  
  /* Roboto */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/Roboto-Light.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
  }
  
  /* Lora */
  @font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Lora-Regular.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/Lora-Bold.ttf') format('truetype');
  }
  
  /* Pacifico */
  @font-face {
    font-family: 'Pacifico';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Pacifico-Regular.ttf') format('truetype');
  }
  
  /* Yellowtail */
  @font-face {
    font-family: 'Yellowtail';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Yellowtail-Regular.ttf') format('truetype');
  }
  
  /* Sniglet */
  @font-face {
    font-family: 'Sniglet';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Sniglet-Regular.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Sniglet';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/Sniglet-ExtraBold.ttf') format('truetype');
  }
  
  /* Poppins */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/Poppins-Bold.ttf') format('truetype');
  }
  
  /* Boldonse */
  @font-face {
    font-family: 'Boldonse';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Boldonse-Regular.ttf') format('truetype');
  }
  
  /* Cal Sans */
  @font-face {
    font-family: 'Cal Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/CalSans-Regular.ttf') format('truetype');
  }
  

  /* Bernard MT Condensed */
@font-face {
    font-family: 'Bernard MT Condensed';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/BernardMTCondensed-Regular.ttf') format('truetype');
  }
  


/* style-mobile.css */
@media only screen and (max-width: 768px) {
    /* ─── RESET & SECTION PADDING ───────────────────────────────────────── */
    section {
      padding: 1rem;
    }
    .services-kittens,
    .hero-bottom-img {
      display: none !important;
    }
  
    /* ─── HERO ──────────────────────────────────────────────────────────── */
    #hero {
      display: flex !important;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      height: auto !important;
      padding: 6rem 1rem 2rem;
      overflow: hidden;
    }
    .logo-hero {
      width: 150px;
      height: 150px;
      margin-bottom: 1rem;
    }
    .headline-rotate {
      font-size: 1.5rem;
      max-width: 90%;
      line-height: 1.2;
      margin: .5rem 0 1rem;
    }
    .hero-btn {
      margin-top: -3rem;
    }
  
    /* ─── SERVICES ──────────────────────────────────────────────────────── */
    .services-cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      margin-top: 1rem;
    }
    .services-cards .card {
      padding: 0.75rem;
      font-size: 0.9rem;
    }
    .services-cards .service-icon {
      font-size: 2rem;
    }
    .services-cards .card-title {
      font-size: 1.1rem;
    }
  
    /* ─── SAFETY ───────────────────────────────────────────────────────── */
    #safety {
      display: flex !important;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 2rem 1rem;
    }
    .safety-animation,
    .safety-hover-image {
      display: none !important;
    }
    .safety-list-wrapper {
      width: 100%;

      margin: 0 auto;
    }
    .safety-list {
      display: block;
      list-style-position: inside;
      padding: 0;
    }
    .safety-list li {
      padding: 0.5rem 0.75rem;
      margin-bottom: 0.5rem;
      font-size: 1rem;
    }
  
    /* ─── GALLERY ─────────────────────────────────────────────────────── */
    #gallery .section-title {
      text-align: center;
      margin-bottom: 1rem;
    }
    .photo-stack-wrapper {
      max-width: 100%;
    }
    .photo-stack {
      width: 100%;
      height: auto;
    }
  
    /* ─── REVIEWS ─────────────────────────────────────────────────────── */
    .review-rotator,
    .review-item,
    .review-card {
      display: none !important;
    }
    .review-cta {
      display: flex !important;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      margin: 2rem 0;
    }
    .qr-box img {
      width: 120px;
      height: 120px;
    }
    .cta-text p {
      font-size: 1rem;
      line-height: 1.4;
    }
  
    /* ─── CONTACT & PARTNERS ──────────────────────────────────────────── */
    #contact .social-links {
      gap: 0.5rem;
    }
    #contact .social-link {
      font-size: 0.9rem;
      padding: 0.5rem 0.75rem;
    }
    #partners {
      display: none;
    }


    #hero .hero-title-main {
        /* smaller min/max so no overflow */
        font-size: clamp(60px, 8vw, 60px) !important;
        line-height: 1.1 !important;
        white-space: normal;     /* allow wrapping if needed */
      }
    
      /* sub-headline under it */
      #hero .hero-title-sub {
        font-size: clamp(14px, 4vw, 20px) !important;
        line-height: 1.2 !important;
        white-space: normal;
        margin-top: 0.5rem;      /* tighten up spacing */
      }

      .hero-title-main .hero-paw {
        position: absolute;
        top: -8px;
        right: -23px;
        font-size: 22px;
        transform: rotate(20deg);
        color: #000;
    }


#about   { padding:1rem !important;}


      /* shrink the section title */
  #about .section-title {
    font-size: clamp(1.8rem, 6vw, 2.2rem) !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.2;
    text-align: center;
  }

  /* reduce overall padding and center content */
  #about .about-content {
    padding: 1rem !important;
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
  }

  /* tighter paragraph text */
  #about p {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1rem !important;
  }

  /* portrait: smaller circle and center */
  .about-portrait-wrapper {
    width: 300px !important;
    margin: 0 auto 1rem !important;
    float: none !important;
  }
  .about-portrait {
    width: 120px !important;
    height: 120px !important;
    padding-top: 120px !important;
  }
  .about-portrait img {
    width: 120px !important;
    height: 120px !important;
    object-fit: cover;
  }
  .portrait-info {
    font-size: 0.8rem !important;
    line-height: 1.2;
  }

  /* Portrait name centered and no wrapping on mobile */
.portrait-info {
    text-align: center !important;
  }
  
  .portrait-name {
    display: inline-block !important;   /* so we can center it as a unit */
    white-space: nowrap !important;     /* prevent wrapping */
    margin: 0 auto !important;          /* center in its container */
  }

  .portrait-position {
    text-align: center !important;
    display: block !important;
  }

  /* core-values grid → single column + smaller items */
  #about .about-values {
    display: block !important;
    margin: 1rem auto !important;
    max-width: 450px;
    padding: 0;
  }
  #about .about-values li {
    font-size: 0.9rem !important;
    padding: 0.5rem 0.75rem !important;
    margin-bottom: 0.5rem;
  }

  /* ensure the paw-overlay stays subtle or hide it */
  #about .paw-overlay {
    display: none !important;
  }


  /* mobile only: show button, hide the text until they click */
#read-journey-btn {
    display: inline-block !important;
  }
  .about-content .about-text {
    display: none !important;
  }

  /* ABOUT: full-width, hidden overflow, truncated text + read-more */
#about .about-content {
    width: 100% !important;
    padding: 0 !important;    /* remove left/right gutter */
    max-width: none !important;
    box-sizing: border-box;
  }
  
  /* wrap all your paragraphs in .about-text to clamp */
  #about .about-text {
    max-height: 5.5em;        /* show approx. 3–4 lines */
    overflow: hidden;
    position: relative;
    transition: max-height .4s ease;
  }
  
  /* button styling */
  #about .read-more-btn {
    display: block;
    margin: 0.75rem auto 1.5rem;
    font-size: 0.9rem;
    background: none;
    border: none;
    color: var(--gold);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  
  /* when #about gets .expanded, show all text */
  #about.expanded .about-text {
    max-height: none;
  }
  

/* SERVICES: shrink cards, tighter grid */
.services-cards {
    gap: 1rem !important;
    margin-top: 1rem !important;
  }
  .services-cards .card {
    padding: 0.5rem !important;
    font-size: 0.9rem !important;
    margin: 0 !important;
  }
  .services-cards .service-icon {
    font-size: 2rem !important;
  }
  .services-cards .card-title {
    font-size: 1.1rem !important;
    margin-bottom: 0.25rem !important;
  }

  
  /* hide kitten bg and safety images on mobile */
.services-kittens,
#about .paw-overlay,
#safety .safety-animation
 { display: none !important; }

/* keep only your “leave us a review” QR block */
.review-cta { display: flex !important; }


/* ─── Read-My-Journey Modal ───────────────────────────────────────────── */
#journey-modal {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.8);
    justify-content: center; align-items: center;
    padding: 1rem; z-index: 2000;
  }
  #journey-modal.show {
    display: flex;
  }
  .journey-content {
    background: var(--black);
    color: var(--gold);
    border-radius: 8px;
    max-width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 1.5rem;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }
  .close-journey {
    position: absolute;
    top: 0.5rem; right: 0.75rem;
    font-size: 1.5rem; color: #333;
    cursor: pointer; line-height: 1;
  }
  /* Read button */
 /* flat “Read My Journey” button */
.read-journey-btn {
    background-color: #fae6c5;    /* same as page background */
    color: var(--black);               /* text in black */
    border: 1px solid #ffd588;    /* thin black outline */
    border-radius: 0;                  /* sharp corners */
    box-shadow: none;                  /* no shadow */
    padding: 0.75rem 1.5rem;           /* adjust to taste */
    font-family: 'Cal Sans', sans-serif;     /* or whatever font you prefer */
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.05em;                 /* adjust for readability */
    cursor: pointer;
    display: inline-block;
    text-align: center;
    text-decoration: none;             /* if it’s an <a> */
    width: 300px;
  }
  
  /* example hover state, still flat */
  .read-journey-btn:hover {
    background-color:  #fae6c5;
    color: var(--black);
    border-color: var(--black);
  }
  /* Hide original about-text until modal opens */
  .about-content .about-text { display: none; }
  
  #about .section-title {
    display: none;
  }


  #services .section-title {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  /* Stack cards in a single column, tighten spacing */
  .services-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 0 1rem;
    margin-top: 1rem;
  }

  .services-cards .card {
    padding: 0.75rem;
    margin: 0;
    font-size: 0.9rem;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);             /* flatter look on small */
    transition: transform 0.2s ease;
  }
  .services-cards .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

  /* Icon and title sizing */
  .services-cards .service-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }
  .services-cards .card-title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }
  .services-cards .card p {
    font-size: 0.85rem;
    line-height: 1.4;
  }

  /* Hide any decorative kitten image on mobile */
  .services-kittens {
    display: none !important;
  }

  /* A bit more breathing room under the section */
  #services {
    padding: 2rem 0;
  }
  
  /* ─── ICON + TEXT SIDE-BY-SIDE ───────────────────────────────────────────── */
.services-cards .card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "icon title"
      "icon desc";
    gap: 0rem 1rem;
    align-items: start;
  }
  
  .services-cards .service-icon {
    grid-area: icon;
    font-size: 2rem;      /* adjust as needed */
    margin: 0;  
    margin-top: 1rem;
    justify-self: center;     /* center horizontally in its column */
  transform: translateX(5px); /* then bump right a bit */
  }
  
  .services-cards .card-title {
    grid-area: title;
    font-size: 1.1rem;
    margin: 0;
  }
  
  .services-cards .card p {
    grid-area: desc;
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
  }
  


  #safety {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
  }

  /* hide old SVG pulses */
  .safety-animation {
    display: none;
  }


  
  /* mobile only: show a small, centered paw above the title */
    .safety-top-paw {
      display: block;
      text-align: center;
      margin-bottom: 0.5rem;
    }
    .safety-top-paw .fa-paw {
        font-size: 4.5rem;
        margin: 1rem;
        margin-top: 0rem;
        color: var(--gold);
        opacity: 0.5;
        animation: shake 3s ease-in-out infinite;
    }
  

  /* content: center text, shrink title & copy */
  .safety-content {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    margin-top: 6rem;

    text-align: center;
    padding: 0;
  }
  .safety-content .section-title {
    font-size: 2rem;
    margin-bottom: 0.75rem;
  }
  .safety-content p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
  }

  /* stack & center the list */
  .safety-list-wrapper {
    width: 100%;
    text-align: center;
    margin: 0 auto 1rem;
  }
  

  /* always-on small thumbnails below */
  .safety-hover-image {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
  }
  .safety-hover-image img {
    width: 50px;
    height: auto;
    opacity: 1;
  }



   /* ─── SAFETY LIST ITEMS ───────────────────────────────────────────── */
   .safety-list li {
    background: var(--cream);
    border: 1px solid var(--gold);
    border-radius: 6px;
    /* ↓ reduced padding & margin ↓ */
    padding: 0.5rem 0.75rem;
    margin: 0 0 0.5rem 0;

    /* ↓ lock font size & line height so hover can’t nudge anything ↓ */
    font-size: 1rem !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;

    /* only a gentle tint on hover, no size/weight change */
    transition: background-color 0.2s ease;
  }

  .safety-list li i {
    color: var(--gold);
    margin-right: 0.5rem;
    font-size: 1.2rem;
    flex-shrink: 0;
  }

  .safety-list li:hover,
  .safety-list li:active,
  .safety-list li:focus {
    background-color: rgba(212, 175, 55, 0.1) !important;
    /* enforce no font/spacing changes */
    font-size: 1rem !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
  }

  .safety-list li.active i {
    padding-left: 0rem !important;
  }


/* center each safety list item’s contents */
.safety-list li {
    display: flex;             /* you already have flex, just reaffirm */
    justify-content: center !important;
    text-align: center !important;
    padding: 0.5rem 1rem;       /* tighten the spacing */
  }

  /* make sure the ul itself is centred */
  .safety-list {
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
  }
  

 
    /* 1) Kill any background gradient the desktop sheet put on you */
    .gallery-decor.decor1 {
   
        background-image: url('../images/bone.png');
      }
      
      /* second bone down in the bottom-right */
      .gallery-decor.decor2 {
      
        background-image: url('../images/camera2.png');
      }
      
      .gallery-decor.decor3 {
     
        background-image: url('../images/mouse.png');
      }
      
  
    /* 2) Force the deco pngs back on */
    .gallery-decor {
      display: block !important;
      background-repeat: no-repeat !important;
      background-size: contain !important;
      pointer-events: none !important;
      z-index: -1 !important;
    }
    .decor1 {
        top: 17% !important;
        left: 18% !important;
        width: 100%  !important;
        transform: rotate(13deg) !important;
      }
      .decor2 {
        bottom: 3% !important;
        right: 31% !important;
        width: 100%  !important;
        transform: rotate(10deg)  !important;
      }
      .decor3 {
        bottom: -16% !important;
        left: 41% !important;
        width: 100%  !important;
        transform: rotate(108deg) !important;
      }
    
    /* 3) Stack title above button */
    .photo-stack-wrapper {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 1rem !important;
    }
    
    .view-all-btn {
      order: 1 !important;
      display: inline-block !important;
      margin: 0 auto !important;
      font-size: 0.9rem !important;
      padding: 0.5rem 1rem !important;
      z-index: 2 !important;
    }



/* ─── TWEAK GALLERY TITLE & BUTTON ───────────────────────────────────────── */
#gallery .section-title {
    /* align left instead of centered */
    font-size: 2.5rem;
    text-align: left !important;
    margin-left: 1rem !important;       /* slide it in from the left edge */
    margin-bottom: 0.5rem !important;    /* tighten gap below title */
    max-width: 90% !important;
  }
  
  #gallery .view-all-btn {
    display: inline-block !important;
    margin: -2.5rem 1rem 0rem -6rem !important;  /* reduce top margin, match left offset */
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem !important;
  }
  
  #estimate .section-title {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
  }

  #estimate {
    padding: 0rem 1rem;
    display: block;
  }

  .estimate-output {
    margin-top: 0rem !important;
    padding: 0.8rem;
  
  }

  .loader {
margin-top: 0 !important;
margin-bottom: 0 !important;
    padding: 0.8rem !important;

  }

  #estimate .section-title {
    font-size: 2rem;
  }

  .section-title .fa-bone {
    margin: 0 0.25em;
    vertical-align: middle;
    font-size: 0.6em;            /* match your heading text size */
    color: var(--black);       /* or whatever color fits */
  }
  

  #calculate-btn {
    font-size: 1rem;
  }

  .estimate-form .form-col {
   
    gap: 0rem;
}

  .estimate-form {
    grid-template-columns: 1fr;
    gap: 0rem;

  }

  .estimate-box {
    grid-template-columns: 1fr;
  }


  nav#navbar .close-menu {
    display: none;
    background: none;
    border: none;
    color:var(--gold);
    font-size: 2rem;
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    z-index: 1001;
  }
  
  nav#navbar.show .close-menu {
    display: block;
  }

  nav#navbar .close-menu {
    transition: opacity 0.3s ease;
    opacity: 0;
  }
  
  nav#navbar.show .close-menu {
    opacity: 1;
  }

   
    
  }