:root{--article-main-metas-background:var(--primary-color);--article-main-metas-color:#ffffff;--article-main-metas-display:block;--article-main-metas-padding:1.5rem 1rem 1.5rem 2rem;--background:#000000;--blog-post-category-title-color:var(--primary-color);--blog-post-display-description:block;--border-color:#f0f0f0;--button-animation:none;--button-background:var(--primary-color);--button-background-disabled:#d8d8d8;--button-background-hover:var(--primary-color-highlight);--button-border-color:var(--primary-color);--button-border-color-over-image:var(--primary-color);--button-border-radius:0.625rem;--button-border-width:0;--button-box-shadow:none;--button-color:#000000;--button-color-hover:var(--button-color);--button-color-over-image:#000000;--button-font-family:var(--font-family-primary);--button-font-size:1.125rem;--button-font-weight:600;--button-height:3rem;--button-padding:0 1.5rem;--button-text-transform:none;--carousel-additional-items-bottom:5rem;--carousel-additional-items-display:flex;--carousel-additional-items-margin:0 auto;--carousel-background-overlay:rgba(0, 0, 0, 0.3);--carousel-background-video-height:100%;--carousel-background-video-width:auto;--carousel-border-radius:0;--carousel-box-shadow:none;--carousel-bullets-background:#222222;--carousel-bullets-button-border:none;--carousel-bullets-image-justify-content:flex-start;--carousel-bullets-text-color:#f3f3f3;--carousel-content-display:block;--carousel-content-padding:20.875rem 6.25rem 0 6.25rem;--carousel-display-arrows:none;--carousel-first-padding-top:0;--carousel-item-min-height:46.0625rem;--carousel-item-padding-top:0;--carousel-max-width:unset;--carousel-outer-display-mobile:block;--carousel-padding:0;--carousel-point-active-background:var(--primary-color);--carousel-point-background:#cccccc;--carousel-point-bottom:1rem;--carousel-point-height:0.6875rem;--carousel-point-position:absolute;--carousel-point-radius:50%;--carousel-point-transform:none;--carousel-point-width:0.6875rem;--category-part-background:inherit;--category-part-explore-display:none;--category-part-text-color:inherit;--checkbox-transform:none;--chromecast-background:rgba(30, 38, 43, 0.9);--component-max-width:90rem;--component-padding-left-right:6.25rem;--component-padding-top-bottom:2rem;--cookie-bar-background:#000000;--error-color:#c71228;--font-family-primary:roboto;--font-family-secondary:oswald;--font-size-large:1.125rem;--font-weight-large:normal;--footer-background:transparent;--footer-color:var(--text-color);--form-box-shadow:0 0.125rem 1.875rem 0 rgba(0, 0, 0, 0.2);--form-field-background:#ffffff;--form-field-border-color:rgba(34, 31, 45, 0.23);--form-field-color:#000000;--form-field-disabled-background:#e6e6e6;--form-field-label-padding:0;--form-field-radius:0.625rem;--form-field-transform:none;--form-radius:1.5625rem;--graphics-arrow-down-image:url("/_cdn/assets/web/graphics/nav_angle_arrow_down.svg");--graphics-avatar-active-image:url("/_cdn/assets/web/graphics/icon_avatar_black.png");--graphics-avatar-image:url("/_cdn/assets/web/graphics/icon_avatar_white.png");--graphics-button-shadow-left:url("/_cdn/assets/web/graphics/nav_shadow_arrow_left.png");--graphics-button-shadow-right:url("/_cdn/assets/web/graphics/nav_shadow_arrow_right.png");--graphics-spinner-image:url("/_cdn/assets/web/graphics/icon_spinner.png");--h1-font-family:var(--font-family-secondary);--h1-font-size:2rem;--h1-font-weight:700;--h1-line-height:3rem;--h1-margin:1rem 0;--h2-font-family:var(--font-family-secondary);--h2-font-size:1.75rem;--h2-font-weight:700;--h2-line-height:2.25rem;--h2-margin:0.75rem 0;--h3-font-family:var(--font-family-secondary);--h3-font-size:1.25rem;--h3-font-weight:700;--h3-line-height:1.5rem;--h3-margin:0.5rem 0;--image-box-shadow:none;--image-overlay-background:rgba(0, 0, 0, 0.3);--line-height-large:1.75rem;--link-color:var(--primary-color);--link-text-decoration:underline;--menu-background:rgba(17, 17, 17, 0.85);--menu-color:#ffffff;--menu-color-active:var(--primary-color);--menu-dropdown-background:#f7f7f7;--menu-dropdown-background-active:var(--primary-color);--menu-dropdown-color:#000000;--menu-dropdown-color-active:var(--text-color-over-primary);--menu-font-family:var(--font-family-primary);--menu-height:6rem;--menu-text-transform:none;--menu-text-weight:normal;--meta-name-font-weight:normal;--meta-value-font-weight:normal;--meta-value-opacity:0.75;--mobile-carousel-content-padding:1.75rem 1rem 0 1rem;--mobile-carousel-item-min-height:10rem;--mobile-carousel-item-padding-top:56.25%;--mobile-component-padding-left-right:1rem;--mobile-component-padding-top-bottom:1.25rem;--mobile-h1-font-size:1.5rem;--mobile-h1-line-height:2rem;--mobile-h1-margin:0.75rem 0;--mobile-h2-font-size:1.25rem;--mobile-h2-line-height:1.75rem;--mobile-h2-margin:0.5rem 0;--mobile-h3-font-size:1rem;--mobile-h3-line-height:1.25rem;--mobile-h3-margin:0.25rem 0;--mobile-menu-background:var(--menu-background);--mobile-menu-dropdown-background:#222222;--mobile-menu-dropdown-color:#ffffff;--mobile-menu-height:4rem;--mobile-p-line-height:1.4375rem;--modal-background:#ffffff;--modal-border-radius:1rem;--modal-overlay-background:rgba(48, 48, 48, 0.75);--modal-text-color:#000000;--no-image-background:#000000;--p-line-height:1.6875rem;--poster-mark-display:block;--poster-mark-transform:none;--primary-color:#00281d;--primary-color-highlight:#002218;--progress-bar-background:#f7f7f7;--progress-bar-bottom:1rem;--progress-bar-height:0.635rem;--progress-bar-radius:0.3125rem;--search-background:#222222;--search-bar-background:#222222;--search-bar-color:#ffffff;--search-bar-placeholder-color:rgba(255, 255, 255, 0.5);--search-color:#ffffff;--secondary-button-background:transparent;--secondary-button-background-hover:var(--primary-color-highlight);--secondary-button-border-color:var(--primary-color);--secondary-button-border-color-hover:var(--primary-color-highlight);--secondary-button-border-color-over-image:var(--primary-color);--secondary-button-border-width:0.125rem;--secondary-button-color:#f3f3f3;--secondary-button-color-hover:#000000;--secondary-button-color-over-image:#ffffff;--secondary-button-color-over-image-hover:#000000;--stepper-bullets-display:none;--subscription-item-width-desktop:30%;--switch-green:#4ec45d;--switch-red:#f83745;--text-carousel-background:#cccccc;--text-color:#f3f3f3;--text-color-over-image:#ffffff;--text-color-over-image-hover:#dad5d5;--text-color-over-primary:#000000;--text-component-background:var(--background);--text-disabled-color:#777777;--toggle-button-background:transparent;--toggle-button-background-active:var(--primary-color);--toggle-button-border-radius:2rem;--toggle-button-color:var(--text-color);--toggle-button-color-active:var(--text-color-over-primary);--video-poster-box-shadow:2px 4px 10px 0 rgba(0, 0, 0, 0.25);--video-poster-caption-align:left;--video-poster-progress-display:block;--video-poster-radius:0.3125rem;--video-poster-title-display:none;}@font-face {    font-family: 'roboto';    src: url('../fonts/roboto/300_normal.woff2');    font-weight: 300;    font-style: normal;    font-display: swap;}                        @font-face {    font-family: 'roboto';    src: url('../fonts/roboto/500_normal.woff2');    font-weight: 500;    font-style: normal;    font-display: swap;}                        @font-face {    font-family: 'roboto';    src: url('../fonts/roboto/700_normal.woff2');    font-weight: 700;    font-style: normal;    font-display: swap;}@font-face {    font-family: 'oswald';    src: url('../fonts/oswald/300_normal.ttf');    font-weight: 300;    font-style: normal;    font-display: swap;}                        @font-face {    font-family: 'oswald';    src: url('../fonts/oswald/400_normal.ttf');    font-weight: 400;    font-style: normal;    font-display: swap;}                        @font-face {    font-family: 'oswald';    src: url('../fonts/oswald/500_normal.ttf');    font-weight: 500;    font-style: normal;    font-display: swap;}                        @font-face {    font-family: 'oswald';    src: url('../fonts/oswald/600_normal.ttf');    font-weight: 600;    font-style: normal;    font-display: swap;}                        @font-face {    font-family: 'oswald';    src: url('../fonts/oswald/700_normal.ttf');    font-weight: 700;    font-style: normal;    font-display: swap;}/* =====================================================================   UVNL CUSTOM CSS - HENRIKSPORCIKS.STUDIO IN COLLABORATION WITH MOMKAI   ===================================================================== *//* =====================================================================   Custom Font-face (Loaded from Webflow CDN)   ===================================================================== *//* -------------------------------   Oldschool Grotesk W   ------------------------------- */@font-face {  font-family: "Oldschool Grotesk W";  src: url("https://cdn.prod.website-files.com/5f4d048d464f4d63f4f86031/6362c1135beb70346b147c84_OldschoolGrotesk_W-Regular.woff2") format("woff2");  font-weight: 400;  font-style: normal;  font-display: swap;}@font-face {  font-family: "Oldschool Grotesk W";  src: url("https://cdn.prod.website-files.com/5f4d048d464f4d63f4f86031/6362c1137b7ef4d812dd9333_OldschoolGrotesk_W-Bold.woff2") format("woff2");  font-weight: 700;  font-style: normal;  font-display: swap;}/* -------------------------------   Oldschool Grotesk Condensed W   ------------------------------- */@font-face {  font-family: "Oldschool Grotesk Condensed W";  src: url("https://cdn.prod.website-files.com/5f4d048d464f4d63f4f86031/6362c113da857908c37ff7b7_OldschoolGroteskCondensed_W-Bold.woff2") format("woff2");  font-weight: 700;  font-style: normal;  font-display: swap;}/* -------------------------------   Tiempos Text    ------------------------------- */@font-face {  font-family: "Tiempos Text";  src: url("https://cdn.prod.website-files.com/5f4d048d464f4d63f4f86031/6362c0fd700abf20f1ecf93e_tiempos-text-regular.woff2") format("woff2");  font-weight: 400;  font-style: normal;  font-display: swap;}@font-face {  font-family: "Tiempos Text";  src: url("https://cdn.prod.website-files.com/5f4d048d464f4d63f4f86031/6362c0fdc761f6a252643c6e_tiempos-text-regular-italic.woff2") format("woff2");  font-weight: 400;  font-style: italic;  font-display: swap;}@font-face {  font-family: "Tiempos Text";  src: url("https://cdn.prod.website-files.com/5f4d048d464f4d63f4f86031/6362c0fd89808a4afbed396b_tiempos-text-bold-italic.woff2") format("woff2");  font-weight: 700;  font-style: italic;  font-display: swap;}/* =====================================================================   VARIABLES   ===================================================================== *//* -------------------------------------------------    UVNL Specific Brand Variables   ------------------------------------------------- */html:root, body:root {  /* brand colors */  --color-bg:#00281D;  --color-bg-2:#004B36;  --color-nav-footer:#001F16;   --color-text:#FFFFFF;  --color-text-weak:#F3F3F3; --color-text-dark:#001F16;  --color-brand:#D6ACFF;  --color-border:rgba(255,255,255,.12);  --color-focus:#D6ACFF;   /* type families */  --font-ui: "Oldschool Grotesk W",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;  --font-serif: "Tiempos Text",ui-serif,Georgia,serif;  --font-condensed: "Oldschool Grotesk Condensed W","Oldschool Grotesk W",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;  /* type sizes/lines */  --display-size:3.75rem;  --display-lh:3.75rem;   /* 60/60 */  --h2-size:1.75rem;       --h2-lh:2rem;           /* 28/32 */  --video-title-size:.9375rem; --video-title-lh:1.25rem; /* 15/20 */  --body-size:1.0625rem;   --body-lh:1.75rem;      /* 17/28 */       /* weight targets (rounded by browsers if needed) */  --wght-body:430; --wght-strong:560; --wght-bold:700;  /* links */  --link-thickness:.1em; --link-offset:.11em;    /* Pricing Variables */  --plan-bg: transparent;  --plan-bg-active: var(--color-bg-2);  --plan-border: rgba(255,255,255,.5);  --plan-border-active: var(--color-brand);  --plan-title-color: #FFF;  --plan-ribbon-bg: var(--color-brand);  --plan-ribbon-color: var(--color-bg);  /* Spinner Graphic */ --spinner-size: 1.75rem;                 /* overall size */  --rot-duration: 6.75s;                    /* full rotation time */  --spinner-plus-only: url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 29">\<path d="M19.2723 10.8217V0H11.6059V6.52167C11.6059 8.89861 9.713 10.8336 7.38233 10.8336H0.887207V17.4389H15.8414V18.2989C13.5107 18.2989 11.6178 20.2339 11.6178 22.6108V28.2725H19.2841V17.4389H30.0029V10.8336H19.2841L19.2723 10.8217Z" fill="%23D6ACFF"/></svg>');}/* -------------------------------------------------    2) Replacing UvNL Variables   ------------------------------------------------- */html:root, body:root {  /* global colors */  --background: var(--color-bg);  --text-color: var(--color-text);  --link-color: var(--color-brand);  --border-color: var(--color-border);  /* branding */  --primary-color:#00281d;               --primary-color-highlight:#002218;  /* menus / footer */  --menu-background: var(--color-nav-footer);  --menu-color: var(--color-text);  --footer-background: transparent;  --footer-color: var(--text-color);  --menu-color-active: var(--color-brand);  --footer-background: var(--color-nav-footer);  --cookie-bar-background: var(--color-nav-footer);    --search-bar-background: var(--color-nav-footer);      --search-background: var(--color-bg);  /* fonts */  --font-family-primary: var(--font-ui);  --font-family-secondary: var(--font-condensed);  /* headings (so AP’s default h1–h3 pick your families/sizes) */  --h1-font-family: var(--font-family-secondary);  --h1-font-size: var(--display-size);  --h1-line-height: var(--display-lh);  --h1-font-weight: 700;  --h2-font-family: var(--font-family-primary);  --h2-font-size: var(--h2-size);  --h2-line-height: var(--h2-lh);  --h2-font-weight: 700;  --h3-font-family: var(--font-family-primary);  --h3-font-size: 1.25rem;  --h3-line-height: 1.5rem;  --h3-font-weight: 700;  /* body / p */  --p-line-height: var(--body-lh);  --line-height-large: var(--body-lh); /* where AP uses it *//* -------------------------------------------------     BUTTON TOKENS (UVNL Defaults)     ------------------------------------------------- */  /* Font family & sizing */  --button-font-family: "Oldschool Grotesk Condensed W",sans-serif;  --button-font-size: 1.25rem;          /* matches design */  --button-font-weight: 700;            /* bold CTA */  --button-height: auto;                /* let padding drive height */  --button-padding: 0.625rem 1.25rem;   /* 10px 20px */  /* Radius & border */  --button-border-radius: 100vw;         /* pill shape */  --button-border-width: unset;  --button-border-color: transparent;          /* default white border */  /* Primary button colors */  --button-background: var(--color-brand);   /* purple fill */  --button-color: #003D2C;                   /* dark text on brand bg */  --button-background-hover: #c093e6;        /* hover state */  --button-color-hover: #003D2C;  /* Secondary button colors */  --secondary-button-background: transparent;  --secondary-button-color: #FFF;  --secondary-button-border-color: #FFF;  --secondary-button-border-width: 1.5px;  /* Misc effects */  --button-box-shadow: none;  --button-text-transform: none;        /* keep natural casing */  /* Menu */  --menu-dropdown-background: #004B36;  --menu-dropdown-background-active: #004B36;  --menu-dropdown-color: #fff;  --menu-dropdown-color-active: var(--color-brand);  --graphics-arrow-down-image: url(https://cdn.prod.website-files.com/5f4d048d464f4d63f4f86031/68c3f9a6812faf35c62463fc_Uvnl_Icon_Chevron_Downward_01.svg);    /* carousels / posters */  --carousel-background-overlay: rgba(0,0,0,0); /* cleaner hero */  --carousel-border-radius: 0;  --carousel-box-shadow: none;  --video-poster-radius: var(--radius-small);  --video-poster-box-shadow: 2px 4px 10px 0 rgba(0,0,0,.25);    --carousel-point-background: rgba(255,255,255,0.3) !important; /* inactive */  --carousel-point-active-background: #FFF !important;  --video-poster-title-display: block;    --progress-bar-background: rgba(0, 0, 0, 0.5);    --progress-bar-bottom: 0;    --progress-bar-height: 0.5rem;    --progress-bar-radius: 100vw;      /* forms (optional) */  --form-field-radius: .625rem;  --form-radius: 1.5625rem;    --switch-green: #00D197;  --switch-red:   #EE5245;    /* radius  */ --radius-small: 0.3125rem;  /* 5px */  --radius-main: 1.5rem;      /* 24px */  --radius-round: 100vw;      /* pill/full circle */   /* Global Padding */  --component-padding-top-bottom: 5rem;    /* Article meta data sidebar */--article-main-metas-background: var(--color-bg-2);    --article-main-metas-padding: 2rem;  /* toggle button pills */    --toggle-button-background: transparent;  --toggle-button-background-active: rgba(255,255,255,.25);  --toggle-button-color: #FFF;  --toggle-button-color-active: #FFF;  --toggle-button-border-radius: 100vw;       /* full round */  --toggle-button-border-width: .125rem;  --toggle-button-border-color: rgba(255,255,255,.5);  --toggle-button-padding-top: .4rem;          --toggle-button-padding-bottom: .35rem;  --toggle-button-padding-x: 1rem;  --toggle-button-font-size: .9375rem;        /* ~15px */  --toggle-button-font-weight: 300;  --toggle-button-font-family: var(--font-ui); /* -------------------------------------------------   Mobile Tokens (design variables for <=768px)   ------------------------------------------------- */   --mobile-body-font-size: 1.125rem;  --mobile-p-line-height: 1.4375rem;    --mobile-h1-font-size: 2.25rem;    --mobile-h1-line-height: 2.25rem;  --mobile-h1-margin: 0.75rem 0;    --mobile-h2-font-size: 1.25rem;   --mobile-h2-line-height: 1.5rem;  --mobile-h2-margin: 0.5rem 0;      --mobile-h3-font-size: 1.25rem;      --mobile-h3-line-height: 1.5rem;  --mobile-h3-margin: 0.25rem 0;    --mobile-component-padding-left-right: 1rem;    --mobile-carousel-content-padding: 1.75rem 1rem 0 1rem;  --mobile-carousel-item-min-height: 10rem;  --mobile-carousel-item-padding-top: 56.25%;  --mobile-component-padding-left-right: 1rem;  --mobile-component-padding-top-bottom: 1.25rem;  --mobile-menu-background: var(--menu-background);  --mobile-menu-dropdown-background: var(--color-brand);  --mobile-menu-dropdown-color: var(--color-bg);  --mobile-menu-height: 4rem;   }/* -------------------------------------------------   Apply mobile sizes below 768px   ------------------------------------------------- */@media (max-width: 768px) {  :root {    /* map mobile → existing global tokens */    --display-size: var(--mobile-h1-font-size);    --display-lh: var(--mobile-h1-line-height);    --h2-size: var(--mobile-h2-font-size);    --h2-lh: var(--mobile-h2-line-height);    /* if you have explicit h3 tokens, set them too */    --h3-font-size: var(--mobile-h3-font-size);    --h3-line-height: var(--mobile-h3-line-height);    --video-title-size: var(--mobile-video-title-size);    --video-title-lh: var(--mobile-video-title-lh);    --body-size: var(--mobile-body-font-size);    --body-lh: var(--mobile-p-line-height);            --menu-color-active: var(--color-bg2);         --progress-bar-height: 0.3rem;  }}/* =====================================================================   Global Base Styling Resets   ===================================================================== */html, body { background: var(--color-bg); color: var(--color-text); }body, [class*="ap-"] { font-family: var(--font-ui) !important; }/* links */a { color: var(--color-brand);    text-decoration: underline;    text-decoration-thickness: var(--link-thickness);    text-underline-offset: var(--link-offset);    text-decoration-skip-ink: auto; }a:hover { opacity:.9; }/* forcing all headings to be uppercase */body .direct-html.direct-html--h1,body .direct-html.direct-html--h1 h1,body .article-header__title h1{  text-transform: uppercase !important;}/* =====================================================================   Navigation Menu — Custom UvNL Overrides   ===================================================================== *//* -------------------------------------------------   Navigation Header   ------------------------------------------------- *//* the navigation header */body header.app-menu,body .app-menu {  background: var(--color-nav-footer) !important;  color: var(--color-text) !important;}/* =========================================   Audience Player logo sizing – hard override   ========================================= *//* Desktop menu logo */body .anchor-link__logo.anchor-link__logo--menu {  max-width: 7rem !important;  max-height: calc(var(--menu-height) - 3.5rem) !important;}/* Mobile menu logo */body .anchor-link__logo.anchor-link__logo--menu-mobile {  max-width: 6rem !important; /* smaller for mobile */}/* ===== Reset AP's underline everywhere first (then re-add our custom) ===== */body header .menu-items app-menu-item a::before {  content: none !important;}/* -------------------------------------------------   Menu items (exclude the pill login button)   ------------------------------------------------- *//* Make anchors positioning contexts, remove native underline */body header .menu-items app-menu-item:not(.menu-items__logout) a {  position: relative !important;  text-decoration: none !important;}/* Base text style */body header .menu-items app-menu-item:not(.menu-items__logout) a .app-menu-item__text p {  margin: 0 !important;  color: #FFF !important;  font-family: "Oldschool Grotesk W",sans-serif !important;  font-size: 1.125rem !important;  font-style: normal !important;  font-weight: 560 !important;  line-height: 2.5rem !important;  transition: color .2s ease;}/* Hover text color */body header .menu-items app-menu-item:not(.menu-items__logout) a:hover .app-menu-item__text p {  color: var(--color-brand) !important;}/* Active text color */body header .menu-items app-menu-item:not(.menu-items__logout) a.active .app-menu-item__text p,body header .menu-items app-menu-item:not(.menu-items__logout).active a .app-menu-item__text p {  color: var(--color-brand) !important;}/* Our underline: active */body header .menu-items app-menu-item:not(.menu-items__logout) a.active::before {  content: "" !important;  position: absolute !important;  left: 0 !important; right: 0 !important;  top: calc(100% - .25rem) !important;  height: .15rem !important;  width: 100% !important;  background: var(--color-brand) !important;  border-radius: 0 !important;}/* Our underline: hover */body header .menu-items app-menu-item:not(.menu-items__logout) a:hover::before {  content: "" !important;  position: absolute !important;  left: 0 !important; right: 0 !important;  top: calc(100% - .25rem) !important;  height: .15rem !important; width: 100% !important;  background: var(--color-brand) !important;}/* Keyboard focus (accessible) */body header .menu-items app-menu-item:not(.menu-items__logout) a:focus-visible {  outline: 2px solid var(--color-brand);  outline-offset: 2px;}/* -------------------------------------------------   Custom Login/Logout Menu Item (pill button)   ------------------------------------------------- *//* Desktop pill only (exclude the mobile anchor with .is-mobile) */body .menu-items__logout a:not(.is-mobile) .app-menu-item__text {  display: inline-flex !important;  justify-content: center !important;  align-items: center !important;  padding: var(--button-padding) !important;  border-radius: var(--button-border-radius) !important;  border: var(--secondary-button-border-width) solid var(--secondary-button-border-color) !important;  background: var(--secondary-button-background) !important;  text-transform: var(--button-text-transform) !important;}/* Desktop pill text */body .menu-items__logout a:not(.is-mobile) .app-menu-item__text p {  margin: 0 !important;  font-family: var(--button-font-family) !important;  font-size: var(--button-font-size) !important;  font-weight: var(--button-font-weight) !important;  line-height: 1.75rem !important;  color: var(--secondary-button-color) !important;}/* Never draw the custom underline on the pill anchor */body .menu-items__logout a::before { content: none !important; }/* (Optional) If AP applies hover/focus bg on the mobile anchor and you want to reset it: */body .menu-items__logout a.is-mobile .app-menu-item__text,body .menu-items__logout a.is-mobile .app-menu-item__text p {  background: transparent !important;  border: 0 !important;  color: inherit !important; /* keep menu color on mobile */}/* ============================================   Mobile Menu Styling Overrides   ============================================ *//* Base text in mobile menu */.app-menu-item a.is-mobile .app-menu-item__text p {  color: var(--color-bg) !important;  text-decoration: none !important;  font-weight: 560 !important;}/* Active state in mobile menu (neutral color + underline) */.app-menu-item a.is-mobile.active .app-menu-item__text p {  color: var(--color-bg-2) !important;       /* ← fixed syntax */  text-decoration: underline !important;     /* underline instead of colored bar */  text-underline-offset: 0.25rem !important;}/* -------------------------------------------------   Header buttons (CTA) keep using button tokens   ------------------------------------------------- */body .button-wrapper .app-button__content p {  margin: 0 !important;  font-family: var(--button-font-family) !important;  font-size: var(--button-font-size) !important;  font-weight: var(--button-font-weight) !important;  line-height: var(--button-height, 1.75rem) !important;  color: var(--button-color) !important;  text-transform: var(--button-text-transform, none) !important;}.button, .app-button { line-height: 1.75rem !important; }@media (max-width: 768px) {  /* Ensure the mobile dropdown items are big/tappable */  body header.app-menu .menu-items__dropdown--mobile a.is-mobile {    display: flex !important;    align-items: center !important;    height: 4rem !important;    padding: 1rem !important;    text-decoration: none !important;  }  /* Also make the login dropdown item full height/tappable */  body header.app-menu .menu-items__login-dropdown a.is-mobile {    display: flex !important;    align-items: center !important;    height: 4rem !important;    padding: 1rem !important;  }   /* Active state — keep neutral color + underline (not brand) */  body header.app-menu .menu-items__dropdown--mobile a.is-mobile.active .app-menu-item__text p,  body header.app-menu .menu-items__footer-links a.active {    color: var(--color-bg-2) !important;    text-decoration: underline !important;    text-underline-offset: 0.2em !important;  }  /* Mobile login item: never look like a pill */  body header.app-menu .menu-items__login-dropdown .menu-items__logout a.is-mobile .app-menu-item__text,  body header.app-menu .menu-items__login-dropdown .menu-items__logout a.is-mobile .app-menu-item__text p {    /*background: transparent !important;    border: 0 !important;    color: var(--color-text-dark, #001F16) !important;*/  }  /* Footer links list hidden on mobile */  body header.app-menu .menu-items__footer-links, .menu-items__footer-links {   display: none !important;  }}/* ============================================   Mobile Menu Adjustments   ============================================ */@media (max-width: 768px) {  /* Each menu item stacked + centered */  .menu-items__dropdown--mobile app-menu-item {    display: flex !important;    flex-direction: column !important;    justify-content: center !important;  }  /* Dropdown container: full height flex column */  .menu-items__dropdown--mobile.active {    display: flex !important;    flex-direction: column !important;    height: 100% !important;    min-height: 100vh !important; /* make sure it fills screen */  } /* Direct chain: app-menu-item > a.is-mobile > span.app-menu-item__text > p */app-menu-item.menu-items__pages a.is-mobile > .app-menu-item__text > p {          font-size: 1.5rem !important;        font-weight: 600 !important;}app-menu-item.menu-items__pages a.active {  color: unset !important;  text-decoration: underline !important;  text-decoration-thickness: 0.1rem !important;  text-underline-offset: 0.3rem !important;}.menu-items__dropdown--mobile .menu-items__login-dropdown .menu-items__dropdown-arrow {  height: 1.75rem !important;  width: 1.75rem !important;  background-size: contain !important;  /* of 'cover' of bijv. '1rem auto' */}.menu-items__dropdown--mobile .menu-items__login-dropdown app-menu-item p {  font-size: 1.5rem !important;  font-weight: 600 !important;}.menu-items__dropdown--mobile   .menu-items__login-dropdown.menu-items__login-dropdown--opened ul li {  font-size: 1rem !important;}.menu-items__dropdown--mobile .menu-items__login-dropdown .menu-items__logout {  align-items: flex-start !important; /* alignment left */}.anchor-link__logo {padding-left: 2rem;}}/* ============================================================   Dropdown Menu Styling   ============================================================ *//* Active dropdown item */app-menu-item-dropdown.active {  height: 100% !important;  margin-top: 0 !important;  margin-bottom: 0 !important;  align-items: center !important;  padding: 0 .75rem !important;}/* Active icons (user + chevron) */app-menu-item-dropdown.active .menu-items__user-icon,app-menu-item-dropdown.active .fa.fa-chevron-down,app-menu-item-dropdown.active .app-menu-item__text p {  color: #D6ACFF !important; /* brand accent */}body header app-menu-item.active .app-menu-item__text p {  color: #D6ACFF !important;}/* Trigger spacing */.menu-items__dropdown-trigger {  gap: .5rem !important;}/* Dropdown list */.menu-items__list {  top: calc(var(--menu-height)) !important;  border-bottom-left-radius: .75rem !important;  border-bottom-right-radius: .75rem !important;  overflow: hidden;}app-menu-item-dropdown.active .fa.fa-chevron-down {        padding-bottom: .4rem !important;}.menu-items__dropdown-trigger app-menu-item {    text-transform: unset !important;}.menu-items__list li {  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;}.menu-items__list li:last-of-type {  border-bottom: none !important;}/* =====================================================================   Footer   ===================================================================== *//* -------------------------------------------------   Footer Adjustments   ------------------------------------------------- *//* Dim AP logo to blend better with background */body .footer .anchor-link__logo {  opacity: 0.5 !important;}/* Kill old padding/misalignment */body .footer .footer-row .footer-element__footer-components .info-group {  display: flex !important;  align-items: center !important;  padding: 0 !important;  margin: 0 !important;}/* Parent flex handles centering + spacing */body .footer .footer-row .footer-element__footer-components {  display: flex !important;  justify-content: center !important;  align-items: center !important;  flex-wrap: wrap !important;  gap: var(--space-2, 1rem) !important;  /* use design token if present */  text-align: center !important;}.footer {    background: var(--color-nav-footer) !important;  padding: unset !important;}body .footer .footer-row {  padding: 1.5rem 0 !important; /* increased vertical padding */}/* Reset link typography quirks */body .social-links__link {  font-size: unset !important;  font-weight: unset !important;  letter-spacing: unset !important;}/* Make icons scale with font size instead of fixed box */body .social-links__icon {  width: auto !important;  height: auto !important;  font-size: 1.75rem !important; /* ~28px, tuned for design */}/* -------------------------------------------------   Mobile Adjustments (applied below 768px)   ------------------------------------------------- */@media screen and (max-width: 768px) {  /* Footer: stack vertically */  body .footer .footer-row .footer-element__footer-components {    margin-top: 2rem !important;    flex-direction: column !important;  }}/* =====================================================================   HOME CAROUSEL   ===================================================================== *//* Inline carousel label (replaces AP badge) */.carousel-label {  background: transparent !important;  color: var(--color-text) !important;  display: inline-flex !important;  align-items: center;  justify-content: center;  padding: .25rem .75rem !important;  gap: .25rem !important;  border-radius: .25rem !important;  border: 1px solid #FFF !important;  box-shadow: none !important;  width: auto !important;  height: auto !important;  position: static !important;  top: auto !important;  left: auto !important;  font-family: var(--font-ui);  font-size: 0.9375rem;   /* ~15px */  font-weight: 560;  line-height: 1.25rem;  text-transform: none;}/* Mobile Carousel — Hide Label add padding to points*/@media (max-width: 768px) {  .carousel-label {    display: none !important;  }    .nguCarouselPoint {     padding-top: 1.25rem !important;  }  }/* =====================================================================   HOME USP SECTION   ===================================================================== *//* -------------------------------------------------    Custom Backgrounds   ------------------------------------------------- *//* Style the parent .app-text-part only if it contains .identifier-test */.app-text-part:has(.bullet-cta) {  background-color: var(--color-bg-2) !important;}/* Style the parent .app-text-part only if it contains .identifier-test */.app-carousel-bullets-part:has(.id-usp) {  background-color: transparent !important;}/* =====================================================================   Video Preview Card Components   ===================================================================== *//* -------------------------------------------------    Video Posters   ------------------------------------------------- */body .app-video-poster__name{  color:#F3F3F3 !important;  font-family:"Oldschool Grotesk W",sans-serif !important;  font-size:.9375rem !important; line-height:1.25rem !important;  font-style:normal !important; font-weight:400 !important;  text-transform:none !important; letter-spacing:0 !important;}@media (max-width: 768px) {body .app-video-poster__name {    font-size: .75rem !important;    line-height: 1rem !important;    height: 2.1rem !important;  }}.nguCarouselPoint {  padding-bottom: 1rem !important;}/* ============================================================   Paginator — Custom Styling   ============================================================ *//* Force all page numbers to fixed width */.paginator__page-number {  width: 2rem !important;  text-align: center !important; /* keep numbers centered */}/* Round current page into a pill/circle */.paginator__current-page {  border-radius: 100vw !important; /* perfectly round shape */}/* =====================================================================   PRICING PAGE + MODAL   ===================================================================== *//* -------------------------------------------------   Shared base for both   ------------------------------------------------- *//* Cards */body .subscription-item__container {  border-radius: var(--radius-main) !important;  border: 1px solid var(--plan-border) !important;  padding: 3rem 1rem 1rem !important;  box-shadow: none !important;  background: var(--plan-bg) !important;  overflow: hidden !important;  background-clip: border-box !important;         /* seam fix */  -webkit-background-clip: border-box !important; /* Safari */}body .subscription-item__container.active {  border-radius: var(--radius-main) !important;  border: 3px solid var(--plan-border-active) !important;  background: var(--plan-bg-active) !important;  overflow: hidden !important;  background-clip: border-box !important;  -webkit-background-clip: border-box !important;}/* Ribbon geometry + colors via tokens */body .subscription-ribbon__content {  position: absolute !important;  top: -6rem !important;  left: -7.5rem !important;  width: 15rem !important;  padding-top: .5rem !important;  padding-bottom: 6rem !important;  border: none !important;  opacity: 1 !important;  text-align: center;  background: var(--plan-ribbon-bg) !important;  color: var(--plan-ribbon-color) !important;}/* Ribbon text */body .subscription-ribbon__content {  font-family: "Oldschool Grotesk Condensed W","Oldschool Grotesk W",sans-serif !important;  font-size: .9375rem !important;  line-height: 1.25rem !important;  font-weight: 700 !important;  text-transform: uppercase !important;  letter-spacing: .02em !important;}/* Ribbon inner reset */body .subscription-ribbon__content--text-wrapper {  position: static !important;  top: auto !important;  left: auto !important;  width: auto !important;}/* Plan title */body .subscription-title {  color: var(--plan-title-color) !important;  font-family: "Oldschool Grotesk W",sans-serif !important;  font-size: 1.75rem !important;  line-height: 2rem !important;  font-weight: 400 !important;  margin: 0 !important;}/* Cart icon swap */.fa-cart-plus::before { content: "\f218" !important; }/* -------------------------------------------------   Modal overrides (colors only)   ------------------------------------------------- *//* Modal token overrides */.app-modal__page-container .pricing {  --plan-bg: #FFF;  --plan-bg-active: #FFF;             /* container paints white in modal */  --plan-border: rgba(0,61,44,.35);  --plan-border-active: #003D2C;  --plan-title-color: #003D2C;  --plan-ribbon-bg: #003D2C;  --plan-ribbon-color: #FFF;}/* Modal text color overrides */.app-modal__page-container .pricing .u-body,.app-modal__page-container .pricing p {  color: #003D2C !important;}.app-modal__page-container .subscription__content li {  color: #003D2C !important;}.app-modal__content { color: #003D2C !important; }/* Ensure inner wrappers don’t add their own bg in modal */.app-modal__page-container .subscription-item__container .subscriptions-item,.app-modal__page-container .subscription-item__container .subscriptions-item-wrapper {  background: transparent !important;}/* ============================================================   OTHER MODALS — Custom Styling   ============================================================ *//* Option container */.payment-options .payment-option {  border-radius: 0.25rem !important;  border: 1.5px solid rgba(0, 61, 44, 0.5) !important;  padding: 0.625rem 1rem !important; /* top/bottom .625, left/right 1rem */  background-color: transparent !important; /* keep original background */}/* Header text — remove underline */.payment-options .payment-option__header__text {  text-decoration: none !important;  cursor: pointer !important; /* keep clickable */}/* ============================================================   Modal Headings — Correct Font + Transform   ============================================================ */body .app-modal__page-container .direct-html.direct-html--h1 {  text-transform: none !important;       /* disable all-caps */  font-family: "Oldschool Grotesk W" !important;  font-weight: 700 !important;           /* optional: enforce bold */  letter-spacing: normal !important;     /* reset tracking if needed */  font-size: 1.5rem !important;}/* -------------------------------------------------   Subscription Content List Items — UVNL override   ------------------------------------------------- */body .subscription__content li {  color: #FFF !important;  font-family: "Oldschool Grotesk W",sans-serif !important;  font-size: 0.9375rem !important;   /* 15px */  font-style: normal !important;  font-weight: 400 !important;  line-height: 1.5rem !important;    /* 160% */  margin-bottom: 0.5rem !important;  /* optional spacing for readability */}/* =====================================================================   Profile Pages logged in   ===================================================================== *//* Remove borders from toggles */app-switch label,app-switch label::before {  border: none !important;      transition: all .25s ease-in-out !important;  top: .25rem !important;}/* Kill inline background on the user details page */.user-details-page {  background-image: none !important;}/* User details form container */app-user-details-form {  background: #004B36 !important;  /* brand green background */  color: #fff !important;           /* force white text */  display: block;                   /* ensures it behaves like a block container */}@media screen and (max-width: 768px){app-user-details-form {  border-radius: var(--form-radius) !important; /* gives radius back */  }  .app-user-details .direct-html.direct-html--h1 p {  text-align: center !important;}}/* =====================================================================   VIDEO DETAIL PAGE (Article Page in CMS)   ===================================================================== *//* -------------------------------------------------   Video detail page — gradient overlay   ------------------------------------------------- */body .article-header.has-background::before {  content: "" !important;  position: absolute !important;  inset: 0 !important; /* top/right/bottom/left = 0 */  z-index: 1 !important; /* sits above bg image, below content */  background:    /* very subtle noise to dither the gradient */   /* repeating-linear-gradient(      45deg,      rgba(255,255,255,.015) 0 2px,      rgba(0,0,0,.015)       2px 4px    ),     smooth multi-stop gradient */    linear-gradient(      to bottom,      rgba(0, 40, 29, 0.00) 0%,      rgba(0, 40, 29, 0.06) 50,      rgba(0, 40, 29, 0.18) 55%,      rgba(0, 40, 29, 0.36) 65%,      rgba(0, 40, 29, 0.58) 70%,      rgba(0, 40, 29, 0.78) 75%,      rgba(0, 40, 29, 0.92) 80%,      #00281D               90%    ) !important;  background-blend-mode: normal, normal; /* keep colors true */}/* Upgrade path (modern browsers): interpolate in OKLab for an even smoother ramp */@supports (background: linear-gradient(in oklab, #000, #fff)) {  .article-header.has-background::before {    background:            linear-gradient(        in oklab,                          color(from #00281D srgb r g b / 0)   0%,        color(from #00281D srgb r g b / .06) 30%,        color(from #00281D srgb r g b / .18) 45%,        color(from #00281D srgb r g b / .36) 50%,        color(from #00281D srgb r g b / .60) 60%,        color(from #00281D srgb r g b / .85) 70%,        #00281D                             90%      ) !important;  }}.article-header.has-background{  min-height:40rem !important;}body .article-header__content{  z-index: 2 !important; /* sits above bg gradient, content top*/  }.article-film-content { margin-top: -6rem !important;position: relative !important;z-index: 2 !important; /* sits above bg gradient, content top*/} /* Unset for mobile */@media screen and (max-width: 768px) {    .article-film-content {        margin-top: unset !important;    }body .product-payment-tabs__payment .app-button {  width: 100% !important;}          .article-header.has-background{min-height: unset !important;}  meta__value {  font-size: .875rem;  }}@media screen and (max-width: 768px) {  .article-film-content__main-metas[_ngcontent-ng-c2944606260] {    margin: 2rem 0;  }  .articles-recommended {    width: 100%;  }  .article-film-content__main-metas {        margin: 2rem 0 !important;}}/* Social share metas */.article-metas__social-share {  padding-bottom: 0rem !important; }/* Ratings buttons block */.article-header__buttons--ratings {  align-items: flex-start;  padding-top: .5rem;}.app-progress-bar__percentage {   background: #00D197 !important;}.app-video-poster__image {  overflow: hidden;  border-radius: var(--video-poster-radius);}/* Remove rounded corners from progress elements inside */.app-video-poster__image .app-progress-bar,.app-video-poster__image .app-progress-bar__percentage {  border-radius: 0 !important;}.article-header__buttons--play-button app-progress-bar {  width: 100% !important;  margin: 0.75rem 0 0 !important;}/* Hide number of video's on overview pages */.app-user-films-part__amount { display: none !important;} /* -------------------------------------------------   Toggle buttons for Video Tags   ------------------------------------------------- *//* Base chip — always has a border, but transparent by default */body .toggle-button {  display: inline-flex !important;  align-items: center !important;  justify-content: center !important;  padding: var(--toggle-button-padding-top) var(--toggle-button-padding-x)           var(--toggle-button-padding-bottom) var(--toggle-button-padding-x) !important;  border: var(--toggle-button-border-width) solid transparent !important; /* 👈 default transparent */  border-radius: var(--toggle-button-border-radius) !important;  background: var(--toggle-button-background) !important;  color: var(--toggle-button-color) !important;  font-family: var(--toggle-button-font-family) !important;  font-size: var(--toggle-button-font-size) !important;  font-weight: var(--toggle-button-font-weight) !important;  line-height: 1.25rem !important;  text-decoration: none !important;  cursor: pointer !important;  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;}/* Hover (non-active) */body .toggle-button:hover:not(.active):not([aria-pressed="true"]) {  background: transparent !important;  border-color: var(--toggle-button-border-color) !important; /* 👈 just changes color */}/* Active / pressed */body .toggle-button.active,body .toggle-button[aria-pressed="true"] {  background: var(--toggle-button-background-active) !important;  color: var(--toggle-button-color-active) !important;  border-color: var(--toggle-button-border-color) !important;}/* Focus visible (keyboard) */body .toggle-button:focus-visible {  outline: 2px solid var(--color-brand) !important;  outline-offset: 2px !important;}/* Small tap feedback */body .toggle-button:active { transform: translateY(1px); }/* -------------------------------------------------   Article Metas — Border radius   ------------------------------------------------- *//* Container */body .article-metas {  border-radius: 1.5rem !important; /* match UVNL rounded sections */  overflow: hidden;                 /* ensures bg + radius clip correctly */}/* Typography */body .meta__name {  font-family: var(--font-ui) !important; /* switch to non condensed type */  font-weight: 600 !important; /* bold */ }/* social share */body .article-metas .social-share-button {  background: transparent !important;  color: var(--color-text) !important;         }/* Media Player Meta — Force Uppercase Titles */.media-player__meta .meta__value-title {  text-transform: uppercase !important;}/* -------------------------------------------------   Additional button styling   ------------------------------------------------- *//*  Product Payment Tabs — Button Overrides  */body .product-payment-tabs__payment .app-button {  width: auto ;  background: #FFF !important;  color: var(--button-color) !important;}/*  Play Button — Button Overrides  */body .player-button .app-button {  padding: 0.625rem 1.75rem !important; /* more horizontal padding */  color: var(--button-color) !important;}/* -------------------------------------------------   Mobile — Payment Subscription Button Adjustment (≤768px)   ------------------------------------------------- */@media (max-width: 768px) {  /* Payment tab buttons: don’t stretch full width */  body .product-payment-tabs__payment .app-button {    width: 100% !important;  }    /* Payment container: reset margins for tighter fit */  .product-payment-tabs__payment {    margin: 0 !important;  }}/* ============================================================   Custom List Styles   ============================================================ *//* Reset AP list styles inside subscription content */body .subscription__content ul,body .subscription__content li, ul {  list-style: none !important;  border: none !important;  margin: 0 !important;  padding: 0 !important;}/* UVNL+ feature list typography */body .subscription__content li {  position: relative !important;  padding-left: 2rem !important;        /* space for bullet */  margin: 0 0 0.75rem !important;  color: #FFF !important;  font-family: "Oldschool Grotesk W",sans-serif !important;  line-height: 1.75rem !important;  font-weight: 430 !important;  text-align: left !important;}/* Custom SVG bullet */body .subscription__content li::before {  content: "" !important;  position: absolute !important;  left: 0 !important;  top: 0.25rem !important;  width: 1.125rem !important;  height: 1.125rem !important;  background: url("https://cdn.prod.website-files.com/689d8df8b55846c29c54eac4/68aebfd81ad07439c2f6bde7_Union.svg") no-repeat center / contain !important;  border: none !important; /* explicitly kill AP's border-based checkmark */  transform: none !important;}body .app-carousel-bullets-part {  padding: 0 !important;}/* ============================================================   Utility Classes to use inline Styling   ============================================================ *//* Display (Hero / H1) — condensed */.u-display,h1.u-display {  color: #FFF;  font-family: "Oldschool Grotesk Condensed W","Oldschool Grotesk W",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;  font-size: var(--display-size);  line-height: var(--display-lh);  font-weight: 700;  text-transform: uppercase;  letter-spacing: .02em;  text-transform: uppercase; /* all caps enforced */  max-width: 25ch; /* limit line length */}/* H2 — regular grotesk */.u-h2,h2.u-h2 {  color: #FFF;  font-family: ,"Oldschool Grotesk W",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;  font-size: var(--h2-size);  line-height: var(--h2-lh);  font-weight: 700;}/* Video card titles */.u-video-title {  color: var(--color-text-weak);  font-family:     "Oldschool Grotesk W",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;  font-size: var(--video-title-size);  line-height: var(--video-title-lh);  font-weight: 560;}/* Body copy*/ .u-body,p {  font-family: "Oldschool Grotesk W",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;  line-height: var(--body-lh);}/* Alignment helper */.u-center { text-align: center; max-width: none; /* unset line length limit if centered title*/}/* 8) Custom feature list using your SVG bullet *//* Kill default bullets */.u-feature-list,.u-feature-list li {  list-style: none !important;}.u-feature-list li::marker {  content: none !important;  /* ensures no default circle is painted */}.u-feature-list{list-style:none;margin:0 0 2rem;padding:0;}.u-feature-list li{  position:relative; padding-left:2rem; margin:0 0 .75rem;  color:#FFF; font-family:"Oldschool Grotesk W",sans-serif;  font-size:1.25rem; line-height:1.75rem; font-weight:430;}.u-feature-list--svg-bg li::before{  content:""; position:absolute; left:0; top:.25rem; width:1.125rem; height:1.125rem;  background:url("https://cdn.prod.website-files.com/5f4d048d464f4d63f4f86031/68af2c7affdb4015d9ef4eeb_Uvnl_Icon_Check_Circle_01.svg") no-repeat center / contain;}/* Text part container override */body .component__container app-text-part__container {  background: var(--color-bg-2) !important;}@media (max-width: 768px) {.u-feature-list li{  position:relative; padding-left:2rem; margin:0 0 .75rem;  color:#FFF; font-family:"Oldschool Grotesk W",sans-serif;  font-size:1rem; line-height:1.5rem; font-weight:430;}}/* -------------------------------------------------   Mobile overrides (≤768px)   ------------------------------------------------- */@media (max-width: 768px) {  .u-display,  h1.u-display {    font-size: 2.25rem;    line-height: 2.25rem;  }  .u-h2,  h2.u-h2 {    font-size: var(--mobile-h2-font-size);    line-height: var(--mobile-h2-line-height);    margin: var(--mobile-h2-margin);  }  .u-video-title {    font-size: var(--mobile-video-title-size);    line-height: var(--mobile-video-title-lh);  }/* Apply to most <p>, but exclude specific contexts */  .u-body,  p:not(.menu-items__dropdown--mobile.active p):not(.direct-html.direct-html--h2 p):not(.app-video-poster__name.active):not(.direct-html.direct-html--h1 p) {    font-size: var(--mobile-body-font-size) !important;    line-height: var(--mobile-p-line-height) !important;  }  body .article-header__title h1 {    font-size: 1.5rem !important;    line-height: var(--mobile-h1-line-height, 2rem); /* a bit more breathing room */    font-weight: 700;    font-style: normal;    text-transform: uppercase;    margin: var(--mobile-h1-margin, 0.75rem 0); /* keeps spacing consistent */  }  .direct-html--h2 p,  body h2.u-h2 {    font-size: var(--mobile-h2-font-size) !important;    line-height: var(--mobile-h2-line-height) !important;    margin: var(--mobile-h2-margin) !important;    font-weight: 700; /* ensure heading weight stays intact */  } }/* ============================================================   CUSTOM BLOCKS USING INLINE CLASS DEFINITION & SOURCE CODE   ============================================================ *//* -------------------------------------------------   CUSTOM CTA BLOCK WITH IMAGE + BUTTONS (reusable)   ------------------------------------------------- *//* CTA block wrapper with background image */.uvnl-cta-block {  position: relative;  display: flex;  justify-content: center;  align-items: flex-end;  /* NEW — maintain background image proportions */  aspect-ratio: 16 / 9;  height: auto;            /* allow ratio to define height */  min-height: unset;       /* override old value */  margin-bottom: 4rem;  padding-bottom: 4rem;  text-align: center;background-image: url("https://cdn.prod.website-files.com/5f4d048d464f4d63f4f86031/68af2c7f1b46958cde3e71cd_Uvnl_AudiencePlayer_Cta_Visual_01.png");  background-size: contain;                 background-position: center;  background-repeat: no-repeat;  border-radius: var(--radius-md, 1.5rem);  overflow: hidden;}/* Remove container padding only if it wraps our CTA block */body .component__container:has(.uvnl-cta-block) {  padding: unset !important;}/* Inner content sits above overlay */.uvnl-cta-inner {  position: relative;  z-index: 2;  width: 100%;  max-width: 40rem;  display: flex;  flex-direction: column;  justify-content: flex-end;  align-items: center;  gap: 1.5rem;}/* Button row */.uvnl-cta-buttons {  display: flex;  flex-wrap: wrap;  justify-content: center;  gap: 1rem;}/* Base button styling (reusable) */.uvnl-btn {  display: inline-flex;  justify-content: center;  align-items: center;  gap: 0.25rem;  padding: 0.625rem 1.25rem;  border-radius: 5rem;  font-family: "Oldschool Grotesk Condensed W","Oldschool Grotesk W",sans-serif;  font-size: 1.25rem;  font-weight: 700;  line-height: 1.75rem;  text-decoration: none !important;       /* enforce no underline */  cursor: pointer;  transition: transform .15s ease, background-color .2s ease, border-color .2s ease, color .2s ease;}.uvnl-btn:hover { transform: translateY(-1px); }.uvnl-btn:active { transform: translateY(0); }/* Accessible focus */.uvnl-btn:focus-visible {  outline: 2px solid var(--color-brand, #D6ACFF);  outline-offset: 2px;  text-decoration: none;}/* Primary (filled) */.uvnl-btn--primary {  background: #D6ACFF;  color: #003D2C !important;  border: none;}.uvnl-btn--primary:hover { background: #c093e6; }/* Secondary (outlined, always white text) */.uvnl-btn--secondary {  background: transparent;  color: #FFF !important;  border: 1.5px solid rgba(255,255,255,.5);}.uvnl-btn--secondary:hover {  border-color: #FFF;  color: #FFF !important;                 /* stay white */}/* -------------------------------------------------   In between Adjustments just for ratio for section (applied below 1200px)   ------------------------------------------------- */@media screen and (max-width: 1200px) and (min-width: 769px) {  .uvnl-cta-block {    aspect-ratio: 16 / 11;      /* more space for buttons */  }}/* -------------------------------------------------   Mobile Adjustments (applied below 768px)   ------------------------------------------------- */@media screen and (max-width: 768px) {  /* CTA buttons: stack vertically, stretch full width */  .uvnl-cta-buttons {    flex-direction: column !important;    width: 100% !important;  }  .uvnl-cta-buttons .uvnl-btn {    width: 100% !important;    justify-content: center !important;  }  /* CTA block: adjust padding for mobile */  .uvnl-cta-block {    padding: var(--mobile-component-padding-top-bottom)             var(--mobile-component-padding-left-right) !important;    padding-top: 1.25rem !important;    padding-right: 1rem !important;    padding-bottom: 1.25rem !important;    padding-left: 1rem !important;    background-image: url("https://cdn.prod.website-files.com/5f4d048d464f4d63f4f86031/68c1b4f6f4c9e5a15f598a6d_uvnl%2B_banner_mobile.png");    aspect-ratio: 3 / 4;   /* tweak until perfect */  }}/* -------------------------------------------------   UvNL Partner Section (4-up desktop, 2-up mobile)   ------------------------------------------------- */.uvnl-partners { margin: 0; padding: 0; }.uvnl-partners__title { text-align: center; margin: 0 0 2rem; }/* Tweakable gaps as CSS variables */.uvnl-partners__grid {  --row-gap: clamp(1rem, 2.5vw, 3rem);  --col-gap: clamp(1.25rem, 3vw, 3.5rem);  display: flex !important;  flex-wrap: wrap;  justify-content: center;               /* centers short last row */  row-gap: var(--row-gap);  column-gap: var(--col-gap);  margin: 0 !important;  padding: 0 !important;  list-style: none !important;}/* ✅ Hard guarantee: exactly 4 items per row on desktop   (available width minus 3 gaps, split into 4 columns) */.uvnl-partners__grid > li {  flex: 0 1 calc((100% - 3 * var(--col-gap)) / 4);  display: flex;  align-items: center;  justify-content: center;}/* Logos are responsive but won’t exceed their cell */.uvnl-partners__grid img {  max-width: min(100%, 220px);           /* cap so they don’t push to 3-across */  width: 100%;  height: auto;  display: block;  object-fit: contain;  opacity: .95;  transition: opacity .2s ease, transform .2s ease;}.uvnl-partners__grid img:hover { opacity: 1; transform: translateY(-1px); }/* ===== Tablet tweaks (optional) ===== */@media (max-width: 1024px) {  .uvnl-partners__grid img { max-width: min(100%, 200px); }}/* ===== Mobile: exactly 2 per row (centered last odd item) ===== */@media (max-width: 768px) {  .uvnl-partners__grid > li {    flex: 0 1 calc((100% - var(--col-gap)) / 2);  }  .uvnl-partners__grid img { max-width: min(100%, 180px); }}/* Belt-and-suspenders: kill any stray bullets/margins */.uvnl-partners__grid, .uvnl-partners__grid > li {  list-style: none !important;  margin: 0 !important;  padding: 0 !important;}/* ==============================================   UVNL Loader — plus-only, 2D spin with pulse pace   ============================================== *//* 1) Neutralize ALL existing animations AP might set */.loader-spinner,.loader-spinner * ,.loader-spinner::before,.loader-spinner::after{  animation: none !important;  -webkit-animation: none !important;}/* 2) Our sizing (AP centers with left/top calc; keep it) */.loader-spinner{  position: relative !important;  width: var(--spinner-size) !important;  aspect-ratio: 30 / 29;  height: auto !important;}/* 3) Draw the plus on ::before and apply our animation */.loader-spinner::before{  content: "" !important;  position: absolute !important;  inset: 0 !important;  background-image: var(--spinner-plus-only) !important;  background-repeat: no-repeat !important;  background-position: center !important;  background-size: contain !important;  transform-origin: 50% 50%;  animation: uvnl-spin-pulse var(--rot-duration) infinite !important;}/* Replace uvnl-spin-pulse with the l7-style animation */@keyframes uvnl-spin-pulse {  from { transform: rotate(0turn); }  to   { transform: rotate(1turn); }  /* 1 full turn = 360deg */}/* Apply it */.loader-spinner::after {  animation: uvnl-spin-pulse 1s infinite linear !important;}/* 5) Respect reduced motion */@media (prefers-reduced-motion: reduce){  .loader-spinner::before { animation-duration: 3s !important; }}