/* Mobile polish (<810px). Loaded last on every page; apart from the marked bugfix, desktop stays untouched.
   Reference: Fabrica mobile (white menu sheet with contact block, hero copy at
   the bottom of the card, legible captions). */
.menu-contact{display:none}
/* All widths: inline SVG replacements for arrow/play characters (see build-release iconize). */
.glyph{display:inline-block;flex:none;width:.82em;height:.82em;vertical-align:-.02em;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.05}
.glyph-play{width:.9em;height:.9em;fill:currentColor;stroke:none}
/* Touch: a tapped project card plays the desktop hover before the page transition. */
.project-grid .project.project-pressed .project-image{border-width:0}
.project-grid .project.project-pressed .project-image>img{transform:scale(1.13);filter:blur(7px)}
.project-grid .project.project-pressed .project-image:after{background:#0a0a0a;opacity:.2}
.project-grid .project.project-pressed .project-label{transform:translateY(-50%) scale(.8)}
.project.project-pressed .project-dots>i:nth-child(1){background:#ed7b4e}.project.project-pressed .project-dots>i:nth-child(2){background:#f4d24c}.project.project-pressed .project-dots>i:nth-child(3){background:#80b63f}
/* Bugfix on all widths: the brand mark SVG is near-white (#f4f7ff) and was
   invisible on the light form card; darken it like the navigation logo. */
.analysis-form-wrap .analysis-brand-mark{filter:brightness(0)}
@media(max-width:809px){
 /* Menu: white sheet including the bar, Fabrica link size, contact block. */
 .navigation{transition:background-color .45s cubic-bezier(.22,1,.36,1)}
 .navigation:has(.menu-toggle[aria-expanded=true]){background:#fff}
 .menu{background:#fff;box-shadow:0 30px 40px -30px #0003;padding:44px 20px 36px}
 .menu a,.menu button{font-size:32px;line-height:1.2;letter-spacing:-.06em}
 .menu>.menu-contact{display:grid;justify-items:center;gap:8px;margin-top:44px}
 .menu .menu-contact a{font-size:18px;font-weight:500;letter-spacing:-.04em;line-height:1.3}
 .menu .menu-contact .menu-mail{display:inline-flex;align-items:center;gap:8px;font-size:26px;font-weight:600;letter-spacing:-.05em;border-bottom:2px solid currentColor;padding-bottom:1px}
 .menu-plus{position:relative;flex:none;width:17px;height:17px;border-radius:50%;background:#111}
 .menu-plus:before,.menu-plus:after{content:"";position:absolute;left:50%;top:50%;width:9px;height:1.5px;background:#fff;transform:translate(-50%,-50%)}
 .menu-plus:after{transform:translate(-50%,-50%) rotate(90deg)}
 .menu-legal{display:flex;gap:22px;margin-top:22px}
 .menu .menu-legal a{font-size:13px;font-weight:500;padding:6px 0}
 .menu-contact small{font-size:12px;font-weight:500;letter-spacing:-.04em;margin-top:14px;color:#0a0a0a}

 /* Larger hit areas without moving anything visually. */
 .menu-toggle{height:44px;margin:-11px 0}
 .navigation .logo{padding:10px 0;margin:-10px 0}
 footer a{padding:10px 0;margin:-10px 0}
 .closing nav a,.closing>div>div a{padding:5px 0;margin:-5px 0}

 /* Hero: services, then founder card, copy anchored to the bottom (Fabrica). */
 .sand-scroll .hero{display:flex;flex-direction:column}
 .sand-scroll .hero-bottom{flex:1 1 auto}
 .sand-scroll .hero h1{margin-top:auto}
 .sand-scroll .hero-shade{background:linear-gradient(0deg,#0a0a0ae6 0%,#0a0a0a99 24%,#0a0a0a00 46%)}

 /* Client logo tiles: scroll reveal per tile (values from client-logo-entry.js). */
 .clients .client-logos>div.logo-scroll{opacity:var(--tile-alpha,1);transform:translate3d(0,var(--tile-y,0px),0) scale(var(--tile-scale,1));filter:blur(var(--tile-blur,0px));transform-origin:50% 100%}

 /* Project captions: name above category instead of 9px inline labels. */
 .project-caption{height:auto;min-height:62px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:2px;align-items:center;padding:12px 18px;white-space:normal}
 .project-caption strong{grid-column:1;grid-row:1;font-size:16px;line-height:1.2;hyphens:manual;overflow-wrap:normal}
 .project-caption>span{grid-column:1;grid-row:2;font-size:12px;line-height:1.3;max-width:none;overflow:visible;hyphens:manual;overflow-wrap:normal;color:#666}
 .project-caption .project-dots{grid-column:2;grid-row:1/3;margin:0}

 /* Approach cards: number badge clear of the drawings, clean word breaks. */
 .steps-grid h3{hyphens:manual;overflow-wrap:normal}
 .step-image{height:214px}
 .process-visual{padding-top:32px}
 .step-image>span{top:12px;left:12px;font-size:12px;padding:5px 8px}
 .process-node{font-size:11px;padding:8px 8px;line-height:1.25}
 .priority-axis{height:108px}
 .priority-axis .dot-one{top:16px}.priority-axis .dot-two{top:36px}.priority-axis .dot-three{top:74px}.priority-axis .dot-four{top:84px}
 .priority-axis strong{top:18px}
 .film-top>span:last-child{font-size:12px}
 .play-disc{top:38%}
 .film-bottom strong{font-size:clamp(25px,8vw,32px)}
 figcaption{font-size:11px}
 .analysis-form-wrap h3{font-size:clamp(30px,9.4vw,36px)}

 /* Testimonial portrait: source has no headroom; show it uncropped, zoom from the top. */
 .testimonial .quote-image{aspect-ratio:1000/1069}
 .testimonial .quote-image img{object-position:50% 0;transform-origin:50% 0}

 /* Case and service pages: no automatic hyphenation in large type. */
 .case-page-heading p,.case-summary>p,.case-section>p,.case-section>div>p,.case-next h2,.case-step h3{hyphens:manual;overflow-wrap:break-word}
}
/* Solution illustrations are drawn at 560x340; the fixed-height box cropped their frames
   (mobile 310x140, tablet 120x100). Show them uncropped at their own ratio. */
@media(max-width:1100px){.service-detail>img{height:auto;aspect-ratio:560/340;object-fit:contain}}
@media(max-width:380px){.analysis-form-wrap h3 br{display:none}}
@media(max-width:809px) and (prefers-reduced-motion:reduce){.navigation{transition:none}}