/* Design 2: The Menu
   Quiet and classical. The site is laid out like a good bar's menu card: centred, symmetrical,
   fine gold rules, services listed as menu lines with dotted leaders. It keeps the colours the
   brand already uses (beige, charcoal, gold), so it sits closest to the business cards.
   Type: Forum for headings, EB Garamond for reading. Both have Cyrillic. */

@font-face { font-family: "Forum"; font-weight: 400; font-display: swap; src: url("assets/fonts/forum-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Forum"; font-weight: 400; font-display: swap; src: url("assets/fonts/forum-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("assets/fonts/ebgaramond-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("assets/fonts/ebgaramond-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --beige: #f3efe5;
  --paper: #faf7f0;
  --ink: #3f4041;        /* the charcoal of the current site */
  --ink-deep: #2c2d2e;
  --gold: #926e38;       /* the gold of the current site: rules and large type */
  --gold-ink: #7a5a26;   /* gold for small text on beige */
  --gold-light: #cdaa72; /* gold on charcoal */
  --rule: 1px solid var(--gold);
  --display: "Forum", "Trajan Pro", Georgia, serif;
  --text: "EB Garamond", "Garamond", Georgia, serif;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3.5rem);
  --section: clamp(5rem, 3.5rem + 6vw, 10rem);
  --header-h: 5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--beige); color: var(--ink); font-family: var(--text); font-size: 1.25rem; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; text-wrap: balance; }
h2 { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.75rem); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 4px; }
.wrap { width: min(100% - 2 * var(--gutter), 76rem); margin-inline: auto; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--beige); padding: 0.6rem 1rem; }
.skip:focus { top: 1rem; }
[data-placeholder] { outline: 1px dashed var(--gold-ink); outline-offset: 4px; }

.btn { display: inline-block; font-family: var(--display); font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; line-height: 1; padding: 1.15rem 2rem 1.05rem; border: var(--rule); color: var(--ink); background: transparent; transition: background-color 0.25s, color 0.25s, border-color 0.25s; }
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--beige); }
.btn--small { padding: 0.8rem 1.25rem 0.7rem; font-size: 0.875rem; }
.btn--light { background: var(--beige); border-color: var(--beige); color: var(--ink); }
.btn--light:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--ink-deep); }
.btn--ghost { border-color: rgb(243 239 229 / 0.7); color: var(--beige); }
.btn--ghost:hover { background: var(--beige); border-color: var(--beige); color: var(--ink); }
.btn--gold { background: var(--gold-light); border-color: var(--gold-light); color: var(--ink-deep); }
.btn--gold:hover { background: var(--beige); border-color: var(--beige); color: var(--ink-deep); }

/* Hero frame geometry, shared by the hero and the header that sits on its top line.
   --m: margin around the hero (equal on top, left and right)
   --inset: distance from the photo's edge to the thin rectangle
   --line: distance from the photo's top to the rectangle's top line, which runs through the middle of the header */
:root { --m: clamp(0.75rem, 1.5vw, 1.25rem); --inset: clamp(1rem, 1.6vw, 1.5rem); --line: 2.75rem; --frame-line: rgb(243 239 229 / 0.5);
  --text-x: calc(var(--inset) + clamp(1rem, 1.6vw, 1.75rem) + clamp(0.9rem, 1.4vw, 1.4rem)); /* where text starts inside a frame: in line with the first menu item */ }
@media (max-width: 80rem) { :root { --line: 2.5rem; } }

/* header: sits on the hero's top line at first, then becomes a solid bar */
.hd { --rule-colour: var(--frame-line); position: absolute; z-index: 50; top: var(--m); left: calc(var(--m) + var(--inset)); right: calc(var(--m) + var(--inset)); height: calc(var(--line) * 2); display: flex; align-items: center; color: var(--beige); }
.hd__rule { flex: 1 1 0; min-width: 1.25rem; height: 1px; background: var(--rule-colour); }
.hd__rule--edge { flex: 0 0 clamp(1rem, 1.6vw, 1.75rem); }
.hd__rule--small { display: none; }
.hd__logo { order: 4; flex: none; padding-inline: clamp(1rem, 1.8vw, 1.75rem); font-family: var(--display); font-size: 1.4rem; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.hd__nav { display: contents; font-family: var(--display); font-size: 0.9375rem; letter-spacing: 0.1em; text-transform: uppercase; }
.hd__nav > .hd__rule--edge:first-child { order: 1; }
.hd__group--left { order: 2; }
.hd__rule--before-logo { order: 3; }
.hd__rule--after-logo { order: 5; }
.hd__group--right { order: 6; }
.hd__nav > .hd__rule--edge:last-child { order: 7; }
.hd__group { flex: none; display: flex; align-items: center; gap: clamp(1rem, 1.6vw, 1.75rem); padding-inline: clamp(0.9rem, 1.4vw, 1.4rem); font-family: var(--display); font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.hd__group > a:not(.btn) { text-decoration: none; padding-block: 0.4rem; border-bottom: 1px solid transparent; }
.hd__group > a:not(.btn):hover { border-bottom-color: currentColor; }
.hd .btn--small { color: var(--beige); border-color: var(--frame-line); }
.hd .btn--small:hover { background: var(--beige); border-color: var(--beige); color: var(--ink); }
.hd__toggle { display: none; font-family: var(--display); font-size: 0.9375rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.6rem 1rem; border: 1px solid var(--rule-colour); background: none; color: inherit; cursor: pointer; }

/* solid: once the hero has scrolled away, or while the phone menu is open */
.hd.is-solid, .hd:has(.hd__nav.is-open) { --rule-colour: var(--gold); position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); padding-inline: var(--gutter); background: var(--beige); color: var(--ink); box-shadow: 0 1px 0 rgb(146 110 56 / 0.25); }
.hd.is-solid { animation: drop 0.35s ease-out; }
.hd.is-solid .btn--small, .hd:has(.hd__nav.is-open) .btn--small { color: var(--ink); border-color: var(--gold); }
.hd.is-solid .btn--small:hover { background: var(--ink); border-color: var(--ink); color: var(--beige); }
@keyframes drop { from { transform: translateY(-100%); } to { transform: none; } }

/* dropdowns: dark panels with the hero's thin inset frame. Open on hover (pointer devices), click or keyboard. */
.dd { position: relative; }
.dd__toggle { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; border-bottom: 1px solid transparent; cursor: pointer; }
.dd__toggle::after { content: ""; width: 0.38em; height: 0.38em; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-0.15em) rotate(45deg); transition: transform 0.3s ease; }
.dd__toggle:hover, .dd.is-open .dd__toggle { border-bottom-color: currentColor; }
.dd.is-open .dd__toggle::after { transform: translateY(0.1em) rotate(-135deg); }
.dd__panel { position: absolute; top: 100%; left: -1.75rem; padding-top: 1.4rem; z-index: 60; visibility: hidden; opacity: 0; transform: translateY(-0.4rem); transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.4s; }
.dd--right .dd__panel { left: auto; right: -1.75rem; }
.dd.is-open .dd__panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.dd__box { position: relative; display: grid; grid-template-columns: 19rem; gap: 1.75rem; padding: 1.75rem; background: var(--ink-deep); color: var(--beige); box-shadow: 0 1.5rem 3rem rgb(20 20 20 / 0.35); text-transform: none; letter-spacing: 0; white-space: normal; text-align: left; }
.dd--wide .dd__box { grid-template-columns: 19rem 12rem; }
.dd__box::before { content: ""; position: absolute; inset: 0.5rem; border: 1px solid var(--frame-line); pointer-events: none; }
.dd__list { display: grid; gap: 0.15rem; }
.dd__list a { display: grid; gap: 0.1rem; padding: 0.55rem 0.75rem; text-decoration: none; border-left: 1px solid transparent; transition: border-color 0.25s, background-color 0.25s, padding 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.dd__list a:hover, .dd__list a:focus-visible { border-left-color: var(--gold-light); background: rgb(243 239 229 / 0.05); padding-left: 1rem; }
.dd__list strong { font-family: var(--display); font-weight: 400; font-size: 1.1875rem; line-height: 1.2; }
.dd__list span { font-family: var(--text); font-size: 0.9375rem; line-height: 1.35; color: rgb(243 239 229 / 0.62); }
.dd__list li { opacity: 0; transform: translateY(0.4rem); transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.dd.is-open .dd__list li { opacity: 1; transform: none; transition-delay: calc(0.05s + var(--n) * 0.04s); }
.dd__photo { position: relative; margin: 0; align-self: stretch; min-height: 15rem; overflow: hidden; }
.dd__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dd__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(20 20 20 / 0.75), transparent 55%); }
.dd__photo figcaption { position: absolute; z-index: 1; left: 0.9rem; right: 0.9rem; bottom: 0.8rem; font-family: var(--display); font-size: 1rem; line-height: 1.25; }
.hd.is-solid .dd__toggle:hover { color: var(--gold-ink); }
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; }
.lang summary::-webkit-details-marker { display: none; }
.flag { box-shadow: 0 0 0 1px rgb(0 0 0 / 0.2); }
.lang ul { position: absolute; right: 0; top: calc(100% + 1.25rem); width: 14rem; background: var(--paper); color: var(--ink); border: var(--rule); padding: 1rem 1.25rem; display: grid; gap: 0.35rem; font-family: var(--text); font-size: 1.0625rem; letter-spacing: 0; text-transform: none; text-align: left; }
.lang li { display: flex; justify-content: space-between; outline: 0; }
.lang small { color: var(--gold-ink); }
@media (max-width: 80rem) {
  .hd__rule--small { display: block; }
  .hd__rule--small.hd__rule--edge { flex: 0 0 clamp(0.75rem, 3vw, 1.5rem); }
  .hd__logo { order: 0; padding-inline: 0.9rem; font-size: 1.125rem; letter-spacing: 0.14em; }
  .hd__toggle { display: block; margin-inline: 0.9rem; }
  .hd__nav { display: none; position: fixed; inset: var(--header-h) 0 0 0; background: var(--beige); color: var(--ink); flex-direction: column; justify-content: flex-start; gap: 1.5rem; padding: 2.5rem var(--gutter); font-size: 1.25rem; overflow-y: auto; }
  .hd__nav.is-open { display: flex; }
  .hd__nav .hd__rule { display: none; }
  .hd__group { flex-direction: column; gap: 1.5rem; padding-inline: 0; font-size: 1.25rem; }
  .hd__group { align-items: flex-start; }
  .dd { width: 100%; }
  .dd__toggle { width: 100%; justify-content: space-between; }
  .dd__panel { position: static; display: none; padding-top: 0.75rem; opacity: 1; visibility: visible; transform: none; transition: none; }
  .dd.is-open .dd__panel { display: block; }
  .dd__box, .dd--wide .dd__box { grid-template-columns: 1fr; padding: 0; background: none; color: inherit; box-shadow: none; }
  .dd__box::before, .dd__photo { display: none; }
  .dd__list a { padding: 0.45rem 0 0.45rem 1rem; border-left-color: var(--gold); }
  .dd__list span { color: #5b5c5d; }
  .dd__list li { opacity: 1; transform: none; }
  .lang ul { position: static; margin-top: 1rem; }
}
@media (max-width: 26rem) { .hd__logo { font-size: 1rem; letter-spacing: 0.1em; padding-inline: 0.6rem; } .hd__toggle { margin-inline: 0.6rem; } }

/* hero: the film in a passe-partout, with the same margin on top as on the sides.
   Text on the left, lined up with the first menu item; the photo (later the film) on the right,
   fading into the dark frame towards the text. */
.hero { position: relative; padding: var(--m); }
.hero__frame { position: relative; height: calc(100svh - 2 * var(--m)); min-height: 34rem; overflow: hidden; background: var(--ink-deep); display: grid; align-items: center; justify-items: start; }
.hero__slides { position: absolute; top: 0; right: 0; bottom: 0; width: 66%; overflow: hidden; transform: scale(var(--zoom, 1)); transform-origin: 60% 60%; -webkit-mask-image: linear-gradient(to right, transparent, #000 38%); mask-image: linear-gradient(to right, transparent, #000 38%); }
/* each photo is cropped close on the glass and drifts slowly closer while it is shown; --z lowers the zoom for upright photos */
.hero__slides img, .hero__slides video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); transform-origin: var(--fx, 50%) var(--fy, 50%); opacity: 0; transform: scale(calc(1.3 * var(--z, 1))); transition: opacity 1.6s ease, transform 0s linear 1.6s; }
html:not(.js) .hero__slides img:first-child, .hero__slides .is-on { opacity: 1; transform: scale(calc(1.42 * var(--z, 1))); transition: opacity 1.6s ease, transform 8s linear; }
.hero__slides video { opacity: 1; transform: none; }
.hero__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(20 20 20 / 0.5), transparent 22%), linear-gradient(to right, rgb(20 20 20 / 0.55), transparent 55%), linear-gradient(to top, rgb(20 20 20 / 0.45), transparent 35%); }
/* the thin rectangle: sides here (::before), bottom line in .hero__base, top line drawn by the header's rule segments */
.hero__frame::before { content: ""; position: absolute; top: var(--line); left: var(--inset); right: var(--inset); bottom: var(--inset); border: 1px solid var(--frame-line); border-top: 0; border-bottom: 0; z-index: 1; pointer-events: none; }
.hero__base { position: absolute; z-index: 1; left: var(--inset); right: var(--inset); bottom: var(--inset); height: 1px; pointer-events: none; }
.hero__base::before, .hero__base::after { content: ""; position: absolute; top: 0; height: 1px; width: 50%; background: var(--frame-line); }
.hero__base::before { left: 0; transform-origin: left center; }
.hero__base::after { right: 0; transform-origin: right center; }
.hero__inner { position: relative; z-index: 4; /* above the smoke */ color: var(--beige); padding: calc(var(--line) * 2 + 1rem) var(--gutter) 4.5rem var(--text-x); display: grid; gap: 1.75rem; justify-items: start; text-align: left; max-width: calc(var(--text-x) + 40rem); }
.hero__line { font-family: var(--display); font-size: clamp(2.25rem, 1rem + 4vw, 4.75rem); line-height: 1.05; max-width: 14ch; text-wrap: balance; }
.hero__title { font-family: var(--text); font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem); line-height: 1.5; max-width: 29rem; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 1rem; margin-top: 0.5rem; }
/* Entrance: one sequence when the page opens (about two seconds).
   Photo fades in and settles -> wordmark -> header rules grow outward from it -> frame sides draw down,
   then the bottom line closes from both corners ->
   headline rises in word by word (main.js wraps the words) -> intro line -> buttons.
   Nothing moves for visitors who ask for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__slides { animation: intro-photo 2.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .js .hero__frame::before { animation: intro-draw 1.3s cubic-bezier(0.5, 0, 0.3, 1) 0.9s both; }
  .js .hero__base::before, .js .hero__base::after { animation: intro-rule 0.9s cubic-bezier(0.3, 0, 0.2, 1) 2.1s both; }
  .js .hd__logo { animation: intro-fade 1s ease 0.2s both; }
  .js .hd__rule { transform-origin: left center; animation: intro-rule 1.1s cubic-bezier(0.6, 0, 0.2, 1) 0.45s both; }
  .js .hd__nav > .hd__rule--edge:first-child, .js .hd__rule--before-logo, .js .hd > .hd__rule--small:first-child { transform-origin: right center; }
  .js .hd__toggle { animation: intro-fade 0.9s ease 1s both; }
  /* only where the menu is visible from the start: the phone menu is hidden until opened, and a fade there would only delay it */
  @media (min-width: 80.01rem) { .js .hd__group { animation: intro-fade 0.9s ease 1s both; } }
  /* the headline stays hidden until its words are wrapped; if the script never runs it simply fades in */
  .js .hero__line:not(.is-split) { opacity: 0; animation: intro-fade 0.6s ease 2.5s forwards; }
  .hero__line .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
  .hero__line .w > span { display: inline-block; animation: intro-word 1.1s cubic-bezier(0.2, 0.75, 0.2, 1) calc(0.7s + var(--i) * 70ms) both; }
  .js .hero__title { animation: intro-up 1s cubic-bezier(0.2, 0.7, 0.2, 1) 1.35s both; }
  .js .hero__actions > :nth-child(1) { animation: intro-up 1s cubic-bezier(0.2, 0.7, 0.2, 1) 1.55s both; }
  .js .hero__actions > :nth-child(2) { animation: intro-up 1s cubic-bezier(0.2, 0.7, 0.2, 1) 1.7s both; }
}
@keyframes intro-photo { from { opacity: 0; scale: 1.12; } to { opacity: 1; scale: 1; } }
@keyframes intro-draw { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes intro-rule { from { transform: scaleX(0); } }
@keyframes intro-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-word { from { transform: translateY(110%); } }
@keyframes intro-up { from { opacity: 0; transform: translateY(1rem); } }

/* dry-ice smoke: a band that straddles the bottom edge of the hero and leaks onto the beige below.
   The texture is generated by main.js; each layer carries a light tone (shows on the dark photo)
   and a faint warm shade (shows on the beige). */
.hero__smoke { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(-1 * clamp(7rem, 13vw, 12rem)); transform: translateY(calc(var(--sy, 0) * -0.08px)); height: clamp(22rem, 62vh, 44rem); overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 2.5s ease; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%, #000 72%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 45%, #000 72%, transparent); }
.hero__smoke canvas, .hero__haze canvas, .hero__veil canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the front layer: in front of everything, mostly on the right, soft as if out of focus; moves most on scroll */
.hero__veil { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity 3s ease 1.2s; transform: translateY(calc(var(--sy, 0) * -0.3px)); }
.hero__veil canvas { filter: blur(6px); }
.hero__veil.is-ready { opacity: 0.6; }
/* the haze sits inside the photo, behind the front fog; on scroll it moves less than the fog in front (depth) */
.hero__haze { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 3s ease 0.8s; transform: translateY(calc(var(--sy, 0) * 0.12px)); }
.hero__haze.is-ready { opacity: 1; }
/* the spill: a thin layer lying along the hero's bottom edge and slipping a little way over it */
.hero__spill { position: absolute; z-index: 3; left: 0; right: 0; top: calc(100% - var(--m) - clamp(3rem, 5vw, 4.5rem)); height: clamp(7rem, 13vw, 11rem); pointer-events: none; opacity: 0; transition: opacity 3s ease 1s; }
.hero__spill canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__spill.is-ready { opacity: 0.55; }
.hero__smoke.is-ready { opacity: 0.8; } /* overall strength of the fog */
.hero__smoke span { position: absolute; left: 0; top: 0; height: 100%; background-repeat: repeat-x; background-position: 0 0; will-change: transform; }
@media (max-width: 60rem) {
  /* narrow screens: the photo fills the frame again, darkened so the text stays readable */
  .hero__slides { width: 100%; -webkit-mask-image: none; mask-image: none; }
  .hero__slides img { object-position: calc(var(--fx, 50%) - 22%) var(--fy, 50%); }
  .hero__frame::after { background: linear-gradient(to bottom, rgb(20 20 20 / 0.55), transparent 25%), linear-gradient(to right, rgb(20 20 20 / 0.7), rgb(20 20 20 / 0.25)), linear-gradient(to top, rgb(20 20 20 / 0.5), transparent 35%); }
}
/* ===================================================================================
   Sections below the hero. They share the hero's devices:
   - beige sections and dark panels, the panels with the same outer margin (--m) as the hero
     and a thin inset rectangle;
   - headings followed by a rule that runs to the edge, like the header's line;
   - photos that fade into the dark, left-aligned text.
   Entrances: anything with data-reveal gets .is-in when it scrolls into view (main.js);
   headings marked data-words rise in word by word. Nothing moves with reduced motion.
   =================================================================================== */

.section { padding-block: var(--section); }
.svc.section { padding-top: clamp(7rem, 5rem + 7vw, 12rem); } /* room for the smoke falling out of the hero */
.link { font-family: var(--display); font-size: 0.9375rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; padding-bottom: 0.3rem; border-bottom: 1px solid var(--gold); transition: color 0.25s, border-color 0.25s; }
.link:hover { color: var(--gold-ink); }
.link--light { color: var(--beige); border-bottom-color: var(--frame-line); }
.link--light:hover { color: var(--gold-light); border-bottom-color: var(--gold-light); }

/* heading + rule, the header's line in miniature */
.head { display: grid; grid-template-columns: auto minmax(2rem, 1fr); align-items: center; column-gap: clamp(1.25rem, 2.5vw, 2.5rem); row-gap: 1.25rem; margin-bottom: clamp(3rem, 5vw, 5rem); }
.head__title { font-size: clamp(2.4rem, 1.5rem + 3vw, 4.25rem); line-height: 1.05; max-width: 16ch; }
.head__rule { height: 1px; background: var(--gold); transform-origin: left center; }
.head__aside { grid-column: 1 / -1; max-width: 36rem; color: #5b5c5d; }
.head--stack { grid-template-columns: 1fr; margin-bottom: clamp(2rem, 4vw, 3rem); }
@media (min-width: 60rem) {
  .head__aside { grid-column: auto; grid-row: 2; }
}

/* the menu: a framed photo on the left that follows the service you point at */
.svc__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6.5rem); align-items: start; }
.svc__photo { position: sticky; top: calc(var(--header-h) + 2rem); margin: 0; aspect-ratio: 4 / 5; background: var(--ink-deep); overflow: hidden; }
.svc__photo::after { content: ""; position: absolute; inset: var(--inset); border: 1px solid var(--frame-line); pointer-events: none; z-index: 2; }
.svc__photo img, .svc__empty { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 0.7s ease, transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.svc__photo .is-on { opacity: 1; transform: scale(1); }
.svc__empty { display: grid; place-items: center; margin: 0; color: var(--beige); font-size: 1.0625rem; outline-offset: -3rem; outline-color: var(--gold-light); }
.svc__list { border-top: 1px solid rgb(146 110 56 / 0.45); }
.svc__row { padding: 1.5rem 0 1.6rem; border-bottom: 1px solid rgb(146 110 56 / 0.45); transition: padding 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.svc__line { display: flex; align-items: baseline; gap: 1rem; }
.svc__line h3 { font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.25rem); line-height: 1.1; transition: color 0.3s; }
.svc__line i { flex: 1; min-width: 1.5rem; border-bottom: 1px dotted var(--gold); transform: translateY(-0.3rem); }
.svc__line em { font-style: normal; color: var(--gold-ink); white-space: nowrap; font-size: 1.0625rem; }
.svc__row p { margin-top: 0.35rem; max-width: 34rem; font-size: 1.125rem; color: #5b5c5d; }
.svc__row.is-active h3 { color: var(--gold-ink); }
@media (hover: hover) { .svc__row.is-active { padding-left: 1rem; } }
.svc__foot { margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 60rem) {
  .svc__grid { grid-template-columns: 1fr; }
  .svc__photo { position: relative; top: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 40rem) { .svc__line { flex-wrap: wrap; gap: 0 1rem; } .svc__line i { display: none; } .svc__line em { flex-basis: 100%; } }

/* dark panels (RAI, closing): built like the hero */
.rai, .closing { padding-inline: var(--m); }
.panel { position: relative; isolation: isolate; overflow: hidden; background: var(--ink-deep); color: var(--beige); min-height: min(52rem, 92svh); display: grid; align-items: center; }
.panel::before { content: ""; position: absolute; inset: var(--inset); border: 1px solid var(--frame-line); z-index: 3; pointer-events: none; }
.panel__photo { position: absolute; inset: 0 0 0 auto; width: 64%; -webkit-mask-image: linear-gradient(to right, transparent, rgb(0 0 0 / 0.35) 22%, #000 58%); mask-image: linear-gradient(to right, transparent, rgb(0 0 0 / 0.35) 22%, #000 58%); }
.panel__photo img { width: 100%; height: 100%; object-fit: cover; }
.panel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgb(20 20 20 / 0.6), rgb(20 20 20 / 0.2) 55%, transparent 80%); pointer-events: none; }
.panel__body { position: relative; z-index: 4; padding: clamp(4rem, 8vw, 7rem) var(--gutter) clamp(4rem, 8vw, 7rem) var(--text-x, calc(var(--inset) + 2.5rem)); max-width: calc(var(--inset) + 2.5rem + 36rem); display: grid; gap: 1.4rem; justify-items: start; }
.panel__title { font-size: clamp(2.3rem, 1.4rem + 3vw, 4rem); line-height: 1.05; max-width: 14ch; }
.panel__title--big { font-size: clamp(2.6rem, 1.3rem + 4.6vw, 5.5rem); max-width: 11ch; }
.panel__text { max-width: 30rem; color: rgb(243 239 229 / 0.82); }
.panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 0.5rem; }
.show { width: min(100%, 26rem); margin-block: 0.75rem; }
.show__name { font-size: 1.6rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--gold-light); }
.show__facts > div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding-block: 0.65rem; border-bottom: 1px solid rgb(205 170 114 / 0.35); }
.show__facts dt { font-family: var(--display); font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); padding-top: 0.2rem; }
.show__facts dd { margin: 0; }
.show__note { margin-top: 0.9rem; font-size: 0.9375rem; color: rgb(243 239 229 / 0.65); outline-color: var(--gold-light); }
@media (max-width: 60rem) {
  .panel { align-items: end; min-height: 0; }
  .panel__photo { position: relative; inset: auto; width: 100%; height: 22rem; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
  .panel::after { display: none; }
  .panel__body { padding: 0 calc(var(--inset) + 1.5rem) 3.5rem; margin-top: -4rem; }
  .panel { display: block; }
}

/* how it works: a line with four stops (a real sequence, so the numerals belong) */
.how__steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); counter-reset: step; padding-top: 3.25rem; }
.how__steps::before { content: ""; position: absolute; top: 0.75rem; left: 0; right: 0; height: 1px; background: var(--gold); transform-origin: left center; }
.how__steps li { position: relative; counter-increment: step; }
.how__steps li::before { content: counter(step, upper-roman); position: absolute; top: -3.25rem; left: 0; padding-right: 0.9rem; background: var(--beige); font-family: var(--display); font-size: 1.75rem; line-height: 1.5rem; color: var(--gold-ink); }
.how__steps h3 { font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.15; margin-bottom: 0.7rem; }
.how__steps p { font-size: 1.125rem; color: #5b5c5d; }
@media (max-width: 60rem) {
  .how__steps { grid-template-columns: 1fr; padding-top: 0; padding-left: 3.75rem; gap: 2.5rem; }
  .how__steps::before { top: 0; bottom: 0; left: 1rem; right: auto; width: 1px; height: auto; transform-origin: center top; }
  .how__steps li::before { top: 0; left: -3.75rem; width: 2.5rem; padding: 0.4rem 0; text-align: center; }
}

/* signature serves: photos in the hero's passe-partout */
.serves__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 3rem); align-items: start; }
.serve:nth-child(2) { margin-top: clamp(2rem, 6vw, 6rem); }
.serve__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-deep); }
.serve__frame::after { content: ""; position: absolute; inset: var(--inset); border: 1px solid var(--frame-line); pointer-events: none; }
.serve__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (hover: hover) { .serve:hover .serve__frame img { transform: scale(1.05); } }
.serve h3 { font-size: 1.75rem; margin-top: 1.4rem; }
.serve p { margin-top: 0.3rem; color: #5b5c5d; font-size: 1.125rem; }
@media (max-width: 60rem) { .serves__grid { grid-template-columns: 1fr; max-width: 28rem; } .serve:nth-child(2) { margin-top: 0; } }

/* recent stops */
.stops__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stops__row li { padding: 0.25rem clamp(1.25rem, 3vw, 3rem) 0.5rem; border-left: 1px solid rgb(146 110 56 / 0.45); display: grid; gap: 0.6rem; align-content: start; justify-items: start; }
.stops__row li:first-child { padding-left: 0; border-left: 0; }
.stops__row h3 { font-size: clamp(2.75rem, 1.6rem + 3.6vw, 5rem); line-height: 1; }
.stops__row p { color: #5b5c5d; }
.stops__note { color: var(--gold-ink) !important; font-size: 1rem; }
.logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(3rem, 5vw, 4.5rem); }
.logos li { aspect-ratio: 5 / 2; display: grid; place-items: center; text-align: center; font-size: 0.9375rem; color: var(--gold-ink); outline-offset: -1px; padding: 0.5rem; }
@media (max-width: 60rem) {
  .stops__row { grid-template-columns: 1fr; gap: 2rem; }
  .stops__row li { padding: 1.5rem 0 0; border-left: 0; border-top: 1px solid rgb(146 110 56 / 0.45); }
  .stops__row li:first-child { border-top: 0; padding-top: 0; }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* questions */
.faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6.5rem); align-items: start; }
.faq__side { position: sticky; top: calc(var(--header-h) + 2rem); }
.private { position: relative; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--paper); display: grid; gap: 0.75rem; justify-items: start; }
.private::before { content: ""; position: absolute; inset: 0.5rem; border: 1px solid rgb(146 110 56 / 0.45); pointer-events: none; }
.private h3 { font-size: 1.6rem; line-height: 1.15; }
.private p { font-size: 1.125rem; color: #5b5c5d; }
.private p:last-child { margin-top: 0.5rem; }
.faq__list { border-top: 1px solid rgb(146 110 56 / 0.45); }
.faq__list details { border-bottom: 1px solid rgb(146 110 56 / 0.45); }
.faq__list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding-block: 1.4rem; font-family: var(--display); font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem); line-height: 1.2; transition: color 0.25s; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: ""; flex: none; width: 0.9rem; height: 0.9rem; background: linear-gradient(var(--gold), var(--gold)) center / 100% 1px no-repeat, linear-gradient(var(--gold), var(--gold)) center / 1px 100% no-repeat; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.faq__list details[open] summary::after { transform: rotate(45deg); }
.faq__list summary:hover { color: var(--gold-ink); }
.faq__list details p { padding: 0 2.5rem 1.6rem 0; max-width: 40rem; color: #5b5c5d; }
@media (max-width: 60rem) { .faq__grid { grid-template-columns: 1fr; } .faq__side { position: static; display: grid; gap: 2rem; } .private { order: 2; } }

/* footer: the header's line once more, broken by the wordmark */
.ft { padding-block: clamp(4rem, 7vw, 6rem) 2.5rem; font-size: 1.0625rem; }
.ft__bar { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.5rem); padding-inline: calc(var(--m) + var(--inset)); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.ft__rule { flex: 1; height: 1px; background: var(--gold); }
.ft__logo { font-family: var(--display); font-size: clamp(1.4rem, 1rem + 1.4vw, 2.25rem); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.ft__grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 3fr)); gap: 2rem clamp(1.5rem, 4vw, 4rem); }
.ft__tag { font-family: var(--display); font-size: 1.5rem; line-height: 1.25; max-width: 18ch; }
.ft__h { font-family: var(--display); font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 0.9rem; }
.ft ul { display: grid; gap: 0.45rem; }
.ft a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.25s; }
.ft a:hover { border-bottom-color: var(--gold); }
.ft__small { margin-top: clamp(3rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid rgb(146 110 56 / 0.3); font-size: 0.9375rem; color: #5b5c5d; }
@media (max-width: 60rem) { .ft__grid { grid-template-columns: 1fr 1fr; } .ft__tag { grid-column: 1 / -1; } }
@media (max-width: 34rem) { .ft__grid { grid-template-columns: 1fr; } .ft__logo { font-size: 1.125rem; } }

/* back to top: a small square in the hero's style, the frame line fills in gold as you scroll */
.totop { position: fixed; z-index: 40; right: calc(var(--m) + 1rem); bottom: calc(var(--m) + 1rem); width: 3.25rem; height: 3.25rem; display: grid; place-items: center; background: var(--ink-deep); color: var(--beige); box-shadow: 0 0.75rem 1.75rem rgb(20 20 20 / 0.25); opacity: 0; visibility: hidden; transform: translateY(0.75rem); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.5s, background-color 0.3s; }
.totop.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.totop svg { width: 100%; height: 100%; overflow: visible; }
.totop__frame { fill: none; stroke: var(--frame-line); stroke-width: 1; }
.totop__progress { fill: none; stroke: var(--gold-light); stroke-width: 1; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--progress, 0) * 100); }
.totop__arrow { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: square; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.totop:hover { background: #1e1f20; }
.totop:hover .totop__arrow, .totop:focus-visible .totop__arrow { transform: translateY(-3px); }
.totop:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

/* quote dialog */
.quote { width: min(42rem, calc(100% - 2rem)); border: 0; padding: clamp(2rem, 5vw, 3.5rem); background: var(--paper); color: var(--ink); }
.quote::before { content: ""; position: absolute; inset: 0.6rem; border: 1px solid rgb(146 110 56 / 0.45); pointer-events: none; }
.quote::backdrop { background: rgb(44 45 46 / 0.75); }
.quote form { position: absolute; top: 1.5rem; right: 1.5rem; }
.quote form button { font-family: var(--display); font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.5rem 0.9rem; border: var(--rule); background: none; color: inherit; cursor: pointer; }
.quote form button:hover { background: var(--ink); color: var(--beige); }
.quote h2 { font-size: 2.75rem; margin-bottom: 1.25rem; padding-right: 5rem; }
.quote__widget { margin-block: 1.75rem; padding: 1.75rem; background: var(--beige); min-height: 11rem; display: grid; align-items: center; }
.quote__widget p { outline: 0; }
.quote__widget:has([data-placeholder]) { outline: 1px dashed var(--gold-ink); }
.quote__widget iframe { width: 100%; height: min(70dvh, 44rem); border: 0; }
.quote__widget.is-loaded { padding: 0; background: none; }
.quote__alt { font-size: 1.0625rem; }

/* ---------- scroll entrances ---------- */
[data-words] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
[data-words] .w > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(1.5rem); transition: opacity 1s ease var(--d, 0s), transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  /* headings: no slide of their own; their words rise and the rule draws out */
  .js .head[data-reveal] { transform: none; }
  .js [data-words] .w > span { transform: translateY(110%); transition: transform 1.1s cubic-bezier(0.2, 0.75, 0.2, 1) calc(var(--d, 0s) + var(--i) * 60ms); }
  .js .is-in [data-words] .w > span, .js .is-in[data-words] .w > span { transform: none; }
  .js .head__rule { transform: scaleX(0); transition: transform 1.4s cubic-bezier(0.6, 0, 0.2, 1) 0.35s; }
  .js .is-in .head__rule { transform: scaleX(1); }
  /* panels: no slide; the photo settles, the frame draws, the text follows */
  .js .panel[data-reveal] { transform: none; transition: opacity 1.2s ease; }
  .js .panel .panel__photo img { transform: scale(1.1); transition: transform 2.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js .panel.is-in .panel__photo img { transform: none; }
  .js .panel::before { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s cubic-bezier(0.6, 0, 0.2, 1) 0.3s; }
  .js .panel.is-in::before { clip-path: inset(0); }
  .js .panel__body > :not(.panel__title) { opacity: 0; transform: translateY(1rem); transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js .panel.is-in .panel__body > :not(.panel__title) { opacity: 1; transform: none; }
  .js .panel.is-in .panel__body > :nth-child(2) { transition-delay: 0.7s; }
  .js .panel.is-in .panel__body > :nth-child(3) { transition-delay: 0.85s; }
  .js .panel.is-in .panel__body > :nth-child(4) { transition-delay: 1s; }
  .js .panel.is-in .panel__body > :nth-child(5) { transition-delay: 1.15s; }
  .js .panel .panel__title { --d: 0.25s; }
  /* the menu photo and the serves: wipe up from below while the picture settles */
  .js .svc__photo[data-reveal], .js .serve[data-reveal] { transform: none; }
  /* a beige cover lifts off the photo (a clip on the frame itself would stop the scroll watcher seeing it) */
  .js .svc__photo[data-reveal] { opacity: 1; }
  .js .svc__photo::before { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--beige); transform-origin: center top; transition: transform 1.4s cubic-bezier(0.6, 0, 0.2, 1); }
  .js .svc__photo.is-in::before { transform: scaleY(0); }
  .js .serve .serve__frame { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s cubic-bezier(0.6, 0, 0.2, 1) var(--d, 0s); }
  .js .serve.is-in .serve__frame { clip-path: inset(0); }
  .js .serve .serve__frame img { transform: scale(1.15); transition: transform 2.2s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s); }
  .js .serve.is-in .serve__frame img { transform: none; }
  /* the steps: the line draws across, then each stop appears */
  .js .how__steps[data-reveal] { opacity: 1; transform: none; }
  .js .how__steps::before { transform: scaleX(0); transition: transform 1.8s cubic-bezier(0.6, 0, 0.2, 1); }
  .js .how__steps.is-in::before { transform: scaleX(1); }
  .js .how__steps li { opacity: 0; transform: translateY(1rem); transition: opacity 0.9s ease var(--d), transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d); }
  .js .how__steps.is-in li { opacity: 1; transform: none; }
  @media (max-width: 60rem) {
    .js .how__steps::before { transform: scaleY(0); }
    .js .how__steps.is-in::before { transform: scaleY(1); }
  }
}