body {
    font-family: var(--font-family);
    background: var(--base-bg);
}

* {
    box-sizing: border-box;
}

.animate {
    opacity: 0;
    visibility: hidden;
    will-change: opacity, transform;
}

img {
    max-width: 100%;
}

/* ==========================================================================
   TYPOGRAPHY UTILITIES
   Usage: add class to any element, e.g. <h1 class="gf-h1">
   Fonts: --second-family (Plus Jakarta Sans) for headings/titles
          --font-family   (Inter)             for body/captions/buttons
   ========================================================================== */

/* ── Headings ── */
.gf-h1 {
    font-family: var(--second-family);
    font-weight: 550;
    font-size: 74px;
    line-height: 110%;
    letter-spacing: -0.03em;
}

.gf-h2 {
    font-family: var(--second-family);
    font-weight: 550;
    font-size: 54px;
    line-height: 64px;
    letter-spacing: -0.02em;
}

.gf-h3 {
    font-family: var(--second-family);
    font-weight: 550;
    font-size: 36px;
    line-height: 46px;
    letter-spacing: -0.02em;
}

.gf-h4 {
    font-family: var(--second-family);
    font-weight: 550;
    font-size: 26px;
    line-height: 34px;
    letter-spacing: -0.01em;
}

/* ── Titles ── */
.gf-title-l {
    font-family: var(--second-family);
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
}

.gf-title-m {
    font-family: var(--second-family);
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.01em;
}

.gf-title-s {
    font-family: var(--second-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.01em;
}

/* ── Body ── */
.gf-body-l {
    font-family: var(--font-family);
    font-weight: 450;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0;
}

.gf-body-m {
    font-family: var(--font-family);
    font-weight: 450;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.01em;
}

.gf-body-s {
    font-family: var(--font-family);
    font-weight: 450;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.02em;
}

/* ── Buttons ── */
.gf-btn-l {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.01em;
}

.gf-btn-m {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.01em;
}

/* ── Captions ── */
.gf-caption-l {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0.05em;
}

.gf-caption-m {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.05em;
}

.gf-caption-s {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.05em;
}
.gfHeader__actions a{
    height: 42px;
}
/* ── Mobile overrides ── */
@media (max-width: 768px) {
    .gf-h1 { font-size: 40px; }
    .gf-h2 { font-size: 28px; line-height: 36px; }
    .gf-h3 { font-size: 22px; line-height: 30px; letter-spacing: -0.01em; }
    .gf-h4 { font-size: 20px; line-height: 28px; }

    .gf-title-l { font-size: 18px; }
    .gf-title-m { font-size: 16px; }

    .gf-body-l { font-size: 16px; line-height: 24px; letter-spacing: 0.01em; }
    .gf-body-m { font-size: 14px; line-height: 20px; letter-spacing: 0.02em; }
    .gf-body-s { font-size: 12px; line-height: 16px; }

    .gf-caption-s { font-size: 10px; line-height: 14px; }
}

/* ==========================================================================
   HEADER & MEGA MENU
   ========================================================================== */

/* ── Base Header ── */
.gfHeader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--base-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.gfHeader.is-scrolled {
    border-bottom-color: var(--base-border-black);
    background: rgba(255, 255, 255, 0.98);
}

.gfHeader__inner {
    display: flex;
    align-items: center;
    gap: 32px;
    max-width: 1328px;
    margin: 0 auto;
    padding: 0 24px;
    height: 80px;
    position: relative;
}

/* ── Logo ── */
.gfHeader__logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.gfHeader__logo img {
    height: 32px;
    width: auto;
}

.gfHeader__logo-text {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-bold);
    letter-spacing: -0.02em;
}

/* ── Navigation ── */
.gfNav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.gfNav__list {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gfNav__item {
    /* position: relative; */
}

.gfNav__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-800);
    text-decoration: none;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
    font-family: var(--second-family);
font-weight: 600;
font-size: 14px;
line-height: 129%;
letter-spacing: 0.01em;
color: #61647a;
}
.gfNav__item--has-dropdown .gfNav__dropdown {
    padding: 32px;
}
.gfNav__link:hover,
.gfNav__item--has-dropdown.is-open > .gfNav__link {
font-family: var(--second-family);
font-weight: 600;
font-size: 14px;
line-height: 129%;
letter-spacing: 0.01em;
color: #1b5df8;
background: #e6efff;
outline: 1px solid rgba(27, 93, 248, 0.1);
border-radius: 4px;
}

.gfNav__arrow {
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
    color: var(--gray-600);
}

.gfNav__item--has-dropdown.is-open > .gfNav__link .gfNav__arrow {
    transform: rotate(180deg);
    color:  #1b5df8;
}

/* ── Dropdown Base ── */
.gfNav__dropdown {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    top: calc(100% + 8px);
    background: var(--base-white);
    border: 1px solid var(--base-border-black);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(18, 23, 51, 0.12), 0 2px 8px rgba(18, 23, 51, 0.06);
    min-width: 280px;
    padding: 12px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.gfNav__item--has-dropdown.is-open > .gfNav__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) !important;
}

/* Position for dropdowns near screen edges */
.gfNav__item:first-child > .gfNav__dropdown,
.gfNav__item:nth-child(2) > .gfNav__dropdown {
    left: 50%;
        transform: translateX(-50%) translateY(0);
}

.gfNav__item:first-child.is-open > .gfNav__dropdown,
.gfNav__item:nth-child(2).is-open > .gfNav__dropdown {
    transform: translateY(-11px);
}

.gfNav__item:last-child > .gfNav__dropdown,
.gfNav__item:nth-last-child(2) > .gfNav__dropdown {
    left: 50%;
    right: 0;
        transform: translateX(-50%) translateY(0);
}

.gfNav__item:last-child.is-open > .gfNav__dropdown,
.gfNav__item:nth-last-child(2).is-open > .gfNav__dropdown {
        transform: translateX(-50%) translateY(0);
}

/* ── Mega Item (shared) ── */
.gfNav__mega-item {
    list-style: none;
}

.gfNav__mega-item a {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    /* padding: 8px 10px; */
    /* border-radius: 8px; */
    text-decoration: none;
    transition: background 0.2s ease;
}

.gfNav__mega-item a:hover {
    /* background: var(--gray-100); */
}

.gfNav__item-icon-wrap {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--base-border-black);
    border-radius: 6px;
    color: var(--gray-600);
    transition: color 0.2s ease, background 0.2s ease;
    border: 1px solid var(--base-border-black);
    border-radius: 6px;
    padding: 4px 4px;
    width: 48px;
    height: 48px;
}

.gfNav__mega-item a:hover .gfNav__item-icon-wrap {
    color: var(--brand-blue-500);
    background: var(--brand-blue-50);
}

.gfNav__item-icon {
    width: 18px;
    height: 18px;
}

.gfNav__item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Label row: flex to sit arrow alongside text */
.gfNav__item-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--second-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 150%; /* = 24px */
    letter-spacing: 0.01em;
    color: var(--text-bold);
    /* Center label (24px) with 48px icon: icon_center(24) - label_center(12) = 12px */
    transform: translateY(12px);
    transition: transform 0.2s ease;
}

/* Arrow — only for items that have a description.
   Uses CSS mask so background-color (--item-accent or brand-blue) controls the color. */
.gfNav__item-text:has(.gfNav__item-desc) .gfNav__item-label::after {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 5px;
    height: 8px;
    background-color: var(--item-accent, var(--brand-blue-500));
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='5' height='8' viewBox='0 0 5 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.88734 3.71155L-2.8848e-07 0.824164L0.824956 -0.000785864L4.5373 3.71155L0.824956 7.42383L-3.606e-08 6.59887L2.88734 3.71155Z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg width='5' height='8' viewBox='0 0 5 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.88734 3.71155L-2.8848e-07 0.824164L0.824956 -0.000785864L4.5373 3.71155L0.824956 7.42383L-3.606e-08 6.59887L2.88734 3.71155Z'/%3E%3C/svg%3E") no-repeat center;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ── Accent items: icon-wrap brand colors ── */
.gfNav__mega-item--accent:hover .gfNav__item-icon-wrap {
    background: color-mix(in srgb, var(--item-accent) 12%, white);
    border-color: color-mix(in srgb, var(--item-accent) 35%, white);
}
.gfNav__mega-item--accent:hover  path{
    fill: var(--item-accent);
}   
.gfNav__mega-item--accent .gfNav__item-icon{
    width: auto;
    height: auto;
}

.gfNav__mega-item--accent a:hover .gfNav__item-icon-wrap {
    background: color-mix(in srgb, var(--item-accent) 20%, white);
    border-color: var(--item-accent);
    color: var(--item-accent);
}

/* Description: always in layout (no height animation = no jumps), only opacity */
.gfNav__item-desc {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 157%; /* ≈ 22px */
    letter-spacing: 0.02em;
    color: var(--text-base);
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* ── Hover: label moves from center-of-icon to top-of-icon ── */
.gfNav__mega-item a:hover .gfNav__item-text:has(.gfNav__item-desc) .gfNav__item-label {
    transform: translateY(0);
}

.gfNav__mega-item a:hover .gfNav__item-text:has(.gfNav__item-desc) .gfNav__item-label::after {
    opacity: 1;
    transform: translateX(0);
}

.gfNav__mega-item a:hover .gfNav__item-desc {
    opacity: 1;
}

/* ── TABS TYPE ── */
.gfNav__dropdown--tabs {
    display: flex;
    min-width: 100%;
    padding: 0;
    overflow: hidden;
}

.gfNav__tabs-nav {
    flex-shrink: 0;
    padding-right: 24px;
    width: 160px;
    border-right: 1px solid var(--base-border-black);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gfNav__tab {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-700);
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 15px;
    line-height: 120%;
    color: #343a40;
    border-radius: 2px;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 15px;
    line-height: 120%;
    padding: 11px 14px;
    color: var(--text-subtle);
}

.gfNav__tab:hover {
color: var(--brand-blue-500);
background: var(--brand-blue-50);
}

.gfNav__tab.is-active {
    background: var(--brand-blue-50);
    border-radius: 2px;
    font-weight: 600;
    line-height: 129%;
    letter-spacing: 0.01em;
    color: var(--brand-blue-500);
}

.gfNav__tab-panels {
    flex: 1;
    min-width: 0;
}
 
.gfNav__tab-panel {
    display: none;
}

.gfNav__tab-panel.is-active {
    display: block;
}

.gfNav__mega-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.gfNav__tab-panels{
    padding-left: 24px;
}

/* ── COLUMNS TYPE ── */
.gfNav__dropdown--columns {
    min-width: 1072px;
}

.gfNav__columns-wrap {
    display: flex;
    gap: 24px;
}
.gfNav__dropdown--columns .gfNav__columns{
    display: grid;
    gap: 24px;
    grid-template-columns: 2fr 1fr;
}
.gfNav__dropdown--columns .gfNav__columns .gfNav__column:first-child ul{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}.gfNav__dropdown--columns .gfNav__columns .gfNav__column:first-child ul li{
  
}
.gfNav__columns {
    display: flex;
    gap: 8px;
    flex: 1;
}
.gfNav__item:last-child.is-open > .gfNav__dropdown, 
.gfNav__item:nth-last-child(2).is-open > .gfNav__dropdown{

}

.gfNav__column {
    flex: 1;
    min-width: 140px;
}

.gfNav__col-heading {
    display: block;
font-family: var(--font-family);
font-weight: 500;
font-size: 15px;
line-height: 160%;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--gray-700);
    text-transform: uppercase;
    margin-bottom: 24px;
}

.gfNav__column ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── PROMO TYPE ── */
.gfNav__dropdown--promo {
    min-width: 750px;
}

.gfNav__promo {
    flex-shrink: 0;
    width: 50%;
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--base-white);
    background: var(--brand-blue-500);
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.02), 0 4px 22px 0 rgba(0, 0, 0, 0.04), 0 10px 58px 0 rgba(0, 0, 0, 0.05), 0 19px 134px 0 rgba(0, 0, 0, 0.07);
    background: var(--brand-blue-500);
    border-radius: 6px;
}

.gfNav__promo-title {
font-family: var(--second-family);
font-weight: 600;
font-size: 22px;
line-height: 118%;
letter-spacing: -0.01em;
color: var(--base-white);
margin-bottom: 8px;
margin-top: 0;
}

.gfNav__promo-desc {
font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
line-height: 150%;
letter-spacing: 0.01em;
color: var(--white-transparent-80);
}

.gfNav__promo-cta {
font-family: var(--second-family);
font-weight: 550;
font-size: 16px;
line-height: 150%;
color: var(--base-white);
display: flex;
align-items: center;
text-decoration: none;
}
.gfNav__promo-cta svg{
    margin-left: 8px;
}
.gfNav__promo-cta:hover {
    opacity: 0.9;
}

/* ── FEATURED TYPE ── */
.gfNav__dropdown--featured {
    min-width: 100%;
    padding: 0;
    overflow: hidden;
}

.gfNav__featured-wrap {
    display: flex;
    min-height: 0;
}

/* Left panel: stacked cards */
.gfNav__featured-cards {
    flex-shrink: 0;
    width: 280px;

    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gfNav__featured-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    height: 50%;
    padding: 12px 10px;
    border-radius: 10px;
    text-decoration: none;
    background: var(--base-white);
    border: 1px solid var(--base-border-black);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    border: 1px solid var(--base-border-black);
border-radius: 6px;
padding: 24px;
background: var(--base-border-black);
}

.gfNav__featured-card:hover {
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.01), 0 6px 17px 0 rgba(0, 0, 0, 0.01), 0 15px 40px 0 rgba(0, 0, 0, 0.02);
background: var(--brand-blue-25);
border: 1px solid var(--base-border-blue);
}
.gfNav__featured-card-title svg{
    opacity: 0;
    margin-left: 8px;
}
.gfNav__featured-card:hover .gfNav__featured-card-title svg{
    opacity: 1;
}
.gfNav__featured-card:hover .gfNav__featured-card-icon svg path{
    fill: var(--brand-blue-500);
}
.gfNav__featured-card:hover .gfNav__featured-card-title{
    color: var(--brand-blue-500);
}
.gfNav__featured-card-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-200);
    border-radius: 8px;
}

.gfNav__featured-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gfNav__featured-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gfNav__featured-card-title {
font-family: var(--font-family);
font-weight: 600;
font-size: 16px;
line-height: 150%;
letter-spacing: -0.01em;
color: var(--text-bold);
}

.gfNav__featured-card-desc {
font-family: var(--font-family);
font-weight: 500;
font-size: 14px;
line-height: 157%;
letter-spacing: 0.02em;
color: var(--text-base);
}

.gfNav__featured-card-arrow {
    flex-shrink: 0;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    margin-top: 2px;
    transition: color 0.15s ease, transform 0.15s ease;
}

.gfNav__featured-card:hover .gfNav__featured-card-arrow {
    color: var(--brand-blue-500);
    transform: translateX(2px);
}

/* Right panel: sections */
.gfNav__featured-content {
    flex: 1;
    padding: 0 0 0 40px;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    gap: 16px;
    overflow-y: auto;
}

.gfNav__featured-section {
    display: flex;
    flex-direction: column;
}

.gfNav__featured-heading {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 15px;
    line-height: 160%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-700);
    text-transform: uppercase;
    display: block;
    margin-bottom: 24px;
}

.gfNav__featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.gfNav__featured-section:first-child .gfNav__featured-grid{
    gap: 16px;
    position: relative;
    top: -24px;
}

/* ── SECTIONS TYPE ── */
.gfNav__dropdown--sections {
    min-width: 680px;
    padding: 16px;
}

.gfNav__sections-wrap {
    display: flex;
    gap: 0;
}

.gfNav__section {
    flex: 1;
    min-width: 0;
    padding: 0 20px;
    border-right: 1px solid var(--base-border-black);
}

.gfNav__section:first-child {
    padding-left: 0;
}

.gfNav__section:last-child {
    padding-right: 0;
    border-right: none;
}

.gfNav__section-heading {
    display: block;
    padding: 0 10px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.gfNav__section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── CTA Buttons ── */
.gfHeader__actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gfBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    line-height: 1;
    font-family: var(--second-family);
font-weight: 600;
font-size: 14px;
line-height: 129%;
letter-spacing: 0.01em;
color: #121733;
}

.gfBtn--outline {
    border: 1.5px solid var(--gray-400);
    background: transparent;
    color: var(--gray-800);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.03), 0 24px 32px 0 rgba(0, 0, 0, 0.04);
background: #fff;
border: 1px solid rgba(18, 23, 51, 0.04);
border-radius: 4px;
}

.gfBtn--outline:hover {
    border-color: var(--gray-600);
    color: var(--text-bold);
}

.gfBtn--solid {
    background: var(--brand-blue-500);
    color: var(--base-white);
    border-radius: 4px;
padding: 12px 16px;
font-family: var(--second-family);
font-weight: 600;
font-size: 14px;
line-height: 129%;
letter-spacing: 0.01em;
color: #fff;
    border: 1.5px solid transparent;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.02), 0 3px 12px 0 rgba(0, 0, 0, 0.03), 0 7px 27px 0 rgba(0, 0, 0, 0.04), 0 13px 57px 0 rgba(0, 0, 0, 0.05), 0 22px 110px 0 rgba(0, 0, 0, 0.07);
background: linear-gradient(180deg, #4b81fe 0%, #1b5df8 100%);
}

.gfBtn--solid:hover {
    background: var(--brand-blue-600);
}

/* ── Search Button ── */
.gfHeader__searchBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--gray-800);
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
    border-radius: 6px;
width: 42px;
height: 42px;
}

.gfHeader__searchBtn:hover {
    background: var(--base-border-black);
    color: var(--base-black);
}

.gfHeader__searchBtn[aria-expanded="true"] {
    color: var(--brand-blue-500);
}

/* ── Search Panel ── */
.gfHeader__searchPanel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 14px 24px;
    animation: gfSearchPanelIn 0.18s ease;
}

.gfHeader__searchPanel[hidden] {
    display: none;
}

@keyframes gfSearchPanelIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.gfHeader__searchPanel-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 640px;
    margin: 0 auto;
    background: var(--base-white);
    border: 1.5px solid var(--gray-300);
    border-radius: 10px;
    padding: 10px 14px;
}

.gfSearch__icon {
    flex-shrink: 0;
    color: var(--gray-700);
}

.gfSearch__form {
    flex: 1;
    min-width: 0;
}

.gfSearch__input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 15px;
    color: var(--text-bold);
    background: transparent;
    font-family: var(--font-family);
}

.gfSearch__input::placeholder {
    color: var(--gray-600);
}

/* ── Search Backdrop ── */
.gfSearchBackdrop {
    position: fixed;
    inset: 0;
    background: var(--gray-900);
    opacity: 0.5;
    z-index: 999;
    animation: gfBackdropIn 0.2s ease;
}

.gfSearchBackdrop[hidden] {
    display: none;
}

@keyframes gfBackdropIn {
    from { opacity: 0; }
    to   { opacity: 0.5; }
}

/* ── Live Ajax Search Dropdown ── */
.gfHeader__searchPanel-inner {
    position: relative;
}

#gfSearchLiveResults {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 1100;
}

.relevanssi-live-search-results {
    background: var(--base-white);
    border: 1.5px solid var(--gray-300);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    max-height: 400px;
    overflow-y: auto;
}

.relevanssi-live-search-result {
    border-bottom: 1px solid var(--gray-200);
}

.relevanssi-live-search-result:last-child {
    border-bottom: none;
}

.relevanssi-live-search-result a {
    display: block;
    padding: 11px 16px;
    text-decoration: none;
    color: var(--text-bold);
    font-size: 14px;
    font-family: var(--font-family);
    line-height: 1.4;
    transition: background 0.15s ease, color 0.15s ease;
}

.relevanssi-live-search-result a:hover,
.relevanssi-live-search-result a:focus {
    background: var(--gray-100);
    color: var(--brand-blue-500);
    outline: none;
    text-decoration: none;
}

.relevanssi-live-search-no-results {
    padding: 14px 16px;
    font-size: 14px;
    color: var(--gray-600);
    font-family: var(--font-family);
}

/* ── Mobile Burger ── */
.gfHeader__burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 6px;
}

.gfHeader__burger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--gray-800);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
    transform-origin: center;
}

.gfHeader__burger.is-open .gfHeader__burger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.gfHeader__burger.is-open .gfHeader__burger-line:nth-child(2) {
    opacity: 0;
}

.gfHeader__burger.is-open .gfHeader__burger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

/* ── Layout shell ── */
.gfFooter {
    background: var(--base-white);
   
    font-size: 14px;
    color: var(--gray-800);
}

.gfFooter__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ── Navigation columns ── */
.gfFooter__nav {
    padding: 48px 0 40px;
    border-bottom: 1px solid var(--gray-300);
    max-width: 1280px;
    margin: 0 auto;
     border-top: 1px solid var(--gray-300);
}

.gfFooter__nav .gfFooter__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 32px;
}

.gfFooter__navTitle {
    margin: 0 0 20px;
    font-weight: 500;
    font-size: 15px;
    line-height: 160%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-invisible);
    margin-left: 16px;
}

.gfFooter__navList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.gfFooter__navLink {
    font-size: 14px;
    color: var(--gray-800);
    text-decoration: none;
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
line-height: 150%;
letter-spacing: 0.01em;
color: rgba(18, 23, 51, 0.8);
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
}

.gfFooter__navLink:hover {
    color: var(--text-bold);
}

.gfFooter__navExtIcon {
    flex-shrink: 0;
    opacity: 0.4;
}

/* ── Dropdown toggle button ── */
.gfFooter__navToggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    color: var(--gray-800);
    font-family: var(--font-family);
    text-align: left;
    transition: color 0.15s ease;
    font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
line-height: 150%;
letter-spacing: 0.01em;
color: rgba(18, 23, 51, 0.8);
padding: 10px 16px;
}

.gfFooter__navToggle:hover {
    color: var(--text-bold);
}

.gfFooter__navChevron {
    flex-shrink: 0;
    margin-left: 6px;
    transition: transform 0.2s ease;
    color: var(--gray-600);
}

.gfFooter__navToggle[aria-expanded="true"] .gfFooter__navChevron {
    transform: rotate(180deg);
    color: var(--gray-800);
}

/* ── Sub-link list (accordion) ── */
.gfFooter__navSub {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.gfFooter__navSub[hidden] {
    display: none;
}

.gfFooter__navSubLink {
    font-size: 14px;
    color: var(--gray-800);
    text-decoration: none;
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
line-height: 150%;
letter-spacing: 0.01em;
color: rgba(18, 23, 51, 0.8);
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
}

.gfFooter__navSubLink:hover {
    color: var(--text-bold);
    
}

/* ── Bottom section ── */
.gfFooter__bottom {
    padding: 40px 0;
    border-bottom: 1px solid var(--gray-300);
    max-width: 1280px;
    margin: 0 auto;
}

.gfFooter__bottom .gfFooter__inner {
    display: grid;
    grid-template-columns: 220px 1fr auto;
    gap: 32px 48px;
    align-items: start;
}

/* ── Brand (logo + social) ── */
.gfFooter__brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
        justify-content: space-between;
    height: 100%;
}

.gfFooter__logo {
    display: inline-flex;
    text-decoration: none;
}

.gfFooter__logo img {
    height: 56px;
    width: auto;
}

.gfFooter__social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gfFooter__socialLink {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--gray-700);
    border-radius: 6px;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
}

.gfFooter__socialLink:hover {
    color: var(--text-bold);
    background: var(--gray-200);
}

/* ── Contact ── */
.gfFooter__contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gfFooter__contactLabel {
font-family: var(--font-family);
font-weight: 500;
font-size: 15px;
line-height: 160%;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #848799;
margin: 0 0 24px 0;
}

.gfFooter__contactRow {
font-family: var(--second-family);
font-weight: 600;
font-size: 18px;
line-height: 133%;
letter-spacing: 0.01em;
color: rgba(18, 23, 51, 0.8);
align-items: center;
display: flex;
gap: 12px;
    transition: color 0.15s ease;
    text-decoration: none;
}

.gfFooter__contactRow:hover {
    color: var(--text-bold);
}

.gfFooter__contactIcon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-700);
}

.gfFooter__contactHours {
font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
line-height: 150%;
letter-spacing: 0.01em;
color: rgba(18, 23, 51, 0.6);
margin: 0 ;
    padding-left: 24px;
}

/* ── Offices ── */
.gfFooter__offices {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    overflow: hidden;
    min-width: 260px;
}
.gfFooter__offices .gfFooter__office:last-child{
    padding-top: 8px;
}
.gfFooter__office {
    padding: 24px;
}

.gfFooter__officeCity {
    font-weight: 500;
    font-size: 15px;
    line-height: 160%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-invisible);
    display: flex;
    align-items: center;
    margin: 0 0 16px 0;
}

.gfFooter__officeHq {
    display: inline-block;
    font-weight: 500;
    font-size: 15px;
    line-height: 160%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-invisible);
    display: flex;
    align-items: center;
    
}
.gfFooter__officeHq:before{
    content: '';
    display: inline-block;
    border-radius: 1px;
    width: 4px;
    height: 4px;
    background: #848799;
    margin: 10px;

}

.gfFooter__officeAddress {
    margin: 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.01em;
    color: var(--v2-black-transparent--80);
}

/* ── Bottom bar ── */
.gfFooter__bar {
    padding: 20px 0;
}

.gfFooter__bar .gfFooter__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.gfFooter__copy {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 157%;
    letter-spacing: 0.02em;
    color: rgba(18, 23, 51, 0.5);
}

.gfFooter__legal {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.gfFooter__legalLink {
font-family: var(--font-family);
font-weight: 500;
font-size: 14px;
line-height: 157%;
letter-spacing: 0.02em;
color: rgba(18, 23, 51, 0.8);
    text-decoration: none;
    transition: color 0.15s ease;
    white-space: nowrap;
}

.gfFooter__legalLink:hover {
    color: var(--text-bold);
}

.cky-consent-container .cky-consent-bar{
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.02), 0 8px 7px 0 rgba(0, 0, 0, 0.03), 0 20px 13px 0 rgba(0, 0, 0, 0.04), 0 39px 25px 0 rgba(0, 0, 0, 0.04), 0 65px 47px 0 rgba(0, 0, 0, 0.05), 0 100px 80px 0 rgba(0, 0, 0, 0.07);
    background: var(--base-white) !important;
    border: 1px solid var(--base-border-black) !important;
    border-radius: 8px !important;
    padding: 24px !important;

}
.cky-notice-des P:last-child, .cky-preference-content-wrapper p:last-child, .cky-cookie-des-table li div:last-child p:last-child, .cky-gpc-wrapper .cky-gpc-desc p:last-child{
    font-family: var(--second-family);
    font-weight: 600;
    font-size: 15px;
    line-height: 150%;
    letter-spacing: 0.01em;
    color: var(--text-base);
}
.cky-notice .cky-title{
    margin: 0 !important;
}
.cky-consent-container{
    width: 613px !important;
}
.cky-notice-des{
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}
.cky-notice-des:before{
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4.5C0 2.01472 2.01472 0 4.5 0H43.5C45.9853 0 48 2.01472 48 4.5V43.5C48 45.9853 45.9853 48 43.5 48H4.5C2.01472 48 0 45.9853 0 43.5V4.5Z' fill='%23E6EFFF'/%3E%3Cpath d='M4.5 0.375H43.5C45.7782 0.375 47.625 2.22183 47.625 4.5V43.5C47.625 45.7782 45.7782 47.625 43.5 47.625H4.5C2.22183 47.625 0.375 45.7782 0.375 43.5V4.5C0.375 2.22183 2.22183 0.375 4.5 0.375Z' stroke='%231B5DF8' stroke-opacity='0.1' stroke-width='0.75'/%3E%3Cpath d='M16.9289 16.9299C19.037 14.8218 21.852 13.8508 24.6108 14.0185C24.991 14.0416 25.1781 14.4865 25.0274 14.8363C24.477 16.1143 24.7239 17.6536 25.7678 18.6974C26.3308 19.2604 27.0378 19.5906 27.7702 19.6894C28.048 19.7269 28.2735 19.9524 28.311 20.2301C28.4098 20.9626 28.74 21.6695 29.3029 22.2326C30.3468 23.2764 31.8855 23.5226 33.1633 22.972C33.513 22.8213 33.9578 23.0082 33.981 23.3884C34.1492 26.1476 33.1789 28.963 31.0705 31.0714C27.1653 34.9767 20.8341 34.9767 16.9289 31.0714C13.0237 27.1662 13.0237 20.8351 16.9289 16.9299ZM21.8781 26.1222C21.2923 25.5365 20.3428 25.5365 19.757 26.1222C19.1716 26.708 19.1714 27.6576 19.757 28.2433C20.3427 28.829 21.2923 28.8288 21.8781 28.2433C22.4639 27.6575 22.4639 26.708 21.8781 26.1222ZM27.8889 25.7687C27.3031 25.183 26.3536 25.1831 25.7678 25.7687C25.182 26.3545 25.182 27.304 25.7678 27.8898C26.3536 28.4755 27.3031 28.4756 27.8889 27.8898C28.4744 27.304 28.4745 26.3544 27.8889 25.7687ZM22.2316 20.1115C21.6459 19.5259 20.6963 19.5258 20.1105 20.1115C19.5248 20.6972 19.5249 21.6468 20.1105 22.2326C20.6963 22.8184 21.6458 22.8184 22.2316 22.2326C22.8174 21.6468 22.8174 20.6973 22.2316 20.1115Z' fill='%231B5DF8'/%3E%3C/svg%3E%0A");
    content: '';
    display: block;
    width: 48px;
    height: 48px;
    flex: 1 0 auto;
    
}
.cky-notice-btn-wrapper{
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap !important;
    flex-direction: row-reverse;
}
.cky-notice-group{

}
.cky-notice-group{
    display: flex;
    align-items: center;
    gap: 24px;
}
.cky-btn-accept{
    font-family: var(--second-family) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 129% !important;
    letter-spacing: 0.01em !important;
    color: var(--base-white) !important;
    font-family: var(--second-family) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 129% !important;
    letter-spacing: 0.01em !important;
    color: var(--base-white) !important;
    height: 42px;
    border-radius: 4px !important;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.02), 0 3px 12px 0 rgba(0, 0, 0, 0.03), 0 7px 27px 0 rgba(0, 0, 0, 0.04), 0 13px 57px 0 rgba(0, 0, 0, 0.05), 0 22px 110px 0 rgba(0, 0, 0, 0.07) !important;
background: linear-gradient(180deg, #4b81fe 0%, #1b5df8 100%) !important;
}
.cky-btn-reject{
    border-radius: 4px !important;
    height: 42px;
    font-family: var(--second-family) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 129% !important;
    letter-spacing: 0.01em !important;
    color: var(--base-black) !important;
    border: 1px solid var(--base-border-black) !important;
    border-radius: 4px !important;
    padding: 4px 16px !important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.03), 0 24px 32px 0 rgba(0, 0, 0, 0.04) !important;
    background: var(--base-white) !important;
    text-shadow: 0 2px 3px 0 rgba(18, 23, 51, 0.02), 0 8px 7px 0 var(--base-border-black), 0 20px 13px 0 rgba(18, 23, 51, 0.05), 0 39px 25px 0 rgba(18, 23, 51, 0.06), 0 65px 47px 0 rgba(18, 23, 51, 0.08), 0 100px 80px 0 rgba(18, 23, 51, 0.1);
}