@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --blue: #111c72;
  --blue-dark: #080f4c;
  --gold: #f4c400;
  --ink: #151827;
  --muted: #687084;
  --line: #e5e7ef;
  --white: #ffffff;
}

/* =========================
   BASE
========================= */

* {
  box-sizing: border-box;
}

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

body {
  font-family: 'Inter', Arial, sans-serif;
  color: var(--ink);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(244, 196, 0, 0.10),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #f7f8fc 0%,
      #ffffff 52%,
      #f4f6fb 100%
    );
}

/* Subtle background grid */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;

  background-image:
    linear-gradient(
      rgba(17, 28, 114, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(17, 28, 114, 0.025) 1px,
      transparent 1px
    );

  background-size: 34px 34px;
}


/* =========================
   PAGE
========================= */

.page {
  min-height: 100vh;

  display: grid;
  place-items: center;

  padding: 36px 18px;

  position: relative;
}


/* =========================
   MAIN CARD
========================= */

.card {
  width: min(940px, 100%);

  background: rgba(255, 255, 255, 0.98);

  border: 1px solid rgba(17, 28, 114, 0.08);

  border-radius: 28px;

  padding: 34px 70px 34px;

  text-align: center;

  box-shadow:
    0 24px 70px rgba(17, 28, 114, 0.10);

  position: relative;

  overflow: hidden;
}


/* Decorative circles */

.card::before,
.card::after {
  content: '';

  position: absolute;

  width: 170px;
  height: 170px;

  border-radius: 50%;

  border: 1px solid rgba(244, 196, 0, 0.18);

  pointer-events: none;
}

.card::before {
  top: -100px;
  left: -100px;
}

.card::after {
  bottom: -105px;
  right: -105px;
}


/* =========================
   LOGO
========================= */

.logo-wrap {
  width: 220px;
  height: auto;

  margin: 0 auto 24px;

  display: grid;
  place-items: center;
}

.logo {
  width: 220px;
  height: auto;

  object-fit: contain;

  display: block;
}


/* =========================
   EYEBROW
========================= */

.eyebrow {
  color: var(--blue);

  font-family: 'Inter', Arial, sans-serif;

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 0.14em;

  line-height: 1.4;

  margin-bottom: 12px;
}


/* =========================
   DIOCESE NAME
========================= */

h1 {
  font-family: 'Inter', Arial, sans-serif;

  color: var(--blue-dark);

  font-size: clamp(30px, 4vw, 40px);

  font-weight: 700;

  line-height: 1.12;

  margin: 0;

  letter-spacing: -0.025em;
}

h1 span {
  color: var(--blue);
}


/* =========================
   ENGLISH NAME
========================= */

.english-name {
  max-width: 690px;

  margin: 14px auto 0;

  color: var(--muted);

  font-family: 'Inter', Arial, sans-serif;

  font-size: 13px;

  font-weight: 400;

  line-height: 1.6;
}


/* =========================
   GOLD DIVIDER
========================= */

.divider {
  width: 110px;

  margin: 27px auto 25px;

  position: relative;

  height: 12px;
}

.divider::before,
.divider::after {
  content: '';

  position: absolute;

  top: 5px;

  width: 43px;

  height: 1px;

  background: var(--gold);
}

.divider::before {
  left: 0;
}

.divider::after {
  right: 0;
}

.divider span {
  width: 9px;
  height: 9px;

  background: var(--gold);

  transform: rotate(45deg);

  display: block;

  margin: 1px auto 0;
}


/* =========================
   COMING SOON HEADING
========================= */

h2 {
  font-family: 'Inter', Arial, sans-serif;

  color: var(--blue-dark);

  font-size: clamp(24px, 3vw, 30px);

  font-weight: 700;

  line-height: 1.2;

  letter-spacing: 0.02em;

  text-transform: uppercase;

  margin: 0 0 13px;
}


/* =========================
   INTRO MESSAGE
========================= */

.intro {
  max-width: 560px;

  margin: 0 auto;

  color: #5d6577;

  font-family: 'Inter', Arial, sans-serif;

  font-size: 15px;

  font-weight: 400;

  line-height: 1.75;
}


/* =========================
   CONTACT AREA
========================= */

.contact-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 18px;

  margin-top: 34px;

  text-align: left;
}

.contact-block {
  border: 1px solid var(--line);

  border-radius: 17px;

  padding: 22px 24px;

  background: #ffffff;
}


/* =========================
   SECTION LABEL
========================= */

.section-label {
  color: var(--blue);

  font-family: 'Inter', Arial, sans-serif;

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 0.14em;

  line-height: 1.4;

  margin-bottom: 12px;
}


/* =========================
   PHONE
========================= */

.phone {
  display: inline-block;

  color: var(--blue-dark);

  font-family: 'Inter', Arial, sans-serif;

  font-size: 20px;

  font-weight: 600;

  text-decoration: none;

  margin-bottom: 9px;
}


/* =========================
   EMAIL
========================= */

.emails {
  display: grid;

  gap: 5px;
}

.emails a {
  color: #5f6778;

  font-family: 'Inter', Arial, sans-serif;

  text-decoration: none;

  font-size: 13px;

  font-weight: 400;

  overflow-wrap: anywhere;
}

.emails a:hover,
.phone:hover {
  color: var(--blue);
}


/* =========================
   SOCIAL LINKS
========================= */

.socials {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;
}

.socials a {
  text-decoration: none;

  color: var(--blue-dark);

  border: 1px solid #dfe2eb;

  border-radius: 999px;

  padding: 9px 13px;

  font-family: 'Inter', Arial, sans-serif;

  font-size: 13px;

  font-weight: 600;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.socials a:hover {
  background: var(--blue);

  color: var(--white);

  border-color: var(--blue);
}


/* =========================
   FOOTER DIVIDER
========================= */

.footer-line {
  height: 1px;

  background: var(--line);

  margin: 30px 0 18px;
}


/* =========================
   FOOTER
========================= */

footer {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 15px;

  color: #8a91a0;

  font-family: 'Inter', Arial, sans-serif;

  font-size: 11px;

  font-weight: 400;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 700px) {

  .page {
    padding: 18px 12px;
  }

  .card {
    padding: 38px 20px 25px;

    border-radius: 22px;
  }

  .logo-wrap,
  .logo {
    width: 145px;
    height: auto;
  }

  .logo-wrap {
    margin-bottom: 20px;
  }

  .eyebrow {
    font-size: 9px;

    letter-spacing: 0.11em;
  }

  h1 {
    font-size: clamp(27px, 8vw, 34px);

    line-height: 1.12;
  }

  .english-name {
    font-size: 12px;

    line-height: 1.55;
  }

  .divider {
    margin-top: 23px;

    margin-bottom: 22px;
  }

  h2 {
    font-size: clamp(21px, 6vw, 27px);

    letter-spacing: 0.015em;
  }

  .intro {
    font-size: 14px;

    line-height: 1.7;
  }

  .contact-grid {
    grid-template-columns: 1fr;

    margin-top: 28px;
  }

  .contact-block {
    padding: 20px;
  }

  footer {
    flex-direction: column;

    align-items: center;

    text-align: center;
  }
}


/* =========================
   SMALL PHONES
========================= */

@media (max-width: 380px) {

  .card {
    padding-left: 16px;
    padding-right: 16px;
  }

  .logo-wrap,
  .logo {
    width: 125px;
  }

  .eyebrow {
    font-size: 8px;

    letter-spacing: 0.09em;
  }

  .socials {
    justify-content: center;
  }

  .socials a {
    font-size: 12px;

    padding: 8px 11px;
  }
}