.flagship-case--aurelia {
  --case-bg: #050b0d;
  --case-panel: #0c171a;
  --case-panel-soft: #12272a;
  --case-ink: #f6f0e6;
  --case-muted: #a9b8b5;
  --case-accent: #d8b777;
  --case-signal: #6ccdc1;
  --case-line: rgba(216, 183, 119, .17);
  --brand-display: Georgia, "Times New Roman", serif;
  --brand-body: "Segoe UI", Inter, sans-serif;
  --brand-radius: 0;
}

.flagship-case--aurelia .brand-intro__inner img {
  animation-name: aurelia-intro-horizon;
  transform-origin: 50% 88%;
}

.flagship-case--aurelia .brand-intro__line::after {
  animation-name: aurelia-intro-waterline;
}

.flagship-case--aurelia .brand-intro__inner span {
  animation-name: aurelia-intro-copy;
}

@keyframes aurelia-intro-horizon {
  from {
    filter: blur(7px);
    opacity: 0;
    transform: translateY(24px) rotate(-2deg) scale(.96);
  }
  70% { transform: translateY(-2px) rotate(.35deg) scale(1.01); }
}

@keyframes aurelia-intro-waterline {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes aurelia-intro-copy {
  from { opacity: 0; transform: translateY(9px); }
}

.flagship-case--aurelia main::before {
  background:
    radial-gradient(ellipse at 50% 0, rgba(216, 183, 119, .06), transparent 24%),
    linear-gradient(rgba(216, 183, 119, .025) 1px, transparent 1px);
  background-size: auto, 100% 120px;
}

.flagship-case--aurelia .case-hero {
  background:
    radial-gradient(ellipse at 27% 48%, rgba(108, 205, 193, .11), transparent 30%),
    linear-gradient(112deg, #050b0d 0 52%, #071215 52%);
}

.flagship-case--aurelia .case-hero-image > img {
  filter: saturate(.78) contrast(1.09) brightness(.88);
  object-position: 53% 50% !important;
}

.flagship-case--aurelia .case-hero-content {
  background:
    radial-gradient(circle at 100% 0, rgba(216, 183, 119, .08), transparent 32%),
    linear-gradient(145deg, rgba(15, 29, 32, .98), rgba(5, 12, 14, .98));
}

.flagship-case--aurelia .case-hero-content h1 {
  font-weight: 400 !important;
  letter-spacing: -.04em !important;
}

.flagship-case--aurelia .case-wordmark__name {
  font-size: .98rem;
  font-weight: 400;
}

.flagship-case--aurelia .flagship-section__head h2 {
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .92;
}

.flagship-case--aurelia .flagship-section--panel {
  background:
    radial-gradient(ellipse at 80% 0, rgba(108, 205, 193, .05), transparent 28%),
    radial-gradient(ellipse at 12% 70%, rgba(216, 183, 119, .06), transparent 32%),
    #0c171a;
}

.flagship-case--aurelia .material-gallery {
  grid-template-columns: 1.35fr .65fr;
  min-height: 690px;
}

.flagship-case--aurelia .material-gallery figure {
  min-height: 680px;
}

.flagship-case--aurelia .material-gallery figure:first-child {
  margin-top: 70px;
  min-height: 610px;
}

.flagship-case--aurelia .material-gallery figcaption {
  background: rgba(4, 11, 13, .78);
  border-radius: 0;
  font-family: Georgia, serif;
  letter-spacing: .04em;
  padding: 1rem 1.2rem;
}

.flagship-case--aurelia .prototype-controls {
  background: #071114;
}

.flagship-case--aurelia .prototype-controls button {
  border-bottom: 1px solid rgba(216, 183, 119, .12);
  font-family: Georgia, serif;
  letter-spacing: .02em;
}

.flagship-case--aurelia .prototype-controls button[aria-pressed="true"] {
  background: linear-gradient(90deg, rgba(216, 183, 119, .12), transparent);
  border-color: rgba(216, 183, 119, .32);
}

.flagship-case--aurelia .prototype-stage {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(108, 205, 193, .08), transparent 28%),
    linear-gradient(rgba(216, 183, 119, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 183, 119, .05) 1px, transparent 1px),
    #0d2024;
  background-size: auto, 54px 54px, 54px 54px, auto;
}

.aurelia-vessel-map {
  background:
    radial-gradient(ellipse at 55% 70%, rgba(108, 205, 193, .09), transparent 34%),
    rgba(4, 13, 16, .62);
  border: 1px solid rgba(216, 183, 119, .18);
  height: 360px;
  margin-bottom: 2rem;
  overflow: hidden;
  padding: 1.2rem 1.4rem;
  position: relative;
}

.aurelia-vessel-map__profile {
  bottom: 42px;
  height: 258px;
  left: 4%;
  overflow: visible;
  position: absolute;
  width: 92%;
  z-index: 2;
}

.aurelia-profile-grid path {
  fill: none;
  stroke: rgba(216, 183, 119, .08);
  stroke-width: 1;
}

.aurelia-profile-hull {
  fill: url("#aurelia-hull");
  opacity: .54;
  stroke: rgba(246, 240, 230, .72);
  stroke-width: 2;
  transition: fill .45s ease, opacity .45s ease, stroke .45s ease;
}

.aurelia-profile-main,
.aurelia-profile-super,
.aurelia-profile-bridge {
  fill: rgba(216, 183, 119, .12);
  stroke: rgba(216, 183, 119, .68);
  stroke-width: 2;
  transition: fill .4s ease, filter .4s ease, opacity .4s ease, stroke .4s ease, transform .4s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.aurelia-profile-glass {
  fill: url("#aurelia-glass");
  opacity: .48;
  stroke: rgba(108, 205, 193, .55);
  stroke-width: 1;
}

.aurelia-profile-glass--main { opacity: .32; }

.aurelia-profile-helipad,
.aurelia-profile-tender {
  fill: rgba(5, 11, 13, .54);
  stroke: rgba(216, 183, 119, .5);
  stroke-width: 2;
}

.aurelia-profile-mast {
  fill: none;
  stroke: rgba(246, 240, 230, .8);
  stroke-linecap: round;
  stroke-width: 4;
}

.aurelia-profile-radar {
  fill: var(--case-accent);
  filter: url("#aurelia-glow");
}

.aurelia-profile-portholes circle {
  fill: #071114;
  stroke: rgba(216, 183, 119, .72);
  stroke-width: 2;
}

.aurelia-profile-scale-figures {
  fill: none;
  stroke: rgba(246, 240, 230, .7);
  stroke-linecap: round;
  stroke-width: 2;
}

.aurelia-profile-layer {
  fill: none;
  opacity: 0;
  pointer-events: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
  transition: opacity .35s ease;
}

.aurelia-profile-layer path {
  stroke-dasharray: 9 11;
}

.aurelia-profile-layer circle {
  fill: #071114;
  stroke-width: 4;
}

.aurelia-profile-layer--experience {
  filter: url("#aurelia-glow");
  stroke: var(--case-accent);
}

.aurelia-profile-layer--build {
  stroke: rgba(216, 183, 119, .78);
  stroke-dasharray: 3 8;
  stroke-width: 2;
}

.aurelia-profile-layer--systems {
  filter: url("#aurelia-glow");
  stroke: var(--case-signal);
}

.aurelia-vessel-map[data-mode="experience"] [data-vessel-layer="experience"],
.aurelia-vessel-map[data-mode="build"] [data-vessel-layer="build"],
.aurelia-vessel-map[data-mode="systems"] [data-vessel-layer="systems"] {
  animation: aurelia-profile-trace .72s cubic-bezier(.2, .7, .2, 1) both;
  opacity: 1;
}

.aurelia-vessel-map[data-mode="build"] .aurelia-profile-hull {
  fill: rgba(216, 183, 119, .08);
  opacity: .38;
  stroke-dasharray: 8 7;
}

.aurelia-vessel-map[data-mode="build"] .aurelia-profile-glass {
  opacity: .16;
}

.aurelia-vessel-map[data-mode="systems"] .aurelia-profile-hull {
  fill: rgba(108, 205, 193, .08);
  opacity: .3;
  stroke: rgba(108, 205, 193, .64);
}

[data-active-panel="bridge"] .aurelia-profile-deck--bridge,
[data-active-panel="main"] .aurelia-profile-deck--main,
[data-active-panel="lower"] .aurelia-profile-deck--lower {
  fill: rgba(108, 205, 193, .38);
  filter: url("#aurelia-glow");
  stroke: var(--case-signal);
  transform: translateY(-4px);
}

@keyframes aurelia-profile-trace {
  from {
    opacity: 0;
    stroke-dashoffset: 80;
  }
}

.aurelia-vessel-map::before {
  background: linear-gradient(90deg, rgba(216, 183, 119, .045) 1px, transparent 1px);
  background-size: 46px 100%;
  content: "";
  inset: 0;
  opacity: .65;
  position: absolute;
}

.aurelia-vessel-map__spec {
  display: grid;
  gap: .2rem;
  position: relative;
  width: max-content;
  z-index: 3;
}

.aurelia-vessel-map__modes {
  display: flex;
  gap: .45rem;
  position: absolute;
  right: 1.2rem;
  top: 1.2rem;
  z-index: 4;
}

.aurelia-vessel-map__modes button {
  background: transparent;
  border: 1px solid rgba(216, 183, 119, .18);
  color: var(--case-muted);
  cursor: pointer;
  font: 600 .56rem/1 var(--brand-mono);
  letter-spacing: .08em;
  min-height: 44px;
  padding: .7rem .75rem;
  text-transform: uppercase;
}

.aurelia-vessel-map__modes button:hover,
.aurelia-vessel-map__modes button:focus-visible,
.aurelia-vessel-map__modes button[aria-pressed="true"] {
  background: rgba(216, 183, 119, .12);
  border-color: var(--case-accent);
  color: var(--case-ink);
  outline: 0;
}

.aurelia-vessel-hotspots {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 5;
}

.aurelia-vessel-hotspots button {
  align-items: center;
  background: rgba(4, 13, 16, .88);
  border: 1px solid var(--case-accent);
  border-radius: 50%;
  color: var(--case-accent);
  cursor: pointer;
  display: none;
  font: 700 .5rem/1 var(--brand-mono);
  height: 44px;
  justify-content: center;
  left: var(--hotspot-x);
  pointer-events: auto;
  position: absolute;
  top: var(--hotspot-y);
  transform: translate(-50%, -50%);
  width: 44px;
}

.aurelia-vessel-hotspots button span {
  color: inherit;
  display: block;
  font: inherit;
  line-height: 1;
  position: relative;
  text-shadow: none;
  z-index: 2;
}

.aurelia-vessel-map[data-mode="experience"] [data-hotspot-mode="experience"],
.aurelia-vessel-map[data-mode="build"] [data-hotspot-mode="build"],
.aurelia-vessel-map[data-mode="systems"] [data-hotspot-mode="systems"] {
  display: grid;
}

.aurelia-vessel-map[data-mode="systems"] .aurelia-vessel-hotspots button {
  border-color: var(--case-signal);
  color: var(--case-signal);
}

.aurelia-vessel-hotspots button:hover,
.aurelia-vessel-hotspots button:focus-visible,
.aurelia-vessel-hotspots button[aria-pressed="true"] {
  background: var(--case-accent);
  box-shadow: 0 0 0 5px rgba(216, 183, 119, .12), 0 0 24px rgba(216, 183, 119, .3);
  color: #071519;
  outline: 1px solid var(--case-ink);
  outline-offset: 3px;
}

.aurelia-vessel-map[data-mode="systems"] .aurelia-vessel-hotspots button[aria-pressed="true"] {
  background: var(--case-signal);
  box-shadow: 0 0 0 5px rgba(108, 205, 193, .12), 0 0 24px rgba(108, 205, 193, .34);
  color: #071519;
}

.aurelia-review-card {
  align-items: stretch;
  background:
    linear-gradient(90deg, rgba(216, 183, 119, .08), transparent 46%),
    rgba(4, 13, 16, .76);
  border: 1px solid rgba(216, 183, 119, .2);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(180px, .72fr) minmax(260px, 1fr) minmax(290px, 1.15fr);
  margin: 1rem 0 2rem;
  padding: 1rem 1.1rem;
  position: relative;
}

.aurelia-review-card::before {
  background: var(--case-accent);
  content: "";
  inset: -1px auto -1px -1px;
  position: absolute;
  width: 2px;
}

.aurelia-review-card[data-review-mode="systems"]::before { background: var(--case-signal); }

.aurelia-review-card > div:first-child {
  display: grid;
  gap: .4rem;
}

.aurelia-review-card span,
.aurelia-review-card dt {
  color: var(--case-muted);
  font: 600 .52rem/1.25 var(--brand-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.aurelia-review-card > div strong {
  color: var(--case-ink);
  font: 400 1.05rem/1.2 Georgia, serif;
}

.aurelia-review-card > p {
  align-self: center;
  color: var(--case-muted);
  font: 600 .62rem/1.5 var(--brand-mono);
  margin: 0;
}

.aurelia-review-card dl {
  display: grid;
  gap: .65rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.aurelia-review-card dl > div {
  border-left: 1px solid rgba(216, 183, 119, .14);
  display: grid;
  gap: .35rem;
  padding-left: .7rem;
}

.aurelia-review-card dd {
  color: var(--case-ink);
  font: 600 .58rem/1.4 var(--brand-mono);
  margin: 0;
}

.aurelia-vessel-map__spec span,
.aurelia-vessel-map__spec small {
  color: var(--case-muted);
  font: 600 .6rem/1.4 var(--brand-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.aurelia-vessel-map__spec strong {
  color: var(--case-accent);
  font: 400 1.25rem/1.2 Georgia, serif;
}

.aurelia-vessel-map__ship {
  bottom: 44px;
  height: 110px;
  left: 9%;
  position: absolute;
  right: 8%;
}

.aurelia-vessel-map__ship::before {
  background: linear-gradient(90deg, rgba(216, 183, 119, .24), rgba(216, 183, 119, .05));
  clip-path: polygon(0 34%, 71% 34%, 91% 8%, 100% 28%, 93% 80%, 78% 100%, 8% 90%);
  content: "";
  inset: 0;
  position: absolute;
  transition: background .4s ease, filter .4s ease;
}

.aurelia-vessel-map__deck {
  background: rgba(216, 183, 119, .19);
  border-top: 1px solid rgba(216, 183, 119, .62);
  height: 12px;
  left: 12%;
  position: absolute;
  transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
}

.aurelia-vessel-map__deck--bridge { right: 33%; top: 14px; }
.aurelia-vessel-map__deck--main { right: 14%; top: 46px; }
.aurelia-vessel-map__deck--lower { right: 6%; top: 78px; }

[data-active-panel="bridge"] .aurelia-vessel-map__deck--bridge,
[data-active-panel="main"] .aurelia-vessel-map__deck--main,
[data-active-panel="lower"] .aurelia-vessel-map__deck--lower {
  background: rgba(108, 205, 193, .45);
  box-shadow: 0 0 24px rgba(108, 205, 193, .28);
  transform: translateY(-3px);
}

.aurelia-vessel-map[data-mode="build"] .aurelia-vessel-map__ship::before {
  background:
    repeating-linear-gradient(90deg, rgba(216, 183, 119, .28) 0 12px, rgba(216, 183, 119, .06) 12px 20px);
}

.aurelia-vessel-map[data-mode="build"] .aurelia-vessel-map__deck {
  border-top-style: dashed;
}

.aurelia-vessel-map[data-mode="systems"] .aurelia-vessel-map__ship::before {
  background: linear-gradient(90deg, rgba(108, 205, 193, .32), rgba(108, 205, 193, .05));
  filter: drop-shadow(0 0 14px rgba(108, 205, 193, .22));
}

.aurelia-vessel-map[data-mode="systems"] .aurelia-vessel-map__deck {
  background: rgba(108, 205, 193, .25);
  border-color: rgba(108, 205, 193, .8);
}

.aurelia-vessel-map__bow,
.aurelia-vessel-map__stern {
  border-radius: 50%;
  height: 6px;
  position: absolute;
  top: 74px;
  width: 6px;
}

.aurelia-vessel-map__bow { background: var(--case-signal); right: 4%; }
.aurelia-vessel-map__stern { background: var(--case-accent); left: 7%; }

.aurelia-vessel-map__scale {
  bottom: 14px;
  display: flex;
  font: 600 .56rem/1 var(--brand-mono);
  justify-content: space-between;
  left: 9%;
  position: absolute;
  right: 8%;
}

.aurelia-vessel-map__scale::before {
  border-top: 1px solid rgba(216, 183, 119, .28);
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: -6px;
}

.flagship-case--aurelia .metric strong {
  font-family: Georgia, serif;
  font-weight: 400;
}

body.flagship-case--aurelia.case-page .feature-card {
  min-height: 310px;
  padding: 5rem 2.2rem 2.2rem !important;
}

.flagship-case--aurelia .feature-card span {
  left: 2.2rem;
  position: absolute;
  top: 2rem;
}

.flagship-case--aurelia .feature-card h3 {
  font-family: Georgia, serif;
  font-size: 1.65rem;
  font-weight: 400;
}

.aurelia-vessel-map__modecopy {
  bottom: 14px;
  color: var(--case-muted);
  font: 600 .56rem/1.4 var(--brand-mono);
  left: 1.4rem;
  margin: 0;
  max-width: 42ch;
  position: absolute;
  z-index: 3;
}

.aurelia-vessel-map__scale {
  left: auto;
  width: 36%;
}

@media (max-width: 900px) {
  .flagship-case--aurelia .material-gallery { grid-template-columns: 1fr; min-height: 0; }
  .flagship-case--aurelia .material-gallery figure,
  .flagship-case--aurelia .material-gallery figure:first-child { margin-top: 0; min-height: 520px; }
  .aurelia-vessel-map { height: 350px; }
  .aurelia-vessel-map__modes { left: 1.2rem; right: auto; top: 76px; }
  .aurelia-vessel-map__modecopy { max-width: 56%; }
  .aurelia-vessel-map__profile {
    bottom: 42px;
    height: 190px;
    left: 1%;
    width: 98%;
  }
  .aurelia-review-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aurelia-review-card dl { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .flagship-case--aurelia .material-gallery figure,
  .flagship-case--aurelia .material-gallery figure:first-child { min-height: 420px; }
  .flagship-case--aurelia .feature-card { min-height: 270px; }
  .aurelia-vessel-map {
    height: 330px;
    padding-inline: 1rem;
  }
  .aurelia-vessel-map__modes {
    gap: .3rem;
    left: 1rem;
  }
  .aurelia-vessel-map__modes button {
    font-size: .5rem;
    padding-inline: .55rem;
  }
  .aurelia-vessel-map__profile {
    bottom: 46px;
    height: 155px;
    left: -4%;
    width: 108%;
  }
  .aurelia-vessel-map__modecopy {
    left: 1rem;
    max-width: 58%;
  }
  .aurelia-vessel-hotspots button {
    font-size: .45rem;
    height: 44px;
    min-height: 44px;
    width: 44px;
  }
  .aurelia-review-card { grid-template-columns: 1fr; }
  .aurelia-review-card dl {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
  .aurelia-review-card dl > div {
    border-left: 0;
    border-top: 1px solid rgba(216, 183, 119, .14);
    padding-left: 0;
    padding-top: .55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aurelia-profile-deck,
  .aurelia-profile-hull,
  .aurelia-profile-layer {
    animation: none !important;
    transition: none;
  }
}
