@import url('https://fonts.googleapis.com/css2?family=Poetsen+One&display=swap');
@import url("https://use.typekit.net/sfu5grx.css");

:root {

    --white: oklch(100% 0 0) ;

    --alpha-10: oklch(100% 0 0 / 0.1) ;
    --alpha-20: oklch(100% 0 0 / 0.2) ;
    --alpha-30: oklch(100% 0 0 / 0.3) ;
    --alpha-40: oklch(100% 0 0 / 0.4) ;
    --alpha-50: oklch(100% 0 0 / 0.5) ;
    --alpha-60: oklch(100% 0 0 / 0.6) ;
    --alpha-70: oklch(100% 0 0 / 0.7) ;
    --alpha-80: oklch(100% 0 0 / 0.8) ;
    --alpha-90: oklch(100% 0 0 / 0.9) ;

    --gray-50: oklch(98.4% 0.003 247.858) ;
    --gray-100: oklch(96.8% 0.007 247.896) ;
    --gray-200: oklch(92.9% 0.013 255.508) ;
    --gray-300: oklch(86.9% 0.022 252.894) ;
    --gray-400: oklch(70.4% 0.04 256.788) ;
    --gray-500: oklch(55.4% 0.046 257.417) ;
    --gray-600: oklch(44.6% 0.043 257.281) ;
    --gray-700: oklch(37.2% 0.044 257.287) ;
    --gray-800: oklch(27.9% 0.041 260.031) ;
    --gray-900: oklch(20.8% 0.042 265.755) ;
    --gray-950: oklch(12.9% 0.042 264.695) ;


    --sky-50: oklch(97.7% 0.013 236.62) ;
    --sky-100: oklch(95.1% 0.026 236.824) ;
    --sky-200: oklch(90.1% 0.058 230.902) ;
    --sky-300: oklch(82.8% 0.111 230.318) ;
    --sky-400: oklch(74.6% 0.16 232.661) ;
    --sky-500: oklch(68.5% 0.169 237.323) ;
    --sky-600: oklch(58.8% 0.158 241.966) ;
    --sky-700: oklch(50% 0.134 242.749) ;
    --sky-800: oklch(44.3% 0.11 240.79) ;
    --sky-900: oklch(39.1% 0.09 240.876) ;
    --sky-950: oklch(29.3% 0.066 243.157) ;


    --amber-50: oklch(98.7% 0.022 95.277) ;
    --amber-100: oklch(96.2% 0.059 95.617) ;
    --amber-200: oklch(92.4% 0.12 95.746) ;
    --amber-300: oklch(87.9% 0.169 91.605) ;
    --amber-400: oklch(82.8% 0.189 84.429) ;
    --amber-500: oklch(76.9% 0.188 70.08) ;
    --amber-600: oklch(66.6% 0.179 58.318) ;
    --amber-700: oklch(55.5% 0.163 48.998) ;
    --amber-800: oklch(47.3% 0.137 46.201) ;
    --amber-900: oklch(41.4% 0.112 45.904) ;
    --amber-950: oklch(27.9% 0.077 45.635) ;

    --green-50: oklch(0.982 0.018 155.826);
    --green-100: oklch(0.962 0.044 156.743);
    --green-200: oklch(0.925 0.084 155.995);
    --green-300: oklch(0.871 0.15 154.449);
    --green-400: oklch(0.792 0.209 151.711);
    --green-500: oklch(0.723 0.219 149.579);
    --green-600: oklch(0.627 0.194 149.214);
    --green-700: oklch(0.527 0.154 150.069);
    --green-800: oklch(0.448 0.119 151.328);
    --green-900: oklch(0.393 0.095 152.535);
    --green-950: oklch(0.266 0.065 152.934);



    --bg: var(--white) ;
    --bg-subtle: #FAF8F4 ;
    --bg-muted: var(--gray-100) ;
    --bg-emphasis: var(--gray-200) ;

    --border: var(--gray-300) ;
    --border-subtle: var(--gray-200) ;

    --text: #18212f ;
    --text-subtle: var(--gray-700) ;
    --text-muted: var(--gray-500) ;
    --text-disabled: var(--gray-400) ;

    --icon: var(--gray-500) ;

    --accent: var(--sky-600) ;
    --accent-subtle: var(--sky-500) ;
    --accent-muted: var(--sky-400) ;
    --accent-emphasis: var(--sky-700) ;
    --text-on-accent: var(--white) ;
    --text-on-accent-subtle: var(--sky-200) ;
    --text-accent: var(--sky-800) ;
    --text-accent-subtle: var(--sky-600) ;
    --icon-accent: var(--sky-600) ;
    --icon-on-accent: var(--sky-300) ;
    --bg-accent: var(--sky-100) ;

    --accent-secondary: var(--amber-400) ;
    --accent-secondary-subtle: var(--amber-300) ;
    --accent-secondary-muted: var(--amber-200) ;
    --accent-secondary-emphasis: var(--amber-500) ;
    --text-on-accent-secondary: var(--amber-950) ;
    --text-accent-secondary: var(--amber-800) ;
    --text-accent-secondary-subtle: var(--amber-600) ;
    --icon-accent-secondary: var(--amber-600) ;
    --bg-accent-secondary: var(--amber-100) ;

    --accent-success: var(--green-600) ;
    --text-on-accent-success: var(--white) ;
    --text-accent-success: var(--green-800) ;
    --icon-accent-success: var(--green-600) ;
    --bg-accent-success: var(--green-100) ;


    --spacing-0-5: 0.125rem ;
    --spacing-1: 0.25rem ;
    --spacing-2: 0.5rem ;
    --spacing-2-5: clamp(0.5rem, 0.3835300814rem + 0.3898574681vw, 0.625rem) ;
    --spacing-3: clamp(0.625rem, 0.5085300814rem + 0.3898574681vw, 0.75rem) ;
    --spacing-3-5: clamp(0.75rem, 0.6801180488rem + 0.2339144809vw, 0.825rem) ;
    --spacing-4: clamp(0.825rem, 0.661942114rem + 0.5458004554vw, 1rem) ;
    --spacing-4-5: clamp(1rem, 0.8835300814rem + 0.3898574681vw, 1.125rem) ;
    --spacing-5: clamp(1.125rem, 1.0085300814rem + 0.3898574681vw, 1.25rem) ;
    --spacing-6: clamp(1.25rem, 1.0170601628rem + 0.7797149362vw, 1.5rem) ;
    --spacing-7: clamp(1.5rem, 1.2670601628rem + 0.7797149362vw, 1.75rem) ;
    --spacing-8: clamp(1.75rem, 1.5170601628rem + 0.7797149362vw, 2rem) ;
    --spacing-9: clamp(2rem, 1.7670601628rem + 0.7797149362vw, 2.25rem) ;
    --spacing-10: clamp(2.25rem, 2.0170601628rem + 0.7797149362vw, 2.5rem) ;
    --spacing-12: clamp(2.5rem, 2.0341203256rem + 1.5594298724vw, 3rem) ;
    --spacing-14: clamp(3rem, 2.5341203256rem + 1.5594298724vw, 3.5rem) ;
    --spacing-16: clamp(3.5rem, 3.0341203256rem + 1.5594298724vw, 4rem) ;
    --spacing-20: clamp(4rem, 3.0682406512rem + 3.1188597449vw, 5rem) ;
    --spacing-24: clamp(5rem, 4.0682406512rem + 3.1188597449vw, 6rem) ;
    --spacing-28: clamp(6rem, 5.0682406512rem + 3.1188597449vw, 7rem) ;
    --spacing-32: clamp(7rem, 6.0682406512rem + 3.1188597449vw, 8rem) ;
    --spacing-36: clamp(8rem, 7.0682406512rem + 3.1188597449vw, 9rem) ;
    --spacing-40: clamp(9rem, 8.0682406512rem + 3.1188597449vw, 10rem) ;
    --spacing-48: clamp(10rem, 8.1364813024rem + 6.2377194898vw, 12rem) ;
    --spacing-56: clamp(12rem, 10.1364813024rem + 6.2377194898vw, 14rem) ;
    --spacing-64: clamp(14rem, 12.1364813024rem + 6.2377194898vw, 16rem) ;
    --spacing-72: clamp(16rem, 14.1364813024rem + 6.2377194898vw, 18rem) ;
    --spacing-80: clamp(18rem, 16.1364813024rem + 6.2377194898vw, 20rem) ;

    --container-margin-y: var(--spacing-20);
    --container-margin-x: var(--spacing-8) ;
    --container-margin: var(--container-margin-y) var(--container-margin-x) ;
    --container-gap: var(--spacing-8) ;
    --container-width: 90rem ;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: clamp(1rem, 0.8835300814rem + 0.3898574681vw, 1.125rem);
    --text-xl: clamp(1.125rem, 1.0085300814rem + 0.3898574681vw, 1.25rem);
    --text-2xl: clamp(1.25rem, 1.0170601628rem + 0.7797149362vw, 1.5rem);
    --text-3xl: clamp(1.5rem, 1.1505902442rem + 1.1695724043vw, 1.875rem);
    --text-4xl: clamp(1.875rem, 1.5255902442rem + 1.1695724043vw, 2.25rem);
    --text-5xl: clamp(2.25rem, 1.5511804884rem + 2.3391448087vw, 3rem);
    --text-6xl: clamp(3rem, 2.3011804884rem + 2.3391448087vw, 3.75rem);
    --text-7xl: clamp(3.75rem, 3.0511804884rem + 2.3391448087vw, 4.5rem);
    --text-8xl: clamp(4.5rem, 3.1023609768rem + 4.6782896173vw, 6rem);
    --text-9xl: clamp(6rem, 4.1364813024rem + 6.2377194898vw, 8rem);

    --heading-font-family: "Poetsen One", sans-serif;
    --heading-font-weight: 400 ;
    --heading-line-height: 120%;
    --heading-letter-spacing: -0.025em;

    --body-font-family: "petala-pro", sans-serif;
    --body-font-weight: 400 ;
    --body-line-height: 150%;
    --body-letter-spacing: -0.025em;

    --accent-font-family: "Poetsen One", sans-serif;
    --accent-font-weight: 400 ;
    --accent-line-height: 145%;
    --accent-letter-spacing: -0.025em;

    --radius-checkbox: 0.25rem ;
    --radius-badge: 99rem ;
    --radius-input: 0.5rem ;
    --radius-button: 999px ;
    --radius-card: 2rem ;

    --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) ;
    --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
    --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
    --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
    --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);
}

@media (max-width: 47.938rem) {
  :root {
    --container-width: 40rem ;
  }
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}

html {
  font-size: 100% ;
  scroll-behavior: smooth;
  overflow-x: hidden ;
}
body {
  font-size: var(--text-md);
  font-family: var(--body-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg);
  color: var(--text-subtle);
  overflow-x: hidden;
}
.brx-body .brxe-container {
  width: var(--container-width);
  padding: var(--container-margin);
  gap: var(--container-gap);
}
section {
  background-color: var(--bg);
  position: relative;
}
.brxe-container {
  z-index: 2;
}
.brxe-text ul {
  padding: 0;
}
.brxe-text li {
  list-style-type: none;
  display: flex;
  position: relative;
  margin-bottom: var(--spacing-3);
  margin-left: var(--spacing-4);
}
.brxe-text li::before {
  content: "";
  font-family: "oco-icon";
  font-size: 80%;
  position: absolute;
  transform: translateX(-100%);
  top: var(--spacing-1);
  left: calc(var(--spacing-2)* -1);
  font-weight: 600;
  color: var(--brand-text-tertiary);
}
*:focus {
  outline: none !important;
}
*:focus-visible {
  transition: outline 0;
  outline: 1px solid var(--accent) !important;
  outline-offset: -1px;
  box-shadow: 0 0 0 2px var(--bg-accent) !important;
}

h1 {
  font-size: var(--text-5xl);
}
h2 {
  font-size: var(--text-3xl);
}
h3 {
  font-size: var(--text-2xl);
}
h4 {
  font-size: var(--text-xl);
}
h5 {
  font-size: var(--text-lg);
}
h6 {
  font-size: var(--text-md);
}
p {
  font-size: var(--text-md);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font-family);
  line-height: var(--heading-line-height);
  color: var(--text);
  font-weight: var(--heading-font-weight);
  letter-spacing: var(--heading-letter-spacing);
}
p, body {
  font-family: var(--body-font-family);
  line-height: var(--body-line-height);
  color: var(--text-subtle);
  font-size: var(--text-md);
  font-weight: var(--body-font-weight);
  letter-spacing: var(--body-letter-spacing);
}

[class^="icon-"]:before, [class*=" icon-"]:before, [class^="icon-"]:after, [class*=" icon-"]:after {
  font-family: "oco-icon";
  color: var(--text-tertiary);
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  height: fit-content;
  font-size: 150%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.clickable-parent {
  position: relative;
}
.clickable-parent a:not(.clickable-child) {
  z-index: 2;
}
a.clickable-child::after, .clickable-child a::after {
  content: "";
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 1;
  border-radius: var(--radius-card);
}

a.clickable-child:focus-visible::after, .clickable-child a:focus-visible::after {
  outline: 2px solid var(--text-tertiary);
  outline-offset: 4px;
}

a.clickable-child:focus, .clickable-child a:focus {
  outline: none !important;
}
.max-lines-1, .max-lines-2, .max-lines-3, .max-lines-4, .max-lines-5, .max-lines-6, .max-lines-7, .max-lines-8, .brxe-ocoweb-application-nav .application-nav__menu-item__text, .brxe-ocoweb-application-nav .application-nav__account-title, .brxe-ocoweb-application-nav .application-nav__account-subtitle, .ocoweb-blog-post .blog-post__title, .ocoweb-blog-post .blog-post__extract, .blog-post-horizontal .blog-post__extract {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
.max-lines-1 {
  -webkit-line-clamp: 1;
}
.max-lines-2 {
  -webkit-line-clamp: 2;
}
.max-lines-3 {
  -webkit-line-clamp: 3;
}
.max-lines-4 {
  -webkit-line-clamp: 4;
}
.max-lines-5 {
  -webkit-line-clamp: 5;
}
.max-lines-6 {
  -webkit-line-clamp: 6;
}
.max-lines-7 {
  -webkit-line-clamp: 7;
}
.max-lines-8 {
  -webkit-line-clamp: 8;
}

/* Components */

/* Button */

.bricks-button {
  font-size: var(--text-md);
  border-radius: var(--radius-button);
  padding: var(--spacing-4) var(--spacing-6);
  font-weight: var(--accent-font-weight);
  font-family: var(--accent-font-family);
  text-shadow: var(--shadow-xs);
  box-shadow: var(--shadow-sm);
  gap: var(--spacing-2);
  letter-spacing: var(--accent-letter-spacing);
  cursor: pointer;
  transition: background 0.2s ease;
}

.bricks-background-primary {
    background-color: var(--accent);
    color: var(--text-on-accent);
}

.bricks-background-primary:hover {
  background: var(--accent-emphasis);
}

.bricks-button.outline {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}

.bricks-button.outline:hover {
  background: var(--bg-emphasis);
}

.bricks-background-secondary {
  background: var(--accent-secondary);
  color: var(--text-on-accent-secondary);
}

.bricks-background-secondary:hover {
  background: var(--accent-secondary-emphasis);
}

/* Form Group - matches Bricks .form-group structure */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  width: 100%;
  margin-bottom: 1em;
  position: relative;
}

.form-group label {
  font-size: inherit;
  font-weight: 500;
  color: var(--text);
}

.input, input:not([type=submit]), select, textarea {
  display: block;
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    line-height: inherit;
    border: none;
    border-radius: var(--radius-input);
    outline: none;
    background: var(--bg-muted);
    transition: background 0.15s ;
    letter-spacing: inherit;
}

.input:hover, input:not([type=submit]):hover, select:hover, textarea:hover, input.is-active {
  background: var(--bg-emphasis);
}

textarea {
  height: auto;
  min-height: 5em;
  padding: 0.5em 0.75em;
  resize: vertical;
}

input::placeholder,
textarea::placeholder { color: var(--text-disabled); }



.brxe-filter-radio {
  display: flex ;
  flex: 1 ;
  border-bottom: 1px solid var(--border-subtle);
}

.brxe-filter-radio li {
  padding: var(--spacing-2) var(--spacing-4) ;
  margin-bottom: -1px ;
}

.brxe-filter-radio li.brx-option-active {
  border-bottom: 2px solid var(--accent);
}

.brxe-filter-radio input {
  display: none ;
}