/* A hand-held composition: same paper material, less travel between ideas. */
.client-deck-controls { display:none; }
@media(max-width:700px) {
  .material-page[data-site-page="home"] .wrap { width:calc(100% - 40px); }
  .material-page[data-site-page="home"] .section { padding:56px 0; }
  .material-page[data-site-page="home"] .studio-content { padding-top:calc(var(--header) + 28px); padding-bottom:48px; }
  .material-page .studio-opening { gap:30px; }
  .material-page .hero-studio h1 { font-size:clamp(39px,10.8vw,58px); line-height:1.02; max-width:13ch; }
  .material-page .hero-kicker { font-size:15px; margin-bottom:24px; }
  .material-page .hero-studio .lead { font-size:18px; line-height:1.48; margin-top:22px; }
  .material-page .hero .button { width:calc(100% - 4px); margin-top:24px; }
  .material-page .studio-image .hero-art { height:190px; }
  .material-page .studio-image .hero-art img { object-position:center 42%; }
  .material-page .studio-image .hero-facts { grid-template-columns:.8fr 1.2fr; gap:18px; margin-top:16px; }
  .material-page .studio-image .hero-facts a:first-child { font-size:29px; }
  .material-page .studio-image .hero-facts a:last-child { font-size:16px; line-height:1.3; }
  .material-page .studio-image .hero-facts a { min-height:44px; display:flex; align-items:center; }
  .material-page .studio-intro-title { font-size:clamp(34px,10.5vw,64px); line-height:1.04; letter-spacing:-.04em; }
  .material-page .studio-intro-title span { max-width:none; }
  .material-page .intro-blocks { width:35vw; right:-2%; top:5%; }
  .material-page .intro-puzzle { top:4%; left:-9%; width:66vw; }
  .material-page .intro-lock { right:-7%; bottom:5%; width:72vw; }
  .material-page .studio-intro::after { content:''; position:absolute; left:20px; right:20px; bottom:max(20px,env(safe-area-inset-bottom,0px)); height:2px; background:var(--coral); transform:scaleX(var(--intro-progress,0)); transform-origin:left; opacity:.7; }
  .material-page .material-statement { margin-bottom:30px; }
  .material-page .material-statement h2 { font-size:clamp(33px,9.3vw,50px); line-height:1.06; }
  .material-page .material-statement h2 span:last-child { text-align:left; transform:none; }
  .material-page .fit-composition { gap:26px; }
  .material-page .fit-art { width:calc(100% - 6px); box-shadow:6px 6px 0 #c9c9c9; }
  .material-page .fit-art img { height:210px; min-height:0; object-position:center 49%; }
  .material-page .method-list { gap:22px; padding-right:6px; }
  .material-page .method-row,.material-page .method-row:last-child { width:calc(100% - 10px); padding:23px; box-shadow:5px 5px 0 var(--ink); }
  .material-page .method-row:nth-child(2) { margin-left:10px; box-shadow:5px 5px 0 var(--coral); }
  .material-page .method-row .method-tag { margin-bottom:14px; font-size:15px; }
  .material-page .method-row h3 { font-size:29px; max-width:19ch; }
  .material-page .method-row>p:last-child { font-size:18px; margin-top:16px; line-height:1.45; }
  .material-page .method-page-link { width:calc(100% - 4px); }
  .material-page .timeline-section-heading { margin-bottom:30px; }
  .material-page .timeline-section-heading h2 { font-size:clamp(34px,9.3vw,50px); }
  .material-page .timeline-section-foot { margin-top:12px; padding-top:18px; }
  .hiring-timeline .popover { width:calc(100vw - 24px); box-shadow:5px 5px 0 var(--coral); }
  .hiring-timeline .panel-close { width:44px; height:44px; min-width:44px; min-height:44px; }
  .hiring-timeline .panel-title { font-size:25px; }
  .hiring-timeline .panel-eyebrow,.hiring-timeline .panel-note { font-size:15px; }
  .hiring-timeline .step-heading { font-size:17px; }
  .hiring-timeline .step-copy { font-size:16px; }
  .hiring-timeline .option,.hiring-timeline .popover .substep .option { min-height:46px; font-size:16px; }
  .hiring-timeline .panel-total { font-size:19px; font-weight:600; color:var(--accent); border-top:1px solid #aaa; padding-top:16px; margin-top:20px; }
  .material-page .performance-heading { margin-bottom:26px; }
  .material-page .work-section .performance-heading h2 { font-size:clamp(34px,9.3vw,48px); max-width:14ch; }
  .material-page .performance-summary { margin-bottom:48px; }
  .material-page .performance-preview-note { font-size:14px; margin-top:20px; }
  .material-page .performance-metric { padding:24px; }
  .material-page .performance-number { font-size:clamp(76px,23vw,100px); }
  .material-page .performance-metric dt { font-size:21px; margin-top:16px; }
  .material-page .performance-metric dt br { display:none; }
  .material-page .performance-basis { margin-top:8px; }
  .material-page .work-section .client-proof-heading { margin-bottom:24px; }
  .material-page .work-section .client-proof-heading h2 { font-size:32px; max-width:14ch; }
  .material-page .client-list {
    display:flex; gap:18px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
    scroll-padding-left:0; overscroll-behavior-x:contain; scrollbar-width:none;
    width:calc(100% + 20px); margin:0; padding:3px 20px 12px 0; border:0;
  }
  .material-page .client-list::-webkit-scrollbar { display:none; }
  .material-page .client-list .client-row {
    flex:0 0 min(82vw,340px); scroll-snap-align:start; min-height:380px;
    border:1px solid #666; box-shadow:5px 5px 0 #666; transform:none; padding:0;
  }
  .material-page .client-list .client-logo { height:112px; padding:24px 36px; }
  .material-page .client-details { padding:22px; }
  .material-page .client-details h3 { font-size:26px; padding:0; }
  .material-page .client-details .client-type { font-size:16px; margin-top:8px; }
  .material-page .client-details .client-roles { font-size:17px; line-height:1.4; padding:0; margin-top:18px; }
  .material-page .client-roles li + li { margin-top:6px; }
  .material-page .client-website { font-size:16px; margin-top:24px; padding:12px 16px; gap:24px; }
  .client-deck-controls { display:flex; align-items:center; gap:16px; margin-top:16px; }
  .client-deck-controls button { display:grid; place-items:center; width:46px; height:46px; flex-shrink:0; background:#f2f2f2; color:#191919; border:1px solid #f2f2f2; border-radius:0; box-shadow:3px 3px 0 var(--coral); font:400 23px/1 var(--sans); cursor:pointer; }
  .client-deck-controls button:disabled { opacity:.35; box-shadow:none; cursor:default; }
  .client-deck-controls button:active:not(:disabled) { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--coral); }
  .client-deck-controls button:focus-visible { outline:3px solid var(--coral); outline-offset:5px; }
  .client-deck-track { height:3px; background:#666; flex:1; overflow:hidden; }
  .client-deck-track span { display:block; width:calc(100% / 7); height:100%; background:var(--coral); transform:translateX(calc(var(--client-index,0) * 100%)); transition:transform .25s ease; }
  .material-page .experience-heading { margin-bottom:30px; }
  .material-page .experience-heading h2 { font-size:clamp(36px,10vw,52px); }
  .material-page .experience-heading .section-intro { max-width:29ch; font-size:18px; margin-top:22px; }
  .material-page .terms-title h2 { font-size:clamp(36px,10vw,52px); }
  .material-page .terms-title { margin-bottom:28px; }
  .material-page .terms-title .section-intro { font-size:18px; margin-top:18px; }
  .material-page .term-list article { padding:24px; }
  .material-page .term-list h3 { font-size:52px; margin-bottom:18px; }
  .material-page .term-list p { font-size:18px; line-height:1.45; }
  .material-page .term-list .small { font-size:16px; }
  .material-page .term-list .text-link { font-size:17px; margin-top:18px; }
  .material-page .closing { gap:24px; }
  .material-page .closing h2 { font-size:clamp(40px,11vw,58px); }
  .material-page[data-site-page="home"] .mobile-chapters::before { content:''; position:absolute; left:0; right:0; top:-2px; height:3px; background:var(--coral); transform:scaleX(var(--chapter-progress,0)); transform-origin:left; }
}
@media(min-width:701px) and (max-width:900px) {
  .material-page[data-site-page="home"] .wrap { width:calc(100% - 54px); }
  .material-page .client-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .material-page .client-details .client-roles { font-size:18px; }
}
@media(max-height:500px) and (orientation:landscape) {
  .material-page .studio-intro { padding:20px; }
  .material-page .studio-intro-title { font-size:clamp(32px,7.5vh,44px); max-width:25ch; }
  .material-page .studio-intro-title span { max-width:none; }
}
@media(prefers-reduced-motion:reduce) {
  .client-deck-track span { transition:none; }
  .material-page .voices .voice-slot[data-audience="candidates"] { transform:none; }
}