/* About us: phone layout (loaded with media="(max-width: 760px)"). Desktop composition re-stacked into one column.
   Animation values written by page5.js are kept where they still apply. */

/* sections that become a normal vertical flow */
#ab-who, #ab-brands, #ab-cap, #ab-src, #ab-qual, #ab-team, #ab-loc { height: auto !important; }
#ab-who > div, #ab-brands > div, #ab-cap > div, #ab-src > div, #ab-qual > div, #ab-team > div, #ab-loc > div { position: relative !important; height: auto !important; }
#ab-who > div > div:last-child, #ab-cap > div > div:last-child, #ab-src > div > div:last-child, #ab-qual > div > div:last-child,
#ab-team > div > div:last-child, #ab-loc > div > div:last-child { position: relative !important; inset: auto !important; height: auto !important; padding: 96px 20px 64px !important; }

/* 1 · About us: text, logos on two rows (Masoliver / IFS + ISO), figures in two columns */
#ab-who > div > div { grid-template-columns: 1fr !important; gap: 36px !important; }
#ab-who > div > div > div:first-child > div:last-child { flex-wrap: wrap; gap: 18px 26px !important; align-items: center; }
#ab-who > div > div > div:first-child > div:last-child > img:first-child { flex: 0 0 100%; object-fit: contain; object-position: left center; }
#ab-who > div > div > div:first-child > div:last-child > span:nth-child(2) { display: none; }
#ab-who > div > div > div:last-child { width: 100% !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 20px !important; }

/* 2 · Timeline: spine on the left, every milestone card on the right (spacing set in page5.js) */
#ab-time > div > div:nth-child(1) { padding-left: 20px !important; padding-right: 20px !important; }
#ab-time > div > div:nth-child(2), #ab-time > div > div:nth-child(3) { left: 22px !important; }
#ab-time > div > div:nth-child(4) > div > span:nth-child(1) { left: 22px !important; }
#ab-time > div > div:nth-child(4) > div > span:nth-child(2) { display: none !important; }
#ab-time > div > div:nth-child(4) > div > article { left: 50px !important; right: 14px !important; width: auto !important; height: 21vh !important; top: -10.5vh !important; grid-template-columns: 0.8fr 1fr !important; }
#ab-time > div > div:nth-child(4) > div:nth-child(1) { top: 0 !important; }
#ab-time > div > div:nth-child(4) > div:nth-child(2) { top: 26vh !important; }
#ab-time > div > div:nth-child(4) > div:nth-child(3) { top: 52vh !important; }
#ab-time > div > div:nth-child(4) > div:nth-child(4) { top: 78vh !important; }
#ab-time > div > div:nth-child(4) > div:nth-child(5) { top: 104vh !important; }
#ab-time > div > div:nth-child(4) > div:nth-child(6) { top: 130vh !important; }
#ab-time > div > div:nth-child(4) > div:nth-child(7) { top: 156vh !important; }
#ab-time > div > div:nth-child(4) > div:nth-child(8) { top: 182vh !important; }
#ab-time article * { min-width: 0; }

/* 3 · Map only (no list of countries) */
#ab-map > div > div:nth-child(1) { left: 20px !important; right: 20px !important; }
#ab-map > div > div:nth-child(2) { display: none !important; }
#ab-map > div > div:nth-child(3) { left: 12px !important; right: 12px !important; top: 24vh !important; bottom: auto !important; height: 46vh !important; }

/* 4 · Our brands: bottle marquee on top, then title, subtitle and one category per row */
#ab-brands > div { padding-top: 42vh; padding-bottom: 56px; }
#ab-brands > div > div:nth-child(2) { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; grid-template-columns: 1fr !important; gap: 18px !important; padding: 0 20px; }
#ab-brands > div > div:nth-child(2) > div:first-child { margin-bottom: 10px; }
#ab-brands > div > div:nth-child(2) > div:not(:first-child) > span:last-child { font-size: 14px !important; line-height: 1.6 !important; }

/* 5 · Built to produce at scale: heading, text, then the four points stacked */
#ab-cap > div > div:last-child > div:nth-child(1) { flex-direction: column !important; gap: 18px !important; }
#ab-cap > div > div:last-child > div:nth-child(2) { grid-template-columns: 1fr !important; gap: 0 !important; }
#ab-cap > div > div:last-child > div:nth-child(2) > div { padding: 22px 0 !important; }

/* 6 · Sourcing: text, then four full-width cards with their description visible */
#ab-src > div > div:last-child { grid-template-columns: 1fr !important; gap: 30px !important; }
#ab-src > div > div:last-child > div:nth-child(2) { flex-direction: column !important; height: auto !important; gap: 14px !important; }
#ab-src > div > div:last-child > div:nth-child(2) > article { flex: none !important; height: 52vh; min-height: 340px; }
#ab-src .so-more { max-height: none !important; opacity: 1 !important; margin-top: 8px !important; }
#ab-src .so-row:hover .so-card:not(:hover) .so-img { filter: none !important; }

/* 7 · Quality & regulation: one column, one point per row */
#ab-qual > div > div:last-child > div:nth-child(1) { grid-template-columns: 1fr !important; gap: 26px !important; }
#ab-qual > div > div:last-child > div:nth-child(1) > div { width: auto !important; }
#ab-qual > div > div:last-child > div:nth-child(2) { grid-template-columns: 1fr !important; gap: 26px !important; }

/* 8 · Values over the video */
#ab-val > div > div:nth-child(3) { left: 20px !important; right: 20px !important; width: auto !important; }

/* 9 · Leadership: heading, text, then three rows of two */
#ab-team > div > div:last-child > div:nth-child(1) { flex-direction: column !important; gap: 18px !important; }
#ab-team > div > div:last-child > div:nth-child(2) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px 14px !important; }

/* 10 · Want to work with us?: title first, then text and buttons */
#ab-loc > div > div:last-child > div:nth-child(1) { grid-template-columns: 1fr !important; gap: 26px !important; }
#ab-loc > div > div:last-child > div:nth-child(1) > div:last-child > div { flex-wrap: wrap; }