/* Preserve the portrait hero framing selected in the previous review. */
.hero { background: var(--ink); min-height: 660px; height: min(760px, calc(100svh - 96px)); }
.hero-photo { left: auto; right: 0; width: 62%; object-position: center top; }
.hero-shade { background: linear-gradient(90deg, #163840 0%, #163840 35%, #163840eb 41%, #16384000 61%); }
.hero-copy { width: 49%; max-width: 720px; padding-right: 24px; }
.hero h1 { font-size: clamp(68px, 7vw, 100px); }
.hero-copy > p { max-width: 390px; font-size: 20px; }
.hero-bottom { bottom: 24px; }
.hero-scroll { display: none; }

/* Whole-image cards: one cohesive studio, with live text over the artwork. */
.feature-tile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; }
.feature-tile {
  display: block; position: relative; min-width: 0; aspect-ratio: .72;
  border-radius: 22px; overflow: hidden; background: #0c5369; color: #fff;
  text-decoration: none; isolation: isolate;
  transition: transform .55s var(--ease);
  animation: none;
}
.feature-tile.in-view { animation: feature-enter .8s calc(var(--tile-order, 0) * 70ms) var(--ease) backwards; }
.feature-card-image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center; transition: transform .8s var(--ease);
}
.feature-tile::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 47%, #071b240a 58%, #071b2470 75%, #071b24eb 100%);
}
.tile-open {
  position: absolute; top: 16px; right: 16px; z-index: 3; display: grid;
  place-items: center; width: 35px; height: 35px; border: 1px solid #ffffffd9;
  border-radius: 50%; background: #0b374b40; color: #fff; transition: background .25s;
}
.tile-open > svg { width: 23px; height: 23px; transition: transform .4s var(--ease); }
.tile-copy { position: absolute; inset: auto 0 0; z-index: 2; padding: 35px 19px 26px; text-align: center; }
.tile-copy h3 { font-size: 24px; line-height: 1.15; font-weight: 500; letter-spacing: -.03em; }
.tile-copy p { margin: 10px auto 0; max-width: 28ch; font-size: 14px; line-height: 1.5; color: #fff; text-wrap: balance; }
.feature-tile:hover, .feature-tile:focus-visible { transform: translateY(-6px); }
.feature-tile:hover .feature-card-image, .feature-tile:focus-visible .feature-card-image { transform: scale(1.045); }
.feature-tile:hover .tile-open { background: #ffffff26; }
.feature-tile:hover .tile-open > svg { transform: rotate(-35deg); }
.feature-tile:active { transform: translateY(-2px); }
.feature-directory-link { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 26px; }
.feature-directory-link > p { max-width: 550px; color: var(--soft); font-size: 12px; line-height: 1.5; }
.feature-directory-link > a { flex-shrink: 0; font-size: 14px; }
@keyframes feature-enter { from { opacity: .5; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1100px) {
  .hero-copy { width: 52%; padding-left: 36px; }
  .hero h1 { font-size: 76px; }
  .hero-copy > p { max-width: 340px; font-size: 18px; }
  .hero .actions { gap: 17px; }
  .hero .button { font-size: 13px; padding-inline: 20px; }
  .hero-link { font-size: 12px; }
  .feature-tile-grid { gap: 26px 18px; }
  .feature-tile { border-radius: 18px; }
  .tile-copy { padding: 28px 14px 21px; }
  .tile-copy h3 { font-size: 21px; }
  .tile-copy p { font-size: 12px; }
}
@media (max-width: 900px) {
  .feature-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .tile-copy { padding: 34px 22px 28px; }
  .tile-copy h3 { font-size: 26px; }
  .tile-copy p { font-size: 15px; }
}
@media (min-width: 601px) and (max-width: 800px) {
  .hero-copy { width: 53%; padding-left: 28px; }
  .hero h1 { font-size: 65px; }
  .hero-copy > p { font-size: 17px; max-width: 310px; }
  .hero .actions { flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (max-width: 600px) {
  .hero { height: auto; min-height: 0; max-height: none; padding-bottom: 425px; align-items: flex-start; }
  .hero-copy { width: 100%; max-width: none; padding: 32px 22px 36px; }
  .hero h1 { font-size: clamp(64px, 17.5vw, 84px); }
  .hero-copy > p { font-size: 17px; max-width: 315px; }
  .hero-photo { inset: auto 0 0; width: 100%; height: 425px; object-position: center 10%; }
  .hero-shade { inset: auto 0 0; height: 425px; background: linear-gradient(180deg, #163840 0%, #16384000 15%, #102c3600 80%, #102c36a6 100%); }
  .hero-bottom { font-size: 9px; left: 22px; bottom: 19px; }
  .feature-tile-grid { gap: 18px 12px; }
  .feature-tile { aspect-ratio: .67; border-radius: 16px; }
  .tile-open { top: 11px; right: 11px; width: 27px; height: 27px; }
  .tile-open > svg { width: 18px; height: 18px; }
  .tile-copy { padding: 27px 11px 18px; }
  .tile-copy h3 { font-size: 18px; line-height: 1.16; }
  .tile-copy p { font-size: 11px; line-height: 1.4; margin-top: 8px; }
  .feature-directory-link { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 22px; }
  .feature-directory-link > p { font-size: 11px; }
  .feature-directory-link > a { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-tile, .feature-tile.in-view { animation: none; }
  .feature-tile, .feature-card-image, .tile-open, .tile-open > svg { transition: none; }
  .feature-tile:hover, .feature-tile:focus-visible { transform: none; }
  .feature-tile:hover .feature-card-image, .feature-tile:focus-visible .feature-card-image { transform: none; }
}