html { font-size: 16px; scrollbar-gutter: stable; } body { background: var(--color-cream-light); } html, body { overflow-x: clip !important; max-width: 100vw !important; }  :root { --color-cream-light: #F7F5F2; --color-cream-dark: #EDE8E3; --color-black: #202021; --color-blue: #4B46CE; --color-yellow: #DBF774; }  :root { --overlay-drawer: rgba(237, 232, 227, 0.70); --overlay-blur: blur(20px); }  :root { --spacing-xxs: 8px; --spacing-xs: 16px; --spacing-gutter: 20px; --spacing-s: 24px; --spacing-m: 40px; --spacing-l: 60px; --spacing-xl: 80px; --spacing-2xl: 108px; --spacing-3xl: 120px; --spacing-4xl: 160px; } @media (max-width: 1024px) { :root { --spacing-l: 48px; --spacing-xl: 60px; --spacing-2xl: 80px; --spacing-3xl: 100px; --spacing-4xl: 140px; } } @media (max-width: 768px) { :root { --spacing-xs: 12px; --spacing-s: 16px; --spacing-m: 32px; --spacing-l: 40px; --spacing-xl: 48px; --spacing-2xl: 60px; --spacing-3xl: 80px; --spacing-4xl: 120px; } }  .container_global { width: 100%; padding-left: 80px; padding-right: 80px; } .container_small { width: 100%; padding-left: 15%; padding-right: 15%; } .container_full { width: 100%; padding: 0; } @media (max-width: 1024px) { .container_global { padding-left: 40px; padding-right: 40px; } .container_small { padding-left: 40px; padding-right: 40px; } } @media (max-width: 768px) { .container_global { padding-left: 20px !important; padding-right: 20px !important; } }  .padding-section-vertical { padding-top: var(--spacing-4xl); padding-bottom: var(--spacing-4xl); } .padding-section-bottom { padding-bottom: var(--spacing-4xl); } .padding-section-small { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-4xl); } .no-margin { margin: 0; } .no-padding { padding: 0; } .fit { object-fit: cover; width: 100%; height: 100%; } .flex-column { flex-direction: column !important; } .margin-bottom-xxs { margin-bottom: var(--spacing-xxs); } .margin-bottom-xs { margin-bottom: var(--spacing-xs); } .margin-bottom-s { margin-bottom: var(--spacing-s); } .margin-bottom-m { margin-bottom: var(--spacing-m); } .margin-bottom-l { margin-bottom: var(--spacing-l); } .margin-bottom-xl { margin-bottom: var(--spacing-xl); } .margin-bottom-2xl { margin-bottom: var(--spacing-2xl); } .background-dark { background-color: var(--color-cream-dark); }  .text-h0 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 6.375rem; line-height: 6.25rem; letter-spacing: -0.0625rem; } .text-h1 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 4.125rem; line-height: 3.9375rem; letter-spacing: -0.0625rem; } .text-h2 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 3rem; line-height: 2.75rem; letter-spacing: -0.0625rem; } .text-h3 { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 2.5rem; line-height: 3rem; letter-spacing: 0; } .text-h4 { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 2.125rem; line-height: 2.625rem; letter-spacing: 0; } .text-h5 { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 1.5rem; line-height: 1.75rem; letter-spacing: 0; } .text-copy-l { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 1.25rem; line-height: 1.75rem; letter-spacing: 0; } .text-copy-m { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.625rem; letter-spacing: 0; } .text-copy-s { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 0.75rem; line-height: 1.125rem; letter-spacing: 0; } .text-label-m { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 0.875rem; line-height: 1.375rem; letter-spacing: 0; text-transform: uppercase; } .text-label-m-light { font-family: 'Manrope', sans-serif; font-weight: 300; font-size: 0.9375rem; line-height: 1.375rem; letter-spacing: 0; text-transform: uppercase; } .text-label-s { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 0.75rem; line-height: 1rem; letter-spacing: 0; text-transform: uppercase; } @media (max-width: 1024px) { .text-h0 { font-size: 4.5rem; line-height: 4.5rem; letter-spacing: -0.0625rem; } .text-h1 { font-size: 3.25rem; line-height: 3.375rem; letter-spacing: -0.0625rem; } .text-h2 { font-size: 2.5rem; line-height: 2.625rem; letter-spacing: -0.0625rem; } .text-h3 { font-size: 2rem; line-height: 2.375rem; } .text-h4 { font-size: 1.75rem; line-height: 2.25rem; } .text-h5 { font-size: 1.375rem; line-height: 1.75rem; } .text-copy-l { font-size: 1.1875rem; line-height: 1.75rem; } .text-label-m { font-size: 0.875rem; line-height: 1.375rem; } .text-label-m-light { font-size: 0.875rem; line-height: 1.375rem; } } @media (max-width: 768px) { .text-h0 { font-size: 3.25rem; line-height: 3.25rem; letter-spacing: -0.03125rem; } .text-h1 { font-size: 2.5rem; line-height: 2.625rem; letter-spacing: -0.03125rem; } .text-h2 { font-size: 2rem; line-height: 2.125rem; letter-spacing: 0; } .text-h3 { font-size: 1.625rem; line-height: 2rem; } .text-h4 { font-size: 1.375rem; line-height: 1.875rem; } .text-h5 { font-size: 1.25rem; line-height: 1.625rem; } .text-copy-l { font-size: 1.125rem; line-height: 1.625rem; } .text-label-m { font-size: 0.8125rem; line-height: 1.25rem; } .text-label-m-light { font-size: 0.875rem; line-height: 1.25rem; } .text-label-s { font-size: 0.6875rem; line-height: 0.875rem; } }  .grid-12 { display: grid !important; grid-template-columns: repeat(12, 1fr); gap: var(--spacing-gutter); } @media (max-width: 1024px) { .grid-12 { grid-template-columns: repeat(8, 1fr); } } @media (max-width: 768px) { .grid-12 { grid-template-columns: repeat(4, 1fr); } } .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-11 { grid-column: span 11; } .col-12 { grid-column: span 12; }   .nav_items { opacity: 0; pointer-events: none; transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1); } .nav_items.is-visible { opacity: 1; pointer-events: auto; }  .nav_main { transition: background 0.3s ease, backdrop-filter 0.3s ease; } .nav_main.is-scrolled { backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } .nav_main .container_global { position: relative; z-index: 101; }  .nav_drawer { display: none; position: fixed !important; top: 0; left: 0; right: 0; height: 70vh; background: var(--color-cream-light); transform: translateY(-100%); transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1) !important; z-index: 99; flex-direction: column; justify-content: flex-end; padding: 0 20px var(--spacing-xl); gap: var(--spacing-l); } .nav_drawer.is-open { transform: translateY(0); }  .nav_backdrop { display: none; position: fixed !important; top: 0; left: 0; right: 0; bottom: 0; background: rgba(237, 232, 227, 0.30) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; opacity: 0; pointer-events: none; transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1); z-index: 98; } .nav_backdrop.is-visible { opacity: 1; pointer-events: auto; } @media (max-width: 768px) { .nav_drawer { display: flex !important; } .nav_backdrop { display: block !important; } }  .drawer_nav { display: flex; flex-direction: column; gap: var(--spacing-s); } .drawer_social { display: flex !important; flex-direction: row !important; align-items: center !important; gap: var(--spacing-s) !important; }  @media (max-width: 768px) { .nav_main .container_global { width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important; padding-left: 20px !important; padding-right: 20px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; } .nav_logo { max-width: 140px !important; flex-shrink: 1 !important; height: auto !important; } .nav_toggle { height: auto !important; align-self: center !important; flex-shrink: 0 !important; white-space: nowrap; } }  .nav_link { display: inline-block; transition: transform 0.3s ease, color 0.3s ease; } @media (hover: hover) { .nav_link:hover { transform: scale(1.005); color: var(--color-blue) !important; } } @media (hover: none) { .nav_link:active { color: var(--color-blue) !important; } }   .portfolio_thumbnail, .about_image, .hero_image, .cover_image-wrapper { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; } .section_portfolio, .section_hero, .section_westend-teaser { isolation: isolate; -webkit-isolation: isolate; }  .brx-section, section { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }  @keyframes kenburns { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } } .hero_image { animation: kenburns 20s ease-in-out infinite; animation-fill-mode: both; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; }  @keyframes slideBlur { from { opacity: 0; filter: blur(8px); transform: translateY(24px); } to { opacity: 1; filter: blur(0px); transform: translateY(0); } } @keyframes slideBlurOut { from { opacity: 1; filter: blur(0px); transform: translateY(0); } to { opacity: 0; filter: blur(8px); transform: translateY(24px); } }  .hero_h0-line1, .hero_h0-line2 { opacity: 0; } .hero_h0-line1.in-view { animation: slideBlur 1s cubic-bezier(0.65, 0, 0.35, 1) forwards; } .hero_h0-line2.in-view { animation: slideBlur 1s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards; } .hero_h0-line1.out-view, .hero_h0-line2.out-view { animation: slideBlurOut 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards; }  .page_heading { opacity: 0; } .page_heading.in-view { animation: slideBlur 1s cubic-bezier(0.65, 0, 0.35, 1) forwards; } .page_heading.out-view { animation: slideBlurOut 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards; }  .portfolio_thumbnail { clip-path: inset(25% 28%); transition: clip-path 1.2s cubic-bezier(0.65, 0, 0.35, 1); } .portfolio_thumbnail.is-visible { clip-path: inset(0% 0%); transition: clip-path 1.2s cubic-bezier(0.65, 0, 0.35, 1); } .cover_image-wrapper img { transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); } .cover_image-wrapper:hover img { transform: scale(1.03); will-change: transform; }  .portfolio_grid:has(.cover_image-wrapper:hover) .portfolio_thumbnail:not(:hover) { filter: blur(8px); opacity: 0.7; transition: filter 0.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1); }  .portfolio_plus { opacity: 0; transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1); } .portfolio_thumbnail:hover .portfolio_plus { opacity: 1; } @media (max-width: 1024px) { .portfolio_plus { opacity: 1 !important; } }  @media (max-width: 1024px) { .section_portfolio .grid-12 { display: flex !important; flex-direction: column !important; gap: var(--spacing-xl) !important; } .portfolio_thumbnail { margin-top: 0 !important; } .portfolio_thumbnail[style*="grid-column: 1 /"], .portfolio_thumbnail[style*="grid-column: 2 /"], .portfolio_thumbnail[style*="grid-column: 3 /"] { width: 62% !important; align-self: flex-start !important; } .portfolio_thumbnail[style*="grid-column: 4 /"], .portfolio_thumbnail[style*="grid-column: 5 /"], .portfolio_thumbnail[style*="grid-column: 6 /"], .portfolio_thumbnail[style*="grid-column: 7 /"], .portfolio_thumbnail[style*="grid-column: 8 /"], .portfolio_thumbnail[style*="grid-column: 9 /"] { width: 62% !important; align-self: flex-end !important; } .portfolio_thumbnail[style*="/ span 6"], .portfolio_thumbnail[style*="/ span 7"], .portfolio_thumbnail[style*="/ span 8"] { width: 100% !important; align-self: stretch !important; } } @media (max-width: 768px) { .portfolio_thumbnail[style*="grid-column: 1 /"], .portfolio_thumbnail[style*="grid-column: 2 /"], .portfolio_thumbnail[style*="grid-column: 3 /"] { width: 75% !important; align-self: flex-start !important; } .portfolio_thumbnail[style*="grid-column: 4 /"], .portfolio_thumbnail[style*="grid-column: 5 /"], .portfolio_thumbnail[style*="grid-column: 6 /"], .portfolio_thumbnail[style*="grid-column: 7 /"], .portfolio_thumbnail[style*="grid-column: 8 /"], .portfolio_thumbnail[style*="grid-column: 9 /"] { width: 75% !important; align-self: flex-end !important; } .portfolio_thumbnail[style*="/ span 6"], .portfolio_thumbnail[style*="/ span 7"], .portfolio_thumbnail[style*="/ span 8"] { width: 100% !important; align-self: stretch !important; } }  .project_drawer { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 85vh !important; z-index: 9000 !important; transform: translateY(100%) !important; background: var(--color-cream-light) !important; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1) !important; } .project_drawer.is-open { transform: translateY(0) !important; } .drawer_backdrop { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 100vh !important; z-index: 8999 !important; background: rgba(237, 232, 227, 0.7) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1) !important; } .drawer_backdrop.is-visible { opacity: 1 !important; pointer-events: auto !important; } .drawer_gallery { height: 100%; overflow-y: auto; } .drawer_gallery-images { flex-direction: row !important; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; } .drawer_gallery-images::-webkit-scrollbar { display: none; } .drawer_gallery-images img { width: 100%; flex-shrink: 0; scroll-snap-align: start; height: auto; max-height: 85vh; cursor: pointer; object-fit: contain; }  @keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .westend_marquee-track { animation: marquee-scroll 60s linear infinite; width: max-content; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } @media (max-width: 1024px) { .westend_marquee-image { height: 25svh; } .westend_marquee-track { animation-duration: 35s; } }  .about_image { clip-path: inset(25% 28%); transition: clip-path 1.2s cubic-bezier(0.65, 0, 0.35, 1); } .about_image.is-visible { clip-path: inset(0% 0%); }  .westend_strip-track { display: flex; flex-direction: row; animation: marquee-scroll 40s linear infinite; width: max-content; will-change: transform; } .section_story { position: sticky; top: 0; } .section_story:nth-child(2) { z-index: 2; } .section_story:nth-child(3) { z-index: 3; } .section_story:nth-child(4) { z-index: 4; } .section_story:nth-child(5) { z-index: 5; }  .story_track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .story_track::-webkit-scrollbar { display: none; }