@layer properties;
/* =========================================
    PostCSS handling    
    Our build setup generates tailwind first, then this file imports
    the temporary tailwind css, and rest of our styles and generates 
    our custom mixins, nesting etc
========================================= */
/* 1) Tailwind output */
/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
:root {
  --max-site-width: 1440px;
  --site-header-height-small: 60px;
  --site-header-height: 80px;
  --micro-animations-duration: 0.15s;
}
:root, :host {
  --color-brand-600: #3d6db2;
  --color-brand-400: #3a91bd;
  --color-brand-contrast: #fff;
  --color-border: #ddd;
  --color-bg: #FAF9F6;
  --color-surface: #fff;
  --color-overlay: rgba(0, 0, 0, 0.3);
  --color-text: #333;
  --color-text-muted: #6b7280;
  --color-brand-secondary: #fffb64;
  --color-display: #333;
  --font-display: 'DM Serif Display', serif;
  --font-header: 'Work Sans', sans-serif;
  --font-body: 'Work Sans', sans-serif;
  --font-sans: 'Sono', monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --line-height-sm: 1.35;
  --letter-spacing-sm: 0.05em;
  --font-size-base: 1rem;
  --line-height-base: 1.5;
  --letter-spacing-base: 0.025em;
  --font-size-lg: 1.125rem;
  --letter-spacing-lg: 0em;
  --font-size-xl: 1.25rem;
  --line-height-xl: 1.4;
  --font-size-2xl: 1.5rem;
  --line-height-2xl: 1.35;
  --letter-spacing-2xl: -0.01em;
  --font-size-3xl: 1.875rem;
  --line-height-3xl: 1.25;
  --font-size-4xl: 2.25rem;
  --line-height-4xl: 1.15;
  --font-size-5xl: 3rem;
  --line-height-5xl: 1.1;
  --font-size-6xl: 3.75rem;
  --line-height-6xl: 1.05;
  --font-size-7xl: 4.5rem;
  --line-height-display: 1;
  --line-height-header: 1.3;
  --letter-spacing-header: 0;
  --spacing-0: 0rem;
  --spacing-1: 0.25rem;
  --spacing-1_5: 0.375rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
  --color-gray-200: oklch(92.8% 0.006 264.531);
  --color-gray-600: oklch(44.6% 0.03 256.802);
  --color-gray-900: oklch(21% 0.034 264.665);
  --color-black: #000;
  --color-white: #fff;
  --spacing: 0.25rem;
  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --default-transition-duration: 150ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
}
@layer theme, base, components, utilities;
@layer theme;
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
      -o-tab-size: 4;
         tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::-moz-placeholder {
    opacity: 1;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::-moz-placeholder {
      color: currentcolor;
    }
    ::placeholder {
      color: currentcolor;
    }
      @supports (color: color-mix(in lab, red, red)) {
    ::-moz-placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
    }
    ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
    }
      }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    -webkit-appearance: button;
       -moz-appearance: button;
            appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .collapse {
    visibility: collapse;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: var(--spacing-0);
  }
  .inset-y-0 {
    inset-block: var(--spacing-0);
  }
  .top-0 {
    top: var(--spacing-0);
  }
  .top-2 {
    top: var(--spacing-2);
  }
  .top-4 {
    top: var(--spacing-4);
  }
  .right-0 {
    right: var(--spacing-0);
  }
  .right-4 {
    right: var(--spacing-4);
  }
  .-left-2 {
    left: calc(var(--spacing-2) * -1);
  }
  .z-10 {
    z-index: 10;
  }
  .z-50 {
    z-index: 50;
  }
  .col-4 {
    grid-column: 4;
  }
  .container {
    width: 100%;
  }
    @media (width >= 320px) {
  .container {
      max-width: 320px;
  }
    }
    @media (width >= 500px) {
  .container {
      max-width: 500px;
  }
    }
    @media (width >= 650px) {
  .container {
      max-width: 650px;
  }
    }
    @media (width >= 768px) {
  .container {
      max-width: 768px;
  }
    }
    @media (width >= 1024px) {
  .container {
      max-width: 1024px;
  }
    }
    @media (width >= 1240px) {
  .container {
      max-width: 1240px;
  }
    }
    @media (width >= 1480px) {
  .container {
      max-width: 1480px;
  }
    }
    @media (width >= 1920px) {
  .container {
      max-width: 1920px;
  }
    }
  .mt-0 {
    margin-top: var(--spacing-0);
  }
  .mt-1 {
    margin-top: var(--spacing-1);
  }
  .mt-4 {
    margin-top: var(--spacing-4);
  }
  .mt-16 {
    margin-top: var(--spacing-16);
  }
  .mb-1 {
    margin-bottom: var(--spacing-1);
  }
  .mb-6 {
    margin-bottom: var(--spacing-6);
  }
  .mb-8 {
    margin-bottom: var(--spacing-8);
  }
  .mb-16 {
    margin-bottom: var(--spacing-16);
  }
  .\!block {
    display: block !important;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .table {
    display: table;
  }
  .aspect-\[5\/7\] {
    aspect-ratio: 5/7;
  }
  .size-5 {
    width: var(--spacing-5);
    height: var(--spacing-5);
  }
  .size-12 {
    width: var(--spacing-12);
    height: var(--spacing-12);
  }
  .h-6 {
    height: var(--spacing-6);
  }
  .h-16 {
    height: var(--spacing-16);
  }
  .h-\[calc\(100dvh-56px\)\] {
    height: calc(100dvh - 56px);
  }
  .h-auto {
    height: auto;
  }
  .h-full {
    height: 100%;
  }
  .h-px {
    height: 1px;
  }
  .w-6 {
    width: var(--spacing-6);
  }
  .w-16 {
    width: var(--spacing-16);
  }
  .w-\[auto\] {
    width: auto;
  }
  .w-full {
    width: 100%;
  }
  .max-w-8\/10 {
    max-width: calc(8/10 * 100%);
  }
  .min-w-full {
    min-width: 100%;
  }
  .flex-none {
    flex: none;
  }
  .flex-shrink {
    flex-shrink: 1;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .-translate-x-full {
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-0 {
    --tw-translate-x: var(--spacing-0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-full {
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-0 {
    --tw-translate-y: var(--spacing-0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-full {
    --tw-translate-y: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-50 {
    --tw-scale-x: 50%;
    --tw-scale-y: 50%;
    --tw-scale-z: 50%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-ping {
    animation: var(--animate-ping);
  }
  .animate-pulse {
    animation: var(--animate-pulse);
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .place-items-center {
    place-items: center;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .\!gap-4 {
    gap: var(--spacing-4) !important;
  }
  .gap-1\.5 {
    gap: var(--spacing-1_5);
  }
  .gap-2 {
    gap: var(--spacing-2);
  }
  .gap-3 {
    gap: var(--spacing-3);
  }
  .gap-3\.5 {
    gap: calc(var(--spacing) * 3.5);
  }
  .gap-6 {
    gap: var(--spacing-6);
  }
  .gap-8 {
    gap: var(--spacing-8);
  }
  .gap-12 {
    gap: var(--spacing-12);
  }
  .gap-24 {
    gap: var(--spacing-24);
  }
    :where(.divide-y > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-gray-200 {
    border-color: var(--color-gray-200);
  }
  .bg-black\/10 {
    background-color: color-mix(in srgb, #000 10%, transparent);
  }
    @supports (color: color-mix(in lab, red, red)) {
  .bg-black\/10 {
      background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
  }
    }
  .bg-white {
    background-color: var(--color-white);
  }
  .object-cover {
    -o-object-fit: cover;
       object-fit: cover;
  }
  .p-1 {
    padding: var(--spacing-1);
  }
  .p-2 {
    padding: var(--spacing-2);
  }
  .p-4 {
    padding: var(--spacing-4);
  }
  .p-12 {
    padding: var(--spacing-12);
  }
  .px-2 {
    padding-inline: var(--spacing-2);
  }
  .px-4 {
    padding-inline: var(--spacing-4);
  }
  .py-4 {
    padding-block: var(--spacing-4);
  }
  .py-8 {
    padding-block: var(--spacing-8);
  }
  .pb-6 {
    padding-bottom: var(--spacing-6);
  }
  .text-left {
    text-align: left;
  }
  .font-sans {
    font-family: var(--font-sans);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .text-gray-600 {
    color: var(--color-gray-600);
  }
  .text-gray-900 {
    color: var(--color-gray-900);
  }
  .text-white {
    color: var(--color-white);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .underline {
    text-decoration-line: underline;
  }
  .opacity-20 {
    opacity: 20%;
  }
  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-filter {
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .will-change-transform {
    will-change: transform;
  }
      @media (hover: hover) {
    .hover\:scale-90:hover {
        --tw-scale-x: 90%;
        --tw-scale-y: 90%;
        --tw-scale-z: 90%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
    }
      }
    @media (width >= 1024px) {
  .lg\:\!gap-8 {
      gap: var(--spacing-8) !important;
  }
    }
    @media (width >= 1024px) {
  .lg\:px-4 {
      padding-inline: var(--spacing-4);
  }
    }
    @media (width >= 1240px) {
  .xl\:hidden {
      display: none;
  }
    }
    @media (width >= 1240px) {
  .xl\:p-6 {
      padding: var(--spacing-6);
  }
    }
    @media (width >= 1240px) {
  .xl\:px-6 {
      padding-inline: var(--spacing-6);
  }
    }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
    }
  }
}
/* 2) Vendor */
/**
 * Swiper 12.0.1
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: September 11, 2025
 */
:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}
.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-autoheight, .swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
}
.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow {
    transform-style: preserve-3d;
  }
/* CSS Mode */
.swiper-css-mode  > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
  }
:is(.swiper-css-mode > .swiper-wrapper)::-webkit-scrollbar {
      display: none;
    }
.swiper-css-mode  > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start;
  }
.swiper-css-mode.swiper-horizontal  > .swiper-wrapper {
      scroll-snap-type: x mandatory;
    }
.swiper-css-mode.swiper-vertical  > .swiper-wrapper {
      scroll-snap-type: y mandatory;
    }
.swiper-css-mode.swiper-free-mode  > .swiper-wrapper {
      scroll-snap-type: none;
    }
.swiper-css-mode.swiper-free-mode  > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: none;
    }
.swiper-css-mode.swiper-centered  > .swiper-wrapper::before {
      content: '';
      flex-shrink: 0;
      order: 9999;
    }
.swiper-css-mode.swiper-centered  > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: center center;
      scroll-snap-stop: always;
    }
.swiper-css-mode.swiper-centered.swiper-horizontal  > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-centered-offset-before);
    }
.swiper-css-mode.swiper-centered.swiper-horizontal  > .swiper-wrapper::before {
      height: 100%;
      min-height: 1px;
      width: var(--swiper-centered-offset-after);
    }
.swiper-css-mode.swiper-centered.swiper-vertical  > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-centered-offset-before);
    }
.swiper-css-mode.swiper-centered.swiper-vertical  > .swiper-wrapper::before {
      width: 100%;
      min-width: 1px;
      height: var(--swiper-centered-offset-after);
    }
/* Slide styles start */
/* 3D Shadows */
.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
  }
.swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, 0.15);
  }
.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
:is(.swiper:not(.swiper-watch-progress),.swiper-watch-progress .swiper-slide-visible) .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear;
  }
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */
.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}
.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
  }
.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
    height: 1px;
    width: var(--swiper-virtual-size);
  }
.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
    width: 1px;
    height: var(--swiper-virtual-size);
  }
:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 4px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev, .swiper-button-next {
  position: absolute;

  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);

  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-disabled:is(.swiper-button-prev,.swiper-button-next) {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
  }
.swiper-button-hidden:is(.swiper-button-prev,.swiper-button-next) {
    opacity: 0;
    cursor: auto;
    pointer-events: none;
  }
.swiper-navigation-disabled :is(.swiper-button-prev,.swiper-button-next) {
    display: none !important;
  }
:is(.swiper-button-prev,.swiper-button-next) svg {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    transform-origin: center;
    fill: currentColor;
    pointer-events: none;
  }
.swiper-button-lock {
  display: none;
}
.swiper-horizontal .swiper-button-prev,.swiper-horizontal .swiper-button-next,.swiper-horizontal  ~ .swiper-button-prev,.swiper-horizontal  ~ .swiper-button-next {
    top: var(--swiper-navigation-top-offset, 50%);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  }
.swiper-horizontal .swiper-button-prev,.swiper-horizontal ~ .swiper-button-prev,.swiper-horizontal.swiper-rtl .swiper-button-next,.swiper-horizontal.swiper-rtl ~ .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto;
  }
.swiper-horizontal .swiper-button-next,.swiper-horizontal ~ .swiper-button-next,.swiper-horizontal.swiper-rtl .swiper-button-prev,.swiper-horizontal.swiper-rtl ~ .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 4px);
    left: auto;
  }
:is(.swiper-horizontal .swiper-button-prev,.swiper-horizontal ~ .swiper-button-prev,.swiper-horizontal.swiper-rtl .swiper-button-next,.swiper-horizontal.swiper-rtl ~ .swiper-button-next) .swiper-navigation-icon {
      transform: rotate(180deg);
    }
:is(.swiper-horizontal.swiper-rtl .swiper-button-prev,.swiper-horizontal.swiper-rtl ~ .swiper-button-prev) .swiper-navigation-icon {
      transform: rotate(0deg);
    }
.swiper-vertical .swiper-button-prev,.swiper-vertical .swiper-button-next,.swiper-vertical  ~ .swiper-button-prev,.swiper-vertical  ~ .swiper-button-next {
    left: var(--swiper-navigation-top-offset, 50%);
    margin-left: calc(0px - (var(--swiper-navigation-size) / 2));
  }
.swiper-vertical .swiper-button-prev,.swiper-vertical  ~ .swiper-button-prev {
    top: var(--swiper-navigation-sides-offset, 4px);
    bottom: auto;
    transform: rotate(-90deg);
  }
.swiper-vertical .swiper-button-next,.swiper-vertical  ~ .swiper-button-next {
    bottom: var(--swiper-navigation-sides-offset, 4px);
    top: auto;
    transform: rotate(90deg);
  }
:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
    opacity: 0;
  }
.swiper-pagination-disabled > .swiper-pagination,.swiper-pagination.swiper-pagination-disabled {
    display: none !important;
  }
/* Common Styles */
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: scale(0.33);
    position: relative;
  }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
    transform: scale(1);
  }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    transform: scale(1);
  }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    transform: scale(0.66);
  }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    transform: scale(0.33);
  }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    transform: scale(0.66);
  }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    transform: scale(0.33);
  }
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}
button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }
.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer;
  }
.swiper-pagination-bullet:only-child {
    display: none !important;
  }
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-vertical > .swiper-pagination-bullets, .swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
:is(.swiper-vertical > .swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets) .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block;
  }
.swiper-pagination-bullets-dynamic:is(.swiper-vertical > .swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets) {
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
  }
.swiper-pagination-bullets-dynamic:is(.swiper-vertical > .swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets) .swiper-pagination-bullet {
      display: inline-block;
      transition:
        200ms transform,
        200ms top;
    }
:is(.swiper-horizontal > .swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets) .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  }
.swiper-pagination-bullets-dynamic:is(.swiper-horizontal > .swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets) {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }
.swiper-pagination-bullets-dynamic:is(.swiper-horizontal > .swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets) .swiper-pagination-bullet {
      transition:
        200ms transform,
        200ms left;
    }
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition:
    200ms transform,
    200ms right;
}
/* Fraction */
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}
/* Progress */
.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top;
  }
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    transform-origin: right top;
  }
.swiper-horizontal > .swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0;
  }
.swiper-vertical > .swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0;
  }
.swiper-pagination-lock {
  display: none;
}
:root {
  /*
  --swiper-scrollbar-border-radius: 10px;
  --swiper-scrollbar-top: auto;
  --swiper-scrollbar-bottom: 4px;
  --swiper-scrollbar-left: auto;
  --swiper-scrollbar-right: 4px;
  --swiper-scrollbar-sides-offset: 1%;
  --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
  --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
  --swiper-scrollbar-size: 4px;
  */
}
.swiper-scrollbar {
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  touch-action: none;
  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
}
.swiper-scrollbar-disabled > .swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled {
    display: none !important;
  }
.swiper-horizontal > .swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal {
    position: absolute;
    left: var(--swiper-scrollbar-sides-offset, 1%);
    bottom: var(--swiper-scrollbar-bottom, 4px);
    top: var(--swiper-scrollbar-top, auto);
    z-index: 50;
    height: var(--swiper-scrollbar-size, 4px);
    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  }
.swiper-vertical > .swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-vertical {
    position: absolute;
    left: var(--swiper-scrollbar-left, auto);
    right: var(--swiper-scrollbar-right, 4px);
    top: var(--swiper-scrollbar-sides-offset, 1%);
    z-index: 50;
    width: var(--swiper-scrollbar-size, 4px);
    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  }
.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  left: 0;
  top: 0;
}
.swiper-scrollbar-cursor-drag {
  cursor: move;
}
.swiper-scrollbar-lock {
  display: none;
}
/* Zoom container styles start */
.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.swiper-zoom-container  > img,.swiper-zoom-container  > svg,.swiper-zoom-container  > canvas {
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
/* Zoom container styles end */
.swiper-slide-zoomed {
  cursor: move;
  touch-action: none;
}
/* a11y */
.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}
.swiper-thumbs .swiper-slide-thumb-active {
    /* Styles for active thumb slide */
  }
.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}
.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}
.swiper-fade.swiper-free-mode .swiper-slide {
      transition-timing-function: ease-out;
    }
.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity;
  }
:is(.swiper-fade .swiper-slide) .swiper-slide {
      pointer-events: none;
    }
.swiper-fade .swiper-slide-active {
    pointer-events: auto;
  }
:is(.swiper-fade .swiper-slide-active) .swiper-slide-active {
      pointer-events: auto;
    }
.swiper.swiper-cube {
  overflow: visible;
}
.swiper-cube .swiper-slide {
    pointer-events: none;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    transform-origin: 0 0;
    width: 100%;
    height: 100%;
  }
:is(.swiper-cube .swiper-slide) .swiper-slide {
      pointer-events: none;
    }
.swiper-cube.swiper-rtl .swiper-slide {
    transform-origin: 100% 0;
  }
:is(.swiper-cube .swiper-slide-active),:is(.swiper-cube .swiper-slide-active) .swiper-slide-active {
      pointer-events: auto;
    }
.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible;
  }
.swiper-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    z-index: 0;
  }
:is(.swiper-cube .swiper-cube-shadow):before {
      content: '';
      background: #000;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      filter: blur(50px);
    }
.swiper-cube .swiper-slide-next + .swiper-slide {
    pointer-events: auto;
    visibility: visible;
  }
/* Cube slide shadows start */
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right {
    z-index: 0;
    backface-visibility: hidden;
  }
/* Cube slide shadows end */
.swiper.swiper-flip {
  overflow: visible;
}
.swiper-flip .swiper-slide {
    pointer-events: none;
    backface-visibility: hidden;
    z-index: 1;
  }
:is(.swiper-flip .swiper-slide) .swiper-slide {
      pointer-events: none;
    }
:is(.swiper-flip .swiper-slide-active),:is(.swiper-flip .swiper-slide-active) .swiper-slide-active {
      pointer-events: auto;
    }
/* Flip slide shadows start */
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right {
    z-index: 0;
    backface-visibility: hidden;
  }
/* Flip slide shadows end */
.swiper-coverflow {
}
.swiper-creative .swiper-slide {
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform, opacity, height;
  }
.swiper.swiper-cards {
  overflow: visible;
}
.swiper-cards .swiper-slide {
    transform-origin: center bottom;
    backface-visibility: hidden;
    overflow: hidden;
  }
:root{--f-button-width: 40px;--f-button-height: 40px;--f-button-border: 0;--f-button-border-radius: 0;--f-button-color: #374151;--f-button-bg: #f8f8f8;--f-button-shadow: none;--f-button-transition: all .15s ease;--f-button-transform: none;--f-button-outline-width: 1px;--f-button-outline-color: rgba(0, 0, 0, .7);--f-button-svg-width: 20px;--f-button-svg-height: 20px;--f-button-svg-stroke-width: 1.5;--f-button-svg-fill: none;--f-button-svg-filter: none;--f-button-svg-opacity: 1;--f-button-svg-disabled-opacity: .5;--f-button-svg-transition: opacity .15s ease;--f-button-svg-transform: none}
.f-button{width:var(--f-button-width);height:var(--f-button-height);border:var(--f-button-border);border-radius:var(--f-button-border-radius);color:var(--f-button-color);background:var(--f-button-bg);box-shadow:var(--f-button-shadow);transform:var(--f-button-transform);transition:var(--f-button-transition);backdrop-filter:var(--f-button-backdrop-filter);display:flex;justify-content:center;align-items:center;box-sizing:content-box;position:relative;margin:0;padding:0;pointer-events:all;cursor:pointer;overflow:hidden}
@media (hover: hover){.f-button:hover:not([aria-disabled]){color:var(--f-button-hover-color, var(--f-button-color));background-color:var(--f-button-hover-bg, var(--f-button-bg))}}
.f-button:active:not([aria-disabled]){color:var(--f-button-active-color, var(--f-button-hover-color, var(--f-button-color)));background-color:var(--f-button-active-bg, var(--f-button-hover-bg, var(--f-button-bg)))}
.f-button:focus{outline:none}
.f-button:focus-visible{outline:var(--f-button-outline-width) solid var(--f-button-outline-color);outline-offset:var(--f-button-outline-offset);position:relative;z-index:1}
.f-button svg{width:var(--f-button-svg-width);height:var(--f-button-svg-height);transform:var(--f-button-svg-transform);fill:var(--f-button-svg-fill);filter:var(--f-button-svg-filter);opacity:var(--f-button-svg-opacity, 1);transition:var(--f-button-svg-transition);stroke:currentColor;stroke-width:var(--f-button-svg-stroke-width);stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.f-button[aria-disabled]{cursor:default}
.f-button[aria-disabled] svg{opacity:var(--f-button-svg-disabled-opacity)}
[data-panzoom-action=toggleFS] g:first-child{display:flex}
[data-panzoom-action=toggleFS] g:last-child{display:none}
.in-fullscreen [data-panzoom-action=toggleFS] g:first-child{display:none}
.in-fullscreen [data-panzoom-action=toggleFS] g:last-child{display:flex}
[data-autoplay-action=toggle] svg g:first-child{display:flex}
[data-autoplay-action=toggle] svg g:last-child{display:none}
.has-autoplay [data-autoplay-action=toggle] svg g:first-child{display:none}
.has-autoplay [data-autoplay-action=toggle] svg g:last-child{display:flex}
:fullscreen [data-fullscreen-action=toggle] svg [data-fullscreen-action=toggle] svg g:first-child{display:none}
:fullscreen [data-fullscreen-action=toggle] svg [data-fullscreen-action=toggle] svg g:last-child{display:flex}
:root{--f-spinner-color-1: rgba(0, 0, 0, .1);--f-spinner-color-2: rgba(17, 24, 28, .8);--f-spinner-width: 50px;--f-spinner-height: 50px;--f-spinner-border-radius: 50%;--f-spinner-border-width: 4px}
.f-spinner{position:absolute;top:50%;left:50%;margin:calc(var(--f-spinner-width) * -.5) 0 0 calc(var(--f-spinner-height) * -.5);padding:0;width:var(--f-spinner-width);height:var(--f-spinner-height);border-radius:var(--f-spinner-border-radius);border:var(--f-spinner-border-width) solid var(--f-spinner-color-1);border-top-color:var(--f-spinner-color-2);animation:f-spinner .75s linear infinite,f-fadeIn .2s ease .2s both}
@keyframes f-spinner{to{transform:rotate(360deg)}}
.f-panzoom, .f-zoomable{position:relative;overflow:hidden;display:flex;align-items:center;flex-direction:column}
.f-panzoom:before, .f-panzoom:after, .f-zoomable:before, .f-zoomable:after{display:block;content:""}
.f-panzoom:not(.has-controls):before, .f-zoomable:not(.has-controls):before{margin-bottom:auto}
.f-panzoom:after, .f-zoomable:after{margin-top:auto}
.f-panzoom.in-fullscreen, .f-zoomable.in-fullscreen{position:fixed;top:0;left:0;margin:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:unset!important;z-index:9999}
.f-panzoom__wrapper{position:relative;min-width:0;min-height:0;max-width:100%;max-height:100%}
.f-panzoom__wrapper.will-zoom-out{cursor:zoom-out}
.f-panzoom__wrapper.can-drag{cursor:move;cursor:grab}
.f-panzoom__wrapper.will-zoom-in{cursor:zoom-in}
.f-panzoom__wrapper.is-dragging{cursor:move;cursor:grabbing}
.f-panzoom__wrapper.has-error{display:none}
.f-panzoom__content{display:block;min-width:0;min-height:0;max-width:100%;max-height:100%}
.f-panzoom__content.is-lazyloading, .f-panzoom__content.has-lazyerror{visibility:hidden}
img.f-panzoom__content{width:auto;height:auto;vertical-align:top;-o-object-fit:contain;object-fit:contain;transition:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.f-panzoom__wrapper>.f-panzoom__content{visibility:hidden}
.f-panzoom__viewport{display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.f-panzoom__viewport>.f-panzoom__content{width:100%;height:100%;-o-object-fit:fill;object-fit:fill}
picture.f-panzoom__content img{vertical-align:top;width:100%;height:auto;max-height:100%;-o-object-fit:contain;object-fit:contain;transition:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.f-panzoom__protected{position:absolute;inset:0;z-index:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}
html.with-panzoom-in-fullscreen{overflow:hidden}
.f-fadeIn{animation:var(--f-transition-duration, .2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeIn;z-index:2}
.f-fadeOut{animation:var(--f-transition-duration, .2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeOut;z-index:1}
@keyframes f-fadeIn{0%{opacity:0}to{opacity:1}}
@keyframes f-fadeOut{to{opacity:0}}
.f-crossfadeIn{animation:var(--f-transition-duration, .2s) ease both f-crossfadeIn;z-index:2}
.f-crossfadeOut{animation:calc(var(--f-transition-duration, .2s) * .2) ease calc(var(--f-transition-duration, .2s) * .8) both f-crossfadeOut;z-index:1}
@keyframes f-crossfadeIn{0%{opacity:0}to{opacity:1}}
@keyframes f-crossfadeOut{to{opacity:0}}
.is-horizontal .f-slideIn.from-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInNextX}
.is-horizontal .f-slideIn.from-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInPrevX}
.is-horizontal .f-slideOut.to-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutNextX}
.is-horizontal .f-slideOut.to-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutPrevX}
@keyframes f-slideInPrevX{0%{transform:translate(calc(100% + var(--f-carousel-gap, 0)))}to{transform:translateZ(0)}}
@keyframes f-slideInNextX{0%{transform:translate(calc(-100% - var(--f-carousel-gap, 0)))}to{transform:translateZ(0)}}
@keyframes f-slideOutNextX{to{transform:translate(calc(-100% - var(--f-carousel-gap, 0)))}}
@keyframes f-slideOutPrevX{to{transform:translate(calc(100% + var(--f-carousel-gap, 0)))}}
.is-vertical .f-slideIn.from-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInNextY}
.is-vertical .f-slideIn.from-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInPrevY}
.is-vertical .f-slideOut.to-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutNextY}
.is-vertical .f-slideOut.to-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutPrevY}
@keyframes f-slideInPrevY{0%{transform:translateY(calc(100% + var(--f-carousel-gap, 0)))}to{transform:translateZ(0)}}
@keyframes f-slideInNextY{0%{transform:translateY(calc(-100% - var(--f-carousel-gap, 0)))}to{transform:translateZ(0)}}
@keyframes f-slideOutNextY{to{transform:translateY(calc(-100% - var(--f-carousel-gap, 0)))}}
@keyframes f-slideOutPrevY{to{transform:translateY(calc(100% + var(--f-carousel-gap, 0)))}}
.f-zoomInUp{animation:var(--f-transition-duration, .3s) ease both f-zoomInUp}
.f-zoomOutDown{animation:var(--f-transition-duration, .3s) ease both f-zoomOutDown}
@keyframes f-zoomInUp{0%{transform:scale(var(--f-zoomInUp-scale, .975)) translate3d(var(--f-zoomInUp-x, 0),var(--f-zoomInUp-y, 16px),0);opacity:var(--f-zoomInUp-opacity, 0)}to{transform:scale(1) translateZ(0);opacity:1}}
@keyframes f-zoomOutDown{to{transform:scale(var(--f-zoomOutDown-scale, .975)) translate3d(var(--f-zoomOutDown-x, 0),var(--f-zoomOutDown-y, 16px),0);opacity:0}}
.f-throwOutUp{animation:var(--f-throwOutUp-duration, .2s) ease-out both f-throwOutUp}
.f-throwOutDown{animation:var(--f-throwOutDown-duration, .2s) ease-out both f-throwOutDown}
@keyframes f-throwOutUp{to{transform:translate3d(0,calc(var(--f-throwOutUp-y, 150px) * -1),0);opacity:0}}
@keyframes f-throwOutDown{to{transform:translate3d(0,var(--f-throwOutDown-y, 150px),0);opacity:0}}
.has-iframe .f-html, .has-pdf .f-html, .has-gmap .f-html{width:100%;height:100%;min-height:1px;overflow:visible}
.has-pdf .f-html, .has-gmap .f-html{padding:0}
.f-html{position:relative;box-sizing:border-box;margin:var(--f-html-margin, 0);padding:var(--f-html-padding, 2rem);color:var(--f-html-color, currentColor);background:var(--f-html-bg)}
.f-html.is-error{text-align:center}
.f-iframe{display:block;margin:0;border:0;height:100%;width:100%}
.f-caption{align-self:center;flex-shrink:0;margin:var(--f-caption-margin);padding:var(--f-caption-padding, 16px 8px);max-width:100%;max-height:calc(80vh - 100px);overflow:auto;overflow-wrap:anywhere;line-height:var(--f-caption-line-height);color:var(--f-caption-color);background:var(--f-caption-bg);font:var(--f-caption-font)}
.has-html5video .f-html, .has-youtube .f-html, .has-vimeo .f-html{padding:0;width:100%;height:100%;min-height:1px;overflow:visible;max-width:var(--f-video-width, 960px);max-height:var(--f-video-height, 540px);aspect-ratio:var(--f-video-aspect-ratio);background:var(--f-video-bg, rgba(0, 0, 0, .9))}
.f-html5video{border:0;display:block;height:100%;width:100%;background:transparent}
.f-button.is-arrow{--f-button-width: var(--f-arrow-width, 46px);--f-button-height: var(--f-arrow-height, 46px);--f-button-svg-width: var(--f-arrow-svg-width, 24px);--f-button-svg-height: var(--f-arrow-svg-height, 24px);--f-button-svg-stroke-width: var(--f-arrow-svg-stroke-width, 1.75);--f-button-border-radius: var(--f-arrow-border-radius, unset);--f-button-bg: var(--f-arrow-bg, transparent);--f-button-hover-bg: var(--f-arrow-hover-bg, var(--f-arrow-bg));--f-button-active-bg: var(--f-arrow-active-bg, var(--f-arrow-hover-bg));--f-button-shadow: var(--f-arrow-shadow);--f-button-color: var(--f-arrow-color);--f-button-hover-color: var(--f-arrow-hover-color, var(--f-arrow-color));--f-button-active-color: var( --f-arrow-active-color, var(--f-arrow-hover-color) );overflow:visible}
.f-button.is-arrow.is-prev, .f-button.is-arrow.is-next{position:absolute;transform:translate(0);z-index:20}
.is-horizontal .f-button.is-arrow.is-prev, .is-horizontal .f-button.is-arrow.is-next{inset:50% auto auto;transform:translateY(-50%)}
.is-horizontal.is-ltr .f-button.is-arrow.is-prev{left:var(--f-arrow-pos, 0)}
.is-horizontal.is-ltr .f-button.is-arrow.is-next{right:var(--f-arrow-pos, 0)}
.is-horizontal.is-rtl .f-button.is-arrow.is-prev{right:var(--f-arrow-pos, 0);transform:translateY(-50%) rotateY(180deg)}
.is-horizontal.is-rtl .f-button.is-arrow.is-next{left:var(--f-arrow-pos, 0);transform:translateY(-50%) rotateY(180deg)}
.is-vertical.is-ltr .f-button.is-arrow.is-prev, .is-vertical.is-rtl .f-button.is-arrow.is-prev{top:var(--f-arrow-pos, 0);right:auto;bottom:auto;left:50%;transform:translate(-50%)}
.is-vertical.is-ltr .f-button.is-arrow.is-next, .is-vertical.is-rtl .f-button.is-arrow.is-next{top:auto;right:auto;bottom:var(--f-arrow-pos, 0);left:50%;transform:translate(-50%)}
.is-vertical .f-button.is-arrow.is-prev svg, .is-vertical .f-button.is-arrow.is-next svg{transform:rotate(90deg)}
.f-carousel__toolbar{display:grid;grid-template-columns:1fr auto 1fr;margin:var(--f-toolbar-margin, 0);padding:var(--f-toolbar-padding, 8px);line-height:var(--f-toolbar-line-height);background:var(--f-toolbar-bg, none);box-shadow:var(--f-toolbar-shadow, none);backdrop-filter:var(--f-toolbar-backdrop-filter);position:relative;z-index:20;color:var(--f-toolbar-color, currentColor);font-size:var(--f-toolbar-font-size, 17px);font-weight:var(--f-toolbar-font-weight, inherit);font-family:var(--f-toolbar-font, -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif);text-shadow:var(--f-toolbar-text-shadow);text-align:center;font-variant-numeric:tabular-nums;-webkit-font-smoothing:subpixel-antialiased;white-space:nowrap;pointer-events:none}
.f-carousel__toolbar.is-absolute{position:absolute;top:0;left:0;right:0}
.f-carousel__toolbar__column{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;gap:var(--f-toolbar-gap, 0);pointer-events:none}
.f-carousel__toolbar__column.is-left{justify-self:flex-start;justify-content:flex-start}
.f-carousel__toolbar__column.is-middle{justify-content:center}
.f-carousel__toolbar__column.is-right{justify-self:flex-end;justify-content:flex-end;flex-flow:nowrap}
.f-carousel__toolbar__column>*{pointer-events:all}
.f-counter{position:relative;display:flex;flex-direction:row;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin:var(--f-counter-margin, 0);padding:var(--f-counter-padding, 4px);line-height:var(--f-counter-line-height);background:var(--f-counter-bg);border-radius:var(--f-counter-border-radius)}
.f-counter span{padding:0 var(--f-counter-gap, 4px)}
:root{--f-thumbs-gap: 8px;--f-thumbs-margin: 0;--f-thumbs-padding-x: 8px;--f-thumbs-padding-y: 8px;--f-thumbs-z-index: 1;--f-thumb-width: 96px;--f-thumb-height: 72px;--f-thumb-clip-width: 46px;--f-thumb-extra-gap: 16px;--f-thumb-fit: cover;--f-thumb-opacity: 1;--f-thumb-transition: opacity .3s ease, transform .15s ease;--f-thumb-border: none;--f-thumb-border-radius: 4px;--f-thumb-transfors: none;--f-thumb-shadow: none;--f-thumb-bg: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .05));--f-thumb-focus-shadow: inset 0 0 0 .8px #222, inset 0 0 0 2.25px #fff;--f-thumb-selected-shadow: inset 0 0 0 .8px #222, inset 0 0 0 2.25px #fff}
.f-thumbs{flex-shrink:0;margin:var(--f-thumbs-margin);padding:0;background:var(--f-thumbs-bg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:max-height .3s ease,max-width .3s ease;position:relative;overflow:hidden;z-index:var(--f-thumbs-z-index)}
.f-thumbs.is-horizontal{max-height:calc(var(--f-carousel-slide-height) + var(--f-thumbs-padding-y) * 2 + var(--f-thumbs-gap) * 2)}
.f-thumbs.is-vertical{max-width:calc(var(--f-carousel-slide-width) + var(--f-thumbs-padding-x) * 2 + var(--f-thumbs-gap) * 2)}
.f-thumbs.is-ltr{direction:ltr}
.f-thumbs.is-rtl{direction:rtl}
.f-thumbs__viewport{margin:var(--f-thumbs-padding-y) var(--f-thumbs-padding-x);overflow:visible;display:grid}
.f-thumbs.is-vertical .f-thumbs__viewport{height:calc(100% - var(--f-thumbs-padding-y) * 2)}
.f-thumbs__slide{position:relative;box-sizing:border-box;grid-area:1/1;width:var(--f-carousel-slide-width);height:var(--f-carousel-slide-height);margin:0;padding:0;display:flex;align-items:center;flex-direction:column;cursor:pointer;overflow:visible}
.f-thumbs__slide:hover button{opacity:var(--f-thumb-hover-opacity, 1);transform:var(--f-thumb-hover-transform, none)}
.f-thumbs__slide:hover button:after{border:var(--f-thumb-hover-border, none);box-shadow:var(--f-thumb-hover-shadow, var(--f-thumb-shadow))}
.f-thumbs__slide button{all:unset;margin:auto;padding:0;position:relative;overflow:visible;width:100%;height:100%;outline:none;transition:var(--f-thumb-transition);border-radius:var(--f-thumb-border-radius);opacity:var(--f-thumb-opacity);transform:var(--f-thumb-transform);background:var(--f-thumb-bg)}
.f-thumbs__slide button:after{content:"";position:absolute;inset:0;z-index:1;transition:none;border-radius:inherit;border:var(--f-thumb-border);box-shadow:var(--f-thumb-shadow)}
.f-thumbs__slide button:focus-within{opacity:var(--f-thumb-focus-opacity, 1);transform:var(--f-thumb-focus-transform, none)}
.f-thumbs__slide button:focus-within:after{border:var(--f-thumb-focus-border, none);box-shadow:var(--f-thumb-focus-shadow, var(--f-thumb-shadow))}
.f-thumbs__slide:active{opacity:var(--f-thumb-active-opacity, 1);transform:var(--f-thumb-active-transform, none)}
.f-thumbs__slide:active:after{border:var(--f-thumb-active-border, none);box-shadow:var(--f-thumb-active-shadow, var(--f-thumb-shadow))}
.f-thumbs__slide.is-selected{z-index:2}
.f-thumbs__slide.is-selected button{opacity:var(--f-thumb-selected-opacity, 1);transform:var(--f-thumb-selected-transform, none)}
.f-thumbs__slide.is-selected button:after{border:var(--f-thumb-selected-border, none);box-shadow:var(--f-thumb-selected-shadow, var(--f-thumb-shadow))}
.f-thumbs__slide img{display:block;width:100%;height:100%;-o-object-fit:var(--f-thumb-fit);object-fit:var(--f-thumb-fit);border-radius:inherit;pointer-events:none}
.f-thumbs__slide img.has-lazyerror{display:none}
.f-thumbs.is-classic{--f-carousel-slide-width: var(--f-thumb-width);--f-carousel-slide-height: var(--f-thumb-height);--f-carousel-gap: var(--f-thumbs-gap)}
.f-thumbs.is-modern{--f-carousel-slide-width: calc( var(--f-thumb-clip-width) + var(--f-thumbs-gap) );--f-carousel-slide-height: var(--f-thumb-height);--f-carousel-gap: 0;--width-diff: calc((var(--f-thumb-width) - var(--f-thumb-clip-width)))}
.f-thumbs.is-modern .f-thumbs__viewport{width:calc(100% + var(--f-carousel-slide-width) * 2);margin-inline:calc(var(--f-carousel-slide-width) * -1)}
.f-thumbs.is-modern .f-thumbs__slide{--clip-shift: calc((var(--width-diff) * .5) * var(--progress));--clip-path: inset( 0 var(--clip-shift) round var(--f-thumb-border-radius, 0) );padding:0;overflow:visible;left:var(--shift, 0);will-change:left;transition:left var(--f-transition-duration) var(--f-transition-easing)}
.f-thumbs.is-modern .f-thumbs__slide button{display:block;margin-inline:50%;width:var(--f-thumb-width);clip-path:var(--clip-path);border:none;box-shadow:none;transition:clip-path var(--f-transition-duration) var(--f-transition-easing),opacity var(--f-thumb-transition-duration, .2s) var(--f-thumb-transition-easing, ease)}
.f-thumbs.is-modern .f-thumbs__slide button:after{display:none}
.f-thumbs.is-modern .f-thumbs__slide:focus:not(:focus-visible){outline:none}
.f-thumbs.is-modern .f-thumbs__slide:focus-within:not(.is-selected) button:before{content:"";position:absolute;z-index:1;top:0;left:var(--clip-shift);bottom:0;right:var(--clip-shift);transition:border var(--f-transition-duration) var(--f-transition-easing),box-shadow var(--f-transition-duration) var(--f-transition-easing);border-radius:inherit;border:var(--f-thumb-focus-border, none);box-shadow:var(--f-thumb-focus-shadow, none)}
.f-thumbs.is-modern{--f-transition-duration: .25s;--f-transition-easing: ease-out}
.f-thumbs.is-modern.is-syncing{--f-transition-duration: 0s}
:root{--f-progressbar-height: 3px;--f-progressbar-color: var(--f-carousel-theme-color, #575ad6);--f-progressbar-opacity: 1;--f-progressbar-z-index: 30}
.f-progressbar{position:absolute;top:0;left:0;right:0;z-index:var(--f-progressbar-z-index);height:var(--f-progressbar-height);transform:scaleX(0);transform-origin:0;opacity:var(--f-progressbar-opacity);background:var(--f-progressbar-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;animation-name:f-progressbar;animation-play-state:running;animation-timing-function:linear}
button>.f-progressbar{--f-progressbar-height: 100%;--f-progressbar-opacity: .2}
@keyframes f-progressbar{0%{transform:scaleX(0)}to{transform:scaleX(1)}}
[data-fullscreen-action=toggle] svg g:first-child{display:flex}
[data-fullscreen-action=toggle] svg g:last-child{display:none}
:fullscreen [data-fullscreen-action=toggle] svg g:first-child{display:none}
:fullscreen [data-fullscreen-action=toggle] svg g:last-child{display:flex}
.in-fullscreen-mode>.f-carousel{flex:1;min-width:0!important;min-height:0!important}
html.with-fancybox{width:auto;overflow:visible;scroll-behavior:auto}
html.with-fancybox body.hide-scrollbar{width:auto;margin-right:calc(var(--f-body-margin, 0px) + var(--f-scrollbar-compensate, 0px));overflow:hidden!important;overscroll-behavior-y:none}
.fancybox__dialog{width:100%;height:100vh;max-height:unset;max-width:unset;padding:0;margin:0;border:0;overflow:hidden;background:transparent;touch-action:none}
.fancybox__dialog:focus{outline:none}
.fancybox__dialog::backdrop{opacity:0}
@supports (height: 100dvh){.fancybox__dialog{height:100dvh}}
div.fancybox__dialog{position:fixed;inset:0;z-index:1050}
.fancybox__container{--fancybox-color: #dbdbdb;--fancybox-backdrop-bg: rgba(24, 24, 27, .95);--f-toolbar-margin: 0;--f-toolbar-padding: 8px;--f-toolbar-gap: 0;--f-toolbar-color: #ddd;--f-toolbar-font-size: 16px;--f-toolbar-font-weight: 500;--f-toolbar-font: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;--f-toolbar-line-height: var(--f-button-height);--f-toolbar-text-shadow: 1px 1px 1px rgba(0, 0, 0, .75);--f-toolbar-shadow: none;--f-toolbar-bg: none;--f-counter-margin: 0;--f-counter-padding: 0px 10px;--f-counter-gap: 4px;--f-counter-line-height: var(--f-button-height);--f-carousel-gap: 17px;--f-carousel-slide-width: 100%;--f-carousel-slide-height: 100%;--f-carousel-slide-padding: 0;--f-carousel-slide-bg: unset;--f-html-color: #222;--f-html-bg: #fff;--f-error-color: #fff;--f-error-bg: #333;--f-caption-margin: 0;--f-caption-padding: 16px 8px;--f-caption-color: var(--fancybox-color, #dbdbdb);--f-caption-bg: transparent;--f-caption-font: inherit;--f-caption-line-height: 1.375;--f-spinner-color-1: rgba(255, 255, 255, .2);--f-spinner-color-2: rgba(255, 255, 255, .8);--f-spinner-width: 50px;--f-spinner-height: 50px;--f-spinner-border-radius: 50%;--f-spinner-border-width: 4px;--f-progressbar-color: rgba(255, 255, 255);--f-button-width: 46px;--f-button-height: 46px;--f-button-color: #ddd;--f-button-hover-color: #fff;--f-button-outline-width: 1px;--f-button-outline-color: rgba(255, 255, 255, .75);--f-button-outline-offset: 0px;--f-button-bg: rgba(54, 54, 54, .75);--f-button-border: 0;--f-button-border-radius: 0;--f-button-shadow: none;--f-button-transition: all .2s ease;--f-button-transform: none;--f-button-svg-width: 24px;--f-button-svg-height: 24px;--f-button-svg-stroke-width: 1.75;--f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, .01)), drop-shadow(1px 2px 1px rgba(24, 24, 27, .05));--f-button-svg-fill: none;--f-button-svg-disabled-opacity: .5;--f-arrow-pos: 32px;--f-arrow-width: 50px;--f-arrow-height: 50px;--f-arrow-svg-width: 24px;--f-arrow-svg-height: 24px;--f-arrow-svg-stroke-width: 2;--f-arrow-border-radius: 50%;--f-arrow-bg: rgba(54, 54, 54, .65);--f-arrow-color: #ddd;--f-arrow-hover-color: #fff;--f-close-button-width: 34px;--f-close-button-height: 34px;--f-close-border-radius: 4px;--f-close-button-color: #fff;--f-close-button-hover-color: #fff;--f-close-button-bg: transparent;--f-close-button-hover-bg: transparent;--f-close-button-active-bg: transparent;--f-close-button-svg-width: 22px;--f-close-button-svg-height: 22px;--f-thumbs-margin: 0px;--f-thumbs-padding-x: 8px;--f-thumbs-padding-y: 8px;--f-thumbs-bg: none;--f-thumb-transition: all .2s ease;--f-thumb-width: 94px;--f-thumb-height: 76px;--f-thumb-opacity: 1;--f-thumb-border: none;--f-thumb-shadow: none;--f-thumb-transform: none;--f-thumb-focus-opacity: 1;--f-thumb-focus-border: none;--f-thumb-focus-shadow: inset 0 0 0 2px rgba(255, 255, 255, .65);--f-thumb-focus-transform: none;--f-thumb-hover-opacity: 1;--f-thumb-hover-border: none;--f-thumb-hover-transform: none;--f-thumb-active-opacity: var(--f-thumb-hover-opacity);--f-thumb-active-border: var(--f-thumb-hover-border);--f-thumb-active-transform: var(--f-thumb-hover-transform);--f-thumb-selected-opacity: 1;--f-thumb-selected-border: none;--f-thumb-selected-shadow: inset 0 0 0 2px #fff;--f-thumb-selected-transform: none;position:absolute;inset:0;overflow:hidden;outline:none;display:flex;flex-direction:column}
.fancybox__container[theme=light]{--fancybox-color: #222;--fancybox-backdrop-bg: rgba(255, 255, 255, .97);--f-toolbar-color: var(--fancybox-color, #222);--f-toolbar-text-shadow: none;--f-toolbar-font-weight: 400;--f-html-color: var(--fancybox-color, #222);--f-html-bg: #fff;--f-error-color: #555;--f-error-bg: #fff;--f-video-bg: #fff;--f-caption-color: #333;--f-spinner-color-1: rgba(0, 0, 0, .2);--f-spinner-color-2: rgba(0, 0, 0, .8);--f-spinner-border-width: 3.5px;--f-progressbar-color: rgba(111, 111, 116);--f-button-color: #333;--f-button-hover-color: #000;--f-button-outline-color: rgba(0, 0, 0, .85);--f-button-bg: rgba(255, 255, 255, .85);--f-button-svg-stroke-width: 1.3;--f-button-svg-filter: none;--f-arrow-bg: rgba(255, 255, 255, .85);--f-arrow-color: #333;--f-arrow-hover-color: #000;--f-arrow-svg-stroke-width: 1.3;--f-close-button-color: #555;--f-close-button-hover-color: #000;--f-thumb-bg: linear-gradient(#ebeff2, #e2e8f0);--f-thumb-focus-shadow: 0 0 0 1.8px #fff, 0px 0px 0px 2.25px #888;--f-thumb-selected-shadow: 0 0 0 1.8px #fff, 0px 0px 0px 2.25px #000}
.fancybox__container::backdrop{background-color:transparent}
.fancybox__container.has-vertical-thumbs{flex-direction:row-reverse}
.fancybox__container.has-vertical-thumbs:not(.is-closing) .fancybox__viewport{overflow-x:clip;overflow-y:visible}
.fancybox__container>*:not(.fancybox__carousel), .fancybox__container .fancybox__carousel>*:not(.fancybox__viewport), .fancybox__container .fancybox__carousel>.fancybox__viewport>.fancybox__slide:not(.is-selected), .fancybox__container .fancybox__carousel>.fancybox__viewport>.fancybox__slide.is-selected>*:not(.f-html,.f-panzoom__wrapper,.f-spinner){opacity:var(--f-drag-opacity, 1)}
.fancybox__container:not(.is-ready,.is-hiding){visibility:hidden}
.fancybox__container.is-revealing>*:not(.fancybox__carousel), .fancybox__container.is-revealing .fancybox__carousel>*:not(.fancybox__viewport), .fancybox__container.is-revealing .fancybox__carousel>.fancybox__viewport>.fancybox__slide:not(.is-selected), .fancybox__container.is-revealing .fancybox__carousel>.fancybox__viewport>.fancybox__slide.is-selected>*:not(.f-html,.f-panzoom__wrapper,.f-spinner){animation:var(--f-interface-enter-duration, .35s) ease none f-fadeIn}
.fancybox__container.is-hiding>*:not(.fancybox__carousel), .fancybox__container.is-hiding .fancybox__carousel>*:not(.fancybox__viewport), .fancybox__container.is-hiding .fancybox__carousel>.fancybox__viewport>.fancybox__slide:not(.is-selected), .fancybox__container.is-hiding .fancybox__carousel>.fancybox__viewport>.fancybox__slide.is-selected>*:not(.f-html,.f-panzoom__wrapper){animation:var(--f-interface-exit-duration, .35s) ease forwards f-fadeOut}
.fancybox__container.is-idle .f-carousel__toolbar{pointer-events:none;opacity:0}
.fancybox__container.is-idle .f-button.is-arrow{opacity:0}
.fancybox__container.is-idle.is-ready .f-carousel__toolbar{pointer-events:none;animation:.15s ease-out both f-fadeOut}
.fancybox__container.is-idle.is-ready .f-button.is-arrow{animation:.15s ease-out both f-fadeOut}
.fancybox__backdrop{position:fixed;inset:0;z-index:-1;background:var(--fancybox-backdrop-bg)}
.fancybox__carousel{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;position:relative;z-index:10;overflow-y:visible;overflow-x:clip}
.fancybox__carousel.is-vertical{--f-carousel-slide-height: 100%}
.fancybox__carousel.is-ltr{direction:ltr}
.fancybox__carousel.is-rtl{direction:rtl}
.fancybox__carousel>.f-button.is-arrow:before{position:absolute;content:"";inset:-30px;z-index:1}
.fancybox__viewport{display:grid;flex:1;min-height:0;min-width:0;position:relative;overflow:visible;transform:translate3d(0,var(--f-drag-offset, 0),0)}
.fancybox__viewport.is-draggable{cursor:move;cursor:grab}
.fancybox__viewport.is-dragging{cursor:move;cursor:grabbing}
.fancybox__viewport [data-selectable], .fancybox__viewport [contenteditable]{cursor:auto}
.fancybox__slide{box-sizing:border-box;position:relative;grid-area:1/1;display:flex;align-items:center;flex-direction:column;width:var(--f-carousel-slide-width);height:var(--f-carousel-slide-height);min-width:0;min-height:0;max-width:100%;margin:0;padding:var(--f-carousel-slide-padding);background:var(--f-carousel-slide-bg);backface-visibility:hidden;transform:translateZ(0);will-change:transform}
.fancybox__slide:before, .fancybox__slide:after{display:block;content:""}
.fancybox__slide:before{margin-bottom:auto}
.fancybox__slide:after{margin-top:auto}
.fancybox__slide.is-selected{z-index:1}
.fancybox__slide.f-zoomable{overflow:visible}
.fancybox__slide.has-error{--f-html-color: var(--f-error-color, --f-html-color);--f-html-bg: var(--f-error-bg, --f-html-bg)}
.fancybox__slide.has-html{overflow:auto;padding:8px}
.fancybox__slide.has-close-btn{padding-top:34px}
.fancybox__slide.has-controls:before{margin:0}
.fancybox__slide .f-spinner{cursor:pointer}
.fancybox__container.is-closing .f-caption, .fancybox__slide.is-loading .f-caption{visibility:hidden}
.fancybox__container.is-closing .fancybox__carousel{overflow:visible}
.f-button.is-close-button{--f-button-width: var(--f-close-button-width);--f-button-height: var(--f-close-button-height);--f-button-border-radius: var(--f-close-border-radius);--f-button-color: var(--f-close-button-color);--f-button-hover-color: var(--f-close-button-hover-color);--f-button-bg: var(--f-close-button-bg);--f-button-hover-bg: var(--f-close-button-hover-bg);--f-button-active-bg: var(--f-close-button-active-bg);--f-button-svg-width: var(--f-close-button-svg-width);--f-button-svg-height: var(--f-close-button-svg-height);position:absolute;top:calc(var(--f-button-height) * -1);right:0;z-index:40}
/* 3) Your authored CSS */
/*
    Custom media breakkpoints, mirrored from tailwind theme tokens
*/
/* helpful extras */
/* Custom */
/* @mixin grid-container */
/* Vertical spacing scale for content blocks */
/* Fluid font-size */
/* When users do not want motion */
/* Opposite to when users don't want motion */
/* BACKGROUND PATTERNS */
/* When touch device */
.ph {
    font-size: 1em;
    aspect-ratio: 1 / 1;
}
/* @import "./tokens/type-scale.css"; */
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    font-kerning: normal;
    width: 100%;
    font-size: 16px;
}
* { text-rendering: optimizeLegibility; }
[x-cloak]{display:none!important}
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    text-wrap: balance;
}
body ::-moz-selection {
        color: #fff;
        background-color: var(--color-brand-400);
    }
body ::selection {
        color: #fff;
        background-color: var(--color-brand-400);
    }
/* Make all anchor elements have a scroll offset */
[id], [data-section] {
    scroll-margin-top: calc(var(--site-header-height) + 20px);
}
main {
    padding-bottom: 20vh;
}
.page-productcategorypage main {
        padding-top: 100px;
    }
.page-content__section {
    padding-block: clamp(var(--spacing-8), 5vw, var(--spacing-24));
    /* background-color: var(--color-surface); */
    /* background-color: #fff; */
    scroll-margin-block: var(--site-header-height-small);
    position: relative;
    z-index: 1;
}
@media (width >= 1024px) {
.page-content__section {
        scroll-margin-block: var(--site-header-height);
}
  }
/* Utility classes: Grid containers */
.grid-container {
    max-width: var(--max-site-width);
    margin: 0 auto;
    padding-inline: clamp(var(--spacing-2), 3vw, var(--spacing-12));
    width: 100%;
    /* overflow-x: hidden; */
}
.grid-container--large {
    max-width: calc(var(--max-site-width) + 300px);
    margin: 0 auto;
    padding-inline: clamp(var(--spacing-2), 3vw, var(--spacing-12));
    width: 100%;
    /* overflow-x: hidden; */
}
.grid-container--fullwidth {
    max-width: 100vw;
    margin: 0 auto;
    padding-inline: clamp(var(--spacing-2), 3vw, var(--spacing-12));
    width: 100%;
    /* overflow-x: hidden; */
}
.surface {
    background: var(--color-surface);
}
/* Breadcrumb */
.breadcrumbs {
    /* padding-block: clamp(var(--spacing-4), 5vw, var(--spacing-8)); */
    font-family: var(--font-sans);
}
.breadcrumbs__list {
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.875rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.breadcrumbs__link span {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.breadcrumbs__current {
    /* font-weight: 600; */
    text-decoration: none;
    cursor: default;
}
:root { --focus: #18a0fb; }
/* light theme */
@media (prefers-color-scheme: dark){
  :root { --focus: #9ad8ff; } /* brighter for dark bg */
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
/* Skip “hover-only” flourishes on touch devices */
@media (hover: none) and (pointer: coarse){
  /* a { text-decoration: underline; } */
  .btn:hover, .btn--primary:hover, .attityde-form-submit:hover, .btn--secondary:hover, .btn--tertiary:hover { transform: none !important; } /* no hover motion on touch */
}
/* Reduced data + motion: safe defaults site-wide */
@media (prefers-reduced-motion: reduce){
    /* Instant animation */
    * {
        animation-duration: 0s !important;
        transition-duration: 0s !important;
    }

    /* Standard scroll */
    html {
        scroll-behavior: auto;
    }

    /* TODO: Refactor with real umbraco data */
    .bg-video {
        display:none;
    }

    /* Awaits with rendering images until necessary */
    img[loading="lazy"] {
        content-visibility: auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0s;
        transition-duration: 0s;
    }

    html {
        scroll-behavior: auto;
    }
    /* TODO: fix when real umbraco data is present */
    /* Needs to be rearranged in the html */
    .hero video {
        display:none;
    }
    /* .hero {
        background-image: var(--hero-poster)
    } */
}
@media (prefers-contrast: more) {
    :root { --button-border: 2px }
    .btn, .btn--primary, .attityde-form-submit, .btn--secondary, .btn--tertiary { border-width: var(--button-border) }
}
/* A11y skip links - Keyboard shortcuts */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 0.5rem 0.75rem;
    background: var(--color-brand-600);
    color: #fff;
}
.skip-link:focus{
    left: 0.75rem;
    top: 0.75rem;
    z-index: 9999;
}
/* Display header */
.display {
    font-family: var(--font-display);
    font-size: clamp(
    var(--font-size-4xl),
    calc(var(--font-size-4xl) + (var(--font-size-7xl) - var(--font-size-4xl)) * ((100vw - 360px) / (1240px - 360px))),
    var(--font-size-7xl)
  );
    font-weight: bold;
    /* line-height: var(--line-height-6xl); */
    line-height: var(--line-height-display);
    letter-spacing: 0.025em;
    margin-block: 0.25em;
    letter-spacing: var(--letter-spacing-base);
}
/* Heading 1 */
.h1 {
    font-family: var(--font-header);
    font-size: clamp(
    var(--font-size-2xl),
    calc(var(--font-size-2xl) + (var(--font-size-6xl) - var(--font-size-2xl)) * ((100vw - 360px) / (1240px - 360px))),
    var(--font-size-6xl)
  );
    font-weight: 700;
    /* line-height: var(--line-height-6xl); */
    line-height: var(--line-height-header);
    margin-block: 0.25em;
    letter-spacing: var(--letter-spacing-header);
}
/* Heading 2 */
.h2 {
    font-family: var(--font-header);
    font-size: clamp(
    var(--font-size-2xl),
    calc(var(--font-size-2xl) + (var(--font-size-5xl) - var(--font-size-2xl)) * ((100vw - 360px) / (1240px - 360px))),
    var(--font-size-5xl)
  );
    font-weight: 700;
    /* line-height: var(--line-height-5xl); */
    line-height: var(--line-height-header);
    margin-block: 0.25em;
    letter-spacing: var(--letter-spacing-header);
}
/* Heading 3 */
.h3 {
    font-family: var(--font-header);
    font-size: clamp(
    var(--font-size-xl),
    calc(var(--font-size-xl) + (var(--font-size-4xl) - var(--font-size-xl)) * ((100vw - 360px) / (1240px - 360px))),
    var(--font-size-4xl)
  );
    font-weight: 700;
    /* line-height: var(--line-height-4xl); */
    line-height: var(--line-height-header);
    margin-block: 0.25em;
    letter-spacing: var(--letter-spacing-header);
}
/* Heading 4 */
.h4 {
    font-family: var(--font-header);
    font-size: clamp(
    var(--font-size-lg),
    calc(var(--font-size-lg) + (var(--font-size-3xl) - var(--font-size-lg)) * ((100vw - 360px) / (1240px - 360px))),
    var(--font-size-3xl)
  );
    font-weight: 700;
    /* line-height: var(--line-height-3xl); */
    line-height: var(--line-height-header);
    margin-block: 0.25em;
    letter-spacing: var(--letter-spacing-header);
}
.h5 {
    font-family: var(--font-header);
    font-size: clamp(
    var(--font-size-lg),
    calc(var(--font-size-lg) + (var(--font-size-2xl) - var(--font-size-lg)) * ((100vw - 360px) / (1240px - 360px))),
    var(--font-size-2xl)
  );
    font-weight: 600;
    /* line-height: var(--line-height-2xl); */
    line-height: var(--line-height-header);
    margin-block: 0.25em;
    letter-spacing: var(--letter-spacing-header);
}
.h6 {
    font-family: var(--font-header);
    font-size: clamp(
    var(--font-size-lg),
    calc(var(--font-size-lg) + (var(--font-size-xl) - var(--font-size-lg)) * ((100vw - 360px) / (1240px - 360px))),
    var(--font-size-xl)
  );
    font-weight: 500;
    /* line-height: var(--line-height-xl); */
    line-height: var(--line-height-header);
    margin-block: 0.25em;
    letter-spacing: var(--letter-spacing-header);
}
/* Lead paragraph */
.lead {
    font-size: clamp(
    var(--font-size-base),
    calc(var(--font-size-base) + (var(--font-size-2xl) - var(--font-size-base)) * ((100vw - 360px) / (1240px - 360px))),
    var(--font-size-2xl)
  );
    line-height: var(--line-height-2xl);
    letter-spacing: var(--letter-spacing-2xl);
}
/* Body text */
body, p, .text-base {
    font-family: var(--font-body);
    /* @mixin fluid-type var(--font-size-base), var(--font-size-lg); */
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing-lg);
}
.text-base-sans {
    font-family: var(--font-sans);
    font-size: clamp(
    var(--font-size-sm),
    calc(var(--font-size-sm) + (var(--font-size-lg) - var(--font-size-sm)) * ((100vw - 360px) / (1240px - 360px))),
    var(--font-size-lg)
  );
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing-lg);
}
/* Small text */
.text-small {
    font-family: var(--font-sans);
    font-size: clamp(
    var(--font-size-xs),
    calc(var(--font-size-xs) + (var(--font-size-sm) - var(--font-size-xs)) * ((100vw - 360px) / (1240px - 360px))),
    var(--font-size-sm)
  );
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-base);
}
/* ===========================
   KC Denmark – External Form Skin
   Scope: .attityde-form
   =========================== */
.attityde-form {
  --bg: #ffffff;
  --text: #0f172a;           /* slate-900 */
  --muted: #64748b;          /* slate-500 */
  --border: #e2e8f0;         /* slate-200 */
  --ring: #0ea5e9;           /* sky-500 */
  --ring-weak: color-mix(in srgb, var(--ring) 35%, #fff);
  --error: #ef4444;          /* red-500 */
  --ok: #16a34a;             /* green-600 */
  --accent: #0ea5e9;         /* for accent-color on checkbox */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(2, 6, 23, .06), 0 6px 18px rgba(2, 6, 23, .06);
  --focus-outline: 3px solid var(--ring-weak);
  --gap: clamp(14px, 2vw, 18px);
  color: var(--text);
}
/* Container */
.attityde-form-container {
  background: var(--bg);
  border: 1px solid var(--color-border);
  /* border-radius: var(--radius); */
  padding: clamp(18px, 3vw, 28px);
  /* box-shadow: var(--shadow); */
}
/* Layout: stack on mobile, two columns when roomy */
.attityde-form-container {
  display: grid;
  gap: var(--gap);
}
@media (min-width: 800px) {
  .attityde-form-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Make long message span two columns */
  .attityde-form-item.long-answer, .attityde-form-navigation {
    grid-column: 1 / -1;
  }
}
/* Items */
.attityde-form-item {
  display: grid;
  gap: 8px;
}
/* Labels */
.attityde-form-label {
  font-size: 0.95rem;
  font-weight: 600;
  /* color: var(--text); */
  line-height: 1.2;
}
/* Fields (inputs & textarea) */
.attityde-form-input, .attityde-form-textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 92%, #fff);
  border: 1px solid var(--border);
  /* border-radius: var(--radius-sm); */
  padding: 12px 14px;
  line-height: 1.35;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
/* Textarea size and wrapping */
.attityde-form-textarea {
  min-height: 160px;
  resize: vertical;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Placeholder tone */
.attityde-form-input::-moz-placeholder, .attityde-form-textarea::-moz-placeholder {
  color: var(--muted);
  opacity: .9;
}
.attityde-form-input::placeholder, .attityde-form-textarea::placeholder {
  color: var(--muted);
  opacity: .9;
}
/* Focus states (AA contrast, visible even without outline) */
.attityde-form-input:focus-visible, .attityde-form-textarea:focus-visible {
  outline: none;
  border-color: var(--ring);
  box-shadow:
    0 0 0 1px var(--ring),
    0 0 0 6px var(--ring-weak);
}
/* Validation cues (native :invalid / :valid) */
.attityde-form-input:required:user-invalid, .attityde-form-textarea:required:user-invalid {
  border-color: var(--error);
  box-shadow: 0 0 0 1px var(--error) inset;
}
.attityde-form-input:user-valid, .attityde-form-textarea:user-valid {
  border-color: color-mix(in srgb, var(--ok) 60%, var(--border));
}
/* Compact number/tel inputs so iOS doesn’t zoom on focus */
@supports (-webkit-touch-callout: none) {
  .attityde-form-input[type="tel"], .attityde-form-input[type="email"], .attityde-form-input[type="text"] {
    font-size: 16px;
  }
}
/* Checkbox row */
.attityde-form-item.single-checkbox .attityde-form-field {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 10px;
}
/* Checkbox styling: simple, robust */
.attityde-form-item.single-checkbox input[type="checkbox"] {
  /* modern browsers: use accent-color */
  accent-color: var(--accent);
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  /* background: color-mix(in srgb, var(--color-brand-600) 92%, #fff); */
  background: var(--color-brand-600);
  color: #fff;
  cursor: pointer;
}
.attityde-form-item.single-checkbox input[type="checkbox"]:focus-visible {
  outline: none;
  /* box-shadow:
    0 0 0 1px var(--ring),
    0 0 0 6px var(--ring-weak); */
}
/* Submit button */
.attityde-form-submit {
    min-width: 200px;
}
.attityde-form-submit:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
}
.attityde-form-submit:active {
  transform: translateY(0);
}
/* .attityde-form-submit:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 6px var(--ring);
} */
/* Success / error messages from external script */
.attityde-form-submit-message, .attityde-form-submit-error {
  margin-top: 8px;
  font-size: .95rem;
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.attityde-form-submit-message {
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 8%, var(--bg));
}
.attityde-form-submit-error {
  color: var(--error);
  background: color-mix(in srgb, var(--error) 8%, var(--bg));
}
/* Hidden field remains hidden */
.attityde-form-item.hidden, .hidden-answer {
  display: none !important;
}
/* Better long-text handling in labels & messages */
.attityde-form, .attityde-form * {
  line-height: calc(1em + 8px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}
/* Reduce motion where appropriate */
@media (prefers-reduced-motion: reduce) {
  .attityde-form * {
    transition: none !important;
    animation: none !important;
  }
}
.devtools {
    position: fixed;
    bottom: 8px;
    left: 0;
    z-index: 90;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: start;
}
.devtools__item {
    background-color: rgba(0,0,0,0.6);
    color: #fff;
    display: block;
    padding: 0.1em 0.75em 0.1em 0.5em;
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
    text-align: center;
}
.breakpoints-helper::after {
    content: "implicit";
  }
@media (width >= 320px) {
    .breakpoints-helper::after {
      content: "x-small";
    }
  }
@media (width >= 500px) {
    .breakpoints-helper::after {
      content: "small";
    }
  }
@media (width >= 768px) {
    .breakpoints-helper::after {
      content: "medium";
    }
  }
@media (width >= 1024px) {
    .breakpoints-helper::after {
      content: "large";
    }
  }
@media (width >= 1240px) {
    .breakpoints-helper::after {
      content: "x-large";
    }
  }
@media (width >= 1480px) {
    .breakpoints-helper::after {
      content: "2x-large";
    }
  }
@media (width >= 1920px) {
    .breakpoints-helper::after {
      content: "3x-large";
    }
  }
/* 4) Components */
.site-header {
    background-color: transparent;
    font-family: var(--font-body);
    font-weight: 500;
    height: var(--site-header-height-small);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 30;
    color: #fff;
    width: 100%;
    transition: all 0.3s ease;
}
.site-header.is-page-solid,.site-header.is-solid {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
        background: #fff;
        color: var(--color-brand-600);
    }
.site-header.is-inverse {
        color: var(--color-brand-600);
    }
.mega-nav-is-open .site-header {
        transition: all 0s;
        background: #fff;
        color: var(--color-brand-600);
    }
@media (width >= 1024px) {
.site-header {
        height: var(--site-header-height);
        padding-block: 23px;
}
  }
.logo-wrapper {
    padding-block: 13px;
    padding-right: 3vw;
}
.site-header__gradient {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 2;
    background: linear-gradient(
    180deg,
    color-mix(in srgb, #000 80%, transparent) 0%,
    color-mix(in srgb, #000 60%, transparent) 20%,
    color-mix(in srgb, #000 40%, transparent) 40%,
    color-mix(in srgb, #000 20%, transparent) 60%,
    transparent 100%
  );
    height: calc(var(--site-header-height-small) * 2);
    pointer-events: none;
}
@media (width >= 1024px) {
.site-header__gradient {
        height: calc(var(--site-header-height) * 3);
}
  }
.site-header__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    text-align: left;
    /* overflow: visible; */
}
.site-header__nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 1rem;
}
.site-header__logo {
    display: flex;
    align-items: center;
    height: clamp(18px, 7vw, 25px);
    /* min-height: 18px; */
    text-decoration: none;
}
.site-header__logo svg {
        display: block;
        height: 100%;
        color: currentColor;
    }
.mobile-menu__toggle {
    display: block;
}
@media (width >= 1240px) {
.mobile-menu__toggle {
        display: none;
}
  }
.main-navigation__backdrop {
    position: fixed;
    z-index: 29;
    inset: 0;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    transition: opacity 0.2s;
    pointer-events: none;
    opacity: 0;
    will-change: opacity;
}
.mega-nav-is-open .main-navigation__backdrop {
        opacity: 1;
    }
.site-header__actions {
    display: none;
}
@media (width >= 1240px) {
.site-header__actions {
        display: block;
}
  }
/* Top bar */
.desktop-navigation {
    display: none;
    position: relative;
}
@media (width >= 1240px) {
.desktop-navigation {
        display: block;
}
  }
.desktop-navigation__list {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 40; 
}
.desktop-navigation__link {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; 
  background: none; 
  border: 0;
  font: inherit; 
  color: inherit; 
  cursor: pointer;
  padding: 1em;
  touch-action: manipulation; /* removes double-tap quirks */
  display: block;
  height: calc(var(--site-header-height) - 2px);
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75em;
}
@media (width >= 1480px) {
.desktop-navigation__link {
    padding-inline: 1.5rem;
}
  }
@media (width >= 1920px) {
.desktop-navigation__link {
    padding-inline: 2rem;
}
  }
/* Active top level link */
.desktop-navigation__link:hover, .desktop-navigation__link:focus, .desktop-navigation__item.is-active > .desktop-navigation__link {
    position: relative;
    z-index: 41;
}
.desktop-navigation__link .indicator {
    color: currentColor;
    transition: transform 0.2s ease;
    transform-origin: center center;
}
.desktop-navigation__item.has-mega.is-active > .desktop-navigation__link .indicator  {
    transform: rotateX(180deg);
}
/* 
Mega panel
*/
.mega {
    color: var(--color-text);
    z-index: 30;
    font-family: var(--font-body);

    /* Mega nav fixed */
    position: fixed;
    width: 100vw;
    left: 0;
    top: var(--site-header-height);
    border-top: solid 1px var(--color-border); 
}
/* GRID */
.mega__main-grid {
  --cols: 4;
  --gap: 8px;
  --row: auto;
  display: grid;
  grid-template-columns: repeat(var(--mega-cols, 1), minmax(0, 1fr));
  grid-auto-rows: var(--row);
  grid-auto-flow: dense;
  gap: var(--gap);
  margin-top: var(--gap);
}
/* Allow the UL items to be part of this grid */
.mega__main-grid > .mega__main-grid-inner {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Header spans full width */
.mega__main-grid-header {
  background: #fff;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 25px;
  font-size: var(--font-size-lg);
  height: auto;
  text-decoration: none;
}
.mega__main-grid-header:hover {
    background-color: rgba(255,255,255,0.85);
  }
/* Mega menu items */
.mega__item {
  background: #fff;
  padding: 0;
}
.mega__link {
    --transform-distance: 0.25em;
    --ani-speed: 0.3s;

    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    padding: 25px;
    text-decoration: none;
    color: inherit;
    /* aspect-ratio: 10/6; */
    aspect-ratio: 2/1;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    background-color: #fff;
}
.mega__link i {
        display: inline-block;
        flex-shrink: 0;
        /* opacity: 0; */
        transition: transform var(--ani-speed) ease;
            /* transform var(--ani-speed) ease, */
        will-change: transform, opacity;
        font-size: 1em;
        text-decoration: none !important;
    }
.mega__link:is(:hover,:focus-visible) i {
            transform: translate(var(--transform-distance), 0);
            opacity: 1;
        }
@media (prefers-reduced-motion: reduce) {
        .mega__link i {
            transition: none;
        }
    }
.mega__link-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.mega__link-inner i {
        height: 2em;
        width: 2em;
        background-color: var(--color-brand-secondary);
        color: currentColor;
        display: flex;
        align-items: center;
        justify-content: center;
    }
.mega__item-content {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
}
.mega__item:first-child {
    grid-row: auto;
    grid-column: 1;
    align-self: stretch;
}
.mega__item:first-child .mega__link {
        aspect-ratio: unset !important;
        height: 100%;
    }
/* If mega menu only has 4 cells, we make them taller */
/* .mega__main-grid:has(> ul > li:nth-child(-n+4)) .mega__item .mega__link {
    aspect-ratio: 3/2;
} */
/* Desktop: 4 columns → need at least 5 items */
.mega__main-grid:has(> ul > li:nth-child(n+5)) .mega__item:first-child {
    grid-row: span 2;
}
:is(.mega__main-grid:has( > ul > li:nth-child(n + 5)) .mega__item:first-child) .mega__link {
        background-color: var(--color-brand-600);
        color: #fff;
        aspect-ratio: 2/1;
    }
:is(:is(.mega__main-grid:has( > ul > li:nth-child(n + 5)) .mega__item:first-child) .mega__link) .mega__link-inner i {
            background-color: #fff;
            color: #000;
        }
/* JS-only baseline: start hidden, ready for GSAP to reveal */
html.js [data-mega-panel].is-armed .mega__main-grid-header, html.js [data-mega-panel].is-armed .mega__item {
  opacity: 0;
  transform: translateY(8px);
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-mega-panel].is-armed .mega__main-grid-header, html.js [data-mega-panel].is-armed .mega__item {
    opacity: 1;
    transform: none;
  }
}
/* Responsive */
@media (max-width: 1100px) {
  .mega__main-grid { --cols: 3; }
}
@media (max-width: 900px) {
  .mega__main-grid { --cols: 2; }
  .mega__item:first-child { grid-row: span 2; }
}
@media (max-width: 600px) {
  .mega__main-grid { --cols: 1; --row: auto; }
  .mega__item:first-child { grid-row: auto; }
}
/* DEBUG ONLY */
/* .is-mega-open [data-mega-panel] .mega__main-grid-header,
.is-mega-open [data-mega-panel] .mega__item { opacity: 1 !important; transform: none !important; } */
/* Panel is always in the DOM; closed by opacity/visibility so children can animate */
.mega {
  position: fixed;
  width: 100vw;
  left: 0;
  top: var(--site-header-height);
  border-top: solid 1px var(--color-border); 
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s linear .18s;
  /* optional: z-index if it’s under other elements */
  z-index: 50;
}
/* Open state */
.mega.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s;
}
/* Items: animate in when panel gets .is-open */
.mega__item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .32s ease-out, transform .32s ease-out;
}
.mega.is-open .mega__item {
  opacity: 1;
  transform: translateY(0);
}
/* Optional stagger */
.mega.is-open .mega__main-grid-inner > .mega__item:nth-child(2){ transition-delay:.1s; }
.mega.is-open .mega__main-grid-inner > .mega__item:nth-child(3){ transition-delay:.15s; }
.mega.is-open .mega__main-grid-inner > .mega__item:nth-child(4){ transition-delay:.2s; }
.mega.is-open .mega__main-grid-inner > .mega__item:nth-child(5){ transition-delay:.35s; }
.mega.is-open .mega__main-grid-inner > .mega__item:nth-child(6){ transition-delay:.4s; }
.mega.is-open .mega__main-grid-inner > .mega__item:nth-child(7){ transition-delay:.45s; }
.mega.is-open .mega__main-grid-inner > .mega__item:nth-child(8){ transition-delay:.5s; }
.mega.is-open .mega__main-grid-inner > .mega__item:nth-child(9){ transition-delay:.55s; }
.mega.is-open .mega__main-grid-inner > .mega__item:nth-child(10){ transition-delay:.6s; }
.mega.is-open .mega__main-grid-inner > .mega__item:nth-child(n + 10){ transition-delay:.65s; }
@media (prefers-reduced-motion: reduce){
  .mega, .mega__item { transition: none; transform: none; opacity: 1; visibility: visible; }
}
.mobile-nav__wrapper {
    --btn-size: 60px;
    --max-width: 500px;

    position: relative;
    z-index: 50;
}
@media (width >= 1240px) {
.mobile-nav__wrapper {
        display: none;
}
  }
.mobile-nav__backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background-color: var(--color-overlay);
}
.mobile-navigation__trigger {
    display: flex;
    align-items: center;
    font-size: var(--font-size-3xl);
}
.mobile-navigation__trigger i {
        font-size: 36px;
    }
.mobile-nav {
    color: var(--color-text);
    display: block;
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    z-index: 50;
    width: 100vw;
    max-width: var(--max-width);
    background: #fff;
    overflow: hidden;
}
.mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    height: var(--site-header-height-small);
    border-bottom: solid 1px var(--color-border);
}
.mobile-nav__header-back {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--btn-size);
    aspect-ratio: 1 / 1;
    padding: 0 1rem;
    border-right: 1px solid var(--color-border);
}
.mobile-nav__header-title {
    padding: 0 1rem;
    flex: 1;
    transition: all 0.3s ease;
}
.mobile-nav__header-close {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--btn-size);
    aspect-ratio: 1 / 1;
    padding: 0 1rem;
}
.mobile-nav__pane {
    width: 100%;
    flex: none;
}
.mobile-nav__pane-list {
    list-style: none;
    margin: 0;
    height: 100%;
    overflow-y: auto;
    width: 100vw;
    max-width: var(--max-width);
}
.mobile-nav__pane-list-item {
    border-bottom: solid 1px var(--color-border);
}
.mobile-nav__pane-link-wrapper {
    display: flex;
    align-items: center;
    font-weight: 400;
}
.mobile-nav__pane-list-link {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--btn-size);
    padding: 0 1.3rem;
}
.mobile-nav__pane-list-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--btn-size);
    aspect-ratio: 1 / 1;
    padding: 0 1rem;
    border-left: 1px solid var(--color-border);
}
/* 
.mobile-menu__toggle {
    display: flex;
    align-items: center;
    font-size: var(--font-size-3xl);
}

.mobile-menu__backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
} */
/* .mobile-menu__overlay {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 50;
    color: var(--color-brand-600);
    background: var(--color-brand-contrast);
    width: 100%;
    max-width: 400px;
    height: 100%;
    transition: transform 1s ease;
} */
.site-footer {
    background-color: var(--color-brand-600);
    color: var(--color-brand-contrast);
    font-family: var(--font-body);
    padding-block: clamp(var(--spacing-8), 10vw, var(--spacing-16));
    position: relative;
    z-index: 1;
}
.site-footer__wave {
    width: 100vw;
    height: 250px;
    position: absolute;
    top: -250px;
    z-index: 2;
    pointer-events: none;
}
.site-footer__wave svg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }
:is(.site-footer__wave svg):last-child {
            top: -5px;
            z-index: 1;
        }
.site-footer__navigation {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--spacing-12);
    position: relative;
}
@media (width >= 500px) {
.site-footer__navigation {
        grid-template-columns: repeat(2, 1fr);
}
  }
@media (width >= 768px) {
.site-footer__navigation {
        grid-template-columns: repeat(2, 1fr);
}
  }
@media (width >= 1024px) {
.site-footer__navigation {
        grid-template-columns: repeat(3, 1fr);
}
  }
@media (width >= 1240px) {
.site-footer__navigation {
        grid-template-columns: repeat(4, 1fr);
}
  }
.site-footer__navigation-column {}
.site-footer__navigation-column-title {
    /* margin-bottom: 1em; */
    padding: 0.5em 0 1em;
    display: block;
    font-weight: 600;
    font-size: var(--font-size-lg);
    text-decoration: none;
    --transform-distance: 0.25em;
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.site-footer__navigation-column-title i {
      display: inline-block;
      flex-shrink: 0;
      opacity: 0;
      transition: 
        transform var(--micro-animations-duration) ease,
        opacity   var(--micro-animations-duration) ease; 
      will-change: transform, opacity;
      font-size: 1em;
      text-decoration: none !important;
    }
/* span {
        text-decoration-line: underline;
        text-decoration-style: dashed;
        text-underline-offset: 0.5em;
        text-decoration-color: currentColor;
      } */
.site-footer__navigation-column-title:is(:hover,:focus-visible) i {
        text-decoration: none !important;
      }
.site-footer__navigation-column-title:is(:hover,:focus-visible) .ph-caret-right,.site-footer__navigation-column-title:is(:hover,:focus-visible) .ph-arrow-right {
        transform: translate(var(--transform-distance), 0);
        opacity: 1;
      }
.site-footer__navigation-column-title:is(:hover,:focus-visible) .ph-arrow-up-right {
        opacity: 1;
        transform: translate(var(--transform-distance), calc(-1 * var(--transform-distance)));
      }
@media (prefers-reduced-motion: reduce) {
        .site-footer__navigation-column-title i { transition: none; }
    }
/* i {
        display: none;
    } */
/* span {
        text-underline-offset: 0.5em;
        text-decoration: underline;
    } */
.site-footer__navigation-column-title:focus-visible,.site-footer__navigation-column-title:hover {
        text-decoration-style: dashed;
        text-decoration: none;
    }
.site-footer__navigation-column-list {
    /* display: none; */

    display: flex;
    flex-direction: column;
    gap: 0.5em;
    /* @mixin respond (--sm) {
    } */
}
.site-footer__navigation-column-list-item {}
.site-footer__navigation-column-link {
    display: block;
    padding: 0.5em 0;
    --transform-distance: 0.25em;
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.site-footer__navigation-column-link i {
      display: inline-block;
      flex-shrink: 0;
      opacity: 0;
      transition: 
        transform var(--micro-animations-duration) ease,
        opacity   var(--micro-animations-duration) ease; 
      will-change: transform, opacity;
      font-size: 1em;
      text-decoration: none !important;
    }
/* span {
        text-decoration-line: underline;
        text-decoration-style: dashed;
        text-underline-offset: 0.5em;
        text-decoration-color: currentColor;
      } */
.site-footer__navigation-column-link:is(:hover,:focus-visible) i {
        text-decoration: none !important;
      }
.site-footer__navigation-column-link:is(:hover,:focus-visible) .ph-caret-right,.site-footer__navigation-column-link:is(:hover,:focus-visible) .ph-arrow-right {
        transform: translate(var(--transform-distance), 0);
        opacity: 1;
      }
.site-footer__navigation-column-link:is(:hover,:focus-visible) .ph-arrow-up-right {
        opacity: 1;
        transform: translate(var(--transform-distance), calc(-1 * var(--transform-distance)));
      }
@media (prefers-reduced-motion: reduce) {
        .site-footer__navigation-column-link i { transition: none; }
    }
.landing-page-hero {
    position: relative;
    padding-top: var(--site-header-height);
}
.landing-page-hero__bg-image {
    position: absolute;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    z-index: 0;
}
.landing-page-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    min-height: 500px;
    color: var(--color-brand-contrast);
    text-align: center;

    gap: clamp(10px, 7vh, 70px);
    padding-top: calc(var(--site-header-height-small) / 2);
    backdrop-filter: blur(10px);
    margin-top: 5vh;
    border: solid 1px currentColor;
}
.landing-page-hero__header {
    max-width: 800px;
}
.landing-page-hero__text {
    font-family: var(--font-font-sans);
    max-width: 800px;
}
/*
    Product category page
*/
.products-wrapper {
    --products-spacing: 6vw;

    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: clamp(50px, var(--products-spacing), 100px);
    overflow: visible;
    margin-top: var(--spacing-4);
}
.products__side-bar {
    display: none;
}
@media (width >= 1024px) {
.products__side-bar {
        width: clamp(300px, 18vw, 400px);
        position: sticky;
        top: calc(var(--site-header-height) + 20px);
        display: block;
}
  }
.product-list-wrapper {
    flex: 1;
}
.product-list-wrapper .breadcrumbs {
        margin-block: var(--spacing-2);
    }
.product-list-wrapper__header {
    margin-block: var(--spacing-12);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}
.product-list-wrapper__header .product-list-wrapper__title {
        margin: 0;
    }
.product-list-wrapper__header .product-list-wrapper__text {
        max-width: 800px;
    }
.product-list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: clamp(10px, 2vw, 20px);
    margin-bottom: clamp(10px, 2vw, 20px);
    width: 100%;
}
@media (width >= 650px) {
.product-list {
        grid-template-columns: repeat(2, 1fr);
}
  }
@media (width >= 1240px) {
.product-list {
        grid-template-columns: repeat(3, 1fr);
}
  }
.product-list__item {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
}
.product-list__item:hover {
        /* background-color: #EBEBEB; */
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
.product-list__item-link  {
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.product-list__item-header .tag-line {
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
        margin-top: 8px;
    }
.product-list__item-title {
    margin: 0;
    vertical-align: baseline;
    line-height: 1;
    font-size: var(--font-size-lg);
}
.product-list__item-image-wrapper {
    aspect-ratio: 1/1;
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: 0 auto var(--spacing-4);
}
.product-list__item-image-wrapper .product-list__item-image {
        position: absolute;
        -o-object-fit: contain;
           object-fit: contain;
        -o-object-position: center;
           object-position: center;
        height: 100%;
        width: 100%;
    }
@media (width >= 1024px) {
.product-list__item-image-wrapper {
        margin-bottom: var(--spacing-4);
        max-width: none;
}
  }
.product-page__sections {
    position: relative;
}
.product-page-section {
    background: transparent;
    position: relative;
    /* overflow: hidden; */
}
/*
PRODUCT PAGE HERO
*/
.product-page-hero {
    /* background-color: #1a304f; */
    background-color: var(--color-brand-600);
    color: var(--color-brand-contrast);
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-block: calc(var(--site-header-height)) var(--site-header-height-small);
    min-height: 98vh;
    display: flex;
    align-items: center;
    margin-bottom: 5vw;
}
.product-page-hero .tag-context {
        font-size: var(--font-size-sm);
    }
.product-page-hero .tag-line {
        font-size: var(--font-size-lg);
    }
@media (width >= 1024px) {
.product-page-hero {
        padding-block: calc(var(--site-header-height) * 1.5) var(--site-header-height-small);
}
  }
.product-page__parent-link {
    display: none;
}
@media (width >= 1024px) {
.product-page__parent-link {
        font-family: var(--font-sans);
        display: flex;
        align-items: center;
        gap: 0.75em;
        width: -moz-min-content;
        width: min-content;
        white-space: nowrap;
        position: absolute;
        left: clamp(var(--spacing-2), 3vw, var(--spacing-12));
        top: 0;
}
  }
.product-page__parent-link:hover span {
        text-decoration: underline;
    }
.product-page-hero__content-bg {
    position: fixed;
    height: 200%;
    width: 200%;
    -o-object-fit: cover;
       object-fit: cover;
    opacity: 0.07;
    z-index: 0;
    left: 0;
    top: 0;
    pointer-events: none;
}
.product-page-hero__content-wrapper {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 6vw;
    position: relative;
    z-index: 2;
    overflow: hidden;
}
@media (width >= 1024px) {
.product-page-hero__content-wrapper {
        /* align-items: start; */
        flex-direction: row;
}
  }
.product-page-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    gap: clamp(20px, 5vw, 50px);
    height: 100%;
    width: 100%;
    padding-bottom: 5vh;
}
@media (width >= 1024px) {
.product-page-hero__content {
        max-width: 45%;
        padding-top: 8vh;
}
  }
.product-page-hero__content-image {
    /* height: 100%; */
    display: flex;
    align-items: center;
    justify-content: end;
    flex: 1;
    position: relative;
    /* padding: 2vw; */
    /* max-height: 80vh; */
    aspect-ratio: 6/5;
}
.product-page-hero__content-image .product-page-hero__product-image {
        /* max-width: 100%; */
        /* width: 600px; */
        -o-object-fit: contain;
           object-fit: contain;
        width: 100%;
        height: 100%;
    }
.product-page-hero__content-image .model-3d-button {
        display: none;
    }
@media (width >= 1024px) {
.product-page-hero__content-image .model-3d-button {
            position: absolute;
            display: flex;
            bottom: 3px;
            /* top: 3px; */
            left: 0;
    }
  }
@media (width >= 1024px) {
.product-page-hero__content-image {
        justify-content: center;
}

        .product-page-hero__content-image .product-page-hero__product-image {
            /* height: 100%; */
            /* max-height: 100%; */
            /* margin: 0 auto; */
        }
  }
.product-page-hero__content-text {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.tag-line.product-id {
    margin-top: var(--spacing-2);
    font-weight: 400;
}
.product-page-hero__header {
    margin: 0;
    line-height: 1;
}
.product-page-hero__text {
    font-size: clamp(var(--font-size-md), 5vw, var(--font-size-xl));
}
.product-page-hero__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(10px, 2vw, 20px);
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
    padding-bottom: 4px;
    width: 100%;

    /* .model-3d-button {
        @mixin respond (--lg) {
            display: none;
        }
    } */
}
@media (width >= 1024px) {
.product-page-hero__actions {
        justify-content: start;
}
  }
.product-page-hero__actions-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: clamp(4px, 2vw, 10px);
    width: 100%;
}
@media (width >= 500px) {
.product-page-hero__actions-grid {
        grid-template-columns: repeat(2, 1fr);
}
  }
/* */
.product-page__bg {
    --grid-size: 100px;
    --grid-angle: 15deg;
    --grid-color: rgba(221,221,221,.9);
    position: fixed;
    inset: 0;
    background:
    repeating-linear-gradient(
      var(--grid-angle),
      var(--grid-color) 0 1px,
      transparent 1px var(--grid-size)
    ),
    repeating-linear-gradient(
      calc(var(--grid-angle) + 90deg),
      var(--grid-color) 0 1px,
      transparent 1px var(--grid-size)
    );
    background-repeat: repeat;
    background-position: center center;
}
.product-page-section__box {
    --fluid-spacing: clamp(var(--spacing-2), 4vw, var(--spacing-12));
    --fluid-spacing-xl: clamp(var(--spacing-8), 10vw, var(--spacing-16));

    backdrop-filter: blur(4px);
    background-color: #fff;
    /* border: solid 1px var(--color-border); */
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
    gap: var(--fluid-spacing);
    /* margin-bottom: var(--fluid-spacing); */
    /* padding: var(--fluid-spacing); */
    padding: var(--fluid-spacing);
    position: relative;
    width: auto;
    z-index: 1;
}
@media (width >= 1024px) {
.product-page-section__box {
        border: solid 1px var(--color-border);
        display: flex;
        flex-direction: row;
        gap: var(--fluid-spacing-xl);
        margin-bottom: var(--fluid-spacing-xl);
        padding: var(--fluid-spacing-xl);
        min-height: 600px;
}
  }
@media (width >= 1240px) {
.product-page-section__box {
        /* grid-template-columns: repeat(2, 1fr); */
}
  }
.product-page-section__content {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: var(--spacing-12);
    position: relative;
    z-index: 2;
    height: 100%;
    width: 45%;
}
.product-page-section__content.product-page-section__content--media {
        background-color: #FAFAFA;
        /* padding: 50px; */
        /* width: 55%; */
    }
.product-page-section__content .tag-line {
        color: var(--color-text-muted);
        font-size: var(--font-size-lg);
    }
.product-page-section__ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.product-page-section__content--intro {
    min-height: 60vh;
    justify-content: space-between;
}
.product-page-section__content-top {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.product-page__main-image {
    position: relative;
    height: 100%;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}
@media (width >= 1024px) {
.product-page__main-image {
        aspect-ratio: auto;
}
  }
@media (width >= 1240px) {
.product-page__main-image {
        aspect-ratio: 1 / 1;
}
  }
.product-page-media__image {
    position: absolute;
    inset: 0;
    -o-object-fit: cover;
       object-fit: cover;
    height: 100%;
    width: 100%;
}
/* ACCESSORIES LIST */
.accessories-list {
    list-style: none;
    width: 100%;
    max-width: 1200px;
}
.accessories-list__item {
    border: solid 1px var(--color-border);
    border-width: 0 0 1px 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    padding: 30px;
}
.accessories-list__item .tag-line {
        color: var(--color-text-muted);
    }
.accessories-list__item-image {
    min-width: 100px;
    max-width: 200px;
    flex-shrink: 0;
    display: block;
}
.accessories-list__item-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}
.accessories-list__item-header {
    margin: 0;
}
.accessories-list__item-text {

}
/* Table data list  */
.table-data-list {
    display: block;
    width: 100%;
}
.table-data-list.col-4 {
        grid-template-columns: 8ch minmax(30%, 1fr) minmax(auto, 1fr) minmax(20%, 1fr);
    }
.table-data-list__item {
    --gap: clamp(16px, 8vw, 100px);

    border-bottom: solid 1px var(--color-border);
    -moz-column-gap: var(--gap);
         column-gap: var(--gap);
    display: grid;
    font-family: var(--font-sans);
    font-size: var(--font-size-lg);
    grid-template-columns: 4ch minmax(55%, 1fr) minmax(200px, 1fr);
    list-style: none;
    padding-block: var(--spacing-16);
    row-gap: var(--spacing-4);
}
.table-data-list__item:last-child {
        border-bottom: 0;
    }
.table-data-list__item-top {
    align-items: center;
    display: grid;
    font-family: var(--font-body);
    font-size: var(--font-size-xl);
    grid-column: 1 / 4;
    grid-template-columns: subgrid;
    /* padding-bottom: var(--spacing-4); */
    font-weight: 600;
}
.table-data-list__item-number {
    font-variant-numeric: tabular-nums;
    grid-column: 1;
}
.table-data-list__item-header {
    font-size: var(--font-size-xl);
    grid-column: 2 / 4;
}
.table-data-list__item-content {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: start;
    color: var(--color-text-muted);
    /* padding-block: var(--spacing-4) var(--spacing-16); */
    border-bottom: solid 1px var(--color-border);
    font-family: var(--font-sans);
}
.table-data-list__item-content:last-child {
        border: 0;
        padding-bottom: 0;
    }
@supports not (grid-template-columns: subgrid) {
  .table-data-list__item { display: contents; }
}
.table-data-list__item-description {
    white-space: pre-wrap;
    grid-column: 2;
    font-family: var(--font-body);
    letter-spacing: var(--letter-spacing-sm);
    display: flex;
    flex-direction: column;
    gap: 2em;
}
.accessories-content-list {
    margin-top: 2em;
    grid-column: 2;
    font-family: var(--font-body);
    letter-spacing: var(--letter-spacing-sm);
}
.accessories-content-list ul,.accessories-content-list ol {
        list-style: disc;
        padding-left: 1em;
        list-style-position: inside;

    }
.table-data-list__item-image {
    grid-column: 3;
    height: 200px;
}
.table-data-list__item-image img {
        height: 100%;
        width: auto;
    }
.product-page-section__header {
    margin: 0;
    padding: 0.025em;
    max-width: 800px;
    color: var(--color-display);
    position: relative;
    z-index: 1;
}
.product-page-section__header.display {
        font-size: 80px;
    }
.product-page-section__text {
    white-space: pre-wrap;
    color: var(--color-text-muted);
    max-width: 600px;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-lg);
}
.product-page-section__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(8px, 2vw, 20px);
    flex-wrap: wrap;
    /* width: min-content; */
    width: auto;
    /* max-width: 400px; */
    justify-content: center;

    /* .btn {
        min-width: 50%;
    } */
}
@media (width >= 1024px) {
.product-page-section__actions {
        justify-content: start;
        /* width: min-content; */
}
  }
.product-page-section__actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
    width: 100%;
}
/* PRODUCT GALLERY */
.product-gallery-slider {
    position: relative;
    width: 100%;
}
.product-gallery-slider__overlay-trigger {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    height: 50px;
    width: 50px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    z-index: 3;
    background-color: #fff;
}
.product-gallery-slider__overlay-trigger i {
        font-size: 24px;
    }
.product-gallery-slider__item {
    max-height: 90vh;
    width: auto;
    cursor: grab;
    width: 100%;
}
.product-gallery-slider__item-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    gap: 10px;
    height: 100%;
    overflow: visible;
}
.product-gallery-slider__item-inner .swiper-slide__image {
        width: 100%;
        position: relative;
        overflow: hidden;
        height: 100%;
        aspect-ratio: 15/10;
    }
.product-gallery-slider__item-inner img {
        position: absolute;
        -o-object-fit: contain;
           object-fit: contain;
        width: 100%;
        height: 100%;
    }
.product-gallery-slider__item-inner .swiper-slide__text {
        font-family: var(--font-sans);
        text-align: center;
        width: 100%;
        text-align: center;
        z-index: 2;
    }
/* PRODUCT DOWNLOADS */
.download-list {
    width: 100%;
    border-top: solid 1px var(--color-border);
    margin-top: var(--spacing-12);
}
.download-list__item {    
    font-family: var(--font-sans);
    border-bottom: solid 1px var(--color-border);
    color: var(--color-brand-600);
}
.download-list__item a {
        display: flex;
        gap: 2em;
        align-items: center;
        padding-block: 1em;
    }
.download-list__item i {
        font-size: 1.5em;
        display: block;
        color: currentColor;
    }
/* INDEX */
.product-page__index-rail {
    position: sticky;
    top: calc(var(--site-header-height) + 20px);
    left: 0;
    height: 0;
    z-index: 10;
    overflow: visible;

    display: none;
}
.product-page__index {
    --handle: 44px;

    display: none;
    flex-direction: column;
    gap: var(--spacing-4);
    /* left: -100px; */
    top: calc(var(--site-header-height) + 20px);
    z-index: 10;
    background: #fff;
    border: 1px solid var(--color-border);
    padding: var(--spacing-6);
    transition: transform 0.3s ease;
    transform: translateX(calc(-100% + var(--spacing-2)));
    /* width: min-content; */

    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(calc(-100% + var(--handle)));
    transition: transform 0.5s ease;
    min-width: 240px;

}
.product-page__index:hover {
        transform: translateX(0);
    }
@media (width >= 1240px) {
.product-page__index {
        display: flex;

}
  }
@media (width >= 1480px) {
.product-page__index {
        padding: var(--spacing-8) var(--handle) var(--spacing-8) var(--handle);
        transform: translateX(calc(-100% +  var(--handle)));

}
  }
.product-page__index-link {
    color: var(--color-brand-600);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 0.5em;
    padding: 0.5em;
    font-family: var(--font-sans);
}
.product-page__index-link i {
        flex-shrink: 0;
        color: currentColor;
        display: block;
        aspect-ratio: 1/1;
        font-size: 1.5em;
        height: 1.5em;
    }
/* EXTRA INFORMATION */
.legacy-html {
    margin-top: 100px;
}
.legacy-html table [width],.legacy-html table [align],.legacy-html table [bgcolor],.legacy-html table[border],.legacy-html td[border],.legacy-html tr[border] {
        width: auto !important;
        /* text-align: inherit !important; */
        background: transparent !important;
        border-top: 0 !important;
        border-right: 0 !important;
    }
.legacy-html tr {
        /* border-right: 1px solid var(--color-border) !important; */
        border-bottom: 1px solid var(--color-border) !important;
    }
.legacy-html td,.legacy-html th {
        padding: 12px 16px !important;
        vertical-align: top;
    }
.legacy-html tr:has(td:nth-of-type(2)) td:last-of-type {
        text-align: right;
    }
/* FEATURES */
.product-page-features {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
}
@media (width >= 1240px) {
.product-page-features {
        flex-direction: row;
}
  }
.product-page-features__header {
    margin: 0;
    width: 100%;
}
@media (width >= 1240px) {
.product-page-features__header {
        width: 30%;
}
  }
.product-page-features__header .h2 {
        border-bottom: solid 1px var(--color-border);
        padding-bottom: 0.25em;
    }
.product-page-features__grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
    margin-top: 0;
    border: solid 1px var(--color-border);
    border-width: 1px 0 0 1px;
}
@media (width >= 768px) {
.product-page-features__grid {
        grid-template-columns: repeat(2, 1fr);
}
  }
@media (width >= 1240px) {
.product-page-features__grid {
        width: 70%;
}
  }
.product-page-features__grid-item {
    padding: 10px 20px 20px;
    border-bottom: solid 1px var(--color-border);
    border-right: solid 1px var(--color-border);
}
@media (width >= 768px) {
.product-page-features__grid-item {
        border-bottom: solid 1px var(--color-border);
        border-right: solid 1px var(--color-border);
        padding: 20px 30px 30px;
}
  }
.product-page-features__grid-item-header {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}
.product-page-features__grid-item-index {
    font-size: 32px;
    font-weight: 700;
    flex-shrink: 0;
}
/* SPECIFICATIONS */
.product-page-specifications {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
}
.product-page-specifications__header {
    width: 100%;
    border-bottom: solid 1px var(--color-border);
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.product-page-specifications__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    gap: 30px;
    width: 100%;
}
@media (width >= 1240px) {
.product-page-specifications__content {
        flex-direction: row;
        gap: 100px;
}
  }
.product-page-section__text {
    /* width: 30%; */
    white-space: unset;
    margin-block: 30px;
}
.product-page-specifications__table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid var(--color-border);
    width: 100%;
}
@media (width >= 1240px) {
.product-page-specifications__table {
        border-width: 0 1px;
        width: 70%;
}
  }
.specs-definition-list {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
@media (width >= 500px) {
.specs-definition-list {
        display: grid;
        grid-template-columns: minmax(12rem,1fr) 2fr;
}
  }
.specs-definition-list dt, .specs-definition-list dd {
  margin: 0;
  padding: 16px 32px;
  border-bottom: 1px dashed var(--specs-sep, #e9ecef);
}
dl:last-child :is(.specs-definition-list dt,.specs-definition-list dd) {
    border-bottom: 1px solid var(--specs-sep, #e9ecef);
  }
.specs-definition-list dt {
  font-weight: 600;
  color: #333;
}
.specs-definition-list dd {
  /* vertical divider between columns */
  border-left: 1px dashed var(--specs-divider, #cfd6dc);
  color: var(--color-text-muted);
}
.specs-list {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}
.specs-list li {
    margin: 0;
    padding: 16px 32px;
    border-bottom: 1px dashed var(--specs-sep, #e9ecef);
}
:is(.specs-list li):last-child {
        border-bottom-style: solid;
    }
/* mobile: stack */
@media (max-width: 640px) {
  .specs-list { grid-template-columns: 1fr; }
  .specs-list dd { border-left: 0; }
}
/* 
    Content Section blocks
*/
.content-section, .content-section--split-content {
    --fluid-spacing: clamp(var(--spacing-4), 6vw, var(--spacing-12));
    --fluid-spacing-xl: clamp(var(--spacing-8), 10vw, var(--spacing-20));

    backdrop-filter: blur(4px);
    background-color: #fff;
    border: solid 1px var(--color-border);

    margin-bottom: var(--fluid-spacing);
    padding: var(--fluid-spacing);
    position: relative;
    width: auto;
    z-index: 1;
}
@media (width >= 1024px) {
.content-section, .content-section--split-content {
        margin-bottom: var(--fluid-spacing-xl);
        padding: var(--fluid-spacing-xl);
        min-height: 600px;
}
  }
@media (width >= 1240px) {
.content-section, .content-section--split-content {
        /* grid-template-columns: repeat(2, 1fr); */
}
  }
/* Split content block */
.content-section--split-content {
    display: flex;
    align-items: start;
    flex-direction: column-reverse;
    justify-content: center;
    gap: var(--fluid-spacing);
    margin: 0 auto;
}
@media (width >= 1024px) {
.content-section--split-content {
        display: flex;
        flex-direction: row;
        gap: var(--fluid-spacing-xl);
        margin-bottom: var(--fluid-spacing-xl);
        padding-block: var(--fluid-spacing-xl);
        padding-inline: 0;
        min-height: 600px;
}
  }
.content-section__content, .content-section__content--text, .content-section__content--media {
    background-color: #fff;
    height: 100%;
    max-width: 1000px;
    position: relative;
    width: 100%;
    z-index: 2;
}
:is(.content-section__content,.content-section__content--text,.content-section__content--media) .tag-line {
        color: var(--color-text-muted);
        font-size: var(--font-size-lg);
    }
.content-section__content--text {
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: var(--spacing-12);
}
.content-section__content--text.reverse {
        text-align: right;
        align-items: end;
    }
@media (width >= 1024px) {
.content-section__content--text {
        width: 45%;
}
  }
.content-section__content--media {
    background-color: #FAFAFA;
    padding: 50px 0;
}
@media (width >= 1024px) {
.content-section__content--media {
        aspect-ratio: 4/3;
        padding: 50px;
        flex-shrink: 0;
        width: 55%;
}
  }
/*  */
.content-section__content-header {
    color: var(--color-display);
    margin: 0;
    max-width: 800px;
    padding: 0.025em;
    position: relative;
    z-index: 1;   
}
.content-section__content-header.display {
        font-size: 80px;
    }
.content-section__content-text {
    white-space: pre-wrap;
    color: var(--color-text-muted);
    max-width: 600px;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-lg);
}
.content-section__ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
/* Media gallery */
/* Layout */
.media-gallery {}
.media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 8px;      /* base row height used for spanning */
  gap: 24px;
}
/* Cards (neutral gray like in your mock) */
.media-card {
  position: relative;
  background: #e2e2e2;
  border-radius: 8px;
  overflow: hidden;
}
/* Image fills the card */
.media-card > img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
/* Heights: tune these spans to taste to match your exact mock */
.media-card--sm { grid-row: span 30; }
/* short */
.media-card--md { grid-row: span 42; }
/* medium */
.media-card--lg { grid-row: span 60; }
/* tall */
/* Responsive: collapse to 2 columns then 1 */
@media (max-width: 1024px) {
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .media-grid { grid-template-columns: 1fr; grid-auto-rows: 10px; }
  .media-card--sm { grid-row: span 32; }
  .media-card--md { grid-row: span 46; }
  .media-card--lg { grid-row: span 72; }
}
.page-hero {
    background-color: var(--color-surface);
    color: var(--color-brand-contrast);
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.page-hero::after {
        content: '';
        height: 100%;
        width: 100%;
        position: absolute;
        inset: 0;
        background: var(--color-overlay);
        z-index: 1;
    }
.page-hero.no-content {
        min-height: 50vh;
    }
@media (width >= 1240px) {
.page-hero {
        min-height: 600px;
}

        .page-hero::after {
            display: none;
        }

        .page-hero.no-content {
            min-height: 600px;
        }
  }
.page-hero__background {
    position: absolute;
    z-index: 1;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 100%;
}
.page-hero__background.page-hero-video {
        opacity: 0;
        transition: opacity 0.8s ease-in-out;
    }
.page-hero__background.page-hero-video.is-visible {
        opacity: 1;
    }
.page-hero__background-image {
    position: absolute;
    z-index: 1;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 100%;
}
.page-hero__background-image.image-right {
        width: auto;
        -o-object-fit: unset;
           object-fit: unset;
        left: 60%;
        bottom: -20%;
        /* transform: translateX(-25%); */
        max-height: 100%;
    }
.page-hero__content-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    position: relative;
    z-index: 2;
    padding: 150px 10px 50px 10px;
}
--left.page-hero__content-container {
        justify-content: center;
        text-align: center;
    }
@media (width >= 1024px) {
--left.page-hero__content-container {
            justify-content: flex-start;
            text-align: left;
    }
  }
--centered.page-hero__content-container {
        justify-content: center;
        text-align: center;
    }
@media (width >= 1024px) {
.page-hero__content-container {
        min-height: auto;
        max-height: 90vh;
        height: 700px;
}
  }
@media (width >= 1240px) {
.page-hero__content-container {
        height: 100vh;
        max-height: 1000px;
}
  }
.page-hero__content-container--centered :scope {
    align-items: center;
    justify-content: center;
}
.page-hero__content-container--left {
    display: flex;
    text-align: center;
}
@media (width >= 1024px) {
.page-hero__content-container--left {
        justify-content: start;
        text-align: left;
}
  }
@media (width >= 1240px) {
.page-hero__content-container--left {
        max-width: 70%;
        padding-left: 0;
}
  }
.page-hero__content {
    color: var(--brand-contrast);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    gap: clamp(10px, 4vh, 70px);
    /* padding: 150px 10px 50px 10px; */
    /* margin: var(--site-header-height-small) auto 0; */
    margin: 0 auto;
    text-align: center;
}
@media (width >= 1240px) {
.page-hero__content {
        padding: 10vh;
        position: relative;
        /* min-width: 800px; */
        margin: 0;
        text-align: left;
        max-width: 1000px;
}
        
        .page-hero__content.overlay-effects {
            border: solid 1px currentColor;
            backdrop-filter: blur(10px);
        }
  }
.page-hero__content-container--small {
    height: auto;
    padding-block: calc(var(--site-header-height-small)  + 50px) var(--site-header-height-small);
}
@media (width >= 1024px) {
.page-hero__content-container--small {
        padding-block: calc(var(--site-header-height) + 100px) var(--site-header-height);
}
  }
.page-hero__header {
    font-family: var(--font-display);
    margin-block: 0 !important;
    width: 100%;
}
.image-right .page-hero__header {
        backdrop-filter: blur(10px);
        display: inline-block;
        width: -moz-min-content;
        width: min-content;
    }
.page-hero__text {
    /* text-align: center; */
    width: 100%;
}
.page-hero__subheader {
    letter-spacing: 0.075em;
    margin-block: 0 !important;
    width: 100%;
}
.page-hero__actions {
    display: flex;
    gap: clamp(8px, 2vw, 30px);
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}
@media (width >= 1240px) {
.page-hero__actions {
        justify-content: start;
        width: auto;
}
  }
.page-intro-section {
    /* background: var(--color-bg); */
    color: var(--color-text-muted);
    padding-block: var(--site-header-height) var(--site-header-height-small);
    position: relative;
    overflow: hidden;
    /* border-bottom: solid 1px var(--color-border); */
}
.page-intro-section > img {
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
    }
.bg-grid {
    --grid-size: 100px;
    --grid-angle: 15deg;
    --grid-color: rgba(221,221,221,.9);
    position: fixed;
    inset: 0;
    background:
    repeating-linear-gradient(
      var(--grid-angle),
      var(--grid-color) 0 1px,
      transparent 1px var(--grid-size)
    ),
    repeating-linear-gradient(
      calc(var(--grid-angle) + 90deg),
      var(--grid-color) 0 1px,
      transparent 1px var(--grid-size)
    );
    background-repeat: repeat;
    background-position: center center;
}
.page-intro-section__box {
    /* border: solid 1px currentColor; */
    margin-block: var(--site-header-height-small);
    padding: var(--site-header-height-small);
    position: relative;
    /* overflow: hidden; */
    width: auto;
    /* background: rgba(0,0,0, 0.4); */
    backdrop-filter: blur(4px);

    /* background: linear-gradient(to right, #26a0da, #314755); */
    /* background-color: #b7bcc0; */
    border: solid 1px var(--color-border);
    
    /* background-color: #eef3ed; /*SPECIAL NICE BG */
    /* background-color: var(--color-bg); */
    /* background-color: var(--color-surface); */
    background-color: #fff;

}
@media (width >= 1240px) {
.page-intro-section__box {
        /* display: grid;
        grid-template-columns: repeat(2, 1fr); */
        display: flex;
        /* gap: var(--spacing-8); */
        gap: 8vw;
        margin-block: var(--site-header-height);
        padding: var(--site-header-height);
        min-height: 600px;

}
  }
.page-intro-section__box::before,.page-intro-section__box::after {
        display: none;
        content: '';
        width: 30vh;
        height: 10vh;
        position: absolute;
        border: 1px solid var(--color-border);
    }
.page-intro-section__box::before {
        border-width: 1px 0 0 1px;
        left: 0;
        top: 0;
    }
.page-intro-section__box::after {
        border-width: 0 1px 1px 0;
        right: 0;
        bottom: 0;
    }
.page-intro-section__content {
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: var(--spacing-12);
    position: relative;
    z-index: 2;
    height: 100%;
    flex: 1;
}
.page-intro-section__content .tag-line {
        color: var(--color-text-muted);
        font-size: var(--font-size-lg);
    }
.page-intro-section__content.centered {
        justify-content: center;
        text-align: center;
    }
.page-intro-section__image {
    position: relative;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30%;
}
.page-intro-section__image img {
        /* position: absolute;
        z-index: 0;
        object-fit: contain; */
        max-height: 300px;
        width: auto;
    }
.page-intro-section__header {
    margin: 0 0 var(--spacing-8);
    color: var(--color-brand-600);
    max-width: 800px;
    color: var(--color-display);
}
.page-intro-section__text {
    white-space: pre-wrap;
    max-width: 500px;
    font-weight: 500;
}
.centered .page-intro-section__text {
        max-width: none;
    }
.page-intro__actions {
    display: flex;
    gap: clamp(8px, 2vw, 30px);
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}
@media (width >= 1024px) {
.page-intro__actions {
        justify-content: start;
        width: auto;
}
  }
.btn, .btn--primary, .attityde-form-submit, .btn--secondary, .btn--tertiary {
    --btn-duration: 0.15s;
    --btn-radius: 0;

    align-items: center;
    border-radius: var(--btn-radius);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: var(--letter-spacing-base);
    justify-content: center;
    line-height: 1.2;
    /* padding: clamp(0.65em, 1vw, 0.7em) clamp(1em, 2vw, 2em); */
    padding: clamp(0.75em, 1vw, 0.9em) clamp(1em, 2vw, 2em);
    position: relative;
    text-align: center;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
}
:is(.btn,.btn--primary,.attityde-form-submit,.btn--secondary,.btn--tertiary) i {
        flex-shrink: 0;
        font-size: 1.3em;
        transition: transform 0.2s ease;
    }
:is(.btn,.btn--primary,.attityde-form-submit,.btn--secondary,.btn--tertiary)::after {
        transition: all var(--btn-duration) ease;
        content: '';
        border-radius: var(--btn-radius);
        outline-offset: 2px;
        outline-width: 2px;
        outline-style: solid;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
    }
:is(.btn,.btn--primary,.attityde-form-submit,.btn--secondary,.btn--tertiary):focus-visible,:is(.btn,.btn--primary,.attityde-form-submit,.btn--secondary,.btn--tertiary):hover {
        outline: transparent;
    }
:is(:is(.btn,.btn--primary,.attityde-form-submit,.btn--secondary,.btn--tertiary):focus-visible,:is(.btn,.btn--primary,.attityde-form-submit,.btn--secondary,.btn--tertiary):hover)::after {
            opacity: 1;
        }
.btn--icon-right:is(.btn,.btn--primary,.attityde-form-submit,.btn--secondary,.btn--tertiary) {
        justify-content: space-between;
        gap: 1em;
        padding-right: clamp(0.8em, 2vw, 1.5em);
    }
.btn--icon-left:is(.btn,.btn--primary,.attityde-form-submit,.btn--secondary,.btn--tertiary) {
        justify-content: space-between;
        flex-direction: row-reverse;
        gap: 1em;
        padding-left: clamp(0.8em, 2vw, 1.5em);
    }
@media (width >= 768px) {
.btn, .btn--primary, .attityde-form-submit, .btn--secondary, .btn--tertiary {
        font-size: 15px;
}
  }
/* Button animations */
.btn--ani-right i {
        transition: transform 0.2s ease;
    }
.btn--ani-right:hover i {
        transform: translateX(0.25em);
    }
.btn--ani-down i {
        transition: transform 0.2s ease;
    }
.btn--ani-down:hover i {
        transform: translateY(0.15em);
    }
.btn--ani-up i {
        transition: transform 0.2s ease;
    }
.btn--ani-up:hover i {
        transform: translateY(-0.15em);
    }
.btn--ani-tilt i {
        transition: transform 0.2s ease;
        transform-origin: center center;
    }
.btn--ani-tilt:hover i {
        transform: rotate(15deg);
    }
/* PRIMARY BUTTON */
.btn--primary, .attityde-form-submit {
    background-color: var(--color-brand-600);
    color: #fff;
    border: none;
    transition: all var(--btn-duration) ease;
}
:is(.btn--primary,.attityde-form-submit)::after {
        outline-color: var(--color-brand-600);
    }
/* SECONDARY BUTTON */
.btn--secondary {
    --btn-bg: var(--color-brand-secondary);

    background-color: var(--btn-bg);
    color: #333;
    transition: all var(--btn-duration) ease;
}
.btn--secondary::after {
        outline-color: var(--btn-bg);
    }
/* TERTIARY BUTTON */
.btn--tertiary {
    --btn-bg: #fff;
    background-color: var(--btn-bg);
    color: #000;
    border: none;
    transition: all var(--btn-duration) ease;
}
.btn--tertiary::after {
        outline-color: var(--btn-bg);
    }
/* MINIMAL BUTTON */
.btn--minimal, .btn--minimal-inverse {
    background: transparent;
    border: 1px solid currentColor;
    color: var(--color-brand-600);
    display: flex;
    align-items: center;
    text-decoration: none !important;
    position: relative;
}
:is(.btn--minimal,.btn--minimal-inverse)::after {
        outline-offset: 3px;
        outline-width: 1px;
    }
/* MINIMAL BUTTON - INVERSE */
.btn--minimal-inverse {
    color: var(--color-brand-contrast);
}
.btn--minimal-inverse::after {
        outline-offset: 3px;
        outline-width: 1px;
    }
.scroll-up-btn {
    aspect-ratio: 1/1;
    padding: 1em;
    position: fixed;
    z-index: 3;
    right: 20px;
    bottom: 20px;
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    /* mix-blend-mode: difference; */
    border-radius: 50%;
    color: #000;
}
.scroll-up-btn:hover {
        background-color: #fff;
    }
.scroll-up-btn:focus-visible {
        background-color: #fff;
        outline: 2px solid currentColor;
        outline-offset: 0;
    }
.block-hover-btn {
    position: absolute;
    top: calc(clamp(50px, 3vw, 70px) / 2);
    right: calc(clamp(50px, 5vw, 100px) / 2);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2em;
    background: var(--color-brand-secondary);
    opacity: 0;
    
    transition: transform ease 0.3s, opacity ease 0.2s;
    transform: translateX(0);
}
.block-hover-btn i {
        font-size: var(--font-size-lg);
    }
@media (hover: none) and (pointer: coarse) {
.block-hover-btn {
        transition: none;
        opacity: 1;
}
  }
.tag-context, .tag-line {
    font-family: var(--font-sans);
    color: currentColor;
    font-weight: 500;
}
.side-nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    width: 100%;
}
.side-nav__header {
    padding-left:  var(--spacing-4);
}
.side-nav__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--color-border);
}
.side-nav__item {
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
}
.side-nav__item.is-active {
        background-color: #EBEBEB;
        color: #000;
    }
.side-nav__item.is-active i {
            display: block;
        }
.side-nav__item > i {
        opacity: 0;
        transition: all 0.3s ease;
    }
.side-nav__item:hover > i{
        opacity: 1;
    }
.side-nav__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.side-nav__item-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6em 1em;
    flex: 1;
    cursor: pointer;
    font-weight: 500;
    text-align: left;
}
.side-nav__item-link.is-active {
        background-color: #EBEBEB;
        color: #000;
    }
.side-nav__item-link.is-current {
        background-color: var(--color-brand-600);
        color: #fff;
    }
.side-nav__toggle {
    display: block;
    height: 100%;
    aspect-ratio: 1/1;
    /* border-left: 1px solid currentColor; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    padding: 1em;
    cursor: pointer;
}
.side-nav__sub {
    /* margin-left: 2em; */
}
.side-nav__subitem {
    border-top: 1px solid var(--color-border);
    padding-left: 2em;
    background-color: #EBEBEB;
    color: #000;
}
.side-nav__subitem.is-active {
        background-color: var(--color-brand-600);
        color: #fff;
    }
/* & > i {
        opacity: 0;
        transition: all 0.3s ease;
    }

    &:hover > i {
        opacity: 1;
    } */
.statement-block {}
.statement-block__text {
    white-space: pre-wrap;
    padding-block: clamp(var(--spacing-8), 5vw, var(--spacing-24));
    padding-top: 4rem;
    position: relative;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-base);
    font-size: clamp(var(--font-size-xl), 5vw, var(--font-size-5xl));
}
.statement-block__text::before {
        content: '"';
        position: absolute;
        left: 0;
        top: 0;
        font-size: 13rem;
        line-height: 1;
        opacity: 0.15;
    }
@media (width >= 768px) {
.statement-block__text {
        padding-left: 8rem;
}

        .statement-block__text::before {
            font-size: 23rem;
            opacity: 0.15;
        }
  }
.page-links-block {
    position: relative;
}
.page-links-block__bg-image {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    width: 200vw;
    max-width: none;
    opacity: 0.6;
}
.page-links-block__header {
    display: flex;
    flex-direction: column;
    gap: 1vw;
    margin-bottom: 3vw;
    align-items: center;
}
.page-links-block__header .page-links-block__item-text {
        text-align: center;
    }
/* As list */
.page-links-block__list {
    background-color: var(--color-surface);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}
.page-links-block__list .page-links-block__item {
        border-bottom: 1px solid var(--color-border);
    }
.page-links-block__list .page-links-block__item-link {    
        display: flex;
        align-items: start;
        gap: 80px;
        width: 100%;
        padding-block: var(--spacing-8);
        position: relative;
    }
.page-links-block__list .page-links-block__item-image {
        max-height: 200px;
        max-width: 80px;
        width: 80px;
    }
.page-links-block__list .page-links-block__item-title,.page-links-block__list .page-links-block__item-text {
        margin: 0;
        vertical-align: baseline;
    }
/* .page-links-block__item-title {
        width: 30%;
        padding-right: 50px;
        position: relative;

        .grid-layout & {
            width: auto;
        }
    } */
.page-links-block__list .page-links-block__item-text {
        padding-block: 0.5em;
        width: 50%;
    }
.page-links-block__list .page-links-block__item-title {
        margin: 0;
        vertical-align: baseline;
        position: relative;
        padding-bottom: 0.5em;
        padding-right: 50px;
        width: auto;
        display: flex;
        gap: 4em;
        width: 40%;
    }
:is(.page-links-block__list .page-links-block__item-title) .page-links-block__item-image-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            aspect-ratio: 1 / 1;
            width: 100px;
        }
:is(.page-links-block__list .page-links-block__item-title) .page-links-block__item-image {
            height: auto;
        }
.page-links-block__list .page-links-block__item-text {
        padding-block: 0.5em;
        width: 50%;
    }
.grid-layout :is(.page-links-block__list .page-links-block__item-text) {
            width: auto;
            padding: 0;
        }
/* AS GRID */
.page-links-block__grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    border: 1px solid var(--color-border);
    border-width: 1px 0 0 1px;
    gap: 0;
    width: 100%;
}
@media (width >= 1024px) {
.page-links-block__grid {
        grid-template-columns: repeat(2, 1fr);
}
  }
.page-links-block__grid .page-links-block__item {
        background-color: var(--color-surface);
        border: 1px solid var(--color-border);
        border-width: 0 1px 1px 0;
    }
.page-links-block__grid .page-links-block__item-link {    
        padding: clamp(50px, 3vw, 70px) clamp(50px, 5vw, 100px) clamp(50px, 3vw, 70px) clamp(50px, 3vw, 70px);
        display: flex;
        align-items: start;
        flex-direction: column;
        gap: 20%;
        width: 100%;
        position: relative;
    }
.page-links-block__grid .page-links-block__item-title {
        margin: 0;
        vertical-align: baseline;
        position: relative;
        padding-bottom: 0.5em;
        padding-right: 50px;
        width: auto;
        display: flex;
        gap: 2em;
    }
:is(.page-links-block__grid .page-links-block__item-title) h3 {
            line-height: 1;
        }
:is(.page-links-block__grid .page-links-block__item-title) .page-links-block__item-image-wrapper {
            /* padding: 10px;
            border: solid 1px #333; */
            display: flex;
            align-items: center;
            justify-content: center;
            aspect-ratio: 1 / 1;
            width: 60px;
        }
:is(.page-links-block__grid .page-links-block__item-title) .page-links-block__item-image {
            height: 100%;
            /* margin-right: 30px; */
        }
.page-links-block__grid .page-links-block__item-text {
        margin: 0;
        vertical-align: baseline;
        padding: 0.5em 0 0.5em calc(60px + 2em);
        max-width: 800px;
    }
/* .page-links-block__item-text {
        padding-block: 0.5em;
        width: auto;
        padding: 0;
    } */
.block-hover-btn {
    right: 0;
    top: 1em;
}
.page-links-block__item-link:hover .block-hover-btn {
        transform: translateX(5px);
        opacity: 1;
    }
.sub-pages-link-block {
    position: relative;
    padding: clamp(50px, 10vw, 150px) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3vw;
}
.sub-pages-link-block__bg-image {
    position: absolute;
    bottom: 0;
    /* top: clamp(150px, 10vw, 250px); */
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    width: 200vw;
    max-width: none;
    opacity: 0.6;
}
.sub-pages-link-block__intro {
    width: 100%;
}
.sub-pages-link-block__intro .intro-header {
        /* max-width: 900px; */
    }
.sub-pages-link-block__intro .intro-text {
        white-space: pre-wrap;
        font-size: var(--font-size-2xl);
        /* max-width: 900px; */
    }
.sub-pages-link-block__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* gap: 1px; */
    /* background-color: var(--color-border); */
    border: 1px solid var(--color-border);
    border-width: 1px 0 0 1px;
    margin-top: 2vw;
    position: relative;
    z-index: 1;
    width: 100%;
}
.sub-pages-link-block__item {
    background-color: var(--color-bg);
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.sub-pages-link-block__item-link {
    padding: clamp(50px, 3vw, 70px) clamp(50px, 5vw, 100px) clamp(50px, 3vw, 70px) clamp(50px, 3vw, 70px);
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: 20%;
    width: 100%;
    position: relative;
}
.sub-pages-link-block__item-link:hover .sub-pages-link-block__hover-button {
        transform: translateX(5px);
        opacity: 1;
    }
.sub-pages-link-block__hover-button {
    position: absolute;
    top: 0.9em;
    right: 0;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2em;
    background: var(--color-brand-secondary);
    opacity: 0;
    
    transition: transform ease 0.3s, opacity ease 0.2s;
    transform: translateX(0);
}
.sub-pages-link-block__hover-button i {
        font-size: var(--font-size-lg);
    }
@media (hover: none) and (pointer: coarse) {
.sub-pages-link-block__hover-button {
        transition: none;
        opacity: 1;
}
  }
.sub-pages-link-block__item-title {
    position: relative;
    padding-bottom: 0.5em;
    padding-right: 50px;
}
.sub-pages-link-block__item-title, .sub-pages-link-block__item-text {
    margin: 0;
    vertical-align: baseline;
}
.sub-pages-link-block__item-title {
}
.sub-pages-link-block__item-text {
    padding-block: 0.5em;
}
.contact-block {
    background-color: var(--color-surface);
    margin-block: clamp(var(--spacing-8), 5vw, var(--spacing-16));
    padding: clamp(var(--spacing-8), 5vw, var(--spacing-16));
    position: relative;
    width: 100%;
    border: solid 1px var(--color-border);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    /* gap: clamp(var(--spacing-2), 1vw, var(--spacing-8)); */
    gap: clamp(var(--spacing-8), 5vw, var(--spacing-16));
}
@media (width >= 1240px) {
.contact-block {
        gap: clamp(var(--spacing-8), 5vw, var(--spacing-16));
}
  }
.contact-block__header {
    border-bottom: solid 1px var(--color-border);
    padding-bottom: clamp(var(--spacing-8), 5vw, var(--spacing-16));
}
.contact-block__grid {
    display: flex;
    align-items: start;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(var(--spacing-8), 5vw, var(--spacing-16));
}
@media (width >= 1240px) {
.contact-block__grid {
        flex-direction: row;
}
  }
.contact-block__details {
    white-space: pre-wrap;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
@media (width >= 768px) {
.contact-block__details {
        width: 50%;
}
  }
/* Hide Swiper default buttons */
::part(button-prev), ::part(button-next) {
	display: none;
}
.swiper-gallery__navigation {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* pointer-events: none; */
}
.swiper-pagination {
    position: absolute;
    bottom: 25px !important;
    top: auto !important;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}
.swiper-button  {
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    color: var(--color-text);
    cursor: pointer;
    pointer-events: initial;
}
.swiper-button i {
        font-size: 24px;
    }
.swiper-button--prev {
    left: 0;
}
.swiper-button--next {
    right: 0;
}
.swiper-button-disabled {
    opacity: 0.2;
    cursor: default;
}
.swiper-pagination-bullet {
    pointer-events: initial;
}
/* 
    Full screen gallery
*/
.sw-lightbox[hidden] { display: none; }
.sw-lightbox { position: fixed; inset: 0; z-index: 9999; }
.sw-lightbox__backdrop { position: absolute; inset: 0; 
    background: var(--color-bg);
}
.sw-lightbox__inner { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; }
.sw-lightbox__swiper { 
    position: absolute;
    width: min(1200px, 100%); height: min(90dvh, 100%); 
}
.sw-lightbox__close, .sw-lightbox__prev, .sw-lightbox__next {
  position: absolute; z-index: 8; width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; border: 0; cursor: pointer;
}
:is(.sw-lightbox__close,.sw-lightbox__prev,.sw-lightbox__next) i {
    pointer-events: none;
  }
.sw-lightbox__close { top: 1rem; right: 1rem; }
.sw-lightbox__prev  { left: 1rem; top: 50%; transform: translateY(-50%); }
.sw-lightbox__next  { right: 1rem; top: 50%; transform: translateY(-50%); }
.sw-lightbox__pagination { position: absolute; bottom: 1rem; left: 0; right: 0; display: flex; justify-content: center; }



/*# sourceMappingURL=app.css.map */