:root {
  --blue: #75a3b3;
  --white: #fff;
  --brown: #642d17;
  --brown-dark: #4f210f;
  --font: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic",
    YuGothic, Arial, sans-serif;
  --font-heading: "Gill Sans", "Gill Sans MT", "Avenir Next", Avenir,
    "Trebuchet MS", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--white);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--brown);
  color: var(--white);
}

.skip-link {
  position: fixed;
  z-index: 10;
  top: 10px;
  left: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--brown);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

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

.reveal-delay-1 {
  --reveal-delay: 100ms;
}

.reveal-delay-2 {
  --reveal-delay: 200ms;
}

.nameplate {
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  background: linear-gradient(
    to bottom,
    var(--white) 0%,
    var(--white) 50%,
    var(--blue) 50%,
    var(--blue) 100%
  );
}

.nameplate img {
  width: min(100%, 760px);
  height: auto;
}

.blue-stage {
  background: var(--blue);
}

.intro,
.example,
.brand {
  width: min(calc(100% - 46px), 760px);
  margin: 0 auto;
  text-align: center;
}

.intro {
  padding-top: 52px;
}

.intro__logo {
  width: clamp(234px, 56vw, 340px);
  height: auto;
  margin: 0 auto;
}

.intro__lead,
.intro__statement,
.brand__description {
  margin: 0;
  font-size: clamp(0.88rem, 3.5vw, 1rem);
  font-weight: 500;
  line-height: 1.68;
  letter-spacing: 0.07em;
}

.intro__lead {
  margin-top: 54px;
}

.intro__statement {
  margin-top: 28px;
}

.vertical-rule {
  width: 1px;
  height: 51px;
  margin: 55px auto 0;
  background: rgba(255, 255, 255, 0.9);
}

.example {
  padding-top: 46px;
}

.example h2,
.brand h2,
.contact h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 11.5vw, 5.5rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.example > p,
.brand__subtitle {
  margin: 10px 0 0;
  font-size: clamp(0.82rem, 3.35vw, 0.98rem);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.pill-button {
  width: min(100%, 520px);
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: auto;
  margin-left: auto;
  padding: 16px 24px;
  border-radius: 999px;
  background: var(--brown);
  font-size: clamp(0.92rem, 3.8vw, 1.08rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.pill-button:hover,
.pill-button:focus-visible {
  background: var(--brown-dark);
  transform: translateY(-2px);
}

.example .pill-button {
  margin-top: 14px;
}

.brand {
  padding-top: 110px;
  padding-bottom: 76px;
}

.brand__image-link {
  display: block;
  margin-top: 17px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.brand__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.brand__image-link:hover .brand__image,
.brand__image-link:focus-visible .brand__image {
  transform: scale(1.02);
}

.brand h3 {
  margin: 29px 0 0;
  font-size: clamp(0.9rem, 3.7vw, 1.04rem);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.brand h3 span {
  margin-left: 8px;
  letter-spacing: 0.08em;
}

.brand__description {
  margin-top: 24px;
  font-size: clamp(0.76rem, 3.15vw, 0.9rem);
  line-height: 1.86;
}

.brand__buttons {
  display: grid;
  gap: 17px;
  margin-top: 32px;
}

.contact {
  min-height: 287px;
  padding: 65px 24px 76px;
  background: var(--white);
  color: var(--brown);
  text-align: center;
}

.contact h2 {
  font-size: clamp(2.7rem, 11vw, 5.2rem);
}

.contact__row {
  width: min(100%, 340px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 28px auto 0;
}

.contact__row > p {
  margin: 0;
  color: #9b784d;
  font-size: clamp(1.04rem, 4.2vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.contact__links {
  display: flex;
  gap: 12px;
}

.contact__links a {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brown);
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.contact__links a:hover,
.contact__links a:focus-visible {
  background: var(--brown-dark);
  transform: translateY(-2px);
}

.contact__links img {
  width: 27px;
  height: 27px;
  object-fit: contain;
}

@media (min-width: 700px) {
  .nameplate {
    min-height: 130px;
    padding: 0 4px;
  }

  .intro {
    padding-top: 78px;
  }

  .intro__lead {
    margin-top: 70px;
  }

  .intro__lead,
  .intro__statement,
  .brand__description {
    line-height: 1.9;
  }

  .brand {
    padding-top: 140px;
    padding-bottom: 110px;
  }

  .contact {
    padding-top: 82px;
    padding-bottom: 100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }

  .reveal-ready .reveal {
    opacity: 1;
    transform: none;
  }
}