:root {
  --navy: #153f88;
  --navy-dark: #11356f;
  --blue-top: #2b63c3;
  --blue-bottom: #184f9f;
  --red-top: #d92c2c;
  --red-bottom: #c62020;
  --gold-top: #f6d87a;
  --gold-bottom: #e3b648;
  --text: #2e3342;
  --shell: #f1f1f4;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #ececef 0%, #f3f3f5 40%, #ececf1 100%);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.site-shell {
  max-width: 1000px;
  margin: 0 auto;
  background: radial-gradient(circle at 22% 12%, rgba(255,255,255,.96), rgba(242,242,246,.96) 58%, rgba(235,235,240,.98));
  min-height: 100vh;
}

.top-banner {
  height: 52px;
  background: linear-gradient(180deg, #e12626, #cf1717);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-weight: 800;
  letter-spacing: 1px;
}
.banner-text { font-size: 30px; line-height: 1; }
.banner-line { width: 172px; height: 3px; background: rgba(255,255,255,.9); }

.page-wrap { padding: 18px 34px 0; }

.top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.sts-logo { width: 300px; flex: 0 0 300px; }
.sts-logo img { width: 100%; height: auto; object-fit: contain; }

.action-buttons {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
  flex: 1;
  padding-top: 14px;
}
.pill {
  height: 58px;
  border-radius: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 24px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(35, 50, 92, 0.15);
}
.phone-pill {
  min-width: 334px;
  font-size: 26px;
  color: var(--navy);
  background: linear-gradient(180deg, #fafafd, #ececf1);
  border: 2px solid #d4d7df;
}
.contact-pill {
  min-width: 282px;
  font-size: 24px;
  color: #fff;
  background: linear-gradient(180deg, #2a63c3, #184f9f);
  border: 2px solid #16468e;
}
.pill-icon { font-size: 24px; line-height: 1; }

.hero-area {
  margin-top: -6px;
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  align-items: end;
}
.hero-copy {
  padding: 28px 18px 48px 0;
  position: relative;
  z-index: 1;
}
.hero-copy h1 {
  margin: 0 0 14px;
  color: var(--navy);
  font-size: 56px;
  line-height: .98;
  letter-spacing: -1px;
}
.hero-copy p {
  margin: 0;
  max-width: 430px;
  font-size: 24px;
  line-height: 1.35;
}
.hero-image {
  min-height: 330px;
  background-image:
    linear-gradient(90deg, rgba(241,241,244,1) 0%, rgba(241,241,244,.97) 11%, rgba(241,241,244,.66) 28%, rgba(241,241,244,0) 47%),
    url('assets/hero-couple.png');
  background-size: cover;
  background-position: center center;
}

.tiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: -4px;
}
.tile {
  min-height: 228px;
  border-radius: 24px;
  border: 1px solid #dddde7;
  background: linear-gradient(180deg, #fafafd, #f0f0f5);
  box-shadow: 0 6px 16px rgba(32, 44, 84, 0.10);
  text-align: center;
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.tile-art {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendar-art { min-height: 84px; padding-top: 2px; }
.medicare-art { min-height: 102px; padding-top: 2px; }
.medicare-art img {
  width: 280px;
  max-width: 100%;
  max-height: 90px;
  object-fit: contain;
}
.scam-art { min-height: 106px; padding-top: 2px; }
.scam-art img {
  width: 188px;
  max-width: 100%;
  max-height: 118px;
  object-fit: contain;
}
.resources-art {
  min-height: 108px;
  padding: 4px 10px 2px;
}
.resources-art img {
  width: 248px;
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
}
.partners-art { min-height: 94px; padding-top: 8px; }
.partners-art img {
  width: 176px;
  max-width: 100%;
  max-height: 84px;
  object-fit: contain;
}
.life-art {
  min-height: 112px;
  padding-top: 2px;
}
.life-art img {
  width: 174px;
  max-width: 100%;
  max-height: 112px;
  object-fit: contain;
}
.tile-heading {
  color: var(--navy);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.03;
  margin-top: 4px;
}
.resources-heading { margin-top: 0; }
.partners-heading { margin-top: 0; }
.life-heading { font-size: 22px; margin-top: 2px; }
.life-sub {
  color: #3b404d;
  font-size: 14px;
  font-weight: 700;
  margin-top: 2px;
}
.tile-note {
  margin-top: 8px;
  font-size: 18px;
  line-height: 1.25;
}
.tile-link-text {
  margin-top: 8px;
  color: var(--navy-dark);
  font-size: 15px;
  font-weight: 700;
}
.gold-ribbon,
.blue-button,
.red-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.gold-ribbon {
  min-width: 240px;
  height: 36px;
  margin-top: 10px;
  font-size: 17px;
  font-weight: 800;
  color: #24365b;
  background: linear-gradient(180deg, var(--gold-top), var(--gold-bottom));
  clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%);
}
.wide-ribbon { min-width: 278px; font-size: 14px; }
.blue-button,
.red-button {
  min-width: 210px;
  height: 36px;
  border-radius: 18px;
  margin-top: 10px;
  font-size: 18px;
  font-weight: 800;
}
.blue-button {
  color: #fff;
  background: linear-gradient(180deg, var(--blue-top), var(--blue-bottom));
  box-shadow: inset 0 -3px 0 rgba(16,39,86,.22);
}
.red-button {
  min-width: 246px;
  color: #fff;
  background: linear-gradient(180deg, var(--red-top), var(--red-bottom));
}
.life-tile { position: relative; margin-top: 48px; }

.welcome-text { padding: 16px 4px 6px; }
.welcome-text h2 {
  margin: 0 0 12px;
  color: var(--navy);
  text-align: center;
  font-size: 28px;
}
.welcome-text p {
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.5;
}

.contact-section {
  display: grid;
  grid-template-columns: 1fr 1.55fr;
  gap: 0;
  margin-top: 14px;
  padding-bottom: 0;
}
.contact-panel {
  min-height: 224px;
  background-image: linear-gradient(180deg, rgba(25,62,137,.95), rgba(20,56,122,.96)), url('assets/footer-landscape.png');
  background-size: cover;
  background-position: center;
  border-top-left-radius: 0;
}
.contact-panel-inner { padding: 18px 26px; }
.contact-line {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-weight: 800;
  margin: 10px 0;
}
.phone-line { font-size: 24px; }
.email-line { font-size: 18px; word-break: break-word; }
.contact-symbol {
  color: #f1d06a;
  font-size: 34px;
  line-height: 1;
  flex: 0 0 auto;
}
.contact-line a { color: #fff; }

.form-panel {
  background: linear-gradient(180deg, rgba(250,250,253,.98), rgba(239,239,244,.98));
  border-top-left-radius: 18px;
  padding: 16px 26px 18px;
}
.form-panel h2 {
  margin: 0 0 14px;
  color: var(--navy);
  text-align: center;
  font-size: 28px;
}
.form-panel form {
  display: grid;
  gap: 12px;
}
.form-panel input,
.form-panel textarea {
  width: 100%;
  border: 2px solid #d8dbe5;
  border-radius: 12px;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 12px 14px;
  background: #fff;
}
.form-panel textarea {
  min-height: 118px;
  resize: vertical;
}
.form-panel button {
  width: 320px;
  max-width: 100%;
  justify-self: center;
  border: 0;
  border-radius: 12px;
  height: 54px;
  color: #f4ead6;
  font-size: 20px;
  font-weight: 800;
  background: linear-gradient(180deg, #5c8751, #3f6d3c);
  cursor: pointer;
}
.direct-note {
  margin: 12px 0 0;
  color: #33405f;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}
.direct-note a { color: var(--navy-dark); text-decoration: none; }
.lock-icon { margin-right: 5px; }

.inner-page-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.inner-page {
  max-width: 760px;
  width: 100%;
  padding: 36px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(32,44,84,.12);
  text-align: center;
}
.inner-logo {
  width: 220px;
  margin: 0 auto 16px;
}
.inner-page h1 {
  margin: 0 0 14px;
  color: var(--navy);
  font-size: 38px;
}
.inner-page p {
  font-size: 20px;
  line-height: 1.5;
}
.back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, var(--blue-top), var(--blue-bottom));
  font-weight: 800;
}

@media (max-width: 900px) {
  .page-wrap { padding: 14px 18px 18px; }
  .top-row,
  .action-buttons,
  .hero-area,
  .contact-section { display: block; }
  .sts-logo { width: 260px; margin: 0 auto; }
  .action-buttons { padding-top: 12px; }
  .pill { width: 100%; min-width: 0; margin-top: 10px; }
  .hero-copy { padding: 18px 0; }
  .hero-copy h1 { font-size: 42px; }
  .hero-copy p { font-size: 22px; }
  .hero-image { min-height: 260px; }
  .tiles-grid { grid-template-columns: 1fr; }
  .life-tile { margin-top: 0; }
  .contact-panel,
  .form-panel { border-radius: 0; }
}