:root {
  --navy: #0a1f5c;
  --royal: #0b4fd1;
  --bright: #1e9bff;
  --cyan: #29b6f6;
  --gold-1: #d4a537;
  --gold-2: #f6d77a;
  --text: #0a1a3f;

  /* One design unit = 1px of the 1600 x 900 reference */
  --u: min(calc(100vw / 1250), calc(100vh / 900));
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: #f7fbff;
  color: var(--text);
  font-family: 'Lexend', sans-serif;
  overflow: hidden;
}

h1,
h2,
p,
ul {
  margin: 0;
  padding: 0;
  font: inherit;
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Hero */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.art-port {
  display: none;
}

.ecg {
  stroke-dasharray: 7 93;
  stroke-dashoffset: 100;
  opacity: .9;
  filter: drop-shadow(0 0 4px #7fd2fb);
  animation: ecgPulse 5s linear infinite;
}

.flares {
  animation: flare 4.5s ease-in-out infinite;
}

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

@keyframes flare {
  0%, 100% { opacity: .35; }
  50% { opacity: .9; }
}

/* Centre stack */
.content {
  position: relative;
  z-index: 2;
  width: min(100%, calc(var(--u) * 900));
  padding-top: calc(var(--u) * 53);
  transform: translateX(calc(var(--u) * 38));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.identity,
.message {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.emblem {
  display: block;
  width: calc(var(--u) * 216);
  height: auto;
  filter: drop-shadow(0 0 calc(var(--u) * 16) rgba(30, 155, 255, .4));
}

.wordmark {
  display: block;
  width: calc(var(--u) * 494);
  height: calc(var(--u) * 77);
  margin-top: calc(var(--u) * -13);
  margin-left: calc(var(--u) * 12);
}

.company {
  display: block;
  margin-top: calc(var(--u) * -3);
  color: #070f28;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: calc(var(--u) * 28);
  line-height: 1;
  letter-spacing: .165em;
  margin-right: -.165em;
  text-transform: uppercase;
}

.tagline {
  position: relative;
  width: calc(var(--u) * 440);
  height: calc(var(--u) * 68);
  margin-top: calc(var(--u) * 4);
}

.tagline-rule {
  position: absolute;
  left: calc(var(--u) * 7);
  top: calc(var(--u) * 25);
  width: calc(var(--u) * 77);
  height: max(1px, calc(var(--u) * 2));
  background: linear-gradient(90deg, rgba(11, 31, 156, 0), #1a1a9c 30%, var(--bright));
}

.tagline-text {
  position: absolute;
  left: calc(var(--u) * 92);
  top: calc(var(--u) * 15);
  font-family: 'Satisfy', cursive;
  font-size: calc(var(--u) * 44);
  line-height: 1.1;
  color: #14149a;
  -webkit-text-stroke: calc(var(--u) * .15) #14149a;
  white-space: nowrap;
  transform: rotate(-3deg);
  transform-origin: left bottom;
}

.swoosh {
  position: absolute;
  left: calc(var(--u) * 178);
  top: calc(var(--u) * 40);
  width: calc(var(--u) * 252);
  height: calc(var(--u) * 23);
}

.coming {
  width: calc(var(--u) * 714);
  margin-top: calc(var(--u) * 26);
  filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 4) rgba(10, 31, 92, .22));
}

.coming svg {
  display: block;
  width: 100%;
  height: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.divider {
  position: relative;
  width: calc(var(--u) * 198);
  height: calc(var(--u) * 4);
  margin-top: calc(var(--u) * 24);
}

/* Thin needle tips with a thicker two-tone core */
.divider::before,
.divider::after {
  content: '';
  position: absolute;
  top: 50%;
  border-radius: 99px;
  transform: translateY(-50%);
}

.divider::before {
  left: 0;
  right: 0;
  height: max(1px, calc(var(--u) * 1));
  background: linear-gradient(90deg, var(--bright) 50%, var(--gold-1) 50%);
}

.divider::after {
  left: 12%;
  right: 12%;
  height: 100%;
  background: linear-gradient(90deg, var(--royal), var(--bright) 49.9%, var(--gold-1) 50%, var(--gold-2));
}

.lead {
  margin-top: calc(var(--u) * 24);
  font-weight: 400;
  font-size: max(10px, calc(var(--u) * 17));
  line-height: 1.3;
  letter-spacing: .2em;
  margin-right: -.2em;
  color: #1c3a78;
  text-transform: uppercase;
}

.features {
  display: flex;
  justify-content: center;
  margin-top: calc(var(--u) * 21);
  margin-left: calc(var(--u) * -14);
  list-style: none;
}

.features li {
  position: relative;
  width: calc(var(--u) * 218);
  font-weight: 300;
  font-size: max(11px, calc(var(--u) * 16));
  line-height: 1.2;
  color: #0c2a60;
}

.features li + li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--u) * 28);
  height: calc(var(--u) * 67);
  width: 1px;
  background: #9fb3cf;
}

.f-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 76);
  height: calc(var(--u) * 76);
  margin: 0 auto calc(var(--u) * 7);
  border-radius: 50%;
  background: radial-gradient(circle, #e8f3fe 55%, #dcedfd);
  color: #0b3a94;
}

.f-icon svg {
  width: 64%;
  height: 64%;
  fill: currentColor;
}

/* Squarer laptops and tablets held sideways: keep the stack centred */
@media (max-aspect-ratio: 139/100) {
  .content {
    justify-content: center;
    padding-bottom: calc(var(--u) * 110);
  }
}

/* Tablets and phones held upright */
@media (max-aspect-ratio: 1/1) {
  :root {
    --u: min(calc(100vw / 830), calc(100vh / 1300));
  }

  body {
    overflow: auto;
  }

  .hero {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    align-items: center;
  }

  .art-land {
    display: none;
  }

  .art-port {
    display: block;
    background: linear-gradient(180deg, #e4f1fe, #f7fbff 34%, #fff 62%);
    overflow: hidden;
  }

  .art-port span {
    position: absolute;
    display: block;
    background-image: url(assets/hero-bg.jpg);
    background-repeat: no-repeat;
  }

  /* Doctor, ECG and cross hexagon, faded behind the logo */
  .p-doctor {
    top: 0;
    right: 0;
    width: 62vw;
    height: min(66vw, 46vh);
    background-size: 215vw auto;
    background-position: right top;
    opacity: .6;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 45%), linear-gradient(to bottom, #000 55%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 45%), linear-gradient(to bottom, #000 55%, transparent);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  /* Navy corner with the gold ribbon */
  .p-corner {
    top: 0;
    left: 0;
    width: 56vw;
    height: 46vw;
    background-size: 215vw auto;
    background-position: left top;
    -webkit-mask-image: radial-gradient(ellipse 100% 100% at 0 0, #000 62%, transparent 100%);
    mask-image: radial-gradient(ellipse 100% 100% at 0 0, #000 62%, transparent 100%);
  }

  /* Gold and blue waves cradling the page */
  .p-wave {
    left: 0;
    right: 0;
    bottom: 0;
    height: 39vw;
    background-size: 190vw auto;
    background-position: -45vw bottom;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%);
    mask-image: linear-gradient(to bottom, transparent, #000 30%);
  }

  .content {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    padding: max(9vh, 64px) 5vw max(25vw, 13vh);
    justify-content: center;
    transform: none;
  }

  .identity {
    --u: min(calc(100vw / 600), calc(100vh / 1120));
  }

  .wordmark {
    margin-left: 0;
  }

  .coming {
    margin-top: max(calc(var(--u) * 34), 3.2vh);
  }

  .lead {
    max-width: 30em;
    margin: max(calc(var(--u) * 26), 2.4vh) 0 0;
    font-size: clamp(12px, 3.2vw, 20px);
    line-height: 1.6;
    letter-spacing: .16em;
  }

  .features {
    width: 100%;
    max-width: 640px;
    margin: max(calc(var(--u) * 36), 3.4vh) 0 0;
  }

  .features li {
    flex: 1 1 0;
    width: auto;
    font-size: clamp(12px, 3.2vw, 18px);
    line-height: 1.3;
  }

  .features li + li::before {
    top: 8%;
    height: 84%;
  }

  .f-icon {
    width: clamp(58px, 16vw, 92px);
    height: clamp(58px, 16vw, 92px);
    margin-bottom: 8px;
  }
}

/* Phones held sideways: brand on one side, message on the other */
@media (orientation: landscape) and (max-height: 520px) {
  :root {
    --u: min(calc(100vh / 500), calc(100vw / 1500));
  }

  .content {
    width: auto;
    height: 100%;
    padding: 0 0 14vh;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--u) * 50);
    transform: translateX(10vw);
  }

  .identity {
    --u: min(calc(100vh / 640), calc(100vw / 1700));
  }

  .tagline-rule {
    display: none;
  }

  /* Soft light behind the text keeps it readable over the doctor image */
  .message {
    background: radial-gradient(closest-side, rgba(255, 255, 255, .9) 70%, rgba(255, 255, 255, 0));
    padding: calc(var(--u) * 24);
    margin: calc(var(--u) * -24);
  }

  .coming {
    width: calc(var(--u) * 560);
    margin-top: 0;
  }

  .lead {
    max-width: calc(var(--u) * 580);
    font-size: max(9px, calc(var(--u) * 15));
    letter-spacing: .12em;
    margin-right: 0;
  }

  .features li {
    width: calc(var(--u) * 190);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ecg,
  .flares {
    animation: none;
    opacity: 0;
  }
}