/* =========================================================================
   We Are Happy Dogs — v2 "Bright & Friendly" design system
   Brand (from her live site): sky-blue · lime-green · deep-navy · clean white
   Type: Fraunces (premium display upgrade) + Montserrat (body, her brand font)
   Goals: brighter, friendlier, energetic — kept the magazine polish of v1
          but on her real palette so it feels like the same business.
   ========================================================================= */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Palette — matches her live wearehappydogs.com brand */
  --paper:        #FFFFFF;   /* clean white base */
  --paper-warm:   #F7F9FC;   /* very light blue-tinted grey */
  --paper-deep:   #EDF4FB;   /* pale sky tint, section breaks */
  --bone:         #E2E8EF;
  --cream:        #F7F7F7;   /* her actual section background */
  --stone:        #8A93A1;

  --brand:        #00A2E2;   /* sky blue — her primary */
  --brand-deep:   #18274B;   /* deep navy — her text/heading colour */
  --brand-darker: #0E1832;   /* near-black navy for hover */
  --brand-pale:   #9DC0EF;   /* pale sky — her nav accent */
  --brand-wash:   #E1F3FC;   /* very pale sky background */

  --lime:         #99CC00;   /* lime green — her secondary accent */
  --lime-deep:    #7AA300;
  --lime-light:   #C2E66A;
  --lime-wash:    #F0F9D9;

  /* Warm accent retained for occasional warmth (polaroids, captions) */
  --cognac:       #B16638;
  --cognac-deep:  #884921;
  --cognac-light: #E0B796;
  --cognac-wash:  #FAF1E9;

  --moss:         #5C7A4A;
  --moss-wash:    #EAF0E3;

  --ink:          #18274B;   /* her body text deep navy */
  --ink-soft:     #424E6B;
  --ink-quiet:    #6B7689;
  --rule:         #D6DEE9;
  --rule-soft:    #E6EAF2;

  --rose:         #C44C6A;
  --rose-wash:    #FBE9EC;

  --success:      #2C7A4B;
  --danger:       #B43A3A;
  --warning:      #B8761F;

  /* Type families — Montserrat is her brand font; Fraunces adds editorial polish */
  --f-display:    'Fraunces', 'Montserrat', Georgia, serif;
  --f-body:       'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --f-script:     'Caveat', 'Brush Script MT', cursive;
  --f-mono:       'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid scale (utopia) */
  --t-xs:   clamp(0.74rem, 0.71rem + 0.13vw, 0.81rem);
  --t-sm:   clamp(0.86rem, 0.83rem + 0.18vw, 0.95rem);
  --t-base: clamp(1.00rem, 0.96rem + 0.24vw, 1.13rem);
  --t-lg:   clamp(1.18rem, 1.10rem + 0.40vw, 1.40rem);
  --t-xl:   clamp(1.42rem, 1.28rem + 0.65vw, 1.78rem);
  --t-2xl:  clamp(1.78rem, 1.55rem + 1.05vw, 2.40rem);
  --t-3xl:  clamp(2.30rem, 1.95rem + 1.60vw, 3.40rem);
  --t-4xl:  clamp(2.90rem, 2.30rem + 2.80vw, 5.00rem);
  --t-5xl:  clamp(3.40rem, 2.55rem + 4.10vw, 6.80rem);

  /* Spacing */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;   --s-11: 12rem;

  /* Containers */
  --w-tight: 680px; --w-text: 780px; --w: 1180px; --w-wide: 1380px;

  /* Radius */
  --r-sm: 4px; --r-md: 10px; --r-lg: 18px; --r-xl: 28px; --r-pill: 999px;

  /* Shadow */
  --shadow-1: 0 1px 2px rgba(20,15,5,0.05), 0 3px 8px rgba(20,15,5,0.04);
  --shadow-2: 0 2px 8px rgba(20,15,5,0.06), 0 14px 32px rgba(20,15,5,0.09);
  --shadow-3: 0 4px 16px rgba(20,15,5,0.09), 0 30px 64px rgba(20,15,5,0.13);
  --shadow-photo: 0 2px 5px rgba(20,15,5,0.10), 0 18px 42px rgba(20,15,5,0.17);
  --shadow-inset: inset 0 0 0 1px rgba(0,45,112,0.10);

  /* Motion */
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1.00, 0.30, 1);
  --ease-in:  cubic-bezier(0.55, 0.06, 0.68, 0.19);
}

/* --- Reset + base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'cv11' 1, 'ss01' 1;
  overflow-x: hidden;
  position: relative;
}

/* Removed paper-grain texture — her brand is clean white, not warm paper */

img, svg, video { display: block; max-width: 100%; height: auto; }
img { user-select: none; -webkit-user-drag: none; }

a { color: var(--brand); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--brand-deep); text-decoration: underline; }

button { font: inherit; cursor: pointer; }

::selection { background: var(--brand-deep); color: var(--paper); }

/* --- Type --------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  color: var(--brand-deep);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0 0 var(--s-4);
  font-variation-settings: "opsz" 90, "SOFT" 30;
}
h1 { font-size: var(--t-5xl); letter-spacing: -0.025em; font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 50; }
h2 { font-size: var(--t-4xl); letter-spacing: -0.022em; }
h3 { font-size: var(--t-2xl); }
h4 { font-size: var(--t-xl); }
h5 { font-size: var(--t-lg); font-family: var(--f-body); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); }
p  { margin: 0 0 var(--s-5); }
p.lead { font-size: var(--t-lg); color: var(--ink-soft); line-height: 1.5; }

.script        { font-family: var(--f-script); font-weight: 500; }
.script.large  { font-size: var(--t-2xl); color: var(--brand); }
.italic        { font-style: italic; }
.underline     { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--lime); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--f-body); font-size: var(--t-xs);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand); font-weight: 700;
  margin: 0 0 var(--s-4);
}
.eyebrow::before {
  content: ""; display: inline-block; width: 28px; height: 1px; background: currentColor; opacity: 0.6;
}

.text-center { text-align: center; }
.mt-1 { margin-top: var(--s-1); } .mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); }

/* --- Layout primitives -------------------------------------------------- */
.wrap        { width: 100%; max-width: var(--w);       margin: 0 auto; padding: 0 var(--s-5); position: relative; z-index: 2; }
.wrap-wide   { width: 100%; max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--s-5); position: relative; z-index: 2; }
.wrap-text   { width: 100%; max-width: var(--w-text); margin: 0 auto; padding: 0 var(--s-5); position: relative; z-index: 2; }
.wrap-tight  { width: 100%; max-width: var(--w-tight); margin: 0 auto; padding: 0 var(--s-5); position: relative; z-index: 2; }

section { padding: var(--s-9) 0; position: relative; }
section.tight { padding: var(--s-7) 0; }
section.spacious { padding: var(--s-10) 0; }
section.bg-paper-warm  { background: var(--paper-warm); }
section.bg-paper-deep  { background: var(--paper-deep); }
section.bg-cream       { background: var(--cream); }
section.bg-navy        { background: var(--brand-deep); color: var(--paper); }
section.bg-navy h1, section.bg-navy h2, section.bg-navy h3 { color: var(--paper); }
section.bg-navy a:not(.btn) { color: var(--brand-pale); }   /* exclude buttons — they keep their declared colour */
section.bg-navy .eyebrow { color: var(--cognac-light); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; gap: var(--s-6); }
  .grid-3 { grid-template-columns: 1fr; gap: var(--s-5); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
  section { padding: var(--s-7) 0; }
}

.section-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s-7); align-items: end; margin-bottom: var(--s-8); }
.section-head p { margin: 0; color: var(--ink-soft); }
@media (max-width: 800px) { .section-head { grid-template-columns: 1fr; gap: var(--s-4); } }

/* --- Skip link / a11y --------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: var(--s-4);
  background: var(--brand-deep); color: var(--paper);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-md);
  z-index: 1000;
}
.skip-link:focus { left: var(--s-4); }

/* --- Navigation --------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule-soft);
  height: 72px;                 /* fixed so the top-ticker can sit flush */
  box-sizing: border-box;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%;                 /* no vertical padding — flex centring handles it */
}
.logo {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--f-display); font-size: var(--t-xl);
  color: var(--brand-deep); font-weight: 500; letter-spacing: -0.01em;
  text-decoration: none;
}
.logo:hover { text-decoration: none; color: var(--brand-deep); }
.logo .script { color: var(--cognac); font-size: 1.4em; line-height: 0.8; }
.logo-mark { width: 36px; height: 36px; color: var(--brand-deep); }

.nav-links {
  display: flex; list-style: none; gap: var(--s-2);
  align-items: center; margin: 0; padding: 0;
}
.nav-links a:not(.btn) {
  display: inline-block; padding: var(--s-2) var(--s-4);
  font-size: var(--t-sm); color: var(--ink); font-weight: 500;
  border-radius: var(--r-pill); transition: background 0.2s var(--ease), color 0.2s var(--ease);
  text-decoration: none;
}
.nav-links a:not(.btn):hover { background: var(--brand-wash); color: var(--brand-deep); text-decoration: none; }
.nav-links a:not(.btn).active { background: var(--brand-deep); color: var(--paper); }
.nav-links a.is-login { color: var(--ink-soft); display: inline-flex; align-items: center; gap: 4px; }
.nav-links a.is-login svg { width: 14px; height: 14px; }

.nav-toggle {
  display: none; background: transparent; border: 0;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  color: var(--brand-deep);
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: currentColor; margin: 5px auto; transition: 0.25s var(--ease);
  border-radius: 2px;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 64px 0 0 0;
    background: var(--paper);
    flex-direction: column; gap: 0;
    padding: var(--s-5) var(--s-5); align-items: stretch;
    transform: translateX(100%); transition: transform 0.32s var(--ease);
    border-top: 1px solid var(--rule-soft);
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a:not(.btn) { padding: var(--s-4) var(--s-3); font-size: var(--t-lg); border-radius: 0; border-bottom: 1px solid var(--rule-soft); }
  .nav-links a:not(.btn):hover { background: var(--brand-wash); }
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: 0.9rem 1.5rem; border-radius: var(--r-pill);
  font-family: var(--f-body); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: 0.01em;
  border: 1.5px solid transparent; cursor: pointer;
  text-decoration: none; transition: all 0.22s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--brand); color: var(--paper); }
.btn-primary:hover { background: var(--brand-deep); color: var(--paper); box-shadow: var(--shadow-2); }

.btn-secondary { background: transparent; color: var(--brand-deep); border-color: var(--brand-deep); }
.btn-secondary:hover { background: var(--brand-deep); color: var(--paper); }

.btn-lime { background: var(--lime); color: var(--paper); }
.btn-lime:hover { background: var(--lime-deep); color: var(--paper); box-shadow: var(--shadow-2); }

/* Legacy alias (some pages still reference btn-cognac) */
.btn-cognac { background: var(--lime); color: var(--paper); }
.btn-cognac:hover { background: var(--lime-deep); color: var(--paper); box-shadow: var(--shadow-2); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--brand-deep); font-weight: 600;
  border-bottom: 2px solid var(--lime); padding-bottom: 2px;
  transition: border-color 0.2s var(--ease);
}
.btn-ghost:hover { border-color: var(--brand); text-decoration: none; }

.btn-block { display: flex; justify-content: center; width: 100%; }

/* --- Hero --------------------------------------------------------------- */
.hero {
  padding: var(--s-9) 0 var(--s-10);
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 80% 50% at 90% 10%, rgba(153, 204, 0, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 60% at 10% 80%, rgba(0, 162, 226, 0.08), transparent 60%);
}
.hero-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-8);
  align-items: center; position: relative;
}
.hero h1 .italic { font-style: italic; color: var(--brand); }
.hero .lead { max-width: 48ch; }
.hero-media {
  position: relative; aspect-ratio: 4/5;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-photo);
  transform: rotate(1.5deg);
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media .badge {
  position: absolute; bottom: var(--s-5); left: var(--s-5);
  background: var(--paper); color: var(--brand-deep);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: var(--shadow-1);
}
.hero-script-note {
  position: absolute; right: -10px; bottom: -20px;
  font-family: var(--f-script); font-size: 2.4rem;
  color: var(--brand); transform: rotate(-6deg);
}

.trust-strip {
  display: flex; flex-wrap: wrap; gap: var(--s-5);
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid var(--rule-soft);
}
.trust-strip .item {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm); color: var(--ink-soft); font-weight: 500;
}
.trust-strip svg { width: 18px; height: 18px; color: var(--brand); flex-shrink: 0; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .hero-media { aspect-ratio: 3/4; transform: rotate(0); }
  .hero { padding: var(--s-7) 0; }
}

/* --- Services grid ------------------------------------------------------ */
.services-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5); margin-top: var(--s-6);
}
@media (max-width: 800px) { .services-grid { grid-template-columns: 1fr; } }

.service {
  position: relative; display: grid; gap: var(--s-4);
  padding: var(--s-7) var(--s-6); border-radius: var(--r-lg);
  background: var(--paper); border: 1px solid var(--rule-soft);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
  text-decoration: none; color: inherit;
  overflow: hidden;
}
.service::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(0, 162, 226, 0.08));
  opacity: 0; transition: opacity 0.3s var(--ease); pointer-events: none;
}
.service:hover {
  transform: translateY(-3px); text-decoration: none; color: inherit;
  border-color: var(--brand-pale); box-shadow: var(--shadow-2);
}
.service:hover::after { opacity: 1; }
.service-num {
  font-family: var(--f-display); font-size: var(--t-sm);
  color: var(--lime-deep); font-weight: 700; letter-spacing: 0.08em;
  position: absolute; top: var(--s-5); right: var(--s-6);
}
.service-icon { width: 44px; height: 44px; color: var(--brand-deep); }
.service h3 { margin: 0 0 var(--s-2); }
.service-desc { color: var(--ink-soft); margin: 0; font-size: var(--t-base); line-height: 1.55; }
.service-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--s-3); padding-top: var(--s-4);
  border-top: 1px dashed var(--rule); gap: var(--s-3); flex-wrap: wrap;
}
.chip {
  font-size: var(--t-xs); padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--brand-wash); color: var(--brand-deep); font-weight: 500;
}
.service-link { font-size: var(--t-sm); font-weight: 600; color: var(--brand-deep); }

/* --- Scrapbook / polaroids --------------------------------------------- */
.scrapbook {
  position: relative; min-height: 460px;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
}
.polaroid {
  background: var(--paper); padding: 12px 12px 36px;
  box-shadow: var(--shadow-photo);
  margin: 0; transition: transform 0.4s var(--ease);
  position: relative; cursor: default;
}
.polaroid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.polaroid .caption {
  font-family: var(--f-script); font-size: 1.25rem;
  color: var(--ink); text-align: center; margin-top: 12px;
  position: absolute; bottom: 8px; left: 0; right: 0;
}
.polaroid.p1 { transform: rotate(-3deg); }
.polaroid.p2 { transform: rotate(2deg); }
.polaroid.p3 { transform: rotate(-1deg); margin-top: 24px; }
.polaroid.p4 { transform: rotate(3deg); margin-top: 24px; }
.polaroid:hover { transform: rotate(0deg) scale(1.03); z-index: 2; }

/* --- Testimonials ------------------------------------------------------- */
.testimonials { background: var(--brand-deep); color: var(--paper); position: relative; overflow: hidden; }
.testimonials::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.85 0 0 0 0 0.92 0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.4; pointer-events: none;
}
.testimonials h2 { color: var(--paper); }
.testimonials em.italic { color: var(--lime-light); font-style: italic; }
.quote {
  margin: 0 0 var(--s-7); max-width: 56ch;
  font-family: var(--f-display); font-size: var(--t-xl);
  line-height: 1.45; color: var(--paper); font-style: italic; font-weight: 300;
  position: relative; padding-left: var(--s-7);
}
.quote .mark {
  position: absolute; left: 0; top: -8px;
  font-family: var(--f-display); font-size: 4rem;
  color: var(--lime-light); line-height: 1; opacity: 0.8;
}
.quote cite {
  display: block; margin-top: var(--s-3);
  font-family: var(--f-body); font-size: var(--t-sm);
  font-style: normal; color: var(--brand-pale); font-weight: 500; letter-spacing: 0.04em;
}
.quote cite .dog { color: var(--lime-light); font-weight: 600; }

/* --- Stats -------------------------------------------------------------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6);
  padding: var(--s-7) 0; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft);
}
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } }
.stat { text-align: center; }
.stat .n {
  display: block; font-family: var(--f-display);
  font-size: var(--t-4xl); color: var(--brand-deep); line-height: 1; font-weight: 400;
  font-variation-settings: "opsz" 144;
}
.stat .label {
  display: block; margin-top: var(--s-3);
  font-size: var(--t-xs); color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;
}

.squiggle { width: 120px; margin: var(--s-6) auto 0; display: block; color: var(--lime); opacity: 0.9; }

/* --- Gallery ------------------------------------------------------------ */
.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4);
}
.gallery-grid figure {
  margin: 0; overflow: hidden; border-radius: var(--r-md);
  box-shadow: var(--shadow-1); aspect-ratio: 1/1;
}
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.gallery-grid figure:hover img { transform: scale(1.06); }
@media (max-width: 800px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; } }

.gallery-grid.masonry {
  grid-auto-rows: 200px;
}
.gallery-grid.masonry figure { aspect-ratio: auto; }
.gallery-grid.masonry figure.tall { grid-row: span 2; }
.gallery-grid.masonry figure.wide { grid-column: span 2; }

/* --- Cards (generic) --------------------------------------------------- */
.card {
  background: var(--cream); border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg); padding: var(--s-6);
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.card:hover { box-shadow: var(--shadow-2); }
.card h3, .card h4 { margin-top: 0; }

/* --- Forms -------------------------------------------------------------- */
.form-stack { display: grid; gap: var(--s-4); }
.field { display: grid; gap: var(--s-2); }
.field label, label {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.field input, .field textarea, .field select,
input.in, textarea.in, select.in {
  font-family: var(--f-body); font-size: var(--t-base);
  padding: 0.85rem 1rem; border-radius: var(--r-md);
  border: 1.5px solid var(--rule); background: var(--paper);
  color: var(--ink); transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus,
input.in:focus, textarea.in:focus, select.in:focus {
  outline: 0; border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(31, 79, 160, 0.12);
}
.field textarea { min-height: 140px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.help { font-size: var(--t-xs); color: var(--ink-quiet); }

.fieldset { border: 0; padding: 0; margin: 0 0 var(--s-5); display: grid; gap: var(--s-4); }
.fieldset legend { font-size: var(--t-sm); font-weight: 600; color: var(--brand-deep); padding: 0; margin-bottom: var(--s-2); }

/* --- Alerts / flash ----------------------------------------------------- */
.alert {
  padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
  border-left: 4px solid var(--brand); background: var(--brand-wash);
  color: var(--brand-deep); font-size: var(--t-sm);
}
.alert.danger  { border-color: var(--danger);  background: #FCEBEB; color: #6A2222; }
.alert.success { border-color: var(--success); background: #E7F1EA; color: #14492F; }
.alert.warn    { border-color: var(--warning); background: #FCF3E1; color: #5A3A0B; }

/* --- Footer ------------------------------------------------------------- */
footer {
  background: var(--brand-deep); color: var(--paper);
  padding: var(--s-9) 0 var(--s-6); margin-top: 0;
  position: relative; overflow: hidden;
}
footer::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.85 0 0 0 0 0.92 0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.35; pointer-events: none;
}
.foot-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: var(--s-6); position: relative; z-index: 2;
}
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .foot-grid { grid-template-columns: 1fr; } }
footer .brand h3 { color: var(--paper); margin-bottom: var(--s-4); }
footer .brand p { color: var(--brand-pale); font-size: var(--t-sm); max-width: 32ch; }
footer h5 { color: var(--paper); margin-bottom: var(--s-4); font-size: var(--t-xs); }
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { padding: var(--s-1) 0; font-size: var(--t-sm); color: var(--brand-pale); }
footer li a { color: var(--brand-pale); }
footer li a:hover { color: var(--paper); }
.foot-bar {
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,0.10);
  font-size: var(--t-xs); color: var(--brand-pale); position: relative; z-index: 2;
}
.foot-bar .licence { font-weight: 600; color: var(--cognac-light); }

/* --- Floating book button ---------------------------------------------- */
.book-float {
  position: fixed; bottom: var(--s-5); right: var(--s-5); z-index: 60;
  background: var(--brand-deep); color: var(--paper);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: 600;
  box-shadow: var(--shadow-3); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--s-2);
  transition: transform 0.2s var(--ease), background 0.2s;
}
.book-float:hover { background: var(--brand-darker); color: var(--paper); transform: translateY(-2px); text-decoration: none; }
.book-float svg { width: 14px; height: 14px; }
@media (max-width: 700px) { .book-float { padding: var(--s-3) var(--s-4); font-size: var(--t-xs); } }

/* --- Page header (interior pages) -------------------------------------- */
.page-header {
  padding: var(--s-8) 0 var(--s-7);
  border-bottom: 1px solid var(--rule-soft);
  background:
    radial-gradient(ellipse 60% 70% at 80% 0%, rgba(31, 79, 160, 0.07), transparent 70%);
}
.page-header h1 { font-size: var(--t-4xl); margin-bottom: var(--s-4); }
.page-header .lead { max-width: 60ch; }

/* --- Reveal animations -------------------------------------------------- */
.reveal, .reveal-1, .reveal-2, .reveal-3, .reveal-4 {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.visible, .reveal-1.visible, .reveal-2.visible,
.reveal-3.visible, .reveal-4.visible { opacity: 1; transform: translateY(0); }
.reveal-1.visible { transition-delay: 0.05s; }
.reveal-2.visible { transition-delay: 0.15s; }
.reveal-3.visible { transition-delay: 0.25s; }
.reveal-4.visible { transition-delay: 0.35s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-1, .reveal-2, .reveal-3, .reveal-4 { opacity: 1; transform: none; transition: none; }
}

/* --- Portal-specific styles (login + dashboard) ------------------------ */
.auth-page {
  min-height: calc(100vh - 80px);
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
@media (max-width: 900px) { .auth-page { grid-template-columns: 1fr; min-height: auto; } }

.auth-form-side {
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-9) var(--s-6);
  background: var(--paper);
}
.auth-form {
  width: 100%; max-width: 420px;
}
.auth-form .eyebrow { margin-bottom: var(--s-3); }
.auth-form h1 { font-size: var(--t-3xl); margin-bottom: var(--s-3); }
.auth-form .sub { color: var(--ink-soft); margin-bottom: var(--s-7); }
.auth-form .form-stack { gap: var(--s-5); }
.auth-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--s-3); font-size: var(--t-sm);
}
.auth-meta a { color: var(--brand-deep); border-bottom: 1px solid var(--cognac-light); padding-bottom: 1px; }
.checkbox-row {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm); color: var(--ink-soft); font-weight: 500;
  text-transform: none; letter-spacing: 0;
}
.checkbox-row input { width: 16px; height: 16px; }

.auth-photo-side {
  position: relative; background: var(--brand-deep); overflow: hidden;
  display: flex; align-items: flex-end; padding: var(--s-9) var(--s-7);
  color: var(--paper); min-height: 500px;
}
.auth-photo-side img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.55;
}
.auth-photo-side::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0, 26, 69, 0.85));
}
.auth-photo-side .quote {
  position: relative; z-index: 2; color: var(--paper); padding-left: var(--s-7);
  max-width: 48ch; margin: 0;
}
.auth-photo-side .quote .mark { color: var(--cognac-light); }
.auth-photo-side .quote cite { color: var(--brand-pale); }

/* Portal dashboard */
.portal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-5) 0; gap: var(--s-4); flex-wrap: wrap;
  border-bottom: 1px solid var(--rule-soft); margin-bottom: var(--s-7);
}
.portal-header h1 { font-size: var(--t-3xl); margin: 0; }
.portal-header .greeting-script {
  font-family: var(--f-script); color: var(--cognac);
  font-size: var(--t-xl); display: block; margin-bottom: 2px;
}
.portal-actions { display: flex; gap: var(--s-3); }

.portal-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--s-6);
}
@media (max-width: 900px) { .portal-grid { grid-template-columns: 1fr; } }

.dog-card {
  display: flex; gap: var(--s-5); align-items: center;
  padding: var(--s-5); background: var(--cream); border-radius: var(--r-lg);
  border: 1px solid var(--rule-soft);
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.dog-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.dog-avatar {
  width: 78px; height: 78px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--paper); box-shadow: var(--shadow-1); flex-shrink: 0;
}
.dog-card .dog-name {
  font-family: var(--f-display); font-size: var(--t-xl);
  color: var(--brand-deep); margin: 0 0 2px;
}
.dog-card .dog-meta {
  font-size: var(--t-sm); color: var(--ink-soft); margin: 0;
}
.dog-card .dog-tag {
  display: inline-block; background: var(--moss-wash); color: var(--moss);
  font-size: var(--t-xs); padding: 2px 8px; border-radius: var(--r-pill);
  font-weight: 600; margin-top: 6px; margin-right: 4px;
}
.dog-card .dog-tag.warn { background: var(--cognac-wash); color: var(--cognac-deep); }

.booking-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4);
  align-items: center; padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.booking-row:last-child { border-bottom: 0; }
.booking-date {
  text-align: center; min-width: 56px;
  background: var(--brand-wash); color: var(--brand-deep);
  padding: var(--s-2); border-radius: var(--r-md);
}
.booking-date .day { font-family: var(--f-display); font-size: var(--t-xl); display: block; line-height: 1; }
.booking-date .mon { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.booking-meta strong { font-weight: 600; color: var(--ink); }
.booking-meta small { display: block; color: var(--ink-soft); font-size: var(--t-xs); }
.status-pill {
  font-size: var(--t-xs); padding: 4px 10px; border-radius: var(--r-pill);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}
.status-pill.confirmed { background: var(--moss-wash); color: var(--moss); }
.status-pill.pending   { background: var(--cognac-wash); color: var(--cognac-deep); }
.status-pill.completed { background: var(--brand-wash); color: var(--brand-deep); }

.summary-stat {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); background: var(--paper-warm);
  border-radius: var(--r-md); border: 1px solid var(--rule-soft);
}
.summary-stat .icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--brand-deep); color: var(--paper);
  display: grid; place-items: center; flex-shrink: 0;
}
.summary-stat .icon svg { width: 18px; height: 18px; }
.summary-stat .label { font-size: var(--t-xs); color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; }
.summary-stat .value { font-family: var(--f-display); font-size: var(--t-xl); color: var(--brand-deep); line-height: 1; }

.coming-soon-badge {
  display: inline-block; font-size: var(--t-xs); font-weight: 600;
  background: var(--cognac-wash); color: var(--cognac-deep);
  padding: 3px 9px; border-radius: var(--r-pill);
  text-transform: uppercase; letter-spacing: 0.06em; margin-left: var(--s-2);
}

/* --- Utility ------------------------------------------------------------ */
.divider {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--ink-quiet); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}

.tag-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tag {
  font-size: var(--t-xs); padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--paper-deep); color: var(--ink-soft); font-weight: 500;
}

.muted { color: var(--ink-quiet); }
.no-bullet { list-style: none; padding: 0; margin: 0; }
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  padding: var(--s-2) 0 var(--s-2) var(--s-6);
  position: relative; color: var(--ink-soft);
}
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 16px; height: 9px;
  border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}

/* --- Instagram feed (Behold widget) ----------------------------------- */
.ig-feed-section {
  padding: var(--s-9) 0;
}
.ig-feed-wrapper {
  margin-bottom: var(--s-6);
  /* Behold widget renders its own grid inside; we just give it room */
  min-height: 200px;
}
.ig-feed-wrapper:empty {
  display: none;
}
behold-widget {
  display: block;
  width: 100%;
}
/* While Behold is loading, the wrapper is essentially empty.
   The fallback grid below it stays visible until JS hides it. */

/* --- Gallery feature layout (5-photo editorial grid) ------------------ */
.gallery-feature {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 280px 280px 280px;
  gap: var(--s-4);
}
.gallery-feature figure {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  background: var(--paper-deep);
}
.gallery-feature figure img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.gallery-feature figure:hover img { transform: scale(1.05); }
.gallery-feature figure figcaption {
  position: absolute; left: var(--s-4); bottom: var(--s-4);
  background: rgba(24, 39, 75, 0.85); color: var(--paper);
  padding: 6px 12px; border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.04em; backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.gallery-feature .gf-1 { grid-column: 1 / span 4; grid-row: 1 / span 2; }
.gallery-feature .gf-2 { grid-column: 5 / span 2; grid-row: 1 / span 1; }
.gallery-feature .gf-3 { grid-column: 5 / span 2; grid-row: 2 / span 1; }
.gallery-feature .gf-4 { grid-column: 1 / span 3; grid-row: 3 / span 1; }
.gallery-feature .gf-5 { grid-column: 4 / span 3; grid-row: 3 / span 1; }

@media (max-width: 800px) {
  .gallery-feature {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, 220px);
    gap: var(--s-3);
  }
  .gallery-feature .gf-1 { grid-column: 1 / span 2; grid-row: 1 / span 1; }
  .gallery-feature .gf-2 { grid-column: 1; grid-row: 2; }
  .gallery-feature .gf-3 { grid-column: 2; grid-row: 2; }
  .gallery-feature .gf-4 { grid-column: 1 / span 2; grid-row: 3 / span 1; }
  .gallery-feature .gf-5 { grid-column: 1 / span 2; grid-row: 4 / span 1; }
}

/* --- Instagram gallery grid (driven by data/instagram.json) ----------- */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
@media (max-width: 1000px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .ig-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .ig-grid { grid-template-columns: 1fr; } }

.ig-tile {
  display: flex; flex-direction: column;
  background: var(--paper); border-radius: var(--r-md);
  overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-1);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  position: relative;
}
.ig-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  text-decoration: none; color: inherit;
}
.ig-tile figure {
  margin: 0; aspect-ratio: 1/1; overflow: hidden;
  position: relative;
  background: var(--paper-deep);
}
.ig-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.ig-tile:hover img { transform: scale(1.05); }
.ig-tile-badge {
  position: absolute; top: 8px; right: 8px;
  background: rgba(0,0,0,0.65); color: var(--paper);
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px;
}
.ig-tile-body {
  padding: var(--s-3) var(--s-4);
  display: flex; flex-direction: column; gap: 4px;
  min-height: 60px;
}
.ig-tile-caption {
  margin: 0; font-size: var(--t-xs); line-height: 1.4;
  color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ig-tile-date {
  margin: 0; font-size: 11px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-quiet); font-weight: 600;
}
#ig-load-more-wrap { text-align: center; margin-top: var(--s-7); }
#ig-meta {
  text-align: center; margin: 0 0 var(--s-5);
  font-size: var(--t-xs); color: var(--ink-quiet);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}

/* --- Boarding feature band ------------------------------------------- */
.boarding-feature {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: var(--s-7); align-items: center;
  margin: var(--s-7) 0 var(--s-8);
  background: var(--paper); padding: var(--s-6);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
.boarding-feature .bf-photo {
  margin: 0; overflow: hidden; border-radius: var(--r-md);
  aspect-ratio: 16/10;
}
.boarding-feature .bf-photo img {
  width: 100%; height: 100%; object-fit: cover;
}
.boarding-feature .bf-copy h3 {
  font-size: var(--t-2xl); color: var(--brand-deep);
}
.boarding-feature .bf-copy p { color: var(--ink-soft); }
@media (max-width: 800px) {
  .boarding-feature {
    grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-5);
  }
}

/* --- "Other animals" showcase grid ------------------------------------- */
.other-animals { display: grid; gap: var(--s-5); }
.other-animals-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4);
}
.other-animals-grid figure {
  margin: 0; position: relative; overflow: hidden;
  border-radius: var(--r-md); aspect-ratio: 4/5;
  box-shadow: var(--shadow-1);
}
.other-animals-grid img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.other-animals-grid figure:hover img { transform: scale(1.05); }
.other-animals-grid figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(180deg, transparent, rgba(24, 39, 75, 0.92));
  color: var(--paper); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.02em;
}
@media (max-width: 900px) { .other-animals-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .other-animals-grid { grid-template-columns: 1fr; } }

/* --- Photo accents / brand colour blocks (for sections without photos) - */
.paw-pattern {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.08;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='%2300A2E2'><circle cx='20' cy='30' r='4'/><circle cx='30' cy='22' r='4'/><circle cx='40' cy='22' r='4'/><circle cx='50' cy='30' r='4'/><ellipse cx='35' cy='42' rx='10' ry='8'/></g></svg>");
  background-size: 110px 110px;
  background-repeat: repeat;
}

.colour-block {
  position: relative; padding: var(--s-7) var(--s-6);
  border-radius: var(--r-lg);
  background: var(--brand-wash);
  border: 1px solid var(--brand-pale);
  overflow: hidden;
}
.colour-block.lime  { background: var(--lime-wash);  border-color: var(--lime-light); }
.colour-block.cream { background: var(--paper-warm); border-color: var(--rule-soft); }

/* Bigger inline photo treatment (used in service sections) */
.photo-card {
  position: relative; border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-photo);
}
.photo-card img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.photo-card .caption {
  position: absolute; left: var(--s-4); bottom: var(--s-4);
  background: rgba(255,255,255,0.95); color: var(--brand-deep);
  padding: 6px 12px; border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 600;
  font-family: var(--f-script); font-size: 1.15rem;
}

/* --- Service card clickable styling ----------------------------------- */
a.service { cursor: pointer; }

/* --- Photo band (full-width photo strip with 5 photos) ---------------- */
.photo-band {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0; width: 100%; overflow: hidden;
}
.photo-band figure {
  margin: 0; aspect-ratio: 1/1; overflow: hidden;
  position: relative;
}
.photo-band img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s var(--ease), filter 0.4s var(--ease);
  filter: saturate(1.05);
}
.photo-band figure:hover img { transform: scale(1.08); filter: saturate(1.2); }
/* Hover overlay revealing the service label */
.photo-band figure[title]::after {
  content: attr(title);
  position: absolute; inset: auto 0 0 0;
  padding: 8px 12px; background: rgba(24, 39, 75, 0.88); color: var(--paper);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em;
  text-align: center; text-transform: uppercase;
  transform: translateY(100%); transition: transform 0.3s var(--ease);
  backdrop-filter: blur(4px);
}
.photo-band figure[title]:hover::after { transform: translateY(0); }
/* 2-row variant: just keeps the same 5-column grid, 10 figures wrap to 2 rows */
.photo-band-2row { /* no extra rules needed — auto-flow does the work */ }
@media (max-width: 700px) {
  .photo-band { grid-template-columns: repeat(2, 1fr); }
  /* 2-row variant on mobile: 2 cols × 5 rows; show all 10 photos */
  .photo-band-2row figure:nth-child(n) { display: block; }
  /* Original 1-row variant: hide 5th on mobile to keep it 2×2 */
  .photo-band:not(.photo-band-2row) figure:nth-child(5) { display: none; }
}

/* --- Top sticky review ticker (under nav) ---------------------------- */
.top-ticker {
  position: sticky;
  top: 72px;                    /* matches nav height exactly — no overlap or gap */
  z-index: 49;                  /* below nav (50) */
  width: 100%;
  height: 52px;
  background: var(--brand-deep);
  color: var(--paper);
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
/* Fade edges so words don't cut hard at the viewport sides */
.top-ticker::before,
.top-ticker::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 80px;
  z-index: 2; pointer-events: none;
}
.top-ticker::before { left: 0;  background: linear-gradient(90deg, var(--brand-deep), transparent); }
.top-ticker::after  { right: 0; background: linear-gradient(-90deg, var(--brand-deep), transparent); }

.top-ticker-track {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  white-space: nowrap;
  width: max-content;
  /* Animation only engages once content is loaded — JS adds .is-loaded after fetch.
     This avoids the animation running on an empty track and looking frozen. */
}
.top-ticker-track.is-loaded {
  animation: top-ticker-scroll 250s linear infinite;  /* 5× slower than old bottom ticker's 50s */
}
.top-ticker:hover .top-ticker-track,
.top-ticker:focus-within .top-ticker-track {
  animation-play-state: paused;
}
@keyframes top-ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .top-ticker-track.is-loaded { animation: none; }
}

.top-ticker-item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--f-body);
  font-size: var(--t-sm);
}
.top-ticker-item .quote-text {
  font-style: italic;
  font-weight: 300;
  color: var(--paper);
}
.top-ticker-item .quote-text::before { content: '\201C'; opacity: 0.6; padding-right: 2px; }
.top-ticker-item .quote-text::after  { content: '\201D'; opacity: 0.6; padding-left: 2px; }
.top-ticker-item .quote-author {
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-pale);
}

.top-ticker-divider {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: #F4B400;               /* Google gold */
  flex-shrink: 0;
}
.top-ticker-divider svg { width: 14px; height: 14px; fill: currentColor; display: block; }

@media (max-width: 700px) {
  .nav { height: 60px; }
  .top-ticker { height: 44px; top: 60px; }
  .top-ticker-item { font-size: var(--t-xs); }
  .top-ticker-divider svg { width: 12px; height: 12px; }
}

/* --- Reviews ticker (marquee above footer) ----------------------------- */
.reviews-ticker {
  background: var(--cream);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  padding: var(--s-5) 0;
  overflow: hidden;
  position: relative;
}
.reviews-ticker::before,
.reviews-ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 80px;
  z-index: 2; pointer-events: none;
}
.reviews-ticker::before { left: 0;  background: linear-gradient(90deg, var(--cream), transparent); }
.reviews-ticker::after  { right: 0; background: linear-gradient(-90deg, var(--cream), transparent); }

.reviews-ticker .label {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--f-body); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-deep);
  padding: 0 var(--s-5); flex-shrink: 0;
}
.reviews-ticker .label .stars {
  display: inline-flex; gap: 1px; color: #E8A317;
}
.reviews-ticker .label .stars svg { width: 14px; height: 14px; fill: currentColor; }

.ticker-track {
  display: flex; align-items: center; gap: var(--s-7);
  white-space: nowrap; width: max-content;
  animation: ticker-scroll 50s linear infinite;
}
.reviews-ticker:hover .ticker-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

.ticker-item {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--f-display); font-size: var(--t-base);
  font-style: italic; color: var(--ink); line-height: 1.4;
  font-variation-settings: "opsz" 36;
}
.ticker-item .quote-glyph {
  color: var(--brand); font-size: 1.4em; line-height: 0; font-style: normal;
}
.ticker-item .cite {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-body); font-style: normal; font-weight: 600;
  font-size: var(--t-xs); color: var(--brand-deep);
  text-transform: uppercase; letter-spacing: 0.10em;
  padding-left: var(--s-3); margin-left: var(--s-3);
  border-left: 1px solid var(--rule);
}
.ticker-item .rating-stars {
  display: inline-flex; gap: 1px;
  color: #E8A317; font-size: 11px; letter-spacing: 0;
  text-transform: none;
}
.ticker-item .rating-stars svg { width: 12px; height: 12px; fill: currentColor; }
.ticker-item .stars {
  display: inline-flex; gap: 1px; color: #E8A317;
}
.ticker-item .stars svg { width: 14px; height: 14px; fill: currentColor; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 700px) {
  .reviews-ticker .label { display: none; }
  .ticker-item { font-size: var(--t-sm); }
}

/* --- Print -------------------------------------------------------------- */
@media print {
  .nav, .book-float, footer .foot-bar { display: none; }
  body { background: white; }
  a { color: black; text-decoration: underline; }
}