:root {
  color-scheme: dark;
  --ink: #f2f2f0;
  --muted: #d4d6d5;
  --dark: #080b0e;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 280px; }
body {
  margin: 0;
  min-width: 280px;
  background: #030507;
  color: var(--ink);
  font-family: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.skip-link {
  position: fixed;
  z-index: 10;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  transform: translateY(-160%);
  background: #fff;
  color: #080b0e;
}
.skip-link:focus { transform: translateY(0); }

.site-frame {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  isolation: isolate;
  min-height: calc(100vh - 48px);
  min-height: calc(100svh - 48px);
  margin: 24px;
  overflow: hidden;
  border: 1px solid #686c6e;
  background: var(--dark);
}

.scene, .scene::after, .scene img { position: absolute; inset: 0; }
.scene { z-index: 0; overflow: hidden; }
.scene img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.scene::after {
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, rgba(2, 5, 8, .38), rgba(2, 5, 8, .08) 53%, transparent 76%);
}

.site-header, .main-content, .site-footer { position: relative; z-index: 1; }

.site-header, .site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header { padding: clamp(31px, 4vw, 58px) clamp(34px, 5vw, 72px); }
.brand-lockup { display: flex; align-items: center; gap: clamp(22px, 2.5vw, 36px); min-width: 0; }
.brand-mark { display: block; width: clamp(54px, 5.3vw, 72px); height: auto; flex: none; }
.brand-name {
  font-size: clamp(.84rem, 1.4vw, 1.18rem);
  font-weight: 400;
  letter-spacing: .24em;
  white-space: nowrap;
}
.header-contact {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-decoration: none;
  text-transform: uppercase;
}
.header-contact:hover, .site-footer a:hover, .mobile-contact:hover { text-decoration: underline; text-underline-offset: 6px; }
.external-arrow { font-size: 1.3rem; font-weight: 300; line-height: 0; }

.main-content {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 12px clamp(34px, 5vw, 72px) 74px;
}
.copy-block { max-width: 680px; }
h1, .slogan, .value-line, .description, .target { margin: 0; }
h1, .slogan { font-weight: 300; white-space: nowrap; }
h1 {
  font-size: clamp(1.85rem, 3vw, 2.8rem);
  line-height: 1.18;
  letter-spacing: .28em;
}
.slogan {
  margin-top: 7px;
  font-size: clamp(1.58rem, 2.52vw, 2.35rem);
  line-height: 1.35;
  letter-spacing: .29em;
}
.short-rule { width: 66px; height: 1px; margin: clamp(32px, 3.6vw, 51px) 0 31px; background: #dde2e2; }
.value-line {
  max-width: 590px;
  font-size: clamp(1.02rem, 1.38vw, 1.28rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-wrap: balance;
}
.description {
  max-width: 510px;
  margin-top: 11px;
  color: var(--muted);
  font-size: clamp(.76rem, .98vw, .9rem);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .08em;
  text-wrap: balance;
}
.target {
  margin-top: 31px;
  font-size: clamp(.88rem, 1.25vw, 1.12rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .35em;
  text-transform: uppercase;
}
.mobile-contact { display: none; }

.site-footer {
  gap: 20px;
  padding: 22px clamp(34px, 5vw, 72px) 35px;
  color: #d3d5d4;
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .14em;
}
.site-footer a { text-decoration: none; letter-spacing: .1em; }

@media (max-width: 700px) {
  .site-frame {
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    border: 0;
  }
  .scene img { object-position: center; }
  .scene::after {
    background:
      linear-gradient(90deg, rgba(1, 4, 7, .56) 0%, rgba(1, 4, 7, .18) 67%, transparent),
      linear-gradient(0deg, rgba(1, 4, 7, .45), transparent 27%);
  }
  .site-header { gap: 14px; padding: 37px 24px 18px; }
  .brand-lockup { gap: 15px; }
  .brand-mark { width: 50px; }
  .brand-name { font-size: .75rem; letter-spacing: .18em; }
  .header-contact { padding: 8px 0; }
  .header-contact-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .header-contact .external-arrow { font-size: 1.55rem; }
  .main-content {
    align-items: center;
    padding: 56px 28px 62px;
  }
  .copy-block { width: 100%; }
  h1 { font-size: clamp(1.18rem, 5.45vw, 1.8rem); letter-spacing: .18em; }
  .slogan { margin-top: 12px; font-size: clamp(1rem, 4.15vw, 1.44rem); letter-spacing: .22em; }
  .short-rule { width: 53px; margin: 37px 0 28px; }
  .value-line { max-width: 340px; font-size: .88rem; line-height: 1.6; letter-spacing: .13em; }
  .description { max-width: 335px; margin-top: 11px; font-size: .75rem; line-height: 1.7; letter-spacing: .04em; }
  .target { margin-top: 31px; font-size: .92rem; letter-spacing: .28em; }
  .mobile-contact {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    margin-top: clamp(54px, 10vh, 100px);
    padding-bottom: 12px;
    border-bottom: 1px solid #ebeeee;
    font-size: .77rem;
    letter-spacing: .21em;
    text-decoration: none;
    text-transform: uppercase;
  }
  .mobile-contact span { font-size: 1.25rem; line-height: 0; }
  .site-footer { display: block; padding: 20px 28px 29px; font-size: .63rem; letter-spacing: .13em; }
  .site-footer a { display: block; margin-top: 9px; letter-spacing: .08em; }
}

@media (max-width: 360px) {
  .site-header { padding-inline: 19px; }
  .brand-lockup { gap: 10px; }
  .brand-mark { width: 44px; }
  .brand-name { font-size: .64rem; letter-spacing: .15em; }
  .main-content { padding-inline: 21px; }
  h1 { font-size: 1.13rem; letter-spacing: .14em; }
  .slogan { font-size: .98rem; letter-spacing: .17em; }
  .value-line { font-size: .81rem; letter-spacing: .1em; }
  .description { font-size: .7rem; }
  .site-footer { padding-inline: 21px; }
}

@media (max-height: 650px) and (max-width: 700px) {
  .main-content { padding-top: 34px; padding-bottom: 32px; }
  .short-rule { margin-top: 27px; margin-bottom: 23px; }
  .mobile-contact { margin-top: 37px; }
}