/* Hadley field guide: a layered, tactile book of offerings. */
.offerings-book {
  position: relative;
  max-width: 1300px;
  margin: clamp(38px, 5vw, 64px) auto 0;
}

.offerings-rail {
  --page-width: min(58vw, 690px);
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: clamp(360px, 43vw, 500px);
  margin: 0;
  padding: 0 max(12px, calc((100% - var(--page-width)) / 2));
  overflow-x: auto;
  overflow-y: hidden;
  list-style: none;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(12px, calc((100% - var(--page-width)) / 2));
  -webkit-overflow-scrolling: touch;
}

.offerings-rail::-webkit-scrollbar { display: none; }

/* Without scripting, keep a plainly browsable strip with no overlapping text. */
.offerings-book:not(.is-enhanced) .offerings-rail { scrollbar-width: thin; }
.offerings-book:not(.is-enhanced) .offerings-rail::-webkit-scrollbar { display: block; height: 6px; }
.offerings-book:not(.is-enhanced) .offering-page + .offering-page { margin-inline-start: 16px; }

.offering-page {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  flex: 0 0 var(--page-width);
  min-width: 0;
  height: 100%;
  padding: clamp(30px, 4.2vw, 56px);
  overflow: hidden;
  border: 1px solid rgba(179, 207, 249, .3);
  background:
    linear-gradient(145deg, rgba(43, 91, 171, .76), rgba(24, 59, 119, .98) 70%),
    var(--blue);
  color: var(--ivory);
  box-shadow: 0 24px 56px rgba(2, 13, 31, .22);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.offering-page + .offering-page {
  margin-inline-start: calc(var(--page-width) * -.17);
}

/* A quiet inset rule gives each panel the feel of a printed field-guide plate. */
.offering-page::before {
  position: absolute;
  z-index: 1;
  inset: 14px;
  border: 1px solid rgba(217, 231, 251, .12);
  content: "";
  pointer-events: none;
}

.offering-page::after {
  position: absolute;
  z-index: 1;
  inset: 14px auto 14px 14px;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(182, 213, 255, .46) 24%, rgba(182, 213, 255, .12) 76%, transparent);
  content: "";
  pointer-events: none;
}

.offering-page:nth-child(2) {
  background:
    linear-gradient(150deg, rgba(33, 74, 145, .92), rgba(15, 43, 94, .98)),
    var(--navy);
}

.offering-page:nth-child(3) {
  background:
    linear-gradient(145deg, rgba(46, 91, 165, .9), rgba(23, 57, 116, .98)),
    var(--blue);
}

.offering-page:nth-child(4) {
  background:
    linear-gradient(145deg, rgba(24, 61, 127, .95), rgba(12, 38, 83, .98)),
    var(--navy);
}

.offering-page:nth-child(5) {
  background:
    linear-gradient(145deg, rgba(55, 104, 183, .88), rgba(27, 66, 133, .98)),
    var(--blue);
}

.offering-page .product-card-title {
  position: relative;
  z-index: 3;
  max-width: 560px;
  margin: 0;
  color: inherit;
  font-family: var(--sans);
  font-size: clamp(40px, 5.15vw, 68px);
  font-weight: 400;
  line-height: 1.01;
  letter-spacing: -.055em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.offering-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: rgba(193, 219, 255, .76);
}

.offering-art::before,
.offering-art::after {
  position: absolute;
  display: block;
  content: "";
}

/* Contact lookup: layered data records with a highlighted match. */
.offering-art--lookup::before {
  top: 10%;
  right: 9%;
  width: 58%;
  height: 47%;
  border: 1px solid rgba(194, 220, 255, .42);
  background:
    radial-gradient(circle at 12% 25%, #c2ddff 0 3px, transparent 4px),
    radial-gradient(circle at 12% 50%, #c2ddff 0 3px, transparent 4px),
    radial-gradient(circle at 12% 75%, #c2ddff 0 3px, transparent 4px),
    repeating-linear-gradient(0deg, transparent 0 24%, rgba(194, 220, 255, .15) 24.5% 25%);
  box-shadow: 12px 12px 0 -1px rgba(24, 59, 119, .9), 13px 13px 0 rgba(194, 220, 255, .22);
  transform: rotate(-6deg);
}
.offering-art--lookup::after {
  top: 26%;
  right: 14%;
  width: 44%;
  height: 12%;
  border: 1px solid rgba(220, 235, 255, .65);
  background: rgba(132, 182, 244, .12);
  transform: rotate(-6deg);
}
.product-card-link { color:inherit; text-decoration:none; }
.offering-page--linked .product-card-title { position:static; }
.product-card-link::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
}
.product-card-link:focus-visible::after {
  outline:3px solid var(--sky);
  outline-offset:-6px;
}
.product-card-link:hover { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.12em; }

/* Advisory: a measured compass rose, cropped like a map detail. */
.offering-art--advisory::before {
  top: 7%;
  right: 7%;
  width: min(59%, 350px);
  aspect-ratio: 1;
  border: 1px solid rgba(194, 220, 255, .35);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 29%, rgba(194, 220, 255, .18) 29.2% 29.6%, transparent 29.8% 49%, rgba(194, 220, 255, .27) 49.2% 49.6%, transparent 49.8%),
    repeating-conic-gradient(from 0deg, rgba(194, 220, 255, .18) 0deg 1deg, transparent 1deg 15deg);
  box-shadow: inset 0 0 0 13px rgba(194, 220, 255, .035), 0 0 0 13px rgba(194, 220, 255, .035);
  transform: rotate(-8deg);
}

.offering-art--advisory::after {
  top: 18%;
  right: 18%;
  width: 31%;
  aspect-ratio: 1;
  border: 1px solid rgba(220, 235, 255, .7);
  background: linear-gradient(135deg, transparent 49.7%, rgba(220, 235, 255, .8) 50%, transparent 50.5%);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  opacity: .55;
}

/* Mapping: longitudes, latitudes and a broad survey arc. */
.offering-art--mapping::before {
  inset: 0 0 13% 24%;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(191, 219, 255, .2) 32px, transparent 33px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(191, 219, 255, .17) 40px, transparent 41px);
  mask-image: linear-gradient(135deg, transparent 0%, #000 27%, #000 76%, transparent 100%);
}

.offering-art--mapping::after {
  top: 4%;
  right: 5%;
  width: 57%;
  height: 61%;
  border: 1px solid rgba(191, 219, 255, .58);
  border-radius: 50%;
  transform: rotate(-34deg) skewX(-16deg);
  box-shadow: 0 0 0 16px rgba(191, 219, 255, .045), 0 0 0 32px rgba(191, 219, 255, .04);
}

/* Experts: a sparse constellation with a clear, human-scale center. */
.offering-art--experts::before {
  inset: 0 0 16% 20%;
  background:
    radial-gradient(circle at 23% 35%, #c2ddff 0 2px, transparent 3px),
    radial-gradient(circle at 44% 21%, #c2ddff 0 3px, transparent 4px),
    radial-gradient(circle at 68% 33%, #c2ddff 0 2px, transparent 3px),
    radial-gradient(circle at 84% 16%, #c2ddff 0 2px, transparent 3px),
    radial-gradient(circle at 33% 63%, #c2ddff 0 2px, transparent 3px),
    radial-gradient(circle at 59% 71%, #c2ddff 0 3px, transparent 4px),
    radial-gradient(circle at 81% 57%, #c2ddff 0 2px, transparent 3px),
    linear-gradient(26deg, transparent 44.7%, rgba(190, 218, 255, .34) 45%, transparent 45.3%),
    linear-gradient(148deg, transparent 49.7%, rgba(190, 218, 255, .25) 50%, transparent 50.3%),
    linear-gradient(72deg, transparent 60.7%, rgba(190, 218, 255, .22) 61%, transparent 61.3%);
  mask-image: linear-gradient(180deg, #000 0%, #000 64%, transparent 100%);
}

.offering-art--experts::after {
  top: 15%;
  right: 18%;
  width: 24%;
  aspect-ratio: 1;
  border: 1px solid rgba(208, 229, 255, .64);
  border-radius: 50%;
  box-shadow: 0 0 0 12px rgba(208, 229, 255, .06), 0 0 0 27px rgba(208, 229, 255, .035);
}

/* Agentic sales: a forward-rising route rather than a literal arrow icon. */
.offering-art--sales::before {
  top: 15%;
  right: 4%;
  width: 72%;
  height: 59%;
  border-top: 1px solid rgba(192, 219, 255, .65);
  border-radius: 52% 48% 0 0;
  transform: rotate(-18deg);
  box-shadow: 0 -17px 0 -16px rgba(192, 219, 255, .48), 0 -34px 0 -33px rgba(192, 219, 255, .3);
}

.offering-art--sales::after {
  top: 13%;
  right: 15%;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(220, 237, 255, .9);
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 7px rgba(192, 219, 255, .1), -142px 55px 0 -3px rgba(213, 232, 255, .72), -142px 55px 0 4px rgba(192, 219, 255, .12);
}

/* Software: an engineered stack of offset frames and precise grid marks. */
.offering-art--software::before {
  top: 9%;
  right: 9%;
  width: 53%;
  height: 56%;
  border: 1px solid rgba(195, 221, 255, .63);
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(195, 221, 255, .25) 50%, transparent 50.3%),
    linear-gradient(0deg, transparent 49.7%, rgba(195, 221, 255, .25) 50%, transparent 50.3%);
  box-shadow: 12px 12px 0 -1px rgba(22, 59, 123, .8), 13px 13px 0 0 rgba(195, 221, 255, .43), 26px 26px 0 -1px rgba(22, 59, 123, .8), 27px 27px 0 0 rgba(195, 221, 255, .24);
  transform: skewY(-8deg) rotate(-3deg);
}

.offering-art--software::after {
  top: 28%;
  right: 25%;
  width: 16%;
  height: 16%;
  border: 1px solid rgba(218, 235, 255, .76);
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(195, 221, 255, .06);
}

.is-enhanced .offering-page {
  opacity: .76;
  transform: scale(.91) translateY(8px);
  transform-origin: center;
  transition:
    transform .42s cubic-bezier(.2, .7, .2, 1),
    opacity .32s ease,
    border-color .32s ease,
    box-shadow .32s ease;
}

.is-enhanced .offering-page[data-distance="1"] {
  opacity: .88;
  transform: scale(.95) translateY(3px);
}

.is-enhanced .offering-page[data-active="true"] {
  z-index: 5;
  opacity: 1;
  border-color: rgba(203, 226, 255, .64);
  box-shadow: 0 28px 66px rgba(2, 13, 31, .36), 0 0 0 1px rgba(203, 226, 255, .08);
  transform: scale(1) translateY(0);
}

.offerings-controls {
  position: absolute;
  z-index: 10;
  inset: 0 -18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  pointer-events: none;
}

.offerings-controls[hidden] { display: none; }

.offering-status {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

.offerings-controls button {
  display: grid;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--gray);
  border-radius: 50%;
  background: var(--ivory);
  color: var(--navy);
  box-shadow: 0 3px 14px rgba(2, 13, 31, .2);
  pointer-events: auto;
  font-family: var(--sans);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.offerings-controls svg { width:24px; height:24px; }

.offerings-controls button:hover:not(:disabled) {
  border-color: var(--sky);
  background: var(--powder);
  transform: translateY(-1px);
}

.offerings-controls button:active:not(:disabled) { transform: translateY(1px); }
.offerings-controls button:disabled { opacity: .38; cursor: default; }

.offerings-rail:focus-visible,
.offerings-controls button:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 4px;
}

@media (max-width: 700px) {
  .offerings-book { margin-top: 32px; }
  .offerings-rail {
    --page-width: min(72vw, 620px);
    height: clamp(330px, 100vw, 438px);
    padding-inline: max(10px, calc((100% - var(--page-width)) / 2));
  }
  .offering-page { padding: 28px; }
  .offering-page + .offering-page { margin-inline-start: calc(var(--page-width) * -.13); }
  .offering-page .product-card-title { font-size: clamp(36px, 8.8vw, 54px); }
  .offerings-controls { inset-inline:-10px; }
  .offerings-controls button { flex-basis:44px; width:44px; height:44px; }
}

@media (max-width: 360px) {
  .offerings-rail { --page-width: 74vw; }
  .offering-page { padding: 22px; }
  .offering-page .product-card-title { font-size: clamp(33px, 9vw, 38px); }
}

@media (prefers-reduced-motion: reduce) {
  .is-enhanced .offering-page,
  .offerings-controls button {
    transition: none;
  }
  .is-enhanced .offering-page,
  .is-enhanced .offering-page[data-distance="1"],
  .is-enhanced .offering-page[data-active="true"] {
    opacity: 1;
    transform: none;
  }
}

html.motion-settled .is-enhanced .offering-page {
  opacity: 1;
  transform: none;
  transition: none;
}