/* Revisions for the studio’s second review. */
#mga-orientamento-quiz .mga-hero-content .mga-hero-text {
  color: #c7d9cf;
}
#mga-orientamento-quiz .mga-hero .mga-hero-visual > img {
  object-position: center 24%;
}
.floating-contact {
  gap: 8px;
  padding: 12px 17px;
  border-radius: 999px;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(15px, env(safe-area-inset-bottom));
}
.floating-contact > span {
  display: inline;
  font-size: 15px;
  font-weight: 700;
}
.floating-contact:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.photo-illustration-compare .compare-before img,
.photo-illustration-compare .compare-after img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.alternating-treatments .treatment-row[hidden] {
  display: none;
}

/* Secondary copy and comparison controls must remain legible on small screens. */
.home-treatments .treatment-copy > p,
.detailed-treatments .treatment-copy > p,
.page-intro > p:last-child,
.treatments-heading > p:last-child,
.footer-grid p,
.footer-grid > div > a:not(.identity) {
  font-size: 17px;
}
.home-treatments .treatment-copy > .eyebrow,
.detailed-treatments .treatment-copy > .eyebrow,
.detailed-treatments .treatment-copy .treatment-note,
.photo-attribution,
.compare-toolbar,
.editorial-link {
  font-size: 15px;
}
.art-controls,
.art-controls button,
.comparison-modes button,
.original-open,
.final-filters button {
  font-size: 15px;
}
.compare-tag {
  font-size: 14px;
}
.treatment-visual .compare-playback {
  display: block;
  margin: 8px auto 0;
  padding: 8px 14px;
  min-height: 44px;
  font: inherit;
  font-size: 15px;
  color: #c9e2d3;
  background: #17261e;
  border: 1px solid #456351;
  border-radius: 999px;
}
.treatment-visual[data-display="pair"] .compare-playback {
  display: none;
}
.compare-playback:focus-visible {
  outline: 2px solid #c9e2d3;
  outline-offset: 3px;
}
.treatment-visual.areola-info {
  padding: clamp(20px, 4vw, 38px);
  background: #141f19;
  border: 1px solid #35483c;
  border-radius: 8px;
  color: #c5d7cb;
}
.areola-info .areola-info-title {
  color: #f0f6f1;
  font-size: clamp(19px, 2.5vw, 27px);
  font-weight: 600;
  margin: 10px 0;
}
.areola-info p:last-child {
  margin-bottom: 0;
  font-size: 17px;
  line-height: 1.6;
}

/* Readable controls and uncropped frames on phones. */
.eyebrow,
.treatment-copy > .eyebrow,
.home-treatments .treatment-copy .eyebrow,
.detailed-treatments .treatment-copy .eyebrow,
.footer-grid .eyebrow,
.case-caption .eyebrow {
  font-size: 14px !important;
  letter-spacing: .12em;
}
body nav,
.identity-name,
.hero-specialties,
.footer-bottom {
  font-size: 15px;
}
.identity-name > span {
  font-size: 18px;
  line-height: 1.3;
}
.person-image > span {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.35;
}
body .person-grid > div > p:not(.eyebrow):not(.person-subtitle),
#mga-orientamento-quiz .mga-hero-content .mga-hero-text,
#mga-orientamento-quiz .mga-question-help,
#mga-orientamento-quiz .mga-disclaimer,
#mga-orientamento-quiz .mga-privacy-note {
  font-size: 17px;
  line-height: 1.55;
}
#mga-orientamento-quiz .mga-question-count,
#mga-orientamento-quiz .mga-progress-percent,
#mga-orientamento-quiz .mga-eyebrow {
  font-size: 15px;
}
.art-controls button,
.comparison-modes button {
  min-height: 44px;
}
.hero-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 22px;
}
a.quick-link,
.footer-grid > div > a.quick-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 13px;
  border: 1px solid #82cdb2;
  border-radius: 7px;
  background: #1b352d;
  color: #effaf5;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.25;
  text-decoration: none;
  letter-spacing: normal;
}
a.quick-link::after {
  content: '→';
}
a.quick-link-map::after {
  content: '↗';
}
a.quick-link:hover,
a.quick-link:focus-visible {
  background: #2a4d3f;
  color: #fff;
}
a.quick-link:focus-visible {
  outline: 2px solid #b9edd8;
  outline-offset: 3px;
}
.hero-quick-links .quick-link,
.contact-grid .quick-link-map {
  animation: quick-link-glow 2s ease-in-out 3;
}
.hero-quick-links .quick-link-map { animation-delay: .35s; }
@keyframes quick-link-glow {
  50% { box-shadow: 0 0 0 4px #82cdb24d; }
}
@media (max-width: 700px) {
  .home-treatments .treatment-row,
  .detailed-treatments .treatment-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .home-treatments .treatment-visual,
  .detailed-treatments .treatment-visual {
    width: 100%;
    max-width: none;
  }
  .illustrated .art-compare,
  .detailed-treatments .illustrated .art-compare,
  .detailed-treatments .clinical-compare:not(.art-compare) {
    width: min(100%, calc(390px * var(--ratio)));
  }
  .art-controls {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .identity-name { font-size: 12px; }
  .identity-name > span { font-size: 14px; }
  body nav > a { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-quick-links .quick-link,
  .contact-grid .quick-link-map {
    animation: none;
  }
}

/* Keep both portrait comparisons large while preserving their square crop. */
.illustrated .comparison-portrait,
.detailed-treatments .illustrated .comparison-portrait {
  width: min(100%, 360px);
}

.dermo-intro {
  padding: clamp(38px, 6vw, 76px) 0;
  background: #101a16;
  border-block: 1px solid #293a32;
}
.dermo-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 66px);
}
.dermo-intro-copy .eyebrow {
  margin-bottom: 12px;
}
.dermo-intro-copy h2 {
  max-width: 15ch;
  margin: 0 0 15px;
  font-family: Georgia, serif;
  font-size: clamp(31px, 3.7vw, 52px);
  line-height: 1.08;
}
.dermo-intro-copy > p:not(.eyebrow) {
  max-width: 53ch;
  margin-bottom: 16px;
  color: #d4e0d8;
  font-size: 17px;
  line-height: 1.6;
}
.dermo-intro-uses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.dermo-intro-uses a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #4b7060;
  border-radius: 6px;
  color: #e2f3e9;
  font-size: 15px;
  line-height: 1.25;
}
.dermo-intro-uses a:hover,
.dermo-intro-uses a:focus-visible {
  background: #234237;
  color: #fff;
}
.dermo-intro-copy > .dermo-intro-note {
  margin-bottom: 0;
}
.dermo-intro-figure {
  min-width: 0;
  margin: 0;
}
.dermo-intro-photos {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 8px;
}
.dermo-intro-photos img {
  width: 100%;
  height: clamp(170px, 24vw, 340px);
  object-fit: cover;
  border-radius: 6px;
}
.dermo-intro-photos img:first-child {
  object-position: 28% 38%;
}
.dermo-intro-figure figcaption {
  margin-top: 8px;
  color: #b5c8bd;
  font-size: 14px;
  line-height: 1.4;
}
@media (max-width: 760px) {
  .dermo-intro-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .dermo-intro-photos img {
    height: clamp(150px, 47vw, 270px);
  }
}

.logo-window.studio-mga-logo {
  flex: none;
  width: 132px;
  height: 76px;
  border-radius: 5px;
  background: #081627;
}
.logo-window.studio-mga-logo img {
  top: 50%;
  left: 50%;
  width: 168%;
  height: auto;
  transform: translate(-50%, -50%);
  filter: none;
  mix-blend-mode: normal;
}
@media (max-width: 700px) {
  .logo-window.studio-mga-logo {
    width: 104px !important;
    height: 62px;
  }
}