/* ==========================================================
   GOPUKRISHNAN R — LIGHT SCIENTIFIC PORTFOLIO
   Complete light-theme.css
   Load AFTER style.css
   ========================================================== */

:root {
  color-scheme: light;
  --head: "Manrope", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "Inter", "Segoe UI", system-ui, sans-serif;

  --bg: #F5F7FC;
  --bg2: #EAF0F8;
  --card: rgba(255,255,255,.92);
  --card-hi: #FFFFFF;
  --line: #DCE3EF;
  --line-hi: #B7C7DC;

  --ink: #172238;
  --muted: #465771;
  --soft: #5D6E84;

  --cyan: #456B9F;
  --teal: #367F80;
  --blue: #5076AC;
  --violet: #7473B3;
  --amber: #9C7437;

  --grad: linear-gradient(120deg,#496DA7,#7473B3);
  --grad-soft: linear-gradient(135deg,#EDF2FD,#F4F2FC);
  --radius: 22px;
}

/* ==========================================================
   01 — GLOBAL STYLING
   ========================================================== */

html {
  scroll-padding-top: 104px;
}

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
}

body::before {
  opacity: 1;
  background:
    radial-gradient(900px 520px at 8% -5%,
      rgba(207,207,247,.42),transparent 72%),
    radial-gradient(740px 500px at 100% 6%,
      rgba(203,222,244,.42),transparent 73%);
  z-index: -3;
}

body::after {
  display: none;
}

::selection {
  background: #DAE6FB;
  color: #192943;
}

:focus-visible {
  outline: 2px solid #4D69A5;
  outline-offset: 3px;
}

#progress {
  height: 2px;
  background: #6079B3;
  box-shadow: none;
}

/* Glass panels */

.glass {
  background: rgba(255,255,255,.91);
  border: 1px solid #DEE5F0;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow:
    0 18px 48px -38px rgba(42,61,105,.36),
    0 6px 18px rgba(36,55,97,.035);
}

.glass:hover {
  border-color: #CFD9E9;
}

.spot::before,
.spot::after {
  display: none !important;
}

/* ==========================================================
   02 — TYPOGRAPHY
   ========================================================== */

.brand-text strong,
.hero h1,
.hero h2,
.section-heading h2,
.about-left h3,
.expertise-card h3,
.project-details h3,
.process-step h3,
.pub-body h3,
.talk-content h3,
.timeline-item h3,
.award-content h3,
.contact h2,
.detail-hero h1,
.detail-section h2 {
  font-family: var(--head);
}

.kicker,
.eyebrow,
.project-meta,
.toolkit-note,
.toolkit-footnote,
.talk-type,
.time-label,
.detail-kicker,
.pub-year,
.journey-label,
.research-count,
.cover-tag,
.visual-disclaimer,
.hero-tags span {
  font-family: var(--body);
  letter-spacing: .035em;
}

.kicker,
.detail-kicker {
  color: #526BA0;
  font-weight: 750;
  font-size: 12px;
  letter-spacing: .09em;
}

.kicker::before {
  width: 25px;
  background: #A4B6DA;
}

.section-heading h2,
.contact h2,
.recognition h2 {
  color: #15233C;
  letter-spacing: -.045em;
  font-size: clamp(31px,3.5vw,44px);
}

.subtitle {
  color: #455671;
  line-height: 1.75;
  font-size: 15px;
  max-width: 680px;
}

.accent-word,
.grad-text,
.about-left em {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #6778B4;
}

.section {
  padding-top: 88px;
}

/* ==========================================================
   03 — NAVIGATION
   ========================================================== */

.nav {
  background: rgba(255,255,255,.92);
  border-color: #E0E5F0;
  box-shadow:
    0 15px 45px -24px rgba(39,57,108,.24);
}

.site-header.is-scrolled .nav {
  background: rgba(255,255,255,.97);
  border-color: #DDE6ED;
  box-shadow:
    0 17px 36px -26px rgba(39,57,108,.28);
}

.brand-symbol {
  background: #1F2D4C;
  color: #DAE4FF;
  box-shadow: none;
}

.brand-symbol .icon {
  animation: none;
}

.brand-text strong {
  font-size: 13px;
  font-weight: 800;
  color: #18243A;
}

.brand-text small {
  font-size: 10px;
  color: #5B6D85;
  letter-spacing: 0;
}

.nav-link {
  color: #53637B;
  font-weight: 550;
}

.nav-link:hover {
  color: #203152;
  background: #F0F3FA;
}

.nav-link.active {
  color: #263D70;
}

.nav-link.active::after {
  background: #526FAD;
}

.nav-cta {
  background: #1E2A46;
  color: #FFFFFF;
  border-radius: 12px;
  box-shadow:
    0 5px 18px rgba(29,45,82,.10);
}

.nav-cta:hover {
  background: #30446F;
  box-shadow:
    0 6px 22px rgba(29,45,82,.12);
}

.menu-toggle {
  background: #F4F8FA;
  color: var(--ink);
}

/* ==========================================================
   04 — BUTTONS
   ========================================================== */

.btn {
  min-height: 46px;
  border-radius: 13px;
  padding: 14px 21px;
  font-size: 13px;
  font-weight: 700;
}

.btn-primary {
  background: #1E2A46;
  color: #FFFFFF;
  box-shadow:
    0 9px 17px -9px rgba(19,31,60,.40);
}

.btn-primary::after {
  display: none;
}

.btn-primary:hover {
  background: #30446F;
  box-shadow:
    0 14px 24px -12px rgba(19,31,60,.40);
}

.btn-ghost {
  background: #FFFFFF;
  color: #273958;
  border-color: #E5EBF4;
  box-shadow:
    0 6px 18px rgba(32,49,86,.03);
}

.btn-ghost:hover {
  background: #F4F7FD;
  border-color: #C6D3E8;
}

/* ==========================================================
   05 — HERO / LANDING PAGE
   ========================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  width: min(1220px,calc(100% - 56px));
  margin: 105px auto 0;

  min-height: 570px;
  padding: 68px 42px 0;

  border-radius: 27px;
  border: 1px solid #E0E5F1;

  background:
    radial-gradient(
      ellipse 46% 62% at 76% 35%,
      rgba(220,226,252,.63),
      transparent 78%
    ),
    radial-gradient(
      ellipse 28% 52% at 100% 84%,
      rgba(222,235,250,.52),
      transparent 76%
    ),
    linear-gradient(
      135deg,
      #FAFAFE 0%,
      #F8FAFE 55%,
      #F3F6FC 100%
    );

  box-shadow:
    0 30px 64px -46px rgba(44,64,120,.28);
}

#network {
  display: none !important;
}

.hero-inner,
.hero .hero-inner {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns:
    minmax(0,1.14fr) minmax(0,.86fr);

  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: none;
}

.hero-copy,
.hero .hero-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding-bottom: 53px;
}

.eyebrow {
  background: transparent;
  border: 0;
  padding: 0;
  color: #6075AF;

  font-size: 11px;
  letter-spacing: .09em;
  font-weight: 750;
  margin-bottom: 27px;
}

.eyebrow-dot {
  width: 7px;
  height: 7px;
  background: #8896D1;
  box-shadow: 0 0 0 4px #EAEAFB;
  animation: none;
}

.hello {
  font-family: var(--body);
  font-size: 16px;
  color: #586A84;
  margin-bottom: 8px;
}

.hero h1 {
  font-size: clamp(42px,4.55vw,67px);
  letter-spacing: -.057em;
  font-weight: 800;
  line-height: 1.12;
  margin: 0 0 12px;
  color: #19243D;
}

.hero h1 .line {
  display: inline;
  overflow: visible;
  padding-bottom: 0;
}

.hero h1 .line + .line {
  margin-left: .14em;
}

.hero h1 .line > span {
  display: inline-block;
}

/* Muted periwinkle R. */

.hero h1 .grad-text {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #6F7FBA;
  color: #6F7FBA;
  animation: none;
}

/* Senior Scientist title */

.hero h2 {
  font-size: clamp(17px,1.7vw,24px);
  font-weight: 750;
  letter-spacing: -.041em;
  line-height: 1.45;

  max-width: 670px;
  margin: 0 0 18px;
  color: #19243D;
}

.hero h2 .role-lavender {
  color: #A77DDA;
}

.hero h2 .role-blue {
  color: #65A6CF;
}

.hero-description {
  font-size: 15px;
  line-height: 1.9;
  max-width: 510px;
  color: #465A75;
  margin-bottom: 24px;
}

.hero-actions {
  gap: 12px;
}

.hero-tags {
  margin-top: 60px;
  gap: 0;
  display: flex;
  align-items: center;
}

.hero-tags span {
  background: transparent;
  border: 0;
  padding: 0;

  font-size: 11px;
  letter-spacing: 0;
  color: #516581;
  font-weight: 550;
}

.hero-tags span + span::before {
  content: "·";
  color: #98AAC6;
  margin: 0 10px;
}

.scroll-cue {
  display: none;
}

/* ==========================================================
   06 — CIRCULAR PORTRAIT
   ========================================================== */

.hero .hero-visual {
  position: relative;
  z-index: 2;

  min-height: 430px;
  width: 100%;

  display: grid;
  place-items: center;
  align-self: center;

  overflow: visible;
  isolation: isolate;

  animation:
    heroVisualIn 1.05s cubic-bezier(.22,1,.36,1)
    .16s both;
}

.hero .hero-visual::before {
  display: none;
}

.hero .portrait-backdrop {
  position: absolute;
  z-index: 0;

  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;

  width: 390px;
  height: 390px;
  transform: translate(-50%,-50%);

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(214,225,247,.63) 0%,
    rgba(222,233,251,.33) 48%,
    transparent 73%
  );
}

.hero .portrait-wrap {
  position: relative;
  inset: auto;

  width: 300px;
  height: 300px;
  aspect-ratio: 1;
  padding: 8px;
  z-index: 3;

  border-radius: 50%;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(125,149,193,.35);

  box-shadow:
    0 24px 50px -32px rgba(42,67,114,.30);

  transition: translate .65s ease;
  perspective: none;
}

.hero .portrait-wrap::before {
  content: "";
  position: absolute;
  inset: -17px;

  border: 1px dashed rgba(122,155,194,.37);
  border-radius: 50%;

  pointer-events: none;
  animation: scientistOrbit 44s linear infinite;
}

.hero .portrait-card {
  position: relative;
  inset: auto;

  width: 100%;
  height: 100%;
  border-radius: 50%;

  overflow: hidden;
  border: 0;
  box-shadow: none;
  transform: none !important;

  background: linear-gradient(
    145deg,
    #ECF2FB 5%,
    #DCE7F6 100%
  );
}

.hero .portrait-card img {
  position: absolute;

  width: 100%;
  height: 132%;
  max-width: none;

  left: 0;
  bottom: -20%;

  object-fit: contain;
  object-position: center bottom;
  filter: none;
}

.portrait-card::after,
.scan,
.orbit,
.floating-chip {
  display: none !important;
}

/* Existing molecular illustration */

.hero .science-artwork {
  position: absolute;
  z-index: 1;

  inset: 0;
  width: 100%;
  height: 100%;

  opacity: .44;
  overflow: visible;

  transition:
    translate .75s cubic-bezier(.22,1,.36,1);
}

.molecule-one {
  transform-origin: 170px 180px;
  animation: molBreath 16s ease-in-out infinite alternate;
}

.molecule-two {
  transform-origin: 390px 110px;
  animation:
    molBreathTwo 20s ease-in-out infinite alternate;
}

.draw-bond {
  stroke-dasharray: 640;
  stroke-dashoffset: 640;
  animation:
    bondReveal 2.3s cubic-bezier(.16,1,.3,1)
    .35s forwards;
}

@keyframes scientistOrbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes bondReveal {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes molBreath {
  from {
    transform: translateY(0) rotate(-4deg);
  }
  to {
    transform: translateY(13px) rotate(5deg);
  }
}

@keyframes molBreathTwo {
  from {
    transform: translateY(3px) rotate(5deg);
  }
  to {
    transform: translateY(-12px) rotate(-5deg);
  }
}

@keyframes heroVisualIn {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================
   07 — ANIMATED DNA CANVAS
   ========================================================== */

.hero .hero-strands {
  position: absolute;
  inset: 0;
  z-index: 0;

  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.hero .hero-strands::before,
.hero .hero-strands::after {
  content: none !important;
}

.hero #hero-dna {
  position: absolute;
  display: block;

  top: 0;
  right: 0;

  width: 68%;
  height: 100%;
  opacity: 1;

  pointer-events: none;

  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 16%,
    #000 94%,
    transparent 100%
  );

  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 16%,
    #000 94%,
    transparent 100%
  );
}

/* ==========================================================
   08 — ABOUT SECTION
   ========================================================== */

.panel {
  padding: 50px;
}

.about-left h3 {
  color: #1A2A44;
  font-size: clamp(23px,2.3vw,31px);
  font-weight: 750;
  line-height: 1.38;
}

.about-right p {
  color: #465771;
  font-size: 15px;
  line-height: 1.88;
}

.stats-row {
  background: #F7F9FD;
  border-color: #E2E8F3;
}

.stat strong {
  color: #1F2E4A;
}

.stat strong span {
  color: #6175AE;
}

.stat small {
  color: #465A75;
  font-size: 12px;
}

.inline-link {
  color: #416595;
}

.inline-link:hover {
  border-color: #89B2C2;
}

/* ==========================================================
   09 — RESEARCH EXPERTISE
   ========================================================== */

.expertise-grid {
  gap: 17px;
}

.expertise-card {
  background: #FFFFFF;
  min-height: 282px;
  padding: 27px 24px;
  border-color: #E2E8F2;
}

.expertise-card:hover {
  transform: translateY(-5px);
  border-color: #C9D5E8;

  box-shadow:
    0 20px 44px -33px rgba(29,44,86,.24);
}

.expertise-card h3 {
  color: #172640;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.38;
  margin-bottom: 10px;
}

.expertise-card p {
  color: #455672;
  font-size: 14px;
  line-height: 1.76;
}

.feature-number {
  color: #657792;
  font-size: 12px;
}

.feature-icon {
  margin-bottom: 28px;
  border: 1px solid transparent;
}

.feature-icon.lavender {
  background: #EEEAFE;
  color: #7666B0;
}

.feature-icon.blue {
  background: #E8F0FF;
  color: #5276BA;
}

.feature-icon.mint {
  background: #E5F5F2;
  color: #328C86;
}

.feature-icon.peach {
  background: #FFF1E3;
  color: #B68050;
}

.card-corner {
  color: #72839F;
}

.expertise-card:hover .card-corner {
  color: #4F859B;
}

/* ==========================================================
   10 — TOOLS & TECHNOLOGIES
   EIGHT-CARD GRID (SCREENSHOT 2 DESIGN)
   ========================================================== */

.toolkit.toolkit-static {
  padding: 44px 48px 38px;

  background: linear-gradient(
    145deg,
    #F1F2FD 0%,
    #F4F5FC 56%,
    #F1F4FC 100%
  );

  border: 1px solid rgba(224,228,245,.9);
  border-radius: 24px;
  overflow: hidden;

  box-shadow:
    0 20px 48px -36px rgba(41,53,105,.22);
}

.toolkit.toolkit-static .section-heading {
  padding: 0;
  margin: 0 0 27px;
  align-items: end;
}

.toolkit.toolkit-static .toolkit-note {
  color: #8390A9;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .035em;
  text-align: right;
  white-space: nowrap;
  padding-bottom: 5px;
}

/* Main grid */

.toolkit-grid {
  display: grid;
  grid-template-columns:
    repeat(8,minmax(0,1fr));
  gap: 12px;
}

/* Individual tool cards */

.tool-card {
  min-width: 0;
  min-height: 122px;
  padding: 18px 8px 16px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;

  text-align: center;

  background: rgba(255,255,255,.80);
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 17px;

  box-shadow:
    0 3px 12px rgba(53,65,119,.025);

  transition:
    transform .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}

.tool-card:hover {
  transform: translateY(-4px);
  background: #FFFFFF;

  box-shadow:
    0 14px 26px -18px rgba(43,58,111,.30);
}

/* Tool icon */

.tool-card-icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;
  flex: 0 0 auto;

  margin-bottom: 8px;
  border-radius: 12px;

  font-family: var(--head);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

/* Tool name */

.tool-card strong {
  display: block;
  max-width: 100%;

  color: #1D2943;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.32;

  overflow-wrap: anywhere;
}

/* Tool description */

.tool-card small {
  color: #77849C;
  font-size: 10px;
  line-height: 1.45;
}

/* Individual icon colors */

.tool-card-icon.icon-violet {
  background: #EFECFC;
  color: #8B78DA;
}

.tool-card-icon.icon-blue {
  background: #E9F1FF;
  color: #5B92DC;
}

.tool-card-icon.icon-mint {
  background: #E5F5F0;
  color: #4FAE9F;
}

.tool-card-icon.icon-purple {
  background: #F1E8FB;
  color: #9B76D1;
}

.tool-card-icon.icon-peach {
  background: #FFF0E5;
  color: #D8955B;
}

.tool-card-icon.icon-sky {
  background: #E9EFFA;
  color: #507DAE;
}

.tool-card-icon.icon-steel {
  background: #E7EDF6;
  color: #6C8FB9;
}

.tool-card-icon.icon-aqua {
  background: #E6F3F5;
  color: #58A2B2;
}

.toolkit.toolkit-static .toolkit-footnote {
  margin: 24px 0 0;
  color: #6B7B97;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

/* ==========================================================
   11 — FEATURED RESEARCH
   ========================================================== */

.research-count {
  color: #52788E;
  background: #EAF2F6;
  border-color: #DCE9EF;
}

.project-card {
  background: #FFFFFF;
}

.project-card:hover {
  transform: translateY(-5px);
  border-color: #C7D9E3;

  box-shadow:
    0 19px 38px -26px rgba(33,70,93,.24);
}

.project-cover {
  background: #E9F1F5;
}

.project-cover::after {
  background: linear-gradient(
    to top,
    rgba(40,65,81,.12),
    transparent 58%
  );
}

.cover-tag {
  background: rgba(255,255,255,.92);
  color: #416F88;
  border-color: rgba(206,223,234,.9);

  box-shadow:
    0 3px 15px rgba(40,77,98,.06);
}

.cover-tag.teal {
  color: #327F70;
}

.project-meta {
  color: #4E6387;
  font-weight: 700;
}

.project-details h3 {
  color: #182742;
  font-weight: 750;
}

.project-details p {
  color: #465771;
  font-size: 14px;
  line-height: 1.72;
}

.visual-disclaimer {
  color: #556881;
}

.round-arrow {
  color: #436D83;
  background: #F3F7F9;
  border-color: #DFE9EF;
}

.project-card:hover .round-arrow,
.round-arrow:hover {
  color: #FFFFFF;
  background: #367B99;
}

.research-notice {
  background: #F5F8FA;
  border-color: #DCE6EC;
  color: #6E7F8D;
}

.research-notice .icon {
  color: #6597A6;
}

/* ==========================================================
   12 — RESEARCH PROCESS
   ========================================================== */

.process-grid::before {
  background: linear-gradient(
    90deg,#B8C9E8,#D1DCEF
  );
  opacity: 1;
}

.process-step {
  background: #FFFFFF;
  border-color: #E0E8EE;
}

.process-step:hover {
  border-color: #B6CEDB;
  transform: translateY(-4px);

  box-shadow:
    0 15px 30px -28px rgba(28,42,78,.25);
}

.step-index {
  color: #9BAAB5;
}

.step-icon {
  background: #E8F2F6;
  color: #4B8095;
  border-color: #D7E7EF;
  box-shadow: 0 0 0 6px var(--bg);
}

.process-step h3 {
  color: #182742;
  font-weight: 750;
}

.process-step p {
  color: #465771;
  font-size: 14px;
  line-height: 1.7;
}

/* ==========================================================
   13 — PUBLICATIONS & ABSTRACTS
   ========================================================== */

.pub-filters {
  background: #EFF4F7;
  border-color: #DCE6ED;
}

.filter-pill {
  color: #647B8C;
}

.filter-pill:hover {
  color: #28495F;
}

.filter-pill.is-selected {
  background: #FFFFFF;
  color: #2F708E;

  box-shadow:
    0 2px 8px rgba(57,90,107,.09);
}

.publication {
  background: #FFFFFF;
  border-left: 3px solid #BACAE2;
}

.publication:hover {
  border-color: #BDCFDB;
  transform: translateX(3px);
}

.pub-id {
  color: #758BAC;
  -webkit-text-stroke: 0;
}

.tag-blue {
  color: #3D7797;
  background: #EBF3F8;
  border-color: #D7E5EF;
}

.tag-mint {
  color: #357C74;
  background: #E7F4EF;
  border-color: #D5E8DF;
}

.pub-year {
  color: #4E6387;
  font-weight: 700;
}

.pub-body h3 {
  font-size: 17px;
  color: #182742;
  font-weight: 750;
}

.pub-body p {
  color: #465771;
  font-size: 14px;
  line-height: 1.72;
}

.pub-icon {
  color: #91A7B5;
}

.publication:hover .pub-icon {
  color: #50849E;
}

/* ==========================================================
   14 — SPEAKING & SCIENTIFIC ENGAGEMENTS
   ========================================================== */

.talks-counter {
  background: #F3F7FA;
  border-color: #DCE7EC;
}

.talks-counter > span {
  color: #2B4659;
}

.talks-counter > span span {
  color: #43879E;
}

.talks-counter small {
  color: #4C5F78;
}

.talk-card {
  background: #FFFFFF;
  border-color: #E1EAF0;
}

.talk-card:hover {
  border-color: #C4D7E1;
  transform: translateY(-3px);
}

.talk-date {
  background: #EDF4F7;
  border-color: #DFE9EF;
}

.talk-date span {
  color: #3D638F;
}

.talk-date strong {
  color: #1F304D;
}

.talk-type {
  color: #4A6E9F;
  font-weight: 750;
}

.talk-content h3 {
  color: #182742;
  font-weight: 750;
}

.talk-content p {
  color: #465771;
  font-size: 14px;
  line-height: 1.7;
}

.talk-marker {
  color: #8FA8B7;
}

/* ==========================================================
   15 — EXPERIENCE & EDUCATION
   ========================================================== */

.journey-label {
  color: #3D526F;
  font-weight: 750;
}

.label-icon {
  color: #377E77;
  background: #E9F4EF;
  border-color: #D9E9E3;
}

.label-icon.lavender {
  color: #697CA4;
  background: #EDF0F9;
}

.timeline::before {
  background: linear-gradient(
    #8FBBC9,#C7D7E1
  );
}

.timeline-dot {
  background: #FFFFFF;
  border: 2px solid #5A98AC;
  box-shadow: 0 0 0 5px #E6F0F3;
}

.time-label {
  color: #4E6387;
  font-size: 11px;
  font-weight: 700;
}

.timeline-item h3 {
  color: #1F324E;
}

.timeline-item p {
  color: #465771;
  font-size: 14px;
  line-height: 1.72;
}

.timeline-item .timeline-org {
  color: #1F324E;
}

/* ==========================================================
   16 — RESEARCH RECOGNITION
   ========================================================== */

.recognition {
  background: linear-gradient(
    105deg,#FFFCF7 0%,#FFFFFF 60%
  );
  border-color: #EDE3D2;
}

.award-visual::before,
.award-visual::after {
  border-color: rgba(187,149,91,.18);
  animation: none;
}

.award-ring {
  background: #F8EED7;
  color: #9B7435;

  box-shadow:
    0 10px 35px -20px rgba(136,94,49,.22);

  animation: none;
}

.award-content .kicker,
.award-eyebrow {
  color: #89642B;
}

.award-content .kicker::before {
  background: #C3A777;
}

.award-content h3 {
  color: #2D3E4D;
}

.award-content > p:last-child {
  color: #4C5E77;
}

/* ==========================================================
   17 — CONTACT
   ========================================================== */

.contact {
  background: #FFFFFF;
}

.contact-copy > p {
  color: #445874;
  font-size: 15px;
  line-height: 1.85;
}

.contact-icon {
  background: #EDF4F8;
  border-color: #DCE9F0;
  color: #4C8299;
}

.contact-options small {
  color: #52647C;
  font-weight: 700;
}

.contact-options strong {
  color: #233651;
  font-size: 14px;
}

.contact-options > a > .icon {
  color: #87A0AE;
}

.contact-options > a:hover > .icon {
  color: #457A93;
}

.contact-form {
  background: #F8FAFE;
  border-color: #E0E7F2;

  box-shadow:
    0 12px 34px -24px rgba(35,55,98,.24);
}

.form-top {
  color: #223653;
}

.form-top-icon {
  color: #4D849A;
  background: #EAF2F7;
  border-color: #DDE9F0;
}

.contact input,
.contact select,
.contact textarea {
  background: #FFFFFF;
  border-color: #D9E2EF;
  color: #192C48;
}

.contact input::placeholder,
.contact textarea::placeholder {
  color: #62758D;
}

.contact select:invalid {
  color: #8495A3;
}

.contact select option {
  background: #FFFFFF;
  color: #1B2B44;
}

.contact input:focus,
.contact select:focus,
.contact textarea:focus {
  background: #FFFFFF;
  border-color: #6D88BB;
  box-shadow: 0 0 0 3px #E9EEFA;
}

.form-note {
  font-size: 12px;
  color: #576A82;
  line-height: 1.55;
}

/* Email utility links */

.email-utilities {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: -9px 0 5px 59px;
}

.email-utilities a,
.email-utilities button {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  color: #42629A;

  background: none;
  border: 0;
  padding: 0;

  text-decoration: underline;
  text-underline-offset: 3px;
}

.email-utilities .icon {
  width: 13px;
  height: 13px;
}

.email-utilities a:hover,
.email-utilities button:hover {
  color: #20355D;
}

/* Alternative email options */

.form-alternatives {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.form-alternatives button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  border: 1px solid #CDD9E9;
  background: #FFFFFF;
  border-radius: 11px;

  min-height: 42px;
  color: #273D65;
  font-size: 12px;
  font-weight: 750;

  transition:
    border-color .2s,
    background .2s;
}

.form-alternatives button:hover {
  border-color: #8EA6CC;
  background: #F0F4FC;
}

.form-alternatives button .icon {
  width: 14px;
  height: 14px;
}

.email-status {
  font-size: 12px;
  line-height: 1.5;
  color: #365A79;
  margin: 0;
  min-height: 0;
}

.email-status:empty {
  display: none;
}

.contact-orb {
  display: none;
}

/* ==========================================================
   18 — FOOTER
   ========================================================== */

.footer {
  border-top: 1px solid #E5ECF2;
  margin-top: 70px;
}

.footer p,
.back-top {
  color: #546782;
}

.back-top:hover {
  color: #3F7D98;
}

/* ==========================================================
   19 — RESEARCH DETAIL PAGES
   ========================================================== */

.detail-main {
  padding-top: 140px;
}

.detail-back {
  color: #437D98;
}

.detail-kicker {
  color: #4E8095;
}

.detail-hero,
.detail-section {
  background: #FFFFFF;
}

.detail-hero h1,
.detail-section h2 {
  color: #1A3144;
}

.detail-hero h1 {
  font-weight: 800;
  letter-spacing: -.046em;
}

.detail-section h2 {
  font-weight: 750;
}

.detail-hero p,
.detail-section p,
.detail-section li {
  color: #405571;
  font-size: 15px;
  line-height: 1.85;
}

.detail-hero img {
  border-color: #DEE8EF;

  box-shadow:
    0 17px 40px -26px rgba(35,71,91,.28);
}

.detail-pills span {
  color: #466F84;
  background: #ECF3F7;
  border-color: #DCE8EF;
}

.detail-section li::marker {
  color: #6796A7;
}

.detail-caveat {
  border-left-color: #6B9AAF;
  background: #F1F6F9;
  color: #3D5874;
}

/* ==========================================================
   20 — SCROLL REVEAL
   ========================================================== */

.reveal {
  filter: none;
  transform: translateY(21px);

  transition:
    opacity .75s cubic-bezier(.22,1,.36,1),
    transform .75s cubic-bezier(.22,1,.36,1);

  transition-delay: var(--d,0s);
}

.reveal.is-visible {
  transform: translateY(0);
}

.reveal.done {
  transition:
    border-color .25s,
    transform .4s cubic-bezier(.22,1,.36,1),
    box-shadow .25s;
}

/* ==========================================================
   21 — RESPONSIVE STYLING
   ========================================================== */

/* Tablet and smaller desktop */

@media (max-width: 1120px) {
  .toolkit-grid {
    grid-template-columns:
      repeat(4,minmax(0,1fr));
  }
}

@media (max-width: 1100px) {
  .hero {
    width: calc(100% - 40px);
    padding: 60px 34px 0;
    min-height: 540px;
  }

  .hero h1 {
    font-size: clamp(39px,4.3vw,60px);
  }

  .section-heading h2 {
    font-size: clamp(30px,3.5vw,42px);
  }
}

/* Tablet */

@media (max-width: 900px) {
  .hero {
    width: calc(100% - 30px);
    padding: 70px 34px 35px;
    min-height: auto;
  }

  .hero-inner,
  .hero .hero-inner {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .hero-copy {
    padding: 12px 0 24px;
    order: 0;
  }

  .hero .hero-visual {
    order: 1;
    min-height: 370px;
    width: 100%;
    max-width: 500px;
    margin-inline: auto;
  }

  .hero .portrait-wrap {
    width: 270px;
    height: 270px;
  }

  .hero .portrait-backdrop {
    width: 350px;
    height: 350px;
  }

  .hero #hero-dna {
    top: auto;
    bottom: 0;
    right: 0;

    width: 100%;
    height: 52%;
    opacity: .86;

    -webkit-mask-image: linear-gradient(
      180deg,
      transparent,
      #000 26%,
      #000 91%,
      transparent
    );

    mask-image: linear-gradient(
      180deg,
      transparent,
      #000 26%,
      #000 91%,
      transparent
    );
  }

  .nav-links {
    background: rgba(255,255,255,.98);
    border-color: #DFE6F2;
    box-shadow:
      0 20px 42px rgba(48,77,99,.12);
  }

  .nav-link.active {
    background: #F0F4FB;
    color: #294C86;
  }

  .hero-tags {
    margin-top: 26px;
  }
}

/* Mobile */

@media (max-width: 680px) {
  .shell {
    width: calc(100% - 30px);
  }

  .hero {
    width: calc(100% - 20px);
    margin-top: 91px;
    padding: 45px 22px 12px;
    border-radius: 23px;
  }

  .hero-copy {
    padding: 4px 0 18px;
  }

  .hero h1 {
    font-size: clamp(33px,9vw,50px);
    line-height: 1.15;
  }

  .hero h2 {
    font-size: 17px;
  }

  .hero-description {
    font-size: 14px;
    line-height: 1.8;
  }

  .eyebrow {
    font-size: 9px;
    line-height: 1.4;
    margin-bottom: 24px;
  }

  .hero-actions {
    gap: 10px;
  }

  .hero-actions .btn {
    font-size: 12px;
    padding: 12px 14px;
    min-height: 44px;
  }

  .hero .hero-visual {
    min-height: 310px;
  }

  .hero .portrait-wrap {
    width: 224px;
    height: 224px;
  }

  .hero .portrait-backdrop {
    width: 300px;
    height: 300px;
  }

  .hero #hero-dna {
    height: 43%;
    opacity: .76;
  }

  .hero-tags {
    margin-top: 28px;
    flex-wrap: wrap;
    gap: 7px;
  }

  .hero-tags span {
    font-size: 10px;
  }

  .hero-tags span + span::before {
    margin: 0 4px;
  }

  .section {
    padding-top: 67px;
  }

  .section-heading h2,
  .contact h2 {
    font-size: 30px;
  }

  .panel {
    padding: 30px 21px;
  }

  .expertise-grid {
    gap: 12px;
  }

  .expertise-card {
    padding: 26px;
  }

  .stat {
    padding: 18px 20px;
  }

  .stat strong {
    font-size: 34px;
  }

  .pub-body h3 {
    font-size: 16px;
  }

  .contact-form {
    padding: 18px;
  }

  .email-utilities {
    margin: -8px 0 2px 59px;
  }

  .form-alternatives {
    gap: 8px;
  }

  /* Tools section on mobile */

  .toolkit.toolkit-static {
    padding: 29px 20px 25px;
  }

  .toolkit.toolkit-static .section-heading {
    gap: 12px;
    margin-bottom: 21px;
  }

  .toolkit.toolkit-static .toolkit-note {
    text-align: left;
    font-size: 10px;
  }

  .toolkit-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
    gap: 10px;
  }

  .tool-card {
    min-height: 116px;
    padding: 15px 7px;
  }

  .toolkit.toolkit-static .toolkit-footnote {
    margin-top: 20px;
  }

  .footer {
    margin-top: 52px;
  }
}

/* Very small phones */

@media (max-width: 380px) {
  .hero {
    padding-left: 17px;
    padding-right: 17px;
  }

  .hero h1 {
    font-size: 33px;
  }

  .hero-actions {
    flex-wrap: wrap;
  }

  .form-alternatives {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   22 — REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .molecule-one,
  .molecule-two,
  .draw-bond,
  .hero-visual,
  .hero .portrait-wrap::before {
    animation: none !important;
  }

  .draw-bond {
    stroke-dashoffset: 0;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .portrait-wrap,
  .science-artwork {
    transition: none !important;
    translate: none !important;
  }

  .hero #hero-dna {
    opacity: .65;
  }

  .tool-card {
    transition: none;
  }

  .tool-card:hover {
    transform: none;
  }
}