/* ====== Photo and film sample tokens ====== */
.media-sample {
 --sample-gutter: clamp(1.25rem,4.5vw,5rem);
 --sample-space: clamp(3rem,6vw,6rem);
 --sample-small: .8rem;
 --sample-caption: .875rem;
 --sample-title: clamp(3.1rem,6.4vw,6rem);
 --sample-border: 1px;
 --sample-radius: .35rem;
 --sample-gap:var(--sample-space-1);
 --sample-font: 'Fraunces',Georgia,serif;
 --sample-white: var(--cream);
}
.media-sample .container { width:100%; max-width:1440px; padding-inline:var(--sample-gutter); }
.media-sample main section { padding-block:var(--sample-space); }
.media-sample .nav { background:var(--cream); box-shadow:none; border-bottom:var(--sample-border) solid var(--sand); }
.media-sample .nav-inner { max-width:1440px; padding-inline:var(--sample-gutter); }
.media-sample .brand { font-family:var(--sample-font); font-size:var(--sample-type-2); letter-spacing:var(--sample-type-3); }
.media-sample .btn { border-radius:var(--sample-radius); padding:var(--sample-space-4); }
.media-sample .btn-primary { background:var(--ink); color:var(--cream); }
.media-sample .btn-primary:hover { background:var(--terracotta-dark); }
.media-sample .eyebrow { letter-spacing:var(--sample-type-5); font-size:var(--sample-small); }
.media-sample main h2 { font-size:var(--sample-type-6); letter-spacing:var(--sample-type-3); line-height:var(--sample-type-7); }
.media-sample figure { margin:0; }
.media-sample img { display:block; }
.media-sample video { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--ink); }
.sample-notice { display:flex; gap:var(--sample-gap); justify-content:space-between; margin:0; padding:.55rem var(--sample-gutter); background:var(--ink); color:var(--cream); font-size:var(--sample-small); }
.sample-notice a { color:var(--gold); text-decoration:underline; }
/* ====== Opening spread, original photography and user supplied film ====== */
.media-sample main .hero { background:var(--gold); padding-block:var(--sample-space-8); }
.media-sample .hero .hero-grid { grid-template-columns:.95fr 1.05fr; gap:var(--sample-space-9); align-items:center; }
.media-sample .hero h1 { font-size:var(--sample-title); line-height:var(--sample-type-10); letter-spacing:var(--sample-type-11); max-width:12ch; margin-block:var(--sample-space-12); font-weight:600; }
.media-sample .hero .accent { color:var(--terracotta-dark); text-decoration:underline; text-decoration-thickness:.035em; text-underline-offset:.12em; }
.media-sample .hero .hero-sub { max-width:38ch; margin-bottom:var(--sample-space-13); line-height:var(--sample-type-14); color:var(--ink); }
.media-sample .hero .hero-trustline { color:var(--ink); font-size:var(--sample-small); margin-top:var(--sample-space-13); }
.sample-secondary { font-size:var(--sample-caption); max-width:38ch; margin-top:var(--sample-space-1); }
.sample-secondary a { color:var(--ink); text-decoration:underline; text-underline-offset:.2em; }
.sample-hero-media { display:grid; grid-template-columns:.8fr 1.2fr; gap:var(--sample-gap); }
.sample-hero-media figure { overflow:hidden; background:var(--cream); border-radius:var(--sample-radius); }
.sample-hero-media .sample-film { grid-column:1/-1; }
.sample-hero-media img { width:100%; height:180px; object-fit:cover; }
.sample-hero-media .sample-portrait img { object-position:50% 35%; }
.sample-hero-media .sample-landscape img { object-position:50% 68%; }
.sample-hero-media figcaption { padding:var(--sample-space-15); font-size:var(--sample-small); font-weight:500; }
/* ====== Near top inquiry, photo and uncluttered fields ====== */
.media-sample .contact { background:var(--cream); }
.media-sample .contact .contact-grid { grid-template-columns:.85fr 1.15fr; gap:var(--sample-space-16); }
.media-sample .contact-info { padding-top:0; max-width:40ch; }
.media-sample .contact-info h2 { max-width:12ch; }
.sample-form-photo { width:100%; max-height:260px; aspect-ratio:4/3; object-fit:cover; object-position:50% 35%; border-radius:var(--sample-radius); margin-top:var(--sample-space-17); }
.media-sample .form { background:var(--cream-2); box-shadow:none; border:0; border-radius:var(--sample-radius); padding:var(--sample-space-18); }
.media-sample .form h3 { font-size:var(--sample-type-19); }
.media-sample .form .field { margin-bottom:var(--sample-space-20); }
.media-sample .form textarea { min-height:120px; }
/* ====== Gallery as a deliberate visual chapter ====== */
.media-sample main .sample-gallery { background:var(--terracotta-dark); color:var(--cream); }
.sample-gallery h2,.sample-gallery .eyebrow { color:var(--cream); }
.sample-gallery-heading { display:grid; grid-template-columns:1.2fr .8fr; gap:var(--sample-space-21); align-items:end; margin-bottom:var(--sample-space-22); }
.sample-gallery-heading p { margin:var(--sample-space-23); max-width:42ch; font-size:var(--sample-type-24); }
.sample-photo-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--sample-gap); margin-bottom:var(--sample-space-13); }
.sample-photo-grid figure { overflow:hidden; border-radius:var(--sample-radius); }
.sample-photo-grid img { width:100%; aspect-ratio:3/4; object-fit:cover; transition:transform var(--vr-motion) var(--vr-ease); }
.sample-photo-grid figure:nth-child(even) { margin-top:var(--sample-space-25); }
.sample-gallery .vp-text-link { color:var(--cream); }
/* ====== Existing content with stronger section rhythm ====== */
.media-sample .vp-topic-nav { padding-block:var(--sample-space-26); }
.media-sample .breed-truth { background:var(--ink); }
.sample-breed-film { margin-bottom:var(--sample-space-1); border-radius:var(--sample-radius); overflow:hidden; }
.media-sample .vp-editorial { gap:var(--sample-space-27); grid-template-columns:1fr 1fr; }
.media-sample #rehome { background:var(--sand); }
.media-sample #sponsor { background:var(--gold); }
.media-sample #sponsor .btn-secondary { border-color:var(--ink); color:var(--ink); }
.media-sample #sponsor p,.media-sample #sponsor .eyebrow { color:var(--ink); }
.media-sample #available .vp-section-heading { max-width:700px; }
.media-sample .vp-process li::before { font-size:var(--sample-type-28); }
.media-sample #services { background:var(--cream-2); }
.media-sample .pillar { border:0; padding:0; }
.sample-service-photo { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--sample-radius); margin-bottom:var(--sample-space-29); }
.media-sample .pillar h3 { font-size:var(--sample-type-30); }
.media-sample .vp-about-photo { border-radius:var(--sample-radius); }
.media-sample #questions { background:var(--sand); }
/* ====== User controlled films ====== */
.media-sample main .sample-clips { background:var(--cream); }
.sample-clip-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sample-space-13); }
.sample-clip-grid video { border-radius:var(--sample-radius); }
.sample-clip-grid figcaption { padding-top:var(--sample-space-31); font-family:var(--sample-font); font-size:var(--sample-type-32); }
/* ====== Purposeful hover and motion ====== */
@media (hover:hover) and (pointer:fine) {
 .sample-photo-grid figure:hover img { transform:scale(1.045); }
 .media-sample .btn:active { transform:translateY(1px); }
}
/* ====== Tablet and phone composition ====== */
@media (max-width:1000px) {
 .media-sample .hero .hero-grid { grid-template-columns:1fr 1fr; gap:var(--sample-space-25); }
 .media-sample .hero h1 { font-size:var(--sample-type-33); }
 .sample-hero-media img { height:140px; }
 .media-sample .contact .contact-grid { gap:var(--sample-space-25); }
 .sample-photo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .sample-photo-grid figure:nth-child(even) { margin-top:0; }
 .sample-photo-grid img { aspect-ratio:4/5; }
}
@media (max-width:700px) {
 .sample-notice span { display:none; }
 .sample-notice { font-size:var(--sample-type-34); }
 .media-sample .hero .hero-grid,.media-sample .contact .contact-grid,.media-sample .vp-editorial,.sample-gallery-heading { grid-template-columns:1fr; gap:var(--sample-space-17); }
 .media-sample .hero h1 { font-size:var(--sample-type-35); max-width:14ch; }
 .media-sample .hero .hero-sub { max-width:none; }
 .sample-hero-media { grid-template-columns:1fr 1fr; }
 .sample-hero-media img { height:130px; }
 .sample-hero-media figcaption { font-size:var(--sample-type-34); padding:var(--sample-space-36); }
 .media-sample .contact-info h2 { max-width:15ch; }
 .media-sample .sample-form-photo { display:none; }
 .media-sample .form { padding:var(--sample-space-26); }
 .sample-gallery-heading { margin-bottom:var(--sample-space-17); }
 .sample-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sample-space-31); }
 .sample-clip-grid { grid-template-columns:1fr; gap:var(--sample-space-25); }
 .media-sample .pillars-grid { gap:var(--sample-space-37); }
 .media-sample .vp-editorial { gap:var(--sample-space-25); }
}
/* ====== Respect motion preferences ====== */
@media (prefers-reduced-motion:reduce) {
 .sample-photo-grid img { transition:none; }
 .sample-photo-grid figure:hover img { transform:none; }
}
/* ====== Readable color roles on colored surfaces ====== */
.media-sample main .sample-notice { max-width:none; }
.media-sample main .sample-notice a { color:var(--gold) !important; }
.media-sample .hero .eyebrow,.media-sample .hero .accent,.media-sample .hero .sample-secondary a { color:var(--ink) !important; }
.media-sample .hero .accent { text-decoration-color:var(--terracotta-dark); }
.media-sample #rehome .eyebrow,.media-sample #rehome a,.media-sample #questions .eyebrow,.media-sample #questions a,.media-sample #sponsor .eyebrow { color:var(--ink) !important; }
.media-sample .sample-gallery .eyebrow,.media-sample .sample-gallery a { color:var(--cream) !important; }
/* ====== Link overrides for the shared high specificity link rules ====== */
.media-sample #main .sample-notice a { color:var(--gold) !important; }
.media-sample #main .sample-secondary a { color:var(--ink) !important; }

/* ====== Shared sample spacing and type scale ====== */
.media-sample {
 --sample-space-1: 1rem;
 --sample-type-2: 1.5rem;
 --sample-type-3: -.04em;
 --sample-space-4: .95rem 1.2rem;
 --sample-type-5: .09em;
 --sample-type-6: clamp(2.2rem,4.5vw,4rem);
 --sample-type-7: 1.05;
 --sample-space-8: clamp(2.5rem,4vw,4rem);
 --sample-space-9: clamp(2rem,4vw,4rem);
 --sample-type-10: .99;
 --sample-type-11: -.055em;
 --sample-space-12: 1.2rem 1.5rem;
 --sample-space-13: 1.5rem;
 --sample-type-14: 1.65;
 --sample-space-15: .5rem .75rem;
 --sample-space-16: 2rem 5rem;
 --sample-space-17: 1.75rem;
 --sample-space-18: 2.25rem;
 --sample-type-19: 1.7rem;
 --sample-space-20: 1.2rem;
 --sample-space-21: 3rem;
 --sample-space-22: 2.5rem;
 --sample-space-23: 0 0 .4rem;
 --sample-type-24: .95rem;
 --sample-space-25: 2rem;
 --sample-space-26: 1.25rem;
 --sample-space-27: 4rem;
 --sample-type-28: 3.5rem;
 --sample-space-29: 1.3rem;
 --sample-type-30: 1.75rem;
 --sample-space-31: .75rem;
 --sample-type-32: 1.4rem;
 --sample-type-33: clamp(3rem,6.2vw,5rem);
 --sample-type-34: .7rem;
 --sample-type-35: clamp(3.2rem,12vw,5rem);
 --sample-space-36: .45rem .6rem;
 --sample-space-37: 2.75rem;
}
/* ====== Bright sample direction, requested by Eric ====== */
.media-sample {
 --cream: #fffdf8;
 --cream-2: #f7f8ed;
 --sand: #e1e8de;
 --ink: #253f3b;
 --ink-soft: #506760;
 --line: #d9e3dc;
 --sample-sky: #eaf5f9;
 --sample-sage: #e8f1db;
 --sample-peach: #fff0e6;
 --sample-hero-display: clamp(2.6rem,4.7vw,4.6rem);
 --sample-brand-size: 1.65rem;
 --sample-brand-detail: .7rem;
 --sample-brand-track: .015em;
 --sample-header-space: .8rem;
 --sample-utility-space: .45rem;
 --sample-collage-row: clamp(10rem,15vw,14rem);
 --sample-collage-gap: .8rem;
 --sample-film-caption: .6rem .9rem;
 --sample-film-caption-line: 1.4;
 --sample-poster-radius: .75rem;
 --sample-phone-display: clamp(2.55rem,9.8vw,4rem);
}
/* ====== Informative header and brighter opening ====== */
.media-sample .nav { background:var(--cream); border-color:var(--line); }
.media-sample .nav-inner { padding-block:var(--sample-header-space); }
.media-sample .brand { font-size:var(--sample-brand-size); }
.sample-brand-text { display:flex; flex-direction:column; line-height:var(--sample-film-caption-line); }
.sample-brand-text small { font-family:var(--vr-font-body); font-size:var(--sample-brand-detail); letter-spacing:var(--sample-brand-track); font-weight:500; color:var(--ink-soft); }
.media-sample .brand-mark { width:52px; height:52px; }
.media-sample main .sample-notice { padding-block:var(--sample-utility-space); background:var(--sample-sage); color:var(--ink); }
.media-sample #main .sample-notice a { color:var(--ink) !important; }
.media-sample main .hero { background:var(--sample-peach); }
.media-sample .hero h1 { font-size:var(--sample-hero-display); line-height:var(--sample-type-7); max-width:17ch; letter-spacing:var(--sample-type-3); }
.media-sample .hero .accent { color:var(--terracotta-dark) !important; text-decoration:none; }
.media-sample .hero .hero-sub { max-width:44ch; }
.media-sample .btn-primary { background:var(--terracotta-dark); color:var(--cream); box-shadow:none; }
.media-sample .btn-primary:hover { background:var(--ink); }
.sample-hero-details { border-top:var(--sample-border) solid var(--ink-soft); padding-top:var(--sample-space-1); margin-top:var(--sample-space-13); font-size:var(--sample-caption); }
.sample-hero-details p { margin:var(--sample-space-23); }
.media-sample .sample-hero-media figure { border-radius:var(--sample-poster-radius); }
/* ====== One film framed by six original photos ====== */
.media-sample main .sample-gallery { background:var(--sample-sky); color:var(--ink); }
.media-sample .sample-gallery h2,.media-sample .sample-gallery .eyebrow,.media-sample .sample-gallery a { color:var(--ink) !important; }
.sample-photo-grid { grid-template-columns:1fr 1.3fr 1.3fr 1fr; grid-template-rows:repeat(3,var(--sample-collage-row)); grid-template-areas:'bear film film kenji' 'primo film film leo' 'sammi sammi chihiro chihiro'; gap:var(--sample-collage-gap); }
.sample-photo-grid figure:nth-child(even) { margin-top:0; }
.sample-photo-grid figure { border-radius:var(--sample-poster-radius); min-width:0; min-height:0; }
.sample-photo-grid img { height:100%; aspect-ratio:auto; object-position:center 40%; }
.sample-photo-grid .photo-1 { grid-area:bear; }
.sample-photo-grid .photo-2 { grid-area:kenji; }
.sample-photo-grid .photo-3 { grid-area:primo; }
.sample-photo-grid .photo-4 { grid-area:leo; }
.sample-photo-grid .photo-5 { grid-area:sammi; }
.sample-photo-grid .photo-6 { grid-area:chihiro; }
.sample-gallery-film { grid-area:film; display:grid; grid-template-rows:1fr auto; background:var(--cream); }
.media-sample .sample-gallery-film video { height:100%; min-height:0; aspect-ratio:auto; object-fit:cover; }
.sample-gallery-film figcaption { padding:var(--sample-film-caption); font-size:var(--sample-caption); line-height:var(--sample-film-caption-line); }
/* ====== Light backgrounds and fresh accents throughout ====== */
.media-sample .form { background:var(--sample-peach); }
.media-sample .breed-truth { background:var(--sample-sage); color:var(--ink); }
.media-sample .breed-truth h2,.media-sample .breed-truth h3,.media-sample .breed-truth p { color:var(--ink); }
.media-sample #breed-truth .eyebrow,.media-sample #breed-truth a { color:var(--terracotta-dark) !important; }
.media-sample .breed-truth .vp-detail { border-color:var(--line); }
.media-sample #rehome { background:var(--sample-peach); }
.media-sample #sponsor { background:var(--sample-peach); }
.media-sample #services { background:var(--cream); }
.media-sample #questions { background:var(--sample-sky); }
.media-sample .nsf-col h2,.media-sample .nsf-col a,.media-sample .nsf-strip a,.media-sample .nsf-legal-line,.media-sample .nsf-legal-line a,.media-sample .nsf-strip,.media-sample .nsf-strip p { color:var(--cream); }
/* ====== Phone layout with film still framed by photography ====== */
@media (max-width:700px) {
 .media-sample .brand { font-size:var(--sample-type-2); }
 .media-sample .brand-mark { width:40px; height:40px; }
 .media-sample .hero h1 { font-size:var(--sample-phone-display); max-width:18ch; }
 .sample-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:var(--sample-collage-row) auto var(--sample-collage-row) var(--sample-collage-row); grid-template-areas:'bear kenji' 'film film' 'primo leo' 'sammi chihiro'; }
 .media-sample .sample-gallery-film video { height:auto; aspect-ratio:16/9; }
 .media-sample .sample-clip-grid { grid-template-columns:1fr; }
}
/* ====== Keep faces visible in the wide gallery photographs ====== */
.sample-photo-grid .photo-5 img { object-position:50% 22%; }
.sample-photo-grid .photo-6 img { object-position:50% 65%; }
/* ====== Quiet green footer and header controls ====== */
.media-sample .nsf-footer { background:var(--ink); color:var(--cream); }
.media-sample .nav-links .nav-cta { border-radius:var(--sample-radius); box-shadow:none; }

/* ====== Remaining films balance after the gallery placement ====== */
.media-sample .sample-clip-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:700px) { .media-sample .sample-clip-grid { grid-template-columns:1fr; } }
/* ====== Bigger type and full editorial screens ====== */
.media-sample {
 --sample-body-size: 1.125rem;
 --sample-section-display: clamp(2.65rem,5.2vw,5.2rem);
 --sample-heading-display: clamp(3rem,5.6vw,5.6rem);
 --sample-screen-space: clamp(3.5rem,6vw,6rem);
 --sample-frame-width: 3px;
 --sample-frame-pad: .5rem;
 --sample-frame-wide: .8rem;
 --sample-frame-green: #46674e;
 --sample-frame-blue: #496875;
 --sample-frame-pink: #dbb0a5;
 --sample-frame-gap: 1.2rem;
 --sample-frame-round: 1.5rem;
 --sample-border-double: 6px;
 --sample-video-inset: .75rem;
 --sample-footer-measure: 17ch;
 --sample-footer-gap: 3rem;
 --sample-footer-small: .85rem;
 --sample-footer-line: 1.65;
}
.media-sample { font-size:var(--sample-body-size); }
.media-sample main h2 { font-size:var(--sample-section-display); max-width:18ch; }
.media-sample .hero h1 { font-size:var(--sample-heading-display); }
.media-sample main p { line-height:var(--sample-footer-line); }
.media-sample main section { min-height:calc(100svh - 96px); display:grid; align-items:center; padding-block:var(--sample-screen-space); }
.media-sample .btn { font-size:var(--sample-body-size); font-weight:600; padding:var(--sample-space-4); }
.media-sample .sample-hero-media { gap:var(--sample-frame-gap); }
/* ====== Individual gallery frames, playful without obscuring the dogs ====== */
.sample-photo-grid { gap:var(--sample-frame-gap); }
.sample-photo-grid .sample-gallery-photo { padding:var(--sample-frame-pad); background:var(--cream); }
.sample-photo-grid .sample-gallery-photo img { border-radius:inherit; }
.sample-photo-grid .photo-1 { border:var(--sample-frame-width) solid var(--sample-frame-green); border-radius:48% 48% var(--sample-frame-round) var(--sample-frame-round); }
.sample-photo-grid .photo-2 { border:var(--sample-frame-width) dashed var(--terracotta-dark); border-radius:var(--sample-frame-round) 3rem var(--sample-frame-round) 3rem; }
.sample-photo-grid .photo-3 { border:var(--sample-border-double) double var(--sample-frame-pink); border-radius:3rem var(--sample-frame-round) 3rem var(--sample-frame-round); }
.sample-photo-grid .photo-4 { border:var(--sample-frame-width) dotted var(--sample-frame-blue); border-radius:42% 18% 42% 18%; }
.sample-photo-grid .photo-5 { border:var(--sample-frame-width) solid var(--terracotta-dark); border-radius:4rem var(--sample-frame-round) var(--sample-frame-round) 4rem; }
.sample-photo-grid .photo-6 { border:var(--sample-border-double) double var(--sample-frame-green); border-radius:var(--sample-frame-round) 4rem 4rem var(--sample-frame-round); }
.sample-photo-grid .sample-gallery-film { border:var(--sample-frame-width) solid var(--ink); padding:var(--sample-frame-pad); border-radius:var(--sample-frame-round); }
.sample-photo-grid .sample-gallery-film video { border-radius:var(--sample-frame-round); }
/* ====== Coordinated frames for the remaining photographs and films ====== */
.media-sample .sample-hero-media .sample-film { border:var(--sample-border-double) double var(--sample-frame-green); border-radius:var(--sample-frame-round); padding:var(--sample-frame-pad); }
.media-sample .sample-hero-media .sample-film video { border-radius:var(--sample-frame-round); }
.media-sample .sample-hero-media .sample-portrait { border:var(--sample-frame-width) dashed var(--terracotta-dark); border-radius:3rem 3rem var(--sample-frame-round) var(--sample-frame-round); padding:var(--sample-frame-pad); }
.media-sample .sample-hero-media .sample-landscape { border:var(--sample-frame-width) solid var(--sample-frame-blue); border-radius:var(--sample-frame-round) 3rem var(--sample-frame-round) 3rem; padding:var(--sample-frame-pad); }
.media-sample .sample-hero-media img { border-radius:inherit; }
.media-sample .sample-form-photo { border:var(--sample-border-double) double var(--sample-frame-green); padding:var(--sample-frame-pad); border-radius:3rem var(--sample-frame-round); }
.media-sample .sample-service-photo { border:var(--sample-border-double) double var(--sample-frame-green); padding:var(--sample-frame-pad); border-radius:3rem 3rem var(--sample-frame-round) var(--sample-frame-round); }
.media-sample .pillar:nth-child(2) .sample-service-photo { border-style:dashed; border-color:var(--terracotta-dark); border-radius:var(--sample-frame-round) 3rem; }
.media-sample .pillar:nth-child(3) .sample-service-photo { border-style:dotted; border-color:var(--sample-frame-blue); border-radius:3rem var(--sample-frame-round); }
.media-sample .vp-about-photo { padding:var(--sample-frame-wide); border:var(--sample-border-double) double var(--sample-frame-green); border-radius:3rem var(--sample-frame-round); }
.media-sample .vp-about-photo img { border-radius:inherit; }
.media-sample .sample-breed-film,.media-sample .sample-clip-grid figure { border:var(--sample-frame-width) solid var(--sample-frame-green); border-radius:var(--sample-frame-round); padding:var(--sample-frame-pad); }
/* ====== Explicit pause controls for visible-only silent autoplay ====== */
.media-sample figure:has(video) { position:relative; }
.sample-video-toggle { position:absolute; top:var(--sample-video-inset); right:var(--sample-video-inset); min-height:44px; padding:var(--sample-space-15); border:var(--sample-border) solid var(--ink); border-radius:var(--sample-radius); background:var(--cream); color:var(--ink); font:inherit; font-size:var(--sample-caption); font-weight:600; cursor:pointer; }
.sample-video-toggle:hover { background:var(--sample-sage); }
/* ====== Redeveloped footer, one invitation and useful routes ====== */
.sample-footer { background:var(--sample-peach); color:var(--ink); padding-block:var(--sample-screen-space) var(--sample-space-25); }
.sample-footer h2 { font-size:var(--sample-section-display); line-height:var(--sample-type-7); letter-spacing:var(--sample-type-3); max-width:var(--sample-footer-measure); }
.sample-footer-invite { display:grid; grid-template-columns:1.6fr .65fr; gap:var(--sample-footer-gap); align-items:center; padding-bottom:var(--sample-footer-gap); }
.sample-footer-photo { border:var(--sample-border-double) double var(--terracotta-dark); padding:var(--sample-frame-wide); border-radius:48% 48% var(--sample-frame-round) var(--sample-frame-round); overflow:hidden; }
.sample-footer-photo img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:inherit; }
.sample-footer-secondary { display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:.3em; color:var(--ink); }
.sample-footer-directory { display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:var(--sample-footer-gap); padding-block:var(--sample-footer-gap); border-block:var(--sample-border) solid var(--sample-frame-pink); }
.sample-footer-directory h3 { font-family:var(--vr-font-body); font-size:var(--sample-body-size); margin-bottom:var(--sample-space-1); }
.sample-footer-directory a:not(.brand) { display:block; min-height:44px; color:var(--ink); font-size:var(--sample-caption); }
.sample-footer-directory a:hover { color:var(--terracotta-dark); text-decoration:underline; text-underline-offset:.25em; }
.sample-footer-brand .brand { margin-bottom:var(--sample-space-1); }
.sample-footer-brand p { font-size:var(--sample-caption); }
.sample-footer .nsf-legal-line { color:var(--ink); max-width:85ch; font-size:var(--sample-footer-small); }
.sample-footer .nsf-legal-line a { color:var(--terracotta-dark); }
.sample-footer-disclosures { padding-top:var(--sample-space-25); }
.sample-footer-disclosures details { font-size:var(--sample-footer-small); }
.sample-footer-disclosures summary { min-height:44px; cursor:pointer; padding-block:var(--sample-space-31); }
.sample-footer-bottom { display:flex; justify-content:space-between; gap:var(--sample-space-1); padding-top:var(--sample-space-25); font-size:var(--sample-footer-small); }
.sample-footer-bottom nav { display:flex; flex-wrap:wrap; gap:var(--sample-space-1); }
.sample-footer-bottom a { display:inline-flex; min-height:44px; color:var(--ink); }
/* ====== Full screens give way to natural phone content height ====== */
@media (max-width:900px) {
 .sample-footer-directory { grid-template-columns:1fr 1fr; gap:var(--sample-space-25); }
}
@media (max-width:700px) {
 .media-sample main section { min-height:auto; }
 .media-sample .hero h1 { font-size:var(--sample-phone-display); }
 .sample-footer-invite { grid-template-columns:1fr; }
 .sample-footer-photo { max-width:240px; }
 .sample-footer-directory { gap:var(--sample-space-25) var(--sample-space-1); }
 .sample-footer-brand { grid-column:1/-1; }
 .sample-footer-bottom { flex-direction:column; }
 .media-sample .sample-hero-media .sample-portrait,.media-sample .sample-hero-media .sample-landscape { border-radius:var(--sample-frame-round); }
}
/* ====== Filled layouts follow content instead of forced screen height ====== */
.media-sample {
 --sample-filled-space: clamp(2.75rem,4.5vw,4.5rem);
 --sample-filled-gap: clamp(1.5rem,3vw,3rem);
 --sample-panel-pad: clamp(1.2rem,2vw,1.8rem);
 --sample-highlight-fill: #eed4c6;
 --sample-panel-radius: 1.25rem;
 --sample-icon-size: 2rem;
 --sample-icon-stroke: 1.7;
 --sample-flow-arrow: 1.8rem;
 --sample-hover-shadow: 0 12px 26px rgba(37,63,59,.1);
 --sample-support-height: 17rem;
}
.media-sample main section { min-height:0; padding-block:var(--sample-filled-space); }
.media-sample .vp-editorial,.media-sample .vp-about-layout { gap:var(--sample-filled-gap); align-items:start; }
.media-sample .vp-section-intro { max-width:none; container-type:inline-size; }
.media-sample .vp-section-intro h2 { max-width:none; font-size:clamp(2rem,10cqi,4rem); line-height:1.08; text-wrap:balance; }
.media-sample main p { text-wrap:pretty; max-width:58ch; }
.media-sample .vp-section-heading p { max-width:44ch; text-wrap:balance; }
.media-sample .vp-detail-stack { gap:var(--sample-space-1); }
.media-sample .vp-section-intro > p { margin-top:var(--sample-space-13); }
/* ====== Original photos fill the supporting stories ====== */
.media-sample .sample-support-photo { margin-top:var(--sample-space-25); padding:var(--sample-frame-pad); border:var(--sample-frame-width) solid var(--sample-frame-green); border-radius:var(--sample-frame-round) 3rem; overflow:hidden; }
.media-sample .sample-support-photo img { display:block; width:100%; height:var(--sample-support-height); object-fit:cover; border-radius:inherit; object-position:50% 40%; }
.media-sample .sample-breed-photo img { object-position:50% 65%; }
.media-sample .sample-cost-photo img { object-position:50% 23%; }
.media-sample .sample-sponsor-photo { border-style:dashed; border-color:var(--terracotta-dark); }
.media-sample .sample-sponsor-photo img { object-position:50% 30%; }
.media-sample .sample-rehome-photo { margin-top:var(--sample-space-1); border-style:double; border-width:var(--sample-border-double); }
.media-sample .sample-rehome-photo img { height:13rem; }
.media-sample .sample-question-photo { border-style:dotted; border-color:var(--sample-frame-blue); }
.media-sample .sample-question-photo img { height:14rem; object-position:50% 32%; }
/* ====== Small illustrated icons, hidden from assistive technology ====== */
.sample-icon { width:var(--sample-icon-size); height:var(--sample-icon-size); flex-shrink:0; fill:none; stroke:currentColor; stroke-width:var(--sample-icon-stroke); stroke-linecap:round; stroke-linejoin:round; }
.sample-icon-label { display:flex; align-items:center; gap:var(--sample-space-31); }
.sample-icon-label .sample-icon { color:var(--terracotta-dark); }
.sample-care-tags { display:grid; gap:var(--sample-space-1); }
.sample-care-tags > span { display:flex; gap:var(--sample-space-1); align-items:center; padding:var(--sample-space-1); background:var(--cream); border-radius:var(--sample-panel-radius); font-weight:600; }
.sample-care-tags .sample-icon { color:var(--terracotta-dark); }
.media-sample .vp-cost-list > div { display:block; padding:var(--sample-panel-pad); border:var(--sample-border) solid var(--line); background:var(--sample-sage); border-radius:var(--sample-panel-radius); margin-bottom:var(--sample-space-1); }
.media-sample .vp-cost-list dt { display:flex; gap:var(--sample-space-31); align-items:center; margin-bottom:var(--sample-space-31); }
.media-sample .vp-cost-list dd { font-size:var(--sample-body-size); }
/* ====== Boxed adoption flow with explicit directional connectors ====== */
.sample-flow-heading { display:grid; grid-template-columns:1.2fr .8fr; gap:var(--sample-filled-gap); align-items:center; margin-bottom:var(--sample-space-25); }
.media-sample #available .vp-section-heading { margin:0; max-width:none; }
.media-sample .sample-flow-photo { margin-top:0; }
.media-sample .sample-flow-photo img { height:13rem; object-position:50% 65%; }
.media-sample .vp-process { gap:var(--sample-space-25); align-items:stretch; margin-bottom:var(--sample-space-25); }
.media-sample .vp-process li { position:relative; padding:var(--sample-panel-pad); border:var(--sample-frame-width) solid var(--line); border-radius:var(--sample-panel-radius); background:var(--sample-sky); transition:transform var(--vr-motion) var(--vr-ease),box-shadow var(--vr-motion),border-color var(--vr-motion); }
.media-sample .vp-process li:nth-child(2) { background:var(--sample-sage); }
.media-sample .vp-process li:nth-child(3) { background:var(--sample-peach); }
.media-sample .vp-process li:nth-child(4) { background:var(--cream-2); }
.media-sample .vp-process li::before { font-size:clamp(2.4rem,3vw,3rem); margin-bottom:var(--sample-space-13); line-height:1; }
.media-sample .vp-process li > .sample-icon { position:absolute; top:var(--sample-panel-pad); right:var(--sample-panel-pad); color:var(--ink); }
.media-sample .vp-process li:not(:last-child)::after { content:'→'; position:absolute; left:100%; top:48%; width:var(--sample-space-25); text-align:center; font-size:var(--sample-flow-arrow); color:var(--terracotta-dark); }
.media-sample .vp-process h3 { font-family:var(--vr-font-body); font-size:1.15rem; line-height:1.35; text-wrap:balance; margin-bottom:var(--sample-space-1); }
.media-sample .vp-process p { font-size:1rem; margin:0; color:var(--ink); text-wrap:pretty; }
.sample-flow-actions { align-items:center; gap:var(--sample-space-25); }
/* ====== Text highlights and clear expandable panels ====== */
.sample-highlight { background:linear-gradient(transparent 64%,var(--sample-highlight-fill) 64%,var(--sample-highlight-fill) 92%,transparent 92%); box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.media-sample .vp-faq { background:var(--cream); border:var(--sample-border) solid var(--line); border-radius:var(--sample-panel-radius); padding-inline:var(--sample-panel-pad); margin-bottom:var(--sample-space-1); transition:border-color var(--vr-motion),box-shadow var(--vr-motion); }
.media-sample .vp-faq:first-child { border-top:var(--sample-border) solid var(--line); }
.media-sample .vp-faq[open] { border-color:var(--sample-frame-blue); }
.media-sample .vp-faq summary { padding-block:var(--sample-space-13); text-wrap:balance; font-size:var(--sample-body-size); }
.media-sample .vp-answer { font-size:var(--sample-body-size); }
.media-sample .vp-resource-links { gap:var(--sample-space-31); margin-top:var(--sample-space-13); }
.media-sample .vp-resource-links a { padding:var(--sample-space-15); border:var(--sample-border) solid var(--line); border-radius:var(--sample-radius); background:var(--cream); }
.media-sample #sponsor .form-note { text-align:left; margin:0; max-width:48ch; text-wrap:pretty; }
/* ====== Purposeful transitions without continuous decorative motion ====== */
@media (hover:hover) and (pointer:fine) {
 .media-sample .vp-process li:hover { border-color:var(--sample-frame-green); transform:translateY(-4px); box-shadow:var(--sample-hover-shadow); }
 .media-sample .vp-faq:hover { border-color:var(--sample-frame-blue); box-shadow:var(--sample-hover-shadow); }
 .media-sample .vp-resource-links a:hover { background:var(--sample-sage); }
 .media-sample .sample-icon-label:hover .sample-icon { transform:rotate(-7deg); }
}
.sample-icon-label .sample-icon { transition:transform var(--vr-motion) var(--vr-ease); }
@media (prefers-reduced-motion:no-preference) {
 .media-sample .vp-faq[open] .vp-answer { animation:sample-answer-reveal 240ms ease-out; }
 @keyframes sample-answer-reveal { from { opacity:.65; transform:translateY(4px); } to { opacity:1; transform:none; } }
}
/* ====== Responsive flow and balanced heading lengths ====== */
@media (max-width:1100px) {
 .media-sample .vp-process { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .media-sample .vp-process li:nth-child(2)::after { content:'↙'; left:auto; right:0; top:100%; width:100%; }
 .media-sample .vp-process li:nth-child(3)::after { content:'→'; }
}
@media (max-width:700px) {
 .sample-flow-heading { grid-template-columns:1fr; }
 .media-sample .vp-editorial { grid-template-columns:1fr; }
 .media-sample .vp-section-intro h2 { font-size:clamp(2rem,10cqi,3rem); }
 .media-sample .sample-support-photo img { height:14rem; }
 .media-sample .vp-process { grid-template-columns:1fr; }
 .media-sample .vp-process li:not(:last-child)::after { content:'↓'; left:0; right:auto; top:100%; width:100%; }
 .media-sample .vp-process h3 { font-size:1.25rem; }
}
@media (prefers-reduced-motion:reduce) {
 .media-sample .vp-process li:hover,.media-sample .sample-icon-label:hover .sample-icon { transform:none; }
}

/* ====== A useful contact invitation finishes the question panel ====== */
.sample-question-contact { margin-top:var(--sample-space-1); padding:var(--sample-panel-pad); border:var(--sample-border) dashed var(--sample-frame-blue); border-radius:var(--sample-panel-radius); background:var(--sample-sage); }
.sample-question-contact h3 { font-size:var(--sample-type-30); }
.sample-question-contact p { margin-bottom:var(--sample-space-1); }
.sample-question-contact .vp-actions { margin-bottom:0; }
.media-sample .vp-resource-links a { transition:background-color var(--vr-motion),border-color var(--vr-motion); }

/* ====== Inquiry headings use their actual column width ====== */
.media-sample .contact-info { container-type:inline-size; }
.media-sample .contact-info h2 { max-width:none; font-size:clamp(2rem,10cqi,4rem); }
/* ====== Readable question CTA and gentle photo interaction ====== */
.media-sample #questions a.btn-primary { color:var(--cream) !important; }
.media-sample .sample-support-photo img { transition:transform var(--vr-motion) var(--vr-ease); }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .media-sample .sample-support-photo:hover img { transform:scale(1.025); }
}
/* ====== Tablet path follows the arrows in a clear return row ====== */
@media (min-width:701px) and (max-width:1100px) {
 .media-sample .vp-process li:nth-child(3) { grid-column:2; grid-row:2; }
 .media-sample .vp-process li:nth-child(4) { grid-column:1; grid-row:2; }
 .media-sample .vp-process li:nth-child(2)::after { content:'↓'; }
 .media-sample .vp-process li:nth-child(3)::after { content:'←'; left:auto; right:100%; }
}
/* ====== Natural photo proportions, no repeated images or cover crops ====== */
.media-sample {
 --sample-photo-inner-radius: .5rem;
 --sample-photo-outer-radius: 1.75rem;
 --sample-mobile-gutter: 1rem;
 --sample-mobile-section-space: 2.5rem;
 --sample-mobile-gap: 1.25rem;
 --sample-mobile-title: clamp(2.15rem,9.5vw,2.8rem);
 --sample-mobile-heading: clamp(1.9rem,9vw,2.6rem);
 --sample-mobile-body: 1rem;
 --sample-mobile-brand: 1.3rem;
 --sample-mobile-header-pad: .55rem;
 --sample-mobile-bottom-space: 5rem;
 --sample-mobile-inquiry-pad: .65rem 1rem;
}
.media-sample .sample-support-photo img,.media-sample .sample-form-photo,.media-sample .sample-service-photo,.media-sample .vp-about-photo img,.media-sample .sample-footer-photo img,.media-sample .sample-hero-media img,.media-sample .sample-photo-grid img {
 width:100%; height:auto; max-height:none; aspect-ratio:auto; object-fit:contain; object-position:center; border-radius:var(--sample-photo-inner-radius);
}
.media-sample .sample-support-photo:hover img { transform:none; }
.media-sample .sample-photo-grid figure:hover img { transform:none; }
.media-sample .sample-footer-photo,.media-sample .sample-hero-media .sample-portrait,.media-sample .sample-hero-media .sample-landscape { border-radius:var(--sample-photo-outer-radius); }
.media-sample .sample-footer-invite { grid-template-columns:1.3fr 1fr; }
.media-sample .sample-form-photo { width:100%; max-width:none; }
.media-sample .sample-support-photo,.media-sample .vp-about-photo { border-radius:var(--sample-photo-outer-radius); }
.media-sample .sample-photo-grid { grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:auto auto; grid-template-areas:'bear film film kenji' 'primo sammi chihiro leo'; align-items:center; }
.media-sample .sample-photo-grid .sample-gallery-photo { border-radius:var(--sample-photo-outer-radius); }
.media-sample .sample-photo-grid .photo-2 { border-radius:var(--sample-photo-inner-radius) var(--sample-photo-outer-radius); }
.media-sample .sample-photo-grid .photo-3 { border-radius:var(--sample-photo-outer-radius) var(--sample-photo-inner-radius); }
.media-sample .sample-photo-grid .photo-4 { border-radius:var(--sample-photo-outer-radius) var(--sample-photo-inner-radius) var(--sample-photo-outer-radius) var(--sample-photo-inner-radius); }
.media-sample .sample-photo-grid .photo-5 { border-radius:var(--sample-photo-inner-radius) var(--sample-photo-outer-radius) var(--sample-photo-outer-radius) var(--sample-photo-inner-radius); }
.media-sample .sample-photo-grid .sample-gallery-film video { height:auto; aspect-ratio:16/9; object-fit:contain; }
.media-sample video { object-fit:contain; }
/* ====== Phone adoption shortcut, hidden while the form or menu is active ====== */
.sample-mobile-inquiry { display:none; }
@media (max-width:700px) {
 .media-sample { --sample-gutter:var(--sample-mobile-gutter); --sample-frame-gap:var(--sample-mobile-gap); font-size:var(--sample-mobile-body); padding-bottom:var(--sample-mobile-bottom-space); }
 .media-sample .nav-inner { padding-block:var(--sample-mobile-header-pad); gap:var(--sample-space-31); }
 .media-sample .brand { font-size:var(--sample-mobile-brand); gap:var(--sample-space-31); }
 .media-sample .brand-mark { width:36px; height:36px; }
 .media-sample .sample-brand-text small { font-size:var(--sample-type-34); }
 .media-sample .nav-toggle { border:var(--sample-border) solid var(--line); border-radius:var(--sample-radius); background:var(--cream-2); }
 .media-sample .nav-links { padding-top:calc(var(--vp-header-height) + var(--sample-space-25)); overscroll-behavior:contain; }
 .media-sample .nav-links > a,.media-sample .care-menu > summary { min-height:52px; font-size:var(--sample-body-size); }
 .media-sample main section { padding-block:var(--sample-mobile-section-space); }
 .media-sample main .hero { padding-block:var(--sample-space-25); }
 .media-sample .hero .hero-grid { gap:var(--sample-mobile-gap); }
 .media-sample .hero h1 { font-size:var(--sample-mobile-title); margin-block:var(--sample-space-1); }
 .media-sample .hero .hero-sub { font-size:var(--sample-mobile-body); margin-bottom:var(--sample-space-1); }
 .media-sample .hero .vp-actions { margin-block:var(--sample-space-1); }
 .media-sample .hero .btn-primary { width:100%; justify-content:center; }
 .media-sample .sample-hero-details { display:none; }
 .media-sample .sample-hero-media { gap:var(--sample-space-31); align-items:center; }
 .media-sample .sample-hero-media figcaption { font-size:var(--sample-caption); line-height:var(--sample-footer-line); }
 .media-sample main h2,.media-sample .vp-section-intro h2,.media-sample .contact-info h2 { font-size:var(--sample-mobile-heading); }
 .media-sample .contact-grid { gap:var(--sample-mobile-gap); }
 .media-sample .contact .contact-info p { margin-bottom:var(--sample-space-31); }
 .media-sample .form { padding:var(--sample-space-1); border-radius:var(--sample-panel-radius); }
 .media-sample .form .row2 { grid-template-columns:1fr; gap:0; }
 .media-sample .form input:not([type=hidden]),.media-sample .form select { min-height:48px; }
 .media-sample .form textarea { min-height:120px; }
 .media-sample .form .field { margin-bottom:var(--sample-space-1); }
 .media-sample .form button { width:100%; min-height:52px; }
 .media-sample .vp-form-next { padding-top:var(--sample-space-1); }
 .media-sample .sample-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(4,auto); grid-template-areas:'bear kenji' 'film film' 'primo leo' 'sammi chihiro'; gap:var(--sample-space-31); }
 .media-sample .sample-gallery-heading { gap:var(--sample-space-1); }
 .media-sample .vp-topic-nav { gap:var(--sample-space-31); }
 .media-sample .vp-topic-nav a { padding:var(--sample-space-15); background:var(--cream-2); border-radius:var(--sample-radius); font-size:var(--sample-caption); }
 .media-sample .sample-support-photo { margin-top:var(--sample-space-1); }
 .media-sample .vp-process { gap:var(--sample-space-25); }
 .media-sample .vp-process li { padding:var(--sample-space-1); }
 .media-sample .vp-process li::before { margin-bottom:var(--sample-space-1); }
 .media-sample .sample-flow-actions { display:grid; gap:var(--sample-space-31); }
 .media-sample .sample-flow-actions .btn { justify-content:center; }
 .media-sample .vp-faq { padding-inline:var(--sample-space-1); }
 .media-sample .vp-faq summary,.media-sample .vp-answer { font-size:var(--sample-mobile-body); }
 .media-sample .sample-question-contact .vp-actions { display:grid; gap:var(--sample-space-31); }
 .media-sample .sample-question-contact .btn { justify-content:center; }
 .media-sample .sample-footer { padding-block:var(--sample-mobile-section-space) var(--sample-space-1); }
 .media-sample .sample-footer-invite { grid-template-columns:1fr; gap:var(--sample-mobile-gap); }
 .media-sample .sample-footer h2 { font-size:var(--sample-mobile-heading); }
 .media-sample .sample-footer-photo { max-width:none; }
 .media-sample .sample-footer-directory { gap:var(--sample-space-25) var(--sample-space-1); }
 .media-sample .sample-footer .nsf-legal-line { font-size:var(--sample-caption); }
 .sample-mobile-inquiry { display:block; position:fixed; inset:auto 0 0; z-index:50; padding:var(--sample-mobile-inquiry-pad); padding-bottom:max(.65rem,env(safe-area-inset-bottom)); background:var(--cream); border-top:var(--sample-border) solid var(--line); }
 .sample-mobile-inquiry a { display:flex; align-items:center; justify-content:space-between; min-height:48px; border-radius:var(--sample-radius); padding-inline:var(--sample-space-1); background:var(--terracotta-dark); color:var(--cream); font-weight:600; }
 .sample-form-visible .sample-mobile-inquiry,.sample-inquiry-focused .sample-mobile-inquiry,.visitor-menu-open .sample-mobile-inquiry { display:none; }
}
/* ====== Keep the footer mark independent of its source-file dimensions ====== */
.media-sample .sample-footer-brand .brand img { width:44px; height:44px; flex-shrink:0; }

/* ====== Show one adoption action at a time on phones ====== */
@media (max-width:700px) { .sample-inquiry-action-visible .sample-mobile-inquiry { display:none; } }
/* ====== Footer invitation scales to its actual column on tablets ====== */
.media-sample .sample-footer-invite > div { container-type:inline-size; }
.media-sample .sample-footer h2 { max-width:none; font-size:clamp(1.8rem,9cqi,4rem); }

/* ====== Contact options remain easy to tap without awkward inline wrapping ====== */
.sample-contact-links { display:flex; flex-wrap:wrap; gap:var(--sample-space-31); margin-block:var(--sample-space-1); }
.sample-contact-links a { display:inline-flex; align-items:center; min-height:44px; padding:var(--sample-space-15); border:var(--sample-border) solid var(--line); border-radius:var(--sample-radius); background:var(--cream-2); }