*, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; } img, video, svg { max-width: 100%; } @font-face { font-family: 'General Sans'; src: url('/fonts/GeneralSans-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'General Sans'; src: url('/fonts/GeneralSans-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; } html{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: sans-serif;} body{margin: 0;} a{background-color: #0000;} a:active, a:hover{outline: 0;} h1{margin: .67em 0; font-size: 2em;} small{font-size: 80%;} img{border: 0;} svg:not(:root){overflow: hidden;} hr{box-sizing: content-box; height: 0;} pre{overflow: auto;} button{overflow: visible;} button, select{text-transform: none;} button, html input[type="button"], input[type="reset"]{-webkit-appearance: button; cursor: pointer;} button[disabled], html input[disabled]{cursor: default;} button::-moz-focus-inner, input::-moz-focus-inner{border: 0; padding: 0;} input{line-height: normal;} input[type="checkbox"], input[type="radio"]{box-sizing: border-box; padding: 0;} input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button{height: auto;} input[type="search"]{-webkit-appearance: none;} input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration{-webkit-appearance: none;} textarea{overflow: auto;} table{border-collapse: collapse; border-spacing: 0;} td, th{padding: 0;} *{box-sizing: border-box;} html{height: 100%;} body{color: #333; background-color: #fff; min-height: 100%; margin: 0; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px;} img{vertical-align: middle; max-width: 100%; display: inline-block;} html[data-w-dynpage] [data-w-cloak]{color: #0000 !important;} h1, h2, h3, h4, h5, h6{margin-bottom: 10px; font-weight: bold;} h1{margin-top: 20px; font-size: 38px; line-height: 44px;} h2{margin-top: 20px; font-size: 32px; line-height: 36px;} h3{margin-top: 20px; font-size: 24px; line-height: 30px;} h4{margin-top: 10px; font-size: 18px; line-height: 24px;} h5{margin-top: 10px; font-size: 14px; line-height: 20px;} h6{margin-top: 10px; font-size: 12px; line-height: 18px;} p{margin-top: 0; margin-bottom: 10px;} blockquote{border-left: 5px solid #e2e2e2; margin: 0 0 10px; padding: 10px 20px; font-size: 18px; line-height: 22px;} figure{margin: 0 0 10px;} ul, ol{margin-top: 0; margin-bottom: 10px; padding-left: 40px;} label{margin-bottom: 5px; font-weight: bold; display: block;} [data-nav-menu-open]{text-align: center; background: #c8c8c8; min-width: 200px; position: absolute; top: 100%; left: 0; right: 0; overflow: visible; display: block !important;} @font-face{font-family: Generalsans; src: url("https://cdn.prod.website-files.com/6ad52a69218b7ba4655f9af8/6ad52a69218b7ba4655f9adc_GeneralSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap;} @font-face{font-family: Generalsans; src: url("https://cdn.prod.website-files.com/6ad52a69218b7ba4655f9af8/6ad52a69218b7ba4655f9add_GeneralSans-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap;} @font-face{font-family: Generalsans; src: url("https://cdn.prod.website-files.com/6ad52a69218b7ba4655f9af8/6ad52a69218b7ba4655f9ade_GeneralSans-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap;} @font-face{font-family: Generalsans; src: url("https://cdn.prod.website-files.com/6ad52a69218b7ba4655f9af8/6ad52a69218b7ba4655f9adf_GeneralSans-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap;} @font-face{font-family: Generalsans; src: url("https://cdn.prod.website-files.com/6ad52a69218b7ba4655f9af8/6ad52a69218b7ba4655f9ae1_GeneralSans-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap;} @font-face{font-family: Generalsans; src: url('/fonts/GeneralSans-Medium.woff2') format("woff2"); font-weight: 500; font-style: normal; font-display: swap;} @font-face{font-family: Generalsans; src: url('/fonts/GeneralSans-Regular.woff2') format("woff2"); font-weight: 400; font-style: normal; font-display: swap;} @font-face{font-family: Generalsans; src: url('/fonts/GeneralSans-Medium.woff2') format("woff2"); font-weight: 500; font-style: italic; font-display: swap;} :root{--_theme---background: var(--_color-shades---neutral--neutral-50); --_text-style---font-family: var(--_typography---font-family--primary-family); --_theme---text: var(--_color-shades---neutral--neutral-950); --_text-size---font-size: var(--_typography---font-size--text-base); --_text-size---line-height: var(--_typography---line-height--1-5); --_text-style---weight: var(--_typography---font-weight--regular); --_text-size---letter-spacing: var(--_typography---letter-spacing--0em); --_typography---font-size--text-5xl: clamp(2.25 * 1rem, ((2.25 - ((7.25 - 2.25) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((7.25 - 2.25) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 7.25 * 1rem); --_typography---line-height--1: 1; --_typography---letter-spacing--0-03em: -.03em; --_typography---font-size--text-4xl: clamp(2 * 1rem, ((2 - ((5.5 - 2) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((5.5 - 2) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 5.5 * 1rem); --_typography---line-height--1-1: 1.1; --_typography---font-size--text-3xl: clamp(1.8125 * 1rem, ((1.8125 - ((4.125 - 1.8125) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((4.125 - 1.8125) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 4.125 * 1rem); --_typography---line-height--1-3: 1.3; --_typography---font-size--text-2xl: clamp(1.625 * 1rem, ((1.625 - ((3.125 - 1.625) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((3.125 - 1.625) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 3.125 * 1rem); --_typography---font-size--text-xl: clamp(1.4375 * 1rem, ((1.4375 - ((2.375 - 1.4375) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((2.375 - 1.4375) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 2.375 * 1rem); --_typography---font-size--text-md: clamp(1.125 * 1rem, ((1.125 - ((1.375 - 1.125) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((1.375 - 1.125) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 1.375 * 1rem); --_typography---line-height--1-5: 1.5; --_typography---font-size--text-base: clamp(1 * 1rem, ((1 - ((1 - 1) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((1 - 1) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 1 * 1rem); --size--0rem\: 0rem; --_spacing---space--1: clamp(.375 * 1rem, ((.375 - ((.5 - .375) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((.5 - .375) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), .5 * 1rem); --_spacing---space--2: clamp(.625 * 1rem, ((.625 - ((.75 - .625) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((.75 - .625) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), .75 * 1rem); --_spacing---space--4: clamp(1.25 * 1rem, ((1.25 - ((1.5 - 1.25) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((1.5 - 1.25) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 1.5 * 1rem); --_theme---border: var(--_color-shades---neutral--neutral-300); --container--sm: calc(var(--column-width--plus-gutter) * (var(--site--column-count) - 2) - var(--site--gutter)); --site--margin: clamp(1 * 1rem, ((1 - ((2.5 - 1) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((2.5 - 1) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 2.5 * 1rem); --container--main: calc(var(--site--viewport-max) * 1rem); --container--full: 100%; --site--gutter: clamp(1 * 1rem, ((1 - ((2 - 1) / (90 - 20) * 20)) * 1rem + ((2 - 1) / (90 - 20)) * 100vw), 2 * 1rem); --_spacing---space--3: clamp(.875 * 1rem, ((.875 - ((1 - .875) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((1 - .875) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 1 * 1rem); --_spacing---space--5: clamp(1.75 * 1rem, ((1.75 - ((2 - 1.75) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((2 - 1.75) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 2 * 1rem); --_spacing---space--6: clamp(2 * 1rem, ((2 - ((2.5 - 2) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((2.5 - 2) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 2.5 * 1rem); --_spacing---space--7: clamp(2.25 * 1rem, ((2.25 - ((3 - 2.25) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((3 - 2.25) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 3 * 1rem); --_spacing---space--8: clamp(2.5 * 1rem, ((2.5 - ((4 - 2.5) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((4 - 2.5) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 4 * 1rem); --radius--sm: .25rem; --radius--md: .5rem; --radius--xl: 2rem; --radius--round: calc(infinity * 1px); --_text-style---font-style: normal; --_text-size---font-family\: var(--_typography---font-family--primary-family); --_text-size---font-weight\: var(--_typography---font-weight--regular); --_typography---font-weight--light: 300; --_typography---font-weight--regular: 400; --_typography---font-weight--medium: 500; --_typography---font-weight--bold: 700; --_text-style---font-family--font-family\: var(--_typography---font-family--primary-family); --_color-shades---brand--transparent\: transparent; --border-width--base: .094rem; --swatch--brand\: #fe3c18; --_theme---primary: var(--_color-shades---blue--blue-800); --size--0-5rem\: .5rem; --size--0-75rem\: .75rem; --_button-style---border: var(--_color-shades---transparent); --_button-style---background: var(--_theme---primary); --_typography---font-family--primary-family: Generalsans, Arial, sans-serif; --_button-style---text: var(--_theme---primary-text); --_button-style---border-hover: var(--_color-shades---transparent); --_button-style---background-hover: var(--_theme---primary-faded); --_button-style---text-hover: var(--_theme---primary-text); --_spacing---section-space--sm: clamp(3 * 1rem, ((3 - ((5 - 3) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((5 - 3) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 5 * 1rem); --_spacing---section-space--main: clamp(4 * 1rem, ((4 - ((7 - 4) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((7 - 4) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 7 * 1rem); --_spacing---section-space--lg: clamp(5.5 * 1rem, ((5.5 - ((10 - 5.5) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((10 - 5.5) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 10 * 1rem); --radius--lg: 1rem; --radius--2xl: 4rem; --_typography---font-weight--semibold: 600; --_cnud--typography---font-family--mono: "IBM Plex Mono", monospace; --_typography---font-family--secondary-family: Vollkorn, serif; --site--viewport-max: 120; --site--viewport-min: 20; --site--column-count: 12; --site--column-width: calc((min(var(--container--main), 100vw - var(--site--margin) * 2) - (var(--site--gutter) * (var(--site--column-count) - 1))) / var(--site--column-count)); --focus--width: .125rem; --focus--offset-inner: -.125rem; --focus--offset-outer: .1875rem; --_color-shades---neutral--neutral-50: #fafafa; --_color-shades---neutral--neutral-100: #f5f5f5; --_color-shades---neutral--neutral-100-o5: color-mix(in srgb, var(--_color-shades---neutral--neutral-100) 5%, transparent); --_color-shades---neutral--neutral-100-o10: color-mix(in srgb, var(--_color-shades---neutral--neutral-100) 10%, transparent); --_color-shades---neutral--neutral-100-o20: color-mix(in srgb, var(--_color-shades---neutral--neutral-100) 20%, transparent); --_color-shades---neutral--neutral-200: #e5e5e5; --_color-shades---neutral--neutral-300: #d4d4d4; --_color-shades---neutral--neutral-400: #a3a3a3; --_color-shades---neutral--neutral-500: #737373; --_color-shades---neutral--neutral-600: #525252; --_color-shades---neutral--neutral-700: #404040; --_color-shades---neutral--neutral-800: #262626; --_color-shades---neutral--neutral-900: #171717; --_color-shades---neutral--neutral-900-o5: color-mix(in srgb, var(--_color-shades---neutral--neutral-900) 5%, transparent); --_color-shades---neutral--neutral-900-o10: color-mix(in srgb, var(--_color-shades---neutral--neutral-900) 10%, transparent); --_color-shades---neutral--neutral-900-o20: color-mix(in srgb, var(--_color-shades---neutral--neutral-900) 20%, transparent); --_color-shades---neutral--neutral-950: #0a0a0a; --_color-shades---blue--blue-50: #f3f3ff; --_color-shades---blue--blue-100: #e6e6ff; --_color-shades---blue--blue-200: #cacaff; --_color-shades---blue--blue-300: #b2b2ff; --_color-shades---blue--blue-400: #99f; --_color-shades---blue--blue-500: #7c7cff; --_color-shades---blue--blue-600: #6261ff; --_color-shades---blue--blue-700: #4443ff; --_color-shades---blue--blue-800: #1110ff; --_color-shades---blue--blue-900: #010099; --_color-shades---blue--blue-950: #000a59; --_color-shades---orange--orange-50: #ffedeb; --_color-shades---orange--orange-100: #ffdad6; --_color-shades---orange--orange-200: #ffb0a6; --_color-shades---orange--orange-300: #ff8572; --_color-shades---orange--orange-400: #ff5004; --_color-shades---orange--orange-500: #d34001; --_color-shades---orange--orange-600: #a93200; --_color-shades---orange--orange-700: #802300; --_color-shades---orange--orange-800: #5e1700; --_color-shades---orange--orange-900: #3a0b00; --_color-shades---orange--orange-950: #270500; --_color-shades---red--red-50: #ffecec; --_color-shades---red--red-100: #fdd; --_color-shades---red--red-200: #ffb7b7; --_color-shades---red--red-300: #ff9191; --_color-shades---red--red-400: #ff6565; --_color-shades---red--red-500: red; --_color-shades---red--red-600: #ce0101; --_color-shades---red--red-700: #9c0000; --_color-shades---red--red-800: #6d0000; --_color-shades---red--red-900: #450000; --_color-shades---red--red-950: #2d0000; --column-width--plus-gutter: calc(var(--column-width--1) + var(--site--gutter)); --_align-items---value: start; --_column-count---value: 12; --_justify-content---value: start; --_theme---faded: var(--_color-shades---neutral--neutral-100); --_theme---faded-text: var(--_color-shades---neutral--neutral-800); --_theme---primary-faded: var(--_color-shades---blue--blue-600); --_theme---primary-text: var(--_color-shades---neutral--neutral-50); --_theme---accent: var(--_color-shades---blue--blue-100); --_theme---accent-faded: var(--_color-shades---blue--blue-50); --_theme---accent-text: var(--_color-shades---blue--blue-700); --_theme---input: var(--_color-shades---neutral--neutral-300); --_theme---ring: var(--_color-shades---neutral--neutral-400); --_theme---destructive: var(--_color-shades---red--red-600); --_theme---desctructive-text: white; --_theme---success: var(--_color-shades---green--green-700); --_theme---success-text: white; --_theme---selection--background: var(--_color-shades---blue--blue-400); --_theme---selection--text: var(--_color-shades---blue--blue-50); --_spacing---section-space--none: 0rem; --_typography---letter-spacing--0em: 0em; --_spacing---section-space--page-top: clamp(10 * 1rem, ((10 - ((14 - 10) / (90 - 20) * 20)) * 1rem + ((14 - 10) / (90 - 20)) * 100vw), 14 * 1rem); --_typography---font-size--text-xs: clamp(.75 * 1rem, ((.75 - ((.75 - .75) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((.75 - .75) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), .75 * 1rem); --_typography---font-size--text-sm: clamp(.875 * 1rem, ((.875 - ((.875 - .875) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((.875 - .875) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), .875 * 1rem); --_typography---font-size--text-lg: clamp(1.25 * 1rem, ((1.25 - ((1.75 - 1.25) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((1.75 - 1.25) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 1.75 * 1rem); --_color-shades---transparent: transparent; --_color-shades---white: white; --_color-shades---black: black; --_color-shades---green--green-50: #f0fdf4; --_color-shades---green--green-100: #dcfce7; --_color-shades---green--green-200: #b9f8cf; --_typography---font-size--text-6xl: clamp(2.5 * 1rem, ((2.5 - ((10 - 2.5) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((10 - 2.5) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 10 * 1rem); --_color-shades---green--green-300: #7bf1a8; --_color-shades---green--green-400: #05df72; --_color-shades---green--green-500: #00c758; --_color-shades---green--green-600: #00a544; --_color-shades---green--green-700: #008138; --_color-shades---green--green-800: #016630; --_color-shades---green--green-900: #0d542b; --_color-shades---green--green-950: #032e15; --column-width--1: var(--site--column-width); --column-width--2: calc(var(--column-width--plus-gutter) * 2 - var(--site--gutter)); --column-width--3: calc(var(--column-width--plus-gutter) * 3 - var(--site--gutter)); --column-width--4: calc(var(--column-width--plus-gutter) * 4 - var(--site--gutter)); --column-width--5: calc(var(--column-width--plus-gutter) * 5 - var(--site--gutter)); --column-width--6: calc(var(--column-width--plus-gutter) * 6 - var(--site--gutter)); --column-width--7: calc(var(--column-width--plus-gutter) * 7 - var(--site--gutter)); --column-width--8: calc(var(--column-width--plus-gutter) * 8 - var(--site--gutter)); --column-width--9: calc(var(--column-width--plus-gutter) * 9 - var(--site--gutter)); --column-width--10: calc(var(--column-width--plus-gutter) * 10 - var(--site--gutter)); --column-width--11: calc(var(--column-width--plus-gutter) * 11 - var(--site--gutter)); --column-width--12: calc(var(--column-width--plus-gutter) * 12 - var(--site--gutter)); --column-margin--0: 0px; --column-margin--1: calc(var(--column-width--plus-gutter) * 1); --column-margin--2: calc(var(--column-width--plus-gutter) * 2); --column-margin--3: calc(var(--column-width--plus-gutter) * 3); --column-margin--4: calc(var(--column-width--plus-gutter) * 4); --column-margin--5: calc(var(--column-width--plus-gutter) * 5); --column-margin--6: calc(var(--column-width--plus-gutter) * 6); --column-margin--7: calc(var(--column-width--plus-gutter) * 7); --column-margin--8: calc(var(--column-width--plus-gutter) * 8); --column-margin--9: calc(var(--column-width--plus-gutter) * 9); --column-margin--10: calc(var(--column-width--plus-gutter) * 10); --column-margin--11: calc(var(--column-width--plus-gutter) * 11); --column-margin--12: calc(var(--column-width--plus-gutter) * 12);} @supports (color: lab(0% 0 0)){:root{--_color-shades---blue--blue-50: lab(96.1464% 1.6287 -5.7936); --_color-shades---blue--blue-100: lab(91.8025% 3.54341 -12.2448); --_color-shades---blue--blue-200: lab(82.6996% 8.07795 -26.0144); --_color-shades---blue--blue-300: lab(74.7249% 12.8897 -38.5422); --_color-shades---blue--blue-400: lab(66.5344% 18.6611 -51.3563); --_color-shades---blue--blue-500: lab(57.0274% 27.1347 -66.6989); --_color-shades---blue--blue-600: lab(48.6667% 36.7043 -80.232); --_color-shades---blue--blue-700: lab(40.2209% 48.7071 -94.314); --_color-shades---blue--blue-800: lab(30.7665% 65.9589 -110.145); --_color-shades---blue--blue-900: lab(15.1407% 46.8158 -76.5752); --_color-shades---blue--blue-950: lab(6.67372% 33.3842 -55.2938); --_color-shades---orange--orange-50: lab(95.1767% 6.10942 3.32632); --_color-shades---orange--orange-100: lab(90.1001% 12.8755 7.04343); --_color-shades---orange--orange-200: lab(79.4222% 28.6818 17.3627); --_color-shades---orange--orange-300: lab(69.5139% 46.133 32.4842); --_color-shades---orange--orange-400: lab(59.9271% 65.5102 70.6877); --_color-shades---orange--orange-500: lab(49.7363% 56.9316 61.5849); --_color-shades---orange--orange-600: lab(39.7827% 48.2701 52.7081); --_color-shades---orange--orange-700: lab(29.4805% 39.465 41.8511); --_color-shades---orange--orange-800: lab(20.423% 31.7907 30.6531); --_color-shades---orange--orange-900: lab(10.4793% 22.8185 16.2605); --_color-shades---orange--orange-950: lab(5.04421% 16.1575 7.90287); --_color-shades---red--red-50: lab(94.9095% 6.75336 2.49543); --_color-shades---red--red-100: lab(91.0212% 12.2049 4.61125); --_color-shades---red--red-200: lab(81.3844% 26.8731 10.9595); --_color-shades---red--red-300: lab(72.4214% 42.3605 19.2464); --_color-shades---red--red-400: lab(63.6448% 59.5537 32.2243); --_color-shades---red--red-500: lab(54.2921% 80.9093 70.0627); --_color-shades---red--red-600: lab(43.8916% 68.6685 59.2034); --_color-shades---red--red-700: lab(32.6863% 56.1385 47.8421); --_color-shades---red--red-800: lab(21.6089% 43.2766 33.2606); --_color-shades---red--red-900: lab(11.4189% 31.6783 18.1939); --_color-shades---red--red-950: lab(5.30515% 22.528 8.47481); --_color-shades---green--green-50: lab(98.1563% -5.60117 2.75915); --_color-shades---green--green-100: lab(96.1861% -13.8464 6.52365); --_color-shades---green--green-200: lab(92.4222% -26.4702 12.9427); --_color-shades---green--green-300: lab(86.9953% -47.2691 25.0054); --_color-shades---green--green-400: lab(78.503% -64.9265 39.7492); --_color-shades---green--green-500: lab(70.5521% -66.5147 45.8073); --_color-shades---green--green-600: lab(59.0978% -58.6621 41.2579); --_color-shades---green--green-700: lab(47.0329% -47.0239 31.4788); --_color-shades---green--green-800: lab(37.4616% -36.7971 22.9692); --_color-shades---green--green-900: lab(30.797% -29.6927 17.382); --_color-shades---green--green-950: lab(15.6845% -20.4225 11.7249);}} body{background-color: var(--_theme---background); font-family: var(--_text-style---font-family); color: var(--_theme---text); font-size: var(--_text-size---font-size); line-height: var(--_text-size---line-height); font-weight: var(--_text-style---weight); letter-spacing: var(--_text-size---letter-spacing);} h1{font-size: var(--_typography---font-size--text-5xl); line-height: var(--_typography---line-height--1); letter-spacing: var(--_typography---letter-spacing--0-03em); margin-top: 0; margin-bottom: 0;} h2{font-size: var(--_typography---font-size--text-4xl); line-height: var(--_typography---line-height--1-1); letter-spacing: var(--_typography---letter-spacing--0-03em); margin-top: 0; margin-bottom: 0;} h3{font-size: var(--_typography---font-size--text-3xl); line-height: var(--_typography---line-height--1-3); margin-top: 0; margin-bottom: 0;} h4{font-size: var(--_typography---font-size--text-2xl); line-height: var(--_typography---line-height--1-3); margin-top: 0; margin-bottom: 0;} h5{font-size: var(--_typography---font-size--text-xl); line-height: var(--_typography---line-height--1-3); margin-top: 0; margin-bottom: 0;} h6{font-size: var(--_typography---font-size--text-md); line-height: var(--_typography---line-height--1-5); margin-top: 0; margin-bottom: 0;} p{font-size: var(--_typography---font-size--text-base); line-height: var(--_typography---line-height--1-5); letter-spacing: var(--_text-size---letter-spacing);} a{color: inherit; text-decoration: none;} ul, ol{margin-top: var(--size--0rem\); margin-bottom: var(--size--0rem\); padding-left: var(--size--0rem\); list-style-type: none; overflow: visible;} li{margin-bottom: var(--_spacing---space--1);} img{object-fit: cover; width: 100%; max-width: 100%;} blockquote{padding: var(--_spacing---space--2) var(--_spacing---space--4); border-left: .2rem solid var(--_theme---border); font-size: var(--_text-size---font-size); line-height: var(--_text-size---line-height); letter-spacing: var(--_text-size---letter-spacing); --_text-size---font-size: var(--_typography---font-size--text-md); --_text-size---line-height: var(--_typography---line-height--1-5); --_text-size---letter-spacing: var(--_typography---letter-spacing--0em); --_text-size---font-family\: var(--_typography---font-family--primary-family); --_text-size---font-weight\: var(--_typography---font-weight--regular);} .page_wrap{flex-flow: column; justify-content: flex-start; align-items: stretch; min-height: 100svh; display: flex; overflow: clip;} .page_wrap.is-home{background-color: var(--_theme---background); background-color: var(--_theme---background); grid-template-rows: min(1193.66vw, 22918.2px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); align-items: start; width: min(100vw, 1920px); height: auto; display: grid; overflow: hidden;} .page_main{flex-flow: column; flex: 1; justify-content: flex-start; align-items: stretch; display: flex;} .page_main.is-home{flex-shrink: 0; grid-area: 1 / 1 / span 1 / span 10; align-self: start; align-items: flex-start; width: min(100vw, 1920px); height: min(1193.66vw, 22918.2px); overflow: hidden;} .page_code_wrap{position: fixed; inset: 0% 0% auto;} .u-container-small{max-width: var(--container--sm); width: calc(100% - var(--site--margin) * 2); margin-left: auto; margin-right: auto; position: relative; container-type: inline-size;} .u-container{max-width: var(--container--main); width: calc(100% - var(--site--margin) * 2); margin-left: auto; margin-right: auto; position: relative; container-type: inline-size;} .u-container-full{max-width: var(--container--full); width: calc(100% - var(--site--margin) * 2); margin-left: auto; margin-right: auto; position: relative; container-type: inline-size;} .u-display-grid{grid-column-gap: var(--site--gutter); grid-row-gap: var(--site--gutter); --_column-count---value: 12; grid-template-rows: auto; grid-auto-columns: minmax(0, 1fr); grid-template-columns: var(--grid-main); display: grid;} .u-vflex-stretch-between{flex-flow: column; justify-content: space-between; align-items: stretch; display: flex;} .u-display-grid-desktop, .u-display-grid-tablet, .u-display-grid-landscape{grid-column-gap: var(--site--gutter); grid-row-gap: var(--site--gutter); --_column-count---value: 12; grid-template-rows: auto; grid-auto-columns: minmax(0, 1fr); grid-template-columns: var(--grid-main); display: grid;} .u-display-grid-breakout{grid-column-gap: var(--site--gutter); grid-row-gap: var(--site--gutter); grid-template-rows: auto; grid-auto-columns: minmax(0, 1fr); grid-template-columns: var(--grid-breakout); display: grid;} .u-display-grid-subgrid{grid-template-rows: auto; grid-auto-columns: minmax(0, 1fr); grid-template-columns: subgrid; grid-column-gap: inherit; grid-row-gap: inherit; grid-column: auto / span 1; display: grid;} .u-display-grid-autofit{grid-column-gap: var(--site--gutter); grid-row-gap: var(--site--gutter); grid-template-rows: auto; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); grid-auto-columns: minmax(0, 1fr); display: grid;} .u-display-grid-autofill{grid-column-gap: var(--site--gutter); grid-row-gap: var(--site--gutter); grid-template-rows: auto; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); grid-auto-columns: minmax(0, 1fr); display: grid;} .u-flex-shrink{flex: 0 auto;} .u-flex-grow{flex: 1;} .u-flex-noshrink{flex: none;} .u-align-self-auto{align-self: auto;} .u-align-self-start{align-self: flex-start;} .u-align-self-center{align-self: center;} .u-align-self-end{align-self: flex-end;} .u-align-self-stretch{align-self: stretch;} .u-align-items-stretch{align-content: stretch; align-items: stretch;} .u-align-items-start{align-content: stretch; align-items: start;} .u-align-items-center{align-content: stretch; align-items: center;} .u-align-items-end{align-content: stretch; align-items: end;} .u-col-full{grid-column: 1 / -1;} .u-col-custom{grid-column: auto / span 1;} .u-col-indent{grid-column: 2 / -2;} .u-col-1{grid-column: auto / span 1;} .u-col-2{grid-column: auto / span 2;} .u-col-3{grid-column: auto / span 3;} .u-col-4{grid-column: auto / span 4;} .u-col-5{grid-column: auto / span 5;} .u-col-6{grid-column: auto / span 6;} .u-col-7{grid-column: auto / span 7;} .u-col-8{grid-column: auto / span 8;} .u-col-9{grid-column: auto / span 9;} .u-col-10{grid-column: auto / span 10;} .u-col-11{grid-column: auto / span 11;} .u-col-12{grid-column: auto / span 12;} .u-order-first{order: -1;} .u-order-last{order: 9999;} .u-order-first-desktop{order: -1;} .u-order-last-desktop{order: 9999;} .u-gap-inherit{grid-column-gap: inherit; grid-row-gap: inherit;} .u-gap-gutter{grid-column-gap: var(--site--gutter); grid-row-gap: var(--site--gutter);} .u-gap-0{grid-column-gap: var(--size--0rem\); grid-row-gap: var(--size--0rem\);} .u-gap-1{grid-column-gap: var(--_spacing---space--1); grid-row-gap: var(--_spacing---space--1);} .u-gap-2{grid-column-gap: var(--_spacing---space--2); grid-row-gap: var(--_spacing---space--2);} .u-gap-3{grid-column-gap: var(--_spacing---space--3); grid-row-gap: var(--_spacing---space--3);} .u-gap-4{grid-column-gap: var(--_spacing---space--4); grid-row-gap: var(--_spacing---space--4);} .u-gap-5{grid-column-gap: var(--_spacing---space--5); grid-row-gap: var(--_spacing---space--5);} .u-gap-6{grid-column-gap: var(--_spacing---space--6); grid-row-gap: var(--_spacing---space--6);} .u-gap-7{grid-column-gap: var(--_spacing---space--7); grid-row-gap: var(--_spacing---space--7);} .u-gap-8{grid-column-gap: var(--_spacing---space--8); grid-row-gap: var(--_spacing---space--8);} .u-gap-row-inherit{grid-row-gap: inherit;} .u-gap-row-gutter{grid-row-gap: var(--site--gutter);} .u-gap-row-0{grid-column-gap: var(--size--0rem\); grid-row-gap: var(--size--0rem\);} .u-gap-row-1{grid-row-gap: var(--_spacing---space--1);} .u-gap-row-2{grid-row-gap: var(--_spacing---space--2);} .u-gap-row-3{grid-row-gap: var(--_spacing---space--3);} .u-gap-row-4{grid-row-gap: var(--_spacing---space--4);} .u-gap-row-5{grid-row-gap: var(--_spacing---space--5);} .u-gap-row-6{grid-row-gap: var(--_spacing---space--6);} .u-gap-row-7{grid-row-gap: var(--_spacing---space--7);} .u-gap-row-8{grid-row-gap: var(--_spacing---space--8);} .u-radius-none{border-radius: 0;} .u-radius-sm{border-radius: var(--radius--sm);} .u-radius-md{border-radius: var(--radius--md);} .u-radius-xl{border-radius: var(--radius--xl);} .u-radius-round{border-radius: var(--radius--round);} .u-display-none{display: none;} .u-display-block{display: block;} .u-display-contents{display: contents;} .u-overflow-visible{overflow: visible;} .u-overflow-hidden{overflow: hidden;} .u-overflow-clip{overflow: clip;} .u-overflow-scroll{overflow: scroll;} .u-overflow-auto{overflow: auto;} .u-overflow-x-auto{overflow: auto hidden;} .u-overflow-y-auto{overflow: hidden auto;} .u-overflow-left-hidden{clip-path: polygon(0 0, 9000% 0, 9000% 100%, 0% 100%);} .u-position-relative{position: relative;} .u-position-absolute{position: absolute;} .u-position-fixed{position: fixed;} .u-position-sticky{position: sticky; top: 0;} .u-position-static{position: static;} .u-z-negative{z-index: -1; position: relative;} .u-z-0{z-index: 0; position: relative;} .u-z-1{z-index: 1; position: relative;} .u-z-2{z-index: 2; position: relative;} .u-z-3{z-index: 3; position: relative;} .u-z-4{z-index: 4; position: relative;} .u-p-0{padding: var(--size--0rem\);} .u-p-1{padding: var(--_spacing---space--1);} .u-p-2{padding: var(--_spacing---space--2);} .u-p-3{padding: var(--_spacing---space--3);} .u-p-4{padding: var(--_spacing---space--4);} .u-p-5{padding: var(--_spacing---space--5);} .u-p-6{padding: var(--_spacing---space--6);} .u-p-7{padding: var(--_spacing---space--7);} .u-p-8{padding: var(--_spacing---space--8);} .u-m-0{margin: var(--size--0rem\);} .u-m-1{margin: var(--_spacing---space--1);} .u-m-2{margin: var(--_spacing---space--2);} .u-m-3{margin: var(--_spacing---space--3);} .u-m-4{margin: var(--_spacing---space--4);} .u-m-5{margin: var(--_spacing---space--5);} .u-m-6{margin: var(--_spacing---space--6);} .u-m-7{margin: var(--_spacing---space--7);} .u-m-8{margin: var(--_spacing---space--8);} .u-text-5xl{font-family: var(--_text-style---font-family); font-size: var(--_text-size---font-size); line-height: var(--_text-size---line-height); letter-spacing: var(--_text-size---letter-spacing); --_text-size---font-size: var(--_typography---font-size--text-5xl); --_text-size---line-height: var(--_typography---line-height--1); --_text-size---letter-spacing: var(--_typography---letter-spacing--0-03em); --_text-size---font-family\: var(--_typography---font-family--primary-family); --_text-size---font-weight\: var(--_typography---font-weight--regular); font-style: var(--_text-style---font-style);} .u-text-4xl{font-family: var(--_text-style---font-family); font-size: var(--_text-size---font-size); line-height: var(--_text-size---line-height); letter-spacing: var(--_text-size---letter-spacing); --_text-size---font-size: var(--_typography---font-size--text-4xl); --_text-size---line-height: var(--_typography---line-height--1); --_text-size---letter-spacing: var(--_typography---letter-spacing--0-03em); --_text-size---font-family\: var(--_typography---font-family--primary-family); --_text-size---font-weight\: var(--_typography---font-weight--regular); --_text-style---font-family: var(--_typography---font-family--primary-family); --_text-style---weight: var(--_typography---font-weight--regular); --_text-style---font-style: normal; font-style: var(--_text-style---font-style);} .u-text-3xl{font-family: var(--_text-style---font-family); font-size: var(--_text-size---font-size); line-height: var(--_text-size---line-height); letter-spacing: var(--_text-size---letter-spacing); --_text-size---font-size: var(--_typography---font-size--text-3xl); --_text-size---line-height: var(--_typography---line-height--1-3); --_text-size---letter-spacing: var(--_typography---letter-spacing--0em); --_text-size---font-family\: var(--_typography---font-family--primary-family); --_text-size---font-weight\: var(--_typography---font-weight--regular); --_text-style---font-family: var(--_typography---font-family--primary-family); --_text-style---weight: var(--_typography---font-weight--regular); --_text-style---font-style: normal; font-style: var(--_text-style---font-style);} .u-text-2xl{font-family: var(--_text-style---font-family); font-size: var(--_text-size---font-size); line-height: var(--_text-size---line-height); letter-spacing: var(--_text-size---letter-spacing); --_text-size---font-size: var(--_typography---font-size--text-2xl); --_text-size---line-height: var(--_typography---line-height--1-3); --_text-size---letter-spacing: var(--_typography---letter-spacing--0em); --_text-size---font-family\: var(--_typography---font-family--primary-family); --_text-size---font-weight\: var(--_typography---font-weight--regular); font-style: var(--_text-style---font-style);} .u-text-xl{font-family: var(--_text-style---font-family); font-size: var(--_text-size---font-size); line-height: var(--_text-size---line-height); letter-spacing: var(--_text-size---letter-spacing); --_text-size---font-size: var(--_typography---font-size--text-xl); --_text-size---line-height: var(--_typography---line-height--1-3); --_text-size---letter-spacing: var(--_typography---letter-spacing--0em); --_text-size---font-family\: var(--_typography---font-family--primary-family); --_text-size---font-weight\: var(--_typography---font-weight--regular); --_text-style---font-family--font-family\: var(--_typography---font-family--primary-family); font-style: var(--_text-style---font-style);} .u-text-h6{font-family: var(--_text-size---font-family\); font-size: var(--_text-size---font-size); line-height: var(--_text-size---line-height); font-weight: var(--_text-size---font-weight\); letter-spacing: var(--_text-size---letter-spacing); --_text-size---font-size: var(--_typography---font-size--text-lg); --_text-size---line-height: var(--_typography---line-height--1-5); --_text-size---letter-spacing: var(--_typography---letter-spacing--0em); --_text-size---font-family\: var(--_typography---font-family--primary-family); --_text-size---font-weight\: var(--_typography---font-weight--regular);} .u-text-sm{font-family: var(--_text-style---font-family); font-size: var(--_text-size---font-size); line-height: var(--_text-size---line-height); letter-spacing: var(--_text-size---letter-spacing); --_text-size---font-size: var(--_typography---font-size--text-sm); --_text-size---line-height: var(--_typography---line-height--1-5); --_text-size---letter-spacing: var(--_typography---letter-spacing--0em); --_text-size---font-family\: var(--_typography---font-family--primary-family); --_text-size---font-weight\: var(--_typography---font-weight--regular); font-style: var(--_text-style---font-style);} .u-text-base{font-family: var(--_text-style---font-family); font-size: var(--_text-size---font-size); line-height: var(--_text-size---line-height); letter-spacing: var(--_text-size---letter-spacing); font-style: var(--_text-style---font-style);} .u-text-md{font-family: var(--_text-style---font-family); font-size: var(--_text-size---font-size); line-height: var(--_text-size---line-height); letter-spacing: var(--_text-size---letter-spacing); --_text-size---font-size: var(--_typography---font-size--text-md); --_text-size---line-height: var(--_typography---line-height--1-5); --_text-size---letter-spacing: var(--_typography---letter-spacing--0em); --_text-size---font-family\: var(--_typography---font-family--primary-family); --_text-size---font-weight\: var(--_typography---font-weight--regular); font-style: var(--_text-style---font-style);} .u-text-lg{font-family: var(--_text-style---font-family); font-size: var(--_text-size---font-size); line-height: var(--_text-size---line-height); letter-spacing: var(--_text-size---letter-spacing); --_text-size---font-size: var(--_typography---font-size--text-lg); --_text-size---line-height: var(--_typography---line-height--1-5); --_text-size---letter-spacing: var(--_typography---letter-spacing--0em); --_text-size---font-family\: var(--_typography---font-family--primary-family); --_text-size---font-weight\: var(--_typography---font-weight--regular); font-style: var(--_text-style---font-style);} .u-text-6xl{font-family: var(--_text-style---font-family); font-size: var(--_text-size---font-size); line-height: var(--_text-size---line-height); letter-spacing: var(--_text-size---letter-spacing); --_text-size---font-size: var(--_typography---font-size--text-6xl); --_text-size---line-height: var(--_typography---line-height--1); --_text-size---letter-spacing: var(--_typography---letter-spacing--0-03em); --_text-size---font-family\: var(--_typography---font-family--primary-family); --_text-size---font-weight\: var(--_typography---font-weight--regular); font-style: var(--_text-style---font-style);} .u-font-light{font-weight: var(--_typography---font-weight--light);} .u-font-regular{font-weight: var(--_typography---font-weight--regular);} .u-font-medium{font-weight: var(--_typography---font-weight--medium);} .u-font-bold{font-weight: var(--_typography---font-weight--bold);} .u-line-clamp-1, .u-line-clamp-2, .u-line-clamp-3, .u-line-clamp-4{display: -webkit-box; overflow: hidden;} .u-text-align-left{text-align: left;} .u-text-align-center{text-align: center;} .u-text-align-right{text-align: right;} .u-font-italic{font-style: italic;} .u-text-transform-capitalize{text-transform: capitalize;} .u-text-transform-uppercase{text-transform: uppercase;} .u-text-color-inherit{color: inherit;} .u-text-color-faded{color: color-mix(in srgb, var(--_theme---text) 60%, transparent);} .u-rich-text h1{margin-top: var(--_spacing---space--7); margin-bottom: var(--_spacing---space--7); font-family: var(--_text-size---font-family\); font-size: var(--_text-size---font-size); line-height: var(--_text-size---line-height); font-weight: var(--_text-size---font-weight\); letter-spacing: var(--_text-size---letter-spacing); --_text-size---font-size: var(--_typography---font-size--text-4xl); --_text-size---line-height: var(--_typography---line-height--1); --_text-size---letter-spacing: var(--_typography---letter-spacing--0-03em); --_text-size---font-family\: var(--_typography---font-family--primary-family); --_text-size---font-weight\: var(--_typography---font-weight--regular);} .u-rich-text h2{margin-top: var(--_spacing---space--7); margin-bottom: var(--_spacing---space--7); font-family: var(--_text-size---font-family\); font-size: var(--_text-size---font-size); line-height: var(--_text-size---line-height); font-weight: var(--_text-size---font-weight\); letter-spacing: var(--_text-size---letter-spacing); --_text-size---font-size: var(--_typography---font-size--text-3xl); --_text-size---line-height: var(--_typography---line-height--1-3); --_text-size---letter-spacing: var(--_typography---letter-spacing--0em); --_text-size---font-family\: var(--_typography---font-family--primary-family); --_text-size---font-weight\: var(--_typography---font-weight--regular);} .u-rich-text h3{margin-top: var(--_spacing---space--6); margin-bottom: var(--_spacing---space--6); font-family: var(--_text-size---font-family\); font-size: var(--_text-size---font-size); line-height: var(--_text-size---line-height); font-weight: var(--_text-size---font-weight\); letter-spacing: var(--_text-size---letter-spacing); --_text-size---font-size: var(--_typography---font-size--text-2xl); --_text-size---line-height: var(--_typography---line-height--1-3); --_text-size---letter-spacing: var(--_typography---letter-spacing--0em); --_text-size---font-family\: var(--_typography---font-family--primary-family); --_text-size---font-weight\: var(--_typography---font-weight--regular);} .u-rich-text h4{margin-top: var(--_spacing---space--6); margin-bottom: var(--_spacing---space--6); font-family: var(--_text-size---font-family\); font-size: var(--_text-size---font-size); line-height: var(--_text-size---line-height); font-weight: var(--_text-size---font-weight\); letter-spacing: var(--_text-size---letter-spacing); --_text-size---font-size: var(--_typography---font-size--text-xl); --_text-size---line-height: var(--_typography---line-height--1-3); --_text-size---letter-spacing: var(--_typography---letter-spacing--0em); --_text-size---font-family\: var(--_typography---font-family--primary-family); --_text-size---font-weight\: var(--_typography---font-weight--regular);} .u-rich-text h5{margin-top: var(--_spacing---space--5); margin-bottom: var(--_spacing---space--5); font-family: var(--_text-size---font-family\); font-size: var(--_text-size---font-size); line-height: var(--_text-size---line-height); font-weight: var(--_text-size---font-weight\); letter-spacing: var(--_text-size---letter-spacing); --_text-size---font-size: var(--_typography---font-size--text-lg); --_text-size---line-height: var(--_typography---line-height--1-5); --_text-size---letter-spacing: var(--_typography---letter-spacing--0em); --_text-size---font-family\: var(--_typography---font-family--primary-family); --_text-size---font-weight\: var(--_typography---font-weight--regular);} .u-rich-text h6{margin-top: var(--_spacing---space--5); margin-bottom: var(--_spacing---space--5); font-family: var(--_text-size---font-family\); font-size: var(--_text-size---font-size); line-height: var(--_text-size---line-height); font-weight: var(--_text-size---font-weight\); letter-spacing: var(--_text-size---letter-spacing); --_text-size---font-size: var(--_typography---font-size--text-sm); --_text-size---line-height: var(--_typography---line-height--1-5); --_text-size---letter-spacing: var(--_typography---letter-spacing--0em); --_text-size---font-family\: var(--_typography---font-family--primary-family); --_text-size---font-weight\: var(--_typography---font-weight--regular);} .u-rich-text blockquote{margin-top: var(--_spacing---space--6); margin-bottom: var(--_spacing---space--6); padding: var(--_spacing---space--2) var(--_spacing---space--4); border-left-width: .2rem; border-left-color: var(--_theme---border); font-family: var(--_text-style---font-family--font-family\); font-size: var(--_text-size---font-size); line-height: var(--_text-size---line-height); letter-spacing: var(--_text-size---letter-spacing); --_text-size---font-size: var(--_typography---font-size--text-md); --_text-size---line-height: var(--_typography---line-height--1-5); --_text-size---letter-spacing: var(--_typography---letter-spacing--0em); --_text-size---font-family\: var(--_typography---font-family--primary-family); --_text-size---font-weight\: var(--_typography---font-weight--regular);} .u-rich-text p{margin-top: var(--_spacing---space--4); margin-bottom: var(--_spacing---space--4);} .u-rich-text ul{margin-top: var(--_spacing---space--4); margin-bottom: var(--_spacing---space--4); padding-left: 1.75ch; list-style-type: disc;} .u-rich-text ol{margin-top: var(--_spacing---space--4); margin-bottom: var(--_spacing---space--4); padding-left: 2.5ch; list-style-type: decimal;} .u-rich-text figure{margin-top: var(--_spacing---space--7); margin-bottom: var(--_spacing---space--7);} .u-rich-text img{border-radius: var(--radius--sm);} .u-theme-dark{background-color: var(--_theme---background); color: var(--_theme---text); --_theme---background: var(--_color-shades---neutral--neutral-950); --_theme---text: var(--_color-shades---neutral--neutral-50); --_theme---border: var(--_color-shades---neutral--neutral-800); --_theme---primary: var(--_color-shades---orange--orange-500); --_theme---faded: var(--_color-shades---neutral--neutral-900); --_theme---faded-text: var(--_color-shades---neutral--neutral-300); --_theme---primary-faded: var(--_color-shades---orange--orange-400); --_theme---primary-text: var(--_color-shades---neutral--neutral-50); --_theme---accent: var(--_color-shades---orange--orange-100); --_theme---accent-faded: var(--_color-shades---orange--orange-50); --_theme---accent-text: var(--_color-shades---orange--orange-500); --_theme---input: var(--_color-shades---neutral--neutral-700); --_theme---ring: var(--_color-shades---neutral--neutral-500); --_theme---destructive: var(--_color-shades---red--red-400); --_theme---desctructive-text: white; --_theme---success: var(--_color-shades---green--green-400); --_theme---success-text: white; --_theme---selection--background: var(--_color-shades---blue--blue-400); --_theme---selection--text: var(--_color-shades---blue--blue-50);} .u-theme-light{background-color: var(--_theme---background); color: var(--_theme---text); --_theme---background: var(--_color-shades---neutral--neutral-50); --_theme---text: var(--_color-shades---neutral--neutral-950); --_theme---border: var(--_color-shades---neutral--neutral-300); --_theme---primary: var(--_color-shades---blue--blue-800); --_theme---faded: var(--_color-shades---neutral--neutral-100); --_theme---faded-text: var(--_color-shades---neutral--neutral-800); --_theme---primary-faded: var(--_color-shades---blue--blue-600); --_theme---primary-text: var(--_color-shades---neutral--neutral-50); --_theme---accent: var(--_color-shades---blue--blue-100); --_theme---accent-faded: var(--_color-shades---blue--blue-50); --_theme---accent-text: var(--_color-shades---blue--blue-700); --_theme---input: var(--_color-shades---neutral--neutral-300); --_theme---ring: var(--_color-shades---neutral--neutral-400); --_theme---destructive: var(--_color-shades---red--red-600); --_theme---desctructive-text: white; --_theme---success: var(--_color-shades---green--green-700); --_theme---success-text: white; --_theme---selection--background: var(--_color-shades---blue--blue-400); --_theme---selection--text: var(--_color-shades---blue--blue-50);} .u-text-color-brand{color: var(--_theme---primary);} .u-btn-group{grid-column-gap: var(--_spacing---space--2); grid-row-gap: var(--_spacing---space--2); flex-flow: wrap; display: flex;} .u-display-inline-flex{display: inline-flex;} .u-display-inline-grid{grid-column-gap: 16px; grid-row-gap: 16px; grid-template-rows: auto auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; display: inline-grid;} .u-display-inline-block{display: inline-block;} .u-display-inline{display: inline;} .u-sr-only{white-space: nowrap; clip: rect(0, 0, 0, 0); border-width: 0; width: 1px; height: 1px; margin-left: auto; margin-right: auto; padding: 0; position: absolute; inset: 0% 0% auto; overflow: hidden;} .u-h-full{height: 100%;} .u-w-full{width: 100%;} .u-pointer-none{pointer-events: none;} .u-pointer-auto{pointer-events: auto;} .u-min-h-screen{min-height: 100svh;} .u-max-w-none{max-width: none;} .u-cover{width: 100%; height: 100%;} .u-cover-absolute{width: 100%; height: 100%; position: absolute; inset: 0%;} .u-visual-wrap{aspect-ratio: 1; width: 100%; position: relative; overflow: hidden;} .u-ratio-2-1{aspect-ratio: 2;} .u-ratio-16-9{aspect-ratio: 16 / 9;} .u-ratio-3-2{aspect-ratio: 3 / 2;} .u-ratio-1-1{aspect-ratio: 1;} .u-ratio-2-3{aspect-ratio: 2 / 3;} .u-line-divider{width: 100%; height: var(--border-width--base); background-color: var(--_theme---border);} .u-mt-auto{margin-top: auto;} .u-mt-gutter{margin-top: var(--site--gutter);} .u-mt-0{margin-top: 0;} .u-mt-1{margin-top: var(--_spacing---space--1);} .u-mt-2{margin-top: var(--_spacing---space--2);} .u-mt-3{margin-top: var(--_spacing---space--3);} .u-mt-4{margin-top: var(--_spacing---space--4);} .u-mt-5{margin-top: var(--_spacing---space--5);} .u-mt-6{margin-top: var(--_spacing---space--6);} .u-mt-7{margin-top: var(--_spacing---space--7);} .u-mt-8{margin-top: var(--_spacing---space--8);} .u-mb-auto{margin-bottom: auto;} .u-mb-gutter{margin-bottom: var(--site--gutter);} .u-mb-0{margin-bottom: 0;} .u-mb-1{margin-bottom: var(--_spacing---space--1);} .u-mb-2{margin-bottom: var(--_spacing---space--2);} .u-mb-3{margin-bottom: var(--_spacing---space--3);} .u-mb-4{margin-bottom: var(--_spacing---space--4);} .u-mb-5{margin-bottom: var(--_spacing---space--5);} .u-mb-6{margin-bottom: var(--_spacing---space--6);} .u-mb-7{margin-bottom: var(--_spacing---space--7);} .u-mb-8{margin-bottom: var(--_spacing---space--8);} .u-p-sitemargin{padding: var(--site--margin);} .u-p-gutter{padding: var(--site--gutter);} .u-py-sitemargin{padding-top: var(--site--margin); padding-bottom: var(--site--margin);} .u-py-gutter{padding-top: var(--site--gutter); padding-bottom: var(--site--gutter);} .u-py-0{padding-top: 0; padding-bottom: 0;} .u-py-1{padding-top: var(--_spacing---space--1); padding-bottom: var(--_spacing---space--1);} .u-py-2{padding-top: var(--_spacing---space--2); padding-bottom: var(--_spacing---space--2);} .u-py-3{padding-top: var(--_spacing---space--3); padding-bottom: var(--_spacing---space--3);} .u-py-4{padding-top: var(--_spacing---space--4); padding-bottom: var(--_spacing---space--4);} .u-py-5{padding-top: var(--_spacing---space--5); padding-bottom: var(--_spacing---space--5);} .u-py-6{padding-top: var(--_spacing---space--6); padding-bottom: var(--_spacing---space--6);} .u-py-7{padding-top: var(--_spacing---space--7); padding-bottom: var(--_spacing---space--7);} .u-py-8{padding-top: var(--_spacing---space--8); padding-bottom: var(--_spacing---space--8);} .u-py-sm{padding-top: var(--_spacing---section-space--sm); padding-bottom: var(--_spacing---section-space--sm);} .u-py-main{padding-top: var(--_spacing---section-space--main); padding-bottom: var(--_spacing---section-space--main);} .u-py-lg{padding-top: var(--_spacing---section-space--lg); padding-bottom: var(--_spacing---section-space--lg);} .u-px-sitemargin{padding-right: var(--site--margin); padding-left: var(--site--margin);} .u-px-gutter{padding-right: var(--site--gutter); padding-left: var(--site--gutter);} .u-px-0{padding-right: var(--size--0rem\); padding-left: var(--size--0rem\);} .u-px-1{padding-right: var(--_spacing---space--1); padding-left: var(--_spacing---space--1);} .u-px-2{padding-right: var(--_spacing---space--2); padding-left: var(--_spacing---space--2);} .u-px-3{padding-right: var(--_spacing---space--3); padding-left: var(--_spacing---space--3);} .u-px-4{padding-right: var(--_spacing---space--4); padding-left: var(--_spacing---space--4);} .u-px-5{padding-right: var(--_spacing---space--5); padding-left: var(--_spacing---space--5);} .u-px-6{padding-right: var(--_spacing---space--6); padding-left: var(--_spacing---space--6);} .u-px-7{padding-right: var(--_spacing---space--7); padding-left: var(--_spacing---space--7);} .u-px-8{padding-right: var(--_spacing---space--8); padding-left: var(--_spacing---space--8);} .u-pt-sm{padding-top: var(--_spacing---section-space--sm);} .u-pt-main{padding-top: var(--_spacing---section-space--main);} .u-pt-lg{padding-top: var(--_spacing---section-space--lg);} .u-pt-8{padding-top: var(--_spacing---space--8);} .u-pt-sitemargin{padding-top: var(--site--margin);} .u-pt-gutter{padding-top: var(--site--gutter);} .u-pt-0{padding-top: var(--size--0rem\);} .u-pt-1{padding-top: var(--_spacing---space--1);} .u-pt-2{padding-top: var(--_spacing---space--2);} .u-pt-3{padding-top: var(--_spacing---space--3);} .u-pt-4{padding-top: var(--_spacing---space--4);} .u-pt-5{padding-top: var(--_spacing---space--5);} .u-pt-6{padding-top: var(--_spacing---space--6);} .u-pt-7{padding-top: var(--_spacing---space--7);} .u-p-sm{padding: var(--_spacing---section-space--sm);} .u-p-main{padding: var(--_spacing---section-space--main);} .u-p-lg{padding: var(--_spacing---section-space--lg);} .u-pb-sitemargin{padding-bottom: var(--site--margin);} .u-pb-gutter{padding-bottom: var(--site--gutter);} .u-pb-0{padding-bottom: 0;} .u-pb-1{padding-bottom: var(--_spacing---space--1);} .u-pb-2{padding-bottom: var(--_spacing---space--2);} .u-pb-3{padding-bottom: var(--_spacing---space--3);} .u-pb-4{padding-bottom: var(--_spacing---space--4);} .u-pb-5{padding-bottom: var(--_spacing---space--5);} .u-pb-6{padding-bottom: var(--_spacing---space--6);} .u-pb-7{padding-bottom: var(--_spacing---space--7);} .u-pb-8{padding-bottom: var(--_spacing---space--8);} .u-pb-sm{padding-bottom: var(--_spacing---section-space--sm);} .u-pb-main{padding-bottom: var(--_spacing---section-space--main);} .u-pb-lg{padding-bottom: var(--_spacing---section-space--lg);} .u-pl-sitemargin{padding-left: var(--site--margin);} .u-pl-gutter{padding-left: var(--site--gutter);} .u-pl-0{padding-left: var(--size--0rem\);} .u-pl-1{padding-left: var(--_spacing---space--1);} .u-pl-2{padding-left: var(--_spacing---space--2);} .u-pl-3{padding-left: var(--_spacing---space--3);} .u-pl-4{padding-left: var(--_spacing---space--4);} .u-pl-5{padding-left: var(--_spacing---space--5);} .u-pl-6{padding-left: var(--_spacing---space--6);} .u-pl-7{padding-left: var(--_spacing---space--7);} .u-pl-8{padding-left: var(--_spacing---space--8);} .u-pl-sm{padding-left: var(--_spacing---section-space--sm);} .u-pl-main{padding-left: var(--_spacing---section-space--main);} .u-pl-lg{padding-left: var(--_spacing---section-space--lg);} .u-pr-sitemargin{padding-right: var(--site--margin);} .u-pr-gutter{padding-right: var(--site--gutter);} .u-pr-0{padding-right: var(--size--0rem\);} .u-pr-1{padding-right: var(--_spacing---space--1);} .u-pr-2{padding-right: var(--_spacing---space--2);} .u-pr-3{padding-right: var(--_spacing---space--3);} .u-pr-4{padding-right: var(--_spacing---space--4);} .u-pr-5{padding-right: var(--_spacing---space--5);} .u-pr-6{padding-right: var(--_spacing---space--6);} .u-pr-7{padding-right: var(--_spacing---space--7);} .u-pr-8{padding-right: var(--_spacing---space--8);} .u-pr-sm{padding-right: var(--_spacing---section-space--sm);} .u-pr-main{padding-right: var(--_spacing---section-space--main);} .u-pr-lg{padding-right: var(--_spacing---section-space--lg);} .u-ml-auto{margin-left: auto;} .u-ml-gutter{margin-left: var(--site--gutter);} .u-ml-0{margin-left: 0;} .u-ml-1{margin-left: var(--_spacing---space--1);} .u-ml-2{margin-left: var(--_spacing---space--2);} .u-ml-3{margin-left: var(--_spacing---space--3);} .u-ml-4{margin-left: var(--_spacing---space--4);} .u-ml-5{margin-left: var(--_spacing---space--5);} .u-ml-6{margin-left: var(--_spacing---space--6);} .u-ml-7{margin-left: var(--_spacing---space--7);} .u-ml-8{margin-left: var(--_spacing---space--8);} .u-mr-auto{margin-right: auto;} .u-mr-gutter{margin-right: var(--site--gutter);} .u-mr-0{margin-right: 0;} .u-mr-1{margin-right: var(--_spacing---space--1);} .u-mr-2{margin-right: var(--_spacing---space--2);} .u-mr-3{margin-right: var(--_spacing---space--3);} .u-mr-4{margin-right: var(--_spacing---space--4);} .u-mr-5{margin-right: var(--_spacing---space--5);} .u-mr-6{margin-right: var(--_spacing---space--6);} .u-mr-7{margin-right: var(--_spacing---space--7);} .u-mr-8{margin-right: var(--_spacing---space--8);} .u-display-vflex{--_justify-content---value: start; --_align-items---value: start; flex-flow: column; display: flex;} .u-display-hflex-wrap{flex-flow: wrap; align-items: flex-start; display: flex;} .u-radius-lg{border-radius: var(--radius--lg);} .u-radius-2xl{border-radius: var(--radius--2xl);} .u-font-semibold{font-weight: var(--_typography---font-weight--semibold);} .u-display-hflex{display: flex;} .u-display-vflex-wrap{flex-flow: column wrap; align-items: flex-start; display: flex;} .u-text-xs{font-family: var(--_text-style---font-family); font-size: var(--_text-size---font-size); line-height: var(--_text-size---line-height); --_text-size---font-size: var(--_typography---font-size--text-xs); --_text-size---line-height: var(--_typography---line-height--1-5); --_text-size---letter-spacing: var(--_typography---letter-spacing--0em); --_text-size---font-family\: var(--_typography---font-family--primary-family); --_text-size---font-weight\: var(--_typography---font-weight--regular); font-style: var(--_text-style---font-style);} .u-font-normal{font-style: normal;} .u-text-transform-lowercase{text-transform: lowercase;} .u-theme-cnud{--_theme---background: #131a3a; --_theme---text: #fff; --_theme---border: var(--_color-shades---neutral--neutral-300); --_theme---primary: var(--_color-shades---blue--blue-800); --_theme---faded: var(--_color-shades---neutral--neutral-100); --_theme---faded-text: #92a0b4; --_theme---primary-faded: var(--_color-shades---blue--blue-600); --_theme---primary-text: var(--_color-shades---neutral--neutral-50); --_theme---accent: #c60f08; --_theme---accent-faded: var(--_color-shades---blue--blue-50); --_theme---accent-text: var(--_color-shades---blue--blue-700); --_theme---input: var(--_color-shades---neutral--neutral-300); --_theme---ring: var(--_color-shades---neutral--neutral-400); --_theme---destructive: var(--_color-shades---red--red-600); --_theme---desctructive-text: white; --_theme---success: var(--_color-shades---green--green-700); --_theme---success-text: white; --_theme---selection--background: var(--_color-shades---blue--blue-400); --_theme---selection--text: var(--_color-shades---blue--blue-50); --_typography---font-size--text-5xl: clamp(2.25 * 1rem, ((2.25 - ((7.25 - 2.25) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((7.25 - 2.25) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 7.25 * 1rem); --_typography---line-height--1: 1; --_typography---letter-spacing--0-03em: -.03em; --_typography---font-size--text-4xl: clamp(2 * 1rem, ((2 - ((5.5 - 2) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((5.5 - 2) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 5.5 * 1rem); --_typography---line-height--1-1: 1.1; --_typography---font-size--text-3xl: clamp(1.8125 * 1rem, ((1.8125 - ((4.125 - 1.8125) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((4.125 - 1.8125) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 4.125 * 1rem); --_typography---line-height--1-3: 1.3; --_typography---font-size--text-2xl: clamp(1.625 * 1rem, ((1.625 - ((3.125 - 1.625) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((3.125 - 1.625) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 3.125 * 1rem); --_typography---font-size--text-xl: clamp(1.4375 * 1rem, ((1.4375 - ((2.375 - 1.4375) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((2.375 - 1.4375) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 2.375 * 1rem); --_typography---font-size--text-md: clamp(1.125 * 1rem, ((1.125 - ((1.375 - 1.125) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((1.375 - 1.125) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 1.375 * 1rem); --_typography---line-height--1-5: 1.5; --_typography---font-size--text-base: clamp(1 * 1rem, ((1 - ((1 - 1) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((1 - 1) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 1 * 1rem); --_typography---font-weight--light: 300; --_typography---font-weight--regular: 400; --_typography---font-weight--medium: 500; --_typography---font-weight--bold: 700; --_typography---font-family--primary-family: "Work Sans", sans-serif; --_typography---font-weight--semibold: 600; --_typography---font-family--secondary-family: "Syne", sans-serif; --_typography---letter-spacing--0em: 0em; --_typography---font-size--text-xs: clamp(.75 * 1rem, ((.75 - ((.75 - .75) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((.75 - .75) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), .75 * 1rem); --_typography---font-size--text-sm: clamp(.875 * 1rem, ((.875 - ((.875 - .875) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((.875 - .875) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), .875 * 1rem); --_typography---font-size--text-lg: clamp(1.25 * 1rem, ((1.25 - ((1.75 - 1.25) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((1.75 - 1.25) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 1.75 * 1rem); --_typography---font-size--text-6xl: clamp(2.5 * 1rem, ((2.5 - ((10 - 2.5) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((10 - 2.5) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 10 * 1rem);} .page_wrap-2{grid-column-gap: 0px; grid-row-gap: 0px; background-color: #ebf5e7; grid-template-rows: 22918.2px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); align-items: start; width: 1920px; height: auto; padding: 0; display: grid; position: relative; overflow: hidden;} .page_main-2{grid-column-gap: 0px; grid-row-gap: 0px; flex-flow: column; flex-shrink: 0; grid-area: 1 / 1 / span 1 / span 10; justify-content: flex-start; align-self: start; align-items: flex-start; width: 1920px; height: 22918.2px; padding: 0; display: flex; position: relative; overflow: hidden;} .page_wrap-3{flex-flow: column; justify-content: flex-start; align-items: stretch; min-height: 100svh; display: flex; position: relative; overflow: clip;} .page_wrap-3.is-home{background-color: #ebf5e7; grid-template-rows: 22918.2px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); align-items: start; width: 1920px; height: auto; display: grid; overflow: hidden;} .page_main-3{flex-flow: column; flex: 1; justify-content: flex-start; align-items: stretch; display: flex; position: relative;} .page_main-3.is-home{flex-shrink: 0; grid-area: 1 / 1 / span 1 / span 10; align-self: start; align-items: flex-start; width: 1920px; height: 22918.2px; overflow: hidden;} @media screen and (max-width: 991px){.u-display-grid-desktop{flex-flow: column; display: flex;}.u-order-first-desktop{order: 0;}.u-order-first-tablet{order: -1;}.u-order-last-desktop{order: 0;}.u-order-last-tablet{order: 9999;}.u-display-none-tablet{display: none;}.u-display-block-tablet{display: block;}} @media screen and (max-width: 767px){.u-display-grid-tablet{flex-flow: column; display: flex;}.u-order-first-tablet{order: 0;}.u-order-first-landscape{order: -1;}.u-order-last-tablet{order: 0;}.u-order-last-landscape{order: 9999;}.u-display-none-landscape{display: none;}.u-display-block-landscape{display: block;}} @media screen and (max-width: 479px){.u-display-grid-landscape{flex-flow: column; display: flex;}} :root{--breakout-start: [full-start] minmax(0, 1fr) [content-start]; --breakout-end: [content-end] minmax(0, 1fr) [full-end]; --grid-breakout-single: var(--breakout-start) minmax(0, var(--container--main)) var(--breakout-end); --grid-breakout: var(--breakout-start) repeat(var(--site--column-count), minmax(0, var(--column-width--1))) var(--breakout-end);} *{vertical-align: bottom;} button{background-color: unset; padding: unset; text-align: inherit;} button:not(:disabled){cursor: pointer;} video{width: 100%; object-fit: cover;} svg{max-width: 100%;} section, header, footer{position: relative;} img::selection{background: transparent;} body{text-transform: var(--_text-style---text-transform); font-smoothing: antialiased; -webkit-font-smoothing: antialiased;} a:not([class]){text-decoration: underline; color: inherit;} h1, h2, h3, h4, h5, h6, p, blockquote, label{font-family: inherit; font-weight: inherit; text-transform: inherit; text-wrap: inherit; margin-top: 0; margin-bottom: 0;} select:has(option[value='']:checked){color: color-mix(in lab, currentcolor 60%, transparent);} ::selection{background-color: var(--_theme---selection--background); color: var(--_theme---selection--text);} .u-no-scrollbar{-ms-overflow-style: none; overflow: -moz-scrollbars-none;} .u-no-scrollbar::-webkit-scrollbar{display: none;} .u-line-clamp-1, .u-line-clamp-2, .u-line-clamp-3, .u-line-clamp-4{-webkit-line-clamp: 1; -webkit-box-orient: vertical;} .u-line-clamp-2{-webkit-line-clamp: 2;} .u-line-clamp-3{-webkit-line-clamp: 3;} .u-line-clamp-4{-webkit-line-clamp: 4;} .u-display-grid, .u-display-grid-desktop, .u-display-grid-landscape, .u-display-grid-tablet{grid-template-columns: repeat(var(--_column-count---value), 1fr);} .u-display-vflex, .u-display-vflex-wrap, .u-display-hflex, .u-display-hflex-wrap{justify-content: var(--_justify-content---value); align-items: var(--_align-items---value);} .u-padding-left{padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important;} .u-padding-right{padding-left: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important;} .u-padding-top{padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important;} .u-padding-bottom{padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important;} .u-padding-horizontal{padding-top: 0 !important; padding-bottom: 0 !important;} .u-padding-vertical{padding-left: 0 !important; padding-right: 0 !important;} .u-margin-left{margin-right: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important;} .u-margin-right{margin-left: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important;} .u-margin-top{margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important;} .u-margin-bottom{margin-left: 0 !important; margin-right: 0 !important; margin-top: 0 !important;} .u-margin-horizontal{margin-top: 0 !important; margin-bottom: 0 !important;} .u-margin-vertical{margin-left: 0 !important; margin-right: 0 !important;} .u-alpha-none{visibility: hidden; opacity: 0;} :root{--size--0-125rem: 0.125rem; --size--0-25rem: 0.25rem; --size--0-375rem: 0.375rem; --size--0-5rem: 0.5rem; --size--0-625rem: 0.625rem; --size--0-75rem: 0.75rem; --size--0-875rem: 0.875rem; --size--1rem: 1rem; --size--1-125rem: 1.125rem; --size--1-25rem: 1.25rem; --size--1-375rem: 1.375rem; --size--1-5rem: 1.5rem; --size--1-75rem: 1.75rem; --size--2rem: 2rem; --size--2-25rem: 2.25rem; --size--2-5rem: 2.5rem; --size--2-75rem: 2.75rem; --size--3rem: 3rem; --size--3-5rem: 3.5rem; --size--4rem: 4rem; --size--4-5rem: 4.5rem; --size--5rem: 5rem; --size--5-5rem: 5.5rem; --size--6rem: 6rem; --size--6-5rem: 6.5rem; --size--7rem: 7rem; --size--7-5rem: 7.5rem; --size--8rem: 8rem; --size--8-5rem: 8.5rem; --size--9rem: 9rem; --size--9-5rem: 9.5rem; --size--10rem: 10rem; --size--11rem: 11rem; --size--12rem: 12rem; --size--13rem: 13rem; --size--14rem: 14rem; --size--15rem: 15rem; --size--16rem: 16rem; --size--17rem: 17rem; --size--18rem: 18rem;} @media screen and (max-width: 767px){:root{--size--0-125rem: 0.125rem; --size--0-25rem: 0.24rem; --size--0-375rem: 0.37rem; --size--0-5rem: 0.49rem; --size--0-625rem: 0.61rem; --size--0-75rem: 0.73rem; --size--0-875rem: 0.85rem; --size--1rem: 0.97rem; --size--1-125rem: 1.09rem; --size--1-25rem: 1.21rem; --size--1-375rem: 1.32rem; --size--1-5rem: 1.44rem; --size--1-75rem: 1.67rem; --size--2rem: 1.89rem; --size--2-25rem: 2.11rem; --size--2-5rem: 2.33rem; --size--2-75rem: 2.54rem; --size--3rem: 2.75rem; --size--3-5rem: 3.17rem; --size--4rem: 3.56rem; --size--4-5rem: 3.94rem; --size--5rem: 4.31rem; --size--5-5rem: 4.67rem; --size--6rem: 5.01rem; --size--6-5rem: 5.34rem; --size--7rem: 5.65rem; --size--7-5rem: 5.95rem; --size--8rem: 6.23rem; --size--8-5rem: 6.5rem; --size--9rem: 6.76rem; --size--9-5rem: 7rem; --size--10rem: 7.23rem; --size--11rem: 7.65rem; --size--12rem: 8.01rem; --size--13rem: 8.31rem; --size--14rem: 8.56rem; --size--15rem: 8.75rem; --size--16rem: 8.89rem; --size--17rem: 8.97rem; --size--18rem: 9rem;}} @supports (font-size: clamp(1rem, 0.5rem + 3vw, 3rem)){:root{--size--0-125rem: clamp(0.125rem, 0.125rem + 0vw, 0.125rem); --size--0-25rem: clamp(0.24rem, 0.238rem + 0.01vw, 0.25rem); --size--0-375rem: clamp(0.37rem, 0.368rem + 0.01vw, 0.375rem); --size--0-5rem: clamp(0.49rem, 0.488rem + 0.01vw, 0.5rem); --size--0-625rem: clamp(0.61rem, 0.606rem + 0.02vw, 0.625rem); --size--0-75rem: clamp(0.73rem, 0.726rem + 0.02vw, 0.75rem); --size--0-875rem: clamp(0.85rem, 0.844rem + 0.03vw, 0.875rem); --size--1rem: clamp(0.97rem, 0.964rem + 0.03vw, 1rem); --size--1-125rem: clamp(1.09rem, 1.084rem + 0.03vw, 1.125rem); --size--1-25rem: clamp(1.21rem, 1.202rem + 0.04vw, 1.25rem); --size--1-375rem: clamp(1.32rem, 1.31rem + 0.05vw, 1.375rem); --size--1-5rem: clamp(1.44rem, 1.428rem + 0.06vw, 1.5rem); --size--1-75rem: clamp(1.67rem, 1.654rem + 0.08vw, 1.75rem); --size--2rem: clamp(1.89rem, 1.868rem + 0.11vw, 2rem); --size--2-25rem: clamp(2.11rem, 2.082rem + 0.14vw, 2.25rem); --size--2-5rem: clamp(2.33rem, 2.296rem + 0.17vw, 2.5rem); --size--2-75rem: clamp(2.54rem, 2.498rem + 0.21vw, 2.75rem); --size--3rem: clamp(2.75rem, 2.7rem + 0.25vw, 3rem); --size--3-5rem: clamp(3.17rem, 3.104rem + 0.33vw, 3.5rem); --size--4rem: clamp(3.56rem, 3.472rem + 0.44vw, 4rem); --size--4-5rem: clamp(3.94rem, 3.828rem + 0.56vw, 4.5rem); --size--5rem: clamp(4.31rem, 4.172rem + 0.69vw, 5rem); --size--5-5rem: clamp(4.67rem, 4.504rem + 0.83vw, 5.5rem); --size--6rem: clamp(5.01rem, 4.812rem + 0.99vw, 6rem); --size--6-5rem: clamp(5.34rem, 5.108rem + 1.16vw, 6.5rem); --size--7rem: clamp(5.65rem, 5.38rem + 1.35vw, 7rem); --size--7-5rem: clamp(5.95rem, 5.64rem + 1.55vw, 7.5rem); --size--8rem: clamp(6.23rem, 5.876rem + 1.77vw, 8rem); --size--8-5rem: clamp(6.5rem, 6.1rem + 2vw, 8.5rem); --size--9rem: clamp(6.76rem, 6.312rem + 2.24vw, 9rem); --size--9-5rem: clamp(7rem, 6.5rem + 2.5vw, 9.5rem); --size--10rem: clamp(7.23rem, 6.676rem + 2.77vw, 10rem); --size--11rem: clamp(7.65rem, 6.98rem + 3.35vw, 11rem); --size--12rem: clamp(8.01rem, 7.212rem + 3.99vw, 12rem); --size--13rem: clamp(8.31rem, 7.372rem + 4.69vw, 13rem); --size--14rem: clamp(8.56rem, 7.472rem + 5.44vw, 14rem); --size--15rem: clamp(8.75rem, 7.5rem + 6.25vw, 15rem); --size--16rem: clamp(8.89rem, 7.468rem + 7.11vw, 16rem); --size--17rem: clamp(8.97rem, 7.364rem + 8.03vw, 17rem); --size--18rem: clamp(9rem, 7.2rem + 9vw, 18rem);}} :root { --site--viewport-max: 120; --site--viewport-min: 20; --site--column-count: 12; --site--margin: clamp(1 * 1rem, ((1 - ((2.5 - 1) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((2.5 - 1) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 2.5 * 1rem); --site--gutter: clamp(1 * 1rem, ((1 - ((2 - 1) / (90 - 20) * 20)) * 1rem + ((2 - 1) / (90 - 20)) * 100vw), 2 * 1rem); --site--column-width: calc((min(var(--container--main), 100vw - var(--site--margin) * 2) - (var(--site--gutter) * (var(--site--column-count) - 1))) / var(--site--column-count)); --container--sm: calc(var(--column-width--plus-gutter) * (var(--site--column-count) - 2) - var(--site--gutter)); --container--main: calc(var(--site--viewport-max) * 1rem); --container--full: 100%; --radius--sm: 0.25rem; --radius--md: 0.5rem; --radius--lg: 1rem; --radius--xl: 2rem; --radius--2xl: 4rem; --radius--round: calc(infinity * 1px); --border-width--base: 0.094rem; --focus--width: 0.125rem; --focus--offset-inner: -0.125rem; --focus--offset-outer: 0.1875rem; --column-width--plus-gutter: calc(var(--column-width--1) + var(--site--gutter)); --column-width--1: var(--site--column-width); --column-width--2: calc(var(--column-width--plus-gutter) * 2 - var(--site--gutter)); --column-width--3: calc(var(--column-width--plus-gutter) * 3 - var(--site--gutter)); --column-width--4: calc(var(--column-width--plus-gutter) * 4 - var(--site--gutter)); --column-width--5: calc(var(--column-width--plus-gutter) * 5 - var(--site--gutter)); --column-width--6: calc(var(--column-width--plus-gutter) * 6 - var(--site--gutter)); --column-width--7: calc(var(--column-width--plus-gutter) * 7 - var(--site--gutter)); --column-width--8: calc(var(--column-width--plus-gutter) * 8 - var(--site--gutter)); --column-width--9: calc(var(--column-width--plus-gutter) * 9 - var(--site--gutter)); --column-width--10: calc(var(--column-width--plus-gutter) * 10 - var(--site--gutter)); --column-width--11: calc(var(--column-width--plus-gutter) * 11 - var(--site--gutter)); --column-width--12: calc(var(--column-width--plus-gutter) * 12 - var(--site--gutter)); --column-margin--0: 0px; --column-margin--1: calc(var(--column-width--plus-gutter) * 1); --column-margin--2: calc(var(--column-width--plus-gutter) * 2); --column-margin--3: calc(var(--column-width--plus-gutter) * 3); --column-margin--4: calc(var(--column-width--plus-gutter) * 4); --column-margin--5: calc(var(--column-width--plus-gutter) * 5); --column-margin--6: calc(var(--column-width--plus-gutter) * 6); --column-margin--7: calc(var(--column-width--plus-gutter) * 7); --column-margin--8: calc(var(--column-width--plus-gutter) * 8); --column-margin--9: calc(var(--column-width--plus-gutter) * 9); --column-margin--10: calc(var(--column-width--plus-gutter) * 10); --column-margin--11: calc(var(--column-width--plus-gutter) * 11); --column-margin--12: calc(var(--column-width--plus-gutter) * 12); --_theme---background: #f0f0e6; --_theme---text: #030202; --_theme---border: var(--_color-shades---neutral--neutral-300); --_theme---faded: var(--_color-shades---neutral--neutral-100); --_theme---faded-text: var(--_color-shades---neutral--neutral-800); --_theme---primary: var(--_color-shades---blue--blue-800); --_theme---primary-faded: var(--_color-shades---blue--blue-600); --_theme---primary-text: var(--_color-shades---neutral--neutral-50); --_theme---accent: var(--_color-shades---blue--blue-100); --_theme---accent-faded: var(--_color-shades---blue--blue-50); --_theme---accent-text: var(--_color-shades---blue--blue-700); --_theme---input: var(--_color-shades---neutral--neutral-300); --_theme---ring: var(--_color-shades---neutral--neutral-400); --_theme---destructive: var(--_color-shades---red--red-600); --_theme---desctructive-text: white; --_theme---success: var(--_color-shades---green--green-700); --_theme---success-text: white; --_theme---selection--background: var(--_color-shades---blue--blue-400); --_theme---selection--text: var(--_color-shades---blue--blue-50); --_color-shades---neutral--neutral-50: #fafafa; --_color-shades---neutral--neutral-100: #f5f5f5; --_color-shades---neutral--neutral-100-o5: color-mix(in srgb, var(--_color-shades---neutral--neutral-100) 5%, transparent); --_color-shades---neutral--neutral-100-o10: color-mix(in srgb, var(--_color-shades---neutral--neutral-100) 10%, transparent); --_color-shades---neutral--neutral-100-o20: color-mix(in srgb, var(--_color-shades---neutral--neutral-100) 20%, transparent); --_color-shades---neutral--neutral-200: #e5e5e5; --_color-shades---neutral--neutral-300: #d4d4d4; --_color-shades---neutral--neutral-400: #a3a3a3; --_color-shades---neutral--neutral-500: #737373; --_color-shades---neutral--neutral-600: #525252; --_color-shades---neutral--neutral-700: #404040; --_color-shades---neutral--neutral-800: #262626; --_color-shades---neutral--neutral-900: #171717; --_color-shades---neutral--neutral-900-o5: color-mix(in srgb, var(--_color-shades---neutral--neutral-900) 5%, transparent); --_color-shades---neutral--neutral-900-o10: color-mix(in srgb, var(--_color-shades---neutral--neutral-900) 10%, transparent); --_color-shades---neutral--neutral-900-o20: color-mix(in srgb, var(--_color-shades---neutral--neutral-900) 20%, transparent); --_color-shades---neutral--neutral-950: #0a0a0a; --_color-shades---blue--blue-50: oklch(96.8% 0.016 286.17); --_color-shades---blue--blue-100: oklch(93.2% 0.034 285.76); --_color-shades---blue--blue-200: oklch(85.7% 0.073 284.76); --_color-shades---blue--blue-300: oklch(79.2% 0.109 283.65); --_color-shades---blue--blue-400: oklch(72.6% 0.146 282.14); --_color-shades---blue--blue-500: oklch(65.1% 0.19 279.76); --_color-shades---blue--blue-600: oklch(58.7% 0.228 277.04); --_color-shades---blue--blue-700: oklch(52.5% 0.266 272.65); --_color-shades---blue--blue-800: oklch(46% 0.308 265.3); --_color-shades---blue--blue-900: oklch(30.9% 0.214 264.26); --_color-shades---blue--blue-950: oklch(22.4% 0.155 264.05); --_color-shades---orange--orange-50: oklch(96% 0.02 25.25); --_color-shades---orange--orange-100: oklch(91.8% 0.042 25.26); --_color-shades---orange--orange-200: oklch(83% 0.094 27.28); --_color-shades---orange--orange-300: oklch(74.9% 0.152 30.24); --_color-shades---orange--orange-400: oklch(67.1% 0.221 37.48); --_color-shades---orange--orange-500: oklch(58.1% 0.192 37.47); --_color-shades---orange--orange-600: oklch(49.3% 0.163 37.66); --_color-shades---orange--orange-700: oklch(40.2% 0.133 37.38); --_color-shades---orange--orange-800: oklch(32.2% 0.107 37.24); --_color-shades---orange--orange-900: oklch(23.4% 0.077 37.51); --_color-shades---orange--orange-950: oklch(18.2% 0.061 37.05); --_color-shades---red--red-50: oklch(95.8% 0.021 17.6); --_color-shades---red--red-100: oklch(92.6% 0.038 17.9); --_color-shades---red--red-200: oklch(84.7% 0.084 18.98); --_color-shades---red--red-300: oklch(77.4% 0.133 20.58); --_color-shades---red--red-400: oklch(70.3% 0.188 23.26); --_color-shades---red--red-500: oklch(62.8% 0.258 29.23); --_color-shades---red--red-600: oklch(53.5% 0.219 29.23); --_color-shades---red--red-700: oklch(43.5% 0.179 29.23); --_color-shades---red--red-800: oklch(33.6% 0.138 29.23); --_color-shades---red--red-900: oklch(24.5% 0.101 29.23); --_color-shades---red--red-950: oklch(18.7% 0.077 29.23); --_color-shades---transparent: transparent; --_color-shades---white: white; --_color-shades---black: black; --_color-shades---green--green-50: oklch(98.2% 0.018 155.826); --_color-shades---green--green-100: oklch(96.2% 0.044 156.743); --_color-shades---green--green-200: oklch(92.5% 0.084 155.995); --_color-shades---green--green-300: oklch(87.1% 0.15 154.449); --_color-shades---green--green-400: oklch(79.2% 0.209 151.711); --_color-shades---green--green-500: oklch(72.3% 0.219 149.579); --_color-shades---green--green-600: oklch(62.7% 0.194 149.214); --_color-shades---green--green-700: oklch(52.7% 0.154 150.069); --_color-shades---green--green-800: oklch(44.8% 0.119 151.328); --_color-shades---green--green-900: oklch(39.3% 0.095 152.535); --_color-shades---green--green-950: oklch(26.6% 0.065 152.934); --_button-style---background: var(--_theme---primary); --_button-style---border: var(--_color-shades---transparent); --_button-style---text: var(--_theme---primary-text); --_button-style---background-hover: var(--_theme---primary-faded); --_button-style---border-hover: var(--_color-shades---transparent); --_button-style---text-hover: var(--_theme---primary-text); --_typography---font-family--primary-family: 'General Sans', Arial, sans-serif; --_typography---font-family--secondary-family: 'General Sans', Arial, sans-serif; --_typography---font-weight--light: 300; --_typography---font-weight--regular: 400; --_typography---font-weight--medium: 500; --_typography---font-weight--semibold: 600; --_typography---font-weight--bold: 700; --_typography---letter-spacing--0-03em: -0.03em; --_typography---letter-spacing--0em: 0em; --_typography---line-height--1: 1; --_typography---line-height--1-1: 1.1; --_typography---line-height--1-3: 1.3; --_typography---line-height--1-5: 1.5; --_typography---font-size--text-xs: clamp(0.75 * 1rem, ((0.75 - ((0.75 - 0.75) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((0.75 - 0.75) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 0.75 * 1rem); --_typography---font-size--text-sm: clamp(0.875 * 1rem, ((0.875 - ((0.875 - 0.875) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((0.875 - 0.875) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 0.875 * 1rem); --_typography---font-size--text-base: clamp(1 * 1rem, ((1 - ((1 - 1) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((1 - 1) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 1 * 1rem); --_typography---font-size--text-md: clamp(1.125 * 1rem, ((1.125 - ((1.375 - 1.125) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((1.375 - 1.125) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 1.375 * 1rem); --_typography---font-size--text-lg: clamp(1.25 * 1rem, ((1.25 - ((1.75 - 1.25) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((1.75 - 1.25) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 1.75 * 1rem); --_typography---font-size--text-xl: clamp(1.4375 * 1rem, ((1.4375 - ((2.375 - 1.4375) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((2.375 - 1.4375) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 2.375 * 1rem); --_typography---font-size--text-2xl: clamp(1.625 * 1rem, ((1.625 - ((3.125 - 1.625) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((3.125 - 1.625) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 3.125 * 1rem); --_typography---font-size--text-3xl: clamp(1.8125 * 1rem, ((1.8125 - ((4.125 - 1.8125) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((4.125 - 1.8125) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 4.125 * 1rem); --_typography---font-size--text-4xl: clamp(2 * 1rem, ((2 - ((5.5 - 2) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((5.5 - 2) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 5.5 * 1rem); --_typography---font-size--text-5xl: clamp(2.25 * 1rem, ((2.25 - ((7.25 - 2.25) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((7.25 - 2.25) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 7.25 * 1rem); --_typography---font-size--text-6xl: clamp(2.5 * 1rem, ((2.5 - ((10 - 2.5) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((10 - 2.5) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 10 * 1rem); --_text-size---font-size: var(--_typography---font-size--text-base); --_text-size---line-height: var(--_typography---line-height--1-5); --_text-size---letter-spacing: var(--_typography---letter-spacing--0em); --_text-style---font-family: var(--_typography---font-family--primary-family); --_text-style---weight: var(--_typography---font-weight--regular); --_text-style---font-style: normal; --_spacing---space--1: clamp(0.375 * 1rem, ((0.375 - ((0.5 - 0.375) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((0.5 - 0.375) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 0.5 * 1rem); --_spacing---space--2: clamp(0.625 * 1rem, ((0.625 - ((0.75 - 0.625) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((0.75 - 0.625) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 0.75 * 1rem); --_spacing---space--3: clamp(0.875 * 1rem, ((0.875 - ((1 - 0.875) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((1 - 0.875) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 1 * 1rem); --_spacing---space--4: clamp(1.25 * 1rem, ((1.25 - ((1.5 - 1.25) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((1.5 - 1.25) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 1.5 * 1rem); --_spacing---space--5: clamp(1.75 * 1rem, ((1.75 - ((2 - 1.75) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((2 - 1.75) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 2 * 1rem); --_spacing---space--6: clamp(2 * 1rem, ((2 - ((2.5 - 2) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((2.5 - 2) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 2.5 * 1rem); --_spacing---space--7: clamp(2.25 * 1rem, ((2.25 - ((3 - 2.25) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((3 - 2.25) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 3 * 1rem); --_spacing---space--8: clamp(2.5 * 1rem, ((2.5 - ((4 - 2.5) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((4 - 2.5) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 4 * 1rem); --_spacing---section-space--none: 0rem; --_spacing---section-space--sm: clamp(3 * 1rem, ((3 - ((5 - 3) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((5 - 3) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 5 * 1rem); --_spacing---section-space--main: clamp(4 * 1rem, ((4 - ((7 - 4) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((7 - 4) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 7 * 1rem); --_spacing---section-space--lg: clamp(5.5 * 1rem, ((5.5 - ((10 - 5.5) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((10 - 5.5) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 10 * 1rem); --_spacing---section-space--page-top: clamp(10 * 1rem, ((10 - ((14 - 10) / (90 - 20) * 20)) * 1rem + ((14 - 10) / (90 - 20)) * 100vw), 14 * 1rem); --_column-count---value: 12; --_justify-content---value: start; --_align-items---value: start; --breakout-start: [full-start] minmax(0, 1fr) [content-start]; --breakout-end: [content-end] minmax(0, 1fr) [full-end]; --grid-breakout-single: var(--breakout-start) minmax(0, var(--container--main)) var(--breakout-end); --grid-breakout: var(--breakout-start) repeat(var(--site--column-count), minmax(0, var(--column-width--1))) var(--breakout-end); --size--0-125rem: clamp(0.125rem, 0.125rem + 0vw, 0.125rem); --size--0-25rem: clamp(0.24rem, 0.238rem + 0.01vw, 0.25rem); --size--0-375rem: clamp(0.37rem, 0.368rem + 0.01vw, 0.375rem); --size--0-5rem: clamp(0.49rem, 0.488rem + 0.01vw, 0.5rem); --size--0-625rem: clamp(0.61rem, 0.606rem + 0.02vw, 0.625rem); --size--0-75rem: clamp(0.73rem, 0.726rem + 0.02vw, 0.75rem); --size--0-875rem: clamp(0.85rem, 0.844rem + 0.03vw, 0.875rem); --size--1rem: clamp(0.97rem, 0.964rem + 0.03vw, 1rem); --size--1-125rem: clamp(1.09rem, 1.084rem + 0.03vw, 1.125rem); --size--1-25rem: clamp(1.21rem, 1.202rem + 0.04vw, 1.25rem); --size--1-375rem: clamp(1.32rem, 1.31rem + 0.05vw, 1.375rem); --size--1-5rem: clamp(1.44rem, 1.428rem + 0.06vw, 1.5rem); --size--1-75rem: clamp(1.67rem, 1.654rem + 0.08vw, 1.75rem); --size--2rem: clamp(1.89rem, 1.868rem + 0.11vw, 2rem); --size--2-25rem: clamp(2.11rem, 2.082rem + 0.14vw, 2.25rem); --size--2-5rem: clamp(2.33rem, 2.296rem + 0.17vw, 2.5rem); --size--2-75rem: clamp(2.54rem, 2.498rem + 0.21vw, 2.75rem); --size--3rem: clamp(2.75rem, 2.7rem + 0.25vw, 3rem); --size--3-5rem: clamp(3.17rem, 3.104rem + 0.33vw, 3.5rem); --size--4rem: clamp(3.56rem, 3.472rem + 0.44vw, 4rem); --size--4-5rem: clamp(3.94rem, 3.828rem + 0.56vw, 4.5rem); --size--5rem: clamp(4.31rem, 4.172rem + 0.69vw, 5rem); --size--5-5rem: clamp(4.67rem, 4.504rem + 0.83vw, 5.5rem); --size--6rem: clamp(5.01rem, 4.812rem + 0.99vw, 6rem); --size--6-5rem: clamp(5.34rem, 5.108rem + 1.16vw, 6.5rem); --size--7rem: clamp(5.65rem, 5.38rem + 1.35vw, 7rem); --size--7-5rem: clamp(5.95rem, 5.64rem + 1.55vw, 7.5rem); --size--8rem: clamp(6.23rem, 5.876rem + 1.77vw, 8rem); --size--8-5rem: clamp(6.5rem, 6.1rem + 2vw, 8.5rem); --size--9rem: clamp(6.76rem, 6.312rem + 2.24vw, 9rem); --size--9-5rem: clamp(7rem, 6.5rem + 2.5vw, 9.5rem); --size--10rem: clamp(7.23rem, 6.676rem + 2.77vw, 10rem); --size--11rem: clamp(7.65rem, 6.98rem + 3.35vw, 11rem); --size--12rem: clamp(8.01rem, 7.212rem + 3.99vw, 12rem); --size--13rem: clamp(8.31rem, 7.372rem + 4.69vw, 13rem); --size--14rem: clamp(8.56rem, 7.472rem + 5.44vw, 14rem); --size--15rem: clamp(8.75rem, 7.5rem + 6.25vw, 15rem); --size--16rem: clamp(8.89rem, 7.468rem + 7.11vw, 16rem); --size--17rem: clamp(8.97rem, 7.364rem + 8.03vw, 17rem); --size--18rem: clamp(9rem, 7.2rem + 9vw, 18rem); } /* Site stylesheet */ @font-face { font-family: 'Persian'; src: url(/project-assets/rahman-baba-pashtunistan/persian.woff2) format('woff2'); font-display: swap; } @font-face { font-family: 'Sarabun'; src: url(/project-assets/rahman-baba-pashtunistan/sarabun-200.woff2) format('woff2'); font-display: swap; font-weight: 200; } @font-face { font-family: 'Sarabun'; src: url(/project-assets/rahman-baba-pashtunistan/sarabun-300.woff2) format('woff2'); font-display: swap; font-weight: 300; } @font-face { font-family: 'Sarabun'; src: url(/project-assets/rahman-baba-pashtunistan/sarabun-400.woff2) format('woff2'); font-display: swap; font-weight: 400; } @font-face { font-family: 'Sarabun'; src: url(/project-assets/rahman-baba-pashtunistan/sarabun-600.woff2) format('woff2'); font-display: swap; font-weight: 600; } @font-face { font-family: 'Sarabun'; src: url(/project-assets/rahman-baba-pashtunistan/sarabun-700.woff2) format('woff2'); font-display: swap; font-weight: 700; } @font-face { font-family: 'Amiri Verse'; src: url(/project-assets/rahman-baba-pashtunistan/amiri-700.woff2) format('woff2'); font-display: swap; font-weight: 700; } @font-face { font-family: 'Naskh'; src: url(/project-assets/rahman-baba-pashtunistan/noto-naskh-400.woff2) format('woff2'); font-display: swap; font-weight: 400; } @font-face { font-family: 'Naskh'; src: url(/project-assets/rahman-baba-pashtunistan/noto-naskh-700.woff2) format('woff2'); font-display: swap; font-weight: 600 700; } /* Rahman Baba · Pashtunistan: the section's styles (written by build.mjs from src/style.css). */ .rahman_wrap { --paper: #f0f0e6; --ink: #030202; --red: #c93132; --green: #159748; --blue: #23489a; --gold: #d8ac4a; --persian: 'Persian', serif; --sarabun: 'Sarabun', 'Segoe UI', 'Noto Naskh Arabic', 'Geeza Pro', system-ui, sans-serif; --ease: cubic-bezier(0.16, 1, 0.3, 1); --k: 1; color-scheme: light; } .rahman_wrap * { box-sizing: border-box; } .rahman_wrap, .rahman_wrap { margin: 0; background: var(--paper); color: var(--ink); } .rahman_wrap { overflow-x: clip; } .rahman_wrap { font-family: var(--sarabun); -webkit-font-smoothing: antialiased; } .rahman_wrap h1, .rahman_wrap h2, .rahman_wrap h3, .rahman_wrap p, .rahman_wrap blockquote, .rahman_wrap cite, .rahman_wrap figure, .rahman_wrap ul { margin: 0; font: inherit; } .rahman_wrap ul { padding: 0; list-style: none; } .rahman_wrap small { font-size: 0.4em; font-weight: 600; letter-spacing: 0.02em; } .rahman_wrap button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; } .rahman_wrap a { color: inherit; text-decoration: none; } .rahman_wrap :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } .rahman_wrap .rahman_m { display: none; } @media (max-width: 1099.98px) { .rahman_wrap .rahman_d { display: none; } .rahman_wrap .rahman_m { display: block; } } .rahman_wrap .rahman_sec { position: relative; height: calc(1080px * var(--k)); overflow: hidden; } .rahman_wrap .rahman_stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform: scale(var(--k)); transform-origin: 0 0; background: var(--paper); isolation: isolate; } .rahman_wrap .rahman_el { position: absolute; transform-origin: 0 0; } .rahman_wrap .rahman_img { background-repeat: no-repeat; } .rahman_wrap .rahman_ln { background: #000; } .rahman_wrap .rahman_rect { position: absolute; } .rahman_wrap .rahman_tx_in { margin: 0; } .rahman_wrap .sq { display: contents; } .rahman_wrap .rahman_sq_out, .rahman_wrap .rahman_sq_in { border: 1px solid #000; transition: transform 0.7s var(--ease), background-color 0.5s; } .rahman_wrap .rahman_sq_in.on { background: var(--red); animation: sq-breathe 3.2s ease-in-out infinite; transform-origin: 50% 50%; } .rahman_wrap .rahman_sq_red { border: 1px solid var(--red); transform-origin: 50% 50%; } .rahman_wrap .rahman_sq_green { border: 1px solid var(--green); transform-origin: 50% 50%; } .rahman_wrap .is-on-screen .rahman_sq_red { animation: sq-breathe 3.2s ease-in-out infinite reverse; } .rahman_wrap .is-on-screen .rahman_sq_green { animation: sq-turn 14s linear infinite; } .rahman_wrap .squares .sq:not(.is-on) > * { opacity: 0.25; transition: opacity 0.4s; } .rahman_wrap .squares .sq:hover > * { opacity: 1; } .rahman_wrap .squares .sq:hover .rahman_sq_in { transform: rotate(45deg) scale(0.86); background: var(--ink); } @keyframes sq-breathe { 50% { transform: scale(0.9); } } @keyframes sq-turn { to { transform: rotate(360deg); } } .rahman_wrap .rahman_hero_mohmand canvas, .rahman_wrap .rahman_pw_word canvas { width: 100%; height: 100%; display: block; } .rahman_wrap .rahman_top_nav { display: contents; } .rahman_wrap .rahman_nav_item { cursor: pointer; } .rahman_wrap .rahman_nav_item .rahman_tx_in { display: block; overflow: hidden; height: 1.25em; line-height: 1.25em; } .rahman_wrap .rahman_nav_roll { display: inline-flex; flex-direction: column; transition: transform 0.7s var(--ease); } .rahman_wrap .rahman_nav_roll > span:last-child { color: var(--red); } .rahman_wrap .rahman_nav_item:hover .rahman_nav_roll, .rahman_wrap .rahman_nav_item:focus-visible .rahman_nav_roll { transform: translateY(-50%); } .rahman_wrap .rahman_pw_band .rahman_band_in, .rahman_wrap .rahman_m_pw_band .rahman_band_in { display: inline-flex; align-items: center; gap: 28px; letter-spacing: 0.32em; } .rahman_wrap .rahman_band_in i { width: 120px; height: 18px; background: currentColor; -webkit-mask: var(--chain-svg) center / auto 140% repeat-x; mask: var(--chain-svg) center / auto 140% repeat-x; opacity: 0.6; } .rahman_wrap .rahman_chain { background: linear-gradient(90deg, #000 0 40%, var(--gold) 50%, #000 60% 100%) 0 0 / 300% 100%; animation: glint 7s linear infinite; animation-delay: calc(var(--i) * -0.42s); } @keyframes glint { from { background-position: 100% 0; } to { background-position: -50% 0; } } .rahman_wrap .rahman_ln.rahman_rail { overflow: hidden; } .rahman_wrap .rahman_ln_v.rahman_rail::after { content: ''; position: absolute; left: 0; width: 100%; height: 160px; top: -160px; background: linear-gradient(transparent, var(--red), transparent); animation: run-v 9s linear infinite; } .rahman_wrap .rahman_ln_h.rahman_rail::after { content: ''; position: absolute; top: 0; height: 100%; width: 220px; left: -220px; background: linear-gradient(90deg, transparent, var(--green), transparent); animation: run-h 11s linear infinite; } @keyframes run-v { 60%, 100% { transform: translateY(1400px); } } @keyframes run-h { 60%, 100% { transform: translateX(1900px); } } .rahman_wrap .rail-label { transition: letter-spacing 0.8s var(--ease); } .rahman_wrap .rail-label:hover { letter-spacing: 0.12em; } .rahman_wrap .rahman_svgm { pointer-events: none; } .rahman_wrap .rahman_svgm svg { width: 100%; height: 100%; display: block; overflow: visible; } .rahman_wrap .rahman_svgm.rahman_tree, .rahman_wrap .rahman_svgm.rahman_seal, .rahman_wrap .rahman_svgm.rahman_qalam, .rahman_wrap .rahman_svgm.rahman_map, .rahman_wrap .rahman_svgm.rahman_emblem_circle, .rahman_wrap .rahman_svgm.rahman_fish, .rahman_wrap .rahman_bt .rahman_svgm, .rahman_wrap .rahman_lg_icon { pointer-events: auto; } .rahman_wrap .rahman_svgm [data-role='ink'][fill='currentColor'] { fill: currentColor; } .rahman_wrap .rahman_tree, .rahman_wrap .rahman_m_tree { cursor: pointer; } .rahman_wrap .rahman_map_box { position: absolute; } .rahman_wrap .rahman_map_box .rahman_svgm { position: absolute; inset: 0; } .rahman_wrap .rahman_svgm.rahman_map [data-role='bg'] path { fill: transparent; transition: fill 0.5s var(--ease), transform 0.6s var(--ease); cursor: crosshair; } .rahman_wrap .rahman_svgm.rahman_map [data-role='bg'] path:hover { fill: var(--red); transform: translateY(-6px) scale(1.02); } .rahman_wrap .rahman_svgm.rahman_map [data-role='bg'] path.is-near { fill: rgba(21, 151, 72, 0.22); } .rahman_wrap .rahman_svgm.rahman_map [data-role='ink'] { pointer-events: none; } .rahman_wrap .rahman_map_pin { position: absolute; width: 0; height: 0; pointer-events: none; } .rahman_wrap .rahman_map_pin i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(201, 49, 50, 0.6); animation: pin 2.4s var(--ease) infinite; } .rahman_wrap .rahman_map_pin b { position: absolute; left: 16px; top: -12px; font: 700 18px/24px var(--sarabun); letter-spacing: 0.14em; white-space: nowrap; } @keyframes pin { 0% { box-shadow: 0 0 0 0 rgba(201, 49, 50, 0.55); } 70%, 100% { box-shadow: 0 0 0 34px rgba(201, 49, 50, 0); } } .rahman_wrap .rahman_map_tip { position: absolute; left: 0; top: 0; pointer-events: none; font: 700 14px/1 var(--sarabun); letter-spacing: 0.16em; background: var(--ink); color: var(--paper); padding: 8px 10px; opacity: 0; transform: translate(-50%, -140%); transition: opacity 0.3s; white-space: nowrap; } .rahman_wrap .rahman_map_tip.is-on { opacity: 1; } .rahman_wrap .rahman_bt { display: block; cursor: pointer; } .rahman_wrap .rahman_bt .rahman_bt_box { position: absolute; inset: 0; border: 1px solid #000; background: transparent; transition: background-color 0.6s var(--ease), transform 0.8s var(--ease); } .rahman_wrap .rahman_bt .rahman_bt_label { position: absolute; left: 7px; top: 0; height: 34px; display: flex; align-items: center; font: 700 20px/20px var(--sarabun); transition: color 0.5s; } .rahman_wrap .rahman_bt .rahman_bt_value { position: absolute; right: 7px; bottom: 0; height: 34px; display: flex; align-items: center; font: 200 20px/20px var(--sarabun); transition: color 0.5s; } .rahman_wrap .rahman_bt .rahman_bt_icon { mix-blend-mode: multiply; transition: transform 0.9s var(--ease); } .rahman_wrap .rahman_bt:hover .rahman_bt_box, .rahman_wrap .rahman_bt.is-on .rahman_bt_box { background: var(--ink); transform: scale(1.04); } .rahman_wrap .rahman_bt:hover .rahman_bt_label, .rahman_wrap .rahman_bt:hover .rahman_bt_value, .rahman_wrap .rahman_bt.is-on .rahman_bt_label, .rahman_wrap .rahman_bt.is-on .rahman_bt_value { color: var(--paper); } .rahman_wrap .rahman_bt:hover .rahman_svgm, .rahman_wrap .rahman_bt.is-on .rahman_svgm { color: var(--paper); mix-blend-mode: normal; } .rahman_wrap .rahman_bt:hover .rahman_bt_icon, .rahman_wrap .rahman_bt.is-on .rahman_bt_icon { transform: translateY(-4px) rotate(-6deg); } .rahman_wrap .rahman_bt_roll { display: grid; } .rahman_wrap .rahman_bt_t { grid-area: 1 / 1; transition: transform 0.9s var(--ease), opacity 0.6s; } .rahman_wrap .rahman_bt_t:not(.is-on) { opacity: 0; transform: translateY(40%); } .rahman_wrap .rahman_bt_text { position: relative; display: grid; } .rahman_wrap .rahman_d .rahman_bt_text { font: 300 16px/16px var(--sarabun); text-align: center; } .rahman_wrap .rahman_bt_v { grid-area: 1 / 1; transition: opacity 0.6s, transform 0.9s var(--ease), filter 0.6s; } .rahman_wrap .rahman_bt_v:not(.is-on) { opacity: 0; transform: translateY(14px); filter: blur(3px); } .rahman_wrap .rahman_lg_tab { position: absolute; inset: 0; pointer-events: none; text-align: inherit; } .rahman_wrap .rahman_lg_tab > * { pointer-events: auto; transition: opacity 0.6s var(--ease); } .rahman_wrap .rahman_lg_tab:not(.is-on) > * { opacity: 0.25; } .rahman_wrap .rahman_lg_tab:hover > * { opacity: 0.6; } .rahman_wrap .rahman_lg_tab.is-on > * { opacity: 1; } .rahman_wrap .rahman_lg_num { display: grid; place-items: center; border: 1px solid #000; font: 600 40px var(--sarabun); } .rahman_wrap .rahman_lg_num i { position: absolute; width: 8px; height: 8px; background: #000; transition: transform 0.6s var(--ease); } .rahman_wrap .rahman_lg_num i:nth-child(1) { left: -1px; top: -1px; } .rahman_wrap .rahman_lg_num i:nth-child(2) { right: -1px; top: -1px; } .rahman_wrap .rahman_lg_num i:nth-child(3) { left: -1px; bottom: -1px; } .rahman_wrap .rahman_lg_num i:nth-child(4) { right: -1px; bottom: -1px; } .rahman_wrap .is-on .rahman_lg_num i:nth-child(1) { transform: translate(-4px, -4px); } .rahman_wrap .is-on .rahman_lg_num i:nth-child(2) { transform: translate(4px, -4px); } .rahman_wrap .is-on .rahman_lg_num i:nth-child(3) { transform: translate(-4px, 4px); } .rahman_wrap .is-on .rahman_lg_num i:nth-child(4) { transform: translate(4px, 4px); } .rahman_wrap .rahman_lg_num.rahman_k2 { border-color: #e7a3a4; color: #e7a3a4; } .rahman_wrap .rahman_lg_num.rahman_k2 i { background: #e7a3a4; } .rahman_wrap .rahman_lg_num.rahman_k3 { border-color: #9fd7b3; color: #9fd7b3; } .rahman_wrap .rahman_lg_num.rahman_k3 i { background: #9fd7b3; } .rahman_wrap .is-on .rahman_lg_num.rahman_k2 { border-color: var(--red); color: var(--red); } .rahman_wrap .is-on .rahman_lg_num.rahman_k2 i { background: var(--red); } .rahman_wrap .is-on .rahman_lg_num.rahman_k3 { border-color: var(--green); color: var(--green); } .rahman_wrap .is-on .rahman_lg_num.rahman_k3 i { background: var(--green); } .rahman_wrap .rahman_lg_text { position: relative; display: grid; } .rahman_wrap .rahman_d .rahman_lg_text { font: 300 16px/16px var(--sarabun); } .rahman_wrap .rahman_lg_v { grid-area: 1 / 1; transition: opacity 0.6s, transform 0.9s var(--ease); } .rahman_wrap .rahman_lg_v:not(.is-on) { opacity: 0; transform: translateY(12px); } .rahman_wrap .rahman_living_box { overflow: visible; } .rahman_wrap .rahman_living_box > canvas, .rahman_wrap .rahman_lv_fallback { position: absolute; display: block; } .rahman_wrap .rahman_lv_fallback { background-size: 100% 100%; background-repeat: no-repeat; } .rahman_wrap .rahman_living_box.is-alive .rahman_lv_fallback { visibility: hidden; } .rahman_wrap .rahman_hero_portrait { cursor: pointer; } .rahman_wrap .rahman_book { overflow: hidden; } .rahman_wrap .is-pinned .rahman_stage { background: var(--paper); } .rahman_wrap .rahman_pw_name, .rahman_wrap .rahman_pw_num { overflow: hidden; font-family: var(--persian); color: #010101; } .rahman_wrap .rahman_pw_roll { position: absolute; inset: 0; display: flex; align-items: center; will-change: transform; } .rahman_wrap .rahman_pw_name .rahman_pw_big { font-size: var(--fs, 128px); line-height: 1; } .rahman_wrap .rahman_pw_name .rahman_pw_small { font-size: 22px; font-family: var(--sarabun); font-weight: 600; margin: 52px 0 0 18px; } .rahman_wrap .rahman_pw_num .rahman_pw_roll { justify-content: flex-end; font-size: 200px; line-height: 1; } .rahman_wrap .rahman_pw_card { perspective: 2000px; } .rahman_wrap .rahman_pw_tilt { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.25s linear; } .rahman_wrap .rahman_pw_face { position: absolute; inset: 0; backface-visibility: hidden; transition: transform 1.1s var(--ease); } .rahman_wrap .rahman_pw_front { transform: rotateY(0deg); } .rahman_wrap .rahman_pw_back { transform: rotateY(180deg); background: var(--paper); border: 1px solid #000; outline: 1px solid #000; outline-offset: -14px; } .rahman_wrap .rahman_pw_card.is-flipped .rahman_pw_front { transform: rotateY(-180deg); } .rahman_wrap .rahman_pw_card.is-flipped .rahman_pw_back { transform: rotateY(0deg); } .rahman_wrap .rahman_pw_frame, .rahman_wrap .rahman_pw_art, .rahman_wrap .rahman_pw_morph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .rahman_wrap .rahman_pw_art { opacity: 0; } .rahman_wrap .rahman_pw_art[data-i='0'] { opacity: 1; } .rahman_wrap .rahman_pw_glare, .rahman_wrap .rahman_pc_glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 248, 225, 0.38), transparent 45%); mix-blend-mode: soft-light; opacity: var(--go, 0); transition: opacity 0.5s; } .rahman_wrap .rahman_pw_back_in { position: absolute; inset: 60px 54px; display: flex; flex-direction: column; justify-content: center; gap: 18px; text-align: center; opacity: 0; } .rahman_wrap .rahman_pw_back_in[data-i='0'] { opacity: 1; } .rahman_wrap .rahman_pw_back_name { font: 128px/0.9 var(--persian); } .rahman_wrap .rahman_pw_back_sub { font: 600 22px var(--sarabun); } .rahman_wrap .rahman_pw_back_text { font: 300 22px/1.35 var(--sarabun); } .rahman_wrap .rahman_pw_hint .rahman_tx_in, .rahman_wrap .rahman_pw_hint { letter-spacing: 0.08em; } .rahman_wrap .rahman_pw_text .w { transition: opacity 0.3s; } .rahman_wrap .rahman_pc_n { display: block; font-size: 24px; line-height: 34px; } .rahman_wrap .rahman_pc_name { display: block; } .rahman_wrap .rahman_pc_sub { display: block; font-size: 16px; line-height: 22px; } .rahman_wrap .rahman_pillar_card { display: block; perspective: 1400px; } .rahman_wrap .rahman_pc_img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.9s var(--ease); } .rahman_wrap .rahman_pillar_card { transition: none; } .rahman_wrap .rahman_social { display: block; transition: transform 0.6s var(--ease); } .rahman_wrap .rahman_social:hover { transform: translateY(-8px) rotate(-3deg); } .rahman_wrap .rahman_discover { cursor: default; } .rahman_wrap .rahman_discover .c { transition: color 0.4s; } .rahman_wrap .rahman_labs { letter-spacing: 0.2em; } .rahman_wrap .rahman_labs b { font-weight: 700; } .rahman_wrap .rahman_saga { cursor: pointer; } .rahman_wrap .rahman_saga > span { position: absolute; display: block; } .rahman_wrap .rahman_saga_frame { inset: 0; background-size: cover; background-position: center; } .rahman_wrap .rahman_saga_tint { mix-blend-mode: color; } .rahman_wrap .rahman_saga_inner { background: var(--paper); } .rahman_wrap .rahman_saga_face .rahman_living_box { position: absolute; inset: 0; } .rahman_wrap .rahman_saga_face { overflow: hidden; } .rahman_wrap .rahman_menu { position: fixed; inset: 0; z-index: 40; color: var(--ink); } .rahman_wrap .rahman_menu[hidden] { display: none; } .rahman_wrap .rahman_menu_bg { position: absolute; inset: 0; background: var(--paper); clip-path: inset(0 0 100% 0); } .rahman_wrap .rahman_menu_bg::before { content: ''; position: absolute; inset: 18px; border: 1px solid #000; outline: 1px solid #000; outline-offset: -8px; } .rahman_wrap .rahman_menu_in { position: relative; height: 100%; display: grid; grid-template-rows: auto 1fr auto auto; gap: clamp(14px, 2.2vh, 28px); padding: clamp(28px, 4vh, 56px) clamp(32px, 5vw, 96px); overflow: auto; } .rahman_wrap .rahman_menu_top { display: flex; align-items: center; gap: 24px; } .rahman_wrap .rahman_menu_kicker { font: 700 clamp(16px, 1.4vw, 22px) var(--sarabun); letter-spacing: 0.3em; white-space: nowrap; } .rahman_wrap .rahman_menu_chain { flex: 1; height: 18px; background: linear-gradient(90deg, #000 0 40%, var(--gold) 50%, #000 60% 100%) 0 0 / 300% 100%; -webkit-mask: var(--chain-svg) left center / auto 140% repeat-x; mask: var(--chain-svg) left center / auto 140% repeat-x; opacity: 0.6; animation: glint 7s linear infinite; } .rahman_wrap .rahman_menu_close { display: inline-flex; align-items: center; gap: 14px; font: 700 clamp(18px, 1.7vw, 32px) var(--sarabun); } .rahman_wrap .rahman_menu_close i { position: relative; width: 28px; height: 28px; } .rahman_wrap .rahman_menu_close i::before, .rahman_wrap .rahman_menu_close i::after { content: ''; position: absolute; left: 0; top: 13px; width: 28px; height: 2px; background: currentColor; transform: rotate(45deg); transition: transform 0.6s var(--ease); } .rahman_wrap .rahman_menu_close i::after { transform: rotate(-45deg); } .rahman_wrap .rahman_menu_close:hover i::before { transform: rotate(135deg); } .rahman_wrap .rahman_menu_close:hover i::after { transform: rotate(45deg); } .rahman_wrap .rahman_heroes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 28px); min-height: 0; } .rahman_wrap .rahman_hero { position: relative; min-height: 0; } .rahman_wrap .rahman_hero_card { position: relative; display: block; width: 100%; height: 100%; min-height: 320px; overflow: hidden; border: 1px solid #000; isolation: isolate; } .rahman_wrap .rahman_hero_art { position: absolute; inset: 0; background-size: cover; background-position: 50% 30%; transform: scale(1.06); transition: transform 1.4s var(--ease), filter 0.8s; } .rahman_wrap .rahman_hero_shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(3, 2, 2, 0.82)); } .rahman_wrap .rahman_hero_n { position: absolute; left: 18px; top: 14px; z-index: 2; font: 64px/1 var(--persian); color: var(--paper); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); } .rahman_wrap .rahman_hero_meta { position: absolute; left: 20px; right: 20px; bottom: 64px; z-index: 2; display: grid; gap: 6px; color: var(--paper); } .rahman_wrap .rahman_hero_name { font: clamp(30px, 2.6vw, 54px)/0.95 var(--persian); } .rahman_wrap .rahman_hero_sub { font: 600 13px var(--sarabun); letter-spacing: 0.22em; opacity: 0.8; } .rahman_wrap .rahman_hero_cta, .rahman_wrap .rahman_hero_lock { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2; display: flex; align-items: center; gap: 12px; font: 700 14px var(--sarabun); letter-spacing: 0.24em; color: var(--paper); } .rahman_wrap .rahman_hero_cta i { font-style: normal; transition: transform 0.6s var(--ease); } .rahman_wrap .is-open .rahman_hero_card:hover .rahman_hero_art, .rahman_wrap .is-open .rahman_hero_card:focus-visible .rahman_hero_art { transform: scale(1.0); } .rahman_wrap .is-open .rahman_hero_card:hover .rahman_hero_cta i { transform: translateX(10px); } .rahman_wrap .is-open .rahman_hero_card::after { content: ''; position: absolute; inset: 8px; border: 1px solid var(--gold); opacity: 0; transition: opacity 0.6s; z-index: 3; pointer-events: none; } .rahman_wrap .is-open .rahman_hero_card:hover::after { opacity: 1; } .rahman_wrap .is-locked .rahman_hero_card { cursor: not-allowed; } .rahman_wrap .is-locked .rahman_hero_art { filter: grayscale(1) contrast(0.9) brightness(0.75); } .rahman_wrap .is-locked .rahman_hero_card:hover .rahman_hero_art { filter: grayscale(0.6) brightness(0.7); } .rahman_wrap .rahman_lock { width: 22px; height: 26px; color: var(--paper); } .rahman_wrap .rahman_lock_shackle { transition: transform 0.4s var(--ease); transform-origin: 36px 26px; } .rahman_wrap .is-locked .rahman_hero_card.is-denied .rahman_lock_shackle { transform: translateY(-3px) rotate(12deg); } .rahman_wrap .is-locked .rahman_hero_card.is-denied { animation: deny 0.5s var(--ease); } @keyframes deny { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } } .rahman_wrap .rahman_menu_note { font: 300 15px/1.4 var(--sarabun); max-width: 60ch; } .rahman_wrap .rahman_menu_index { display: flex; flex-wrap: wrap; gap: 8px 28px; border-top: 1px solid #000; padding-top: 14px; } .rahman_wrap .rahman_menu_index a { display: inline-flex; gap: 10px; font: 700 15px var(--sarabun); letter-spacing: 0.16em; transition: color 0.3s; } .rahman_wrap .rahman_menu_index a span { font-weight: 300; color: var(--red); } .rahman_wrap .rahman_menu_index a:hover { color: var(--red); } .rahman_wrap.menu-open { overflow: hidden; } .rahman_wrap .rahman_loader { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; align-content: center; gap: clamp(14px, 2.4vh, 26px); background: var(--paper); } .rahman_wrap .rahman_ld_tile { position: relative; width: min(56vw, 62vh * 1.553, 760px); aspect-ratio: 1280 / 824; transform-origin: 0 0; } .rahman_wrap .ld-cell { position: absolute; background-image: var(--tile-img); background-repeat: no-repeat; clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); } .rahman_wrap .rahman_ld_name { position: relative; margin: 0; font: 700 clamp(40px, 5.4vw, 76px)/1.3 'Amiri Verse', 'Naskh', serif; } .rahman_wrap .rahman_ld_ghost { opacity: 0.1; } .rahman_wrap .rahman_ld_ink { position: absolute; inset: 0; clip-path: inset(0 0 0 100%); } .rahman_wrap .rahman_ld_cap { display: flex; gap: 18px; align-items: baseline; margin: 0; font: 600 clamp(11px, 0.85vw, 13px)/1 var(--sarabun); letter-spacing: 0.32em; } .rahman_wrap .rahman_ld_count { font: 700 15px/1 'Naskh', serif; letter-spacing: 0; min-width: 2.4em; color: var(--red); } .rahman_wrap .rahman_ld_sound { position: absolute; left: 50%; bottom: clamp(20px, 4vh, 40px); translate: -50% 0; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 0; background: none; color: inherit; font: 700 12px var(--sarabun); letter-spacing: 0.28em; cursor: pointer; } .rahman_wrap .rahman_ld_sound .rahman_sound_bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; } .rahman_wrap .rahman_ld_sound .rahman_sound_bars i { width: 2px; height: 30%; background: currentColor; } .rahman_wrap .rahman_ld_sound.is-on .rahman_sound_bars i { animation: bars 0.9s ease-in-out infinite alternate; } .rahman_wrap .rahman_ld_sound.is-on .rahman_sound_bars i:nth-child(2) { animation-delay: -0.3s; } .rahman_wrap .rahman_ld_sound.is-on .rahman_sound_bars i:nth-child(3) { animation-delay: -0.6s; } .rahman_wrap .rahman_ld_sound.is-on .rahman_sound_bars i:nth-child(4) { animation-delay: -0.15s; } .rahman_wrap .rahman_ld_sound:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; } .rahman_wrap .rahman_chars .c, .rahman_wrap .rahman_words .w { display: inline-block; } .rahman_wrap .rahman_ar { font-family: 'Segoe UI', 'Noto Naskh Arabic', 'Geeza Pro', 'Tahoma', sans-serif; font-weight: 600; unicode-bidi: isolate; display: block; margin-top: 4px; } .rahman_wrap .rahman_chars .word { display: inline-block; white-space: nowrap; } .rahman_wrap .rahman_m { --g: 16px; --bar: 48px; padding: 0 var(--g); } .rahman_wrap .rahman_m_bar { position: sticky; top: 0; z-index: 30; box-sizing: border-box; height: var(--bar); display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; margin: 0 calc(var(--g) * -1); padding: 0 var(--g); background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid #000; } .rahman_wrap .rahman_m_bar_name { font: 22px/1 var(--persian); opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--ease), transform 0.7s var(--ease); } .rahman_wrap .is-past-hero .rahman_m_bar_name { opacity: 1; transform: none; } .rahman_wrap .rahman_sound:not(.is-on) .rahman_sound_bars i:nth-child(1) { height: 6px; } .rahman_wrap .rahman_sound:not(.is-on) .rahman_sound_bars i:nth-child(2) { height: 12px; } .rahman_wrap .rahman_sound:not(.is-on) .rahman_sound_bars i:nth-child(3) { height: 8px; } .rahman_wrap .rahman_sound:not(.is-on) .rahman_sound_bars i:nth-child(4) { height: 14px; } .rahman_wrap .m-bar-years { font: 14px/1 var(--persian); } .rahman_wrap .rahman_m_menu { display: inline-flex; align-items: center; gap: 10px; font: 700 16px var(--sarabun); letter-spacing: 0.12em; } .rahman_wrap .rahman_m_menu i { width: 22px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; } .rahman_wrap .rahman_m_sec { position: relative; border-left: 1px solid #000; border-right: 1px solid #000; padding: 28px 16px 36px; } .rahman_wrap .rahman_m_chain { height: 16px; margin: -12px -16px 22px; border-bottom: 1px solid #000; background: linear-gradient(90deg, #000 0 40%, var(--gold) 50%, #000 60% 100%) 0 0 / 300% 100%; -webkit-mask: var(--chain-svg) center / auto 100% repeat-x; mask: var(--chain-svg) center / auto 100% repeat-x; opacity: 0.55; animation: glint 7s linear infinite; } .rahman_wrap .rahman_m_h2 { font: 700 clamp(30px, 8vw, 56px)/1.05 var(--sarabun); } .rahman_wrap .rahman_m_p { font: 300 16px/1.45 var(--sarabun); margin-top: 14px; max-width: 60ch; } .rahman_wrap .rahman_m_hint { margin-top: 14px; font: 600 12px var(--sarabun); letter-spacing: 0.24em; opacity: 0.6; } .rahman_wrap .rahman_m .rahman_svgm { position: relative; } .rahman_wrap .rahman_m_hero { padding-top: 18px; overflow: hidden; min-height: calc(100svh - var(--bar)); display: flex; flex-direction: column; } .rahman_wrap .rahman_m_hero_name { font: clamp(52px, min(20vw, 9.4svh), 128px)/0.95 var(--persian); text-align: center; position: relative; z-index: 3; } .rahman_wrap .rahman_m_hero_name { margin-top: auto; } .rahman_wrap .rahman_m_hero_art { position: relative; flex: none; height: min(115vw, 58svh, calc(100svh - var(--bar) - 300px)); margin: 4px -16px 0; container-type: size; --c: min(100cqh, 115cqw); } .rahman_wrap .rahman_m_hero_tile, .rahman_wrap .rahman_m_hero_paper { position: absolute; left: 0; right: 0; bottom: 0; width: min(88cqw, calc(var(--c) * 0.94)); height: calc(var(--c) * 0.78); margin: 0 auto; background-size: cover; background-position: center; } .rahman_wrap .rahman_m_hero_paper { height: calc(var(--c) * 0.8); } .rahman_wrap .rahman_m_mohmand { position: absolute; left: 0; right: 0; bottom: calc(var(--c) * 0.24); width: min(86cqw, calc(var(--c) * 0.98)); height: calc(var(--c) * 0.42); margin: 0 auto; } .rahman_wrap .rahman_m_mohmand canvas { width: 100%; height: 100%; display: block; } .rahman_wrap .rahman_m_hero_art .rahman_living_box { position: absolute; left: 50%; bottom: 0; height: var(--c); width: calc(var(--c) * 1280 / 824); margin-left: calc(var(--c) * -640 / 824); } .rahman_wrap .rahman_m_hero_meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid #000; border-bottom: 1px solid #000; font: 15px var(--persian); } .rahman_wrap .rahman_m_hero_meta .rahman_ar { margin: 0; font-size: 18px; } .rahman_wrap .rahman_m_hero_nav { display: grid; grid-template-columns: 1fr 1fr; margin: 0 -16px -36px; } .rahman_wrap .rahman_m_hero_nav a { padding: 18px 16px; font: 700 clamp(15px, 4.4vw, 18px) var(--sarabun); letter-spacing: 0.04em; border-top: 1px solid #000; } .rahman_wrap .rahman_m_hero_nav a + a { border-left: 1px solid #000; text-align: right; } .rahman_wrap .rahman_m_roots_h { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center; } .rahman_wrap .rahman_m_roots_h .rahman_fish { width: 44px; height: 44px; flex: none; } .rahman_wrap .rahman_m_roots_h .rahman_fish_l { transform: rotate(90deg); } .rahman_wrap .rahman_m_roots_h .rahman_fish_r { transform: rotate(-90deg); } .rahman_wrap .rahman_m_roots_grid { display: grid; gap: 24px; margin-top: 24px; } .rahman_wrap .rahman_m_tree { height: min(78vh, 560px); display: grid; place-items: center; } .rahman_wrap .rahman_m_tree .rahman_svgm { height: 100%; aspect-ratio: 517 / 885; } .rahman_wrap .rahman_m_born { position: relative; border: 1px solid #000; outline: 1px solid #000; outline-offset: -8px; padding: 22px 18px; text-align: center; } .rahman_wrap .rahman_m_born .rahman_bt_title { font: 700 22px/1.2 var(--sarabun); } .rahman_wrap .rahman_m_bt_row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; } .rahman_wrap .rahman_m .rahman_bt { position: relative; aspect-ratio: 1; border: 1px solid #000; transition: background-color 0.5s var(--ease); } .rahman_wrap .rahman_m .rahman_bt .rahman_bt_label { left: 8px; font-size: 18px; } .rahman_wrap .rahman_m .rahman_bt .rahman_bt_value { right: 8px; font-size: 16px; } .rahman_wrap .rahman_m .rahman_bt .rahman_svgm { position: absolute; left: 24%; right: 24%; top: 24%; bottom: 24%; mix-blend-mode: multiply; } .rahman_wrap .rahman_m .rahman_bt.is-on { background: var(--ink); } .rahman_wrap .rahman_m_born .rahman_bt_text { font: 300 15px/1.45 var(--sarabun); } .rahman_wrap .rahman_m_emblem { width: min(62vw, 300px); margin: 32px auto 0; aspect-ratio: 1; } .rahman_wrap .rahman_m_emblem .rahman_svgm { width: 100%; height: 100%; } .rahman_wrap .rahman_m_quote_box { border: 1px solid #000; outline: 1px solid #000; outline-offset: -10px; padding: 26px 22px 20px; } .rahman_wrap .rahman_m_quote .rahman_quote { font: 600 clamp(26px, 7vw, 46px)/1 var(--sarabun); text-transform: uppercase; } .rahman_wrap .rahman_m_quote_foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 18px; } .rahman_wrap .rahman_m_quote_foot cite { font: 600 clamp(18px, 5vw, 32px) var(--sarabun); } .rahman_wrap .rahman_m_seal { width: 96px; height: 96px; } .rahman_wrap .rahman_m_seal .rahman_svgm { width: 100%; height: 100%; } .rahman_wrap .rahman_m_sufi_grid { display: grid; gap: 28px; margin-top: 28px; } .rahman_wrap .rahman_m_sufi_grid > * { min-width: 0; } .rahman_wrap .rahman_m_sufi { border: 1px solid #000; padding: 22px 18px; text-align: center; } .rahman_wrap .rahman_m_sufi h3 { font: 600 clamp(22px, 6vw, 34px)/1.15 var(--sarabun); } .rahman_wrap .rahman_m_hands { width: min(70vw, 340px); aspect-ratio: 1; margin: 6px auto; } .rahman_wrap .rahman_m_hands .rahman_svgm { width: 100%; height: 100%; } .rahman_wrap .rahman_m_sufi p { font: 300 14px/1.45 var(--sarabun); } .rahman_wrap .rahman_m_heart .rahman_map_box { position: relative; aspect-ratio: 695 / 534; margin-top: 18px; } .rahman_wrap .rahman_m .rahman_map_pin b { font-size: 12px; left: 12px; top: -9px; } .rahman_wrap .rahman_m .rahman_map_pin i { width: 12px; height: 12px; left: -6px; top: -6px; } .rahman_wrap .rahman_m_pillars { height: 100svh; min-height: 560px; padding: 0 12px; display: grid; grid-template-rows: auto auto 1fr auto auto; overflow: hidden; background: var(--paper); } .rahman_wrap .rahman_m_pw_band { padding: 12px 0; border-bottom: 1px solid #000; text-align: center; font: 600 12px var(--sarabun); } .rahman_wrap .rahman_m_pw_band .rahman_band_in { gap: 12px; letter-spacing: 0.24em; } .rahman_wrap .rahman_m_pw_band .rahman_band_in i { width: 48px; } .rahman_wrap .rahman_m_pillars .rahman_pw_word { position: relative; aspect-ratio: 1515 / 534; margin: 8px 0 0; } .rahman_wrap .rahman_m_pw_stage { position: relative; min-height: 0; display: grid; place-items: center; } .rahman_wrap .rahman_m_pillars .rahman_pw_card { position: relative; height: 100%; max-height: 64vh; aspect-ratio: 507 / 761; } .rahman_wrap .rahman_m_pillars .rahman_pw_back_in { inset: 9% 8%; gap: 10px; } .rahman_wrap .rahman_m_pillars .rahman_pw_back_name { font-size: clamp(40px, 12vw, 72px); } .rahman_wrap .rahman_m_pillars .rahman_pw_back_sub { font-size: 14px; } .rahman_wrap .rahman_m_pillars .rahman_pw_back_text { font-size: clamp(13px, 3.6vw, 18px); } .rahman_wrap .rahman_m_pw_foot { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; height: 76px; border-top: 1px solid #000; } .rahman_wrap .rahman_m_pw_foot .rahman_pw_name, .rahman_wrap .rahman_m_pw_foot .rahman_pw_num { position: relative; height: 76px; } .rahman_wrap .rahman_m_pw_foot .rahman_pw_num { width: 96px; } .rahman_wrap .rahman_m_pw_foot .rahman_pw_name .rahman_pw_big { font-size: var(--fs); } .rahman_wrap .rahman_m_pw_foot .rahman_pw_name .rahman_pw_small { font-size: 12px; margin: 22px 0 0 8px; } .rahman_wrap .rahman_m_pw_foot .rahman_pw_num .rahman_pw_roll { font-size: 76px; } .rahman_wrap .rahman_m_pillars .rahman_pw_hint { text-align: center; padding: 8px 0 14px; font: 600 11px var(--sarabun); } .rahman_wrap .rahman_m_cards { display: grid; grid-auto-flow: column; grid-auto-columns: min(72vw, 300px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 24px -16px 0; padding: 0 16px 12px; scrollbar-width: none; } .rahman_wrap .rahman_m_card { position: relative; scroll-snap-align: center; text-align: center; font: 600 28px/1.05 var(--sarabun); } .rahman_wrap .rahman_m_card .rahman_pc_n { font-size: 18px; line-height: 24px; } .rahman_wrap .rahman_m_card .rahman_pc_sub { font-size: 12px; margin-bottom: 12px; } .rahman_wrap .rahman_m_card .rahman_pc_img { position: relative; display: block; inset: auto; aspect-ratio: 396 / 594; } .rahman_wrap .rahman_m_card .rahman_pc_glare { top: auto; height: auto; } .rahman_wrap .rahman_m_legacy_grid { display: grid; gap: 22px; margin-top: 22px; } .rahman_wrap .rahman_m_book { position: relative; width: min(100%, 420px); aspect-ratio: 424 / 658; margin: 0 auto; mix-blend-mode: darken; overflow: hidden; } .rahman_wrap .rahman_m_book .rahman_living_box { position: absolute; inset: 0; } .rahman_wrap .rahman_m_tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .rahman_wrap .rahman_m .rahman_lg_tab { position: relative; inset: auto; pointer-events: auto; display: grid; justify-items: center; gap: 8px; padding: 12px 6px; border: 1px solid #000; text-align: center; } .rahman_wrap .rahman_m .rahman_lg_tab .rahman_lg_num { position: relative; width: 44px; height: 38px; font-size: 22px; } .rahman_wrap .rahman_m .rahman_lg_tab .rahman_lg_icon { width: 70%; aspect-ratio: 1; } .rahman_wrap .rahman_m .rahman_lg_tab .rahman_lg_label { font: 600 12px/1.2 var(--sarabun); letter-spacing: 0.04em; } .rahman_wrap .rahman_m .rahman_lg_text { margin-top: 16px; font: 300 15px/1.45 var(--sarabun); } .rahman_wrap .rahman_m_saga .rahman_saga_title { font-size: clamp(44px, 13vw, 96px); line-height: 0.95; } .rahman_wrap .rahman_m_saga_grid { display: grid; gap: 22px; margin-top: 22px; } .rahman_wrap .rahman_m_saga_fig .rahman_saga { position: relative; aspect-ratio: 1; } .rahman_wrap .rahman_m_saga_fig figcaption { margin-top: 10px; text-align: center; font: 600 clamp(22px, 6vw, 34px)/1.1 var(--sarabun); } .rahman_wrap .rahman_m_saga_fig small { display: block; font-size: 14px; } .rahman_wrap .rahman_m_footer { position: relative; margin: 0 calc(var(--g) * -1); padding: 18px var(--g) 28px; background: var(--red); color: #fff; overflow: hidden; } .rahman_wrap .rahman_m_banner { position: relative; aspect-ratio: 1536 / 512; margin: 0 -8px; } .rahman_wrap .rahman_m_banner .rahman_living_box { position: absolute; inset: 0; } .rahman_wrap .rahman_m_footer .rahman_discover { margin-top: 18px; font: clamp(48px, 14vw, 96px)/0.95 var(--persian); text-align: right; } .rahman_wrap .rahman_m_social { display: flex; gap: 14px; margin-top: 22px; } .rahman_wrap .rahman_m_social .rahman_social { width: 64px; height: 64px; background-size: 205% auto; background-position: center; border-radius: 2px; } .rahman_wrap .rahman_m_footer .rahman_labs { margin-top: 22px; font: 600 12px var(--sarabun); } @media (min-width: 700px) and (max-width: 1099.98px) { .rahman_wrap .rahman_m { --g: 28px; } .rahman_wrap .rahman_m_sec { padding: 36px 28px 48px; } .rahman_wrap .rahman_m_chain { margin: -20px -28px 30px; } .rahman_wrap .rahman_m_hero_nav { margin: 0 -28px -48px; } .rahman_wrap .rahman_m_roots_grid { grid-template-columns: 0.85fr 1fr; align-items: center; } .rahman_wrap .rahman_m_sufi_grid { grid-template-columns: 1fr 1.2fr; align-items: start; } .rahman_wrap .rahman_m_legacy_grid { grid-template-columns: 0.9fr 1fr; align-items: center; } .rahman_wrap .rahman_m_saga_grid { grid-template-columns: 1fr 1fr; } .rahman_wrap .rahman_m_cards { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; margin: 28px 0 0; padding: 0; } .rahman_wrap .rahman_m_pillars { padding: 0 28px; } .rahman_wrap .rahman_m_pw_foot, .rahman_wrap .rahman_m_pw_foot .rahman_pw_name, .rahman_wrap .rahman_m_pw_foot .rahman_pw_num { height: 110px; } .rahman_wrap .rahman_m_pw_foot .rahman_pw_num { width: 150px; } .rahman_wrap .rahman_m_pw_foot .rahman_pw_num .rahman_pw_roll { font-size: 110px; } .rahman_wrap .rahman_heroes { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 699.98px) { .rahman_wrap .rahman_menu_in { grid-template-rows: auto auto auto auto; padding: 26px 22px; } .rahman_wrap .rahman_heroes { grid-template-columns: 1fr; } .rahman_wrap .rahman_hero_card { min-height: 200px; aspect-ratio: 16 / 10; } .rahman_wrap .rahman_hero_n { font-size: 44px; } .rahman_wrap .rahman_menu_kicker { font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .rahman_wrap .rahman_pw_face, .rahman_wrap .rahman_pillar_card, .rahman_wrap .rahman_social, .rahman_wrap .rahman_lg_tab > *, .rahman_wrap .rahman_chain, .rahman_wrap .rahman_m_chain, .rahman_wrap .rahman_menu_chain, .rahman_wrap .rahman_sq_in.on, .rahman_wrap .rahman_sq_red, .rahman_wrap .rahman_sq_green, .rahman_wrap .rahman_map_pin i { transition: none; animation: none; } .rahman_wrap .rahman_ln.rahman_rail::after { display: none; } } .rahman_wrap .rahman_m .rahman_bt.is-on .rahman_svgm { mix-blend-mode: normal; color: var(--paper); } .rahman_wrap .rahman_m .rahman_map_pin b { left: auto; right: 12px; } @media (max-width: 699.98px) { .rahman_wrap .rahman_m_pw_foot .rahman_pw_num { width: 130px; } } .rahman_wrap .rahman_m_footer .rahman_discover { line-height: 1.08; font-size: clamp(44px, 12vw, 96px); } @media (max-width: 699.98px) { .rahman_wrap .rahman_hero_meta { bottom: 50px; gap: 4px; } .rahman_wrap .rahman_hero_name { font-size: 26px; } .rahman_wrap .rahman_hero_sub { font-size: 10px; letter-spacing: 0.16em; } .rahman_wrap .rahman_hero_cta, .rahman_wrap .rahman_hero_lock { bottom: 16px; font-size: 12px; } .rahman_wrap .rahman_heroes { gap: 10px; } } .rahman_wrap .rahman_m_pw_foot .rahman_pw_num .rahman_pw_roll { padding-right: 8px; } @media (max-width: 699.98px) { .rahman_wrap .rahman_m_pw_foot .rahman_pw_num .rahman_pw_roll { font-size: 62px; padding-right: 16px; } .rahman_wrap .rahman_m_pw_foot .rahman_pw_name .rahman_pw_roll { flex-wrap: wrap; align-content: center; row-gap: 2px; } .rahman_wrap .rahman_m_pw_foot .rahman_pw_name .rahman_pw_small { flex-basis: 100%; margin: 0 0 0 4px; font-size: 11px; } .rahman_wrap .rahman_m_pillars .rahman_pw_ticks { gap: 0; } .rahman_wrap .rahman_m_pillars .rahman_pw_tick { gap: 4px; font-size: 9px; letter-spacing: 0; } .rahman_wrap .rahman_m_pillars .rahman_pw_tick i { width: 13px; height: 13px; } .rahman_wrap .rahman_m_pillars .rahman_pw_word { width: 92%; justify-self: center; } } .rahman_wrap .rahman_hero_card { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; background: var(--paper); } .rahman_wrap .rahman_hero_art { position: relative; inset: auto; display: block; justify-self: center; height: 100%; max-height: 100%; aspect-ratio: 1; max-width: calc(100% - 24px); margin-top: 14px; transform: none; } .rahman_wrap .rahman_hero_art .rahman_saga { position: absolute; inset: 0; } .rahman_wrap .rahman_hero_shade { display: none; } .rahman_wrap .rahman_hero_n { color: var(--ink); text-shadow: none; } .rahman_wrap .rahman_hero_meta { position: static; color: var(--ink); padding: 10px 20px 0; } .rahman_wrap .rahman_hero_cta, .rahman_wrap .rahman_hero_lock { position: static; color: var(--ink); padding: 10px 20px 18px; } .rahman_wrap .is-open .rahman_hero_card:hover .rahman_hero_art, .rahman_wrap .is-open .rahman_hero_card:focus-visible .rahman_hero_art { transform: none; } .rahman_wrap .rahman_lock { color: var(--ink); } .rahman_wrap .rahman_lock circle, .rahman_wrap .rahman_lock path:not(.rahman_lock_shackle) { stroke: var(--paper); } .rahman_wrap .is-locked .rahman_hero_art { filter: grayscale(1) contrast(0.95); opacity: 0.7; } .rahman_wrap .is-locked .rahman_hero_card:hover .rahman_hero_art { filter: grayscale(0.4); opacity: 0.9; } .rahman_wrap .rahman_hero_cta { color: var(--red); } .rahman_wrap .rahman_hero_paper { mix-blend-mode: multiply; opacity: 0.55; } .rahman_wrap #pillars { height: 100vh; background: var(--paper); } .rahman_wrap #pillars .rahman_stage { transform: translateX(var(--kx, 0px)) scale(var(--kp, var(--k))); } .rahman_wrap .rahman_svgm.rahman_map [data-role='pk'] path { fill: transparent; transition: fill 0.5s var(--ease), transform 0.6s var(--ease); cursor: crosshair; } .rahman_wrap .rahman_svgm.rahman_map [data-role='pk'] path[data-home] { fill: rgba(201, 49, 50, 0.16); } .rahman_wrap .rahman_svgm.rahman_map [data-role='pk'] path:hover { fill: var(--red); transform: translateY(-6px) scale(1.02); } .rahman_wrap .rahman_svgm.rahman_map [data-role='pk'] path.is-near { fill: rgba(21, 151, 72, 0.22); } .rahman_wrap .rahman_svgm.rahman_map [data-role='pk-ink'], .rahman_wrap .rahman_svgm.rahman_map [data-role='places'] { pointer-events: none; } .rahman_wrap .rahman_svgm.rahman_map [data-role='places'] text { font: 700 30px var(--sarabun); letter-spacing: 0.18em; fill: var(--red); } .rahman_wrap .rahman_pw_ticks { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 100%; align-items: center; } .rahman_wrap .rahman_pw_tick { position: relative; display: grid; justify-items: center; gap: 6px; font: 600 12px var(--sarabun); letter-spacing: 0.06em; opacity: 0.4; transition: opacity 0.4s; } .rahman_wrap .rahman_pw_tick i { width: 22px; height: 22px; border: 1px solid #000; transform: rotate(45deg); transition: background-color 0.5s var(--ease), transform 0.7s var(--ease), border-color 0.4s; } .rahman_wrap .rahman_pw_tick:hover, .rahman_wrap .rahman_pw_tick.is-on { opacity: 1; } .rahman_wrap .rahman_pw_tick:hover i { transform: rotate(135deg); } .rahman_wrap .rahman_pw_tick.is-on i { background: var(--red); border-color: var(--red); transform: rotate(225deg) scale(1.1); } .rahman_wrap .rahman_pw_line { position: relative; display: grid; height: 100%; font: 300 13px/1.3 var(--sarabun); } .rahman_wrap .rahman_pw_line_in { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity 0.5s, transform 0.8s var(--ease); } .rahman_wrap .rahman_pw_line_in.is-on { opacity: 1; transform: none; } .rahman_wrap .rahman_pw_line_in b { display: inline-flex; gap: 8px; align-items: baseline; font-weight: 700; letter-spacing: 0.06em; margin-right: 6px; color: var(--red); } .rahman_wrap .rahman_pw_line_in .rahman_ar { display: inline; margin: 0; font-size: 15px; } .rahman_wrap .rahman_pw_morph { transition: opacity 0.2s; } .rahman_wrap #s3 .rahman_pillar_title .rahman_pc_n { font-size: 16px; line-height: 20px; color: var(--red); } .rahman_wrap #s3 .rahman_pillar_title .rahman_pc_sub { font-size: 12px; line-height: 16px; } .rahman_wrap #s3 .rahman_pillar_card { cursor: pointer; } .rahman_wrap #s3 .rahman_pillar_card:hover { z-index: 2; } .rahman_wrap .rahman_pd { position: fixed; inset: 0; z-index: 45; color: var(--ink); } .rahman_wrap .rahman_pd[hidden] { display: none; } .rahman_wrap .rahman_pd_bg { position: absolute; inset: 0; background: var(--paper); } .rahman_wrap .rahman_pd_bg::before { content: ''; position: absolute; inset: 18px; border: 1px solid #000; outline: 1px solid #000; outline-offset: -8px; } .rahman_wrap .rahman_pd_in { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 96px); padding: clamp(40px, 6vh, 80px) clamp(32px, 7vw, 140px); pointer-events: none; } .rahman_wrap .rahman_pd_in > * { pointer-events: auto; } .rahman_wrap .rahman_pd_art { display: grid; place-items: center; height: 100%; min-height: 0; } .rahman_wrap .rahman_pd_card { display: block; height: min(78vh, 760px); aspect-ratio: 832 / 1248; transform-style: preserve-3d; } .rahman_wrap .rahman_pd_img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.12)); } .rahman_wrap .rahman_pd_copy { display: grid; gap: 14px; max-width: 560px; } .rahman_wrap .rahman_pd_n { font: 600 14px var(--sarabun); letter-spacing: 0.3em; color: var(--red); margin: 0; } .rahman_wrap .rahman_pd_name { font: clamp(64px, 9vw, 160px)/1 var(--persian); padding-top: 0.3em; margin-top: -0.12em; } .rahman_wrap .rahman_pd_ps { font-size: clamp(28px, 3vw, 44px); margin: 0; text-align: left; } .rahman_wrap .rahman_pd_sub { font: 700 16px var(--sarabun); letter-spacing: 0.24em; } .rahman_wrap .rahman_pd_text { font: 300 clamp(17px, 1.4vw, 22px)/1.45 var(--sarabun); } .rahman_wrap .rahman_pd_nav { display: flex; justify-content: space-between; gap: 18px; border-top: 1px solid #000; padding-top: 16px; margin-top: 10px; } .rahman_wrap .rahman_pd_nav button { font: 700 14px var(--sarabun); letter-spacing: 0.18em; transition: color 0.3s; } .rahman_wrap .rahman_pd_nav button:hover { color: var(--red); } .rahman_wrap .rahman_pd_close { position: absolute; top: clamp(30px, 4vh, 48px); right: clamp(36px, 4vw, 64px); display: inline-flex; align-items: center; gap: 14px; font: 700 20px var(--sarabun); } .rahman_wrap .rahman_pd_close i { position: relative; width: 24px; height: 24px; } .rahman_wrap .rahman_pd_close i::before, .rahman_wrap .rahman_pd_close i::after { content: ''; position: absolute; left: 0; top: 11px; width: 24px; height: 2px; background: currentColor; transform: rotate(45deg); } .rahman_wrap .rahman_pd_close i::after { transform: rotate(-45deg); } @media (max-width: 899.98px) { .rahman_wrap .rahman_pd_in { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; padding: 64px 22px 28px; gap: 16px; align-items: start; overflow: auto; } .rahman_wrap .rahman_pd_card { height: min(46vh, 520px); } .rahman_wrap .rahman_pd_name { font-size: clamp(52px, 15vw, 96px); } .rahman_wrap .rahman_pd_text { font-size: 16px; } .rahman_wrap .rahman_pd_close { top: 28px; right: 28px; font-size: 16px; } } .rahman_wrap .rahman_m_pillars .rahman_pw_ticks { height: auto; padding: 6px 0 0; gap: 2px; } .rahman_wrap .rahman_m_pillars .rahman_pw_tick { font-size: 9px; gap: 4px; } .rahman_wrap .rahman_m_pillars .rahman_pw_tick i { width: 12px; height: 12px; } .rahman_wrap .rahman_m_pillars { grid-template-rows: auto auto 1fr auto auto auto; } .rahman_wrap .rahman_m_cards .rahman_m_card { cursor: pointer; } .rahman_wrap .rahman_ar { font-family: 'Naskh', 'Segoe UI', 'Noto Naskh Arabic', 'Tahoma', sans-serif; } .rahman_wrap .rahman_verse { position: relative; background: var(--paper); color: var(--ink); overflow: hidden; } .rahman_wrap .rahman_m .rahman_verse { margin: 0 calc(var(--g) * -1); } .rahman_wrap .rahman_verse_in { position: relative; height: 100vh; min-height: 560px; display: grid; grid-template-rows: auto 1fr; padding: clamp(36px, 6vh, 72px) clamp(22px, 7vw, 140px) clamp(28px, 5vh, 56px); } .rahman_wrap .rahman_verse_in::before { content: ''; position: absolute; inset: clamp(10px, 1.6vw, 22px); border: 1px solid currentColor; outline: 1px solid currentColor; outline-offset: -8px; opacity: 0.85; pointer-events: none; } .rahman_wrap .rahman_verse_kicker { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; gap: 16px; font: 700 clamp(10px, 0.9vw, 14px) var(--sarabun); letter-spacing: 0.32em; white-space: nowrap; } .rahman_wrap .rahman_verse_kicker i { width: clamp(30px, 6vw, 110px); height: 14px; background: currentColor; -webkit-mask: var(--chain-svg) center / auto 140% repeat-x; mask: var(--chain-svg) center / auto 140% repeat-x; opacity: 0.55; } .rahman_wrap .rahman_verse_lines { position: relative; z-index: 2; display: grid; align-content: center; gap: clamp(18px, 4vh, 48px); text-align: center; } .rahman_wrap .rahman_verse_ps { font: 700 clamp(40px, 6.6vw, 140px)/1.45 'Amiri Verse', 'Naskh', serif; margin: 0; } .rahman_wrap .rahman_verse_ps .rahman_vw { display: inline-block; } .rahman_wrap .rahman_verse_ps { text-wrap: balance; } .rahman_wrap .rahman_m .rahman_verse_in { height: calc(100svh - var(--bar)); } .rahman_wrap .rahman_verse_tr { font: 400 clamp(12px, 1vw, 16px) var(--sarabun); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; margin-top: 4px; } .rahman_wrap .rahman_verse_en { font: clamp(24px, 3.1vw, 60px)/1.05 var(--persian); margin-top: 8px; } .rahman_wrap .rahman_verse_art_box { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .rahman_wrap .rahman_verse_art_box svg { pointer-events: auto; } .rahman_wrap .rahman_verse_garden .rahman_verse_lines { align-content: start; padding-top: 4vh; } .rahman_wrap .rahman_verse_garden .rahman_verse_ps { font-size: clamp(36px, 5.2vw, 112px); } .rahman_wrap .rahman_garden_art { position: absolute; left: 0; right: 0; bottom: clamp(10px, 1.6vw, 22px); width: 100%; height: 44vh; } .rahman_wrap .rahman_g_flower { cursor: pointer; } .rahman_wrap .rahman_t_vine { cursor: not-allowed; } .rahman_wrap .rahman_verse_hearts .rahman_verse_in { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; column-gap: 4vw; } .rahman_wrap .rahman_verse_hearts .rahman_verse_kicker { grid-column: 1 / -1; } .rahman_wrap .rahman_verse_hearts .rahman_verse_art_box { position: relative; inset: auto; grid-row: 2; display: grid; place-items: center; } .rahman_wrap .rahman_verse_hearts .rahman_verse_lines { grid-row: 2; text-align: right; } .rahman_wrap .rahman_verse_hearts .rahman_verse_ps { font-size: clamp(34px, 4.6vw, 96px); } .rahman_wrap .rahman_heart_art { width: auto; height: min(70vh, 720px); max-width: 100%; overflow: visible; cursor: pointer; } @media (max-width: 899.98px) { .rahman_wrap .rahman_verse_hearts .rahman_verse_in { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; } .rahman_wrap .rahman_verse_hearts .rahman_verse_art_box { grid-row: 2; } .rahman_wrap .rahman_verse_hearts .rahman_verse_lines { grid-row: 3; text-align: center; } .rahman_wrap .rahman_heart_art { height: 34vh; } .rahman_wrap .rahman_m .rahman_heart_art { height: min(40svh, 92vw); } .rahman_wrap .rahman_m .rahman_verse_hearts .rahman_verse_art_box { margin-top: 14px; } } .rahman_wrap .rahman_verse_turn { background: #0b0908; color: #d8ac4a; } .rahman_wrap .rahman_verse_turn .rahman_verse_lines { -webkit-mask-image: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), #000 0, #000 14vmax, rgba(0, 0, 0, 0.1) 30vmax); mask-image: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), #000 0, #000 14vmax, rgba(0, 0, 0, 0.1) 30vmax); } .rahman_wrap .rahman_verse_turn .rahman_verse_en { color: #f0f0e6; } .rahman_wrap .rahman_verse_turn .rahman_verse_art_box { z-index: 3; } .rahman_wrap .rahman_flame { position: absolute; left: 0; top: 0; width: clamp(34px, 3.2vw, 56px); height: auto; transform-origin: 50% 90%; filter: drop-shadow(0 0 18px rgba(216, 172, 74, 0.7)); pointer-events: none; } .rahman_wrap .rahman_verse_light { position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at var(--fx, 50%) var(--fy, 60%), rgba(216, 172, 74, 0.22), rgba(201, 49, 50, 0.08) 18vmax, transparent 40vmax); pointer-events: none; } .rahman_wrap .rahman_verse_turn { cursor: none; } @media (hover: none) { .rahman_wrap .rahman_verse_turn { cursor: auto; } } @media (prefers-reduced-motion: reduce) { .rahman_wrap .rahman_verse_turn .rahman_verse_lines { -webkit-mask-image: none; mask-image: none; } } .rahman_wrap .rahman_garden_art { height: 34vh; } .rahman_wrap .rahman_verse_garden .rahman_verse_lines { gap: clamp(10px, 2.4vh, 28px); padding-top: 2vh; } .rahman_wrap .rahman_verse_hearts .rahman_verse_lines { text-align: center; } @media (max-width: 699.98px) { .rahman_wrap .rahman_garden_art { height: 26vh; } .rahman_wrap .rahman_verse_garden .rahman_verse_ps { font-size: clamp(30px, 8.4vw, 60px); } } .rahman_wrap .rahman_verse_in { grid-template-columns: minmax(0, 1fr); } .rahman_wrap .rahman_verse_hearts .rahman_verse_in { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } @media (max-width: 899.98px) { .rahman_wrap .rahman_verse_hearts .rahman_verse_in { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 699.98px) { .rahman_wrap .rahman_verse_in { padding: 34px 26px 26px; } .rahman_wrap .rahman_verse_kicker { gap: 8px; font-size: 9px; letter-spacing: 0.2em; } .rahman_wrap .rahman_verse_kicker i { width: 18px; } .rahman_wrap .rahman_verse_kicker span:last-child, .rahman_wrap .rahman_verse_kicker i:last-of-type { display: none; } .rahman_wrap .rahman_verse_ps { font-size: clamp(30px, 8.6vw, 56px); } .rahman_wrap .rahman_verse_en { font-size: clamp(20px, 6vw, 30px); } .rahman_wrap .rahman_verse_tr { font-size: 10px; letter-spacing: 0.12em; } } .rahman_wrap .rahman_pw_front::before { content: ''; position: absolute; inset: 1.6% 2.4%; background: var(--paper); } .rahman_wrap .rahman_pw_front > * { z-index: 1; } .rahman_wrap .rahman_sides { display: none; } @media (min-width: 1100px) { .rahman_wrap .rahman_sides { display: block; position: fixed; inset: 0; z-index: 20; pointer-events: none; } .rahman_wrap .rahman_side { position: absolute; top: 0; bottom: 0; overflow: hidden; background: var(--paper); transition: transform 1.1s var(--ease), opacity 0.8s; pointer-events: auto; } .rahman_wrap .rahman_side_l { left: 0; width: calc(181px * var(--k)); } .rahman_wrap .rahman_side_r { right: 0; width: calc(185px * var(--k)); } .rahman_wrap .rahman_sides.is-away .rahman_side_l { transform: translateX(-102%); } .rahman_wrap .rahman_sides.is-away .rahman_side_r { transform: translateX(102%); } .rahman_wrap .rahman_side_stage { position: absolute; left: 0; top: 0; width: 190px; height: calc(100vh / var(--k)); transform: scale(var(--k)); transform-origin: 0 0; } .rahman_wrap .rahman_sd_rail { position: absolute; top: 0; bottom: 0; width: 1px; background: #000; overflow: hidden; } .rahman_wrap .rahman_sd_rail::after { content: ''; position: absolute; left: 0; width: 100%; height: 160px; top: -160px; background: linear-gradient(transparent, var(--red), transparent); animation: run-v 9s linear infinite; } .rahman_wrap .rahman_side_r .rahman_sd_rail::after { animation-delay: -4.5s; background: linear-gradient(transparent, var(--green), transparent); } .rahman_wrap .rahman_sd_chain { position: absolute; top: 22%; height: 54%; width: 18px; overflow: hidden; opacity: 0.55; mix-blend-mode: color-burn; } .rahman_wrap .rahman_sd_chain::before { content: ''; position: absolute; left: 18px; top: 0; height: 18px; width: calc(54vh / var(--k)); transform: rotate(90deg); transform-origin: 0 0; background: linear-gradient(90deg, #000 0 40%, var(--gold) 50%, #000 60% 100%) 0 0 / 300% 100%; -webkit-mask: var(--chain-svg) left center / auto 120% repeat-x; mask: var(--chain-svg) left center / auto 120% repeat-x; animation: glint 7s linear infinite; } .rahman_wrap .rahman_sd_label { position: absolute; font: 16px/1 var(--persian); color: #010101; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; transition: letter-spacing 0.8s var(--ease); } .rahman_wrap .rahman_sd_label:hover { letter-spacing: 0.14em; } .rahman_wrap .rahman_sd_name { left: 62px; top: 14%; } .rahman_wrap .rahman_sd_years { left: 62px; top: 8%; } .rahman_wrap .rahman_sd_poet { left: 62px; top: 30%; } .rahman_wrap .rahman_sd_pashto { position: absolute; left: 22px; bottom: 26px; width: 127px; height: auto; mix-blend-mode: color-burn; opacity: 0.75; transform: rotate(-90deg); transform-origin: 50% 50%; } .rahman_wrap .rahman_sd_squares { position: absolute; left: 88px; bottom: 70px; display: grid; gap: 14px; } .rahman_wrap .rahman_sd_sq { position: relative; display: block; width: 49px; height: 49px; } .rahman_wrap .rahman_sd_sq_frame { position: absolute; inset: 0; } .rahman_wrap .rahman_sd_sq_frame i { position: absolute; display: block; } .rahman_wrap .rahman_sd_sq_frame .rahman_sq_out { inset: 0; border: 1px solid #000; transition: border-color 0.4s; } .rahman_wrap .rahman_sd_sq_frame .rahman_sq_in { inset: 12px; border: 1px solid #000; transition: background-color 0.5s var(--ease), transform 0.7s var(--ease); } .rahman_wrap .rahman_sd_sq_frame .rahman_sq_red, .rahman_wrap .rahman_sd_sq_frame .rahman_sq_green { inset: -4px; border: 1px solid var(--red); opacity: 0; transition: opacity 0.5s; } .rahman_wrap .rahman_sd_sq_frame .rahman_sq_green { inset: -7px; border-color: var(--green); } .rahman_wrap .rahman_sd_sq_frame b { position: absolute; inset: 0; display: grid; place-items: center; font: 200 16px var(--sarabun); color: #000; transition: color 0.4s; } .rahman_wrap .rahman_sd_sq:not(.is-on) .rahman_sd_sq_frame { opacity: 0.32; transition: opacity 0.4s; } .rahman_wrap .rahman_sd_sq.is-on .rahman_sq_in { background: var(--red); } .rahman_wrap .rahman_sd_sq.is-on b { color: var(--paper); } .rahman_wrap .rahman_sd_sq.is-on .rahman_sq_red { opacity: 1; animation: sq-breathe 3.2s ease-in-out infinite; } .rahman_wrap .rahman_sd_sq.is-on .rahman_sq_green { opacity: 1; animation: sq-turn 14s linear infinite; } .rahman_wrap .rahman_sd_sq:hover .rahman_sd_sq_frame { opacity: 1; } .rahman_wrap .rahman_sd_sq:hover .rahman_sq_in { transform: scale(0.78); } .rahman_wrap .rahman_sd_sq_name { position: absolute; right: 64px; top: 50%; translate: 10px -50%; padding: 7px 12px; background: var(--ink); color: var(--paper); font: 700 12px var(--sarabun); letter-spacing: 0.2em; white-space: nowrap; opacity: 0; transition: opacity 0.35s, translate 0.6s var(--ease); pointer-events: none; } .rahman_wrap .rahman_sd_sq:hover .rahman_sd_sq_name, .rahman_wrap .rahman_sd_sq:focus-visible .rahman_sd_sq_name { opacity: 1; translate: 0 -50%; } .rahman_wrap .rahman_side_r { overflow: visible; } .rahman_wrap .rahman_sec .rahman_stage::before, .rahman_wrap .rahman_sec .rahman_stage::after { content: none; } } .rahman_wrap .rahman_pw_back_name { font-size: min(128px, calc(780px / var(--n, 5))); } .rahman_wrap .rahman_m_pillars .rahman_pw_back_name { font-size: min(72px, calc(62vw / var(--n, 5))); } .rahman_wrap .rahman_pw_back_in { inset: 9% 9%; overflow: hidden; } .rahman_wrap .rahman_pw_back_text { font-size: 20px; } .rahman_wrap .rahman_menu_in { padding: clamp(46px, 7vh, 84px) clamp(44px, 5.5vw, 110px) clamp(34px, 5vh, 60px); } .rahman_wrap .rahman_menu_top { gap: 18px; } .rahman_wrap .rahman_menu_kicker { font-size: clamp(13px, 1.1vw, 18px); letter-spacing: 0.26em; } .rahman_wrap .rahman_menu_close { font-size: clamp(16px, 1.3vw, 24px); } .rahman_wrap .rahman_hero_name { font-size: clamp(26px, 2.2vw, 46px); } .rahman_wrap .rahman_sound { display: inline-flex; align-items: center; gap: 10px; font: 700 12px var(--sarabun); letter-spacing: 0.22em; color: var(--ink); } .rahman_wrap .rahman_sound_bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; } .rahman_wrap .rahman_sound_bars i { width: 3px; height: 4px; background: currentColor; transition: height 0.4s var(--ease); } .rahman_wrap .rahman_sound.is-on .rahman_sound_bars i { animation: bars 1.1s ease-in-out infinite; } .rahman_wrap .rahman_sound.is-on .rahman_sound_bars i:nth-child(2) { animation-delay: -0.35s; } .rahman_wrap .rahman_sound.is-on .rahman_sound_bars i:nth-child(3) { animation-delay: -0.7s; background: var(--red); } .rahman_wrap .rahman_sound.is-on .rahman_sound_bars i:nth-child(4) { animation-delay: -0.15s; } @keyframes bars { 0%, 100% { height: 4px; } 50% { height: 16px; } } .rahman_wrap .rahman_sound_label b { font-weight: 700; color: var(--red); } .rahman_wrap .rahman_sound_side { position: absolute; left: 50px; top: 36px; flex-direction: column; gap: 14px; } .rahman_wrap .rahman_sound_side .rahman_sound_label { writing-mode: vertical-rl; transform: rotate(180deg); } .rahman_wrap .rahman_sound_side .rahman_sound_bars { height: 20px; } .rahman_wrap .rahman_sound_bar .rahman_sound_label { display: none; } .rahman_wrap .rahman_m_bar { grid-template-columns: 1fr auto auto; } @media (prefers-reduced-motion: reduce) { .rahman_wrap .rahman_sound.is-on .rahman_sound_bars i { animation: none; height: 10px; } } .rahman_wrap .rahman_garden_art { height: auto; aspect-ratio: 1600 / 342; max-height: 36vh; } .rahman_wrap .rahman_verse_hearts .rahman_verse_ps { font-size: clamp(30px, 3.5vw, 76px); } .rahman_wrap .rahman_verse_hearts .rahman_verse_en { font-size: clamp(20px, 2.1vw, 40px); } .rahman_wrap .rahman_verse_hearts .rahman_verse_lines { gap: clamp(12px, 2.6vh, 32px); overflow: hidden; } .rahman_wrap .rahman_sd_name { top: 30%; } @media (max-width: 699.98px) { .rahman_wrap .rahman_heroes { gap: 10px; } .rahman_wrap .rahman_hero_card { grid-template-columns: 112px 1fr; grid-template-rows: auto auto; align-items: center; min-height: 0; aspect-ratio: auto; } .rahman_wrap .rahman_hero_art { grid-row: 1 / 3; width: 104px; height: 104px; max-width: none; margin: 10px; } .rahman_wrap .rahman_hero_n { left: auto; right: 12px; top: 8px; font-size: 26px; } .rahman_wrap .rahman_hero_meta { padding: 14px 12px 0 4px; } .rahman_wrap .rahman_hero_name { font-size: 24px; } .rahman_wrap .rahman_hero_sub { font-size: 9px; letter-spacing: 0.12em; } .rahman_wrap .rahman_hero_cta, .rahman_wrap .rahman_hero_lock { padding: 6px 12px 12px 4px; font-size: 11px; } .rahman_wrap .rahman_menu_note { font-size: 13px; } } @media (min-width: 1100px) { .rahman_wrap .rahman_side_stage { background: var(--paper); } } .rahman_wrap .rahman_saga_lock { position: absolute; z-index: 3; left: 50%; bottom: 5%; translate: -50% 0; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; background: var(--ink); color: var(--paper); font: 700 14px var(--sarabun); letter-spacing: 0.24em; } .rahman_wrap .rahman_saga_lock .rahman_lock { width: 16px; height: 19px; color: var(--paper); } .rahman_wrap .rahman_saga_lock .rahman_lock circle, .rahman_wrap .rahman_saga_lock .rahman_lock path:not(.rahman_lock_shackle) { stroke: var(--ink); } .rahman_wrap .rahman_saga:hover .rahman_saga_lock .rahman_lock_shackle { transform: translateY(-3px) rotate(10deg); } .rahman_wrap .rahman_menu .rahman_saga_lock { display: none; } .rahman_wrap .rahman_why { font: 300 14px/1.35 var(--sarabun); } .rahman_wrap .rahman_why .rahman_tx_in { display: block; } .rahman_wrap .rahman_why_k { display: block; margin-bottom: 8px; font: 700 12px var(--sarabun); letter-spacing: 0.26em; color: var(--red); } .rahman_wrap .rahman_m .rahman_why { margin-top: 18px; } .rahman_wrap .rahman_d .rahman_saga_lock { bottom: 7%; gap: 14px; padding: 14px 24px 14px 18px; font-size: 22px; } .rahman_wrap .rahman_d .rahman_saga_lock .rahman_lock { width: 24px; height: 28px; } .rahman_wrap .rahman_verse_garden .rahman_verse_in { grid-template-rows: auto auto minmax(0, 1fr); } .rahman_wrap .rahman_verse_garden .rahman_verse_lines { align-content: start; } .rahman_wrap .rahman_verse_garden .rahman_verse_art_box { position: relative; inset: auto; grid-row: 3; min-height: 0; display: flex; align-items: flex-end; margin-top: clamp(8px, 2vh, 24px); } .rahman_wrap .rahman_verse_garden .rahman_garden_art { position: relative; bottom: auto; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; overflow: visible; } .rahman_wrap .rahman_chain, .rahman_wrap .rahman_m_chain, .rahman_wrap .rahman_menu_chain { background: #000; overflow: hidden; animation: none; } .rahman_wrap .rahman_m_chain, .rahman_wrap .rahman_menu_chain { position: relative; } .rahman_wrap .rahman_chain::after, .rahman_wrap .rahman_m_chain::after, .rahman_wrap .rahman_menu_chain::after { content: ''; position: absolute; top: 0; bottom: 0; left: -100%; width: 300%; background: linear-gradient(90deg, transparent 40%, var(--gold) 50%, transparent 60%); transform: translateX(33.34%); } .rahman_wrap .is-glint .rahman_chain::after, .rahman_wrap .is-glint .rahman_m_chain::after, .rahman_wrap .rahman_menu:not([hidden]) .rahman_menu_chain::after { animation: glint-x 2.4s cubic-bezier(0.45, 0, 0.2, 1) 1 both; animation-delay: calc(var(--i, 0) * 0.07s); } .rahman_wrap .rahman_ln_v.rahman_rail::after, .rahman_wrap .rahman_ln_h.rahman_rail::after, .rahman_wrap .rahman_sd_rail::after { animation: none !important; opacity: 0; } .rahman_wrap .is-glint .rahman_ln_v.rahman_rail::after, .rahman_wrap .rahman_sides.is-glint .rahman_sd_rail::after { opacity: 1; animation: run-v 4s linear 1 both !important; } .rahman_wrap .is-glint .rahman_ln_h.rahman_rail::after { opacity: 1; animation: run-h 4.8s linear 1 both !important; } .rahman_wrap .rahman_sd_chain { mix-blend-mode: normal !important; opacity: 0.5 !important; } .rahman_wrap .rahman_sd_chain::before { animation: none !important; background-position: 100% 0 !important; } .rahman_wrap .rahman_sides.is-glint .rahman_sd_chain::before { animation: glint 2.6s cubic-bezier(0.45, 0, 0.2, 1) 1 both !important; background-position: unset !important; } .rahman_wrap .rahman_sd_sq.is-on .rahman_sq_red { animation: sq-breathe 1.6s ease-in-out 1 !important; } .rahman_wrap .rahman_sd_sq.is-on .rahman_sq_green { animation: sq-turn 1.8s cubic-bezier(0.16, 1, 0.3, 1) 1 !important; } @keyframes glint-x { from { transform: translateX(33.34%); } to { transform: translateX(-33.34%); } } .rahman_wrap .is-asleep *, .rahman_wrap .is-asleep *::before, .rahman_wrap .is-asleep *::after { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { .rahman_wrap .is-glint .rahman_chain::after, .rahman_wrap .is-glint .rahman_m_chain::after, .rahman_wrap .rahman_menu_chain::after, .rahman_wrap .is-glint .rahman_rail::after, .rahman_wrap .rahman_sides.is-glint .rahman_sd_chain::before, .rahman_wrap .rahman_sides.is-glint .rahman_sd_rail::after, .rahman_wrap .rahman_sd_sq.is-on .rahman_sq_red, .rahman_wrap .rahman_sd_sq.is-on .rahman_sq_green { animation: none !important; } } .rahman_wrap .rahman_page.rahman_d .rahman_sec.is-asleep > .rahman_stage, .rahman_wrap .rahman_page.rahman_d .rahman_verse.is-asleep .rahman_verse_in > * { display: none; } .rahman_wrap.is-keys .rahman_page.rahman_d .rahman_sec.is-asleep > .rahman_stage, .rahman_wrap.is-keys .rahman_page.rahman_d .rahman_verse.is-asleep .rahman_verse_in > * { display: revert; } .rahman_wrap .rahman_page.rahman_d .rahman_pw_num .rahman_pw_roll { align-items: flex-end; padding-bottom: 0.02em; font-size: 172px; } .rahman_wrap .rahman_m_pw_foot .rahman_pw_num { overflow: visible; } .rahman_wrap .rahman_m_pw_foot .rahman_pw_num .rahman_pw_roll { line-height: 1.15; } .rahman_wrap .rahman_svgm, .rahman_wrap .rahman_verse_art { will-change: transform; } .rahman_wrap.off-blend * { mix-blend-mode: normal !important; } .rahman_wrap.off-chains .rahman_chain, .rahman_wrap.off-chains .rahman_sd_chain { display: none !important; } .rahman_wrap.off-sides .rahman_sides { display: none !important; } .rahman_wrap.off-paper .rahman_hero_paper { display: none !important; } .rahman_wrap .rahman_svgm.rahman_map [data-role='ink'], .rahman_wrap .rahman_svgm.rahman_map [data-role='pk-ink'] { opacity: 0.42; } .rahman_wrap .rahman_svgm.rahman_map [data-role='pk'] path { fill: rgba(201, 49, 50, 0.1); } .rahman_wrap .rahman_svgm.rahman_map [data-role='pk'] path[data-home] { fill: rgba(201, 49, 50, 0.42); } .rahman_wrap .rahman_svgm.rahman_map [data-role='places'] { display: none; } .rahman_wrap .rahman_map_leads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .rahman_wrap .rahman_map_leads path { fill: none; stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; } .rahman_wrap .rahman_map_label { position: absolute; display: grid; gap: 5px; transform: translateY(-12px); white-space: nowrap; pointer-events: none; } .rahman_wrap .rahman_map_label b { font: 700 24px/1 var(--sarabun); letter-spacing: 0.16em; color: var(--ink); } .rahman_wrap .rahman_map_label small { font: 600 13px/1 var(--sarabun); letter-spacing: 0.28em; color: var(--red); } .rahman_wrap .rahman_map_key { position: absolute; left: 0; top: 0; display: grid; gap: 10px; font: 600 13px/1 var(--sarabun); letter-spacing: 0.24em; } .rahman_wrap .rahman_map_key > span { display: flex; align-items: center; gap: 10px; } .rahman_wrap .rahman_map_key i { width: 18px; height: 12px; background: rgba(201, 49, 50, 0.14); outline: 1px solid rgba(3, 2, 2, 0.3); } .rahman_wrap .rahman_map_key i.is-home { background: rgba(201, 49, 50, 0.42); } .rahman_wrap .rahman_m .rahman_map_leads { display: none; } .rahman_wrap .rahman_m .rahman_map_box { margin-bottom: 52px; } .rahman_wrap .rahman_m .rahman_map_label { top: auto !important; bottom: -46px; transform: none; gap: 4px; } .rahman_wrap .rahman_m .rahman_map_label.is-tribe { left: 0 !important; } .rahman_wrap .rahman_m .rahman_map_label.is-city { left: auto !important; right: 0; text-align: right; } .rahman_wrap .rahman_m .rahman_map_label b { font-size: 15px; } .rahman_wrap .rahman_m .rahman_map_label small { font-size: 10px; letter-spacing: 0.22em; } .rahman_wrap .rahman_m .rahman_map_key { font-size: 9px; } .rahman_wrap .rahman_m .rahman_map_key i { width: 12px; height: 8px; } .rahman_wrap.off-clip { overflow-x: visible; } .rahman_wrap .rahman_menu_in { grid-template-rows: auto 1fr auto auto auto; } .rahman_wrap .rahman_credits_open { font: inherit; letter-spacing: inherit; color: inherit; text-decoration: underline; text-underline-offset: 4px; } .rahman_wrap .rahman_credits_open:hover { color: var(--gold); } .rahman_wrap .rahman_ld_ghost_tile { position: absolute; inset: 0; background-size: 100% 100%; opacity: 0.07; } .rahman_wrap .rahman_ld_ghost { animation: ld-breathe 2.4s ease-in-out infinite; } @keyframes ld-breathe { 50% { opacity: 0.24; } } @media (prefers-reduced-motion: reduce) { .rahman_wrap .rahman_ld_ghost { animation: none; } } .rahman_wrap .rahman_colophon { position: relative; background: var(--paper); color: var(--ink); } .rahman_wrap .rahman_co_in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.25fr); column-gap: calc(80px * var(--k)); margin: 0 calc(185px * var(--k)) 0 calc(181px * var(--k)); padding: calc(110px * var(--k)) calc(46px * var(--k)) calc(120px * var(--k)); border-left: 1px solid #000; border-right: 1px solid #000; } .rahman_wrap .rahman_co_k { margin: 0 0 calc(18px * var(--k)); font: 700 max(11px, calc(13px * var(--k))) var(--sarabun); letter-spacing: 0.26em; color: var(--red); } .rahman_wrap .rahman_co_studio .rahman_co_k { color: var(--ink); margin-top: calc(26px * var(--k)); } .rahman_wrap .rahman_co_p { font: 300 max(15px, calc(22px * var(--k)))/1.45 var(--sarabun); max-width: 34ch; } .rahman_wrap .rahman_co_list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16px * var(--k)) calc(36px * var(--k)); font: 300 max(13px, calc(15px * var(--k)))/1.45 var(--sarabun); } .rahman_wrap .rahman_co_list b { display: block; margin-bottom: 2px; font: 700 max(10px, calc(11px * var(--k))) var(--sarabun); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); } .rahman_wrap .rahman_ee { width: calc(230px * var(--k)); min-width: 150px; aspect-ratio: 448 / 333; cursor: pointer; touch-action: manipulation; } .rahman_wrap .rahman_ee svg { display: block; width: 100%; height: 100%; overflow: visible; } .rahman_wrap .rahman_ee_p { fill: var(--ink); transition: fill 0.4s var(--ease); } .rahman_wrap .rahman_ee_p:hover { fill: var(--red); } .rahman_wrap .rahman_co_cta_lead { margin-top: calc(34px * var(--k)); font: max(20px, calc(30px * var(--k)))/1.1 var(--persian); } .rahman_wrap .rahman_co_cta { display: inline-flex; align-items: center; gap: 14px; margin-top: calc(18px * var(--k)); padding: max(14px, calc(20px * var(--k))) max(20px, calc(30px * var(--k))); background: var(--ink); color: var(--paper); font: 700 max(13px, calc(16px * var(--k))) var(--sarabun); letter-spacing: 0.2em; transition: background-color 0.4s var(--ease); } .rahman_wrap .rahman_co_cta span { transition: transform 0.5s var(--ease); } .rahman_wrap .rahman_co_cta:hover, .rahman_wrap .rahman_co_cta:focus-visible { background: var(--red); } .rahman_wrap .rahman_co_cta:hover span { transform: translateX(6px); } .rahman_wrap .rahman_m .rahman_colophon { margin: 0 calc(var(--g) * -1); padding: 0 var(--g); } .rahman_wrap .rahman_m .rahman_co_in { display: grid; grid-template-columns: 1fr; row-gap: 40px; margin: 0; padding: 40px 16px 56px; } .rahman_wrap .rahman_m .rahman_co_k { margin-bottom: 14px; font-size: 11px; } .rahman_wrap .rahman_m .rahman_co_studio .rahman_co_k { margin-top: 16px; } .rahman_wrap .rahman_m .rahman_co_p { font-size: 16px; } .rahman_wrap .rahman_m .rahman_co_list { grid-template-columns: 1fr; gap: 14px; font-size: 14px; } .rahman_wrap .rahman_m .rahman_ee { width: 170px; } .rahman_wrap .rahman_m .rahman_co_cta_lead { margin-top: 26px; font-size: 24px; } .rahman_wrap .rahman_m .rahman_co_cta { margin-top: 14px; padding: 16px 22px; font-size: 14px; } @media (min-width: 700px) { .rahman_wrap .rahman_m .rahman_co_list { grid-template-columns: 1fr 1fr; } .rahman_wrap .rahman_m .rahman_co_in { padding: 48px 28px 64px; } } @media (max-width: 1099.98px) and (min-aspect-ratio: 1 / 1) { .rahman_wrap .rahman_m_pillars .rahman_pw_word { width: auto; height: 17svh; justify-self: center; } .rahman_wrap .rahman_m_pillars .rahman_pw_card { max-height: 56svh; } } /* The editor's canvas only: its elements carry data-ve-id, published pages don't. No script runs there, so the stage is scaled here (--k = width / 1920, as site.js sets it), the loader steps aside, the Motion Studio canvases show a still taken from the running page (stills.mjs) and the code section that runs the page is a thin strip, not a dark screen. The living rasters already show their image (.lv-fallback). ve-build.ts appends this to the site stylesheet. */ .rahman_wrap[data-ve-id] { --k: tan(atan2(100vw, 1920px)); --kp: min(var(--k), tan(atan2(100vh, 1080px))); --kx: calc((100vw - 1920px * var(--kp)) / 2); } .rahman_loader[data-ve-id] { display: none; } canvas.rahman_tofu[data-ve-id] { background: center / 100% 100% no-repeat; } canvas.rahman_character[data-ve-id] { background-image: url(/project-assets/rahman-baba-pashtunistan/still-character.webp); } canvas[data-ve-id][data-release$="mohmand.tofu-web.json"] { background-image: url(/project-assets/rahman-baba-pashtunistan/still-mohmand.webp); } canvas[data-ve-id][data-release$="pashtunwali.tofu-web.json"] { background-image: url(/project-assets/rahman-baba-pashtunistan/still-pashtunwali.webp); } canvas.rahman_pw_morph[data-ve-id] { background-image: url(/project-assets/rahman-baba-pashtunistan/still-pillars.webp); } /* The traced artwork (svg-life.js mounts it): the traced file, or the Figma raster where that one is transparent, fitted as the script fits it (meet for map and tree, slice for the rest). */ .rahman_svgm[data-ve-id] { background: center / cover no-repeat; } .rahman_svgm[data-ve-id][data-svg="map"] { height: 100%; background-image: url(/project-assets/rahman-baba-pashtunistan/map.webp); background-size: contain; } .rahman_svgm[data-ve-id][data-svg="tree"] { background-image: url(/project-assets/rahman-baba-pashtunistan/tree.webp); background-size: contain; } .rahman_svgm[data-ve-id][data-svg="fish"] { background-image: url(/project-assets/rahman-baba-pashtunistan/svg-fish.svg); } .rahman_svgm[data-ve-id][data-svg="seal"] { background-image: url(/project-assets/rahman-baba-pashtunistan/svg-seal.svg); } .rahman_svgm[data-ve-id][data-svg="qalam"] { background-image: url(/project-assets/rahman-baba-pashtunistan/svg-qalam.svg); } .rahman_svgm[data-ve-id][data-svg="emblem-circle"] { background-image: url(/project-assets/rahman-baba-pashtunistan/svg-emblem-circle.svg); } .rahman_svgm[data-ve-id][data-svg="tribe"] { background-image: url(/project-assets/rahman-baba-pashtunistan/svg-tribe.svg); } .rahman_svgm[data-ve-id][data-svg="legacy-1"] { background-image: url(/project-assets/rahman-baba-pashtunistan/svg-legacy-1.svg); } .rahman_svgm[data-ve-id][data-svg="legacy-2"] { background-image: url(/project-assets/rahman-baba-pashtunistan/svg-legacy-2.svg); } .rahman_svgm[data-ve-id][data-svg="legacy-3"] { background-image: url(/project-assets/rahman-baba-pashtunistan/svg-legacy-3.svg); } /* Born shows the part of its file in data-viewbox (280.3 226.4 495.8 560.5 of 1024). */ .rahman_svgm[data-ve-id][data-svg="born"] { background-image: url(/project-assets/rahman-baba-pashtunistan/svg-born.svg); background-size: 206.5% auto; background-position: 53.1% 48.8%; } /* Born / Tribe: the card opens on its own story (site.js shows 'root' at start). */ .rahman_bt_t[data-ve-id][data-v="root"], .rahman_bt_v[data-ve-id][data-v="root"] { opacity: 1; transform: none; filter: none; } /* The phone bar's name (site.js shows it once the hero's name has scrolled away). */ .rahman_m_bar_name[data-ve-id] { opacity: 1; transform: none; } /* The pillar's name and number roll through all twelve; the canvas shows the first. */ .rahman_pw_roll[data-ve-id]:not(:first-child) { visibility: hidden; } [data-ve-block-slot][data-section-id="rahman_live"] { height: 46px !important; min-height: 0; background: #f0f0e6; }