/*
Theme Name: Мозаика
Description: Тема сайта адвоката: мозаика Пенроуза, «Каждое дело уникально» (макет 10 «Без шаблона»).
Version: 3.0.0
Author: Елена Морозова
Text Domain: altairlaw
*/

/* ─── Fonts ───
 * Onest variable (SIL OFL 1.1, licence next to the files), Cyrillic + Latin
 * subsets from @fontsource-variable/onest 5.3.1. Self-hosted, no CDN. */
@font-face { font-family: "Onest"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("./assets/fonts/onest-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("./assets/fonts/onest-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ─── Tokens ───
 * The page is a stone lobby: warm limestone background, ink text, one deep
 * blue accent. The painting is the same floor laid in two blues of that
 * accent, its joints in the page colour, a gold star in the middle. */
:root {
  --bg: #f3f0ea;            /* main colour: the joints between the stones are the page itself */
  --paper: #faf8f3;         /* passe-partout of the painting, cards */
  --panel: #e9e5dc;
  --tint: #e5ebf2;          /* cards and the «Услуги» menu: a cool blue-grey, apart from the warm page */
  --tint-2: #d9e2ed;        /* a menu item under the pointer */
  --tint-line: #c2cddb;
  --ink: #1f2429;
  --ink-2: #565b60;
  --line: #cdc6b8;
  --acc: #1f3b61;           /* deep blue */
  --acc-2: #2b4f7e;
  --on-acc: #ffffff;
  --gold: #c4a062;
  /* the floor (read by assets/js/mosaic.js: keep them #rrggbb) */
  --mz-t1: #2d5282;         /* thick stones */
  --mz-t0: #1b3458;         /* thin stones */
  --mz-acc: #c9a660;        /* the star */
  --mz-gold: #e2c37f;       /* gold threads, seams */
  --mz-spark: #ffdf91;      /* new joints glint, the thread under the hand */
  --mz-glow: #6189c2;       /* stones a thread passes through */
  --mz-lit: #4b70a6;        /* a re-laying hexagon at its brightest */
  --mz-bed: #13253f;        /* the bed under loose stones */
  --mz-joint: #f3f0ea;
  --wrap: 1200px;
  --gutter: 40px;
  --hdr: 78px;
  --sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: light; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.mz { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* resets without specificity, so every component class below wins */
:where(.mz) a { color: inherit; text-decoration: none; }
:where(.mz) :where(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; padding: 0; }
:where(.mz) :where(ul, ol) { list-style: none; }
:where(.mz) img { max-width: 100%; height: auto; }
.mz ::selection { background: #c9d4e3; color: var(--ink); }
.mz :focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.screen-reader-text, .mz-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mz-skip { position: absolute; left: 16px; top: -100px; z-index: 50; padding: 10px 16px; background: var(--acc); color: var(--on-acc); font-weight: 600; }
.mz-skip:focus { top: 12px; }

.mz-wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.mz-lbl { font: 500 12px/1.4 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); }
.mz-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mz-diamond { display: inline-block; width: 22px; height: 14px; flex: none; background: var(--acc); clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%); }

.mz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 26px; border: 0; font: 600 16px/1.2 var(--sans); color: var(--on-acc); background: var(--acc); cursor: pointer; transition: background .15s; }
.mz-btn:hover { background: var(--acc-2); }
.mz-btn--sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.mz-btn--light { background: var(--bg); color: var(--acc); }
.mz-btn--light:hover { background: #fff; }
.mz-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.mz-btn--ghost:hover { background: var(--panel); }
.mz-more { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--acc); }
.mz-more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ─── Mosaic stones (inline SVG, baked or live) ─── */
.mz-t1, .mz-t0, .mz-ta { stroke: var(--mz-joint); stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mz-t1 { fill: var(--mz-t1); }
.mz-t0 { fill: var(--mz-t0); }
.mz-ta { fill: var(--mz-acc); }
.mz-glint { fill: none; stroke: var(--mz-spark); stroke-linecap: round; }
.mz-glint path { vector-effect: non-scaling-stroke; }
.mz-glint__halo { stroke-width: 7; stroke-opacity: .25; }
.mz-glint__core { stroke-width: 3; }
.mz-trace { fill: none; stroke: var(--mz-spark); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mz-bed { fill: var(--mz-bed); }   /* under the stones: shows where they come loose */
.mz-seam { fill: none; stroke: var(--mz-gold); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mz-sandy .mz-t1, .mz-sandy .mz-t0, .mz-sandy .mz-ta { stroke: none; }   /* «sand»: the joints are their own lines */
.mz-sandy .mz-bed { fill: var(--mz-t0); }
.mz-jl { fill: none; stroke: var(--mz-joint); stroke-width: 1.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mz-painting__canvas canvas.mz-sand { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.mz-thread { fill: none; stroke: var(--mz-gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ─── Header ─── */
.mz-hdr { position: relative; z-index: 20; border-bottom: 1px solid var(--line); background: var(--bg); }
.mz-hdr__in { display: flex; align-items: center; gap: 32px; height: var(--hdr); }
.mz-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.mz-brand svg { width: 34px; height: 24px; flex: none; }
.mz-brand b { display: block; font-weight: 650; font-size: 19px; line-height: 1.15; letter-spacing: -.01em; }
.mz-brand small { display: block; font-size: 13px; line-height: 1.1; color: var(--ink-2); }
.mz-nav { display: flex; gap: 28px; font-size: 15px; font-weight: 500; }
.mz-nav a { padding: 6px 0; border-bottom: 1px solid transparent; }
.mz-nav a:hover, .mz-nav a[aria-current] { border-color: var(--ink); }
.mz-dd { position: relative; }
.mz-dd__btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; border-bottom: 1px solid transparent; background: none; font: inherit; color: inherit; cursor: pointer; }
.mz-dd__btn .mz-icon { width: 12px; height: 12px; transition: transform .15s; }
.mz-dd:hover .mz-dd__btn, .mz-dd.is-open .mz-dd__btn, .mz-dd__btn.is-current { border-color: var(--ink); }
.mz-dd:hover .mz-dd__btn .mz-icon, .mz-dd.is-open .mz-dd__btn .mz-icon { transform: rotate(180deg); }
.mz-dd__menu { display: none; position: absolute; top: 100%; left: -24px; z-index: 30; padding-top: 21px; }   /* the padding bridges the hover to the header's edge */
.mz-dd:hover .mz-dd__menu, .mz-dd.is-open .mz-dd__menu { display: block; }
.mz-dd__menu ul { width: 400px; padding: 6px 0; background: var(--tint); border: 1px solid var(--tint-line); border-top: 2px solid var(--acc); box-shadow: 0 30px 50px -30px rgba(31, 59, 97, .5); }
.mz-dd__menu li + li { border-top: 1px solid var(--tint-line); }
.mz-nav .mz-dd__menu a { display: block; padding: 13px 24px; border: 0; line-height: 1.35; transition: background-color .15s, box-shadow .15s; }
.mz-nav .mz-dd__menu a:hover, .mz-nav .mz-dd__menu a:focus-visible { background: var(--tint-2); color: var(--acc); box-shadow: inset 3px 0 0 var(--gold); }
@media (prefers-reduced-motion: reduce) { .mz-dd__btn .mz-icon { transition: none; } }
.mz-hdr__phone { font-weight: 600; font-size: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mz-icon-btn { display: none; width: 46px; height: 46px; padding: 0; align-items: center; justify-content: center; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }

/* ─── Hero: text on the left, the painting hangs on the right ─── */
.mz-hero { border-bottom: 1px solid var(--line); }
.mz-hero__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: 0 56px; align-content: center; align-items: end; min-height: min(calc(100vh - var(--hdr)), 800px); padding-top: 56px; padding-bottom: 56px; }
.mz-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
/* byline above the heading: a small upright portrait in a gold frame */
.mz-byline { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; font-size: 15px; line-height: 1.35; color: var(--ink-2); }
.mz-byline b { display: block; font-weight: 600; font-size: 17px; color: var(--ink); }
.mz-portrait { display: block; flex: none; width: 60px; height: 76px; overflow: hidden; background: var(--panel); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--gold); }
.mz-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.mz-display { font-weight: 600; font-size: clamp(40px, 3.9vw, 56px); line-height: 1; letter-spacing: -.035em; }
.mz-lead { margin-top: 28px; max-width: 30em; font-size: 20px; line-height: 1.55; color: var(--ink-2); }
.mz-lead b { font-weight: 500; color: var(--ink); }
.mz-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 36px; }
.mz-cta small { font-size: 15px; color: var(--ink-2); }
.mz-cta small a { color: var(--ink); font-weight: 600; white-space: nowrap; }
.mz-facts { grid-column: 1; align-self: start; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 52px; max-width: 600px; }
.mz-facts p { padding: 12px 0 10px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.mz-facts b { display: block; font-weight: 600; color: var(--ink); }

/* the painting: frame, passe-partout, canvas, museum label */
.mz-painting { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; width: min(100%, 440px); }
.mz-painting__frame { padding: 14px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(31, 36, 41, .05), 0 34px 60px -34px rgba(31, 36, 41, .45); }
.mz-painting__canvas { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--mz-t1); box-shadow: 0 0 0 1px rgba(31, 36, 41, .18); }
.mz-painting__canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity 1.1s ease; }
.mz-painting__canvas svg.is-new { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .mz-painting__canvas svg { transition: none; } }
.mz-painting figcaption { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 16px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.mz-painting figcaption b { display: block; margin-bottom: 2px; font-weight: 600; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink); }

/* ─── Sections ─── */
.mz-sec { padding: 104px 0; border-bottom: 1px solid var(--line); }
.mz-sec--panel { background: var(--panel); }
.mz-sec--first { padding-top: 72px; }
.mz-sec__head { display: grid; grid-template-columns: 4fr 8fr; gap: 12px 40px; align-items: end; margin-bottom: 52px; }
.mz-sec__head > .mz-lbl { grid-column: 1 / -1; }
.mz-sec__head > h2:last-child { grid-column: 1 / -1; max-width: 18em; }   /* heading without a note */
.mz-sec__head > p:not(.mz-lbl) { max-width: 34em; color: var(--ink-2); justify-self: end; }
.mz-sec__head--page { grid-template-columns: 1fr; align-items: start; }
.mz-sec__head--page > p:not(.mz-lbl) { justify-self: start; font-size: 20px; line-height: 1.55; }
.mz-title { font-weight: 600; font-size: clamp(38px, 4.4vw, 62px); line-height: 1.04; letter-spacing: -.03em; }
.mz-h2, .mz-sec__head h2 { font-weight: 600; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -.025em; }

/* two stones (approach) */
.mz-stones-sec { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.mz-stones-fig { display: grid; gap: 22px; padding: 44px 40px 30px; background: var(--bg); border: 1px solid var(--line); }
.mz-stones { width: 100%; height: auto; display: block; }
.mz-stones .mz-arc { fill: none; stroke: var(--mz-acc); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.mz-stones-fig figcaption { display: grid; grid-template-columns: 126fr 124fr; font-size: 14px; color: var(--ink-2); }
.mz-stones-fig figcaption b { display: block; font-weight: 600; color: var(--ink); }
.mz-stones-text h2 { margin: 14px 0 22px; }
.mz-stones-text p:not(.mz-lbl) { max-width: 36em; color: var(--ink-2); }
.mz-stones-text p + p { margin-top: 14px; }
.mz-stones-text .mz-lbl + h2 + p { color: var(--ink); font-size: 20px; line-height: 1.5; }

/* practice areas: every card carries a different piece of the same floor */
.mz-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
/* hover/focus: the card rises a little, its edge turns blue, a gold rule
   lights under the patch and a few stones re-lay (main.js); «Подробнее»
   shows (always shown on touch screens) */
.mz-area { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--tint); border: 1px solid var(--tint-line); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .2s, background-color .2s; }
.mz-area:hover, .mz-area:focus-within { transform: translateY(-4px); background: #ebf0f6; border-color: var(--acc); box-shadow: 0 26px 44px -28px rgba(31, 59, 97, .6); }
.mz-area .mz-patch { display: block; width: 100%; height: auto; aspect-ratio: 4 / 1; background: var(--mz-t1); }
.mz-area .mz-ta { transition: fill .35s; }
.mz-area:hover .mz-ta, .mz-area:focus-within .mz-ta { fill: var(--mz-gold); }
.mz-patch .mz-stone { transition: transform .9s cubic-bezier(.45, 0, .2, 1), fill .9s; }
.mz-patch .mz-stone.is-moving { fill: var(--mz-lit); }
.mz-area__body { display: flex; flex-direction: column; flex: 1; padding: 26px 30px; border-top: 2px solid transparent; transition: border-color .35s; }
.mz-area:hover .mz-area__body, .mz-area:focus-within .mz-area__body { border-top-color: var(--gold); }
.mz-area .mz-points, .mz-area .mz-points li { border-color: var(--tint-line); }
.mz-area__go { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: auto; padding: 0 18px; font-weight: 600; font-size: 15px; color: var(--on-acc); background: var(--acc); transition: background-color .15s, opacity .3s; }
.mz-area__go .mz-icon { transition: transform .3s; }
/* the whole card is the link (no transform on the link itself: it would
   become the box of this overlay) */
.mz-area__go::after { content: ""; position: absolute; inset: 0; }
.mz-area__go:hover { background: var(--acc-2); }
.mz-area__go:focus-visible { outline-offset: 4px; }
.mz-area .mz-points:has(+ .mz-area__go) { margin-bottom: 22px; }
@media (hover: hover) and (pointer: fine) {
  .mz-area__go { opacity: 0; }
  .mz-area__go .mz-icon { transform: translateX(-6px); }
  .mz-area:hover .mz-area__go, .mz-area:focus-within .mz-area__go { opacity: 1; }
  .mz-area:hover .mz-area__go .mz-icon, .mz-area:focus-within .mz-area__go .mz-icon { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mz-area, .mz-area:hover, .mz-area:focus-within, .mz-area__go .mz-icon { transform: none !important; }
}
.mz-area__body h2, .mz-area__body h3 { margin: 10px 0 10px; font-weight: 600; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; }
.mz-area__body p:not(.mz-lbl) { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.mz-points { margin-top: 16px; border-top: 1px solid var(--line); }
.mz-points li { position: relative; padding: 10px 0 10px 24px; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; }
.mz-points li:last-child { border-bottom: 0; }
.mz-points li::before { content: ""; position: absolute; left: 0; top: 17px; width: 11px; height: 7px; background: var(--acc); clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%); }

/* about */
.mz-about { display: grid; grid-template-columns: 7fr 4fr; gap: 64px; align-items: start; }
.mz-quote { font-weight: 500; font-size: clamp(28px, 3vw, 40px); line-height: 1.2; letter-spacing: -.02em; }
.mz-quote::before { content: ""; display: block; width: 44px; height: 28px; margin-bottom: 28px; background: var(--acc); clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%); }
.mz-about__text { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; margin-top: 40px; color: var(--ink-2); }
.mz-about .mz-lbl:first-child { margin-bottom: 22px; }
.mz-about .mz-more { margin-top: 32px; }
.mz-photo { display: grid; grid-template-rows: 1fr auto; aspect-ratio: 4 / 5; background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.mz-sec--panel .mz-photo { background: var(--bg); }
.mz-photo > div { display: grid; place-items: center; min-height: 0; }
.mz-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mz-photo figcaption { padding: 12px 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); background: var(--paper); }

/* process: four steps */
.mz-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.mz-steps li { padding: 28px 28px 8px 0; }
.mz-steps li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.mz-n { display: grid; place-items: center; width: 64px; height: 44px; margin-bottom: 22px; font-weight: 600; font-size: 17px; color: var(--on-acc); background: var(--acc); clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%); }
.mz-steps h3 { margin-bottom: 8px; font-weight: 600; font-size: 21px; line-height: 1.25; }
.mz-steps p { font-size: 15.5px; color: var(--ink-2); }

/* «Четыре шага» on the front page and «Как строится работа» on the practice
   area pages: a deep-blue band; scrolled into view, a gold line runs along
   the steps and lights the numbers one by one (main.js adds .is-armed, then
   .is-on; without it everything is shown lit) */
.mz-sec--band { position: relative; background: var(--acc); color: #e7ecf2; border-bottom-color: var(--acc); }
.mz-sec--band .mz-lbl { color: #a9bcd3; }
.mz-sec--band .mz-sec__head h2, .mz-sec--band .mz-steps h3 { color: #fff; }
.mz-sec--band .mz-sec__head > p:not(.mz-lbl), .mz-sec--band .mz-steps p { color: #c8d3e0; }
.mz-sec--band .mz-steps { position: relative; border-top-color: rgba(255, 255, 255, .25); }
.mz-sec--band .mz-steps::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--gold); transform-origin: 0 50%; }
.mz-sec--band .mz-steps li + li { border-left-color: rgba(255, 255, 255, .14); }
.mz-sec--band .mz-steps li:nth-child(n) { border-top-color: rgba(255, 255, 255, .14); }
.mz-sec--band .mz-n { background: var(--mz-acc); color: var(--acc); transition: background-color .3s; }
.mz-sec--band .mz-steps li:hover .mz-n { background: var(--mz-spark); }
.mz-sec--band .mz-steps.is-armed::before { transform: scaleX(0); transition: transform 2.2s cubic-bezier(.4, 0, .2, 1); }
.mz-sec--band .mz-steps.is-armed li { opacity: .4; transition: opacity .7s ease; }
.mz-sec--band .mz-steps.is-armed .mz-n { background: rgba(255, 255, 255, .14); color: #fff; transition: background-color .7s, color .7s; }
.mz-sec--band .mz-steps.is-on::before { transform: none; }
.mz-sec--band .mz-steps.is-on li { opacity: 1; }
.mz-sec--band .mz-steps.is-on .mz-n { background: var(--mz-acc); color: var(--acc); }
.mz-sec--band .mz-steps.is-on li:nth-child(2), .mz-sec--band .mz-steps.is-on li:nth-child(2) .mz-n { transition-delay: .55s; }
.mz-sec--band .mz-steps.is-on li:nth-child(3), .mz-sec--band .mz-steps.is-on li:nth-child(3) .mz-n { transition-delay: 1.1s; }
.mz-sec--band .mz-steps.is-on li:nth-child(4), .mz-sec--band .mz-steps.is-on li:nth-child(4) .mz-n { transition-delay: 1.65s; }

/* blog list */
.mz-posts { border-top: 1px solid var(--ink); }
.mz-post { display: grid; grid-template-columns: 3fr 8fr auto; gap: 16px 40px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--line); }
.mz-post h2, .mz-post h3 { margin-bottom: 6px; font-weight: 600; font-size: 23px; line-height: 1.25; letter-spacing: -.01em; }
.mz-post h2 a:hover, .mz-post h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.mz-post p { color: var(--ink-2); }
.mz-post .mz-lbl b { display: block; margin-top: 4px; font-weight: 500; letter-spacing: .06em; color: var(--ink); }
.mz-post__meta { margin-top: 10px; font-size: 14px; }
.mz-post > .mz-icon { margin-top: 6px; color: var(--ink-2); }
.mz-all { margin-top: 28px; }
.mz-empty { padding: 28px 0; border-top: 1px solid var(--ink); color: var(--ink-2); }
.mz-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.mz-tag { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); font-size: 14px; font-weight: 500; }
.mz-tag:hover { border-color: var(--ink); }
.mz-tag[aria-current] { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.mz-pages { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 40px; }
.mz-pages a, .mz-pages span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--line); font-weight: 500; }
.mz-pages a:hover { border-color: var(--ink); }
.mz-pages [aria-current] { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.mz-pages .dots { border-color: transparent; }

/* contact */
.mz-contact { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; }
.mz-contact__phone { display: block; margin: 8px 0 36px; font-weight: 600; font-size: clamp(36px, 4.4vw, 60px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mz-contact dl > div { display: grid; grid-template-columns: 140px 1fr; gap: 6px 24px; padding: 16px 0; border-top: 1px solid var(--line); }
.mz-contact dt { padding-top: 3px; }
.mz-contact dd a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mz-contact dd span { display: block; font-size: 15px; color: var(--ink-2); }
/* map and entrance photo under the address: a 4:3 map and a 3:4 photo, equal heights */
.mz-where { display: grid; grid-template-columns: 16fr 9fr; gap: 12px; margin: 4px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.mz-where__map, .mz-where__photo { display: block; overflow: hidden; background: var(--panel); box-shadow: 0 0 0 1px var(--line); }
.mz-where__map { aspect-ratio: 4 / 3; transition: box-shadow .15s; }
.mz-where__map:hover { box-shadow: 0 0 0 1.5px var(--acc); }
.mz-where img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mz-where__photo { display: grid; place-items: center; }
.mz-where__photo img { object-position: 25% 50%; }   /* the door is left of centre */
.mz-where figcaption { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; font-size: 15px; }
.mz-where figcaption a { font-weight: 600; border-bottom: 1px solid var(--line); }
.mz-where figcaption a:hover { color: var(--acc); border-color: currentColor; }
.mz-where figcaption small { margin-left: auto; font-size: 12px; color: var(--ink-2); }
.mz-card { position: relative; overflow: hidden; align-self: start; padding: 36px 34px 32px; background: var(--acc); color: #e7ecf2; }
.mz-card h2, .mz-card h3 { font-weight: 600; font-size: 28px; line-height: 1.15; color: #fff; }
.mz-card p { margin-top: 14px; color: #c8d3e0; }
.mz-card .mz-btn { margin-top: 26px; width: 100%; }
.mz-card .mz-btn + .mz-btn { margin-top: 10px; }
.mz-card .mz-btn--line { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.mz-card .mz-btn--line:hover { background: rgba(255, 255, 255, .08); }
.mz-fine { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; }
.mz-fine .mz-icon { width: 18px; height: 18px; margin-top: 2px; }

/* closing call to action */
.mz-next { display: grid; grid-template-columns: 7fr 5fr; gap: 24px 64px; align-items: end; }
.mz-next h2 { margin: 14px 0 14px; }
.mz-next p:not(.mz-lbl) { color: var(--ink-2); }
.mz-next .mz-cta { margin-top: 0; justify-self: end; }

/* /mosaic-preview/: the candidate animations side by side (temporary) */
.mz-pv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
.mz-pv .mz-painting__frame { padding: 12px; }
.mz-pv h2 { margin-top: 18px; font-weight: 600; font-size: 22px; line-height: 1.25; }
.mz-pv h2 .mz-lbl { display: block; margin-bottom: 4px; }
.mz-pv p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* practice area pages (page.php + altairlaw_area_sections) */
.mz-area-hero__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 64px; align-items: center; }
.mz-area-hero .mz-lbl { margin-bottom: 14px; }
.mz-area-hero .mz-title { font-size: clamp(36px, 3.8vw, 54px); }
.mz-area-hero .mz-lead { margin-top: 24px; }
.mz-area-hero__art { padding: 14px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(31, 36, 41, .05), 0 34px 60px -34px rgba(31, 36, 41, .45); }
.mz-area-hero__art .mz-patch { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; background: var(--mz-t1); }
.mz-area-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; }
.mz-area-cols__note { margin-top: 20px; max-width: 30em; color: var(--ink-2); }
.mz-points--lg { margin-top: 0; }
.mz-points--lg li { padding: 14px 0 14px 28px; font-size: 17px; }
.mz-points--lg li::before { top: 23px; }
.mz-points a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; transition: color .15s, text-decoration-color .15s; }
.mz-points a:hover, .mz-points a:focus-visible { color: var(--acc); text-decoration-color: currentColor; }
.mz-area-cols .mz-notice { margin-top: 28px; }
.mz-notice a { white-space: nowrap; font-weight: 600; }
.mz-others { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mz-others a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 24px 26px; background: var(--tint); border: 1px solid var(--tint-line); transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .2s, box-shadow .3s; }
.mz-others b { font-weight: 600; font-size: 19px; line-height: 1.3; }
.mz-others .mz-icon { margin-top: auto; color: var(--acc); }
.mz-others a:hover { transform: translateY(-3px); border-color: var(--acc); box-shadow: 0 22px 40px -28px rgba(31, 59, 97, .6); }
@media (prefers-reduced-motion: reduce) { .mz-others a:hover { transform: none; } }

/* ─── Articles and pages ─── */
.mz-article { max-width: 760px; }
.mz-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px; font-size: 15px; font-weight: 600; color: var(--acc); }
.mz-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.mz-article__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 22px; }
.mz-article__meta a { color: var(--acc); }
.mz-article .mz-lead { margin-top: 22px; }
.mz-featured { margin-top: 36px; border: 1px solid var(--line); }
.mz-featured img { display: block; width: 100%; }
.mz-article__body { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
.mz-notice { display: flex; gap: 12px; margin-top: 48px; padding: 18px 20px; background: var(--panel); border-left: 3px solid var(--acc); font-size: 15px; color: var(--ink-2); }
.mz-notice .mz-icon { margin-top: 2px; color: var(--acc); }
.mz-notice a { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }
.mz-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; border-top: 1px solid var(--ink); }
.mz-pager a { display: block; padding: 20px 0; }
.mz-pager a span { display: block; }
.mz-pager a span + span { margin-top: 4px; font-weight: 600; font-size: 18px; line-height: 1.3; }
.mz-pager a:hover span + span { text-decoration: underline; text-underline-offset: 4px; }
.mz-pager__next { grid-column: 2; text-align: right; }

/* editor content */
.mz-prose { max-width: 68ch; font-size: 18px; line-height: 1.7; }
.mz-prose > * + * { margin-top: 1.1em; }
.mz-prose h2 { margin-top: 1.8em; font-weight: 600; font-size: 28px; line-height: 1.2; letter-spacing: -.015em; }
.mz-prose h3 { margin-top: 1.6em; font-weight: 600; font-size: 22px; line-height: 1.25; }
.mz-prose h4 { margin: 1.4em 0 0; font-weight: 600; font-size: 18px; }
.mz-prose ul, .mz-prose ol { padding-left: 1.4em; }
.mz-prose ul { list-style: none; }
.mz-prose ul > li { position: relative; }
.mz-prose ul > li::before { content: ""; position: absolute; left: -1.3em; top: .62em; width: 11px; height: 7px; background: var(--acc); clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%); }
.mz-prose ol { list-style: decimal; }
.mz-prose li + li { margin-top: .4em; }
.mz-prose a { color: var(--acc); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mz-prose a:hover { text-decoration-thickness: 2px; }
.mz-prose strong, .mz-prose b { font-weight: 600; }
.mz-prose blockquote { padding: 4px 0 4px 22px; border-left: 3px solid var(--acc); font-size: 20px; color: var(--ink); }
.mz-prose figure { margin: 1.6em 0 0; }
.mz-prose figcaption, .mz-prose .wp-element-caption { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.mz-prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.mz-prose th, .mz-prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.mz-prose th { font-weight: 600; border-bottom-color: var(--ink); }
.mz-prose hr { height: 0; margin: 2em 0; border: 0; border-top: 1px solid var(--line); }
.mz-prose code { padding: 1px 5px; background: var(--panel); font-size: .92em; }
.mz-prose .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.mz-prose .alignleft { float: left; margin: .3em 1.4em 1em 0; }
.mz-prose .alignright { float: right; margin: .3em 0 1em 1.4em; }

/* ─── Footer ─── */
.mz-ftr { padding: 30px 0 40px; font-size: 14px; color: var(--ink-2); }
.mz-ftr__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
.mz-ftr nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.mz-ftr a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.mz-dock { display: none; }

/* ─── Responsive ─── */
@media (max-width: 1180px) {
  .mz-nav { display: none; }
  .mz-icon-btn--menu { display: inline-flex; }
  .mz-hdr.is-open .mz-nav { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 6px var(--gutter) 14px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .mz-hdr.is-open .mz-nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .mz-hdr.is-open .mz-dd__btn { width: 100%; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: default; }
  .mz-hdr.is-open .mz-dd__btn .mz-icon { display: none; }
  .mz-hdr.is-open .mz-dd__menu { display: block; position: static; padding: 0; }
  .mz-hdr.is-open .mz-dd__menu ul { width: auto; padding: 0; background: none; border: 0; box-shadow: none; }
  .mz-hdr.is-open .mz-dd__menu li + li { border-top: 0; }
  .mz-hdr.is-open .mz-nav .mz-dd__menu a { padding: 10px 0 10px 18px; border-bottom: 1px solid var(--line); font-weight: 400; }
  .mz-hdr.is-open .mz-nav .mz-dd__menu a:hover { background: none; }
}
@media (max-width: 1023px) {
  :root { --gutter: 28px; }
  .mz-hero__in { grid-template-columns: 1fr; min-height: 0; padding-top: 48px; }
  .mz-painting { grid-column: 1; grid-row: auto; justify-self: start; width: min(100%, 520px); margin-top: 44px; }
  .mz-facts { order: 1; }   /* after the painting */
  .mz-painting__canvas { aspect-ratio: 5 / 4; }
  .mz-stones-sec, .mz-about, .mz-contact, .mz-next, .mz-area-hero__in, .mz-area-cols { grid-template-columns: 1fr; gap: 44px; }
  .mz-area-cols { gap: 28px; }
  .mz-area-hero__art { max-width: 520px; }
  .mz-others { grid-template-columns: 1fr; gap: 14px; }
  .mz-next .mz-cta { justify-self: start; }
  .mz-stones-fig { max-width: 520px; }
  .mz-photo { max-width: 360px; }
  .mz-sec__head { grid-template-columns: 1fr; }
  .mz-sec__head > p:not(.mz-lbl) { justify-self: start; }
  .mz-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mz-pv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mz-steps li:nth-child(3) { padding-left: 0; border-left: 0; }
  .mz-steps li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
  :root { --gutter: 20px; --hdr: 64px; }
  body.mz { font-size: 16px; padding-bottom: 72px; }
  .mz-hdr__in { gap: 10px; }
  .mz-hdr__phone, .mz-hdr .mz-btn { display: none; }
  .mz-icon-btn--call { display: inline-flex; }
  .mz-brand b { font-size: 17px; }
  .mz-hero__in { padding-top: 36px; padding-bottom: 44px; }
  .mz-painting { margin-top: 36px; }
  .mz-painting__frame { padding: 10px; }
  .mz-glint__halo { stroke-width: 6; }
  .mz-glint__core { stroke-width: 2.5; }
  .mz-kicker { margin-bottom: 20px; }
  .mz-display { font-size: 38px; }
  .mz-portrait { width: 50px; height: 64px; }
  .mz-byline { margin-bottom: 22px; }
  .mz-lead { margin-top: 20px; font-size: 18px; }
  .mz-cta .mz-btn { width: 100%; }
  .mz-facts { grid-template-columns: 1fr; margin-top: 36px; }
  .mz-sec { padding: 68px 0; }
  .mz-sec--first { padding-top: 44px; }
  .mz-sec__head { margin-bottom: 34px; }
  .mz-sec__head--page > p:not(.mz-lbl) { font-size: 18px; }
  .mz-stones-fig { padding: 26px 20px 20px; }
  .mz-areas { grid-template-columns: 1fr; gap: 18px; }
  .mz-pv { grid-template-columns: 1fr; }
  .mz-area__body { padding: 22px 20px; }
  .mz-about__text { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .mz-steps { grid-template-columns: 1fr; }
  .mz-steps li, .mz-steps li + li { padding: 22px 0 18px; border-left: 0; }
  .mz-steps li + li { border-top: 1px solid var(--line); }
  .mz-n { margin-bottom: 14px; }
  .mz-post { grid-template-columns: 1fr; gap: 8px; }
  .mz-post > .mz-icon { display: none; }
  .mz-contact dl > div { grid-template-columns: 1fr; gap: 2px; }
  .mz-card { padding: 28px 22px 24px; }
  .mz-prose { font-size: 17px; }
  .mz-pager { grid-template-columns: 1fr; gap: 0; }
  .mz-pager__next { grid-column: 1; text-align: left; border-top: 1px solid var(--line); }
  .mz-ftr__in { flex-direction: column; }
  .mz-dock { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
  .mz-dock a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; font-weight: 600; font-size: 16px; }
  .mz-dock a:first-child { box-shadow: inset 0 0 0 1px var(--ink); }
  .mz-dock a + a { background: var(--acc); color: var(--on-acc); }
}

/* WordPress admin bar (logged-in visitors) */
.admin-bar .mz-skip:focus { top: 44px; }