/* Ferry-terminal hero: extends the photographic layout in styles.css. */
.hero--photographic .hero__title > span { display: block; }
.hero--photographic .hero__cta > a { flex-shrink: 0; }
.hero--photographic a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.hero--photographic .hero__caption a:focus-visible { outline-color: #fff; }
.hero--photographic .hero__caption a:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 1101px) and (min-height: 741px) {
  .hero--photographic .hero__title { max-width: 1080px; font-size: 68px; line-height: 1.02; }
  .hero--photographic .hero__meta { margin-bottom: 12px; }
  .hero--photographic .hero__lede { margin-top: 16px; }
}

@media (max-width: 640px) {
  .hero--photographic .hero__lede { font-size: 16px; }
}

/* Optional project inspection: the photograph and copy keep their resting layout. */
.hero__photo { transition: filter 650ms ease; }
.hero__content { position: relative; z-index: 2; pointer-events: none; }
.hero__content a { pointer-events: auto; }
.hero--photographic .hero__caption { display: flex; align-items: end; justify-content: space-between; gap: 24px; z-index: 3; }
.hero-lens-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 12px; flex-shrink: 0; min-height: 46px; padding: 10px 16px; border: 1px solid #ffffff70; border-radius: 4px; background: #172126a8; backdrop-filter: blur(12px); color: #fff; font-size: 13px; cursor: pointer; transition: background 200ms, border-color 200ms; }
.hero-lens-toggle:hover { background: #172126e8; border-color: #fff; }
.hero-lens-toggle:focus-visible, .hero-lens__pin:focus-visible, .hero-perspective button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.hero-lens-toggle__mark { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid #ffffff60; border-radius: 50%; }
.hero-lens-toggle__mark > span { width: 8px; height: 8px; border: 1px solid #fff; transform: rotate(45deg); transition: transform 400ms; }
.hero-lens-toggle:hover .hero-lens-toggle__mark > span { transform: rotate(135deg); }
.hero-lens-toggle__short { display: none; }
.hero-lens { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 550ms ease, visibility 550ms; }
.hero-lens__image-space { position: absolute; }
.hero-lens__image-space > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.is-inspecting .hero__photo { filter: saturate(.35); }
.is-inspecting .hero-lens { visibility: visible; opacity: 1; }
.hero-lens__scope polygon { fill: #ae234012; stroke: #ffffffb8; stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill 450ms, stroke 450ms; }
.hero-lens__scope path { stroke: #ffffff90; stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero-lens__scope.is-selected polygon { fill: #bd234b48; stroke: #fff; stroke-width: 2; }
.is-inspecting .hero-lens__scope polygon, .is-inspecting .hero-lens__scope path { stroke-dasharray: 1; animation: hero-scope-draw 900ms cubic-bezier(.2,.6,.2,1) both; }
.hero-lens__pin { position: absolute; display: flex; align-items: center; gap: 8px; transform: translate(-50%, -50%); min-height: 44px; padding: 4px 12px 4px 4px; border: 1px solid #ffffffb8; border-radius: 24px; color: #fff; background: #18262dd9; backdrop-filter: blur(8px); font-size: 12px; pointer-events: auto; cursor: pointer; transition: background 200ms, box-shadow 200ms; }
.hero-lens__pin > span:first-child { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #ffffff50; border-radius: 50%; font: 11px var(--font-mono); }
.hero-lens__pin.is-selected { background: #aa2440; box-shadow: 0 0 0 5px #ffffff20; }
.hero-lens__pin:hover { box-shadow: 0 0 0 5px #ffffff30; }
.hero-perspective { position: absolute; z-index: 4; left: max(56px, calc((100% - 1560px) / 2 + 56px)); bottom: 168px; width: 370px; padding: 16px 20px; border: 1px solid #ffffff40; border-top: 2px solid #c94662; border-radius: 4px; background: #192126ed; backdrop-filter: blur(18px); color: #fff; box-shadow: 0 12px 32px #07111725; animation: hero-panel-enter 350ms ease both; }
.hero-perspective[hidden] { display: none; }
.hero-perspective__eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 10px/1.4 var(--font-mono); color: #cbd5d8; }
.hero-perspective__choices { display: flex; gap: 5px; margin-block: 10px 12px; }
.hero-perspective__choices button { flex: 1; min-height: 32px; padding: 6px 9px; font-size: 12px; color: #d9e0e1; border: 1px solid #ffffff25; background: transparent; border-radius: 2px; cursor: pointer; }
.hero-perspective__choices button[aria-pressed="true"] { border-color: #be405d; background: #9d2d47; color: #fff; }
.hero-perspective__choices button:hover { border-color: #e18a9d; }
.hero-perspective__detail { min-height: 100px; animation: hero-panel-enter 250ms ease both; }
.hero-perspective__detail h2 { font-size: 21px; line-height: 1.2; font-weight: 500; margin: 0 0 10px; }
.hero-perspective__detail p { font-size: 14px; line-height: 1.55; color: #d4dcdf; margin: 0; }
.hero-perspective__project { display: flex; gap: 10px; align-items: center; justify-content: space-between; font-size: 11px; line-height: 1.4; padding-top: 10px; margin-top: 12px; border-top: 1px solid #ffffff25; color: #e0e6e8; }
.hero-perspective__project svg { flex-shrink: 0; }
.hero__clients-inner > a, .hero__sector-pair a { position: relative; padding-block: 9px; margin-block: -9px; }
.hero__clients-inner > a::after, .hero__sector-pair a::after { content: ""; position: absolute; left: 0; bottom: 4px; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 200ms ease; }
.hero__clients-inner > a:hover, .hero__sector-pair a:hover { color: var(--accent); }
.hero__clients-inner > a:hover::after, .hero__sector-pair a:hover::after { transform: scaleX(1); }
.hero__sector-pair { white-space: nowrap; }
@keyframes hero-scope-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hero-panel-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1100px), (max-height: 860px) {
  .hero-perspective { position: relative; inset: auto; width: 100%; border: 0; border-top: 2px solid #b83550; border-radius: 0; padding: 22px max(20px, 4vw); box-shadow: none; background: #192126; }
  .hero-perspective__detail { min-height: 0; }
  .hero-perspective__choices { max-width: 430px; }
  .hero-perspective__choices button { min-height: 44px; font-size: 14px; }
  .hero-perspective__detail p { max-width: 60ch; font-size: 16px; }
  .hero-perspective__project { font-size: 12px; }
  .hero-lens__pin { display: none; }
}
@media (max-width: 640px) {
  .hero--photographic .hero__caption { gap: 12px; align-items: center; }
  .hero__caption > a { min-width: 0; }
  .hero-lens-toggle { min-height: 44px; padding: 9px 10px; gap: 7px; font-size: 12px; }
  .hero-lens-toggle__mark, .hero-lens-toggle__full { display: none; }
  .hero-lens-toggle__short { display: inline; }
  .hero__clients-inner > a, .hero__sector-pair a { display: inline-flex; min-height: 32px; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--photographic *, .hero--photographic *::after { animation: none !important; transition: none !important; }
}