/* Bre 2026: unify light pages onto Fraunces (serif/display) + Google Sans Flex (sans/body). Fonts only, no layout change. Aliases the Webflow family names to the brand fonts, so Marat Sans etc. no longer render. */
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:300 700;font-display:swap;src:url(https://fonts.gstatic.com/s/fraunces/v38/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCBTeP2Xz5fU8w.woff2) format('woff2');}
@font-face{font-family:'Noto Serif';font-style:italic;font-weight:300 600;font-display:swap;src:url(https://fonts.gstatic.com/s/fraunces/v38/6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjdfeQ7ZXk8kD6.woff2) format('woff2');}
@font-face{font-family:'Marat sans';font-weight:100 900;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesansflex/v22/t5s6IQcYNIWbFgDgAAzZ34auoVyXkJCOvp3SFWJbN5hF8Ju1x6sKCyp0l9sI40swNJwInycYAJzz0m7kJ4qFQOJBOjLvDSndo0SKMpKSTzwliVdHAy4x5hg2eWQTmyul.woff2) format('woff2');}
@font-face{font-family:'utile';font-weight:100 900;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesansflex/v22/t5s6IQcYNIWbFgDgAAzZ34auoVyXkJCOvp3SFWJbN5hF8Ju1x6sKCyp0l9sI40swNJwInycYAJzz0m7kJ4qFQOJBOjLvDSndo0SKMpKSTzwliVdHAy4x5hg2eWQTmyul.woff2) format('woff2');}
@font-face{font-family:'omnes-pro';font-weight:100 900;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesansflex/v22/t5s6IQcYNIWbFgDgAAzZ34auoVyXkJCOvp3SFWJbN5hF8Ju1x6sKCyp0l9sI40swNJwInycYAJzz0m7kJ4qFQOJBOjLvDSndo0SKMpKSTzwliVdHAy4x5hg2eWQTmyul.woff2) format('woff2');}
@font-face{font-family:'sofia-pro';font-weight:100 900;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesansflex/v22/t5s6IQcYNIWbFgDgAAzZ34auoVyXkJCOvp3SFWJbN5hF8Ju1x6sKCyp0l9sI40swNJwInycYAJzz0m7kJ4qFQOJBOjLvDSndo0SKMpKSTzwliVdHAy4x5hg2eWQTmyul.woff2) format('woff2');}
@font-face{font-family:'Lato';font-weight:100 900;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesansflex/v22/t5s6IQcYNIWbFgDgAAzZ34auoVyXkJCOvp3SFWJbN5hF8Ju1x6sKCyp0l9sI40swNJwInycYAJzz0m7kJ4qFQOJBOjLvDSndo0SKMpKSTzwliVdHAy4x5hg2eWQTmyul.woff2) format('woff2');}
@font-face{font-family:'Stolzl w00';font-weight:100 900;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesansflex/v22/t5s6IQcYNIWbFgDgAAzZ34auoVyXkJCOvp3SFWJbN5hF8Ju1x6sKCyp0l9sI40swNJwInycYAJzz0m7kJ4qFQOJBOjLvDSndo0SKMpKSTzwliVdHAy4x5hg2eWQTmyul.woff2) format('woff2');}
@font-face{font-family:'Stolzl w00 book';font-weight:100 900;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesansflex/v22/t5s6IQcYNIWbFgDgAAzZ34auoVyXkJCOvp3SFWJbN5hF8Ju1x6sKCyp0l9sI40swNJwInycYAJzz0m7kJ4qFQOJBOjLvDSndo0SKMpKSTzwliVdHAy4x5hg2eWQTmyul.woff2) format('woff2');}
/* remaining Webflow faces aliased to Google Sans Flex for full coverage (Bre, Sept 3) */
@font-face{font-family:'Open Sans';font-weight:100 900;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesansflex/v22/t5s6IQcYNIWbFgDgAAzZ34auoVyXkJCOvp3SFWJbN5hF8Ju1x6sKCyp0l9sI40swNJwInycYAJzz0m7kJ4qFQOJBOjLvDSndo0SKMpKSTzwliVdHAy4x5hg2eWQTmyul.woff2) format('woff2');}
@font-face{font-family:'Montserrat';font-weight:100 900;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesansflex/v22/t5s6IQcYNIWbFgDgAAzZ34auoVyXkJCOvp3SFWJbN5hF8Ju1x6sKCyp0l9sI40swNJwInycYAJzz0m7kJ4qFQOJBOjLvDSndo0SKMpKSTzwliVdHAy4x5hg2eWQTmyul.woff2) format('woff2');}
@font-face{font-family:'bilo';font-weight:100 900;font-display:swap;src:url(https://fonts.gstatic.com/s/googlesansflex/v22/t5s6IQcYNIWbFgDgAAzZ34auoVyXkJCOvp3SFWJbN5hF8Ju1x6sKCyp0l9sI40swNJwInycYAJzz0m7kJ4qFQOJBOjLvDSndo0SKMpKSTzwliVdHAy4x5hg2eWQTmyul.woff2) format('woff2');}

/* Load Fraunces under its own name + put light-page HEADINGS in Fraunces (headers = Fraunces everywhere) */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;src:url(https://fonts.gstatic.com/s/fraunces/v38/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCBTeP2Xz5fU8w.woff2) format('woff2');}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 600;font-display:swap;src:url(https://fonts.gstatic.com/s/fraunces/v38/6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjdfeQ7ZXk8kD6.woff2) format('woff2');}
h1,h2,h3,[class*="project-header"],[class*="Heading"],[class*="heading-"]{font-family:'Fraunces',Georgia,serif !important;letter-spacing:-0.01em;text-wrap:balance;}  /* RH-6: widow control on the light-page headings, matching the homepage; typography only */
p,li{text-wrap:pretty;}  /* RH2-7: last-line widow control on light-page body text, matching the homepage override (.fb-body,#about p,#contact p{text-wrap:pretty}); pretty only reflows the final lines, so no cost to the bulk. Typography only. */

/* Hide the Webflow free-tier badge (JS-injected) across the 5 exported light pages. It read as free-tier branding on a Staff portfolio and pulled an external Webflow-CDN image on every load. Additive CSS only; the frozen Webflow HTML is untouched. (Bre, Sept 4) */
a.w-webflow-badge.w-webflow-badge{display:none !important;visibility:hidden !important;opacity:0 !important;pointer-events:none !important;}

/* Hide the one broken cross-link card in the 'you might also like' footer: the Virtuart card's Webflow background video (5b6ad761..._Animated_Mockup_8-transcode.mp4/.webm) + its poster did NOT export, so it rendered as an empty thumbnail (just the 'Virtuart: AR Social App' title, no preview) on uber-pro / uber-scooters / illustrated-by-bre. The other 3 footer cards have working videos. Hiding removes the half-broken card cleanly (inline-block reflows, no gap). Virtuart stays reachable via the homepage card + 'More' nav. RESTORE by re-adding the missing Animated_Mockup_8 video+poster (or swapping in a Virtuart preview) and deleting this rule. (Bre, Sept 4) */
a.work-card:has([data-video-urls*="Animated_Mockup_8"]){display:none !important;}

/* R-D4 (Sept 5): phone type floor for the five exported light pages. Webflow's 479px rule drops unclassed p to 12px, h6 to 9px
   and h2 to 18px; this file loads after webflow.css at the same specificity, so these win. Typography only. */
@media screen and (max-width:479px){p{font-size:16px;line-height:1.6;} h6{font-size:12px;line-height:1.5;} h2{font-size:24px;line-height:1.2;}
 /* Webflow class rules at 479px outrank the element rules above: heading-146 18px, heading-143.lh-change 13px, _02-message-text 10px */
 h6._02-message-text{font-size:12px;line-height:1.5;} h2.heading-146,h2.heading-143.lh-change{font-size:24px;line-height:1.2;} h2.heading-143.lh-change.smaller-header{font-size:30px;}
 li{font-size:16px;line-height:1.6;} blockquote{font-size:16px;line-height:1.6;}}
/* R-F3 (Sept 6): Webflow drops p to 14px and li/blockquote sizes from 480 to 767px; body copy must not shrink as the screen grows. */
@media screen and (max-width:767px){p{font-size:16px;line-height:1.6;} li{font-size:16px;line-height:1.6;} blockquote,.quote-text{font-size:17px;line-height:1.6;}}

/* R-F10 (Sept 6): the quote families had upright aliases only, so every italic was faux-slanted. Real italic faces (Fraunces italic, the site's quote voice) for the three families Webflow italicises, and no synthesized faces anywhere. */
@font-face{font-family:'omnes-pro';font-style:italic;font-weight:300 600;font-display:swap;src:url(https://fonts.gstatic.com/s/fraunces/v38/6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjdfeQ7ZXk8kD6.woff2) format('woff2');}
@font-face{font-family:'utile';font-style:italic;font-weight:300 600;font-display:swap;src:url(https://fonts.gstatic.com/s/fraunces/v38/6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjdfeQ7ZXk8kD6.woff2) format('woff2');}
@font-face{font-family:'Marat sans';font-style:italic;font-weight:300 600;font-display:swap;src:url(https://fonts.gstatic.com/s/fraunces/v38/6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjdfeQ7ZXk8kD6.woff2) format('woff2');}
body{font-synthesis:none;}

/* R-H12 (Sept 6): uppercase micro-labels sat under the 12px floor at every width (FEATURED 9px, NEXT and Previous 11px, .text-block-9 10px) with five different px trackings.
   One 12px floor and em tracking that scales with the size; the 16px ._02-title variants keep their own rules. Typography only. */
.title,.title-3,.title-2,.title.larger,.title-3.larger,.title.right,.title-3.right{font-size:12px;line-height:16px;letter-spacing:.12em;}
.text-block-9,.text-block-9.grey{font-size:12px;letter-spacing:.06em;}
/* RH3-1 (Sept 6): the Uber Pro + Scooters figure captions and bold micro-labels collapsed to 10px at <=479px (below the 12px legibility floor R-D4/R-H12 set for the rest of the type) - these explain the case-study images and were illegible on the phone. One 12px floor at <=479px; typography only. .bold-text-5.lighter kept two-class to match Webflow's specificity. */
@media screen and (max-width:479px){.all-figure-captions,.text-block-15,.bold-text-5.lighter,.bold-text-6,.bold-text-7,.bold-text-8,.bold-text-9{font-size:12px;line-height:1.45;}}
h6{letter-spacing:.08em;}
/* R-H13 (Sept 6): body leading on the light pages (160%) ran 7 percent tighter than the dark pages (1.72). Leading only from 768px up; sizes untouched, quotes keep 1.6. */
@media screen and (min-width:768px){p,li{line-height:1.72;}}
/* RF-3 (Sept 7): uber-pro's intro p.text-grey-copy ("With Uber Pro, drivers...") kept Webflow's 1.5 leading while its ~12 sibling 22px body paragraphs are 1.72 (R-H13); match them from 768px up. Typography only, no size change. */
@media screen and (min-width:768px){p.text-grey-copy{line-height:1.72;}}
/* RF-2 (Sept 7): uber-scooters' three h2.heading-143.lh-change ("Second Nature", "Safe and responsible", "Carefree") render 50px/1.25 while every other 50px h2 sitewide is 1.2; unify to 1.2. Exclude uber-pro's 30px .smaller-header variant, which keeps its own leading. Typography only, no size change. */
h2.heading-143.lh-change:not(.smaller-header){line-height:1.2;}

/* R-L2 (Sept 5): heading scale for the five light pages, typography only. webflow.css sets h1 40px under h2 50px, 32 under 36 from 480
   to 767, and h1,h2 18px at 479 and below; this keeps h1 above every h2 at all four ranges (the h2 floor below is 24px, its widest
   class variant 30px) with the site's display leading. Same specificity as webflow.css, loaded after it, so these win. */
h1,h1.h1{font-size:56px;line-height:1.12;}
@media screen and (max-width:991px){h1,h1.h1{font-size:44px;line-height:1.12;}}
@media screen and (max-width:767px){h1,h1.h1{font-size:40px;line-height:1.12;}}
@media screen and (max-width:479px){h1,h1.h1{font-size:32px;line-height:1.12;}}

/* R-L9 (Sept 5): section headings step down monotonically on the light pages (webflow.css went 50, 28, 36, 24 down the range). Bare h2 only; class variants keep their own sizes. h1 stays above at every range (R-L2). */
@media screen and (max-width:991px){h2{font-size:40px;line-height:1.2;}}
@media screen and (max-width:767px){h2{font-size:32px;line-height:1.2;}}
@media screen and (max-width:479px){h2{font-size:24px;line-height:1.2;}}  /* RH-4b: complete the h2 scale so h2 steps to 24 at <=479 (was stuck at 32 because R-D4's earlier <=479 24px lost to this block's <=767 32px), which had made h1 (32) and h2 collapse to the same size */

/* RH-4 (Sept 5): bare h3 had no phone steps, so it stayed at the webflow base 24px and collapsed with h2 (also 24px) at <=479, erasing the h2/h3 subhead distinction on the light pages. Step h3 below h2 at the two narrow ranges. Typography only; class variants keep their own sizes. */
@media screen and (max-width:767px){h3{font-size:22px;line-height:1.25;}}
@media screen and (max-width:479px){h3{font-size:20px;line-height:1.25;}}
h3{line-height:1.25;}  /* RH-11: the light-page bare h3 kept Webflow's 1.33 leading at desktop and 768-991 (looser than the h1/h2 display leading, and than the RH-4 <=767 h3 at 1.25); one 1.25 leading across all widths. Typography only, no size change. */
h2{line-height:1.2;}  /* RH2-5: bare h2 kept Webflow's 130% leading at >=992 (R-L9 pins 1.2 only <=991), looser than the h1 1.12 and h3 1.25 display leading; one 1.2 leading across all widths, matching the R-L9 value below. Typography only, no size change. Class variants keep their own leading (higher specificity). */
h3[class*="project-header"],h3[class*="illustration"]{line-height:1.14;}  /* RH2-8: every light-page title is an h3 at 62px carrying Webflow's loose 1.30 leading -- the largest heading on the page had the loosest leading, backwards from the display system (h1 1.12, h2 1.2, bare h3 1.25). The long titles wrap to two gappy lines. Tighten the five page titles to a 1.14 display leading. Matches exactly one h3 (the title) per light page. Typography only, no size change. */