/* ================================================================
   FERRARI.COM — PIXEL-PERFECT CLONE
   ================================================================ */

/* Google Fonts: Barlow Condensed (Ferrari heading font substitute) */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Barlow:wght@300;400;500&display=swap');

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

:root {
  --clr-black:    #000000;
  --clr-dark:     #0a0a0a;
  --clr-dark2:    #111111;
  --clr-white:    #ffffff;
  --clr-red:      #cc0000;
  --clr-red-dk:   #aa0000;
  --clr-gray:     #888888;
  --clr-gray-lt:  #cccccc;
  --clr-border:   rgba(255,255,255,0.1);
  --clr-border-dk:rgba(0,0,0,0.12);
  --nav-h:        70px;
  --ease:         cubic-bezier(0.4,0,0.2,1);
  --ease-out:     cubic-bezier(0,0,0.2,1);
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  background: var(--clr-black);
  color: var(--clr-white);
  overflow-x: hidden;
  opacity: 0;
  transition: opacity 0.3s;
}

body.loaded { opacity: 1; }
body.menu-open { overflow: hidden; }

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
ul { list-style: none; }

/* ================================================================
   NAVIGATION — birebir Ferrari.com nav bar
   ================================================================ */
.f-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  height: var(--nav-h);
  /* Transparent over hero, transitions to black on scroll */
  background: transparent;
  transition: background 0.4s var(--ease);
}

/* After scroll: solid black — NEVER white */
.f-header.scrolled {
  background: var(--clr-black);
}

.f-nav {
  height: 100%;
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  align-items: center;
  padding: 0 36px;
}

/* ---- Logo ---- */
.f-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Ferrari Shield SVG wrapper */
.f-logo__shield {
  width: 36px;
  height: auto;
  flex-shrink: 0;
}

.f-logo__text {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  line-height: 1.3;
}

/* ---- Nav Links (center) ---- */
.f-nav__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
}

.f-nav__link {
  font-family: 'Barlow', sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  position: relative;
  padding: 4px 0;
  white-space: nowrap;
  transition: color 0.2s;
}

.f-nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--clr-white);
  transition: width 0.3s var(--ease);
}

.f-nav__link:hover { color: var(--clr-white); }
.f-nav__link:hover::after,
.f-nav__link.active::after { width: 100%; }

/* ---- Nav Right actions ---- */
.f-nav__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.f-nav__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.85);
  transition: color 0.2s;
}

.f-nav__icon:hover { color: var(--clr-white); }

/* ---- MENU Button ---- */
.f-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: rgba(255,255,255,0.88);
  transition: color 0.2s;
  padding: 4px 0;
}

.f-menu-btn:hover { color: var(--clr-white); }

.f-menu-btn__label {
  font-family: 'Barlow', sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.f-menu-btn__bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 20px;
}

.f-menu-btn__bars span {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.3s;
}

/* ================================================================
   FULL-SCREEN MENU OVERLAY — Ferrari.com tarzı tam ekran
   ================================================================ */
.f-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: var(--clr-black);
  display: flex;
  flex-direction: column;
  /* Hidden state */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease);
}

.f-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* ---- Overlay top bar ---- */
.f-overlay__bar {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.f-overlay__logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Close button — MENU text becomes ✕ */
.f-close-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: rgba(255,255,255,0.88);
  transition: color 0.2s;
}

.f-close-btn:hover { color: var(--clr-white); }

.f-close-btn__label {
  font-family: 'Barlow', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.f-close-icon {
  font-size: 1.1rem;
  line-height: 1;
}

/* ---- Overlay body ---- */
.f-overlay__body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

/* ---- Left: Primary navigation items ---- */
.f-overlay__primary {
  padding: 60px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  border-right: 1px solid rgba(255,255,255,0.08);
}

.f-overlay__item {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: 300;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
  line-height: 1.15;
  user-select: none;
}

.f-overlay__item:hover,
.f-overlay__item.active {
  color: var(--clr-white);
}

/* ---- Right: Sub-navigation ---- */
.f-overlay__secondary {
  padding: 60px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.f-overlay__sub {
  display: none;
  flex-direction: column;
  gap: 0;
}

.f-overlay__sub.visible {
  display: flex;
}

.f-overlay__sub-heading {
  font-family: 'Barlow', sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--clr-red);
  margin-bottom: 28px;
}

.f-overlay__sub-link {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.05rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color 0.2s, padding-left 0.2s;
  display: block;
}

.f-overlay__sub-link:hover {
  color: var(--clr-white);
  padding-left: 8px;
}

/* ---- Overlay footer ---- */
.f-overlay__foot {
  padding: 24px 80px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.f-overlay__social {
  display: flex;
  align-items: center;
  gap: 20px;
}

.f-overlay__social-link {
  font-family: 'Barlow', sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  transition: color 0.2s;
}

.f-overlay__social-link:hover { color: var(--clr-white); }

.f-overlay__change-country {
  font-family: 'Barlow', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}

.f-overlay__change-country:hover { color: var(--clr-white); }

/* ================================================================
   HERO — Ferrari.com hero bölümü
   ================================================================ */
.f-hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.f-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.f-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.f-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Dark gradient overlay */
.f-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15) 0%,
    rgba(0,0,0,0.05) 40%,
    rgba(0,0,0,0.5) 75%,
    rgba(0,0,0,0.8) 100%
  );
}

/* Content at bottom-left */
.f-hero__content {
  position: relative;
  z-index: 2;
  padding: 0 60px 80px;
  max-width: 900px;
}

.f-hero__eyebrow {
  font-family: 'Barlow', sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-red);
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 0.7s 0.4s var(--ease) forwards;
}

.f-hero__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(5rem, 12vw, 13rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 0.9;
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s 0.6s var(--ease) forwards;
}

.f-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Barlow', sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clr-white);
  border-bottom: 1px solid rgba(255,255,255,0.5);
  padding-bottom: 2px;
  transition: border-color 0.2s, gap 0.2s;
  opacity: 0;
  animation: fadeUp 0.7s 0.9s var(--ease) forwards;
}

.f-hero__cta:hover {
  border-color: var(--clr-white);
  gap: 18px;
}

.f-hero__cta svg {
  width: 16px;
  height: 16px;
}

/* Scroll indicator — right bottom */
.f-hero__scroll {
  position: absolute;
  bottom: 40px;
  right: 60px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.f-hero__scroll-line {
  width: 1px;
  height: 48px;
  background: rgba(255,255,255,0.3);
  position: relative;
  overflow: hidden;
}

.f-hero__scroll-line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--clr-white);
  animation: scrollDrop 1.8s ease-in-out infinite;
}

@keyframes scrollDrop {
  0%   { top: -100%; }
  100% { top: 100%; }
}

.f-hero__scroll-label {
  font-family: 'Barlow', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  writing-mode: vertical-rl;
}

/* ================================================================
   GATEWAY SECTION — Haber + 6 Post grid (Ferrari.com ana içerik)
   ================================================================ */
.f-gateway {
  background: var(--clr-black);
}

/* ---- Featured News Article ---- */
.f-featured {
  position: relative;
  overflow: hidden;
}

.f-featured__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
}

.f-featured__media {
  position: relative;
  overflow: hidden;
  background: var(--clr-dark2);
}

.f-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

.f-featured:hover .f-featured__media img {
  transform: scale(1.03);
}

.f-featured__content {
  padding: 80px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--clr-dark2);
  border-left: 1px solid rgba(255,255,255,0.06);
}

.f-featured__tag {
  font-family: 'Barlow', sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-red);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.f-featured__tag::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--clr-red);
}

.f-featured__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 24px;
}

.f-featured__text {
  font-family: 'Barlow', sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  color: rgba(255,255,255,0.6);
  line-height: 1.8;
  margin-bottom: 40px;
}

.f-featured__link {
  font-family: 'Barlow', sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clr-white);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 2px;
  transition: gap 0.2s, border-color 0.2s;
  align-self: flex-start;
}

.f-featured__link:hover {
  gap: 18px;
  border-color: var(--clr-white);
}

.f-featured__link svg { width: 14px; }

/* ---- View All News bar ---- */
.f-news-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 60px;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.f-news-bar__label {
  font-family: 'Barlow', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

.f-news-bar__link {
  font-family: 'Barlow', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s, gap 0.2s;
}

.f-news-bar__link:hover { color: var(--clr-white); gap: 12px; }

/* ---- Gateway Posts Grid ---- */
.f-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #111; /* Gap color */
}

.f-post {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--clr-black);
}

.f-post:hover .f-post__img {
  transform: scale(1.05);
}

.f-post__img-wrap {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--clr-dark2);
  position: relative;
}

.f-post__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

/* Dark gradient at bottom of image */
.f-post__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.2) 50%,
    transparent 100%
  );
}

.f-post__body {
  padding: 20px 24px 28px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.f-post__section {
  font-family: 'Barlow', sans-serif;
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-red);
  margin-bottom: 6px;
}

.f-post__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clr-white);
  margin-bottom: 16px;
  line-height: 1.2;
}

.f-post__discover {
  font-family: 'Barlow', sans-serif;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 1px;
  transition: color 0.2s, gap 0.2s, border-color 0.2s;
}

.f-post:hover .f-post__discover {
  color: var(--clr-white);
  gap: 12px;
  border-color: rgba(255,255,255,0.6);
}

/* ================================================================
   NEWSLETTER — Ferrari.com bülten bölümü
   ================================================================ */
.f-newsletter {
  padding: 100px 60px;
  background: var(--clr-dark2);
  border-top: 1px solid rgba(255,255,255,0.06);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}

.f-newsletter__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.6rem, 3vw, 3rem);
  font-weight: 300;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 12px;
}

.f-newsletter__sub {
  font-family: 'Barlow', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  color: rgba(255,255,255,0.5);
  line-height: 1.8;
}

.f-newsletter__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.f-newsletter__row {
  display: flex;
}

.f-newsletter__input {
  flex: 1;
  height: 50px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-right: none;
  color: var(--clr-white);
  font-family: 'Barlow', sans-serif;
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  padding: 0 20px;
  outline: none;
  transition: border-color 0.2s;
}

.f-newsletter__input::placeholder {
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.04em;
}

.f-newsletter__input:focus {
  border-color: rgba(255,255,255,0.4);
}

.f-newsletter__btn {
  height: 50px;
  padding: 0 32px;
  background: var(--clr-red);
  color: var(--clr-white);
  font-family: 'Barlow', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--clr-red);
  transition: background 0.2s;
  flex-shrink: 0;
}

.f-newsletter__btn:hover {
  background: var(--clr-red-dk);
  border-color: var(--clr-red-dk);
}

.f-newsletter__note {
  font-family: 'Barlow', sans-serif;
  font-size: 0.65rem;
  font-weight: 300;
  color: rgba(255,255,255,0.3);
  line-height: 1.7;
}

.f-newsletter__note a {
  color: rgba(255,255,255,0.45);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ================================================================
   FOOTER — Ferrari.com footer
   ================================================================ */
.f-footer {
  background: var(--clr-black);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 72px 60px 40px;
}

.f-footer__top {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 40px;
}

.f-footer__col-head {
  font-family: 'Barlow', sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  margin-bottom: 20px;
}

.f-footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.f-footer__link {
  font-family: 'Barlow', sans-serif;
  font-size: 0.78rem;
  font-weight: 300;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.03em;
  transition: color 0.2s;
}

.f-footer__link:hover { color: rgba(255,255,255,0.85); }

/* Social strip */
.f-footer__social {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
}

.f-footer__social-link {
  font-family: 'Barlow', sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  transition: color 0.2s;
}

.f-footer__social-link:hover { color: rgba(255,255,255,0.85); }

/* Bottom legal strip */
.f-footer__bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.f-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.f-footer__legal-link {
  font-family: 'Barlow', sans-serif;
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  transition: color 0.2s;
}

.f-footer__legal-link:hover { color: rgba(255,255,255,0.6); }

.f-footer__corp {
  font-family: 'Barlow', sans-serif;
  font-size: 0.62rem;
  font-weight: 300;
  color: rgba(255,255,255,0.2);
  line-height: 1.7;
  max-width: 480px;
  text-align: right;
}

/* ================================================================
   COOKIE BANNER — Ferrari.com cookie consent
   ================================================================ */
.f-cookie {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 800;
  background: rgba(0,0,0,0.97);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 22px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  transform: translateY(100%);
  transition: transform 0.5s var(--ease-out);
}

.f-cookie.show { transform: translateY(0); }

.f-cookie__text {
  font-family: 'Barlow', sans-serif;
  font-size: 0.76rem;
  font-weight: 300;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  flex: 1;
}

.f-cookie__text a {
  color: rgba(255,255,255,0.75);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.f-cookie__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.f-btn {
  font-family: 'Barlow', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 11px 22px;
  border: 1px solid;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
  white-space: nowrap;
}

.f-btn--outline {
  background: transparent;
  color: rgba(255,255,255,0.65);
  border-color: rgba(255,255,255,0.2);
}

.f-btn--outline:hover {
  color: var(--clr-white);
  border-color: rgba(255,255,255,0.5);
}

.f-btn--solid {
  background: var(--clr-red);
  color: var(--clr-white);
  border-color: var(--clr-red);
}

.f-btn--solid:hover { background: var(--clr-red-dk); border-color: var(--clr-red-dk); }

/* ================================================================
   INNER PAGE — Header banner (sports-cars, racing, vb.)
   ================================================================ */
.f-page-hero {
  position: relative;
  height: 65vh;
  min-height: 480px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding-bottom: 72px;
}

.f-page-hero__media {
  position: absolute;
  inset: 0;
}

.f-page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.f-page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0.3) 100%);
}

.f-page-hero__content {
  position: relative;
  z-index: 1;
  padding: 0 60px;
}

.f-page-hero__eyebrow {
  font-family: 'Barlow', sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--clr-red);
  margin-bottom: 12px;
}

.f-page-hero__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(4.5rem, 10vw, 11rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 0.9;
}

/* ================================================================
   SPORTS CARS PAGE — Model grid
   ================================================================ */
.f-filter-bar {
  padding: 40px 60px 0;
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}

.f-filter-btn {
  font-family: 'Barlow', sans-serif;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 10px 22px;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
}

.f-filter-btn:hover,
.f-filter-btn.active {
  background: var(--clr-red);
  border-color: var(--clr-red);
  color: var(--clr-white);
}

.f-cars-grid {
  padding: 40px 60px 100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #111;
}

.f-car-card {
  background: var(--clr-black);
  cursor: pointer;
  overflow: hidden;
}

.f-car-card:hover .f-car-card__img { transform: scale(1.03); }

.f-car-card__img-wrap {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--clr-dark2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.f-car-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.f-car-card__body {
  padding: 24px 28px 32px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.f-car-card__cat {
  font-family: 'Barlow', sans-serif;
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-red);
  margin-bottom: 6px;
}

.f-car-card__name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.f-car-card__specs {
  display: flex;
  gap: 28px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 20px;
}

.f-spec__val {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: -0.01em;
}

.f-spec__unit {
  font-family: 'Barlow', sans-serif;
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
}

.f-car-card__actions {
  display: flex;
  gap: 8px;
}

/* ================================================================
   RACING PAGE specific
   ================================================================ */
.f-drivers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #111;
  padding: 0 60px 80px;
}

.f-driver-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/5;
  cursor: pointer;
  background: var(--clr-dark2);
}

.f-driver-card:hover .f-driver-card__img { transform: scale(1.03); }

.f-driver-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.7s var(--ease);
}

.f-driver-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
}

.f-driver-card__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 48px;
  z-index: 1;
}

.f-driver-card__num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 5rem;
  font-weight: 300;
  line-height: 1;
  color: rgba(204,0,0,0.5);
  letter-spacing: -0.04em;
  margin-bottom: 8px;
}

.f-driver-card__name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2.4rem;
  font-weight: 300;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.f-driver-card__nat {
  font-family: 'Barlow', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

/* Stats row */
.f-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #111;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.f-stat-block {
  background: var(--clr-dark2);
  padding: 50px 40px;
  text-align: center;
}

.f-stat-block__num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 4rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--clr-red);
  line-height: 1;
  margin-bottom: 8px;
}

.f-stat-block__label {
  font-family: 'Barlow', sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

/* Racing sections */
.f-racing-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #111;
}

.f-racing-panel {
  position: relative;
  overflow: hidden;
  background: var(--clr-dark2);
}

.f-racing-panel__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.f-racing-panel:hover .f-racing-panel__media {
  transform: scale(1.03);
}

.f-racing-panel__content {
  padding: 72px 72px;
}

.f-racing-panel__tag {
  font-family: 'Barlow', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-red);
  margin-bottom: 16px;
}

.f-racing-panel__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 300;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 20px;
}

.f-racing-panel__text {
  font-family: 'Barlow', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  line-height: 1.8;
  margin-bottom: 32px;
}

/* Timeline news */
.f-timeline {
  padding: 80px 60px;
}

.f-timeline__item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 32px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  align-items: center;
  cursor: pointer;
  transition: background 0.2s;
}

.f-timeline__item:hover { background: rgba(255,255,255,0.02); }
.f-timeline__item:hover .f-timeline__arrow { transform: translateX(5px); color: var(--clr-white); }

.f-timeline__date {
  font-family: 'Barlow', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--clr-red);
  text-transform: uppercase;
}

.f-timeline__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

.f-timeline__desc {
  font-family: 'Barlow', sans-serif;
  font-size: 0.78rem;
  font-weight: 300;
  color: rgba(255,255,255,0.45);
}

.f-timeline__arrow {
  color: rgba(255,255,255,0.2);
  font-size: 1.2rem;
  transition: transform 0.2s, color 0.2s;
}

/* ================================================================
   COLLECTIONS PAGE
   ================================================================ */
.f-store-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #111;
  padding: 40px 60px 100px;
}

.f-store-card {
  background: var(--clr-black);
  cursor: pointer;
  overflow: hidden;
}

.f-store-card:hover .f-store-card__img { transform: scale(1.05); }

.f-store-card__img-wrap {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--clr-dark2);
  position: relative;
}

.f-store-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.f-store-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--clr-red);
  color: var(--clr-white);
  font-family: 'Barlow', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 8px;
}

.f-store-card__body { padding: 16px 18px 22px; }

.f-store-card__cat {
  font-family: 'Barlow', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 4px;
}

.f-store-card__name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.f-store-card__price {
  font-family: 'Barlow', sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
}

/* ================================================================
   EXPERIENCES PAGE
   ================================================================ */
.f-exp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  gap: 1px;
  background: #111;
}

.f-exp-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.f-exp-card:nth-child(3) { grid-column: 1 / -1; }
.f-exp-card:nth-child(1),
.f-exp-card:nth-child(2) { aspect-ratio: 4/3; }
.f-exp-card:nth-child(3) { aspect-ratio: 21/9; }
.f-exp-card:nth-child(4),
.f-exp-card:nth-child(5) { aspect-ratio: 16/10; }

.f-exp-card:hover .f-exp-card__img { transform: scale(1.04); }

.f-exp-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

.f-exp-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
}

.f-exp-card__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 36px 40px;
  z-index: 1;
}

.f-exp-card__tag {
  font-family: 'Barlow', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-red);
  margin-bottom: 6px;
}

.f-exp-card__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.2rem, 2.5vw, 2rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 12px;
}

.f-exp-card__discover {
  font-family: 'Barlow', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding-bottom: 1px;
  transition: color 0.2s, gap 0.2s;
}

.f-exp-card:hover .f-exp-card__discover { color: var(--clr-white); gap: 12px; }

/* ================================================================
   ABOUT PAGE
   ================================================================ */
.f-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  padding: 100px 60px;
  align-items: center;
}

.f-milestone-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #111;
}

.f-milestone-card {
  background: var(--clr-dark2);
  padding: 48px 40px;
}

.f-milestone-card__year {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 3.5rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--clr-red);
  line-height: 1;
  margin-bottom: 12px;
}

.f-milestone-card__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.f-milestone-card__text {
  font-family: 'Barlow', sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  color: rgba(255,255,255,0.4);
  line-height: 1.7;
}

/* ================================================================
   SECTION HEADINGS (shared)
   ================================================================ */
.f-section-head {
  padding: 72px 60px 48px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.f-section-head__eyebrow {
  font-family: 'Barlow', sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--clr-red);
  margin-bottom: 12px;
}

.f-section-head__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.95;
}

.f-section-head__link {
  font-family: 'Barlow', sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 2px;
  transition: color 0.2s, gap 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.f-section-head__link:hover { color: var(--clr-white); gap: 12px; }

/* Shared body text styles */
.f-body-text {
  font-family: 'Barlow', sans-serif;
  font-size: 0.92rem;
  font-weight: 300;
  color: rgba(255,255,255,0.6);
  line-height: 1.85;
}

.f-eyebrow {
  font-family: 'Barlow', sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--clr-red);
  margin-bottom: 14px;
}

.f-big-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.95;
}

/* ================================================================
   SCROLL REVEAL
   ================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1200px) {
  .f-nav__links { gap: 24px; }
  .f-posts { grid-template-columns: repeat(2, 1fr); }
  .f-store-grid { grid-template-columns: repeat(2, 1fr); }
  .f-milestone-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  :root { --nav-h: 60px; }
  .f-nav { grid-template-columns: 1fr auto; padding: 0 24px; }
  .f-nav__links { display: none; }
  .f-hero__content { padding: 0 32px 60px; }
  .f-featured__inner { grid-template-columns: 1fr; }
  .f-featured__media { aspect-ratio: 16/9; }
  .f-featured__content { padding: 48px 40px; }
  .f-newsletter { grid-template-columns: 1fr; gap: 40px; padding: 72px 40px; }
  .f-footer__top { grid-template-columns: repeat(2, 1fr); }
  .f-footer__bottom { flex-direction: column; }
  .f-footer__corp { text-align: left; }
  .f-about-grid { grid-template-columns: 1fr; gap: 40px; }
  .f-racing-section { grid-template-columns: 1fr; }
  .f-stats-row { grid-template-columns: repeat(2, 1fr); }
  .f-drivers-grid { padding: 0 24px 60px; }
  .f-overlay__body { grid-template-columns: 1fr; }
  .f-overlay__secondary { display: none; }
  .f-overlay__primary { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .f-cars-grid { grid-template-columns: repeat(2, 1fr); padding: 40px 24px 80px; }
}

@media (max-width: 680px) {
  .f-posts { grid-template-columns: 1fr; }
  .f-cars-grid { grid-template-columns: 1fr; }
  .f-store-grid { grid-template-columns: 1fr 1fr; padding: 24px 20px 60px; }
  .f-exp-grid { grid-template-columns: 1fr; }
  .f-exp-card:nth-child(3) { grid-column: 1; }
  .f-exp-card:nth-child(1),
  .f-exp-card:nth-child(2),
  .f-exp-card:nth-child(4),
  .f-exp-card:nth-child(5) { aspect-ratio: 4/3; }
  .f-drivers-grid { grid-template-columns: 1fr; padding: 0 0 40px; }
  .f-page-hero__content { padding: 0 28px; }
  .f-footer { padding: 48px 28px 28px; }
  .f-footer__top { grid-template-columns: 1fr 1fr; }
  .f-cookie { flex-direction: column; padding: 20px 24px; gap: 16px; }
  .f-cookie__actions { flex-wrap: wrap; justify-content: center; }
  .f-overlay__primary { padding: 40px 32px; }
  .f-overlay__foot { padding: 16px 32px; }
  .f-section-head { flex-direction: column; align-items: flex-start; padding: 48px 28px 32px; }
  .f-filter-bar { padding: 32px 28px 0; }
  .f-timeline { padding: 60px 28px; }
  .f-timeline__item { grid-template-columns: 80px 1fr; }
  .f-timeline__arrow { display: none; }
  .f-features__inner { grid-template-columns: 1fr; }
  .f-news-bar { padding: 16px 28px; flex-direction: column; align-items: flex-start; gap: 8px;}
  .f-milestone-row { grid-template-columns: 1fr; }
  .f-stats-row { grid-template-columns: 1fr 1fr; }
}



.f-hero-slider {
    position: relative;
    overflow: hidden;
    height: 100vh;
    min-height: 720px;
    background: #050000;
}

.f-hero-slider__track,
.f-hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.f-hero-slide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 900ms ease, visibility 900ms ease;
}

.f-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

.f-hero-slide .f-hero__media {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.f-hero-slide .f-hero__img,
.f-hero-slide .f-hero__video,
.f-hero-slide .f-hero__youtube,
.f-hero-slide iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    inset: 0;
}

.f-hero-slide .f-hero__youtube iframe {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.f-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,.18) 100%),
        linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.10) 40%, rgba(0,0,0,.55) 100%);
}

.f-hero__content {
    position: absolute;
    z-index: 3;
    left: 42px;
    bottom: 92px;
    max-width: 760px;
    color: #fff;
}

.f-hero__eyebrow {
    margin: 0 0 24px;
    color: #e30613;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 600;
}

.f-hero__title {
    margin: 0;
    color: #fff;
    font-size: clamp(68px, 8.8vw, 150px);
    line-height: .94;
    letter-spacing: .035em;
    font-weight: 300;
    text-transform: uppercase;
}

.f-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 34px;
    padding-bottom: 7px;
    color: #fff;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,.72);
    text-decoration: none;
}

.f-hero__cta:hover {
    color: #fff;
    opacity: .8;
    text-decoration: none;
}

.f-hero__cta svg {
    width: 16px;
    height: 16px;
}

.f-hero__scroll {
    position: absolute;
    right: 28px;
    bottom: 28px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.72);
}

.f-hero__scroll-line {
    width: 1px;
    height: 82px;
    background: rgba(255,255,255,.45);
}

.f-hero__scroll-label {
    writing-mode: vertical-rl;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 9px;
}

@media (max-width: 768px) {
    .f-hero-slider {
        min-height: 640px;
    }

    .f-hero__content {
        left: 24px;
        right: 24px;
        bottom: 82px;
        max-width: none;
    }

    .f-hero__title {
        font-size: clamp(52px, 15vw, 92px);
    }

    .f-hero__eyebrow {
        font-size: 10px;
        letter-spacing: 3px;
    }
}

.history-slider-section{
    position:relative;
    background:#070707;
    color:#fff;
    overflow:hidden;
    padding:120px 0 95px;
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.history-slider-section:before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 70% 35%, rgba(227,6,19,.16), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.035), transparent 40%);
    pointer-events:none;
}

.history-bg-year{
    position:absolute;
    right:-30px;
    top:30px;
    font-size:22vw;
    line-height:1;
    color:rgba(255,255,255,.025);
    font-weight:300;
    letter-spacing:-12px;
    z-index:0;
    user-select:none;
}

.history-slider-inner{
    position:relative;
    z-index:2;
    max-width:1240px;
    margin:0 auto;
    padding:0 48px;
}

.history-head{
    margin-bottom:70px;
}

.history-head span{
    display:block;
    color:#e30613;
    font-size:11px;
    letter-spacing:5px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.history-head h2{
    margin:0;
    max-width:780px;
    color:#fff;
    font-size:clamp(46px,6vw,92px);
    font-weight:300;
    line-height:.95;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.history-slider{
    position:relative;
    min-height:330px;
}

.history-slide{
    display:none;
    grid-template-columns:42% 58%;
    align-items:center;
    gap:60px;
    min-height:330px;
}

.history-slide.is-active{
    display:grid;
    animation:historyFade .75s ease both;
}

@keyframes historyFade{
    from{
        opacity:0;
        transform:translateY(24px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.history-year{
    color:#e30613;
    font-size:clamp(90px,13vw,190px);
    line-height:.85;
    font-weight:300;
    letter-spacing:-6px;
}

.history-content{
    max-width:620px;
    padding-left:42px;
    border-left:1px solid rgba(255,255,255,.15);
}

.history-content h3{
    color:#fff;
    margin:0 0 22px;
    font-size:clamp(28px,3.5vw,54px);
    font-weight:300;
    line-height:1.05;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.history-content p{
    color:rgba(255,255,255,.48);
    margin:0;
    font-size:18px;
    line-height:1.85;
    max-width:560px;
}

.history-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:54px;
    height:54px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.045);
    color:#fff;
    font-size:38px;
    line-height:1;
    z-index:5;
    transition:all .25s ease;
}

.history-nav:hover{
    background:#e30613;
    border-color:#e30613;
}

.history-prev{
    left:-25px;
}

.history-next{
    right:-25px;
}

.history-years{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-top:60px;
    padding-top:28px;
    border-top:1px solid rgba(255,255,255,.12);
}

.history-years button{
    background:transparent;
    border:0;
    color:rgba(255,255,255,.38);
    font-size:15px;
    letter-spacing:2px;
    font-weight:500;
    padding:12px 0;
    position:relative;
    transition:all .25s ease;
}

.history-years button:before{
    content:"";
    position:absolute;
    left:50%;
    top:-34px;
    width:9px;
    height:9px;
    border-radius:50%;
    background:rgba(255,255,255,.25);
    transform:translateX(-50%);
    transition:all .25s ease;
}

.history-years button.is-active{
    color:#fff;
}

.history-years button.is-active:before{
    background:#e30613;
    box-shadow:0 0 0 8px rgba(227,6,19,.12);
}

@media(max-width:900px){
    .history-slider-section{
        padding:90px 0 75px;
    }

    .history-slider-inner{
        padding:0 24px;
    }

    .history-slide,
    .history-slide.is-active{
        display:block;
    }

    .history-year{
        margin-bottom:35px;
    }

    .history-content{
        padding-left:24px;
    }

    .history-nav{
        display:none;
    }

    .history-years{
        overflow-x:auto;
        justify-content:flex-start;
        padding-bottom:8px;
    }

    .history-years button{
        min-width:80px;
    }
}

@media(max-width:768px){

    .history-slider-section{
        padding:70px 0 58px;
    }

    .history-slider-inner{
        padding:0 22px;
    }

    .history-head{
        margin-bottom:42px;
    }

    .history-head span{
        font-size:10px;
        letter-spacing:4px;
        margin-bottom:14px;
    }

    .history-head h2{
        font-size:42px;
        line-height:1.05;
        letter-spacing:.035em;
        max-width:100%;
    }

    .history-bg-year{
        right:-20px;
        top:95px;
        font-size:34vw;
        letter-spacing:-5px;
        opacity:.75;
    }

    .history-slider{
        min-height:auto;
    }

    .history-slide,
    .history-slide.is-active{
        display:block;
        min-height:auto;
    }

    .history-year{
        font-size:82px;
        line-height:.9;
        letter-spacing:-3px;
        margin-bottom:24px;
    }

    .history-content{
        padding-left:0;
        border-left:0;
        max-width:100%;
    }

    .history-content h3{
        font-size:26px;
        line-height:1.18;
        letter-spacing:.045em;
        margin-bottom:16px;
    }

    .history-content p{
        font-size:15px;
        line-height:1.75;
        color:rgba(255,255,255,.55);
        max-width:100%;
    }

    .history-years{
        margin-top:38px;
        padding-top:0;
        border-top:0;
        gap:10px;
        overflow-x:auto;
        justify-content:flex-start;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }

    .history-years::-webkit-scrollbar{
        display:none;
    }

    .history-years button{
        min-width:auto;
        flex:0 0 auto;
        padding:10px 16px;
        border-radius:999px;
        background:rgba(255,255,255,.06);
        border:1px solid rgba(255,255,255,.10);
        color:rgba(255,255,255,.45);
        font-size:13px;
        letter-spacing:1px;
    }

    .history-years button:before{
        display:none;
    }

    .history-years button.is-active{
        background:#e30613;
        border-color:#e30613;
        color:#fff;
        box-shadow:0 8px 20px rgba(227,6,19,.25);
    }

    .history-nav{
        display:none;
    }
}

@media(max-width:420px){

    .history-slider-section{
        padding:62px 0 50px;
    }

    .history-head h2{
        font-size:34px;
    }

    .history-year{
        font-size:68px;
        margin-bottom:20px;
    }

    .history-content h3{
        font-size:22px;
    }

    .history-content p{
        font-size:14px;
        line-height:1.7;
    }
}
@media(max-width:900px){

    .history-slide{
        display:none !important;
        grid-template-columns:none;
        min-height:auto;
    }

    .history-slide.is-active{
        display:block !important;
        min-height:auto;
        animation:historyFade .75s ease both;
    }

    .history-slider{
        min-height:auto;
    }

    .history-year{
        margin-bottom:26px;
    }
}

@media(max-width:768px){

    .history-slide{
        display:none !important;
    }

    .history-slide.is-active{
        display:block !important;
    }
}


.values-section{
    background:#000;
    padding:95px 0 0;
}

.values-head{
    margin-top:0 !important;
    padding:0 64px 58px;
}

.values-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:rgba(255,255,255,.07);
    border-top:1px solid rgba(255,255,255,.07);
    border-bottom:1px solid rgba(255,255,255,.07);
}

.value-card{
    position:relative;
    background:var(--clr-dark2);
    padding:66px 64px 70px;
    min-height:360px;
    overflow:hidden;
    transition:all .35s ease;
}

.value-card:before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 80% 20%, rgba(227,6,19,.14), transparent 34%);
    opacity:0;
    transition:all .35s ease;
}

.value-card:hover{
    background:#151515;
}

.value-card:hover:before{
    opacity:1;
}

.value-number{
    position:absolute;
    right:34px;
    top:28px;
    font-family:'Barlow Condensed';
    font-size:72px;
    line-height:1;
    color:rgba(255,255,255,.035);
    font-weight:300;
    letter-spacing:-2px;
}

.value-title{
    position:relative;
    z-index:2;
    font-family:'Barlow Condensed';
    font-size:4rem;
    font-weight:300;
    text-transform:uppercase;
    color:var(--clr-red);
    line-height:.95;
    margin:0 0 20px;
    letter-spacing:.03em;
}

.value-card h3{
    position:relative;
    z-index:2;
    font-family:'Barlow Condensed';
    font-size:1.25rem;
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin:0 0 18px;
    color:#fff;
}

.value-card .f-body-text{
    position:relative;
    z-index:2;
    max-width:520px;
    margin:0;
}

.value-card:hover .value-title{
    transform:translateY(-3px);
}

.value-title{
    transition:all .35s ease;
}

@media(max-width:1024px){
    .values-head{
        padding:0 36px 45px;
    }

    .value-card{
        padding:52px 36px 56px;
    }

    .value-title{
        font-size:3.3rem;
    }
}

@media(max-width:768px){
    .values-section{
        padding:72px 0 0;
    }

    .values-head{
        padding:0 24px 38px;
    }

    .values-grid{
        grid-template-columns:1fr;
        gap:1px;
    }

    .value-card{
        min-height:auto;
        padding:44px 28px 46px;
    }

    .value-number{
        right:24px;
        top:22px;
        font-size:58px;
    }

    .value-title{
        font-size:3rem;
        margin-bottom:15px;
    }

    .value-card h3{
        font-size:1.05rem;
        margin-bottom:14px;
    }

    .value-card .f-body-text{
        font-size:15px;
        line-height:1.75;
    }
}

@media(max-width:420px){
    .value-card{
        padding:38px 22px 40px;
    }

    .value-title{
        font-size:2.65rem;
    }
}



.premium-page-hero{
    position:relative;
    height:calc(100vh - var(--nav-h));
    min-height:680px;
    background:#050505;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
}

.premium-page-hero__media{
    position:absolute;
    inset:0;
    z-index:1;
}

.premium-page-hero__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transform:scale(1.04);
    animation:heroZoom 8s ease forwards;
}

@keyframes heroZoom{
    from{
        transform:scale(1.08);
    }
    to{
        transform:scale(1.02);
    }
}

.premium-page-hero__shade{
    position:absolute;
    inset:0;
    z-index:2;
    background:
        linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.38) 42%, rgba(0,0,0,.18) 100%),
        linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.30) 42%, rgba(0,0,0,.88) 100%);
}

.premium-page-hero__grain{
    position:absolute;
    inset:0;
    z-index:3;
    opacity:.16;
    pointer-events:none;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.14) 0 1px, transparent 1px),
        radial-gradient(circle at 80% 60%, rgba(255,255,255,.10) 0 1px, transparent 1px);
    background-size:4px 4px, 6px 6px;
    mix-blend-mode:overlay;
}

.premium-page-hero__content{
    position:relative;
    z-index:4;
    width:100%;
    max-width:1320px;
    margin:0 auto;
    padding:0 64px 105px;
}

.premium-page-hero__line{
    width:72px;
    height:1px;
    background:#e30613;
    margin-bottom:28px;
}

.premium-page-hero__eyebrow{
    color:#e30613;
    font-size:11px;
    line-height:1;
    letter-spacing:5px;
    text-transform:uppercase;
    margin:0 0 25px;
    font-weight:600;
}

.premium-page-hero__title{
    color:#fff;
    margin:0;
    font-family:'Barlow Condensed', sans-serif;
    font-size:clamp(72px, 10vw, 180px);
    font-weight:300;
    line-height:.86;
    letter-spacing:.055em;
    text-transform:uppercase;
    max-width:980px;
    text-shadow:0 20px 55px rgba(0,0,0,.45);
}

.premium-page-hero__scroll{
    position:absolute;
    right:36px;
    bottom:34px;
    z-index:5;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:9px;
    color:rgba(255,255,255,.55);
}

.premium-page-hero__scroll span{
    width:1px;
    height:74px;
    background:rgba(255,255,255,.35);
}

.premium-page-hero__scroll small{
    writing-mode:vertical-rl;
    text-transform:uppercase;
    letter-spacing:3px;
    font-size:9px;
}

@media(max-width:768px){
    .premium-page-hero{
        height:76vh;
        min-height:560px;
    }

    .premium-page-hero__content{
        padding:0 26px 72px;
    }

    .premium-page-hero__line{
        width:52px;
        margin-bottom:22px;
    }

    .premium-page-hero__eyebrow{
        font-size:10px;
        letter-spacing:4px;
        margin-bottom:18px;
    }

    .premium-page-hero__title{
        font-size:clamp(58px, 18vw, 92px);
        line-height:.92;
        letter-spacing:.04em;
        max-width:100%;
    }

    .premium-page-hero__scroll{
        display:none;
    }
}


html{
    scroll-behavior:smooth;
}

.f-hero__scroll{
    position:absolute;
    right:34px;
    bottom:34px;
    z-index:20;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;

    text-decoration:none;
    cursor:pointer;

    transition:all .3s ease;
}

.f-hero__scroll:hover{
    transform:translateY(5px);
}

.f-hero__scroll-line{
    position:relative;
    width:1px;
    height:85px;
    background:rgba(255,255,255,.22);
    overflow:hidden;
}

.f-hero__scroll-line::after{
    content:"";
    position:absolute;
    top:-40px;
    left:0;
    width:1px;
    height:40px;
    background:#fff;

    animation:scrollAnim 1.7s infinite;
}

.f-hero__scroll-label{
    writing-mode:vertical-rl;
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:10px;
    color:rgba(255,255,255,.75);
}

@keyframes scrollAnim{
    0%{
        top:-40px;
        opacity:0;
    }

    30%{
        opacity:1;
    }

    100%{
        top:85px;
        opacity:0;
    }
}

@media(max-width:768px){
    .f-hero__scroll{
        right:18px;
        bottom:22px;
        gap:8px;
    }

    .f-hero__scroll-line{
        height:55px;
    }

    .f-hero__scroll-label{
        font-size:8px;
        letter-spacing:2px;
    }
}


.counter-section{
    background:#000;
    padding:95px 0 0;
}

.counter-head{
    margin-top:0 !important;
    padding:0 64px 58px;
}

.counter-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:rgba(255,255,255,.07);
    border-top:1px solid rgba(255,255,255,.07);
    border-bottom:1px solid rgba(255,255,255,.07);
}

.counter-card{
    position:relative;
    background:var(--clr-dark2);
    padding:66px 42px 70px;
    min-height:300px;
    overflow:hidden;
    transition:all .35s ease;
}

.counter-card:before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 78% 20%, rgba(227,6,19,.16), transparent 34%);
    opacity:0;
    transition:all .35s ease;
}

.counter-card:hover{
    background:#151515;
}

.counter-card:hover:before{
    opacity:1;
}

.counter-number-bg{
    position:absolute;
    right:28px;
    top:24px;
    font-family:'Barlow Condensed';
    font-size:72px;
    line-height:1;
    color:rgba(255,255,255,.035);
    font-weight:300;
    letter-spacing:-2px;
}

.counter-value{
    position:relative;
    z-index:2;
    display:flex;
    align-items:flex-start;
    gap:6px;
    margin-bottom:22px;
}

.count-up{
    font-family:'Barlow Condensed';
    font-size:5.2rem;
    font-weight:300;
    line-height:.9;
    letter-spacing:-2px;
    color:var(--clr-red);
}

.counter-plus{
    font-family:'Barlow Condensed';
    font-size:2.3rem;
    line-height:1;
    color:var(--clr-red);
    margin-top:6px;
}

.counter-card h3{
    position:relative;
    z-index:2;
    font-family:'Barlow Condensed';
    font-size:1.25rem;
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin:0;
    color:#fff;
    max-width:220px;
}

@media(max-width:1100px){
    .counter-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .counter-head{
        padding:0 36px 45px;
    }

    .counter-card{
        padding:54px 36px 58px;
    }
}

@media(max-width:768px){
    .counter-section{
        padding:72px 0 0;
    }

    .counter-head{
        padding:0 24px 38px;
    }

    .counter-grid{
        grid-template-columns:1fr;
    }

    .counter-card{
        min-height:auto;
        padding:42px 28px 44px;
    }

    .counter-number-bg{
        right:24px;
        top:20px;
        font-size:58px;
    }

    .count-up{
        font-size:4.1rem;
    }

    .counter-plus{
        font-size:1.9rem;
    }

    .counter-card h3{
        font-size:1.05rem;
    }
}


@media(max-width:768px){
    .sustainability-section{
        grid-template-columns:1fr !important;
    }

    .sustainability-section > div:first-child{
        min-height:320px !important;
    }

    .sustainability-section > div:last-child{
        padding:52px 28px !important;
    }
}


.contactpro-section{
    position:relative;
    background:#000;
    padding:120px 64px 90px;
    overflow:hidden;
}

.contactpro-bg-text{
    position:absolute;
    right:-35px;
    top:38px;
    font-family:'Barlow Condensed', sans-serif;
    font-size:18vw;
    line-height:1;
    color:rgba(255,255,255,.025);
    letter-spacing:-8px;
    pointer-events:none;
    user-select:none;
}

.contactpro-wrap{
    position:relative;
    z-index:2;
    max-width:1320px;
    margin:0 auto;
}

.contactpro-intro{
    max-width:850px;
    margin-bottom:68px;
}

.contactpro-eyebrow{
    color:#e30613;
    font-size:11px;
    letter-spacing:5px;
    text-transform:uppercase;
    margin:0 0 18px;
    font-weight:600;
}

.contactpro-intro h2,
.contactpro-map-head h2{
    color:#fff;
    font-family:'Barlow Condensed', sans-serif;
    font-size:clamp(52px,6vw,96px);
    font-weight:300;
    line-height:.95;
    letter-spacing:.045em;
    text-transform:uppercase;
    margin:0 0 26px;
}

.contactpro-intro p{
    color:rgba(255,255,255,.52);
    font-size:18px;
    line-height:1.8;
    max-width:720px;
    margin:0;
}

.contactpro-main{
    display:grid;
    grid-template-columns:.88fr 1.12fr;
    gap:1px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 28px 80px rgba(0,0,0,.34);
}

.contactpro-left,
.contactpro-form-panel{
    background:#111;
}

.contactpro-left{
    padding:42px;
}

.contactpro-card{
    position:relative;
    background:linear-gradient(145deg,#171717,#0d0d0d);
    border:1px solid rgba(255,255,255,.08);
    padding:38px;
    overflow:hidden;
}

.contactpro-highlight:before{
    content:"";
    position:absolute;
    right:-70px;
    top:-70px;
    width:190px;
    height:190px;
    border-radius:50%;
    background:rgba(227,6,19,.18);
    filter:blur(4px);
}

.contactpro-icon{
    width:62px;
    height:62px;
    border-radius:50%;
    background:#e30613;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    margin-bottom:34px;
    position:relative;
    z-index:2;
}

.contactpro-card small,
.contactpro-mini-card small{
    color:#e30613;
    font-size:11px;
    letter-spacing:3px;
    text-transform:uppercase;
    display:block;
    margin-bottom:9px;
}

.contactpro-card h3{
    color:#fff;
    font-family:'Barlow Condensed';
    font-size:38px;
    font-weight:300;
    letter-spacing:.05em;
    text-transform:uppercase;
    margin:0 0 16px;
    position:relative;
    z-index:2;
}

.contactpro-card p{
    color:rgba(255,255,255,.48);
    line-height:1.8;
    margin:0;
    position:relative;
    z-index:2;
}

.contactpro-mini-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    margin-top:1px;
    background:rgba(255,255,255,.08);
}

.contactpro-mini-card{
    background:#0d0d0d;
    padding:30px 26px;
    text-decoration:none;
    min-height:150px;
    transition:.3s ease;
}

.contactpro-mini-card:hover{
    background:#151515;
    text-decoration:none;
}

.contactpro-mini-card span{
    color:#e30613;
    font-size:22px;
    margin-bottom:18px;
    display:block;
}

.contactpro-mini-card strong{
    display:block;
    color:#fff;
    font-family:'Barlow Condensed';
    font-size:21px;
    letter-spacing:.04em;
    font-weight:400;
    line-height:1.35;
}

.contactpro-form-panel{
    padding:48px;
}

.contactpro-form-head{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:42px;
}

.contactpro-form-head span{
    width:58px;
    height:58px;
    border-radius:50%;
    background:rgba(227,6,19,.12);
    color:#e30613;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    border:1px solid rgba(227,6,19,.35);
}

.contactpro-form-head h3{
    color:#fff;
    font-family:'Barlow Condensed';
    font-size:34px;
    font-weight:300;
    letter-spacing:.05em;
    text-transform:uppercase;
    margin:0 0 6px;
}

.contactpro-form-head p{
    color:rgba(255,255,255,.45);
    margin:0;
}

.contactpro-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.contactpro-field{
    margin-bottom:24px;
}

.contactpro-field label{
    display:block;
    color:#fff;
    font-family:'Barlow Condensed';
    font-size:14px;
    letter-spacing:.09em;
    text-transform:uppercase;
    margin-bottom:12px;
}

.contactpro-input{
    position:relative;
}

.contactpro-input i{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    color:rgba(255,255,255,.35);
    font-size:15px;
    z-index:2;
}

.contactpro-input.textarea i{
    top:22px;
    transform:none;
}

.contactpro-input input,
.contactpro-input textarea{
    width:100%;
    background:#080808;
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
    padding:18px 18px 18px 48px;
    outline:none;
    transition:.25s ease;
}

.contactpro-input textarea{
    min-height:165px;
    resize:vertical;
    padding-top:18px;
}

.contactpro-input input:focus,
.contactpro-input textarea:focus{
    border-color:#e30613;
    background:#050505;
}

.contactpro-input input::placeholder,
.contactpro-input textarea::placeholder{
    color:rgba(255,255,255,.28);
}

.contactpro-submit{
    border:0;
    background:#e30613;
    color:#fff;
    padding:17px 28px;
    display:inline-flex;
    align-items:center;
    gap:16px;
    font-family:'Barlow Condensed';
    font-size:17px;
    letter-spacing:.09em;
    text-transform:uppercase;
    transition:.28s ease;
}

.contactpro-submit:hover{
    background:#fff;
    color:#000;
    transform:translateY(-2px);
}

.contactpro-map-section{
    background:#000;
    padding:0 64px 120px;
}

.contactpro-map-head{
    max-width:1320px;
    margin:0 auto 34px;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
}

.contactpro-map-head h2{
    font-size:clamp(42px,4.8vw,76px);
    margin-bottom:0;
}

.contactpro-map-link{
    color:#fff;
    border:1px solid rgba(255,255,255,.16);
    padding:14px 20px;
    text-decoration:none;
    font-family:'Barlow Condensed';
    letter-spacing:.08em;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    gap:12px;
    transition:.25s ease;
}

.contactpro-map-link:hover{
    background:#e30613;
    color:#fff;
    border-color:#e30613;
    text-decoration:none;
}

.contactpro-map-card{
    max-width:1320px;
    height:520px;
    margin:0 auto;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    position:relative;
    box-shadow:0 24px 70px rgba(0,0,0,.35);
}

.contactpro-map-card:before{
    content:"";
    position:absolute;
    inset:0;
    border:1px solid rgba(227,6,19,.22);
    z-index:2;
    pointer-events:none;
}

.contactpro-map-card iframe{
    width:100%;
    height:100%;
    border:0;
    filter:grayscale(1) invert(.92) contrast(.9);
}

@media(max-width:1024px){
    .contactpro-section{
        padding:90px 36px 70px;
    }

    .contactpro-main{
        grid-template-columns:1fr;
    }

    .contactpro-map-section{
        padding:0 36px 90px;
    }
}

@media(max-width:768px){
    .contactpro-section{
        padding:74px 22px 58px;
    }

    .contactpro-bg-text{
        display:none;
    }

    .contactpro-intro{
        margin-bottom:44px;
    }

    .contactpro-intro h2{
        font-size:42px;
    }

    .contactpro-intro p{
        font-size:15px;
        line-height:1.75;
    }

    .contactpro-left,
    .contactpro-form-panel{
        padding:24px;
    }

    .contactpro-card{
        padding:30px 24px;
    }

    .contactpro-card h3{
        font-size:30px;
    }

    .contactpro-mini-grid,
    .contactpro-row{
        grid-template-columns:1fr;
    }

    .contactpro-mini-card{
        min-height:auto;
        padding:24px;
    }

    .contactpro-form-head{
        align-items:flex-start;
    }

    .contactpro-form-head h3{
        font-size:28px;
    }

    .contactpro-map-section{
        padding:0 22px 74px;
    }

    .contactpro-map-head{
        display:block;
    }

    .contactpro-map-link{
        margin-top:22px;
    }

    .contactpro-map-card{
        height:380px;
    }
}
.blogx-hero{
    height:72vh !important;
    min-height:620px !important;
}

.blogx-section{
    position:relative;
    z-index:5;
    background:#000;
    padding:110px 64px 130px;
    overflow:hidden;
}

.blogx-bg-word{
    position:absolute;
    right:-70px;
    top:35px;
    font-family:'Barlow Condensed', sans-serif;
    font-size:17vw;
    line-height:1;
    color:rgba(255,255,255,.025);
    letter-spacing:-8px;
    pointer-events:none;
    user-select:none;
}

.blogx-wrap{
    position:relative;
    z-index:2;
    max-width:1380px;
    margin:0 auto;
}

.blogx-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;
    margin-bottom:64px;
}

.blogx-eyebrow{
    color:#e30613;
    font-size:11px;
    letter-spacing:5px;
    text-transform:uppercase;
    margin:0 0 18px;
    font-weight:700;
}

.blogx-head h2{
    color:#fff;
    font-family:'Barlow Condensed', sans-serif;
    font-size:clamp(54px,6vw,104px);
    font-weight:300;
    line-height:.95;
    letter-spacing:.045em;
    text-transform:uppercase;
    margin:0;
}

.blogx-head-text{
    color:rgba(255,255,255,.52);
    font-size:17px;
    line-height:1.8;
    max-width:480px;
    padding-bottom:10px;
}

.blogx-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:32px;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
}

.blogx-card{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:46% 54%;
    min-height:390px;
    background:#111;
    border:1px solid rgba(255,255,255,.085);
    overflow:hidden;
    transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
    opacity:1 !important;
    visibility:visible !important;
}

.blogx-card:before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 92% 12%, rgba(227,6,19,.16), transparent 34%);
    opacity:0;
    transition:.35s ease;
    pointer-events:none;
}

.blogx-card:hover{
    transform:translateY(-8px);
    border-color:rgba(227,6,19,.45);
    box-shadow:0 30px 80px rgba(0,0,0,.48);
}

.blogx-card:hover:before{
    opacity:1;
}

.blogx-image{
    position:relative;
    display:block;
    min-height:390px;
    overflow:hidden;
    background:#090909;
    opacity:1 !important;
    visibility:visible !important;
}

.blogx-image img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s ease, filter .7s ease;
}

.blogx-card:hover .blogx-image img{
    transform:scale(1.08);
    filter:saturate(1.08) contrast(1.05);
}

.blogx-image-shade{
    position:absolute;
    inset:0;
    z-index:2;
    background:
        linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.76)),
        linear-gradient(90deg,rgba(0,0,0,.25),transparent);
}

.blogx-floating-date{
    position:absolute;
    left:22px;
    bottom:22px;
    z-index:3;
    color:#fff;
    background:rgba(0,0,0,.45);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(8px);
    padding:10px 13px;
    font-size:12px;
    letter-spacing:.06em;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.blogx-floating-date i{
    color:#e30613;
}

.blogx-image-arrow{
    position:absolute;
    right:22px;
    top:22px;
    z-index:4;
    width:46px;
    height:46px;
    border-radius:50%;
    background:#e30613;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:translateX(12px);
    opacity:0;
    transition:.35s ease;
}

.blogx-card:hover .blogx-image-arrow{
    transform:translateX(0);
    opacity:1;
}

.blogx-placeholder,
.blogx-no-image{
    width:100%;
    height:100%;
    min-height:390px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#090909;
    color:rgba(255,255,255,.25);
    font-size:46px;
}

.blogx-content{
    position:relative;
    z-index:2;
    background:#111;
    padding:42px 38px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
}

.blogx-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:20px;
}

.blogx-tags span{
    color:#e30613;
    background:rgba(227,6,19,.10);
    border:1px solid rgba(227,6,19,.25);
    padding:7px 11px;
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.blogx-content h3{
    margin:0 0 18px;
}

.blogx-content h3 a{
    color:#fff;
    font-family:'Barlow Condensed', sans-serif;
    font-size:clamp(30px,3vw,48px);
    line-height:1.08;
    font-weight:300;
    letter-spacing:.045em;
    text-transform:uppercase;
    text-decoration:none;
    transition:.25s ease;
}

.blogx-content h3 a:hover{
    color:#e30613;
}

.blogx-content p{
    color:rgba(255,255,255,.50);
    line-height:1.85;
    margin:0 0 30px;
    font-size:15px;
}

.blogx-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-top:auto;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.08);
}

.blogx-author{
    color:rgba(255,255,255,.42);
    font-size:12px;
    letter-spacing:.05em;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.blogx-author i{
    color:#e30613;
}

.blogx-btn{
    color:#fff;
    font-family:'Barlow Condensed', sans-serif;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-size:15px;
    display:inline-flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    transition:.25s ease;
    white-space:nowrap;
}

.blogx-btn:hover{
    color:#e30613;
    text-decoration:none;
}

@media(max-width:1280px){
    .blogx-grid{
        grid-template-columns:1fr;
    }

    .blogx-card{
        grid-template-columns:42% 58%;
    }
}

@media(max-width:900px){
    .blogx-section{
        padding:82px 28px 100px;
    }

    .blogx-head{
        display:block;
        margin-bottom:46px;
    }

    .blogx-head h2{
        font-size:48px;
    }

    .blogx-head-text{
        margin-top:20px;
        font-size:15px;
        padding-bottom:0;
    }

    .blogx-card{
        grid-template-columns:1fr;
        min-height:auto;
    }

    .blogx-image{
        min-height:280px;
    }

    .blogx-placeholder,
    .blogx-no-image{
        min-height:280px;
    }

    .blogx-content{
        padding:32px 26px;
    }

    .blogx-content h3 a{
        font-size:34px;
    }

    .blogx-bottom{
        display:block;
    }

    .blogx-btn{
        margin-top:18px;
    }
}

@media(max-width:520px){
    .blogx-hero{
        height:68vh !important;
        min-height:520px !important;
    }

    .blogx-section{
        padding:68px 18px 82px;
    }

    .blogx-bg-word{
        display:none;
    }

    .blogx-head h2{
        font-size:38px;
    }

    .blogx-head-text{
        line-height:1.7;
    }

    .blogx-card{
        border-color:rgba(255,255,255,.10);
    }

    .blogx-image{
        min-height:230px;
    }

    .blogx-floating-date{
        left:16px;
        bottom:16px;
        font-size:11px;
        padding:9px 11px;
    }

    .blogx-image-arrow{
        display:none;
    }

    .blogx-content{
        padding:28px 20px;
    }

    .blogx-tags span{
        font-size:10px;
        padding:6px 9px;
    }

    .blogx-content h3 a{
        font-size:29px;
        line-height:1.12;
    }

    .blogx-content p{
        font-size:14px;
        line-height:1.75;
    }
}


.bdx-hero{
    position:relative;
    height:82vh;
    min-height:680px;
    background:#000;
    overflow:hidden;
}

.bdx-hero-media,
.bdx-hero-media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.bdx-hero-media img{
    object-fit:cover;
    transform:scale(1.045);
    filter:saturate(1.08) contrast(1.08);
}

.bdx-hero-overlay{
    position:absolute;
    inset:0;
    z-index:2;
    background:
        linear-gradient(90deg,rgba(0,0,0,.90) 0%,rgba(0,0,0,.50) 44%,rgba(0,0,0,.22) 100%),
        linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.38) 48%,rgba(0,0,0,.94) 100%);
}

.bdx-hero-content{
    position:absolute;
    z-index:3;
    left:64px;
    bottom:105px;
    max-width:1060px;
}

.bdx-line{
    width:78px;
    height:1px;
    background:#e30613;
    margin-bottom:30px;
}

.bdx-tags{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-bottom:24px;
}

.bdx-tags span{
    color:#e30613;
    border:1px solid rgba(227,6,19,.36);
    background:rgba(227,6,19,.09);
    padding:8px 12px;
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.bdx-hero h1{
    color:#fff;
    font-family:'Barlow Condensed', sans-serif;
    font-size:clamp(62px,8.2vw,148px);
    font-weight:300;
    line-height:.9;
    letter-spacing:.045em;
    text-transform:uppercase;
    margin:0 0 30px;
    text-shadow:0 25px 70px rgba(0,0,0,.55);
}

.bdx-meta{
    display:flex;
    flex-wrap:wrap;
    gap:22px;
    color:rgba(255,255,255,.68);
    font-size:14px;
}

.bdx-meta span{
    display:inline-flex;
    align-items:center;
    gap:9px;
}

.bdx-meta i{
    color:#e30613;
}

.bdx-section{
    position:relative;
    background:#000;
    padding:110px 64px 130px;
    overflow:hidden;
}

.bdx-bg-word{
    position:absolute;
    right:-60px;
    top:40px;
    font-family:'Barlow Condensed', sans-serif;
    font-size:16vw;
    color:rgba(255,255,255,.022);
    line-height:1;
    pointer-events:none;
}

.bdx-container{
    position:relative;
    z-index:2;
    max-width:1420px;
    margin:0 auto;
}

.bdx-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 400px;
    gap:46px;
    align-items:start;
}

.bdx-article{
    background:#101010;
    border:1px solid rgba(255,255,255,.085);
    padding:58px 64px 70px;
    box-shadow:0 28px 90px rgba(0,0,0,.35);
}

.bdx-article-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding-bottom:28px;
    margin-bottom:42px;
    border-bottom:1px solid rgba(255,255,255,.09);
}

.bdx-article-head span{
    color:#e30613;
    font-size:11px;
    letter-spacing:5px;
    text-transform:uppercase;
    font-weight:700;
}

.bdx-article-head a{
    color:#fff;
    text-decoration:none;
    font-family:'Barlow Condensed';
    letter-spacing:.1em;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    gap:12px;
}

.bdx-content{
    color:rgba(255,255,255,.66);
    font-size:18px;
    line-height:1.95;
    word-break:break-word;
}

.bdx-content p{
    margin:0 0 28px !important;
}

.bdx-content h1,
.bdx-content h2,
.bdx-content h3,
.bdx-content h4,
.bdx-content h5,
.bdx-content h6{
    color:#fff;
    font-family:'Barlow Condensed', sans-serif;
    font-weight:300;
    letter-spacing:.045em;
    text-transform:uppercase;
    margin:54px 0 24px !important;
    line-height:1.1;
}

.bdx-content h2{font-size:48px;}
.bdx-content h3{font-size:38px;}

.bdx-content a{
    color:#e30613;
}

.bdx-content ul,
.bdx-content ol{
    margin:0 0 30px;
    padding-left:30px;
}

.bdx-content li{
    margin-bottom:11px;
}

.bdx-gap{
    height:38px;
    clear:both;
}

.bdx-flow-image{
    position:relative;
    margin:34px 0 36px;
    overflow:hidden;
    background:#080808;
    border:1px solid rgba(255,255,255,.09);
}

.bdx-flow-image img{
    width:100%;
    height:auto;
    display:block;
    margin:0;
    transition:.55s ease;
}

.bdx-flow-image:hover img{
    transform:scale(1.045);
}

.bdx-flow-image figcaption{
    position:absolute;
    left:18px;
    bottom:18px;
    z-index:2;
    color:#fff;
    background:rgba(0,0,0,.58);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(8px);
    padding:10px 14px;
    font-size:12px;
    letter-spacing:.04em;
}

.bdx-flow-image figcaption span{
    color:#e30613;
    margin-right:8px;
}

.bdx-flow-image.wide{
    width:100%;
    clear:both;
}

.bdx-flow-image.wide img{
    max-height:520px;
    object-fit:cover;
}

.bdx-flow-image.float-left{
    float:left;
    margin-right:34px;
    clear:left;
}

.bdx-flow-image.float-right{
    float:right;
    margin-left:34px;
    clear:right;
}

.bdx-flow-image.small{
    width:38%;
    max-width:360px;
}

.bdx-flow-image.medium{
    width:48%;
    max-width:480px;
}

.bdx-clear{
    clear:both;
}

.bdx-sidebar{
    position:relative;
}

.bdx-sticky{
    position:sticky;
    top:110px;
}

.bdx-side-card{
    background:#101010;
    border:1px solid rgba(255,255,255,.085);
    padding:30px;
    margin-bottom:22px;
    box-shadow:0 18px 55px rgba(0,0,0,.22);
}

.bdx-side-card h4{
    color:#fff;
    font-family:'Barlow Condensed';
    font-size:30px;
    font-weight:300;
    letter-spacing:.06em;
    text-transform:uppercase;
    margin:0 0 22px;
}

.bdx-sticky-title small,
.bdx-cta small{
    color:#e30613;
    font-size:11px;
    letter-spacing:4px;
    text-transform:uppercase;
}

.bdx-sticky-title h3,
.bdx-cta h3{
    color:#fff;
    font-family:'Barlow Condensed';
    font-size:28px;
    font-weight:300;
    line-height:1.08;
    text-transform:none;
    letter-spacing:.045em;
    margin:14px 0 16px;
}

.bdx-sticky-title p{
    color:rgba(255,255,255,.55);
    margin:0;
}

.bdx-cta{
    background:linear-gradient(145deg,#171717,#0b0b0b);
    position:relative;
    overflow:hidden;
}

.bdx-cta:before{
    content:"";
    position:absolute;
    right:-75px;
    top:-75px;
    width:195px;
    height:195px;
    background:rgba(227,6,19,.18);
    border-radius:50%;
}

.bdx-cta-icon{
    width:58px;
    height:58px;
    background:#e30613;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:24px;
    position:relative;
    z-index:2;
}

.bdx-cta p{
    color:rgba(255,255,255,.55);
    line-height:1.75;
    margin-bottom:24px;
    position:relative;
    z-index:2;
}

.bdx-cta-btn,
.bdx-modal-form button{
    border:0;
    background:#e30613;
    color:#fff;
    padding:16px 22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    text-decoration:none;
    font-family:'Barlow Condensed';
    text-transform:uppercase;
    letter-spacing:.1em;
    transition:.25s ease;
    width:100%;
}

.bdx-cta-btn:hover,
.bdx-modal-form button:hover{
    background:#fff;
    color:#000;
}

.bdx-list{
    list-style:none;
    padding:0;
    margin:0;
}

.bdx-list li{
    border-bottom:1px solid rgba(255,255,255,.08);
}

.bdx-list li:last-child{
    border-bottom:0;
}

.bdx-list a{
    color:rgba(255,255,255,.68);
    text-decoration:none;
    padding:15px 0;
    display:flex;
    justify-content:space-between;
    gap:15px;
}

.bdx-list a:hover{
    color:#e30613;
}

.bdx-other{
    display:flex;
    gap:14px;
    text-decoration:none;
    padding:16px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.bdx-other:first-child{
    padding-top:0;
}

.bdx-other:last-child{
    border-bottom:0;
    padding-bottom:0;
}

.bdx-other-img{
    width:88px;
    height:72px;
    min-width:88px;
    overflow:hidden;
    background:#080808;
}

.bdx-other-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.35s ease;
}

.bdx-other:hover .bdx-other-img img{
    transform:scale(1.08);
}

.bdx-other-content small{
    color:#e30613;
    font-size:11px;
    display:block;
    margin-bottom:6px;
}

.bdx-other-content strong{
    color:#fff;
    font-size:14px;
    line-height:1.45;
    display:block;
}

.bdx-other:hover strong{
    color:#e30613;
}

.bdx-modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.78);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:99999;
    padding:20px;
}

.bdx-modal{
    width:100%;
    max-width:760px;
    background:#111;
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
    box-shadow:0 30px 100px rgba(0,0,0,.55);
}

.bdx-modal-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:24px 28px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.bdx-modal-head h3{
    margin:0;
    font-family:'Barlow Condensed';
    font-size:34px;
    font-weight:300;
    text-transform:uppercase;
}

.bdx-modal-head button{
    background:transparent;
    border:0;
    color:#fff;
    font-size:24px;
}

.bdx-modal-form{
    padding:28px;
}

.bdx-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.bdx-form-grid .full{
    grid-column:1/-1;
}

.bdx-form-grid label{
    display:block;
    color:#fff;
    font-family:'Barlow Condensed';
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:9px;
}

.bdx-form-grid input,
.bdx-form-grid textarea{
    width:100%;
    background:#080808;
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
    padding:15px 16px;
    outline:none;
}

.bdx-form-grid input:focus,
.bdx-form-grid textarea:focus{
    border-color:#e30613;
}

@media(max-width:1180px){
    .bdx-layout{
        grid-template-columns:1fr;
    }

    .bdx-sticky{
        position:relative;
        top:0;
    }
}

@media(max-width:768px){
    .bdx-hero{
        height:70vh;
        min-height:540px;
    }

    .bdx-hero-content{
        left:24px;
        right:24px;
        bottom:70px;
    }

    .bdx-hero h1{
        font-size:50px;
        line-height:.98;
    }

    .bdx-section{
        padding:72px 22px 92px;
    }

    .bdx-bg-word{
        display:none;
    }

    .bdx-article{
        padding:30px 22px;
    }

    .bdx-article-head{
        display:block;
    }

    .bdx-article-head a{
        margin-top:16px;
    }

    .bdx-content{
        font-size:16px;
        line-height:1.82;
    }

    .bdx-content h2{
        font-size:34px;
    }

    .bdx-content h3{
        font-size:28px;
    }

    .bdx-flow-image,
    .bdx-flow-image.float-left,
    .bdx-flow-image.float-right,
    .bdx-flow-image.small,
    .bdx-flow-image.medium{
        float:none;
        width:100%;
        max-width:100%;
        margin:30px 0;
    }

    .bdx-flow-image.wide img{
        max-height:none;
    }

    .bdx-side-card{
        padding:24px;
    }

    .bdx-form-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:480px){
    .bdx-hero h1{
        font-size:42px;
    }

    .bdx-tags span{
        font-size:10px;
        padding:7px 10px;
    }

    .bdx-meta{
        font-size:13px;
        gap:14px;
    }

    .bdx-section{
        padding-left:18px;
        padding-right:18px;
    }

    .bdx-article{
        padding:26px 18px;
    }
}
.bdx-section{
    overflow:visible !important;
}
.bdx-section,
.bdx-container,
.bdx-layout,
.bdx-sidebar{
    overflow:visible !important;
}

.bdx-sidebar{
    position:relative;
    align-self:start;
}

.bdx-sticky-top,
.bdx-sticky,
.bdx-sticky.is-fixed,
.bdx-sticky.is-bottom{
    position:static !important;
    top:auto !important;
    bottom:auto !important;
    width:auto !important;
    left:auto !important;
}

.bdx-sticky-offer{
    position:sticky;
    top:120px;
    z-index:40;
    margin-top:22px;
}

.bdx-sticky-offer .bdx-side-card{
    margin-bottom:14px;
}

.bdx-all-blog-btn{
    width:100%;
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:0 22px;
    background:#fff;
    color:#000;
    border:1px solid rgba(255,255,255,.16);
    font-family:'Barlow Condensed', sans-serif;
    font-size:16px;
    letter-spacing:.1em;
    text-transform:uppercase;
    text-decoration:none;
    position:relative;
    overflow:hidden;
    transition:.28s ease;
}

.bdx-all-blog-btn:before{
    content:"";
    position:absolute;
    inset:0;
    background:#e30613;
    transform:translateX(-100%);
    transition:.32s ease;
    z-index:0;
}

.bdx-all-blog-btn span,
.bdx-all-blog-btn i{
    position:relative;
    z-index:2;
}

.bdx-all-blog-btn:hover{
    color:#fff;
    border-color:#e30613;
    text-decoration:none;
}

.bdx-all-blog-btn:hover:before{
    transform:translateX(0);
}

@media(max-width:1180px){
    .bdx-sticky-offer{
        position:relative;
        top:auto;
        margin-top:22px;
    }
}


.bdx-sticky,
.bdx-sticky-top,
.bdx-sticky-offer,
.bdx-sticky.is-fixed,
.bdx-sticky.is-bottom{
    position:static !important;
    top:auto !important;
    bottom:auto !important;
    left:auto !important;
    width:auto !important;
}

.bdx-sidebar{
    position:relative;
    align-self:start;
}

.bdx-all-blog-btn{
    width:100%;
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:0 22px;
    background:#fff;
    color:#000;
    border:1px solid rgba(255,255,255,.16);
    font-family:'Barlow Condensed', sans-serif;
    font-size:16px;
    letter-spacing:.1em;
    text-transform:uppercase;
    text-decoration:none;
    position:relative;
    overflow:hidden;
    transition:.28s ease;
}

.bdx-all-blog-btn:before{
    content:"";
    position:absolute;
    inset:0;
    background:#e30613;
    transform:translateX(-100%);
    transition:.32s ease;
    z-index:0;
}

.bdx-all-blog-btn span,
.bdx-all-blog-btn i{
    position:relative;
    z-index:2;
}

.bdx-all-blog-btn:hover{
    color:#fff;
    border-color:#e30613;
    text-decoration:none;
}

.bdx-all-blog-btn:hover:before{
    transform:translateX(0);
}
.bdx-sticky,
.bdx-sticky-top,
.bdx-sticky-offer,
.bdx-sticky.is-fixed,
.bdx-sticky.is-bottom,
.bdx-sticky-offer.is-fixed,
.bdx-sticky-offer.is-bottom{
    position:static !important;
    top:auto !important;
    bottom:auto !important;
    left:auto !important;
    width:auto !important;
}

.bdx-sidebar{
    position:relative !important;
    align-self:start;
}

.bdx-all-blog-btn{
    width:100%;
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:0 22px;
    background:#fff;
    color:#000;
    font-family:'Barlow Condensed', sans-serif;
    font-size:16px;
    letter-spacing:.1em;
    text-transform:uppercase;
    text-decoration:none;
    position:relative;
    overflow:hidden;
    transition:.28s ease;
}

.bdx-all-blog-btn:before{
    content:"";
    position:absolute;
    inset:0;
    background:#e30613;
    transform:translateX(-100%);
    transition:.32s ease;
    z-index:0;
}

.bdx-all-blog-btn span,
.bdx-all-blog-btn i{
    position:relative;
    z-index:2;
}

.bdx-all-blog-btn:hover{
    color:#fff;
}

.bdx-all-blog-btn:hover:before{
    transform:translateX(0);
}
.bdx-section,
.bdx-container,
.bdx-layout,
.bdx-sidebar{
    overflow:visible !important;
}

.bdx-sidebar{
    position:relative !important;
    align-self:start;
}

.bdx-sticky-offer{
    position:relative;
    z-index:50;
}

.bdx-sticky-offer.offer-fixed{
    position:fixed;
    top:110px;
    z-index:999;
}

.bdx-sticky-offer.offer-bottom{
    position:absolute;
    bottom:0;
    top:auto;
    z-index:50;
}

@media(max-width:1180px){
    .bdx-sticky-offer,
    .bdx-sticky-offer.offer-fixed,
    .bdx-sticky-offer.offer-bottom{
        position:relative !important;
        top:auto !important;
        bottom:auto !important;
        left:auto !important;
        width:100% !important;
    }
}

.f-post__img-wrap {
    aspect-ratio: 1 / 1;
    height: auto !important;
    max-height: none !important;
    overflow: hidden;
}

.f-post__img-wrap .f-post__img,
.f-post__img-wrap video.f-post__img,
.f-post__img-wrap img.f-post__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* mobilde de kare kalsın */
@media (max-width: 767px) {
    .f-post__img-wrap {
        aspect-ratio: 1 / 1;
    }
}


.f-category-intro {
    background:
        radial-gradient(circle at 78% 38%, rgba(255,255,255,.055), transparent 30%),
        linear-gradient(180deg, #050505 0%, #030303 100%);
    color: #fff;
    padding: 105px 6vw 115px;
    position: relative;
}

.f-category-intro::before {
    content: "";
    position: absolute;
    inset: 42px 6vw;
    border: 1px solid rgba(255,255,255,.055);
    pointer-events: none;
}

.f-category-intro {
    padding-bottom: 105px;
}

/* Kapalı metni biraz daha kısa göster */
.f-category-intro__text {
    max-height: 118px;
}

/* Fade alanını da daha kontrollü yap */
.f-category-intro__text:not(.is-open)::after {
    height: 54px;
}

/* PDF butonu daha belirgin */
.f-category-intro__pdf {
    position: relative;
    overflow: hidden;
    border-color: rgba(255,255,255,.42);
    background: rgba(255,255,255,.045);
    box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset;
}

.f-category-intro__pdf::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-120%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.16),
        transparent
    );
    transition: transform .55s ease;
}

.f-category-intro__pdf:hover::before {
    transform: translateX(120%);
}

.f-category-intro__pdf span,
.f-category-intro__pdf svg {
    position: relative;
    z-index: 2;
}

.f-category-intro__inner {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 520px);
    gap: 82px;
    align-items: start;
    position: relative;
    z-index: 2;
}

.f-category-intro--text-only .f-category-intro__inner {
    grid-template-columns: 1fr;
}

.f-category-intro__content {
    max-width: 850px;
    padding: 28px 0;
}

.f-category-intro__eyebrow {
    color: #b00020;
    font-size: 11px;
    letter-spacing: .30em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.f-category-intro__title {
    color: #fff;
    font-size: clamp(40px, 5vw, 76px);
    line-height: 1.02;
    font-weight: 300;
    margin: 0 0 34px;
}

.f-category-intro__text {
    color: rgba(255,255,255,.72);
    font-size: 15.5px;
    line-height: 1.95;
    max-height: 170px;
    overflow: hidden;
    position: relative;
    transition: max-height .45s ease;
}

.f-category-intro__text:not(.is-open)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 74px;
    background: linear-gradient(to bottom, rgba(5,5,5,0), #050505);
}

.f-category-intro__text.is-open {
    max-height: 6000px;
}

.f-category-intro__text.is-open::after {
    display: none;
}

.f-category-intro__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 34px;
}

.f-category-intro__more,
.f-category-intro__pdf {
    min-width: 180px;
    height: 52px;
    padding: 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border: 1px solid rgba(255,255,255,.26);
    background: rgba(255,255,255,.015);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: .25s ease;
}

.f-category-intro__more:hover,
.f-category-intro__pdf:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
    transform: translateY(-2px);
}

.f-category-intro__more-icon {
    transition: transform .25s ease;
}

.f-category-intro__more.is-open .f-category-intro__more-icon {
    transform: rotate(180deg);
}

.f-category-intro__media {
    position: sticky;
    top: 120px;
    overflow: hidden;
    aspect-ratio: 24 / 21;
    background: #111;
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 24px 70px rgba(0,0,0,.42);
}

.f-category-intro__media::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(255,255,255,.08);
    z-index: 2;
    pointer-events: none;
}

.f-category-intro__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease, filter .5s ease;
}

.f-category-intro__media:hover video {
    transform: scale(1.035);
    filter: brightness(1.08);
}

.f-subcategory-section {
    background: linear-gradient(180deg, #030303 0%, #000 90px, #000 100%);
    padding: 96px 0 105px;
}

@media (max-width: 991px) {
    .f-category-intro__inner {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .f-category-intro__media {
        position: relative;
        top: auto;
        order: -1;
    }
}

@media (max-width: 767px) {
    .f-category-intro {
        padding: 62px 24px 72px;
    }

    .f-category-intro::before {
        inset: 24px;
    }

    .f-category-intro::after {
        left: 24px;
        right: 24px;
    }

    .f-category-intro__actions {
        flex-direction: column;
    }

    .f-category-intro__more,
    .f-category-intro__pdf {
        width: 100%;
    }
}
.f-category-intro--full .f-category-intro__inner {
    display: block;
}

.f-category-intro--full .f-category-intro__content {
    max-width: 1000px;
}

.f-category-intro--full .f-category-intro__title {
    max-width: 100%;
}

.f-category-intro--full .f-category-intro__text {
    max-width: 100%;
}

.f-category-intro--full .f-category-intro__actions {
    margin-top: 35px;
}




.f-nav__link {
    position: relative;
}

.f-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width .28s ease;
}

.f-nav__link:hover::after,
.f-nav__link.is-active::after {
    width: 100%;
}

.f-overlay__item {
    display: flex;
    align-items: center;
    gap: 18px;
}

.f-overlay__item-arrow {
    font-size:28px;
    opacity: .45;
    transform: translateY(-2px);
}

.f-overlay__item.is-active,
.f-overlay__item.active {
    color: #fff;
}

.f-overlay__sub-link.is-active,
.f-overlay__sub-link.active {
    color: #fff;
}

.f-footer__top {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 45px;
}

.is-hidden-footer-link {
    display: none;
}

.f-footer__more {
    margin-top: 14px;
    background: transparent;
    border: 0;
    color: rgba(255,255,255,.65);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
}

.f-footer__more:hover {
    color: #fff;
}

@media (max-width: 991px) {
    .f-footer__top {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .f-footer__top {
        grid-template-columns: 1fr;
    }
}