/* Phone layouts use the same colors, typefaces and imagery as the desktop site. */
@media(max-width:767px){
  .services-title{display:flex;grid-area:auto;width:100%;gap:12px;font-size:clamp(1.7rem,7.4vw,2.15rem);padding:0 0 16px}
  .services-title::before,.services-title::after{min-width:16px}
  :root{--body-size:1.125rem;--small-size:1.0625rem;--large-size:1.3rem;--heading-medium:clamp(2.1rem,8.7vw,2.7rem);--heading-small:clamp(1.95rem,8vw,2.35rem)}
  body{line-height:1.4}
  .site-header .brand img{width:192px;max-width:calc(100vw - 128px);height:auto}
  .menu-toggle{width:44px;height:44px;color:var(--gold)}
  .menu-toggle span{top:21px;left:7px}
  .mobile-menu{background:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),var(--olive) url('./assets/papier-olive.webp') center/cover;padding:16px 6vw;max-height:calc(100vh - var(--header-height));max-height:calc(100svh - var(--header-height));overflow-y:auto}
  .mobile-menu a{min-height:48px;padding:10px 0;font-size:1.25rem}
  .hero{padding:30px 0 36px}
  .hero-grid{display:flex;flex-direction:column;gap:24px;width:88%;margin:0 auto}
  .hero-portrait{width:min(100%,320px);height:auto;aspect-ratio:4/5;align-self:center}
  .hero-portrait img{object-position:center 12%;width:100%;height:100%}
  .hero h1{font-size:var(--heading-medium);line-height:1.14;text-wrap:balance}
  .hero h1,.hero-intro,.hero-description{margin-left:4vw;margin-right:4vw}
  .hero-intro,.hero-description{margin-right:2vw}
  .hero-for,.hero-place{white-space:nowrap}
  .hero-intro{font-size:var(--large-size);line-height:1.3}
  .hero-description p{line-height:1.45;text-wrap:pretty}
  .service-grid{--letter-height:clamp(104px,30vw,132px);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:none;width:88%;margin:0 auto;gap:18px;padding:26px 0}
  .service{display:block;position:relative;min-height:calc(var(--letter-height) + 12px);padding:14px 3vw 14px 9vw}
  .service-letter{position:absolute;grid-area:auto;left:0;top:0;width:calc(var(--letter-height)*1.530612);height:var(--letter-height);min-height:0;mask-size:100% 100%;-webkit-mask-size:100% 100%;mask-position:0 0;-webkit-mask-position:0 0}
  .service-copy{grid-area:auto;min-height:0;padding:0;align-self:auto}
  .service h3{font-size:1.2rem;line-height:1.25;margin-bottom:10px;text-wrap:balance}
  .service p{font-size:var(--small-size);line-height:1.4;text-wrap:pretty}
  .service-dash{white-space:nowrap}
  .service:nth-of-type(even){padding-left:9vw;padding-right:3vw}
  .service:nth-of-type(even) .service-letter{left:auto;right:0}
  .work{padding:32px 0}
  .work-grid{gap:24px}
  .work-grid .moodboard{aspect-ratio:.86;object-position:center 25%}
  .portfolio-strip .project-gallery{display:flex;gap:14px;width:100%;padding:12px 14px 16px 0;grid-template-columns:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-behavior:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .portfolio-strip .project-gallery::-webkit-scrollbar{display:none}
  .portfolio-strip .project-gallery:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
  .portfolio-strip .project{flex:0 0 clamp(166px,56vw,244px);width:clamp(166px,56vw,244px);aspect-ratio:1.125;border:6px solid var(--white);box-shadow:0 4px 12px rgba(63,61,43,.14);transform:none}
  .portfolio-loop-ready .project-clone{display:block}
  .portfolio-loop-ready .portfolio-pause{display:grid;place-items:center;position:absolute;right:8px;bottom:22px;width:44px;height:44px;padding:0;border:0;border-radius:50%;color:var(--gold);background:var(--olive);z-index:3}
  .pause-icon{display:block;width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
  .is-paused .pause-icon{width:0;height:0;border:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid currentColor}
  .portfolio-pause:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
  .work-left{display:flex;flex-direction:column}
  .work-left h2{order:1;align-self:stretch;text-align:left}
  .work-left #work-title{width:100%;text-align:left;color:var(--olive)}
  .work-left .work-description{order:2;align-self:stretch;text-align:left}
  .work{background-image:linear-gradient(#f0eae026,#f0eae026),url('./assets/papier-beige-1200.webp')}
  .work-left .portfolio-strip{order:3;margin-top:18px}
  .work-grid h2{font-size:var(--heading-small);line-height:1.14;margin-top:0}
  .work-grid .work-description{line-height:1.45}
  .contact{padding:34px 0;scroll-margin-top:90px}
  .contact-grid{gap:26px}
  .contact h2{font-size:var(--heading-small);line-height:1.18}
  .contact-form label{font-size:1.125rem;margin-bottom:6px}
  .contact-form input,.contact-form textarea{font-size:1.125rem;line-height:1.35;min-height:48px;margin-bottom:20px;padding:11px 18px}
  .contact-form textarea{min-height:136px}
  .contact-form button{min-height:48px;padding:14px 24px;font-size:1.0625rem}
  .form-status{line-height:1.4;overflow-wrap:anywhere}
  .site-footer{padding:32px 0}
  .footer-grid{gap:10px}
  .site-footer h2{font-size:var(--heading-small);margin-bottom:-4px}
  .footer-role{line-height:1.3;margin-bottom:14px}
  .site-footer address,.copyright{font-size:1rem;line-height:1.5;overflow-wrap:anywhere}
}
@media(hover:none){
  .project:hover{transform:none}
  .service:hover .service-letter{background:var(--gold)}
  .service:hover .service-letter.white{background:var(--white)}
  .service:focus-visible .service-letter{background:var(--white)}
  .service:focus-visible .service-letter.white{background:var(--gold)}
}

@media(max-width:767px) and (prefers-reduced-motion:reduce){
  .portfolio-strip .project-gallery{scroll-snap-type:x proximity}
  .portfolio-loop-ready .project-clone,.portfolio-loop-ready .portfolio-pause{display:none}
  .portfolio-strip .project{scroll-snap-align:start}
}