/* =========================================================
   JAMES DOBERMAN PUPPIES — DESIGN SYSTEM
   Light-first: a warm off-white is the primary background, and
   cards, sheets and forms sit on it in true white so they lift
   without needing heavy shadows. Dark is kept only for the
   chrome that frames the content — the photo heroes, the CTA
   band and the footer — so the charcoal still carries weight
   but never sits behind body copy.

   Crimson is the single loud accent, rust (the breed's own
   markings) the quiet one. Geometry is square and bevelled —
   no pills, no soft blobs.

   Section surfaces, lightest to deepest:
     .band-soft   #FCFAF7  near-white lift
     (default)    #F7F4EF  warm off-white — the primary ground
     .band-tint   #EDE6DD  bone
   ========================================================= */

:root{
  /* --- surfaces --- */
  --bg:          #F7F4EF;   /* primary background — warm off-white */
  --soft:        #FCFAF7;   /* near-white alternating band */
  --tint:        #EDE6DD;   /* bone alternating band */
  --tint-2:      #E2D9CD;   /* tracks, inset fills, hovers */
  --card:        #FFFFFF;   /* cards / sheets / forms lift off the ground */

  /* --- dark chrome (hero scrims, CTA band, footer) --- */
  --dark:        #141110;
  --dark-2:      #0D0B0B;

  /* --- ink --- */
  --ink:         #14100F;   /* text on light */
  --ink-soft:    #554B47;   /* muted text on light */
  --bone:        #F1ECE6;   /* text on dark */
  --bone-soft:   #A79C96;   /* muted text on dark */

  /* --- accents --- */
  --red:         #C8102E;   /* on light */
  --red-bright:  #E11D2E;
  --red-deep:    #8C1019;
  --red-light:   #FF4C58;   /* on dark — the lighter red keeps contrast */
  --rust:        #B5652F;

  /* --- lines --- */
  --line:        rgba(20,16,15,.13);
  --line-2:      rgba(20,16,15,.26);
  --line-d:      rgba(241,236,230,.14);   /* on dark */
  --line-d-2:    rgba(241,236,230,.28);

  /* --- shadow --- */
  --sh-sm:       0 1px 3px rgba(20,16,15,.06);
  --sh-md:       0 6px 26px rgba(20,16,15,.09);
  --sh-lg:       0 20px 60px rgba(20,16,15,.16);

  /* --- type --- */
  --display:     "Oswald", "Arial Narrow", Impact, sans-serif;
  --body:        "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- metrics --- */
  --topbar-h:    36px;
  --header-h:    78px;
  --shell:       1280px;
  --gut:         26px;
  --ease:        cubic-bezier(.2,.8,.25,1);

  --bevel:       polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; font-size:1rem; }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

h1,h2,h3,h4,h5{
  font-family:var(--display); font-weight:600; line-height:1.03; color:var(--ink);
  margin:0 0 .45em; letter-spacing:-.005em; text-transform:uppercase;
}
h1{ font-size:clamp(2.6rem,6.4vw,5.2rem); }
h2{ font-size:clamp(1.9rem,3.9vw,3.1rem); }
h3{ font-size:clamp(1.25rem,2.1vw,1.65rem); }
h4{ font-size:1.08rem; letter-spacing:.02em; }
p{ margin:0 0 1.05em; color:var(--ink-soft); }

.shell{ width:100%; max-width:var(--shell); margin:0 auto; padding:0 var(--gut); }
.shell--narrow{ max-width:880px; }
.shell--mid{ max-width:1060px; }
section{ padding:104px 0; position:relative; }
@media(max-width:860px){ section{ padding:66px 0; } }

.ic-svg{ display:inline-flex; width:1em; height:1em; flex-shrink:0; }
.ic-svg svg{ width:100%; height:100%; display:block; }
.text-center{ text-align:center; }

/* ---------- Section surfaces ---------- */
.band-soft{ background:var(--soft); }
.band-tint{ background:var(--tint); }

/* Fine diagonal hatch — used sparingly as a texture break */
.band-hatch::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.7;
  background:repeating-linear-gradient(135deg,transparent 0 13px,rgba(20,16,15,.045) 13px 14px);
}
.band-hatch > *{ position:relative; z-index:1; }

/* ---------- Eyebrow label (red tick + tracked caps) ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--display); font-weight:500; font-size:.8rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--red);
  margin:0 0 20px;
}
.eyebrow::before{ content:""; width:34px; height:2px; background:var(--red); flex-shrink:0; }
.eyebrow.center::after{ content:""; width:34px; height:2px; background:var(--red); flex-shrink:0; }

.sec-head{ max-width:720px; margin-bottom:56px; }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-head.center .eyebrow{ justify-content:center; }
.sec-head p{ font-size:1.06rem; margin-bottom:0; }
.sec-head h2 + p{ margin-top:18px; }

/* Ghost index numeral above a heading */
.index-num{
  font-family:var(--display); font-weight:700; font-size:5.2rem; line-height:.8;
  color:transparent; -webkit-text-stroke:1.5px rgba(20,16,15,.17);
  display:block; margin-bottom:4px; user-select:none;
}

/* Corner reticle brackets — the site's signature frame */
.brackets{ position:relative; }
.brackets::before,.brackets::after{
  content:""; position:absolute; width:26px; height:26px; pointer-events:none; z-index:2;
  border:2px solid var(--red);
}
.brackets::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.brackets::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px; font-family:var(--display); font-weight:500; font-size:.92rem;
  letter-spacing:.14em; text-transform:uppercase; line-height:1; white-space:nowrap;
  border:2px solid transparent; background:none; position:relative;
  transition:background .22s var(--ease), color .22s var(--ease),
             border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn-red{ background:var(--red); color:#fff; clip-path:var(--bevel); }
.btn-red:hover{ background:var(--red-bright); color:#fff; box-shadow:var(--sh-md); }
.btn-ink{ background:var(--ink); color:#fff; clip-path:var(--bevel); }
.btn-ink:hover{ background:var(--red); color:#fff; box-shadow:var(--sh-md); }
.btn-bone{ background:#fff; color:var(--ink); clip-path:var(--bevel); }
.btn-bone:hover{ background:#fff; color:var(--red-deep); box-shadow:var(--sh-md); }
.btn-ghost{ border-color:var(--line-2); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--red); background:var(--red); color:#fff; }
.btn-block{ width:100%; }
.btn-sm{ padding:11px 19px; font-size:.79rem; letter-spacing:.11em; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none !important; }

/* Ghost buttons sitting on a photo have to go light instead */
.hero .btn-ghost,.page-hero .btn-ghost,.cta-band .btn-ghost{
  color:#fff; border-color:rgba(255,255,255,.45);
}
.hero .btn-ghost:hover,.page-hero .btn-ghost:hover,.cta-band .btn-ghost:hover{
  background:var(--red); border-color:var(--red); color:#fff;
}

.link-red{ color:var(--red); font-weight:600; border-bottom:1px solid currentColor; }
.link-red:hover{ color:var(--red-deep); }

/* ---------- Top utility bar ---------- */
.topbar{
  background:var(--red-deep); color:#F6E7E8; min-height:var(--topbar-h);
  display:flex; align-items:center; font-size:.79rem; letter-spacing:.05em;
  position:relative; z-index:960;
}
.topbar .shell{ display:flex; align-items:center; justify-content:space-between; gap:18px; }
.topbar .tb-note{ display:flex; align-items:center; gap:9px; font-weight:600; text-transform:uppercase; letter-spacing:.13em; font-size:.72rem; }
.topbar .tb-note .dot{ width:7px; height:7px; background:#6BE07A; border-radius:50%; box-shadow:0 0 0 3px rgba(107,224,122,.22); flex-shrink:0; }
.topbar .tb-links{ display:flex; align-items:center; gap:24px; }
.topbar .tb-links a{ display:inline-flex; align-items:center; gap:7px; opacity:.92; padding:10px 2px; }
.topbar .tb-links a:hover{ opacity:1; color:#fff; }
/* Below the wide breakpoints the note and the email both shorten rather than
   disappearing — an icon on its own is neither readable nor a real tap target. */
.topbar .tb-alt,.topbar .tb-short{ display:none; }
@media(max-width:760px){
  .topbar .tb-label{ display:none; }
  .topbar .tb-short{ display:inline; }
}
@media(max-width:620px){
  .topbar .tb-lead{ display:none; }
  .topbar .tb-alt{ display:inline; }
  .topbar .tb-note{ letter-spacing:.09em; }
}

/* ---------- Header ----------
   Transparent while it sits over a photo hero, solid white once
   scrolled — every piece of chrome inside it swaps colour. */
.site-header{
  position:sticky; top:0; z-index:950; width:100%;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:22px;
  min-height:var(--header-h);
}
/* These carry .brand-lock so they outrank the .brand-lock base colours
   defined below, whatever the source order — without it the wordmark
   renders in ink against the dark photo and vanishes. */
.site-header .brand-lock .bl-1{ color:#fff; }
.site-header .brand-lock .bl-1 em{ color:var(--red-light); }
.site-header .brand-lock .bl-2{ color:rgba(255,255,255,.7); }
.site-header .nav-link{ color:#fff; }
.site-header .nav-link.active{ color:#fff; }
.site-header .nav-toggle{ border-color:rgba(255,255,255,.42); }
.site-header .nav-toggle span{ background:#fff; }

.site-header.solid,.site-header.scrolled{
  background:var(--card); border-bottom-color:var(--line); box-shadow:0 2px 20px rgba(20,16,15,.08);
}
.site-header.solid .brand-lock .bl-1,.site-header.scrolled .brand-lock .bl-1{ color:var(--ink); }
.site-header.solid .brand-lock .bl-1 em,.site-header.scrolled .brand-lock .bl-1 em{ color:var(--red); }
.site-header.solid .brand-lock .bl-2,.site-header.scrolled .brand-lock .bl-2{ color:var(--ink-soft); }
.site-header.solid .nav-link,.site-header.scrolled .nav-link{ color:var(--ink); }
.site-header.solid .nav-link.active,.site-header.scrolled .nav-link.active{ color:var(--red); }
.site-header.solid .nav-toggle,.site-header.scrolled .nav-toggle{ border-color:var(--line-2); }
.site-header.solid .nav-toggle span,.site-header.scrolled .nav-toggle span{ background:var(--ink); }

.brand-lock{ display:flex; align-items:center; gap:13px; flex-shrink:0; }
.brand-lock img{ width:40px; height:40px; }
.brand-lock .bl-text{ display:block; line-height:1; }
.brand-lock .bl-1{
  display:block; font-family:var(--display); font-weight:600; font-size:1.16rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink);
}
.brand-lock .bl-1 em{ font-style:normal; color:var(--red); }
.brand-lock .bl-2{
  display:block; font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:5px;
}
@media(max-width:420px){
  .brand-lock img{ width:36px; height:36px; }
  .brand-lock .bl-1{ font-size:.98rem; }
  .brand-lock .bl-2{ letter-spacing:.16em; }
}

.nav{ display:flex; align-items:center; gap:2px; }
.nav > li{ position:relative; }
.nav-link{
  display:flex; align-items:center; gap:6px; padding:12px 14px;
  font-family:var(--display); font-weight:400; font-size:.87rem;
  letter-spacing:.12em; text-transform:uppercase; position:relative;
}
.nav-link::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav-link:hover::after,.nav-link.active::after{ transform:scaleX(1); }
.caret{ font-size:.6em; transition:transform .25s; }
.has-drop:hover .caret{ transform:rotate(180deg); }
.dropdown{
  position:absolute; top:100%; left:0; min-width:246px; background:var(--card);
  border:1px solid var(--line); border-top:2px solid var(--red); padding:8px;
  box-shadow:var(--sh-md);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
}
.has-drop:hover .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{
  display:block; padding:10px 14px; font-size:.9rem; color:var(--ink-soft);
  border-left:2px solid transparent; transition:.2s;
}
.dropdown a:hover{ background:var(--tint); color:var(--ink); border-left-color:var(--red); }
.header-cta{ flex-shrink:0; }
@media(max-width:1120px){ .nav,.header-cta{ display:none; } }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:46px; padding:0 11px; background:transparent;
  border:1px solid var(--line-2);
}
.nav-toggle span{ display:block; height:2px; width:100%; background:var(--ink); transition:.3s var(--ease); }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media(max-width:1120px){ .nav-toggle{ display:flex; } }

/* ---------- Mobile drawer ---------- */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(20,16,15,.55); opacity:0; visibility:hidden;
  transition:.3s; z-index:970; backdrop-filter:blur(3px);
}
.drawer-overlay.open{ opacity:1; visibility:visible; }
.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(340px,88vw);
  background:var(--card); border-left:3px solid var(--red); box-shadow:var(--sh-lg);
  z-index:980; padding:26px 24px; overflow-y:auto;
  transform:translateX(100%); transition:transform .36s var(--ease);
}
.drawer.open{ transform:translateX(0); }
.drawer-close{
  background:none; border:1px solid var(--line-2); color:var(--ink);
  width:40px; height:40px; font-size:1.05rem; margin-bottom:22px;
}
.drawer-close:hover{ border-color:var(--red); color:var(--red); }
.drawer > ul > li > a,.drawer-parent{
  display:block; width:100%; text-align:left; padding:14px 0;
  font-family:var(--display); font-size:1rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink); border-bottom:1px solid var(--line);
  background:none; border-top:0; border-left:0; border-right:0;
}
.drawer > ul > li > a:hover,.drawer-parent:hover{ color:var(--red); }
.drawer-sub{ max-height:0; overflow:hidden; transition:max-height .34s var(--ease); }
.drawer-sub.open{ max-height:340px; }
.drawer-sub a{ display:block; padding:11px 0 11px 18px; font-size:.92rem; color:var(--ink-soft); border-left:1px solid var(--line); }
.drawer-sub a:hover{ color:var(--ink); border-left-color:var(--red); }

/* ---------- HERO (full-bleed background photo) ---------- */
.hero{
  position:relative; min-height:calc(100svh - var(--header-h) - var(--topbar-h));
  display:flex; align-items:flex-end; padding:0; overflow:hidden;
  margin-top:calc(-1 * var(--header-h)); background:var(--dark);
}
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 42%; z-index:0;
}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, rgba(15,12,12,.90) 0%, rgba(15,12,12,.70) 34%, rgba(15,12,12,.26) 62%, rgba(15,12,12,.50) 100%),
    linear-gradient(to top, rgba(15,12,12,.96) 0%, rgba(15,12,12,.22) 42%, rgba(15,12,12,.62) 100%);
}
.hero-scrim::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg,transparent 0 15px,rgba(0,0,0,.10) 15px 16px);
}
.hero-inner{
  position:relative; z-index:2; width:100%;
  padding-top:calc(var(--header-h) + 96px);
}
.hero-rail{
  position:absolute; left:calc(var(--gut) - 4px); top:38%; z-index:3;
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--display); font-size:.72rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--bone-soft); display:flex; align-items:center; gap:18px;
}
.hero-rail::after{ content:""; width:1px; height:82px; background:linear-gradient(to bottom,var(--red-light),transparent); }
@media(max-width:1400px){ .hero-rail{ display:none; } }

.hero-flag{
  display:inline-flex; align-items:center; gap:10px; background:var(--red);
  color:#fff; font-family:var(--display); font-weight:500; font-size:.76rem;
  letter-spacing:.2em; text-transform:uppercase; padding:9px 18px;
  clip-path:var(--bevel); margin-bottom:26px;
}
.hero h1{
  font-size:clamp(2.9rem,8.2vw,6.6rem); font-weight:700; line-height:.93;
  letter-spacing:-.015em; margin:0 0 24px; color:#fff;
  text-shadow:0 4px 40px rgba(0,0,0,.5);
}
.hero h1 .red{ color:var(--red-light); }
.hero-sub{
  font-size:clamp(1rem,1.35vw,1.16rem); max-width:600px; color:#DFD7D2;
  margin:0 0 34px; border-left:2px solid var(--red); padding-left:20px;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:74px; }

.hero-stats{
  position:relative; z-index:2; border-top:1px solid var(--line-d-2);
  background:linear-gradient(to top,rgba(12,10,10,.82),rgba(12,10,10,.28));
  backdrop-filter:blur(4px);
}
.hero-stats .grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.hero-stats .cell{ padding:26px 10px 30px; border-left:1px solid var(--line-d); }
.hero-stats .cell:first-child{ border-left:0; padding-left:0; }
.hero-stats .num{
  font-family:var(--display); font-weight:600; font-size:clamp(1.8rem,3.2vw,2.7rem);
  line-height:1; color:#fff;
}
.hero-stats .lbl{
  font-size:.7rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--bone-soft); margin-top:9px;
}
@media(max-width:860px){
  /* Reserve the hero's height on phones. The headline is huge here, so when
     the web font swaps in it grows by ~20px and shoves every section below it
     down the page — a large layout shift. With a floor on the section height
     the headline can resize inside it without moving anything else. */
  .hero{ min-height:min(86svh, 720px); }
  .hero-inner{ padding-top:calc(var(--header-h) + 66px); }
  .hero-actions{ margin-bottom:52px; }
  .hero-actions .btn{ flex:1 1 auto; }
  .hero-stats .grid{ grid-template-columns:repeat(2,1fr); }
  .hero-stats .cell{ padding:20px 8px 22px; border-top:1px solid var(--line-d); }
  .hero-stats .cell:nth-child(-n+2){ border-top:0; }
  .hero-stats .cell:nth-child(odd){ border-left:0; padding-left:0; }
}

/* Interior page banner — same treatment, shorter */
.page-hero{
  position:relative; margin-top:calc(-1 * var(--header-h));
  padding:calc(var(--header-h) + 108px) 0 92px; overflow:hidden; background:var(--dark);
}
.page-hero .hero-scrim{
  background:linear-gradient(95deg,rgba(15,12,12,.93) 0%,rgba(15,12,12,.78) 45%,rgba(15,12,12,.44) 100%);
}
.page-hero .inner{ position:relative; z-index:2; }
.page-hero h1{ font-size:clamp(2.3rem,5.4vw,4.1rem); color:#fff; margin-bottom:18px; }
.page-hero p{ max-width:620px; color:#DFD7D2; font-size:1.06rem; margin-bottom:0; }
.page-hero + section{ padding-top:64px; }
@media(max-width:860px){
  .page-hero{ padding:calc(var(--header-h) + 74px) 0 62px; }
  .page-hero + section{ padding-top:46px; }
}
.crumbs{
  display:flex; gap:10px; align-items:center; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-soft); margin-bottom:22px; flex-wrap:wrap;
}
.crumbs a:hover{ color:var(--red-light); }
.crumbs .sep{ color:var(--red-light); }

/* ---------- Marquee ticker ---------- */
.ticker{ background:var(--red); color:#fff; overflow:hidden; padding:15px 0; }
.ticker-track{ display:flex; width:max-content; animation:tick 38s linear infinite; }
.ticker-track > span{
  display:inline-flex; align-items:center; gap:16px; padding:0 26px;
  font-family:var(--display); font-weight:500; font-size:.86rem;
  letter-spacing:.24em; text-transform:uppercase; white-space:nowrap;
}
.ticker-track > span::after{ content:""; width:6px; height:6px; background:#fff; transform:rotate(45deg); opacity:.75; }
@keyframes tick{ to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .ticker-track{ animation:none; } }

/* ---------- Pillars (numbered feature columns) ---------- */
.pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); }
.pillar{ padding:38px 30px 34px; border-right:1px solid var(--line); transition:background .3s var(--ease); }
.pillar:last-child{ border-right:0; }
.pillar:hover{ background:var(--card); }
.pillar .p-ic{
  width:46px; height:46px; display:grid; place-items:center; font-size:1.35rem;
  color:var(--red); border:1px solid var(--line-2); margin-bottom:22px;
  transition:.3s var(--ease);
}
.pillar:hover .p-ic{ background:var(--red); color:#fff; border-color:var(--red); }
.pillar h3{ font-size:1.16rem; margin-bottom:12px; }
.pillar p{ font-size:.95rem; margin:0; }
.pillar .p-num{
  font-family:var(--display); font-size:.74rem; letter-spacing:.2em;
  color:var(--red); display:block; margin-bottom:16px;
}
@media(max-width:1000px){
  .pillars{ grid-template-columns:repeat(2,1fr); }
  .pillar{ border-bottom:1px solid var(--line); }
  .pillar:nth-child(2n){ border-right:0; }
}
@media(max-width:600px){
  .pillars{ grid-template-columns:1fr; }
  .pillar{ border-right:0; padding:30px 0; }
}

/* ---------- Puppy dossier cards ---------- */
.pup-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media(max-width:1080px){ .pup-grid{ grid-template-columns:repeat(2,1fr); gap:20px; } }
@media(max-width:640px){ .pup-grid{ grid-template-columns:1fr; } }

.pup-card{
  background:var(--card); border:1px solid var(--line); display:flex; flex-direction:column;
  position:relative; box-shadow:var(--sh-sm);
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pup-card:hover{ border-color:rgba(200,16,46,.45); transform:translateY(-4px); box-shadow:var(--sh-md); }
.pup-media{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--tint); }
.pup-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.pup-card:hover .pup-media img{ transform:scale(1.055); }
.pup-media::after{
  content:""; position:absolute; inset:auto 0 0 0; height:52%;
  background:linear-gradient(to top,rgba(12,10,10,.86),transparent);
}
.pup-id{
  position:absolute; top:0; left:0; z-index:2; background:var(--red); color:#fff;
  font-family:var(--display); font-weight:600; font-size:.82rem; letter-spacing:.14em;
  padding:8px 15px; clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);
}
.pup-price{
  position:absolute; top:14px; right:14px; z-index:2;
  background:rgba(12,10,10,.82); border:1px solid var(--line-d-2); color:#fff;
  font-family:var(--display); font-weight:600; font-size:1rem; letter-spacing:.03em;
  padding:7px 14px; backdrop-filter:blur(4px);
}
.pup-namebar{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px 20px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
}
.pup-namebar .pn{
  display:block;
  font-family:var(--display); font-weight:600; font-size:1.7rem; line-height:1;
  color:#fff; text-transform:uppercase; letter-spacing:.02em;
}
.pup-namebar .ps{
  display:inline-flex; align-items:center; gap:6px; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:#E6C3A4; margin-top:7px;
}
.pup-status{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--display);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:#fff;
  background:rgba(107,224,122,.18); border:1px solid rgba(107,224,122,.55);
  padding:5px 10px; white-space:nowrap;
}
.pup-status .dot{ width:6px; height:6px; background:#6BE07A; border-radius:50%; }

.pup-body{ padding:22px 20px 20px; display:flex; flex-direction:column; flex:1; }
.pup-spec{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; margin-bottom:18px; }
.pup-spec div{
  display:flex; justify-content:space-between; gap:8px; padding:9px 0;
  border-bottom:1px solid var(--line); font-size:.83rem;
}
.pup-spec .k{
  color:var(--ink-soft); letter-spacing:.11em; text-transform:uppercase; font-size:.72rem;
  align-self:center;
}
.pup-spec .v{ font-weight:600; text-align:right; }
@media(max-width:400px){ .pup-spec{ grid-template-columns:1fr; } }

.pup-facts{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
.pup-fact{
  display:inline-flex; align-items:center; gap:6px; font-size:.7rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
  border:1px solid var(--line); padding:5px 9px;
}
.pup-fact .ic-svg{ color:var(--red); font-size:.85rem; }

.acc-btn{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  background:none; border:0; border-top:1px solid var(--line); padding:14px 0;
  font-family:var(--display); font-size:.85rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink); text-align:left;
}
.acc-btn:hover{ color:var(--red); }
.acc-btn .plus{ width:14px; height:14px; color:var(--red); transition:transform .3s var(--ease); }
.acc-btn[aria-expanded="true"] .plus{ transform:rotate(135deg); }
.acc-panel{ max-height:0; overflow:hidden; transition:max-height .38s var(--ease); }
.acc-panel p{ font-size:.92rem; padding-bottom:14px; margin:0; }
.pup-body .btn{ margin-top:auto; }

/* Filter bar */
.filter-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; padding:16px 0 18px; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); margin-bottom:38px;
}
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  background:none; border:1px solid var(--line-2); color:var(--ink);
  padding:12px 20px; font-family:var(--display); font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase; transition:.24s var(--ease);
}
.chip:hover{ border-color:var(--red); color:var(--red); }
.chip.active{ background:var(--red); border-color:var(--red); color:#fff; }
.count-badge{
  font-family:var(--display); font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- Split section ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split.tight{ gap:48px; }
@media(max-width:940px){ .split{ grid-template-columns:1fr; gap:40px; } }
.split-img{ position:relative; }
.split-img img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.split-img.wide img{ aspect-ratio:5/4; }
.img-tag{
  position:absolute; bottom:0; left:0; background:var(--red); color:#fff;
  font-family:var(--display); font-size:.74rem; letter-spacing:.2em;
  text-transform:uppercase; padding:11px 20px; z-index:3;
}

/* Spec / data list */
.spec-list{ border-top:1px solid var(--line); margin:0 0 30px; }
.spec-list li{
  display:flex; align-items:flex-start; gap:16px; padding:15px 0;
  border-bottom:1px solid var(--line);
}
.spec-list .sl-k{
  flex:0 0 152px; font-family:var(--display); font-size:.76rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--red); padding-top:3px;
}
.spec-list .sl-v{ flex:1; }
.spec-list .sl-v small{ color:var(--ink-soft); }
@media(max-width:520px){ .spec-list li{ flex-direction:column; gap:5px; } .spec-list .sl-k{ flex:none; } }

/* ---------- Process timeline (red spine) ---------- */
.timeline{ position:relative; padding-left:60px; }
.timeline::before{
  content:""; position:absolute; left:19px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(to bottom,var(--red),rgba(200,16,46,.15));
}
.tl-step{ position:relative; padding:0 0 44px; }
.tl-step:last-child{ padding-bottom:0; }
.tl-step .tl-dot{
  position:absolute; left:-60px; top:-2px; width:40px; height:40px;
  display:grid; place-items:center; background:var(--bg); border:2px solid var(--red);
  font-family:var(--display); font-weight:600; font-size:.92rem; color:var(--red);
}
.band-soft .tl-step .tl-dot{ background:var(--soft); }
.band-tint .tl-step .tl-dot{ background:var(--tint); }
.tl-step h3{ font-size:1.24rem; margin-bottom:9px; }
.tl-step p{ margin:0; }
@media(max-width:600px){
  .timeline{ padding-left:48px; }
  .timeline::before{ left:15px; }
  .tl-step .tl-dot{ left:-48px; width:32px; height:32px; font-size:.8rem; }
}

/* ---------- Reviews ---------- */
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media(max-width:980px){ .review-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .review-grid{ grid-template-columns:1fr; } }
.review-card{
  border:1px solid var(--line); padding:30px 26px; background:var(--card);
  display:flex; flex-direction:column; position:relative; box-shadow:var(--sh-sm);
}
.review-card::before{
  content:"”"; position:absolute; top:-6px; right:20px; font-family:var(--display);
  font-size:5rem; line-height:1; color:var(--red); opacity:.18;
}
.review-stars{ color:var(--rust); letter-spacing:.22em; font-size:.95rem; margin-bottom:15px; }
.review-stars.center{ display:flex; justify-content:center; }
.review-quote{ font-size:.97rem; flex:1; color:var(--ink-soft); }
.review-person{ display:flex; align-items:center; gap:13px; padding-top:17px; border-top:1px solid var(--line); }
.review-avatar{
  width:42px; height:42px; display:grid; place-items:center; flex-shrink:0;
  background:var(--red); color:#fff; font-family:var(--display); font-weight:600; font-size:.9rem;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.review-name{ font-family:var(--display); font-size:.98rem; letter-spacing:.06em; text-transform:uppercase; }
.review-loc{ font-size:.76rem; color:var(--ink-soft); letter-spacing:.05em; }

.rating-summary{
  display:grid; grid-template-columns:230px 1fr; gap:44px; align-items:center;
  border:1px solid var(--line); background:var(--card); box-shadow:var(--sh-sm);
  padding:36px; margin-bottom:52px;
}
@media(max-width:760px){ .rating-summary{ grid-template-columns:1fr; gap:28px; } }
.rating-big{ font-family:var(--display); font-weight:600; font-size:4.4rem; line-height:1; color:var(--red); }
.rating-note{ font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin-top:10px; }
.rating-row{ display:flex; align-items:center; gap:14px; margin-bottom:10px; font-size:.84rem; }
.rating-row .rr-l{ width:52px; color:var(--ink-soft); letter-spacing:.08em; }
.rating-track{ flex:1; height:7px; background:var(--tint-2); overflow:hidden; }
.rating-bar-fill{ height:100%; width:0; background:var(--red); transition:width 1.1s var(--ease); }
.rating-row .rr-n{ width:38px; text-align:right; color:var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:18px; width:100%;
  background:none; border:0; padding:24px 0; text-align:left;
  font-family:var(--display); font-size:1.05rem; letter-spacing:.045em;
  text-transform:uppercase; color:var(--ink);
}
.faq-q:hover{ color:var(--red); }
.faq-q .plus{ width:16px; height:16px; flex-shrink:0; color:var(--red); transition:transform .3s var(--ease); }
.faq-q[aria-expanded="true"] .plus{ transform:rotate(135deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a p{ padding-bottom:24px; margin:0; max-width:76ch; }

/* ---------- CTA band (photo + red wash) ---------- */
.cta-band{ position:relative; overflow:hidden; padding:110px 0; text-align:center; background:var(--dark); }
.cta-band .hero-bg{ object-position:center 30%; }
.cta-band .wash{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(120deg,rgba(140,16,25,.93),rgba(19,16,16,.88));
}
.cta-band .wash::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg,transparent 0 15px,rgba(0,0,0,.12) 15px 16px);
}
.cta-band .inner{ position:relative; z-index:2; }
.cta-band h2{ color:#fff; margin-bottom:20px; }
.cta-band p{ color:#EBDCDC; max-width:600px; margin:0 auto 34px; }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* Small heading that keeps h4's size at a higher document level, so the
   outline never skips a rank purely for visual reasons. */
.h-sm{ font-size:1.08rem; letter-spacing:.02em; }

/* ---------- Callout ---------- */
.callout{
  display:flex; gap:22px; align-items:flex-start; padding:30px 32px; background:var(--card);
  border:1px solid var(--line); border-left:3px solid var(--red); box-shadow:var(--sh-sm);
}
.callout .co-ic{ font-size:1.5rem; color:var(--red); flex-shrink:0; margin-top:3px; }
a.callout{ transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
a.callout:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); }
@media(max-width:560px){ .callout{ flex-direction:column; gap:14px; padding:24px; } }

/* ---------- Document sheet (policy / legal pages) ---------- */
.sheet{
  background:var(--card); padding:56px 60px; position:relative;
  border:1px solid var(--line); border-top:4px solid var(--red); box-shadow:var(--sh-md);
}
@media(max-width:700px){ .sheet{ padding:36px 24px; } }
.sheet h2{ font-size:clamp(1.5rem,2.6vw,2rem); margin-top:44px; }
.sheet h2:first-of-type{ margin-top:0; }
.sheet h3{ font-size:1.15rem; margin-top:30px; }
.sheet li{ color:var(--ink-soft); }
.sheet ul.bullets{ margin:0 0 20px; }
.sheet ul.bullets li{ position:relative; padding:0 0 11px 26px; }
.sheet ul.bullets li::before{
  content:""; position:absolute; left:2px; top:11px; width:7px; height:7px;
  background:var(--red); transform:rotate(45deg);
}
.sheet ol.numbered{ margin:0 0 20px; padding-left:22px; list-style:decimal; }
.sheet ol.numbered li{ padding:0 0 11px 6px; }
.sheet .doc-meta{
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--red-deep);
  border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:30px;
}
.sheet strong{ color:var(--ink); }
.sheet a:not(.btn){ color:var(--red); border-bottom:1px solid rgba(200,16,46,.35); font-weight:600; }
.sheet a:not(.btn):hover{ color:var(--red-deep); }

/* ---------- Forms ---------- */
.form-sheet{
  background:var(--card); border:1px solid var(--line); border-top:3px solid var(--red);
  padding:38px 36px; box-shadow:var(--sh-sm);
}
@media(max-width:600px){ .form-sheet{ padding:26px 20px; } }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-grid .full{ grid-column:1/-1; }
@media(max-width:640px){ .form-grid{ grid-template-columns:1fr; } .form-grid .full{ grid-column:auto; } }
.field label{
  display:block; font-family:var(--display); font-size:.76rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px;
}
.field .req{ color:var(--red); }
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; background:var(--bg); color:var(--ink);
  border:1px solid var(--line-2); border-radius:0;
  transition:border-color .22s, background .22s, box-shadow .22s;
}
.field textarea{ min-height:132px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--red); background:var(--card); box-shadow:0 0 0 3px rgba(200,16,46,.10);
}
.field input::placeholder,.field textarea::placeholder{ color:rgba(85,75,71,.5); }
.field input.invalid{ border-color:var(--red); }
.field small{ display:block; font-size:.76rem; color:var(--ink-soft); margin-top:7px; }
.field-error{ display:block; font-size:.78rem; color:var(--red); margin-top:7px; font-weight:600; }
.hint-text{ font-size:.9rem; color:var(--ink-soft); }

.checkbox-row{ display:flex; align-items:flex-start; gap:11px; padding:10px 0; }
.checkbox-row input{ width:19px; height:19px; margin-top:3px; accent-color:var(--red); flex-shrink:0; }
.checkbox-row label{ margin:0; font-family:var(--body); font-size:.95rem; letter-spacing:0; text-transform:none; color:var(--ink); }

.form-status{ margin-top:16px; font-size:.92rem; font-weight:600; min-height:22px; }
.form-status.success{ color:#1F7A32; }
.form-status.error{ color:var(--red-deep); }

/* The agreement's step titles are h2 for a correct outline, but should still
   look like the h3-sized panel headings they replaced. */
.h-step{ font-size:clamp(1.25rem,2.1vw,1.65rem); }

/* Stepped tabs */
.tabs{ display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line); border-bottom:0; background:var(--card); }
.tab-btn{
  flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:16px 12px; background:none; border:0; border-right:1px solid var(--line);
  font-family:var(--display); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); transition:.24s var(--ease); cursor:default;
}
.tab-btn:last-child{ border-right:0; }
.tab-btn .num{
  width:24px; height:24px; display:grid; place-items:center; font-size:.72rem;
  border:1px solid currentColor; flex-shrink:0;
}
.tab-btn.active{ background:var(--red); color:#fff; cursor:pointer; }
.tab-btn.done{ color:var(--red); cursor:pointer; }
.tab-btn.done .num{ background:var(--red); border-color:var(--red); color:#fff; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:fadeUp .4s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
@media(max-width:760px){ .tab-btn{ flex:1 1 33%; border-bottom:1px solid var(--line); } .tab-btn .num{ display:none; } }

/* Puppy picker (sales agreement) */
.pick-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media(max-width:900px){ .pick-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .pick-grid{ grid-template-columns:1fr; } }
.pick{
  display:flex; align-items:center; gap:13px; padding:12px; cursor:pointer;
  border:1px solid var(--line-2); transition:.24s var(--ease); position:relative;
}
.pick:hover{ border-color:var(--red); }
.pick img{ width:56px; height:56px; object-fit:cover; flex-shrink:0; }
.pick .pn{ font-family:var(--display); font-size:1rem; letter-spacing:.07em; text-transform:uppercase; }
.pick .pp{ font-size:.78rem; color:var(--ink-soft); }
.pick input{ margin-left:auto; width:19px; height:19px; accent-color:var(--red); flex-shrink:0; }
.pick:has(input:checked){ border-color:var(--red); background:rgba(200,16,46,.06); }

/* Delivery option cards */
.ship-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media(max-width:700px){ .ship-grid{ grid-template-columns:1fr; } }
.ship-card{
  display:block; padding:20px 22px 20px 52px; border:1px solid var(--line-2);
  cursor:pointer; transition:.24s var(--ease); position:relative;
}
.ship-card:hover{ border-color:var(--red); }
.ship-card input{ position:absolute; left:20px; top:22px; width:18px; height:18px; accent-color:var(--red); }
.ship-card strong{ display:block; font-family:var(--display); font-size:1.02rem; letter-spacing:.06em; text-transform:uppercase; }
.ship-card .ship-fee{ display:inline-block; font-family:var(--display); color:var(--red); font-size:.92rem; letter-spacing:.08em; margin:4px 0 6px; }
.ship-card small{ display:block; font-size:.83rem; color:var(--ink-soft); }
.ship-card:has(input:checked){ border-color:var(--red); background:rgba(200,16,46,.06); }

.total-box{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:22px 26px; background:var(--red-deep); color:#fff;
}
.total-box .lbl{ font-family:var(--display); font-size:.85rem; letter-spacing:.18em; text-transform:uppercase; }
.total-box .amt{ font-family:var(--display); font-weight:600; font-size:2rem; line-height:1; }

.sig-wrap{ border:1px solid var(--line-2); background:#fff; }
.sig-wrap canvas{ display:block; width:100%; height:180px; touch-action:none; cursor:crosshair; }
.sig-actions{ display:flex; justify-content:flex-end; padding:8px; border-top:1px solid var(--line); background:var(--bg); }

.table-wrap{ overflow-x:auto; }
.data-table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.data-table td{ padding:12px 15px; border-bottom:1px solid var(--line); vertical-align:top; }
.data-table tr td:first-child{
  font-family:var(--display); font-size:.76rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-soft); width:42%;
}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(20,16,15,.66); z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:22px;
  opacity:0; visibility:hidden; transition:.28s; backdrop-filter:blur(4px);
}
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal-box{
  background:var(--card); border:1px solid var(--line); border-top:3px solid var(--red);
  width:100%; max-width:620px; max-height:92vh; overflow-y:auto; padding:38px 36px;
  position:relative; box-shadow:var(--sh-lg);
  transform:translateY(18px); transition:transform .34s var(--ease);
}
.modal-overlay.open .modal-box{ transform:none; }
@media(max-width:600px){ .modal-box{ padding:28px 20px; } }
.modal-close{
  position:absolute; top:14px; right:14px; width:38px; height:38px; background:none;
  border:1px solid var(--line-2); color:var(--ink); font-size:1rem;
}
.modal-close:hover{ border-color:var(--red); color:var(--red); }
.modal-box h3{ padding-right:44px; }
.modal-puppy-name{ color:var(--red); }

/* ---------- Footer (the one dark anchor) ---------- */
.site-footer{ background:var(--dark-2); color:var(--bone); padding:76px 0 0; position:relative; overflow:hidden; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.25fr; gap:48px; padding-bottom:56px; }
@media(max-width:980px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:38px; } }
@media(max-width:560px){ .footer-grid{ grid-template-columns:1fr; gap:32px; } }
.site-footer .brand-lock .bl-1{ color:var(--bone); }
.site-footer .brand-lock .bl-1 em{ color:var(--red-light); }
.site-footer .brand-lock .bl-2{ color:var(--bone-soft); }
.footer-brand .brand-lock{ margin-bottom:20px; }
.footer-brand p{ color:var(--bone-soft); font-size:.93rem; max-width:340px; }
.footer-social{ display:flex; gap:10px; margin-top:20px; }
.footer-social a{
  width:42px; height:42px; display:grid; place-items:center; font-size:1.02rem;
  border:1px solid var(--line-d); color:var(--bone-soft); transition:.24s var(--ease);
}
.footer-social a:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.footer-col h2{ font-size:.8rem; letter-spacing:.22em; color:var(--red-light); margin-bottom:20px; }
.footer-col li{ margin-bottom:11px; }
.footer-col a,.footer-contact li{ color:var(--bone-soft); font-size:.92rem; }
.footer-col a:hover{ color:var(--bone); }
.footer-contact li{ display:flex; gap:11px; align-items:flex-start; }
.footer-contact .ic-svg{ color:var(--red-light); margin-top:5px; font-size:.95rem; }
.footer-bottom{
  border-top:1px solid var(--line-d); padding:24px 0; display:flex;
  align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.82rem; color:var(--bone-soft);
}
.to-top{
  background:none; border:1px solid var(--line-d); color:var(--bone-soft);
  padding:12px 18px; font-family:var(--display); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; display:inline-flex; align-items:center; gap:8px;
}
.to-top:hover{ border-color:var(--red-light); color:var(--red-light); }
.footer-watermark{
  position:absolute; left:50%; bottom:-30px; transform:translateX(-50%);
  font-family:var(--display); font-weight:700; font-size:min(15vw,190px); line-height:.8;
  color:transparent; -webkit-text-stroke:1px rgba(241,236,230,.05);
  white-space:nowrap; pointer-events:none; user-select:none; letter-spacing:.02em;
}

/* ---------- Back to top ---------- */
.fab-top{
  position:fixed; right:22px; bottom:22px; z-index:900; width:48px; height:48px;
  display:grid; place-items:center; background:var(--card); border:1px solid var(--line-2);
  color:var(--ink); box-shadow:var(--sh-md); opacity:0; visibility:hidden;
  transition:.28s var(--ease);
}
.fab-top.show{ opacity:1; visibility:visible; }
.fab-top:hover{ background:var(--red); border-color:var(--red); color:#fff; }
@media(max-width:600px){ .fab-top{ right:14px; bottom:14px; width:44px; height:44px; } }

/* ---------- Responsive grid utilities ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media(max-width:980px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .grid-3{ grid-template-columns:1fr; } }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media(max-width:1000px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .grid-4{ grid-template-columns:1fr; } }

/* ---------- Mobile refinements ----------
   Grid and flex items default to min-width:auto, so a single nowrap button
   can push a whole track wider than the viewport and produce a horizontal
   scrollbar. Letting these children shrink is the actual fix; wrapping the
   button text on narrow screens keeps it legible once it does. */
.split > *,.pup-grid > *,.grid-3 > *,.grid-4 > *,.review-grid > *,
.form-grid > *,.pillars > *,.pick-grid > *,.ship-grid > *,.hero-stats .cell{ min-width:0; }

@media(max-width:560px){
  .btn{ white-space:normal; text-align:center; padding:15px 22px; }
  .btn-sm{ padding:11px 16px; }
  .chip{ padding:12px 18px; }
}

/* Touch targets: the footer link lists, breadcrumbs and the back-to-top
   control were all well under the 38px minimum on a phone. */
@media(max-width:860px){
  .footer-col li{ margin-bottom:2px; }
  .footer-col ul a{ display:block; padding:10px 0; }
  .footer-contact li{ padding:6px 0; }
  .crumbs a{ display:inline-block; padding:10px 0; }
  .spec-list .sl-v > a{ display:inline-block; padding:9px 0; }
  .to-top{ padding:12px 18px; }
  .brand-lock{ padding:4px 0; }
  .footer-social a{ width:46px; height:46px; }
}

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Admin ---------- */
.admin-login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bg); }
.admin-login-box{
  width:100%; max-width:420px; background:var(--card); border:1px solid var(--line);
  border-top:3px solid var(--red); padding:42px 36px; text-align:center; box-shadow:var(--sh-md);
}
.admin-login-box .brand-lock{ justify-content:center; margin-bottom:22px; }
.admin-login-box .field label{ text-align:left; }
.admin-bar{ background:var(--card); border-bottom:1px solid var(--line); padding:14px 0; box-shadow:var(--sh-sm); }
.admin-bar .shell{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.admin-tabs{ display:flex; gap:0; border-bottom:1px solid var(--line); margin:28px 0 26px; flex-wrap:wrap; }
.admin-tab-btn{
  background:none; border:0; border-bottom:2px solid transparent; padding:14px 22px;
  font-family:var(--display); font-size:.86rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-soft);
}
.admin-tab-btn.active{ color:var(--ink); border-bottom-color:var(--red); }
.admin-panel{ display:none; padding:0; }
.admin-panel.active{ display:block; }
.admin-toolbar{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:24px; }
.admin-puppy-card{ margin-bottom:20px; }

/* Publish state: the pill in the admin bar and the mode banner beneath the
   heading, so it is always obvious whether an edit has actually gone live. */
.save-pill{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
  font-family:var(--display); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; border:1px solid var(--line-2); color:var(--ink-soft);
  background:var(--bg); white-space:nowrap;
}
.save-pill::before{
  content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex-shrink:0;
}
.save-pill.saving{ color:#8A6A17; border-color:rgba(138,106,23,.45); background:#FDF6E3; }
.save-pill.ok{ color:#1F7A32; border-color:rgba(31,122,50,.4); background:#EDF7EE; }
.save-pill.warn{ color:#8A5A17; border-color:rgba(138,90,23,.45); background:#FDF3E6; }
.save-pill.error{ color:var(--red-deep); border-color:rgba(200,16,46,.45); background:#FCEDEF; }
.save-pill.saving::before{ animation:pulse 1s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.25; } }

.mode-note{
  max-width:760px; margin:0 0 6px; padding:16px 20px; font-size:.93rem;
  border:1px solid var(--line); border-left:3px solid var(--ink-soft);
  background:var(--card); color:var(--ink-soft);
}
.mode-note strong{ color:var(--ink); }
.mode-note code{ background:var(--tint); padding:1px 6px; font-size:.88em; }
.mode-note.live{ border-left-color:#1F7A32; }
.mode-note.offline{ border-left-color:var(--red); }
@media(prefers-reduced-motion:reduce){ .save-pill.saving::before{ animation:none; } }

/* ---------- Site Manager: visual page editor ---------- */
.admin-panel > .shell{ padding-bottom:70px; }
.editor-toolbar{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); padding:14px 18px; margin-bottom:14px;
}
.et-left,.et-right{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.et-label{ font-family:var(--display); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.et-select{ padding:10px 14px; border:1px solid var(--line-2); background:var(--bg); color:var(--ink); min-width:200px; }
.et-devices{ display:flex; border:1px solid var(--line-2); }
.et-dev{
  background:none; border:0; border-right:1px solid var(--line-2); padding:9px 14px;
  font-family:var(--display); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
}
.et-dev:last-child{ border-right:0; }
.et-dev.active{ background:var(--ink); color:#fff; }
.et-count{ font-family:var(--display); font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); }
.et-count.has{ color:var(--red); font-weight:600; }

.editor-split{ display:grid; grid-template-columns:1fr 310px; gap:18px; align-items:start; }
@media(max-width:1100px){ .editor-split{ grid-template-columns:1fr; } }
.editor-stage{ background:var(--tint); border:1px solid var(--line); padding:10px; min-height:640px; }
.editor-stage iframe{ width:100%; height:74vh; min-height:560px; border:0; background:var(--card); display:block; box-shadow:var(--sh-sm); }
.editor-side{ background:var(--card); border:1px solid var(--line); padding:20px 18px; position:sticky; top:16px; max-height:82vh; overflow:auto; }
.es-title{ font-size:.78rem; letter-spacing:.18em; color:var(--red); margin-bottom:8px; }

.section-list,.change-list{ font-size:.86rem; }
.section-list li{
  display:flex; align-items:center; gap:8px; justify-content:space-between;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.section-list li.is-hidden .sl-name{ opacity:.45; text-decoration:line-through; }
.sl-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sl-ops{ display:flex; gap:3px; flex-shrink:0; }
.sl-ops button{
  background:none; border:1px solid var(--line-2); color:var(--ink-soft);
  font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; padding:4px 6px; line-height:1.4;
}
.sl-ops button:hover:not([disabled]){ border-color:var(--red); color:var(--red); }
.sl-ops button[disabled]{ opacity:.3; cursor:not-allowed; }
.sl-ops button.danger:hover{ background:var(--red); border-color:var(--red); color:#fff; }

.change-list li{ padding:7px 0; border-bottom:1px solid var(--line); display:flex; gap:8px; align-items:center; }
.change-list li.empty{ color:var(--ink-soft); border:0; padding:4px 0; }
.change-list button{
  background:none; border:0; padding:0; text-align:left; flex:1; color:var(--ink);
  font-size:.84rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer;
}
.change-list button:hover{ color:var(--red); }
.change-list .tag{
  font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; background:var(--tint);
  color:var(--ink-soft); padding:3px 6px; flex-shrink:0;
}

/* ---------- Site Manager: appearance ---------- */
.theme-split{ display:grid; grid-template-columns:1fr 300px; gap:22px; align-items:start; }
@media(max-width:1000px){ .theme-split{ grid-template-columns:1fr; } }
.theme-row{ display:grid; grid-template-columns:44px 1fr 140px; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); }
.theme-row:last-child{ border-bottom:0; }
.tc-swatch{ width:44px; height:34px; padding:0; border:1px solid var(--line-2); background:none; cursor:pointer; }
.tc-meta strong{ display:block; font-size:.9rem; }
.tc-meta small{ color:var(--ink-soft); font-size:.74rem; }
.tc-text{ padding:8px 10px; border:1px solid var(--line-2); background:var(--bg); color:var(--ink); font-size:.82rem; }
@media(max-width:620px){ .theme-row{ grid-template-columns:44px 1fr; } .tc-text{ grid-column:1/-1; } }

.theme-preview{ border:1px solid var(--line); overflow:hidden; background:var(--bg); position:sticky; top:16px; }
.theme-preview .tp-bar{ background:var(--red-deep); color:#fff; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; padding:8px 14px; }
.theme-preview .tp-body{ padding:22px 18px; background:var(--bg); }
.theme-preview .tp-eyebrow{ font-family:var(--display); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--red); }
.theme-preview .tp-h{ font-family:var(--display); font-size:1.7rem; text-transform:uppercase; color:var(--ink); margin:8px 0 10px; }
.theme-preview .tp-p{ color:var(--ink-soft); font-size:.86rem; margin-bottom:16px; }
.theme-preview .tp-btn{ display:inline-block; background:var(--red); color:#fff; font-family:var(--display); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; padding:11px 18px; }
.theme-preview .tp-foot{ background:var(--dark-2); color:var(--bone-soft); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; padding:12px 14px; }

/* ---------- Site Manager: media ---------- */
.media-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
.media-grid.picker{ max-height:46vh; overflow:auto; padding:2px; }
.media-tile{ margin:0; border:1px solid var(--line); background:var(--card); position:relative; }
.media-tile img{ width:100%; aspect-ratio:1; object-fit:cover; background:var(--tint); }
.media-tile figcaption{ font-size:.7rem; color:var(--ink-soft); padding:7px 8px; word-break:break-all; }
.media-grid.picker .media-tile{ cursor:pointer; transition:border-color .2s, transform .2s; }
.media-grid.picker .media-tile:hover{ border-color:var(--red); transform:translateY(-2px); }
.media-tile.current{ border-color:var(--red); box-shadow:0 0 0 3px rgba(200,16,46,.16); }
.media-del{
  position:absolute; top:6px; right:6px; width:26px; height:26px; border:0;
  background:rgba(20,16,15,.75); color:#fff; font-size:.8rem; line-height:1;
}
.media-del:hover{ background:var(--red); }
.media-lock{ position:absolute; top:6px; right:8px; color:rgba(255,255,255,.75); font-size:1.2rem; text-shadow:0 1px 3px rgba(0,0,0,.6); }

.img-picker{ display:flex; align-items:center; gap:10px; }
.img-picker img{ width:52px; height:52px; object-fit:cover; border:1px solid var(--line); flex-shrink:0; background:var(--tint); }
.img-picker input{ flex:1; }

/* ---------- 404 ---------- */
.err-code{
  font-family:var(--display); font-weight:700; font-size:clamp(6rem,20vw,15rem); line-height:.8;
  color:transparent; -webkit-text-stroke:2px var(--red); margin-bottom:20px;
}