/* Three independent sculptural scenes, composed over one illuminated stage. */
.sw-section {
  --sw-night: color-mix(in srgb, var(--sff-navy), #000 72%);
  --sw-copy: color-mix(in srgb, var(--sff-light-blue), #fff 26%);
  --sw-display-height: clamp(270px, 24vw, 380px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 72px 0 86px;
  color: #fff;
  background:
    radial-gradient(ellipse at 95% 0%, color-mix(in srgb, var(--sff-navy), var(--sff-light-blue) 13%) 0%, transparent 46%),
    radial-gradient(ellipse at 5% 37%, color-mix(in srgb, var(--sff-navy) 65%, transparent), transparent 58%),
    linear-gradient(165deg, color-mix(in srgb, var(--sff-navy), #000 65%), var(--sw-night) 70%);
}
.sw-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(124deg, transparent 50%, #ffffff03 50.1%, transparent 74%);
}
.sw-heading-group {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 930px;
  margin-bottom: 8px;
}
.sw-overline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-bottom: 22px;
  color: var(--sw-copy);
  font-size: .875rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.sw-overline::before, .sw-overline::after {
  content: "";
  width: 48px;
  height: 1px;
  background: color-mix(in srgb, var(--sff-light-blue) 64%, transparent);
}
.sw-heading-group h2 {
  margin: 0 0 20px;
  font-family: var(--accent-font);
  font-size: clamp(3.25rem, 5.5vw, 5.75rem);
  font-weight: 550;
  line-height: .99;
  letter-spacing: -.015em;
  color: #fff;
}
.sw-heading-group h2 span { display: block; color: var(--sff-light-blue); }
.sw-heading-group > p {
  max-width: 770px;
  margin: 0 auto;
  color: var(--sw-copy);
  font-size: 1.25rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.sw-showcase { position: relative; isolation: isolate; }
.sw-showcase::before {
  content: "";
  position: absolute;
  top: calc(var(--sw-display-height) * .85);
  left: 0;
  right: 0;
  height: 160px;
  z-index: -1;
  pointer-events: none;
  border-top: 1px solid #a0cfef12;
  background:
    radial-gradient(ellipse at 19% 0%, #a0cfef20, transparent 29%),
    radial-gradient(ellipse at 51% 0%, #a0cfef18, transparent 30%),
    radial-gradient(ellipse at 83% 0%, #27387e70, transparent 29%),
    linear-gradient(180deg, #27387e32, #27387e08 52%, transparent);
}
.sw-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(28px, 3vw, 50px);
  row-gap: 0;
  position: relative;
}
.sw-item {
  --sw-scene: url("../images/sff/selected-wise-academic.webp");
  --sw-art-scale: 1;
  --sw-art-x: 0%;
  --sw-art-y: 0%;
  --sw-base-line: 97.666666667%;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  min-width: 0;
  text-align: center;
  justify-items: center;
  position: relative;
}
/* Calibrate the visible stone diameter and baseline against the unchanged community scene. */
.sw-wise { --sw-art-scale: .923072197; --sw-art-x: -.860599078%; --sw-art-y: 5.422939068%; --sw-base-line: 95.76427256%; }
.sw-sacred { --sw-scene: url("../images/sff/selected-sacred-trust-red-globe.webp"); --sw-art-scale: 1.026161202; --sw-art-y: -1.562613843%; --sw-base-line: 97.974217311%; }
.sw-community { --sw-scene: url("../images/sff/selected-community.webp"); }
.sw-display {
  display: grid;
  place-items: center;
  width: calc(100% + 30px);
  max-width: none;
  height: var(--sw-display-height);
  margin: 0 -15px;
  position: relative;
}
.sw-display::before {
  content: "";
  position: absolute;
  inset: 18% 4% 2%;
  background: radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--sff-light-blue) 13%, transparent), transparent 68%);
  pointer-events: none;
}
.sw-artwork {
  position: relative;
  isolation: isolate;
  width: min(100%, calc(var(--sw-display-height) * 1.3333333333));
  aspect-ratio: 4 / 3;
  transform: translate(var(--sw-art-x), var(--sw-art-y)) scale(var(--sw-art-scale));
}
.sw-artwork::after {
  content: "";
  position: absolute;
  top: calc(var(--sw-base-line) * 2 - 100%);
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: var(--sw-scene) center / contain no-repeat;
  transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(0deg, #0009, transparent 18%);
  mask-image: linear-gradient(0deg, #0009, transparent 18%);
  opacity: .22;
  filter: blur(2px);
  pointer-events: none;
}
.sw-display img {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 16px #00000030);
}
.sw-item h3 {
  max-width: 100%;
  margin: 24px 0 12px;
  color: #fff;
  font-family: var(--accent-font);
  font-size: clamp(1.45rem, 1.9vw, 1.875rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.sw-item h3 sup { font-family: var(--default-font); font-size: .45em; top: -.8em; margin-left: 2px; }
.sw-subtitle {
  margin: 0 0 17px;
  color: #fff;
  font-size: 1.125rem;
  line-height: 1.4;
  text-wrap: balance;
}
.sw-description {
  max-width: 430px;
  margin: 0 0 29px;
  color: #fff;
  font-size: 1.0625rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.sw-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: end;
  gap: 20px;
  min-height: 58px;
  width: min(100%, 286px);
  padding: 12px 22px;
  border: 1px solid color-mix(in srgb, var(--sff-light-blue) 70%, var(--sff-navy));
  border-radius: 999px;
  background: #fff;
  color: var(--sff-navy);
  font-family: var(--default-font);
  font-size: .875rem;
  line-height: 1.4;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: inset 0 0 0 2px #fff, inset 0 -2px 4px #27387e0b, 0 4px 6px -4px #00000080, 0 12px 25px -8px #00000070, 0 0 0 4px #ffffff06;
  transition: transform .22s, border-color .22s, box-shadow .22s;
}
.sw-cta svg { display: block; width: 30px; height: 30px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.sw-cta svg circle { stroke-opacity: .5; }
.sw-cta svg path { transition: transform .22s; }
.sw-cta:hover { color: var(--sff-navy); border-color: var(--sff-light-blue); transform: translateY(-3px); box-shadow: inset 0 0 0 2px #fff, inset 0 -2px 4px #27387e0b, 0 4px 6px -4px #00000080, 0 18px 28px -8px #00000090, 0 0 0 4px #a0cfef12, 0 0 25px -10px #a0cfef70; }
.sw-cta:hover svg path { transform: translate(1px, -1px); }
.sw-cta:focus-visible { outline: 3px solid var(--sff-light-blue); outline-offset: 6px; }
@media (max-width: 1199px) and (min-width: 901px) {
  .sw-gallery { width: calc(100% - 64px); column-gap: 25px; }
  .sw-cta { padding-inline: 17px; gap: 14px; letter-spacing: .06em; }
  .sw-subtitle { font-size: 1rem; }
}
@media (max-width: 900px) {
  .sw-section { --sw-display-height: clamp(280px, 65vw, 400px); padding: 62px 0 76px; }
  .sw-heading-group { margin-bottom: 35px; }
  .sw-heading-group h2 { font-size: clamp(3rem, 7.7vw, 4.25rem); line-height: 1.03; }
  .sw-heading-group > p { max-width: 650px; font-size: 1.125rem; }
  .sw-showcase::before { display: none; }
  .sw-gallery { grid-template-columns: minmax(0, 1fr); gap: 68px; width: min(560px, calc(100% - 48px)); }
  .sw-item { display: flex; flex-direction: column; align-items: center; grid-row: auto; isolation: isolate; }
  .sw-item::before {
    content: "";
    position: absolute;
    top: calc(var(--sw-display-height) * .85);
    left: -50vw;
    right: -50vw;
    height: 135px;
    z-index: -1;
    border-top: 1px solid #a0cfef12;
    background: radial-gradient(ellipse at 50% 0%, #a0cfef1c, transparent 40%), linear-gradient(180deg, #27387e38, transparent);
    pointer-events: none;
  }
  .sw-display { max-width: 535px; width: calc(100% + 20px); margin: 0 -10px; }
  .sw-item h3 { font-size: 1.875rem; max-width: 490px; }
  .sw-subtitle { font-size: 1.125rem; }
  .sw-description { max-width: 440px; font-size: 1.0625rem; }
  .sw-cta { align-self: center; }
}
@media (max-width: 480px) {
  .sw-section { --sw-display-height: clamp(255px, 76vw, 350px); padding-top: 55px; padding-bottom: 62px; }
  .sw-heading-group { width: calc(100% - 40px); margin-bottom: 24px; }
  .sw-overline { gap: 15px; font-size: .875rem; letter-spacing: .2em; margin-bottom: 20px; }
  .sw-overline::before, .sw-overline::after { width: 30px; }
  .sw-heading-group h2 { font-size: clamp(2.625rem, 11vw, 3.25rem); }
  .sw-heading-group > p { font-size: 1rem; line-height: 1.6; }
  .sw-gallery { width: calc(100% - 40px); gap: 56px; }
  .sw-item h3 { font-size: clamp(1.6rem, 6.8vw, 1.9rem); margin-bottom: 11px; }
  .sw-subtitle { font-size: 1.0625rem; margin-bottom: 16px; }
  .sw-description { font-size: 1rem; line-height: 1.6; margin-bottom: 25px; }
  .sw-cta { width: min(100%, 286px); min-height: 58px; }
}
@media (prefers-reduced-motion: reduce) { .sw-cta, .sw-cta svg path { transition: none; } .sw-cta:hover, .sw-cta:hover svg path { transform: none; } }