/* Flint River Animal Hospital.
   Colours sampled from their own logo and building photograph, not invented:
   the moss green is the logo panel, the sage is the river illustration inside it,
   the bone is the Bed 'n Biscuit lockup, the sky is from the photo of their sign.
   Their logo has carried a riverbank scene since 2017 and the current site uses it
   nowhere. */
@import url("https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;600;700&family=Libre+Franklin:wght@400;500;600&display=swap");

:root{
  --moss:#455e36;
  --moss-dk:#2f3f25;
  --sage:#92af99;
  --bone:#efe3c9;
  --bark:#2f3a28;
  --sky:#7e9ddd;
  --paper:#fcfbf7;
  --rule:#d9d3bf;
  --body:#4c5347;
  --slab:"Zilla Slab",Rockwell,"Bookman Old Style",Georgia,serif;
  --sans:"Libre Franklin","Franklin Gothic Medium","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--body);font:17px/1.68 var(--sans)}
h1,h2,h3{font-family:var(--slab);color:var(--bark);margin:0;line-height:1.15;font-weight:600}
h1{font-size:clamp(2.1rem,4.4vw,3.15rem);letter-spacing:-.012em}
h2{font-size:clamp(1.5rem,2.6vw,2.05rem)}
h3{font-size:1.15rem;font-weight:600}
p{margin:0 0 1.05rem}
a{color:var(--moss)}
a:hover{color:var(--moss-dk)}
img{max-width:100%;height:auto;display:block}
address{font-style:normal}

a:focus-visible,button:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.skip{position:absolute;left:-9999px;background:var(--bark);color:#fff;padding:.8rem 1.2rem;z-index:60}
.skip:focus{left:.5rem;top:.5rem}

.wrap{max-width:1120px;margin:0 auto;padding:0 1.5rem}

.btn{display:inline-block;background:var(--moss);color:#fff;text-decoration:none;
  font-weight:600;padding:.82rem 1.6rem;border:2px solid var(--moss)}
.btn:hover{background:var(--moss-dk);border-color:var(--moss-dk);color:#fff}
.btn.line{background:transparent;color:var(--moss-dk)}
.btn.line:hover{background:var(--bone);color:var(--moss-dk)}

/* masthead: logo left, the number people actually want on the right */
header{background:var(--paper)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.15rem 0 1rem;flex-wrap:wrap}
.bar .mark{width:270px}
.tel{font-family:var(--slab);font-size:1.5rem;color:var(--moss-dk);text-decoration:none;font-weight:600}
.tel:hover{color:var(--bark)}
.tel small{display:block;font-family:var(--sans);font-size:.82rem;font-weight:400;color:var(--body)}
nav ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav a{color:var(--bark);text-decoration:none;font-weight:500}
nav a:hover{color:var(--moss)}
nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--moss)}
.navbar{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:.7rem 0}

/* the one bold move: the facts block sits into the photograph's lower edge */
.horizon{position:relative}
.horizon .shot{width:100%;height:clamp(280px,38vw,460px);object-fit:cover;object-position:62% 42%}
.horizon .wrap{position:relative}
.facts{background:var(--moss);color:#e7eee2;margin-top:-104px;position:relative;
  display:grid;grid-template-columns:1.7fr 1fr 1fr;max-width:900px}
.facts>div{padding:1.5rem 1.75rem}
.facts>div+div{border-left:1px solid rgba(255,255,255,.22)}
.facts h1{color:#fff;font-size:1.6rem;line-height:1.2;margin-bottom:.35rem}
.facts p{margin:0;font-size:.97rem}
.facts .big{font-family:var(--slab);font-size:1.32rem;color:#fff;line-height:1.3}
.facts a{color:#fff}

.lead{padding:3.5rem 0 2.75rem}
.lead-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:4rem;align-items:start}
.lead p.first{font-size:1.24rem;line-height:1.6;color:var(--bark);max-width:40ch}
.cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
.aside{border-top:3px solid var(--moss);padding-top:1.1rem}
.aside p:last-child{margin-bottom:0}

/* services as a practice board, hanging rules, no cards and no numbering */
.board{background:#fff;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:3.25rem 0}
.board dl{margin:1.5rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 3.5rem}
.board .item{border-top:1px solid var(--rule);padding:1.1rem 0 1.25rem}
.board dt{font-family:var(--slab);font-size:1.12rem;color:var(--moss-dk)}
.board dd{margin:.3rem 0 0;font-size:.99rem}

.boarding{background:var(--bone)}
.boarding .wrap{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;
  padding-top:3.25rem;padding-bottom:3.25rem}
.boarding .photo{width:100%;height:290px;object-fit:cover}
.boarding .sub-mark{width:200px;height:auto;margin-bottom:1rem}

/* emergency: this is the one thing that must be findable at 2am */
.urgent{background:var(--bark);color:#d7dfd2;padding:2.75rem 0}
.urgent h2{color:#fff}
.urgent a{color:#fff}
.urgent .row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2.5rem;margin-top:1.25rem}
.urgent .lede{font-size:1.08rem;color:var(--sky);margin:.4rem 0 0}
.urgent h3{color:#fff;font-size:1.05rem;margin-bottom:.3rem}
.urgent .num{font-family:var(--slab);font-size:1.35rem;color:#fff;margin-top:.35rem}

.visit{padding:3.25rem 0}
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.visit dt{font-weight:600;color:var(--bark);margin-top:1rem}
.visit dt:first-of-type{margin-top:0}
.visit dd{margin:.1rem 0 0}

footer{background:var(--moss-dk);color:#c2cebb;padding:2.75rem 0 1.5rem;font-size:.96rem}
footer a{color:#fff}
footer h2{color:#fff;font-size:1.25rem;margin-bottom:.5rem}
footer h3{color:#fff;font-size:1rem;margin-bottom:.4rem}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
.fine{border-top:1px solid rgba(255,255,255,.14);margin-top:1.75rem;padding-top:1rem;
  font-size:.85rem;color:#8d9a86}

.note{background:#fff;border:1px solid var(--rule);border-left:4px solid var(--sky);
  padding:1rem 1.25rem;font-size:.92rem;margin:2rem 0}

@media (max-width:860px){
  .lead-grid,.boarding .wrap,.visit-grid,.urgent .row,.foot,.board dl{grid-template-columns:1fr;gap:0 2rem}
  .facts{grid-template-columns:1fr;margin-top:-40px}
  .facts>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.22)}
  .board dl{gap:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* services page: a photograph and three plain answers, no cards, no numbering */
.svc-list{padding-bottom:3rem}
.svc-list article{padding:2.25rem 0;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:20rem 1fr;gap:0 3rem;align-items:start}
.svc-list article h2{font-size:1.42rem;color:var(--moss-dk);margin-bottom:.9rem}
.svc-list article>img{width:100%;height:auto;border:1px solid var(--rule)}
.svc-list article>img.ill{width:96px;border:0;margin-top:.4rem}
.svc-facts{margin:0;display:grid;grid-template-columns:11rem 1fr;gap:.55rem 1.5rem}
.svc-facts dt{font-weight:600;color:var(--bark);font-size:.93rem}
.svc-facts dd{margin:0;max-width:60ch}
@media (max-width:860px){
  .svc-list article{grid-template-columns:1fr;gap:1rem}
  .svc-list article>img{max-width:100%}
  .svc-facts{grid-template-columns:1fr;gap:.15rem}
  .svc-facts dt{margin-top:.7rem}
  .svc-facts dt:first-of-type{margin-top:0}
}


/* illustrations, drawn to their palette. placeholders are marked as placeholders. */
.critters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:1.5rem}
.critters figure{margin:0;text-align:center}
.critters img{width:96px;height:96px;margin:0 auto .6rem}
.critters figcaption{font-family:var(--slab);color:var(--moss-dk);font-size:1.05rem}

.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.5rem}
.shots .slot{background:var(--bone);border:1px dashed #b9ae90;min-height:170px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:1rem;font-size:.9rem;color:#7a6f52}

/* the other site, given real estate rather than a link in the footer */
.sibling{background:var(--moss);color:#e7eee2;padding:2.5rem 0}
.sibling .wrap{display:grid;grid-template-columns:220px 1fr auto;gap:2rem;align-items:center}
.sibling h2{color:#fff}
.sibling p{margin:.4rem 0 0}
.sibling img{background:#fff;padding:.9rem;width:100%}
.sibling .btn{background:#fff;color:var(--moss-dk);border-color:#fff}
.sibling .btn:hover{background:var(--bone);border-color:var(--bone);color:var(--moss-dk)}

.byline{background:#fff;border-top:1px solid var(--rule);padding:1.5rem 0;text-align:center;
  font-size:.9rem;color:#6f7568}
.byline a{font-weight:600}

@media (max-width:860px){
  .critters{grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
  .critters img{width:72px;height:72px}
  .critters figcaption{font-size:.95rem}
  /* three stacked 170px placeholders is half a phone screen of nothing */
  .shots{grid-template-columns:1fr 1fr;gap:.7rem}
  .shots .slot{min-height:112px;font-size:.8rem;padding:.7rem}
  .shots .slot:last-child{grid-column:1/-1;min-height:96px}
  .sibling .wrap{grid-template-columns:1fr;text-align:center;justify-items:center}
  .sibling img{max-width:220px}
  .boarding .photo{height:210px}
  .facts>div{padding:1.15rem 1.25rem}
}

/* ---- added with the proof-and-booking pass ---------------------------- */

.bar-right{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.btn-sm{padding:.55rem 1.05rem;font-size:.92rem}

.newhere{margin:.9rem 0 0}
.newhere dt{font-family:var(--slab);color:var(--moss-dk);font-size:1rem;margin-top:.85rem}
.newhere dt:first-of-type{margin-top:0}
.newhere dd{margin:.15rem 0 0;font-size:.95rem}

/* the team row. portraits are the highest-value photograph on a vet site,
   so they get real size rather than thumbnails in a footer. */
.team{padding:3.25rem 0}
.team .lede{max-width:56ch;margin-top:.5rem}
.faces{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.25rem;margin-top:1.75rem}
.faces figure{margin:0}
.faces img{width:100%;height:auto}
.faces figcaption{font-family:var(--slab);color:var(--moss-dk);margin-top:.55rem;font-size:1rem;line-height:1.3}
.faces figcaption span{display:block;font-family:var(--sans);font-weight:400;font-size:.88rem;color:var(--body)}

.ph-note{background:#fff;border-left:4px solid var(--sage);padding:.9rem 1.15rem;
  font-size:.9rem;color:#5d6458;margin:1.75rem 0 0;max-width:78ch}

.proof{background:#fff;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:3.25rem 0}
.proof-grid{display:grid;grid-template-columns:minmax(0,.8fr) repeat(2,minmax(0,1fr));
  gap:2.5rem;margin-top:1.5rem;align-items:start}
.proof .score .stars{color:var(--moss);letter-spacing:.18em;font-size:1.15rem;margin:0}
.proof .score .big{font-family:var(--slab);font-size:2.6rem;color:var(--bark);margin:.2rem 0 .1rem;line-height:1}
.proof .score p{margin:0;font-size:.95rem}
.proof blockquote{margin:0;border-top:3px solid var(--moss);padding-top:1rem}
.proof blockquote p{font-size:1.03rem;color:var(--bark)}
.proof cite{font-style:normal;font-size:.9rem;color:#6f7568}

.appt{background:var(--bone);padding:3.25rem 0}
.appt-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:3.5rem;align-items:start}
.appt .lede{font-size:1.08rem;color:var(--bark)}
.req{background:#fff;border:1px solid var(--rule);padding:1.75rem}
.req p{margin:0 0 1rem}
.req .f2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.req label,.req legend{display:block;font-weight:600;font-size:.92rem;color:var(--bark);margin-bottom:.3rem}
.req input,.req select,.req textarea{width:100%;font:inherit;font-size:1rem;padding:.62rem .7rem;
  border:1px solid #c3bda8;background:#fdfcf9;color:var(--bark);border-radius:0}
.req input:focus,.req select:focus,.req textarea:focus{outline:3px solid var(--sky);outline-offset:1px;border-color:var(--moss)}
.req textarea{resize:vertical}
.req fieldset{border:0;padding:0;margin:0 0 1rem}
.req .radios{display:flex;gap:1.25rem;flex-wrap:wrap;margin:0}
.req .radios label{font-weight:400;display:flex;align-items:center;gap:.4rem;margin:0}
.req .radios input{width:auto}
.req button{cursor:pointer;font:inherit;font-weight:600}
.form-msg{margin:0;font-size:.93rem}
.form-msg.ok{border-left:4px solid var(--moss);background:#f2f6ef;padding:.75rem .95rem;color:var(--moss-dk)}
.form-msg.bad{border-left:4px solid #a8443a;background:#fbf0ee;padding:.75rem .95rem;color:#7d2f27}

.urgent-note{margin:1.5rem 0 0;font-size:.95rem;color:#aab5a3}

.map iframe{width:100%;height:340px;border:1px solid var(--rule);display:block;background:#eee}
.map-note{font-size:.88rem;color:#6f7568;margin:.7rem 0 0}

.campus{display:flex;gap:1.75rem;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.14);
  margin-top:1.75rem;padding-top:1.1rem}
.campus a{font-weight:600;text-decoration:none}
.campus a:hover{text-decoration:underline}
.fine{border-top:0;margin-top:1rem;padding-top:0}

@media (max-width:860px){
  .bar-right{width:100%;justify-content:space-between;gap:.75rem}
  .faces{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
  .proof-grid,.appt-grid,.req .f2{grid-template-columns:1fr;gap:2rem}
  .req .f2{gap:0}
  .req{padding:1.25rem}
  .map iframe{height:260px}
  .campus{gap:1.1rem 1.5rem}
}
/* their own sign, where it is useful: helping someone find the turning */
.signshot{width:100%;height:150px;object-fit:cover;object-position:50% 62%;
  border:1px solid var(--rule);margin-top:.9rem}

/* phone only: the two actions anyone on a vet site wants, always reachable */
.stickybar{display:none}
@media (max-width:860px){
  .stickybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    border-top:1px solid var(--moss-dk)}
  .stickybar a{flex:1;text-align:center;padding:.9rem .5rem;font-weight:600;
    text-decoration:none;background:var(--bone);color:var(--moss-dk);font-size:.95rem}
  .stickybar a.primary{background:var(--moss);color:#fff}
  .byline{padding-bottom:4.5rem}
  /* the sticky bar carries the request, so the masthead can drop it */
  .bar-right .btn-sm{display:none}
  .bar .mark{width:210px}
}
@media (max-width:860px){
  /* six links wrapped onto three rows pushed the photograph off the first
     screen. one scrolling row keeps every link reachable without a menu
     button nobody taps. */
  .navbar nav ul{flex-wrap:nowrap;overflow-x:auto;gap:1.4rem;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .navbar nav ul::-webkit-scrollbar{display:none}
  .navbar nav li{flex:0 0 auto}
  .navbar nav a{white-space:nowrap}
}