/* ==========================================================================
   Stile "Chiaro Mediterraneo" – luce del giorno.
   Fondo avorio e testi verdi; i colori si invertono: lo zoom di OCEAN SERVICE
   entra in una lettera verde e i servizi e i loghi stanno sul verde.
   ========================================================================== */
:root {
  --ivory: #f4efe6;
  --page-bg: var(--ivory);
  --page-fg: var(--green);
  --soft-fg: rgba(13, 35, 30, .82);
  --accent: #a8781e;
  --link: #8a6420;
  --line: rgba(13, 35, 30, .16);
  --muted: rgba(13, 35, 30, .3);
  --muted-hover: rgba(13, 35, 30, .7);
  --dot: rgba(13, 35, 30, .16);
  --alt-bg: var(--green);
  --alt-fg: var(--ivory);
  --zoom-fg: var(--green);
  --pill-bg: rgba(244, 239, 230, .05);
  --pill-fg: var(--ivory);
  --pill-icon-bg: var(--ivory);
  --pill-icon-fg: var(--green);
  --field-bg: rgba(13, 35, 30, .03);
  --field-bg-focus: rgba(13, 35, 30, .06);
  --field-border: rgba(13, 35, 30, .4);
  --field-fg: var(--green);
  --placeholder: rgba(13, 35, 30, .5);
  --button-bg: var(--green);
  --button-fg: var(--ivory);
  --button-border: var(--green);
  --button-hover: var(--green-3);
  --watermark: var(--green);
  --watermark-opacity: .045;
  --arrow-bg: var(--ivory);
  --arrow-hover: #fff;
  --arrow-fg: var(--green);
  --arrow-border: rgba(13, 35, 30, .22);
  --venues-bg: var(--green);
  --venues-fg: var(--ivory);
  --logo-on-dark: var(--ivory);
}

/* --- apertura ------------------------------------------------------------- */
.hero-title__kicker {
  font-family: var(--deco); color: var(--accent);
  font-size: clamp(12px, 1.15vw, 16px); letter-spacing: .42em; padding-left: .42em;
  margin-bottom: 1em;
}
.hero-title__main { font-size: clamp(46px, 8.6vw, 128px); }
.hero-title__sub { font-size: clamp(20px, 2.6vw, 36px); color: var(--soft-fg); margin-top: .2em; }
.hero-title__sub::after {
  content: ""; display: block; width: 64px; margin: .9em auto 0;
  border-top: 1px solid var(--accent);
}
.prose::first-letter { color: var(--accent); }

/* --- timeline ------------------------------------------------------------- */
.tl-slide__media { border-radius: 3px; box-shadow: 0 34px 60px -36px rgba(13, 35, 30, .55); }
.tl-slide__cat { font-family: var(--deco); font-size: clamp(11px, .95vw, 13px); letter-spacing: .3em; }
.timeline__years::before { border-top-width: 1px; border-top-style: solid; top: 51px; }

/* --- ocean service (su verde) ------------------------------------------------ */
.services__content .services__intro { color: rgba(244, 239, 230, .8); }
.service-pill {
  border: 1px solid rgba(244, 239, 230, .22);
  box-shadow: none;
}
.service-pill:hover { box-shadow: none; background: rgba(244, 239, 230, .1); }
.service-pill__icon { border-radius: 14px 0 0 14px; }

/* --- our venues (su verde, loghi chiari) ----------------------------------- */
.venue img { mix-blend-mode: screen; filter: grayscale(1) invert(1); opacity: .78; }
.venue:hover img, .venue a:focus-visible img { filter: grayscale(1) invert(1); opacity: 1; }

/* --- contatti --------------------------------------------------------------- */
.contact__title { text-shadow: none; }
.checkbox__box::after { border-color: var(--ivory); }
.sign { background: var(--ivory); }