/* Keep the homepage portrait compact; the reel belongs beside Extra Services. */
.hero .hero-art {
  width: min(100%, 410px);
  max-width: 410px;
  height: 430px;
  min-height: 0;
  margin-top: 48px;
  display: block;
  overflow: hidden;
  border-radius: 26px;
  background: #effbfe;
  box-shadow: 0 14px 38px rgba(9, 27, 43, .11);
}
.hero .hero-art img.portrait-photo {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  object-fit: cover;
  object-position: center 23%;
  filter: none;
}
.extra-services .extra-services-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 270px);
  grid-template-areas: "intro video" "carousel video";
  column-gap: clamp(24px, 3vw, 42px);
  align-items: start;
}
.extra-services .extra-services-intro { grid-area: intro; min-width: 0; }
.extra-services .extra-services-heading { display: block; }
.extra-services .extra-services-heading > div { min-width: 0; }
.extra-services .extra-services-heading h2 { font-size: clamp(32px, 3.8vw, 50px); }
.extra-services .extra-services-description { max-width: 640px; }
.extra-services .extra-services-action { margin-top: 22px; }
.extra-services .extra-services-carousel { grid-area: carousel; min-width: 0; margin-top: 30px; }
.extra-services .home-reel-section {
  grid-area: video;
  width: 100%;
  max-width: 270px;
  align-self: center;
  justify-self: end;
  transform: translateY(16px);
  scroll-margin-top: calc(var(--site-header-height) + 20px);
}
.extra-services .home-reel-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--showcase-edge, rgba(31, 54, 66, .07));
  border-radius: 28px;
  background: #0b1119;
  box-shadow: var(--showcase-shadow, 0 14px 38px rgba(24, 47, 58, .075));
}
.extra-services .home-reel-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.extra-services .home-reel-toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}
.extra-services .home-reel-toggle:focus-visible { outline: 3px solid #00caff; outline-offset: 3px; }
@media (max-width: 900px) {
  .extra-services .extra-services-layout {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
    column-gap: 20px;
  }
  .extra-services .extra-services-heading h2 { font-size: clamp(30px, 4vw, 40px); }
}
@media (max-width: 700px) {
  .extra-services .extra-services-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "video" "carousel";
  }
  .extra-services .home-reel-section { width: min(100%, 240px); margin: 26px auto 0; justify-self: center; transform: none; }
  .extra-services .extra-services-carousel { margin-top: 28px; }
  .hero .hero-art { width: min(100%, 360px); height: 380px; margin-top: 38px; }
}
@media (max-width: 440px) {
  .hero .hero-art { width: min(100%, 320px); height: 340px; }
  .extra-services .home-reel-section { width: min(100%, 210px); }
  .extra-services .home-reel-frame { border-radius: 20px; }
}

/* Exactly two complete service cards fit beside the reel. */
.extra-services .extra-service-card {
  box-sizing: border-box;
  flex: 0 0 calc((100% - 20px) / 2);
}
@media (max-width: 700px) {
  .extra-services .extra-service-card { flex-basis: min(82%, 320px); }
}

/* Larger service icons and a steady text baseline across the two visible cards. */
.extra-services .extra-service-card {
  min-height: 280px;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.extra-services .extra-service-icon {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  margin: 0 auto 0 0;
  border-radius: 18px;
  background: #e9faff;
  color: #008fb5;
}
.extra-services .extra-service-icon svg { width: 30px; height: 30px; }
.extra-services .extra-service-card h3 {
  display: flex;
  align-items: flex-end;
  min-height: 54px;
  margin: auto 0 8px;
  font-size: 22px;
  line-height: 1.2;
}
.extra-services .extra-service-card p {
  min-height: 48px;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}
@media (max-width: 700px) {
  .extra-services .extra-service-card { min-height: 250px; padding: 24px; }
  .extra-services .extra-service-icon { flex-basis: 52px; width: 52px; height: 52px; border-radius: 16px; }
  .extra-services .extra-service-icon svg { width: 27px; height: 27px; }
  .extra-services .extra-service-card h3 { font-size: 20px; }
  .extra-services .extra-service-card p { font-size: 15px; }
}