/* 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');
    }
    
    
    /* League Spartan */
    @font-face {
      font-family: 'League Spartan';
      font-style: normal;
      font-weight: 400;
      src: url('../fonts/LeagueSpartan-SemiBold.ttf') format('truetype');
    }
    
    /* Montserrat */
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 400;
      src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
      font-display: swap;
    }
    
    
    
    
    @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');
    
    
    @import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
    
    @import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Days+One&display=swap');
    
    
    
        
        :root {
          --cream: #f4e9d1;
          --black: #1a1a1a;
          --gold:  #d4af37;
          --font-body:    'Outfit', sans-serif;
          --font-heading: 'Playfair Display', serif;
          --font-card: 'Inter Tight', sans-serif;
          --font-title:'Cal Sans', sans-serif;
          --font-day:'Days One', sans-serif;
          --font-caption: 'Patrick Hand', cursive;
          --font-nav:     'Sniglet', system-ui;
          --font-quote:   'Lora', serif;
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        html { scroll-behavior:smooth; scroll-snap-type:y mandatory; }
        html, body {
          touch-action: pan-x pan-y; /* allow only one‐finger pans, no pinch/zoom */
        }
        
        html, body {
          touch-action: manipulation; /* disables pinch zoom but still allows scroll */
        }
        
        body {
          font-family: var(--font-body);
          background: var(--cream);
          color: var(--black);
          overflow-x: hidden;
        }
        a { text-decoration: none; color: inherit; }
    
        /* NAVBAR */
        header { position: fixed; top: 20px; left: 0; width: 100%; display: flex; justify-content: center; pointer-events: none; z-index:1000; }
        .nav-wrapper { pointer-events: auto; background: var(--black); border-radius: 8px; padding: 0.5rem 2rem; display: flex; align-items: center; justify-content: space-between; width: 90%; max-width: 1100px; }
        .nav-wrapper img.logo { height: 40px; filter:
        brightness(0) 
        saturate(100%) 
        invert(72%) 
        sepia(42%) 
        saturate(600%) 
        hue-rotate(1deg) 
        brightness(99%) 
        contrast(92%); }
        nav#navbar { display: flex; gap: 2rem; font-family: var(--font-nav); letter-spacing: 0.1em; }
        nav#navbar a { color: var(--gold); font-weight: 300; position: relative; transition: color .3s; }
        nav#navbar a:hover { color: #fff; }
        nav#navbar a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--gold); transition: width .3s; }
        nav#navbar a:hover::after { width: 100%; }
        .menu-toggle { display: none; background: none; border: none; cursor: pointer; }
        .menu-toggle svg { width: 24px; height: 24px; stroke: var(--gold); stroke-width: 2; fill: none; }
        @media (max-width:1024px) {
          .menu-toggle { display: block; }
          nav#navbar { display: none; position: fixed; top:0; left:0; width:100%; height:100vh; background: rgba(0,0,0,0.95); flex-direction: column; align-items:center; justify-content:center; gap: 2rem; z-index:1001; }
          nav#navbar.show { display: flex; }
          nav#navbar a { font-size: 2rem; }
        }
    
        /* SECTIONS */
        main { margin-top: 100px; }
        section {
          height: 100vh; scroll-snap-align: start;
          display: flex; align-items: center; justify-content: center;
          position: relative; padding: 2rem;
          opacity: 0; transform: translateY(50px);
          transition: opacity .6s ease, transform .6s ease;
          overflow: hidden;
        }
        section.visible { opacity: 1; transform: translateY(0); }
        h2.section-title {
          align-items: center;
          gap: .75rem;
          padding: 1.5rem 1rem;
          font-family: var(--font-heading);
          font-size: 4rem;
          margin-bottom: 1rem;
          opacity: 0;
          animation: fadeIn 1s ease-out forwards;
          }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to   { opacity: 1; transform: translateY(0); } }
        .paw-overlay { position: absolute; font-size: 100px; color: var(--black); opacity: 0.1; }
    
        /* HERO */
      
    
      
        #hero .logo-hero { width: 300px; height: 300px; object-fit: cover; flex-shrink: 0; }
        .headline-rotate-wrapper { flex: 1; display: flex; flex-direction: column; align-items: flex-start; max-width: 60%; margin-top: .5rem; gap: 2.5rem; }
        .headline-rotate { font-family: var(--font-heading); font-size: clamp(1.5rem,5vw,2.5rem); line-height: 1.2; min-height: 6rem; }
        .hero-title-main,.hero-title-sub,.headline-rotate-wrapper h2 {
          text-shadow:
            0 2px 4px rgba(0, 0, 0, 0.35);
        }
        
        .headline-rotate-wrapper p,
        .headline-rotate-wrapper span {
          text-shadow:
            0 1px 2px rgba(0, 0, 0, 0.2);
        }
    
        /* 3D rotating paw (Y axis) */
    .paw-rotate{
      display: inline-block;
      margin-left: 6px;
      color: var(--gold);
      transform-style: preserve-3d;
      animation: pawSpinY 3.5s linear infinite;
    }
    
    /* Smooth 3D flip */
    @keyframes pawSpinY{
      0%   { transform: rotateY(0deg); }
      50%  { transform: rotateY(180deg); }
      100% { transform: rotateY(360deg); }
    }
    
    .paw-rotate{
      animation-duration: 6s;
    }
    
    @media (prefers-reduced-motion: reduce){
      .paw-rotate{
        animation: none;
      }
    }
    
    /* Improve depth perception */
    .page-title{
      perspective: 800px;
    }
    
        
        .headline-rotate .dot { animation: blink 1s steps(1) infinite; }
        @keyframes blink { 0%,50%{opacity:1;}51%,100%{opacity:0;} }
        .rotating { animation: fadeInText .6s ease forwards; }
        .rotating.fade-out { animation: fadeOutText .6s ease forwards; }
        @keyframes fadeInText { from{opacity:0;} to{opacity:1;} }
        @keyframes fadeOutText{ from{opacity:1;} to{opacity:0;} }
    
        .hero-headline { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 1rem; }
        .hero-title-main { font-family: 'Bernard MT Condensed', serif; font-size: clamp(80px, 10vw, 120px); white-space: nowrap; line-height: 1; position: relative; color: #000; }
        .hero-title-main .hero-paw { position: absolute; top: -20px; right: -50px; font-size: 50px; transform: rotate(20deg); color: #000; }
        .hero-title-sub { font-family: "League Spartan", sans-serif; font-weight: 700; font-size: clamp(20px, 3vw, 32px); text-transform: uppercase; letter-spacing: 0.25em; color: #000; margin-top: 0.2rem; white-space: nowrap; }
        .hero-btn {font-family: "Yellowtail", cursive;font-size: 2rem;font-weight: 400;background-color: var(--black);color: var(--gold);padding: 0.75rem 1.5rem;border-radius: 14px;transition: background-color 0.3s, color 0.3s, transform 0.2s;}
        .hero-btn:hover { background-color: var(--gold); color: var(--black); transform: translateY(-2px); }
        @media (min-width: 700px) { #hero { justify-content: center; padding-left:2rem; } .headline-rotate-wrapper { align-items: flex-start; } }
        @media (max-width: 699px) { #hero { flex-direction: column; align-items: center;  } .headline-rotate-wrapper { align-items: center; max-width: 90%; text-align: center; } .hero-btn { margin: 3rem auto 0 auto; } }
    
        /* ABOUT */   #about   { flex-direction:column; text-align:center; padding:4rem; z-index: -1;}
        /* SERVICES */#services{  flex-direction:column; text-align:center; padding:4rem; }
        #services ul { list-style: disc inside; margin-top:1rem; }
        #services li{ margin:0.5rem 0; }
        /* SAFETY */   #safety  { background:var(--cream); flex-direction:column; text-align:center; padding:4rem; }
        /* CONTACT */  #contact { background:var(--cream); flex-direction:column; text-align:center; padding:4rem; }
    
        /* REVIEWS */
        #reviews {  flex-direction:column; text-align:center; padding:4rem; overflow: visible; }
        .review-rotator { position: relative; width:100%; }
        
    
        /* GALLERY */
        /* gallery title aligned right on desktop, centered on mobile */
    
    
    
    
    
    
    
    
    /* Desktop: use the tablet "My Journey" behaviour */
    #read-journey-btn{
      background-color: rgba(250, 230, 197, 0.7);
      color: var(--black);
      border: 1px solid #ffd588;
      border-radius: 14px;
      box-shadow: none;
      padding: 0.75rem 1.5rem;
      font-family: var(--font-title);
      /* font-size: 2rem; */
      font-size: clamp(0.5rem, 4vw, 3rem);
      font-weight: 700;
      letter-spacing: 0.0em;
      cursor: pointer;
      display: inline-block;
      text-align: center;
      text-decoration: none;
      width: 44%;
      transition: background-color 0.3s, color 0.3s, transform 0.2s;
    }

    #read-journey-btn:hover { background-color: var(--gold); color: var(--black); transform: translateY(-2px); }
    
    #read-journey-btn-nd{
    display: none;
    }
    
    #about .about-text{
      display: none !important;
      max-height: 5.5em;
      overflow: hidden;
      position: relative;
      transition: max-height .4s ease;
    }
    
    /* When JS adds .expanded to #about, show the full text */
    #about.expanded .about-text{
      display: block !important;
      max-height: none;
      
    }
    
    /* Default (collapsed) */
    #about .about-text{
      display: none;
    }
    
    /* Expanded */
    #about.expanded .about-text{
      display: block;
    }
    
    #about .about-text{
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s ease, opacity .3s ease;
      opacity: 0;
    }
    
    #about.expanded .about-text{
      max-height: 1000px; /* large enough for your text */
      opacity: 1;
    }
    
    .journey-content {
      background: var(--black);
        color: var(--gold);
        border-radius: 8px;
        max-width: 900px;
        font-size: 1.2rem;
        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: 2.5rem;
      color: var(--gold);
      cursor: pointer;
      line-height: 1;
    }
    
    
    
    /* desktop & tablet: hide the button, show the full text */
    /* #read-journey-btn {
      display: none !important;
    }
    .about-content .about-text {
      display: block !important;
      text-align:center;
    height: 176px;
    }
         */
    
    
        
        /* allow hero overflow so the img can spill down */
    #hero {
      position: relative;
      overflow: visible;
      top: -3rem;
    
    }
    
    
    /* the overlapping image at the bottom */
    .hero-bottom-img {
      position: absolute;
      bottom:-169px;              /* how far it overlaps—tweak as needed */
      left: 50%;
      transform: translateX(-50%);
      width: 100%;                 /* or a fixed px value */
      max-width: 1999px;           /* adjust to suit your design */
      pointer-events: none;       /* so clicks pass through */
      z-index: 2;                 /* above hero content but under nav */
    }
    
    /* ensure next section covers anything below hero bg */
    main > section:not(#hero) {
      position: relative;
      z-index: 1;
    }
    
    /* ABOUT header image wrapper */
    /* Typewriter cursor */
    .cursor {
      display: inline-block;
      font-family: var(--font-heading);
      font-weight: bold;
      animation: blinkCursor 0.7s steps(1) infinite;
    }
    
    @keyframes blinkCursor {
      0%, 100% { opacity: 1; }
      50%      { opacity: 0; }
    }
    
    /* ABOUT SECTION */
    #about {
      position: relative;
     
      overflow: hidden;
    }
    
    #about::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
    }
    
    #about .about-content {
      position: relative;
      z-index: 2;
      max-width: 800px;
      margin: 0 auto;
      text-align: left;
      padding: 4rem 2rem;
    }
    
    #about .textbox{
    
background:#ffffffab;
    
border: 1px solid var(--gold);
    
border-radius: 16px;
    
padding: 1rem 1.25rem;
    
margin: 1rem 0 2rem;
    }
    
    
    #about p {
      line-height: 1.6;
      color: var(--black);
    }
    
    #about .about-values {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
      margin: 2rem 0;
      padding: 0;
    }
    
    #about .about-values li {
      background: var(--gold);
      padding: 1rem;
      border-radius: 16px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      font-family: var(--font-body);
      color: var(--black);
    }
    
    #about .about-values li strong {
      color: var(--black);
        letter-spacing: 0.05em;
        font-family: var(--font-title);
    }
    
    #about a {
      color: var(--black);
      text-decoration: underline;
          text-underline-offset: 3px;
          font-weight: 600;
    }
    
    /* paw stays low-opacity behind */
    #about .paw-overlay {
      font-size: 120px;
      color: var(--black);
      transform: rotate(20deg);
      opacity: 0.05;
      position: absolute;
      
      z-index: 1;
    }
    
    
    
    
    
    /* Ensure content sits above them */
    #about .about-content {
      position: relative;
      z-index: 2;
    }
    
    
    /* Ensure content sits above them */
    #about .about-content {
      position: relative;
      z-index: 2;
    }
    
    /* responsive tweaks */
    
    #mobile-portrait{
    
      display:none;
      
      }
    
    
      
    #desktop-portrait{
    
      display: block;
    }
    
     /* Make portrait + name/title sit side-by-side */
     .about-portrait-wrapper{
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 1rem !important;
      width: 100% !important;
      margin: 0 0 1rem 0 !important;
      float: none !important;
      text-align: left !important;
    }
    
    /* Perfect circle without the padding-top trick on mobile */
    .about-portrait{
      flex: 0 0 auto !important;
      width: 200px !important;
      height: 200px !important;
      padding-top: 0 !important;       /* IMPORTANT: removes the glitch */
      border-radius: 50% !important;
      overflow: hidden !important;
      border: 4px solid var(--gold) !important;
      box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
      position: relative !important;
    }
    
    .about-portrait img{
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: 50% 20% !important;
    }
    
    .portrait-info{
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      text-align: left !important;
      line-height: 1.2 !important;
    }
    
    .portrait-name{
      margin: 0 !important;
      font-weight: 800 !important;
      color: var(--black) !important;
      white-space: normal !important;   /* allow wrapping nicely */
    }
    
    .portrait-position{
      margin: .25rem 0 0 0 !important;
      opacity: .8 !important;
      white-space: normal !important;
    }
    
    
    
    @media screen and (min-width: 1025px) {
      nav#navbar .close-menu {
        display: none !important;
      }
    }
    
    
    
    
    /* Mobile: center above text */
    
    
    /* 1) Define the shake keyframes */
    @keyframes shake {
      0%   { transform: rotate(0deg); }
      20%  { transform: rotate(2deg); }
      40%  { transform: rotate(-2deg); }
      60%  { transform: rotate(2deg); }
      80%  { transform: rotate(-2deg); }
      100% { transform: rotate(0deg); }
    }
    
    /* 2) Apply on scroll-into-view */
    #about.visible .about-values li {
      transform-origin: center center;
      animation: shake 0.5s ease-in-out;
    }
    
    /* 3) Re-trigger on hover */
    .about-values li:hover {
      transform-origin: center center;
      animation: shake 0.5s ease-in-out;
    }
    
    
    /* Base shake (keeps both forwards/backwards transforms) */
    #about.visible .about-values li {
      transform-origin: center center;
      animation: shake 0.5s ease-in-out both;
    }
    
    /* Stagger via nth-child delays */
    #about.visible .about-values li:nth-child(1) { animation-delay: 0s;    }
    #about.visible .about-values li:nth-child(2) { animation-delay: 0.15s; }
    #about.visible .about-values li:nth-child(3) { animation-delay: 0.30s; }
    #about.visible .about-values li:nth-child(4) { animation-delay: 0.45s; }
    #about.visible .about-values li:nth-child(5) { animation-delay: 0.60s; }
    /* Add more nth-child rules if you have more items */
    
    /* Hover: override to animate immediately on hover */
    .about-values li:hover {
      animation: shake 0.5s ease-in-out both;
      animation-delay: 0s !important;
    }
    
    
    
    /* use Poppins for “About Us” */
    #about .section-title {
      font-family: var(--font-body);
          /* new Avenir-like font */
      font-size: clamp(3rem, 10vw, 6rem);
      font-weight: 700;
      letter-spacing: 0.05em;
      color: var(--black);
     /* opacity: 0;
      transform: scale(0.5);*/
     /* transition: transform 0.3s, opacity 0.3s;*/
    }
    
    /* pop-bounce on scroll into view */
    
    
    /* hover wiggle */
    /* 1) Cal Sans for your main Services headline */
    .services-intro .section-title {
      font-family: var(--font-body);
      font-size: clamp(2.5rem, 6vw, 4rem);
      margin-bottom: 1rem;
      color: var(--black);
    }
    
    /* 2) Copy as your site default (Outfit) */
    .services-intro p,
    .card p {
      font-family: var(--font-body);
      font-size: 1.05rem;
      line-height: 1.6;
      color: var(--black);
    }
    
    /* 3) Remove previous bg; center and pad */
    #services {
      background:#fff;
      flex-direction: column;
      text-align: center;
      padding: 4rem 2rem;
    }
    
    /* 4) Card grid layout (unchanged) */
    .services-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 2rem;
      margin-top: 2.5rem;
      margin: 0 auto;
    }
    
    /* 5) Gold cards with black text */
    .services-cards .card {
      
display: flex;
      
flex-direction: column;
      
align-items: center;
      
/* gap: .75rem; */
      
padding: 1.5rem 1rem;
      
background: #ffffffab;
      
      
border-radius: 16px;
    }
    
    /* 6) Staggered reveal on scroll */
    #services.visible .card {
      opacity: 1;
      transform: translateY(0);
    }
    #services.visible .card:nth-child(1) { transition-delay: 0.1s; }
    #services.visible .card:nth-child(2) { transition-delay: 0.2s; }
    #services.visible .card:nth-child(3) { transition-delay: 0.3s; }
    #services.visible .card:nth-child(4) { transition-delay: 0.4s; }
    
    /* 7) Card hover lift + icon rotate */
    .services-cards .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }
    .services-cards .card:hover .service-icon {
      transform: rotate(-15deg) scale(1.1);
    }
    
    /* 8) Icon styling—now black to contrast gold */
    .service-icon {
      font-size: 3rem;
      color: var(--black);
      margin-bottom: 1rem;
      transition: transform .3s ease;
    }
    
    /* 9) Card titles in your heading font */
    .card-title {
      font-family: var(--font-body);
      font-size: 1.3rem;
      margin-bottom: 0.5rem;
    }
    
    /* Responsive tweaks */
    
    
    /* 3) Force single-column on small screens for better responsiveness */
    
    
    
    
    
    
    
    /* Reviews section transparent */
    #reviews {
      background: none;
    }
    
    /* Center & constrain rotator */
    .review-rotator {
      max-width: 800px;
      margin: 0 auto;
      position: relative;
      height: auto; /* let cards flow */
    }
    
    /* Your existing .review-item and .review-item.active rules will handle stacking */
    
    
    .review-rotator {
      position: relative;
      width: 100%;
      max-width: 800px;
      height: 240px;
      margin: 0 auto;
      overflow: visible;
    }
    
    .review-item {
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%) scale(0.95) translateY(10px);
      opacity: 0;
      width: 100%;
      z-index: 1;
      transition: opacity 0.8s ease, transform 0.8s ease;
    }
    
    .review-item.active {
      opacity: 1;
      transform: translateX(-50%) scale(1) translateY(0);
      z-index: 2;
    }
    
    .review-card {
      display: flex;
      align-items: center;
      background: #fff;
      padding: 1rem 1.5rem;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .review-avatar {
      width: 80px;
      height: 80px;
      flex-shrink: 0;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 1rem;
      border: 2px solid var(--gold);
    }
    
    .review-body {
      flex: 1;
    }
    
    .stars {
      margin-bottom: 0.5rem;
    }
    
    .stars svg {
      width: 20px;
      height: 20px;
      fill: var(--gold);
      margin-right: 0.2rem;
    }
    
    .review-text {
      font-size: 1.1rem;
      line-height: 1.4;
      margin: 0 0 0.5rem;
    }
    
    .review-author {
      font-style: italic;
      color: #555;
      margin: 0;
    }
    
    
    /* —————————— */
    /* Google-Review CTA under Reviews */
    .review-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      margin-top: 2rem;
      flex-wrap: wrap;
    }
    
    .qr-box {
      background: #fff;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    
    .qr-box img {
      display: block;
      width: 150px;
      height: 150px;
    }
    
    .cta-text p {
      font-family: var(--font-nav);
      font-size: 1.2rem;
      color: var(--black);
      margin: 0;
      line-height: 1.4;
    }
    
    .cta-text a {
      color: var(--gold);
      font-weight: bold;
      text-decoration: underline;
    }
    
    
    
    
    /* —— Stack container —— */
    .photo-stack-wrapper {
      position: relative;
        max-width: 600px;
        margin: 0 auto;
        right: -65%;
        text-align: center;
    }
    .photo-stack {
      position: relative;
      width: 400px; height: 400px;
      margin-bottom: 1.5rem;
      touch-action: pan-y;
    }
    .photo-card {
      position: absolute;
      top: 0; left: 0;
      width: 80%; height: 100%;
      margin: 0 10%;
      background: #fff;
      border: 1px solid var(--white);
      border-radius: 1px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
      cursor: grab;
      transition: transform .6s ease, z-index .6s ease;
    }
    .photo-card img {
      width: 100%; height: 80%;
      object-fit: cover; border-radius: 4px;
    }
    .photo-card figcaption {
      margin-top: .5rem;
      font-family: var(--font-caption);
      font-size: 1rem;
    }
    
    .photo-stack .photo-card {
      position: absolute;
      top: 0;
      left: 0;
      /* use your --i to stagger rotation and offset */
      transform: 
        rotate(calc((var(--i) * 10deg) - 20deg))
        translate(
          calc((var(--i) * 5px) - 15px),
          calc((var(--i) * 5px) - 15px)
        );
      transform-origin: center center;
      transition: transform 0.6s ease;
      /* optional: stack ordering so higher --i sit behind */
      z-index: calc(100 - var(--i));
    }
    
    /* make sure the very top card isn’t rotated */
    .photo-stack .photo-card:last-child {
      transform: none;
      z-index: 101;
    }
    
    
    
    /* “View All” grid styles */
    .view-all-btn {
      font-family: "Yellowtail", cursive;
      font-size: 1.5rem;
      font-weight: 500;
      background-color: rgb(0 0 0 / 0%);
      color: #1a1a1a;
      padding: 0.75rem 1.5rem;
      border: solid 1px;
      border-radius: 14px;
      transition: background-color 0.3s, color 0.3s, transform 0.2s;
    }
    .view-all-btn:hover { background: var(--gold); color: var(--black); }
    
    
    /* —— Modal & Slider —— */
    .modal {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.8);
      display: flex; align-items: center; justify-content: center;
      z-index: 3000;
    }
    .modal.hidden { display: none; }
    .modal-content {
      position: relative;
      width: 90%; max-width: 800px;
      background: #000000; border-radius: 8px;
      overflow: hidden;
    }
    .close-modal {
      position: absolute; top: 0.5rem; right: 1rem;
      font-size: 2rem; color:#fff; cursor: pointer;
      z-index: 1;
    }
    .slider {
      position: relative; height: 500px; background: #000000;
    }
    .slide {
      display: none;
      width: 100%; height: 100%;
      flex-direction: column; align-items: center; justify-content: center;
    }
    .slide.active { display: flex; }
    .slide img {
      max-width: 100%; max-height: 80%;
      border-radius: 4px;
    }
    .slide .caption {
      margin-top: 1rem;
      font-family: var(--font-caption);
      font-size: 1.1rem;
      color: var(--gold);
    }
    .prev-slide, .next-slide {
      position: absolute; top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,0.5);
      color: #fff; border: none;
      padding: 0.5rem 1rem; border-radius: 4px;
      font-size: 2rem; cursor: pointer;
    }
    .prev-slide { left: 0.5rem; }
    .next-slide { right: 0.5rem; }
    
    
    /* gallery title sits flush with the photo stack column */
    #gallery .section-title {
      max-width: 600px;
      margin: 0 auto 0.5rem;
      margin-left: -15rem;      
      float: left;
      margin-top: 8.1rem;
      font-family: var(--font-title);
      font-size: clamp(3.5rem, 6vw, 5rem);
      /* letter-spacing: 0.05em; */
      font-weight: 700;
      color: var(--black);
    }
    
    /* mobile reset back to full-width center */
    
    
    /* make #gallery a positioning context */
    #gallery {
      position: relative;
      overflow: hidden;
    }
    
    /* shared styles for all bg-decor */
    .gallery-decor {
      position: absolute;
      background-repeat: no-repeat;
      background-size: contain;
     
      pointer-events: none;
    }
    
    /* first pawprint up in the top-left */
    .gallery-decor.decor1 {
      top: 13%;
      left: 3%;
      transform: rotate(350deg);
      width: 500px;
      height: 228px;
      background-image: url('../images/bone.png');
    }
    
    /* second bone down in the bottom-right */
    .gallery-decor.decor2 {
      bottom: 6%;
      right: 45%;
      transform: rotate(10deg);
      width: 600px;
      height: 353px;
      background-image: url('../images/camera2.png');
    }
    
    .gallery-decor.decor3 {
      bottom: -3%;
      right: -20%;
      transform: rotate(108deg);
      width: 470px;
      height: 462px;
      background-image: url('../images/mouse.png');
    }
    
    
    /* responsive tweak: hide decorations on small screens */
    
    
    
    /* ─── CONTACT SECTION ───────────────────────────────────────────────────── */
    
    #contact.contact-section {
      background: var(--black);
      color: var(--cream);
      padding: 4rem 2rem;
      scroll-snap-align: start;
    }
    
    /* ─── SPONSORS BANNER ───────────────────────────────────────────────────── */
    
    
    
    
    /* Main two-column layout */
    #contact .contact-main {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 3rem;
      max-width: 800px;
      margin: 0 auto;
      align-items: start;
    }
    
    /* Left: contact details */
    #contact .contact-details h2 {
      font-family: var(--font-title);
      /* letter-spacing: 0.05em; */
      font-size: 3.5rem;
      margin-top: -0.8rem;
      margin-bottom: 1rem;
      color: var(--gold);
    }
    #contact .contact-details ul {
      list-style: none;
      padding: 0;
      font-size: 1rem;
      line-height: 1.8;
    }
    #contact .contact-details li {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    #contact .contact-details li i {
      color: var(--gold);
      width: 1.2em;
      text-align: center;
    }
    #contact .contact-details a {
      color: var(--cream);
     /* text-decoration: underline;*/
      transition: color .3s;
    }
    #contact .contact-details a:hover {
      color: var(--gold);
    }
    
    /* Right: social cards */
    #contact .social-links {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 1rem;
    }
    #contact .social-link {
      background: var(--cream);
      color: var(--black);
      font-family: var(--font-nav);
      font-size: 1rem;
      padding: 0.75rem 1rem;
      border-radius: 14px;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      transition: transform .3s, background .3s, color .3s;
    }
    #contact .social-link i {
      font-size: 1.4rem;
    }
    #contact .social-link:hover {
      transform: translateY(-3px);
      background: var(--gold);
      color: var(--black);
     
    }
    
    /* WhatsApp special color */
    #contact .social-link.whatsapp {
      background: #25D366;
      color: #fff;
    }
    #contact .social-link.whatsapp:hover {
      background: var(--gold);
      color: var(--black);
    }
    
    /* Twitter button */
    #contact .social-link.twitter {
      background-color: #090223;
      color: var(--cream);
    }
    #contact .social-link.twitter:hover {
      background: var(--gold);
      color: var(--black);}
    
    
    
    
    /* Individual brand tweaks */
    #contact .social-link.insta { background: #E4405F; color: #fff; }
    #contact .social-link.insta:hover {  background: var(--gold);
      color: var(--black); }
    #contact .social-link.fb   { background: #1877F2; color: #fff; }
    #contact .social-link.fb:hover   {  background: var(--gold);
      color: var(--black); }
    
    /* Responsive fallback */
    
    
    
    /* —————— Partnered With Section (side-by-side) —————— */
    #partners {
      display: grid;
      grid-template-columns: 40% 60%;      /* title on left, logos on right */
      align-items: center;                /* vertically center both columns */
      max-width: 1060px;
      margin: 0 auto 4rem;
      padding: 0 2rem;
      gap: 1rem;                          /* space between title & logos */
    }
    
    #partners .section-title {
      font-family: var(--font-title);
      font-size: clamp(3rem, 4vw, 5rem); /* smaller, responsive */
      font-size: clamp(3rem, 6vw, 4rem);
      margin: 0;
      justify-self: start;                /* keep it flush left */
      color: var(--black);
      /* letter-spacing: 0.05em; */
    }
    
    
    
    /* logos container now wide and airy */
    .partner-logos {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 3rem;                          /* extra space around each logo */
      justify-items: center;
      align-items: center;
    }
    
    /* logos are black + padded; reveal color on hover */
    .partner-logos img {
      max-width: 200px;
      padding: 1.5rem;                   /* plenty of clickable area */
      filter: brightness(0);
      opacity: 0.5;
      transition: filter .3s ease, transform .3s ease;
    }
    .partner-logos img:hover {
        opacity: 1;
      filter: none;
      transform: scale(1.05);
    }
    
    /* collapse to single-column on tablets */
    
    
    /* hide completely on very small phones */
    
    
    
    
    /* Make partners a positioning context and allow overlap */
    #partners {
      position: relative;
      overflow: visible; /* so the decor can hang into the gap above Reviews */
    }
    
    /* Keep content above the decor if needed */
    #partners .section-title,
    #partners .partner-logos {
      position: relative;
      z-index: 1;
    }
    
    /* Handtoy: same pattern as gallery-decor */
    .gallery-decor.decor-handtoy {
      position: absolute;
      background-image: url(../images/handtoy.png);
      background-repeat: no-repeat;
      background-size: contain;
      pointer-events: none;
      z-index: 0;
    
      width: 952px;
      height: 735px;
      right: -34%;
      bottom: -36%;
    }
    
    
    /* Handtoy: same pattern as gallery-decor */
    #partners .decor-guinea {
      position: absolute;
      top: 57%;
      left: -540px;
      transform: translateY(-50%);
      width: 1029px;
      max-width: none;
      pointer-events: none;
      z-index: -1;
    }
    
    #regulated .safety-gslying{
    
      position: absolute;
      top: 80%;
      /* left: -540px; */
      transform: translateY(-50%);
      width: 1029px;
      max-width: none;
      pointer-events: none;
      z-index: -1;
    
    }
    
    
    
    #regulated .safety-kong{
    
      position: absolute;
      top: 11%;
      left: 322px;
      transform: translateY(-50%);
      width: 248px;
      max-width: none;
      pointer-events: none;
      z-index: -1;
    
    }
    
    #faqs .faqs-cat{
    
      position: absolute;
            top: 57%;
            right: -10px;
            transform: translateY(-50%);
            width: 495px;
            max-width: none;
            pointer-events: none;
            z-index: -1;
    
    
    }
    
    
    #partners .decor-handtoy {
      position: absolute;
      top: 108%;
      right: -40%;
      transform: translateY(-50%) scaleX(-1);
      width: 966px;
      max-width: none;
      pointer-events: none;
      z-index: -1;
    }
    
    #partners .decor-rat2 {
      position: absolute;
      top: 50%;
      right: 820px;
      transform: translateY(-50%) scaleX(-1);
      width: 289px;
      max-width: none;
      pointer-events: none;
      z-index: -1;
    }
    
    
    
    /* If you’d rather have it flush to the RIGHT EDGE of the SECTION (respect padding),
       use this instead of right:-2rem:  right: 0; */
    
    /* Hide on small screens to avoid crowding */
    
    
    /* big background PNG */
    .about-puppy {
    
      position: absolute;
      bottom: 1%;
       right:0;
      width: 800px;
      max-width: none;
      pointer-events: none;
      z-index: 1;
    
      /* behind everything in #services */
    }
    
    .about-lanyard {
    
      position: absolute;
      top: -10%;
                left: -650px;
      width: 1387px;
      max-width: none;
      pointer-events: none;
      z-index: 1;
      transform: translate(-51px, 30px) rotate(252deg);
    
      /* behind everything in #services */
    }
    
    .about-keys {
    
      
      position: absolute;
      top: 7%;
      right: 0px;
      width: 293px;
      max-width: none;
      pointer-events: none;
      z-index: 1;
      transform: translate(-51px, 30px) rotate(117deg);
    }
    
    #services {
      position: relative;   /* create a stacking context */
      overflow: visible;    /* allow kittens to peek out */
    }
    
    /* big background PNG */
    .services-kittens {
      position: absolute;
      top: 66%;
      left: -43px;
      transform: translateY(-50%);
      width: 800px;
      max-width: none;
      pointer-events: none;
      z-index: 0;       /* behind everything in #services */
    }
    
    .services-cattoy {
      position: absolute;
      top: -4%;
      right: -108px;
      transform: translate(-51px, 30px) rotate(47deg);
      width: 558px;
      max-width: none;
      pointer-events: none;
      z-index: 0;    /* behind everything in #services */
    }
    
    /* bring intro and cards above */
    .services-intro,
    .services-cards .card {
      position: relative;
      z-index: 1;
    }
    
    
    /* =========================
       FAQ ACCORDION (THEME-MATCH)
       ========================= */
       .faqs { padding: 4rem 1.5rem; }
       .faqs .container { max-width: 960px; margin: 0 auto; }
       
       .faqs-sub {
        text-align: center;
            opacity: 0.9;
            margin: 0.5rem auto 2rem;
            max-width: 730px;
            font-family: var(--font-body);
            font-size: 1.1rem;
            line-height: 1.6;
       }
       
       /* List */
       .faq-list { display: grid; gap: 0.9rem; }
       
       /* Item */
       .faq-item {
            background: #ffffffab;
            border-radius: 16px;
            border: 1px solid var(--gold);
            overflow: hidden;
       }
       
       /* Summary button */
       .faq-q {
         cursor: pointer;
         list-style: none;
         display: grid;
         grid-template-columns: 1fr 28px;
         gap: 0.75rem;
         align-items: center;
         padding: 1.05rem 1.1rem;
         font-family: 'Cal Sans', sans-serif;
         font-size: 1.05rem;
         letter-spacing: 0.02em;
       }
       
       .faq-q::-webkit-details-marker { display: none; }
       
       /* Icon */
       .faq-icon {
         width: 22px;
         height: 22px;
         position: relative;
         justify-self: end;
       }
       .faq-icon::before,
       .faq-icon::after {
         content: "";
         position: absolute;
         inset: 0;
         margin: auto;
         width: 18px;
         height: 2px;
         background: var(--gold);
         border-radius: 2px;
         transition: transform .25s ease, opacity .25s ease;
       }
       .faq-icon::after {
         transform: rotate(90deg);
       }
       
       /* Answer wrapper (animated) */
       .faq-a a {
        color: black;
        text-decoration: underline;
        text-underline-offset: 3px;
        font-weight: 600;
    
    }
    
       .faq-a {
         padding: 0 1.1rem;
         overflow: hidden;
         max-height: 0;
         opacity: 0;
         transition: max-height .35s ease, opacity .25s ease;
       }
       .faq-a p {
         margin: 0;
         padding: 0 0 1.1rem;
         line-height: 1.6;
         opacity: 0.95;
       }
       .faq-a strong { color: var(--black); }
       
       /* Open state */
       .faq-item[open] .faq-a {
         opacity: 1;
       }
       
       /* Icon open -> minus */
       .faq-item[open] .faq-icon::after {
         transform: rotate(90deg) scaleX(0);
         opacity: 0;
       }
       
       .faq-item {
        width: 100%;
        box-sizing: border-box;
      }
      
      .faq-q,
      .faq-a {
        box-sizing: border-box;
        width: 100%;
      }
    
      .faq-a {
        will-change: max-height;
      }
      
      /* Make FAQ layout mobile-safe */
    .faqs .container {
      width: 100%;
      max-width: 960px;
      margin: 0 auto;
      padding-left: 1rem;
      padding-right: 1rem;
      box-sizing: border-box;
    }
    
    /* Let the question text wrap properly */
    .faq-q {
      grid-template-columns: 1fr 26px;  /* slightly smaller icon column */
      align-items: start;               /* prevents clipping when text wraps */
      line-height: 1.3;
      white-space: normal;
      word-break: break-word;
    }
    
    /* Ensure the summary text can shrink & wrap */
    .faq-q > *:first-child {
      min-width: 0;
    }
    
    /* Keep answers readable on mobile */
    .faq-a p {
      font-size: 0.98rem;
    }
    
    /* Smaller screens: tighten padding + font */
    @media (max-width: 520px) {
      .faq-q {
        padding: 0.9rem 0.9rem;
        font-size: 1rem;
      }
    
      .faq-a {
        padding: 0 0.9rem;
      }
    }
    
    /* Very small screens: reduce icon size slightly */
    @media (max-width: 380px) {
      .faq-icon {
        width: 20px;
        height: 20px;
      }
    
      .faq-icon::before,
      .faq-icon::after {
        width: 16px;
      }
    }
    
    .faqs, .faq-list, .faq-item { max-width: 100%; }
    
      
    
    /* ===== Google Reviews (widget style) ===== */
    .g-reviews{
      background: var(--cream);
      padding: 3.5rem 1.5rem;
      text-align: center;
    }
    
    .g-reviews__title{
      margin: 0 0 .6rem;
      color: #1a1a1a;
      letter-spacing: .02em;
    }
    
    .g-reviews__subtitle{
      margin: 0 auto 2rem;
      max-width: 720px;
      color: rgba(0,0,0,.75);
    }
    
    .g-reviews__wrap{
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 48px 1fr 48px;
      gap: 14px;
      align-items: center;
    }
    
    .g-reviews__viewport{
      overflow: hidden;
      border-radius: 18px;
    }
    
    .g-reviews__track{
      display: flex;
      gap: 18px;
      transition: transform .55s ease;
      will-change: transform;
      padding: 8px; /* breathing room */
    }
    
    .g-review-card{
      background: #fff;
      border: 1px solid rgba(0,0,0,.10);
      border-radius: 18px;
      padding: 16px 16px 14px;
      text-align: left;
      min-width: 340px;
      max-width: 340px;
      box-shadow: 0 2px 17px rgba(0,0,0,.08);
    }
    
    .g-review-head{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }
    
    .g-review-person{
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    
    .g-review-avatar{
      width: 42px;
      height: 42px;
      border-radius: 999px;
      object-fit: cover;
      background: rgba(0,0,0,.08);
    }
    
    .g-review-name{
      font-weight: 800;
      color: #111;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 180px;
    }
    
    .g-review-date{
      font-size: .85rem;
      color: rgba(0,0,0,.55);
      margin-top: 2px;
    }
    
    .g-review-google{
      width: 22px;
      height: 22px;
      flex: 0 0 auto;
      border-radius: 6px;
    }
    
    .g-review-stars{
      color: var(--gold);
      letter-spacing: 1px;
      margin-bottom: 10px;
      font-size: 1rem;
    }
    
    .g-review-text{
      color: rgba(0,0,0,.85);
      line-height: 1.45;
      margin: 0;
    }
    
    .g-review-more{
      display: inline-block;
      margin-top: 10px;
      font-weight: 700;
      color: rgba(0,0,0,.55);
      cursor: pointer;
      user-select: none;
    }
    
    .g-reviews__nav{
      width: 48px;
      height: 48px;
      border-radius: 999px;
      border: 1px solid var(--gold);
      background: rgba(255,255,255,.8);
      cursor: pointer;
      display: grid;
      place-items: center;
    }
    .g-reviews__nav i{ color: var(--gold); }
    .g-reviews__nav:hover{
      border-color: rgba(212,175,55,.55);
      box-shadow: 0 0 0 3px rgba(212,175,55,.12);
    }
    
    .g-reviews__dots{
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 14px;
    }
    .g-reviews__dot{
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: rgba(0,0,0,.22);
    }
    .g-reviews__dot.is-active{
      background: var(--gold);
    }
    
    .g-reviews__cta{
      margin-top: 18px;
    }
    .g-reviews__link{
      color: #1a1a1a;
      font-weight: 800;
      text-decoration: none;
      border-bottom: 2px solid rgba(212,175,55,.6);
    }
    .g-reviews__link:hover{ border-bottom-color: var(--gold); }
    
    /* Mobile: 1 card view, arrows still visible */
    @media (max-width: 699px){
      .g-reviews__wrap{
        grid-template-columns: 42px 1fr 42px;
      }
      .g-review-card{
        min-width: 78vw;
        max-width: 78vw;
      }
    }
    
    /* Modal */
    .g-review-modal{ display:none; position:fixed; inset:0; z-index:9999; }
    .g-review-modal.is-open{ display:block; }
    .g-review-modal__backdrop{
      position:absolute; inset:0;
      background: rgba(0,0,0,.65);
    }
    .g-review-modal__panel{
      position: relative;
      width: min(760px, calc(100vw - 24px));
      margin: 12px auto;
      max-height: calc(100vh - 24px);
      overflow: auto;
      background: #fff;
      border-radius: 18px;
      padding: 18px;
    }
    .g-review-modal__close{
      position:absolute; top: 10px; right: 10px;
      width: 42px; height: 42px;
      border-radius: 12px;
      border: 1px solid rgba(0,0,0,.12);
      background: rgba(255,255,255,.9);
      cursor:pointer;
    }
    
    
    /* --- Reviews: prevent cropping on small screens --- */
    .g-reviews__track{ padding: 18px 8px; }
    
    .g-reviews__viewport{
      overflow: hidden;
      border-radius: 18px;
    }
    
    /* mobile */
    @media (max-width: 699px){
      .g-reviews__wrap{
        grid-template-columns: 54px 1fr 54px;
        gap: 10px;
      }
    
      .g-reviews__nav{
        width: 44px;
        height: 44px;
      }
    
      .g-review-card{
        min-width: calc(100vw - 140px);
        max-width: calc(100vw - 140px);
      }
    }
    
    /* tablet */
    @media (min-width: 700px) and (max-width: 1024px){
      .g-review-card{
        min-width: 420px;
        max-width: 420px;
      }
    }
    

    /* =========================
   SAFETY (CLEAN / CREAM THEME)
   For: <section id="safety" class="safety"> ... </section>
   ========================= */


/* =========================
   SAFETY SECTION – FINAL FIXES
   ========================= */

/* Overall layout */
#safety .safety-shell {
  position: relative;
  z-index: 1;
  max-width: 940px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;  /* Two columns for safety-hero and safety content */
  gap: 28px;
  align-items: start;
}

/* Left section: Hero and animation */
#safety .safety-hero {
  display: grid;
  gap: 14px;
}

#safety .safety-animation {
  position: relative;
  width: 190px;
  height: 190px;
  margin: 0 auto;
}

#safety .safety-animation svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

#safety .pulse {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  transform-origin: 50% 50%;
  opacity: 0;
}

#safety .pulse1 { animation: pulse 1.6s ease-out infinite; }
#safety .pulse2 { animation: pulse 1.6s ease-out infinite; animation-delay: 0.8s; }

@keyframes pulse {
  0% { transform: scale(0.7); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

#safety .safety-paw {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 3rem;
  color: var(--gold);
  opacity: 0.55;
  z-index: 2;
}

/* Right section: Content grid */
#safety .safety-content {
  position: relative;
}

/* Safety list (3-column layout) */
#safety .safety-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 columns for safety items */
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#safety .safety-item {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.10);
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr; /* Text-only layout */
  gap: 6px;
  border-radius: 16px;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  outline: none;
}

#safety .safety-item:hover,
#safety .safety-item:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(218, 179, 93, 0.55);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.10);
  background: rgba(255, 255, 255, 0.70);
}

#safety .safety-item.active {
  border-color: rgba(218, 179, 93, 0.75);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

#safety .safety-item-title {
  font-weight: 800;
  color: var(--black);
  line-height: 1.15;
}

#safety .safety-item-sub {
  font-size: 0.95rem;
  opacity: 0.85;
  line-height: 1.25;
}

/* Safety hover image (moved to its own row below the list) */
#safety .safety-hover-image {
  grid-column: span 3;  /* Span all 3 columns */
  margin-top: 20px;
  text-align: center;
}

#safety .safety-hover-image img {
  max-width: 100%;
  height: 250px;  /* Consistent height */
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* RESPONSIVE STYLES */
@media (max-width: 1024px) {
  /* Switch to 1 column layout on tablets and below */
  #safety .safety-shell {
    grid-template-columns: 1fr;  /* Single column */
  }

  #safety .safety-list {
    grid-template-columns: 1fr;  /* 1 column for small screens */
  }

  #safety .safety-hover-image {
    display: none;  /* Hide hover image on small screens */
  }

  /* Center the pet carrier on small screens */
  #safety .safety-carrier {
    width: 80%;  /* Adjust size on smaller screens */
    top: 5%;
    right: 0;
    transform: translateY(-50%);
  }
}

/* Mobile devices (max-width: 480px) */
@media (max-width: 480px) {
  #safety .safety-item {
    padding: 12px;  /* Reduce padding for mobile */
  }

  #safety .safety-list {
    grid-template-columns: 1fr;  /* 1 column for very small screens */
  }

  #safety .safety-hover-image {
    display: none;  /* Ensure hover image is hidden on mobile */
  }

  #safety .safety-carrier {
    width: 100%;  /* Full width for pet carrier on mobile */
  }
}


/* =========================
   SAFETY SECTION – FINAL FIXES
   ========================= */

/* Overall layout */
#safety .safety-shell {
  position: relative;
  z-index: 1;
  max-width: 940px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;  /* Two columns for safety-hero and safety content */
  gap: 28px;
  align-items: start;
}

/* Left section: Hero and animation */
#safety .safety-hero {
  display: grid;
  gap: 14px;
}

#safety .safety-animation {
  position: relative;
  width: 190px;
  height: 190px;
  margin: 0 auto;
}

#safety .safety-animation svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

#safety .pulse {
  fill: none;
  stroke: var(--gold);  /* Use var(--gold) for pulse */
  stroke-width: 3;
  transform-origin: 50% 50%;
  opacity: 0;
}

#safety .pulse1 { animation: pulse 1.6s ease-out infinite; }
#safety .pulse2 { animation: pulse 1.6s ease-out infinite; animation-delay: 0.8s; }

@keyframes pulse {
  0% { transform: scale(0.7); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

#safety .safety-paw {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 3rem;
  color: var(--gold);
  opacity: 0.55;
  z-index: 2;
}

/* Right section: Content grid */
#safety .safety-content {
  position: relative;
}

/* Safety list (3-column layout) */
#safety .safety-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 columns for safety items */
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#safety .safety-item {
  background:#ffffffab;
  border: 1px solid rgba(0, 0, 0, 0.10);
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr; /* Text-only layout */
  gap: 6px;
  border-radius: 16px;
  color: var(--black);

  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  outline: none;
}

#safety .safety-item:hover,
#safety .safety-item:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.10);
  background: var(--gold);
  color: var(--black);

}

#safety .safety-item-icon i:hover, #safety .safety-item-icon i:focus-visible {
  color: var(--black);  /* Apply gold color to all icons */
}


#safety .safety-item.active {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  color: var(--black);

}

#safety .safety-item-title {
  font-weight: 800;
  color: var(--black);
  line-height: 1.15;
}

#safety .safety-item-sub {
  font-size: 0.95rem;
  opacity: 0.85;
  line-height: 1.25;
}

/* REMOVE arrows from list */
#safety .safety-item-arrow {
  display: none !important;
}

/* Safety hover image (moved to its own row below the list) */
#safety .safety-hover-image {
  grid-column: span 3;  /* Span all 3 columns */
  margin-top: 20px;
  text-align: center;
}

#safety .safety-hover-image img {
  max-width: 100%;
  height: 250px;  /* Consistent height */
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* RESPONSIVE STYLES */
@media (max-width: 1024px) {
  /* Switch to 1 column layout on tablets and below */
  #safety .safety-shell {
    grid-template-columns: 1fr;  /* Single column */
  }

  #safety .safety-list {
    grid-template-columns: 1fr;  /* 1 column for small screens */
  }

  #safety .safety-hover-image {
    display: none;  /* Hide hover image on small screens */
  }

  /* Center the pet carrier on small screens */
  #safety .safety-carrier {
    width: 80%;  /* Adjust size on smaller screens */
    top: 5%;
    right: 0;
    transform: translateY(-50%);
  }
}

/* Mobile devices (max-width: 480px) */
@media (max-width: 480px) {
  #safety .safety-item {
    padding: 12px;  /* Reduce padding for mobile */
  }

  #safety .safety-list {
    grid-template-columns: 1fr;  /* 1 column for very small screens */
  }

  #safety .safety-hover-image {
    display: none;  /* Ensure hover image is hidden on mobile */
  }

  #safety .safety-carrier {
    width: 100%;  /* Full width for pet carrier on mobile */
  }
}

/* Section title font (ensure it matches other section titles) */
#safety .section-title {
  font-family: var(--font-title); /* Matches other section titles */
  margin: 0 0 10px 0;
}





/* =========================
   SAFETY ICON COLOR – GOLD
   ========================= */

/* Apply var(--gold) color to icons inside the safety list */
#safety .safety-item-icon i,
#safety .safety-item-title i,
#safety .safety-item-sub i {
  color: var(--gold);  /* Apply gold color to all icons */
}


#safety .safety-item {
  background: #ffffffab;
  border: 1px solid rgba(0, 0, 0, 0.10);
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr; /* Text-only layout */
  gap: 6px;
  border-radius: 16px;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  outline: none;
  color: var(--black);
}

#safety .safety-item:hover,
#safety .safety-item:focus-visible {
  transform: translateY(-2px);
  background: var(--gold);
  color: var(--black); /* Change text color to black on hover */
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.10);
}

#safety .safety-item.active {
  background: var(--gold); /* Active state: gold background */
  color: var(--black); /* Active state: black text */
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

/* Icon color for safety item */
#safety .safety-item-icon i {
  color: var(--gold); /* Use gold color for icons */
}

/* =========================
   SAFETY SECTION – ICON COLOR ON HOVER/ACTIVE
   ========================= */

/* Icon color when the item is hovered or active */
#safety .safety-item:hover .safety-item-icon i,
#safety .safety-item:focus-visible .safety-item-icon i,
#safety .safety-item.active .safety-item-icon i {
  color: var(--black);  /* Change icon color to black on hover/active */
}

/* Icon color for the rest (default state) */
#safety .safety-item-icon i {
  color: var(--gold);  /* Default icon color is gold */
}


#safety .section-title{
font-size:clamp(3.5rem, 6vw, 5rem);

}


    /* HERO → ABOUT */
    #hero {
      background:
        linear-gradient(
          to bottom,
       
        var(--cream) 0% 
        );
    
    }
    
    /* ─── ABOUT SECTION: TRANSPARENT → CREAM FADE ─────────────────────────── */
    #about {
      /* ensure positioning context & remove any old backgrounds */
      position: relative !important;
      background: none !important;
      overflow: hidden;
    }
    
    /* overlay gradient from transparent (top) to cream (bottom) */
    #about::before {
      content: "";
      position: absolute;
      inset: 0;               /* top:0; right:0; bottom:0; left:0 */
      z-index: 1;
      background: linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%,
        #fbe7c6 40%, 
        #fff 100%
      );
    }
    
    /* make sure your text/content sits above the gradient */
    #about .about-content {
      position: relative;
      z-index: 2;
    }
    
    /* SERVICES → SAFETY */
    #services {
      background: linear-gradient(
        to bottom,
        #fff 0%,
        #fff 80%,            /* hold peach */
        #f3f3f3 100%       /* fade into cream again */
      );
    }
    
    /* SAFETY → REVIEWS */
    #safety {
      background: linear-gradient(
        to bottom,
        #f3f3f3  0%,
        #f3f3f3  50%,       /* hold cream */
        #fff6e9 100%            /* fade into reviews’ pink */
      );
    }
    
    /* REVIEWS → GALLERY */
    #reviews {
      background: linear-gradient(
        to bottom,
        #fff6e9 100%,
       
          /* fade into gallery overlay */
      );
    }
    
    /* GALLERY → CONTACT */
    #gallery {
      background:
        
        linear-gradient(
          to bottom,
          #fff6e9  0%,
          var(--cream) 100%
        );
    }
    #contact {
      background: linear-gradient(
        to bottom,
        var(--cream) 0%,
        var(--black) 100%
      );
    }
    
    
    /* make Reviews a positioning context */
    #reviews {
      position: relative;
      overflow: hidden; /* ensures graphic can sit flush to bottom */
    }
    
    /* push your rotator/content above the graphic */
    #reviews .review-rotator,
    #reviews .review-cta {
      position: relative;
      z-index: 1;
    }
    
    /* the bottom-of-section graphic */
    .reviews-graphic {
      position: absolute;
      bottom: 0;
      left: 24%;
      transform: translateX(-50%);
      width: 100%;
      max-width: 795px;
      pointer-events: none; /* clicks pass through */
      z-index: 0;
    }
    
    /* hide all photo-cards by default… */
    .photo-stack .photo-card {
      display: none;
    }
    
    /* …and only display those in the active batch */
    .photo-stack .photo-card.show {
      display: block;
    }
    
    
    
    /* Regulated By Section */
    .regulated-section{
      padding: 4rem 2rem;
      background: var(--cream);
      text-align: center;
    }
    
    .regulated-title{
      font-family: 'Cal Sans', sans-serif;
      font-size: 2.2rem;
      margin-bottom: 2.5rem;
      color: #1a1a1a;
      letter-spacing: .05em;
    }
    
    .regulated-grid{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
      max-width: 1100px;
      margin: 0 auto;
    }
    
    .regulated-item{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .75rem;
      padding: 1.5rem 1rem;
      background: #ffffffab;
      border: 1px solid var(--gold);
      border-radius: 16px;
    }
    
    .regulated-item i{
      font-size: 2.2rem;
      color: var(--gold);
    }
    
    .regulated-item span{
      font-size: .95rem;
      color: #1a1a1a;
      line-height: 1.4;
    }
    
    
    @media (max-width: 1024px){
      .regulated-grid{
        grid-template-columns: repeat(2, 1fr);
      }
    }
    
    @media (max-width: 600px){
      .regulated-grid{
        grid-template-columns: repeat(2, 1fr);
      }
    }
    
    /* Estimate Section */
    #estimate {
      background: #f3f3f3;
      padding: 4rem 1rem;
    }
    #estimate .container {
      max-width: 800px;
      margin: 0 auto;
    }
    #estimate .section-title {
      font-family: 'Cal Sans', sans-serif;
      font-size: clamp(3.5rem, 6vw, 5rem);
      letter-spacing: 0.05em;
      font-weight: 700;
      color: var(--black);
      margin-bottom: 1rem;
      text-align: center;
    }
    .estimate-form .form-row {
      margin-bottom: 1rem;
      display: flex;
      flex-direction: column;
    }
    .estimate-form label {
      margin-bottom: 0.5rem;
      font-weight: 600;
      color: var(--black);
    }
    .estimate-form input[type="text"],
    .estimate-form select {
      padding: 0.5rem 1rem;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 1rem;
      font-family: var(--font-body);
    }
    .estimate-form .checkbox {
      flex-direction: row;
      align-items:normal;
    }
    .estimate-form .checkbox label {
      margin: 0;
      font-weight: normal;
    }
    .estimate-form input[type="checkbox"] {
      margin-right: 0.5rem;
    }
    
    /* Pet repeater */
    #pet-list .pet-entry {
      border: 1px solid #eee;
      border-radius: 6px;
      padding: 1rem;
      margin-bottom: 1rem;
      position: relative;
      background: var(--cream);
    }
    #pet-list .pet-entry h3 {
      margin-top: 0;
      font-size: 1.1rem;
      color: var(--black);
    }
    .remove-pet {
      position: absolute;
      top: 1rem; right: 1rem;
      background: none;
      border: none;
      color: #999;
      cursor: pointer;
      font-size: 0.9rem;
    }
    .remove-pet:hover {
      color: var(--gold);
    }
    
    /* Add-pet button */
    #add-pet {
      background: var(--black);
      color: var(--cream);
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      cursor: pointer;
      margin-bottom: 1.5rem;
      font-family: var(--font-nav);
    }
    #add-pet:hover {
      background: var(--gold);
      color: var(--black);
    }
    
    /* Calculate button */
    #calculate-btn {
      width: 100%;
      background: var(--gold);
      color: var(--black);
      border: none;
      padding: 0.75rem;
      font-size: 1.1rem;
      font-weight: bold;
      cursor: pointer;
      border-radius: 4px;
      font-family: var(--font-nav);
    }
    #calculate-btn:hover {
      opacity: 0.9;
    }
    
    /* Output */
    .estimate-output {
      margin-top: 2rem;
      text-align: center;
      font-size: 1.25rem;
      color: var(--black);
    }
    
    /* ─── Three-column layout ───────────────────────────────── */
    .estimate-form {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
    .form-col {
      display: flex;
      flex-direction: column;
    }
    
    
    /* adjust pet-entry width */
    .pet-entry {
      width: 100%;
    }
    
    /* limit styling tweaks */
    .remove-pet {
      align-self: flex-end;
      margin-top: 0.5rem;
    }
    
    /* (keep your existing button & input styles here…) */
    
    /* ensure container doesn’t overflow */
    #estimate { overflow: hidden; }
    
    /* any other spacing tweaks as needed… */
    
    
    /* ─── ESTIMATE SECTION ───────────────────────────────────────────────────── */
    
    #estimate .section-title {
      text-align: center;
      font-size: clamp(2rem, 5vw, 3rem);
      margin-bottom: 2.5rem;
    }
    
    /* boxed grid wrapper */
    .estimate-box {
      border: 1px solid rgba(255, 255, 255, .10);
      background: rgba(255, 255, 255, 0.7);
      border-radius: 18px;
      padding: 1rem;
      box-shadow: 0 12px 40px rgba(0, 0, 0, .15);
      overflow: hidden;
      display: grid;
      gap: .85rem;
      box-sizing: border-box;
     
    }
    
    /* force the Calculate button and output to span all columns */
    .estimate-box button[type="submit"],
    .estimate-output {
      grid-column: 1 / -1;
    }
    
    /* make each column flex-direction: column */
    .estimate-form .form-col {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    
    /* lighten form rows */
    .estimate-form .form-row {
      display: flex;
      flex-direction: column;
    }
    .estimate-form label {
      margin-bottom: 0.25rem;
      font-weight: 500;
    }
    .estimate-form input,
    .estimate-form select {
      padding: 0.5rem;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 0.95rem;
    }
    
    /* style “Add Another Pet” link */
    .add-pet {
      background: none;
      border: 1px dashed #888;
      color: #444;
      padding: 0.5rem;
      border-radius: 4px;
      font-size: 0.9rem;
      cursor: pointer;
    }
    .add-pet:hover {
      border-color: #666;
      color: #000;
    }
    
    /* Calculate button */
    #calculate-btn {
    
      background-color: rgba(250, 230, 197, 0.7);
      color: var(--black);
      border: 1px solid #ffd588;
      border-radius: 4px;
      box-shadow: none;
      padding: 0.75rem 1.5rem;
      font-size: 1rem;
      cursor: pointer;
      transition: background 0.3s;
    }
    #calculate-btn:hover {
      background: var(--gold);
      color: var(--black);
    }
    
    /* output styling */
    .estimate-output {
      margin-top: 1rem;
      padding: 1rem;
      background: var(--black);
      border-radius: 4px;
      font-family: var(--font-nav);
    }
    .estimate-output p {
      margin: 0.5rem 0;
      font-size: 1.2rem;
      color: var(--gold);
      
    
    }
    .estimate-output p strong {
      color: var(--gold);
    
    }
    
    
    /* hide output until after Calculate clicked */
    .estimate-output {
      display: none;
    }
    
    
    #estimate .form-row select#journey-type {
      background: var(--cream);
      border: 1px solid var(--black);
      padding: 0.5rem;
      font-family: var(--font-body);
      font-size: 1rem;
      border-radius: 0;
      width: 100%;
    }
    
    
    
    .loader {
      margin: 1rem auto;
      border: 4px solid var(--black);
      border-top:   4px solid var(--gold);
      border-radius: 50%;
      width: 32px;
      height: 32px;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    
    
    /* make any error inside your estimate box gold */
    .estimate-output.error {
      color: var(--gold);
    }
    
    /* responsive fallback: stack to one column under 768px */
    
    
    /* keep the journey modal completely hidden until you add .show */
    #journey-modal {
      display: none !important;
      position: fixed;
      inset: 0;                   /* shorthand for top:0; right:0; bottom:0; left:0 */
      background: rgba(0,0,0,0.8);
      justify-content: center;
      align-items: center;
      padding: 1rem;
      z-index: 2000;
      overscroll-behavior: contain; /* prevent overscroll bounce revealing it */
    }
    
    #journey-modal.show {
      display: flex !important;
    }
    
    
    .pet-network-link {
      color: var(--gold);
      text-decoration: none;
      font-weight: 700;
    }
    
    .pet-network-link:hover {
      text-decoration: underline;
    }
    
    .pet-network-link i {
      margin-left: 4px;
      font-size: 0.9em;
    }
    
    
    .about-credits{
      position: relative;
      width: 100%;
      max-width: 900px;     /* keep your original width */
      margin: 0 auto;
      text-align: center;
      height: 194px;
      overflow: hidden;
      color: #1a1a1a;
    
    }
    
    /* the moving track */
    .about-credits__track{
      position: relative;
      will-change: transform;
    }
    
    /* each block of text */
    .about-credits__inner{
      padding: 10px 0;
    }
    
    /* fades stay pinned to container */
    .about-credits::before,
    .about-credits::after{
      content:"";
      position:absolute;
      left:0; right:0;
      height: 70px;
      pointer-events:none;
      z-index: 5;
    }
    
    .about-credits::before{
      top:0;
      background: linear-gradient(to bottom, rgb(249 231 201), rgba(244, 233, 209, 0));
      
    }
    
    .about-credits::after{
      bottom:0;
      background: linear-gradient(to top, rgb(252 236 211), rgba(244, 233, 209, 0));
    }
    
    
    
    
    
    
    
    
    
    
    /* contain any overscroll so you can’t pull past the bottom into hidden elements */
    html, body {
      overscroll-behavior-y: contain;
    }
    
    
    html.terms-page { scroll-snap-type: none; }           /* stop snap on legal page */
    
    html.terms-page section {
      height: auto;                                       /* let it grow naturally */
      min-height: min(100vh, auto);
      align-items: flex-start;
      justify-content: flex-start;
      opacity: 1;                                         /* make it visible */
      transform: none;
      overflow: visible;                                  /* don’t clip long text */
      padding: 2rem 1rem;
    }
    
    
        /* FOOTER */
        footer { background: var(--black); color: var(--cream); padding:1rem; text-align:center; }
    
        footer {
          width: 100%;
          position: fixed;
          bottom: -100px;
          transition: bottom 0.4s ease-in-out;
          z-index: 1000;
          text-align: center !important;
        }
    
        footer.show-footer {
          bottom: 0; /* pops up */
        }
        
        /* ===========================
       DELIVERIES PAGE: 4-step flow
       =========================== */
    
    
    .delivery-steps{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: 1rem;
      align-items:start;
    }
    
    .delivery-step{
      position:relative;
      text-align:center;
      padding:.5rem .5rem .75rem;
    }
    
    .delivery-step:not(:last-child)::after{
      content:"";
      position:absolute;
      top:44px;
      right:-10px;
      width:20px;
      height:2px;
      background: rgba(212,175,55,.8);
      box-shadow: 0 0 0 3px rgba(212,175,55,.10);
    }
    .delivery-step:not(:last-child)::before{
      content:"";
      position:absolute;
      top:39px;
      right:-14px;
      width:0; height:0;
      border-left: 8px solid rgba(212,175,55,.9);
      border-top:6px solid transparent;
      border-bottom:6px solid transparent;
    }
    
    
    
    .step-number{
      position:absolute;
      top:8px;
      left:8px;
      width:26px;
      height:26px;
      border-radius:999px;
      background: var(--gold);
      color: var(--black);
      font-weight:900;
      display:grid;
      place-items:center;
      font-size:.95rem;
    }
    
    .step-circle img{
      width:62px;
      height:62px;
      object-fit:contain;
      display:block;
      filter: drop-shadow(0 6px 10px rgba(0,0,0,.10));
    }
    
    .step-title{
      font-family: var(--font-nav, "Outfit", sans-serif);
      letter-spacing:.05em;
      font-weight:900;
      margin:0 0 .25rem;
      font-size:1.02rem;
      color: var(--gold);
    }
    .step-desc{
      margin:0;
      opacity:.92;
      line-height:1.45;
      font-size:.95rem;
    }
    
    /* Mobile: stack steps */
    @media (max-width: 820px){
      .delivery-steps{ grid-template-columns:1fr; }
      .delivery-step{
        text-align:left;
        display:grid;
        grid-template-columns:110px 1fr;
        gap:.85rem;
        align-items:center;
      }
      .delivery-step:not(:last-child)::after,
      .delivery-step:not(:last-child)::before{ display:none; }
      .step-circle{ margin:0; }
    }
    
    
    
    /* =========================
       DELIVERIES – STEP CIRCLES (FINAL)
       Put this at the END of style-desktop.css
       ========================= */
    
    /* Remove any pseudo-arrow system (you are using real arrow icons now) */
    .deliveries-page .delivery-step::before,
    .deliveries-page .delivery-step::after{
      content: none !important;
      display: none !important;
    }
    
    /* Circle wrapper */
    .deliveries-page .step-circle--xl{
      width: 150px;
      height: 150px;
      border-radius: 999px;
      border: 2px solid var(--gold);
      overflow: hidden;
      position: relative;
      background: rgba(255,255,255,0.06);
    }
    
    /* Number badge always visible */
    .deliveries-page .step-circle--xl .step-number{
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 5;
    }
    
    /* Make the PNG fill the circle area */
    .deliveries-page .step-circle--xl img{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;        /* fills the circle */
      object-position: center;  /* keep centered */
    }
    
    /* If you prefer NO cropping, swap to:
    object-fit: contain;
    background: transparent;
    But the PNG canvas must be tightly cropped for it to look “full”. */
    /* Services Section */
    
    
    
    /* Cards Section */
    .services-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }
    
    .card {
      background-color: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      padding: 20px;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
        
    /* 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');
    }
    
    
    /* League Spartan */
    @font-face {
      font-family: 'League Spartan';
      font-style: normal;
      font-weight: 400;
      src: url('../fonts/LeagueSpartan-SemiBold.ttf') format('truetype');
    }
    
    /* Montserrat */
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 400;
      src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
      font-display: swap;
    }
    
    
    
    
    @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');
    
    
    @import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
    
    @import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Days+One&display=swap');
    
    
    
        
        :root {
          --cream: #f4e9d1;
          --black: #1a1a1a;
          --gold:  #d4af37;
          --font-body:    'Outfit', sans-serif;
          --font-heading: 'Playfair Display', serif;
          --font-card: 'Inter Tight', sans-serif;
          --font-title:'Cal Sans', sans-serif;
          --font-day:'Days One', sans-serif;
          --font-caption: 'Patrick Hand', cursive;
          --font-nav:     'Sniglet', system-ui;
          --font-quote:   'Lora', serif;
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        html { scroll-behavior:smooth; scroll-snap-type:y mandatory; }
        html, body {
          touch-action: pan-x pan-y; /* allow only one‐finger pans, no pinch/zoom */
        }
        
        html, body {
          touch-action: manipulation; /* disables pinch zoom but still allows scroll */
        }
        
        body {
          font-family: var(--font-body);
          background: var(--cream);
          color: var(--black);
          overflow-x: hidden;
        }
        a { text-decoration: none; color: inherit; }
    
        /* NAVBAR */
        header { position: fixed; top: 20px; left: 0; width: 100%; display: flex; justify-content: center; pointer-events: none; z-index:1000; }
        .nav-wrapper { pointer-events: auto; background: var(--black); border-radius: 8px; padding: 0.5rem 2rem; display: flex; align-items: center; justify-content: space-between; width: 90%; max-width: 1100px; }
        .nav-wrapper img.logo { height: 40px; filter:
        brightness(0) 
        saturate(100%) 
        invert(72%) 
        sepia(42%) 
        saturate(600%) 
        hue-rotate(1deg) 
        brightness(99%) 
        contrast(92%); }
        nav#navbar { display: flex; gap: 2rem; font-family: var(--font-nav); letter-spacing: 0.1em; }
        nav#navbar a { color: var(--gold); font-weight: 300; position: relative; transition: color .3s; }
        nav#navbar a:hover { color: #fff; }
        nav#navbar a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--gold); transition: width .3s; }
        nav#navbar a:hover::after { width: 100%; }
        .menu-toggle { display: none; background: none; border: none; cursor: pointer; }
        .menu-toggle svg { width: 24px; height: 24px; stroke: var(--gold); stroke-width: 2; fill: none; }
        @media (max-width:1024px) {
          .menu-toggle { display: block; }
          nav#navbar { display: none; position: fixed; top:0; left:0; width:100%; height:100vh; background: rgba(0,0,0,0.95); flex-direction: column; align-items:center; justify-content:center; gap: 2rem; z-index:1001; }
          nav#navbar.show { display: flex; }
          nav#navbar a { font-size: 2rem; }
        }
    
        /* SECTIONS */
        main { margin-top: 100px; }
        section {
          height: 100vh; scroll-snap-align: start;
          display: flex; align-items: center; justify-content: center;
          position: relative; padding: 2rem;
          opacity: 0; transform: translateY(50px);
          transition: opacity .6s ease, transform .6s ease;
          overflow: hidden;
        }
        section.visible { opacity: 1; transform: translateY(0); }
        h2.section-title {
          align-items: center;
          gap: .75rem;
          padding: 1.5rem 1rem;
          font-family: var(--font-heading);
          font-size: 4rem;
          margin-bottom: 1rem;
          opacity: 0;
          animation: fadeIn 1s ease-out forwards;
          }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to   { opacity: 1; transform: translateY(0); } }
        .paw-overlay { position: absolute; font-size: 100px; color: var(--black); opacity: 0.1; }
    
        /* HERO */
      
    
      
        #hero .logo-hero { width: 300px; height: 300px; object-fit: cover; flex-shrink: 0; }
        .headline-rotate-wrapper { flex: 1; display: flex; flex-direction: column; align-items: flex-start; max-width: 60%; margin-top: .5rem; gap: 2.5rem; }
        .headline-rotate { font-family: var(--font-heading); font-size: clamp(1.5rem,5vw,2.5rem); line-height: 1.2; min-height: 6rem; }
        .hero-title-main,.hero-title-sub,.headline-rotate-wrapper h2 {
          text-shadow:
            0 2px 4px rgba(0, 0, 0, 0.35);
        }
        
        .headline-rotate-wrapper p,
        .headline-rotate-wrapper span {
          text-shadow:
            0 1px 2px rgba(0, 0, 0, 0.2);
        }
    
        /* 3D rotating paw (Y axis) */
    .paw-rotate{
      display: inline-block;
      margin-left: 6px;
      color: var(--gold);
      transform-style: preserve-3d;
      animation: pawSpinY 3.5s linear infinite;
    }
    
    /* Smooth 3D flip */
    @keyframes pawSpinY{
      0%   { transform: rotateY(0deg); }
      50%  { transform: rotateY(180deg); }
      100% { transform: rotateY(360deg); }
    }
    
    .paw-rotate{
      animation-duration: 6s;
    }
    
    @media (prefers-reduced-motion: reduce){
      .paw-rotate{
        animation: none;
      }
    }
    
    /* Improve depth perception */
    .page-title{
      perspective: 800px;
    }
    
        
        .headline-rotate .dot { animation: blink 1s steps(1) infinite; }
        @keyframes blink { 0%,50%{opacity:1;}51%,100%{opacity:0;} }
        .rotating { animation: fadeInText .6s ease forwards; }
        .rotating.fade-out { animation: fadeOutText .6s ease forwards; }
        @keyframes fadeInText { from{opacity:0;} to{opacity:1;} }
        @keyframes fadeOutText{ from{opacity:1;} to{opacity:0;} }
    
        .hero-headline { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 1rem; }
        .hero-title-main { font-family: 'Bernard MT Condensed', serif; font-size: clamp(80px, 10vw, 120px); white-space: nowrap; line-height: 1; position: relative; color: #000; }
        .hero-title-main .hero-paw { position: absolute; top: -20px; right: -50px; font-size: 50px; transform: rotate(20deg); color: #000; }
        .hero-title-sub { font-family: "League Spartan", sans-serif; font-weight: 700; font-size: clamp(20px, 3vw, 32px); text-transform: uppercase; letter-spacing: 0.25em; color: #000; margin-top: 0.2rem; white-space: nowrap; }
        .hero-btn {font-family: "Yellowtail", cursive;font-size: 2rem;font-weight: 400;background-color: var(--black);color: var(--gold);padding: 0.75rem 1.5rem;border-radius: 14px;transition: background-color 0.3s, color 0.3s, transform 0.2s;}
        .hero-btn:hover { background-color: var(--gold); color: var(--black); transform: translateY(-2px); }
        @media (min-width: 700px) { #hero { justify-content: center; padding-left:2rem; } .headline-rotate-wrapper { align-items: flex-start; } }
        @media (max-width: 699px) { #hero { flex-direction: column; align-items: center;  } .headline-rotate-wrapper { align-items: center; max-width: 90%; text-align: center; } .hero-btn { margin: 3rem auto 0 auto; } }
    
        /* ABOUT */   #about   { flex-direction:column; text-align:center; padding:4rem; z-index: -1;}
        /* SERVICES */#services{  flex-direction:column; text-align:center; padding:4rem; }
        #services ul { list-style: disc inside; margin-top:1rem; }
        #services li{ margin:0.5rem 0; }
        /* SAFETY */   #safety  { background:var(--cream); flex-direction:column; text-align:center; padding:4rem; }
        /* CONTACT */  #contact { background:var(--cream); flex-direction:column; text-align:center; padding:4rem; }
    
        /* REVIEWS */
        #reviews {  flex-direction:column; text-align:center; padding:4rem; overflow: visible; }
        .review-rotator { position: relative; width:100%; }
        
    
        /* GALLERY */
        /* gallery title aligned right on desktop, centered on mobile */
    
    
    
    
    
    
    
    
    /* Desktop: use the tablet "My Journey" behaviour */
    #read-journey-btn{
      background-color: rgba(250, 230, 197, 0.7);
      color: var(--black);
      border: 1px solid #ffd588;
      border-radius: 14px;
      box-shadow: none;
      padding: 0.75rem 1.5rem;
      font-family: var(--font-title);
      /* font-size: 2rem; */
      font-size: clamp(0.5rem, 4vw, 3rem);
      font-weight: 700;
      letter-spacing: 0.0em;
      cursor: pointer;
      display: inline-block;
      text-align: center;
      text-decoration: none;
      width: 44%;
      transition: background-color 0.3s, color 0.3s, transform 0.2s;
    }

    #read-journey-btn:hover { background-color: var(--gold); color: var(--black); transform: translateY(-2px); }
    
    #read-journey-btn-nd{
    display: none;
    }
    
    #about .about-text{
      display: none !important;
      max-height: 5.5em;
      overflow: hidden;
      position: relative;
      transition: max-height .4s ease;
    }
    
    /* When JS adds .expanded to #about, show the full text */
    #about.expanded .about-text{
      display: block !important;
      max-height: none;
      
    }
    
    /* Default (collapsed) */
    #about .about-text{
      display: none;
    }
    
    /* Expanded */
    #about.expanded .about-text{
      display: block;
    }
    
    #about .about-text{
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s ease, opacity .3s ease;
      opacity: 0;
    }
    
    #about.expanded .about-text{
      max-height: 1000px; /* large enough for your text */
      opacity: 1;
    }
    
    .journey-content {
      background: var(--black);
        color: var(--gold);
        border-radius: 8px;
        max-width: 900px;
        font-size: 1.2rem;
        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: 2.5rem;
      color: var(--gold);
      cursor: pointer;
      line-height: 1;
    }
    
    
    
    /* desktop & tablet: hide the button, show the full text */
    /* #read-journey-btn {
      display: none !important;
    }
    .about-content .about-text {
      display: block !important;
      text-align:center;
    height: 176px;
    }
         */
    
    
        
        /* allow hero overflow so the img can spill down */
    #hero {
      position: relative;
      overflow: visible;
      top: -3rem;
    
    }
    
    
    /* the overlapping image at the bottom */
    .hero-bottom-img {
      position: absolute;
      bottom:-169px;              /* how far it overlaps—tweak as needed */
      left: 50%;
      transform: translateX(-50%);
      width: 100%;                 /* or a fixed px value */
      max-width: 1999px;           /* adjust to suit your design */
      pointer-events: none;       /* so clicks pass through */
      z-index: 2;                 /* above hero content but under nav */
    }
    
    /* ensure next section covers anything below hero bg */
    main > section:not(#hero) {
      position: relative;
      z-index: 1;
    }
    
    /* ABOUT header image wrapper */
    /* Typewriter cursor */
    .cursor {
      display: inline-block;
      font-family: var(--font-heading);
      font-weight: bold;
      animation: blinkCursor 0.7s steps(1) infinite;
    }
    
    @keyframes blinkCursor {
      0%, 100% { opacity: 1; }
      50%      { opacity: 0; }
    }
    
    /* ABOUT SECTION */
    #about {
      position: relative;
     
      overflow: hidden;
    }
    
    #about::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
    }
    
    #about .about-content {
      position: relative;
      z-index: 2;
      max-width: 800px;
      margin: 0 auto;
      text-align: left;
      padding: 4rem 2rem;
    }
    
    #about .textbox{
    
background:#ffffffab;
    
border: 1px solid var(--gold);
    
border-radius: 16px;
    
padding: 1rem 1.25rem;
    
margin: 1rem 0 2rem;
    }
    
    
    #about p {
      line-height: 1.6;
      color: var(--black);
    }
    
    #about .about-values {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
      /* margin: 2rem 0; */
      padding: 0;
    }
    
    #about .about-values li {
      background: var(--gold);
      padding: 1rem;
      border-radius: 16px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      font-family: var(--font-body);
      color: var(--black);
    }
    
    #about .about-values li strong {
      color: var(--black);
        letter-spacing: 0.05em;
        font-family: var(--font-title);
    }
    
    #about a {
      color: var(--black);
      text-decoration: underline;
          text-underline-offset: 3px;
          font-weight: 600;
    }
    
    /* paw stays low-opacity behind */
    #about .paw-overlay {
      font-size: 120px;
      color: var(--black);
      transform: rotate(20deg);
      opacity: 0.05;
      position: absolute;
      
      z-index: 1;
    }
    
    
    
    
    
    /* Ensure content sits above them */
    #about .about-content {
      position: relative;
      z-index: 2;
    }
    
    
    /* Ensure content sits above them */
    #about .about-content {
      position: relative;
      z-index: 2;
    }
    
    /* responsive tweaks */
    
    #mobile-portrait{
    
      display:none;
      
      }
    
    
      
    #desktop-portrait{
    
      display: block;
    }
    
     /* Make portrait + name/title sit side-by-side */
     .about-portrait-wrapper{
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 1rem !important;
      width: 100% !important;
      margin: 0 0 1rem 0 !important;
      float: none !important;
      text-align: left !important;
    }
    
    /* Perfect circle without the padding-top trick on mobile */
    .about-portrait{
      flex: 0 0 auto !important;
      width: 200px !important;
      height: 200px !important;
      padding-top: 0 !important;       /* IMPORTANT: removes the glitch */
      border-radius: 50% !important;
      overflow: hidden !important;
      border: 4px solid var(--gold) !important;
      box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
      position: relative !important;
    }
    
    .about-portrait img{
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: 50% 20% !important;
    }
    
    .portrait-info{
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      text-align: left !important;
      line-height: 1.2 !important;
    }
    
    .portrait-name{
      margin: 0 !important;
      font-weight: 800 !important;
      color: var(--black) !important;
      white-space: normal !important;   /* allow wrapping nicely */
    }
    
    .portrait-position{
      margin: .25rem 0 0 0 !important;
      opacity: .8 !important;
      white-space: normal !important;
    }
    
    
    
    @media screen and (min-width: 1025px) {
      nav#navbar .close-menu {
        display: none !important;
      }
    }
    
    
    
    
    /* Mobile: center above text */
    
    
    /* 1) Define the shake keyframes */
    @keyframes shake {
      0%   { transform: rotate(0deg); }
      20%  { transform: rotate(2deg); }
      40%  { transform: rotate(-2deg); }
      60%  { transform: rotate(2deg); }
      80%  { transform: rotate(-2deg); }
      100% { transform: rotate(0deg); }
    }
    
    /* 2) Apply on scroll-into-view */
    #about.visible .about-values li {
      transform-origin: center center;
      animation: shake 0.5s ease-in-out;
    }
    
    /* 3) Re-trigger on hover */
    .about-values li:hover {
      transform-origin: center center;
      animation: shake 0.5s ease-in-out;
    }
    
    
    /* Base shake (keeps both forwards/backwards transforms) */
    #about.visible .about-values li {
      transform-origin: center center;
      animation: shake 0.5s ease-in-out both;
    }
    
    /* Stagger via nth-child delays */
    #about.visible .about-values li:nth-child(1) { animation-delay: 0s;    }
    #about.visible .about-values li:nth-child(2) { animation-delay: 0.15s; }
    #about.visible .about-values li:nth-child(3) { animation-delay: 0.30s; }
    #about.visible .about-values li:nth-child(4) { animation-delay: 0.45s; }
    #about.visible .about-values li:nth-child(5) { animation-delay: 0.60s; }
    /* Add more nth-child rules if you have more items */
    
    /* Hover: override to animate immediately on hover */
    .about-values li:hover {
      animation: shake 0.5s ease-in-out both;
      animation-delay: 0s !important;
    }
    
    
    
    /* use Poppins for “About Us” */
    #about .section-title {
      font-family: var(--font-body);
          /* new Avenir-like font */
      font-size: clamp(3rem, 10vw, 6rem);
      font-weight: 700;
      letter-spacing: 0.05em;
      color: var(--black);
     /* opacity: 0;
      transform: scale(0.5);*/
     /* transition: transform 0.3s, opacity 0.3s;*/
    }
    
    /* pop-bounce on scroll into view */
    
    
    /* hover wiggle */
    /* 1) Cal Sans for your main Services headline */
    .services-intro .section-title {
      font-family: var(--font-body);
      font-size: clamp(2.5rem, 6vw, 4rem);
      margin-bottom: 1rem;
      color: var(--black);
    }
    
    /* 2) Copy as your site default (Outfit) */
    .services-intro p,
    .card p {
      font-family: var(--font-body);
      font-size: 1.05rem;
      line-height: 1.6;
      color: var(--black);
    }
    
    /* 3) Remove previous bg; center and pad */
    #services {
      background:#fff;
      flex-direction: column;
      text-align: center;
      padding: 4rem 2rem;
    }
    
    /* 4) Card grid layout (unchanged) */
    .services-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 2rem;
      margin-top: 2.5rem;
      margin: 0 auto;
    }
    
    /* 5) Gold cards with black text */
    .services-cards .card {
      
display: flex;
      
flex-direction: column;
      
align-items: center;
      
/* gap: .75rem; */
      
padding: 1.5rem 1rem;
      
background: #ffffffab;
            
border-radius: 16px;
    }
    
    /* 6) Staggered reveal on scroll */
    #services.visible .card {
      opacity: 1;
      transform: translateY(0);
    }
    #services.visible .card:nth-child(1) { transition-delay: 0.1s; }
    #services.visible .card:nth-child(2) { transition-delay: 0.2s; }
    #services.visible .card:nth-child(3) { transition-delay: 0.3s; }
    #services.visible .card:nth-child(4) { transition-delay: 0.4s; }
    
    /* 7) Card hover lift + icon rotate */
    .services-cards .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }
    .services-cards .card:hover .service-icon {
      transform: rotate(-15deg) scale(1.1);
    }
    
    /* 8) Icon styling—now black to contrast gold */
    .service-icon {
      font-size: 3rem;
      color: var(--black);
      margin-bottom: 1rem;
      transition: transform .3s ease;
    }
    
    /* 9) Card titles in your heading font */
    .card-title {
      font-family: var(--font-body);
      font-size: 1.3rem;
      margin-bottom: 0.5rem;
    }
    
    /* Responsive tweaks */
    
    
    /* 3) Force single-column on small screens for better responsiveness */
    
    
    
    /* Reviews section transparent */
    #reviews {
      background: none;
    }
    
    /* Center & constrain rotator */
    .review-rotator {
      max-width: 800px;
      margin: 0 auto;
      position: relative;
      height: auto; /* let cards flow */
    }
    
    /* Your existing .review-item and .review-item.active rules will handle stacking */
    
    
    .review-rotator {
      position: relative;
      width: 100%;
      max-width: 800px;
      height: 240px;
      margin: 0 auto;
      overflow: visible;
    }
    
    .review-item {
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%) scale(0.95) translateY(10px);
      opacity: 0;
      width: 100%;
      z-index: 1;
      transition: opacity 0.8s ease, transform 0.8s ease;
    }
    
    .review-item.active {
      opacity: 1;
      transform: translateX(-50%) scale(1) translateY(0);
      z-index: 2;
    }
    
    .review-card {
      display: flex;
      align-items: center;
      background: #fff;
      padding: 1rem 1.5rem;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .review-avatar {
      width: 80px;
      height: 80px;
      flex-shrink: 0;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 1rem;
      border: 2px solid var(--gold);
    }
    
    .review-body {
      flex: 1;
    }
    
    .stars {
      margin-bottom: 0.5rem;
    }
    
    .stars svg {
      width: 20px;
      height: 20px;
      fill: var(--gold);
      margin-right: 0.2rem;
    }
    
    .review-text {
      font-size: 1.1rem;
      line-height: 1.4;
      margin: 0 0 0.5rem;
    }
    
    .review-author {
      font-style: italic;
      color: #555;
      margin: 0;
    }
    
    
    /* —————————— */
    /* Google-Review CTA under Reviews */
    .review-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      margin-top: 2rem;
      flex-wrap: wrap;
    }
    
    .qr-box {
      background: #fff;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    
    .qr-box img {
      display: block;
      width: 150px;
      height: 150px;
    }
    
    .cta-text p {
      font-family: var(--font-nav);
      font-size: 1.2rem;
      color: var(--black);
      margin: 0;
      line-height: 1.4;
    }
    
    .cta-text a {
      color: var(--gold);
      font-weight: bold;
      text-decoration: underline;
    }
    
    
    
    
    /* —— Stack container —— */
    .photo-stack-wrapper {
      position: relative;
        max-width: 600px;
        margin: 0 auto;
        right: -65%;
        text-align: center;
    }
    .photo-stack {
      position: relative;
      width: 400px; height: 400px;
      margin-bottom: 1.5rem;
      touch-action: pan-y;
    }
    .photo-card {
      position: absolute;
      top: 0; left: 0;
      width: 80%; height: 100%;
      margin: 0 10%;
      background: #fff;
      border: 1px solid var(--white);
      border-radius: 1px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
      cursor: grab;
      transition: transform .6s ease, z-index .6s ease;
    }
    .photo-card img {
      width: 100%; height: 80%;
      object-fit: cover; border-radius: 4px;
    }
    .photo-card figcaption {
      margin-top: .5rem;
      font-family: var(--font-caption);
      font-size: 1rem;
    }
    
    .photo-stack .photo-card {
      position: absolute;
      top: 0;
      left: 0;
      /* use your --i to stagger rotation and offset */
      transform: 
        rotate(calc((var(--i) * 10deg) - 20deg))
        translate(
          calc((var(--i) * 5px) - 15px),
          calc((var(--i) * 5px) - 15px)
        );
      transform-origin: center center;
      transition: transform 0.6s ease;
      /* optional: stack ordering so higher --i sit behind */
      z-index: calc(100 - var(--i));
    }
    
    /* make sure the very top card isn’t rotated */
    .photo-stack .photo-card:last-child {
      transform: none;
      z-index: 101;
    }
    
    
    
    /* “View All” grid styles */
    .view-all-btn {
      font-family: "Yellowtail", cursive;
      font-size: 1.5rem;
      font-weight: 500;
      background-color: rgb(0 0 0 / 0%);
      color: #1a1a1a;
      padding: 0.75rem 1.5rem;
      border: solid 1px;
      border-radius: 14px;
      transition: background-color 0.3s, color 0.3s, transform 0.2s;
    }
    .view-all-btn:hover { background: var(--gold); color: var(--black); }
    
    
    /* —— Modal & Slider —— */
    .modal {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.8);
      display: flex; align-items: center; justify-content: center;
      z-index: 3000;
    }
    .modal.hidden { display: none; }
    .modal-content {
      position: relative;
      width: 90%; max-width: 800px;
      background: #000000; border-radius: 8px;
      overflow: hidden;
    }
    .close-modal {
      position: absolute; top: 0.5rem; right: 1rem;
      font-size: 2rem; color:#fff; cursor: pointer;
      z-index: 1;
    }
    .slider {
      position: relative; height: 500px; background: #000000;
    }
    .slide {
      display: none;
      width: 100%; height: 100%;
      flex-direction: column; align-items: center; justify-content: center;
    }
    .slide.active { display: flex; }
    .slide img {
      max-width: 100%; max-height: 80%;
      border-radius: 4px;
    }
    .slide .caption {
      margin-top: 1rem;
      font-family: var(--font-caption);
      font-size: 1.1rem;
      color: var(--gold);
    }
    .prev-slide, .next-slide {
      position: absolute; top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,0.5);
      color: #fff; border: none;
      padding: 0.5rem 1rem; border-radius: 4px;
      font-size: 2rem; cursor: pointer;
    }
    .prev-slide { left: 0.5rem; }
    .next-slide { right: 0.5rem; }
    
    
    /* gallery title sits flush with the photo stack column */
    #gallery .section-title {
      max-width: 600px;
      margin: 0 auto 0.5rem;
      margin-left: -15rem;      
      float: left;
      margin-top: 8.1rem;
      font-family: var(--font-title);
      font-size: clamp(3.5rem, 6vw, 5rem);
      /* letter-spacing: 0.05em; */
      font-weight: 700;
      color: var(--black);
    }
    
    /* mobile reset back to full-width center */
    
    
    /* make #gallery a positioning context */
    #gallery {
      position: relative;
      overflow: hidden;
    }
    
    /* shared styles for all bg-decor */
    .gallery-decor {
      position: absolute;
      background-repeat: no-repeat;
      background-size: contain;
     
      pointer-events: none;
    }
    
    /* first pawprint up in the top-left */
    .gallery-decor.decor1 {
      top: 13%;
      left: 3%;
      transform: rotate(350deg);
      width: 500px;
      height: 228px;
      background-image: url('../images/bone.png');
    }
    
    /* second bone down in the bottom-right */
    .gallery-decor.decor2 {
      bottom: 6%;
      right: 45%;
      transform: rotate(10deg);
      width: 600px;
      height: 353px;
      background-image: url('../images/camera2.png');
    }
    
    .gallery-decor.decor3 {
      bottom: -3%;
      right: -20%;
      transform: rotate(108deg);
      width: 470px;
      height: 462px;
      background-image: url('../images/mouse.png');
    }
    
    
    /* responsive tweak: hide decorations on small screens */
    
    
    
    /* ─── CONTACT SECTION ───────────────────────────────────────────────────── */
    
    #contact.contact-section {
      background: var(--black);
      color: var(--cream);
      padding: 4rem 2rem;
      scroll-snap-align: start;
    }
    
    /* ─── SPONSORS BANNER ───────────────────────────────────────────────────── */
    
    
    
    
    /* Main two-column layout */
    #contact .contact-main {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 3rem;
      max-width: 800px;
      margin: 0 auto;
      align-items: start;
    }
    
    /* Left: contact details */
    #contact .contact-details h2 {
      font-family: var(--font-title);
      /* letter-spacing: 0.05em; */
      font-size: 3.5rem;
      margin-top: -0.8rem;
      margin-bottom: 1rem;
      color: var(--gold);
    }
    #contact .contact-details ul {
      list-style: none;
      padding: 0;
      font-size: 1rem;
      line-height: 1.8;
    }
    #contact .contact-details li {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    #contact .contact-details li i {
      color: var(--gold);
      width: 1.2em;
      text-align: center;
    }
    #contact .contact-details a {
      color: var(--cream);
     /* text-decoration: underline;*/
      transition: color .3s;
    }
    #contact .contact-details a:hover {
      color: var(--gold);
    }
    
    /* Right: social cards */
    #contact .social-links {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 1rem;
    }
    #contact .social-link {
      background: var(--cream);
      color: var(--black);
      font-family: var(--font-nav);
      font-size: 1rem;
      padding: 0.75rem 1rem;
      border-radius: 14px;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      transition: transform .3s, background .3s, color .3s;
    }
    #contact .social-link i {
      font-size: 1.4rem;
    }
    #contact .social-link:hover {
      transform: translateY(-3px);
      background: var(--gold);
      color: var(--black);
     
    }
    
    /* WhatsApp special color */
    #contact .social-link.whatsapp {
      background: #25D366;
      color: #fff;
    }
    #contact .social-link.whatsapp:hover {
      background: var(--gold);
      color: var(--black);
    }
    
    /* Twitter button */
    #contact .social-link.twitter {
      background-color: #090223;
      color: var(--cream);
    }
    #contact .social-link.twitter:hover {
      background: var(--gold);
      color: var(--black);}
    
    
    
    
    /* Individual brand tweaks */
    #contact .social-link.insta { background: #E4405F; color: #fff; }
    #contact .social-link.insta:hover {  background: var(--gold);
      color: var(--black); }
    #contact .social-link.fb   { background: #1877F2; color: #fff; }
    #contact .social-link.fb:hover   {  background: var(--gold);
      color: var(--black); }
    
    /* Responsive fallback */
    
    
    
    /* —————— Partnered With Section (side-by-side) —————— */
    #partners {
      display: grid;
      grid-template-columns: 40% 60%;      /* title on left, logos on right */
      align-items: center;                /* vertically center both columns */
      max-width: 1060px;
      margin: 0 auto 4rem;
      padding: 0 2rem;
      gap: 1rem;                          /* space between title & logos */
    }
    
    #partners .section-title {
      font-family: var(--font-title);
      font-size: clamp(3rem, 4vw, 5rem); /* smaller, responsive */
      font-size: clamp(3rem, 6vw, 4rem);
      margin: 0;
      justify-self: start;                /* keep it flush left */
      color: var(--black);
      /* letter-spacing: 0.05em; */
    }
    
    
    
    /* logos container now wide and airy */
    .partner-logos {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 3rem;                          /* extra space around each logo */
      justify-items: center;
      align-items: center;
    }
    
    /* logos are black + padded; reveal color on hover */
    .partner-logos img {
      max-width: 200px;
      padding: 1.5rem;                   /* plenty of clickable area */
      filter: brightness(0);
      opacity: 0.5;
      transition: filter .3s ease, transform .3s ease;
    }
    .partner-logos img:hover {
        opacity: 1;
      filter: none;
      transform: scale(1.05);
    }
    
    /* collapse to single-column on tablets */
    
    
    /* hide completely on very small phones */
    
    
    
    
    /* Make partners a positioning context and allow overlap */
    #partners {
      position: relative;
      overflow: visible; /* so the decor can hang into the gap above Reviews */
    }
    
    /* Keep content above the decor if needed */
    #partners .section-title,
    #partners .partner-logos {
      position: relative;
      z-index: 1;
    }
    
    /* Handtoy: same pattern as gallery-decor */
    .gallery-decor.decor-handtoy {
      position: absolute;
      background-image: url(../images/handtoy.png);
      background-repeat: no-repeat;
      background-size: contain;
      pointer-events: none;
      z-index: 0;
    
      width: 952px;
      height: 735px;
      right: -34%;
      bottom: -36%;
    }
    
    
    /* Handtoy: same pattern as gallery-decor */
    #partners .decor-guinea {
      position: absolute;
      top: 57%;
      left: -540px;
      transform: translateY(-50%);
      width: 1029px;
      max-width: none;
      pointer-events: none;
      z-index: -1;
    }
    
    #regulated .safety-gslying{
    
      position: absolute;
      top: 80%;
      /* left: -540px; */
      transform: translateY(-50%);
      width: 1029px;
      max-width: none;
      pointer-events: none;
      z-index: -1;
    
    }
    
    
    
    #regulated .safety-kong{
    
      position: absolute;
      top: 11%;
      left: 322px;
      transform: translateY(-50%);
      width: 248px;
      max-width: none;
      pointer-events: none;
      z-index: -1;
    
    }
    
    #faqs .faqs-cat{
    
      position: absolute;
            top: 57%;
            right: -10px;
            transform: translateY(-50%);
            width: 495px;
            max-width: none;
            pointer-events: none;
            z-index: -1;
    
    
    }
    
    
    #partners .decor-handtoy {
      position: absolute;
      top: 108%;
      right: -40%;
      transform: translateY(-50%) scaleX(-1);
      width: 966px;
      max-width: none;
      pointer-events: none;
      z-index: -1;
    }
    
    #partners .decor-rat2 {
      position: absolute;
      top: 50%;
      right: 820px;
      transform: translateY(-50%) scaleX(-1);
      width: 289px;
      max-width: none;
      pointer-events: none;
      z-index: -1;
    }
    
    
    
    /* If you’d rather have it flush to the RIGHT EDGE of the SECTION (respect padding),
       use this instead of right:-2rem:  right: 0; */
    
    /* Hide on small screens to avoid crowding */
    
    
    /* big background PNG */
    .about-puppy {
    
      position: absolute;
      bottom: 1%;
       right:0;
      width: 800px;
      max-width: none;
      pointer-events: none;
      z-index: 1;
    
      /* behind everything in #services */
    }
    
    .about-lanyard {
    
      position: absolute;
      top: -10%;
                left: -650px;
      width: 1387px;
      max-width: none;
      pointer-events: none;
      z-index: 1;
      transform: translate(-51px, 30px) rotate(252deg);
    
      /* behind everything in #services */
    }
    
    .about-keys {
    
      
      position: absolute;
      top: 7%;
      right: 0px;
      width: 293px;
      max-width: none;
      pointer-events: none;
      z-index: 1;
      transform: translate(-51px, 30px) rotate(117deg);
    }
    
    #services {
      position: relative;   /* create a stacking context */
      overflow: visible;    /* allow kittens to peek out */
    }
    
    /* big background PNG */
    .services-kittens {
      position: absolute;
      top: 66%;
      left: -43px;
      transform: translateY(-50%);
      width: 800px;
      max-width: none;
      pointer-events: none;
      z-index: 0;       /* behind everything in #services */
    }
    
    .services-cattoy {
      position: absolute;
      top: -4%;
      right: -108px;
      transform: translate(-51px, 30px) rotate(47deg);
      width: 558px;
      max-width: none;
      pointer-events: none;
      z-index: 0;    /* behind everything in #services */
    }
    
    /* bring intro and cards above */
    .services-intro,
    .services-cards .card {
      position: relative;
      z-index: 1;
    }
    
    
    /* =========================
       FAQ ACCORDION (THEME-MATCH)
       ========================= */
       .faqs { padding: 4rem 1.5rem; }
       .faqs .container { max-width: 960px; margin: 0 auto; }
       
       .faqs-sub {
        text-align: center;
            opacity: 0.9;
            margin: 0.5rem auto 2rem;
            max-width: 730px;
            font-family: var(--font-body);
            font-size: 1.1rem;
            line-height: 1.6;
       }
       
       /* List */
       .faq-list { display: grid; gap: 0.9rem; }
       
       /* Item */
       .faq-item {
            background:var(--gold);
            border-radius: 16px;
            overflow: hidden;
       }
       
       /* Summary button */
       .faq-q {
         cursor: pointer;
         list-style: none;
         display: grid;
         grid-template-columns: 1fr 28px;
         gap: 0.75rem;
         align-items: center;
         padding: 1.05rem 1.1rem;
         font-family: 'Cal Sans', sans-serif;
         font-size: 1.05rem;
         letter-spacing: 0.02em;
       }
       
       .faq-q::-webkit-details-marker { display: none; }
       
       /* Icon */
       .faq-icon {
         width: 22px;
         height: 22px;
         position: relative;
         justify-self: end;
       }
       .faq-icon::before,
       .faq-icon::after {
         content: "";
         position: absolute;
         inset: 0;
         margin: auto;
         width: 18px;
         height: 2px;
         background: var(--black);
         border-radius: 2px;
         transition: transform .25s ease, opacity .25s ease;
       }
       .faq-icon::after {
         transform: rotate(90deg);
       }
       
       /* Answer wrapper (animated) */
       .faq-a a {
        color: black;
        text-decoration: underline;
        text-underline-offset: 3px;
        font-weight: 600;
    
    }
    
       .faq-a {
         padding: 0 1.1rem;
         overflow: hidden;
         max-height: 0;
         opacity: 0;
         transition: max-height .35s ease, opacity .25s ease;
       }
       .faq-a p {
         margin: 0;
         padding: 0 0 1.1rem;
         line-height: 1.6;
         opacity: 0.95;
       }
       .faq-a strong { color: var(--black); }
       
       /* Open state */
       .faq-item[open] .faq-a {
         opacity: 1;
       }
       
       /* Icon open -> minus */
       .faq-item[open] .faq-icon::after {
         transform: rotate(90deg) scaleX(0);
         opacity: 0;
       }
       
       .faq-item {
        width: 100%;
        box-sizing: border-box;
      }
      
      .faq-q,
      .faq-a {
        box-sizing: border-box;
        width: 100%;
      }
    
      .faq-a {
        will-change: max-height;
      }
      
      /* Make FAQ layout mobile-safe */
    .faqs .container {
      width: 100%;
      max-width: 960px;
      margin: 0 auto;
      padding-left: 1rem;
      padding-right: 1rem;
      box-sizing: border-box;
    }
    
    /* Let the question text wrap properly */
    .faq-q {
      grid-template-columns: 1fr 26px;  /* slightly smaller icon column */
      align-items: start;               /* prevents clipping when text wraps */
      line-height: 1.3;
      white-space: normal;
      word-break: break-word;
    }
    
    /* Ensure the summary text can shrink & wrap */
    .faq-q > *:first-child {
      min-width: 0;
    }
    
    /* Keep answers readable on mobile */
    .faq-a p {
      font-size: 0.98rem;
    }
    
    /* Smaller screens: tighten padding + font */
    @media (max-width: 520px) {
      .faq-q {
        padding: 0.9rem 0.9rem;
        font-size: 1rem;
      }
    
      .faq-a {
        padding: 0 0.9rem;
      }
    }
    
    /* Very small screens: reduce icon size slightly */
    @media (max-width: 380px) {
      .faq-icon {
        width: 20px;
        height: 20px;
      }
    
      .faq-icon::before,
      .faq-icon::after {
        width: 16px;
      }
    }
    
    .faqs, .faq-list, .faq-item { max-width: 100%; }
    
      
    
    /* ===== Google Reviews (widget style) ===== */
    .g-reviews{
      background: var(--cream);
      padding: 3.5rem 1.5rem;
      text-align: center;
    }
    
    .g-reviews__title{
      margin: 0 0 .6rem;
      color: #1a1a1a;
      letter-spacing: .02em;
    }
    
    .g-reviews__subtitle{
      margin: 0 auto 2rem;
      max-width: 720px;
      color: rgba(0,0,0,.75);
    }
    
    .g-reviews__wrap{
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 48px 1fr 48px;
      gap: 14px;
      align-items: center;
    }
    
    .g-reviews__viewport{
      overflow: hidden;
      border-radius: 18px;
    }
    
    .g-reviews__track{
      display: flex;
      gap: 18px;
      transition: transform .55s ease;
      will-change: transform;
      padding: 8px; /* breathing room */
    }
    
    .g-review-card{
      background: #fff;
      border: 1px solid rgba(0,0,0,.10);
      border-radius: 18px;
      padding: 16px 16px 14px;
      text-align: left;
      min-width: 340px;
      max-width: 340px;
      box-shadow: 0 2px 17px rgba(0,0,0,.08);
    }
    
    .g-review-head{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }
    
    .g-review-person{
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    
    .g-review-avatar{
      width: 42px;
      height: 42px;
      border-radius: 999px;
      object-fit: cover;
      background: rgba(0,0,0,.08);
    }
    
    .g-review-name{
      font-weight: 800;
      color: #111;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 180px;
    }
    
    .g-review-date{
      font-size: .85rem;
      color: rgba(0,0,0,.55);
      margin-top: 2px;
    }
    
    .g-review-google{
      width: 22px;
      height: 22px;
      flex: 0 0 auto;
      border-radius: 6px;
    }
    
    .g-review-stars{
      color: var(--gold);
      letter-spacing: 1px;
      margin-bottom: 10px;
      font-size: 1rem;
    }
    
    .g-review-text{
      color: rgba(0,0,0,.85);
      line-height: 1.45;
      margin: 0;
    }
    
    .g-review-more{
      display: inline-block;
      margin-top: 10px;
      font-weight: 700;
      color: rgba(0,0,0,.55);
      cursor: pointer;
      user-select: none;
    }
    
    .g-reviews__nav{
      width: 48px;
      height: 48px;
      border-radius: 999px;
      border: 1px solid var(--gold);
      background: rgba(255,255,255,.8);
      cursor: pointer;
      display: grid;
      place-items: center;
    }
    .g-reviews__nav i{ color: var(--gold); }
    .g-reviews__nav:hover{
      border-color: rgba(212,175,55,.55);
      box-shadow: 0 0 0 3px rgba(212,175,55,.12);
    }
    
    .g-reviews__dots{
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 14px;
    }
    .g-reviews__dot{
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: rgba(0,0,0,.22);
    }
    .g-reviews__dot.is-active{
      background: var(--gold);
    }
    
    .g-reviews__cta{
      margin-top: 18px;
    }
    .g-reviews__link{
      color: #1a1a1a;
      font-weight: 800;
      text-decoration: none;
      border-bottom: 2px solid rgba(212,175,55,.6);
    }
    .g-reviews__link:hover{ border-bottom-color: var(--gold); }
    
    /* Mobile: 1 card view, arrows still visible */
    @media (max-width: 699px){
      .g-reviews__wrap{
        grid-template-columns: 42px 1fr 42px;
      }
      .g-review-card{
        min-width: 78vw;
        max-width: 78vw;
      }
    }
    
    /* Modal */
    .g-review-modal{ display:none; position:fixed; inset:0; z-index:9999; }
    .g-review-modal.is-open{ display:block; }
    .g-review-modal__backdrop{
      position:absolute; inset:0;
      background: rgba(0,0,0,.65);
    }
    .g-review-modal__panel{
      position: relative;
      width: min(760px, calc(100vw - 24px));
      margin: 12px auto;
      max-height: calc(100vh - 24px);
      overflow: auto;
      background: #fff;
      border-radius: 18px;
      padding: 18px;
    }
    .g-review-modal__close{
      position:absolute; top: 10px; right: 10px;
      width: 42px; height: 42px;
      border-radius: 12px;
      border: 1px solid rgba(0,0,0,.12);
      background: rgba(255,255,255,.9);
      cursor:pointer;
    }
    
    
    /* --- Reviews: prevent cropping on small screens --- */
    .g-reviews__track{ padding: 18px 8px; }
    
    .g-reviews__viewport{
      overflow: hidden;
      border-radius: 18px;
    }
    
    /* mobile */
    @media (max-width: 699px){
      .g-reviews__wrap{
        grid-template-columns: 54px 1fr 54px;
        gap: 10px;
      }
    
      .g-reviews__nav{
        width: 44px;
        height: 44px;
      }
    
      .g-review-card{
        min-width: calc(100vw - 140px);
        max-width: calc(100vw - 140px);
      }
    }
    
    /* tablet */
    @media (min-width: 700px) and (max-width: 1024px){
      .g-review-card{
        min-width: 420px;
        max-width: 420px;
      }
    }
    
    /* hide on small screens if needed */
    
    
    
    /* 1) Match the image’s background exactly — adjust the hex with an eyedropper if needed */
    #safety {
      position: relative;
      background-color: #f4f4f4; /* ← your image’s background */
      overflow: visible;
    }
    
    
    #safety .safety-carrier {
      position: absolute;
      top: 10%;
      right: -522px;
      width: 917px;
      max-width: none;
      pointer-events: none;
      z-index: 0;
      transform: translateY(-50%) scaleX(1);    /* behind everything in #services */
    }
    
    
    #safety .safety-rabbit {
      position: absolute;
            top: 54%;
            left: -540px;
            transform: translateY(-50%);
            width: 1029px;
            max-width: none;
            pointer-events: none;
            z-index: -1;      /* behind everything in #services */
    }
    
    
      /* hide by default on desktop/tablet */
      .safety-top-paw {
        display: none;
      }
    
      .section-title .fa-bone {
        margin: 0 0.25em;
        vertical-align: middle;
        font-size: 1.2rem;            /* match your heading text size */
        color: var(--black);       /* or whatever color fits */
      }
      
    
    /* 2) Flip it horizontally and pin to top-left */
    .safety-graphic {
      position: absolute;
      top: 0;
      left: 0;
      width: 600px;            /* or whatever size you need */
      height: auto;
      pointer-events: none;
      z-index: 0;
      transform: scaleY(-1);    /* ← flip vertically */
    }
    
    
    /* HERO → ABOUT */
    #hero {
      background:
        linear-gradient(
          to bottom,
       
        var(--cream) 0% 
        );
    
    }
    
    /* ─── ABOUT SECTION: TRANSPARENT → CREAM FADE ─────────────────────────── */
    #about {
      /* ensure positioning context & remove any old backgrounds */
      position: relative !important;
      background: none !important;
      overflow: hidden;
    }
    
    /* overlay gradient from transparent (top) to cream (bottom) */
    #about::before {
      content: "";
      position: absolute;
      inset: 0;               /* top:0; right:0; bottom:0; left:0 */
      z-index: 1;
      background: linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%,
        #fbe7c6 40%, 
        #fff 100%
      );
    }
    
    /* make sure your text/content sits above the gradient */
    #about .about-content {
      position: relative;
      z-index: 2;
    }
    
    /* SERVICES → SAFETY */
    #services {
      background: linear-gradient(
        to bottom,
        #fff 0%,
        #fff 80%,            /* hold peach */
        #f3f3f3 100%       /* fade into cream again */
      );
    }
    
    /* SAFETY → REVIEWS */
    #safety {
      background: linear-gradient(
        to bottom,
        #f3f3f3  0%,
        #f3f3f3  50%,       /* hold cream */
        #fff6e9 100%            /* fade into reviews’ pink */
      );
    }
    
    /* REVIEWS → GALLERY */
    #reviews {
      background: linear-gradient(
        to bottom,
        #fff6e9 100%,
       
          /* fade into gallery overlay */
      );
    }
    
    /* GALLERY → CONTACT */
    #gallery {
      background:
        
        linear-gradient(
          to bottom,
          #fff6e9  0%,
          var(--cream) 100%
        );
    }
    #contact {
      background: linear-gradient(
        to bottom,
        var(--cream) 0%,
        var(--black) 100%
      );
    }
    
    
    /* make Reviews a positioning context */
    #reviews {
      position: relative;
      overflow: hidden; /* ensures graphic can sit flush to bottom */
    }
    
    /* push your rotator/content above the graphic */
    #reviews .review-rotator,
    #reviews .review-cta {
      position: relative;
      z-index: 1;
    }
    
    /* the bottom-of-section graphic */
    .reviews-graphic {
      position: absolute;
      bottom: 0;
      left: 24%;
      transform: translateX(-50%);
      width: 100%;
      max-width: 795px;
      pointer-events: none; /* clicks pass through */
      z-index: 0;
    }
    
    /* hide all photo-cards by default… */
    .photo-stack .photo-card {
      display: none;
    }
    
    /* …and only display those in the active batch */
    .photo-stack .photo-card.show {
      display: block;
    }
    
    
    
    /* Regulated By Section */
    .regulated-section{
      padding: 4rem 2rem;
      background: var(--cream);
      text-align: center;
    }
    
    .regulated-title{
      font-family: 'Cal Sans', sans-serif;
      font-size: 2.2rem;
      margin-bottom: 2.5rem;
      color: #1a1a1a;
      letter-spacing: .05em;
    }
    
    .regulated-grid{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
      max-width: 1100px;
      margin: 0 auto;
    }
    
    .regulated-item{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .75rem;
      padding: 1.5rem 1rem;
      background: #ffffffab;
      border: 1px solid var(--gold);
      border-radius: 16px;
    }
    
    .regulated-item i{
      font-size: 2.2rem;
      color: var(--gold);
    }
    
    .regulated-item span{
      font-size: .95rem;
      color: #1a1a1a;
      line-height: 1.4;
    }
    
    
    @media (max-width: 1024px){
      .regulated-grid{
        grid-template-columns: repeat(2, 1fr);
      }
    }
    
    @media (max-width: 600px){
      .regulated-grid{
        grid-template-columns: repeat(2, 1fr);
      }
    }
    
    /* Estimate Section */
    #estimate {
      background: #f3f3f3;
      padding: 4rem 1rem;
    }
    #estimate .container {
      max-width: 800px;
      margin: 0 auto;
    }
    #estimate .section-title {
      font-family: 'Cal Sans', sans-serif;
      font-size: clamp(3.5rem, 6vw, 5rem);
      letter-spacing: 0.05em;
      font-weight: 700;
      color: var(--black);
      margin-bottom: 1rem;
      text-align: center;
    }
    .estimate-form .form-row {
      margin-bottom: 1rem;
      display: flex;
      flex-direction: column;
    }
    .estimate-form label {
      margin-bottom: 0.5rem;
      font-weight: 600;
      color: var(--black);
    }
    .estimate-form input[type="text"],
    .estimate-form select {
      padding: 0.5rem 1rem;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 1rem;
      font-family: var(--font-body);
    }
    .estimate-form .checkbox {
      flex-direction: row;
      align-items:normal;
    }
    .estimate-form .checkbox label {
      margin: 0;
      font-weight: normal;
    }
    .estimate-form input[type="checkbox"] {
      margin-right: 0.5rem;
    }
    
    /* Pet repeater */
    #pet-list .pet-entry {
      border: 1px solid #eee;
      border-radius: 14px;
      padding: 1rem;
      margin-bottom: 1rem;
      position: relative;
      background: var(--cream);
    }
    #pet-list .pet-entry h3 {
      margin-top: 0;
      font-size: 1.1rem;
      color: var(--black);
    }
    .remove-pet {
      position: absolute;
      top: 1rem; right: 1rem;
      background: none;
      border: none;
      color: #999;
      cursor: pointer;
      font-size: 0.9rem;
    }
    .remove-pet:hover {
      color: var(--gold);
    }
    
    /* Add-pet button */
    #add-pet {
      background: var(--black);
      color: var(--cream);
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 12px;
      cursor: pointer;
      margin-bottom: 1.5rem;
      font-family: var(--font-nav);
    }
    #add-pet:hover {
      background: var(--gold);
      color: var(--black);
    }
    
    /* Calculate button */
    #calculate-btn {
      width: 100%;
      background: var(--gold);
      color: var(--black);
      border: none;
      padding: 0.75rem;
      font-size: 1.1rem;
      font-weight: bold;
      cursor: pointer;
      border-radius: 4px;
      font-family: var(--font-nav);
    }
    #calculate-btn:hover {
      opacity: 0.9;
    }
    
    /* Output */
    .estimate-output {
      margin-top: 2rem;
      text-align: center;
      font-size: 1.25rem;
      color: var(--black);
    }
    
    /* ─── Three-column layout ───────────────────────────────── */
    .estimate-form {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
    .form-col {
      display: flex;
      flex-direction: column;
    }
    
    
    /* adjust pet-entry width */
    .pet-entry {
      width: 100%;
    }
    
    /* limit styling tweaks */
    .remove-pet {
      align-self: flex-end;
      margin-top: 0.5rem;
    }
    
    /* (keep your existing button & input styles here…) */
    
    /* ensure container doesn’t overflow */
    #estimate { overflow: hidden; }
    
    /* any other spacing tweaks as needed… */
    
    
    /* ─── ESTIMATE SECTION ───────────────────────────────────────────────────── */
    
    #estimate .section-title {
      text-align: center;
      font-size: clamp(2rem, 5vw, 3rem);
      margin-bottom: 2.5rem;
    }
    
    /* boxed grid wrapper */
    .estimate-box {
      border: 1px solid rgba(255, 255, 255, .10);
      background: rgba(255, 255, 255, 0.7);
      border-radius: 18px;
      padding: 1rem;
      box-shadow: 0 12px 40px rgba(0, 0, 0, .15);
      overflow: hidden;
      display: grid;
      gap: .85rem;
      box-sizing: border-box;
     
    }
    
    /* force the Calculate button and output to span all columns */
    .estimate-box button[type="submit"],
    .estimate-output {
      grid-column: 1 / -1;
    }
    
    /* make each column flex-direction: column */
    .estimate-form .form-col {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    
    /* lighten form rows */
    .estimate-form .form-row {
      display: flex;
      flex-direction: column;
    }
    .estimate-form label {
      margin-bottom: 0.25rem;
      font-weight: 500;
    }
    .estimate-form input,
    .estimate-form select {
      padding: 0.5rem;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 0.95rem;
    }
    
    /* style “Add Another Pet” link */
    .add-pet {
      background: none;
      border: 1px dashed #888;
      color: #444;
      padding: 0.5rem;
      border-radius: 4px;
      font-size: 0.9rem;
      cursor: pointer;
    }
    .add-pet:hover {
      border-color: #666;
      color: #000;
    }
    
    /* Calculate button */
    #calculate-btn {
    
background-color: rgba(250, 230, 197, 0.7);
    
color: var(--black);
    
border: 1px solid #ffd588;
    
border-radius: 12px;
    
box-shadow: none;
    
padding: 0.75rem 1.5rem;
    
font-size: 1rem;
    
cursor: pointer;
    
transition: background 0.3s;
    }
    #calculate-btn:hover {
      background: var(--gold);
      color: var(--black);
    }
    
    /* output styling */
    .estimate-output {
      margin-top: 1rem;
      padding: 1rem;
      background: var(--black);
      border-radius: 4px;
      font-family: var(--font-nav);
    }
    .estimate-output p {
      margin: 0.5rem 0;
      font-size: 1.2rem;
      color: var(--gold);
      
    
    }
    .estimate-output p strong {
      color: var(--gold);
    
    }
    
    
    /* hide output until after Calculate clicked */
    .estimate-output {
      display: none;
    }
    
    
    #estimate .form-row select#journey-type {
      background: var(--cream);
      border: 1px solid var(--black);
      padding: 0.5rem;
      font-family: var(--font-body);
      font-size: 1rem;
      border-radius: 0;
      width: 100%;
    }
    
    
    
    .loader {
      margin: 1rem auto;
      border: 4px solid var(--black);
      border-top:   4px solid var(--gold);
      border-radius: 50%;
      width: 32px;
      height: 32px;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    
    
    /* make any error inside your estimate box gold */
    .estimate-output.error {
      color: var(--gold);
    }
    
    /* responsive fallback: stack to one column under 768px */
    
    
    /* keep the journey modal completely hidden until you add .show */
    #journey-modal {
      display: none !important;
      position: fixed;
      inset: 0;                   /* shorthand for top:0; right:0; bottom:0; left:0 */
      background: rgba(0,0,0,0.8);
      justify-content: center;
      align-items: center;
      padding: 1rem;
      z-index: 2000;
      overscroll-behavior: contain; /* prevent overscroll bounce revealing it */
    }
    
    #journey-modal.show {
      display: flex !important;
    }
    
    
    .pet-network-link {
      color: var(--gold);
      text-decoration: none;
      font-weight: 700;
    }
    
    .pet-network-link:hover {
      text-decoration: underline;
    }
    
    .pet-network-link i {
      margin-left: 4px;
      font-size: 0.9em;
    }
    
    
    .about-credits{
      position: relative;
      width: 100%;
      max-width: 900px;     /* keep your original width */
      margin: 0 auto;
      text-align: center;
      height: 194px;
      overflow: hidden;
      color: #1a1a1a;
    
    }
    
    /* the moving track */
    .about-credits__track{
      position: relative;
      will-change: transform;
    }
    
    /* each block of text */
    .about-credits__inner{
      padding: 10px 0;
    }
    
    /* fades stay pinned to container */
    .about-credits::before,
    .about-credits::after{
      content:"";
      position:absolute;
      left:0; right:0;
      height: 70px;
      pointer-events:none;
      z-index: 5;
    }
    
    .about-credits::before{
      top:0;
      background: linear-gradient(to bottom, rgb(249 231 201), rgba(244, 233, 209, 0));
      
    }
    
    .about-credits::after{
      bottom:0;
      background: linear-gradient(to top, rgb(252 236 211), rgba(244, 233, 209, 0));
    }
    
    
    
    
    
    
    
    
    
    
    /* contain any overscroll so you can’t pull past the bottom into hidden elements */
    html, body {
      overscroll-behavior-y: contain;
    }
    
    
    html.terms-page { scroll-snap-type: none; }           /* stop snap on legal page */
    
    html.terms-page section {
      height: auto;                                       /* let it grow naturally */
      min-height: min(100vh, auto);
      align-items: flex-start;
      justify-content: flex-start;
      opacity: 1;                                         /* make it visible */
      transform: none;
      overflow: visible;                                  /* don’t clip long text */
      padding: 2rem 1rem;
    }
    
    
        /* FOOTER */
        footer { background: var(--black); color: var(--cream); padding:1rem; text-align:center; }
    
        footer {
          width: 100%;
          position: fixed;
          bottom: -100px;
          transition: bottom 0.4s ease-in-out;
          z-index: 1000;
          text-align: center !important;
        }
    
        footer.show-footer {
          bottom: 0; /* pops up */
        }
        
        /* ===========================
       DELIVERIES PAGE: 4-step flow
       =========================== */
    
    
    .delivery-steps{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: 1rem;
      align-items:start;
    }
    
    .delivery-step{
      position:relative;
      text-align:center;
      padding:.5rem .5rem .75rem;
    }
    
    .delivery-step:not(:last-child)::after{
      content:"";
      position:absolute;
      top:44px;
      right:-10px;
      width:20px;
      height:2px;
      background: rgba(212,175,55,.8);
      box-shadow: 0 0 0 3px rgba(212,175,55,.10);
    }
    .delivery-step:not(:last-child)::before{
      content:"";
      position:absolute;
      top:39px;
      right:-14px;
      width:0; height:0;
      border-left: 8px solid rgba(212,175,55,.9);
      border-top:6px solid transparent;
      border-bottom:6px solid transparent;
    }
    
    
    
    .step-number{
      position:absolute;
      top:8px;
      left:8px;
      width:26px;
      height:26px;
      border-radius:999px;
      background: var(--gold);
      color: var(--black);
      font-weight:900;
      display:grid;
      place-items:center;
      font-size:.95rem;
    }
    
    .step-circle img{
      width:62px;
      height:62px;
      object-fit:contain;
      display:block;
      filter: drop-shadow(0 6px 10px rgba(0,0,0,.10));
    }
    
    .step-title{
      font-family: var(--font-nav, "Outfit", sans-serif);
      letter-spacing:.05em;
      font-weight:900;
      margin:0 0 .25rem;
      font-size:1.02rem;
      color: var(--gold);
    }
    .step-desc{
      margin:0;
      opacity:.92;
      line-height:1.45;
      font-size:.95rem;
    }
    
    /* Mobile: stack steps */
    @media (max-width: 820px){
      .delivery-steps{ grid-template-columns:1fr; }
      .delivery-step{
        text-align:left;
        display:grid;
        grid-template-columns:110px 1fr;
        gap:.85rem;
        align-items:center;
      }
      .delivery-step:not(:last-child)::after,
      .delivery-step:not(:last-child)::before{ display:none; }
      .step-circle{ margin:0; }
    }
    
    
    
    /* =========================
       DELIVERIES – STEP CIRCLES (FINAL)
       Put this at the END of style-desktop.css
       ========================= */
    
    /* Remove any pseudo-arrow system (you are using real arrow icons now) */
    .deliveries-page .delivery-step::before,
    .deliveries-page .delivery-step::after{
      content: none !important;
      display: none !important;
    }
    
    /* Circle wrapper */
    .deliveries-page .step-circle--xl{
      width: 150px;
      height: 150px;
      border-radius: 999px;
      border: 2px solid var(--gold);
      overflow: hidden;
      position: relative;
      background: rgba(255,255,255,0.06);
    }
    
    /* Number badge always visible */
    .deliveries-page .step-circle--xl .step-number{
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 5;
    }
    
    /* Make the PNG fill the circle area */
    .deliveries-page .step-circle--xl img{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;        /* fills the circle */
      object-position: center;  /* keep centered */
    }
    
    /* If you prefer NO cropping, swap to:
    object-fit: contain;
    background: transparent;
    But the PNG canvas must be tightly cropped for it to look “full”. */
    /* Services Section */
    
    
    
    /* Cards Section */
    .services-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }
    
    .card {
      background-color: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      padding: 20px;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }
    
    .service-icon {
      font-size: 3rem;
      color: var(--gold);
      margin-bottom: 15px;
    }
    
    .card-title {
      font-size: 1.375rem;
      font-family: 'Cal Sans';
      letter-spacing: 0.05em;
      color: var(--dark-gray);
      margin-bottom: 15px;
    }
    
    .card p {
      font-size: 1rem;
      /* color: #6c6c6c; */
      line-height: 1.5;
      margin-bottom: 0;
    }
    
    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }
    
    .service-icon {
      font-size: 3rem;
      color: var(--gold);
      margin-bottom: 15px;
    }
    
    .card-title {
      font-size: 1.375rem;
      font-family: 'Cal Sans';
      letter-spacing: 0.05em;
      color: var(--dark-gray);
      margin-bottom: 15px;
    }
    
    .card p {
      font-size: 1rem;
      /* color: #6c6c6c; */
      line-height: 1.5;
      margin-bottom: 0;
    }
    

    /* Newspaper-style Journey block */
.journey-article{
  max-width: 980px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
  /* background: rgba(255,255,255,0.65); */
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  position: relative;
}

/* little gold “rule” like a newspaper */
.journey-article::before{
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  background: var(--gold);
  border-radius: 999px;
  margin-bottom: 0.75rem;
  opacity: 0.9;
}

/* kicker label */
.journey-kicker{
  font-family: 'Outfit', sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .78rem;
  /* color: rgba(0,0,0,0.65); */
  margin-bottom: .35rem;
}

/* headline */
.journey-title{
  margin: 0 0 1rem 0;
  font-family: 'Cal Sans', 'Poppins', sans-serif; /* keeps your modern premium look */
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.05;
}

/* the newspaper columns */
.journey-columns{
  column-count: 2;
  column-gap: 2.25rem;
  column-rule: 1px solid rgba(0,0,0,0.10);
}

/* paragraph styling: no <br> needed */
.journey-columns p{
  margin: 0 0 1rem 0;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  line-height: 1.75;
  font-family: 'Outfit', sans-serif;
  color: #fff6e9;
}

/* keep link styling consistent */
.journey-columns .pet-network-link strong{
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

/* responsive: one column on mobile/tablet */
@media (max-width: 820px){
  .journey-columns{
    column-count: 1;
    column-rule: none;
  }
  .journey-article{
    padding: 1.25rem 1rem;
  }
}

.journey-link{
  color:var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}


/* ===== Sticky Promo ===== */
.promo-float{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 9999;
  font-family: inherit;
}

/* iOS safe-area support */
@supports (padding: env(safe-area-inset-bottom)) {
  .promo-float { bottom: calc(60px + env(safe-area-inset-bottom)); }
}

/* Badge button */
.promo-badge{
  display:flex;
  align-items:center;
  border:0;
  cursor:pointer;
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.85);
  color:#fff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
}

.promo-icon{
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
  border-radius: 999px;
  /* background: rgba(255,255,255,0.08); */
  font-size: 18px;
}

.promo-label{
  font-weight: 700;
  letter-spacing: 0.2px;
  font-size: 14px;
}

/* Panel */
.promo-panel{
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: 310px;
  max-width: min(92vw, 350px);
  border-radius: 18px;
  background: rgba(0,0,0,0.92);
  color: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  overflow: hidden;
  transform-origin: bottom right;
  animation: promoPop 180ms ease-out;
}

@keyframes promoPop{
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.promo-panel__inner{
  position: relative;
  padding: 14px 14px 12px;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  align-items: center;
}

.promo-close{
  position: absolute;
  right: 10px;
  top: 8px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.7);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}

.promo-dog{
  width: 76px;
  height: 76px;
  display:grid;
  place-items:center;
  border-radius: 18px;
  /* background: rgba(255,255,255,0.08); */
  font-size: 30px;
}

.promo-title{
  margin: 0 0 8px;
  font-weight: 800;
  font-size: 14px;
}

.promo-code-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.promo-code{
  display:inline-block;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.10);
  font-weight: 800;
  letter-spacing: 1px;
  font-size: 16px;
}

.promo-copy{
  border: 0;
  cursor:pointer;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 800;
  background: #25D366;
  color: #000;
}

.promo-sub{
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  line-height: 1.35;
}

/* ===== Responsive tweaks ===== */

/* Mobile: compact label */
@media (max-width: 420px){
  .promo-label{ display:none; }
  .promo-panel{ width: 92vw; }
  .promo-panel__inner{ grid-template-columns: 64px 1fr; }
  .promo-dog{ width:64px; height:64px; font-size:26px; }
}

/* Tablet+: slightly larger */
@media (min-width: 768px){
  .promo-badge{ padding: 12px 16px; }
  .promo-icon{ width: 38px; height: 38px; font-size: 20px; }
  .promo-label{ font-size: 15px; }
  .promo-panel{width: 350px;}
}

/* =========================================================
   Promo Badge – delayed reveal & slower animation
   ========================================================= */

/* Hidden by default */
.promo-badge .promo-label{
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transform: translateX(-10px);
  pointer-events: none;

  transition:
    opacity 420ms ease,
    transform 420ms ease,
    max-width 520ms ease;
}

/* Reveal state (JS controlled) */
.promo-badge.promo-hover .promo-label,
.promo-badge:hover .promo-label{
  opacity: 1;
  max-width: 180px;
  transform: translateX(0);
}

/* Keep visible when panel is open */
.promo-badge[aria-expanded="true"] .promo-label{
  opacity: 1;
  max-width: 180px;
  transform: translateX(0);
}

/* Subtle wiggle animation */
@keyframes promoWiggle{
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-2px); }
  50%  { transform: translateX(2px); }
  75%  { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}

/* Wiggle on hover */
.promo-badge:hover{
  animation: promoWiggle 420ms ease;
}

/* Keep mobile behaviour clean */
@media (hover: none){
  .promo-badge .promo-label{
    display: none;
  }
}

.promo-disclaimer{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255,255,255,0.75);
}
.promo-disclaimer strong{
  color: #fff;
}


/* =========================================================
   Promo Badge – JS-controlled reveal ONLY
   ========================================================= */

/* Label hidden by default */
.promo-badge .promo-label{
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transform: translateX(-14px);
  pointer-events: none;

  transition:
    opacity 700ms ease,
    transform 700ms ease,
    max-width 900ms ease;
}

/* Reveal ONLY when JS adds .promo-hover */
.promo-badge.promo-hover .promo-label{
  opacity: 1;
  max-width: 200px;
  transform: translateX(0);
}

/* Keep visible when promo panel is open */
.promo-badge[aria-expanded="true"] .promo-label{
  opacity: 1;
  max-width: 200px;
  transform: translateX(0);
}

/* Subtle wiggle (still instant on hover) */
@keyframes promoWiggle{
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-2px); }
  50%  { transform: translateX(2px); }
  75%  { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}

.promo-badge:hover{
  animation: promoWiggle 420ms ease;
}

/* Mobile stays icon-only */
@media (hover: none){
  .promo-badge .promo-label{
    display: none;
  }
}

/* =========================================================
   FORCE 3s delay: disable instant CSS hover reveal
   Paste at VERY BOTTOM of style-desktop.css
   ========================================================= */

/* On hover, keep label hidden (so CSS cannot reveal instantly) */
.promo-badge:hover .promo-label{
  opacity: 0 !important;
  max-width: 0 !important;
  transform: translateX(-14px) !important;
}

/* Only show when JS adds .promo-hover (after 3s) */
.promo-badge.promo-hover .promo-label{
  opacity: 1 !important;
  max-width: 200px !important;
  transform: translateX(0) !important;

  transition:
    opacity 700ms ease,
    transform 700ms ease,
    max-width 900ms ease;
}

/* Keep visible when promo panel is open */
.promo-badge[aria-expanded="true"] .promo-label{
  opacity: 1 !important;
  max-width: 200px !important;
  transform: translateX(0) !important;
}

/* Hide promo badge when gallery modal is open */
.promo-float.is-hidden{
  display: none !important;
}

/* =========================================
   PROMO PANEL: stop "Copied!" pushing layout
   ========================================= */

/* Keep the row stable + allow the code box to shrink nicely */
.promo-code-row{
  display: flex;
  align-items: center;
  gap: 10px;
}

.promo-code{
  flex: 1 1 auto;      /* take remaining space */
  min-width: 0;        /* IMPORTANT: allows text box to shrink instead of pushing */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Lock button width so "Copy" -> "Copied!" doesn't resize anything */
.promo-copy{
  flex: 0 0 auto;
  min-width: 92px;     /* enough space for "Copied!" */
  text-align: center;
  white-space: nowrap;
  line-height: 1;
}

/* Optional: on very small widths, let the button drop under the code cleanly */
@media (max-width: 420px){
  .promo-code-row{
    flex-wrap: wrap;
  }
  .promo-copy{
    width: 100%;
    min-width: 0;
  }
}


/* ================================
   iPad / Tablet fix for promo copy
   ================================ */

/* Make sure panel always fits the viewport */
.promo-panel{
  max-width: calc(100vw - 28px); /* prevents right-edge overflow */
  overflow: hidden;              /* ensure nothing can spill out */
}

/* Keep inner content clipped too (Safari can be fussy) */
.promo-panel__inner{
  overflow: hidden;
}

/* If the code + button don't fit, wrap cleanly instead of pushing out */
@media (max-width: 1024px){
  .promo-code-row{
    flex-wrap: wrap;
  }

  .promo-code{
    width: 100%;
    min-width: 0;
  }

  .promo-copy{
    width: 100%;
    min-width: 0;
  }
}


.bolt-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
}



.bolt-icon {
  height: 0.65em;
  width: auto;
  flex-shrink: 0;
  position: relative;
  top: 0.05em;
}