/* Genentech home page recreation — matching the live site's editorial layouts. */

@font-face { font-family: Gene Sans; src: url('/fonts/genentech/Gene-Sans-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Gene Sans; src: url('/fonts/genentech/Gene-Sans-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Gene Condensed; src: url('/fonts/genentech/Gene-Condensed-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Gene Condensed; src: url('/fonts/genentech/Gene-Condensed-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Gene Serif; src: url('/fonts/genentech/Gene-Serif-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }

/* Keep the legacy pages styled as they were; the homepage uses the rules at the end. */

:root {
  --navy: #0e1525;
  --navy-2: #141f36;
  --navy-3: #1a2742;
  --ink: #0e1525;
  --red: #ff371e;
  --red-deep: #e02c18;
  --red-soft: rgba(255, 55, 30, .1);
  --bone: #f5f3ef;
  --bone-dim: rgba(245, 243, 239, .65);
  --line: rgba(245, 243, 239, .12);
  --max: 1240px;
  --pad: clamp(20px, 4vw, 56px);
  --font-d: "Space Grotesk", "Inter", sans-serif;
  --font-b: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; overflow-x: clip; }
body {
  background: var(--navy);
  color: var(--bone);
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-d); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; }
p { color: var(--bone-dim); }
::placeholder { color: var(--bone-dim); }

/* film grain */
body::after {
  content: "";
  position: fixed; inset: -50%; z-index: 9998; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  opacity: .045; animation: grain 1.4s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); }
  75% { transform: translate(-2%, -2%); }
  100% { transform: translate(3%, 3%); }
}

/* custom cursor */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  border-radius: 50%; mix-blend-mode: difference; transition: transform .2s ease;
}
.cursor-dot { width: 8px; height: 8px; background: var(--red); }
.cursor-ring { width: 40px; height: 40px; border: 1.5px solid var(--red); mix-blend-mode: difference; }
.cursor-ring.is-hover { width: 64px; height: 64px; border-color: var(--red); }
@media (hover: none) { .cursor-dot, .cursor-ring { display: none; } }

/* progress + back to top */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 9997;
  background: var(--red); transform: scaleX(0); transform-origin: left;
}
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 9996;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--navy); color: var(--bone); font-family: var(--font-d);
  font-size: 18px; cursor: pointer; opacity: 0; translate: 0 14px; pointer-events: none;
  transition: opacity .3s ease, translate .3s ease;
}
.to-top.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
.to-top:hover { background: var(--red); border-color: var(--red); }

/* header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(16px);
  background: rgba(14, 21, 37, .85);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  max-width: var(--max); margin: 0 auto; padding: 14px var(--pad);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand__logo { height: 32px; width: auto; }
.brand__name {
  font-family: var(--font-d); font-weight: 700; font-size: 20px;
  letter-spacing: .02em; color: var(--bone);
}
.brand--footer .brand__logo { height: 28px; }
.nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav > a {
  font-family: var(--font-b); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; padding: 9px 13px; border-radius: 99px;
  color: var(--bone-dim); transition: color .25s ease, background .25s ease;
}
.nav > a:hover { color: var(--bone); background: rgba(255, 255, 255, .06); }
.nav > a.active, .nav > a[aria-current="page"] { color: var(--bone); background: var(--red); }
.nav__cta {
  font-family: var(--font-b); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; background: transparent; color: var(--bone);
  border: 1px solid var(--bone-dim); padding: 10px 20px; border-radius: 99px; transition: .3s ease;
}
.nav__cta:hover { background: var(--red); border-color: var(--red); color: var(--bone); }
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 8px; color: var(--bone);
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--bone); margin: 5px 0; border-radius: 2px; }

/* hero */
.hero {
  position: relative; min-height: 88svh; display: flex; flex-direction: column;
  overflow: hidden; color: var(--bone);
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img {
  width: 100%; height: 112%; object-fit: cover;
  filter: saturate(.75) contrast(1.05) brightness(.62);
}
.hero__bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(7, 10, 16, .6);
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(16,19,23,.46) 0%, rgba(16,19,23,.58) 42%, rgba(16,19,23,.88) 92%);
}
.hero__inner { position: relative; z-index: 2; max-width: var(--max); width: 100%; margin: 0 auto; padding: 0 var(--pad) clamp(40px, 6vh, 80px); }
.eyebrow {
  font-family: var(--font-b); font-size: 11px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--red); margin-bottom: 14px; display: block;
}
.hero__title {
  font-family: var(--font-d); font-weight: 700; font-size: clamp(44px, 7.2vw, 110px);
  line-height: 1.02; text-transform: uppercase; letter-spacing: -.01em;
}
.hero__title .row { display: block; }
.hero__title .word { white-space: nowrap; display: inline-block; }
.hero__title .stroke { color: transparent; -webkit-text-stroke: 2px var(--bone); }
.hero__title .fill-r { color: var(--red); }
.hero__sub {
  max-width: 60ch; color: var(--bone-dim); font-size: 15.5px; margin-top: 22px; line-height: 1.7;
}
.hero__actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-b); font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 16px 28px; border-radius: 99px; cursor: pointer;
  transition: .3s ease; border: 1px solid transparent;
}
.btn--solid { background: var(--red); color: var(--bone); }
.btn--solid:hover { background: var(--red-deep); box-shadow: 0 0 0 3px var(--red), 0 8px 24px rgba(255, 55, 30, .35); transform: translateY(-2px); }
.btn--ghost { border-color: var(--bone-dim); color: var(--bone); background: transparent; }
.btn--ghost:hover { background: var(--bone); color: var(--navy); border-color: var(--bone); }
.hero__badge {
  position: absolute; z-index: 3; right: clamp(16px, 4vw, 56px); bottom: clamp(80px, 12vh, 160px);
  width: 150px; height: 150px; display: grid; place-items: center;
  animation: badgeSpin 18s linear infinite;
}
.hero__badge svg { position: absolute; inset: 0; }
.hero__badge svg text { font-family: var(--font-b); font-size: 11px; letter-spacing: .35em; text-transform: uppercase; fill: var(--bone); }
.hero__badge-core { width: 16px; height: 16px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 6px var(--red-soft); animation: blink 2s ease infinite; }
@keyframes badgeSpin { to { rotate: 360deg; } }
@keyframes blink { 50% { opacity: .25; } }

/* hero meta */
.hero__meta {
  position: relative; z-index: 2; max-width: var(--max); margin: 0 auto;
  padding: 0 var(--pad) 0;
}
.hero__meta-inner {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-family: var(--font-b); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--bone-dim);
  border-top: 1px solid var(--line); padding-top: 14px;
}
.hero__meta-inner span { padding: 6px 12px; border-radius: 99px; transition: .3s ease; }
.hero__meta-inner span:hover { background: rgba(255,255,255,.05); }

/* about damn time */
.about-damn-time {
  background: var(--navy); border-bottom: 1px solid var(--line);
}
.adt-card {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 70px);
  align-items: center;
}
.adt-card__media { aspect-ratio: 4/3; overflow: hidden; border-radius: 20px; }
.adt-card__media img { width: 100%; height: 100%; object-fit: cover; }
.adt-card__body { display: flex; flex-direction: column; gap: 12px; }
.adt-card__title {
  font-family: var(--font-d); font-weight: 700; font-size: clamp(32px, 4vw, 52px);
  text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 10px;
}
.adt-card__highlight {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--red-soft); border-radius: 16px; padding: 20px;
}
.adt-card__highlight strong { font-family: var(--font-d); font-size: 32px; color: var(--red); line-height: 1.1; text-transform: uppercase; }
.adt-card__highlight span { color: var(--bone); line-height: 1.4; }
.adt-card__copy { color: var(--bone-dim); font-size: 15px; line-height: 1.7; }
.adt-card__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-b); font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--red);
  transition: gap .3s ease;
}
.adt-card__link:hover { gap: 12px; }

/* breast cancer */
.breast-cancer {
  background: var(--navy-2); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.bc-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px);
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
}
.bc-card {
  border-radius: 20px; overflow: hidden; border: 1px solid var(--line);
  background: var(--navy-3); transition: .4s ease; cursor: pointer;
}
.bc-card:hover { border-color: var(--red); transform: translateY(-4px); }
.bc-card__media { aspect-ratio: 16/9; overflow: hidden; }
.bc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.bc-card:hover .bc-card__media img { transform: scale(1.05); }
.bc-card__body { padding: 22px; }
.bc-card__title {
  font-family: var(--font-d); font-weight: 700; font-size: 26px;
  text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 10px;
}
.bc-card__copy { font-size: 14px; color: var(--bone-dim); line-height: 1.7; margin-bottom: 16px; }
.bc-card__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-b); font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--red);
  transition: gap .3s ease;
}
.bc-card__link:hover { gap: 12px; }

/* press release */
.press {
  background: var(--navy-3); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.press__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
}
.press__lead { display: flex; flex-direction: column; gap: 12px; }
.press__title {
  font-family: var(--font-d); font-weight: 700; font-size: clamp(28px, 3.8vw, 48px); text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 14px;
}
.press__copy { font-size: 16px; line-height: 1.7; color: var(--bone-dim); }
.press__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-b); font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--red);
  transition: gap .3s ease;
}
.press__link:hover { gap: 12px; }
.press__media { position: relative; border-radius: 20px; overflow: hidden; height: 100%; min-height: 320px; }
.press__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); }

/* stories */
.stories__head {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.stories__title {
  font-family: var(--font-d); font-weight: 700; font-size: clamp(30px, 4vw, 54px);
  text-transform: uppercase; letter-spacing: -.01em;
}
.stories__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px);
}
.story {
  position: relative; border-radius: 20px; overflow: hidden;
  background: var(--navy-3); border: 1px solid var(--line); transition: .4s ease; cursor: pointer;
}
.story:hover { border-color: var(--red); transform: translateY(-4px); }
.story__media {
  position: relative; overflow: hidden; aspect-ratio: 16/10; background: var(--navy);
}
.story__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.story:hover .story__media img { transform: scale(1.05); }
.story__tag {
  position: absolute; z-index: 2; top: 12px; left: 12px;
  font-family: var(--font-b); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--bone); background: rgba(14,21,37,.7); backdrop-filter: blur(8px);
  padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line);
}
.story__body { padding: 18px 20px 22px; }
.story__title {
  font-family: var(--font-d); font-weight: 700; font-size: 19px; text-transform: uppercase;
  letter-spacing: -.01em; line-height: 1.2; margin-bottom: 6px; white-space: nowrap; overflow: hidden;
}

/* society */
.society__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px);
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
}
.society-card {
  border-radius: 20px; border: 1px solid var(--line); background: var(--navy-3);
  padding: 28px; text-align: center; transition: .4s ease; cursor: pointer;
}
.society-card:hover { border-color: var(--red); transform: translateY(-4px); }
.society-card__icon { color: var(--red); margin-bottom: 16px; }
.society-card__title {
  font-family: var(--font-d); font-weight: 700; font-size: 22px; text-transform: uppercase; margin-bottom: 10px;
}
.society-card__copy { font-size: 14px; color: var(--bone-dim); line-height: 1.6; margin-bottom: 16px; }
.society-card__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-b); font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--red);
  transition: gap .3s ease;
}
.society-card__link:hover { gap: 12px; }

/* focus areas carousel */
.focus-areas__intro {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.focus-areas__title {
  font-family: var(--font-d); font-weight: 700; font-size: clamp(30px, 4vw, 54px);
  text-transform: uppercase; letter-spacing: -.01em;
}
.focus-areas__copy { font-size: 15.5px; color: var(--bone-dim); max-width: 62ch; }
.focus-carousel {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
  overflow: hidden;
}
.focus-carousel__track {
  display: flex; gap: 22px; transition: transform .5s cubic-bezier(.2,.7,.2,1); will-change: transform;
}
.focus-card {
  flex: 0 0 280px; border-radius: 20px; overflow: hidden;
  background: var(--navy-3); border: 1px solid var(--line); transition: .4s ease; cursor: pointer;
}
.focus-card:hover { border-color: var(--red); transform: translateY(-4px); }
.focus-card__media { aspect-ratio: 16/10; overflow: hidden; }
.focus-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.focus-card:hover .focus-card__media img { transform: scale(1.05); }
.focus-card__title {
  font-family: var(--font-d); font-weight: 700; font-size: 22px; text-transform: uppercase;
  letter-spacing: -.01em; text-align: center; padding: 16px 8px; color: var(--bone);
}
.focus-carousel__controls {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  max-width: var(--max); margin: 26px auto 0; padding: 0 var(--pad);
}
.focus-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--navy-3); color: var(--bone); cursor: pointer; font-size: 22px; transition: .3s ease;
}
.focus-btn:hover { border-color: var(--red); color: var(--red); background: var(--navy); }
.focus-dots { display: flex; gap: 8px; }
.focus-dots span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--line);
  transition: background .3s ease, transform .3s ease;
}
.focus-dots span.active { background: var(--red); transform: scale(1.4); }

/* genentech gray */
.genentech-gray {
  background: var(--navy); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.gray-card {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 70px); align-items: center;
}
.gray-card__media { aspect-ratio: 4/3; overflow: hidden; border-radius: 20px; }
.gray-card__media img { width: 100%; height: 100%; object-fit: cover; }
.gray-card__body { display: flex; flex-direction: column; gap: 12px; }
.gray-card__title {
  font-family: var(--font-d); font-weight: 700; font-size: clamp(30px, 3.8vw, 48px);
  text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 10px;
}
.gray-card__copy { font-size: 15px; color: var(--bone-dim); line-height: 1.7; }
.gray-card__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-b); font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--red);
  transition: gap .3s ease;
}
.gray-card__link:hover { gap: 12px; }

/* stats */
.stats {
  background: var(--navy); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats__inner {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
}
.stat { background: var(--navy); text-align: center; position: relative; overflow: hidden; }
.stat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 54px; height: 3px;
  background: var(--red);
}
.stat__num {
  font-family: var(--font-d); font-weight: 700; font-size: clamp(44px, 6vw, 84px);
  color: var(--red); line-height: 1; letter-spacing: -.02em;
}
.stat__label {
  font-family: var(--font-b); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bone-dim); margin-top: 12px;
}

/* CTA */
.cta {
  position: relative; overflow: hidden; background: var(--navy-2);
  text-align: center; padding: clamp(56px, 9vh, 120px) 0;
}
.cta::before, .cta::after {
  content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.08);
  width: 70vmin; height: 70vmin; left: 50%; top: 50%;
}
.cta::before { translate: -50% -50%; animation: ctaRing 8s ease-in-out infinite; }
.cta::after { translate: -50% -50%; width: 92vmin; height: 92vmin; animation: ctaRing 8s ease-in-out infinite reverse; }
@keyframes ctaRing { 0%, 100% { scale: 1; } 50% { scale: 1.1; } }
.cta__inner { position: relative; z-index: 1; }
.cta__title {
  font-family: var(--font-d); font-weight: 700; font-size: clamp(36px, 6vw, 92px);
  text-transform: uppercase; line-height: 1.05; letter-spacing: -.01em; margin-bottom: 18px;
}
.cta__title .stroke { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.cta__copy {
  max-width: 46ch; margin: 0 auto 30px; color: var(--bone-dim); font-size: 15.5px;
}
.cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* footer */
.footer {
  background: var(--navy); border-top: 1px solid var(--line);
  padding: clamp(40px, 5.5vw, 70px) 0 26px;
}
.footer__top {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
}
.footer__brand { display: flex; flex-direction: column; gap: 12px; }
.footer__tagline { color: var(--bone-dim); font-size: 13.5px; line-height: 1.6; max-width: 46ch; }
.footer__col { display: grid; gap: 10px; }
.footer__col a { font-size: 13.5px; color: var(--bone-dim); transition: color .25s ease; display: block; }
.footer__col a:hover { color: var(--red); }
.footer__head {
  font-family: var(--font-b); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--bone-dim); margin-bottom: 14px; font-weight: 700;
}
.footer__big {
  font-family: var(--font-d); font-weight: 700; text-transform: uppercase;
  text-align: center; font-size: clamp(36px, 6vw, 96px); line-height: .85;
  letter-spacing: -.02em; color: transparent;
  -webkit-text-stroke: 1px rgba(245, 243, 239, .1); margin: 0 auto;
}
.footer__big .stroke { -webkit-text-stroke: 0; color: var(--red); }
.footer__bottom {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--line); max-width: var(--max); margin: 28px auto 0; padding: 22px var(--pad);
}
.footer__bottom > * { font-family: var(--font-b); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--bone-dim); }
.footer__bottom > *:nth-child(2) { max-width: 48ch; }
.footer__copyright { max-width: 40ch; }
.footer__note { max-width: 52ch; }
.footer__legal { align-self: flex-end; }

/* cookie banner */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9998;
  background: var(--navy-2); border-top: 1px solid var(--line);
  padding: 20px var(--pad) 20px calc(var(--pad) + 32px);
  display: none;
}
.cookie-banner.show { display: block; animation: slideUp .4s ease; }
.cookie-banner__inner { max-width: var(--max); margin: 0 auto; }
.cookie-banner__text {
  color: var(--bone-dim); font-size: 13.5px; line-height: 1.7; margin-bottom: 18px;
}
.cookie-banner__text a { color: var(--red); }
.cookie-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.cookie-reject { color: var(--bone); }
.cookie-reject:hover { background: var(--bone); color: var(--navy); border-color: var(--bone); }

/* responsive */
@media (max-width: 1020px) {
  .bc-grid, .stories__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .breast-cancer, .press, .genentech-gray { grid-template-columns: 1fr; }
  .adt-card, .gray-card { grid-template-columns: 1fr; }
  .focus-carousel__track { gap: 14px; }
  .focus-card { flex: 0 0 220px; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; }
  .cookie-banner { padding: 16px 16px 16px calc(16px + 32px); }
  .nav-toggle { display: block; }
  .nav { display: none; position: fixed; inset: 0; top: 0; z-index: 60;
    flex-direction: column; justify-content: center; align-items: center; gap: 8px;
    background: var(--navy); }
  .nav.is-open { display: flex; }
  .nav > a, .nav__cta { padding: 14px 20px; font-size: 15px; }
  .hero__badge { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ============ LIVE GENE.COM HOMEPAGE ============ */
body:has(.homepage-story) {
  --gene-ink: #30373d;
  --gene-blue: #0b41cd;
  --gene-purple: #8b25c0;
  background: #edf0f1;
  color: var(--gene-ink);
  font: 16px/1.55 'Gene Sans', Arial, sans-serif;
  overflow-x: hidden;
}
body:has(.homepage-story)::after { display: none; }
body:has(.homepage-story) h1,
body:has(.homepage-story) h2,
body:has(.homepage-story) h3,
body:has(.homepage-story) p { color: inherit; }
body:has(.homepage-story) .site-header {
  position: fixed; inset: 0 0 auto; height: 124px; z-index: 100;
  background: transparent; border: 0; backdrop-filter: none; pointer-events: none;
}
.site-header .site-menu,
.site-header .site-search {
  pointer-events: auto; position: absolute; top: 25px; width: 84px; height: 74px;
  border: 0; border-radius: 15px; background: #fff; box-shadow: 0 3px 22px rgba(0,0,0,.1);
  display: grid; place-content: center; cursor: pointer; transition: background .2s, transform .2s;
}
.site-header .site-menu { left: 25px; gap: 7px; }
.site-header .site-menu span { display: block; width: 42px; height: 2px; border-radius: 2px; background: #050505; }
.site-header .site-search { right: 25px; }
.site-header .site-search span { width: 27px; height: 27px; border: 2px solid #050505; border-radius: 50%; position: relative; }
.site-header .site-search span::after { content: ''; position: absolute; height: 14px; width: 2px; background: #050505; transform: rotate(-43deg); right: -6px; bottom: -9px; }
.site-header .site-menu:hover,.site-header .site-search:hover { background: #f8f8f8; transform: translateY(-1px); }
.site-header .site-logo { pointer-events: auto; position:absolute; left:50%; top:46px; transform:translateX(-50%); opacity:0; transition:opacity .2s; }
.site-header .site-logo img { width:115px; height:auto; filter:brightness(0); }
.site-header.is-scrolled .site-logo { opacity:1; }
.site-menu-panel { display:none; pointer-events:auto; position:fixed; inset:0; z-index:-1; flex-direction:column; gap:18px; align-items:flex-start; justify-content:center; padding:10vw; background:#fff; }
.site-menu-panel.is-open { display:flex; }
.site-menu-panel a { color:#111; font: 400 clamp(32px,5vw,66px)/1.08 'Gene Condensed',sans-serif; text-decoration:none; }
.site-menu-panel a:hover { color:var(--gene-blue); }
.homepage-story { position:relative; overflow:hidden; }
.brand-opening { min-height:100svh; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; background:#ece8e2; color:#050505; text-align:center; }
.brand-opening__word { font:700 clamp(100px,25vw,380px)/.8 'Gene Sans',Arial,sans-serif; letter-spacing:-.075em; }
.brand-opening p { font:400 clamp(34px,6vw,96px)/1.2 'Gene Serif',Georgia,serif; margin-top:44px; color:#050505; }
.story-panel { min-height:100svh; position:relative; isolation:isolate; background:#ede8e1; display:flex; align-items:center; overflow:hidden; }
.story-panel__art { position:absolute; z-index:-1; inset:0; background-position:center; background-size:cover; }
.story-panel--hero { min-height:100svh; background:#eae5df; }
.story-panel__art--hero { background-image:url('https://www.gene.com/assets/content/block_story_gene_animation_block_image/generated_Dolphin-Homepage-Image-Desktop_2850x1800_V10-large.jpg'); opacity:.28; }
.story-panel--hero::after { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(242,239,234,.96) 0%,rgba(242,239,234,.84) 52%,rgba(242,239,234,.32) 100%); }
.story-panel__content { width:min(900px,calc(100% - 48px)); margin:0 auto; padding:120px 0 80px; color:#050505; }
.story-panel--hero .story-panel__content { min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding-top:150px; }
.story-panel--hero .story-panel__content h1 { font:400 clamp(58px,9vw,132px)/.98 'Gene Condensed',Arial,sans-serif; letter-spacing:-.025em; margin:0 0 16px; }
.story-panel--hero .story-panel__content p:not(.story-kicker) { max-width:650px; font-size:20px; line-height:1.56; margin:0 0 28px; }
.story-kicker { font:700 12px/1.3 'Gene Sans',sans-serif; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px; color:#30373d; }
.gene-button { min-height:49px; display:inline-flex; align-items:center; justify-content:center; gap:16px; padding:12px 24px; border-radius:2px; background:#fff; color:#30373d; font-size:16px; text-decoration:none; transition:filter .2s,transform .2s; }
.gene-button:hover { filter:brightness(.95); transform:translateY(-2px); }
.gene-button span { font-size:20px; }
.story-panel--campaign { background:#152A3D; color:#fff; justify-content:center; }
.story-panel__art--campaign { background-image:url('https://www.gene.com/assets/content/tile_image/Genentech_ADT_HomepageImage_Secondary_980x548_2.png'); opacity:.38; }
.story-panel--campaign::after { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,#152A3D 0%,rgba(21,42,61,.72) 55%,rgba(18,59,58,.18)); }
.story-panel__content--wide { margin-left:max(8vw,40px); margin-right:0; width:min(900px,78vw); }
.story-panel--campaign .story-kicker,.story-panel--campaign h2,.story-panel--campaign h3,.story-panel--campaign p { color:#fff; }
.story-panel--campaign h2 { font:400 clamp(64px,10vw,140px)/.98 'Gene Condensed',sans-serif; margin:0 0 28px; }
.story-panel--campaign h3 { font:400 clamp(30px,4.6vw,58px)/1.08 'Gene Serif',serif; margin:0 0 22px; }
.story-panel--campaign p:not(.story-kicker) { max-width:800px; font-size:20px; line-height:1.56; margin:0 0 30px; }
.gene-button--purple { color:#fff; background:var(--gene-purple); }
.story-panel--breast { min-height:82svh; gap:6vw; padding:80px max(8vw,40px); background:#f6f6f6; }
.story-panel__content--left { flex:1; width:auto; max-width:500px; margin:0; padding:50px 0; }
.story-panel--breast h2 { font:700 clamp(34px,4vw,56px)/1.05 'Gene Condensed',sans-serif; margin:0 0 18px; }
.story-panel--breast p:not(.story-kicker) { font-size:17px; line-height:1.8; margin:0 0 26px; }
.story-panel__image { width:min(45%,640px); aspect-ratio:1.5; object-fit:cover; }
.gene-button--blue { color:#fff; background:#002e85; }
.feature-tiles { max-width:1150px; margin:0 auto; padding:72px 32px 96px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:38px 18px; }
.feature-tile { min-width:0; color:var(--gene-ink); text-decoration:none; display:block; }
.feature-tile img { display:block; width:100%; aspect-ratio:980/548; object-fit:cover; }
.feature-tile__title { display:block; margin-top:14px; font-size:16px; line-height:1.3; font-weight:700; }
.feature-tile__copy { display:block; margin-top:8px; color:#505050; font-size:14.4px; line-height:1.35; }
.feature-tile:hover .feature-tile__title { text-decoration:underline; color:var(--gene-blue); }
.gray-feature { min-height:650px; position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center; background:#3A2B24; color:#fff; overflow:hidden; }
.gray-feature > img { width:100%; height:100%; min-height:650px; object-fit:cover; }
.gray-feature__content { max-width:620px; padding:80px clamp(30px,7vw,110px); }
.gray-feature__content .story-kicker,.gray-feature__content h2,.gray-feature__content p { color:#fff; }
.gray-feature__content h2 { font:400 clamp(42px,5.2vw,72px)/1.05 'Gene Condensed',sans-serif; margin:0 0 24px; }
.gray-feature__content p:not(.story-kicker) { font-size:20px; line-height:1.56; margin:0 0 30px; }
.gene-button--dark { color:#111; background:#fff; }
.focus-section { padding:82px 0 95px; background:#123B3A; color:#fff; overflow:hidden; }
.focus-section__intro { max-width:780px; margin:0 auto; padding:0 24px 34px; text-align:left; }
.focus-section__intro .story-kicker,.focus-section__intro h2,.focus-section__intro p { color:#fff; }
.focus-section__intro h2 { font:400 50px/1.15 'Gene Serif',serif; margin:0 0 12px; }
.focus-section__intro p:not(.story-kicker) { font:400 18px/1.65 'Gene Serif',serif; }
.focus-carousel { overflow:hidden; padding:0 max(24px,calc((100vw - 780px)/2)); }
.focus-carousel__track { display:flex; gap:34px; transition:transform .4s ease; }
.focus-slide { flex:0 0 min(780px,78vw); color:#fff; text-decoration:none; position:relative; }
.focus-slide img { width:100%; aspect-ratio:980/548; object-fit:cover; display:block; }
.focus-slide span { display:block; font:400 38px/1.2 'Gene Condensed',sans-serif; margin-top:18px; }
.focus-slide b { display:block; margin-top:8px; font-weight:400; }
.focus-controls { display:flex; align-items:center; justify-content:center; gap:22px; padding:36px 20px 0; color:#fff; }
.focus-controls button { background:none; color:#fff; border:1px solid rgba(255,255,255,.4); border-radius:50%; width:42px; height:42px; font-size:19px; cursor:pointer; }
.focus-controls button:hover { background:#fff; color:#111; }
.gene-footer { background:#f2f3f4; color:#30373d; padding:56px max(32px,calc((100vw - 1150px)/2)) 28px; }
.gene-footer__logo { width:min(270px,70vw); height:auto; margin-bottom:36px; }
.gene-footer nav { display:grid; grid-template-columns:repeat(4,1fr); gap:18px 26px; border-top:1px solid #c7cbcd; border-bottom:1px solid #c7cbcd; padding:28px 0; }
.gene-footer nav a { color:#30373d; font-size:15px; text-decoration:none; }
.gene-footer nav a:hover { color:var(--gene-blue); text-decoration:underline; }
.gene-footer > p { margin-top:22px; color:#505050; font-size:12px; }
/* OneTrust consent layout and colors on the replica, matching Gene.com's native consent dialog. */
#onetrust-banner-sdk { font-family:'Gene Sans',Arial,sans-serif !important; box-shadow:0 -3px 24px rgba(0,0,0,.08); }
#onetrust-banner-sdk #onetrust-policy-text { color:#696969 !important; font:400 13px/1.55 'Gene Sans',Arial,sans-serif !important; }
#onetrust-banner-sdk #onetrust-pc-btn-handler { color:#0b41cd !important; }
#onetrust-banner-sdk #onetrust-reject-all-handler,#onetrust-banner-sdk #onetrust-accept-btn-handler { background:#0b41cd !important; border-color:#0b41cd !important; }
#onetrust-banner-sdk #onetrust-policy-title { color:#30373d !important; }
@media (max-width:760px) {
  body:has(.homepage-story) .site-header { height:100px; }
  .site-header .site-menu,.site-header .site-search { top:25px; width:84px; height:74px; }
  .site-header .site-menu { left:25px; }
  .site-header .site-search { right:25px; }
  .site-header .site-logo { top:50px; }
  .brand-opening { min-height:100svh; }
  .brand-opening__word { font-size:clamp(72px,23vw,180px); letter-spacing:-.08em; }
  .brand-opening p { font-size:clamp(30px,8vw,52px); margin-top:34px; }
  .story-panel { min-height:90svh; }
  .story-panel--hero { min-height:100svh; }
  .story-panel__content { width:calc(100% - 48px); padding:100px 0 56px; }
  .story-panel--hero .story-panel__content { padding:125px 0 58px; }
  .story-panel--hero .story-panel__content h1 { font-size:clamp(50px,13vw,82px); }
  .story-panel--hero .story-panel__content p:not(.story-kicker),.story-panel--campaign p:not(.story-kicker),.gray-feature__content p:not(.story-kicker) { font-size:17px; }
  .story-panel--campaign { min-height:100svh; }
  .story-panel__content--wide { width:calc(100% - 48px); margin:0 auto; }
  .story-panel--campaign h2 { font-size:clamp(58px,15vw,90px); }
  .story-panel--campaign h3 { font-size:32px; }
  .story-panel--breast { min-height:0; display:flex; flex-direction:column; gap:30px; align-items:stretch; padding:64px 24px; }
  .story-panel__content--left { width:100%; }
  .story-panel__image { width:100%; }
  .feature-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); padding:48px 24px 64px; gap:28px 14px; }
  .gray-feature { grid-template-columns:1fr; }
  .gray-feature > img { min-height:0; aspect-ratio:1.15; }
  .gray-feature__content { padding:45px 24px 60px; }
  .focus-section__intro { padding-bottom:28px; }
  .focus-section__intro h2 { font-size:40px; }
  .focus-slide { flex-basis:84vw; }
  .focus-slide span { font-size:30px; }
  .gene-footer nav { grid-template-columns:repeat(2,1fr); gap:16px; }
  #onetrust-banner-sdk #onetrust-group-container { width:100% !important; }
  #onetrust-banner-sdk #onetrust-button-group-parent { width:100% !important; padding:0 20px 16px !important; }
  #onetrust-banner-sdk #onetrust-button-group { width:100% !important; }
  #onetrust-banner-sdk #onetrust-policy { padding:24px 20px 0 !important; }
}
@media (max-width:440px) { .feature-tiles { grid-template-columns:1fr; } }

/* ======================================================
   gene.com homepage replica — exact-match overrides
   ====================================================== */
.story.relative { border-radius:0; background:transparent; border:0; transition:none; cursor:auto; overflow:visible; }
.story.relative:hover { transform:none; border-color:inherit; }
/* The palette's ink, not #000: the inline styles in index.html all carry one
   black now (see tools/palette.py), so the fallbacks here match it. */
.content.scrolling-slideshow-content { background:var(--ink); }
/* Slide 2 — "Build Season Starts Now" — is this site's counterpart of the live
   site's "About Damn Time" band, which is the one band there that carries a
   picture of its own rather than the shared screen. It keeps the ink ground and
   puts the plan drawing over it, so the slide's own type (--text and
   --accent-soft) still has a dark ground to sit on. `cover` holds the wall
   lines square at every width; centring keeps the room at the middle of the
   frame rather than its corner. */
#slide_2 { background-image:linear-gradient(rgba(21,42,61,.9), rgba(18,59,58,.88)), url("/assets/gene/blueprint.png"); background-size:cover, cover; background-position:center center, center center; background-repeat:no-repeat, no-repeat; }
/* The plan is white line art, and the lines run straight through the copy -- the
   slide's own markup puts a transparent background on this column, so the wash
   is a background-IMAGE (an inline `background-color` would win over any rule).
   It is confined to the text column and fades to nothing: the drawing stays
   whole at the edges of the frame and only the paragraph gets a quiet ground. */
#slide_2 .content-bar { background-image:radial-gradient(ellipse 64% 62% at 50% 50%, rgba(21,42,61,.86), rgba(21,42,61,.6) 58%, rgba(21,42,61,0) 100%); }
.story-takeover__container { background:var(--ink); padding:64px 0; }
.slide.content-slide .slide-container { background:var(--ink); color:var(--text); }
.flexible-cta .bar-image-container img { width:100%; height:100%; object-fit:contain; display:block; }
.story-carousel .splide__track { overflow:hidden; width:100%; }
.story-carousel .splide__list { display:flex; list-style:none; margin:0; padding:0; }
.story-carousel .splide__slide { flex:0 0 100%; margin-right:.4rem; }
.story-carousel .media-carousel-item { position:relative; overflow:hidden; border-radius:24px; background:var(--ink); aspect-ratio:16/9; }
.story-carousel .media-carousel__image { position:absolute; inset:0; }
.story-carousel .media-carousel__image img { width:100%; height:100%; object-fit:cover; display:block; }
.story-carousel .media-carousel__overlay { position:absolute; inset:0; display:flex; align-items:center; padding:0 128px; background:none; }
.story-carousel .media-carousel__content { display:flex; align-items:center; justify-content:space-around; gap:16px; width:100%; }
/* These sat in #000 because the overlay used to be a light panel; the carousel
   item behind them is ink, so they are the palette's peach and accent now. */
.story-carousel .media-carousel__title { font:700 48px/57.6px "Gene-Sans-Bold", sans-serif; color:var(--accent-soft); }
.story-carousel .media-carousel__link { font:24px/24px "Gene-Sans-Regular", sans-serif; color:var(--accent); text-decoration:underline; text-underline-offset:4px; white-space:nowrap; flex:0 0 auto; }

/* ---- replica structural fixes ---- */
/* sprite was rendering in-flow (+157px page offset) */
.svg-sprite-host { position:absolute; width:0; height:0; overflow:hidden; visibility:hidden; pointer-events:none; }

/* hero wordmark must sit at x=187 (centered), not pushed right by the flex spacer */
.wordmark-wrapper .mask-background { display:none; }
.wordmark-wrapper .wordmark-container { margin:0 auto; }

/* ---- hero layers ----
   The hero (full-bleed #heroBed, the flat #geneBand / #gBand, the masked
   #geneHole / #gHole photo copies, the #geneRest cover of the letters that are
   not being zoomed into, plus #geneWordmark{opacity:0}) is styled INLINE by
   tools/wordmark/patch_index.py, deliberately. It must not depend on this
   stylesheet: a browser holding a stale copy of this file used to run the new
   markup against old CSS and render black ink on the photo, which no check that
   reads only the HTML or the computed geometry would catch.
   See the hero section of README.md. */
/* slide 5 focus carousel: live items are 779x438, laid out in a row */
.story-carousel .splide__track { display:flex; gap:.4rem; }
.story-carousel .media-carousel-item { flex:0 0 779px; width:779px; }
/* tile grid: flush 4x2, 276x368 tiles inside a 1105px container */
.v5-tile-block__content__grid-wrapper:not(.horizontal) { display:flex; flex-wrap:wrap; max-width:1105px; margin:0 auto; padding:0; justify-content:flex-start; }
.tile-block { overflow:hidden; }
/* live: .story-takeover__container is flex column with 64px gap; .tile-block has no margin */
.story-takeover__container { display:flex; flex-direction:column; gap:64px; }
.tile-block { margin:0; }
/* live: freeform h3 keeps its UA 1em top margin (local reset zeroed it) */
.freeform-content-block h3 { margin:50px 0 12px; }
/* the list must lay out in a row (cross-origin splide/StoryApp rules were forcing block) */
.story-carousel .splide__track .splide__list { display:flex !important; list-style:none; margin:0; padding:0; }
.story-carousel .splide__track .splide__slide { flex:0 0 779px; margin-right:.4rem; }
.story-takeover__container > .tile-block { margin-top:0 !important; margin-bottom:0 !important; }
/* live metrics: story-takeover p is 17px/30.8125px and .button line-height 29px */
.story-takeover__wrapper p { line-height:30.8125px; }
.story-takeover__wrapper .button { line-height:29px; }
/* live: custom-media-element <br> lines use the 29px root line-height */
.custom-media-element .sheet-wrap-col { line-height:29px; }
/* The header menu panel's colours now live in palette.css, with the rest of the
   scheme: the panel is the palette's surface with text-grey links rather than
   gene.com's white panel with its #30373d ink. The link colour used to be fixed
   here because the replica's global body colour is light and the panel was
   light too, which left every link unreadable the moment it opened. */

/* The panel's nav bar is a sibling of the content grid, not a grid item, and the
   content container carries no padding of its own -- the grid does. So the bar
   ran the panel's full width: the logo sat on the rounded corner and the last
   link was clipped by the panel's right edge. Same 24px inset as the grid. */
@media (min-width: 1024px) {
  .minimal-menu-search-nav__menu .content-container > nav { padding:24px 24px 0; }
}

/* ---- footer link columns ----
   The footer sitemap is gene.com's: a CSS multi-column flow tuned for the ~11
   columns it ships (2 by default, 4 from 1024px up). This footer has exactly
   three -- LINKS, ABOUT, SOCIAL -- and a four-column flow balanced those into
   two, so ABOUT dropped below LINKS and SOCIAL sat alone to the right. Three
   explicit columns instead: side by side on a desktop, wrapping on a phone.
   `width:auto` is needed because `.primary-footer ul` is 100% wide, which as a
   flex item would give every column the whole row. */
.primary-footer .footer-sitemap {
  column-count:1; -webkit-column-count:1;
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:0 3.5em;
}
.primary-footer .footer-sitemap ul { display:block; width:auto; margin:0 0 1.75em; }

/* Wheel section images - ensure consistent sizing for all member photos */
.wheel-card img {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
  display: block;
}