:root {
  --cream: #faf5f1;
  --green: #43513f;
  --green-deep: #354235;
  --gold: #c99a3f;
  --text: #2f3d32;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--cream);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

.page-shell {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 28px 120px;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.95) 0 18%, rgba(255,255,255,0) 52%),
    var(--cream);
}

.top-glow {
  position: absolute;
  inset: -22% auto auto 50%;
  width: 760px;
  height: 460px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(201,154,63,.13), transparent 68%);
  filter: blur(8px);
  z-index: -1;
}

.hero {
  width: min(100%, 1120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
}

.brand-mark {
  display: block;
  width: min(260px, 56vw);
  height: auto;
  margin: 0 auto 14px;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.eyebrow {
  margin: 0;
  color: var(--green);
  font-size: clamp(16px, 1.8vw, 26px);
  font-weight: 600;
  letter-spacing: .28em;
  padding-left: .28em;
}

.brand-copy h1 {
  margin: 0;
  color: var(--green);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(60px, 9vw, 124px);
  line-height: .95;
  font-weight: 600;
  letter-spacing: .22em;
  padding-left: .22em;
}

.advisor {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.advisor h2 {
  margin: 0;
  color: var(--green);
  font-size: clamp(24px, 2.7vw, 38px);
  font-weight: 700;
  letter-spacing: .18em;
  padding-left: .18em;
}

.advisor p {
  margin: 0;
  color: #6b746a;
  font-size: clamp(12px, 1.2vw, 16px);
  font-weight: 600;
  letter-spacing: .18em;
  padding-left: .18em;
}

.contact-grid {
  width: min(100%, 1080px);
  margin-top: 42px;
  display: grid;
  grid-template-columns: .95fr 1.3fr .95fr;
  gap: 1px;
  border: 1px solid rgba(67,81,63,.12);
  background: rgba(67,81,63,.11);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 50px rgba(53,66,53,.08);
}

.contact-item {
  min-height: 112px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(255,255,255,.68);
  color: inherit;
  text-decoration: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.contact-item[href] {
  transition: background .2s ease, transform .2s ease;
}

.contact-item[href]:hover {
  background: rgba(255,255,255,.9);
}

.email-item {
  padding-left: 34px;
  padding-right: 34px;
}

.email-item .contact-copy strong {
  font-size: clamp(14px, 1.35vw, 18px);
}

.icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.icon svg {
  width: 25px;
  height: 25px;
  fill: var(--cream);
}

.contact-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 4px;
}

.contact-copy strong {
  max-width: 100%;
  font-size: clamp(15px, 1.55vw, 20px);
  line-height: 1.15;
  color: #182019;
  overflow-wrap: anywhere;
}

.contact-copy small {
  font-size: 14px;
  line-height: 1.3;
  color: #5f675f;
}

.bottom-shape {
  position: absolute;
  left: 50%;
  width: 150%;
  bottom: -270px;
  height: 390px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: translateX(-50%);
  background: linear-gradient(100deg, var(--green-deep), var(--green));
  z-index: -3;
}

@media (max-width: 820px) {
  .page-shell {
    padding: 32px 20px 106px;
    align-items: start;
  }

  .hero { padding-top: 8px; }

  .brand-mark {
    width: min(220px, 60vw);
    margin-bottom: 12px;
  }

  .eyebrow {
    font-size: clamp(13px, 2.8vw, 19px);
    letter-spacing: .18em;
    padding-left: .18em;
  }

  .brand-copy h1 {
    font-size: clamp(48px, 10vw, 84px);
    letter-spacing: .14em;
    padding-left: .14em;
  }

  .advisor {
    margin-top: 16px;
    gap: 6px;
  }

  .advisor h2 {
    font-size: clamp(20px, 5vw, 28px);
    letter-spacing: .14em;
    padding-left: .14em;
  }

  .advisor p {
    font-size: clamp(10px, 2.4vw, 13px);
    letter-spacing: .12em;
    padding-left: .12em;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    margin-top: 30px;
    border-radius: 18px;
  }

  .contact-item,
  .email-item {
    min-height: 92px;
    justify-content: flex-start;
    padding: 20px 22px;
  }

  .contact-copy strong,
  .email-item .contact-copy strong { font-size: 17px; }
  .contact-copy small { font-size: 13px; }

  .bottom-shape {
    width: 190%;
    bottom: -260px;
    height: 340px;
  }
}

@media (max-width: 480px) {
  .page-shell { padding: 22px 14px 92px; }

  .brand-mark {
    width: min(190px, 62vw);
    margin-bottom: 10px;
  }

  .eyebrow {
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .12em;
    padding-left: .12em;
  }

  .brand-copy h1 {
    font-size: clamp(40px, 13vw, 60px);
    letter-spacing: .12em;
    padding-left: .12em;
  }

  .advisor h2 {
    font-size: 18px;
    letter-spacing: .12em;
    padding-left: .12em;
  }

  .advisor p {
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: .08em;
    padding-left: .08em;
  }

  .contact-grid { margin-top: 24px; }

  .contact-item,
  .email-item {
    min-height: 84px;
    padding: 16px 17px;
    gap: 13px;
  }

  .icon {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }

  .icon svg { width: 22px; height: 22px; }
  .contact-copy strong,
  .email-item .contact-copy strong { font-size: 15px; }
  .contact-copy small { font-size: 12px; }
}