/* K-TEC Nails Bar. The neon wall as the system: blossom-pink field, charcoal ink, Josefin Sans thin wide caps for
   the name and every section label, Source Serif 4 for text, and neon pink only where the sign would glow. */
:root {
  --ink: #2a2426; --ink-2: #1f1a1c; --on-dark: #f6eef1; --on-dark-2: #cbbcc2;
  --blossom: #f6e7ec; --blossom-2: #efd6df; --paper: #fdfafb;
  --neon: #c42a72; --glow: #ff6fb2; --gold: #b8923a;
  --muted: #6d5f64; --rule: rgba(42, 36, 38, .16); --rule-dark: rgba(255, 255, 255, .16);
  --display: "Josefin Sans", system-ui, sans-serif; --text: "Source Serif 4", Georgia, serif;
  --m-dur: 1.25s; --m-ease: cubic-bezier(.22, .68, .12, 1); --m-rise: 18px;
  --gutter: 20px; --sec: 88px;
}
@media (max-width: 719px) { :root { --m-dur: .9s; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; font: 400 1.0625rem/1.6 var(--text); color: var(--ink); background: var(--paper); padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
figure { margin: 0; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
.wrap { width: min(1240px, 100% - var(--gutter) * 2); margin-inline: auto; }
.nw { white-space: nowrap; }
.label { display: block; font: 600 .8125rem/1.2 var(--display); letter-spacing: .2em; text-transform: uppercase; }
.skip { position: absolute; left: 16px; top: 8px; z-index: 50; padding: 12px 16px; background: var(--ink); color: #fff; font: 600 1rem var(--display); clip-path: inset(50%); }
.skip:focus { clip-path: none; }
.preview { padding: 7px 16px; background: var(--ink); color: var(--on-dark); text-align: center; font: 400 .8125rem/1.35 var(--text); }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
.hours :focus-visible, .salon :focus-visible, .foot :focus-visible, .actionbar :focus-visible { outline-color: var(--glow); }

/* Section heads: one short neon rule, then the label in thin wide caps */
.head { margin-bottom: 32px; }
.rule { display: block; width: 48px; height: 2px; background: var(--neon); margin-bottom: 20px; }
.head h2, .proof .big { font: 300 clamp(2.5rem, 10vw, 4rem)/1 var(--display); letter-spacing: .07em; text-transform: uppercase; padding-top: .08em; }

/* Header */
header.site { position: sticky; top: 0; z-index: 10; background: var(--blossom); border-bottom: 1px solid var(--rule); transition: translate .5s var(--m-ease); }
header.site .bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.brand img { width: 44px; }
.brand span { font: 400 .9375rem/1 var(--display); letter-spacing: .16em; white-space: nowrap; text-transform: uppercase; padding-top: 3px; }
.nav { display: none; }
.hdr-call { font: 600 .9375rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; padding: 3px 0 0 12px; }
.hdr-call .long { display: none; }

/* Buttons and text links */
.btn { display: inline-flex; align-items: center; min-height: 52px; padding: 3px 28px 0; background: var(--ink); color: #fff; text-decoration: none; font: 600 .9375rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; --m-fill: rgba(196, 42, 114, .55); }
.lnk { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; font: 600 .9375rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; padding-top: 3px; }

/* Hero: the neon wall full-bleed, the name in the logo's thin wide caps cutting across the photo's edge.
   Where "K-TEC" sits on the photo it turns blossom (the .ghost copy, clipped to the photo by site.js). */
.hero { position: relative; background: var(--blossom); overflow: hidden; padding-bottom: 48px; }
.hero-photo { position: relative; height: min(57svh, 560px); }
.hero-photo .m-frame { position: absolute; inset: 0; }
.hero-photo img { object-position: 60% 42%; }
.shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(42, 36, 38, 0) 58%, rgba(42, 36, 38, .58)); }
.hero-text { position: relative; z-index: 2; }
.name { position: relative; font-size: clamp(4.4rem, 24vw, 10rem); margin-top: -.4em; }
.hero h1 { font: 300 1em/.86 var(--display); letter-spacing: .04em; color: var(--ink); }
.hero h1 .k, .hero .ghost { display: block; white-space: nowrap; }
.hero h1 .sub { display: block; font: italic 400 .3em/1.15 var(--text); letter-spacing: 0; margin-top: .2em; }
.ghost { position: absolute; left: 0; top: 0; color: var(--blossom); pointer-events: none; visibility: hidden; }
.hero .ghost { font: 300 1em/.86 var(--display); letter-spacing: .04em; }
.ghost.is-cut { visibility: visible; }
.hero .l { display: inline-block; clip-path: inset(-.5em -.3em 0 -.3em); }
.hero .l > span { display: inline-block; }
.hero .line { font-size: 1.0625rem; margin: 12px 0 20px; max-width: 36ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* Entrance, like the sign switching on: the photo brightens and settles, K-TEC rises letter by letter, then
   "Nails Bar", the line and the actions. Pure CSS, so it plays without the script; the photo is never hidden. */
@media (prefers-reduced-motion: no-preference) {
  .hero-photo .m-frame { animation: k-flick .8s linear both, k-settle 1.6s var(--m-ease) both; }
  .hero .l > span { animation: k-rise 1.1s var(--m-ease) 600ms both; }
  .hero .l:nth-child(2) > span { animation-delay: 670ms; }
  .hero .l:nth-child(3) > span { animation-delay: 740ms; }
  .hero .l:nth-child(4) > span { animation-delay: 810ms; }
  .hero .l:nth-child(5) > span { animation-delay: 880ms; }
  .hero h1 .sub { animation: k-fade 1s var(--m-ease) 1000ms both; }
  .hero .line { animation: k-fade .9s var(--m-ease) 1150ms both; }
  .hero .actions { animation: k-fade .9s var(--m-ease) 1250ms both; }
}
/* The sign switching on: dark until 300 ms, a hard flicker (full for 60 ms, half for 80 ms), then up to full by 800 ms */
@keyframes k-flick {
  0% { filter: brightness(.45) saturate(.7); animation-timing-function: step-end; }
  37.5% { filter: brightness(1) saturate(1); animation-timing-function: step-end; }
  45% { filter: brightness(.5) saturate(.75); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  100% { filter: none; }
}
@keyframes k-settle { from { scale: 1.06; } }
@keyframes k-rise { from { transform: translate3d(0, 105%, 0); } }
@keyframes k-fade { from { opacity: 0; transform: translate3d(0, 14px, 0); } }

/* Services: a numbered index; a row's work photo shows on hover (desktop) or opens under it on tap (phone) */
.services { padding: var(--sec) 0; background: var(--blossom); }
.svc ol { list-style: none; padding: 0; border-top: 1px solid var(--ink); }
/* Columns never move: the open row only turns its numeral and arrow pink and gains a pink top rule. */
.svc ol li { position: relative; }
.svc li > a, .svc li > .row { display: grid; grid-template-columns: 3rem 1fr 1.5rem; align-items: baseline; gap: 12px; padding: 15px 0 13px; border-bottom: 1px solid var(--rule); text-decoration: none; }
.svc li > a { -webkit-tap-highlight-color: transparent; }
.svc li > a::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--neon); scale: 0 1; transform-origin: left; transition: scale .6s var(--m-ease); }
.svc li > a.is-active::before { scale: 1 1; }
.svc .no { font: 600 .875rem/1 var(--display); letter-spacing: .1em; color: var(--muted); font-variant-numeric: tabular-nums; transition: color .3s; }
.svc li > a .no { color: var(--neon); }
.svc .nm { font: 400 clamp(1.5rem, 6.4vw, 2.125rem)/1.1 var(--display); letter-spacing: .02em; padding-top: 4px; }
.svc .nm small { display: block; font: 400 1.0625rem/1.5 var(--text); letter-spacing: 0; color: var(--muted); margin-top: 8px; max-width: 30rem; text-wrap: pretty; }
.svc .go { font: 400 1.25rem/1 var(--display); color: var(--muted); transition: color .3s, translate .5s var(--m-ease); }
.svc li > a.is-active .go, .svc li > a:hover .go { color: var(--neon); }
.preview-fig { aspect-ratio: 4 / 5; background: var(--blossom-2); margin-top: 32px; }
.services { padding-bottom: 72px; }
.svc .credits { margin-top: 20px; }

/* Photo credits: always the same, small italic, under the photo or the set */
.credits { display: block; font: italic 400 .8125rem/1.4 var(--text); color: rgba(42, 36, 38, .66); text-wrap: balance; }
.br-ph { display: none; }
@media (max-width: 599px) { .br-ph { display: inline; } }

/* The salon: the pedicure chairs under the chandelier against a charcoal panel of ruled facts */
.salon { background: var(--ink); color: var(--on-dark); }
.salon-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.salon-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.salon-panel { padding: 64px var(--gutter) 56px; }
.salon .rule { background: var(--glow); }
.salon .lede { font-size: 1.25rem; line-height: 1.5; max-width: 34ch; margin-bottom: 32px; }
.facts > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 16px; padding: 16px 0 14px; border-top: 1px solid var(--rule-dark); }
.facts > div:last-child { border-bottom: 1px solid var(--rule-dark); }
.facts dt { font: 600 .8125rem/1.6 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--glow); padding-top: 3px; }
.facts dd { font-size: 1.0625rem; }

/* Nail art: a lookbook. One lead set, the heading cut across its top edge the way K-TEC crosses the hero photo,
   then two portrait sets side by side and one wide set under them, all in one light warm grade. */
.art { --art-h: clamp(3.5rem, 17vw, 7.5rem); background: var(--paper); padding: var(--sec) 0 56px; }
.art .head { position: relative; z-index: 2; margin-bottom: 0; }
.art .head h2, .art .ghost { font: 300 var(--art-h)/1 var(--display); letter-spacing: .07em; text-transform: uppercase; padding-top: .08em; white-space: nowrap; }
.art .ghost { top: auto; bottom: 0; }
.look { position: relative; z-index: 1; margin-top: calc(var(--art-h) * -.5); }
.tile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--blossom-2); }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.lead img { object-position: 50% 40%; }
/* The sets wipe in upward, one after another */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html.m-on .tile[data-reveal="mask"]:not(.is-in) { clip-path: inset(100% 0 0 0); }
}
/* The hero's shade, so the blossom half of NAIL ART reads on the light photo */
.lead::after { content: ""; position: absolute; inset: 0 0 auto; height: 140px; background: linear-gradient(rgba(42, 36, 38, .55), rgba(42, 36, 38, 0)); pointer-events: none; }
.rest { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.tile.wide { grid-column: 1 / -1; aspect-ratio: 8 / 5; }
.art-foot { margin-top: 24px; }
.art-foot a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.art-foot a:hover { color: var(--neon); }

/* Proof: one statement on a field of the sign's own pink */
.proof { background: var(--neon); color: #fff; padding: 64px 0; }
.proof .big { font: 200 clamp(3.5rem, 19vw, 9.5rem)/.95 var(--display); letter-spacing: .05em; text-transform: uppercase; padding-top: .08em; color: var(--blossom); }
.proof .big .n, .proof .big .g { display: block; }
.proof .big .n { font-size: 2.8em; line-height: .9; }
.proof .big .g { white-space: nowrap; }
@media (max-width: 899px) { .proof .big { font-size: clamp(2.5rem, 11.5vw, 5rem); } }
.proof .from { margin-top: 24px; font: 600 .9375rem/1.6 var(--display); letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.proof .from a { color: #fff; }
.proof .from > span { display: block; }
.proof .from a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.proof :focus-visible { outline-color: #fff; }

/* Visit: the week as a timetable on charcoal, today lit in blossom */
.visit { background: var(--blossom); color: var(--ink); padding: var(--sec) 0; }
.visit .status { font: 600 .875rem/1.6 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--neon); margin-bottom: 28px; }
.visit .status .state { color: var(--ink); }
@media (max-width: 599px) { .visit .status .state, .visit .status .when { display: block; } .visit .status .sep { display: none; } }
.addr { font-size: 1.25rem; line-height: 1.45; }
.addr a { text-decoration: none; }
.addr small { display: block; margin-top: 6px; font-size: 1rem; color: var(--muted); }
.phone { margin-top: 24px; }
.phone a { font: 300 clamp(2rem, 9.4vw, 3.25rem)/1.1 var(--display); letter-spacing: .04em; white-space: nowrap; text-decoration: none; display: inline-block; padding-top: .1em; }
.visit .links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 20px; }
.hours { margin: 48px 0 0; padding: 24px 20px; background: var(--ink); color: var(--on-dark); }
.hours .label { color: var(--on-dark-2); margin-bottom: 16px; }
.tt > div { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; padding: 14px 10px 11px; margin-inline: -10px; border-bottom: 1px solid var(--rule-dark); transition: background-color .4s; }
.tt > div:first-child { border-top: 1px solid var(--rule-dark); }
.tt dt { font: 400 1.25rem/1.1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--glow); }
.tt dd { font: 300 1.25rem/1.1 var(--display); letter-spacing: .06em; white-space: nowrap; color: var(--blossom); }
.tt > div.is-today { background: var(--blossom); color: var(--ink); border-color: transparent; }
.tt > div.is-today dd { color: var(--ink); }
.tt > div.is-today dt { color: var(--neon); font-weight: 600; }

/* Footer */
.foot { background: var(--ink-2); color: var(--on-dark); padding: 72px 0 40px; }
.sign { font: 300 clamp(4rem, 22vw, 9rem)/.9 var(--display); letter-spacing: .05em; color: var(--glow); padding-top: .08em; }
.sign a { text-decoration: none; display: inline-block; }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; margin-top: 48px; font-size: 1rem; line-height: 1.6; }
.foot-cols .label { color: var(--on-dark-2); margin-bottom: 8px; font-size: .75rem; }
.foot-cols a { text-decoration: none; display: inline-block; padding-block: 4px; }
.foot-bottom { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--rule-dark); font-size: .9375rem; color: var(--on-dark-2); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.foot-links a, .foot-small a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.foot-small { display: flex; flex-wrap: wrap; align-items: center; }
.foot-mark { width: 40px; margin-right: 14px; }
.foot-small .sep { padding-inline: 10px; }

/* Phone action bar: tucked away in the static CSS (no flash on load) until the hero's buttons scroll off */
.actionbar { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--ink); border-top: 1px solid rgba(255, 255, 255, .12); padding-bottom: env(safe-area-inset-bottom); }
.actionbar:not(.is-shown) { translate: 0 calc(100% + 24px); }
html:not(.m-on) .actionbar { animation: k-bar 0s 1.8s forwards; }
@media (scripting: none) { .actionbar:not(.is-shown) { translate: none; } }
@keyframes k-bar { to { translate: none; } }
.actionbar a { display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 3px 6px 0; color: #fff; text-decoration: none; font: 600 .875rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; --m-fill: rgba(196, 42, 114, .6); }
.actionbar a + a { border-left: 1px solid rgba(255, 255, 255, .14); }

@media (min-width: 600px) {
  :root { --gutter: 32px; }
  .hdr-call .short { display: none; }
  .hdr-call .long { display: inline; }
  .foot-cols { grid-template-columns: repeat(4, auto); justify-content: start; gap: 24px 56px; }
}

@media (min-width: 900px) {
  :root { --gutter: 48px; --sec: 136px; }
  body { font-size: 1.125rem; padding-bottom: 0; }
  header.site .bar { height: 76px; }
  .brand img { width: 50px; }
  .nav { display: flex; gap: 36px; margin-left: auto; }
  .nav a { font: 600 .875rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding: 16px 0 13px; }
  .hdr-call { padding-left: 36px; border-left: 1px solid var(--rule); }

  .hero { display: flex; align-items: flex-end; min-height: min(calc(100svh - 106px), 860px); padding: 0; }
  .hero-photo { position: absolute; top: 0; bottom: 0; left: 42%; right: 0; height: auto; }
  .hero-photo img { object-position: 45% 50%; }
  .shade { background: linear-gradient(to right, rgba(42, 36, 38, .5), rgba(42, 36, 38, 0) 36%); }
  .hero-text { padding: 120px 0 96px; }
  .name { font-size: clamp(7rem, 15.5vw, 14.5rem); margin-top: 0; }
  .hero .line { font-size: 1.1875rem; margin: 28px 0 40px; max-width: min(28rem, calc(42vw - 64px)); text-wrap: balance; }

  /* The work photo is a fixed 4:5 box that travels down beside the list, its credit right under it */
  .svc { display: grid; grid-template-columns: 1fr 1fr; column-gap: 96px; }
  .svc .head { grid-column: 1; grid-row: 1; }
  .svc ol { grid-column: 1; grid-row: 2; }
  .pv-col { grid-column: 2; grid-row: 2; }
  .svc .nm small { font-size: 1.0625rem; }
  .pv-col { position: sticky; top: 120px; align-self: start; justify-self: end; width: min(100%, 480px); }
  .preview-fig { margin-top: 0; }
  .svc .credits { margin-top: 12px; }

  .salon-split { display: grid; grid-template-columns: min(50%, 720px) 1fr; align-items: center; }
  .salon-photo { aspect-ratio: 846 / 720; }
  .salon-panel { padding: 64px var(--gutter) 64px 80px; max-width: 700px; }
  .salon .lede { font-size: 1.375rem; }
  .facts dd { font-size: 1.125rem; }

  .art { --art-h: clamp(5rem, 8vw, 7.5rem); padding-bottom: 72px; }
  .look { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .lead { aspect-ratio: auto; }
  .lead img { position: absolute; inset: 0; }
  .lead::after { height: 180px; }
  .rest { margin-top: 0; }
  .art-foot { margin-top: 28px; }

  .proof { padding: 128px 0 112px; }
  .services { padding-bottom: var(--sec); }
  .proof-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
  .proof .big { font-size: clamp(4rem, 6.6vw, 7rem); white-space: nowrap; }
  .proof .big .n, .proof .big .g { display: inline; }
  .proof .big .n { font-size: 1em; }
  .proof .from { margin: 0 0 6px; text-align: right; }

  /* The heading spans both columns; the left column starts on the Hours label line and ends with its content */
  .visit-grid { display: grid; grid-template-columns: 5fr 6fr; column-gap: 120px; align-items: start; }
  .visit-grid > .head { grid-column: 1 / -1; }
  .where .status { margin-bottom: 32px; line-height: 1.2; }
  .where .phone { margin-top: 40px; }
  .where .phone a { font-size: 3.5rem; }
  .where .links { margin-top: 32px; }
  .hours { margin: 0; padding: 40px 48px 36px; }
  .where { padding-block: 40px 36px; }
  .hours .label { line-height: 1.2; margin-bottom: 20px; }
  .tt dt, .tt dd { font-size: 1.5rem; }
  .tt > div { padding-block: 18px 15px; }

  .foot { padding: 96px 0 40px; }
  .sign { font-size: 9vw; }
  .foot-cols { margin-top: 56px; justify-content: space-between; }
  .foot-bottom { display: flex; justify-content: space-between; align-items: center; }
  .actionbar { display: none; }
}
@media (max-width: 599px) {
  .foot-cols > p:nth-child(-n+2) { grid-column: 1 / -1; }
  .foot-small .sep { display: none; }
  .foot-small a { flex-basis: 100%; }
  .hero .line { line-height: 1.55; }
  .hero .actions { flex-wrap: nowrap; gap: 20px; }
  .hero .btn { padding-inline: 22px; }
  .hero .actions .lnk { letter-spacing: .12em; white-space: nowrap; }
  .hero { padding-bottom: 40px; }
  /* Services: a tighter index on phones */
  .svc li > a, .svc li > .row { grid-template-columns: 2.25rem 1fr 1.25rem; gap: 10px; padding: 12px 0 10px; }
  .svc .nm { font-size: 1.4375rem; }
  .svc .nm small { margin-top: 4px; line-height: 1.45; }
  .preview-fig { margin-top: 16px; }
  /* Salon facts: the label over its value, so every value sits on one line */
  .facts > div { grid-template-columns: 1fr; gap: 2px; padding: 14px 0 12px; }
  .salon-panel { padding-bottom: 48px; }
}

/* 404 */
.lost { background: var(--blossom); padding: 72px 0 96px; }
.lost-no { font: 200 clamp(6rem, 34vw, 16rem)/.9 var(--display); letter-spacing: .04em; color: var(--neon); margin-bottom: 24px; }
.lost h1 { font: 300 clamp(2.5rem, 10vw, 4rem)/1 var(--display); letter-spacing: .07em; text-transform: uppercase; padding-top: .08em; }
.lost-line { max-width: 40ch; margin-bottom: 28px; }
@media (min-width: 900px) { .lost { padding: 136px 0 160px; } }
@media (max-width: 599px) { .tt > div { margin-inline: 0; } .visit { padding-bottom: 56px; } }
@media (max-width: 400px) {
  .actionbar a { letter-spacing: .08em; font-size: .8125rem; }
  .hours { padding-inline: 16px; }
  .tt > div { padding-inline: 8px; gap: 12px; }
  .tt dt, .tt dd { font-size: 1.125rem; }
  .tt dt { letter-spacing: .08em; }
}
@media (max-width: 374px) { .tt dt, .tt dd { font-size: 1rem; } }
.tt > div.is-today { transition: none; }
.tt > div.is-today dd { color: #2A2426; transition: none; }
@media (max-width: 899px) {
  .svc [data-preview-target].m-inline { aspect-ratio: 4 / 5 !important; width: 100vw !important; margin: 16px calc(50% - 50vw) 14px !important; }
}
@media (min-width: 900px) {
  .pv-col { width: min(100%, 450px); }
  .visit-grid > .where { align-self: center; }
}
.art-foot .credits { margin-top: 8px; }
/* Acrylic preview: a landscape crop on phones, the 4:5 crop in the desktop box */
[data-preview-target] > picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) {
  .svc [data-preview-target].m-inline:has(> .is-active[data-key="acrylic"]) { aspect-ratio: 5 / 4 !important; }
  .services { padding-top: 64px; }
  .svc .head { margin-bottom: 24px; }
  .svc .nm small { font-size: 1rem; }
  .art-foot .lead-in { display: none; }
}
.tt > div.is-today { will-change: transform; }
.tt > div.is-today dd { font-weight: 400; }
/* Round 9: the lilac wide tile, the chrome lead's edges, Services index beside its photo, a fuller Visit column */
.tile.wide img { object-position: 50% 40%; }
@media (max-width: 899px) { .lead img { scale: 1.04; transform-origin: 45% 45%; } }
@media (min-width: 900px) {
  .lead img { object-position: 46% 42%; }
  .svc { grid-template-columns: minmax(0, 1fr) min(450px, 42%); column-gap: clamp(48px, 6vw, 96px); }
  .pv-col { justify-self: start; width: 100%; }
  .addr { font-size: 1.375rem; }
  .where .status { margin-bottom: 40px; }
  .where .phone a { font-size: clamp(3.5rem, 4.4vw, 4.5rem); }
}
/* Phones: the open Gel preview is landscape too, cropped to the nails (the lower half of the 4:5 file is knuckles) */
@media (max-width: 899px) {
  .svc [data-preview-target].m-inline:has(> .is-active[data-key="gel"]) { aspect-ratio: 5 / 4 !important; }
  .svc [data-preview-target] > img[data-key="gel"] { object-position: 50% 4%; }
}
/* Round 10: Gel opens on a landscape nail-band crop on both screens; chrome and lilac edges; Visit columns end together */
.svc [data-preview-target] > img[data-key="gel"] { object-position: 50% 50%; }
@media (min-width: 900px) {
  .preview-fig:has(> .is-active[data-key="gel"]) { aspect-ratio: 5 / 4; }
  .lead img { scale: 1.04; transform-origin: 45% 40%; }
  .tile.wide { aspect-ratio: 16 / 9; }
  .tile.wide img { object-position: 50% 25%; }
  .visit-grid > .where { align-self: stretch; display: flex; flex-direction: column; }
  .where .links { margin-top: auto; padding-top: 32px; }
  .salon-split { grid-template-columns: min(560px, 40%) 1fr; }
  .salon-panel { max-width: 46rem; }
}