/* The services pin only within this pair; the story scrolls over them naturally. */
.story-stack { position: relative; isolation: isolate; }
.story-stack.is-stacking .services { position: sticky; top: var(--services-pin-top, 0px); z-index: 0; }
.story { position: relative; z-index: 1; border-radius: clamp(36px, 5vw, 80px) clamp(36px, 5vw, 80px) 0 0; background: #3b261c; color: #fcf8f6; padding: clamp(80px, 8vw, 128px) 7%; box-shadow: 0 -24px 64px #37221816; }
.story__inner, .faq__inner, .contact__inner { max-width: 1320px; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 112px); align-items: center; }
.section-eyebrow { margin: 0 0 28px; font-size: .8125rem; font-weight: 500; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; }
.story .section-eyebrow { color: #e7c48e; }
.story h2, .faq h2, .contact h2 { margin: 0; font-family: 'Dani Editorial', Georgia, serif; font-size: clamp(2.75rem, 4.15vw, 4.6rem); font-weight: 400; line-height: 1.08; letter-spacing: -.025em; }
.section-accent { font-style: italic; }
.story .section-accent { color: #e7c48e; }
.story__portrait { margin: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.story__photo-frame { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 140px 140px 28px 28px; background: #5a3d29; }
.story__photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 73% center; }
.story__portrait figcaption { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 16px; text-align: center; color: #d8bda8; font-size: .8125rem; line-height: 1.5; }
.story__portrait figcaption > span:first-child { color: #fcf8f6; }
.story__text { margin-top: 32px; color: #e3d4c8; font-size: 1rem; line-height: 1.85; }
.story__text p { margin: 0 0 18px; }
.story__text .story__draft-note { color: #c6ad9b; font-size: .75rem; line-height: 1.6; margin-top: 26px; max-width: 30rem; }
.story__link { --dani-cta-hover: #e7c48e; --dani-cta-hover-color: #3b261c; margin-top: 20px; min-height: 48px; padding: .8rem 1.6rem; border: 1px solid #e7c48e80; border-radius: 100px; font-size: .9375rem; color: #fcf8f6; background: transparent; }
.faq { position: relative; background: #fcf8f6; padding: clamp(80px, 9vw, 144px) 7%; }
.faq__inner { align-items: center; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); grid-template-areas: "scene list"; gap: clamp(32px, 5vw, 80px); }
.faq__scene { grid-area: scene; position: relative; isolation: isolate; width: 100%; max-width: 520px; aspect-ratio: 520 / 620; min-width: 0; margin-inline: auto; }
.faq .faq__orbit { position: absolute; inset: 0; z-index: 2; pointer-events: none; transform: translate3d(var(--faq-shift-x, 0px), var(--faq-shift-y, 0px), 0) rotate(var(--faq-tilt, 0deg)); transition: transform 700ms var(--dani-ease); }
.faq__orbit svg { display: block; width: 100%; height: 100%; overflow: visible; }
.faq__orbit text { font-family: 'Dani Editorial', Georgia, serif; font-size: 46px; font-weight: 400; letter-spacing: -.015em; fill: #3b261c; }
.faq__orbit-line { transform-origin: 260px 310px; animation: faq-orbit-top 9s ease-in-out infinite; animation-play-state: paused; }
.faq__orbit-line--bottom { animation-name: faq-orbit-bottom; animation-duration: 11s; }
.faq__orbit-line--bottom text { font-style: italic; fill: #8c5d31; }
.faq__scene.is-active .faq__orbit-line { animation-play-state: running; }
.faq__mascot { position: absolute; inset: 20% 3% 16%; display: grid; place-items: center; width: 94%; height: 64%; min-width: 0; padding: 0; margin: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.faq__mascot:disabled { cursor: default; }
.faq__mascot img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; pointer-events: none; }
.faq__mascot:focus-visible { outline: 2px solid #8c5d31; outline-offset: 4px; border-radius: 50%; }
.faq__motion-toggle { position: absolute; z-index: 3; right: 1%; bottom: 12%; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #8c5d3150; border-radius: 50%; background: transparent; color: #755b49; cursor: pointer; transition: background 200ms ease; }
.faq__motion-toggle[hidden] { display: none; }
.faq__motion-toggle:hover { background: #f0e3d3; }
.faq__motion-toggle:focus-visible { outline: 2px solid #8c5d31; outline-offset: 4px; }
.faq__play-icon { display: none; }
.faq__motion-toggle[aria-pressed="true"] .faq__play-icon { display: block; }
.faq__motion-toggle[aria-pressed="true"] .faq__pause-icon { display: none; }
@keyframes faq-orbit-top { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes faq-orbit-bottom { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-4deg); } }
.faq .section-eyebrow, .contact .section-eyebrow { color: #755b49; }
.faq .section-accent, .contact .section-accent { color: #8c5d31; }
.faq__list { grid-area: list; min-width: 0; align-self: center; border-top: 1px solid #d9c6b2; }
.faq__item { border-bottom: 1px solid #d9c6b2; }
.faq__item summary { cursor: pointer; min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 24px 4px; font-size: 1rem; font-weight: 500; line-height: 1.5; list-style: none; transition: color 200ms ease; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon { flex-shrink: 0; width: 32px; height: 32px; border: 1px solid #d9c6b2; border-radius: 50%; position: relative; }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; width: 10px; height: 1px; top: 15px; left: 10px; background: #8c5d31; transition: transform 250ms var(--dani-ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0); }
.faq__item[open] summary { color: #8c5d31; }
.faq__answer { padding: 0 60px 26px 4px; color: #755b49; font-size: .9375rem; line-height: 1.8; }
.faq__answer p { margin: 0; }
.faq__item[open] .faq__answer { animation: faq-in 300ms var(--dani-ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.contact { position: relative; overflow: clip; background: #f0e3d3; padding: clamp(64px, 7vw, 112px) 7%; border-radius: clamp(36px, 5vw, 80px) clamp(36px, 5vw, 80px) 0 0; }
.contact__inner { grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 4vw, 64px); }
.contact h2 { font-size: clamp(2.75rem, 4.4vw, 4.9rem); }
.contact__description { color: #755b49; font-size: 1rem; line-height: 1.8; max-width: 30rem; margin: 32px 0; }
.button--contact { --dani-cta-hover: #8c5d31; --dani-cta-hover-color: #fcf8f6; min-height: 58px; gap: 24px; padding: 1rem 1.7rem; background: #3b261c; color: #fcf8f6; font-size: 1rem; transition: background-color 300ms var(--dani-ease), transform 300ms var(--dani-ease); }
.button--contact:active { transform: scale(.97); }
.contact__actions p { color: #755b49; font-size: .8125rem; margin: 16px 0 0; }
.contact__visual { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 20px 0; }
.contact__orbit { position: absolute; border: 1px solid #b78c5c33; border-radius: 50%; pointer-events: none; }
.contact__orbit--outer { width: 560px; height: 560px; top: 12px; }
.contact__orbit--inner { width: 440px; height: 440px; top: 72px; }
.phone { position: relative; width: 288px; padding: 7px; border: 2px solid #ae8966; border-radius: 44px; background: #3b261c; transform: rotate(7deg); box-shadow: 14px 24px 0 -10px #5b392214, 22px 38px 60px -18px #3b261c36, inset 0 0 0 1px #e7c48e66; }
.phone { transition: transform 400ms var(--dani-ease); }
.phone:focus-within { transform: rotate(0); }
.phone::before { content: ''; position: absolute; width: 3px; height: 42px; border-radius: 2px; right: -4px; top: 120px; background: #ae8966; }
.phone::after { content: ''; position: absolute; width: 3px; height: 64px; border-radius: 2px; left: -4px; top: 100px; background: #ae8966; }
.phone__screen { overflow: hidden; border-radius: 34px; background: #faf6f1; }
.phone__status { height: 45px; display: flex; justify-content: space-between; align-items: center; padding: 0 22px; position: relative; color: #3b261c; font-size: 11px; font-weight: 600; }
.phone__island { position: absolute; width: 86px; height: 22px; top: 9px; left: calc(50% - 43px); background: #251a14; border-radius: 20px; }
.phone__battery { width: 18px; height: 9px; border: 1px solid #3b261c; border-radius: 3px; box-shadow: inset 0 0 0 1px #faf6f1; background: #3b261c; }
.phone__header { display: flex; align-items: center; gap: 8px; padding: 6px 12px 14px; border-bottom: 1px solid #e7dacb; }
.phone__header img { width: 36px; height: 36px; padding: 3px; border-radius: 50%; background: #f0e3d3; }
.phone__header strong { display: block; font-size: 12px; font-weight: 600; }
.phone__header div > span { display: block; margin-top: 4px; font-size: 9px; color: #755b49; }
.phone__conversation { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-height: 386px; padding: 16px 16px 22px; margin-bottom: 16px; background: #f2e9de; }
.phone__preview { align-self: center; font-size: 10px; letter-spacing: .04em; color: #755b49; }
.phone__studio-card { width: 100%; background: #fcf8f6; border-radius: 16px; overflow: hidden; }
.phone__studio-card img { display: block; width: 100%; height: 104px; object-fit: cover; object-position: center 35%; }
.phone__studio-card p { font-family: 'Dani Editorial', Georgia, serif; font-size: 17px; margin: 12px; line-height: 1.3; }
.phone__studio-card p > span { display: block; font-family: 'Dani Sans', sans-serif; font-size: 7px; margin-top: 7px; color: #755b49; }
.phone__form { width: 100%; display: grid; gap: 10px; }
.phone__form label { font-size: .75rem; font-weight: 500; color: #755b49; }
.phone__form textarea { width: 100%; min-height: 124px; max-height: 260px; resize: vertical; font: inherit; font-size: 16px; line-height: 1.5; color: #372218; background: #fcf8f6; padding: 12px; border: 1px solid #d9c6b2; border-radius: 14px 14px 4px 14px; transition: border-color 200ms ease, box-shadow 200ms ease; }
.phone__form textarea::placeholder { color: #755b49; font-size: .875rem; }
.phone__form textarea:hover { border-color: #ae8966; }
.phone__form textarea:focus { outline: 2px solid #8c5d31; outline-offset: 2px; border-color: #8c5d31; box-shadow: 0 0 0 5px #dbb57b20; }
.phone__form textarea[aria-invalid="true"] { border-color: #8c5d31; }
.phone__submit { min-height: 48px; width: 100%; padding: 10px 12px; border: 1px solid transparent; border-radius: 100px; background: #3b261c; color: #fcf8f6; font-size: .8125rem; line-height: 1.35; font-weight: 500; cursor: pointer; transition: background-color 250ms ease, transform 250ms var(--dani-ease); }
.phone__submit:hover { background: #8c5d31; }
.phone__submit:focus-visible { outline: 2px solid #8c5d31; outline-offset: 4px; }
.phone__submit:active { transform: scale(.97); }
.phone__submit:disabled { cursor: default; opacity: .55; }
.phone__help, .phone__feedback { margin: 0; font-size: .6875rem; line-height: 1.55; color: #755b49; }
.phone__feedback { border-left: 2px solid #8c5d31; padding: 4px 0 4px 8px; }
.phone__home { height: 4px; width: 86px; border-radius: 8px; background: #3b261c; margin: 0 auto 9px; }
.contact__caption { position: relative; font-family: 'Dani Editorial', Georgia, serif; font-style: italic; font-size: 1.25rem; color: #8c5d31; }
.footer { background: #f0e3d3; padding: 28px 7%; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid #b9986638; color: #755b49; font-size: .8125rem; }
.footer > span > span { margin-left: 16px; font-size: .6875rem; }
.footer a { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; text-decoration: none; }
.notice { z-index: 1100; }
.faq__item summary:focus-visible, .story__link:focus-visible, .faq__contact:focus-visible, .footer a:focus-visible { outline: 2px solid #8c5d31; outline-offset: 5px; border-radius: 4px; }
.story__link:focus-visible { outline-color: #e7c48e; border-radius: 100px; }
.story__link:active, .faq__contact:active, .footer a:active { opacity: .7; }
.faq__item summary:active { background: #f0e3d34d; }
@media (hover: hover) and (pointer: fine) { .faq__item summary:hover { color: #8c5d31; } .footer a:hover { color: #372218; } }
@media (max-width: 1100px) and (min-width: 768px) {
  .story, .faq, .contact { padding-inline: 5%; }
  .story__inner, .faq__inner { gap: 40px; }
  .story h2, .faq h2, .contact h2 { font-size: 3rem; }
  .phone { width: 266px; }
  .contact__inner { grid-template-columns: 1.1fr .9fr; gap: 24px; }
  .button--contact { gap: 12px; padding-inline: 1.3rem; font-size: .875rem; }
  .story__text { font-size: .9375rem; }
}
@media (max-width: 767px) {
  .story, .faq { padding: 64px 7%; }
  .story__inner, .faq__inner, .contact__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .story__portrait { max-width: 440px; width: 100%; margin-inline: auto; }
  .story__photo-frame { aspect-ratio: 1; border-radius: 100px 100px 24px 24px; }
  .story__portrait figcaption { gap: 4px; font-size: .75rem; margin-top: 14px; }
  .story h2, .faq h2, .contact h2 { font-size: clamp(2.35rem, 9.8vw, 3.9rem); }
  .section-eyebrow { font-size: .6875rem; margin-bottom: 20px; }
  .story__text { margin-top: 24px; font-size: .9375rem; }
  .faq__inner { grid-template-areas: "scene" "list"; gap: 24px; }
  .faq__scene { max-width: 440px; }
  .faq__motion-toggle { right: 0; bottom: 6%; }
  .faq__item summary { gap: 18px; font-size: .9375rem; padding-block: 22px; }
  .faq__answer { padding-right: 16px; font-size: .875rem; }
  .contact { padding: 64px 7% 48px; }
  .contact__description { font-size: .9375rem; margin: 24px 0; }
  .button--contact { width: 100%; gap: 14px; padding-inline: 1.1rem; font-size: .9375rem; }
  .contact__actions p { text-align: center; font-size: .75rem; }
  .contact__visual { padding-top: 28px; }
  .phone { width: 266px; transform: rotate(5deg); }
  .contact__orbit--outer { width: 430px; height: 430px; top: 62px; }
  .contact__orbit--inner { width: 340px; height: 340px; top: 108px; }
  .contact__caption { font-size: 1.125rem; }
  .footer { flex-direction: column; gap: 6px; padding-block: 24px; text-align: center; }
  .footer > span > span { display: block; margin: 8px 0 0; }
}
@media (max-width: 350px) { .phone { width: 248px; } .contact__visual { margin-inline: -6px; } }
@media (prefers-reduced-motion: reduce) {
  .faq__orbit-line { animation: none; }
  .faq .faq__orbit { transform: none; transition: none; }
  .story-stack.is-stacking .services { position: relative; top: auto; }
  .faq__item summary, .faq__icon::before, .faq__icon::after, .button--contact, .phone, .phone__submit, .phone__form textarea { transition: none; }
  .faq__item[open] .faq__answer { animation: none; }
  .button--contact:active, .phone__submit:active { transform: none; }
}