/* Phone composition: photographs and reading areas are separate, in normal flow. */
@media (min-width:701px) {
  .hero-copy { top:clamp(100px,7.6vw,146px); }
}
@media (max-width:700px) {
  :root { --gutter:24px; }
  html { scroll-padding-top:24px; }
  .masthead { top:38px; left:var(--gutter); right:var(--gutter); }
  .official-logo { width:174px; }
  .hero { display:flex; flex-direction:column; align-items:flex-start; height:auto; min-height:100svh; padding-bottom:108px; }
  .hero-art { position:relative; inset:auto; display:block; width:100%; height:clamp(320px,100vw,460px); flex:none; clip-path:none; border-radius:0 0 42% 0/0 0 7% 0; overflow:hidden; }
  .hero-art img { display:block; width:100%; height:100%; object-fit:cover; object-position:center bottom; }
  .hero:after { display:none; }
  .hero-copy { position:relative; inset:auto; width:auto; max-width:none; margin:25px var(--gutter) 0; }
  .hero-context { font-size:11px; line-height:1.4; letter-spacing:.08em; margin-bottom:14px; }
  .hero-question { font-size:17px; line-height:1.35; font-weight:500; white-space:normal; text-wrap:balance; max-width:360px; letter-spacing:-.025em; }
  .hero-answer { font-size:clamp(33px,9.2vw,44px); line-height:1.08; font-weight:600; letter-spacing:-.05em; white-space:normal; text-wrap:balance; margin-top:9px; max-width:470px; }
  .hero-situations { font-size:14px; line-height:1.55; color:#48453f; margin-top:17px; max-width:440px; text-wrap:pretty; }
  .hero .hero-action { position:relative; inset:auto; margin:23px var(--gutter) 0; font-size:18px; min-height:52px; padding:14px 26px; }

  .journey { margin-top:0; padding-bottom:58px; }
  .journey-stage { display:flex; flex-direction:column; height:auto; min-height:0; }
  .journey-heading { order:0; width:auto; padding:0; margin:0 var(--gutter) 25px; }
  .journey-heading h2 { font-size:38px; }
  .journey-heading .lead { font-size:19px; line-height:1.4; max-width:350px; }
  .journey-art { order:1; position:relative; inset:auto; display:block; height:auto; aspect-ratio:1/1.08; width:100%; clip-path:none; border-radius:36px 0 36px 0; overflow:hidden; }
  .journey-art img { display:block; object-fit:cover; object-position:center bottom; }
  .journey-stage:after { display:none; }
  .journey-steps { display:grid; grid-template-columns:1fr; gap:0; overflow:visible; margin:12px 0 0; padding:0 var(--gutter); scroll-snap-type:none; }
  .journey-steps article { display:grid; grid-template-columns:42px minmax(0,1fr); column-gap:15px; padding:25px 0; background:none; border-bottom:1px solid #d9d1c4; }
  .journey-steps article:last-child { border-bottom:0; padding-bottom:0; }
  .journey-steps .round-icon { grid-row:1/3; width:40px; height:40px; margin:0; background:none; color:var(--detail-bronze); }
  .journey-steps .round-icon svg { width:25px; height:25px; }
  .journey-steps h3 { font-size:21px; line-height:1.25; margin:0 0 10px; }
  .journey-steps p { min-height:0; font-size:16px; line-height:1.6; }
  .step-dots { display:none; }

  .principle { display:flex; flex-direction:column; margin:0; padding:0 0 38px; background:#292722; border-radius:36px 0 36px 0; overflow:hidden; }
  .principle-art { position:relative; inset:auto; width:100%; height:auto; aspect-ratio:1.9; object-fit:cover; object-position:center; z-index:auto; clip-path:none; border-radius:0; filter:none; }
  .principle-copy { padding:28px var(--gutter) 0; margin:0; }
  .principle .eyebrow { font-size:11px; }
  .principle h2 { font-size:37px; margin-bottom:30px; }
  .principle-columns { gap:26px; }
  .principle h3 { font-size:23px; }
  .principle-columns p { font-size:16px; line-height:1.65; }
  .principle-columns article+article { padding-top:24px; border-top:1px solid #ffffff30; }

  .personal-area { margin:0; padding:58px var(--gutter); gap:32px; background:var(--chalk); }
  .personal-area:before { display:none; }
  .area-copy { order:0; padding:0; }
  .area-copy h2 { font-size:35px; line-height:1.12; white-space:normal; }
  .area-intro { font-size:18px; line-height:1.5; margin:18px 0 28px; }
  .area-details { gap:24px; }
  .area-details>div { gap:15px; }
  .area-details .round-icon { width:40px; height:40px; }
  .area-details dt { font-size:19px; line-height:1.3; }
  .area-details dd { font-size:16px; line-height:1.5; }
  .phone-figure { order:1; width:240px; max-width:78%; margin:5px auto 0; transform:none!important; }
  .phone-figure figcaption { transform:none; margin-top:16px; }

  .giorgia { display:flex; flex-direction:column; gap:28px; margin:0; padding:30px var(--gutter) 48px; background:#f1ede5; border-radius:36px 0 0 0; }
  .giorgia:before,.giorgia-photo:after { display:none; }
  .giorgia-photo { order:0; position:relative; height:380px; width:100%; margin:0; mask-image:none; border-radius:0 0 24px 24px; align-self:center; }
  .giorgia-photo img { width:100%; height:100%; object-fit:contain; object-position:center bottom; float:none; }
  .giorgia-copy { order:1; }
  .giorgia h2 { font-size:48px; }
  .giorgia-copy>p:not(.eyebrow) { font-size:17px; line-height:1.65; margin-top:18px; }

  .start { margin:28px 0 0; padding:35px var(--gutter) 0; background:#eee6d9; border-radius:36px 0 0 0; overflow:hidden; }
  .start:before { display:none; }
  .start h2 { font-size:46px; }
  .start-heading { padding-bottom:23px; }
  .start-heading .lead { font-size:20px; line-height:1.4; max-width:none; }
  .start-grid { display:grid; grid-template-columns:1fr; gap:26px; margin-top:26px; }
  .deliverables { gap:24px; }
  .deliverables li { align-items:flex-start; gap:15px; }
  .deliverables .round-icon { width:40px; height:40px; background:transparent; }
  .deliverables h3 { font-size:19px; line-height:1.3; }
  .deliverables p,.start-plan p { font-size:16px; line-height:1.55; }
  .start-plan { padding:24px 0 0; }
  .start-plan>p:first-child { font-size:22px; }
  .start-purchase { display:flex; flex-direction:column; align-items:flex-start; gap:20px; padding:24px 0 0; border-left:0; min-height:0; }
  .price { display:flex; align-items:baseline; gap:14px; }
  .price strong { font-size:36px; }
  .price span { font-size:14px; margin:0; }
  .start-purchase .pill { width:100%; min-height:54px; margin:0; font-size:19px; }
  .start-pets { display:block; position:relative; inset:auto; width:calc(100% + var(--gutter)*2); max-height:none; height:auto; margin:25px calc(var(--gutter)*-1) 0; }
  .faq { margin-top:46px; padding-bottom:25px; }
  .faq h2 { font-size:21px; }
  .faq-list summary { font-size:16px; min-height:48px; line-height:1.4; }
  .faq-list details p { font-size:15px; }
  footer { padding-bottom:125px; }
}
@media (max-width:360px) {
  :root { --gutter:20px; }
  .hero-art { height:320px; }
  .hero-answer { font-size:32px; }
  .hero-question { font-size:16px; }
  .journey-steps article { column-gap:12px; grid-template-columns:36px minmax(0,1fr); }
  .journey-steps .round-icon { width:34px; height:34px; }
  .journey-steps h3 { font-size:20px; }
  .journey-heading h2,.principle h2 { font-size:34px; }
  .area-copy h2 { font-size:32px; }
}