/* ======================================
   PUBLICIS HEALTH – SHARED STYLES
   styles.css
   ====================================== */

/* FONTS */
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-UltraBlack.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* RESET & BASE */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --accent: #FD84E2; --pink: #FD0082; --navy: #3C2864; --dark: #484848;
  --grey: #f0f0f0; --white: #ffffff; --mid: #A0A0A0;
  --font-body: Arial, Helvetica, sans-serif;
  --font-mono: "Geist Mono", monospace;
  --max: 1080px; --nav-h: 69px;
}
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--dark); background: var(--white); line-height: 1.65; }

/* GLOBAL HEADINGS */
h1, h2, h3, h4, h5, h6 {
  color: #404040; text-decoration: none;
}

/* GLOBAL LINKS */
a, a:visited {
  color: var(--accent);
  text-decoration: none;
}
a:hover, a:focus {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}


/* ======================================
   NAVBAR (shared)
   ====================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h); background: var(--white);
  border-bottom: 1px solid #e0e0e0; z-index: 500;
  display: flex; align-items: center;
}
.nav__inner {
  max-width: var(--max); margin: 0 auto; padding: 0 40px;
  width: 100%; display: flex; align-items: center; justify-content: space-between;
}
.nav__left { display: flex; align-items: center; height: 70px; text-decoration: none !important; }
.nav__logo-img { height: 100%; width: auto; object-fit: contain; display: block; }
.nav__cta {
  font-family: var(--font-body); font-size: .85rem; font-weight: 700;
  letter-spacing: .20em; text-transform: uppercase; color: #404040; white-space: nowrap;
}
.nav__cta:hover {
  color: #404040; text-decoration: underline;
  text-decoration-color: var(--accent); text-underline-offset: 4px;
  text-decoration-thickness: 3px;
}
@media (max-width: 600px) {
  .nav__inner { padding: 0 20px; }
  .nav__left { height: 46px; }
}


/* ======================================
   FOOTER (shared)
   ====================================== */




/* FOOTER (shared) - single line */
footer {
  font-family: var(--font-body); background: #FD84E2;
  padding: 28px 40px; text-align: center;
}
.footer__row {
  max-width: var(--max); margin: 0 auto;
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 32px;
}
.footer__row a {
  color: rgba(255,255,255,.85); font-size: .72rem;
  font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none;
}
.footer__row a:hover {
  color: #ffffff; text-decoration: underline;
  text-decoration-color: #ffffff;
  text-underline-offset: 3px; text-decoration-thickness: 2px;
}
.footer__copy {
  color: rgba(255,255,255,.55); font-size: .68rem;
  letter-spacing: .04em;
}
@media (max-width: 600px) {
  footer { padding: 24px 20px; }
  .footer__row { gap: 20px; }
}





/* ======================================
   HOME PAGE – Hero
   ====================================== */
.hero {
  margin-top: var(--nav-h); height: 56vh; min-height: 380px;
  background: none;
  position: relative; overflow: hidden;
}
.hero__bg-video {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%;
  object-fit: cover; z-index: 0;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 72% 30%, rgba(253,0,130,.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 12% 80%, rgba(30,10,40,.50) 0%, transparent 55%),
    linear-gradient(to bottom, rgba(0,0,0,.05) 0%, rgba(0,0,0,.52) 100%);
  pointer-events: none;
}
.hero__inner {
  position: relative; z-index: 1; height: 100%;
  max-width: var(--max); margin: 0 auto; padding: 0 40px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.hero__headline {
  font-family: var(--font-mono); font-size: clamp(3.2rem, 8.5vw, 6.5rem);
  font-weight: 700; line-height: .90; letter-spacing: -.01em;
  text-transform: uppercase; color: var(--white);
}
.hero__headline span { display: block; }
@media (max-width: 720px) {
  .hero { height: 52vh; }
  .hero__inner { padding: 0 20px; }
}


/* ======================================
   HOME PAGE – Quote Band
   ====================================== */
.quote-band {
  background: linear-gradient(180deg, #FD84E2 0%, #FEBFF4 100%);
  padding: 52px 40px; text-align: center;
}
.quote-band__text {
  font-family: var(--font-mono); max-width: 60%; margin: 0 auto;
  font-size: clamp(28px, 5.5vw, 58px); font-weight: 900; color: #404040;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.1;
}
@media (max-width: 600px) {
  .quote-band { padding: 40px 20px; }
  .quote-band__text { max-width: 100%; }
}


/* ======================================
   HOME PAGE – About
   ====================================== */
.about { background: var(--white); padding: 80px 40px; }
.about__grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.3fr;
  gap: 60px; align-items: start;
}
.about__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.about__heading {
  font-family: var(--font-mono); font-size: clamp(1rem, 1.9vw, 1.35rem);
  font-weight: 700; text-transform: uppercase; line-height: 1.3;
  letter-spacing: .02em; color: #404040; margin-bottom: 24px;
}
.about__body { font-family: var(--font-body); font-size: .95rem; color: #3a4553; line-height: 1.88; }
@media (max-width: 720px) {
  .about { padding: 64px 20px; }
  .about__grid { grid-template-columns: 1fr; gap: 36px; }
  .about__video { max-width: 280px; margin: 0 auto; }
}


/* ======================================
   HOME PAGE – Contact & Cards
   ====================================== */
.contact { background: var(--grey); padding: 72px 40px; }
.contact__header { max-width: var(--max); margin: 0 auto 44px; text-align: center; }
.contact__label {
  font-family: var(--font-mono); font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: #404040;
  margin-bottom: 8px; margin-top: 0; padding: 0; text-decoration: none;
  text-decoration-color: var(--accent); text-underline-offset: 6px;
  text-decoration-thickness: 3px; line-height: 1;
}
.contact__intro { font-family: var(--font-body); font-size: .95rem; color: #444; margin-top: 0; }
.cards { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 80px; }
@media (max-width: 720px) {
  .contact { padding: 56px 20px; }
  .cards { grid-template-columns: 1fr; }
}
.card {
  background: transparent; border: none; display: flex; flex-direction: column;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s;
}
.card__band { height: 200px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 11px 15px; position: relative; overflow: hidden; }
.card__band:before {
  content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,.35); z-index: 0;
}
.card:nth-child(1) .card__band { background: url('../media/AdobeStock_246202416.jpg') center center / cover no-repeat; }
.card:nth-child(2) .card__band { background: url('../media/AdobeStock_676694147.jpg') center center / cover no-repeat; }
.card:nth-child(3) .card__band { background: url('../media/svetlana-gumerova-9_aiGIn1pLM-unsplash.jpg') center center / cover no-repeat; }
.card__band-label {
  font-family: var(--font-mono); position: relative; z-index: 1;
  font-size: 1.4rem; font-weight: 700; letter-spacing: .26em;
  text-transform: uppercase; color: rgba(255,255,255,100);
}
.card__body { padding: 24px 0px 0px 0px; display: flex; flex-direction: column; flex: 1; gap: 9px; }
.card__subheading {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.9vw, 1.35rem);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.3;
  color: #404040;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}
.card__text { font-family: var(--font-body); font-size: .84rem; color: var(--dark); line-height: 1.72; flex: 1; }
.card__link-email {
  font-family: var(--font-body); display: inline-block; margin-top: 4px;
  font-size: .78rem; font-weight: 700; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px; word-break: break-all;
}
.card__link-email:hover { opacity: .7; }
.card__link-cta {
  font-family: var(--font-body); display: inline-block; margin-top: 4px;
  font-size: .80rem; font-weight: 700; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
}
.card__link-cta:hover { opacity: .60; text-decoration: underline; }


/* ======================================
   KARRIERE PAGE – Hero
   ====================================== */
.hero--karriere {
  margin-top: var(--nav-h); padding: 80px 40px 60px;
  background: linear-gradient(180deg, #FD84E2 0%, #FEBFF4 100%);
  text-align: center;
}
.hero__title {
  font-family: var(--font-mono); font-size: clamp(2.4rem, 6vw, 4.5rem);
  font-weight: 900; text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 16px;
}
.hero__subtitle {
  font-family: var(--font-body); font-size: 1.05rem;
  color: #404040; max-width: 560px; margin: 0 auto;
  line-height: 1.7;
}
@media (max-width: 720px) {
  .hero--karriere { padding: 60px 20px 44px; }
}


/* ======================================
   KARRIERE PAGE – Jobs Section
   ====================================== */
.jobs { padding: 72px 40px; background: var(--white); }
.jobs__inner { max-width: var(--max); margin: 0 auto; }
.jobs__heading {
  font-family: var(--font-mono); font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  margin-bottom: 40px;
}
.job-list { display: flex; flex-direction: column; gap: 0; }
.job {
  padding: 28px 0; border-bottom: 1px solid #e0e0e0;
  display: grid; grid-template-columns: 1fr auto;
  gap: 20px; align-items: start;
}
.job:first-child { border-top: 1px solid #e0e0e0; }
.job__title {
  font-family: var(--font-mono); font-size: clamp(.95rem, 1.5vw, 1.15rem);
  font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  color: #404040; margin-bottom: 6px;
}
.job__desc {
  font-family: var(--font-body); font-size: .85rem;
  color: var(--dark); line-height: 1.65; margin-bottom: 8px;
}
.job__meta { display: flex; gap: 16px; flex-wrap: wrap; }
.job__tag {
  font-family: var(--font-mono); font-size: .65rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--mid); font-weight: 400;
}
.job__cta {
  align-self: center; font-family: var(--font-body);
  font-size: .82rem; font-weight: 700; color: var(--accent);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .jobs { padding: 56px 20px; }
  .job { grid-template-columns: 1fr; }
  .job__cta { justify-self: start; }
}


/* ======================================
   KARRIERE PAGE – Speculative Section
   ====================================== */
.speculative {
  padding: 64px 40px; background: var(--grey); text-align: center;
}
.speculative__inner { max-width: 600px; margin: 0 auto; }
.speculative__heading {
  font-family: var(--font-mono); font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  margin-bottom: 16px;
}
.speculative__text {
  font-family: var(--font-body); font-size: .95rem;
  color: var(--dark); line-height: 1.75; margin-bottom: 20px;
}
.speculative__cta {
  font-family: var(--font-body); font-size: .85rem; font-weight: 700;
  letter-spacing: .20em; text-transform: uppercase; color: var(--accent);
}
.speculative__cta:hover {
  color: var(--accent); text-decoration: underline;
  text-decoration-color: var(--accent); text-underline-offset: 4px;
  text-decoration-thickness: 3px;
}