/* Buddy × Bones K9 Training. Luke's own look, lifted from his mockups: cream paper,
   rust and moss, black bands, Helvetica Neue at 900 with tight tracking, a rotated rust
   slab in every page header, and a rust "Ready." band to close. No webfont.

   Mobile first: the base rules are the 375px layout, wider screens add on top. */

:root{
  --black:#0a0a0a;
  --off:#f4f1ea;
  --warm:#e8dcc8;
  --rust:#c45c26;        /* big type and fills */
  --rust-ink:#a94c1d;    /* small text: 5.6:1 on white */
  --moss:#2d4a3e;
  --sage:#6b8f71;
  --white:#fff;
  --ink:#0a0a0a;
  --muted:#5d5a54;
  --line:#e6e2da;
  --line-dk:#d8d2c6;
  --shadow:0 8px 30px rgba(0,0,0,.06);
  --nav-h:60px;
  --gutter:8vw;
  --sans:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--off);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.menu-open{overflow:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
::selection{background:var(--rust);color:#fff}
:focus-visible{outline:3px solid var(--rust);outline-offset:3px}
[hidden]{display:none!important}
main:focus{outline:none}

/* skip link: first focusable element, visible only when focused */
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{position:fixed;left:12px;top:12px;z-index:120;background:var(--black);color:#fff;padding:12px 16px;font-size:14px}

/* -------------------------------------------------------------- type --- */
h1,h2,h3{font-weight:900;letter-spacing:-.04em;line-height:.9;color:inherit}
h2{font-size:clamp(2.6rem,7vw,5.5rem);letter-spacing:-.045em;line-height:.88;margin-bottom:28px}
h3{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;letter-spacing:-.03em;line-height:1;margin:40px 0 14px;color:var(--rust-ink)}
h2.h-sm{font-size:clamp(1.6rem,3vw,2.2rem);margin:36px 0 12px}
p{font-size:1.1rem;margin-bottom:18px;max-width:600px}
.lede{font-size:1.15rem;max-width:640px}
.note{font-size:.85rem;color:var(--muted);margin-top:8px}
.fine{font-size:.9rem;opacity:.85;margin-top:32px}
a.tel{white-space:nowrap}
strong{font-weight:700}

.btn{display:inline-block;background:var(--black);color:#fff;padding:16px 36px;text-decoration:none;font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:.85rem;margin-top:20px;border:0;cursor:pointer;font-family:var(--sans);min-height:48px;line-height:1.2}
.btn:hover{background:var(--moss)}
.btn:disabled{opacity:.6;cursor:default}

/* ------------------------------------------------------------ splash --- */
.splash{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12vh 6vw 10vh;background:var(--off);gap:clamp(36px,7vh,72px)}
.splash-word{color:var(--rust);text-transform:uppercase;font-size:clamp(3.4rem,15vw,7.2rem);line-height:.92;letter-spacing:-.03em;display:flex;flex-direction:column;align-items:center}
.splash-word span{display:block}
.splash-word .k9{font-size:.38em;font-weight:700;letter-spacing:.32em;margin-top:.5em;padding-left:.32em}
.nose{display:flex;flex-direction:column;align-items:center;gap:clamp(30px,6vh,64px);text-decoration:none;color:var(--sage);-webkit-tap-highlight-color:transparent}
.nose-art{position:relative;display:block;width:clamp(180px,48vw,300px);transform-origin:50% 62%;transition:transform .25s ease;will-change:transform}
.nose-art img{display:block;width:100%;height:auto}
.nose-art .nostril{position:absolute;transform-origin:50% 50%}
.nose:hover .nose-art,.nose:focus-visible .nose-art{transform:scale(1.04)}
/* twitch: a quick scrunch and shake of the whole nose; sniff: the nostrils flare twice while the nose lifts */
.nose-art.is-twitching{animation:nose-twitch .44s ease-in-out}
.nose-art.is-sniffing{animation:nose-lift .78s ease-in-out}
.nose-art.is-sniffing .nostril{animation:nose-sniff .78s ease-in-out}
@keyframes nose-twitch{0%{transform:rotate(0) scale(1)}22%{transform:rotate(-2.6deg) scale(1.02,.955)}52%{transform:rotate(1.9deg) scale(.99,1.02)}78%{transform:rotate(-.7deg) scale(1)}100%{transform:rotate(0) scale(1)}}
@keyframes nose-lift{0%{transform:translateY(0)}22%{transform:translateY(-3px) scale(1.01)}45%{transform:translateY(-1px)}65%{transform:translateY(-3px) scale(1.01)}100%{transform:translateY(0)}}
@keyframes nose-sniff{0%{transform:scale(1)}22%{transform:scale(1.15)}45%{transform:scale(1.03)}65%{transform:scale(1.13)}100%{transform:scale(1)}}
.nose-cta{font-size:clamp(.95rem,3vw,1.2rem);font-weight:700;letter-spacing:.32em;text-transform:uppercase;padding-left:.32em;color:#4f7a58}
.nose:focus-visible{outline-offset:12px}

/* --------------------------------------------------------------- nav --- */
.nav{position:sticky;top:0;z-index:50;background:var(--black);color:var(--off);min-height:var(--nav-h);display:flex;align-items:center;gap:18px;padding:0 var(--gutter);scroll-margin-top:0}
.brand{text-decoration:none;display:flex;flex-direction:column;line-height:1;color:var(--rust)}
.brand .bn{font-weight:900;font-size:1.25rem;letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap}
.brand .x{font-weight:900}
.brand .bk{font-size:.58rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;margin-top:5px;color:var(--off)}
.nav-phone{margin-left:auto;text-decoration:none;font-weight:700;font-size:.95rem;letter-spacing:.02em;white-space:nowrap;padding:10px 0}
.nav-links{display:none}
.nav-links a{text-decoration:none}
.nav-toggle{background:none;border:0;color:var(--off);font-family:var(--sans);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;padding:12px 0 12px 12px;cursor:pointer;min-height:44px}
.nav-toggle-close{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle-open{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle-close{display:inline}
/* the phone menu: a black panel of page names in the headline type */
.nav-links.open{display:flex;flex-direction:column;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;background:var(--black);padding:24px var(--gutter) 40px;gap:4px;overflow:auto}
.nav-links.open a{font-size:clamp(2.2rem,11vw,3.6rem);font-weight:900;letter-spacing:-.04em;line-height:1.05;padding:10px 0;border-bottom:1px solid #2a2a2a;color:var(--off)}
.nav-links.open a[aria-current="page"]{color:var(--rust)}

/* --------------------------------------------------------- page header --- */
.phead{min-height:65vh;display:flex;align-items:flex-end;padding:60px var(--gutter) 56px;background:var(--black);color:var(--off);position:relative;overflow:hidden}
.phead::before{content:"";position:absolute;top:-20%;right:-10%;width:55vw;height:120%;background:var(--rust);transform:rotate(12deg);z-index:0}
.phead .inner{position:relative;z-index:1;max-width:900px}
.phead h1{font-size:clamp(3.8rem,13vw,9rem);line-height:.85;margin-bottom:24px}
.phead.sm h1{font-size:clamp(3.4rem,11vw,8rem)}
.phead.tall{min-height:75vh}
.phead .tagline{font-size:1.1rem;max-width:520px;opacity:.9;margin:0}

/* -------------------------------------------------------------- bands --- */
.band{padding:clamp(64px,10vw,100px) var(--gutter)}
.band.alt{background:var(--white)}
.band.warm{background:var(--warm)}
.band.manifesto p{font-size:1.2rem;max-width:640px}
.band.doc p{max-width:640px}
.band[id]{scroll-margin-top:var(--nav-h)}

/* ----------------------------------------------------------- packages --- */
.packages{display:grid;grid-template-columns:1fr;gap:24px;margin:32px 0 16px;max-width:860px}
.package{background:var(--white);padding:40px 28px;border-top:6px solid var(--rust);box-shadow:var(--shadow)}
.package.premium{border-top-color:var(--moss)}
.package h3{margin-top:0}
.package p{font-size:1.05rem;margin-bottom:0}
.price{font-size:clamp(2.8rem,6vw,4.8rem);font-weight:900;letter-spacing:-.04em;line-height:.85;margin:8px 0 12px}
.price span{font-size:1rem;font-weight:600;display:block;margin-top:8px;letter-spacing:0;color:var(--rust-ink)}
.package .includes{margin-top:18px}

.offerings{display:grid;grid-template-columns:1fr;gap:0;margin:32px 0}
.offering{padding:40px 28px;background:var(--white);border:1px solid var(--black)}
.offering+.offering{border-top:0}
.offering.premium{background:var(--moss);color:var(--off);border-color:var(--moss)}
.offering h3{margin-top:0;color:inherit}
.offering .price span{color:inherit;font-weight:400}
.offering p{margin-bottom:0}

.price-block{background:var(--white);padding:44px 32px;margin:0 0 48px;max-width:580px;border-top:6px solid var(--rust);box-shadow:var(--shadow)}
.price-block .price{font-size:clamp(3.4rem,8vw,6rem);letter-spacing:-.045em;line-height:.82;margin:0}
.price-block .price span{font-size:1.2rem;margin-top:12px;letter-spacing:.02em}

ul.includes{list-style:none;max-width:560px;margin:16px 0 8px}
ul.includes li{padding:12px 0 12px 28px;border-bottom:1px solid var(--line);position:relative;font-size:1.05rem}
ul.includes li::before{content:"";position:absolute;left:0;top:1.35em;width:16px;height:3px;background:var(--rust)}
ul.includes li:last-child{border-bottom:0}
ul.includes.narrow{max-width:480px}
.offering ul.includes li,.premium ul.includes li{border-color:currentColor;opacity:.9}

.excerpt{background:var(--warm);padding:40px 28px;margin:0 0 32px;max-width:680px}
.excerpt h3{margin-top:0}
.excerpt p:last-child{margin-bottom:0}

/* ------------------------------------------------------------- doors --- */
.doors{display:grid;grid-template-columns:1fr;gap:20px;margin-top:8px}
.door{display:flex;flex-direction:column;background:var(--off);padding:32px 26px;border-top:6px solid var(--rust);text-decoration:none;box-shadow:var(--shadow);transition:transform .2s ease}
.door.premium{border-top-color:var(--moss)}
.door:hover{transform:translateY(-3px)}
.door h3{margin-top:0;font-size:clamp(2rem,5vw,2.8rem)}
.door p{font-size:1.05rem;margin-bottom:18px}
.door-price{margin-top:auto;display:flex;flex-direction:column;gap:4px}
.door-price strong{font-size:1.7rem;font-weight:900;letter-spacing:-.03em;line-height:1}
.door-price span{font-size:.95rem;color:var(--muted)}
.door-go{margin-top:22px;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rust-ink)}

/* ------------------------------------------------------------ extras --- */
.extras{display:grid;grid-template-columns:1fr;gap:16px;margin-top:28px;max-width:960px}
.extra{background:var(--off);padding:26px 24px;border-left:5px solid var(--rust)}
.extra h3{margin:0 0 6px;font-size:1.25rem;color:var(--ink)}
.extra-price{font-size:1.9rem;font-weight:900;letter-spacing:-.03em;line-height:1;margin-bottom:10px}
.extra p{font-size:1rem;margin:0;color:var(--muted)}

/* ------------------------------------------------------------ quotes --- */
.quotes{display:grid;grid-template-columns:1fr;gap:20px;max-width:1080px}
.quote{background:var(--off);padding:30px 26px;border-top:6px solid var(--moss)}
.quote blockquote p{font-size:1.05rem;margin-bottom:16px;max-width:none}
.quote figcaption{font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;color:var(--rust-ink)}
.more{margin-top:28px;font-weight:700}
.more a{color:var(--rust-ink)}

/* ------------------------------------------------------------- table --- */
.table-wrap{overflow-x:auto;margin:24px 0;-webkit-overflow-scrolling:touch}
table{width:100%;min-width:520px;border-collapse:collapse;font-size:.95rem}
th,td{padding:14px 12px;text-align:left;border-bottom:1px solid var(--line-dk);vertical-align:top}
thead th{font-weight:700;border-bottom:2px solid var(--black)}
tbody th{font-weight:600}
.compare-box{background:var(--black);color:var(--off);padding:48px 28px;margin:40px 0 8px}
.compare-box h3{margin-top:0;color:var(--off)}
.compare-box p{opacity:.95}
.compare-box p:last-child{margin-bottom:0}

/* ------------------------------------------------------------- photo --- */
.photo-wrap{padding:0 var(--gutter) clamp(64px,10vw,100px)}
.photo{width:100%;max-width:640px}

/* --------------------------------------------------------------- cta --- */
.cta{background:var(--rust);color:#fff;padding:clamp(72px,10vw,100px) var(--gutter)}
.cta h2{color:#fff;font-size:clamp(4rem,12vw,8rem);letter-spacing:-.05em;line-height:.82;margin:0 0 16px}
.cta p{font-size:1.2rem;margin-bottom:8px}
.cta .fine{font-size:.95rem;margin-top:32px;margin-bottom:0}

/* ----------------------------------------------------------- contact --- */
.contact-lines{display:grid;gap:22px;max-width:600px}
.contact-lines dt{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rust-ink);margin-bottom:4px}
.contact-lines dd{font-size:clamp(1.3rem,4.5vw,1.9rem);font-weight:800;letter-spacing:-.02em;line-height:1.2;overflow-wrap:anywhere}
.contact-lines dd a{text-decoration:none}
.contact-lines dd a:hover{color:var(--rust-ink)}

.form-band{position:relative}
.lead{display:grid;gap:18px;max-width:600px;margin-top:8px}
.field{display:grid;gap:6px}
.field label{font-size:.9rem;font-weight:700}
.field .opt{font-weight:400;color:var(--muted)}
.field .help{font-size:.85rem;color:var(--muted)}
.lead input,.lead select,.lead textarea{width:100%;min-height:50px;font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--white);border:2px solid var(--black);border-radius:0;padding:12px 14px}
.lead select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.lead input:focus,.lead select:focus,.lead textarea:focus{outline:none;border-color:var(--rust);box-shadow:0 0 0 3px rgba(196,92,38,.2)}
.lead textarea{resize:vertical;min-height:130px;line-height:1.5}
.lead .btn{justify-self:start;margin-top:4px}
.lead .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-consent{font-size:.85rem;color:var(--muted);line-height:1.55;max-width:none;margin:0}
.form-consent a{color:var(--rust-ink)}
.form-msg{font-size:.95rem;min-height:1px;margin:0}
.form-msg.err{color:var(--rust-ink);font-weight:700}
.form-done{background:var(--white);border-top:6px solid var(--moss);padding:32px 28px;max-width:600px;box-shadow:var(--shadow)}
.form-done h3{margin-top:0;color:var(--ink);font-size:2.4rem}
.form-done p{margin-bottom:0}

/* ------------------------------------------------------------ footer --- */
footer.site{background:var(--black);color:var(--off);padding:56px var(--gutter) 32px}
.foot-top{display:grid;gap:36px;margin-bottom:40px}
.foot-brand p{font-size:1rem;max-width:420px;margin:16px 0 0;opacity:.9}
.foot-contact a{text-decoration:none;font-weight:700}
.foot-contact a:hover{color:var(--rust)}
.foot-col h2{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rust);margin:0 0 12px;line-height:1.4}
.foot-col a{display:block;text-decoration:none;padding:6px 0;font-size:1rem}
.foot-col a:hover{color:var(--rust)}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;border-top:1px solid #2a2a2a;padding-top:20px;font-size:.85rem;opacity:.8}
.foot-legal a{text-decoration:none}

/* ----------------------------------------------------- 404 (static) --- */
.nf{padding:clamp(64px,10vw,100px) var(--gutter);min-height:70vh}

/* ---------------------------------------------------- reduced motion --- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
  .door:hover,.nose:hover .nose-art{transform:none}
  .nose-art.is-twitching,.nose-art.is-sniffing,.nose-art.is-sniffing .nostril{animation:none}
}

/* ----------------------------------------------------- 700px and up --- */
@media(min-width:700px){
  .phead{min-height:75vh;padding:60px var(--gutter) 80px}
  .phead.tall{min-height:85vh}
  .packages{grid-template-columns:1fr 1fr}
  .package{padding:48px 40px}
  .offerings{grid-template-columns:1fr 1fr}
  .offering{padding:48px 40px}
  .offering+.offering{border-top:1px solid var(--black);border-left:0}
  .offering.premium{border-color:var(--moss)}
  .price-block{padding:56px 48px}
  .doors{grid-template-columns:1fr 1fr;gap:24px}
  .door{padding:40px 34px}
  .extras{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr 1fr}
  .excerpt{padding:48px 40px}
  .compare-box{padding:60px 48px}
  .form-done{padding:40px}
  .foot-top{grid-template-columns:1.4fr 1fr 1fr}
  .lead{grid-template-columns:1fr 1fr}
  .lead .field.wide,.lead .field:has(textarea),.lead .field:has(select),.lead .btn,.lead .form-consent,.lead .form-msg{grid-column:1/-1}
}

/* ---------------------------------------------------- 1000px and up --- */
@media(min-width:1000px){
  .nav{gap:28px}
  .nav-links{display:flex;gap:26px;margin-left:8px}
  .nav-links a{font-weight:700;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;padding:10px 0;border-bottom:2px solid transparent}
  .nav-links a:hover,.nav-links a[aria-current="page"]{border-bottom-color:var(--rust)}
  .nav-toggle{display:none}
  .quotes{grid-template-columns:1fr 1fr 1fr}
  .doors{grid-template-columns:repeat(4,1fr)}
  .door h3{font-size:2rem}
  .extras{grid-template-columns:repeat(4,1fr)}
}