/* Phone-first pass (2026-10-07). Loaded last; desktop is untouched except the outro circle fix. */

/* Outro circle: size it by the smaller side so it never gets sliced flat at the top. */
.nf-outro-art{container-type:size}
.nf-outro-art:before{width:min(80cqw,calc(100cqh - 40px));height:auto;left:50%;transform:translateX(-50%)}

/* Phone + tablet hero (matches world.js Cn(): <=900px). Same idea as desktop: big type, then a big fox
   rising from the bottom edge, no fade. world.js reads the .nf-poster box, so the 3D fox lands exactly here. */
@media(max-width:900px){
 html[data-hero-type=signature] .nf-editorial .nf-reference-hero{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;height:100svh;min-height:620px;max-height:1180px;overflow:hidden;padding:0}
 .nf-editorial .nf-reference-hero .nf-hero-copy{order:1;flex:none;position:relative;z-index:4;top:auto;left:auto;right:auto;width:auto;max-width:560px;margin:0 22px;padding:96px 0 0;transform:none}
 .nf-editorial .nf-reference-hero .nf-poster{--fw:clamp(88vw,calc((100svh - 410px) * 1.07),160vw);order:2;position:relative;inset:auto;flex:1 1 0;min-height:230px;width:var(--fw);max-width:none;height:auto;margin:-18px 0 0 calc(56% - var(--fw) / 2);object-fit:cover;object-position:50% 0;-webkit-mask-image:none;mask-image:none;z-index:0}
 .nf-editorial .nf-reference-hero .nf-hero-copy h1{font-size:clamp(72px,21vw,112px);line-height:1;margin-bottom:8px}
 .nf-editorial .nf-reference-hero .nf-hero-prefix{margin-bottom:0}
 .nf-editorial .nf-reference-hero .nf-hero-statement{font-size:clamp(25px,7vw,40px);line-height:1.04}
 .nf-editorial .nf-reference-hero .nf-hero-summary{font-size:16px;line-height:1.4;margin-top:12px;max-width:340px}
 .nf-editorial .nf-reference-hero .nf-hero-actions{margin-top:18px;gap:10px;max-width:420px}
 .nf-editorial .nf-reference-hero .nf-hero-actions a{flex:1;min-height:50px;justify-content:center}
 .nf-hero-handnote{top:112px;right:5%;width:clamp(86px,22vw,150px);font-size:clamp(25px,6.5vw,40px)}
 .nf-editorial .nf-reference-hero .nf-scroll-cue,.nf-editorial .nf-reference-hero .nf-hero-status{display:none}
}
/* Phones: the 3D canvas scrolls with the page (no per-frame chasing = no stutter), and the
   service/outro props use their still images instead of live 3D (world.js skips them at <=900px). */
@media(max-width:900px){
 .nf-editorial .nf-stage{position:absolute;inset:0 0 auto 0;height:100svh;min-height:620px;max-height:1180px}
 .nf-live-prop .nf-prop-fallback{opacity:1!important}
}
@media(max-width:900px) and (max-height:700px){
 .nf-editorial .nf-reference-hero .nf-hero-copy{padding-top:86px}
 .nf-editorial .nf-reference-hero .nf-hero-copy h1{font-size:clamp(64px,18vw,96px)}
 .nf-editorial .nf-reference-hero .nf-hero-statement{font-size:24px}
 .nf-editorial .nf-reference-hero .nf-hero-summary{display:none}
}

@media(max-width:700px){
 /* Two per row: work and services. */
 .nf-editorial .nf-project-grid,.nf-service-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-flow:row;gap:22px 12px!important;overflow:visible;margin-inline:0;padding:0!important}
 .nf-editorial .nf-project{grid-column:auto!important;min-width:0}
 .nf-editorial .nf-project-image,.nf-editorial .nf-project:nth-child(3n) .nf-project-image{aspect-ratio:1;border-radius:16px}
 .nf-editorial .nf-project-caption h3{font-size:15px;line-height:1.25;margin-top:10px}
 .nf-editorial .nf-project-caption>span{font-size:10px;letter-spacing:.06em}
 .nf-project-index{left:10px;top:10px;font-size:10px}
 .nf-service-card{min-height:0;padding:16px 14px;border-radius:20px}
 .nf-service-grid .nf-live-prop{height:110px;min-height:0;margin:2px 0 8px}
 .nf-service-grid .nf-prop-fallback{padding:4px}
 .nf-service-content h3{font-size:17px;line-height:1.2}
 .nf-service-content p{min-height:0;font-size:13px;line-height:1.4}
 .nf-editorial .nf-person h3{font-size:15px}

 /* Crew stays a swipe row (Rishabh: team swipe was fine). */
 .nf-editorial .nf-team-grid{display:grid!important;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:46%;gap:14px!important;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  margin-inline:calc(-1 * var(--editorial-pad,22px));padding:4px var(--editorial-pad,22px) 14px!important;scroll-padding-inline:var(--editorial-pad,22px);scrollbar-width:none}
 .nf-editorial .nf-team-grid::-webkit-scrollbar{display:none}
 .nf-editorial .nf-person{scroll-snap-align:start;min-width:0}

 /* Section rhythm: less dead air between blocks. */
 .nf-editorial .nf-section{padding-top:56px;padding-bottom:56px}
 .nf-editorial-heading{margin-bottom:24px}

 /* Contact: buttons side by side, art shorter. */
 .nf-editorial .nf-contact-actions{display:flex;flex-wrap:wrap;gap:10px}
 .nf-editorial .nf-contact-actions .nf-contact-cta{flex:1 1 140px}
 .nf-outro-art{height:320px}

 /* Header: keep the menu pill fully inside the screen. */
 .nf-editorial .nf-header{padding-left:18px;padding-right:18px}
}