/*
Theme Name: Autostatyba
Theme URI: https://autostatyba.lt/
Author: Admoon
Description: Block theme for Autostatyba. Values in theme.json are derived from the
             approved Figma design (file 9gElnOrEUBLxHBJnQKBBgn), not hand-picked.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Version: 0.5.0
License: GPL-2.0-or-later
Text Domain: autostatyba
*/

/* ==========================================================================
   Autostatyba design stylesheet

   Every value here was read from the Figma node or measured off the 1x design
   render - none of it is eyeballed. Desktop values are exact at a 1440px
   viewport, which is the width `./dc verify` compares against.

   Responsive policy (written once, on purpose - there is NO mobile design, so
   these rules are derived and must stay consistent across all nine pages):

     >= 1440   exact design: 132px gutter, 1176px content
     1200-1439 gutter shrinks to 64px, everything else unchanged
     < 1280    the pill stops fitting: nav becomes a full-screen overlay behind a
               hamburger (core's navigation overlay), bar is logo + toggle only
     1024-1199 3-up card grids stay 3-up, type steps down one notch
     820-1023  card grids go 2-up
     640-819   stats + image stack; card grids go 1-up
     < 640     single column throughout, type at its smallest step

   Hard gate for every breakpoint: zero horizontal overflow
   (scripts/overflow-sweep.js).
   ========================================================================== */

:root {
  --as-ink:        #11181f;
  --as-ink-soft:   #383838;
  --as-muted:      #99999b;
  --as-line:       #bdbdbd;
  --as-surface:    #f9f9f9;
  --as-surface-2:  #f0f0f0;
  --as-white:      #ffffff;
  --as-accent:     #f47c12;
  --as-accent-2:   #f2c300;
  --as-hairline:   #f9fafa;

  --as-gutter:  132px;
  --as-content: 1176px;

  /* CONSISTENCY PASS (2026-10-01). The client rejected the type and spacing as built: the design
     used 27 font sizes and 16 section paddings, and a 1:1 build reproduced every one of them.
     Until Paulius revises the design, each ROLE has exactly one value, set here. Desktop takes the
     scale this theme already used from 1199px down (56 / 40 / 20), so no new values were invented;
     the design's 72 / 48 / 22 are recorded in docs/VERIFY-BASELINE.md as deliberate divergences.
     Media queries further down still step these down for smaller screens. */
  --as-fs-h1:    48px;  --as-lh-h1:    56px;   /* page and hero titles */
  --as-fs-h2:    36px;  --as-lh-h2:    44px;   /* section headings */
  --as-fs-h3:    24px;  --as-lh-h3:    32px;   /* card and block titles */
  --as-fs-h4:    20px;  --as-lh-h4:    28px;   /* small card titles */
  --as-fs-lead:  20px;  --as-lh-lead:  32px;   /* intro paragraphs */
  --as-fs-body:  16px;  --as-lh-body:  26px;   /* running text */
  --as-fs-small: 14px;  --as-lh-small: 22px;   /* UI, meta, labels - 1.57, over WCAG 1.4.8's 1.5 */
  --as-fs-label: 12px;  --as-lh-label: 16px;   /* tags on photos only */

  /* THE SCALE IS 12 14 16 20 24 36 48 - nothing renders anywhere else (tools/type-scale-check.js
     fails the build if it does). Round two (2026-10-01) moved the headings from 56/40 to 48/36:
     56/40 were only this theme's own tablet values, while 48/36 are points on both GOV.UK's and
     Tailwind's published scales, and the client's complaint was that text was too big. */

  /* One vertical rhythm for content sections: the value the design itself used most (77-84px). */
  --as-section-y: 80px;

  /* Secondary text - values, card copy, subtitles. Replaces #808080 / #99999b, which measured 2.8-3.9:1
     on white and read as washed out rather than quiet. #5c636a is 6.0:1. */
  --as-text-soft: #5c636a;
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */

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

body {
  margin: 0;
  /* The header is absolutely positioned over the hero; this is its containing block. */
  position: relative;
  background: var(--as-surface);
  color: var(--as-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

/* Blocks bring their own margins; this design positions everything explicitly. */
h1, h2, h3, h4, h5, h6, p, figure, ul, ol, dl, dt, dd { margin: 0; }
dd { margin-inline-start: 0; }
.wp-block-group, .wp-block-image, .wp-block-post-template { margin: 0; }

/* The container. 1440 - (132 * 2) = 1176, exactly the design's content width. */
.as-container {
  width: 100%;
  max-width: calc(var(--as-content) + var(--as-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--as-gutter);
}

/* --------------------------------------------------------------------------
   Buttons - three sizes, all #f2c300 with black Inter 600 label
   -------------------------------------------------------------------------- */

.as-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--as-accent-2);
  color: #000000;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  transition: filter .15s ease;
}

.as-btn:hover { filter: brightness(0.94); }

/* The label is its own box in the design (a text node with its own line-height), so it is
   its own element here too - otherwise the only measurable text box is the whole button and
   every gap above it reads short by the button's padding. */
.as-btn > span { display: block; line-height: inherit; }

/* Header pill button - 153x42, r10, Inter 600 14/22.
   min-width, not width: Chrome sets "Aptarti projektą" ~2px narrower than Figma does, and the
   button is a fixed size in the design. It still grows if the label is ever edited. */
.as-btn--nav {
  min-width: 153px;
  height: 42px;
  padding-inline: 23px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 22px;
}

/* Hero button - 225x58, r12.05, Inter 600 18.56/24.75, 24.75px side padding */
.as-btn--hero {
  height: 56px;
  padding-inline: 28px;
  border-radius: 12px;
  font-size: var(--as-fs-body);
  line-height: 24px;
}

/* CTA band button - 222x56, r10, Inter 600 16/26, arrow at 5px gap */
/* Same shape as .as-btn--hero since 2026-10-01: one primary button on the site, not two. */
.as-btn--cta {
  height: 56px;
  padding-inline: 28px;
  border-radius: 12px;
  font-size: var(--as-fs-body);
  line-height: 24px;
  gap: 8px;
}

.as-btn--cta svg { flex: none; }

/* --------------------------------------------------------------------------
   Header - the "Meniu" component: 1440x102, floating over the hero
   -------------------------------------------------------------------------- */

.as-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
}

/* A scrim behind the header on hero pages, so the logo does not depend on the photograph. Swapping
   the variant alone only moved the problem: a single project's hero is a client-uploaded photo with
   no scrim by design, so a LIGHT photo failed the LIGHT wordmark (measured 2.44). No variant choice
   survives both, because the client picks the photo - so the backdrop is made deterministic
   instead. Confined to the top 160px and fading out, leaving the hero's own brightness intact. */
body.as-on-hero .as-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 160px;
  background: linear-gradient(180deg, rgba(17, 17, 15, .55), rgba(17, 17, 15, 0));
  pointer-events: none;
  z-index: -1;
}

.as-header__inner {
  display: flex;
  align-items: center;
  height: 102px;
}

/* Two logo variants, because the design uses both: the wordmark is #f4f4f4 over the dark hero
   and #181818 on light inner pages. The orange mark is identical in both. Not `currentColor` -
   an icon whose colour is inherited is exactly how icons silently end up the wrong colour;
   these are two explicit assets swapped by context. */
.as-header__logo { display: block; width: 185px; height: 29px; }
.as-header__logo svg { width: 185px; height: 29px; display: block; }
/* Qualified by the parent on purpose: a bare `.as-header__logo--onDark` (0,1,0) loses to
   `.as-header__logo span` (0,1,1) and BOTH variants render, stacked. */
.as-header__logo .as-header__logo--onDark { display: none; }
.as-header__logo .as-header__logo--onLight { display: block; }
/* Every page whose header sits over a hero photo, not just the front page - see the body_class
   filter in functions.php. */
body.as-on-hero .as-header__logo .as-header__logo--onDark { display: block; }
body.as-on-hero .as-header__logo .as-header__logo--onLight { display: none; }

/* Nav pill - 604x52, r36, #f4f4f4, padding 15/39/16/40, 31px between links.
   Selectors are deliberately over-specific: core's `.wp-block-navigation.is-layout-flex`
   sets its own gap at (0,2,0), so a bare `.as-nav` would silently lose. */
.as-header nav.as-nav {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 15px 39px 16px 40px;
  background: #f4f4f4;
  border-radius: 36px;
  /* The design's gaps either side of the pill are 114 / 121, not 1:1 - so this is a
     proportional margin (114/1176) plus auto on the right, not space-between. Percentage
     keeps it fluid; below 1280 the pill wraps to its own row instead of cramming. */
  margin: 0 auto 0 9.6939%;
}

.as-header .as-nav .wp-block-navigation__container {
  display: flex;
  align-items: center;
  gap: 31px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.as-header .as-nav .wp-block-navigation-item__content,
.as-header .as-nav a {
  color: var(--as-ink-soft);
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  white-space: nowrap;
  text-decoration: none;
}

.as-header .as-nav a:hover { color: var(--as-ink); }

/* Core wraps each label in an inline <span>. An inline box is measured from font metrics
   (~17px at 14px Inter), not from line-height, so every nav item and footer link reads 4px
   short to any measurement pass. Block-level makes the box the line box. Purely a
   measurability fix - nothing moves on screen. */
.as-header .as-nav .wp-block-navigation-item__label { display: block; }

/* The CTA lives in the nav so it can be the last item of the mobile overlay. The design's
   desktop pill has no such item, so it is hidden there. */
.as-header .as-nav .as-nav__cta { display: none; }

/* Same treatment: present in the markup so the mobile overlay can show it, hidden on desktop
   where the logo is always reachable. See the note in patterns/header.php. */
.as-header .as-nav .as-nav__home { display: none; }

/* --------------------------------------------------------------------------
   Hero - 1440x790, photo + baked 40% #11110f overlay (composited in Figma)
   -------------------------------------------------------------------------- */

.as-hero {
  position: relative;
  /* CONSISTENCY PASS (2026-10-01), for all three photo heroes: never taller than 88% of the window,
     so the next section always shows. The client reads the site in a ~730px-tall browser, where
     the design's fixed 790 filled the whole screen and hid everything below it. At 900px+ tall
     windows nothing changes. */
  min-height: min(790px, 88svh);
  background-color: var(--as-ink);
  /* Relative to this stylesheet, i.e. the theme root - so it survives any install path. */
  background-image: url("assets/img/hero.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

.as-hero__inner { padding-top: 192px; padding-bottom: var(--as-section-y); }

.as-hero__title {
  /* Figma text box is fixed-width (textAutoResize: HEIGHT) at 769px - that width IS what
     produces the design's three lines, so it is a measured value, not a guess. */
  max-width: 640px;
  margin: 0;
  color: #f4f4f4;
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-h1);
  font-weight: 500;
  line-height: var(--as-lh-h1);
  letter-spacing: 0;
}

.as-hero__text {
  max-width: 600px;
  margin: 24px 0 0;
  color: #f4f4f4;
  font-size: var(--as-fs-lead);
  font-weight: 400;
  line-height: var(--as-lh-lead);
}

.as-hero__actions { margin-top: 66px; }

/* --------------------------------------------------------------------------
   Stats - 4 stacked rows on the left, 686x456 photo on the right
   Left column 490px + right column 686px = 1176px, no gap.
   -------------------------------------------------------------------------- */

.as-stats { padding-block: var(--as-section-y); }

.as-stats__grid {
  display: grid;
  grid-template-columns: 490px 686px;
  align-items: center;
}

.as-stats__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.as-stat {
  display: flex;
  align-items: flex-start;
  gap: 36px;
}

.as-stat__icon {
  flex: none;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  background: var(--as-surface-2);
  border: 1.18px solid var(--as-hairline);
  border-radius: 7.1px;
}

.as-stat__icon svg { width: 38px; height: 38px; display: block; }

.as-stat__value {
  margin: 0;
  color: var(--as-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-h2);
  font-weight: 600;
  line-height: var(--as-lh-h2);
  white-space: nowrap;
}

/* The design overlaps the two text boxes by 6px; keep the glyphs where they are. */
.as-stat__label {
  margin: -6px 0 0;
  color: var(--as-text-soft);
  font-size: 16px;
  font-weight: 400;
  line-height: 24.86px;
}

.as-stats__media {
  width: 686px;
  height: 456px;
  border-radius: 10px;
  overflow: hidden;
}

.as-stats__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   Section heading - 48/63, used by "Ką darome" (accent) and
   "Naujausi projektai" (white, on the dark band)
   -------------------------------------------------------------------------- */

.as-h2 {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-h2);
  font-weight: 500;
  line-height: var(--as-lh-h2);
}

.as-h2--accent { color: var(--as-accent); }
.as-h2--onDark { color: var(--as-white); }

/* --------------------------------------------------------------------------
   Services - "Ką darome": heading + three 374x403 cards
   -------------------------------------------------------------------------- */

.as-services { padding-top: var(--as-section-y); padding-bottom: var(--as-section-y); }

.as-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 27px;
  margin-top: 37px;
}

.as-svc {
  display: flex;
  flex-direction: column;
  /* height: 403px removed 2026-10-01 - the row sets the height, so short texts no longer leave a
     dead band above the arrow. Cards in a row still match: grid items stretch. */
  padding: 49px 47px 55px 49px;
  background: #fdfcfd;
  border-radius: 10px;
}

.as-svc__icon {
  flex: none;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: var(--as-surface-2);
  border-radius: 6px;
}

.as-svc__icon svg { width: 32px; height: 32px; display: block; }

.as-svc__title {
  margin: 40px 0 0;
  color: var(--as-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-h3);
  font-weight: 700;
  line-height: var(--as-lh-h3);
}

/* The designer set each of these three text boxes to its own fixed width - 247 / 246 / 275 -
   and those widths are what produce 4 / 4 / 3 lines. A single column width wraps card 1 to
   three lines and the card reads visibly differently, so the widths are honoured per card. */
.as-svc__text {
  max-width: 247px;
  margin: 23px 0 0;
  color: var(--as-text-soft);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.as-svc__text--wide { max-width: 275px; }

.as-svc__more {
  margin-top: auto;
  margin-left: auto;
  display: block;
  width: 24px;
  height: 24px;
}

.as-svc__more svg { width: 24px; height: 24px; display: block; }

/* --------------------------------------------------------------------------
   Projects - the dark band (#11181f, 1440x693)
   -------------------------------------------------------------------------- */

.as-projects {
  background: var(--as-ink);
  padding-top: var(--as-section-y);
  padding-bottom: var(--as-section-y);
}

.as-projects__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.as-projects__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--as-accent);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.as-projects__all svg { width: 20px; height: 20px; flex: none; display: block; }
.as-projects__all:hover { filter: brightness(1.15); }

/* Same treatment as the filter pills: a real control at 24px tall, which is fine for a cursor and
   half the 44px a finger needs. The hit area grows, the link does not move or change. */
@media (pointer: coarse) {
  .as-projects__all { position: relative; }

  .as-projects__all::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}

.as-projects__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 27px;
  margin-top: 49px;
  list-style: none;
  padding: 0;
}

/* Card - 374x374, r10, 1px #2c343a, 8px inner frame around a 356x220 photo.
   The card IS the Query Loop's <li>: an extra wrapper inside it would leave the li as an
   unstyled box of identical size, which reads to any measurement pass as a card with no
   background and no border. */
.as-projects__grid > li {
  display: flex;
  flex-direction: column;
  height: 374px;
  margin: 0;
  padding: 8px 8px 23px;
  background: var(--as-ink);
  border: 1px solid #2c343a;
  border-radius: 10px;
  overflow: hidden;
}

.as-pcard__media {
  flex: none;
  height: 220px;
  border-radius: 6px;
  overflow: hidden;
}

.as-pcard__media img,
.as-pcard__media .wp-post-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The radius lives on the wrapper AND the image: a measurement pass matches the <img>,
     and an <img> with square corners inside a rounded wrapper reads as a wrong radius. */
  border-radius: 6px;
}

.as-pcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-left: 23px;
  padding-right: 24px;
}

.as-pcard__title {
  margin: 20px 0 0;
  color: var(--as-white);
  font-family: Inter, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.as-pcard__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* "Jonava, 2018" is city + year META, not the excerpt. The excerpt is the card description on
   the Projektai archive, so the two cannot share a field. Block bindings only bind one value
   per attribute, hence two bound paragraphs and a CSS comma rather than one combined string. */
.as-pcard__meta {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
  color: var(--as-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  white-space: nowrap;
  overflow: hidden;
}

.as-pcard__meta p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.as-pcard__city:not(:empty)::after { content: ","; }
.as-pcard__meta p:empty { display: none; }

/* "Plačiau →" - 89x28, r2, 1px #f2c300, transparent fill */
.as-pcard__more {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 89px;
  height: 32px;
  padding-inline: 12px;
  border: 1px solid var(--as-accent-2);
  border-radius: 2px;
  color: var(--as-accent-2);
  font-size: var(--as-fs-small);
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
}

.as-pcard__more:hover { background: rgba(242, 195, 0, .12); }

.as-projects__empty {
  margin-top: 49px;
  color: var(--as-text-soft);
  font-size: 16px;
  line-height: 24px;
}

/* Core's flow layout emits `.wp-block-*.is-layout-flow > :first-child { margin-block-start:0 }`
   at specificity (0,2,0), which silently eats the top margin of any first child. Three of this
   design's gaps live on first children, so they have to be re-asserted louder. Symptom when
   this is missing: the whole page below the projects band sits 50px too high. */
.as-projects .as-projects__grid { margin-top: 49px; }
.as-projects .as-projects__empty { margin-top: 49px; }
.as-projects__grid > li > .as-pcard__body > .as-pcard__title { margin-top: 20px; }

/* The card is a Query Loop, so the core block wrappers have to be flattened onto the
   design's geometry rather than fought with. */
.as-pcard__media { margin: 0; }
.as-pcard__media a { display: block; width: 100%; height: 100%; }

.as-pcard__title a { color: inherit; }
.as-pcard__title a:hover { color: var(--as-accent-2); }

/* --------------------------------------------------------------------------
   CTA band - 1174x168 white card on #f9f9f9, 48px above and below
   -------------------------------------------------------------------------- */

.as-cta { padding-block: var(--as-section-y); }

.as-cta__box {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 40px;
  background: var(--as-white);
  border: 1px solid var(--as-hairline);
  border-radius: 12px;
}

.as-cta__icon {
  flex: none;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: var(--as-accent);
  border-radius: 8px;
}

.as-cta__icon svg { width: 32px; height: 32px; display: block; }

.as-cta__body { flex: 1; min-width: 0; }

.as-cta__title {
  margin: 0;
  color: var(--as-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-h3);
  font-weight: 700;
  line-height: var(--as-lh-h3);
}

.as-cta__text {
  max-width: 440px;
  margin: 4px 0 0;
  color: var(--as-text-soft);
  font-size: var(--as-fs-body);
  font-weight: 400;
  line-height: var(--as-lh-body);
}

/* --------------------------------------------------------------------------
   Footer - redesigned 2026-10-01 (consistency pass, second round)

   The design's footer read as "not bad, not good, odd in a way you cannot point at". Measured, the
   oddness was: navigation and contacts pushed to the far right behind an empty middle, a near-white
   divider louder than any text in the band, a light grey LinkedIn tile sitting on the dark like a
   sticker, and the company's one descriptive line set as 13px small print.

   Rebuilt on what well-made footers share (Linear and Stripe, and Skanska as a construction peer):
   every column on one even grid, ONE heading style and ONE link style, a divider you barely see,
   the statement on the left in larger type, the social link as a plain icon in the bottom bar.
   The exported icons hard-code their fills, so they are recoloured with CSS `fill`, which beats
   an SVG presentation attribute - the asset files themselves are untouched.
   -------------------------------------------------------------------------- */

.as-footer {
  background: var(--as-ink);
  padding-top: var(--as-section-y);
  padding-bottom: 32px;
}

.as-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  column-gap: 64px;
  align-items: start;
}

.as-footer__brand         { grid-column: 1; }
.as-footer__col--nav      { grid-column: 2; }
.as-footer__col--contact  { grid-column: 3; }

.as-footer__logo { display: block; width: 176px; }
.as-footer__logo svg,
.as-footer__logo img { display: block; width: 176px; height: auto; }

.as-footer__about {
  max-width: 420px;
  margin: 24px 0 0;
  color: #e6e9ec;
  font-size: var(--as-fs-lead);
  font-weight: 400;
  line-height: var(--as-lh-lead);
}

.as-footer__title {
  margin: 0 0 20px;
  color: var(--as-white);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-small);
  font-weight: 600;
  line-height: var(--as-lh-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.as-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.as-footer__list a,
.as-contact__text,
.as-contact__text a {
  color: #a3abb3;
  font-size: var(--as-fs-body);
  font-weight: 400;
  line-height: var(--as-lh-body);
}

.as-footer__list a { display: block; }
.as-footer__list a:hover,
.as-contact__text a:hover { color: var(--as-white); }

/* Six items in two columns of three, reading down then across in the header's own order. */
.as-footer__list--nav {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 12px 48px;
}

.as-contact {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

/* The accent marks what each line is; the text stays the link grey. */
.as-contact__icon { display: block; width: 16px; height: 16px; margin-top: 5px; color: var(--as-accent); }
.as-contact__icon svg { display: block; width: 16px; height: 16px; }
.as-contact__icon svg path { fill: currentColor; }

/* Same inline-box cause as the nav labels: the tel:/mailto: links report a 17px font-metric
   box instead of the line box. */
.as-contact__text a { display: block; }
.as-contact__text { max-width: 260px; margin: 0; }

.as-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.as-footer__legal {
  display: flex;
  align-items: center;
  gap: 32px;
}

.as-footer__bottom p,
.as-footer__bottom a {
  margin: 0;
  color: #7d858d;
  font-size: var(--as-fs-small);
  font-weight: 400;
  line-height: var(--as-lh-small);
}

.as-footer__bottom a:hover { color: var(--as-white); }

/* LinkedIn: a plain icon in the bottom bar, the grey of the links beside it. */
.as-footer__bottom .as-social {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: #a3abb3;
}

.as-footer__bottom .as-social:hover { color: var(--as-white); }
.as-social svg { display: block; width: 20px; height: 20px; }
.as-social svg path { fill: currentColor; }

/* --------------------------------------------------------------------------
   Inner page head - breadcrumb + title + lead (+ filters on Projektai)
   Header is absolute over the page, so 173px is measured from the page top.
   -------------------------------------------------------------------------- */

.as-page-head { padding-top: 173px; }

/* The current-page crumb is the post title, and a real news headline here is 100 characters
   ("IŠSKIRTINIAI „PROHAUS“ INTERJERAI: NUO NAUJOS STATYBOS NAMŲ IKI..."). At 360px it pushed the
   document 8px wider than the viewport - the only genuine horizontal scroll left on the site.
   A breadcrumb should truncate rather than set the page width, so the last crumb shrinks and
   ellipsises while the "Pagrindinis" link and the arrow keep their size. Nothing changes at any
   width where the title already fits. */
.as-crumbs > [aria-current="page"] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.as-crumbs {
  display: flex;
  align-items: center;
  min-width: 0;
  /* The design is one text string, so the arrow is separated by ordinary word spaces, not an
     8px flex gap - that read 6px too wide across the trail. */
  gap: 5px;
  color: #888889;
  font-size: 16px;
  font-weight: 400;
  /* Figma's box is 20px tall around 16px text; the whole page below inherits this 4px. */
  line-height: 20px;
}

.as-crumbs a:hover { color: var(--as-ink); }
/* #292d30, not --as-ink (#11181f). Measured off the design render on Projektai, Naujienos and
   Karjera - the current-page segment is the same #292d30 the values band uses for its titles.
   This was noted as R11 while scouting Karjera, judged "not worth a change on its own", and then
   forgotten. tools/ink-check.js found it independently: the breadcrumb row measured 1.083 against
   ~1.04 for every other 16px block on the page, because too-dark text lays down more ink than the
   design's. It affects EVERY inner page, so it is fixed on the shared class deliberately. */
.as-crumbs [aria-current] { color: #292d30; }
/* The design's separator is a TEXT character inside a single text node, not an icon. Building
   it as a 16x16 SVG made it read larger and darker with wider gaps on both sides - caught by
   the vision pass, invisible to measurement because the whole node has no DOM twin. */
.as-crumbs__sep { color: #888889; }

.as-page-title {
  margin-top: 33px;
  color: var(--as-accent);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-h1);
  font-weight: 500;
  line-height: var(--as-lh-h1);
}

.as-page-lead {
  max-width: 689px;
  margin-top: 33px;
  color: var(--as-ink);
  font-size: var(--as-fs-lead);
  font-weight: 400;
  line-height: var(--as-lh-lead);
}

/* Filter pills - real links to term archives */
.as-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 93px;
  /* The design insets this row 9px past the grid; every other band starts at 132. */
  padding-left: 9px;
}

.as-filter {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding-inline: 24px;
  background: var(--as-white);
  border: 1px solid #e7e6e9;
  border-radius: 20px;
  color: var(--as-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}

.as-filter:hover { border-color: var(--as-ink); }

/* The pills are the only real controls on the archive, and the mobile rules SHRINK them from 40px
   to 36px - smaller exactly where fingers replace a cursor. Measured at 390px: 36px tall, against
   the 44px minimum.

   Rather than resize them and invent a mobile look the design does not specify, this grows only
   the HIT AREA: a transparent overlay centred on the pill, 44px tall, adding ~4px of reach above
   and below. Nothing moves and nothing is repainted - the pills look identical at every width.
   Scoped to coarse pointers so a mouse, which does not need it, is unaffected. The 8px gap between
   pills is wider than the 4px of overhang, so neighbouring hit areas still cannot overlap. */
@media (pointer: coarse) {
  .as-filter { position: relative; }

  .as-filter::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}

/* The active pill carries NO border in the design - keeping one adds 2px of width. */
.as-filter.is-active {
  background: var(--as-accent-2);
  border: 0;
}

/* --------------------------------------------------------------------------
   Projektai archive - 3x2 grid of 374x459 cards, then pagination
   -------------------------------------------------------------------------- */

.as-archive { padding-top: 47px; padding-bottom: var(--as-section-y); }

/* Projektai and Naujienos draw the SAME card: 374x459, 9px inset, a 220px photo, a 20/700/28
   title in a fixed two-line slot, a 16/400/21 description, and a footer pinned to the bottom.
   Only the footer CONTENTS differ - city+pin there, date there. So the geometry is shared
   deliberately and in one place, with both consumers named in the selector. That is not the
   `.as-stats` mistake: that was two different components silently answering to one name. Here a
   reader can see exactly who is affected before changing a value. */
.as-archive__grid,
.as-news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 27px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The <li> IS the card - an extra wrapper would leave an unstyled box of identical size. */
.as-archive__grid > li,
.as-news__grid > li {
  display: flex;
  flex-direction: column;
  height: 459px;
  margin: 0;
  padding: 9px 9px 27px;
  background: #fdfcfd;
  border-radius: 10px;
  overflow: hidden;
}

.as-acard__media,
.as-ncard__media {
  position: relative;
  flex: none;
  height: 220px;
  border-radius: 6px;
  overflow: hidden;
}

/* A post with no featured image still reserves its 220px slot, so without this the card shows a
   blank white rectangle and reads as a broken image rather than as "no photo". Two of the nine
   migrated news posts have no featured image on the live site either, so this is the real state of
   the client's content, not an import failure - see docs/MIGRATION-SOURCE.md.

   Deliberately a flat tint and a hairline, NOT a stand-in graphic: inventing a placeholder photo
   would put an asset on the page that no design node ever specified (PF-000). The two posts need
   real images from the client; until then this should look empty on purpose. */
li:not(.has-post-thumbnail) > .as-pcard__media,
li:not(.has-post-thumbnail) > .as-acard__media,
li:not(.has-post-thumbnail) > .as-ncard__media {
  background: var(--as-surface-2);
  box-shadow: inset 0 0 0 1px var(--as-hairline);
}

.as-acard__media figure,
.as-ncard__media figure { margin: 0; height: 100%; }
.as-acard__media a,
.as-ncard__media a { display: block; width: 100%; height: 100%; }
.as-acard__media img,
.as-ncard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* Sector tag, overlaid on the photo */
.as-acard__tag {
  position: absolute;
  top: 22px;
  left: 20px;
  display: flex;
  gap: 6px;
  padding: 3px 11px;
  background: var(--as-accent);
  border-radius: 4px;
  color: var(--as-white);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

.as-acard__tag a { color: inherit; }
.as-acard__tag .wp-block-post-terms__separator { display: none; }

.as-acard__body,
.as-ncard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-left: 23px;
  padding-right: 13px;
}

/* Title and description sit in FIXED slots in the design - a one-line title does not pull the
   description up - so the title box is a fixed two-line height rather than flowing. */
/* Specific enough to beat core's `.is-layout-flow > :first-child{margin-block-start:0}` (0,2,0),
   which is the same trap that cost 50px on the Homepage. */
.as-acard__body .as-acard__title,
.as-ncard__body .as-ncard__title {
  height: 56px;
  margin-top: 20px;
  color: var(--as-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.as-acard__title a,
.as-ncard__title a { color: inherit; }
.as-acard__title a:hover,
.as-ncard__title a:hover { color: var(--as-accent); }

.as-acard__text,
.as-ncard__text {
  margin-top: 12px;
  color: var(--as-text-soft);
  font-size: var(--as-fs-body);
  font-weight: 400;
  line-height: var(--as-lh-body);   /* was 21 (1.31), under WCAG 1.4.8's 1.5 */
}

.as-acard__text p,
.as-ncard__text p {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.as-acard__foot,
.as-ncard__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Naujienos-only. The lead runs wider here than on Projektai (834 against 689) and the card
   footer carries a date and a plain-black read-more instead of a city and a pin. */
.as-page-lead--news { max-width: 834px; }

/* 93 above the grid and 81 below it, measured: the lead ends at 422 and the grid starts at 515,
   and the pagination ends at 1580 against a CTA section top of 1661. Those two gaps are the
   entire difference between a 2232 document and the design's 2406. */
.as-news {
  padding-top: var(--as-section-y);
  padding-bottom: var(--as-section-y);
}

/* The card is 133 wide-padded by 9, giving a content box of 142..498, and the body is inset 13
   on both sides: 155..485. The footer's button ends exactly at 485, which is what fixes it.
   The TITLE and EXCERPT are not full-bleed inside that though - the design runs them to 475, a
   320 measure - so they are constrained separately rather than by squeezing the body, which
   would have dragged the button 10px left with them.
   The measure matters beyond alignment: at 330 the three-line excerpts wrap to two, and since
   the footer is pinned to the card bottom that surfaces as a 41px gap above it where the design
   has 20. */
.as-ncard__body {
  padding-left: 13px;
  padding-right: 13px;
}

.as-ncard__title,
.as-ncard__text { max-width: 320px; }

/* Core renders the date as an inline <time>, and an inline box is measured from font metrics
   (~17px at 14px Inter), not from line-height - so the box read 17 against the design's 21.
   Same trap as the nav labels and the footer links. */
.as-ncard__date time { display: block; line-height: inherit; }

.as-ncard__date {
  margin: 0;
  color: var(--as-text-soft);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

/* Same bordered button as Projektai - node 260:1650 carries bg #fdfcfd, a 1.17px #11181f border
   and a 2.34px radius, exactly like its counterpart. Only the width differs, because the label
   is shorter: 164 against 179. Worth stating because it LOOKS like plain text at a glance, and
   building it as plain text is what I did first. */
/* Qualified by the parent (0,2,0) rather than moved: the shared `.as-acard__more, .as-ncard__more`
   rule sets 179px and sits LATER in this file, so a bare `.as-ncard__more` at equal specificity
   silently lost on source order. */
.as-ncard__foot .as-ncard__more { min-width: 164px; }

/* The pin is a REAL element, not a CSS background. Drawn as a background it was invisible to
   any measurement pass, which hid three separate defects at once: the wrong asset (the footer
   variant, #bdbdbd on-dark grey), the wrong colour for this context, and a glyph scaled to
   ~8.6x12 instead of the design's 12x15 because the padded 14x14 canvas was being resized
   rather than the glyph. See docs/VERIFY-BASELINE.md. */
.as-acard__place {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

/* 16px slot with the 12x15 glyph centred, exactly like the design's 16x16 pin frame. */
.as-acard__pin {
  flex: none;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
}

.as-acard__pin svg { width: 12px; height: 15px; display: block; }

.as-acard__city {
  margin: 0;
  color: var(--as-text-soft);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  white-space: nowrap;
}

.as-acard__more,
.as-ncard__more {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 179px;
  height: 33px;
  padding-inline: 19px;
  background: #fdfcfd;
  border: 1px solid var(--as-ink);
  border-radius: 2px;
  color: #000000;
  font-size: var(--as-fs-small);
  font-weight: 400;
  line-height: var(--as-lh-small);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.as-acard__more:hover { background: var(--as-ink); color: var(--as-white); }

.as-archive__empty {
  color: var(--as-text-soft);
  font-size: 16px;
  line-height: 24px;
}

/* --------------------------------------------------------------------------
   Pagination - 48x48 slots, current in accent, prev/next outlined
   -------------------------------------------------------------------------- */

/* fit-content plus auto margins, not a full-width centred row: visually identical, but it makes
   the element's box the button group the design actually draws (365x48) rather than the whole
   1176 container, so it can be measured against the design node instead of eyeballed. */
.as-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  gap: 8px;
  margin-top: 72px;
  margin-inline: auto;
}

.as-pager .page-numbers,
.as-pager .wp-block-query-pagination-previous,
.as-pager .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  border-radius: 4px;
  color: var(--as-ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
}

.as-pager .page-numbers.current {
  background: var(--as-accent-2);
  font-weight: 500;
}

.as-pager .page-numbers:not(.current):not(.dots):hover { background: var(--as-surface-2); }
.as-pager .page-numbers.dots { min-width: 32px; }

/* Prev / next are outlined squares carrying a chevron instead of a label. */
.as-pager .wp-block-query-pagination-previous,
.as-pager .wp-block-query-pagination-next {
  background: #fafafa;
  border: 1px solid var(--as-muted);
  font-size: 0;
}

/* The design's glyph is 5x9 (node 260:1704). The first build shipped 9x16 - nearly double -
   because the chevron was hand-drawn instead of read from the node. Size comes from the node;
   the path was reconstructed from the 1x render because the Figma API was rate-limited, so
   this is the one asset in the theme that is not a direct export. */
.as-pager .wp-block-query-pagination-previous::before,
.as-pager .wp-block-query-pagination-next::before {
  content: "";
  width: 5px;
  height: 9px;
  background: var(--as-ink);
  -webkit-mask: url("assets/icons/chevron-right.svg") no-repeat center / contain;
  mask: url("assets/icons/chevron-right.svg") no-repeat center / contain;
}

.as-pager .wp-block-query-pagination-previous::before { transform: rotate(180deg); }
.as-pager .wp-block-query-pagination-previous:hover,
.as-pager .wp-block-query-pagination-next:hover { border-color: var(--as-ink); }

/* --------------------------------------------------------------------------
   Project detail - hero, two-column overview, stat trio, gallery slider
   -------------------------------------------------------------------------- */

/* Hero: same 1440x790 full-bleed treatment as the Homepage, but the photo is the post's
   featured image, so the 40% #11110f scrim is applied live by core/cover rather than baked
   into an exported composite. Title box top = 383. */
.as-phero.wp-block-cover {
  min-height: min(790px, 88svh);
  padding: 0;
  align-items: flex-start;
  justify-content: flex-start;
}

/* CONSISTENCY PASS (2026-10-01): the homepage and Apie mus heroes both darken their photo; this one
   did not (dimRatio 0 - see "RISK for Matas" in docs/VERIFY-BASELINE.md, measured luminance up to
   244 behind a #f4f4f4 title). The client's complaint that the title looks "dumped on the photo"
   is that risk. The homepage's 40% dark overlay, applied as brightness(0.6) on the photo itself -
   mathematically the same as 40% black on top. Not a block attribute, so the pattern's saved markup
   and the editor's block validation are untouched; and not an overlay layer, because core's cover
   CSS pins the inner container's z-index at a specificity no theme rule should be fighting. */
.as-phero .wp-block-cover__image-background { filter: brightness(0.6); }

.as-phero .wp-block-cover__inner-container { width: 100%; }
.as-phero .as-container { padding-top: clamp(200px, 48svh, 383px); padding-bottom: var(--as-section-y); }

.as-phero__title {
  max-width: 640px;
  margin: 0;
  color: #f4f4f4;
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-h1);
  font-weight: 500;
  line-height: var(--as-lh-h1);
}

.as-phero__title a { color: inherit; }

/* 82 above, 83 below: the design leaves 131px between the slider and the CTA card, and the
   CTA band contributes 48 of that from its own padding. */
.as-gallery { padding-top: var(--as-section-y); padding-bottom: var(--as-section-y); }

.as-slider { position: relative; }

.as-slider__viewport { border-radius: 10px; overflow: hidden; }

/* Without JS this is a plain scrollable strip - the photos stay reachable. */
.as-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

/* `overflow-x: hidden` here was the bug that made every slide past the first one blank.
   It reads as "stop it being scrollable", but hidden still CLIPS: the slides live at x = 0..N*100%
   inside the track, so everything beyond the first was clipped away BEFORE the transform moved it
   into view. The track then slid an empty box across.

   It hid well because clipping is invisible to geometry: getBoundingClientRect happily reported the
   current slide at 132,120 1176x566 with the image complete and decoded, and drawing that same
   image to a canvas produced real pixels. Only an element screenshot showed the truth - 1176x566
   and 3726 bytes, i.e. blank.

   The viewport is what should clip (it already does, with the border-radius). The track must not,
   so it goes back to `visible` once JS takes over - and the scroll-snap that belongs to the no-JS
   strip is cleared with it. */
.as-slider.is-ready .as-slider__track {
  overflow: visible;
  scroll-snap-type: none;
  transition: transform .35s ease;
}

.as-slider__slide { flex: 0 0 100%; scroll-snap-align: start; }

.as-slider__img {
  width: 100%;
  height: 566px;
  object-fit: cover;
  display: block;
}

/* 53x53, inset 34px from each slide edge, vertically centred on the photo.
   The translucent fill is measured off the render - the node is a flattened bitmap, so this
   is the one value on this page that is not read from a node. */
.as-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 53px;
  height: 53px;
  padding: 0;
  background: rgba(255, 255, 255, .4);
  border: 0;
  cursor: pointer;
  transition: background .15s ease;
}

/* `display: grid` above beats the UA stylesheet's `[hidden] { display: none }`, so the JS
   hiding the arrows on a single-image gallery had no visible effect. Re-assert it. */
.as-slider__btn[hidden] { display: none; }

.as-slider__btn:hover { background: rgba(255, 255, 255, .6); }
.as-slider__btn[disabled] { opacity: .35; cursor: default; }
.as-slider__btn svg { width: 16px; height: 16px; display: block; }

.as-slider__prev { left: 34px; }
.as-slider__prev svg { transform: scaleX(-1); }
.as-slider__next { right: 34px; }

/* --------------------------------------------------------------------------
   Responsive - see the policy at the top of this file
   -------------------------------------------------------------------------- */

@media (max-width: 1439px) {
  :root { --as-gutter: 64px; }

  .as-stats__grid { grid-template-columns: 1fr minmax(0, 686px); gap: 40px; }
  .as-stats__media { width: 100%; }
  /* Columns 2 and 3 are the EMPTY ones now, so they absorb the shrink and the three columns
     that actually hold content keep their design widths. Scaling all five proportionally instead
     dropped the contact column to 211px, which is under the address's 194px text box once its
     16px icon rail and 12px gap come off - the address wrapped to three lines and the footer grew
     21px at 1280 for no reason. */
  .as-footer__grid { column-gap: 64px; }
}

/* Logo + the 604px pill + the button stop fitting the content width here, so the pill takes
   its own row rather than being squeezed. The header stays absolutely positioned over the
   hero photo, so the hero's own padding-top has to keep clearing it - those values are
   measured against the real wrapped header height, not guessed. */
@media (max-width: 1279px) {
  /* The bar: logo left, toggle right. The pill, its background and the desktop CTA all go.
     Shape follows the reference pass over Foster+Partners, BAM, YIT and Skanska - every one
     of them is logo + toggle over a full-screen panel. */
  .as-header__inner { height: auto; padding-block: 26px; gap: 16px; justify-content: space-between; }
  .as-header .as-btn--nav { display: none; }

  .as-header nav.as-nav {
    height: auto;
    padding: 0;
    margin: 0;
    background: none;
    border-radius: 0;
  }

  /* Core swaps to the inline nav at 600px; this holds the overlay open until 1280. */
  .as-header .as-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
  .as-header .as-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    /* Dark by default because inner pages are light; only the hero page needs it light. */
    color: var(--as-ink);
    cursor: pointer;
  }
  /* Same hero condition. Below 1280 the nav pill's background is removed, so the toggle sits
     directly on the photograph with nothing behind it. */
  body.as-on-hero .as-header .as-nav .wp-block-navigation__responsive-container-open { color: #f4f4f4; }
  .as-header .as-nav .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; fill: currentColor; }

  /* The panel */
  .as-header .as-nav .wp-block-navigation__responsive-container.is-menu-open {
    background: var(--as-ink);
    padding: 26px var(--as-gutter) 40px;
  }
  .as-header .as-nav .is-menu-open .wp-block-navigation__responsive-container-close {
    width: 44px;
    height: 44px;
    color: #f4f4f4;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .as-header .as-nav .is-menu-open .wp-block-navigation__responsive-container-close svg { width: 26px; height: 26px; fill: currentColor; }

  /* The panel covers the bar, so the logo would vanish while the menu is open. Every
     reference site keeps its brand visible; re-drawing it here costs one pseudo-element. */
  .as-header .as-nav .wp-block-navigation__responsive-container.is-menu-open::before {
    content: "";
    position: absolute;
    top: 33px;
    left: var(--as-gutter);
    width: 185px;
    height: 29px;
    background: url("assets/icons/logo.svg") no-repeat left center / contain;
    pointer-events: none;
  }

  .as-header .as-nav .is-menu-open .wp-block-navigation__responsive-container-content {
    width: 100%;
    padding-top: 62px;
  }
  .as-header .as-nav .is-menu-open .wp-block-navigation__container {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .as-header .as-nav .is-menu-open .wp-block-navigation-item__content {
    display: block;
    padding: 12px 0;
    color: #f4f4f4;
    font-size: 24px;
    font-weight: 500;
    line-height: 34px;
  }
  .as-header .as-nav .is-menu-open .wp-block-navigation-item__content:hover { color: var(--as-accent); }

  /* The CTA, as the last item of the panel */
  .as-header .as-nav .is-menu-open .as-nav__home { display: block; }
  .as-header .as-nav .is-menu-open .as-nav__cta { margin-top: 28px; }
  .as-header .as-nav .is-menu-open .as-nav__cta .wp-block-navigation-item__content {
    padding: 15px 24px;
    background: var(--as-accent-2);
    border-radius: 10px;
    color: #000000;
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    text-align: center;
  }
  .as-header .as-nav .is-menu-open .as-nav__cta .wp-block-navigation-item__content:hover { color: #000000; filter: brightness(0.94); }
}

@media (max-width: 1199px) {
  .as-phero.wp-block-cover { min-height: 620px; }
  .as-phero .as-container { padding-top: 280px; }
  .as-phero__title { max-width: 640px; }
  .as-slider__img { height: 440px; }

  .as-page-lead { font-size: 20px; line-height: 32px; }
  .as-filters { margin-top: 64px; }
  .as-archive__grid > li,
  .as-news__grid > li { height: auto; min-height: 430px; }

  .as-hero { height: auto; min-height: 640px; }
  /* Clears the absolutely-positioned header. Now that the nav is an overlay the bar is a
     fixed ~96px at every width, so one value covers the whole range - but it is still
     measured by tools/responsive-check.js, which fails the build on any overlap. */
  .as-hero__inner { padding-top: 176px; padding-bottom: 96px; }
  .as-hero__title { max-width: 640px; }
  .as-hero__text { font-size: 20px; line-height: 32px; max-width: 600px; }
  .as-hero__actions { margin-top: 48px; }


  .as-svc { height: auto; min-height: 380px; padding: 40px; }

  .as-services { padding-top: var(--as-section-y); padding-bottom: var(--as-section-y); }
  .as-projects { padding-top: var(--as-section-y); padding-bottom: var(--as-section-y); }
}

@media (max-width: 1023px) {
  :root { --as-gutter: 40px; }

  .as-services__grid,
  .as-projects__grid,
  .as-archive__grid,
  .as-news__grid { grid-template-columns: repeat(2, 1fr); }

  .as-page-head { padding-top: 148px; }
  /* The desktop grid pins the navigation to column 2 and contacts to column 3 beside a full-width
     brand column. From here down the brand gets its own row over two equal columns, so those
     placements are released and the two blocks flow into the columns. */
  .as-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
  .as-footer__brand { grid-column: 1 / -1; }
  .as-footer__col--nav,
  .as-footer__col--contact { grid-column: auto; }
}

@media (max-width: 819px) {
  .as-slider__img { height: 340px; }
  .as-slider__btn { width: 44px; height: 44px; }
  .as-slider__prev { left: 16px; }
  .as-slider__next { right: 16px; }

  .as-stats__grid { grid-template-columns: 1fr; gap: 40px; }
  .as-stats__media { height: 320px; }

  .as-cta__box { flex-wrap: wrap; padding: 32px; margin-left: 0; }
  .as-cta__body { flex-basis: 100%; order: 2; }
  /* Any button, not just .as-btn--cta: the Karjera card's is an .as-btn--hero and stayed at order 0,
     so on phones it sat ABOVE its own title. */
  .as-cta .as-btn { order: 3; }
}

@media (max-width: 639px) {
  :root { --as-gutter: 20px; }

  .as-phero.wp-block-cover { min-height: 460px; }
  .as-phero .as-container { padding-top: 200px; }
  .as-gallery { padding-top: 48px; padding-bottom: 48px; }
  .as-slider__img { height: 240px; }

  .as-hero__text { font-size: 16px; line-height: 26px; margin-top: 16px; }
  .as-hero__actions { margin-top: 32px; }
  .as-btn--hero { height: 52px; font-size: 16px; padding-inline: 20px; }


  .as-stat { gap: 20px; }
  .as-stat__icon { width: 64px; height: 64px; }
  .as-stat__icon svg { width: 30px; height: 30px; }
  .as-stat__label { margin-top: 0; }

  .as-services__grid,
  .as-projects__grid,
  .as-archive__grid,
  .as-news__grid { grid-template-columns: 1fr; }

  .as-page-head { padding-top: 132px; }
  .as-page-lead { font-size: 16px; line-height: 26px; margin-top: 20px; }
  .as-filters { margin-top: 40px; padding-left: 0; gap: 8px; }
  .as-filter { height: 36px; padding-inline: 16px; }
  .as-archive { padding-top: 32px; padding-bottom: 48px; }
  .as-archive__grid > li,
  .as-news__grid > li { min-height: 0; }
  .as-acard__body .as-acard__title,
  .as-ncard__body .as-ncard__title { height: auto; }
  .as-acard__foot,
  .as-ncard__foot { flex-wrap: wrap; row-gap: 12px; }
  /* The read-more button is a fixed 164 at desktop; below this it must be free to shrink or it
     bursts its own card and takes the document width with it. */
  .as-ncard__foot .as-ncard__more { min-width: 0; }
  .as-ncard__title,
  .as-ncard__text { max-width: none; }
  .as-pager { margin-top: 40px; flex-wrap: wrap; }

  /* "Žiūrėti visus projektus" was shrinking to fit the row, so the label wrapped to two lines
     while the arrow stayed pinned at the row's right edge - the two stopped reading as one
     link. Keeping the label unwrapped puts the arrow back 8px from the text; the head is
     allowed to wrap so the link drops to its own row rather than overflowing on a 320. */
  .as-projects__head { flex-wrap: wrap; }
  .as-projects__all { white-space: nowrap; }

  .as-svc { padding: 32px 28px; min-height: 0; }
  .as-svc__title { margin-top: 28px; }

  /* `.as-pcard` MATCHES NOTHING. The homepage card is the Query Loop's own <li>, which carries
     no class of ours at all - every part is namespaced (`.as-pcard__media`, `__body`, `__foot`)
     but the card itself is not. So this release, written to undo the design's fixed 374px square,
     has never once applied, and the height stayed 374 with `overflow: hidden` at every width.
     It did not show until the card CTA became a 44px full-width row: the content then needed 390
     and the "Plačiau" button was simply clipped 16px below the card's edge, on the homepage, on
     a phone. (Matas, 2026-08-19: "naujausi projektai dont fit in the squares you made them fit
     in.") Same shape as the four specificity failures in the previous round - a rule that reads
     as handled and does nothing. */
  .as-projects__grid > li { height: auto; }
  /* (2026-10-01) `.as-pcard__media { height: 200px }` lived here. The featured-image block writes
     height:220px inline on the <img> (patterns/home-projects.php), which no stylesheet beats, so the
     frame shrank and cropped 20px of every photo. Frame and image now agree at 220 at every width. */

  .as-footer { padding-top: 64px; }
  .as-footer__grid { grid-template-columns: 1fr; gap: 40px; }
  .as-footer__bottom { flex-direction: column; align-items: flex-start; margin-top: 48px; gap: 12px; }
  .as-footer__legal { gap: 24px; }
}


/* --------------------------------------------------------------------------
   Naujiena - vidinis. No hero: the design opens straight into breadcrumb,
   date, title and body on the page background.
   -------------------------------------------------------------------------- */

/* 43 below the breadcrumb (193 -> 236) and 19 below the date (276 -> 295). Both are set on the
   children rather than as a gap, because .as-page-head is shared and Projektai spaces its own
   head differently. */
.as-post__date {
  margin-top: 24px;
  color: var(--as-ink);
  font-size: var(--as-fs-body);
  font-weight: 500;
  line-height: var(--as-lh-body);
}

/* Core renders the date inline; an inline box measures from font metrics, not line-height. */
.as-post__date time { display: block; line-height: inherit; }

/* 1048, not the full 1176 container. Both wrap to two lines of the same height, so every anchor
   passed at 1px while the title broke after "centro" instead of after "logistikos" - a wrap
   point is invisible to measurement and only the design-vs-build comparison showed it. */
.as-post-head .as-post__title {
  max-width: 1048px;
  margin-top: 19px;
  color: var(--as-accent);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-h1);
  font-weight: 500;
  line-height: var(--as-lh-h1);
}

/* --------------------------------------------------------------------------
   ARTICLE TYPESETTING - a DELIBERATE DIVERGENCE from the design, authorised by
   Matas on 2026-08-19: "Naujienos individual pages look horrible, not readable
   at all. Needs a solution taken from some news site or something ... And also
   both mobile and desktop pages have really weird gaps between the paragraphs."

   WHAT WAS ACTUALLY WRONG, and it is not what it looked like. Every rule below
   used to be keyed on `.as-post__para`. NO ARTICLE HAS EVER CARRIED THAT CLASS
   - checked against the database, all nine posts, zero matches. The class comes
   from the Figma mockup's markup, which the importer does not reproduce and
   which the client could never produce from wp-admin either.

   So the 22px/40px/500 type was dead code, and every real article rendered at
   the browser's own 14px/21px. The one rule that DID land was the block gap,
       .as-post__body > * + * { margin-top: 71px }
   because it is keyed on the element - which is why the page read as tiny grey
   text with a chasm between each paragraph. Both complaints, one cause.

   This is exactly the trap already documented for figures a few rules down
   ("KEYED ON THE BLOCK, NOT ON as-post__figure, and that is the whole point").
   The paragraphs needed the same treatment and never got it.

   The numbers are the long-form standard rather than anything invented here:
   a measure of 45-75 characters (Bringhurst; 66 is the usual optimum), leading
   near 1.7 at that measure, and a paragraph gap BELOW one full line so the
   break reads as a pause rather than as a blank line. 680px at 20px Inter
   measures 68 characters; the old full-width column measured 143.
   -------------------------------------------------------------------------- */


/* Title ends at 461 and the body starts at 532; the body ends at 2232 against a CTA section top
   of 2328. */
.as-post {
  padding-top: var(--as-section-y);
  padding-bottom: var(--as-section-y);
}

/* FULL CONTAINER WIDTH, matching the header, the footer and the design. Corrected 2026-08-19
   after two rounds of getting this wrong.

   I narrowed it to 680, then to 760, on readability grounds: 45-75 characters is the long-form
   standard and the full 1176 measures about 95. Matas overruled it twice, and the second time
   with the fact that settles it - "even figma design has them be the same width as the
   header/footer elements". The design is the specification here and it draws this band at 1176,
   so a reading column is my preference, not the brief. It is gone.

   WHAT STAYS from that work, because none of it depended on the width: the type is the design's
   own 22/40 rather than the browser default 14/21 it was actually rendering (no article has ever
   carried `.as-post__para` - see the note below), the block gap is 40 rather than 71, and
   consecutive paragraphs sit at 28 so a break reads as a pause instead of a blank line. Those
   three were the "weird gaps" and "unreadable", and they were never about the measure.

   The cost, stated plainly rather than quietly accepted: ~95 characters per line is above the
   comfortable band, so long articles are harder to track from one line to the next. If that ever
   matters more than matching the header, the fix is this rule and nothing else. */
.as-post__body p,
.as-post__para {
  color: #1a1a1a;
  font-size: var(--as-fs-lead);
  font-weight: 400;
  line-height: var(--as-lh-lead);
}

/* The design's content blocks - paragraph, image, paragraph - are spaced 71px apart.
   Specific enough to beat core's `.is-layout-flow > :first-child{margin-block-start:0}` at
   (0,2,0), which is the rule that cost 50px on the Homepage. */
/* 40px between blocks, not 71. Seventy-one is nearly two blank lines and it was landing between
   every consecutive paragraph, because the 40px rule below could never match. */
.as-post .as-post__body > * + * { margin-top: 40px; }

/* But CONSECUTIVE paragraphs are only 40px apart, because in the design they are not separate
   blocks at all: each Figma text node holds several paragraphs separated by a blank line, and a
   blank line at a 40px leading is worth exactly 40px. The first body node carries one such
   break and the second carries two, which is the whole 121px the page was short.
   (0,4,0) so it beats the 71px rule above at (0,3,0). */
/* 24 between consecutive paragraphs - 0.7 of the leading, so a break reads as a pause. A gap
   equal to or greater than the line-height (the old 40 against a 40px leading) makes each
   paragraph a detached slab, which is the "completely unnatural" part of the report. */
.as-post .as-post__body > p + p,
.as-post .as-post__body > .as-post__para + .as-post__para { margin-top: 28px; }

/* KEYED ON THE BLOCK, NOT ON as-post__figure, and that is the whole point.

   The importer tags the images it recovers with .as-post__figure, but the CLIENT cannot: when they
   add a picture mid-article in wp-admin they get a plain <figure class="wp-block-image">. Measured
   with a real unclassed block appended to a live post, the two rendered completely differently -
   ours 396x560 with rounded corners and a height cap, theirs 724x1024 square-cornered and
   uncapped. Styling on our own class would have meant every image the client ever adds looks wrong.

   .as-post__figure survives only as a stable hook for anchor-check. Nothing visual depends on it,
   so it can be removed without changing a pixel. */
/* No breakout any more. The figure and the body are both the container now, which is what the
   design draws; the breakout only existed to stop a narrow text column reading as a narrow page. */
.as-post__body figure.wp-block-image,
.as-post__figure {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
}

/* ASPECT RATIO IS PRESERVED, which is a deliberate departure from the design's figure box.
   The design draws ONE image at 1176x358 - a 3.3:1 banner, which is a crop the designer made in
   Figma, not the shape of any real photograph. The articles that actually carry images have one
   or SEVEN of them, portrait and landscape mixed: forcing height 358 with object-fit cover on a
   768x1024 portrait throws away about 87% of the picture and leaves an unrecognisable horizontal
   band. The design has no layout for seven mixed-orientation photos, so there is nothing to match
   here and the choice is between a correct picture and a wrong one.
   Capped at 560 so a tall portrait cannot run away with the page, and centred because a landscape
   photo narrower than the column would otherwise sit oddly to the left.
   Worth showing the designer - if they want the banner crop back it is this rule and nothing else. */
.as-post__body figure.wp-block-image img,
.as-post__figure img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 560px;
  border-radius: 10px;
  display: block;
  margin-inline: auto;
}

/* Active section in the header nav - weight 600 against the 500 of its neighbours, the same
   treatment the design gives "Apie mus". Colour is unchanged (#383838 in both states); only the
   weight moves. (0,4,0) so it beats the base nav rule at (0,3,0).
   Note this is a DELIBERATE divergence from the mockup, which bolds "Apie mus" on seven of nine
   pages regardless of the page drawn. Verify will therefore report two typography minors per
   page: the item the design bolds and the item we bold. That is expected, and it is the design
   that is inconsistent, not the build. */
.as-header .as-nav .current-menu-item .wp-block-navigation-item__content,
.as-header .as-nav .current-menu-item > a { font-weight: 600; }


/* --------------------------------------------------------------------------
   Karjera. Doc height 3432. Band boundaries measured off the 1x render at x=20:
   1463 -> #fdfcfd, 2172 -> #f9f9f9, 2234 -> #11181f, 2722 -> #f9f9f9, 2951 -> footer.

   Everything here is namespaced .as-karj-* even where the geometry resembles an
   existing class. This page has no card grid: its two grids are a 3-column
   benefit grid (280 stride, no cards) and a 4-column photo grid (273 columns,
   26.67 gap), and neither matches .as-archive__grid / .as-news__grid.

   The design's left edge wanders - 132 for the crumbs/title/lead/button and the
   S2 photo, but 133 for the S2 heading and the CTA card, 134 for the values band
   and 136 for the dark band. Those are Figma artifacts. Everything is built on
   the 132 gutter except where a band already has a precedent for insetting
   itself, and the 1-4px deltas are accepted rather than chased.
   -------------------------------------------------------------------------- */

/* S1 - page head. 572 + 600 = 1172 against a 1176 container, so the photo sits 4px in from the
   right edge. That is the design, not a rounding error. */
.as-karj-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 572px) minmax(0, 600px);
}

/* The box lives on the figure, not the img: the figure is the measured element, and a margin on
   the img leaves the figure starting 8px high with 8px of empty space in it. Crumbs top 173,
   photo top 181. */
.as-karj-head__media {
  width: 600px;
  margin: 8px 0 0;
}

.as-karj-head__media img {
  width: 100%;
  height: 446px;
  object-fit: cover;
  border-radius: 10px;
}

/* R2 - the shared .as-page-lead is wrong here in two ways and must NOT be edited: editing a
   shared class is the change that moved a signed-off page 181px on this build. margin-top is
   22.4 here (title bottom 308.6 -> lead 331) against the shared 33, and the measure is 534
   because the head photo starts at x=704, against the shared 689. Both scoped to the wrapper. */
.as-karj-head__lead {
  /* 535, against the design node's 534: at weight 400 Chrome sets line 1 at 534.5, so a literal
     534 wraps a word early by half a pixel. Within the 1px anchor tolerance. */
  max-width: 535px;
  margin-top: 22.4px;
}

/* WEIGHT 400 AND LEADING 32 - both differ from the shared .as-page-lead (22/500/40), and the
   nodemap reports neither.
   The nodemap flattens this mixed-style node to ONE style, `fontSizePx 22, fontWeight 500,
   lineHeightPx 40`, and its `fontWeightEff` says 500 too. Measured off the design render:
     - ink coverage over the same box is 1.21x when built at 500. Calibrated in-browser, Inter
       400 -> 500 is 1.175x, so the design is 400. The control cases confirm the method: the
       same measurement on the 43px heading is 1.004 and on the CTA title 0.961, and the SHARED
       .as-page-lead on Projektai and Naujienos - genuinely 22/500 - comes out 0.997 and 0.996.
       So 500 is right for a normal lead and wrong only here.
     - baselines land at 354 / 386 / 426, i.e. strides 32 then 40, against a uniform 40.
   The weight is also what caused the wrap: at 500 line 1 needs 541.7px and cannot fit the
   design's own 534 box; at 400 it needs 534.5. Chrome and Figma agree to half a pixel once the
   weight is right, so there is no renderer-metrics problem here - that was my wrong first
   reading, and widening the box to 545 was treating the symptom.
   32 reproduces the gap between the two full lines exactly (+1px on both). The design's own
   third stride is 40, so the orphan "projektus." sits ~7px high - that irregularity is in the
   design and no single line-height reproduces it. */
.as-karj-head__lead .as-page-lead {
  max-width: none;
  margin-top: 0;
  font-weight: 400;
  line-height: 32px;
}

/* The grey second half of node 250:977. #6e7277 is in neither the palette nor any other page -
   it is not --as-muted (#99999b) and not the crumbs' #888889. Substituting one reads wrong. */
.as-karj-head__sub {
  max-width: 534px;
  /* Part A is now 3x32 = 96 rather than 3x40 = 120, so this carries the 24px the block lost.
     It keeps part B's baselines on the design's 470/500 and the wrapper on its 180px box. */
  margin-top: 24px;
  color: #6e7277;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
}

/* Lead bottom 511 -> button 561. */
.as-karj-head__btn { margin-top: 50px; }

/* S2 - "Kodėl verta prisijungti?". 627 -> 767 above, and 1353 -> 1463 below where the values
   band starts. Both as padding rather than margins: a margin here would collapse against the
   band's own box. */
.as-karj-why {
  padding-top: var(--as-section-y);
  padding-bottom: var(--as-section-y);
}

/* 132..562 and 562..1308. */
.as-karj-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 430px) minmax(0, 746px);
}

.as-karj-why__title {
  color: var(--as-accent);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-h2);
  font-weight: 500;
  line-height: var(--as-lh-h2);
}

/* Heading bottom 893 -> photo 943. Width on the figure: it sits in a 430px column but the design
   photo is 343, and a figure is a block that would otherwise fill the track. */
.as-karj-why__media {
  width: 343px;
  margin: 50px 0 0;
}

.as-karj-why__media img {
  width: 100%;
  height: 410px;
  object-fit: cover;
  border-radius: 10px;
}

/* Column stride 280 (x = 562 / 842 / 1122) and row stride 320 (y = 767 / 1087). 186 + 94 = 280
   reproduces all three x positions exactly and keeps the grid inside the container. Row 1 is
   pinned to 320 so row 2 starts at exactly 1087; row 2 is auto so the section ends at the
   item-4 text bottom (1353) instead of at a phantom 1407. */
.as-karj-ben {
  display: grid;
  /* Was three fixed 186px columns with 94px gaps and a fixed 320px first row, which forced every
     title onto two lines. Fluid columns on the site's 32px gap give each item ~227px. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 48px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.as-karj-ben__icon {
  display: grid;
  place-items: center;
  width: 78.14px;
  height: 78.14px;
  background: var(--as-surface-2);
  border: 1.18px solid var(--as-hairline);
  border-radius: 7.1px;
}

.as-karj-ben__icon img { display: block; }

/* A FIXED two-line slot, not a flowing heading: item 5's text is two lines where items 2 and 3
   run to three, and the text top does not move between them. Tile bottom 845.14 -> title 871. */
.as-karj-ben__title {
  min-height: 56px;          /* two lines, so a one-line title keeps the text below it level */
  margin-top: 20px;
  color: var(--as-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-h4);
  font-weight: 700;
  line-height: var(--as-lh-h4);
}

.as-karj-ben__text {
  margin-top: 8px;
  color: var(--as-text-soft);
  font-size: var(--as-fs-body);
  font-weight: 400;
  line-height: var(--as-lh-body);
}

/* Per-item Figma text-box widths - these are what produce the wraps, the same case as
   .as-svc__text's 247/246/275. They are wider than the 186px track and deliberately overflow it
   into the 94px gutter, exactly as the design's positioned text nodes do: the widest (item 2's
   223) still stops 57px clear of column 3, and column 3's own 183 ends 3px inside the container,
   so nothing collides and nothing leaves the grid. */
.as-karj-ben__item:nth-child(1) .as-karj-ben__title { width: 208px; }
.as-karj-ben__item:nth-child(1) .as-karj-ben__text  { width: 199px; }
.as-karj-ben__item:nth-child(2) .as-karj-ben__title { width: 208px; }
.as-karj-ben__item:nth-child(2) .as-karj-ben__text  { width: 223px; }
.as-karj-ben__item:nth-child(3) .as-karj-ben__title { width: 180px; }
.as-karj-ben__item:nth-child(3) .as-karj-ben__text  { width: 183px; }
.as-karj-ben__item:nth-child(4) .as-karj-ben__title { width: 208px; }
.as-karj-ben__item:nth-child(4) .as-karj-ben__text  { width: 199px; }
.as-karj-ben__item:nth-child(5) .as-karj-ben__title { width: 150px; }
.as-karj-ben__item:nth-child(5) .as-karj-ben__text  { width: 211px; }

/* S3 - values band. Content 1541..2095 inside 1463..2172. */
.as-karj-values {
  /* #fdfcfd removed 2026-10-01: 4 levels off the #f9f9f9 page, so it never read as a band - it only
     doubled the gaps around it. Now an ordinary section in the shared rhythm. */
  padding-top: var(--as-section-y);
  padding-bottom: var(--as-section-y);
}

/* 4 x 273 with a 26.67 gap - note that is NOT the 27 the card grids use. 1172 wide inside the
   1176 container, inset 2px the way .as-cta__box already is. */
.as-karj-values__grid {
  display: grid;
  grid-template-columns: repeat(4, 273px);
  gap: 26.67px;
  margin: 0 0 0 2px;
  padding: 0;
  list-style: none;
}

.as-karj-val { display: flex; flex-direction: column; }

/* A fixed slot with the glyph bottom-aligned: the four icons are 36.80 / 35.12 / 33.45 / 33.65
   tall and the design lines up their BOTTOMS (1577.8 / 1578.4 / 2006.1 / 2003.6), not their
   tops, so every title still starts at 1602 / 2029. */
.as-karj-val__icon {
  display: flex;
  align-items: flex-end;
  height: 37px;
}

.as-karj-val__icon img { display: block; }

.as-karj-val__title {
  margin-top: 24px;
  color: #292d30;
  font-family: Inter, system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
}

.as-karj-val__text {
  margin-top: 15px;
  color: var(--as-text-soft);
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
}

.as-karj-val__media { position: relative; margin: 0; }

/* The 01-04 numerals are real text nodes (250:1101-250:1104), restored once the photos became
   real 2x Figma exports. While they were 1x render crops the numeral was already COMPOSITED into
   the picture, so drawing the text node too would have doubled each number at a slight offset -
   PF-003. The design puts it bottom-left on the two text-first cards and top-right on the two
   media-first ones; the bottom inset really is 0 while the top inset is 20. */
.as-karj-val__num {
  position: absolute;
  margin: 0;
  color: var(--as-white);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-h2);
  font-weight: 500;
  line-height: var(--as-lh-h2);
}

.as-karj-val--text-first  .as-karj-val__num { left: 20px; bottom: 0; }
.as-karj-val--media-first .as-karj-val__num { right: 20px; top: 20px; }

/* 384 on three of the four. The fourth's 385 is a Figma artifact, not intent, and honouring it
   would push that column's whole text block 1px out of line with its neighbour. */
.as-karj-val__media img {
  width: 273px;
  height: 384px;
  object-fit: cover;
  border-radius: 10px;
}

/* Odd columns: text block, then the photo 37 below it (text bottom 1668 -> photo 1705). */
.as-karj-val--text-first .as-karj-val__media { margin-top: 37px; }

/* Even columns: photo from the band's content top, then the text block below it
   (photo 1542..1926, icon slot 1968..2005, title 2029). */
.as-karj-val--media-first .as-karj-val__media { margin-top: 1px; }
.as-karj-val--media-first .as-karj-val__body  { margin-top: 42px; }

/* S4 - join band. 2172 -> 2234 is 62px of PAGE background between two bands that each own their
   own colour, so it has to be a margin. element+class (0,1,1) beats the blanket
   .wp-block-group{margin:0} at (0,1,0) on specificity rather than on source order - relying on
   source order at equal specificity is how .as-ncard__more was silently lost once already. */
section.as-karj-join { margin-top: 0; }   /* was 62; the section above now ends with the shared 80 */

.as-karj-join {
  background: var(--as-ink);
  padding-top: var(--as-section-y);
  padding-bottom: var(--as-section-y);
}

/* 132..643 and 643..1308. */
/* (2026-10-01) Calmed: image and copy centred on each other, one gap scale (16 / 32 / 16), and the
   privacy line moved under the buttons as small print. It sat between the intro and the buttons at
   16px on a 45px line, which is what made this read as four unrelated text sizes. */
.as-karj-join__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 64px;
  align-items: center;
}

/* x=136, y=2318 against a content origin of 132, 2317. */
.as-karj-join__media { margin: 0; }

.as-karj-join__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

/* 43px, not 48 or 72 - a 72px text box the designer scaled down. Confirmed off the render: the
   ink band is 2341..2382 = 42px tall, which is right for 43 and wrong for 48. `./dc verify` will
   report this as an off-scale size; it is a real design value, so it stays. */
/* nowrap because Chrome sets this string at 666.7px against the design's 665px box - 1.67px over,
   which wraps a heading the design has on ONE line and then pushes the band, the CTA, the footer
   and the document height 68px down. The overflow runs 1.7px past the container into the page's
   own margin, not off the viewport. Released below 1440 where the column is fluid. */
.as-karj-join__title {
  margin: 0;
  color: var(--as-accent);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-h2);
  font-weight: 500;
  line-height: var(--as-lh-h2);
}

.as-karj-join__text {
  max-width: 600px;
  margin-top: 16px;
}

/* Weight 400, for the same reason as the head lead: the nodemap flattens this mixed-style node
   to 22/500 and measured ink coverage says otherwise (1.21x when built at 500, against a
   calibrated 1.175x for 400 -> 500). The leading here IS 40 - measured baseline strides are 40
   in both design and build - so only the weight was wrong. The colour is #ffffff and was right;
   the nodemap's #bdbdbd is wrong for both halves of this node. */
.as-karj-join__p {
  color: var(--as-white);
  font-size: var(--as-fs-lead);
  font-weight: 400;
  line-height: var(--as-lh-lead);
}

/* One line in a 45px box: 2 x 40 + 45 = 125 is the node's exact box height, and it puts the 16px
   ink at 2500..2516 where the render has it. */
.as-karj-join__note {
  max-width: 600px;
  margin: 16px 0 0;
  color: #a3abb3;
  font-size: var(--as-fs-small);
  font-weight: 400;
  line-height: var(--as-lh-small);
}

/* Text wrapper ends 2530 -> buttons 2565; the two buttons are 20.5 apart. */
.as-karj-join__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

/* "Susisiekti" - the only outline button in the design. Identical to --hero except transparent
   with a 1px #f2c300 edge and an #f2c300 label; border-box keeps it 58 tall including the edge. */
.as-btn--outline {
  background: transparent;
  border: 1px solid var(--as-accent-2);
  color: var(--as-accent-2);
}

.as-btn--outline:hover {
  background: var(--as-accent-2);
  color: #000000;
  filter: none;
}

/* S5 - CTA. The band's padding is 31 above the card and 30 below, against the shared 48/48:
   2722 -> 2753 and 2921 -> 2951. Same shape of fix as .single-projektas .as-cta, and (0,2,0)
   beats .as-cta at (0,1,0). Get this wrong and the document lands ~35px tall. */
/* (2026-10-01) Was 31/30, this page's own reading of the design. The consistency pass gives every
   CTA band the shared rhythm. The rule stays because its specificity note above still applies. */
.as-cta.as-cta--karj {
  padding-top: var(--as-section-y);
  padding-bottom: var(--as-section-y);
}

/* The send glyph is 29.26 inside the 64px tile; the shared rule sizes an <svg>, and this is an
   <img> (a render crop), so it needs its own. */
.as-cta--karj .as-cta__icon img { display: block; }

/* Karjera - responsive. Kept with the page rather than folded into the shared breakpoint blocks
   above, because every value here is a Karjera-only fixed-px layout being released. Exactness
   only matters at 1440, so below it the fixed tracks become fractional and the fixed-size photos
   become fluid. Same policy as every other page: no mobile design exists, so the rules are
   derived and the hard gate is zero horizontal overflow. */
@media (max-width: 1439px) {
  .as-karj-head__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 32px; }
  .as-karj-why__grid  { grid-template-columns: minmax(0, 343px) minmax(0, 1fr); gap: 40px; }
  .as-karj-join__grid { grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 40px; }

  /* The figures carry a fixed design width at 1440; below it they follow their column. */
  .as-karj-head__media { width: auto; max-width: 600px; }
  .as-karj-why__media  { width: auto; max-width: 343px; }
  .as-karj-join__media { width: auto; max-width: 430px; margin-left: 0; }

  .as-karj-head__media img,
  .as-karj-why__media img,
  .as-karj-val__media img,
  .as-karj-join__media img { height: auto; }

  /* The nowrap only exists to hold a 1.67px overflow on one line at 1440. */
  .as-karj-join__title { white-space: normal; }

  /* The 280px stride and the per-item Figma box widths only reproduce the design at 1440; below
     it they are what would burst the container, so both are released together. */
  .as-karj-ben {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    column-gap: 40px;
    row-gap: 54px;
  }

  .as-karj-ben__title,
  .as-karj-ben__text { width: auto; }

  .as-karj-values__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-left: 0; }
}

@media (max-width: 1199px) {
  .as-karj-ben__title  { height: auto; }
}

@media (max-width: 1023px) {
  .as-karj-head__grid,
  .as-karj-why__grid,
  .as-karj-join__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }

  .as-karj-head__media img,
  .as-karj-join__media img { max-width: 600px; }

  .as-karj-why { padding-top: 80px; padding-bottom: 72px; }
  .as-karj-values { padding-top: 56px; padding-bottom: 56px; }
  .as-karj-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .as-karj-ben { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }

  section.as-karj-join { margin-top: 48px; }
  .as-karj-join { padding-top: 56px; padding-bottom: 56px; }

  /* The zig-zag is a 4-across arrangement; at 2 columns it just reads as a broken rhythm, so
     every column runs text-then-photo and the offsets go. */
  .as-karj-val--media-first .as-karj-val__media { order: 2; margin-top: 37px; }
  .as-karj-val--media-first .as-karj-val__body  { order: 1; margin-top: 0; }
}

@media (max-width: 639px) {
  .as-karj-head__lead { max-width: none; margin-top: 20px; }
  .as-karj-head__sub { font-size: 14px; line-height: 24px; }
  .as-karj-head__btn { margin-top: 32px; }

  .as-karj-ben { grid-template-columns: minmax(0, 1fr); }
  .as-karj-values__grid { grid-template-columns: minmax(0, 1fr); }

  .as-karj-join__note { font-size: 14px; line-height: 24px; margin-top: 12px; }
  .as-karj-join__actions { flex-wrap: wrap; gap: 12px; }

  .as-cta--karj .as-btn--hero { width: 100%; }
}

/* ==========================================================================
   Kontaktai - design frame 1440, real document height 2580
   (the Figma frame is 3432; the 852px below the footer is empty canvas)
   ========================================================================== */

/* Screen-reader-only label. The design draws placeholders and no labels on four of the five form
   fields, which is a WCAG 3.3.2 failure; this keeps the pixels and restores the label. */
.as-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Page head: text column + hero photo ---------------------------------- */

/* 410 + 93 + 669 = 1172, four short of the 1176 container. The design's right edge on this page
   is 1304, not 1308 - the same four pixels reappear on the form column and the submit button. It
   is a Figma rounding artifact, so the slack is parked at the END and every left edge stays on
   the design's own x, which is what the anchors measure. */
.as-kont-hero {
  display: grid;
  grid-template-columns: 410px 669px;
  column-gap: 93px;
  justify-content: start;
}

.as-kont-hero__media {
  margin: 8px 0 0;          /* crumbs top 173, photo top 181 */
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
}

/* The radius is on the img as well as the clipping figure, so a DOM harvest can see it - verify
   reads the image's own computed radius and reported 0 against the design's 10. */
.as-kont-hero__media img {
  display: block;
  width: 100%;
  height: 379px;
  border-radius: 10px;
  object-fit: cover;
}

.as-kont-hero__btn {
  margin-top: 46px;
  vertical-align: top;
}

/* Node 260:2236 is ONE Figma text node holding TWO character styles, so it is two elements here.
   Weight 400 on BOTH runs is measured off the design render against Inter specimens (1.032 and
   1.036 ink at 400, against 1.212 and 1.215 at 500). The nodemap reports 500 for the whole node
   and is wrong - the same flattening that shipped a visible defect on Karjera. */
.as-kont-lead {
  max-width: 410px;
  margin-top: 22.4px;       /* title bottom 308.6 -> lead top 331; NOT the shared lead's 33 */
}

.as-kont-lead__title {
  margin: 0;
  color: var(--as-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-lead);
  font-weight: 400;
  line-height: var(--as-lh-lead);
}

.as-kont-lead__sub {
  margin: 12px 0 0;
  color: #6e7277;
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
}

/* --- Contact info + enquiry form, on a full-bleed white band -------------- */

/* section.x beats .wp-block-group{margin:0} at equal specificity without touching the core rule. */
section.as-kont-info {
  margin-top: 88px;         /* hero photo bottom 560 -> band top 648 */
  background: var(--as-white);
  padding-top: var(--as-section-y);
  /* 81, not the design's 113.7: the privacy notice under the form is an addition the design does
     not draw, and it is absorbed into this padding so the band still ends at 1461 and the document
     height stays 2580 rather than growing by 33px. The white space below the content shrinks from
     ~112 to ~81; growing the page instead would move the map, the CTA and the footer. */
  padding-bottom: var(--as-section-y);
}

.as-kont-info__grid {
  display: grid;
  /* The design's left column is 375 with a 131 gutter, sized around a placeholder address that is
     shorter than the client's real one ("Jurbarko g. 2A, Kaunas 47183," needs 308px against the
     278px the design leaves). Widened into the gutter instead: 410 + 96 still puts the form column
     on the design's x 638, so nothing else on the page moves, and the row rhythm - which is pinned
     to the tile height - cannot absorb the extra line without overlapping the next row. */
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);   /* fluid since 2026-10-01 */
  column-gap: 80px;
  justify-content: start;
  /* Not the default stretch: the contact list is the taller column, and stretching the form to
     match would make its box 3px taller than its own content and hide where the form really ends. */
  align-items: start;
  margin-top: 48px;
}

/* D4b, 2026-08-18 (Matas: "the icons are not centred").

   The design pinned each row box to the 72.9px TILE and let longer text spill into the margin
   below - tile tops 894 / 1013 / 1130 / 1250 with margins 46.1 / 44.1 / 47.1 tuned to hit them.
   That only works while every row holds one line. Measured on the real content it does not: the
   two-line address ends 22px above the next tile while the one-line phone and e-mail rows leave
   50 and 53. A 22 / 50 / 53 rhythm is what read as "messed up", and because the tile is nailed to
   the top of a box whose content varies from 67 to 128px, each icon sat somewhere different
   relative to its own text.

   So the row is its own content height and the gap between rows is ONE number. The tile stays
   TOP-aligned, and that was checked by rendering both rather than argued: measured as the tile's
   top minus its own heading's top, `center` gives 12 / -3 / -3 / 27 - a different icon-to-label
   relationship on every row - while `start` gives 0 / 0 / 0 / 0. Centring each tile in its own row
   makes the ROWS agree and the LABELS disagree, and on the 128px hours row it floats the clock
   down beside the times, away from the words "Darbo laikas". Top alignment is the rule that is
   actually uniform, and it keeps the first tile on the design's own y894.

   The defect Matas saw was never the alignment - it was the gaps, and the uniform gap fixes that
   whichever way the tile is aligned.

   38px is DERIVED, not picked. The design's own gaps are uneven - 21.7 / 44.1 / 47.1 - and the
   single uniform gap that reproduces its final tile at y1250 is 37.65. At 38 the four tiles land
   on 894 / 1029 / 1140 / 1251 against the design's 894 / 1013 / 1130 / 1250: first and last
   within a pixel, so the block still starts and ends where the design put it and only the two
   middle tiles sit slightly lower, which is the cost of an even rhythm.

   48 was tried and reverted. With Sunday dropped there is room for it (the rows total 340.3 and
   the list must only stay under the form's 486, or the whole page shifts down again - see D4),
   and it made the contact column end level with the form instead of 32px short. But it also
   pushed the tiles 26-31px below the design's, which broke the row-4 ink regions. Neither
   column has a visible bottom edge, so the levelling bought nothing anyone can see, and it was
   not worth drifting off the design's coordinates to get it. */
/* (2026-10-01) One text system for the whole section: 16px semibold labels, 16px regular values and
   fields, 14px small print. It was 20px bold beside 12-14px form text, which the client read as
   "some words huge and some tiny". Tiles are the site's 56px, as on the project facts card. */
.as-kont-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 20px;
  align-items: center;
}

.as-kont-row + .as-kont-row { margin-top: 24px; }

.as-kont-tile {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: #f4f6f8;
  border-radius: 8px;
}

.as-kont-tile img { display: block; }

/* #171a1f, NOT --as-ink (#11181f). Both near-blacks appear on this page; do not round one to the
   other. #808080 likewise is not --as-muted. */
.as-kont-row__title {
  margin: 0;
  color: var(--as-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-body);
  font-weight: 600;
  line-height: var(--as-lh-body);
}

.as-kont-row__text {
  margin: 0;
  color: var(--as-text-soft);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-body);
  font-weight: 400;
  line-height: var(--as-lh-body);
}

/* D4: the working hours as a two-column day/time list instead of five stacked lines.
   Same type, same colour and the same 6.12px offset below the heading as .as-kont-row__text, so
   the block sits on the row rhythm the other three rows use - only its internal shape differs.

   The day column is `max-content` rather than a fixed width: the widest label is "VII" at 26px,
   and pinning a number here would drift the moment the labels change. Measured, the whole block
   is 26 + 24 + 137 = 187px inside the 313px body column. */
.as-kont-hours {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 24px;
  margin: 0;
  color: var(--as-text-soft);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-body);
  font-weight: 400;
  line-height: var(--as-lh-body);
}

.as-kont-hours dd { margin: 0; }

/* The address is two separate Figma text nodes, not one wrapped line - rendered as two blocks so
   the break cannot move with the font metrics. */
.as-kont-row__text span { display: block; }
.as-kont-row__text a { color: inherit; text-decoration: none; }
.as-kont-row__text a:hover { color: var(--as-accent); }

.as-kont-form__title {
  margin: 3px 0 0;          /* left column starts 894, the form heading 897 */
  color: #171a1f;
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-h3);
  font-weight: 700;
  line-height: var(--as-lh-h3);
}

.as-kont-form__form { margin-top: 24px; }

.as-kont-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding-left: 2px;        /* the four inputs sit 2px inside the column the textarea uses */
}

.as-kont-field { margin: 0; }

.as-kont-field input,
.as-kont-textarea textarea {
  box-sizing: border-box;
  width: 100%;
  background: var(--as-white);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: var(--as-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}

.as-kont-field input { height: 48px; padding: 0 16px; }

/* resize:none because Chrome draws a corner grabber otherwise and the design draws none - it was
   visible in the vision pass. This trades a resize affordance for fidelity; if Matas would rather
   keep the affordance, change this one line back to `resize: vertical`. */
.as-kont-textarea textarea {
  display: block;
  height: 144px;
  padding: 12px 16px;
  resize: none;
}

.as-kont-field input::placeholder,
.as-kont-textarea textarea::placeholder { color: #565d6d; opacity: 1; }

.as-kont-field input:focus-visible,
.as-kont-textarea textarea:focus-visible { outline: 2px solid var(--as-accent); outline-offset: 1px; }

.as-kont-textarea { margin-top: 16px; }

/* The only visible label in a form whose other fields are placeholders, so it read as a stray. Kept for
   screen readers, hidden on screen; the textarea's placeholder already says what goes there. */
.as-kont-textarea__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* display:flex, not the inherited inline-flex: as an inline-level box it sits on a text baseline
   and leaves 3.19px of descender space below itself, which lands in the form's height. */
.as-kont-form__submit {
  display: flex;
  width: 100%;
  margin-top: 24px;
}

/* Not in the design - see the note in patterns/kontaktai.php. Sized well under the form's own
   type so it reads as fine print rather than as content. */
.as-kont-form__privacy {
  margin: 16px 0 0;
  color: var(--as-text-soft);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-small);
  font-weight: 400;
  line-height: var(--as-lh-small);
}

.as-kont-form__privacy a { color: inherit; text-decoration: underline; }
.as-kont-form__privacy a:hover { color: var(--as-accent); }

/* --- Map band, flush against the white band above ------------------------- */

.as-kont-map {
  position: relative;
  height: 400px;
  overflow: hidden;
  line-height: 0;
}

/* A live OpenStreetMap map, not the design's raster. The design draws a picture OF a map -
   greyscale, no labels, no attribution - which was a placeholder; now that the office address is
   confirmed and geocoded, this shows the real place. The filter is applied to the TILE PANE only,
   so the attribution stays legible and the marker keeps its orange. Drop the filter line to see
   OSM's own colours. No cookies are set, but the tiles ARE a third-party request. */
.as-kont-map__canvas {
  width: 100%;
  height: 400px;
  background: #f2f4f6;
}

.as-kont-map__canvas .leaflet-tile-pane { filter: grayscale(1) contrast(0.92) brightness(1.06); }
.as-kont-map__canvas .leaflet-container { background: #f2f4f6; font-family: Inter, system-ui, sans-serif; }

/* The marker is a Leaflet DivIcon, so the pin is positioned by the map, not by the band. */
.as-kont-map__marker .as-kont-map__pin { position: absolute; left: 0; top: 0; }

/* Overlays are pinned to the 1440 design frame, centred, so they stay put on wider viewports. */
.as-kont-map__frame {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1440px;
  height: 100%;
  line-height: normal;
  /* The frame covers the whole band, so it would otherwise swallow every drag on the map. */
  pointer-events: none;
  /* Above Leaflet's tile (200) and marker (600) panes, below its controls (800). Without this the
     map paints OVER the address card: the card keeps its exact geometry, so anchor-check passes it
     while it is invisible - ink-check caught it by finding no text baselines in the card. */
  z-index: 700;
}

.as-kont-map__card { pointer-events: auto; }

/* The 40px orange ring is missing from the nodemap - only its 12px white dot is in the JSON. Both
   were measured off the render (ring y 1641-1681, dot 1655-1667) and are built in CSS. It is the
   Leaflet marker's icon, so panning the map moves it with the building. */
.as-kont-map__pin {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--as-accent);
}

/* A real element, not a ::after: the white dot IS a node in the design (260:2771), and a pseudo
   element is invisible to a DOM harvest, so verify reported it as un-built. */
.as-kont-map__dot {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--as-white);
}

/* x 86 is 46px OUTSIDE the 132 gutter - the card breaks the grid on purpose. Confirmed by pixel
   scan (white starts at 86, ends at 436); the whole card is absent from the nodemap. */
.as-kont-map__card {
  position: absolute;
  left: 86px;
  top: 40px;                /* 1501 - 1461 */
  box-sizing: border-box;
  width: 350px;
  padding: 29px 32px 26px;
  background: var(--as-white);
  border-radius: 12px;
  /* Measured off a raster background, so this is an estimate: ~9/255 darkening peaking below the
     card and fading over ~18px. Confirm in Figma Dev Mode before sign-off. */
  box-shadow: 0 4px 20px rgba(0, 0, 0, .10);
}

.as-kont-map__head {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 15px;
  align-items: start;
}

.as-kont-map__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: #f4f6f8;
  border-radius: 6px;
}

.as-kont-map__icon img { display: block; }

.as-kont-map__label {
  margin: 0;
  color: #171a1f;
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.as-kont-map__addr {
  margin: 0;
  color: var(--as-text-soft);
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.as-kont-map__addr span { display: block; }

/* The only non-yellow button in the theme so far. Full width inside the card: 350 - 2x32 = 286,
   which is exactly the design's button width, so it is not a padding-driven pill. */
.as-btn.as-kont-btn--ghost {
  width: 100%;
  margin-top: 23px;
  height: 56px;
  border-radius: 12px;
  background: #f4f6f8;
  color: #000000;
  font-size: var(--as-fs-body);
  line-height: 24px;
}

/* --- Consultation band - the shared .as-cta with one extra element -------- */

/* The shared band is 48/48; this page draws 41/31. Scoped, because four other pages depend on the
   shared value and there is already precedent for exactly this on .single-projektas. */
.as-kont-cta {
  /* (2026-10-01) Was 40.6/31; the consistency pass gives every CTA band the shared rhythm. */
  padding-top: var(--as-section-y);
  padding-bottom: var(--as-section-y);
}

/* The shared card carries min-height 168 and every other page measures 168. This page's design
   draws 167 (white spans y 1902-2069 in the render), and the spare pixel would otherwise push the
   footer band and the document height off by one. */

.as-kont-cta .as-cta__icon img { display: block; }

/* Fixed rather than flex:1 so the phone number lands on the design's x 745 instead of being
   pushed right by the leftover space. */

/* (2026-10-01) The number used to stand alone between the text and a "Skambinti dabar" button - two
   things doing one job. It is now the button's own label, the way the shared CTA card has one button. */
.as-cta__call svg { flex: none; width: 20px; height: 20px; display: block; }
.as-cta__call svg path { fill: currentColor; }

/* min-width, not width: Chrome sets "Skambinti dabar" 195.42 wide against Figma's 196.5, the same
   ~1px narrower that .as-btn--nav already records. The button is a fixed size in the design, and
   pinning the width is what puts its left edge on the design's x 1060. */
.as-kont-cta .as-cta__call { flex: none; }

/* --- Below 1440 ----------------------------------------------------------- */

@media (max-width: 1439px) {
  .as-kont-hero {
    grid-template-columns: minmax(0, 410px) minmax(0, 669px);
    column-gap: 48px;
  }

  .as-kont-info__grid { column-gap: 64px; }

  /* The two-up inputs are fixed 322px in the design, which overflows as soon as the form column
     is narrower than 664. */
  .as-kont-form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  /* The card would otherwise hang off the viewport, because its design x is outside the gutter. */
  .as-kont-map__frame { width: 100%; }
  .as-kont-map__card { left: 32px; }
}

/* The consultation band carries four fixed-width children on one row (64 + 443 + 263 + 197 plus
   three 32px gaps = 1063), so it runs out of room well before the page does. */
@media (max-width: 1279px) {
  .as-kont-cta .as-cta__box { flex-wrap: wrap; }
  .as-kont-cta .as-cta__body { flex: 1 1 320px; }
  .as-kont-cta .as-cta__call { margin-left: 0; }
}

@media (max-width: 1023px) {
  .as-kont-hero,
  .as-kont-info__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
  }

  .as-kont-hero__media { margin-top: 0; }
  .as-kont-form__title { margin-top: 0; }
}

@media (max-width: 767px) {
  .as-kont-lead__title { font-size: 20px; line-height: 32px; }
  .as-kont-row { height: auto; grid-template-columns: 56px 1fr; column-gap: 16px; }
  .as-kont-row + .as-kont-row,
  .as-kont-row:nth-child(3),
  .as-kont-row:nth-child(4) { margin-top: 28px; }
  .as-kont-tile { width: 56px; height: 56px; }
  .as-kont-tile img { width: 26px; height: auto; }
  /* (2026-10-01) the 17px phone size for the Kontaktai rows lived here; the scale variables now set it. */

  .as-kont-form__row { grid-template-columns: minmax(0, 1fr); padding-left: 0; }

  .as-kont-map__card { left: 16px; right: 16px; width: auto; }

  .as-kont-cta .as-cta__body { flex: 1 1 auto; }
  .as-kont-cta .as-cta__box { flex-wrap: wrap; gap: 16px; }
  .as-kont-cta .as-cta__call { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   Paslaugos - design frame 1440, document height 4125
   ========================================================================== */

/* --- Page head: text column + 600x453 photo ------------------------------- */

/* 534 + 38 + 600 = 1172, four short of the 1176 container: the photo's right edge is 1304 where
   the container ends at 1308, so the page's right gutter is 136 against a 132 left. Figma
   asymmetry, built literally, slack parked at the end so every left edge sits on the design's x. */
.as-pasl-head__grid {
  display: grid;
  grid-template-columns: 534px 600px;
  column-gap: 38px;
  justify-content: start;
}

.as-pasl-head__photo {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
}

.as-pasl-head__photo img {
  display: block;
  width: 100%;
  height: 453px;
  border-radius: 10px;
  object-fit: cover;
}

/* NOT .as-page-lead, which is 22/500/lh40. At those values this lead is 160 tall instead of 128
   and every gap below it drops 32px - the easiest way to lose this page. */
.as-pasl-lead {
  max-width: 534px;
  margin: 33px 0 0;
  color: var(--as-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-lead);
  font-weight: 400;
  line-height: var(--as-lh-lead);
}

.as-pasl-head__btn { margin-top: 78px; vertical-align: top; }

/* --- Service grid: 6 cards, 3 x 2 ---------------------------------------- */

.as-pasl-services {
  padding-top: var(--as-section-y);
  padding-bottom: var(--as-section-y);
}

/* D3, 2026-08-18. The rows used to be an explicit `441px 471px`, and that 30px difference had
   exactly one cause: the design's text-to-pill gap is 30 in row 1 and 32 in row 2, and pinning the
   rows was the only way to reproduce both. The pill is deleted, so the reason is gone and the two
   rows have no business being different heights - which is the asymmetry Matas asked about.

   `repeat(2, 1fr)` makes both rows equal to the taller one's content, so all six cards match. */
.as-pasl-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 27px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* min-width:0 because a grid item defaults to min-width:auto (its min-content), and the body text
   is deliberately 320px inside a 374px card - without this the card grows to fit it. */
.as-pasl-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  padding: 9px 9px 24px;
  background: #fdfcfd;
  border-radius: 10px;
}

.as-pasl-card__media { margin: 0; line-height: 0; }

.as-pasl-card__media img {
  display: block;
  width: 100%;
  height: 220px;
  border-radius: 6px;
  object-fit: cover;
}

/* The media sits on the card's own 9px padding; the copy is inset a further 23, which is the
   design's 32 from the card edge. */
.as-pasl-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding-inline: 23px;
}

.as-pasl-card__title {
  margin: 20px 0 0;
  color: var(--as-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}

/* width, not max-width, and deliberately 10px WIDER than the 310px content box. Figma wraps this
   text in its own 320px frame, and the design's render shows the result overhanging the card's
   right padding by a pixel. Building to the padding box instead wraps cards 2 and 5 to FOUR lines
   where the design has three. At 320 Chrome reproduces the design's exact break points, each line
   about 1.4% wider than Figma sets it: [272, 253, 314] against the design's [269, 249, 310]. */
.as-pasl-card__text {
  width: 320px;
  max-width: 100%;
  margin: 12px 0 0;
  color: var(--as-text-soft);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-body);
  font-weight: 400;
  line-height: var(--as-lh-body);
}

/* D3: `.as-pasl-card__foot` and `.as-pasl-card__more` lived here and are deleted with the six
   "Plačiau" pills they styled. `.as-acard__more` on Projektai, which they were copied from, is a
   real link to a real project page and is untouched. */

/* --- The #fdfcfd band wrapping process + audience ------------------------- */

/* padding-bottom 114, not 110: the design's band ends at 3640 and the footer starts at 3644,
   leaving a 4px sliver of page grey between two colours three values apart. That is an artifact of
   the band being drawn x-1 w1442, not a design intent, so the band runs to the footer.
   A DELIBERATE 4px DEVIATION - flagged for Matas rather than left to surface as a finding. */
section.as-pasl-band {
  /* #fdfcfd removed 2026-10-01, for the same reason as .as-karj-values. */
  padding-top: var(--as-section-y);
  padding-bottom: var(--as-section-y);
}

/* --- Process: 4 zig-zag steps -------------------------------------------- */

.as-pasl-process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 27px;
  margin: 49px 0 0;
  padding: 0;
  list-style: none;
}

/* A fixed column height plus margin-top:auto is what makes the zig-zag: the text-first steps push
   their media to the bottom, the media-first steps push their text down. */
.as-pasl-step {
  display: flex;
  flex-direction: column;
  height: 579px;
}

.as-pasl-step--text-first .as-pasl-step__media { margin-top: auto; }
.as-pasl-step--media-first .as-pasl-step__text { margin-top: auto; order: 2; }

.as-pasl-step__icon {
  display: flex;
  align-items: center;
  width: 40px;
  height: 40px;
}

.as-pasl-step__icon img { display: block; }

/* 24/700/lh28 in #292d30 - NOT --as-ink, and the line-height is 28 where every other title on this
   project uses 36. Both are unique to this section. */
.as-pasl-step__title {
  margin: 23px 0 0;
  color: #292d30;
  font-family: Inter, system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
}

/* #888889, not --as-muted. The max-width is set per step in the pattern - the design frames are
   240 / 240 / 240 / 212 - so this rule only carries the fallback. */
.as-pasl-step__body {
  max-width: var(--as-bw, 240px);
  margin: 15px 0 0;
  color: var(--as-text-soft);
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
}

.as-pasl-step__media {
  position: relative;
  margin: 0;
  line-height: 0;
}

.as-pasl-step__media img {
  display: block;
  width: 273px;
  height: 384px;
  border-radius: 10px;
  object-fit: cover;
}

/* Same arrangement as Karjera's value numerals: bottom-left where the media sits low, top-right
   where it sits high. Verified against the render, not assumed from symmetry. */
.as-pasl-step__num {
  position: absolute;
  margin: 0;
  color: var(--as-white);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-h2);
  font-weight: 500;
  line-height: var(--as-lh-h2);
}

.as-pasl-step--text-first  .as-pasl-step__num { left: 20px; bottom: 0; }
.as-pasl-step--media-first .as-pasl-step__num { right: 20px; top: 20px; }

/* --- Audience: 3 cards ---------------------------------------------------- */

/* 218 above, and 37 below the heading where the process grid uses 49. The two heading gaps differ
   on purpose; 37 is the same value the Homepage's service grid uses. Do not unify them. */
.as-pasl-aud { margin-top: 218px; }

.as-pasl-aud__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 27px;
  margin: 37px 0 0;
  padding: 0;
  list-style: none;
}

/* The tile / +40 / +23 rhythm is copied from .as-svc rather than shared with it: .as-svc is
   height: 403px fixed and these cards are 568. */
/* Same reason as .as-pasl-card - the body text is wider than the padding box on purpose. */
.as-pasl-audcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
  height: 568px;
  padding: 49px;
  background: var(--as-white);
  border-radius: 10px;
}

.as-pasl-audcard__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background: var(--as-surface-2);
  border-radius: 6px;
}

.as-pasl-audcard__icon img { display: block; }

.as-pasl-audcard__title {
  margin: 40px 0 0;
  color: var(--as-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-h3);
  font-weight: 700;
  line-height: var(--as-lh-h3);
}

/* Same story as the card bodies: the design's frames are 278 / 278 / 286 inside a 276px content
   box, so the text overhangs its own padding by design. At 278 Chrome reproduces card 1's six
   lines and their break points exactly ([264,219,237,257,206,222] against [260,216,235,254,204,219]).
   Card 3 is the exception - its design frame of 286 is a hair too tight for Chrome's ~1.4% wider
   setting, which splits the last line and yields six lines where the design has five. 290 restores
   the design's five lines and its exact breaks. */
.as-pasl-audcard__text {
  width: 278px;
  margin: 23px 0 0;
  color: var(--as-text-soft);
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

/* Bottom-anchored: the three bodies run 6 / 4 / 5 lines yet all three checklists start on the same
   y in the design, so it is margin-top:auto and NOT a fixed body height. */
.as-pasl-audcard__checks {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.as-pasl-check {
  display: flex;
  align-items: center;
  gap: 12px;
}

.as-pasl-check + .as-pasl-check { margin-top: 12px; }

.as-pasl-check__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
}

.as-pasl-check__icon img { display: block; }

/* The third card only - see the note above .as-pasl-audcard__text. */
.as-pasl-audcard:nth-child(3) .as-pasl-audcard__text { width: 290px; }

/* nowrap: every one of the twelve labels is a single 20px line in the design, and the longest
   ("Aiškus procesas ir bendradarbiavimas") is 255px against the 248px the card's padding leaves -
   so the design's own label overhangs its padding, exactly like the body frames on this page.
   Without nowrap that one row wraps to two lines and, because the list is bottom-anchored, drags
   the whole checklist up. Released again below 1440, where the cards are genuinely narrower. */
.as-pasl-check__label {
  white-space: nowrap;
  color: var(--as-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

/* --- Below 1440 ----------------------------------------------------------- */

@media (max-width: 1439px) {
  .as-pasl-head__grid {
    grid-template-columns: minmax(0, 534px) minmax(0, 600px);
    column-gap: 32px;
  }

  .as-pasl-step__media img { width: 100%; }
}

@media (max-width: 1439px) {
  /* Below the design frame the fixed wrap widths would overflow their cards, so the text goes
     back to filling its own padding box. */
  .as-pasl-card__text,
  .as-pasl-audcard__text,
  .as-pasl-audcard:nth-child(3) .as-pasl-audcard__text { width: auto; }

  .as-pasl-check__label { white-space: normal; }
}

@media (max-width: 1200px) {
  /* D3: `grid-template-rows: auto` released the desktop rows; `grid-auto-rows: 1fr` re-applies
     the equalisation to however many implicit rows two columns produce, so all six cards still
     match here. It is switched back off in the single-column breakpoint below. */
  .as-pasl-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 1fr; }
  .as-pasl-process__grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-pasl-aud__grid      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-pasl-audcard        { height: auto; min-height: 568px; }
}

@media (max-width: 1023px) {
  .as-pasl-head__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .as-pasl-services   { padding-top: 80px; padding-bottom: 64px; }
  section.as-pasl-band { padding-top: 64px; padding-bottom: 64px; }
  .as-pasl-aud        { margin-top: 96px; }
  .as-pasl-step       { height: auto; row-gap: 32px; }
  .as-pasl-step--media-first .as-pasl-step__text { margin-top: 0; }
}

@media (max-width: 767px) {
  .as-pasl-services__grid,
  .as-pasl-process__grid,
  .as-pasl-aud__grid { grid-template-columns: minmax(0, 1fr); }

  /* One card per row - equal rows would only pad five of the six with empty space. */
  .as-pasl-services__grid { grid-auto-rows: auto; }

  .as-pasl-head__btn { margin-top: 40px; }
  .as-pasl-audcard { height: auto; min-height: 0; padding: 32px; }
  .as-pasl-step__body { max-width: none; }
}

/* ==========================================================================
   Apie mus - design frame 1440, document height 3885
   ========================================================================== */

/* --- Hero: full-bleed photo, 0-790 ---------------------------------------- */

/* Same mechanism as .as-hero on the Homepage - a static background-image on a plain section, no
   core/cover - but NOT the same class: sharing it would move the signed-off Homepage. Three
   numbers differ (padding-top 395, lead 22/36, no actions row), and the photo is a DIFFERENT
   picture from assets/img/hero.jpg. The 40% scrim is baked into the export, as it is on Home. */
.as-apie-hero {
  min-height: min(790px, 88svh);
  box-sizing: border-box;
  padding-top: clamp(200px, 50svh, 395px);
  padding-bottom: var(--as-section-y);
  background-color: #11110f;
  /* Relative to this stylesheet, i.e. the theme root - so it survives any install path, and so no
     inline style attribute lands on the block and breaks its validation. */
  background-image: url("assets/img/apie-mus/hero.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.as-apie-hero__title {
  margin: 0;
  max-width: 650px;
  color: #f4f4f4;
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-h1);
  font-weight: 500;
  line-height: var(--as-lh-h1);
}

.as-apie-hero__lead {
  max-width: 650px;
  margin: 24px 0 0;
  color: #f4f4f4;
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-lead);
  font-weight: 400;
  line-height: var(--as-lh-lead);
}

/* --- Mūsų kelias: dark band, 790-1377 - VOLATILE, SELF-CONTAINED ---------- */

/* The client has said this section will change. It is deliberately isolated: a fixed-height
   full-bleed band that nothing else reads a value from, so deleting the section and this block
   returns the page to the layout the spec describes without touching anything below.

   The band has NO NODE in the nodemap - it was measured off the render. Building straight from the
   JSON puts this section on the #f9f9f9 page background, where the inactive #2c343a years and
   rules are effectively invisible and the section looks broken - while every measurable anchor
   still passes, because all the text boxes are in the right place. Vision-pass-only. */
section.as-apie-kelias {
  height: 488px;
  background: var(--as-ink);
  /* The timeline track deliberately overruns the content box (see below), so the band clips it
     rather than letting it blow the zero-horizontal-overflow gate.
     `clip`, NOT `hidden`: hidden makes this a scroll container, and a scroll container becomes the
     scrollport that `view()` measures against - so the slide-in below read as already finished at
     every scroll position, because inside this box the children are always fully in view. `clip`
     clips exactly the same and creates no scrollport, so `view()` resolves to the page. */
  overflow: clip;
}

/* CONSISTENCY PASS (2026-10-01): the client called this band "nonsense" - a 34px year row, the same
   year again at 178px, and its description at 16px in an unrelated column. The year row is now an
   h3, the active year and its description sit together as one block under the track at the
   page's own h1/lead sizes, and the rules stop above that block instead of running through it.
   Band height 529 -> 488 follows from that; nothing else on the page reads it. */
.as-apie-kelias__stage { position: relative; height: 488px; }

.as-apie-kelias__title {
  position: absolute;
  top: var(--as-section-y);
  left: 0;
}

/* Positioned from the CONTAINER's content box, not from a centred 1440 frame: .as-container
   already carries the 132px gutter and centres itself, so the track starts on the gutter at every
   width and simply overflows to the right, which is what the design does - the last year label
   reaches x 1425 against a 1308 content edge. */
.as-apie-kelias__track {
  position: absolute;
  top: 172px;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Stride 292, set per item in the pattern. */
.as-apie-kelias__item { position: absolute; top: 0; }

.as-apie-kelias__dot {
  position: absolute;
  top: 0;
  left: 0;
  /* 10 x 10.53, read straight off the design's own five RECTANGLE nodes (141:707/712/715/718/721,
     all at y939). Briefly changed to 11x11 on 2026-08-18 after verify reported "width 16px vs
     design 11px" - but that finding is node 141:606, a Group at y3267 in the CTA, not a dot. A
     fuzzy match on a differently-sized element is not a measurement of this one. */
  width: 10px;
  height: 10.5px;
  border-radius: 60px;
  background: #2c343a;
}

/* 1px rule dropping from just under the dot. Re-measured against the UPDATED Figma (file modified
   2026-08-17 07:34Z): the whole timeline moved up and got shorter. Design y values, container at
   790: dot 939, rule 944, year 963, big 1015, body 1075, band height 529.

   Found by `verify-figma` in GENERIC mode against the live file, not by eye. The cockpit's cached
   copy of this page was from Aug 12 and would have reported the page clean against the old design -
   which is the staleness failure already logged as friction, now observed rather than predicted. */
.as-apie-kelias__rule {
  position: absolute;
  top: 5px;
  left: 3px;
  width: 0;
  height: 72px;
  /* A border, not a filled 1px box: renders identically, but it is how the design draws these.
     The colour is set on ALL FOUR sides even though only the left has width - with just
     border-left-color set, the other three fall back to currentColor (#11181f, inherited) and a
     DOM harvest reads that as the element's border colour. */
  border: 0 solid #2c343a;
  border-left-width: 1px;
}

.as-apie-kelias__yr {
  position: absolute;
  top: 28px;
  left: 35px;
  /* Was #2c343a: 1.3:1 on the band, so the inactive years were all but invisible. */
  color: #7d858d;
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-h3);
  font-weight: 600;
  line-height: var(--as-lh-h3);
}

.as-apie-kelias__item.is-active .as-apie-kelias__dot  { background: var(--as-accent); }
.as-apie-kelias__item.is-active .as-apie-kelias__rule { border-color: var(--as-accent); }
.as-apie-kelias__item.is-active .as-apie-kelias__yr   { color: #f4f4f4; }

/* The per-year description is the vertical layout's. On desktop the design gives one description to
   the active step alone, printed once below the track, so these stay out of the way. */
.as-apie-kelias__inline { display: none; }

/* ---- Vertical on anything narrower than the horizontal stride needs ----
   The track is absolutely positioned at a fixed 292px stride, so below roughly 1300px the later
   items fall outside the viewport and the band's own clipping erases them. Measured at 360px before
   this existed: 2020, 2023 and 2025 sat at x 639, 931 and 1223, off-screen with no way to reach
   them - three of five years silently lost.

   Vertical is also where the wireframe's five descriptions are actually readable: each year carries
   its own line, so the reading order is plain top to bottom and nothing depends on which step is
   current.

   No markup changes. Every piece is un-positioned back into flow, and `position: static` is what
   makes the item's INLINE `left: Npx` inert - the one position value that ignores a left offset
   without needing an important flag against an inline style. */
@media (max-width: 1300px) {
  section.as-apie-kelias {
    height: auto;
    overflow: visible;
    padding-top: 64px;
    padding-bottom: 72px;
  }

  .as-apie-kelias__stage { height: auto; }

  .as-apie-kelias__title { position: static; margin: 0 0 36px; }

  .as-apie-kelias__track { position: static; display: block; }

  .as-apie-kelias__item {
    position: static;                 /* kills the inline left: Npx */
    display: grid;
    grid-template-columns: 11px 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 20px;
  }

  .as-apie-kelias__dot {
    position: static;
    grid-column: 1;
    grid-row: 1;
    width: 11px;
    height: 11px;
    margin-top: 10px;                 /* optically centres the dot on the 32px year line */
  }

  /* The connector becomes the vertical run between one dot and the next, so it is sized by the row
     rather than by the design's 323px, which only meant anything horizontally. It has to span the
     description too, or it stops at the year and the steps look disconnected. */
  .as-apie-kelias__rule {
    position: static;
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    width: 0;
    height: auto;
    min-height: 28px;
    align-self: stretch;
  }

  .as-apie-kelias__item:last-child .as-apie-kelias__rule { display: none; }

  .as-apie-kelias__yr {
    position: static;
    grid-column: 2;
    grid-row: 1;
    font-size: var(--as-fs-h3);
    line-height: var(--as-lh-h3);
  }

  .as-apie-kelias__inline {
    display: block;
    grid-column: 2;
    grid-row: 2;
    max-width: 46ch;
    margin: 6px 0 26px;
    color: #9aa1a8;
    font-family: Inter, system-ui, sans-serif;
    font-size: var(--as-fs-body);
    font-weight: 400;
    line-height: var(--as-lh-body);
  }

  /* The active step keeps the emphasis it has on desktop. */
  .as-apie-kelias__item.is-active .as-apie-kelias__inline { color: #f4f4f4; }

  /* The single desktop description and its oversized year belong to the horizontal layout; here
     each year carries its own line instead. */
  .as-apie-kelias__big,
  .as-apie-kelias__body { display: none; }
}

/* ---- The band slides in the first time you scroll to it ----
   A ONE-SHOT reveal, not a scroll-linked one, and the difference is the whole point. A scroll-linked
   animation is reversible: scroll back and it un-animates, so at any moment an element may be
   mid-flight. That is fine for a reader and fatal for measurement - the design comparison harvests
   at scroll positions nobody controls, and two attempts at tying this to scroll progress caught
   elements in motion and reported them as displacement (1 critical + 1 major became 2 + 2, with
   gap defects and a phantom missing element). Ending the ranges earlier only reduced the odds.

   A reveal that fires once and never reverses has no such window: after the first sight of the
   section everything is at its designed position permanently, so the page measures exactly as it
   did before the animation existed.

   The hidden state is applied by SCRIPT (`.is-revealing`), never by the stylesheet, so a browser
   with JavaScript off shows the finished design rather than four invisible elements. That is also
   why the transition lives on the element and not on a keyframe: nothing to run, nothing to fail.

   `translate` rather than `transform`, so this cannot collide with a transform the design needs. */
.as-apie-kelias.is-revealing .as-apie-kelias__title,
.as-apie-kelias.is-revealing .as-apie-kelias__track,
.as-apie-kelias.is-revealing .as-apie-kelias__big,
.as-apie-kelias.is-revealing .as-apie-kelias__body {
  opacity: 0;
  translate: 0 32px;
}

.as-apie-kelias.is-revealing .as-apie-kelias__title,
.as-apie-kelias.is-revealing .as-apie-kelias__track,
.as-apie-kelias.is-revealing .as-apie-kelias__big,
.as-apie-kelias.is-revealing .as-apie-kelias__body {
  transition: opacity .75s ease, translate .75s cubic-bezier(.22, .68, .3, 1);
}

/* Arrives in reading order rather than as one slab. */
.as-apie-kelias.is-revealing .as-apie-kelias__track { transition-delay: .10s; }
.as-apie-kelias.is-revealing .as-apie-kelias__big   { transition-delay: .20s; }
.as-apie-kelias.is-revealing .as-apie-kelias__body  { transition-delay: .30s; }

.as-apie-kelias.is-revealed .as-apie-kelias__title,
.as-apie-kelias.is-revealed .as-apie-kelias__track,
.as-apie-kelias.is-revealed .as-apie-kelias__big,
.as-apie-kelias.is-revealed .as-apie-kelias__body {
  opacity: 1;
  translate: none;
}

@media (prefers-reduced-motion: reduce) {
  .as-apie-kelias.is-revealing .as-apie-kelias__title,
  .as-apie-kelias.is-revealing .as-apie-kelias__track,
  .as-apie-kelias.is-revealing .as-apie-kelias__big,
  .as-apie-kelias.is-revealing .as-apie-kelias__body {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* The design's 178.11/220.02 watermark became an ordinary h1-sized year in the consistency pass. */
.as-apie-kelias__big {
  position: absolute;
  top: 272px;
  left: 35px;              /* the year labels' own left edge */
  margin: 0;
  color: #f4f4f4;
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-h1);
  font-weight: 500;
  line-height: var(--as-lh-h1);
}

.as-apie-kelias__body {
  position: absolute;
  top: 344px;
  left: 35px;
  width: 560px;
  margin: 0;
  color: #f4f4f4;
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-lead);
  font-weight: 400;
  line-height: var(--as-lh-lead);
}

/* ---- Walking the years -------------------------------------------------------------------
   Every step changes exactly two things: which item is active, and the text in the two display
   elements. No geometry moves, so this cannot disturb the layout the design fixes - which is the
   whole reason the band can animate at all without growing.

   These transitions are declared on the resting state, not on a state class, so a step is smooth
   in both directions - the reader can take a year back by clicking it and it eases rather than
   snaps. At rest every computed value is the design's, so a harvest that catches the band between
   steps still measures finished colours. */
.as-apie-kelias__dot  { transition: background-color .32s ease; }
.as-apie-kelias__rule { transition: border-color .32s ease; }
.as-apie-kelias__yr   { transition: color .32s ease; }

/* The year labels are the pause mechanism (WCAG 2.2.2) and the manual control, built out of what
   the design already draws rather than a control it does not have. Only the cursor and the focus
   ring are added, both of which appear on interaction and so are absent from any harvest. */
.as-apie-kelias__yr[role='button'] { cursor: pointer; }
.as-apie-kelias__yr[role='button']:focus-visible {
  outline: 2px solid var(--as-accent);
  outline-offset: 6px;
  border-radius: 2px;
}

/* ONE STEP IS ONE EVENT, and the timings here exist to make that true.

   out 220ms -> everything is exchanged at 220ms -> in 320ms, and the dot, rule and year label
   above transition over the same 320ms. So the column lights up in step with the number it belongs
   to and they finish together.

   It used to be three different clocks: the active class moved at 0ms, the text swapped at 260ms,
   colours eased over 550ms, and the fade itself ran 450ms - which meant the text was exchanged
   while still 42% visible, so the swap was seen rather than hidden. Reported as "you can see
   really small differences in the time it switches and it looks bad".

   Scoped to .is-walking rather than .is-revealed: both the reveal and the walk animate opacity on
   these two elements, and the reveal's own .75s rule is equally specific. .is-walking is added
   only once the reveal is over, so the two never argue. */
.as-apie-kelias.is-walking .as-apie-kelias__big,
.as-apie-kelias.is-walking .as-apie-kelias__body {
  transition: opacity .32s ease, translate .32s cubic-bezier(.22, .68, .3, 1);
}
.as-apie-kelias.is-walking .as-apie-kelias__big.is-swapping,
.as-apie-kelias.is-walking .as-apie-kelias__body.is-swapping {
  opacity: 0;
  translate: 0 8px;
  transition: opacity .22s ease, translate .22s ease;
}

@media (prefers-reduced-motion: reduce) {
  .as-apie-kelias__dot,
  .as-apie-kelias__rule,
  .as-apie-kelias__yr,
  .as-apie-kelias__big,
  .as-apie-kelias__body { transition: none; }
}

/* ---- Mobile rows arrive as they are scrolled to ----
   Scroll-driven is right on this axis and wrong on the other: the vertical list lays its steps
   ALONG the scroll direction, so each row owns real screen space and a reader can stop on one for
   as long as they like. One-shot per row, so scrolling back never re-hides copy mid-sentence.
   The hidden state is added by script, so with JavaScript off every row is simply visible. */
@media (max-width: 1300px) {
  .as-apie-kelias__item {
    transition: opacity .6s ease, translate .6s cubic-bezier(.22, .68, .3, 1);
  }
  .as-apie-kelias__item.is-row-hidden {
    opacity: 0;
    translate: 0 24px;
  }
}

@media (max-width: 1300px) and (prefers-reduced-motion: reduce) {
  .as-apie-kelias__item { transition: none; }
  .as-apie-kelias__item.is-row-hidden { opacity: 1; translate: none; }
}

/* --- Mūsų vertybės: 2 x 2 cards ------------------------------------------ */

/* 169px, not 111. The design puts the timeline band at 790..1319 and this section's heading at
   1488, so the gap after the band is 169. The old 111 only ever worked because the band was built
   58px too tall - the total to the next heading came out right while both halves were wrong, which
   is why shortening the band to its real 529 dropped every element below it by exactly 58px. The
   spacing belongs to this section, not inside the band. */
.as-apie-values { padding-block: var(--as-section-y); }

.as-apie-values__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* D2: all four cards the same height. The wireframe bodies are 343/410/323/337 characters,
     so left to themselves the four cards would be four different heights and the 2x2 block
     would read as ragged. `1fr` auto-rows makes every row equal to the tallest, and the cards
     stretch into their row, so the grid is a regular 2x2 again - which is what Matas asked
     for when he said fix the proportions and symmetry.
     2026-10-01: `auto` instead. `1fr` made every row as tall as the tallest card in the whole grid,
     so the lower row carried ~70px of empty card - which Matas then flagged. The two cards of a row
     still match each other; the rows no longer copy each other. */
  grid-auto-rows: auto;
  gap: 32px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

/* NOT .as-svc: that is 374x403 with a 64px r6 tile, a 32px icon and a Plus Jakarta 24/36 title.
   Everything here differs. */
.as-apie-value {
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
  /* Was a fixed `height: 301px`, which fitted the design's three truncated lines and nothing
     else. The full copy runs to six or seven lines, so the height is content-driven now and
     equalised by the grid's `grid-auto-rows: 1fr` above. */
  padding: 29px 30px 40px 40px;
  background: #fdfcfd;
  border-radius: 10px;
  box-shadow: 0 1px 4px #f3f3f3;
}

/* 46x46 at card + (38, 29). The nodemap carries this chip for card 4 ONLY; all four were measured
   off the render and are consistent, so the three missing ones are a nodemap gap, not a design
   difference. The 0.697px border rounds to nothing Chrome can draw, so it is a 1px hairline. */
.as-apie-value__chip {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-left: -2px;       /* padding-left 40 -> chip at card + 38 */
  background: var(--as-surface-2);
  border: 1px solid var(--as-hairline);
  border-radius: 4.18px;
  box-sizing: border-box;
}

.as-apie-value__chip img { display: block; }

.as-apie-value__title {
  margin: 27px 0 0;        /* chip bottom 1676 -> title 1703 */
  color: var(--as-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-h3);
  font-weight: 700;
  line-height: var(--as-lh-h3);
}

.as-apie-value__text {
  margin: 16px 0 0;
  color: var(--as-text-soft);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-body);
  font-weight: 400;
  line-height: var(--as-lh-body);
}

/* D2: `.as-apie-value__foot` and `.as-apie-value__more` lived here and are deleted with the
   "Skaityti daugiau" links they styled. Nothing else uses them - the news cards carry their own
   `.as-ncard__more`, which is a real link to a real article and stays. */

/* --- Misija / Vizija: two alternating, vertically centred rows ------------ */

.as-apie-mv {
  padding-top: var(--as-section-y);
  padding-bottom: var(--as-section-y);
}

.as-apie-mv__row {
  display: grid;
  grid-template-columns: repeat(2, 558px);
  gap: 60px;               /* 558 + 60 + 558 = 1176 exactly */
  justify-content: space-between;
  /* Centred, not top-aligned: the design's image centre and text centre agree to half a pixel. */
  align-items: center;
}

.as-apie-mv__row + .as-apie-mv__row { margin-top: 64px; }   /* was 103, off the 8px grid */

.as-apie-mv__row--media-first .as-apie-mv__copy  { order: 2; }
.as-apie-mv__row--media-first .as-apie-mv__media { order: 1; }

/* 48/63/500 in INK, not orange. .as-h2 ships --accent and --onDark only, so the colour is set
   here rather than adding a third modifier to a shared class. */
.as-apie-mv__title {
  margin: 0;
  color: var(--as-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-h2);
  font-weight: 500;
  line-height: var(--as-lh-h2);
}

.as-apie-mv__text {
  margin: 24px 0 0;
  color: var(--as-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-lead);
  font-weight: 400;
  line-height: var(--as-lh-lead);
}

.as-apie-mv__media { margin: 0; line-height: 0; }

.as-apie-mv__media img {
  display: block;
  width: 100%;
  height: 220px;
  border-radius: 10px;
  object-fit: cover;
}

/* --- Below 1440 ----------------------------------------------------------- */

@media (max-width: 1439px) {
  .as-apie-mv__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  /* D2: `.as-apie-value__text` was listed here to undo the per-card inline max-width. That
     inline style is gone - all four bodies now fill the card - so only the mission/vision copy,
     which still carries one, needs the override. */
  .as-apie-mv__text { max-width: none !important; }
}

@media (max-width: 1023px) {
  .as-apie-hero { height: auto; min-height: 560px; padding-top: 220px; padding-bottom: 80px; }

  .as-apie-values { padding-top: 72px; }
  .as-apie-values__grid { grid-template-columns: minmax(0, 1fr); }
  /* D2: the desktop rule no longer sets a fixed height, but the single-column grid below
     1023px still needs the row equalisation switched off - one card per row means "equal rows"
     would stretch every card to the tallest body on the page. */
  .as-apie-values__grid { grid-auto-rows: auto; }

  .as-apie-mv { padding-top: 96px; padding-bottom: 96px; }
  .as-apie-mv__row { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .as-apie-mv__row--media-first .as-apie-mv__copy,
  .as-apie-mv__row--media-first .as-apie-mv__media { order: 0; }
  .as-apie-mv__row + .as-apie-mv__row { margin-top: 64px; }
}

/* (2026-10-01) This page's title used to drop to 40px here while every other page title stayed at
   56 until 640 and then went to 34. It now takes the same two steps as the others. */

@media (max-width: 767px) {
  .as-apie-value { padding: 24px 24px 20px; }
  .as-apie-value__title { font-size: 20px; line-height: 26px; }

}

/* The timeline loses three of its five years on a phone, and loses them silently.
   The track is absolutely positioned at a fixed 292px stride, so below roughly 1300px the later
   items fall outside the viewport and the band's own `overflow: hidden` erases them. Measured at
   360px: 2020, 2023 and 2025 sit at x 639, 931 and 1223 - off-screen with no way to reach them.

   It stayed hidden from our own mobile audit precisely BECAUSE the band clips: the document
   reports no horizontal overflow, and the per-element check skips anything inside a clipping
   ancestor (added to stop carousel slides being reported as escaping). The cockpit's verify caught
   it - "the page is clamping it, which hides the scrollbar without fixing the layout".

   There is no mobile design for this band, so this does the least inventive thing that stops
   losing content: the band scrolls horizontally instead of swallowing what does not fit. A
   designed mobile treatment (a stacked vertical timeline) would be better and is a design
   question, not a CSS one. */
@media (max-width: 1300px) {
  section.as-apie-kelias {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* The track's absolutely-positioned items only contribute to the scrollable area if something
     in flow is as wide as they reach: 4 strides of 292 plus the last year's own width. */
  .as-apie-kelias__stage::after {
    content: "";
    display: block;
    width: calc(4 * 292px + 120px);
    height: 1px;
  }
}

/* --- Contact Form 7 chrome on the Kontaktai form ------------------------- */

/* CF7 emits three things the design has no room for. The field markup itself lives in the CF7
   form template and already carries this theme's classes, so only the plugin's own furniture
   needs handling here.

   1. The AJAX SPINNER is always in the DOM as an inline-block 24px box directly after the submit
      button. It made the form 29px taller, which pushed the map, the CTA and the footer down 26px
      and the document height to 2606 against the design's 2580 - the anchors caught it at once.
      Taken out of flow rather than hidden, so it still appears while a submission is in flight. */
.as-kont-form__form { position: relative; }

.as-kont-form__form .wpcf7-spinner {
  position: absolute;
  right: 24px;
  bottom: 17px;            /* centred on the 58px submit button */
  margin: 0;
}

/* 2. The RESPONSE OUTPUT is display:none until a submission resolves, so it costs no height on
      first paint - but when it appears it must not look like a plugin default. */
.as-kont-form__form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--as-line);
  border-radius: 8px;
  color: var(--as-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--as-fs-small);
  line-height: var(--as-lh-small);
}

.as-kont-form__form.sent .wpcf7-response-output {
  border-color: var(--as-accent);
  background: #fff8f2;
}

.as-kont-form__form.invalid .wpcf7-response-output,
.as-kont-form__form.failed .wpcf7-response-output,
.as-kont-form__form.spam .wpcf7-response-output {
  border-color: #c0392b;
  background: #fdf3f2;
}

/* 3. The PER-FIELD validation tip appears under an invalid input. It only exists after a failed
      submit, so it changes no measured position on load. */
.as-kont-form__form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: #c0392b;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 18px;
}

.as-kont-form__form .wpcf7-not-valid { border-color: #c0392b; }

/* CF7 wraps every control in an inline span; as an inline box it would sit on a text baseline and
   leave descender space under each field. */
.as-kont-field .wpcf7-form-control-wrap,
.as-kont-textarea .wpcf7-form-control-wrap { display: block; }

/* The submit is an <input>, so it cannot hold the <span> that .as-btn > span styles. */
input.as-kont-form__submit { display: flex; width: 100%; }

/* ---------------------------------------------------------------------------
   Long-form text pages (Privatumo politika, Slapukų politika)

   No Figma design exists for these - the footer has linked them from all nine designed pages
   since the build began, so the design assumes them without drawing them. Rather than invent a
   visual language, this reuses the shared page head and adds only what prose actually needs.

   The one measurement that is not borrowed is the line length. Body copy elsewhere on this site
   sits in cards and columns that constrain it; a policy page has nothing to constrain it, and
   1176px of unbroken 16px text runs to roughly 150 characters per line - about twice the length
   at which people reliably track from the end of one line to the start of the next.

   The value is 54ch and NOT the 68ch this first shipped with, because `ch` is the width of the
   glyph "0" - 10.09px in Inter at 16px - while the average character here is nearer 7.8px. So
   68ch measured 88 real characters per line, comfortably outside the 45-75 range it was chosen to
   sit in the middle of. Counted with Range rects on the rendered page rather than derived from
   font-size, which is what caught it: 54ch lands at ~70. A unit that looks like it means
   "characters" does not.
   --------------------------------------------------------------------------- */

.as-prose-wrap { padding-top: 56px; padding-bottom: 96px; }

.as-prose {
  max-width: 54ch;
  color: var(--as-ink-soft);
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  line-height: 28px;
}

.as-prose > * + * { margin-top: 20px; }

.as-prose h2 {
  margin-top: 48px;
  color: var(--as-ink);
  font-size: var(--as-fs-h3);
  font-weight: 600;
  line-height: var(--as-lh-h3);
}

.as-prose h3 {
  margin-top: 32px;
  color: var(--as-ink);
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
}

.as-prose h2:first-child,
.as-prose h3:first-child { margin-top: 0; }

.as-prose a { color: var(--as-accent); text-decoration: underline; }
.as-prose a:hover { text-decoration: none; }

.as-prose ul,
.as-prose ol { padding-left: 22px; }
.as-prose li + li { margin-top: 8px; }

.as-prose strong { font-weight: 500; color: var(--as-ink); }

/* The client has to fill these in, so they must be impossible to miss in a page of grey text -
   and impossible to publish by accident. */
.as-prose .as-todo {
  /* `inline-block` made the marker an unbreakable box, so a long one took the whole line and
     pushed the sentence's closing full stop onto a line of its own. `inline` lets it wrap with the
     text like the highlight it is, and box-decoration-break paints the padding and border on every
     line fragment instead of only the first and last. */
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 2px 8px;
  border-radius: 4px;
  background: #fff3cd;
  box-shadow: inset 0 0 0 1px #e0a800;
  color: #6b4e00;
  font-weight: 500;
}

@media (max-width: 767px) {
  .as-prose-wrap { padding-top: 40px; padding-bottom: 64px; }
  .as-prose h2 { font-size: 24px; line-height: 32px; margin-top: 36px; }
}


/* ==========================================================================
   MOBILE RHYTHM - one set of numbers for the whole site
   ==========================================================================

   THE PROBLEM THIS SOLVES. Every page was built to its own 1440 Figma frame, and each frame
   carried its own vertical spacing. Below the design width those values were stepped down page by
   page, so by 430px the nine pages between them used NINETEEN different section paddings:

       132 118 96 93 88 82 81 80 72 71 64 62 56 48 40.6 32 31 30 0

   None of that is wrong against any design, because there is no mobile design. It is wrong
   against itself: gaps that differ by 8 or 11 px read as sloppy rather than as intent, and that
   is what "everything has weird gaps" means when a person says it (Matas, 2026-08-19).

   THE DECISION, and the alternative it was taken over. Mobile spacing now comes from a fixed
   8px scale, NOT from scaling each desktop value by a constant ratio. Scaling was the obvious
   other answer and it is defensible - it would preserve the designer's proportions. It was
   rejected because those proportions are not a system: the 19 values above are the scatter of
   nine separately-drawn frames, so scaling reproduces the scatter faithfully at a smaller size.

   Desktop is untouched. Every rule here is inside a mobile media query, and the desktop build is
   still the signed-off pixel match that `./dc verify` compares against.

   The scale is declared unconditionally so it is greppable, but it is only ever USED below 768.
   -------------------------------------------------------------------------- */

:root {
  --as-m-1:  8px;
  --as-m-2: 16px;
  --as-m-3: 24px;
  --as-m-4: 32px;
  --as-m-5: 48px;
  --as-m-6: 64px;

  /* Section top and bottom padding. One value, everywhere. */
  --as-m-sec: 64px;

  /* Page heads clear the fixed header, which measures 96px at every mobile width.
     96 + 32 = 128, so the clearance is itself on the scale. */
  --as-m-head: 128px;
}

/* --- Section rhythm ---------------------------------------------------------
   Every top-level section gets the same top and bottom padding. Listed by name rather than as
   `main > section` on purpose: the per-page rules above are (0,1,0) or (0,2,0) and a descendant
   selector would silently lose to them, which is exactly the kind of failure that leaves one
   page out of the system with nothing reporting it. Matched specificity + last in the file wins.

   tools/mobile-rhythm.js fails the build if a section lands outside this scale, so a new page
   cannot quietly reintroduce a twentieth value. */
@media (max-width: 767px) {
  .as-stats,
  .as-services,
  .as-projects,
  .as-apie-kelias,
  .as-apie-values,
  .as-apie-mv,
  .as-pasl-services,
  .as-archive,
  .as-news,
  .as-kont-info,
  .as-karj-why,
  .as-karj-values,
  .as-karj-join,
  .as-overview,
  .as-gallery,
  .as-post,
  .as-cta,
  section.as-pasl-band,
  /* These four are written as `section.x` (0,1,1) further up so that they beat core's block
     paddings. Matched here, or they keep their desktop-derived values and stay off the scale. */
  section.as-apie-kelias,
  section.as-kont-info,
  section.as-karj-join,
  section.as-karj-values {
    padding-top: var(--as-m-sec);
    padding-bottom: var(--as-m-sec);
  }

  /* Stray section margins are the other way a gap escapes the scale: they add to the padding of
     both neighbours, so a 62px margin between two 64px paddings reads as 190px of nothing.
     The rhythm is owned by padding alone. */
  section.as-karj-join,
  section.as-kont-info { margin-top: 0; }

  /* The three CTA variants carry page-specific paddings at (0,2,0) so that each desktop document
     lands on its exact design height. Those heights mean nothing here. */
  .as-cta.as-cta--karj,
  .as-cta.as-kont-cta,
  .single-projektas .as-cta {
    padding-top: var(--as-m-sec);
    padding-bottom: var(--as-m-sec);
  }

  /* Page heads clear the header instead, and keep their zero bottom padding: the gap below a head
     is owned by the following section's top padding, so adding one here would double it. */
  .as-page-head {
    padding-top: var(--as-m-head);
    padding-bottom: 0;
  }

  /* The two image heroes size themselves; only their lower edge is part of the rhythm. */
  .as-hero__inner { padding-top: 176px; padding-bottom: var(--as-m-sec); }
  .as-apie-hero   { padding-bottom: var(--as-m-sec); }
}

/* --- Fill the measure --------------------------------------------------------
   THE SECOND HALF OF "it all looks left-anchored". Every one of these widths is a Figma text
   frame, correct at 1440 and meaningless at 430: a 188px cap inside a 390px column leaves 202px
   of empty gutter on the right of every line, and the eye reads that as content shoved into the
   left margin rather than as a column.

   Nothing here is centred. Centred body copy gives every line a different starting x, which is
   harder to read and is the usual way an amateur mobile layout announces itself. What fixes the
   ragged look is both edges landing on the same two verticals - so the blocks are released to
   fill the measure instead.

   The list came from measurement, not from reading the stylesheet: tools/mobile-rhythm.js walks
   every page at 430 and reports any text block whose own box is materially narrower than the box
   it was given. Anything added later gets caught the same way. */
@media (max-width: 767px) {
  .as-footer__about,
  .as-contact__text,
  .as-svc__text,
  .as-pasl-step__body,
  .as-karj-ben__text,
  .as-kont-row__body,
  .as-pasl-audcard__text,
  .as-pasl-audcard:nth-child(3) .as-pasl-audcard__text,
  .as-pasl-card__text,
  .as-acard__text,
  .as-ncard__text,
  .as-pcard__text {
    width: auto;
    max-width: none;
  }
}

/* --- Footer ------------------------------------------------------------------
   Matas's prime example of the left-anchoring, and it earned the title: at 430 the tagline was
   capped at 188px and the contact lines at 194px inside a 390px column, while the navigation
   used `repeat(2, max-content)` so its right column ended wherever the longest word happened to
   stop. Three different ragged right edges in one block.

   Every block now resolves to one of two verticals - the gutter, or the 50% line the two-column
   navigation sets. That is what reads as deliberate; centring the lot would not, because the
   contact rows are icon-led and centring them detaches each icon from its own text. */
@media (max-width: 767px) {
  .as-footer,
  .single-projektas .as-footer {
    padding-top: var(--as-m-sec);
    padding-bottom: var(--as-m-4);
  }

  .as-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--as-m-5); }

  /* 15px, not the design's 13. Thirteen is the floor tools/mobile-audit.js accepts and this is
     the longest run of prose in the footer; the links move with it so the block stays one voice. */
  .as-footer__about { margin-top: var(--as-m-3); }

  /* Two EQUAL columns. The right-hand column now starts on the 50% line on every phone instead
     of at the end of the longest label, which is the single change that makes this block read as
     a grid rather than as two ragged stacks. */
  .as-footer__list--nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--as-m-2) var(--as-m-3);
  }

  .as-contact { gap: var(--as-m-2) var(--as-m-2); }

  /* -7px is a desktop optical nudge that lines the 34px tile up under the 16px icon rail. On a
     phone it just hangs the only button in the footer 7px outside every other left edge. */
  .as-social { margin: 0; }

  .as-footer__bottom {
    margin-top: var(--as-m-5);
    padding-top: var(--as-m-3);
    gap: var(--as-m-2);
  }

  .as-footer__legal { gap: var(--as-m-3); flex-wrap: wrap; }
}

/* --- Paslaugos: Kaip dirbame on mobile ---------------------------------------
   THE DIAGNOSIS, which is not the one it looks like. The steps did not read as four units
   because THE GAP INSIDE A STEP WAS BIGGER THAN THE GAP BETWEEN STEPS: 32px of row-gap holding
   each step's own text to its own picture, against a 27px grid gap separating one step from the
   next. Proximity is the only thing telling a reader what belongs to what, and it was pointing
   the wrong way - so a picture appeared to belong to the text below it, which belonged to the
   next step.

   On top of that, `.as-pasl-step--media-first .as-pasl-step__text { order: 2 }` is a desktop
   zig-zag that nothing switched off, so steps 2 and 4 ran picture-then-text while 1 and 3 ran
   text-then-picture. Stacked in one column that puts two pictures next to each other and two
   text blocks next to each other, which is what "just thrown out there" was describing.

   Fixed by inverting the proximity (16 inside, 48 between) and running every step picture-first,
   so the numeral on the picture reads as the step's own label. Karjera's benefit cards use the
   identical treatment - see the note there - because Matas asked for the two to be consistent
   and they are the same content shape. */
@media (max-width: 767px) {
  .as-pasl-process__grid { gap: var(--as-m-5); margin-top: var(--as-m-4); }

  .as-pasl-step { row-gap: var(--as-m-2); }

  /* One order for all four. `order` is the desktop zig-zag and has no meaning in one column. */
  .as-pasl-step__media { order: 1; }
  .as-pasl-step--media-first .as-pasl-step__text,
  .as-pasl-step__text { order: 2; margin-top: 0; }

  /* 3:2 rather than the design's 273x384 portrait. A 384-tall picture in a single column pushes
     the step's own title off the screen, so the reader never sees a picture and its title at the
     same time - which is the whole point of binding them. */
  .as-pasl-step__media img { width: 100%; height: 220px; }

  /* A white numeral on an unknown photograph is a coin toss: step 02's picture is a bright
     daylight desk shot and the numeral disappeared into it. A scrim under the bottom third
     guarantees contrast whatever picture the client swaps in later. Mobile only - desktop draws
     the numeral over the design's own four photographs and is signed off. */
  .as-pasl-step__media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
    pointer-events: none;
  }

  .as-pasl-step__num { z-index: 1; }

  /* The numeral sits bottom-left on every step now that every picture leads. */
  .as-pasl-step--text-first  .as-pasl-step__num,
  .as-pasl-step--media-first .as-pasl-step__num {
    left: var(--as-m-2);
    bottom: var(--as-m-1);
    right: auto;
    top: auto;
  }

  /* Icon beside the title instead of stacked above it: it halves the height of the step's head
     and puts the icon, the title and the numeral in one glance. */
  .as-pasl-step__text {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: var(--as-m-2);
    align-items: center;
  }

  .as-pasl-step__icon  { grid-area: 1 / 1; }
  .as-pasl-step__title { grid-area: 1 / 2; margin: 0; }
  .as-pasl-step__body  { grid-column: 1 / -1; margin-top: var(--as-m-2); font-size: 16px; line-height: 26px; }
}

/* --- Paslaugos: Kam dirbame on mobile ----------------------------------------
   "The list doesn't look like a list, it looks like copied text with bold and a checkmark"
   (Matas, 2026-08-19) - an accurate description of a real bug, not a taste note.

   `.as-pasl-audcard__checks { margin: auto 0 0 }` is what bottom-anchors the checklist inside
   the design's fixed 568px card, so all three lists start on the same y. The mobile rule sets
   `height: auto`, and an `auto` margin in a flex column with no free space resolves to ZERO -
   so the list lost every pixel of separation from the paragraph above it and ran on as if it
   were the next sentence.

   Restoring a plain gap fixes the collapse; the hairline is what makes it read as a list, by
   giving the group an edge of its own rather than leaving four ticks floating in body copy. */
@media (max-width: 767px) {
  .as-pasl-audcard { padding: var(--as-m-4); }
  .as-pasl-audcard__title { margin-top: var(--as-m-3); }
  .as-pasl-audcard__text  { margin-top: var(--as-m-2); line-height: 26px; }

  .as-pasl-audcard__checks {
    margin: var(--as-m-4) 0 0;
    padding-top: var(--as-m-4);
    border-top: 1px solid var(--as-surface-2);
  }

  /* 12 -> 16, and top-aligned: a label that wraps to two lines put its tick against the middle
     of the pair, which detaches it from the line it belongs to. */
  .as-pasl-check + .as-pasl-check { margin-top: var(--as-m-2); }
  .as-pasl-check { align-items: start; gap: var(--as-m-2); }
  .as-pasl-check__icon { margin-top: 3px; }

  .as-pasl-aud__grid { gap: var(--as-m-3); margin-top: var(--as-m-4); }
  .as-pasl-aud { margin-top: var(--as-m-6); }
}

/* --- Karjera on mobile --------------------------------------------------------
   Matas asked for this page to match the Kaip dirbame treatment, and it should: .as-karj-val is
   the same content shape as .as-pasl-step - icon, title, body, photograph, big numeral - drawn
   as the same four-across zig-zag. So it gets the same three moves, for the same reasons: one
   order for every card, proximity inverted so a card holds together, and a scrim under the
   numeral.

   A REAL BUG FOUND ON THE WAY, and it is the reason this page looked worse than the others.
   Five per-item Figma widths are written as
       .as-karj-ben__item:nth-child(N) .as-karj-ben__text { width: 199px }   (0,3,0)
   and the intended release at 1439 is
       .as-karj-ben__title, .as-karj-ben__text { width: auto }               (0,1,0)
   which loses on specificity and has therefore never fired. Every benefit paragraph on this page
   has been capped at its 1440 Figma width - 199, 223, 183, 199, 211 - at EVERY viewport down to
   320, which is exactly the "left-anchored almost the whole page through" that was reported. The
   release below is written at matching specificity so it actually applies. */
@media (max-width: 1439px) {
  /* :nth-child() counts as a class for specificity, so the rules being released here are (0,3,0)
     and a two-class selector loses to them exactly the way the original release did. Matching
     the shape of the rule is what makes the override actually fire - measured, not assumed. */
  .as-karj-ben__item:nth-child(n) .as-karj-ben__title,
  .as-karj-ben__item:nth-child(n) .as-karj-ben__text { width: auto; }
}

@media (max-width: 767px) {
  /* Benefits: one column, and the fixed two-line title slot goes - it exists so that five titles
     line up across a row, and there is no row here. */
  .as-karj-ben { grid-template-columns: minmax(0, 1fr); row-gap: var(--as-m-5); }
  .as-karj-ben__title { height: auto; margin-top: var(--as-m-3); font-size: 20px; line-height: 28px; }
  .as-karj-ben__text  { margin-top: var(--as-m-2); line-height: 26px; }
  .as-karj-ben__icon  { width: 64px; height: 64px; }

  .as-karj-why__grid { gap: var(--as-m-5); }
  .as-karj-why__title { margin-bottom: 0; }

  /* Values: identical to .as-pasl-step. Photograph first on all four, numeral bottom-left over a
     scrim, icon beside the title, 16 inside the card against 48 between cards. */
  .as-karj-values__grid { gap: var(--as-m-5); }
  .as-karj-val { row-gap: var(--as-m-2); }

  .as-karj-val--media-first .as-karj-val__media,
  .as-karj-val--text-first  .as-karj-val__media { order: 1; margin-top: 0; }
  .as-karj-val--media-first .as-karj-val__body,
  .as-karj-val--text-first  .as-karj-val__body { order: 2; margin-top: 0; }

  .as-karj-val__media img { width: 100%; height: 220px; }

  .as-karj-val__media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
    pointer-events: none;
  }

  .as-karj-val__num { z-index: 1; }
  .as-karj-val--text-first  .as-karj-val__num,
  .as-karj-val--media-first .as-karj-val__num {
    left: var(--as-m-2);
    bottom: var(--as-m-1);
    right: auto;
    top: auto;
  }

  .as-karj-val__body {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: var(--as-m-2);
    align-items: center;
  }

  .as-karj-val__icon  { grid-area: 1 / 1; height: auto; }
  .as-karj-val__title { grid-area: 1 / 2; margin: 0; }
  .as-karj-val__text  { grid-column: 1 / -1; margin-top: var(--as-m-2); font-size: 16px; line-height: 26px; }

  .as-karj-join__grid { gap: var(--as-m-5); }
}

/* --- Archive and news cards on mobile -----------------------------------------
   "The Peržiūrėti button is not placed nicely in there, non existent gaps on it. Like it needs
   its own spacing, rather than looking like the card was there and the button was plopped on
   there with no reserved space" (Matas, 2026-08-19). Three separate causes, all real:

   1. The footer is `justify-content: space-between`, so at 390px the pill is shoved hard against
      the card's right inset with the city pressed against the left. Nothing reserves the row.
   2. The card's own padding is asymmetric by design - `9px 9px 27px` with the body adding 23
      left and 13 right, so the left inset is 32 and the right inset 22. Ten pixels is invisible
      at 1440 inside a 374px card and reads as a mistake inside a 390px one.
   3. The pill is 33px tall. Apple's minimum is 44, and unlike the filters and the "žiūrėti
      visus" link this one never got a `pointer: coarse` hit-area, so on a phone it is a 33px
      target - the smallest on the site.

   All three go away by giving the CTA its own full-width row: the button gets reserved space by
   definition, the insets become symmetric, and 44px of height comes free. Applied to all three
   card types at once so Projektai, Naujienos and the Homepage stay identical, which is what was
   asked for. */
@media (max-width: 767px) {
  .as-archive__grid > li,
  .as-news__grid > li { padding: var(--as-m-1) var(--as-m-1) var(--as-m-3); }

  .as-acard__body,
  .as-ncard__body { padding-left: var(--as-m-2); padding-right: var(--as-m-2); }

  .as-acard__foot,
  .as-ncard__foot,
  .as-pcard__foot {
    flex-direction: column;
    align-items: stretch;
    gap: var(--as-m-3);
    padding-top: var(--as-m-3);
  }

  .as-acard__more,
  .as-ncard__more,
  .as-pcard__more {
    width: 100%;
    min-width: 0;
    height: 44px;
  }

  .as-acard__place,
  .as-ncard__date { align-self: flex-start; }
}

/* --- Projektai filters on mobile ----------------------------------------------
   Four pills, content-sized, wrapping onto three rows that each ended at a different x. That is
   the same ragged right edge as everywhere else, and it is worse here because a control row is
   read as a unit - three different widths make it look like the pills fell where they landed.

   `flex: 1` makes every pill share its row, so all three rows end on the container's right edge.
   Considered and rejected: a horizontally scrolling strip, which is the usual news-site answer
   and keeps it to one line - but with only four categories it would push two of them off-screen,
   and a filter nobody can see is a filter nobody uses. Nothing is hidden here.

   Height goes back to 44 rather than the 36 the old mobile rule shrank it to. There is a
   `pointer: coarse` hit area propping that up, so it was never a functional failure, but a pill
   that measures 36 while claiming 44 only satisfies the audit - the row now genuinely is 44. */
@media (max-width: 767px) {
  .as-filters {
    margin-top: var(--as-m-5);
    padding-left: 0;
    gap: var(--as-m-2);
  }

  .as-filter {
    flex: 1 1 auto;
    justify-content: center;
    height: 44px;
    padding-inline: var(--as-m-2);
    /* Long Lithuanian category names on a 320: better a two-line pill than one that overflows. */
    white-space: normal;
    text-align: center;
  }

  .as-pager { margin-top: var(--as-m-5); }
}

/* --- Project detail hero on mobile --------------------------------------------
   Two things were wrong and one of them had been wrong at every viewport.

   THE INLINE HEIGHT. `<!-- wp:cover ... "minHeight":790 -->` makes the block write
   `style="min-height:790px"` onto the element, and an inline style outranks every stylesheet
   rule. So the 620 and 460 written for this hero had never applied ANYWHERE: on a 430x932 phone
   the hero was 790px - 85% of the screen - with 590px of photograph below the title and nothing
   else visible. Fixed at source by dropping the attribute; see patterns/projektas-single.php.

   THE FLOATING TITLE. With the height corrected the title still sat 200px down a 460px picture,
   belonging to nothing, in #f4f4f4 over whatever the client's photograph happens to be - and
   "Studija" over a white kitchen is very nearly invisible. Anchoring it to the bottom edge over
   a scrim binds it to its picture and makes the contrast independent of the photograph, which is
   the same fix and the same reasoning as the numerals on the step cards. */
@media (max-width: 767px) {
  .as-phero.wp-block-cover { align-items: flex-end; }

  .as-phero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    background: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0));
    pointer-events: none;
  }

  .as-phero .wp-block-cover__inner-container { position: relative; z-index: 2; }
  .as-phero .as-container { padding-top: 0; padding-bottom: var(--as-m-4); }
  .as-phero__title { color: var(--as-white); }
}

/* --- Article on mobile --------------------------------------------------------
   Same divergence as the desktop rules above, stepped down. 17px over a 390px column measures
   about 46 characters, which is the low end of the readable band and the most a phone allows;
   below 17 the line count climbs faster than comprehension. */
@media (max-width: 767px) {
  .as-post .as-post__body > * + * { margin-top: var(--as-m-4); }
  .as-post .as-post__body > p + p,
  .as-post .as-post__body > .as-post__para + .as-post__para { margin-top: var(--as-m-3); }

  .as-post-head .as-post__title { margin-top: var(--as-m-2); }
  .as-post__date { margin-top: var(--as-m-4); }

  /* A 560px cap on a 390px column is 143% of the viewport height on the shortest phones; the
     picture then occupies a whole screen with no text beside it to say what it is. */
  .as-post__body figure.wp-block-image img,
  .as-post__figure img { max-height: 340px; }
}

/* --- Kontaktai and the page-head buttons on mobile ----------------------------
   The left-anchored element on Kontaktai is the "Aptarti projektą" button: 189px wide, pinned to
   the gutter, with 221px of empty column beside it. Every page head has one of these and they all
   do it - Paslaugos, Karjera, the Homepage hero, the CTA band.

   Full-width is the ordinary phone answer and it is already used on this project for the Karjera
   CTA, so this only makes the existing decision consistent instead of leaving one button in five
   looking different. The pair on the Homepage hero stays side by side while it fits and stacks
   below that, because two full-width buttons in a row read as one control split in half. */
@media (max-width: 767px) {
  .as-kont-hero__btn,
  .as-pasl-head__btn,
  .as-karj-head__btn,
  .as-cta__btn,
  .as-cta .as-btn--cta { width: 100%; }

  .as-hero__actions { flex-wrap: wrap; gap: var(--as-m-2); }
  .as-hero__actions > .as-btn { flex: 1 1 240px; }

  /* Contacts: the tile column and the row gaps come onto the scale like everything else. */
  .as-kont-info__grid { gap: var(--as-m-6); }
  .as-kont-row + .as-kont-row,
  .as-kont-row:nth-child(3),
  .as-kont-row:nth-child(4) { margin-top: var(--as-m-4); }

  .as-kont-row__text,
  .as-kont-hours { font-size: 16px; line-height: 26px; }

  /* The schedule is two rows of day + time. `max-content 1fr` let the times sit wherever the
     longest day abbreviation happened to end; a fixed rail lines both times up on one vertical
     and gives the block a shape. */
  .as-kont-hours { grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--as-m-2); }

  /* Two content-sized buttons in a row leave a ragged gutter exactly like the filter pills did,
     and they are the last pair on the site that still did. Sharing the row puts both on the same
     two verticals as everything above them. */
  .as-karj-join__actions > .as-btn { flex: 1 1 auto; justify-content: center; }

  .as-kont-form { margin-top: 0; }
  .as-kont-form__title { margin-bottom: var(--as-m-3); }
}

/* --- The level below the section rhythm ---------------------------------------
   With the sections on the scale, the next thing the eye picks up is the gaps INSIDE them, and
   those were their own near-miss set: 20, 32, 33, 37, 48, 49, 50, 64, 65. The pairs are the
   giveaway - 32 and 33 mean the same thing, so do 48 / 49 / 50 and 64 / 65. Nobody chose a 1px
   difference; they are what nine Figma frames happen to contain, and one-pixel variation is
   indistinguishable from carelessness precisely because it cannot be read as intent.

   Two tiers, and that is all this level needs: 32 under a heading, 48 between blocks. */
@media (max-width: 767px) {
  .as-page-title { margin-top: var(--as-m-4); }
  .as-page-lead  { margin-top: var(--as-m-2); }
  .as-apie-hero__lead { margin-top: var(--as-m-4); }

  .as-services__grid,
  /* `.as-projects .as-projects__grid` is (0,2,0) further up, so a bare class loses to it - the
     same specificity trap that had silently disabled the Karjera and Paslaugos width releases. */
  .as-projects .as-projects__grid { margin-top: var(--as-m-4); }

  .as-apie-values__grid { margin-top: var(--as-m-5); }
  .as-apie-mv__row + .as-apie-mv__row { margin-top: var(--as-m-6); }
  .as-kont-info__grid { margin-top: var(--as-m-6); }
  .as-archive__grid,
  .as-news__grid { margin-top: var(--as-m-5); }
}

/* --- The tablet band gets the same treatment, 768-1023 -------------------------
   Found by looking rather than by any gate, and it is the same defect Matas reported on the
   phone. At two columns the four-across zig-zag still ran: a picture in column 1 sat beside a
   title in column 2 that belonged to a different step, and .as-pasl-step's row-gap of 32 was
   still larger than the 27 separating one step from the next, so proximity still pointed at the
   wrong neighbour.

   Karjera already declared the principle at this width - "the zig-zag is a 4-across arrangement;
   at 2 columns it just reads as a broken rhythm" - but ran text-then-photo, while the phone rules
   run photo-first. One component, two bands, two different orders is not a rhythm either. Both
   components now run photo-first from 1023 down, which is one shape at every width below the
   design frame. */
@media (max-width: 1023px) {
  .as-pasl-process__grid { gap: var(--as-m-5) var(--as-m-3); }
  .as-pasl-step { row-gap: var(--as-m-2); }
  .as-pasl-step__media { order: 1; }
  .as-pasl-step--media-first .as-pasl-step__text,
  .as-pasl-step__text { order: 2; margin-top: 0; }
  .as-pasl-step__media img { height: 260px; }

  .as-karj-values__grid { gap: var(--as-m-5) var(--as-m-3); }
  .as-karj-val { row-gap: var(--as-m-2); }
  .as-karj-val--media-first .as-karj-val__media,
  .as-karj-val--text-first  .as-karj-val__media { order: 1; margin-top: 0; }
  .as-karj-val--media-first .as-karj-val__body,
  .as-karj-val--text-first  .as-karj-val__body { order: 2; margin-top: 0; }
  .as-karj-val__media img { width: 100%; height: 260px; }

  /* The numeral needs its scrim at every width it is drawn over a photograph, not only on a
     phone - step 02's picture is bright here too. */
  .as-pasl-step__media,
  .as-karj-val__media { position: relative; }

  .as-pasl-step__media::after,
  .as-karj-val__media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
    pointer-events: none;
  }

  .as-pasl-step__num,
  .as-karj-val__num { z-index: 1; }

  .as-pasl-step--text-first  .as-pasl-step__num,
  .as-pasl-step--media-first .as-pasl-step__num,
  .as-karj-val--text-first   .as-karj-val__num,
  .as-karj-val--media-first  .as-karj-val__num {
    left: var(--as-m-2);
    bottom: var(--as-m-1);
    right: auto;
    top: auto;
  }
}

/* --- Three overflows at 1024, found by sweeping widths instead of assuming ----
   Matas asked "do these errors not repeat elsewhere?" after the long-project bug. They do. Running
   the crush and overlap checks over all 40 pages at 390 / 430 / 768 / 1024 / 1280 / 1440 - rather
   than over two pages at 430 - turned that question into three measured defects, none of which is
   mobile and none of which any existing gate could see. They do not cross the viewport edge, so
   the overflow sweep is right to stay quiet; they collide with their own neighbours instead.

   1. THE CARD PLACE at 1024. `.as-acard__place` is a flex item beside the button with min-width:0,
      and `.as-acard__city` is `white-space: nowrap`. At two columns the row is 36px short, so
      "Kaunas" simply ran under the button. All six cards, every page of the archive.
   2. THE KARJERA BENEFIT TITLES at 1024. Three columns of 144px against "Konkurencingas", which
      needs 173 as one word. Lithuanian compounds are long; a fixed narrow track will meet one.
   3. AN EXCERPT THAT STARTS WITH A BARE URL. One article's opening line is
      `https://structum.lt/straipsnis/griciupio-...`, and a URL has no break opportunities, so it
      pushed 55px past its card. Clipped rather than visibly broken, because the excerpt is
      line-clamped - but clipping a URL mid-path is not a design, it is luck. */

/* Let the city drop below the button rather than under it.
   BOUNDED AT BOTH ENDS on purpose. Below 768 the footer is already `flex-direction: column`, and
   in a column container `flex-wrap: wrap` plus a 100% basis makes items wrap into new COLUMNS
   instead of new rows - which blew the card 93px wider than its own grid cell the first time this
   was written unbounded. Caught by re-running the gate at 430 rather than by reading the rule. */
@media (min-width: 768px) and (max-width: 1199px) {
  .as-acard__foot { flex-wrap: wrap; row-gap: 12px; }
  .as-acard__place { flex: 1 1 100%; min-width: 0; }
}

/* Long compounds break rather than escape. `anywhere` and not `break-word`: only `anywhere` also
   shrinks the box's min-content contribution, which is what stops the grid track from being
   sized by the longest word in the first place. */
.as-karj-ben__title,
.as-karj-val__title,
.as-pasl-step__title,
.as-svc__title,
.as-acard__title,
.as-ncard__title,
.as-pcard__title { overflow-wrap: anywhere; }

/* Excerpts and card bodies carry whatever the client wrote, including raw URLs. */
.as-acard__text,
.as-ncard__text,
.as-pcard__text,
.as-post__body { overflow-wrap: break-word; }

/* A hard <br> in a card title is the design's line break at 1440. On a phone the title has the
   whole column and the break only costs a line.

   THE PATTERNS CARRY A SPACE BEFORE EACH <br>, and that is load-bearing, not tidiness. Hiding a
   bare `Profesionali<br>komanda` renders "Profesionalikomanda" - which is exactly what this rule
   did on its first run, and it is a worse defect than the wasted line it was fixing. On desktop
   the line break swallows the trailing space, so nothing moves there. */
@media (max-width: 767px) {
  .as-karj-ben__title br,
  .as-karj-why__title br { display: none; }
}

/* --- Karjera media: even gutters on both sides --------------------------------
   "Karjera images not centred/filled perfectly, gaps should be even on both sides" (Matas,
   2026-08-19). Measured: `.as-karj-why__media` sat at x20 w343 inside a 390px column - 20px of
   gutter on the left and 67 on the right. The 343 is the figure's Figma width, released to
   `width: auto` at 1439 but with `max-width: 343px` left behind it, so the cap simply took over
   from the width. The other two are 430 and 600, wider than any phone, so only this one bit.

   These are photographs in a single column; they should span it. */
@media (max-width: 767px) {
  .as-karj-head__media,
  .as-karj-why__media,
  .as-karj-join__media {
    width: auto;
    max-width: none;
    margin-left: 0;
  }

  .as-karj-head__media img,
  .as-karj-why__media img,
  .as-karj-join__media img { width: 100%; height: auto; }
}

/* --- Karjera benefits: same card language as everything else ------------------
   "Not sure if the kodel verta pasijungti stuff is the best version, still looks really bad and
   right anchored" (Matas, 2026-08-19). The right-anchoring was the 199-223px caps and is gone;
   what was left is that this is the only list on the site still using its own arrangement. The
   step cards and the value cards both put the icon BESIDE the title, and both use an edge to say
   where one item ends - the audience checklist uses a rule for exactly the same reason.

   So these get the identical treatment rather than a third one. That is what "consistently
   similar" has to mean: same head shape, same internal proximity, same separator. It also halves
   the height of each item's head, which matters when there are five of them stacked. */
@media (max-width: 767px) {
  .as-karj-ben__item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: var(--as-m-3);
    align-items: center;
  }

  .as-karj-ben__icon  { grid-area: 1 / 1; width: 56px; height: 56px; }
  .as-karj-ben__title { grid-area: 1 / 2; margin: 0; font-size: 20px; line-height: 28px; }
  .as-karj-ben__text  { grid-column: 1 / -1; margin-top: var(--as-m-3); }

  /* The separator, not a gap: five blocks of icon-title-paragraph at an even 48px read as one
     long column of text. An edge tells the eye where an item stops. */
  .as-karj-ben { row-gap: 0; }
  .as-karj-ben__item + .as-karj-ben__item {
    margin-top: var(--as-m-4);
    padding-top: var(--as-m-4);
    border-top: 1px solid var(--as-surface-2);
  }
}

/* ==========================================================================
   SECTION RHYTHM (2026-10-01, consistency pass, second round)
   ==========================================================================
   Every plain section carries the shared --as-section-y above and below. Two plain sections in a
   row would therefore stack two of them (160px) - the "zones are huge" complaint - so the second
   one drops its top: plain-to-plain is ONE unit, band-to-plain is one unit, and the CTA card sits
   one unit under whatever precedes it on every page. Bands (sections that paint a background) keep
   their own padding. The page head and the project facts card never pass their space on, because
   they end with no bottom padding of their own. */
main > :not(.as-hero, .as-apie-hero, .wp-block-cover, .as-apie-kelias, .as-projects, .as-karj-join, .as-kont-info, .as-kont-map, .as-page-head, .as-pfacts)
  + :not(.as-hero, .as-apie-hero, .wp-block-cover, .as-apie-kelias, .as-projects, .as-karj-join, .as-kont-info, .as-kont-map, .as-page-head, .as-pfacts) {
  padding-top: 0;
}

/* ==========================================================================
   PROJECT PAGE (2026-10-01) - one layout for every project
   ==========================================================================
   hero -> facts card overlapping the hero -> "Apie projektą" (heading | text) -> one slider with
   every photo -> CTA. Nothing moves with the length of the description or the number of photos;
   see the note in patterns/projektas-single.php for what it replaced. */

/* The hero keeps room under its title for the card that overlaps it. Tablet and up only: the
   phone pass further up owns the phone hero, and an unscoped rule down here would override it. */
@media (min-width: 768px) {
  .as-phero .as-container { padding-bottom: 128px; }
  .as-overview { padding-block: var(--as-section-y); }
}

/* Facts: one white card straddling the hero's bottom edge, so photo and page read as one piece.
   Columns are generated per stat present, so two stats make two equal halves, not a gap. */
.as-pfacts { position: relative; z-index: 2; margin-top: -48px; padding: 0; }

.as-pstats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin: 0;
  padding: 32px 0;
  background: var(--as-white);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(17, 24, 31, 0.08);
}

.as-pstat {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-content: center;
  min-width: 0;
  padding: 0 40px;
}

.as-pstat + .as-pstat { border-left: 1px solid var(--as-surface-2); }

.as-pstat__icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: var(--as-surface-2);
  border-radius: 8px;
}

.as-pstat__icon svg { display: block; width: 28px; height: 28px; }

.as-pstat__label {
  align-self: end;
  margin: 0;
  color: var(--as-text-soft);
  font-size: var(--as-fs-small);
  line-height: var(--as-lh-small);
}

.as-pstat__value {
  align-self: start;
  margin: 2px 0 0;
  color: var(--as-ink);
  font-size: var(--as-fs-h4);
  font-weight: 600;
  line-height: var(--as-lh-h4);
  overflow-wrap: anywhere;
}

/* About: heading in the left third, text in the right two thirds - the same split at any length. */

.as-overview__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: 64px;
  align-items: start;
}

/* Pinned while a long description scrolls past, so the left third is never just empty space. */
.as-overview__title { position: sticky; top: 40px; margin: 0; }

.as-overview__text {
  max-width: 720px;
  color: var(--as-ink-soft);
  font-size: var(--as-fs-body);
  line-height: var(--as-lh-body);
}

.as-overview__text > * { margin: 0 0 16px; }
.as-overview__text > *:last-child { margin-bottom: 0; }

/* The first paragraph is the lead, whatever the client wrote after it. */
.as-overview__text > p:first-child {
  margin-bottom: 24px;
  color: var(--as-ink);
  font-size: var(--as-fs-lead);
  line-height: var(--as-lh-lead);
}

.as-overview__text img { border-radius: 10px; }

@media (max-width: 1023px) {
  .as-overview__grid { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .as-overview__title { position: static; }
  .as-pstat { padding: 0 24px; }
}

@media (max-width: 767px) {
  /* One stat per row on a phone: three side-by-side tiles at ~110px each could not hold a value
     like "520 000 m²" without breaking it mid-number. */
  .as-pfacts { margin-top: 0; padding-top: var(--as-m-4); }
  .as-pstats { grid-auto-flow: row; grid-auto-columns: auto; padding: 8px 24px; }
  .as-pstat { padding: 16px 0; }
  .as-pstat + .as-pstat { border-left: 0; border-top: 1px solid var(--as-surface-2); }
  .as-pstat__icon { width: 48px; height: 48px; }
  .as-pstat { grid-template-columns: 48px minmax(0, 1fr); }
  .as-pstat__icon svg { width: 24px; height: 24px; }
}

/* ==========================================================================
   CARDS (2026-10-01) - one card on the page, one card over imagery
   ==========================================================================
   Measured before this: two backgrounds (#fdfcfd, #fff), two radii (10, 12), six paddings
   (49/47/55/49, 40, 29/30/40/40, 49, 9/9/24, 9/9/27) and a shadow on three cards for no stated
   reason. Now a card that sits ON the page is white, 12px, with a hairline you can just see; a card
   that floats OVER a photo or map (the project facts, the map card) keeps a shadow, because there
   the shadow is what separates it from the picture. Text cards share one 40px padding on desktop;
   media cards keep their small inset around the image. */
:root { --as-card-border: 1px solid #eceef1; }

.as-svc,
.as-apie-value,
.as-pasl-audcard,
.as-pasl-card,
.as-cta__box,
.as-archive__grid > li,
.as-news__grid > li {
  background: var(--as-white);
  border: var(--as-card-border);
  border-radius: 12px;
  box-shadow: none;
}

@media (min-width: 768px) {
  .as-svc,
  .as-apie-value,
  .as-pasl-audcard { padding: 40px; }
}

/* ==========================================================================
   ICON TILES (2026-10-01) - one tile
   ==========================================================================
   Measured before: nine tiles in five sizes (40/46/56/64/78), five radii (4.18/6/7.1/8/8) and two
   greys. Every content tile is now 56px, radius 8, one grey, glyph within 28px - the size the
   project facts and the Kontaktai rows already use. The map card's 40px tile is left compact on
   purpose: the whole card is small. Tablet and up only; the phone pass keeps its own steps. */
@media (min-width: 768px) {
  .as-stat__icon,
  .as-svc__icon,
  .as-cta__icon,
  .as-apie-value__chip,
  .as-pasl-audcard__icon,
  .as-karj-ben__icon,
  .as-kont-tile {
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 8px;
  }

  .as-stat__icon,
  .as-svc__icon,
  .as-apie-value__chip,
  .as-pasl-audcard__icon,
  .as-karj-ben__icon,
  .as-kont-tile { background: var(--as-surface-2); }

  :is(.as-stat__icon, .as-svc__icon, .as-cta__icon, .as-apie-value__chip, .as-pasl-audcard__icon, .as-karj-ben__icon, .as-kont-tile) svg {
    width: 28px;
    height: 28px;
  }

  :is(.as-stat__icon, .as-svc__icon, .as-cta__icon, .as-apie-value__chip, .as-pasl-audcard__icon, .as-karj-ben__icon, .as-kont-tile) img {
    width: auto;
    height: auto;
    max-width: 28px;
    max-height: 28px;
  }

  /* The Kontaktai glyphs are tightly cropped image exports while the rest carry padding, so at the
     same box they read larger and heavier than their neighbours - the trap in PF-000's notes. */
  .as-kont-tile img { max-width: 24px; max-height: 24px; }
}

/* ==========================================================================
   TYPE SCALE ON PHONES (2026-10-01) - the same seven sizes, stepped down
   ==========================================================================
   Below 768 every heading drops one or two points on the SAME scale rather than to a size of its
   own: page titles 48 -> 36, section headings 36 -> 24, card titles 24 -> 20, small titles 20 -> 16,
   and the intro joins body at 16 (it stays the darker ink, which is what marks it as the intro).
   Body text never shrinks: GOV.UK keeps 19 on phones for the same reason. */
@media (max-width: 767px) {
  :root {
    --as-fs-h1:   36px;  --as-lh-h1:   44px;
    --as-fs-h2:   24px;  --as-lh-h2:   32px;
    --as-fs-h3:   20px;  --as-lh-h3:   28px;
    --as-fs-h4:   16px;  --as-lh-h4:   24px;
    --as-fs-lead: 16px;  --as-lh-lead: 26px;
  }
}