@charset "utf-8";

:root {

    --primary: #e5018c;

    --primary-dark: #bf0075;

    --primary-soft: rgba(229, 1, 140, 0.16);

    --white: #ffffff;

    --text: #0f172a;

    --muted: #64748b;

    --dark: #091018;

    --overlay: rgba(8, 12, 18, 0.58);

    --overlay-home: rgba(8, 12, 18, 0.22);

    --line: rgba(255, 255, 255, 0.14);

    --line-soft: rgba(255, 255, 255, 0.08);

    --glass: rgba(10, 19, 38, 0.76);

    --glass-soft: rgba(255, 255, 255, 0.10);

    --panel: rgba(255, 255, 255, 0.92);

    --panel-soft: rgba(255, 255, 255, 0.12);

    --shadow-xl: 0 28px 70px rgba(0, 0, 0, 0.35);

    --shadow-lg: 0 20px 44px rgba(0, 0, 0, 0.24);

    --shadow-sm: 0 14px 26px rgba(0, 0, 0, 0.18);

    --radius-xl: 34px;

    --radius-lg: 28px;

    --radius-md: 22px;

    --radius-sm: 16px;

    --shell: 1180px;

    --font: Inter, "Segoe UI", Arial, Helvetica, sans-serif;

}



* {

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    margin: 0;

    font-family: var(--font);

    color: var(--white);

    line-height: 1.55;

    background: var(--dark);

    overflow-x: hidden;

    position: relative;

}



body::before,

body::after {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

}



body::before {

    z-index: -2;

    background: url('../img/bg.png') center center / cover no-repeat fixed;

    transform: scale(1);

}



body::after {

    z-index: -1;

    background: linear-gradient(180deg, rgba(3, 8, 15, 0.35) 0%, var(--overlay) 100%);

}



body.home-page::after {

    background: linear-gradient(180deg, rgba(3, 8, 15, 0.10) 0%, var(--overlay-home) 100%);

}



body.home-page {

    min-height: 100vh;

}



img {

    display: block;

    max-width: 100%;

    height: auto;

}



a {

    color: inherit;

    text-decoration: none;

}



button,

input,

select,

textarea {

    font: inherit;

}



p {

    margin: 0 0 1rem;

}



strong {

    font-weight: 800;

}



.site-shell {

    width: min(var(--shell), calc(100% - 40px));

    margin: 0 auto;

}



.site-shell.narrow {

    width: min(860px, calc(100% - 40px));

}



.center {

    text-align: center;

}



/* Header */

.site-header {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 100;

    background: rgba(0, 0, 0, 0.22);

    border-bottom: 1px solid rgba(229, 1, 140, 0.18);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    transition: background 0.25s ease, box-shadow 0.25s ease;

}



.site-header.is-scrolled {

    background: rgba(0, 0, 0, 0.45);

    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.22);

}



.header-shell {

    min-height: 80px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 22px;

}



.brand {

    display: inline-flex;

    align-items: center;

    flex-shrink: 0;

}



.brand-header {

    gap: 10px;

}



.brand-paw {

    width: 34px;

    height: 34px;

    display: block;

    flex: 0 0 auto;

}



.brand-paw {

    width: 34px;

    height: 34px;

    display: block;

    flex: 0 0 auto;

    color: var(--primary);

}



.brand-paw img {

    width: 100%;

    height: 100%;

    display: block;

}



.brand-text {

    display: flex;

    flex-direction: column;

    line-height: 1;

}



.brand-text strong {

    color: #ffffff;

    font-size: 1.25rem;

    font-weight: 800;

    letter-spacing: -0.04em;

}



.brand-text small {

    margin-top: 5px;

    color: var(--primary);

    font-size: 0.64rem;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 0.24em;

}



.main-nav {

    display: flex;

    align-items: center;

    gap: 34px;

}



.nav-link,

.mobile-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--white);

    font-size: 0.82rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    transition: color 0.2s ease;

}



.nav-link:hover,

.nav-link.is-active,

.mobile-link:hover,

.mobile-link.is-active {

    color: var(--primary);

}



.nav-paw {

    width: 13px;

    height: 13px;

    display: inline-block;

    flex: 0 0 auto;

    background-color: currentColor;

    mask: url('../icons/paw.svg') center / contain no-repeat;

    -webkit-mask: url('../icons/paw.svg') center / contain no-repeat;

}



.menu-toggle {

    display: none;

    width: 46px;

    height: 46px;

    border: 0;

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.08);

    color: var(--white);

    padding: 11px;

    cursor: pointer;

}



.menu-toggle span {

    display: block;

    width: 100%;

    height: 2px;

    margin: 5px 0;

    border-radius: 999px;

    background: currentColor;

    transition: transform 0.2s ease, opacity 0.2s ease;

}



.menu-toggle.is-open span:nth-child(1) {

    transform: translateY(7px) rotate(45deg);

}



.menu-toggle.is-open span:nth-child(2) {

    opacity: 0;

}



.menu-toggle.is-open span:nth-child(3) {

    transform: translateY(-7px) rotate(-45deg);

}



.mobile-menu {

    display: none;

}



/* Buttons */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 54px;

    padding: 15px 28px;

    border: 1px solid transparent;

    border-radius: 999px;

    font-size: 0.9rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    cursor: pointer;

    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;

}



.btn:hover {

    transform: translateY(-2px);

}



.btn-primary {

    background: var(--primary);

    color: var(--white);

    box-shadow: 0 18px 40px rgba(229, 1, 140, 0.32);

}



.btn-primary:hover {

    background: var(--primary-dark);

    box-shadow: 0 22px 48px rgba(229, 1, 140, 0.35);

}



.btn-light {

    background: rgba(255, 255, 255, 0.95);

    color: var(--text);

    box-shadow: var(--shadow-sm);

}



.btn-large {

    min-height: 62px;

    padding: 19px 36px;

}



.btn.full {

    width: 100%;

    border-radius: 18px;

}



.btn-icon {

    width: 18px;

    height: 18px;

    display: inline-flex;

}



.btn-primary .btn-icon img,

.btn-light .btn-icon img {

    width: 100%;

    height: 100%;

}



.btn-primary .btn-icon img {

    filter: brightness(0) invert(1);

}



/* Titles */

.page-main {

    padding-top: 80px;

}



.page-hero {

    padding: 54px 0 22px;

}



.page-hero h1,

.story-copy h1,

.location-section h2,

.section-head h2,

.contact-panel h2,

.form-card h2,

.map-card h2,

.document-card h1,

.cta-panel h2,

.featured-content h2 {

    margin: 0;

    line-height: 1.05;

    letter-spacing: -0.04em;

}



.page-hero h1 {

    font-size: clamp(2.8rem, 6vw, 4.7rem);

    font-weight: 900;

}



.page-hero p,

.section-head p,

.location-section p,

.cta-panel p {

    color: rgba(255, 255, 255, 0.88);

    font-size: 1.08rem;

}



.title-line {

    display: block;

    width: 96px;

    height: 6px;

    border-radius: 999px;

    margin: 18px auto 22px;

    background: var(--primary);

}



.overline {

    display: inline-flex;

    align-items: center;

    min-height: 32px;

    padding: 6px 16px;

    margin-bottom: 24px;

    border: 1px solid rgba(229, 1, 140, 0.38);

    background: rgba(95, 23, 61, 0.52);

    color: var(--primary);

    border-radius: 999px;

    text-transform: uppercase;

    letter-spacing: 0.18em;

    font-size: 0.82rem;

    font-weight: 900;

}



.overline-soft {

    border-color: rgba(255, 255, 255, 0.25);

    background: rgba(255, 255, 255, 0.06);

    color: var(--white);

}



.section {

    padding: 44px 0;

}



.section-soft {

    background: rgba(255, 255, 255, 0.04);

    border-top: 1px solid var(--line-soft);

    border-bottom: 1px solid var(--line-soft);

}



.section-head {

    max-width: 780px;

    margin: 0 auto 38px;

}



.section-head h2,

.location-section h2,

.cta-panel h2,

.contact-panel h2,

.form-card h2,

.map-card h2 {

    font-size: clamp(2.15rem, 5vw, 3.35rem);

    margin-bottom: 16px;

}



/* Home */

.home-main {

    min-height: 100vh;

}



.hero-home {

    min-height: 100vh;

    display: grid;

    place-items: center;

    padding: 120px 0 70px;

}



.hero-content {

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    animation: fadeIn 0.8s ease both;

}



.hero-logo {

    width: min(520px, 84vw);

    margin-bottom: 18px;

    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5));

}



.hero-content h1 {

    margin: 0 0 34px;

    font-size: clamp(1.9rem, 4vw, 3.3rem);

    font-weight: 300;

    font-style: italic;

    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);

}



/* Cards */

.puppy-grid,

.reviews-grid,

.gallery-grid {

    display: grid;

    gap: 30px;

}



.puppy-grid {

    grid-template-columns: repeat(4, 1fr);

}



.puppy-card,

.animal-card,

.review-card,

.veteran-panel,

.form-card,

.document-card {

    border-radius: var(--radius-md);

    overflow: hidden;

    box-shadow: var(--shadow-xl);

}



.puppy-card {

    background: rgba(255, 255, 255, 0.74);

    border: 1px solid rgba(255, 255, 255, 0.34);

    backdrop-filter: blur(7px);

    -webkit-backdrop-filter: blur(7px);

    transition: transform 0.2s ease;

    color: var(--text);

}



.puppy-card:hover,

.animal-card:hover,

.review-card:hover,

.veteran-panel:hover,

.gallery-item:hover {

    transform: translateY(-5px);

}



.puppy-image {

    aspect-ratio: 4 / 4.1;

    background: rgba(5, 12, 22, 0.8);

    overflow: hidden;

}



.puppy-image img,

.featured-image img,

.animal-card img,

.veteran-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.puppy-body {

    padding: 22px 22px 24px;

}



.puppy-body h2 {

    margin: 0 0 6px;

    font-size: 1.1rem;

    color: #17223b;

}



.breed {

    margin: 0 0 12px;

    color: var(--primary);

    font-size: 0.78rem;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 0.09em;

}



.puppy-body p:last-of-type {

    color: #334155;

    min-height: 74px;

}



.featured-puppy {

    display: grid;

    grid-template-columns: 1.05fr 0.95fr;

    border-radius: 36px;

    overflow: hidden;

    background: rgba(8, 19, 46, 0.74);

    border: 1px solid rgba(255, 255, 255, 0.14);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    box-shadow: var(--shadow-xl);

}



.featured-image {

    min-height: 560px;

    background: rgba(2, 7, 16, 0.92);

}



.featured-content {

    padding: clamp(34px, 5vw, 62px);

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

}



.featured-content h2 {

    color: var(--white);

    font-size: clamp(3rem, 5vw, 4.6rem);

    margin: 18px 0 16px;

}



.featured-content p {

    color: rgba(255, 255, 255, 0.82);

    font-size: 1rem;

    margin-bottom: 28px;

}



.pill {

    display: inline-flex;

    padding: 8px 16px;

    border-radius: 999px;

    background: rgba(229, 1, 140, 0.16);

    border: 1px solid rgba(229, 1, 140, 0.34);

    color: var(--primary);

    font-size: 0.78rem;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 0.17em;

}



.cta-panel {

    padding: clamp(34px, 5vw, 82px);

    text-align: center;

    background: rgba(255, 255, 255, 0.09);

    border: 1px solid rgba(255, 255, 255, 0.16);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border-radius: 36px;

    box-shadow: var(--shadow-lg);

}



.cta-panel p {

    max-width: 760px;

    margin: 0 auto 28px;

}



/* Story / breeding */

.story-grid,

.contact-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 46px;

    align-items: center;

}



.story-section {

    padding-top: 12px;

}



.story-copy h1 {

    font-size: clamp(3rem, 6vw, 5.2rem);

    font-weight: 900;

    margin-bottom: 28px;

}



.story-copy h1 em {

    color: var(--primary);

    font-style: italic;

}



.story-copy p {

    color: rgba(255, 255, 255, 0.92);

    font-size: 1.08rem;

}



.story-visual {

    position: relative;

    min-height: 650px;

}



.story-visual-panel {

    height: 100%;

    min-height: 650px;

    display: grid;

    place-items: center;

    padding: 50px;

    border-radius: 38px;

    background: rgba(8, 19, 46, 0.52);

    border: 1px solid rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    box-shadow: var(--shadow-xl);

}



.story-visual-panel img {

    width: min(80%, 420px);

    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.3));

}



.quote-card {

    position: absolute;

    left: -36px;

    bottom: 34px;

    max-width: 320px;

    padding: 26px 28px;

    border-radius: 26px;

    background: rgba(255, 255, 255, 0.92);

    color: #1f2f4f;

    box-shadow: var(--shadow-lg);

}



.quote-card p {

    margin: 0;

    font-size: 1rem;

    font-style: italic;

    font-weight: 800;

}



.quote-star {

    display: inline-block;

    margin-bottom: 12px;

    color: var(--primary);

    font-size: 2rem;

    line-height: 1;

}



.location-section {

    text-align: center;

    padding-top: 20px;

}



.location-section .narrow p {

    margin-left: auto;

    margin-right: auto;

    max-width: 980px;

}



.gallery-grid {

    grid-template-columns: repeat(4, 1fr);

}



.gallery-item {

    aspect-ratio: 1 / 1;

    border-radius: 22px;

    background: rgba(18, 30, 54, 0.48);

    border: 1px solid rgba(255, 255, 255, 0.14);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    display: grid;

    place-items: center;

    box-shadow: var(--shadow-lg);

    transition: transform 0.2s ease;

}



.gallery-icon {

    width: 58px;

    height: 58px;

    opacity: 0.72;

}



.gallery-icon img {

    width: 100%;

    height: 100%;

    filter: brightness(0) invert(1) opacity(0.7);

}



.animal-grid {

    display: grid;

    gap: 26px;

}



.animal-grid.three {

    grid-template-columns: repeat(3, 1fr);

}



.animal-grid.two {

    grid-template-columns: repeat(2, 1fr);

    gap: 30px;

}



.animal-card {

    background: rgba(255, 255, 255, 0.10);

    border: 1px solid rgba(255, 255, 255, 0.14);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    transition: transform 0.2s ease;

}



.animal-card img {

    aspect-ratio: 3 / 4;

}



.animal-card div {

    padding: 22px 22px 24px;

}



.animal-card span {

    color: var(--primary);

    font-size: 0.76rem;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 0.14em;

}



.animal-card h3 {

    margin: 8px 0 4px;

    font-size: 1.75rem;

}



.animal-card p {

    margin: 0;

    color: rgba(255, 255, 255, 0.82);

}



.veteran-panel {

    display: flex;

    gap: 28px;

    align-items: center;

    padding: 26px;

    background: rgba(255, 255, 255, 0.10);

    border: 1px solid rgba(255, 255, 255, 0.14);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    transition: transform 0.2s ease;

}



.veteran-image {

    width: 180px;

    aspect-ratio: 1 / 1;

    border-radius: 26px;

    overflow: hidden;

    flex: 0 0 auto;

}



.veteran-head {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;

    margin-bottom: 8px;

}



.veteran-head h3 {

    margin: 0;

    font-size: 2rem;

}



.veteran-head span {

    display: inline-flex;

    padding: 6px 12px;

    border-radius: 999px;

    background: rgba(229, 1, 140, 0.16);

    color: var(--primary);

    font-size: 0.76rem;

    font-weight: 900;

    letter-spacing: 0.14em;

    text-transform: uppercase;

}



.veteran-content p {

    margin: 0;

    color: rgba(255, 255, 255, 0.84);

    font-style: italic;

}



.reviews-grid {

    grid-template-columns: repeat(4, 1fr);

}



.review-card {

    padding: 24px 24px 22px;

    background: rgba(255, 255, 255, 0.10);

    border: 1px solid rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    transition: transform 0.2s ease;

}



.stars {

    color: var(--primary);

    letter-spacing: 0.15em;

    margin-bottom: 12px;

}



.review-card p {

    color: rgba(255, 255, 255, 0.86);

    font-style: italic;

}



.review-card strong,

.review-card span {

    display: block;

}



.review-card strong {

    font-size: 0.96rem;

}



.review-card span {

    color: rgba(255, 255, 255, 0.6);

    font-size: 0.88rem;

}



/* Contatti */

.contact-grid {

    align-items: start;

}



.contact-panel {

    padding: 34px;

    border-radius: 32px;

    background: rgba(255, 255, 255, 0.10);

    border: 1px solid rgba(255, 255, 255, 0.16);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    box-shadow: var(--shadow-lg);

}



.contact-list {

    display: grid;

    gap: 18px;

    margin-top: 24px;

}



.contact-row {

    display: grid;

    grid-template-columns: 50px 1fr;

    gap: 14px;

    align-items: start;

}



.contact-icon {

    width: 50px;

    height: 50px;

    border-radius: 16px;

    background: rgba(0, 0, 0, 0.24);

    border: 1px solid rgba(255, 255, 255, 0.12);

    display: grid;

    place-items: center;

    padding: 12px;

}



.contact-icon img {

    width: 100%;

    height: 100%;

    filter: brightness(0) invert(1);

}



.contact-row strong,

.contact-row a,

.contact-row span,

.contact-row small {

    display: block;

}



.contact-row strong {

    color: var(--primary);

    font-size: 0.76rem;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 0.14em;

    margin-bottom: 4px;

}



.contact-row a,

.contact-row span {

    font-size: 1rem;

    font-weight: 700;

}



.contact-row small {

    color: rgba(255, 255, 255, 0.74);

}



.form-card {

    padding: 34px;

    background: rgba(255, 255, 255, 0.94);

    color: var(--text);

}



.form-card h2 {

    color: #0f1830;

    margin-bottom: 22px;

}



.contact-form {

    display: grid;

    gap: 18px;

}



.form-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;

}



.field label {

    display: block;

    margin: 0 0 8px 2px;

    color: #334155;

    font-size: 0.92rem;

    font-weight: 800;

}



input,

select,

textarea {

    width: 100%;

    background: #eef2f6;

    color: var(--text);

    border: 1px solid transparent;

    border-radius: 16px;

    outline: none;

    padding: 15px 16px;

    transition: border 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;

}



textarea {

    resize: vertical;

}



input:focus,

select:focus,

textarea:focus {

    background: var(--white);

    border-color: var(--primary);

    box-shadow: 0 0 0 4px rgba(229, 1, 140, 0.12);

}



.honeypot {

    position: absolute;

    left: -9999px;

    width: 1px;

    height: 1px;

    overflow: hidden;

}



.checkbox-line {

    display: grid;

    grid-template-columns: 18px 1fr;

    gap: 10px;

    align-items: start;

    color: #334155;

    font-size: 0.95rem;

}



.checkbox-line input {

    width: 18px;

    height: 18px;

    margin-top: 4px;

    accent-color: var(--primary);

}



.checkbox-line a,

.document-card a {

    color: var(--primary);

    text-decoration: underline;

    text-underline-offset: 3px;

    font-weight: 800;

}



.form-message {

    padding: 14px 16px;

    border-radius: 14px;

    margin-bottom: 18px;

    font-weight: 700;

}



.form-message.success {

    background: #dcfce7;

    color: #166534;

}



.form-message.error {

    background: #fee2e2;

    color: #991b1b;

}



.map-card {

    padding: 34px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-radius: 30px;

    background: rgba(255, 255, 255, 0.12);

    border: 1px solid rgba(255, 255, 255, 0.15);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    box-shadow: var(--shadow-lg);

}



.map-card p {

    margin: 0;

    color: rgba(255, 255, 255, 0.84);

    max-width: 700px;

}



/* Document pages */

.document-wrap {

    padding: 56px 0 90px;

}



.document-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 18px;

}



.document-card {

    padding: clamp(28px, 4vw, 56px);

    background: rgba(255, 255, 255, 0.95);

    color: var(--text);

}



.document-card h1 {

    font-size: clamp(2.3rem, 5vw, 4.1rem);

    margin-bottom: 14px;

}



.document-card h2 {

    margin: 30px 0 10px;

    font-size: 1.35rem;

}



.doc-note {

    padding: 14px 16px;

    border-radius: 14px;

    background: rgba(229, 1, 140, 0.12);

    color: #7b174e;

    font-weight: 700;

}



/* Footer */

.site-footer {

    padding: 36px 0 24px;

}



.footer-shell {

    display: grid;

    grid-template-columns: 1fr auto auto;

    align-items: center;

    gap: 20px;

}



.footer-logo {

    width: 210px;

}



.footer-links {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 24px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 0.95rem;

}



.footer-links a:hover,

.footer-social a:hover {

    color: var(--primary);

}



.footer-social {

    display: flex;

    justify-content: flex-end;

    gap: 12px;

}



.footer-social a {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, 0.16);

    display: grid;

    place-items: center;

    font-weight: 800;

    color: rgba(255, 255, 255, 0.84);

    transition: color 0.2s ease, border-color 0.2s ease;

}



.footer-social a:hover {

    border-color: rgba(229, 1, 140, 0.4);

}



.footer-bottom {

    padding-top: 24px;

    margin-top: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

    text-align: center;

}



.footer-bottom p {

    margin: 0;

    color: rgba(255, 255, 255, 0.82);

}



/* Utilities */

.notice-static {

    position: fixed;

    left: 50%;

    bottom: 20px;

    z-index: 300;

    transform: translate(-50%, 20px);

    opacity: 0;

    pointer-events: none;

    background: #0f172a;

    color: var(--white);

    padding: 12px 16px;

    border-radius: 999px;

    box-shadow: var(--shadow-sm);

    transition: opacity 0.2s ease, transform 0.2s ease;

}



.notice-static.is-visible {

    opacity: 1;

    transform: translate(-50%, 0);

}



.reveal {

    opacity: 0;

    transform: translateY(20px);

    transition: opacity 0.55s ease, transform 0.55s ease;

}



.reveal.is-visible {

    opacity: 1;

    transform: none;

}



@keyframes fadeIn {

    from { opacity: 0; transform: translateY(18px); }

    to { opacity: 1; transform: translateY(0); }

}



/* Responsive */

@media (max-width: 1100px) {

    .main-nav {

        display: none;

    }



    .menu-toggle {

        display: block;

    }



    .mobile-menu {

        position: absolute;

        top: 80px;

        left: 0;

        right: 0;

        display: none;

        flex-direction: column;

        align-items: center;

        gap: 22px;

        padding: 26px 18px 30px;

        background: rgba(255, 255, 255, 0.96);

        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);

    }



    .mobile-menu.is-open {

        display: flex;

    }



    .mobile-link {

        color: var(--text);

        font-size: 1rem;

    }



    .puppy-grid,

    .gallery-grid,

    .reviews-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .story-grid,

    .featured-puppy,

    .contact-grid {

        grid-template-columns: 1fr;

    }



    .story-copy {

        text-align: center;

    }



    .story-visual {

        min-height: 560px;

    }



    .quote-card {

        left: 24px;

    }



    .animal-grid.three {

        grid-template-columns: repeat(2, 1fr);

    }



    .reviews-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .footer-shell {

        grid-template-columns: 1fr;

        justify-items: center;

        text-align: center;

    }



    .footer-social {

        justify-content: center;

    }

}



@media (max-width: 740px) {

    .site-shell,

    .site-shell.narrow {

        width: min(100% - 24px, var(--shell));

    }



    .header-shell {

        min-height: 72px;

    }



	.footer-logo {

		width: 180px;

	}

	

	.brand-paw {

		width: 30px;

		height: 30px;

	}

	

	.brand-text strong {

		font-size: 1.05rem;

	}

	

	.brand-text small {

		font-size: 0.54rem;

		letter-spacing: 0.18em;

	}



    .mobile-menu {

        top: 72px;

    }



    .page-main {

        padding-top: 72px;

    }



    .page-hero {

        padding: 44px 0 16px;

    }



    .section {

        padding: 34px 0;

    }



    .hero-home {

        padding: 104px 0 48px;

    }



    .hero-content h1 {

        font-size: 1.7rem;

        margin-bottom: 26px;

    }



    .btn,

    .btn-large {

        min-height: 54px;

        padding: 15px 22px;

        font-size: 0.84rem;

    }



    .puppy-grid,

    .gallery-grid,

    .animal-grid.three,

    .animal-grid.two,

    .reviews-grid,

    .form-grid {

        grid-template-columns: 1fr;

    }



    .featured-image {

        min-height: 320px;

    }



    .story-visual,

    .story-visual-panel {

        min-height: 400px;

    }



    .quote-card {

        position: static;

        margin-top: 18px;

        max-width: none;

    }



    .veteran-panel {

        flex-direction: column;

        text-align: center;

    }



    .veteran-head {

        justify-content: center;

    }



    .contact-panel,

    .form-card,

    .map-card,

    .document-card,

    .cta-panel,

    .featured-content {

        padding: 24px;

    }



    .map-card {

        flex-direction: column;

        align-items: flex-start;

    }



    .footer-links {

        gap: 14px;

        flex-direction: column;

    }

}


/* Integrazioni contenuti e privacy: layout originale conservato. */
.mother-info { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.mother-info img { width:32px; height:32px; object-fit:cover; border-radius:50%; }
.mother-info a { text-decoration:underline; }
[id^="cane-"] { scroll-margin-top:120px; }
.map-embed-card { display:block; }
.kendra-map { width:100%; min-height:360px; margin-top:24px; border-radius:18px; overflow:hidden; }
.kendra-map iframe { display:block; width:100%; height:400px; border:0; }
.policy-embedded .page-main { padding-top:24px; }
.policy-embedded .document-wrap { padding:0; }
.policy-embedded .document-actions { display:none; }
.policy-embedded .site-shell { width:100%; padding:12px; }
@media (max-width:600px) { .kendra-map iframe { height:320px; } }

/* Schede riproduttori */
.animal-grid {
    align-items: start;
}

.animal-card .animal-summary {
    display: block;
    list-style: none;
    cursor: pointer;
}

.animal-card .animal-summary::-webkit-details-marker {
    display: none;
}

.animal-card .animal-summary > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.animal-card .animal-summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -3px;
}

.animal-card .animal-toggle {
    display: block;
    margin-top: 14px;
}

.animal-card .animal-toggle span {
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
}

.animal-card .animal-close-label {
    display: none;
}

.animal-card[open] .animal-open-label {
    display: none;
}

.animal-card[open] .animal-close-label {
    display: inline;
}

.animal-card .animal-details {
    padding: 0 22px 24px;
}

.animal-card .animal-details p + p {
    margin-top: 12px;
}