/* MEAN* iPhone bundle, built by site-tools/mobile/build.py from site-tools/mobile/src */
@media (max-width: 767px){
/* menu */
/* The phone menu (OP-227; brief A3.2, PH-12): the keyboard's place always visible on the black, closed sections out of reach, and the touch areas of
   Projects, Studio, Connect and Press grown to 44 px into the space around them, so nothing drawn moves. The project names keep live's spacing
   (32 px apart, the whole Architecture list on one screen; 44 px would push its last names off a 390 x 844 screen, where the menu cannot scroll):
   a decision for Riyad. */
html.ph-new .header-nav .acc-head,html.ph-new .header-nav a.nav-link{position:relative}
html.ph-new .header-nav .acc-head::before,html.ph-new .header-nav a.nav-link::before{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px}
html.ph-new .header-nav .header-nav-list>.acc>.acc-head::before{top:-14px;bottom:0}
html.ph-new .header-nav .acc:not(.is-open)>.acc-panel>.acc-body{visibility:hidden;transition:visibility 0s linear .45s}
html.ph-new .header-nav .acc.is-open>.acc-panel>.acc-body{visibility:inherit;transition:visibility 0s}
html.ph-new .header-nav :focus-visible,html.ph-new .header .menu-btn.w--open:focus-visible{outline:2px solid var(--base-color-neutral--white,#f7f7f5)!important;outline-offset:4px}
/* The open menu's list scrolls on phones when it runs past the screen (Riyad, 29 Sep, click-through "A: The List Scrolls", on phones instead of OP-31's
   lock): only the list, from under MEAN* to 28 px above the visible foot (OP-378, 30 Sep: Pause Motion is gone, so the 76 px that kept the list clear of it
   are not held back any more). The page behind stays locked, and desktop and tablet keep the locked menu. The :not(#mm)
   pair outranks the lock's own rule */
/* the list's box starts 14 px higher with 14 px of padding inside, top and bottom, so nothing drawn moves and the touch areas of its first and last
   items are not clipped by the scroll box */
html.ph-new body .header.w-nav .header-nav.w-nav-menu:not(#mm):not(#mm2){padding-top:78.7px!important}
/* only the top list scrolls (its direct child of the panel): the project lists inside it keep live's spacing and never become scroll boxes of their own
   (reviewer, round 4) */
html.ph-new body .header.w-nav .header-nav.w-nav-menu:not(#mm):not(#mm2)>.header-nav-list{max-height:calc(100dvh - 170.7px - env(safe-area-inset-bottom,0px))!important;padding:14px 0!important;box-sizing:border-box!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* OP-377, 4 Oct (Riyad's tweak list): a category heading that follows an open list (Objects under Shell Star) read as another list item; 16 px more above it, like the heading gap above the other categories */
html.ph-new body .header.w-nav .header-nav.w-nav-menu:not(#mm) .acc-body>.acc.is-open+.acc{margin-top:16px!important}
/* OP-423 (Riyad, Freeform phone board, the menu frames), 4 Oct 2026.
   "Same padding", twice, on the header: the board's three red lines make two bands, the header row (top of the screen to the foot of the row, the close N's lower
   end at 46.5 px) and the gap under it (to the top of PROJECTS). They were 46.5 and 43.8 px; the list starts 2.7 px lower (padding-top 76 to 78.7 px above), so both are 46.5 px.
   The bottom band (the two red lines round the row that held Pause Motion and holds EN | ع): the language control (lang.js) sits in a band at the foot of the menu,
   24 px under the line where the list ends and 24 px above the foot (plus the safe area): 24 + 44 + 24 = 92 px, which the list's max-height above leaves free, so an
   open project list never pushes the control off the screen. Its left edge is on the MEAN* glyph edge (33 px), like the list text. */
html.ph-new body .header.w-nav .header-nav.w-nav-menu:not(#mm):not(#mm2)>.mean-lp-menu{position:absolute!important;left:33px!important;right:auto!important;top:calc(100dvh - 68px - env(safe-area-inset-bottom,0px))!important;margin:0!important}
/* Project names in the site's body face (they were set in Arial); names mean-lang has put into Arabic (lang=ar) keep Lyon Arabic */
html.ph-new body .header.w-nav .header-nav.w-nav-menu:not(#mm):not(#mm2) .nav-sub-link:not([lang=ar]),html.ph-new body .header.w-nav .header-nav.w-nav-menu:not(#mm):not(#mm2) .nav-sub-link:not([lang=ar]):hover{font-family:"Helvetica Neue LT Std",Arial,sans-serif!important}
/* "Make all the text larger, the same size": the project names cannot take the main items' 25 px (the longest, Yeoui-Naru Ferry Terminal 2017, would be 436 px wide), so they
   take the largest one size at which all 37 stay on one line inside the list's frame at that phone width: the frame's width divided by the longest name's width in em
   (17.43, with 1% spare): 14.3 px at 320 (they were 15 px there and two names wrapped), 18 px at 390, 20 px at 430 and wider. Line height and the 32 px row pitch stay. */
html.ph-new body .header.w-nav .header-nav.w-nav-menu:not(#mm):not(#mm2) .nav-sub-link,html.ph-new body .header.w-nav .header-nav.w-nav-menu:not(#mm):not(#mm2) .nav-sub-link:hover{font-size:min(20px,calc((100vw - 30px - var(--mm-x,48px))/17.6))!important;line-height:20px!important}
/* Phone landscape (480 to 767 px): the main items' line box is half as tall there (25/12.5), so their letters sit 6.2 px higher; the list starts 6.2 px lower to keep the two header gaps equal */
@media (min-width:480px){
html.ph-new body .header.w-nav .header-nav.w-nav-menu:not(#mm):not(#mm2){padding-top:84.9px!important}
html.ph-new body .header.w-nav .header-nav.w-nav-menu:not(#mm):not(#mm2)>.header-nav-list{max-height:calc(100dvh - 176.9px - env(safe-area-inset-bottom,0px))!important}
}

/* pages */
/* L7 other pages on phones (OP-228, MEAN Website 9). Phone only: build.py wraps this file in @media (max-width: 767px) and every selector starts with html.ph-new. */

/* 404: the sentence sits on the phone text frame, 1 of 9 columns in from each side, 43 px at 390, as every other page type (L9, OP-202); it ran
   edge to edge (8 px). The MEAN* lockup keeps live's place (5 px from the edge on live's 404 as well) and the heading and button stay centred. */
html.ph-new .utility-page-wrap .text-block-5 {
  padding-left: 11.1111%;
  padding-right: 11.1111%;
  box-sizing: border-box;
}

/* Studio's opening strip on phones shows four photos, each panned in full (OP-301's rhythm): Open Workspace, Model Display, Dubai Skyline and Studio
   At Dusk (Riyad, 28 Sep, OP-228, "C: Four Photos": the page from 22.7 to about 17 screens). The three left out repeat what those show (Desks And Prints,
   Glass Meeting Room, Desks By The Window); they are picked by their image asset ids, on Studio only. Desktop and tablet keep all seven.
   Desks By The Window is also picked by its alt text, which the Audit chat's file rename keeps (AU-42, 29 Sep: a rename gives the photo a new id). */
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .h-scrolling-track > .h-scrolling-card:has(img[src*="6ab9291f8a46b632e960638b"]),
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .h-scrolling-track > .h-scrolling-card:has(img[src*="6ab80b0fb363df8eb4109c0e"]),
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .h-scrolling-track > .h-scrolling-card:has(img[src*="69c518191056258f1a285727"]),
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .h-scrolling-track > .h-scrolling-card:has(img[alt^="Desks by the window at the MEAN* studio"]) {
  display: none !important;
}

/* project */
/* Phone project pages (MEAN PHONE SNAGS PROJECTS FINAL). Phone only: build.py wraps this file in @media (max-width: 767px) and every selector
   starts with html.ph-new. Drafted in output/phone-projects for the phone bundle as site-tools/mobile/src/project.css (build.py's ORDER already
   lists "project"). Tested by injection only; nothing here is on the site until the integrator builds and publishes it. */

/* PR-04 (OP-223, OP-226, OP-197, OP-117) facts table: one label column and one value edge on every project. Labels were 100 px wide with a 30 px
   gap, and values started at 173 px on 21 pages and 183 px on 15 (a 10 px left margin on some value blocks); "Lead Architect" (104 px of text) broke
   onto two lines on 30 of 37 pages. Labels take 116 px with a 14 px gap, so every value starts at 173 px at 390 and "Lead Architect",
   "Collaborators" and "Photos + Video" stay on one line. The table fills the text frame (it was 207 to 297 px wide on five pages, a desktop width
   left on the block). Rows keep their 8 px gap, 16/24 type and every fact. */
html.ph-new [class*="project-info-format"],
html.ph-new [class*="project-info-format"] > ol,
html.ph-new [class*="project-info-format"] > ol > li { width: 100% !important; max-width: none !important; box-sizing: border-box; }
html.ph-new [class*="project-info-category-text-block"] { flex: 0 0 116px !important; width: 116px !important; min-width: 0 !important; margin-right: 14px !important; }
html.ph-new [class*="project-info-category-text-block"] + [class*="project-info-text-block"] { flex: 1 1 0 !important; min-width: 0 !important; margin-left: 0 !important; }
/* below 360 px the frame is 249 px: labels 100 px, values 137 px */
@media (max-width: 359px) {
  html.ph-new [class*="project-info-category-text-block"] { flex-basis: 100px !important; width: 100px !important; margin-right: 12px !important; }
}

/* OP-425 (Riyad, Freeform phone board, Repeat facts: "the spacing between the elements is very big. I would make it half the size"): the gap between
   the facts rows is 4 px, half of the 8 px PR-04 kept. Type stays 16/24, so no line is squeezed; a row that is a run of links keeps its 44 px rows and a
   single link keeps its 44 px tap layer (captions.css). */
html.ph-new [class*="project-info-format"] > ol { row-gap: 4px !important; }

/* OP-426 (Riyad, Freeform phone board, Deciduous credits: "why is it squeezed like that? It should be consistent with the rest of the pages"): Deciduous
   is the one project whose info grid has 15 columns of 26 px on phones, so its facts sat 26 px from the edge in a 182 px block (values from 156 px) and its
   text in a 312 px block. Both take the text frame every other project has (one ninth of the page each side: 43 px at 390), so the facts' labels and
   values stand on the same two edges as on the other 36 pages. The grid's own template has 9 columns and 6 more are added by its items, so the span is written as lines 1 to 16 (as its
   divider already is); 1 / -1 would stop at the ninth. Scoped to the Deciduous page and to upright phones (below 480 px): turned sideways the
   other pages' frame is one thirteenth, and Deciduous keeps its own 44 px there (not in Riyad's comment, not measured against pictures). */
@media (max-width: 479.98px) {
html.ph-new[data-wf-page="69c518191056258f1a2854c9"] .info-section-grid-p11 > [class*="project-info-format"],
html.ph-new[data-wf-page="69c518191056258f1a2854c9"] .info-section-grid-p11 > p[class*="paragraph-col"] { grid-column: 1 / 16 !important; justify-self: stretch !important; width: auto !important; max-width: none !important; margin-left: 11.1111% !important; margin-right: 11.1111% !important; }
}

/* PR-05 (OP-330, OP-344) subheadings inside the project texts ("Concept", "Spatial Strategy"): every bold run in a project paragraph is a line of
   its own (133 of 133 across the 37 pages), so it takes the approved phone subtitle role, 20/26 bold, as on Home and Studio (mean-type 1.2.x). They
   were bold at the body size, 16/24. The Arabic twins take the Arabic subtitle size (20 px, Lyon Bold, 1.35). Body text stays 16/24 (held, OP-330). */
html.ph-new p[class*="paragraph-col"] strong { font-size: 20px !important; line-height: 26px !important; }
html.ph-new [lang=ar] p[class*="paragraph-col"] strong,
html.ph-new p[class*="paragraph-col"][lang=ar] strong { line-height: 1.35 !important; }

/* PR-10 (OP-182, OP-356) Deciduous: the caption "DIFC Art Nights, By Day And Night" sat under an empty block (0 px tall on every device) whose
   class is shared with Repeat and points at Repeat's Pilates GIF, so Deciduous's own Art Nights media was removed earlier. The orphan caption and
   the empty block are hidden on phones; deleting both in the Designer (desktop too) is listed for the integrator. */
html.ph-new .info-section-grid-p11 > .paragraph-3,
html.ph-new .info-section-grid-p11 > .div-block-84 { display: none !important; }
/* PR-06, PR-12 (OP-136, OP-329, OP-356), the three pages left out of the 4 Oct 03:28 release, measured by hand on 4 Oct with pictures refused (bandwidth), so
   every rule here is a fixed margin on a text block, a heading, the deck under it or the block before a heading: no value depends on a picture's or a deck's height.
   (The generator's rule for A.R.M. Majlis lifted the Design heading to the top of its area and set it back down by 616 to 728 px, the height of the pictures
   above it; that is the rule that put two headings on one line when the grid changed, OP-403. Here the pictures before that heading are given the missing 60 px instead; the other three headings keep the generator's rules, which are fixed 20 px steps.
   The Diagrams step is not needed from 410 px, where its caption is one line; the three steps stop at 480 px,
   where a phone turned sideways has another grid.)
   A.R.M. Majlis: facts to text 11 to 24; pictures to the Design rule 30 to 90; caption to the Drawings, Diagrams and Details rules 70 to 90.
   3D Printed Majlis: facts to text 46 to 24. Meandering Arcades: facts to text 1 to 24.
   NOT set on 3D Printed Majlis and Meandering Arcades: the deck gaps (heading to deck 100 against 10, caption to next deck 116 to 272 against 90): their rules
   failed with pictures loaded on 4 Oct (a caption 14 px over its slider) and cannot be checked without pictures. */
html.ph-new #w-node-c1efa974-7afa-a654-04f3-c396e0e5af72-9ef3bece:not(#_):not(#__):not(#___):not(#____){margin-top:23px!important;}
html.ph-new #w-node-d4292745-e932-374b-f6fb-ceaa610fc148-9ef3bece:not(#_):not(#__):not(#___):not(#____){margin-bottom:60px!important;}
@media (max-width: 479.98px) {
html.ph-new #w-node-_0b4b65fd-e948-ca34-c8f9-9ce719c27fef-9ef3bece:not(#_):not(#__):not(#___):not(#____){margin-top:20px!important;height:44px!important;align-self:start!important}
html.ph-new #w-node-_7bf41f51-f6ac-5539-5b59-93f00cc424d2-9ef3bece:not(#_):not(#__):not(#___):not(#____){margin-top:20px!important;}
html.ph-new #w-node-_176fced5-d5eb-7af4-707a-2d683a4c56cd-9ef3bece:not(#_):not(#__):not(#___):not(#____){margin-top:20px!important;height:59.4px!important;align-self:start!important}
}
@media (max-width: 409.98px) {
html.ph-new #w-node-e61c08c1-2894-f29a-8e90-8ebacbc433ef-9ef3bece:not(#_):not(#__):not(#___):not(#____){margin-top:20px!important;height:44px!important;align-self:start!important}
html.ph-new #w-node-e5714341-25e5-3b92-7017-ca7544252f2f-9ef3bece:not(#_):not(#__):not(#___):not(#____){margin-top:20px!important;}
}
html.ph-new #w-node-c1efa974-7afa-a654-04f3-c396e0e5af72-1a2854c1:not(#_):not(#__):not(#___):not(#____){margin-top:23px!important;}
html.ph-new #w-node-_634e0b0e-9cff-ecbf-c47b-b60f1788ea86-1a2854d4:not(#_):not(#__):not(#___):not(#____){margin-top:23px!important;}
/* PR-01 (OP-343, OP-330; Riyad, 4 Oct: keep the approved 24 px, left-aligned): the project hero title sits on the page's text frame (L9), left edge and wrap
   width, instead of centred in the fixed hero grid; type unchanged (24/24 Fugue, names kept whole by their non-breaking groups, L38). The frame is 11.1111vw
   (the facts and the text under the hero: 35.6 px at 320, 43.3 at 390, 47.8 at 430), not a fixed 43 px, which was 7.4 px inside it at 320 and 4.8 px outside at 430. */
html.ph-new .project-landing-section>:has(>h1){justify-content:start!important;justify-items:start!important;padding-left:11.1111vw!important;padding-right:11.1111vw!important;box-sizing:border-box!important}
html.ph-new .project-landing-section>:has(>h1)>h1{margin-left:0!important;margin-right:0!important;justify-self:start!important;grid-column:1/-1!important;text-align:left!important;max-width:100%!important;width:auto!important}

/* PR-06, PR-07, PR-12, PR-13 (OP-136, OP-329, OP-356, OP-182) section rhythm, generated by output/phone-projects/rhythm.mjs from published staging at 320, 390 and 430 px wide: rules measured the same at all three apply at every phone width, the rest sit in width bands.
   The standard is the one most project pages already keep on phones: 90 px from the last line to a section rule, a 10 px gap from a heading to its
   picture, 30 px from a picture to its caption, 90 px from a caption to the next picture, 24 px on both sides of the rule under the facts, and 24 px (one line of body text) from the facts to the text where no rule sits between them.
   Each rule below moves one element whose boundary measured differently (the comment gives each measured value and its target). Do not edit by hand;
   run the generator again after any change to a project page's grid. */
/* arid */
html.ph-new #w-node-c5f7245c-9f50-e24b-957e-6f43fbde6ab3-1a2854c4:not(#_):not(#__):not(#___):not(#____){margin-top:23px!important;}
/* audi-innovation-hub */
html.ph-new #w-node-_634e0b0e-9cff-ecbf-c47b-b60f1788ea86-1a2854c5:not(#_):not(#__):not(#___):not(#____){margin-top:23px!important;}
/* co-cross-machine-for-living-working-dubai */
html.ph-new #w-node-b2df6911-1bc4-f942-5b32-80f2fce1ab02-1a2854c6:not(#_):not(#__):not(#___):not(#____){margin-top:23px!important;}
html.ph-new #w-node-baa96911-9bd7-3f03-2364-040dd7c3321d-1a2854c6:not(#_):not(#__):not(#___):not(#____){align-self:start!important}
html.ph-new #w-node-daeed28f-b2a3-379f-1580-601d4ab88216-1a2854c6:not(#_):not(#__):not(#___):not(#____){margin-top:-165px!important;}
html.ph-new #w-node-_683b14cb-2919-8842-ecc8-2a3c186edc29-1a2854c6:not(#_):not(#__):not(#___):not(#____){margin-top:-131px!important;}
/* cosmos-house */
html.ph-new #w-node-_1c7d6c1f-f44a-f5ed-8137-c5dd00157410-1a2854c8:not(#_):not(#__):not(#___):not(#____){margin-top:23px!important;}
html.ph-new #w-node-_5387218f-0212-6442-64de-4f362c29678a-1a2854c8:not(#_):not(#__):not(#___):not(#____){margin-top:40px!important;height:60px!important;align-self:start!important}
html.ph-new #w-node-_5387218f-0212-6442-64de-4f362c296799-1a2854c8:not(#_):not(#__):not(#___):not(#____){margin-top:35px!important;}
html.ph-new #w-node-_5387218f-0212-6442-64de-4f362c29678c-1a2854c8:not(#_):not(#__):not(#___):not(#____){margin-top:15px!important;}
html.ph-new .photos-section-grid-p27-2:not(#_):not(#__):not(#___):not(#____){margin-top:-77px!important;}
/* deciduous-3d-printed-pavilion */
html.ph-new #w-node-_634e0b0e-9cff-ecbf-c47b-b60f1788ea8a-1a2854c9:not(#_):not(#__):not(#___):not(#____){margin-top:23px!important;}
html.ph-new #w-node-_634e0b0e-9cff-ecbf-c47b-b60f1788eaa6-1a2854c9:not(#_):not(#__):not(#___):not(#____){margin-top:-3px!important;align-self:start!important}
html.ph-new #w-node-_0627b471-92b6-ba35-9429-2ffdc087e6f2-1a2854c9:not(#_):not(#__):not(#___):not(#____){grid-row-end:3!important;}
html.ph-new #w-node-_2854dfa1-4d2f-b605-cedb-3d0c4395c3f7-1a2854c9:not(#_):not(#__):not(#___):not(#____){margin-top:-26px!important;align-self:start!important}
html.ph-new #w-node-_1d421054-ae20-9f6d-4e07-8b4700df674e-1a2854c9:not(#_):not(#__):not(#___):not(#____){margin-top:-95px!important;height:60px!important;align-self:start!important}
html.ph-new #w-node-_1d421054-ae20-9f6d-4e07-8b4700df675a-1a2854c9:not(#_):not(#__):not(#___):not(#____){grid-row-end:3!important;margin-top:-115px!important;}
html.ph-new #w-node-_060e6dfc-66db-53fe-8f20-a924b52d2a47-1a2854c9:not(#_):not(#__):not(#___):not(#____){margin-top:-231px!important;}
/* desert-pavilion-wadi-rum */
html.ph-new #w-node-b2df6911-1bc4-f942-5b32-80f2fce1ab02-1a2854ca:not(#_):not(#__):not(#___):not(#____){margin-top:-29px!important;}
html.ph-new #w-node-_0627b471-92b6-ba35-9429-2ffdc087e6f2-1a2854ca:not(#_):not(#__):not(#___):not(#____){grid-row-end:3!important;}
html.ph-new #w-node-_698438c4-9760-cc99-fa1e-0f11c477e6fa-1a2854ca:not(#_):not(#__):not(#___):not(#____){grid-row-end:8!important;margin-top:-116px!important;}
/* expo-2020-boulevard-roundabout-pavilion */
html.ph-new #w-node-b2df6911-1bc4-f942-5b32-80f2fce1ab02-1a2854cb:not(#_):not(#__):not(#___):not(#____){margin-top:23px!important;}
html.ph-new #w-node-_634e0b0e-9cff-ecbf-c47b-b60f1788eaa6-1a2854cb:not(#_):not(#__):not(#___):not(#____){margin-top:40px!important;align-self:start!important}
html.ph-new #w-node-bcdf9a7e-8f48-8efa-e51f-d3c90834ed5f-1a2854cb:not(#_):not(#__):not(#___):not(#____){margin-top:64px!important;}
/* expo-2020-oasis-uae-national-pavilion */
html.ph-new #w-node-c1efa974-7afa-a654-04f3-c396e0e5af72-1a2854cc:not(#_):not(#__):not(#___):not(#____){margin-top:23px!important;}
/* house-00-villa-for-solitude */
html.ph-new #w-node-c1efa974-7afa-a654-04f3-c396e0e5af72-1a2854cd:not(#_):not(#__):not(#___):not(#____){margin-top:23px!important;}
/* lamella-3d-printed-shading-structures */
html.ph-new #w-node-_1c7d6c1f-f44a-f5ed-8137-c5dd0015742e-1a2854ce:not(#_):not(#__):not(#___):not(#____){margin-bottom:26px!important;}
html.ph-new #w-node-_5fab2147-3218-a424-03f3-e47fbbdf7992-1a2854ce:not(#_):not(#__):not(#___):not(#____){margin-top:-30px!important;height:32.4px!important;align-self:start!important}
/* late-3d-printed-floor-lamp */
html.ph-new #w-node-c5f7245c-9f50-e24b-957e-6f43fbde6ab3-1a2854cf:not(#_):not(#__):not(#___):not(#____){margin-top:21px!important;}
html.ph-new #w-node-c5f7245c-9f50-e24b-957e-6f43fbde6ac7-1a2854cf:not(#_):not(#__):not(#___):not(#____){margin-top:39px!important;align-self:start!important}
html.ph-new #w-node-_9aa1b1c7-f1ee-46e4-8b98-634da48bd6ea-1a2854cf:not(#_):not(#__):not(#___):not(#____){margin-top:-30px!important;height:60px!important;align-self:start!important}
html.ph-new #w-node-_7f6e8930-6709-b544-1431-745f80e707dc-1a2854cf:not(#_):not(#__):not(#___):not(#____){margin-top:-50px!important;}
/* le-monde-dhermes-kiosk */
html.ph-new #w-node-_1c7d6c1f-f44a-f5ed-8137-c5dd00157410-1a2854d0:not(#_):not(#__):not(#___):not(#____){margin-top:23px!important;}
/* luminescents-pavilion */
html.ph-new #w-node-c1efa974-7afa-a654-04f3-c396e0e5af72-1a2854d1:not(#_):not(#__):not(#___):not(#____){margin-top:23px!important;}
/* mawj-3d-printed-chair */
html.ph-new #w-node-c1efa974-7afa-a654-04f3-c396e0e5af72-1a2854d2:not(#_):not(#__):not(#___):not(#____){margin-top:21px!important;}
html.ph-new #w-node-_9aa1b1c7-f1ee-46e4-8b98-634da48bd6da-1a2854d2:not(#_):not(#__):not(#___):not(#____){grid-row-end:3!important;}
html.ph-new #w-node-_7bf41f51-f6ac-5539-5b59-93f00cc424d2-1a2854d2:not(#_):not(#__):not(#___):not(#____){margin-top:-359px!important;}
html.ph-new #w-node-_580f7321-a906-e478-7cdb-bea4d720facf-1a2854d2:not(#_):not(#__):not(#___):not(#____){margin-top:-182px!important;}
/* meal-campus */
html.ph-new #w-node-_9326c40d-3c65-5455-3362-aa3dd146a48b-1a2854d3:not(#_):not(#__):not(#___):not(#____){margin-top:23px!important;}
html.ph-new #w-node-_6ba82d2a-8cde-435b-611b-e56d285fd959-1a2854d3:not(#_):not(#__):not(#___):not(#____){margin-top:39px!important;align-self:start!important}
html.ph-new #w-node-d4bac2f2-b538-08d1-a8fa-54f6c33656a1-1a2854d3:not(#_):not(#__):not(#___):not(#____){margin-top:-30px!important;height:60px!important;align-self:start!important}
html.ph-new #w-node-d4bac2f2-b538-08d1-a8fa-54f6c3365691-1a2854d3:not(#_):not(#__):not(#___):not(#____){margin-top:-50px!important;}
html.ph-new #w-node-_1d3b99d7-f9ed-a663-00aa-4278b9df6617-1a2854d3:not(#_):not(#__):not(#___):not(#____){margin-top:-2px!important;}
html.ph-new #w-node-_810d9f74-c220-7d15-1bf8-1ae081d981f3-1a2854d3:not(#_):not(#__):not(#___):not(#____){margin-top:-2px!important;}
/* members-club-fashion-incubator */
html.ph-new #w-node-_1c7d6c1f-f44a-f5ed-8137-c5dd0015742e-1a2854d5:not(#_):not(#__):not(#___):not(#____){margin-bottom:26px!important;}
html.ph-new #w-node-_5fab2147-3218-a424-03f3-e47fbbdf7992-1a2854d5:not(#_):not(#__):not(#___):not(#____){margin-top:44px!important;height:32.4px!important;align-self:start!important}
/* meta-modular-permutable-habitat */
html.ph-new #w-node-_1c7d6c1f-f44a-f5ed-8137-c5dd0015742e-1a2854d6:not(#_):not(#__):not(#___):not(#____){margin-bottom:26px!important;}
html.ph-new #w-node-_5fab2147-3218-a424-03f3-e47fbbdf7992-1a2854d6:not(#_):not(#__):not(#___):not(#____){margin-top:44px!important;height:32.4px!important;align-self:start!important}
/* modulus-3d-printed-urban-furniture */
html.ph-new #w-node-_20cd5194-56d3-ef92-a89a-9c5d7673bbeb-1a2854d7:not(#_):not(#__):not(#___):not(#____){margin-top:86px!important;align-self:start!important}
html.ph-new #w-node-_431652b0-05dc-16b7-a7e5-a37fdf0ea94d-1a2854d7:not(#_):not(#__):not(#___):not(#____){margin-top:88px!important;align-self:start!important}
html.ph-new #w-node-_9b8ac703-d662-fb42-85c1-45529d765601-1a2854d7:not(#_):not(#__):not(#___):not(#____){margin-top:-2px!important;align-self:start!important}
/* penumbra */
html.ph-new #w-node-_1c7d6c1f-f44a-f5ed-8137-c5dd0015742e-1a2854d8:not(#_):not(#__):not(#___):not(#____){margin-bottom:26px!important;}
html.ph-new #w-node-_5fab2147-3218-a424-03f3-e47fbbdf7992-1a2854d8:not(#_):not(#__):not(#___):not(#____){margin-top:-28px!important;height:32.4px!important;align-self:start!important}
html.ph-new #w-node-b7249b9e-78f3-7401-5e73-1d0d0b0d92d5-1a2854d8:not(#_):not(#__):not(#___):not(#____){margin-top:40px!important;height:102.4px!important;align-self:start!important}
/* repeat-wellness-club */
html.ph-new #w-node-c1efa974-7afa-a654-04f3-c396e0e5af72-1a28553d:not(#_):not(#__):not(#___):not(#____){margin-top:23px!important;}
html.ph-new #w-node-c5f7245c-9f50-e24b-957e-6f43fbde6ac7-1a28553d:not(#_):not(#__):not(#___):not(#____){display:none!important}
html.ph-new #w-node-a06ca6de-af82-65c9-3216-dd0d287f6dbb-1a28553d:not(#_):not(#__):not(#___):not(#____){margin-top:64px!important;height:60px!important;align-self:start!important}
html.ph-new #w-node-_9aa1b1c7-f1ee-46e4-8b98-634da48bd6da-1a28553d:not(#_):not(#__):not(#___):not(#____){margin-top:44px!important;}
html.ph-new #w-node-_297ff774-8da7-6408-5070-d65a18abb17e-1a28553d:not(#_):not(#__):not(#___):not(#____){margin-top:46px!important;align-self:start!important}
/* sabeel-water-fountain-expo-2020 */
html.ph-new #w-node-_634e0b0e-9cff-ecbf-c47b-b60f1788ea86-1a2854dc:not(#_):not(#__):not(#___):not(#____){margin-top:23px!important;}
html.ph-new #w-node-_0627b471-92b6-ba35-9429-2ffdc087e6f2-1a2854dc:not(#_):not(#__):not(#___):not(#____){grid-row-end:3!important;}
html.ph-new #w-node-_1fccd7ea-b507-bac5-6690-7746b1a36b2f-1a2854dc:not(#_):not(#__):not(#___):not(#____){grid-row-end:8!important;margin-top:-206px!important;}
html.ph-new #w-node-ed27c50c-14e3-c57b-5998-2f30dda0bd43-1a2854dc:not(#_):not(#__):not(#___):not(#____){margin-top:-412px!important;}
html.ph-new #w-node-e05aa52b-e0d9-00cc-faa6-22328b795a27-1a2854dc:not(#_):not(#__):not(#___):not(#____){margin-top:-26px!important;}
html.ph-new #w-node-a54bb509-1128-47c8-ea60-4af293b803bf-1a2854dc:not(#_):not(#__):not(#___):not(#____){margin-top:-26px!important;}
/* sadaf-rta-3d-printed-bus-stop */
html.ph-new #w-node-_431652b0-05dc-16b7-a7e5-a37fdf0ea94d-1a2854dd:not(#_):not(#__):not(#___):not(#____){margin-top:-2px!important;align-self:start!important}
/* send-location-store */
html.ph-new #w-node-_2ec0975e-b42d-0c48-5fa2-021696bad887-1a28553c:not(#_):not(#__):not(#___):not(#____){margin-top:23px!important;}
html.ph-new #w-node-_106e069b-2a0a-97a6-3931-85fe9c0dd7c6-1a28553c:not(#_):not(#__):not(#___):not(#____){margin-top:112px!important;align-self:start!important}
/* shell-star */
html.ph-new #w-node-_1b30ba24-e053-760e-4972-68d4bf875fa3-1a2854df:not(#_):not(#__):not(#___):not(#____){margin-top:81px!important;align-self:start!important}
html.ph-new #w-node-_5d1eecdb-e961-7f27-a0ed-918e80f478cd-1a2854df:not(#_):not(#__):not(#___):not(#____){margin-top:12px!important;height:60px!important;align-self:start!important}
html.ph-new #w-node-c42c0d24-95aa-74d0-a210-68cc47e00655-1a2854df:not(#_):not(#__):not(#___):not(#____){grid-row-end:3!important;margin-top:-8px!important;}
/* the-migrant-kitchen */
html.ph-new #w-node-c1efa974-7afa-a654-04f3-c396e0e5af72-1a2854e1:not(#_):not(#__):not(#___):not(#____){margin-top:23px!important;}
/* the-un-square-murals */
html.ph-new #w-node-c1efa974-7afa-a654-04f3-c396e0e5af72-1a2854e2:not(#_):not(#__):not(#___):not(#____){margin-top:21px!important;}
html.ph-new #w-node-_9aa1b1c7-f1ee-46e4-8b98-634da48bd6da-1a2854e2:not(#_):not(#__):not(#___):not(#____){grid-row-end:3!important;}
/* tutuncka-3d-printed-lamp */
html.ph-new #w-node-_1b30ba24-e053-760e-4972-68d4bf875fa3-1a2854e3:not(#_):not(#__):not(#___):not(#____){margin-top:33px!important;align-self:start!important}
html.ph-new #w-node-_5d1eecdb-e961-7f27-a0ed-918e80f478cd-1a2854e3:not(#_):not(#__):not(#___):not(#____){margin-top:-36px!important;height:60px!important;align-self:start!important}
html.ph-new #w-node-_4d82c101-fe49-dbe5-d0ca-5395616b9e4c-1a2854e3:not(#_):not(#__):not(#___):not(#____){margin-top:-38px!important;}
/* uncanny-valley-blue-clay-country-spa */
html.ph-new #w-node-cf80f075-3b9e-c89d-bd38-5a1960d3b02b-1a2854e4:not(#_):not(#__):not(#___):not(#____){grid-row-end:3!important;}
html.ph-new #w-node-_1cdea3de-811f-deaa-04e7-a6c4a690ece5-1a2854e4:not(#_):not(#__):not(#___):not(#____){grid-row-end:8!important;margin-top:-116px!important;}
/* university-of-sharjah-innovation-hub */
html.ph-new #w-node-_824b0b70-fa5b-bc56-2638-77567a8415bd-1a2854e5:not(#_):not(#__):not(#___):not(#____){margin-top:-40px!important;align-self:start!important}
html.ph-new #w-node-_5fab2147-3218-a424-03f3-e47fbbdf7992-1a2854e5:not(#_):not(#__):not(#___):not(#____){margin-top:-109px!important;height:32.4px!important;align-self:start!important}
html.ph-new #w-node-a88d5ea4-cd38-5af0-3584-3ced69adf750-1a2854e5:not(#_):not(#__):not(#___):not(#____){margin-top:-129px!important;}
html.ph-new #w-node-_93ebd17f-12a1-e57f-35b1-b65f14fb1530-1a2854e5:not(#_):not(#__):not(#___):not(#____){margin-top:-129px!important;}
html.ph-new #w-node-_0e0cbd8e-15d4-3436-7324-4e28f9a63369-1a2854e5:not(#_):not(#__):not(#___):not(#____){margin-top:-45px!important;height:32.4px!important;align-self:start!important}
/* urbani-balkoni-zagreb-observation-tower */
html.ph-new #w-node-_8c37ae68-b040-aaed-4c9f-3e2780b6581e-1a2854e6:not(#_):not(#__):not(#___):not(#____){margin-top:-15px!important;align-self:start!important}
html.ph-new #w-node-_9a1857e1-13a0-b540-9431-83aa0b137c2c-1a2854e6:not(#_):not(#__):not(#___):not(#____){margin-top:6px!important;height:60px!important;align-self:start!important}
html.ph-new #w-node-ce876f03-2a29-5e61-e2b6-982633cd5c79-1a2854e6:not(#_):not(#__):not(#___):not(#____){margin-top:-14px!important;}
/* voxel */
html.ph-new #w-node-_1c7d6c1f-f44a-f5ed-8137-c5dd0015742e-1a2854e7:not(#_):not(#__):not(#___):not(#____){margin-bottom:26px!important;}
/* wormhole */
html.ph-new #w-node-_1c7d6c1f-f44a-f5ed-8137-c5dd0015742e-1a2854e9:not(#_):not(#__):not(#___):not(#____){margin-bottom:26px!important;}
html.ph-new #w-node-_1c7d6c1f-f44a-f5ed-8137-c5dd00157410-1a2854e9:not(#_):not(#__):not(#___):not(#____){margin-top:21px!important;}
html.ph-new #w-node-_5fab2147-3218-a424-03f3-e47fbbdf7992-1a2854e9:not(#_):not(#__):not(#___):not(#____){margin-top:-71px!important;height:60px!important;align-self:start!important}
html.ph-new #w-node-_5fab2147-3218-a424-03f3-e47fbbdf7994-1a2854e9:not(#_):not(#__):not(#___):not(#____){margin-top:-176px!important;}
html.ph-new #w-node-_4f91a312-acb9-38c7-1a56-b3d80d66e8c4-1a2854e9:not(#_):not(#__):not(#___):not(#____){margin-top:-175px!important;}
html.ph-new .design-section-grid-p29c:not(#_):not(#__):not(#___):not(#____){margin-top:-180px!important;}
/* yeoui-naru-ferry-terminal */
html.ph-new #w-node-_8c37ae68-b040-aaed-4c9f-3e2780b6581e-1a285517:not(#_):not(#__):not(#___):not(#____){margin-top:81px!important;align-self:start!important}
html.ph-new #w-node-_9a1857e1-13a0-b540-9431-83aa0b137c2c-1a285517:not(#_):not(#__):not(#___):not(#____){margin-top:12px!important;height:60px!important;align-self:start!important}
html.ph-new #w-node-_9a1857e1-13a0-b540-9431-83aa0b137c1c-1a285517:not(#_):not(#__):not(#___):not(#____){margin-top:-8px!important;}
html.ph-new #w-node-e76784ba-56f4-dc2d-9ba6-186539c8fd01-1a285517:not(#_):not(#__):not(#___):not(#____){margin-top:-15px!important;}
html.ph-new #w-node-ce876f03-2a29-5e61-e2b6-982633cd5c79-1a285517:not(#_):not(#__):not(#___):not(#____){margin-top:-10px!important;}
@media (max-width: 374.98px) {
/* cosmos-house */
html.ph-new .model-section-grid-p28:not(#_):not(#__):not(#___):not(#____){margin-top:-92px!important;}
/* expo-2020-boulevard-roundabout-pavilion */
html.ph-new #w-node-_698438c4-9760-cc99-fa1e-0f11c477e6fa-1a2854cb:not(#_):not(#__):not(#___):not(#____){margin-top:158px!important;}
html.ph-new #w-node-_8d6c62dc-217b-8e8e-0933-8704e3d6109d-1a2854cb:not(#_):not(#__):not(#___):not(#____){margin-top:109px!important;}
/* house-00-villa-for-solitude */
html.ph-new #w-node-_9aa1b1c7-f1ee-46e4-8b98-634da48bd6d9-1a2854cd:not(#_):not(#__):not(#___):not(#____){margin-top:-8px!important;}
/* meal-campus */
html.ph-new #w-node-_456c51f4-9671-10b8-da5b-f8bf51a97830-1a2854d3:not(#_):not(#__):not(#___):not(#____){margin-top:-2px!important;}
/* shell-star */
html.ph-new #w-node-_5d1eecdb-e961-7f27-a0ed-918e80f478bd-1a2854df:not(#_):not(#__):not(#___):not(#____){grid-row-end:8!important;margin-top:-376px!important;}
html.ph-new #w-node-_5d1eecdb-e961-7f27-a0ed-918e80f478bc-1a2854df:not(#_):not(#__):not(#___):not(#____){margin-top:-370px!important;}
/* the-un-square-murals */
html.ph-new #w-node-_8b276529-30c8-65d2-cf81-524682c47e3e-1a2854e2:not(#_):not(#__):not(#___):not(#____){grid-row-end:8!important;margin-top:-98px!important;}
html.ph-new #w-node-_7a3099bb-5376-91ec-4d42-45eeed6b1112-1a2854e2:not(#_):not(#__):not(#___):not(#____){margin-top:-214px!important;}
/* tutuncka-3d-printed-lamp */
html.ph-new #w-node-_312c06e8-fdf7-9904-e5fd-1acea7419cab-1a2854e3:not(#_):not(#__):not(#___):not(#____){margin-top:-105px!important;}
html.ph-new #w-node-_7b1e34bc-2be4-ab2b-f507-d42bc986ced6-1a2854e3:not(#_):not(#__):not(#___):not(#____){margin-top:-55px!important;}
html.ph-new #w-node-_5d1eecdb-e961-7f27-a0ed-918e80f478bd-1a2854e3:not(#_):not(#__):not(#___):not(#____){margin-top:-72px!important;}
html.ph-new #w-node-c42c0d24-95aa-74d0-a210-68cc47e00655-1a2854e3:not(#_):not(#__):not(#___):not(#____){margin-top:-72px!important;}
html.ph-new #w-node-_5d1eecdb-e961-7f27-a0ed-918e80f478bc-1a2854e3:not(#_):not(#__):not(#___):not(#____){margin-top:-38px!important;}
/* uncanny-valley-blue-clay-country-spa */
html.ph-new #w-node-f3b67da9-c911-0300-03da-be25097df702-1a2854e4:not(#_):not(#__):not(#___):not(#____){margin-top:-214px!important;}
}
@media (min-width: 375px) and (max-width: 409.98px) {
/* cosmos-house */
html.ph-new .model-section-grid-p28:not(#_):not(#__):not(#___):not(#____){margin-top:-92px!important;}
/* expo-2020-boulevard-roundabout-pavilion */
html.ph-new #w-node-_698438c4-9760-cc99-fa1e-0f11c477e6fa-1a2854cb:not(#_):not(#__):not(#___):not(#____){margin-top:124px!important;}
html.ph-new #w-node-_8d6c62dc-217b-8e8e-0933-8704e3d6109d-1a2854cb:not(#_):not(#__):not(#___):not(#____){margin-top:92px!important;}
/* house-00-villa-for-solitude */
html.ph-new #w-node-_9aa1b1c7-f1ee-46e4-8b98-634da48bd6d9-1a2854cd:not(#_):not(#__):not(#___):not(#____){margin-top:-26px!important;}
/* meal-campus */
html.ph-new #w-node-_456c51f4-9671-10b8-da5b-f8bf51a97830-1a2854d3:not(#_):not(#__):not(#___):not(#____){margin-top:-4px!important;}
/* shell-star */
html.ph-new #w-node-_5d1eecdb-e961-7f27-a0ed-918e80f478bd-1a2854df:not(#_):not(#__):not(#___):not(#____){grid-row-end:8!important;margin-top:-376px!important;}
html.ph-new #w-node-_5d1eecdb-e961-7f27-a0ed-918e80f478bc-1a2854df:not(#_):not(#__):not(#___):not(#____){margin-top:-370px!important;}
/* the-un-square-murals */
html.ph-new #w-node-_8b276529-30c8-65d2-cf81-524682c47e3e-1a2854e2:not(#_):not(#__):not(#___):not(#____){grid-row-end:8!important;margin-top:-116px!important;}
html.ph-new #w-node-_7a3099bb-5376-91ec-4d42-45eeed6b1112-1a2854e2:not(#_):not(#__):not(#___):not(#____){margin-top:-232px!important;}
/* tutuncka-3d-printed-lamp */
html.ph-new #w-node-_312c06e8-fdf7-9904-e5fd-1acea7419cab-1a2854e3:not(#_):not(#__):not(#___):not(#____){margin-top:-105px!important;}
html.ph-new #w-node-_7b1e34bc-2be4-ab2b-f507-d42bc986ced6-1a2854e3:not(#_):not(#__):not(#___):not(#____){margin-top:-55px!important;}
html.ph-new #w-node-_5d1eecdb-e961-7f27-a0ed-918e80f478bd-1a2854e3:not(#_):not(#__):not(#___):not(#____){margin-top:-72px!important;}
html.ph-new #w-node-c42c0d24-95aa-74d0-a210-68cc47e00655-1a2854e3:not(#_):not(#__):not(#___):not(#____){margin-top:-38px!important;}
html.ph-new #w-node-_5d1eecdb-e961-7f27-a0ed-918e80f478bc-1a2854e3:not(#_):not(#__):not(#___):not(#____){margin-top:-40px!important;}
/* uncanny-valley-blue-clay-country-spa */
html.ph-new #w-node-f3b67da9-c911-0300-03da-be25097df702-1a2854e4:not(#_):not(#__):not(#___):not(#____){margin-top:-232px!important;}
}
@media (min-width: 410px) {
/* cosmos-house */
html.ph-new #w-node-_47b2f13c-68bc-5d98-914e-adcd44591ad1-1a2854c8:not(#_):not(#__):not(#___):not(#____){margin-top:-92px!important;}
html.ph-new #w-node-_8ac1fc2c-2b4a-28e1-c12c-08fb44657f8c-1a2854c8:not(#_):not(#__):not(#___):not(#____){margin-top:-24px!important;height:60px!important;align-self:start!important}
html.ph-new #w-node-_8ac1fc2c-2b4a-28e1-c12c-08fb44657f8e-1a2854c8:not(#_):not(#__):not(#___):not(#____){margin-top:-44px!important;}
/* expo-2020-boulevard-roundabout-pavilion */
html.ph-new #w-node-_698438c4-9760-cc99-fa1e-0f11c477e6fa-1a2854cb:not(#_):not(#__):not(#___):not(#____){margin-top:64px!important;}
html.ph-new #w-node-_8d6c62dc-217b-8e8e-0933-8704e3d6109d-1a2854cb:not(#_):not(#__):not(#___):not(#____){margin-top:94px!important;}
/* house-00-villa-for-solitude */
html.ph-new #w-node-_9aa1b1c7-f1ee-46e4-8b98-634da48bd6d9-1a2854cd:not(#_):not(#__):not(#___):not(#____){margin-top:-26px!important;}
/* meal-campus */
html.ph-new #w-node-_456c51f4-9671-10b8-da5b-f8bf51a97830-1a2854d3:not(#_):not(#__):not(#___):not(#____){margin-top:-4px!important;}
/* shell-star */
html.ph-new #w-node-_5d1eecdb-e961-7f27-a0ed-918e80f478bd-1a2854df:not(#_):not(#__):not(#___):not(#____){grid-row-end:8!important;margin-top:-124px!important;}
html.ph-new #w-node-_5d1eecdb-e961-7f27-a0ed-918e80f478bc-1a2854df:not(#_):not(#__):not(#___):not(#____){margin-top:-134px!important;}
/* the-un-square-murals */
html.ph-new #w-node-_8b276529-30c8-65d2-cf81-524682c47e3e-1a2854e2:not(#_):not(#__):not(#___):not(#____){grid-row-end:8!important;margin-top:-116px!important;}
html.ph-new #w-node-_7a3099bb-5376-91ec-4d42-45eeed6b1112-1a2854e2:not(#_):not(#__):not(#___):not(#____){margin-top:-232px!important;}
/* tutuncka-3d-printed-lamp */
html.ph-new #w-node-_312c06e8-fdf7-9904-e5fd-1acea7419cab-1a2854e3:not(#_):not(#__):not(#___):not(#____){margin-top:-56px!important;}
/* uncanny-valley-blue-clay-country-spa */
html.ph-new #w-node-f3b67da9-c911-0300-03da-be25097df702-1a2854e4:not(#_):not(#__):not(#___):not(#____){margin-top:-232px!important;}
}

/* board */
/* OP-222 (Riyad's D5, 28 Sep: "shouldnt we have the moodboard? but an iphone adaptation with my strict rules applied?"; from the mock he picked "Develop, no drift").
   The phone board keeps its approved rows of two (L36, OP-292: each pair at one height, every photo in its own proportions, L23) and takes the desktop
   board's depth (L35). The site's card reveal (a 40 px fade-up per card) gives way to the board's own: a row develops out of the white, from a little
   deeper to its place, the way the page itself came out of Audi's white interior ("the building becomes the page"; L33, no fade or wipe), both photos
   of a row together so it stays level (board.js). A photo dimmed by a marquee filter keeps its dimming. */
html.ph-new .projects-cms-list .projects-cms-item:not(.is-dimmed){opacity:1!important;transform:none!important}
html.ph-new .projects-cms-list .projects-cms-item .project-item.bd-pre{transform:translateY(var(--bd-y,40px)) scale(.94);filter:brightness(5) saturate(0)}
html.ph-new .projects-cms-list .projects-cms-item .project-item.bd-in{transform:none;filter:none;transition:transform .9s cubic-bezier(.2,0,0,1),filter 1.3s cubic-bezier(.2,0,0,1)}
/* B (the phone board since Riyad picked it on 29 Sep; A only with ?board=a): the board as a composed field, every photo placed by board.js (left, top, width per photo); the rows of two's flex layout gives way */
html.ph-new.ph-board-b .projects-cms-list{display:block!important;position:relative!important}
html.ph-new.ph-board-b .projects-cms-list>.projects-cms-item{position:absolute!important;margin:0!important;flex:none!important}
/* The category marquee (board.js categories): while a category is chosen, B shows only its projects (A keeps the desktop's dimming), the board
   whites out in .25 s before it is laid out again and develops, and a line over the board names the category in the marquee's own Fugue and
   size, with "All Projects" in plain words under it (L3 mock for Riyad, 29 Sep; no outlined box, his words). The board and the line both stand 24 px lower than the
   words above them, so either can land 24 px under the header with those words out of it (L20); the margins between them collapse to 40 px */
html.ph-new.ph-board-b.ph-filter .projects-cms-list>.projects-cms-item.is-dimmed{display:none!important}
html.ph-new .projects-cms-list .projects-cms-item .project-item.bd-out{filter:brightness(5) saturate(0);transition:filter .25s ease-in}
html.ph-new.ph-board-b .projects-cms-list{margin-top:24px!important}
html.ph-new .ph-cat{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:24px 0 40px}
html.ph-new .ph-cat[hidden]{display:none}
html.ph-new .ph-cat-n{margin:0;font-family:Fugue,sans-serif;font-weight:400;font-size:28px;line-height:1.1;color:var(--base-color-neutral--black,#181818)}
html.ph-new .ph-cat-all{min-height:44px;margin:0;padding:0;border:0;border-radius:0;background:none;font-family:Fugue,sans-serif;font-weight:400;font-size:20px;line-height:44px;color:var(--base-color-brand--blue,#0f0e9f);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:8px;transition:text-decoration-color .3s}
html.ph-new .ph-cat-all:hover,html.ph-new .ph-cat-all:focus-visible{text-decoration-color:currentColor}   /* plain words, no outlined box (Riyad, 29 Sep); underlined as the chosen marquee word is */
html.ph-new .ph-cat-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* HOME-11 (Riyad, 30 Sep, Freeform: "Images should have a small caption underneath for the title of every project In the bottom right corner"): every photo
   carries its project's title under it, ending at the photo's lower right corner, in the caption size (12/18), plain words on the page ground (no outline,
   no box); the place, status and year stay in the page for screen readers and on the project page. The link covers the photo and the caption (one tap opens). */
html.ph-new.ph-board-b .projects-cms-list>.projects-cms-item,html.ph-new.ph-board-b .projects-cms-list .projects-cms-item .project-item,html.ph-new.ph-board-b .projects-cms-list .projects-cms-item .project-item-link{overflow:visible!important}
html.ph-new.ph-board-b .projects-cms-list .projects-cms-item .project-item{position:relative!important;display:block!important;width:100%!important;height:auto!important}
html.ph-new.ph-board-b .projects-cms-list .projects-cms-item .project-item-info{display:block!important;position:static!important;width:auto!important;height:auto!important;max-height:none!important;margin:0!important;padding:4px 0 0!important;background:none!important;opacity:1!important;visibility:visible!important;transform:none!important;overflow:visible!important}
html.ph-new.ph-board-b .projects-cms-list .projects-cms-item .project-item-title{display:block!important;width:fit-content!important;max-width:100%!important;margin:0 0 0 auto!important;padding:0!important;font-size:12px!important;line-height:18px!important;letter-spacing:0!important;text-align:right!important;color:var(--base-color-neutral--black,#181818)!important;-webkit-text-stroke:0!important;text-shadow:none!important;opacity:1!important;transform:none!important}
html.ph-new.ph-board-b .projects-cms-list .projects-cms-item .project-item-info>:not(.project-item-title){position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
html.ph-new.ph-board-b .projects-cms-list .projects-cms-item .project-item-link{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;z-index:2}

/* journey */
/* The iPhone Home journey (OP-220): the video stage sits behind the page from the hero on, in place of the hero's reel (Riyad, 28 Sep, F10: "this whole video
   should start from the first hero"). The journey's sections let it show. Words over it are plain letters in the page's colours, no outline (L39, Riyad,
   28 Sep: "Do not use the outline on text when it's on top of a video"), and no box, band, blur, glow or shadow; the menu has no halo (F10: "never have
   that drop shadow halo for the nav bar"). Colours are the brand variables (L8). */
html.ph-new .ph-jr-stage{display:block!important;position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:0;pointer-events:none;visibility:hidden;background:var(--base-color-neutral--black,#181818);overflow:hidden}
html.ph-new.ph-jr .ph-jr-stage{visibility:visible}
html.ph-new .ph-jr-v{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;visibility:hidden;transform-origin:50% 50%}
html.ph-new .ph-jr-v.on{visibility:inherit}
/* the walk dims behind words (Riyad, 28 Sep, click-through "A: Walk Dims Behind Words"; L39): one layer over the whole walk, never a band; #181818
   behind off-white words, #f7f7f5 behind black words, at the strength each walk needs for 4.5:1 body text (journey.data.json veil; journey.js sets its
   colour and strength, 70% of it for large words only, one mid grey at a cut) */
html.ph-new .ph-jr-shade{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--base-color-neutral--black,#181818);opacity:0}
html.ph-new.ph-jr-dark .ph-jr-shade{background:var(--base-color-neutral--white,#f7f7f5)}
html.ph-new .ph-jr-wh{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--base-color-neutral--white,#f7f7f5);opacity:0}
/* the hero's darkening layer (#181818 at 25%, blended as overlay), moved onto the stage so it eases out with the hero instead of sliding up as a box */
html.ph-new .ph-jr-ov{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--base-color-neutral--black,#181818);mix-blend-mode:overlay;opacity:0}
html.ph-new.ph-jr-ready .hero-section.is-home .hero-section-bg-overlay{visibility:hidden!important}
/* the hero: no reel and no ground of its own; it scrolls away over the journey instead of staying pinned under the page */
html.ph-new.ph-jr-on .hero-section.is-home video.hero-section-bg-video{display:none!important}
html.ph-new.ph-jr-ready .hero-section.is-home{position:relative!important}
html.ph-new.ph-jr .hero-section.is-home,html.ph-new.ph-jr .hero-section.is-home .hero-section-bg{background:transparent!important}
html.ph-new.ph-jr .mean-ground{opacity:0!important}
html.ph-new.ph-jr .main-wrapper>.ph-jr-sec{background-color:transparent!important;position:relative;z-index:0}
html.ph-new.ph-jr .main-wrapper>.ph-jr-sec.is-off-ground>*{opacity:1!important}
/* one text frame (L9: 43 px at 390, 11.11% of the width, as the project pages and OP-202): the slogan, About and Selected Work sat at 16, 59 and 34 px,
   three different blocks; over the journey they read as one column (F10: "text standards should follow MEAN standards as designed on phone through this page") */
html.ph-new.ph-jr-ready .ph-jr-sec .section-wrapper{max-width:none!important;width:100%!important;margin-left:0!important;margin-right:0!important;padding-left:calc(11.1111vw - 16px)!important;padding-right:calc(11.1111vw - 16px)!important;box-sizing:border-box!important;justify-self:stretch!important;align-self:stretch!important}
html.ph-new.ph-jr-ready .ph-jr-sec .section-wrapper>h1,html.ph-new.ph-jr-ready .ph-jr-sec .section-wrapper>h2,html.ph-new.ph-jr-ready .ph-jr-sec .section-wrapper>p{max-width:none!important;margin-left:0!important;margin-right:0!important}
/* the words over the walk are bigger and bolder instead of an overlay (Riyad, 29 Sep: "If the text was bigger and bolder, then there's no need for that,
   so maybe we use slogans for little text"; spec from Website 1, the font chat): the paragraphs in the slogan style, Helvetica Neue Bold 700 at 20/26,
   normal tracking (bold from 18.66 px reads as large text, 3:1), the Arabic in Lyon Arabic Text Bold at 20 px on 27 px lines; one line (26 px) from a
   heading to its text; the headings themselves (36/36) come from mean-type 1.2.0 */
html.ph-new.ph-jr-ready .ph-jr-sec .section-wrapper>p:not([lang=ar]):not(#j1):not(#j2):not(#j3){font-family:'Helvetica Neue LT Std',Arial,sans-serif!important;font-weight:700!important;font-size:20px!important;line-height:26px!important;letter-spacing:normal!important}
html.ph-new.ph-jr-ready .ph-jr-sec .section-wrapper>p[lang=ar]:not(#j1):not(#j2):not(#j3):not(#j4):not(#j5):not(#j6):not(#j7):not(#j8):not(#j9):not(#j10):not(#j11){font-weight:700!important;font-size:20px!important;line-height:27px!important}
html.ph-new.ph-jr-ready .ph-jr-sec .section-wrapper:not(#j1):not(#j2):not(#j3){row-gap:26px!important;gap:26px!important}
/* words over the journey: plain letters, no outline (L39, Riyad, 28 Sep: "Do not use the outline on text when it's on top of a video"): off-white over
   Repeat and Send Location, black over the bright Migrant Kitchen and Audi */
html.ph-new.ph-jr .ph-jr-t,html.ph-new.ph-jr .ph-jr-sec .mean-lang-b:not(:hover),html.ph-new.ph-jr:not(.ph-jr-white) .ph-jr-s3 .marquee *,html.ph-new.ph-jr:not(.ph-jr-white) .header:not(:has(.w--open)) .header-brand{color:var(--base-color-neutral--white,#f7f7f5)!important;text-shadow:none!important}
html.ph-new.ph-jr.ph-jr-dark .ph-jr-t,html.ph-new.ph-jr.ph-jr-dark .ph-jr-sec .mean-lang-b:not(:hover),html.ph-new.ph-jr.ph-jr-dark:not(.ph-jr-white) .ph-jr-s3 .marquee *,html.ph-new.ph-jr.ph-jr-dark:not(.ph-jr-white) .header:not(:has(.w--open)) .header-brand{color:var(--base-color-neutral--black,#181818)!important}
/* words and menu lines take their tone at the cut itself, with no fade through grey (L33) */
html.ph-new.ph-jr .ph-jr-t,html.ph-new.ph-jr .menu-btn .menu-line{transition:none!important}
html.ph-new.ph-jr.ph-jr-white .ph-jr-s3 .ph-jr-t{color:var(--base-color-brand--blue,#0f0e9f)!important}
html.ph-new.ph-jr body .header:not(#_) .header-container,html.ph-new.ph-jr body .header.mb-bar:not(#_){background-color:transparent!important}
html.ph-new.ph-jr body .header:not(#_) .header-container::before{background:transparent!important}
/* over the journey the header is only the hamburger, as over the hero (Riyad, 24 Sep): with no bar behind it, MEAN* coming back on a scroll up would sit
   on the words (L20) */
html.ph-new.ph-jr body .header:not(:has(.w--open)) .header-brand,html.ph-new.ph-jr body .header:not(:has(.w--open)) .mb-brand,html.ph-new.ph-jr-up body .header:not(:has(.w--open)) .header-brand,html.ph-new.ph-jr-up body .header:not(:has(.w--open)) .mb-brand{opacity:0!important;transform:translateY(-160%)!important}
/* on the way up from the board the header already takes the journey's form while the rows bleach (ph-jr-up), and MEAN* and the bar leave with the
   header's own 0.25 s hide (meanlazybg2), never at once (reviewer, round 4; L30) */
html.ph-new.ph-jr-up body .header:not(#_) .header-container,html.ph-new.ph-jr-up body .header.mb-bar:not(#_){background-color:transparent!important}
html.ph-new.ph-jr-up body .header:not(#_) .header-container::before{background:transparent!important}
html.ph-new.ph-jr:not(.ph-jr-white) .header:not(:has(.w--open)) .menu-btn .menu-line{background-color:var(--base-color-neutral--white,#f7f7f5)!important;box-shadow:none!important}
html.ph-new.ph-jr.ph-jr-dark:not(.ph-jr-white) .header:not(:has(.w--open)) .menu-btn .menu-line{background-color:var(--base-color-neutral--black,#181818)!important;box-shadow:none!important}
/* the projects marquee over the journey: no ground, no end bars, no glow (Webflow gives it a white box-shadow) */
html.ph-new.ph-jr .ph-jr-s3 .marquee{background-color:transparent!important}
/* and never Webflow's white glow (#fff, which the brand never uses): after the white-out it drew a faint band under the hamburger */
html.ph-new .ph-jr-s3 .marquee{box-shadow:none!important}
html.ph-new.ph-jr .ph-jr-s3 .marquee::before,html.ph-new.ph-jr .ph-jr-s3 .marquee::after{display:none!important}
html.ph-new.ph-jr .ph-jr-s3 .projects-cms{visibility:hidden}
/* back up from the board, its rows bleach back into the white before the white lifts (journey.js, ph-jr-up): the board's develop, reversed */
html.ph-new.ph-jr-up .projects-cms-list .projects-cms-item .project-item{filter:brightness(5) saturate(0)!important;transition:filter .45s cubic-bezier(.4,0,1,1)!important}
html.ph-new.ph-jr-up .projects-cms-list .projects-cms-item .project-item *{color:var(--base-color-neutral--white,#f7f7f5)!important;transition:color .45s cubic-bezier(.4,0,1,1)!important}
/* About in two (Riyad, 28 Sep, F2): its last paragraph alone on the next screen, over The Migrant Kitchen */
html.ph-new.ph-jr-ready .ph-jr-gap{display:block!important;flex:none;height:62vh}
html.ph-new.ph-jr-ready .ph-jr-gap.is-after{height:50vh}

/* HOME-08 (Riyad, 30 Sep, Freeform screens 6-7): the category marquee's POSITION is pinned on the hamburger's own row, its words stay scroll-driven (marquee.js). The strip
   is 52 px tall at the top of the screen, so the words' 44 px tap boxes centre on the hamburger's lines (26 px down); it waits hidden until "Selected Work" has reached its
   hold (marquee.js adds .ph-mq-on), then its words open leftwards from the mask beside the hamburger (the row is wider than the screen, so the mask is measured from the screen's edge); the mask ends the words 24 px before the hamburger's lines (L20), so no
   word runs under the menu button. It stays through the board: the sticky box is the Selected Work section, which ends with the board. Over the journey's photo it has no
   ground (above); once the page is white it takes the page ground, so the board's photos pass behind it and never under the words. Reduced motion: no opening, it is on or off. */
html.ph-new.ph-home .marquee.is-projects[wb-data="marquee"]{position:sticky!important;top:0!important;height:52px!important;min-height:0!important;padding-top:10px!important;box-sizing:border-box!important;padding-bottom:0!important;align-items:center!important;visibility:hidden;transition:visibility 0s .35s}
html.ph-new.ph-home .marquee.is-projects[wb-data="marquee"] .marquee-row{clip-path:inset(0 calc(100% - 100vw + 86px) 0 calc(100vw - 86px));transition:clip-path .35s cubic-bezier(.22,.61,.36,1)}
html.ph-new.ph-home .marquee.is-projects[wb-data="marquee"].ph-mq-on{visibility:visible;transition:visibility 0s}
html.ph-new.ph-home .marquee.is-projects[wb-data="marquee"].ph-mq-on .marquee-row{clip-path:inset(0 calc(100% - 100vw + 79px) 0 0)}
html.ph-new.ph-home:not(.ph-jr) .marquee.is-projects[wb-data="marquee"].ph-mq-on{background-color:var(--base-color-neutral--white,#f7f7f5)!important}
/* the site's two end panels (sized for MEAN* and the menu on wide screens) would cover all but 36 px of the pinned row; the mask above does their job here */
html.ph-new.ph-home .marquee.is-projects[wb-data="marquee"]::before,html.ph-new.ph-home .marquee.is-projects[wb-data="marquee"]::after{display:none!important}
@media (prefers-reduced-motion:reduce){html.ph-new.ph-home .marquee.is-projects[wb-data="marquee"],html.ph-new.ph-home .marquee.is-projects[wb-data="marquee"] .marquee-row{transition:none!important}}
/* while the row is pinned the header is only the hamburger, as over the journey and as drawn (screen 7): on a scroll up MEAN* and its bar would cover the words (L20) */
html.ph-new.ph-mq body .header:not(:has(.w--open)) .header-brand,html.ph-new.ph-mq body .header:not(:has(.w--open)) .mb-brand{opacity:0!important;transform:translateY(-160%)!important}
html.ph-new.ph-mq body .header:not(#_):not(:has(.w--open)) .header-container,html.ph-new.ph-mq body .header.mb-bar:not(#_):not(:has(.w--open)){background-color:transparent!important}
html.ph-new.ph-mq body .header:not(#_):not(:has(.w--open)) .header-container::before{background:transparent!important}
/* OP-409 (Riyad, 30 Sep, Freeform screen 5: "This should be a slogan font and should say: From buildings to objects we consider how parts become whole to the detail of
   how parts are made"): the journey sentence, About's last paragraph alone over The Migrant Kitchen, is set as a slogan: Fugue 400 at the phone slogan size 36/36, normal
   tracking (mean-type's phone slogan role); journey.js writes his wording into the English paragraph on phones. The Arabic twin takes the Arabic slogan role as the Arabic headings have it on phones (Lyon Arabic
   Semibold 600, 34 px on 1.2 lines, L19) and keeps its present wording until an Arabic wording is approved. */
html.ph-new.ph-jr-ready .ph-jr-sec .section-wrapper>p.ph-jr-sl:not([lang=ar]):not(#j1):not(#j2):not(#j3):not(#j4){font-family:Fugue,sans-serif!important;font-weight:400!important;font-size:36px!important;line-height:36px!important;letter-spacing:normal!important}
html.ph-new.ph-jr-ready .ph-jr-sec .section-wrapper>p.ph-jr-sl[lang=ar]:not(#j1):not(#j2):not(#j3):not(#j4):not(#j5):not(#j6):not(#j7):not(#j8):not(#j9):not(#j10):not(#j11):not(#j12):not(#j13):not(#j14){font-weight:600!important;font-size:34px!important;line-height:1.2!important}   /* 14 ids: the site's Arabic body rule (weight 400) carries 13 */

/* arhome */
/* OP-375 (Riyad, 29 Sep: "On the mobile page with Arabic text, make the buttons as wide as the Arabic text block and the photo as wide as the buttons. Start the
   photo behind a crop mask; scrolling down should reveal the full image by the end of that section ... At the bottom of the page, add a Back to Top link. Preserve
   the approved desktop and Arabic layouts"; 4 Oct, which page: "Home in Arabic"). Phones only (the bundle), Home only (html.ph-home), and the first two parts only
   with Arabic on (html.mean-ar): his words name the Arabic page, and his later Freeform note for the English pair asks for smaller buttons, not wider ones.
   1. The buttons: the English | عربي pair under the Arabic slogan takes the slogan block's own width (the 43 px text frame at 390: both edges on the text's edges),
      two equal buttons, the 16 px gap between them as before. Its place (top and left edge), height, type and switching are mean-lang's, untouched; each label is
      centred on its ink, across and down (arhome.js; the 4 Oct rule for Arabic labels in buttons).
   2. The photo: the section is the blue slogan section again (the brand blue, its own Designer colour), and the journey photograph behind it shows through a window
      cut in the blue: as wide as the buttons, starting 16 px under them (the pair's own gap) and running to the section's end. The window's sides open with the scroll
      (arhome.js sets --a375-l and --a375-r) and reach the screen's edges when the section's end arrives at the foot of the screen, so the photograph is full width
      where About begins. The blue is the section's own ::after layer, behind its words, buttons and Ns; nothing is laid over the photograph (L39: no band, no outline).
      On the blue the buttons take the blue fill (the button standard by ground: never a black button on blue); once the pair holds over the photograph it is black
      again (the sitewide fill). The blue goes on with the language (.ar375); the window is cut once the pair has been measured (--a375-t, unset: no window).
      Reduced motion: no window and no blue, the whole photograph as before (arhome.js does not set .ar375). */
html.ph-new.ph-home.mean-ar .main-wrapper>.section.bg-primary .mean-lang{display:grid;align-self:stretch;margin-left:0!important;margin-right:0!important}
html.ph-new.ph-home.mean-ar .main-wrapper>.section.bg-primary .mean-lang-b{min-width:0;padding-left:12px;padding-right:12px}
html.ph-new.ph-home.mean-ar.ph-jr .main-wrapper>.section.bg-primary.ar375::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;pointer-events:none;background:var(--base-color-brand--blue,#0f0e9f);clip-path:polygon(0 0,100% 0,100% 100%,calc(100% - var(--a375-r,0px)) 100%,calc(100% - var(--a375-r,0px)) var(--a375-t,100%),var(--a375-l,0px) var(--a375-t,100%),var(--a375-l,0px) 100%,0 100%)}
html.ph-new.ph-home.mean-ar.ph-jr body .main-wrapper>.section.bg-primary.ar375.ar375-b .mean-lang-b:not(#_):not(#__):not(:hover):not(:focus-visible):not(:active){background-color:var(--base-color-brand--blue,#0f0e9f)!important}
/* 3. Back To Top: the last line of the Home phone footer, under the copyright line and centred as it is, in the footer links' own style (it carries their class:
      Helvetica Neue 16/24, underlined, off-white; the Arabic label takes the site's Arabic face from the type stylesheet, as any Arabic text), a 44 px row so the
      tap target is 44 px tall, 20 px under the copyright block (5 px clear of the Privacy link's own tap area). It stands outside the Contact / Studio / Follow grid,
      so the two columns still start and end level (footer.css). Both languages. The sitewide footer-link rule (meanbrandcss3g: display, min-height, padding and
      margin, all !important) is why these four are !important here. */
html.ph-new.ph-home .m-footer a.ar375-top{display:flex!important;align-items:center;justify-content:center;width:max-content;max-width:100%;min-width:44px;min-height:44px!important;margin:20px auto 0!important;padding:0 12px!important;box-sizing:border-box;text-align:center;white-space:nowrap}

/* band */
/* OP-417 (Riyad, Freeform phone board, 4 Oct 2026: "Logo must be aligned horizontally"; "First make sure that the horizontal padding and the vertical
   padding from the edge of the screen are equal and fixed throughout the site for the hamburger menu"; "The N and the hamburger menu must be aligned
   vertically"; "This padding should be preserved site wide use masks if needed"). The band from MEAN* to the menu button, one value on every phone page:
   --ph-band, 20 px (the Studio preview he was shown with ?band=20, now the default everywhere).
   The menu button is a 60 px box whose three lines (35 x 22 px) sit 12.5 px inside it on each side and 19 px from its top, so the box goes 7.5 px from the
   right and 1 px from the top: the lines are 20 px from the top edge and 20 px from the right edge, at every scroll position (it was 15 px and -4 px:
   lines 27.5 from the right, 15 from the top). The site sets these places through --mbr and --mbt on the header, so the same two numbers serve the
   Home header (button absolute in the fixed header) and the inner pages (button fixed). --mbo is how far the button drops when the menu opens: 10 px
   instead of 15, so the open menu's N stays at the height it had (top 11 px) and OP-423's two equal header gaps in the open menu do not change; the N
   moves 7.5 px to the right with the button, so nothing jumps sideways on a tap. Home: only this rule applies (its button never moves on scroll, L30). */
html.ph-new{--ph-band:20px}
html.ph-new body .header:not(#_){--mbr:calc(var(--ph-band) - 12.5px);--mbt:calc(var(--ph-band) - 19px);--mbo:10px}
/* Inner pages, closed menu: the header MEAN* (40 px Fugue in a 20 px line box) has its M on the band's left edge (the glyph starts 3 px inside its
   box, measured) and its letters centred on the menu lines (ink 29.2 px tall, centre 31 px from the top = the lines' centre). The open menu keeps its
   own MEAN* place (30 / 20 px), because the menu's list is aligned to it (CPR-10, the menu chat's rules). */
html.ph-new body .header.is-static:not(:has(.w--open)):not(#_){--mbx:calc(var(--ph-band) - 3px);--mby:25.6px}
/* At the top of an inner page the four-line lockup stands in for the header MEAN*: its MEAN* line starts on the top edge of the menu lines and its M
   on the band's left edge (21 px Fugue: 5.3 px down, 1 px left; the Studio preview's place) */
html.ph-new body .header.is-static .hero-logo.is-inner-page:not(#_){position:relative!important;top:5.3px!important;left:-1px!important}

/* OP-418 ("Whenever there is an image that is screen-wide, center it nicely and make it go edge-to-edge, from the edge of the M at MEAN to the right
   side of the hamburger menu"): a full-width content image leaves the 43 px text frame for the band (20 px each side), centred, in its own proportions.
   Text, rules and captions stay on the text frame. Studio's founder picture is in studio.css. On project pages every single image has its own grid
   and gap rules, so only the three checked on 4 Oct are here, on upright phones (below 480 px, where the text frame is one ninth of the width); the
   other pages' single images, drawings and films stay on the text frame until each is checked with its pictures (list in the builder's report).
   Repeat: the reception photo (5:4, height follows the width); the carousel under it is set off by the photo's height plus one grid column in the
   page head (80% of the frame's width), so that offset takes the band's width too and the 43 px gap stays. The Pilates film (16:9, shown whole in a
   240 px block) only widens: 350 x 197 at 390, still inside its block. 3D Printed Majlis: the stop-motion (square, in a 375 px block on the
   project's orange) widens with its block; from 416 px the block grows to the picture's height so nothing is cut. */
@media (max-width:479.98px){
html.ph-new[data-wf-page="69c518191056258f1a28553d"] img.rp-solo:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a28553d"] .info-section-grid-p39>.div-block-84:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c1"] .design-section-grid-p21>.div-block-78:not(#_):not(#__){width:calc(100vw - 2*var(--ph-band))!important;max-width:none!important;min-width:0!important;margin-left:calc(var(--ph-band) - 11.1111vw)!important;margin-right:calc(var(--ph-band) - 11.1111vw)!important;justify-self:start!important;box-sizing:border-box!important}
html.ph-new[data-wf-page="69c518191056258f1a28553d"] #w-node-e5714341-25e5-3b92-7017-ca7544252f2f-1a28553d:not(#_):not(#__){margin-top:calc((100vw - 2*var(--ph-band))*0.8 + 100%/7)!important}
html.ph-new[data-wf-page="69c518191056258f1a2854c1"] .design-section-grid-p21>.div-block-78:not(#_):not(#__){height:max(375px,calc(100vw - 2*var(--ph-band)))!important}
}
/* OP-418 LEFTOVERS START (generated by gen.py, 4 Oct 2026: the rest of the single content images, drawings and films on project pages).
   Each block is the one full-width picture or film of its grid row; it leaves the text frame for the band exactly like the three above. A film block keeps
   its own proportions (Webflow sets its height as a share of the column, so the share is restated on the band's width). A picture block keeps its height while the wider picture still fits in it, and grows to the picture's own
   height (band width / picture ratio) when it would be cut; its grid row grows with it, so the gaps to the caption, heading or rule next to it do not change.
   Captions, headings and text stay on the text frame: the carousel script (meanbrandcss1e caps) moves a film's caption to the film's left edge, so each film's
   caption is put back by a relative offset the script leaves alone (and held to the width of its own column, so its lines break where they did). Tutuncka's lamp film is drawn at 80% (a transform in the page's own styles), so its box is
   the band / 0.8. Upright phones only. Left on the text frame, with the reason: see the builder's report. */
@media (max-width:479.98px){
html.ph-new[data-wf-page="6ab433d60afb7f909ef3bece"] #w-node-d4292745-e932-374b-f6fb-ceaa610fc148-9ef3bece:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d4"] #w-node-b51c624e-7d6b-1b1c-e8f4-d3c678a5450b-1a2854d4:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d4"] #w-node-_0cfafa33-04b4-4d28-479c-bb6e9b22de90-1a2854d4:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d3"] #w-node-_456c51f4-9671-10b8-da5b-f8bf51a97830-1a2854d3:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d3"] #w-node-_1d3b99d7-f9ed-a663-00aa-4278b9df6617-1a2854d3:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d3"] #w-node-_810d9f74-c220-7d15-1bf8-1ae081d981f3-1a2854d3:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854e6"] #w-node-ce876f03-2a29-5e61-e2b6-982633cd5c79-1a2854e6:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854e6"] #w-node-_86402805-e7f5-1612-147b-760861d41357-1a2854e6:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854e6"] #w-node-_5d4458b5-1ca1-5fe6-6574-d7a6e4083ce8-1a2854e6:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a285517"] #w-node-_74b2ab05-5776-9baa-1ccb-a5caa8b34bf3-1a285517:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854e4"] #w-node-f3b67da9-c911-0300-03da-be25097df702-1a2854e4:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854cd"] #w-node-_9aa1b1c7-f1ee-46e4-8b98-634da48bd6d9-1a2854cd:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854cd"] #w-node-_7a3099bb-5376-91ec-4d42-45eeed6b1112-1a2854cd:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c8"] #w-node-_8ac1fc2c-2b4a-28e1-c12c-08fb44657f8e-1a2854c8:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d0"] #w-node-_8ac1fc2c-2b4a-28e1-c12c-08fb44657f8e-1a2854d0:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d1"] #w-node-_98dc2a60-d786-1b50-d754-ee7de3f10c41-1a2854d1:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854cc"] #w-node-_832a6c5e-1315-a1e0-af19-111b6865ddde-1a2854cc:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854cb"] #w-node-_4819ea02-107f-d132-a9fc-227776dd0b95-1a2854cb:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854e2"] #w-node-_9aa1b1c7-f1ee-46e4-8b98-634da48bd6d9-1a2854e2:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854e2"] #w-node-_7a3099bb-5376-91ec-4d42-45eeed6b1112-1a2854e2:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c5"] #w-node-_3ef22abe-4cad-1adb-5ff6-9f8ff3ed0d27-1a2854c5:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c5"] #w-node-_3d871431-9dd9-5d3f-b7e9-6d51d5cfdcb7-1a2854c5:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c5"] #w-node-_74c22b3e-c49d-fcc0-c2f3-3612f32afd6e-1a2854c5:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c4"] #w-node-_9aa1b1c7-f1ee-46e4-8b98-634da48bd6d9-1a2854c4:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c4"] #w-node-fe0c9667-f714-3e15-aeec-c2ef96835115-1a2854c4:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c4"] #w-node-fb02e8a9-389a-bcc9-78c8-ea78833a41db-1a2854c4:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c9"] #w-node-_060e6dfc-66db-53fe-8f20-a924b52d2a47-1a2854c9:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c9"] #w-node-ca3ffb34-b918-33c1-101d-2ac2fd414593-1a2854c9:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854e8"] #w-node-fbd2ffea-405e-3d79-d9d1-d2830caa3453-1a2854e8:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854df"] #w-node-_5d1eecdb-e961-7f27-a0ed-918e80f478bc-1a2854df:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854df"] #w-node-_5b4a44f6-aa4e-850a-e24a-fa5b13a28642-1a2854df:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854df"] #w-node-_91ea5b18-74bb-0e02-aa0e-fab125425d09-1a2854df:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854df"] #w-node-c182c488-36ea-0945-8793-75f307e4d371-1a2854df:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854df"] #w-node-b7a63bbc-221e-96c8-5d6f-4af60fa05170-1a2854df:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d7"] #w-node-_431652b0-05dc-16b7-a7e5-a37fdf0ea937-1a2854d7:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d7"] #w-node-_9b8ac703-d662-fb42-85c1-45529d7655fc-1a2854d7:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d7"] #w-node-ca9b7d92-1cc0-6190-1bff-e0a60e5b73e0-1a2854d7:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854cf"] #w-node-_5c1aabc1-316c-81de-0dbe-aeb42b1a0137-1a2854cf:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854cf"] #w-node-_7f6e8930-6709-b544-1431-745f80e707dc-1a2854cf:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854cf"] #w-node-a893508b-8779-1b9d-805c-bdb25beff243-1a2854cf:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d2"] #w-node-_580f7321-a906-e478-7cdb-bea4d720facf-1a2854d2:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d2"] #w-node-_61bd6b12-ade0-d96b-1c8e-0fc7d9f976c0-1a2854d2:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d2"] #w-node-bb7cacee-a28b-fa50-e5de-29e1aacf9369-1a2854d2:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c6"] #w-node-_683b14cb-2919-8842-ecc8-2a3c186edc29-1a2854c6:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854dc"] #w-node-ed27c50c-14e3-c57b-5998-2f30dda0bd43-1a2854dc:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854e3"] #w-node-_5d1eecdb-e961-7f27-a0ed-918e80f478bc-1a2854e3:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854dd"] #w-node-_431652b0-05dc-16b7-a7e5-a37fdf0ea937-1a2854dd:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854dd"] #w-node-f08dde4c-4f1e-85ba-86f9-5ba9c744196d-1a2854dd:not(#_):not(#__){width:calc(100vw - 2*var(--ph-band))!important;max-width:none!important;min-width:0!important;margin-left:calc(var(--ph-band) - 11.1111vw)!important;margin-right:calc(var(--ph-band) - 11.1111vw)!important;justify-self:start!important;box-sizing:border-box!important}
html.ph-new[data-wf-page="69c518191056258f1a28553c"] #w-node-_47f1cb95-f180-6fff-3f30-1c7dec5c1c3b-1a28553c:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854e5"] #w-node-c3276767-ba46-004a-d065-071afe30e210-1a2854e5:not(#_):not(#__){width:calc(100vw - 2*var(--ph-band))!important;max-width:none!important;min-width:0!important;margin-left:calc(var(--ph-band) - 9.0909vw)!important;margin-right:calc(var(--ph-band) - 9.0909vw)!important;justify-self:start!important;box-sizing:border-box!important}
html.ph-new[data-wf-page="69c518191056258f1a2854d4"] #w-node-b51c624e-7d6b-1b1c-e8f4-d3c678a5450b-1a2854d4>a:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d4"] #w-node-b51c624e-7d6b-1b1c-e8f4-d3c678a5450b-1a2854d4>a>img:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d4"] #w-node-_0cfafa33-04b4-4d28-479c-bb6e9b22de90-1a2854d4>a:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d4"] #w-node-_0cfafa33-04b4-4d28-479c-bb6e9b22de90-1a2854d4>a>img:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d3"] #w-node-_456c51f4-9671-10b8-da5b-f8bf51a97830-1a2854d3>img:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d3"] #w-node-_1d3b99d7-f9ed-a663-00aa-4278b9df6617-1a2854d3>img:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d3"] #w-node-_810d9f74-c220-7d15-1bf8-1ae081d981f3-1a2854d3>img:not(#_):not(#__){display:block!important;width:100%!important;max-width:none!important;height:auto!important}
html.ph-new[data-wf-page="69c518191056258f1a2854c6"] #w-node-_683b14cb-2919-8842-ecc8-2a3c186edc29-1a2854c6:not(#_):not(#__)::before{content:"";display:block;padding-top:calc(100%/1.0)}
html.ph-new[data-wf-page="69c518191056258f1a2854e8"] #w-node-fbd2ffea-405e-3d79-d9d1-d2830caa3453-1a2854e8:not(#_):not(#__)::before{content:"";display:block;padding-top:calc(100%/1.546)}
html.ph-new[data-wf-page="69c518191056258f1a2854e4"] #w-node-f3b67da9-c911-0300-03da-be25097df702-1a2854e4:not(#_):not(#__)::before{content:"";display:block;padding-top:calc(100%/1.558)}
html.ph-new[data-wf-page="69c518191056258f1a2854cf"] #w-node-_5c1aabc1-316c-81de-0dbe-aeb42b1a0137-1a2854cf:not(#_):not(#__)::before,
html.ph-new[data-wf-page="69c518191056258f1a2854cf"] #w-node-_7f6e8930-6709-b544-1431-745f80e707dc-1a2854cf:not(#_):not(#__)::before,
html.ph-new[data-wf-page="69c518191056258f1a2854cf"] #w-node-a893508b-8779-1b9d-805c-bdb25beff243-1a2854cf:not(#_):not(#__)::before{content:"";display:block;padding-top:calc(100%/1.778)}
html.ph-new[data-wf-page="69c518191056258f1a2854df"] #w-node-c182c488-36ea-0945-8793-75f307e4d371-1a2854df:not(#_):not(#__)::before{content:"";display:block;padding-top:calc(100%/2.935)}
html.ph-new[data-wf-page="69c518191056258f1a2854d0"] #w-node-_8ac1fc2c-2b4a-28e1-c12c-08fb44657f8e-1a2854d0:not(#_):not(#__){padding-top:calc((100vw - 2*var(--ph-band))*0.4766)!important}
html.ph-new[data-wf-page="69c518191056258f1a2854c4"] #w-node-fe0c9667-f714-3e15-aeec-c2ef96835115-1a2854c4:not(#_):not(#__){padding-top:calc((100vw - 2*var(--ph-band))*0.5277)!important}
html.ph-new[data-wf-page="69c518191056258f1a2854cd"] #w-node-_9aa1b1c7-f1ee-46e4-8b98-634da48bd6d9-1a2854cd:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854e2"] #w-node-_9aa1b1c7-f1ee-46e4-8b98-634da48bd6d9-1a2854e2:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c9"] #w-node-ca3ffb34-b918-33c1-101d-2ac2fd414593-1a2854c9:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854dd"] #w-node-f08dde4c-4f1e-85ba-86f9-5ba9c744196d-1a2854dd:not(#_):not(#__){padding-top:calc((100vw - 2*var(--ph-band))*0.5617)!important}
html.ph-new[data-wf-page="69c518191056258f1a28553c"] #w-node-_47f1cb95-f180-6fff-3f30-1c7dec5c1c3b-1a28553c:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854e5"] #w-node-c3276767-ba46-004a-d065-071afe30e210-1a2854e5:not(#_):not(#__){padding-top:calc((100vw - 2*var(--ph-band))*0.5627)!important}
html.ph-new[data-wf-page="69c518191056258f1a2854c8"] #w-node-_8ac1fc2c-2b4a-28e1-c12c-08fb44657f8e-1a2854c8:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d1"] #w-node-_98dc2a60-d786-1b50-d754-ee7de3f10c41-1a2854d1:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854cc"] #w-node-_832a6c5e-1315-a1e0-af19-111b6865ddde-1a2854cc:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854cb"] #w-node-_4819ea02-107f-d132-a9fc-227776dd0b95-1a2854cb:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c5"] #w-node-_3d871431-9dd9-5d3f-b7e9-6d51d5cfdcb7-1a2854c5:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c5"] #w-node-_74c22b3e-c49d-fcc0-c2f3-3612f32afd6e-1a2854c5:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c4"] #w-node-fb02e8a9-389a-bcc9-78c8-ea78833a41db-1a2854c4:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c9"] #w-node-_060e6dfc-66db-53fe-8f20-a924b52d2a47-1a2854c9:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854df"] #w-node-_5d1eecdb-e961-7f27-a0ed-918e80f478bc-1a2854df:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854df"] #w-node-_91ea5b18-74bb-0e02-aa0e-fab125425d09-1a2854df:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854df"] #w-node-b7a63bbc-221e-96c8-5d6f-4af60fa05170-1a2854df:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d7"] #w-node-_431652b0-05dc-16b7-a7e5-a37fdf0ea937-1a2854d7:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d7"] #w-node-_9b8ac703-d662-fb42-85c1-45529d7655fc-1a2854d7:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d7"] #w-node-ca9b7d92-1cc0-6190-1bff-e0a60e5b73e0-1a2854d7:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d2"] #w-node-bb7cacee-a28b-fa50-e5de-29e1aacf9369-1a2854d2:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854e3"] #w-node-_5d1eecdb-e961-7f27-a0ed-918e80f478bc-1a2854e3:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854dd"] #w-node-_431652b0-05dc-16b7-a7e5-a37fdf0ea937-1a2854dd:not(#_):not(#__){padding-top:calc((100vw - 2*var(--ph-band))*0.5628)!important}
html.ph-new[data-wf-page="69c518191056258f1a2854c4"] #w-node-_9aa1b1c7-f1ee-46e4-8b98-634da48bd6d9-1a2854c4:not(#_):not(#__){padding-top:calc((100vw - 2*var(--ph-band))*0.566)!important}
html.ph-new[data-wf-page="69c518191056258f1a2854c5"] #w-node-_3ef22abe-4cad-1adb-5ff6-9f8ff3ed0d27-1a2854c5:not(#_):not(#__){padding-top:calc((100vw - 2*var(--ph-band))*0.6256)!important}
html.ph-new[data-wf-page="69c518191056258f1a2854d2"] #w-node-_61bd6b12-ade0-d96b-1c8e-0fc7d9f976c0-1a2854d2:not(#_):not(#__){padding-top:calc((100vw - 2*var(--ph-band))*1.0001)!important}
html.ph-new[data-wf-page="69c518191056258f1a2854cd"] #w-node-f2c0459b-a426-50fc-92fb-6e655e259e32-1a2854cd:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c8"] #w-node-_8ac1fc2c-2b4a-28e1-c12c-08fb44657f8f-1a2854c8:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d0"] #w-node-_8ac1fc2c-2b4a-28e1-c12c-08fb44657f8f-1a2854d0:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d1"] #w-node-_98dc2a60-d786-1b50-d754-ee7de3f10c42-1a2854d1:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854cc"] #w-node-_832a6c5e-1315-a1e0-af19-111b6865ddc7-1a2854cc:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854cb"] #w-node-_4819ea02-107f-d132-a9fc-227776dd0b92-1a2854cb:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854e2"] #w-node-f2c0459b-a426-50fc-92fb-6e655e259e32-1a2854e2:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c5"] #w-node-_3ef22abe-4cad-1adb-5ff6-9f8ff3ed0d3b-1a2854c5:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c5"] #w-node-_3d871431-9dd9-5d3f-b7e9-6d51d5cfdcb5-1a2854c5:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c5"] #w-node-_74c22b3e-c49d-fcc0-c2f3-3612f32afd59-1a2854c5:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c4"] #w-node-_9aa1b1c7-f1ee-46e4-8b98-634da48bd6ec-1a2854c4:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c4"] #w-node-fe0c9667-f714-3e15-aeec-c2ef96835113-1a2854c4:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c4"] #w-node-fb02e8a9-389a-bcc9-78c8-ea78833a41c6-1a2854c4:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c9"] #w-node-bb0b2de1-3af9-aeb9-5e00-e3a27730b593-1a2854c9:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854c9"] #w-node-ca3ffb34-b918-33c1-101d-2ac2fd41458e-1a2854c9:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854df"] #w-node-_5d1eecdb-e961-7f27-a0ed-918e80f478cf-1a2854df:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854df"] #w-node-_6b2c4b22-deda-97f3-8a0f-a27c28fc0b13-1a2854df:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854df"] #w-node-b7a63bbc-221e-96c8-5d6f-4af60fa0515b-1a2854df:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d7"] #w-node-_431652b0-05dc-16b7-a7e5-a37fdf0ea94b-1a2854d7:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d7"] #w-node-_9b8ac703-d662-fb42-85c1-45529d7655ff-1a2854d7:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d7"] #w-node-ca9b7d92-1cc0-6190-1bff-e0a60e5b73e3-1a2854d7:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d2"] #w-node-_8bc83a87-e2b6-e053-0190-3f81c6c2c1c3-1a2854d2:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854d2"] #w-node-bb7cacee-a28b-fa50-e5de-29e1aacf9367-1a2854d2:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854e3"] #w-node-_5d1eecdb-e961-7f27-a0ed-918e80f478cf-1a2854e3:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854dd"] #w-node-_431652b0-05dc-16b7-a7e5-a37fdf0ea94b-1a2854dd:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854dd"] #w-node-f08dde4c-4f1e-85ba-86f9-5ba9c7441958-1a2854dd:not(#_):not(#__){position:relative!important;left:calc(11.1111vw - var(--ph-band))!important;max-width:100%!important}
html.ph-new[data-wf-page="69c518191056258f1a28553c"] #w-node-c93a5b12-575b-0839-47e2-32b7e9e3dae2-1a28553c:not(#_):not(#__),
html.ph-new[data-wf-page="69c518191056258f1a2854e5"] #w-node-_569507f6-130b-0367-dfc3-153d0c2fb8bc-1a2854e5:not(#_):not(#__){position:relative!important;left:calc(9.0909vw - var(--ph-band))!important;max-width:100%!important}
html.ph-new[data-wf-page="69c518191056258f1a2854e3"] #w-node-d7652c3a-6a76-e381-382d-6c7fb6550a6e-1a2854e3:not(#_):not(#__){position:relative!important;left:calc(10vw - var(--ph-band))!important;max-width:78.8889vw!important}
html.ph-new[data-wf-page="69c518191056258f1a2854e3"] #w-node-_4d82c101-fe49-dbe5-d0ca-5395616b9e4c-1a2854e3:not(#_):not(#__){width:calc((100vw - 2*var(--ph-band))/.8)!important;max-width:none!important;margin-left:calc(50vw - (100vw - 2*var(--ph-band))/1.6)!important;margin-right:calc(50vw - (100vw - 2*var(--ph-band))/1.6)!important;justify-self:start!important}
/* MEAL* campus, the scalability map: below 337 px its 182 px minimum row is taller than the drawing on the text frame (179 px at 320), which made the gap to its caption 33 px; the wider drawing is taller than the row, so that 3 px is kept as padding and the gap stays what it was at every width */
html.ph-new[data-wf-page="69c518191056258f1a2854d3"] #w-node-_810d9f74-c220-7d15-1bf8-1ae081d981f3-1a2854d3:not(#_):not(#__){padding-bottom:max(0px,calc(182px - 77.7778vw/1.3894))!important}
}
/* OP-418 LEFTOVERS END */

/* captions */
/* OP-226, program unit L3 (Layout Standard L20, L29; brief A3.2): every tap target on a phone is at least 44 px. Captions stay 12/18 on phones as Riyad
   chose in OP-212 (set site-wide by meanbrandcss1e), not the plan's 15 px. Where a link has room around it, an invisible layer 44 px tall (and at least
   44 px wide) takes the tap, so nothing moves: the project list (Projects and the four sector pages, 29 px), the header MEAN* on Home (40 px), the
   founder's name on Studio (20 px) and "All press" on the founder page (25 px). Links inside running text stay as they are (WCAG 2.5.8 exempts them).
   Footer links sit 24 px apart, too close for 44 px each without taking a neighbour's tap, so each becomes a 44 px row. Carousel dots: OP-223. */
html.ph-new a.mean-projects-link,
html.ph-new a.header-brand,
html.ph-new [data-st] .heading a,
html.ph-new p > a.text-style-link:only-child,
html.ph-new [class*="project-info-text-block"] div > a.text-style-link:only-child { position: relative; }
html.ph-new a.mean-projects-link { z-index: 1; }   /* the entry's other lines were drawn over 2 px of the layer */
html.ph-new a.mean-projects-link::after,
html.ph-new a.header-brand::after,
html.ph-new [data-st] .heading a::after,
html.ph-new p > a.text-style-link:only-child::after,
html.ph-new [class*="project-info-text-block"] div > a.text-style-link:only-child::after { content: ""; position: absolute; top: 50%; left: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
html.ph-new .footer-info-col .footer-info-link { display: flex !important; align-items: center; min-height: 44px !important; }
html.ph-new .footer-info-col .footer-info-link + .footer-info-link { margin-top: 0 !important; }
/* Project info tables: a run of links one under the other (the Press row, 24 px apart) becomes 44 px rows, like the footer; a single link (the Sector
   row) keeps its line and takes the invisible layer above */
html.ph-new [class*="project-info-text-block"] div:has(> a.text-style-link:only-child):has(+ div > a.text-style-link:only-child),
html.ph-new [class*="project-info-text-block"] div:has(> a.text-style-link:only-child) + div:has(> a.text-style-link:only-child) { display: flex; align-items: center; min-height: 44px; }
/* Arabic body on phones follows the bundle's English body (Riyad, 28 Sep, via type.css: 16/24, "legible on the phones"), so a twin never sits
   smaller than its English (L19): 1.45, as arabic-lyon sets it; its rules carry five ids, these six. Captions stay 12/18. Subtitles are left to Website
   1's mean-type (20 px on phones, the Arabic twin at the English size): a 16 px rule here outranked it, so the bold subtitle paragraphs (.text-weight-bold,
   .s22-h) are left out of the body rule too (reviewer, round 5). */
html.ph-new body p[lang=ar]:not(.text-weight-bold):not(.s22-h):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______),
html.ph-new body [lang=ar] p:not(.text-weight-bold):not(.s22-h):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { font-size: var(--ph-body, 16px) !important; line-height: 1.45 !important; }
html.ph-new body [lang=ar] [class*=caption]:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______),
html.ph-new body [class*=caption][lang=ar]:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { font-size: 12px !important; line-height: 18px !important; }

/* carousel */
/* OP-223 (pan and snap) and OP-226 (dot tap targets), phones only (this file is wrapped in max-width 767px by build.py; every selector starts with html.ph-new).
   Pan and snap: carousel.js marks a project-page carousel data-ph-snap once Webflow has built it. The mask then scrolls sideways with CSS scroll snap (one photo per
   swipe: mandatory, stop always) instead of Webflow's own swipe, which carousel.js switches off (data-disable-swipe). Webflow's slide transforms are cancelled so they
   cannot add to the scroll position; Webflow still owns the index, the arrows, the dots and aria-hidden, and carousel.js keeps the two in step.
   A slide marked data-ph-wide (a cropped photo wider than its frame) is as wide as the whole photo at the frame's height, so a swipe pans across it before the next one. */
html.ph-new .w-slider[data-ph-snap] .w-slider-mask { overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; scroll-behavior: auto; }
html.ph-new .w-slider[data-ph-snap] .w-slider-mask::-webkit-scrollbar { display: none; }
html.ph-new .w-slider[data-ph-snap] .w-slide { transform: none !important; transition: none !important; scroll-snap-align: start; scroll-snap-stop: always; }
/* OP-226: carousel dots keep their 14 px look and their 6 px gaps; an invisible layer around each is 44 px tall and as wide as the dot's pitch (20 px), the end dots
   reaching 12 px past the row. The layers meet half way between two dots, so a tap goes to the nearest dot. */
html.ph-new[data-ph-car] .w-slider-nav { z-index: 4; pointer-events: none; }   /* the arrows are 80 px columns over the photo at z-index 3 and covered the dots beside them (6 of 13 dots could not be tapped): the dots now sit above, the row between them stays transparent to touch */
html.ph-new[data-ph-car] .w-slider-dot { position: relative; pointer-events: auto; }
html.ph-new[data-ph-car] .w-slider-dot::after { content: ""; position: absolute; top: -15px; bottom: -15px; left: -3px; right: -3px; }
html.ph-new[data-ph-car] .w-slider-dot:first-child::after { left: -12px; }
html.ph-new[data-ph-car] .w-slider-dot:last-child::after { right: -12px; }

/* cpr */
/* CPR pages (CPR-01..05, 07, 08), integrated from output/phone-cpr/patches/cpr-pages-phone.css with html.ph-new and the page's own data-wf-page id in front of every page selector (3 Oct: the :has() scopes also matched Studio, whose Riyad name link carries mean-hit24, and moved its centred title); the bundle supplies the 767 px wrapper. */


  /* CPR-01 Connect title (the same 59 / 59 on Research and Press so the three inner titles sit alike): equal optical gaps between the logo block (bottom 122 px) and the intro.
     Measured at 390: 70 above / 48 below. Moving the title up 11 px (visual only, layout untouched) gives 59 / 59. */
  html.ph-new[data-wf-page="6a78e4e90060d5a6b38e4337"]:not(#_) body h1.heading-style-h1,
  html.ph-new[data-wf-page="6ab92aff2b9872d11f4766a9"] body h1.heading-style-h1,
  html.ph-new[data-wf-page="6a78e2563fc87e89310dbbf7"] body h1.heading-style-h1 { position: relative; top: -11px; margin-bottom: 0; }

  /* CPR-02 Connect intro: one band, one role (16/24 already from the phone token, nothing multiplied) */
  html.ph-new[data-wf-page="6a78e4e90060d5a6b38e4337"]:not(#_) body .section-wrapper > p.text-size-large { font-size: 16px; line-height: 24px; margin: 0; }

  /* CPR-03 form rhythm: label to field 13 -> 6 px, group to group 24 -> 12 px. Inputs stay 44 px, textarea 160 px. */
  html.ph-new[data-wf-page="6a78e4e90060d5a6b38e4337"]:not(#_) body form.form { gap: 12px; }
  html.ph-new[data-wf-page="6a78e4e90060d5a6b38e4337"]:not(#_) body .b-form-group { display: flex; flex-direction: column; gap: 6px; }
  html.ph-new[data-wf-page="6a78e4e90060d5a6b38e4337"]:not(#_) body .b-form-label { margin: 0; }
  html.ph-new[data-wf-page="6a78e4e90060d5a6b38e4337"]:not(#_) body .b-form-field { margin: 0; min-height: 44px; }
  html.ph-new[data-wf-page="6a78e4e90060d5a6b38e4337"]:not(#_) body textarea.b-form-field { min-height: 160px; }
  html.ph-new[data-wf-page="6a78e4e90060d5a6b38e4337"]:not(#_) body .button-group { gap: 16px; }

  /* CPR-04 social group on the intro datum, inside the content boundary; 40 px icons, 12 px gaps kept */
  html.ph-new[data-wf-page="6a78e4e90060d5a6b38e4337"]:not(#_) body .social-list { justify-content: flex-start; flex-wrap: wrap; width: 100%; gap: 12px; margin: 0; }
  html.ph-new[data-wf-page="6a78e4e90060d5a6b38e4337"]:not(#_) body .social-item { flex: none; }

  /* CPR-05 FAQ: question = subtitle role 20/26 bold, answer = body 16/24, 8 px between, 32 px between entries.
     The site head sets every .section-wrapper p.text-size-large with !important and a :not(#_) id weight, so these
     selectors carry the same id weight plus more classes. Hidden Arabic twins (display none) must not add gaps: no flex. */
  html.ph-new[data-wf-page="6a78e4e90060d5a6b38e4337"]:not(#_) body .section.bg-neutral [data-faq] .section-wrapper { gap: 32px !important; }
  html.ph-new[data-wf-page="6a78e4e90060d5a6b38e4337"]:not(#_) body .section.bg-neutral [data-faq] .section-wrapper > div > p.text-size-large.text-weight-bold:not(#_):not(#_):not(#_) { font-size: 20px !important; line-height: 26px !important; margin: 0 0 8px !important; }
  html.ph-new[data-wf-page="6a78e4e90060d5a6b38e4337"]:not(#_) body .section.bg-neutral [data-faq] .section-wrapper > div > p.text-size-large:not(.text-weight-bold):not(#_):not(#_):not(#_) { font-size: 16px !important; line-height: 24px !important; margin: 0 !important; }

  /* CPR-07 Press: off-white on black, edges on the datum, left aligned */
  html.ph-new[data-wf-page="6a78e2563fc87e89310dbbf7"] body h1.heading-style-h1 { margin-bottom: 0; }

  /* CPR-08 Press: exactly six logos, 3 columns x 2 rows, Press only (the six cards are the only children of this grid).
     An existing 479 px rule sets the columns to 62.3vw !important, so this one repeats the chain with one more class. */
  html.ph-new[data-wf-page="6a78e2563fc87e89310dbbf7"] body .section.bg-neutral.ph-lg .section-grid._3.gap-huge { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 32px 12px !important; align-items: start !important; justify-items: stretch !important; margin-top: 0 !important; }
  html.ph-new[data-wf-page="6a78e2563fc87e89310dbbf7"] body .section.bg-neutral.ph-lg .section-grid._3.gap-huge > a.logo-link { max-width: none !important; width: 100% !important; min-height: 44px; display: flex !important; flex-direction: column; align-items: flex-start !important; }
  html.ph-new[data-wf-page="6a78e2563fc87e89310dbbf7"] body .section.bg-neutral.ph-lg .section-grid._3.gap-huge .logo-box { width: 100% !important; }
  html.ph-new[data-wf-page="6a78e2563fc87e89310dbbf7"] body .section.bg-neutral.ph-lg .section-grid._3.gap-huge .logo-box-img { width: 100% !important; height: auto !important; max-height: 80px; object-fit: contain; object-position: left center; }
  html.ph-new[data-wf-page="6a78e2563fc87e89310dbbf7"] body .section.bg-neutral.ph-lg .section-grid._3.gap-huge .spacer-small { height: 8px; }
  html.ph-new[data-wf-page="6a78e2563fc87e89310dbbf7"] body .section.bg-neutral.ph-lg .section-grid._3.gap-huge p.text-size-regular { font-size: 12px !important; line-height: 18px !important; text-align: start !important; margin: 0; overflow-wrap: break-word; hyphens: manual; }

  /* CPR-07 Press: the blank interval between title and grid (237 px at 390) becomes the same 59 px as the Connect title-to-body gap (title shifts up 11 px, so 48 px of margin) */
  html.ph-new[data-wf-page="6a78e2563fc87e89310dbbf7"] body .section.bg-neutral.ph-lg .padding-section-medium.ph-sg { padding-top: 0 !important; margin-top: 48px; }
  html.ph-new[data-wf-page="6a78e2563fc87e89310dbbf7"] body .section.bg-neutral.ph-lg .padding-section-large.ph-h1 { padding-bottom: 0 !important; }
  html.ph-new[data-wf-page="6a78e2563fc87e89310dbbf7"] body .section.bg-neutral.ph-lg .section-grid._3.gap-huge .logo-box-img { max-width: 100% !important; }

/* CPR phone menu (CPR-10, 11, 13), from output/phone-cpr/patches/cpr-menu-phone.css. Its 768 to 991 px landscape block is not here: the bundle only loads at 767 px and below (held for another delivery path). */

  /* CPR-10 list text starts on the logo glyph edge (33 px; the box sits 31 px in, the glyph has a 2 px side bearing), at every width via --mm-x (38.5 / 43.3 / 47.8 px at 320 / 390 / 430); the rows end at 348 px, inside the mirrored 357 px right inset, clear of the 60 px menu control */
  html.ph-new body .header.w-nav .header-nav.w-nav-menu:not(#mm):not(#m2) > .header-nav-list { margin-left: calc(31px - var(--mm-x, 43px)) !important; }

  /* CPR-11 category labels take the primary role (Fugue 25/25, same as Projects/Studio/Connect/Research/Press) and keep a 48 px target;
     project links stay the subordinate 15/20 role at the approved 32 px pitch */
  html.ph-new body .header.w-nav .header-nav.w-nav-menu:not(#mm):not(#m2) .acc .acc .acc-head .nav-link { font-size: 25px !important; line-height: 25px !important; margin-top: 12px !important; padding-bottom: 11px !important; } /* 25 + 12 + 11 = the 48 px row it had at 20/10 */

  /* CPR-13 the longest expanded category scrolls inside the list and its last row clears the toolbar and home indicator */
  html.ph-new body .header.w-nav .header-nav.w-nav-menu:not(#mm):not(#m2) > .header-nav-list { overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 14px !important; } /* OP-423, 4 Oct: the list now ends above the bottom band (menu.css), which holds the safe area; 14 px keeps the last row's touch area inside the scroll box */


/* OP-422 (Riyad, Freeform phone board, Connect and again on the Press frame: "Align these items so that they are to the left of the hamburger menu with some padding").
   The menu button is fixed 15 px from the right and 60 px wide at every phone width, its lines start 12.5 px inside that box; the content column now ends on the
   box's left edge (75 px from the right: 315 px at 390), so nothing in the column passes under the button. The page frame is 11.1111vw each side, so the
   extra inset is 75 px less that. The site footer blocks keep their own centred frame. Both languages: the button stays on the right in Arabic. */
  html.ph-new[data-wf-page="6a78e4e90060d5a6b38e4337"]:not(#_) body .section > .padding-global > :not(.ph-fi) { padding-right: max(0px, calc(75px - 11.1111vw)) !important; box-sizing: border-box; }
  /* Press: the title, the Publications list and (4 Oct, the builder for the leftovers) the six-logo grid: its block takes the same inset, so the three columns end
     75 px from the right (315 px at 390) like everything else on the page; the columns stay three equal shares with the 12 px gap, the logos keep their rule
     (the cell's width, at most 80 px tall). The quotes take the caption role, 12/18 (CPR-08; type.css had them at the desktop's 14/21, which is why
     "computational" ran out of the narrower column and out of the 320 px one before): Press only. From 371 px up the longest word (77 px) fits its column
     whole; below that long words (9 letters or more) hyphenate, so every quote stays inside its column from 320 px up. */
  html.ph-new[data-wf-page="6a78e2563fc87e89310dbbf7"] body .section.bg-neutral.ph-lg > .padding-global > .padding-section-large,
  html.ph-new[data-wf-page="6a78e2563fc87e89310dbbf7"] body .section.bg-neutral.ph-lg > .padding-global > .padding-section-medium.ph-sg { padding-right: max(0px, calc(75px - 11.1111vw)) !important; box-sizing: border-box; }
  html.ph-new[data-wf-page="6a78e2563fc87e89310dbbf7"] body .section.bg-neutral.ph-lg .section-grid._3.gap-huge .logo-link p.text-size-regular:not(#_):not(#__):not(#___):not(#____) { font-size: 12px !important; line-height: 18px !important; overflow-wrap: anywhere; }
  @media (max-width: 370.98px) { html.ph-new[data-wf-page="6a78e2563fc87e89310dbbf7"] body .section.bg-neutral.ph-lg .section-grid._3.gap-huge .logo-link p.text-size-regular:not(#_):not(#__):not(#___):not(#____) { -webkit-hyphens: auto; hyphens: auto; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; hyphenate-limit-chars: 9 4 4; } }

/* CPR-09 / OP-242 (Riyad: "dates are too tiny and gray; consider clicking a year to expand its publications"): the Publications list shows on phones as the desktop's
   year dropdowns (script meancv2 1.0.2: .cv-btn buttons with aria-expanded, newest year first and open). The page head hides the block at 767 px and below; this
   shows it again, left aligned on the text frame, 96 px under the logo grid like FAQ under the Connect form, the title 58 px above the first year like the page title above its content, year buttons 44 px tall at 16/24 bold,
   entries at body 16/24 with half a line between them. */
  html.ph-new[data-wf-page="6a78e2563fc87e89310dbbf7"] body .section.bg-neutral.ph-lg .padding-section-large.ph-cv { display: block !important; padding-top: 48px !important; padding-bottom: 48px !important; }
  html.ph-new[data-wf-page="6a78e2563fc87e89310dbbf7"] body .section.bg-neutral.ph-lg .padding-section-large.ph-cv .section-wrapper { display: block !important; align-items: flex-start !important; text-align: start !important; }
  html.ph-new[data-wf-page="6a78e2563fc87e89310dbbf7"] body .section.bg-neutral.ph-lg .padding-section-large.ph-cv .section-wrapper > * { text-align: start !important; margin-left: 0 !important; margin-right: 0 !important; }
  html.ph-new[data-wf-page="6a78e2563fc87e89310dbbf7"] body .section.bg-neutral.ph-lg .padding-section-large.ph-cv .heading-style-h1 { margin: 0 0 48px !important; }
  html.ph-new[data-wf-page="6a78e2563fc87e89310dbbf7"] body .section.bg-neutral.ph-lg .padding-section-large.ph-cv .cv-year { margin: 0 !important; }
  html.ph-new[data-wf-page="6a78e2563fc87e89310dbbf7"] body .section.bg-neutral.ph-lg .padding-section-large.ph-cv .cv-btn { min-height: 44px; font-size: 16px !important; line-height: 24px !important; -webkit-tap-highlight-color: transparent; }
  html.ph-new[data-wf-page="6a78e2563fc87e89310dbbf7"] body .section.bg-neutral.ph-lg .padding-section-large.ph-cv .cv-list { padding: 4px 0 20px !important; }
  html.ph-new[data-wf-page="6a78e2563fc87e89310dbbf7"] body .section.bg-neutral.ph-lg .padding-section-large.ph-cv .cv-list p { font-size: 16px !important; line-height: 24px !important; margin: 0 !important; overflow-wrap: break-word; }
  html.ph-new[data-wf-page="6a78e2563fc87e89310dbbf7"] body .section.bg-neutral.ph-lg .padding-section-large.ph-cv .cv-list p + p { margin-top: 12px !important; }
/* Perf (4 Oct, Studio TBT): the :has() scopes above are classes now (ph-lg, ph-cv, ph-sg, ph-h1, ph-fi), set by cpr.js marks(). A :has() ancestor whose rule
   carries a descendant part makes Chrome restyle the subtree on every DOM change below it; Studio's team-card fitter changes the DOM about 1000 times at load. */

/* drawings */
/* OP-225, program unit L6 (Layout Standard L23, L24): drawings and diagrams stay whole in their carousels and open full screen with pinch zoom, in the
   site's document viewer (meanbook2). In image mode the viewer shows one image, no page canvases and no download link (OP-167). */
html.ph-new .mb.mb-img-mode canvas,
html.ph-new .mb.mb-img-mode .mb-d { display: none !important; }
html.ph-new .mb .mb-im { display: none; }
html.ph-new .mb.mb-img-mode .mb-im { display: block; max-width: 100vw; max-height: calc(100vh - 120px); max-height: calc(100svh - 120px); object-fit: contain; background: #f7f7f5; touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform; }
html.ph-new .mb.mb-img-mode .mb-stage { overflow: hidden; width: 100vw; height: calc(100svh - 120px); align-items: center; justify-content: center; }
html.ph-new .w-slider[data-ph-draw] .w-slide { cursor: zoom-in; }
/* the viewer's arrows sat on the drawing's white; in image mode they move down beside the page count */
html.ph-new .mb.mb-img-mode .mb-p,
html.ph-new .mb.mb-img-mode .mb-n { top: auto; bottom: 10px; margin-top: 0; }

/* footer */
/* OP-381, HOME-16 (Riyad, 30 Sep, Freeform footer screenshot): on the Home phone footer the Contact, Studio and Follow groups sit on one left edge, the edge of the
   Commissions text above them (16 px until 3 Oct; the whole footer is on the 43 px frame since, see the last rule), headings, details and link labels alike; the spacing between the groups (27 px) and inside each (12 px heading to first line)
   is already equal and stays; copy, copyright and the desktop footer are untouched. In Arabic the stack takes the right edge, as the Commissions twin does.
   The "Discuss A Project" button shows smaller (40 px tall, 16/22 type) while its touch area stays 52 px (OP-378's neighbour rule, L18: buttons keep their label case). */
html.ph-new.ph-home .m-footer .footer-info{justify-items:start;text-align:left}
html.ph-new.ph-home .m-footer .footer-info-col{align-items:flex-start;text-align:left}
html.ph-new.ph-home .m-footer .footer-info-text{text-align:left}
html.ph-new.ph-home.mean-ar .m-footer .footer-info{justify-items:end;text-align:right}
html.ph-new.ph-home.mean-ar .m-footer .footer-info-col{align-items:flex-end;text-align:right}
html.ph-new.ph-home.mean-ar .m-footer .footer-info-text{text-align:right}
html.ph-new.ph-home .m-footer .button-group .btn-outline{position:relative;padding:8px 22px;font-size:16px;line-height:22px;overflow:visible}
html.ph-new.ph-home .m-footer .button-group .btn-outline::after{content:"";position:absolute;left:-10px;right:-10px;top:-6px;bottom:-6px}
/* OP-381, 3 Oct: .btn-outline is overflow:hidden, which clipped the ::after layer's taps (touch area 40 px); overflow:visible gives 50 px, 5 px above and below (site-tools/evidence/op381/hit.mjs) */
/* 3 Oct (Riyad: decide for him by best practice): the whole Home phone footer, Commissions text and the Contact, Studio, Follow stack, moves from 16 px onto the page's 43 px text frame (L9), both edges, both languages; the centred button and copyright line are unchanged */
html.ph-new.ph-home .m-footer .padding-global{padding-left:43px!important;padding-right:43px!important}
/* OP-381, 4 Oct (Riyad's tweak list): in Arabic the copyright line ran one line at 346 px, 22 px from the edges while the stack sits on the 43 px frame; it now wraps inside the frame (13/20, balanced, still centred; the site head's one-line rule is white-space:nowrap with a width-fitted size) */
html.ph-new.ph-home.mean-ar .m-footer .mean-copy{white-space:normal!important;font-size:13px!important;line-height:20px!important;padding-left:43px!important;padding-right:43px!important;box-sizing:border-box;text-wrap:balance}
/* OP-414 (Riyad, 30 Sep, Freeform footer: "Make sure these three lines have equal spacing and end on the same line within the same space"; his sketch lays Studio and
   Follow side by side): Contact keeps the first row; under it Studio stands on the frame's left edge and Follow on its right, their headings on one line.
   4 Oct: Follow now has four links (Facebook) against the address's three lines, so "three lines on three lines" no longer holds. The rule now: both columns start
   on one line and end on one line, and each column's own lines are equally spaced within that space. The Follow links stay 44 px apart (each keeps its 44 px row,
   captions.css); the address is spread over the same height: with n links its lines are 44 x (n - 1) / 2 apart (44 px for three links, 66 for four, 88 for
   five; --fn is set from the number of links, three when nothing matches), and the paragraph is pulled up and down by half the difference so its first and last
   lines sit on the first and last links' lines.
   Both columns must fit the 43 px text frame without a wrapped line ("Dubai Design District (d3)" beside "MEAL* Research" needs 19.2 em and a 16 px gap), and the
   Follow column's text ends 4 px inside the frame's edge ("MEAL* Research" ended exactly on it), so the text of these two columns follows the width (L34: type
   obeys the layout): 16 px from 414 px wide, 14.8 px at 390, 14 px at 375, 13.2 px at 360. Narrower than 360 px (the 320 px phones) the two would need type
   under 12 px, so there the footer keeps its one stack. In Arabic the two columns swap sides (Studio on the frame's right edge, where the Arabic stack already
   stands) and the 4 px are on Follow's left. */
@media (min-width:360px){
html.ph-new.ph-home .m-footer .footer-info{grid-template-columns:max-content max-content!important;justify-content:space-between!important;column-gap:16px!important;--fn:3}
html.ph-new.ph-home .m-footer .footer-info:has(>.footer-info-col:nth-child(3)>.footer-info-link:nth-of-type(4)){--fn:4}
html.ph-new.ph-home .m-footer .footer-info:has(>.footer-info-col:nth-child(3)>.footer-info-link:nth-of-type(5)){--fn:5}
html.ph-new.ph-home .m-footer .footer-info>.footer-info-col:first-child{grid-column:1 / -1}
html.ph-new.ph-home .m-footer .footer-info>.footer-info-col:nth-child(n+2) .footer-info-text,html.ph-new.ph-home .m-footer .footer-info>.footer-info-col:nth-child(n+2) .footer-info-link{font-size:min(16px,calc((100vw - 106px) / 19.2))!important;white-space:nowrap!important}
html.ph-new.ph-home .m-footer .footer-info>.footer-info-col:nth-child(n+2) .footer-info-text{line-height:calc(22px * (var(--fn) - 1))!important;margin:calc(22px - 11px * (var(--fn) - 1)) 0!important}
html.ph-new.ph-home .m-footer .footer-info>.footer-info-col:nth-child(3){padding-right:4px!important}
/* the column's own 4 px gap would put the links 48 px apart; taken back between links so they run on 44 px */
html.ph-new.ph-home .m-footer .footer-info>.footer-info-col:nth-child(n+2) .footer-info-link+.footer-info-link{margin-top:-4px!important}
html.ph-new.ph-home.mean-ar .m-footer .footer-info>.footer-info-col:nth-child(2){order:2}
html.ph-new.ph-home.mean-ar .m-footer .footer-info>.footer-info-col:nth-child(3){order:1;padding-right:0!important;padding-left:4px!important}
}

/* home */
/* The phone Home (Riyad, 29 Sep, click-through "Core, Drop Four (Recommended)"): the journey (hero, slogan, About, Selected Work), the board, Details,
   Research (three cards, then the lab) and Commissions & Collaborations stay; the map (The Work Travels), Recognition and Publications leave the phone
   Home, about 11 screens instead of 19. Both logo sections stay on Press, one tap away. Home only (html.ph-home, set by journey.js; written twice to keep the specificity of the body:has() it replaced); other pages keep their sections. */
html.ph-new.ph-home.ph-home body .main-wrapper>.section.hide-mobile,html.ph-new.ph-home.ph-home body .main-wrapper>.section.bg-neutral.ph-lg{display:none!important}
/* OP-380, HOME-01 (Riyad, 30 Sep, Freeform screen 1): the settled hero (the N composition and the four-line lockup, 313.5 x 535.5 px of ink on live's own
   geometry) sits centred in the room between the hamburger's lower edge and the safe bottom, with equal clearance at the sides; on a screen too small for it
   at full size it shrinks to fit and the N lines keep their 2 px (home.js sets --ph-hy, --ph-hs, --ph-bw). The motion inside is live's own, untouched: only the
   box that holds it moves. */
html.ph-new.ph-home .lv-hero{transform:translateY(var(--ph-hy,0px)) scale(var(--ph-hs,1));transform-origin:50% 30px}
html.ph-new.ph-home .lv-hero .lv-n-left,html.ph-new.ph-home .lv-hero .lv-n-diagonal{border-left-width:var(--ph-bw,2px)}
html.ph-new.ph-home .lv-hero .lv-n-right{border-right-width:var(--ph-bw,2px)}
/* OP-330 / OP-220, HOME-12 (Riyad, 30 Sep, Freeform screen 11): the blue Details heading sits on the phone text frame (1 of 9 columns in from each side, L9: 43 px at
   390), in the slogan face (Fugue) it already has; the Designer's section padding gave it 16 px. Its words drop in as the other slogans' do (home.js). text-wrap:balance is asked for but WebKit ignores it on a heading this long (8 lines at 390; site-reviewer, 3 Oct). */
html.ph-new .is-horisontal-scroll>*>h2.heading-style-h1,html.ph-new .is-horisontal-scroll h2.heading-style-h1{padding-left:calc(11.1111vw - 16px);padding-right:calc(11.1111vw - 16px);box-sizing:border-box;text-wrap:balance}
/* the Details heading's words fade and unblur one after another but do not drop: dropping 28 px made each word overlap the line above while it came in, which check-site
   reads as covered text (3 Oct) */
html.ph-new.slg-js .is-horisontal-scroll .slg-w{transform:none!important}

/* OP-413 (Riyad, 30 Sep, Freeform screen 11, Details): "As the images slide behind it, it slowly starts turning to white as the image intersects with it and then it
   stays there as you slide through the images. The images should fill the entire height of the screen"; "Images should have a small caption underneath for the title of
   every project In the bottom right corner".
   The heading holds 77 px down (24 px under the header, as the About and Selected Work slogans; its block's own 48 px top padding makes the sticky top 29 px) for the
   whole strip, so the photos rise behind it and then slide sideways behind it; its letters are blue above the photo's upper edge and off-white over the photo (a 48 px
   soft edge that home.js keeps on the photo's edge, --ph-dx), so it turns white line by line as the photo crosses it and stays white through the photos. It leaves with
   the last photo (the sticky box is the strip's own grid).
   Each photo is one screen: the strip is the screen's height (the dynamic viewport, so it fills the screen with the browser bar in or out), every card the screen's
   width, the photo fills the whole card. The caption is the card's own caption text from the page (the project's name first), in the caption role 12/18, off-white,
   on the photo in its bottom right corner on the text frame, with no strip behind it (Riyad, 4 Oct: "the bottom of the details is showing a white banner. I never
   asked for that. I asked for the captions of the projects in white"). The site's phone strip script (meanhomecss3f) measures the strip and track, so its travel follows by itself. */
html.ph-new.ph-home .is-horisontal-scroll .h-scrolling-grid>.padding-global{position:sticky;top:29px;z-index:3;pointer-events:none}
html.ph-new.ph-home .is-horisontal-scroll .h-scrolling{height:100svh!important;height:100dvh!important;min-height:0!important;max-height:none!important}
/* a sticky box cannot travel into its parent's padding, and the strip script makes the strip's travel as the grid's bottom padding: the same length is given as a block
   after the grid's content instead (home.js copies it to --ph-pad), so the heading can stay for the whole strip */
html.ph-new.ph-home .is-horisontal-scroll .h-scrolling-grid{padding-bottom:0!important}
html.ph-new.ph-home .is-horisontal-scroll .h-scrolling-grid::after{content:"";display:block;height:var(--ph-pad,0px)}
html.ph-new.ph-home .is-horisontal-scroll .h-scrolling-track{height:100%!important}
html.ph-new.ph-home .is-horisontal-scroll .h-scrolling-card{display:flex!important;flex-direction:column!important;align-items:stretch!important;width:100vw!important;min-width:100vw!important;height:100%!important;padding:0!important}
html.ph-new.ph-home .is-horisontal-scroll .h-scrolling-card-img{position:relative!important;inset:auto!important;flex:1 1 0!important;min-height:0!important;width:100%!important;height:auto!important;object-fit:cover!important}
/* off-white letters need a ground they can be read on (large text, 3:1): measured behind the heading on each of the ten photos (4 Oct, 390 x 844), five are too pale
   in their brightest tenth (1.4:1 to 2.2:1; the Mawj chair's ground is paler than the letters). Each of those takes the card's own shade layer, the site's #181818, only as
   strong as it needs: Repeat's ceramic wall 20%, The Migrant Kitchen, Le Monde d'Hermes and Modulus 40%, Mawj 50%; the other five none. Keyed by photo, so a new order keeps
   them. ponytail: a new pale photo added in the Designer gets no shade until it is measured and listed here (--ph-dsh:0 on all is Riyad's words to the letter). */
html.ph-new.ph-home .is-horisontal-scroll .h-scrolling-card-bg{display:block!important;position:absolute!important;inset:0!important;z-index:1!important;background:var(--base-color-neutral--black,#181818)!important;opacity:var(--ph-dsh,0)!important;pointer-events:none!important}
html.ph-new.ph-home .is-horisontal-scroll .h-scrolling-card:has(img[src*="69c518191056258f1a285b72"]){--ph-dsh:.2}
html.ph-new.ph-home .is-horisontal-scroll .h-scrolling-card:has(img[src*="69c518191056258f1a2858d3"]),html.ph-new.ph-home .is-horisontal-scroll .h-scrolling-card:has(img[src*="69c518191056258f1a28591d"]),html.ph-new.ph-home .is-horisontal-scroll .h-scrolling-card:has(img[src*="6ab3fb24b36fd14f8897abe2"]){--ph-dsh:.4}
html.ph-new.ph-home .is-horisontal-scroll .h-scrolling-card:has(img[src*="69c518191056258f1a285812"]){--ph-dsh:.5}
html.ph-new.ph-home .is-horisontal-scroll .h-scrolling-card-details{display:block!important;position:absolute!important;inset:auto 0 0 0!important;z-index:2!important;opacity:1!important;max-width:none!important;margin:0!important;padding:0 11.1111vw calc(12px + env(safe-area-inset-bottom,0px))!important;text-align:right!important;font-family:'Helvetica Neue LT Std',Arial,sans-serif!important;font-weight:400!important;font-size:12px!important;line-height:18px!important;letter-spacing:normal!important;color:var(--base-color-neutral--white,#f7f7f5)!important;background:none!important}
html.ph-new.ph-home .is-horisontal-scroll h2.heading-style-h1.ph-dw{background-image:linear-gradient(to bottom,var(--base-color-brand--blue,#0f0e9f) calc(var(--ph-dx,9999px) - 24px),var(--base-color-neutral--white,#f7f7f5) calc(var(--ph-dx,9999px) + 24px));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}
html.ph-new.ph-home .is-horisontal-scroll h2.heading-style-h1.ph-dw .slg-w{opacity:1!important;filter:none!important;transition:none!important}

/* OP-380, HOME-02 (Riyad, 30 Sep, Freeform screens 2 and 3; decided 4 Oct: the Ns meet the screen's midline, phones only): the N chain under the first slogan.
   "Here only one N appears (Larger size, determined by the landing of Ns in Screen 3...). In the next screens it expands into the N grid"; "The Ns should be aligned
   with the hamburger menu"; "Center the Ns to the midsection of the screen and when you reach the midsection they should all cascade down to the bottom layer like the
   desktop version". The five Ns are larger (home.js sizes them: the right column ends on the hamburger's right edge, the left one starts on the text frame, and the
   whole staircase fits between the header band and its mirror below the midline); they come in as one N (all five on the first one's place, --ph-ne 0) and spread into
   the staircase as the chain rises (--ph-ne 1 when the whole chain is on screen). When the chain's middle reaches the middle of the screen (.ph-nf) every N drops into
   the bottom row in 0.8 s, straight, and comes back in 0.5 s when scrolled back (the desktop chain's own timing, OP-184). Lines stay 2 px (the page's non-scaling
   stroke). The chain is cut off 77 px down (--ph-nc), the line the About slogan holds on, so no N passes under the menu button. Reduced motion: the whole staircase,
   still (home.js sets nothing but the size and the cut). The hero's own Ns and logo (lv-*) are not touched. */
html.ph-new.ph-home .illustration.ph-nx{min-height:0!important;height:calc(var(--ph-nh,100px)*4)!important;clip-path:inset(var(--ph-nc,0px) -100vw -100vh -100vw)}
html.ph-new.ph-home .illustration.ph-nx>.illustration-item{top:0!important;left:auto!important;right:var(--ph-nr,0px)!important;width:var(--ph-nw,68.89px)!important;height:var(--ph-nh,100px)!important;transform:translate(calc(var(--c)*-100%*var(--ph-ne,1)),calc(var(--r)*100%*var(--ph-ne,1)))!important;transition:none!important}
html.ph-new.ph-home .illustration.ph-nx>.illustration-item:nth-child(1){--c:0;--r:0}
html.ph-new.ph-home .illustration.ph-nx>.illustration-item:nth-child(2){--c:0;--r:1}
html.ph-new.ph-home .illustration.ph-nx>.illustration-item:nth-child(3){--c:1;--r:2}
html.ph-new.ph-home .illustration.ph-nx>.illustration-item:nth-child(4){--c:1;--r:3}
html.ph-new.ph-home .illustration.ph-nx>.illustration-item:nth-child(5){--c:2;--r:3}
html.ph-new.ph-home .illustration.ph-nx .illustration-item-inner{transition:transform .5s cubic-bezier(.55,.055,.675,.19)}
html.ph-new.ph-home .illustration.ph-nx.ph-nf .illustration-item-inner{transform:translateY(calc((3 - var(--r))*100%));transition:transform .8s linear}
html.ph-new.ph-home .section.bg-primary.ph-ns{padding-top:var(--ph-np,0px)!important}

/* lang */
/* CPR-15 / HOME-03 / OP-347 (Riyad, 4 Oct 2026): the shared language pair in the footer and the compact EN | ع control at the foot of the open menu (phones only).
   Two 44 px buttons side by side, the current one filled off-white with black type, the other a 1 px off-white line (the site's button rule); the footer pair sits in
   the footer's own 43 px text frame, 24 px above the copyright line. Type: English in Fugue, Arabic in Lyon Arabic (LAR) Semibold, as everywhere. */
html.ph-new .mean-lp{display:flex;gap:10px;margin:0 0 24px;padding:0}
html.ph-new .mean-lp-foot{margin-top:42px;justify-content:center}
html.ph-new .mean-lp-b{appearance:none;-webkit-appearance:none;margin:0;min-height:44px;min-width:44px;padding:0 18px;border:1px solid var(--base-color-neutral--white,#f7f7f5);border-radius:0;background:transparent;color:var(--base-color-neutral--white,#f7f7f5);font:400 18px/24px Fugue,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s,color .15s}
html.ph-new .mean-lp-b.is-ar{font-family:LAR,serif;font-weight:600;font-size:20px}
html.ph-new .mean-lp-b[aria-pressed="true"],html.ph-new .mean-lp-b:active{background:var(--base-color-neutral--white,#f7f7f5);color:var(--base-color-neutral--black,#181818)}
html.ph-new .mean-lp-b:focus-visible{outline:2px solid var(--base-color-neutral--white,#f7f7f5);outline-offset:2px}
html.ph-new .mean-lp-menu{margin:24px 0 24px;padding:0;justify-content:flex-start}
html.ph-new .mean-lp-menu .mean-lp-b{min-width:56px;padding:0 14px}
/* Home's footer stack sits on the frame's left edge (the right edge in Arabic, as the Commissions twin); every other footer is centred */
html.ph-new.ph-home .mean-lp-foot{justify-content:flex-start}
html.ph-new.ph-home.mean-ar .mean-lp-foot{justify-content:flex-end}

/* mask */
/* OP-417, the menu button's mask (Riyad, Freeform phone board: "This padding should be preserved site wide use masks if needed"; "Text should never touch the
   hamburger"). Inner pages: while the page is scrolled down the header's fill and MEAN* go away (html.hr-off, the site's OP-181 script) and only the menu button
   stays, fixed, its lines 20 px from the top and right. The text frame ends 11.7 px inside the lines (346.7 against 335 at 390), so every full line passed
   under them. While the fill is away (and for the 0.3 s it takes to come back, html.hrT) a patch stands behind the button: exactly the button's 60 px box,
   from the top of the screen to 12 px under the lines, in the colour of the ground behind it (mask.js reads that colour from the page itself, piece by piece,
   so a patch that sits across two sections is two colours with the edge where the sections meet). No shadow, no soft edge, and nothing over a photograph,
   a film or a hero strip. Over a project or Studio hero strip (html.pg-gal) there is no patch at all. The open menu, the skip link, the shown bar and the Home page are not touched (Home's header is not .is-static).
   The header's own container is hidden and takes no taps in this state (the site's rule), so the patch and its pieces say visible for themselves; it takes taps only where the
   button above it already does (the top 1 px of the screen apart). */
html.ph-new .ph-mk{display:none}
html.ph-new.hr-off:not(.pg-gal) body .header.is-static:not(:has(.w--open)) .ph-mk,html.ph-new.hrT:not(.pg-gal) body .header.is-static:not(:has(.w--open)) .ph-mk{display:block;position:fixed;top:0;margin:0;padding:0;border:0;background:none;box-shadow:none;overflow:hidden;visibility:visible!important;pointer-events:auto!important}
html.ph-new .ph-mk>i{display:block!important;position:absolute;left:0;right:0;visibility:visible!important;opacity:1!important}

/* research */
/* Research on the phone Home (Riyad, 29 Sep, click-through relayed by Website 11: "The ted on top of the two books then the lab that wa the ted takes
   full width"; it came after his "maybe make them scroll side ways similar to the desktop but only 3", so the sideways row is gone): TED full width, the two
   Assembled Identities books side by side under it at one height (L36), then MEAL* full width. The books' frames are 4:5 so each cover fills its half
   instead of shrinking in a 16:10 frame; in a half-width column the book captions keep their title and subtitle and leave out the description. The four older research projects stay hidden (Research 1.0.21).
   Then, same day: "Exactly as above, but make them move up and sideways like the desktop": the cards come in with research.js. */
html.ph-new .rs .rs-stk {
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
}
html.ph-new .rs .rs-c:not(.is-book) {
  grid-column: 1 / -1;
}
html.ph-new .rs .rs-c.is-book .rs-a {
  aspect-ratio: 4 / 5;
}
html.ph-new .rs .rs-c.is-book .rs-cd {
  display: none;
}
/* the cards come in from the right (research.js), past the screen's edge: clip it so the page never scrolls sideways */
html.ph-new .rs .rs-stg {
  overflow-x: clip;
}
/* OP-331, HOME-13 (Riyad, 30 Sep, Freeform screen 12): the Research title and introduction sit on the phone text frame, 1 of 9 columns in from each side (L9: 43 px at
   390), as every other Home text; the cards below keep their full width (TED "takes full width", 29 Sep). rs.css gave both 16 px. */
html.ph-new .rs .rs-in{margin-left:11.1111vw;margin-right:11.1111vw}
html.ph-new .rs .rs-bar{padding-left:11.1111vw;padding-right:11.1111vw}
/* HOME-15: the TED card's talk title (the subtitle line under "TED") is the link to the talk (research.js wraps its words; the same address as the picture's
   link): underlined like the footer's links, a block at least 44 px tall */
html.ph-new .rs .rs-tl{display:block;min-height:44px;color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
html.ph-new .rs .rs-tl:focus-visible{outline:2px solid currentColor;outline-offset:2px}
/* HOME-15: the TED description shows only after More (research.js). The button is the site's text link, underlined as the talk's title above it, in a row 44 px tall */
html.ph-new .rs .rs-c.ph-ted-more:not(.ph-ted-open) .rs-cd{display:none!important}
html.ph-new .rs .rs-more{appearance:none;-webkit-appearance:none;display:flex;align-items:center;min-height:44px;min-width:44px;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;font-size:var(--ph-body,16px);line-height:var(--ph-body-lh,24px);text-align:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.ph-new .rs .rs-more:focus-visible{outline:2px solid currentColor;outline-offset:2px}
/* OP-331, HOME-13 (Riyad, 30 Sep, Freeform screens 11-12: "unify the font to match all slogans"; "SAME ANIMATION for other slogans, should be smooth"; "the slogan loads
   up the same as all the other slogans and then sticks the same way the other slogans do. The text goes behind it on a transparent mask"): the Research title takes the
   phone slogan size, 36/36 (rs.css had 40/44). Its words keep their places from the start, so the title no longer grows line by line and pushes the page while it builds,
   and they drop in as the other slogans' words do (the Home head's .slg-w values: 28 px, 2.4 px blur, 0.5 s, 90 ms apart; research.js adds .ph-sl-in once the title is
   30% into view). These rules are !important so the Research script's own sideways word entry stands down on phones. The hold and the mask are in research.js.
   Reduced motion: the words simply stand (rs.js never hides them then). */
html.ph-new .rs .rs-sl{font-size:36px!important;line-height:36px!important}
@media (prefers-reduced-motion:no-preference){
html.ph-new .rs .rs-sl span[aria-hidden]{display:inline-block!important;opacity:0!important;transform:translateY(-28px) scale(.992)!important;filter:blur(2.4px)!important}
html.ph-new .rs .rs-sl.ph-sl-in span[aria-hidden]{opacity:1!important;transform:none!important;filter:none!important;transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1),filter .5s cubic-bezier(.2,.8,.2,1)}
}

/* studio */
/* Studio on phones, page-local (phone handoff ST-01, 03, 07, 08, 11, 13, 16; rows OP-228, OP-202, OP-181, OP-210, OP-333). Phone bundle only
   (html.ph-new), Studio only (its data-wf-page), 767 px and below. --stb is the 43 px text frame (L9): the rules and the text sit on it. The header
   and the founder's picture are on the 20 px band from MEAN* to the menu button (OP-417, OP-418; Riyad, 4 Oct: the ?band=20 preview is the default;
   the header rules are sitewide in band.css). */
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"]{--stb:43px;--sth:62px;--stg:var(--base-color-neutral--white,#f7f7f5)}
/* ST-03 the page title in the middle of the visible first screen, as the project pages */
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .hero-section.is-inner-page h1.heading-style-h1:not(#_){left:50%!important;right:auto!important;top:50svh!important;bottom:auto!important;margin:0!important;transform:translate(-50%,-50%)!important;text-align:center!important;white-space:nowrap}
/* the band: About, the profile and Collaborators */
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] [data-st=about]:not(#_),
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] [data-st=profile]:not(#_){width:calc(100vw - 2*var(--stb))!important;max-width:none!important;margin-left:calc(var(--stb) - 16px)!important;margin-right:0!important}
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .section:has(.team-collection-wrapper) .divider:not(#_),
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .section:has(.team-collection-wrapper) .container-large:not(#_){width:calc(100vw - 2*var(--stb))!important}
/* ST-07, ST-08 About: each language opens on the same frame (rule, 24 px, heading, 24 px, text). The rule and heading hold under the header
   while that language's text passes behind them (the heading's own ground hides it, up to the top of the screen), and leave with its last line. */
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] [data-st=about] > .divider:not(#_){display:none!important}
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] [data-st=about-grid]:not(#_){padding-top:0!important;row-gap:68px!important}
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] [data-st=about-grid] > .section-wrapper:not(#_){margin-top:0!important;padding-top:0!important}
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] [data-st=about-grid] > .section-wrapper > h2.heading:not(#_){position:sticky!important;top:0!important;z-index:5;margin:calc(-1*var(--sth)) 0 0!important;padding:calc(var(--sth) + 26px) 0 24px!important;background:var(--stg)!important}
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] [data-st=about-grid] > .section-wrapper > h2.heading:not(#_)::before{content:"";position:absolute;left:0;right:0;top:var(--sth);height:2px;background:var(--base-color-brand--blue,#0f0e9f)}
/* OP-421 the end of About ("Keep padding equal here", marked above and below the rule that follows the Arabic text): the same 24 px from the last
   line to the rule as from the rule to the heading under it (it was 68 above, 24 below) */
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] [data-st=about]:not(#_){margin-bottom:24px!important}
/* ST-11, ST-13 profile: the same frame under its rule; 48 px before the picture and before Talks, Selected Press and Education; the credit at the caption size (12/18, OP-212) */
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] [data-st=profile] > .divider:not(#_){margin-bottom:24px!important}
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] [data-st=profile] > .section-grid:not(#_){padding-top:0!important;row-gap:48px!important}
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] [data-st=profile] > .section-grid > .section-wrapper:not(#_){margin-top:0!important;padding-top:0!important}
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] [data-st=profile] .rj-portrait:not(#_){margin-bottom:48px!important}
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] [data-st=profile] .rj-portrait-img:not(#_){width:100%!important;height:auto!important}
/* OP-418: the founder's picture runs on the band from MEAN* to the menu button (20 px each side). The figure carries the picture's blue (the photo is
   screened over it), so the whole figure goes to the band; its equal negative margins keep the column on the 43 px frame, and the credit is padded
   back onto it */
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] [data-st=profile] .rj-portrait:not(#_){width:calc(100vw - 2*var(--ph-band,20px))!important;max-width:none!important;margin-left:calc(var(--ph-band,20px) - var(--stb))!important;margin-right:calc(var(--ph-band,20px) - var(--stb))!important}
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] [data-st=profile] .rj-portrait-credit:not(#_){padding-left:calc(var(--stb) - var(--ph-band,20px))!important;padding-right:calc(var(--stb) - var(--ph-band,20px))!important}
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] [data-st=profile] .rj-portrait-credit:not(#_){font-size:12px!important;line-height:18px!important}
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] [data-st=profile] p + h3.heading:not(#_),
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] [data-st=profile] p + .rj-gap + h3.heading:not(#_){margin-top:24px!important}
/* ST-15, ST-16 the team stage (with patch/team.js, which replaces site-tools/mobile/src/team.js): the section's rule and heading ride in the
   stage (rule under the header, heading 24 px under it, portrait 24 px under the heading), so rule, heading and portrait are one frame from the
   moment the section arrives until it leaves. The page's own rule and heading stay for readers, unseen. Not under reduced motion or Pause Motion. */
@media (prefers-reduced-motion:no-preference){
html.ph-new.ph-tm:not(.mean-still)[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .section:has(.ph-tm-track) .padding-global > .divider:not(#_),
html.ph-new.ph-tm:not(.mean-still)[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .section:has(.ph-tm-track) .section-wrapper:has(> h2.heading):not(#_){opacity:0!important}
html.ph-new.ph-tm:not(.mean-still)[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .section:has(.ph-tm-track) .padding-section-medium:not(#_){padding-top:24px!important}
html.ph-new.ph-tm:not(.mean-still)[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .team-collection-wrapper:not(#_){margin-top:calc(-1*var(--tm-top,138px))!important}
html.ph-new.ph-tm:not(.mean-still)[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .ph-tm-head{position:absolute;left:var(--stb);right:var(--stb);top:var(--sth);border-top:2px solid var(--base-color-brand--blue,#0f0e9f);padding-top:24px;pointer-events:none;z-index:1}
/* OP-333, 3 Oct (every person has a stop): going from one row to the next the portraits travel up the screen, so the header and the heading keep
   their own ground, as About's held heading does (ST-08): above the rule to the top of the screen, and under it to the portrait's top edge */
html.ph-new.ph-tm:not(.mean-still)[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .ph-tm-head::before,
html.ph-new.ph-tm:not(.mean-still)[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .ph-tm-head::after{content:"";position:absolute;left:calc(-1*var(--stb));right:calc(-1*var(--stb));background:var(--stg);z-index:-1}
html.ph-new.ph-tm:not(.mean-still)[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .ph-tm-head::before{top:calc(-1*var(--sth) - 2px);height:calc(var(--sth) + 2px);background:linear-gradient(var(--base-color-brand--blue,#0f0e9f),var(--base-color-brand--blue,#0f0e9f)) var(--stb) 100%/calc(100% - 2*var(--stb)) 2px no-repeat,var(--stg)}
html.ph-new.ph-tm:not(.mean-still)[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .ph-tm-head::after{top:0;bottom:-24px}
html.ph-new.ph-tm:not(.mean-still)[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .ph-tm-head p{margin:0;font-family:'Helvetica Neue LT Std',Arial,sans-serif;font-weight:700;font-size:var(--ph-sub,26px);line-height:var(--ph-sub-lh,30px);color:var(--base-color-brand--blue,#0f0e9f);text-align:start}
}
html.ph-new.ph-tm[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .ph-tm-head{display:none}
html.ph-new.ph-tm[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .ph-tm-cap{white-space:normal}
html.ph-new.ph-tm[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .ph-tm-cap .ph-tm-name{white-space:nowrap;width:max-content}
html.ph-new.ph-tm[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .ph-tm-cap .ph-tm-bio{font-weight:400;font-size:16px;line-height:24px;margin-top:8px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
html.ph-new.ph-tm[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .ph-tm-cap .ph-tm-bio:empty{display:none}
html.ph-new.ph-tm[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .ph-tm-cap .ph-tm-more{font-weight:400;font-size:16px;line-height:24px;text-decoration:underline;text-underline-offset:3px;pointer-events:auto;cursor:pointer;width:max-content;padding:10px 0;margin:-2px 0 -10px}
@media (prefers-reduced-motion:no-preference){
html.ph-new.ph-tm:not(.mean-still)[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .ph-tm-head{display:block}
}
/* found while testing, 4 Oct: in Arabic the stage's heading, the name and the years fell back to a system face. They take Lyon Arabic Text as the
   page's own Arabic does (mean-type's LAR: Bold 20/27 for the heading and name, Regular at the body's 1.45 for the years); a summary that is
   still English keeps its own reading direction, so its full stop stays at the end */
html.ph-new.ph-tm[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .ph-tm-head[dir=rtl] p:not(#_){font-family:LAR,'Helvetica Neue LT Std',Arial,sans-serif;font-weight:700;line-height:var(--ph-sub-lh-ar,34px);letter-spacing:0}
html.ph-new.ph-tm[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .ph-tm-cap[dir=rtl] .ph-tm-name:not(#_){font-family:LAR,'Helvetica Neue LT Std',Arial,sans-serif;font-weight:700;line-height:27px;letter-spacing:0}
html.ph-new.ph-tm[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .ph-tm-cap[dir=rtl] .ph-tm-years:not(#_){font-family:LAR,'Helvetica Neue LT Std',Arial,sans-serif;font-weight:400;line-height:23.2px;letter-spacing:0}
html.ph-new.ph-tm[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .ph-tm-cap[dir=rtl] .ph-tm-bio:not(#_){unicode-bidi:plaintext;text-align:right}
/* found while testing (published page, before this patch): with reduced motion or Pause Motion the team at rest let the page scroll 169 px
   sideways, from the unseen 280 px word boxes the bio script measures. The resting stage now clips sideways only. */
@media (prefers-reduced-motion:reduce){html.ph-new.ph-tm[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .ph-tm-stage:not(#_){overflow-x:clip!important;overflow-y:visible!important}}
html.ph-new.ph-tm.mean-still[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .ph-tm-stage:not(#_){overflow-x:clip!important;overflow-y:visible!important}
/* ST-02 (OP-301, Studio's own pin): the opening section is as tall as the largest screen (browser bars away), so no strip of page ground shows
   under the photos when the bars slide off; with the bars on, the extra height sits behind them. The title stays in the middle of the small screen. */
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .hero-section.is-inner-page:not(#_),
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .hero-section.is-inner-page .h-scrolling:not(#_){height:100lvh!important;max-height:none!important}
/* ST-04 (OP-301): the project pages' arrow (mean-strip's shape, size, colour, place and bounce) at the foot of the opening photos, until they leave */
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .st-cue{position:absolute;left:50%;top:calc(100svh - 64px);width:20px;height:32px;margin-left:-10px;color:var(--base-color-neutral--white,#f7f7f5);pointer-events:none;z-index:3}
html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .st-cue svg{display:block}
@media (prefers-reduced-motion:no-preference){
html.ph-new:not(.mean-still)[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .st-cue{animation:st-cue 1.6s infinite}
@keyframes st-cue{50%{transform:translateY(10px)}}
}
@media (orientation:landscape){html.ph-new[data-wf-page="6a78a35910b5fe9a5ab86cb8"] .st-cue{display:none}}

/* team */
/* OP-333 (Riyad, 29 Sep, "Build As Filmed"; see team.js): the pinned stage, the team as one grid four across (every portrait whole, 3:4; rows 36 px apart, so the name
   under the portrait the camera stops on always lands on clear ground), the caption in the subtitle
   style (Website 1's mean-type: Helvetica Neue LT Std Bold 20/26) with the years at the body size, on the 43 px frame (L9) */
html.ph-new.ph-tm .ph-tm-track{position:relative;height:calc(100svh + var(--tm-run,280)*1svh)}
html.ph-new.ph-tm .ph-tm-stage{position:sticky;top:0;height:100svh;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;overflow:clip}
html.ph-new.ph-tm .ph-tm-stage .team.w-dyn-items{position:absolute!important;left:0;top:0;margin:0!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:none!important;grid-auto-rows:auto!important;height:auto!important;min-height:0!important;align-content:start!important;align-items:start!important;gap:36px 10px!important;transform-origin:0 0;will-change:transform}
html.ph-new.ph-tm .ph-tm-stage .team-card{grid-row:auto!important;grid-column:auto!important;display:block!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;min-width:0}
html.ph-new.ph-tm .ph-tm-stage .team-person{width:100%!important;min-width:0!important;max-width:none!important;height:auto!important;aspect-ratio:3/4;overflow:hidden;cursor:pointer;margin:0!important}
html.ph-new.ph-tm .ph-tm-stage .team-person-img{width:100%!important;height:100%!important;object-fit:cover;display:block;margin:0!important}
html.ph-new.ph-tm .ph-tm-stage .team-person:focus-visible{outline:2px solid var(--base-color-brand--blue,#0f0e9f);outline-offset:3px}
/* the words (display: contents on the page, for its subgrid) stay in the page as one box at a card's width, unseen (visibility: out of the tab order too): the bio script measures them to build each Read more,
   which a tapped portrait clicks */
html.ph-new.ph-tm .ph-tm-stage .team-card{position:relative}
html.ph-new.ph-tm .ph-tm-stage .team-card-info{display:block!important;position:absolute!important;left:0;top:0;width:280px!important;margin:0!important;visibility:hidden!important;pointer-events:none}
html.ph-new.ph-tm .ph-tm-cap{position:absolute;left:43px;right:43px;top:0;white-space:nowrap;text-align:start;opacity:0;pointer-events:none;color:var(--base-color-brand--blue,#0f0e9f)}
html.ph-new.ph-tm .ph-tm-cap p{margin:0;font-family:'Helvetica Neue LT Std',Arial,sans-serif}
html.ph-new.ph-tm .ph-tm-cap .ph-tm-name{font-weight:700;font-size:20px;line-height:26px}
html.ph-new.ph-tm .ph-tm-cap .ph-tm-years{font-weight:400;font-size:16px;line-height:24px}
/* reduced motion or Pause Motion: the whole team at rest, no pinned scroll */
@media (prefers-reduced-motion:reduce){html.ph-new.ph-tm .ph-tm-track{height:auto}html.ph-new.ph-tm .ph-tm-stage{position:relative;height:auto;width:auto;margin-left:0;overflow:visible}html.ph-new.ph-tm .ph-tm-stage .team.w-dyn-items{position:relative!important}html.ph-new.ph-tm .ph-tm-cap{display:none}}
html.ph-new.ph-tm.mean-still .ph-tm-track{height:auto}
html.ph-new.ph-tm.mean-still .ph-tm-stage{position:relative;height:auto;width:auto;margin-left:0;overflow:visible}
html.ph-new.ph-tm.mean-still .ph-tm-stage .team.w-dyn-items{position:relative!important}
html.ph-new.ph-tm.mean-still .ph-tm-cap{display:none}

/* type */
/* Body text on phones (Riyad, 28 Sep: "Make sure the body text corresponds to the settings on the desktop app, and make sure it's legible on the phones, as per
   best practices for UX/UI, and versatile"). The desktop body is Helvetica Neue Roman 400 at 26/26 beside 56 px titles; phones had it at 15/23 (OP-115)
   beside 34 px titles. 16/24 is the phone minimum for body text in UX practice (iOS reads 17 pt, Material 16), keeps the desktop's body-to-title
   proportion (26/56 = 0.46, 16/34 = 0.47), a 1.5 line height and about 40 characters a line on the 43 px frame; the Arabic follows (captions.css).
   Same face, weight and colours as desktop; one blank line between paragraphs is one line of body text. Set once here (--ph-body, --ph-body-lh).
   Each rule below is the OP-115 rule in meanhomecss2b with one class more (html.ph-new) and the same ids, so it outranks exactly that rule and nothing
   that already outranked it (the reviewer, round 3: three ids had beaten Studio's own gaps and doubled them). Subtitles (Studio names, FAQ questions,
   Legal headings) are Website 1's mean-type 1.2.0 (20/26 bold on phones, Riyad, 29 Sep), not set here. Captions (12/18, OP-212), the footer and
   the Fugue headings keep their own sizes. Zoom stays open (the viewport allows it). */
html.ph-new{--ph-body:16px;--ph-body-lh:24px}
html.ph-new body p[class*='paragraph-col-']:not(#_),html.ph-new body [data-st] p:not(.text-align-right):not(#_),html.ph-new body [data-st] p:not(.text-align-right) a:not(#_),html.ph-new body .section.bg-neutral .section-wrapper p.text-size-large:not(#_),html.ph-new body .section.bg-neutral form .b-form-label:not(#_),html.ph-new body .team-collection-wrapper .team-card-details:not(#_){font-size:var(--ph-body)!important;line-height:var(--ph-body-lh)!important}
html.ph-new body [data-st] p.text-align-right:not(#_){font-size:var(--ph-body)!important}
html.ph-new body .page-wrapper .section p.text-size-large:not(#_):not(#__),html.ph-new body .page-wrapper .m-footer p.text-size-large:not(#_):not(#__){font-size:var(--ph-body)!important;line-height:var(--ph-body-lh)!important}
html.ph-new body [data-faq] .section-wrapper:not(#_),html.ph-new body .section-wrapper[data-legal]:not(#_),html.ph-new body .rs .rs-in:not(#_),html.ph-new body .rs .rs-cap:not(#_),html.ph-new body .rs .rs-cw:not(#_){row-gap:var(--ph-body-lh)!important;gap:var(--ph-body-lh)!important}
/* Home's one-line gap (meanhomecss2b's Home-only op98 block: it runs only where the Home hero is; html.ph-home is set by journey.js on the Home,
   written twice to keep the specificity of the body:has(.hero-section.is-home) it replaced, reviewer round 5). Studio (gap 0, margins), Connect and the sector
   pages (Webflow's gap-medium, 16 px, as on desktop) keep their own spacing (the reviewer, round 3) */
html.ph-new.ph-home.ph-home body .page-wrapper .section-wrapper:has(>p.text-size-large){row-gap:var(--ph-body-lh)!important;gap:var(--ph-body-lh)!important}
html.ph-new body [data-faq] .section-wrapper>div>p+p:not(#_),html.ph-new body .section-wrapper[data-legal]>div>p+p:not(#_),html.ph-new body .team-collection-wrapper .team-card-details+.team-card-details:not(#_){margin-top:var(--ph-body-lh)!important}
html.ph-new body [data-faq] .section-wrapper>div>p.text-weight-bold:not(#_),html.ph-new body .section-wrapper[data-legal]>div>p.text-weight-bold:not(#_),html.ph-new body [data-st] p:not(#_),html.ph-new body [data-st] .heading:not(#_),html.ph-new body .section:has(.team-collection-wrapper) .heading:not(#_),html.ph-new body .team-collection-wrapper .team-card-name:not(#_){margin-bottom:var(--ph-body-lh)!important}
html.ph-new body [data-st=profile] p:not(#_){margin-bottom:var(--ph-body-lh)!important}
html.ph-new body [data-st] .section-wrapper>p:last-child:not(#_){margin-bottom:0!important}
/* Recognition, Publications and Press: the words under each logo (award names, press quotes) read at the desktop's own size, 14/21; on phones they had
   shrunk to 12 to 12.6 px, smaller than on desktop */
html.ph-new body .logo-link p.text-size-regular:not(#t1):not(#t2):not(#t3){font-size:14px!important;line-height:21px!important}
/* OP-420 (Riyad, Freeform phone board: "Increase subheading font size (double or 1.6X?)"; his pick, 4 Oct 2026: 1.6X = 26 px). Every subheading on
   phones is 26 px bold on 30 px lines (body 16/24, slogans 36/36); in Arabic 26 px Lyon Arabic Text Bold on 34 px lines. They were 20/26 (20/27 in
   Arabic) from mean-type 1.2.x and the bundle's own rules, and 27/32.4 on the project pages' section headings. Subheadings are the section headings
   in page text: Studio (About, the founder's name, Talks, Selected Press, Education, Collaborators, the team stage's heading in studio.css), the FAQ
   questions on Connect, the headings of Research, Legal and the sector pages, and on project pages the section headings (Design, Drawings...) and
   the bold lines inside the texts. Not changed: the names on the team stops (one line each, L38), menu items, buttons, facts labels, captions,
   slogans and page titles, the bold paragraphs over the Home walk and the Research card titles (16/24 bold, not the subtitle role).
   Only size and line height are set, with six ids so they outrank mean-type (four), cpr.css's FAQ rule (four) and project.css; margins and gaps
   are untouched, so every gap to a heading's box measures as before. */
html.ph-new{--ph-sub:26px;--ph-sub-lh:30px;--ph-sub-lh-ar:34px}
html.ph-new body [data-st] .heading:not([lang=ar]):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______),
html.ph-new body:not(:has([class^=project-title])) h2.heading:not([lang=ar]):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______),
html.ph-new body:has([class^=project-title]) h2.heading:not([lang=ar]):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______),
html.ph-new body:has([class^=project-title]) h3.heading:not([lang=ar]):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______),
html.ph-new body [data-faq] h2.heading-style-h2:not([lang=ar]):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______),
html.ph-new body [data-legal] h2.heading-style-h2:not([lang=ar]):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______),
html.ph-new body .section.bg-alternate h2.text-size-large:not([lang=ar]):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______),
html.ph-new body [data-faq] .section-wrapper>div>p.text-size-large.text-weight-bold:not([lang=ar]):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______),
html.ph-new body p[class*="paragraph-col"] strong:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______){font-size:var(--ph-sub)!important;line-height:var(--ph-sub-lh)!important}
html.ph-new body [lang=ar].text-weight-bold:not(.heading-style-h1):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______),
html.ph-new body [lang=ar].s22-h:not(.heading-style-h1):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______),
html.ph-new body h2.heading[lang=ar]:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______),
html.ph-new body h3.heading[lang=ar]:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______),
html.ph-new body [lang=ar] h2.heading:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______),
html.ph-new body [lang=ar] h3.heading:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______),
html.ph-new body h2.heading-style-h2[lang=ar]:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______),
html.ph-new body [lang=ar] h2.heading-style-h2:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______),
html.ph-new body [lang=ar] p[class*="paragraph-col"] strong:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______),
html.ph-new body p[class*="paragraph-col"][lang=ar] strong:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______){font-size:var(--ph-sub)!important;line-height:var(--ph-sub-lh-ar)!important}

}