/* =========================================================
   REDOVAR — CONTACT
========================================================= */


/* =========================================================
   BASE
========================================================= */

.contact-page {
  background:
    #FFFFFF;

  color:
    var(--light-text);
}


.contact-main {
  min-height:
    100vh;

  padding-top:
    var(--header-h);

  overflow:
    clip;
}


.contact-main h1,
.contact-main h2,
.contact-main p {
  text-wrap:
    pretty;
}


/* =========================================================
   QUIET REVEALS
========================================================= */

.contact-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 450ms ease,
    transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


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

.contact-hero {
  padding:
    clamp(
      96px,
      8vw,
      132px
    )
    0
    clamp(
      58px,
      5vw,
      76px
    );

  background:
    #FFFFFF;
}


.contact-hero-inner {
  display:
    flex;

  justify-content:
    center;
}


.contact-hero-copy {
  width:
    min(
      100%,
      1040px
    );

  margin-inline:
    auto;

  text-align:
    center;
}


.contact-hero h1 {
  margin:
    0;

  color:
    var(--light-text);

  font-size:
    clamp(
      60px,
      6.3vw,
      96px
    );

  line-height:
    .92;

  letter-spacing:
    -.064em;

  font-weight:
    500;
}


.contact-hero p {
  margin:
    28px
    auto
    0;

  max-width:
    580px;

  color:
    var(--light-secondary);

  font-size:
    clamp(
      16px,
      1.25vw,
      18px
    );

  line-height:
    1.66;
}


/* =========================================================
   OPTIONS
========================================================= */

.contact-options {
  --contact-left-x:
    -18px;

  --contact-right-x:
    18px;

  padding:
    0
    0
    clamp(
      92px,
      8vw,
      128px
    );

  background:
    #FFFFFF;
}


/* =========================================================
   CARD GRID
========================================================= */

.contact-card-grid {
  display:
    grid;

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

  gap:
    14px;
}


/* =========================================================
   CARD
========================================================= */

.contact-card {
  --contact-card-x:
    0px;

  --contact-card-y:
    0px;

  position:
    relative;

  min-height:
    clamp(
      390px,
      34vw,
      470px
    );

  overflow:
    hidden;

  border-radius:
    4px;

  background:
    #111111;

  transform:
    translate3d(
      var(--contact-card-x),
      var(--contact-card-y),
      0
    );

  will-change:
    transform;

  isolation:
    isolate;

  transition:
    transform
    90ms
    linear;
}


.contact-card:first-child {
  --contact-card-x:
    var(--contact-left-x);
}


.contact-card:last-child {
  --contact-card-x:
    var(--contact-right-x);
}


.contact-card:hover {
  --contact-card-y:
    -4px;
}


/* =========================================================
   CARD IMAGE
========================================================= */

.contact-card-media {
  position:
    absolute;

  z-index:
    -3;

  inset:
    0;

  overflow:
    hidden;
}


.contact-card-media img {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  object-position:
    center;

  transform:
    scale(
      1.01
    );

  transition:
    transform
    900ms
    var(--ease);
}


.contact-card:hover
.contact-card-media img {
  transform:
    scale(
      1.03
    );
}


/* =========================================================
   COLOR WASH

   Deliberately translucent.
   The photograph remains clearly visible underneath,
   like the reference treatment.
========================================================= */

.contact-card-wash {
  position:
    absolute;

  z-index:
    -2;

  inset:
    0;

  pointer-events:
    none;
}


.contact-card--sales
.contact-card-wash {
  background:
    rgba(
      195,
      72,
      17,
      .67
    );
}


.contact-card--support
.contact-card-wash {
  background:
    rgba(
      11,
      54,
      154,
      .65
    );
}


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

.contact-card-content {
  min-height:
    inherit;

  padding:
    clamp(
      32px,
      3.2vw,
      44px
    );

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  gap:
    54px;

  color:
    #FFFFFF;
}


/* =========================================================
   CARD COPY
========================================================= */

.contact-card-copy {
  max-width:
    500px;
}


.contact-card h2 {
  margin:
    0;

  max-width:
    500px;

  color:
    #FFFFFF;

  font-size:
    clamp(
      30px,
      3vw,
      44px
    );

  line-height:
    .98;

  letter-spacing:
    -.045em;

  font-weight:
    500;
}


.contact-card p {
  margin:
    16px
    0
    0;

  max-width:
    450px;

  color:
    rgba(
      255,
      255,
      255,
      .82
    );

  font-size:
    clamp(
      14px,
      1.05vw,
      16px
    );

  line-height:
    1.58;
}


/* =========================================================
   CARD ACTIONS
========================================================= */

.contact-card-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    18px;

  flex-wrap:
    wrap;
}


/* =========================================================
   CARD BUTTON
========================================================= */

.contact-card-button {
  min-height:
    44px;

  padding:
    0
    18px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    4px;

  background:
    #FFFFFF;

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    600;

  transition:
    background-color
    180ms
    ease,
    transform
    180ms
    var(--ease);
}


.contact-card--sales
.contact-card-button {
  color:
    var(--redovar-terracotta);
}


.contact-card--support
.contact-card-button {
  color:
    var(--redovar-blue);
}


.contact-card-button:hover,
.contact-card-button:focus-visible {
  background:
    #F4F4F1;

  transform:
    translateY(
      -2px
    );
}


.contact-card-button:active {
  transform:
    translateY(
      0
    );
}


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

.contact-direct {
  padding:
    clamp(
      62px,
      6vw,
      88px
    )
    0;

  background:
    var(--light-surface);
}


/* =========================================================
   DIRECT CONTACT INNER

   Questions sit above the email.
========================================================= */

.contact-direct-inner {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  text-align:
    center;
}


/* =========================================================
   DIRECT CONTACT LABEL
========================================================= */

.contact-direct-inner > span {
  color:
    var(--light-secondary);

  font-size:
    13px;

  line-height:
    1.4;
}


/* =========================================================
   DIRECT CONTACT EMAIL
========================================================= */

.contact-direct-inner a {
  position:
    relative;

  display:
    inline-block;

  padding-bottom:
    4px;

  color:
    var(--redovar-blue);

  font-size:
    15px;

  line-height:
    1.3;

  font-weight:
    550;

  transition:
    color
    180ms
    ease;
}


/* =========================================================
   EMAIL UNDERLINE

   Hidden by default.
   On hover it grows from right to left.
========================================================= */

.contact-direct-inner a::after {
  content:
    "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    0;

  height:
    1px;

  background:
    currentColor;

  transform:
    scaleX(
      0
    );

  transform-origin:
    right
    center;

  transition:
    transform
    280ms
    var(--ease);
}


/* =========================================================
   EMAIL HOVER
========================================================= */

.contact-direct-inner a:hover,
.contact-direct-inner a:focus-visible {
  color:
    rgba(
      11,
      54,
      154,
      .72
    );
}


.contact-direct-inner a:hover::after,
.contact-direct-inner a:focus-visible::after {
  transform:
    scaleX(
      1
    );
}


/* =========================================================
   RESPONSIVE — 900
========================================================= */

@media (max-width: 900px) {

  .contact-options {
    --contact-left-x:
      0px;

    --contact-right-x:
      0px;
  }


  .contact-card-grid {
    grid-template-columns:
      1fr;
  }


  .contact-card {
    min-height:
      420px;
  }

}


/* =========================================================
   RESPONSIVE — 700
========================================================= */

@media (max-width: 700px) {

  .contact-hero {
    padding:
      82px
      0
      52px;
  }


  .contact-hero h1 {
    font-size:
      clamp(
        50px,
        13.5vw,
        70px
      );
  }


  .contact-card {
    min-height:
      400px;
  }


  .contact-card-content {
    padding:
      30px;

    gap:
      48px;
  }


  .contact-card h2 {
    font-size:
      clamp(
        30px,
        8.2vw,
        42px
      );
  }

}


/* =========================================================
   RESPONSIVE — 520
========================================================= */

@media (max-width: 520px) {

  .contact-hero {
    padding:
      72px
      0
      46px;
  }


  .contact-hero h1 {
    font-size:
      clamp(
        46px,
        13vw,
        60px
      );
  }


  .contact-hero p {
    max-width:
      360px;
  }


  .contact-card-grid {
    gap:
      10px;
  }


  .contact-card {
    min-height:
      380px;
  }


  .contact-card-content {
    padding:
      26px;

    gap:
      42px;
  }


  .contact-card-actions {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      12px;
  }


  .contact-card-button {
    width:
      max-content;
  }


  .contact-direct {
    padding:
      58px
      0;
  }


  .contact-direct-inner {
    gap:
      8px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .contact-reveal {
    opacity:
      1;

    transform:
      none;

    transition:
      none;
  }


  .contact-options {
    --contact-left-x:
      0px;

    --contact-right-x:
      0px;
  }


  .contact-card,
  .contact-card-media img,
  .contact-card-button,
  .contact-direct-inner a,
  .contact-direct-inner a::after {
    transition:
      none;
  }

}