/* The desktop photograph is top-aligned so the dog's head is never cropped. */
.hero{background-position:center,center top}

/* Brand artwork is never cover-cropped, unlike photographic imagery. */
.difference-photo{
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  background-color:#505c49;
}
.wordmark img{object-fit:contain;border-radius:4px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.back-to-top{display:inline-flex;align-items:center;gap:6px;color:#f1e5ca!important;text-decoration:none;font-weight:700;font-size:1rem!important;white-space:nowrap;border-bottom:1px solid #b59b72;padding-bottom:3px}
.back-to-top:hover{color:#fff!important;border-color:#fff}

/* Comfortable reading sizes across the entire desktop site. */
body{font-size:18px}
.nav a{font-size:.95rem;letter-spacing:.055em}
.nav .btn,.btn{font-size:.95rem}
.eyebrow,.small-caps{font-size:.81rem}
.hero p,.intro p,.section-heading p,.about p,.difference-copy p,.card p{font-size:1.07rem}
.package p{font-size:1.02rem}
.package li{font-size:1.05rem;line-height:1.58}
.included{font-size:1rem}
.point strong{font-size:1.03rem}
.point small{font-size:1.05rem;line-height:1.5}
.policy h3{font-size:1.04rem}
.policy p,.faq p,.note,.footer p,.footer a{font-size:1.05rem;line-height:1.65}
.faq summary{font-size:1.04rem}
.time-row{font-size:1rem}
@media(min-width:701px) and (max-width:1050px){
  .nav{gap:12px}
  .nav a{font-size:.78rem;letter-spacing:.035em}
  .nav .btn{padding:11px 13px}
  .wordmark strong{font-size:1.18rem}
}

/* Match the bottom callout baseline across both package cards on desktop. */
@media(min-width:701px){
  .package{display:flex;flex-direction:column}
  .package .included{margin-top:auto}
}

/* Narrow screens use a dedicated image panel above the copy. */
@media(max-width:700px){
  .hero{display:block;min-height:0;background:var(--deep)}
  .hero::before{content:'';display:block;height:clamp(235px,70vw,365px);background:url('assets/hero.png') 69% top/cover no-repeat}
  .hero-inner{padding:37px 0 44px}
  .hero h1{font-size:clamp(2.8rem,10.5vw,4.5rem);margin:18px 0}
  .hero-bottom{position:relative;background:#263225}
}

/* Mobile reading sizes: no tiny captions or compressed service lists. */
@media(max-width:700px){
  .about-panel{display:none}
  .founder-signature{font-size:1.38rem!important;line-height:1.32;margin-top:20px}
  .founder-signature span{display:block;white-space:nowrap}
  body{font-size:18px;line-height:1.68}
  .topbar{font-size:.7rem;letter-spacing:.09em;line-height:1.5}
  .wordmark span{font-size:.64rem;letter-spacing:.12em}
  .nav a{font-size:.92rem}
  .eyebrow,.small-caps{font-size:.81rem;letter-spacing:.16em}
  .btn{font-size:1rem;line-height:1.4;min-height:52px;letter-spacing:.055em}
  .hero p,.intro p,.section-heading p,.about p,.difference-copy p,.card p{font-size:1rem}
  .package p{font-size:.98rem}
  .package li{font-size:1.06rem;line-height:1.6}
  .included{font-size:.89rem;line-height:1.55}
  .point strong{font-size:1rem}
  .point small{font-size:.94rem;line-height:1.5}
  .time-row{font-size:.95rem}
  .note,.policy p,.faq p,.footer p,.footer a{font-size:1.06rem;line-height:1.65}
  .policy h3{font-size:1.04rem}
  .faq summary{font-size:1rem;line-height:1.5}
  .footer-bottom{font-size:.84rem}
  .footer-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:22px;row-gap:28px}
  .footer-inner>div:first-child{grid-column:1/-1}
  .footer-inner>div{min-width:0}
  .footer-inner .small-caps{font-size:.75rem;letter-spacing:.11em}
  .footer-inner p,.footer-inner a{font-size:1rem;line-height:1.65}
}

/* Preserve every edge of the supplied white logo artwork in the founder section. */
.about-panel img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
}
.about-panel .stamp{
  position:static;
  display:table;
  margin:16px auto 0;
  transform:none;
  box-shadow:none;
  padding:12px 24px;
}

/* Center calls to action on phones without altering desktop alignment. */
@media(max-width:700px){
  .hero .actions{flex-direction:column;justify-content:center;align-items:center}
  .hero .actions .btn,
  .intro .btn,
  .card .btn,
  .final-cta .btn{
    display:flex;
    width:min(100%,340px);
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
  .hero-bottom .container{display:flex;flex-direction:column;align-items:center;gap:5px;padding:16px 0}
  .hero-bottom span{display:block;text-align:center;font-size:.9rem;line-height:1.55;letter-spacing:.08em}
  .hero-bottom b{font-size:1rem;margin-right:9px}
}