@font-face {
  font-family: "LINE Seed Sans TH";
  src: url("line-seed-regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "LINE Seed Sans TH";
  src: url("line-seed-bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --navy: #0e1953;
  --blue: #b3d0f7;
  --linen: #f6f0e9;
  --edge: #ded5ca;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: #eaf2fe;
  color: var(--navy);
  font: 400 1rem/1.45 "LINE Seed Sans TH", system-ui, sans-serif;
}

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #254085; outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.contact-page {
  width: min(100%, 520px);
  min-height: 100vh;
  margin-inline: auto;
  background: radial-gradient(ellipse at top, #fcf8f2, var(--linen) 76%);
}

.hero {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: clamp(208px, 68vw, 292px);
  padding: max(28px, env(safe-area-inset-top)) 20px 45px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 0 0 50% 50% / 0 0 8% 8%;
  background: radial-gradient(ellipse at 45% 14%, #bcd7fb, var(--blue) 62%, #a7c9f3);
}

.hero::before, .hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -143px -12px auto;
  width: 220px;
  height: 310px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 50%;
  transform: rotate(29deg);
}

.hero::after { right: -163px; bottom: -2px; }

.brand-lockup {
  position: relative;
  width: min(73%, 340px);
  aspect-ratio: 3756 / 580;
  overflow: hidden;
}

.brand-logo {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 133.12%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
}

.eyebrow {
  margin: 19px 0 0;
  font-size: clamp(.625rem, 2.6vw, .75rem);
  font-weight: 700;
  letter-spacing: .31em;
  text-align: center;
}

.content {
  padding: 26px max(16px, env(safe-area-inset-right)) max(23px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

h1 {
  margin: 0 0 24px;
  font-size: clamp(1.9rem, 8.4vw, 2.6rem);
  line-height: 1.15;
  text-align: center;
}

.links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lead { grid-column: 1 / -1; }

.card {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  min-height: 108px;
  padding: 12px 6px;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: #fff;
  text-align: center;
}

.card.primary {
  grid-template-columns: 50px minmax(0, 1fr) 24px;
  align-items: center;
  justify-items: start;
  gap: 12px;
  min-height: 84px;
  padding: 11px 16px;
  border-color: #ccdef5;
  border-radius: 18px;
  background: #eaf3ff;
  text-align: start;
}

.card-text { display: grid; gap: 1px; line-height: 1.25; }
.card strong { font-size: 1.125rem; }
.primary strong { font-size: clamp(1.13rem, 5.1vw, 1.4rem); }
.card-text > span { font-size: .95rem; }

.icon {
  display: grid;
  width: 47px;
  height: 47px;
  place-items: center;
  border-radius: 14px;
  background: #e9f2ff;
}

.icon svg { width: 29px; height: 29px; }
.icon.line { background: transparent; }
.icon.line svg { width: 49px; height: 49px; }
.icon.shop, .icon.tt { background: #f7efe5; }
.icon.shop { color: #ea4c27; }
.icon.fb { color: #1877f2; }
.icon.ig { color: #b22479; }
.icon.tt { color: #171717; }
.arrow { width: 22px; height: 22px; }

.page-footer { margin-top: 17px; text-align: center; }
.back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 7px;
  padding-inline: 8px;
  font-size: .875rem;
}

.back svg { width: 17px; height: 17px; }

@media (hover: hover) {
  .card:hover { border-color: #7795cc; background-color: #f6f9ff; }
  .card.primary:hover { background-color: #dceaff; }
  .back:hover { text-decoration: underline; }
}

@media (min-width: 600px) {
  .contact-page { box-shadow: 0 0 40px #0e19530c; }
  .content { padding-inline: 28px; }
}