/* Nail Image 26 — "Twenty-six": espresso, logo rose and the gold 26. Gold is only ever a figure. Phones first. */
:root {
  --night: #181212; --night2: #231A1A; --line-d: #3A2D2C;
  --rose: #E29F9B; --rose-l: #F3C9C5; --deep: #9E4F4C; --deep-d: #864240;
  --gold: #B08442; --gold-d: #8A5F27;
  --paper: #FBF5F3; --blush: #F4E1DD; --line-l: #E2CBC6; --ink: #181212; --mute-l: #5F4B48; --text-d: #EADDDA; --mute-d: #BFAEAB;
  --display: 'Prata', Georgia, 'Times New Roman', serif;
  --text: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pad: 20px; --max: 1240px; --head: 64px;
  --m-dur: .85s; --m-rise: 26px;
}
@media (max-width: 719px) { :root { --m-dur: .7s; --m-rise: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; font-family: var(--text); font-size: 17px; line-height: 1.6; color: var(--text-d); background: var(--night); }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.wrap { width: 100%; max-width: calc(var(--max) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 12px 16px; background: var(--rose); color: var(--night); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* Type roles: display (Prata), heading (Prata), body, label */
.label { font-family: var(--text); font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.5; }
h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.5rem, 9vw, 3.5rem); line-height: 1.04; letter-spacing: -.005em; }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; background: var(--rose); color: var(--night); font-weight: 600; font-size: 1.0625rem; text-decoration: none; --m-fill: var(--rose-l); }
.btn:active { background: var(--rose-l); }
.more { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 600; background-size: 100% 1px; background-image: linear-gradient(var(--gold), var(--gold)); background-position: 0 calc(100% - 10px); background-repeat: no-repeat; }
.more:hover, .more:focus-visible { background-image: linear-gradient(var(--rose), var(--rose)); }

/* ---------- header ---------- */
.top { position: fixed; z-index: 30; inset: 0 0 auto 0; height: var(--head); background: var(--night); border-bottom: 1px solid transparent; }
.top.is-scrolled { border-bottom-color: var(--line-d); }
.top .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: block; padding: 6px 0; }
.brand img { width: 92px; }
.nav { display: none; }
.topcall { color: var(--rose); font-weight: 600; font-size: 1rem; padding: 12px 0; background-size: 100% 1px; background-position: 0 calc(100% - 8px); }

/* ---------- hero ---------- */
.hero { position: relative; padding-top: var(--head); background: var(--night); overflow: hidden; }
.hero-photos { display: grid; grid-template-rows: 61fr 39fr; gap: 3px; height: clamp(290px, 41svh, 410px); }
.hero-photos .m-frame { height: 100%; min-height: 0; }
.hero-photos img { width: 100%; height: 100%; object-fit: cover; }
.hero-photos picture, .set picture { display: block; height: 100%; }
.ph-main img { object-position: 50% 78%; }
.ph-side img { object-position: 50% 72%; }
.hero-copy { position: relative; z-index: 2; padding: 0 var(--pad) 40px; }
.name { display: flex; align-items: last baseline; justify-content: space-between; gap: 8px; font-family: var(--display); font-weight: 400; color: var(--paper); }
.name .nm { display: block; font-size: clamp(2.75rem, 12.6vw, 3.6rem); line-height: .96; letter-spacing: .015em; text-transform: uppercase; padding-bottom: .06em; }
.name .num { display: block; font-size: clamp(8rem, 37vw, 11rem); line-height: .72; letter-spacing: -.045em; color: var(--gold); margin-right: -.02em; transform-origin: 70% 80%; }
.hero-more { margin-top: 18px; }
.lede { max-width: 34ch; color: var(--text-d); font-size: 1.0625rem; line-height: 1.55; }
.actions { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
/* Entrance in beats: the main photo unmasks upward (0-700ms), the red tips wipe down (250ms), NAIL IMAGE rises by
   word (400ms), the gold 26 settles last (900ms), then the line and the actions (1200ms). */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .hero { --m-word: 80ms; }
  .ph-main[data-reveal] { clip-path: inset(40% 0 0 0); scale: 1.06; transition: clip-path .5s cubic-bezier(.2, .7, 0, 1), scale 1.2s cubic-bezier(.2, .7, 0, 1); }
  .ph-main[data-reveal].is-in { clip-path: inset(0); scale: 1; }
  /* Desktop: the whole column width from frame 0, opening downward. */
  @media (min-width: 900px) {
    .ph-main[data-reveal] { clip-path: inset(0 0 40% 0); transition-duration: .45s, 1.2s; }
    /* The red tips wipe down quickly after it, complete by ~650ms. */
    .ph-side[data-reveal] { transition-duration: .45s; transition-timing-function: cubic-bezier(.2, .7, 0, 1); }
  }
  .name .nm[data-reveal] .m-wi { transform: translate3d(0, 24px, 0); opacity: 0; transition: transform .6s var(--m-ease) calc(var(--d, 0ms) + var(--i, 0) * var(--m-word)), opacity .6s ease calc(var(--d, 0ms) + var(--i, 0) * var(--m-word)); }
  .name .nm[data-reveal].is-in .m-wi { transform: none; opacity: 1; }
  .name .num[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity .7s ease var(--d, 0ms), transform .7s cubic-bezier(.2, .7, 0, 1) var(--d, 0ms); }
  .name .num[data-reveal].is-in { opacity: 1; transform: none; }
}

/* ---------- new ownership ---------- */
.news { background: var(--blush); color: var(--ink); padding: 80px 0 84px; }
.news .label { color: var(--deep); }
.statement { font-size: clamp(2rem, 8.4vw, 5.25rem); line-height: 1.08; letter-spacing: -.01em; }
.statement .ln, .statement em { white-space: nowrap; }
.statement .ln { display: block; }
.statement em { display: block; font-style: normal; color: var(--deep); }
.formerly { margin-top: 32px; padding-top: 16px; border-top: 1px solid #D7B9B3; color: var(--mute-l); letter-spacing: .14em; }
.formerly span { display: block; }
.formerly .sep { display: none; }

/* ---------- services: the numbered index ---------- */
.services { background: var(--paper); color: var(--ink); padding: 84px 0 72px; }
.services .wrap { display: flex; flex-direction: column; }
.svc-head { display: contents; }
.index { margin-top: 32px; border-top: 1px solid var(--ink); }
.index li { display: grid; grid-template-columns: 2.6rem 1fr; align-items: baseline; column-gap: 8px; padding: 16px 0 17px; border-bottom: 1px solid var(--line-l); }
.index .n { font-size: .9375rem; font-weight: 600; color: var(--gold-d); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.index .s { font-family: var(--display); font-size: clamp(1.75rem, 7.4vw, 2.75rem); line-height: 1.12; }
.index .d { grid-column: 2; margin-top: 6px; color: var(--mute-l); font-size: .9375rem; line-height: 1.4; }
.prices { order: 3; margin-top: 24px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mute-l); }
.prices a { font-size: 1.0625rem; letter-spacing: .02em; text-transform: none; color: var(--deep); padding: 10px 0; background-size: 100% 1px; background-position: 0 calc(100% - 6px); }

/* ---------- recent sets: a run of hard nail crops, numbered like the 26 ---------- */
.sets { background: var(--night); padding: 84px 0 64px; }
.sets h2 { color: var(--paper); }
.run { width: 100%; max-width: calc(var(--max) + var(--pad) * 2); margin: 40px auto 0; padding: 0 var(--pad); display: grid; gap: 56px; overflow-x: clip; }
.set { margin: 0; }
/* The hero's move again: a big gold Prata figure whose baseline crosses into the top of its photo. */
.set .no { position: relative; z-index: 2; margin-bottom: -.25em; font-family: var(--display); font-size: 5.5rem; line-height: .8; letter-spacing: -.03em; color: var(--gold); pointer-events: none; }
.set .m-frame img { width: 100%; height: 100%; object-fit: cover; }
/* Phones: 01 a full-bleed square, 02 a portrait set right (200px: the crop is 370px wide), 03 bleeding off the left
   (240px frame from a 480px crop). */
.set-1 .m-frame { margin-inline: calc(var(--pad) * -1); aspect-ratio: 1 / 1; }
.set-1 img { object-position: 58% 52%; }
.set-2 { width: min(200px, 56%); margin-left: auto; }
.set-2 .m-frame { aspect-ratio: 4 / 5; }
.set-2 img { object-position: 50% 45%; }
.set-3 { width: min(220px, 58%); }
.set-3 .m-frame { margin-left: calc(var(--pad) * -1); aspect-ratio: 4 / 3; }
.set-3 img { object-position: 50% 60%; }
.credit { margin-top: 8px; font-size: .75rem; line-height: 1.4; color: #A99A97; }

/* ---------- reviews: the deep rose band ---------- */
.reviews { background: var(--deep); color: var(--paper); padding: 84px 0 52px; }
.rev-head h2 { color: var(--paper); }
.score { margin-top: 46px; display: flex; align-items: flex-end; gap: 18px; }
.score .big { font-family: var(--display); font-size: clamp(6.5rem, 34vw, 10rem); line-height: .78; letter-spacing: -.04em; }
.score .label { padding-bottom: 6px; color: var(--paper); }
.quotes { margin-top: 44px; }
.quotes li { padding: 22px 0 40px; border-top: 1px solid rgba(251, 245, 243, .38); }
.quotes blockquote p { font-family: var(--display); font-size: 1.1875rem; line-height: 1.45; }
.who { margin-top: 16px; font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--rose-l); }
.rev-more { margin-top: -8px; }
.rev-more a { display: inline-flex; gap: 8px; align-items: center; min-height: 48px; font-weight: 600; }

/* ---------- visit: the timetable ---------- */
.visit { background: var(--night); padding: 84px 0 64px; }
.visit .label { color: var(--rose); }
.visit-info h2 { color: var(--paper); }
.visit-top { padding-bottom: 10px; border-bottom: 1px solid var(--line-d); }
.bigphone { display: inline-block; margin-top: 26px; font-family: var(--display); font-size: clamp(2.9rem, 13.4vw, 5.25rem); line-height: 1; letter-spacing: -.01em; color: var(--rose); text-decoration: none; padding: 4px 0 0; transition: color .3s ease; }
.bigphone:hover, .bigphone:focus-visible { color: var(--rose-l); }
.where-h { display: none; }
.addr { margin-top: 22px; font-size: 1.125rem; line-height: 1.5; }
.addr a { color: var(--paper); padding: 4px 0; }
.dir { margin-top: 12px; }
.dir a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--rose); font-size: 1rem; font-weight: 600; background-size: 100% 1px; background-image: linear-gradient(var(--rose), var(--rose)); background-position: 0 calc(100% - 10px); background-repeat: no-repeat; }
.facts { margin-top: 22px; }
.facts li { padding: 9px 0; border-top: 1px solid var(--line-d); font-size: .75rem; font-weight: 600; letter-spacing: .12em; white-space: nowrap; text-transform: uppercase; color: var(--mute-d); }
.visit-hours { margin-top: 56px; }
.visit-hours .label { color: var(--rose); }
.table { margin-top: 14px; border-top: 1px solid var(--line-d); }
.table li { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0 12px; border-bottom: 1px solid var(--line-d); }
.table .d { font-family: var(--display); font-size: clamp(1.75rem, 8vw, 2.5rem); line-height: 1.1; text-transform: uppercase; letter-spacing: .06em; color: var(--paper); }
.table .t { letter-spacing: 0; color: var(--text-d); white-space: nowrap; }
.table li.off .d, .table li.off .t { color: #8F7A77; }
.table li.is-today { border-bottom-color: var(--gold); }
.table li.is-today::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); }
.table li.is-today .d { color: var(--rose); }
.table .today { display: inline-block; margin-right: 12px; font-family: var(--text); font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--rose-l); }

/* ---------- footer ---------- */
.foot { background: var(--night); color: var(--mute-d); padding: 0 0 calc(96px + env(safe-area-inset-bottom)); }
.foot-top { border-top: 1px solid var(--gold); padding-top: 48px; }
.foot-logo { display: inline-block; }
.foot-logo img { width: 150px; }
.foot-cols { margin-top: 28px; display: grid; gap: 16px; font-size: 1rem; line-height: 1.55; }
.foot-cols a { color: var(--text-d); padding: 4px 0; }
.foot-base { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-d); display: grid; gap: 10px; font-size: .9375rem; }
.legal-links { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.foot-base a { display: inline-block; padding: 10px 0; color: var(--text-d); }

/* ---------- phone action bar ---------- */
.actionbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1.3fr 1fr 1fr; background: var(--night); border-top: 1px solid var(--line-d); padding-bottom: env(safe-area-inset-bottom); }
.actionbar a { display: flex; align-items: center; justify-content: center; min-height: 56px; color: var(--paper); font-weight: 600; text-decoration: none; --m-fill: rgba(243, 201, 197, .14); }
.actionbar a + a { border-left: 1px solid var(--line-d); }
.actionbar .call { background: var(--rose); color: var(--night); --m-fill: var(--rose-l); }

/* ---------- 404 ---------- */
.lost { min-height: 100svh; padding: calc(var(--head) + 72px) 0 96px; display: flex; align-items: center; }
.lost .num { font-family: var(--display); font-size: clamp(7rem, 36vw, 15rem); line-height: .8; letter-spacing: -.04em; color: var(--gold); }
.lost h1 { margin-top: 20px; font-family: var(--display); font-weight: 400; font-size: clamp(2.5rem, 9vw, 4rem); line-height: 1.05; color: var(--paper); }
.lost p:not(.num):not(.actions) { margin-top: 14px; max-width: 36ch; }

/* ---------- tablet and up ---------- */
@media (min-width: 720px) {
  :root { --pad: 40px; }
  .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
  .foot-cols { grid-template-columns: repeat(3, auto); justify-content: start; gap: 16px 56px; }
  .foot-base { grid-template-columns: 1fr auto auto; align-items: center; gap: 10px 40px; }
}
@media (min-width: 760px) { .actionbar { display: none; } .foot { padding-bottom: 32px; } }

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  :root { --pad: 48px; --head: 84px; }
  body { font-size: 18px; }
  .brand img { width: 128px; }
  .nav { display: flex; gap: 36px; margin-left: auto; margin-right: 20px; }
  .nav a { color: var(--text-d); font-size: .9375rem; font-weight: 500; padding: 12px 0; background-size: 0 1px; background-position: 0 calc(100% - 8px); }
  .nav a:hover { background-size: 100% 1px; }
  .top .wrap { justify-content: flex-start; }
  .top.is-scrolled { border-bottom-color: var(--line-d); }
  .top { border-bottom-color: rgba(243, 201, 197, .14); }

  /* The phone's composition at width: the two photos edge to edge, the name under them, the 26 biting into them. */
  .hero-photos { height: 520px; grid-template-rows: none; grid-template-columns: 56fr 44fr; gap: 4px; }
  .ph-main img { object-position: 50% 75%; }
  .ph-side img { object-position: 50% 100%; }
  .hero-copy { max-width: calc(var(--max) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad) 40px; }
  /* The 26 finishes the name on its baseline, as in their logo; the whole line sits high enough for it to bite the photos. */
  .name { justify-content: flex-start; gap: clamp(16px, 1.9vw, 28px); margin-top: -12px; }
  .name .nm { font-size: clamp(4.5rem, 8vw, 8rem); white-space: nowrap; }
  .name .nm br { display: none; }
  .name .num { font-size: clamp(7.2rem, 12.8vw, 12.8rem); }
  /* Two halves: the lede under the coffin photo, the actions from the photo seam under the red tips and the 26. */
  .hero-more { margin-top: 4px; padding-top: 32px; border-top: 1px solid var(--line-d); display: grid; grid-template-columns: calc(56vw + 2px - max(var(--pad), (100vw - var(--max)) / 2)) 1fr; align-items: first baseline; }
  .lede { max-width: 620px; padding-right: 40px; font-size: 1.25rem; line-height: 1.5; }
  .actions { margin-top: 0; flex-wrap: nowrap; flex-shrink: 0; align-items: baseline; }

  .news { padding: 112px 0; }
  .news .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; }
  .statement { grid-column: 1 / 13; max-width: none; font-size: clamp(5rem, 7vw, 7.5rem); line-height: 1.02; }
  .formerly { grid-column: 1 / 13; margin-top: 48px; display: flex; gap: 0 14px; }
  .formerly .sep { display: block; }

  /* Head row across the container, then the index in two columns (01-04, 05-07). */
  .services { padding: 128px 0 136px; }
  /* The head row holds only 'Services'; the prices line fills the cell under 07. */
  .services .wrap { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto repeat(4, 122px); column-gap: 48px; }
  .svc-head { display: contents; }
  .svc-head h2 { grid-column: 1 / -1; grid-row: 1; padding-bottom: 24px; border-bottom: 1px solid var(--ink); }
  .index { grid-column: 1 / -1; grid-row: 2 / 6; margin-top: 0; border-top: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 122px); grid-auto-flow: column; column-gap: 48px; }
  .index .d { grid-column: 2; margin-top: 6px; font-size: .9375rem; }
  /* 01-04 left, 05-07 right, every row 122px, sharing hairlines across the gutter. */
  .index li { grid-template-columns: 4rem 1fr; align-content: start; min-height: 122px; column-gap: 16px; padding: 24px 0 16px; transition: padding .5s var(--m-ease), background-color .4s ease; }
  .svc-head h2 { font-size: clamp(5rem, 7vw, 7rem); line-height: .98; letter-spacing: -.015em; }
  .prices { grid-column: 2; grid-row: 5; align-self: start; margin-top: 0; padding-top: 24px; font-size: .9375rem; }

  .sets { padding: 144px 0 96px; }
  /* One edge-to-edge row of three crops; 01's figure keeps to the container edge, 02 and 03 sit just inside their frames.
     Frames 420px tall: the most the 360px-tall stiletto crop holds. Marble's column is narrowest (its crop is one hand, 370px wide). */
  .run { max-width: none; margin-top: 75px; padding: 0; grid-template-columns: 1.2fr .7fr 1.1fr; gap: 8px; overflow-x: visible; }
  .set { min-width: 0; }
  .set .no { font-size: clamp(6rem, 8vw, 8.5rem); padding-left: 24px; }
  .set .m-frame { height: 420px; margin-inline: 0; aspect-ratio: auto; }
  .set-1 .no { padding-left: max(var(--pad), calc((100vw - var(--max)) / 2)); }
  .set-1 img { object-position: 60% 40%; }
  .set-1 .credit { padding-left: max(var(--pad), calc((100vw - var(--max)) / 2)); }
  .set-2, .set-3 { width: auto; margin-left: 0; }
  .set-3 .m-frame { margin-left: 0; }
  .set-2 img { object-position: 50% 45%; }
  .set-3 img { object-position: 50% 60%; }

  .reviews { padding: 144px 0 96px; }
  .reviews .wrap { display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
  .rev-head { display: flex; align-items: baseline; gap: 56px; }
  .rev-more { grid-column: 2; grid-row: 1; margin-top: 0; }
  .quotes { grid-column: 1 / -1; }
  .quotes li { display: flex; flex-direction: column; }
  .who { margin-top: auto; padding-top: 20px; }
  .score { margin-top: 0; align-items: baseline; gap: 24px; }
  .score .big { font-size: 10rem; }
  .quotes { margin-top: 64px; gap: 0 40px; }
  .quotes blockquote p { font-size: 1.25rem; }

  .visit { padding: 144px 0 150px; }
  /* The number gets its own full-width row; address and hours share the row under it, top-aligned. */
  .visit .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
  .visit-info { display: contents; }
  .visit-top { grid-column: 1 / 13; border-bottom: 1px solid var(--line-d); padding-bottom: 8px; }
  .bigphone { margin-top: 20px; font-size: clamp(7rem, 11vw, 10rem); line-height: .95; letter-spacing: -.02em; border-bottom: 0; padding: 0 0 12px; }
  .visit-where { grid-column: 1 / 5; margin-top: 56px; position: sticky; top: 120px; }
  .dir { margin-top: 24px; }
  .where-h { display: block; }
  .addr { margin-top: 14px; font-size: 1.375rem; line-height: 1.45; }
  .facts { margin-top: 28px; }
  .visit-hours { grid-column: 6 / 13; margin-top: 56px; }
  .table li { padding: 16px 0 15px; }
  .table .d { font-size: clamp(2.25rem, 3.2vw, 3rem); }
  .table .t { font-size: 1.125rem; }

  .foot .wrap { padding-top: 64px; }
  .foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; }
  .foot-logo img { width: 170px; }
  .foot-cols { margin-top: 8px; }
}
@media (min-width: 900px) and (hover: hover) {
  .index li:hover { padding-left: 14px; }
}

/* ---------- policy pages (legal.mjs) on the espresso field ---------- */
main.legal.wrap { max-width: calc(760px + var(--pad) * 2); padding: calc(var(--head) + 56px) var(--pad) 96px; }
main.legal.wrap h1 { font-family: var(--display); color: var(--paper); }
main.legal.wrap h2 { font-family: var(--display); font-weight: 400; font-size: 1.625rem; color: var(--paper); }
main.legal.wrap .legal-date { color: var(--mute-d); }
main.legal.wrap a { color: var(--rose); }