/* Angel Nails: the gilded room. Ivory and marble grounds, ink type, gilt for the wordmark's "Nails", the numerals
   and the Call button, champagne only as 1px rules (the mirror trim) and the halo arcs. Bodoni Moda + Jost. */
:root {
  --ivory: #FAF6EE; --marble: #F1EBE0; --ink: #1F1B16; --gilt: #7A5A22; --gilt-deep: #5E4518;
  --champ: #C9A96E; --muted: #6B6153; --rule: #DED2BC; --rule-dark: #4A4237;
  --serif: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --sans: "Jost", "Futura", system-ui, sans-serif;
  --gut: max(20px, calc((100vw - 1240px) / 2));
  --head: 64px;
  --offer-fit: .103; --m-dur: 900ms; --m-ease: cubic-bezier(.22, .8, .2, 1); --m-rise: 16px; --m-word: 90ms;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
html.is-menu { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gilt); outline-offset: 3px; }
.wrap { width: min(1240px, 100% - 40px); margin-inline: auto; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.label { font: 500 .8125rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 12px 16px; background: var(--ink); color: var(--ivory); text-decoration: none; }
.skip:focus { top: 12px; }

/* the halo: an open hairline arc, like the halo over the sign's winged A */
.arc { display: block; width: 56px; height: auto; overflow: visible; }

/* every photo gets the same 1px champagne mirror trim, set just inside its edge */
.hero-photo, .pv-ph, .strip .ph { position: relative; }
.hero-photo::after, .pv-ph::after, .strip .ph::after {
  content: ""; position: absolute; inset: 10px; border: 1px solid rgba(201, 169, 110, .95); pointer-events: none; z-index: 2;
}

/* wordmark */
.wordmark { font: 500 1.5rem/1 var(--serif); font-variation-settings: "opsz" 11; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; }
.wordmark i { font-style: italic; color: var(--gilt); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; background: var(--gilt); color: #fff; text-decoration: none; font: 500 1rem/1 var(--sans); letter-spacing: .04em; --m-fill: rgba(31, 27, 22, .28); transition: background-color .3s ease; }
.btn:active { background: var(--gilt-deep); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn.light { background: var(--ivory); color: var(--ink); --m-fill: rgba(122, 90, 34, .14); }
.btn.light:focus-visible { outline-color: var(--ivory); }
.more { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; font: 500 1rem/1 var(--sans); letter-spacing: .04em; text-decoration: none; }

/* header */
.top { position: fixed; inset: 0 0 auto; z-index: 30; background: var(--ivory); border-bottom: 1px solid var(--rule); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--head); }
.top .wordmark { display: inline-block; line-height: 48px; }
.nav, .topcall { display: none; }
.menubtn { min-height: 48px; min-width: 64px; padding: 0 0 0 16px; margin-right: -2px; border: 0; background: none; cursor: pointer; text-align: right; color: var(--ink); }
.menubtn[aria-expanded="true"] { color: var(--gilt); }
body:not(:has(#sheet)) .menubtn { display: none; }

/* phone menu sheet */
.sheet { position: fixed; z-index: 29; inset: var(--head) 0 0; background: var(--ivory); padding: 40px 20px calc(40px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: space-between; opacity: 0; transition: opacity .4s var(--m-ease); overflow-y: auto; }
.sheet[hidden] { display: none; }
.sheet.is-open { opacity: 1; }
.sheet ol { border-top: 1px solid var(--champ); }
.sheet li { border-bottom: 1px solid var(--rule); }
.sheet a { display: flex; align-items: baseline; gap: 18px; padding: 18px 0; font: 500 2.5rem/1.1 var(--serif); letter-spacing: -.02em; text-decoration: none; }
.sheet a span { width: 2.2rem; font: italic 500 1.25rem/1 var(--serif); color: var(--gilt); }
.sheet-foot { color: var(--muted); margin-top: 32px; }

/* hero: the room, framed like a gilt mirror, with the name engraved below it */
.hero { padding-top: var(--head); background: var(--ivory); }
.hero-photo { height: 50svh; min-height: 330px; max-height: 560px; overflow: hidden; animation: hall-in .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 12% 50%; animation: hall-scale 1.2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes hall-in { from { clip-path: inset(0 0 60% 0); } to { clip-path: inset(0); } }
@keyframes hall-scale { from { transform: scale(1.06); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-photo, .hero-photo img { animation: none; } }
.hero-text { position: relative; padding: 14px 20px 0; }
.hero-base { position: relative; padding: 18px 20px 40px; }
/* the champagne rule under the hero draws in once the name has landed */
.hero-base::before { content: ""; position: absolute; top: 18px; left: 20px; right: 20px; height: 1px; background: var(--champ); transform-origin: 0 50%; }
.hero-arc { width: 1.15em; font-size: clamp(3.1rem, 14.6vw, 3.9rem); margin: 0 0 -.12em .02em; }
.hero h1 { font: 500 clamp(3.1rem, 14.6vw, 3.9rem)/1.02 var(--serif); letter-spacing: -.025em; white-space: nowrap; }
.hero h1, h2, .phone, .quote blockquote p, .sheet a { font-variation-settings: "opsz" 22; }
.hero h1 i { font-style: italic; color: var(--gilt); }
/* the entrance: the photo wipes open, "Angel" rises, then "Nails" slides in last and lands across the photo edge */
.hero h1 .w1, .hero h1 .w2 { display: inline-block; }
@keyframes name-rise { from { opacity: 0; transform: translate3d(0, .22em, 0); } }
@keyframes name-cross { from { opacity: 0; transform: translate3d(-32px, 0, 0); } }
@keyframes rule-draw { from { transform: scaleX(0); } }
@keyframes hero-up { from { opacity: 0; transform: translate3d(0, 12px, 0); } }
@keyframes hero-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .w1 { animation: name-rise .9s var(--m-ease) .25s both; }
  .hero h1 .w2 { animation: name-cross .9s cubic-bezier(.2, .7, .2, 1) .75s both; }
  .hero .line { animation: hero-up .7s cubic-bezier(.2, .7, .2, 1) 1s both; }
  .hero .actions { animation: hero-up .7s cubic-bezier(.2, .7, .2, 1) 1.12s both; }
  .hero-base .facts, .hero-base .hrs { animation: hero-up .7s cubic-bezier(.2, .7, .2, 1) 1.24s both; }
  .hero-base::before { animation: rule-draw .7s cubic-bezier(.2, .7, .2, 1) 1.3s both; }
  .hero-arc { animation: hero-fade .9s ease 1.3s both; }
}
.line { margin-top: 10px; font-size: 1.0625rem; color: var(--muted); max-width: 32ch; }
.line .ln { display: block; }
.actions { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.facts { padding-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 1rem; color: var(--muted); }
.facts b { font: italic 600 1.25rem/1 var(--serif); color: var(--gilt); margin-left: 4px; }
.facts .label { color: var(--ink); }
.facts .sep { display: none; width: 1px; height: 14px; background: var(--champ); align-self: center; }
.facts > span:last-child { flex-basis: 100%; }
.hrs { display: none; }

/* section heads: the numeral under its halo, then a plain label in Bodoni */
.num { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; font: italic 500 2.25rem/1 var(--serif); color: var(--gilt); }
.num .arc { width: 60px; }
h2 { font: 500 clamp(2.6rem, 11vw, 3.75rem)/1.04 var(--serif); letter-spacing: -.02em; margin-top: 16px; }
h2 .m-w { padding-bottom: .2em; margin-bottom: -.2em; }
/* the other openers: numeral and heading on one baseline (The work), or a tracked-caps label (Visit) */
.head-inline { display: flex; align-items: baseline; gap: 16px; }
.head-inline h2 { margin-top: 0; }
.num-inline { font: italic 500 2.125rem/1 var(--serif); color: var(--gilt); font-variation-settings: "opsz" 22; }

/* services: a menu card on marble */
.services { background: var(--marble); padding: 72px 0 48px; }
.head-row { display: flex; align-items: baseline; gap: 16px; }
.head-row h2 { margin-top: 0; }
.head-row .num { display: inline-block; font-size: 2.125rem; font-variation-settings: "opsz" 22; }
.head-row .num .arc { display: none; }
.services .grid { position: relative; display: grid; gap: 0; }
.pv-rule { display: none; }
.services .note { margin-top: 10px; font-size: 1rem; color: var(--muted); }
.menu { margin-top: 32px; border-top: 1px solid var(--ink); }
.menu li { border-bottom: 1px solid var(--rule); }
.row { display: grid; grid-template-columns: 2.6rem 1fr auto; column-gap: 8px; align-items: baseline; padding: 16px 0; }
.row .n { font: italic 500 1.25rem/1.3 var(--serif); color: var(--gilt); }
.row h3 { font: 500 1.875rem/1.15 var(--serif); letter-spacing: -.005em; transition: color .4s ease; }
.row h3 { grid-column: 2; }
.row p { grid-column: 2 / -1; margin-top: 4px; color: var(--muted); font-size: 1rem; line-height: 1.45; text-wrap: pretty; }
.row .n { grid-row: span 2; }
.see { grid-column: 3; grid-row: 1; align-self: center; justify-self: end; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: -6px 0; padding: 0; border: 0; background: none; cursor: pointer; font-size: .9375rem; color: var(--gilt); background: linear-gradient(var(--champ), var(--champ)) 0 calc(50% + .85em) / 100% 1px no-repeat; transition: background-size .5s var(--m-ease); -webkit-tap-highlight-color: transparent; }
.has-pv.is-open h3 { color: var(--gilt); }
.pv-open { position: relative; width: 100%; max-width: 320px; margin: 0 auto 24px; }
.pv-open img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 35%; outline: 1px solid rgba(201, 169, 110, .95); outline-offset: -10px; }
.pv-open .credit { margin-top: 8px; font-size: .8125rem; color: var(--muted); }
.pv { display: none; }
.pv-ph { aspect-ratio: 4 / 5; background: var(--rule); overflow: hidden; }
.pv-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.04; transition: opacity .7s var(--m-ease), scale 1.4s var(--m-ease); }
.pv-ph img.is-active { opacity: 1; scale: 1; }

/* the work: a drag strip that runs off the page edge */
.work { padding: 88px 0 44px; }
.work-head { margin-bottom: 32px; }
.statement { margin-top: 24px; font: 400 2.125rem/1.12 var(--serif); letter-spacing: -.02em; font-variation-settings: "opsz" 22; max-width: 15ch; text-wrap: balance; }
.nw { white-space: nowrap; }
.strip-nav { display: flex; align-items: center; gap: 24px; flex: none; }
.ctrl { display: none; gap: 8px; }
.ctrl button { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--champ); background: none; cursor: pointer; font-size: 1.125rem; transition: background-color .3s ease, color .3s ease; }
.ctrl button:hover:not(:disabled) { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.work .ctrl button:disabled { opacity: 1; color: rgba(31, 27, 22, .35); border-color: #D8CBB2; }
.strip { --m-item: auto; --m-gap: 12px; --m-pad: var(--gut); padding-inline: var(--gut); }
.strip figure { width: 78vw; }
.strip figure.wide { width: 88vw; }
.strip .ph { height: 97vw; max-height: 520px; overflow: hidden; }
.strip img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--m-ease); }
.strip-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; min-height: 24px; }
.strip-credit { font-size: .8125rem; color: var(--muted); }
.count { display: flex; align-items: center; flex: none; gap: 0; font: 500 .8125rem/1 var(--sans); letter-spacing: .12em; color: var(--ink); font-variant-numeric: tabular-nums; }
.count [data-count] { color: var(--gilt); margin-right: .35em; }
.prog { position: relative; width: 64px; height: 1px; margin-left: 18px; background: var(--rule); overflow: hidden; }
.prog i { position: absolute; inset: 0; background: var(--champ); transform-origin: 0 50%; transform: scaleX(.2); transition: transform .3s ease-out; }

/* new clients: one statement on the gilt field */
.offer { background: var(--gilt); color: #fff; padding: 88px 0 64px; }
.offer .label { color: #F3E6CB; }
.offer h2 { font: italic 600 min(21vw, 7.5rem)/1.12 var(--serif); letter-spacing: -.025em; margin-top: 18px; font-variation-settings: "opsz" 11; }
.offer h2 .m-w { padding: 0 .2em .22em; margin: 0 -.2em -.22em; }
.offer-row { margin-top: 22px; }
.offer-fact { font-size: 1.125rem; color: rgba(255, 255, 255, .88); max-width: 30ch; text-wrap: balance; }
.offer-act { margin-top: 32px; }

/* visit: an ink field, the number set as the main element, the hours as a ruled timetable */
.visit { background: var(--ink); color: var(--ivory); padding: 88px 0 64px; }
.visit .grid { display: grid; gap: 48px; }
.visit .contact { margin-top: -24px; }
.visit-h { display: flex; align-items: baseline; gap: 14px; margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--rule-dark); font: 500 1.75rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ivory); font-variation-settings: normal; }
.visit-h .num-inline { font-size: 1.75rem; letter-spacing: 0; text-transform: none; color: var(--champ); }
.access { margin-top: 12px; font-size: .9375rem; color: #CFC5B4; }
.phone { display: inline-block; font: 400 clamp(2.5rem, 11.5vw, 5.75rem)/1.05 var(--serif); letter-spacing: -.02em; text-decoration: none; padding: 4px 0; background: linear-gradient(var(--champ), var(--champ)) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--m-ease); }
.phone:hover, .phone:focus-visible { background-size: 100% 1px; }
.phone:focus-visible { outline-color: var(--champ); }
.addr { margin-top: 22px; font: 400 1.0625rem/1.65 var(--sans); color: #E9E1D2; }
.addr span { display: block; }
.contact .more { margin-top: 10px; color: var(--ivory); }
.rating { margin-top: 6px; color: #CFC5B4; font: 500 .9375rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.visit :focus-visible { outline-color: var(--champ); }
.hours h3 { color: var(--champ); }
.table { margin-top: 16px; border-top: 1px solid var(--champ); }
.table li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--rule-dark); font-variant-numeric: tabular-nums lining-nums; }
.table li > span:first-child { font: 500 .875rem/1.6 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.table li > span:last-child { color: #E9E1D2; }
.table li.today { color: var(--champ); }
.table li.today > span:last-child { color: var(--champ); }
.today-mark { margin-left: 10px; font: italic 500 .9375rem/1 var(--serif); letter-spacing: 0; text-transform: none; }

/* footer */
.foot { background: var(--ivory); padding: 48px 0 calc(64px + env(safe-area-inset-bottom)); border-top: 1px solid var(--champ); }
.foot-mark { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.foot-mark .arc { margin-left: 4px; }
.foot .wordmark { font-size: 2.5rem; }
.foot-cols { display: grid; gap: 4px; margin-top: 20px; }
.foot-cols p { font-size: 1rem; line-height: 1.6; }
.foot-row { display: flex; align-items: center; gap: 14px; }
.foot-row span { color: var(--champ); }
.foot-cols .foot-sum { font-size: .875rem; color: var(--muted); }
.fs-sep { display: none; }
.fs-hrs { display: block; }
.foot-cols .foot-sum a { display: inline; min-height: 0; padding: 12px 0; text-decoration: none; }
.foot-cols a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.foot-base { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--rule); display: grid; gap: 10px; font-size: .9375rem; color: var(--muted); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.foot-links a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }

/* phone action bar */
.actionbar { position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1.2fr 1fr 1fr; background: var(--ink); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--champ); }
.actionbar a { display: grid; place-items: center; min-height: 56px; color: var(--ivory); text-decoration: none; font: 500 .9375rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; --m-fill: rgba(250, 246, 238, .12); }
.actionbar a + a { border-left: 1px solid var(--rule-dark); }
.actionbar .call { background: var(--gilt); }

/* 404 */
.lost { min-height: 100svh; display: grid; align-items: center; padding: calc(var(--head) + 72px) 0 96px; }
.lost h1 { font: 500 clamp(3rem, 13vw, 6rem)/1 var(--serif); letter-spacing: -.02em; margin-top: 14px; }
.lost p { margin-top: 18px; color: var(--muted); max-width: 40ch; }
.lost .actions { margin-top: 28px; }

/* scroll: each service and hours row draws its hairline left to right, then its text rises in; today's row turns
   champagne last. Without motion or without scripts, every rule and row is simply there. */
.menu li, .table li { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  @media (scripting: enabled) {
    .menu li[data-reveal], .table li[data-reveal] { opacity: 1; transform: none; border-bottom-color: transparent; }
    .menu li[data-reveal]::after, .table li[data-reveal]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--rule); transform: scaleX(0); transform-origin: 0 50%; transition: transform 700ms cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
    .table li[data-reveal]::after { background: var(--rule-dark); }
    .menu li[data-reveal] > *, .table li[data-reveal] > * { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity 700ms var(--m-ease) calc(var(--d, 0ms) + 120ms), transform 700ms var(--m-ease) calc(var(--d, 0ms) + 120ms), color .8s ease; }
    .menu li.is-in::after, .table li.is-in::after { transform: none; }
    .menu li.is-in > *, .table li.is-in > * { opacity: 1; transform: none; }
    .table li.today[data-reveal]:not(.is-in) > span { color: var(--ivory); }
    .table li.today[data-reveal] > span { transition: opacity 700ms var(--m-ease) calc(var(--d, 0ms) + 120ms), transform 700ms var(--m-ease) calc(var(--d, 0ms) + 120ms), color .8s ease 1100ms; }
    html:not(.m-on) .menu li > *, html:not(.m-on) .table li > *, html:not(.m-on) .menu li::after, html:not(.m-on) .table li::after { animation: m-show 0s 1.8s forwards; }
  }
}

@media (hover: hover) {
  .has-pv:hover h3 { color: var(--gilt); }
  .strip figure:hover img { scale: 1.03; }
}

@media (min-width: 600px) {
  .strip figure { width: 340px; }
  .strip figure.wide { width: 544px; }
  .strip .ph { height: 425px; }
}

@media (min-width: 900px) {
  body { font-size: 18px; }
  :root { --head: 76px; }
  .nav { display: flex; gap: 36px; }
  .nav a { text-decoration: none; font: 500 .8125rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; padding: 10px 0; }
  .wordmark { font-size: 1.75rem; }
  .topcall { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; font: 500 1rem/1 var(--sans); letter-spacing: .04em; }
  .menubtn, .sheet { display: none; }

  /* the room hangs from the header like a gilt mirror; one champagne rule runs under it from column 2 to the edge */
  .hero { display: grid; grid-template-columns: calc(var(--gut) - 24px) repeat(12, 1fr) calc(var(--gut) - 24px); grid-template-rows: auto auto; column-gap: 24px; }
  .hero-photo { grid-column: 7 / -2; grid-row: 1; height: clamp(520px, calc(100svh - var(--head) - 104px), 635px); max-height: none; min-height: 0; }
  .hero-photo img { object-position: 0% 50%; }
  .hero-photo::after { inset: 18px; }
  .hero-text { grid-column: 2 / 7; grid-row: 1; z-index: 2; align-self: center; padding: 40px 0; }
  .hero h1, .hero-arc { font-size: clamp(6.5rem, 11.7vw, 10.5rem); }
  .hero h1 { line-height: .98; white-space: nowrap; }
  .hero h1 .w1, .hero h1 .w2 { display: block; }
  .hero h1 .w2 { padding-left: 1.38em; margin-top: .12em; }
  .hero-arc { margin-bottom: -.08em; }
  .hero-more { max-width: 470px; margin-top: 28px; padding-left: 4px; }
  .line { font-size: 1.1875rem; margin-top: 0; }
  .actions { margin-top: 28px; }
  .hero-base { grid-column: 2 / -2; grid-row: 2; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 22px 0 36px 4px; }
  .hero-base::before { top: 0; left: 0; right: 0; }
  .hero-base .facts { margin: 0; padding: 0; border: 0; }
  .hrs { display: block; color: var(--muted); }
  .facts .sep { display: block; }
  .facts > span:last-child { flex-basis: auto; }

  .head-row { display: block; }
  .head-row .num { display: inline-flex; font-size: 3rem; gap: 8px; }
  .head-row .num .arc { display: block; }
  .head-row h2 { margin-top: 18px; }
  .services .note { margin-top: 14px; font-size: 1.125rem; }
  .num .arc { width: 64px; }
  h2 { font-size: clamp(3rem, 4.4vw, 4rem); margin-top: 18px; }

  .services { padding: 136px 0 72px; }
  .services .grid { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
  .pv-rule { display: block; position: absolute; left: max(-24px, calc(4px - var(--gut))); top: 0; width: 2px; height: 0; background: var(--gilt); opacity: 0; pointer-events: none; transition: transform .3s var(--m-ease), height .3s var(--m-ease), opacity .3s ease; }
  .pv-rule.is-on { opacity: 1; }
  .services .head { grid-column: 1 / 8; }
  .menu { grid-column: 1 / 8; grid-row: 2; margin-top: 48px; margin-right: clamp(40px, 4.5vw, 64px); }
  .row { grid-template-columns: 4rem 1fr; padding: 32px 0; }
  .row .n { font-size: 1.625rem; line-height: 1.5; }
  .row h3 { font-size: 2.5rem; line-height: 1.15; }
  .row p { font-size: 1.125rem; line-height: 1.5; margin-top: 6px; color: #5C5346; font-weight: 450; }
  .see, .pv-open { display: none; }
  .has-pv { cursor: default; }
  .has-pv.is-active h3 { color: var(--gilt); }
  .pv { display: block; grid-column: 8 / -1; grid-row: 1 / span 2; position: sticky; top: 120px; width: 100%; max-width: 500px; justify-self: end; }
  .pv-ph::after { inset: 14px; }
  .pv-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 12px; }
  .pv-cap .label { color: var(--ink); }
  .pv-credit { font-size: .8125rem; color: var(--muted); }

  .work { padding: 136px 0 64px; }
  .work-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: baseline; margin-bottom: 56px; }
  .head-inline { grid-column: 1 / 6; }
  .num-inline { font-size: 2.75rem; }
  .statement { grid-column: 7 / -1; margin-top: 0; position: relative; top: calc(-.66 * (clamp(3rem, 4.4vw, 4rem) - clamp(2.25rem, 3.1vw, 2.75rem))); font-size: clamp(2.25rem, 3.1vw, 2.75rem); max-width: none; text-wrap: wrap; }
  .statement > span { display: block; }
  .ctrl { display: flex; }
  .strip { --m-gap: 20px; }
  .strip figure { width: 368px; }
  .strip figure.wide { width: 589px; }
  .strip .ph { height: 460px; max-height: none; }
  .strip-foot { margin-top: 22px; }
  .prog { width: 120px; }

  .offer { padding: 112px 0; }
  .br-ph { display: none; }
  .fs-sep { display: inline; }
  .fs-hrs { display: inline; }
  .table li { padding: 14px 0; }
  .offer h2 { font-weight: 500; line-height: 1.02; font-size: min(var(--offer-fit) * (100vw - 40px), var(--offer-fit) * 1240px); max-width: none; white-space: nowrap; margin-top: 20px; }
  .offer-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--champ); }
  .offer-fact { max-width: none; }
  .offer-act { margin: 0; }

  .visit { padding: 144px 0 96px; }
  .visit .grid { grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 40px; align-items: start; }
  .visit-h { grid-column: 1 / 7; grid-row: 1; }
  .contact { grid-column: 1 / 7; grid-row: 2; }
  .visit .contact { margin-top: -8px; }
  .hours { grid-column: 8 / -1; grid-row: 1 / span 2; padding-top: 10px; }
  .addr { font-size: 1.25rem; }

  .foot { padding: 96px 0 56px; }
  .foot-top { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; }
  .foot-mark { grid-column: 1 / 5; }
  .foot .wordmark { font-size: 3rem; }
  .foot-cols { grid-column: 5 / -1; margin-top: 0; justify-items: end; }
  .foot-cols .foot-sum { text-align: right; }
  .foot-base { grid-template-columns: 1fr auto; align-items: center; margin-top: 64px; }
  .foot-links { grid-auto-flow: column; gap: 22px; align-items: center; }
  .actionbar { display: none; }
}