.about-adopted { background: var(--white); }
.about-detail-hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--header-height) + 55px) 0 90px; }
.about-detail-hero::after { content: ""; position: absolute; z-index: -1; inset: 18% -13% -20% 48%; background: #fff1f5; border-radius: 50% 38% 0 0; transform: rotate(-12deg); }
.about-detail-hero-inner { width: min(1220px, calc(100% - 64px)); margin: auto; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.about-detail-hero h1 { margin: 16px 0 28px; font-size: clamp(42px, 4.4vw, 64px); font-weight: 900; line-height: 1.48; letter-spacing: -.055em; }
.about-detail-headline-line { display: block; }
.about-detail-headline-em { position: relative; width: fit-content; }
.about-detail-headline-em::after { content: ""; position: absolute; z-index: -1; left: -3%; right: -4%; bottom: .12em; height: .24em; border-radius: 50%; background: #ffd9e5; transform: rotate(-2deg); }
.about-detail-promise { margin: 0 0 17px; font-size: clamp(19px, 1.8vw, 25px); font-weight: 800; line-height: 1.7; }
.about-detail-promise span { display: inline-block; }
.about-detail-intro { max-width: 35em; margin: 0; font-size: 17px; line-height: 2; }
.about-detail-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.about-detail-actions .button { min-width: 164px; }
.about-detail-mascot { position: relative; flex: 0 0 auto; display: block; border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; touch-action: manipulation; transform-origin: 50% 80%; }
.about-detail-mascot img { display: block; width: 100%; height: auto; pointer-events: none; }
.about-detail-mascot:focus-visible { outline: 2px dashed var(--pink); outline-offset: 7px; border-radius: 30%; }
.about-detail-hero-art { width: 100%; max-width: 490px; justify-self: center; }
.about-detail-hero-art::before { content: ""; position: absolute; z-index: -1; inset: 15% 2% 8%; border: 2px solid #ebc8d5; border-radius: 44% 56% 49% 51%; transform: rotate(12deg); }
.about-detail-section { padding: 96px 0; position: relative; overflow: hidden; }
.about-detail-section-inner { width: min(1100px, calc(100% - 64px)); margin: auto; }
.about-detail-section-heading { display: flex; gap: 30px; align-items: center; justify-content: space-between; margin-bottom: 38px; }
.about-detail-section-heading h2 { position: relative; isolation: isolate; margin: 6px 0 8px; font-size: clamp(30px, 3.5vw, 46px); font-weight: 900; line-height: 1.5; letter-spacing: -.025em; }
.about-detail-section-heading h2::after { content: ""; position: absolute; z-index: -1; left: 6%; bottom: -.07em; width: 68%; height: .15em; background: #f6cada; border-radius: 50%; transform: rotate(-2deg); }
.about-detail-section-heading .about-detail-mascot { width: clamp(100px, 12vw, 155px); }
.about-detail-story { background: #f3f8fc; }
.about-detail-story::before { content: ""; position: absolute; right: -45px; top: 30px; width: 135px; height: 100px; border: 3px solid #e1ecf4; border-radius: 18px; transform: rotate(18deg); }
.about-detail-story-list { display: grid; gap: 0; }
.about-detail-story-list article { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr); gap: 45px; padding: 30px 0; border-bottom: 1px solid #d9e5ed; }
.about-detail-story-list article:first-child { padding-top: 0; }
.about-detail-story-list article:last-child { border-bottom: 0; padding-bottom: 0; }
.about-detail-story-list h3 { margin: 0; font-size: 23px; line-height: 1.75; font-weight: 800; }
.about-detail-story-list p { margin: 0; font-size: 17px; line-height: 2; }
.about-detail-values { background: #fff6f9; }
.about-detail-values-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.about-detail-value { padding: 25px 5px 0; border-top: 2px solid #efc7d5; }
.about-detail-value-number { display: block; color: #c45d82; font-family: Georgia, serif; font-style: italic; font-size: 40px; line-height: 1; margin-bottom: 19px; }
.about-detail-value h3 { margin: 0 0 16px; font-size: 22px; line-height: 1.75; font-weight: 800; }
.about-detail-value p { margin: 0; font-size: 16px; line-height: 2; }
.about-detail-menu-grid { display: grid; grid-template-columns: 1fr; gap: 44px; }
.about-detail-menu-item { padding: 26px 0 0; border-top: 2px solid #cbdce9; }
.about-detail-menu-item h3 { margin: 0 0 18px; font-size: 28px; font-weight: 800; }
.about-detail-menu-item p { margin: 0; font-size: 17px; line-height: 2; }
.about-detail-contact { background: #fff1f6; }
.about-detail-contact::before { content: ""; position: absolute; left: -45px; bottom: -80px; width: 220px; height: 220px; border: 2px solid #f2d8e2; border-radius: 50%; }
.about-detail-contact-inner { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 50px; align-items: center; }
.about-detail-contact h2 { margin: 10px 0 24px; font-size: clamp(30px, 3.2vw, 44px); font-weight: 900; line-height: 1.65; letter-spacing: -.035em; }
.about-detail-contact h2 span { display: block; }
.about-detail-contact p:not(.eyebrow) { font-size: 17px; line-height: 2; }
.about-detail-contact-art { width: min(100%, 300px); justify-self: center; }
@media (prefers-reduced-motion: no-preference) {
  .about-detail-reveal { opacity: 0; transform: translateY(22px); transition: opacity 600ms ease, transform 600ms cubic-bezier(.22,1,.36,1); }
  .about-detail-reveal.is-shown { opacity: 1; transform: none; }
  .about-detail-mascot.is-greeting { animation: aboutDetailGreeting 650ms ease-in-out; }
  @keyframes aboutDetailGreeting { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-5deg) scale(1.035); } 55% { transform: rotate(4deg) scale(.99); } 78% { transform: rotate(-2deg) scale(1.01); } }
}
@media (max-width: 900px) {
  .about-detail-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .about-detail-hero h1 { font-size: clamp(36px, 6.3vw, 54px); }
  .about-detail-hero-art { width: min(75%, 370px); }
  .about-detail-hero::after { inset: 44% -35% -10% 12%; }
  .about-detail-story-list article { grid-template-columns: 1fr; gap: 14px; }
  .about-detail-values-grid { grid-template-columns: 1fr; gap: 30px; }
  .about-detail-value { display: grid; grid-template-columns: 45px minmax(0, 1fr); gap: 0 16px; }
  .about-detail-value-number { grid-row: span 2; }
  .about-detail-contact-inner { gap: 24px; }
}
@media (max-width: 600px) {
  .about-detail-hero { padding: calc(var(--header-height) + 30px) 0 48px; }
  .about-detail-hero-inner, .about-detail-section-inner { width: calc(100% - 40px); }
  .about-detail-hero h1 { font-size: clamp(28px, 8.4vw, 42px); line-height: 1.6; margin-bottom: 22px; }
  .about-detail-promise { font-size: 18px; }
  .about-detail-intro { font-size: 15px; }
  .about-detail-hero-art { width: min(94%, 330px); }
  .about-detail-actions { gap: 12px; margin-top: 24px; }
  .about-detail-actions .button { min-width: 0; padding: 12px 16px; font-size: 14px; }
  .about-detail-section { padding: 58px 0; }
  .about-detail-section-heading { gap: 12px; margin-bottom: 26px; }
  .about-detail-section-heading h2 { font-size: clamp(25px, 7.3vw, 31px); }
  .about-detail-section-heading .about-detail-mascot { width: clamp(68px, 20vw, 88px); }
  .about-detail-story-list h3 { font-size: 20px; }
  .about-detail-story-list p, .about-detail-menu-item p { font-size: 15px; }
  .about-detail-value h3 { font-size: 19px; margin-bottom: 10px; }
  .about-detail-value p { font-size: 15px; }
  .about-detail-menu-grid { grid-template-columns: 1fr; gap: 30px; }
  .about-detail-menu-item h3 { font-size: 24px; }
  .about-detail-contact-inner { grid-template-columns: 1fr; }
  .about-detail-contact h2 { font-size: clamp(25px, 7vw, 32px); }
  .about-detail-contact p:not(.eyebrow) { font-size: 15px; }
  .about-detail-contact-art { width: 190px; }
}
