/* Entrust's rounded hexagon identity, drawn from presentation pages 1–4 and 16.
   Keep the decorative geometry outside text, controls, and clinical photographs. */
:root {
  --entrust-hex: url('/assets/entrust-hex.svg');
  --entrust-network: url('/assets/entrust-hex-network.svg');
}

/* A quiet, reusable brand marker beside section labels. */
main .eyebrow::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 12px;
  margin-right: 10px;
  background: var(--blue);
  -webkit-mask: var(--entrust-hex) center / contain no-repeat;
  mask: var(--entrust-hex) center / contain no-repeat;
  vertical-align: -2px;
}
.study-card .eyebrow::before { content: none; }

/* The opening composition pairs real clinic imagery with the brand's geometry. */
.hero-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #f6f9fa;
}
.hero-stage::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 390px;
  height: 440px;
  left: -260px;
  top: 160px;
  background: var(--entrust-network) center / contain no-repeat;
  opacity: .5;
  pointer-events: none;
}
.hero-stage .hero { padding-top: 66px; padding-bottom: 56px; gap: 56px; }
.hero-copy { position: relative; min-width: 0; }
.hero-visual { position: relative; min-width: 0; isolation: isolate; }
.hero-visual::before,
.hero-visual::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.hero-visual::before {
  right: -32px;
  top: 50%;
  width: 94%;
  aspect-ratio: 100 / 112;
  transform: translateY(-50%);
  background: var(--navy);
  -webkit-mask: var(--entrust-hex) center / 100% 100% no-repeat;
  mask: var(--entrust-hex) center / 100% 100% no-repeat;
}
.hero-visual::after {
  width: 172px;
  height: 194px;
  left: -34px;
  bottom: -34px;
  background: var(--entrust-network) center / contain no-repeat;
}
.hero-stage .hero-image {
  border-radius: 12px;
  clip-path: polygon(32px 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%, 0 32px);
  box-shadow: none;
}
.hero-stage .hero-image > img { display: block; }
.brand-seal {
  position: absolute;
  top: -28px;
  right: -15px;
  width: 94px;
  height: 105px;
  filter: drop-shadow(0 6px 12px #1c31551c);
  pointer-events: none;
}
.hero-stage .image-note { border-radius: 6px; border-left: 3px solid var(--blue); }
.hero-location { position: relative; margin-top: 5px; }
.promise { gap: clamp(24px, 4vw, 62px); }
.promise > span { display: inline-flex; align-items: center; gap: 10px; }
.promise > span::before {
  content: '';
  flex: 0 0 9px;
  height: 11px;
  background: var(--blue);
  -webkit-mask: var(--entrust-hex) center / contain no-repeat;
  mask: var(--entrust-hex) center / contain no-repeat;
}

/* Hexagon medallions connect the study photography to its details. */
.study-grid-detailed .study-card { border-radius: 10px; background: #fff; }
.study-grid-detailed .card-copy { position: relative; }
.study-grid-detailed .card-copy .eyebrow { padding-right: 66px; }
.study-emblem,
.step-top .step-icon {
  display: grid;
  place-items: center;
  isolation: isolate;
  width: 62px;
  height: 70px;
}
.study-emblem { position: absolute; top: -36px; right: 25px; }
.study-emblem::before,
.step-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--navy);
  -webkit-mask: var(--entrust-hex) center / contain no-repeat;
  mask: var(--entrust-hex) center / contain no-repeat;
  pointer-events: none;
}
.study-emblem::after {
  content: '';
  position: absolute;
  z-index: -2;
  inset: -5px;
  background: #fff;
  -webkit-mask: var(--entrust-hex) center / contain no-repeat;
  mask: var(--entrust-hex) center / contain no-repeat;
  pointer-events: none;
}
.study-card .study-emblem .action-icon {
  width: 25px;
  height: 25px;
  margin: 0;
  color: #fff;
}
.study-card:hover { border-color: #95bbd0; }
.study-portrait { position: relative; isolation: isolate; }
.study-portrait::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 174px;
  height: 196px;
  top: -26px;
  right: -24px;
  background: var(--entrust-network) center / contain no-repeat;
  pointer-events: none;
}
.study-portrait img { border-radius: 12px; }

/* The three conversation steps echo the presentation's icon medallions. */
.step-top { padding-bottom: 18px; border-bottom-color: #dae5eb; }
.step-top .step-icon { position: relative; flex: 0 0 62px; }
.step-top .step-icon .action-icon { width: 27px; height: 27px; margin: 0; color: #fff; }
.step-top > span:last-child { font-size: 18px; font-weight: 500; color: #66849a; }
.steps article:nth-child(2) .step-icon::before { background: #2d668b; }
.steps article:nth-child(3) .step-icon::before { background: #287fa6; }

/* A distinctive, full-width Entrust navy section for the conversation steps. */
.conversation-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #102447;
  color: #fff;
}
.conversation-section::before,
.conversation-section::after {
  content: '';
  position: absolute;
  z-index: -1;
  background: var(--entrust-network) center / contain no-repeat;
  pointer-events: none;
}
.conversation-section::before {
  width: 560px;
  height: 630px;
  right: -95px;
  top: -220px;
  opacity: .25;
}
.conversation-section::after {
  width: 290px;
  height: 326px;
  left: -180px;
  bottom: -90px;
  opacity: .2;
}
.conversation-section .next-steps { padding-top: 86px; padding-bottom: 86px; }
.conversation-section .eyebrow { color: #a5d8f0; }
.conversation-section h2,
.conversation-section h3 { color: #fff; }
.conversation-section h2 em { color: #82d0ef; }
.conversation-section .steps { gap: 48px; margin-top: 48px; }
.conversation-section .steps article p { color: #d6e2ef; }
.conversation-section .step-top { border-bottom-color: #496383; padding-bottom: 25px; }
.conversation-section .step-top > span:last-child { font-size: 22px; color: #9bcfe6; }
.conversation-section .step-top .step-icon { width: 76px; height: 86px; flex-basis: 76px; }
.conversation-section .step-icon::before { background: #204b70; }
.conversation-section .step-icon::after {
  content: '';
  position: absolute;
  z-index: -2;
  inset: -2px;
  background: #7cc5e4;
  -webkit-mask: var(--entrust-hex) center / contain no-repeat;
  mask: var(--entrust-hex) center / contain no-repeat;
  pointer-events: none;
}
.conversation-section .step-top .step-icon .action-icon { width: 31px; height: 31px; }

/* Large, sparse honeycomb groups tie the supporting pages to the opening. */
.page-intro { position: relative; isolation: isolate; overflow: hidden; }
.page-intro::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: -115px;
  top: 24px;
  width: 320px;
  height: 360px;
  background: var(--entrust-network) center / contain no-repeat;
  opacity: .55;
  pointer-events: none;
}
.about-teaser { position: relative; isolation: isolate; }
.about-teaser::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 14px;
  top: 48px;
  width: 190px;
  height: 214px;
  background: var(--entrust-network) center / contain no-repeat;
  pointer-events: none;
}
.about-teaser > img { border-radius: 12px; }
.clinic-section { position: relative; isolation: isolate; overflow: hidden; }
.clinic-section::before {
  content: '';
  position: absolute;
  z-index: -1;
  right: -190px;
  bottom: 32px;
  width: 350px;
  height: 394px;
  background: var(--entrust-network) center / contain no-repeat;
  opacity: .55;
  pointer-events: none;
}
footer { position: relative; isolation: isolate; overflow: hidden; }
footer::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: -110px;
  bottom: -168px;
  width: 460px;
  height: 518px;
  background: var(--entrust-network) center / contain no-repeat;
  opacity: .18;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .hero-stage .hero { gap: 36px; padding-top: 56px; padding-bottom: 48px; }
  .hero-visual::before { right: -20px; }
  .brand-seal { right: -8px; width: 78px; height: 88px; top: -22px; }
  .page-intro::after { right: -180px; opacity: .35; }
}
@media (max-width: 760px) {
  .conversation-section .next-steps { padding-top: 56px; padding-bottom: 56px; }
  .conversation-section .steps { gap: 32px; margin-top: 36px; }
  .conversation-section::before { width: 350px; height: 394px; right: -185px; top: -105px; opacity: .22; }
  .conversation-section .step-top .step-icon { width: 66px; height: 74px; flex-basis: 66px; }
  .hero-stage .hero { padding: 34px 22px 42px; gap: 40px; }
  .hero-stage::before { display: none; }
  .hero-stage .hero-image { border-radius: 8px; }
  .hero-visual { margin-right: 6px; }
  .hero-visual::before { right: -16px; }
  .hero-visual::after { width: 112px; height: 126px; left: -20px; bottom: -25px; }
  .brand-seal { right: -5px; top: -20px; width: 66px; height: 74px; }
  .hero-location { margin-top: 0; }
  .promise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; text-align: left; }
  .promise > span { gap: 8px; }
  .study-emblem { right: 22px; width: 56px; height: 63px; top: -32px; }
  .study-grid-detailed .card-copy .eyebrow { padding-right: 58px; }
  .study-portrait::before { width: 130px; height: 146px; right: -14px; top: -20px; }
  .about-teaser::before { width: 136px; height: 154px; left: 8px; top: 35px; }
  .page-intro::after { width: 210px; height: 236px; top: 20px; right: -150px; opacity: .4; }
  .step-top .step-icon { width: 56px; height: 63px; flex-basis: 56px; }
  footer::after { width: 320px; height: 360px; right: -160px; bottom: -60px; }
}
@media (prefers-reduced-motion: reduce) {
  .study-card { transition: none; }
}