:root {
  color-scheme: light;
  --ink: #0d3046;
  --muted: #5e7480;
  --line: #ccd9dc;
  --paper: #eef3f2;
  --red: #bf453d;
}

* { box-sizing: border-box; }

html { min-width: 320px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .45;
  pointer-events: none;
  background: radial-gradient(circle at 11% 18%, #fff 0, transparent 31%), radial-gradient(circle at 80% 91%, #dbe8e6 0, transparent 30%);
}

a { color: inherit; }

.site-shell {
  width: min(100%, 1800px);
  min-height: 100svh;
  margin: auto;
  padding: 0 clamp(22px, 4.2vw, 76px);
  display: flex;
  flex-direction: column;
}

.site-header,
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header { min-height: 124px; gap: 24px; }

.brand { display: inline-flex; align-items: center; width: min(250px, 45vw); }
.brand img { display: block; width: 100%; height: auto; }

.header-note,
.site-footer,
.status,
.discipline,
.contact-label,
.visual-top,
.visual-bottom,
.divider {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .17em;
}

.header-note { color: #617987; text-align: right; }
.header-note span { margin: 0 8px; color: #abbdc1; }

.hero {
  flex: 1;
  min-height: 630px;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  background: #f9fbfa;
  box-shadow: 0 26px 70px #1e4e5511, 0 1px 5px #1e4e550a;
  overflow: hidden;
}

.content {
  min-width: 0;
  padding: clamp(48px, 6.3vw, 104px) clamp(36px, 6vw, 98px) clamp(45px, 5vw, 82px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.status { display: inline-flex; align-items: center; gap: 12px; color: var(--red); }
.status-dot { position: relative; width: 7px; height: 7px; background: currentColor; border-radius: 50%; }
.status-dot::after { content: ""; position: absolute; inset: -5px; border: 1px solid currentColor; border-radius: 50%; opacity: .38; animation: pulse 2.8s ease-out infinite; }

h1 {
  margin: clamp(38px, 4.4vw, 76px) 0 clamp(34px, 4.3vw, 72px);
  font-family: Manrope, sans-serif;
  font-size: clamp(48px, 5.45vw, 92px);
  font-weight: 700;
  letter-spacing: -.075em;
  line-height: 1.06;
}

h1 em { color: var(--red); font-style: normal; }

.divider { display: flex; align-items: center; gap: 18px; width: 100%; color: #90a4ab; white-space: nowrap; }
.divider span:first-child { height: 1px; width: 50px; background: var(--red); }

.group-name {
  max-width: 600px;
  margin: 30px 0 0;
  font-family: Manrope, sans-serif;
  font-size: clamp(21px, 2vw, 30px);
  line-height: 1.38;
  letter-spacing: -.04em;
}
.group-name strong { font-weight: 700; }

.discipline { margin: 18px 0 0; color: var(--red); }

.contact-card { width: 100%; max-width: 600px; margin-top: auto; padding-top: 64px; }
.contact-card::before { content: ""; display: block; height: 1px; background: var(--line); margin-bottom: 25px; }
.contact-label { color: #8298a0; }
.contact-card p { max-width: 570px; margin: 13px 0 0; color: #345466; font-size: clamp(15px, 1.17vw, 18px); line-height: 1.7; }
.contact-card a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: #9ab3ba; text-underline-offset: 5px; overflow-wrap: anywhere; transition: color .2s, text-decoration-color .2s; }
.contact-card a em { font-style: italic; }
.contact-card a:hover, .contact-card a:focus-visible { color: var(--red); text-decoration-color: var(--red); }
.contact-card a:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

.visual {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at 52% 46%, #164767 0, #092b44 43%, #071b30 100%);
  color: #d3e9ed;
}
.visual::before,
.visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.visual::before { background: linear-gradient(90deg, #2c789015 1px, transparent 1px), linear-gradient(#2c789015 1px, transparent 1px); background-size: 54px 54px; opacity: .68; }
.visual::after { background: radial-gradient(ellipse at center, transparent 34%, #06172599 100%); }

#dna-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; z-index: -1; }
.visual-noise { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .2; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); }

.visual-top,
.visual-bottom { position: absolute; left: clamp(27px, 3vw, 50px); right: clamp(27px, 3vw, 50px); display: flex; align-items: center; justify-content: space-between; gap: 20px; z-index: 1; }
.visual-top { top: 34px; line-height: 1.55; text-align: right; color: #b2d1d9; }
.visual-bottom { bottom: 34px; color: #a5c9d1; }
.orbit-mark { position: relative; display: block; width: 34px; height: 34px; border: 1px solid #8ec2cf; border-radius: 50%; transform: rotate(-35deg); }
.orbit-mark span:first-child { position: absolute; top: -4px; bottom: -4px; left: 13px; right: 13px; border: 1px solid #8ec2cf; border-radius: 50%; }
.orbit-mark span:nth-child(2) { position: absolute; top: 15px; left: -5px; width: 42px; border-top: 1px solid #8ec2cf; }
.orbit-mark span:last-child { position: absolute; width: 5px; height: 5px; right: 0; top: 0; background: #d7f5f2; border-radius: 50%; }
.visual-index { color: #d6eef0; }

.site-footer { min-height: 75px; gap: 20px; color: #799097; font-size: 10px; }
.footer-separator { margin: 0 9px; color: #b9c9cb; }

@keyframes pulse { 0% { transform: scale(.75); opacity: .5; } 70%, 100% { transform: scale(1.7); opacity: 0; } }

@media (max-width: 1050px) {
  .site-shell { padding: 0 24px; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, .86fr); }
  .content { padding: 55px 42px 48px; }
  h1 { font-size: clamp(45px, 5vw, 65px); }
  .group-name { font-size: 22px; }
  .contact-card { padding-top: 45px; }
}

@media (max-width: 740px) {
  .site-shell { padding: 0 16px; }
  .site-header { min-height: 90px; }
  .brand { width: min(205px, 55vw); }
  .header-note { display: none; }
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .content { padding: 46px clamp(26px, 7vw, 48px) 48px; }
  h1 { margin: 34px 0 40px; font-size: clamp(46px, 9.7vw, 72px); }
  .group-name { margin-top: 24px; font-size: clamp(21px, 5vw, 27px); }
  .contact-card { padding-top: 40px; }
  .visual { min-height: clamp(400px, 100vw, 580px); }
  .visual-top { top: 27px; }
  .visual-bottom { bottom: 27px; }
  .site-footer { min-height: 70px; font-size: 9px; }
}

@media (max-width: 420px) {
  .content { padding-left: 24px; padding-right: 24px; }
  .contact-card a span { display: none; }
  .visual-top, .visual-bottom { left: 23px; right: 23px; }
  .visual-top, .visual-bottom { font-size: 9px; }
  .site-footer span:last-child { max-width: 140px; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}