/* Azhari Legal Consultancy — design tokens
   Palette per the brief (white / warm stone / ink) with the logo blue as the only accent.
   Everything is expressed as custom properties so a second entity site can re-theme by overriding :root. */
:root {
  /* colour */
  --c-bg: #ffffff;
  --c-stone: #f6f9fb;      /* Frost: the light blue of the bands (chosen 27 Sep 2026; was warm beige #f5f3ef) */
  --c-stone-deep: #ecf0f3; /* a step deeper than Frost (navy 4 % over it) */
  --c-hair-stone: #e5eaed; /* hairlines drawn on Frost (navy 7 % over it) */
  --c-ink: #1a1a1a;
  --c-muted: #6b6b6b;      /* 5.33:1 on white, 5.04:1 on Frost (AA) */
  --c-hair: #dee2e5;       /* 1 px lines on white (navy 12.9 % over white; was warm #e4e1dc, same 1.3:1) */
  --c-edge: #ced3d9;       /* the light border a services square gains under the pointer (navy 19.2 % over white; was beige #d9d2c6, same 1.5:1) */
  --c-accent: #1960a5;     /* the firm's blue (old-site primary): 6.45:1 on white, 6.10:1 on Frost — kickers, numbers, links, button */
  --c-navy: #001c39;       /* the firm's dark blue (old-site headings/footer): display headings, hover */
  --c-accent-deep: #001c39;/* alias kept for existing rules */
  --c-logo-blue: #1176bc;  /* sampled from the logo gradient; decorative use only */
  --c-focus: #1960a5;
  /* roles a dark theme sets apart (css/theme.css); each keeps its old light value */
  --c-surface: #ffffff;    /* cards and fields on Frost (lighter than the band) */
  --c-navy-box: #001c39;   /* the solid navy boxes that stay dark: group bar, calculator offer */
  --c-group-bar: #001c39;  /* the Dubai | Abu Dhabi bar above the header (its own token: dark mode sets it apart) */
  --c-statement: #56677c;  /* the homepage statement, a step behind the navy name (5.8:1 on white; 1 Oct 2026, from version 2) */
  --c-error: #a03434;      /* form and calculator errors */
  --c-field-edge: #878e96; /* the calculator's field outline: 3.1:1 on Frost, 3.3:1 on white */
  --c-muted-cool: #6a7785; /* the team cards' language line: quiet blue-grey, 4.6:1 on white */

  /* type */
  /* Source Serif 4 (display cut for headings and large serif lines, text cut for serif lines under ~22 px, one italic for
     the statements) and Instrument Sans for reading, the interface and the small labels (1 Oct 2026, from version 2) */
  --font-serif: "Source Serif 4 Display", "Source Serif Fallback", "Times New Roman", Georgia, serif;
  --font-serif-text: "Source Serif 4 Text", "Source Serif Text Fallback", "Times New Roman", Georgia, serif;
  --font-italic: "Source Serif 4 Italic", "Source Serif Italic Fallback", "Times New Roman", Georgia, serif;
  --font-sans: "Instrument Sans", "Instrument Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: var(--font-sans);   /* the small labels: the sans in normal case (was IBM Plex Mono in capitals) */

  --fs-display: clamp(2.625rem, 1.55rem + 4.6vw, 5.5rem);   /* 42 → 88 px, homepage only */
  --fs-h1: clamp(2.125rem, 1.6rem + 2vw, 3.375rem);          /* 34 → 54 px, every inner-page title */
  --fs-h2: clamp(1.875rem, 1.25rem + 2.4vw, 3.25rem);        /* 30 → 52 px */
  --fs-h3: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);       /* 22 → 30 px */
  --fs-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);    /* 18 → 22 px */
  --fs-body: 1.0625rem;                                      /* 17 px */
  --fs-small: 0.9375rem;                                     /* 15 px */
  --fs-mono: 0.875rem;                                       /* 14 px: the small labels */
  --fs-mono-sm: 0.8125rem;                                   /* 13 px: dates, attributions, year ticks */
  --lh-display: 1.02;
  --lh-heading: 1.12;
  --lh-body: 1.6;
  --track-mono: 0.01em;
  --fw-light: 400;         /* Source Serif's display cut is fine enough at its regular weight */
  --fw-regular: 400;
  --fw-medium: 500;

  /* space (4 px base) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-6: 1.5rem; --s-8: 2rem;
  --s-12: 3rem; --s-16: 4rem; --s-24: 6rem; --s-32: 8rem;
  --section: clamp(4.5rem, 3.5rem + 4vw, 8rem);
  --section-tight: clamp(3rem, 2.5rem + 2vw, 5rem);
  --page-end: clamp(2rem, 1.5rem + 2vw, 3.5rem);   /* space between an inner page's last block and the footer */

  /* layout */
  --container: 80rem;                       /* 1280 px (was 1200) */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --gap: clamp(1rem, 2vw, 1.5rem);
  --measure: 65ch;
  --header-h: 4.5rem;

  /* motion */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);   /* a strong ease-out for what answers the visitor: moves at once, settles long */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* a slight overshoot: the stars of the heritage timeline */
  --dur: 500ms;            /* entrances, portraits developing (was 700) */
  --dur-fast: 200ms;

  /* "only": the site draws its own dark mode (css/theme.css switches this to dark), so browsers must not darken the light
     pages on their own (Chrome's "Auto-darken web pages", Samsung Internet): their automatic inversion turned the header
     name and the calculator's navy bar almost invisible */
  color-scheme: only light;
}

/* Source Serif 4, cut from the variable font with the fontTools instancer: the display optical size (60) and the text
   size (20) at weights 300–600, and one italic (optical size 36, weight 360, 21 KB) for the statements */
@font-face { font-family: "Source Serif 4 Display"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("/assets/fonts/source-serif-4-display-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; }
@font-face { font-family: "Source Serif 4 Text"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("/assets/fonts/source-serif-4-text-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; }
@font-face { font-family: "Source Serif 4 Italic"; font-style: italic; font-weight: 360; font-display: swap; src: url("/assets/fonts/source-serif-4-display-latin-360-italic.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; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/instrument-sans-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; }
/* metric-compatible fallbacks (widths measured on rendered text against the real fonts), so lines do not rewrap when
   the webfonts arrive; the ascent/descent overrides keep each line's height */
@font-face { font-family: "Source Serif Fallback"; font-style: normal; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Georgia"); size-adjust: 98.9%; ascent-override: 104.8%; descent-override: 33.8%; line-gap-override: 0%; }
@font-face { font-family: "Source Serif Text Fallback"; font-style: normal; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Georgia"); size-adjust: 111.1%; ascent-override: 93.2%; descent-override: 30.2%; line-gap-override: 0%; }
@font-face { font-family: "Source Serif Italic Fallback"; font-style: italic; src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Georgia Italic"); size-adjust: 98.9%; ascent-override: 104.8%; descent-override: 33.9%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Sans Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 101.9%; ascent-override: 95.2%; descent-override: 24.5%; line-gap-override: 0%; }

/* reset + document */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }   /* the hidden attribute must win over any display: rule (e.g. .btn) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block-start: calc(var(--header-h) + 1rem); hanging-punctuation: first last; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "kern", "liga", "calt";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
img, picture, svg, video { display: block; max-inline-size: 100%; block-size: auto; }
picture { display: contents; }
button, input, select, textarea { font: inherit; color: inherit; }
address { font-style: normal; }
ol, ul { padding: 0; }
html:lang(de) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5; }   /* Safari reads only its prefixed limits (5 + 5 letters: no word under ten letters is split); without them it split "ei-nem", "Da-ten" */
:lang(de) h1, :lang(de) h2, :lang(de) .lead, :lang(de) .no-hyphens, :lang(de) .site-footer, :lang(de) .highlights__text, :lang(de) .career__text, :lang(de) .blog-card__title, :lang(de) .blog-lead__title, :lang(de) .num-preview__title, :lang(de) .team-lead__text, :lang(de) .btn, :lang(de) .link-cta { hyphens: manual; -webkit-hyphens: manual; }   /* titles and names (the career line names firms and institutions) are never split by syllable */

/* typography */
h1, h2, h3, h4, .display, .h2, .h3 { font-family: var(--font-serif); font-weight: 400; line-height: var(--lh-heading); letter-spacing: -0.01em; text-wrap: balance; font-variant-numeric: lining-nums; }
.display, h1, .h2, h2 { color: var(--c-navy); }
.display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.028em; font-weight: 380; }
h1 { font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -0.02em; font-weight: 390; overflow-wrap: break-word; }
h1.display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.028em; }
.h2, h2 { font-size: var(--fs-h2); letter-spacing: -0.018em; }
.h3, h3 { font-size: var(--fs-h3); font-weight: 420; letter-spacing: -0.008em; }
.h2__line { display: block; }
.lead { font-family: var(--font-serif-text); font-weight: 380; font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem); line-height: 1.4; color: var(--c-navy); letter-spacing: -0.005em; max-inline-size: 34ch; text-wrap: balance; text-wrap: pretty; }   /* page leads (team, blog, calculator, intake form): same serif voice as the practice-area lead */
/* the firm's philosophy statement: editorial serif italic, set apart from body copy */
.statement { font-family: var(--font-italic); font-style: italic; font-weight: 360; font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem); line-height: 1.35; color: var(--c-navy); letter-spacing: -0.005em; max-inline-size: 28ch; text-wrap: balance; text-wrap: pretty; }   /* balance first: Safari before 26 ignores "pretty" and left one word alone on the last line */
.statement__line + .statement__line { margin-block-start: 0.6em; }
.statement--small { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); max-inline-size: 32ch; }
:lang(de) .statement { hyphens: manual; -webkit-hyphens: manual; }
.small { font-size: var(--fs-small); }
.muted { color: var(--c-muted); }
.mono, .kicker { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: var(--track-mono); line-height: 1.4; font-variant-numeric: tabular-nums; }   /* small labels: the sans in normal case (were monospace capitals) */
.kicker { color: var(--c-accent); display: block; margin-block-end: var(--s-4); }
.kicker::before { content: ""; display: inline-block; inline-size: 1.5rem; block-size: 1px; background: var(--c-accent); vertical-align: middle; margin-inline-end: var(--s-3); }
p { max-inline-size: var(--measure); }

::selection { background: color-mix(in srgb, var(--c-accent) 16%, var(--c-bg)); color: var(--c-navy); }

/* links */
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--c-hair); transition: text-decoration-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
a:hover { text-decoration-color: var(--c-accent); color: var(--c-accent); }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
/* link CTAs ("Explore more", "Contact Us" …): a thin navy frame around a sans label (the navigation's typeface); under the pointer
   or keyboard focus navy fills the frame from its start and the label turns white (option C of five, 28 Sep 2026).
   Motion after Emil Kowalski's rules (1 Oct 2026): interface motion under 300 ms on a strong ease-out, a press that answers */
.link-cta { display: inline-flex; align-items: center; justify-content: center; max-inline-size: 100%; min-block-size: 3.25rem; padding: var(--s-2) 1.75rem; font-family: var(--font-sans); font-size: 1rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.25; text-align: center; text-decoration: none; color: var(--c-navy); border: 1px solid var(--c-navy); background: linear-gradient(var(--c-navy) 0 0) no-repeat 0 0 / 0 100%; transition: background-size 260ms var(--ease-out), color 160ms var(--ease-out) 40ms, scale 160ms var(--ease-out); }
.link-cta:hover { color: var(--c-navy); }   /* a tap on a touch screen: no sticky blue from a:hover */
.link-cta:focus-visible { color: var(--c-bg); background-size: 100% 100%; }
@media (hover: hover) { .link-cta:hover { color: var(--c-bg); background-size: 100% 100%; } }

/* buttons: solid navy with a white sans label; under the pointer or keyboard focus the firm's blue fills it from its start.
   Secondary actions (.btn--outline) wear the link CTA's frame. The colour sits in the fill's own layer: with a second
   layer the sizes could not be interpolated and the fill would snap instead of sweeping. */
.btn { display: inline-flex; align-items: center; justify-content: center; max-inline-size: 100%; min-block-size: 3.25rem; padding: var(--s-2) 1.75rem; font-family: var(--font-sans); font-size: 1rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.25; text-align: center; text-decoration: none; color: var(--c-bg); background: linear-gradient(var(--c-accent) 0 0) no-repeat 0 0 / 0 100% var(--c-navy); border: 0; border-radius: 0; cursor: pointer; transition: background-size 260ms var(--ease-out), color 160ms var(--ease-out) 40ms, scale 160ms var(--ease-out); }
.btn--outline { color: var(--c-navy); background: linear-gradient(var(--c-navy) 0 0) no-repeat 0 0 / 0 100% transparent; box-shadow: inset 0 0 0 1px var(--c-navy); }
.btn:hover { color: var(--c-bg); }
.btn--outline:hover { color: var(--c-navy); }
.btn:focus-visible { background-size: 100% 100%; }
.btn--outline:focus-visible { color: var(--c-bg); }
@media (hover: hover) { .btn:hover { background-size: 100% 100%; } .btn--outline:hover { color: var(--c-bg); } }
.btn:active, .link-cta:active { scale: 0.97; }   /* pressed: it gives a little under the finger */
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; }   /* sending: main.js sets aria-disabled on the submit button */
[dir="rtl"] :is(.link-cta, .btn, .service-tile__more) { background-position: 100% 0; }   /* the fill starts from the inline start */
@media (prefers-reduced-motion: reduce) { .link-cta, .btn { transition: none; } }

/* layout */
.container { inline-size: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.section { padding-block: var(--section); }
.section--tight { padding-block: var(--section-tight); }
.section--stone { background: var(--c-stone); }
/* sections are separated by their colour change alone (white / stone alternate), never by a full-width rule */
.section__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-6); align-items: end; margin-block-end: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section__head > :first-child { grid-column: 1 / -1; }
.section__aside { grid-column: 1 / -1; }
@media (min-width: 64rem) { .section__head > :first-child { grid-column: 1 / 8; } .section__aside { grid-column: 8 / -1; } }   /* computers; on tablets the heading runs the full width (at 7/12 it broke into three short lines) */
.section__more { margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem); text-align: center; max-inline-size: none; }   /* centred on the page */
.section__more .link-cta { min-block-size: 3.5rem; padding-inline: 2rem; font-size: 1.25rem; }   /* the section links, a little larger */
.rule { border: 0; border-block-start: 1px solid var(--c-hair); }

/* utilities */
.nobr { white-space: nowrap; }   /* a compound or a domain kept on one line (the keepTogether / mailBreak filters) */
.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-block-start: var(--s-2); inset-inline-start: var(--s-2); z-index: 100; padding: var(--s-2) var(--s-4); background: var(--c-bg); color: var(--c-ink); border: 1px solid var(--c-ink); transform: translateY(-200%); transition: transform var(--dur-fast) var(--ease); }
.skip-link:focus { transform: none; }

@media print {
  @page { margin: 15mm 14mm; }
  /* screen-only parts: navigation, forms (and the intake form's step list, which points at nothing on paper), the article's
     "More on …" list, the map's links */
  .site-header, .mobile-menu, .skip-link, .form, .section__more, .lang-switch, .wizard__nav, .post__side, .contact__maplinks, .contact-message { display: none !important; }
  .section--stone, .hero, .page-head, .band--stone, .site-header, .site-footer, .services-grid, .calc, .calc-facts { background: none !important; }
  .hero { padding-block-end: var(--s-8) !important; }
  .person, .team-card, .highlights__card, .heritage__entry, .service-tile, .sv-item, .sv-person, .section__head, .calc-rule, .calc-fact, .calc-example, .cta-band, .site-footer, .sv-end__main, .sv-people, .link-cta, .btn, .contact-block__line, .contact-fact { break-inside: avoid; }
  h1, h2, h3, h4, .kicker, .calc-rule__figure { break-after: avoid; }   /* a heading never ends a page alone */
  h2, h3 { padding-block-start: 0.15em; }   /* a heading moved to the next page takes its accents with it (the dots of "Ä" stayed behind) */
  h2 + :is(ul, ol, div, p) { break-before: avoid; }
  p, li { orphans: 3; widows: 3; }
  .hero__skyline { display: none !important; }
  main > :last-child { padding-block-end: var(--s-6) !important; }   /* the screen's closing space would only push the footer onto a page of its own */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: var(--c-muted); }
  .post__credit a::after { content: none; }   /* the photo credit names its source; no long address under the picture */
  .link-cta, .btn { color: var(--c-navy) !important; background: none !important; box-shadow: inset 0 0 0 1px var(--c-navy); }   /* on paper the frames stay; fills and white labels would vanish */
}
body:has(dialog[open]) { overflow: hidden; }

/* prose (blog posts, service texts) */
.prose > * + * { margin-block-start: 1.1em; }
.prose { overflow-wrap: break-word; }
.prose a { overflow-wrap: anywhere; }
.prose h2, .prose h3, .prose h4 { margin-block-start: 2em; }
.prose h2 { font-size: var(--fs-h3); }
.prose h3 { font-size: 1.25rem; }
.prose :is(h2, h3, h4) :is(strong, b) { font-weight: inherit; }
.prose h4 { font-size: var(--fs-body); font-family: var(--font-sans); font-weight: var(--fw-medium); }
.prose ul, .prose ol { padding-inline-start: 1.25em; }
.prose li + li { margin-block-start: 0.4em; }
.prose .typed-list { list-style: none; }   /* a list typed by hand in the article (cms.js): its own dash or bullet hangs where a list marker sits */
.typed-list__mark { display: inline-block; inline-size: 1.25em; margin-inline-start: -1.25em; }
.prose blockquote { border-inline-start: 1px solid var(--c-accent); padding-inline-start: var(--s-6); color: var(--c-muted); }
.prose img { margin-block: var(--s-8); }
.prose .prose__img { inline-size: 38.75rem; }   /* a picture inside an article (the certificate): at most its old 620 px */
.prose table { border-collapse: collapse; inline-size: 100%; font-size: var(--fs-small); }
.prose th, .prose td { border-block-end: 1px solid var(--c-hair); padding: var(--s-2) var(--s-3); text-align: start; vertical-align: top; }

/* ---- header ---------------------------------------------------------- */
.site-header { position: sticky; inset-block-start: 0; z-index: 50; background: var(--c-bg); }   /* white, no rule: its edge is the colour change */
.site-header__inner { display: flex; align-items: center; gap: var(--s-6); min-block-size: var(--header-h); }
@media (max-width: 39.99rem) { .site-header__inner { gap: var(--s-4); } }
.site-header__logo { display: inline-flex; align-items: center; flex-shrink: 0; padding-block: var(--s-3); margin-inline-end: auto; text-decoration: none; }
.site-header__logo img { block-size: 2.75rem; inline-size: auto; max-inline-size: none; }   /* 1820:264 lockup → 303 × 44 px */
@media (max-width: 47.99rem) { .site-header__logo img { block-size: 2.125rem; } }            /* 234 × 34 px */
@media (max-width: 22.99rem) { .site-header__logo img { block-size: 1.75rem; } .site-header__inner { gap: var(--s-2); } .lang-switch__item { padding-inline: var(--s-1); } }             /* 193 × 28 px on 320 px phones */
.site-nav { display: none; }
/* navigation: the headline serif, no underlines; blue marks hover and the current page */
.site-nav__list { display: flex; gap: clamp(1rem, 1.3vw, 1.375rem); list-style: none; }   /* 16 px at 1024, about 19 px at 1440 */
.site-nav__list a { font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em; color: var(--c-ink); text-decoration: none; padding-block: var(--s-2); transition: color var(--dur-fast) var(--ease); white-space: nowrap; }
.site-nav__list a:hover, .site-nav__list a:focus-visible, .site-nav__list a[aria-current] { color: var(--c-accent); }
.site-nav__list a[aria-current] { font-weight: 600; }   /* current page, or the section it belongs to (aria-current="true"): blue and a touch heavier, so it does not rely on colour alone */
.lang-switch { display: flex; align-items: center; gap: var(--s-1); flex-shrink: 0; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.06em; }
@media (max-width: 47.99rem) { .lang-switch__item.is-current { display: none; } }
.lang-switch__item { text-decoration: none; padding: var(--s-1) var(--s-2); color: var(--c-muted); transition: color var(--dur-fast) var(--ease); }
.lang-switch__item:hover, .lang-switch__item:focus-visible { color: var(--c-accent); }
.lang-switch__item.is-current { color: var(--c-accent); font-weight: 600; }
.menu-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; inline-size: 2.75rem; block-size: 2.75rem; flex-shrink: 0; padding: 0; background: transparent; border: 0; cursor: pointer; }
.menu-toggle__bar { display: block; inline-size: 1.5rem; block-size: 1px; background: var(--c-ink); margin-inline: auto; }
@media (min-width: 64rem) {
  .site-nav { display: block; } .menu-toggle { display: none; }
  /* logo left; categories and languages right-aligned on the bar's vertical centre, divided by a faint hairline */
  .lang-switch { margin-inline-end: calc(-1 * var(--s-2)); }   /* the last label's text ends exactly on the content edge, like the logo on the left */
  .lang-switch::before { content: ""; display: block; flex: none; inline-size: 1px; block-size: 1.125rem; margin-inline-end: var(--s-3); background: var(--c-edge); }   /* flex: none: never squeezed away; the edge grey, so the line can be seen */
}
.mobile-menu { inset: 0; inline-size: 100%; block-size: 100dvh; max-inline-size: none; max-block-size: none; border: 0; padding: 0; background: var(--c-bg); color: var(--c-ink); }
.mobile-menu::backdrop { background: rgb(0 0 0 / .2); }
/* the menu arrives instead of cutting in: it fades and settles in 220 ms and leaves faster (150 ms), its entries follow
   40 ms apart. @starting-style / allow-discrete: browsers without them open and close it at once, as before */
@media screen and (prefers-reduced-motion: no-preference) {
  .mobile-menu { opacity: 0; translate: 0 -0.5rem; transition: opacity 150ms var(--ease-out), translate 150ms var(--ease-out), display 150ms allow-discrete, overlay 150ms allow-discrete; }
  .mobile-menu[open] { opacity: 1; translate: 0 0; transition-duration: 220ms; }
  @starting-style { .mobile-menu[open] { opacity: 0; translate: 0 -0.5rem; } }
  .mobile-menu[open] .mobile-menu__list li { transition: opacity 320ms var(--ease-out), translate 320ms var(--ease-out); }
  @starting-style { .mobile-menu[open] .mobile-menu__list li { opacity: 0; translate: 0 0.5rem; } }
  .mobile-menu[open] .mobile-menu__list li:nth-child(2) { transition-delay: 40ms; }
  .mobile-menu[open] .mobile-menu__list li:nth-child(3) { transition-delay: 80ms; }
  .mobile-menu[open] .mobile-menu__list li:nth-child(4) { transition-delay: 120ms; }
  .mobile-menu[open] .mobile-menu__list li:nth-child(n + 5) { transition-delay: 160ms; }
}
/* a tap leaves no grey flash on what has its own pressed or current state */
.btn, .link-cta, .menu-toggle, .mobile-menu__close, .theme-moon, .blog-chip, .sv-item__btn, .team-card__link { -webkit-tap-highlight-color: transparent; }
.mobile-menu__inner { display: flex; flex-direction: column; gap: var(--s-8); padding: 0 var(--gutter) var(--s-12); min-block-size: 100%; }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; min-block-size: var(--header-h); border-block-end: 1px solid var(--c-hair); }
.mobile-menu__top .kicker { margin-block-end: 0; }
.mobile-menu__close { display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; background: none; border: 0; padding: 0; cursor: pointer; }
.mobile-menu__close .menu-toggle__bar { grid-area: 1 / 1; }
.mobile-menu__close .menu-toggle__bar:first-child { transform: rotate(45deg); }
.mobile-menu__close .menu-toggle__bar:last-child { transform: rotate(-45deg); }
.mobile-menu__list { list-style: none; display: grid; }
.mobile-menu__list a { display: flex; align-items: baseline; gap: var(--s-4); font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: var(--fw-light); text-decoration: none; padding-block: var(--s-4); border-block-end: 1px solid var(--c-hair); }
.mobile-menu__list a[aria-current] { color: var(--c-accent); }
.mobile-menu__list .mono { color: var(--c-muted); }
.mobile-menu__langs { display: flex; gap: var(--s-6); font-family: var(--font-sans); font-size: 1rem; font-weight: 500; }
.mobile-menu__langs a { text-decoration: none; color: var(--c-ink); }
.mobile-menu__langs a:hover, .mobile-menu__langs a:focus-visible { color: var(--c-accent); }
.mobile-menu__langs .is-current { color: var(--c-accent); font-weight: 600; }
.mobile-menu__contact { margin-block-start: auto; font-size: var(--fs-small); color: var(--c-muted); line-height: 1.8; }
.mobile-menu__inner:focus { outline: none; }   /* the menu opens with the panel focused (autofocus), so no ring is drawn round the X on iPhone; Tab reaches the X next */
@media (max-height: 46rem) {   /* short phone screens (iPhone SE, Safari with its bars): tighter rows so the whole menu, down to the e-mail, fits without scrolling */
  .mobile-menu__inner { gap: 1.25rem; padding-block-end: var(--s-6); }
  .mobile-menu__list a { padding-block: var(--s-3); line-height: 1.2; }
}

/* ---- footer ---------------------------------------------------------- */
.site-footer { padding-block: clamp(2rem, 1.5rem + 1.5vw, 3rem) var(--s-8); font-size: var(--fs-small); }   /* white, no full-width rule: spacing and the colour change separate it */   /* every page ends on stone */
.site-footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-8) var(--gap); }
.site-footer__col { grid-column: span 12; }
@media (min-width: 40rem) { .site-footer__col { grid-column: span 6; } }
@media (max-width: 39.99rem) { .site-footer__col:nth-child(3) { margin-block-start: calc(var(--s-2) - var(--s-8)); } }
@media (min-width: 40rem) and (max-width: 63.99rem) { .site-footer__col:nth-child(1) { order: 1; } .site-footer__col:nth-child(4) { order: 2; } .site-footer__col:nth-child(2) { order: 3; } .site-footer__col:nth-child(3) { order: 4; padding-block-start: 1.85rem; } }
@media (min-width: 64rem) { .site-footer__col:nth-child(1) { grid-column: 1 / 4; } .site-footer__col:nth-child(2) { grid-column: 4 / 7; } .site-footer__col:nth-child(3) { grid-column: 7 / 10; padding-block-start: 1.85rem; } .site-footer__col:nth-child(4) { grid-column: 10 / 13; } }
.site-footer__symbol { block-size: 2.5rem; inline-size: auto; margin-block-end: var(--s-6); }
.site-footer__heading { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: var(--track-mono); color: var(--c-accent); margin-block-end: var(--s-4); }
.site-footer__text { color: var(--c-muted); max-inline-size: 36ch; }
.site-footer__statement { font-family: var(--font-italic); font-style: italic; font-weight: 360; font-size: 1.125rem; line-height: 1.45; color: var(--c-navy); max-inline-size: 30ch; }
:lang(de) .site-footer__statement { font-size: 1rem; line-height: 1.4; max-inline-size: 36ch; }   /* the German text is longer: slightly smaller so it ends level with the other columns */
.site-footer__list { list-style: none; display: grid; gap: var(--s-2); }
.site-footer__list a, .site-footer__address a { text-decoration: none; }
.site-footer__list a:hover, .site-footer__address a:hover { text-decoration: underline; }
.site-footer__address { line-height: 1.8; }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); align-items: center; justify-content: space-between; margin-block-start: var(--s-12); padding-block-start: var(--s-6); border-block-start: 1px solid var(--c-hair); color: var(--c-muted); }
.site-footer__legal { list-style: none; display: flex; gap: var(--s-6); }
.site-footer__legal a { text-decoration: none; }
.site-footer__legal a:hover { text-decoration: underline; }
.site-footer__licence { margin-block-start: var(--s-4); color: var(--c-muted); }
/* the footer on paper: one contact line (address · phone · e-mail) above the copyright line; the philosophy, the service
   links and the column headings stay on screen. Three lines in all, so it seldom needs a page of its own. (Here, after the
   footer's screen rules, so they win: in base.css the grid, spacing and line height of the screen footer overrode them.) */
@media print {
  .site-footer { padding-block: var(--s-6) 0; font-size: 0.8125rem; }
  .site-footer__grid { display: block; }
  .site-footer__col:not(:last-child), .site-footer__heading, .site-footer__heading--office + .site-footer__list { display: none; }
  .site-footer__address { line-height: 1.5; }
  .site-footer__address br { display: none; }   /* footer.njk puts a space after each break, so the lines run on as one */
  .site-footer__address a::before { content: "·\a0"; }
  .site-footer__bottom { margin-block-start: var(--s-4); padding-block-start: var(--s-3); }
}

/* ---- numbered list (services) --------------------------------------- */
.num-list { list-style: none; border-block-start: 1px solid var(--c-hair); }
.num-list__item { border-block-end: 1px solid var(--c-hair); }
.num-list__link { display: grid; grid-template-columns: 2rem 1fr auto; align-items: baseline; gap: var(--s-4); padding-block: clamp(0.9rem, 0.7rem + 0.8vw, 1.4rem); text-decoration: none; color: var(--c-ink); transition: color var(--dur-fast) var(--ease); }
.num-list__num { color: var(--c-accent); }
.num-list__label { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: var(--fw-light); line-height: var(--lh-heading); padding-block: 0.24em; text-wrap: balance; }   /* a two-line title reads as one (no lone "DIFC" on phones); the padding keeps a one-line row as tall as before (1.12 + 0.48 = the body's 1.6) */
@media (min-width: 48rem) { .num-list__link { grid-template-columns: 3rem 1fr auto; } }
.num-list__icon { color: var(--c-accent); display: inline-flex; }
.num-list__icon .icon { inline-size: 1.25rem; block-size: 1.25rem; }
@media (min-width: 48rem) { .num-list__icon .icon { inline-size: 1.5rem; block-size: 1.5rem; } }
.num-list__link:hover { color: var(--c-accent); }
/* numbered list with a preview (data-preview; main.js adds .is-live and builds the panel): the row being read lights up (the one
   crossing 60 % of the screen, or the one pointed at or focused): its line fills blue, number and icon turn blue, the title steps
   in. From 64rem a panel beside the list shows that row large: its icon, title, teaser and a link. The motion is in motion.css. */
.num-list.is-live .num-list__item { position: relative; }
.num-list.is-live .num-list__item::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 1px; background: var(--c-accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 400ms var(--ease-out); }
.num-list.is-live .num-list__num, .num-list.is-live .num-list__icon { color: var(--c-muted); transition: color 400ms var(--ease); }
.num-list.is-live .num-list__label { transition: translate 300ms var(--ease-out), color 200ms var(--ease-out); }
.num-list.is-live .is-reading::after { transform: none; }
.num-list.is-live .is-reading :is(.num-list__num, .num-list__icon) { color: var(--c-accent); }
.num-list.is-live .is-reading .num-list__label { color: var(--c-navy); translate: 0.75rem 0; }
.num-list.is-live .is-reading .num-list__link:hover .num-list__label { color: var(--c-accent); }
[dir="rtl"] .num-list.is-live .num-list__item::after { transform-origin: 100% 50%; }
[dir="rtl"] .num-list.is-live .is-reading .num-list__label { translate: -0.75rem 0; }
.num-preview { display: none; }
@media (min-width: 64rem) {
  .num-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-12); align-items: stretch; }
  .num-preview { display: block; }
}
.num-preview__card { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-8)); display: grid; align-content: start; gap: var(--s-6); padding: var(--s-8) clamp(1.75rem, 2.5vw, 2.5rem); background: var(--c-surface); border: 1px solid var(--c-hair-stone); }
.num-preview__body { display: grid; gap: var(--s-4); }
.num-preview__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.num-preview__num { color: var(--c-accent); }
.num-preview__icon { display: inline-flex; color: var(--c-accent); }
.num-preview__icon .icon { inline-size: 5rem; block-size: 5rem; stroke-width: 0.7; }   /* the thin line of the small icons, drawn large */
.num-preview__title { margin: var(--s-2) 0 0; font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: var(--fw-light); line-height: var(--lh-heading); color: var(--c-navy); }
.num-preview__title .num-list__place { display: block; margin: var(--s-1) 0 0; color: var(--c-muted); }
.num-preview__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; margin: 0; max-inline-size: 42ch; color: var(--c-muted); }   /* the Services page's teasers run to six lines; four are enough here */
.num-preview .link-cta { justify-self: start; margin-block-start: var(--s-2); }
@media (prefers-reduced-motion: reduce) {
  .num-list.is-live :is(.num-list__label, .num-list__num, .num-list__icon), .num-list.is-live .num-list__item::after { transition: none; }
  .num-list.is-live .is-reading .num-list__label { translate: none; }
}
@media print {
  .num-preview { display: none !important; }
  /* the reading line is a screen state: on paper every row looks the same, numbers and icons in the accent as without JS */
  .num-list.is-live :is(.num-list__num, .num-list__icon) { color: var(--c-accent); }
  .num-list.is-live .is-reading .num-list__label { translate: none; }
  .num-list.is-live .num-list__item::after { content: none; }
}

/* ---- highlights ("At a glance", the band under the skyline) ----------
   Five white cards on stone, number top left and icon top right as on the services tiles; three per page on a
   computer, two on a tablet, one on a phone. Without JS (and in print) the cards stand in rows. main.js adds
   .is-live: the pages then share one row (the cards of the other pages wait hidden in the same slots, so the band
   never changes height), .is-current marks the page on show and .is-moving the cards of a page turn. The glide
   itself is a Web Animation in main.js; the carousel arrows are the one place on the site with arrow glyphs. */
.highlights { padding-block: var(--section-tight); overflow-x: clip; }   /* a turning page travels to the screen edge, never beyond it */
.highlights__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-block-size: 2.75rem; margin-block-end: clamp(1.25rem, 1rem + 1vw, 2rem); }
.highlights .kicker { margin-block-end: 0; }
.highlights__nav { display: flex; align-items: center; gap: var(--s-1); margin-inline-end: calc(var(--s-3) * -1); }   /* the arrow's line ends on the content edge */
.highlights__count { min-inline-size: 4.5ch; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; text-align: center; color: var(--c-muted); }
.highlights__arrow { display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; background: none; border: 0; color: var(--c-navy); cursor: pointer; transition: color var(--dur-fast) var(--ease); }
.highlights__arrow-icon { inline-size: 1.5rem; block-size: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.2; transition: transform 400ms var(--ease); }
@media (hover: hover) {   /* a tap on a touch screen leaves :hover behind: no sticky blue or nudged arrow */
  .highlights__arrow:hover { color: var(--c-accent); }
  [data-highlights-prev]:hover .highlights__arrow-icon { transform: translateX(-3px); }
  [data-highlights-next]:hover .highlights__arrow-icon { transform: translateX(3px); }
}
[dir="rtl"] .highlights__arrow-icon { scale: -1 1; }
.highlights__stage { --per: 1; position: relative; touch-action: pan-y; }   /* cards per page, read by main.js */
@media (min-width: 48rem) { .highlights__stage { --per: 2; } }
@media (min-width: 64rem) { .highlights__stage { --per: 3; } }
.highlights__cards { list-style: none; display: grid; grid-template-columns: repeat(var(--per), minmax(0, 1fr)); gap: var(--gap); }
.highlights__card { display: grid; grid-template-rows: auto auto 1fr; align-content: start; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); background: var(--c-surface); }
.highlights__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-block-end: clamp(1.25rem, 1rem + 1vw, 2rem); }
.highlights__num { color: var(--c-muted); }
.highlights__icon { display: flex; color: var(--c-accent); }
.highlights__icon .icon { inline-size: 2rem; block-size: 2rem; }
.highlights__title { font-size: clamp(1.375rem, 1.1rem + 0.75vw, 1.75rem); line-height: 1.2; color: var(--c-accent); margin-block-end: var(--s-3); }   /* the blue of the services icons and links */
.highlights__text { font-size: 1rem; color: var(--c-ink); max-inline-size: none; text-wrap: pretty; }   /* ragged right: justified text left gaps in these narrow cards */
.highlights.is-live .highlights__cards { grid-template-rows: auto auto 1fr; row-gap: 0; }
.highlights.is-live .highlights__card { grid-column: 1; grid-row: 1 / span 3; grid-template-rows: subgrid; row-gap: 0; visibility: hidden; translate: calc((100% + var(--gap)) * var(--miss, 0) / 2) 0; }   /* subgrid: tops, titles and texts line up across all five; a last page with fewer cards is centred (--miss from main.js) */
[dir="rtl"] .highlights.is-live .highlights__card { translate: calc((100% + var(--gap)) * var(--miss, 0) / -2) 0; }
.highlights.is-live .highlights__title { align-self: end; }   /* when one title needs two lines, the shared row's spare line goes above the one-line titles, not between title and text */
@media (min-width: 48rem) { .highlights.is-live .highlights__card:nth-child(2n) { grid-column: 2; } }
@media (min-width: 64rem) { .highlights.is-live .highlights__card:nth-child(n) { grid-column: 1; } .highlights.is-live .highlights__card:nth-child(3n + 2) { grid-column: 2; } .highlights.is-live .highlights__card:nth-child(3n) { grid-column: 3; } }
.highlights.is-live .highlights__card.is-current, .highlights.is-live .highlights__card.is-moving { visibility: visible; }
.highlights__card.is-moving, .highlights__card.is-moving > * { will-change: transform, opacity; }
.highlights__dots { display: flex; justify-content: center; gap: var(--s-1); margin-block-start: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.highlights__dot { display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; padding: 0; background: none; border: 0; cursor: pointer; }   /* 24 px to tap; the dot itself is 9 px */
.highlights__dot-ring { display: block; inline-size: 0.5625rem; block-size: 0.5625rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--c-accent); overflow: hidden; transition: transform var(--dur-fast) var(--ease); }
.highlights__dot-fill { display: block; block-size: 100%; border-radius: 50%; background: var(--c-accent); transform: scale(0); transition: transform 600ms var(--ease); }
.highlights__dot[aria-current="true"] .highlights__dot-fill { transform: none; }   /* the page on show is filled */
@media (hover: hover) { .highlights__dot:hover .highlights__dot-ring { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .highlights__dot-fill, .highlights__dot-ring, .highlights__arrow-icon { transition: none; } }
@media print {   /* on paper all five cards stand in rows */
  .highlights__nav, .highlights__dots { display: none !important; }
  .highlights.is-live .highlights__cards { grid-template-rows: none; row-gap: var(--gap); }
  .highlights.is-live .highlights__card:nth-child(n) { grid-column: auto; grid-row: auto; grid-template-rows: auto auto 1fr; visibility: visible; translate: none; }
  .highlights.is-live .highlights__card, .highlights.is-live .highlights__card > * { transform: none !important; opacity: 1 !important; }   /* printed mid-glide or mid-swipe */
}

/* ---- heritage timeline (homepage "Recognition and Awards") -----------
   One grid column per entry; each entry spans three rows (text above, line, text below) through subgrid and alternates
   its text above and below the line, running into the next column, whose text sits on the other side. This is the
   static layout (no JS, reduced motion, short screens): the line is drawn in full and the strip scrolls sideways.
   motion.css pins the section and draws the line with the scroll once main.js marks it .is-live. */
.heritage { --step: clamp(9rem, 7.5rem + 3vw, 10.5rem); --mark: 1.25rem; }
.heritage__sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.heritage__pin { padding-block: var(--section); }
.heritage__head { margin-block-end: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.heritage__viewport { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: var(--c-hair) transparent; }
.heritage__viewport:focus-visible { outline-offset: -2px; }
.heritage__track { list-style: none; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: var(--step); grid-template-rows: auto var(--mark) auto; inline-size: max-content; padding-block: var(--s-2); padding-inline: max(var(--gutter), (100% - var(--container)) / 2) calc(max(var(--gutter), (100% - var(--container)) / 2) + var(--step)); }   /* the first star sits on the content edge; room after today for its text */
.heritage__entry { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); }
.heritage__entry::before, .heritage__entry::after { content: ""; grid-row: 2; grid-column: 1; align-self: center; block-size: 1px; background: var(--c-hair); }   /* the line from this star to the next … */
.heritage__entry::after { background: var(--c-accent); transform-origin: 0 50%; }   /* … and its drawn part (scaled by the scroll in motion.css) */
.heritage__entry:last-child::after { content: none; }
.heritage__entry:last-child::before { background: repeating-linear-gradient(90deg, var(--c-hair) 0 4px, transparent 4px 9px); -webkit-mask-image: linear-gradient(90deg, #000 20%, transparent); mask-image: linear-gradient(90deg, #000 20%, transparent); }   /* the line runs on past today */
.heritage__mark { grid-row: 2; grid-column: 1; align-self: center; justify-self: start; inline-size: var(--mark); block-size: var(--mark); margin-inline-start: calc(var(--mark) / -2); position: relative; z-index: 1; overflow: visible; fill: currentColor; color: var(--c-accent); }   /* star = awarded year, ring = today */
.heritage__mark--diamond { color: var(--c-navy); }   /* milestone */
.heritage__mark--today { fill: var(--c-bg); }   /* the ring's inside (heritage-marks.svg) hides the line behind it in the page colour, like .career__ring */
.heritage__body { grid-column: 1; inline-size: calc(2 * var(--step) - var(--s-6)); }
.heritage__entry:nth-child(odd) .heritage__body { grid-row: 1; align-self: end; padding-block-end: var(--s-6); }
.heritage__entry:nth-child(even) .heritage__body { grid-row: 3; align-self: start; padding-block-start: var(--s-6); }
.heritage__year { font-family: var(--font-serif); font-size: clamp(1.5rem, 1.25rem + 0.6vw, 1.875rem); font-weight: var(--fw-light); line-height: 1; letter-spacing: -0.01em; color: var(--c-accent); font-variant-numeric: lining-nums; margin-block-end: var(--s-3); }
.heritage__item + .heritage__item { margin-block-start: var(--s-4); }
.heritage__title { font-family: var(--font-serif-text); font-size: 1.0625rem; font-weight: var(--fw-regular); line-height: 1.25; color: var(--c-navy); text-wrap: balance; }
.heritage__text { font-size: 0.875rem; line-height: 1.5; color: var(--c-muted); text-wrap: balance; text-wrap: pretty; }   /* balance first for Safari before 26 (no "pretty") */
.heritage__title + .heritage__text { margin-block-start: var(--s-1); }
/* phones: the record runs down the page, like a profile's career line: the line on the left from star to star, each
   year beside its awards, to the right of its star (compact since 20 Oct 2026: the year on the title's line and smaller
   gaps, a third less scrolling than the year above the title). --mc is the star's centre below the entry's top (the
   year's middle). */
@media screen and (max-width: 47.99rem) {
  .heritage { --mc: 0.7rem; }
  .heritage__viewport { overflow: visible; }
  .heritage__track { display: block; inline-size: auto; padding: 0 var(--gutter); }
  .heritage__entry { position: relative; display: grid; grid-template-columns: var(--mark) minmax(0, 1fr); column-gap: var(--s-4); padding-block-end: 1.375rem; }
  .heritage__entry:last-child { padding-block-end: 0; }
  .heritage__entry::before, .heritage__entry::after { position: absolute; grid-area: auto; align-self: auto; inset-block: var(--mc) calc(-1 * var(--mc)); inset-inline-start: calc(var(--mark) / 2 - 0.5px); inline-size: 1px; block-size: auto; }   /* from this star to the next … */
  .heritage__entry::after { transform-origin: 50% 0; }
  .heritage__entry:last-child::before { inset-block-end: auto; block-size: 4.5rem; background: repeating-linear-gradient(180deg, var(--c-hair) 0 4px, transparent 4px 9px); -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent); mask-image: linear-gradient(180deg, #000 20%, transparent); }   /* … and on past today, fading out */
  .heritage__mark { grid-row: 1; margin: calc(var(--mc) - var(--mark) / 2) 0 0; align-self: start; }
  .heritage__entry:nth-child(n) .heritage__body { grid-row: 1; grid-column: 2; align-self: start; inline-size: auto; padding: 0; }
  .heritage__body { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: var(--s-3); }
  .heritage__year { grid-row: 1 / span 9; font-size: 1.25rem; line-height: 1.1; padding-block-start: 0.05rem; }
  .heritage__item { grid-column: 2; }
  .heritage__item + .heritage__item { margin-block-start: var(--s-3); }
}
@media print {   /* on paper the whole record wraps into rows of three; no line or markers. A wrapping flex row rather than a grid:
                    Chromium moved the printed grid to the next page in one piece and left the heading alone on a page */
  .heritage__viewport { overflow: visible; }
  .heritage__track { display: flex; flex-wrap: wrap; gap: var(--s-6) var(--gap); inline-size: auto; padding-block: 0; padding-inline: max(var(--gutter), (100% - var(--container)) / 2); }   /* aligned with the heading */
  .heritage__entry { display: block; flex: 0 0 calc((100% - 2 * var(--gap)) / 3); }
  .heritage__entry::before, .heritage__entry::after, .heritage__mark { display: none; }
  .heritage__entry:nth-child(n) .heritage__body { inline-size: auto; padding: 0; }
}
/* tablets and computers without the pinned animation (no JS, reduced motion, screens under 34rem tall): the sideways strip
   hid every award from 2019 on beyond the screen's edge, with nothing telling the visitor to scroll. The record wraps into
   rows instead (two columns on tablets, three on computers), each year beside its star, diamond or ring; no line. */
@media screen and (min-width: 48rem) {
  .heritage:not(.is-live) { --mc: 0.9rem; }   /* the star's centre below the entry's top: the year's middle */
  .heritage:not(.is-live) .heritage__viewport { overflow: visible; }
  .heritage:not(.is-live) .heritage__track { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: var(--s-8) var(--gap); inline-size: auto; padding-block: 0; padding-inline: max(var(--gutter), (100% - var(--container)) / 2); }   /* aligned with the heading */
  .heritage:not(.is-live) .heritage__entry { grid-row: auto; grid-template-rows: none; grid-template-columns: var(--mark) minmax(0, 1fr); column-gap: var(--s-4); align-content: start; }
  .heritage:not(.is-live) .heritage__entry::before, .heritage:not(.is-live) .heritage__entry::after { content: none; }
  .heritage:not(.is-live) .heritage__mark { grid-row: 1; align-self: start; margin: calc(var(--mc) - var(--mark) / 2) 0 0; }
  .heritage:not(.is-live) .heritage__entry:nth-child(n) .heritage__body { grid-row: 1; grid-column: 2; align-self: start; inline-size: auto; padding: 0; }
}
@media screen and (min-width: 64rem) { .heritage:not(.is-live) .heritage__track { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.section--stone .num-list, .section--stone .num-list__item { border-color: var(--c-hair-stone); }

/* ---- people ---------------------------------------------------------- */
.people__grid { list-style: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-8) var(--gap); }
.person { grid-column: span 6; }
@media (min-width: 64rem) { .person { grid-column: span 3; } .people__grid--3 .person { grid-column: span 4; } .people__grid--3 .person__frame { max-inline-size: 22rem; } }
.person__link { display: block; text-decoration: none; color: inherit; }
.person__frame { display: block; aspect-ratio: 4 / 5; background: #ececec; overflow: hidden; margin-block-end: var(--s-4); }   /* neutral grey placeholder while the portrait loads */
.person__img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center top; filter: grayscale(1); transition: filter var(--dur) var(--ease); }   /* true black and white at rest, colour on hover */
.person__link:hover .person__img { filter: grayscale(0.2); }
.person__name { display: block; font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: var(--fw-regular); line-height: 1.2; text-wrap: balance; color: var(--c-navy); }
.person__link:hover .person__name { color: var(--c-accent); }
.person__role { display: block; color: var(--c-muted); font-size: var(--fs-small); margin-block-start: var(--s-1); }
.person__mail { display: inline-block; font-size: var(--fs-small); margin-block-start: var(--s-2); text-decoration: none; color: var(--c-muted); overflow-wrap: anywhere; }
.person__mail:hover { color: var(--c-accent); text-decoration: underline; }

/* ---- team cards (components/team.njk; option A of the team test, 28 Sep 2026) ----------------------------------
   The aligned portraits (scripts/images/team-cutouts.swift → team-align.mjs → assets/img/team/team-<key>.webp) share
   one head size and eye line; a card shows one shared 4:5 window of the canvas (--team-card-*, printed by
   team-align.mjs), so eyes sit on one line across a row. A light panel frames the whole portrait. Team page: three to
   a row from tablets up, each card 80 % of a third of the width with the rest in the gaps (column gap = 10 % + 0.8 ×
   the usual gap), two on phones. Homepage: four columns, Dr. Ghassan over two with his role, focus areas and
   languages beside him. The .person cards above remain for the Abu Dhabi homepage. */
.team-grid { --team-card-w: 141.509%; --team-card-l: -20.755%; --team-card-t: -20.283%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--gap); list-style: none; margin: 0; padding: 0; }
.team-card { display: block; }
.team-card--lead { grid-column: 1 / -1; }
@media (min-width: 48rem) {
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(10% + 0.8 * var(--gap)); row-gap: var(--s-12); }
  .team-grid--home { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
  .team-card--lead { grid-column: span 2; }
}
.team-card__link { display: block; text-decoration: none; color: inherit; }
.team-card__frame { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: linear-gradient(180deg, #eff3f6, #e9eef2 55%); }   /* a step deeper than Frost, so white clothes still read */
.team-card__img { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: var(--team-card-w); max-inline-size: none; block-size: auto; margin-inline-start: var(--team-card-l); margin-block-start: var(--team-card-t); filter: grayscale(1) brightness(1) contrast(1); transition: filter var(--dur) var(--ease); }   /* black and white at rest, colour under the pointer; the filter lists match, so they interpolate */
.team-card__name { display: block; margin-block-start: var(--s-4); font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: var(--fw-regular); line-height: 1.2; text-wrap: balance; color: var(--c-navy); transition: color var(--dur-fast) var(--ease); }
.team-card__role { display: block; margin-block-start: var(--s-1); font-size: var(--fs-small); line-height: 1.45; color: var(--c-muted); }
.team-card__langs { display: block; margin-block-start: var(--s-1); font-size: 0.875rem; line-height: 1.45; color: var(--c-muted-cool); }   /* quiet blue-grey, 4.6:1 on white */
.team-card__mail { display: inline-block; min-block-size: 1.5rem; margin-block-start: var(--s-1); font-size: 0.875rem; line-height: 1.5rem; color: var(--c-muted); text-decoration: none; overflow-wrap: anywhere; }   /* 24 px: the touch-target minimum (WCAG 2.5.8) */
.team-card__mail:hover { color: var(--c-accent); text-decoration: underline; }
.team-card__link:hover .team-card__name, .team-card__link:focus-visible .team-card__name { color: var(--c-accent); }
.team-card__link:hover .team-card__img, .team-card__link:focus-visible .team-card__img { filter: grayscale(0.15) brightness(1) contrast(1); }
.team-card__link:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 4px; }
/* the homepage's first card: the portrait in the first cell at everyone's size, name and e-mail under it; beside it a
   block as tall as the portrait whose text sits at its foot (the gap between the cells is the grid's) */
.team-lead { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
.team-lead__details { align-self: start; aspect-ratio: 4 / 5; min-inline-size: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.team-lead__details p { margin: 0; }
.team-lead__label { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); line-height: 1.4; color: var(--c-accent); }
.team-lead__text { font-family: var(--font-serif-text); font-size: 0.9375rem; line-height: 1.45; color: var(--c-navy); text-wrap: pretty; }
.team-lead__label + .team-lead__text { margin-block-start: var(--s-1); }
.team-lead__text + .team-lead__label { margin-block-start: var(--s-4); }
.team-lead__details { container-type: inline-size; }
@container (min-width: 15rem) { .team-lead__text.team-lead__summary { text-align: justify; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 6 3 3; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3; } }   /* his short text in Blocksatz (Nando, 19 Oct 2026) wherever its column is at least 15rem wide; narrower (phones, small tablets, 132-215 px) it stays ragged, because Safari does not split the words there and the gaps would open wide. Hyphenation in both languages overrides the German no-split rule for this column (base.css) */
@media (max-width: 29.99rem) { .team-lead__text { font-size: 0.875rem; line-height: 1.4; } }
:lang(de) .team-card__role { hyphens: auto; }   /* Dr. Ghassan's focus list is never split by syllable (base.css): its column is narrow, and every word fits */

/* ---- closing call-to-action band (partials/cta-band.njk) ------------- */
.cta-band { margin-block-start: var(--s-16); padding-block: var(--s-8); border-block: 1px solid var(--c-hair); display: flex; flex-wrap: wrap; gap: var(--s-6); align-items: center; justify-content: space-between; }
.cta-band__text { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--c-navy); max-inline-size: 36ch;  line-height: var(--lh-heading); text-wrap: balance; }
.cta-band__meta { margin-block-start: var(--s-3); font-size: var(--fs-small); color: var(--c-muted); }
.cta-band__meta a { text-decoration: none; }
.cta-band__meta a:hover { text-decoration: underline; }

/* ---- contact block + forms ------------------------------------------ */
.contact-block { display: grid; gap: var(--s-3); margin-block-start: var(--s-8); }
.contact-block__line { line-height: 1.7; }
.contact-block__label { display: block; color: var(--c-muted); margin-block-end: 2px; }
.contact-block a { text-decoration: none; }
.contact-block a:hover { text-decoration: underline; }
.form { display: grid; gap: var(--s-6); align-content: start; }   /* never let a stretched grid cell inflate the fields */
.form__field { display: grid; gap: var(--s-2); }
.form__field label { font-size: var(--fs-small); color: var(--c-muted); }
.form__field input, .form__field textarea, .form__field select { inline-size: 100%; min-block-size: 2.75rem; background: transparent; border: 0; border-block-end: 1px solid var(--c-ink); border-radius: 0; padding: var(--s-2) 0; color: var(--c-ink); transition: border-color var(--dur-fast) var(--ease); }
.form__field input:focus-visible, .form__field textarea:focus-visible, .form__field select:focus-visible { outline: none; border-color: var(--c-accent); box-shadow: 0 2px 0 var(--c-accent); }
.form__field textarea { resize: none; min-block-size: 8rem; field-sizing: content; }
/* the one select (intake form, "Number of employees"): drawn like the other fields in every browser. Safari's own menu
   ignored the height and radius (24 px, rounded ends, text indented); the chevron is two gradients in the text colour */
.form__field select { -webkit-appearance: none; appearance: none; padding-inline-end: 1.5rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 0.4375rem center, right 0.125rem center; background-size: 0.3125rem 0.3125rem; background-repeat: no-repeat; }
.form__hint { font-size: 0.875rem; line-height: 1.45; color: var(--c-muted); }   /* a note that belongs to one field, under it */
.form__required, .form__privacy { font-size: var(--fs-small); color: var(--c-muted); }
.form__hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6); }
.form__status { font-size: var(--fs-small); color: var(--c-muted); }
.form__status.is-ok { color: var(--c-accent); }
.form__status.is-error { color: var(--c-error); }
.form__error-static { display: none; font-size: var(--fs-small); color: var(--c-error); }
.form__error-static:target { display: block; }   /* shown after a no-JS submission that the mailer bounced back to #form-error */

/* ---- home: mark-led hero (first screen = hero on desktop) ----------- */
.hero { position: relative; isolation: isolate; padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--sky-band); --sky-band: clamp(6rem, 3rem + 10vw, 10rem); }   /* white opening; the bottom padding reserves the skyline band */
/* skyline: a wide low band along the bottom plus the Burj Khalifa rising in the free corridor between the text and the mark
   (the navy at 24 % as a stroke opacity, not color-mix(), which Safari before 16.2 drops: it would draw no line at all) */
.hero__skyline { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero__skyline svg { position: absolute; max-inline-size: none; fill: none; stroke: var(--c-navy); stroke-opacity: 0.24; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.hero__skyline :is(path, line, polyline) { vector-effect: non-scaling-stroke; }
.hero__skyline .skyline-band { inset-block-end: 0; inset-inline-start: 50%; inline-size: min(100% - 2 * var(--gutter), var(--container)); block-size: auto; translate: -50% 0; }   /* viewBox 1200×180, ground line at y 160 */
.hero__skyline .skyline-burj { inset-inline-start: calc(50% + var(--burj-x, 0px)); block-size: min(var(--burj-h, 70%), 560px); inline-size: auto; translate: -50% 0; inset-block-end: calc(min(100vw - 2 * var(--gutter), var(--container)) / 60); }   /* viewBox 120×560, ground at the bottom edge; stands on the band's ground line */
@media (min-width: 64rem) { .hero__skyline .skyline-burj { --burj-x: clamp(-13px, 64px - 4vw, 23px); } }   /* follows the measured corridor centre: +23 px at 1024, −13 px at 1920 */
@media (max-width: 63.99rem) { .hero__skyline .skyline-burj { block-size: calc(var(--sky-band) * 0.8); } }   /* no corridor: the Burj stays inside the band */
@media (max-width: 47.99rem) { .hero__skyline .skyline-band { inline-size: min(170%, 780px); } .hero__skyline .skyline-burj { inset-block-end: calc(min(170vw, 780px) / 60); } }   /* capped so the tallest tower stays inside the reserved band on large phones and small tablets */
@media (min-width: 64rem) { .hero { display: flex; align-items: center; min-block-size: min(calc(100svh - var(--header-h)), 54rem); } }
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-8) var(--gap); align-items: center; }
.hero__main { grid-column: 1 / -1; }
.hero__mark { grid-column: 1 / -1; order: -1; justify-self: start; display: flex; flex-direction: column; align-items: center; }                                  /* phones/tablets: the mark opens the page like a letterhead */
.hero__mark .hero-logo { block-size: clamp(4.5rem, 3.5rem + 5vw, 7rem); inline-size: auto; aspect-ratio: 613 / 647; overflow: visible; }   /* inline SVG: written by a pen (js/hero-logo.js) */
.azh-sec { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }   /* the reveal mask's pen strokes */
.azh-mask { mask-type: alpha; }
.hero__est { color: var(--c-muted); margin-block-start: var(--s-4); text-align: center; }   /* centred under the mark */
@media (max-width: 47.99rem) {   /* phones: the words open the page; the mark follows, centred, hovering over the Burj (or the Abu Dhabi tower) at the band's top */
  .hero__mark { order: 0; justify-self: center; margin-block-end: var(--s-3); }
  .hero__est { font-size: 0.625rem; letter-spacing: 0.03em; margin-block-start: var(--s-1); }   /* 10 px (was 7): a small line just under the mark that can still be read */
}
@media (min-width: 64rem) {
  .hero__main { grid-column: 1 / 8; }
  .hero__mark { grid-column: 8 / 12; order: 0; justify-self: end; }
  .hero__mark .hero-logo { block-size: clamp(16rem, 9.2rem + 13.8vw, 25.3rem); }
}
/* the statement's column: the 28ch of .statement in the Source Serif italic, as em, so it is the same whichever font has loaded
   and the lines do not rewrap (and move the page) when the webfont replaces its fallback */
.hero__statement { max-inline-size: 15.862em; color: var(--c-statement); }   /* a step behind the name (from version 2) */
.hero__statement { margin-block-start: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
/* laptops: the opening scales with the window's height, so the words, the mark, the Burj and the whole skyline fit the first
   screen of a 1366 × 768, 1280 × 800, 1440 × 900 or 1536 × 864 laptop even with the browser's bars (before, the skyline sat
   below the edge and scrolling to it erased the mark). Each size is the approved one or smaller: from about 900 px tall
   (880 px for the name) nothing changes; the band keeps its drawing and only gives up empty sky. */
@media (min-width: 64rem) {
  .hero { padding-block-start: clamp(1.5rem, 30svh - 11rem, clamp(3rem, 2rem + 4vw, 6rem)); --sky-band: clamp(7.5rem, 20svh - 1rem, clamp(6rem, 3rem + 10vw, 10rem)); }
  .hero .display { font-size: clamp(2.625rem, 12svh - 1.125rem, var(--fs-display)); max-inline-size: 8em; }   /* smaller, the name keeps its two lines ("Azhari Legal / Consultancy") and its distance from the Burj */
  .hero__statement { font-size: clamp(1.25rem, 3.5svh - 0.05rem, clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem)); margin-block-start: clamp(1.25rem, 5svh - 0.25rem, clamp(1.5rem, 1rem + 2vw, 2.5rem)); }
  .hero__mark .hero-logo { block-size: clamp(14rem, 52svh - 3.75rem, clamp(16rem, 9.2rem + 13.8vw, 25.3rem)); }
}
.hero__cta { margin-block-start: var(--s-8); }
.hero__logo { margin: 0; line-height: 0; }
.hero__logo img { inline-size: 100%; max-inline-size: 46rem; block-size: auto; }   /* the lockup fills the headline column when hero.useLogo is on */
.quick-contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-12) var(--gap); }
.quick-contact__info { grid-column: 1 / -1; }
.quick-contact__form { grid-column: 1 / -1; }
@media (min-width: 64rem) { .quick-contact__info { grid-column: 1 / 6; } .quick-contact__form { grid-column: 7 / -1; } }

/* ---- shared page header (kicker or breadcrumb, title, optional lead) ---- */
.page-head { padding-block: clamp(2rem, 1.25rem + 2.5vw, 3.75rem) clamp(1.25rem, 0.75rem + 1.5vw, 2.25rem); }   /* every page opens on white; a compact title band so the content comes sooner */
.page-head__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6) var(--gap); align-items: last baseline; }   /* the lead's last line sits on the title's baseline */
.page-head__main { grid-column: 1 / -1; }
.page-head__aside { grid-column: 1 / -1; }
@media (min-width: 64rem) { .page-head__main { grid-column: 1 / 8; } .page-head__aside { grid-column: 9 / -1; } }
/* breadcrumb = parents only (the h1 names the page); styled like the kicker line so every inner page opens the same way */
.breadcrumb { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.02em; line-height: 1.4; color: var(--c-muted); margin-block-end: var(--s-4); }   /* sentence case, like the kicker */
.breadcrumb::before { content: ""; display: inline-block; inline-size: 1.5rem; block-size: 1px; background: var(--c-accent); margin-inline-end: var(--s-1); }
.breadcrumb a { text-decoration: none; color: var(--c-accent); }
.breadcrumb li + li::before { content: "/"; margin-inline-end: var(--s-2); color: color-mix(in srgb, var(--c-muted) 55%, transparent); }
:lang(de) .highlights__title, :lang(de) .num-list__label { hyphens: auto; -webkit-hyphens: auto; }

/* ---- team index / profile ------------------------------------------ */
.team-index { padding-block-end: var(--page-end); }
.team-group { padding-block: clamp(1.25rem, 1rem + 1vw, 2rem) clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.team-group + .team-group { padding-block-start: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.team-group + .team-group { border-block-start: 1px solid var(--c-hair); }
/* the group titles (1 Oct 2026, from version 2): a short blue rule over a serif title; from 64rem each title stands in a
   left column (columns 1–3) and stays pinned under the header while its portraits (columns 4–12) scroll past */
.team-group__title { position: relative; padding-block-start: calc(var(--s-3) + 1px); margin-block-end: var(--s-8); font-size: clamp(1.25rem, 1.15rem + 0.3vw, 1.375rem); font-weight: 400; letter-spacing: -0.01em; line-height: 1.2; color: var(--c-navy); }
.team-group__title::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 2rem; block-size: 1px; background: var(--c-accent); }
@media (min-width: 64rem) {
  .team-group { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .team-group__title { grid-column: 1 / 4; margin-block-end: 0; padding-inline-end: var(--s-4); position: sticky; inset-block-start: calc(var(--stick-top, var(--header-h)) + var(--s-8)); }
  .team-group .team-grid { grid-column: 4 / -1; column-gap: var(--gap); }
}
@media print { .team-group__title { position: static; } }
/* a team member's profile (option B "Career line", chosen 28 Sep 2026): name, role and the two facts; the career as a line
   from the first entry to "Today" and the key expertise under it, in columns 1–7; the portrait in 9–12, which stays in
   view on a computer. main.js draws the line with the scroll and develops the portrait into colour (motion.css);
   without JS, with reduced motion and on paper the line is drawn in full and the portrait stays black and white. */
.profile { padding-block: clamp(2rem, 1.25rem + 2.5vw, 3.75rem) var(--page-end); }
.profile .breadcrumb { margin-block-end: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.profile__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(2.25rem, 1.75rem + 2vw, 3.25rem); }
.profile__grid > * { grid-column: 1 / -1; }
.profile__role { margin-block-start: var(--s-3); max-inline-size: 26ch; font-family: var(--font-italic); font-style: italic; font-weight: 360; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.3; letter-spacing: -0.005em; color: var(--c-navy); text-wrap: balance; }
:lang(de) .profile__role { hyphens: manual; -webkit-hyphens: manual; }
.profile__facts { display: grid; gap: var(--s-4); margin-block-start: var(--s-8); }
.profile__fact { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--s-4); align-items: baseline; }
.profile__fact dt { font-size: var(--fs-small); color: var(--c-muted); }
.profile__fact dd { min-inline-size: 0; font-family: var(--font-serif-text); font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); line-height: 1.4; color: var(--c-navy); }
.profile__mail { min-block-size: 2.75rem; padding: var(--s-2) 1.25rem; font-size: 1.0625rem; overflow-wrap: anywhere; }   /* the e-mail in a smaller fine frame, like "Read more" */
.profile h2 { font-size: var(--fs-h3); margin-block-end: var(--s-8); }
.profile__side { order: -1; inline-size: min(100%, 22rem); }   /* phones: the portrait first */
.profile__frame { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-stone-deep); }
.profile__photo { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 0; filter: grayscale(1); transition: filter var(--dur) var(--ease); }   /* black and white at rest, colour under the pointer */
@media (hover: hover) { .profile__photo:hover { filter: none; } }
@media (min-width: 48rem) {
  .profile__head { grid-column: 1 / 9; grid-row: 1; align-self: end; }
  .profile__side { order: 0; grid-column: 9 / -1; grid-row: 1; inline-size: auto; align-self: start; }
}
@media (min-width: 64rem) {
  .profile__head, .profile__career, .profile__expertise { grid-column: 1 / 8; }
  .profile__head { align-self: start; }
  .profile__side { grid-row: 1 / span 3; }   /* the whole height of the content, so it can stay in view */
}
@media (min-width: 64rem) and (min-height: 40rem) { .profile__side { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-8)); } }
/* the key expertise: a quiet index in the serif at reading size, two columns from 40rem */
.expertise { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3) var(--gap); }
@media (min-width: 40rem) { .expertise { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.expertise li { font-family: var(--font-serif-text); font-size: 1.125rem; line-height: 1.45; color: var(--c-navy); }
/* the career line: years hang to the left of a 1 px spine, a navy diamond per entry, the ring for today; phones and
   careers without any year put the spine at the start */
.career { --yr: 8.5rem; --mk: 1.5rem; --lh1: 1.875rem; --mk-c: calc(var(--lh1) / 2 + 0.125rem); --gap-x: var(--s-4); position: relative; }
.career__list { list-style: none; }
.career__item, .career__today { position: relative; display: grid; grid-template-columns: var(--yr) var(--mk) minmax(0, 1fr); column-gap: var(--gap-x); align-items: baseline; }
.career__item { padding-block-end: clamp(1.5rem, 1.25rem + 0.75vw, 2rem); }
.career__year { grid-column: 1; font-family: var(--font-serif); font-weight: var(--fw-light); font-size: 1.5rem; line-height: var(--lh1); letter-spacing: -0.01em; color: var(--c-accent); font-variant-numeric: lining-nums tabular-nums; text-align: end; white-space: nowrap; }
.career__text { grid-column: 3; font-family: var(--font-serif-text); font-size: 1.1875rem; line-height: 1.55; color: var(--c-navy); max-inline-size: 46ch; text-wrap: balance; text-wrap: pretty; }   /* balance first: Safari before 26 has no "pretty" and would leave one word alone */
.career__text::first-letter { text-transform: uppercase; }   /* every entry starts with a capital (some profiles' entries begin "graduated …"; the text itself stays 1:1) */
.career__mark { position: absolute; z-index: 1; inset-block-start: calc(var(--mk-c) - var(--mk) / 2); inset-inline-start: calc(var(--yr) + var(--gap-x)); inline-size: var(--mk); block-size: var(--mk); overflow: visible; fill: currentColor; color: var(--c-navy); }
.career__mark--today { color: var(--c-accent); }
.career__ring { fill: var(--c-bg); stroke: currentColor; stroke-width: 1.5; }
.career__item::before, .career__item::after { content: ""; position: absolute; inset-block: var(--mk-c) calc(-1 * var(--mk-c)); inset-inline-start: calc(var(--yr) + var(--gap-x) + var(--mk) / 2 - 0.5px); inline-size: 1px; }
.career__item::before { background: var(--c-hair); }   /* the line from this entry to the next … */
.career__item::after { background: var(--c-navy); transform-origin: 50% 0; }   /* … and its drawn part (motion.css) */
.career--undated { --yr: 0rem; }
.career--undated .career__item, .career--undated .career__today { grid-template-columns: var(--mk) minmax(0, 1fr); }
.career--undated .career__item .career__year { display: none; }
.career--undated .career__text, .career--undated .career__today .career__year { grid-column: 2; text-align: start; }
.career--undated .career__mark { inset-inline-start: 0; }
.career--undated .career__item::before, .career--undated .career__item::after { inset-inline-start: calc(var(--mk) / 2 - 0.5px); }
@media (max-width: 39.99rem) {
  .career { --yr: 0rem; }
  .career__item, .career__today { grid-template-columns: var(--mk) minmax(0, 1fr); row-gap: var(--s-1); }
  .career__year, .career__text { grid-column: 2; text-align: start; }
  .career__item--undated .career__year { display: none; }   /* no empty year line above an undated entry */
  .career__mark { inset-inline-start: 0; }
  .career__item::before, .career__item::after { inset-inline-start: calc(var(--mk) / 2 - 0.5px); }
  .career__year { font-size: 1.375rem; }
}
@media print { .profile__side { position: static; } .career__item { break-inside: avoid; } }

/* ---- contact --------------------------------------------------------- */
/* One Frost band (20 Oct 2026, design B of the contact test): the hand-drawn map with the firm's paragraph under it and
   the details beside it, then the form on its white sheet, centred */
.contact { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem); }
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-8) var(--gap); align-items: start; }
.contact__map, .contact__info { grid-column: 1 / -1; }
@media (min-width: 64rem) { .contact__map { grid-column: 1 / 9; } .contact__info { grid-column: 9 / -1; } }
.contact__intro { margin-block-start: var(--s-8); max-inline-size: 40rem; }
.contact__info > h2 { margin-block-end: var(--s-6); }
.contact__maplinks { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-6); }
.contact__maplinks .link-cta { min-block-size: 2.75rem; padding-inline: 1rem; font-size: var(--fs-small); }
/* the details: phone and e-mail in the serif, large (a tap calls or writes on a phone); address and fax as a pair */
.contact-facts { display: grid; font-style: normal; }
@media (min-width: 30rem) { .contact-facts { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); column-gap: var(--gap); } }
@media (min-width: 64rem) { .contact-facts { grid-template-columns: minmax(0, 1fr); } }   /* the narrow column beside the map: one under the other */
.contact-fact { padding-block: var(--s-4); border-block-start: 1px solid var(--c-hair-stone); line-height: 1.6; }
.contact-fact--wide { grid-column: 1 / -1; }
.contact-fact__label { display: block; margin-block-end: var(--s-1); font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: var(--track-mono); color: var(--c-muted); }
.contact-fact__big { display: inline-block; padding-block: 0.2em; font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.008em; font-variant-numeric: lining-nums; color: var(--c-navy); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.contact-fact__big:hover { color: var(--c-accent); }
@media (prefers-reduced-motion: reduce) { .contact-fact__big { transition: none; } }

/* the map: the pen's navy hairlines (as the homepage skyline), the office in the firm's blue; drawn in by motion.css */
.contact-map { color: var(--c-navy); }
.contact-map svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.contact-map :is(path, line, polyline) { vector-effect: non-scaling-stroke; }
.contact-map__tall { display: none; }
@media (max-width: 47.99rem) {
  .contact-map { margin-inline: calc(-1 * var(--gutter)); }   /* phones: the close-up runs to the screen's edges */
  .contact-map__wide { display: none; }
  .contact-map__tall { display: block; }
}
.contact-map .cm-frame { stroke-opacity: 0.45; }   /* the sheet's hand-drawn edge: every line runs to it */
.contact-map .cm-water { stroke-opacity: 0.4; }
.contact-map .cm-major { stroke-opacity: 0.75; }
.contact-map .cm-minor { stroke-opacity: 0.38; }
.contact-map .cm-landmarks { stroke-opacity: 0.62; }
.contact-map .cm-pin { color: var(--c-accent); }
.contact-map .cm-pin__dot { fill: currentColor; stroke: none; }
.contact-map .cm-pin__ring { fill: none; stroke: currentColor; stroke-opacity: 0.55; vector-effect: non-scaling-stroke; }
.contact-map text { stroke: none; fill: var(--c-navy); font-family: var(--font-sans); font-weight: 500; letter-spacing: 0.01em; }
.contact-map .cm-label--road { fill: var(--c-muted); font-weight: 400; letter-spacing: 0.03em; }
.contact-map .cm-label--district { fill: var(--c-muted); font-weight: 500; letter-spacing: 0.08em; }
.contact-map .cm-label--office { font-family: var(--font-serif-text); font-weight: 400; letter-spacing: 0; }
.contact-map .cm-label__sub { font-family: var(--font-sans); fill: var(--c-muted); }
.contact-map__credit { max-inline-size: none; margin-block-start: var(--s-2); font-size: var(--fs-mono-sm); color: var(--c-muted); text-align: end; }
.contact-map__credit a { color: inherit; }
@media (max-width: 47.99rem) { .contact-map__credit { text-align: start; } }

/* the message: A's white sheet on the Frost band, the heading inside it, centred on the page */
.contact-message { padding-block: 0 clamp(2.5rem, 2rem + 3vw, 5rem); }
.contact-message__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.contact-message__sheet { grid-column: 1 / -1; padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); background: var(--c-surface); }
@media (min-width: 48rem) { .contact-message__sheet { grid-column: 2 / 12; } }
@media (min-width: 64rem) { .contact-message__sheet { grid-column: 4 / 10; } }
.contact-message__title { margin-block-end: var(--s-8); }

/* ---- calculator ------------------------------------------------------
   A tool on the Frost band (design A of three, chosen 28 Sep 2026): outlined white fields — the one exception to the
   site's underlined form fields — beside a readout card that fills in as you type; under the fields, the free-consultation
   offer above the threshold. Then the rules as four figures from the law and "Good to know" on Frost. */
.calc { --field-edge: var(--c-field-edge); background: var(--c-stone); padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }   /* field outline 3.1:1 on Frost, 3.3:1 on white (WCAG 1.4.11) */
.calc__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-8) var(--gap); align-items: start; }
.calc__inputs, .calc__readout, .calc__advisory { grid-column: 1 / -1; min-inline-size: 0; }
@media (min-width: 64rem) {   /* computers: the fields, and under them the free-consultation offer; the readout beside both */
  .calc__grid { grid-template-rows: auto 1fr; }   /* the readout's extra height goes to the second row, so the offer sits right under the fields */
  .calc__inputs { grid-column: 1 / 6; grid-row: 1; } .calc__readout { grid-column: 7 / -1; grid-row: 1 / span 2; } .calc__advisory { grid-column: 1 / 6; grid-row: 2; }
}
.calc__fields { display: grid; gap: var(--s-6) var(--gap); }
@media (min-width: 40rem) { .calc__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .calc__field--salary { grid-column: 1 / -1; } }
.calc__field { display: grid; gap: var(--s-2); align-content: start; min-inline-size: 0; }
.calc__field label { font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.4; color: var(--c-ink); }
.calc__box { display: flex; align-items: center; min-block-size: 3.25rem; background: var(--c-surface); border: 1px solid var(--field-edge); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.calc__box:hover { border-color: var(--c-ink); }
.calc__box:focus-within { border-color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); }   /* a 2 px blue ring around the whole box */
.calc__box input { flex: 1 1 auto; min-inline-size: 0; inline-size: 100%; min-block-size: 3.125rem; padding: 0 var(--s-4); background: transparent; border: 0; border-radius: 0; font-size: 1.0625rem; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.calc__box input:focus-visible { outline: none; }   /* the box draws the ring */
.calc__box--money input { padding-inline-start: var(--s-2); }
.calc__unit { flex: 0 0 auto; padding-inline-start: var(--s-4); font-size: var(--fs-small); font-weight: var(--fw-medium); letter-spacing: 0.02em; color: var(--c-muted); pointer-events: none; }
/* date fields of the calculator and the intake form */
:is(.calc__box, .form__field) input[type="date"] { -webkit-appearance: none; appearance: none; }   /* iOS Safari: an empty date field keeps its height */
.form__field input[type="date"] { block-size: 2.75rem; }   /* the intake form's dates as tall as its text fields (they were 2–4 px taller) */
:is(.calc__box, .form__field) input[type="date"]::-webkit-date-and-time-value { text-align: start; margin: 0; }
:is(.calc__box, .form__field) input[type="date"]::-webkit-calendar-picker-indicator { inline-size: 1.25rem; block-size: 1.25rem; padding: 0.25rem; margin: 0; opacity: 1; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231960a5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v3M16 2v3'/%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E") center / 1.25rem no-repeat; }   /* Chrome's calendar icon in the firm's blue (a data: image, allowed by img-src) */
.calc__hint { font-size: 0.875rem; line-height: 1.45; color: var(--c-muted); }
.calc__error { font-size: 0.875rem; line-height: 1.45; color: var(--c-error); }
.calc__box:has(input[aria-invalid="true"]) { border-color: var(--c-error); }
.calc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-block-start: var(--s-8); }
.calc__privacy { display: flex; align-items: flex-start; gap: var(--s-2); font-size: 0.875rem; line-height: 1.45; color: var(--c-muted); max-inline-size: 34ch; }
.calc__privacy .icon { flex: 0 0 auto; inline-size: 1rem; block-size: 1rem; margin-block-start: 0.12em; color: var(--c-accent); }

/* readout card */
.calc__readout { scroll-margin-block-start: calc(var(--header-h) + var(--s-4)); }
.calc__card { background: var(--c-surface); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.calc__title { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: var(--fw-medium); letter-spacing: 0.01em; line-height: 1.4; color: var(--c-muted); }
.calc__figure { margin-block-start: var(--s-2); font-family: var(--font-serif); font-weight: var(--fw-light); font-size: clamp(2.75rem, 2rem + 3.2vw, 4.5rem); line-height: 1.05; letter-spacing: -0.015em; color: var(--c-navy); font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; max-inline-size: none; }
.calc__cur { font-family: var(--font-sans); font-size: 0.3em; font-weight: var(--fw-medium); letter-spacing: 0.06em; color: var(--c-muted); vertical-align: 0.95em; margin-inline-end: 0.1em; }
.calc__service { margin-block-start: var(--s-3); font-size: var(--fs-small); color: var(--c-muted); }
.calc__empty { margin-block-start: var(--s-4); font-size: var(--fs-small); color: var(--c-muted); max-inline-size: 40ch; }
/* without JavaScript the tool cannot work (its fields have no names, nothing is sent): no Calculate button, and the card
   says so instead of asking for input */
.calc__nojs { display: none; }
@media (scripting: none) { .calc__nojs { display: block; } .calc [data-empty], .calc__actions .btn { display: none; } }
.calc__msg { display: flex; gap: var(--s-2); align-items: flex-start; margin-block-start: var(--s-4); font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink); }
.calc__msg-icon { display: flex; flex: 0 0 auto; margin-block-start: 0.12em; color: var(--c-accent); }
.calc__msg-icon .icon { inline-size: 1.125rem; block-size: 1.125rem; }
.calc__msg-icon--alert, .calc__msg.is-error .calc__msg-icon--info { display: none; }
.calc__msg.is-error .calc__msg-icon--alert { display: flex; color: var(--c-error); }

/* service bar: the years worked, split by rate (a picture; the rows below carry the same numbers for screen readers) */
.calc__bar { margin-block-start: var(--s-6); }
.calc__track { display: flex; block-size: 0.625rem; background: var(--c-stone-deep); overflow: hidden; }
.calc__seg { flex: 0 0 calc(var(--w, 0) * 100%); transition: flex-basis 600ms var(--ease); }
.calc__seg--pre, .calc__key--pre { background: color-mix(in srgb, var(--c-accent) 32%, var(--c-bg)); }
.calc__seg--r21, .calc__key--r21 { background: var(--c-accent); }
.calc__seg--r30, .calc__key--r30 { background: var(--c-navy); }
.calc__seg--over, .calc__key--over { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c-navy) 45%, transparent) 0 1px, transparent 1px 5px), var(--c-stone-deep); }
@supports not (color: color-mix(in srgb, currentcolor, transparent)) {   /* Safari before 16.2 drops the two lines above: the same colours from tokens, in both modes */
  .calc__seg--pre, .calc__key--pre { background: var(--c-accent); opacity: 0.32; }
  .calc__seg--over, .calc__key--over { background: repeating-linear-gradient(135deg, var(--c-field-edge) 0 1px, transparent 1px 5px), var(--c-stone-deep); }
}
.calc__ends { display: flex; justify-content: space-between; gap: var(--s-4); margin-block-start: var(--s-2); font-size: 0.8125rem; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.calc__legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-6); margin-block-start: var(--s-3); font-size: 0.8125rem; line-height: 1.5; color: var(--c-ink); }
.calc__legend li { display: inline-flex; align-items: center; gap: var(--s-2); }
.calc__key { flex: 0 0 auto; inline-size: 0.75rem; block-size: 0.75rem; }
@media (prefers-reduced-motion: reduce) { .calc__seg, .calc__box { transition: none; } }

/* breakdown rows */
.calc__rows { margin-block-start: var(--s-6); border-block-start: 1px solid var(--c-hair); }
.calc__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-block: var(--s-3); border-block-end: 1px solid var(--c-hair); font-size: var(--fs-small); }
.calc__row dt { min-inline-size: 0; color: var(--c-ink); }
.calc__row-note { display: block; margin-block-start: 0.125rem; font-size: 0.8125rem; line-height: 1.45; color: var(--c-muted); }
.calc__row dd { flex: 0 0 auto; color: var(--c-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__row--total { border-block-end: 0; padding-block-end: 0; }
.calc__row--total dt, .calc__row--total dd { font-weight: var(--fw-medium); color: var(--c-navy); }

/* free-consultation offer (above the threshold) */
.calc__advisory { align-self: start; padding: clamp(1.5rem, 1rem + 1.5vw, 2rem); background: var(--c-navy-box); color: #fff; }
.calc__advisory-title { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.25; color: #fff; }
.calc__advisory p { margin-block-start: var(--s-3); font-size: var(--fs-small); color: rgb(255 255 255 / 0.84); }
.calc__advisory p:last-child { margin-block-start: var(--s-6); }
.calc__advisory .calc__advisory-cta { color: #fff; background-image: linear-gradient(#fff 0 0); box-shadow: inset 0 0 0 1px #fff; }   /* on navy the frame is white and fills white */
.calc__advisory .calc__advisory-cta:hover { color: #fff; }
.calc__advisory .calc__advisory-cta:focus-visible { color: var(--c-navy-box); background-size: 100% 100%; }
@media (hover: hover) { .calc__advisory .calc__advisory-cta:hover { color: var(--c-navy-box); background-size: 100% 100%; } }
.calc__advisory :focus-visible { outline-color: #fff; }

/* rules: four figures from the law, then a worked example */
.calc-rules { padding-block: var(--section-tight); }
.calc-rules__list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); margin-block-start: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-block-start: 1px solid var(--c-hair); }
.calc-rule { min-inline-size: 0; padding-block: var(--s-6) var(--s-8); border-block-end: 1px solid var(--c-hair); }
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .calc-rules__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-rule:nth-child(odd) { padding-inline-end: var(--s-6); }
  .calc-rule:nth-child(even) { padding-inline-start: var(--s-6); border-inline-start: 1px solid var(--c-hair); }
}
@media (min-width: 64rem) {
  .calc-rules__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .calc-rule { padding-inline: var(--s-6); }
  .calc-rule:first-child { padding-inline-start: 0; }
  .calc-rule:last-child { padding-inline-end: 0; }
  .calc-rule + .calc-rule { border-inline-start: 1px solid var(--c-hair); }
}
.calc-rule__figure { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-2); color: var(--c-accent); }
.calc-rule__num { font-family: var(--font-serif); font-weight: var(--fw-light); font-size: clamp(3.25rem, 2.5rem + 2.6vw, 4.75rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums; }
.calc-rule__unit { font-size: var(--fs-small); color: var(--c-accent); }
.calc-rule__title { margin-block-start: var(--s-4); font-size: 1.25rem; line-height: 1.3; color: var(--c-navy); }
.calc-rule__text { margin-block-start: var(--s-2); font-size: var(--fs-small); color: var(--c-ink); }
:lang(de) .calc-rule__title, :lang(de) .calc-rule__text, :lang(de) .calc-rule__unit { hyphens: auto; -webkit-hyphens: auto; }
.calc-rules__note { margin-block-start: var(--s-4); font-size: var(--fs-small); color: var(--c-muted); }
.calc-example { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3) var(--gap); margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem); padding-block: var(--s-6); border-block: 1px solid var(--c-hair); }
@media (min-width: 64rem) { .calc-example { grid-template-columns: repeat(12, minmax(0, 1fr)); } .calc-example__title { grid-column: 1 / 5; } .calc-example__body { grid-column: 5 / -1; } }
.calc-example__title { font-size: 1.25rem; line-height: 1.3; color: var(--c-navy); }
.calc-example__sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); font-size: 1.125rem; color: var(--c-ink); font-variant-numeric: tabular-nums; max-inline-size: none; }
.calc-example__op { color: var(--c-muted); }
.calc-example__sum strong { font-weight: var(--fw-medium); color: var(--c-navy); }
.calc-example__note { margin-block-start: var(--s-2); font-size: var(--fs-small); color: var(--c-muted); }

/* good to know (Frost) */
.calc-facts { background: var(--c-stone); padding-block: var(--section-tight); }
.calc-facts__list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--s-12); margin-block-start: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-block-start: 1px solid var(--c-hair-stone); }
@media (min-width: 48rem) { .calc-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.calc-fact { min-inline-size: 0; padding-block: var(--s-6); border-block-end: 1px solid var(--c-hair-stone); }
.calc-fact__title { font-size: 1.25rem; line-height: 1.3; color: var(--c-navy); }
.calc-fact__text { margin-block-start: var(--s-2); font-size: var(--fs-small); color: var(--c-ink); }
.calc-end { padding-block-end: var(--page-end); }
.calc-end .cta-band { margin-block-start: clamp(2.5rem, 2rem + 2vw, 4rem); }

/* ---- multi-step intake form ---------------------------------------- */
.wizard { padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 3rem) var(--page-end); }
.wizard__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-12) var(--gap); align-items: start; }
.wizard__nav { grid-column: 1 / -1; }
.wizard__form { grid-column: 1 / -1; }
@media (min-width: 64rem) { .wizard__nav { grid-column: 1 / 4; } .wizard__form { grid-column: 5 / -1; } }
.steps { list-style: none; display: grid; gap: 0; border-block-start: 1px solid var(--c-hair); }
.steps li { display: flex; gap: var(--s-4); align-items: baseline; padding-block: var(--s-3); border-block-end: 1px solid var(--c-hair); color: var(--c-muted); font-size: var(--fs-small); }
.steps li[aria-current="step"] { color: var(--c-navy); }
.steps li[aria-current="step"] .mono { color: var(--c-accent); }
/* below the two-column layout the step list becomes a numbers-only progress row; without JS all steps stay listed in full */
@media (max-width: 63.99rem) { .js .steps { display: flex; gap: var(--s-4); border-block-start: 0; } .js .steps li { border-block-end: 0; padding-block: 0; font-size: 0; }   /* numbers-only progress row: 01 02 03 04 05 */
  .js .steps li .mono { font-size: var(--fs-mono); color: var(--c-muted); } .js .steps li[aria-current="step"] .mono { color: var(--c-accent); border-block-end: 1px solid var(--c-accent); } }
.wizard fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.wizard fieldset + fieldset { margin-block-start: var(--s-12); padding-block-start: var(--s-8); border-block-start: 1px solid var(--c-hair); }
.wizard legend { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--c-navy); margin-block-end: var(--s-6); padding: 0; }   /* no default inset: lines up with the labels */
.wizard__part { display: grid; gap: var(--s-6); }
.wizard__part + .wizard__part { margin-block-start: var(--s-8); }
.js .wizard fieldset + fieldset { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }   /* one step at a time with JS: no divider above the visible step */
.wizard__part-title { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono);  color: var(--c-muted); margin-block-end: var(--s-4); }
.wizard .form { gap: var(--s-6); }
.choice { display: grid; gap: var(--s-2); }
.choice__label { font-size: var(--fs-small); color: var(--c-muted); }
.choice__options { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.choice__option { display: inline-flex; gap: var(--s-2); align-items: center; }
.choice__option input { accent-color: var(--c-accent); inline-size: 1.1rem; block-size: 1.1rem; }
.form__note { font-size: var(--fs-small); color: var(--c-muted); }
.form__note + .form__note { margin-block-start: var(--s-2); }
.form__note-title { font-weight: var(--fw-medium); color: var(--c-ink); }   /* a run-in heading ("Untaken leave:") */
.form__note-list { list-style: disc; display: grid; gap: var(--s-2); margin-block-start: var(--s-2); padding-inline-start: 1.25rem; max-inline-size: var(--measure); }   /* ends where its intro paragraph ends */
.wizard__controls { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; margin-block-start: var(--s-8); padding-block-start: var(--s-6); border-block-start: 1px solid var(--c-hair); }
.wizard__controls .form__status { flex-basis: 100%; }
/* the source string is "SHOW SUMMARY" (kept 1:1 in the DOM); rendered in sentence case like the other buttons */
.wizard__controls [data-summary-toggle] { display: inline-block; line-height: 2.25rem; text-transform: lowercase; }   /* a block box, so ::first-letter works (not in the buttons' flex box); the 36 px line plus padding keeps it 52 px tall like the others */
.wizard__controls [data-summary-toggle]::first-letter { text-transform: uppercase; }
.summary { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--s-2) var(--s-6); font-size: var(--fs-small); inline-size: 100%; }
.summary dt, .summary dd { overflow-wrap: anywhere; min-inline-size: 0; }
@media (max-width: 39.99rem) { .summary { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-1); } .summary dd { margin-block-end: var(--s-3); } }
.summary dt { color: var(--c-muted); }

/* ---- blog: the magazine (option B of the blog test page, chosen 28 Sep 2026) -------------------------------- */
.blog { padding-block: clamp(0.5rem, 0.25rem + 1vw, 1.25rem) 0; }
.blog--category { padding-block: clamp(1.25rem, 1rem + 1vw, 2rem) var(--page-end); }
.blog-end { padding-block-end: var(--page-end); }
/* topic buttons: tabs on a hairline, shown once js/blog.js has set html.blog-js (at once, before the first paint);
   on phones the row scrolls sideways and fades at the edge */
.blog-filter { display: none; }
.blog-js .blog-filter { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-2) var(--s-8); border-block-end: 1px solid var(--c-hair); margin-block-end: clamp(1.75rem, 1.25rem + 2vw, 3rem); position: sticky; inset-block-start: var(--stick-top, var(--header-h)); z-index: 5; background: var(--c-bg); }   /* pinned under the header while the articles scroll past (1 Oct 2026) */
.blog-filter__chips { display: flex; flex-wrap: wrap; column-gap: var(--s-6); min-inline-size: 0; }
.blog-chip { appearance: none; background: none; border: 0; border-block-end: 1px solid transparent; border-radius: 0; margin-block-end: -1px; padding: var(--s-3) 0; font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.02em; line-height: 1.4; color: var(--c-muted); white-space: nowrap; cursor: pointer; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.blog-chip:hover { color: var(--c-accent); }
.blog-chip[aria-pressed="true"] { color: var(--c-accent); border-block-end-color: var(--c-accent); }
.blog-chip:focus-visible { outline-offset: 0; }
.blog-chip__n { font-size: 0.6875rem; }
.blog-filter__info { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); padding-block: var(--s-3); font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: 0.02em; color: var(--c-muted); max-inline-size: none; }
.blog-filter__info:not(:has(> span:not(.visually-hidden))) { padding: 0; }
@media (max-width: 47.99rem) {
  .blog-filter__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; inline-size: 100%; padding-inline-end: 3.5rem; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }   /* the end padding lets the last topic scroll clear of the fade */
  .blog-filter__chips::-webkit-scrollbar { display: none; }
  .blog-filter__info { padding-block: 0 var(--s-3); order: -1; }
}
.blog-filtering [data-blog-lead] { display: none; }   /* a topic is chosen: the featured block steps aside, its article shows in the grid */
.blog-filtering .blog-grid { border-block-start: 0; padding-block-start: 0; }
.blog-note { margin-block-end: var(--s-8); font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: 0.02em; color: var(--c-muted); }
/* one link per article, stretched over the card, so a click anywhere on it opens the article */
.blog-card, .blog-lead, .blog-news__item { position: relative; }
.blog-link { color: var(--c-navy); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.blog-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
:is(.blog-card, .blog-lead, .blog-news__item):hover .blog-link { color: var(--c-accent); }
.blog-link:focus-visible { outline: none; }
:is(.blog-card, .blog-lead, .blog-news__item):has(.blog-link:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 4px; }
/* the picture frame: 3:2, black and white like the team portraits, colour under the pointer; a post without a picture
   shows its topic's line symbol on Frost instead */
.blog-pic { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-stone-deep); }
.blog-pic img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 50%; filter: grayscale(1); transition: filter var(--dur) var(--ease); }
.blog-pic--top img { object-position: 50% 20%; }
.blog-pic--left img { object-position: 22% 50%; }
.blog-pic--right img { object-position: 80% 40%; }
:is(.blog-card, .blog-lead):is(:hover, :focus-within) .blog-pic img { filter: grayscale(0.2); }
.blog-pic--colour img, :is(.blog-card, .blog-lead):is(:hover, :focus-within) .blog-pic--colour img { filter: none; }   /* a designed cover (picture.colour) keeps its colours */
.blog-pic__tile { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); background: var(--c-stone); box-shadow: inset 0 0 0 1px var(--c-hair-stone); color: var(--c-accent); }
.blog-pic__tile .icon { inline-size: 3.75rem; block-size: 3.75rem; }
.blog-pic__tile .icon :is(path, circle, rect, line, polyline, polygon, ellipse) { vector-effect: non-scaling-stroke; }   /* the same fine line at every size */
.blog-pic__name { font-family: var(--font-serif-text); font-size: 1.125rem; line-height: 1.25; color: var(--c-navy); text-align: center; text-wrap: balance; padding-inline: var(--s-6); }
/* labels: topic above the title; date, reading time and language below */
.blog-topic { font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: 0.02em; line-height: 1.4; color: var(--c-accent); margin-block-end: var(--s-2); }
.blog-meta { display: flex; flex-wrap: wrap; column-gap: var(--s-4); row-gap: var(--s-1); font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: 0.04em; line-height: 1.5; color: var(--c-muted); font-variant-numeric: tabular-nums; max-inline-size: none; }
.blog-meta__topic { color: var(--c-accent); }
.blog-meta__lang { color: var(--c-ink); }
/* the featured article: the text leads (large serif title, the longer summary in the lead size), the picture is a
   smaller companion on the right; on a phone the text comes first (Nando, 19 Oct 2026: "focus more on the text") */
.blog-lead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6) var(--gap); align-items: center; padding-block-end: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); }
.blog-lead .blog-pic, .blog-lead__text { grid-column: 1 / -1; }
.blog-lead__text { order: -1; }
@media (min-width: 64rem) { .blog-lead__text { grid-column: 1 / 9; } .blog-lead .blog-pic { grid-column: 9 / -1; } }
.blog-lead__title { font-size: var(--fs-h2); line-height: 1.08; text-wrap: balance; }
.blog-lead__excerpt { font-size: var(--fs-lead); line-height: 1.5; margin-block: var(--s-4) var(--s-6); max-inline-size: 56ch; }
/* the legal articles: three columns on a computer, two on a tablet, one on a phone; hairlines, no boxes */
.blog-grid { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 2rem + 2vw, 3.5rem) var(--gap); align-items: start; padding-block-start: clamp(2rem, 1.5rem + 2vw, 3rem); border-block-start: 1px solid var(--c-hair); }
@media (min-width: 40rem) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.blog-card { display: flex; flex-direction: column; }
.blog-card .blog-pic { margin-block-end: var(--s-4); }
.blog-card__title { font-size: clamp(1.2rem, 1.1rem + 0.35vw, 1.375rem); font-weight: var(--fw-regular); line-height: 1.25; text-wrap: balance; }   /* balanced: no single word alone on the last line */
.blog-card__excerpt { margin-block-start: var(--s-2); font-size: var(--fs-small); line-height: 1.55; color: var(--c-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.blog-card .blog-meta { margin-block-start: var(--s-3); }
/* the firm's news (awards, talks, appointments): a two-column list on a Frost band */
.blog-news { background: var(--c-stone); padding-block: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); margin-block-start: clamp(3rem, 2rem + 3vw, 5rem); }
.blog-news__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-8) var(--gap); }
.blog-news__head, .blog-news__list { grid-column: 1 / -1; }
@media (min-width: 64rem) { .blog-news__head { grid-column: 1 / 5; } .blog-news__list { grid-column: 5 / -1; } }
.blog-news__title { font-size: var(--fs-h3); }
.blog-news__list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gap); }
@media (min-width: 48rem) { .blog-news__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.blog-news__item { padding-block: var(--s-4); border-block-start: 1px solid var(--c-hair-stone); }
.blog-news__name { margin-block-start: var(--s-1); font-size: 1.0625rem; font-weight: var(--fw-regular); line-height: 1.35; text-wrap: balance; }

/* ---- one article --------------------------------------------------------------------------------------------- */
.post { padding-block: 0 var(--page-end); }
.post__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-8) var(--gap); padding-block-start: clamp(1.75rem, 1.25rem + 1.5vw, 3rem); }
.post__body { grid-column: 1 / -1; }
.post__side { grid-column: 1 / -1; }
@media (min-width: 64rem) { .post__body { grid-column: 1 / 9; } .post__side { grid-column: 10 / -1; } }
.post__meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-block-start: var(--s-4); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.04em; line-height: 1.5; color: var(--c-muted); font-variant-numeric: tabular-nums; max-inline-size: none; }
.post__topic { color: var(--c-accent); }
.post__note { margin-block-end: var(--s-8); padding-inline-start: var(--s-4); border-inline-start: 1px solid var(--c-accent); font-size: var(--fs-small); line-height: 1.55; color: var(--c-muted); max-inline-size: 60ch; }   /* legal articles older than a year */
.post__note a { color: var(--c-accent); }
.post__figure { margin-block-end: var(--s-8); }
.post__credit { margin-block-start: var(--s-2); font-size: 0.8125rem; color: var(--c-muted); }
.post__credit a { color: inherit; }
.post__disclaimer { margin-block-start: var(--s-12); padding-block-start: var(--s-6); border-block-start: 1px solid var(--c-hair); font-size: var(--fs-small); color: var(--c-muted); }
.post__practice { display: grid; justify-items: start; margin-block-start: var(--s-6); font-size: var(--fs-small); color: var(--c-muted); }
@media print { .blog-filter { display: none !important; position: static; } .blog-news { background: none; } }
.side-block__label { color: var(--c-muted); margin-block-end: var(--s-3); }
.recent { list-style: none; display: grid; }
.recent li { padding-block: var(--s-3); border-block-end: 1px solid var(--c-hair); font-size: var(--fs-small); }
.recent a { text-decoration: none; }
.recent a:hover { text-decoration: underline; }
.recent .mono { display: block; color: var(--c-muted); margin-block-end: 2px; font-size: var(--fs-mono-sm); letter-spacing: 0.04em; text-transform: none; }   /* the date as on the blog's cards ("9 Apr 2019"), not in capitals */

/* ---- home: the blog band (design A of the blog-band test, 19 Oct 2026) -------------------------------------- */
/* the newest three articles on Frost, three across from tablets; the picture in black and white (colour under the pointer) */
.home-blog__list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.75rem, 2rem + 2.5vw, 4rem) var(--gap); align-items: start; }
@media (min-width: 48rem) { .home-blog__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-blog__item { position: relative; display: flex; flex-direction: column; }
.home-blog__pic { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; margin-block-end: var(--s-6); background: var(--c-stone-deep); }
.home-blog__pic img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 50%; filter: grayscale(1); transition: filter var(--dur) var(--ease); }
.home-blog__pic--top img { object-position: 50% 20%; }
.home-blog__pic--left img { object-position: 22% 50%; }
.home-blog__pic--right img { object-position: 80% 40%; }
.home-blog__item:is(:hover, :focus-within) .home-blog__pic img { filter: grayscale(0.2); }
.home-blog__pic--colour img, .home-blog__item:is(:hover, :focus-within) .home-blog__pic--colour img { filter: none; }   /* a designed cover (picture.colour) keeps its colours */
.home-blog__tile { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-hair-stone); color: var(--c-accent); }
.home-blog__tile .icon { inline-size: 3rem; block-size: 3rem; }
.home-blog__item:hover .blog-link { color: var(--c-accent); }
.home-blog__item:has(.blog-link:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 4px; }
.home-blog__title { font-size: clamp(1.25rem, 1.12rem + 0.45vw, 1.5rem); font-weight: var(--fw-regular); line-height: 1.24; letter-spacing: -0.012em; text-wrap: balance; }
:lang(de) .home-blog__title { hyphens: manual; -webkit-hyphens: manual; }
.home-blog__excerpt { margin-block-start: var(--s-3); max-inline-size: 52ch; font-size: var(--fs-small); line-height: 1.55; color: var(--c-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.home-blog__meta { margin-block-start: var(--s-4); }
/* the contact band after it is white (the bands keep alternating), and so is the footer: a hairline across the container
   between them, as the colour change did before */
.page-home .site-footer { padding-block-start: 0; }
.page-home .site-footer > .container { border-block-start: 1px solid var(--c-hair); padding-block-start: clamp(2.5rem, 2rem + 2vw, 4rem); }

/* ---- legal / simple text pages -------------------------------------- */
.text-page { padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 3rem) var(--page-end); }
.text-page .prose { max-inline-size: var(--measure); }
.text-page .prose h2 { color: var(--c-navy); }
.draft-note { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono);  color: var(--c-accent); margin-block-end: var(--s-8); }

/* ---- 404 / thanks ----------------------------------------------------- */
.simple { padding-block: clamp(4rem, 3rem + 5vw, 9rem); }
.simple .display { margin-block-end: var(--s-6); }
.simple__links { display: flex; flex-wrap: wrap; gap: var(--s-6); margin-block-start: var(--s-8); }

/* ---- services grid (index) ------------------------------------------ */
.services-grid-section { padding-block: clamp(1.25rem, 1rem + 1vw, 2rem) var(--page-end); }
.services-grid { list-style: none; display: grid; grid-template-columns: 1fr; }   /* white squares on the white page, all the same size; a hovered square stays white and gains a light border */
@media (min-width: 56rem) { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; } }   /* equal rows only where the tiles are squares; one column: each tile its own height, so "Read more" follows its text */
@media (min-width: 75rem) { .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }   /* columns only where a square tile holds its text */

.service-tile__link { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s-3); block-size: 100%; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border: 1px solid transparent; text-decoration: none; color: var(--c-ink); transition: border-color var(--dur-fast) var(--ease); }
@media (max-width: 39.99rem) { .service-tile__link { padding: var(--s-6); } }
.service-tile__link:hover, .service-tile__link:focus-visible { border-color: var(--c-edge); color: var(--c-ink); }
.service-tile__link:focus-visible { outline-offset: -2px; }   /* keyboard focus keeps a ring; mouse hover has none */
.service-tile__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-block-end: var(--s-3); }   /* the number top left, the icon on the same line in the top right corner */
.service-tile__icon { display: flex; color: var(--c-accent); }
.service-tile__icon .icon { inline-size: 2rem; block-size: 2rem; }
.service-tile__num { color: var(--c-muted); }
.service-tile__title { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: var(--fw-light); line-height: 1.2; color: var(--c-navy); text-wrap: balance; transition: color var(--dur-fast) var(--ease); }
.service-tile__link:hover .service-tile__title, .service-tile__link:focus-visible .service-tile__title { color: var(--c-accent); }
.service-tile__teaser { font-size: var(--fs-small); color: var(--c-muted); line-height: 1.55; text-align: justify; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 6 3 3; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3; }   /* justified (Blocksatz); hyphenation keeps the word gaps even in the narrow squares. Safari reads only its prefixed limits: the same 3 + 3 here, not the site's 5 + 5 for German (base.css), or it barely splits and the gaps open wide */
.service-tile__more { justify-self: start; display: inline-flex; align-items: center; justify-content: center; min-block-size: 2.5rem; margin-block-start: var(--s-2); padding: var(--s-1) 1.125rem; font-family: var(--font-sans); font-weight: 500; font-size: 1rem; font-weight: var(--fw-regular); letter-spacing: 0.005em; line-height: 1.25; text-align: center; color: var(--c-navy); border: 1px solid var(--c-navy); background: linear-gradient(var(--c-navy) 0 0) no-repeat 0 0 / 0 100%; transition: background-size 260ms var(--ease-out), color 160ms var(--ease-out) 40ms; }   /* the link CTA's frame, smaller; it fills when its square is under the pointer or focused */
.service-tile__link:focus-visible .service-tile__more { color: var(--c-bg); background-size: 100% 100%; }
@media (hover: hover) { .service-tile__link:hover .service-tile__more { color: var(--c-bg); background-size: 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .service-tile__more { transition: none; } }
@media (min-width: 56rem) { .service-tile { aspect-ratio: 1 / 1; align-self: stretch; display: flex; flex-direction: column; } .service-tile__link { flex: 1 1 auto; block-size: auto; gap: var(--s-2); } }   /* squares; every tile stretches to its row, so all stay the same size even if one needs more room */
@media (min-width: 75rem) and (max-width: 81.99rem) { .service-tile__link { padding: var(--s-6); } .service-tile__teaser { font-size: 0.875rem; } }   /* narrowest three-column range: a little less padding so the text fits the square */   /* square wherever there are two or three columns; a tile grows instead of clipping if its text ever needs more room, and the equal rows keep every tile the same size */

/* ---- practice-area pages: design B of the service-page test (chosen 28 Sep 2026; components/service.njk) --------------
   A smaller, compact page (Nando: "sleek and elegant"): the head with the opening text beside the lead; the numbered list on
   Frost whose point being read shows in a white panel (main.js) with the homepage services box's typography; the ending with
   the contact line, the page's own closing words and the lawyers; the related areas. The Abu Dhabi company's pages use it
   without the ending. */
.page-head--service { padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem) clamp(1rem, 0.75rem + 1vw, 1.75rem); }
.page-head--service .page-head__grid { align-items: start; }
.page-head--service h1 { font-size: clamp(1.875rem, 1.45rem + 1.5vw, 2.75rem); }   /* 30 → 44 px (other inner pages: 34 → 54) */
.page-head--open { padding-block-end: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.service-head { display: flex; align-items: flex-start; gap: var(--s-3); }
.service-head__icon { display: inline-grid; place-items: center; inline-size: 1.625rem; block-size: 1.625rem; flex-shrink: 0; color: var(--c-accent); margin-block-start: 0.35em; }
.service-head__icon .icon { inline-size: 1.625rem; block-size: 1.625rem; }
@media (max-width: 39.99rem) { .service-head { flex-direction: column; gap: var(--s-3); } .service-head__icon { margin-block-start: 0; } }
.article__lead { font-family: var(--font-serif-text); font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.4; color: var(--c-navy); font-weight: 340; letter-spacing: -0.005em; max-inline-size: 36ch; text-wrap: pretty; margin-block-start: var(--s-2); }   /* 17 → 19 px */
/* the opening text: under the title, beside the lead (the lead spans both rows, so a long lead leaves no gap) */
.service-open { grid-column: 1 / -1; max-inline-size: 64ch; font-size: 1rem; line-height: 1.7; }
.service-open p { max-inline-size: none; }
.service-open > * + * { margin-block-start: 0.9em; }
@media (min-width: 64rem) {
  .page-head--open .page-head__grid { grid-template-rows: auto 1fr; }
  .page-head--open .page-head__main { grid-row: 1; }
  .page-head--open .page-head__aside { grid-row: 1 / span 2; }
  .service-open { grid-column: 1 / 8; grid-row: 2; }
}
.band { padding-block: clamp(2.25rem, 1.75rem + 2vw, 3.5rem); }
.band--stone { background: var(--c-stone); }
.sv-small-title { margin: 0 0 var(--s-4); font-family: var(--font-serif-text); font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.375rem); font-weight: var(--fw-light); line-height: var(--lh-heading); color: var(--c-navy); }   /* 19 → 22 px */

/* the list: numbered rows like the homepage's services (components.css .num-list); without main.js each title stands above its text */
.sv-list { padding-block: clamp(2.25rem, 1.75rem + 2vw, 4rem); }
.sv-list__title { margin: 0 0 clamp(1rem, 0.75rem + 1vw, 1.75rem); max-inline-size: 26ch; font-family: var(--font-serif); font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); font-weight: var(--fw-light); line-height: var(--lh-heading); color: var(--c-navy); text-wrap: balance; }   /* 22 → 28 px */
.sv-list__note { margin: var(--s-6) 0 0; color: var(--c-muted); }
.sv-index { border-block-start: 1px solid var(--c-hair-stone); }
.sv-item { border-block-end: 1px solid var(--c-hair-stone); }
.sv-item__head { position: relative; display: flex; align-items: baseline; gap: var(--s-4); margin: 0; padding-block: clamp(0.65rem, 0.55rem + 0.4vw, 0.95rem); font: inherit; }
.sv-item__num { flex: none; inline-size: 2rem; color: var(--c-accent); }
.sv-item__label { min-inline-size: 0; font-family: var(--font-serif-text); font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); font-weight: var(--fw-light); line-height: 1.2; color: var(--c-navy); text-wrap: balance; }   /* 18 → 21 px */
:lang(de) .sv-item__label, :lang(de) .sv-card__title { hyphens: auto; -webkit-hyphens: auto; }
.sv-item__text { padding-block-end: clamp(1rem, 0.8rem + 0.8vw, 1.5rem); padding-inline-start: calc(2rem + var(--s-4)); }
.sv-card__num, .sv-card__title { display: none; }
.sv-card__body { max-inline-size: 60ch; font-size: 1rem; line-height: var(--lh-body); color: var(--c-muted); }
.sv-card__body p { margin: 0; max-inline-size: none; }
.sv-card__body > * + * { margin-block-start: 0.9em; }
.sv-card__body strong { font-weight: var(--fw-medium); color: var(--c-ink); }
/* the titles as buttons (main.js moves each title's words into a <button>) with the homepage's reading line: the row's line
   fills blue, the number turns blue, the title steps in */
.sv-item__btn { display: flex; align-items: baseline; gap: var(--s-4); inline-size: 100%; margin: 0; padding: clamp(0.65rem, 0.55rem + 0.4vw, 0.95rem) 0; background: none; border: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.sv-item__btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.sv-list.is-live .sv-item__head { padding: 0; }
.sv-list.is-live .sv-item__head::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 1px; background: var(--c-accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 400ms var(--ease-out); }
.sv-list.is-live .sv-item__num { color: var(--c-muted); transition: color 400ms var(--ease); }
.sv-list.is-live .sv-item__label { transition: translate 300ms var(--ease-out), color 200ms var(--ease-out); }
.sv-list.is-live .is-reading::after { transform: none; }
.sv-list.is-live .is-reading .sv-item__num { color: var(--c-accent); }
.sv-list.is-live .is-reading .sv-item__label { translate: 0.5rem 0; }
.sv-list.is-live .sv-item__btn:hover .sv-item__label { color: var(--c-accent); }
[dir="rtl"] .sv-list.is-live .sv-item__head::after { transform-origin: 100% 50%; }
[dir="rtl"] .sv-list.is-live .is-reading .sv-item__label { translate: -0.5rem 0; }
/* phones and tablets: an accordion; a thin plus that becomes a minus shows whether the text is open */
@media (max-width: 63.99rem) {
  .sv-item__sign { position: relative; flex: none; align-self: center; inline-size: 0.875rem; block-size: 0.875rem; margin-inline-start: auto; color: var(--c-accent); }
  .sv-item__sign::before, .sv-item__sign::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; block-size: 1px; background: currentColor; transition: transform 450ms var(--ease); }
  .sv-item__sign::after { transform: rotate(90deg); }
  .sv-item__btn[aria-expanded="true"] .sv-item__sign::after { transform: rotate(0deg); }
  .sv-list.is-live .sv-item__text { display: grid; grid-template-rows: 0fr; padding-block-end: 0; visibility: hidden; transition: grid-template-rows 450ms var(--ease), padding-block-end 450ms var(--ease), visibility 0s linear 450ms; }
  .sv-list.is-live .sv-item__text.is-open { grid-template-rows: 1fr; padding-block-end: clamp(1rem, 0.8rem + 0.8vw, 1.5rem); visibility: visible; transition-delay: 0s; }
  .sv-list.is-live .sv-card { min-block-size: 0; overflow: hidden; }
}
/* computers: the list on the left, the panel on the right; all texts share one grid area, so the list keeps its height
   whichever is shown. The panel copies the homepage services box (components.css .num-preview*): the number in the corner,
   the title in the serif at 30 px light and in the site blue, the text in grey at 17 px */
@media (min-width: 64rem) {
  .sv-item__sign { display: none; }
  .sv-list.is-live .sv-index { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: repeat(var(--sv-n, 1), auto) 1fr; column-gap: var(--s-12); border: 0; }
  .sv-list.is-live .sv-item { display: contents; }
  .sv-list.is-live .sv-item__head { grid-column: 1; border-block-end: 1px solid var(--c-hair-stone); }
  .sv-list.is-live .sv-item:first-child .sv-item__head { border-block-start: 1px solid var(--c-hair-stone); }
  .sv-list.is-live .sv-item__text { grid-column: 2; grid-row: 1 / -1; padding: 0; visibility: hidden; }
  .sv-list.is-live .sv-item__text.is-active { visibility: visible; }
  .sv-list.is-live .sv-card { display: grid; align-content: start; gap: var(--s-4); padding: var(--s-8) clamp(1.75rem, 2.5vw, 2.5rem); background: var(--c-surface); border: 1px solid var(--c-hair-stone); }
  .sv-list.is-live .sv-card__num { display: block; justify-self: end; margin: 0; color: var(--c-accent); }
  .sv-list.is-live .sv-card__title { display: block; margin: var(--s-2) 0 0; font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: var(--fw-light); line-height: var(--lh-heading); color: var(--c-accent); text-wrap: balance; }
  .sv-list.is-live .sv-card__body { max-inline-size: 42ch; font-size: var(--fs-body); }
}
@media (min-width: 64rem) and (min-height: 40rem) { .sv-list.is-live .sv-card { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-8)); } }   /* stays beside the list while it scrolls */
@media (prefers-reduced-motion: reduce) {
  .sv-list.is-live :is(.sv-item__label, .sv-item__num, .sv-item__text), .sv-list.is-live .sv-item__head::after, .sv-item__sign::before, .sv-item__sign::after { transition: none; }
  .sv-list.is-live .is-reading .sv-item__label { translate: none; }
}
/* until main.js has run (JavaScript on): the list already has the shape main.js gives it (the rules above for .is-live),
   so nothing below it moves when the script comes late. Below 64rem the first point is open and the others closed, with
   room kept for the plus sign; from 64rem the first point stands in the panel. Should main.js never run, every point
   shows again after 3 s. */
@media screen and (scripting: enabled) and (max-width: 63.99rem) {
  html:not(.js) .sv-item__head { padding-inline-end: calc(var(--s-4) + 0.875rem); }
  html:not(.js) .sv-item__text { display: grid; grid-template-rows: 0fr; padding-block-end: 0; visibility: hidden; animation: sv-failsafe-open 0s linear 3s forwards; }
  html:not(.js) .sv-item:first-child .sv-item__text { grid-template-rows: 1fr; padding-block-end: clamp(1rem, 0.8rem + 0.8vw, 1.5rem); visibility: visible; }
  html:not(.js) .sv-card { min-block-size: 0; overflow: hidden; }
}
@media screen and (scripting: enabled) and (min-width: 64rem) {
  html:not(.js) .sv-index { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: repeat(12, auto) 1fr; column-gap: var(--s-12); border: 0; animation: sv-failsafe-index 0s linear 3s forwards; }
  html:not(.js) .sv-item { display: contents; }
  html:not(.js) .sv-item__head { grid-column: 1; border-block-end: 1px solid var(--c-hair-stone); }
  html:not(.js) .sv-item:first-child .sv-item__head { border-block-start: 1px solid var(--c-hair-stone); }
  html:not(.js) .sv-item__text { grid-column: 2; grid-row: 1 / -1; padding: 0; visibility: hidden; animation: sv-failsafe-text 0s linear 3s forwards; }
  html:not(.js) .sv-item:first-child .sv-item__text { visibility: visible; }
  html:not(.js) .sv-card { display: grid; align-content: start; gap: var(--s-4); padding: var(--s-8) clamp(1.75rem, 2.5vw, 2.5rem); background: var(--c-surface); border: 1px solid var(--c-hair-stone); animation: sv-failsafe-card 0s linear 3s forwards; }
  html:not(.js) .sv-card__num { display: block; justify-self: end; margin: 0; color: var(--c-accent); animation: sv-failsafe-hide 0s linear 3s forwards; }
  html:not(.js) .sv-card__title { display: block; margin: var(--s-2) 0 0; font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: var(--fw-light); line-height: var(--lh-heading); color: var(--c-accent); text-wrap: balance; animation: sv-failsafe-hide 0s linear 3s forwards; }
  html:not(.js) .sv-card__body { max-inline-size: 42ch; font-size: var(--fs-body); animation: sv-failsafe-body 0s linear 3s forwards; }
}
@keyframes sv-failsafe-open { to { grid-template-rows: 1fr; padding-block-end: clamp(1rem, 0.8rem + 0.8vw, 1.5rem); visibility: visible; } }
@keyframes sv-failsafe-index { to { grid-template-columns: minmax(0, 1fr) 0; column-gap: 0; } }   /* one column: title, text, title, text … */
@keyframes sv-failsafe-text { to { grid-column: 1; grid-row: auto; visibility: visible; padding-block-end: clamp(1rem, 0.8rem + 0.8vw, 1.5rem); padding-inline-start: calc(2rem + var(--s-4)); } }
/* … and each text as it stands without JavaScript: no panel, and the panel's own number and title (the row above already
   names the topic) take no room and are not read out */
@keyframes sv-failsafe-card { to { gap: 0; padding: 0; border-width: 0; background-color: transparent; } }
@keyframes sv-failsafe-hide { to { block-size: 0; margin: 0; overflow: hidden; visibility: hidden; } }
@keyframes sv-failsafe-body { to { max-inline-size: 60ch; } }   /* the text keeps its 17 px: Safari drops the other values of an element whose font-size is animated */

/* the ending: the contact line with the page's own closing words, the button with phone and e-mail, the lawyers */
.sv-end { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.sv-end__grid { display: grid; gap: var(--s-12) var(--gap); }
@media (min-width: 64rem) { .sv-end__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-12); align-items: start; } }   /* the list's gap, so the contacts start on the panel's left edge */
.page-head + article > .sv-end:first-child { padding-block-start: 0; }   /* a page without a list (Wills): the ending follows the head on white */
.sv-end__main { display: grid; gap: var(--s-4); align-content: start; min-inline-size: 0; }
.sv-end__title { margin: 0; max-inline-size: 20ch; font-family: var(--font-serif); font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); font-weight: var(--fw-light); line-height: var(--lh-heading); color: var(--c-navy); text-wrap: balance; }   /* 22 → 28 px */
.sv-end__closing { max-inline-size: 60ch; font-size: 1rem; line-height: 1.7; }
.sv-end__closing p { max-inline-size: none; }
.sv-end__closing > * + * { margin-block-start: 1em; }
.sv-end__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-8); margin-block-start: var(--s-2); }
.sv-end__meta { margin: 0; color: var(--c-muted); font-size: var(--fs-small); }
.sv-end__meta a { color: inherit; text-decoration: none; }
.sv-end__meta a:hover { color: var(--c-accent); text-decoration: underline; }
.sv-people { min-inline-size: 0; }
.sv-people__label { margin: 0 0 var(--s-6); }
.sv-people__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
@media (min-width: 40rem) and (max-width: 63.99rem) { .sv-people__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sv-person { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--s-6); align-items: center; }
@media (min-width: 40rem) and (max-width: 63.99rem) { .sv-person { align-items: start; } }   /* two to a row: the names level with the portraits' tops, whether a role wraps or not */
.sv-person__frame { display: block; aspect-ratio: 4 / 5; background: #ececec; overflow: hidden; }
.sv-person__img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center top; filter: grayscale(1); transition: filter var(--dur) var(--ease); }   /* black and white at rest like the team, colour under the pointer */
.sv-person:hover .sv-person__img { filter: grayscale(0.2); }
.sv-person__text { display: grid; justify-items: start; min-inline-size: 0; }
.sv-person__name { font-family: var(--font-serif-text); font-size: 1.25rem; font-weight: var(--fw-regular); line-height: 1.2; color: var(--c-navy); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.sv-person__name:hover { color: var(--c-accent); }
.sv-person__role { margin-block-start: var(--s-1); color: var(--c-muted); font-size: var(--fs-small); line-height: 1.4; }
.sv-person__mail { margin-block-start: var(--s-2); color: var(--c-muted); font-size: var(--fs-small); text-decoration: none; overflow-wrap: anywhere; }
.sv-person__mail:hover { color: var(--c-accent); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .sv-person__img { transition: none; } }

/* the related areas, and the pointer to the Abu Dhabi company on four Dubai pages */
.related__grid { list-style: none; display: grid; grid-template-columns: 1fr; border-block-start: 1px solid var(--c-hair); }
@media (min-width: 40rem) { .related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.related__item { border-block-end: 1px solid var(--c-hair); }
@media (min-width: 40rem) { .related__item + .related__item { border-inline-start: 1px solid var(--c-hair); } }
.related__link { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-4) var(--s-4) 0; text-decoration: none; color: var(--c-navy); transition: color var(--dur-fast) var(--ease); }
@media (min-width: 40rem) { .related__item + .related__item .related__link { padding-inline-start: var(--s-6); } }
.related__link:hover { color: var(--c-accent); }
.related__icon { color: var(--c-accent); }
.related__icon .icon { inline-size: 1.25rem; block-size: 1.25rem; }
.related__title { font-family: var(--font-serif-text); font-size: 1.0625rem; font-weight: var(--fw-regular); }
.band--stone .related__grid, .band--stone .related__item, .band--stone .related__item + .related__item { border-color: var(--c-hair-stone); }
.ad-band__grid { display: grid; gap: var(--s-2) var(--gap); }
@media (min-width: 64rem) { .ad-band__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: baseline; } .ad-band .sv-small-title { margin: 0; } }
.ad-band .ad-band__text { font-size: 1rem; line-height: 1.7; }
/* the page's frame buttons follow the smaller type: 16 px, still 44 px tall */
:is(.sv-end, .ad-band) .link-cta { min-block-size: 2.75rem; padding: var(--s-2) 1.25rem; font-size: 1rem; }
@media print {
  .sv-list.is-live .sv-index, .sv-list.is-live .sv-item { display: block; }
  .sv-list.is-live .sv-item__text { display: block; visibility: visible; padding-inline-start: calc(2rem + var(--s-4)); }
  .sv-list.is-live .sv-card { position: static; padding: 0; border: 0; }
  .sv-list.is-live :is(.sv-card__num, .sv-card__title), .sv-item__sign { display: none; }
  /* the reading line is a screen state: on paper every row looks the same, numbers in the accent as without JS */
  .sv-list.is-live .sv-item__num { color: var(--c-accent); }
  .sv-list.is-live .is-reading .sv-item__label { translate: none; }
  .sv-list.is-live .sv-item__head::after { content: none; }
}
/* the calculator on paper: an empty calculator prints only its rules (the blank fields, the button and "Enter both dates"
   say nothing on paper); a filled one prints the figures entered and the estimate. The consultation offer turns from a navy
   box into a framed one (with background graphics off, its white text vanished), and the service bar keeps its colours. */
@media print {
  .calc:has([data-empty]:not([hidden])) { display: none; }
  .calc__actions { display: none; }
  .calc__advisory { background: none !important; border: 1px solid var(--c-navy); break-inside: avoid; }
  .calc__advisory-title { color: var(--c-navy); }
  .calc__advisory p { color: var(--c-ink); }
  .calc__advisory .calc__advisory-cta { color: var(--c-navy) !important; box-shadow: inset 0 0 0 1px var(--c-navy); }
  .calc__track, .calc__seg, .calc__key { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* registered so they can be animated (time-based draw-in and scroll-linked undraw of the skyline) */
@property --sky-draw { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --sky-undraw { syntax: "<number>"; inherits: true; initial-value: 0; }
/* ---- motion ----------------------------------------------------------
   One system. Elements opt in with data-reveal; the token "stagger" keeps the element and lets its children arrive one
   after another. Lists with data-arrive (the services squares) let each child arrive on its own, the first time it comes
   into view (main.js). Scroll-linked pieces use native scroll-driven animations where the browser has them and fall back
   to the observer reveal elsewhere. Everything is off under prefers-reduced-motion and in print. */
@media screen and (prefers-reduced-motion: no-preference) {
  /* entrances: 8 px over 500 ms on the strong ease-out (were 14 px and 700 ms) */
  .js [data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }
  /* staggered groups: 50 ms apart, never later than 350 ms (were 90 ms apart, the twelfth item a second late) */
  .js [data-reveal~="stagger"] { opacity: 1; transform: none; transition: none; }
  .js [data-reveal~="stagger"] > * { opacity: 0; transform: translateY(8px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
  .js [data-reveal~="stagger"].is-visible > * { opacity: 1; transform: none; }
  .js [data-reveal~="stagger"] > :nth-child(2) { transition-delay: 50ms; }
  .js [data-reveal~="stagger"] > :nth-child(3) { transition-delay: 100ms; }
  .js [data-reveal~="stagger"] > :nth-child(4) { transition-delay: 150ms; }
  .js [data-reveal~="stagger"] > :nth-child(5) { transition-delay: 200ms; }
  .js [data-reveal~="stagger"] > :nth-child(6) { transition-delay: 250ms; }
  .js [data-reveal~="stagger"] > :nth-child(7) { transition-delay: 300ms; }
  .js [data-reveal~="stagger"] > :nth-child(n + 8) { transition-delay: 350ms; }

  /* one by one (data-arrive, main.js): children not yet seen are hidden (.is-waiting) and fade up when they arrive (.is-in),
     then stay. Only the arrival has a transition, so hiding can never animate, whatever order the stylesheet and the
     script come in. Before main.js runs they are hidden from the first paint (no flash when the script is late); if it
     never runs, they appear at 3 s. */
  [data-arrive].is-waiting > * { opacity: 0; transform: translateY(1rem); }
  [data-arrive].is-waiting > .is-in { opacity: 1; transform: none; transition: opacity 600ms var(--ease), transform 700ms var(--ease); }
  @media (scripting: enabled) { html:not(.js) [data-arrive] > * { opacity: 0; transform: translateY(1rem); animation: arrive-failsafe 0s linear 3s forwards; } }
  @keyframes arrive-failsafe { to { opacity: 1; transform: none; } }

  /* numbered list with a preview (data-preview, main.js): the icon of the row being read, and the large one in the panel, draw
     themselves (main.js gives their strokes pathLength="1"). While the rows fly by faster than the panel's fade (a quick
     scroll through the list, main.js .is-quick / .is-skimming), the words swap in place and the icons stand drawn, so
     nothing blinks. */
  .num-list.is-live .num-list__icon .icon *, .num-preview__icon .icon * { stroke-dasharray: 1 3; }
  .num-list.is-live .is-reading .num-list__icon .icon * { animation: num-draw 1000ms var(--ease) 100ms backwards; }
  .num-preview__icon .icon * { animation: num-draw 1400ms var(--ease) 120ms backwards; }
  .num-preview__body.is-new { animation: num-in 260ms var(--ease); }   /* the panel's new row, straight away */
  .num-list.is-live.is-skimming .is-reading .num-list__icon .icon *, .num-preview__body.is-quick .num-preview__icon .icon * { animation: none; }
  @keyframes num-in { from { opacity: 0; translate: 0 0.35rem; } }
  @keyframes num-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

  /* homepage opening: the words arrive first, then the skyline sketch draws in while the mark is written. The words'
     entrance is a CSS animation from the first style (not a transition started by main.js), so it plays in every browser
     and on the same clock as the sketch, whenever the script runs; without JS the words simply stand. */
  .hero__main > [data-reveal]:nth-child(2) { transition-delay: 90ms; }    /* browsers without the scripting media feature */
  .hero__main > [data-reveal]:nth-child(3) { transition-delay: 180ms; }   /* keep the transition, with the same stagger */
  .hero__main > [data-reveal]:nth-child(4) { transition-delay: 270ms; }
  @media (scripting: enabled) {
    .hero__main > [data-reveal] { animation: hero-in var(--dur) var(--ease) backwards; }
    .js .hero__main > [data-reveal] { opacity: 1; transform: none; transition: none; }
    .hero__main > [data-reveal]:nth-child(2) { animation-delay: 90ms; }
    .hero__main > [data-reveal]:nth-child(3) { animation-delay: 180ms; }
    .hero__main > [data-reveal]:nth-child(4) { animation-delay: 270ms; }
  }
  @keyframes hero-in { from { opacity: 0; transform: translateY(14px); } }
  /* the mark is written by a pen (js/hero-logo.js) alongside the sketch; its last dot starts the EST. fade, which completes
     as the Burj's main lines finish (about 2.9–3.2 s); until the script takes over the mark stays hidden, and if it never
     runs the mark appears at 5 s. The hiding does not depend on the scripting media feature (Safari 16 lacks it and would
     show the full mark first); only browsers that know JavaScript is off show it at once. */
  .hero-logo:not(.is-live) { visibility: hidden; animation: hero-logo-failsafe 0s linear 5s forwards; }
  @media (scripting: none) { .hero-logo:not(.is-live) { visibility: visible; animation: none; } }
  @keyframes hero-logo-failsafe { to { visibility: visible; } }
  .hero__est { opacity: 0; animation: fade-in 600ms var(--ease) 2600ms forwards; }   /* after the mark, completing as the Burj finishes (js/hero-logo.js re-times it to the measured Burj) */
  .hero__est { filter: opacity(var(--est-fade, 1)); }   /* js/hero-logo.js: leaves with the mark on scroll, returns with it */
  @keyframes fade-in { to { opacity: 1; } }

  /* skyline: drawn in after the mark (band first, then the Burj rising); scrolling down plays the drawing backwards
     (Burj first, then the band), scrolling up draws it again. --sky-draw runs on time, --sky-undraw on scroll position.
     The offset is a length (× 1px, one user unit at pathLength="1"): Firefox rejects a calculated plain number here. */
  .hero__skyline :is(path, line, polyline) {
    stroke-dasharray: 1 3; --sky-draw: 0;
    stroke-dashoffset: calc(clamp(0, 1 - var(--sky-draw) + clamp(0, (var(--sky-undraw) - var(--u0, 0)) / var(--u1, 1), 1), 1) * 1px);
    animation: sky-draw 2.4s var(--ease) 0.7s forwards;
  }
  .hero__skyline .sk-b { animation-duration: 2s; animation-delay: 1.3s; }
  .skyline-burj :is(path, line, polyline) { animation-duration: 2.2s; animation-delay: 1.2s; --u0: 0.06; --u1: 0.38; }   /* the Burj goes first … */
  .skyline-burj .sk-b { animation-delay: 1.7s; --u0: 0; --u1: 0.3; }
  .skyline-band :is(path, line, polyline) { --u0: 0.4; --u1: 0.45; }   /* … then the band; everything is gone by 85 % of the range */
  .skyline-band .sk-b { --u0: 0.26; --u1: 0.44; }
  @keyframes sky-draw { to { --sky-draw: 1; } }

  /* heritage timeline (main.js adds .is-live): the section is pinned for --run while a pen draws the line from the
     founding to today; stars and texts arrive as the pen reaches them, the view follows the pen sideways, and scrolling
     back takes it all back. Short screens and no JS keep the static strip from components.css. */
  .heritage { --pin-top: var(--header-h); }
  .heritage.is-live { block-size: calc(100svh - var(--pin-top) + var(--run, 240vh)); }
  .heritage.is-live .heritage__pin { position: sticky; inset-block-start: var(--pin-top); block-size: calc(100svh - var(--pin-top)); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto 1fr; padding-block: clamp(1rem, 4vh, 3rem); overflow: clip; }   /* one column as wide as the screen (the strip inside is wider and clipped); the strip takes the middle row, so its line is centred on the screen below the header … */
  .heritage.is-live .heritage__pin > .container { grid-row: 1; align-self: end; }   /* … and the title sits just above it (on short screens the title's row grows and the strip moves down) */
  .heritage.is-live .heritage__viewport { grid-row: 2; overflow-x: clip; overflow-y: visible; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); }   /* entries leaving the view fade at the screen edge */
  .heritage.is-live .heritage__track { grid-template-rows: 1fr var(--mark) 1fr; transform: translate3d(calc(var(--pan, 0) * -1px), 0, 0); will-change: transform; }   /* equal room above and below: the line is the strip's centre */
  .heritage.is-live .heritage__track::after { content: ""; position: absolute; z-index: 2; inset-block-start: 0; inset-inline-start: 0; inline-size: 0.4375rem; block-size: 0.4375rem; margin-block-start: -0.21875rem; margin-inline-start: -0.21875rem; border-radius: 50%; background: var(--c-accent); transform: translate(calc(var(--tipx, 0) * 1px), calc(var(--tipy, 0) * 1px)); opacity: var(--tipo, 0); transition: opacity var(--dur-fast) var(--ease); }   /* the pen tip; main.js measures where the line runs */
  .heritage.is-live .heritage__entry::after { transform: scaleX(var(--seg, 0)); }
  .heritage.is-live .heritage__mark { opacity: 0; transform: scale(0.3) rotate(-45deg); transition: opacity 220ms var(--ease), transform 560ms var(--ease-spring); }
  .heritage.is-live .heritage__body { opacity: 0; transition: opacity 450ms var(--ease) 60ms, transform 600ms var(--ease) 60ms; }
  .heritage.is-live .heritage__entry:nth-child(odd) .heritage__body { transform: translateY(0.75rem); }    /* texts grow out of the line: upwards … */
  .heritage.is-live .heritage__entry:nth-child(even) .heritage__body { transform: translateY(-0.75rem); }  /* … and downwards */
  /* phones (main.js adds .is-vertical as well): no pin; the page scrolls on while the pen draws the line downwards, the
     stars arrive as before and the texts come in from the right */
  .heritage.is-live.is-vertical { block-size: auto; }
  .heritage.is-live.is-vertical .heritage__pin { position: static; display: block; block-size: auto; padding-block: var(--section); overflow: visible; }
  .heritage.is-live.is-vertical .heritage__viewport { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .heritage.is-live.is-vertical .heritage__track { transform: none; will-change: auto; }
  .heritage.is-live.is-vertical .heritage__entry::after { transform: scaleY(var(--seg, 0)); }
  .heritage.is-live.is-vertical .heritage__entry .heritage__body { transform: translateX(0.75rem); }
  .heritage.is-live .heritage__entry:last-child::before { opacity: 0; transition: opacity 700ms var(--ease) 250ms; }
  /* arrived (after the hidden states so it wins); identity transforms rather than none, so an arrival stays a compositor
     change and never costs a page layout */
  .heritage.is-live .heritage__entry.is-on .heritage__mark { opacity: 1; transform: scale(1) rotate(0deg); }
  .heritage.is-live .heritage__entry.is-on .heritage__body { opacity: 1; transform: translate(0, 0); }
  .heritage.is-live .heritage__entry.is-on:last-child::before { opacity: 1; }
  /* short screens where the texts would not fit the pinned view (main.js adds .is-tight only then): less room around the
     title and the strip, so every entry stays fully visible; if even that is not enough, main.js keeps the static strip */
  .heritage.is-live.is-tight .heritage__pin { padding-block: 0.75rem 0.25rem; }
  .heritage.is-live.is-tight .heritage__head { margin-block-end: 0.75rem; }
  .heritage.is-live.is-tight .heritage__head > :first-child { grid-column: 1 / -1; }   /* a long title may take the full width (one line) */
  .heritage.is-live.is-tight .heritage__head .kicker { margin-block-end: var(--s-2); }
  .heritage.is-live.is-tight .heritage__track { padding-block: 0; }
  .heritage.is-live.is-tight .heritage__entry:nth-child(odd) .heritage__body { padding-block-end: var(--s-4); }
  .heritage.is-live.is-tight .heritage__entry:nth-child(even) .heritage__body { padding-block-start: var(--s-4); }

  /* a profile's career line (main.js adds .is-live): the scroll draws the line, each entry's diamond fills when the pen
     reaches it and the ring waits for it; the portrait develops from black and white into colour from the first scroll
     on (--colour 0 → 1, main.js), fully in colour when the line reaches today */
  .career.is-live .career__item::after { transform: scaleY(var(--seg, 0)); }
  .career.is-live .career__mark path { fill: var(--c-bg); stroke: currentColor; stroke-width: 1.25; transition: fill 300ms var(--ease); }   /* ahead of the pen: an outline */
  .career.is-live .career__item.is-on .career__mark path { fill: currentColor; }
  .career.is-live .career__today .career__mark { opacity: 0.35; transition: opacity 600ms var(--ease); }
  .career.is-live .career__today.is-on .career__mark { opacity: 1; }
  .profile.is-live .profile__photo { filter: grayscale(calc(1 - var(--colour, 0))); transition: filter 240ms linear; }
  @media (hover: hover) { .profile.is-live .profile__photo:hover { filter: none; transition-duration: var(--dur); } }

  @supports (animation-timeline: view()) {
    .hero__skyline { animation: sky-undraw linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
    @media (max-width: 47.99rem) { .hero__skyline { animation-range: 0 40vh; } }   /* phones: the hero is shorter, so the band is still on screen while it undraws */
    @keyframes sky-undraw { from { --sky-undraw: 0; } to { --sky-undraw: 1; } }
    .heritage { --pin-top: 3.75rem; }   /* the heritage section pins under the settled header (below) */
    :root { --stick-top: 3.75rem; }      /* so do the blog's topic bar and the team page's group titles */
    /* the header settles a little once the page moves (72 → 60 px). The header gives back the same height as a margin
       below it, so the page under it never moves: no reflow of the whole page on every frame and no scroll-anchoring
       corrections; on screen the header shrinks exactly as before and the content follows the scroll 1:1. */
    .site-header__inner { animation: header-compact linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
    @keyframes header-compact { to { min-block-size: 3.75rem; } }
    .site-header { animation: header-room linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
    @keyframes header-room { to { margin-block-end: 0.75rem; } }
    @media (min-width: 48rem) {
      .site-header__logo img { animation: logo-compact linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
      @keyframes logo-compact { to { block-size: 2.25rem; } }
      /* the Abu Dhabi name (mark and two lines) settles at 63.5 px, which it reaches at 8.5 of the 12 px: the room below
         follows that, and its timeline pins under that edge */
      .entity-ad .site-header { animation-name: header-room-ad; }
      @keyframes header-room-ad { 70.8333% { margin-block-end: 0.53125rem; } to { margin-block-end: 0.53125rem; } }
      .entity-ad .heritage { --pin-top: 3.96875rem; }
    }
  }
}
/* practice-area pages (design B): the head's icon draws itself once from the first paint (its strokes carry pathLength="1",
   the drawable filter), and the panel's new text fades in as it swaps (main.js, data-sv-index) */
@media screen and (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .service-head__icon .icon * { stroke-dasharray: 1 3; animation: sv-draw 1200ms var(--ease) 150ms backwards; }
}
@media screen and (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
  .sv-list.is-live .sv-item__text.is-new { animation: sv-in 260ms var(--ease); }
}
@keyframes sv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sv-in { from { opacity: 0; translate: 0 0.35rem; } }
/* contact map (data-map-draw, main.js): the hand-drawn map draws itself in once, when most of it is in view: the frame,
   the water, the big roads, the small ones, the landmarks, then the pin settles and the names appear. Keyframes with
   fixed delays: a transition whose delay came from var() stayed at its start in Chrome. Reduced motion, print or no
   JavaScript: drawn at once. */
@media screen and (prefers-reduced-motion: no-preference) {
  .js [data-map-draw] :is(path, line, polyline)[pathLength] { stroke-dasharray: 1; }
  .js [data-map-draw]:not(.is-drawn) :is(path, line, polyline)[pathLength] { stroke-dashoffset: 1; }
  .js [data-map-draw]:not(.is-drawn) :is(.cm-labels, .cm-pin) { opacity: 0; }
  .js [data-map-draw].is-drawn :is(path, line, polyline)[pathLength] { animation: map-draw 1.5s var(--ease-out) backwards; }
  .js [data-map-draw].is-drawn .cm-frame :is(path, line, polyline)[pathLength] { animation-duration: 1.2s; }
  .js [data-map-draw].is-drawn .cm-frame .sk-b { animation-delay: 0.15s; }
  .js [data-map-draw].is-drawn .cm-water .sk-b { animation-delay: 0.3s; }
  .js [data-map-draw].is-drawn .cm-major .sk-a { animation-delay: 0.25s; }
  .js [data-map-draw].is-drawn .cm-major .sk-b { animation-delay: 0.55s; }
  .js [data-map-draw].is-drawn .cm-minor .sk-a { animation-delay: 0.55s; }
  .js [data-map-draw].is-drawn .cm-minor .sk-b { animation-delay: 0.85s; }
  .js [data-map-draw].is-drawn .cm-landmarks .sk-a { animation-delay: 0.85s; }
  .js [data-map-draw].is-drawn .cm-landmarks .sk-b { animation-delay: 1.15s; }
  .js [data-map-draw].is-drawn .cm-pin { animation: map-fade 0.3s ease-out 1.5s backwards; }
  .js [data-map-draw].is-drawn .cm-pin__ring { transform-box: fill-box; transform-origin: center; animation: map-ring 0.9s var(--ease-out) 1.55s backwards; }
  .js [data-map-draw].is-drawn .cm-labels { animation: map-fade 0.7s ease-out 1.75s backwards; }
}
@keyframes map-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes map-fade { from { opacity: 0; } }
@keyframes map-ring { from { scale: 0.3; } }
/* team cards (data-develop, main.js): the first time a card comes into view its print develops, from the bare paper to
   black and white, once its image has decoded; cards arriving together follow one another (the panel is there from
   the start, so nothing moves). Off under reduced motion, where main.js settles every card at once. */
@media screen and (prefers-reduced-motion: no-preference) {
  .js [data-develop]:not(.is-developing, .is-developed) .team-card__img { opacity: 0; filter: grayscale(1) brightness(1.9) contrast(0.35); transition: none; }   /* into the paper at once: a browser that styled the page before main.js must not start from half-way */
  .js [data-develop].is-developing .team-card__img { transition: opacity 0.7s ease-out, filter 1.6s cubic-bezier(0.3, 0.1, 0.2, 1); }
  /* the homepage's blog band: its pictures develop the same way */
  .js [data-develop]:not(.is-developing, .is-developed) .home-blog__pic img { opacity: 0; filter: grayscale(1) brightness(1.9) contrast(0.35); transition: none; }
  .js [data-develop].is-developing .home-blog__pic img { transition: opacity 0.7s ease-out, filter 1.6s cubic-bezier(0.3, 0.1, 0.2, 1); }
}
@media print {
  .js [data-develop] :is(.team-card__img, .home-blog__pic img) { opacity: 1 !important; filter: grayscale(1) !important; }
  .js [data-reveal], .js [data-reveal] > *, .hero-logo, .hero__est, .hero__skyline, .hero__skyline * { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; clip-path: none !important; }
  .hero-logo { visibility: visible !important; }
  .hero-logo rect { mask: none !important; }   /* printed mid-writing or scrolled: the whole mark */
}

/* ---- the group's second company: Azhari & Associates Ltd, Abu Dhabi -------------------------
   Same design system and colours as the Dubai firm (the bands use the site-wide --c-stone); only the name, menu,
   footer, skyline and contact details differ. The group bar and the Dubai pointers below link the two. */

/* the group bar above the header, on every page: which company you are on, and the Dubai | Abu Dhabi switch */
:root { --group-bar-h: 2.25rem; }
.group-bar { background: var(--c-group-bar); color: #fff; font-size: 0.8125rem; }
.group-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); block-size: var(--group-bar-h); }
/* both landing pages: the first screen gives up the bar's height, so the whole skyline stays in view on arrival */
@media (min-width: 64rem) { body:has(.group-bar) .hero { min-block-size: min(calc(100svh - var(--header-h) - var(--group-bar-h)), 54rem); } }
.group-bar__text { margin: 0; max-inline-size: none; min-inline-size: 0; color: rgb(255 255 255 / .78); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-bar__text a { color: #fff; text-underline-offset: 0.2em; }
/* Abu Dhabi: the link to the Dubai firm (where legal advice comes from) is never cut; the sentence before it gives way
   first (an ellipsis if it must), and on tablets and small laptops, where both never fit, only the link shows */
.group-bar__text--ad { display: flex; align-items: baseline; gap: 0.3em; }
.group-bar__lead { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.group-bar__text--ad a { flex-shrink: 0; }
@media (max-width: 67.99rem) { .group-bar__lead { display: none; } }
@media (max-width: 47.99rem) { .group-bar__text { display: none; } .group-bar__inner { justify-content: flex-end; } }
.office-switch { display: flex; align-items: center; gap: var(--s-1); flex-shrink: 0; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em; }
.office-switch__item { padding: var(--s-1) var(--s-2); color: rgb(255 255 255 / .72); text-decoration: none; }
.office-switch__item + .office-switch__item { border-inline-start: 1px solid rgb(255 255 255 / .3); }
.office-switch a.office-switch__item:hover, .office-switch a.office-switch__item:focus-visible { color: #fff; }
.office-switch__item.is-current { color: #fff; font-weight: 600; }
.group-bar :focus-visible { outline-color: #fff; }
/* computers: the office divider sits exactly above the language divider, whichever office is bold. Both groups get one
   width (--switch-w) measured from the content edge; the language group overhangs that edge by --s-2 (components.css),
   so the second office is --s-2 narrower. "Abu Dhabi" / "Dubai" then also starts above "EN". */
@media (min-width: 64rem) {
  body:has(.group-bar) { --switch-w: 7.25rem; }
  body:has(.group-bar) .lang-switch { inline-size: var(--switch-w); }
  body:has(.group-bar) .lang-switch__item:last-child { margin-inline-start: auto; }
  .office-switch__item + .office-switch__item { inline-size: calc(var(--switch-w) - var(--s-2)); padding-inline-start: calc(var(--s-3) + var(--s-1) + var(--s-2)); }   /* the language group's divider margin + gap + item padding */
}
.mobile-menu__offices { padding-block-start: var(--s-4); border-block-start: 1px solid var(--c-hair); }

/* the header name: the calligraphic mark with the company's name set in the site's serif */
.ad-lockup { gap: var(--s-3); color: var(--c-navy); }
.ad-lockup__mark { block-size: 2.625rem; inline-size: auto; }
.ad-lockup__text { display: grid; line-height: 1.1; }
.ad-lockup__name { font-family: var(--font-serif); font-size: 1.375rem; font-weight: var(--fw-regular); letter-spacing: 0.005em; white-space: nowrap; }
.ad-lockup__place { font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: var(--track-mono); color: var(--c-accent); margin-block-start: 0.2rem; }
@media (max-width: 47.99rem) { .ad-lockup__mark { block-size: 2.125rem; } .ad-lockup__name { font-size: 1.125rem; } }

/* hero: the company's name as the headline, the pen-written mark on the right as on the Dubai homepage */
.hero__name { color: var(--c-navy); }
.hero__name-line { display: block; }

/* team: the one card beside a short note */
.ad-people { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-8) var(--gap); align-items: center; }
.ad-people .people__grid { grid-column: 1 / -1; }
.ad-people .people__grid .person { grid-column: span 12; max-inline-size: 22rem; }
.ad-people__note { grid-column: 1 / -1; margin: 0; max-inline-size: 30ch; }
@media (min-width: 48rem) { .ad-people .people__grid { grid-column: 1 / 6; } .ad-people__note { grid-column: 7 / -1; } }
/* the pinned ADGM timeline (motion.css): its record is taller than Dubai's (two entries a year) and its heading runs to two
   lines, so the heading took the whole space above the strip and the kicker sat 36 px under the carousel band (Dubai:
   about 100). The pin now keeps up to a section's space above the heading, as much as the screen's height can spare without
   the strip reaching the pin's foot (the heading and strip take about 41rem; below about 49rem + that, nothing changes).
   Not in the tight mode (motion.css, .is-tight on short screens): there its own small padding wins, so the pinned
   timeline is kept wherever it fits. */
.entity-ad .heritage.is-live:not(.is-vertical):not(.is-tight) .heritage__pin { padding-block-start: clamp(clamp(1rem, 4vh, 3rem), 100svh - 49rem, var(--section-tight) + 1.5rem); }
/* service and guide pages (the light version of the Dubai design, without the contact ending): the related pages on white,
   so they part from the list's Frost band */
.entity-ad .sv-related { background: var(--c-bg); }
.entity-ad .sv-related :is(.related__grid, .related__item, .related__item + .related__item) { border-color: var(--c-hair); }
/* the office's Google / Apple Maps links under the address in the contact section */
.ad-map-links { padding-block-start: var(--s-6); }

/* footer: the third column has its own heading here (on the Dubai footer it continues the services list) */
@media (min-width: 40rem) { .site-footer--ad .site-footer__col:nth-child(3) { padding-block-start: 0; } }
@media (max-width: 39.99rem) { .site-footer--ad .site-footer__col:nth-child(3) { margin-block-start: 0; } }   /* phones: normal gap above it too */

/* the pointers on the Dubai pages, each built from the page's own parts:
   - homepage services: one more row of the list, its place set in mono like a kicker after the name
   - four service pages: one more numbered band ("04 · Abu Dhabi"), text and link in the band body
   - footer: a second office under the Dubai address, set like the column's heading and links */
.num-list__place { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: var(--fw-regular); letter-spacing: var(--track-mono); color: var(--c-accent); margin-inline-start: var(--s-3); white-space: nowrap; vertical-align: 0.2em; }
@media (max-width: 47.99rem) { .num-list__place { display: block; margin: var(--s-1) 0 0; } }
.ad-band__text { max-inline-size: 60ch; margin: 0; }
.ad-band__link { margin-block-start: var(--s-6); }
.site-footer__heading--office { margin-block-start: var(--s-8); }

@media print { .group-bar { display: none !important; } }

/* Dark mode (live since 29 Sep 2026; look "Graphite", chosen by Nando and the family from two looks on a test page).
   js/theme.js sets <html data-theme="dark"> when the device is dark (Automatic) or the visitor chose Dark; without
   JavaScript the site stays light. Dark mode only redefines tokens (tokens.css); the rules after the tokens are things
   a token can't reach. Screen only: printing keeps the light colours. Contrast of every text pair ≥ 4.5:1, field
   outlines and the focus ring ≥ 3:1 (hairlines stay decorative, as in light). */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;       /* native controls in dark; a page that declares dark is never darkened again by the browser */
    --c-bg: #131517;          /* the page: neutral graphite */
    --c-surface: #212529;     /* cards and fields, lighter than the band they sit on */
    --c-stone: #1a1d20;       /* the bands (Frost in light) */
    --c-stone-deep: #23272c;
    --c-hair-stone: #2c3136;
    --c-ink: #e4e6e8;         /* 14.6:1 on the page */
    --c-muted: #9ea4aa;       /* 7.3:1 on the page, 6.1:1 on cards */
    --c-muted-cool: #a3adb7;
    --c-hair: #2a2e33;
    --c-edge: #3c4249;
    --c-field-edge: #747b83;  /* 3.6:1 on cards */
    --c-accent: #86b8ea;      /* the firm's blue, lightened: 8.8:1 on the page */
    --c-focus: #86b8ea;
    --c-navy: #f5f7f9;        /* headings, frames and the solid button's fill role: the light "ink" of the dark page */
    --c-navy-box: #1b3150;    /* the navy boxes stay navy, a step above the page */
    --c-group-bar: #060c15;   /* the Dubai | Abu Dhabi bar: a deep navy-black above the page, as in version 2 (1 Oct 2026) */
    --c-statement: #a7b4c2;   /* the homepage statement, a step behind the light name (8.7:1) */
    --c-error: #f2a09a;
  }

  /* the logos are artwork in the firm's blue fading to a dark navy, which would vanish on the dark page; flipped they
     run light blue → pale (#45aaf0 → #c5cbff, 7:1 and more) */
  :root[data-theme="dark"] :is(.site-header__logo img, .site-footer__symbol) { filter: invert(1) hue-rotate(180deg); }
  /* the homepage mark is inline SVG (partials/hero-logo.svg): the same flip, stop by stop */
  :root[data-theme="dark"] #azh-g stop { stop-color: #45aaf0; }
  :root[data-theme="dark"] #azh-g stop:nth-child(10) { stop-color: #4facf0; }
  :root[data-theme="dark"] #azh-g stop:nth-child(11) { stop-color: #62aeef; }
  :root[data-theme="dark"] #azh-g stop:nth-child(12) { stop-color: #77b0ed; }
  :root[data-theme="dark"] #azh-g stop:nth-child(13) { stop-color: #87b7f2; }
  :root[data-theme="dark"] #azh-g stop:nth-child(14) { stop-color: #97bcf6; }
  :root[data-theme="dark"] #azh-g stop:nth-child(15) { stop-color: #a9c0fa; }
  :root[data-theme="dark"] #azh-g stop:nth-child(16) { stop-color: #b9c7ff; }
  :root[data-theme="dark"] #azh-g stop:nth-child(17) { stop-color: #c5cbff; }

  /* Chrome's calendar icon on the date fields: a data: image can't read a token */
  :root[data-theme="dark"] :is(.calc__box, .form__field) input[type="date"]::-webkit-calendar-picker-indicator { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386b8ea' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v3M16 2v3'/%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E"); }
}

/* ---- the Light · Dark · Automatic switch (partials/theme-switch.njk), in the footer and the phone menu ----------
   Hidden until js/theme.js adds html.theme-on, so it never shows without JavaScript (or, in the test phase, without
   the opt-in). Set like EN | DE: serif, muted, the current choice in the accent at weight 560; 44 px tall targets. */
.theme-switch { display: none; }
.theme-on .theme-switch { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-1); font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em; }
.theme-switch__label { margin-inline-end: var(--s-2); color: var(--c-muted); }
.theme-switch__item { min-block-size: 2.75rem; padding: var(--s-1) var(--s-2); border: 0; background: none; color: var(--c-muted); font: inherit; letter-spacing: inherit; cursor: pointer; transition: color var(--dur-fast) var(--ease); }
.theme-switch__item:hover, .theme-switch__item:focus-visible { color: var(--c-accent); }
.theme-switch__item[aria-pressed="true"] { color: var(--c-accent); font-weight: 600; }
/* phone menu: a fourth row under the languages and offices, drawn as a segmented control — a sun, the crescent and
   star, a half circle for Automatic; the chosen one sits in a light-blue pill (like the iPhone's own picker). The words
   stay for screen readers (visually-hidden) and the group keeps its name. */
.mobile-menu__theme { display: none; }
.theme-on .mobile-menu__theme { display: block; padding-block-start: var(--s-4); border-block-start: 1px solid var(--c-hair); }
.theme-on .theme-switch--icons { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--c-hair); border-radius: 999px; background: var(--c-stone); }
.theme-switch--icons .theme-switch__label { display: none; }
.theme-switch--icons .theme-switch__item { display: inline-flex; align-items: center; justify-content: center; inline-size: 3.25rem; min-block-size: 2.75rem; padding: 0; border-radius: 999px; color: var(--c-muted); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.theme-switch--icons .theme-switch__item[aria-pressed="true"] { background: var(--c-accent); color: var(--c-bg); font-weight: inherit; }
.theme-switch--icons svg { inline-size: 1.25rem; block-size: 1.25rem; }
.theme-switch__sun, .theme-switch__auto circle { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.theme-switch__moon, .theme-switch__auto path { fill: currentColor; }
.theme-switch__moon path + path { stroke: currentColor; stroke-width: 0.9; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .theme-switch--icons .theme-switch__item { transition: none; } }
/* phones: the setting lives in the menu only, not again at the foot of every page */
@media (max-width: 47.99rem) { .theme-on .site-footer .theme-switch { display: none; } }
/* footer: the legal links keep their place on the right and the switch follows them (≥ 64rem), or sits on its own line
   under them on tablets; the last word ends on the content edge like EN | DE. Phones: every item on its own line. */
@media (min-width: 48rem) { .theme-on .site-footer__bottom .theme-switch { margin-inline-end: calc(-1 * var(--s-2)); } }
@media (min-width: 48rem) and (max-width: 63.99rem) { .theme-on .site-footer__bottom .theme-switch { flex-basis: 100%; justify-content: flex-end; } }
@media (min-width: 64rem) { .theme-on .site-footer__legal { margin-inline-start: auto; } }
@media print { .theme-on .theme-switch { display: none; } }

/* ---- dark mode, round 2 (29 Sep 2026: Nando chose look B and found the white fills too loud) ------------------------
   Buttons: the solid button is the light accent and fills with the firm's blue (#1960a5, white label 6.45:1); the frame
   buttons and links (link CTA, outline button, "Read more", the calculator offer's CTA) are drawn in the light accent and
   fill with it. Labels: light at rest, dark on a light-blue fill (white on it would be 2:1). */
@media screen {
  :root[data-theme="dark"] .btn:not(.btn--outline) { background-color: var(--c-accent); background-image: linear-gradient(#1960a5 0 0); color: var(--c-bg); }
  :root[data-theme="dark"] .btn:not(.btn--outline):focus-visible { color: #fff; }
  :root[data-theme="dark"] :is(.link-cta, .service-tile__more) { border-color: var(--c-accent); background-image: linear-gradient(var(--c-accent) 0 0); }
  :root[data-theme="dark"] .btn--outline { background-image: linear-gradient(var(--c-accent) 0 0); box-shadow: inset 0 0 0 1px var(--c-accent); }
  :root[data-theme="dark"] .calc__advisory .calc__advisory-cta { background-image: linear-gradient(var(--c-accent) 0 0); box-shadow: inset 0 0 0 1px var(--c-accent); }
  :root[data-theme="dark"] .calc__advisory .calc__advisory-cta:focus-visible { color: var(--c-bg); }
  /* portraits: the photo backgrounds are toned down, people and background together (no halos); the team cards keep
     their light blue studio panel and portraits exactly as in light mode (Nando, 30 Sep 2026: toned down, it read grey) */
  :root[data-theme="dark"] :is(.profile__frame, .person__frame, .sv-person__frame) { filter: brightness(0.72); }
}
@media screen and (hover: hover) {
  :root[data-theme="dark"] .btn:not(.btn--outline):hover { color: #fff; }
  :root[data-theme="dark"] .calc__advisory .calc__advisory-cta:hover { color: var(--c-bg); }
}

/* the header's crescent and star, a hilal (partials/header.njk): after EN | DE, which move closer together; tablets and computers only
   (phones have the switch in the menu). Computers: the language group plus the crescent keep the office divider above
   the language divider (entity-ad.css, --switch-w). */
.theme-moon { display: none; }
@media (min-width: 48rem) {
  .theme-on .theme-moon { display: inline-flex; align-items: center; justify-content: flex-end; inline-size: 1.5rem; block-size: 2.75rem; flex-shrink: 0; margin-inline-start: calc(-1 * var(--s-6)); padding: 0; border: 0; background: none; color: var(--c-accent); cursor: pointer; }
  /* the icon stands on a line set like EN | DE (same font, size and line height), its foot on that line's baseline and
     its height the capitals' (Instrument Sans: 0.72em), so crescent and star sit exactly between the letters' top and
     bottom in every browser (a fixed pixel shift was off by a pixel in Safari) */
  .theme-moon__line { display: block; font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.6; }
  .theme-moon__icon { display: inline-block; block-size: 0.72em; inline-size: auto; aspect-ratio: 21.25 / 20.7; vertical-align: baseline; fill: currentColor; transition: transform var(--dur-fast) var(--ease); }
  /* Safari (WebKit, also every iPhone browser) paints the letters 0.75 px below the line the layout gives them (measured
     at 1×, 2× and 4×); only that engine knows the -apple-system-body font, so only there the icon follows the letters down */
  @supports (font: -apple-system-body) { .theme-moon__icon { translate: 0 0.75px; } }
  .theme-moon__icon { stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }   /* the same outline in both states, so the drawing keeps its size: filled on the dark page … */
  .theme-moon__star { stroke-width: 1.4; }
  .theme-moon[aria-pressed="false"] .theme-moon__icon { fill: none; }   /* … and an outline only on the light page */
  .theme-moon:hover .theme-moon__icon { transform: rotate(-12deg); }
}
@media (min-width: 64rem) {   /* EN | DE in 6rem instead of 7.25rem (6: the sans labels are a little wider than the old serif ones, and at 5.5 the
                                 divider was squeezed away), the crescent (1.5rem: DE to the crescent is then the same 24 px as EN to DE) after it;
                                 --switch-w grows by the crescent so the office divider stays exactly above the language divider
                                 (switch-w = 6 + 1.5 + the 0.5rem overhang) */
  .theme-on .lang-switch { margin-inline-end: 0; }
  .theme-on body:has(.group-bar) { --switch-w: 8rem; }
  .theme-on body:has(.group-bar) .lang-switch { inline-size: 6rem; }
}
@media (prefers-reduced-motion: reduce) { .theme-moon__icon { transition: none; } }
@media print { .theme-moon { display: none !important; } }