/* Ocean Crest: Abweichungen vom Vorbild Elyse Residence (nur Marke und Inhalt, Gestalt bleibt). */

/* Marke: Navy aus dem Dossier 2027 (gemessen #13394b) statt Elyse-Schwarzgrün */
:root { --black-900: #13394b; --green-700: #13394b; }

/* Wortmarke «OCEAN CREST» als Schrift (Dossier setzt sie in einer Serifen-Versalie) */
.oc-wortmarke {
  font-family: var(--_fonts---family--serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .14em;
  white-space: nowrap;
  line-height: 1;
  color: var(--white);
  display: inline-flex;
  align-items: center;
}
.logo.nav-logo { width: auto; justify-self: start; justify-content: flex-start; }
.logo__img.oc-wortmarke { width: auto; height: auto; font-size: 1.25rem; }
.footer-logo.oc-wortmarke { width: auto; height: auto; font-size: 3.25rem; }
.modal-logo.oc-wortmarke { width: auto; height: auto; font-size: 1.25rem; }

/* Elf Zeichen statt fünf: Schriftgrösse so, dass «OCEAN CREST» die Breite von «ELYSE» einnimmt */
@media (min-width: 480px) {
  .hero-title { font-size: 12.5rem; white-space: nowrap; }
}
/* Das Vorbild rückt die fünf Buchstaben von «ELYSE» einzeln (nth-child-Versatz); für «OCEAN CREST» gleichmässig */
[data-hero='title'] .char-mask { left: 0 !important; margin-right: -0.02em !important; }
/* Handy: zwei Zeilen «OCEAN» / «CREST» in voller Breite */
@media (max-width: 479px) {
  .hero-title { font-size: 5.6rem; line-height: 1.02; }
  .logo__img.oc-wortmarke { font-size: 1.1rem; }
  .footer-logo.oc-wortmarke { font-size: 1.6rem; }
}
.oc-hero-bild { object-position: 50% 55%; }

/* Fusszeile: Firmenanschrift ist länger als «Cala Aurelia, Liguria, Italy» */
.contact-box { flex-wrap: wrap; }
@media (min-width: 480px) { .is-location { max-width: 15rem; } }

/* Helle Renderings statt der dunklen Fotos des Vorbilds: leichte Navy-Abdunkelung, damit die weisse Schrift lesbar bleibt */
.hero .full-bg-inner, .beliefs .full-bg-inner, .cta .full-bg-inner { position: relative; }
.hero .full-bg-inner::after, .beliefs .full-bg-inner::after, .cta .full-bg-inner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.hero .full-bg-inner::after {
  background: linear-gradient(180deg, rgba(19, 57, 75, .5) 0%, rgba(19, 57, 75, 0) 20%, rgba(19, 57, 75, 0) 48%, rgba(19, 57, 75, .62) 100%);
}
.beliefs .full-bg-inner::after { background: rgba(19, 57, 75, .45); }
.cta .full-bg-inner::after { background: linear-gradient(180deg, rgba(19, 57, 75, .65) 0%, rgba(19, 57, 75, .2) 45%, rgba(19, 57, 75, .2) 100%); }