/*===============================================================================================================================
Hero=============================================================================================================================
===============================================================================================================================*/
.movingBall {
  position: absolute;
  width: clamp(250px, 35vw, 550px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.15;
  pointer-events: none;
  z-index: -1;
  will-change: transform;
}
.movingBallOrange {
  background: var(--orange, #fd6305);
  top: -10%;
  left: -10%;
  animation: orangeFloat 18s ease-in-out infinite alternate;
}
.movingBallBlue {
  background: var(--lightBlue, #51aad1);
  bottom: -10%;
  right: -10%;
  animation: blueFloat 22s ease-in-out infinite alternate;
}
@keyframes orangeFloat {
  0% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(35vw, 20vh) scale(1.1);
  }
  66% {
    transform: translate(60vw, 45vh) scale(0.9);
  }
  100% {
    transform: translate(25vw, 65vh) scale(1.15);
  }
}
@keyframes blueFloat {
  0% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(-35vw, -20vh) scale(1.15);
  }
  66% {
    transform: translate(-60vw, -45vh) scale(0.9);
  }
  100% {
    transform: translate(-20vw, -60vh) scale(1.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .movingBall {
    animation: none;
  }
}
#mainHeading {
  max-width: 24ch;
}
/*"Brand & Web" stays together on the second line instead of each orange word dropping to its own line*/
.mainHeadingLine {
  display: block;
}
#mainHeading .textSelect {
  display: inline;
}

/*===============================================================================================================================
What We Deliver==================================================================================================================
===============================================================================================================================*/
.whatWeDeliver + .brandIntro {
  margin-top: calc(-1 * clamp(24px, 4vw, 56px));
}
.whatWeDeliver .cardsIndv {
  scroll-margin-top: calc(12vh + 32px);
}

/*===============================================================================================================================
Introduction=============================================================================================================================
===============================================================================================================================*/
.brandIntro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  z-index: 1;
  min-height: 100vh;
  padding: calc(12vh + clamp(32px, 5vh, 64px)) clamp(16px, 5vw, 64px)
    calc(clamp(48px, 8vh, 96px) + clamp(24px, 4vw, 56px));
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    radial-gradient(
      ellipse 55% 50% at 0% 100%,
      rgba(253, 100, 5, 0.08),
      transparent 70%
    ),
    var(--white);
  border-radius: clamp(24px, 4vw, 60px) clamp(24px, 4vw, 60px) 0 0;
  box-shadow: 0 -24px 60px rgba(0, 8, 22, 0.35);
}
.brandIntroBalls {
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.1;
  filter: blur(30px);
  pointer-events: none;
}
.brandIntroBall1 {
  top: 6%;
  right: -8%;
  width: clamp(240px, 30vw, 400px);
  background-color: var(--lightBlue);
  translate: 0 calc(var(--introProgress, 0) * 40vh);
}
.brandIntroBall2 {
  bottom: 4%;
  left: -14%;
  width: clamp(320px, 45vw, 650px);
  background-color: var(--orange);
  translate: 0 calc((1 - var(--introProgress, 1)) * 30vh);
}
.brandIntro .brandingHeadingCard {
  margin-bottom: clamp(24px, 4vh, 48px);
}
.brandIntroCard {
  flex: 1;
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.brandIntroParagraph {
  width: 100%;
  display: flex;
}
.brandIntroText {
  max-width: 28em;
  font-family: var(--fontHeading);
  font-weight: 600;
  font-size: clamp(1.3rem, min(0.8rem + 2vw, 5.2vh), 2.75rem); /*The vh cap keeps the paragraph inside one screen on short windows*/
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--navy);
}

/*===============================================================================================================================
What Is Branding=================================================================================================================
===============================================================================================================================*/
.whatIsBranding {
  position: relative;
  z-index: 1;
  margin-top: -1px;
  padding: clamp(64px, 12vh, 144px) clamp(16px, 5vw, 64px)
    calc(clamp(64px, 12vh, 144px) + clamp(24px, 4vw, 56px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 6vh, 64px);
  background-color: #f1f5f5;
}
.brandingHeadingCard,
.brandingCards {
  width: 100%;
  max-width: 1280px;
}
.brandingHeadingCard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.brandingCards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 32px);
  counter-reset: brandingCard;
}
.brandingCard {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(260px, 40vh, 360px);
  padding: clamp(24px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--white);
  background:
    radial-gradient(
      ellipse 70% 60% at 100% 0%,
      rgba(28, 64, 120, 0.6),
      transparent 70%
    ),
    var(--navy);
  border-radius: clamp(24px, 3vw, 40px);
}
.brandingCard:before {
  counter-increment: brandingCard;
  content: "0" counter(brandingCard);
  margin-bottom: auto;
  padding-bottom: clamp(24px, 4vh, 40px);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  color: var(--orange);
}
.brandingCard:after {
  position: absolute;
  content: "";
  z-index: -1;
  top: -140px;
  right: -140px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: rgba(255, 255, 255, 0.1) 1px solid;
  outline: rgba(255, 255, 255, 0.05) 1px solid;
  outline-offset: 48px;
  pointer-events: none;
  transition: border-color 0.4s ease;
}
.brandingCard:hover:after {
  border-color: rgba(253, 100, 5, 0.45);
}
.brandingCardText {
  max-width: 34rem;
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.4rem);
  line-height: 1.6;
  text-wrap: pretty;
  color: rgba(255, 255, 255, 0.85);
}

/*===============================================================================================================================
Branding Benefits================================================================================================================
===============================================================================================================================*/
.effectiveBranding {
  --pillarMax: clamp(240px, 42vh, 420px); /*Height of the tallest pillar*/
  --pillarWidth: clamp(48px, 7.5vw, 104px); /*Width of the widest pillar*/
  --pillarDepth: clamp(8px, 1.2vw, 18px); /*How far the top and side faces reach back*/
  --pillarRadius: clamp(8px, 1.1vw, 16px);
  --pillarStub: calc(var(--pillarRadius) * 2); /*Size the pillars grow from*/
  --pillarAngle: 180deg; /*Direction the pillars grow in, see mobile.css*/
  --pillarsBottom: calc(clamp(64px, 10vh, 120px) + clamp(24px, 4vw, 56px));
  --mistRise: calc(var(--pillarMax) * 0.4); /*How far the mist climbs up the pillars*/
  --mistColor: color-mix(in srgb, var(--lightBlue) 14%, var(--navy));
  position: relative;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
  min-height: 100vh;
  margin-top: calc(-1 * clamp(24px, 4vw, 56px));
  padding: calc(12vh + clamp(32px, 5vh, 64px)) clamp(16px, 5vw, 64px)
    var(--pillarsBottom);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 6vh, 64px);
  color: var(--white);
  background:
    radial-gradient(
      ellipse 60% 45% at 85% 0%,
      rgba(28, 64, 120, 0.5),
      transparent 70%
    ),
    radial-gradient(
      ellipse 70% 40% at 50% 100%,
      rgba(0, 8, 22, 0.8),
      transparent 75%
    ),
    var(--navy);
  border-radius: clamp(24px, 4vw, 56px) clamp(24px, 4vw, 56px) 0 0;
  box-shadow: 0 -24px 60px rgba(0, 8, 22, 0.35);
}
.effectiveBranding:before {
  position: absolute;
  content: "";
  z-index: -1;
  top: -32vw;
  right: -18vw;
  width: 64vw;
  height: 64vw;
  border-radius: 50%;
  border: rgba(255, 255, 255, 0.06) 1px solid;
  outline: rgba(255, 255, 255, 0.03) 1px solid;
  outline-offset: 6vw;
  pointer-events: none;
}
/*Mist bank: solid under the pillars, thinning out as it climbs them*/
.effectiveBranding:after {
  position: absolute;
  content: "";
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(var(--pillarsBottom) + var(--mistRise));
  background: linear-gradient(
    0deg,
    var(--mistColor) 0,
    var(--mistColor) var(--pillarsBottom),
    color-mix(in srgb, var(--mistColor) 80%, transparent)
      calc(var(--pillarsBottom) + var(--mistRise) * 0.22),
    color-mix(in srgb, var(--mistColor) 40%, transparent)
      calc(var(--pillarsBottom) + var(--mistRise) * 0.55),
    transparent 100%
  );
  pointer-events: none;
}
.pillarsHeadingCard,
.pillarsList {
  width: 100%;
  max-width: 1280px;
}
.pillarsHeadingCard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.pillarsHeadingCard .bodyEyebrow {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.pillarsHeadingCard .bodyEyebrow p {
  color: rgba(255, 255, 255, 0.8);
}
.pillarsHeadingCard .secondaryHeadings {
  color: var(--white);
}
.pillarsList {
  position: relative;
  min-height: calc(var(--pillarMax) + 7rem); /*Keeps the page from moving while the pillars grow*/
  margin-top: auto;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: clamp(8px, 1.5vw, 24px);
  counter-reset: pillarsItem;
}
/*Two layers of mist drifting past each other in front of the pillars*/
.pillarsList:before,
.pillarsList:after {
  position: absolute;
  content: "";
  z-index: 2;
  bottom: calc(-0.5 * var(--pillarsBottom));
  left: calc(50% - 50vw);
  width: 200vw;
  height: calc(var(--pillarsBottom) * 0.5 + var(--mistRise) * 1.15);
  background-size: 50% 100%;
  pointer-events: none;
  animation: 46s pillarsMist infinite linear;
}
.pillarsList:before {
  background-image:
    radial-gradient(
      ellipse 24% 46% at 26% 62%,
      rgba(81, 170, 209, 0.34),
      transparent 70%
    ),
    radial-gradient(
      ellipse 20% 34% at 58% 46%,
      rgba(255, 255, 255, 0.2),
      transparent 70%
    ),
    radial-gradient(
      ellipse 22% 42% at 78% 68%,
      rgba(81, 170, 209, 0.24),
      transparent 70%
    );
}
.pillarsList:after {
  background-image:
    radial-gradient(
      ellipse 22% 38% at 24% 50%,
      rgba(255, 255, 255, 0.18),
      transparent 70%
    ),
    radial-gradient(
      ellipse 24% 48% at 50% 70%,
      rgba(81, 170, 209, 0.28),
      transparent 70%
    ),
    radial-gradient(
      ellipse 18% 32% at 76% 42%,
      rgba(81, 170, 209, 0.2),
      transparent 70%
    );
  background-position: 25vw 0;
  animation-duration: 64s;
  animation-direction: reverse;
}
@keyframes pillarsMist {
  to {
    translate: -100vw 0;
  }
}
.reducedMotion .pillarsList:before,
.reducedMotion .pillarsList:after {
  animation: none;
}
.pillarsItem {
  --pillarBase: var(--navy);
  --pillarFace:
    linear-gradient(
      calc(var(--pillarAngle) - 90deg),
      rgba(255, 255, 255, 0.12),
      transparent 55%
    ),
    linear-gradient(
      var(--pillarAngle),
      rgba(81, 170, 209, 0.6),
      rgba(28, 64, 120, 0.75) 42%,
      rgba(28, 64, 120, 0.25)
    );
  --pillarEdge: linear-gradient(
    180deg,
    var(--lightBlue) 0,
    var(--lightBlue) var(--pillarDepth),
    color-mix(in srgb, var(--lightBlue) 18%, var(--navy))
      calc(var(--pillarDepth) + var(--pillarRadius)),
    color-mix(in srgb, var(--navy), var(--black) 45%)
      calc(var(--pillarMax) * 0.5)
  );
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 0.6s ease var(--revealDelay, 0s);
}
.pillarsItem:nth-child(1) {
  --pillarSize: 0.5;
  --pillarWide: 0.45;
}
.pillarsItem:nth-child(2) {
  --pillarSize: 0.66;
  --pillarWide: 0.62;
}
.pillarsItem:nth-child(3) {
  --pillarSize: 0.82;
  --pillarWide: 0.78;
}
.pillarsItem:nth-child(4) {
  --pillarSize: 1;
  --pillarWide: 1;
}
.pillarsItem:nth-child(5) {
  --pillarSize: 0.64;
  --pillarWide: 0.9;
}
.pillarsItem:nth-child(6) {
  --pillarSize: 0.48;
  --pillarWide: 0.5;
}
.pillarsItemMain {
  --pillarBase: var(--orange);
  --pillarFace:
    linear-gradient(
      calc(var(--pillarAngle) - 90deg),
      rgba(255, 255, 255, 0.16),
      transparent 55%
    ),
    linear-gradient(
      var(--pillarAngle),
      rgba(255, 255, 255, 0.22),
      rgba(253, 100, 5, 0) 30%,
      rgba(1, 24, 56, 0.45)
    );
  --pillarEdge: linear-gradient(
    180deg,
    color-mix(in srgb, var(--orange), var(--white) 50%) 0,
    color-mix(in srgb, var(--orange), var(--white) 50%) var(--pillarDepth),
    color-mix(in srgb, var(--orange) 65%, var(--navy))
      calc(var(--pillarDepth) + var(--pillarRadius)),
    color-mix(in srgb, var(--orange) 25%, var(--navy))
      calc(var(--pillarMax) * 0.5)
  );
}
.pillarsItemMain:before {
  position: absolute;
  content: "";
  z-index: -1;
  bottom: 0;
  left: 50%;
  width: clamp(280px, 42vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(253, 100, 5, 0.22),
    rgba(253, 100, 5, 0.06) 45%,
    transparent 68%
  );
  translate: -50% 22%;
  pointer-events: none;
  animation: 6s pillarsHalo infinite ease-in-out alternate;
}
@keyframes pillarsHalo {
  from {
    opacity: 0.65;
    scale: 0.94;
  }
  to {
    opacity: 1;
    scale: 1.04;
  }
}
.reducedMotion .pillarsItemMain:before {
  animation: none;
}
.pillarsItemMain:after {
  position: absolute;
  content: "";
  z-index: 3;
  bottom: calc(-0.4 * var(--pillarsBottom));
  left: 50%;
  width: calc(var(--pillarWidth) * 3.4);
  height: calc(var(--pillarsBottom) * 0.4 + var(--mistRise));
  background: radial-gradient(
    ellipse,
    rgba(253, 100, 5, 0.38),
    rgba(253, 100, 5, 0.12) 45%,
    transparent 70%
  );
  translate: -50% 0;
  pointer-events: none;
  transition: opacity 1.2s ease calc(var(--revealDelay, 0s) + 0.7s);
}
.pillarsLabel {
  max-width: 16ch;
  margin-bottom: clamp(12px, 2vh, 20px);
  font-size: clamp(0.8rem, 0.55rem + 0.5vw, 1.05rem);
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
  color: rgba(255, 255, 255, 0.75);
  transition:
    opacity 0.8s ease calc(var(--revealDelay, 0s) + 0.35s),
    color 0.3s ease;
}
.pillarsLabel:before {
  counter-increment: pillarsItem;
  content: "0" counter(pillarsItem);
  margin-bottom: 6px;
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--orange);
}
.pillarsItemMain .pillarsLabel {
  color: var(--white);
}
.pillarsNoBreak {
  white-space: nowrap;
}
.pillarsColumn {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--pillarWide) * var(--pillarWidth));
  height: max(
    var(--pillarStub),
    calc(var(--pillarGrow, 1) * var(--pillarSize) * var(--pillarMax))
  );
  margin: 0 0 var(--pillarDepth) var(--pillarDepth);
  background: var(--pillarEdge);
  border-radius: var(--pillarRadius);
  transition:
    height 1.4s cubic-bezier(0.22, 1, 0.36, 1) var(--revealDelay, 0s),
    width 1.4s cubic-bezier(0.22, 1, 0.36, 1) var(--revealDelay, 0s),
    filter 0.4s ease;
}
.pillarsColumn:before,
.pillarsColumn:after {
  position: absolute;
  content: "";
}
.pillarsColumn:before {
  --pillarCorner: calc(var(--pillarRadius) * 0.293);
  inset: 0 0 calc(-1 * var(--pillarDepth)) calc(-1 * var(--pillarDepth));
  background: var(--pillarEdge);
  clip-path: polygon(
    var(--pillarCorner) calc(var(--pillarDepth) + var(--pillarCorner)),
    calc(var(--pillarDepth) + var(--pillarCorner)) var(--pillarCorner),
    calc(100% - var(--pillarCorner))
      calc(100% - var(--pillarDepth) - var(--pillarCorner)),
    calc(100% - var(--pillarDepth) - var(--pillarCorner))
      calc(100% - var(--pillarCorner))
  );
}
.pillarsColumn:after {
  inset: var(--pillarDepth) var(--pillarDepth) calc(-1 * var(--pillarDepth))
    calc(-1 * var(--pillarDepth));
  background: var(--pillarFace), var(--pillarBase);
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 1px 0 0 rgba(255, 255, 255, 0.16),
    inset -1px 0 0 rgba(0, 8, 22, 0.3);
}
.pillarsItem:hover .pillarsColumn {
  filter: brightness(1.18);
}
.pillarsItem:hover .pillarsLabel {
  color: var(--white);
}
.pillarsAnimate .pillarsItem {
  --pillarGrow: 0;
  opacity: 0;
}
.pillarsAnimate .pillarsLabel,
.pillarsAnimate .pillarsItemMain:after {
  opacity: 0;
}
.pillarsAnimate.pillarsVisible .pillarsItem {
  --pillarGrow: 1;
  opacity: 1;
}
.pillarsAnimate.pillarsVisible .pillarsLabel,
.pillarsAnimate.pillarsVisible .pillarsItemMain:after {
  opacity: 1;
}

/*===============================================================================================================================
More Than Just A Logo============================================================================================================
===============================================================================================================================*/
.moreThanLogo {
  position: relative;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
  margin-top: calc(-1 * clamp(24px, 4vw, 56px));
  padding: calc(12vh + clamp(32px, 5vh, 64px)) clamp(16px, 5vw, 64px)
    calc(clamp(32px, 6vh, 64px) + clamp(24px, 4vw, 56px));
  display: flex;
  justify-content: center;
  background-color: #f1f5f5;
  border-radius: clamp(24px, 4vw, 56px) clamp(24px, 4vw, 56px) 0 0;
  box-shadow: 0 -24px 60px rgba(0, 8, 22, 0.35);
}
.moreThanLogoCard {
  width: 100%;
  max-width: 1280px;
  padding: clamp(40px, 7vh, 80px) clamp(20px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--navy);
}
.moreThanLogo .movingBall {
  opacity: 0.12;
  animation-duration: 32s;
}
.moreThanLogo .movingBallBlue {
  animation-duration: 38s;
}
.moreThanLogo .moreThanLogoBallSmall {
  top: 30%;
  left: 20%;
  width: clamp(140px, 16vw, 260px);
  background: var(--lightBlue);
  opacity: 0.1;
  animation: orangeFloat 28s ease-in-out -12s infinite alternate-reverse;
}
@media (prefers-reduced-motion: reduce) {
  .moreThanLogo .movingBall {
    animation: none;
  }
}
.moreThanLogoCard .text {
  max-width: 30rem;
  margin-top: clamp(16px, 2.5vh, 24px);
}
.elementsOrbit {
  position: relative;
  width: min(100%, 880px);
  height: clamp(420px, 56vh, 560px);
  margin-top: clamp(32px, 6vh, 64px);
}
/*Orbit rings the cards sit on*/
.elementsOrbit:before,
.elementsOrbit:after {
  position: absolute;
  content: "";
  border-radius: 50%;
  pointer-events: none;
}
.elementsOrbit:before {
  inset: 8% 14%;
  border: rgba(1, 24, 56, 0.12) 1px dashed;
}
.elementsOrbit:after {
  inset: 26% 30%;
  border: rgba(1, 24, 56, 0.06) 1px solid;
}
.elementsCentre {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: max-content;
  translate: -50% -50%;
  transition: opacity 1s ease;
}
.elementsList {
  list-style: none;
}
.elementsItem {
  position: absolute;
  z-index: 1;
  top: var(--elementY);
  left: var(--elementX);
  translate: -50% -50%;
  transition:
    opacity 0.8s ease var(--revealDelay, 0s),
    scale 1s cubic-bezier(0.22, 1, 0.36, 1) var(--revealDelay, 0s);
}
/*Where each card sits on the ring and how it floats, so no two move together*/
.elementsItem:nth-child(1) {
  --elementX: 48%;
  --elementY: 8%;
  --floatTime: 3.6s;
  --floatDelay: -0.4s;
}
.elementsItem:nth-child(2) {
  --elementX: 74%;
  --elementY: 24%;
  --floatTime: 4.3s;
  --floatDelay: -2.6s;
}
.elementsItem:nth-child(3) {
  --elementX: 86%;
  --elementY: 48%;
  --floatTime: 3.9s;
  --floatDelay: -1.3s;
}
.elementsItem:nth-child(4) {
  --elementX: 72%;
  --elementY: 73%;
  --floatTime: 4.6s;
  --floatDelay: -3.4s;
}
.elementsItem:nth-child(5) {
  --elementX: 52%;
  --elementY: 92%;
  --floatTime: 3.4s;
  --floatDelay: -1.9s;
}
.elementsItem:nth-child(6) {
  --elementX: 28%;
  --elementY: 75%;
  --floatTime: 4.1s;
  --floatDelay: -0.9s;
}
.elementsItem:nth-child(7) {
  --elementX: 14%;
  --elementY: 51%;
  --floatTime: 4.8s;
  --floatDelay: -3s;
}
.elementsItem:nth-child(8) {
  --elementX: 26%;
  --elementY: 22%;
  --floatTime: 3.7s;
  --floatDelay: -2.2s;
}
.elementsChip {
  --floatDistance: 5px; /*How far the cards drift up and down*/
  padding: clamp(10px, 1.6vh, 14px) clamp(16px, 1.8vw, 24px);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-size: clamp(0.85rem, 0.65rem + 0.45vw, 1.05rem);
  line-height: 1.3;
  color: var(--navy);
  background-color: var(--white);
  border: rgba(1, 24, 56, 0.1) 1px solid;
  border-radius: clamp(12px, 1.4vw, 16px);
  box-shadow:
    0 18px 36px -20px rgba(1, 24, 56, 0.4),
    0 2px 6px rgba(1, 24, 56, 0.05);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  animation: var(--floatTime, 4s) elementsFloat var(--floatDelay, 0s) infinite
    ease-in-out alternate;
}
.elementsChip:before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(253, 100, 5, 0.18);
}
.elementsChip:hover {
  border-color: rgba(253, 100, 5, 0.45);
  box-shadow:
    0 22px 40px -20px rgba(1, 24, 56, 0.45),
    0 0 0 4px rgba(253, 100, 5, 0.08);
}
@keyframes elementsFloat {
  from {
    transform: translateY(calc(-1 * var(--floatDistance)));
  }
  to {
    transform: translateY(var(--floatDistance));
  }
}
/*The cards only float while they are on screen*/
.elementsPaused .elementsChip {
  animation-play-state: paused;
}
.reducedMotion .elementsChip {
  animation: none;
}
.elementsAnimate .elementsCentre {
  opacity: 0;
}
.elementsAnimate .elementsItem {
  opacity: 0;
  scale: 0.85;
}
.elementsAnimate.elementsVisible .elementsCentre {
  opacity: 1;
}
.elementsAnimate.elementsVisible .elementsItem {
  opacity: 1;
  scale: 1;
}

/*===============================================================================================================================
Why Your Website Matters=========================================================================================================
===============================================================================================================================*/
.websiteMatters {
  position: relative;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
  margin-top: calc(-1 * clamp(24px, 4vw, 56px));
  padding: calc(12vh + clamp(56px, 11vh, 136px)) clamp(16px, 5vw, 64px)
    clamp(48px, 9vh, 112px);
  display: flex;
  justify-content: center;
  color: var(--white);
  background:
    radial-gradient(
      ellipse 60% 50% at 85% 0%,
      rgba(28, 64, 120, 0.55),
      transparent 70%
    ),
    radial-gradient(
      ellipse 40% 35% at 0% 60%,
      rgba(253, 100, 5, 0.1),
      transparent 70%
    ),
    var(--navy);
  border-radius: clamp(24px, 4vw, 56px) clamp(24px, 4vw, 56px) 0 0;
  box-shadow: 0 -24px 60px rgba(0, 8, 22, 0.35);
}
.websiteMatters:before {
  position: absolute;
  content: "";
  z-index: -1;
  top: -22vw;
  right: -16vw;
  width: 58vw;
  height: 58vw;
  border-radius: 50%;
  border: rgba(255, 255, 255, 0.07) 1px solid;
  outline: rgba(255, 255, 255, 0.035) 1px solid;
  outline-offset: 7vw;
  pointer-events: none;
}
.mattersContent,
.essentialsContent {
  width: 100%;
  max-width: 1600px; /*Wider than the other sections so the big type has room*/
}
/*Heading on the left, paragraph on the right*/
.mattersContent {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: clamp(32px, 5vw, 96px);
}
.mattersHeadingCard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mattersContent .bodyEyebrow,
.essentialsContent .bodyEyebrow {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.mattersContent .bodyEyebrow p,
.essentialsContent .bodyEyebrow p {
  color: rgba(255, 255, 255, 0.8);
}
.mattersHeading {
  font-size: clamp(2rem, 5.2vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--white);
}
.mattersLine {
  display: block;
}
.mattersText {
  justify-self: end;
  max-width: 34rem;
  padding-bottom: 0.35em;
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.35rem);
  line-height: 1.6;
  text-wrap: pretty;
  color: rgba(255, 255, 255, 0.75);
}

/*===============================================================================================================================
What A Website Should Do=========================================================================================================
===============================================================================================================================*/
.websiteEssentials {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-top: -1px;
  padding: 0 clamp(16px, 5vw, 64px)
    calc(clamp(72px, 13vh, 152px) + clamp(24px, 4vw, 56px));
  display: flex;
  justify-content: center;
  color: var(--white);
  background:
    radial-gradient(
      ellipse 55% 40% at 100% 100%,
      rgba(28, 64, 120, 0.5),
      transparent 70%
    ),
    var(--navy);
}
.essentialsContent {
  position: relative;
  padding-top: clamp(32px, 6vh, 64px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-top: rgba(255, 255, 255, 0.14) 1px solid;
}
.essentialsContent:before {
  position: absolute;
  content: "";
  top: -2px;
  left: 0;
  width: clamp(56px, 9vw, 144px);
  height: 3px;
  border-radius: 999px;
  background-color: var(--orange);
}
/*Without motion the statements are a plain list*/
.essentialsList {
  width: 100%;
  margin-top: clamp(8px, 2vh, 24px);
  list-style: none;
  counter-reset: essentialsItem;
}
.essentialsItem {
  position: relative;
  padding: clamp(20px, 4vh, 40px) 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.essentialsItem:before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.12);
}
.essentialsItem:after {
  counter-increment: essentialsItem;
  content: "0" counter(essentialsItem);
  order: -1;
  margin-bottom: clamp(8px, 1.4vh, 14px);
  font-size: clamp(0.7rem, 0.65rem + 0.2vw, 0.9rem);
  letter-spacing: 0.2em;
  color: var(--orange);
}
.essentialsText {
  width: fit-content;
  max-width: 100%;
  font-family: var(--fontHeading);
  font-weight: 700;
  font-size: clamp(1.7rem, 4.2vw, 4.8rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--white);
}
/*With motion on, the statements share one spot and take turns being typed and erased*/
.essentialsAnimate {
  display: grid;
  grid-template-rows: auto minmax(clamp(112px, 22vh, 240px), auto); /*The row is as tall as the longest statement, so nothing moves*/
}
.essentialsAnimate:before {
  content: attr(data-count);
  grid-area: 1 / 1;
  font-size: clamp(0.7rem, 0.65rem + 0.2vw, 0.9rem);
  letter-spacing: 0.2em;
  color: var(--orange);
}
.essentialsAnimate .essentialsItem {
  grid-area: 2 / 1;
  padding: 0;
  justify-content: center;
}
.essentialsAnimate .essentialsItem:before,
.essentialsAnimate .essentialsItem:after {
  display: none;
}
.essentialsWord {
  display: inline-block;
  white-space: nowrap;
}
.essentialsLetter {
  opacity: 0;
  transition: opacity 0.12s ease;
}
.essentialsTyped {
  opacity: 1;
  transition-duration: 0.25s;
}
.essentialsCaret {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(2px, 0.25vw, 4px);
  border-radius: 999px;
  background-color: var(--orange);
  box-shadow: 0 0 14px rgba(253, 100, 5, 0.6);
  pointer-events: none;
}
.essentialsCaretResting {
  animation: 0.9s essentialsCaret infinite ease-in-out alternate;
}
@keyframes essentialsCaret {
  to {
    opacity: 0.25;
  }
}
/*The whole statement for screen readers, because the letters on screen are split up*/
.essentialsRead {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  white-space: nowrap;
  clip-path: inset(50%);
}

/*===============================================================================================================================
Foundations Of Great Web Design==================================================================================================
===============================================================================================================================*/
.webFoundations {
  --sheetLine: rgba(1, 24, 56, 0.1);
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * clamp(24px, 4vw, 56px));
  padding: calc(12vh + clamp(32px, 5vh, 64px)) clamp(16px, 5vw, 64px)
    calc(clamp(48px, 8vh, 96px) + clamp(24px, 4vw, 56px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 7vh, 80px);
  color: var(--navy);
  background-color: #f1f5f5;
  border-radius: clamp(24px, 4vw, 56px) clamp(24px, 4vw, 56px) 0 0;
  box-shadow: 0 -24px 60px rgba(0, 8, 22, 0.35);
}
.foundationsHeadingCard,
.foundationsBuild {
  width: 100%;
  max-width: 1280px;
}
.foundationsHeadingCard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.foundationsHeading {
  font-size: clamp(1.8rem, 5.2vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.foundationsLine {
  display: block;
}
.foundationsIntro {
  width: 100%;
  margin-top: clamp(24px, 5vh, 56px);
  padding-top: clamp(20px, 3.5vh, 36px);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: clamp(16px, 5vw, 96px);
  border-top: var(--sheetLine) 1px solid;
}
.foundationsLead {
  max-width: 22ch;
  font-family: var(--fontHeading);
  font-weight: 700;
  font-size: clamp(1.15rem, 0.9rem + 1vw, 1.9rem);
  line-height: 1.2;
  text-wrap: balance;
}
.foundationsIntro .text {
  margin-top: 0;
}
/*The six principles on the left, the blueprint they plug into on the right*/
.foundationsBuild {
  --buildGap: clamp(24px, 4vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--buildGap);
}
.foundationsTabs {
  display: flex;
  flex-direction: column;
}
.foundationsTab {
  position: relative;
  flex: 1;
  padding: clamp(12px, 2vh, 20px) 0;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
  font-family: var(--fontHeading);
  font-weight: 700;
  line-height: 1.15;
  text-align: left;
  color: rgba(1, 24, 56, 0.4);
  background: none;
  border: none;
  border-top: var(--sheetLine) 1px solid;
  cursor: pointer;
  transition: color 0.3s ease;
}
.foundationsTab:last-child {
  border-bottom: var(--sheetLine) 1px solid;
}
.foundationsTab:hover,
.foundationsTabActive {
  color: var(--navy);
}
.foundationsTab:focus-visible {
  outline: var(--orange) 2px solid;
  outline-offset: 4px;
}
.foundationsNumber {
  min-width: 1.6em;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.6rem);
  line-height: 1;
  transition: color 0.3s ease;
}
.foundationsTabActive .foundationsNumber {
  color: var(--orange);
}
.foundationsName {
  font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.35rem);
}
/*Shows how long the picked principle stays up while they take turns on their own*/
.foundationsTab:before {
  position: absolute;
  content: "";
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--orange);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.foundationsTabActive:before {
  transform: none;
}
.foundationsCycling .foundationsTabActive:before {
  animation: var(--cycleTime, 6s) foundationsProgress linear both;
}
@keyframes foundationsProgress {
  from {
    transform: scaleX(0);
  }
}
/*Line that connects the picked principle to the blueprint*/
.foundationsTab:after {
  content: "";
  flex: 1;
  min-width: 0;
  height: 9px;
  margin-right: calc(-1 * var(--buildGap));
  background:
    radial-gradient(
      circle at calc(100% - 4.5px) 50%,
      var(--orange) 4px,
      transparent 4.5px
    ),
    linear-gradient(var(--orange), var(--orange)) 0 50% / calc(100% - 4px) 1px
      no-repeat;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition:
    opacity 0.3s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.foundationsTabActive:after {
  opacity: 1;
  transform: none;
}
/*Blueprint sheet: drawing area on top, title block underneath*/
.foundationsSheet {
  --sheetGrid: clamp(20px, 2.2vw, 32px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(rgba(1, 24, 56, 0.045) 1px, transparent 1px) 0 0 / 100%
      var(--sheetGrid),
    linear-gradient(90deg, rgba(1, 24, 56, 0.045) 1px, transparent 1px) 0 0 /
      var(--sheetGrid) 100%,
    var(--white);
  border: var(--sheetLine) 1px solid;
  border-radius: clamp(20px, 2.4vw, 32px);
  box-shadow: 0 40px 80px -48px rgba(1, 24, 56, 0.35);
}
.blueprintArea {
  flex-shrink: 0;
  height: clamp(300px, 44vh, 440px); /*Fixed, so the page never moves when the blueprint changes*/
  padding: clamp(18px, 2.6vw, 32px) clamp(16px, 3vw, 40px) 0;
  display: flex;
  justify-content: center;
}
.blueprintFrame {
  width: min(100%, 620px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
/*Dimension line showing how wide the screen is*/
.blueprintMeasure {
  position: relative;
  flex-shrink: 0;
  height: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: rgba(1, 24, 56, 0.35) 1px solid;
  border-left: rgba(1, 24, 56, 0.35) 1px solid;
}
.blueprintMeasure:before {
  position: absolute;
  content: "";
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background-color: rgba(1, 24, 56, 0.35);
}
.blueprintMeasure:after {
  position: relative;
  content: "1440 px";
  padding: 0 8px;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: rgba(1, 24, 56, 0.6);
  background-color: var(--white);
}
/*The website itself, sized in em so everything inside scales together*/
.blueprint {
  flex: 1;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  font-size: clamp(8px, 0.5rem + 0.3vw, 12px);
  line-height: 1.3;
  color: var(--navy);
  background-color: var(--white);
  border: rgba(1, 24, 56, 0.16) 1px solid;
  border-bottom: none;
  border-radius: 1.2em 1.2em 0 0;
  box-shadow: 0 1.6em 3em -1.2em rgba(1, 24, 56, 0.3);
  transition:
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}
.blueprintBar {
  padding: 0.8em 1em;
  display: flex;
  align-items: center;
  gap: 1em;
  background-color: #f1f5f5;
  border-bottom: var(--sheetLine) 1px solid;
}
.blueprintDots {
  flex-shrink: 0;
  width: 0.6em;
  height: 0.6em;
  margin-right: 2em;
  border-radius: 50%;
  background-color: rgba(1, 24, 56, 0.2);
  box-shadow:
    1em 0 0 rgba(1, 24, 56, 0.2),
    2em 0 0 rgba(1, 24, 56, 0.2);
}
.blueprintUrl {
  flex: 1;
  overflow: hidden;
  min-width: 0;
  padding: 0.45em 1em;
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: rgba(1, 24, 56, 0.55);
  background-color: var(--white);
  border: var(--sheetLine) 1px solid;
  border-radius: 999px;
  transition:
    color 0.4s ease,
    border-color 0.4s ease;
}
.blueprintLock {
  position: relative;
  flex-shrink: 0;
  width: 0.75em;
  height: 0.6em;
  margin: 0.3em 0.7em 0 0;
  border-radius: 0.12em;
  background-color: currentColor;
  transition: color 0.4s ease;
}
.blueprintLock:before {
  position: absolute;
  content: "";
  bottom: 100%;
  left: 50%;
  width: 0.3em;
  height: 0.3em;
  border: currentColor 0.12em solid;
  border-bottom: none;
  border-radius: 0.3em 0.3em 0 0;
  translate: -50% 0;
}
.blueprintSecure {
  transition: color 0.4s ease;
}
.blueprintSpeed {
  flex-shrink: 0;
  letter-spacing: 0.08em;
  color: var(--orange);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.blueprintLoad {
  flex-shrink: 0;
  height: 2px;
  background-color: var(--orange);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.blueprintPage {
  flex: 1;
  min-height: 0;
  padding: 1.6em;
  display: flex;
  flex-direction: column;
  gap: 1.6em;
}
.blueprintNav,
.blueprintHero,
.blueprintCards,
.blueprintLinks,
.blueprintAction {
  position: relative;
}
.blueprintNav {
  display: flex;
  align-items: center;
  gap: 1em;
}
.blueprintLogo {
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background-color: var(--navy);
}
.blueprintLinks {
  margin-left: auto;
  display: flex;
  gap: 1em;
}
.blueprintLinks span {
  width: 3.2em;
  height: 0.5em;
  border-radius: 999px;
  background-color: rgba(1, 24, 56, 0.2);
  transition: background-color 0.4s ease;
}
.blueprintButton,
.blueprintAction {
  padding: 0.55em 1.2em;
  white-space: nowrap;
  color: var(--white);
  border-radius: 999px;
}
.blueprintButton {
  background-color: var(--navy);
}
.blueprintAction {
  margin-top: 0.4em;
  background-color: var(--orange);
}
.blueprintHero {
  padding: 1.6em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8em;
  background-color: #f1f5f5;
  border-radius: 1em;
}
.blueprintTitle {
  max-width: 14em;
  font-family: var(--fontHeading);
  font-weight: 700;
  font-size: 1.9em;
  line-height: 1.1;
}
.blueprintLine {
  width: 70%;
  height: 0.5em;
  border-radius: 999px;
  background-color: rgba(1, 24, 56, 0.16);
  transition: background-color 0.4s ease;
}
.blueprintLine + .blueprintLine {
  width: 48%;
}
.blueprintCards {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}
.blueprintCard {
  flex: 1 1 28%;
  height: 6em;
  background-color: #f1f5f5;
  border: var(--sheetLine) 1px solid;
  border-radius: 0.8em;
}
/*Labels that only show for the principle they belong to*/
.blueprintLinks:after,
.blueprintAction:after,
.blueprintNav:before,
.blueprintHero:before,
.blueprintCards:before {
  position: absolute;
  z-index: 1;
  font-family: var(--fontBody);
  font-size: 0.85em;
  line-height: 1.7;
  color: var(--white);
  background-color: var(--orange);
  border-radius: 999px;
  opacity: 0;
  transition:
    opacity 0.4s ease,
    scale 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/*01 User Experience: the route from the menu to the main button*/
.blueprintLinks:after,
.blueprintAction:after {
  content: "1";
  top: -2em;
  right: 0;
  width: 1.7em;
  text-align: center;
  scale: 0.4;
}
.blueprintAction:after {
  content: "2";
  transition-delay: 0.25s;
}
.lensExperience .blueprintLinks span {
  background-color: var(--orange);
}
.lensExperience .blueprintLinks:after,
.lensExperience .blueprintAction:after {
  opacity: 1;
  scale: 1;
}
.lensExperience .blueprintAction {
  animation: 1.8s blueprintPing infinite ease-out;
}
@keyframes blueprintPing {
  from {
    box-shadow: 0 0 0 0 rgba(253, 100, 5, 0.5);
  }
  to {
    box-shadow: 0 0 0 1em rgba(253, 100, 5, 0);
  }
}
/*02 Responsive Design: the same page narrows down to a phone*/
.lensResponsive .blueprintFrame {
  width: min(62%, 220px);
}
.lensResponsive .blueprintMeasure:after {
  content: "390 px";
  color: var(--orange);
}
.lensResponsive .blueprintDots,
.lensResponsive .blueprintLinks {
  display: none;
}
.lensResponsive .blueprintButton {
  margin-left: auto;
}
.lensResponsive .blueprintCard {
  flex-basis: 100%;
}
/*03 Performance: the page loads and paints almost at once*/
.lensPerformance .blueprintSpeed {
  opacity: 1;
}
.lensPerformance .blueprintLoad {
  transform: none;
  animation: 2.6s blueprintLoad infinite cubic-bezier(0.22, 1, 0.36, 1);
}
.lensPerformance .blueprintHero,
.lensPerformance .blueprintCard {
  animation: 2.6s blueprintPaint infinite ease-out;
}
.lensPerformance .blueprintCard:nth-child(2) {
  animation-delay: 0.08s;
}
.lensPerformance .blueprintCard:nth-child(3) {
  animation-delay: 0.16s;
}
@keyframes blueprintLoad {
  0% {
    transform: scaleX(0);
  }
  30%,
  85% {
    transform: none;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blueprintPaint {
  0% {
    opacity: 0.15;
  }
  16%,
  100% {
    opacity: 1;
  }
}
/*04 Accessibility: stronger text and a focus ring that steps through the controls*/
.lensAccessibility .blueprintLine {
  background-color: rgba(1, 24, 56, 0.5);
}
.lensAccessibility .blueprintLogo,
.lensAccessibility .blueprintButton,
.lensAccessibility .blueprintAction {
  outline: var(--orange) 2px solid;
  outline-offset: 3px;
  animation: 3.6s blueprintFocus infinite steps(1);
}
.lensAccessibility .blueprintButton {
  animation-delay: -2.4s;
}
.lensAccessibility .blueprintAction {
  animation-delay: -1.2s;
}
@keyframes blueprintFocus {
  33.4% {
    outline-color: transparent;
  }
}
/*05 SEO: the structure search engines read*/
.blueprintNav:before,
.blueprintHero:before,
.blueprintCards:before {
  content: "<nav>";
  top: -0.9em;
  left: 0.8em;
  padding: 0 0.7em;
}
.blueprintHero:before {
  content: "<h1>";
  transition-delay: 0.12s;
}
.blueprintCards:before {
  content: "<section>";
  transition-delay: 0.24s;
}
.blueprintNav,
.blueprintHero,
.blueprintCards {
  outline: transparent 1px dashed;
  outline-offset: 0.4em;
  transition: outline-color 0.4s ease;
}
.lensSeo .blueprintNav,
.lensSeo .blueprintHero,
.lensSeo .blueprintCards {
  outline-color: rgba(253, 100, 5, 0.7);
}
.lensSeo .blueprintNav:before,
.lensSeo .blueprintHero:before,
.lensSeo .blueprintCards:before {
  opacity: 1;
}
.lensSeo .blueprintUrl {
  color: var(--navy);
  border-color: var(--orange);
}
/*06 Security: a locked address and a protected frame*/
.lensSecurity .blueprintUrl {
  border-color: var(--orange);
}
.lensSecurity .blueprintLock,
.lensSecurity .blueprintSecure {
  color: var(--orange);
}
.lensSecurity .blueprint {
  border-color: var(--orange);
  box-shadow:
    0 0 0 0.5em rgba(253, 100, 5, 0.14),
    0 1.6em 3em -1.2em rgba(1, 24, 56, 0.3);
  animation: 2.2s blueprintShield infinite ease-in-out alternate;
}
@keyframes blueprintShield {
  to {
    box-shadow:
      0 0 0 0.9em rgba(253, 100, 5, 0.05),
      0 1.6em 3em -1.2em rgba(1, 24, 56, 0.3);
  }
}
.foundationsPaused .blueprintArea *,
.foundationsPaused .foundationsTab:before {
  animation-play-state: paused;
}
.reducedMotion .blueprintArea * {
  animation: none;
}
/*Title block: the picked principle written out*/
.foundationsPanels {
  flex: 1;
  padding: clamp(18px, 2.6vw, 32px) clamp(18px, 3vw, 40px);
  background-color: var(--white);
  border-top: var(--sheetLine) 1px solid;
}
.foundationsPanel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  column-gap: clamp(16px, 3vw, 40px);
}
.foundationsPanel + .foundationsPanel {
  margin-top: clamp(16px, 3vh, 28px);
}
.foundationsPanelNumber {
  grid-row: 1 / 3;
  align-self: center;
  min-width: 1.3em;
  font-family: var(--fontHeading);
  font-weight: 700;
  font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.6rem);
  line-height: 1;
  color: var(--orange);
}
.foundationsPanel .smallHeadings {
  max-width: none;
}
.foundationsPanelText {
  max-width: 40rem;
  margin-top: 6px;
  font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.1rem);
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--gray);
}
/*Once the script is running the six panels share one spot, so its height fits the longest one*/
.foundationsReady .foundationsPanels {
  display: grid;
}
.foundationsReady .foundationsPanel {
  grid-area: 1 / 1;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  translate: 0 12px;
  transition:
    opacity 0.3s ease,
    translate 0.3s ease,
    visibility 0s 0.3s;
}
.foundationsReady .foundationsPanelActive {
  opacity: 1;
  visibility: visible;
  translate: none;
  transition:
    opacity 0.5s ease 0.15s,
    translate 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
    visibility 0s;
}

/*===============================================================================================================================
Recent Websites==================================================================================================================
===============================================================================================================================*/
.brandWork {
  margin-top: calc(-1 * clamp(24px, 4vw, 56px));
  padding-bottom: calc(clamp(64px, 12vh, 144px) + clamp(24px, 4vw, 56px));
}
.brandWork .webIntroCard {
  width: min(100%, 980px);
}
.brandWork .contactCTA {
  display: inline-block;
  text-decoration: none;
}
.brandWork .contactCTA:focus-visible {
  outline-color: var(--navy);
}
.brandWork .webCard {
  text-decoration: none;
  border-radius: calc(var(--cardRadius) - var(--cardInset));
  outline: none;
}
.brandWork .webCard:focus-visible {
  outline: var(--cardAccent) 2px solid;
  outline-offset: 4px;
}
.brandWork .webCardBrowser {
  box-shadow: 0 40px 80px -24px color-mix(in srgb, var(--cardBg) 45%, transparent);
  transition:
    border-color 0.4s ease,
    box-shadow 0.6s ease;
}
.brandWork .webCard:hover .webCardBrowser,
.brandWork .webCard:focus-visible .webCardBrowser {
  box-shadow:
    0 40px 80px -24px color-mix(in srgb, var(--cardBg) 45%, transparent),
    0 0 90px -20px color-mix(in srgb, var(--cardAccent) 50%, transparent);
}
.moreThanLogoCard .text a,
.brandWork .webIntroCard .text a {
  text-decoration: underline rgba(253, 100, 5, 0.6) 1px;
  text-underline-offset: 4px;
  color: var(--navy);
  transition:
    color 0.3s ease,
    text-decoration-color 0.3s ease;
}
.moreThanLogoCard .text a:hover,
.brandWork .webIntroCard .text a:hover {
  text-decoration-color: var(--orange);
  color: var(--orange);
}
.moreThanLogoCard .text a:focus-visible,
.brandWork .webIntroCard .text a:focus-visible {
  outline: var(--orange) 2px solid;
  outline-offset: 3px;
}

/*===============================================================================================================================
Signs It's Time To Refresh=======================================================================================================
===============================================================================================================================*/
.refreshSigns {
  position: relative;
  z-index: 1;
  isolation: isolate;
  margin-top: calc(-1 * clamp(24px, 4vw, 56px));
  padding: calc(12vh + clamp(32px, 5vh, 64px)) clamp(16px, 5vw, 64px)
    calc(clamp(64px, 12vh, 144px) + clamp(24px, 4vw, 56px));
  display: flex;
  justify-content: center;
  color: var(--white);
  background:
    radial-gradient(
      ellipse 55% 30% at 90% 8%,
      rgba(81, 170, 209, 0.16),
      transparent 70%
    ),
    radial-gradient(
      ellipse 50% 28% at 5% 70%,
      rgba(253, 100, 5, 0.1),
      transparent 70%
    ),
    radial-gradient(
      ellipse 60% 30% at 70% 100%,
      rgba(28, 64, 120, 0.5),
      transparent 70%
    ),
    linear-gradient(180deg, var(--navy), #000816);
  border-radius: clamp(24px, 4vw, 56px) clamp(24px, 4vw, 56px) 0 0;
  box-shadow: 0 -24px 60px rgba(0, 8, 22, 0.35);
}
/*Two layers of stars that twinkle out of step with each other*/
.refreshSigns:before,
.refreshSigns:after {
  position: absolute;
  content: "";
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: 5s signsTwinkle infinite ease-in-out alternate;
}
.refreshSigns:before {
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.8) 1px, transparent 1.5px),
    radial-gradient(circle at 37% 62%, rgba(255, 255, 255, 0.5) 1px, transparent 1.5px),
    radial-gradient(circle at 58% 9%, rgba(255, 255, 255, 0.7) 1px, transparent 1.5px),
    radial-gradient(circle at 71% 44%, rgba(255, 255, 255, 0.45) 1px, transparent 1.5px),
    radial-gradient(circle at 88% 81%, rgba(255, 255, 255, 0.75) 1px, transparent 1.5px),
    radial-gradient(circle at 23% 91%, rgba(255, 255, 255, 0.55) 1px, transparent 1.5px),
    radial-gradient(circle at 94% 27%, rgba(255, 255, 255, 0.6) 1px, transparent 1.5px);
  background-size: 470px 530px;
}
.refreshSigns:after {
  background-image:
    radial-gradient(circle at 8% 52%, rgba(255, 255, 255, 0.9) 1.4px, transparent 2px),
    radial-gradient(circle at 29% 14%, rgba(81, 170, 209, 0.9) 1.4px, transparent 2px),
    radial-gradient(circle at 49% 76%, rgba(255, 255, 255, 0.7) 1.4px, transparent 2px),
    radial-gradient(circle at 66% 31%, rgba(255, 255, 255, 0.85) 1.4px, transparent 2px),
    radial-gradient(circle at 83% 63%, rgba(255, 210, 173, 0.9) 1.4px, transparent 2px),
    radial-gradient(circle at 96% 6%, rgba(255, 255, 255, 0.7) 1.4px, transparent 2px);
  background-size: 730px 610px;
  animation-duration: 7s;
  animation-delay: -3s;
}
@keyframes signsTwinkle {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}
.reducedMotion .refreshSigns:before,
.reducedMotion .refreshSigns:after {
  animation: none;
}
/*Eyebrow and heading centred on top, the cards underneath*/
.signsContent {
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 8vh, 88px);
}
.signsHeadingCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.signsHeadingCard .bodyEyebrow {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.signsHeadingCard .bodyEyebrow p {
  color: rgba(255, 255, 255, 0.8);
}
.signsHeadingCard .thirdHeadings {
  max-width: 20ch;
  color: var(--white);
}
/*The cards are scattered across the space, each one a little lower than the one before*/
.signsList {
  --signsCard: clamp(200px, 23vw, 310px); /*Size of one card*/
  position: relative;
  width: 100%;
  height: calc(var(--signsCard) * 6.3); /*The last card sits 5.3 cards down, plus its own height*/
  list-style: none;
  counter-reset: signsCard;
}
.signsCard {
  position: absolute;
  top: calc(var(--signsCard) * var(--cardY));
  left: calc((100% - var(--signsCard)) * var(--cardX));
  overflow: hidden;
  isolation: isolate;
  width: var(--signsCard);
  aspect-ratio: 1;
  padding: clamp(18px, 2.2vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--gray);
  background-color: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: rgba(255, 255, 255, 0.7) 1px solid;
  border-radius: clamp(14px, 1.6vw, 22px);
  box-shadow:
    0 30px 70px -30px rgba(81, 170, 209, 0.45),
    0 0 0 rgba(253, 100, 5, 0);
  rotate: var(--cardTilt);
}
/*Where each card floats: --cardX is how far across (0 left, 1 right), --cardY how far down in card heights*/
.signsCard:nth-child(1) {
  --cardX: 0.05;
  --cardY: 0;
  --cardTilt: -3deg;
}
.signsCard:nth-child(2) {
  --cardX: 0.5;
  --cardY: 0.66;
  --cardTilt: 2deg;
}
.signsCard:nth-child(3) {
  --cardX: 0.95;
  --cardY: 1.46;
  --cardTilt: -2deg;
}
.signsCard:nth-child(4) {
  --cardX: 0.4;
  --cardY: 2.16;
  --cardTilt: 3deg;
}
.signsCard:nth-child(5) {
  --cardX: 0;
  --cardY: 3;
  --cardTilt: -2deg;
}
.signsCard:nth-child(6) {
  --cardX: 0.62;
  --cardY: 3.7;
  --cardTilt: 2deg;
}
.signsCard:nth-child(7) {
  --cardX: 0.18;
  --cardY: 4.55;
  --cardTilt: -3deg;
}
.signsCard:nth-child(8) {
  --cardX: 0.78;
  --cardY: 5.3;
  --cardTilt: 2deg;
}
.signsCard:before {
  counter-increment: signsCard;
  content: "0" counter(signsCard);
  margin-bottom: clamp(8px, 1.4vh, 16px);
  font-size: clamp(0.7rem, 0.65rem + 0.2vw, 0.9rem);
  letter-spacing: 0.2em;
  color: var(--orange);
}
/*The shine: a soft grey band that keeps sweeping across the glass, behind the words*/
.signsCard:after {
  position: absolute;
  content: "";
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(190, 208, 220, 0.8) 50%,
    transparent 70%
  );
  pointer-events: none;
  animation: 5s signsShine infinite ease-in-out;
}
/*Neighbouring cards catch the light at different moments*/
.signsCard:nth-child(even):after {
  animation-delay: -2.4s;
}
.signsCard:nth-child(3n):after {
  animation-delay: -1.2s;
}
@keyframes signsShine {
  0% {
    translate: -110% 0;
  }
  55%,
  100% {
    translate: 110% 0;
  }
}
.reducedMotion .signsCard:after {
  animation: none;
}
.signsCard:hover {
  box-shadow:
    0 30px 70px -30px rgba(81, 170, 209, 0.45),
    0 0 60px -12px rgba(253, 100, 5, 0.6);
}
.signsText {
  font-size: clamp(0.9rem, 0.82rem + 0.3vw, 1.1rem);
  line-height: 1.45;
  text-wrap: balance;
}
.signsBig {
  margin: 0.2em 0;
  display: block;
  font-family: var(--fontHeading);
  font-weight: 700;
  font-size: clamp(1.4rem, 0.9rem + 1.5vw, 2.2rem);
  line-height: 1.05;
  color: var(--navy);
}
/*Each card pops up, slightly past full size and back, once enough of it has scrolled into view*/
.signsAnimate .signsCard {
  opacity: 0;
  scale: 0.7;
  translate: 0 40px;
  transition:
    opacity 0.6s ease var(--revealDelay, 0s),
    translate 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--revealDelay, 0s),
    scale 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) var(--revealDelay, 0s),
    box-shadow 0.4s ease;
}
.signsAnimate .signsShown {
  opacity: 1;
  scale: 1;
  translate: none;
}

/*===============================================================================================================================
Final CTA========================================================================================================================
===============================================================================================================================*/
.refreshSigns + .finalCTA {
  margin-top: calc(-1 * clamp(24px, 4vw, 56px));
  border-radius: clamp(24px, 4vw, 56px) clamp(24px, 4vw, 56px) 0 0;
  box-shadow: 0 -24px 60px rgba(0, 8, 22, 0.35);
}
.finalCTAcard h2 {
  max-width: 22ch;
}

/*===============================================================================================================================
Scroll Effects===================================================================================================================
===============================================================================================================================*/
/*Holds a section in place, with its bottom at the bottom of the screen, while the next section slides over it*/
.sectionPinned {
  position: sticky;
  top: min(0px, calc(100vh - var(--pinHeight, 100vh)));
  top: min(0px, calc(100svh - var(--pinHeight, 100svh))); /*svh ignores the phone's address bar sliding away*/
}
/*Dims the held section as it gets covered*/
.brandIntro:after,
.moreThanLogo:after,
.webFoundations:after {
  position: absolute;
  content: "";
  z-index: 2;
  inset: 0;
  background-color: #000816;
  border-radius: inherit;
  opacity: calc(var(--coverProgress, 0) * 0.4);
  pointer-events: none;
}
.brandIntroAnimate .brandIntroText {
  translate: calc((1 - var(--textProgress, 0)) * -8vw) 0;
}
/*Only the paragraph lights up word by word, the heading keeps its normal reveal*/
.brandIntroAnimate .brandIntroText .revealWord {
  overflow: visible;
  opacity: calc(0.12 + var(--wordLit, 0) * 0.88);
  transition: opacity 0.3s ease;
}
.brandIntroAnimate .brandIntroText .revealWordInner {
  translate: 0 calc((1 - var(--wordLit, 0)) * 0.28em);
  transition: translate 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}