@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter.woff2) format('woff2')}
/* Furry Freight — one stylesheet, emitted content-hashed by build.py.

   Look, 2026-09-08 (Ronnie: "the old site looks better"): the client's own visual language —
   soft blue backdrop, a big light headline with two accent words in brand blue, floating pet
   portraits with name badges, rounded photo cards, green ticks beside a large photo, pill
   buttons — rebuilt in CSS. Nothing here is animated into view and nothing loads from a third
   party, so none of it can move the score the wrong way.

   Two rules exist because of findings in the 2026-09-05 audit and must not be undone:

     1. NOTHING IS EVER visibility:hidden OR opacity:0 AT REST. The old site put the phone number
        inside Elementor's .elementor-invisible and it never un-hid on the measured page load.
     2. THE PHONE SURVIVES EVERY BREAKPOINT. No media query may set display:none or
        visibility:hidden on .tel or anything containing it. §6 of the 310Web standard.
*/

:root{
  --brand:#185FFF;
  --brand-dark:#0B3FB8;
  --brand-tint:#EEF3FF;
  --brand-soft:#E4ECFF;
  --sky:#F2F6FF;
  --ink:#101724;
  --ink-2:#3D4A5C;
  --mute:#66748A;
  --line:#E3E9F2;
  --bg:#FFFFFF;
  --bg-2:#F7F9FD;
  --warm:#FFF7EC;
  --amber:#B26B00;
  --green:#12A363;
  --green-soft:#E6F7EF;
  --red:#B3261E;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --wrap:1120px;
  --read:68ch;
  --r:22px;
  --shadow:0 18px 50px -26px rgba(16,23,36,.35);
  --shadow-sm:0 6px 22px -12px rgba(16,23,36,.28);
}

*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--bg);font:17px/1.65 var(--sans)}
img{max-width:100%;height:auto}
a{color:var(--brand-dark)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--brand);outline-offset:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.read{max-width:var(--read)}

h1,h2,h3,h4{line-height:1.12;margin:0;text-wrap:balance;letter-spacing:-.022em}
h1{font-size:clamp(36px,5.6vw,62px);font-weight:600;color:#1B2436}
h1 .acc{color:var(--brand)}
h2{font-size:clamp(26px,3.4vw,40px);font-weight:600;margin:0 0 14px;color:#1B2436}
h3{font-size:20px;margin:24px 0 8px;font-weight:600}
p{margin:0 0 15px}
ul,ol{margin:0 0 15px 22px;padding:0}
li{margin-bottom:7px}
.lede{font-size:19px;color:var(--ink-2);max-width:58ch;line-height:1.6}
.small{font-size:14.5px}
.mute{color:var(--mute)}
.mono{font-family:var(--mono)}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 12px;border-radius:6px;z-index:50}
.skip:focus{left:8px}

/* ---------------------------------------------------------------- header */
header.site{background:rgba(255,255,255,.86);backdrop-filter:blur(10px);position:sticky;top:0;z-index:20;
  border-bottom:1px solid rgba(227,233,242,.8)}
header.site .wrap{max-width:1260px}
header.site .bar{display:flex;align-items:center;gap:14px;padding:12px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:42px;width:auto;display:block}
nav.main{display:flex;gap:16px;flex-wrap:wrap;font-size:15px;margin-left:auto}
.navtoggle{position:absolute;width:1px;height:1px;margin:-1px;clip-path:inset(50%);overflow:hidden}
.navbtn{display:none;align-items:center;gap:8px;font-weight:600;font-size:14.5px;color:var(--ink-2);
  border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;background:#fff}
.navbtn .bars{width:16px;height:11px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}
.navbtn .bars::after{content:"";position:absolute;left:0;top:4px;width:100%;border-top:2px solid currentColor}
.navtoggle:focus-visible+.navbtn{outline:3px solid var(--brand);outline-offset:2px}
nav.main a{color:var(--ink-2);text-decoration:none;padding:6px 2px;border-bottom:2px solid transparent}
nav.main a:hover,nav.main a[aria-current]{color:var(--brand-dark);border-bottom-color:var(--brand)}

/* THE PHONE. Never hidden, never animated, never behind JS. See the header note. */
.tel{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;
  text-decoration:none;font-weight:600;padding:10px 18px;border-radius:999px;white-space:nowrap;font-size:15.5px;
  box-shadow:0 8px 20px -10px rgba(24,95,255,.7)}
.tel:hover{background:var(--brand-dark);color:#fff}
.tel svg{width:15px;height:15px;fill:currentColor;flex:0 0 15px}

.btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;font-weight:600;
  padding:14px 26px;border-radius:999px;font-size:16.5px;border:0;cursor:pointer;
  box-shadow:0 10px 26px -12px rgba(24,95,255,.75);transition:transform .12s ease,background .12s ease}
.btn:hover{background:var(--brand-dark);color:#fff;transform:translateY(-1px)}
.btn.ghost{background:#fff;color:var(--brand-dark);border:1.5px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--brand);background:var(--brand-tint)}
.btn.sm{padding:10px 18px;font-size:15px}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;align-items:center}
.cta .or{color:var(--mute);font-size:15px}

/* the review badge — a real figure, linked to the platform that holds it */
.rating{display:inline-flex;align-items:center;gap:10px;margin-top:20px;text-decoration:none;color:var(--ink-2);
  font-size:15px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px 9px 14px;box-shadow:var(--shadow-sm)}
.rating:hover{border-color:var(--brand);color:var(--ink)}
.rating.block{display:inline-flex;margin:6px 0 12px}
.rating b{color:var(--ink)}
.stars{display:inline-flex;gap:2px;flex:none}
.star{width:16px;height:16px;fill:#F5A623}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;padding:64px 0 56px;overflow:hidden;
  background:
    radial-gradient(1100px 520px at 12% -10%,var(--brand-soft) 0%,rgba(228,236,255,0) 62%),
    radial-gradient(900px 520px at 100% 10%,#E9EFFF 0%,rgba(233,239,255,0) 60%),
    linear-gradient(180deg,var(--sky) 0%,#fff 100%)}
.hero::before{content:"";position:absolute;inset:auto -10% -55% -10%;height:70%;background:#fff;border-radius:50% 50% 0 0/100% 100% 0 0}
.hero .wrap{position:relative}
.hero .lede{margin-top:18px}
.hero.split .wrap{display:grid;gap:40px;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
.hero .art img{border-radius:var(--r);box-shadow:var(--shadow)}

/* the floating portraits — the client's own "flyers", with their names on the photos */
.pets{position:relative;min-height:480px;margin-bottom:16px}
.pets img{position:absolute;width:38%;max-width:210px;aspect-ratio:.78;object-fit:cover;border-radius:46% 46% 46% 46%/34% 34% 34% 34%;
  border:6px solid #fff;box-shadow:var(--shadow);background:#fff}
.pets img:nth-child(1){left:8%;top:0;transform:rotate(-3deg)}
.pets img:nth-child(2){right:2%;top:12%;transform:rotate(3deg)}
.pets img:nth-child(3){left:0;bottom:4%;transform:rotate(2deg)}
.pets img:nth-child(4){right:10%;bottom:0;transform:rotate(-2deg);width:34%}
.pets .badge{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);background:#fff;border-radius:999px;
  padding:8px 18px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow);color:var(--ink-2);z-index:2;white-space:nowrap}

/* ---------------------------------------------------------------- blocks */
section.band{padding:56px 0}
.hero+section.band{padding-top:44px}
section.band.alt{background:var(--bg-2)}
section.band.sky{background:linear-gradient(180deg,#fff 0%,var(--sky) 100%)}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 26px;box-shadow:var(--shadow-sm)}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
.card h3 a{text-decoration:none;color:var(--ink)}
.card h3 a:hover{color:var(--brand-dark)}

.two{display:grid;gap:44px;grid-template-columns:minmax(0,1fr) minmax(320px,460px);align-items:start}
.two.wide{grid-template-columns:1fr}
.feature{display:grid;gap:44px;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center}
.feature img{border-radius:var(--r);box-shadow:var(--shadow);width:100%}
.ticks{list-style:none;margin:18px 0 26px;padding:0;display:grid;gap:12px}
.ticks li{padding-left:34px;position:relative;font-weight:600;font-size:17px;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:var(--green-soft)}
.ticks li::after{content:"";position:absolute;left:8px;top:7px;width:5px;height:10px;border:solid var(--green);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.ticks li a{color:inherit}

/* testimonials: photo on top, rounded card, like theirs */
.quotes{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.q{display:flex;flex-direction:column}
.q h3{margin:0 0 10px;font-size:19px}
.q p{color:var(--ink-2);font-size:16px;flex:1}
.q footer{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--mute)}
.q footer img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;background:var(--brand-tint)}
.q footer>span{display:flex;flex-direction:column}
.q footer b{color:var(--ink);font-size:15px}
.q.grev .stars{margin-bottom:10px}
.q.grev .ph{width:52px;height:52px;border-radius:50%;background:var(--brand-tint);flex:none}
.q.grev footer a{color:var(--ink);text-decoration:none}
.q.grev footer a:hover{text-decoration:underline}
.revattr{margin-top:16px}

/* the three steps, as three cards with the picture on top */
.steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:24px}
.steps.big{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.steps li{counter-increment:s;margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-sm);position:relative;display:flex;flex-direction:column}
.steps li>div{display:flex;flex-direction:column;flex:1}
.steps li img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;margin:0;border-radius:0}
.steps li h3{margin:18px 22px 6px;font-size:19px}
.steps li p{margin:0 22px 22px;color:var(--ink-2);font-size:15.5px}
.steps li::before{content:counter(s);position:absolute;left:16px;top:16px;width:36px;height:36px;border-radius:50%;
  background:var(--brand);color:#fff;font-weight:700;display:grid;place-items:center;font-size:15px;box-shadow:var(--shadow-sm)}

/* founder */
.founder figure{margin:0;display:grid;gap:36px;grid-template-columns:220px 1fr;align-items:center;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:34px 38px;box-shadow:var(--shadow-sm)}
.founder img{border-radius:50%;aspect-ratio:1;object-fit:cover;object-position:top;width:220px;border:8px solid var(--brand-tint)}
.founder blockquote{margin:0;font-size:20px;line-height:1.6;color:var(--ink-2)}
.founder figcaption{margin-top:14px;font-size:15px;color:var(--mute)}

/* gallery — the flyers, as round tiles */
.gallery{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr))}
.gallery img{border-radius:40%;aspect-ratio:1;object-fit:cover;width:100%;border:5px solid #fff;box-shadow:var(--shadow-sm);background:#fff}

address{font-style:normal;margin:0 0 18px;line-height:1.6}
.fig{margin:22px 0}
.fig img{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px}
.fig.pair{display:flex;gap:14px;flex-wrap:wrap}
.fig figcaption{flex-basis:100%;font-size:14px;color:var(--mute);margin-top:6px}
.measure{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));margin:18px 0}
.measure .m{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-sm)}
.measure .m img{background:#fff;border-radius:10px;max-height:150px;width:auto}
.measure .m h3{margin-top:10px}
.pull{margin:18px 0;padding:18px 22px;border-left:4px solid var(--brand);background:var(--brand-tint);border-radius:0 14px 14px 0;color:var(--ink-2);font-size:16.5px}

/* ---------------------------------------------------------------- tables */
.tw{overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:14px;background:#fff}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--bg-2);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.num{font-family:var(--mono);white-space:nowrap}

/* ---------------------------------------------------------------- notes */
.note{border-left:4px solid var(--brand);background:var(--brand-tint);padding:16px 20px;margin:20px 0;border-radius:0 14px 14px 0}
.note.warn{border-left-color:var(--amber);background:var(--warm)}
.note p:last-child{margin-bottom:0}
.note b{color:var(--ink)}
.srclist{border-top:1px solid var(--line);margin-top:32px;padding-top:16px;font-size:14.5px;color:var(--mute)}
.srclist h2{font-size:14px;margin:0 0 8px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.srclist li{margin-bottom:6px}

/* ---------------------------------------------------------------- faq */
.faq{background:var(--bg-2)}
details{border:1px solid var(--line);border-radius:16px;padding:0;margin-bottom:10px;background:#fff;box-shadow:var(--shadow-sm)}
details summary{cursor:pointer;padding:16px 20px;font-weight:600;list-style:none;font-size:16.5px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";float:right;color:var(--brand);font-weight:400;font-size:24px;line-height:1}
details[open] summary::after{content:"\2212"}
details .a{padding:0 20px 18px;color:var(--ink-2)}
details .a p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- finder */
.calc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow-sm)}
.finder{margin-bottom:34px;background:linear-gradient(180deg,#fff,var(--sky))}
.calc .fields{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));align-items:end}
/* each field is a column: the label block grows, so every input lands on the same line
   however long its hint runs. */
.calc .fields>div{display:flex;flex-direction:column;height:100%}
.calc label{display:block;font-weight:600;font-size:14.5px;margin-bottom:8px;flex:1}
.calc .hint{font-weight:400;color:var(--mute);font-size:13.5px;display:block;margin-top:3px;line-height:1.45}
.calc input,.calc select{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:16px;background:#fff;color:var(--ink)}

/* ---------------------------------------------------------------- the quote form */
.qform{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.qform .fh{margin:0 0 6px;font-size:22px}
.qform fieldset{border:0;padding:0;margin:14px 0 0}
.qform legend{font-weight:700;font-size:15px;color:var(--ink);margin-bottom:8px;padding:0}
.qform .row{display:grid;gap:12px}
.qform .g2{grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr))}
.qform .g3{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.qform label{display:block;font-weight:600;font-size:14px;margin-bottom:10px}
.qform label i{color:var(--red);font-style:normal}
.qform label small{display:block;font-weight:400;color:var(--mute);font-size:12.5px}
.qform input,.qform select,.qform textarea{display:block;width:100%;margin-top:5px;padding:10px 12px;border:1.5px solid var(--line);
  border-radius:12px;font:inherit;font-size:15.5px;background:#fff;color:var(--ink)}
.qform .lbl{font-weight:600;font-size:14px;margin:0 0 6px}
.qform .choices label{font-weight:400;display:flex;gap:8px;align-items:flex-start;margin-bottom:6px}
.qform .choices input,.qform .chk input{width:auto;margin:3px 0 0;display:inline-block}
.qform .chk{font-weight:400;display:flex;gap:8px;align-items:center}
.qform .consent{font-size:12.5px;color:var(--mute);margin:14px 0}
.qform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:.01}

/* ---------------------------------------------------------------- kennel guide */
.series{display:grid;gap:26px;grid-template-columns:170px 1fr;align-items:start;padding:28px;margin:18px 0;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.series .pic img{border-radius:16px;background:#fff}
.series h3{margin-top:0}
.series .band-note{font-weight:600;color:var(--ink)}
.series .prod{margin:8px 0 4px;font-weight:600}
.series .dims{font-family:var(--mono);font-weight:400;color:var(--mute);font-size:14px}
.kit{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14.5px}
.kit li{margin:0}
.legal-text h2{font-size:19px;margin-top:30px}
.legal-text p{font-size:15.5px}

/* ---------------------------------------------------------------- related */
.related{background:var(--brand-tint);border-radius:var(--r);padding:24px 28px;margin:44px 0 0}
.related h2{margin:0 0 10px;font-size:18px}
.related ul{margin:0;padding-left:20px;columns:2;column-gap:28px}
.related li{break-inside:avoid}

/* ---------------------------------------------------------------- footer */
footer.site{background:#0F1A2E;color:#C3CDDB;padding:56px 0 30px;font-size:15px;margin-top:20px}
footer.site a{color:#9DBEFF}
footer.site .cols{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
footer.site h3{color:#fff;font-size:14px;margin:0 0 12px;text-transform:uppercase;letter-spacing:.08em}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:7px}
footer.site .legal{border-top:1px solid #1E2A3C;margin-top:32px;padding-top:18px;color:#7C8BA1;font-size:13.5px}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------------------------------------------------------------- breakpoints */
/* Between ~1000 and 1150 the six nav items, the logo, the quote button and the phone stop
   fitting on one row. The quote button is the thing that goes: the hero carries a large one
   on every page, and the phone number never moves. */
@media (max-width:1150px) and (min-width:1001px){.btn.sm{display:none}}
@media (min-width:1001px){header.site .bar{flex-wrap:nowrap}nav.main{gap:15px;font-size:14.5px;white-space:nowrap}.btn.sm{white-space:nowrap}}
@media (max-width:1000px) and (min-width:761px){
  nav.main{order:3;width:100%;margin-left:0;gap:16px;font-size:14.5px;justify-content:center;
    padding-top:8px;border-top:1px solid var(--line)}
  .btn.sm{margin-left:auto;white-space:nowrap}
}
@media (max-width:860px){
  .hero.split .wrap{grid-template-columns:1fr}
  .pets{min-height:300px;max-width:420px}
  .two,.feature{grid-template-columns:1fr}
  .founder figure{grid-template-columns:1fr;justify-items:start;padding:26px}
  .series{grid-template-columns:1fr}
  .series .pic img{max-width:180px}
  .related ul{columns:1}
}
@media (max-width:760px){
  body{font-size:16.5px}

  /* Header: one compact row — logo, the phone, and a menu button. The seven nav links used to
     wrap onto three rows and eat the whole first screen before the headline started. They now
     sit behind the button, toggled by a checkbox, so there is still no JavaScript on this site.
     THE PHONE IS NOT IN THE MENU. It stays on the row, visible, at every width — audit C1. */
  header.site .bar{gap:10px;padding:9px 0;flex-wrap:wrap}
  .brand{order:1}
  .brand img{height:30px}
  .tel{order:2;margin-left:auto;font-size:14px;padding:9px 13px;gap:6px}
  .navbtn{order:3;display:inline-flex;padding:9px 12px}
  /* Under ~430px the three controls stop fitting side by side, and a header that wraps to two
     rows is the thing this rewrite exists to remove. The word goes, the icon and its accessible
     name stay, and the phone number is never the thing that shrinks away. */
  @media (max-width:430px){
    .navbtn-t{display:none}
    .navbtn{padding:10px 11px}
    header.site .bar{gap:8px}
    .tel{font-size:13.5px;padding:9px 11px}
    .brand img{height:27px}
  }
  nav.main{order:4;display:none}
  .navtoggle:checked~nav.main{display:flex;width:100%;flex-direction:column;gap:0;margin:6px 0 2px;
    padding-top:6px;border-top:1px solid var(--line);font-size:16px}
  .navtoggle:checked~nav.main a{padding:11px 2px;border-bottom:0}
  .btn.sm{display:none}   /* the quote button folds away; the phone number never does */

  /* Hero: fewer, shorter lines, then the dogs — they are the reason the old site felt warm,
     and on a phone they were three screens down. */
  .hero{padding:28px 0 30px}
  h1{font-size:clamp(29px,7.8vw,42px)}
  .hero .lede{font-size:16.5px;margin-top:14px}
  .cta{margin-top:22px;gap:10px}
  .cta .btn{width:100%;text-align:center}
  .cta .or{display:none}
  .cta .tel{order:0;width:100%;justify-content:center;margin-left:0;font-size:16px;padding:13px 20px}
  .rating{margin-top:16px;width:100%;justify-content:center;font-size:13.5px;padding:10px 14px;gap:8px;text-align:center}
  .rating .star{width:14px;height:14px}

  .pets{position:static;min-height:0;margin:26px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .pets img,.pets img:nth-child(1),.pets img:nth-child(2),.pets img:nth-child(3),.pets img:nth-child(4){
    position:static;width:100%;max-width:none;transform:none;border-width:4px;aspect-ratio:.82;inset:auto}
  .pets .badge{position:static;transform:none;grid-column:1/-1;justify-self:center;box-shadow:var(--shadow-sm)}

  section.band{padding:38px 0}
  .hero+section.band{padding-top:32px}
  h2{font-size:clamp(23px,6vw,30px)}
  .feature,.two{gap:26px}
  .card{padding:20px}
  .series{padding:20px}
  .related{padding:20px}
  .qform{padding:18px}
  footer.site{padding:40px 0 26px}
}

/* ---------------------------------------------------------------- destination cards
   The whole card is the link, so the target is the card and not a four-word heading. Facts are
   classified chips rather than a truncated regulation: a person scanning six destinations wants
   "titer test required", not half a sentence with an ellipsis. A fact is only shown when the
   profile's wording is unambiguous - see chips_for() in pages_countries.py. */
.dgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));margin:22px 0 8px}
.dcard{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:18px 20px 16px;text-decoration:none;color:inherit;position:relative;
  box-shadow:0 1px 2px rgba(16,23,36,.04);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.dcard:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:var(--shadow)}
.dcard:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.dc-top{display:flex;align-items:center;gap:10px}
.dc-region{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.dc-go{margin-left:auto;color:var(--brand);font-size:18px;line-height:1;opacity:.35;
  transition:opacity .16s ease,transform .16s ease}
.dcard:hover .dc-go{opacity:1;transform:translateX(3px)}
.dc-name{font-size:20px;font-weight:600;letter-spacing:-.02em;color:#1B2436;line-height:1.15}
.dcard:hover .dc-name{color:var(--brand-dark)}
.dc-chips{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.chip{display:inline-flex;align-items:flex-start;gap:7px;font-size:13.5px;line-height:1.35;color:var(--ink-2)}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;margin-top:6px;background:var(--mute)}
.chip.yes::before{background:var(--green)}
.chip.no::before{background:var(--mute)}
.chip.warn::before{background:#F5A623}
.chip.maybe::before{background:var(--brand)}
.chip.info::before{background:var(--line);box-shadow:inset 0 0 0 1.5px var(--mute)}
.dc-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mute)}
.dc-foot.stale{color:var(--amber)}
@media (prefers-reduced-motion:reduce){.dcard,.dc-go{transition:none}.dcard:hover{transform:none}}
@media (max-width:520px){.dgrid{grid-template-columns:1fr}}

/* the destinations hub, grouped by region */
.rjump{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.rjump a{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;
  text-decoration:none;color:var(--ink-2);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:7px 14px}
.rjump a:hover{border-color:var(--brand);color:var(--brand-dark)}
.rjump a span{font-weight:600;font-size:12px;color:var(--mute)}
.rhead{font-size:22px;margin:34px 0 2px;scroll-margin-top:80px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rhead span{font-size:13px;font-weight:600;color:var(--mute);letter-spacing:0}

/* ---------------------------------------------------------------- destination search */
.dfind{margin:20px 0 6px;display:flex;flex-direction:column;gap:12px}
.dfind-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dfind-row.chips{gap:8px}
.dfind-box{display:flex;align-items:center;gap:10px;flex:1;min-width:260px;background:#fff;
  border:1.5px solid var(--line);border-radius:999px;padding:0 16px;height:48px;
  transition:border-color .15s ease,box-shadow .15s ease}
.dfind-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}
.dfind-box svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--mute);stroke-width:2;stroke-linecap:round}
.dfind-box input{flex:1;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--ink);
  min-width:0;-webkit-appearance:none;appearance:none}
.dfind-box input::-webkit-search-cancel-button{display:none}
.dfind-box button{border:0;background:none;color:var(--mute);font-size:22px;line-height:1;cursor:pointer;padding:0 2px}
.dfind-box button:hover{color:var(--ink)}
.dfind-count{font-size:14px;color:var(--mute);white-space:nowrap;font-weight:600}
.fchip{font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);background:#fff;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;display:inline-flex;align-items:center;gap:7px;
  transition:border-color .15s ease,background .15s ease,color .15s ease}
.fchip:hover{border-color:var(--brand);color:var(--brand-dark)}
.fchip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.fchip span{font-size:12px;color:var(--mute)}
.fchip.on span{color:rgba(255,255,255,.75)}
.dempty{background:var(--brand-tint);border-radius:12px;padding:18px 20px;margin:20px 0;color:var(--ink-2)}
@media (max-width:560px){
  .dfind-count{width:100%;order:3}
  .dfind-row.chips{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .fchip{white-space:nowrap}
}

.findbox{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 26px;box-shadow:var(--shadow-sm)}
.findbox p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- the quote form
   This is the page that earns the money, so the form is the main column and the reassurance sits
   beside it in a sticky rail rather than above it, where it scrolled out of sight long before
   anyone reached the submit button. */
.qwrap{background:var(--bg-2)}
.qgrid{display:grid;gap:32px;grid-template-columns:minmax(0,1.55fr) minmax(280px,.85fr);align-items:start}
.qside{position:sticky;top:88px;display:flex;flex-direction:column;gap:16px}
.qcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px;box-shadow:var(--shadow-sm)}
.qcard.alt{background:var(--brand-tint);border-color:transparent;box-shadow:none}
.qcard h2{font-size:20px;margin:0 0 14px}
.qcard h3{font-size:16px;margin:0 0 8px}
.qcard p:last-child{margin-bottom:0}
.qsteps{list-style:none;counter-reset:qs;margin:0 0 16px;padding:0}
.qsteps li{counter-increment:qs;display:grid;grid-template-columns:26px 1fr;gap:2px 12px;margin-bottom:14px}
.qsteps li::before{content:counter(qs);grid-row:span 2;width:26px;height:26px;border-radius:50%;
  background:var(--brand-tint);color:var(--brand-dark);font-size:13px;font-weight:700;
  display:grid;place-items:center}
.qsteps b{font-size:15px}
.qsteps span{font-size:13.5px;color:var(--mute);line-height:1.45}
.qcall{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--mute);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.trust{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:22px 0 0;padding:0;font-size:15px;color:var(--ink-2)}
.trust li{display:flex;align-items:center;gap:9px;margin:0}
.trust li::before{content:"";width:18px;height:18px;border-radius:50%;flex:none;background:var(--green-soft);
  box-shadow:inset 0 0 0 2px var(--green)}

.qform{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 30px;box-shadow:var(--shadow-sm)}
.qform .fh{font-size:22px;margin:0 0 22px}
.qform .fs{border:0;padding:0;margin:0 0 26px}
.qform .fs:last-of-type{margin-bottom:18px}
.qform legend{display:flex;align-items:center;gap:11px;padding:0;margin-bottom:14px;width:100%}
.qform legend b{width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;flex:none;
  display:grid;place-items:center;font-size:14px;font-weight:700}
.qform legend span{font-size:17px;font-weight:600;color:#1B2436}
.qform .fnote,.qform .fsub{font-size:13.5px;color:var(--mute);margin:-4px 0 14px}
.qform .fsub{margin-top:18px}
.qform .grid2,.qform .grid3{display:grid;gap:16px}
/* the measurement row carries two-line hints, so the row after it needs room to breathe */
.qform .grid3.meas{margin-bottom:20px}
.qform .grid3.meas .f small{min-height:2.5em}
.qform .grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.qform .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.qform .f{display:block;font-weight:600;font-size:14px;color:var(--ink-2);margin-bottom:16px}
.qform .grid2 .f,.qform .grid3 .f{margin-bottom:0}
.qform .f i{color:var(--red);font-style:normal;margin-left:2px}
.qform .f small{display:block;font-weight:400;color:var(--mute);font-size:12.5px;margin-top:6px;line-height:1.4}
.qform input,.qform select,.qform textarea{display:block;width:100%;margin-top:7px;padding:11px 13px;
  border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:15.5px;background:#fff;color:var(--ink);
  transition:border-color .14s ease,box-shadow .14s ease}
.qform input:focus,.qform select:focus,.qform textarea:focus{outline:0;border-color:var(--brand);
  box-shadow:0 0 0 4px var(--brand-tint)}
.qform textarea{resize:vertical;min-height:96px}
.qform .lbl{font-weight:600;font-size:14px;color:var(--ink-2);margin:0 0 10px}

/* the four "top concern" options — their own words, as things you click rather than dots */
.picks{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:20px}
.pick{position:relative;display:block;cursor:pointer;margin:0}
.pick input{position:absolute;opacity:0;width:0;height:0;margin:0}
.pick span{display:block;border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;font-size:14.5px;
  font-weight:600;color:var(--ink-2);background:#fff;transition:border-color .14s ease,background .14s ease}
.pick em{display:block;font-style:normal;font-weight:400;font-size:13px;color:var(--mute);margin-top:3px;line-height:1.4}
.pick:hover span{border-color:var(--brand)}
.pick input:checked+span{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-dark)}
.pick input:focus-visible+span{outline:3px solid var(--brand);outline-offset:2px}

.fsend{border-top:1px solid var(--line);padding-top:20px}
.fsend .btn{width:100%;font-size:17px;padding:15px 26px}
.qform .consent{font-size:12px;line-height:1.55;color:var(--mute);margin:14px 0 0}
.qform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:.01}

@media (max-width:980px){
  .qgrid{grid-template-columns:1fr}
  .qside{position:static;order:-1}
  .qcard.alt{display:none}      /* the same help sits inside the pet section on narrow screens */
}
@media (max-width:680px){
  .qform{padding:20px 18px;border-radius:14px}
  .qform .grid3,.qform .grid2,.picks{grid-template-columns:1fr}
  .qform .grid3,.qform .grid2{gap:0}
  .qform .grid3 .f,.qform .grid2 .f{margin-bottom:16px}
  .trust{gap:8px;font-size:14px}
}