MATTO — CSS Design Tokens v1.0 Copy into: style.css or tokens.css ============================================= */@font-face { font-family: "RightGrotesk"; font-weight: 900; font-display: swap; src: url(https://mattomalta.com/wp-content/uploads/2026/04/RightGrotesk-CompactBlack.woff) format("woff");}@font-face { font-family: 'DunbarText'; font-weight: 400; src: url(https://mattomalta.com/wp-content/uploads/2026/04/DunbarText-Regular.woff) format('truetype'); font-display: swap;}:root {  --color-red: #ED3D24; --color-cream: #EDE3BF; --color-dark: #2B2626; --color-black: #0D0B0B; --color-white: #FFFFFF;  --color-bg: var(--color-black); --color-surface: var(--color-dark); --color-text: var(--color-cream); --color-text-muted: rgba(237, 227, 191, 0.75); --color-text-dim: rgba(237, 227, 191, 0.45); --color-accent: var(--color-red); --color-border: rgba(237, 227, 191, 0.08); --color-border-strong: rgba(237, 227, 191, 0.15); --color-overlay: rgba(13, 11, 11, 0.95);  --color-red-a90: rgba(237, 61, 36, 0.90); --color-red-a30: rgba(237, 61, 36, 0.30); --color-red-a15: rgba(237, 61, 36, 0.15); --color-red-a08: rgba(237, 61, 36, 0.08); --color-cream-a85: rgba(237, 227, 191, 0.85); --color-cream-a60: rgba(237, 227, 191, 0.60); --color-cream-a45: rgba(237, 227, 191, 0.45); --color-cream-a30: rgba(237, 227, 191, 0.30); --color-cream-a15: rgba(237, 227, 191, 0.15); --color-cream-a08: rgba(237, 227, 191, 0.08);  --font-display: 'RightGrotesk', sans-serif; --font-ui: 'RightGroteskMedium', sans-serif; --font-spatial: 'RightGroteskSpatial', sans-serif; --font-body: 'RightGroteskText', sans-serif; --font-script: 'Lakeside', cursive;  --font-dunbar: 'DunbarText', sans-serif;   --fd: var(--font-display); --fu: var(--font-ui); --fs: var(--font-spatial); --fb: var(--font-body); --fsc: var(--font-script); --fdu: var(--font-dunbar);  --fs-display-1: clamp(48px, 10.5vw, 160px); --fs-display-2: clamp(36px, 6vw, 96px); --fs-heading-1: clamp(28px, 4.5vw, 72px); --fs-heading-2: clamp(22px, 3.5vw, 48px); --fs-heading-3: 22px; --fs-heading-4: 13px; --fs-eyebrow: 10px; --fs-label: 11px; --fs-body-lead: 18px; --fs-body: 15px; --fs-body-sm: 13px; --fs-caption: 11px; --fs-script: clamp(24px, 3vw, 36px); --fs-price: 28px; --fs-ticker: clamp(24px, 3.5vw, 48px);  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 40px; --space-10: 48px; --space-11: 64px; --space-12: 80px; --space-13: 120px; --space-14: 140px; --space-15: 200px; --space-16: 240px;  --container-max: 1760px; --container-w: 90%; --container-narrow: 760px; --nav-height: 72px; --radius-sm: 3px; --radius-md: 6px;  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-fast: 0.15s var(--ease); --transition-base: 0.25s var(--ease); --transition-slow: 0.5s var(--ease);}@media (max-width: 1024px) { :root { --container-w: 92%; --nav-height: 64px; --space-9: 32px; --space-10: 40px; --space-11: 48px; --space-12: 60px; --space-13: 80px; --space-14: 96px; --space-15: 120px; --space-16: 140px; --fs-body-lead: 16px; --fs-body: 14px; --fs-heading-3: 20px; --fs-price: 26px; }}@media (max-width: 768px) { :root { --container-w: 94%; --nav-height: 56px; --space-8: 24px; --space-9: 24px; --space-10: 32px; --space-11: 40px; --space-12: 48px; --space-13: 56px; --space-14: 64px; --space-15: 80px; --space-16: 96px; --fs-body-lead: 15px; --fs-body: 14px; --fs-body-sm: 12px; --fs-caption: 10px; --fs-heading-3: 18px; --fs-heading-4: 12px; --fs-price: 24px; }.grid--2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center;}@media (max-width: 768px) { .grid--2col { grid-template-columns: 1fr; gap: var(--space-9); }}.grid--3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;}@media (max-width: 1024px) { .grid--3col { grid-template-columns: 1fr 1fr; }}@media (max-width: 768px) { .grid--3col { grid-template-columns: 1fr; }}.grid--5col { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;}@media (max-width: 1024px) { .grid--5col { grid-template-columns: repeat(3, 1fr); }}@media (max-width: 768px) { .grid--5col { grid-template-columns: repeat(2, 1fr); }}@media (max-width: 480px) { .grid--5col { grid-template-columns: 1fr; }.hero__content { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 var(--space-12) var(--space-12);}@media (max-width: 1024px) { .hero__content { padding: 0 var(--space-10) var(--space-11); } .hero__title { font-size: clamp(48px, 8vw, 96px); }}@media (max-width: 768px) { .hero__content { flex-direction: column; align-items: flex-start; padding: 0 var(--space-6) var(--space-11); gap: var(--space-8); } .hero__right { align-items: flex-start; width: 100%; } .hero__cta { width: 100%; justify-content: center; } .hero__meta { text-align: left; }.nav__links { display: flex; gap: 40px; }.nav__hamburger { display: none; }@media (max-width: 1024px) { .nav__links { gap: 24px; }}@media (max-width: 768px) { .nav__links { display: none; } .nav__hamburger { display: flex; }}.mobile-menu { position: fixed; inset: 0; background: var(--color-black); z-index: 200; display: flex; flex-direction: column; padding: var(--space-12) var(--space-11); transform: translateX(100%); transition: transform 0.4s var(--ease);}.mobile-menu.is-open { transform: translateX(0);}.mobile-menu__link { font-family: var(--font-display); font-size: clamp(36px, 8vw, 56px); font-weight: 900; text-transform: uppercase; letter-spacing: -1px; color: var(--color-cream); padding: var(--space-6) 0; border-bottom: 1px solid var(--color-border);}.footer { background: var(--color-dark); border-top: 1px solid var(--color-border);}.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 64px; padding-top: 166px; padding-bottom: 48px; border-bottom: 1px solid var(--color-border);}.footer__logo { margin-bottom: 23px; display: flex; align-items: center; height: 36px;}.footer__tagline { font-family: 'DunbarText', sans-serif;  font-size: 11px; line-height: 1.7; color: var(--color-cream); opacity: 0.25; margin-bottom: 20px;}.footer__address { font-family: 'DunbarText', sans-serif; font-style: normal; font-size: 13px; line-height: 1.8; color: var(--color-cream); opacity: 0.35;}.footer__col-title { font-family: var(--font-ui); font-size: 9px; font-weight: 500; letter-spacing: 1.98px; text-transform: uppercase; color: var(--color-cream); opacity: 0.25; margin-bottom: 24px;}.footer__links { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }.footer__link { font-family: 'DunbarText', sans-serif;  font-size: 14px; line-height: 1; color: var(--color-cream); opacity: 0.50; text-decoration: none; transition: opacity var(--transition-fast); display: block; padding: 2px 0;}.footer__link:hover { opacity: 1; }.footer__bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 40px; padding-bottom: 48px;}.footer__legal { font-family: 'DunbarText', sans-serif; font-size: 11px; color: var(--color-cream); opacity: 0.20; white-space: nowrap;}.footer__social { display: flex; gap: 24px; align-items: center;}.footer__social-link { font-family: var(--font-ui); font-size: 9px; font-weight: 500; letter-spacing: 1.35px; text-transform: uppercase; color: var(--color-cream); opacity: 0.30; text-decoration: none; transition: opacity var(--transition-fast);}.footer__social-link:hover { opacity: 0.70; }@media (max-width: 1024px) { .footer__top { grid-template-columns: 1fr 1fr; gap: 48px; padding-top: 100px; }  .footer__brand { grid-column: 1 / -1; }}@media (max-width: 768px) { .footer__top { grid-template-columns: 1fr 1fr; gap: 40px 32px; padding-top: 64px; padding-bottom: 40px; } .footer__brand { grid-column: 1 / -1; } .footer__bottom { flex-direction: column; align-items: flex-start; gap: 20px; padding-bottom: 32px; } .footer__legal:last-child { display: none;  }}@media (max-width: 480px) { .footer__top { grid-template-columns: 1fr; gap: 32px; }}.margin--auto { margin: 0 auto; }.margin--xs { margin: var(--space-2); }.margin--sm { margin: var(--space-4); }.margin--md { margin: var(--space-6); }.margin--lg { margin: var(--space-9); }.margin--xl { margin: var(--space-11); }.margin--top-xs { margin-top: var(--space-2); }.margin--top-sm { margin-top: var(--space-4); }.margin--top-md { margin-top: var(--space-6); }.margin--top-lg { margin-top: var(--space-9); }.margin--top-xl { margin-top: var(--space-11); }.margin--bottom-xs { margin-bottom: var(--space-2); }.margin--bottom-sm { margin-bottom: var(--space-4); }.margin--bottom-md { margin-bottom: var(--space-6); }.margin--bottom-lg { margin-bottom: var(--space-9); }.margin--bottom-xl { margin-bottom: var(--space-11); }.margin--left-sm { margin-left: var(--space-4); }.margin--left-md { margin-left: var(--space-6); }.margin--right-sm { margin-right: var(--space-4); }.margin--right-md { margin-right: var(--space-6); }@media (max-width: 1024px) { .margin--sm { margin: var(--space-3); } .margin--md { margin: var(--space-5); } .margin--lg { margin: var(--space-7); } .margin--xl { margin: var(--space-9); } .margin--top-sm { margin-top: var(--space-3); } .margin--top-md { margin-top: var(--space-5); } .margin--top-lg { margin-top: var(--space-7); } .margin--top-xl { margin-top: var(--space-9); } .margin--bottom-sm { margin-bottom: var(--space-3); } .margin--bottom-md { margin-bottom: var(--space-5); } .margin--bottom-lg { margin-bottom: var(--space-7); } .margin--bottom-xl { margin-bottom: var(--space-9); } .margin--left-sm { margin-left: var(--space-3); } .margin--left-md { margin-left: var(--space-5); } .margin--right-sm { margin-right: var(--space-3); } .margin--right-md { margin-right: var(--space-5); }}@media (max-width: 768px) { .margin--sm { margin: var(--space-3); } .margin--md { margin: var(--space-4); } .margin--lg { margin: var(--space-6); } .margin--xl { margin: var(--space-8); } .margin--top-sm { margin-top: var(--space-3); } .margin--top-md { margin-top: var(--space-4); } .margin--top-lg { margin-top: var(--space-6); } .margin--top-xl { margin-top: var(--space-8); } .margin--bottom-sm { margin-bottom: var(--space-3); } .margin--bottom-md { margin-bottom: var(--space-4); } .margin--bottom-lg { margin-bottom: var(--space-6); } .margin--bottom-xl { margin-bottom: var(--space-8); } .margin--left-sm { margin-left: var(--space-3); } .margin--left-md { margin-left: var(--space-4); } .margin--right-sm { margin-right: var(--space-3); } .margin--right-md { margin-right: var(--space-4); }.pad--xs { padding: var(--space-2); }.pad--sm { padding: var(--space-4); }.pad--md { padding: var(--space-6); }.pad--lg { padding: var(--space-9); }.pad--xl { padding: var(--space-11); }.pad--top-sm { padding-top: var(--space-4); }.pad--top-md { padding-top: var(--space-6); }.pad--top-lg { padding-top: var(--space-9); }.pad--top-xl { padding-top: var(--space-11); }.pad--bottom-sm { padding-bottom: var(--space-4); }.pad--bottom-md { padding-bottom: var(--space-6); }.pad--bottom-lg { padding-bottom: var(--space-9); }.pad--bottom-xl { padding-bottom: var(--space-11); }.pad--h-sm { padding-left: var(--space-4); padding-right: var(--space-4); }.pad--h-md { padding-left: var(--space-6); padding-right: var(--space-6); }.pad--h-lg { padding-left: var(--space-9); padding-right: var(--space-9); }.pad--v-sm { padding-top: var(--space-4); padding-bottom: var(--space-4); }.pad--v-md { padding-top: var(--space-6); padding-bottom: var(--space-6); }.pad--v-lg { padding-top: var(--space-9); padding-bottom: var(--space-9); }@media (max-width: 1024px) { .pad--sm { padding: var(--space-3); } .pad--md { padding: var(--space-5); } .pad--lg { padding: var(--space-7); } .pad--xl { padding: var(--space-9); } .pad--top-sm { padding-top: var(--space-3); } .pad--top-md { padding-top: var(--space-5); } .pad--top-lg { padding-top: var(--space-7); } .pad--top-xl { padding-top: var(--space-9); } .pad--bottom-sm { padding-bottom: var(--space-3); } .pad--bottom-md { padding-bottom: var(--space-5); } .pad--bottom-lg { padding-bottom: var(--space-7); } .pad--bottom-xl { padding-bottom: var(--space-9); } .pad--h-sm { padding-left: var(--space-3); padding-right: var(--space-3); } .pad--h-md { padding-left: var(--space-5); padding-right: var(--space-5); } .pad--h-lg { padding-left: var(--space-7); padding-right: var(--space-7); } .pad--v-sm { padding-top: var(--space-3); padding-bottom: var(--space-3); } .pad--v-md { padding-top: var(--space-5); padding-bottom: var(--space-5); } .pad--v-lg { padding-top: var(--space-7); padding-bottom: var(--space-7); }}@media (max-width: 768px) { .pad--sm { padding: var(--space-3); } .pad--md { padding: var(--space-4); } .pad--lg { padding: var(--space-6); } .pad--xl { padding: var(--space-8); } .pad--top-sm { padding-top: var(--space-3); } .pad--top-md { padding-top: var(--space-4); } .pad--top-lg { padding-top: var(--space-6); } .pad--top-xl { padding-top: var(--space-8); } .pad--bottom-sm { padding-bottom: var(--space-3); } .pad--bottom-md { padding-bottom: var(--space-4); } .pad--bottom-lg { padding-bottom: var(--space-6); } .pad--bottom-xl { padding-bottom: var(--space-8); } .pad--h-sm { padding-left: var(--space-3); padding-right: var(--space-3); } .pad--h-md { padding-left: var(--space-4); padding-right: var(--space-4); } .pad--h-lg { padding-left: var(--space-6); padding-right: var(--space-6); } .pad--v-sm { padding-top: var(--space-3); padding-bottom: var(--space-3); } .pad--v-md { padding-top: var(--space-4); padding-bottom: var(--space-4); } .pad--v-lg { padding-top: var(--space-6); padding-bottom: var(--space-6); }.gap--xs { gap: var(--space-2); }.gap--sm { gap: var(--space-4); }.gap--md { gap: var(--space-6); }.gap--lg { gap: var(--space-9); }.gap--xl { gap: var(--space-11); }.gap-col--sm { column-gap: var(--space-4); }.gap-col--md { column-gap: var(--space-6); }.gap-col--lg { column-gap: var(--space-9); }.gap-row--sm { row-gap: var(--space-4); }.gap-row--md { row-gap: var(--space-6); }.gap-row--lg { row-gap: var(--space-9); }@media (max-width: 1024px) { .gap--sm { gap: var(--space-3); } .gap--md { gap: var(--space-5); } .gap--lg { gap: var(--space-7); } .gap--xl { gap: var(--space-9); } .gap-col--sm { column-gap: var(--space-3); } .gap-col--md { column-gap: var(--space-5); } .gap-col--lg { column-gap: var(--space-7); } .gap-row--sm { row-gap: var(--space-3); } .gap-row--md { row-gap: var(--space-5); } .gap-row--lg { row-gap: var(--space-7); }}@media (max-width: 768px) { .gap--sm { gap: var(--space-3); } .gap--md { gap: var(--space-4); } .gap--lg { gap: var(--space-6); } .gap--xl { gap: var(--space-8); } .gap-col--sm { column-gap: var(--space-3); } .gap-col--md { column-gap: var(--space-4); } .gap-col--lg { column-gap: var(--space-6); } .gap-row--sm { row-gap: var(--space-3); } .gap-row--md { row-gap: var(--space-4); } .gap-row--lg { row-gap: var(--space-6); }.flex--h { display: flex; flex-direction: row; align-items: center; }.flex--v { display: flex; flex-direction: column; }.flex--wrap { flex-wrap: wrap; }.flex--nowrap { flex-wrap: nowrap; }.flex--reverse { flex-direction: row-reverse; }.flex--col-reverse { flex-direction: column-reverse; }.justify--start { justify-content: flex-start; }.justify--end { justify-content: flex-end; }.justify--center { justify-content: center; }.justify--between { justify-content: space-between; }.justify--around { justify-content: space-around; }.justify--evenly { justify-content: space-evenly; }.align--start { align-items: flex-start; }.align--end { align-items: flex-end; }.align--center { align-items: center; }.align--stretch { align-items: stretch; }.align--baseline { align-items: baseline; }.flex--grow { flex: 1; }.flex--none { flex: none; }.flex--shrink { flex-shrink: 1; }.grid--2 { display: grid; grid-template-columns: repeat(2, 1fr); }.grid--3 { display: grid; grid-template-columns: repeat(3, 1fr); }.grid--4 { display: grid; grid-template-columns: repeat(4, 1fr); }.grid--5 { display: grid; grid-template-columns: repeat(5, 1fr); }.grid--auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }.grid--span-2 { grid-column: span 2; }.grid--span-full { grid-column: 1 / -1; }@media (max-width: 1024px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--5 { grid-template-columns: repeat(3, 1fr); }}@media (max-width: 768px) { .grid--2 { grid-template-columns: 1fr; } .grid--3 { grid-template-columns: 1fr; } .grid--4 { grid-template-columns: 1fr; } .grid--5 { grid-template-columns: repeat(2, 1fr); } .grid--span-2 { grid-column: auto; } .grid--span-full { grid-column: auto; }}.d--block { display: block; }.d--inline { display: inline; }.d--inline-block { display: inline-block; }.d--inline-flex { display: inline-flex; }.d--grid { display: grid; }.d--none { display: none; }.overflow--hidden { overflow: hidden; }.overflow--visible { overflow: visible; }.overflow--auto { overflow: auto; }.overflow-x--hidden { overflow-x: hidden; }.pos--relative { position: relative; }.pos--absolute { position: absolute; }.pos--fixed { position: fixed; }.pos--sticky { position: sticky; }.inset--0 { inset: 0; }.z--below { z-index: -1; }.z--base { z-index: 0; }.z--content { z-index: 2; }.z--raised { z-index: 10; }.z--nav { z-index: 100; }.ratio--1-1 { aspect-ratio: 1 / 1; }.ratio--16-9 { aspect-ratio: 16 / 9; }.ratio--4-3 { aspect-ratio: 4 / 3; }.ratio--3-4 { aspect-ratio: 3 / 4; }.ratio--2-3 { aspect-ratio: 2 / 3; }.ratio--3-2 { aspect-ratio: 3 / 2; }.w-25 { width: 25%; }.w-33 { width: 33%; }.w-40 { width: 40%; }.w-50 { width: 50%; }.w-60 { width: 60%; }.w-66 { width: 66%; }.w-75 { width: 75%; }.w-100 { width: 100%; }.w-auto { width: auto; }.w-full { width: 100%; }.max-w-xs { max-width: 480px; }.max-w-sm { max-width: 640px; }.max-w-md { max-width: 760px; }.max-w-lg { max-width: 1024px; }.max-w-xl { max-width: var(--container-max, 1760px); }.text--left { text-align: left; }.text--center { text-align: center; }.text--right { text-align: right; }.text--upper { text-transform: uppercase; }.text--lower { text-transform: lowercase; }.text--caps { text-transform: capitalize; }.text--no-transform { text-transform: none; }.text--nowrap { white-space: nowrap; }.text--wrap { white-space: normal; }.text--balance { text-wrap: balance; }.text--truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.overlay { position: absolute; inset: 0; pointer-events: none;}.overlay--dark { background: rgba(13,11,11,0.60);}.overlay--gradient { background: linear-gradient(to top, rgba(13,11,11,0.92) 30%, transparent 70%);}.overlay--image-wash { background: rgba(13,11,11,0.75); }.img-cover { width: 100%; height: 100%; object-fit: cover; object-position: center;}.pointer--none { pointer-events: none; }.cursor--pointer { cursor: pointer; }.cursor--default { cursor: default; }.position--top-10 { top: 10%; }.position--top-20 { top: 20%; }.position--top-25 { top: 25%; }.position--top-33 { top: 33%; }.position--top-50 { top: 50%; }.position--top-66 { top: 66%; }.position--top-75 { top: 75%; }.position--top-100 { top: 100%; }.position--left-25 { left: 25%; }.position--left-33 { left: 33%; }.position--left-50 { left: 50%; }.position--left-60 { left: 60%; }.position--left-66 { left: 66%; }.position--left-75 { left: 75%; }.position--right-25 { right: 25%; }.position--right-33 { right: 33%; }.position--right-50 { right: 50%; }.position--right-60 { right: 60%; }.position--right-75 { right: 75%; }.position--bottom-25 { bottom: 25%; }.position--bottom-33 { bottom: 33%; }.position--bottom-50 { bottom: 50%; }.position--bottom-66 { bottom: 66%; }.position--bottom-75 { bottom: 75%; }.hover-lift { transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);}.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(13,11,11,0.25);}.hover-fade { transition: opacity 200ms ease;}.hover-fade:hover { opacity: 0.7; }.hover-scale { transition: transform 250ms ease;}.hover-scale:hover { transform: scale(1.03); }.hover-red { transition: color 200ms ease;}.hover-red:hover { color: var(--color-red, #ED3D24); }@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }@keyframes slideInLeft { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: translateX(0); } }@keyframes slideInRight { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: translateX(0); } }@keyframes scaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }.anim-fade-in { animation: fadeIn 400ms ease both; }.anim-fade-in-up { animation: fadeInUp 400ms cubic-bezier(0.25,0.46,0.45,0.94) both; }.anim-slide-left { animation: slideInLeft 400ms cubic-bezier(0.25,0.46,0.45,0.94) both; }.anim-slide-right { animation: slideInRight 400ms cubic-bezier(0.25,0.46,0.45,0.94) both; }.anim-scale-in { animation: scaleIn 350ms ease both; }.anim-delay-1 { animation-delay: 80ms; }.anim-delay-2 { animation-delay: 160ms; }.anim-delay-3 { animation-delay: 240ms; }.anim-delay-4 { animation-delay: 320ms; }.transition-base { transition: all 250ms cubic-bezier(0.25,0.46,0.45,0.94); }.transition-slow { transition: all 500ms cubic-bezier(0.25,0.46,0.45,0.94); }.transition-none { transition: none; }.reveal,.reveal-delay-1,.reveal-delay-2,.reveal-delay-3,.reveal-delay-4,.fade-in,.slide-up,.animate,[data-aos],.aos-init { opacity: 1 !important; transform: none !important; transition: none !important; visibility: visible !important;.display-1 { font-family: var(--fd); font-size: clamp(48px, 10.5vw, 160px); font-weight: 900; letter-spacing: -3.2px; line-height: 0.88; text-transform: uppercase; color: var(--color-cream);}.display-2 { font-family: var(--fd); font-size: clamp(36px, 6vw, 96px); font-weight: 900; letter-spacing: -2px; line-height: 0.9; text-transform: uppercase; color: var(--color-cream);}.heading-1 { font-family: var(--fd); font-size: clamp(28px, 4.5vw, 72px); font-weight: 900; letter-spacing: -1.5px; line-height: 1; text-transform: uppercase; color: var(--color-cream);}.heading-2 { font-family: var(--fd); font-size: clamp(22px, 3.5vw, 48px); font-weight: 900; letter-spacing: -1px; line-height: 1.05; text-transform: uppercase; color: var(--color-cream);}.heading-3 { font-family: var(--fs); font-size: var(--fs-heading-3); font-weight: 900; letter-spacing: -0.3px; line-height: 1.1; text-transform: uppercase; color: var(--color-cream);}.heading-4 { font-family: var(--fu); font-size: var(--fs-heading-4); font-weight: 500; letter-spacing: 1.5px; line-height: 1.3; text-transform: uppercase; color: var(--color-cream);}.body-lead { font-family: var(--fb); font-size: 18px; line-height: 1.75; color: var(--color-text-muted);}@media (max-width: 768px) { .body-lead { font-size: 16px; } }.body { font-family: var(--fb); font-size: 15px; line-height: 1.7; color: var(--color-text-muted);}@media (max-width: 768px) { .body { font-size: 14px; } }.body-sm { font-family: var(--fb); font-size: 13px; line-height: 1.65; color: var(--color-text-dim);}.caption { font-family: var(--fdu); font-size: 11px; line-height: 1.5; letter-spacing: 0.02em; color: var(--color-text-dim);}.label { font-family: var(--fu); font-size: 10px; font-weight: 500; letter-spacing: 2.2px; text-transform: uppercase; color: var(--color-accent);  display: block;}.eyebrow { font-family: var(--fu); font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--color-accent); display: block; margin-bottom: 12px;}.script { font-family: var(--fsc); font-size: clamp(24px, 3vw, 36px); font-weight: 400; color: var(--color-accent); line-height: 1.2; }.price { font-family: var(--fd); font-size: var(--fs-price); font-weight: 900; letter-spacing: -1px; color: var(--color-cream); line-height: 1;}.ticker-text { font-family: var(--fd); font-size: clamp(28px, 3.5vw, 48px); font-weight: 900; letter-spacing: -1px; text-transform: uppercase; color: var(--color-cream); white-space: nowrap; line-height: 1;}.feature-num { font-family: var(--fs); font-size: 36px; font-weight: 900; color: var(--color-cream); opacity: 0.15; line-height: 1;.section { position: relative; width: 100%; overflow: hidden;}.section--black { background: var(--color-black); color: var(--color-cream);}.section--dark { background: var(--color-dark); color: var(--color-cream);}.section--pad { padding-top: var(--space-15); padding-bottom: var(--space-15);}@media (max-width: 1024px) { .section--pad { padding-top: var(--space-13); padding-bottom: var(--space-13); }}@media (max-width: 768px) { .section--pad { padding-top: var(--space-12); padding-bottom: var(--space-12); }}.section--pad-lg { padding-top: var(--space-16); padding-bottom: var(--space-16);}@media (max-width: 1024px) { .section--pad-lg { padding-top: var(--space-14); padding-bottom: var(--space-14); }}@media (max-width: 768px) { .section--pad-lg { padding-top: var(--space-13); padding-bottom: var(--space-13); }}.section--pad-sm { padding-top: var(--space-14); padding-bottom: var(--space-14);}@media (max-width: 1024px) { .section--pad-sm { padding-top: var(--space-12); padding-bottom: var(--space-12); }}@media (max-width: 768px) { .section--pad-sm { padding-top: var(--space-11); padding-bottom: var(--space-11); }}.container { width: 90%; max-width: var(--container-max); margin: 0 auto;}@media (max-width: 1024px) { .container { width: 92%; } }@media (max-width: 768px) { .container { width: 94%; } }.container--narrow { width: 85%; max-width: var(--container-narrow);}@media (max-width: 768px) { .container--narrow { width: 94%; } }.container--full { width: 100%; max-width: 100%; padding: 0;.grid { display: grid; gap: 0;}.grid--2col { grid-template-columns: repeat(2, 1fr);}@media (max-width: 768px) { .grid--2col { grid-template-columns: 1fr; } }.grid--3col { grid-template-columns: repeat(3, 1fr);}@media (max-width: 1024px) { .grid--3col { grid-template-columns: repeat(2, 1fr); } }@media (max-width: 768px) { .grid--3col { grid-template-columns: 1fr; } }.grid--5col { grid-template-columns: repeat(5, 1fr);}@media (max-width: 1024px) { .grid--5col { grid-template-columns: repeat(3, 1fr); } }@media (max-width: 768px) { .grid--5col { grid-template-columns: repeat(2, 1fr); } }.grid--4col-footer { grid-template-columns: 1.5fr 1fr 1fr 1fr;}@media (max-width: 1024px) { .grid--4col-footer { grid-template-columns: 1fr 1fr; }}@media (max-width: 768px) { .grid--4col-footer { grid-template-columns: 1fr 1fr; }}.grid--img-text { grid-template-columns: 200px 1fr; align-items: center;}@media (max-width: 768px) { .grid--img-text { grid-template-columns: 1fr; } }.grid--gap-none { gap: 0; }.grid--gap-sm { gap: 3px; }.grid--gap-md { gap: var(--space-9); }.flex-row { display: flex; flex-direction: row; align-items: center;}.flex-row--between { justify-content: space-between;}.flex-row--end { justify-content: flex-end;}.flex-col { display: flex; flex-direction: column;}.flex-col--end { align-items: flex-end;}.gap-sm { gap: var(--space-2); }.gap-md { gap: var(--space-6); }.btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--fu); font-size: 11px; letter-spacing: 1.98px; text-transform: uppercase; cursor: pointer; border: none; border-radius: var(--radius-sm); white-space: nowrap; transition: filter 0.2s ease, transform 0.2s ease; text-decoration: none;}.btn:hover { transform: translateY(-2px); }.btn--primary { background: var(--color-accent); color: var(--color-cream); padding: 16px 32px;}.btn--primary:hover { background: #d63419; transform: translateY(-2px); }.btn--primary-lg { padding: 18px 40px;}.btn--ghost { background: transparent; color: var(--color-cream); border: 1px solid var(--color-cream-a30); padding: 14px 28px;}.btn--ghost:hover { border-color: var(--color-cream); }.btn--nav { background: var(--color-accent); color: var(--color-cream); padding: 10px 20px; font-size: 11px;}.btn--sm { padding: 8px 16px; font-size: 10px; letter-spacing: 1.5px;}.btn-group { display: flex; flex-direction: row; align-items: center; gap: var(--space-6); flex-wrap: wrap;}@media (max-width: 480px) { .btn-group { flex-direction: column; width: 100%; } .btn-group .btn { width: 100%; text-align: center; }}.link-arrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--fu); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--color-cream); border-bottom: 1px solid var(--color-accent); padding-bottom: 4px; transition: gap 0.2s ease; text-decoration: none;}.link-arrow::after { content: '→'; color: var(--color-accent); }.link-arrow:hover { gap: 20px; }.link-arrow--sm { font-size: 9px; gap: 8px;}.card { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-dark);}.card--dark { background: var(--color-dark); color: var(--color-cream); border: 1px solid rgba(237,227,191,0.08);}.card--menu { aspect-ratio: 2 / 3; display: flex; align-items: flex-end; border-radius: var(--radius-sm);}@media (max-width: 768px) { .card--menu { aspect-ratio: 4 / 3; } }.card--event { display: grid; grid-template-columns: 200px 1fr; border: 1px solid rgba(237,227,191,0.08); border-radius: var(--radius-sm); overflow: hidden; transition: border-color 0.2s ease;}.card--event:hover { border-color: rgba(237,61,36,0.3); }.nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); display: flex; align-items: center; z-index: 100; transition: background 0.3s ease, backdrop-filter 0.3s ease;}.nav--scrolled { background: rgba(13,11,11,0.95); backdrop-filter: blur(12px);}.mobile-menu { position: fixed; inset: 0; background: var(--color-black); z-index: 200; display: flex; flex-direction: column; padding: 80px; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);}.mobile-menu.is-open { transform: translateX(0); }@media (max-width: 480px) { .mobile-menu { padding: 60px 24px; } }.mobile-menu__link { font-family: var(--fd); font-size: clamp(36px, 8vw, 56px); font-weight: 900; text-transform: uppercase; letter-spacing: -1px; color: var(--color-cream); padding: 16px 0; border-bottom: 1px solid rgba(237,227,191,0.08); transition: color 0.2s; text-decoration: none; display: block;}.mobile-menu__link:hover { color: var(--color-accent); }.checker { background-image: repeating-conic-gradient(var(--color-red-a15) 0% 25%, transparent 0% 50%); background-size: 24px 24px;}.stripe { position: absolute; top: var(--nav-height); left: 0; right: 0; height: 4px; background: var(--color-accent); z-index: 2;}.grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px; z-index: 1;}.badge-tag { display: inline-flex; align-items: center; font-family: var(--fu); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 10px; border-radius: 2px; color: var(--color-cream); background: rgba(237,61,36,0.15); border: 1px solid rgba(237,61,36,0.3);}.divider { width: 100%; height: 1px; background: rgba(237,227,191,0.08); display: block;}.divider--strong { background: rgba(237,227,191,0.15);}.divider--vertical { width: 1px; height: var(--space-8); background: rgba(237,227,191,0.15); display: block;.hidden-mobile { display: block;}@media (max-width: 768px) { .hidden-mobile { display: none !important; }}.hidden-tablet { display: block;}@media (max-width: 1024px) { .hidden-tablet { display: none !important; }}.visible-mobile { display: none;}@media (max-width: 768px) { .visible-mobile { display: block; }}.text--center-mobile { text-align: left;}@media (max-width: 768px) { .text--center-mobile { text-align: center; }}.full-mobile { width: auto;}@media (max-width: 768px) { .full-mobile { width: 100%; }}.stack-mobile { display: flex; flex-direction: row;}@media (max-width: 768px) { .stack-mobile { flex-direction: column; gap: var(--space-4); }.card__body { padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-3); position: relative; z-index: 2;}@media (max-width: 1024px) { .card__body { padding: var(--space-6); } }@media (max-width: 768px) { .card__body { padding: var(--space-5); } }.card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,11,11,0.92) 30%, transparent 70%); pointer-events: none; z-index: 1;}.card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid rgba(237,227,191,0.08);.nav__inner { width: 90%; max-width: var(--container-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between;}@media (max-width: 768px) { .nav__inner { width: 94%; } }.nav__links { display: flex; gap: var(--space-9); align-items: center; list-style: none;}@media (max-width: 1024px) { .nav__links { gap: var(--space-6); } }@media (max-width: 768px) { .nav__links { display: none; } }.ticker { background: var(--color-dark); overflow: hidden; padding: var(--space-7) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);}@media (max-width: 768px) { .ticker { padding: var(--space-5) 0; } }.ticker__track { display: flex; width: max-content; animation: matto-ticker 22s linear infinite;}.ticker__track:hover { animation-play-state: paused;}@keyframes matto-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } .brxe-container {width: 80%} .woocommerce main.site-main {width: 80%} #brx-content.wordpress {width: 80%}