/* Hallmark · shape: six domain openings · genre: modern-minimal · theme: brand · redesign: component
 * hero: paired field views and full-width maritime/orbital scenes · nav: existing · footer: unchanged
 * signature: each domain's existing material given its own composition · v2.0.0 */
/* Critique: vary the frame and orientation while keeping type, controls and reading order consistent. */
/* Hallmark · hero-review: ship · finish-review: ship · local browser verification recorded in .hallmark/domain-heroes/review.json. */
/* Existing domain labels, maturity disclosures and approved copy are preserved by scope. */
/* Gradients are contrast scrims over existing local imagery, never empty decoration. */
:root {
  --dh-title: clamp(2.5rem, 4.1vw, 3.75rem);
  --dh-gap: clamp(32px, 4.5vw, 64px);
  --dh-control-r: 8px;
  --dh-sea-scrim: linear-gradient(90deg, rgb(5 5 6 / .93), rgb(5 5 6 / .82) 36%, rgb(5 5 6 / .15) 78%), linear-gradient(0deg, rgb(5 5 6 / .98), transparent 28%);
  --dh-sea-mobile-scrim: linear-gradient(180deg, rgb(5 5 6 / .88), rgb(5 5 6 / .79) 64%, rgb(5 5 6 / .9));
  --dh-orbit-scrim: linear-gradient(180deg, rgb(5 5 6 / .8), rgb(5 5 6 / .2) 35%, rgb(5 5 6 / .7) 70%, rgb(5 5 6 / .96)), linear-gradient(90deg, rgb(5 5 6 / .28), transparent 40%, rgb(5 5 6 / .36));
  --dh-orbit-mobile-scrim: linear-gradient(180deg, rgb(5 5 6 / .72), rgb(5 5 6 / .62) 45%, rgb(5 5 6 / .94));
}
.domain-hero-design.domain-hero-design {
  padding-top: calc(var(--header-h) + 56px);
  padding-bottom: 32px;
}
.domain-hero-design .page-hero__title { font-size: var(--dh-title); min-width: 0; overflow-wrap: break-word; text-wrap: balance; }
.domain-hero-design .eyebrow { margin-bottom: 24px; }
.domain-hero-design .lead { line-height: 1.55; }
.domain-hero-design .dom-status { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 24px; }
.domain-hero-design .dom-status__note { max-width: 48ch; font-size: var(--fs-label); line-height: 1.5; }
.domain-hero-design :is(.page-hero__actions, .ih__actions) { gap: 12px; }
.domain-hero-design .btn { border-radius: var(--dh-control-r); }
.domain-hero-design :is(.air-rail, .ih__rail) { margin-top: 8px; }

/* Air keeps a taller camera frame; Infrastructure uses a wider field of view. */
.domain-hero-design.domain-hero--air .air-hero__inner {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px var(--dh-gap);
}
.domain-hero-design.domain-hero--air .air-hero__media { height: 520px; border-radius: var(--r-md); }
.domain-hero-design.domain-hero--air .air-hero__title { max-width: 15ch; font-size: var(--dh-title); }
.domain-hero-design.domain-hero--air .air-hero__lead { max-width: 38ch; margin-top: 0; }
.domain-hero-design.domain-hero--air .air-hero__row { gap: 24px; }
.domain-hero-design.domain-hero--air .air-hero__pause { width: 44px; height: 44px; border-radius: var(--dh-control-r); background: var(--night-1); backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (hover: hover) { .domain-hero-design.domain-hero--air .air-hero__pause:hover { transform: none; background: var(--night-3); } }
.domain-hero-design.domain-hero--air .air-hero__media.is-camera .air-hero__pause { transition: background-color var(--t-fast), border-color var(--t-fast); }
.domain-hero-design.domain-hero--air .air-hero__pause:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.domain-hero-design.domain-hero--infrastructure .ih__inner {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px var(--dh-gap);
}
.domain-hero-design.domain-hero--infrastructure .ih__title { font-size: var(--dh-title); max-width: 17ch; margin: 0; }
.domain-hero-design.domain-hero--infrastructure .ih__media { height: 440px; border-radius: var(--r-md); }
.domain-hero-design.domain-hero--infrastructure .ih__stage { transform: none; }
.domain-hero-design.domain-hero--infrastructure .ih__aside { margin-top: 24px; }
.domain-hero-design.domain-hero--infrastructure .ih__lead { max-width: 32ch; }
.domain-hero-design.domain-hero--infrastructure .ih__actions .btn { padding-inline: 16px; font-size: var(--control-text-sm); }

/* Sea: the moving maritime picture fills the hero, with a protected reading area. */
.domain-hero-design.domain-hero--sea {
  padding-top: calc(var(--header-h) + 56px); padding-bottom: 0;
  background: var(--night); color: var(--night-ink);
}
.domain-hero-design.domain-hero--sea > .page-hero__inner { display: flex; flex-direction: column; align-items: stretch; gap: 48px; pointer-events: none; }
.domain-hero-design.domain-hero--sea > .page-hero__inner > * { pointer-events: auto; }
.domain-hero-design.domain-hero--sea .hm-domain__copy { max-width: 610px; min-height: 480px; justify-content: center; }
.domain-hero-design.domain-hero--sea .sea-hero__title { max-width: 16ch; font-size: clamp(2.75rem, 4.7vw, 4.5rem); }
.domain-hero-design.domain-hero--sea :is(.sea-hero__l1, .sea-hero__l2) { color: inherit; }
.domain-hero-design.domain-hero--sea .sea-hero__row { margin-top: 24px; gap: 24px; }
.domain-hero-design.domain-hero--sea .sea-hero__lead { max-width: 47ch; margin-top: 0; }
.domain-hero-design.domain-hero--sea .sea-hero__stage { position: absolute; inset: var(--header-h) 0 0; width: 100%; margin: 0; z-index: 0; }
.domain-hero-design.domain-hero--sea .sea-hero__media { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; transform: none; }
.domain-hero-design.domain-hero--sea .sea-hero__media::after { z-index: 3; background: var(--dh-sea-scrim); }
.domain-hero-design.domain-hero--sea :is(.sea-hero__still, .sea-hero__video) { filter: saturate(.72); }
.domain-hero-design.domain-hero--sea .sea-hero__tracks { clip-path: inset(0 0 0 53%); }
.domain-hero-design.domain-hero--sea .sea-hero__media .hud { display: none; }
.domain-hero-design.domain-hero--sea .sea-hero__pause { z-index: 4; right: max(var(--gutter), calc((100% - var(--container)) / 2)); bottom: 130px; width: 44px; height: 44px; border-radius: var(--dh-control-r); background: var(--night-1); border-color: var(--night-ink-3); backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (hover: hover) { .domain-hero-design.domain-hero--sea .sea-hero__pause:hover { background: var(--night-3); transform: none; } }
.domain-hero-design.domain-hero--sea .sea-hero__pause:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; border-radius: var(--dh-control-r); }
.domain-hero-design.domain-hero--sea .sea-index { margin: 0; }
.domain-hero-design.domain-hero--sea .sea-index ol { border-color: var(--night-ink-3); }
.domain-hero-design.domain-hero--sea .sea-index a { min-height: 92px; color: var(--night-ink-2); }
@media (hover: hover) { .domain-hero-design.domain-hero--sea .sea-index a:hover { color: var(--white); } }
.domain-hero-design.domain-hero--sea .sea-index a:focus-visible { outline: 2px solid var(--white); outline-offset: -4px; box-shadow: none; }
.domain-hero-design.domain-hero--sea .sea-index a:hover vm-icon { transform: none; }
.domain-hero-design.domain-hero--sea .sea-index__n { color: var(--night-ink-3); }

/* Orbit: a panoramic image, a large headline, and the reading block below its horizon. */
.domain-hero-design.domain-hero--orbit { padding-top: calc(var(--header-h) + 56px); padding-bottom: 48px; min-height: 744px; }
.domain-hero-design.domain-hero--orbit .orbit-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; }
.domain-hero-design.domain-hero--orbit .orbit-hero__head { grid-column: 1 / -1; }
.domain-hero-design.domain-hero--orbit .orbit-hero__title { max-width: 12ch; font-size: clamp(3.5rem, 6.4vw, 6rem); }
.domain-hero-design.domain-hero--orbit .orbit-hero__side { grid-column: 2; padding: 0; max-width: 540px; }
.domain-hero-design.domain-hero--orbit .orbit-hero__lead { max-width: 46ch; margin: 0; }
.domain-hero-design.domain-hero--orbit .orbit-hero__actions { margin-top: 24px; }
.domain-hero-design.domain-hero--orbit .dh-orbit-visual { position: absolute; inset: var(--header-h) 0 0; overflow: hidden; z-index: 0; }
.domain-hero-design.domain-hero--orbit .dh-orbit-visual::after { content: ""; position: absolute; inset: 0; background: var(--dh-orbit-scrim); }
.domain-hero-design.domain-hero--orbit .dh-orbit-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; filter: saturate(.75); animation: dh-orbit-drift 24s ease-in-out infinite alternate paused; }
.domain-hero-design.domain-hero--orbit[data-motion="running"] .dh-orbit-visual img { animation-play-state: running; }
.domain-hero-design.domain-hero--orbit .dh-motion { position: absolute; z-index: 3; left: max(var(--gutter), calc((100% - var(--container)) / 2)); bottom: 48px; display: grid; place-items: center; width: 44px; height: 44px; color: var(--white); background: var(--night-1); border: 1px solid var(--night-ink-3); border-radius: var(--dh-control-r); transition: background-color var(--t-fast) var(--ease-soft); }
.domain-hero-design.domain-hero--orbit .dh-motion[hidden] { display: none; }
@media (hover: hover) { .domain-hero-design.domain-hero--orbit .dh-motion:hover { background: var(--night-3); } }
.domain-hero-design :is(.dh-motion, .air-hero__pause, .sea-hero__pause):active { background: var(--night-2); transform: none; }
.domain-hero-design.domain-hero--orbit .dh-motion:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.domain-hero-design.domain-hero--orbit .dh-motion vm-icon { grid-area: 1 / 1; }
.domain-hero-design.domain-hero--orbit .dh-motion[aria-pressed="false"] vm-icon[name="play"],
.domain-hero-design.domain-hero--orbit .dh-motion[aria-pressed="true"] vm-icon[name="pause"] { display: none; }
.domain-hero-design:is(.domain-hero--sea, .domain-hero--orbit) .btn--glass { --btn-ink: var(--white); --btn-line: var(--night-ink-3); }
.domain-hero-design:is(.domain-hero--sea, .domain-hero--orbit) .btn--glass:hover { --btn-bg: var(--night-3); --btn-line: var(--night-ink-2); }
.domain-hero-design:is(.domain-hero--sea, .domain-hero--orbit) :is(.eyebrow, .dom-status__note) { color: var(--night-ink-2); }
@keyframes dh-orbit-drift { from { transform: scale(1); } to { transform: scale(1.04) translateX(-.8%); } }

@media (max-width: 1100px) and (min-width: 801px) {
  .domain-hero-design.domain-hero--air .air-hero__media { height: 560px; }
  .domain-hero-design.domain-hero--infrastructure .ih__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .domain-hero-design.domain-hero--orbit .orbit-hero__inner { gap: 32px; }
  .domain-hero-design.domain-hero--orbit .orbit-hero__title { font-size: 4.5rem; }
}
@media (max-width: 800px) {
  .domain-hero-design.domain-hero-design { padding-top: calc(var(--header-h) + 40px); padding-bottom: 32px; }
  .domain-hero-design.domain-hero--air .air-hero__inner,
  .domain-hero-design.domain-hero--infrastructure .ih__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .domain-hero-design.domain-hero--air .air-hero__media { height: auto; aspect-ratio: 4 / 3; }
  .domain-hero-design.domain-hero--infrastructure .ih__media { height: auto; aspect-ratio: 16 / 11; }
  .domain-hero-design.domain-hero--infrastructure .ih__title { max-width: 19ch; }
  .domain-hero-design.domain-hero--sea { padding-bottom: 0; }
  .domain-hero-design.domain-hero--sea > .page-hero__inner { gap: 40px; }
  .domain-hero-design.domain-hero--sea .hm-domain__copy { min-height: 0; max-width: 610px; }
  .domain-hero-design.domain-hero--sea .sea-hero__title { font-size: clamp(2.5rem, 7vw, 3.75rem); }
  .domain-hero-design.domain-hero--sea .sea-hero__media::after { background: var(--dh-sea-mobile-scrim); }
  .domain-hero-design.domain-hero--sea .sea-hero__tracks { display: none; }
  .domain-hero-design.domain-hero--sea .sea-hero__pause { top: 16px; bottom: auto; right: 20px; }
  .domain-hero-design.domain-hero--sea .sea-index ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .domain-hero-design.domain-hero--sea .sea-index a { min-height: 88px; }
  .domain-hero-design.domain-hero--orbit { min-height: 800px; padding-bottom: 100px; }
  .domain-hero-design.domain-hero--orbit .orbit-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 120px; }
  .domain-hero-design.domain-hero--orbit .orbit-hero__side { grid-column: 1; max-width: 540px; }
  .domain-hero-design.domain-hero--orbit .orbit-hero__title { font-size: clamp(2.75rem, 8vw, 4.5rem); }
  .domain-hero-design.domain-hero--orbit .dh-orbit-visual img { object-position: 37% center; }
  .domain-hero-design.domain-hero--orbit .dh-orbit-visual::after { background: var(--dh-orbit-mobile-scrim); }
  .domain-hero-design.domain-hero--orbit .dh-motion { bottom: 32px; }
}
@media (max-width: 480px) {
  .domain-hero-design .page-hero__actions .btn,
  .domain-hero-design .ih__actions .btn { width: 100%; flex: 1 1 100%; }
  .domain-hero-design.domain-hero--sea .sea-index a { padding: 16px 12px; font-size: 12px; }
  .domain-hero-design.domain-hero--sea .sea-index a vm-icon { display: none; }
  .domain-hero-design.domain-hero--orbit { min-height: 0; }
  .domain-hero-design.domain-hero--orbit .orbit-hero__inner { gap: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .domain-hero-design.domain-hero--orbit .dh-orbit-visual img { animation: none; transform: none; }
}
