/* ==========================================================================
   NX NOTORIOUS KENNELS
   nxkennels.com · built from scratch, nothing carried over

   THE THEME, as specified: black and white, white is the main colour.

     page background   white
     header            black
     footer            black
     card cover        black, and it carries the button
     buttons           black

   So the page reads white and open, and every structural element is a solid
   black block on it. No accent colour: a third hue would weaken the contrast
   the whole design is built on. Where emphasis is needed it comes from weight
   and from black-on-white inversion, never from colour.

   One stylesheet, mobile first, no framework and no build step.
   ========================================================================== */

/* ---- tokens ------------------------------------------------------------- */
:root {
  --black:     #0d0d0d;   /* not pure black; pure black on white vibrates */
  --black-2:   #1c1c1c;   /* raised surfaces on black */
  --ink:       #171717;   /* body text on white */
  --ink-soft:  #4a4a4a;
  --ink-mute:  #767676;   /* still passes 4.5:1 on white */
  --white:     #ffffff;
  --off:       #f6f6f6;   /* the only tint, for alternating bands */
  --line:      #e2e2e2;
  --line-dark: rgba(255,255,255,.16);

  --wrap: 1180px;
  --measure: 68ch;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --display: 'Oswald', 'Inter', Impact, sans-serif;

  --r: 4px;               /* nearly square. A Corso site should not look soft */
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 30px rgba(0,0,0,.07);
}

/* ---- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--black); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink-soft); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 .55em;
}
h1 { font-size: clamp(2rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.45rem, 3.8vw, 2.2rem); }
h3 { font-size: clamp(1.05rem, 2.4vw, 1.25rem); }
p, ul, ol { margin: 0 0 1.15em; }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: .4em; }
strong { font-weight: 600; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--black); color: #fff; padding: .7rem 1.1rem; }
.skip-link:focus { left: .5rem; top: .5rem; }
:focus-visible { outline: 3px solid var(--black); outline-offset: 2px; }

/* ==========================================================================
   HEADER — solid black
   ========================================================================== */
.site-header { background: var(--black); color: #fff; position: sticky; top: 0; z-index: 100; }
.site-header__inner {
  max-width: var(--wrap); margin: 0 auto; padding: .7rem 1.1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.site-logo { display: inline-flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; }
.site-logo img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; }
.site-logo span {
  font-family: var(--display); font-size: clamp(.95rem, 3.2vw, 1.2rem);
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em; line-height: 1.1;
}
.site-logo:hover span { color: #cfcfcf; }

.nav-desktop { display: none; }
.nav-list { list-style: none; margin: 0; padding: 0; }

.nav-burger {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; border: 1px solid var(--line-dark); color: #fff;
  font: 500 .9rem/1 var(--sans); text-transform: uppercase; letter-spacing: .06em;
  padding: .6rem .85rem; border-radius: var(--r); cursor: pointer;
}
.nav-burger:hover { background: rgba(255,255,255,.09); }
.nav-burger__bars { display: block; width: 17px; }
.nav-burger__bars span { display: block; height: 2px; background: currentColor; margin: 3px 0; transition: transform .18s, opacity .18s; }
.nav-burger[aria-expanded="true"] .nav-burger__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger__bars span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .nav-burger__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.nav-panel { position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.6); }
.nav-panel[hidden] { display: none; }
.nav-panel__inner {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 88vw);
  background: var(--black); color: #fff; padding: 1.1rem 1.2rem 2rem;
  overflow-y: auto; -webkit-overflow-scrolling: touch; animation: slidein .2s ease;
}
@keyframes slidein { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .nav-panel__inner { animation: none; } html { scroll-behavior: auto; } }

.nav-close { background: none; border: 0; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; padding: .1rem .4rem; margin: 0 0 .5rem auto; display: block; }

/* Explicit colour on every drawer link. A global ink rule once forced near
   black text onto a near black panel on another build and the menu vanished. */
.nav-list--mobile { border-top: 1px solid var(--line-dark); }
.nav-list--mobile > li { border-bottom: 1px solid var(--line-dark); margin: 0; }
.nav-list--mobile a {
  color: #fff; text-decoration: none; display: block; padding: .9rem .2rem;
  font-weight: 500; text-transform: uppercase; letter-spacing: .04em; font-size: .95rem;
}
.nav-list--mobile a:hover, .nav-list--mobile a[aria-current="page"] { color: #b9b9b9; }
.nav-list--mobile .nav-parent { display: flex; align-items: center; justify-content: space-between; }
.nav-list--mobile .nav-parent a { flex: 1; }
.nav-toggle { background: none; border: 0; color: inherit; cursor: pointer; padding: .7rem .5rem; display: inline-flex; align-items: center; }
.nav-toggle svg { transition: transform .18s; }
.nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-list--mobile .nav-sub { list-style: none; margin: 0 0 .5rem; padding: 0 0 0 .9rem; border-left: 2px solid var(--line-dark); display: none; }
.nav-list--mobile .nav-sub.is-open { display: block; }
.nav-list--mobile .nav-sub a { padding: .6rem .2rem; font-size: .88rem; opacity: .85; }
body.nav-open { overflow: hidden; }

@media (min-width: 900px) {
  .nav-burger { display: none; }
  .nav-panel { display: none !important; }
  .nav-desktop { display: block; }
  .nav-desktop .nav-list { display: flex; align-items: center; gap: .1rem; }
  .nav-desktop .nav-item { position: relative; margin: 0; }
  .nav-desktop .nav-item > a, .nav-desktop .nav-parent > a {
    display: block; padding: .6rem .75rem; color: #fff; text-decoration: none;
    font-size: .85rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em;
  }
  .nav-desktop .nav-item > a:hover, .nav-desktop .nav-parent > a:hover { color: #b9b9b9; }
  .nav-desktop .is-current > a, .nav-desktop .is-current > .nav-parent > a,
  .nav-desktop .is-ancestor > .nav-parent > a { color: #b9b9b9; }
  .nav-desktop .nav-parent { display: flex; align-items: center; }
  .nav-desktop .nav-toggle { padding: .55rem .25rem .55rem 0; color: #fff; }
  .nav-desktop .nav-sub {
    position: absolute; top: 100%; left: 0; min-width: 250px; list-style: none;
    margin: 0; padding: .35rem; background: var(--black-2);
    border: 1px solid var(--line-dark); border-radius: var(--r);
    box-shadow: 0 18px 40px rgba(0,0,0,.4);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .16s, transform .16s, visibility .16s;
  }
  /* The last two groups open leftwards. Pinned to left:0 they ran past the
     right edge of a 1024px screen and put a horizontal scrollbar on every
     page. Anchoring them to the right needs no width arithmetic and cannot
     drift when the menu changes again. */
  .nav-desktop .nav-list > li:last-child > .nav-sub,
  .nav-desktop .nav-list > li:nth-last-child(2) > .nav-sub { left: auto; right: 0; }
  .nav-desktop .nav-sub { max-width: calc(100vw - 2rem); }
  .nav-desktop .has-children:hover > .nav-sub,
  .nav-desktop .has-children:focus-within > .nav-sub { opacity: 1; visibility: visible; transform: none; }
  .nav-desktop .nav-sub li { margin: 0; }
  .nav-desktop .nav-sub a { display: block; padding: .6rem .7rem; color: #e8e8e8; text-decoration: none; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; border-radius: var(--r); }
  .nav-desktop .nav-sub a:hover { background: rgba(255,255,255,.1); color: #fff; }
}

/* ==========================================================================
   LAYOUT — white page, black blocks on it
   ========================================================================== */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.1rem; }
.band { padding: 2.8rem 0; background: var(--white); }
.band--tint { background: var(--off); }
.band--black { background: var(--black); color: #e8e8e8; }
.band--black h2, .band--black h3 { color: #fff; }
.band--black a { color: #fff; }
@media (min-width: 760px) { .band { padding: 3.6rem 0; } }

/* Reading measure, on prose only. Never on a wrapper that also holds a grid:
   a card grid inheriting a 68ch cap collapses to half width. */
.prose { max-width: var(--measure); }
.prose h2:not(:first-child) { margin-top: 1.7em; }

.note {
  font-size: .93rem; color: var(--ink-soft);
  background: var(--off); border-left: 3px solid var(--black);
  padding: .9rem 1.05rem;
}
.band--black .note { background: var(--black-2); border-left-color: #fff; color: #cfcfcf; }

/* ---- hero: black, full bleed ------------------------------------------- */
.hero { background: var(--black); color: #fff; padding: 3rem 0 3.2rem; }
.hero h1 { color: #fff; margin-bottom: .5rem; }
.hero .eyebrow {
  text-transform: uppercase; letter-spacing: .18em; font-size: .72rem;
  font-weight: 600; color: #a3a3a3; margin: 0 0 .9rem;
}
.hero .lede { font-size: clamp(1rem, 2.3vw, 1.15rem); color: #c9c9c9; max-width: 60ch; }
@media (min-width: 760px) { .hero { padding: 4.4rem 0 4.6rem; } }

.cta-line { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }

/* ---- buttons: black on white, white on black --------------------------- */
.btn {
  display: inline-block; background: var(--black); color: #fff;
  font: 600 .88rem/1 var(--sans); text-transform: uppercase; letter-spacing: .07em;
  padding: .95rem 1.5rem; border: 2px solid var(--black); border-radius: var(--r);
  text-decoration: none; text-align: center; transition: background .15s, color .15s;
}
.btn:hover { background: var(--white); color: var(--black); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost:hover { background: #fff; color: var(--black); border-color: #fff; }
/* on a white band a ghost button inverts the other way */
.band:not(.band--black) .btn--ghost { color: var(--black); border-color: var(--black); }
.band:not(.band--black) .btn--ghost:hover { background: var(--black); color: #fff; }
.btn--small { font-size: .78rem; padding: .7rem 1rem; width: 100%; }
.btn--disabled { background: var(--line); border-color: var(--line); color: var(--ink-mute); pointer-events: none; }

/* ---- the answer box ----------------------------------------------------- */
.answer {
  background: var(--white); border: 1px solid var(--line); border-left: 5px solid var(--black);
  padding: 1.2rem 1.3rem; max-width: 78ch; box-shadow: var(--shadow);
}
.answer p:last-child { margin-bottom: 0; }

/* ---- stats -------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin-top: 1.3rem; }
.stat { background: var(--black); color: #fff; padding: .95rem 1.05rem; }
.stat__k { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: #9a9a9a; font-weight: 600; margin-bottom: .25rem; }
.stat__v { display: block; font-family: var(--display); font-size: 1.05rem; font-weight: 600; text-transform: uppercase; }

.crumbs { max-width: var(--wrap); margin: 0 auto; padding: .85rem 1.1rem 0; font-size: .8rem; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .05em; }
.crumbs a { color: var(--ink-mute); }
.crumbs span { margin: 0 .3rem; }

/* ==========================================================================
   PUPPY CARDS — white photo, BLACK COVER carrying the detail and the button

   Two across on a phone. One per row pushes the third dog below two screens
   of scrolling and buyers stop before they reach it.
   ========================================================================== */
.pups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1.7rem; }
@media (min-width: 700px)  { .pups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; } }
@media (min-width: 1000px) { .pups { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.3rem; } }

.pup { background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; transition: transform .18s, box-shadow .18s; }
.pup:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
/* THE WHOLE DOG IS VISIBLE.

   A 1:1 box with object-fit:cover cropped the top and bottom off every
   photograph, which on portrait shots of a sitting puppy meant cutting the
   head or the feet. The source images are 864x1080, so the frame is 4:5 to
   match, and `contain` guarantees nothing is ever cut even when a photo comes
   in at a different ratio. */
.pup__media { display: block; position: relative; background: var(--off); }
.pup__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  object-position: center;
}

/* THE BLACK COVER: everything below the photograph */
.pup__body { background: var(--black); color: #fff; padding: .85rem .85rem 1rem; display: flex; flex-direction: column; flex: 1; }
.pup__name { font-family: var(--display); font-size: 1.1rem; color: #fff; margin: 0 0 .1rem; text-transform: uppercase; }
.pup__color { font-size: .74rem; color: #a8a8a8; text-transform: uppercase; letter-spacing: .09em; margin: 0 0 .3rem; }
.pup__spec { font-size: .8rem; color: #c9c9c9; margin: 0 0 .35rem; }

/* Ears, with the other facts about the dog. A filled marker for cropped and an
   outlined one for natural, so the split is scannable down a grid without
   reading every card. */
.pup__ear {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  margin: 0 0 .6rem; display: inline-flex; align-items: center; gap: .35rem;
}
.pup__ear::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none;
}
.pup__ear--cropped { color: #fff; }
.pup__ear--cropped::before { background: #fff; }
.pup__ear--natural { color: #a8a8a8; }
.pup__ear--natural::before { border: 1px solid #a8a8a8; }
.pup__price { font-family: var(--display); font-size: 1.25rem; color: #fff; margin: 0 0 .75rem; }
.pup__cta { margin: auto 0 0; }
.pup__body .btn { background: #fff; color: var(--black); border-color: #fff; }
.pup__body .btn:hover { background: transparent; color: #fff; }

.pup__reserved { position: absolute; inset: auto 0 0 0; background: rgba(0,0,0,.9); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: .4rem 0; }
.pup.is-reserved .pup__media img { filter: grayscale(1) brightness(.85); }

.viewall { margin-top: 1.4rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; font-size: .85rem; }

/* ==========================================================================
   FOOTER — solid black
   ========================================================================== */
.site-footer { background: var(--black); color: #a8a8a8; }
.site-footer a { color: #e0e0e0; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__inner { max-width: var(--wrap); margin: 0 auto; padding: 2.8rem 1.1rem 1.9rem; display: grid; grid-template-columns: 1fr; gap: 1.9rem; }
@media (min-width: 620px)  { .site-footer__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .site-footer__inner { grid-template-columns: 1.6fr repeat(3, 1fr); } }
.foot-about { font-size: .9rem; }
.foot-name { font-family: var(--display); font-size: 1.15rem; color: #fff; text-transform: uppercase; margin: 0 0 .6rem; }
.foot-col h3 { font-family: var(--sans); font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: #fff; margin: 0 0 .75rem; font-weight: 600; min-height: 1px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; font-size: .87rem; }
.foot-col li { margin-bottom: .4rem; }
.site-footer__legal { border-top: 1px solid var(--line-dark); padding: 1rem 1.1rem; text-align: center; font-size: .78rem; color: #6e6e6e; }
.site-footer__legal p { margin: 0; }

/* ==========================================================================
   FORMS, TABLES, MISC
   ========================================================================== */
.form { max-width: 34rem; }
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .4rem; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: .8rem .85rem;
  border: 1px solid var(--ink-mute); border-radius: var(--r); background: #fff; color: var(--ink);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--black); outline: 2px solid var(--black); outline-offset: 1px; }
/* radios and checkboxes keep native rendering: stripping appearance on a
   generic field selector made them invisible on an earlier build */
.field input[type="radio"], .field input[type="checkbox"] { appearance: auto; -webkit-appearance: auto; width: auto; margin-right: .45rem; }
.field .hint { font-size: .84rem; color: var(--ink-mute); margin: .35rem 0 0; }
.field--hp { position: absolute; left: -9999px; }
.form-error, .form-ok { padding: .9rem 1.05rem; margin-bottom: 1.2rem; font-size: .93rem; border-left: 4px solid var(--black); background: var(--off); }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.4rem; }
table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: .93rem; }
th, td { text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--line); }
thead th { background: var(--black); color: #fff; font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }

.faq details { border-bottom: 1px solid var(--line); padding: .3rem 0; }
.faq summary { cursor: pointer; font-weight: 600; padding: .95rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: '\2013'; }

.linkgrid { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .5rem .9rem; font-size: .92rem; }
.linkgrid li { margin: 0; }

@media print { .site-header, .site-footer, .nav-panel, .cta-line { display: none; } body { font-size: 12pt; } }

/* ==========================================================================
   GUIDE PREVIEW CARDS

   Each carries the kennel mark, so the block reads as ours rather than as a
   generic list of links. The mark is the same logo as the header, small and
   circular, sitting above the title.
   ========================================================================== */
.guides {
  display: grid; grid-template-columns: 1fr; gap: .8rem; margin-top: 1.6rem;
}
@media (min-width: 620px)  { .guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px)  { .guides { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; } }

.guide {
  display: block; background: var(--white); border: 1px solid var(--line);
  padding: 1.15rem 1.2rem 1.25rem; text-decoration: none; color: var(--ink);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.guide:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--black); color: var(--ink); }
.guide__mark {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
  margin: 0 0 .7rem; border: 1px solid var(--line);
}
.guide__t {
  font-family: var(--display); font-size: 1.05rem; text-transform: uppercase;
  margin: 0 0 .35rem; color: var(--black);
}
.guide__d { font-size: .9rem; color: var(--ink-soft); margin: 0; }

/* ---- documentary photographs inside a band -----------------------------
   Used on the delivery page. contain rather than cover, same as the puppy
   cards, because cropping a handover photograph cuts the dog in half. */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .8rem; margin-top: 1.6rem; }
.shot { margin: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--white); }
.shot img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; object-position: center; background: var(--off); }
.shot figcaption { padding: .75rem .9rem; font-size: .86rem; line-height: 1.45; color: var(--ink-mute); border-top: 1px solid var(--line); }
@media (max-width: 620px) { .shots { grid-template-columns: 1fr; } }

/* ---- contract form -------------------------------------------------------
   /puppy-contract/ reuses .form from the contact page and adds grouping plus
   the signature canvas.

   The canvas is sized in CSS and re-backed at device pixel ratio by the script
   on the page, so the stored PNG is a real signature rather than a blurry
   upscale of a 900px bitmap. touch-action: none is what lets a finger draw on
   a phone instead of scrolling the page. */
.form fieldset {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.1rem 1.1rem .4rem; margin: 0 0 1.4rem;
}
.form legend {
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  letter-spacing: .02em; text-transform: uppercase; padding: 0 .5rem;
}
.form .hint { display: block; font-size: .84rem; color: var(--ink-mute); line-height: 1.5; margin: .35rem 0 0; }
.form fieldset > .hint { margin: 0 0 .9rem; }
.form .field label input[type="radio"] { margin-right: .5rem; }

.sigwrap {
  position: relative; border: 1px dashed var(--line);
  border-radius: var(--r); background: #fff; overflow: hidden;
}
.sigpad {
  display: block; width: 100%; height: 200px;
  touch-action: none; cursor: crosshair; background: #fff;
}
.sigpad__hint {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-size: .95rem; color: var(--ink-mute); pointer-events: none;
}
@media (max-width: 620px) { .sigpad { height: 160px; } }