/* About and Contact: shared store typography, colours and components. */
.mp-brand-page { padding-bottom: 64px; }
.mp-brand-page h1,.mp-brand-page h2,.mp-brand-page h3 { text-wrap: balance; }
.mp-brand-page p { text-wrap: pretty; }
.mp-brand-eyebrow { display: block; font: 600 14px/20px var(--mp-font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--mp-teal-dark); margin-bottom: 16px; }
.mp-brand-hero { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--mp-r-xl); background: var(--mp-grad-hero); margin-bottom: 64px; min-height: 320px; box-shadow: var(--mp-shadow-sm); }
.mp-brand-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(60,88,98,.5), transparent 60%); }
.mp-brand-hero__copy { position: relative; z-index: 2; padding: 40px 48px; max-width: 58%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.mp-brand-hero .mp-brand-eyebrow { color: #fff; letter-spacing: .16em; }
.mp-brand-hero h1 { color: #fff; font-size: 48px; line-height: 48px; font-weight: 700; letter-spacing: -.025em; margin-bottom: 16px; max-width: 680px; text-shadow: 0 2px 20px rgba(30,50,60,.25); }
.mp-brand-hero__copy > p { font-size: 16px; line-height: 24px; max-width: 520px; color: rgba(255,255,255,.95); margin-bottom: 24px; }
.mp-brand-hero__image { position: absolute; inset: 0 0 0 auto; z-index: 0; width: 64%; height: 100%; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.6) 20%, #000 45%); mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.6) 20%, #000 45%); }
.mp-brand-hero__image img { height: 100%; width: 100%; object-fit: cover; object-position: 38% 26%; }
.mp-brand-note { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; line-height: 20px; color: rgba(255,255,255,.9); margin-top: 24px; }
.mp-brand-note .mp-icon { color: #fff; flex: none; }
.mp-brand-story { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; padding: 48px; border: 1px solid var(--mp-line); border-radius: 24px; background: #fff; margin-bottom: 64px; }
.mp-brand-page h2 { font-size: 36px; line-height: 40px; font-weight: 600; }
.mp-brand-story p { font-size: 18px; line-height: 28px; color: var(--mp-muted); }
.mp-brand-story p:last-child { margin: 0; }
.mp-brand-section-head { max-width: 680px; margin-bottom: 32px; }
.mp-brand-section-head p { color: var(--mp-muted); margin-bottom: 0; }
.mp-brand-pets,.mp-brand-values { margin-bottom: 64px; }
.mp-brand-pet-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.mp-brand-pet,.mp-brand-value { padding: 24px; border: 1px solid var(--mp-line); border-radius: 16px; background: #fff; }
.mp-brand-icon { display: inline-grid; place-items: center; background: var(--mp-teal-50); border-radius: 12px; width: 48px; height: 48px; color: var(--mp-teal-dark); margin-bottom: 24px; }
.mp-brand-page h3 { font-size: 20px; line-height: 28px; font-weight: 600; }
.mp-brand-pet__breed { display: block; font-size: 14px; color: var(--mp-teal-dark); margin: 0 0 12px; }
.mp-brand-pet p,.mp-brand-value p { color: var(--mp-muted); margin: 0; }
.mp-brand-value-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.mp-brand-cta { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 48px; border-radius: 24px; background: var(--mp-teal-100); }
.mp-brand-cta p { color: var(--mp-muted); margin: 16px 0 0; }
.mp-brand-cta__actions { display: flex; flex-direction: column; align-items: center; gap: 16px; flex: none; }
.mp-brand-text-link { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.mp-brand-text-link:focus-visible,.mp-brand-page .mp-btn:focus-visible { outline: 2px solid var(--mp-teal-dark); outline-offset: 4px; }
.mp-brand-hero--contact { margin-bottom: 32px; }
.mp-brand-hero--contact .mp-brand-hero__image img { object-position: center; }
.mp-brand-help { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-bottom: 32px; }
.mp-brand-help a { display: flex; align-items: center; gap: 16px; padding: 24px; background: #fff; border: 1px solid var(--mp-line); border-radius: 16px; color: var(--mp-ink); }
.mp-brand-help .mp-brand-icon { margin: 0; flex: none; }
.mp-brand-help strong { display: block; font-family: var(--mp-font-head); }
.mp-brand-help small { display: block; color: var(--mp-muted); font-size: 14px; }
.mp-brand-help a:hover { border-color: var(--mp-teal); }
.mp-brand-page .mp-contact__grid { margin: 0; gap: 24px; }
.mp-brand-page .mp-card { border-radius: 24px; }
.mp-brand-page .mp-contact-row__line { overflow-wrap: anywhere; }
.mp-brand-page .mp-input-icon .mp-input { padding-left: 48px; }
.mp-brand-page .mp-contact-row { border-bottom: 0; }
.mp-brand-page .mp-contact-row__icon { box-shadow: none; background: var(--mp-teal-50); border: 0; width: 48px; height: 48px; border-radius: 12px; }
@media(max-width:1100px) { .mp-brand-hero__copy { padding: 32px; max-width: 64%; } .mp-brand-story { gap: 32px; padding: 32px; } .mp-brand-pet-list { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .mp-brand-hero { margin-bottom: 32px; } .mp-brand-hero h1 { font-size: 36px; line-height: 40px; } .mp-brand-hero__copy { padding: 32px 24px; max-width: 100%; } .mp-brand-hero__image { width: 100%; -webkit-mask-image: none; mask-image: none; } .mp-brand-hero::after { background: linear-gradient(90deg, rgba(38,64,74,.95), rgba(38,64,74,.75)); } .mp-brand-story { grid-template-columns: 1fr; gap: 24px; padding: 24px; margin-bottom: 32px; } .mp-brand-story p { font-size: 16px; line-height: 24px; } .mp-brand-page h2 { font-size: 30px; line-height: 36px; } .mp-brand-value-grid,.mp-brand-help { grid-template-columns: 1fr; gap: 16px; } .mp-brand-pets,.mp-brand-values { margin-bottom: 32px; } .mp-brand-cta { flex-direction: column; align-items: flex-start; padding: 32px 24px; } .mp-brand-cta__actions { align-items: flex-start; } .mp-brand-page .mp-contact__grid { grid-template-columns: 1fr; } }
@media(max-width:440px) { .mp-brand-pet-list { grid-template-columns: 1fr; } }