/* ── Self-hosted fonts (assets/fonts/, variable woff2) ─────────────────
   Replaces the fonts.googleapis.com @import: no third-party round trip,
   no visitor IPs to Google, and the remote faces hung document.fonts.ready
   on localhost (broke screenshot tooling). Weight ranges mirror the old
   import (Cormorant Garamond 400–600 + italic 400–500, Jost 300–600). */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ─── Tokens ──────────────────────────────────────────────── */
:root {
  --teal-dark:   #16314B;   /* deep navy — footer, dark bands, table headers */
  --teal:        #2C7CB5;   /* ocean blue — links, active states, buttons */
  --teal-mid:    #4FA0D8;   /* brighter accent */
  --teal-pale:   #E4EEF5;   /* pale blue tints, info fills */
  --brown:        #1E3A52;  /* brand wordmark text (navy in this theme) */
  --terra:        #2C7CB5;  /* single-accent theme: terra = blue (no gold) */
  --terra-light:  #7FC4E8;  /* eyebrows on dark backgrounds */
  --cream:        #F4F6F8;  /* page background (cool grey-white) */
  --white:        #FFFFFF;  /* pure white — text on dark surfaces */
  --ink:          #1A1A18;
  --ink-muted:    #6A6A60;
  --border:       #E3E7EA;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Jost', system-ui, sans-serif;

  --max-w: 1280px;
  --nav-h: 72px;
}

/* ─── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ─── Skip link (a11y) ──────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--c-accent-2);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 1000;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ─── Nav ─────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
  z-index: 100;
  transition: background 0.35s, box-shadow 0.35s;
}
.nav--scrolled {
  background: var(--c-surface);
  box-shadow: 0 1px 0 var(--c-border);
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 1;
}

.nav__logo {
  width: 52px;
  height: auto;
  overflow: hidden;
  flex-shrink: 0;
  transition: width 0.3s;
}
.nav--scrolled .nav__logo {
  width: 44px;
}

.nav__brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.nav__brand-name {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--c-surface);
  transition: color 0.35s;
  letter-spacing: 0.01em;
}
.nav--scrolled .nav__brand-name { color: var(--brown); }
.nav__brand-sub {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  transition: color 0.35s;
  margin-top: 2px;
}
.nav--scrolled .nav__brand-sub { color: var(--c-muted); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
}
.nav__links a {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  transition: color 0.2s;
  position: relative;
}
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 1px;
  background: var(--terra-light);
  transform: scaleX(0);
  transition: transform 0.25s;
}
.nav__links a:hover { color: var(--c-surface); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav--scrolled .nav__links a { color: var(--c-muted); }
.nav--scrolled .nav__links a:hover { color: var(--c-text); }
.nav--scrolled .nav__links a::after { background: var(--c-accent); }

.nav__cta {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.6rem 1.4rem;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 2px;
  color: var(--c-surface);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.nav__cta:hover { background: rgba(255,255,255,0.15); border-color: var(--c-surface); }
.nav--scrolled .nav__cta {
  border-color: var(--c-accent-2);
  color: var(--c-accent-2);
}
.nav--scrolled .nav__cta:hover {
  background: var(--c-accent-2);
  color: var(--c-surface);
}

.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  /* 44x44 minimum touch target — this is the primary nav control on phones and
     was rendering 32x23. Padding rather than width/height so the bars stay put. */
  padding: 10px 8px;
  min-width: 44px;
  min-height: 44px;
}
.nav__hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--c-surface);
  transition: background 0.35s;
}
.nav--scrolled .nav__hamburger span { background: var(--c-text); }

/* ─── Hero ────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(12,79,104,0.92) 0%,
    rgba(12,79,104,0.60) 50%,
    rgba(12,79,104,0.15) 100%
  );
}
.hero__content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 2.5rem;
  max-width: 640px;
  margin-left: max(2.5rem, calc(50vw - var(--max-w)/2));
}
.hero__eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-on-dark-accent);
  margin-bottom: 1.25rem;
}
.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: 500;
  line-height: 0.95;
  color: var(--c-surface);
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--terra-light);
}
.hero__desc {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.75);
  max-width: 420px;
  margin-bottom: 2.5rem;
  line-height: 1.75;
}
.hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.btn:hover { transform: translateY(-1px); }
.btn--teal {
  background: var(--c-footer);
  color: var(--c-surface);
  border: 1px solid var(--c-footer);
}
.btn--teal:hover { background: #0E5E7D; border-color: #0E5E7D; }
.btn--outline {
  background: transparent;
  color: var(--c-surface);
  border: 1px solid rgba(255,255,255,0.5);
}
.btn--outline:hover { border-color: var(--c-surface); background: rgba(255,255,255,0.08); }
.btn--terra {
  background: var(--c-accent);
  color: var(--c-surface);
  border: 1px solid var(--c-accent);
}
.btn--terra:hover { background: #B3754C; }

/* ─── Container ───────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2.5rem;
}

/* ─── Section base ────────────────────────────────────────── */
.section { padding: 6rem 0; }
.section--tight { padding: 4rem 0; }
.section--dark {
  background: var(--c-footer);
  color: var(--c-surface);
}
.section--white { background: var(--c-surface); }

.section__eyebrow {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 1rem;
}
.section__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--c-text);
  letter-spacing: -0.01em;
}
.section--dark .section__title { color: var(--c-surface); }
.section__lead {
  font-size: 1.05rem;
  color: var(--c-muted);
  max-width: 540px;
  margin-top: 1rem;
  line-height: 1.7;
}
.section--dark .section__lead { color: rgba(255,255,255,0.65); }

/* ─── Editorial prose block (e.g. "What We Believe") ──────── */
.prose { max-width: 760px; }
.prose .section__title { margin-top: 0; }
.prose .section__eyebrow { color: var(--c-accent); }
.prose h3 {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--c-text);
  margin: 2.5rem 0 0.85rem;
}
.prose p {
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.8;
  margin-bottom: 1.15rem;
}

/* ─── Pillars ─────────────────────────────────────────────── */
.pillars { background: var(--c-surface); }
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--c-border);
}
.pillar {
  padding: 3rem 2.5rem;
  border-right: 1px solid var(--c-border);
}
.pillar:last-child { border-right: none; }
.pillar__icon {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--teal-pale);
  border-radius: 50%;
  margin-bottom: 1.5rem;
  position: relative;
}
.pillar__icon::after {
  content: attr(data-icon);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.pillar__title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 0.6rem;
}
.pillar__text {
  font-size: 0.9rem;
  color: var(--c-muted);
  line-height: 1.7;
}

/* ─── Dogs Grid ───────────────────────────────────────────── */
.dogs__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 3rem;
  gap: 2rem;
}
.dogs__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.dog-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 3/4;
  background: var(--c-border);
  cursor: pointer;
}
.dog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.5s ease;
}
.dog-card:hover .dog-card__img { transform: scale(1.06); }
.dog-card__overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2rem 1.25rem 1.25rem;
  background: linear-gradient(to top, rgba(11,24,38,0.9) 0%, transparent 100%);
  transition: padding 0.3s;
}
.dog-card:hover .dog-card__overlay { padding-bottom: 1.5rem; }
.dog-card__role {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-on-dark-accent);
  margin-bottom: 0.3rem;
}
.dog-card__name {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--c-on-dark);
  line-height: 1;
}

/* ─── Story Split ─────────────────────────────────────────── */
.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}
.story__img-wrap {
  position: relative;
}
.story__img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 14px;
}
/* Escape hatch for a landscape source that can't survive a 4:5 crop — two
   subjects side by side (e.g. two dogs) need more width than a 4:5 crop
   allows without cutting into one of them or padding the frame with more
   backdrop than the composition can carry. Use the photo's own aspect ratio
   instead of forcing it into the portrait slot. */
.story__img--wide {
  aspect-ratio: 11/9;
}
/* Home page only: the heading is its own grid item (not nested in
   story__body) so it can be placed ahead of the photo on mobile — without
   this, a stacked story photo with no name badge (unlike the dog cards
   above it) reads as an unlabeled 13th dog card instead of an illustration
   for the section that follows it. */
.story.story--home {
  grid-template-areas: "heading img" "body img";
  align-items: start;
}
.story--home .story__heading { grid-area: heading; }
.story--home .story__img-wrap { grid-area: img; align-self: center; }
.story--home .story__body { grid-area: body; padding: 0; }
.story__accent {
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  width: 55%;
  aspect-ratio: 1;
  border: 8px solid var(--c-bg);
  border-radius: 4px;
  background: var(--teal-pale);
  z-index: -1;
}
.story__body { padding: 2rem 0; }
.story__text {
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.8;
  margin: 1.25rem 0 2rem;
}
/* mission line (about page): warm brown kept deliberately — approved
   exception to the ocean-blue palette. Dark variant in theme-toggle.css. */
.mission-line { color: #6B5244; }
.story__sig {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--c-accent-2);
  margin-top: 2.5rem;
}

/* ─── CTA Banner ──────────────────────────────────────────── */
.cta-banner {
  position: relative;
  overflow: hidden;
  padding: 7rem 2.5rem;
  text-align: center;
  background: var(--c-footer);
}
.cta-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  z-index: 0;
}
.cta-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(11, 24, 38, 0.78);
}
.cta-banner__content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: 0 auto;
}
.cta-banner__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  color: var(--c-on-dark);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}
.cta-banner__text {
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
  margin-bottom: 2.5rem;
  line-height: 1.7;
}
.cta-banner__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ─── Footer ──────────────────────────────────────────────── */
.footer {
  background: var(--c-footer);
  color: rgba(255,255,255,0.6);
  padding: 4rem 0 2rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 4rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 2rem;
}
.footer__brand-name {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--c-on-dark);
  letter-spacing: 0.01em;
  margin-bottom: 0.4rem;
}
.footer__brand-sub {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-on-dark-accent);
  margin-bottom: 1.2rem;
}
.footer__tagline {
  font-size: 0.88rem;
  line-height: 1.7;
  max-width: 280px;
}
.footer__heading {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-on-dark);
  margin-bottom: 1.2rem;
}
.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.footer__links a {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
  transition: color 0.2s;
}
.footer__links a:hover { color: var(--c-surface); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.3);
}
.footer__location {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  margin-top: 1.5rem;
}
.footer__social {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.85rem;
  align-items: center;
}
.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.45);
  transition: background 0.2s ease, color 0.2s ease;
  text-decoration: none;
  flex-shrink: 0;
  overflow: hidden;
}
.footer__social-link:hover {
  background: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
}
.footer__social-link svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  display: block;
  flex-shrink: 0;
  overflow: visible;
}

/* ─── Mobile Drawer ───────────────────────────────────────── */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}
.nav-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11,24,38,0.5);
  opacity: 0;
  transition: opacity 0.3s;
}
.nav-drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 280px;
  background: var(--c-surface);
  padding: 5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.nav-drawer.open { pointer-events: all; }
.nav-drawer.open .nav-drawer__backdrop { opacity: 1; }
.nav-drawer.open .nav-drawer__panel { transform: translateX(0); }
.nav-drawer__close {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  background: none; border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--c-muted);
  line-height: 1;
  /* Was 14x24 — a "×" glyph with no box around it. */
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: -10px;  /* keep the glyph visually where it was */
}
.nav-drawer__link {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--c-text);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--c-border);
  transition: color 0.2s;
}
.nav-drawer__link:hover { color: var(--c-accent-2); }
.nav-drawer__cta {
  margin-top: 1.5rem;
  text-align: center;
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .dogs__grid { grid-template-columns: repeat(2, 1fr); }
  .story { grid-template-columns: 1fr; gap: 3rem; }
  .story.story--home { grid-template-areas: "heading" "img" "body"; gap: 1.75rem; }
  .story__accent { display: none; }
  :root { --nav-h: 60px; }
  .nav { padding: 0 1.5rem; }
  .nav__links, .nav__cta, .nav > .theme-toggle { display: none; }
  .nav__hamburger { display: flex; }
}

@media (max-width: 768px) {
  .hero__content {
    padding: 0 1.5rem;
    margin-left: 0;
    max-width: 100%;
  }
  .pillars__grid { grid-template-columns: 1fr; }
  .pillar { border-right: none; border-bottom: 1px solid var(--c-border); }
  .pillar:last-child { border-bottom: none; }
  .dogs__header { flex-direction: column; align-items: flex-start; }
  .dogs__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .footer__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer__bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
  .section { padding: 4rem 0; }
  .container { padding: 0 1.5rem; }
}

@media (max-width: 480px) {
  .dogs__grid { grid-template-columns: 1fr; }
  .hero__title { font-size: 3rem; }
}

/* ─── Nav Dropdown ────────────────────────────────────────── */
.nav__has-dropdown { position: relative; }
.nav__has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -1rem;
  right: -1rem;
  height: 1.25rem;
}
.nav__caret {
  font-size: 0.55rem;
  opacity: 0.65;
  display: inline-block;
  vertical-align: middle;
  margin-left: 3px;
  transition: transform 0.2s;
}
.nav__has-dropdown:hover .nav__caret { transform: rotate(180deg); }

.nav__dropdown {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 0.4rem 0;
  min-width: 200px;
  box-shadow: 0 10px 36px rgba(12,79,104,0.13);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
  z-index: 201;
}
.nav__has-dropdown:hover .nav__dropdown,
.nav__has-dropdown:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.2s, transform 0.2s, visibility 0s 0s;
}
.nav__dropdown::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--c-surface);
  border-left: 1px solid var(--c-border);
  border-top: 1px solid var(--c-border);
  transform: translateX(-50%) rotate(45deg);
}
.nav__dropdown a {
  display: block;
  padding: 0.55rem 1.25rem;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--c-muted);
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
  position: relative;
}
.nav__dropdown a::after { display: none !important; }
.nav__dropdown a:hover { color: var(--c-accent-2); background: var(--c-bg); }
.nav__dropdown-divider {
  height: 1px;
  background: var(--c-border);
  margin: 0.3rem 0;
}

/* ─── Nav Drawer Sub-links ────────────────────────────────── */
.nav-drawer__sub {
  font-size: 0.88rem;
  color: var(--c-muted);
  padding: 0.35rem 0 0.35rem 1.25rem;
  border-bottom: none;
  display: block;
  transition: color 0.2s;
}
.nav-drawer__sub:hover { color: var(--c-accent-2); }
.nav-drawer__sub.active { color: var(--c-accent-2); }

/* ─── Contract / Printable Pages ─────────────────────────── */
.contract-page { max-width: 800px; margin: 0 auto; }
.contract-header {
  text-align: center;
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
  border-bottom: 2px solid var(--c-text);
}
.contract-header h1 {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 0.4rem;
}
.contract-header p { font-size: 0.88rem; color: var(--c-muted); }
.contract-section {
  margin-bottom: 2.5rem;
}
.contract-section h2 {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text);
  margin-bottom: 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--c-border);
}
.contract-field {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}
.contract-field label {
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 160px;
}
.contract-field input,
.contract-field select,
.contract-field textarea {
  flex: 1;
  border: none;
  border-bottom: 1px solid var(--c-text);
  padding: 0.3rem 0;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--c-text);
  background: transparent;
  outline: none;
}
.contract-field input:focus,
.contract-field textarea:focus { border-bottom-color: var(--c-accent-2); }
.contract-field textarea { resize: none; min-height: 40px; }
.contract-field-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.contract-terms {
  font-size: 0.88rem;
  color: var(--c-text);
  line-height: 1.8;
  counter-reset: terms;
}
.contract-term {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: flex-start;
}
.contract-term-num {
  font-weight: 600;
  flex-shrink: 0;
  min-width: 1.5rem;
}
.contract-sig-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 3rem;
}
.contract-sig-block { display: flex; flex-direction: column; gap: 0.5rem; }
.contract-sig-line {
  border-bottom: 1px solid var(--c-text);
  height: 2.5rem;
  width: 100%;
}
.contract-sig-label { font-size: 0.75rem; color: var(--c-muted); }
.contract-print-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  cursor: pointer;
}
@media print {
  .nav, .nav-drawer, .footer, .page-banner, .btn, .contract-print-btn { display: none !important; }
  body { background: white; }
  .section { padding: 0 !important; }
  .contract-page { max-width: 100%; }
}
@media (max-width: 768px) {
  .contract-field { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .contract-field label { min-width: auto; }
  .contract-field-2col { grid-template-columns: 1fr; gap: 0; }
  .contract-sig-row { grid-template-columns: 1fr; gap: 2rem; }
}

/* ─── Nav Active State ────────────────────────────────────── */
.nav__links a.active { color: var(--c-surface); }
.nav__links a.active::after { transform: scaleX(1) !important; }
.nav--scrolled .nav__links a.active,
.nav--static .nav__links a.active { color: var(--c-text); }
.nav-drawer__link.active { color: var(--c-accent-2); }

/* ─── Nav Static (inner pages — always white) ─────────────── */
.nav--static {
  background: var(--c-surface);
  box-shadow: 0 1px 0 var(--c-border);
}
.nav--static .nav__brand-name { color: var(--brown); }
.nav--static .nav__brand-sub  { color: var(--c-muted); }
.nav--static .nav__links a    { color: var(--c-muted); }
.nav--static .nav__links a:hover { color: var(--c-text); }
.nav--static .nav__links a::after { background: var(--c-accent); }
.nav--static .nav__cta { border-color: var(--c-accent-2); color: var(--c-accent-2); }
.nav--static .nav__cta:hover { background: var(--c-accent-2); color: var(--c-surface); }
.nav--static .nav__hamburger span { background: var(--c-text); }

/* ─── Page Banner ─────────────────────────────────────────── */
.page-banner {
  padding: calc(var(--nav-h) + 5rem) 0 5rem;
  background: var(--c-footer);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(24,144,184,0.2) 0%, transparent 60%);
  pointer-events: none;
}
.page-banner .container { position: relative; z-index: 1; }
.page-banner__eyebrow {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terra-light);
  margin-bottom: 1rem;
}
.page-banner__title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 500;
  color: var(--c-surface);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.page-banner__sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.65);
  max-width: 520px;
  margin: 1.25rem auto 0;
  line-height: 1.7;
}

/* ─── Tabs ────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--c-border);
  margin-bottom: 3rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tab {
  padding: 0.85rem 1.75rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: none;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.tab:hover { color: var(--c-text); }
.tab.active { color: var(--c-accent-2); border-bottom-color: var(--c-accent-2); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ─── Parent Profile Cards ────────────────────────────────── */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.profile-card {
  background: var(--c-surface);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--c-border);
  transition: box-shadow 0.25s, transform 0.25s;
}
.profile-card:hover {
  box-shadow: 0 12px 40px rgba(12,79,104,0.1);
  transform: translateY(-3px);
}
.profile-card__img-wrap {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.profile-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.5s ease;
}
.profile-card:hover .profile-card__img { transform: scale(1.04); }
.profile-card__badge {
  position: absolute;
  top: 1rem; left: 1rem;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 2px;
  background: var(--c-accent-2);
  color: var(--c-surface);
}
.profile-card__badge--sire { background: var(--c-accent); }
.profile-card__body { padding: 1.5rem; }
.profile-card__name {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 0.4rem;
}
.profile-card__meta {
  font-size: 0.78rem;
  color: var(--c-muted);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.profile-card__bio {
  font-size: 0.9rem;
  color: var(--c-muted);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.profile-card__clearances { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.clearance-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.3rem 0.8rem;
  background: #e8f4e8;
  border: 1px solid #9cc99c;
  border-radius: 20px;
  color: #2d5a2d;
}
.profile-card__genetics {
  font-size: 0.68rem;
  color: var(--c-muted);
  font-style: italic;
  margin: 0.25rem 0 0.6rem;
  line-height: 1.5;
}
.profile-card__subtitle {
  font-size: 0.82rem;
  color: var(--c-muted);
  margin-bottom: 1rem;
}
.profile-card__details {
  margin-bottom: 0.75rem;
  border-top: 1px solid var(--cream-border, #e8e0d5);
}
.profile-card__detail {
  display: flex;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--cream-border, #e8e0d5);
  font-size: 0.8rem;
}
.profile-card__detail-label {
  color: var(--c-muted);
  font-weight: 500;
  min-width: 5.5rem;
  flex-shrink: 0;
}
.profile-card__detail-value {
  color: var(--c-text);
  line-height: 1.5;
}
.profile-card__section-title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--c-text);
  margin: 1rem 0 0.3rem;
}

/* ─── Puppy Cards ─────────────────────────────────────────── */
.puppy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.puppy-card {
  background: var(--c-surface);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--c-border);
}
.puppy-card__img-wrap { aspect-ratio: 1; overflow: hidden; }
.puppy-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.puppy-card:hover .puppy-card__img { transform: scale(1.05); }
.puppy-card__body { padding: 1.5rem; }
.puppy-card__status {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 2px;
  margin-bottom: 0.75rem;
}
.puppy-card__status--available { background: #e8f5e9; color: #2e7d32; }
.puppy-card__status--reserved  { background: #fff3e0; color: #e65100; }
.puppy-card__status--pending   { background: var(--teal-pale); color: var(--c-footer); }
.puppy-card__name {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 0.25rem;
}
.puppy-card__details {
  font-size: 0.82rem;
  color: var(--c-muted);
  line-height: 1.65;
  margin-bottom: 1rem;
}
.puppy-card__price {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--c-footer);
  margin-bottom: 1.25rem;
}

/* ─── Empty State ─────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 5rem 2rem;
  background: var(--c-surface);
  border-radius: 14px;
  border: 1px solid var(--c-border);
}
.empty-state__icon { font-size: 3rem; margin-bottom: 1.5rem; display: block; }
.empty-state__title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--c-text);
  margin-bottom: 0.75rem;
}
.empty-state__text {
  font-size: 1rem;
  color: var(--c-muted);
  max-width: 400px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}

/* ─── Litter Cards ────────────────────────────────────────── */
.litter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.litter-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 2rem;
}
.litter-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem;
}
.litter-card__expected {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
  background: rgba(201,147,58,0.1);
  padding: 0.3rem 0.75rem;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}
.litter-card__parents {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.3;
  margin-bottom: 0.6rem;
}
.litter-card__parents em {
  font-style: italic;
  color: var(--c-muted);
  font-size: 0.9em;
}
.litter-card__details {
  font-size: 0.85rem;
  color: var(--c-muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.litter-card__spots {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--c-footer);
  margin-bottom: 1.25rem;
}

/* ─── Highlight Box ───────────────────────────────────────── */
/* Pull quote (about-dachshunds.html). No stylesheet previously styled this
   block, so it fell back to the browser's default blockquote rendering —
   which only drew an opening curly quote with no matching closing one. */
.pull-quote-band {
  text-align: center;
  padding: 3rem 1.5rem;
  max-width: 760px;
  margin: 0 auto;
}
.pull-quote-band blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--c-heading-accent);
}
/* Literal curly-quote characters, not the open-quote/close-quote keywords —
   those depend on the `quotes` property and silently failed to render a
   closing mark in testing even though getComputedStyle reported it correctly. */
.pull-quote-band blockquote::before { content: '\201C'; }
.pull-quote-band blockquote::after  { content: '\201D'; }
.pull-quote-band cite {
  display: block;
  margin-top: 1.25rem;
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--c-muted);
}

.highlight-box {
  background: var(--teal-pale);
  border-left: 4px solid var(--c-accent-2);
  border-radius: 0 8px 8px 0;
  padding: 2rem 2.5rem;
}
.highlight-box__title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--c-footer);
  margin-bottom: 0.6rem;
}
.highlight-box__text {
  font-size: 0.92rem;
  color: var(--c-muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* ─── Process Steps (horizontal) ─────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
  gap: 1rem;
}
.steps::before {
  content: '';
  position: absolute;
  top: 1.9rem;
  left: calc(10% + 0.5rem);
  right: calc(10% + 0.5rem);
  height: 1px;
  background: var(--c-border);
  z-index: 0;
}
.step { text-align: center; padding: 0 0.5rem; position: relative; z-index: 1; }
.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--c-accent-2);
  margin: 0 auto 1.5rem;
}
.step__title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
.step__text { font-size: 0.8rem; color: var(--c-muted); line-height: 1.6; }

/* ─── Process Detail Grid ─────────────────────────────────── */
.process-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.process-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.75rem;
  background: var(--c-surface);
  border-radius: 12px;
  border: 1px solid var(--c-border);
}
.process-item__num {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--c-accent-2);
  color: var(--c-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
}
.process-item h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 0.5rem;
}
.process-item p { font-size: 0.88rem; color: var(--c-muted); line-height: 1.7; }

/* ─── Included Items ──────────────────────────────────────── */
.included-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.included-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem;
  background: var(--c-surface);
  border-radius: 10px;
  border: 1px solid var(--c-border);
}
.included-item__icon { font-size: 1.5rem; flex-shrink: 0; }
.included-item h3 {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 0.25rem;
}
.included-item p { font-size: 0.82rem; color: var(--c-muted); line-height: 1.6; }

/* ─── Gallery Grid ────────────────────────────────────────── */
.gallery-grid {
  columns: 3;
  column-gap: 1.25rem;
}
.gallery-item {
  break-inside: avoid;
  margin-bottom: 1.25rem;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  display: block;
}
.gallery-item img {
  width: 100%;
  display: block;
  transition: transform 0.4s ease;
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item__caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2rem 1rem 0.85rem;
  background: linear-gradient(to top, rgba(12,79,104,0.85), transparent);
  color: var(--c-surface);
  font-family: var(--font-serif);
  font-size: 1rem;
  opacity: 0;
  transition: opacity 0.3s;
}
.gallery-item:hover .gallery-item__caption { opacity: 1; }

/* ─── Lightbox ────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8,16,26,0.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  padding: 2rem;
}
.lightbox.open { opacity: 1; pointer-events: all; }
.lightbox__img {
  max-width: 100%;
  max-height: 88vh;
  border-radius: 6px;
  object-fit: contain;
}
.lightbox__close {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  font-size: 2rem;
  color: rgba(255,255,255,0.55);
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}
.lightbox__close:hover { color: var(--c-surface); }
.lightbox__caption {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: rgba(255,255,255,0.6);
  text-align: center;
  white-space: nowrap;
}

/* ─── Accordion / FAQ ─────────────────────────────────────── */
.faq-group { margin-bottom: 3.5rem; }
.faq-group__heading {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--c-border);
}
.accordion { display: flex; flex-direction: column; gap: 0.5rem; }
.accordion-item {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  overflow: hidden;
}
.accordion-trigger {
  width: 100%;
  text-align: left;
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: var(--c-surface);
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--c-text);
  transition: background 0.2s;
}
.accordion-trigger:hover { background: var(--c-bg); }
.accordion-item.open .accordion-trigger { background: var(--teal-pale); color: var(--c-footer); }
.accordion-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--c-muted);
  transition: transform 0.3s, background 0.2s, border-color 0.2s, color 0.2s;
}
.accordion-item.open .accordion-icon {
  transform: rotate(45deg);
  background: var(--c-accent-2);
  border-color: var(--c-accent-2);
  color: var(--c-surface);
}
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.accordion-body__inner {
  padding: 1.25rem 1.5rem 1.5rem;
  font-size: 0.92rem;
  color: var(--c-muted);
  line-height: 1.8;
  border-top: 1px solid var(--c-border);
}
.accordion-body__inner a { color: var(--c-accent-2); text-decoration: underline; }
.accordion-body__inner a:hover { color: var(--c-footer); }

/* ─── Contact Form Layout ─────────────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4rem;
  align-items: start;
}
.form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-group label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text);
}
.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--c-field-border);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--c-text);
  background: var(--c-surface);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  -webkit-appearance: none;
}
/* BUG (2026-08-10): the rule above stripped native rendering off checkboxes and
   radios too — `.form-group--checkbox input` is still `.form-group input`, and
   CSS specificity doesn't exclude it. On Safari/macOS this left a blank white
   box with no checkmark graphic of its own: the click still worked (`checked`
   flipped true) but nothing was ever drawn, so it looked completely dead —
   reported as "none of the checkboxes work" on desktop. Restore native
   rendering so `accent-color` (set below) has a real control to draw onto. */
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
  -webkit-appearance: auto;
  appearance: auto;
  padding: 0;
  border: none;
  background: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--c-accent-2);
  box-shadow: 0 0 0 3px rgba(44,124,181,0.1);
}
.form-group textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.form-group--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;
}
/* Touch targets: the visible box stays small for layout, but it is grown to the
   44x44px minimum (Apple HIG / WCAG 2.5.5) with a transparent outset so a thumb
   tap registers. Testers reported "can't click the boxes" on phones — the inputs
   were rendering 17.6px, ~40% of the minimum. The label is also clickable via
   for/id, but people aim at the box. */
.form-group--checkbox input[type="checkbox"] {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--c-accent-2);
  padding: 0;
  cursor: pointer;
  position: relative;
}
.form-group--checkbox input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}
.form-group--checkbox label {
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--c-muted);
  cursor: pointer;
  /* Give the tappable label real vertical bulk on touch screens */
  padding: 0.35rem 0;
}
.form-group--checkbox label a { color: var(--c-accent-2); text-decoration: underline; }
.form__note { font-size: 0.8rem; color: var(--c-muted); line-height: 1.6; }
.form__success {
  display: none;
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-radius: 8px;
  padding: 1.75rem;
  text-align: center;
  color: #2e7d32;
  font-size: 0.95rem;
  line-height: 1.7;
}
.form__success.visible { display: block; }

/* ─── Contact Info Sidebar ────────────────────────────────── */
.contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 1.75rem;
}
.contact-card__title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 1rem;
}
.contact-card__row {
  display: flex;
  gap: 0.75rem;
  font-size: 0.88rem;
  color: var(--c-muted);
  line-height: 1.55;
  margin-bottom: 0.85rem;
}
.contact-card__row:last-child { margin-bottom: 0; }
.contact-card__label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text);
  display: block;
  margin-bottom: 0.15rem;
}

/* ─── Values Grid ─────────────────────────────────────────── */
.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}
.value-card {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 2rem;
  background: var(--c-surface);
  border-radius: 12px;
  border: 1px solid var(--c-border);
}
.value-card__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-pale);
  border-radius: 8px;
}
.value-card h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 0.4rem;
}
.value-card p { font-size: 0.88rem; color: var(--c-muted); line-height: 1.7; }

/* ─── Health Table ────────────────────────────────────────── */
.health-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--c-border);
}
.health-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  background: var(--c-surface);
}
.health-table th {
  text-align: left;
  padding: 0.85rem 1.25rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
.health-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
  line-height: 1.5;
}
.health-table tr:last-child td { border-bottom: none; }
.health-pass { color: #2e7d32; font-weight: 500; }

/* ─── Legal Pages ─────────────────────────────────────────── */
.legal-content { max-width: 740px; margin: 0 auto; }
.legal-effective {
  font-size: 0.8rem;
  color: var(--c-muted);
  margin-bottom: 2.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--c-border);
}
.legal-content h2 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--c-text);
  margin: 2.5rem 0 0.85rem;
}
.legal-content h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text);
  margin: 1.5rem 0 0.5rem;
}
.legal-content p {
  font-size: 0.92rem;
  color: var(--c-muted);
  line-height: 1.85;
  margin-bottom: 1rem;
}
.legal-content ul {
  margin: 0.5rem 0 1rem 1.5rem;
}
.legal-content ul li {
  font-size: 0.92rem;
  color: var(--c-muted);
  line-height: 1.7;
  margin-bottom: 0.4rem;
}
.legal-content a { color: var(--c-accent-2); text-decoration: underline; }

/* ─── Pricing cards (puppies page) ───────────────────────── */
.photo-grid-9 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) { .photo-grid-9 { grid-template-columns: 1fr; } }

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 860px;
  margin: 0 auto;
}
.fee-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 860px;
  margin: 2rem auto 0;
}

/* ─── Responsive: new components ─────────────────────────── */
@media (max-width: 1024px) {
  .profile-grid    { grid-template-columns: repeat(2, 1fr); }
  .litter-grid     { grid-template-columns: repeat(2, 1fr); }
  .included-grid   { grid-template-columns: repeat(2, 1fr); }
  .process-grid    { grid-template-columns: 1fr; }
  .steps           { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .steps::before   { display: none; }
  .contact-layout  { grid-template-columns: 1fr; gap: 3rem; }
  .values-grid     { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .profile-grid    { grid-template-columns: 1fr; }
  .puppy-grid      { grid-template-columns: repeat(2, 1fr); }
  .litter-grid     { grid-template-columns: 1fr; }
  .gallery-grid    { columns: 2; }
  .form-row        { grid-template-columns: 1fr; }
  .included-grid   { grid-template-columns: 1fr; }
  .steps           { grid-template-columns: 1fr; }
  .page-banner     { padding: calc(var(--nav-h) + 3rem) 0 3rem; }
  .pricing-cards,
  .fee-notes       { grid-template-columns: 1fr; }
  .cta-banner { padding: 4rem 1.75rem; }
  .cta-banner--left .cta-banner__img { object-position: 20% 38%; }
  .cta-banner__content { margin: 0 auto; max-width: none; }
}
/* Emma-Jean banner (about.html): full dog, set back to the right, faded into teal */
.cta-banner--emma { background: var(--c-footer); }
.cta-banner--emma .cta-banner__img {
  width: auto;
  height: 138%;
  max-width: none;
  left: auto;
  right: -24%;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.08) 22%, rgba(0,0,0,0.22) 42%, rgba(0,0,0,0.42) 60%, rgba(0,0,0,0.66) 76%, rgba(0,0,0,0.88) 90%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.08) 22%, rgba(0,0,0,0.22) 42%, rgba(0,0,0,0.42) 60%, rgba(0,0,0,0.66) 76%, rgba(0,0,0,0.88) 90%, #000 100%);
}
.cta-banner--emma .cta-banner__overlay {
  background: linear-gradient(90deg, rgba(11,24,38,0.80) 0%, rgba(11,24,38,0.30) 25%, rgba(11,24,38,0.12) 55%, rgba(11,24,38,0.12) 100%);
}
.cta-banner--emma .cta-banner__content {
  text-shadow: 0 1px 14px rgba(8,16,26,0.55);
}
/* Solid (photo-less) CTA banner */
.cta-banner--solid {
  background: var(--c-footer);
  padding: 5rem 2.5rem;
}
@media (max-width: 768px) {
  .cta-banner--emma .cta-banner__img { width: auto; height: 100%; max-width: none; }
}
@media (max-width: 480px) {
  .puppy-grid   { grid-template-columns: 1fr; }
  .gallery-grid { columns: 1; }
  .values-grid  { grid-template-columns: 1fr; }
  .container    { padding: 0 1rem; }
  .nav          { padding: 0 1rem; }
  .section      { padding: 3rem 0; }
}

/* ─── Priority Waiting List ───────────────────────────────── */
.pwl-how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.pwl-how-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.pwl-how-num {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: var(--c-accent-2);
  color: var(--c-surface);
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pwl-how-item h4 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 0.3rem;
}
.pwl-how-item p {
  font-size: 0.82rem;
  color: var(--c-muted);
  line-height: 1.6;
}
.pwl-how-item a { color: var(--c-accent-2); text-decoration: underline; }

.pwl-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 3.5rem;
  align-items: start;
}
.pwl-form-section {
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--c-border);
}
.pwl-form-section:last-of-type { border-bottom: none; }
.pwl-form-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-footer);
  margin-bottom: 1.25rem;
}

.pwl-sidebar { display: flex; flex-direction: column; gap: 1.25rem; }
.pwl-sidebar-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
}
.pwl-sidebar-card__title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 0.5rem;
}
.pwl-sidebar-card__stat {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--c-footer);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
.pwl-sidebar-card__note {
  font-size: 0.82rem;
  color: var(--c-muted);
  line-height: 1.6;
}
.pwl-sidebar-list {
  list-style: none;
  margin: 0 0 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pwl-sidebar-list li { font-size: 0.85rem; color: var(--c-text); }
.pwl-sidebar-link {
  font-size: 0.8rem;
  color: var(--c-accent-2);
  font-weight: 500;
  text-decoration: underline;
  display: inline-block;
  margin-top: 0.25rem;
}

@media (max-width: 1024px) {
  .pwl-how-grid { grid-template-columns: 1fr 1fr; }
  .pwl-layout { grid-template-columns: 1fr; }
  .pwl-sidebar { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .pwl-how-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .pwl-sidebar { grid-template-columns: 1fr; }
}

/* ─── Deposit Agreement / Contract Form ───────────────────── */
.contract-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
  border-bottom: 2px solid var(--c-footer);
}
.contract-header__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.contract-header__meta p {
  font-size: 0.82rem;
  color: var(--c-muted);
  margin-bottom: 0.2rem;
  text-align: right;
}
.contract-intro {
  font-size: 0.9rem;
  color: var(--c-muted);
  line-height: 1.8;
  padding: 1.25rem 1.5rem;
  background: var(--teal-pale);
  border-left: 3px solid var(--c-accent-2);
  border-radius: 0 6px 6px 0;
  margin-bottom: 2.5rem;
}
.contract-section__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-footer);
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--c-border);
}
.contract-section__lead {
  font-size: 0.9rem;
  color: var(--c-muted);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.contract-term {
  display: block;
  margin-bottom: 1.5rem;
  font-size: 0.88rem;
  line-height: 1.8;
}
.contract-term h4 {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.contract-term p { color: var(--c-muted); margin-bottom: 0.5rem; }
.contract-term ul {
  margin: 0.5rem 0 0.5rem 1.5rem;
  color: var(--c-muted);
}
.contract-term ul li { margin-bottom: 0.3rem; }
.contract-term--highlight {
  background: var(--c-highlight-bg);
  border: 1px solid var(--teal-mid);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
}
.contract-term--highlight h4 { color: var(--c-accent); }

/* Form fields inside contract */
.contract-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}
.contract-field label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text);
  min-width: auto;
  white-space: normal;
  flex-shrink: unset;
}
.contract-field input,
.contract-field select,
.contract-field textarea {
  flex: unset;
  width: 100%;
  border: 1px solid var(--c-field-border);
  border-radius: 6px;
  padding: 0.65rem 0.9rem;
  /* Selects render shorter than text inputs at the same padding — pin the
     44px touch minimum explicitly. */
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--c-text);
  background: var(--c-surface);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.contract-field input:focus,
.contract-field select:focus,
.contract-field textarea:focus {
  border-color: var(--c-accent-2);
  box-shadow: 0 0 0 3px rgba(44,124,181,0.1);
}
.contract-field textarea { resize: vertical; min-height: 80px; }
.contract-field select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.5rem; }
.contract-field-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.field--error {
  border-color: #D44 !important;
  box-shadow: 0 0 0 3px rgba(221,68,68,0.12) !important;
}
.req { color: var(--c-accent); }

/* Acknowledgment checkboxes */
.contract-ack-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 2rem;
}
.contract-ack-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--c-text);
  line-height: 1.6;
}
/* Radio buttons had NO css of their own at all, so they rendered at the browser
   default (~29px tall on iPhone) — even smaller than the checkboxes. Same 44px
   hit-area treatment, applied globally so a radio added to any future form is
   tappable by default rather than needing to be remembered. */
input[type="radio"] {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  accent-color: var(--c-accent-2);
  cursor: pointer;
  position: relative;
}
input[type="radio"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}
/* The radio's own <label> wrapper gets vertical bulk too, so the text is an
   equally forgiving target. */
label:has(> input[type="radio"]) {
  padding: 0.3rem 0;
}

/* Same 44px touch-target treatment as .form-group--checkbox — these render at
   18px, well under the minimum, and are the boxes on the deposit + purchase
   contract that testers could not reliably tap. */
.contract-ack-item input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin-top: 1px;
  accent-color: var(--c-accent-2);
  cursor: pointer;
  position: relative;
}
.contract-ack-item input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}
/* The whole row is a <label>, so padding here enlarges the tap area too */
.contract-ack-item {
  padding: 0.3rem 0;
}
.contract-ack-item a { color: var(--c-accent-2); text-decoration: underline; }

/* Submit area */
.contract-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-border);
  margin-top: 1.5rem;
}
.contract-submit-note {
  font-size: 0.82rem;
  color: var(--c-muted);
  line-height: 1.6;
  max-width: 380px;
}

/* Button size variant */
.btn--lg {
  padding: 0.9rem 2.5rem;
  font-size: 0.82rem;
}

/* Contract notice bar */
.contract-notice {
  background: var(--teal-pale);
  border-bottom: 1px solid rgba(44,124,181,0.15);
  padding: 0.75rem 0;
}
.contract-notice .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.contract-notice p {
  font-size: 0.85rem;
  color: var(--c-muted);
}
.contract-notice a { color: var(--c-accent-2); text-decoration: underline; }

/* Printable inline fields */
.contract-printable-block {
  margin-bottom: 1.5rem;
}

/* ── Buyer vs. breeder sections ──────────────────────────────────────────
   The contract mixes fields the visitor fills in with fields River Dachs
   completes once a puppy is identified. Before 2026-08-10 every buyer field
   was a blank pen-line with nothing to tap, so on a phone the document read
   as broken. Buyer blocks now hold real inputs; breeder blocks stay as
   printable lines but are visually marked so nobody tries to fill them. */
.field-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 0.5rem;
  white-space: nowrap;
}
.field-tag--buyer {
  background: var(--c-accent-2);
  color: #fff;
}
/* In dark the accent brightens to a light blue, so white-on-accent drops to
   2.43:1 and fails the contrast floor. Use dark ink on the light chip instead. */
:root[data-theme="dark"] .field-tag--buyer {
  /* Role token, not the raw --teal-dark: raw palette refs don't re-theme, which
     is how the FAQ shipped washed-out borders in dark. --c-on-accent exists for
     exactly this and gives 7.09:1 here. */
  color: var(--c-on-accent);
}
.field-tag--breeder {
  background: var(--c-highlight-bg);
  color: var(--c-muted);
  border: 1px solid var(--c-border);
}
.contract-printable-block--breeder {
  background: var(--c-highlight-bg);
  border: 1px dashed var(--c-border);
  border-radius: 8px;
  padding: 1rem 1.15rem 0.5rem;
}
.contract-printable-block--buyer {
  border-left: 3px solid var(--c-accent-2);
  padding-left: 1.15rem;
}
.contract-section__note {
  font-size: 0.82rem;
  color: var(--c-muted);
  line-height: 1.65;
  margin: -0.35rem 0 1rem;
}
.contract-howto {
  background: var(--c-highlight-bg);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-accent-2);
  border-radius: 8px;
  padding: 1.25rem 1.4rem;
  margin-bottom: 2rem;
}
.contract-howto__title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-heading-accent);
  margin: 0 0 0.75rem;
}
.contract-howto p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--c-text);
  margin: 0 0 0.7rem;
}
.contract-howto p:last-child { margin-bottom: 0; }
.contract-howto__final {
  border-top: 1px solid var(--c-border);
  padding-top: 0.7rem;
  color: var(--c-muted) !important;
}
.contract-field-3col {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr;
  gap: 1rem;
}
@media (max-width: 640px) {
  .contract-field-3col { grid-template-columns: 1fr; gap: 0; }
}

.contract-block-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-footer);
  margin-bottom: 0.75rem;
}
.contract-field-inline {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--c-field-border);
  padding-bottom: 0.25rem;
}
.contract-field-label {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--c-text);
  min-width: 150px;
  flex-shrink: 0;
}
.contract-field-line {
  flex: 1;
  font-size: 0.88rem;
  color: var(--c-muted);
  min-height: 1.2rem;
}
.contract-dog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.contract-price-block {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.contract-note {
  font-size: 0.82rem;
  color: var(--c-muted);
  font-style: italic;
}
.contract-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.contract-check-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.88rem;
  color: var(--c-text);
}
.contract-check {
  color: var(--c-accent-2);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}
.contract-actions {
  padding-top: 2rem;
  border-top: 1px solid var(--c-border);
}

@media print {
  .contract-notice, #printActions, .nav, .nav-drawer, .footer, .page-banner, .btn, .contract-ack-item input { display: none !important; }
  .contract-ack-item { break-inside: avoid; }
  .contract-section { break-inside: avoid; page-break-inside: avoid; }
  .contract-sig-row { break-inside: avoid; page-break-inside: avoid; margin-top: 4rem !important; }
  body { background: white !important; font-size: 11pt; }
  .section { padding: 0 !important; }
  .contract-page { max-width: 100% !important; padding: 0 !important; }
}

@media (max-width: 768px) {
  .contract-header { flex-direction: column; gap: 1rem; }
  .contract-header__meta p { text-align: left; }
  .contract-field-2col { grid-template-columns: 1fr; }
  .contract-dog-grid { grid-template-columns: 1fr; }
  .contract-submit-row { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .contract-submit-row .btn { width: 100%; text-align: center; }
  .contract-notice .container { flex-direction: column; align-items: flex-start; }
  .contract-field-label { min-width: 110px; }
}

/* ─── Parent Cards (minimal, link to profile) ──────────────────── */
.parent-card {
  display: block;
  text-decoration: none;
  background: var(--c-surface);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.parent-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.13);
}
.parent-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.parent-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.45s ease;
}
.parent-card:hover .parent-card__img { transform: scale(1.04); }
.parent-card__badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: var(--brown);
  color: var(--c-surface);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: 2px;
}
.parent-card__badge--sire { background: var(--c-accent-2); }
.parent-card__body {
  padding: 1rem 1.2rem 1.2rem;
  text-align: center;
}
.parent-card__name {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--brown);
  margin: 0 0 0.2rem;
}
.parent-card__desc {
  font-size: 0.76rem;
  color: var(--c-muted);
  margin: 0 0 0.65rem;
  line-height: 1.4;
}
.parent-card__certs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
  margin-bottom: 0.85rem;
  min-height: 1.5rem;
}
.parent-card__link {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-accent-2);
  display: inline-block;
}
.parent-card:hover .parent-card__link { color: var(--c-accent); }

/* ─── Dog Profile Pages ─────────────────────────────────────────── */
.dog-profile { background: var(--c-bg); }
.dog-profile__back-bar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.5rem 0;
}
.dog-profile__back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-muted);
  text-decoration: none;
}
.dog-profile__back:hover { color: var(--c-accent-2); }
.dog-profile__wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 4rem;
  display: flex;
  gap: 0;
  align-items: stretch;
  min-height: 520px;
}
.dog-profile__image-col {
  flex: 0 0 50%;
  position: relative;
  overflow: hidden;
  border-radius: 8px 0 0 8px;
  opacity: 0;
  animation: dpFadeIn 1.1s ease-out 0.3s forwards;
}
@keyframes dpFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
.dog-profile__image-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.dog-profile__text-col {
  flex: 0 0 50%;
  padding: 2.5rem 2.5rem 2.5rem 2.75rem;
  background: var(--c-surface);
  border-radius: 0 8px 8px 0;
  box-shadow: 4px 0 24px rgba(11,24,38,0.10);
  /* NOT overflow-y:auto. It never scrolled — measured scrollHeight ==
     clientHeight for all 12 dogs on desktop and mobile — but it DID clip
     the genetics key, forcing that panel to scroll inside itself. */
  overflow-y: visible;
  transform: translateX(-60px);
  opacity: 0;
  animation: dpSlideIn 1.3s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards;
}
@keyframes dpSlideIn {
  from { transform: translateX(-60px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.dog-profile__role {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 0.55rem;
}
.dog-profile__divider {
  width: 48px;
  height: 2px;
  background: linear-gradient(to right, var(--c-accent), var(--brown));
  margin-bottom: 1.25rem;
}
.dog-profile__details { margin-bottom: 1.25rem; }
.dog-profile__detail-row {
  display: flex;
  gap: 0.75rem;
  padding: 0.32rem 0;
  border-bottom: 1px solid var(--cream-border, #e8e0d5);
  font-size: 0.83rem;
}
.dog-profile__detail-label {
  color: var(--c-muted);
  font-weight: 600;
  min-width: 108px;
  flex-shrink: 0;
}
.dog-profile__detail-value { color: var(--c-text); }
.dog-profile__detail-note {
  font-size: 0.74rem;
  color: var(--c-muted);
  font-style: italic;
  margin: 0.5rem 0 0;
  line-height: 1.4;
}
.dog-profile__section-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--brown);
  margin: 1.1rem 0 0.35rem;
}
.dog-profile__bio {
  font-size: 0.87rem;
  line-height: 1.7;
  color: var(--c-muted);
  margin: 0 0 0.5rem;
}
.dog-profile__certs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.25rem;
}
.dog-profile__embark {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.76rem;
  color: var(--c-accent-2);
  text-decoration: underline;
}

/* ── Genetics key (i) ──────────────────────────────────────────
   The genotype row prints nine allele pairs with nothing explaining
   them. This is the explainer, opened from an (i) beside the label.
   CSS-only: :hover for mice, :focus-within for keyboard AND touch
   (tapping the button focuses it), so no JS runs and the baked markup
   is byte-identical to the runtime re-render. */
.gkey { position: relative; display: inline-block; margin-left: 0.35rem; }
/* Bridges the gap between the (i) and the panel so moving the pointer toward
   the panel doesn't drop :hover and close it. Same fix as the nav dropdown
   (.nav__has-dropdown::after). Without it the panel is unusable the moment it
   needs any interaction at all. */
.gkey::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -0.75rem;
  right: -0.75rem;
  height: 12px;
  display: none;
}
.gkey:hover::after, .gkey:focus-within::after { display: block; }
.gkey__btn {
  width: 15px; height: 15px; padding: 0; border-radius: 50%;
  border: 1px solid var(--c-accent-2);
  background: transparent; color: var(--c-accent-2);
  font-family: var(--font-sans); font-size: 0.6rem; font-weight: 700;
  font-style: italic; line-height: 1; cursor: help; vertical-align: middle;
}
/* --c-on-accent is the purpose-built token for text on an accent fill: white
   in light, #0E1C2B in dark. NOT #fff — in dark --c-accent-2 is the light blue
   #5FAEE3, where white falls to 2.43:1. (7.09:1 with this token.) */
.gkey__btn:hover, .gkey__btn:focus-visible { background: var(--c-accent-2); color: var(--c-on-accent); }
.gkey__panel {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: 0;
  display: none;
  /* Never wider than the viewport allows — an absolutely positioned
     panel can still create horizontal page overflow on a phone. */
  width: max-content; max-width: min(400px, calc(100vw - 2.5rem));
  padding: 0.75rem 0.9rem;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 7px; box-shadow: 0 6px 24px rgba(22,49,75,0.16);
  text-align: left; white-space: normal; cursor: auto;
  /* Safety net only — the panel should never actually reach this. If it ever
     does, the ::after bridge above is what makes scrolling into it possible.
     ★ Minus --rd-consent-h: cookie-consent.js publishes the banner's measured
     height there while it is up, and the banner is fixed to the bottom at
     z-index 10000, so anything under it is unreachable rather than merely
     off-screen. The first-time visitor who still has the banner is exactly the
     one who needs this key. The var is removed once they choose, and the panel
     goes back to full height on its own. (Same mechanism the floating theme
     pill already uses.) */
  max-height: calc(85vh - var(--rd-consent-h, 0px));
  overflow-y: auto; overscroll-behavior: contain;
}
/* On a short laptop window there isn't room below the row for the full panel.
   Cap it to what's actually there; the ::after bridge makes scrolling into it
   work, which is the half of this that was broken before. */
@media (max-height: 820px) {
  .gkey__panel { max-height: calc(54vh - var(--rd-consent-h, 0px)); }
}
.gkey:hover .gkey__panel, .gkey:focus-within .gkey__panel { display: block; }
.gkey__title {
  display: block; font-family: var(--font-sans); font-size: 0.6rem;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-muted); margin-bottom: 0.4rem;
}
.gkey__title--sub { margin-top: 0.7rem; }
.gkey__intro {
  display: block; font-family: var(--font-sans); font-size: 0.72rem;
  line-height: 1.5; color: var(--c-text); margin-bottom: 0.6rem;
}
.gkey__table { width: 100%; border-collapse: collapse; }
.gkey__table td {
  padding: 0.14rem 0; vertical-align: top;
  font-family: var(--font-sans); font-size: 0.71rem; line-height: 1.4;
}
.gkey__code {
  white-space: nowrap; padding-right: 0.6rem !important;
  color: var(--c-accent-2); font-weight: 700;
}
.gkey__what { color: var(--c-text); }
.gkey__extra, .gkey__notes {
  display: block; font-family: var(--font-sans); font-size: 0.68rem;
  line-height: 1.5; color: var(--c-muted);
}
.gkey__notes { margin-bottom: 0.6rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--c-border); }

/* On a phone a 330px panel anchored to the (i) would run off the right edge.
   Anchor it to the ROW instead and let it span the card's full width.
   ★ .gkey must NOT simply go position:static — then top:100% resolves against
   the whole 862px text column and the panel opens far below it, outside the
   overflow:auto box. Give the row the positioning context explicitly. */
@media (max-width: 600px) {
  .dog-profile__detail-row { position: relative; }
  .gkey { position: static; }
  .gkey__panel {
    top: calc(100% + 6px); left: 0; right: 0;
    width: auto; max-width: none;
    /* Deliberately does NOT subtract --rd-consent-h. On a phone the banner is
       ~232px of a ~664px screen, leaving ~59px below the row — subtracting it
       crushed the panel to 133px. Here the panel is anchored to the row, so
       scrolling the page slides it out from under the fixed banner and the
       content stays reachable; on desktop it was trapped inside a capped
       scroll box instead. Bigger panel you scroll to beats a tiny one. */
    max-height: 55vh;
  }
}

/* Sits directly above the Embark link, on its own line — the two are
   different offers (explain the notation vs. open the full panel). */
.dog-profile__genetics-help {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.76rem;
  color: var(--c-accent-2);
  text-decoration: underline;
}
.dog-profile__genetics-help:hover { text-decoration: none; }

@media (max-width: 900px) {
  .dog-profile__wrapper { flex-direction: column; min-height: auto; }
  .dog-profile__image-col {
    flex: none;
    height: 400px;
    border-radius: 8px 8px 0 0;
  }
  .dog-profile__text-col {
    flex: none;
    border-radius: 0 0 8px 8px;
    animation: dpSlideInMobile 1.3s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards;
  }
  @keyframes dpSlideInMobile {
    from { transform: translateY(-30px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
}
@media (max-width: 600px) {
  .dog-profile__text-col { padding: 1.75rem 1.25rem; }
  .dog-profile__image-col { height: 320px; }
  .dog-profile__back-bar { padding: 0.75rem 1rem 0; }
  .dog-profile__wrapper { padding: 1rem 1rem 3rem; }
}


/* ─── Compact refined footer ─────────────────────────────── */
.footer--compact { padding: 2rem 0 1.4rem; position: relative; }
.footer--compact::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(to right, transparent, rgba(201,147,58,0.55), transparent);
}
.footer--compact .footer__grid {
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 2rem;
  align-items: start;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(201,147,58,0.22);
}
.footer--compact .footer__brand-name { margin-top: -0.35rem; margin-bottom: 0.15rem; }
.footer--compact .footer__brand-sub  { margin-bottom: 1rem; }
.footer--compact .footer__heading {
  position: relative;
  margin-bottom: 1.1rem;
  padding-bottom: 0.6rem;
}
.footer--compact .footer__heading::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 28px; height: 2px;
  background: var(--c-accent);
}
.footer--compact .footer__links a {
  display: inline-block;
  white-space: nowrap;
  transition: color 0.2s ease, transform 0.2s ease;
}
.footer--compact .footer__links a:hover { color: var(--terra-light); transform: translateX(3px); }
.footer--compact .footer__location { margin-top: 0.9rem; }
.footer--compact .footer__location svg { width: 13px; height: 15px; flex-shrink: 0; }
.footer--compact .footer__location svg path { fill: var(--c-accent); }
.footer--compact .footer__logo { margin-top: 0.6rem; margin-left: 22px; width: 88px; height: auto; display: block; background: #FAF8F3; padding: 7px 9px; border-radius: 12px; box-sizing: content-box; box-shadow: 0 4px 14px rgba(0,0,0,0.22); }
.footer--compact .footer__social { margin-top: 1.1rem; gap: 0.9rem; }
.footer--compact .footer__bottom .footer__social { margin: 0; }
.footer--compact .footer__social-link {
  width: auto; height: auto; border-radius: 0;
  background: none; color: rgba(255,255,255,0.4);
  transition: color 0.2s ease, transform 0.2s ease;
}
.footer--compact .footer__social-link:hover { background: none; color: var(--terra-light); transform: translateY(-2px); }
.footer--compact .footer__social-link svg { width: 16px; height: 16px; }
.footer--compact .footer__bottom a { color: rgba(255,255,255,0.4); transition: color 0.2s ease; }
.footer--compact .footer__bottom a:hover { color: var(--terra-light); }
.footer--compact .footer__legal { display: flex; gap: 0.85rem; align-items: center; white-space: nowrap; }
.footer--compact .footer__legal .dot { color: rgba(255,255,255,0.22); }
@media (max-width: 900px) {
  .footer--compact .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
}
@media (max-width: 768px) {
  .footer--compact .footer__grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .footer--compact .footer__bottom .footer__social { justify-content: center; }
}

/* ── Explore more ─────────────────────────────────────────────
   Shared "where to go next" card grid. Lived in faq.html's page-scoped
   <style> until the parent profiles needed it too (2026-08-28). */
.explore-section { max-width: 860px; margin: 0 auto 2rem; }
.explore-heading {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
  text-align: center;
  margin-bottom: 1.25rem;
}
.explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.85rem;
}
.explore-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 7px;
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.explore-card:hover {
  border-color: rgba(44,124,181,0.3);
  box-shadow: 0 3px 12px rgba(44,124,181,0.09);
  transform: translateY(-2px);
}
.explore-card-icon { font-size: 1.2rem; margin-top: 0.1rem; flex-shrink: 0; }
.explore-card-label {
  font-family: var(--font-sans);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 0.15rem;
}
.explore-card-title {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--c-accent-2);
  line-height: 1.3;
}

@media (max-width: 768px) {
  .explore-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .explore-grid { grid-template-columns: 1fr; }
}

/* Honeypot wrapper — see assets/js/form-meta.js and the Worker's F2 checks.
   Hidden from sight AND from assistive tech, but present in the DOM so a bot
   that fills every input takes the bait.
   ★ NOT display:none — some bots skip those. ★ NOT left:-9999px — that widens
   the page and trips the horizontal-overflow test in layout-and-paths.spec.js. */
.rd-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* ─── Saved form draft notice ─────────────────────────────── */
/* ★ Role tokens only. `.form__success` above hardcodes greens and does NOT
   theme — do not copy that pattern here; this element appears in dark mode. */
.draft-notice {
  max-width: 900px;
  margin: 1.5rem auto 0;
  padding: 1.1rem 1.35rem;
  background: var(--c-highlight-bg);
  border: 1px solid var(--c-field-border);
  border-left: 4px solid var(--c-accent);
  border-radius: 8px;
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.6;
}
.draft-notice__lead { margin: 0; font-weight: 500; }
.draft-notice__note { margin: 0.6rem 0 0; font-size: 0.9rem; opacity: 0.85; }
.draft-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.9rem;
}
.draft-notice__btn {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1;
  padding: 0.7rem 1.1rem;      /* keeps the tap target at 44px with the border */
  min-height: 44px;
  border-radius: 6px;
  border: 1px solid var(--c-accent);
  background: var(--c-accent);
  color: var(--c-surface);
  cursor: pointer;
}
.draft-notice__btn:hover { opacity: 0.9; }
.draft-notice__btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.draft-notice__btn--quiet {
  background: transparent;
  color: var(--c-accent);
}
@media (max-width: 640px) {
  .draft-notice { margin-left: 1rem; margin-right: 1rem; }
  .draft-notice__btn { flex: 1 1 auto; }
}

/* ─── Planned-litter update note ──────────────────────────── */
/* Jo Ann's own words about a pairing, from data/pairings.json. Sits above the
   genetics block so a real update ("they're here, five days early") leads, while
   the DNA prediction below still carries the colour information nobody can read
   off newborn puppies yet. Role tokens only — this renders in dark mode too. */
.planned-card__update {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  background: var(--c-highlight-bg);
  border-left: 3px solid var(--c-accent);
  border-radius: 6px;
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 0.94rem;
  line-height: 1.6;
}
.planned-card__update-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 0.3rem;
}