/* ================================================
Blankboard Studio - Global Styles
================================================ */

/* ------------------------------------------------
00. Webflow font-face override (Aeonik default ss02)
Place here so it loads after Webflow CSS when added in Head code
------------------------------------------------ */

/* ------------------------------------------------
    01. Token Hub
    ------------------------------------------------ */
:root {
  /* Scaling System */
  --size-unit: 16;
  /* Body font-size in design units (no px) */
  --size-container-ideal: 1680;
  --size-container-min: 991px;
  --size-container-max: 1680px;

  --size-container: clamp(var(--size-container-min),
      100vw,
      var(--size-container-max));

  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));

  font-size: var(--size-font);

  /* Color aliases (still uses your existing --_colors---* vars) */
  --color-accent: var(--_colors---accent, #5498dc);
  --color-bg-dark: var(--_colors---bg--dark, #0b0e14);
  --color-text-light: var(--_colors---text-color--light, #f2f5ff);

  /* Existing tokens (kept as-is) */
  --base---box-opacity: 50%;
  --shadow-blur: 3em;
  --address-icon-fill: var(--color-accent);

  /* Motion + timing */
  --ease-bbs: cubic-bezier(0.64, 0.05, 0, 1);
  --dur-bbs: 800ms;

  /* Underline effect */
  --underline-top: 95%;
  --underline-height: 1px;
  --inline-underline-opacity: 0.48;

  /* Loops */
  --loop-x-duration: 60s;
  --loop-y-duration: 32s;

  /* SVG dash */
  --svg-dash-duration: 8s;
  --svg-dash-offset: 600;

  /* Zoom */
  --image-zoom-scale: 1.12;
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834;
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 430;
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 430;
    --size-container-min: 320px;
    --size-container-max: 428px;
  }
}

/* ------------------------------------------------
    02. Color System: OKLCH and Display-P3 Fallback
    ------------------------------------------------ */
@supports (color: oklch(50% 0.2 280)) {
  :root {
    /* Add OKLCH tokens here if needed */

    --_colors---base--true-black: oklch(0 0 0);
    --_colors---base--deep-navy: oklch(0.206164 0.040828 262.317991);
    --_colors---base--vermillion: oklch(0.557081 0.190739 32.394864);
    --_colors---base--royal-blue: oklch(0.334709 0.115798 261.683974);
    --_colors---base--steel-blue: oklch(0.399758 0.066343 249.803151);
    --_colors---base--sky-blue: oklch(0.844345 0.088354 237.54831);
    --_colors---base--slate-grey: oklch(0.551019 0.023361 264.363742);
    --_colors---base--cloud-white: oklch(0.975469 0.004534 258.324531);
    --_colors---base--clean-white: oklch(1 0 89.875563);

    --_colors---extended--navy-100: oklch(0.937243 0.008351 271.325306);
    --_colors---extended--navy-200: oklch(0.838742 0.017562 267.767015);
    --_colors---extended--navy-300: oklch(0.612455 0.033979 265.17986);
    --_colors---extended--navy-400: oklch(0.408483 0.045457 263.173083);
    --_colors---extended--navy-500: oklch(0.297277 0.051757 260.91751);
    --_colors---extended--navy-600: oklch(0.206164 0.040828 262.317991);
    --_colors---extended--navy-700: oklch(0.163417 0.02798 259.941546);

    --_colors---extended--blue-100: oklch(0.933348 0.036022 239.153774);
    --_colors---extended--blue-200: oklch(0.844345 0.088354 237.54831);
    --_colors---extended--blue-300: oklch(0.725686 0.120279 241.773374);
    --_colors---extended--blue-400: oklch(0.545249 0.129015 250.712765);
    --_colors---extended--blue-500: oklch(0.334709 0.115798 261.683974);
    --_colors---extended--blue-600: oklch(0.269511 0.095461 263.436944);
    --_colors---extended--blue-700: oklch(0.208747 0.07113 264.303861);

    --_colors---extended--vermillion-100: oklch(0.946741 0.023669 30.48832);
    --_colors---extended--vermillion-200: oklch(0.804703 0.092362 29.98235);
    --_colors---extended--vermillion-300: oklch(0.670287 0.156489 31.897733);
    --_colors---extended--vermillion-400: oklch(0.557081 0.190739 32.394864);
    --_colors---extended--vermillion-500: oklch(0.470343 0.156753 32.699725);
    --_colors---extended--vermillion-600: oklch(0.388023 0.126983 32.418373);
    --_colors---extended--vermillion-700: oklch(0.285926 0.087975 32.317856);

    --_colors---extended--grey-100: oklch(0.966956 0.002874 264.541934);
    --_colors---extended--grey-200: oklch(0.871681 0.009339 258.338227);
    --_colors---extended--grey-300: oklch(0.71366 0.019176 261.324645);
    --_colors---extended--grey-400: oklch(0.551019 0.023361 264.363742);
    --_colors---extended--grey-500: oklch(0.446112 0.026312 256.801751);
    --_colors---extended--grey-600: oklch(0.372927 0.03062 259.732849);
    --_colors---extended--grey-700: oklch(0.278078 0.029596 256.847952);
  }
}

@supports (color: color(display-p3 1 0 0)) {
  :root {
    /* Add Display-P3 tokens here if needed */

    --_colors---base--true-black: color(display-p3 0 0 0 / 1);
    --_colors---base--deep-navy: color(display-p3 0.05098 0.090196 0.164706 / 1);
    --_colors---base--vermillion: color(display-p3 0.796078 0.207843 0.101961 / 1);
    --_colors---base--royal-blue: color(display-p3 0.066667 0.196078 0.443137 / 1);
    --_colors---base--steel-blue: color(display-p3 0.164706 0.290196 0.415686 / 1);
    --_colors---base--sky-blue: color(display-p3 0.580392 0.835294 1 / 1);
    --_colors---base--slate-grey: color(display-p3 0.419608 0.447059 0.501961 / 1);
    --_colors---base--cloud-white: color(display-p3 0.960784 0.968627 0.980392 / 1);
    --_colors---base--clean-white: color(display-p3 1 1 1 / 1);

    --_colors---extended--navy-100: color(display-p3 0.909804 0.917647 0.941176 / 1);
    --_colors---extended--navy-200: color(display-p3 0.772549 0.792157 0.839216 / 1);
    --_colors---extended--navy-300: color(display-p3 0.478431 0.517647 0.6 / 1);
    --_colors---extended--navy-400: color(display-p3 0.239216 0.290196 0.388235 / 1);
    --_colors---extended--navy-500: color(display-p3 0.117647 0.176471 0.278431 / 1);
    --_colors---extended--navy-600: color(display-p3 0.05098 0.090196 0.164706 / 1);
    --_colors---extended--navy-700: color(display-p3 0.027451 0.054902 0.101961 / 1);

    --_colors---extended--blue-100: color(display-p3 0.831373 0.929412 1 / 1);
    --_colors---extended--blue-200: color(display-p3 0.580392 0.835294 1 / 1);
    --_colors---extended--blue-300: color(display-p3 0.352941 0.686275 0.921569 / 1);
    --_colors---extended--blue-400: color(display-p3 0.168627 0.45098 0.721569 / 1);
    --_colors---extended--blue-500: color(display-p3 0.066667 0.196078 0.443137 / 1);
    --_colors---extended--blue-600: color(display-p3 0.047059 0.133333 0.329412 / 1);
    --_colors---extended--blue-700: color(display-p3 0.027451 0.082353 0.219608 / 1);

    --_colors---extended--vermillion-100: color(display-p3 0.992157 0.909804 0.894118 / 1);
    --_colors---extended--vermillion-200: color(display-p3 0.960784 0.662745 0.611765 / 1);
    --_colors---extended--vermillion-300: color(display-p3 0.898039 0.419608 0.333333 / 1);
    --_colors---extended--vermillion-400: color(display-p3 0.796078 0.207843 0.101961 / 1);
    --_colors---extended--vermillion-500: color(display-p3 0.627451 0.168627 0.082353 / 1);
    --_colors---extended--vermillion-600: color(display-p3 0.478431 0.12549 0.062745 / 1);
    --_colors---extended--vermillion-700: color(display-p3 0.301961 0.078431 0.039216 / 1);

    --_colors---extended--grey-100: color(display-p3 0.952941 0.956863 0.964706 / 1);
    --_colors---extended--grey-200: color(display-p3 0.819608 0.835294 0.858824 / 1);
    --_colors---extended--grey-300: color(display-p3 0.611765 0.639216 0.686275 / 1);
    --_colors---extended--grey-400: color(display-p3 0.419608 0.447059 0.501961 / 1);
    --_colors---extended--grey-500: color(display-p3 0.294118 0.333333 0.388235 / 1);
    --_colors---extended--grey-600: color(display-p3 0.215686 0.254902 0.317647 / 1);
    --_colors---extended--grey-700: color(display-p3 0.121569 0.160784 0.215686 / 1);
  }
}

/* ------------------------------------------------
    03. Reset & Box Model
    ------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  text-size-adjust: 100%;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 8%;
  text-underline-offset: -8%;
  text-underline-position: from-font;
}

html {
  scroll-behavior: initial;
  scrollbar-width: none;
  /* Firefox */
  -webkit-font-smoothing: antialiased;
}

body {
  width: 100vw;

  /* IMPORTANT: one declaration only (second line was overriding the first) */
  font-feature-settings: "liga" 1, "calt" 1;

  -ms-overflow-style: none;
  /* IE & Edge */
}

/* Hide scrollbars universally */
body::-webkit-scrollbar,
body ::-webkit-scrollbar {
  display: none;
}

svg {
  max-width: none;
  height: auto;
  box-sizing: border-box;
  vertical-align: middle;
}

a {
  color: inherit;
}

/* ------------------------------------------------
    04. Typography Utilities
    ------------------------------------------------ */
/* Same behavior, lower specificity so Webflow overrides stay easy */
.w-richtext :where(:first-child, div:first-child :first-child) {
  margin-top: 0 !important;
}

.w-richtext :where(:last-child, div:first-child :last-child) {
  margin-bottom: 0 !important;
}

.w-richtext::before,
.w-richtext::after {
  display: none;
}

/* ------------------------------------------------
    05. Utility Attributes
    ------------------------------------------------ */
[scroll-show="false"] {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

[scroll-show="false"]::-webkit-scrollbar {
  display: none;
}

/* Truncate Text Utility (single core rule + variable override) */
[data-truncate] {
  --truncate-lines: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: var(--truncate-lines);
}

[data-truncate="1"] {
  --truncate-lines: 1;
}

[data-truncate="2"] {
  --truncate-lines: 2;
}

[data-truncate="3"] {
  --truncate-lines: 3;
}

/* Selection Highlight */
@supports (background-color: color-mix(in srgb, black 10%, transparent)) {
  ::selection {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
    color: var(--color-accent);
    text-shadow: none;
  }

  ::-moz-selection {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
    color: var(--color-accent);
    text-shadow: none;
  }
}

[data-gradient] {
  background: linear-gradient(90deg,
      var(--_colors---base--sky-blue) -34.18%,
      var(--_colors---base--steel-blue) 100%);
}

[data-gradient-text] {
  -webkit-background-clip: text;
  background-clip: text;
  background-repeat: repeat-x;
  -webkit-text-fill-color: transparent;
  color: inherit;
}

/* ------------------------------------------------
    06. Interactive Link Effects
    ------------------------------------------------ */
.link-underline {
  position: relative;
}

.link-underline::after {
  content: "";
  position: absolute;
  top: var(--underline-top);
  left: 0%;
  height: var(--underline-height);
  width: 0%;
  background: currentColor;
  transition: width var(--dur-bbs) var(--ease-bbs);
}

.link-underline:hover::after {
  width: 100%;
}

.link-underline:not(:hover)::after {
  left: auto;
  right: 0%;
  width: 0%;
}

.inline-link-underline {
  position: relative;
}

.inline-link-underline::after {
  content: "";
  position: absolute;
  top: var(--underline-top);
  left: 0%;
  height: var(--underline-height);
  width: 100%;
  background: currentColor;
  opacity: var(--inline-underline-opacity);
  transition: opacity var(--dur-bbs) var(--ease-bbs);
}

.inline-link-underline:hover::after {
  opacity: 1;
}

/* ------------------------------------------------
    07. Animations
    ------------------------------------------------ */
@keyframes loopX {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes loopY {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(-100%);
  }
}

.loop-animate-x {
  animation: loopX var(--loop-x-duration) linear infinite;
  will-change: transform;
}

.loop-animate-y {
  animation: loopY var(--loop-y-duration) linear infinite;
  will-change: transform;
}

.loop-animate-x.reverse {
  animation: loopX var(--loop-x-duration) linear infinite reverse;
  will-change: transform;
}

.loop-animate-y.reverse {
  animation: loopY var(--loop-y-duration) linear infinite reverse;
  will-change: transform;
}

.svg-animate-line {
  stroke-dasharray: 10 10 !important;
  animation: svgDash var(--svg-dash-duration) linear infinite;
}

.svg-animate-line.reverse {
  animation: svgDash var(--svg-dash-duration) linear infinite reverse;
}

@keyframes svgDash {
  to {
    stroke-dashoffset: var(--svg-dash-offset);
  }
}

/* Motion respect */
@media (prefers-reduced-motion: reduce) {

  .loop-animate-x,
  .loop-animate-y,
  .svg-animate-line {
    animation: none !important;
  }

  .image-w img,
  .link-underline::after,
  .inline-link-underline::after {
    transition-duration: 1ms !important;
  }
}

/* ------------------------------------------------
    08. Components / Patterns
    ------------------------------------------------ */
.image-w img {
  transition: transform var(--dur-bbs) var(--ease-bbs);
}

.image-w:hover img {
  transform: scale(var(--image-zoom-scale));
}

.s-wrapper::before,
.s-wrapper::after {
  display: none;
}

select.form-input {
  color: currentColor;
  appearance: none;
  /* Disable the default arrow */
  -webkit-appearance: none;
  /* For WebKit-based browsers */
  -moz-appearance: none;
  /* For Firefox */

  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.99952 8.78068L11.2995 5.48068L12.2422 6.42335L7.99952 10.666L3.75685 6.42335L4.70019 5.48068L8.00019 8.78068L7.99952 8.78068Z" fill="currentColor"/></svg>');
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 1em;
  cursor: pointer;
}

@property --flare-angle {
  syntax: "<angle>";
  initial-value: 183deg;
  inherits: true;
}

[data-flare-border] {
  --flare-color: 255, 255, 255;
  --flare-opacity: 0.3;
  --flare-stroke: 1px;
  --flare-duration: 2s;
  --flare-easing: cubic-bezier(0.64, 0.05, 0, 1);

  position: relative;
}

[data-flare-border]::before {
  content: "";
  position: absolute;
  z-index: 99;
  inset: 0;
  padding: var(--flare-stroke);
  border-radius: inherit;
  opacity: var(--flare-opacity);
  background: linear-gradient(var(--flare-angle),
      rgba(var(--flare-color), 1) 0%,
      rgba(var(--flare-color), 0) 50%,
      rgba(var(--flare-color), 1) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: --flare-angle var(--flare-duration) var(--flare-easing);
}

[data-flare-border].is-in-view {
  --flare-angle: -3deg;
}

@media (prefers-reduced-motion: reduce) {
  [data-flare-border]::before {
    transition: none;
  }
}

.industry-tabs::before,
.industry-tabs::after {
  display: none;
}

.filter-chip-button.w--redirected-checked~.filter-chip-label {
  color: var(--_color-token---text--white);
}

.filter-search-w:has(.filter-search-input:focus),
.filter-search-w:has(.filter-search-input.is-list-active) {
  width: 20em !important;
}

[data-readmore="text"] {
  --readmore-lines: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--readmore-lines);
  line-clamp: var(--readmore-lines);
  overflow: hidden;
  transition: max-height 0.35s ease;
}

[data-readmore="text"].is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
}

[data-readmore="text"]> :first-child {
  margin-top: 0;
}

[data-readmore="text"]> :last-child {
  margin-bottom: 0;
}

[data-readmore="toggle"] {
  cursor: pointer;
}

.case-hero-list-w .case-hero-list-item:last-child .case-list-comma {
  display: none;
  pointer-events: none;
  visibility: none;
}

.mask-top,
.mask-bottom,
.mask-left,
.mask-right {
  --mask-fade: 14%;

  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0,
      #000 var(--mask-t, 0%),
      #000 calc(100% - var(--mask-b, 0%)),
      transparent 100%),
    linear-gradient(to right,
      transparent 0,
      #000 var(--mask-l, 0%),
      #000 calc(100% - var(--mask-r, 0%)),
      transparent 100%);
  mask-image: linear-gradient(to bottom,
      transparent 0,
      #000 var(--mask-t, 0%),
      #000 calc(100% - var(--mask-b, 0%)),
      transparent 100%),
    linear-gradient(to right,
      transparent 0,
      #000 var(--mask-l, 0%),
      #000 calc(100% - var(--mask-r, 0%)),
      transparent 100%);

  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.mask-top {
  --mask-t: var(--mask-top-size, var(--mask-fade));
}

.mask-bottom {
  --mask-b: var(--mask-bottom-size, var(--mask-fade));
}

.mask-left {
  --mask-l: var(--mask-left-size, var(--mask-fade));
}

.mask-right {
  --mask-r: var(--mask-right-size, var(--mask-fade));
}