/* =========================================
   VARIABLES
========================================= */

:root {

  --blue: #1d3e70;

  --yellow: #e96f00;

  --yellow: #ffc34d;

  --dark: #171717;

  --white: #ffffff;

  --off-white: #f6f4ef;

  --max-width: 1260px;

}



/* =========================================
   RESET
========================================= */

* {

  box-sizing: border-box;

}


html {

  scroll-behavior: smooth;

}


body {

  margin: 0;

  background:
    var(--off-white);

  color:
    var(--dark);

  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

  line-height: 1.6;

  -webkit-font-smoothing:
    antialiased;

}


img {

  display: block;

  max-width: 100%;

}


p {

  margin-top: 0;

}



/* =========================================
   GLOBAL CONTAINER
========================================= */

.container {

  width:
    min(
      calc(100% - 80px),
      var(--max-width)
    );

  margin:
    0 auto;

}



/* =========================================
   HERO
========================================= */

.hero {

  position: relative;

  /*
    La section est volontairement haute.

    100vh :
    logo seul

    puis environ 130vh :
    texte qui passe par-dessus le logo
  */

  height: 230vh;

  background:
    var(--off-white);

}



/* =========================================
   LOGO STICKY BACKGROUND
========================================= */

.hero-logo-layer {

  position: sticky;

  top: 0;

  width: 100%;

  height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  z-index: 1;

  pointer-events: none;

}



.hero-logo {

  /*
    Logo volontairement grand
    sur le premier écran.
  */

  width:
    min(
      82vw,
      1150px
    );

  max-height:
    90vh;

  object-fit:
    contain;


  /*
    État initial.
    Le JS modifiera ensuite
    filter / opacity / transform.
  */

  opacity: 1;

  filter:
    blur(0);

  transform:
    scale(1);


  /*
    Optimisation animation
  */

  will-change:
    opacity,
    filter,
    transform;


  transition:
    opacity 0.05s linear,
    filter 0.05s linear,
    transform 0.05s linear;

}



/* =========================================
   CONTENT LAYER
========================================= */

.hero-content-layer {

  position: absolute;

  left: 0;

  width: 100%;


  /*
    Le texte commence après
    plus d'un écran complet.

    Au chargement,
    seul le logo est visible.
  */

  top: 105vh;


  z-index: 2;

}



/* =========================================
   HERO CONTENT
========================================= */

.hero-content {

  min-height:
    125vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  padding:

    100px
    0
    140px;

}


/* =========================================

   EYEBROW

========================================= */

.eyebrow {

  margin-bottom:

    28px;

  color:

    var(--blue);

  font-size:

    26px;

  font-weight:

    800;

  letter-spacing:

    0.14em;

  text-transform:

    uppercase;

  text-align:

    center;

}



/* =========================================
   HERO TITLE
========================================= */

.hero h1 {

  max-width:
    1100px;

  margin:

    0
    auto
    40px;

  color:
    var(--blue);

  font-size:

    clamp(
      70px,
      8.5vw,
      132px
    );

  line-height:
    0.88;

  letter-spacing:
    -0.065em;

  text-align:
    center;

}



.hero h1 span {

  display:
    block;

}



/* =========================================
   HERO LEAD
========================================= */

.hero-lead {

  max-width:
    800px;

  margin:

    0
    auto
    32px;

  font-size:
    23px;

  line-height:
    1.5;

  font-weight:
    500;

  text-align:
    center;

}



/* =========================================
   HERO DETAILS
========================================= */

.hero-details {

  display: flex;

  flex-direction: column;

  text-align: justify;

  align-items: center;

  gap:
    22px;

  width: 100%;

  max-width:
    750px;

  margin:
    0 auto;

  text-align:
    center;

}



.hero-details p {

  margin-bottom:
    0;

  font-size:
    20px;

  line-height:
    1.65;

}



.hero-description {

  max-width:
    750px;

  text-align: justify;

}



.hero-location {

  color:
    var(--blue);

  font-weight:
    800;

  text-align:
    center;

}



/* =========================================
   HERO TAGS
========================================= */

.hero-tags {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap:
    10px;

  margin-top:
    45px;

}



.hero-tags span {

  padding:

    9px
    14px;

  border:

    1px
    solid
    rgba(
      29,
      62,
      112,
      0.35
    );

  color:
    var(--blue);

  background:
    rgba(
      246,
      244,
      239,
      0.45
    );

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;

}



/* =========================================
   RESPONSIVE TABLET
========================================= */

@media
(
  max-width: 900px
) {


  .container {

    width:
      min(
        calc(100% - 40px),
        var(--max-width)
      );

  }



  .hero {

    height:
      225vh;

  }



  .hero-logo {

    width:
      92vw;

    max-height:
      86vh;

  }



  .hero-content-layer {

    top:
      103vh;

  }



  .hero-content {

    min-height:
      122vh;

    padding:

      90px
      0
      120px;

  }



  .hero h1 {

    max-width:
      850px;

    font-size:

      clamp(
        58px,
        14vw,
        92px
      );

  }



  .hero-lead {

    max-width:
      700px;

    font-size:
      20px;

  }



  .hero-details {

    max-width:
      650px;

    gap:
      24px;

  }



  .hero-tags {

    margin-top:
      40px;

  }

}



/* =========================================
   RESPONSIVE MOBILE
========================================= */

@media
(
  max-width: 600px
) {


  .container {

    width:
      calc(100% - 32px);

  }



  .hero {

    height:
      220vh;

  }



  .hero-logo {

    width:
      96vw;

    max-height:
      82vh;

  }



  .hero-content-layer {

    top:
      102vh;

  }



  .hero-content {

    min-height:
      118vh;

    padding:

      75px
      0
      100px;

  }



  .eyebrow {

    font-size:
      10px;

    letter-spacing:
      0.12em;

  }



  .hero h1 {

    max-width:
      100%;

    margin-bottom:
      30px;

    font-size:

      clamp(
        50px,
        15vw,
        76px
      );

    line-height:
      0.92;

  }



  .hero-lead {

    max-width:
      100%;

    font-size:
      20px;

    line-height:
      1.5;

  }



  .hero-details {

    max-width:
      100%;

    gap:
      22px;

  }



  .hero-details p {

    font-size:
      16px;

  }



  .hero-tags {

    justify-content:
      center;

    margin-top:
      38px;

  }



  .hero-tags span {

    font-size:
      10px;

    padding:

      8px
      11px;

  }

}

/* =========================================
   RF COORDINATION SECTION
========================================= */

.rf-coordination {

  position: relative;

  z-index: 5;

  padding:
    130px
    0
    110px;

  background:
    var(--blue);

  color:
    var(--white);

}



/* =========================================
   SECTION HEADER
========================================= */

.rf-section-header {

  max-width:
    1050px;

  margin-bottom:
    90px;

}



.rf-section-number {

  margin-bottom:
    28px;

  color:
    var(--yellow);

  font-size:
    14px;

  font-weight:
    800;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;

}



.rf-section-header h2 {

  max-width:
    1050px;

  margin:
    0
    0
    45px;

  color:
    var(--white);

  font-size:

    clamp(
      65px,
      7vw,
      108px
    );

  line-height:
    0.92;

  letter-spacing:
    -0.055em;

}



.rf-section-header h2 span {

  display:
    block;

  color:
    var(--yellow);

}



.rf-section-intro {

  max-width:
    780px;

  margin-bottom:
    0;

  color:
    rgba(
      255,
      255,
      255,
      0.88
    );

  font-size:
    21px;

  line-height:
    1.55;

}



/* =========================================
   EXPERTISE GRID
========================================= */

.rf-expertise-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

  gap:
    0;

  border-top:

    1px
    solid
    rgba(
      255,
      255,
      255,
      0.25
    );

  border-bottom:

    1px
    solid
    rgba(
      255,
      255,
      255,
      0.25
    );

}



/* =========================================
   EXPERTISE ITEM
========================================= */

.rf-expertise-item {

  position:
    relative;

  min-height:
    390px;

  padding:

    35px
    32px
    40px;

}



.rf-expertise-item:not(:last-child) {

  border-right:

    1px
    solid
    rgba(
      255,
      255,
      255,
      0.25
    );

}



/* =========================================
   EXPERTISE NUMBER
========================================= */

.rf-expertise-number {

  display:
    block;

  margin-bottom:
    65px;

  color:
    var(--yellow);

  font-size:
    13px;

  font-weight:
    800;

  letter-spacing:
    0.1em;

}



/* =========================================
   EXPERTISE TITLE
========================================= */

.rf-expertise-item h3 {

  margin:

    0
    0
    24px;

  color:
    var(--white);

  font-size:
    29px;

  line-height:
    1.08;

  letter-spacing:
    -0.025em;

}



/* =========================================
   EXPERTISE TEXT
========================================= */

.rf-expertise-item p {

  max-width:
    270px;

  margin-bottom:
    0;

  color:

    rgba(
      255,
      255,
      255,
      0.75
    );

  font-size:
    20px;

  line-height:
    1.65;

}



/* =========================================
   FINAL STATEMENT
========================================= */

.rf-statement {

  padding-top:
    100px;

  padding-bottom:
    20px;

}



.rf-statement p {

  max-width:
    1100px;

  margin:
    0;

  color:
    var(--white);

  font-size:

    clamp(
      46px,
      5.5vw,
      82px
    );

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    -0.045em;

}



.rf-statement p span {

  color:
    var(--yellow);

}



/* =========================================
   RF COORDINATION — TABLET
========================================= */

@media
(
  max-width: 1000px
) {


  .rf-coordination {

    padding:

      100px
      0
      90px;

  }



  .rf-section-header {

    margin-bottom:
      70px;

  }



  .rf-section-header h2 {

    font-size:

      clamp(
        55px,
        9vw,
        82px
      );

  }



  .rf-expertise-grid {

    grid-template-columns:

      repeat(
        2,
        1fr
      );

  }



  .rf-expertise-item {

    min-height:
      340px;

  }



  .rf-expertise-item:nth-child(2) {

    border-right:
      none;

  }



  .rf-expertise-item:nth-child(-n+2) {

    border-bottom:

      1px
      solid
      rgba(
        255,
        255,
        255,
        0.25
      );

  }



  .rf-expertise-number {

    margin-bottom:
      45px;

  }

}



/* =========================================
   RF COORDINATION — MOBILE
========================================= */

@media
(
  max-width: 600px
) {


  .rf-coordination {

    padding:

      80px
      0
      70px;

  }



  .rf-section-header {

    margin-bottom:
      55px;

  }



  .rf-section-number {

    font-size:
      11px;

    margin-bottom:
      22px;

  }



  .rf-section-header h2 {

    margin-bottom:
      32px;

    font-size:

      clamp(
        48px,
        14vw,
        68px
      );

  }



  .rf-section-intro {

    font-size:
      18px;

  }



  .rf-expertise-grid {

    grid-template-columns:
      1fr;

  }



  .rf-expertise-item {

    min-height:
      auto;

    padding:

      32px
      0
      40px;

    border-right:
      none !important;

    border-bottom:

      1px
      solid
      rgba(
        255,
        255,
        255,
        0.25
      );

  }



  .rf-expertise-item:last-child {

    border-bottom:
      none;

  }



  .rf-expertise-number {

    margin-bottom:
      28px;

  }



  .rf-expertise-item h3 {

    font-size:
      27px;

  }



  .rf-expertise-item p {

    max-width:
      100%;

  }



  .rf-statement {

    padding-top:
      70px;

  }



  .rf-statement p {

    font-size:

      clamp(
        42px,
        12vw,
        60px
      );

  }



  .rf-statement p span {

    display:
      block;

  }

}

/* =========================================
   INTERCOM & COMMUNICATIONS
========================================= */

.intercom-section {

  position:
    relative;

  z-index:
    5;

  padding:
    140px
    0
    120px;

  background:
    var(--off-white);

  color:
    var(--dark);

}



/* =========================================
   HEADER
========================================= */

.intercom-header {

  max-width:
    1050px;

  margin-bottom:
    100px;

}



.intercom-label {

  margin-bottom:
    28px;

  color:
    var(--yellow);

  font-size:
    14px;

  font-weight:
    800;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;

}



.intercom-header h2 {

  max-width:
    1100px;

  margin:
    0
    0
    45px;

  color:
    var(--blue);

  font-size:
    clamp(
      70px,
      8vw,
      120px
    );

  line-height:
    0.9;

  letter-spacing:
    -0.06em;

}



.intercom-header h2 span {

  display:
    block;

  color:
    var(--yellow);

}



.intercom-intro {

  max-width:
    800px;

  margin:
    0;

  font-size:
    21px;

  line-height:
    1.6;

}



/* =========================================
   INTERCOM GRID
   Même structure que RF Coordination
========================================= */

.intercom-grid {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 0;

  border-top:
    1px solid
    rgba(29, 62, 112, 0.30);

  border-bottom:
    1px solid
    rgba(29, 62, 112, 0.30);

}


/* =========================================
   INTERCOM ITEM
========================================= */

.intercom-item {

  position: relative;

  min-height: 390px;

  padding:
    35px
    32px
    40px;

}


/* Séparateurs verticaux */

.intercom-item:not(:last-child) {

  border-right:
    1px solid
    rgba(29, 62, 112, 0.30);

}


/* =========================================
   NUMBER
========================================= */

.intercom-number {

  display: block;

  margin-bottom: 65px;

  color: var(--yellow-dark);

  font-size: 13px;

  font-weight: 800;

  letter-spacing: 0.1em;

}


/* =========================================
   TITLE
========================================= */

.intercom-item h3 {

  margin:
    0
    0
    24px;

  color: var(--blue);

  font-size: 29px;

  line-height: 1.08;

  letter-spacing: -0.025em;

}


/* =========================================
   TEXT
========================================= */

.intercom-item p {

  max-width: 270px;

  margin-bottom: 0;

  color: var(--dark);

  font-size: 20px;

  line-height: 1.65;

}



/* =========================================
   ITEM NUMBER
========================================= */

.intercom-number {

  display:
    block;

  margin-bottom:
    55px;

  color:
    var(--yellow);

  font-size:
    13px;

  font-weight:
    800;

  letter-spacing:
    0.1em;

}



/* =========================================
   ITEM TITLE
========================================= */

.intercom-item h3 {

  max-width:
    430px;

  margin:
    0
    0
    22px;

  color:
    var(--blue);

  font-size:
    34px;

  line-height:
    1.05;

  letter-spacing:
    -0.035em;

}



/* =========================================
   ITEM TEXT
========================================= */

.intercom-item p {

  max-width:
    470px;

  margin:
    0;

  font-size:
    20px;

  line-height:
    1.65;

}



/* =========================================
   PLATFORMS
========================================= */

.intercom-platforms {

  padding:
    80px
    0;

  border-bottom:
    1px
    solid
    rgba(
      29,
      62,
      112,
      0.3
    );

}



.intercom-platforms > p {

  margin-bottom:
    25px;

  color:
    var(--dark);

  font-size:
    20px;

}



.intercom-platform-list {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    20px;

}



.intercom-platform-list span {

  padding:
    12px
    18px;

  border:
    1px
    solid
    rgba(
      29,
      62,
      112,
      0.45
    );

  color:
    var(--blue);

  font-size:
    13px;

  font-weight:
    800;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;

}



/* =========================================
   STATEMENT
========================================= */

.intercom-statement {

  padding-top:
    100px;

}



.intercom-statement p {

  max-width:
    1150px;

  margin:
    0;

  color:
    var(--blue);

  font-size:
    clamp(
      48px,
      5.5vw,
      84px
    );

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    -0.05em;

}



.intercom-statement p span {

  color:
    var(--yellow);

}



/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

  .intercom-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }


  .intercom-item {

    min-height: 340px;

  }


  .intercom-item:nth-child(2) {

    border-right: none;

  }


  .intercom-item:nth-child(-n+2) {

    border-bottom:
      1px solid
      rgba(29, 62, 112, 0.30);

  }


  .intercom-number {

    margin-bottom: 45px;

  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

  .intercom-grid {

    grid-template-columns: 1fr;

  }


  .intercom-item {

    min-height: auto;

    padding:
      32px
      0
      40px;

    border-right: none !important;

    border-bottom:
      1px solid
      rgba(29, 62, 112, 0.30);

  }


  .intercom-item:last-child {

    border-bottom: none;

  }


  .intercom-number {

    margin-bottom: 28px;

  }


  .intercom-item h3 {

    font-size: 27px;

  }


  .intercom-item p {

    max-width: 100%;

  }

}



/* =========================================
   MOBILE
========================================= */

@media
(
  max-width: 600px
) {

  .intercom-section {

    padding:
      80px
      0
      70px;

  }


  .intercom-label {

    font-size:
      11px;

  }


  .intercom-header h2 {

    font-size:
      clamp(
        48px,
        14vw,
        68px
      );

  }


  .intercom-intro {

    font-size:
      18px;

  }


  .intercom-item h3 {

    font-size:
      29px;

  }


  .intercom-platforms {

    padding:
      60px
      0;

  }


  .intercom-statement {

    padding-top:
      70px;

  }


  .intercom-statement p {

    font-size:
      clamp(
        42px,
        12vw,
        60px
      );

  }


  .intercom-statement p span {

    display:
      block;

  }

}

/* =========================================
   RF TRANSMISSION
========================================= */

.rf-transmission-section {
  background: var(--blue);
  color: var(--white);
  padding: 140px 0 120px;
}


/* =========================================
   RF TRANSMISSION HEADER
========================================= */

.rf-transmission-header {
  max-width: 900px;
  margin-bottom: 90px;
}


.rf-transmission-label {
  margin: 0 0 28px;
  color: var(--yellow);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}


.rf-transmission-header h2 {
  max-width: 900px;
  margin: 0 0 42px;

  color: var(--white);

  font-size: clamp(
    64px,
    7vw,
    110px
  );

  line-height: 0.92;
  letter-spacing: -0.055em;
}


.rf-transmission-header h2 span {
  display: block;
  color: var(--yellow);
}


.rf-transmission-intro {
  max-width: 760px;
  margin: 0 0 24px;

  color: rgba(
    255,
    255,
    255,
    0.82
  );

  font-size: 20px;
  line-height: 1.6;
}


.rf-transmission-intro:last-child {
  margin-bottom: 0;
}


/* =========================================
   RF TRANSMISSION GRID
========================================= */

.rf-transmission-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  margin-top: 70px;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.3
    );

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.3
    );
}


.rf-transmission-item {
  min-height: 320px;

  padding:
    34px
    34px
    42px;

  border-right:
    1px solid
    rgba(
      255,
      255,
      255,
      0.3
    );
}


.rf-transmission-item:first-child {
  padding-left: 28px;
}


.rf-transmission-item:last-child {
  border-right: 0;
}


.rf-transmission-number {
  display: block;

  margin-bottom: 58px;

  color: var(--yellow);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}


.rf-transmission-item h3 {
  margin:
    0
    0
    24px;

  color:
    var(--white);

  font-size:
    25px;

  line-height:
    1.05;

  letter-spacing:
    -0.03em;
}


.rf-transmission-item p {
  margin: 0;

  color:
    rgba(
      255,
      255,
      255,
      0.72
    );

  font-size:
    20px;

  line-height:
    1.6;
}


/* =========================================
   RF TRANSMISSION STATEMENT
========================================= */

.rf-transmission-statement {
  margin-top: 90px;
}


.rf-transmission-statement p {
  max-width: 1100px;

  margin: 0;

  color:
    var(--white);

  font-size:
    clamp(
      48px,
      5.5vw,
      84px
    );

  font-weight:
    800;

  line-height:
    0.98;

  letter-spacing:
    -0.05em;
}


.rf-transmission-statement span {
  color:
    var(--yellow);
}


/* =========================================
   RF TRANSMISSION — TABLET
========================================= */

@media (max-width: 900px) {

  .rf-transmission-section {
    padding:
      100px
      0
      90px;
  }


  .rf-transmission-header {
    margin-bottom:
      65px;
  }


  .rf-transmission-header h2 {
    font-size:
      clamp(
        56px,
        11vw,
        88px
      );
  }


  .rf-transmission-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .rf-transmission-item {
    min-height:
      280px;

    border-bottom:
      1px solid
      rgba(
        255,
        255,
        255,
        0.3
      );
  }


  .rf-transmission-item:nth-child(2) {
    border-right:
      0;
  }


  .rf-transmission-item:nth-child(3),
  .rf-transmission-item:nth-child(4) {
    border-bottom:
      0;
  }


  .rf-transmission-statement {
    margin-top:
      70px;
  }

}


/* =========================================
   RF TRANSMISSION — MOBILE
========================================= */

@media (max-width: 600px) {

  .rf-transmission-section {
    padding:
      80px
      0
      70px;
  }


  .rf-transmission-header {
    margin-bottom:
      50px;
  }


  .rf-transmission-header h2 {
    margin-bottom:
      32px;

    font-size:
      clamp(
        48px,
        15vw,
        68px
      );
  }


  .rf-transmission-intro {
    font-size:
      16px;
  }


  .rf-transmission-grid {
    grid-template-columns:
      1fr;

    margin-top:
      50px;
  }


  .rf-transmission-item,
  .rf-transmission-item:first-child {
    min-height:
      auto;

    padding:
      30px
      0
      38px;

    border-right:
      0;

    border-bottom:
      1px solid
      rgba(
        255,
        255,
        255,
        0.3
      );
  }


  .rf-transmission-item:last-child {
    border-bottom:
      0;
  }


  .rf-transmission-number {
    margin-bottom:
      30px;
  }


  .rf-transmission-item h3 {
    font-size:
      23px;
  }


  .rf-transmission-statement {
    margin-top:
      60px;
  }


  .rf-transmission-statement p {
    font-size:
      clamp(
        42px,
        12vw,
        60px
      );
  }


  .rf-transmission-statement span {
    display:
      block;
  }

}

/* =========================================
   EXPERIENCE
========================================= */

.experience-section {

  position:
    relative;

  z-index:
    5;

  padding:
    140px
    0
    120px;

  background:
    var(--off-white);

  color:
    var(--dark);

}



/* =========================================
   EXPERIENCE HEADER
========================================= */

.experience-header {

  max-width:
    1000px;

  margin-bottom:
    100px;

}


.experience-label {

  margin:
    0
    0
    28px;

  color:
    var(--yellow-dark);

  font-size:
    14px;

  font-weight:
    800;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;

}


.experience-header h2 {

  max-width:
    1050px;

  margin:
    0
    0
    45px;

  color:
    var(--blue);

  font-size:
    clamp(
      68px,
      7.5vw,
      120px
    );

  line-height:
    0.92;

  letter-spacing:
    -0.055em;

}


.experience-header h2 span {

  display:
    block;

  color:
    var(--yellow-dark);

}


.experience-intro {

  max-width:
    800px;

  margin:
    0
    0
    24px;

  font-size:
    20px;

  line-height:
    1.65;

}


.experience-intro:last-child {

  margin-bottom:
    0;

}



/* =========================================
   10+ YEARS
========================================= */

.experience-years {

  display:
    flex;

  align-items:
    flex-end;

  gap:
    35px;

  padding:
    60px
    0;

  border-top:
    1px solid
    rgba(
      29,
      62,
      112,
      0.30
    );

  border-bottom:
    1px solid
    rgba(
      29,
      62,
      112,
      0.30
    );

}


.experience-years-number {

  color:
    var(--blue);

  font-size:
    clamp(
      120px,
      18vw,
      250px
    );

  font-weight:
    800;

  line-height:
    0.72;

  letter-spacing:
    -0.08em;

}


.experience-years-text {

  display:
    flex;

  flex-direction:
    column;

  padding-bottom:
    8px;

  color:
    var(--blue);

  font-weight:
    800;

  line-height:
    1.05;

}


.experience-years-text span:first-child {

  color:
    var(--yellow-dark);

  font-size:
    clamp(
      24px,
      3vw,
      42px
    );

}


.experience-years-text span:last-child {

  font-size:
    clamp(
      24px,
      3vw,
      42px
    );

}



/* =========================================
   SELECTED EXPERIENCE
========================================= */

.selected-experience {

  padding-top:
    100px;

}


.selected-experience-label {

  margin:
    0
    0
    35px;

  color:
    var(--yellow-dark);

  font-size:
    13px;

  font-weight:
    800;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;

}



/* =========================================
   PROJECT GRID
========================================= */

.experience-projects-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  border-top:
    1px solid
    rgba(
      29,
      62,
      112,
      0.30
    );

}


.experience-project {

  min-height:
    180px;

  padding:
    38px
    45px
    42px
    0;

  border-bottom:
    1px solid
    rgba(
      29,
      62,
      112,
      0.30
    );

}


.experience-project:nth-child(odd) {

  border-right:
    1px solid
    rgba(
      29,
      62,
      112,
      0.30
    );

}


.experience-project:nth-child(even) {

  padding-left:
    45px;

}


.experience-project h3 {

  margin:
    0
    0
    12px;

  color:
    var(--blue);

  font-size:
    clamp(
      28px,
      3vw,
      42px
    );

  line-height:
    1;

  letter-spacing:
    -0.035em;

}


.experience-project p {

  margin:
    0;

  color:
    var(--dark);

  font-size:
    20px;

  line-height:
    1.5;

}



/* =========================================
   COLLABORATIONS
========================================= */

.experience-collaborations {

  padding-top:
    80px;

}


.experience-collaborations-label {

  margin:
    0
    0
    24px;

  color:
    var(--yellow-dark);

  font-size:
    13px;

  font-weight:
    800;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;

}


.experience-collaboration-list {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;

}


.experience-collaboration-list span {

  padding:
    11px
    16px;

  border:
    1px solid
    rgba(
      29,
      62,
      112,
      0.40
    );

  color:
    var(--blue);

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;

}



/* =========================================
   CONTACT
========================================= */

.contact-section {

  position:
    relative;

  z-index:
    5;

  padding:
    130px
    0
    40px;

  background:
    var(--blue);

  color:
    var(--white);

}



/* =========================================
   CONTACT MAIN
========================================= */

.contact-main {

  max-width:
    1150px;

}


.contact-label {

  margin:
    0
    0
    30px;

  color:
    var(--yellow);

  font-size:
    14px;

  font-weight:
    800;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;

}


.contact-main h2 {

  margin:
    0;

  color:
    var(--white);

  font-size:
    clamp(
      70px,
      8vw,
      125px
    );

  line-height:
    0.88;

  letter-spacing:
    -0.06em;

}


.contact-main h2 span {

  display:
    block;

  color:
    var(--yellow);

}



/* =========================================
   CONTACT BOTTOM
========================================= */

.contact-bottom {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    50px;

  margin-top:
    100px;

  padding:
    45px
    0;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.30
    );

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.30
    );

}


.contact-location p {

  margin:
    0;

  color:
    rgba(
      255,
      255,
      255,
      0.80
    );

  font-size:
    16px;

  line-height:
    1.5;

}


.contact-email a {

  color:
    var(--white);

  font-size:
    clamp(
      25px,
      4vw,
      52px
    );

  font-weight:
    700;

  letter-spacing:
    -0.035em;

  text-decoration:
    none;

}


.contact-email a:hover {

  color:
    var(--yellow);

}



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

.contact-footer {

  display:
    flex;

  justify-content:
    space-between;

  gap:
    30px;

  padding-top:
    30px;

}


.contact-footer p {

  margin:
    0;

  color:
    rgba(
      255,
      255,
      255,
      0.60
    );

  font-size:
    11px;

  letter-spacing:
    0.04em;

}



/* =========================================
   EXPERIENCE — TABLET
========================================= */

@media
(
  max-width: 900px
) {

  .experience-section {

    padding:
      100px
      0
      90px;

  }


  .experience-header {

    margin-bottom:
      75px;

  }


  .experience-years {

    gap:
      25px;

  }


  .experience-projects-grid {

    grid-template-columns:
      1fr;

  }


  .experience-project,
  .experience-project:nth-child(odd),
  .experience-project:nth-child(even) {

    min-height:
      auto;

    padding:
      32px
      0
      36px;

    border-right:
      none;

  }


  .contact-section {

    padding:
      100px
      0
      35px;

  }


  .contact-bottom {

    flex-direction:
      column;

    align-items:
      flex-start;

  }

}



/* =========================================
   EXPERIENCE — MOBILE
========================================= */

@media
(
  max-width: 600px
) {

  .experience-section {

    padding:
      80px
      0
      70px;

  }


  .experience-header h2 {

    font-size:
      clamp(
        48px,
        14vw,
        68px
      );

  }


  .experience-intro {

    font-size:
      20px;

  }


  .experience-years {

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      25px;

    padding:
      45px
      0;

  }


  .experience-years-number {

    font-size:
      clamp(
        110px,
        35vw,
        170px
      );

  }


  .selected-experience {

    padding-top:
      70px;

  }


  .experience-project h3 {

    font-size:
      30px;

  }


  .experience-collaborations {

    padding-top:
      60px;

  }
}

/* =========================================
   CONTACT
========================================= */

.contact-section {
  position: relative;
  z-index: 5;

  padding:
    120px
    0
    35px;

  background: var(--blue);
  color: var(--white);
}


/* =========================================
   CONTACT MAIN
========================================= */

.contact-main {
  max-width: 1150px;
}


.contact-main > .contact-label {
  margin: 0 0 30px;

  color: var(--yellow);

  font-size: 14px;
  font-weight: 800;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}


.contact-main h2 {
  margin: 0;

  color: var(--white);

  font-size:
    clamp(
      70px,
      8vw,
      125px
    );

  line-height: 0.88;

  letter-spacing: -0.06em;
}


.contact-main h2 span {
  display: block;

  color: var(--yellow);
}


/* =========================================
   CONTACT LINE
========================================= */

.contact-line {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 50px;

  margin-top: 100px;

  padding:
    45px
    0;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.3);

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.3);
}


/* =========================================
   LOCATION
========================================= */

.contact-location {
  display: flex;

  gap: 8px;

  color: var(--white);

  font-size: 17px;

  font-weight: 500;
}


.contact-location .highlight {
  color: var(--yellow);

  font-weight: 700;
}


/* =========================================
   CONTACT LINK
========================================= */

.contact-link {
  display: flex;

  align-items: center;

  gap: 16px;

  color: var(--white);

  text-decoration: none;
}


.contact-email {
    color: var(--yellow);

  font-size: 20px;

  font-weight: 800;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}


.contact-arrow {
  color: var(--yellow);

  font-size: 32px;

  align-items: center;

  transition:
    transform
    0.2s
    ease;
}


.contact-link:hover .contact-arrow {
  transform:
    translateX(8px);
}


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

.contact-footer {
  display: flex;

  justify-content: space-between;

  gap: 30px;

  padding-top: 28px;
}


.contact-footer p {
  margin: 0;

  color:
    rgba(
      255,
      255,
      255,
      0.55
    );

  font-size: 18px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 700px) {

  .contact-section {
    padding:
      80px
      0
      30px;
  }


  .contact-main h2 {
    font-size:
      clamp(
        48px,
        14vw,
        70px
      );
  }


  .contact-line {
    flex-direction: column;

    align-items: flex-start;

    gap: 32px;

    margin-top: 70px;

    padding:
      38px
      0;
  }


  .contact-location {
    flex-direction: column;

    gap: 0;
  }


  .contact-link {
    flex-wrap: wrap;

    gap:
      10px
      14px;

    
  }


  .contact-link-label {
    width: 100%;
    font-size: 24;
  }


  .contact-email {
    font-size:
      clamp(
        23px,
        7vw,
        32px
      );
  }


  .contact-footer {
    flex-direction: column;

    gap: 8px;
  }
}


/* =========================================
   HERO CONTENT CARD
========================================= */

.hero-content-card {

  width: 100%;
  max-width: 1050px;

  padding:
    70px
    70px
    60px;

  background:
    rgba(
      246,
      244,
      239,
      0.90
    );

  border:
    1px solid
    rgba(
      29,
      62,
      112,
      0.18
    );

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  box-shadow:
    0
    20px
    60px
    rgba(
      29,
      62,
      112,
      0.12
    );

}

@media (max-width: 600px) {

  .hero-content-card {

    padding:
      40px
      22px
      35px;

  }

}