.hero-review > main.wrap { padding: 34px 36px; }
.hero-review-intro { max-width: 860px; padding-bottom: 28px; }
.hero-eyebrow { font: 600 13px/1.4 var(--sans); color: var(--water); letter-spacing: .12em; text-transform: uppercase; margin: 26px 0 12px; }
.hero-review-intro h1 { font: 400 clamp(36px,4.8vw,62px)/1.12 var(--display); letter-spacing: -.04em; margin: 0 0 20px; }
.hero-review-intro > p:not(.hero-eyebrow) { font: 400 18px/1.55 var(--serif); }
.hero-review-intro .hero-review-note { font: 400 14px/1.5 var(--sans) !important; color: var(--muted); }
.hero-hub-tabs { display: flex; gap: 28px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font: 600 17px var(--sans); }
.hero-choice-summary { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 20px 0; font: 400 15px/1.5 var(--sans); }
.hero-choice-summary > span { flex: 1; min-width: 250px; }
.hero-choice-summary > small { width: 100%; color: var(--muted); }
.hero-choice-summary button, .hero-option button { border: 1px solid var(--water); padding: 10px 16px; background: transparent; color: var(--water); border-radius: 0; font: 600 15px var(--sans); cursor: pointer; }
.hero-hub-study { padding: 28px 0 36px; scroll-margin-top: 20px; border-top: 1px solid var(--rule); }
.hero-hub-study > header { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 24px; }
.hero-hub-study h2, .hero-icon-reference h2 { font: 400 32px/1.2 var(--serif); background: none; border: 0; padding: 0; margin: 0; }
.hero-hub-study > header p { margin: 0; font: 400 16px/1.5 var(--sans); color: var(--muted); }
.hero-option-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.hero-option { min-width: 0; border: 1px solid var(--rule-pale); padding: 20px; }
.hero-option.is-chosen { outline: 2px solid var(--water); outline-offset: -1px; }
.hero-option-title > span { font: 600 12px var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--water); }
.hero-option-title h3 { margin: 8px 0 6px; font: 400 27px/1.2 var(--serif); }
.hero-option-title p { margin: 0 0 20px; font: 400 14px var(--sans); color: var(--muted); }
.hero-miniature { position: relative; display: block; height: 255px; overflow: hidden; color: var(--ink); background: #f3f7f6; border: 1px solid var(--rule-pale); text-decoration: none; }
.hero-miniature > img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: right center; mask-image: linear-gradient(90deg,transparent,#000 4%); }
.hero-mini-copy { position: relative; z-index: 1; width: 58%; padding: 26px 16px; }
.hero-mini-copy > strong { display: block; font: 400 clamp(25px,2.1vw,34px)/1.08 var(--display); letter-spacing: -.04em; }
.hero-mini-copy > span { display: block; margin-top: 12px; font: 500 12px var(--sans); }
.mini-search { display: flex; justify-content: space-between; border: 1px solid var(--rule); margin-top: 24px; padding: 10px; background: #fbfcfaf0; font: 400 13px var(--serif); }
.mini-search b { color: var(--water); }
.hero-option-description { font: 400 16px/1.5 var(--sans); min-height: 48px; }
.hero-option-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; font: 500 15px var(--sans); }
.hero-option button[aria-pressed="true"] { background: var(--water); color: white; }
.hero-geography-source { display: inline-block; margin-top: 18px; font: 400 13px/1.5 var(--sans); }
.hero-icon-reference { padding: 28px 0; border-top: 1px solid var(--rule); }
.hero-icon-reference > p { font: 400 17px/1.5 var(--serif); }
.hero-icon-reference .hub-family-links { border-top: 1px solid var(--rule-pale); margin-top: 24px; }
.hero-preview-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding: 16px 36px; border-bottom: 1px solid var(--rule-pale); font: 500 15px/1.4 var(--sans); }
.hero-preview-nav > span { margin-right: auto; color: var(--muted); }
.hero-preview-nav [aria-current="page"] { text-decoration: underline; }
.register-hero.with-water-art { position: relative; isolation: isolate; min-height: 360px; padding-top: 32px; padding-bottom: 48px; background: #f3f7f6; }
.hub-hero-image { position: absolute; z-index: -2; inset: 0 0 0 auto; width: auto; max-width: 100%; height: 100%; object-fit: contain; object-position: right center; mask-image: linear-gradient(90deg,transparent,#000 3%); }
.hub-hero-veil { position: absolute; z-index: -1; inset: 0; background: none; }
.with-water-art .register-title-row { display: block; }
.with-water-art .register-title-row h1 { max-width: 64%; font-size: clamp(42px,4.7vw,70px); }
.with-water-art .register-title-row > p { margin: 18px 0 0; }
.with-water-art .register-intro { max-width: 58%; margin: 18px 0; }
.with-water-art .register-search { max-width: 60%; }
.hub-art-caption { position: absolute; bottom: 14px; right: 24px; margin: 0; padding: 5px 9px; background: #f3f7f6d9; color: var(--muted); font: 400 12px/1.4 var(--sans); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 18px; max-width: calc(100% - 36px); }
.hub-art-coordinates { font: 400 11px/1.6 var(--mono, monospace); letter-spacing: .07em; white-space: nowrap; }
@media(max-width:1000px) {
  .hero-option-grid { grid-template-columns: 1fr; }
  .hero-miniature { height: 330px; }
  .hero-mini-copy { padding: 34px 22px; }
  .hero-mini-copy > strong { font-size: 38px; }
}
@media(max-width:760px) {
  .hero-review > main.wrap { padding: 24px 18px; }
  .hero-hub-tabs { gap: 16px 24px; }
  .hero-hub-study > header { display: block; }
  .hero-hub-study > header p { margin-top: 10px; }
  .hero-option { padding: 14px; }
  .hero-miniature { height: 285px; }
  .hero-miniature > img { height: 155px; top: auto; bottom: 0; object-position: right bottom; mask-image: linear-gradient(180deg,transparent,#000 5%); }
  .hero-mini-copy { width: 100%; padding: 16px; }
  .hero-mini-copy > strong { font-size: 27px; max-width: 90%; }
  .hero-mini-copy > span { margin-top: 8px; }
  .mini-search { margin-top: 12px; width: 82%; }
  .hero-choice-summary > span { min-width: 0; width: 100%; flex: auto; }
  .hero-preview-nav { padding: 14px 18px; gap: 10px 16px; }
  .hero-preview-nav > span { width: 100%; }
  .register-hero.with-water-art { min-height: 360px; padding: 26px 18px 95px; }
  .with-water-art .register-title-row h1 { max-width: 100%; margin: 0 auto; text-align: center; font-size: clamp(34px,8.5vw,42px); }
  .with-water-art .register-title-row > p { display: block; margin-top: 14px; }
  .with-water-art .register-intro { display: none; }
  .with-water-art .register-search { max-width: 100%; position: absolute; bottom: 20px; left: 18px; right: 18px; }
  .hub-hero-image { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 82% center; mask-image: none; }
  .hub-hero-veil { background: linear-gradient(180deg,#f3f7f6e8 0%,#f3f7f699 24%,transparent 46%,transparent 76%,#f3f7f6b3 100%); }
  .hub-art-caption { bottom: 8px; right: 10px; font-size: 11px; }
}

.mini-coordinates { position: absolute; right: 10px; bottom: 9px; padding: 4px 6px; color: var(--muted); background: #f3f7f6d9; font-size: 9px; }

/* Selected desktop B; the approved mobile composition remains 360px. */
@media(min-width:761px){
 body .register-hero.with-water-art{height:280px;min-height:280px;box-sizing:border-box;padding-top:24px;padding-bottom:18px}
 .register-hero .register-intro{margin-block:8px}
 .register-hero .register-search{margin-top:16px}
 body.atlas-state-hub .hub-hero-image{inset:0 0 0 auto;width:76%;max-width:76%;height:100%;object-fit:cover;object-position:center;mask-image:linear-gradient(90deg,transparent 0%,#000 14%)}
}