/* ==========================================================================
   Olga Pivovarova & Associates LLC — site template
   Brand: #3B5A4F (client spec + measured from logo artwork)
   Type:  Cinzel (logo face) + Open Sans
   ========================================================================== */

:root {
  --brand:      #3B5A4F;
  --brand-700:  #324D44;
  --brand-800:  #2A4038;
  --brand-900:  #22352F;
  --brand-300:  #7D9A8F;
  --brand-100:  #D6E2DC;
  --brand-050:  #F3F7F5;

  --ink:        #16211D;
  --body:       #414B47;
  --muted:      #77857F;
  --line:       #E2E9E5;
  --white:      #FFFFFF;

  --font-display: 'Cinzel', 'Times New Roman', Georgia, serif;
  --font-body:    'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --maxw:   1180px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --radius: 2px;
  --shadow: 0 1px 2px rgba(22,33,29,.05), 0 8px 24px -12px rgba(22,33,29,.18);
  --shadow-lg: 0 2px 4px rgba(22,33,29,.06), 0 18px 48px -18px rgba(22,33,29,.28);
  --t: 180ms cubic-bezier(.4,0,.2,1);
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.72;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--brand-900); }
h1,h2,h3,h4,h5,h6 { margin: 0 0 .6em; color: var(--ink); line-height: 1.22; font-weight: 600; }
p { margin: 0 0 1.15rem; }
ul, ol { margin: 0 0 1.15rem; padding-left: 1.25rem; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brand); color: #fff; padding: .75rem 1.25rem;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---------- display type ---------- */
.hero__title, .page-head__title, .wordmark,
h1, h2, .article-title, .site-footer__heading {
  font-family: var(--font-display);
  letter-spacing: .045em;
  font-weight: 400;
}
h3, h4, h5, h6 { font-family: var(--font-body); letter-spacing: 0; font-weight: 600; }

/* ==========================================================================
   TOP BAR
   ========================================================================== */
.topbar {
  background: var(--brand-900);
  color: rgba(255,255,255,.78);
  font-size: .78rem;
  letter-spacing: .02em;
}
.topbar__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 40px; flex-wrap: wrap; }
.topbar__spacer { margin-left: auto; }
.topbar__item { color: rgba(255,255,255,.78); white-space: nowrap; }
.topbar a.topbar__item:hover { color: #fff; }
@media (max-width: 800px) {
  .topbar__addr { display: none; }
  .topbar__inner { justify-content: center; gap: 1rem; }
  .topbar__spacer { display: none; }
}

/* ==========================================================================
   HEADER + NAV
   ========================================================================== */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; min-height: 88px;
}
.brand { flex: 0 0 auto; display: block; }

/* ---------------------------------------------------------------------------
 * Language switcher, right end of the header row.
 *
 * `margin-left: auto` rather than relying on space-between: the row now has four
 * children (brand, toggle, nav, switcher) and space-between would spread the nav
 * away from the switcher instead of keeping the pair together on the right.
 *
 * The dropdown is Joomla's core mod_languages markup, which assumes Bootstrap CSS
 * for show/hide. This template does not load Bootstrap, so `.dropdown-menu` would
 * otherwise sit permanently open — the display rules below are doing that work.
 *
 * ⚠ CORRECTED 2026-07-31. This comment used to say Bootstrap's JS "which Joomla loads
 * by itself" toggles `.show`. It does not, and it never did: nothing on this page pulls
 * Bootstrap in, `window.bootstrap` was undefined, and the switcher button was completely
 * inert — clicked, nothing happened, no error. The toggle now lives in template.js.
 * If the switcher ever goes dead again, check that template.js is loading before
 * suspecting the CSS or the module.
 * ------------------------------------------------------------------------- */
.header-right { flex: 0 0 auto; margin-left: auto; }
.header-right .mod-languages__select { position: relative; display: inline-block; }

.header-right .dropdown-toggle {
  display: inline-flex; align-items: center; gap: .45rem;
  background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: .42rem .9rem;
  font-family: var(--font-body); font-size: .78rem; letter-spacing: .05em;
  color: var(--ink); cursor: pointer; line-height: 1;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.header-right .dropdown-toggle:hover,
.header-right .dropdown-toggle[aria-expanded="true"] {
  border-color: var(--brand-300); color: var(--brand); background: var(--brand-050);
}
/* Desktop shows the native name; the short code is the mobile form (see the override at
   html/mod_languages/default.php and the max-width:899px block below). */
.header-right .dropdown-toggle .lang-code { display: none; }
.header-right .dropdown-toggle .lang-full { display: inline; }

.header-right .dropdown-toggle::after {
  content: ""; width: .42em; height: .42em; margin-left: .1rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-.1em); transition: transform var(--t);
}
.header-right .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(225deg) translateY(-.1em); }

.header-right .dropdown-menu {
  display: none;
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 200;
  min-width: 11rem; margin: 0; padding: .35rem;
  list-style: none;
  background: var(--white); border: 1px solid var(--line);
  border-radius: .5rem; box-shadow: var(--shadow-lg);
}
.header-right .dropdown-menu.show { display: block; }

/* No-JS fallback. `.show` is only ever set by template.js, so if that script does not run
   the button is dead and ru/uk become unreachable from the header — the same failure mode
   the header entrance animation is written to avoid. Until the script marks the wrapper
   `.has-js`, focus opens the menu instead: clicking the button focuses it, and the language
   links are then reachable by Tab. Gated on :not(.has-js) so it switches itself off the
   moment the real handler is bound. */
.header-right .mod-languages__select:not(.has-js):focus-within .dropdown-menu { display: block; }

.header-right .dropdown-menu li { margin: 0; }
.header-right .dropdown-menu a {
  display: block; padding: .5rem .7rem; border-radius: .35rem;
  font-size: .86rem; color: var(--ink); white-space: nowrap;
}
.header-right .dropdown-menu a:hover,
.header-right .dropdown-menu a:focus-visible { background: var(--brand-050); color: var(--brand); }
.header-right .dropdown-menu .lang-active > a { font-weight: 600; color: var(--brand); }

/* Below the hamburger breakpoint the nav collapses out of the row, so brand, switcher and
 * toggle share one line.
 *
 * The switcher landing here is what broke the hamburger: with the desktop 2rem gap, the row
 * needed more than 375px, and because `.nav-toggle` had no shrink protection the toggle — not
 * the switcher — was the thing that gave way. It collapsed from 44px to 17px, which reads as
 * "the menu button has vanished" rather than as a layout overflow. Hence `flex: 0 0 auto` on
 * the toggle: the 44px touch target is the one thing in this row that must never shrink.
 */
@media (max-width: 899px) {
  .site-header__inner { gap: .75rem; }
  .brand { min-width: 0; }
  .header-right { margin-left: auto; margin-right: .25rem; order: 2; flex: 0 1 auto; min-width: 0; }
  .nav-toggle { order: 3; flex: 0 0 auto; }
  .header-right .dropdown-toggle { padding: .4rem .6rem; font-size: .72rem; }

  /* Compact trigger: "RU" instead of "Русский". The override at
     html/mod_languages/default.php emits both labels so this can be a purely visual swap.
     The dropdown ITEMS keep their full names — once open there is room, and "Українська"
     is a clearer choice than "UK". */
  .header-right .dropdown-toggle .lang-full { display: none; }
  .header-right .dropdown-toggle .lang-code { display: inline; }
}

/* Small handsets: buy the row ~26px by easing the logo down a step. */
@media (max-width: 400px) {
  .brand img { height: 40px; }
}
/* Stepped rather than clamped: a vw-based clamp bottoms out at the mobile floor
   right through the tablet range, so the logo stayed phone-sized on an iPad. */
/* Raised ~10% on 2026-07-30, on top of switching to the cropped logo. The artwork carried
   ~36% of its own height as whitespace, so cropping alone made the wordmark 40% bigger at an
   unchanged box height; these steps add a little more on top of that.
   Aspect is now 3.289 (773x235), not 2.677 — the same height therefore buys a WIDER box, which
   matters because of the 1100px budget documented below. Measured after the change: 210px at
   desktop, header total 1010px, still inside the column. */
.brand img { width: auto; max-width: none; height: 46px; object-fit: contain; }
@media (min-width: 600px)  { .brand img { height: 52px; } }
@media (min-width: 900px)  { .brand img { height: 60px; } }
@media (min-width: 1300px) { .brand img { height: 64px; } }
.brand__text { font-family: var(--font-display); font-size: 1.35rem; color: var(--brand); letter-spacing: .08em; }

.primary-nav { min-width: 0; }
.primary-nav ul {
  display: flex; align-items: center; gap: .35rem;
  list-style: none; margin: 0; padding: 0; flex-wrap: nowrap;
}
.primary-nav li { position: relative; }
.primary-nav a, .primary-nav .separator {
  display: block; padding: .7rem .95rem;
  font-size: .82rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
}

/* Desktop nav spacing.
 *
 * Measured, not guessed: .wrap caps the content column at 1100px REGARDLESS of
 * viewport width, so a wider screen never buys the nav more room. At the original
 * spacing the bar needed logo 155 + gap 32 + nav 913 = exactly 1100 — permanently
 * on the edge, and it overflowed by 16-20px once the scrollbar was accounted for.
 *
 * So the tighter spacing is the permanent desktop spacing, not a laptop-only
 * exception. It measures 955px total, leaving ~145px of headroom for a future
 * menu item. Still perfectly legible at 0.78rem / .05em.
 */
@media (min-width: 900px) {
  .site-header__inner { gap: 1.25rem; }
  .primary-nav a, .primary-nav .separator {
    padding: .7rem .6rem; font-size: .78rem; letter-spacing: .05em;
  }
}
/* The hover/active underline.
 *
 * ⚠ `margin-bottom` is NOT decoration — it cancels this element's own contribution to the link's
 * height. Fixed 2026-08-03 after the owner spotted the nav words sitting high in the bar.
 *
 * As a `display: block` pseudo-element in normal flow, the underline added its 2px height plus
 * its .35rem top margin — 7.6px — to the BOTTOM of the <a> box only. Padding was a symmetric
 * 11.2px, but the box was not: measured 13.19px above the glyphs and 21.25px below, leaving the
 * text ~4px high in a 51.4px box. Symmetric padding is not enough when a pseudo-element is in flow.
 *
 * A negative bottom margin of exactly -(2px + .35rem) zeroes that out, so the box becomes
 * padding + line-height and the text centres. Chosen over absolute positioning because the
 * underline spans the CONTENT box — i.e. the text width — and absolute positioning would have to
 * hard-code left/right to match the horizontal padding, which differs between breakpoints and
 * again on the "Services" item (extra right padding for the dropdown caret). This stays correct
 * everywhere with no coupling. */
.primary-nav a::after {
  content: ''; display: block; height: 2px;
  margin-top: .35rem; margin-bottom: -.475rem;
  background: var(--brand); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t);
}
.primary-nav a:hover { color: var(--brand); }
.primary-nav a:hover::after,
.primary-nav .current > a::after,
.primary-nav .active > a::after { transform: scaleX(1); }

/* ---- dropdown ----
 * Joomla 4/5/6 mod_menu emits `.mod-menu__sub` for child lists. (`.nav-child`
 * was the Joomla 3 class — targeting it silently does nothing, which leaves the
 * sub-items sitting inline in the menu bar.) `.nav-child` is kept as an alias so
 * a J3-era override would still pick up the styling.
 */
.primary-nav .mod-menu__sub,
.primary-nav .nav-child {
  position: absolute; top: 100%; left: 0; min-width: 250px; z-index: 60;
  background: var(--white); border: 1px solid var(--line);
  border-top: 2px solid var(--brand);
  box-shadow: var(--shadow-lg); padding: .4rem 0; margin: 0;
  list-style: none; display: block;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.primary-nav li:hover > .mod-menu__sub,
.primary-nav li:focus-within > .mod-menu__sub,
.primary-nav li:hover > .nav-child,
.primary-nav li:focus-within > .nav-child { opacity: 1; visibility: visible; transform: translateY(0); }

.primary-nav .mod-menu__sub li,
.primary-nav .nav-child li { width: 100%; }
.primary-nav .mod-menu__sub a,
.primary-nav .nav-child a {
  padding: .62rem 1.2rem; text-transform: none; letter-spacing: .015em;
  font-size: .9rem; font-weight: 400; white-space: normal;
}
.primary-nav .mod-menu__sub a::after,
.primary-nav .nav-child a::after { display: none; }
.primary-nav .mod-menu__sub a:hover,
.primary-nav .nav-child a:hover { background: var(--brand-050); color: var(--brand); }

/* caret on any menu item that has children */
.primary-nav > ul > li.parent > a { padding-right: 1.6rem; }
.primary-nav > ul > li.parent::after {
  content: ''; position: absolute; right: .6rem; top: 50%;
  width: 6px; height: 6px; margin-top: -5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .5; pointer-events: none;
  transition: transform var(--t), opacity var(--t);
}
.primary-nav > ul > li.parent:hover::after,
.primary-nav > ul > li.parent:focus-within::after { opacity: 1; transform: rotate(225deg); margin-top: -2px; }

/* Mobile toggle.
 *
 * The bars are positioned absolutely rather than distributed with
 * justify-content: space-between. That earlier approach derived bar spacing from
 * the button's padding, so the translate distance needed to form the cross was an
 * arithmetic side effect — and it was 1px out. The two arms crossed 2px apart,
 * which reads as one arm being longer than the other.
 *
 * Now the geometry is stated outright:
 *   button      44px tall, centre at 22
 *   bar tops    12 / 21 / 30  -> centres 13 / 22 / 31
 *   travel       9px           -> 13+9 = 22 and 31-9 = 22, both exactly on centre
 *
 * Change the tops and the travel together, or the cross goes crooked again.
 */
.nav-toggle {
  display: none; position: relative;
  width: 44px; height: 44px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
}
.nav-toggle span {
  position: absolute; left: 10px; right: 10px; height: 2px;
  background: var(--ink); transform-origin: 50% 50%;
  transition: transform var(--t), opacity var(--t);
}
.nav-toggle span:nth-child(1) { top: 12px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 30px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Hamburger below 1100px — raised from 950px. Between 950 and 1100 the six
   uppercase items plus the logo did not fit the 1100px content column. */
@media (max-width: 899px) {
  .nav-toggle { display: block; }
  .primary-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--white); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    max-height: 0; overflow: hidden; transition: max-height 260ms ease;
  }
  .primary-nav.is-open { max-height: 80vh; overflow-y: auto; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gutter) 1.25rem; }
  .primary-nav a { padding: .85rem 0; border-bottom: 1px solid var(--line); }
  .primary-nav a::after { display: none; }

  /* Children expand inline on mobile — no hover to reveal them with. */
  .primary-nav .mod-menu__sub,
  .primary-nav .nav-child {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-top: 0; padding: 0 0 0 1rem;
    min-width: 0; background: transparent;
  }
  .primary-nav .mod-menu__sub a,
  .primary-nav .nav-child a {
    padding: .7rem 0; font-size: .88rem;
    color: var(--body);
  }
  .primary-nav .mod-menu__sub a:hover,
  .primary-nav .nav-child a:hover { background: transparent; color: var(--brand); }
  /* the caret means nothing without hover on touch */
  .primary-nav > ul > li.parent::after { display: none; }
  .primary-nav > ul > li.parent > a { padding-right: 0; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-900) 100%);
  color: #fff;
  padding: clamp(4rem, 11vw, 8.5rem) 0 clamp(5rem, 12vw, 9rem);
}
.hero__mark {
  position: absolute; right: -2%; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-size: clamp(16rem, 34vw, 34rem);
  line-height: 1; color: rgba(255,255,255,.045);
  pointer-events: none; user-select: none; letter-spacing: -.03em;
}
.hero__inner { position: relative; z-index: 1; max-width: 780px; }
.hero__eyebrow {
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.62); margin-bottom: 1.4rem;
}
.hero__title {
  color: #fff; font-size: clamp(2rem, 5.2vw, 3.5rem);
  line-height: 1.15; margin-bottom: 1.3rem; letter-spacing: .04em;
}
.hero__text { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: rgba(255,255,255,.86); max-width: 60ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.2rem; }
.hero__swoosh { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 90px; }

/* ==========================================================================
   PAGE HEAD (inner pages)
   ========================================================================== */
.page-head {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-900) 100%);
  color: #fff; padding: clamp(2.5rem, 6vw, 4.25rem) 0;
}
.page-head__mark {
  position: absolute; right: 1%; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-size: clamp(9rem, 20vw, 17rem);
  line-height: 1; color: rgba(255,255,255,.05); pointer-events: none; user-select: none;
}
.page-head .wrap { position: relative; z-index: 1; }
.page-head__title { color: #fff; margin: 0; font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
/* section label used when the article below owns the H1 */
.page-head__section {
  margin: 0; color: rgba(255,255,255,.72);
  font-family: var(--font-display); letter-spacing: .18em;
  text-transform: uppercase; font-size: .88rem;
}
.page-head__crumbs { margin-top: .85rem; font-size: .84rem; }
.page-head__crumbs ol, .page-head__crumbs ul {
  display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0;
  color: rgba(255,255,255,.65);
}
.page-head__crumbs a { color: rgba(255,255,255,.85); }
.page-head__crumbs a:hover { color: #fff; }
.page-head__crumbs .divider { color: rgba(255,255,255,.4); }

/* ---------------------------------------------------------------------------
 * Page banner photographs
 *
 * One photograph per page, sitting UNDER the existing brand gradient rather than
 * replacing it: the gradient becomes a translucent wash, so the green still leads
 * and white headings keep their contrast. The photos are the old site's own slider
 * crops (uniformly 1900x660), so they are already the right shape for this band.
 *
 * Turned on by "has-banner" and chosen by "page-x", both coming from each menu
 * item's pageclass_sfx (see 06-import-tooling/set-pageclass.php). Splitting them
 * means the treatment is defined once and each page contributes a single line.
 * A page without those classes keeps the plain gradient automatically.
 * ------------------------------------------------------------------------- */
.has-banner .hero,
.has-banner .page-head {
  background-image:
    linear-gradient(160deg, rgba(59,90,79,.80) 0%, rgba(34,53,47,.92) 100%),
    var(--page-banner);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Which picture goes where. Sources are documented in 01-media/images/page-banners/. */
.page-home           { --page-banner: url("/images/page-banners/home.jpg"); }
.page-about          { --page-banner: url("/images/page-banners/about.jpg"); }
.page-services       { --page-banner: url("/images/page-banners/services.jpg"); }
.page-audit          { --page-banner: url("/images/page-banners/audit.jpg"); }
.page-consulting     { --page-banner: url("/images/page-banners/consulting.jpg"); }
.page-tax            { --page-banner: url("/images/page-banners/tax.jpg"); }
.page-other-services { --page-banner: url("/images/page-banners/other-services.jpg"); }
.page-news           { --page-banner: url("/images/page-banners/news.jpg"); }
.page-contacts       { --page-banner: url("/images/page-banners/contacts.jpg"); }

/* The oversized "OP" watermark competes with a photograph in a way it never did
 * with flat colour. Halve it where a banner is present. */
.has-banner .hero__mark,
.has-banner .page-head__mark { color: rgba(255,255,255,.025); }

/* The h1 clears AA on every banner (measured worst case 4.57:1 against white), but
 * the small supporting text was set at 65% white for a flat green background. Over
 * the lightest photographs that falls to roughly 2.8:1, so lift it here only. */
.has-banner .page-head__section { color: rgba(255,255,255,.93); }
.has-banner .page-head__crumbs ol,
.has-banner .page-head__crumbs ul { color: rgba(255,255,255,.86); }
.has-banner .page-head__crumbs a { color: #fff; }
.has-banner .page-head__crumbs .divider { color: rgba(255,255,255,.6); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn, .btn-primary, button.btn {
  display: inline-block; padding: .82rem 1.9rem;
  font-family: var(--font-body); font-size: .82rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  border: 1px solid var(--brand); background: var(--brand); color: #fff;
  border-radius: var(--radius); cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.btn:hover { background: var(--brand-900); border-color: var(--brand-900); color: #fff; transform: translateY(-1px); }
.btn--light { background: #fff; border-color: #fff; color: var(--brand); }
.btn--light:hover { background: var(--brand-050); border-color: var(--brand-050); color: var(--brand-900); }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.btn--outline { background: transparent; color: var(--brand); }
.btn--outline:hover { background: var(--brand); color: #fff; }

/* ==========================================================================
   MAIN / LAYOUT
   ========================================================================== */
.main { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.main__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.main.has-sidebar .main__grid { grid-template-columns: minmax(0,1fr); }
@media (min-width: 992px) {
  .main.has-sidebar .main__grid { grid-template-columns: minmax(0,1fr) 300px; }
}
.main__content { min-width: 0; }
.module-row { margin-bottom: 2.5rem; }

/* ==========================================================================
   ARTICLE / PROSE
   ========================================================================== */
.article-title, .page-header h1, .page-header h2 {
  font-size: clamp(1.55rem, 3vw, 2.15rem); margin-bottom: 1.2rem; color: var(--ink);
}
.article-title a { color: inherit; }
.article-title a:hover { color: var(--brand); }

.com-content-article, .com-content-category-blog, .item-page {
  max-width: 74ch;
}
.main.no-sidebar .com-content-article,
.main.no-sidebar .item-page { max-width: 78ch; margin-inline: auto; }

.item-page h2, .com-content-article h2 { font-size: clamp(1.3rem,2.4vw,1.7rem); margin-top: 2.4rem; }
.item-page h3, .com-content-article h3 { font-size: 1.16rem; margin-top: 1.9rem; color: var(--brand); }
.item-page p, .com-content-article p { margin-bottom: 1.25rem; }
.item-page ul li, .com-content-article ul li { margin-bottom: .5rem; }

/* Imported lists bring their own bullet as an inline <img>, so the native marker
 * makes two. Drop the marker on any list that carries image bullets; lists without
 * them (anything written from now on in the WYSIWYG) keep normal discs.
 *
 * Scoped to the LIST, not the item. Audit's first list has an item with no image —
 * a faked sub-list of "&nbsp;&nbsp;- International Business Companies; - Sole
 * traders;" — and matching per-item would leave that one lone grey disc sitting
 * among red arrows. At list level it reads as the continuation line it actually is.
 *
 * Other Services and Contacts put their images in <p><span>, not <li>, so they have
 * no marker to begin with and are deliberately untouched by this.
 *
 * :has() is Chrome 105+ / Safari 15.4+ / Firefox 121+. Anything older simply keeps
 * today's double bullet — it degrades to the current behaviour, not to something worse. */
.item-page ul:has(img[src*="bullet"]) > li,
.com-content-article ul:has(img[src*="bullet"]) > li {
  list-style: none;
}

/* The reset near the top of this file sets `img, svg { display: block }`, which is
 * right for content images and wrong for an inline icon: it put every bullet on its
 * own line with the text it labels sitting 28px underneath. Put these back inline.
 * The 40x25 PNG carries its own padding, so it needs no extra margin. */
.item-page ul li img[src*="bullet"],
.com-content-article ul li img[src*="bullet"],
.item-page p img[src*="bullet"],
.com-content-article p img[src*="bullet"] {
  display: inline-block;
  vertical-align: middle;
}

/* Optical centring of the bullet dots.
 *
 * `vertical-align: middle` was already doing its job — measured, it puts the image box exactly
 * on the text's x-height centre. The visible offset comes from the ARTWORK: neither dot is
 * centred inside its own canvas, and they are wrong in opposite directions, so one blanket nudge
 * would fix one page and break another.
 *
 *   bullet_red_small_in.png   40x25   ink y 6-13, centre  9.5 vs canvas 12.0  ->  2.5px HIGH
 *   bullet-red.png            20x19   ink y 7-15, centre 11.0 vs canvas  9.0  ->  2.0px LOW
 *
 * Both render 1:1, so canvas pixels are CSS pixels and these corrections are exact rather than
 * eyeballed. Correcting here rather than re-cutting the PNGs keeps the extracted media archive
 * untouched and the change reversible. If the artwork is ever replaced, delete these two rules
 * and re-measure. */
.item-page img[src*="bullet_red_small_in"],
.com-content-article img[src*="bullet_red_small_in"] { transform: translateY(2.5px); }

.item-page img[src*="bullet-red"],
.com-content-article img[src*="bullet-red"] { transform: translateY(-2px); }

blockquote {
  margin: 2rem 0; padding: .4rem 0 .4rem 1.6rem;
  border-left: 3px solid var(--brand-100); color: var(--ink);
  font-family: var(--font-display); font-size: 1.1rem; line-height: 1.6;
}

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: .94rem; }
th, td { padding: .7rem .85rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-weight: 600; color: var(--ink); background: var(--brand-050); }

/* ==========================================================================
   SERVICES GRID + CONTACT BLOCK
   --------------------------------------------------------------------------
   These replace the two legacy WYSIWYG layout tables. A table cannot reflow, so
   on a phone it either overflows the page or — once contained — crops its own
   content, which is exactly what happened: 116px of the Services table was
   scrolled out of sight inside a 278px box while the footer ran the full width.
   Grid stacks instead, so nothing is ever cut off.
   ========================================================================== */
/* Two-column GRID, with the odd last section spanning both columns.
 *
 * ── Why grid and not multi-column ────────────────────────────────────────────────────────────
 * CSS multi-column was tried on 2026-08-03 and reverted the same day. It did remove the orphan,
 * but it balances by HEIGHT, so section headings no longer line up across the two columns and the
 * page read as misaligned — measured 779px against 1019px, a 240px ragged step at the bottom.
 * That is inherent, not tunable: multicol finds the smallest height at which the content fits in
 * two columns, and with unsplittable sections that was the best split available. Reordering the
 * sections made no difference at all.
 *
 * Grid keeps the row alignment that makes this page look ordered. Its one flaw was that SEVEN
 * sections in two columns left the last one alone on row 4.
 *
 * ── The fix ─────────────────────────────────────────────────────────────────────────────────
 * `:last-child:nth-child(odd)` spans the final section across both columns *only when the count
 * is odd*. With an odd number it reads as a deliberate full-width closing section rather than a
 * stranded half-row; with an even number the rule does not apply at all and nothing changes.
 * Self-correcting as the client adds or removes services, which matters because she edits this
 * content. */
.svc-grid { display: grid; gap: 2.1rem 2.6rem; grid-template-columns: 1fr; }

@media (min-width: 620px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Owner's layout, 2026-08-03:
   *
   *   +---------------------------+  +----------------------+
   *   | Worldwide Company         |  | Corporate Services   |
   *   | Formation  (spans 2 rows) |  +----------------------+
   *   |                           |  | Virtual Office       |
   *   +---------------------------+  +----------------------+
   *   | Tax Planning              |  | Intellectual Property|
   *   | Immigration Services      |  | Banking Services     |
   *
   * Worldwide is the longest section (5 items); Corporate (4) and Virtual Office (3) stack
   * beside it, which fills the space that used to sit empty under Corporate and removes the
   * stranded final row.
   *
   * `order` moves Virtual Office up VISUALLY without touching the content, so the same fix works
   * across all three languages with no article edits.
   *
   * ⚠ TWO THINGS TO KNOW BEFORE EDITING THE SERVICES CONTENT:
   *   1. These rules are POSITIONAL (nth-child). They assume exactly seven sections in the
   *      current order. Add, remove or reorder a service and the layout will need revisiting —
   *      it will not break, but it will stop looking deliberate.
   *   2. `order` changes the visual sequence only. A screen reader still reads Virtual Office
   *      last, in document order. Acceptable here because these are independent service
   *      categories with no narrative sequence; it would not be acceptable for steps or prose.
   */
  .svc-grid__item:first-child { grid-row: span 2; }

  /* Align the first bullet of each section with its neighbour across the row.
   *
   * The titles are uppercase and wrap to different line counts at this column width, which
   * pushed the lists to different starting heights — measured 2026-08-03:
   *   Worldwide Company Formation  3 lines, first bullet 150px down
   *   Corporate Services           2 lines, 117px      -> row 1 out by 33px
   *   Immigration Services         2 lines, 117px
   *   Banking Services             1 line,   84px      -> row 3 out by 33px
   *   Tax Planning / Intellectual Property, both 2 lines -> already aligned
   *
   * Reserving a minimum title height per row levels the lists. `lh` is one line box of the
   * element's own line-height, so this survives a font-size change; the px value before it is the
   * fallback for browsers without `lh` (measured at 33.184px per line).
   *
   * Virtual Office is EXCLUDED deliberately — it sits under Corporate Services rather than beside
   * anything, so reserving space above its list would only add a gap. */
  /* Vertically centred inside the reserved height, 2026-08-03. Left at the default (top), a
   * one-line title like "Banking Services" sat at the top of a two-line box and appeared to float
   * well above its own bullets. Centring splits that slack above and below, so short titles stay
   * visually attached to their list while the bullets still align across the row. */
  .svc-grid__title {
    min-height: 66px; min-height: 2lh;
    display: flex; align-items: center;
  }

  .svc-grid__item:nth-child(1) .svc-grid__title,
  .svc-grid__item:nth-child(2) .svc-grid__title { min-height: 100px; min-height: 3lh; }

  .svc-grid__item:nth-child(7) .svc-grid__title { min-height: 0; }

  .svc-grid__item:nth-child(-n+2)            { order: 1; }   /* Worldwide, Corporate */
  .svc-grid__item:nth-child(7)               { order: 2; }   /* Virtual Office, pulled up */
  .svc-grid__item:nth-child(n+3):nth-child(-n+6) { order: 3; }   /* Tax, IP, Immigration, Banking */
}
/* Capped at TWO columns, 2026-08-02. A third column was in here and made the service lists too
   narrow — the items are full sentences ("Incorporation of Companies and Partnerships in all Major
   Jurisdictions..."), not short labels, so at three across nearly every line wrapped. Two columns
   trade a little vertical length for lines that actually read. */
/* (min-width:0 was a grid-era guard against long words widening a track; multicol needs no
   equivalent, but it is harmless and costs nothing to leave.) */
.svc-grid__item { min-width: 0; }
.svc-grid__title {
  font-family: var(--font-body); font-size: .82rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;   /* keeps the original all-caps look */
  color: var(--brand); margin: 0 0 .75rem;
}
.svc-grid ul { margin: 0; padding-left: 1.15rem; }
.svc-grid li { margin-bottom: .45rem; }

.contact-block { display: grid; gap: 1.8rem; grid-template-columns: 1fr; }
/* TWO columns, not three — 2026-08-02, decided by measurement.
 *
 * The article column is about 700px wide, not the viewport. At three across that gave each item
 * 219px with only 174px of usable body once the icon and gap were taken out, and
 * "info@pivovarovalaw.com" renders at 171px. It was wrapping by a three-pixel margin, which reads
 * as a broken address rather than as wrapping.
 *
 * Raising the breakpoint did not help, because the constraint is the content column, not the
 * viewport — widening the window does not widen this grid. Two columns give ~330px each, which
 * clears both the email and the street address comfortably. */
@media (min-width: 620px) { .contact-block { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact-block__item { display: flex; gap: .9rem; align-items: flex-start; }
.contact-block__icon { flex: 0 0 auto; width: 30px; height: 30px; margin: 0; }
.contact-block__body { min-width: 0; }
.contact-block__label {
  font-family: var(--font-body); font-size: .8rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 .4rem;
}
.contact-block p { margin: 0; }
/* long email addresses must wrap rather than widen the column */
.contact-block a { word-break: break-word; }

/* Containment for tables pasted in from the WYSIWYG.
 *
 * The imported content carries two legacy layout tables (Services and Contact) with zero <th>
 * and a grid of &nbsp; spacer cells. The Contact one needs ~553px and so breaks the page on a
 * phone. This scrolls any over-wide table inside its own box instead of widening the document.
 *
 * It is a guard, not the fix — the client edits this content in a WYSIWYG and will paste more
 * tables. The real repair is semantic markup; the rewritten HTML is ready at
 * rebuild-assets/02-content/pre-detable-backup/*.REWRITTEN-not-applied.html and is held pending
 * the design decision. Keep this rule afterwards regardless: it costs nothing and catches the
 * next paste. */
/* Justified body copy — 2026-08-02.
 *
 * The imported pages carry `text-align: justify` inline, inherited from the old site. The Services
 * page lost it when its layout table was rewritten into .svc-grid, so its intro paragraphs read
 * ragged-right while every other page was justified. This restores the match.
 *
 * ⚠ HYPHENATION DELIBERATELY OFF — owner's call, 2026-08-02. `hyphens: auto` was tried and
 * removed: splitting words across lines was harder to read than the alternative. The trade-off is
 * accepted knowingly — without hyphenation, justified text opens wider gaps between words,
 * particularly in Russian and Ukrainian where the words are long. Do not re-add it.
 *
 * Matched with a DESCENDANT selector, not `>`. The imported markup nests paragraphs inside
 * wrappers on some pages (Tax in particular), so a direct-child rule silently missed exactly the
 * page this was asked for. Opt the grid components out explicitly instead — that is robust
 * against however the WYSIWYG happens to nest things. */
.com-content-article__body p,
.article-body p {
  text-align: justify;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Short list items and labels: justification does nothing for them and hyphenation looks broken. */
.svc-grid p, .svc-grid li,
.contact-block p, .contact-block li {
  text-align: start;
  hyphens: manual;
  -webkit-hyphens: manual;
}

.com-content-article__body table,
.article-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* article meta — deliberately minimal */
.article-info {
  display: flex; flex-wrap: wrap; gap: 1.1rem;
  margin: 0 0 1.9rem; padding: 0 0 1.1rem;
  border-bottom: 1px solid var(--line);
  font-size: .8rem; color: var(--muted); letter-spacing: .03em;
}
.article-info dd { margin: 0; }
.article-info__eyebrow { text-transform: uppercase; letter-spacing: .14em; }

/* ==========================================================================
   BLOG LISTING
   ========================================================================== */
/* Joomla emits: .blog-items.items-leading and .blog-items.columns-N / .masonry-N */
.blog-items { display: grid; gap: 1.6rem; margin-bottom: 1.6rem; }
@media (min-width: 700px) {
  .blog-items.columns-2, .blog-items.masonry-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 980px) {
  .blog-items.columns-3, .blog-items.masonry-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .blog-items.columns-4, .blog-items.masonry-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

.blog-item {
  border: 1px solid var(--line); background: #fff;
  padding: 1.9rem 1.9rem 1.6rem; border-radius: var(--radius);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
  display: flex; flex-direction: column;
}
.blog-item__inner { display: flex; flex-direction: column; height: 100%; }

/* the leading item reads as the featured entry */
.blog-items.items-leading .blog-item { padding: 2.4rem; border-left: 3px solid var(--brand); }
.blog-items.items-leading .blog-item__title { font-size: clamp(1.3rem, 2.2vw, 1.55rem); }
.blog-item:hover { border-color: var(--brand-100); box-shadow: var(--shadow); transform: translateY(-2px); }
.blog-item__date {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-300); margin-bottom: .8rem;
}
.blog-item__title { font-size: 1.18rem; margin-bottom: .8rem; line-height: 1.35; }
.blog-item__intro { font-size: .95rem; color: var(--body); flex: 1; }
.blog-item__intro p:last-child { margin-bottom: 0; }
.blog-item__more {
  margin-top: 1.3rem; font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brand);
}
.blog-item__more::after { content: ' \2192'; transition: transform var(--t); display: inline-block; }
.blog-item:hover .blog-item__more::after { transform: translateX(3px); }

.category-desc { margin-bottom: 2.5rem; max-width: 74ch; }

/* pagination */
.pagination { display: flex; gap: .4rem; list-style: none; padding: 0; margin: 3rem 0 0; flex-wrap: wrap; }
.pagination a, .pagination span {
  display: block; padding: .5rem .9rem; border: 1px solid var(--line);
  font-size: .88rem; color: var(--body); border-radius: var(--radius);
}
.pagination a:hover { border-color: var(--brand); color: var(--brand); }
.pagination .active span { background: var(--brand); border-color: var(--brand); color: #fff; }
.counter { color: var(--muted); font-size: .85rem; margin-top: 1rem; }

/* ==========================================================================
   MODULES
   ========================================================================== */
.card { margin-bottom: 2rem; }
.card .card-header, .moduletable > h3 {
  font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .05em;
  color: var(--ink); margin: 0 0 1rem; padding-bottom: .7rem;
  border-bottom: 2px solid var(--brand-100);
}
.main__sidebar .card { border: 1px solid var(--line); padding: 1.5rem; border-radius: var(--radius); }
.main__sidebar ul { list-style: none; padding: 0; margin: 0; }
.main__sidebar li + li { border-top: 1px solid var(--line); }
.main__sidebar li a { display: block; padding: .55rem 0; font-size: .93rem; }

.feature { background: var(--brand-050); padding: clamp(3rem,6vw,4.5rem) 0; border-top: 1px solid var(--line); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--brand-900); color: rgba(255,255,255,.72); margin-top: auto; }
.site-footer__grid {
  display: grid; gap: 2.5rem;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
/* Tablet: two columns with the brand block spanning, rather than one very tall
   stack — at 768px the single-column footer ran to nearly a full screen. */
@media (min-width: 560px) and (max-width: 899px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2.5rem 3rem; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 900px) { .site-footer__grid { grid-template-columns: 1.5fr 1.2fr 1fr; gap: 3.5rem; } }

.wordmark {
  font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .1em;
  color: #fff; margin: 0; line-height: 1.2; text-transform: uppercase;
}
.wordmark__sub {
  font-family: var(--font-display); font-size: .82rem; letter-spacing: .18em;
  color: rgba(255,255,255,.6); margin: .35rem 0 1.3rem; text-transform: uppercase;
}
.site-footer__blurb { font-size: .92rem; max-width: 42ch; color: rgba(255,255,255,.66); }

.site-footer__heading {
  font-family: var(--font-display); font-size: .86rem; letter-spacing: .16em;
  text-transform: uppercase; color: #fff; margin: 0 0 1.3rem;
}
.contact-list, .footer-nav { list-style: none; padding: 0; margin: 0; font-size: .92rem; }
.contact-list li { margin-bottom: 1rem; line-height: 1.6; }
.contact-list__label {
  display: block; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-300); margin-bottom: .25rem;
}
.site-footer a { color: rgba(255,255,255,.82); }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-nav li { margin-bottom: .6rem; }

.site-footer__bar { border-top: 1px solid rgba(255,255,255,.12); }
.site-footer__bar-inner {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  align-items: center; padding-block: 1.4rem; font-size: .82rem;
  color: rgba(255,255,255,.5);
}
.site-footer__bar p { margin: 0; }
.site-footer__bar ul { display: flex; flex-wrap: wrap; gap: 1.3rem; list-style: none; margin: 0; padding: 0; }

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
.to-top {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 1.1rem; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t), transform var(--t), visibility var(--t), background var(--t);
  box-shadow: var(--shadow);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--brand-900); }

/* ==========================================================================
   JOOMLA ODDS AND ENDS
   ========================================================================== */
.alert { padding: 1rem 1.15rem; border: 1px solid var(--line); border-left: 3px solid var(--brand); background: var(--brand-050); margin-bottom: 1.5rem; }
#system-message-container { margin-bottom: 1.5rem; }
.readmore { margin-top: 1rem; }
input[type=text], input[type=email], input[type=password], input[type=search], textarea, select {
  width: 100%; padding: .7rem .85rem; border: 1px solid var(--line);
  border-radius: var(--radius); font: inherit; color: var(--ink); background: #fff;
}
input:focus, textarea:focus, select:focus { border-color: var(--brand); outline: none; }
label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); margin-bottom: .35rem; }

/* --------------------------------------------------------------------------
   CYRILLIC FALLBACK — do not remove.
   Cinzel ships no Cyrillic glyphs. Without this, Russian and Ukrainian headings
   fall back mid-word to whatever the browser picks (Times New Roman on Windows),
   which looks broken next to the Latin headings. Open Sans covers Cyrillic, so
   ru/uk headings use the body face instead. The lang attribute is emitted by the
   com_content article and blog_item overrides.
   -------------------------------------------------------------------------- */
[lang|="ru"] h1, [lang|="ru"] h2, [lang|="ru"] h3,
[lang|="ru"] .article-title, [lang|="ru"] .blog-item__title,
[lang|="uk"] h1, [lang|="uk"] h2, [lang|="uk"] h3,
[lang|="uk"] .article-title, [lang|="uk"] .blog-item__title,
[lang|="ru"].blog-item__inner .blog-item__title,
[lang|="uk"].blog-item__inner .blog-item__title {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .005em;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   PAGE-LOAD ENTRANCE
   --------------------------------------------------------------------------
   Deliberately pure CSS, no JavaScript. A JS-driven reveal (add a class on
   DOMContentLoaded) is the common pattern and it has a nasty failure mode: if the
   script fails, is blocked, or is slow, the page stays permanently blank because the
   starting state is opacity 0. A CSS animation always runs, so the end state is
   always reached.

   Only opacity and transform are animated — both composited, so no layout work and
   no cumulative layout shift. Nothing here changes an element's box.

   The order is deliberate: chrome first, then the heading block one line at a time,
   then the body copy. Total is ~900ms end to end; the main content is readable at
   ~800ms. Longer than that stops reading as polish and starts reading as slow.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @keyframes pv-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes pv-rise {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
  }

  /* Chrome fades without movement — a sliding header reads as jitter, and the nav
     must not appear to move under a cursor that is already on its way to it. */
  .topbar      { animation: pv-fade 400ms ease-out both; }
  .site-header { animation: pv-fade 400ms ease-out both 60ms; }

  /* Heading block, staggered line by line. This is the part that reads as "designed". */
  .hero__inner > *,
  .page-head .wrap > * {
    animation: pv-rise 620ms cubic-bezier(.22,.68,.28,1) both;
  }
  .hero__inner > :nth-child(1) { animation-delay: 120ms; }
  .hero__inner > :nth-child(2) { animation-delay: 200ms; }
  .hero__inner > :nth-child(3) { animation-delay: 280ms; }
  .hero__inner > :nth-child(4) { animation-delay: 360ms; }

  .page-head .wrap > :nth-child(1) { animation-delay: 110ms; }
  .page-head .wrap > :nth-child(2) { animation-delay: 180ms; }
  .page-head .wrap > :nth-child(3) { animation-delay: 250ms; }

  /* The decorative "OP" watermark drifts in a touch later and further, so it settles
     behind the words rather than competing with them. */
  .hero__mark,
  .page-head__mark { animation: pv-fade 900ms ease-out both 260ms; }

  .hero__swoosh { animation: pv-fade 700ms ease-out both 420ms; }

  .main__content { animation: pv-rise 600ms cubic-bezier(.22,.68,.28,1) both 240ms; }
  .main__sidebar { animation: pv-rise 600ms cubic-bezier(.22,.68,.28,1) both 320ms; }
  .site-footer   { animation: pv-fade 600ms ease-out both 380ms; }
}

@media print {
  .topbar, .site-header, .hero, .page-head, .site-footer, .to-top, .main__sidebar { display: none !important; }
  body { color: #000; }
  /* Printing does not run animations, and `animation-fill-mode: both` would otherwise
     leave the FROM state applied — i.e. opacity 0 — and print blank pages. */
  .main__content, .main__sidebar, .hero__inner > *, .page-head .wrap > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}