/* Kupenov & Burova — custom brand overrides (loaded after the Webflow CSS) */

/* Header logo swap (Kupenov & Burova). The template's .logo had no size,
   so the SVG rendered at its intrinsic 123x40. We match that footprint:
   48px tall keeps the same ~123px width while giving the richer artwork
   (monogram + Lady Justice) room to read on the white sticky navbar. */
.kupenov-logo {
  height: 48px;
  width: auto;
  max-width: none;
  display: block;
}

@media screen and (max-width: 767px) {
  .kupenov-logo { height: 42px; }
}

@media screen and (max-width: 479px) {
  .kupenov-logo { height: 38px; }
}

/* ──────────────────────────────────────────────────────────────────
   Header contact cluster (.nav-right) — equal-width, precisely aligned.

   Both boxes share ONE geometry (measured with the live DM Sans font):
     text column 156px  +  gap 12px  +  icon 28px  =  196px content
     +  20px divider padding  =  216px per box  (mathematically equal)
   Number + email are 14px; the widest rendered line (the email address)
   fits the 156px column without wrapping.
   Divider between the two boxes is a 1px box-shadow (adds no width, so
   the two boxes stay exactly equal) sitting 20px from each box's text.
   ────────────────────────────────────────────────────────────────── */
.nav-right { column-gap: 0; grid-column-gap: 0; }

.phone-content-split {                 /* phone box (first) */
  gap: 12px;
  align-items: center;
  padding: 14px 20px 14px 0;
  border-right: 0;
  box-shadow: 1px 0 0 #e6ecf0;         /* divider — no layout width */
}
.email-content-split {                 /* email box (last, mirrors phone) */
  padding: 14px 0 14px 20px;
  box-shadow: none;
}

.phone-content-left {                  /* identical text column in both boxes */
  width: 156px;
  flex-shrink: 0;
}
.phone-content-left .phone-text { white-space: nowrap; }

.phone-text { font-size: 14px; }       /* smaller numbers + email, consistent */
.phone-content-split .phone-link { line-height: 1.3; }

/* Narrow headers can't hold two boxes. The nav grew from 6 items to 7 (+2
   dropdowns), and at 1024px the ORIGINAL 6-item nav already overflowed its
   container by 2px — so the email box drops out early to buy back its width
   for the menu. Phone box keeps its own divider only while it actually has a
   neighbour to be divided from.

   The cut moved from 1279 to 1439 when the language switcher landed. Measured
   at 1280: brand 180 + nav 594 + phone 188 + email 188 + switcher 112 = 1262
   in a 1235 container, i.e. 27px of overflow and a clipped EL. Dropping the
   email box frees 188 and leaves 161px of slack. The address is still in the
   footer and on /contact; a language switcher that runs off the edge is the
   worse failure. */
/* Cut moved again, 1439 -> 1599: at 1440 the email box returns and the GREEK nav
   — the widest of the three — put the switcher 22px past the viewport. Measured
   across en/bg/el at 992/1024/1200/1280/1440/1600. */
@media screen and (max-width: 1599px) {
  .email-content-split { display: none; }
  .phone-content-split { box-shadow: none; padding-right: 0; }
}

/* ──────────────────────────────────────────────────────────────────
   HEADER NAVIGATION — real Kupenov & Burova IA
   Markup is generated by build/build.py from build/ia.json; never hand-edit
   the <nav class="nav-menu"> block in the 43 page files.

   Width budget at 1280 (measured, DM Sans/Assistant live):
     container 1235 − brand 180 − nav-right 432 = 623px available
     7 labels 345 + 2 arrows + 6 gaps × 40  = 585px used      → 38px slack
   In the 992–1279 band the email box is hidden (above) and the gap tightens,
   which is what keeps the 7-item nav off the phone cluster.
   ────────────────────────────────────────────────────────────────── */
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .nav-menu-wrap { column-gap: 26px; grid-column-gap: 26px; }
  .nav-brand-wrapper { padding-right: 24px; }
}

/* Manrope (the Cyrillic+Greek replacement for Assistant) sets wider than the
   original, which ate the header's entire slack — measured exactly 0px free at
   1280. The template widens the nav gap at 1280/1440; those values are pulled
   back so there is real headroom, which BG and EL will need: „Начало Услуги
   Контакти" runs longer than "Home Services Contact". */
@media screen and (min-width: 1280px) {
  .nav-menu-wrap { column-gap: 32px; grid-column-gap: 32px; }
}
@media screen and (min-width: 1440px) {
  .nav-menu-wrap { column-gap: 38px; grid-column-gap: 38px; }
}

/* Mega menu (Services, 2 columns) and compact menu (Team, 1 column).
   The template only shipped a 400px `.for-pages` panel, too narrow for
   keyword-bearing labels like "Trademark Registration". 3-class selectors
   beat the template's `.dropdown-list` / `.dropdown-list.for-pages`. */
@media screen and (min-width: 992px) {
  .dropdown-list.for-pages.is-mega { width: 560px; min-width: 560px; }
  /* Services: one column of 8; the panel takes the width of its longest
     label in each language, so no name wraps. */
  .dropdown-list.for-pages.is-compact { width: max-content; min-width: 280px; left: -40px; }
  .dropdown-list.for-pages.is-compact .page-link-text { white-space: nowrap; }
}

/* ≤991 the navbar collapses into the drawer and Webflow makes the panel
   static + full-bleed; the desktop widths must not leak in. */
@media screen and (max-width: 991px) {
  .dropdown-list.for-pages.is-mega,
  .dropdown-list.for-pages.is-compact { width: auto; min-width: 0; left: auto; }
  .dropdown-list.for-pages.is-mega .dropdown-menu { grid-template-columns: 1fr 1fr; }
}

@media screen and (max-width: 479px) {
  .dropdown-list.for-pages.is-mega .dropdown-menu { grid-template-columns: 1fr; }
}

/* Dropdown toggle needs its own active state: Webflow only sets `w--current`
   on <a> elements, and the toggle is a <div>. build.py adds `is-active` when
   the current route is the hub or any child of it. */
.dropdown-toggle.is-active { color: #08003d; }

/* Hub link that closes each column ("All Legal Services", "Meet the Team"). */
.page-link.is-hub { margin-top: 2px; }
.page-link.is-hub .page-link-text {
  color: var(--color-primary);
  font-weight: 600;
}

/* The template styles `.page-link-text` only on :hover, so the dropdown item
   for the page you are actually on was indistinguishable from the rest.
   Webflow does set `w--current` on it — it just had nothing to hook onto. */
.page-link.w--current .page-link-text {
  color: #08003d;
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────────
   Team grid — two lawyers (Kupenov, Burova).

   The template's grids are 1fr×4 (.attorney-grid, home/about) and 1fr×3
   (.lawyer-grid, /team) for invented attorneys. With two cards those leave
   empty cells, so on desktop the grid is two card-width columns, centred —
   the cards keep the same ~410px width they had in the three-column row.
   Tablet keeps the template's 1fr 1fr, mobile its single column.
   Cards are now links to the individual profiles, which the template's
   cards were not — that internal linking feeds E-E-A-T on YMYL pages.
   ────────────────────────────────────────────────────────────────── */
@media screen and (min-width: 992px) {
  .attorney-grid,
  .lawyer-grid {
    grid-template-columns: repeat(2, minmax(0, 410px));
    justify-content: center;
  }
}

.attorney-name-link { text-decoration: none; }
.attorney-name-link .attorney-name { transition: color .3s; }
.attorney-name-link:hover .attorney-name { color: var(--color-primary); }

/* ──────────────────────────────────────────────────────────────────
   Article review state (/blog/*)

   These articles are published during the build phase, so the review
   warning is driven by outstanding `verify:` items rather than by draft
   status — publishing must not silently hide unconfirmed figures.
   Red, not amber: every mark is a legal figure nobody has checked yet.
   ────────────────────────────────────────────────────────────────── */
.review-banner {
  border: 2px solid #b91c1c;
  border-left-width: 8px;
  background: #fef2f2;
  color: #7f1d1d;
  border-radius: 6px;
  padding: 20px 24px;
  margin-bottom: 36px;
  font-family: 'DM Sans', 'DM Sans Fallback', sans-serif;
  font-size: 15px;
  line-height: 1.65;
}
.review-banner strong {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
  color: #b91c1c;
}
.review-banner p { margin: 0 0 10px; }
.review-banner ul { margin: 12px 0 0 20px; list-style: disc; }
.review-banner li { margin-bottom: 5px; }
.review-banner code {
  background: #fee2e2;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 13px;
}
.review-banner-clear { margin-top: 14px; font-size: 13.5px; opacity: .85; }

/* Inline marker on every unverified figure in the body copy. */
mark.needs-review {
  background: #fee2e2;
  color: #b91c1c;
  border-bottom: 2px solid #b91c1c;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  font-size: .94em;
}

/* Markdown body: the template styles Webflow rich text, not raw <h2>/<ul>. */
.article-body h2 {
  font-size: 30px;
  line-height: 1.25;
  margin-top: 40px;
  margin-bottom: 14px;
}
.article-body p { margin-bottom: 18px; line-height: 1.7; }
.article-body ul { margin: 0 0 20px 22px; list-style: disc; }
.article-body li { margin-bottom: 8px; line-height: 1.65; }
.article-body strong { color: #08003d; font-weight: 600; }
.article-body a { color: var(--color-primary); text-decoration: underline; }

/* Listing marker for an article still carrying unverified figures. */
.blog-author-name.is-pending {
  color: #b91c1c;
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────────
   Headshot placeholders (assets/brand/placeholder-person.svg)

   The template's photo classes carry NO sizing rules — layout came entirely
   from each PNG's intrinsic dimensions. An SVG has none, so the swap collapsed
   to 0x0. These reinstate the ORIGINAL aspect ratios so nothing shifts, and
   object-fit: cover means a real photo can be dropped in later at any size and
   crop identically.
     attorney / lawyer cards  410x450
   ────────────────────────────────────────────────────────────────── */
.attorney-image,
.lawyer-image {
  display: block;
  width: 100%;
  aspect-ratio: 410 / 450;
  object-fit: cover;
}

/* ──────────────────────────────────────────────────────────────────
   /packages — four cards, not three SaaS tiers

   The template grid is 1fr 1fr 1fr, so four packages left one orphaned on
   its own row. 2x2 is the clean shape for four. Tablet already collapses to
   1fr 1fr and mobile to 1fr, so only the desktop rule needs overriding.

   Padding: `.pricing-card-header` has 40px but `.pricing-plan-block` only
   20px, and the button row had none at all — so body text ran closer to the
   border than the heading above it. Matched to 40px throughout.

   `.pricing-plan-text` shipped `line-height: 1`, which is fine for the
   template's one-word feature labels ("Robust customer data") but sets solid
   when a real sentence wraps.
   ────────────────────────────────────────────────────────────────── */
@media screen and (min-width: 992px) {
  .pricing-grid { grid-template-columns: 1fr 1fr; }
}

.pricing-plan-block {
  padding-left: 40px;
  padding-right: 40px;
}

.pricing-card .center-align {
  padding-left: 40px;
  padding-right: 40px;
}

.pricing-plan-text { line-height: 1.55; }

/* Check icon should sit on the first line of a wrapping item, not centre on
   the whole block. */
.pricing-plan-item { align-items: flex-start; }
.pricing-plan-item .check-icon { flex: none; margin-top: 0.3em; }

/* The "suited to…" line closes each card. */
.pricing-plan-item.is-note {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid #e6ecf0;
}
.pricing-plan-item.is-note .pricing-plan-text { color: #83809e; font-size: 15px; }

@media screen and (max-width: 479px) {
  .pricing-plan-block,
  .pricing-card .center-align { padding-left: 24px; padding-right: 24px; }
}

.contact-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 24px; }
.contact-action {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 26px;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  color: var(--color-primary);
  font-family: 'DM Sans', 'DM Sans Fallback', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-action.is-primary { background: var(--color-primary); color: #fff; }
.contact-action:hover { opacity: .88; }
.contact-action:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* Enquiry form */
.contact-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media screen and (max-width: 640px) { .contact-field-row { grid-template-columns: 1fr; } }
.contact-field { margin-bottom: 20px; }
.contact-field .field-label {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
}
.contact-form .w-input,
.contact-form .w-select,
.contact-form textarea {
  width: 100%;
  border: 1px solid #d9e2e8;
  border-radius: 4px;
  padding: 12px 14px;
  font-family: 'DM Sans', 'DM Sans Fallback', sans-serif;
  font-size: 16px;
  color: var(--color-primary);
  background: #fff;
}
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form .w-input:focus,
.contact-form .w-select:focus,
.contact-form textarea:focus { border-color: var(--color-primary); outline: none; }
.contact-form .w-input:disabled,
.contact-form .w-select:disabled,
.contact-form textarea:disabled { background: #f6f8fa; cursor: not-allowed; }

.contact-submit {
  background: var(--color-primary);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 14px 34px;
  font-family: 'DM Sans', 'DM Sans Fallback', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.contact-submit:disabled { background: #b3c2d1; cursor: not-allowed; }

.contact-form-note {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: #83809e;
}
.contact-form-note a { color: var(--color-primary); }

/* ──────────────────────────────────────────────────────────────────
   TRILINGUAL CHROME — language switcher + untranslated notice.

   Blueprint §4 requires the switcher to link the EQUIVALENT page, not the
   home page; Header.astro builds each href from the current neutral route.
   Languages without copy yet are shown dimmed rather than hidden, so the set
   of languages the firm offers reads the same on every page.
   ────────────────────────────────────────────────────────────────── */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 18px;
  padding-left: 18px;
  box-shadow: -1px 0 0 #e6ecf0;          /* divider — adds no layout width */
  flex-shrink: 0;
}

.lang-link {
  display: block;
  padding: 5px 7px;
  border-radius: 4px;
  font-family: 'DM Sans', 'DM Sans Fallback', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  color: #83809e;
  text-decoration: none;
  transition: color .2s, background-color .2s;
}

.lang-link:hover { color: var(--color-primary); background: #f2f6f9; }

.lang-link.is-current {
  color: #fff;
  background: var(--color-primary);
}

/* Not translated yet. Dimmed, not hidden — and never disabled: the page does
   exist, it just says so in that language and is kept out of the index. */
.lang-link.is-pending { opacity: .45; }
.lang-link.is-pending:hover { opacity: .75; }

/* The 992-1279 band cannot hold brand + a 7-item nav + phone + switcher once the
   labels are Bulgarian or Greek. Measured on /bg at 1024: the header ran 1072px
   into a 1024px viewport and pushed EL clean off the screen; English fits there,
   which is why this only shows up after translation.

   So in that band the phone box drops out as well as the email box, and the nav
   gap and switcher tighten. Losing the header phone number on a small laptop is
   a real cost — it is a conversion element for a law firm — but it is the lesser
   one: the numbers are still in the footer, on /contact, and in the mobile
   drawer, whereas a language switcher hanging off the edge of the page is
   broken on a site whose whole point is being trilingual. */
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .phone-content-split { display: none; }
  .nav-menu-wrap { column-gap: 18px; grid-column-gap: 18px; }
  .lang-switcher { margin-left: 12px; padding-left: 12px; }
  .lang-link { padding: 5px 5px; font-size: 11px; }
}

.translation-notice {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  margin: 0;
  padding: 10px 24px;
  background: #fff8e6;
  border-bottom: 1px solid #f0dfb0;
  font-family: 'DM Sans', 'DM Sans Fallback', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #6b5514;
}
.translation-notice strong { font-weight: 600; }

/* Bulgarian and Greek labels run longer than English — „Юридически услуги" and
   «Συμβουλευτικές Υπηρεσίες» both wrapped mid-item, which pushed the navbar to
   two lines. The nav is a single row by design; let it stay one. */
.navbar-link,
.dropdown-text { white-space: nowrap; }

/* A language with no version of this page at all — not merely untranslated.
   Rendered as text, never a link, so the switcher cannot dead-end. */
.lang-link.is-absent { opacity: .28; cursor: default; }

/* The root 404 is served for paths outside /en, /bg and /el, where Cloudflare has
   no way to know the visitor's language, so it says so in all three. Inside a
   language folder the nearest [lang]/404.html answers instead. */
.not-found-alt {
  font-family: Prata, 'Prata Fallback', serif;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--color-primary);
  opacity: .72;
  margin-top: 6px;
}
.not-found-alt a { color: inherit; }

/* Language 404s: a short list of useful next pages. */
.not-found-links {
  list-style: none;
  margin: 18px 0 28px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
}
.not-found-links a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Footer logo. The template's `.logo` class carries NO sizing — the Liberty Law
   footer mark was an SVG whose small intrinsic size did the work. Swapping in a
   1203x448 PNG therefore rendered it at full size, 1203px wide inside the
   footer. Same trap the header logo hit. Sized explicitly, a little larger than
   the header's 48px because a footer lockup carries more weight. */
.kupenov-logo-footer {
  height: 56px;
  width: auto;
  max-width: 100%;
  display: block;
}

@media screen and (max-width: 991px) {
  .kupenov-logo-footer { height: 48px; }
}

@media screen and (max-width: 479px) {
  .kupenov-logo-footer { height: 42px; }
}

/* Long-form text pages (privacy, legal notice). */
.text-page .service-single-content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.text-page .service-single-sub-heading { margin-top: 36px; }
.text-page-updated { margin-top: 36px; font-size: 14px; color: #83809e; }

/* ──────────────────────────────────────────────────────────────────
   Greek articles (src/pages/el/blog/*): "Σχετικά άρθρα" + call/email block,
   rendered by GreekArticleFooter.astro after the verbatim article body.
   Also the related-article line on /el/services/company-registration.
   Tap targets reuse .contact-actions / .contact-action from /contact.
   ────────────────────────────────────────────────────────────────── */
.article-related {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid #e6ecf0;
}
.article-related-title,
.article-cta-title {
  margin: 0 0 20px;
  font-size: 30px;
  line-height: 1.25;
}
.article-related-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.article-related-item { margin: 0; }
.article-related-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 20px 22px;
  border: 1px solid #e6ecf0;
  border-radius: 4px;
  background: #fff;
  text-decoration: none;
  transition: border-color .2s ease;
}
.article-related-link:hover { border-color: var(--color-primary); }
.article-related-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.article-related-kind {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--color--secondary);
}
.article-related-name {
  color: var(--color-primary);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.article-related-desc { font-size: 15px; line-height: 1.55; color: #83809e; }

.article-cta {
  margin-top: 48px;
  padding: 32px;
  border-radius: 4px;
  background: var(--color--off-white);
}
.article-cta-text { margin: 0 0 24px; font-size: 17px; line-height: 1.6; }
.article-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
}
.article-cta-row + .article-cta-row { margin-top: 10px; }
.article-cta-label {
  min-width: 120px;
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 600;
}
.article-cta .contact-actions { margin: 8px 0; }

@media screen and (max-width: 479px) {
  .article-related-title,
  .article-cta-title { font-size: 25px; }
  .article-cta { padding: 24px 18px; }
  .article-cta-row { flex-direction: column; align-items: stretch; }
  .article-cta .contact-actions { flex-direction: column; }
  .article-cta .contact-action { justify-content: center; }
}

.service-related-article {
  margin-top: 32px;
  padding: 18px 22px;
  border-left: 3px solid var(--color-primary);
  background: var(--color--off-white);
  font-size: 17px;
  line-height: 1.6;
}
.service-related-article a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ──────────────────────────────────────────────────────────────────
   Core Web Vitals: reserved image boxes, lawyer cards, button chevron.

   1. Every <img> in the built HTML carries its file's real pixel
      width/height, added after the build by the imgDimensions step in
      astro.config.mjs, so the browser reserves the box before the file
      arrives. Those attributes act as a CSS width and height; this rule lets
      CSS widths (width: 100%, max-width: 100%) scale the reserved box at the
      file's aspect ratio instead of stretching it. :where() keeps it at zero
      specificity, so every template rule that sets a height still wins.
   2. Lawyer / attorney cards (/team, home, about). The photo link is
      a.w-inline-block, i.e. shrink-to-fit, and the photo is width: 100% of
      it: 0 px wide until the file arrived, so each card grew from ~85 px to
      ~490 px when it did (team CLS 0.41-0.68 on phones). Below 480 px the
      grids also centre their items (justify-items: center), which made the
      card itself shrink-to-fit, hence the width on the card as well.
   3. The "›" after a button label is an inline SVG
      (components/ButtonChevron.astro), not a glyph from the 164 KB Font
      Awesome TTF. It fills the glyph's em box (0.625em x 1em); the margins
      add up to the line's leading, so the <p> keeps its exact height, and
      are split slightly top-light because that lands the SVG on the old
      glyph's pixels (measured against the font at 1x, 2x and 4x: within
      0.5 px).
   ────────────────────────────────────────────────────────────────── */
:where(img[width][height]) { height: auto; }

.lawyer-image-wrapper,
.attorney-image-wrapper { display: block; }
.single-lawyer,
.single-attorney { width: 100%; }

/* A heading typed in capitals (the legacy Greek article title) takes the
   capitals-sized fallback too, or it wraps onto an extra line until the
   web font arrives (fonts.css, 'Prata Caps Fallback'). */
.service-single-title.is-caps { font-family: Prata, 'Prata Caps Fallback', serif; }

.button-icon-chevron {
  display: block;
  width: .625em;
  height: 1em;
  margin: .025em 0 .075em;
  margin-block: calc((1lh - 1em) / 2 - .025em) calc((1lh - 1em) / 2 + .025em);
  fill: currentColor;
}

/* ──────────────────────────────────────────────────────────────────
   Verification fixes (2026-10).
   ────────────────────────────────────────────────────────────────── */




/* Blog cards (/blog and the home page): the picture link is a shrink-to-fit
   .w-inline-block, so it had no width until the image arrived and every card
   jumped (CLS 0.25-0.48 on /blog). Same fix as the lawyer cards above. */
.single-blog-link.image-spacer { display: block; }

/* /team: a name that wraps (the Greek one carries the Latin spelling in
   brackets) filled the card and sat flush left under a centred role line. */
.lawyer-info-wrapper,
.lawyer-info-wrapper .lawyer-name { text-align: center; }
/* /team: one line per lawyer under the role (practice areas, since 2004), so
   the page that replaced the old «Екип» CV page is more than two names. */
.lawyer-bio {
  margin: 12px auto 0;
  max-width: 30em;
  font-size: 16px;
  line-height: 1.6;
  color: #4a4a52;
  text-wrap: pretty;
}

/* Privacy notice and legal notice: consecutive paragraphs had no gap. */
.text-page .service-single-content + .service-single-content { margin-top: 14px; }

/* /about "Meet our founders": the template's 9ch measure broke the Greek and
   Bulgarian heading one word per line on desktop. */
@media screen and (min-width: 992px) {
  .founder-title:lang(el),
  .founder-title:lang(bg) { max-width: 14ch; }
}

/* Supporting text in the article and service blocks on the off-white or white
   background: #83809e was 3.5-3.8:1; this grey is about 5.8:1 (WCAG AA). */
.service-related-article,
.article-cta-text,
.article-related-desc { color: #5f5c78; }

/* Phones and tablets: the EN/BG/EL links were 22px tall and EL touched the
   menu button. A taller invisible hit area (no change to the look or the
   header height) and a gap before the menu button. */
@media screen and (max-width: 991px) {
  .lang-link { position: relative; }
  .lang-link::after { content: ''; position: absolute; inset: -11px 0; }
  .lang-switcher { margin-right: 8px; }
}

/* Services hub (/services). */
.services-hub-group + .services-hub-group { margin-top: 48px; }
.services-hub .service-single-sub-heading { margin-bottom: 20px; }

/* Real Estate Kupenov banner at the end of the Greek articles
   (components/LegacyBanner.astro): scales down instead of being squashed. */
.legacy-banner { margin-top: 40px; text-align: center; }
.legacy-banner img { display: inline-block; max-width: 100%; height: auto; }

/* 480-575px: the template shows the header phone box from 480px up, but
   brand + phone box + language switcher + menu button need ~553px, so every
   page scrolled sideways in that band (measured: 553px of content at 480-540).
   Below 480 the template already hides it; the numbers stay in the mobile
   menu, the footer and /contact. */
@media screen and (min-width: 480px) and (max-width: 575px) {
  .phone-content-split { display: none; }
}

/* ──────────────────────────────────────────────────────────────────
   HOMEPAGE HERO (concept A, 2026-10-27): one headline, one photo.

   Replaces the template hero (three stacked title lines with a BG·GR pill,
   a three-city photo strip and a half-cropped statue). Two columns on an
   off-white band: copy on the left, the Sofia Palace of Justice in an
   arch-topped frame on the right. Below 992px the photo moves under the copy.
   ────────────────────────────────────────────────────────────────── */
.hero-a {
  background: var(--color--off-white);
  padding: 64px 0 80px;
  max-width: 1920px;                   /* same cap as the JUSTICE band below */
  margin-left: auto;
  margin-right: auto;
}
.hero-a-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 64px;
  align-items: center;
}
.hero-a-copy { min-width: 0; }
.hero-a-eyebrow {
  margin: 0 0 18px;
  font-family: 'DM Sans', 'DM Sans Fallback', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #3a766f;                      /* --color--secondary darkened: 4.8:1 on off-white */
}
/* Greek capitals drop their accents in print convention; the browser's
   uppercase keeps them, so the Greek eyebrow stays in sentence case. */
.hero-a-eyebrow:lang(el) { text-transform: none; letter-spacing: .04em; font-size: 14px; }
.hero-a-title {
  margin: 0 0 22px;
  font-family: 'Prata', 'Prata Fallback', Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 3.9vw, 56px);
  line-height: 1.14;
  color: var(--color-primary);
  text-transform: none;
  text-wrap: balance;
  max-width: 15em;
}
.hero-a-lead {
  margin: 0 0 32px;
  max-width: 34em;
  font-size: 18px;
  line-height: 1.6;
  color: #4a4a52;
}
.hero-a-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-bottom: 36px;
}
.hero-a-button {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 14px 28px;
  border-radius: 4px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: background-color .2s ease;
}
.hero-a-button:hover { background: var(--color--dark-primary); color: #fff; }
.hero-a-link {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 16px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.hero-a-button:focus-visible,
.hero-a-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.hero-a-facts {
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid #e3ddd6;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: 14px;
  line-height: 1.5;
  color: #66666e;
}
.hero-a-figure {
  margin: 0;
  justify-self: end;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4 / 5;
  /* An arch: the top corners are half the width across and 40% of the
     height down, which on a 4:5 box is a true semicircle. */
  border-radius: 50% 50% 8px 8px / 40% 40% 8px 8px;
  overflow: hidden;
  background: #d9d6d1;
}
.hero-a-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 991px) {
  .hero-a { padding: 48px 0 64px; }
  .hero-a-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .hero-a-figure { justify-self: center; max-width: 420px; }
}
@media screen and (max-width: 479px) {
  .hero-a { padding: 36px 0 52px; }
  .hero-a-title { font-size: 32px; }
  .hero-a-lead { font-size: 17px; margin-bottom: 26px; }
  .hero-a-actions { margin-bottom: 28px; }
  .hero-a-button { width: 100%; justify-content: center; }
  .hero-a-figure { max-width: 100%; }
}
@media screen and (max-width: 359px) {
  .hero-a-title { font-size: 30px; }   /* BG keeps its three lines at 320px */
}

/* ──────────────────────────────────────────────────────────────────
   SITEWIDE CTA BAND (2026-10-27): a quiet heading instead of the giant
   "Let's talk." line and animated arrow.

   The template's stepped block is kept: the navy email box on the left, the
   hours bar along the bottom right. The heading and one sentence sit in the
   space beside the email box, above the bar (.cta-side wraps both), with the
   bar's own 30px inset so the heading lines up with "Monday – Friday".
   Phones stack heading, email box, hours bar.
   ────────────────────────────────────────────────────────────────── */
.section-cta { padding-top: 96px; }
.cta-side {
  flex: 0 1 70%;                       /* the template's .schedule-bar width */
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cta-side > .schedule-bar { width: 100%; }
.cta-quiet {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 30px;
}
.cta-quiet-rule {
  display: block;
  width: 48px;
  height: 1px;
  margin-bottom: 20px;
  background: var(--color--secondary);
}
.cta-quiet-title {
  margin: 0 0 12px;
  font-family: 'Prata', 'Prata Fallback', Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.2;
  color: var(--color-primary);
  text-transform: none;
}
.cta-quiet-text {
  margin: 0;
  max-width: 34em;
  font-size: 18px;
  line-height: 1.6;
  color: #4a4a52;
}
.cta-quiet-phone {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.cta-quiet-phone:hover { text-decoration: underline; text-underline-offset: 3px; }
.cta-quiet-phone:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media screen and (min-width: 1920px) {
  .cta-side { flex-basis: 73%; }
  .cta-quiet { padding-left: 80px; padding-right: 315px; }   /* = .schedule-bar.is-reverse */
}
@media screen and (max-width: 991px) {
  .section-cta { padding-top: 72px; }
  .cta-quiet { padding: 24px 30px 28px; }
  .cta-quiet-text { font-size: 17px; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  /* Same step as desktop: the box level with the heading, the bar starting
     where the box ends (the template bottom-aligns the box at this width). */
  .cta-bottom-wrap > .cta-big-button { margin-bottom: 0; align-self: flex-start; }
  .cta-quiet { min-height: 200px; }
}
@media screen and (max-width: 767px) {
  .section-cta { padding-top: 0; }
  .cta-bottom-wrap.is-reverse { flex-direction: column; }
  .cta-side { display: contents; }
  .cta-quiet { order: 1; align-self: stretch; padding: 64px 15px 32px; }
  .cta-bottom-wrap > .cta-big-button { order: 2; }
  .cta-side > .schedule-bar { order: 3; }
}



/* ──────────────────────────────────────────────────────────────────
   ABOUT — MEET OUR FOUNDERS (2026-10-27): both partners shown the same way.

   Replaces the template's single founder portrait and one-sided text. Two
   identical cards side by side: the hero's arch-topped portrait frame, name,
   role, a two-sentence background, practice areas, languages, profile link.
   The cards share their rows (subgrid), so the role lines, the facts and the
   links line up across both however long each background is. Phones stack.
   ────────────────────────────────────────────────────────────────── */
.founders-intro {
  max-width: 32em;
  margin: -30px auto 72px;
  text-align: center;
  font-family: 'Prata', 'Prata Fallback', Georgia, serif;
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.5;
  color: var(--color-primary);
  text-wrap: balance;
}
.founders-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 460px));
  grid-template-rows: repeat(6, auto);
  justify-content: center;
  column-gap: clamp(40px, 6vw, 96px);
}
.founder-card {
  grid-row: span 6;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
}
.founder-card-image-link { display: block; }
.founder-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 50% 50% 8px 8px / 40% 40% 8px 8px;   /* = .hero-a-figure */
  background: #d9d6d1;
  margin-bottom: 28px;
}
.founder-card-name {
  margin: 0 0 6px;
  font-family: 'Prata', 'Prata Fallback', Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 2.2vw, 32px);
  line-height: 1.2;
  color: var(--color-primary);
}
.founder-card-name a { color: inherit; text-decoration: none; }
.founder-card-name a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.founder-card-role {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #3a766f;                      /* the hero eyebrow's colour */
}
.founder-card-role:lang(el) { text-transform: none; letter-spacing: .03em; font-size: 14px; }
.founder-card-bio {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.65;
  color: #4a4a52;
  text-wrap: pretty;
}
.founder-card-facts {
  margin: 0 0 24px;
  padding-top: 18px;
  border-top: 1px solid #e3ddd6;
  display: grid;
  align-content: start;
  gap: 14px;
}
.founder-card-facts dt {
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #66666e;
}
.founder-card-facts dt:lang(el) { text-transform: none; letter-spacing: .02em; font-size: 13px; }
.founder-card-facts dd { margin: 0; font-size: 15px; line-height: 1.55; color: #33333a; text-wrap: pretty; }
.founder-card-link {
  justify-self: start;
  align-self: start;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 16px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-decoration-thickness .2s, text-underline-offset .2s;
}
.founder-card-link:hover { text-decoration-thickness: 2px; text-underline-offset: 4px; }
.founder-card-name a:focus-visible,
.founder-card-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
@media screen and (max-width: 767px) {
  .founders-intro { margin-bottom: 40px; }
  .founders-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 56px; }
  .founder-card { grid-row: auto; display: flex; flex-direction: column; width: 100%; max-width: 460px; margin-inline: auto; }
}

/* ──────────────────────────────────────────────────────────────────
   PRACTICE-AREA PAGES (/services/*), 2026-10-27: quiet, readable layout.
   Markup: components/ServicePage.astro. Header band in the hero's
   off-white with a modest serif title and the page's own photo; then one
   reading column (~70 characters a line) beside a small contact card.
   ────────────────────────────────────────────────────────────────── */
.svc-head {
  background: var(--color--off-white);
  padding: 44px 0 60px;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}
.svc-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 64px;
  align-items: center;
}
.svc-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 22px;
  font-size: 13px;
  color: #66666e;
}
.svc-crumbs a { color: inherit; text-decoration: none; }
.svc-crumbs a:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.svc-crumbs span { color: #b5b0a8; }
.svc-title {
  margin: 0 0 18px;
  max-width: 17em;
  font-family: 'Prata', 'Prata Fallback', Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.18;
  color: var(--color-primary);
  text-transform: none;
  text-wrap: balance;
}
.svc-lead {
  margin: 0;
  max-width: 34em;
  font-size: 18px;
  line-height: 1.6;
  color: #4a4a52;
  text-wrap: pretty;
}
.svc-figure {
  margin: 0;
  justify-self: end;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 5 / 4;
  border-radius: 8px;
  overflow: hidden;
  background: #d9d6d1;
}
.svc-image { display: block; width: 100%; height: 100%; object-fit: cover; }

.svc-body { padding: 64px 0 8px; }
.svc-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 680px) minmax(0, 320px);
  justify-content: space-between;
  gap: 64px;
  align-items: start;
}
.svc-main p {
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.75;
  color: #3f3f46;
  text-wrap: pretty;
}
.svc-h2 {
  margin: 44px 0 14px;
  font-family: 'Prata', 'Prata Fallback', Georgia, serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.3;
  color: var(--color-primary);
  text-transform: none;
}
.svc-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  margin: 28px 0 32px;
  padding: 28px 32px 16px;
  background: var(--color--off-white);
  border-radius: 8px;
}
.svc-lists ul { list-style: none; margin: 0; padding: 0; }
.svc-lists li {
  position: relative;
  margin: 0 0 14px;
  padding-left: 26px;
  font-size: 16px;
  line-height: 1.55;
  color: #33333a;
}
.svc-lists li::before {             /* a small check mark in the eyebrow teal */
  content: '';
  position: absolute;
  left: 2px;
  top: .42em;
  width: 11px;
  height: 6px;
  border-left: 2px solid #3a766f;
  border-bottom: 2px solid #3a766f;
  transform: rotate(-45deg);
}
.svc-lists a, .svc-main a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.svc-main .svc-note {
  padding-left: 18px;
  border-left: 2px solid #e3ddd6;
  color: #4a4a52;
}
.svc-main .svc-related { font-size: 16px; color: #5f5c78; }

.svc-aside { position: sticky; top: 112px; }
.svc-card {
  padding: 28px 28px 24px;
  border: 1px solid #e6e1da;
  border-radius: 8px;
  background: #fff;
}
.svc-card-title {
  margin: 0 0 8px;
  font-family: 'Prata', 'Prata Fallback', Georgia, serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.3;
  color: var(--color-primary);
  text-transform: none;
}
.svc-card-text { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: #4a4a52; }
.svc-card-contacts { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 6px; }
.svc-card-contacts a { color: var(--color-primary); font-weight: 600; font-size: 15px; text-decoration: none; }
.svc-card-contacts a:hover { text-decoration: underline; text-underline-offset: 3px; }
.svc-card-button {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  padding: 12px 20px;
  border-radius: 4px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background-color .2s ease;
}
.svc-card-button:hover { background: var(--color--dark-primary); color: #fff; }
.svc-card-langs { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: #66666e; }
.svc-crumbs a:focus-visible,
.svc-main a:focus-visible,
.svc-card a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

@media screen and (max-width: 991px) {
  .svc-head { padding: 32px 0 48px; }
  .svc-head-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .svc-figure { justify-self: stretch; max-width: none; aspect-ratio: 16 / 9; }   /* a shallow strip, so the text starts on the first screen */
  .svc-body { padding-top: 48px; }
  .svc-body-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-main { max-width: 680px; }
  .svc-aside { display: none; }           /* the sitewide contact band follows */
}
@media screen and (max-width: 600px) {
  .svc-figure { aspect-ratio: 3 / 2; }
  .svc-lists { grid-template-columns: minmax(0, 1fr); padding: 24px 20px 10px; }
  .svc-main p { font-size: 16.5px; }
  .svc-h2 { font-size: 24px; }
}

/* ══════════════════════════════════════════════════════════════════
   QUIET PROFESSIONALISM (2026-10-27) — site-wide type scale, page
   headers and calm sections. The client found the template's display
   titles (h1 65→96px, h2 50→70px, h3 40px, 40–48px item titles, 90px
   counters) too loud. Headings now stay in a narrow, readable range at
   every width; decorative motion (tickers, rotating badges, reveal
   animations) was removed from the markup.
   ══════════════════════════════════════════════════════════════════ */
h1 { font-size: clamp(30px, 3vw, 42px); line-height: 1.2; }
h2 { font-size: clamp(24px, 2.1vw, 30px); line-height: 1.25; }
h3 { font-size: clamp(20px, 1.6vw, 22px); line-height: 1.3; }
h4 { font-size: 18px; line-height: 1.35; }

/* Template classes that set their own (large) sizes. */
.service-item-title { font-size: clamp(20px, 1.6vw, 22px); line-height: 1.3; }
.service-single-sub-heading { font-size: clamp(22px, 1.9vw, 26px); line-height: 1.3; margin-top: 40px; }
.not-found-text { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.25; }
.blog-title { font-size: 20px; line-height: 1.35; }
.attorney-name, .lawyer-name { font-size: 22px; }
.founder-title { max-width: none; }
.article-body h2 { font-size: clamp(22px, 1.8vw, 26px); }
.article-related-title, .article-cta-title { font-size: clamp(22px, 1.8vw, 24px); }
@media screen and (max-width: 479px) {
  .article-related-title, .article-cta-title { font-size: 22px; }
}

/* Earlier quiet components, brought into the same range. */
.hero-a-title { font-size: clamp(32px, 3.3vw, 46px); }
.cta-quiet-title { font-size: clamp(24px, 2.1vw, 30px); }
.founder-card-name { font-size: clamp(22px, 1.8vw, 26px); }
.founders-intro { font-size: clamp(18px, 1.4vw, 20px); }

/* Calmer vertical rhythm than the template's 100–125px. */
.section-padding-regular { padding-top: 80px; padding-bottom: 80px; }
.section-founder { padding-top: 80px; padding-bottom: 80px; }
@media screen and (max-width: 767px) {
  .section-padding-regular, .section-founder { padding-top: 60px; padding-bottom: 60px; }
}

/* ── Page header band (components/PageHead.astro) ─────────────────── */
.page-head {
  background: var(--color--off-white);
  padding: 40px 0 52px;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}
.page-head.has-image .page-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 64px;
  align-items: center;
}
.page-title {
  margin: 0 0 14px;
  max-width: 20em;
  font-family: 'Prata', 'Prata Fallback', Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.18;
  color: var(--color-primary);
  text-transform: none;
  text-wrap: balance;
}
.page-role {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #3a766f;
}
.page-role:lang(el) { text-transform: none; letter-spacing: .03em; font-size: 14px; }
.page-lead {
  margin: 0;
  max-width: 40em;
  font-size: 18px;
  line-height: 1.6;
  color: #4a4a52;
  text-wrap: pretty;
}
.page-figure {
  margin: 0;
  justify-self: end;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 5 / 4;
  border-radius: 8px;
  overflow: hidden;
  background: #d9d6d1;
}
.page-figure.is-portrait { max-width: 320px; aspect-ratio: 4 / 5; }
.page-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-figure.is-portrait .page-image { object-position: 50% 25%; }

/* ── Calm content sections (About, Home) ─────────────────────────── */
.quiet-section { padding: 80px 0; }
.quiet-section.is-tinted { background: var(--color--off-white); padding: 72px 0; max-width: 1920px; margin-left: auto; margin-right: auto; }
.quiet-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  max-width: 1080px;
}
.quiet-h2 {
  margin: 0 0 14px;
  font-family: 'Prata', 'Prata Fallback', Georgia, serif;
  font-weight: 400;
  font-size: clamp(24px, 2.1vw, 30px);
  line-height: 1.25;
  color: var(--color-primary);
  text-transform: none;
}
.quiet-text {
  margin: 0 0 20px;
  max-width: 38em;
  font-size: 17px;
  line-height: 1.75;
  color: #3f3f46;
  text-wrap: pretty;
}
.quiet-statement {
  max-width: 44em;
  margin: 0 auto;
  text-align: center;
  font-family: 'Prata', 'Prata Fallback', Georgia, serif;
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.6;
  color: var(--color-primary);
  text-wrap: balance;
}
.quiet-about {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}
.quiet-about-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
  background: #d9d6d1;
}
.quiet-about-copy .quiet-h2 { font-size: clamp(22px, 1.9vw, 27px); line-height: 1.35; }
.quiet-link {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 16px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.quiet-link:hover { text-decoration-thickness: 2px; }
.quiet-link:focus-visible,
.page-head .svc-crumbs a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

@media screen and (max-width: 991px) {
  .page-head { padding: 32px 0 44px; }
  .page-head.has-image .page-head-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .page-figure { justify-self: stretch; max-width: none; aspect-ratio: 16 / 9; }
  .page-figure.is-portrait { justify-self: start; max-width: 280px; aspect-ratio: 4 / 5; }
  .quiet-about { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .quiet-about-figure { max-width: 360px; }
}
@media screen and (max-width: 767px) {
  .quiet-section { padding: 56px 0; }
  .quiet-section.is-tinted { padding: 52px 0; }
  .quiet-two-col { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media screen and (max-width: 600px) {
  .page-figure { aspect-ratio: 3 / 2; }
  .page-figure.is-portrait { aspect-ratio: 4 / 5; max-width: 240px; }
}

/* Webflow interactions keyed on these classes (not on data-w-id) still faded
   the cards up on scroll; the quiet design shows them as they are. */
.single-lawyer, .single-attorney, .service-item, .service-item-icon {
  opacity: 1 !important;
  transform: none !important;
}
/* Home "About the firm": the firm's statement under a short heading. */
.quiet-lead {
  margin: 0 0 16px;
  max-width: 36em;
  font-family: 'Prata', 'Prata Fallback', Georgia, serif;
  font-size: clamp(18px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--color-primary);
  text-wrap: pretty;
}
/* Phones: a long intro plus a full-width photo pushed the content off the
   first screen, so the decorative header photo is left out there. */
@media screen and (max-width: 767px) {
  .page-head.has-image .page-figure:not(.is-portrait) { display: none; }
}

/* ──────────────────────────────────────────────────────────────────
   CONTACT PAGE (2026-10-27): office card and map on the left, the
   enquiry form on the right; phones stack card, form, map.
   ────────────────────────────────────────────────────────────────── */
.contact-section { padding: 64px 0 88px; }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "card form" "map form";
  grid-template-rows: auto 1fr;
  gap: 32px 64px;
  align-items: start;
}
.contact-card { grid-area: card; padding: 32px; background: var(--color--off-white); border-radius: 8px; }
.contact-main { grid-area: form; }
.contact-map  { grid-area: map; margin: 0; }

.contact-card-title, .contact-form-title {
  margin: 0 0 14px;
  font-family: 'Prata', 'Prata Fallback', Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 26px);
  line-height: 1.3;
  color: var(--color-primary);
  text-transform: none;
}
.contact-address { font-style: normal; display: grid; gap: 2px; margin-bottom: 20px; font-size: 17px; line-height: 1.55; color: #3f3f46; }
.contact-lines { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 8px; }
.contact-lines li { display: flex; gap: 12px; align-items: baseline; font-size: 16px; }
.contact-line-label { min-width: 72px; font-size: 13px; letter-spacing: .04em; color: #66666e; }
.contact-lines a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.contact-lines a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-subtitle { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #3a766f; }
.contact-subtitle:lang(el) { text-transform: none; letter-spacing: .03em; font-size: 14px; }
.contact-hours { margin: 0; display: grid; gap: 0; }
.contact-hours div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid #e3ddd6; font-size: 15px; }
.contact-hours dt { color: #33333a; }
.contact-hours dd { margin: 0; color: #4a4a52; text-align: right; }

.contact-map-link { display: block; border-radius: 8px; overflow: hidden; background: #e8e4df; }
.contact-map-image { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: opacity .2s; }
.contact-map-link:hover .contact-map-image { opacity: .92; }
.contact-map-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 10px; font-size: 13px; color: #66666e; }
.contact-map-caption > a { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.contact-map-caption span a { color: inherit; }

.contact-form-intro { margin: 0 0 28px; max-width: 38em; font-size: 17px; line-height: 1.7; color: #3f3f46; }
.contact-form { display: grid; gap: 20px; }
.cf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cf-field { display: grid; gap: 7px; }
.cf-field label { font-size: 14px; font-weight: 600; color: #33333a; }
.cf-optional { font-weight: 400; color: #66666e; }
.cf-field input, .cf-field select, .cf-field textarea {
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #8a8580;
  border-radius: 4px;
  background: #fff;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  color: #1f1f24;
  transition: border-color .15s, box-shadow .15s;
}
.cf-field textarea { min-height: 160px; resize: vertical; }
.cf-field select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, #66666e 50%), linear-gradient(135deg, #66666e 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 62, 106, .12);
}
.cf-field.is-invalid input, .cf-field.is-invalid textarea, .cf-field.is-invalid select { border-color: #b42318; border-width: 2px; padding: 11px 13px; }
.cf-error { margin: 0; font-size: 14px; line-height: 1.4; color: #b42318; }
.cf-consent .cf-error { flex-basis: 100%; margin-left: 30px; }
.cf-consent label { flex: 1 1 0; min-width: 0; }
.cf-consent { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: #3f3f46; }
.cf-consent input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--color-primary); }
.cf-consent a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.cf-consent.is-invalid label { color: #b42318; }
.cf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.cf-submit {
  min-height: 50px;
  padding: 14px 32px;
  border: 0;
  border-radius: 4px;
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: background-color .2s ease;
}
.cf-submit:hover { background: var(--color--dark-primary); }
.cf-submit:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.cf-submit:disabled { opacity: .6; cursor: wait; }
.cf-status { margin: 0; flex: 1 1 260px; font-size: 15px; line-height: 1.5; color: #4a4a52; }
.cf-status.is-sent { color: #2f6f4f; }
.cf-status.is-invalid, .cf-status.is-error { color: #b42318; }
.cf-status a { color: inherit; font-weight: 600; text-decoration: underline; }
.cf-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media screen and (max-width: 991px) {
  .contact-section { padding: 48px 0 64px; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "card" "form" "map"; grid-template-rows: none; gap: 40px; }
}
@media screen and (max-width: 600px) {
  .contact-card { padding: 24px 20px; }
  .cf-row { grid-template-columns: minmax(0, 1fr); }
  .cf-submit { width: 100%; }
}

/* ──────────────────────────────────────────────────────────────────
   MOBILE PASS (2026-10-27). Phones and tablets only, except the first
   rule: the template's `text-transform: capitalize` on the Services
   column heading turned «Сфери на дейност» / «Τομείς δικαίου» into title
   case, which is wrong in Bulgarian and Greek. The labels are already
   written the way they should read.
   ────────────────────────────────────────────────────────────────── */
.dropdown-menu-column-heading { text-transform: none; }

@media screen and (max-width: 991px) {
  /* Menu drawer: the template's #83809e grey was ~3.7:1 on white (fails
     WCAG AA); rows were 38px, now at least 44px to tap. */
  .w-nav-overlay .navbar-link,
  .w-nav-overlay .dropdown-toggle,
  .w-nav-overlay .page-link-text { color: #4a4766; }
  .w-nav-overlay .navbar-link.w--current,
  .w-nav-overlay .dropdown-toggle.is-active,
  .w-nav-overlay .page-link.w--current .page-link-text { color: #08003d; }
  .w-nav-overlay .navbar-link { display: block; width: 100%; padding-top: 13px; padding-bottom: 13px; }
  .w-nav-overlay .dropdown-toggle { min-height: 48px; }
  .w-nav-overlay .page-link { min-height: 44px; justify-content: center; }
  .w-nav-overlay .dropdown-menu-column-heading { margin-bottom: 4px; }
  /* The template fixed the Services panel at 400px with its own scrollbar
     on phones, leaving ~200px of blank panel under seven links. */
  .dropdown-list.for-pages { height: auto; overflow: visible; }

  /* Menu button: 42px -> 44px. */
  .menu-button { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }

  /* Tap targets. Stacked links get real 44px rows; standalone links get a
     larger invisible hit area (padding + equal negative margin, so the
     layout does not move). */
  .footer-item-link,
  .go-top-link,
  .appointment-button-link,
  .cta-mail-link,
  .button-link { min-height: 44px; display: inline-flex; align-items: center; }
  .svc-crumbs a,
  .founder-card-link,
  .hero-a-link,
  .quiet-link,
  .contact-map-link,
  .contact-lines a,
  .attorney-name-link,
  .single-blog-link { display: inline-block; padding-top: 12px; padding-bottom: 12px; margin-top: -12px; margin-bottom: -12px; }
}

@media screen and (max-width: 767px) {
  /* The Lady Justice photo filled a whole phone screen. */
  .quiet-about-figure { max-width: 280px; }
}

/* Header at the smallest phones: logo, EN/BG/EL and the menu button ran
   37px past a 320px screen (measured 357px). Tighter gaps keep all three
   on screen without shrinking anything a finger needs. */
@media screen and (max-width: 479px) {
  .nav-brand-wrapper { padding-right: 12px; }
  .nav-right { padding-left: 0; column-gap: 6px; grid-column-gap: 6px; }
  .lang-switcher { margin-left: 4px; padding-left: 10px; margin-right: 2px; }
}
@media screen and (max-width: 359px) {
  .lang-switcher { margin-left: 0; padding-left: 6px; box-shadow: none; }
  .lang-link { padding: 5px 5px; }
}

/* ──────────────────────────────────────────────────────────────────
   HOMEPAGE TOP ON PHONES (2026-10-28): the founders instead of a statue

   Below 768px: a shorter hero arch, and the About block opens with the
   two founders (portrait, name, role) instead of the stock statue.
   >= 768px renders exactly as before: the only rule outside a phone
   query hides the new founders list, which does not exist there today.
   ────────────────────────────────────────────────────────────────── */
.quiet-founders { display: none; }

@media screen and (max-width: 767px) {
  /* Hero: the same semicircular arch, as a 6:5 window instead of 4:5. */
  .hero-a-grid { gap: 32px; }
  .hero-a-figure {
    aspect-ratio: 6 / 5;
    border-radius: 50% 50% 8px 8px / 60% 60% 8px 8px;
  }
  .hero-a-image { object-position: 50% 70%; }

  /* About: heading, founders between two hairlines, then the statement. */
  .quiet-about-figure { display: none; }
  .quiet-about-copy .quiet-h2 {
    margin: 0;
    padding-bottom: 18px;
    border-bottom: 1px solid #e3ddd6;
  }
  .quiet-founders {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    margin: 0 0 22px;
    padding: 16px 0;
    list-style: none;
    border-bottom: 1px solid #e3ddd6;
  }
  .quiet-founder {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    column-gap: 12px;
    color: inherit;
    text-decoration: none;
  }
  .quiet-founder-photo {
    grid-row: 1 / 3;
    align-self: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    background: #d9d6d1;
  }
  .quiet-founder-name {
    align-self: end;
    width: min-content;                 /* first name / surname */
    font-family: 'Prata', 'Prata Fallback', Georgia, serif;
    font-size: 16px;
    line-height: 1.3;
    color: var(--color-primary);
  }
  .quiet-founder-role {
    align-self: start;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.4;
    color: #66666e;
  }
  .quiet-founder:hover .quiet-founder-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .quiet-founder:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: 4px; }
}
@media screen and (min-width: 480px) and (max-width: 767px) {
  .quiet-founders { grid-template-columns: repeat(2, minmax(0, 240px)); }
}
@media screen and (max-width: 359px) {
  .quiet-founders { column-gap: 10px; }
  .quiet-founder { grid-template-columns: 52px minmax(0, 1fr); column-gap: 10px; }
  .quiet-founder-photo { width: 52px; height: 52px; }
  .quiet-founder-name { font-size: 15px; }
}
