@charset "UTF-8";
/**
 * SCSS Abstracts: Core Orchestration File
 *
 * Purpose:
 * Central import file that orchestrates the loading order of
 * all design system abstracts. Manages dependencies and ensures
 * all utilities are available throughout the theme.
 *
 * What it contains:
 * Import statements for design system foundation files in
 * dependency order:
 * 1. _function.scss - Unit conversion & calculation functions
 * 2. _variables.scss - Design tokens & system variables
 * 3. _mixins.scss - Reusable media queries & layout utilities
 *
 * Design system relationships:
 * - This is the entry point for the abstracts cascade
 * - Consumed by: main.scss or root style entry point
 * - Creates: All design system tokens, functions, and mixins
 *   available globally
 *
 * Import order is CRITICAL:
 * - _function.scss must load first (provides rem(), em(), etc.)
 * - _variables.scss loads next (uses functions, provides tokens)
 * - _mixins.scss loads last (uses both functions and variables)
 *
 * Usage:
 * Import this file at the beginning of your main SCSS file:
 *   @import "abstracts/core";
 *   @import "components/buttons";
 *   @import "components/forms";
 *   etc.
 *
 * All design system dependencies then become available globally
 * for all component files.
 */
/**
 * SCSS Abstracts: Utility Functions for Unit Conversion
 *
 * Purpose:
 * Provides reusable SCSS functions for converting between CSS
 * units (px, rem, em, %), rounding decimals, calculating aspect
 * ratios, and resolving asset paths. Core to the design system's
 * fluid sizing and responsive calculations.
 *
 * What it provides:
 * - Unit conversion functions (rem, em, pxtopercent)
 * - Decimal rounding with multiple modes (round, ceil, floor)
 * - Asset path resolution (image, font, icon-font, assets)
 * - Aspect ratio calculations
 *
 * Design system relationships:
 * - Depends on: _variables.scss for $base font size
 * - Consumed by: _variables.scss for heading sizes,
 *   spacing tokens
 * - Consumed by: All SCSS files for responsive sizing
 * - Works with: _mixins.scss for dynamic calculations
 *
 * Usage:
 * Functions use $base (16px) and $decimal-value flag for
 * calculations. Import early in SCSS cascade. All conversions
 * are relative to 16px base font size.
 *
 * Global settings:
 * - $base: 16px (root font size baseline)
 * - $decimal-value: true (enable decimal rounding, set false to
 *   disable in _variables.scss)
 *
 * Example:
 *   font-size: rem(24px);     // 1.5rem
 *   line-height: em(20, 16);  // 1.25em
 *   width: percentage(1/3);   // 33.333%
 */
/**
 * Function: decimal-round
 * Rounds numbers to specified decimal places with configurable
 * rounding mode. Base for decimal-ceil() and decimal-floor().
 *
 * @param {number} $number - Number to round (must be unitless
 *   after math)
 * @param {number} $digits - Decimal places (0-based, unitless)
 * @param {string} $mode - Rounding mode: "round", "ceil", or
 *   "floor"
 *
 * @return {number} Rounded number with specified precision
 *
 * Example:
 *   decimal-round(1.5678, 2) // 1.57 (round)
 *   decimal-round(1.5, 2, ceil) // 1.50 (ceil)
 *   decimal-round(1.5999, 1, floor) // 1.5 (floor)
 */
/**
 * Function: decimal-ceil
 * Rounds number UP to specified decimal places.
 * Wrapper for decimal-round() with ceil mode.
 *
 * @param {number} $number - Number to round up
 * @param {number} $digits - Decimal places
 *
 * @return {number} Rounded number (ceiling)
 */
/**
 * Function: decimal-floor
 * Rounds number DOWN to specified decimal places.
 * Wrapper for decimal-round() with floor mode.
 *
 * @param {number} $number - Number to round down
 * @param {number} $digits - Decimal places
 *
 * @return {number} Rounded number (floor)
 */
/**
 * Function: rem
 * Converts pixels to REM units based on base font size (16px).
 * Applies decimal rounding when $decimal-value is true.
 * Most common unit conversion in the theme.
 *
 * @param {measurement} $target - Pixel value to convert
 * @param {measurement} $context - Context font size (defaults to
 *   $base 16px)
 *
 * @return {measurement} Value in REM units
 *
 * Example:
 *   font-size: rem(24px);   // 1.5rem
 *   padding: rem(20px);     // 1.25rem
 */
/**
 * Function: em
 * Converts pixels to EM units based on context font size (16px).
 * For relative sizing within specific contexts. Applies decimal
 * rounding when $decimal-value is true.
 *
 * @param {measurement} $target - Pixel value to convert
 * @param {measurement} $context - Context font size (defaults to
 *   $base 16px)
 *
 * @return {measurement} Value in EM units
 *
 * Example:
 *   line-height: em(20px);  // 1.25em
 */
/**
 * Function: pxtopercent
 * Converts pixels to percentage-based units for fluid sizing.
 * Used for calculating REM baseline percentages.
 *
 * @param {measurement} $target - Pixel value to convert
 * @param {measurement} $parent - Parent container size (defaults
 *   to $base 16px)
 *
 * @return {measurement} Value as percentage
 *
 * Example:
 *   font-size: pxtopercent(12px);  // 75%
 */
/**
 * Function: aspect-ratio
 * Calculates padding-bottom percentage for aspect-ratio-based
 * responsive images. Used with ::before pseudo-element padding
 * hack for older browser support.
 *
 * @param {number} $width - Image width (unitless ratio, e.g., 16
 *   for 16:9)
 * @param {number} $height - Image height (unitless ratio, e.g., 9
 *   for 16:9)
 *
 * @return {percentage} Padding-bottom value for aspect-ratio
 *   preservation
 *
 * Example:
 *   .video-wrapper::before {
 *     padding-bottom: aspect-ratio(16, 9);
 *   }
 */
/**
 * Function: assets
 * Builds URL path to theme assets with flexible filetype
 * directory structure. Base function for image(), font(), etc.
 *
 * @param {string} $filetype - Subdirectory name (images, fonts,
 *   etc.)
 * @param {string} $filename - Asset filename with extension
 *
 * @return {url} CSS url() with relative path
 *
 * Example:
 *   assets("images", "hero.jpg")
 *   // url(../images/hero.jpg)
 */
/**
 * Function: image
 * Builds URL path to image assets in images/ subdirectory.
 *
 * @param {string} $filename - Image filename with extension
 *
 * @return {url} CSS url() with relative path to images/
 *
 * Example:
 *   background-image: image("bg-hero.png");
 */
/**
 * Function: font
 * Builds URL path to font assets in fonts/ subdirectory.
 * Used in @font-face src declarations.
 *
 * @param {string} $filename - Font filename with extension
 *
 * @return {url} CSS url() with relative path to fonts/
 *
 * Example:
 *   src: font("poppins-regular.woff2");
 */
/**
 * Function: icon-font
 * Builds URL path to icon fonts in fonts/icons-fonts/
 * subdirectory. Specialized path for icon font assets.
 *
 * @param {string} $filename - Icon font filename with extension
 *
 * @return {url} CSS url() with relative path to fonts/icon-fonts/
 *
 * Example:
 *   src: icon-font("icons.woff2");
 */
/**
 * Function: ls
 * Converts letter-spacing values from thousandth units to EM.
 * Shorthand for converting design tool values (e.g., 1px on
 * 1000px base) to EM units.
 *
 * @param {number} $val - Letter-spacing value in thousandths
 *
 * @return {measurement} Letter-spacing value in EM units
 *
 * Example:
 *   letter-spacing: ls(2);  // (2 * 0.001) * 1em = 0.002em
 */
/**
 * SCSS Abstracts: Design System Variables
 *
 * Purpose:
 * Central repository for all design system tokens and
 * application-wide Sass variables. Defines the complete visual
 * language for the theme including typography, colors, spacing,
 * breakpoints, and component sizes.
 *
 * What it provides:
 * - Font families and sizes (Poppins, Goldman, icon fonts)
 * - Color palette (primary, secondary, natural, grayscale)
 * - Heading sizes and typography defaults
 * - Form element dimensions and styling tokens
 * - Container and grid spacing
 * - Responsive breakpoints (sm, md, lg, xl, xxl, xxxl, xxxxl)
 * - Asset paths for images and fonts
 *
 * Design system relationships:
 * - Consumed by: _mixins.scss, _function.scss, and all component
 *   files
 * - Complements: _function.scss for unit conversion (rem, em, %)
 * - Complements: _mixins.scss for responsive utilities using
 *   breakpoint map
 *
 * Usage:
 * Import early in the cascade before other abstracts. All
 * component files reference these tokens for consistency.
 * All variables use !default flag to allow overrides.
 */
/**
 * Note: Decimal value rounding in rem/em functions can be
 * disabled in _function.scss by setting $decimal-value: false
 */
/**
 * SCSS Abstracts: Responsive Media Query & Utility Mixins
 *
 * Purpose:
 * Provides reusable mixins for responsive design, media queries,
 * typography utilities, layout patterns, and component styling.
 * Simplifies common SCSS patterns across the theme.
 *
 * What it provides:
 * - Responsive breakpoint mixins (respond-above, respond-below,
 *   respond-between)
 * - Device-specific media queries (mobile, mobile-portrait,
 *   mobile-landscape, mini-laptop, firefox)
 * - Typography utilities (rem-baseline, icon fonts, placeholders)
 * - Layout helpers (flex-center, picture images, image fitting)
 * - Custom styling (scroll bars, container spacing, row gutters)
 * - All heading levels selector
 *
 * Design system relationships:
 * - Depends on: _variables.scss ($breakpoints map, $icon-family,
 *   colors, spacing)
 * - Depends on: _function.scss (rem() function for conversions)
 * - Consumed by: All component files for responsive design
 *
 * Usage:
 * Mixins use $breakpoints map from variables. Include in
 * selectors with @include directive. All mixins accept @content
 * blocks for custom rule generation.
 *
 * Example:
 *   @include respond-above(lg) { color: blue; }
 *   @include flex-center { gap: 1rem; }
 */
/**
 * Mixin: respond-above
 * Mobile-first breakpoint query for min-width media queries.
 * Uses breakpoint map from _variables.scss.
 *
 * @param {string} $breakpoint - Breakpoint key (sm, md, lg, xl,
 *   xxl, xxxl, xxxxl)
 *
 * Example:
 *   @include respond-above(md) { font-size: 18px; }
 *   Compiles to: @media (min-width: 768px) { ... }
 */
/**
 * Mixin: respond-below
 * Reverse breakpoint query for max-width media queries.
 * Targets viewport smaller than specified breakpoint.
 *
 * @param {string} $breakpoint - Breakpoint key (sm, md, lg, xl,
 *   xxl, xxxl, xxxxl)
 *
 * Example:
 *   @include respond-below(md) { font-size: 14px; }
 *   Compiles to: @media (max-width: 767px) { ... }
 */
/**
 * Mixin: respond-between
 * Range-based media query targeting viewports between two
 * breakpoints (inclusive lower, exclusive upper).
 *
 * @param {string} $lower - Lower breakpoint key (sm, md, lg, xl,
 *   xxl, xxxl, xxxxl)
 * @param {string} $upper - Upper breakpoint key (must be larger
 *   than $lower)
 *
 * Example:
 *   @include respond-between(md, lg) { font-size: 16px; }
 *   Compiles to: @media (min-width: 768px) and
 *   (max-width: 991px) { ... }
 */
/**
 * Mixin: rem-baseline
 * Sets font-size as a percentage of the base font size for
 * REM unit calculations.
 *
 * @param {number} $value - Font size value (defaults to $base
 *   16px)
 *
 * @return Sets font-size as percentage for browser REM baseline
 */
/**
 * Mixin: mini-laptop
 * Media query for mini laptop screens (1100px+ width, 800px-
 * height limit). Used for specific resolution optimization.
 *
 * Example:
 *   @include mini-laptop { line-height: 1.2; }
 */
/**
 * Mixin: mobile
 * Media query for mobile devices in both portrait and landscape
 * orientations.
 *
 * @return Targets width <= 720px portrait OR width <= 992px
 *   landscape
 */
/**
 * Mixin: mobile-portrait
 * Media query for mobile devices in portrait orientation.
 * Targets width <= 720px.
 */
/**
 * Mixin: mobile-landscape
 * Media query for mobile devices in landscape orientation.
 * Targets width <= 992px.
 */
/**
 * Mixin: firefox
 * Browser-specific targeting for Mozilla Firefox using
 * @document rule.
 */
/**
 * Mixin: row-space
 * Creates horizontal spacing/gutters for grid row layouts by
 * applying negative margins to the row and positive padding to
 * cells.
 *
 * @param {number} $value - Gutter size in pixels
 *
 * Example:
 *   @include row-space(30) {}
 */
/**
 * Mixin: placeholder
 * Cross-browser placeholder text styling. Targets multiple
 * placeholder pseudo-elements for broad compatibility.
 *
 * Example:
 *   input { @include placeholder { color: gray; } }
 */
/**
 * Mixin: icon
 * Generates icon font content using the custom icon font family.
 * Resets font styling for icon display.
 *
 * @param {string} $content - Unicode character code or escape
 *   sequence for icon character (e.g., "\67")
 *
 * Example:
 *   .icon-mail { @include icon("\67"); }
 */
/**
 * Mixin: custom-scroll
 * Styles webkit scrollbars with rounded appearance and custom
 * color. Fallback for inactive window state.
 *
 * @param {color} $color1 - Scrollbar thumb color (defaults to
 *   $secondary-100 green)
 *
 * Example:
 *   .scrollable { @include custom-scroll(#5fd6ff); }
 */
/**
 * Mixin: container-space
 * Applies centered container padding and responsive child
 * padding for asymmetric container layouts.
 *
 * @param {string} $position - Direction: "left" or "right"
 * @param {measurement} $value - Total width including gutters
 *   (defaults to container-width + gutters)
 *
 * @error Throws if $position is not "left" or "right"
 *
 * Example:
 *   .asymmetric-left { @include container-space(left); }
 */
/**
 * Mixin: hgroup
 * Generates styles for all heading levels (h1–h6) and heading
 * utility classes (.h1–.h6) simultaneously.
 *
 * Example:
 *   @include hgroup { font-weight: bold; }
 *   // Outputs: h1, .h1, h2, .h2, ... { font-weight: bold; }
 */
/**
 * Mixin: pictureImg
 * Container layout for responsive picture elements with
 * object-fit image sizing. Makes images scale to fill container.
 *
 * @param {position} $pos - Picture element position (defaults to
 *   absolute)
 *
 * Example:
 *   .hero { @include pictureImg(); }
 */
/**
 * Mixin: imgFit
 * Applies object-fit sizing to img elements within a container.
 * Fills and crops to maintain aspect ratio.
 *
 * @param {position} $pos - Image position (defaults to absolute)
 *
 * Example:
 *   .thumbnail { @include imgFit(relative); }
 */
/**
 * Mixin: flex-center
 * Shorthand for centered flexbox layout with centered content
 * both horizontally and vertically.
 *
 * Example:
 *   .badge { @include flex-center { width: 24px; height: 24px; } }
 *   // Outputs: display: flex; align-items: center;
 *   //          justify-content: center;
 */
.logo-mosaic {
  padding-block: 6rem;
}
.logo-mosaic__headline {
  padding-block-end: 4rem;
  text-align: center;
}
.logo-mosaic__grid {
  display: block;
}
@media (min-width: 576px) {
  .logo-mosaic__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-inline-size: 1160px;
    margin-inline: auto;
    padding-inline: 1rem;
  }
}
@media (width >= 1270px) {
  .logo-mosaic__grid {
    grid-template-columns: 1fr 0.8fr 1.2fr;
    grid-template-rows: repeat(2, auto);
  }
}
.logo-mosaic__grid-item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem;
  border-radius: 1rem;
  margin-block-end: 1rem;
}
@media (min-width: 576px) {
  .logo-mosaic__grid-item {
    margin-bottom: 0;
  }
}
.logo-mosaic__grid-item--1 {
  grid-column: span 2;
  background-color: #081d4d;
  color: #fff;
}
@media (width >= 1270px) {
  .logo-mosaic__grid-item--1 {
    grid-area: 1/1/3/2;
  }
}
.logo-mosaic__grid-item--1 .logo-mosaic__grid-item-title {
  margin: 1rem 0;
}
.logo-mosaic__grid-item--1 img {
  max-width: 215px;
}
.logo-mosaic__grid-item--2 {
  grid-column: span 1;
  background-color: #1565c0;
  color: #fff;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 576px) {
  .logo-mosaic__grid-item--2 {
    gap: 3rem;
  }
}
@media (width >= 1270px) {
  .logo-mosaic__grid-item--2 {
    grid-area: 1/2/2/4;
    flex-direction: row;
  }
}
.logo-mosaic__grid-item--2 p {
  padding-block-end: 1rem;
}
.logo-mosaic__grid-item--2 .logo-mosaic__grid-item-title {
  margin-block-end: 0;
}
.logo-mosaic__grid-item--2 img {
  padding-block-start: 1rem;
}
@media (width >= 1270px) {
  .logo-mosaic__grid-item--2 img {
    padding-block-start: 0;
  }
}
.logo-mosaic__grid-item--3 {
  grid-column: span 1;
  padding-block-start: 2.1875rem;
  background-color: #5fd6ff;
}
@media (width >= 1270px) {
  .logo-mosaic__grid-item--3 {
    grid-area: 2/2/3/3;
  }
}
.logo-mosaic__grid-item--3 .logo-mosaic__grid-item-title,
.logo-mosaic__grid-item--3 .logo-mosaic__grid-item-description {
  color: #081d4d;
  text-align: start;
}
.logo-mosaic__grid-item--3 .logo-mosaic__grid-item-image {
  margin-block-start: auto;
  margin-inline: auto;
}
.logo-mosaic__grid-item--4 {
  grid-column: span 2;
  background-color: #9838d5;
}
@media (width >= 1270px) {
  .logo-mosaic__grid-item--4 {
    grid-area: 2/3/3/4;
  }
}
.logo-mosaic__grid-item--4 .logo-mosaic__grid-item-description {
  color: #fff;
}
.logo-mosaic__grid-item--4 .logo-mosaic__grid-item-image {
  margin-inline-start: auto;
}
.logo-mosaic__grid-item-title {
  font-size: clamp(2.5rem, 6vw, 3.375rem);
  font-weight: 700;
  line-height: 1;
  margin-block-end: 0.75rem;
  color: #fff;
}
.logo-mosaic__grid-item-description {
  font-size: clamp(1rem, 3vw, 1.5rem);
}
.logo-mosaic__grid-item-image {
  margin-block-start: auto;
}