/* iPhone (Figma 2194:2159, canvas 393px) — only what differs from the iMac (main.css).
   Big titles 28/34, text 15/22, Mono 14/22; everything in one column; 20px side margins;
   header = white bar with a menu button. */

html[data-bp="phone"] .display { font-size: 28px; line-height: 34px; letter-spacing: -0.56px; }
html[data-bp="phone"] .btn { font-size: 15px; line-height: 22px; }

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

/* 1. Hero: image 353 × 440, then the text, then the award */
html[data-bp="phone"] .hero { height: auto; }
html[data-bp="phone"] .hero__main { flex: none; flex-direction: column; align-items: stretch; gap: 30px; padding: 0 20px 20px; }
html[data-bp="phone"] .hero__media { width: auto; height: 440px; }
html[data-bp="phone"] .hero__side { flex: none; gap: 60px; }
html[data-bp="phone"] .hero__center { flex: none; justify-content: flex-start; }
html[data-bp="phone"] .hero__content { width: auto; gap: 20px; }
html[data-bp="phone"] .hero__text { gap: 5px; }
html[data-bp="phone"] .hero__text p { height: 88px; align-items: flex-start; font-size: 15px; line-height: 22px; }   /* Figma: 4-line box for 3 lines of text */
html[data-bp="phone"] .hero__awards { justify-content: flex-start; }
html[data-bp="phone"] .hero__awards img { width: 44px; height: 44px; }
html[data-bp="phone"] .hero__awards .mono { font-size: 14px; line-height: 22px; }

/* 2. Trusted by: 96px, logos at 60 % */
html[data-bp="phone"] .trusted { --gap: 36px; --s: .6; height: 96px; padding-left: 15px; }
html[data-bp="phone"] .trusted__tag { font-size: 14px; line-height: 18.7px; }

/* 3. One studio: cards one under the other, 480px */
html[data-bp="phone"] .studio { padding: 20px; }
html[data-bp="phone"] .studio__title { padding: 60px 30px; }
html[data-bp="phone"] .studio__title h2 { margin-bottom: -16.405px; }   /* 15px to the text (31.405 elsewhere) */
html[data-bp="phone"] .studio__title p { width: auto; font-size: 15px; line-height: 22px; }
html[data-bp="phone"] .studio__cards { min-height: 0; flex-direction: column; }
/* Cards (Figma components 2226:3591 / 2226:3709): a 480px photo card on a dark green card.
   Open (variant "Variant2", 1120px): the card grows downwards and shows the details under the photo;
   the photo, its veil, title and text stay as they are; "+" becomes "−". Opened with a tap (js/site.js),
   no hover on this layout; 0.3s ease-out like the computers' cards (no transition in Figma). */
html[data-bp="phone"] .offer {
  flex: none;
  display: grid;
  grid-template-rows: 480px 0fr;
  gap: 0;
  padding: 0;
  border-radius: 8px;
  background: var(--dark-green);
  transition: grid-template-rows .3s ease-out;
}
html[data-bp="phone"] .offer.is-open { grid-template-rows: 480px 1fr; }
html[data-bp="phone"] .offer__bg { bottom: auto; height: 480px; }
html[data-bp="phone"] .offer__top { grid-area: 1 / 1; align-self: start; padding: 20px 20px 0; }
html[data-bp="phone"] .offer__bottom { display: contents; }
html[data-bp="phone"] .offer .offer__text { grid-area: 1 / 1; align-self: end; position: static; padding: 0 20px 20px; opacity: 1; visibility: visible; }
html[data-bp="phone"] .offer__text h3 { font-size: 28px; line-height: 34px; letter-spacing: -0.56px; }
html[data-bp="phone"] .offer__text p { font-size: 15px; line-height: 22px; }
html[data-bp="phone"] .offer .offer__bg::after { background-color: rgba(15,31,16,.35); }
html[data-bp="phone"] .offer .offer__details { grid-area: 2 / 1; position: static; min-height: 0; overflow: hidden; gap: 15px; }
html[data-bp="phone"] .offer:not(.is-open) .offer__details { opacity: 0; visibility: hidden; transition: opacity .3s ease-out, visibility 0s .3s; }
html[data-bp="phone"] .offer:not(.is-open) .offer__toggle .plus { opacity: 1; }
html[data-bp="phone"] .offer:not(.is-open) .offer__toggle .minus { opacity: 0; }
/* details: 30px under the photo + 20px padding, 20px sides, 40px bottom; each label above its text (16/24) */
html[data-bp="phone"] .offer__details div { flex-direction: column; gap: 5px; margin: 0 20px; }
html[data-bp="phone"] .offer__details div:first-child { margin-top: 50px; }
html[data-bp="phone"] .offer__details div:last-child { margin-bottom: 40px; }
html[data-bp="phone"] .offer__details dt { width: auto; }

/* 4. Fit is the hardest part: text, then the image 353 × 400 */
html[data-bp="phone"] .fit { height: auto; flex-direction: column; gap: 15px; padding: 20px; }
html[data-bp="phone"] .fit__copy { flex: none; padding: 45px 0 15px; }
html[data-bp="phone"] .fit__title { width: 337.4px; }
html[data-bp="phone"] .fit__title p { font-size: 15px; line-height: 22px; }
html[data-bp="phone"] .fit__title .link-btn { align-self: stretch; }
html[data-bp="phone"] .fit__media { flex: none; height: 400px; }

/* 5. How we work: everything one under the other */
html[data-bp="phone"] .process { padding: 45px 20px; }
html[data-bp="phone"] .process__label { font-size: 22px; line-height: 26px; }
html[data-bp="phone"] .steps { flex-direction: column; }
html[data-bp="phone"] .step { flex: none; padding: 20px; gap: 20px; }
html[data-bp="phone"] .num { font-size: 14px; line-height: 22px; }
html[data-bp="phone"] .step__text h4 { font-size: 20px; line-height: 24px; }
html[data-bp="phone"] .step__text p { max-width: none; font-size: 15px; line-height: 22px; }
html[data-bp="phone"] .behind { flex-direction: column; }
html[data-bp="phone"] .materials,
html[data-bp="phone"] .lead { flex: none; padding: 20px; }
html[data-bp="phone"] .materials__label { font-size: 14px; line-height: 22px; }
/* each kind ("3D printed", "Traditional") on its own line, its materials below */
html[data-bp="phone"] .materials__row { flex-wrap: wrap; gap: 10px 7px; }   /* Figma 8px, but there "TR90 … Wood" runs 3px past the card */
html[data-bp="phone"] .materials__row + .materials__row { margin-top: -5px; }   /* 15px between the two groups */
html[data-bp="phone"] .materials__kind { margin-right: 100%; font-size: 14px; line-height: 22px; }
html[data-bp="phone"] .materials__chip { font-size: 15px; line-height: 22px; }
html[data-bp="phone"] .lead { flex-direction: column; align-items: flex-start; }
html[data-bp="phone"] .lead__photo { width: 85px; height: 85px; }
html[data-bp="phone"] .lead__text { flex: none; width: 100%; }
html[data-bp="phone"] .lead__role { font-size: 14px; line-height: 22px; }
html[data-bp="phone"] .lead__name { font-size: 20px; line-height: 24px; }
html[data-bp="phone"] .lead__bio { font-size: 15px; line-height: 22px; }

/* 6. Have a product in mind?: title above the form, one field per line */
html[data-bp="phone"] .contact { padding: 30px 15px 15px; gap: 30px; }
html[data-bp="phone"] .contact__inner { flex-direction: column; align-items: stretch; padding: 15px; gap: 40px; }
html[data-bp="phone"] .contact__heading { width: auto; }
html[data-bp="phone"] .contact__copy p { font-size: 15px; line-height: 22px; }
html[data-bp="phone"] .form { flex: none; padding: 0; }
html[data-bp="phone"] .form__fields { grid-template-columns: minmax(0, 1fr); gap: 20px; }
html[data-bp="phone"] .form__fields .field:nth-child(3) { margin-top: 10px; }   /* 30px between the two pairs */
html[data-bp="phone"] .field input,
html[data-bp="phone"] .field select,
html[data-bp="phone"] .form textarea { font-size: 15px; line-height: 22px; }
html[data-bp="phone"] .field input,
html[data-bp="phone"] .field select { height: 48.5px; }
html[data-bp="phone"] .form textarea { height: 100px; }
html[data-bp="phone"] .form__submit { font-size: 14px; }

/* Footer (Figma "iPhone Footer Visages_Lab"): city 28/34, then the columns 2 × 2, smaller logo */
html[data-bp="phone"] .footer { height: auto; justify-content: flex-start; gap: 120px; }
html[data-bp="phone"] .footer__info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 0; padding-top: 29px; }
html[data-bp="phone"] .footer__city { grid-column: 1 / -1; width: auto; margin-bottom: 20px; font-size: 28px; line-height: 34px; letter-spacing: -0.84px; }
html[data-bp="phone"] .footer__col { width: auto; gap: 10px; font-size: 14px; line-height: 22px; }
html[data-bp="phone"] .footer__col + .footer__col,
html[data-bp="phone"] .footer__city + .footer__col { margin-left: 0; }
html[data-bp="phone"] .footer__bottom { align-items: center; }
html[data-bp="phone"] .footer__bottom .logo { width: 145.2px; font-size: 18px; }
html[data-bp="phone"] .footer__bottom .logo svg { width: 16.2px; height: 15.4px; }
html[data-bp="phone"] .footer__top { margin-bottom: 0; }