/* ============================================================
   INDEX.CSS
============================================================ */

/* ============================================================
   COOKIE CONSENT BANNER
============================================================ */
.cookie-banner {
  position:        fixed;
  bottom:          1.5rem;
  left:            50%;
  transform:       translateX(-50%) translateY(120%);
  width:           min(960px, calc(100vw - 2rem));
  background:      #0d1e3d;
  border:          1px solid rgba(200,162,74,0.25);
  border-radius:   12px;
  display:         flex;
  align-items:     center;
  gap:             2rem;
  padding:         1.375rem 1.75rem;
  z-index:         9999;
  opacity:         0;
  transition:      transform 0.38s cubic-bezier(.4,0,.2,1), opacity 0.38s ease;
  box-shadow:      0 8px 40px rgba(0,0,0,0.35);
}
.cookie-banner.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity:   1;
}

.cookie-banner__left {
  flex: 1;
  min-width: 0;
}
.cookie-banner__title {
  font-family:  var(--ff-head);
  font-size:    0.9375rem;
  font-weight:  700;
  color:        #f5f1e8;
  margin-bottom: 0.35rem;
}
.cookie-banner__desc {
  font-family: var(--ff-body, 'DM Sans', sans-serif);
  font-size:   0.8125rem;
  color:       rgba(245,241,232,0.65);
  line-height: 1.55;
  margin-bottom: 0.75rem;
}
.cookie-banner__checks {
  display: flex;
  gap:     1.5rem;
}
.cookie-check {
  display:     flex;
  align-items: center;
  gap:         0.45rem;
  cursor:      pointer;
}
.cookie-check input {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}
.cookie-check__box {
  width:        16px;
  height:       16px;
  border:       1.5px solid rgba(200,162,74,0.55);
  border-radius: 3px;
  background:   transparent;
  flex-shrink:  0;
  display:      flex;
  align-items:  center;
  justify-content: center;
  transition:   background 0.2s, border-color 0.2s;
}
.cookie-check input:checked + .cookie-check__box {
  background:   #C8A24A;
  border-color: #C8A24A;
}
.cookie-check input:checked + .cookie-check__box::after {
  content:    '';
  display:    block;
  width:      5px;
  height:     9px;
  border:     2px solid #0d1e3d;
  border-top: none;
  border-left: none;
  transform:  rotate(45deg) translateY(-1px);
}
.cookie-check__label {
  font-family: var(--ff-body, 'DM Sans', sans-serif);
  font-size:   0.8125rem;
  color:       rgba(245,241,232,0.8);
}
.cookie-check input:disabled ~ .cookie-check__label {
  opacity: 0.5;
}

.cookie-banner__actions {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
  align-items:    stretch;
  min-width:      160px;
}
.cookie-btn {
  font-family:    var(--ff-head);
  font-size:      0.8125rem;
  font-weight:    600;
  letter-spacing: 0.03em;
  border:         none;
  border-radius:  6px;
  padding:        0.55rem 1.1rem;
  cursor:         pointer;
  transition:     opacity 0.2s, transform 0.15s;
  text-align:     center;
}
.cookie-btn:hover  { opacity: 0.88; transform: translateY(-1px); }
.cookie-btn:active { transform: translateY(0); }

.cookie-btn--accept {
  background: #C8A24A;
  color:      #0d1e3d;
}
.cookie-btn--save {
  background: rgba(200,162,74,0.15);
  color:      #C8A24A;
  border:     1px solid rgba(200,162,74,0.4);
}
.cookie-btn--refuse {
  background: transparent;
  color:      rgba(245,241,232,0.5);
  border:     1px solid rgba(245,241,232,0.15);
}
.cookie-banner__link {
  font-family: var(--ff-body, 'DM Sans', sans-serif);
  font-size:   0.75rem;
  color:       rgba(200,162,74,0.6);
  text-align:  center;
  text-decoration: underline;
}
.cookie-banner__link:hover { color: #C8A24A; }

@media (max-width: 640px) {
  .cookie-banner {
    flex-direction: column;
    align-items:    stretch;
    padding:        1.25rem;
  }
  .cookie-banner__actions { min-width: 0; }
}


.geo-strip {
  width:        100%;
  overflow:     hidden;
  background:   transparent;
  padding-block: 4rem;
}

.geo-strip__inner {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap:                   clamp(1.5rem, 4vw, 4rem);
  align-items:           center;
}

.geo-strip__text {
  position: relative;
  padding-block: 1rem;
}

.geo-strip__eyebrow {
  display:         inline-flex;
  align-items:     center;
  gap:             0.75rem;
  font-family:     'Montserrat', sans-serif;
  font-size:       0.72rem;
  font-weight:     600;
  letter-spacing:  0.28em;
  text-transform:  uppercase;
  color:           #C8A24A;
  margin:          0 0 1.25rem;
}

.geo-strip__eyebrow::before {
  content:        '';
  display:        inline-block;
  width:          36px;
  height:         1px;
  background:     #C8A24A;
}

.geo-strip__title {
  font-family:    'Playfair Display', serif;
  font-weight:    400;
  font-size:      clamp(1.75rem, 2.8vw, 2.85rem);
  line-height:    1.15;
  color:          #0d1e3d;
  margin:         0 0 1.5rem;
  letter-spacing: -0.005em;
}

.geo-strip__title em {
  font-style: italic;
  color:      #C8A24A;
}

.geo-strip__lede {
  font-family:  'DM Sans', sans-serif;
  font-size:    1.02rem;
  line-height:  1.65;
  color:        rgba(13, 30, 61, 0.78);
  margin:       0 0 1.75rem;
  max-width:    44ch;
}

.geo-strip__tagline {
  font-family:  'Playfair Display', serif;
  font-style:   italic;
  font-size:    1.05rem;
  line-height:  1.5;
  color:        rgba(13, 30, 61, 0.7);
  margin:       0;
  max-width:    34ch;
  position:     relative;
  padding-left: 1rem;
  border-left:  2px solid #C8A24A;
}

.geo-strip__meta {
  display:        flex;
  flex-wrap:      wrap;
  gap:            1.75rem 2.25rem;
  padding-top:    1.25rem;
  border-top:     1px solid rgba(13, 30, 61, 0.12);
}

.geo-strip__meta-item {
  display:        flex;
  flex-direction: column;
  gap:            0.35rem;
}

.geo-strip__meta-label {
  font-family:    'Montserrat', sans-serif;
  font-size:      0.68rem;
  font-weight:    600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          rgba(13, 30, 61, 0.55);
}

.geo-strip__meta-value {
  font-family: 'Playfair Display', serif;
  font-style:  italic;
  font-size:   1.25rem;
  color:       #0d1e3d;
}

.geo-strip__map {
  position: relative;
  width:    100%;
  /* soft fade on the edges so the map blends into the page */
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    black 60%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse at center,
    black 60%,
    transparent 100%
  );
}

.geo-strip__svg {
  display: block;
  width:   100%;
  height:  clamp(320px, 36vw, 560px);
}

@media (max-width: 860px) {
  .geo-strip__inner {
    grid-template-columns: 1fr;
    gap:                   2rem;
  }
  .geo-strip__svg {
    height: clamp(280px, 70vw, 420px);
  }
}

/* ============================================================
   GRADIENT BAR
============================================================ */
:root {
  --header-total-h: calc(var(--navbar-height) + var(--gradient-bar-h));
}

.gradient-bar {
  height:          var(--gradient-bar-h);
  background:      var(--gradient-bar);
  background-size: 200% 100%;
  width:           100%;
  animation:       gradient-sweep 7s ease-in-out infinite;
}

@keyframes gradient-sweep {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================================
   SECTION TITLE — full-width line to last letter
============================================================ */
.section-title {
  position:     relative;
  border-bottom: none;
  font-weight:  var(--fw-semibold);
}

.section-title::after {
  content:    '';
  position:   absolute;
  left:       -200vw;
  right:       0;
  bottom:      0;
  height:     2px;
  background: #C8A24A;
}

/* ============================================================
   BRAND STAT CARD (replaces metric card)
============================================================ */
.card__media--brand {
  width:           100%;
  height:          100%;
  background:      linear-gradient(145deg, #0d1e3d 0%, #1a3560 100%);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         2rem;
}

.card__brand-stat {
  display:        flex;
  flex-direction: column;
  gap:            0.65rem;
}

.card__brand-label {
  font-size:      0.82rem;
  font-weight:    var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          #C8A24A;
  padding:        0.45rem 0.9rem;
  border:         1px solid rgba(200,162,74,0.3);
  display:        inline-block;
  align-self:     flex-start;
}

.card__brand-tagline {
  font-family: "Playfair Display", serif;
  font-style:  italic;
  font-size:   clamp(1.1rem, 2vw, 1.4rem);
  color:       #E6D3A3;
  line-height: 1.4;
  margin-top:  0.75rem;
}


.anim-ready [data-animate] {
  opacity:          0;
  transform:        translate3d(0, var(--anim-translate, 18px), 0);
  transition:       opacity 0.7s ease, transform 0.7s ease;
  transition-delay: var(--anim-delay, 0s);
  will-change:      opacity, transform;
}

.anim-ready [data-animate].is-visible {
  opacity:   1;
  transform: translate3d(0, 0, 0);
}

.anim-ready [data-animate="fade-down"] {
  transform: translate3d(0, -18px, 0);
}

.anim-ready [data-animate="fade-left"] {
  transform: translate3d(-18px, 0, 0);
}

.anim-ready [data-animate="fade-right"] {
  transform: translate3d(18px, 0, 0);
}

@keyframes hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .anim-ready [data-animate] {
    opacity:        1 !important;
    transform:      none !important;
    transition:     none !important;
    animation:      none !important;
  }

  .hero__video {
    animation: none !important;
  }
}

/* ============================================================
   NAVBAR
============================================================ */
.site-header {
  position: fixed;
  top:      0;
  left:     0;
  right:    0;
  z-index:  1000;
}

.navbar {
  height:           var(--navbar-height);
  position:         relative;
  background:       rgb(13 30 61);
  backdrop-filter:  blur(10px);
  transition:       transform 0.35s ease;
}

.site-header.nav-hidden .navbar {
  transform: translateY(-100%);
}

/* ============================================================
   STICKY STRIP — slim bar that morphs in when main nav hides
============================================================ */
.sticky-strip {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  height:          36px;
  background:      #C8A24A;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-inline:  var(--container-px);
  transform:       translateY(-100%);
  transition:      transform 0.35s ease;
  z-index:         1000;
}

/* Slide in when the main nav scrolls off-screen */
.site-header.nav-hidden + .sticky-strip {
  transform: translateY(0);
}

.sticky-strip__logo {
  width:      18px;
  height:     18px;
  object-fit: contain;
  display:    block;
}

.sticky-strip__left {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
}

.sticky-strip__name {
  font-family:    var(--font);
  font-size:      0.72rem;
  font-weight:    var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          #ffffff;
}

.sticky-strip__langs {
  display:     flex;
  align-items: center;
  gap:         0.15rem;
}

.sticky-strip__lang {
  font-size:      0.78rem;
  font-weight:    var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.55);
  padding:        0.25rem 0.55rem;
  background:     transparent;
  border:         none;
  cursor:         pointer;
  transition:     color 0.2s ease, background 0.2s ease;
  border-radius:  3px;
  line-height:    1;
}

.sticky-strip__lang.is-active {
  color:       #fff;
  background:  rgba(0, 0, 0, 0.18);
}

.sticky-strip__lang:hover {
  color: #fff;
}

.navbar__inner {
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--sp-md);
}

.navbar__logo        { flex-shrink: 0; display: flex; align-items: center; gap: 0.55rem; }

.navbar__logo-name {
  font-family:     "DM Sans", sans-serif;
  font-size:       1rem;
  font-weight:     500;
  letter-spacing:  0.14em;
  text-transform:  none;
  color:           #E6D3A3;
  white-space:     nowrap;
  user-select:     none;
  text-decoration: none;
  padding-left: 1rem;
}

.navbar__logo-img {
  width:      auto;
  height:     50px;
  object-fit: contain;
}

.navbar__menu {
  display:     flex;
  align-items: center;
  gap:         2rem;
  margin-left: auto;
}

.navbar__link {
  --primary-color: rgba(255, 255, 255, 0.72);
  --hovered-color: #ffffff;
  font-size:       0.78rem;
  font-weight:     var(--fw-medium);
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  color:           var(--primary-color);
  position:        relative;
  display:         inline-flex;
  align-items:     center;
}

.navbar__link::after {
  position:   absolute;
  content:    "";
  width:      0;
  left:       0;
  bottom:     -7px;
  background: var(--hovered-color);
  height:     2px;
  transition: 0.3s ease-out;
}

.navbar__link span {
  position: relative;
}

.navbar__link span::before {
  position:    absolute;
  content:     attr(data-text);
  width:       0%;
  inset:       0;
  color:       var(--hovered-color);
  overflow:    hidden;
  transition:  0.3s ease-out;
  white-space: nowrap;
}

.navbar__link:hover::after {
  width: 100%;
}

.navbar__link:hover span::before {
  width: 100%;
}

/* Premium Contact Button – Beveled Corners + Bubble Fill
 * Border is painted as background gradients (8 layers: 4 straight edges +
 * 4 diagonal corner stripes) so it follows the clip-path bevel exactly.
 * --bevel: px size of each corner cut
 * --bw:    visual border width in px
 * stripe gradient stop = bevel - (bw × √2), bevel
 */
.navbar__contact-link {
    --bevel: 8px;
    --bw: 2px;
    --bc: rgba(255, 255, 255, 0.72);

    font-family: "Playfair Display", serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    color: var(--c-white);
    padding: 6px 20px;

    /* 8-layer gradient border:
       layers 1–4  = diagonal corner stripes  (follow the 45° bevel cuts)
       layers 5–8  = straight edge stripes    (top / bottom / left / right) */
    background-color: transparent;
    background-image:
      /* TL diagonal  – 135° gradient starts at top-left corner */
      linear-gradient(135deg,
        transparent calc(var(--bevel) - var(--bw) * 1.414),
        var(--bc)    calc(var(--bevel) - var(--bw) * 1.414),
        var(--bc)    var(--bevel),
        transparent  var(--bevel)),
      /* TR diagonal  – -135° starts at top-right */
      linear-gradient(-135deg,
        transparent calc(var(--bevel) - var(--bw) * 1.414),
        var(--bc)    calc(var(--bevel) - var(--bw) * 1.414),
        var(--bc)    var(--bevel),
        transparent  var(--bevel)),
      /* BR diagonal  – 315° starts at bottom-right */
      linear-gradient(315deg,
        transparent calc(var(--bevel) - var(--bw) * 1.414),
        var(--bc)    calc(var(--bevel) - var(--bw) * 1.414),
        var(--bc)    var(--bevel),
        transparent  var(--bevel)),
      /* BL diagonal  – 45° starts at bottom-left */
      linear-gradient(45deg,
        transparent calc(var(--bevel) - var(--bw) * 1.414),
        var(--bc)    calc(var(--bevel) - var(--bw) * 1.414),
        var(--bc)    var(--bevel),
        transparent  var(--bevel)),
      /* top edge    */ linear-gradient(var(--bc), var(--bc)),
      /* bottom edge */ linear-gradient(var(--bc), var(--bc)),
      /* left edge   */ linear-gradient(var(--bc), var(--bc)),
      /* right edge  */ linear-gradient(var(--bc), var(--bc));

    /* Diagonal corners span full element; straight edges sized between bevels.
       -20px = 2 × bevel with a 2px overlap at each end to close corner gaps. */
    background-size:
      100% 100%, 100% 100%, 100% 100%, 100% 100%,
      calc(100% - 20px) var(--bw),
      calc(100% - 20px) var(--bw),
      var(--bw) calc(100% - 20px),
      var(--bw) calc(100% - 20px);

    background-position:
      0 0, 100% 0, 100% 100%, 0 100%,
      center 0, center 100%, 0 center, 100% center;

    background-repeat: no-repeat;

    position: relative;
    overflow: hidden;
    clip-path: polygon(
      var(--bevel) 0,         calc(100% - var(--bevel)) 0,
      100%         var(--bevel), 100%        calc(100% - var(--bevel)),
      calc(100% - var(--bevel)) 100%, var(--bevel) 100%,
      0            calc(100% - var(--bevel)), 0 var(--bevel)
    );
    transition: color 0.5s cubic-bezier(0.83, 0, 0.17, 1);
}

.navbar__contact-link span {
    position: relative;
    z-index: 1;
}

.navbar__contact-link span::before {
    display: none !important;
}

.navbar__contact-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    aspect-ratio: 1 / 1;
    background: var(--c-white);
    border-radius: 50%;
    translate: -50% -50%;
    scale: 0;
    transition: scale 0.8s cubic-bezier(0.76, 0, 0.24, 1);
    pointer-events: none;
    z-index: 0;
}

.navbar__contact-link::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 100%;
    bottom: auto;
    width: 200%;
    height: auto;
    aspect-ratio: 1 / 1;
    background: var(--c-white);
    border-radius: 50%;
    translate: -50% -50%;
    scale: 0;
    transition: scale 0.8s cubic-bezier(0.76, 0, 0.24, 1);
    pointer-events: none;
    z-index: 0;
}

.navbar__contact-link:hover {
    color: #C8A24A !important;
    filter: drop-shadow(0 4px 14px rgba(200, 162, 74, 0.3));
}

.navbar__contact-link:hover::before,
.navbar__contact-link:hover::after {
    scale: 1;
    width: 200%;
}

.navbar__contact-link:active {
    scale: 0.98;
    filter: brightness(0.9);
}

/* Language Selector */
.navbar__lang-selector {
  position: relative;
}

.navbar__lang-toggle {
  display:         flex;
  align-items:     center;
  gap:             0.2rem;
  background:      transparent;
  color:           rgba(255, 255, 255, 0.72);
  font-size:       0.78rem;
  font-weight:     var(--fw-medium);
  letter-spacing:  0.08em;
  cursor:          pointer;
  transition:      all 0.3s ease;
  border-radius:   4px;
}

.navbar__lang-toggle:hover {
  border-color:    rgba(255, 255, 255, 0.9);
  color:           rgba(255, 255, 255, 0.9);
}

.navbar__lang-arrow {
  transition: transform 0.3s ease;
}

.navbar__lang-toggle[aria-expanded="true"] .navbar__lang-arrow {
  transform: rotate(180deg);
}

.navbar__lang-menu {
  position:        absolute;
  top:             100%;
  right:           0;
  margin-top:      0.5rem;
  background:      var(--c-darker);
  border:          1px solid var(--c-white-12);
  border-radius:   4px;
  overflow:        hidden;
  display:         none;
  flex-direction:  column;
  z-index:         300;
}

.navbar__lang-toggle[aria-expanded="true"] ~ .navbar__lang-menu {
  display: flex;
}

.navbar__lang-option {
  padding:         0.6rem 1rem;
  font-size:       0.75rem;
  color:           rgba(255, 255, 255, 0.72);
  transition:      all 0.3s ease;
  display:         block;
}

.navbar__lang-option:hover {
  background:      rgba(200, 162, 74, 0.1);
  color:           #E6D3A3;
}

.navbar__actions { flex-shrink: 0; }

.navbar__toggle-cb {
  display: none;
}

.navbar__hamburger {
  display:        none;
  position:       relative;
  width:          30px;
  height:         30px;
  cursor:         pointer;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  gap:            10px;
  transition-duration: .5s;
  flex-shrink:    0;
}

.bars {
  width:            100%;
  height:           2px;
  background-color: var(--c-white);
  border-radius:    4px;
}

#bar2 {
  transition-duration: .8s;
}

#bar1, #bar3 {
  width: 70%;
}

.navbar__toggle-cb:checked + .navbar__hamburger .bars {
  position: absolute;
  transition-duration: .5s;
}

.navbar__toggle-cb:checked + .navbar__hamburger #bar2 {
  transform:           scaleX(0);
  transition-duration: .5s;
}

.navbar__toggle-cb:checked + .navbar__hamburger #bar1 {
  width:               100%;
  transform:           rotate(45deg);
  transition-duration: .5s;
}

.navbar__toggle-cb:checked + .navbar__hamburger #bar3 {
  width:               100%;
  transform:           rotate(-45deg);
  transition-duration: .5s;
}

.navbar__toggle-cb:checked + .navbar__hamburger {
  transition-duration: .5s;
  transform:           rotate(180deg);
}

/* ============================================================
   HERO
============================================================ */
.hero {
  position:        relative;
  min-height:      85vh;
  display:         flex;
  align-items:     flex-start;
  overflow:        hidden;
  padding-top:     0;
  z-index:         1;
}

.hero__video-wrapper {
  position: absolute;
  inset:    0;
  z-index:  0;
}

.hero__video {
  width:      100%;
  height:     100%;
  object-fit: cover;
  animation:  hero-zoom 16s ease-out forwards;
}

.hero__video-overlay {
  position:   absolute;
  inset:      0;
  background: rgba(5, 14, 35, 0.55);
}

.hero__content {
  position:       relative;
  z-index:        2;
  text-align:     left;
  padding-top:    calc(var(--header-total-h) + 10rem);
  padding-bottom: var(--sp-xl);
}

.hero__eyebrow {
  font-size:      0.8rem;
  font-weight:    var(--fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.75);
  margin-bottom:  1.25rem;
}

.hero__headline {
  font-weight:   var(--fw-extrabold);
  line-height:   0.95;
  margin-bottom: 1rem;
}

.hero__headline-line1 {
  display:   block;
  font-size: clamp(2.2rem, 6.5vw, 5rem);
  color:     var(--c-white);
  font-family: "Messina Sans",sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.hero__headline-line2 {
  display:        block;
  font-size:      clamp(2.2rem, 6.5vw, 5rem);
  color:          var(--c-white);
  font-family:    "Messina Sans", sans-serif;
  font-weight:    500;
  letter-spacing: -0.02em;
}

.hero__headline-rotating {
  display:        inline-block;
  vertical-align: bottom;
  min-width:      6em;
  font-size:      clamp(2.2rem, 6.5vw, 5rem);
  color:          #E6D3A3;
  position:       relative;
  height:         1.1em;
  overflow:       hidden;
  font-family:    "Playfair Display", serif;
  font-style:     italic;
  font-weight:    400;
  letter-spacing: -0.02em;
}

.rotating-word {
  position:  absolute;
  left:      0;
  top:       0;
  opacity:   0;
  transform: translateY(100%);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 450ms ease;
  white-space: nowrap;
}

.rotating-word.is-active {
  opacity:   1;
  transform: translateY(0);
}

.rotating-word.is-exit {
  opacity:   0;
  transform: translateY(-100%);
}

.hero__subheadline {
  font-size:     clamp(0.9rem, 1.2vw, 1rem);
  color:         rgba(255, 255, 255, 0.75);
  max-width:     480px;
  margin-bottom: 1.5rem;
  line-height:   1.6;
  font-weight:   var(--fw-medium);
}

.hero__cta-group {
  display:         flex;
  gap:             1rem;
  justify-content: flex-start;
  flex-wrap:       wrap;
}

.hero__diagonal {
  position:   absolute;
  bottom:     -5px;
  left:       0;
  right:      0;
  height:     42%;
  background: var(--body);
  clip-path:  polygon(0 75%, 100% 0, 100% 100%, 0 100%);
  z-index:    1;
  transition: background-color 0.9s ease;
}

body.warm-phase .hero__diagonal {
  background: #f5f1e8;
}

/* ============================================================
   ABOUT
============================================================ */
/* warm-phase: subtle light gold background from Services → Contact */
body.warm-phase {
  background: #f5f1e8;
}

body.warm-phase .about {
  background: #f5f1e8;
}

/* — Trusted by — */
body.warm-phase .trusted__header {
  transition: background 0.9s ease;
}
body.warm-phase .trusted__heading {
  color:          #0f2747;
  letter-spacing: 0.02em;
  transition: color 0.9s ease;
}
body.warm-phase .trusted__subtext {
  color:      #3a4a60;
  opacity:    0.9;
  transition: color 0.9s ease;
}
body.warm-phase .trusted__contact-link {
  background:      linear-gradient(to right, #c8a96a 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: right center;
  border-color:    #c8a96a;
  color:           #c8a96a;
  transition: background-position 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
body.warm-phase .trusted__contact-link:hover {
  background-position: left center;
  color:        #ffffff;
  border-color: #c8a96a;
}
body.warm-phase .trusted__logo-item {
  filter:     grayscale(100%) brightness(0.25) opacity(0.6);
  transition: filter 0.3s ease, transform 0.3s ease;
}
body.warm-phase .trusted__logo-item:hover {
  filter:    grayscale(0%) opacity(1);
  transform: translateY(-2px);
}
body.warm-phase .trusted__strip {
  background: #f5f1e8;
  transition: background 0.9s ease;
}

/* — About — */
body.warm-phase .about__title {
  color: #c8a96a;
  transition: color 0.9s ease;
}
body.warm-phase .about__title::after {
  background: #c8a96a;
  height:     1px;
  right:      calc(100% - 60px);
}
body.warm-phase .about__body {
  color:       #2a3e5c;
  line-height: 1.7;
  transition:  color 0.9s ease;
}
body.warm-phase .about__cta {
  background:      linear-gradient(to right, #c8a96a 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: right center;
  border-color:    #c8a96a;
  color:           #c8a96a;
  transition: background-position 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
body.warm-phase .about__cta:hover {
  background-position: left center;
  color:        #ffffff;
  border-color: #c8a96a;
}

/* — Locations — */
body.warm-phase .locations {
  transition: background 0.9s ease;
}
body.warm-phase .locations__count {
  background:            linear-gradient(135deg, #c8a96a, #e3c98f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:       text;
  transition:            color 0.9s ease;
}
body.warm-phase .locations__title {
  color:      #0f2747;
  transition: color 0.9s ease;
}
body.warm-phase .locations__body {
  color:      #3a4a60;
  transition: color 0.9s ease;
}
body.warm-phase .locations__stat {
  color:      #0f2747;
  transition: color 0.9s ease;
}
body.warm-phase .locations__stat-count {
  background:            linear-gradient(135deg, #c8a96a, #e3c98f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:       text;
  transition:            color 0.9s ease;
}

body.warm-phase .services__title {
  color:      #0d1e3d;
  transition: color 0.9s ease;
}

/* — Services warm overrides — */
body.warm-phase .services {
  color:      #0f2747;
}
body.warm-phase .services__intro {
  color: #3a4a60;
}
body.warm-phase .service-row {
  border-bottom-color: rgba(15, 39, 71, 0.12);
}
body.warm-phase .service-row:hover {
  border-bottom-color: #c8a96a;
}

body.warm-phase .service__name {
  color: #0f2747;
}
body.warm-phase .service__desc {
  color: #3a4a60;
}
body.warm-phase .service__cta {
  color: #c8a96a;
}
body.warm-phase .service-row:hover .service__cta {
  color: #95835e;
}

/* — Clients warm overrides — */
body.warm-phase .clients {
  color: #0f2747;
}
body.warm-phase .client-heading {
  color: #0f2747;
}
body.warm-phase .card {
  background: rgba(15, 39, 71, 0.06);
}
body.warm-phase .quote__text {
  color: #3a4a60;
}
body.warm-phase .quote__name {
  color: #0f2747;
}
body.warm-phase .quote__role {
  color: #3a4a60;
}

body.warm-phase .kpi__content {
  color: #fff7d7;
}
body.warm-phase .kpi__avatars li {
  box-shadow: 0 0 0 3px #f5f1e8 inset, 0 0 0 3px #f5f1e8;
}

.about {
  background:  var(--body);
  padding-block: 4rem;
  transition: background-color 0.9s ease;
}

.about__inner {
  display:     flex;
  gap:         2.5rem;
  align-items: flex-start;
}

.about__left {
  flex:        0 0 200px;
  padding-top: 0.3rem;
}

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

.about__title {
  position: relative;
}

.about__title::after {
  content:    '';
  position:   absolute;
  left:       -200vw;
  right:      0;
  bottom:     -8px;
  height:     2px;
  background: #C8A24A;
}

.about__body {
  font-size:     1rem;
  font-weight:   var(--fw-regular);
  line-height:   1.75;
  color:         var(--c-white-70);
  margin-bottom: 2rem;
}

.about__cta {
  font-family:     "Playfair Display", serif;
  font-style:      italic;
  font-weight:     400;
  letter-spacing:  0.5px;
  text-transform:  capitalize;
  color:           #C8A24A;
  border:          1px solid #C8A24A;
  background:      linear-gradient(to right, #000 50%, #fff 50%);
  background-size: 200% 100%;
  background-position: right center;
  transition:      background-position 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.35s ease, border-color 0.35s ease;
  padding: 12px 20px;
  font-size: 20px;
  display: inline-block;
  text-decoration: none;
}

.about__cta:hover {
  background-position: left center;
  color: #fff;
  border-color: #000;
}

.anim-ready .about__cta[data-animate] {
  transition: opacity 0.7s ease, transform 0.7s ease,
              background-position 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              color 0.35s ease, border-color 0.35s ease;
}

/* ============================================================
   SERVICES
============================================================ */
.services {
  background:    var(--c-dark);
  padding-block: var(--sp-xl);
  color:         var(--c-white);
  transition:    background 0.9s ease, color 0.9s ease;
}

.services__wrap {
  display:               grid;
  grid-template-columns: minmax(240px, 360px) 1fr;
  column-gap:            6rem;
  row-gap:               2rem;
}

.services__title {
  margin-bottom: 0.875rem;
}

.services__intro {
  max-width:   32ch;
  font-size:   0.95rem;
  line-height: 1.8;
  color:       var(--c-white-70);
  transition:  color 0.9s ease;
}

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

.service-row {
  display:               grid;
  grid-template-columns: 1.15fr 1fr auto;
  align-items:           start;
  gap:                   clamp(1rem, 3vw, 1.75rem);
  padding:               1.125rem 0;
  border-bottom:         1px solid var(--c-white-12);
  transition:            border-color 0.3s ease;
}

.service-row:hover {
  border-bottom-color: #C8A24A;
}

.service__name {
  margin:         0;
  font-family:    var(--font);
  font-weight:    var(--fw-semibold);
  font-size:      clamp(1.125rem, 2.2vw, 1.625rem);
  color:          var(--c-white);
  transition:     color 0.9s ease;
}

.service__desc {
  margin:      0;
  font-size:   0.95rem;
  line-height: 1.8;
  color:       var(--c-white-70);
  max-width:   40ch;
  transition:  color 0.9s ease;
}

.service__cta {
  justify-self:   end;
  display:        inline-flex;
  align-items:    center;
  gap:            0.5rem;
  text-decoration: none;
  font-size:      0.95rem;
  color:          var(--c-white-70);
  white-space:    nowrap;
  transition:     color 0.3s ease;
}

.service__cta::after {
  content:   "\25B8";
  transform: translateY(1px);
}

.service-row:hover .service__cta {
  color: var(--c-white);
}

/* ============================================================
   CLIENTS
============================================================ */
.clients {
  padding-block: var(--sp-xl);
  color:         var(--c-white);
  transition:    color 0.9s ease;
}

.client-heading {
  width:         100%;
  text-align:    center;
  font-weight:   var(--fw-medium);
  font-size:     clamp(2rem, 4vw, 3.5rem);
  margin-bottom: 2.5rem;
  font-family:   var(--font);
  color:         var(--c-white);
  transition:    color 0.9s ease;
}

.showcase__grid {
  display:               grid;
  gap:                   1.5rem;
  grid-template-columns: 1.1fr 1.2fr 1.8fr;
  grid-template-rows:    auto auto;
  grid-template-areas:
    "kpi metric quote"
    "kpi brand  video";
  align-items: stretch;
}

.card {
  background:    rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  overflow:      hidden;
  box-shadow:    0 1px 0 rgba(0,0,0,.04), 0 2px 20px rgba(0,0,0,.08);
  position:      relative;
  transition:    background 0.9s ease;
}

/* Card 1 — Metric */
.card--metric { grid-area: metric; }

.card__media { height: 100%; }

.card--metric .card__media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.card--metric .card__overlay {
  position:       absolute;
  inset:          0;
  padding:        1.375rem;
  display:        flex;
  flex-direction: column;
  justify-content: flex-start;
  color:          #ffffff;
  text-shadow:    0 2px 8px rgba(0,0,0,.35);
}

.metric__kpi {
  font-size:      3.5rem;
  line-height:    .95;
  font-weight:    var(--fw-bold);
  letter-spacing: .5px;
}

.metric__sub {
  margin:     1.125rem 0 1.75rem;
  font-size:  0.875rem;
  line-height: 1.5;
  max-width:   30ch;
}

.metric__rule {
  border:      0;
  border-top:  1.5px solid rgba(255,255,255,.35);
  margin:      0 0 1.125rem;
  width:       72%;
}

.metric__title {
  font-size:   1.375rem;
  font-weight: var(--fw-bold);
}

/* Card 2 — Quote */
.card--quote {
  grid-area:       quote;
  padding:         1.625rem 1.75rem 1.125rem;
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
}

.client-test {
  display:        flex;
  flex-direction: column;
}

.quote__toprow {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             0.75rem;
}

.stars span {
  font-size:    1.125rem;
  margin-right: 0.375rem;
  color:        #cdb268;
  user-select:  none;
}

.stars .half { opacity: .6; }

.quote__text {
  margin:         1.375rem 0 1.625rem;
  font-family:    "Playfair Display", serif;
  font-style:     normal;
  font-size:      1rem;
  line-height:    1.65;
  color:          var(--c-white-70);
  letter-spacing: 0.015em;
  transition:     color 0.9s ease;
  user-select:    none;
}

.quote__footer {
  display:               grid;
  grid-template-columns: auto 1fr;
  gap:                   0.75rem;
  align-items:           center;
}

.avatar {
  width:         40px;
  height:        40px;
  border-radius: 10px;
  object-fit:    cover;
}

.quote__name {
  font-weight: var(--fw-extrabold);
  color:       var(--c-white);
  transition:  color 0.9s ease;
}

.quote__role {
  color:      var(--c-white-70);
  font-size:  0.75rem;
  margin-top: 2px;
  transition: color 0.9s ease;
}

/* Card 3 — KPI */
.card--kpi {
  grid-area:  kpi;
  min-height: 640px;
  display:    grid;
}

.kpi__img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.kpi__fade {
  position:   absolute;
  inset:      auto 0 0 0;
  height:     38%;
  background: linear-gradient(to top, var(--c-dark) 0%, rgba(13,30,61,.9) 40%, transparent 100%);
  transition: background 0.9s ease;
}

.kpi__content {
  position: absolute;
  left:     1.5rem;
  right:    1.5rem;
  bottom:   1.25rem;
  color:    #ffffff;
}

.kpi__value {
  font-size:     3.625rem;
  font-weight:   600;
  line-height:   1;
  margin-bottom: 0.5rem;
}

.kpi__label {
  font-size:   2.125rem;
  font-weight: var(--fw-bold);
}

.kpi__avatars {
  list-style: none;
  display:    flex;
  gap:        0.625rem;
  padding:    0;
  margin:     1.125rem 0 0;
}

.kpi__avatars li {
  width:         40px;
  height:        40px;
  border-radius: 50%;
  overflow:      hidden;
  box-shadow:    0 0 0 3px var(--c-dark) inset, 0 0 0 3px var(--c-dark);
}

.kpi__avatars img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* Card 4 — Brand */
.card--brand {
  grid-area:   brand;
  display:     grid;
  place-items: center;
  min-height:  260px;
}

.brand__wrap {
  display:     grid;
  place-items: center;
  padding:     1.5rem;
}

/* Card 5 — Video */
.card--video {
  grid-area: video;
  overflow:  hidden;
}

.cta-video__bg {
  width:         100%;
  height:        100%;
  min-height:    260px;
  object-fit:    cover;
  border-radius: 0;
  display:       block;
}

/* ============================================================
   TRUSTED BY
============================================================ */
.trusted__header {
  background:    var(--c-dark);
  padding-bottom: var(--sp-xl);
  text-align:    center;
}

.trusted__heading {
  font-size:     clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight:   600;
  color:         var(--c-white);
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.trusted__subtext {
  font-size:     1rem;
  color:         rgba(255, 255, 255, 0.75);
  max-width:     620px;
  margin-inline: auto;
  margin-bottom: 2rem;
  line-height:   1.6;
  font-weight:   var(--fw-medium);
}

.trusted__contact-link {
  font-family:     "Playfair Display", serif;
  font-style:      italic;
  font-size:       0.95rem;
  font-weight:     400;
  letter-spacing:  0.5px;
  text-transform:  capitalize;
  color:           #C8A24A;
  border:          1px solid #C8A24A;
  background:      linear-gradient(to right, #000 50%, #fff 50%);
  background-size: 200% 100%;
  background-position: right center;
  padding:         10px 26px;
  display:         inline-block;
  transition:      background-position 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.35s ease, border-color 0.35s ease;
}

.trusted__contact-link:hover {
  background-position: left center;
  color:           #fff;
  border-color:    #000;
}

.anim-ready .trusted__contact-link[data-animate] {
  transition: opacity 0.7s ease, transform 0.7s ease,
              background-position 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              color 0.35s ease, border-color 0.35s ease;
}

.trusted__strip {
  padding-bottom: 5rem;
  overflow:      hidden;
}

.trusted__logos-viewport {
  overflow: hidden;
  width:    100%;
}

.trusted__logos-track {
  display:     flex;
  align-items: center;
  gap:         5rem;
  width:       max-content;
  animation:   logo-marquee 32s linear infinite;
}

@keyframes logo-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.trusted__logo-item {
  flex:            0 0 auto;
  width:           180px;
  height:          80px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  filter:          grayscale(100%) opacity(0.85);
  transition:      filter 0.3s ease;
}

.trusted__logo-item:hover {
  filter:          grayscale(0%) opacity(1);
}

.trusted__logo-img {
  width:      100%;
  height:     100%;
  object-fit: contain;
}

/* ============================================================
   LOCATIONS / MAP
============================================================ */
.locations {
  padding-block: var(--sp-xl);
}

.locations__inner {
  display:    block;
  max-width:  640px;
  position:   relative;
}

.locations__title {
  font-size:     clamp(1.6rem, 3vw, 2.2rem);
  font-weight:   600;
  line-height:   1.2;
  color:         var(--c-white);
}

.locations__count {
  display:     block;
    font-size: clamp(9rem, 17vw, 14.5rem);
    font-weight: var(--fw-extrabold);
    line-height: 1;
    color: #fdc667;
  font-family: "Playfair Display", serif;
  position: relative;
}
.plus{
  font-size: clamp(3rem, 8vw, 7.5rem);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.locations__count.is-counted .plus {
  opacity: 1;
}

/* 300+ stat line */
.locations__stat {
  font-size:     clamp(1.1rem, 2vw, 1.5rem);
  font-weight:   600;
  line-height:   1.2;
  color:         var(--c-white);
  margin-bottom: 1.25rem;
}
.locations__stat-count {
  display:     block;
  font-size:   clamp(4.5rem, 10vw, 7rem);
  font-weight: var(--fw-extrabold);
  color:       #fdc667;
  font-family: "Playfair Display", serif;
  position:    relative;
}
.locations__stat-count .plus {
  font-size:   clamp(1.8rem, 5vw, 3.5rem);
  opacity:     0;
  transition:  opacity 0.25s ease;
}
.locations__stat-count.is-counted .plus {
  opacity: 1;
}

.locations__body {
  font-size:   0.95rem;
  color:       var(--c-white-70);
  line-height: 1.7;
}

.locations__map-block {
  margin-right: calc((100vw - 160%) / -2);
  overflow: visible;
  display: block;
}

.locations__map-image {
  width:      100%;
  height:     auto;
  object-fit: contain;
}

/* === Germany Network Map ==================================== */
.de-network {
  width:     100%;
  max-width: 520px;
  margin:    0 auto;
}
.de-network__svg {
  width:    100%;
  height:   auto;
  display:  block;
  overflow: visible;
}

/* Silhouette */
.de-network__silhouette {
  transition: fill-opacity 0.6s ease;
}

/* Routes */
.de-network__route {
  fill:            none;
  stroke:          #C8A24A;
  stroke-width:    1.5;
  stroke-linecap:  round;
  opacity:         0.3;
  transition:      opacity 220ms ease, stroke-width 220ms ease;
}
.de-network__route.is-active {
  opacity:      0.85;
  stroke-width: 2.2;
}

/* Ambient shimmer */
.de-network__ambient {
  fill:              none;
  stroke-dasharray:  18 220;
  stroke-dashoffset: 18;
  opacity:           0;
  animation:         de-ambient 5.5s ease-in-out 2.5s infinite;
}
@keyframes de-ambient {
  0%   { stroke-dashoffset: 18;   opacity: 0;    }
  8%   {                          opacity: 0.3;  }
  88%  {                          opacity: 0.3;  }
  100% { stroke-dashoffset: -220; opacity: 0;    }
}

/* Node layers */
.de-network__hit {
  fill:    transparent;
  stroke:  none;
  cursor:  pointer;
}
.de-network__halo {
  fill:           #E6D3A3;
  opacity:        0;
  transition:     opacity 200ms ease;
  pointer-events: none;
}
.de-network__pulse {
  fill:             none;
  stroke:           #E6D3A3;
  stroke-width:     1.2;
  opacity:          0;
  transform-box:    fill-box;
  transform-origin: center;
  pointer-events:   none;
}
.de-network__ring {
  fill:             none;
  stroke:           #C8A24A;
  stroke-width:     1;
  opacity:          0.55;
  transition:       transform 180ms ease, opacity 180ms ease, stroke 180ms ease;
  transform-box:    fill-box;
  transform-origin: center;
  pointer-events:   none;
}
.de-network__core {
  fill:             #E6D3A3;
  transition:       transform 180ms ease, fill 180ms ease;
  transform-box:    fill-box;
  transform-origin: center;
  pointer-events:   none;
}

/* Major hubs get a faint static ambient halo */
.de-network__city[data-tier="major"] .de-network__halo {
  opacity: 0.06;
}

/* Labels */
.de-network__label-text {
  font-family:    var(--font);
  font-size:      12.5px;
  font-weight:    500;
  letter-spacing: 0.04em;
  fill:           #E6D3A3;
  opacity:        0;
  transition:     opacity 200ms ease, transform 200ms ease;
  transform:      translateY(4px);
  pointer-events: none;
}

/* ---- Active city state ---- */
.de-network__city.is-active .de-network__core {
  fill:      #fdc667;
  transform: scale(1.08);
}
.de-network__city.is-active .de-network__ring {
  transform: scale(1.12);
  opacity:   0.9;
  stroke:    #fdc667;
}
.de-network__city.is-active .de-network__halo {
  opacity: 0.22;
}
.de-network__city.is-active .de-network__pulse {
  animation: de-pulse-ring 700ms ease-out forwards;
}
.de-network__city.is-active .de-network__label-text {
  opacity:   1;
  transform: translateY(0);
}

/* Pulse ring animation */
@keyframes de-pulse-ring {
  0%   { transform: scale(1);   opacity: 0.45; }
  100% { transform: scale(3.5); opacity: 0;    }
}

/* Connected cities subtle highlight */
.de-network__city.is-connected .de-network__core {
  fill: #fdc667;
}
.de-network__city.is-connected .de-network__ring {
  opacity: 0.75;
}
.de-network__city.is-connected .de-network__halo {
  opacity: 0.1;
}

/* Warm phase label override */
body.warm-phase .de-network__label-text {
  fill: #0f2747;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .de-network__city.is-active .de-network__pulse {
    animation: none;
  }
  .de-network__ambient {
    animation:        none;
    opacity:          0.15;
    stroke-dasharray: none;
  }
  .de-network__route,
  .de-network__core,
  .de-network__ring,
  .de-network__halo,
  .de-network__label-text {
    transition-duration: 0.01ms;
  }
}

/* ============================================================
   CASES / REVIEWS
============================================================ */
.cases {
  background:  #ffffff;
  padding-block: var(--sp-xl);
}

.cases__title {
  margin-bottom: 2.5rem;
  position: relative;
  color: #122048;
}

.cases__title::after {
  content:    '';
  position:   absolute;
  left:       -200vw;
  right:      0;
  bottom:     0;
  height:     2px;
  background: #C8A24A;
}

.cases__carousel {
  display:        flex;
  flex-direction: column;
  gap:            2rem;
  overflow:       hidden;
}

.cases__track {
  display:         flex;
  gap:             6rem;
  overflow-x:      hidden;
  scrollbar-width: none;
  padding-bottom:  0;
}

.cases__track::-webkit-scrollbar {
  display: none;
}

.case-card {
  flex:           0 0 calc(40% - 2.4rem);
  display:        flex;
  flex-direction:    column;
  min-width:         0;
  cursor:            pointer;
  transition:        transform 240ms ease, box-shadow 240ms ease;
}

.case-card:hover {
  transform:  scale(1.04);
  z-index:    2;
}

.case-card__image-wrapper {
  aspect-ratio: 3 / 2.2;
  overflow:     hidden;
  background:   var(--c-white-12);
  flex-shrink:  0;
}

.case-card__image {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.case-card__body {
  background:     var(--c-card);
  padding:        1rem 1.5rem 2rem;
  margin-left:    3.5rem;
  margin-right:   -2.5rem;
  flex-grow:      1;
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
  clip-path:      polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), calc(100% - 2.5rem) 100%, 0 100%);
}

.case-card__title {
  font-size:   1.1rem;
  font-weight: 500;
  line-height: 1.5;
  color:       #E6D3A3;
  flex-grow:   1;
  margin-bottom: 0.25rem;
}

.case-card__category {
  font-size:      0.75rem;
  font-weight:    var(--fw-regular);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.55);
  line-height:    1.4;
  margin-bottom:  0.75rem;
}

.case-card__link {
  align-self: flex-start;
  font-size:  0.85rem;
  font-family: "Playfair Display", serif;
  font-style: italic;
  padding:    7px 16px;
  pointer-events: auto;
  color: #E6D3A3;
  border: 1px solid #E6D3A3;
  background: linear-gradient(to right, #fff 0%, #fff 100%), transparent;
  background-size: 0% 100%, 100% 100%;
  background-position: 0% 0, 0% 0;
  background-repeat: no-repeat;
  transition: all 0.4s ease;
  text-decoration: none;
  display: inline-block;
}

.case-card__link:hover {
  background-size: 100% 100%, 100% 100%;
  color: var(--c-dark);
  border-color: #fff;
}

.cases__controls {
  display:         flex;
  justify-content: center;
  gap:             0.75rem;
}

.cases__arrow {
  width:           32px;
  height:          32px;
  border:          1px solid rgba(13, 16, 46, 0.5);
  color:           rgba(16, 11, 44, 0.6);
  font-size:       0.9rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      transparent;
  cursor:          pointer;
  transition:      all 0.3s ease;
  border-radius:   0;
}

.cases__arrow:hover {
  border-color:    #C8A24A;
  color:           #C8A24A;
}

/* ============================================================
   FAQ
============================================================ */
.faq {
  background:  #f5f1e8;
  padding-block: var(--sp-xl);
}

.faqs__wrap {
  gap: 4.75rem;
  display: flex;
}

@media (min-width: 1200px) {
  .faqs__wrap {
    padding-right: 10rem;
  }
}
@media (min-width: 1500px) {
  .faqs__wrap {
    padding-right: 20rem;
  }
}

.faqs__header {
  flex: 0 0 440px;
}

.faq__title {
  position: relative;
  margin-bottom: 1.5rem;
  color: #002d4f;
}

.faq__title::after {
  content:    '';
  position:   absolute;
  left:       -200vw;
  right:      0;
  bottom:     -12px;
  height:     2px;
  background: #C8A24A;
}

.faqs__subtext {
  font-size:     1rem;
  color:         #002d4f;
  line-height:   1.7;
  margin-top:    1.5rem;
}

.faqs__link {
  color:        #d1b672;
  text-decoration: none;
  transition:   color 0.3s ease;
}

.faqs__link:hover {
  color: #a18136;
}

.faqs__list {
  flex: 1;
  padding-left: 0;
  list-style-type: none;
  display: flex;
  flex-direction: column;
}

.faqs__item {
  cursor: pointer;
  border-bottom: 1px solid #C8A24A;
  padding-block: 1.3rem;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.faqs__item:hover {
  color: #E6D3A3;
}

.faqs__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.faqs__question {
  font-size:     1.05rem;
  font-weight:   var(--fw-medium);
  color:         #000;
  line-height:   1.6;
  margin: 0;
  flex: 1;
}

.faqs__icon {
  flex-shrink: 0;
  color: #C8A24A;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  width: 20px;
  height: 20px;
}

.faqs__item.is-open .faqs__icon {
  transform: rotate(180deg);
}

.faqs__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), margin-top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  margin-top: 0;
}

.faqs__item.is-open .faqs__body {
  max-height: 400px;
  margin-top: 1.5rem;
}

.faqs__answer {
  font-size:     1rem;
  color:         #000;
  line-height:   1.7;
  margin: 0;
}

/* ============================================================
   CONTACT
============================================================ */
.contact {
  position:   relative;
  min-height: 80vh;
  overflow:   hidden;
}

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

.contact__bg-video {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.contact__bg-overlay {
  position:   absolute;
  inset:      0;
  background: rgba(5, 14, 35, 0.60);
}

.contact__inner {
  position:              relative;
  z-index:               3;
  display:               grid;
  grid-template-columns: 1.6fr 1fr;
  gap:                   3rem;
  align-items:           flex-start;
  padding-top:           3rem;
  padding-bottom:        10rem;
}

.contact__form-block {
  background: var(--c-form-bg);
  color:      var(--c-form-text);
  padding:    1.5rem;
}

.contact__title {
  font-size:      1.35rem;
  font-weight:    var(--fw-extrabold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--c-form-text);
  margin-bottom:  1.75rem;
}

.contact-form {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

.contact-form__label { display: none; }

.contact-form__input,
.contact-form__textarea {
  width:       100%;
  padding:     0.75rem;
  font-family: var(--font);
  font-size:   0.875rem;
  color:       var(--c-form-text);
  background:  var(--c-form-bg);
  border:      1px solid var(--c-input-border);
  outline:     none;
  transition:  border-color var(--transition);
}

.contact-form__textarea { resize: vertical; }

.contact-form__submit {
  align-self: flex-start;
  margin-top: 0.5rem;
  font-size:  0.8rem;
  padding:    0.65rem 2rem;
}

.contact__brand-block {
  display:         flex;
  align-items:     flex-start;
  justify-content: center;
  padding-top:     1rem;
}

.contact__logo {
  width:  240px;
  height: auto;
  padding-top: 5rem;
}

.contact__diagonal {
  position:        absolute;
  bottom:          0;
  left:            0;
  right:           -1px;
  height:          34%;
  background:      var(--body);
  clip-path:       polygon(0 100%, 100% 0, 100% 100%, 0 100%);
  z-index:         2;
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  padding-right:   var(--container-px);
  padding-left:    55%;
}

.contact__cta-text {
  font-size:   clamp(1.2rem, 2.5vw, 2rem);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color:       var(--c-white);
  text-align:  right;
  margin-top: 3rem;
}

.contact__cta-em {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 400;
  color: #E6D3A3;
}

/* ============================================================
   CASE STUDY MODAL
============================================================ */
.case-modal {
  display:         none;
  position:        fixed;
  inset:           0;
  z-index:         2000;
  background:      rgba(0, 0, 0, 0.82);
  align-items:     center;
  justify-content: center;
  padding:         2rem;
}

.case-modal.is-open {
  display: flex;
}

.case-modal__inner {
  position:              relative;
  background:            var(--c-card);
  max-width:             880px;
  width:                 100%;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  max-height:            85vh;
  overflow:              hidden;
}

.case-modal__close {
  position:        absolute;
  top:             1rem;
  right:           1rem;
  font-size:       1.4rem;
  line-height:     1;
  color:           var(--c-white);
  background:      rgba(0, 0, 0, 0.55);
  width:           36px;
  height:          36px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  z-index:         1;
  border:          none;
}

.case-modal__image-block {
  overflow: hidden;
}

.case-modal__image {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.case-modal__content {
  padding:         2rem;
  display:         flex;
  flex-direction:  column;
  gap:             1rem;
  justify-content: flex-end;
  overflow-y:      auto;
}

.case-modal__category {
  font-size:      0.7rem;
  font-weight:    var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--c-white-70);
}

.case-modal__title {
  font-size:   1.1rem;
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color:       var(--c-white);
}

.case-modal__body {
  font-size:   0.88rem;
  color:       var(--c-white-70);
  line-height: 1.7;
}

/* ============================================================
   FOOTER
============================================================ */
.site-footer {
  background: #071427;
  color:      var(--c-white);
}

/* Brand bar — top brand statement */
.footer__brand-bar {
  padding-top:    2rem;
  padding-bottom: 2.5rem;
}
.footer__brand-row {
  display:     flex;
  align-items: center;
  gap:         0.65rem;
  margin-bottom: 0.75rem;
}
.footer__brand-logo {
  width:      36px;
  height:     auto;
  object-fit: contain;
}
.footer__brand-name {
  font-family:    "DM Sans", sans-serif;
  font-size:      1.05rem;
  font-weight:    500;
  letter-spacing: 0.12em;
  color:          #E6D3A3;
}
.footer__brand-statement {
  font-size:   0.9rem;
  color:       rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  max-width:   380px;
}
.footer__brand-divider {
  margin-top: 2.5rem;
  height:     1px;
  background: linear-gradient(90deg, rgba(200,162,74,0.25) 0%, rgba(200,162,74,0) 100%);
}

/* Core 2-column layout */
.site-footer__inner {
  display:               grid;
  grid-template-columns: 1.2fr 1fr;
  gap:                   4rem;
  padding-bottom:        2rem;
}

/* Left column */
.footer__left {
  display:        flex;
  flex-direction: column;
  gap:            2.5rem;
}
.footer__contact-block {
  display:        flex;
  flex-direction: column;
  gap:            0.35rem;
  max-width:      420px;
}
.footer__address {
  display:        grid;
  gap:            0.2rem;
  font-size:      0.95rem;
  line-height:    1.75;
  color:          rgba(255, 255, 255, 0.75);
}
.footer__company-name {
  font-weight:    600;
  color:          #ffffff;
}
.footer__address-line,
.footer__legal-detail {
  color:          rgba(255, 255, 255, 0.62);
}
.footer__legal-detail {
  font-size:      0.85rem;
}
.footer__section-label {
  font-size:      0.7rem;
  font-weight:    500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.4);
  margin-bottom:  0.9rem;
}
.footer__email {
  display:         block;
  font-size:       1rem;
  font-weight:     500;
  color:           #e6d3a3;
  transition:      color 0.3s ease;
  text-decoration: none;
}
.footer__email:hover {
  color: #ffefc7;
}
.footer__contact-detail {
  font-size:   0.88rem;
  color:       rgba(255, 255, 255, 0.6);
  line-height: 1.7;
}
.footer__presence-text {
  font-size:      0.88rem;
  color:          rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
}

/* Right column */
.footer__right {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   2.5rem 3rem;
  align-content:         start;
  border-left:           1px solid rgba(255, 255, 255, 0.06);
  padding-left:          3rem;
}
.footer__social-block {
  grid-column: 1 / -1;
}

/* Navigation lists */
.footer__nav-list {
  display:        flex;
  flex-direction: column;
  gap:            0.7rem;
}
.footer__nav-link {
  font-size:       0.88rem;
  color:           rgba(255, 255, 255, 0.6);
  transition:      color 0.3s ease;
  text-decoration: none;
}
.footer__nav-link:hover {
  color: #C8A24A;
}

/* Legal bar */
.footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer__legal-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-block:   1.75rem;
  gap:             1rem;
}
.footer__copyright {
  font-size: 0.78rem;
  color:     rgba(255, 255, 255, 0.4);
}
.footer__legal-links {
  display:     flex;
  align-items: center;
  gap:         2rem;
}
.footer__legal-link {
  font-size:       0.78rem;
  color:           rgba(255, 255, 255, 0.4);
  transition:      color 0.3s ease;
  text-decoration: none;
}
.footer__legal-link:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   CONTACT SLIDE-IN PANEL
============================================================ */

/* — Overlay — */
.contact-panel-overlay {
  position:   fixed;
  inset:      0;
  background: rgba(0, 0, 0, 0.45);
  z-index:    2000;
  opacity:    0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
  cursor:     pointer;
}

.contact-panel-overlay.is-open {
  opacity:    1;
  visibility: visible;
}

/* — Panel — */
.contact-panel {
  position:   fixed;
  top:        0;
  right:      0;
  bottom:     0;
  width:      42%;
  max-width:  680px;
  min-width:  400px;
  background: #ffffff;
  z-index:    2001;
  transform:  translateX(100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.18);
}

.contact-panel.is-open {
  transform: translateX(0);
}

/* — Close button — */
.contact-panel__close {
  position:    sticky;
  top:         0;
  display:     block;
  margin-left: 2rem;
  margin-top:  1.5rem;
  width:       36px;
  height:      36px;
  background:  transparent;
  border:      none;
  font-size:   2rem;
  line-height: 1;
  color:       #222;
  cursor:      pointer;
  z-index:     10;
  transition:  color 0.2s ease;
}

.contact-panel__close:hover {
  color: #C8A24A;
}

/* — Inner wrapper — */
.contact-panel__inner {
  padding: 1rem 3rem 3.5rem;
}

/* — Eyebrow label — */
.contact-panel__eyebrow {
  font-family:    var(--font);
  font-size:      0.72rem;
  font-weight:    var(--fw-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          #888;
  margin-bottom:  1.8rem;
}

/* — Heading — */
.contact-panel__heading {
  font-family:   "Playfair Display", serif;
  font-size:     clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight:   400;
  line-height:   1.25;
  color:         #111;
  margin-bottom: 2.5rem;
}

/* — Form — */
.contact-panel__form {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

/* — Field — */
.contact-panel__field {
  display:        flex;
  flex-direction: column;
  padding-bottom: 1.8rem;
}

/* — Label — */
.contact-panel__label {
  font-family:    var(--font);
  font-size:      0.7rem;
  font-weight:    var(--fw-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          #444;
  margin-bottom:  0.6rem;
  line-height:    1.5;
}

/* — Input — */
.contact-panel__input {
  font-family:    var(--font);
  font-size:      0.95rem;
  font-weight:    var(--fw-regular);
  color:          #111;
  background:     transparent;
  border:         none;
  border-bottom:  1px solid #ccc;
  padding:        0.5rem 0;
  outline:        none;
  transition:     border-color 0.3s ease;
}

.contact-panel__input:focus {
  border-bottom-color: #C8A24A;
}

/* — Textarea — */
.contact-panel__field--textarea {
  padding-top: 0.5rem;
}

.contact-panel__textarea {
  font-family:   var(--font);
  font-size:     0.95rem;
  font-weight:   var(--fw-regular);
  color:         #111;
  background:    transparent;
  border:        1px solid #ccc;
  padding:       0.75rem;
  outline:       none;
  resize:        vertical;
  min-height:    120px;
  transition:    border-color 0.3s ease;
}

.contact-panel__textarea:focus {
  border-color: #C8A24A;
}

/* — Submit button — */
.contact-panel__actions {
  padding-top: 0.8rem;
}

.contact-panel__submit {
  font-family:    var(--font);
  font-size:      0.85rem;
  font-weight:    var(--fw-medium);
  letter-spacing: 0.08em;
  color:          #111;
  background:     transparent;
  border:         1.5px solid #111;
  padding:        0.85rem 2.4rem;
  cursor:         pointer;
  transition:     background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.contact-panel__submit:hover {
  background:   #111;
  color:        #fff;
  border-color: #111;
}

/* — Email — */
.contact-panel__email {
  font-family:  var(--font);
  font-size:    0.95rem;
  color:        #111;
  margin-top:   2.5rem;
}

/* — Privacy — */
.contact-panel__privacy {
  font-family: var(--font);
  font-size:   0.8rem;
  color:       #888;
  margin-top:  1rem;
  line-height: 1.5;
}

.contact-panel__privacy a {
  color:           #111;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-panel__privacy a:hover {
  color: #C8A24A;
}

/* — Body scroll lock when panel is open — */
body.contact-panel-open {
  overflow: hidden;
}

/* ============================================================
   RESPONSIVE — TABLET
============================================================ */
@media (max-width: 1024px) {

  :root { --container-px: 1.5rem; }

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

  .service-row {
    grid-template-columns: 0.8fr 1fr auto;
    gap: 0.5rem;
  }

  .showcase__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "kpi metric"
      "kpi quote"
      "video brand";
  }

  .card--kpi { min-height: 560px; }

  .case-card {
    flex: 0 0 calc(50% - 1.5rem);
  }

  .locations__inner {
    grid-template-columns: 1fr;
    gap:                   2.5rem;
  }

  .locations__map-block {
    width: calc(100% + 2 * var(--container-px));
    margin-right: calc(-1 * var(--container-px));
    margin-left: calc(-1 * var(--container-px));
    overflow: visible;
  }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap:                   2.5rem;
  }

  .footer__right {
    border-left:  none;
    padding-left: 0;
    border-top:   1px solid rgba(255, 255, 255, 0.06);
    padding-top:  2.5rem;
    grid-column:  1 / -1;
  }

  .contact__diagonal {
    clip-path:    polygon(0 45%, 100% 0, 100% 100%, 0 100%);
    height:       30%;
    padding-left: 45%;
  }

  /* Contact panel — tablet */
  .contact-panel {
    width:     50%;
    min-width: 340px;
  }

}

/* ============================================================
   RESPONSIVE — MOBILE
============================================================ */
@media (max-width: 768px) {

  :root {
    --container-px:   1.25rem;
    --sp-xl:          6rem;
    --sp-lg:          2.5rem;

    --header-total-h: calc(var(--navbar-height) + var(--gradient-bar-h));
  }

  .navbar__actions {
    display: none;
  }

  .navbar__menu {
    display:        flex;
    flex-direction: column;
    position:       absolute;
    top:            100%;
    left:           0;
    right:          0;
    background:     var(--c-darker);
    border-top:     1px solid var(--c-white-12);
    padding:        0.5rem 0;
    z-index:        200;
    gap:            0;
    opacity:        0;
    visibility:     hidden;
    transform:      translateY(-10px);
    transition:     opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
    pointer-events: none;
  }

  .navbar__menu.is-open {
    opacity:        1;
    visibility:     visible;
    transform:      translateY(0);
    pointer-events: auto;
  }

  .navbar__menu .navbar__item {
    border-bottom: 1px solid var(--c-white-12);
  }

  .navbar__menu .navbar__link {
    display:   block;
    padding:   0.85rem var(--container-px);
    font-size: 0.85rem;
  }

  .navbar__menu .navbar__contact-link {
    margin-left:     0;
    border:          none;
    padding:         0.85rem var(--container-px);
    font-size:       1.2rem;
    background:      transparent;
    clip-path:       none;
    overflow:        visible;
  }

  .navbar__menu .navbar__contact-link::before,
  .navbar__menu .navbar__contact-link::after {
    display: none;
  }

  .navbar__lang-selector {
    display: none;
  }

  .navbar__hamburger {
    display: flex;
  }

  .navbar__toggle-cb {
    display: none;
  }

  .hero__cta-group {
    flex-direction: column;
    align-items:    flex-start;
  }

  .hero__diagonal {
    height:    30%;
    clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
  }

  .about__inner {
    flex-direction: column;
    gap:            2rem;
  }

  .about__left { flex: none; }

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

  .service-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .showcase__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "metric"
      "quote"
      "kpi"
      "brand"
      "video";
  }

  .card--kpi { min-height: 520px; }

  .kpi__label { font-size: 1.625rem; }

  .trusted__logos-track {
    animation-duration: 20s;
  }

  .case-card {
    flex:      0 0 85vw;
    max-width: 360px;
  }

  .faqs__wrap {
    flex-direction: column;
    gap: 2.5rem;
  }

  .faqs__header {
    flex: none;
  }

  .faqs__question {
    font-size: 1rem;
  }

  .faq__title::after {
    width: 60px;
    left: 0;
  }

  .contact__inner {
    grid-template-columns: 1fr;
    gap:                   2rem;
    padding-bottom:        10rem;
  }

  .contact__brand-block { display: none; }

  .contact__diagonal {
    clip-path:    polygon(0 70%, 100% 0, 100% 100%, 0 100%);
    height:       28%;
    padding-left: 2rem;
    padding-right: 2rem;
    justify-content: flex-end;
  }

  .contact__cta-text {
    font-size: 1.2rem;
  }

  .case-modal__inner {
    grid-template-columns: 1fr;
    max-height:            90vh;
    overflow-y:            auto;
  }

  .case-modal__image-block {
    aspect-ratio: 16 / 9;
    height:       auto;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap:                   2rem;
    padding-bottom:        3rem;
  }

  .footer__brand-bar {
    padding-top:    3rem;
    padding-bottom: 2rem;
  }

  .footer__right {
    grid-template-columns: 1fr 1fr;
    border-left:   none;
    padding-left:  0;
    border-top:    1px solid rgba(255, 255, 255, 0.06);
    padding-top:   2rem;
  }

  .footer__legal-inner {
    flex-direction: column;
    align-items:    flex-start;
    gap:            0.75rem;
  }

  /* Contact panel — mobile: full width */
  .contact-panel {
    width:     100%;
    min-width: 0;
    max-width: none;
  }

  .contact-panel__inner {
    padding: 0.5rem 1.5rem 3rem;
  }

  .contact-panel__close {
    margin-left: 1rem;
  }

  .contact-panel__heading {
    font-size: 1.5rem;
  }

}