/* FIRST NAILS: light porcelain, warm wood and restrained rose. */
:root {
  --firstnails-paper: #fffbf8;
  --firstnails-blush: #f8ecef;
  --firstnails-rose: #9b4563;
  --firstnails-rose-hover: #7d344f;
  --firstnails-ink: #382923;
  --firstnails-body: #302b29;
  --firstnails-border: #e8d8d7;
  --paper: var(--firstnails-paper);
  --cream: #fffdfb;
  --blush: var(--firstnails-blush);
  --blush-soft: #fcf5f5;
  --rose: var(--firstnails-rose);
  --rose-hot: var(--firstnails-rose);
  --rose-deep: var(--firstnails-rose-hover);
  --pink: var(--firstnails-blush);
  --gold: var(--firstnails-rose);
  --gold-deep: var(--firstnails-rose-hover);
  --ink: var(--firstnails-ink);
  --ink-soft: var(--firstnails-body);
  --muted: #665b57;
  --hair: var(--firstnails-border);
  --display: "Cormorant Garamond", Georgia, serif;
  --sans: "Be Vietnam Pro", Arial, sans-serif;
  --script: "Parisienne", cursive;
}

html { background: var(--firstnails-paper); }
body, .legal-page, .legal-main {
  background: var(--firstnails-paper) !important;
  color: var(--firstnails-body) !important;
  font-family: var(--sans) !important;
  font-size: 16px;
}
button, input, textarea, select { font-family: var(--sans) !important; }
h1, h2, h3, h4 { color: var(--firstnails-ink); font-family: var(--display); }
p, li, small, figcaption { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--firstnails-rose) !important;
  outline-offset: 3px;
}

/* Navigation and calls to action */
.site-header, .site-header.scrolled, .legal-header {
  background: rgba(255, 251, 248, .97) !important;
  border-color: var(--firstnails-border) !important;
  border-top: 1px solid var(--firstnails-border) !important;
  box-shadow: 0 6px 24px rgba(56, 41, 35, .05) !important;
}
.site-header .desktop-nav a, .site-header .header-map,
.mobile-nav .mobile-menu-links a, .mobile-menu-intro p {
  color: var(--firstnails-ink) !important;
}
.site-header .desktop-nav a:hover, .site-header .desktop-nav a.is-active,
.site-header .header-map:hover, .site-footer .footer-column-links a:hover,
.mobile-menu-links a:hover, .mobile-menu-links a:focus-visible {
  color: var(--firstnails-rose) !important;
}
.site-header .desktop-nav a:after, .site-header .menu-toggle span {
  background: var(--firstnails-rose) !important;
}
.site-header .header-map, .site-header .menu-toggle { border-color: var(--firstnails-border) !important; }
.site-header .menu-toggle { background: var(--firstnails-blush) !important; }
.mobile-nav { background: var(--firstnails-paper) !important; }
.mobile-menu-intro span { color: var(--firstnails-rose) !important; }
.button, .action-book, .mobile-actions .floating-primary .action-book,
.happy-visit-actions .booking-link, .hero-editorial .hero-actions .button,
.promo-ribbon .button {
  background: var(--firstnails-rose) !important;
  border-color: var(--firstnails-rose) !important;
  color: #fff !important;
  box-shadow: 0 5px 15px rgba(89, 45, 60, .12) !important;
}
.button:hover, .action-book:hover, .mobile-actions .floating-primary .action-book:hover,
.happy-visit-actions .booking-link:hover, .hero-editorial .hero-actions .button:hover,
.promo-ribbon .button:hover {
  background: var(--firstnails-rose-hover) !important;
  border-color: var(--firstnails-rose-hover) !important;
  color: #fff !important;
  box-shadow: 0 7px 19px rgba(89, 45, 60, .15) !important;
}
.hero-editorial .hero-actions .button span {
  background: rgba(255,255,255,.17) !important;
  color: #fff !important;
}
.gallery-less-button { background: transparent !important; color: var(--firstnails-rose) !important; }
.gallery-less-button:hover { color: #fff !important; }

/* Type: serif structure, a single quiet script accent. */
.section-label, .eyebrow, .about-kicker, .letter-heading,
.about-story .about-kicker, .make-time-heading .section-label,
.appointment-content .section-label, .why-overline,
.happy-clients-heading .section-label, .contact-details small {
  color: var(--firstnails-rose) !important;
}
.about-heading h2, .make-time-heading h2, .services-heading h2,
.why-intro h2, .staff-heading h2, .gallery-heading h2,
.happy-clients-heading h2, .appointment-content h2, .contact h2 {
  color: var(--firstnails-ink) !important;
  font-family: var(--display) !important;
  font-weight: 500 !important;
}
h1 em, h2 em { color: var(--firstnails-rose) !important; }
.hero-editorial .hero-content h1 {
  color: var(--firstnails-ink) !important;
  font-family: var(--display) !important;
  font-weight: 500 !important;
  line-height: .94 !important;
  letter-spacing: -.045em !important;
  overflow: visible !important;
  padding-bottom: .19em !important;
}
.hero-editorial .hero-title-main { line-height: 1 !important; }
.hero-editorial .hero-title-script,
.about-heading h2 em, .make-time-heading h2 em, .gallery-heading h2 em {
  color: var(--firstnails-rose) !important;
  font-family: var(--script) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.hero-editorial .hero-title-script {
  display: block;
  font-size: .81em !important;
  line-height: 1.24 !important;
  margin-top: -.07em !important;
  padding: .05em 0 .18em !important;
}
.about-heading h2 em, .make-time-heading h2 em, .gallery-heading h2 em {
  font-size: .84em !important;
  line-height: 1.25 !important;
  padding-bottom: .09em;
}
.appointment-content h2 em {
  color: var(--firstnails-rose) !important;
  font-family: var(--display) !important;
  font-size: 1em !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: -.03em !important;
}

/* Photographic hero: keep its original split and frame. */
.hero-editorial {
  background: var(--firstnails-paper) !important;
  border-color: var(--firstnails-border) !important;
  box-shadow: 0 14px 36px rgba(56, 41, 35, .08) !important;
}
.hero-editorial .hero-content { background: var(--firstnails-paper) !important; color: var(--firstnails-body) !important; }
.hero-editorial:after, .hero-editorial .hero-content .eyebrow:before {
  background: var(--firstnails-rose) !important;
}
.hero-editorial .hero-content .eyebrow { color: var(--firstnails-rose) !important; }
.hero-editorial .hero-copy { color: var(--firstnails-body) !important; }
.hero-editorial .hero-actions .text-link {
  color: var(--firstnails-rose-hover) !important;
  border-bottom-color: var(--firstnails-rose) !important;
}
.hero-photo-note {
  background: rgba(255,251,248,.95) !important;
  color: var(--firstnails-ink) !important;
  border-top-color: var(--firstnails-rose) !important;
  box-shadow: 0 4px 15px rgba(56,41,35,.09) !important;
}
.hero-editorial .hero-slide { filter: none !important; background-position: 50% 50% !important; }
.hero-editorial .hero-slide:first-of-type { background-position: 47% 50% !important; }
.hero-editorial .hero-slide:nth-of-type(2),
.hero-editorial .hero-slide:nth-of-type(3) { background-position: 52% 50% !important; }

/* Three five-second photographic scenes. Cross dissolves and gentle camera
   travel give the stills a short-film rhythm without video downloads. */
.hero-editorial .hero-slide {
  backface-visibility: hidden;
  transform-origin: center center;
  animation-duration: 15s !important;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1) !important;
  animation-iteration-count: infinite !important;
  will-change: opacity, transform;
}
.hero-editorial .hero-slide:nth-of-type(1) { animation-name: firstNailsFilmOne !important; animation-duration: 15s !important; }
.hero-editorial .hero-slide:nth-of-type(2) { animation-name: firstNailsFilmTwo !important; animation-duration: 15s !important; }
.hero-editorial .hero-slide:nth-of-type(3) { animation-name: firstNailsFilmThree !important; animation-duration: 15s !important; }
@keyframes firstNailsFilmOne {
  0% { opacity: 1; transform: scale(1.035) translate3d(-.8%, .3%, 0); }
  27% { opacity: 1; transform: scale(1.09) translate3d(.6%, -.8%, 0); }
  34%, 94% { opacity: 0; transform: scale(1.11) translate3d(1%, -1%, 0); }
  100% { opacity: 1; transform: scale(1.035) translate3d(-.8%, .3%, 0); }
}
@keyframes firstNailsFilmTwo {
  0%, 27% { opacity: 0; transform: scale(1.075) translate3d(1%, .8%, 0); }
  34% { opacity: 1; transform: scale(1.06) translate3d(.6%, .4%, 0); }
  60% { opacity: 1; transform: scale(1.115) translate3d(-.8%, -.6%, 0); }
  67%, 100% { opacity: 0; transform: scale(1.13) translate3d(-1%, -.8%, 0); }
}
@keyframes firstNailsFilmThree {
  0%, 60% { opacity: 0; transform: scale(1.07) translate3d(-.8%, .6%, 0); }
  67% { opacity: 1; transform: scale(1.06) translate3d(-.5%, .3%, 0); }
  93% { opacity: 1; transform: scale(1.11) translate3d(.7%, -.7%, 0); }
  100% { opacity: 0; transform: scale(1.12) translate3d(.8%, -.8%, 0); }
}
.hero-editorial .hero-slide::after {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg, transparent 25%, rgba(255, 246, 237, .12) 50%, transparent 75%);
  pointer-events: none;
  transform: translate3d(-110%, 0, 0);
  animation: firstNailsLightPass 5s ease-in-out infinite;
}
@keyframes firstNailsLightPass {
  0%, 28% { transform: translate3d(-110%, 0, 0); opacity: 0; }
  44% { opacity: 1; }
  72%, 100% { transform: translate3d(110%, 0, 0); opacity: 0; }
}
.hero-editorial.is-paused .hero-slide,
.hero-editorial.is-paused .hero-slide::after { animation-play-state: paused !important; }

/* Section surfaces and subtle details. */
.about-story, .services, .why-choose, .gallery, .staff-section, .contact {
  background: var(--firstnails-paper) !important;
  color: var(--firstnails-body) !important;
}
.make-time, .appointment-invite, .happy-clients {
  background: var(--firstnails-blush) !important;
  color: var(--firstnails-body) !important;
}
.promo-ribbon { background: var(--firstnails-paper) !important; color: var(--firstnails-body) !important; }
.promo-intro h2, .services-heading h2, .services-heading p,
.services > .section-label { color: var(--firstnails-ink) !important; }
.promo-intro h2 em, .services-heading h2 em { color: var(--firstnails-rose) !important; }
.promo-intro-description, .promo-card-content > p,
.about-intro p, .about-note > p, .make-time-heading > p:last-child,
.appointment-lead, .why-intro > p:last-child, .staff-heading p, .make-time-card p {
  color: var(--firstnails-body) !important;
}
.about-story .about-directions, .make-time-link, .appointment-explore,
.make-time-footer a, .promo-card-link, .happy-review-link, .happy-review-all,
.legal-page a {
  color: var(--firstnails-rose) !important;
  border-color: var(--firstnails-rose) !important;
}
.about-photo-frame { box-shadow: 12px 12px 0 var(--firstnails-blush) !important; }
.about-photo-frame, .about-details img, .why-image, .why-image-inset,
.gallery-item { background: var(--firstnails-blush) !important; }
.about-note, .about-stats, .why-facts, .why-fact, .make-time-card,
.make-time-status, .staff-card, .happy-review, .services .service-categories,
.services .service-panel-heading, .promo-card {
  border-color: var(--firstnails-border) !important;
}
.make-time-card, .make-time-status, .staff-card, .happy-review,
.services .service-panel, .services .service-browser, .promo-card,
.promo-popup-card {
  background: #fffdfb !important;
  color: var(--firstnails-body) !important;
}
.make-time-feature .make-time-card-copy, .make-time-footer,
.services .service-categories, .services .service-panel-heading,
.make-time-meta span {
  background: #f8f1f1 !important;
}
.make-time-meta span { color: var(--firstnails-body) !important; }
.make-time-card:hover, .happy-review:hover {
  box-shadow: 0 9px 22px rgba(56, 41, 35, .08) !important;
}
.services .service-category-list button.active {
  background: var(--firstnails-rose) !important;
  box-shadow: inset 3px 0 var(--firstnails-rose-hover) !important;
}
.services .service-api-number, .services .service-api-row > b,
.services .service-api-price strong, .services .service-browser-label,
.services .service-panel-heading [data-service-count], .why-fact > span,
.appointment-steps li span, .happy-review-stars {
  color: var(--firstnails-rose) !important;
}
.services a.service-api-row:hover { background: var(--firstnails-blush) !important; }
.services .service-panel { border-top-color: var(--firstnails-border) !important; }
.services .service-panel, .services .service-categories,
.promo-card { box-shadow: 0 8px 24px rgba(56,41,35,.06) !important; }
.promo-card .promo-value, .promo-popup-card strong,
.promo-description-highlight, .promo-popup-topbar p {
  color: var(--firstnails-rose) !important;
}
.promo-popup { border-color: var(--firstnails-border) !important; background: var(--firstnails-paper) !important; }
.promo-popup::backdrop { background: rgba(56,41,35,.55) !important; }
.happy-review { border-top-color: var(--firstnails-rose) !important; }
.happy-review > p, .happy-review-author { color: var(--firstnails-body) !important; }
.gallery-item { border-color: var(--firstnails-paper) !important; box-shadow: 0 5px 14px rgba(56,41,35,.07) !important; }
.gallery-item::after { content: none !important; }
.gallery-item img, .about-details img { filter: none !important; }

/* Gallery credit sits below each photograph without changing the tile grid. */
#gallery .gallery-grid .gallery-item {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  background: var(--firstnails-paper) !important;
}
#gallery .gallery-open {
  position: relative;
  inset: auto;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
#gallery .gallery-open img { display: block; width: 100%; height: 100%; object-fit: cover; }
#gallery .gallery-caption {
  flex: none;
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 5px 10px;
  color: var(--firstnails-ink);
  background: var(--firstnails-paper);
  font: 600 clamp(.58rem,.8vw,.7rem)/1.3 "Be Vietnam Pro",Arial,sans-serif;
  letter-spacing: .06em;
  white-space: nowrap;
}
@media(max-width:680px){#gallery .gallery-caption{min-height:35px;padding-inline:7px;font-size:.57rem;letter-spacing:.025em}}

/* One strong, readable wordmark across the site. */
.site-header .brand-lockup img,.site-header.scrolled .brand-lockup img,
.legal-header .brand-lockup img { width: 300px !important; max-width: 100% !important; height: 56px !important; max-height: 56px !important; }
.site-footer .footer-brand img { width: 300px !important; max-width: 100% !important; height: auto !important; }
@media(max-width:900px){
  .site-header .brand-lockup img,.site-header.scrolled .brand-lockup img { width: clamp(210px,65vw,260px) !important; height: 48px !important; max-height: 48px !important; }
}
@media(max-width:400px){
  .site-header .brand-lockup img,.site-header.scrolled .brand-lockup img { width: min(65vw,225px) !important; }
}

/* Image-specific crops within the existing frames. */
.about-story .about-photo img { object-fit: cover !important; object-position: 54% 46% !important; filter: none !important; }
.about-details figure:nth-child(4) img { object-fit: cover !important; object-position: 50% 32% !important; }
.why-image-tall img { object-fit: cover !important; object-position: 48% 50% !important; filter: none !important; }
.happy-visit-image img { object-fit: cover !important; object-position: 50% 48% !important; filter: none !important; }

/* The existing image-backed visit invitation and footer. */
.happy-visit { background: var(--firstnails-ink) !important; }
.happy-visit::after {
  background: linear-gradient(90deg, rgba(56,41,35,.91), rgba(56,41,35,.75) 48%, rgba(56,41,35,.28)) !important;
}
.happy-visit .section-label, .happy-visit h2 em { color: #f4cbd7 !important; }
.happy-visit h2, .happy-visit-copy > p:last-child { color: #fffdfb !important; }
.site-footer.site-footer--lovely {
  background: #eddddd !important;
  border-top: 1px solid #dfc9cb !important;
  color: var(--firstnails-ink) !important;
}
.site-footer .footer-about p, .site-footer .footer-contact,
.site-footer .footer-column-links a { color: var(--firstnails-body) !important; }
.site-footer .footer-column h2 { color: var(--firstnails-ink) !important; }
.site-footer .site-footer-bottom p { color: #5d4b4a !important; }
.site-footer .site-footer-bottom a { color: var(--firstnails-rose-hover) !important; }
.site-footer .footer-contact:hover,
.site-footer .footer-column-links a:hover,
.site-footer .site-footer-bottom a:hover { color: var(--firstnails-rose-hover) !important; }
.site-footer .site-footer-bottom { border-top-color: rgba(125,52,79,.2) !important; }
.appointment-photo figcaption { background: var(--firstnails-rose-hover) !important; color: #fff !important; }
.legal-main section { border-color: var(--firstnails-border) !important; }
.legal-main section p, .legal-intro { color: var(--firstnails-body) !important; }

@media (min-width: 601px) {
  .mobile-actions { display: none !important; }
}
@media (max-width: 900px) {
  .hero-editorial .hero-slide:first-of-type { background-position: 50% 44% !important; }
  .hero-editorial .hero-slide:nth-of-type(2),
  .hero-editorial .hero-slide:nth-of-type(3) { background-position: 50% 50% !important; }
}
@media (max-width: 640px) {
  .hero-editorial .hero-slide::after { background: linear-gradient(108deg, transparent 32%, rgba(255,246,237,.075) 50%, transparent 68%); }
  .hero-editorial .hero-content h1 {
    font-size: clamp(3.25rem, 12vw, 4.3rem) !important;
    line-height: .98 !important;
  }
  .hero-editorial .hero-title-script { font-size: .75em !important; line-height: 1.24 !important; }
  .hero-editorial .hero-copy { color: var(--firstnails-body) !important; }
  .hero-editorial .hero-actions .text-link { color: var(--firstnails-rose-hover) !important; }
  .about-story .about-photo img { object-position: 51% 45% !important; }
  .about-details figure:nth-child(4) img { object-position: 50% 28% !important; }
  .why-image-tall img { object-position: 51% 50% !important; }
  .happy-visit-image img { object-position: 56% 50% !important; }
  .happy-visit::after { background: rgba(56,41,35,.77) !important; }
  .about-photo-frame { box-shadow: 7px 7px 0 var(--firstnails-blush) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .make-time-card:hover, .happy-review:hover { transform: none !important; }
  .hero-editorial .hero-slide,
  .hero-editorial .hero-slide::after { animation: none !important; transform: none !important; }
  .hero-editorial .hero-slide { opacity: 0 !important; will-change: auto; }
  .hero-editorial .hero-slide:first-of-type { opacity: 1 !important; }
  .hero-editorial .hero-slide::after { display: none !important; }
}

/* Team directory: give real API staff room to breathe without repeating tall cards. */
.staff-section {
  background: var(--firstnails-blush) !important;
}
.staff-section .section-label { margin-bottom: 1.5rem; }
.staff-heading {
  grid-template-columns: minmax(0, 1fr) minmax(210px, 270px);
  align-items: end;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 1.75rem;
  border-bottom: 1px solid #ddc9cc;
}
.staff-heading h2 {
  max-width: 790px;
  font-size: clamp(3.2rem, 5vw, 5rem) !important;
  line-height: .96 !important;
  letter-spacing: -.035em;
}
.staff-heading h2 em {
  font-family: var(--display) !important;
  font-size: 1em !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: -.035em !important;
}
.staff-heading p {
  max-width: 27ch;
  padding-bottom: .35rem;
  font-size: .94rem;
  line-height: 1.6;
}
.staff-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 5rem);
  row-gap: 0;
}
.staff-card,
.make-time-card.staff-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-content: start;
  align-items: center;
  column-gap: 1.35rem;
  min-width: 0;
  padding: 1.35rem 0 1.5rem;
  border: 0 !important;
  border-bottom: 1px solid #ddc9cc !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left;
}
.staff-avatar {
  grid-column: 1;
  grid-row: 1 / 4;
  width: 74px;
  height: 74px;
  margin: 0;
  border: 1px solid #d9bec5 !important;
  background: #fff8f7 !important;
}
.staff-avatar svg {
  width: 38px;
  height: 38px;
  stroke: var(--firstnails-rose) !important;
  stroke-width: 1.3;
}
.staff-card h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  color: var(--firstnails-ink) !important;
  font-size: clamp(1.8rem, 2.4vw, 2.2rem);
  line-height: 1.05;
}
.staff-card p {
  grid-column: 2;
  grid-row: 2;
  margin: .2rem 0 .4rem;
  color: #665955 !important;
  font-size: .85rem;
  line-height: 1.45;
}
.staff-card .button,
.staff-card .button:hover {
  grid-column: 2;
  grid-row: 3;
  justify-self: start;
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--firstnails-rose-hover) !important;
  font: 600 .75rem/1.4 var(--sans) !important;
  letter-spacing: .06em;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  transform: none !important;
}
.staff-card .button::after { content: "↗"; margin-left: .5rem; font-size: 1rem; }
.staff-card .button:hover { text-decoration: underline; text-underline-offset: .3em; }

@media (max-width: 900px) {
  .staff-heading { grid-template-columns: 1fr; gap: .75rem; }
  .staff-heading p { max-width: none; }
}
@media (max-width: 680px) {
  .staff-section { padding-top: 5rem; padding-bottom: 5rem; }
  .staff-heading h2 { font-size: clamp(2.7rem, 11vw, 3.7rem) !important; }
  .staff-list { grid-template-columns: 1fr; }
  .staff-card { padding: 1.15rem 0 1.25rem; column-gap: 1rem; }
  .staff-avatar { width: 64px; height: 64px; }
  .staff-card h3 { font-size: 1.75rem; }
  .staff-card p { font-size: .83rem; }
  .staff-card .button, .staff-card .button:hover { width: auto; min-height: 44px; padding: 0; font-size: .75rem !important; }
}

/* Wider photographic Hero with one quiet frame above the three moving scenes. */
@media (min-width: 901px) {
  .hero-editorial .hero-slide { width: 60% !important; }
  .hero-editorial .hero-content {
    flex-basis: 40% !important;
    width: 40% !important;
    max-width: 40% !important;
    padding: clamp(28px, 4.1vw, 68px) !important;
  }
  .hero-photo-note { left: calc(40% + 24px); }
}
.hero-editorial::before {
  content: "";
  position: absolute;
  inset: 16px 16px 16px calc(40% + 16px);
  z-index: 2;
  border: 1px solid rgba(255, 251, 248, .82);
  background: none !important;
  box-shadow: inset 0 0 0 1px rgba(56, 41, 35, .12);
  pointer-events: none;
}
.hero-editorial .hero-content h1 {
  max-width: 10ch;
  line-height: .94 !important;
  overflow: visible !important;
  padding: .06em 0 .19em !important;
}
.hero-editorial .hero-title-script {
  font-family: var(--script) !important;
  font-size: .78em !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.28 !important;
  letter-spacing: 0 !important;
  padding: .04em .08em .18em 0 !important;
  white-space: nowrap;
}

/* One serif and script pairing across the prominent section headings. */
.promo-intro h2 em, .about-heading h2 em,
.make-time-heading h2 em, .services-heading h2 em,
.why-intro h2 em, .staff-heading h2 em,
.gallery-heading h2 em, .happy-visit h2 em,
.contact-main h2 em {
  display: inline-block;
  max-width: 100%;
  padding: .04em .08em .18em 0 !important;
  color: var(--firstnails-rose) !important;
  font-family: var(--script) !important;
  font-size: .82em !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  overflow: visible;
}
.happy-visit h2 em { color: #f4cbd7 !important; }
.promo-intro h2, .about-heading h2, .make-time-heading h2,
.services-heading h2, .why-intro h2, .staff-heading h2,
.gallery-heading h2, .happy-visit h2, .contact-main h2 {
  overflow: visible !important;
  padding-bottom: .12em !important;
}

@media (max-width: 900px) {
  .hero-editorial::before { inset: calc(54% + 12px) 12px 12px; }
  .hero-editorial .hero-content { flex-basis: 54% !important; height: 54% !important; }
  .hero-editorial .hero-slide { width: 100% !important; height: 46% !important; }
}
@media (max-width: 600px) {
  .hero-editorial {
    width: calc(100% - 16px) !important;
    height: 700px !important;
    min-height: 700px !important;
    margin: 8px 8px 0 !important;
  }
  .hero-editorial .hero-content {
    flex-basis: 55% !important;
    height: 55% !important;
    padding: 26px 25px 22px !important;
  }
  .hero-editorial .hero-slide { height: 45% !important; }
  .hero-editorial::before { inset: calc(55% + 10px) 10px 10px; }
  .hero-editorial .hero-content h1 {
    font-size: clamp(3.2rem, 12vw, 4.2rem) !important;
    line-height: .98 !important;
  }
  .hero-editorial .hero-title-script {
    font-size: .72em !important;
    line-height: 1.3 !important;
    white-space: nowrap;
  }
  .hero-editorial .hero-copy { margin-top: 7px !important; }
  .promo-intro h2 em, .about-heading h2 em,
  .make-time-heading h2 em, .services-heading h2 em,
  .why-intro h2 em, .staff-heading h2 em,
  .gallery-heading h2 em, .happy-visit h2 em,
  .contact-main h2 em {
    font-size: .72em !important;
    line-height: 1.3 !important;
  }
}

/* Visit section: compact information beside a calm invitation, with the map close below. */
.contact {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  column-gap: clamp(28px, 4.5vw, 84px);
  row-gap: clamp(25px, 3vw, 44px);
  padding-block: clamp(72px, 7vw, 112px) !important;
  align-items: stretch;
}
.contact > .section-label {
  grid-column: 1 / -1;
  justify-self: start;
  align-self: start;
  width: auto;
  margin: 0 !important;
  white-space: normal;
}
.contact-main {
  grid-column: 1;
  min-width: 0;
  padding: clamp(30px, 3.5vw, 62px);
  background: var(--firstnails-blush);
  border: 1px solid var(--firstnails-border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.contact-main .kicker {
  font-family: var(--sans) !important;
  font-size: .68rem !important;
  font-weight: 600;
  line-height: 1.5 !important;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--firstnails-rose) !important;
  margin-bottom: clamp(14px, 2vw, 25px) !important;
}
.contact-main h2 {
  font-size: clamp(3.5rem, 4.9vw, 6.2rem) !important;
  line-height: .95 !important;
  margin: 0 0 clamp(23px, 2.4vw, 38px) !important;
  max-width: 10ch;
}
.contact-main h2 em { white-space: nowrap; }
.contact-actions { gap: 16px 22px; }
.contact-actions .text-link { font-variant-numeric: tabular-nums; }
.contact-details {
  grid-column: 2;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  column-gap: clamp(22px, 2.4vw, 42px);
  align-content: start;
}
.contact-details > div { padding: 0; border: 0; min-width: 0; }
.contact-details > div:first-child {
  grid-column: 1 / -1;
  padding-bottom: 22px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--firstnails-border);
}
.contact-details > div:nth-child(2) { grid-column: 1; }
.contact-details > div:nth-child(3) { grid-column: 2; }
.contact-details small {
  font-size: .66rem;
  letter-spacing: .13em;
  margin-bottom: 12px;
  color: var(--firstnails-rose) !important;
}
.contact-details .address {
  max-width: 36ch;
  font-size: 1.02rem;
  line-height: 1.6;
  font-weight: 500;
}
.contact .hours-list li {
  padding: 7px 0;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}
.contact-details > div:nth-child(3) a {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 34px;
  font-size: .82rem;
}
.map-card {
  grid-column: 1 / -1;
  height: clamp(300px, 27vw, 420px);
  margin: 0;
  padding: 7px;
  border: 1px solid var(--firstnails-border);
  border-radius: 10px;
  background: var(--firstnails-blush) url('../photos/space/storefront.webp') center 53% / cover no-repeat;
}
.map-card iframe { border-radius: 5px; filter: saturate(.82); }
.map-card > .map-clickthrough::after {
  content: 'Open in Google Maps ↗';
  position: absolute;
  right: clamp(14px, 2vw, 28px);
  bottom: clamp(14px, 2vw, 28px);
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 999px;
  background: var(--firstnails-rose);
  color: #fff;
  font: 600 .7rem/1.3 var(--sans);
  letter-spacing: .05em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(56,41,35,.16);
}
.map-card > .map-clickthrough:focus-visible::after { background: var(--firstnails-rose-hover); }
@media (max-width: 1200px) {
  .contact { grid-template-columns: 1fr; }
  .contact-main, .contact-details, .map-card { grid-column: 1; }
  .contact-main { min-height: 0; }
  .contact-main h2 { max-width: none; }
}
@media (max-width: 650px) {
  .contact { display: grid; row-gap: 30px; padding-block: 72px 84px !important; }
  .contact-main { padding: 30px 25px 34px; }
  .contact-main h2 { font-size: clamp(3.35rem, 12vw, 4.5rem) !important; }
  .contact-main h2 em { white-space: normal; }
  .contact-details { display: block; }
  .contact-details > div:first-child { margin-bottom: 20px; padding-bottom: 20px; }
  .contact-details > div:nth-child(2) { padding-bottom: 22px; border-bottom: 1px solid var(--firstnails-border); }
  .contact-details > div:nth-child(3) { padding-top: 22px; }
  .contact-details > div:nth-child(3) a { min-height: 38px; }
  .map-card { height: 300px; }
}
