:root {
      --warm-grey: #9f9691;
      --dark-grey: #756f6b;
      --white: #ffffff;
      --light-grey: #eeeeee;
      --accent-lime: #b7d532;
      --footer-grey: #948b86;
      --logo-grey: #968e8a;
    }

    body {
      font-family: "Open Sans", Arial, sans-serif;
      background: var(--light-grey);
      color: var(--dark-grey);
      line-height: 1.6;
    }

    h1,h2,h3,h4 { margin: 1em 0;}	

    .site-header {
      background: var(--white);
      padding: 1.75rem 0 1rem;
    }

    .logo-box {
      width: 96px;
      height: 96px;
      background: var(--logo-grey);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      flex-shrink: 0;
    }

    .brand-title {
      font-size: 2.25rem;
      font-weight: 400;
      margin-bottom: 0.35rem;
      color: var(--dark-grey);
      letter-spacing: 0.01em;
    }

    .main-nav {
      background: var(--dark-grey);
      border-bottom: 4px solid var(--accent-lime);
    }

    .main-nav .nav-link {
      color: #fff;
      padding: 0.85rem 1.05rem;
      font-weight: 600;
      font-size: 0.95rem;
    }

    .main-nav .nav-link:hover,
    .main-nav .nav-link:focus {
      color: #f2f2f2;
      background: rgba(255, 255, 255, 0.08);
    }

    .hero {
      background: var(--warm-grey);
      color: #fff;
      padding: 2.3rem 0 2.6rem;
      position: relative;
    }

    .hero h1 {
      font-weight: 300;
      font-size: clamp(2rem, 4.2vw, 3.15rem);
      margin-bottom: 2.2rem;
    }

    .hero-intro {
      font-style: italic;
      font-weight: 300;
      font-size: clamp(1.4rem, 2.5vw, 2rem);
      margin-bottom: 1rem;
    }

    .hero p {
      color: #f2f2f2;
      margin-bottom: 0.8rem;
    }

    .hero-portrait {
      width: 100%;
      max-width: 355px;
      height: 440px;
      object-fit: cover;
      border: 0;
      display: block;
      margin: 0 auto;
      background: #b6aea9;
    }


    .principle {
      background: #fff;
      padding: 3.2rem 0 3rem;
      border-bottom: 4px solid var(--accent-lime);
    }

    .principle h2 {
      font-size: 2rem;
      font-weight: 400;
      margin-bottom: 1.4rem;
      color: var(--dark-grey);
    }

    .principle .quote {
      font-size: clamp(1.6rem, 3vw, 2.5rem);
      font-style: italic;
      font-weight: 300;
      line-height: 1.3;
      color: #6f6864;
      max-width: 1080px;
      margin: 0;
      text-align: center;
      padding: 20px;
    }
    
    .principle .quote-bg span { 
	text-align: center;
	display: block;
        margin-bottom: 2em;
     }

     .siegel { margin: 2em 0; }

    .practice {
      background: var(--warm-grey);
      padding: 3rem 0;
    }


    .practice-card {
      position: relative;
      overflow: hidden;
      height: 220px;
      background: #8e8681;
    }

    .practice-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      filter: saturate(0.95);
    }

    .practice-caption {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 170px;
      background: rgba(255, 255, 255, 0.9);
      color: #5f5855;
      font-size: 1.15rem;
      padding: 0.48rem 0.7rem;
      font-weight: 400;
      transition: all .2s ease;
    }
     .practice-card:hover .practice-caption {
       top: 155px;
       transition: all .3s ease;
     }

     .quote-bg {
	margin: 2em 0;
        background: #f3f3f3;
      }

    .info {
      background: #fff;
      padding: 3rem 0 3.6rem;
    }

    .info-col {
      border-right: 1px solid #e9e9e9;
      padding-right: 1.3rem;
      margin-bottom: 1.5rem;
    }

    .info-col:last-child {
      border-right: 0;
    }

    .info h3 {
      font-size: 2rem;
      font-weight: 400;
      margin-bottom: 0.6rem;
      color: #5f5854;
    }

    .more-link {
      color: var(--accent-lime);
      text-decoration: none;
      font-weight: 700;
    }

    .review-widget {
      width: 100%;
      max-width: 350px;
      border: 1px solid #9a9a9a;
      background: #fff;
      margin-top: 1.7rem;
    }

    .review-head {
      background: #4d5f84;
      color: #fff;
      padding: 0.4rem 0.65rem;
      font-size: 0.78rem;
      font-weight: 600;
    }

    .review-body {
      padding: 0.8rem 0.9rem;
      font-size: 0.84rem;
      color: #666;
      min-height: 170px;
    }

    .stars {
      color: #f6a100;
      font-size: 1.1rem;
      letter-spacing: 0.08em;
      margin-bottom: 0.35rem;
    }

    .site-footer {
      background: var(--footer-grey);
      color: #fff;
      padding: 2.1rem 0;
      position: relative;
      border-top: 4px solid var(--accent-lime);
      overflow: hidden;
    }

    .footer-watermark {
      position: absolute;
      left: 2rem;
      top: 0.4rem;
      font-size: 12rem;
      line-height: 1;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.1);
      pointer-events: none;
      user-select: none;
    }

    .site-footer .footer-col {
      position: relative;
      z-index: 1;
      font-size: 1.35rem;
      line-height: 1.65;
    }

    .footer-links a,
    .site-footer a {
      color: #fff;
      text-decoration: none;
    }

    .footer-links a:hover,
    .site-footer a:hover {
      text-decoration: underline;
    }

    iframe { margin-top: 2em;}

   .image-pet-cover { margin-bottom: 3em;}	
   .image-pet { text-align: center;}
    .image-pet img  {
	text-align: center;
	width: 39%;
    }

    @media (max-width: 991.98px) {
      .brand-title {
        font-size: 1.9rem;
      }

      .brand-subtitle {
        font-size: 1.2rem;
      }

      .hero-portrait {
        height: 360px;
        margin-bottom: 1.2rem;
      }

      .cookie-bar {
        position: static;
        margin-top: 1.4rem;
      }

      .info-col {
        border-right: 0;
        border-bottom: 1px solid #e9e9e9;
        padding-bottom: 1rem;
      }

      .info-col:last-child {
        border-bottom: 0;
      }
    }

    @media (max-width: 575.98px) {
      .logo-box {
        width: 78px;
        height: 78px;
        font-size: 2.4rem;
      }

      .brand-title {
        font-size: 1.55rem;
      }

      .brand-subtitle {
        font-size: 1.05rem;
      }

      .site-footer .footer-col {
        font-size: 1.1rem;
      }
    }