/* =====================================================================
   COPPERHEAD KENNELS — STYLESHEET
   Layout follows a 3-tier responsive model:
     >=981px  desktop, fixed header that shrinks on scroll
     <=980px  single column, header no longer fixed, menu collapses
     <=767px  type scale steps down again
   ===================================================================== */

:root{
  /* Chevron, the shape the source's icon font draws on its buttons */
  --arrow:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 4.5l8 7.5-8 7.5" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>');

  /* Magnifier, the shape the source's icon font draws on portfolio hover */
  --zoom:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="%230b6ea8" stroke-width="1.8" stroke-linecap="round"><circle cx="10.5" cy="10.5" r="7"/><path d="M15.6 15.6L21 21M7.5 10.5h6M10.5 7.5v6"/></g></svg>');

  --plus:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 2.5v11M2.5 8h11" fill="none" stroke="black" stroke-width="3.6" stroke-linecap="round"/></svg>');

  /* Surfaces */
  --white:#fff;
  --cream:#fdfaf2;
  --faq-bg:#f3f3f3;
  --navy:#2c2b4c;
  --footer-bg:#171717;

  /* Ink */
  --ink:#333;
  --text:#666;
  --black:#000;
  --footer-text:#d6d6d6;

  /* Brand accents */
  --gold:#f3b45c;
  --orange:#b35f00;          /* AA-safe partner of the display orange */
  --copper:#9e682a;        /* AA-safe partner of the brand copper #D38B39 */
  --faq-icon:#ff914d;
  --faq-border:#d9d9d9;
  --quote:#132f3e;
  --quote-author:#4d6f80;
  --link:#0b6ea8;            /* AA-safe link blue */
  --btn-blue:#0c71c3;

  /* Type */
  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Open Sans",Arial,sans-serif;
  --lato:Lato,Helvetica,Arial,sans-serif;
  --rubik:Rubik,Helvetica,Arial,sans-serif;
  --montserrat:Montserrat,Helvetica,Arial,sans-serif;

  /* Layout */
  --header-h:168px;
  --row:1080px;
  --gutter:5.5%;
}


/* =========================================================
   RESET
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px;}
body{
  margin:0;
  padding-top:var(--header-h);
  font-family:var(--sans);
  font-weight:500;
  font-size:14px;
  line-height:1.7;
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;border:0;}
a{color:var(--link);}
h1,h2,h3{margin:0;padding-bottom:10px;font-weight:500;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;}
iframe{display:block;border:0;}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 18px;background:var(--white);color:var(--ink);
  font-family:var(--rubik);font-size:14px;text-transform:uppercase;
}
.skip-link:focus{left:8px;top:8px;}
:focus-visible{outline:3px solid var(--btn-blue);outline-offset:2px;}


/* =========================================================
   LAYOUT PRIMITIVES
   Divi-style rows: 80% wide, capped at 1080px. "row-wide" is the
   uncapped variant some bands use. Column splits are percentages of
   the row with a 5.5% gutter.
   ========================================================= */
.container,.row{width:80%;max-width:var(--row);margin:0 auto;}
.row-wide{max-width:none;}
/* Header and footer follow the uncapped bands so the logo and the footer
   marks sit on the same left edge as the widest content on the page. Below
   ~1350px the cap never binds, so this changes nothing on smaller screens. */
.header-inner,.footer-inner{max-width:none;}
.row{padding:27px 0;}


/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  position:relative;
  display:inline-block;
  text-decoration:none;
  text-transform:uppercase;
  transition:letter-spacing .3s ease,box-shadow .3s ease,background-color .3s ease,color .3s ease,border-color .3s ease;
}
/* Only the breed-card button carries the hover arrow; the source hides it on
   the others. */
.btn-ghost::after{
  content:"";
  position:absolute;top:50%;
  opacity:0;
  background-color:currentColor;
  -webkit-mask:var(--arrow) no-repeat center/contain;
  mask:var(--arrow) no-repeat center/contain;
  transition:opacity .3s ease;
  pointer-events:none;
}
.btn-ghost:hover::after{opacity:1;}

.btn-hero{
  padding:16px 32px;
  border:2px solid transparent;
  border-radius:5px;
  background:var(--white);
  color:var(--orange);
  font-family:var(--rubik);font-weight:600;font-size:15px;line-height:25.5px;letter-spacing:2px;
  box-shadow:0 2px 12px 5px rgba(255,255,255,.19);
}
.btn-hero:hover{box-shadow:5px -2px 18px 10px rgba(255,255,255,.19);}

.btn-raised{
  padding:16px 32px;
  border:2px solid var(--white);
  border-radius:5px;
  background:var(--white);
  color:var(--btn-blue);
  font-family:var(--rubik);font-weight:500;font-size:14px;line-height:23.8px;letter-spacing:2px;
  box-shadow:6px 6px 18px 0 rgba(0,0,0,.39);
}
.btn-raised:hover{box-shadow:5px -2px 18px 10px rgba(53,53,53,.19);}

.btn-ghost{
  padding:6.6px 22px;
  border:8px solid transparent;
  background:transparent;
  color:var(--white);
  font-family:var(--rubik);font-weight:600;font-size:20px;line-height:37.4px;letter-spacing:2.4px;
}
.btn-ghost::after{right:11.4px;width:22px;height:22px;margin-top:-11px;}
.btn-ghost:hover{padding-right:44px;}



/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:var(--header-h);
  background:var(--white);
  box-shadow:0 1px 0 0 rgba(0,0,0,.1);
  transition:height .4s ease,box-shadow .4s ease;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:100%;
}
.brand{display:flex;align-items:center;height:100%;}
.brand picture{display:flex;align-items:center;height:100%;}
.brand img{
  height:84%;width:auto;
  transition:height .4s ease;
}
/* The row is centred with flex rather than held in place by matching
   padding-top/padding-bottom values, so the shrink on scroll is driven by the
   header height alone and there is nothing left to keep in sync. */
.site-nav{height:100%;}
.site-nav>ul{display:flex;align-items:center;height:100%;gap:30px;}
/* Full-height items give the pointer an unbroken path from the link down to
   the dropdown, so the panel does not close on the way to it. */
.site-nav>ul>li{display:flex;align-items:center;height:100%;}
.site-nav a{
  position:relative;display:inline-flex;align-items:center;
  color:var(--text);
  font-family:var(--sans);font-weight:600;font-size:13px;line-height:1;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  transition:color .25s ease;
}
.site-nav>ul>li>a{padding:12px 0;}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--ink);}
.site-nav a[aria-current="page"]{color:var(--ink);}

/* Accent rule, wiped in from the left on hover and held for the current page. */
.site-nav>ul>li>a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--copper);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .25s ease;
}
.site-nav>ul>li>a:hover::after,
.site-nav>ul>li>a:focus-visible::after,
.site-nav>ul>li>a[aria-current="page"]::after,
.site-nav>ul>li.has-submenu:hover>a::after{transform:scaleX(1);}

.site-nav .caret{margin-left:7px;transition:transform .25s ease;}
.site-nav .has-submenu:hover .caret,
.site-nav .has-submenu:focus-within .caret{transform:rotate(180deg);}

/* Dropdown. The item runs the full header height, so top:100% seats the panel
   against the header's bottom edge -- in the shrunk state too, since the item
   tracks the height. Rounded only on the bottom so it reads as hanging off it. */
.site-nav .has-submenu{position:relative;}
.site-nav .submenu{
  position:absolute;top:100%;left:-12px;z-index:20;
  min-width:208px;padding:8px;
  background:var(--white);
  border:1px solid rgba(0,0,0,.07);border-top:0;border-radius:0 0 12px 12px;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
/* focus-within keeps the panel reachable by keyboard without extra JS. */
.site-nav .has-submenu:hover>.submenu,
.site-nav .has-submenu:focus-within>.submenu{
  opacity:1;visibility:visible;transform:none;
}
.site-nav .submenu li+li{margin-top:2px;}
.site-nav .submenu a{
  display:block;padding:10px 12px;border-radius:7px;
  font-size:13px;font-weight:600;line-height:1.4;
  letter-spacing:.02em;text-transform:none;
  transition:color .2s ease,background-color .2s ease;
}
.site-nav .submenu a:hover,.site-nav .submenu a:focus-visible{
  color:var(--ink);background:rgba(0,0,0,.045);
}

/* Shrunk state, toggled by site.js on scroll */
.site-header.is-stuck{height:106px;box-shadow:0 0 7px 0 rgba(0,0,0,.1);}

/* Button box matches the source's toggle; the icon overhangs to the left of it,
   the way the source's icon font sits inside its own box. */
.menu-toggle{
  display:none;
  align-items:flex-start;justify-content:flex-end;
  width:32px;height:56px;
  padding:0 19px 0 0;border:0;background:none;color:var(--black);
  line-height:0;cursor:pointer;
}
.menu-toggle svg{flex:none;margin-top:3px;}


/* =========================================================
   HERO
   ========================================================= */
.hero{
  padding:10vw 0;
  background-color:var(--white);
  background-image:radial-gradient(circle at center,rgba(0,0,0,.65) 0%,rgba(0,0,0,.18) 65%),url("images/catahoula-puppies-hero-1920.jpg");
  background-image:radial-gradient(circle at center,rgba(0,0,0,.65) 0%,rgba(0,0,0,.18) 65%),image-set(url("images/catahoula-puppies-hero-1920.webp") type("image/webp"),url("images/catahoula-puppies-hero-1920.jpg") type("image/jpeg"));
  background-size:cover,cover;
  background-position:50% 50%,50% 50%;
  background-repeat:no-repeat;
}
@media (max-width:640px){
  .hero{background-image:radial-gradient(circle at center,rgba(0,0,0,.65) 0%,rgba(0,0,0,.18) 65%),url("images/catahoula-puppies-hero-640.jpg");
  background-image:radial-gradient(circle at center,rgba(0,0,0,.65) 0%,rgba(0,0,0,.18) 65%),image-set(url("images/catahoula-puppies-hero-640.webp") type("image/webp"),url("images/catahoula-puppies-hero-640.jpg") type("image/jpeg"));}
}
@media (min-width:641px) and (max-width:1024px){
  .hero{background-image:radial-gradient(circle at center,rgba(0,0,0,.65) 0%,rgba(0,0,0,.18) 65%),url("images/catahoula-puppies-hero-1440.jpg");
  background-image:radial-gradient(circle at center,rgba(0,0,0,.65) 0%,rgba(0,0,0,.18) 65%),image-set(url("images/catahoula-puppies-hero-1440.webp") type("image/webp"),url("images/catahoula-puppies-hero-1440.jpg") type("image/jpeg"));}
}
.hero-panel{
  width:80%;max-width:750px;margin:0 auto;
  padding:27px 0;
  background:rgba(0,0,0,.41);
  text-align:left;
}
.hero-panel>*{text-align:center;}
.eyebrow{
  margin:0 0 10px;padding-bottom:10px;
  font-family:var(--rubik);font-weight:500;font-size:18px;line-height:36px;letter-spacing:2px;
  text-transform:uppercase;color:rgba(255,255,255,.69);
}
.hero h1{
  margin:0 0 15px;
  font-family:var(--display);font-weight:500;font-size:65px;line-height:97.5px;letter-spacing:-1px;
  color:var(--white);
}
.hero-spacer{height:4px;}
.hero-copy{
  max-width:90%;margin:0 auto 2.75%;
  font-family:var(--sans);font-weight:500;font-size:16px;line-height:32px;
  color:var(--white);
}
.hero-cta{margin:0;}


/* =========================================================
   ABOUT
   ========================================================= */
.about{
  margin-top:-22px;
  padding:50px 0 20px;
  background-color:var(--white);
  background-image:linear-gradient(#f4f4f4 0%,rgba(255,255,255,0) 100%);
}
/* The photo column is the narrower of the two and the picture is capped, so a
   2:3 portrait can no longer tower over the copy on a wide screen. Centring
   both columns keeps them balanced whichever one ends up taller. */
.about-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:var(--gutter);align-items:center;
}
.about-copy h2,.guardian-intro h2,.guardian-split h2{
  margin:15px 0 10px;
  font-family:var(--display);font-weight:700;font-size:40px;line-height:60px;
  color:var(--ink);text-align:center;
}
.divider{position:relative;width:100px;height:23px;margin:0 auto 10px;}
.divider::before{content:"";position:absolute;top:0;left:0;right:0;border-top:2px solid var(--gold);}
.about-text p{
  font-family:var(--lato);font-weight:500;font-size:16px;line-height:28.8px;
  color:var(--text);padding-bottom:16px;
}
.about-text p:last-child{padding-bottom:0;}
.about-cta{margin-top:5.82%;text-align:center;}
/* Holds the measure near 70 characters once the column gets wide. */
.about-copy{max-width:640px;margin:0 auto;}
.about-photo picture{
  display:block;max-width:440px;margin:0 auto;
  aspect-ratio:4/5;border-radius:3px;overflow:hidden;
  box-shadow:0 2px 18px 0 rgba(0,0,0,.3);
}
.about-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}


/* =========================================================
   LITTER COLLAGE
   A fixed grid of square tiles rather than a masonry flow: every column ends
   on the same line at every width. 8 tiles over 4 or 2 columns always fills
   the last row, so the bottom edge stays flush too.
   ========================================================= */
.collage{padding:10px 0 50px;background-color:var(--white);}
.collage-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.collage-item picture{
  display:block;width:100%;aspect-ratio:1/1;
  border-radius:6px;overflow:hidden;
  box-shadow:0 2px 12px 0 rgba(0,0,0,.18);
}
/* Square is the gentlest common shape here: it trims ~10-33% off the mixed
   sources, where a 4:5 portrait would have taken up to 47% off the landscape
   ones. cover fills the tile; the subject sits centred in every photo. */
.collage-item img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
/* Name-card graphics carry the dog's name across the top of the frame, which a
   centred square crop cuts through. */
.collage-item.is-top img{object-position:top;}
@media (max-width:980px){
  .collage{padding:6px 0 36px;}
  .collage-grid{gap:12px;}
  .collage-grid-5{grid-template-columns:repeat(2,1fr);}
}
/* 10 tiles, so five across gives two full rows where four would leave a
   ragged pair on the end. */
.collage-grid-5{grid-template-columns:repeat(5,1fr);}
.collage-bred{padding-top:0;}
.collage-bred .page-lede-inner{margin-bottom:22px;}
@media (max-width:768px){
  /* Two columns divides both sets evenly (8 and 10), so each stays flush.
     Four across would leave 119px tiles at the bottom of this range. */
  .collage-grid{grid-template-columns:repeat(2,1fr);}
}


/* =========================================================
   VALUE CARDS
   ========================================================= */
.values{padding:8px 0 30px;background-color:var(--white);}
.values-grid{display:grid;grid-template-columns:repeat(3,29.6667%);gap:var(--gutter);}
.value-card{
  padding:40px 20px;
  border:1px solid var(--black);
  border-radius:12px;
  box-shadow:8px 8px 0 0 var(--gold);
}
.value-card h3,.value-card p{text-align:center;}
.value-icon{display:block;width:100px;height:100px;margin:0 auto;}
.value-card h3{
  font-family:var(--lato);font-weight:700;font-size:20px;line-height:28px;
  color:var(--black);
}
.value-card p{
  font-family:var(--lato);font-weight:500;font-size:15px;line-height:24px;
  color:var(--black);
}


/* =========================================================
   BREEDS
   ========================================================= */
.breeds{padding:50px 0 75px;background-color:rgba(224,153,0,.05);}
.breeds-head{padding:10px 0;}
.breeds-head h2{
  font-family:var(--display);font-weight:700;font-size:42px;line-height:63px;
  color:var(--ink);text-align:center;
}
.breeds-grid{
  display:grid;grid-template-columns:repeat(3,29.6667%);gap:var(--gutter);
  margin-top:-3px;padding:12px 0 5px;
}
.breed-card{
  padding:50px 20px;
  border-radius:3px;
  box-shadow:0 2px 18px 0 rgba(0,0,0,.8);
  background-color:var(--white);
  background-size:cover,cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
  transition:background-image .3s ease;
}
.breed-card h3,.breed-card p{text-align:center;}
/* The source's heading sits in an inline span whose own line box is taller
   than the block's line-height; matching that keeps the card height right. */
.breed-card h3 span{line-height:normal;}
.breed-card h3{
  margin-bottom:16px;
  font-family:var(--montserrat);font-weight:700;font-size:32px;line-height:36.4px;
  color:var(--white);
}
.breed-card p{
  font-family:var(--sans);font-weight:500;font-size:16px;line-height:32px;
  color:var(--white);
}
.breed-cta{margin-top:27.97px;}

.breed-catahoula{background-image:linear-gradient(rgba(0,0,0,.38) 0%,rgba(0,0,0,.32) 100%),url("images/catahoula-leopard-card-1024.jpg");background-image:linear-gradient(rgba(0,0,0,.38) 0%,rgba(0,0,0,.32) 100%),image-set(url("images/catahoula-leopard-card-1024.webp") type("image/webp"),url("images/catahoula-leopard-card-1024.jpg") type("image/jpeg"));}
.breed-catahoula:hover{background-image:linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.7) 99%),url("images/catahoula-leopard-card-1024.jpg");background-image:linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.7) 99%),image-set(url("images/catahoula-leopard-card-1024.webp") type("image/webp"),url("images/catahoula-leopard-card-1024.jpg") type("image/jpeg"));}
.breed-aussie{background-image:linear-gradient(rgba(0,0,0,.38) 0%,rgba(0,0,0,.32) 100%),url("images/australian-shepherd-card-984.jpg");background-image:linear-gradient(rgba(0,0,0,.38) 0%,rgba(0,0,0,.32) 100%),image-set(url("images/australian-shepherd-card-984.webp") type("image/webp"),url("images/australian-shepherd-card-984.jpg") type("image/jpeg"));}
.breed-aussie:hover{background-image:linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.7) 99%),url("images/australian-shepherd-card-984.jpg");background-image:linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.7) 99%),image-set(url("images/australian-shepherd-card-984.webp") type("image/webp"),url("images/australian-shepherd-card-984.jpg") type("image/jpeg"));}
.breed-poodle{background-image:linear-gradient(rgba(0,0,0,.38) 0%,rgba(0,0,0,.32) 100%),url("images/mini-poodle-card-1440.jpg");background-image:linear-gradient(rgba(0,0,0,.38) 0%,rgba(0,0,0,.32) 100%),image-set(url("images/mini-poodle-card-1440.webp") type("image/webp"),url("images/mini-poodle-card-1440.jpg") type("image/jpeg"));}
.breed-poodle:hover{background-image:linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.7) 99%),url("images/mini-poodle-card-1440.jpg");background-image:linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.7) 99%),image-set(url("images/mini-poodle-card-1440.webp") type("image/webp"),url("images/mini-poodle-card-1440.jpg") type("image/jpeg"));}


/* =========================================================
   AVAILABLE PUPPIES + SLIDER
   ========================================================= */
.available{padding:40px 0 13px;background-color:var(--white);}
.available-grid{display:grid;grid-template-columns:57.75% 36.75%;gap:var(--gutter);align-items:start;}

.slider{
  position:relative;
  aspect-ratio:624/417;
  border-radius:3px;overflow:hidden;
  box-shadow:0 2px 18px 0 rgba(0,0,0,.3);
  color:var(--white);
}
.slides{position:absolute;inset:0;}
.slide{
  position:absolute;inset:0;
  opacity:0;
  background-size:cover;background-position:50% 50%;background-repeat:no-repeat;
  transition:opacity .8s ease;
}
.slide.is-active{opacity:1;}
.breed-catahoula-slide{background-image:url("images/catahoula-leopard-card-1024.jpg");background-image:image-set(url("images/catahoula-leopard-card-1024.webp") type("image/webp"),url("images/catahoula-leopard-card-1024.jpg") type("image/jpeg"));}
.slide-2{background-image:url("images/catahoula-puppy-blue-eyes-closeup-1024.jpg");background-image:image-set(url("images/catahoula-puppy-blue-eyes-closeup-1024.webp") type("image/webp"),url("images/catahoula-puppy-blue-eyes-closeup-1024.jpg") type("image/jpeg"));}
.slide-3{background-image:url("images/chocolate-merle-catahoula-puppy-standing-1024.jpg");background-image:image-set(url("images/chocolate-merle-catahoula-puppy-standing-1024.webp") type("image/webp"),url("images/chocolate-merle-catahoula-puppy-standing-1024.jpg") type("image/jpeg"));}
.slide-4{background-image:url("images/white-merle-catahoula-puppy-in-grass-1024.jpg");background-image:image-set(url("images/white-merle-catahoula-puppy-in-grass-1024.webp") type("image/webp"),url("images/white-merle-catahoula-puppy-in-grass-1024.jpg") type("image/jpeg"));}

.slider-arrow{
  position:absolute;top:50%;
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;margin-top:-24px;
  border:0;background:none;color:var(--white);
  font-size:48px;line-height:23.8px;text-align:left;
  opacity:0;cursor:pointer;
  transition:opacity .3s ease,left .3s ease,right .3s ease;
}
.slider-prev{left:-24px;}
.slider-next{right:-24px;}
.slider:hover .slider-prev,.slider-prev:focus-visible{left:0;}
.slider:hover .slider-next,.slider-next:focus-visible{right:0;}
.slider:hover .slider-arrow,.slider-arrow:focus-visible{opacity:1;}

.slider-dots{
  position:absolute;left:0;right:0;bottom:19px;
  display:flex;align-items:center;justify-content:center;height:24px;text-align:center;
}
/* The dot reads as 7px; the button itself is a 24px touch target. */
.slider-dots button{
  position:relative;
  width:24px;height:24px;padding:0;
  border:0;background:none;
  cursor:pointer;
}
.slider-dots button::before{
  content:"";position:absolute;top:50%;left:50%;
  width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
}
.slider-dots button[aria-selected="true"]::before{background:var(--white);}

.available-copy h2{
  font-family:var(--display);font-weight:700;font-size:42px;line-height:63px;
  color:var(--ink);text-align:center;
}
.available-copy p{
  font-family:var(--lato);font-weight:500;font-size:16px;line-height:28.8px;
  color:var(--text);
}
.available-cta{margin-top:7.48%;text-align:center;}


/* =========================================================
   TESTIMONIAL
   ========================================================= */
.testimonial{
  margin:41px 0;
  padding:41px 0 13px;
  background-color:var(--white);
  background-image:url("images/testimonial-quote-marks.jpg");
  background-image:image-set(url("images/testimonial-quote-marks.webp") type("image/webp"),url("images/testimonial-quote-marks.jpg") type("image/jpeg"));
  background-repeat:no-repeat;
  background-position:50% 50%;
  background-size:auto;
}
.testimonial .row{padding:80px 0 27px;}
.testimonial figure{margin:0;}
.testimonial blockquote{margin:0;}
.testimonial blockquote p{
  font-family:var(--sans);font-weight:600;font-style:italic;font-size:27px;line-height:54px;
  color:var(--quote);text-align:center;
}
.testimonial figcaption{
  margin-top:29.69px;
  font-family:var(--rubik);font-weight:500;font-size:15px;line-height:23.8px;letter-spacing:2px;
  text-transform:uppercase;color:var(--quote-author);text-align:center;
}


/* =========================================================
   FAQ
   ========================================================= */
.faq{padding:54px 0;background:var(--faq-bg);}
.faq h2{
  margin-bottom:2.75%;
  font-family:var(--display);font-weight:500;font-size:45px;line-height:45px;
  color:var(--ink);
}
.faq-item{
  margin-bottom:2.75%;
  padding:20px;
  border:1px solid var(--faq-border);
  border-radius:20px;
  background:var(--white);
  box-shadow:0 2px 18px 0 rgba(0,0,0,.3);
}
.faq-item:last-child{margin-bottom:0;}
.faq-item summary{
  position:relative;
  cursor:pointer;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary h3{
  padding:0 50px 0 0;
  font-family:var(--rubik);font-weight:500;font-size:22px;line-height:30.8px;
  color:var(--ink);
}
.faq-item[open] summary h3{color:var(--black);}
.faq-item summary::after{
  content:"";
  position:absolute;top:50%;right:0;
  width:15px;height:15px;margin-top:-7.5px;
  background-color:var(--faq-icon);
  -webkit-mask:var(--plus) no-repeat center/contain;
  mask:var(--plus) no-repeat center/contain;
}
/* The source drops the toggle icon entirely while a panel is open. */
.faq-item[open] summary::after{display:none;}
.faq-answer{padding-top:20px;}
.faq-answer p{
  font-family:var(--sans);font-weight:500;font-size:16px;line-height:28.8px;
  color:var(--black);
}


/* =========================================================
   CONTACT
   ========================================================= */
.contact{
  padding:100px 0 54px;
  background-color:var(--navy);
  background-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,var(--navy) 92%),url("images/contact-catahoula-outdoors-960.jpg");
  background-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,var(--navy) 92%),image-set(url("images/contact-catahoula-outdoors-960.webp") type("image/webp"),url("images/contact-catahoula-outdoors-960.jpg") type("image/jpeg"));
  background-size:cover,cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
}
.contact-head,.contact-grid{background:rgba(0,0,0,.59);}
.contact-head h2{
  font-family:var(--display);font-weight:500;font-size:45px;line-height:45px;
  color:var(--white);text-align:center;
}
.contact-grid{display:grid;grid-template-columns:47.25% 20.875% 20.875%;gap:var(--gutter);}
.contact-form-col{padding:0 15px;}

/* Height floor reserved for the embed. form_embed.js sets the real height after
   its handshake; the floor matches what it settles on (measured 466px at every
   width), so nothing below the form moves when it lands. */
/* The form provider's script initialises in two phases: it first takes the
   iframe out of flow (position:absolute), then ~500ms later re-wraps it and
   puts it back. While it is out of flow this box would collapse and everything
   below the form would jump. Reserving the settled height on the WRAPPER holds
   the space through both phases. 466px is what the embed settles on at every
   width measured; the script still sets the iframe's real height itself. */
.qf-embed{min-height:466px;}
.qf-embed iframe{
  display:block;width:100%;min-height:466px;
  border:0;border-radius:3px;background:transparent;
}

.contact-col h3{
  font-family:var(--rubik);font-weight:500;font-size:20px;line-height:24px;
  color:var(--white);
}
.contact-col p{
  max-width:95%;margin-bottom:13.17%;
  font-family:var(--sans);font-weight:500;font-size:14px;line-height:28px;
  color:var(--white);
}
.contact-col p:last-child{margin-bottom:0;}
.contact-phone a{font-size:18px;line-height:28px;}
.contact-phone a{color:#0c94ce;text-decoration:none;}
.contact-phone a:hover{text-decoration:underline;}
.phone-icon{flex:none;margin-right:7px;vertical-align:-3px;color:#0c94ce;}
.contact-col p.hours{max-width:none;padding-bottom:14px;}


/* =========================================================
   MAP
   ========================================================= */
.map{padding-bottom:7px;background-color:var(--white);}
.map iframe{width:100%;height:450px;}


/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:#222;}
.footer-bar{background:rgba(0,0,0,.32);}
.footer-bar .container{padding:18px 0;}
/* Three tracks: social left, copy centered, credit right. The 1fr side
   tracks keep the copy centered on the page, not between the two marks. */
.footer-inner{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px 24px;
}
.footer-info{
  text-align:center;
  font-family:var(--sans);font-weight:500;font-size:14px;line-height:1.7;
  color:var(--footer-text);
}
.footer-info a{color:var(--footer-text);font-weight:700;text-decoration:none;}
.footer-info a:hover{text-decoration:underline;}
/* Dimmed pipes read as dividers rather than as part of the sentence. */
.footer-info .sep{margin:0 10px;opacity:.4;}
.credit{display:inline-flex;align-items:center;justify-self:end;}
.credit img{display:block;width:96px;height:auto;opacity:.85;transition:opacity .3s ease;}
.credit:hover img{opacity:1;}
.social{display:flex;align-items:center;gap:16px;justify-self:start;}
.social a{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--footer-text);transition:opacity .3s ease;}
.social a:hover{opacity:.7;}


/* =========================================================
   MOBILE CALL BAR
   ========================================================= */
.call-bar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  height:60px;
  align-items:center;justify-content:center;gap:10px;
  background:var(--copper);
  color:var(--white);
  font-family:var(--sans);font-weight:600;font-size:20px;line-height:23.8px;
  text-decoration:none;
}


/* =========================================================
   INTERIOR PAGE HERO
   Shared by every page below the home page. The photograph is a
   background image behind a gradient scrim; the H1 carries the
   meaning, so the photo is decorative and needs no alt text.
   Padding and type both scale with the viewport, which is why
   there is no breakpoint on the column inset.
   ========================================================= */
.page-hero{
  --hero-scrim:rgba(27,31,37,.18);
  padding:0 10vw 8px;
  background-color:var(--white);
  background-repeat:no-repeat;
  background-position:50% 50%;
  background-size:cover;
  background-image:linear-gradient(var(--hero-scrim) 0%,rgb(27,31,37) 100%),var(--hero-img);
}
.page-hero .row{width:100%;max-width:none;padding:16px 0 22px;margin-bottom:-8px;}
.page-hero-inner{padding:7vw 40px;}
.page-hero .hero-spacer{height:10px;margin-bottom:3px;}
.page-hero h1{
  font-family:var(--lato);font-weight:700;
  font-size:5vw;line-height:.9em;letter-spacing:.05em;
  text-transform:uppercase;color:var(--white);
  text-shadow:0 -.09em .27em rgba(0,0,0,.38);
}

.page-hero-available,.page-hero-guardian,.page-hero-contact{
  --hero-img:url("images/catahoula-puppy-interior-hero-1024.jpg");
  --hero-img:image-set(url("images/catahoula-puppy-interior-hero-1024.webp") type("image/webp"),url("images/catahoula-puppy-interior-hero-1024.jpg") type("image/jpeg"));
}
.page-hero-guardian,.page-hero-contact{--hero-scrim:rgba(27,31,37,0);}
.page-hero-sold{
  --hero-img:url("images/frenchie-puppies-sold-hero-1920.jpg");
  --hero-img:image-set(url("images/frenchie-puppies-sold-hero-1920.webp") type("image/webp"),url("images/frenchie-puppies-sold-hero-1920.jpg") type("image/jpeg"));
}


/* =========================================================
   PAGE LEDE BAND
   A centred Playfair headline on white, directly under the hero.
   ========================================================= */
.page-lede{padding:9px 0 5px;background:var(--white);}
.page-lede .row{padding:27px 0 15px;}
.page-lede-inner{padding-top:15px;font-size:15px;line-height:30px;}
.page-lede h2,.collage-bred h2{
  font-family:var(--display);font-weight:700;font-size:40px;line-height:60px;
  color:var(--ink);text-align:center;
}

/* An empty band. The source reserves this space for puppy listings and
   currently renders nothing in it. */
.page-gap{padding:54px 0;background:var(--white);}


/* =========================================================
   PLAIN PAGES
   Privacy policy, project detail, 404. One capped column, no
   builder chrome: the source renders these from the theme's
   default template rather than the page builder.
   ========================================================= */
.plain{padding:58px 0 0;}
.plain-inner{padding-top:23px;}
.plain h1{
  margin-bottom:20px;
  font-family:var(--sans);font-weight:500;font-size:30px;line-height:30px;
  color:var(--ink);
}
.plain-body h2{
  padding-bottom:10px;
  font-family:var(--sans);font-weight:700;font-size:22px;line-height:22px;
  color:var(--ink);
}
.plain-body p{
  padding-bottom:14px;
  font-family:var(--sans);font-weight:500;font-size:14px;line-height:23.8px;
  color:var(--text);
}
.plain-body ul{padding:0 0 23px 14px;list-style:disc;}
.plain-body li{
  margin-left:14px;
  font-family:var(--sans);font-weight:500;font-size:14px;line-height:26px;
  color:var(--text);
}

/* Project detail */
.project-title{padding-bottom:12px;}
.project-title h1{display:inline-block;margin-bottom:0;padding:0 2px 10px 0;}
.project-photo{display:block;width:100%;height:auto;}
.project-body{padding-top:30px;min-height:30px;}
/* Floats, as the source has them: the newer project sits left and the
   older one right, each shrink-to-fit. */
.project-nav{padding:20px 0 50px;overflow:hidden;}
.project-nav a{font-size:14px;line-height:23.8px;color:var(--link);text-decoration:none;}
.project-nav a:hover{text-decoration:underline;}
.project-nav .nav-left{float:left;}
.project-nav .nav-right{float:right;padding-bottom:20px;}

/* 404 */
.notfound{margin-bottom:60px;}
.notfound h1{margin-bottom:0;}
.notfound p{padding-bottom:0;}
/* The message is only a couple of lines, so without this the footer lands
   mid-screen with empty page below it on any viewport taller than ~520px. */
.page-404{display:flex;flex-direction:column;min-height:100vh;}
.page-404 main{flex:1 0 auto;}
.page-404 footer{flex:0 0 auto;}


/* =========================================================
   GUARDIAN HOME PAGE
   Three bands above the shared contact band: a centred intro, a
   copy/photo split that reuses the home page's about pattern, and
   a raised terms card.
   ========================================================= */
.guardian-intro{padding:54px 0 0;background:var(--white);}
.guardian-intro p{
  font-family:var(--lato);font-weight:500;font-size:16px;line-height:28.8px;
  color:var(--text);text-align:center;
}

.guardian-split{
  padding:50px 0 20px;
  background-color:var(--white);
  background-image:linear-gradient(#fff 1%,rgba(255,255,255,0) 100%);
}
.guardian-copy{
  margin-bottom:31.6719px;
  font-family:var(--lato);font-size:16px;line-height:28.8px;text-align:center;
}
.guardian-copy p{
  padding-bottom:16px;text-align:left;
  font-family:var(--lato);font-weight:500;font-size:16px;line-height:28.8px;
  color:var(--text);
}
.guardian-cta{text-align:center;}

.guardian-terms{padding:65px 0;background:var(--white);}
.guardian-terms .row{
  width:60%;max-width:none;
  /* Padding rather than a margin on the heading: a collapsing top margin
     would escape the card and push it down the page. */
  padding:35px 0 15px;
  border-radius:10px;
  box-shadow:0 0 19px -3px rgba(0,0,0,.48);
}
.guardian-terms h2{
  margin:0 0 23.75px;
  font-family:var(--lato);font-weight:700;font-size:36px;line-height:43.2px;
  color:var(--ink);text-align:center;
}
.guardian-terms-body{
  padding:0 25px 15px;
  font-family:var(--lato);font-size:17px;line-height:30.6px;
}
.guardian-terms-body p{
  padding-bottom:17px;
  font-family:var(--lato);font-weight:500;font-size:17px;line-height:30.6px;
  color:var(--text);
}
.guardian-terms-body p:last-child{padding-bottom:0;}


/* =========================================================
   CONTACT PAGE
   Two columns: the form at 2/3 and a short info column at 1/3.
   ========================================================= */
.contact-page{padding:54px 0;background:var(--white);}
.contact-page-grid{display:grid;grid-template-columns:64.833% 29.667%;gap:5.5%;align-items:start;}
.contact-page h2{
  margin-bottom:5px;
  font-family:var(--display);font-weight:700;font-size:32px;line-height:48px;
  color:var(--ink);
}
.contact-page .qf-embed{margin-bottom:29.6875px;}
.contact-page-info{padding-top:15px;}
.contact-page-info p{font-family:var(--lato);font-weight:500;font-size:17px;line-height:27.2px;color:var(--text);}
.contact-page-info .info-lede{margin-bottom:29.6875px;}
.contact-page-note{font-style:italic;font-weight:700;}
.contact-page-info .contact-page-phone{
  display:flex;align-items:center;gap:15px;
  margin:0 0 29.6875px -40px;
  font-size:18px;line-height:32.4px;
}
.contact-page-phone a{color:var(--link);text-decoration:none;}
.contact-page-phone a:hover{text-decoration:underline;}
.contact-page-phone svg{flex:0 0 32px;color:var(--black);}


/* =========================================================
   SOLD PUPPY GRID
   Four cards per row, percentage gutters so the columns track
   the row width exactly as the source's float grid does.
   ========================================================= */
.sold{padding:54px 0;background:var(--white);}
.sold-grid{
  display:grid;
  text-align:center;
  grid-template-columns:repeat(4,1fr);
  column-gap:5.5%;
  /* Row gutters are a percentage of the row in the source. The row is 80vw
     here, so 5.5% of it is 4.4vw - expressed in vw because a percentage
     row-gap resolves against an indefinite height and collapses to zero. */
  row-gap:4.4vw;
  align-items:start;
}
/* The source's float grid leaves a trailing row gutter under the first
   block; CSS grid does not, so the block pays for it in padding. */
.sold-grid{padding-bottom:4.4vw;}
.sold-grid:last-child{padding-bottom:0;}
.sold-grid+.sold-grid{margin-top:2.2vw;}
.sold-card{display:block;text-decoration:none;color:var(--text);text-align:center;}
.sold-card-media{position:relative;display:block;line-height:0;}
.sold-card-media img{display:block;width:100%;height:auto;}
/* Hover veil with a magnifier, the source's portfolio overlay. */
.sold-card-media::after{
  content:"";
  position:absolute;inset:0;
  border:1px solid #e5e5e5;
  background:hsla(0,0%,100%,.9) var(--zoom) no-repeat center/32px 32px;
  opacity:0;
  transition:opacity .3s ease;
}
.sold-card:hover .sold-card-media::after,
.sold-card:focus-visible .sold-card-media::after{opacity:1;}
.sold-card h2{
  margin-top:10px;padding-bottom:0;
  font-family:var(--sans);font-weight:500;font-size:18px;line-height:28.8px;
  color:var(--ink);text-align:center;
}


/* =========================================================
   CTA BANNER
   Photo panel with a top-weighted scrim, a short rule, a heading
   and one button. Two colour variants differ only on hover.
   ========================================================= */
.cta-banner{padding:66px 0 72px;background:var(--white);}
.cta-banner .row{
  padding:40px 40px 120px;
  background-repeat:no-repeat;
  background-position:50% 50%;
  background-size:cover;
  background-image:linear-gradient(180deg,rgba(0,0,0,.4) 40%,rgba(246,243,243,0) 100%),var(--cta-img);
}
.cta-divider{width:70px;height:23px;padding-top:17px;}
.cta-divider::before{content:"";display:block;border-top:1px solid var(--white);}
.cta-banner h3{
  max-width:700px;margin-bottom:27.5px;
  font-family:var(--montserrat);font-weight:600;font-size:41px;line-height:1.5em;
  text-transform:uppercase;color:var(--white);
  text-shadow:0 0 .3em rgba(0,0,0,.4);
}
.btn-cta{
  padding:12px 30px;
  border:1px solid var(--white);
  border-radius:6px;
  background:var(--white);
  color:var(--black);
  font-family:var(--lato);font-weight:700;font-size:15px;line-height:25.5px;letter-spacing:1px;
}
.btn-cta:hover{background:var(--btn-blue);border-color:var(--btn-blue);color:var(--white);}
.cta-available{
  --cta-img:url("images/australian-shepherd-cta-1536.jpg");
  --cta-img:image-set(url("images/australian-shepherd-cta-1536.webp") type("image/webp"),url("images/australian-shepherd-cta-1536.jpg") type("image/jpeg"));
}
.cta-sold{
  padding-top:32px;
  --cta-img:url("images/puppies-for-sale-illinois-cta-1440.jpg");
  --cta-img:image-set(url("images/puppies-for-sale-illinois-cta-1440.webp") type("image/webp"),url("images/puppies-for-sale-illinois-cta-1440.jpg") type("image/jpeg"));
}
.cta-sold .btn-cta{border-color:var(--black);}
.cta-sold .btn-cta:hover{background:#c00a17;border-color:#c00a17;color:var(--white);}


/* =========================================================
   TABLET AND BELOW (<=980): single column, header not fixed
   ========================================================= */
@media (max-width:980px){
  :root{--header-h:80px;}
  body{padding-top:80px;}

  .site-header{position:absolute;height:80px;box-shadow:none;}
  .brand img{height:100%;}
  .row{padding:30px 0;}
  .hero-panel{padding:30px 0;}
  .breeds-head{padding:10px 0;}
  .breeds-grid{padding:12px 0 5px;}
  .testimonial .row{padding:80px 0 30px;}
  .site-header.is-stuck{height:80px;box-shadow:none;}
  .menu-toggle{display:flex;align-self:flex-end;}
  .header-inner{position:relative;}

  .site-nav{
    display:none;
    position:absolute;top:80px;left:0;right:0;
    padding:10px;
    background:var(--white);
    border-top:3px solid var(--copper);
    border-radius:0 0 12px 12px;
    box-shadow:0 14px 30px -10px rgba(0,0,0,.22);
  }
  .site-nav.is-open{display:block;}
  .site-nav>ul{display:block;height:auto;gap:0;}
  .site-nav>ul>li{display:block;height:auto;}
  .site-nav>ul>li>a{padding:11px 14px;}
  .site-nav a{
    display:block;
    padding:11px 14px;border-radius:8px;
    color:var(--text);
    font-weight:600;font-size:14px;line-height:1.4;
    letter-spacing:.02em;text-transform:none;
  }
  .site-nav a:hover,.site-nav a[aria-current="page"]{background:rgba(0,0,0,.045);}
  /* No hover on touch, so the underline wipe and the caret have no meaning
     here -- the current page is marked with a fill instead. */
  .site-nav>ul>li>a::after{display:none;}
  .site-nav .caret{display:none;}
  /* The submenu is just an indented nested list: it stays open, and every
     item is one tap away. */
  .site-nav .submenu{
    position:static;min-width:0;
    margin:2px 0 6px 14px;padding:0 0 0 12px;
    background:none;box-shadow:none;
    border:0;border-left:2px solid rgba(0,0,0,.09);border-radius:0;
    opacity:1;visibility:visible;transform:none;
  }
  .site-nav .submenu a{padding:9px 12px;font-size:14px;}

  .hero h1{font-size:38px;line-height:57px;}
  .page-hero{padding:0 30px 8px;}
  .page-hero h1{font-size:7vw;}
  .page-lede .row{padding:30px 0 15px;}
  .page-lede h2,.collage-bred h2{font-size:32px;line-height:48px;}
  .page-gap{padding:50px 0;}
  .guardian-split{padding:22px 0 39px;}
  .guardian-terms{margin-top:11px;}
  .plain-inner{padding-top:0;}
  .plain-project .plain-inner{padding-bottom:50px;}
  /* Google's Open Sans runs ~1.4% wider than the copy the source self-hosts,
     which pushes these long titles onto an extra line at phone widths. The
     tracking below gives that width back so the wrap matches. */
  .project-title h1{display:block;padding-right:0;letter-spacing:-.012em;}
  .project-nav a{letter-spacing:-.012em;}
  .notfound{margin-bottom:41px;}
  .contact-page{padding:50px 0;}
  .contact-page-grid{grid-template-columns:100%;gap:0;}
  .contact-page-info{margin-top:30px;}
  /* The source drops the phone block's negative pull on tablet only. */
  .sold{padding:50px 0;}
  /* Below the desktop breakpoint both grid blocks carry the trailing gutter. */
  .sold-grid{grid-template-columns:repeat(3,1fr);row-gap:6vw;padding-bottom:6vw;}
  .sold-grid:last-child{padding-bottom:6vw;}
  .sold-grid+.sold-grid{margin-top:30px;}
  .sold-card h2{padding-bottom:10px;font-size:26px;line-height:41.6px;}
  .cta-banner{padding:32px 0 72px;}
  .cta-banner .row{width:90%;}
  .about{padding:22px 0 40px;}
  .about-copy h2,.breeds-head h2,.available-copy h2,.guardian-intro h2,.guardian-split h2{font-size:32px;line-height:48px;}
  .value-card h3{font-size:16px;line-height:22.4px;}
  .faq-item summary h3{font-size:16px;line-height:22.4px;}
  .faq-answer p{font-size:15px;line-height:27px;}
  .faq{padding:50px 0;}
  .contact{
    padding:100px 0 50px;
    background-image:linear-gradient(rgba(0,0,0,0) 0%,var(--navy) 92%),url("images/contact-catahoula-outdoors-960.jpg");
    background-image:linear-gradient(rgba(0,0,0,0) 0%,var(--navy) 92%),image-set(url("images/contact-catahoula-outdoors-960.webp") type("image/webp"),url("images/contact-catahoula-outdoors-960.jpg") type("image/jpeg"));
  }
  .contact-col h3{font-size:18px;line-height:21.6px;}

  .about-grid,.values-grid,.breeds-grid,.available-grid{
    grid-template-columns:100%;
    gap:0;
  }
  .about-grid>*+*,.values-grid>*+*,.breeds-grid>*+*,.available-grid>*+*{margin-top:30px;}
  .contact-head,.contact-grid{width:90%;}
  .contact-grid{grid-template-columns:47.25% 47.25%;}
  /* Once the grid stacks, the percentage gutter becomes a percentage ROW gap,
     which resolves against the container's own height. The container is sized
     as if the gap were zero, so the tracks are then pushed past its bottom edge
     and the last column spills outside the panel background. The other grids
     drop to a definite row gap at this breakpoint for the same reason; the
     30px margin on each column carries the vertical rhythm. */
  .contact-grid{column-gap:var(--gutter);row-gap:0;}
  .contact-form-col{grid-column:1 / -1;}
  .contact-grid>.contact-col{margin-top:30px;}
  /* Below the desktop breakpoint the source's info modules sit 10px in
     from the column edge and cap their copy at 95%. */
  .contact-col>*{margin-left:10px;}
  .contact-col p{max-width:95%;}
  .faq-item{margin-bottom:10px;}
  .value-card{padding:30px 20px;}
  .footer-inner{grid-template-columns:1fr;justify-items:center;gap:14px;}
  .social,.credit{justify-self:center;}

  /* Below the desktop breakpoint the source switches from proportional
     module gaps to a flat 30px. */
  .hero-copy{margin-bottom:30px;}
  .breed-cta{margin-top:30px;}

  .about-cta{margin-top:30px;}
  .available-cta{margin-top:30px;}
  .faq h2{margin-bottom:30px;}
  .contact-col p{margin-bottom:30px;}
}


/* =========================================================
   TABLET ONLY (768-980): the phone block loses its negative pull
   ========================================================= */
@media (min-width:768px) and (max-width:980px){
  .contact-page-info .contact-page-phone{margin-left:12px;max-width:550px;}
}


/* =========================================================
   PHONE (<=767): type scale only
   ========================================================= */
@media (max-width:767px){
  .hero-panel{width:85%;}
  .eyebrow{font-size:12px;line-height:24px;letter-spacing:0;}
  .hero h1{font-size:30px;line-height:45px;}
  .page-hero-inner{padding:7vw 10px;}
  /* The source lets the phone headline overhang its column by 5vw. */
  .page-hero h1{margin-right:-5vw;line-height:1.2em;}
  .page-lede-inner{font-size:14px;line-height:28px;}
  .page-lede h2,.collage-bred h2{font-size:22px;line-height:33px;}
  .guardian-intro{padding:20px 0 0;}
  .guardian-split{padding:22px 0 0;}
  .guardian-terms{margin-top:13px;}
  .guardian-terms{padding-top:20px;}
  .guardian-terms .row{width:90%;}
  .guardian-terms h2{font-size:26px;line-height:31.2px;}
  .contact-page h2{font-size:22px;line-height:33px;}
  .sold-grid{grid-template-columns:100%;row-gap:9.2vw;padding-bottom:9.2vw;}
  .sold-grid:last-child{padding-bottom:9.2vw;}
  .sold-card h2{font-size:18px;line-height:28.8px;}
  .cta-banner{padding:32px 0 60px;}
  .cta-banner .row{padding:40px 20px 90px;}
  .cta-banner h3{font-size:30px;}
  .about{padding:22px 0 0;}
  .about-copy h2,.breeds-head h2,.available-copy h2,.guardian-intro h2,.guardian-split h2{font-size:22px;line-height:33px;}
  .value-card h3{font-size:14px;line-height:19.6px;}
  .testimonial blockquote p{font-size:15px;line-height:30px;}
  .faq h2,.contact-head h2{font-size:38px;line-height:38px;}
  .faq-item summary h3{font-size:15px;line-height:21px;}
  .faq-answer p{font-size:14px;line-height:25.2px;}
  .contact{padding:50px 0;}
  .contact-col h3{font-size:16px;line-height:22.4px;}
  .value-card{padding:21px 20px;}
  .breed-card h3{line-height:28px;}
  .breed-card h3 span{line-height:32px;}
  .available .row{width:100%;max-width:none;}
  .slider-dots{bottom:3px;}
  .available-copy{width:80%;margin:30px auto 0;}
  .contact-grid{grid-template-columns:100%;}

  .faq-item{margin-bottom:10px;}

}


/* =========================================================
   MID SCREENS (641-1024): mid-weight background-image tier
   ========================================================= */
@media (min-width:641px) and (max-width:1024px){
  .page-hero-sold{
    --hero-img:url("images/frenchie-puppies-sold-hero-1440.jpg");
    --hero-img:image-set(url("images/frenchie-puppies-sold-hero-1440.webp") type("image/webp"),url("images/frenchie-puppies-sold-hero-1440.jpg") type("image/jpeg"));
  }
}


/* =========================================================
   SMALL SCREENS (<=640): lighter background-image tiers
   ========================================================= */
@media (max-width:640px){
  .page-hero-available,.page-hero-guardian,.page-hero-contact{
    --hero-img:url("images/catahoula-puppy-interior-hero-640.jpg");
    --hero-img:image-set(url("images/catahoula-puppy-interior-hero-640.webp") type("image/webp"),url("images/catahoula-puppy-interior-hero-640.jpg") type("image/jpeg"));
  }
  .page-hero-sold{
    --hero-img:url("images/frenchie-puppies-sold-hero-640.jpg");
    --hero-img:image-set(url("images/frenchie-puppies-sold-hero-640.webp") type("image/webp"),url("images/frenchie-puppies-sold-hero-640.jpg") type("image/jpeg"));
  }
  .cta-available{
    --cta-img:url("images/australian-shepherd-cta-640.jpg");
    --cta-img:image-set(url("images/australian-shepherd-cta-640.webp") type("image/webp"),url("images/australian-shepherd-cta-640.jpg") type("image/jpeg"));
  }
  .cta-sold{
    --cta-img:url("images/puppies-for-sale-illinois-cta-640.jpg");
    --cta-img:image-set(url("images/puppies-for-sale-illinois-cta-640.webp") type("image/webp"),url("images/puppies-for-sale-illinois-cta-640.jpg") type("image/jpeg"));
  }

  /* Breed cards, slider frames and the contact photo paint into boxes of
     312-640px here, so they take the 640 tier like the heroes and banners
     above. The gradients are repeated because background-image carries both
     layers in one declaration. */
  .breed-catahoula{
    background-image:linear-gradient(rgba(0,0,0,.38) 0%,rgba(0,0,0,.32) 100%),url("images/catahoula-leopard-card-640.jpg");
    background-image:linear-gradient(rgba(0,0,0,.38) 0%,rgba(0,0,0,.32) 100%),image-set(url("images/catahoula-leopard-card-640.webp") type("image/webp"),url("images/catahoula-leopard-card-640.jpg") type("image/jpeg"));
  }
  .breed-catahoula:hover{
    background-image:linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.7) 99%),url("images/catahoula-leopard-card-640.jpg");
    background-image:linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.7) 99%),image-set(url("images/catahoula-leopard-card-640.webp") type("image/webp"),url("images/catahoula-leopard-card-640.jpg") type("image/jpeg"));
  }
  .breed-aussie{
    background-image:linear-gradient(rgba(0,0,0,.38) 0%,rgba(0,0,0,.32) 100%),url("images/australian-shepherd-card-640.jpg");
    background-image:linear-gradient(rgba(0,0,0,.38) 0%,rgba(0,0,0,.32) 100%),image-set(url("images/australian-shepherd-card-640.webp") type("image/webp"),url("images/australian-shepherd-card-640.jpg") type("image/jpeg"));
  }
  .breed-aussie:hover{
    background-image:linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.7) 99%),url("images/australian-shepherd-card-640.jpg");
    background-image:linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.7) 99%),image-set(url("images/australian-shepherd-card-640.webp") type("image/webp"),url("images/australian-shepherd-card-640.jpg") type("image/jpeg"));
  }
  .breed-poodle{
    background-image:linear-gradient(rgba(0,0,0,.38) 0%,rgba(0,0,0,.32) 100%),url("images/mini-poodle-card-640.jpg");
    background-image:linear-gradient(rgba(0,0,0,.38) 0%,rgba(0,0,0,.32) 100%),image-set(url("images/mini-poodle-card-640.webp") type("image/webp"),url("images/mini-poodle-card-640.jpg") type("image/jpeg"));
  }
  .breed-poodle:hover{
    background-image:linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.7) 99%),url("images/mini-poodle-card-640.jpg");
    background-image:linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.7) 99%),image-set(url("images/mini-poodle-card-640.webp") type("image/webp"),url("images/mini-poodle-card-640.jpg") type("image/jpeg"));
  }
  .breed-catahoula-slide{
    background-image:url("images/catahoula-leopard-card-640.jpg");
    background-image:image-set(url("images/catahoula-leopard-card-640.webp") type("image/webp"),url("images/catahoula-leopard-card-640.jpg") type("image/jpeg"));
  }
  .slide-2{
    background-image:url("images/catahoula-puppy-blue-eyes-closeup-640.jpg");
    background-image:image-set(url("images/catahoula-puppy-blue-eyes-closeup-640.webp") type("image/webp"),url("images/catahoula-puppy-blue-eyes-closeup-640.jpg") type("image/jpeg"));
  }
  .slide-3{
    background-image:url("images/chocolate-merle-catahoula-puppy-standing-640.jpg");
    background-image:image-set(url("images/chocolate-merle-catahoula-puppy-standing-640.webp") type("image/webp"),url("images/chocolate-merle-catahoula-puppy-standing-640.jpg") type("image/jpeg"));
  }
  .slide-4{
    background-image:url("images/white-merle-catahoula-puppy-in-grass-640.jpg");
    background-image:image-set(url("images/white-merle-catahoula-puppy-in-grass-640.webp") type("image/webp"),url("images/white-merle-catahoula-puppy-in-grass-640.jpg") type("image/jpeg"));
  }
  .contact{
    background-image:linear-gradient(rgba(0,0,0,0) 0%,var(--navy) 92%),url("images/contact-catahoula-outdoors-640.jpg");
    background-image:linear-gradient(rgba(0,0,0,0) 0%,var(--navy) 92%),image-set(url("images/contact-catahoula-outdoors-640.webp") type("image/webp"),url("images/contact-catahoula-outdoors-640.jpg") type("image/jpeg"));
  }
}


/* =========================================================
   SMALL PHONE (<=650): sticky call bar
   ========================================================= */
@media (max-width:650px){
  body{padding-bottom:60px;}
  .call-bar{display:flex;}
}


/* =========================================================
   MOTION PREFERENCES
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;}
}