/* ==========================================================================
   Design System Variables — Celero Capital
   Extracted from Figma: Celero Capital Website (Taylerd System)

   Breakpoints (Webflow defaults):
     Desktop:           992px+   (default — no media query)
     Tablet:            ≤ 991px
     Mobile Horizontal: ≤ 767px
     Mobile Vertical:   ≤ 479px
   ========================================================================== */

:host {
  /* -----------------------------------------------------------------------
     PRIMITIVES — Raw size scale (px → rem, base 16px)
     These never change across breakpoints.
     ----------------------------------------------------------------------- */
  --primitive-0: 0rem;
  --primitive-2: 0.125rem;
  --primitive-4: 0.25rem;
  --primitive-8: 0.5rem;
  --primitive-12: 0.75rem;
  --primitive-14: 0.875rem;
  --primitive-16: 1rem;
  --primitive-18: 1.125rem;
  --primitive-20: 1.25rem;
  --primitive-22: 1.375rem;
  --primitive-24: 1.5rem;
  --primitive-28: 1.75rem;
  --primitive-32: 2rem;
  --primitive-36: 2.25rem;
  --primitive-40: 2.5rem;
  --primitive-48: 3rem;
  --primitive-56: 3.5rem;
  --primitive-64: 4rem;
  --primitive-72: 4.5rem;
  --primitive-80: 5rem;
  --primitive-88: 5.5rem;
  --primitive-96: 6rem;
  --primitive-104: 6.5rem;
  --primitive-112: 7rem;
  --primitive-120: 7.5rem;
  --primitive-128: 8rem;
  --primitive-136: 8.5rem;
  --primitive-144: 9rem;
  --primitive-152: 9.5rem;
  --primitive-256: 16rem;
  --primitive-9999: 624.9375rem;

  /* -----------------------------------------------------------------------
     COLORS — Base palette (constant, no mode switching)
     ----------------------------------------------------------------------- */

  /* Base */
  --color-base-brand: #FF7221;
  --color-base-brand-dark-text: #BF4B08;
  --color-base-brand-2: #153D62;
  --color-base-brand-dark-wip: #FF0000;
  --color-base-blue-grey: #C1CFDD;
  --color-base-beige: #F9F3EF;
  --color-base-white: #FFFFFF;
  --color-base-black: #191B1D;
  --color-base-black-50: rgba(25, 27, 29, 0.50);
  --color-base-black-75: rgba(25, 27, 29, 0.75);
  --color-base-beige-75: rgba(249, 243, 239, 0.75);
  --color-base-grey-100: #DDE6ED;
  --color-base-grey-200: #C1CFDD;
  --color-base-grey-400: #9EACB7;
  --color-base-grey-600: #7D8892;
  --color-base-grey-800: #5E656A;
  --color-base-grey-1000: #313539;
  --color-base-grey-dark: #313539;
  --color-base-error: #FD3C29;
  --color-base-success: #269F10;

  /* Base / brand-colors */
  --color-brand-blue-grey-75: #DAEDF5;
  --color-brand-orange-light-75: #FEE5D3;
  --color-brand-green-light-75: #D3F5D1;
  --color-brand-purple-light-75: #F1DAF7;
  --color-brand-blue: var(--color-base-brand-2);
  --color-brand-orange: #F98B4B;
  --color-brand-green: #2D7F5E;
  --color-brand-purple: #884199;

  /* Utility (pattern lines — not in Figma color system) */
  --color-pattern-line: #77A6BF;

  /* -----------------------------------------------------------------------
     COLORS — Semantic tokens (light/default-mode)
     Override in .mode-dark / .mode-mid for mode switching.
     ----------------------------------------------------------------------- */

  /* Text */
  --color-text-primary: var(--color-base-grey-dark);
  --color-text-primary-75: var(--color-base-black-75);
  --color-text-primary-subtle: var(--color-base-brand-2);
  --color-text-secondary: var(--color-base-beige);
  --color-text-inverse: var(--color-base-beige);
  --color-text-secondary-subtle: var(--color-base-black-75);
  --color-text-alternative: var(--color-base-brand-dark-wip);
  --color-text-brand: var(--color-base-brand-dark-text);
  --color-text-link: var(--color-base-brand-2);
  --color-text-error: var(--color-base-error);
  --color-text-success: var(--color-base-success);
  --color-text-focus: var(--color-base-success);

  /* Background */
  --color-bg-primary: var(--color-base-beige);
  --color-bg-secondary: var(--color-base-blue-grey);
  --color-bg-white: var(--color-base-beige);
  --color-bg-white-pure: var(--color-base-white);
  --color-bg-dark: var(--color-base-grey-dark);
  --color-bg-brand: var(--color-base-brand);
  --color-bg-alternative: var(--color-base-brand-2);

  /* Functions */
  --color-fn-error: var(--color-base-error);
  --color-fn-success: var(--color-base-success);
  --color-fn-focus: var(--color-base-success);

  /* Border */
  --color-border-brand: var(--color-base-brand-2);
  --color-border-inverse: var(--color-base-white);
  --color-border-light: var(--color-base-grey-100);
  --color-border-dark: var(--color-base-grey-600);

  /* Divider */
  --color-divider-light: var(--color-base-grey-100);
  --color-divider-dark: var(--color-base-grey-200);
  --color-divider-extra-dark: var(--color-base-grey-600);
  --color-divider-darken-light: rgba(25, 27, 29, 0.15);
  --color-divider-darken-dark: var(--color-base-black-50);

  /* Button */
  --color-btn-bg: var(--color-base-brand);
  --color-btn-text: var(--color-text-secondary);
  --color-btn-text-hover: var(--color-text-secondary);
  --color-btn-bg-hover: var(--color-base-brand-2);
  --color-btn-bg-secondary: var(--color-base-brand-dark-wip);
  --color-btn-text-secondary: var(--color-text-primary-subtle);
  --color-btn-text-secondary-hover: var(--color-text-primary);
  --color-btn-bg-secondary-hover: var(--color-base-blue-grey);
  --color-btn-bg-brand: var(--color-base-brand);
  --color-btn-bg-brand-hover: var(--color-base-brand-2);
  --color-btn-text-brand: var(--color-text-secondary);
  --color-btn-text-brand-hover: var(--color-text-secondary);
  --color-btn-outlined: var(--color-border-brand);
  --color-btn-text-outlined: var(--color-base-brand-2);
  --color-btn-text-outlined-hover: var(--color-base-brand-2);
  --color-btn-bg-outlined-hover: var(--color-border-brand);

  /* Icon */
  --color-icon-primary: var(--color-base-brand);
  --color-icon-secondary: var(--color-base-grey-800);
  --color-icon-inverse: var(--color-base-white);
  --color-icon-inverse-secondary: var(--color-base-grey-200);

  /* Input */
  --color-input-bg-default: var(--color-bg-primary);
  --color-input-bg-hover: var(--color-bg-primary);
  --color-input-bg-focused: var(--color-base-grey-100);
  --color-input-bg-error: var(--color-base-grey-100);
  --color-input-bg-disabled: var(--color-base-grey-100);
  --color-input-border-default: var(--color-divider-extra-dark);
  --color-input-border-hover: var(--color-border-brand);
  --color-input-border-focused: var(--color-border-brand);
  --color-input-border-error: var(--color-fn-error);
  --color-input-border-disabled: var(--color-base-grey-200);
  --color-input-text-label: var(--color-text-primary);
  --color-input-text-required: var(--color-text-primary-subtle);
  --color-input-text-label-hover: var(--color-text-primary);
  --color-input-text-label-focused: var(--color-text-brand);
  --color-input-text-label-error: var(--color-fn-error);
  --color-input-text-label-disabled: var(--color-base-grey-200);
  --color-input-text-input: var(--color-text-primary);
  --color-input-text-placeholder: var(--color-text-primary-subtle);
  --color-input-text-placeholder-disabled: var(--color-base-grey-400);
  --color-input-text-assistive: var(--color-text-primary-subtle);
  --color-input-text-assistive-error: var(--color-fn-error);
  --color-input-text-assistive-disabled: var(--color-base-grey-200);
  --color-input-bg-focus-ring: var(--color-base-brand-2);

  /* Overlay */
  --color-overlay-bg: var(--color-base-black-50);

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — Same across all breakpoints (sizes may override below)
     ----------------------------------------------------------------------- */
  --font-family-headlines: 'Acumin Pro', sans-serif;
  --font-family-headlines-alt: 'IvyPresto Headline', serif;
  --font-family-body: 'Acumin Pro', sans-serif;

  --font-size-display-1: 6rem;       /* 96px */
  --font-size-display-2: 4.5rem;     /* 72px */
  --font-size-h1: 3.5rem;            /* 56px */
  --font-size-h2: 3rem;              /* 48px */
  --font-size-h3: 2rem;              /* 32px */
  --font-size-h4: 1.5rem;            /* 24px */
  --font-size-h5: 1.125rem;          /* 18px */
  --font-size-body: 1rem;            /* 16px */
  --font-size-small: 0.875rem;       /* 14px */
  --font-size-caption: 0.75rem;      /* 12px */

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 120%;
  --line-height-normal: 140%;
  --line-height-relaxed: 160%;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.01em;

  /* -----------------------------------------------------------------------
     RADIUS — Same across all breakpoints
     ----------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm: var(--primitive-4);
  --radius-md: var(--primitive-8);
  --radius-lg: var(--primitive-16);
  --radius-xl: var(--primitive-24);
  --radius-full: 9999px;

  /* -----------------------------------------------------------------------
     MAX WIDTHS — Same across all breakpoints
     ----------------------------------------------------------------------- */
  --max-width-full: 187.5rem;        /* 3000px */
  --max-width-large: 125rem;         /* 2000px */
  --max-width-standard: 106.25rem;   /* 1700px */
  --max-width-small: 93.75rem;       /* 1500px */
}


/* ==========================================================================
   DESKTOP (default, 992px+)
   ========================================================================== */
:host {
  /* Spacing values */
  --spacing-0: var(--primitive-0);
  --spacing-5xs: var(--primitive-2);
  --spacing-4xs: var(--primitive-4);
  --spacing-xxxs: var(--primitive-8);
  --spacing-xxs: var(--primitive-12);
  --spacing-xs: var(--primitive-16);
  --spacing-sm: var(--primitive-20);
  --spacing-md: var(--primitive-24);
  --spacing-lg: var(--primitive-32);
  --spacing-xl: var(--primitive-40);
  --spacing-xl2: var(--primitive-48);
  --spacing-xxl: var(--primitive-56);
  --spacing-xxxl: var(--primitive-64);
  --spacing-4xl: var(--primitive-72);
  --spacing-5xl: var(--primitive-80);
  --spacing-huge: var(--primitive-96);
  --spacing-x-huge: var(--primitive-120);
  --spacing-xx-huge: var(--primitive-152);

  /* Button */
  --button-large-vertical: var(--primitive-8);
  --button-large-horizontal: var(--primitive-24);
  --button-regular-vertical: var(--primitive-8);
  --button-regular-horizontal: var(--primitive-16);
  --button-small-vertical: var(--primitive-8);
  --button-small-horizontal: var(--primitive-12);

  /* Global */
  --global-margin: var(--primitive-64);
  --global-margin-sm: var(--primitive-48);
  --global-margin-lg: var(--primitive-96);
  --global-gutter: var(--primitive-24);
  --global-gutter-lg: var(--primitive-32);

  /* Section */
  --section-x-small: var(--primitive-40);
  --section-small: var(--primitive-56);
  --section-medium: var(--primitive-72);
  --section-large: var(--primitive-96);
}


/* ==========================================================================
   TABLET (≤ 991px)
   Desktop & Tablet share the same spacing-values.
   Global and section values differ.
   ========================================================================== */
@media (max-width: 991px) {
  :host {
    /* Global */
    --global-margin: var(--primitive-48);
    --global-margin-sm: var(--primitive-32);
    --global-margin-lg: var(--primitive-56);

    /* Section */
    --section-x-small: var(--primitive-32);
    --section-small: var(--primitive-48);
    --section-medium: var(--primitive-64);
    --section-large: var(--primitive-80);
  }
}


/* ==========================================================================
   MOBILE HORIZONTAL (≤ 767px)
   Spacing values scale down significantly.
   ========================================================================== */
@media (max-width: 767px) {
  :host {
    /* Spacing values */
    --spacing-sm: var(--primitive-16);
    --spacing-md: var(--primitive-20);
    --spacing-lg: var(--primitive-24);
    --spacing-xl: var(--primitive-32);
    --spacing-xl2: var(--primitive-40);
    --spacing-xxl: var(--primitive-40);
    --spacing-xxxl: var(--primitive-48);
    --spacing-4xl: var(--primitive-56);
    --spacing-5xl: var(--primitive-64);
    --spacing-huge: var(--primitive-72);
    --spacing-x-huge: var(--primitive-96);
    --spacing-xx-huge: var(--primitive-112);

    /* Button */
    --button-regular-vertical: var(--primitive-12);
    --button-regular-horizontal: var(--primitive-12);

    /* Global */
    --global-margin: var(--primitive-16);
    --global-margin-sm: var(--primitive-8);
    --global-margin-lg: var(--primitive-24);
    --global-gutter: var(--primitive-16);
    --global-gutter-lg: var(--primitive-24);

    /* Section */
    --section-x-small: var(--primitive-32);
    --section-small: var(--primitive-40);
    --section-medium: var(--primitive-56);
    --section-large: var(--primitive-72);

    /* Typography */
    --font-size-display-1: 3rem;      /* 48px */
    --font-size-display-2: 2.5rem;    /* 40px */
    --font-size-h1: 2.5rem;           /* 40px */
    --font-size-h2: 2rem;             /* 32px */
    --font-size-h3: 1.5rem;           /* 24px */
  }
}


/* ==========================================================================
   MOBILE VERTICAL (≤ 479px)
   Further scale-down for narrow portrait screens.
   ========================================================================== */
@media (max-width: 479px) {
  :host {
    /* Spacing values */
    --spacing-5xs: var(--primitive-4);
    --spacing-x-huge: var(--primitive-88);
    --spacing-xx-huge: var(--primitive-104);

    /* Button */
    --button-large-vertical: var(--primitive-0);

    /* Global */
    --global-gutter-lg: var(--primitive-20);

    /* Section */
    --section-x-small: var(--primitive-24);
    --section-small: var(--primitive-32);
    --section-medium: var(--primitive-48);
    --section-large: var(--primitive-64);
  }
}


/* ==========================================================================
   COLOR MODE: DARK
   Apply .mode-dark to any component wrapper to activate dark-mode palette.
   Only tokens that differ from light/default are overridden here.
   ========================================================================== */
.PDMAJeTVCiPXvgAQUOip {
  /* Text */
  --color-text-primary: var(--color-base-beige);
  --color-text-primary-75: var(--color-base-beige-75);
  --color-text-primary-subtle: var(--color-base-beige);
  --color-text-secondary: var(--color-base-grey-dark);
  --color-text-inverse: var(--color-base-grey-dark);
  --color-text-secondary-subtle: var(--color-base-beige-75);
  --color-text-brand: var(--color-base-brand);
  --color-text-link: var(--color-base-blue-grey);

  /* Background */
  --color-bg-primary: var(--color-base-grey-dark);
  --color-bg-white: var(--color-base-brand-2);
  --color-bg-dark: var(--color-base-beige);
  --color-bg-alternative: var(--color-base-beige);

  /* Divider */
  --color-divider-light: var(--color-base-grey-800);
  --color-divider-dark: var(--color-base-grey-600);
  --color-divider-extra-dark: var(--color-base-grey-400);
}


/* ==========================================================================
   COLOR MODE: MID
   Apply .mode-mid to any component wrapper to activate mid-mode palette.
   ========================================================================== */
.OBx0l2ITsUal2gG7s_E2 {
  /* Text */
  --color-text-brand: var(--color-base-black);
  --color-text-link: var(--color-base-brand-2);

  /* Background */
  --color-bg-white: var(--color-base-brand-2);
  --color-bg-dark: var(--color-base-beige);
  --color-bg-alternative: var(--color-base-beige);
}

/* ==========================================================================
   Global Styles — Celero Capital
   ========================================================================== */

/* -------------------------------------------------------------------------
   FONT FACES
   NOTE: Add your font files to src/assets/fonts/ and update paths below.
   Acumin Pro and IvyPresto Headline are licensed fonts.
   ------------------------------------------------------------------------- */

/*
@font-face {
  font-family: 'Acumin Pro';
  src: url('../assets/fonts/AcuminPro-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Acumin Pro';
  src: url('../assets/fonts/AcuminPro-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IvyPresto Headline';
  src: url('../assets/fonts/IvyPrestoHeadline-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
*/

/* -------------------------------------------------------------------------
   RESET & BASE
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-background-primary);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-headlines);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

/* ==========================================================================
   FooterPattern — Static line-field for footer background
   ========================================================================== */

.nBnOAd6LWWbSCUP7H1dw {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 45%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.bWEXq5RE2smjd_PZec0g {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.qT1vgi40PZOrFuLSM3gu {
  stroke: var(--footer-line-color, #77A6BF);
}

/* -------------------------------------------------------------------------
   Gradient overlay — fades lines from visible (left) to transparent (right)
   Uses the footer's dark-blue background color.
   ------------------------------------------------------------------------- */

.XTVyBdt4vG1sSShPQLsm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(21, 61, 98, 0) 0%,
    rgba(21, 61, 98, 0.4) 55%,
    rgba(21, 61, 98, 0.85) 78%,
    rgb(21, 61, 98) 95%
  );
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   Hide on tablet/mobile (≤ 991px)
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .nBnOAd6LWWbSCUP7H1dw {
    display: none;
  }
}