/* The homepage uses the actual app's map geometry, without the old screen montage video. */
.export-globe-home-stage {
  position: relative;
  display: block;
  width: 100%;
  min-height: 360px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid #31576c;
  background: radial-gradient(circle at 50% 52%, #0b4669 0, #08314c 42%, #071b2c 78%);
}
.export-globe-home-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.globe-country-focus {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: grid;
  gap: 1px;
  min-width: 82px;
  max-width: min(180px, 42%);
  padding: 5px 9px;
  border: 1px solid rgba(243, 201, 116, .85);
  border-radius: 8px;
  background: rgba(5, 28, 43, .92);
  color: #f4f9f8;
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 13px));
  transition: none;
}
.globe-country-focus strong { font: 600 clamp(12px, 1.2vw, 16px)/1.3 var(--sans); overflow-wrap: anywhere; }
.globe-country-focus span { font: 10px/1.2 var(--sans); color: #d9e8eb; overflow-wrap: anywhere; }
.export-globe-home-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 54% 48%, transparent 30%, rgba(2,14,25,.28) 76%);
}
.export-globe-motion-toggle,
.sample-fish-motion-toggle {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 15px;
  border: 1px solid rgba(220,239,245,.64);
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(5,28,43,.78);
  color: #f4f9f8;
  font: 11px/1.3 var(--sans);
  cursor: pointer;
}
.export-globe-motion-toggle:hover,
.sample-fish-motion-toggle:hover,
.export-globe-motion-toggle:focus-visible,
.sample-fish-motion-toggle:focus-visible { background: #214f61; }
.featured-work .featured-copy { justify-content: center; }
.featured-work .featured-copy h3 { margin-bottom: 22px; }
.featured-work .featured-copy > p:not(.section-label) { max-width: 31em; }
.featured-work .copy-line { display: block; }
.sample-gallery-copy .nowrap { white-space: nowrap; }

/* Varied window sizes make the breadth of the sample collection legible. */
.portfolio-work .industry-samples-link {
  display: block;
  padding: clamp(24px, 4vw, 54px);
}
.portfolio-work .sample-gallery-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 28px;
  align-items: end;
  max-width: none;
  margin-bottom: 32px;
}
.portfolio-work .sample-gallery-copy .section-label,
.portfolio-work .sample-gallery-copy h3,
.portfolio-work .sample-gallery-copy > p { grid-column: 1; }
.portfolio-work .sample-gallery-copy h3 { margin: 9px 0 12px; }
.portfolio-work .sample-gallery-copy > p:not(.section-label) { max-width: 47em; margin: 0; }
.portfolio-work .sample-gallery-copy .button { grid-column: 2; grid-row: 2 / span 2; margin: 0 0 2px; }
.portfolio-work .sample-gallery-copy .sample-gallery-note { margin-top: 10px!important; }
.sample-montage {
  display: grid;
  max-width: none;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(6, 78px);
  gap: 12px;
}
.sample-montage .sample-peek { position: relative; height: 100%; transform: none; overflow: hidden; }
.sample-montage .sample-peek:hover,
.sample-montage .sample-peek:focus-visible { transform: translateY(-3px); }
.sample-montage .sample-peek-window { height: calc(100% - 38px); }
.sample-montage .sample-peek-label { height: 38px; align-items: center; }
.sample-montage .sample-peek:nth-child(2) { grid-area: 1 / 8 / 3 / 13; }
.sample-montage .sample-peek:nth-child(3) { grid-area: 3 / 8 / 5 / 13; }
.sample-montage .sample-peek:nth-child(4) { grid-area: 5 / 1 / 7 / 4; }
.sample-montage .sample-peek:nth-child(5) { grid-area: 5 / 4 / 7 / 8; }
.sample-montage .sample-peek:nth-child(6) { grid-area: 5 / 8 / 7 / 13; }
.sample-static-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.sample-piano-feature .sample-peek-window { position: relative; background: #dbece8; }
.sample-piano-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 54% 52%; }
.sample-piano-feature .sample-peek-window::after { content: ''; position: absolute; inset: 38% 0 0; background: linear-gradient(transparent, rgba(22, 21, 40, .84)); pointer-events: none; }
.sample-piano-title { position: absolute; z-index: 1; left: 18px; bottom: 14px; display: grid; gap: 4px; color: #fff; text-shadow: 0 2px 8px #202030; }
.sample-piano-title small { font: 10px/1.4 var(--sans); letter-spacing: .13em; }
.sample-piano-title strong { font: 600 clamp(23px, 2.6vw, 36px)/1.2 var(--serif); white-space: nowrap; }
.sample-aquarium { grid-area: 1 / 1 / 5 / 8; position: relative; min-width: 0; overflow: hidden; background: #0b3d43; box-shadow: 0 12px 28px rgba(0,0,0,.22); }
.sample-aquarium-link { position: absolute; inset: 0; z-index: 1; display: block; color: #fff; text-decoration: none; }
.sample-aquarium-link:focus-visible { outline: 3px solid #f6dc8f; outline-offset: -5px; }
.sample-aquarium-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.sample-aquarium::after { content: ''; position: absolute; inset: 44% 0 0; pointer-events: none; background: linear-gradient(transparent, rgba(0,22,28,.75)); }
.sample-aquarium-title { position: absolute; z-index: 1; left: clamp(18px, 3vw, 38px); bottom: 21px; display: grid; gap: 4px; text-shadow: 0 2px 12px #001d24; }
.sample-aquarium-title small { font: 11px/1.4 var(--sans); letter-spacing: .14em; }
.sample-aquarium-title strong { font: 600 clamp(26px, 3.1vw, 47px)/1.16 var(--serif); letter-spacing: .08em; }
.sample-aquarium-title em { font: normal 12px/1.5 var(--sans); }
.sample-aquarium .sample-fish { position: absolute; z-index: 1; width: clamp(72px, 8vw, 126px); height: auto; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0,20,29,.3)); animation: fish-drift 11s linear infinite alternate; }
.sample-aquarium .fish-one { left: 16%; top: 26%; animation-duration: 12s; }
.sample-aquarium .fish-two { left: 56%; top: 44%; width: clamp(58px, 6vw, 98px); animation-duration: 14s; animation-delay: -6s; animation-direction: alternate-reverse; }
.sample-aquarium .fish-three { left: 68%; top: 19%; width: clamp(50px, 5vw, 82px); animation-duration: 17s; animation-delay: -8s; }
.sample-fish-motion-toggle { z-index: 3; bottom: auto; top: 15px; }
.sample-aquarium.motion-paused .sample-fish { animation-play-state: paused; }
@keyframes fish-drift { from { transform: translate3d(-16px, 0, 0) rotate(-2deg); } to { transform: translate3d(26px, -12px, 0) rotate(3deg); } }

@media (max-width: 1050px) {
  .portfolio-work .sample-gallery-copy { max-width: none; }
  .sample-montage { grid-template-rows: repeat(6, 68px); }
}
@media (max-width: 720px) {
  .portfolio-work .sample-gallery-copy { display: block; margin-bottom: 24px; }
  .portfolio-work .sample-gallery-copy .button { margin-top: 20px; }
  .sample-montage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 155px; gap: 9px; }
  .sample-piano-feature .sample-peek-window { position: relative; background: #dbece8; }
.sample-piano-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 54% 52%; }
.sample-piano-feature .sample-peek-window::after { content: ''; position: absolute; inset: 38% 0 0; background: linear-gradient(transparent, rgba(22, 21, 40, .84)); pointer-events: none; }
.sample-piano-title { position: absolute; z-index: 1; left: 18px; bottom: 14px; display: grid; gap: 4px; color: #fff; text-shadow: 0 2px 8px #202030; }
.sample-piano-title small { font: 10px/1.4 var(--sans); letter-spacing: .13em; }
.sample-piano-title strong { font: 600 clamp(23px, 2.6vw, 36px)/1.2 var(--serif); white-space: nowrap; }
.sample-aquarium { grid-area: auto; grid-column: 1 / -1; grid-row: span 2; }
  .sample-montage .sample-peek:nth-child(n) { grid-area: auto; }
  .sample-montage .sample-peek:nth-child(2),
  .sample-montage .sample-peek:nth-child(3),
  .sample-montage .sample-peek:nth-child(6) { grid-column: 1 / -1; }
  .sample-montage .sample-peek-label { display: flex; }
  .sample-aquarium .sample-fish { width: 95px; }
  .export-globe-home-stage { min-height: 300px; aspect-ratio: 4 / 3; }
  .globe-country-focus { max-width: min(145px, 47%); }
}
@media (max-width: 420px) {
  .sample-montage { grid-auto-rows: 138px; }
  .sample-aquarium-title strong { font-size: 30px; }
  .sample-montage .sample-peek-label { padding: 6px 8px; }
  .sample-montage .sample-peek-label strong { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .sample-aquarium:not(.motion-resumed) .sample-fish { animation-play-state: paused; }
  .sample-montage .sample-peek { transition: none; }
}

/* The final contact area is a short invitation; topic choices live in the dialog. */
.contact {
  padding: 48px 6.5%;
  text-align: left;
}
.contact-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  max-width: 1320px;
  margin: auto;
}
.contact-heading .section-label { margin: 0 0 9px; }
.contact-heading h2 { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.25; }
.contact-actions { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); }
.contact-actions .button { white-space: nowrap; }
.contact .contact-actions .contact-email { margin: 0!important; font-size: 17px!important; line-height: 1.4; }
@media (max-width: 720px) {
  .contact { padding: 42px 6%; }
  .contact-compact { align-items: flex-start; flex-direction: column; gap: 22px; }
  .contact-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; }
  .contact-actions .button { min-height: 48px; padding: 13px 20px; font-size: 13px; }
  .contact .contact-actions .contact-email { font-size: 14px!important; }
}