/* ==========================================================================
   EPKC - design tokens and base system
   Every value here mirrors DESIGN.md. No hex may appear outside :root.
   ========================================================================== */

:root {
  /* --- colour ------------------------------------------------------------ */
  --bg: #FFFFFF;
  --surface: #F2F6FB;      /* section band                                    */
  --surface-2: #E4EDF7;    /* secondary button fill, table stripe             */
  --ink: #0F1A2B;
  --body: #354356;
  --muted: #5A6B80;        /* 5.4:1 on bg                                     */
  --line: #DDE5EF;
  --line-strong: #C4D2E4;

  --brand: #3779FD;        /* logo, links, focus ring, large display type     */
  --brand-deep: #2E68DE;   /* ANY surface carrying white text - 5.06:1        */
  --brand-ink: #0E2A63;    /* brand text on light; filled button on brand     */
  --accent: #6EC1E4;       /* decorative only - 1.9:1, never carries text     */
  --crisis: #B3261E;       /* the 112 marker only                            */
  --crisis-dark: #8E1C16;
  /* Messaging-app marks, in the apps' own colours. Which colour the label on
     each takes is not a preference: Viber purple is dark, so it carries white;
     WhatsApp green is light, so it carries --ink at 8.8:1. White on WhatsApp
     green is 1.98:1 and is the mistake this comment exists to stop.
     Viber's published #7360F2 measured 4.48:1 against white - close enough to
     read, four hundredths short of AA, and the gate is right to refuse it.
     One shade deeper is 5.74:1 and is still unmistakably Viber. */
  --viber: #6250D8;
  --whatsapp: #25D366;
  /* WhatsApp green is a FILL, never a glyph on a light background: on white it
     measures 1.98:1. Anywhere the mark is drawn in line rather than in a tile
     it uses this darker one, which sits between WhatsApp's own #128C7E and
     #075E54 and clears 4.82:1 - the 4.5 text threshold, not the 3.0 graphics
     one, because the validator cannot tell a glyph from a word and is right
     not to guess. Viber needs no second value: its purple is dark enough
     either way. */
  --whatsapp-ink: #0F8074;
  --white: #ffffff;        /* named so every light-on-dark pair is checkable  */
  /* The hero artwork's own top-left corner, sampled from the file. It shows on
     ultra-wide viewports where the picture runs out before the section does, so
     the seam has to be the same colour rather than merely pale. Decorative:
     nothing is ever drawn on it that this file has not also placed on the
     picture itself. */
  --hero-backdrop: #C7E4F4;

  /* --- type -------------------------------------------------------------- */
  --font-display: 'Source Serif 4', Georgia, serif;
  --font-body: 'Open Sans', system-ui, -apple-system, sans-serif;

  --text-xs: .8125rem;
  --text-sm: .9375rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.125rem, 1.5vw, 1.25rem);
  --text-xl: clamp(1.375rem, 2.2vw, 1.75rem);
  --text-2xl: clamp(1.875rem, 3.4vw, 2.625rem);
  --text-3xl: clamp(2.25rem, 4.6vw, 3.5rem);

  /* --- space (8px base) --------------------------------------------------- */
  --s-1: .5rem;  --s-2: 1rem;   --s-3: 1.5rem; --s-4: 2rem;
  --s-5: 3rem;   --s-6: 4rem;   --s-7: 5.5rem; --s-8: 7.5rem;

  /* --- shape, depth, motion ---------------------------------------------- */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(15,26,43,.05), 0 4px 14px rgba(15,26,43,.05);
  --shadow-2: 0 2px 6px rgba(15,26,43,.06), 0 18px 40px rgba(15,26,43,.10);
  --shadow-brand: 0 8px 24px rgba(46,104,222,.24);
  --gradient-hero:
    radial-gradient(64rem 34rem at 82% -18%, rgba(110,193,228,.30), transparent 62%),
    radial-gradient(52rem 30rem at 8% 0%, rgba(55,121,253,.10), transparent 60%);
  --gradient-band: linear-gradient(135deg, #2E68DE 0%, #0E2A63 100%);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-state: 140ms;
  --dur-enter: 240ms;
  /* Lightbox veil. Built from --ink like every shadow, never generic black. */
  --overlay: rgba(15, 26, 43, .93);

  /* --- layout ------------------------------------------------------------ */
  --content: 720px;
  --wide: 1320px;
  --gutter: 1.5rem;
  --sticky-h: 94px;         /* the pinned header, for scroll-margin */
}

/* ==========================================================================
   Reset and base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Anything an in-page link can land on stops below the pinned header. */
:where([id]) { scroll-margin-top: calc(var(--sticky-h) + var(--s-2)); }

body {
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; line-height: 1.65;
  font-synthesis: none;
  font-optical-sizing: auto;
  text-wrap: pretty;
  overflow-x: hidden;
}

/* Margins are reset above, so rhythm must be re-established explicitly.
   Hierarchy: section gap > heading-to-body > label-to-heading, none of them 0. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.14;
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); letter-spacing: -.022em; }
h2 { font-size: var(--text-2xl); letter-spacing: -.018em; margin-top: var(--s-6); margin-bottom: var(--s-2); }
h3 { font-size: var(--text-xl); letter-spacing: -.01em; margin-top: var(--s-4); margin-bottom: var(--s-1); }
h4 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: 700; margin-top: var(--s-3); margin-bottom: var(--s-1); }
h5, h6 { font-size: var(--text-base); font-family: var(--font-body); font-weight: 700; margin-bottom: var(--s-1); }

h1 + p, h2 + p, h3 + p, h4 + p { margin-top: 0; }
p + p, p + ul, p + ol, ul + p, ol + p { margin-top: var(--s-2); }
:where(h2, h3) + :where(h2, h3) { margin-top: var(--s-3); }

ul, ol { padding-left: 1.35em; }
li + li { margin-top: .35em; }

/* Links always carry a token. Browser-default blue is never acceptable.
   ---------------------------------------------------------------------------
   These are wrapped in :where() so they carry ZERO specificity. A bare
   `a:visited` scores (0,1,1) and therefore beats every single-class component
   rule: `.btn--primary` is only (0,1,0). The moment a visitor had followed
   /registracija-pas-psichologa/ once, every button pointing there repainted its
   white label to --brand-deep on a --brand-deep fill: contrast 1.00, the text
   literally gone. It could not be caught by inspecting the page either, because
   getComputedStyle deliberately reports unvisited styles.

   At zero specificity any component rule wins by default, including ones not
   written yet. tools/validate.mjs fails the build if a bare styled `a:visited`
   or `a:hover` comes back. */
:where(a) {
  color: var(--brand-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
:where(a:hover) { color: var(--brand-ink); }
:where(a:visited) { color: var(--brand-deep); }

img, svg, video { max-width: 100%; height: auto; display: block; }

strong, b { font-weight: 700; }  /* colour inherits: never repaint dark surfaces */

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--white);
  padding: .7rem 1.1rem; font-weight: 600; text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; top: 0; }

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

/* ==========================================================================
   Layout primitives

   `.wrap` owns the centred content column and nothing else ever overrides its
   margins. A narrower measure is a CHILD (`.measure`), never a class stacked on
   `.wrap` - stacking them meant an inline `margin-left:0` cancelled the
   centring and pinned the block to the viewport edge.
   ========================================================================== */

.wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--content); }
.measure--center { margin-inline: auto; }

.section { padding-block: var(--s-8); }
.section--tight { padding-block: var(--s-6); }
.section--surface { background: var(--surface); }

.section > .wrap > :first-child,
.section > .wrap > .measure > :first-child,
.prose > :first-child { margin-top: 0; }

.section__lead { margin-top: var(--s-2); font-size: var(--text-lg); color: var(--muted); }

/* Long-form article body.
   No reading measure. It was 68 characters, the span typography holds to
   because a line much longer than that is hard to track back to the start of
   the next one. The client asked for it gone across the whole site, twice.
   The band container (.wrap, 1320px) is what stops text reaching the edge of a
   wide screen now; nothing else caps it. */
.prose { max-width: none; }
.prose > * + * { margin-top: var(--s-2); }
.prose > h2 { margin-top: var(--s-6); }
.prose > h3 { margin-top: var(--s-4); }

@media (max-width: 700px) {
  .section { padding-block: var(--s-6); }
  .section--tight { padding-block: var(--s-5); }
}

/* ==========================================================================
   Icons - Lucide, stroke 1.75, currentColor. One family.
   ========================================================================== */

.ico {
  width: 20px; height: 20px; flex: 0 0 20px;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico--sm { width: 17px; height: 17px; flex-basis: 17px; }
/* Brand marks are filled shapes, not stroked outlines. Stroking one turns the
   Facebook f into a smudge at 20px. */
.ico--brand { fill: currentColor; stroke: none; }

/* Tinted icon tile - replaces the bare icon, gives cards a modern anchor. */
.ico-tile {
  display: grid; place-items: center;
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 14px;
  background: var(--surface-2); color: var(--brand-ink);
  transition: background var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}

/* ==========================================================================
   Buttons

   Every button is FILLED. A transparent secondary takes the colour of whatever
   sits behind it, which is why the outline buttons read as invisible on both
   the tinted hero and the blue band.
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: .8rem 1.6rem;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; line-height: 1.2; letter-spacing: .005em;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-state) var(--ease),
              color var(--dur-state) var(--ease),
              border-color var(--dur-state) var(--ease),
              box-shadow var(--dur-state) var(--ease),
              transform var(--dur-state) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--brand-deep); color: var(--white); box-shadow: var(--shadow-brand); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--brand-ink); color: var(--white); }

/* Filled, not ghost: reads as a button on --bg and on --surface alike. */
.btn--secondary { background: var(--surface-2); color: var(--brand-ink); border-color: var(--line-strong); }
.btn--secondary:hover, .btn--secondary:focus-visible { background: var(--white); color: var(--brand-ink); border-color: var(--brand-deep); }

/* On the brand band: white fill, and a darker-blue fill for the second action. */
.btn--onbrand { background: var(--white); color: var(--brand-ink); }
.btn--onbrand:hover, .btn--onbrand:focus-visible { background: var(--surface); color: var(--brand-ink); }

.btn--onbrand-2 { background: var(--brand-ink); color: var(--white); border-color: rgba(255,255,255,.42); }
.btn--onbrand-2:hover, .btn--onbrand-2:focus-visible { background: var(--ink); color: var(--white); border-color: var(--white); }

.btn--sm { min-height: 44px; padding: .55rem 1.1rem; font-size: var(--text-xs); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ==========================================================================
   SIGNATURE - crisis bar
   The one place the design raises its voice. First painted, last in the footer.
   ========================================================================== */

.crisis { background: var(--ink); color: var(--white); font-size: var(--text-sm); }
.crisis__in {
  max-width: var(--wide); margin-inline: auto; padding: .45rem var(--gutter);
  display: flex; align-items: center; flex-wrap: wrap; gap: .3rem 1.4rem;
}
.crisis a, .crisis button { color: var(--white); }

.crisis .crisis__fb {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 34px; height: 34px; margin-right: -.5rem;
  border-radius: var(--radius-pill);
  transition: background var(--dur-state) var(--ease);
}
.crisis .crisis__fb:hover { background: rgba(255,255,255,.16); }
.crisis .crisis__fb svg { width: 17px; height: 17px; fill: currentColor; }

.crisis .crisis__line {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem 0; text-decoration: none; white-space: nowrap;
}
.crisis .crisis__line .ico { color: var(--accent); }
.crisis .crisis__line b { color: var(--white); font-weight: 700; letter-spacing: .01em; }
.crisis .crisis__line:hover b { text-decoration: underline; text-underline-offset: .2em; }

/* Same call the live site puts in its top bar, linking to the VMI form. */
.crisis__end {
  margin-left: auto; display: flex; align-items: center;
  gap: .35rem .75rem; flex-wrap: wrap; min-width: 0;
}
.crisis .crisis__link {
  text-decoration: none; font-weight: 600; white-space: nowrap;
  padding: .35rem .2rem; border-radius: var(--radius-sm);
}
.crisis .crisis__link:hover { text-decoration: underline; text-underline-offset: .2em; }

.crisis .crisis__parama {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .95rem; border-radius: var(--radius-pill);
  background: var(--brand-deep); color: var(--white);
  text-decoration: none; white-space: nowrap;
  transition: background var(--dur-state) var(--ease);
}
.crisis .crisis__parama:hover { background: var(--brand-ink); color: var(--white); }
.crisis .crisis__parama .ico { color: var(--white); }


/* ==========================================================================
   Header - two rows, mirroring the current site's menu exactly.
   Switch point is set from real content width, not a habitual 768.
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--bg); border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur-state) var(--ease);
}
/* Only once it is actually pinned; a shadow at rest reads as a mistake. */
.site-header.is-stuck { box-shadow: var(--shadow-1); }

.header__main {
  max-width: var(--wide); margin-inline: auto; padding: .75rem var(--gutter);
  min-height: 92px;
  display: flex; align-items: center; gap: var(--s-3);
}

/* The brand must be able to give up width, or the long Lithuanian strapline
   pushes the burger off the right edge on a 360px phone. */
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; flex: 0 1 auto; min-width: 0; }
.brand > span { min-width: 0; }
.brand__mark { width: 60px; height: 60px; flex: 0 0 60px; border-radius: 50%; }
.brand__name { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; line-height: 1; color: var(--brand-deep); letter-spacing: -.01em; }
.brand__tag {
  display: block; margin-top: .2rem;
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 400;
  line-height: 1.25; color: var(--muted);
  /* Two lines is fine; what is not fine is the header changing height, so the
     box is reserved whether the text wraps or not. */
  max-width: 22ch;
}

/* The squeeze zone. Between the width the drawer closes at (1081px) and the
   width the full row finally fits (1200px), the navigation labels and the CTA
   cannot shrink - they are `white-space: nowrap` by design - so the brand is
   the only thing left to give. Measured: at 1100px the tagline collapses to a
   67px column five lines deep and pushes the header from 93px to 137px, which
   is a header that looks broken rather than tight.

   The tagline goes instead. "EPKC" is the mark people recognise, the full name
   is the first thing in the footer and it is in every page title, and nothing
   in the header changes height. */
@media (min-width: 1081px) and (max-width: 1199px) {
  .brand__tag { display: none; }
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: stretch; gap: .15rem; list-style: none; padding: 0; margin: 0; }
.nav__list > li { display: flex; align-items: center; margin: 0; }
/* A <button> and an <a> must be indistinguishable here: same box, same
   metrics, same optical baseline. Anything less and one item sits a pixel or
   two off the rest of the row. */
.nav__list > li > a, .nav__toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  height: 40px; padding: 0 .8rem; border-radius: var(--radius-pill);
  font-family: inherit; text-align: left; appearance: none;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; line-height: 1; color: var(--ink);
  text-decoration: none; white-space: nowrap;      /* labels never wrap */
  background: none; border: 0; cursor: pointer;
  transition: background var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}
.nav__list > li > a:hover, .nav__toggle:hover,
.nav__list > li > a[aria-current="page"] { background: var(--surface); color: var(--brand-ink); }
.nav__toggle .ico { flex: 0 0 17px; transition: transform var(--dur-state) var(--ease); }
.nav__toggle[aria-expanded="true"] .ico { transform: rotate(180deg); }

.has-sub { position: relative; }
/* The panel used to sit 8px below the trigger, so the pointer crossed dead
   space and the hover dropped. It now starts flush and uses a transparent
   top margin to keep the visual gap. */
.has-sub::after {
  content: ''; position: absolute; inset: 100% 0 auto 0; height: 10px;
  display: none;
}
.has-sub:hover::after, .has-sub:focus-within::after { display: block; }

/* The panel is as wide as its widest item, and no wider.
   A fixed 340px was set for the longest menu in the site - "Pagalba nuo
   nusikalstamos veikos nukentėjusiems asmenims" - and every other dropdown paid
   for it: the financial reports list five years and drew a panel eight times
   wider than "2024". max-content sizes each panel to its own contents; the
   floor keeps it from ending up narrower than the trigger it hangs from, and
   the ceiling keeps the long one wrapping instead of running off the screen. */
.sub {
  position: absolute; top: 100%; left: 0; z-index: 70;
  margin-top: 10px;
  width: max-content;
  min-width: 100%;
  max-width: min(340px, calc(100vw - 2 * var(--gutter)));
  padding: .5rem;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-2);
  display: none;
}
.sub[data-open="true"] { display: block; }

/* Pointer layout only: below the switch point the drawer's toggle is the sole
   way in, so hover and focus must not force a panel open. */
@media (min-width: 1081px) {
  .has-sub:hover .sub, .has-sub:focus-within .sub { display: block; }
}
.sub ul { list-style: none; padding: 0; margin: 0; }
.sub li { margin: 0; }
.sub a {
  display: block; padding: .6rem .75rem;
  color: var(--ink); text-decoration: none;
  font-weight: 400; line-height: 1.4; white-space: normal;
  border-radius: var(--radius-sm);
  transition: background var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}
.sub a:hover, .sub a:focus-visible { background: var(--surface); color: var(--brand-ink); }

/* The last dropdown would otherwise run off the right edge of the viewport. */
.nav__list > li:last-child .sub,
.nav__list > li:nth-last-child(2) .sub { left: auto; right: 0; }

.header__cta { flex: 0 0 auto; }

/* One menu. The live site's second row is folded into the "Apie centrą"
   dropdown; every link survives, nothing wraps. */
/* One menu. The live site's second row is folded into the "Apie centrą"
   dropdown; every link survives, nothing wraps. */

.burger { display: none; }

/* --------------------------------------------------------------------------
   Off-canvas drawer. Below the switch point the menu slides in from the right
   over a backdrop, instead of pushing the header open and growing it.
   Switch point comes from the real menu width, not a habitual 768.
   -------------------------------------------------------------------------- */

.nav__head, .nav__close, .nav__cta, .nav-backdrop { display: none; }

@media (max-width: 1080px) {
  .burger {
    display: inline-flex; align-items: center; gap: .5rem; margin-left: auto;
    flex: 0 0 auto;
    min-height: 48px; padding: .5rem 1rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill);
    font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; line-height: 1;
    color: var(--ink); cursor: pointer;
  }

  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 90;
    background: rgba(15,26,43,.55);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-enter) var(--ease);
  }
  .site-header[data-open="true"] ~ .nav-backdrop,
  .site-header[data-open="true"] .nav-backdrop { opacity: 1; pointer-events: auto; }

  .nav {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 95;
    width: min(88vw, 380px); margin: 0;
    display: flex; flex-direction: column;
    background: var(--bg);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    transform: translateX(100%);
    transition: transform var(--dur-enter) var(--ease);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .site-header[data-open="true"] .nav { transform: translateX(0); }

  .nav__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s-2) var(--s-3);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; background: var(--bg); z-index: 1;
  }
  .nav__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--brand-deep); }
  .nav__close {
    display: grid; place-items: center; width: 44px; height: 44px;
    background: none; border: 1px solid var(--line); border-radius: var(--radius-pill);
    color: var(--ink); cursor: pointer;
  }
  .nav__close:hover { background: var(--surface); }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: var(--s-2) var(--s-3); }
  .nav__list > li { display: block; border-top: 1px solid var(--line); }
  .nav__list > li:first-child { border-top: 0; }
  .nav__list > li > a, .nav__toggle {
    width: 100%; height: auto; justify-content: space-between;
    padding: .9rem .2rem; border-radius: var(--radius-sm);
  }

  .has-sub::after { display: none; }
  .sub {
    /* In the drawer the panel is a plain indented list, so the sizing above is
       undone: it takes the drawer's width like everything else. */
    position: static; display: none; margin: 0 0 .5rem;
    width: auto; min-width: 0; max-width: none;
    padding: 0 0 .25rem .9rem;
    background: none; border: 0; box-shadow: none;
  }
  .sub[data-open="true"] { display: block; }
  .sub a { padding: .7rem .2rem; color: var(--body); font-size: var(--text-sm); }

  /* The drawer's call to action, last in the panel. It needs a gap above it:
     flush against the Facebook link it read as one more row of the utility
     list rather than as the button the whole menu leads to. */
  .nav__cta { display: inline-flex; margin: var(--s-3) var(--s-3) var(--s-4); }

  .header__cta { display: none; }
}

/* The drawer is fixed, so the page behind it must not scroll with it. */
html.nav-open, html.nav-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav, .nav-backdrop { transition: none; }
}

/* On a phone the strapline costs more width than it earns; the full name is in
   the page title and the footer. */
@media (max-width: 620px) {
  :root { --sticky-h: 70px; }
  .brand__mark { width: 52px; height: 52px; flex-basis: 52px; }
  .header__main { gap: var(--s-2); min-height: 68px; }
  .burger span { display: none; }        /* icon-only; the button keeps its aria-label */
  .burger { padding: .5rem .75rem; }
}

/* On a phone the bar keeps ONE thing: the number.
   Three utility links plus the Facebook mark stacked into three rows, 131px of
   an 844px screen before any content, and the helpline, which is the reason the bar
   exists, was competing with a share icon for attention. The links are not
   dropped: they move into the drawer, where there is room for them to be real
   tap targets. Above 860px the bar has space and keeps them. */
@media (max-width: 860px) {
  .crisis__fb,
  .crisis__end { display: none; }
  .crisis__in { justify-content: center; }
}

/* The same links, in the menu, only where the bar has given them up. */
.nav__util { display: none; }
@media (max-width: 860px) {
  .nav__util {
    display: grid; gap: .25rem;
    padding: var(--s-2) var(--s-3) 0;
    border-top: 1px solid var(--line);
    margin-top: var(--s-2);
  }
  .nav__util-link {
    display: flex; align-items: center; gap: .6rem;
    min-height: 48px; padding: .7rem .2rem;
    font-size: var(--text-sm); font-weight: 600; color: var(--body);
    text-decoration: none; border-radius: var(--radius-sm);
  }
  .nav__util-link:hover, .nav__util-link:focus-visible { background: var(--surface); color: var(--brand-ink); }
  .nav__util-link .ico { color: var(--brand-deep); }
  .nav__util-link--parama { color: var(--brand-ink); font-weight: 700; }
  .nav__util-link--fb svg { width: 18px; height: 18px; fill: currentColor; color: var(--brand-deep); }
  /* The apps keep their own colours here, where the row is white. In the
     footer they do not - see the note beside .social. */
  .nav__util-link--viber .ico { color: var(--viber); }
  .nav__util-link--whatsapp .ico { color: var(--whatsapp-ink); }
}

@media (max-width: 700px) {
  .crisis__in { gap: .3rem .7rem; padding: .4rem var(--gutter); }
  .crisis__in > .crisis__line + .crisis__line { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { position: relative; background-color: var(--bg); background-image: var(--gradient-hero); overflow: hidden; }

/* --------------------------------------------------------------------------
   Hero with an illustrated backdrop.

   One frame, pale, with the type ON it rather than over a scrim. Until
   2026-09-16 this was the reverse: four photographs cross-fading under
   rgba(--ink,.62) carrying white copy. The client supplied a single artwork
   whose left half is an empty pale-blue gradient - that emptiness is where the
   heading goes, and it is the whole contrast strategy.

   Which means object-position is load-bearing, not taste. The picture is
   2560x1317; any viewport narrower than that ratio crops it, and `cover` would
   crop from both sides, walking the dark blue shape and the photographic hands
   on the right-hand third leftwards until they sat under the h1. `left center`
   pins the pale end in place, so what a phone drops is the busy side.

   Measured, not assumed: tools/hero-contrast.mjs samples the band the copy
   actually occupies at sixteen widths and reports the worst pair. With the wash
   and the crops below it is 5.15:1, at 360px, on the lead rather than the
   heading. Re-run it after changing the picture - a darker artwork has no scrim
   left to hide behind, and the field that holds it is one the client can edit.
   -------------------------------------------------------------------------- */

.hero--media { background-image: none; background-color: var(--hero-backdrop); }
.hero--media .hero__in { position: relative; z-index: 2; }

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__img {
  width: 100%; height: 100%; object-fit: cover; object-position: left center;
  display: block;
}

/* A pale wash over the left third - the scrim inverted. The old one darkened a
   photograph so white type could sit on it; this lifts the left of a light
   artwork so --ink and --body can.

   It exists because object-position alone was not enough and the measurement
   said so: tools/hero-contrast.mjs put the lead at 4.04:1 against the artwork's
   bottom-left, where the gradient is deepest, and AA wants 4.5 for a 20px
   paragraph. It also buys the thing the layout cannot: the hero picture is an
   editable field, and the next one the client chooses will not be this one.

   .30 is what the measurement asked for, not a round number: it lifts the
   4.04:1 to 5.50:1 at 1440. Held flat across the left 34% so the copy sits on an
   even field rather than on a ramp, then out by 64%, which is past the point
   where the artwork's own subject begins. The script carries a twin of these
   three numbers and composites with them; change one here and change it there,
   or the gate starts measuring a hero that does not exist. */
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,.30) 0%,
    rgba(255,255,255,.30) 34%,
    rgba(255,255,255,0) 64%);
}

/* Left, not centred: the artwork puts its subject on the right and leaves the
   left half open. A centred heading would sit on top of the hands. */
.hero--media .hero__in {
  grid-template-columns: 1fr;
  /* 51.4% is the artwork's own aspect ratio, so at the sizes that matter the
     picture is shown whole rather than cropped to a band. */
  min-height: clamp(460px, 51.4vw, 860px);
  place-items: center start;
  padding-block: var(--s-6);
}
.hero__content { max-width: 46rem; }
/* Capped at half the band, not at a reading measure: the artwork's pale half is
   the left half, and a wider column would walk the last words of a long heading
   onto the blue shape. The 46rem is the measure; the 50% is the picture. */
.hero--media .hero__content { max-width: min(46rem, 50%); }
.hero--media .hero__content > h1 { max-width: 19ch; color: var(--ink); margin-inline: 0; }
.hero--media .hero__lead { max-width: 44ch; margin-inline: 0; color: var(--body); }

/* One column below the tablet break. The artwork is 2:1 and the section is
   nearly square by then, so `cover` is throwing away most of the right-hand
   side; the copy takes the full width rather than sitting in a 300px gutter.

   Which takes the 50% cap away, and something has to replace it: at 768 the
   section is only 460px tall, so `cover` scales the picture by its height and
   barely crops it sideways at all - 86% of a 2:1 artwork across a full-width
   column, which is the blue shape and the photographed hands directly under the
   lead. The measurement was blunt about it: 1.00:1, the worst number this tool
   can report.

   The fix is to crop harder rather than to paint over it: the image box is made
   wider than the section, .hero clips it, and what is left is the part of the
   artwork the copy can safely sit on. A veil doing the same job would have had
   to reach .55 and would have flattened the picture at every size.

   Two steps rather than one, because the tablet band and the phone band want
   different things. At 621-940 the copy keeps a 55% column and the box goes to
   150%, which still shows the blue shape and the near edge of the hands beside
   it - cropping to the pale half here would have left a tablet looking at an
   empty blue field. Below 620 the copy takes the full width, so there is no
   room for the subject at all and the box goes to 200%: the left half only,
   which is what a phone's own aspect ratio was already choosing. */
@media (max-width: 940px) {
  .hero--media .hero__content { max-width: 55%; }
  .hero--media .hero__content > h1 { max-width: 20ch; }
  .hero__img { width: 150%; max-width: none; }
}

@media (max-width: 620px) {
  .hero--media .hero__in { min-height: clamp(380px, 86vw, 560px); padding-block: var(--s-5); }
  .hero--media .hero__content { max-width: none; }
  .hero__img { width: 200%; }
}

.hero__in {
  position: relative; max-width: var(--wide); margin-inline: auto;
  padding: var(--s-7) var(--gutter);
  display: grid; gap: var(--s-5); align-items: center;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}
.hero__in > div > h1 { max-width: 19ch; color: var(--ink); margin-top: 0; }
.hero__in > div > h1 em { font-style: normal; color: var(--brand-deep); }
.hero__lead {
  margin-top: var(--s-3); max-width: 52ch;
  font-size: var(--text-lg); line-height: 1.55; color: var(--body);
}
.hero .btn-row { margin-top: var(--s-4); }
.hero__note { margin-top: var(--s-3); font-size: var(--text-sm); color: var(--muted); }

/* Straight to the right area of help, answered in the first screen rather than
   after a scroll. This is what fills the hero, not decoration. */
.hero__picker {
  padding: var(--s-3); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
}
.hero__picker > h2 {
  margin: 0 0 var(--s-1); font-size: var(--text-base);
  font-family: var(--font-body); font-weight: 700; color: var(--ink);
}
.hero__picker ul { list-style: none; padding: 0; margin: 0; display: grid; }
.hero__picker li { margin: 0; }
.hero__picker a {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .6rem; text-decoration: none; color: var(--ink);
  font-weight: 600; font-size: var(--text-sm); border-radius: var(--radius-sm);
  transition: background var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}
.hero__picker a:hover { background: var(--surface); color: var(--brand-ink); }
.hero__picker a > .ico { color: var(--brand-deep); }
.hero__picker a .ico--go { margin-left: auto; color: var(--muted); transition: transform var(--dur-state) var(--ease); }
.hero__picker a:hover .ico--go { transform: translateX(3px); color: var(--brand-deep); }

@media (max-width: 940px) {
  .hero__in { grid-template-columns: 1fr; gap: var(--s-4); padding-block: var(--s-6); }
  .hero__in > div > h1 { max-width: none; }
}

/* Interior page hero - smaller, same family. */
.pagehero { background: var(--surface); border-bottom: 1px solid var(--line); }
.pagehero__in { max-width: var(--wide); margin-inline: auto; padding: var(--s-5) var(--gutter) var(--s-6); }
/* No measure on the page title. It was capped at 24ch to keep a long h1 from
   running the width of a 1320px band, but the client reads the result as a
   heading that stops for no reason: "Jei turite klausimų - susisiekite!" broke
   over two lines with half the row empty beside it. Titles are scanned, not
   read line by line, so the measure rule that governs body copy does not apply. */
.pagehero__in > h1 { color: var(--ink); }
/* The mark that says what kind of page this is. Drawn at the size it was made:
   the easy-to-read logo is 519px wide and stretching it across the column stops
   it reading as a logo. */
.pagehero__badge {
  display: block; width: auto; height: auto;
  max-width: min(100%, 300px);
  margin-top: var(--s-3);
}

.pagehero__lead { margin-top: var(--s-3); font-size: var(--text-lg); color: var(--body); }
.pagehero .btn-row { margin-top: var(--s-4); }

/* WCAG 2.5.8 asks for 24px in both directions on anything you tap. At
   var(--text-sm) a link is 20px tall, so it gets 3px of padding either side and
   the row is pulled back by the same amount - the target grows, the layout does
   not move. 3px rather than 2: at 2 the box measures 23.99 on a fractional
   line-height and lands on the wrong side of the rule. */
.crumbs { font-size: var(--text-sm); color: var(--muted); margin-bottom: var(--s-3); margin-block-start: -3px; }
.crumbs a { color: var(--muted); display: inline-block; padding-block: 3px; }
.crumbs a:hover { color: var(--brand-ink); }
.crumbs span { padding-inline: .45rem; }

/* ==========================================================================
   Cards
   ========================================================================== */

.cards { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-top: var(--s-5); }

.card {
  display: flex; flex-direction: column;
  padding: var(--s-4) var(--s-3) var(--s-3);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--dur-state) var(--ease),
              border-color var(--dur-state) var(--ease),
              transform var(--dur-state) var(--ease);
}
.card:hover { box-shadow: var(--shadow-2); border-color: var(--line-strong); transform: translateY(-2px); }

/* ==========================================================================
   Checkerboard - the illustration swaps side row by row.

   "Better artwork to follow" arrived on 2026-09-16: four of the five areas now
   carry square 1000px illustrations instead of the 300x150 banners scraped off
   the live site. The fifth ("Pagalba nuo nusikalstamos veiklos nukentėjusiems
   asmenims") was not re-illustrated and still carries its 555x319 photograph,
   so this has to seat both a square and a landscape frame in the same column
   without either one looking like a mistake.

   It does that by capping the media column rather than by cropping. A shared
   aspect-ratio box would have been tidier and is wrong here: cover-cropping the
   remaining banner would cut the text baked into its artwork, which is the one
   thing no layout rule is allowed to do. Capped width, natural height: the
   square lands at 480x480, the photograph at 480x276, and the rows differ in
   height, which align-items: center already handles.
   ========================================================================== */

.zigzag { display: grid; gap: var(--s-6); }

/* Equal tracks, with the banner held at its native size and pushed to the outer
   edge of its half. A fixed 300px image track against a 1fr text track left a
   wide hole in the middle of the mirrored rows; this keeps each pair tight and
   lands the copy at ~63 characters without needing a cap. */
.zz {
  display: grid;
  /* minmax(0,1fr), not 1fr: a `1fr` track floors at the item's min-content
     width, so one stubborn child widens the whole row past the viewport. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: center;
}
.zz__media, .zz__body { min-width: 0; }
.zz + .zz { padding-top: var(--s-6); border-top: 1px solid var(--line); }

/* Even rows mirror: image right, copy left. */
.zz:nth-child(even) > .zz__media { order: 2; }

.zz__media a {
  display: block; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-2);
  /* Capped, and pushed to the outer edge of its half: a 480px square against a
     ~620px track would otherwise float in the middle and open a gap down the
     spine of the page. Odd rows have the picture on the left and so push left;
     the even-row mirror is below. */
  max-width: 480px; margin-right: auto;
  transition: box-shadow var(--dur-state) var(--ease), transform var(--dur-state) var(--ease);
}
.zz:nth-child(even) > .zz__media a { margin-right: 0; margin-left: auto; }
.zz__media a:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.zz__media img { width: 100%; height: auto; display: block; }

.zz__body > h2 { margin-top: 0; margin-bottom: var(--s-2); font-size: var(--text-xl); }
.zz__body > h2 a { color: var(--ink); text-decoration: none; }
.zz__body > h2 a:hover { color: var(--brand-ink); text-decoration: underline; }
.zz__body > p { margin: 0; }
.zz__body > p + p { margin-top: var(--s-2); }
.zz__body > .btn-row { margin-top: var(--s-3); }

@media (max-width: 860px) {
  .zigzag { gap: var(--s-5); }
  .zz { grid-template-columns: 1fr; gap: var(--s-3); align-items: start; }
  /* On one column the image always leads, so the order never looks arbitrary. */
  /* One column: the image always leads and is centred rather than stretched.
     A 1000px square across a 390px phone is a full screen of illustration
     before a single word of the heading. */
  .zz > .zz__media,
  .zz:nth-child(even) > .zz__media { order: 0; }
  .zz__media a,
  .zz:nth-child(even) > .zz__media a { max-width: 380px; margin-inline: auto; }
  .zz + .zz { padding-top: var(--s-5); }
}

/* Internal rhythm: icon gap largest, heading-to-body next, none of them zero. */
.card > .ico-tile { margin-bottom: var(--s-3); }
.card h3 { margin: 0 0 .5rem; font-size: var(--text-lg); }
.card > p { margin: 0; font-size: var(--text-sm); color: var(--body); }

/* ==========================================================================
   Contact band - the page's anchor. Gradient brand, white text (5.06:1 worst).
   ========================================================================== */

.band { background-color: var(--brand-deep); background-image: var(--gradient-band); color: var(--white); }
.band__in {
  max-width: var(--wide); margin-inline: auto; padding: var(--s-8) var(--gutter);
  display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.band .band__in > div > h2 { color: var(--white); margin: 0 0 var(--s-2); }
.band .band__in > div > p { color: rgba(255,255,255,.9); margin: 0; max-width: 44ch; }
.band .btn-row { margin-top: var(--s-4); }

.band .band__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.band .band__list li {
  display: flex; gap: .9rem; align-items: center; margin: 0;
  padding: .85rem 1rem; border-radius: var(--radius);
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
}
.band .band__list .ico { color: var(--white); flex: 0 0 20px; }
.band .band__list a, .band .band__list span { color: var(--white); }
.band .band__list b { display: block; font-size: var(--text-lg); color: var(--white); }
.band .band__list small { display: block; color: rgba(255,255,255,.82); font-size: var(--text-sm); }

@media (max-width: 860px) { .band__in { grid-template-columns: 1fr; padding-block: var(--s-6); } }

/* ==========================================================================
   Steps - numbered because the content genuinely is a sequence
   ========================================================================== */

.steps { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; gap: var(--s-3); }
.steps > li {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--s-3);
  align-items: start; margin: 0;
  padding: var(--s-3); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.steps__n {
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 16px; background: var(--surface-2); color: var(--brand-ink);
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: 1;
}
.steps h4 { margin: .5rem 0 .35rem; }
.steps p { margin: 0; }

/* ==========================================================================
   Plain lists with a check mark
   ========================================================================== */

.ticks { list-style: none; padding: 0; margin-top: var(--s-3); display: grid; gap: .6rem; }
.ticks li { display: flex; gap: .7rem; align-items: flex-start; margin: 0; }
.ticks .ico { margin-top: .3rem; color: var(--brand-deep); }

/* ==========================================================================
   FAQ - a native <details> accordion, not a scripted one

   Closed by default. Ten answers open at once is a wall of text, and the whole
   point of the block is that a visitor can see the ten questions in one glance
   and open the one that is theirs. Everything the accordion needs - keyboard
   operation, the expanded/collapsed state announced to a screen reader,
   Ctrl+F reaching into a closed panel - the element already does; the styling
   below only replaces the default triangle with the chevron this design uses.
   ========================================================================== */

.faq { display: grid; gap: .75rem; margin-top: var(--s-4); }

.faq__item {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.faq__item[open] { border-color: var(--line-strong); box-shadow: var(--shadow-2); }

/* `list-style: none` for Firefox, the pseudo-element for Safari: between them
   the default disclosure triangle is gone everywhere, and the chevron below is
   the only marker. */
.faq__q {
  display: flex; align-items: flex-start; gap: var(--s-2);
  justify-content: space-between;
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.35;
  color: var(--brand-ink);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius);
  transition: background var(--dur-state) var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: var(--surface); }
/* Inset, because the summary fills the card to its rounded edge and an outward
   ring would be clipped by the border-radius above it. */
.faq__q:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }

.faq__chev {
  margin-top: .2rem; color: var(--brand-deep);
  transition: transform var(--dur-enter) var(--ease);
}
.faq__item[open] > .faq__q > .faq__chev { transform: rotate(180deg); }

.faq__a { padding: 0 var(--s-3) var(--s-3); max-width: none; }
.faq__a > :first-child { margin-top: 0; }

/* ==========================================================================
   Quick contacts - the fast route off a help page

   Every help page ends with the registration form, which is the right thing
   for someone weighing a decision and the wrong thing for someone who has
   already decided. This is the other half: five things to tap, the same five
   in the same order on all five pages, so the one used last time is where it
   was left. Big tiles because most of this traffic is on a phone, and because
   the app someone recognises is the one they will use.
   ========================================================================== */

.quick__title { margin-top: 0; }
.quick__lead { color: var(--body); max-width: var(--content); }

.quick__grid {
  list-style: none; padding: 0; margin: var(--s-4) 0 0;
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.quick__grid > li { margin: 0; }

.quick__btn {
  display: flex; align-items: center; gap: var(--s-2);
  height: 100%; padding: var(--s-2) var(--s-3);
  background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  color: var(--ink); text-decoration: none;
  transition: border-color var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease);
}
.quick__btn:hover, .quick__btn:focus-visible { border-color: var(--brand-deep); box-shadow: var(--shadow-2); color: var(--ink); }

.quick__ico {
  display: grid; place-items: center;
  flex: 0 0 56px; width: 56px; height: 56px;
  border-radius: 18px;
  background: var(--surface-2); color: var(--brand-ink);
}
.quick__ico .ico { width: 28px; height: 28px; flex-basis: 28px; }

.quick__txt { display: grid; gap: .1rem; min-width: 0; }
.quick__lbl { font-size: var(--text-sm); color: var(--muted); }
.quick__val {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-lg); color: var(--brand-ink);
  overflow-wrap: anywhere;
}

/* The helpline keeps the red it has in the top bar: it is the same number and
   it should look like the same thing. The apps keep theirs, which is the whole
   point: someone scanning for WhatsApp is scanning for that green. */
.quick__btn--crisis .quick__ico { background: var(--crisis); color: var(--white); }
.quick__btn--viber .quick__ico { background: var(--viber); color: var(--white); }
.quick__btn--whatsapp .quick__ico { background: var(--whatsapp); color: var(--ink); }

/* Two big buttons, in the apps' own colours, for the pages that are already a
   list of contacts and do not need the whole quick-contacts grid again. */
.msg {
  list-style: none; padding: 0; margin: var(--s-3) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.msg > li { margin: 0; }
.msg__btn {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 52px; padding: .6rem 1.25rem;
  border-radius: var(--radius-pill);
  font-weight: 700; font-size: var(--text-base);
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: filter var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease);
}
.msg__btn:hover, .msg__btn:focus-visible { box-shadow: var(--shadow-2); filter: brightness(.93); }
.msg__btn .ico { width: 26px; height: 26px; flex-basis: 26px; }
.msg__btn--viber { background: var(--viber); color: var(--white); }
/* The fill is repeated on the hover rule rather than left to inherit. It is
   not redundant: :hover only re-stating `color` is a white label on whatever
   the checker can see, which is the page. Keep the pair together. */
.msg__btn--viber:hover, .msg__btn--viber:focus-visible { background: var(--viber); color: var(--white); }
.msg__btn--whatsapp { background: var(--whatsapp); color: var(--ink); }
.msg__btn--whatsapp:hover, .msg__btn--whatsapp:focus-visible { background: var(--whatsapp); color: var(--ink); }

/* The footer's social row is white marks on --ink, and the two apps keep that
   rather than their own colours: WhatsApp green on --ink is 2.0:1 and Viber
   purple is 4.5:1, neither of which is a mark anyone can make out. Their
   colours are carried on the pages where the background is light. */

/* ==========================================================================
   Facebook block and reviews
   ========================================================================== */

/* One centred axis for the whole block. The page plugin is a fixed 500px
   column - that is Meta's published maximum, and giving it more space only
   makes it render at 500 inside a container it does not fill - so the heading
   and the button are centred on the same 500px rather than run to the full
   band. A left-aligned heading over a centred frame reads as two blocks that
   failed to line up, which is what it was. */
.fb { max-width: 500px; margin-inline: auto; text-align: center; }
.fb__title { margin-top: 0; }
/* The whole plugin, header strip included.

   It used to be the posts and only the posts: Meta's header strip was laid out
   at one width and painted at another, so the page name landed under the first
   post and the follower count was cut in half, and a cross-origin iframe can be
   cropped but not styled. The comment that lived here said "if Meta ever fixes
   the strip, the only cost of this is 72px of blank header". Meta has fixed it,
   so that is no longer the cost - the crop was hiding a working header.

   Re-measured on 2026-09-16 at 320, 340, 390, 460 and 500px containers with the
   parameters this site actually sends: the name truncates with an ellipsis when
   it has to, the follow button and the follower count are intact, and nothing
   overlaps the first post at any of them. Re-measure before cropping again. */
.fb__frame {
  margin-top: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface);
  height: 700px;
}
.fb__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
/* The button had no margin of its own and sat welded to the frame above it. */
.fb .btn-row { justify-content: center; margin-top: var(--s-4); }

.reviews { margin-top: var(--s-4); }
/* The Trustindex widget ships its own stylesheet and its own font stack. It may
   not be this site's, and it is not ours to restyle beyond keeping it inside
   the column and letting it scroll rather than push the page sideways. */
.reviews > * { max-width: 100%; }
.reviews { overflow-x: auto; }

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-grid { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; gap: .75rem; }
.contact li {
  display: flex; gap: .9rem; align-items: center; margin: 0;
  padding: var(--s-2) var(--s-3);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
}
.contact .ico { color: var(--brand-deep); flex: 0 0 20px; }
.contact .lbl { display: block; font-size: var(--text-sm); color: var(--muted); margin-bottom: .1rem; }
.contact .val { display: block; font-size: var(--text-lg); color: var(--ink); font-weight: 700; }
.contact a.val { color: var(--brand-deep); text-decoration: none; }
.contact a.val:hover { color: var(--brand-ink); text-decoration: underline; }

/* The same cards where they are a section of an ordinary page rather than the
   whole of /kontaktai/. Side by side once there is room: four of these stacked
   full width under a paragraph is a column of near-empty boxes. */
.contact--lines {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-top: var(--s-4);
}

/* Click-to-load map. A bare Google Maps iframe sets third-party cookies before
   the visitor has consented, so nothing is requested until they ask for it. */
.map { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.map iframe { display: block; width: 100%; height: 440px; border: 0; }
.map__facade {
  display: grid; place-content: center; gap: var(--s-2);
  min-height: 440px; padding: var(--s-4); text-align: center;
  background: var(--surface);
}
.map__facade > p { margin: 0; color: var(--muted); font-size: var(--text-sm); max-width: 44ch; }
.map__facade .ico-tile { justify-self: center; }
.map__facade .btn-row { justify-content: center; }

/* ==========================================================================
   Cookie consent
   ========================================================================== */

/* The bar exists because the privacy policy promises it: analytics is loaded
   with Consent Mode denied and stays denied until someone says otherwise, and
   without a control nobody ever can. Bottom of the screen, above the
   back-to-top button, out of the crisis bar's way at the top.

   Hidden until the script decides it is needed, so a visitor who has already
   answered never sees it and a visitor with no JavaScript never sees a bar
   whose buttons would do nothing. */
.consent[hidden] { display: none; }
.consent {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-2) var(--gutter);
  background: var(--bg);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
/* Direct child, like .map__facade > p above it: a descendant selector that sets
   a colour is a rule that can land somewhere nobody intended, and validate.mjs
   fails the build for exactly this shape. */
.consent > p { margin: 0; max-width: 62ch; font-size: var(--text-sm); color: var(--body); }
.consent .btn-row { margin: 0; flex: 0 0 auto; }
.consent .btn { padding-block: .55rem; }

@media (max-width: 720px) {
  .consent { justify-content: flex-start; padding-bottom: var(--s-3); }
  .consent .btn-row { width: 100%; }
  .consent .btn { flex: 1 1 auto; justify-content: center; }
}

/* The back-to-top control would otherwise sit under the bar. */
.consent:not([hidden]) ~ .to-top { bottom: calc(var(--s-7) + var(--s-2)); }

/* ==========================================================================
   Form - markup maps 1:1 to FluentForm / CF7
   ========================================================================== */

.form-card {
  margin-top: var(--s-5); padding: var(--s-5);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
}
@media (max-width: 620px) { .form-card { padding: var(--s-3); } }

.form { display: grid; gap: var(--s-3); }
.field { display: grid; gap: .4rem; }
.field > label { font-weight: 700; font-size: var(--text-sm); color: var(--ink); }
.field .hint { font-size: var(--text-xs); color: var(--muted); }

/* Every control shares one shell: text, select and textarea are indistinguishable
   in height, padding, border and background. Native selects get color-scheme so
   their own chrome follows the design. */
.field input,
.field select,
.field textarea {
  width: 100%; min-height: 54px; padding: .8rem 1rem;
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; line-height: 1.4; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); color-scheme: light;
  transition: border-color var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  border-color: var(--brand-deep); box-shadow: 0 0 0 4px rgba(55,121,253,.18); outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }

.field--consent {
  grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .75rem;
  padding: var(--s-2); background: var(--surface); border-radius: var(--radius-sm);
}
.field--consent input { width: 22px; min-height: 22px; height: 22px; margin-top: .15rem; accent-color: var(--brand-deep); }
.field--consent label { font-weight: 400; font-size: var(--text-sm); color: var(--body); }

.form__row { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* ==========================================================================
   Staff, gallery, documents, posts
   ========================================================================== */

/* Staff. The source is five prose blobs where the role, name, phone and the
   list of services are all <b> and <br> inside one paragraph; renderPeople()
   pulls them apart so a person becomes a card instead of a 900px banner row. */
/* 320px, not 280: at 280 the five people lay out four-up and leave one alone
   on a second row. Three-up gives 3+2 and a portrait worth looking at. */
/* `minmax(min(100%, 320px), 1fr)`, not `minmax(320px, 1fr)`, and the same in
   every auto-fit grid on this page and the five others that had it.
   A bare 320px minimum is a floor the track cannot go under, so once the band
   is narrower than that the card simply sticks out of it: at 360px the column
   was 312px wide and the card 320px, hanging 8px past the edge, and at 320px it
   pushed the whole document sideways. `min(100%, …)` keeps the 320px intent
   while letting the track shrink to the space that actually exists. */
.people { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-top: var(--s-5); }
.person {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: box-shadow var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease);
}
.person:hover { box-shadow: var(--shadow-2); border-color: var(--line-strong); }
/* The five portraits are 900x900, 1440x1920, 592x526, 383x727 and 344x465:
   one square, two tall, two nearly landscape. They have to line up, so one box
   holds all five and the only question is which box loses the least face.

   4:5 upright, not 1:1. A square box on a 380px card is 380px tall, but the old
   rule also capped it at 300px, so `aspect-ratio` lost to `max-height` and the
   box came out LANDSCAPE, 380x300, cropping a 383x727 portrait down to a band
   across the middle of the person. Three of the five lost the top of the head.

   `center 30%` rather than `top`: in a portrait taken at arm's length the face
   sits below the top edge, and anchoring at 0 gives a picture of hair and
   ceiling. 30% keeps the eyes in frame on all five. */
.person__photo { background: var(--surface); }
.person__photo img {
  display: block; width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: center 22%;
}
/* One ratio at every width. A shallower box on a phone looked like it would
   save vertical space, and what it actually did was crop a 383x727 portrait to
   287px of its 727 and take the head with it. A card per row at 340px is 425px
   of picture, which is a portrait, not a screenful. */
.person__body { padding: var(--s-3); }
.person h2 { margin: .35rem 0 0; font-size: var(--text-lg); letter-spacing: -.01em; }
.person .role { margin: 0; font-size: var(--text-sm); font-weight: 700; color: var(--brand-ink); }
.person__tel { display: flex; align-items: center; gap: .5rem; margin-top: var(--s-2); font-size: var(--text-sm); }
.person__tel .ico { color: var(--brand-deep); }
.person__svc-head { margin-top: var(--s-2); font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.person__svc { margin: .35rem 0 0; padding-left: 1.1rem; font-size: var(--text-sm); }
.person__svc li + li { margin-top: .2rem; }

/* Documents. The financial-report pages are nothing but PDFs, and the client's
   own filename is the only honest label for them. The size is shown because
   three of these are over 10 MB and a phone deserves the warning. */
.docs { margin-top: var(--s-5); display: grid; gap: var(--s-2); }
/* The label the editor wrote above each embed: "Veiklos ataskaita",
   "Aiškinamasis raštas". It says what the document is, which the filename
   under it does not. */
.doc__label { margin: 0 0 .4rem; font-size: var(--text-lg); letter-spacing: -.01em; }
.doc-row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.doc-row .doc__link { flex: 1 1 22rem; margin: 0; }
.doc-row__size { font-size: var(--text-sm); color: var(--muted); white-space: nowrap; }

/* The inline preview is a desktop convenience only, so it starts closed. */
.doc-preview { margin-top: .5rem; }
.doc-preview > summary {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  padding: .5rem .2rem; font-size: var(--text-sm); font-weight: 700; color: var(--brand-ink);
  list-style: none;
}
.doc-preview > summary::-webkit-details-marker { display: none; }
.doc-preview > summary .ico { transition: transform var(--dur-state) var(--ease); }
.doc-preview[open] > summary .ico { transform: rotate(180deg); }
@media (max-width: 860px) { .doc-preview { display: none; } }

/* Gallery. The live /galerija/ is 37 pictures in one Elementor widget.
   Two columns on a phone, not one: at one-up a 37-picture page is a 20-screen
   scroll and no picture is ever seen next to another. */
.grid-gallery {
  display: grid; gap: var(--s-2); margin-top: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 190px), 1fr));
}
.grid-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center top; }

/* Four or fewer: posters, shown whole and given room. A square crop of a
   portrait poster cuts the half of it that carries the words. */
.grid-gallery--few {
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.grid-gallery--few img {
  aspect-ratio: auto; max-height: 460px;
  object-fit: contain; object-position: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}

/* The tile is a button, not a link: it opens the picture in place and navigates
   nowhere. Without JS it stays inert and the grid reads exactly as before. */
/* min-width:0 is load-bearing. A <button> takes its min-content width from its
   contents, so wrapping a 480px picture in one stopped the checkerboard's grid
   tracks from collapsing and pushed a 360px phone 56px sideways. A bare
   <figure> shrank; a button does not unless it is told to. */
.tile {
  display: block; width: 100%; min-width: 0; max-width: 100%;
  padding: 0; border: 0; background: none;
  /* A <button> centres its contents by default. The tile wraps a picture and,
     where the client wrote one, its caption; a caption is a sentence and reads
     left-aligned like every other sentence on the page. */
  text-align: left;
  border-radius: var(--radius); overflow: hidden; cursor: zoom-in;
  transition: transform var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease);
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

/* A standalone figure keeps the spacing the bare <figure> used to own; the
   button is only the affordance wrapped around it. */
.tile--figure { margin-top: var(--s-4); overflow: visible; }
.tile--figure .figure { margin: 0; }
/* The hover state belongs to the picture, not to the button around it.
   On /parama/ each screenshot carries the instruction for that step as its
   caption, and a shadow drawn around the whole button traced the caption text
   as well - a box clamped to the words with no space between them. Moving the
   shadow onto the image leaves the caption as what it is: a sentence. */
.tile--figure:hover { transform: none; box-shadow: none; }
.tile--figure:hover .figure img { box-shadow: var(--shadow-2); }

/* Inside prose the picture keeps its own width instead of stretching to the
   column, and never eats a whole screen the way an 82vh cap does. */
.tile--inline { display: inline-block; width: auto; max-width: 100%; margin-top: var(--s-2); }
.prose__img { max-height: 520px; width: auto; }

/* Two columns, fixed, not auto-fit.

   The archive is grouped by year, and auto-fit sizes each group on its own
   count: 2021 has 33 posts and got three 394px columns, 2022 has two and got
   two 604px ones. Two years of the same archive, one above the other, with
   cards of different widths and headlines set at different measures - the page
   read as two different designs. A fixed pair means a card is the same card
   wherever it appears, and the year it belongs to changes nothing about it. */
.posts { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s-5); }
@media (max-width: 700px) { .posts { grid-template-columns: minmax(0, 1fr); } }
.post { padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); }
.post time { font-size: var(--text-sm); color: var(--muted); }
.post h3 { margin: .5rem 0 .5rem; font-size: var(--text-lg); }
.post h3 a { text-decoration: none; color: var(--ink); }
.post h3 a:hover { color: var(--brand-ink); text-decoration: underline; }

/* ==========================================================================
   News carousel

   Scroll-snap does the work: the track is a real scroll container, so a
   trackpad, a touch swipe and the arrow buttons all drive the same thing, and
   it degrades to a plain scrollable list with no JavaScript at all.
   Deliberately manual - see the note in pages.mjs.
   ========================================================================== */

.carousel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
}
.carousel__nav { display: flex; gap: .5rem; }
.carousel__btn {
  display: grid; place-items: center; width: 46px; height: 46px;
  background: var(--bg); color: var(--brand-ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease);
}
.carousel__btn:hover { background: var(--surface); border-color: var(--brand-deep); }
.carousel__btn[disabled] { opacity: .4; cursor: default; }
.carousel__btn[disabled]:hover { background: var(--bg); border-color: var(--line-strong); }

/* Stepped, not scrolled. The viewport clips; the track holds every card in one
   row and slides exactly one card per press, so three visible cards become
   cards two to four rather than jumping a whole page.
   The column width is derived from --per, so one number drives the layout and
   the step maths together. */
.carousel { --per: 3; --gap: var(--s-3); }
.carousel__viewport { overflow: hidden; margin-top: var(--s-4); }
.carousel__track {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: var(--col);
  gap: var(--gap);
  /* One step = one column plus its gap. */
  --col: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  transform: translateX(calc(-1 * var(--i, 0) * (var(--col) + var(--gap))));
  transition: transform 320ms var(--ease);
}
.carousel__item { margin: 0; }
.carousel__item > .post { height: 100%; }

@media (max-width: 900px) { .carousel { --per: 2; } }
@media (max-width: 620px) { .carousel { --per: 1; } }

@media (prefers-reduced-motion: reduce) {
  .carousel__track { transition: none; }
}

/* ==========================================================================
   Centred form block
   ========================================================================== */

.form-block { text-align: center; }
.form-block__title { font-size: var(--text-3xl); letter-spacing: -.022em; margin-bottom: var(--s-2); }
.form-block .form-card { text-align: left; }

/* ==========================================================================
   Placeholder slot (third-party widget mounts here)
   ========================================================================== */

.slot {
  margin-top: var(--s-5); padding: var(--s-6) var(--s-3);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
  background: var(--surface); text-align: center;
}
.slot > p { margin: 0; color: var(--muted); }
.slot .btn-row { justify-content: center; margin-top: var(--s-3); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--ink); color: rgba(255,255,255,.82); }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: .2em; }
.footer__in {
  max-width: var(--wide); margin-inline: auto; padding: var(--s-7) var(--gutter) var(--s-5);
  display: grid; gap: var(--s-5); grid-template-columns: 1.3fr 1fr 1fr;
}
@media (max-width: 860px) { .footer__in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__in { grid-template-columns: 1fr; } }

.site-footer .footer__in h2 { font-size: var(--text-base); font-family: var(--font-body); font-weight: 700; color: var(--white); margin: 0 0 var(--s-2); }
.footer__nav { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.footer__nav li { margin: 0; }
.footer__contact { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.footer__contact li { display: flex; gap: .7rem; align-items: flex-start; margin: 0; }
.site-footer .footer__contact .ico { margin-top: .25rem; color: var(--accent); }

.social { list-style: none; padding: 0; margin-top: var(--s-3); display: flex; gap: .4rem; }
.social li { margin: 0; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.28); }
.social a:hover { background: rgba(255,255,255,.14); }
.social svg { width: 19px; height: 19px; fill: currentColor; }

.footer__bottom {
  max-width: var(--wide); margin-inline: auto; padding: var(--s-3) var(--gutter) var(--s-5);
  border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: .5rem var(--s-3);
  font-size: calc(var(--text-sm) * .8);   /* 20% down from the body small size */
}
.footer__bottom p { margin: 0; }
.footer__bottom nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* Same 24px floor. These two sit on their own line on a phone, where a 20px
   target between the copyright line and the screen edge is the hardest thing
   on the page to hit. */
.footer__bottom nav a { display: inline-block; padding-block: 3px; }

/* ==========================================================================
   Rendered content - the components the 78 migrated pages are built from.

   The live pages are Elementor stacks of full-width banner images with the text
   baked in. These give the same words a real structure: a figure is a figure, a
   staff member is a row, a PDF report is a document.
   ========================================================================== */

/* A picture on its own. Never wider than the reading column's parent band, and
   never taller than the viewport - several sources are 700x2000 posters. */
.figure { margin: var(--s-4) 0 0; }
.figure img {
  display: block; width: 100%; height: auto;
  max-height: min(70vh, 560px); object-fit: contain; object-position: left center;
  border-radius: var(--radius); background: var(--surface);
}
/* A caption is copy, not decoration. /parama/ is five screenshots of the VMI
   declaration flow and the instruction for each step IS its caption; without
   this the page keeps the pictures and loses 56 of its 71 words. Left-aligned
   under the picture, which is where a step's instruction belongs. */
.figure figcaption {
  margin-top: .6rem;
  font-size: var(--text-sm); line-height: 1.55; color: var(--body);
}
.section > .wrap > .figure:first-child,
.section > .wrap > .tile--figure:first-child { margin-top: 0; }
.zz__media > .tile--figure { margin-top: 0; }

a.figure-link { display: block; text-decoration: none; border-radius: var(--radius); }
a.figure-link .figure { transition: transform var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease); }
a.figure-link:hover .figure { transform: translateY(-2px); box-shadow: var(--shadow-2); }

/* Media pair. Same checkerboard as the homepage, but the flip is explicit
   rather than positional, because a rendered page's rows are not all pairs. */
.zz--flip > .zz__media { order: 2; }
@media (max-width: 860px) { .zz--flip > .zz__media { order: 0; } }
.zz__body > .prose { max-width: none; }
.zz__body > .prose + .prose,
.zz__body > * + * { margin-top: var(--s-2); }
.zz__media .figure { margin: 0; }
.zz__media .figure img { max-height: 460px; object-position: center; }

/* Cards built from a heading + one paragraph. The paragraph arrives wrapped in
   .prose, which would otherwise re-impose its own measure inside the card. */
.card > .prose { max-width: none; }
.card > .prose > * + * { margin-top: var(--s-2); }
.card > .prose p { margin: 0; font-size: var(--text-sm); color: var(--body); }

.steps > li > div > .prose { max-width: none; }
.steps > li > div > .prose p { margin: 0; }
.steps > li > div > .prose p + p { margin-top: .5rem; }
.steps h4, .steps h3, .steps h5 { margin: .5rem 0 .35rem; font-size: var(--text-lg); }

/* The client's copy pastes raw URLs as their own link text
   (https://www.facebook.com/kriziucentrasraseiniai on the read-easy page).
   Those are one unbreakable 388px word and push the whole document sideways on
   a 360px phone. `break-word` only breaks when it otherwise would not fit, so
   ordinary Lithuanian is unaffected. */
.prose, .pagehero__lead, .card, .steps, .ticks { overflow-wrap: break-word; }

/* A phone number never breaks across two lines.

   Reported on the homepage: the SKPC card ends "Į SKPC galima kreiptis telefonu
   8 428 52 177", and on a desktop the "8" sat alone at the end of one line with
   the rest of the number on the next. A number a reader has to reassemble is a
   number they mistype, and this is a crisis line.

   Every visible number on the site is inside a tel: link, so one rule covers
   all of them; tools/lib/phones.mjs also joins the groups with non-breaking
   spaces, which catches any number that is ever printed without a link. Both,
   because either alone leaves a gap. */
a[href^="tel:"] { white-space: nowrap; }

/* Prose stacked in a section: keep the reading measure, keep the rhythm. */
.section > .wrap > .prose + .prose { margin-top: var(--s-3); }
.section > .wrap > h2 + .prose,
.section > .wrap > h3 + .prose { margin-top: var(--s-2); }
.section > .wrap > .prose + h2,
.section > .wrap > .prose + h3,
.section > .wrap > .cards + h2,
.section > .wrap > .figure + h2,
.section > .wrap > .tile--figure + h2 { margin-top: var(--s-6); }
.section > .wrap > .prose + .btn-row { margin-top: var(--s-4); }

/* A button that follows a bordered thing - cards, steps, contact tiles, a
   picture - needs more room than one that follows a paragraph. At the smaller
   gap it reads as the last item in the row above it rather than as the
   section's call to action, which is how it looked on /pagalba-vyrams/ under
   the three steps and on /pagalba-vaikams/ under the contact cards. */
.section > .wrap > .ticks + .btn-row,
.section > .wrap > .cards + .btn-row,
.section > .wrap > .steps + .btn-row,
.section > .wrap > .contact + .btn-row,
.section > .wrap > .grid-gallery + .btn-row,
.section > .wrap > .steps-media + .btn-row,
.section > .wrap > .figure + .btn-row,
.section > .wrap > .tile--figure + .btn-row { margin-top: var(--s-5); }

/* A paragraph after a list or a picture is a new thought, not the last item of
   what is above it. On /patyrei-smurta/ the closing line sat flush against the
   five ticks and read as a sixth one; in /pagalba-seimai/'s mediation section
   the list was pressed against the posters. Only .prose carries no top margin
   of its own, so these are the pairs that needed saying. */
.section > .wrap > .ticks + .prose,
.section > .wrap > .cards + .prose,
.section > .wrap > .contact + .prose,
.section > .wrap > .steps + .prose,
.section > .wrap > .grid-gallery + .prose,
.section > .wrap > .steps-media + .prose { margin-top: var(--s-4); }

/* Images inside migrated prose (classic-editor posts embed them inline). */
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.prose th, .prose td { padding: .6rem .75rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { background: var(--surface); font-weight: 700; color: var(--ink); }
.prose blockquote {
  margin: var(--s-3) 0; padding: var(--s-2) var(--s-3);
  border-left: 3px solid var(--brand-deep); background: var(--surface);
  color: var(--body);
}
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li + li { margin-top: .35rem; }

/* Gallery. The live /galerija/ is 37 pictures in one Elementor widget. */
.grid-gallery { list-style: none; padding: 0; }
.grid-gallery li { margin: 0; }

/* PDF reports. The card is the affordance that always works; the inline
   preview underneath is a desktop convenience, since no mobile browser renders
   a PDF inside an iframe. */
.doc { margin-top: var(--s-4); }
.doc + .doc { margin-top: var(--s-5); }
/* Inside the list the grid gap owns the rhythm, and each document keeps its
   own preview toggle attached to it rather than floating between two rows. */
.docs > .doc, .docs > .doc + .doc { margin-top: 0; }

.doc__link {
  display: flex; align-items: center; gap: .8rem;
  padding: .95rem 1.1rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  background: var(--bg); color: var(--brand-ink);
  font-weight: 700; text-decoration: none;
  overflow-wrap: anywhere;
  transition: border-color var(--dur-state) var(--ease),
              background var(--dur-state) var(--ease),
              transform var(--dur-state) var(--ease);
}
.doc__link:hover, .doc__link:focus-visible {
  border-color: var(--brand-deep); background: var(--surface); transform: translateY(-1px);
}
.doc__link .ico { color: var(--brand-deep); flex: 0 0 20px; }

.doc-embed {
  margin-top: .75rem;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); overflow: hidden;
}
.doc-embed iframe { display: block; width: 100%; height: min(70vh, 720px); border: 0; }

/* No mobile browser renders a PDF in an iframe; an 80vh empty box is worse than
   nothing, and the card above it already does the job. */
@media (max-width: 860px) { .doc-embed { display: none; } }

.embed {
  margin-top: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
.embed iframe { display: block; width: 100%; height: min(80vh, 900px); border: 0; }

/* The hero already ends on a rule and a colour change, so a full section's worth
   of padding under it opens every interior page with 120px of nothing. */
.pagehero + .section { padding-top: var(--s-6); }

/* Page hero additions for rendered pages. */
.pagehero__meta { margin: var(--s-2) 0 0; font-size: var(--text-sm); color: var(--muted); }
.pagehero__lead > p { margin: 0; }
.pagehero__lead > p + p { margin-top: var(--s-2); }
.pagehero__lead strong { font-weight: 400; }   /* the source bolds whole leads */

/* News archive: the post card carries an h2 here, an h3 in the carousel. */
.post h2 { margin: .5rem 0 0; font-size: var(--text-lg); }
.post h2 a { text-decoration: none; color: var(--ink); }
.post h2 a:hover { color: var(--brand-ink); text-decoration: underline; }

@media (max-width: 700px) {
  .doc-embed iframe, .embed iframe { height: 60vh; }
  .figure img { max-height: 70vh; }
}

/* ==========================================================================
   Lightbox

   A native <dialog>: the browser supplies the top layer, the modal focus trap
   and the focus return, none of which are worth reimplementing. The picture is
   sized to the viewport rather than the column, which is the entire point -
   /galerija/ ships 26 pictures with a 1360-2400px rung that nothing else on the
   site is wide enough to show.
   ========================================================================== */

.lightbox {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0;
  background: var(--overlay); color: var(--white);
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(15, 26, 43, .93); }
.lightbox__in { display: flex; flex-direction: column; height: 100%; }

/* The single explicit track matters: against an auto-sized grid area a
   percentage max-height on the picture is circular and gets dropped, and a
   2400px photograph then runs straight off the bottom of the screen. */
.lightbox__stage {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: var(--s-2);
}
.lightbox__img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; border-radius: var(--radius-sm);
}

/* The caption under the enlarged picture. Centred on its own line between the
   picture and the arrows, so stepping through /parama/ reads as five steps. */
.lightbox__caption {
  margin: var(--s-2) var(--gutter) 0; padding: .5rem .9rem;
  width: fit-content; max-width: min(70ch, 100%); align-self: center;
  border-radius: var(--radius-sm);
  /* Its own fill, for the same reason .lightbox__count has one: the veil
     behind it is semi-transparent, and text on an unresolvable background is
     the one pair the contrast gate cannot check. */
  background: var(--ink); color: var(--white);
  text-align: center; font-size: var(--text-sm); line-height: 1.55;
}
.lightbox__caption[hidden] { display: none; }

.lightbox__bar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-2) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom));
}
/* The fill is declared, not inherited from the veil: an undeclared background
   is an unresolvable pair for the contrast gate, and white-on-unknown is the
   one thing it cannot check. */
.lightbox__count {
  min-width: 6ch; padding: .35rem .8rem; border-radius: var(--radius-pill);
  background: var(--ink); color: var(--white);
  font-size: var(--text-sm); font-weight: 700; text-align: center;
}

/* White fill, ink glyph: the one pairing that stays legible whatever the
   photograph behind it happens to be. */
.lightbox__btn {
  display: grid; place-items: center;
  width: 48px; height: 48px; flex: 0 0 48px; padding: 0;
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--white); color: var(--ink);
  transition: background var(--dur-state) var(--ease), transform var(--dur-state) var(--ease);
}
.lightbox__btn:hover { background: var(--surface); color: var(--ink); }
.lightbox__btn:disabled { opacity: .35; cursor: default; }
.lightbox__close { position: absolute; top: var(--s-2); right: var(--gutter); z-index: 2; }

/* ==========================================================================
   Chips - year navigation for the report and project pages, and the archive
   filter. Plain links where they navigate, buttons where they filter.
   ========================================================================== */

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--s-4); }
.chip {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: .4rem 1rem; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--brand-ink); border: 1px solid var(--line-strong);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease);
}
.chip:hover { background: var(--white); color: var(--brand-ink); border-color: var(--brand-deep); }
.chip[aria-current="page"],
.chip[aria-pressed="true"] { background: var(--brand-deep); color: var(--white); border-color: var(--brand-deep); }

/* ==========================================================================
   Projects - the year pages are one picture plus one description, repeated.

   Read one under another, not side by side. A project's description is a
   numbered list of objectives that runs to a dozen lines, and three of those
   in 300px columns was three unequal stacks of small print with half a screen
   of white space beside the shortest. In a row the list has the width it
   needs, the picture has the size it was made at, and the page reads in the
   order the projects were written.

   The picture changes sides down the page and a rule separates each from the
   next, so where one project ends and the next begins is never in doubt. The
   artwork carries baked-in text, so it is contained, never cropped.
   ========================================================================== */

.projects { display: grid; margin-top: var(--s-5); }

.pcard {
  display: grid;
  /* minmax(0,…) on both: a long unbroken URL in a description otherwise
     widens its track and pushes the row past the viewport. */
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-5);
  align-items: start;
  padding: var(--s-6) 0;
}
.pcard:first-child { padding-top: 0; }
.pcard:last-child { padding-bottom: 0; }
.pcard + .pcard { border-top: 1px solid var(--line); }

/* The checkerboard. Even rows put the picture on the right. */
.pcard:nth-child(even) > .pcard__side { order: 2; }

.pcard__side { display: grid; gap: var(--s-3); align-content: start; justify-items: start; }

/* The frame hugs the picture rather than boxing it into a fixed shape. These
   illustrations are landscape, square and portrait in the same year, and a
   16:10 box gave the portrait ones a hand's width of grey either side. */
.pcard__media {
  width: fit-content; max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden;
}
.pcard__media img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 420px;
}

/* The funders' credit. Small, quiet, and on a white ground: every one of these
   is a ministry or EU logo drawn for print, and stretched to the width of the
   illustration above it, it outshouted the project it paid for. */
.pcard__logos {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
}
.pcard__logos li { margin: 0; }
.pcard__logos img {
  display: block; width: auto; height: auto;
  /* Big enough to read. These are ministry, EU and programme marks with the
     scheme's name set inside them, and at thumbnail size the words in them -
     which is the part that carries the obligation to credit - were illegible. */
  /* min(): at 320px the column is narrower than the logo, and a fixed cap
     pushed the whole row off the side of the screen. */
  max-width: min(100%, 320px); max-height: 180px; object-fit: contain;
}

/* A description too long to sit beside a picture.
   The row stops being a two-column grid and the picture floats instead, so the
   text starts alongside it and carries on underneath once it has cleared. Half
   the rows on /projektai/2021-2/ run past a thousand characters against an
   illustration a third as tall; in a fixed column that was a tall block of
   nothing beside the picture and a narrower column of words than the row had
   room for. */
.pcard--wide { display: block; }
.pcard--wide > .pcard__side {
  float: left; width: 40%; max-width: 460px;
  margin: 0 var(--s-5) var(--s-3) 0;
}
.pcard--wide:nth-child(even) > .pcard__side {
  float: right;
  margin: 0 0 var(--s-3) var(--s-5);
}
/* The row has to contain its own float, or the rule under it is drawn through
   the picture and the next project starts beside it. */
.pcard--wide::after { content: ''; display: block; clear: both; }

.pcard__body > :first-child { margin-top: 0; }
.pcard__body > .prose { max-width: none; }
.pcard__body > .prose > * + * { margin-top: var(--s-2); }
.pcard__body > .btn-row { margin-top: var(--s-3); }

/* One column on a tablet and below: at half a phone's width the picture is a
   thumbnail and the objectives are two words per line. */
@media (max-width: 860px) {
  .pcard { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-5) 0; }
  .pcard:nth-child(even) > .pcard__side { order: 0; }

  /* Nothing floats at this width: a 40% picture beside text is a thumbnail
     beside two words per line. */
  .pcard--wide > .pcard__side,
  .pcard--wide:nth-child(even) > .pcard__side {
    float: none; width: auto; max-width: none; margin: 0 0 var(--s-3);
  }
}

/* ==========================================================================
   News archive - grouped by year, filtered by the same chips.
   ========================================================================== */

.archive__year { margin-top: var(--s-6); }
.archive__year:first-of-type { margin-top: 0; }
.archive__year > h2 { margin-top: 0; }
.posts .post[hidden], .archive__year[hidden] { display: none; }

/* Prev / next at the foot of a post: 33 of them currently end in the footer. */
.postnav { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-top: var(--s-5); }
.postnav__item {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: var(--s-3); text-decoration: none;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  color: var(--ink); font-weight: 700;
  transition: border-color var(--dur-state) var(--ease), background var(--dur-state) var(--ease);
}
.postnav__item:hover { border-color: var(--brand-deep); background: var(--surface); color: var(--ink); }
.postnav__item .ico { flex: 0 0 20px; margin-top: .18rem; color: var(--brand-deep); }
.postnav__item--next { flex-direction: row-reverse; text-align: right; }

/* ==========================================================================
   Back to top - several migrated pages run past 3000px.
   ========================================================================== */

.to-top {
  position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 55;
  display: grid; place-items: center;
  width: 48px; height: 48px; padding: 0; border: 0;
  border-radius: var(--radius-pill); cursor: pointer;
  background: var(--brand-deep); color: var(--white); box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--dur-state) var(--ease),
              transform var(--dur-state) var(--ease),
              visibility var(--dur-state) var(--ease);
}
.to-top[data-on="true"] { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--brand-ink); color: var(--white); }

/* A numbered run of pictures. The ordinal is a CSS counter: the list is
   already semantically ordered, so the number is presentation, not copy. */
.steps-media {
  list-style: none; padding: 0; margin-top: var(--s-5);
  counter-reset: shot;
  display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.steps-media > li { counter-increment: shot; margin: 0; position: relative; }
.steps-media > li::before {
  content: counter(shot);
  position: absolute; top: -.6rem; left: -.6rem; z-index: 2;
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: var(--radius-pill);
  background: var(--brand-deep); color: var(--white);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700;
  box-shadow: var(--shadow-1);
}
.steps-media .figure { margin: 0; }
.steps-media .figure img { max-height: none; border: 1px solid var(--line); }
.steps-media > li > .tile--figure { margin-top: 0; }

/* A page hero carrying only a breadcrumb and an h1 does not need a full band;
   about forty pages have nothing else to put in it. */
.pagehero--bare .pagehero__in { padding-block: var(--s-4) var(--s-5); }

/* Native constraint validation, so the browser supplies the message in the
   visitor's own language and we invent no error copy. :user-invalid only fires
   after the field has actually been interacted with. */
.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid { border-color: var(--crisis); }

/* Hover is a mouse affordance. On a touch screen the state sticks after a tap
   and the card is left visibly lifted with nothing pointing at it. */
@media (hover: none) {
  .card:hover, .tile:hover, .person:hover,
  .doc__link:hover, .postnav__item:hover, a.figure-link:hover .figure {
    transform: none; box-shadow: none;
  }
}

/* ==========================================================================
   Motion - state changes only. No scroll reveals anywhere: content is visible
   on paint, which is the specific defect this rebuild exists to fix.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   Easy-read pages
   --------------------------------------------------------------------------
   /lengvai-skaitomas-tekstas/ is written for people with cognitive
   disabilities, and it is the one page on the site whose form is part of its
   content: short lines, big type, one idea beside one picture. The switch is a
   field on the page (see epkc_easy_read), so this applies wherever the client
   turns it on and survives a rename.

   Everything below is spacing and size. Not one word, heading or picture
   differs from any other page - only how much room they are given.
   ========================================================================== */

.easy-read main { font-size: 1.25rem; line-height: 1.8; }
.easy-read .pagehero__in > h1 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.25; }

/* One idea per row, with air around it. The bands already alternate tint;
   what they lacked was height. */
.easy-read .section { padding-top: var(--s-7); padding-bottom: var(--s-7); }
.easy-read .zz { gap: var(--s-6); align-items: center; }
.easy-read .zz__body > h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.3; margin-bottom: var(--s-3); }

/* Lists carry most of this page. A marker the reader can see, an indent that
   does not swallow it, and a full line of space between items. */
.easy-read .prose ul, .easy-read .prose ol { padding-left: 1.4em; }
.easy-read .prose li { margin-top: .75rem; padding-left: .25em; }
.easy-read .prose li::marker { color: var(--brand-ink); font-size: 1.1em; }
.easy-read .prose > * + * { margin-top: var(--s-3); }

/* The pictures are pictograms, mostly line art on white. Boxed and capped they
   sit at a consistent size down the page instead of one being a full-bleed
   photograph and the next a phone icon four times its height. */
.easy-read .zz__media .figure img,
.easy-read .zz__media img {
  max-height: 340px; object-fit: contain; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius);
}

@media (max-width: 860px) {
  .easy-read main { font-size: 1.1875rem; }
  .easy-read .section { padding-top: var(--s-6); padding-bottom: var(--s-6); }
  .easy-read .zz { gap: var(--s-4); }
  .easy-read .zz__media .figure img,
  .easy-read .zz__media img { max-height: 280px; }
}