/* iPad Pro 11" portrait (Figma 2197:3130, canvas 834px) — only what differs from the iMac (main.css).
   All big titles 40/46; sections stacked in one column; header = white bar with a menu button. */

html[data-bp="ipad-p"] .display { font-size: 40px; line-height: 46px; letter-spacing: -0.8px; }

/* Header (Figma "Header iPad/iPhone"): white 90 % bar, logo 18px, green menu button */
html[data-bp="ipad-p"] .nav { margin: 30px; padding: 5px 5px 5px 20px; align-items: center; border-radius: 8px; background: rgba(255,255,255,.9); color: var(--black); }
html[data-bp="ipad-p"] .nav .logo { width: 145.2px; font-size: 18px; }
html[data-bp="ipad-p"] .nav .logo svg { width: 16.2px; height: 15.4px; }

/* 1. Hero: image 774 × 641, then the text, then the award */
html[data-bp="ipad-p"] .hero { height: auto; }
html[data-bp="ipad-p"] .hero__main { flex: none; flex-direction: column; align-items: stretch; gap: 40px; }
html[data-bp="ipad-p"] .hero__media { width: auto; height: 641px; }
html[data-bp="ipad-p"] .hero__side { flex: none; gap: 60px; }
html[data-bp="ipad-p"] .hero__center { flex: none; justify-content: flex-start; }
html[data-bp="ipad-p"] .hero__awards { justify-content: flex-start; }
html[data-bp="ipad-p"] .hero__awards img { width: 57px; height: 57px; }

/* 2. Trusted by: 110px, logos at 80 % */
html[data-bp="ipad-p"] .trusted { --gap: 50px; --s: .8; height: 110px; }

/* 3. One studio: cards one under the other, 560px */
html[data-bp="ipad-p"] .studio__title { padding: 60px 0; }
html[data-bp="ipad-p"] .studio__cards { min-height: 0; flex-direction: column; }
html[data-bp="ipad-p"] .offer { flex: none; min-height: 560px; }

/* 4. Fit is the hardest part: text, then the image 774 × 774 */
html[data-bp="ipad-p"] .fit { height: auto; flex-direction: column; gap: 30px; }
html[data-bp="ipad-p"] .fit__copy { flex: none; padding: 60px 0; }
html[data-bp="ipad-p"] .fit__title { width: 414px; }
html[data-bp="ipad-p"] .fit__media { flex: none; height: 774px; }

/* 5. How we work: steps 2 × 2, "Behind every frame" cards one under the other */
html[data-bp="ipad-p"] .steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-bp="ipad-p"] .step__text p { max-width: none; }
html[data-bp="ipad-p"] .behind { flex-direction: column; }
html[data-bp="ipad-p"] .materials,
html[data-bp="ipad-p"] .lead { flex: none; }

/* 6. Have a product in mind?: title above the form */
html[data-bp="ipad-p"] .contact { gap: 30px; }
html[data-bp="ipad-p"] .contact__inner { flex-direction: column; align-items: stretch; padding: 30px; gap: 60px; }
html[data-bp="ipad-p"] .contact__heading { width: auto; }
html[data-bp="ipad-p"] .form { flex: none; padding: 0; }

/* Footer (Figma "Footer Visages_Lab iPad"): city, then the columns 2 × 2, smaller logo.
   Space between column links: 12px as on the iMac (Figma mixes 10 and 12). */
html[data-bp="ipad-p"] .footer { height: auto; justify-content: flex-start; gap: 120px; }
html[data-bp="ipad-p"] .footer__info { display: grid; grid-template-columns: 218px 218px; gap: 60px; padding-top: 29px; }
html[data-bp="ipad-p"] .footer__city { grid-column: 1 / -1; }
html[data-bp="ipad-p"] .footer__col { width: auto; }
html[data-bp="ipad-p"] .footer__col + .footer__col,
html[data-bp="ipad-p"] .footer__city + .footer__col { margin-left: 0; }
html[data-bp="ipad-p"] .footer__bottom { align-items: center; }
html[data-bp="ipad-p"] .footer__bottom .logo { width: 145.2px; font-size: 18px; }
html[data-bp="ipad-p"] .footer__bottom .logo svg { width: 16.2px; height: 15.4px; }
html[data-bp="ipad-p"] .footer__top { margin-bottom: 0; }