:root {
  --cc-blue: #4b9cb5;
  --cc-pale: #eaf5f7;
  --cc-ink: #251315;
  --cc-cream: #fbf7f1;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body.cc-holding {
  margin: 0;
  background: var(--cc-ink);
  color: var(--cc-ink);
  font-family: "Josefin Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.cc-shell { min-height: 100vh; padding: clamp(12px, 2vw, 28px); }

.cc-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .88fr) minmax(420px, 1.12fr);
  min-height: calc(100vh - clamp(24px, 4vw, 56px));
  overflow: hidden;
  background: var(--cc-cream);
}

.cc-image {
  position: relative;
  min-height: 680px;
  background:
    linear-gradient(180deg, rgba(37,19,21,.04), rgba(37,19,21,.45)),
    url("images/back.jpg") center / cover no-repeat;
  transform-origin: center;
}

.cc-image::after {
  content: "";
  position: absolute;
  inset: 0 -55px 0 auto;
  width: 110px;
  background: var(--cc-blue);
  clip-path: polygon(48% 0, 100% 0, 60% 100%, 0 100%);
  opacity: .92;
}

.cc-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 7vw, 112px);
}

.cc-brand { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(42px, 8vh, 90px); }
.cc-brand img { width: 54px; height: auto; }
.cc-wordmark { color: var(--cc-blue); font-size: clamp(28px, 3vw, 43px); letter-spacing: -1.8px; line-height: 1; }
.cc-wordmark span { font-weight: 300; }
.cc-wordmark strong { font-weight: 500; }

.cc-kicker {
  margin: 0 0 22px;
  color: var(--cc-blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  line-height: 1.5;
  text-transform: uppercase;
}

.cc-content h1 {
  max-width: 780px;
  margin: 0 0 28px;
  color: var(--cc-ink);
  font-size: clamp(56px, 7.5vw, 112px);
  font-weight: 300;
  letter-spacing: -4px;
  line-height: .86;
  text-align: left;
  text-transform: none;
}

.cc-lead {
  max-width: 630px;
  margin: 0 0 13px;
  font-size: clamp(19px, 1.7vw, 25px);
  font-weight: 300;
  line-height: 1.45;
}

.cc-return { margin: 0; color: var(--cc-blue); font-size: 19px; font-weight: 600; letter-spacing: .4px; }

.cc-actions { display: flex; align-items: center; gap: 28px; margin-top: 38px; }
.cc-actions a { text-decoration: none; }
.cc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 15px 25px 12px;
  border: 2px solid var(--cc-blue);
  background: var(--cc-blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.cc-button:hover, .cc-button:focus { background: transparent; color: var(--cc-blue); }
.cc-social { color: var(--cc-ink); font-size: 15px; font-weight: 600; border-bottom: 1px solid rgba(37,19,21,.3); }
.cc-social:hover, .cc-social:focus { color: var(--cc-blue); }

.cc-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
  padding-top: 65px;
  color: rgba(37,19,21,.58);
  font-size: 12px;
  letter-spacing: 1.2px;
  line-height: 1.5;
  text-transform: uppercase;
}
.cc-footer p { margin: 0; }
.cc-footer p:first-child { color: var(--cc-blue); font-weight: 700; }
.cc-footer p:first-child span + span::before { content: " / "; color: rgba(37,19,21,.3); }

@media (max-width: 880px) {
  .cc-shell { padding: 0; }
  .cc-hero { display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(250px, 34vh) auto; min-height: 100vh; }
  .cc-image {
    position: relative;
    min-height: 250px;
    opacity: 1;
    background-position: center 42%;
  }
  .cc-image::after {
    inset: auto 9vw -42px auto;
    width: 64px;
    height: 145px;
    clip-path: polygon(48% 0, 100% 0, 60% 100%, 0 100%);
  }
  .cc-content {
    min-height: 66vh;
    padding: 36px clamp(25px, 8vw, 60px) 30px;
    background: var(--cc-cream);
  }
  .cc-brand { margin-bottom: 50px; }
  .cc-content h1 { font-size: clamp(54px, 15vw, 88px); letter-spacing: -3px; }
  .cc-footer { margin-top: auto; }
}

@media (max-width: 520px) {
  .cc-actions, .cc-footer { align-items: flex-start; flex-direction: column; }
  .cc-footer { gap: 7px; padding-top: 45px; }
  .cc-brand img { width: 43px; }
  .cc-wordmark { font-size: 31px; }
  .cc-content h1 { margin-bottom: 22px; }
}

.cc-js [data-cc-reveal] {
  opacity: 0;
  will-change: opacity, transform;
}

.cc-js [data-cc-reveal="up"] { transform: translateY(42px); }
.cc-js [data-cc-reveal="left"] { transform: translateX(-58px); }
.cc-js [data-cc-reveal="image"] { transform: scale(1.14); filter: saturate(.55); }

.cc-js [data-cc-reveal].cc-in-view {
  animation: cc-reveal-up .95s cubic-bezier(.16,.8,.25,1) both;
}

.cc-js [data-cc-reveal="left"].cc-in-view {
  animation-name: cc-reveal-left;
}

.cc-js [data-cc-reveal="image"].cc-in-view {
  animation: cc-image-in 1.7s cubic-bezier(.16,.8,.25,1) both;
}

.cc-js .cc-image.cc-in-view::after {
  animation: cc-slash-in 1.05s .22s cubic-bezier(.16,.85,.25,1) both;
}

.cc-js .cc-brand.cc-in-view img {
  animation: cc-crystal-in 1s .15s cubic-bezier(.16,.85,.25,1) both,
             cc-float 3.7s 1.3s ease-in-out infinite;
}

.cc-js .cc-actions.cc-in-view .cc-social {
  animation: cc-link-pulse .8s .55s ease-out both;
}

  @keyframes cc-image-in {
    from { opacity: 0; transform: scale(1.08); filter: saturate(.6); }
    to { opacity: 1; transform: scale(1); filter: saturate(1); }
  }
  @keyframes cc-slash-in {
    from { opacity: 0; transform: translateY(-22%) skewY(-5deg); }
    to { opacity: .92; transform: none; }
  }
  @keyframes cc-crystal-in {
    from { opacity: 0; transform: rotate(-9deg) scale(.7); }
    to { opacity: 1; transform: none; }
  }
  @keyframes cc-float {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-6px) rotate(1.5deg); }
  }
  @keyframes cc-reveal-up {
    from { opacity: 0; transform: translateY(42px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes cc-reveal-left {
    from { opacity: 0; transform: translateX(-58px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes cc-link-pulse {
    0% { letter-spacing: 0; color: var(--cc-ink); }
    45% { letter-spacing: 1.3px; color: var(--cc-blue); }
    100% { letter-spacing: 0; color: var(--cc-ink); }
}

@media (prefers-reduced-motion: reduce) {
  .cc-js [data-cc-reveal].cc-in-view { animation-duration: .35s; }
  .cc-js .cc-brand.cc-in-view img { animation: cc-crystal-in .35s both; }
}