/** Shopify CDN: Minification failed

Line 8:34 Unexpected "*"

**/
/* The Nail Print — approved mockup direction: ivory/ink/dusty-rose palette,
   Fraunces display serif over Inter body. Component styles below consume the
   cross-cutting --brand-*/--text-* aliases defined in layout/theme.liquid. */

/* Footer section — the gap between the (mostly empty, since logo/social are
   handled by Nail Print: Footer Info above it) top content and the
   copyright bar is a fixed Dawn spacing rule, completely separate from the
   section's own Top padding setting — that's why lowering Top padding
   didn't shrink it. Override it directly instead. */
.footer .footer__content-top {
  padding-bottom: 1rem;
}

/* Services page hero photo — adjustable height on mobile (Mobile: banner
   height setting), cropped from the top down instead of bottom up
   (object-position: bottom keeps the bottom of the photo framed the same
   regardless of the height chosen; only the top gets cut off). */
.tnp-banner__mobile-media {
  display: none;
}

@media screen and (max-width: 749px) {
  .template-page-services .banner--small:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: var(--tnp-banner-mobile-height, 210px);
  }

  .template-page-services .banner__media img {
    object-position: center 90%;
  }

  /* Mobile: image setting — shows its own image/crop instead of the
     desktop one, reset to a neutral center crop since it's a different
     photo than whatever the top-cropping above was tuned for. */
  .tnp-banner--has-mobile-image > .banner__media:not(.tnp-banner__mobile-media) {
    display: none;
  }

  .tnp-banner--has-mobile-image .tnp-banner__mobile-media {
    display: block;
  }

  .tnp-banner--has-mobile-image .tnp-banner__mobile-media img {
    object-position: center center;
  }
}

@media screen and (min-width: 750px) {
  .template-page-services .banner__media img {
    object-position: center 50%;
  }
}


/* Contact Us page — soft brand-color fade pinned to the top/left/right edges
   of the viewport, sitting above section content (pointer-events disabled so
   it never blocks clicks) and below modals/popups. */
body.template-page-contact-us {
  position: relative;
}

body.template-page-contact-us::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(to bottom, var(--brand-secondary) 0%, transparent 220px),
    linear-gradient(to right, var(--brand-secondary) 0%, transparent 160px),
    linear-gradient(to left, var(--brand-secondary) 0%, transparent 160px);
  opacity: 0.25;
}

.tnp-eyebrow {
  font-family: var(--font-body-family);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin: 0 0 1rem;
}

.tnp-swatch-strip {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  margin-bottom: 1.8rem;
}

.tnp-swatch {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.tnp-swatch:nth-child(5n+1) { background: var(--rose); }
.tnp-swatch:nth-child(5n+2) { background: var(--rose-deep); }
.tnp-swatch:nth-child(5n+3) { background: var(--line); }
.tnp-swatch:nth-child(5n+4) { background: var(--ink); }
.tnp-swatch:nth-child(5n+5) { background: color-mix(in srgb, var(--card) 40%, var(--rose)); }

.tnp-divider {
  width: 5rem;
  height: 1px;
  background: var(--brand-gold);
  margin: 1.6rem 0;
}

.tnp-divider--center {
  margin-left: auto;
  margin-right: auto;
}

.tnp-serif-heading {
  font-family: var(--font-heading-family);
  font-weight: 500;
  color: var(--text-primary);
}

/* Price list rows (Services & Pricing page) */
/* Matches Dawn's .collapsible-content-wrapper-narrow exactly, so switching
   from the accordion section to this one keeps the same left/right padding
   and reading column width. */
.tnp-pricing-wrap {
  margin: 0 auto;
  padding-top: var(--tnp-pricing-padding-top);
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  max-width: 73.4rem;
}

@media screen and (max-width: 749px) {
  .tnp-pricing-wrap {
    padding-top: var(--tnp-pricing-mobile-padding-top);
  }
}

.tnp-pricing {
  color: rgb(var(--color-foreground));
}

.tnp-pricing__intro {
  color: var(--text-secondary);
  margin: 0 0 1.5rem;
  font-style: italic;
}

.tnp-pricing__group + .tnp-pricing__group {
  margin-top: 2.75rem;
}

.tnp-pricing__group-heading {
  font-family: var(--font-heading-family);
  font-weight: 500;
  font-style: italic;
  font-size: 2.2rem;
  color: var(--brand-primary);
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--brand-gold);
}

.tnp-pricing__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px dotted rgba(var(--color-foreground), 0.15);
}

.tnp-pricing__row-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.tnp-pricing__name {
  font-weight: 500;
  color: var(--text-primary);
}

.tnp-pricing__desc {
  font-size: 1.3rem;
  color: var(--text-secondary);
}

.tnp-pricing__price {
  font-family: var(--font-heading-family);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.tnp-pricing__addons {
  margin-top: 1.25rem;
  padding: 1.5rem 1.75rem;
  background: var(--brand-wash);
  border-radius: 0.4rem;
}

.tnp-pricing__addons--with-image {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.75rem;
}

.tnp-pricing__addons-image {
  display: block;
  flex: 0 0 auto;
  width: 14rem;
  max-width: 100%;
}

.tnp-pricing__addons-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.3rem;
}

.tnp-pricing__addons-content {
  flex: 1 1 16rem;
  min-width: 0;
}

.tnp-pricing__addons-heading {
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 0.75rem;
}

.tnp-pricing__addons .tnp-pricing__row {
  padding: 0.5rem 0;
  border-bottom: 1px dotted rgba(var(--color-foreground), 0.1);
}

.tnp-pricing__note {
  font-size: 1.3rem;
  font-style: italic;
  color: var(--text-secondary);
  margin: 1.25rem 0 0;
}

.tnp-pricing__desc-mobile {
  display: none;
}

@media screen and (max-width: 749px) {
  .tnp-pricing__row-main > .tnp-pricing__desc {
    display: none;
  }

  .tnp-pricing__row-main:has(.tnp-pricing__desc-mobile) > .tnp-pricing__name {
    display: none;
  }

  .tnp-pricing__desc-mobile {
    display: block;
  }

  .tnp-pricing__desc-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    cursor: pointer;
    list-style: none;
    color: var(--brand-primary);
  }

  .tnp-pricing__desc-toggle .tnp-pricing__name {
    color: var(--text-primary);
  }

  .tnp-pricing__desc-toggle::-webkit-details-marker {
    display: none;
  }

  .tnp-pricing__desc-toggle .icon-caret {
    position: static;
    right: auto;
    top: auto;
    width: 0.9rem;
    height: 0.9rem;
    transition: transform 0.2s ease;
  }

  .tnp-pricing__desc-mobile[open] .tnp-pricing__desc-toggle svg {
    transform: rotate(180deg);
  }

  .tnp-pricing__desc-mobile .tnp-pricing__desc {
    display: block;
    margin-top: 0.3rem;
  }
}

/* Split hero: logo top-left (header), text left / photo right, full-bleed */
.tnp-hero-dorado__grid {
  position: relative;
  isolation: isolate;
  min-height: var(--tnp-section-height, 560px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  border-radius: 0.4rem;
}

@media screen and (min-width: 750px) {
  .tnp-hero-dorado__grid {
    padding-left: calc(var(--tnp-media-width, 58%) + var(--tnp-content-gap, 48px));
  }
}

.tnp-hero-dorado__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 4rem;
  width: 100%;
}

.tnp-hero-dorado__heading {
  font-size: var(--tnp-hero-heading-size);
  line-height: 1.05;
  margin: 0 0 1.5rem;
}

.tnp-hero-dorado__body-mobile {
  display: none;
}

@media screen and (max-width: 749px) {
  .tnp-hero-dorado__heading {
    font-size: min(var(--tnp-hero-heading-size), 10vw);
    white-space: nowrap;
    align-self: center;
    text-align: center;
  }

  .tnp-hero-dorado__heading-rule {
    align-self: center;
  }

  .tnp-hero-dorado__body {
    display: none;
  }

  .tnp-hero-dorado__body-mobile {
    display: block;
  }

  .tnp-hero-dorado__text {
    padding-left: var(--tnp-mobile-text-edge-padding);
    padding-right: var(--tnp-mobile-text-edge-padding);
  }
}

/* Rose-gold heading type style — uppercase, letter-spaced serif, shared by
   both the glossy (gradient) and flat-color states so toggling gloss off
   changes only the fill, never the letterforms/spacing. Reused by Hero,
   Services grid, and Gallery headings. */
.tnp-rose-heading--styled {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tnp-rose-heading--glossy {
  background: linear-gradient(180deg, #f7e9dd 0%, #e0b8a0 22%, #a97a5c 48%, #7c5138 62%, #c8977a 82%, #f0dcc9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Rose blush CTA — white fill with a thin blush border, letter-spaced
   small-caps label, optional glossy rose-gold bar along the bottom edge. */
.tnp-button-rose-solid {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  padding: 1.5rem 3.2rem;
  border-radius: 0;
  border: 1px solid #f0d9dd;
  background-color: #ffffff;
  color: #8b5e4f;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tnp-button-rose-solid:hover {
  background-color: #fdf5f6;
}

.tnp-button-rose-solid--gloss::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  height: 0.7rem;
  background: linear-gradient(90deg, #b98a5a, #f0d3a8, #b98a5a);
}

.tnp-hero-dorado__heading-rule {
  display: block;
  width: 12rem;
  max-width: 60%;
  height: 1px;
  margin: 0 0 1.5rem;
  background: linear-gradient(90deg, transparent, #a97a5c, transparent);
}

.tnp-hero-dorado__brand {
  letter-spacing: 0.16rem;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 2.5rem;
}

.tnp-hero-dorado__image {
  position: relative;
  overflow: hidden;
  min-height: var(--tnp-media-height, 400px);
  border-radius: 0.4rem;
}

@media screen and (max-width: 749px) {
  .tnp-hero-dorado__grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Sized as a percentage of this element's own width (via the
       padding-top percentage trick, which always resolves against
       container width) rather than vw — vw is relative to the true device
       viewport, which doesn't match how Shopify's theme editor renders its
       scaled-down mobile preview, throwing this off there. Matches the
       photo's own box model (1.5rem top margin, 1.5rem side margins each,
       4:3 aspect ratio), landing exactly at the photo's vertical midpoint.

       Color is hardcoded (not rgb(var(--color-background))) on purpose:
       .tnp-hero-dorado__grid carries the Card color scheme class, and Dawn
       applies that scheme's background-color directly to the grid itself
       (see theme.liquid's global `.color-*` rule) — so a mask painted with
       the same inherited variable is literally the same color as the grid
       behind it and invisible. Using the page's actual plain background
       color here is what makes the top portion look different from the
       card color at all. */
    height: 0;
    padding-top: calc(37.5% - 0.5rem);
    background: #ffffff;
    z-index: -1;
  }

  .tnp-hero-dorado__image {
    order: -1;
    min-height: 0;
    aspect-ratio: 4 / 3;
    margin: 1.5rem 1.5rem var(--tnp-mobile-photo-gap, 0px);
    box-shadow: 0 16px 32px -14px rgba(36, 31, 29, 0.35);
  }
}

@media screen and (min-width: 750px) {
  .tnp-hero-dorado__image {
    position: absolute;
    z-index: 2;
    left: -2.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: var(--tnp-media-width, 58%);
    border-radius: 0.4rem 4rem 0.4rem 0.4rem;
    box-shadow: 0 24px 50px -16px rgba(36, 31, 29, 0.4);
  }
}

.tnp-hero-dorado__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tnp-hero-dorado__tag {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  z-index: 1;
  background: rgba(251, 246, 241, 0.92);
  color: var(--ink);
  padding: 0.9rem 1.4rem;
  border-radius: 0.2rem;
  font-size: 1.2rem;
  font-weight: 600;
  max-width: calc(100% - 4rem);
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (max-width: 749px) {
  .tnp-hero-dorado__tag {
    bottom: 1rem;
    left: 1rem;
    padding: 0.6rem 1rem;
    font-size: min(1.2rem, 3.6vw);
    max-width: calc(100% - 2rem);
  }
}

.tnp-hero-dorado__ctas {
  display: flex;
  gap: 1.4rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: var(--tnp-hero-cta-justify);
}

@media screen and (max-width: 749px) {
  .tnp-hero-dorado__ctas {
    justify-content: center;
    align-self: center;
    width: 100%;
  }
}

/* About card — inset media (photo or video) left, copy right, on a soft card background */
.tnp-about-card {
  position: relative;
  background: var(--card);
  border-radius: 0.4rem;
}

@media screen and (min-width: 750px) {
  .tnp-about-card {
    padding-left: calc(var(--tnp-media-width, 42%) + 3rem);
    min-height: var(--tnp-media-height, 340px);
    display: flex;
    align-items: center;
  }
}

.tnp-about-card__media {
  position: relative;
  overflow: hidden;
  min-height: var(--tnp-media-height, 340px);
  border-radius: 0.4rem;
}

@media screen and (min-width: 750px) {
  .tnp-about-card__media {
    position: absolute;
    z-index: 2;
    left: -2.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: var(--tnp-media-width, 42%);
    box-shadow: 0 24px 50px -16px rgba(36, 31, 29, 0.4);
  }
}

.tnp-about-card__media video,
.tnp-about-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tnp-about-card__text {
  position: relative;
  z-index: 1;
  padding: 4rem 4.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tnp-about-card__heading {
  font-size: 3.4rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.01em;
  margin: 0 0 2rem;
  color: var(--text-primary);
}

.tnp-about-card__body p {
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 1.5rem;
  margin: 0 0 1.6rem;
}

.tnp-about-card__body p:last-child {
  margin-bottom: 2.6rem;
}

.button.tnp-button-solid-card {
  background: var(--line);
  color: var(--ink);
  --color-button: 225, 210, 198; /* --line #e1d2c6 */
  --color-button-text: 36, 31, 29; /* --ink #241f1d */
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  font-size: 1.2rem;
  font-weight: 600;
}

/* Why-us: recognition badges + standards row */
.tnp-why2__eyebrow {
  display: flex;
  justify-content: center;
  text-align: center;
}

.tnp-why2-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  margin: 0 0 var(--tnp-why2-row-gap, 60px);
}

.tnp-why2-badge__circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(var(--tnp-why2-circle-size, 180px), 70vw);
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 0;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid var(--tnp-why2-border-color, rgba(0, 0, 0, 0.2));
  background-color: var(--tnp-why2-circle-fill, transparent);
  text-align: center;
  padding: var(--tnp-why2-circle-padding, 20px);
  overflow: hidden;
}

/* Glossy border only — the double-background trick clips a gold gradient to
   just the border ring while the fill color/text stay exactly as set. */
.tnp-why2-badge__circle--glossy-border {
  border: 2px solid transparent;
  background-color: transparent;
  background-image:
    linear-gradient(var(--tnp-why2-circle-fill, transparent), var(--tnp-why2-circle-fill, transparent)),
    linear-gradient(135deg, #f7e9dd 0%, #d9ae93 35%, #a97a5c 65%, #7c5138 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.tnp-why2-badge__line1 {
  font-family: var(--font-heading-family);
  font-size: var(--tnp-why2-line1-size, 26px);
  font-weight: 500;
  line-height: 1.1;
  color: var(--tnp-why2-line1-color, var(--text-primary));
  margin-bottom: 0.6rem;
}

.tnp-why2-badge__stars {
  display: flex;
  gap: 0.2rem;
  margin-bottom: 0.8rem;
}

.tnp-why2-badge__line2 {
  font-family: var(--font-body-family);
  font-size: var(--tnp-why2-line2-size, 11px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--tnp-why2-line2-color, var(--text-secondary));
}

.tnp-why2-standards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
}

.tnp-why2-standards__item {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
}

.tnp-why2-standards__word {
  font-family: var(--font-heading-family);
  font-style: italic;
  font-weight: 400;
  font-size: var(--tnp-why2-standards-size, 19px);
  color: var(--tnp-why2-standards-color, var(--text-secondary));
}

.tnp-why2-standards__dot {
  font-size: 1.4rem;
  color: var(--tnp-why2-standards-color, var(--text-secondary));
  opacity: 0.6;
}

/* The last item's dot stays in the DOM (not just omitted) and keeps its
   layout space (visibility, not display) so its column width matches the
   other items exactly — otherwise the word text itself sits off-center
   relative to items that do have a visible trailing dot next to them. */
.tnp-why2-standards__item:last-child .tnp-why2-standards__dot {
  visibility: hidden;
}

@media screen and (max-width: 749px) {
  .tnp-why2-badges {
    flex-wrap: nowrap;
    gap: 0.8rem;
  }

  .tnp-why2-badge__circle {
    width: min(var(--tnp-why2-circle-size, 180px), 28vw);
    padding: min(var(--tnp-why2-circle-padding, 20px), 10px);
  }

  .tnp-why2-badge__line1 {
    /* Scales down below the size setting if needed so short titles like
       "Certified" always fit on one line within the circle without ever
       needing to truncate with an ellipsis. */
    font-size: min(var(--tnp-why2-mobile-line1-size), 3.6vw);
    margin-bottom: 0.3rem;
    max-width: 82%;
    white-space: nowrap;
  }

  .tnp-why2-badge__stars {
    margin-bottom: 0.4rem;
  }

  .tnp-why2-badge__stars svg {
    width: 10px;
    height: 10px;
  }

  .tnp-why2-badge__line2 {
    font-size: var(--tnp-why2-mobile-line2-size);
    letter-spacing: 0.02em;
    line-height: 1.3;
  }

  .tnp-why2-standards__word {
    font-size: var(--tnp-why2-mobile-standards-size);
  }

  /* 2-column grid instead of flex-wrap: guarantees exactly 2 items per row
     regardless of how long each phrase is (flex-wrap only breaks where the
     browser runs out of width, which put 1 or 3 per row depending on text
     length). Each .tnp-why2-standards__item is one word + its trailing dot
     already bundled together, so this can't split a word from its dot. */
  .tnp-why2-standards {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    row-gap: 0.8rem;
    column-gap: 1.6rem;
  }

  .tnp-why2-standards__item {
    justify-content: center;
  }

  .tnp-why2-standards__word {
    white-space: nowrap;
  }
}

/* Final CTA banner */
.tnp-final-cta {
  padding: 12rem 0;
  background: linear-gradient(180deg, var(--ivory), var(--card));
}

.tnp-cta-badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem 2rem;
  margin: 0 auto 3.2rem;
  max-width: 56rem;
}

@media screen and (min-width: 750px) {
  .tnp-cta-badges {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Split hero (image + copy side by side — About page) */
.tnp-hero-split {
  padding: 2rem 0;
}

.tnp-hero-split__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media screen and (min-width: 750px) {
  .tnp-hero-split__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.tnp-hero-split__image img {
  width: 100%;
  height: auto;
  border-radius: 0.4rem 4rem 0.4rem 0.4rem;
  display: block;
}

/* Services teaser grid — circular, elegant */
.tnp-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  justify-items: center;
}

@media screen and (min-width: 750px) {
  .tnp-services-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.tnp-service-card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--text-primary);
}

.tnp-service-card__image {
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1.4rem;
  border: 1px solid var(--brand-gold);
  padding: 0.4rem;
}

.tnp-service-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.tnp-service-card__label {
  font-family: var(--font-heading-family);
  font-size: 1.9rem;
  font-weight: 500;
}

.tnp-service-card:hover .tnp-service-card__label {
  color: var(--brand-primary);
}

/* Services photo grid — left-aligned heading, square photo tiles, caption below, CTA at bottom */
.tnp-svc-header {
  text-align: center;
  margin-bottom: 3rem;
}

.tnp-svc-header__heading {
  font-size: var(--tnp-svc-heading-size, 3.6rem);
  margin: 0 0 0.75rem;
}

.tnp-svc-header__sub-wrap {
  position: relative;
  display: inline-block;
}

.tnp-svc-header__sub {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading-family);
  font-style: italic;
  font-size: var(--tnp-svc-subheading-size, 1.5rem);
  color: var(--text-primary);
  margin: 0;
}

@media screen and (max-width: 749px) {
  .tnp-svc-header__heading {
    font-size: var(--tnp-svc-mobile-heading-size);
  }

  .tnp-svc-header__sub {
    font-size: var(--tnp-svc-mobile-subheading-size);
  }
}

/* Anchored to the bottom of the subheading box so the strip sits on the
   lower half of the letters (not centered, not the top half). */
.tnp-svc-header__sub-strip {
  position: absolute;
  z-index: 0;
  left: -0.8em;
  right: -0.8em;
  top: 100%;
  pointer-events: none;
}

.tnp-svc-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

@media screen and (max-width: 599px) {
  /* Flexbox instead of grid so a leftover odd-numbered card (e.g. a 5th
     service in 2-per-row) centers itself instead of sticking to the left
     column of an otherwise-empty row. */
  .tnp-svc-photo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .tnp-svc-photo-card {
    width: calc(50% - 0.625rem);
  }
}

@media screen and (min-width: 600px) {
  .tnp-svc-photo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 990px) {
  .tnp-svc-photo-grid {
    grid-template-columns: repeat(var(--tnp-svc-columns, 5), 1fr);
  }
}

.tnp-svc-photo-card {
  text-decoration: none;
  color: var(--text-primary);
  display: block;
}

.tnp-svc-photo-card__image {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--tnp-img-radius, 0.3rem);
  border: var(--tnp-img-border-width, 0px) solid var(--tnp-img-border-color, transparent);
  box-sizing: border-box;
  overflow: hidden;
  margin-bottom: 1.4rem;
}

.tnp-svc-photo-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.tnp-svc-photo-card:hover .tnp-svc-photo-card__image img {
  transform: scale(1.05);
}

.tnp-svc-photo-card__label {
  display: block;
  text-align: center;
  font-family: var(--font-heading-family);
  font-size: 1.7rem;
  font-weight: 500;
}

.tnp-svc-footer {
  text-align: center;
  margin-top: 3.5rem;
}

/* Trust grid (Nail Products / About values) — pill badges + soft pink cards */
.tnp-trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-bottom: 1.4rem;
}

.tnp-trust-badge {
  display: inline-block;
  padding: 0.6rem 1.6rem;
  border: 1px solid var(--brand-secondary);
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: rgb(var(--color-background));
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.tnp-trust-badge:hover {
  transform: translateY(-0.2rem);
  background-color: var(--brand-secondary);
  color: #fff;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.18);
}

.tnp-trust-badge--shadow {
  box-shadow: 0 4px 10px -3px rgba(0, 0, 0, 0.25);
}

.tnp-trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media screen and (min-width: 750px) {
  .tnp-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tnp-trust-card {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  background: var(--brand-wash);
  padding: 2rem;
  border-radius: 1.2rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media screen and (max-width: 749px) {
  /* Two equal-size cards per row. Image, title, and description stack
     vertically inside each card. The title/description are nested inside a
     wrapping <span> in the markup — display:contents lets them act as
     direct flex items here without changing that markup. */
  .tnp-trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .tnp-trust-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 1.4rem;
  }

  .tnp-trust-card > span:not(.tnp-trust-card__image) {
    display: contents;
  }

  .tnp-trust-card__title {
    margin: 0;
  }
}

.tnp-trust-card:hover {
  transform: translateY(-0.4rem);
  box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.2);
}

.tnp-trust-card--shadow {
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.22);
}

.tnp-trust-card__image {
  width: 7rem;
  height: 7rem;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.12);
}

.tnp-trust-card__image img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  display: block;
}

@media screen and (max-width: 749px) {
  .tnp-trust-card__image {
    width: var(--tnp-trust-mobile-image-size, 4.5rem);
    height: var(--tnp-trust-mobile-image-size, 4.5rem);
  }

  .tnp-trust-grid--mobile-center .tnp-trust-card__image {
    align-self: center;
  }
}

.tnp-trust-card__title {
  font-family: var(--font-heading-family);
  font-weight: 500;
  margin: 0 0 0.5rem;
  font-size: 1.9rem;
  color: var(--text-primary);
}

@media screen and (max-width: 749px) {
  .tnp-trust-card__title {
    font-size: var(--tnp-trust-mobile-title-size, 1.5rem);
  }

  .tnp-trust-grid--mobile-center .tnp-trust-card__title {
    align-self: center;
    width: 100%;
    text-align: center;
  }
}

.tnp-trust-card__desc {
  margin: 0;
  color: var(--text-secondary);
  font-size: 1.3rem;
  line-height: 1.6;
}

@media screen and (max-width: 749px) {
  .tnp-trust-card__desc {
    padding-left: 0;
    font-size: var(--tnp-trust-mobile-desc-size, 1.15rem);
    line-height: 1.5;
  }
}

.tnp-trust-note {
  margin-top: 2.5rem;
  padding: 1.5rem 2rem;
  background: var(--brand-wash);
  border-radius: 0.4rem;
  color: var(--text-secondary);
  font-size: 1.3rem;
  text-align: center;
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .tnp-trust-badge:hover,
  .tnp-trust-card:hover {
    transform: none;
  }
}

/* Value row (About page) — centered, no card chrome */
.tnp-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.tnp-value__image {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  border: 1px solid var(--brand-gold);
  padding: 0.5rem;
  margin-bottom: 1.25rem;
}

.tnp-value__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.tnp-value__title {
  font-family: var(--font-heading-family);
  font-size: 2rem;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
}

/* Hours / location */
.tnp-hours-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media screen and (min-width: 750px) {
  .tnp-hours-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.tnp-hours dt {
  font-family: var(--font-heading-family);
  font-weight: 500;
  font-style: italic;
  color: var(--brand-primary);
  font-size: 1.6rem;
  margin-top: 1.5rem;
}

.tnp-hours dt:first-child {
  margin-top: 0;
}

.tnp-hours dd {
  margin: 0.3rem 0 0;
  color: var(--text-secondary);
}

.tnp-map-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 75%;
  border-radius: 0.4rem 4rem 0.4rem 0.4rem;
  overflow: hidden;
}

.tnp-map-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Reviews — Google-review-style business panel + review carousel */
.tnp-rev-heading {
  text-align: center;
  font-size: 3.4rem;
  max-width: 60rem;
  margin: 0 auto 4rem;
}

@media screen and (max-width: 749px) {
  .tnp-rev-heading {
    font-size: var(--tnp-rev-mobile-heading-size);
  }
}

.tnp-rev-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media screen and (min-width: 750px) {
  .tnp-rev-layout {
    grid-template-columns: 20rem minmax(0, 1fr);
  }
}

.tnp-rev-carousel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
}

.tnp-rev-business {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
}

.tnp-rev-business__logo {
  width: 5.6rem;
  height: 5.6rem;
  flex-shrink: 0;
  border-radius: 0.4rem;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  overflow: hidden;
  margin-bottom: 0.6rem;
}

.tnp-rev-business__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tnp-rev-business__logo--transparent {
  background: transparent;
}

.tnp-rev-business__count {
  font-size: 1.3rem;
  color: var(--text-secondary);
  margin: 0.4rem 0 0;
}

/* Section background image (full-bleed, behind everything) */
.tnp-rev-section {
  position: relative;
}

.tnp-rev-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.tnp-rev-section__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tnp-rev-section__bg-overlay {
  position: absolute;
  inset: 0;
  background: rgb(var(--color-background));
}

.tnp-rev-section__content {
  position: relative;
  z-index: 1;
}

.tnp-rev-business__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tnp-rev-business__name {
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--text-primary);
  margin: 0;
}

.tnp-rev-stars {
  display: flex;
  gap: 0.2rem;
}

.tnp-rev-business__btn {
  margin-top: 0.8rem;
  padding: 0.6em 1.8em;
  min-width: 8em;
  min-height: 2.6em;
}

/* Shared hover-triggered button animations — usable on any button across
   sections (Reviews, Hero, Gallery, Services) via a `tnp-anim-*` class. Base
   Dawn `.button` is already `position: relative`, so no extra positioning is
   needed except for the shine sweep's clipped overlay. */
@keyframes tnpAnimPulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--color-foreground), 0.35); }
  100% { box-shadow: 0 0 0 0.6rem rgba(var(--color-foreground), 0); }
}

.tnp-anim-pulse:hover,
.tnp-anim-pulse:focus-visible {
  animation: tnpAnimPulse 0.6s ease-out;
}

@keyframes tnpAnimBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.4rem); }
}

.tnp-anim-bounce:hover,
.tnp-anim-bounce:focus-visible {
  animation: tnpAnimBounce 0.5s ease-in-out;
}

.tnp-anim-shine {
  overflow: hidden;
}

.tnp-anim-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  opacity: 0;
  pointer-events: none;
}

.tnp-anim-shine:hover::after,
.tnp-anim-shine:focus-visible::after {
  opacity: 1;
  animation: tnpAnimShine 0.7s ease-in-out;
}

@keyframes tnpAnimShine {
  0% { left: -60%; }
  100% { left: 130%; }
}

.tnp-anim-float {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tnp-anim-float:hover,
.tnp-anim-float:focus-visible {
  transform: translateY(-0.3rem);
  box-shadow: 0 0.8rem 1.6rem rgba(var(--color-shadow), 0.3);
}

/* Click feedback — a quick darken "press", layered on top of whichever
   hover animation is active so every animated button also reacts to clicks. */
.tnp-anim-pulse:active,
.tnp-anim-bounce:active,
.tnp-anim-shine:active,
.tnp-anim-float:active {
  filter: brightness(0.9);
  transition: filter 0.1s ease;
}

@media (prefers-reduced-motion: reduce) {
  .tnp-anim-pulse:hover,
  .tnp-anim-pulse:focus-visible,
  .tnp-anim-bounce:hover,
  .tnp-anim-bounce:focus-visible,
  .tnp-anim-shine:hover::after,
  .tnp-anim-shine:focus-visible::after {
    animation: none;
  }

  .tnp-anim-float:hover,
  .tnp-anim-float:focus-visible {
    transform: none;
  }
}

.tnp-rev-carousel__viewport {
  position: relative;
  min-width: 0;
  max-width: 100%;
}

.tnp-rev-carousel__track {
  display: flex;
  gap: 1.4rem;
  min-width: 0;
  max-width: 100%;
  padding: 0 5.5rem 0 0;
  box-sizing: border-box;
}

.tnp-rev-carousel__slide {
  flex: 0 0 var(--tnp-rev-card-width, 280px);
  width: var(--tnp-rev-card-width, 280px);
  height: var(--tnp-rev-card-height, 320px);
}

.tnp-rev-card {
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--tnp-img-radius, 0.3rem);
  border: var(--tnp-img-border-width, 0px) solid var(--tnp-img-border-color, transparent);
  padding: 2rem;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tnp-rev-card__top {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.8rem;
}

.tnp-rev-card__avatar {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tnp-rev-card__name {
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}

.tnp-rev-card__google {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: #fff;
  color: #4285f4;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.tnp-rev-card__google img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tnp-rev-card__stars {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.tnp-rev-card__quote {
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--tnp-rev-quote-lines, 4);
  line-clamp: var(--tnp-rev-quote-lines, 4);
  text-overflow: ellipsis;
}

.tnp-rev-card__readmore {
  align-self: flex-start;
  margin-top: 0.6rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--brand-primary);
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  flex-shrink: 0;
}

.tnp-rev-card__readmore:hover {
  color: var(--brand-secondary);
}

/* Read-more modal — reuses Dawn's modal-dialog/modal-opener JS (assets/global.js),
   styled independently of the product-popup-modal CSS so this section doesn't need
   to load product-specific stylesheets. */
.tnp-rev-modal {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  overflow: auto;
  background: rgba(36, 31, 29, 0.5);
}

.tnp-rev-modal[open] {
  z-index: 101;
  opacity: 1;
  visibility: visible;
}

.tnp-rev-modal__content {
  position: relative;
  box-sizing: border-box;
  width: 92%;
  max-width: 52rem;
  margin: 8rem auto;
  padding: 3rem;
  border-radius: 0.4rem;
  background: rgb(var(--color-background));
}

.tnp-rev-modal__close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  padding: 0.4rem;
}

.tnp-rev-modal .tnp-rev-card__top {
  margin-bottom: 0.8rem;
}

.tnp-rev-modal__quote {
  font-size: 1.6rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 1rem 0 0;
  overflow-wrap: break-word;
}

@media screen and (max-width: 749px) {
  .tnp-rev-modal__content {
    margin: 4rem auto;
    padding: 2.4rem;
  }
}

.tnp-rev-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgb(var(--color-background));
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(36, 31, 29, 0.18);
}

.tnp-rev-carousel__arrow--prev {
  left: -1.6rem;
}

.tnp-rev-carousel__arrow--next {
  right: 0.4rem;
}

@media screen and (max-width: 749px) {
  .tnp-rev-carousel__track {
    padding-right: 3.6rem;
  }

  .tnp-rev-carousel__arrow {
    width: 3.2rem;
    height: 3.2rem;
  }

  .tnp-rev-carousel__arrow--prev {
    left: 0;
  }

  .tnp-rev-carousel__arrow--next {
    right: 0;
  }
}

.tnp-rev-carousel__controls {
  justify-content: center;
  gap: 1.2rem;
  margin-top: 2rem;
}

/* Kept in the DOM (required so the slideshow's built-in hover-pause logic has a
   toggle button to reference) but hidden — the carousel still pauses on hover
   automatically, it just doesn't show a manual pause/play control. Compound
   selector (not just .tnp-rev-carousel__playpause) so this reliably beats
   Dawn's own .slider-button{display:flex} rule regardless of stylesheet
   load order. */
.tnp-rev-carousel .slider-button.tnp-rev-carousel__playpause {
  display: none;
}

@media screen and (max-width: 749px) {
  .tnp-rev-carousel__controls .slider-counter--dots {
    display: none;
  }
}

.tnp-rev-carousel .slider-counter__link--dots .dot {
  background: var(--line);
}

.tnp-rev-carousel .slider-counter__link--dots.slider-counter__link--active .dot,
.tnp-rev-carousel .slider-counter__link--dots[aria-current='true'] .dot {
  background: var(--brand-primary);
}

/* Brand outline button — elegant secondary CTA (thin border, letter-spaced label) */
.button.tnp-button-outline {
  background: transparent;
  --color-button: var(--color-background);
  --color-button-text: var(--color-foreground);
  --alpha-button-background: 0;
  border: 1px solid rgb(var(--color-foreground));
  color: rgb(var(--color-foreground));
  letter-spacing: 0.12rem;
  text-transform: uppercase;
  font-size: 1.3rem;
}

/* Instagram callout */
.tnp-ig-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}

@media screen and (min-width: 750px) {
  .tnp-ig-split {
    grid-template-columns: 1fr 1fr;
  }
}

.tnp-ig-split__text {
  text-align: center;
}

.tnp-ig-split__text .tnp-eyebrow {
  display: flex;
  justify-content: center;
}

.tnp-ig-split__heading {
  font-family: var(--font-heading-family);
  font-weight: 600;
  font-style: italic;
  font-size: 3.6rem;
  color: var(--brand-primary);
  margin: 0.6rem 0 1.4rem;
}

.tnp-ig-split__heading.tnp-rose-heading--glossy {
  color: transparent;
}

.tnp-ig-split__handle {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: underline;
}

.tnp-ig-split__photos {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 26rem;
}

.tnp-ig-split__photos:hover {
  animation: tnp-ig-shake 0.5s ease;
}

@keyframes tnp-ig-shake {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  20% { transform: rotate(-3deg) translateX(-0.3rem); }
  40% { transform: rotate(3deg) translateX(0.3rem); }
  60% { transform: rotate(-2deg) translateX(-0.2rem); }
  80% { transform: rotate(2deg) translateX(0.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .tnp-ig-split__photos:hover {
    animation: none;
  }
}

.tnp-ig-polaroid {
  position: absolute;
  box-sizing: border-box;
  background: #fff;
  padding: 1rem 1rem 2.2rem;
  border-radius: 0.2rem;
  box-shadow: 0 12px 30px -10px rgba(36, 31, 29, 0.35);
  width: 60%;
  max-width: 24rem;
}

.tnp-ig-polaroid--1 {
  top: 0;
  left: 0;
  transform: rotate(-4deg);
  z-index: 1;
}

.tnp-ig-polaroid--2 {
  top: 2.5rem;
  left: 32%;
  transform: rotate(4deg);
  z-index: 2;
}

@media screen and (max-width: 749px) {
  .tnp-ig-split__photos {
    min-height: 18rem;
  }

  .tnp-ig-polaroid {
    width: 52%;
    max-width: 13rem;
    padding: 0.6rem 0.6rem 1.4rem;
  }

  .tnp-ig-polaroid--2 {
    top: 1.6rem;
  }

  .tnp-ig-polaroid__badge {
    width: 2.2rem;
    height: 2.2rem;
  }
}

.tnp-ig-polaroid__frame {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
}

.tnp-ig-polaroid__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tnp-ig-polaroid__badge {
  position: absolute;
  top: -1rem;
  right: -1rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50% 50% 50% 0;
  background: #fff;
  box-shadow: 0 4px 10px rgba(36, 31, 29, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(45deg);
}

.tnp-ig-polaroid__badge svg {
  transform: rotate(-45deg);
}

@media screen and (max-width: 749px) {
  .tnp-ig-split__photos {
    max-width: 30rem;
    margin: 0 auto;
  }
}

/* Location / hours labels */
.tnp-loc-label {
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.4rem;
  color: var(--brand-primary);
  font-weight: 600;
}

/* Gallery grid (homepage "Showcase of Style") — static, wrapping photo grid.
   No carousel/autoplay/arrows; "rows" is achieved by grouping photo blocks into
   stacked columns of 1 or 2, which then wrap naturally on smaller screens. */
/* Row-major grid: "rows" controls how many horizontal bands there are; extra
   photos extend the grid further right (scrollable) rather than wrapping to
   a new row, so the row count only ever affects the horizontal direction. */
.tnp-gallery-grid {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(var(--tnp-grid-columns, 3), var(--tnp-tile-width, 340px));
  grid-template-rows: repeat(var(--tnp-grid-rows, 1), var(--tnp-tile-height, 340px));
  gap: 1.4rem;
  justify-content: center;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scrollbar-width: thin;
}

/* Mobile-only single-photo slideshow — swaps in for the grid below 750px so
   each photo shows large enough to actually see the nail art, one at a
   time, instead of tiny grid tiles. */
.tnp-gallery-mobile-slideshow {
  display: none;
}

.tnp-gallery-mobile-carousel__viewport {
  position: relative;
}

.tnp-gallery-mobile-carousel__track {
  display: flex;
  min-width: 0;
  max-width: 100%;
}

.tnp-gallery-mobile-carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--tnp-img-radius, 0.3rem);
  overflow: hidden;
}

.tnp-gallery-mobile-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.tnp-gallery-mobile-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(36, 31, 29, 0.25);
  width: 3.2rem;
  height: 3.2rem;
}

.tnp-gallery-mobile-carousel__arrow--prev {
  left: 0.8rem;
}

.tnp-gallery-mobile-carousel__arrow--next {
  right: 0.8rem;
}

.tnp-gallery-mobile-carousel__controls {
  justify-content: center;
  gap: 0.2rem;
  margin-top: 1.4rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.tnp-gallery-mobile-carousel .slider-counter__link {
  padding: 0.3rem;
}

.tnp-gallery-mobile-carousel .slideshow__control-wrapper {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 0.4rem;
}

/* Kept in the DOM (required so the slideshow's built-in hover/focus-pause
   logic has a toggle button to reference) but hidden — the carousel still
   pauses automatically when interacted with, it just doesn't show a manual
   pause/play control. */
.tnp-gallery-mobile-carousel .slideshow__autoplay.tnp-gallery-mobile-carousel__playpause {
  display: none;
}

.tnp-gallery-mobile-carousel .slider-counter__link--dots .dot {
  width: 0.6rem;
  height: 0.6rem;
}

@media screen and (max-width: 749px) {
  .tnp-gallery-grid {
    display: none;
  }

  .tnp-gallery-mobile-slideshow {
    display: block;
  }
}

.tnp-gallery-grid__image {
  display: block;
  position: relative;
  width: 100%;
  height: var(--tnp-tile-height, 340px);
  border-radius: var(--tnp-img-radius, 0.3rem);
  border: var(--tnp-img-border-width, 0px) solid var(--tnp-img-border-color, transparent);
  box-sizing: border-box;
  overflow: hidden;
}

.tnp-gallery-grid__image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.tnp-gallery-grid__image:hover > img {
  transform: scale(1.08);
}

/* Per-tile photo changing — up to 3 stacked photos crossfade on a timer.
   animation-delay is set per layer (as a negative offset) inline via Liquid
   so any tile can cycle at its own pace. Hovering pauses the cycle so the
   currently-visible photo stays put while you're looking at it. */
.tnp-gallery-grid__image-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.tnp-gallery-grid__image:hover .tnp-gallery-grid__image-layer {
  animation-play-state: paused;
}

.tnp-gallery-grid__image-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.tnp-gallery-grid__image:hover .tnp-gallery-grid__image-layer img {
  transform: scale(1.08);
}

.tnp-gallery-grid__image-layer--of-2 {
  animation-name: tnp-photo-cycle-2;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.tnp-gallery-grid__image-layer--of-3 {
  animation-name: tnp-photo-cycle-3;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes tnp-photo-cycle-2 {
  0%, 42% { opacity: 1; }
  50%, 92% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes tnp-photo-cycle-3 {
  0%, 25% { opacity: 1; }
  33%, 92% { opacity: 0; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .tnp-gallery-grid__image-layer {
    animation: none;
    opacity: 0;
  }

  .tnp-gallery-grid__image-layer:first-child {
    opacity: 1;
  }

  .tnp-gallery-grid__image:hover > img,
  .tnp-gallery-grid__image:hover .tnp-gallery-grid__image-layer img {
    transform: none;
  }
}

/* Video hero — full-bleed background video/image, dark overlay, centered gold copy */
.tnp-video-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tnp-video-hero__media {
  position: absolute;
  inset: 0;
}

.tnp-video-hero__media video,
.tnp-video-hero__media img,
.tnp-video-hero__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  pointer-events: none;
}

.tnp-video-hero__overlay {
  position: absolute;
  inset: 0;
}

.tnp-video-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 4rem 2rem;
}

.tnp-video-hero__panel {
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  padding: 4.5rem 5rem;
  max-width: 90rem;
  width: 100%;
  text-align: center;
}

.tnp-video-hero__script {
  font-family: 'Parisienne', var(--font-heading-family), cursive;
  font-size: 2.8rem;
  color: #fff;
  margin: 0 0 0.5rem;
}

.tnp-video-hero__brand {
  font-family: var(--font-heading-family);
  font-weight: 500;
  font-size: 4.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #d9b872;
  margin: 0 0 1.6rem;
  line-height: 1.1;
}

.tnp-video-hero__sub {
  font-size: 1.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 500;
  margin: 0 0 2.8rem;
}

.tnp-video-hero__ctas {
  display: flex;
  gap: 1.4rem;
  justify-content: center;
  flex-wrap: wrap;
}

.button.tnp-button-gold {
  --color-button: 217, 184, 114; /* #d9b872 */
  --color-button-text: 36, 26, 14;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.button.tnp-button-gold:hover {
  border: 1px solid #d9b872;
}

.button.tnp-button-gold-outline {
  background: transparent;
  --color-button: var(--color-background);
  --color-button-text: 217, 184, 114;
  --alpha-button-background: 0;
  border: 1px solid #d9b872;
  color: #d9b872;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.button.tnp-button-gold-outline:hover {
  background-color: #d9b872;
  border-color: #d9b872;
  color: #241a0e;
}

@media screen and (max-width: 749px) {
  .tnp-video-hero__panel {
    padding: 3rem 2rem;
  }

  .tnp-video-hero__brand {
    font-size: 2.8rem;
  }
}

/* Sticky header: soft translucent ivory + blur, per mockup */
sticky-header.header-wrapper {
  background-color: rgba(251, 246, 241, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Persistent header "Book Now" CTA */
.tnp-header-book {
  margin-inline-end: 1rem;
  min-width: 0;
  min-height: 0;
  padding: 1rem 1.8rem;
  white-space: nowrap;
  align-self: center;
  font-size: 1.3rem;
  letter-spacing: 0.06rem;
  text-transform: uppercase;
  --color-button: 36, 31, 29; /* --ink #241f1d, overrides the site-wide brand-pink booking-link color for the header's own button */
  --color-button-text: 251, 246, 241; /* --ivory */
}

.tnp-header-book:not([disabled]):hover {
  --alpha-button-background: 0;
  --color-button: 217, 184, 114; /* gold #d9b872 */
  --color-button-text: 217, 184, 114;
  /* Dawn draws the button's outline as a box-shadow tied to
     --alpha-button-background, so setting that to 0 for the transparent
     fill also erases the shadow-based outline. Explicit border guarantees
     a visible gold ring regardless. */
  border: 1px solid #d9b872;
}

/* Header layout — true 3-zone: logo far left, nav centered in the remaining
   space, icons/Book Now far right (Dawn's own "middle-left" preset instead
   clusters the nav right next to the logo). */
@media screen and (min-width: 990px) {
  .header--middle-left {
    grid-template-columns: auto 1fr auto;
  }

  .header--middle-left .header__inline-menu {
    justify-self: center;
  }
}

.header__inline-menu .header__menu-item {
  font-family: var(--font-heading-family);
  font-weight: 500;
  font-size: var(--tnp-menu-text-size, 14px);
  letter-spacing: 0.04rem;
}

/* Footer info block — logo/social, contact/hours, map */
.tnp-footer-info-wrap {
  padding-top: var(--tnp-footer-info-padding-top);
}

@media screen and (max-width: 749px) {
  .tnp-footer-info-wrap {
    padding-top: var(--tnp-footer-info-mobile-padding-top);
  }
}

.tnp-footer-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media screen and (min-width: 750px) {
  .tnp-footer-info {
    grid-template-columns: 1fr 1fr 1.2fr;
    align-items: start;
  }
}

.tnp-footer-info__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
}

.tnp-footer-info__logo {
  display: block;
  width: 6rem;
  height: 6rem;
  margin-bottom: 0.5rem;
}

.tnp-footer-info__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.tnp-footer-info__name {
  font-family: var(--font-heading-family);
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
}

.tnp-footer-info__phone {
  color: var(--text-secondary);
  font-size: 1.3rem;
  text-decoration: none;
}

.tnp-footer-info__social {
  display: flex;
  gap: 0.8rem;
  margin-top: 1.4rem;
}

.tnp-footer-info__social-icon {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tnp-footer-info__social-icon:hover,
.tnp-footer-info__social-icon:focus-visible {
  transform: translateY(-0.2rem) scale(1.08);
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.35);
}

.tnp-footer-info__social-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .tnp-footer-info__social-icon:hover,
  .tnp-footer-info__social-icon:focus-visible {
    transform: none;
  }
}

.tnp-footer-info__heading {
  font-family: var(--font-heading-family);
  font-weight: 600;
  font-size: 2rem;
  color: var(--brand-primary);
  margin: 0 0 1.2rem;
}

.tnp-footer-info__heading--hours {
  margin-top: 2.2rem;
}

.tnp-footer-info__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.tnp-footer-info__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  color: var(--tnp-footer-text-color, var(--text-primary));
  font-size: 1.4rem;
}

.tnp-footer-info__list svg {
  color: var(--brand-primary);
  flex-shrink: 0;
  margin-top: 0.3rem;
}

.tnp-footer-info__list a {
  color: var(--tnp-footer-text-color, var(--text-primary));
  text-decoration: none;
}

.tnp-footer-info__hours {
  color: var(--tnp-footer-text-color, var(--text-primary));
  font-size: 1.4rem;
  line-height: 1.7;
  margin: 0;
}

.tnp-footer-info__map {
  position: relative;
  border-radius: 0.4rem;
  overflow: hidden;
  min-height: 24rem;
  height: 100%;
}

.tnp-footer-info__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.tnp-footer-info__map-link {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  background: #fff;
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 600;
  padding: 0.8rem 1.4rem;
  border-radius: 0.3rem;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Services page: "Keep all rows expanded" mode — mirrors .accordion summary's
   layout so the always-open row header lines up with the normal accordion look. */
.accordion__header {
  display: flex;
  position: relative;
  line-height: 1;
  padding: 1.5rem 0;
}

/* Gallery page — full photo grid with a click-to-enlarge modal */
.tnp-gallery-page-grid {
  display: grid;
  grid-template-columns: repeat(var(--tnp-gp-columns, 4), 1fr);
  gap: var(--tnp-gp-gap, 16px);
  margin-top: 3.2rem;
}

@media screen and (max-width: 749px) {
  .tnp-gallery-page-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tnp-gallery-page-grid__item {
  display: flex;
  flex-direction: column;
}

.tnp-gallery-page-grid__btn {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: none;
  background: var(--card);
  border-radius: var(--tnp-img-radius, 8px);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tnp-gallery-page-grid__btn:hover {
  transform: translateY(-0.3rem);
  box-shadow: 0 0.8rem 1.6rem rgba(var(--color-shadow), 0.25);
}

.tnp-gallery-page-grid__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.tnp-gallery-page-grid__btn:hover img,
.tnp-gallery-page-grid__btn:focus-visible img {
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .tnp-gallery-page-grid__btn:hover img,
  .tnp-gallery-page-grid__btn:focus-visible img {
    transform: none;
  }
}

.tnp-gallery-page-grid__caption {
  margin: 0.8rem 0 0;
  font-size: 1.2rem;
  color: var(--text-secondary);
  text-align: center;
}

.tnp-gallery-page-modal {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  overflow: auto;
  background: rgba(36, 31, 29, 0.75);
}

.tnp-gallery-page-modal[open] {
  z-index: 101;
  opacity: 1;
  visibility: visible;
}

.tnp-gallery-page-modal__content {
  position: relative;
  box-sizing: border-box;
  width: 92%;
  max-width: 72rem;
  margin: 6rem auto;
  padding: 1.6rem;
  border-radius: 0.4rem;
  background: rgb(var(--color-background));
}

.tnp-gallery-page-modal__content img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.3rem;
}

.tnp-gallery-page-modal__close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  background: rgb(var(--color-background));
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-primary);
  padding: 0.6rem;
  z-index: 1;
}

.tnp-gallery-page-modal__caption {
  margin: 1.2rem 0 0;
  font-size: 1.3rem;
  color: var(--text-secondary);
  text-align: center;
}

@media screen and (max-width: 749px) {
  .tnp-gallery-page-modal__content {
    margin: 3rem auto;
    padding: 1.2rem;
  }
}

/* Homepage promo popup — shows automatically on page load. */
.tnp-popup-modal {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  overflow: auto;
  background: rgba(36, 31, 29, 0.75);
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.tnp-popup-modal[open] {
  z-index: 102;
  opacity: 1;
  visibility: visible;
}

.tnp-popup-modal__content {
  position: relative;
  box-sizing: border-box;
  width: 92%;
  margin: 8vh auto;
  border-radius: 0.8rem;
  overflow: hidden;
  background: rgb(var(--color-background));
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.45);
}

.tnp-popup-modal__content img {
  width: 100%;
  height: auto;
  display: block;
}

.tnp-popup-modal__link {
  display: block;
}

.tnp-popup-modal__close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  background: rgba(36, 31, 29, 0.55);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  padding: 0.5rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tnp-popup-modal__close svg {
  width: 1.4rem;
  height: 1.4rem;
}

@media (prefers-reduced-motion: reduce) {
  .tnp-popup-modal {
    transition: none;
  }
}